/* ============================================================================
   site/landing.css: the front page.
   Dark, large type, one pinned "product" that changes with the story. No web fonts, no images, no libraries.
   Movement is by transform and opacity only, switched off for anybody who asks for less (see the last block).
   ========================================================================= */
:root{
  --bg:#050507;--bg2:#0b0c10;--fg:#f5f5f7;--mut:#a1a1aa;--dim:#8d8d97;--line:rgba(255,255,255,.1);
  --accent:#2b8fd6;--accent-hi:#4ea3d8;--teal:#2dd4bf;--gold:#e0b341;
  --font:ui-sans-serif,-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI Variable Display","Segoe UI",system-ui,Roboto,"Helvetica Neue",Arial,sans-serif;
  --ease:cubic-bezier(.2,.8,.2,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font);line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
svg{display:block}
.wrap{width:min(1120px,100% - 48px);margin-inline:auto}
.narrow{width:min(820px,100% - 48px)}

/* ---- a way past the bar for the keyboard ---- */
.skip{position:fixed;left:16px;top:-60px;z-index:100;padding:10px 18px;border-radius:999px;background:#fff;color:#000;font-weight:600;transition:top .2s}
.skip:focus{top:12px}

/* ---- navigation ---- */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;gap:28px;height:56px;padding:0 max(24px,calc((100% - 1120px)/2));background:rgba(5,5,7,0);transition:background .3s,backdrop-filter .3s,border-color .3s;border-bottom:1px solid transparent}
.nav.is-solid{background:rgba(5,5,7,.72);-webkit-backdrop-filter:saturate(1.6) blur(18px);backdrop-filter:saturate(1.6) blur(18px);border-color:var(--line)}
.brand{display:inline-flex;align-items:center;gap:10px;font-weight:650;letter-spacing:-.01em}
.brand svg{width:24px;height:24px;color:var(--accent-hi)}
.nav__links{display:flex;gap:26px;margin-left:auto;font-size:14px;color:var(--mut)}
.nav__links a:hover{color:var(--fg)}
@media (max-width:720px){.nav__links{display:none}.nav .btn{margin-left:auto}}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 28px;border-radius:999px;background:var(--accent);color:#fff;font-weight:600;font-size:17px;letter-spacing:-.01em;transition:background .2s,transform .2s var(--ease),box-shadow .2s;box-shadow:0 8px 30px -8px rgba(43,143,214,.7)}
.btn:hover{background:var(--accent-hi);transform:translateY(-1px)}
.btn:active{transform:none}
.btn:focus-visible,.link:focus-visible,.nav a:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:999px}
.btn--small{height:34px;padding:0 16px;font-size:14px;box-shadow:none}
.link{color:var(--accent-hi);font-size:17px;font-weight:500}
.link span{display:inline-block;transition:transform .2s var(--ease)}
.link:hover span{transform:translateX(3px)}
.cta{display:flex;align-items:center;justify-content:center;gap:28px;flex-wrap:wrap;margin-top:34px}

/* ---- type ---- */
.eyebrow{margin:0 0 14px;font-size:15px;font-weight:600;color:var(--accent-hi);letter-spacing:.01em}
h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-.035em;line-height:1.04}
h1{font-size:clamp(3.2rem,9vw + .4rem,7.6rem)}
.grad{background:linear-gradient(100deg,#7cc4f2 0%,#2b8fd6 45%,#2dd4bf 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.lede{max-width:620px;margin:26px auto 0;font-size:clamp(1.1rem,1vw + .85rem,1.45rem);line-height:1.4;color:var(--mut);letter-spacing:-.01em}
.fine{margin:18px 0 0;font-size:13px;color:var(--dim)}
.big{font-size:clamp(2.2rem,5vw + .4rem,4.4rem)}
.sub{max-width:640px;margin:18px auto 0;font-size:clamp(1.05rem,.8vw + .8rem,1.3rem);color:var(--mut);letter-spacing:-.01em;line-height:1.45}

/* ---- hero ---- */
.hero{position:relative;padding:clamp(120px,22vh,200px) 0 clamp(40px,8vh,90px);text-align:center;overflow:hidden}
/* drawing-paper squares behind the words, fading out downwards (a layer of their own, so the words are never faded with them) */
.hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:44px 44px;-webkit-mask-image:linear-gradient(#000 40%,transparent 95%);mask-image:linear-gradient(#000 40%,transparent 95%);pointer-events:none}
.hero__glow{position:absolute;left:50%;top:-10%;width:min(1100px,140vw);height:640px;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(43,143,214,.32),rgba(45,212,191,.08) 55%,transparent 75%);pointer-events:none}
.hero__glow--low{top:auto;bottom:-30%}
.hero__inner{position:relative}

/* ---- the story: one sticky stage, five steps ---- */
.story{position:relative;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,1fr);gap:0 4vw;width:min(1320px,100% - 32px);margin:0 auto;padding-bottom:12vh}
.story__stage{position:sticky;top:12vh;align-self:start;height:76vh;display:flex;align-items:center;z-index:1}
.story__steps{padding-top:8vh}
.step{min-height:86vh;display:flex;align-items:center}
.step__in{opacity:.28;transform:translateY(8px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.js .step.is-on .step__in{opacity:1;transform:none}
html:not(.js) .step__in{opacity:1;transform:none}
.num{margin:0 0 10px;font-size:14px;font-weight:700;letter-spacing:.14em;color:var(--accent-hi)}
.step h2{font-size:clamp(2rem,3.4vw + .6rem,3.4rem)}
.step p:not(.num){margin:16px 0 0;font-size:clamp(1.05rem,.5vw + .9rem,1.25rem);color:var(--mut);line-height:1.45;max-width:30ch}
@media (max-width:900px){
  .story{display:block;width:100%;padding-bottom:6vh}
  .story__stage{top:64px;height:auto;padding:0 12px;background:linear-gradient(var(--bg) 82%,transparent);padding-bottom:16px}
  .story__steps{padding:0 24px}
  .step{min-height:62vh;align-items:flex-start;padding-top:8vh}
  .step p:not(.num){max-width:none}
}

/* ---- the window: the program, drawn in HTML ---- */
.win{width:100%;border:1px solid rgba(255,255,255,.14);border-radius:18px;background:#12141a;box-shadow:0 50px 120px -30px rgba(43,143,214,.45),0 30px 60px -20px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.06);overflow:hidden;color:#d6d8de;font-size:12px}
.win__bar{display:flex;align-items:center;gap:12px;height:36px;padding:0 14px;background:#181b22;border-bottom:1px solid rgba(255,255,255,.07)}
.dots{display:flex;gap:6px}.dots i{width:10px;height:10px;border-radius:50%;background:#3a3e48}
.tab{padding:3px 12px;border-radius:7px;background:#0f1116;border:1px solid rgba(255,255,255,.08);font-size:11.5px;color:#c4c7cf}
.peers{margin-left:auto;display:flex}.peers b{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:10px;color:#fff;border:2px solid #181b22;margin-left:-6px;opacity:0;transform:scale(.6);transition:opacity .4s,transform .5s var(--ease)}
.peers .pa{background:#2b8fd6}.peers .pb{background:#17a589}
.win__body{display:grid;grid-template-columns:42px minmax(0,1fr) 168px}
.rail{display:flex;flex-direction:column;gap:6px;padding:10px 6px;background:#0f1116;border-right:1px solid rgba(255,255,255,.06)}
.rail i{display:grid;place-items:center;height:30px;border-radius:8px;color:#8d919c;transition:background .3s,color .3s}
.rail svg{width:17px;height:17px}
.sheetwrap{background:#2b2f38;padding:14px;min-width:0}
.sheet{width:100%;height:auto;border-radius:3px;box-shadow:0 6px 24px rgba(0,0,0,.45)}
.panel{padding:12px;background:#0f1116;border-left:1px solid rgba(255,255,255,.06)}
.panel h4{font-size:12px;letter-spacing:0;font-weight:650;color:#e9eaee;margin-bottom:10px}
.panel dl{margin:0}.panel .row{display:flex;justify-content:space-between;gap:8px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.07);opacity:0;transform:translateX(8px);transition:opacity .5s,transform .5s var(--ease)}
.panel dt{color:#9ea2ad}.panel dd{margin:0;font-weight:650;color:#fff;font-variant-numeric:tabular-nums}
.panel__note{margin:12px 0 0;display:flex;gap:7px;align-items:flex-start;color:#7d818c;font-size:10.5px;line-height:1.35;opacity:0;transition:opacity .6s .5s}
.panel__note .d{flex:none;width:6px;height:6px;margin-top:4px;border-radius:50%;background:var(--teal)}
.win__status{display:flex;align-items:center;gap:18px;height:28px;padding:0 14px;background:#181b22;border-top:1px solid rgba(255,255,255,.07);font-size:11px;color:#9ea2ad}
.win__status b{font-weight:600;color:#c4c7cf}.grow{flex:1}
.win__status em{font-style:normal}
.s-scale .yes{display:none;color:#6ee7b7}.s-scale .no{color:#fbbf77}
.priv{display:inline-flex;gap:5px;align-items:center;color:#7be0c8}.priv svg{width:12px;height:12px}
@media (max-width:620px){.win__body{grid-template-columns:34px minmax(0,1fr)}.panel{display:none}}

/* the stage's state: what each step has put on the sheet */
.g-scale,.g-measure,.g-markup,.g-peers{opacity:0;transition:opacity .35s}
[data-step="2"] .g-scale,[data-step="3"] .g-scale,[data-step="4"] .g-scale,[data-step="5"] .g-scale,
[data-step="3"] .g-measure,[data-step="4"] .g-measure,[data-step="5"] .g-measure,
[data-step="4"] .g-markup,[data-step="5"] .g-markup,
[data-step="5"] .g-peers{opacity:1}
[data-step="3"] .peers b,[data-step="4"] .peers b{opacity:0}
[data-step="5"] .peers b{opacity:1;transform:none}
[data-step="2"] .s-scale .no,[data-step="3"] .s-scale .no,[data-step="4"] .s-scale .no,[data-step="5"] .s-scale .no{display:none}
[data-step="2"] .s-scale .yes,[data-step="3"] .s-scale .yes,[data-step="4"] .s-scale .yes,[data-step="5"] .s-scale .yes{display:inline}
[data-step="3"] .row,[data-step="4"] .row,[data-step="5"] .row,[data-step="3"] .panel__note,[data-step="4"] .panel__note,[data-step="5"] .panel__note{opacity:1;transform:none}
.row.r-b{transition-delay:.25s}.row.r-c{transition-delay:.5s}
/* the tool in hand, in the rail */
.rail i{position:relative}
[data-step="1"] .r1,[data-step="2"] .r2,[data-step="3"] .r3,[data-step="4"] .r4,[data-step="5"] .r5{background:rgba(43,143,214,.22);color:#7cc4f2}
[data-step="3"] .r3b{color:#c4b5fd}

/* the marks draw themselves when their step arrives (and only then: the class is added and removed by the page) */
.draw{stroke-dasharray:1;stroke-dashoffset:0}
.pop,.fadein{transform-box:fill-box;transform-origin:center}
.is-playing .draw{animation:draw .9s var(--ease) both}
.is-playing .draw.d2{animation-delay:.25s}.is-playing .draw.d3{animation-delay:.6s}
.is-playing .pop{animation:pop .5s var(--ease) .5s both}
.is-playing .pop.d2{animation-delay:.9s}.is-playing .pop.d3{animation-delay:1.1s}.is-playing .pop.d4{animation-delay:1.3s}
.is-playing .fadein{animation:fade .8s ease .1s both}
@keyframes draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes pop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
/* two people moving round the sheet */
.cur{transform-box:view-box}
.ca{animation:wander-a 9s ease-in-out infinite alternate}.cb{animation:wander-b 11s ease-in-out infinite alternate}
@keyframes wander-a{0%{transform:translate(130px,150px)}50%{transform:translate(260px,110px)}100%{transform:translate(330px,196px)}}
/* nothing keeps moving while it is out of sight (the page marks them) */
.is-away .cur,.is-away .chip{animation-play-state:paused}
@keyframes wander-b{0%{transform:translate(400px,260px)}50%{transform:translate(310px,170px)}100%{transform:translate(160px,235px)}}

/* what is far below the screen is not drawn until it is near (the page stays light on a slow phone) */
.features,.together,.facts,.final{content-visibility:auto;contain-intrinsic-size:auto 640px}

/* ---- features ---- */
.features{padding:clamp(80px,14vh,160px) 0;text-align:center;background:linear-gradient(var(--bg),var(--bg2) 30%,var(--bg2) 85%,var(--bg))}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;margin-top:56px;text-align:left}
.card{padding:26px 24px 28px;border:1px solid var(--line);border-radius:22px;background:linear-gradient(160deg,rgba(255,255,255,.055),rgba(255,255,255,.015));transition:border-color .3s,transform .4s var(--ease),background .3s}
.card:hover{border-color:rgba(124,196,242,.4);transform:translateY(-3px)}
.card i{display:grid;place-items:center;width:42px;height:42px;margin-bottom:18px;border-radius:12px;color:#7cc4f2;background:rgba(43,143,214,.16)}
.card i svg{width:22px;height:22px}
.card h3{font-size:1.3rem;letter-spacing:-.02em;margin-bottom:8px}
.card p{margin:0;color:var(--mut);font-size:.98rem;line-height:1.5}

/* ---- together ---- */
.together{position:relative;padding:clamp(80px,16vh,180px) 0;text-align:center;background:radial-gradient(60% 70% at 50% 50%,rgba(45,212,191,.12),transparent 70%)}
.lead2{margin:26px 0 0;font-size:1.15rem;font-weight:600;color:var(--teal)}
.chips{list-style:none;margin:46px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.chip{display:inline-flex;align-items:center;gap:10px;padding:8px 18px 8px 8px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.05);font-size:15px;color:#d6d8de;animation:bob 6s ease-in-out infinite}
.chip b{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;font-size:12px;color:#fff;background:#2b8fd6}
.chip--b b{background:#17a589}.chip--c b{background:#7c3aed}
.chip--b{animation-delay:-2s}.chip--c{animation-delay:-4s}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* ---- facts ---- */
.facts{padding:clamp(40px,8vh,90px) 0;border-block:1px solid var(--line)}
.facts__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:30px;margin:0;text-align:center}
.facts dt{font-size:clamp(2.6rem,5vw,4.2rem);font-weight:700;letter-spacing:-.04em;background:linear-gradient(120deg,#fff,#7cc4f2);-webkit-background-clip:text;background-clip:text;color:transparent}
.facts dd{margin:6px 0 0;color:var(--mut)}

/* ---- final ---- */
.final{position:relative;padding:clamp(100px,20vh,220px) 0;text-align:center;overflow:hidden}
.final .wrap{position:relative}
.foot{padding:26px 0 40px;border-top:1px solid var(--line);color:var(--dim);font-size:13px}
.foot__in{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}

/* ---- scrolling in: only when scripting is there to take it off again ---- */
.js .rv{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .rv.is-in{opacity:1;transform:none}
.js .grid .rv:nth-child(2n){transition-delay:.08s}.js .grid .rv:nth-child(3n){transition-delay:.16s}.js .grid .rv:nth-child(4n){transition-delay:.24s}

/* a gentle lift for the window as it arrives, with no script, where the browser can do it from the scroll itself */
@supports (animation-timeline: view()){
  .win{animation:lift linear both;animation-timeline:view();animation-range:entry 0% entry 60%}
  @keyframes lift{from{transform:translateY(60px) scale(.94);opacity:.4}to{transform:none;opacity:1}}
}

/* ---- a page not found ---- */
.lost{min-height:100vh;display:grid;place-items:center;text-align:center;padding:120px 24px 60px}
.lost h1{font-size:clamp(3rem,8vw,6rem)}

/* ---- for anybody who asks for less ---- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important}
  .js .rv{opacity:1;transform:none}
  .step__in{opacity:1;transform:none}
  .cur{display:none}
}

/* ---- the account area of the bar ---- */
.nav__acct{display:flex;align-items:center;gap:18px;margin-left:0}
.nav__signin{font-size:14px;color:var(--mut)}
.nav__signin:hover{color:var(--fg)}
.nav__links{margin-left:auto}
@media (max-width:720px){.nav__acct{margin-left:auto}.nav__signin{display:none}}

/* ---- the account page ---- */
.page .nav{background:rgba(5,5,7,.72);-webkit-backdrop-filter:saturate(1.6) blur(18px);backdrop-filter:saturate(1.6) blur(18px);border-color:var(--line)}
.acct{position:relative;padding:clamp(110px,18vh,170px) 0 clamp(70px,12vh,140px);overflow:hidden}
.acct .wrap{position:relative}
.acct__head{text-align:center;margin-bottom:clamp(36px,6vh,64px)}
.acct__title{font-size:clamp(2.6rem,6vw + .4rem,5rem)}
.acct__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:20px;align-items:start}
.acard{padding:clamp(24px,3vw,36px);border:1px solid var(--line);border-radius:24px;background:linear-gradient(160deg,rgba(255,255,255,.06),rgba(255,255,255,.015))}
.acard h2{font-size:1.7rem;letter-spacing:-.03em;margin-bottom:12px}
.acard p{margin:0 0 16px;color:var(--mut);line-height:1.5}
.acard .fine{margin-top:18px;color:var(--dim)}
.form{display:grid;gap:6px;margin-top:6px}
.form label{margin-top:10px;font-size:14px;font-weight:600;color:#d6d8de}
.form .opt{font-weight:400;color:var(--dim)}
.form input,.form select,.form textarea{width:100%;padding:13px 14px;border:1px solid rgba(255,255,255,.16);border-radius:12px;background:rgba(255,255,255,.05);color:var(--fg);font:inherit;font-size:16px}
.form select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,#a1a1aa 50%),linear-gradient(135deg,#a1a1aa 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat}
.form select option{color:#111;background:#fff}
.form textarea{resize:vertical;min-height:84px}
.form input:focus-visible,.form select:focus-visible,.form textarea:focus-visible{outline:2px solid var(--accent-hi);outline-offset:1px;border-color:transparent}
.form .btn{margin-top:20px;justify-self:start}
.form .btn[disabled]{opacity:.55;cursor:default;transform:none}
.msg{min-height:1.5em;margin:12px 0 0;font-size:15px;color:var(--mut)}
.msg.is-ok{color:#6ee7b7}.msg.is-bad{color:#fca5a5}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---- a reading page (privacy) and the small delete box ---- */
.doc{padding:clamp(110px,18vh,170px) 0 clamp(70px,12vh,140px)}
.doc h1{margin-bottom:18px}
.doc h2{margin:38px 0 8px;font-size:1.35rem;letter-spacing:-.02em}
.doc p{margin:0 0 6px;color:var(--mut);font-size:1.05rem;line-height:1.6}
.doc .lede{margin:0 0 10px;text-align:left}
.doc a,.acard .fine a,.foot a{color:var(--accent-hi);text-decoration:underline;text-underline-offset:3px}
.doc a:hover,.foot a:hover{color:#fff}
.forget{margin-top:22px;border-top:1px solid var(--line);padding-top:14px;color:var(--mut)}
.forget summary{cursor:pointer;font-size:14px;color:var(--mut)}
.forget summary:hover{color:var(--fg)}
.forget .form{margin-top:10px}

/* ---- signed in: the name in the bar (site/session.js builds it; nothing here shows unless it does) ---- */
.nav__acct--in{display:flex;align-items:center;gap:14px}
.nav__who-wrap{position:relative}
.nav__user{display:inline-flex;align-items:center;gap:9px;height:34px;padding:0 10px 0 5px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--fg);font:inherit;font-size:14px;cursor:pointer}
.nav__user:hover{background:rgba(255,255,255,.08)}
.nav__user:focus-visible{outline:2px solid #fff;outline-offset:3px}
.nav__avatar{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--teal));color:#fff;font-size:11px;font-weight:700;letter-spacing:.02em}
.nav__who{max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav__caret{font-size:10px;color:var(--dim)}
.nav__menu{position:absolute;right:0;top:calc(100% + 8px);min-width:230px;padding:6px;border:1px solid var(--line);border-radius:14px;background:#0e0f14;box-shadow:0 18px 50px rgba(0,0,0,.55);z-index:60}
.nav__menu[hidden]{display:none}
.nav__menu a{display:block;padding:10px 12px;border-radius:9px;font-size:14px;color:var(--fg)}
.nav__menu a:hover,.nav__menu a:focus-visible{background:rgba(255,255,255,.07);outline:none}
.nav__menu a:last-child{color:var(--mut);border-top:1px solid var(--line);margin-top:4px;border-radius:0 0 9px 9px}
@media (max-width:720px){.nav__who{display:none}.nav__acct--in .btn{display:none}}

/* ---- Our Plans (tools/sitePlans.cjs): on the front page and on /plans ---- */
.plans{padding:clamp(70px,10vh,130px) 0;text-align:center}
.plans--page{text-align:left;padding-top:clamp(90px,14vh,140px)}
.plans--page .lede,.plans--page .eyebrow{text-align:left}
.plans__state{max-width:720px;margin:26px auto 0;padding:14px 18px;border:1px solid rgba(224,179,65,.45);border-radius:14px;background:rgba(224,179,65,.08);color:var(--fg);font-size:15px;line-height:1.5;text-align:left}
.plans__state strong{color:var(--gold)}
.plans--page .plans__state{margin-left:0}
.plans__cards{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:stretch;text-align:left}
.pcard{position:relative;display:flex;flex-direction:column;gap:12px;padding:28px 26px 26px;border:1px solid var(--line);border-radius:22px;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.015))}
.pcard h3{font-size:1.5rem;letter-spacing:-.02em}
.pcard__tag{margin:0;color:var(--mut);line-height:1.45}
.pcard__price{margin:6px 0 0;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.pcard__price strong{font-size:clamp(2.4rem,3vw + 1rem,3.2rem);font-weight:750;letter-spacing:-.04em;line-height:1}
.pcard__price span{color:var(--mut);font-size:15px}
.pcard__alt{margin:0;color:var(--mut);font-size:14px;line-height:1.5}
.pcard__alt b{color:var(--fg)}
.pcard__who{margin:6px 0 0;padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.05);font-size:14.5px;line-height:1.5;color:var(--fg)}
.pcard__who b{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-hi);margin-bottom:3px}
.pcard__points{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:9px}
.pcard__points li{position:relative;padding-left:26px;font-size:15px;line-height:1.45}
.pcard__points li::before{content:"";position:absolute;left:2px;top:.35em;width:13px;height:7px;border-left:2px solid var(--teal);border-bottom:2px solid var(--teal);transform:rotate(-45deg)}
.pcard__status{margin:auto 0 0;padding-top:6px;font-size:13px;color:var(--dim);line-height:1.45}
.pcard__cta{align-self:flex-start}
.pcard__later{margin:0;font-size:14px;color:var(--mut)}
.pcard--raised{background:linear-gradient(180deg,rgba(43,143,214,.16),rgba(45,212,191,.05)) padding-box,linear-gradient(#0a0c12,#0a0c12) padding-box,linear-gradient(135deg,var(--accent),var(--teal)) border-box;border:1.5px solid transparent;box-shadow:0 24px 60px rgba(43,143,214,.18);transform:translateY(-6px)}
.pcard__badge{position:absolute;top:-13px;left:24px;padding:4px 12px;border-radius:999px;background:linear-gradient(135deg,var(--accent),var(--teal));color:#04121a;font-size:12px;font-weight:750;letter-spacing:.03em}
.pcard--later{opacity:.92}
.plans__more{margin:26px 0 0;text-align:center}
.plans__promises{list-style:none;margin:56px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;text-align:left}
.plans__promises li{padding:20px 22px;border:1px solid var(--line);border-radius:16px}
.plans__promises h3{font-size:1.05rem;letter-spacing:-.01em;margin-bottom:8px}
.plans__promises p{margin:0;color:var(--mut);font-size:14.5px;line-height:1.55}
.plans__h{font-size:clamp(1.5rem,2vw + .8rem,2.1rem);letter-spacing:-.03em;margin:64px 0 18px}
.ptable-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:16px;-webkit-overflow-scrolling:touch}
.ptable-wrap:focus-visible{outline:2px solid #fff;outline-offset:3px}
.ptable{width:100%;min-width:640px;border-collapse:collapse;font-size:15px}
.ptable caption{caption-side:top;text-align:left;padding:14px 18px;color:var(--mut);font-size:14px}
.ptable th,.ptable td{padding:13px 18px;text-align:left;border-top:1px solid var(--line);vertical-align:top}
.ptable thead th{font-size:13px;letter-spacing:.05em;text-transform:uppercase;color:var(--mut);background:rgba(255,255,255,.03)}
.ptable tbody th{font-weight:600;color:var(--fg);width:34%}
.ptable td{color:var(--mut)}
.ptable .is-raised{background:rgba(43,143,214,.09);color:var(--fg)}
.plans__faq{display:grid;gap:10px;max-width:820px}
.plans__faq details{border:1px solid var(--line);border-radius:14px;padding:0 18px}
.plans__faq summary{cursor:pointer;list-style:none;padding:16px 0;font-weight:650;font-size:16.5px;display:flex;justify-content:space-between;gap:16px}
.plans__faq summary::-webkit-details-marker{display:none}
.plans__faq summary::after{content:"+";color:var(--dim);font-weight:400;font-size:20px;line-height:1}
.plans__faq details[open] summary::after{content:"−"}
.plans__faq summary:focus-visible{outline:2px solid #fff;outline-offset:2px;border-radius:8px}
.plans__faq p{margin:0 0 16px;color:var(--mut);line-height:1.6}
.plans__end{margin:48px 0 0;color:var(--mut)}
@media (max-width:980px){.plans__cards{grid-template-columns:minmax(0,1fr);max-width:520px;margin-inline:auto}.pcard--raised{transform:none}.plans--page .plans__cards{margin-inline:0}}
@media (prefers-reduced-motion:reduce){.pcard--raised{transform:none}}