/* ── SYSTMS marketing site — shared design system ───────────────────────── */
:root{
  --bg:#F6F5F1; --bg-sunken:#EFEDE7; --surface:#FFFFFF;
  --ink:#0F0F0E; --ink-2:#3F3D38; --ink-3:#6B6862; --ink-4:#6E6A62;
  --rule:#E9E7E0; --rule-strong:#D2CFC5;
  --accent:#C2553A; --accent-soft:#ECD9D0; --accent-ink:#732B1B;
  --success:#3F6B47; --warn:#B07A13; --info:#335B7F; --danger:#B23A28;
  --sans:'Geist',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'Geist Mono',ui-monospace,monospace; --serif:'Instrument Serif',Georgia,serif;
  --shadow-1:0 1px 2px rgba(15,15,14,.06);
  --shadow-2:0 18px 48px rgba(15,15,14,.1);
  --shadow-3:0 32px 80px rgba(15,15,14,.18);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);overflow-x:hidden;-webkit-font-smoothing:antialiased;line-height:1.5;
  /* The banner's ground: warm paper with a faint square grid, fading in from the right. */
  background-image:linear-gradient(to right,var(--bg) 0%,transparent 55%),linear-gradient(rgba(15,15,14,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(15,15,14,.035) 1px,transparent 1px);
  background-size:100% 100%,116px 116px,116px 116px}
::selection{background:var(--accent-soft);color:var(--accent-ink)}
a{color:inherit;text-decoration:none}
img{max-width:100%}

/* progress + preloader */
.progress{position:fixed;top:0;left:0;height:3px;width:100%;background:var(--accent);transform-origin:0 50%;transform:scaleX(0);z-index:120}
/* ── Intro ────────────────────────────────────────────────────────────────
   The logo assembles, the wordmark settles, a terracotta rule draws, and
   the dark panel parts to show the page. Once per visit; later pages get a
   quick fade. Everything on the first screen waits for it (body.ready). */
.intro{position:fixed;inset:0;z-index:130;pointer-events:none}
.intro-half{position:absolute;left:0;right:0;height:50.5%;background:var(--ink);transition:transform .9s cubic-bezier(.76,0,.24,1)}
.intro-top{top:0}.intro-bot{bottom:0}
.intro.done .intro-top{transform:translateY(-100%)}
.intro.done .intro-bot{transform:translateY(100%)}
.intro-core{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;transition:opacity .35s ease,transform .6s cubic-bezier(.76,0,.24,1)}
.intro.done .intro-core{opacity:0;transform:scale(.96)}
.intro-mark g{fill:#E9E6DD}
.intro-mark .sq{transform-box:fill-box;transform-origin:center;opacity:0;transform:scale(.2) rotate(-45deg);animation:sqin .7s cubic-bezier(.34,1.56,.64,1) forwards}
.intro-mark .sq:nth-child(2){animation-delay:.08s}.intro-mark .sq:nth-child(3){animation-delay:.16s}.intro-mark .sq:nth-child(4){animation-delay:.24s}
.intro-mark .sq:nth-child(1){fill:var(--accent)}
.intro-mark .link{opacity:0;animation:fadein .4s ease .55s forwards}
.intro-word{display:flex;gap:0;font-family:var(--sans);font-weight:600;font-size:clamp(18px,3vw,26px);color:#F4EFE4;letter-spacing:.6em;padding-left:.6em;animation:settle 1s cubic-bezier(.22,1,.36,1) .25s both}
.intro-word span{opacity:0;transform:translateY(10px);animation:rise .5s cubic-bezier(.22,1,.36,1) forwards}
.intro-word span:nth-child(1){animation-delay:.3s}.intro-word span:nth-child(2){animation-delay:.36s}.intro-word span:nth-child(3){animation-delay:.42s}.intro-word span:nth-child(4){animation-delay:.48s}.intro-word span:nth-child(5){animation-delay:.54s}.intro-word span:nth-child(6){animation-delay:.6s}
.intro-line{width:120px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;animation:linedraw .6s cubic-bezier(.65,0,.35,1) .75s forwards}
.intro.quick .intro-core{display:none}
.intro.quick .intro-half{transition-duration:.45s}
@keyframes sqin{to{opacity:1;transform:scale(1) rotate(0)}}
@keyframes fadein{to{opacity:1}}
@keyframes settle{from{letter-spacing:.9em;padding-left:.9em}to{letter-spacing:.32em;padding-left:.32em}}
@keyframes linedraw{to{transform:scaleX(1)}}
/* The first screen holds still until the intro has gone. */
.js body:not(.ready) .hero h1 .w i,.js body:not(.ready) .v3,.js body:not(.ready) .v3-ask,.js body:not(.ready) .v3-bars i,.js body:not(.ready) .hero .rv{animation-play-state:paused}
@keyframes rise{to{opacity:1;transform:translateY(0)}}

/* nav */
nav{position:fixed;top:0;left:0;right:0;z-index:110;display:flex;align-items:center;justify-content:space-between;padding:16px clamp(18px,4vw,48px);transition:background .3s,border-color .3s,padding .3s;border-bottom:1px solid transparent}
nav.scrolled{background:rgba(246,245,241,.86);backdrop-filter:blur(12px);border-color:var(--rule);padding-top:12px;padding-bottom:12px}
.brand{display:flex;align-items:center;gap:10px;flex-shrink:0}
.brand .mark{width:30px;height:30px;border-radius:8px;background:var(--ink);color:var(--bg);display:grid;place-items:center;font-family:var(--mono);font-weight:700;font-size:14px}
.brand img.mark{background:transparent;display:block;object-fit:contain}
.brand b{font-family:var(--sans);font-weight:600;letter-spacing:.32em;font-size:14px}
.navlinks{display:flex;align-items:center;gap:6px}
.navlinks a{font-size:13.5px;font-weight:500;color:var(--ink-2);padding:8px 12px;border-radius:8px;transition:background .2s,color .2s}
.navlinks a:hover{background:var(--bg-sunken);color:var(--ink)}
.navlinks a.active{color:var(--ink);font-weight:600}
@media(max-width:760px){.navlinks .hidesm{display:none}}

.btn{display:inline-flex;align-items:center;gap:8px;border-radius:10px;padding:11px 20px;font-size:14px;font-weight:600;cursor:pointer;border:1px solid var(--rule-strong);background:var(--surface);transition:transform .2s,box-shadow .2s;white-space:nowrap}
.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-2)}
.btn.primary{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.btn.accent{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn.sm{padding:8px 14px;font-size:13px}

/* reveal */
.rv{opacity:0;transform:translateY(32px);transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s}.rv.d4{transition-delay:.32s}.rv.d5{transition-delay:.4s}

/* layout */
section{padding:clamp(64px,10vw,130px) clamp(20px,5vw,56px);max-width:1180px;margin:0 auto;position:relative}
.sec-eyebrow{font-family:var(--sans);font-weight:600;font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-2);margin-bottom:16px}
h2.big{font-family:var(--serif);font-weight:400;font-size:clamp(32px,5.2vw,60px);line-height:1.08;letter-spacing:-.015em}
h2.big em{font-style:italic;color:var(--accent)}
.lead{font-size:clamp(15px,1.7vw,17.5px);color:var(--ink-3);line-height:1.7;max-width:560px;margin-top:18px}
.center{text-align:center;margin-left:auto;margin-right:auto}
.center .lead{margin-left:auto;margin-right:auto}

/* hero */
.hero{min-height:92svh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;position:relative;padding:130px 20px 70px;overflow:hidden}
.grid-bg{position:absolute;inset:0;background-image:linear-gradient(var(--rule) 1px,transparent 1px),linear-gradient(90deg,var(--rule) 1px,transparent 1px);background-size:56px 56px;mask-image:radial-gradient(ellipse 75% 65% at 50% 38%,black 30%,transparent 75%);opacity:.5;pointer-events:none}
.glow{position:absolute;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,var(--accent-soft),transparent 65%);filter:blur(50px);opacity:.8;pointer-events:none;animation:drift 14s ease-in-out infinite alternate}
@keyframes drift{from{transform:translate(-8%,-4%) scale(1)}to{transform:translate(8%,6%) scale(1.12)}}
.eyebrow{font-family:var(--sans);font-weight:600;font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-2);display:inline-flex;align-items:center;gap:10px;position:relative;z-index:1}
.eyebrow::before,.eyebrow::after{content:"";width:34px;height:1px;background:var(--rule-strong)}
.hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(46px,8.5vw,116px);line-height:1.02;letter-spacing:-.02em;margin:24px 0 4px;position:relative;z-index:1}
/* The mask each word slides up out of.
   overflow:hidden clips on BOTH axes, and an italic serif glyph leans past the
   right edge of its own advance width — so the tail of the "e" in "the" was
   being shaved off flat. The mask has to stay for the reveal, so the box is
   widened by the overhang and pulled back by the same amount: the letter has
   room, and the word spacing is unchanged. */
.hero h1 .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding:.06em .13em .2em;margin:-.06em -.13em -.2em}
.hero h1 .w i{display:inline-block;font-style:normal;transform:translateY(110%);animation:wordup .9s cubic-bezier(.22,1,.36,1) forwards}
.hero h1 .acc i{font-style:italic;color:var(--accent)}
@keyframes wordup{to{transform:translateY(0)}}
.hero p.sub{max-width:580px;font-size:clamp(15px,1.8vw,18px);color:var(--ink-3);line-height:1.65;margin:22px auto 32px;position:relative;z-index:1}
.hero .ctas{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;position:relative;z-index:1}
.scroll-hint{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);font-family:var(--sans);font-weight:600;font-size:10px;letter-spacing:.24em;color:var(--ink-4);text-transform:uppercase}
.scroll-hint::after{content:"";display:block;width:1px;height:32px;background:var(--ink-4);margin:8px auto 0;animation:lineDrop 1.6s ease-in-out infinite}
@keyframes lineDrop{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* page header (inner pages) */
.pagehead{padding:150px clamp(20px,5vw,56px) 40px;max-width:1180px;margin:0 auto;text-align:center}
.pagehead h1{font-family:var(--serif);font-weight:400;font-size:clamp(40px,6.5vw,80px);line-height:1.05;letter-spacing:-.02em}
.pagehead h1 em{font-style:italic;color:var(--accent)}

/* marquee */
.marquee{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);background:var(--surface);overflow:hidden;padding:18px 0;white-space:nowrap}
.marquee .track{display:inline-flex;animation:scrollx 30s linear infinite}
.marquee span{font-family:var(--sans);font-weight:600;font-size:13px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-3);padding:0 26px;display:inline-flex;align-items:center;gap:26px}
.marquee b{color:var(--accent);font-weight:400}
@keyframes scrollx{to{transform:translateX(-50%)}}

/* cards / grids */
.card{background:var(--surface);border:1px solid var(--rule);border-radius:16px;box-shadow:var(--shadow-1)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:860px){.grid3{grid-template-columns:1fr}.grid2{grid-template-columns:1fr}}
.feature{padding:26px;border-radius:16px;background:var(--surface);border:1px solid var(--rule);transition:transform .3s,box-shadow .3s,border-color .3s}
.feature:hover{transform:translateY(-5px);box-shadow:var(--shadow-2);border-color:var(--rule-strong)}
.feature .ic{width:42px;height:42px;border-radius:11px;background:var(--accent-soft);color:var(--accent-ink);display:grid;place-items:center;font-size:19px;margin-bottom:16px}
.feature h3{font-size:17px;font-weight:700;margin-bottom:8px;letter-spacing:-.01em}
.feature p{font-size:14px;color:var(--ink-3);line-height:1.6}

/* split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,80px);align-items:center}
@media(max-width:880px){.split{grid-template-columns:1fr;gap:36px}.split .order-img{order:-1}}
.check-list{list-style:none;margin-top:24px;display:flex;flex-direction:column;gap:12px}
.check-list li{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:var(--ink-2);line-height:1.55}
.check-list .tick{width:20px;height:20px;border-radius:6px;background:var(--success);color:#fff;display:grid;place-items:center;flex-shrink:0;font-size:11px;margin-top:1px}

/* generic mock surface */
.mock{background:var(--surface);border:1px solid var(--rule);border-radius:18px;box-shadow:var(--shadow-3);overflow:hidden}
.mock .topbar{display:flex;align-items:center;gap:8px;padding:13px 16px;border-bottom:1px solid var(--rule)}
.mock .topbar .dot{width:9px;height:9px;border-radius:50%;background:var(--rule-strong)}
.mock .topbar .ttl{margin-left:8px;font-family:var(--sans);font-weight:600;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-4)}
.pill{display:inline-flex;align-items:center;gap:6px;font-family:var(--sans);font-weight:600;font-size:9px;letter-spacing:.24em;text-transform:uppercase;border:1px solid var(--rule);border-radius:99px;padding:3px 9px;color:var(--ink-3);background:var(--surface)}
.pill.s{border-color:transparent;background:rgba(63,107,71,.1);color:var(--success)}
.pill .dot{width:6px;height:6px;border-radius:50%;background:var(--success);animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{50%{opacity:.4}}

/* KPI tiles */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media(max-width:760px){.kpis{grid-template-columns:1fr 1fr}}
.kpi{background:var(--surface);border:1px solid var(--rule);border-radius:13px;padding:16px}
.kpi .l{font-family:var(--sans);font-weight:600;font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-4)}
.kpi .v{font-family:var(--mono);font-size:26px;font-weight:700;margin-top:6px;letter-spacing:-.02em}
.kpi .v.acc{color:var(--accent)}.kpi .v.ok{color:var(--success)}

/* bars */
.bars{display:flex;flex-direction:column;gap:15px}
.bar-row .top{display:flex;justify-content:space-between;font-size:13px;margin-bottom:6px}
.bar-row .top b{font-family:var(--mono);font-weight:600}
.bar-row .tr{height:9px;border-radius:99px;background:var(--bg-sunken);overflow:hidden}
.bar-row .fl{height:100%;border-radius:99px;width:0;transition:width 1.4s cubic-bezier(.22,1,.36,1)}
.in .bar-row:nth-child(1) .fl{transition-delay:.1s}.in .bar-row:nth-child(2) .fl{transition-delay:.25s}.in .bar-row:nth-child(3) .fl{transition-delay:.4s}.in .bar-row:nth-child(4) .fl{transition-delay:.55s}.in .bar-row:nth-child(5) .fl{transition-delay:.7s}

/* organ grid (business doctor) */
.organs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media(max-width:760px){.organs{grid-template-columns:1fr 1fr}}
.organ{background:var(--surface);border:1px solid var(--rule);border-radius:13px;padding:15px}
.grade{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;font-family:var(--mono);font-weight:700;font-size:14px;color:#fff}
.grade.A{background:var(--success)}.grade.B{background:var(--info)}.grade.C{background:var(--warn)}.grade.D{background:var(--danger)}
.organ .nm{font-weight:600;font-size:13px;margin-top:8px}
.organ .vt{font-family:var(--mono);font-size:18px;font-weight:600;margin-top:4px}

/* crew board */
.crew{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--rule);opacity:0;transform:translateX(-16px);transition:opacity .6s,transform .6s}
.in .crew{opacity:1;transform:none}
.in .crew:nth-child(2){transition-delay:.1s}.in .crew:nth-child(3){transition-delay:.2s}.in .crew:nth-child(4){transition-delay:.3s}.in .crew:nth-child(5){transition-delay:.4s}
.crew .av{width:32px;height:32px;border-radius:9px;background:var(--accent-soft);color:var(--accent-ink);display:grid;place-items:center;font-family:var(--mono);font-weight:600;font-size:12px;flex-shrink:0}
.crew .nm{font-weight:600;font-size:13px}.crew .jb{font-size:11px;color:var(--ink-4)}
.crew .hrs{margin-left:auto;font-family:var(--mono);font-size:13px;font-weight:700}

/* chat */
.chat{display:flex;flex-direction:column;gap:11px}
.bubble{padding:12px 15px;border-radius:15px;font-size:13.5px;line-height:1.55;opacity:0;transform:translateY(12px);transition:opacity .5s,transform .5s}
.in .bubble{opacity:1;transform:none}
.bubble.user{align-self:flex-end;background:var(--ink);color:var(--bg);border-bottom-right-radius:4px;max-width:80%}
.bubble.ai{align-self:flex-start;background:var(--bg-sunken);border:1px solid var(--rule);border-bottom-left-radius:4px;max-width:88%}
.in .bubble:nth-child(2){transition-delay:.45s}.in .bubble:nth-child(3){transition-delay:.9s}
.bubble .who{font-family:var(--sans);font-weight:600;font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:var(--accent);margin-bottom:4px}

/* stats band */
.statband{background:var(--ink);color:var(--bg);max-width:none;padding:clamp(64px,9vw,104px) clamp(20px,5vw,56px)}
.statband .inner{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:clamp(26px,5vw,52px)}
.stat .n{font-family:var(--serif);font-size:clamp(44px,6vw,80px);line-height:1;color:var(--bg)}
.stat .n em{font-style:italic;color:var(--accent)}
.stat .l{font-family:var(--sans);font-weight:600;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:rgba(246,245,241,.74);margin-top:12px}

/* portal cards (home) */
.portals{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:880px){.portals{grid-template-columns:1fr}}
.portal{display:block;background:var(--surface);border:1px solid var(--rule);border-radius:18px;padding:28px;transition:transform .3s,box-shadow .3s,border-color .3s}
.portal:hover{transform:translateY(-6px);box-shadow:var(--shadow-2);border-color:var(--accent)}
.portal .tag{font-family:var(--sans);font-weight:600;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--accent)}
.portal h3{font-family:var(--serif);font-size:28px;font-weight:400;margin:8px 0 10px;letter-spacing:-.01em}
.portal p{font-size:14px;color:var(--ink-3);line-height:1.6;margin-bottom:16px}
.portal .go{font-size:13px;font-weight:600;color:var(--accent-ink);display:inline-flex;align-items:center;gap:6px}

/* chips */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px;justify-content:center}
.chip{font-family:var(--mono);font-size:12px;letter-spacing:.05em;border:1px solid var(--rule-strong);background:var(--surface);border-radius:99px;padding:9px 18px;color:var(--ink-2);transition:transform .25s,border-color .25s}
.chip:hover{transform:translateY(-3px);border-color:var(--accent)}

/* pricing */
.prices{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}
@media(max-width:880px){.prices{grid-template-columns:1fr}}
.price{background:var(--surface);border:1px solid var(--rule);border-radius:18px;padding:30px;display:flex;flex-direction:column}
.price.feat{border-color:var(--ink);box-shadow:var(--shadow-2);position:relative}
.price.feat::before{content:"Most popular";position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--accent);color:#fff;font-family:var(--sans);font-weight:600;font-size:9px;letter-spacing:.24em;text-transform:uppercase;padding:4px 12px;border-radius:99px}
.price .pname{font-family:var(--sans);font-weight:600;font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-4)}
.price .amt{font-family:var(--serif);font-size:54px;line-height:1;margin:14px 0 4px}
.price .amt small{font-family:var(--sans);font-size:14px;color:var(--ink-4)}
.price ul{list-style:none;margin:20px 0;display:flex;flex-direction:column;gap:10px;flex:1}
.price li{font-size:14px;color:var(--ink-2);display:flex;gap:10px;align-items:flex-start}
.price li::before{content:"✓";color:var(--success);font-weight:700;flex-shrink:0}

/* finale + footer */
.finale{text-align:center;max-width:980px}
.finale h2{font-family:var(--serif);font-weight:400;font-size:clamp(38px,6.5vw,86px);line-height:1.06;letter-spacing:-.02em}
.finale h2 em{font-style:italic;color:var(--accent)}
footer{border-top:1px solid var(--rule);padding:40px clamp(20px,5vw,56px) max(48px, calc(env(safe-area-inset-bottom, 0px) + 40px));background:var(--surface)}
.footin{max-width:1180px;margin:0 auto;display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:flex-start}
.footcol h5{font-family:var(--sans);font-weight:600;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-4);margin-bottom:12px}
.footcol a{display:block;font-size:13.5px;color:var(--ink-2);margin-bottom:8px;transition:color .2s}
.footcol a:hover{color:var(--accent-ink)}
.footbar{max-width:1180px;margin:28px auto 0;padding-top:18px;border-top:1px solid var(--rule);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-family:var(--sans);font-weight:600;font-size:11px;letter-spacing:.24em;color:var(--ink-4);text-transform:uppercase}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .rv{opacity:1;transform:none}html{scroll-behavior:auto}
}

/* job-card mock (timer + tasks + signature) */
.timer-card{margin:14px;border-radius:14px;background:var(--ink);color:#fff;padding:16px}
.timer-card .lbl{font-family:var(--sans);font-weight:600;font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.55);display:flex;align-items:center;gap:6px}
.timer-card .lbl .dot{width:7px;height:7px;border-radius:50%;background:#4ade80;animation:pulse 1.4s ease-in-out infinite}
.timer-card .time{font-family:var(--mono);font-size:38px;font-weight:700;letter-spacing:-.02em;margin-top:6px}
.task{display:flex;align-items:center;gap:11px;margin:0 14px 8px;padding:11px 13px;border:1.5px solid var(--rule);border-radius:11px;background:var(--surface);font-size:13px;transition:border-color .4s,background .4s}
.task .bx{width:18px;height:18px;border-radius:6px;border:1.5px solid var(--rule-strong);display:grid;place-items:center;color:#fff;font-size:10px;transition:background .35s,border-color .35s;flex-shrink:0}
.task.done{border-color:var(--success);background:rgba(63,107,71,.06)}
.task.done .bx{background:var(--success);border-color:var(--success)}
.task.done span{text-decoration:line-through;color:var(--ink-3)}
.sig{margin:6px 14px 14px;padding:12px;border:1.5px dashed var(--rule-strong);border-radius:11px;background:var(--surface)}
.sig .cap{font-family:var(--sans);font-weight:600;font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-4);margin-bottom:4px}
.sig svg path{stroke:var(--ink);stroke-width:2;fill:none;stroke-linecap:round;stroke-dasharray:420;stroke-dashoffset:420}
[data-sign].live svg path{animation:draw 2.4s ease-in-out .4s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.float-card{position:absolute;background:var(--surface);border:1px solid var(--rule);border-radius:14px;box-shadow:var(--shadow-2);padding:14px 16px;text-align:left;z-index:1;animation:bob 6s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0) rotate(var(--tilt,0deg))}50%{transform:translateY(-12px) rotate(var(--tilt,0deg))}}
@media(max-width:920px){.float-card{display:none}}

/* ── index-page motion pack ─────────────────────────────────────────────── */
/* hero exit parallax target */
.hero-inner{position:relative;z-index:1;will-change:transform,opacity}
/* dual marquee, slight banner tilt */
.marqwrap{transform:rotate(-1.4deg);margin:34px -2% 10px;width:104%}
.marqwrap .marquee+.marquee{border-top:none}
.marquee.rev .track{animation-direction:reverse;animation-duration:34s}
/* word-lit manifesto */
.wordlit{font-family:var(--serif);font-size:clamp(28px,4.6vw,56px);line-height:1.3;letter-spacing:-.01em;max-width:920px;margin:0 auto}
.wordlit span{color:var(--rule-strong);transition:color .3s ease}
.wordlit span.on{color:var(--ink)}
.wordlit span.em{font-style:italic}
.wordlit span.em.on{color:var(--accent)}
/* giant scroll-driven line */
.giantline{max-width:none;padding:clamp(40px,6vw,80px) 0;overflow:hidden;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);background:var(--surface)}
.giant{font-family:var(--serif);font-style:italic;font-size:clamp(80px,14vw,190px);line-height:1;white-space:nowrap;color:transparent;-webkit-text-stroke:1.2px var(--rule-strong);will-change:transform}
.giant b{font-weight:400;color:var(--accent);-webkit-text-stroke:0}
/* 3d tilt cards */
.tilt{transform-style:preserve-3d;will-change:transform;transition:box-shadow .3s,border-color .3s}
.tilt .tin{transform:translateZ(28px)}
/* chip marquees */
.chipmarq{overflow:hidden;white-space:nowrap;padding:6px 0}
.chipmarq .track{display:inline-flex;gap:10px;animation:scrollx 26s linear infinite;padding-right:10px}
.chipmarq.rev .track{animation-direction:reverse;animation-duration:31s}
.chipmarq .chip{flex-shrink:0}
/* float-in pop for stats */
.statband .stat{transform:translateY(34px) scale(.96)}
.statband .stat.in{transform:none}
@media (prefers-reduced-motion:reduce){
  .wordlit span{color:var(--ink)}.wordlit span.em{color:var(--accent)}
}

/* ── pitch sections ─────────────────────────────────────────────────────── */
/* data→insight→action loop */
.loop{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:40px;position:relative}
@media(max-width:880px){.loop{grid-template-columns:1fr 1fr}}
.loopstep{background:var(--surface);border:1px solid var(--rule);border-radius:14px;padding:20px 16px;text-align:center;position:relative}
.loopstep .num{font-family:var(--sans);font-weight:600;font-size:10px;letter-spacing:.24em;color:var(--accent);text-transform:uppercase}
.loopstep h4{font-family:var(--serif);font-size:21px;font-weight:400;margin:8px 0 6px}
.loopstep p{font-size:12.5px;color:var(--ink-3);line-height:1.5}
.loopstep::after{content:"→";position:absolute;right:-13px;top:50%;transform:translateY(-50%);color:var(--accent);font-size:16px;z-index:1}
.loopstep:last-child::after{content:"↺"}
@media(max-width:880px){.loopstep::after{display:none}}
/* differentiator contrast */
.contrast{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:38px}
@media(max-width:820px){.contrast{grid-template-columns:1fr}}
.con{border-radius:18px;padding:34px 30px}
.con .who{font-family:var(--sans);font-weight:600;font-size:10px;letter-spacing:.24em;text-transform:uppercase;margin-bottom:14px}
.con .q{font-family:var(--serif);font-size:clamp(24px,3vw,34px);line-height:1.25;letter-spacing:-.01em}
.con.them{background:var(--bg-sunken);border:1px solid var(--rule);color:var(--ink-3)}
.con.them .who{color:var(--ink-4)}
.con.us{background:var(--ink);color:var(--bg)}
.con.us .who{color:var(--accent)}
.con.us .q em{font-style:italic;color:var(--accent)}
/* audience chips */
.aud{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:26px}
.aud .chip{font-size:13px;padding:10px 20px}
/* advisor quote card */
.advisor{max-width:680px;margin:36px auto 0;background:var(--surface);border:1px solid var(--rule);border-radius:18px;padding:26px 28px;box-shadow:var(--shadow-2);text-align:left}
.advisor .who{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.advisor .ai-mark{width:34px;height:34px;border-radius:9px;background:var(--ink);color:var(--bg);display:grid;place-items:center;font-size:15px}
.advisor .nm{font-weight:700;font-size:13.5px}
.advisor .rl{font-family:var(--sans);font-weight:600;font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-4)}
.advisor .q{font-family:var(--serif);font-size:clamp(17px,2vw,21px);line-height:1.5;color:var(--ink)}
.advisor .q em{font-style:italic;color:var(--accent)}

/* ── in-website app preview (pixel-match of the real SYSTMS dashboard) ──── */
.appwin{max-width:1180px;margin:0 auto;border-radius:16px;overflow:hidden;box-shadow:var(--shadow-3);border:1px solid var(--rule);background:var(--surface)}
.appwin .chrome{display:flex;align-items:center;gap:8px;padding:11px 14px;background:var(--bg-sunken);border-bottom:1px solid var(--rule)}
.appwin .chrome .tl{width:11px;height:11px;border-radius:50%}
.appwin .chrome .tl.r{background:#ff5f57}.appwin .chrome .tl.y{background:#febc2e}.appwin .chrome .tl.g{background:#28c840}
.appwin .url{margin-left:14px;flex:1;max-width:420px;background:var(--surface);border:1px solid var(--rule);border-radius:8px;font-family:var(--mono);font-size:11px;color:var(--ink-3);padding:5px 12px;text-align:center}
.appwin .shell{display:grid;grid-template-columns:210px 1fr;min-height:560px}
@media(max-width:760px){.appwin .shell{grid-template-columns:1fr}.appwin .side{display:none}}
/* sidebar */
.appwin .side{background:var(--surface);border-right:1px solid var(--rule);padding:14px 12px;display:flex;flex-direction:column;gap:4px}
.appwin .side .co{display:flex;align-items:center;gap:9px;padding:8px 8px 12px;border-bottom:1px solid var(--rule);margin-bottom:8px}
.appwin .side .co .mk{width:28px;height:28px;border-radius:7px;background:var(--ink);color:var(--bg);display:grid;place-items:center;font-family:var(--mono);font-weight:700;font-size:12px}
.appwin .side .co b{font-size:12.5px;font-weight:600;line-height:1.1}
.appwin .side .co span{font-family:var(--mono);font-size:9px;color:var(--ink-4);letter-spacing:.04em}
.appwin .navg{font-family:var(--sans);font-weight:600;font-size:8.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-4);padding:10px 8px 4px}
.appwin .ni{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:8px;font-size:12.5px;color:var(--ink-2);cursor:default}
.appwin .ni .i{width:14px;height:14px;border-radius:4px;background:var(--rule-strong);flex-shrink:0}
.appwin .ni.on{background:var(--ink);color:var(--bg);font-weight:600}
.appwin .ni.on .i{background:var(--bg)}
/* main */
.appwin .main{background:var(--bg);display:flex;flex-direction:column;min-width:0}
.appwin .top{display:flex;align-items:center;gap:12px;padding:13px 20px;border-bottom:1px solid var(--rule);background:rgba(246,245,241,.7)}
.appwin .crumb{font-family:var(--mono);font-size:11px;color:var(--ink-3);letter-spacing:.02em}
.appwin .crumb b{color:var(--ink)}
.appwin .search{margin-left:auto;background:var(--surface);border:1px solid var(--rule);border-radius:8px;font-size:11px;color:var(--ink-4);padding:6px 14px;width:200px}
.appwin .ava{width:26px;height:26px;border-radius:7px;background:var(--accent-soft);color:var(--accent-ink);display:grid;place-items:center;font-family:var(--mono);font-weight:600;font-size:11px}
.appwin .body{padding:22px;display:flex;flex-direction:column;gap:18px;overflow:hidden}
.appwin .stamp{display:flex;align-items:center;gap:8px;font-family:var(--sans);font-weight:600;font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-4)}
.appwin .stamp .lv{width:7px;height:7px;border-radius:50%;background:var(--success);animation:pulse 1.6s infinite}
.appwin h2.greet{font-family:var(--serif);font-size:clamp(24px,3.2vw,38px);font-weight:400;line-height:1.1;letter-spacing:-.01em}
.appwin h2.greet em{font-style:italic;color:var(--accent)}
.appwin .subln{font-size:12.5px;color:var(--ink-3)}
.appwin .akpis{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
@media(max-width:980px){.appwin .akpis{grid-template-columns:repeat(2,1fr)}}
.appwin .akpi{background:var(--surface);border:1px solid var(--rule);border-radius:12px;padding:13px 14px}
.appwin .akpi .l{font-family:var(--sans);font-weight:600;font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-4)}
.appwin .akpi .v{font-family:var(--mono);font-size:22px;font-weight:700;margin-top:5px;letter-spacing:-.02em}
.appwin .akpi .v.acc{color:var(--accent)}.appwin .akpi .v.ok{color:var(--success)}
.appwin .akpi .t{font-size:9.5px;margin-top:3px;color:var(--success)}
.appwin .akpi .t.dn{color:var(--warn)}
.appwin .arow{display:grid;grid-template-columns:1.1fr 1fr;gap:14px;align-items:start}
@media(max-width:980px){.appwin .arow{grid-template-columns:1fr}}
.appwin .acard{background:var(--surface);border:1px solid var(--rule);border-radius:12px;overflow:hidden}
.appwin .acard .h{display:flex;align-items:center;justify-content:space-between;padding:12px 15px;border-bottom:1px solid var(--rule);font-weight:600;font-size:12.5px}
.appwin .acard .h .meta{font-family:var(--mono);font-size:10px;color:var(--ink-4);font-weight:400}
.appwin .acard .pad{padding:14px 15px;display:flex;flex-direction:column;gap:11px}
.appwin .pbar .pt{display:flex;justify-content:space-between;font-size:12px;margin-bottom:5px}
.appwin .pbar .pt b{font-family:var(--mono);font-weight:600;color:var(--ink-3)}
.appwin .pbar .ptr{height:7px;border-radius:99px;background:var(--bg-sunken);overflow:hidden}
.appwin .pbar .pfl{height:100%;border-radius:99px}
.appwin .arow2{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--rule);font-size:12px}
.appwin .arow2:last-child{border-bottom:none}
.appwin .arow2 .nm{font-weight:500}.appwin .arow2 .cs{color:var(--ink-4);font-size:10.5px}
.appwin .apill{font-family:var(--sans);font-weight:600;font-size:8.5px;letter-spacing:.24em;text-transform:uppercase;border-radius:99px;padding:2px 8px;margin-left:auto;flex-shrink:0}
.appwin .apill.warn{background:rgba(176,122,19,.12);color:var(--warn)}
.appwin .apill.dgr{background:rgba(178,58,40,.12);color:var(--danger)}
.appwin .focus{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media(max-width:980px){.appwin .focus{grid-template-columns:1fr}}
.appwin .fcard{background:var(--surface);border:1px solid var(--rule);border-radius:12px;padding:14px}
.appwin .fcard .fi{font-size:18px;margin-bottom:7px}
.appwin .fcard b{font-size:12.5px;display:block;margin-bottom:4px}
.appwin .fcard p{font-size:11px;color:var(--ink-3);line-height:1.5}

/* ── home v2: the staff you can switch on ───────────────────────────────── */
.hero-split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,72px);align-items:center;text-align:left;max-width:1180px;margin:0 auto;padding:130px clamp(20px,5vw,56px) 90px}
.hero-split .hero-copy{text-align:left}
.hero-split .eyebrow::before{display:none}
.hero-split .hero-inner{margin:0}
.hero-split h1{font-size:clamp(44px,6.6vw,92px)}
.hero-split p.sub{margin:22px 0 28px}
.hero-split .ctas{justify-content:flex-start}
.hero-note{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--ink-4);margin-top:16px;position:relative;z-index:1}
@media(max-width:920px){.hero-split{grid-template-columns:1fr;padding-top:110px;text-align:center}.hero-split .hero-copy,.hero-split .hero-inner{text-align:center}.hero-split .ctas{justify-content:center}}
.hero-card{position:relative;z-index:1;display:flex;flex-direction:column;gap:10px}
/* the ask-me-first card, as the app draws it */
.hold{background:var(--surface);border:1px solid rgba(176,122,19,.34);border-radius:16px;box-shadow:var(--shadow-3);overflow:hidden}
.hold-head{display:flex;align-items:center;gap:8px;padding:11px 16px;background:rgba(176,122,19,.09);border-bottom:1px solid rgba(176,122,19,.24);font-size:13px;font-weight:600;color:var(--ink)}
.hold-head .shield{font-size:13px}
.hold-body{padding:16px 18px;display:flex;flex-direction:column;gap:8px}
.hold-name{font-weight:700;font-size:15px}
.hold-about{font-size:12.5px;color:var(--ink-3)}
.hold-wants{font-size:13px;margin-top:2px}
.hold-draft{background:var(--bg-sunken);border-radius:9px;padding:10px 12px;font-size:12.5px;line-height:1.55;color:var(--ink-2);display:flex;flex-direction:column;gap:4px}
.hold-why{font-size:12px;color:var(--ink-3);font-style:italic}
.hold-acts{display:flex;gap:8px;margin-top:6px}
.hold-acts .btn{cursor:default}
.hero-done{background:var(--surface);border:1px solid var(--rule);border-radius:12px;padding:10px 14px;box-shadow:var(--shadow-1)}
/* activity lines */
.feed{display:flex;flex-direction:column}
.feedline{display:grid;grid-template-columns:44px auto 1fr;gap:8px 10px;align-items:baseline;padding:10px 16px;border-bottom:1px solid var(--rule);font-size:12.5px;line-height:1.5;color:var(--ink-2)}
.feed .feedline:last-child{border-bottom:none}
.hero-done .feedline{padding:0;border:none;grid-template-columns:44px auto 1fr}
.feedline .t{font-family:var(--mono);font-size:11px;color:var(--ink-4)}
.feedline .d{font-family:var(--sans);font-weight:600;font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;white-space:nowrap}
.feedline .d.ok{color:var(--success)}.feedline .d.hold{color:var(--warn)}.feedline .d.off{color:var(--ink-4)}
.feedline .m{min-width:0}
.feedline b{color:var(--ink);font-weight:600}
.feedline i{display:block;grid-column:3;font-style:italic;color:var(--ink-3);font-size:12px;margin-top:2px}
/* receipt note under the stat band */
.statnote{max-width:640px;margin:36px auto 0;text-align:center;font-size:13px;line-height:1.6;color:rgba(246,245,241,.55)}
/* the staff grid */
.staffgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px}
@media(max-width:980px){.staffgrid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.staffgrid{grid-template-columns:1fr}}
.job{background:var(--surface);border:1px solid var(--rule);border-radius:18px;padding:24px 24px 18px;display:flex;flex-direction:column;gap:10px;transition:transform .3s,box-shadow .3s,border-color .3s}
.job:hover{transform:translateY(-5px);box-shadow:var(--shadow-2);border-color:var(--rule-strong)}
.job-tag{display:flex;align-items:center;gap:8px}
.job .st{font-family:var(--sans);font-weight:600;font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;padding:3px 8px;border-radius:99px;border:1px solid}
.job .st.built{color:var(--success);border-color:rgba(63,107,71,.35)}
.job .st.prev{color:var(--info);border-color:rgba(51,91,127,.35)}
.job .plan{font-family:var(--sans);font-weight:600;font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--accent)}
.job h3{font-family:var(--serif);font-weight:400;font-size:27px;letter-spacing:-.01em;line-height:1.1}
.job p{font-size:14px;color:var(--ink-3);line-height:1.6;flex:1}
.job p em{font-style:italic;color:var(--ink)}
.job-line{display:grid;grid-template-columns:40px 1fr;gap:8px;padding-top:12px;border-top:1px dashed var(--rule);font-size:12px;color:var(--ink-3);line-height:1.5}
.job-line .t{font-family:var(--mono);font-size:10.5px;color:var(--ink-4);padding-top:2px}
.job-line b{color:var(--ink);font-weight:600}
/* the composer mock */
.compose{padding:16px 18px;display:flex;flex-direction:column;gap:12px}
.compose .said{font-family:var(--serif);font-size:18px;line-height:1.4;color:var(--ink)}
.understood{display:flex;flex-direction:column;gap:6px}
.understood .u{display:grid;grid-template-columns:52px 1fr;gap:10px;font-size:12.5px;line-height:1.5;color:var(--ink-2);padding:8px 10px;border-radius:8px;background:var(--bg-sunken)}
.understood .k{font-family:var(--sans);font-weight:600;font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-4);padding-top:3px}
.understood .u.cant{background:rgba(176,122,19,.08);border:1px solid rgba(176,122,19,.24)}
.understood .u.cant .k{color:var(--warn)}
.check-list li b{color:var(--ink)}
/* works-with note */
.next{margin:22px auto 0;font-size:13px;color:var(--ink-3);display:inline-flex;align-items:center;gap:10px}
.next .k{font-family:var(--sans);font-weight:600;font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--info);border:1px solid rgba(51,91,127,.35);border-radius:99px;padding:3px 8px}
/* pricing teaser */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:34px;text-align:left}
@media(max-width:880px){.tiers{grid-template-columns:1fr}}
.tier{display:block;background:var(--surface);border:1px solid var(--rule);border-radius:16px;padding:22px;transition:transform .3s,box-shadow .3s,border-color .3s}
.tier:hover{transform:translateY(-4px);box-shadow:var(--shadow-2);border-color:var(--accent)}
.tier.feat{border-color:var(--ink)}
.tier .pname{font-family:var(--sans);font-weight:600;font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-4)}
.tier .amt{font-family:var(--serif);font-size:40px;line-height:1;margin:10px 0 8px}
.tier .what{font-size:13.5px;color:var(--ink-3);line-height:1.55}

/* Albert's face — the app's own image, drawn on ink as the app draws it */
.albert-face{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--ink);flex-shrink:0;vertical-align:middle;margin-right:12px}
.albert-face img{width:30px;height:30px;object-fit:contain;filter:invert(1)}
.albert-face.lg{width:64px;height:64px;border-radius:16px;margin:0 0 14px}
.albert-face.lg img{width:44px;height:44px}
.job h3.withface{display:flex;align-items:center;gap:0}
/* the one-price block */
.everyone{max-width:820px;margin:28px auto 0;padding:18px 22px;border:1px solid var(--ink);border-radius:14px;background:var(--surface);font-size:14.5px;line-height:1.65;color:var(--ink-2);text-align:center}
.everyone b{color:var(--ink)}

/* Every dashboard on this site is a picture of the product, not a customer's
   results — said on the picture itself, so no figure reads as a claim. */
.mock{position:relative}
.mock::after{content:"Illustrative figures";position:absolute;right:12px;bottom:8px;font-family:var(--sans);font-weight:600;font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-4);pointer-events:none}

/* ── Hero v3: the banner line, and three views of one business ───────── */
.hero-v3{grid-template-columns:1fr 1.02fr;min-height:94svh}
.hero-v3 h1{font-size:clamp(44px,5.5vw,80px);line-height:1.0}
.hero-v3 h1 .line{white-space:nowrap}
.hero-v3 .sub{max-width:520px}
.stack3{position:relative;height:clamp(440px,48vw,560px);perspective:1400px}
.v3{position:absolute;background:var(--surface);border:1px solid var(--rule);border-radius:16px;box-shadow:var(--shadow-3);overflow:hidden;opacity:0;animation:v3in .9s cubic-bezier(.22,1,.36,1) forwards}
.v3-cap{position:absolute;right:14px;top:12px;font-family:var(--sans);font-weight:600;font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--ink-4)}
.v3-bar{display:flex;align-items:center;gap:6px;padding:10px 14px;border-bottom:1px solid var(--rule);font-size:12.5px}
.v3-bar span{width:8px;height:8px;border-radius:50%;background:var(--rule-strong)}
.v3-bar b{font-weight:600;margin-left:4px}
.v3-bar em{margin-left:auto;font-style:normal;font-size:11px;color:var(--accent);font-weight:600}
/* management — behind, top left */
.v3-mgmt{top:0;left:0;width:78%;height:62%;animation-delay:.35s;--r:-2deg}
.v3-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:14px}
.v3-kpis div{background:var(--bg);border-radius:10px;padding:10px 12px}
.v3-kpis small{display:block;font-size:10.5px;color:var(--ink-3)}
.v3-kpis strong{font-family:var(--serif);font-weight:400;font-size:28px;line-height:1.1}
.v3-kpis strong.ok{color:var(--success)}
.v3-bars{display:flex;align-items:flex-end;gap:7px;height:32%;padding:0 16px 34px}
.v3-bars i{flex:1;background:var(--rule-strong);border-radius:4px 4px 0 0;transform-origin:bottom;animation:barup 1s cubic-bezier(.22,1,.36,1) both;animation-delay:1s}
.v3-bars i.acc{background:var(--accent)}
/* office — middle, right */
.v3-office{top:30%;right:0;width:58%;animation-delay:.55s}
.v3-row{display:flex;align-items:center;gap:10px;padding:10px 14px;border-top:1px solid var(--rule);font-size:12.5px}
.v3-row:first-of-type{border-top:0}
.v3-row div{flex:1;min-width:0}
.v3-row b{display:block;font-weight:600}
.v3-row small{display:block;color:var(--ink-3);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v3-row .dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.dot.crit{background:var(--danger)}.dot.high{background:var(--warn)}.dot.med{background:var(--info)}
.v3-btn{font-size:11px;font-weight:600;padding:5px 9px;border:1px solid var(--rule-strong);border-radius:7px;white-space:nowrap}
.v3-office{padding-bottom:28px}
/* field — front, bottom left, a phone */
.v3-field{bottom:0;left:4%;width:clamp(170px,19vw,212px);border-radius:28px;border:6px solid var(--ink);padding:18px 14px 34px;animation-delay:.75s;background:var(--bg)}
.v3-office .v3-cap{top:auto;bottom:8px;right:14px;left:auto}
.v3-field .v3-cap{top:auto;bottom:10px;left:14px;right:auto}
.phone-notch{position:absolute;top:6px;left:50%;transform:translateX(-50%);width:54px;height:6px;border-radius:6px;background:var(--ink)}
.f-head small{display:block;font-size:10px;color:var(--ink-3);letter-spacing:.04em}
.f-head b{display:block;font-size:14px;margin-top:4px}
.f-head > span{display:block;font-size:11px;color:var(--ink-3)}
.f-timer{margin:12px 0;background:var(--surface);border:1px solid var(--rule);border-radius:12px;padding:8px 10px}
.f-timer small{display:block;font-size:10px;color:var(--ink-3)}
.f-timer strong{font-family:var(--mono);font-size:19px;font-weight:600}
.f-steps div{font-size:11.5px;padding:6px 0 6px 20px;position:relative;border-top:1px dashed var(--rule)}
.f-steps div::before{content:"";position:absolute;left:0;top:8px;width:12px;height:12px;border-radius:50%;border:1.5px solid var(--rule-strong)}
.f-steps .done{color:var(--ink-3);text-decoration:line-through}
.f-steps .done::before{background:var(--success);border-color:var(--success)}
.f-steps .now{font-weight:600}
.f-steps .now::before{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.f-go{margin-top:10px;background:var(--accent);color:#fff;text-align:center;font-size:12px;font-weight:600;border-radius:10px;padding:9px}
/* the ask-first chip, floating between the office and the field */
.v3-ask{position:absolute;right:0;bottom:3%;display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid rgba(176,122,19,.4);border-radius:14px;padding:10px 12px;box-shadow:var(--shadow-2);font-size:12px;opacity:0;animation:v3in .8s cubic-bezier(.22,1,.36,1) 1.3s forwards, float 6s ease-in-out 2.2s infinite}
.v3-ask b{display:block;font-weight:600}
.v3-ask small{display:block;color:var(--ink-3);font-size:11px}
.v3-ask .ok-btn{background:var(--ink);color:#fff;border-radius:8px;padding:6px 10px;font-weight:600;font-size:11px}
.v3-note{position:absolute;right:0;top:-22px;font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-4)}
@keyframes v3in{from{opacity:0;transform:translateY(28px) rotate(0)}to{opacity:1;transform:translateY(0) rotate(var(--r,0))}}
@keyframes barup{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@media (prefers-reduced-motion:reduce){.v3,.v3-ask,.v3-bars i{animation:none;opacity:1}}
@media (max-width:980px){
  .hero-v3{grid-template-columns:1fr}
  .stack3{height:460px;max-width:560px;width:100%;margin:10px auto 0}
}
@media (max-width:560px){
  /* A phone shows the phone: the field view, with the ask-first chip. */
  .stack3{height:440px}
  .v3-mgmt,.v3-office{display:none}
  .v3-field{left:50%;bottom:30px;transform:translateX(-50%);width:210px;animation:none;opacity:1}
  .v3-ask{left:50%;right:auto;bottom:0;transform:translateX(-50%);animation:none;opacity:1;white-space:nowrap}
}

/* ── Live first screen ───────────────────────────────────────────────── */
.stack3{transform-style:preserve-3d}
.v3-mgmt,.v3-office,.v3-field,.v3-ask{will-change:transform}
.v3-row{transition:opacity .45s ease,transform .45s cubic-bezier(.22,1,.36,1),max-height .45s ease,padding .45s ease;max-height:60px}
.v3-row.leaving{opacity:0;transform:translateX(40px);max-height:0;padding-top:0;padding-bottom:0;border-top-color:transparent}
.v3-row.arriving{opacity:0;transform:translateY(12px)}
.v3-btn.press,.f-go.press,.v3-ask .ok-btn.press{transform:scale(.92);filter:brightness(.9)}
.v3-btn,.f-go,.v3-ask .ok-btn{transition:transform .15s ease,filter .15s ease,background .3s ease}
.f-steps div{transition:color .3s ease}
.f-steps div::before{transition:background .3s ease,border-color .3s ease,box-shadow .3s ease}
.f-swap{transition:opacity .35s ease,transform .35s ease}
.f-swap.out{opacity:0;transform:translateY(-6px)}
.v3-ask{transition:border-color .35s ease,background .35s ease}
.v3-ask.done{border-color:rgba(63,107,71,.45);background:#F3F7F2}
.v3-ask.done .ok-btn{background:var(--success)}
.v3-ask .ask-body{transition:opacity .3s ease}
.v3-ask .ask-body.out{opacity:0}
.v3-kpis strong{transition:color .4s ease}
.v3-kpis strong.bump{color:var(--accent)}
.v3-bars i{transition:height .8s cubic-bezier(.22,1,.36,1)}