/* The STYYR Console design system's tokens (styyr-automation/design/console/tokens), the semantic ones the page uses.
   Light on :root; dark when the visitor's system asks for it, or when the light / dark toggle in the nav says so:
   site.js and the head script put data-scheme="light" or "dark" on <html>, and without them the system decides. */
:root{
  --bg-page:#FFFFFF; --bg-surface:#F5F8FB; --bg-surface-blue:#E4F1FA; --bg-hover:rgba(11,22,34,.05); --bg-selected:rgba(11,22,34,.05); --bg-pressed:rgba(11,22,34,.1); --bg-field:rgba(11,22,34,.05);
  --fg-1:#0B1622; --fg-2:rgba(11,22,34,.8); --fg-muted:rgba(11,22,34,.65); --fg-link:#1A5F96; --fg-on-brand:#FFFFFF;
  --border-1:rgba(11,22,34,.1); --border-2:rgba(11,22,34,.2); --focus-ring:#4E93CC;
  /* not the console's: a control's boundary needs 3:1 (WCAG 1.4.11), and the console's hairlines are decorative */
  --border-control:rgba(11,22,34,.5);
  --brand:#0E3A5F; --brand-hover:#134C7A; --brand-subtle:#EEF5FB; --brand-accent:#2775B4; --brand-fg:#0E3A5F;
  --st-progress-bg:#EDEDFF; --st-progress-fg:#4F51B8; --st-complete-bg:#DEF8EE; --st-complete-fg:#237A5B;
  --st-pending-bg:#E2F5FF; --st-pending-fg:#1F6E9C; --st-approved-bg:#FFFBD4; --st-approved-fg:#8A5A00;
  --st-neutral-bg:rgba(11,22,34,.05); --st-neutral-fg:rgba(11,22,34,.6);
  --danger:#FF4747; --danger-fg:#C62828; --success:#4AA785;
  --stamp-bg:#DEF8EE; --stamp-fg:#237A5B;
  --chart-1:#0E3A5F; --wordmark:#0E3A5F;
  --inverse-bg:rgba(11,22,34,.8); --inverse-fg:#FFFFFF;
  --scrim:rgba(11,22,34,.32);
  --shadow-win:0 0 0 1px rgba(11,22,34,.08),0 24px 64px rgba(11,22,34,.14);
  --shadow-pop:0 4px 16px rgba(11,22,34,.1);
  /* the hour types, as the app's work-type colours */
  --onshore:#A1E3CB; --travel:var(--chart-1); --offshore:#A8C5DA; --waiting:#FFCB83; --remote:#95A4FC;
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color-scheme:light;
}
:root[data-scheme="dark"]{
  --bg-page:#141516; --bg-surface:rgba(255,255,255,.05); --bg-surface-blue:rgba(134,182,224,.16); --bg-hover:rgba(255,255,255,.05); --bg-selected:rgba(255,255,255,.08); --bg-pressed:rgba(255,255,255,.1); --bg-field:rgba(255,255,255,.1);
  --fg-1:#FFFFFF; --fg-2:rgba(255,255,255,.8); --fg-muted:rgba(255,255,255,.62); --fg-link:#86B6E0; --fg-on-brand:#061A2C;
  --border-1:rgba(255,255,255,.1); --border-2:rgba(255,255,255,.2); --border-control:rgba(255,255,255,.42);
  --brand:#86B6E0; --brand-hover:#BCD6EE; --brand-subtle:rgba(134,182,224,.16); --brand-accent:#86B6E0; --brand-fg:#86B6E0;
  --st-progress-bg:rgba(149,164,252,.16); --st-progress-fg:#B4BEFD; --st-complete-bg:rgba(161,227,203,.16); --st-complete-fg:#A1E3CB;
  --st-pending-bg:rgba(177,227,255,.16); --st-pending-fg:#B1E3FF; --st-approved-bg:rgba(255,233,153,.16); --st-approved-fg:#FFE999;
  --st-neutral-bg:rgba(255,255,255,.05); --st-neutral-fg:rgba(255,255,255,.6);
  --danger-fg:#FF8A80; --stamp-bg:#1E3A31; --stamp-fg:#A1E3CB;
  --chart-1:#86B6E0; --wordmark:#FFFFFF;
  --inverse-bg:rgba(255,255,255,.8); --inverse-fg:#0B1622;
  --scrim:rgba(0,0,0,.6);
  --shadow-win:0 0 0 1px rgba(255,255,255,.09),0 30px 80px rgba(0,0,0,.55);
  --shadow-pop:0 4px 16px rgba(0,0,0,.4);
  color-scheme:dark;
}
/* the same dark, for a page whose scripts have not run */
@media (prefers-color-scheme: dark){
  :root:not([data-scheme]){
    --bg-page:#141516; --bg-surface:rgba(255,255,255,.05); --bg-surface-blue:rgba(134,182,224,.16); --bg-hover:rgba(255,255,255,.05); --bg-selected:rgba(255,255,255,.08); --bg-pressed:rgba(255,255,255,.1); --bg-field:rgba(255,255,255,.1);
    --fg-1:#FFFFFF; --fg-2:rgba(255,255,255,.8); --fg-muted:rgba(255,255,255,.62); --fg-link:#86B6E0; --fg-on-brand:#061A2C;
    --border-1:rgba(255,255,255,.1); --border-2:rgba(255,255,255,.2); --border-control:rgba(255,255,255,.42);
    --brand:#86B6E0; --brand-hover:#BCD6EE; --brand-subtle:rgba(134,182,224,.16); --brand-accent:#86B6E0; --brand-fg:#86B6E0;
    --st-progress-bg:rgba(149,164,252,.16); --st-progress-fg:#B4BEFD; --st-complete-bg:rgba(161,227,203,.16); --st-complete-fg:#A1E3CB;
    --st-pending-bg:rgba(177,227,255,.16); --st-pending-fg:#B1E3FF; --st-approved-bg:rgba(255,233,153,.16); --st-approved-fg:#FFE999;
    --st-neutral-bg:rgba(255,255,255,.05); --st-neutral-fg:rgba(255,255,255,.6);
    --danger-fg:#FF8A80; --stamp-bg:#1E3A31; --stamp-fg:#A1E3CB;
    --chart-1:#86B6E0; --wordmark:#FFFFFF;
    --inverse-bg:rgba(255,255,255,.8); --inverse-fg:#0B1622;
    --scrim:rgba(0,0,0,.6);
    --shadow-win:0 0 0 1px rgba(255,255,255,.09),0 30px 80px rgba(0,0,0,.55);
    --shadow-pop:0 4px 16px rgba(0,0,0,.4);
    color-scheme:dark;
  }
}
html{scroll-behavior:smooth; scroll-padding-top:80px}
body{margin:0; -webkit-font-smoothing:antialiased; background:var(--bg-page); color:var(--fg-1); font-family:var(--font); font-size:16px; line-height:1.6}
a{text-decoration:none; color:var(--fg-link)} a:hover{color:var(--brand-hover)}
/* links in running text are underlined (WCAG 1.4.1); none exist today, every link is in a navigation landmark */
p a,li a{text-decoration:underline; text-underline-offset:.15em}
*{box-sizing:border-box}
h1,h2,h3,p{margin:0}
button{font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; text-align:left}
:focus-visible{outline:2px solid var(--focus-ring); outline-offset:2px; border-radius:6px}
::selection{background:var(--bg-surface-blue)}
.skip{position:absolute; left:16px; top:-100px; z-index:60; padding:12px 16px; font-family:var(--font); font-size:14px; background:var(--brand); color:var(--fg-on-brand); font-weight:600; border-radius:8px}
.skip:focus{top:12px}

.site{overflow-x:clip; background:var(--bg-page)}
.wrap{width:min(1240px, calc(100% - 64px)); margin-inline:auto}
.lab{font-family:var(--font); font-weight:400; font-size:13px; color:var(--fg-muted)}
.lab-accent{font-weight:600; font-size:14px; color:var(--brand-fg)}
.h2{font-family:var(--font); font-size:clamp(32px,4.4vw,60px); text-wrap:balance; font-weight:600; line-height:1.08}
.lede{font-size:clamp(17px,1.5vw,20px); max-width:56ch; text-wrap:pretty; color:var(--fg-2)}
.accent{background:none; -webkit-background-clip:border-box; background-clip:border-box; color:var(--brand-accent); -webkit-text-fill-color:currentColor}

/* ---------- nav ---------- */
.nav{position:sticky; top:0; z-index:50; background:color-mix(in srgb,var(--bg-page) 88%,transparent); -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px); border-bottom:1px solid var(--border-1)}
.nav-in{height:64px; display:flex; align-items:center; gap:32px}
.lockup{display:flex; align-items:center; gap:11px; color:var(--wordmark)}
.lockup svg{width:26px; height:28px; display:block}

.nav-links{display:flex; gap:28px; margin-left:auto}
.nav-links a{padding:12px 0; font-family:var(--font); font-weight:400; font-size:14px; color:var(--fg-2)}
.nav-links a:hover{color:var(--fg-1)}
.m-menu{display:none; border-color:var(--border-control); border-radius:10px}
.btn{display:inline-flex; align-items:center; gap:10px; white-space:nowrap; min-height:44px; padding:0 20px; border-radius:12px; font-family:var(--font); font-weight:600; font-size:15px; transition:background-color .2s cubic-bezier(.2,0,0,1)}
.btn svg{width:16px; height:16px; flex:none}
.btn-primary{background:var(--brand); color:var(--fg-on-brand); border:0}
.btn-primary:hover{background:var(--brand-hover); color:var(--fg-on-brand); transform:none}
.btn-line{border:0; box-shadow:inset 0 0 0 1px var(--border-control); color:var(--fg-1); font-weight:400}
.btn-line:hover{border-color:var(--border-2); background:var(--bg-hover); color:var(--fg-1)}
.prog{position:absolute; left:0; right:0; bottom:-1px; height:1px; transform-origin:0 50%; transform:scaleX(0); background:var(--brand-accent)}

/* ---------- hero ---------- */
.hero{position:relative; padding:96px 0 0}
.grid-bg{position:absolute; inset:0; pointer-events:none; background-size:96px 96px; -webkit-mask-image:radial-gradient(ellipse 80% 70% at 70% 20%,#000 0%,transparent 75%); mask-image:radial-gradient(ellipse 80% 70% at 70% 20%,#000 0%,transparent 75%); background-image:linear-gradient(var(--border-1) 1px,transparent 1px),linear-gradient(90deg,var(--border-1) 1px,transparent 1px); opacity:.7}
.schem{position:absolute; right:-70px; top:30px; width:min(980px,72%); pointer-events:none}
.schem path,.schem line{fill:none; vector-effect:non-scaling-stroke; stroke:var(--brand-accent)}
.schem .draw{stroke-dasharray:2400; stroke-dashoffset:2400; animation:draw 3.2s .3s cubic-bezier(.4,0,.2,1) forwards; opacity:.32}
.schem .faint{opacity:.28; stroke-dasharray:3 7}
.schem .sig{stroke-dasharray:4 8; opacity:.9; animation:flow 1.6s linear infinite}
.schem .node{stroke:none; opacity:0; animation:fadein .6s 2.6s forwards; fill:var(--brand-accent)}
.schem .ring{fill:none; transform-box:fill-box; transform-origin:center; animation:ping 2.4s 2.8s ease-out infinite; opacity:0; stroke:var(--brand-accent)}
.schem text{font-size:10px; opacity:0; animation:fadein .6s 2.8s forwards; font-family:var(--font); fill:var(--fg-muted)}
.hero-in{position:relative}
/* WCAG 2.2.2: pauses the endless motion. On desktop it sits just under the schematic's lower edge, flush with the
   column's right edge: the schematic is min(980px,72%) wide with a 900:300 viewBox, so its lower edge is a third of
   that below its top, and a percentage margin-top resolves against the hero's width, as the schematic's width does */
.motion{position:absolute; z-index:1; top:30px; margin-top:calc(min(980px,72%) / 3 + 8px); right:max(32px, calc((100% - 1240px) / 2)); width:44px; height:44px; display:grid; place-items:center; border:1px solid var(--border-control); cursor:pointer; transition:color .15s,border-color .15s; border-radius:10px; background:var(--bg-page); color:var(--fg-muted)}
.motion:hover{color:var(--fg-1); border-color:var(--fg-muted)}
.motion:focus-visible{outline:2px solid var(--brand-fg); outline-offset:2px}
.motion svg{width:16px; height:16px}
.motion .play{display:none} html.still .motion .play{display:block} html.still .motion .pause{display:none}

.h1{font-family:var(--font); font-size:clamp(42px,7.4vw,108px); font-weight:600; line-height:1.02}
.h1 .ln{display:block; overflow:hidden; padding-bottom:.08em}
.h1 .ln span{display:block; transform:translateY(108%); animation:lineup .9s cubic-bezier(.2,.7,.1,1) forwards}
.h1 .ln:nth-child(2) span{animation-delay:.12s} .h1 .ln:nth-child(3) span{animation-delay:.24s}
.hero-row{display:flex; align-items:flex-end; justify-content:space-between; gap:40px; margin-top:44px; opacity:0; animation:fadeup .8s .55s ease forwards}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap}
.req{margin-top:12px; font-size:13.5px; color:var(--fg-muted)}

.stage{margin-top:80px; perspective:1800px; opacity:0; animation:fadeup 1s .75s ease forwards}
.win{overflow:hidden; border:0; border-radius:14px; background:var(--bg-page); box-shadow:var(--shadow-win); color:var(--fg-1); font-size:13.5px; line-height:1.45}
.win-hero{transform-origin:50% 0; transform:rotateX(14deg) scale(.95)}
.tbar{display:flex; align-items:center; gap:14px; padding:0 0 0 16px; height:52px; background:var(--bg-page); border-bottom:1px solid var(--border-1)}
.tbar .lockup svg{width:18px; height:20px}

.wctl{display:flex; align-self:stretch}
.wctl span{display:grid; place-items:center; width:38px; color:var(--fg-2)}
.wctl svg{width:11px; height:11px}
.pill{display:inline-flex; align-items:center; height:20px; padding:0 6px; gap:5px; border:0; border-radius:4px; font-family:var(--font); font-weight:400; font-size:11.5px; background:var(--st-pending-bg); color:var(--st-pending-fg)}
.pill i{border-radius:50%; background:currentColor; width:5px; height:5px}
.pill-ok{background:var(--st-complete-bg); color:var(--st-complete-fg)}
.win-body{display:flex; min-width:860px}

.main{flex:1; min-width:0; padding:22px 26px 30px; display:flex; flex-direction:column; gap:14px; position:relative}
.card{background:var(--bg-surface); border:1px solid var(--border-1); border-radius:9px; overflow:hidden}
.card-h{display:flex; align-items:baseline; gap:10px; padding:12px 18px; background:none; border-bottom:1px solid var(--border-1)}
.card-h b{font-family:var(--font); font-weight:600; font-size:15px}
.card-h em{font-style:normal; font-size:13.5px; color:var(--fg-muted)}
.card-h .hrs{margin-left:auto; font-size:19px; font-variant-numeric:tabular-nums; font-family:var(--font); font-weight:600}
.card-h .hrs small{font-size:11px; margin-left:5px; color:var(--fg-muted); font-weight:400}
.blk{padding:12px 18px 14px}
.blk + .blk{border-top:1px solid var(--border-1); border-top-color:var(--border-1)}
.cap{display:grid; grid-template-columns:150px 118px minmax(0,1fr) 52px 52px 52px; gap:6px; align-items:center; margin-bottom:6px}
.cap b{font-size:13.5px; grid-column:1/4; font-family:var(--font); font-weight:600; color:var(--fg-1)}
.cap span{font-size:10px; text-align:center; font-family:var(--font); font-weight:400; color:var(--fg-muted)}
.cap .ot{color:var(--brand-fg)}
.hl{display:grid; grid-template-columns:150px 118px minmax(0,1fr) 52px 52px 52px; gap:6px; align-items:center; padding:5px 0}
.hl > span{padding:5px 8px; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; background:var(--bg-field); border:0; border-radius:8px; font-weight:400}
.hl .tm{text-align:center; font-variant-numeric:tabular-nums; font-family:var(--font); font-weight:400}
.hl .ty{display:flex; align-items:center; gap:8px}
.hl .ty i{width:8px; height:8px; border-radius:2px; flex:none}
.hl .rc{text-align:center; border-color:transparent; font-variant-numeric:tabular-nums; font-family:var(--font); font-weight:600; background:none}
.hl .rc.ot{color:var(--brand-fg)} .hl .rc.z{color:var(--fg-muted); font-weight:400}
.k-travel{background:var(--travel)} .k-onshore{background:var(--onshore)} .k-waiting{background:var(--waiting)} .k-offshore{background:var(--offshore)} .k-remote{background:var(--remote)}
.seq{opacity:0; animation:linein .55s cubic-bezier(.2,.7,.2,1) forwards}
.d1{animation-delay:1.5s} .d2{animation-delay:1.9s} .d3{animation-delay:2.3s} .d4{animation-delay:2.7s} .d5{animation-delay:3.2s} .d6{animation-delay:3.6s}
.rl{display:grid; grid-template-columns:30px minmax(0,1fr); gap:10px; padding:6px 0}
.rl .no{font-size:12.5px; text-align:right; padding-top:6px; font-family:var(--font); font-weight:400; color:var(--fg-muted)}
.rl .tx{padding:6px 10px; font-size:14.5px; min-width:0; background:var(--bg-field); border:0; border-radius:8px; font-weight:400}
.rl .tx.live{border:0; box-shadow:inset 0 0 0 1px var(--brand)}
.typed{display:inline-block; vertical-align:bottom; max-width:0; overflow:hidden; white-space:nowrap; animation:type 3.4s 4s steps(60,end) forwards}
.caret{display:inline-block; width:1.5px; height:1.1em; vertical-align:-3px; margin-left:1px; animation:blink 1s steps(2,start) infinite; background:var(--brand)}
.toast{position:absolute; right:26px; bottom:22px; display:flex; align-items:center; gap:9px; height:38px; padding:0 16px; opacity:0; animation:toastin .5s 7.6s ease forwards; border:0; border-radius:8px; background:var(--inverse-bg); color:var(--inverse-fg); -webkit-backdrop-filter:blur(40px); backdrop-filter:blur(40px); box-shadow:var(--shadow-pop); font-size:12.5px}
.toast i{width:5px; height:5px; border-radius:50%; background:var(--success)}
.hero-fade{height:120px; margin-top:-120px; position:relative; pointer-events:none; background:linear-gradient(transparent,var(--bg-page))}

/* ---------- section scaffolding ---------- */
.sec{padding:140px 0 0}
.sec-h{display:flex; flex-direction:column; gap:22px; max-width:880px}

/* ---------- story ---------- */
.story{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:72px; margin-top:72px; align-items:start}
.pin{position:sticky; top:104px}
.win-story .tbar .clock{font-variant-numeric:tabular-nums; padding-right:16px; font-family:var(--font); font-weight:600; font-size:14px; color:var(--brand-fg)}
.layers{position:relative; height:470px; background:var(--bg-page)}
.lay{position:absolute; inset:0; padding:26px; display:flex; flex-direction:column; gap:14px; opacity:0; visibility:hidden; transform:translateY(14px) scale(.985); transition:opacity .45s ease,transform .6s cubic-bezier(.2,.7,.2,1),visibility 0s linear .45s; pointer-events:none}
.lay.on{opacity:1; visibility:visible; transform:none; pointer-events:auto; transition-delay:0s}
.lay .a{opacity:0}
.lay.on .a{animation:linein .55s cubic-bezier(.2,.7,.2,1) forwards}
.lay.on .a1{animation-delay:.15s} .lay.on .a2{animation-delay:.35s} .lay.on .a3{animation-delay:.55s} .lay.on .a4{animation-delay:.75s} .lay.on .a5{animation-delay:1.05s} .lay.on .a6{animation-delay:1.5s}
.dots{display:flex; gap:6px; justify-content:center; padding:14px 0 0}
.dots i{width:22px; height:2px; transition:background .3s; background:var(--border-2); border-radius:2px}
.dots i.on{background:var(--brand)}
/* a step takes over once its heading passes the pinned window's middle (site.js), so the last one would let go of
   the window almost at once: the room under it keeps the window pinned about as long as every other step (430px) */
.steps{display:flex; flex-direction:column; padding-bottom:400px}
.step{display:block; width:100%; min-height:430px; padding:8px 0 0 28px; border-left:1px solid var(--border-1); transition:border-color .4s,box-shadow .4s; position:relative; border-left-color:var(--border-1)}
.step .t:hover{color:var(--brand-hover)}
.step.on{border-left-color:var(--brand); box-shadow:inset 2px 0 0 var(--brand)}
.step:not(.on) li::before{opacity:.4}
.step .t{display:flex; min-height:44px; align-items:center; align-items:baseline; gap:14px; font-variant-numeric:tabular-nums; font-family:var(--font); font-weight:600; font-size:15px; color:var(--fg-muted)}
.step.on .t{color:var(--brand-fg)}
.step .t small{font-weight:400; font-size:13px; color:var(--fg-muted)}
.step h3{font-family:var(--font); font-size:clamp(24px,2.5vw,34px); line-height:1.12; margin:14px 0 14px; color:var(--fg-1); text-wrap:balance; font-weight:600}
.step p{color:var(--fg-2); max-width:44ch}
.step ul{list-style:none; margin:18px 0 0; padding:0; display:flex; flex-direction:column; gap:7px; font-size:15.5px; color:var(--fg-2)}
.step li{display:flex; gap:12px; align-items:baseline}
.step li::before{content:""; width:10px; height:1px; flex:none; transform:translateY(-5px); background:var(--brand-accent)}

/* layer parts */
.fld{display:flex; flex-direction:column; gap:5px; min-width:0}
.fld label,.fld .k{font-family:var(--font); font-weight:400; font-size:12px; color:var(--fg-muted)}
.fld .v{height:38px; display:flex; align-items:center; padding:0 12px; font-size:14.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; border:0; border-radius:8px; background:var(--bg-field); font-weight:400}
.two{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.chips{display:flex; flex-wrap:wrap; gap:7px}
.chips span{height:32px; display:flex; align-items:center; padding:0 13px; font-size:13.5px; border:0; border-radius:8px; background:transparent; box-shadow:inset 0 0 0 1px var(--border-1); color:var(--fg-1); font-weight:400}
.chips .on{border-color:var(--brand-fg); background:var(--brand); box-shadow:none; color:var(--fg-on-brand); font-weight:600}
.av{width:28px; height:28px; display:grid; place-items:center; font-size:11px; flex:none; border-radius:50%; background:var(--bg-hover); color:var(--fg-1); font-family:var(--font); font-weight:600}

.team{display:flex; gap:10px; align-items:center; font-size:14px; color:var(--fg-2)}
.hl.s{grid-template-columns:132px 108px minmax(0,1fr) 44px 44px 44px}
.cap.s{grid-template-columns:132px 108px minmax(0,1fr) 44px 44px 44px}
.photo{width:100%; aspect-ratio:16/9; border-radius:5px; background:linear-gradient(150deg,#4A4E55,#1E2124); position:relative; overflow:hidden}
.photo::before{content:""; position:absolute; left:14%; top:14%; width:58%; height:72%; border:2px solid #15181c; background:#31363b; box-shadow:inset 0 0 0 8px #2a2f34}
.photo::after{content:""; position:absolute; right:12%; top:20%; width:8px; height:8px; border-radius:50%; background:#6DAE84; box-shadow:0 16px 0 #C4785A,0 32px 0 #6E9CC4}
.note{width:250px; padding:10px; position:absolute; right:26px; top:206px; border:1px solid var(--border-1); border-radius:12px; background:var(--bg-page); box-shadow:var(--shadow-pop)}
.lay.on .note{animation:dock 1.1s .7s cubic-bezier(.2,.7,.2,1) both}
.note .top{display:flex; justify-content:space-between; margin-bottom:8px; font-family:var(--font); font-weight:600; font-size:12.5px; color:var(--fg-1); border-bottom-color:var(--border-1)}

.mk{display:inline-flex; align-items:center; gap:7px; height:24px; padding:0 9px 0 5px; font-size:12.5px; border:1px solid var(--border-1); border-radius:6px; background:var(--bg-page); font-family:var(--font); font-weight:400; color:var(--fg-2)}
.mk i{width:18px; height:13px; border-radius:2px; background:linear-gradient(150deg,#4A4E55,#24272B)}
.mk.n{font-family:var(--font); font-weight:400; padding-left:9px; border:0; background:var(--brand-subtle); color:var(--brand-fg)}
.marks{display:flex; flex-wrap:wrap; gap:6px; margin-top:7px}
.split{display:grid; grid-template-columns:1fr 1fr; gap:14px; position:relative}
.split .card{padding:16px 18px; background:var(--bg-surface)}
.split h3{margin:0 0 4px; display:flex; align-items:center; gap:8px; font-family:var(--font); font-weight:600; font-size:12px; color:var(--fg-muted)}
.split h3 svg{width:13px; height:13px}
.split .who{margin-bottom:12px; font-family:var(--font); font-weight:600; font-size:17px}
.split .row{display:flex; justify-content:space-between; align-items:baseline; padding:7px 0; border-top:1px solid var(--border-1); font-size:14.5px; border-top-color:var(--border-1); color:var(--fg-2)}
.split .row b{color:var(--fg-1); font-variant-numeric:tabular-nums; font-family:var(--font); font-weight:600}
.split .row b.ot{color:var(--brand-fg)}
.split .tag{margin-top:12px; font-size:13px; display:flex; gap:8px; align-items:center; color:var(--fg-muted)}
.split .tag.ok{color:var(--st-complete-fg)}
.branch{height:34px; position:relative; margin:-4px 0}
.branch::before{content:""; position:absolute; left:50%; top:0; height:14px; border-left:1px solid var(--border-2)}
.branch::after{content:""; position:absolute; left:25%; right:25%; top:14px; height:20px; border:1px solid var(--border-2); border-bottom:0; border-radius:6px 6px 0 0}
.lockbar{display:flex; align-items:center; gap:11px; padding:13px 16px; font-size:14.5px; border:0; border-radius:12px; background:var(--st-complete-bg); color:var(--st-complete-fg)}
.lockbar svg{width:16px; height:16px; flex:none}
.revs{display:flex; flex-direction:column; overflow:hidden; border:0; border-radius:12px; background:var(--bg-surface)}
.rev{display:flex; align-items:center; gap:14px; padding:12px 16px; font-size:14.5px; color:var(--fg-2)}
.rev + .rev{border-top:1px solid var(--border-1); border-top-color:var(--border-1)}
.rev b{font-size:12px; width:52px; flex:none; font-family:var(--font); font-weight:600; color:var(--brand-fg)}
.rev span{flex:1; min-width:0}
.rev em{font-style:normal; font-size:12px; white-space:nowrap; font-family:var(--font); color:var(--fg-muted)}
.mail{display:flex; align-items:center; gap:12px; padding:12px 16px; font-size:14.5px; border:1px dashed var(--border-2); border-radius:12px; color:var(--fg-2)}
.mail svg{width:17px; height:17px; flex:none; color:var(--brand-accent)}

/* ---------- photo band ---------- */
.band{position:relative; height:340px; display:flex; align-items:flex-end; border-block:0; background:var(--bg-surface-blue); width:min(1240px,calc(100% - 32px)); margin-inline:auto; margin-top:32px; border-radius:24px}
.band .ph{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; text-align:center; padding:0 24px; color:var(--fg-muted)}
.band .ph b{font-family:var(--font); font-weight:600; font-size:12px; color:var(--brand-fg)}
.band .ph span{max-width:46ch; font-size:15px}
.band .crop{position:absolute; width:22px; height:22px; border:1px solid var(--border-2); border-color:var(--brand-accent)}
.band .c1{left:24px; top:24px; border-right:0; border-bottom:0} .band .c2{right:24px; top:24px; border-left:0; border-bottom:0}
.band .c3{left:24px; bottom:24px; border-right:0; border-top:0} .band .c4{right:24px; bottom:24px; border-left:0; border-top:0}
.band-q{position:relative; padding-bottom:56px; font-size:clamp(22px,2.6vw,36px); line-height:1.15; max-width:22ch; font-family:var(--font); font-weight:600; color:var(--fg-1)}

/* ---------- document ---------- */
.doc{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:96px; align-items:center}
.doc-pts{display:flex; flex-direction:column; margin-top:40px; border-top:1px solid var(--border-1); border-top-color:var(--border-1)}
.doc-pts div{display:grid; grid-template-columns:40px 1fr; gap:8px; padding:20px 0; border-bottom:1px solid var(--border-1); color:var(--fg-2); border-bottom-color:var(--border-1)}
.doc-pts b{font-size:12px; padding-top:4px; font-family:var(--font); font-weight:600; color:var(--brand-fg)}
.doc-pts strong{display:block; color:var(--fg-1); margin-bottom:2px; font-family:var(--font); font-weight:600; font-size:18px}
.sw-row{display:flex; align-items:center; gap:14px; margin-top:34px; flex-wrap:wrap}
.sw-row > .btn{margin-left:auto}
.sws{display:flex; gap:8px}
.sws button{width:44px; height:44px; display:grid; place-items:center; transition:border-color .15s; border:1px solid var(--border-control); border-radius:10px}
.sws button:hover{border-color:var(--fg-muted)}
.sws button.on{border-color:var(--brand); border-width:2px}
.sws button i{width:26px; height:26px; display:block; border-radius:5px}
.fan{position:relative; display:grid; place-items:center; padding:40px 0}
.paper{width:min(380px,64%); aspect-ratio:210/297; background:#fff; color:#141414; container-type:inline-size; position:relative; z-index:2; display:flex; overflow:hidden; --acc:#A9853F; --acc-l:#D8B46E; box-shadow:var(--shadow-win)}
.pg{position:absolute; top:40px; left:50%; width:min(380px,64%); aspect-ratio:210/297; background:#F2F2F2; margin-left:calc(min(380px,64%) / -2); padding:7% 6%; display:flex; flex-direction:column; gap:3.2%; box-shadow:0 12px 40px rgba(11,22,34,.16)}
.pg i{display:block; height:1.6%; background:#D6D6D6; border-radius:2px}
.pg i.hd{height:4.4%; background:#1F1F1F; border-radius:0}
.pg i.sh{height:2.4%; background:#3D3D3D; border-radius:0; width:100%}
.pg-l{transform:translateX(-24%) rotate(-6deg); transform-origin:50% 100%}
.pg-r{transform:translateX(24%) rotate(6deg); transform-origin:50% 100%}
.p-in{font-size:2.28cqw; display:flex; width:100%; font-family:var(--font); line-height:1.45}
.p-side{width:31%; background:#131313; color:#EDEAE3; padding:3.2em 2.4em; display:flex; flex-direction:column}
.p-logo{border:1px dashed #6a6a6a; color:#9A9DA4; font-family:var(--font); font-size:.85em; letter-spacing:.14em; padding:.9em .4em; text-align:center; margin-bottom:3em}
.p-badge{align-self:flex-start; font-family:var(--font); font-weight:600; font-size:.85em; letter-spacing:.2em; text-transform:uppercase; border:1px solid; border-radius:3px; padding:.3em .8em; margin-bottom:1.2em; transition:color .3s}
.p-v{font-family:var(--font); font-weight:700; font-size:1.7em; line-height:1.15; color:#fff}
.p-rule{width:2.8em; height:.3em; margin:.9em 0 1.6em; transition:background .3s}
.p-side dl{margin:0; display:flex; flex-direction:column; gap:1em}
.p-side dt{font-family:var(--font); font-weight:600; font-size:.8em; letter-spacing:.18em; text-transform:uppercase; color:#9A9DA4}
.p-side dd{margin:.2em 0 0; font-size:1em}
.p-main{flex:1; min-width:0; padding:3.2em 2.8em 2.4em; display:flex; flex-direction:column}
.p-main .p-h{margin:0; font-family:var(--font); font-weight:600; font-size:1.75em; line-height:1.2; padding-bottom:.7em; border-bottom:1px solid #E0E0E0}
.p-k{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:#E0E0E0; border:1px solid #E0E0E0; margin:1.4em 0 .4em}
.p-k div{background:#F4F4F4; padding:.7em .9em}
.p-k span{display:block; font-family:var(--font); font-weight:600; font-size:.78em; letter-spacing:.16em; text-transform:uppercase; color:#6E6E6E}
.p-k b{font-family:var(--font); font-weight:700; font-size:1.45em}
.p-k u{display:block; height:2px; margin-top:.35em; text-decoration:none}
.p-sh{font-family:var(--font); font-weight:700; font-size:1.05em; letter-spacing:.1em; text-transform:uppercase; border-bottom:1.5px solid #141414; padding-bottom:.3em; margin-top:1.5em}
.p-row{display:grid; grid-template-columns:1.6em 1fr; gap:.8em; font-size:.95em; padding:.55em 0; border-bottom:1px solid #DCDCDC}
.p-row span{font-family:var(--font); color:#6E6E6E}
.p-sign{margin-top:auto; display:grid; grid-template-columns:1fr 1fr; gap:2.4em}
.p-sign div{border-top:1px solid #141414; padding-top:.5em; font-size:.85em; color:#6E6E6E}
.p-sign b{display:block; font-family:var(--font); font-size:1.1em; color:#141414}
.stamp{position:absolute; right:-6px; top:18px; z-index:3; display:flex; align-items:center; gap:8px; height:34px; padding:0 14px; font-size:11.5px; border:0; border-radius:6px; background:var(--stamp-bg); color:var(--stamp-fg); font-family:var(--font); font-weight:600}
.stamp svg{width:13px; height:13px}

/* ---------- service history ---------- */
.vhead{display:flex; align-items:baseline; gap:18px; flex-wrap:wrap; margin-top:72px; padding-bottom:18px}
.vhead b{font-family:var(--font); font-weight:600; font-size:20px}
.rail{height:1px; transform-origin:0 50%; background:var(--brand-accent)}
.visits{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0}
/* each visit lays its year, label, text and thread on the shared rows of .visits (subgrid), so the threads line up whatever the text length; browsers without subgrid fall back to a plain grid */
.visit{padding:0 28px 0 0; position:relative; display:grid; grid-template-rows:subgrid; grid-row:span 4; align-content:start}
.visit::before{content:""; position:absolute; left:0; top:-5px; width:9px; height:9px; border:1px solid var(--brand-fg); transform:rotate(45deg); background:var(--bg-page); border-color:var(--brand-accent)}
.visit.now::before{background:var(--brand-accent)}
.visit .yr{margin-top:26px; line-height:1; font-variant-numeric:tabular-nums; font-family:var(--font); font-weight:600; font-size:36px}
.visit .ty{margin-top:10px}
.visit p{margin-top:10px; font-size:15.5px; max-width:26ch; color:var(--fg-2)}
.thread{margin-top:22px; padding:12px 14px; font-size:14px; min-height:74px; border:0; border-radius:12px; background:var(--bg-surface); color:var(--fg-2)}
.thread b{display:block; margin-bottom:3px; font-family:var(--font); font-weight:600; font-size:12px}
.thread.open{border-color:var(--border-2); background:var(--st-approved-bg); color:var(--st-approved-fg)} .thread.open b{color:var(--st-approved-fg)}
.thread.done{background:var(--st-complete-bg); color:var(--st-complete-fg)} .thread.done b{color:var(--st-complete-fg)}
.thread.none{border-style:dashed; background:transparent; box-shadow:inset 0 0 0 1px var(--border-1)}
.fine{margin-top:26px; font-size:13.5px; color:var(--fg-muted)}

/* ---------- the hours bar ---------- */
.wk{display:flex; height:8px; border-radius:2px; overflow:hidden; gap:2px}
.wk i{display:block}

/* ---------- cta + footer ---------- */
.cta{position:relative; margin-top:140px; border-top:1px solid var(--border-1); padding:120px 0 120px; overflow:clip; border-top-color:var(--border-1); background:var(--bg-surface-blue)}
.cta .grid-bg{-webkit-mask-image:radial-gradient(ellipse 60% 90% at 50% 100%,#000 0%,transparent 75%); mask-image:radial-gradient(ellipse 60% 90% at 50% 100%,#000 0%,transparent 75%); opacity:.6; display:none}
.cta-in{position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; gap:26px}
.cta .h1{font-size:clamp(40px,6.4vw,92px)}
.foot{border-top:1px solid var(--border-1); padding:56px 0 64px; border-top-color:var(--border-1)}
.foot-in{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:40px}
.foot p{font-size:15px; margin-top:16px; max-width:34ch; color:var(--fg-muted)}
.foot nav{display:flex; flex-direction:column; gap:4px}
.foot nav a{color:var(--fg-2); font-size:15px; padding:6px 0}
.foot nav a:hover{color:var(--brand-fg)}
.legal{margin-top:48px; padding-top:22px; border-top:1px solid var(--border-1); font-size:13.5px; border-top-color:var(--border-1); color:var(--fg-muted)}

/* ---------- request a demo ---------- */
button.btn{cursor:pointer}
.flink{color:var(--fg-2); font-size:15px; padding:6px 0; min-height:44px} .flink:hover{color:var(--brand-fg)}
.pane{display:none} .pane.show{display:block}
.scrim{display:none}
.scrim.open{position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:24px 16px; overflow-y:auto; animation:fadeinq .25s ease both; background:var(--scrim); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px)}
.dlg{width:min(580px,100%); animation:dlgin .4s cubic-bezier(.2,.7,.2,1) both; border:0; border-radius:16px; background:var(--bg-page); color:var(--fg-1); box-shadow:var(--shadow-win)}
.dlg-h{display:flex; gap:16px; align-items:flex-start; padding:24px 26px 20px; border-bottom:1px solid var(--border-1); border-bottom-color:var(--border-1)}

.dlg-h h2{font-family:var(--font); font-weight:600; font-size:24px; line-height:1.15}
.dlg-h p{margin-top:6px; font-size:15px; color:var(--fg-2)}
.dlg-x{margin-left:auto; width:44px; height:44px; flex:none; display:grid; place-items:center; margin:-8px -10px 0 auto; border-radius:10px; color:var(--fg-muted)}
.dlg-x:hover{background:var(--bg-hover); color:var(--fg-1)} .dlg-x svg{width:16px; height:16px}
.dlg-b{padding:22px 26px 26px; display:flex; flex-direction:column; gap:16px}
.dlg .fld label,.dlg legend{padding:0; font-family:var(--font); font-weight:600; font-size:13px; color:var(--fg-1)}
.dlg .opt{font-family:var(--font); font-size:12px; margin-left:6px; font-style:normal; color:var(--fg-muted); font-weight:400}
.in{width:100%; padding:0 13px; font:inherit; font-size:15.5px; height:42px; border:0; border-radius:8px; background:var(--bg-field); box-shadow:inset 0 0 0 1px var(--border-control); color:var(--fg-1); transition:background-color .12s}
textarea.in{height:84px; padding:10px 13px; resize:vertical; line-height:1.45}
.in:hover{background:var(--bg-pressed)}
.in:focus{box-shadow:inset 0 0 0 1px var(--brand)}
.in:focus-visible{outline:2px solid var(--brand-fg); outline-offset:2px}
.in[aria-invalid="true"]{box-shadow:inset 0 0 0 1px var(--danger)}
.fld-err{margin:0; font-size:14px; color:var(--danger-fg)} .fld-err:empty{display:none}
select.in{appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--fg-muted) 50%),linear-gradient(135deg,var(--fg-muted) 50%,transparent 50%); background-position:calc(100% - 19px) 19px,calc(100% - 14px) 19px; background-size:5px 5px; background-repeat:no-repeat}
select.in option{background:var(--bg-page); color:var(--fg-1)}
.dlg fieldset{border:0; margin:0; padding:0; display:flex; flex-direction:column; gap:7px; min-width:0}
.pick{display:flex; gap:8px; flex-wrap:wrap}
.pick label{position:relative; cursor:pointer; font-family:var(--font); font-size:15px; font-weight:400}
.pick input{position:absolute; opacity:0; inset:0; width:100%; height:100%; margin:0; cursor:pointer}
.pick span{display:flex; align-items:center; height:44px; padding:0 18px; transition:background .12s,border-color .12s,color .12s; border:0; border-radius:10px; box-shadow:inset 0 0 0 1px var(--border-control); color:var(--fg-1)}
.pick input:hover + span{border-color:var(--fg-muted); color:var(--fg-1); background:var(--bg-hover)}
.pick input:checked + span{border-color:var(--brand-fg); background:var(--brand-subtle); box-shadow:inset 0 0 0 1px var(--brand); color:var(--brand-fg); font-weight:600}
.pick input:focus-visible + span{outline:2px solid var(--brand-fg); outline-offset:2px}
.dlg-f{display:flex; align-items:center; gap:14px; margin-top:4px; flex-wrap:wrap}
.dlg-f span{font-size:13.5px; color:var(--fg-muted); flex:1; min-width:180px}
.form-status{margin:0; font-size:14px; color:var(--fg-2)} .form-status:empty{display:none}
.sent{padding:44px 26px 40px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px}
.sent .ok{width:56px; height:56px; border-radius:50%; display:grid; place-items:center; animation:dlgin .5s .1s both; border:0; background:var(--st-complete-bg); color:var(--st-complete-fg)}
.sent .ok svg{width:26px; height:26px; stroke-dasharray:30; stroke-dashoffset:30; animation:draw .5s .35s ease forwards}
.sent h2{font-family:var(--font); font-weight:600; font-size:26px}
.sent p{color:var(--fg-2); max-width:40ch; margin-bottom:10px}
@keyframes fadeinq{from{opacity:0} to{opacity:1} }
@keyframes dlgin{from{opacity:0; transform:translateY(18px) scale(.97)} to{opacity:1; transform:none} }
@media (max-width: 900px){
  .dlg-h{padding:18px 18px 16px} .dlg-b{padding:18px} .dlg .two{grid-template-columns:1fr}
}

/* ---------- phone app, coming soon ---------- */
.ph-sec{margin-top:120px; overflow:clip; position:relative; background:var(--bg-surface); border-block:0}
.ph-in{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:64px; align-items:center; min-height:560px; padding-inline:clamp(0px,3vw,40px)}
.ph-copy{display:flex; flex-direction:column; gap:20px; padding:80px 0}
.ph-copy .h2{font-size:clamp(28px,3.4vw,46px)}
.soon{align-self:flex-start; display:inline-flex; align-items:center; gap:9px; height:28px; padding:0 12px; border:0; border-radius:80px; background:var(--brand-subtle); color:var(--brand-fg); font-family:var(--font); font-weight:600; font-size:12.5px}
.soon i{width:6px; height:6px; border-radius:50%; animation:pulse 1.8s ease-in-out infinite; background:var(--brand-accent)}
.ph-stage{position:relative; align-self:end; height:560px; display:flex; justify-content:flex-end; padding-right:32px}
.phone{position:relative; width:286px; height:600px; margin-top:56px; border-radius:40px; padding:10px; transform-origin:50% 100%; border:0; background:#0B1622; box-shadow:var(--shadow-win)}
.screen{height:100%; border-radius:31px; overflow:hidden; display:flex; flex-direction:column; border:0; background:var(--bg-page); color:var(--fg-1)}
.p-bar{display:flex; align-items:center; gap:9px; padding:22px 16px 12px; border-bottom:1px solid var(--border-1); border-bottom-color:var(--border-1)}
.p-bar svg{width:18px; height:20px}
.p-bar b{font-family:var(--font); font-weight:600; font-size:13px}
.p-bar em{margin-left:auto; font-style:normal; display:flex; align-items:center; gap:5px; font-family:var(--font); font-size:10.5px; color:var(--st-complete-fg)}
.p-bar em i{width:5px; height:5px; border-radius:50%; background:var(--st-complete-fg)}
.p-job{margin:12px 14px 0; padding:9px 11px; font-size:12.5px; border:0; border-radius:12px; background:var(--bg-surface); color:var(--fg-muted)}
.p-job b{display:block; font-size:13px; font-family:var(--font); color:var(--fg-1); font-weight:600}
.p-view{margin:12px 14px 0; position:relative}
.p-view .photo{border-radius:8px; aspect-ratio:4/3}
.p-view .corner{position:absolute; width:16px; height:16px; border:1.5px solid var(--brand-fg); border-color:var(--brand-accent)}
.p-view .k1{left:8px; top:8px; border-right:0; border-bottom:0} .p-view .k2{right:8px; top:8px; border-left:0; border-bottom:0}
.p-view .k3{left:8px; bottom:8px; border-right:0; border-top:0} .p-view .k4{right:8px; bottom:8px; border-left:0; border-top:0}
.p-acts{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:12px 14px 0}
.p-acts span{height:44px; display:flex; align-items:center; justify-content:center; gap:8px; font-size:13px; border-radius:12px; font-family:var(--font); font-weight:600}
.p-acts .g{background:var(--brand); color:var(--fg-on-brand)} .p-acts .l{border:0; box-shadow:inset 0 0 0 1px var(--border-2); color:var(--fg-1); font-weight:400}
.p-acts svg{width:15px; height:15px}

.qn{position:absolute; left:-132px; top:236px; width:212px; z-index:2; padding:11px; border:1px solid var(--border-1); border-radius:12px; background:var(--bg-page); color:var(--fg-1); box-shadow:var(--shadow-pop)}
.qn .top{display:flex; align-items:center; gap:8px; margin-bottom:8px; font-family:var(--font); font-weight:600; font-size:11px; color:var(--fg-2)}
.qn .top u{text-decoration:none; padding:1px 5px; font-size:9px; border:0; border-radius:4px; background:var(--bg-hover); font-weight:400}
.qn .top span{margin-left:auto}
.qn .fn{font-size:11.5px; margin-top:7px; font-family:var(--font); color:var(--fg-2)}
.qn .cap2{margin-top:9px; padding-top:8px; border-top:1px solid var(--border-1); font-size:12px; border-top-color:var(--border-1); color:var(--fg-muted)}
@keyframes pulse{0%,100%{opacity:1} 50%{opacity:.3} }
@keyframes phoneUp{from{transform:translateY(260px) rotate(7deg)} to{transform:none} }
@keyframes qnIn{from{opacity:0; transform:translate(var(--qx,150px),var(--qy,-150px)) scale(.55)} to{opacity:1; transform:none} }

/* ---------- fragments matched to the app ---------- */
.app-top{padding-left:16px}

.ti2{flex:1; min-width:0; display:flex; align-items:center; justify-content:center; gap:12px; white-space:nowrap; overflow:hidden; font-family:var(--font); font-weight:600; font-size:13px}
.ti2 em{font-style:normal; color:var(--fg-muted); font-weight:400} .ti2 > i{width:1px; height:14px; background:var(--border-1)} .ti2 b{color:var(--fg-1); font-weight:600}
.abar{display:flex; align-items:center; gap:10px; padding:0 18px; min-width:860px; height:50px; background:var(--bg-page); border-bottom:1px solid var(--border-1); color:var(--fg-muted); font-size:12.5px}
.abar .st{display:flex; align-items:center; gap:8px} .abar .st svg{width:14px; height:14px}
.abar b{font-size:12.5px; margin-left:8px; font-family:var(--font); font-weight:600; color:var(--fg-1)}
.abar .sp{flex:1}
.ab{display:inline-flex; align-items:center; white-space:nowrap; height:30px; padding:0 11px; gap:7px; border:0; border-radius:10px; background:transparent; box-shadow:inset 0 0 0 1px var(--border-1); font-family:var(--font); font-weight:400; font-size:12.5px; color:var(--fg-1)}
.ab svg{flex:none; width:14px; height:14px} .ab.primary{background:var(--brand); color:var(--fg-on-brand); box-shadow:none; font-weight:600}
.ab.big{height:34px; padding:0 14px; font-size:13px}
.ab u{text-decoration:none; font-size:10.5px; min-width:17px; height:17px; border-radius:9px; display:grid; place-items:center; background:var(--brand-subtle); border:0; color:var(--brand-fg)}
.vsep{width:1px; height:18px; background:var(--border-1)}
.arail{width:118px; flex:none; padding:22px 0 0 16px; display:flex; flex-direction:column}
.arail span{height:31px; display:flex; align-items:center; justify-content:center; font-size:12px; position:relative; border:1px solid var(--border-1); border-radius:8px; background:var(--bg-page); font-family:var(--font); font-weight:400; color:var(--fg-muted)}
.arail .grp{display:flex; flex-direction:column; border:1px solid var(--border-1); overflow:hidden; border-color:var(--border-1); border-radius:8px} .arail .grp span{border:0; border-radius:0} .arail .grp span + span{border-top:1px solid var(--border-1); border-top-color:var(--border-1)}
.arail > i{width:1px; height:14px; margin:6px auto; background:var(--border-1)}
.arail .act{border:1px solid var(--border-2); border-radius:8px; padding:0; background:var(--bg-selected); color:var(--fg-1); font-weight:600} .arail .act::before{content:""; position:absolute; left:5px; top:7px; bottom:7px; width:2px; border-radius:1px; background:var(--brand)}
.cap,.hl{grid-template-columns:70px 10px 70px 136px minmax(0,1fr) 52px 52px 52px}
.cap b{grid-column:1/6; font-family:var(--font); font-weight:600; color:var(--fg-1)} .cap span{font-size:11px; font-family:var(--font); font-weight:400; color:var(--fg-muted)}
.hl > span{background:var(--bg-field); border:0; border-radius:8px; font-weight:400}
.hl .dash{border:0; padding:0; text-align:center; color:var(--fg-muted); background:none}
.hl .ty{position:relative; padding-right:22px}
.hl .ty::after{content:""; position:absolute; right:10px; top:50%; width:5px; height:5px; border-right:1.5px solid var(--fg-muted); border-bottom:1.5px solid var(--fg-muted); transform:translateY(-75%) rotate(45deg)}
.hl.s,.cap.s{grid-template-columns:60px 8px 60px 116px minmax(0,1fr) 44px 44px 44px}
.addl{display:flex; align-items:center; gap:10px; height:34px; padding:0 14px; margin-top:10px; font-size:13.5px; border:0; border-radius:8px; background:var(--bg-field); color:var(--fg-muted)}
.addl svg{width:13px; height:13px}
.sect{display:inline-block; margin-bottom:8px; border-radius:5px; min-width:0; padding:0; border:0; background:none; font-family:var(--font); font-weight:600; font-size:13px; color:var(--fg-1)}
.rl .tx{background:var(--bg-field); border:0; border-radius:8px; font-weight:400} .rl .tx.ph{font-weight:400; color:var(--fg-muted); font-style:normal}
.mk em{font-style:normal; color:var(--fg-muted); margin-left:2px} .mk.n svg{width:12px; height:12px}
.layers{height:548px; background:var(--bg-page)}
.lay.np{padding:0 22px 18px; gap:12px; background:var(--scrim)}
.np-h{display:flex; align-items:center; gap:12px; height:56px; margin:0 -22px; padding:0 22px; border-bottom:1px solid var(--border-1)}
.np-h svg{width:24px; height:26px} .np-h b{font-family:var(--font); font-weight:600; font-size:16px}
.fld .k em{font-weight:400; font-size:12px; margin-left:9px; font-family:var(--font); font-style:normal; color:var(--fg-muted)}

.fld .v{border:0; border-radius:8px; background:var(--bg-field); font-weight:400}
.chips span{border:0; border-radius:8px; background:transparent; box-shadow:inset 0 0 0 1px var(--border-1); color:var(--fg-1); font-weight:400}
.chips .on{border-color:var(--brand); background:var(--brand); box-shadow:none; color:var(--fg-on-brand); font-weight:600}
.tchip{display:inline-flex; align-items:center; gap:9px; height:34px; padding:0 14px 0 4px; font-size:14px; border:0; border-radius:80px; background:var(--bg-surface); font-weight:600}
.tchip u{text-decoration:none; font-family:var(--font); font-weight:400; font-size:11.5px; color:var(--st-progress-fg); background:var(--st-progress-bg); border-radius:4px; padding:1px 6px}
.av.r{border-radius:50%; width:26px; height:26px; background:var(--bg-hover); color:var(--fg-1); border:0; font-size:10px}
.todo{font-size:14px; padding:5px 6px; font-weight:400}
.np-f{margin-top:auto; padding-top:12px; border-top:1px solid var(--border-1); display:flex; align-items:center; justify-content:center; gap:26px; font-size:14px; border-top-color:var(--border-1); font-weight:400}
.note{width:270px; padding:0; top:250px; border:1px solid var(--border-1); border-radius:12px; background:var(--bg-page); box-shadow:var(--shadow-pop)}
.note .top{padding:10px 12px; margin:0; border-bottom:1px solid var(--border-1); font-family:var(--font); font-weight:600; font-size:12.5px; color:var(--fg-1); border-bottom-color:var(--border-1)} .note .top .w{color:var(--brand-fg); font-weight:400}
.qrow{display:flex; align-items:center; gap:11px; padding:9px 12px} .qrow + .qrow{border-top:1px solid var(--border-1); border-top-color:var(--border-1)}
.qrow .qi{width:32px; height:32px; flex:none; display:grid; place-items:center; border:0; border-radius:8px; background:var(--bg-hover); color:var(--fg-2)} .qrow .qi svg{width:15px; height:15px}
.qrow .qi.pic{background:linear-gradient(150deg,#4A4E55,#24272B)}
.qrow b{display:block; line-height:1.3; font-weight:600; font-size:13px} .qrow small{font-size:12px; color:var(--fg-muted)}

.act{display:flex; flex-direction:column; gap:3px; padding:14px; border:1px solid var(--border-1); border-radius:9px; background:var(--bg-surface); min-width:0}
.act .r1{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:2px} .act .lab{font-size:10.5px}
 .act b{line-height:1.3; font-size:13.5px; font-weight:600} .act small{font-size:12.5px; color:var(--fg-muted); margin-bottom:12px}
.act .ab{justify-content:center; height:34px; margin-top:auto}
.pj{margin-top:64px; background:var(--bg-page)}
.pj-in{padding:22px; display:flex; flex-direction:column; gap:16px; min-width:900px}
.ch2{display:flex; align-items:center; gap:14px; height:auto; padding:14px 18px 6px; background:none; border-bottom:0; font-family:var(--font); font-weight:600; font-size:13px; color:var(--fg-1)}
.ch2 em{margin-left:auto; font-style:normal; font-weight:400; font-size:11.5px; color:var(--fg-muted)} 

.sched{display:grid; grid-template-columns:repeat(15,1fr); gap:4px; height:18px; margin-top:3px} .sched i{border-radius:3px; background:var(--border-1)} .sched i.f{background:var(--brand)}
.sched-l{display:flex; justify-content:space-between; font-size:12px; color:var(--fg-muted); margin-top:6px}

.pj-cols{display:grid; grid-template-columns:1.9fr 1fr; gap:16px; align-items:start} .pj-l,.pj-r{display:flex; flex-direction:column; min-width:0; gap:14px}
.tdo{display:flex; align-items:center; gap:13px; padding:6px 18px; font-weight:400; font-size:13.5px} .tdo + .tdo{border-top:0}
.tdo i{flex:none; width:15px; height:15px; display:grid; place-items:center; border:1.5px solid var(--fg-2); border-radius:4px; background:transparent}
.tdo.done{text-decoration:line-through; color:var(--fg-muted)} .tdo.done i{background:var(--brand); border-color:var(--brand); color:var(--fg-on-brand)}
.srt{display:grid; align-items:center; grid-template-columns:minmax(0,1fr) auto auto auto; gap:14px; padding:6px 18px 4px; font-size:13px; color:var(--fg-1)}

.srt span{min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .srt b{color:var(--fg-1); display:block; font-weight:600; font-size:13.5px}
.qsec{font-family:var(--font); font-weight:600; font-size:11.5px; color:var(--fg-muted); padding:8px 18px 2px}
.qrow.p{padding:6px 18px}
.hw-b{padding:2px 18px 16px} .hw-b .big{font-family:var(--font); font-weight:600; font-size:22px; line-height:1.3; font-variant-numeric:tabular-nums} .hw-b .big small{font-family:var(--font); font-weight:400; font-size:12px; color:var(--fg-muted); margin-left:6px}
.hw-b .sub{font-size:12.5px; margin:6px 0 12px; color:var(--fg-muted)}
@keyframes segfill{from{background:var(--border-1)} to{background:var(--brand)} }

.win-story .tbar{padding:0 0 0 16px}
.win-story .ti2{justify-content:center; font-size:13px}
/* WCAG 1.4.12 Text Spacing: the story window is content (#13), so its labels wrap or overflow visibly instead of clipping */
.win-story .hl > span{white-space:normal; overflow:visible; text-overflow:clip}
.win-story .fld .v{white-space:normal; overflow:visible; text-overflow:clip}
.win-story .ti2{white-space:normal; overflow:visible; flex-wrap:wrap; row-gap:4px} .win-story .tbar{height:auto; min-height:44px}
/* the hours heads stay at the 11px text floor on one line: at .04em "Normal" takes 46px, so its track is 51px; "Rate A" and "Rate B" take 39px in 42px */
.win-story .cap span{overflow-wrap:anywhere}
.pill-q{border-color:var(--border-1); background:var(--st-neutral-bg); color:var(--st-neutral-fg)}
.lay.np{padding:16px 22px; background:var(--scrim)}
.npc{flex:1; min-height:0; display:flex; flex-direction:column; gap:11px; padding:0 20px 14px; overflow:hidden; border:0; border-radius:16px; background:var(--bg-page); box-shadow:var(--shadow-pop)}
.np-h{height:52px; margin:0 -20px; padding:0 20px; border-bottom:1px solid var(--border-1)}
.hl.s,.cap.s{grid-template-columns:58px 16px 58px 104px minmax(0,1fr) 51px 42px 42px}
.hl.s .tm{padding:5px 2px}
.npc .chips{gap:6px} .npc .chips span{height:28px; padding:0 10px; font-size:12.5px}
.npc .fld .v{height:36px}

/* ---------- hero: dashboard opens into the report ---------- */
.win-hero{position:relative}
.dboard{position:absolute; inset:0; z-index:4; display:flex; min-width:860px; background:var(--bg-page)}
.dside{flex:none; display:flex; flex-direction:column; width:178px; background:var(--bg-page); border-right:1px solid var(--border-1); padding:18px 12px 12px; gap:16px}
.dside .lockup{padding:2px 8px 4px} .dside .lockup svg{width:24px; height:26px}
.dnav{display:flex; flex-direction:column; gap:2px}
.dnav span{display:flex; align-items:center; position:relative; height:32px; gap:10px; padding:0 10px; border-radius:8px; font-family:var(--font); font-weight:400; font-size:13px; color:var(--fg-1)}
.dnav svg{width:16px; height:16px; color:var(--fg-1)} .dnav .on{background:var(--bg-selected); color:var(--fg-1)} .dnav .on svg{color:var(--fg-1)}
.duser{display:flex; margin-top:auto; padding:8px; border:0; border-radius:12px; background:var(--bg-surface); gap:8px; align-items:center} .duser b{display:block; font-size:12.5px; font-weight:600} .duser small{display:flex; align-items:center; gap:5px; font-family:var(--font); font-size:11px; color:var(--fg-muted)}
.dmain{flex:1; min-width:0; padding:0 26px 22px 30px; display:flex; flex-direction:column; gap:14px}
.dtop{display:flex; justify-content:flex-end; height:34px; margin-right:-26px}
.dhead{display:flex; justify-content:space-between; gap:20px; align-items:center; margin:0}
.dhead b{display:block; font-family:var(--font); font-weight:600; font-size:19px; line-height:1.3} .dhead small{display:block; font-size:12px; color:var(--fg-muted)}
.dacts{display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:6px 14px 14px}
.dacts .act{position:relative; padding:16px} .arow{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:12px} .arow .ab{justify-content:center; flex:none; height:32px; padding:0 12px}

.drow{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr) minmax(0,1fr); gap:14px}
.drep{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 18px} .drep + .drep{border-top:0}
.drep .lab{display:block; font-size:11px} .drep b{white-space:nowrap; font-size:13px; font-weight:400}
.cursor{position:absolute; right:30%; bottom:4px; width:24px; height:24px; z-index:2; filter:drop-shadow(0 3px 6px rgba(0,0,0,.6))}
@keyframes dashOut{0%{opacity:1; transform:none; visibility:visible} 99%{visibility:visible} 100%{opacity:0; transform:scale(1.035); visibility:hidden} }
@keyframes repIn{from{opacity:0; transform:scale(.975)} to{opacity:1; transform:none} }
@keyframes curMove{0%{opacity:0; transform:translate(240px,150px)} 25%{opacity:1} 100%{opacity:1; transform:none} }
@keyframes press{0%,100%{transform:none; filter:none} 50%{transform:scale(.955); filter:brightness(1.18)} }

/* hero: the card opens into the report — triggered once, timed and eased */
.stage-track::after{content:""; display:block; height:520px}
.stage-track .stage{position:sticky; top:84px}
.win-hero .rep{position:relative; z-index:7; opacity:0; transform:translateY(10px); pointer-events:none; transition:opacity .22s ease, transform .22s ease}
.win-hero.open .rep{opacity:1; transform:none; pointer-events:auto; transition:opacity .45s ease 1.15s, transform .6s cubic-bezier(.2,.7,.2,1) 1.15s}
.dmain > *,.dside{transition:opacity .4s ease .25s}
.win-hero.open .dmain > *,.win-hero.open .dside{opacity:.3; transition:opacity .5s ease .6s}
.grow{position:absolute; z-index:6; left:var(--gx,30%); top:var(--gy,30%); width:var(--gw,30%); height:var(--gh,30%); opacity:0; pointer-events:none; transition:left .5s cubic-bezier(.6,0,.3,1) .15s, top .5s cubic-bezier(.6,0,.3,1) .15s, width .5s cubic-bezier(.6,0,.3,1) .15s, height .5s cubic-bezier(.6,0,.3,1) .15s, border-radius .5s .15s, background-color .5s .15s, opacity .2s ease .6s; background:var(--bg-page); border:1px solid var(--border-1); border-radius:12px}
.win-hero.open .grow{left:0 !important; top:0 !important; width:100% !important; height:100% !important; border-radius:12px; opacity:1; transition:opacity .1s ease .6s, left .62s cubic-bezier(.7,0,.2,1) .66s, top .62s cubic-bezier(.7,0,.2,1) .66s, width .62s cubic-bezier(.7,0,.2,1) .66s, height .62s cubic-bezier(.7,0,.2,1) .66s, border-radius .62s .66s, background-color .62s .66s; background:var(--bg-page)}
.cursor{opacity:0; transform:translate(240px,150px)}
.win-hero.open .cursor{animation:curGo 1.1s cubic-bezier(.3,.6,.2,1) forwards}
.win-hero.open .press{animation:press .24s ease .5s}
@keyframes curGo{0%{opacity:0; transform:translate(240px,150px)} 14%{opacity:1} 46%{opacity:1; transform:none} 54%{transform:scale(.84)} 62%{opacity:1; transform:none} 100%{opacity:0; transform:none} }
.win-hero:not(.open) .seq,.win-hero:not(.open) .typed,.win-hero:not(.open) .toast{animation:none}
.win-hero.open .d1{animation-delay:1.45s} .win-hero.open .d2{animation-delay:1.62s} .win-hero.open .d3{animation-delay:1.79s} .win-hero.open .d4{animation-delay:1.96s} .win-hero.open .d5{animation-delay:2.25s} .win-hero.open .d6{animation-delay:2.5s}
.win-hero.open .typed{animation-delay:2.9s; animation-duration:2.6s} .win-hero.open .toast{animation-delay:5.8s}
.drow{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr) minmax(0,1fr); gap:14px}
.drep > div{min-width:0} .drep b{display:block; overflow:hidden; text-overflow:ellipsis; font-size:13px; font-weight:400} .drep .pill{flex:none}

/* narrow day card: the description drops to its own line instead of being squeezed */
.win-story{container-type:inline-size}
.lay > .card{flex:none}
@container (max-width: 600px){
  .hl.s,.cap.s{grid-template-columns:58px 16px 58px minmax(0,1fr) 51px 42px 42px}
  .cap.s b{grid-column:1/5}
  .hl.s .ds{grid-column:1/-1; grid-row:2}
  /* between about 901 and 1225px the window is too narrow for the type chip on the first row: it takes the second row under the
     times, beside the description, and the rates keep their columns under the heads (phones keep their own one-row layout) */
  @media (min-width: 901px){
    .hl.s .ty{grid-column:1/4; grid-row:2}
    .hl.s .ds{grid-column:4/-1}
    .hl.s .rc{grid-row:1} .hl.s .ds + .rc{grid-column:5} .hl.s .ds + .rc + .rc{grid-column:6} .hl.s .ds + .rc + .rc + .rc{grid-column:7}
  }
  .hl.s{row-gap:5px; padding:7px 0}
  .hl.s ~ .addl,.lay .team.a6{display:none}
  .win-story .ti2 em,.win-story .ti2 > i{display:none}
}

.gname{display:inline-block; color:var(--brand-accent)}
.gname.na{animation:nameA .5s cubic-bezier(.2,.7,.2,1) both} .gname.nb{animation:nameB .5s cubic-bezier(.2,.7,.2,1) both}
@keyframes nameA{from{opacity:0; transform:translateY(7px)} to{opacity:1; transform:none} }
@keyframes nameB{from{opacity:0; transform:translateY(7px)} to{opacity:1; transform:none} }

/* ---------- motion ---------- */
@keyframes lineup{to{transform:none} }
@keyframes fadeup{from{opacity:0; transform:translateY(28px)} to{opacity:1; transform:none} }
@keyframes fadein{to{opacity:1} }
@keyframes linein{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none} }
@keyframes draw{to{stroke-dashoffset:0} }
@keyframes flow{to{stroke-dashoffset:-24} }
@keyframes ping{0%{opacity:.8; transform:scale(.4)} 100%{opacity:0; transform:scale(2.6)} }
@keyframes type{to{max-width:100%} }
@keyframes blink{to{visibility:hidden} }
@keyframes toastin{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none} }
@keyframes dock{0%{opacity:0; transform:translate(40px,-150px) rotate(3deg)} 35%{opacity:1; transform:translate(40px,-150px) rotate(3deg)} 100%{opacity:1; transform:none} }
@keyframes swapA{0%,42%{opacity:1; transform:none} 50%,92%{opacity:0; transform:translateY(-8px)} 100%{opacity:1; transform:none} }
@keyframes swapB{0%,42%{opacity:0; transform:translateY(8px)} 50%,92%{opacity:1; transform:none} 100%{opacity:0; transform:translateY(8px)} }
@keyframes rise{from{opacity:0; transform:translateY(44px)} to{opacity:1; transform:none} }
@keyframes flatten{to{transform:rotateX(0deg) scale(1)} }
@keyframes growx{from{transform:scaleX(0)} to{transform:scaleX(1)} }
@keyframes fanL{from{transform:translateX(0) rotate(0deg)} to{transform:translateX(-24%) rotate(-6deg)} }
@keyframes fanR{from{transform:translateX(0) rotate(0deg)} to{transform:translateX(24%) rotate(6deg)} }

@supports (animation-timeline: view()){
  .rv{animation:rise linear both; animation-timeline:view(); animation-range:entry 0% entry 42%}
  .win-hero{animation:flatten linear both; animation-timeline:scroll(root); animation-range:0px 560px}
  .prog{animation:growx linear both; animation-timeline:scroll(root)}
  .sched i.f{animation:segfill linear both; animation-timeline:view(); animation-range:cover 18% cover 24%}
  .sched i.f:nth-child(2){animation-range:cover 24% cover 30%} .sched i.f:nth-child(3){animation-range:cover 30% cover 36%}
  .phone{animation:phoneUp linear both; animation-timeline:view(); animation-range:entry 0% cover 42%}
  .qn{animation:qnIn linear both; animation-timeline:view(); animation-range:cover 12% cover 30%}
  .rail{animation:growx linear both; animation-timeline:view(); animation-range:entry 10% cover 45%}
  .pg-l{animation:fanL linear both; animation-timeline:view(); animation-range:entry 30% cover 55%}
  .pg-r{animation:fanR linear both; animation-timeline:view(); animation-range:entry 30% cover 55%}
}
/* the Pause motion button (site.js puts .still on html): the endless animations hold where they are */
html.still .schem .sig,html.still .ring,html.still .caret,html.still .soon i{animation-play-state:paused !important}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{animation:none !important; transition:none !important}
  .h1 .ln span{transform:none} .hero-row,.stage,.seq,.toast,.lay .a,.schem .node,.schem text{opacity:1}
  .schem .draw{stroke-dashoffset:0} .typed{max-width:100%} .win-hero{transform:none}
  .motion{display:none}   /* nothing moves, so there is nothing to pause */
}

/* ---------- small screens ---------- */
@media (max-width: 900px){

  .wrap{width:calc(100% - 32px)}
  .nav-links{display:none; position:absolute; left:0; right:0; top:100%; flex-direction:column; gap:0; margin:0; padding:4px 16px 12px; background:var(--bg-page); border-bottom:1px solid var(--border-1)}
  .nav.menu-open .nav-links{display:flex}
  .nav-links a{display:flex; align-items:center; min-height:50px; padding:0; border-top:1px solid var(--border-1)}
  .nav-links a:first-child{border-top:0}
  .nav-in{justify-content:flex-start; gap:12px}
  .nav .btn{margin-left:auto; min-height:44px; padding:0 14px; font-size:13px}
  .m-menu{display:grid; place-items:center; width:44px; height:44px; border:1px solid var(--border-control); color:var(--fg-2); flex:none}
  .m-menu svg{width:18px; height:18px}

  .hero{padding-top:56px}
  .schem{width:130%; right:-40%; top:10px; opacity:.5}
  /* the Pause motion button moves to the hero's top-right, over the headline, which makes room for it below */
  .motion{top:44px; margin-top:0; right:16px}
  .hero-row{flex-direction:column; align-items:flex-start; gap:26px; margin-top:30px}
  .stage{margin-top:52px}

  .win-body{min-width:700px}

  .sec{padding-top:96px}
  .story{grid-template-columns:1fr; gap:0; margin-top:44px}
  .pin{top:64px; z-index:5; background:var(--bg-page); padding:10px 0 12px; margin-inline:-16px; padding-inline:16px; border-bottom:1px solid var(--border-1)}
  .layers{height:372px}

  .lay{padding:14px; gap:10px}
  .hl.s .ds{display:none}
  .two{gap:10px} .fld .v{height:34px; font-size:13.5px}
  .hide-s{display:none}
  .note{width:170px; right:14px; top:150px}
  .split{gap:8px} .split .card{padding:12px} .split .who{margin-bottom:6px} .split .row{font-size:13px; padding:5px 0} .split .tag{font-size:12px}
  .steps{padding-top:32px; padding-bottom:0}   /* the window is pinned above the steps and the page below keeps it long enough */
  .step{min-height:330px; padding-left:20px}
  .ph-sec{margin-top:80px}
  .ph-in{grid-template-columns:1fr; gap:0; min-height:0}
  .ph-copy{padding:56px 0 8px}
  .ph-stage{height:500px; justify-content:flex-start; padding-left:4px; padding-right:0}
  .phone{width:238px; height:500px; margin-top:40px; border-radius:34px} .screen{border-radius:26px}
  .qn{left:auto; right:-104px; top:236px; width:164px; padding:9px; --qx:-110px; --qy:-40px} .qn .cap2{display:none}
  .arail{display:none} .abar,.app-top{min-width:700px}
  .dside{display:none} .dboard{min-width:700px} .dmain{padding:0 16px 16px} .dtop{margin-right:-16px}
  .stage-track .stage{top:72px} 
  .hl.s,.cap.s{grid-template-columns:52px 16px 52px 96px 51px 42px 42px} .cap.s b{grid-column:1/5} .hl.s > span{padding:5px 5px; font-size:13px}
  .layers{height:372px} .lay.np{padding:10px 12px} .npc{padding:0 12px 10px; gap:8px} .np-h{height:42px; margin:0 -12px; padding:0 12px} 
  .win-story .ti2 em,.win-story .ti2 > i,.win-story .ti2 .pill{display:none} .win-story .ti2{justify-content:flex-start; font-size:12.5px}
  .note{width:214px; top:238px}
   .pj-in{padding:14px}
  .band{height:280px}
  .doc{grid-template-columns:1fr; gap:24px}
  .fan{order:-1}
  .visits{grid-template-columns:1fr; border-left:1px solid var(--brand-fg); margin-left:4px}
  .rail{display:none}
  .visit{padding:0 0 36px 26px; display:block}
  .visit::before{left:-5px; top:6px}
  .visit .yr{margin-top:0}
  .thread{min-height:0}

  .cta{margin-top:96px; padding:88px 0}
  .foot-in{grid-template-columns:1fr; gap:32px}
}
/* the headline starts below the Pause motion button; only where the button shows (reduced motion hides it) */
@media (max-width: 900px) and (prefers-reduced-motion: no-preference){
  .hero-in{padding-top:48px}
}

/* ---------- phones ---------- */
@media (max-width: 700px){
  html{scroll-padding-top:72px}
  .h2{font-size:clamp(28px,8vw,60px)}
  .sec{padding-top:72px}
  .nav-in{height:60px}
  .hero{padding-top:44px}

  .motion{top:32px}
  .h1{font-size:clamp(40px,11.5vw,54px)}
  .hero-row{margin-top:26px; gap:22px}
  .hero-cta{width:100%} .hero-cta .btn{flex:1 1 100%; justify-content:center}
  .stage{margin-top:40px}
  .hero-fade{height:80px; margin-top:-80px}
  /* the three app windows keep their desktop layout at a compact width; site.js zooms them to the column */
  .win-hero{width:560px}
  .dboard{min-width:0}
  .dmain{padding:0 14px 16px 16px} .dtop{margin-right:-14px}

   .drow .card:nth-child(2){display:none}
  .app-top{min-width:0}
  .abar{min-width:0; padding:0 14px; gap:8px}
  .abar .ab:not(.primary) + .ab,.abar .vsep,.abar .vsep ~ *{display:none}
  .win-body{min-width:0}
  .main{padding:14px 14px 20px}
  .cap,.hl{grid-template-columns:56px 8px 56px 110px minmax(0,1fr) 44px 44px}
  .cap span.ot:last-child,.hl .rc.ot:last-child{display:none}
  .toast{right:14px; bottom:12px}
  .story{margin-top:32px; grid-template-columns:minmax(0,1fr)}
  .win-story{width:560px}
  .pin{padding-bottom:6px}
  .step{min-height:300px}
  .pj{width:660px}
  .pj-in{min-width:0; padding:16px}

  /* phone app */
  .ph-sec{margin-top:72px}
  .ph-in{gap:0; min-height:0}
  .ph-copy{padding:48px 0 0}
  .ph-stage{height:auto; justify-content:center; padding:0 0 48px}
  .phone{width:232px; height:478px; margin:24px 0 0; border-radius:34px}
  .screen{border-radius:26px}
  .p-view .photo{aspect-ratio:4/3}
  .qn{left:auto; right:-26px; top:auto; bottom:32px; width:168px; padding:10px; --qx:-90px; --qy:40px}
  .qn .cap2{display:block}
  /* the document */
  .doc{gap:20px}
  .fan{order:0; padding:16px 0 8px}
  .paper,.pg{width:min(380px,78%)}
  .pg{margin-left:calc(min(380px,78%) / -2)}
  .pg-l{transform:translateX(-9%) rotate(-4deg); animation-name:fanLs}
  .pg-r{transform:translateX(9%) rotate(4deg); animation-name:fanRs}
  .stamp{right:0; top:6px; height:30px; font-size:10.5px}
  .doc-pts{margin-top:28px} .doc-pts div{grid-template-columns:32px 1fr; padding:16px 0}

  .sw-row{margin-top:24px; gap:12px}
  .sw-row > .btn{margin-left:0; flex:1 1 100%; justify-content:center}
  /* history, cta, footer */
  .vhead{margin-top:40px} 

  .cta{margin-top:72px; padding:72px 0}
  .cta .h1{font-size:clamp(36px,11vw,92px)}
  .foot{padding:44px 0 40px}
  .foot-in{grid-template-columns:1fr 1fr; gap:28px 20px}
  .foot-in > div:first-child{grid-column:1/-1}
  .legal{margin-top:32px}
}
@keyframes fanLs{from{transform:translateX(0) rotate(0deg)} to{transform:translateX(-9%) rotate(-4deg)} }
@keyframes fanRs{from{transform:translateX(0) rotate(0deg)} to{transform:translateX(9%) rotate(4deg)} }

/* ---------- the console look: the logo, the theme toggle, the app windows ---------- */
.req,.fine{color:var(--fg-muted)}
/* the STYYR wordmark is the logo, alone; it takes the wordmark colour (navy, white in the dark) */
.lockup svg.wmk,.wmk{display:block; width:auto; height:18px; aspect-ratio:117.86/24.26; color:var(--wordmark)}

.nav .lockup svg.wmk{height:26px}
.foot .lockup svg.wmk{height:30px}
/* light / dark, in the nav: a moon while light, a sun while dark, as in the console's title bar. It needs the page's
   script, so a page without it shows none */
.theme-t{width:40px; height:40px; flex:none; display:grid; place-items:center; border-radius:10px; color:var(--fg-1); cursor:pointer; text-align:center; transition:background-color .12s}
.theme-t:hover{background:var(--bg-hover)}
.theme-t svg{width:19px; height:19px}
.theme-t .i-sun,[data-scheme="dark"] .theme-t .i-moon{display:none}
[data-scheme="dark"] .theme-t .i-sun{display:block}
:root:not([data-scheme]) .theme-t{display:none}
.nav-in .theme-t{margin-right:-16px}
.nav.menu-open .m-menu{border-color:var(--brand); color:var(--brand-fg)}
.tbar .lockup .wmk{height:13px}
.pill-p{background:var(--st-progress-bg); color:var(--st-progress-fg)}
/* the console's title bar in the app windows: Back, Forward and Up, search, theme, bell, the window buttons */
.nb2{display:flex; align-items:center; gap:6px}
.ib{width:30px; height:30px; flex:none; display:grid; place-items:center; border-radius:8px; box-shadow:inset 0 0 0 1px var(--border-1); color:var(--fg-1)}
.ib svg{width:14px; height:14px}
.ib.dis{color:var(--fg-muted); opacity:.6}
.up{display:inline-flex; align-items:center; gap:6px; height:30px; padding:0 10px; border-radius:8px; box-shadow:inset 0 0 0 1px var(--border-1); font-weight:600; font-size:12.5px; color:var(--fg-1); white-space:nowrap}
.up svg{width:13px; height:13px}
.tsp{flex:1}
.srch{display:flex; align-items:center; gap:7px; width:160px; height:30px; padding:0 10px; border-radius:8px; background:var(--bg-field); color:var(--fg-muted); font-size:12px}
.srch svg{width:13px; height:13px}
.ic{width:30px; height:30px; display:grid; place-items:center; color:var(--fg-1)}
.ic svg{width:15px; height:15px}
.vdiv{width:1px; height:18px; background:var(--border-1); margin:0 4px}
.win .card{background:var(--bg-surface); border:0; border-radius:14px}
.ch2 .lnk{margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-weight:400; font-size:12.5px; color:var(--fg-1)}
.ch2 .lnk svg{width:13px; height:13px}
.ch2 .tabs{margin-left:auto; display:flex; gap:2px}
.ch2 .tabs span{font-weight:400; font-size:12px; padding:3px 9px; border-radius:8px; color:var(--fg-2)}
.ch2 .tabs .on{background:var(--bg-hover); color:var(--fg-1)}
/* the console's sidebar and dashboard */
.dside .lockup .wmk{height:16px}
.dnav .on::before{content:""; position:absolute; left:-12px; top:8px; width:4px; height:16px; border-radius:0 2px 2px 0; background:var(--brand)}
.duser .av.r{width:28px; height:28px}
.duser small i{width:6px; height:6px; border-radius:50%; background:var(--st-complete-fg)}
.fbk{margin-left:auto; color:var(--fg-2); display:grid}
.fbk svg{width:16px; height:16px}
.dboard .dmain{padding:0; gap:0}
.dboard .dtop,.pj .dtop{height:52px; margin:0; padding:0 0 0 18px; display:flex; align-items:center; justify-content:flex-start; gap:6px; border-bottom:1px solid var(--border-1)}
.dbody{padding:16px 22px 18px; display:flex; flex-direction:column; gap:14px; min-height:0}
.dacts .act,.act{position:relative; gap:2px; padding:12px 14px; border:1px solid var(--border-1); border-radius:12px; background:var(--bg-page)}
.act .r1 .lab{font-size:11.5px}
.arow small{margin:0; font-size:11.5px; color:var(--fg-muted)}
.bars{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px; margin-top:8px; align-items:end}
.bc{display:flex; flex-direction:column; align-items:center; gap:3px}
.bc em{font-style:normal; font-size:10px; color:var(--fg-2); font-variant-numeric:tabular-nums}
.bt{width:100%; max-width:16px; height:44px; border-radius:5px; background:var(--bg-hover); display:flex; flex-direction:column; justify-content:flex-end; gap:2px; overflow:hidden}
.bt i{display:block; width:100%}
.bc small{font-size:10px; color:var(--fg-muted)}
.bc.now small{color:var(--fg-1); font-weight:600}
.lg{display:flex; flex-wrap:wrap; gap:4px 12px; margin-top:10px; padding-top:8px; border-top:1px solid var(--border-1); font-size:11px; color:var(--fg-2)}
.lg span{display:flex; align-items:center; gap:5px}
.lg i{width:6px; height:6px; border-radius:50%}
.lg b{font-weight:600; color:var(--fg-1)}
.cal{position:relative; display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:3px; margin-top:6px}
.cd{height:104px; border-radius:6px; background:var(--bg-hover); display:flex; flex-direction:column; align-items:center; padding-top:5px; line-height:1.3}
.cd small{font-size:9.5px; color:var(--fg-muted)}
.cd b{font-size:10.5px; font-weight:600}
.cd.now{background:var(--brand-subtle)}
.cd.now small,.cd.now b{color:var(--brand-fg); font-weight:600}
.job{position:absolute; left:2px; right:2px; top:42px; padding:5px 7px; border-radius:6px; background:var(--bg-page); box-shadow:inset 0 0 0 1px var(--brand); font-size:10px; color:var(--fg-muted); line-height:1.35}
.job b{display:block; font-size:10.5px; font-weight:600; color:var(--fg-1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.app-top .ti2{justify-content:flex-start; margin-left:10px}
.hl,.rl{border-top:1px solid var(--border-1)}
.npi{width:30px; height:30px; display:grid; place-items:center; border-radius:8px; background:var(--brand-subtle); color:var(--brand-fg)}
.npi svg{width:16px; height:16px}
.lay .team .pill{background:var(--bg-hover); color:var(--fg-2); border-radius:6px; padding:0 7px}

.branch::before,.branch::after{border-color:var(--border-2)}
/* the console's project page */
.pj-shell{display:flex; min-width:1000px}
.pj-main{flex:1; min-width:0; display:flex; flex-direction:column}
.pj .pj-in{min-width:0; padding:18px 24px 24px; gap:14px}
.pjh small{font-size:12px; color:var(--fg-muted)}
.pjh div{display:flex; align-items:center; gap:10px; margin-top:2px}
.pjh b{font-weight:600; font-size:21px; line-height:1.3}
.pjs{padding:12px 16px 14px}
.pjs .sched-l{display:flex; justify-content:space-between; margin:0 0 7px; font-size:11.5px; color:var(--fg-muted)}
.pjs .sched-l b{color:var(--fg-1); font-weight:600}
.pjs .sched{grid-template-columns:repeat(15,minmax(0,1fr)); gap:3px; height:12px; margin:0}
.sched i.now{box-shadow:0 0 0 2px var(--bg-surface),0 0 0 3.5px var(--brand)}
.pj .pj-cols{grid-template-columns:minmax(0,1fr) 290px; gap:14px}
.pj .card{padding-bottom:12px}
.srt small{display:block; font-size:11.5px; color:var(--fg-muted); overflow:hidden; text-overflow:ellipsis}
.srt .num{font-variant-numeric:tabular-nums}
.srt .ab{height:32px; padding:0 12px}
.tdo i svg{width:11px; height:11px}
.pj .addl{margin:6px 18px 0; height:32px}
.dts{margin:0; padding:4px 18px 2px; display:flex; flex-direction:column; gap:8px}
.dts div{display:grid; grid-template-columns:88px minmax(0,1fr); align-items:center; font-size:13px}
.dts dt{font-size:12px; color:var(--fg-muted)}
.dts dd{margin:0}
.dts .ni{color:var(--fg-muted)}
.tm{display:flex; align-items:center; gap:10px; padding:4px 18px 2px}
.tm .av.r{width:30px; height:30px}
.tm b{display:block; font-size:13px; font-weight:600}
.tm small{font-size:11.5px; color:var(--fg-muted)}
.tm .pill{margin-left:auto}
.pj .hw-b .wk{height:6px; border-radius:3px; margin-top:10px}
.hrows{margin-top:8px}
.hrows div{display:flex; align-items:center; gap:8px; padding:3px 0; font-size:12.5px}
.hrows i{width:6px; height:6px; border-radius:50%}
.hrows b{margin-left:auto; font-weight:600; font-variant-numeric:tabular-nums}
.p-bar .wmk{height:12px}
.visit .yr.accent{color:var(--brand-accent)}
.foot nav a,.flink{color:var(--fg-2)}
.foot nav a:hover,.flink:hover{color:var(--brand-fg)}
.dlg-h .wmk{height:15px; margin-top:8px; color:var(--wordmark)}
.dlg-h h2,.sent h2{font-family:var(--font); font-weight:600}
.dlg-h p,.sent p{color:var(--fg-2)}
.dlg-f span,.form-status{color:var(--fg-muted)}
/* the phone section and the call to action are inset panels, the console's flat tinted cards */
.ph-sec,.cta{width:min(1240px,calc(100% - 32px)); margin-inline:auto; border-radius:24px; border:0}
@media (max-width: 700px){
  .nav .lockup svg.wmk{height:20px}
}
@media (max-width: 900px){
  .nav-in .theme-t{margin:0 0 0 auto}
  .nav .btn{margin-left:0}
}
@media (max-width: 700px){
  .nav-in{gap:8px}
  .theme-t{width:36px}
  .nav .btn{padding:0 12px}
}
@media (max-width: 900px){
  .visits{border-left-color:var(--brand-accent)}
  .nav-links{background:var(--bg-page); border-bottom-color:var(--border-1); box-shadow:var(--shadow-pop)}
  .nav-links a{color:var(--fg-1); border-top-color:var(--border-1)}
  .pin{background:var(--bg-page); border-bottom-color:var(--border-1)}
  .dbody{padding:14px 16px 16px}
  .srch{display:none}
  .pj-shell{min-width:700px}
}
@media (max-width: 700px){
  .pj-shell{min-width:0}
  .pj .pj-cols{grid-template-columns:minmax(0,1fr) 230px}
  .dacts{grid-template-columns:1fr 1fr; padding:6px 12px 12px}
}
/* without the eyebrow above it, the headline keeps its distance from the nav */
@media (min-width: 901px){
  .hero{padding-top:112px}
}