* { box-sizing: border-box; }

html { scroll-behavior: smooth; overflow-x: hidden; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: "Plus Jakarta Sans", Arial, sans-serif;
  line-height: 1.55;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--pink-deep); outline-offset: 4px; }

.skip-link {
  position: fixed;
  left: 1rem;
  top: -5rem;
  z-index: 10;
  padding: .75rem 1rem;
  border-radius: 10px;
  background: var(--ink);
  color: var(--white);
}

.skip-link:focus { top: 1rem; }
.container { width: calc(100% - 32px); max-width: var(--container); margin-inline: auto; }
.section { position: relative; padding: 72px 0; overflow: hidden; }
.section-pink { background: var(--pink-surface); }
.section-white { background: var(--paper); }
.section-lavender { background: var(--lavender); }

.site-header {
  position: relative;
  z-index: 5;
  background: var(--pink-surface);
  border-bottom: 1px solid rgba(43, 26, 155, .07);
}

.nav-shell { position: relative; min-height: 70px; display: flex; align-items: center; gap: 1.5rem; }
.brand-lockup { display: inline-flex; align-items: center; gap: .55rem; color: var(--ink); }
.brand-lockup img { flex: 0 0 auto; object-fit: contain; }
.brand-wordmark { font-size: .92rem; font-weight: 800; letter-spacing: .06em; }
.header-cta { display: none; }
.primary-nav { position: absolute; left: 16px; right: 16px; top: calc(100% + 8px); display: none; align-items: stretch; gap: .2rem; padding: .7rem; border: 1px solid var(--line); border-radius: 18px; background: var(--paper); box-shadow: var(--shadow-card); font-size: .8rem; font-weight: 700; }
.primary-nav.is-open { display: grid; }
.primary-nav > a:not(.button) { min-height: 48px; display: inline-flex; align-items: center; padding: .5rem .7rem; }
.primary-nav > a:not(.button):hover, .section-nav-row nav a:hover, .footer-links a:hover { color: var(--pink-deep); }
.menu-toggle { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: .5rem .75rem; border: 1px solid var(--line); border-radius: var(--radius-button); background: transparent; color: var(--ink); cursor: pointer; }
.menu-icon { display: grid; gap: 4px; }
.menu-icon i { display: block; width: 18px; height: 2px; background: currentColor; }

.button { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: 48px; padding: .7rem 1.35rem; border: 1px solid transparent; border-radius: var(--radius-button); font-size: .82rem; font-weight: 800; line-height: 1; cursor: pointer; transition: transform .2s var(--ease), box-shadow .2s var(--ease), background-color .2s ease; }
.button:hover { transform: translateY(-2px); box-shadow: 0 10px 18px rgba(43, 26, 155, .18); }
.button:active { transform: translateY(0) scale(.98); }
.button-small { min-height: 40px; padding: .55rem 1rem; font-size: .72rem; }
.button-pink { background: var(--pink-accent); color: var(--ink-dark); }
.button-purple { background: var(--ink); color: var(--white); }
.button-row { display: flex; align-items: center; gap: 1.3rem; flex-wrap: wrap; }
.hero .button { min-height: 40px; padding: .58rem 1rem; font-size: .72rem; }
.hero .text-link { min-height: 40px; font-size: .72rem; }
.text-link { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; color: var(--ink); font-size: .8rem; font-weight: 800; }
.text-link:hover { color: var(--pink-deep); }

.hero { padding: 58px 0 78px; }
.hero-grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: 3rem; }
.hero-copy { min-width: 0; max-width: 510px; }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { font-family: Fraunces, Georgia, serif; font-weight: 700; letter-spacing: -.045em; line-height: 1.04; }
h1 { max-width: 620px; margin-bottom: 1.15rem; font-size: clamp(2.7rem, 3.25vw, 3.4rem); }
h1 span { color: var(--ink); }
h2 { margin-bottom: 1rem; font-size: clamp(2.15rem, 6vw, 3.8rem); }
.hero-lead { max-width: 26rem; margin-bottom: 1.45rem; color: var(--ink-soft); font-size: .86rem; line-height: 1.48; }
.hero-visual { width: 100%; min-width: 0; max-width: 100%; margin: 0; }
.hero-laptop { display: block; width: 100%; max-width: 100%; height: auto; filter: drop-shadow(0 18px 18px rgba(36, 22, 111, .18)); }
.hero-shape { position: absolute; border-radius: 50%; background: rgba(244, 140, 175, .12); pointer-events: none; }
.hero-shape-one { right: 0; bottom: -150px; width: 220px; height: 220px; }
.hero-shape-two { top: 56%; left: 0; width: 120px; height: 120px; background: rgba(216, 213, 238, .2); }

.section-intro { max-width: 500px; }
.section-intro h2, .pricing-heading h2, .closing-content h2 { font-size: clamp(2.15rem, 3.4vw, 3.1rem); }
.section-intro > p:not(.privacy-support), .pricing-heading > p, .privacy-support { color: var(--ink-soft); font-size: .86rem; }
.overview-grid, .whole-grid, .privacy-grid, .faq-grid { display: grid; align-items: start; gap: 2.6rem; }
.chapter-list, .control-list { display: grid; gap: 1.35rem; margin: 0; padding: 0; list-style: none; }
.chapter-list li, .control-list li { display: grid; grid-template-columns: 34px 1fr; gap: .7rem; align-items: start; }
.chapter-number, .control-mark { color: var(--pink-deep); font-size: .72rem; font-weight: 800; }
.chapter-list h3, .control-list h3 { margin: 0 0 .18rem; color: var(--ink); font-size: .82rem; }
.chapter-list p, .control-list p { margin: 0; color: var(--ink-soft); font-size: .67rem; line-height: 1.45; }
.overview-visual { margin: 0; }
.overview-visual img { width: 100%; max-width: 346px; margin-inline: auto; filter: drop-shadow(0 18px 18px rgba(36, 22, 111, .18)); }

.section-whole-picture { padding: 88px 0; background: #ffeff4; }
.whole-grid { position: relative; z-index: 1; align-items: center; }
.whole-shape, .privacy-shape, .closing-shape { position: absolute; pointer-events: none; }
.whole-shape { bottom: -140px; left: 30px; width: 180px; height: 180px; background: rgba(246, 179, 201, .24); transform: rotate(35deg); }
.whole-visuals { display: block; margin: 0; }
.whole-visuals img { width: 100%; max-width: 720px; margin-left: auto; filter: drop-shadow(0 22px 24px rgba(36, 22, 111, .22)); }

.section.feature-section { padding: 72px 0; background: #fff; color: #1800ad; }
.feature-shape { position: absolute; pointer-events: none; }
.feature-shape-top { top: 66px; left: 76px; width: 350px; height: 380px; background: #fee9ef; transform: rotate(-34deg); }
.feature-layout { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, .37fr) minmax(0, .63fr); align-items: center; gap: clamp(3rem, 5.5vw, 5rem); }
.feature-heading { margin: 0; }
.feature-heading h2 { width: 430px; max-width: none; margin-bottom: 0; color: #1800ad; font-size: clamp(2.8rem, 3.2vw, 3rem); font-weight: 600; }
.feature-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .65rem; }
.feature-item { display: grid; align-content: start; gap: 1rem; min-height: 172px; padding: 1.05rem .85rem .9rem; border: 1px solid rgba(43, 26, 155, .08); border-radius: 42px; background: #ffcfdd; box-shadow: 0 10px 18px rgba(75, 53, 146, .13); }
.feature-icon { width: 54px; height: 54px; flex: 0 0 auto; object-fit: contain; }
.feature-item[data-visual="feature-billing"] .feature-icon,
.feature-item[data-visual="feature-history"] .feature-icon { width: 80px; height: 80px; margin-top: -15px; margin-bottom: -15px; }
.feature-item h3 { margin: 0 0 .2rem; color: #1800ad; font-size: .86rem; line-height: 1.15; }
.feature-item p { margin: 0; color: #1800ad; font-size: .7rem; line-height: 1.4; }
.section-nav-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 4.4rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.brand-lockup-compact { align-items: flex-start; }
.brand-lockup-compact img { width: 36px; height: 36px; }
.brand-lockup-compact .brand-copy { display: grid; gap: .05rem; }
.brand-lockup-compact .brand-wordmark { font-size: 1.2rem; line-height: 1; }
.brand-lockup-compact .brand-tagline { color: var(--pink-deep); font-size: .5rem; font-weight: 800; line-height: 1; }
.feature-section .section-nav-row { display: grid; grid-template-columns: 210px 1fr auto; }
.feature-section .section-nav-row nav { display: flex; gap: 2.5rem; margin-left: 22px; font-size: 1.1rem; font-weight: 500; }
.feature-section .section-nav-row .button-small { min-height: 38px; padding: .5rem .88rem; font-size: .95rem; }

.privacy-section { padding: 88px 0; }
.privacy-grid { position: relative; z-index: 1; align-items: center; }
.privacy-shape { top: -90px; right: 30px; width: 200px; height: 200px; background: rgba(205, 170, 211, .25); transform: rotate(14deg); }
.privacy-support { margin: 1.5rem 0 0; font-weight: 800; }
.privacy-visual { position: relative; margin: 0; overflow: visible; }
.privacy-visual img { width: 100%; max-width: 513px; margin-inline: auto; filter: drop-shadow(0 22px 24px rgba(36, 22, 111, .2)); }

.section.pricing-section { --pricing-content-scale: 1.06; --pricing-heading-scale: 1.06; padding-top: 180px; padding-bottom: 307px; overflow: hidden; background: #fff; color: #1800ad; }
.pricing-section::before { content: ""; position: absolute; z-index: 0; top: 8.9%; left: 50%; width: min(82%, 1180px); height: 74%; background: #ffeef3; transform: translateX(-50%); }
.pricing-shape { position: absolute; pointer-events: none; background: rgba(244, 140, 175, .16); }
.pricing-shape-top { top: 20px; right: 41px; width: 235px; height: 360px; background: #fee9ef; transform: rotate(12deg); }
.pricing-shape-bottom { bottom: 0; left: -15px; width: 320px; height: 350px; background: rgba(244, 140, 175, .12); transform: rotate(2deg); }
.pricing-section .container { position: relative; z-index: 1; max-width: 1020px; }
.pricing-heading { max-width: 820px; margin: 0 auto; text-align: center; }
.pricing-heading h2 { margin-bottom: 0; color: #1800ad; font-size: calc(clamp(2.6rem, 4vw, 3.5rem) * var(--pricing-heading-scale)); font-weight: 600; }
.pricing-heading > p { max-width: 620px; margin-inline: auto; font-size: calc(1.15rem * var(--pricing-heading-scale)); line-height: 1.35; }
.pricing-grid { display: grid; grid-template-columns: 1fr; gap: 1.75rem; }
.pricing-top-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem; }
.pricing-card { min-height: 502px; height: 502px; overflow: hidden; padding: 2.2rem; border: 1px solid rgba(75, 53, 146, .14); border-radius: 46px; background: #e6d5eb; }
@media (min-width: 1200px) {
  .pricing-top-grid > .pricing-card { height: auto; min-height: 502px; overflow: visible; }
}
.pricing-lower-panel { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: 1.35rem; grid-column: 1 / -1; min-height: 270px; padding: 0; border: 1px solid rgba(75, 53, 146, .14); border-radius: 46px; background: #e6d5eb; }
.pricing-divider { width: 4px; align-self: stretch; margin: 1.35rem 0; background: rgba(244, 140, 175, .9); }
.pricing-card-wide { min-width: 0; align-self: stretch; display: flex; flex-direction: column; justify-content: flex-start; padding: 1.35rem 1.45rem; }
.pricing-card-head { display: flex; align-items: flex-start; gap: .7rem; }
.pricing-symbol { width: calc(78px * var(--pricing-content-scale)); height: calc(78px * var(--pricing-content-scale)); flex: 0 0 auto; object-fit: contain; border: 0; border-radius: 0; background: transparent; }
.pricing-card h3 { margin: .02rem 0 .1rem; color: #1800ad; font-family: Fraunces, Georgia, serif; font-size: calc(2.1rem * var(--pricing-content-scale)); font-weight: 600; }
.pricing-card-head p { margin: 0; color: #1800ad; font-family: Fraunces, Georgia, serif; font-size: calc(1rem * var(--pricing-content-scale)); font-weight: 700; line-height: 1.2; }
.pricing-card-wide > p { margin: 1rem 0 0; color: #4c36bc; font-size: calc(.98rem * var(--pricing-content-scale)); line-height: 1.35; }
.pricing-status { display: inline-flex; align-items: baseline; gap: .45rem; margin: 1rem 0 1.1rem; padding: .38rem .64rem; border-radius: 9px; background: rgba(255, 255, 255, .68); color: #4c36bc; font-size: calc(1.05rem * var(--pricing-content-scale)); font-weight: 800; white-space: nowrap; }
.pricing-status small { font-size: calc(.72rem * var(--pricing-content-scale)); font-weight: 600; }
.pricing-card ul { display: grid; gap: .28rem; margin: 0; padding: 0; list-style: none; color: #4c36bc; font-size: calc(1rem * var(--pricing-content-scale)); line-height: 1.42; }
.pricing-list-core { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(9, auto); grid-auto-flow: column; column-gap: 1rem; }
.pricing-list-spacer { visibility: hidden; }
.pricing-card li::before { content: "✓"; margin-right: .35rem; color: var(--pink-deep); font-weight: 800; }
.pricing-card .text-link { margin-top: .8rem; font-size: calc(.8rem * var(--pricing-content-scale)); }
.pricing-chips { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem; margin-top: 1.15rem; }
.pricing-chips > span { padding: .4rem .65rem; border-radius: 999px; background: rgba(255, 255, 255, .58); color: #4c36bc; font-size: calc(.64rem * var(--pricing-content-scale)); font-weight: 800; }
.pricing-chips .text-link { margin: 0; }

.faq-section { --faq-content-scale: 1.18; --faq-pill-scale: 1.12; padding: 88px 0; }
.faq-grid { align-items: start; }
.faq-section .section-intro { position: relative; }
.faq-section .section-intro h2 { font-size: calc(clamp(2.15rem, 6vw, 3.8rem) * var(--faq-content-scale)); }
.faq-section .section-intro > p:not(.section-kicker) { font-size: calc(.86rem * 1.1); }
.section-kicker { margin: 0 0 .8rem; color: var(--pink-deep); font-size: .7rem; font-weight: 800; letter-spacing: .04em; }
.faq-illustration { width: calc(180px * var(--faq-content-scale)); height: calc(180px * var(--faq-content-scale)); margin: 2rem 0 0 1rem; object-fit: contain; }
.faq-list { display: grid; gap: .5rem; }
.faq-list details { border-radius: 18px; background: var(--pink-accent); box-shadow: 0 5px 0 rgba(43, 26, 155, .1); }
.faq-list summary { display: flex; align-items: flex-start; gap: .2rem; min-height: calc(50px * var(--faq-pill-scale)); padding: calc(.75rem * var(--faq-pill-scale)) calc(1rem * var(--faq-pill-scale)); color: var(--ink-dark); font-size: calc(.7rem * var(--faq-pill-scale)); font-weight: 800; cursor: pointer; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; font-size: 1.2rem; line-height: 1; }
.faq-list details[open] summary::after { content: "−"; }
.faq-list details[open] summary::after { display: none; }
.faq-prefix { flex: 0 0 auto; color: var(--pink-deep); font-weight: 800; }
.faq-list details p { max-width: 70ch; margin: 0; padding: 0 1rem .5rem; color: var(--ink-dark); font-size: calc(.66rem * var(--faq-pill-scale)); line-height: 1.4; }

.closing-section { display: flex; align-items: center; min-height: 370px; text-align: center; }
.closing-content { --closing-heading-scale: 1.15; --closing-copy-scale: 1.1; --closing-cta-scale: 1.12; position: relative; z-index: 1; max-width: 650px; }
.closing-content h2 { font-size: calc(clamp(2.15rem, 3.4vw, 3.1rem) * var(--closing-heading-scale)); }
.closing-content p { max-width: 520px; margin: 0 auto 1.4rem; color: var(--ink-soft); font-size: calc(.86rem * var(--closing-copy-scale)); }
.closing-content .button { min-height: calc(48px * var(--closing-cta-scale)); padding: calc(.7rem * var(--closing-cta-scale)) calc(1.35rem * var(--closing-cta-scale)); font-size: calc(.82rem * var(--closing-cta-scale)); }
.closing-shape-one { bottom: -85px; left: 30px; width: 160px; height: 160px; background: rgba(189, 154, 208, .2); transform: rotate(-22deg); }
.closing-shape-two { top: -70px; right: 24px; width: 140px; height: 140px; background: rgba(240, 167, 202, .24); transform: rotate(11deg); }

.site-footer { position: relative; isolation: isolate; overflow: hidden; padding: 48px 0 32px; background: #fff; }
.site-footer::before, .site-footer::after { content: ""; position: absolute; z-index: -1; pointer-events: none; }
.site-footer::before { top: -125px; left: -105px; width: 390px; height: 360px; background: #fee9ef; transform: rotate(-34deg); }
.site-footer::after { top: -34px; right: -104px; width: 310px; height: 470px; background: rgba(244, 140, 175, .14); transform: rotate(12deg); }
.footer-grid { position: relative; z-index: 1; display: grid; gap: 1.8rem; }
.footer-brand p { margin: 1rem 0 0; color: var(--pink-deep); font-size: .82rem; }
.footer-links { display: grid; align-content: start; gap: .55rem; }
.footer-links h2 { margin: 0 0 .55rem; font-family: inherit; font-size: .99rem; font-weight: 800; letter-spacing: 0; }
.footer-links a { min-height: 36px; padding: 0; color: var(--ink-soft); font-size: .86rem; }
.site-footer .brand-lockup img { width: 56px; height: 56px; }
.site-footer .brand-wordmark { font-size: 1.44rem; }
.site-footer .brand-tagline { font-size: .56rem; }

.cta-dialog { width: calc(100% - 32px); max-width: 440px; padding: 0; border: 0; border-radius: var(--radius-card); background: var(--paper); color: var(--ink); box-shadow: 0 32px 70px rgba(36, 22, 111, .28); }
.cta-dialog::backdrop { background: rgba(36, 22, 111, .34); backdrop-filter: blur(3px); }
.dialog-inner { position: relative; padding: 2rem; }
.dialog-close { position: absolute; top: .9rem; right: .9rem; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--pink-wash); color: var(--ink); font-size: 1.5rem; cursor: pointer; }
.dialog-inner h2 { padding-right: 2rem; font-size: 2rem; }
.dialog-inner p:not(.section-kicker) { color: var(--ink-soft); font-size: .82rem; }
.is-revealed { animation: reveal-in .38s var(--ease) both; }
@keyframes reveal-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .is-revealed { animation: none; }
}

.reveal-ready [data-reveal] { opacity: 0; }
.reveal-ready [data-reveal].is-revealed { opacity: 1; }