*{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  :root{
    --bg:#0a0a0b;--bg2:#0e0f10;--card:#141517;--card2:#1a1c1e;
    --line:rgba(255,255,255,.08);--line2:rgba(255,255,255,.16);
    --text:#f5f7fb;--sub:#98a2b3;--faint:#7b8494;
    --blue:var(--accent-fill);--blue2:#bef264;
    /* was #fff: 1.98:1 on the lime fill. Zero consumers today, so this is a
       trap being closed, not a visible change. tokens.css:62 says the same. */
    --accent:var(--accent-fill);--on-accent:#16210a;
    --grad:var(--accent-fill);  }
  :root[data-theme="light"]{
    --bg:#fafafa;--bg2:#f3f4f6;--card:#ffffff;--card2:#f3f4f6;
    --line:rgba(15,23,42,.08);--line2:rgba(15,23,42,.16);
    --text:#0f172a;--sub:#334155;--faint:#475569;
    --blue:#4d7c0f;--blue2:#3f6212;
  }
  body{background:var(--bg);color:var(--text);overflow-x:hidden;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased;line-height:1.5}
  a{color:inherit;text-decoration:none}
  img,video{display:block;max-width:100%}
  h1,h2,h3,.logo,.price,.n{font-family:"Space Grotesk",sans-serif}
  ::selection{background:rgba(132,204,22,.35)}

  /* nav */
  .nav{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:60;
    display:flex;align-items:center;gap:6px;padding:8px 8px 8px 18px;width:min(1120px,calc(100% - 24px));
    background:rgba(14,16,22,.72);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
    border:1px solid var(--line);border-radius:var(--r-full)}
  .logo{font-weight:700;font-size:19px;letter-spacing:-.01em;display:inline-flex;align-items:center;gap:8px}
  .logo svg{width:26px;height:26px}
  .nav .link{color:var(--sub);font-size:14px;font-weight:400;padding:8px 12px;border-radius:var(--r-full);transition:.15s}
  .nav .link:hover{color:var(--text);background:rgba(255,255,255,.05)}
  /* discount flag sits beside the Pricing word, never on top of it */
.nav .link.pricelink:hover{background:none}
  .nav .sp{flex:1}
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:var(--r-md);font-weight:600;
    font-size:14px;padding:11px 22px;cursor:pointer;transition:.16s;border:1px solid transparent;white-space:nowrap}
  .btn.sm{padding:9px 17px;font-size:13.5px}
  /* Primary: a light source. landing.css loads after tokens.css and used to
     zero the shadow, so the shared recipe is restated here. One hover
     language: lift 1px, glow intensifies, a light sweep crosses the surface. */
  .btn.primary{position:relative;isolation:isolate;overflow:hidden;
    background:var(--sheen-fill);color:var(--accent-ink);border-color:transparent;
    box-shadow:var(--sheen-top),var(--accent-glow);
    transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-base) var(--ease-out),
      filter var(--dur-base) var(--ease-out)}
  .btn.primary::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;
    background:var(--sweep);transform:translateX(-120%);opacity:0;transition:opacity var(--dur-fast)}
  .btn.primary:hover{background:var(--sheen-fill);color:var(--accent-ink);filter:brightness(1.05);
    transform:translateY(-1px);box-shadow:var(--sheen-top),var(--accent-glow-strong)}
  .btn.primary:hover::after{opacity:1;transform:translateX(120%);
    transition:transform .5s var(--ease-out),opacity var(--dur-fast)}
  .btn.primary:active{transform:translateY(1px) scale(.985);filter:none;box-shadow:var(--sheen-top),var(--accent-glow-soft)}
  .btn.primary:focus-visible{outline:2px solid var(--text-1);outline-offset:3px}
  /* the marquee CTA is placed by .mall (absolute, translateX(-50%)); the
     primary recipe must not move it, so its geometry is restated at higher
     specificity and the lift is folded into the centring transform */
  .btn.primary.mall{position:absolute}
  .btn.primary.mall:hover{transform:translate(-50%,-1px)}
  .btn.primary.mall:active{transform:translate(-50%,1px) scale(.985)}
  /* secondary actions are text, not boxes: an edge is for inputs. It sits a
     step down from the primary and underlines on hover, so it reads as
     clickable without growing a box. */
  .btn.glass{background:transparent;border-color:transparent;color:var(--sub);
    text-decoration:none;text-underline-offset:5px;text-decoration-thickness:1.5px}
  .btn.glass:hover{background:transparent;color:var(--text);text-decoration:underline}
  .btn.lg{font-size:16px;padding:14px 30px}
  @media(max-width:820px){.nav .link{display:none}}

  /* hero */
  .hero{position:relative;padding:150px 20px 70px;display:flex;flex-direction:column;align-items:center;text-align:center;overflow:hidden}
  .hero::before{content:"";position:absolute;top:-360px;left:50%;transform:translateX(-50%);
    width:1100px;height:900px;max-width:170vw;z-index:0;pointer-events:none;
    /* the blurred green cloud behind the hero is gone */
    background:none;filter:none}
  .hero>*{position:relative;z-index:1}
  /* the free-credits flag is the one thing on this page that has to be seen.
     On --surface-2 it was a dark pill on a dark hero, so it read as missing. */
  .hero h1{font-size:clamp(40px,8.4vw,92px);font-weight:700;line-height:.96;letter-spacing:-.03em;
    max-width:15ch;text-transform:uppercase;margin:22px auto 0}
  .heroctas{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:32px}

  /* marquee video wall */
  .marquee{margin-top:52px;width:100%;overflow:hidden;position:relative;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
  .mrow.a{animation:scrollL 44s linear infinite}
  .mrow.b{animation:scrollR 52s linear infinite;margin-top:14px}
  .marquee:hover .mrow{animation-play-state:paused}
  @keyframes scrollL{from{transform:none}to{transform:translateX(-50%)}}
  @keyframes scrollR{from{transform:translateX(-50%)}to{transform:none}}
  /* same frame as .wq in the output wall: 8px radius, no border, scrim label.
     Three different tile treatments on one page was the actual problem, not
     any one of them being wrong. */
  .tile{position:relative;width:186px;aspect-ratio:9/16;border-radius:var(--r-md);overflow:hidden;flex:none;
    background:#000}
  .tile video,.tile img{width:100%;height:100%;object-fit:cover;transition:transform .45s}
  .tile:hover video,.tile:hover img{transform:scale(1.05)}
  .tile .lab{position:absolute;left:0;right:0;bottom:0;padding:26px 10px 8px;
    font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
    color:#eaf0ff;background:linear-gradient(transparent,rgba(0,0,0,.7))}
  @media(max-width:640px){.tile{width:140px}
    .tile .lab{font-size:11px;padding:20px 8px 7px}}

  /* sections */
  .section{padding:var(--s9) var(--s5);position:relative}
  .section.alt{background:var(--bg2)}
  .wrap{max-width:1120px;margin:0 auto}
  .eyebrow{text-align:center;color:var(--blue2);font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-bottom:15px}
  h2{text-align:center;font-weight:700;}
  .sub{text-align:center;color:var(--sub);font-size:16px;margin:15px auto 50px;max-width:540px}

  .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
  @media(max-width:760px){.grid3{grid-template-columns:1fr}}
  .card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;transition:.22s;position:relative}
  .card:hover{border-color:var(--accent-line)}
  .card .art{width:100%;aspect-ratio:9/16;object-fit:cover;background:var(--bg2);display:block}
  .card h3{font-size:19px;font-weight:700;letter-spacing:-.01em;margin:20px 22px 0}
  .card p{color:var(--sub);font-size:14px;line-height:1.55;margin:9px 22px 24px}
  /* steps */
  .card.step{padding:32px 26px 30px}
  .card.step:hover{border-color:var(--accent-line)}
  .card.step .n{font-size:15px;font-weight:700;letter-spacing:.1em;color:var(--blue2);margin-bottom:18px}
  .card.step h3{margin:0 0 8px}
  .card.step p{margin:0}

  /* pricing */
  .toggle{display:flex;gap:4px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-full);padding:5px;width:max-content;margin:0 auto 38px}
  .toggle button{border:none;background:none;color:var(--sub);font-weight:600;font-size:14px;padding:9px 20px;border-radius:var(--r-full);cursor:pointer;transition:.15s}
  .toggle button.on{background:var(--surface-2);border:1px solid var(--accent-line);color:var(--accent-text);color:var(--accent-text)}
  /* hot pink reads as a deal against the orange brand, green blends into it */
  .toggle .save{font-size:11.5px;font-weight:700;color:var(--pop-ink);background:var(--pop);
    border-radius:var(--r-full);padding:2px 8px;margin-left:6px;letter-spacing:.02em;
    box-shadow:var(--e-2)}
  .toggle button.on .save{background:var(--pop);color:var(--pop-ink);box-shadow:none}
  .orwrap{display:flex;justify-content:center;margin:0 0 16px}
  .offerrail{display:inline-flex;align-items:center;gap:12px;cursor:pointer;font:inherit;
    border:1px solid var(--pop-line);border-radius:var(--r-full);padding:9px 10px 9px 10px;
    background:linear-gradient(90deg,var(--pop-wash),transparent 70%),var(--card);
    /* was a zero-offset pink halo; neutral elevation reads as a real surface
       rather than a glowing sticker, and the offer still pops via --pop-wash */
    box-shadow:0 1px 2px rgba(0,0,0,.28);
    transition:transform .16s var(--ease-out,ease),box-shadow .16s,border-color .16s}
  .offerrail:hover{border-color:var(--pop);
    box-shadow:0 4px 14px -6px rgba(0,0,0,.45)}
  .offerrail .orb{flex:none;background:var(--pop-grad);color:var(--pop-ink);font-size:11px;font-weight:800;
    letter-spacing:.06em;border-radius:var(--r-full);padding:5px 11px}
  .offerrail .ort{color:var(--text);font-size:14px;font-weight:600}
  .offerrail .ort b{color:var(--pop-text);font-weight:800}
  .offerrail .orgo{color:var(--pop-text);font-size:13px;font-weight:700;padding-right:6px}
  .offerrail.on{cursor:default}
  .offerrail.on:hover{transform:none}
  @media(max-width:620px){.offerrail{flex-wrap:wrap;justify-content:center;text-align:center}
    .offerrail .orgo{display:none}}
  /* pink offer flash, pinned top-left of the pricing block */
  #pricing{position:relative}
  @media(max-width:980px){
    #pricing .wrap{text-align:center}
  }
  .plan .was{color:var(--faint);text-decoration:line-through;font-size:15px;font-weight:600;margin-right:7px}
  .plan .peryr b{color:var(--pop-text);font-weight:700}
  .plans{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:980px;margin:0 auto}
  /* index.html does not link style.css, so its mobile collapse never reached
     these. without this the three cards stay in a row on a phone and Ultra
     sits outside the viewport, unreachable because body hides overflow-x. */
  @media(max-width:760px){.plans{grid-template-columns:1fr;max-width:440px}}
  .plan{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:32px 27px;}
  /* the middle plan sits level with the others at rest: same border, same
     surface. Its distinction is the OUR PICK tag, and the green arrives on
     hover like it does on any other card. */
  .plan.hot{border:1px solid var(--line);background:var(--card)}
  .plan .tag{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--pop-grad);border:1px solid transparent;color:var(--pop-ink);
    font-size:11px;font-weight:700;letter-spacing:.06em;padding:5px 14px;border-radius:var(--r-full);white-space:nowrap}
  .plan .price{font-weight:700;font-size:46px;line-height:1;}
  .plan .price span:first-child{font-size:22px;color:var(--sub);vertical-align:top;margin-right:2px}
  .plan .price span:last-child{font-size:16px;color:var(--sub);font-family:inherit}
  .plan .peryr{color:var(--faint);font-size:12.5px;min-height:16px}
  .plan ul{list-style:none;}
  .plan li{padding:9px 0;border-bottom:1px solid var(--line);color:var(--text);font-size:14px;
    display:flex;gap:11px;align-items:flex-start;line-height:1.4}
  .plan li:last-child{border-bottom:none}
  .plan li::before{content:"✓";flex:none;width:19px;height:19px;border-radius:50%;margin-top:1px;
    display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;
    background:rgba(132,204,22,.16);color:var(--blue2);border:1px solid rgba(132,204,22,.3)}
  .plan li.no{color:var(--faint)}
  .plan li.no::before{content:"✕";background:none;color:var(--faint);border-color:var(--line)}
  .plan li b{font-weight:750;color:inherit}
  /* The green ring is a HOVER state, not a permanent one. Every card can earn it,
     so the row reads evenly at rest and the highlight follows the cursor rather
     than shouting at the middle column the whole time. */
  .plan{position:relative;transition:transform .25s var(--ease-out,ease),box-shadow .25s,border-color .25s,background .25s}
  .plan:hover{border-color:var(--accent-line)}
  .plan::before{content:"";position:absolute;inset:-1.5px;border-radius:inherit;padding:1.5px;z-index:-1;
    background:var(--accent-line);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;mask-composite:exclude;
    opacity:0;transition:opacity .25s var(--ease-out,ease)}
  .plan:hover::before{opacity:1}
  /* the featured card's CTA is lit at rest: one light source on the row, the
     brightest thing in its frame (the video's rule). Pro and Ultra are
     .btn.secondary in the markup and stay matte. The card itself earns a 1px
     lime ring and a short bloom only on hover. */
  .plan.hot .btn.primary{background:var(--sheen-fill);color:var(--accent-ink);border:1px solid transparent;
    box-shadow:var(--sheen-top),var(--accent-glow);
    transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-base) var(--ease-out),filter var(--dur-base) var(--ease-out)}
  .plan.hot:hover .btn.primary{background:var(--sheen-fill);color:var(--accent-ink);border-color:transparent;
    filter:brightness(1.05);box-shadow:var(--sheen-top),var(--accent-glow-strong)}
  .plan:hover{background:var(--surface-2);
    /* the green bloom is gone; lift comes from neutral elevation */
    box-shadow:0 18px 44px -22px rgba(0,0,0,.55)}
  /* the video's highlighted tile: a 1px lime ring plus one short bloom, on the
     one featured card, on hover only */
  .plan.hot:hover{box-shadow:var(--accent-glow-ring),0 18px 44px -22px rgba(0,0,0,.55)}
  /* the middle card keeps its badge and its mobile order, nothing more */
  .plan .who{color:var(--faint);font-size:12.5px;margin:2px 0 10px}
  .planstruth{text-align:center;color:var(--sub);font-size:14.5px;margin:0 0 26px}
  .planstruth b{color:var(--blue2)}

  .yield{font-size:13.5px;color:var(--sub);margin:14px 0 0;line-height:1.45}
  .yield b{color:var(--text);font-weight:750}
  .yield:empty{display:none}
  .percr{font-size:11.5px;margin:5px 0 0;min-height:17px;letter-spacing:.08em;font-weight:800}
  /* one endorsement per plan row: OUR PICK on Max is the recommendation. this line
     is arithmetic (the lowest cost per credit), so it reads as neutral supporting
     text rather than a second, differently shaped pink claim pointing at Ultra. */
  .percr.best{color:var(--text-3);font-weight:600;letter-spacing:.01em}
  /* the basis for the two numbers above, so nobody has to guess where they came from */
  .yieldnote{max-width:700px;margin:26px auto 0;text-align:center;color:var(--faint);font-size:12.5px;line-height:1.6}
  .yieldnote:empty{display:none}
  .reassure{max-width:640px;margin:28px auto 0;text-align:center;color:var(--sub);font-size:14px;line-height:1.6}
  .reassure b{color:var(--text)}
  /* faq */
  .faq{max-width:780px;margin:0 auto;display:flex;flex-direction:column;gap:10px}
  .faq details{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);padding:2px 20px;transition:.15s}
  .faq details[open]{border-color:var(--accent-line)}
  .faq summary{padding:17px 0;font-weight:600;cursor:pointer;list-style:none;font-size:15.5px;display:flex;justify-content:space-between;align-items:center;gap:12px}
  .faq summary::-webkit-details-marker{display:none}
  .faq summary::after{content:"+";color:var(--blue2);font-size:20px;font-weight:400;transition:.2s}
  .faq details[open] summary::after{transform:rotate(45deg)}
  .faq p{color:var(--sub);font-size:14.5px;line-height:1.65;padding:0 0 18px}
  .faq a{color:var(--blue2)}

  .cta-final{text-align:center}
  .cta-final h2{margin-bottom:14px}
  /* closing CTA: the copy on the left, the Made with Sula clip on the right */
  .cta-final .ctasplit{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:64px;text-align:left}
  .cta-final .ctatext h2{text-align:left}
  .cta-final .ctatext .sub{text-align:left;margin:0 0 30px}
  .ctavid{position:relative;width:300px;aspect-ratio:9/16;margin:0;border-radius:var(--r-xl);overflow:hidden;background:#000;
    box-shadow:0 30px 60px -30px rgba(0,0,0,.7)}
  :root[data-theme="light"] .ctavid{box-shadow:0 24px 50px -28px rgba(15,23,42,.35)}
  .ctavid video{width:100%;height:100%;object-fit:cover}
  .ctasound{position:absolute;right:12px;bottom:12px;width:40px;height:40px;border-radius:var(--r-full);
    border:1px solid rgba(255,255,255,.18);background:rgba(10,10,11,.62);color:#fff;cursor:pointer;
    display:inline-flex;align-items:center;justify-content:center;transition:background .15s;
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
  .ctasound:hover{background:rgba(10,10,11,.82)}
  .ctasound:focus-visible{outline:2px solid #fff;outline-offset:2px}
  .ctasound svg{width:18px;height:18px}
  .ctasound .son,.ctasound.on .soff{display:none}
  .ctasound.on .son{display:block}
  @media(max-width:760px){
    .cta-final .ctasplit{grid-template-columns:1fr;justify-items:center;gap:36px;text-align:center}
    .cta-final .ctatext h2,.cta-final .ctatext .sub{text-align:center}
    .cta-final .ctatext .sub{margin:0 auto 30px}
    .ctavid{width:min(260px,70vw)}}

  /* footer */
  .foot{border-top:1px solid var(--line);padding:34px 20px;background:var(--bg)}
  .foot .in{max-width:1120px;margin:0 auto;display:flex;align-items:center;gap:22px;flex-wrap:wrap;font-size:13.5px;color:var(--sub)}
  .foot .in .sp{flex:1}
  .foot a{display:inline-block;padding:5px 0;margin:-5px 0}
  .foot a:hover{color:var(--text)}

  /* scroll reveal */
  .reveal{opacity:0;transform:translateY(26px)}
  .in{opacity:1;transform:none;transition:opacity var(--dur-slow) var(--ease-out)}
  @media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}
    .mrow.a,.mrow.b,.hero::before{animation:none}
    .btn.primary::after{content:none}
    .btn.primary:hover,.btn.primary:active,.btn.white:hover,.btn.white:active,.plan.hot:hover .btn.primary{transform:none}
    .btn.primary.mall:hover,.btn.primary.mall:active{transform:translateX(-50%)}}

  /* trust strip under hero CTAs */
  .trust{display:flex;gap:26px;flex-wrap:wrap;justify-content:center;margin-top:26px;color:var(--sub);font-size:13.5px}
  .trust b{color:var(--text);font-weight:700}
  .trust .t{display:inline-flex;align-items:center;gap:8px}
  /* phone: the four points wrapped 1 / 2 / 1, leaving the last one centred on its
     own under a row that was not centred. one left-aligned column instead. */
  @media(max-width:640px){.trust{flex-direction:column;align-items:flex-start;gap:10px;text-align:left}}

  /* segment switcher — one page, four audiences */
  .segtabs{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:34px}
  .segtab{background:var(--card);border:1px solid var(--line);color:var(--sub);font-weight:600;font-size:13.5px;
    padding:11px 20px;border-radius:var(--r-full);cursor:pointer;transition:.16s;font-family:inherit}
  .segtab:hover{border-color:var(--line2);color:var(--text)}
  .segtab.on{background:var(--surface-2);border:1px solid var(--accent-line);color:var(--accent-text);color:var(--accent-text);border-color:transparent;box-shadow:var(--e-2)}
  .segpane{display:none;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
  .segpane.on{display:grid;grid-template-columns:1.05fr .95fr}
  .segtext{padding:44px 40px}
  .segtext .pain{color:var(--blue2);font-size:13px;font-weight:700;letter-spacing:.1em;margin-bottom:14px}
  .segtext h3{font-size:clamp(24px,3vw,34px);font-weight:700;line-height:1.1;letter-spacing:-.02em;}
  .segtext .sd{color:var(--sub);font-size:15.5px;line-height:1.6;margin:16px 0 22px}
  .segtext ul{list-style:none;display:flex;flex-direction:column;gap:12px;margin-bottom:26px}
  .segtext li{display:flex;gap:11px;color:var(--text);font-size:14.5px;line-height:1.45;align-items:flex-start}
  .segtext li::before{content:"→";color:var(--blue2);font-weight:700;flex:none}
  .segart{background:var(--bg2);position:relative;overflow:hidden;min-height:340px}
  .segart img,.segart video{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;
    object-position:center 18%}
  @media(max-width:720px){
    .segpane.on{grid-template-columns:1fr}
    .segart{min-height:230px;order:-1}
    .segtext{padding:32px 24px}}

  /* cost comparison — the real conversion lever */
  .vsfoot{margin-top:24px;margin-left:auto;margin-right:auto;}

  /* phone layout. these rules were sitting outside the media query, so the
     mobile-only ones were applying on desktop too, which is what put the
     featured plan in the left column. */
  @media(max-width:720px){
    .section{padding:80px 18px}
    .plan.hot{order:-1}}

  /* section rhythm: variation IS the pacing. a sequence should feel fast, the
     argument section should get room to breathe. */
  #features{padding-block:var(--s10)}
  #how{padding-block:var(--s9)}   /* was --s7: a third step, 112px off its neighbours */
  #cost{padding-block:var(--s10)}
  #pricing{padding-block:var(--s10)}
  #faq{padding-block:var(--s9)}
  .hero{padding-bottom:var(--s10)}

  /* the cost section is a TABLE, not a fourth three-card grid. every figure is
     exact and checkable, which is a different and stronger argument than a
     comparison against numbers we would have had to invent. */
  .credtable{max-width:720px;margin:var(--s7) auto 0;border:1px solid var(--line-1);
    border-radius:var(--r-lg);overflow:hidden;background:var(--surface-1)}
  .credrow{display:grid;grid-template-columns:1fr 110px 130px;align-items:center;
    padding:14px var(--s5);font-size:var(--t-body);color:var(--text-1);
    border-top:1px solid var(--line-1)}
  .credrow:first-child{border-top:none}
  .credrow .c{text-align:right;font-variant-numeric:tabular-nums;color:var(--text-2)}
  .credrow:last-child .c:last-child,.credrow .c:last-child{color:var(--accent-text);font-weight:600}
  .credhead{background:var(--surface-2);font-size:var(--t-xs);font-weight:600;
    letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
  .credhead .c{color:var(--text-3);font-weight:600}
  .credsum{max-width:720px;margin:var(--s5) auto 0}
  .credsumin{background:var(--surface-1);border:1px solid var(--accent-line);
    border-radius:var(--r-lg);padding:var(--s5)}
  .credsum .ct{font-family:var(--font-display);font-size:var(--t-h3);font-weight:600;
    letter-spacing:-.012em;color:var(--text-1)}
  .credsum .cb{margin-top:var(--s2);color:var(--text-2);font-size:var(--t-sm);line-height:1.6;
    max-width:var(--m-prose)}
  .credsum .cb b{color:var(--text-1);font-weight:600}
  .vsfoot{text-align:center;color:var(--text-3);font-size:var(--t-sm);margin:var(--s5) auto 0;
    max-width:var(--m-prose);line-height:1.6}
  @media(max-width:700px){
    .credrow{grid-template-columns:1fr 64px 84px;padding:12px var(--s4);font-size:var(--t-sm)}
  }

  /* ONE accent, and treatment tells the roles apart instead of a second hue.
     A hot pink next to lime read as two brands arguing, so the deal moments
     now sit in the lime family: the badge is a solid fill, the discount flag
     is the same fill at a smaller size, and the ticks step down to the light
     accent so they support the line rather than compete with it.
     Text on any accent FILL uses --accent-ink, never white: white on lime is
     about 2.2:1 and fails AA. That is a legal exposure, not a taste call. */
  .badge{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:700;
    color:var(--pop-ink);background:var(--pop-grad);
    border-radius:var(--r-full);padding:8px 16px;
    box-shadow:var(--e-pop)}
  .badge .dot{width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.6}
  .navoff{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.03em;line-height:1;
    background:var(--pop-grad);color:var(--pop-ink);
    border-radius:var(--r-full);padding:4px 8px;margin-left:7px;vertical-align:middle}
  /* the accent words are lit: a tight halo and a wide soft one, both lime, on
     the glyphs only (two layers at low alpha, not one 44px cloud). The hero
     cloud behind the section stays gone. */
  .hero h1 .g{color:#bef264;text-shadow:var(--accent-halo)}
  .trust .tick{color:var(--accent-text);font-weight:700}

  /* a dark glass band with lime text and a 1px lime line, not a solid lime
     slab: the nav's Start free 30px below is the only lit lime object at the
     top of the page (the video's rule: the button is the brightest thing) */
  .ticker{position:fixed;top:0;left:0;right:0;height:42px;z-index:70;display:flex;align-items:center;gap:12px;
    padding:0 14px;background:var(--surface-1,#141517);color:var(--accent-text);border-bottom:1px solid var(--accent-line)}
  html.tkoff .ticker{display:none}
  html:not(.tkoff) body{padding-top:42px}
  html:not(.tkoff) .nav{top:56px}
  .tkmsg{flex:1;min-width:0;font-size:13.5px;font-weight:700;white-space:nowrap;overflow:hidden;
    text-overflow:ellipsis;color:inherit}
  .tkbtn{border-radius:var(--r-md);padding:7px 14px;font-size:12.5px;
    font-weight:700;white-space:nowrap;transition:.15s}
  .tkbtn:hover{}
  .tkx{background:none;border:0;cursor:pointer;color:inherit;font-size:17px;line-height:1;
    padding:4px 7px;opacity:.65;font-family:inherit}
  .tkx:hover{opacity:1}
  @media(max-width:640px){.tkbtn{display:none}}
  section[id]{scroll-margin-top:120px}

  /* ===== hero: faint blueprint grid behind the glow ===== */
  .hero::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
    background:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px) 0 0/100% 54px,
               linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px) 0 0/54px 100%;
    -webkit-mask-image:radial-gradient(75% 60% at 50% 22%,#000 18%,transparent 74%);
    mask-image:radial-gradient(75% 60% at 50% 22%,#000 18%,transparent 74%)}

  /* ===== section headings step up to the hero's voice ===== */
  h2{text-transform:uppercase;font-size:clamp(30px,5vw,54px);letter-spacing:-.022em;line-height:1.02}

  /* ===== the slab: one dark room for the whole-studio pitch ===== */
  .slab{position:relative;border-radius:36px;padding:112px 40px 122px;overflow:hidden;isolation:isolate;
    background:#101113;
    /* Was a 2px accent ring plus three stacked green blooms (26px, 110px and a
       90px inset). It read as a neon sign. The room still separates from the
       page, but now by a hairline edge and neutral depth, not by glow. */
    box-shadow:0 0 0 1px rgba(255,255,255,.08),0 30px 80px -40px rgba(0,0,0,.75)}
  .slab::before{content:"";position:absolute;left:-22%;right:-22%;bottom:-14%;height:72%;z-index:-1;
    background:linear-gradient(transparent calc(100% - 1.5px),rgba(255,255,255,.22) 0) 0 0/62px 62px,
               linear-gradient(90deg,transparent calc(100% - 1.5px),rgba(255,255,255,.22) 0) 0 0/62px 62px;
    transform:perspective(720px) rotateX(58deg);transform-origin:50% 100%;opacity:.4;pointer-events:none;
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 55%);
    mask-image:linear-gradient(180deg,transparent 0,#000 55%)}
  .slab::after{content:none}
  .slab .sin{position:relative;z-index:1;text-align:center;max-width:680px;margin:0 auto}
  .slabchip{display:inline-flex;align-items:center;gap:8px;background:rgba(10,14,3,.6);
    border:1px solid rgba(163,230,53,.5);color:#d9f99d;border-radius:var(--r-full);
    padding:7px 15px;font-size:11.5px;font-weight:800;letter-spacing:.14em}
  .slab h2{margin-top:22px;font-size:clamp(40px,7vw,78px);line-height:.98;color:var(--text)}
  .slab h2 .g{color:#d9f99d;text-shadow:0 0 16px rgba(217,249,157,.18),0 0 52px rgba(179,251,55,.20)}
  .slab .ssub{color:#b9caa0;font-size:clamp(14.5px,1.8vw,17.5px);max-width:480px;margin:18px auto 30px;line-height:1.55}
  /* the white CTA is the slab's light source: same sheen, edge, bloom, lift
     and press as every primary, in neutral white so the slab keeps one hue.
     No sweep: white light on a white surface is invisible. */
  .btn.white{color:#0c0d0e;background:linear-gradient(180deg,#ffffff 0%,#f6f6f6 60%,#ececec 100%);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 0 0 1px rgba(255,255,255,.14),0 0 24px -4px rgba(255,255,255,.28),0 12px 28px -12px rgba(0,0,0,.6);
    transition:transform var(--dur-fast) var(--ease-out),box-shadow var(--dur-base) var(--ease-out)}
  .btn.white:hover{filter:none;transform:translateY(-1px);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 0 0 1px rgba(255,255,255,.22),0 0 34px -4px rgba(255,255,255,.42),0 16px 32px -12px rgba(0,0,0,.6)}
  .btn.white:active{transform:translateY(1px) scale(.985)}
  @media(prefers-reduced-motion:reduce){.btn.white:hover,.btn.white:active{transform:none}}
  .btn.white:focus-visible{outline:2px solid #fff;outline-offset:3px}
  /* floating product-ui cards, desktop only */
  .fc{position:absolute;z-index:2;background:rgba(8,12,2,.66);border:1px solid rgba(163,230,53,.38);
    border-radius:var(--r-xl);padding:13px;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    box-shadow:0 24px 60px rgba(0,0,0,.55);text-align:left}
  .fc .fh{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;color:#e6f3cf;margin-bottom:10px}
  .fc .fh .dot{width:7px;height:7px;border-radius:50%;background:#a3e635;flex:none}
  .fc.ugc{left:4.5%;top:24%;width:214px}
  .fc.ugc .ppl{display:flex;gap:6px}
  .fc.ugc .ppl img{width:62px;height:80px;object-fit:cover;border-radius:var(--r-md);border:1px solid rgba(255,255,255,.14)}
  .fc .fpill{display:inline-block;background:rgba(163,230,53,.15);border:1px solid rgba(163,230,53,.4);
    color:#d9f99d;border-radius:var(--r-full);padding:4px 12px;font-size:11px;font-weight:700;margin-top:10px}
  .fc.clip{right:4.5%;bottom:15%;width:226px}
  .fc.clip .row{display:flex;align-items:center;gap:8px;font-size:11.5px;color:#b9caa0;margin-top:7px}
  .fc.clip .row .nm{flex:none;width:64px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .fc.clip .bar{flex:1;height:5px;border-radius:var(--r-full);background:rgba(255,255,255,.12);overflow:hidden}
  .fc.clip .bar i{display:block;height:100%;border-radius:var(--r-full);background:#84cc16}
  .fc.rq{right:7.5%;top:14%;width:196px}
  .fc.rq .row{display:flex;justify-content:space-between;gap:8px;font-size:11.5px;color:#b9caa0;
    padding:6px 0;border-bottom:1px solid rgba(255,255,255,.08)}
  .fc.rq .row:last-child{border-bottom:none}
  .fc.rq .ok{color:#a3e635;font-weight:700}
  .fchip{position:absolute;z-index:3;display:flex;align-items:center;gap:7px;background:#fff;color:#0c0d0e;
    border-radius:var(--r-lg);padding:9px 15px;font-size:13px;font-weight:700;box-shadow:0 14px 34px rgba(0,0,0,.4)}
  .fchip svg{flex:none}
  .fchip.a{left:15%;bottom:23%}
  /* hangs off the render-queue card's corner, so it can never drift into the
     headline at any viewport width */
  .fc .fchip{bottom:-19px;left:16px}
  /* the slab is capped at 1120px, so geometry is identical at every viewport
     above ~1170px. below that it compresses and the cards would drift into
     the headline, so that is where the floating layer goes away. */
  @media(max-width:1169px){.fc,.fchip{display:none}}
  @media(max-width:960px){.slab{padding:78px 22px 86px}}

  /* ===== media wall =====
     A uniform grid, not masonry. The showcase layouts this follows work
     because every tile is IDENTICAL: nothing about the frame varies, so the
     only thing left to look at is the clip. `columns:` was the opposite bet --
     unequal widths and a ragged bottom edge, which reads as a Pinterest board
     rather than a reel of output. Tight gap, small radius, no border: the
     frame gets out of the way. */
  .showhead{margin-bottom:26px}
  .showhead h2{text-align:left;color:var(--blue2);text-transform:uppercase;
    font-size:clamp(26px,3.4vw,40px);letter-spacing:-.005em;line-height:1}
  .showhead .sub{text-align:left;margin:10px 0 0;max-width:58ch;font-size:15px}

  /* the middle row runs the other way. Opposing directions read as a wall of
     independent output; three rows all sliding the same way reads as one
     object being dragged. Same two-half loop, just wound the other way. */
  @keyframes wallR{from{transform:translateX(-50%)}to{transform:none}}
  @keyframes wallL{from{transform:none}to{transform:translateX(-50%)}}
  /* mascot marquee: two identical halves, so -50% loops seamlessly */
  .mstrip{overflow:hidden;margin-top:36px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
  .mrow{display:flex;width:max-content;animation:mscroll 70s linear infinite}
  .mstrip:hover .mrow{animation-play-state:paused}
  .mq{position:relative;width:216px;aspect-ratio:4/5;border-radius:var(--r-md);overflow:hidden;flex:none;
    margin-right:12px;background:var(--bg2)}
  /* the fade used to be 190px, which ate the bottom third of every tile and
     all of the labels: the looks read as cropped rather than as a set. The
     CTA still needs somewhere dark to sit, so instead of fading over the
     tiles the strip now reserves its own space below them, and the fade only
     kisses the last few pixels so the bottom edge is soft rather than cut.
     pointer-events off so the fade never eats a click meant for a tile. */
  .mwrap{position:relative;padding-bottom:88px}
  .mwrap::after{content:"";position:absolute;left:0;right:0;bottom:0;height:96px;
    background:linear-gradient(180deg,transparent,var(--bg2) 62%,var(--bg2));
    pointer-events:none;z-index:1}
  .mall{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:2}
  .mq img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s}
  .mq:hover img{transform:scale(1.05)}
  .mq .lab{position:absolute;left:0;right:0;bottom:0;padding:26px 10px 8px;
    font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
    color:#eaf0ff;background:linear-gradient(transparent,rgba(0,0,0,.7))}
  @media(max-width:640px){.mq{width:150px;margin-right:10px}
    .mq .lab{font-size:11px;padding:20px 8px 7px}}
  @media(prefers-reduced-motion:reduce){.mrow{animation:none}}
  @keyframes mscroll{to{transform:translateX(-50%)}}

  /* ===== bento quick links ===== */
  .bento{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
  @media(max-width:900px){.bento{grid-template-columns:1fr 1fr}}
  @media(max-width:520px){.bento{grid-template-columns:1fr}}
  .bcard{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);
    border-radius:var(--r-lg);padding:22px;transition:.2s;min-height:168px}
  .bcard:hover{border-color:var(--accent-line)}
  /* Six cards each wore an identical lime-washed tile with a lime border. Six
     copies of one colour is decoration, not information: the tile said the
     same thing six times. The glyph stays and carries the accent itself. */
  .bcard .ic{width:36px;height:36px;display:grid;place-items:center;
    color:#d9f99d}
  .bcard .ic svg{width:17px;height:17px}
  .bcard .tx{margin-top:auto;padding-top:26px}
  .bcard h3{font-size:16.5px;font-weight:700;display:flex;align-items:center;gap:8px}
  .bcard h3 .new{font-size:11px;letter-spacing:.06em;background:var(--accent-grad);color:var(--accent-ink);
    padding:3px 7px;border-radius:var(--r-full)}
  .bcard p{color:var(--sub);font-size:13.5px;line-height:1.5;margin-top:6px}

  /* the hero demo: the product proving itself above the fold, rather than a
     paragraph claiming it. Ungated on purpose, rate limited on the server. */

  .lead{color:var(--sub);font-size:clamp(16px,1.8vw,19px);line-height:1.5;
    max-width:44ch;margin:26px auto 0;text-wrap:balance}

/* Pricing sits in its own chip with the discount hanging under it, so the offer
   reads as attached to Pricing rather than as one more nav word. The badge is
   absolutely positioned: it must not add height to a fixed-height nav pill. */
.pricelink{position:relative;display:inline-flex;align-items:center;padding:0;overflow:visible}
.pricelink .pricechip{display:inline-flex;align-items:center;gap:8px;
  background:transparent;border:1px solid transparent;border-radius:var(--r-md);
  padding:9px 15px;color:var(--text);font-weight:650;font-size:14.5px;
  transition:background .15s,border-color .15s}
.pricelink:hover .pricechip{background:var(--surface-2)}
/* nav actions are boxes, not pills, so they sit in the same family as the chip */
.nav .btn{border-radius:var(--r-md)}
.pricelink .navoff{position:absolute;top:calc(100% - 6px);left:50%;transform:translateX(-50%);
  margin:0;white-space:nowrap}
.diaico{width:19px;height:16px;flex:none;color:var(--text);opacity:1}

/* ---- nav boxes: one height, set once ---------------------------------------
   The chip and the two buttons had matching padding but different font sizes,
   so their line boxes differed and the chip came out 41.8px against 40.3px --
   1.5px taller and sitting a pixel high. Padding maths cannot hold three
   elements level when the type inside them differs, so the height is explicit
   and the content is centred into it. Change --navbox-h and all three move. */
.nav{--navbox-h:40px}
.nav .pricechip,
.nav .btn{height:var(--navbox-h);padding-top:0;padding-bottom:0;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:13.5px;font-weight:700;line-height:1;box-sizing:border-box}
.nav .pricechip{padding-left:15px;padding-right:15px;justify-content:flex-start}

/* ---- nav actions: same size, spaced apart ----------------------------------
   Equal 120x40 boxes with a real gap between them, each fully rounded. The
   wrapper stays so the gap here is independent of the nav's own 6px between
   the left-hand links. */
.nav .navactions{display:inline-flex;align-items:stretch;gap:8px}
.nav .navactions .pricechip,
.nav .navactions .btn{min-width:120px;border-radius:var(--r-md)}
.nav .link.pricelink{padding:0}
.nav .navactions .pricelink{overflow:visible}

/* Log in is the quiet option of the three, so it sizes to its own label instead
   of being padded out to match. Height stays on --navbox-h, so it still lines
   up with the other two. */
.nav .navactions .btn.glass{min-width:0;padding-left:20px;padding-right:20px}

/* The chip was padded out to a 120px min-width to match the other two, which
   left dead space either side of "Pricing". It hugs its content now, same as
   Log in; the shared height is what keeps the row aligned, not equal widths. */
.nav .navactions .pricechip{min-width:0;padding-left:14px;padding-right:14px}
.nav .navactions .btn.primary{min-width:0;padding-left:20px;padding-right:20px}

/* ---- announcement bar, matched to the reference ----------------------------
   Content centred rather than the message stretching to fill, the DEAL chip
   replaced by the same gem that marks Pricing in the nav, and a white button
   so the CTA reads against the lime instead of disappearing into it. */
.ticker{justify-content:center}
.ticker .tkmsg{flex:0 1 auto}
.tkico{width:17px;height:14px;flex:none;color:inherit}
.tkbtn{background:#fff;color:#16210a;box-shadow:none}
.tkbtn:hover{background:#f4f5f7;}
.ticker .tkx{margin-left:auto;position:absolute;right:12px}
@media(max-width:640px){.tkico{display:none}}

/* ---- explore: promo panel beside the bento ---------------------------------
   Two columns on desktop, stacked below 900px. The bento keeps its own grid so
   the six cards stay 3x2 next to the panel and collapse to 2x3 on their own. */
.explgrid{display:grid;grid-template-columns:0.9fr 1.1fr;gap:14px;align-items:stretch}
.explgrid .bento{grid-template-columns:repeat(3,1fr)}
@media(max-width:1000px){.explgrid{grid-template-columns:1fr}
  .explgrid .bento{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.explgrid .bento{grid-template-columns:1fr 1fr}}
@media(max-width:460px){.explgrid .bento{grid-template-columns:1fr}}

.explpromo{position:relative;display:block;border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--line);min-height:340px;isolation:isolate}
.explpromo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .5s var(--ease-out,ease)}
.explpromo:hover img{transform:scale(1.04)}
/* the panel carries text over a photograph, so it needs its own scrim rather
   than relying on the image happening to be dark in the right places */
.explpromo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(105deg,rgba(8,9,12,.92) 0%,rgba(8,9,12,.78) 46%,rgba(8,9,12,.35) 100%)}
.ep-in{position:relative;z-index:1;display:flex;flex-direction:column;height:100%;
  padding:26px;gap:16px}
.ep-h{font-family:var(--font-display);font-size:clamp(24px,2.5vw,31px);font-weight:700;
  letter-spacing:-.02em;line-height:1.08}
.ep-h b{color:var(--accent-text);font-weight:700}
.ep-l{display:flex;flex-direction:column;gap:9px;font-size:13.5px;color:var(--text-2)}
.ep-l span{display:flex;align-items:flex-start;gap:9px}
.ep-l span::before{content:"\2713";color:var(--accent-fill);font-weight:700;flex:none;line-height:1.4}
.ep-cta{margin-top:auto;align-self:flex-start}

/* ---- pricing: one language across both tabs --------------------------------
   The individual cards now carry the seat cards' structure -- uppercase name,
   credits in a bordered box at the top, CTA above a labelled feature list --
   so flipping between Individual and Business stops looking like two products.
   The .plan hover ring and level-at-rest behaviour are untouched. */
.plan .name{font-family:var(--font-display);font-size:21px;font-weight:700;
  letter-spacing:-.02em;text-transform:uppercase;color:var(--text-1)}
.plan .who{min-height:34px}
.plan .scpool{margin:14px 0 16px}
.plan .scpoolsub{margin-top:4px}
.plan .scpoolsub b{color:var(--text-1);font-weight:750}
.plan .price{margin:0 0 2px}
.plan .btn.block{width:100%;text-align:center;margin:14px 0 18px}
.plan .scgrp{margin-bottom:2px}
.plan ul{margin:0}
/* the badge sat under the yield line; in the new order it belongs with money */
.plan .percr{margin-top:6px}

/* the slider now lives in the credits box, so its own margins would double up
   with the box padding */
.plan .scpool .utier{margin:12px 0 2px}

/* The marquee loop translates by exactly -50%, so a row's width must divide
   cleanly into two halves. `gap` puts an EXTRA gap between the two halves, so
   half-the-row was 7px wider than one copy and the loop drifted a little every
   cycle. Spacing moves onto the tile itself, same fix as the output wall.
   (.mrow is shared with the mascot strip, whose .mq already carries its own
   margin-right and was silently getting gap on top of it.) */
.mrow{gap:0}
.marquee .tile{margin-right:14px}

/* ---- offer card -------------------------------------------------------------
   Wide dark panel with a crimson wash. Every claim on it is already true
   elsewhere on the site: the 20% is pricing.json's yearly_discount (rendered,
   not typed), the three models are live in the catalogue, and the free tier
   matches the hero. Deliberately does NOT say "unlimited" -- Sula is credit
   based, so nothing here is. */
.offercard{position:relative;display:block;overflow:hidden;border-radius:var(--r-2xl);
  padding:30px 34px 32px;border:1px solid var(--pop-line);
  background:radial-gradient(120% 140% at 0% 0%,rgba(255,45,120,.20),transparent 58%),
             linear-gradient(180deg,#1a0d15,#120a10);
  transition:border-color .2s,transform .2s}
.offercard:hover{border-color:var(--pop);}
.oc-chip{display:inline-flex;align-items:center;gap:7px;background:var(--pop-grad);color:var(--pop-ink);
  font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  padding:5px 11px;border-radius:var(--r-full)}
.oc-chip svg{width:13px;height:13px}
.oc-h1{display:block;margin-top:18px;font-family:var(--font-display);color:var(--pop);
  font-size:clamp(24px,3.5vw,42px);font-weight:700;line-height:1.02;letter-spacing:-.02em;
  text-transform:uppercase}
.oc-h2{display:block;font-family:var(--font-display);color:var(--text-1);
  font-size:clamp(21px,3vw,36px);font-weight:700;line-height:1.05;letter-spacing:-.02em;
  text-transform:uppercase;margin-top:2px}
.oc-sub{display:block;margin-top:14px;max-width:62ch;color:var(--text-2);font-size:14.5px;line-height:1.6}
.oc-cta{display:inline-flex;align-items:center;justify-content:center;margin-top:22px;
  background:#fff;color:#16210a;font-weight:700;font-size:14.5px;
  padding:12px 24px;border-radius:var(--r-md);box-shadow:0 2px 10px rgba(0,0,0,.35)}
.offercard:hover .oc-cta{background:#f4f5f7}
.oc-after{text-align:center;margin-top:20px;font-size:14px}
.oc-after a{color:var(--sub)}
.oc-after a:hover{color:var(--text)}
@media(max-width:640px){.offercard{padding:24px 20px 26px}}

/* on the pricing page the card sits above the plans, so it gets breathing room
   below it and the text stays left while the plan header above is centred */
#pricing .offercard{margin:30px 0 0;text-align:left}

/* `.hide` was only ever defined in app.html's inline sheet. pricing.html marks
   #paneBiz with it and loads THIS sheet, so the class did nothing and the
   Business pane rendered underneath the Individual one -- both plan sets, the
   teams note and the seat cards, all on screen at once, with the tabs appearing
   to do nothing. */
.hide{display:none !important}

/* ---- light theme: the places above that hard-code a dark surface -------- */
:root[data-theme="light"] .nav{background:rgba(255,255,255,.78)}
:root[data-theme="light"] .nav .link:hover{background:rgba(15,23,42,.05)}
:root[data-theme="light"] .btn.glass{background:transparent;color:var(--sub)}
:root[data-theme="light"] .btn.glass:hover{background:transparent;color:var(--text);
  text-decoration:underline}
:root[data-theme="light"] .btn.white{border-color:transparent}
:root[data-theme="light"] .ticker{background:#ecfccb;color:#3f6212;border-bottom:1px solid var(--accent-line)}
:root[data-theme="light"] .tkx{opacity:.85}
:root[data-theme="light"] .tkbtn{box-shadow:inset 0 0 0 1px var(--accent-line),var(--accent-glow-soft)}
/* the light accent-text token: 6.78:1 on the page and 5.4:1 at the halo's
   full alpha, so the soft halo never pulls the words under 4.5:1 */
:root[data-theme="light"] .hero h1 .g{color:#3f6212;text-shadow:var(--accent-halo)}
/* no backdrop cloud in either theme */
:root[data-theme="light"] .hero::before{background:none}

/* the blueprint grid was white at 5%: invisible on a light page, so draw it in ink at the same weight */
:root[data-theme="light"] .hero::after{
  background:linear-gradient(rgba(15,23,42,.08) 1px,transparent 1px) 0 0/100% 54px,
             linear-gradient(90deg,rgba(15,23,42,.08) 1px,transparent 1px) 0 0/54px 100%}
/* yearly offer card: dark gradient was hard-coded, so in light its text flipped to ink on near-black */
:root[data-theme="light"] .offercard{background:radial-gradient(120% 140% at 0% 0%,rgba(255,45,120,.16),transparent 58%),linear-gradient(180deg,#fff4f8,#ffffff)}
:root[data-theme="light"] .oc-h1{color:#c9145c}
:root[data-theme="light"] .oc-cta{background:#0f172a;color:#fff}
:root[data-theme="light"] .offercard:hover .oc-cta{background:#1e293b}
/* the SULA STUDIO slab and the Explore promo card are dark islands in both themes:
   they keep light text, so their tokens are pinned here instead of following the page */
:root[data-theme="light"] .slab{--text:#f4f5f7;--sub:#b9caa0;--faint:#b9caa0;--text-1:#f4f5f7;--text-2:#cbd5e1;--text-3:#b9caa0;--accent-text:#d9f99d}
:root[data-theme="light"] .slab .eyebrow{color:#d9f99d}
/* light theme: the promo card goes white instead of staying a dark island, so the photo fades into the page */
:root[data-theme="light"] .explpromo{--text-1:#0f172a;--text-2:#334155;--text-3:#475569;--accent-text:#5b9a09;--text:#0f172a;--sub:#334155;color:#0f172a;border-color:var(--line2)}
/* light: a different photo, one shot on a bright set, so the card is white without hazing a dark image */
.explpromo .lightpic{display:none}
:root[data-theme="light"] .explpromo .darkpic{display:none}
:root[data-theme="light"] .explpromo .lightpic{display:block;object-position:62% 50%}
:root[data-theme="light"] .explpromo::after{background:linear-gradient(100deg,rgba(255,255,255,.92) 0%,rgba(255,255,255,.72) 42%,rgba(255,255,255,.05) 78%)}
:root[data-theme="light"] .explpromo .ep-h b{color:#5b9a09}
/* light theme: every green that sits on a light surface uses the hero green, so it reads */
:root[data-theme="light"] .bcard .ic{color:#4d7c0f}
:root[data-theme="light"] .bcard .ic svg,:root[data-theme="light"] .bcard .ic svg *{stroke:#5b9a09}
:root[data-theme="light"] .bcard .ic svg [fill]:not([fill="none"]),:root[data-theme="light"] .bcard .ic svg polygon{fill:#5b9a09}
/* the hero green is fine behind icons, but at 12.5px it only made 3.3:1 on the light
   section grounds. eyebrows use the same darker light-mode accent as the rest of the
   site's small green text (#3f6212), which clears 4.5:1. */
:root[data-theme="light"] .eyebrow{color:#3f6212}
:root[data-theme="light"] .ep-l span::before{color:#5b9a09}

/* the logo is a mark, not a link */
  .logo{cursor:default;user-select:none}