/**
 * Design: Cartografia Serena — editorial claro, azul orientador, rotas suaves,
 * contraste generoso e movimento discreto. Referência completa em /ideas.md.
 */
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Manrope:wght@400;500;600;700;800&display=swap');
:root {
  --radius: 1rem;
  --background: oklch(0.992 0.003 250);
  --foreground: oklch(0.28 0.045 249);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.28 0.045 249);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.28 0.045 249);
  --primary: oklch(0.46 0.16 253);
  --primary-foreground: oklch(0.99 0.002 250);
  --secondary: oklch(0.95 0.017 244);
  --secondary-foreground: oklch(0.32 0.05 249);
  --muted: oklch(0.963 0.009 249);
  --muted-foreground: oklch(0.51 0.034 249);
  --accent: oklch(0.93 0.028 245);
  --accent-foreground: oklch(0.32 0.05 249);
  --border: oklch(0.89 0.013 247);
  --input: oklch(0.89 0.013 247);
  --ring: oklch(0.46 0.16 253);
  --ink: #17324d;
  --navy: #102a43;
  --horizon: #1f59b6;
  --sky: #dcecf8;
  --mist: #f3f8fc;
  --warm: #fbfcfe;
  --serif: "DM Serif Display", Georgia, serif;
  --sans: "Manrope", Arial, sans-serif;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

* { border-color: var(--border); }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--sans); background: var(--warm); color: var(--ink); }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
button:not(:disabled), a[href] { cursor: pointer; }

.container { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 1.5rem; }
.site-header { position: sticky; z-index: 50; top: 0; border-bottom: 1px solid rgba(203, 219, 232, .72); background: rgba(251,252,254,.88); backdrop-filter: blur(16px); }
.header-inner { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 1.75rem; }
.brand, .footer-brand { display: inline-flex; align-items: center; gap: .7rem; flex: none; }
.brand-mark { width: 43px; height: 43px; object-fit: contain; }
.brand-wordmark { display: flex; align-items: baseline; gap: .34rem; color: var(--navy); line-height: 1; }
.brand-wordmark span { font: 800 1.04rem var(--sans); letter-spacing: -.06em; }
.brand-wordmark em { font: italic 1.12rem var(--serif); }
.brand-rule { width: 22px; height: 1px; margin-left: .05rem; background: linear-gradient(90deg, var(--horizon), transparent); }
.desktop-nav { display: flex; align-items: center; gap: 1.75rem; margin-left: auto; font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: #49647e; }
.desktop-nav a { transition: color .18s var(--ease-out); }
.desktop-nav a:hover { color: var(--horizon); }
.header-cta { display: inline-flex; align-items: center; gap: .5rem; padding: .72rem 1rem; border: 1px solid #9fc1e8; border-radius: 999px; color: var(--horizon); background: #fff; font-size: .72rem; font-weight: 800; letter-spacing: .025em; transition: transform .16s var(--ease-out), background .16s var(--ease-out); }
.header-cta:hover { background: var(--sky); transform: translateY(-1px); }
.header-cta:active, .cta-primary:active { transform: scale(.97); }
.mobile-menu-button { display: none; width: 42px; height: 42px; align-items: center; justify-content: center; border: 1px solid #bfd5e9; border-radius: 50%; color: var(--navy); background: #fff; }
.mobile-nav { display: none; }

.hero-section { position: relative; isolation: isolate; overflow: hidden; padding: 3.35rem 0 3.45rem; background: linear-gradient(116deg, #fff 0%, #fbfdff 54%, #eff7fd 100%); }
.hero-section::before { content: ""; position: absolute; z-index: -2; width: 53rem; height: 53rem; top: -27rem; right: -18rem; border-radius: 50%; border: 1px solid rgba(31,89,182,.1); box-shadow: 0 0 0 4rem rgba(31,89,182,.025), 0 0 0 9rem rgba(31,89,182,.015); }
.hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.07fr) minmax(360px, .72fr); align-items: center; gap: 1.6rem; }
.hero-route { position: absolute; z-index: -1; border: 1px solid rgba(31,89,182,.22); border-radius: 50%; pointer-events: none; }
.hero-route-a { width: 34rem; height: 13rem; top: 18%; left: -20rem; transform: rotate(-20deg); border-right-color: transparent; }
.hero-route-b { width: 24rem; height: 8rem; bottom: 1.5rem; left: 25%; transform: rotate(12deg); border-left-color: transparent; }
.section-label { display: inline-flex; align-items: center; gap: .46rem; color: var(--horizon); font-size: .67rem; font-weight: 800; letter-spacing: .14em; line-height: 1.2; }
.section-label-seal { width: 17px; height: 17px; object-fit: contain; }
.section-label-step { padding-right: .46rem; border-right: 1px solid #b9d2e8; color: #6a91b2; font-size: .57rem; letter-spacing: .1em; }
.hero-copy { padding: .75rem 0; }
h1, h2, h3, p { margin-top: 0; }
h1, h2 { font-family: var(--serif); font-weight: 400; color: var(--navy); letter-spacing: -.035em; }
h1 { max-width: 46rem; margin: .9rem 0 1rem; font-size: clamp(2.6rem, 3.8vw, 4.35rem); line-height: .98; }
h1 em { font-style: italic; color: var(--horizon); }
.hero-lead { max-width: 43rem; margin-bottom: .7rem; color: #2a4a68; font-size: clamp(.98rem, 1.16vw, 1.12rem); line-height: 1.55; }
.hero-support { max-width: 42rem; margin-bottom: 1rem; color: #587089; font-size: .86rem; line-height: 1.62; }
.hero-product-line { display: flex; align-items: flex-start; max-width: 43rem; gap: .65rem; padding: .7rem 0; border-top: 1px solid #dbe8f2; color: #2e4a66; font-size: .78rem; line-height: 1.45; }
.hero-product-line svg { flex: none; margin-top: .08rem; color: var(--horizon); }
.hero-actions { display: flex; align-items: stretch; gap: 1rem; margin: .4rem 0 .6rem; }
.cta-primary { display: inline-flex; justify-content: center; align-items: center; gap: .7rem; min-height: 53px; padding: .88rem 1.15rem; border: 1px solid var(--horizon); border-radius: 999px; box-shadow: 0 8px 19px rgba(31,89,182,.17); background: var(--horizon); color: white; font-family: var(--sans); font-size: .73rem; font-weight: 800; letter-spacing: .055em; text-align: center; transition: transform .16s var(--ease-out), box-shadow .16s var(--ease-out), background .16s var(--ease-out); }
.cta-primary:hover { background: #174d9d; box-shadow: 0 12px 24px rgba(31,89,182,.25); transform: translateY(-2px); }
.price-block { display: flex; flex-direction: column; justify-content: center; padding: 0 .7rem; border-left: 1px solid #c4d8eb; color: #5b738a; line-height: 1; }
.price-block span { font-size: .58rem; font-weight: 800; letter-spacing: .09em; }
.price-block strong { margin-top: .3rem; color: var(--navy); font-family: var(--serif); font-size: 1.55rem; font-weight: 400; }
.price-block small { margin-top: .28rem; color: #607c93; font-size: .58rem; font-weight: 700; }
.disclaimer { color: #6d8093; font-size: .69rem; font-style: italic; line-height: 1.55; }
.hero-disclaimer { max-width: 37rem; }
.hero-payment { display: flex; align-items: center; gap: .38rem; margin: 0 0 .45rem; color: #607c93; font-size: .68rem; line-height: 1.4; }
.hero-payment svg { color: var(--horizon); }
.hero-book-stage { position: relative; display: grid; place-items: center; min-height: 450px; }
.hero-book-stage::after { content: ""; position: absolute; z-index: -1; width: 22rem; height: 22rem; border-radius: 50%; background: radial-gradient(circle at 43% 40%, #fff 0 19%, #dff0fc 19.5% 51%, rgba(220,236,248,.1) 52%); }
.hero-book { width: min(100%, 292px); border: 1px solid rgba(145,185,221,.58); background: #fff; filter: drop-shadow(0 27px 25px rgba(31, 70, 109, .2)); transform: rotate(2deg); }
.book-stage-orbit { position: absolute; z-index: -1; border: 1px dashed rgba(31,89,182,.36); border-radius: 50%; }
.orbit-one { width: 29rem; height: 19rem; transform: rotate(-28deg); }
.orbit-two { width: 20rem; height: 28rem; transform: rotate(26deg); border-color: rgba(31,89,182,.16); }
.book-stage-note { position: absolute; display: inline-flex; align-items: center; gap: .4rem; padding: .62rem .76rem; border: 1px solid rgba(166,199,229,.9); border-radius: .55rem; box-shadow: 0 9px 20px rgba(32,71,105,.11); background: rgba(255,255,255,.92); color: #345878; font-size: .66rem; font-weight: 800; letter-spacing: .015em; }
.note-top { top: 8%; left: 0; transform: rotate(-5deg); }
.note-bottom { bottom: 9%; right: 0; transform: rotate(4deg); }
.book-stage-note svg { color: var(--horizon); }
.guarantee-seal { position: absolute; z-index: 3; right: -1.2rem; bottom: 22%; display: flex; align-items: center; gap: .55rem; width: 148px; padding: .7rem .78rem; border: 1px solid #a5c7e5; border-radius: 50% 50% 48% 48% / 42% 42% 58% 58%; box-shadow: 0 13px 25px rgba(23,67,104,.16); background: #fff; color: var(--horizon); transform: rotate(-4deg); }
.guarantee-seal::before { content: ""; position: absolute; inset: 4px; border: 1px dashed #9dc0df; border-radius: inherit; pointer-events: none; }
.guarantee-seal svg { position: relative; flex: none; }
.guarantee-seal div { position: relative; display: flex; flex-direction: column; line-height: 1.05; }
.guarantee-seal span { color: #6688a8; font-size: .49rem; font-weight: 800; letter-spacing: .12em; }
.guarantee-seal strong { margin: .16rem 0; color: var(--navy); font: 1.15rem var(--serif); }
.guarantee-seal small { color: #58738b; font-size: .52rem; line-height: 1.2; }

.identification-section { position: relative; padding: 7rem 0; background: var(--mist); }
.identification-section::before { content: ""; position: absolute; width: 6rem; height: 28rem; top: 4rem; left: 2.5%; border: 1px solid rgba(31,89,182,.16); border-left: 0; border-bottom: 0; border-radius: 0 3rem 0 0; }
.identification-section::after { content: ""; position: absolute; width: 28vw; min-width: 15rem; height: 100%; inset: 0 0 0 auto; background: linear-gradient(90deg, rgba(243,248,252,0), rgba(220,236,248,.55)); pointer-events: none; }
.identification-layout { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(260px, .75fr) minmax(0, 1.25fr); gap: clamp(3rem, 7vw, 8rem); }
.section-side-title { position: sticky; top: 130px; align-self: start; }
h2 { margin: 1rem 0 1rem; font-size: clamp(2.35rem, 3.5vw, 4.2rem); line-height: 1.02; }
.section-side-title > p, .guide-copy > p, .audience-copy > p, .family-copy > p, .faq-intro > p { color: #5a7288; font-size: .98rem; line-height: 1.74; }
.identification-intro { margin-bottom: 1.2rem; color: #31516f; font-size: 1rem; }
.signs-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid #cbddea; border-left: 1px solid #cbddea; background: rgba(255,255,255,.38); }
.sign-item { display: flex; min-height: 100px; gap: .75rem; padding: 1rem; border-right: 1px solid #cbddea; border-bottom: 1px solid #cbddea; }
.sign-check { display: grid; flex: none; place-items: center; width: 23px; height: 23px; margin-top: .05rem; border-radius: 50%; background: var(--horizon); color: white; }
.sign-item p { margin: 0; color: #35536e; font-size: .82rem; line-height: 1.56; }
.orientation-callout { display: grid; grid-template-columns: auto 1fr; gap: .9rem; margin-top: 1.5rem; padding: 1.4rem; border-left: 3px solid var(--horizon); background: #fff; box-shadow: 0 14px 28px rgba(26,70,109,.07); }
.orientation-callout > svg { color: var(--horizon); }
.orientation-callout p { margin-bottom: .75rem; color: #47647e; font-size: .87rem; line-height: 1.62; }
.orientation-callout strong { color: var(--navy); font-size: .9rem; line-height: 1.5; }

.guide-section { position: relative; padding: 7.5rem 0; background: #fff; }
.guide-section::after { content: ""; position: absolute; right: 4.5%; bottom: 3.4rem; width: 7rem; height: 7rem; border: 1px solid rgba(31,89,182,.18); border-left-color: transparent; border-bottom-color: transparent; border-radius: 50%; transform: rotate(15deg); }
.guide-grid { display: grid; grid-template-columns: minmax(290px, .82fr) minmax(0, 1fr); gap: clamp(3rem, 7vw, 8.5rem); align-items: center; }
.routine-image-wrap { position: relative; padding: 0 2.3rem 2.3rem 0; }
.routine-image-wrap::before { content: ""; position: absolute; z-index: 0; width: 70%; height: 81%; right: 0; bottom: 0; border: 1px solid #a7c8e8; }
.routine-image-wrap img { position: relative; z-index: 1; display: block; width: 100%; aspect-ratio: 4 / 4.8; object-fit: cover; box-shadow: 0 26px 40px rgba(23,61,95,.14); }
.image-caption { position: absolute; z-index: 2; bottom: .15rem; left: 1.15rem; display: flex; gap: .6rem; align-items: center; padding: .75rem .9rem; box-shadow: 0 10px 18px rgba(20,60,95,.12); background: var(--navy); color: #fff; font-size: .66rem; font-weight: 700; letter-spacing: .045em; }
.image-caption span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--horizon); font-size: .58rem; }
.product-composition { position: relative; z-index: 1; display: grid; min-height: 475px; place-items: center; overflow: hidden; background: linear-gradient(145deg, #eaf5fc, #fff 68%); }
.product-composition::before { content: ""; position: absolute; width: 25rem; height: 25rem; border: 1px solid rgba(31,89,182,.2); border-radius: 50%; transform: translate(20%, -11%); box-shadow: 0 0 0 4rem rgba(31,89,182,.025); }
.product-tablet { position: relative; z-index: 2; width: 59%; padding: .7rem .7rem 1rem; border: 10px solid #102a43; border-radius: 1rem; box-shadow: 0 26px 35px rgba(21,64,99,.24); background: #102a43; transform: rotate(-5deg); }
.product-tablet > span, .product-phone > span, .product-sheet > span { display: block; font-size: .48rem; font-weight: 800; letter-spacing: .12em; }
.product-tablet > span { margin: 0 0 .4rem .15rem; color: #afd7f7; }
.product-tablet img { display: block; width: 100%; aspect-ratio: 344 / 533; object-fit: cover; box-shadow: none; }
.product-phone { position: absolute; z-index: 3; right: 4%; bottom: 11%; display: flex; flex-direction: column; width: 31%; min-height: 150px; justify-content: center; gap: .52rem; padding: .75rem; border: 5px solid #fff; border-radius: 1rem; box-shadow: 0 16px 28px rgba(25,67,102,.2); background: #1f59b6; color: #fff; transform: rotate(7deg); }
.product-phone > span { color: #c8e6fb; }
.product-phone svg { color: #fff; }
.product-phone small { color: #d9efff; font-size: .55rem; line-height: 1.35; }
.product-sheet { position: absolute; z-index: 1; top: 12%; left: 6%; width: 38%; padding: 1rem; box-shadow: 0 12px 20px rgba(27,70,106,.12); background: #fff; color: var(--navy); transform: rotate(7deg); }
.product-sheet > span { margin-bottom: .55rem; color: var(--horizon); }
.product-sheet strong { font: 1.35rem/1.12 var(--serif); }
.product-sheet i { display: block; width: 56%; height: 2px; margin-top: .8rem; background: #b5d8f3; }
.guide-copy h2 { max-width: 42rem; font-size: clamp(2.25rem, 3.1vw, 3.8rem); }
.guide-copy h3, .audience-copy h3 { margin: 1.55rem 0 .8rem; color: var(--navy); font-size: .86rem; font-weight: 800; letter-spacing: .015em; }
.arrow-list { display: grid; gap: .58rem; margin: 0 0 1.5rem; padding: 0; list-style: none; }
.arrow-list li { position: relative; padding-left: 1.35rem; color: #46637c; font-size: .85rem; line-height: 1.55; }
.arrow-list li::before { content: "→"; position: absolute; left: 0; color: var(--horizon); font-weight: 800; }
blockquote { display: grid; grid-template-columns: auto 1fr; gap: .65rem; margin: 0 0 1.6rem; padding: 1rem 0 1rem 1rem; border-left: 2px solid #8cb8e2; background: linear-gradient(90deg, #f5faff, transparent); }
blockquote svg { color: var(--horizon); }
blockquote p { margin: 0; color: #385d7d; font-size: .79rem; font-style: italic; line-height: 1.65; }

.content-section { position: relative; padding: 7rem 0; overflow: hidden; background: var(--navy); }
.content-section::before { content: ""; position: absolute; top: -25rem; right: -10rem; width: 42rem; height: 42rem; border: 1px solid rgba(189,222,247,.16); border-radius: 50%; box-shadow: 0 0 0 6rem rgba(189,222,247,.025), 0 0 0 13rem rgba(189,222,247,.02); }
.content-heading { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, .75fr); gap: 4rem; align-items: end; margin-bottom: 3rem; }
.content-heading h2 { max-width: 39rem; color: white; }
.content-heading > p { max-width: 32rem; margin: 0 0 .6rem auto; color: #c0d9ef; font-size: .94rem; line-height: 1.7; }
.content-heading > p strong { color: white; }
.content-section .section-label { color: #8cc1f0; }
.content-section .section-label-seal { filter: brightness(0) invert(1) opacity(.85); }
.content-section .section-label-step { border-right-color: rgba(167,207,238,.42); color: #8cc1f0; }
.content-cards { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; border: 1px solid rgba(181,215,241,.26); background: rgba(181,215,241,.26); }
.content-card { min-height: 238px; padding: 1.3rem; background: rgba(17,48,75,.94); transition: background .22s var(--ease-out), transform .22s var(--ease-out); }
.content-card:hover { background: #173c60; transform: translateY(-3px); }
.content-card-featured { background: linear-gradient(145deg, #183e63, #102a43 72%); }
.content-card-featured h3 { max-width: 16rem; font-size: 1.14rem; }
.card-topline { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.45rem; color: #8fc5f3; }
.card-topline span { font-size: .65rem; font-weight: 800; letter-spacing: .12em; }
.content-card h3 { margin-bottom: .75rem; color: white; font-size: 1rem; line-height: 1.3; }
.content-card p { color: #bdd4e9; font-size: .7rem; line-height: 1.55; }
.content-bottom { position: relative; z-index: 1; max-width: 57rem; margin: 2.5rem auto 0; text-align: center; }
.lightbulb-line { display: inline-flex; align-items: center; gap: .55rem; color: white; font: 1.35rem var(--serif); }
.lightbulb-line svg { color: #8fc5f3; }
.content-bottom > p { margin: .75rem auto 1.25rem; max-width: 42rem; color: #c0d9ef; font-size: .84rem; line-height: 1.65; }
.content-bottom .cta-primary { background: white; border-color: white; color: var(--horizon); box-shadow: none; }
.content-bottom .cta-primary:hover { background: #eaf5ff; }

.audience-section { position: relative; padding: 7rem 0; background: #fbfcfe; }
.audience-section::before { content: ""; position: absolute; top: 7.6rem; left: 50%; width: 18rem; height: 9rem; border: 1px solid rgba(31,89,182,.13); border-right: 0; border-bottom: 0; border-radius: 8rem 0 0 0; transform: translateX(-36rem); }
.audience-grid { display: grid; grid-template-columns: minmax(230px, .66fr) minmax(0, 1.34fr); gap: clamp(3rem, 8vw, 10rem); align-items: start; }
.audience-copy { position: sticky; top: 130px; }
.audience-list { position: relative; border-top: 1px solid #caddec; }
.audience-list::before { content: ""; position: absolute; top: -3.6rem; left: .9rem; height: 3.55rem; border-left: 1px dashed #78a7d3; }
.audience-item { display: grid; grid-template-columns: 2rem 1fr auto; gap: 1rem; align-items: start; padding: 1rem 0; border-bottom: 1px solid #caddec; transition: padding-left .2s var(--ease-out), background .2s var(--ease-out); }
.audience-item:hover { padding-left: .45rem; background: #f4f9fd; }
.audience-item span { color: var(--horizon); font-size: .65rem; font-weight: 800; letter-spacing: .09em; }
.audience-item p { margin: 0; color: #3d5b76; font-size: .88rem; line-height: 1.53; }
.audience-item svg { margin-top: .12rem; color: #93b5d3; }

.family-section { padding: 2rem 0 7rem; background: #fbfcfe; }
.family-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(310px, .76fr); overflow: hidden; background: var(--sky); }
.family-copy { padding: clamp(2rem, 5vw, 5rem); }
.family-copy h2 { max-width: 42rem; margin-bottom: 1rem; font-size: clamp(2rem, 3vw, 3.25rem); }
.family-note { display: flex; gap: .6rem; align-items: flex-start; max-width: 33rem; margin-top: 1.35rem; color: var(--horizon); font-size: .8rem; font-weight: 800; line-height: 1.5; }
.family-note svg { flex: none; }
.family-image-wrap { min-height: 300px; margin: -2.4rem 2.4rem 2.4rem 0; box-shadow: 0 21px 35px rgba(33,77,113,.13); }
.family-image-wrap img { display: block; width: 100%; height: 100%; object-fit: cover; }

.benefits-section { position: relative; padding: 5.75rem 0; overflow: hidden; background: #f3f8fc; }
.benefits-section::before { content: ""; position: absolute; top: -13rem; right: -8rem; width: 30rem; height: 30rem; border: 1px solid rgba(31,89,182,.15); border-radius: 50%; box-shadow: 0 0 0 5rem rgba(31,89,182,.018); }
.benefits-heading { position: relative; z-index: 1; max-width: 900px; margin: 0 auto 2.15rem; text-align: center; }
.benefits-heading .section-label { justify-content: center; }
.benefits-heading h2 { max-width: 52rem; margin: .9rem auto .75rem; }
.benefits-heading p { max-width: 41rem; margin: 0 auto; color: #58738b; font-size: .89rem; line-height: 1.65; }
.benefits-grid { position: relative; z-index: 1; display: grid; max-width: 1100px; margin: 0 auto; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; border: 1px solid #c8ddec; background: #c8ddec; }
.benefit-card { min-height: 200px; padding: 1.5rem; background: rgba(255,255,255,.82); }
.benefit-card > span { color: var(--horizon); font-size: .63rem; font-weight: 800; letter-spacing: .12em; }
.benefit-card h3 { max-width: 17rem; margin: 1.7rem 0 .65rem; color: var(--navy); font-size: 1rem; line-height: 1.32; }
.benefit-card p { margin: 0; color: #58738b; font-size: .76rem; line-height: 1.6; }

.author-section { padding: 6rem 0; background: #fff; }
.author-grid { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: clamp(2.25rem, 5vw, 5.5rem); align-items: center; max-width: 900px; margin: 0 auto; }
.author-seal { position: relative; display: grid; place-items: center; width: 150px; height: 150px; border: 1px solid #9bc1e4; border-radius: 50%; box-shadow: inset 0 0 0 9px #f0f7fc, inset 0 0 0 10px #bed8ed; background: #fff; color: var(--navy); }
.author-seal img { position: absolute; top: 20px; width: 26px; height: 26px; object-fit: contain; }
.author-seal span { margin-top: .75rem; font: 3.15rem var(--serif); letter-spacing: -.08em; }
.author-grid h2 { margin: .72rem 0 .8rem; }
.author-grid p { max-width: 45rem; margin: 0; color: #526e86; font-size: .94rem; line-height: 1.75; }

.faq-section { position: relative; padding: 7rem 0; background: #fff; }
.faq-section::after { content: ""; position: absolute; top: 1rem; right: 7%; width: 11rem; height: 11rem; border: 1px solid rgba(31,89,182,.15); border-radius: 50%; border-left-color: transparent; transform: rotate(37deg); }
.faq-grid { position: relative; display: grid; grid-template-columns: minmax(0, .72fr) minmax(400px, 1fr); gap: clamp(3rem, 8vw, 10rem); align-items: start; }
.faq-intro h2 { font-size: clamp(2rem, 3vw, 3.35rem); }
.faq-list { border-top: 1px solid #c8dcea; }
.faq-list [data-slot="accordion-item"] { border-bottom: 1px solid #c8dcea; }
.faq-list [data-slot="accordion-trigger"] { color: #244763; font-family: var(--serif); font-size: 1.25rem; line-height: 1.3; text-align: left; }
.faq-list [data-slot="accordion-content"] { color: #537089; font-family: var(--sans); font-size: .86rem; line-height: 1.7; }

.final-cta-section { position: relative; overflow: hidden; padding: 7rem 0; background: linear-gradient(117deg, #e9f4fc 0%, #f7fbfe 59%, #fff 100%); }
.final-route { position: absolute; width: 60rem; height: 28rem; left: -23rem; bottom: -16rem; border: 1px solid rgba(31,89,182,.25); border-radius: 50%; transform: rotate(13deg); box-shadow: 0 0 0 4rem rgba(31,89,182,.02); }
.final-cta-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, .62fr); gap: clamp(3rem, 8vw, 10rem); align-items: center; }
.final-cta-grid h2 { max-width: 52rem; }
.final-cta-grid > div > p { max-width: 43rem; color: #4b6a84; font-size: .96rem; line-height: 1.75; }
.offer-product-preview { display: flex; align-items: center; gap: 1rem; margin-top: 1.25rem; color: #54728b; font-size: .72rem; font-weight: 700; }
.offer-product-preview img { width: 62px; border: 1px solid #a9c9e6; box-shadow: 0 10px 18px rgba(22,65,99,.14); }
.purchase-card { position: relative; margin-top: 1.65rem; padding: 2rem; border: 1px solid #b8d2e8; border-left: 4px solid var(--horizon); border-radius: .25rem 1rem 1rem .25rem; box-shadow: 0 24px 42px rgba(30,75,113,.13); background: rgba(255,255,255,.88); }
.purchase-card::before { content: ""; position: absolute; top: -1.7rem; left: -4px; height: 1.7rem; border-left: 1px dashed var(--horizon); }
.purchase-waypoint { display: inline-flex; align-items: center; gap: .42rem; margin-bottom: 1rem; color: #6a91b2; font-size: .57rem; font-weight: 800; letter-spacing: .11em; }
.purchase-waypoint span:first-child { display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid #91b9dd; border-radius: 50%; color: var(--horizon); }
.purchase-card-top { display: flex; align-items: center; gap: .55rem; margin-bottom: 1.5rem; color: var(--horizon); font-size: .64rem; font-weight: 800; letter-spacing: .12em; }
.purchase-card h3 { max-width: 19rem; margin-bottom: 1.35rem; color: var(--navy); font: 1.7rem/1.08 var(--serif); letter-spacing: -.025em; }
.offer-includes { display: grid; gap: .42rem; margin: 0 0 1rem; padding: .9rem 0; border-top: 1px solid #d8e6f0; border-bottom: 1px solid #d8e6f0; }
.offer-includes > span { color: var(--horizon); font-size: .59rem; font-weight: 800; letter-spacing: .1em; }
.offer-includes p { display: flex; align-items: flex-start; gap: .38rem; margin: 0; color: #59748b; font-size: .68rem; line-height: 1.38; }
.offer-includes svg { flex: none; margin-top: .05rem; color: var(--horizon); }
.purchase-price { display: flex; align-items: baseline; gap: .5rem; padding: .9rem 0; border-bottom: 1px solid #d8e6f0; }
.purchase-price span { color: #688097; font-size: .78rem; }
.purchase-price strong { color: var(--horizon); font: 2.25rem var(--serif); }
.purchase-one-time { display: block; margin: .5rem 0 -.25rem; color: #5e7a91; font-size: .64rem; font-weight: 800; letter-spacing: .04em; }
.final-cta-button { width: 100%; margin: 1.25rem 0; }
.purchase-assurances { display: grid; gap: .65rem; padding-top: .2rem; }
.purchase-assurances > div { display: flex; align-items: center; gap: .62rem; padding: .55rem .1rem; border-top: 1px solid #e0ecf4; color: var(--horizon); }
.purchase-assurances > div:first-child { border-top: 0; }
.purchase-assurances svg { flex: none; }
.purchase-assurances span { display: flex; flex-direction: column; line-height: 1.3; }
.purchase-assurances strong { color: #355674; font-size: .69rem; }
.purchase-assurances small { margin-top: .1rem; color: #688198; font-size: .61rem; }

.guarantee-section { padding: 6rem 0; background: var(--navy); }
.guarantee-grid { display: grid; grid-template-columns: minmax(180px, .45fr) minmax(0, 1fr); gap: clamp(2.5rem, 7vw, 8rem); align-items: center; max-width: 960px; }
.guarantee-large-seal { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 185px; height: 185px; border: 1px dashed #8dc4f2; border-radius: 50%; box-shadow: inset 0 0 0 9px rgba(167,211,243,.05), inset 0 0 0 10px rgba(167,211,243,.3); color: #a9d6f7; text-align: center; }
.guarantee-large-seal span { margin-top: .45rem; font-size: .58rem; font-weight: 800; letter-spacing: .18em; }
.guarantee-large-seal strong { margin-top: .1rem; color: white; font: 2.2rem var(--serif); }
.guarantee-section .section-label { color: #9ed1f6; }
.guarantee-section .section-label-seal { filter: brightness(0) invert(1) opacity(.82); }
.guarantee-section .section-label-step { border-right-color: rgba(158,209,246,.35); color: #9ed1f6; }
.guarantee-section h2 { max-width: 42rem; color: white; }
.guarantee-section p { max-width: 42rem; margin-bottom: 1.1rem; color: #c4dcef; font-size: .92rem; line-height: 1.7; }
.guarantee-highlight { color: #a9d6f7; font-size: .78rem; letter-spacing: .04em; }

.closing-cta-section { padding: 7rem 0; background: linear-gradient(135deg, #fff, #eaf5fc); }
.closing-cta-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, .62fr); gap: clamp(3rem, 8vw, 10rem); align-items: center; }
.closing-cta-grid h2 { max-width: 53rem; }
.closing-cta-grid > div > p { max-width: 45rem; color: #567289; font-size: .96rem; line-height: 1.7; }
.closing-purchase { display: flex; flex-direction: column; align-items: flex-start; gap: .9rem; padding: 2rem; border-top: 3px solid var(--horizon); box-shadow: 0 20px 34px rgba(26,72,108,.11); background: #fff; }
.closing-purchase > span { color: #47647d; font-size: .79rem; font-weight: 700; line-height: 1.5; }
.closing-purchase > strong { color: var(--horizon); font: 2.35rem var(--serif); }
.closing-purchase .closing-one-time { margin-top: -.55rem; color: #5f7b93; font-size: .67rem; font-weight: 800; }
.closing-purchase .cta-primary { width: 100%; }
.closing-purchase small { color: #71869a; font-size: .66rem; }

.site-footer { padding: 2.3rem 0; border-top: 1px solid #cbddea; background: #fbfcfe; }
.footer-inner { display: grid; grid-template-columns: auto minmax(200px, 1fr) minmax(220px, .9fr); align-items: start; gap: 2rem; }
.footer-brand img { width: 28px; height: 28px; object-fit: contain; }
.footer-brand span { color: var(--navy); font: 1.1rem var(--serif); }
.footer-inner > p { margin: 0; color: #72869a; font-size: .67rem; line-height: 1.5; }
.footer-meta { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .45rem .8rem; color: #71869a; font-size: .62rem; line-height: 1.4; text-align: right; }
.footer-meta span:first-child { width: 100%; color: #567189; font-weight: 700; }
.mobile-sticky-cta { display: none; }

@media (max-width: 980px) {
  .desktop-nav, .header-cta { display: none; }
  .mobile-menu-button { display: inline-flex; }
  .mobile-nav { display: grid; gap: .1rem; padding: .3rem 1.5rem 1rem; border-top: 1px solid #d7e5ef; background: rgba(251,252,254,.98); }
  .mobile-nav a { padding: .72rem 0; color: #31516e; font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
  .hero-grid, .guide-grid, .content-heading, .audience-grid, .faq-grid, .final-cta-grid { grid-template-columns: 1fr; }
  .hero-section { padding-top: 4rem; }
  .hero-book-stage { min-height: 420px; max-width: 500px; margin: 0 auto; }
  .identification-layout { grid-template-columns: 1fr; }
  .section-side-title, .audience-copy { position: static; }
  .content-heading > p { margin-left: 0; }
  .content-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .content-card-featured { grid-column: auto; }
  .benefits-heading, .closing-cta-grid { grid-template-columns: 1fr; }
  .benefits-heading > p { margin-left: 0; }
  .benefits-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .author-grid, .guarantee-grid { grid-template-columns: 1fr; }
  .author-seal { width: 130px; height: 130px; }
  .guarantee-large-seal { width: 165px; height: 165px; }
  .family-grid { grid-template-columns: 1fr; }
  .family-image-wrap { min-height: 340px; margin: 0; order: -1; }
  .footer-inner { grid-template-columns: 1fr; gap: .65rem; }
  .footer-meta { justify-content: flex-start; text-align: left; }
}

@media (max-width: 640px) {
  .container { padding: 0 1.1rem; }
  .header-inner { min-height: 68px; }
  .brand-mark { width: 36px; height: 36px; }
  .brand-wordmark span { font-size: .94rem; }
  .brand-wordmark em { font-size: .98rem; }
  .hero-section { padding: 2.6rem 0 2.8rem; }
  .hero-route-b { left: 10%; bottom: -.5rem; }
  h1 { margin-top: .8rem; font-size: clamp(2.25rem, 10.7vw, 3.15rem); line-height: .99; }
  h2 { font-size: clamp(2.25rem, 10vw, 3.25rem); }
  .hero-lead { font-size: .92rem; }
  .hero-support { margin-bottom: .85rem; font-size: .8rem; }
  .hero-actions { flex-direction: column; align-items: stretch; gap: .85rem; }
  .cta-primary { width: 100%; min-height: 55px; padding: .9rem 1rem; }
  .price-block { flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: .25rem .5rem; padding: .65rem 0 0; border-top: 1px solid #c4d8eb; border-left: 0; }
  .price-block strong { margin: 0; }
  .price-block small { width: 100%; text-align: center; }
  .hero-book-stage { min-height: 355px; margin-top: .85rem; }
  .hero-book { width: min(74%, 238px); }
  .orbit-one { width: 22rem; height: 15rem; }
  .orbit-two { width: 15rem; height: 22rem; }
  .book-stage-note { padding: .52rem .6rem; font-size: .58rem; }
  .note-top { left: -2%; }
  .note-bottom { right: -2%; }
  .guarantee-seal { right: -1.1rem; bottom: 18%; width: 132px; padding: .58rem .62rem; }
  .guarantee-seal { right: -1.2rem; bottom: 17%; width: 136px; padding: .62rem .68rem; }
  .identification-section, .guide-section, .content-section, .audience-section, .faq-section, .final-cta-section { padding: 4.5rem 0; }
  .identification-layout, .guide-grid, .audience-grid, .faq-grid, .final-cta-grid { gap: 2.25rem; }
  .signs-grid { grid-template-columns: 1fr; }
  .sign-item { min-height: auto; padding: .9rem; }
  .orientation-callout { padding: 1rem; }
  .routine-image-wrap { padding: 0 1.25rem 1.25rem 0; }
  .guide-copy h2 { font-size: clamp(2.12rem, 10vw, 3.1rem); }
  .content-heading { gap: 1rem; margin-bottom: 2rem; }
  .content-cards { grid-template-columns: 1fr; }
  .content-card-featured { grid-column: auto; }
  .content-card { min-height: auto; padding: 1.2rem; }
  .card-topline { margin-bottom: 1.35rem; }
  .lightbulb-line { font-size: 1.12rem; text-align: left; }
  .content-bottom { text-align: left; }
  .content-bottom > p { margin-left: 0; }
  .audience-item { grid-template-columns: 1.75rem 1fr auto; gap: .6rem; }
  .family-section { padding: 0 0 4.5rem; }
  .family-copy { padding: 2.1rem 1.2rem 2.35rem; }
  .family-image-wrap { min-height: 250px; }
  .faq-list [data-slot="accordion-trigger"] { font-size: 1.08rem; }
  .purchase-card { padding: 1.4rem; }
  .product-composition { min-height: 370px; }
  .product-tablet { width: 53%; border-width: 7px; }
  .product-phone { right: 2%; bottom: 10%; width: 33%; min-height: 116px; padding: .58rem; border-width: 4px; }
  .product-sheet { top: 9%; left: 4%; width: 39%; padding: .7rem; }
  .product-sheet strong { font-size: 1rem; }
  .benefits-section, .author-section, .guarantee-section, .closing-cta-section { padding: 4.5rem 0; }
  .benefits-heading { gap: .7rem; margin-bottom: 2rem; }
  .benefits-grid { grid-template-columns: 1fr; }
  .benefit-card { min-height: auto; padding: 1.2rem; }
  .benefit-card h3 { margin: 1rem 0 .55rem; }
  .author-grid { gap: 1.4rem; }
  .author-grid p { font-size: .86rem; }
  .guarantee-grid { gap: 1.8rem; }
  .guarantee-large-seal { width: 145px; height: 145px; }
  .guarantee-section h2 { font-size: clamp(2rem, 9vw, 2.8rem); }
  .closing-cta-grid { gap: 2rem; }
  .closing-purchase { padding: 1.4rem; }
  .mobile-sticky-cta { position: fixed; z-index: 70; right: .75rem; bottom: .75rem; left: .75rem; display: block; }
  .mobile-sticky-cta a { display: flex; align-items: center; justify-content: center; gap: .45rem; min-height: 52px; border-radius: 999px; box-shadow: 0 12px 26px rgba(16,42,67,.27); background: var(--navy); color: white; font-size: .7rem; font-weight: 800; letter-spacing: .045em; }
  .mobile-sticky-cta span { color: #a8d3f6; }
  .site-footer { padding-bottom: 5.6rem; }
}

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


/* Static/Netlify adaptation */
*, *::before, *::after { box-sizing: border-box; }
.page-root { min-height: 100vh; overflow-x: clip; background: #fbfcfe; color: #17324d; }
.icon { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.mobile-nav[hidden] { display: none !important; }
.mobile-menu-button .icon { width: 22px; height: 22px; }
.section-label-seal { border-radius: 50%; }
.hero-book, .product-tablet img, .offer-product-preview img { background: #eaf5fc; }
.family-image-wrap img { object-fit: cover; background: #dcecf8; }
.faq-list details { border-bottom: 1px solid #c8dcea; }
.faq-list summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.15rem 0; color: #244763; font-family: var(--serif); font-size: 1.25rem; line-height: 1.3; cursor: pointer; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; flex: none; color: var(--horizon); font: 400 1.45rem var(--sans); transition: transform .2s ease; }
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-answer { padding: 0 0 1.1rem; color: #537089; font-family: var(--sans); font-size: .86rem; line-height: 1.7; }
.footer-meta a { color: #71869a; }
.footer-meta a:hover { color: var(--horizon); }
.family-illustration { width: 100%; height: 100%; display: block; }
.cover-fallback-note { display:none; }
@media (max-width: 640px) { .faq-list summary { font-size: 1.08rem; } }