/* =========================================================== Our Life by Design — advertising frontend (public, gated) Depends on assets/theme.css tokens. Restraint per section, ambition across the page. Mobile is the primary experience. =========================================================== */ *{margin:0;padding:0;box-sizing:border-box;} html{scroll-behavior:smooth;} body{ background:var(--paper);color:var(--ink-soft); font-family:var(--font-body);font-size:19px;line-height:1.65; -webkit-font-smoothing:antialiased;overflow-x:hidden; } a{color:inherit;} img,svg,video{max-width:100%;height:auto;display:block;} ::selection{background:var(--cream);} /* hero entrance — lines rise, supporting elements fade up. Hidden start-states are gated behind html.js (set in ) so the cover is never permanently hidden if JS/CSS-animation doesn't run (fail-open, no flash). */ .hero-h1 .line{display:block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.06em;} .hero-h1 .line>span{display:inline-block;} html.js .hero-h1 .line>span{transform:translateY(115%);animation:rise 1s var(--ease) forwards;animation-delay:calc(var(--i,0) * .12s + .15s);} @keyframes rise{to{transform:translateY(0);}} html.js .rise-el{opacity:0;transform:translateY(18px);animation:riseIn .85s var(--ease) forwards;animation-delay:calc(var(--i,0) * .12s + .2s);} @keyframes riseIn{to{opacity:1;transform:none;}} /* ---------- chrome ---------- */ /* absolute (not fixed): the brand identifies the page, then scrolls away so it never collides with color-block sections */ .topbar{position:absolute;top:0;left:0;right:0;z-index:30;display:flex;justify-content:space-between;align-items:center;padding:26px 44px;} .brand{font-family:var(--font-display);font-weight:600;font-size:22px;color:var(--ink);text-decoration:none;letter-spacing:-.01em;} .brand em{font-style:italic;font-weight:300;color:var(--terra);} .progress{position:fixed;left:0;top:0;height:2px;width:0;background:var(--gold);z-index:31;transition:width .3s var(--ease);opacity:.8;} @media (max-width:860px){.topbar{padding:18px 22px;}} /* ---------- views ---------- */ .view{position:relative;z-index:1;min-height:100vh;display:flex;align-items:center;padding:150px 8vw 120px;} .view.auto{min-height:0;padding:110px 8vw;} .kicker{font-family:var(--font-mono);font-size:14px;letter-spacing:.26em;text-transform:uppercase;color:var(--terra);display:flex;align-items:center;gap:14px;margin-bottom:30px;white-space:nowrap;} .kicker::before{content:"";width:40px;height:2px;background:var(--ink);display:inline-block;flex:0 0 auto;} @media (max-width:480px){.kicker{font-size:11.5px;letter-spacing:.2em;}} h1.hero-h1{font-family:var(--font-display);font-weight:600;font-size:clamp(40px,5.4vw,72px);line-height:1.02;color:var(--ink);letter-spacing:-.02em;} h1.hero-h1.big{font-size:clamp(56px,9vw,116px);line-height:.96;} h1 em{font-style:italic;font-weight:300;color:var(--terra);} h2{font-family:var(--font-display);font-weight:600;font-size:clamp(34px,4.6vw,60px);line-height:1.02;color:var(--ink);letter-spacing:-.02em;} h2.mid{font-size:clamp(34px,4.6vw,58px);} h2 em{font-style:italic;font-weight:300;color:var(--terra);} .lead{font-family:var(--font-body);font-weight:400;font-size:clamp(19px,2.1vw,24px);line-height:1.55;color:var(--ink-soft);margin-top:30px;max-width:540px;} p.body{font-size:clamp(17px,1.6vw,21px);line-height:1.7;color:var(--ink-soft);margin-top:26px;max-width:600px;} p.body.sm{font-size:16px;color:var(--label);margin-top:16px;max-width:600px;} .fine{font-family:var(--font-body);font-size:14.5px;line-height:1.6;color:var(--label);} .fine.light{color:rgba(255,255,255,.85);} .cta-line{margin-top:44px;display:flex;align-items:center;gap:30px;flex-wrap:wrap;} .cta-line.center{flex-direction:column;gap:18px;text-align:center;margin-top:56px;} .btn{font-family:var(--font-mono);font-size:14px;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;padding:17px 32px;border-radius:44px;border:1.5px solid var(--ink);color:var(--ink);cursor:pointer;background:transparent;transition:transform .2s var(--ease),background .3s,color .3s;display:inline-block;} .btn:hover{transform:translateY(-2px);} .btn:active{transform:translateY(1px) scale(.99);} .btn-fill{background:var(--ink);color:var(--paper);} .btn-fill:hover{background:var(--terra);border-color:var(--terra);} .tlink{font-family:var(--font-mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--label);text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:3px;transition:color .3s,border-color .3s;} .tlink:hover{color:var(--ink);border-color:var(--ink);} .thai-stamp{font-family:var(--font-thai);font-size:26px;color:var(--gold);margin-top:40px;opacity:.85;} /* ---------- product-forward hero (the reading IS the visual) ---------- */ .cover{background: radial-gradient(56% 54% at 78% 38%, rgba(224,163,37,.22), transparent 72%), radial-gradient(52% 56% at 10% 90%, rgba(194,78,44,.13), transparent 70%);} .cover .hero-split{width:100%;max-width:1240px;margin:0 auto;display:grid;grid-template-columns:.95fr 1.05fr;gap:56px;align-items:center;} .hero-text{max-width:560px;} .hero-product{position:relative;height:clamp(320px,40vw,500px);margin:0;} .page-card{position:absolute;width:82%;border-radius:14px;border:1px solid var(--line);background:var(--paper);box-shadow:0 44px 90px -36px rgba(31,42,68,.5);} /* fade product images in once decoded — gated on html.js so no-JS shows them */ html.js .page-card,html.js .photo{opacity:0;transition:opacity .6s var(--ease);} html.js .page-card.rdy,html.js .photo.rdy{opacity:1;} .page-card.back{top:2%;right:0;transform:rotate(3.5deg) translate3d(0,var(--py,0),0);} .page-card.front{bottom:0;left:0;transform:rotate(-2.5deg) translate3d(0,var(--py,0),0);} .sample-tag{position:absolute;bottom:-26px;left:9%;font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--label);} /* the film: the narrated reading is the hero product moment. Muted, looping, controls-less; a poster frame until the teaser exists. */ .film{position:absolute;bottom:0;left:0;width:88%;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:var(--ink);box-shadow:0 44px 90px -36px rgba(31,42,68,.55);transform:rotate(-2deg);} .film-video{display:block;width:100%;height:auto;aspect-ratio:1640/923;object-fit:cover;background:var(--paper-2);} .film-cap{position:absolute;left:0;right:0;bottom:0;margin:0;padding:26px 16px 11px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;text-align:center;color:rgba(251,248,241,.95);background:linear-gradient(to top, rgba(31,42,68,.78), rgba(31,42,68,0));} @media (max-width:860px){ .cover{padding-top:120px;} .cover .hero-split{grid-template-columns:1fr;gap:44px;} .hero-product{height:64vw;order:2;} .film{width:94%;} } /* ---------- product showcase (the ritual section) ---------- */ .showcase{align-items:center;} .showcase-grid{width:100%;max-width:1200px;margin:0 auto;display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:center;} .shot{position:relative;height:clamp(300px,38vw,460px);margin:0;} .shot .page-card{position:absolute;width:80%;} .shot-copy{max-width:420px;} .shot-copy h2{font-size:clamp(34px,4.4vw,58px);line-height:1.0;} .shot-copy .one{font-family:var(--font-body);font-weight:400;font-size:clamp(18px,2vw,22px);line-height:1.55;color:var(--ink-soft);margin-top:20px;} .shot-copy .fine{margin-top:18px;} @media (max-width:860px){ .showcase-grid{grid-template-columns:1fr;gap:40px;} .shot{height:66vw;} } /* ---------- microfacts (quiet trust strip; hairline separators) ---------- */ .microfacts{display:flex;flex-wrap:wrap;align-items:center;margin-top:26px;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--label);} .microfacts span{display:inline-flex;align-items:center;} .microfacts span + span::before{content:"";width:1px;height:12px;background:var(--line);margin:0 16px;} .microfacts.center{justify-content:center;margin-top:36px;padding:0 8vw;} @media (max-width:480px){ .microfacts{flex-direction:column;align-items:flex-start;gap:9px;} .microfacts.center{align-items:center;} .microfacts span + span::before{display:none;} } /* ---------- vibrant color blocks ---------- */ /* deep-indigo section — CONFIDENT — with a warm glow so it feels alive, not clinical */ .view.dark{background:var(--ink);background-image:radial-gradient(48% 62% at 32% 52%, rgba(201,151,31,.16), transparent 70%);} .view.dark .shot-copy h2{color:var(--paper);} .view.dark .shot-copy .one{color:rgba(251,248,241,.85);} /* on color sections the artifacts lift off the background */ .view.dark .page-card{border-color:transparent;box-shadow:0 50px 100px -26px rgba(0,0,0,.6);} .view.dark .sample-tag{color:rgba(255,255,255,.66);} /* ---------- the chart (credibility: the composite bodygraph) ---------- */ .chart{background:var(--paper-2);} .chart-grid{width:100%;max-width:1140px;margin:0 auto;display:grid;grid-template-columns:.88fr 1.12fr;gap:70px;align-items:center;} .chart-figure{position:relative;margin:0;max-width:400px;justify-self:center;width:100%;} .chart-figure .sample-tag{position:static;display:block;margin-top:18px;text-align:center;} .chart-copy{max-width:520px;} .chart-copy .one{font-size:clamp(18px,2vw,22px);line-height:1.6;margin-top:22px;color:var(--ink-soft);} .legend{list-style:none;margin:30px 0 0;padding:0;display:flex;flex-direction:column;gap:13px;} .legend li{display:flex;align-items:center;gap:14px;font-size:16.5px;color:var(--ink);} .legend .chip{width:30px;height:3px;border-radius:2px;flex:0 0 auto;} .legend .chip.ink{background:var(--ink);} .legend .chip.terra{background:var(--terra);} .legend .chip.gold{background:var(--gold);height:4px;box-shadow:0 0 10px rgba(201,151,31,.55);} .chart-copy .fine{margin-top:26px;max-width:46ch;} .chart-svg{width:100%;height:auto;} .chart-svg .bg-center{stroke:var(--ink);stroke-width:1.5;stroke-linejoin:round;fill:var(--paper-2);} .chart-svg .bg-center.him{fill:#DCDDE4;} .chart-svg .bg-center.her{fill:#EFD9CB;} .chart-svg .ch{fill:none;stroke-width:2.4;stroke-linecap:round;} .chart-svg .ch.him{stroke:var(--ink);} .chart-svg .ch.her{stroke:var(--terra);} .chart-svg .ch.us{stroke:var(--gold);stroke-width:3;} .chart-svg .ch.us-glow{stroke:var(--gold);stroke-width:8;opacity:.22;} /* draw-on-scroll: channels sketch themselves in, the gold circuits arrive last and glow. Gated behind html.js; fully drawn when JS or animations are unavailable. Scoped to .chart so reused copies of the graphic (the gate's mirror) stay static. */ html.js .chart .chart-svg .ch{stroke-dasharray:1;stroke-dashoffset:1;} html.js .chart .chart-svg .ch.us-glow{stroke-dasharray:none;stroke-dashoffset:0;opacity:0;} html.js .chart .chart-svg .bg-centers{opacity:0;} .chart.in .chart-svg .bg-centers{animation:fadeIn .9s var(--ease) forwards .1s;} .chart.in .chart-svg .ch{animation:chdraw 1s var(--ease) forwards;animation-delay:calc(var(--d,0) * .16s + .35s);} .chart.in .chart-svg .ch.us-glow{animation:fadeGlow 1.4s ease forwards 2.6s;} @keyframes chdraw{to{stroke-dashoffset:0;}} @keyframes fadeIn{to{opacity:1;}} @keyframes fadeGlow{to{opacity:.22;}} @media (max-width:860px){ .chart-grid{grid-template-columns:1fr;gap:44px;} .chart-figure{max-width:300px;} } /* ---------- the proof band (the practice, not us: ONE labeled strip) ---------- */ .proof-wrap{width:100%;max-width:1080px;margin:0 auto;} .proof-eyebrow{font-family:var(--font-mono);font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-soft);margin-bottom:26px;} .proof h2{color:var(--paper);} .proof h2 em{font-style:italic;font-weight:300;color:var(--gold-soft);} .proof-grid{margin-top:50px;display:grid;grid-template-columns:repeat(12,1fr);gap:18px;} .pcard{border:1px solid rgba(251,248,241,.16);background:rgba(251,248,241,.05);border-radius:14px;padding:26px 28px;margin:0;display:flex;flex-direction:column;justify-content:space-between;gap:20px;} .pcard.press.big{grid-column:span 7;} .pcard.press:not(.big){grid-column:span 5;} .pcard.voice{grid-column:span 4;} .pcard.press p{font-family:var(--font-display);font-weight:300;font-style:italic;font-size:clamp(20px,2.1vw,25px);line-height:1.4;color:var(--paper);padding-bottom:.1em;} .pcard.press.big p{font-size:clamp(22px,2.5vw,29px);} .pcard cite{font-style:normal;font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-soft);} /* community proof: the verbatim line, then the genuine screenshot it lives in */ .pcard.shotcard{grid-column:span 4;padding:22px 22px 16px;gap:16px;justify-content:flex-start;background:rgba(251,248,241,.07);} .pcard.shotcard blockquote{margin:0;} .pcard.shotcard blockquote p{font-family:var(--font-body);font-size:17px;line-height:1.6;color:rgba(251,248,241,.92);} .pcard.shotcard img{width:100%;height:auto;border-radius:8px;display:block;margin-top:auto;} .pcard.shotcard figcaption{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(251,248,241,.62);} .proof-names{margin-top:36px;font-size:15px;line-height:1.75;color:rgba(251,248,241,.78);max-width:660px;} .proof-honest{margin-top:28px;padding-top:24px;border-top:1px solid rgba(251,248,241,.18);font-family:var(--font-mono);font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;line-height:2;color:var(--gold-soft);max-width:600px;} @media (max-width:860px){ .proof-grid{grid-template-columns:1fr;gap:14px;margin-top:38px;} .pcard{grid-column:auto!important;padding:22px;} } /* ---------- the reading deck (swipeable, snap, zoomable) ---------- */ .deck{display:block;padding-left:0;padding-right:0;} .deck-head{max-width:820px;margin:0 auto;text-align:center;padding:0 8vw;} .deck-head .one{font-size:clamp(18px,2vw,22px);color:var(--ink-soft);margin:18px auto 0;max-width:50ch;} .deck-rail{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;padding:48px max(8vw,calc(50vw - 370px)) 12px;-webkit-overflow-scrolling:touch;scrollbar-width:none;} .deck-rail::-webkit-scrollbar{display:none;} .deck-rail:focus-visible{outline:2px solid var(--terra);outline-offset:-2px;border-radius:8px;} .deck-card{flex:0 0 min(82vw,720px);scroll-snap-align:center;margin:0;} .deck-card img{width:100%;height:auto;border-radius:14px;border:1px solid var(--line);background:var(--paper);box-shadow:0 34px 70px -30px rgba(31,42,68,.45);cursor:zoom-in;transition:transform .3s var(--ease);} .deck-card img:hover{transform:translateY(-4px);} .deck-card figcaption{margin-top:14px;font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--label);text-align:center;} /* locked pages: the rest of the reading, visibly there and visibly not yours yet */ .deck-card.locked .lockshot{position:relative;display:block;border-radius:14px;overflow:hidden;border:1px dashed var(--line);background:var(--paper-2);box-shadow:0 34px 70px -30px rgba(31,42,68,.35);} .deck-card.locked .lockshot::after{content:"";position:absolute;inset:0;background:rgba(251,248,241,.3);} .deck-card.locked img{filter:blur(14px) saturate(.75);transform:scale(1.08);border:none;border-radius:0;box-shadow:none;cursor:pointer;} .deck-card.locked img:hover{transform:scale(1.08);} .deck-card.locked .lock{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;width:52px;height:52px;border-radius:50%;background:var(--paper);color:var(--ink);display:flex;align-items:center;justify-content:center;box-shadow:0 12px 30px -8px rgba(31,42,68,.4);} .deck-card.locked .lockshot:hover .lock{color:var(--terra);} .lockshot.moretext{aspect-ratio:820/462;display:flex;align-items:center;justify-content:center;padding:8%;text-align:center;text-decoration:none;} .lockshot.moretext p{font-family:var(--font-display);font-weight:400;font-size:clamp(19px,2.3vw,28px);line-height:1.4;color:var(--ink);} .lockshot.moretext em{font-style:italic;font-weight:300;color:var(--terra);} .deck-ctl{display:flex;justify-content:center;gap:12px;margin-top:28px;} .deck-btn{width:46px;height:46px;border-radius:50%;border:1.5px solid var(--ink);background:transparent;color:var(--ink);font-size:17px;line-height:1;cursor:pointer;transition:background .3s,color .3s,transform .2s var(--ease);} .deck-btn:hover{background:var(--ink);color:var(--paper);} .deck-btn:active{transform:scale(.95);} /* ---------- page-zoom lightbox ---------- */ .zoom{position:fixed;inset:0;margin:auto;border:none;border-radius:16px;padding:0;background:var(--paper);width:fit-content;height:fit-content;max-width:94vw;max-height:92vh;box-shadow:0 60px 140px -40px rgba(0,0,0,.5);} .zoom::backdrop{background:rgba(31,42,68,.82);} .zoom img{display:block;width:min(1160px,92vw);height:auto;border-radius:16px;} .zoom-x{position:absolute;top:12px;right:12px;width:40px;height:40px;border-radius:50%;border:none;background:var(--ink);color:var(--paper);font-size:20px;line-height:1;cursor:pointer;} /* ---------- ritual: symbolic line art in the bodygraph's own language ---------- */ .ritual{background:var(--paper);background-image:radial-gradient(46% 52% at 82% 20%, rgba(224,163,37,.15), transparent 70%),radial-gradient(40% 44% at 8% 88%, rgba(194,78,44,.08), transparent 70%);} .shot.ritual-art{height:auto;display:flex;flex-direction:column;align-items:center;} .ritual-svg{width:min(430px,88%);height:auto;display:block;margin:0 auto;} .rt{stroke-width:3;stroke-linecap:round;stroke-linejoin:round;} .rt.him{stroke:var(--ink);} .rt.her{stroke:var(--terra);} .rt.us{stroke:var(--gold);} .rt.thin{stroke-width:2;opacity:.65;} /* the ritual draws itself in, like the chart does (fail-open without JS) */ html.js .ritual .rt{stroke-dasharray:1;stroke-dashoffset:1;} .ritual.in .rt{animation:chdraw 1.1s var(--ease) forwards;animation-delay:calc(var(--d,0) * .22s + .2s);} .ritual-art .page-card.c{position:relative;width:76%;margin:-30px auto 0;transform:rotate(-1.4deg);} @media (max-width:860px){.ritual-art .page-card.c{margin-top:-18px;}} /* ---------- how it works ---------- */ .how-wrap{width:100%;max-width:820px;margin:0 auto;} .how-wrap>h2{text-align:center;} .steps{list-style:none;margin:64px auto 0;padding:0;max-width:680px;} .steps li{display:grid;grid-template-columns:72px 1fr;gap:26px;padding:32px 0;align-items:start;} .steps li + li{border-top:1px solid var(--line);} .step-n{font-family:var(--font-display);font-style:italic;font-weight:300;font-size:52px;line-height:1;color:var(--terra);padding-top:2px;} .steps h3{font-family:var(--font-display);font-weight:600;font-size:24px;color:var(--ink);letter-spacing:-.01em;} .steps p{font-size:17px;line-height:1.65;color:var(--ink-soft);margin-top:8px;max-width:52ch;} @media (max-width:860px){.steps li{grid-template-columns:52px 1fr;gap:18px;padding:26px 0;}.step-n{font-size:40px;}} /* ---------- founder note ---------- */ .note{background:var(--paper-2);} .note-wrap{width:100%;max-width:640px;margin:0 auto;} .note-wrap p{font-size:clamp(17px,1.7vw,20px);line-height:1.75;color:var(--ink-soft);margin-top:26px;} .note-wrap .note-sign{font-family:var(--font-display);font-style:italic;font-weight:400;font-size:26px;color:var(--ink);margin-top:38px;} .note-sign .thai{font-family:var(--font-thai);font-style:normal;font-size:20px;color:var(--gold);margin-left:14px;} /* ---------- faq ---------- */ .faq-wrap{width:100%;max-width:720px;margin:0 auto;} .faq-list{margin-top:48px;border-top:1px solid var(--line);} .faq-list details{border-bottom:1px solid var(--line);} .faq-list summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:24px 2px;font-family:var(--font-body);font-weight:600;font-size:19px;color:var(--ink);} .faq-list summary::-webkit-details-marker{display:none;} .faq-list summary::after{content:"+";font-family:var(--font-display);font-weight:300;font-size:28px;line-height:.8;color:var(--terra);transition:transform .3s var(--ease);flex:0 0 auto;} .faq-list details[open] summary::after{transform:rotate(45deg);} .faq-list summary:focus-visible{outline:2px solid var(--terra);outline-offset:4px;border-radius:4px;} .faq-list details p{padding:0 2px 26px;font-size:17px;line-height:1.7;color:var(--ink-soft);max-width:60ch;} /* ---------- the gate ---------- */ .gate{align-items:center;background:radial-gradient(50% 46% at 82% 16%, rgba(224,163,37,.16), transparent 70%);} .gatewrap{width:100%;max-width:860px;margin:0 auto;} .gstep{animation:stepIn .5s var(--ease);} .gstep:focus{outline:none;} @keyframes stepIn{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}} .people{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:34px;} .person{border:1px solid var(--line);border-radius:16px;padding:26px 24px;background:var(--paper-2);} .person.him{border-top:4px solid var(--ink);} .person.her{border-top:4px solid var(--terra);} .person legend{font-family:var(--font-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);padding:0 8px;} .gstep label{display:block;font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--label);margin-top:18px;} .gstep label .opt{text-transform:none;letter-spacing:0;} .gstep input[type=text],.gstep input[type=date],.gstep input[type=time],.gstep input[type=email]{ width:100%;margin-top:8px;padding:13px 15px;border:1.5px solid var(--line);border-radius:10px;background:var(--paper); font-family:var(--font-body);font-size:16px;color:var(--ink);text-transform:none;letter-spacing:normal;} .gstep input:focus{outline:none;border-color:var(--terra);} .gstep input:focus-visible{outline:2px solid var(--terra);outline-offset:1px;} /* birth-place autocomplete */ .place-field{position:relative;display:block;} .place-list{position:absolute;left:0;right:0;top:calc(100% + 5px);z-index:20;list-style:none;margin:0;padding:6px;background:var(--paper);border:1.5px solid var(--line);border-radius:10px;box-shadow:0 22px 44px -20px rgba(31,42,68,.4);max-height:236px;overflow:auto;} .place-list li{font-family:var(--font-body);font-size:15px;color:var(--ink);padding:10px 12px;border-radius:7px;cursor:pointer;text-transform:none;letter-spacing:normal;} .place-list li:hover,.place-list li.on{background:var(--paper-2);} .time-row{position:relative;} .time-row .unknown{display:inline-flex;align-items:center;gap:7px;margin-top:10px;font-size:12px;color:var(--label);text-transform:none;letter-spacing:0;} .time-row .unknown input{width:auto;margin:0;} .gstep label.unknown{margin-top:10px;} .attest,.consent{display:flex;gap:12px;align-items:flex-start;margin-top:24px;font-family:var(--font-body);font-size:15px;letter-spacing:normal;text-transform:none;color:var(--ink-soft);line-height:1.5;} .attest input,.consent input{width:auto;margin-top:3px;flex:0 0 auto;accent-color:var(--terra);} .consent.optional{color:var(--label);} .email input{display:block;max-width:440px;} .err{color:var(--terra-deep);font-family:var(--font-body);font-size:15px;text-transform:none;letter-spacing:normal;margin-top:16px;min-height:1px;} .privacy-note{font-family:var(--font-body);font-size:14px;color:var(--label);margin-top:14px;text-transform:none;letter-spacing:normal;max-width:520px;} .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;} @media (max-width:860px){.people{grid-template-columns:1fr;}} .people.one-col{grid-template-columns:1fr;max-width:560px;} /* funnel progress: a quiet bar that fills station by station */ .fprog{height:2px;background:var(--line);border-radius:2px;margin-bottom:36px;overflow:hidden;} .fprog span{display:block;height:100%;width:0;background:var(--gold);transition:width .5s var(--ease);} /* pick screens: one honest question, tappable answers */ .pick{display:flex;flex-direction:column;gap:12px;margin-top:34px;max-width:640px;} .pickbtn{font-family:var(--font-body);font-size:17px;line-height:1.5;text-align:left;color:var(--ink);background:var(--paper-2);border:1.5px solid var(--line);border-radius:12px;padding:16px 20px;cursor:pointer;transition:border-color .25s,background .25s,transform .2s var(--ease);} .pickbtn:hover{border-color:var(--terra);transform:translateY(-1px);} .pickbtn:focus-visible{outline:2px solid var(--terra);outline-offset:2px;} .pickbtn.on{border-color:var(--terra);background:rgba(194,78,44,.07);} /* the cast: chart draws, true facts land beside it */ .cast-grid{display:grid;grid-template-columns:minmax(170px,250px) 1fr;gap:44px;align-items:center;margin-top:36px;} .castfig{margin:0;} .castfig .chart-svg{width:100%;max-width:240px;} .castfig .sample-tag{position:static;display:block;margin-top:14px;text-align:center;} .cast-facts{display:flex;flex-direction:column;gap:16px;min-height:230px;} .cast-fact{font-family:var(--font-body);font-size:clamp(17px,1.9vw,20px);line-height:1.55;color:var(--ink);max-width:46ch;opacity:0;transform:translateY(10px);transition:opacity .7s var(--ease),transform .7s var(--ease);} .cast-fact.in{opacity:1;transform:none;} .cast-fact.honest{font-size:14.5px;color:var(--label);border-top:1px solid var(--line);padding-top:14px;margin-top:6px;} html.js .castfig .ch{stroke-dasharray:1;stroke-dashoffset:1;} html.js .castfig .ch.us-glow{stroke-dasharray:none;stroke-dashoffset:0;opacity:0;} html.js .castfig .bg-centers{opacity:0;} .castfig.run .bg-centers{animation:fadeIn .9s var(--ease) forwards .1s;} .castfig.run .ch{animation:chdraw 1.2s var(--ease) forwards;animation-delay:calc(var(--d,0) * .34s + .3s);} .castfig.run .ch.us-glow{animation:fadeGlow 1.4s ease forwards 3.2s;} @media (max-width:860px){ .cast-grid{grid-template-columns:1fr;gap:26px;} .castfig{max-width:190px;margin:0 auto;} .cast-facts{min-height:0;} } /* the money moment: enumerated deliverables + radical price clarity */ .offer-list{list-style:none;margin:34px 0 0;padding:0;display:flex;flex-direction:column;gap:14px;max-width:640px;} .offer-list li{padding:17px 21px;background:var(--paper-2);border:1px solid var(--line);border-radius:12px;font-size:16.5px;line-height:1.6;color:var(--ink-soft);} .offer-list strong{color:var(--ink);font-weight:600;} .pricebox{margin-top:28px;padding:24px 26px;border:1.5px solid var(--ink);border-radius:16px;max-width:640px;background:var(--paper);} .price{display:flex;align-items:baseline;gap:16px;} .price .amount{font-family:var(--font-display);font-weight:600;font-size:54px;line-height:1;color:var(--ink);letter-spacing:-.02em;} .price .once{font-family:var(--font-mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--terra);} .price-truth{margin-top:12px;font-size:15.5px;line-height:1.6;color:var(--ink-soft);max-width:52ch;} /* the mirror: their two charts, already drawn, named (gate step 2) */ .mirror{display:flex;align-items:center;gap:22px;margin:28px 0 2px;} .mirror .chart-svg.mini{width:88px;flex:0 0 auto;filter:drop-shadow(0 12px 20px rgba(31,42,68,.18));} .mirror .chart-svg.mini .bg-center{fill:var(--paper);stroke-width:2.2;} .mirror .chart-svg.mini .bg-center.him{fill:#DCDDE4;} .mirror .chart-svg.mini .bg-center.her{fill:#EFD9CB;} .mirror .chart-svg.mini .ch{stroke-width:3.2;} .mirror .chart-svg.mini .ch.us{stroke-width:4;} .mirror-names{display:flex;flex-direction:column;gap:8px;font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;} .mn{position:relative;padding-left:22px;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .mn::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:13px;height:3px;border-radius:2px;} .mn.ink{color:var(--ink);}.mn.ink::before{background:var(--ink);} .mn.terra{color:var(--terra);}.mn.terra::before{background:var(--terra);} .mn.gold{color:var(--gold);}.mn.gold::before{background:var(--gold);} /* ---------- mobile sticky CTA ---------- */ .sticky-cta{display:none;} @media (max-width:860px){ .sticky-cta{display:block;position:fixed;left:16px;right:16px;bottom:14px;z-index:40;transform:translateY(140%);transition:transform .45s var(--ease);} .sticky-cta .btn{display:block;width:100%;text-align:center;box-shadow:0 18px 44px -12px rgba(31,42,68,.5);} .sticky-cta.show{transform:none;} } /* ---------- footer ---------- */ .site-foot{position:relative;z-index:1;background:var(--ink);color:rgba(251,248,241,.8);padding:56px 8vw 44px;} .foot-row{display:flex;justify-content:space-between;align-items:center;font-family:var(--font-mono);font-size:13px;letter-spacing:.12em;text-transform:uppercase;} .foot-row .thai{font-family:var(--font-thai);text-transform:none;color:var(--gold-soft);font-size:20px;letter-spacing:0;} .foot-privacy{font-size:15px;line-height:1.7;color:rgba(251,248,241,.8);margin-top:22px;max-width:640px;} .foot-privacy a{color:var(--paper);text-underline-offset:3px;} .foot-links{display:flex;flex-wrap:wrap;gap:14px 26px;margin-top:24px;font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;} .foot-links a{color:rgba(251,248,241,.8);text-decoration:none;border-bottom:1px solid rgba(251,248,241,.3);padding-bottom:2px;} .foot-links a:hover{color:var(--paper);border-color:var(--paper);} .site-foot .disc{font-size:13px;color:rgba(251,248,241,.66);margin-top:26px;max-width:640px;} /* ---------- reveal ---------- */ body.anim .reveal>*,body.anim .reveal-solo{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease);} .view.in .reveal>*,.view.in .reveal-solo{opacity:1;transform:none;} .view.in .reveal>*:nth-child(2){transition-delay:.08s} .view.in .reveal>*:nth-child(3){transition-delay:.16s} .view.in .reveal>*:nth-child(4){transition-delay:.24s} /* ---------- reduced motion ---------- */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} .progress{transition:none;} html.js .hero-h1 .line>span{animation:none;transform:none;} html.js .rise-el{animation:none;opacity:1;transform:none;} body.anim .reveal>*,body.anim .reveal-solo{transition:opacity .3s;transform:none;} .gstep{animation:none;} html.js .chart .chart-svg .ch{stroke-dasharray:none;stroke-dashoffset:0;animation:none!important;} html.js .chart .chart-svg .ch.us-glow{opacity:.22;animation:none!important;} html.js .chart .chart-svg .bg-centers{opacity:1;animation:none!important;} html.js .castfig .ch{stroke-dasharray:none;stroke-dashoffset:0;animation:none!important;} html.js .castfig .ch.us-glow{opacity:.22;animation:none!important;} html.js .castfig .bg-centers{opacity:1;animation:none!important;} html.js .ritual .rt{stroke-dasharray:none;stroke-dashoffset:0;animation:none!important;} .cast-fact{transition:opacity .3s;transform:none;} .fprog span{transition:none;} .pickbtn{transition:none;} .page-card{--py:0!important;} .sticky-cta{transition:none;} }