/* MasterKey IT — site v2
   Calmer, simpler, warmer. Fewer words per page, more space, and motion
   used to help someone read rather than to decorate.

   Motion rules that hold everywhere:
   - transform and opacity only, so nothing ever reflows
   - every reveal is scoped to .js, so no-JS shows everything immediately
   - prefers-reduced-motion turns all of it off, not down
*/

:root{
  --bg:#050913;--panel:#0b1425;--panel2:#0e1a2e;--panel3:#111e35;
  --text:#f0f4ff;--muted:#93a6c2;--dim:rgba(240,244,255,.78);
  --line:rgba(0,194,255,.16);--line2:rgba(0,194,255,.32);
  --cyan:#00c2ff;--green:#4fffb4;--amber:#ffcb47;--ink:#03101c;
  --fh:Syne,"Trebuchet MS",sans-serif;
  --fb:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --max:1120px;--r:10px;--r-s:7px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:92px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--fb);
  line-height:1.7;font-size:16px;overflow-x:hidden;
  -webkit-font-smoothing:antialiased}
a{color:inherit}
img{display:block;max-width:100%}
h1,h2,h3,h4{font-family:var(--fh);letter-spacing:-.01em;margin:0;line-height:1.14}
p{margin:0}
button{font:inherit;color:inherit}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:5px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.wrap{width:min(var(--max),calc(100% - 44px));margin:auto}
.narrow{max-width:720px}
.skip{position:fixed;top:-80px;left:16px;z-index:40;background:var(--cyan);
  color:var(--ink);padding:11px 18px;text-decoration:none;font-weight:700;
  border-radius:var(--r-s);transition:top .25s var(--ease)}
.skip:focus{top:14px}

/* ── Motion: reveal on scroll ──────────────────────────────────────
   Elements start slightly low and transparent, then settle. Because
   only transform and opacity move, layout is identical throughout, so
   nothing jumps and no scrollbar appears mid-animation. */
.js [data-rise]{opacity:0;transform:translate3d(0,18px,0);
  transition:opacity .62s var(--ease),transform .62s var(--ease)}
.js [data-rise].in{opacity:1;transform:none}
.js [data-rise][data-d="1"]{transition-delay:.07s}
.js [data-rise][data-d="2"]{transition-delay:.14s}
.js [data-rise][data-d="3"]{transition-delay:.21s}
.js [data-rise][data-d="4"]{transition-delay:.28s}
.js [data-rise][data-d="5"]{transition-delay:.35s}

/* ── Header ── */
.head{position:sticky;top:0;z-index:30;background:rgba(5,9,19,.72);
  backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid transparent;transition:border-color .3s var(--ease-soft),
  background .3s var(--ease-soft)}
.head.stuck{background:rgba(5,9,19,.94);border-bottom-color:var(--line)}
.nav{min-height:74px;display:flex;align-items:center;justify-content:space-between;gap:22px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;
  font-family:var(--fh);font-weight:800;white-space:nowrap;font-size:17px}
.brand img{width:36px;height:36px;border-radius:9px;border:1px solid var(--line)}
.brand b{color:var(--cyan)}
.nav-links{display:flex;gap:26px;align-items:center;font-size:14.5px}
.nav-links a{text-decoration:none;color:var(--muted);position:relative;
  transition:color .22s var(--ease-soft)}
.nav-links a:hover{color:var(--text)}
.nav-links a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:-6px;
  height:1px;background:var(--cyan);transform:scaleX(0);transform-origin:left;
  transition:transform .28s var(--ease)}
.nav-links a:not(.btn):hover::after,
.nav-links a[aria-current="page"]::after{transform:scaleX(1)}
.nav-links a[aria-current="page"]{color:var(--text)}

/* ── Buttons ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:50px;padding:0 24px;border-radius:var(--r-s);text-decoration:none;
  font-weight:700;font-size:15px;border:1px solid var(--line);background:transparent;
  color:var(--text);cursor:pointer;position:relative;overflow:hidden;
  transition:transform .2s var(--ease),border-color .22s var(--ease-soft),
    background .22s var(--ease-soft)}
.btn:hover{border-color:var(--line2);background:rgba(0,194,255,.08);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn.primary{background:var(--cyan);color:var(--ink);border-color:var(--cyan);font-weight:800}
.btn.primary:hover{background:var(--cyan);filter:brightness(1.1);
  box-shadow:0 6px 22px -8px rgba(0,194,255,.7)}
.btn.lg{min-height:56px;padding:0 30px;font-size:16px}
.btn.sm{min-height:42px;padding:0 17px;font-size:14px}
.btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;
  transition:transform .28s var(--ease)}
.btn:hover svg{transform:translateX(3px)}

/* ── Type ── */
.eyebrow{display:inline-flex;align-items:center;gap:9px;color:var(--cyan);
  font-size:12.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  margin-bottom:20px}
.eyebrow::before{content:"";width:22px;height:1px;background:var(--cyan);opacity:.6}
h1{font-size:clamp(38px,5.4vw,66px);margin-bottom:24px;letter-spacing:-.025em}
h1 em{font-style:normal;color:var(--cyan)}
h2{font-size:clamp(30px,3.9vw,46px);margin-bottom:18px;letter-spacing:-.02em}
h3{font-size:21px;letter-spacing:-.01em}
.lead{font-size:19px;color:var(--muted);max-width:60ch;margin-bottom:32px;line-height:1.65}
.sub{color:var(--muted);font-size:17px;max-width:62ch}
.k{display:block;font:800 11px var(--fh);letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);margin-bottom:10px}

/* ── Sections ── */
.band{padding:104px 0;position:relative}
.band.alt{background:linear-gradient(180deg,rgba(11,20,37,0) 0%,rgba(11,20,37,.55) 12%,
  rgba(11,20,37,.55) 88%,rgba(11,20,37,0) 100%)}
.band.tight{padding:76px 0}
.head-block{max-width:680px;margin-bottom:48px}
.head-block.centre{margin-left:auto;margin-right:auto;text-align:center}

/* ── Hero ── */
.hero{padding:112px 0 96px;position:relative;overflow:hidden}
.hero-in{max-width:860px}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:30px}
.reassure{display:flex;flex-wrap:wrap;gap:10px 26px;color:var(--muted);font-size:14.5px}
.reassure span{display:inline-flex;align-items:center;gap:9px}
.reassure svg{width:15px;height:15px;stroke:var(--green);fill:none;stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}

/* ── Start-here chooser ─────────────────────────────────────────────
   For someone who does not know where to begin. Three plain sentences,
   one answer each, no form and no commitment. */
.start{display:grid;grid-template-columns:1fr 1.05fr;gap:40px;align-items:start}
.start>*{min-width:0}
.start-opts{display:grid;gap:12px}
.start-opt{display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  border:1px solid var(--line);background:var(--panel);border-radius:var(--r);
  padding:20px 22px;cursor:pointer;font-size:16.5px;font-weight:600;color:var(--dim);
  transition:border-color .26s var(--ease-soft),background .26s var(--ease-soft),
    transform .26s var(--ease),color .26s var(--ease-soft)}
.start-opt:hover{border-color:var(--line2);background:var(--panel2);
  transform:translateX(3px);color:var(--text)}
.start-opt[aria-pressed="true"]{border-color:var(--cyan);background:rgba(0,194,255,.09);
  color:var(--text)}
.start-dot{width:11px;height:11px;border-radius:50%;flex-shrink:0;
  border:2px solid var(--line2);transition:background .26s var(--ease-soft),
  border-color .26s var(--ease-soft),box-shadow .26s var(--ease-soft)}
.start-opt[aria-pressed="true"] .start-dot{background:var(--cyan);border-color:var(--cyan);
  box-shadow:0 0 0 4px rgba(0,194,255,.16)}
.start-stack{display:grid}
.start-ans{grid-area:1/1;border:1px solid var(--line2);background:var(--panel2);
  border-radius:var(--r);padding:32px;visibility:hidden;opacity:0;transform:translateY(10px)}
.js .start-ans{transition:opacity .4s var(--ease),transform .4s var(--ease)}
.start-ans.on{visibility:visible;opacity:1;transform:none}
.start-ans .k{color:var(--green)}
.start-ans h3{font-size:25px;margin-bottom:12px}
.start-ans p{color:var(--muted);margin-bottom:22px;font-size:16px}
.start-ans .btn{margin-right:10px}

/* ── Offer cards ────────────────────────────────────────────────────
   Outcome first, in large type. The product name and price sit quietly
   underneath so the outcome is what a visitor reads. */
.offers{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}
.offer{border:1px solid var(--line);background:var(--panel);border-radius:var(--r);
  padding:32px 28px;display:flex;flex-direction:column;min-width:0;position:relative;
  transition:transform .34s var(--ease),border-color .34s var(--ease-soft),
    box-shadow .34s var(--ease-soft)}
.offer:hover{transform:translateY(-4px);border-color:var(--line2);
  box-shadow:0 18px 44px -26px rgba(0,194,255,.45)}
.offer.pick{border-color:rgba(79,255,180,.45)}
.offer.pick:hover{box-shadow:0 18px 44px -26px rgba(79,255,180,.5)}
.offer-tag{position:absolute;top:-11px;left:28px;font:800 10.5px var(--fh);
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink);background:var(--green);
  padding:4px 11px;border-radius:100px}
.offer h3{font-size:clamp(22px,2.4vw,27px);margin-bottom:14px;line-height:1.2}
.offer>p{color:var(--muted);font-size:15.5px;margin-bottom:24px;line-height:1.62}
.offer-meta{margin-top:auto;padding-top:22px;border-top:1px solid var(--line);margin-bottom:20px}
.offer-name{display:block;font:700 13px var(--fb);color:var(--muted);margin-bottom:5px}
.offer-price{display:block;font:800 26px var(--fh);letter-spacing:-.02em;overflow-wrap:anywhere}
.offer-price small{font:400 13.5px var(--fb);color:var(--muted)}
.offer .btn{width:100%}

/* ── Recognise-yourself list ── */
.recog{display:grid;gap:0;max-width:760px}
.recog li{list-style:none;display:grid;grid-template-columns:26px 1fr;gap:16px;
  align-items:start;padding:20px 0;border-bottom:1px solid var(--line);
  font-size:16.5px;color:var(--dim);line-height:1.6}
.recog li:last-child{border-bottom:0}
.recog svg{width:20px;height:20px;stroke:var(--cyan);fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;margin-top:4px;opacity:.85}

/* ── Reassurance panel ── */
.calm{border:1px solid rgba(79,255,180,.28);background:rgba(79,255,180,.045);
  border-radius:var(--r);padding:32px 34px;max-width:820px}
.calm h3{font-size:23px;margin-bottom:12px;color:var(--green)}
.calm p{color:var(--dim);font-size:16.5px;line-height:1.68}
.calm p+p{margin-top:14px}

/* ── Steps ── */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.step{position:relative;padding-top:26px}
.step::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--line);border-radius:2px;overflow:hidden}
.step::after{content:"";position:absolute;top:0;left:0;height:2px;width:0;
  background:var(--cyan);border-radius:2px;transition:width .8s var(--ease)}
.js .step.in::after{width:100%}
.js .step[data-d="1"]::after{transition-delay:.12s}
.js .step[data-d="2"]::after{transition-delay:.24s}
.js .step[data-d="3"]::after{transition-delay:.36s}
.step b{display:block;font-family:var(--fh);font-size:17px;margin-bottom:8px}
.step p{color:var(--muted);font-size:15px;line-height:1.6}

/* ── Included list ── */
.incl{display:grid;gap:0;max-width:700px}
.incl li{list-style:none;display:grid;grid-template-columns:22px 1fr;gap:15px;
  align-items:start;padding:15px 0;border-bottom:1px solid var(--line);font-size:16px}
.incl li:last-child{border-bottom:0}
.incl svg{width:17px;height:17px;stroke:var(--green);fill:none;stroke-width:2.8;
  stroke-linecap:round;stroke-linejoin:round;margin-top:5px}
.incl b{font-weight:600}
.incl span{color:var(--muted)}

/* ── The offer block ────────────────────────────────────────────────
   Price, what happens next, and the reasons to say yes, in one place. */
.deal{border:1px solid rgba(79,255,180,.34);background:var(--panel2);
  border-radius:var(--r);padding:38px;position:relative;overflow:hidden}
.deal::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 100% 0%,rgba(79,255,180,.09) 0%,transparent 62%)}
.deal-in{position:relative}
.deal-price{font:800 clamp(40px,5vw,56px)/1 var(--fh);letter-spacing:-.03em;
  margin:8px 0 6px;overflow-wrap:anywhere}
.deal-price small{font:400 17px var(--fb);color:var(--muted)}
.deal-was{color:var(--muted);font-size:15px;margin-bottom:2px}
.deal-was s{opacity:.75}
.deal>.deal-in>p{color:var(--dim);font-size:16px;margin-bottom:22px}
.deal-yes{display:grid;gap:12px;margin:24px 0 26px;padding-top:24px;
  border-top:1px solid rgba(79,255,180,.2)}
.deal-yes div{display:grid;grid-template-columns:20px 1fr;gap:13px;align-items:start;
  font-size:15.5px;color:var(--dim);line-height:1.55}
.deal-yes svg{width:16px;height:16px;stroke:var(--green);fill:none;stroke-width:2.8;
  stroke-linecap:round;stroke-linejoin:round;margin-top:4px}
.deal .btn{width:100%}
.deal-after{margin-top:16px;font-size:14px;color:var(--muted);text-align:center}

/* ── Next-step timeline ── */
.next{display:grid;gap:0}
.next li{list-style:none;display:grid;grid-template-columns:30px 1fr;gap:16px;
  align-items:start;padding:0 0 26px;position:relative}
.next li:last-child{padding-bottom:0}
.next li::before{content:"";position:absolute;left:14px;top:30px;bottom:-4px;width:1px;
  background:var(--line)}
.next li:last-child::before{display:none}
.next i{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  border:1px solid var(--line2);background:var(--panel);font:800 12px/1 var(--fb);
  font-style:normal;color:var(--cyan);position:relative;z-index:1}
.next b{display:block;font-family:var(--fh);font-size:16.5px;margin-bottom:4px}
.next p{color:var(--muted);font-size:15px;line-height:1.6}

/* ── FAQ ── */
.faq{max-width:800px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;font:700 17.5px var(--fh);list-style:none;padding:22px 34px 22px 0;
  position:relative;transition:color .22s var(--ease-soft)}
.faq summary:hover{color:var(--cyan)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:9px;height:9px;
  border-right:2px solid var(--cyan);border-bottom:2px solid var(--cyan);
  transform:translateY(-70%) rotate(45deg);transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq p{color:var(--muted);padding:0 0 24px;font-size:16px;line-height:1.68;max-width:70ch}

/* ── Contact ── */
.contact{padding:100px 0}
.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start}
.contact-grid>*{min-width:0}
.contact-copy p{color:var(--muted);font-size:16.5px;line-height:1.68}
.contact-copy p+p{margin-top:16px}
form{border:1px solid var(--line);background:var(--panel);padding:32px;border-radius:var(--r)}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:16px}
label{display:block;font-size:13.5px;font-weight:700;margin-bottom:7px}
input,textarea{width:100%;border:1px solid rgba(240,244,255,.16);background:#07101e;
  color:var(--text);border-radius:var(--r-s);padding:14px;font:inherit;font-size:15px;
  transition:border-color .22s var(--ease-soft),box-shadow .22s var(--ease-soft)}
input:focus,textarea:focus{border-color:var(--cyan);outline:none;
  box-shadow:0 0 0 3px rgba(0,194,255,.13)}
textarea{min-height:132px;resize:vertical}
.field{margin-bottom:16px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.submit{width:100%;border:0;background:var(--cyan);color:var(--ink);min-height:54px;
  border-radius:var(--r-s);font:800 16px var(--fh);cursor:pointer;
  transition:filter .2s var(--ease-soft),box-shadow .24s var(--ease-soft),transform .2s var(--ease)}
.submit:hover{filter:brightness(1.09);box-shadow:0 8px 26px -10px rgba(0,194,255,.7);
  transform:translateY(-1px)}
.fine{font-size:12.5px;color:var(--muted);margin-top:14px}

/* ── Footer ── */
.foot{border-top:1px solid var(--line);padding:44px 0 52px;color:var(--muted);font-size:14px}
.foot-row{display:flex;justify-content:space-between;gap:28px;flex-wrap:wrap;margin-bottom:26px}
.foot-links{display:flex;gap:18px;flex-wrap:wrap}
.foot-links a{color:var(--muted);text-decoration:none;transition:color .2s var(--ease-soft)}
.foot-links a:hover{color:var(--text)}
.foot .note{font-size:13px;line-height:1.65;max-width:92ch}
.note{color:var(--muted);font-size:14.5px;border-left:2px solid var(--line2);
  padding-left:15px;line-height:1.65}
.illus{font-size:13px;color:var(--muted);margin-top:16px}

/* ── The signature flow ─────────────────────────────────────────────
   Six stages, drawn left to right. The connector between each pair
   grows when the section scrolls into view, so the diagram appears to
   draw itself. Built from HTML boxes and CSS connectors rather than a
   fixed-viewBox SVG, so it reflows honestly at every width instead of
   scaling down into something unreadable. */
.flow{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(4,1fr);gap:34px 26px;position:relative}
.fnode{position:relative;border:1px solid var(--line);background:var(--panel);
  border-radius:var(--r);padding:22px 20px;min-width:0;
  transition:border-color .5s var(--ease-soft),background .5s var(--ease-soft),
    transform .5s var(--ease),box-shadow .5s var(--ease-soft)}
/* The connector into the next node. */
.fnode::after{content:"";position:absolute;top:50%;left:100%;width:26px;height:2px;
  background:linear-gradient(90deg,var(--line2),var(--cyan));
  transform:scaleX(0);transform-origin:left;border-radius:2px;
  transition:transform .5s var(--ease)}
.js .flow.in .fnode::after{transform:scaleX(1)}
.fnode:nth-child(4)::after,.fnode:last-child::after{display:none}
.js .flow.in .fnode:nth-child(1)::after{transition-delay:.30s}
.js .flow.in .fnode:nth-child(2)::after{transition-delay:.52s}
.js .flow.in .fnode:nth-child(3)::after{transition-delay:.74s}
.js .flow.in .fnode:nth-child(5)::after{transition-delay:1.24s}
.js .flow .fnode{opacity:0;transform:translate3d(0,14px,0)}
.js .flow.in .fnode{opacity:1;transform:none}
.js .flow.in .fnode:nth-child(1){transition-delay:.05s}
.js .flow.in .fnode:nth-child(2){transition-delay:.27s}
.js .flow.in .fnode:nth-child(3){transition-delay:.49s}
.js .flow.in .fnode:nth-child(4){transition-delay:.71s}
.js .flow.in .fnode:nth-child(5){transition-delay:1.00s}
.js .flow.in .fnode:nth-child(6){transition-delay:1.28s}
.fn-n{display:block;font:800 10px var(--fh);letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin-bottom:9px}
.fnode b{display:block;font-family:var(--fh);font-size:17px;margin-bottom:7px;line-height:1.22}
.fnode p{color:var(--muted);font-size:14px;line-height:1.55}

/* The row that carries the gate and the act. Separated deliberately:
   everything above prepares, and only the last box changes anything. */
.flow-2{list-style:none;margin:22px 0 0;padding:0;display:grid;
  grid-template-columns:1fr 1fr;gap:26px}
.flow-arrow{display:grid;place-items:center;padding:8px 0 0;color:var(--cyan)}
.flow-arrow svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;opacity:0;transform:translateY(-6px);
  transition:opacity .45s var(--ease),transform .45s var(--ease)}
.js .flow-wrap.in .flow-arrow svg{opacity:1;transform:none;transition-delay:.92s}

.fnode.gate{border-color:rgba(255,203,71,.42);background:rgba(255,203,71,.055)}
.fnode.gate .fn-n,.fnode.gate b{color:var(--amber)}
.fnode.act{border-color:rgba(79,255,180,.5);background:rgba(79,255,180,.06)}
.fnode.act .fn-n,.fnode.act b{color:var(--green)}
.fnode.act p{color:var(--dim)}
.fn-pill{display:inline-block;margin-top:12px;font:700 10.5px var(--fb);letter-spacing:.05em;
  text-transform:uppercase;padding:4px 11px;border-radius:100px;
  border:1px solid rgba(79,255,180,.4);color:var(--green)}
.fnode.gate .fn-pill{border-color:rgba(255,203,71,.42);color:var(--amber)}

/* A soft pulse on the gate, once it has drawn. It is the one thing on
   the page we want a visitor to notice, and it stops after three. */
@keyframes gatePulse{
  0%,100%{box-shadow:0 0 0 0 rgba(255,203,71,0)}
  50%{box-shadow:0 0 0 7px rgba(255,203,71,.12)}
}
.js .flow-wrap.in .fnode.gate{animation:gatePulse 2.2s var(--ease-soft) 1.5s 3}

/* ── Aiandi product tour ──────────────────────────────────────────
   Ported from Codex's prototype. Three-panel product simulation:
   task list, chat, and the context panel that lights up the
   memories actually used. That panel is the argument the page is
   making, so it is the part that must survive at every width. */
.ad-intro{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:28px}
.ad-intro .section-head{margin:0}
.ad-live{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;color:var(--green);
  border:1px solid rgba(79,255,180,.32);background:rgba(79,255,180,.06);border-radius:100px;
  padding:7px 11px;font-size:12px;font-weight:700}
.ad-live i{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(79,255,180,.08)}
.ad-frame{border:1px solid var(--line2);background:#07101e;border-radius:var(--r);overflow:hidden;
  box-shadow:0 22px 70px rgba(0,0,0,.28)}
.ad-topbar{min-height:58px;display:flex;align-items:center;gap:12px;padding:9px 13px;
  border-bottom:1px solid var(--line);background:#0b1425}
.ad-brandmark{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;flex:0 0 auto;
  border:1px solid rgba(137,124,255,.48);background:#131b3a;color:#b8b1ff;font:800 14px var(--fh)}
.ad-project{min-width:0;display:flex;align-items:center;gap:8px;padding:7px 10px;border:1px solid var(--line);
  border-radius:var(--r-s);background:#08111f}
.ad-project .k{margin:0;font-size:9px}.ad-project strong{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ad-top-spacer{flex:1}
.ad-context-state{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;color:var(--green);
  font-size:12px;font-weight:700;padding:7px 10px;border:1px solid rgba(79,255,180,.26);border-radius:100px}
.ad-context-state::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green)}
.ad-shell{display:grid;grid-template-columns:220px minmax(0,1fr) 235px;min-height:590px}
.ad-scenarios{border-right:1px solid var(--line);background:#080f1c;padding:17px 13px}
.ad-scenarios h3{font-size:14px;margin:0 4px 4px}.ad-scenarios>p{font-size:12px;color:var(--muted);margin:0 4px 14px}
.ad-scenario-list{display:grid;gap:8px}
.ad-scenario{width:100%;text-align:left;border:1px solid var(--line);background:#0b1425;border-radius:var(--r-s);
  padding:12px;cursor:pointer;transition:border-color .18s var(--ease),background .18s var(--ease)}
.ad-scenario:hover{border-color:var(--line2)}
.ad-scenario[aria-pressed="true"]{border-color:var(--cyan);background:rgba(0,194,255,.09)}
.ad-scenario small{display:block;color:var(--cyan);font:800 9px var(--fh);letter-spacing:.08em;text-transform:uppercase;margin-bottom:4px}
.ad-scenario span{display:block;font-size:13px;font-weight:700;line-height:1.35}
.ad-value{margin-top:16px;padding-top:15px;border-top:1px solid var(--line)}
.ad-value div{display:flex;gap:9px;align-items:flex-start;margin-bottom:10px;color:var(--muted);font-size:11.5px;line-height:1.4}
.ad-value b{width:20px;height:20px;display:grid;place-items:center;flex:0 0 auto;border-radius:50%;
  background:rgba(0,194,255,.1);color:var(--cyan);font-size:10px}
.ad-main{min-width:0;display:grid;grid-template-rows:auto minmax(0,1fr);background:#07101e}
.ad-modes{display:flex;align-items:center;gap:8px;min-height:56px;padding:10px 14px;border-bottom:1px solid var(--line);
  overflow-x:auto;scrollbar-width:none}.ad-modes::-webkit-scrollbar{display:none}
.ad-mode{white-space:nowrap;border:1px solid var(--line);background:#0b1425;color:var(--muted);border-radius:100px;
  padding:7px 11px;cursor:pointer;font-size:11.5px;font-weight:700}
.ad-mode[aria-pressed="true"]{color:var(--text);border-color:rgba(137,124,255,.55);background:rgba(137,124,255,.13)}
.ad-chat{min-height:0;display:flex;flex-direction:column;padding:16px;gap:13px;overflow:auto}
.ad-prompt{align-self:flex-end;max-width:82%;padding:11px 13px;border:1px solid rgba(240,244,255,.18);
  background:#192338;border-radius:var(--r);font-size:13.5px;line-height:1.45}
.ad-empty{flex:1;min-height:190px;display:grid;place-items:center;text-align:center;color:var(--muted);font-size:12.5px;line-height:1.5;padding:26px}
.ad-empty[data-show="false"]{display:none}.ad-empty span{display:block;width:38px;height:38px;margin:0 auto 10px;border:1px solid var(--line2);border-radius:50%;color:var(--cyan);font-size:18px;line-height:36px}
.ad-progress{display:none;align-items:center;gap:10px;color:var(--muted);font-size:12.5px;padding:6px 2px}
.ad-progress[data-show="true"]{display:flex}
.ad-pulse{display:flex;gap:4px}.ad-pulse i{width:6px;height:6px;border-radius:50%;background:var(--cyan);animation:adThink 1s ease-in-out infinite}
.ad-pulse i:nth-child(2){animation-delay:.14s}.ad-pulse i:nth-child(3){animation-delay:.28s}
@keyframes adThink{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
.ad-answer{display:none;border:1px solid rgba(0,194,255,.28);background:#0d1d33;border-radius:var(--r);padding:16px}
.ad-answer[data-show="true"]{display:block;animation:adIn .28s ease-out both}
@keyframes adIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.ad-answer-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-bottom:11px;margin-bottom:12px;border-bottom:1px solid var(--line)}
.ad-answer-head strong{font-family:var(--fh);font-size:14px}.ad-answer-head span{color:var(--green);font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.ad-answer h4{font:700 14px/1.4 var(--fb);margin:0 0 8px}.ad-answer p{font-size:13px;color:var(--dim);line-height:1.6;margin-bottom:10px}
.ad-answer ul{margin:0;padding-left:19px;color:var(--dim);font-size:13px}.ad-answer li{margin:5px 0}
.ad-smart{display:none;border:1px solid rgba(255,203,71,.28);background:rgba(255,203,71,.055);border-radius:var(--r);padding:13px}
.ad-smart[data-show="true"]{display:block;animation:adIn .25s ease-out both}
.ad-smart-title{display:flex;align-items:center;gap:7px;color:var(--amber);font-size:12px;font-weight:800;margin-bottom:5px}
.ad-smart p{font-size:12.5px;color:var(--dim);margin:0 0 10px;line-height:1.5}
.ad-smart-actions,.ad-answer-actions{display:flex;flex-wrap:wrap;gap:7px}
.ad-mini-btn{border:1px solid var(--line2);background:#0b1425;border-radius:var(--r-s);padding:7px 10px;
  cursor:pointer;font-size:11.5px;font-weight:700;color:var(--text)}
.ad-mini-btn:hover{border-color:var(--cyan);background:rgba(0,194,255,.08)}
.ad-mini-btn.primary{background:var(--cyan);border-color:var(--cyan);color:var(--ink)}
.ad-learn-input{display:none;grid-template-columns:minmax(0,1fr) auto;gap:7px;margin-top:9px}
.ad-learn-input[data-show="true"]{display:grid}.ad-learn-input input{min-width:0;border:1px solid var(--line2);background:#050913;color:var(--text);border-radius:var(--r-s);padding:9px 10px;font:12px var(--fb)}
.ad-next{display:none;align-items:flex-start;gap:9px;padding:12px;border:1px solid rgba(79,255,180,.25);border-radius:var(--r);background:rgba(79,255,180,.05);flex-wrap:wrap}
.ad-next[data-show="true"]{display:flex;animation:adIn .25s ease-out both}.ad-next b{color:var(--green);font-size:12px;white-space:nowrap}.ad-next span{font-size:12.5px;color:var(--dim);line-height:1.45}
.ad-composer{margin-top:auto;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;padding-top:2px}
.ad-composer button:first-child{min-width:0;text-align:left;border:1px solid var(--line);background:#050913;color:var(--muted);
  border-radius:var(--r);padding:11px 12px;font-size:12.5px;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ad-send{width:42px;border:1px solid var(--cyan);background:var(--cyan);color:var(--ink);border-radius:var(--r);cursor:pointer;font-size:17px;font-weight:800}
.ad-context{border-left:1px solid var(--line);background:#080f1c;padding:17px 14px;min-width:0}
.ad-context h3{font-size:14px;margin-bottom:4px}.ad-context>p{font-size:11.5px;color:var(--muted);line-height:1.45;margin-bottom:14px}
.ad-context-list{display:grid;gap:8px}
/* The point of this panel is watching it choose. Unused context recedes
   so the selection reads at a glance, not just on close inspection. */
.ad-memory{border:1px solid var(--line);border-radius:var(--r-s);background:#0b1425;
  padding:10px;opacity:.42;transition:opacity .34s var(--ease),
  border-color .34s var(--ease),background-color .34s var(--ease)}
.ad-memory[data-active="true"]{border-color:rgba(79,255,180,.45);
  background:rgba(79,255,180,.06);opacity:1}
.ad-memory small{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:9.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;margin-bottom:4px}
.ad-memory small::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--muted)}
.ad-memory[data-active="true"] small::before{background:var(--green)}
.ad-memory p{font-size:11.5px;line-height:1.4;color:var(--dim)}
.ad-context-foot{margin-top:13px;padding-top:12px;border-top:1px solid var(--line);font-size:10.5px;color:var(--muted);line-height:1.45}
.ad-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:13px;color:var(--muted);font-size:12px}
.ad-foot strong{color:var(--text)}
.ad-toast{position:fixed;left:50%;bottom:22px;z-index:80;transform:translate(-50%,20px);opacity:0;pointer-events:none;
  background:#0e1a2e;border:1px solid rgba(79,255,180,.42);color:var(--text);border-radius:var(--r-s);padding:10px 14px;
  box-shadow:0 18px 50px rgba(0,0,0,.4);font-size:12.5px;font-weight:700;transition:opacity .2s var(--ease),transform .2s var(--ease)}
.ad-toast[data-show="true"]{opacity:1;transform:translate(-50%,0)}
@media(max-width:920px){
  .ad-shell{grid-template-columns:185px minmax(0,1fr)}.ad-context{grid-column:1/-1;border-left:0;border-top:1px solid var(--line)}
  .ad-context-list{grid-template-columns:repeat(4,minmax(140px,1fr));overflow-x:auto;padding-bottom:3px}.ad-context-foot{display:none}
}
@media(max-width:680px){
  .ad-intro{display:block}.ad-live{margin-top:14px}.ad-topbar{flex-wrap:wrap}.ad-project{max-width:calc(100% - 48px)}
  .ad-top-spacer{display:none}.ad-context-state{width:100%;justify-content:center}
  .ad-shell{display:block;min-height:0}.ad-scenarios{border-right:0;border-bottom:1px solid var(--line);padding:13px}
  .ad-scenarios h3,.ad-scenarios>p,.ad-value{display:none}.ad-scenario-list{display:flex;overflow-x:auto;gap:8px;scroll-snap-type:x proximity;padding-bottom:2px;scrollbar-width:none}
  .ad-scenario-list::-webkit-scrollbar{display:none}
  .ad-scenario{flex:0 0 190px;scroll-snap-align:start}.ad-main{min-height:590px}.ad-chat{padding:13px}.ad-prompt{max-width:92%}
  .ad-context{padding:13px}.ad-context-list{grid-template-columns:repeat(4,170px)}.ad-foot{align-items:flex-start;flex-direction:column}
}
@media(max-width:420px){
  .ad-modes{display:grid;grid-template-columns:1fr 1fr;overflow:visible}
  /* These are the demo's main control on a phone. Comfortably thumb-sized. */
  .ad-mode{width:100%;padding-inline:7px;text-align:center;min-height:44px;
    display:inline-flex;align-items:center;justify-content:center}
  .ad-answer-actions .ad-mini-btn{flex:1 1 calc(50% - 4px)}.ad-smart-actions .ad-mini-btn{flex:1 1 100%}
  .ad-learn-input{grid-template-columns:1fr}.ad-next{display:none}.ad-next[data-show="true"]{display:block}.ad-next b{display:block;margin-bottom:4px}
}
@media(prefers-reduced-motion:reduce){.ad-pulse i,.ad-answer[data-show="true"],.ad-smart[data-show="true"],.ad-next[data-show="true"]{animation:none!important}}

/* Next Move is a standing preference, not a per-answer action, so it is a
   switch rather than another button in the action row. Modes are mutually
   exclusive; this is independent, and the shape should say so. */
.ad-modes-spacer{flex:1;min-width:4px}
.ad-toggle{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  min-height:44px;
  border:1px solid var(--line);background:#0b1425;color:var(--muted);
  border-radius:100px;padding:6px 13px 6px 8px;font:600 12.5px var(--fb);cursor:pointer;
  transition:border-color .18s var(--ease),color .18s var(--ease)}
.ad-toggle:hover{border-color:var(--line2);color:var(--text)}
.ad-toggle[aria-checked="true"]{border-color:rgba(79,255,180,.42);color:var(--green);
  background:rgba(79,255,180,.08)}
.ad-switch{width:30px;height:17px;border-radius:100px;background:rgba(240,244,255,.14);
  border:1px solid var(--line);position:relative;flex:0 0 auto;transition:background .18s var(--ease)}
.ad-switch i{position:absolute;top:1px;left:1px;width:13px;height:13px;border-radius:50%;
  background:var(--muted);transition:transform .18s var(--ease),background .18s var(--ease)}
.ad-toggle[aria-checked="true"] .ad-switch{background:rgba(79,255,180,.26);
  border-color:rgba(79,255,180,.45)}
.ad-toggle[aria-checked="true"] .ad-switch i{transform:translateX(13px);background:var(--green)}
.ad-next em{flex:1 0 100%;margin-top:7px;padding-top:7px;font-style:normal;font-size:12px;
  color:var(--muted);line-height:1.45;border-top:1px solid rgba(79,255,180,.16)}

/* ── Outcome cards (homepage) ──────────────────────────────────────
   The offer leads with what you get. The product name and price sit
   underneath, so the outcome sells and the name stays searchable and
   consistent with the deeper pages. */
.ocards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:stretch}
.oc{border:1px solid var(--line);background:var(--panel);border-radius:var(--r);
  padding:26px 24px;display:flex;flex-direction:column;min-width:0}
.oc.feature{border-color:rgba(79,255,180,.42)}
.oc-n{font:800 11px var(--fh);letter-spacing:.12em;color:var(--cyan);margin-bottom:14px}
.oc h3{font-size:clamp(20px,2.2vw,25px);line-height:1.16;margin-bottom:11px}
.oc>p{color:var(--muted);font-size:14.5px;line-height:1.55;margin-bottom:18px}
.oc-when{font-size:13px;color:var(--dim);border-left:2px solid var(--line2);
  padding-left:11px;margin-bottom:20px}
.oc-foot{margin-top:auto;padding-top:16px;border-top:1px solid var(--line);
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  flex-wrap:wrap;margin-bottom:16px}
.oc-name{font:700 13px var(--fb);color:var(--muted)}
.oc-price{font:800 20px var(--fh);white-space:nowrap;overflow-wrap:anywhere}
.oc-price small{font:400 12.5px var(--fb);color:var(--muted)}
.oc .btn{width:100%}

/* Secondary product row: the two Aiandi products and the plans. */
.prods{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.prod{border:1px solid var(--line);background:var(--panel2);border-radius:var(--r);
  padding:20px;display:flex;flex-direction:column;min-width:0}
.prod .k{color:var(--cyan)}
.prod h3{font-size:18px;margin-bottom:8px}
.prod p{color:var(--muted);font-size:13.5px;line-height:1.5;margin-bottom:14px}
.prod a{margin-top:auto;color:var(--cyan);text-decoration:none;font-weight:700;font-size:13.5px}

/* ── Demos strip ── */
.demos{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.demo{border:1px solid var(--line2);background:var(--panel);border-radius:var(--r);
  padding:20px;display:flex;flex-direction:column;min-width:0}
.demo .k{color:var(--green)}
.demo h3{font-size:17.5px;margin-bottom:8px}
.demo p{color:var(--muted);font-size:13.5px;line-height:1.5;margin-bottom:16px}
.demo .btn{margin-top:auto;width:100%}

/* ── Industries ── */
.ind-controls{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:18px}
.ind-search{position:relative;flex:1 1 260px;min-width:0}
.ind-search input{width:100%;border:1px solid rgba(240,244,255,.18);background:#07101e;
  color:var(--text);border-radius:var(--r-s);padding:11px 13px 11px 38px;font:inherit;font-size:14px}
.ind-search input:focus{border-color:var(--cyan);outline:none}
.ind-search svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);
  width:15px;height:15px;stroke:var(--muted);fill:none;stroke-width:2;pointer-events:none}
.ind-cats{display:flex;gap:7px;flex-wrap:wrap}
.ind-cat{border:1px solid var(--line);background:var(--panel);color:var(--muted);
  border-radius:100px;padding:7px 13px;font:600 12.5px var(--fb);cursor:pointer;white-space:nowrap;
  transition:border-color .16s var(--ease),color .16s var(--ease)}
.ind-cat:hover{border-color:var(--line2);color:var(--text)}
.ind-cat[aria-pressed="true"]{border-color:var(--cyan);color:var(--cyan);background:rgba(0,194,255,.1)}
.ind-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.ind-tab{border:1px solid var(--line);background:var(--panel);border-radius:var(--r-s);
  padding:10px 13px;cursor:pointer;text-align:left;min-width:0;
  transition:border-color .16s var(--ease),background .16s var(--ease)}
.ind-tab:hover{border-color:var(--line2);background:var(--panel2)}
.ind-tab[aria-selected="true"]{border-color:var(--cyan);background:rgba(0,194,255,.1)}
.ind-tab-n{display:block;font:700 13.5px var(--fb);color:var(--text);line-height:1.25}
.ind-tab-c{display:block;font-size:11px;color:var(--muted);margin-top:2px}
.ind-tab[hidden]{display:none!important}
.ind-none{color:var(--muted);font-size:14px;padding:14px 0}
.ind-stack{display:grid}
.ind-panel{grid-area:1/1;visibility:hidden;opacity:0;
  border:1px solid var(--line);background:var(--panel2);border-radius:var(--r);padding:24px}
.js .ind-panel{transition:opacity .25s var(--ease)}
.ind-panel.is-active{visibility:visible;opacity:1}
.ind-panel-h{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.ind-panel-h h3{font-size:22px}
.ind-blocks{display:grid;grid-template-columns:1fr 1.15fr;gap:32px;align-items:start}
.ind-blocks>*{min-width:0}
.ind-block h4{font:800 10px var(--fh);letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);margin-bottom:6px}
.ind-block h4+p{margin-bottom:16px;font-size:14px;line-height:1.55}
.ind-slow{color:var(--dim)}
.ind-outcome{color:var(--green)}
.ind-sols{display:grid;gap:12px}
.ind-sol{display:grid;grid-template-columns:18px 1fr;gap:10px;align-items:start}
.ind-sol svg{width:16px;height:16px;stroke:var(--green);fill:none;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;margin-top:2px}
.ind-sol-t{display:block;font-weight:600;font-size:14px;color:var(--text)}
.ind-sol-d{display:block;color:var(--muted);font-size:13px;line-height:1.5;margin-top:2px}
.ind-foot{margin-top:18px;padding-top:14px;border-top:1px solid var(--line);
  font-size:13px;color:var(--muted)}
.ind-foot b{color:var(--green)}

/* ── Results strip ── */
.results{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.result{border:1px solid var(--line);background:var(--panel);border-radius:var(--r);padding:20px}
.result .k{color:var(--green)}
.result p{color:var(--muted);font-size:14px;line-height:1.55}

/* ── Agent board (Aiandi OS teaser) ── */
.agents{display:grid;grid-template-columns:repeat(3,1fr);gap:11px}
.agent{border:1px solid var(--line);background:var(--panel);border-radius:var(--r);
  padding:14px;display:grid;gap:7px;align-content:start}
.agent-h{display:flex;align-items:center;gap:9px}
.agent-ic{width:28px;height:28px;flex-shrink:0;display:grid;place-items:center;
  border-radius:var(--r-s);border:1px solid var(--line);background:rgba(0,194,255,.07);
  font-size:13px;color:var(--cyan)}
.agent-h b{font-family:var(--fh);font-size:14.5px;line-height:1.2}
.agent-h span{display:block;font-size:11px;color:var(--muted)}
.agent p{color:var(--muted);font-size:12.5px;line-height:1.45}
.agent .holds{font-size:12px;color:var(--green);border-left:2px solid rgba(79,255,180,.4);
  padding-left:9px}
.agent.brakes{border-color:rgba(255,125,149,.32)}
.agent.brakes .agent-ic{color:var(--red);border-color:rgba(255,125,149,.3);
  background:rgba(255,125,149,.07)}
.agent.brakes .holds{color:var(--red);border-left-color:rgba(255,125,149,.4)}

/* The tour and the agent board sit inside the v2 reveal system, so
   they settle with everything else rather than appearing abruptly. */
.js .ad-frame,.js .agents{opacity:0;transform:translate3d(0,18px,0);
  transition:opacity .62s var(--ease),transform .62s var(--ease)}
.js .ad-frame.in,.js .agents.in{opacity:1;transform:none}

/* ── Responsive ── */
@media(max-width:980px){
  .start,.contact-grid{grid-template-columns:1fr;gap:32px}
  .offers{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr 1fr}
  .agents{grid-template-columns:1fr 1fr}
  .flow{grid-template-columns:1fr 1fr;gap:26px 22px}
  .fnode:nth-child(4)::after{display:block}
  .fnode:nth-child(2)::after,.fnode:nth-child(4)::after{display:none}
  .band{padding:82px 0}
  .hero{padding:88px 0 76px}
}
@media(max-width:760px){
  .nav-links a:not(.btn){display:none}
  .nav{min-height:66px;gap:12px}
  .nav .btn{min-height:44px;padding:0 15px;font-size:14px;white-space:nowrap}
}
@media(max-width:620px){
  .wrap{width:calc(100% - 28px)}
  body{font-size:15.5px}
  .band{padding:64px 0}
  .contact{padding:64px 0}
  .hero{padding:66px 0 58px}
  .steps,.fields,.flow,.flow-2,.agents{grid-template-columns:1fr}
  .fnode::after{display:none!important}
  .offer,.deal{padding:24px 21px}
  .calm{padding:24px 22px}
  form{padding:22px}
  .lead{font-size:17.5px}
}
@media(max-width:360px){
  .brand img{width:31px;height:31px}
  .brand{font-size:15px}
  .nav .btn{padding:0 12px;font-size:13px}
}

/* Motion off means off, not slower. */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;
    animation-iteration-count:1!important;transition-duration:.001ms!important}
  .js [data-rise]{opacity:1!important;transform:none!important}
  .js .ad-frame,.js .agents{opacity:1!important;transform:none!important}
  .js .flow .fnode{opacity:1!important;transform:none!important}
  .js .flow .fnode::after{transform:scaleX(1)!important}
  .js .flow-wrap .flow-arrow svg{opacity:1!important;transform:none!important}
  .js .flow-wrap.in .fnode.gate{animation:none!important}
  .js .step::after{width:100%!important}
}

/* The ask under a demo. Deliberately the warmest block on the page —
   this is the one moment the visitor is already imagining themselves in it. */
.demo-cta{margin-top:28px;padding:26px 28px;border:1px solid rgba(79,255,180,.28);
  border-radius:var(--r-m);background:linear-gradient(180deg,rgba(79,255,180,.07),
  rgba(79,255,180,.02));display:flex;align-items:center;justify-content:space-between;
  gap:24px;flex-wrap:wrap}
.demo-cta h3{font-family:var(--f-d);font-size:21px;line-height:1.25;margin:0 0 6px;
  color:var(--text)}
.demo-cta p{margin:0;color:var(--dim);font-size:14.5px;line-height:1.55;max-width:52ch}
.demo-cta .btn{flex:none}
@media (max-width:640px){
  .demo-cta{padding:22px;flex-direction:column;align-items:flex-start}
  .demo-cta h3{font-size:19px}
  .demo-cta .btn{width:100%;justify-content:center}
}

/* Legal, thank-you and 404. Plain documents in the site's own clothes. */
.wrap-doc{width:min(820px,calc(100% - 32px))}
.doc h1{font-family:var(--f-d);font-size:clamp(30px,4.4vw,46px);line-height:1.08;
  margin-bottom:26px}
.doc-body{color:var(--dim);font-size:16px;line-height:1.72}
.doc-body h2{font-family:var(--f-d);font-size:20px;line-height:1.3;color:var(--text);
  margin:34px 0 8px}
.doc-body h3{font-family:var(--f-d);font-size:17px;color:var(--text);margin:0 0 6px}
.doc-body p{margin-bottom:12px}
.doc-body p.note{border-left:2px solid var(--cyan);padding-left:14px;color:var(--text);
  margin-bottom:22px}
.doc-body strong{color:var(--text)}
.doc-body .lead{font-size:18px;line-height:1.65;color:var(--text)}
.ty-tick{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;
  background:rgba(79,255,180,.12);border:1px solid rgba(79,255,180,.32);margin-bottom:24px}
.ty-tick svg{width:26px;height:26px;stroke:var(--green);stroke-width:2.6;fill:none}

.form-error{padding:14px;border:1px solid var(--amber);color:var(--text);margin-bottom:18px}
.selected-offer{font-size:13px;color:var(--muted);margin-bottom:18px;overflow-wrap:anywhere}
.cc-demo{border:1px solid var(--line2);border-radius:8px;background:var(--panel);padding:24px;margin-bottom:40px}
.cc-top{display:flex;align-items:start;justify-content:space-between;gap:16px;flex-wrap:wrap}
.cc-top h3{font-size:24px;letter-spacing:0;margin:8px 0 20px}
.cc-badge{font-size:12px;color:var(--amber)}
.cc-business{display:flex;gap:10px;flex-wrap:wrap}
.cc-business button,.cc-views button{padding:12px 16px;border:1px solid var(--line);border-radius:6px;background:transparent;text-align:left;cursor:pointer;line-height:1.4;min-height:44px}
.cc-business button[aria-pressed=true],.cc-views button[aria-pressed=true]{background:rgba(0,194,255,.1);border-color:var(--cyan);color:var(--cyan)}
.cc-source{font-size:13px;color:var(--muted);margin:18px 0}
.cc-layout{display:grid;grid-template-columns:minmax(160px,1fr) minmax(0,3fr);gap:24px}
.cc-views{display:flex;flex-direction:column;gap:10px;align-self:start}
.cc-result{min-width:0;min-height:325px;border-left:1px solid var(--line);padding-left:24px}
.cc-result [data-cc-state]{display:block;min-height:32px;line-height:16px}
.cc-result h4{font-size:22px;letter-spacing:0;margin:12px 0;overflow-wrap:anywhere}
.cc-result [data-cc-result]{min-height:110px}
.cc-approval{font-size:13px;color:var(--green);margin:18px 0}
.cc-demo .illus{margin-top:24px}
@media(max-width:600px){.cc-demo{padding:18px}.cc-layout{grid-template-columns:minmax(0,1fr)}.cc-result{padding:20px 0 0;border-left:0;border-top:1px solid var(--line);min-height:420px}.cc-result [data-cc-result]{min-height:185px}.cc-top h3{font-size:21px}.cc-business button{flex:1 1 180px}}
/* Optional expansion follows the one-off offers without adding another tier. */
.next-stage{margin-top:36px;padding-top:28px;border-top:1px solid var(--line);max-width:820px}
.next-stage h3{font-size:22px;letter-spacing:0}
.next-stage p{margin:14px 0;line-height:1.7}