/* Front door (/) layout. Tokens and shared components are in deploy.css. */

:root{--pg:12px;--nav-in:16px;--nav-h:53px}
@media (max-width:620px){:root{--pg:8px;--nav-in:10px;--nav-h:52px}}
html{scroll-padding-top:calc(var(--nav-h) + 24px)}
.page{padding:var(--pg) var(--pg) 0;display:flex;flex-direction:column;gap:12px}
.page>.wrap,.page>main>.wrap{width:100%}
main{display:contents}
.sec{padding-block:clamp(72px,10vw,128px)}
.pb-sec{padding-bottom:clamp(72px,10vw,128px)}

/* ---------- nav: forest pill bar inside the hero, hides on scroll down ---------- */
.nav{position:sticky;top:calc(env(safe-area-inset-top,0px) + 12px);z-index:40;margin:var(--nav-in) auto 0;width:min(100% - 2 * var(--nav-in),1180px);display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:18px;
  background:color-mix(in srgb,var(--forest-deep) 90%,transparent);color:#EEEAE0;border-radius:999px;padding:6px 6px 6px 8px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 1px 2px rgba(0,0,0,.08),0 12px 30px -12px rgba(20,38,28,.45);
  -webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);
  transition:transform 320ms cubic-bezier(.23,1,.32,1),opacity 200ms ease}
.nav:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 1px 2px rgba(0,0,0,.08),0 12px 30px -12px rgba(20,38,28,.45)}
.nav.nav-off{transform:translateY(calc(-100% - 24px));opacity:0;pointer-events:none}
.nav a{text-decoration:none}
.lockup{display:flex;align-items:center;gap:9px;justify-self:start;color:#F3EFE6;padding:2px 8px 2px 2px;border-radius:999px}
.lockup .logo{width:88px;height:auto;display:block;flex:none}
.lockup b{font-weight:500;font-size:18px;letter-spacing:-.02em}
.nav .links{position:relative;display:inline-flex;gap:2px;padding:3px;border-radius:999px;background:rgba(0,0,0,.2);justify-self:center}
.nav .links a{position:relative;z-index:1;color:#C3CABF;font-size:13.5px;font-weight:500;padding:7px 12px;border-radius:999px;white-space:nowrap;transition:color .2s}
.nav .links a[aria-current="true"],.nav .links a:hover{color:#14261C}
.nav .links .thumb{position:absolute;top:3px;left:0;height:calc(100% - 6px);width:0;border-radius:999px;background:#F6F3EC;box-shadow:0 1px 2px rgba(0,0,0,.2),0 2px 6px rgba(0,0,0,.12);opacity:0;transition:transform 240ms cubic-bezier(.23,1,.32,1),width 240ms cubic-bezier(.23,1,.32,1),opacity .2s;pointer-events:none}
.nav .right{display:flex;justify-content:flex-end;align-items:center;gap:4px;justify-self:end}
.nav .signin{display:inline-flex;align-items:center;color:#EEEAE0;font-size:13.5px;font-weight:500;padding:8px 14px;border-radius:999px;white-space:nowrap}
@media (hover:hover){.nav .signin:hover{background:rgba(255,255,255,.08)}}
.nav .btn{min-height:40px;padding:0 5px 0 16px;font-size:13.5px;background:#F1EDE3;color:#14261C;border-radius:999px}
.nav .btn .dot{width:30px;height:30px;background:#14261C;color:#F1EDE3}
@media (hover:hover){.nav .btn:hover{background:#FFFFFF}}
.fd-mb{display:none;align-items:center;gap:4px;height:36px;padding:0 10px 0 14px;border:0;border-radius:999px;background:rgba(255,255,255,.08);color:#EEEAE0;font:inherit;font-size:13.5px;font-weight:500;cursor:pointer}
.fd-mb svg{width:15px;height:15px;transition:transform .2s}
.fd-mb[aria-expanded="true"] svg{transform:rotate(180deg)}
.fd-menu{position:fixed;z-index:60;top:calc(env(safe-area-inset-top,0px) + 70px);left:50%;transform:translateX(-50%);width:min(360px,calc(100vw - 24px));padding:6px;border-radius:18px;background:var(--panel);box-shadow:0 2px 4px rgba(23,32,26,.06),0 24px 48px -16px rgba(60,45,20,.32);display:flex;flex-direction:column}
.fd-menu a{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-radius:12px;color:var(--ink);text-decoration:none;font-size:15px;font-weight:500}
.fd-menu a:hover,.fd-menu a:focus-visible,.fd-menu a[aria-current="true"]{background:var(--sunk)}
.fd-menu .fm-si{display:none;border-top:1px solid var(--hair);margin-top:4px;border-radius:0 0 12px 12px}
@media (max-width:1240px){.nav .links a{padding:7px 9px;font-size:13px}}
@media (max-width:1100px){.nav{grid-template-columns:auto 1fr auto}.nav .links{display:none}.fd-mb{display:inline-flex}}
@media (max-width:860px){.nav{padding-left:6px}.nav .right{grid-column:3}.nav .signin{display:none}.fd-menu .fm-si{display:flex}}
@media (max-width:620px){.nav{top:calc(env(safe-area-inset-top,0px) + 8px)}}
@media (max-width:420px){.lockup b{font-size:17px}.nav .btn .lbl-long{display:none}.fd-mb{padding:0 8px 0 12px}}
@media (min-width:421px){.nav .btn .lbl-short{display:none}}
@media (prefers-reduced-motion:reduce){.nav{transition:opacity 150ms ease}.nav.nav-off{transform:none}.nav .links .thumb{transition:none}}

/* ---------- 1. hero: photo with a forest scrim ---------- */
.hero{position:relative;display:flex;margin-top:calc(-1 * (var(--nav-in) + var(--nav-h) + var(--pg)));min-height:max(560px,calc(100svh - 2 * var(--pg)));border-radius:var(--r-xl);overflow:hidden;isolation:isolate;background:#1B2A21}
.hero-ph{position:absolute;inset:0;z-index:-2}
.hero-ph img{width:100%;height:100%;object-fit:cover;object-position:50% 62%}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:
  radial-gradient(70% 62% at 50% 50%,rgba(13,28,20,.62) 0,rgba(13,28,20,.38) 70%,rgba(13,28,20,.22) 100%),
  linear-gradient(180deg,rgba(13,28,20,.45) 0,rgba(13,28,20,0) 26%,rgba(13,28,20,0) 70%,rgba(13,28,20,.4) 100%)}
.hero-in{flex:1;max-width:900px;margin:0 auto;padding:clamp(140px,15vw,190px) clamp(20px,4vw,40px) clamp(64px,8vw,104px);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.hero .tag{margin-bottom:20px;background:rgba(255,255,255,.14);color:#FBF8F1;border-color:rgba(255,255,255,.28);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.hero h1{font-size:clamp(40px,6vw,76px);line-height:.98;letter-spacing:-.04em;max-width:15ch;margin:0 0 20px;color:#FBF8F1;text-shadow:0 2px 24px rgba(0,0,0,.25)}
.hero .sub{font-size:clamp(16px,1.4vw,18px);line-height:1.5;color:rgba(246,243,236,.9);max-width:52ch;margin:0 0 36px}
.hero .cta{width:min(100%,600px);display:flex;flex-direction:column;align-items:center;gap:16px}
.hero .cta-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.hero .btn-p{background:#F6F3EC;color:#14261C;box-shadow:0 10px 30px -10px rgba(0,0,0,.45)}
@media (hover:hover){.hero .btn-p:hover{background:#FFFFFF}}
.hero .btn-p .dot{background:#14261C;color:#F6F3EC}
.hero .btn-g{padding:0 24px;background:rgba(255,255,255,.12);color:#FBF8F1;border-color:rgba(255,255,255,.32);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
@media (hover:hover){.hero .btn-g:hover{background:rgba(255,255,255,.2)}}
.hero .meet{display:flex;gap:10px;align-items:flex-start;width:fit-content;text-align:left;font-size:14.5px;line-height:1.45;color:rgba(246,243,236,.86);background:rgba(20,38,28,.5);border:1px solid rgba(255,255,255,.16);border-radius:18px;padding:12px 16px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.hero .meet b{font-weight:500;color:#FBF8F1}
/* Nexa's workspace mark (sparkle), light-on-dark */
.hero .meet .nx-mark{width:20px;height:20px;border-radius:0;flex:none;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23CDEBD8%22%20d%3D%22M10%203.5Q11.2%2011.8%2019.5%2013Q11.2%2014.2%2010%2022.5Q8.8%2014.2%200.5%2013Q8.8%2011.8%2010%203.5Z%22/%3E%3Cpath%20fill%3D%22%23F4C06A%22%20d%3D%22M19.5%201Q19.9%204.1%2023%204.5Q19.9%204.9%2019.5%208Q19.1%204.9%2016%204.5Q19.1%204.1%2019.5%201Z%22/%3E%3C/svg%3E") center/contain no-repeat}
@media (max-width:860px){.hero .cta-row{justify-content:center}}
@media (min-width:861px){
  .hero-in{max-width:none;align-items:flex-start;text-align:left;padding-top:120px;padding-left:max(calc(var(--nav-in) + 10px),calc((100% - 1180px) / 2 + 10px));padding-right:max(calc(var(--nav-in) + 10px),calc((100% - 1180px) / 2 + 10px))}
  .hero-in>*{max-width:600px}
  .hero h1{font-size:clamp(44px,5.2vw,72px);max-width:none}
  .hero .sub{max-width:38em}
  .hero .cta{align-items:flex-start}
  .hero-ph img{object-position:50% 36%}
  .hero::before{background:
    linear-gradient(90deg,rgba(13,28,20,.84) 0,rgba(13,28,20,.76) 34%,rgba(13,28,20,.5) 56%,rgba(13,28,20,.16) 72%,rgba(13,28,20,0) 84%),
    linear-gradient(180deg,rgba(13,28,20,.35) 0,rgba(13,28,20,0) 22%,rgba(13,28,20,0) 78%,rgba(13,28,20,.3) 100%)}
}
@media (max-width:620px){
  .hero .tag{margin-bottom:16px}.hero h1{margin-bottom:16px}.hero .sub{margin-bottom:28px}
  .hero-ph img{object-position:58% 50%}
  .hero::before{background:linear-gradient(180deg,rgba(13,28,20,.55) 0,rgba(13,28,20,.5) 55%,rgba(13,28,20,.6) 100%)}
}

/* ---------- section heads ---------- */
.head{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;margin-bottom:clamp(36px,5vw,56px)}
.head h2,.split-head h2{font-size:clamp(32px,4.2vw,54px);line-height:1.04;letter-spacing:-.032em;max-width:18ch}
.head p{font-size:17px;color:var(--mute);max-width:46ch}

/* ---------- 2. sounds familiar ---------- */
.fam-sec{padding-bottom:clamp(48px,6vw,72px)}
.fam{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.fam li{background:var(--card);border:1px solid var(--hair);border-radius:var(--r-lg);padding:22px;display:flex;flex-direction:column;gap:18px;min-height:220px}
.fam svg{width:56px;height:56px}
.fam p{font-size:clamp(17px,1.5vw,19px);line-height:1.32;letter-spacing:-.01em;margin-top:auto}
.fam-close{margin-top:clamp(28px,4vw,40px);font-size:clamp(22px,2.6vw,32px);line-height:1.18;letter-spacing:-.022em;font-weight:500;max-width:30ch}
.fam-close span{color:var(--soft)}

/* questions strip: a calm loop, pauses on hover */
.mq-wrap{margin-bottom:clamp(48px,6vw,72px)}
.mq{position:relative;overflow:hidden;border-block:1px solid var(--hair);padding-block:16px;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%)}
.mq-track{display:flex;width:max-content;animation:mqmove 48s linear infinite}
.mq:hover .mq-track,.mq:focus-within .mq-track{animation-play-state:paused}
.mq-set{display:flex;align-items:center;margin:0;padding:0;list-style:none;flex:none}
.mq-set li{display:flex;align-items:center;white-space:nowrap;font-size:15px;color:var(--mute);letter-spacing:-.005em}
.mq-set li::after{content:"";width:6px;height:6px;margin-inline:28px;background:var(--sun);transform:rotate(45deg);border-radius:1px;flex:none}
@keyframes mqmove{to{transform:translateX(-50%)}}
@media (max-width:620px){.mq{padding-block:13px}.mq-set li{font-size:14px}.mq-set li::after{margin-inline:20px}}
@media (prefers-reduced-motion:reduce){.mq-track{animation:none}.mq{overflow-x:auto;scrollbar-width:none}.mq::-webkit-scrollbar{display:none}.mq-set[aria-hidden]{display:none}}

/* ---------- 3. what Deploy is: two panes ---------- */
.duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.pane{position:relative;overflow:hidden;border-radius:var(--r-lg);padding:28px;display:flex;flex-direction:column;gap:22px;min-height:460px;border:1px solid var(--hair)}
.pane.peach{background:radial-gradient(70% 70% at 30% 35%,var(--peach-a) 0,transparent 75%),var(--peach-b)}
.pane.sage{background:radial-gradient(70% 70% at 70% 30%,var(--sage-a) 0,transparent 75%),var(--sage-b)}
.pane .stage{flex:1;display:flex;flex-direction:column;justify-content:center;gap:10px}
.pane .cap h3{font-size:22px;letter-spacing:-.015em}
.pane .cap p{font-size:15px;color:var(--mute);margin-top:6px;max-width:44ch}
.bub{max-width:88%;padding:11px 14px;border-radius:18px 18px 18px 6px;background:var(--panel);box-shadow:var(--sh-2);font-size:15px;line-height:1.45}
.bub.me{align-self:flex-end;border-radius:18px 18px 6px 18px;background:var(--act);color:var(--on-act)}
.bub.dep{display:flex;gap:10px;align-items:flex-start;max-width:100%}
.src{display:inline-flex;gap:6px;margin-top:8px;font-size:12.5px;color:var(--mute);background:var(--sunk);border-radius:6px;padding:2px 8px}
.dbadge{width:22px;height:22px;flex:none;border-radius:7px;background:var(--act);color:var(--on-act);display:grid;place-items:center;font-size:12px;font-weight:500;margin-top:1px}
.strip{display:flex;flex-direction:column;gap:10px}
.strip li{display:grid;grid-template-columns:30px 1fr;gap:14px;align-items:start;background:var(--panel);border-radius:16px;padding:14px 16px;box-shadow:var(--sh-2);font-size:15px;line-height:1.4}
.strip li b{display:block;font-weight:500;font-size:16px}
.strip li span.s{color:var(--mute)}
.pane.sage .stage.swap{animation:askSwap .36s cubic-bezier(.23,1,.32,1)}
@keyframes askSwap{from{opacity:.2;transform:translateY(6px);filter:blur(3px)}to{opacity:1;transform:none;filter:none}}
@media (prefers-reduced-motion:reduce){.pane.sage .stage.swap{animation:none}}

/* "Ask in your own words" switchers */
.askpick{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-top:12px;font-size:14px;color:var(--mute)}
.dd{position:relative}
.dd>button{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 10px 0 14px;border-radius:999px;border:0;background:color-mix(in srgb,var(--panel) 70%,transparent);box-shadow:inset 0 0 0 1px var(--hair);font:inherit;font-size:14px;font-weight:500;color:var(--ink);cursor:pointer;transition:box-shadow .2s,background .2s}
@media (hover:hover){.dd>button:hover{box-shadow:inset 0 0 0 1px var(--hair-2);background:var(--panel)}}
.dd>button[aria-expanded="true"]{background:var(--panel);box-shadow:inset 0 0 0 1px var(--forest)}
.dd>button svg{width:14px;height:14px;color:var(--mute);transition:transform .2s}
.dd>button[aria-expanded="true"] svg{transform:rotate(180deg)}
.dd ul{position:absolute;left:0;bottom:calc(100% + 6px);z-index:30;min-width:200px;max-width:calc(100vw - 48px);margin:0;padding:5px;list-style:none;background:var(--panel);border-radius:16px;box-shadow:inset 0 0 0 1px var(--hair),0 2px 4px rgba(23,32,26,.06),0 18px 40px -16px rgba(60,45,20,.35);display:grid;gap:2px}
.dd li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;border-radius:10px;font-size:14px;color:var(--ink);cursor:pointer;outline:0}
.dd li:hover,.dd li:focus-visible,.dd li:focus{background:var(--sunk)}
.dd li[aria-selected="true"]::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--forest)}

/* ---------- 4. what you can do ---------- */
.offer{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.offer li{border-radius:var(--r-lg);padding:24px;display:flex;flex-direction:column;gap:12px;min-height:250px;background:var(--panel);border:1px solid var(--hair);box-shadow:var(--sh-1)}
.offer li:nth-child(2){background:var(--forest-deep);color:#EEEAE0;border-color:transparent}
.offer li:nth-child(2) .eg{background:rgba(255,255,255,.07);color:#D8D5CB}
.offer h3{font-size:21px;letter-spacing:-.015em}
.offer p{font-size:15px;line-height:1.45;color:inherit;opacity:.82}
.offer .eg{margin-top:auto;font-size:13.5px;background:var(--sunk);border-radius:12px;padding:9px 12px;color:var(--mute)}
.next{margin-top:16px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:18px 20px;border:1px dashed var(--hair-2);border-radius:var(--r-lg)}
.next .k{font-weight:500;font-size:14px;margin-right:4px}
.pill{display:inline-flex;align-items:center;min-height:32px;padding:0 13px;border-radius:var(--r-pill);border:1px dashed var(--hair-2);font-size:13.5px;color:var(--mute)}
.next small{flex-basis:100%;font-size:13.5px;color:var(--mute)}

/* ---------- 5. why it's different: dusk band ---------- */
.dusk{border-radius:var(--r-xl);overflow:hidden;position:relative;isolation:isolate;color:var(--dusk-ink);background:linear-gradient(180deg,var(--dusk-1) 0%,var(--dusk-2) 58%,var(--dusk-3) 100%)}
.dusk .glow{position:absolute;left:-10%;right:-10%;bottom:-38%;height:70%;z-index:-1;background:radial-gradient(50% 50% at 50% 50%,color-mix(in srgb,#EE8A48 55%,transparent) 0,transparent 70%)}
.dusk .hills{position:absolute;left:0;right:0;bottom:0;height:120px;z-index:-1}
.dusk .hills svg{width:100%;height:100%;display:block}
.dusk-in{max-width:1180px;margin:0 auto;padding:clamp(48px,6vw,80px) clamp(24px,4vw,56px) clamp(120px,12vw,170px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(32px,5vw,72px)}
.dusk .kicker{color:var(--dusk-mute)}
.dusk h2{margin-top:14px;font-size:clamp(32px,4vw,52px);line-height:1.04;letter-spacing:-.032em;max-width:13ch}
.dusk .rightcol{display:flex;flex-direction:column;gap:28px;align-self:center}
.dusk .lead{font-size:17px;color:var(--dusk-mute);max-width:36ch}
.dusk .diffwrap{grid-column:1 / -1}
.diff{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.dcard{position:relative;isolation:isolate;display:flex;flex-direction:column;gap:6px;padding:6px;border-radius:16px;background:rgba(255,255,255,.055);box-shadow:0 0 0 1px rgba(255,255,255,.08),0 1px 2px rgba(0,0,0,.4),0 16px 36px -22px rgba(0,0,0,.7);-webkit-backdrop-filter:blur(16px) saturate(1.1);backdrop-filter:blur(16px) saturate(1.1)}
.dch{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:10px 12px 6px 16px}
.dcard h3{font-size:clamp(18px,1.7vw,21px);letter-spacing:-.012em;color:var(--dusk-ink)}
.dnum{font-size:12px;font-weight:500;font-variant-numeric:tabular-nums;color:var(--dusk-mute);border:1px solid var(--dusk-line);border-radius:999px;padding:2px 8px}
.dinset{flex:1;border-radius:10px;padding:16px 16px 18px;background:rgba(14,17,20,.55);box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 0 0 1px rgba(255,255,255,.06),0 1px 2px rgba(0,0,0,.4),0 8px 18px -10px rgba(0,0,0,.6)}
.dcard p{font-size:15.5px;line-height:1.5;color:var(--dusk-mute);max-width:44ch}

/* ---------- 6. who it's for ---------- */
.who{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.5fr);gap:clamp(24px,5vw,72px);align-items:start}
.who h2{margin-top:14px;font-size:clamp(30px,3.8vw,48px);line-height:1.05;letter-spacing:-.03em}
.groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.groups li{border-radius:var(--r-md);background:var(--card);border:1px solid var(--hair);padding:18px 20px}
.groups b{display:block;font-weight:500;font-size:17px;margin-bottom:4px}
.groups span{font-size:14.5px;color:var(--mute)}
.notes{margin-top:16px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.notes div{padding:16px 20px;border-radius:var(--r-md);border:1px solid var(--hair);font-size:14.5px;color:var(--mute)}
.notes b{display:block;color:var(--ink);font-weight:500;margin-bottom:4px}

/* ---------- 7. how it works: steps bento ---------- */
.split-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:32px;flex-wrap:wrap}
.faces{display:flex;align-items:center;gap:12px;font-size:13.5px;color:var(--mute)}
.faces .row{display:flex}
.faces .av{width:40px;height:40px;margin-left:-10px;border-radius:50%;overflow:hidden;border:2px solid var(--ground);box-shadow:0 1px 2px rgba(23,32,26,.12),0 6px 14px -8px rgba(60,45,20,.4)}
.faces .av:first-child{margin-left:0}
.faces .av svg{width:100%;height:100%;display:block}
.bento{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);grid-template-rows:auto auto auto;gap:16px}
.b-big{grid-row:span 3;position:relative;border-radius:var(--r-lg);overflow:hidden;min-height:520px;background:#C9CFC4}
.b-big>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:40% 40%}
.b-big .float{position:absolute;left:24px;bottom:24px;right:24px;max-width:360px;background:var(--panel);color:var(--ink);border-radius:16px;box-shadow:var(--sh-3);padding:16px 18px;display:grid;grid-template-columns:auto 1fr;gap:4px 14px;align-items:start}
.float p{font-size:16px;line-height:1.4;font-weight:500;letter-spacing:-.005em}
.float .sm{grid-column:2;font-size:13.5px;color:var(--mute)}
.b-card{position:relative;overflow:hidden;isolation:isolate;border-radius:var(--r-lg);padding:28px;display:flex;justify-content:space-between;gap:20px;min-height:252px}
.b-card .txt{position:relative;z-index:1;display:flex;flex-direction:column;gap:14px;justify-content:space-between}
.b-card p{font-size:clamp(20px,2vw,26px);line-height:1.18;letter-spacing:-.02em;font-weight:500;max-width:16ch}
.b-card .txt p.t{max-width:22ch}
.b-card .sm{font-size:15px;line-height:1.45;font-weight:400;letter-spacing:0;max-width:33ch;opacity:.82}
.b-card.light{background:var(--card);border:1px solid var(--hair)}
.b-card.sage{background:var(--sage-b);border:1px solid var(--hair)}
.b-card.dark{background:var(--forest-deep);color:#EEEAE0}
.b-card.dark .num{border-color:rgba(255,255,255,.25)}
.b-card .ill{position:absolute;z-index:0;height:66%;width:auto;max-width:none;pointer-events:none;user-select:none;filter:drop-shadow(0 18px 24px rgba(20,38,28,.16))}
.b-card .ill-2{right:-9%;bottom:-12%}
.b-card .ill-3{right:-3%;bottom:-14%}
.b-card .ill-4{right:-2%;bottom:-13%}
.b-card.dark .ill{filter:drop-shadow(0 18px 28px rgba(0,0,0,.35))}

/* ---------- 8. trust rows, 10. questions ---------- */
.trust{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);gap:clamp(24px,5vw,72px);align-items:start}
.trust h2{font-size:clamp(32px,4vw,52px);line-height:1.04;letter-spacing:-.032em}
.rows{border-top:1px solid var(--hair)}
.rows li{display:grid;grid-template-columns:44px 1fr;gap:20px;align-items:center;padding:22px 20px;border-bottom:1px solid var(--hair);font-size:clamp(18px,1.7vw,22px);line-height:1.35;letter-spacing:-.01em}
.rows li.hi{background:var(--card);border-radius:20px;border-bottom-color:transparent;margin-top:-1px}
.rows b{font-weight:500}
.rows .num{width:40px;height:40px;font-size:14px;background:var(--panel)}
.faq{border-top:1px solid var(--hair)}
.faq details{border-bottom:1px solid var(--hair)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 4px;font-size:clamp(17px,1.6vw,20px);font-weight:500;letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:12px;height:12px;flex:none;border-right:2px solid var(--mute);border-bottom:2px solid var(--mute);transform:rotate(45deg) translate(-3px,-3px);transition:transform 160ms ease}
.faq details[open] summary::after{transform:rotate(225deg) translate(-3px,-3px)}
.faq details p{padding:0 4px 22px;font-size:16px;color:var(--mute);max-width:62ch}

/* ---------- 9. price ---------- */
.price{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:24px;padding:clamp(28px,4vw,44px);border-radius:var(--r-xl);background:radial-gradient(60% 90% at 90% 20%,var(--bloom-a) 0,transparent 70%),var(--card);border:1px solid var(--hair)}
.price h2{font-size:clamp(28px,3.4vw,44px);line-height:1.06;letter-spacing:-.03em;max-width:20ch}
.price p{margin-top:12px;font-size:16px;color:var(--mute);max-width:52ch}
.price .big{font-size:clamp(56px,7vw,96px);font-weight:500;letter-spacing:-.05em;line-height:.9;color:var(--stat);text-align:right}
.price .big small{display:block;font-size:14px;letter-spacing:0;color:var(--mute);margin-top:8px}

/* ---------- 11. closing band, footer ---------- */
.band-sec{padding-bottom:clamp(48px,6vw,80px)}
.band{border-radius:var(--r-xl);padding:clamp(48px,7vw,96px) clamp(24px,4vw,56px);text-align:center;display:flex;flex-direction:column;align-items:center;gap:22px;background:radial-gradient(40% 70% at 50% 110%,var(--bloom-a) 0,transparent 70%),radial-gradient(40% 60% at 10% 0%,var(--bloom-c) 0,transparent 70%),var(--card);border:1px solid var(--hair)}
.band h2{font-size:clamp(32px,4.4vw,58px);line-height:1.02;letter-spacing:-.035em;max-width:16ch}
footer{max-width:1180px;margin:0 auto;padding:28px clamp(20px,4vw,48px) 44px;display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;font-size:14px;color:var(--mute);border-top:1px solid var(--hair)}
footer a{color:var(--mute);text-underline-offset:3px}
footer .sp{margin-right:auto}

/* ---------- responsive ---------- */
@media (max-width:920px){
  .duo,.dusk-in,.trust,.bento,.who,.price{grid-template-columns:minmax(0,1fr)}
  .b-big{grid-row:auto;min-height:440px}
  .fam,.offer{grid-template-columns:repeat(2,minmax(0,1fr))}
  .price .big{text-align:left}
}
@media (max-width:620px){
  .page{gap:8px}
  .pane{padding:20px;min-height:0}
  .fam,.offer,.groups,.notes,.diff{grid-template-columns:minmax(0,1fr)}
  .diff{gap:10px}
  .fam li,.offer li{min-height:0}
  .b-card{flex-direction:column-reverse;min-height:0;padding-bottom:132px}
  .b-card .sm{max-width:40ch}
  .b-card .ill{height:156px}
  .rows li{padding:18px 8px;grid-template-columns:40px 1fr;gap:14px}
}