/* OPPTAIN v5: THE SHARED LOOK (home, Opptain Team, Opptain Rep, Opptain CRM, Get started).
   Moved out of the home page 2026-10-15 so the product pages carry the same theme (David: "carry this same
   theme to the three product pages"). Page-specific additions sit at the end, under PRODUCT PAGES. */
/* THE OPPTAIN HOME, v5 (2026-10-15). David: "it still feels cheap, big blue boxes with text", then "I like the feel of
   Stripe, I like the motion of Granola". So: Stripe's restraint (a quiet page, hairline borders, medium-weight type at
   modest sizes, a two-tone headline, one flowing colour ribbon, product shown as crisp built UI on soft colour fields,
   one deep band for rhythm) and Granola's motion (the product does its job on screen: the question types, Opptain
   reads, the list fills in; a story told by scrolling, the product view changing beside it). No stock photography.
   Every product view below is built in the page from the demo's real data, so it is sharp at any size. */
:root{
  --bg:#FFFFFF; --bg-2:#F6F8F7; --card:#FFFFFF; --ink:#0B1F1A; --ink-2:#3C4B46; --muted:#6B7A74; --hair:#E4E9E7; --hair-2:#EEF2F0;
  --accent:#0E7A57; --accent-2:#0A5C42; --accent-soft:#E3F4EC; --tone:#5C7A70;
  --app:#FFFFFF; --app-2:#F7F7F8; --app-line:#E5E7EB; --app-ink:#1F2328; --app-muted:#6B7280; --link:#0E7A57; --chip:#F2F4F5;
  --user:#F0F2F4; --warn:#B4532E; --warn-soft:#FBEDE6;
  --band:#0A2A22; --band-2:#0E3A2F;
  --shadow:0 1px 1px rgba(11,31,26,.04),0 8px 24px -8px rgba(11,31,26,.12),0 40px 80px -40px rgba(11,31,26,.25);
  --sans:Inter,system-ui,-apple-system,"Segoe UI",sans-serif; --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --gut:clamp(16px,4vw,48px);
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#080F0D; --bg-2:#0C1613; --card:#0F1A17; --ink:#ECF1EE; --ink-2:#B8C4BF; --muted:#86958F; --hair:#1C2925; --hair-2:#16221E;
  --accent:#5EE0AE; --accent-2:#8EF0C8; --accent-soft:#12302A; --tone:#8FA79E;
  --app:#212121; --app-2:#171717; --app-line:#2F2F2F; --app-ink:#ECECEC; --app-muted:#9B9B9B; --link:#7FE3BD; --chip:#2A2A2A;
  --user:#303030; --warn:#FF9C76; --warn-soft:#3A2018;
  --band:#06120F; --band-2:#0B1F19;
  --shadow:0 1px 1px rgba(0,0,0,.3),0 12px 30px -10px rgba(0,0,0,.6),0 50px 100px -40px rgba(0,0,0,.9); color-scheme:dark } }
:root[data-theme="dark"]{
  --bg:#080F0D; --bg-2:#0C1613; --card:#0F1A17; --ink:#ECF1EE; --ink-2:#B8C4BF; --muted:#86958F; --hair:#1C2925; --hair-2:#16221E;
  --accent:#5EE0AE; --accent-2:#8EF0C8; --accent-soft:#12302A; --tone:#8FA79E;
  --app:#212121; --app-2:#171717; --app-line:#2F2F2F; --app-ink:#ECECEC; --app-muted:#9B9B9B; --link:#7FE3BD; --chip:#2A2A2A;
  --user:#303030; --warn:#FF9C76; --warn-soft:#3A2018;
  --band:#06120F; --band-2:#0B1F19;
  --shadow:0 1px 1px rgba(0,0,0,.3),0 12px 30px -10px rgba(0,0,0,.6),0 50px 100px -40px rgba(0,0,0,.9); color-scheme:dark }
*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1rem/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip;font-feature-settings:"cv11","ss01"}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-underline-offset:.18em}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-999px;top:8px;background:var(--accent);color:var(--bg);padding:.5rem .8rem;border-radius:6px;z-index:99}.skip:focus{left:12px}
.wrap{max-width:1180px;margin:0 auto;padding-inline:var(--gut);position:relative}
/* the hairline frame Stripe draws down the page */
.rail{position:relative}
.rail::before,.rail::after{content:"";position:absolute;top:0;bottom:0;width:1px;background:var(--hair-2);pointer-events:none}
.rail::before{left:max(var(--gut),calc((100vw - 1180px)/2 + var(--gut)))}.rail::after{right:max(var(--gut),calc((100vw - 1180px)/2 + var(--gut)))}
.eyebrow{font:500 .8rem/1.2 var(--sans);color:var(--accent);margin:0 0 1rem;letter-spacing:.01em}
.h2{font:600 clamp(1.7rem,3vw,2.5rem)/1.14 var(--sans);letter-spacing:-.025em;margin:0;max-width:22em;text-wrap:balance}
.h2 span{color:var(--tone);font-weight:500}
.btn{display:inline-flex;align-items:center;gap:.4rem;font:600 .94rem/1 var(--sans);text-decoration:none;border-radius:999px;padding:.78rem 1.15rem;transition:background .2s,color .2s,transform .2s}
.btn.primary{background:var(--accent);color:var(--bg)}
.btn.primary:hover{background:var(--accent-2)}
.btn.quiet{color:var(--ink);border:1px solid var(--hair)}
.btn.quiet:hover{border-color:var(--accent)}
.btn .ar{transition:transform .2s}.btn:hover .ar{transform:translateX(3px)}

/* reveal on scroll (Granola's calm rise) */
.rv{opacity:0;transform:translateY(18px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){ .rv{opacity:1;transform:none;transition:none} }

/* 1. HERO: the ribbon, the two-tone headline, then the product doing its job */
.hero{position:relative;overflow:hidden;padding-block:clamp(56px,8vw,112px) 0}
.ribbon{position:absolute;inset:-20% -10% auto auto;width:min(1100px,95vw);height:760px;pointer-events:none;opacity:.9;filter:saturate(1.1);-webkit-mask-image:radial-gradient(70% 70% at 70% 35%,#000 45%,transparent 100%);mask-image:radial-gradient(70% 70% at 70% 35%,#000 45%,transparent 100%)}
.ribbon svg{width:100%;height:100%}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .ribbon{opacity:.75} }
:root[data-theme="dark"] .ribbon{opacity:.75}
.ribbon path{animation:drift 18s ease-in-out infinite alternate}
.ribbon path:nth-child(2){animation-duration:22s}.ribbon path:nth-child(3){animation-duration:26s}
@keyframes drift{from{transform:translate(0,0)}to{transform:translate(-40px,26px)}}
@media (prefers-reduced-motion: reduce){ .ribbon path{animation:none} }
.hero .copy{position:relative;z-index:1;max-width:780px}
.hero h1{font:600 clamp(2.3rem,4.6vw,3.7rem)/1.06 var(--sans);letter-spacing:-.035em;margin:0;text-wrap:balance}
.hero .sub{margin:1rem 0 0;color:var(--ink-2);font-size:clamp(1.05rem,1.4vw,1.2rem)}
.hero h1 span{color:var(--tone);font-weight:500}
.hero .acts{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:2rem}
.hero .meta{display:flex;gap:1.6rem;flex-wrap:wrap;margin-top:1.6rem;color:var(--muted);font-size:.86rem}
.hero .meta b{color:var(--ink);font-weight:600}
.hero .meta a{color:inherit;text-decoration:none;display:inline-flex;align-items:baseline;gap:.35em;padding-bottom:2px;border-bottom:1px solid var(--hair);transition:border-color .2s,color .2s}
.hero .meta a .ar{color:var(--accent);transition:transform .2s}
.hero .meta a:hover,.hero .meta a:focus-visible{color:var(--ink);border-color:var(--accent)}
.hero .meta a:hover .ar,.hero .meta a:focus-visible .ar{transform:translateX(3px)}
/* Hovering a product name raises that product's own view out of the background, behind the headline's right side
   (David, 2026-10-15: "have a transparent image come from background, just something of interest"). */
.peek{position:absolute;top:0;right:var(--gut);width:min(380px,34vw);height:260px;pointer-events:none;z-index:0}
.peek .pk{position:absolute;inset:0 0 auto 0;margin:0;padding:26px 26px 22px;border-radius:18px;border:1px solid color-mix(in srgb,var(--ink) 14%,transparent);background:color-mix(in srgb,var(--bg) 55%,transparent);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);box-shadow:var(--shadow);opacity:0;transform:translateY(28px) scale(.94) rotate(-1.5deg);filter:blur(10px);transition:opacity .45s ease,transform .6s cubic-bezier(.2,.8,.2,1),filter .45s ease}
.peek .pk::before{content:"";position:absolute;inset:-35% -25%;z-index:-1;filter:blur(34px);opacity:.85}
.peek .pk.t::before{background:radial-gradient(50% 50% at 60% 40%,rgba(94,224,174,.45),transparent 70%)}
.peek .pk.r::before{background:radial-gradient(50% 50% at 60% 40%,rgba(255,170,90,.42),transparent 70%)}
.peek .pk.c::before{background:radial-gradient(50% 50% at 60% 40%,rgba(150,120,255,.45),transparent 70%)}
.peek .pk.on{opacity:1;transform:rotate(-1deg);filter:none}
.peek blockquote{margin:0;font:500 1.12rem/1.45 var(--sans);letter-spacing:-.01em;color:var(--ink);text-wrap:pretty}
.peek blockquote::before{content:"\201C";display:block;font:600 3rem/.6 var(--sans);color:var(--accent);margin:6px 0 4px;opacity:.9}
.peek blockquote{quotes:none}
.peek figcaption{display:flex;align-items:center;gap:.7rem;margin-top:1.1rem;font-size:.82rem;color:var(--muted)}
.peek figcaption i{font-style:normal;flex:none;width:2.2rem;height:2.2rem;border-radius:50%;display:grid;place-items:center;font:600 .78rem/1 var(--sans);color:var(--bg);background:var(--accent)}
.peek .pk.r figcaption i{background:#FFB27A}.peek .pk.c figcaption i{background:#A894FF}
.peek figcaption span:not(.av){display:flex;flex-direction:column;line-height:1.3}
.peek figcaption b{color:var(--ink);font-weight:600}
.peek figcaption em{margin-left:auto;font-style:normal;font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--hair);border-radius:999px;padding:.25rem .5rem}
@media (max-width:1000px),(hover:none){ .peek{display:none} }
@media (prefers-reduced-motion: reduce){ .peek .pk{transition:opacity .3s;transform:none;filter:none} }
.stagewrap{position:relative;z-index:1;margin-top:clamp(40px,6vw,72px);padding-bottom:clamp(56px,8vw,96px)}

/* the app window, built: a ChatGPT-like chat on the left, Opptain's panel on the right */
.app{border-radius:14px;background:var(--app);border:1px solid var(--app-line);box-shadow:var(--shadow);overflow:hidden;color:var(--app-ink);font-size:.86rem}
.app .top{display:flex;align-items:center;gap:7px;padding:10px 14px;background:var(--app-2);border-bottom:1px solid var(--app-line)}
.app .top i{width:10px;height:10px;border-radius:50%;background:var(--app-line)}
.app .top span{margin-left:10px;color:var(--app-muted);font-size:.76rem}
.app .cols{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);min-height:440px}
.chat{padding:22px 22px 18px;border-right:1px solid var(--app-line);display:flex;flex-direction:column;gap:14px}
.msg-u{align-self:flex-end;background:var(--user);padding:.6rem .9rem;border-radius:18px;max-width:88%;min-height:2.3em}
.msg-u .caret{display:inline-block;width:1px;height:1em;background:currentColor;vertical-align:-2px;margin-left:1px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.reads{display:grid;gap:6px;color:var(--app-muted);font-size:.8rem}
.reads div{display:flex;align-items:center;gap:8px;opacity:0;transition:opacity .4s}
.reads div.on{opacity:1}
.reads .dot{width:14px;height:14px;border-radius:50%;border:1.5px solid var(--app-line);display:grid;place-items:center;font-size:.6rem;color:var(--link)}
.reads div.ok .dot{border-color:var(--link)}
.reads div.ok .dot::after{content:"✓"}
.msg-a{line-height:1.55;opacity:0;transition:opacity .6s}
.msg-a.on{opacity:1}
.msg-a b{font-weight:600}
.compose{margin-top:auto;border:1px solid var(--app-line);border-radius:22px;padding:.62rem .9rem;color:var(--app-muted);display:flex;justify-content:space-between;font-size:.82rem}
.panel{padding:18px 20px;background:var(--app)}
.panel .ttl{display:flex;justify-content:space-between;align-items:center;font-weight:600;margin-bottom:10px}
.panel .ttl small{font-weight:400;color:var(--app-muted)}
.ptabs{display:flex;gap:18px;border-bottom:1px solid var(--app-line);margin-bottom:6px}
.ptabs span{padding:8px 0;color:var(--app-muted)}
.ptabs span.on{color:var(--link);box-shadow:inset 0 -2px 0 var(--link);font-weight:500}
.ptabs em{font-style:normal;color:var(--warn);margin-left:3px}
.ptabs span.on em{color:var(--link);opacity:.75}
.cap{color:var(--app-muted);font-size:.76rem;margin:8px 0 4px}
.row{display:grid;grid-template-columns:20px minmax(0,.9fr) minmax(0,1.8fr);gap:10px;padding:11px 0;border-top:1px solid var(--app-line);opacity:0;transform:translateY(8px);transition:opacity .5s,transform .5s}
.row.on{opacity:1;transform:none}
.row .n{color:var(--app-muted)}
.row .ac{color:var(--link);font-weight:600;line-height:1.3}
.row .do{font-weight:500}
.row .dt{color:var(--app-muted);font-size:.78rem;line-height:1.45;margin-top:2px}
.row .pills{display:flex;gap:6px;margin-top:7px}.row .pills i{font-style:normal;font-size:.72rem;border:1px solid var(--app-line);border-radius:999px;padding:.18rem .6rem}
.row.hot{background:linear-gradient(90deg,var(--accent-soft),transparent 70%);margin:0 -20px;padding-inline:20px}
.tag{display:inline-block;font:600 .64rem/1 var(--sans);letter-spacing:.04em;text-transform:uppercase;padding:.28rem .45rem;border-radius:5px;background:var(--warn-soft);color:var(--warn);margin-left:6px;vertical-align:1px}
/* annotations: thin leader lines and quiet labels, Stripe-like, in place of stickers */
.anno{position:absolute;display:flex;align-items:center;gap:10px;font-size:.82rem;color:var(--ink-2);opacity:0;transition:opacity .6s}
.anno.on{opacity:1}
.anno .ln{height:1px;width:56px;background:var(--accent)}
.anno .pt{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.anno b{display:block;color:var(--ink);font-weight:600}
.an1{left:calc(100% + 8px);top:96px;width:230px}
.an2{left:calc(100% + 8px);top:250px;width:230px}
.stage{position:relative;margin-right:250px}

/* 2. THREE PRODUCTS: cards with a built fragment on a soft colour field */
.sec{padding-block:clamp(72px,9vw,120px);border-top:1px solid var(--hair-2)}
.sec .lead{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:2rem;align-items:end;margin-bottom:clamp(32px,4vw,52px)}
.sec .lead p{color:var(--ink-2);margin:0;max-width:30em}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.pc{border:1px solid var(--hair);border-radius:16px;background:var(--card);overflow:hidden;display:flex;flex-direction:column;min-width:0;transition:border-color .3s,transform .3s}
.pc:hover{border-color:var(--accent);transform:translateY(-2px)}
.pc .field{position:relative;height:220px;overflow:hidden;padding:24px 22px 0}
.pc .field::before{content:"";position:absolute;inset:0;opacity:.9}
.pc.t .field::before{background:radial-gradient(90% 80% at 100% 0%,rgba(94,224,174,.55),transparent 60%),radial-gradient(70% 70% at 0% 100%,rgba(58,160,255,.25),transparent 60%)}
.pc.r .field::before{background:radial-gradient(90% 80% at 100% 0%,rgba(255,170,90,.5),transparent 60%),radial-gradient(70% 70% at 0% 100%,rgba(94,224,174,.3),transparent 60%)}
.pc.c .field::before{background:radial-gradient(90% 80% at 100% 0%,rgba(150,120,255,.45),transparent 60%),radial-gradient(70% 70% at 0% 100%,rgba(255,120,150,.25),transparent 60%)}
.frag{position:relative;background:var(--app);color:var(--app-ink);border:1px solid var(--app-line);border-radius:10px;box-shadow:var(--shadow);padding:14px;font-size:.76rem}
.frag .fh{display:flex;justify-content:space-between;color:var(--app-muted);font-size:.7rem;margin-bottom:8px}
.bar{height:7px;border-radius:4px;background:var(--app-line);overflow:hidden;margin:4px 0 10px}.bar i{display:block;height:100%;background:linear-gradient(90deg,#5EE0AE,#0E9E6E);border-radius:4px}
.fr{display:flex;justify-content:space-between;padding:5px 0;border-top:1px solid var(--app-line)}
.fr .who{color:var(--link);font-weight:500}.fr .miss{color:var(--warn)}
.pc .body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:.5rem;flex:1}
.pc .kind{font-size:.78rem;color:var(--muted)}
.pc h3{margin:0;font:600 1.2rem/1.2 var(--sans);letter-spacing:-.015em}
.pc p{margin:0;color:var(--ink-2);font-size:.95rem}
.pc .foot{margin-top:auto;padding-top:14px;display:flex;justify-content:space-between;align-items:center;font-size:.86rem;border-top:1px solid var(--hair-2)}
.pc .foot span{color:var(--muted)}
.pc .foot a{font-weight:600;text-decoration:none}
.soon{font:600 .64rem/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--warn);border:1px solid currentColor;border-radius:5px;padding:.25rem .4rem;margin-left:.4rem;vertical-align:2px}

/* 3. THE STORY (Granola): steps on the left, the product view on the right changing with them */
.story{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,5vw,72px)}
.steps{display:flex;flex-direction:column}
.step{min-height:46vh;display:flex;flex-direction:column;justify-content:center;opacity:.32;transition:opacity .5s}
.step.on{opacity:1}
.step .t{font:500 .78rem/1 var(--mono);color:var(--accent);margin-bottom:.8rem}
.step h3{margin:0 0 .6rem;font:600 clamp(1.4rem,2.2vw,1.8rem)/1.2 var(--sans);letter-spacing:-.02em}
.step p{margin:0;color:var(--ink-2);max-width:28em}
/* The heading sits at the top of the steps column, so the product view starts beside it (David, 2026-10-15). */
.story-lead{margin-bottom:clamp(8px,2vw,24px)}
.sticky{position:sticky;top:calc(var(--navh,64px) + 12vh);height:min(62vh,430px);align-self:start}
.view{position:absolute;inset:0;opacity:0;transform:translateY(12px) scale(.985);transition:opacity .6s,transform .6s;pointer-events:none}
.view.on{opacity:1;transform:none}
.view .app{height:100%}
.v-pad{padding:20px}
.src{display:grid;gap:10px}
.src div{display:grid;grid-template-columns:110px 1fr auto;gap:12px;align-items:center;padding:12px 14px;border:1px solid var(--app-line);border-radius:10px}
.src b{font-weight:600}.src span{color:var(--app-muted);font-size:.8rem}.src em{font-style:normal;color:var(--link);font-weight:600;font-size:.78rem}
.big{font:600 1.05rem/1.4 var(--sans);margin:0 0 14px}
.left{border:1px solid var(--app-line);border-radius:12px;padding:16px}
.left .k{font-size:.72rem;color:var(--warn);font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.left h4{margin:.4rem 0 .3rem;font:600 1.05rem/1.3 var(--sans)}
.left p{margin:0;color:var(--app-muted);font-size:.82rem}
.tl{display:grid;gap:0;margin-top:4px}
.tl div{display:grid;grid-template-columns:92px 1fr;gap:12px;padding:10px 0;border-top:1px solid var(--app-line)}
.tl .d{color:var(--app-muted)}
.tl .w{color:var(--app-ink)}.tl .w small{display:block;color:var(--app-muted);font-size:.76rem}
.tl .bind{color:var(--link);font-weight:600}
.draft{border:1px solid var(--app-line);border-radius:12px;overflow:hidden}
.draft .dh{display:grid;gap:6px;padding:12px 14px;background:var(--app-2);font-size:.8rem;color:var(--app-muted)}
.draft .dh b{color:var(--app-ink);font-weight:500}
.draft .db{padding:14px;line-height:1.6}
.draft .df{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;border-top:1px solid var(--app-line);font-size:.78rem;color:var(--app-muted)}
.draft .df i{font-style:normal;background:var(--link);color:var(--app);padding:.35rem .8rem;border-radius:999px;font-weight:600}

/* 4. THE DEEP BAND: what the leader sees, in the demo's numbers */
.deep{background:radial-gradient(60% 80% at 85% 0%,rgba(94,224,174,.16),transparent 60%),linear-gradient(180deg,var(--band),var(--band-2));color:#E8F1ED;padding-block:clamp(80px,10vw,136px);position:relative;overflow:hidden}
.deep .h2{color:#F4F8F6}.deep .h2 span{color:#8FB3A6}
.deep .eyebrow{color:#7FE3BD}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:clamp(40px,5vw,64px);border-top:1px solid rgba(255,255,255,.1)}
.stats div{padding:22px 22px 0 0}
.stats b{display:block;font:500 clamp(1.8rem,3.4vw,2.8rem)/1 var(--sans);letter-spacing:-.03em;background:linear-gradient(180deg,#FFFFFF,#9FD9C2);-webkit-background-clip:text;background-clip:text;color:transparent}
.stats span{display:block;margin-top:.6rem;color:#9FB8AE;font-size:.88rem;max-width:16em}
.deep .fine{margin-top:2.4rem;color:#6F8C81;font-size:.8rem}

/* 5. HOW THEY FIT: a small diagram */
.fit{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.lane{border:1px solid var(--hair);border-radius:16px;padding:26px;background:var(--card)}
.lane h3{margin:0 0 .4rem;font:600 1.1rem/1.3 var(--sans)}
.lane p{margin:0 0 1.4rem;color:var(--ink-2);font-size:.95rem}
.dia{display:flex;align-items:center;flex-wrap:wrap;gap:0}
.dia span{font:500 .78rem/1 var(--mono);padding:.6rem .75rem;border:1px solid var(--hair);border-radius:8px;background:var(--bg)}
.dia span.us{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.dia i{display:block;width:26px;height:1px;background:var(--hair);position:relative}
.dia i::after{content:"";position:absolute;right:0;top:-3px;border:3.5px solid transparent;border-left-color:var(--muted)}

/* 6. START */
.end{padding-block:clamp(80px,10vw,128px);text-align:left}
.end .box{display:flex;justify-content:space-between;align-items:center;gap:2rem;flex-wrap:wrap}
.end p{color:var(--ink-2);margin:.8rem 0 0}

footer{border-top:1px solid var(--hair);padding-block:32px 48px;color:var(--muted);font-size:.88rem}
footer .wrap{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;justify-content:space-between}
footer nav{display:flex;flex-wrap:wrap;gap:.6rem 1.2rem} footer nav a{color:var(--ink-2);text-decoration:none} footer nav a:hover{color:var(--accent)}
footer .brand{display:inline-flex;gap:.5rem;align-items:center;color:var(--ink);text-decoration:none;font:600 1rem/1 var(--sans)}
footer .brand .ai{color:var(--accent)}
footer .tm{flex-basis:100%;margin:0}

@media (max-width:1180px){ .stage{margin-right:0} .anno{display:none} }
@media (max-width:900px){
  .app .cols{grid-template-columns:minmax(0,1fr)}
  .chat{border-right:0;border-bottom:1px solid var(--app-line)}
  .compose{display:none}
  .grid3,.fit,.sec .lead{grid-template-columns:minmax(0,1fr)}
  .story{grid-template-columns:minmax(0,1fr)}
  .sticky{display:none}
  .step{min-height:0;opacity:1;padding-block:22px;border-top:1px solid var(--hair-2)}
  .step .mob{display:block;margin-top:16px}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rail::before,.rail::after{display:none}
}
.step .mob{display:none}

/* ===================== PRODUCT PAGES (Opptain Team, Opptain Rep, Opptain CRM, Get started) ===================== */
.kick{display:inline-flex;align-items:center;gap:.5rem;font:500 .8rem/1 var(--sans);color:var(--ink-2);border:1px solid var(--hair);border-radius:999px;padding:.42rem .75rem .42rem .5rem;margin:0 0 1.2rem;background:color-mix(in srgb,var(--bg) 70%,transparent)}
.kick i{width:.55rem;height:.55rem;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.kick.r i{background:#FFB27A;box-shadow:0 0 0 3px rgba(255,178,122,.2)}.kick.c i{background:#A894FF;box-shadow:0 0 0 3px rgba(168,148,255,.2)}
.hero .fine{margin-top:1.2rem;color:var(--muted);font-size:.84rem}

/* who is speaking: a small face and a name, used on windows, quotes and steps */
.av{flex:none;width:1.9rem;height:1.9rem;border-radius:50%;display:inline-grid;place-items:center;font:600 .7rem/1 var(--sans);color:#0B1F1A;background:var(--accent)}
.av.r{background:#FFB27A}.av.c{background:#A894FF}

/* OPPTAIN TEAM'S HERO: the rep's window and the leader's window, and what passes between them */
.duo{display:grid;grid-template-columns:minmax(0,1fr) 120px minmax(0,1fr);align-items:start;margin-top:clamp(40px,6vw,72px);padding-bottom:clamp(56px,8vw,96px);position:relative;z-index:1}
.duo .side{min-width:0}
.duo .who{display:flex;align-items:center;gap:.6rem;margin:0 0 12px;font-size:.84rem;color:var(--muted)}
.duo .who b{color:var(--ink);font-weight:600}
.duo .app{font-size:.84rem}
.duo .ttl{display:flex;justify-content:space-between;align-items:baseline;font-weight:600;padding:14px 16px 8px}
.duo .ttl small{font-weight:400;color:var(--app-muted)}
.drow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;padding:10px 16px;border-top:1px solid var(--app-line);opacity:0;transform:translateY(6px);transition:opacity .5s,transform .5s,background .6s}
.drow.on{opacity:1;transform:none}
.drow .nm{font-weight:600;color:var(--app-ink)}.drow .nm.lk{color:var(--link)}
.drow .am{font-variant-numeric:tabular-nums;text-align:right}
.drow .sub2{grid-column:1/-1;color:var(--app-muted);font-size:.76rem}
.drow .warn{color:var(--warn)}.drow .ok{color:var(--link)}
.drow.hot{background:linear-gradient(90deg,var(--accent-soft),transparent 80%)}
.drow.lit{background:linear-gradient(90deg,var(--accent-soft),transparent 90%)}
.dfoot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;border-top:1px solid var(--app-line);background:var(--app-2);font-size:.78rem;color:var(--app-muted);min-height:52px}
.press{font-style:normal;font-weight:600;border-radius:999px;padding:.38rem .8rem;border:1px solid var(--link);color:var(--link);transition:background .2s,color .2s,transform .15s;white-space:nowrap}
.press.down{background:var(--link);color:var(--app);transform:scale(.96)}
.toast{display:flex;gap:8px;align-items:center;color:var(--app-ink);opacity:0;transform:translateY(6px);transition:opacity .5s,transform .5s}
.toast.on{opacity:1;transform:none}
.wire{align-self:center;position:relative;height:2px;margin-inline:6px;background:linear-gradient(90deg,transparent,var(--hair) 12%,var(--hair) 88%,transparent)}
.pkt{position:absolute;top:50%;left:0;transform:translate(-50%,-50%);opacity:0;display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none}
.pkt i{width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 5px var(--accent-soft),0 0 18px var(--accent)}
.pkt span{font:500 .7rem/1.2 var(--sans);color:var(--ink-2);white-space:nowrap;position:absolute;top:16px;background:var(--bg);padding:2px 6px;border-radius:6px;border:1px solid var(--hair)}
.pkt.back i{background:#FFB27A;box-shadow:0 0 0 5px rgba(255,178,122,.2),0 0 18px #FFB27A}
.pkt.go.run{animation:goR 1.2s cubic-bezier(.5,0,.3,1) forwards}
.pkt.back.run{animation:goL 1.2s cubic-bezier(.5,0,.3,1) forwards}
@keyframes goR{0%{left:0;opacity:0}15%{opacity:1}85%{opacity:1}100%{left:100%;opacity:0}}
@keyframes goL{0%{left:100%;opacity:0}15%{opacity:1}85%{opacity:1}100%{left:0;opacity:0}}
@media (max-width:900px){
  .duo{grid-template-columns:minmax(0,1fr);gap:18px}
  .wire{height:44px;width:2px;margin:0 auto;background:linear-gradient(180deg,transparent,var(--hair) 15%,var(--hair) 85%,transparent)}
  .pkt{left:50%;top:0}.pkt span{top:auto;left:16px}
  @keyframes goR{0%{top:0;opacity:0}15%{opacity:1}85%{opacity:1}100%{top:100%;opacity:0}}
  @keyframes goL{0%{top:100%;opacity:0}15%{opacity:1}85%{opacity:1}100%{top:0;opacity:0}}
}

/* QUOTES: what someone in the demo company says. Always signed, always marked "demo company". */
.qcard{position:relative;margin:0;padding:clamp(24px,3vw,34px);border-radius:18px;border:1px solid var(--hair);background:var(--card);box-shadow:var(--shadow);isolation:isolate;overflow:hidden}
.qcard::before{content:"";position:absolute;inset:-40% -20% auto auto;width:70%;height:120%;z-index:-1;filter:blur(40px);opacity:.55;background:radial-gradient(50% 50% at 50% 50%,rgba(94,224,174,.5),transparent 70%)}
.qcard.r::before{background:radial-gradient(50% 50% at 50% 50%,rgba(255,170,90,.5),transparent 70%)}
.qcard.c::before{background:radial-gradient(50% 50% at 50% 50%,rgba(150,120,255,.5),transparent 70%)}
.qcard .lbl{font:500 .74rem/1 var(--mono);color:var(--accent);margin:0 0 1rem}
.qcard.r .lbl{color:#E8935A}
:root[data-theme="dark"] .qcard.r .lbl{color:#FFB27A}
.qcard blockquote{margin:0;font:500 clamp(1.15rem,1.9vw,1.45rem)/1.4 var(--sans);letter-spacing:-.015em;color:var(--ink);text-wrap:pretty}
.qcard blockquote::before{content:"\201C";display:block;font:600 3.2rem/.6 var(--sans);color:var(--accent);margin:8px 0 6px}
.qcard.r blockquote::before{color:#FFB27A}.qcard.c blockquote::before{color:#A894FF}
.qcard figcaption{display:flex;align-items:center;gap:.7rem;margin-top:1.3rem;font-size:.84rem;color:var(--muted)}
.qcard figcaption span:not(.av){display:flex;flex-direction:column;line-height:1.3}
.qcard figcaption b{color:var(--ink);font-weight:600}
.qcard figcaption em{margin-left:auto;font-style:normal;font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--hair);border-radius:999px;padding:.25rem .5rem;white-space:nowrap}
.qpair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.qsolo{max-width:820px}
@media (max-width:900px){ .qpair{grid-template-columns:minmax(0,1fr)} }

/* whose step it is, in the scroll story */
.step .t .pv{display:inline-block;font:600 .66rem/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;border-radius:5px;padding:.25rem .45rem;margin-right:.5rem;vertical-align:1px;background:var(--accent-soft);color:var(--accent)}
.step .t .pv.r{background:rgba(255,178,122,.16);color:#D9783C}
:root[data-theme="dark"] .step .t .pv.r{color:#FFB27A}
.step .t .pv.b{background:var(--chip);color:var(--ink-2)}
.tbl{display:grid}
.tbl div{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr) minmax(0,1.2fr);gap:10px;padding:10px 0;border-top:1px solid var(--app-line);align-items:baseline}
.tbl .h{color:var(--app-muted);font-size:.74rem;border-top:0}
.tbl .n{font-weight:600}.tbl .m{font-variant-numeric:tabular-nums}
.tbl .w{color:var(--warn)}.tbl .g{color:var(--link)}
.tbl .me{background:linear-gradient(90deg,var(--accent-soft),transparent 85%);margin-inline:-20px;padding-inline:20px}
.chk{display:grid;gap:8px}
.chk div{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:10px;align-items:start;padding:10px 12px;border:1px solid var(--app-line);border-radius:10px}
.chk .y{color:var(--link);font-weight:700}.chk .x{color:var(--warn);font-weight:700}
.chk small{display:block;color:var(--app-muted);font-size:.76rem}
.chk .m{font-variant-numeric:tabular-nums;font-weight:600}
.sum{display:flex;justify-content:space-between;align-items:baseline;padding:12px 14px;border-radius:10px;background:var(--app-2);margin-bottom:12px}
.sum b{font:600 1.3rem/1 var(--sans);font-variant-numeric:tabular-nums}
.sum span{color:var(--app-muted);font-size:.8rem}
.note2{margin-top:12px;padding:12px 14px;border-radius:10px;border:1px dashed var(--app-line);color:var(--app-muted);font-size:.8rem}
.note2 b{color:var(--app-ink)}

/* WHAT EACH SIDE SEES: two columns, what stays the rep's and what reaches the leader */
.split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.split .lane ul{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.split .lane li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:.6rem;color:var(--ink-2);font-size:.95rem}
.split .lane li::before{content:"✓";color:var(--accent);font-weight:700}
.split .lane.r li::before{color:#E8935A}
.split .lane .hd{display:flex;align-items:center;gap:.6rem;margin-bottom:1rem}
.split .lane .hd h3{margin:0}
@media (max-width:900px){ .split{grid-template-columns:minmax(0,1fr)} }
.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.three .lane p{margin:0}
@media (max-width:900px){ .three{grid-template-columns:minmax(0,1fr)} }

/* THE TEST, on the deep band: the same AI, with and without Opptain */
.vs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,56px);margin-top:clamp(36px,5vw,56px)}
.vs .lab{font-size:.84rem;color:#9FB8AE;margin:0 0 .6rem}
.vs b{display:block;font:500 clamp(2.4rem,5vw,3.6rem)/1 var(--sans);letter-spacing:-.03em;color:#F4F8F6}
.vs b small{font-size:.38em;color:#9FB8AE;letter-spacing:0;margin-left:.4rem;font-weight:400}
.vs .with b{background:linear-gradient(180deg,#FFFFFF,#7FE3BD);-webkit-background-clip:text;background-clip:text;color:transparent}
.dots{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px;max-width:330px}
.dots i{width:14px;height:14px;border-radius:50%;border:1.5px solid rgba(255,255,255,.22)}
.dots i.bad{background:#FF9C76;border-color:#FF9C76}.dots i.good{background:#5EE0AE;border-color:#5EE0AE}
.vs .what{color:#9FB8AE;font-size:.9rem;margin:.9rem 0 0;max-width:30em}
.deep .how{margin-top:2rem;color:#7F9A90;font-size:.84rem;max-width:52em}
.deep .how a{color:#7FE3BD}
@media (max-width:700px){ .vs{grid-template-columns:minmax(0,1fr)} }

/* THE RECORDING */
.seg{display:inline-flex;gap:4px;padding:4px;border:1px solid var(--hair);border-radius:999px;background:var(--bg-2)}
.seg button{font:500 .86rem/1 var(--sans);color:var(--ink-2);background:transparent;border:0;border-radius:999px;padding:.55rem .9rem;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--card);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.2),inset 0 0 0 1px var(--hair)}
.rec{margin:0}
.recbox{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--hair);background:#111;box-shadow:var(--shadow);aspect-ratio:16/10}
.recbox video{display:block;width:100%;height:100%;object-fit:cover;background:#111}
.recbox video[hidden]{display:none}
.recbox .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:.7rem;background:rgba(244,246,245,.96);color:#0B1F1A;border:0;border-radius:999px;padding:.65rem 1.2rem .65rem .65rem;font:600 .95rem/1 var(--sans);cursor:pointer;box-shadow:0 18px 40px -12px rgba(0,0,0,.6)}
.recbox .play .tri{width:2.2rem;height:2.2rem;border-radius:50%;background:#0E7A57;position:relative}
.recbox .play .tri::after{content:"";position:absolute;left:52%;top:50%;transform:translate(-40%,-50%);border:7px solid transparent;border-left:11px solid #fff;border-right:0}
.rec figcaption{margin-top:.9rem;color:var(--muted);font-size:.86rem;max-width:60em}
.rec figcaption b{color:var(--ink-2);font-weight:600}
@media (max-width:760px){ .recbox{aspect-ratio:9/16;max-height:78vh} }

/* QUESTIONS, in the asker's own words, each with one line of proof */
.qa{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(24px,4vw,56px)}
.qa article{padding:24px 0;border-top:1px solid var(--hair)}
.qa h3{margin:0 0 .5rem;font:600 1.12rem/1.35 var(--sans);letter-spacing:-.01em}
.qa p{margin:0;color:var(--ink-2);font-size:.96rem}
.qa .pf{margin-top:.8rem;font-size:.84rem;color:var(--muted);display:flex;gap:.6rem;align-items:baseline}
.qa .pf em{flex:none;font-style:normal;font:600 .62rem/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--hair);border-radius:5px;padding:.25rem .4rem;color:var(--ink-2)}
@media (max-width:900px){ .qa{grid-template-columns:minmax(0,1fr)} }

/* PRICE */
.prices{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:16px;align-items:stretch}
.price{border:1px solid var(--hair);border-radius:18px;padding:clamp(22px,3vw,32px);background:var(--card);display:flex;flex-direction:column;gap:.7rem;position:relative;overflow:hidden;isolation:isolate}
.price.main{border-color:color-mix(in srgb,var(--accent) 45%,var(--hair))}
.price.main::before{content:"";position:absolute;inset:-50% -30% auto auto;width:70%;height:140%;z-index:-1;filter:blur(50px);opacity:.35;background:radial-gradient(50% 50% at 50% 50%,rgba(94,224,174,.6),transparent 70%)}
.price .who{font-size:.82rem;color:var(--muted);margin:0}
.price h3{margin:0;font:600 1.15rem/1.2 var(--sans)}
.price .amt{font:500 clamp(2.4rem,4vw,3rem)/1 var(--sans);letter-spacing:-.03em;margin:.3rem 0 0;color:var(--ink)}
.price .amt small{font-size:.9rem;color:var(--muted);letter-spacing:0;margin-left:.4rem}
.price p{margin:0;color:var(--ink-2);font-size:.95rem}
.price ul{margin:.2rem 0 0;padding:0;list-style:none;display:grid;gap:.45rem;color:var(--ink-2);font-size:.92rem}
.price li::before{content:"✓";color:var(--accent);font-weight:700;margin-right:.55rem}
.price .acts{margin-top:auto;padding-top:1rem;display:flex;gap:.6rem;flex-wrap:wrap}
@media (max-width:900px){ .prices{grid-template-columns:minmax(0,1fr)} }

/* A BRIDGE between the two products */
.bridge{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;border:1px solid var(--hair);border-radius:18px;padding:clamp(20px,3vw,30px);background:var(--bg-2)}
.bridge p{margin:.3rem 0 0;color:var(--ink-2)}
.bridge h3{margin:0;font:600 1.15rem/1.3 var(--sans)}

/* OPPTAIN CRM: a chart and an approval in the panel */
.chart{display:grid;gap:12px;margin-top:6px}
.chart div{display:grid;grid-template-columns:70px minmax(0,1fr) 44px;gap:10px;align-items:center;font-size:.8rem}
.chart .tr{height:9px;border-radius:5px;background:var(--app-line);position:relative;overflow:hidden}
.chart .tr i{position:absolute;inset:0 auto 0 0;border-radius:5px;background:linear-gradient(90deg,#A894FF,#6F5BE0);width:0;transition:width 1s cubic-bezier(.2,.8,.2,1)}
.chart .tr s{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--app-muted);opacity:.7}
.chart.on .tr i{width:var(--w)}
.chart .v{text-align:right;font-variant-numeric:tabular-nums}
.appr{margin-top:16px;border:1px solid var(--app-line);border-radius:12px;padding:14px;display:grid;gap:8px;opacity:0;transform:translateY(8px);transition:opacity .5s,transform .5s}
.appr.on{opacity:1;transform:none}
.appr .k{font-size:.7rem;letter-spacing:.05em;text-transform:uppercase;color:var(--app-muted)}
.appr .ch{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.appr .ch s{color:var(--app-muted)}
.appr .bt{display:flex;gap:8px;margin-top:4px}
.appr .bt i{font-style:normal;font-weight:600;font-size:.78rem;border-radius:999px;padding:.35rem .8rem;border:1px solid var(--app-line)}
.appr .bt i.y{background:#A894FF;border-color:#A894FF;color:#140F2B}
.legend2{display:flex;gap:14px;font-size:.72rem;color:var(--app-muted);margin-top:4px}
.legend2 span::before{content:"";display:inline-block;width:10px;height:3px;border-radius:2px;background:#A894FF;margin-right:6px;vertical-align:middle}
.legend2 span.l::before{width:2px;height:10px;background:var(--app-muted)}

/* GET STARTED: the one form for every request */
.formwrap{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,5vw,64px);align-items:start}
.formwrap .lede{color:var(--ink-2);margin:1rem 0 0}
.ast{text-decoration:none;font-weight:600;margin-left:.1em;color:inherit}
details.fn{margin-top:1.4rem;font-size:.88rem;color:var(--ink-2);border-top:1px solid var(--hair);padding-top:1rem}
details.fn>summary{cursor:pointer;font-weight:600;color:var(--ink)}
details.fn p{margin:.6rem 0 0}
#start-form{display:grid;grid-template-columns:1fr 1fr;gap:1rem 1rem;align-content:start;background:var(--card);border:1px solid var(--hair);border-radius:18px;padding:clamp(18px,3vw,30px);box-shadow:var(--shadow)}
#start-form .full{grid-column:1/-1}
#start-form label{display:grid;gap:.4rem;font:500 .84rem/1.3 var(--sans);color:var(--ink-2)}
#start-form input,#start-form select,#start-form textarea{font:400 1rem/1.3 var(--sans);padding:.72rem .85rem;border-radius:10px;border:1px solid var(--hair);background:var(--bg);color:var(--ink);width:100%}
#start-form input:focus,#start-form select:focus,#start-form textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
#start-form input::placeholder,#start-form textarea::placeholder{color:var(--muted)}
#start-form button[type=submit]{grid-column:1/-1;justify-self:start;border:0;cursor:pointer}
#start-form .btn:disabled{opacity:.4;cursor:not-allowed;filter:grayscale(1)}
#start-form .note{font-size:.86rem;color:var(--muted);margin:0}
#start-form [hidden]{display:none!important}
#start-form .choice{display:flex;gap:.6rem;align-items:flex-start;font:400 .95rem/1.45 var(--sans);color:var(--ink-2)}
#start-form .choice input{width:auto;margin:.25rem 0 0;flex:none}
#start-form .hint{border-left:3px solid var(--accent);padding-left:.8rem}
#start-form .hint .note{color:var(--ink-2)}
#start-form .sent{grid-column:1/-1;border:1px solid var(--hair);border-left:4px solid var(--accent);border-radius:10px;padding:1.2rem 1.3rem;display:grid;gap:.6rem}
#start-form .sent h3{margin:0;font:600 1.5rem/1.2 var(--sans);letter-spacing:-.02em}#start-form .sent p{margin:0;color:var(--ink-2)}
#start-form .sent .btn{justify-self:start;margin-top:.4rem;background:transparent;color:var(--ink);border:1px solid var(--hair);cursor:pointer}
#start-form .status{font-size:.9rem;margin:.2rem 0 0;color:var(--ink-2)}
@media (max-width:900px){ .formwrap{grid-template-columns:minmax(0,1fr)} }
@media (max-width:560px){ #start-form{grid-template-columns:minmax(0,1fr)} }
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* Opptain Rep's hero: the dates arrive one by one, then the forecast date is struck */
.tl.rvl div{opacity:0;transform:translateY(6px);transition:opacity .5s,transform .5s}
.tl.rvl div.on{opacity:1;transform:none}
.tl .strike s{text-decoration:none;transition:color .4s}
.tl .strike.hit s{text-decoration:line-through;text-decoration-color:var(--warn);text-decoration-thickness:2px;color:var(--app-muted)}
.tl .strike .tag{opacity:0;transition:opacity .4s}.tl .strike.hit .tag{opacity:1}
.panel .tl div{grid-template-columns:86px 1fr}
/* Opptain CRM: what it does, one row each */
.feat{display:grid;border-bottom:1px solid var(--hair)}
.feat>div{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:1rem 2rem;padding:22px 0;border-top:1px solid var(--hair);align-items:baseline}
.feat h3{margin:0;font:600 1.1rem/1.3 var(--sans)}
.feat p{margin:0;color:var(--ink-2)}
@media (max-width:700px){ .feat>div{grid-template-columns:minmax(0,1fr);gap:.4rem} }
/* why the test matters, said before the numbers (David, 2026-10-15: "need a value statement of why this matters") */
.deep .why{margin:1.2rem 0 0;color:#C9D8D2;font-size:clamp(1rem,1.3vw,1.12rem);max-width:44em;line-height:1.6}
.deep .tested{margin:clamp(36px,5vw,56px) 0 0;color:#7FE3BD;font-size:.84rem}
.deep .tested+.vs{margin-top:1.2rem}
/* one price on its own: terms on the left, what's included and the buttons on the right */
.price.one{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.5rem clamp(24px,5vw,64px);align-items:start}
.price.one>div{display:flex;flex-direction:column;gap:.7rem}
.price.one ul{margin-top:.4rem}
@media (max-width:900px){ .price.one{grid-template-columns:minmax(0,1fr)} }
/* WHAT THE LEADER GETS: four outcomes, each led by the demo's number */
.outc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.outc article{border:1px solid var(--hair);border-radius:18px;padding:clamp(22px,3vw,32px);background:var(--card);position:relative;overflow:hidden;isolation:isolate}
.outc article::before{content:"";position:absolute;inset:-60% -30% auto auto;width:60%;height:140%;z-index:-1;filter:blur(50px);opacity:.28;background:radial-gradient(50% 50% at 50% 50%,rgba(94,224,174,.6),transparent 70%)}
.outc .num{margin:0 0 .9rem;font:500 clamp(2.2rem,4vw,3rem)/1 var(--sans);letter-spacing:-.03em;background:linear-gradient(180deg,var(--ink),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}
.outc h3{margin:0 0 .5rem;font:600 1.2rem/1.3 var(--sans);letter-spacing:-.01em}
.outc p{margin:0;color:var(--ink-2)}
.outc-foot{margin:1.4rem 0 0;color:var(--muted);font-size:.92rem}
@media (max-width:900px){ .outc{grid-template-columns:minmax(0,1fr)} }
/* Opptain Rep's hero: each item's draft lands in turn */
.row .pills i.dr{opacity:0;transform:translateY(4px);transition:opacity .4s,transform .4s;border-color:var(--link);color:var(--link)}
.row .pills i.dr.on{opacity:1;transform:none}
.row .pills i.dr::before{content:"✎ ";}
.outc.r article::before{background:radial-gradient(50% 50% at 50% 50%,rgba(255,170,90,.6),transparent 70%)}
.outc.r .num{background:linear-gradient(180deg,var(--ink),#FFB27A);-webkit-background-clip:text;background-clip:text;color:transparent}
/* Opptain CRM: the report's definition, where a passed-on fact came from, and the purple outcome cards */
.def{margin:8px 0 0;font-size:.74rem;color:var(--app-muted)}
.appr .src{font-size:.74rem;color:var(--app-muted)}
.outc.c article::before{background:radial-gradient(50% 50% at 50% 50%,rgba(150,120,255,.6),transparent 70%)}
.outc.c .num{background:linear-gradient(180deg,var(--ink),#A894FF);-webkit-background-clip:text;background-clip:text;color:transparent}
/* Opptain CRM: the CRM you have now, and the alternative */
.pains{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.pains article{border:1px solid var(--hair);border-radius:18px;padding:clamp(22px,3vw,30px);background:var(--card)}
.pains .was{margin:0 0 .9rem;font:500 .95rem/1.2 var(--sans);color:var(--muted);text-decoration:line-through;text-decoration-color:#A894FF;text-decoration-thickness:2px}
.pains h3{margin:0 0 .5rem;font:600 1.15rem/1.3 var(--sans)}
.pains p{margin:0;color:var(--ink-2)}
@media (max-width:900px){ .pains{grid-template-columns:minmax(0,1fr)} }

/* ===== AI WITH STRUCTURE (2026-10-15): the layered picture and "same question, different answer". Built for Opptain
   CRM, then carried to Team and Rep (David: "That is the best page I have seen you build … add what you have done here"
   to the other pages). --xc is each page's colour. ===== */
:root{--xc:#A894FF}
.tone-t{--xc:#5EE0AE}.tone-r{--xc:#FFB27A}
.xgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center;padding-bottom:clamp(56px,8vw,104px)}
.xgrid .copy{max-width:none}
/* the stack: three planes seen from above at an angle, the chat on top, the rules, the records */
.xstack{position:relative;z-index:1;min-height:540px}
.xstage{position:absolute;inset:0 150px 0 0}
.xl{position:absolute;left:50%;width:320px;height:210px;margin-left:-160px;border-radius:18px;transform:rotateX(56deg) rotateZ(-40deg);transform-origin:50% 50%;animation:xfloat 7s ease-in-out infinite}
.xl .xin{position:absolute;inset:0;padding:18px;border-radius:inherit}
.xl.l1{top:30px;z-index:3;animation-duration:6s}
.xl.l1 .xin{background:color-mix(in srgb,var(--card) 92%,transparent);border:1px solid color-mix(in srgb,var(--xc) 55%,var(--hair));box-shadow:0 30px 60px -20px rgba(0,0,0,.55),0 0 0 1px color-mix(in srgb,var(--xc) 8%,transparent);display:flex;flex-direction:column;gap:9px}
.xl.l2{top:170px;z-index:2;animation-duration:7.5s;animation-delay:-1.5s}
.xl.l2 .xin{background:color-mix(in srgb,var(--xc) 10%,var(--bg));border:1px solid color-mix(in srgb,var(--xc) 35%,var(--hair));display:grid;grid-template-columns:1fr 1fr;gap:10px;align-content:center;box-shadow:0 0 50px -10px color-mix(in srgb,var(--xc) 35%,transparent)}
.xl.l3{top:310px;z-index:1;animation-duration:9s;animation-delay:-3s}
.xl.l3 .xin{background:var(--bg-2);border:1px solid var(--hair);box-shadow:0 40px 70px -25px rgba(0,0,0,.6)}
@keyframes xfloat{0%,100%{translate:0 0}50%{translate:0 -7px}}
.xb{display:block;font:500 .78rem/1.3 var(--sans);padding:.5rem .75rem;border-radius:12px;max-width:85%;color:var(--ink)}
.xb.u{align-self:flex-end;background:var(--chip);color:var(--ink)}
.xb.a{align-self:flex-start;background:transparent;border:1px solid var(--hair);color:var(--ink-2)}
.xr{display:flex;flex-direction:column;gap:2px;font:600 .82rem/1.2 var(--sans);color:var(--ink);padding:.55rem .7rem;border-radius:10px;background:color-mix(in srgb,var(--bg) 70%,transparent);border:1px solid color-mix(in srgb,var(--xc) 30%,var(--hair))}
.xr small{font:400 .66rem/1.2 var(--sans);color:var(--muted)}
.xgridcells{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);gap:8px}
.xgridcells i{border-radius:6px;background:var(--hair);opacity:.7}
.xgridcells i.hit{animation:xhit 4.5s ease-in-out infinite}
.xgridcells i.hit:nth-child(6){animation-delay:1.5s}.xgridcells i.hit:nth-child(11){animation-delay:3s}
@keyframes xhit{0%,70%,100%{background:var(--hair)}80%,90%{background:var(--xc);box-shadow:0 0 14px var(--xc)}}
/* questions travel down through the rules to the records; answers come back up */
.xline{position:absolute;top:120px;height:300px;width:1px;background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--xc) 50%,transparent) 20%,color-mix(in srgb,var(--xc) 50%,transparent) 80%,transparent);z-index:4}
.xline.a{left:calc(50% - 40px)}.xline.b{left:calc(50% + 46px)}
.xline b{position:absolute;left:-3px;width:7px;height:7px;border-radius:50%;background:color-mix(in srgb,var(--xc) 60%,#fff);box-shadow:0 0 12px var(--xc),0 0 0 4px color-mix(in srgb,var(--xc) 18%,transparent);animation:xdown 3s cubic-bezier(.5,0,.5,1) infinite}
.xline.b b{animation-name:xup;animation-delay:1.5s;background:var(--accent);box-shadow:0 0 12px var(--accent),0 0 0 4px var(--accent-soft)}
@keyframes xdown{0%{top:0;opacity:0}15%{opacity:1}85%{opacity:1}100%{top:100%;opacity:0}}
@keyframes xup{0%{top:100%;opacity:0}15%{opacity:1}85%{opacity:1}100%{top:0;opacity:0}}
.xlabs{position:absolute;right:0;top:0;bottom:0;width:150px}
.xlab{position:absolute;right:0;width:150px;margin:0;font-size:.8rem;line-height:1.4;color:var(--muted);padding-left:12px;border-left:2px solid color-mix(in srgb,var(--xc) 50%,var(--hair))}
.xlab b{display:block;color:var(--ink);font-weight:600;margin-bottom:2px}
.xlab.t1{top:70px}.xlab.t2{top:215px}.xlab.t3{top:355px}
@media (prefers-reduced-motion: reduce){ .xl,.xline b,.xgridcells i.hit{animation:none} }
@media (max-width:1000px){
  .xgrid{grid-template-columns:minmax(0,1fr)}
  .xstack{min-height:0;display:flex;flex-direction:column;align-items:center;gap:8px}
  .xstage{position:relative;inset:auto;width:100%;height:500px}
  .xlabs{position:static;width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
  .xlab{position:static;width:auto}
}
@media (max-width:560px){
  .xstage{height:420px;transform:scale(.8);transform-origin:50% 0;margin-bottom:-6px}
  .xlabs{grid-template-columns:minmax(0,1fr)}
}

/* SAME QUESTION, TWO ANSWERS */
.xtabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.xtabs button{font:500 .9rem/1 var(--sans);color:var(--ink-2);background:transparent;border:1px solid var(--hair);border-radius:999px;padding:.6rem 1rem;cursor:pointer;transition:all .2s}
.xtabs button[aria-selected="true"]{background:color-mix(in srgb,var(--xc) 16%,var(--card));border-color:var(--xc);color:var(--ink)}
.xpair{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:16px;align-items:stretch}
.xpair[hidden]{display:none}
.xpair.on{animation:xin .5s ease}
@keyframes xin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.xs{border-radius:18px;padding:clamp(20px,3vw,28px);display:flex;flex-direction:column;gap:.8rem;min-width:0}
.xs.plain{border:1px dashed var(--hair);background:transparent}
.xs.opp{border:1px solid color-mix(in srgb,var(--xc) 50%,var(--hair));background:var(--card);box-shadow:0 0 0 1px color-mix(in srgb,var(--xc) 6%,transparent),0 30px 80px -40px color-mix(in srgb,var(--xc) 45%,transparent);position:relative;overflow:hidden;isolation:isolate}
.xs.opp::before{content:"";position:absolute;inset:-50% -30% auto auto;width:60%;height:120%;z-index:-1;filter:blur(50px);opacity:.3;background:radial-gradient(50% 50% at 50% 50%,color-mix(in srgb,var(--xc) 70%,transparent),transparent 70%)}
.xk{margin:0;font:600 .72rem/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.xs.opp .xk{color:var(--xc)}
.xq{margin:0;font:500 1rem/1.4 var(--sans);color:var(--ink)}
.xans{border-radius:12px;padding:14px;background:var(--app);border:1px solid var(--app-line);color:var(--app-ink);font-size:.86rem}
.xs.plain .xans{background:transparent;border-style:dashed;color:var(--ink-2);font-style:italic}
.xso{margin:auto 0 0;color:var(--ink-2);font-size:.92rem}
.xs.plain .xso{color:var(--muted)}
.chart.mini{gap:8px;margin:0}
.xans .tl div{grid-template-columns:52px 1fr;padding:8px 0}
.xans .appr{margin:0}
@media (max-width:800px){ .xpair{grid-template-columns:minmax(0,1fr)} }
.hero:has(.xstack) .ribbon{opacity:.45}
.xlab{background:color-mix(in srgb,var(--bg) 55%,transparent);border-radius:0 8px 8px 0;padding:6px 8px 6px 12px}
.lede2{color:var(--ink-2);margin:1rem 0 0;font-size:clamp(1rem,1.3vw,1.12rem);max-width:34em}
.sec .xgrid{padding-bottom:0}
.tone-t .xl.l2 .xin,.tone-r .xl.l2 .xin{background:color-mix(in srgb,var(--xc) 8%,var(--bg))}
.xans .left{margin:0}.xans .draft{margin:0}.xans .sum{margin-bottom:8px}

/* ===== EACH PAGE ITS OWN FORM (2026-10-15, David: "each page needs to have some originality") ===== */
/* Opptain Team: the forecast call's two agendas */
.agenda{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.ag{border-radius:18px;padding:clamp(22px,3vw,30px)}
.ag.old{border:1px dashed var(--hair)}
.ag.new{border:1px solid color-mix(in srgb,var(--accent) 50%,var(--hair));background:var(--card);box-shadow:0 30px 80px -40px color-mix(in srgb,var(--accent) 45%,transparent);position:relative;overflow:hidden;isolation:isolate}
.ag.new::before{content:"";position:absolute;inset:-50% -30% auto auto;width:60%;height:120%;z-index:-1;filter:blur(50px);opacity:.25;background:radial-gradient(50% 50% at 50% 50%,var(--accent),transparent 70%)}
.agk{margin:0 0 1rem;font:600 .72rem/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.ag.new .agk{color:var(--accent)}
.ag ol{list-style:none;margin:0;padding:0}
.ag li{display:grid;grid-template-columns:56px minmax(0,1fr);gap:12px;padding:12px 0;border-top:1px solid var(--hair-2);color:var(--ink)}
.ag li small{display:block;color:var(--muted);font-size:.86rem;margin-top:2px}
.ag .t{font:500 .86rem/1.5 var(--mono);color:var(--muted)}
.ag.old li{color:var(--ink-2)}
.ag.old li.end span:last-child{color:var(--warn)}
.ag.new li.end span:last-child{color:var(--accent);font-weight:600}
@media (max-width:860px){ .agenda{grid-template-columns:minmax(0,1fr)} }
/* Opptain Team: the x-ray of the commit */
.xray{border:1px solid var(--hair);border-radius:18px;padding:clamp(20px,3vw,32px);background:var(--card)}
.xrhead{display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap;margin-bottom:16px;color:var(--muted)}
.xrhead b{font:500 clamp(1.6rem,3vw,2.2rem)/1 var(--sans);letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.xrhead .btn{margin-left:auto;cursor:pointer;background:transparent}
.xrbar{display:flex;height:58px;border-radius:12px;overflow:hidden;gap:3px}
.xrbar span{flex:0 0 var(--w);display:flex;align-items:center;padding:0 14px;font:500 .84rem/1.2 var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.xrbar.top span{background:var(--chip);color:var(--ink)}
.xrbar.top span:nth-child(2){background:color-mix(in srgb,var(--chip) 70%,var(--accent))}
.xrmiss{margin:10px 0 0;font-size:.84rem;color:var(--muted);display:flex;align-items:center;gap:8px}
.xrmiss i{width:40px;height:14px;border-radius:4px;border:1.5px dashed var(--hair)}
.xrbar.under{margin-top:18px;max-height:0;opacity:0;transition:max-height .7s cubic-bezier(.2,.8,.2,1),opacity .6s}
.xrbar.under span{transform:scaleX(.2);transform-origin:left;transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.xrbar.under .ok{background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 70%,#0B1F1A),var(--accent));color:#062018;font-weight:600}
.xrbar.under .no{background:repeating-linear-gradient(-45deg,color-mix(in srgb,var(--warn) 32%,var(--card)) 0 10px,color-mix(in srgb,var(--warn) 18%,var(--card)) 10px 20px);color:var(--ink);font-weight:600;border:1px solid color-mix(in srgb,var(--warn) 55%,transparent)}
.xray.under .xrbar.under{max-height:80px;opacity:1}
.xray.under .xrbar.under span{transform:none}
.xrnotes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:20px;opacity:0;transform:translateY(8px);transition:opacity .6s .4s,transform .6s .4s}
.xray.under .xrnotes{opacity:1;transform:none}
.xrnotes p{margin:0;padding-top:12px;border-top:2px solid color-mix(in srgb,var(--warn) 60%,transparent);color:var(--ink-2);font-size:.92rem}
.xrnotes b{display:block;color:var(--ink);margin-bottom:2px}
@media (max-width:760px){ .xrnotes{grid-template-columns:minmax(0,1fr)} .xrbar span{font-size:.72rem;padding:0 8px} .xrbar{height:48px} }
/* Opptain Rep: the commit call, without and with */
.call{border:1px solid var(--hair);border-radius:18px;background:var(--card);padding:clamp(18px,3vw,30px);max-width:880px}
.callhead{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-bottom:16px;border-bottom:1px solid var(--hair-2);margin-bottom:6px}
.callhead .live{display:inline-flex;align-items:center;gap:8px;font-size:.86rem;color:var(--ink-2)}
.callhead .live i{width:8px;height:8px;border-radius:50%;background:#FF6B5C;box-shadow:0 0 0 4px rgba(255,107,92,.18);animation:blink 1.6s steps(1) infinite}
.callhead .who{display:inline-flex}.callhead .who .av{width:1.7rem;height:1.7rem;font-size:.6rem;margin-left:-6px;border:2px solid var(--card)}
.callhead .seg{margin-left:auto}
.ln{display:grid;grid-template-columns:2.2rem minmax(0,1fr);gap:12px;padding:14px 0}
.ln b{font-weight:600;font-size:.86rem;color:var(--muted)}
.ln p{margin:.2rem 0 0;font-size:clamp(1.02rem,1.5vw,1.18rem);line-height:1.45;color:var(--ink)}
.ln .flag{display:inline-block;margin-top:.6rem;font-size:.8rem;padding:.3rem .6rem;border-radius:7px;background:var(--warn-soft);color:var(--warn)}
.ln .flag.ok{background:var(--accent-soft);color:var(--accent)}
.call .w1,.call[data-mode="with"] .w0{display:none}
.call[data-mode="with"] .w1{display:block}.call[data-mode="with"] .flag.w1{display:inline-block}
.call .ln.me p,.call .ln.me .flag{animation:xin .45s ease}
.call[data-mode="without"] .ln.me p{color:var(--ink-2)}
/* Opptain Rep: what it reads, what it checks, what comes out */
.flow{display:grid;grid-template-columns:minmax(0,1fr) 64px minmax(0,1.1fr) 64px minmax(0,.9fr);align-items:center}
.fsrc{display:grid;gap:10px}
.fsrc span,.fmid span{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border:1px solid var(--hair);border-radius:12px;background:var(--card);font-size:.84rem;color:var(--muted)}
.fsrc b{color:var(--ink);font-weight:600;font-size:.95rem}
.fmid{display:grid;gap:10px;padding:18px;border-radius:18px;border:1px solid color-mix(in srgb,#FFB27A 50%,var(--hair));background:color-mix(in srgb,#FFB27A 7%,var(--bg));box-shadow:0 0 60px -20px rgba(255,178,122,.45)}
.fmid span{color:var(--ink);font-weight:600;font-size:.95rem;background:var(--card)}
.fmid small{font-weight:400;color:var(--muted);font-size:.8rem}
.fk{margin:0 0 4px;font:600 .72rem/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:#E8935A}
:root[data-theme="dark"] .fk{color:#FFB27A}
.fout{padding:22px;border-radius:18px;border:1px solid var(--hair);background:var(--card)}
.fout p{margin:2px 0 14px;color:var(--ink-2);font-size:.92rem}
.fbig{display:block;font:500 clamp(1.8rem,3vw,2.4rem)/1 var(--sans);letter-spacing:-.03em;background:linear-gradient(180deg,var(--ink),#FFB27A);-webkit-background-clip:text;background-clip:text;color:transparent}
.fcon{position:relative;height:120px}
.fcon i{position:absolute;left:8px;right:8px;height:1px;background:linear-gradient(90deg,var(--hair),color-mix(in srgb,#FFB27A 60%,var(--hair)))}
.fcon i:nth-child(1){top:30%}.fcon i:nth-child(2){top:50%}.fcon i:nth-child(3){top:70%}
.fcon i::after{content:"";position:absolute;top:-3px;width:7px;height:7px;border-radius:50%;background:#FFB27A;box-shadow:0 0 10px #FFB27A;animation:fgo 2.4s linear infinite}
.fcon i:nth-child(2)::after{animation-delay:.8s}.fcon i:nth-child(3)::after{animation-delay:1.6s}
@keyframes fgo{0%{left:0;opacity:0}15%{opacity:1}85%{opacity:1}100%{left:100%;opacity:0}}
@media (prefers-reduced-motion: reduce){ .fcon i::after{animation:none;left:50%} }
@media (max-width:900px){
  .flow{grid-template-columns:minmax(0,1fr)}
  .fcon{height:48px}.fcon i{top:8px!important;bottom:8px;width:1px;height:auto;left:auto;right:auto}
  .fcon i:nth-child(1){left:35%}.fcon i:nth-child(2){left:50%}.fcon i:nth-child(3){left:65%}
  .fcon i::after{left:-3px;animation-name:fdown}
  @keyframes fdown{0%{top:0;opacity:0}15%{opacity:1}85%{opacity:1}100%{top:100%;opacity:0}}
}
.xrbar em{font-style:normal}
.xrkey{display:none;margin:10px 0 0;font-size:.8rem;color:var(--muted);align-items:center;gap:6px}
.xrkey i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-left:8px}
.xrkey i:first-child{margin-left:0}
.xrkey i.ok{background:var(--accent)}.xrkey i.no{background:repeating-linear-gradient(-45deg,color-mix(in srgb,var(--warn) 45%,var(--card)) 0 3px,transparent 3px 6px);border:1px solid var(--warn)}
@media (max-width:760px){ .xrbar em{display:none} .xray.under .xrkey{display:flex;flex-wrap:wrap} }