/* TandemPartners
   Layout: airy white page with a soft gradient hero field, two-tone headlines (ink + muted),
   a dark product console, a sticky step-by-step explainer, and deep navy "night" bands.
   Navy carries the brand; orange appears only in small signals (dots, active markers, glow). */

@font-face{font-family:"Plus Jakarta Sans";font-weight:600;font-style:normal;font-display:swap;src:url(/fonts/plus-jakarta-sans-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Plus Jakarta Sans";font-weight:700;font-style:normal;font-display:swap;src:url(/fonts/plus-jakarta-sans-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Plus Jakarta Sans";font-weight:800;font-style:normal;font-display:swap;src:url(/fonts/plus-jakarta-sans-latin-800-normal.woff2) format("woff2")}
@font-face{font-family:"Inter";font-weight:400;font-style:normal;font-display:swap;src:url(/fonts/inter-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Inter";font-weight:500;font-style:normal;font-display:swap;src:url(/fonts/inter-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Inter";font-weight:600;font-style:normal;font-display:swap;src:url(/fonts/inter-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:400;font-style:normal;font-display:swap;src:url(/fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:500;font-style:normal;font-display:swap;src:url(/fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2")}

:root{
  --ink:#0D1830;          /* text + primary buttons */
  --navy:#152646;         /* brand navy */
  --navy-2:#24385F;
  --dim:#6E7891;          /* second line of headlines on white (large text only) */
  --muted:#545E75;
  --line:#E3E7EF;
  --line-soft:#EDF0F5;
  --bg:#FFFFFF;
  --box:#F5F7FA;
  --orange:#ED702C;
  --ok:#1A7A50;
  --night:#0A1224;
  --night-2:#121D36;
  --on-night:#EAF0F8;
  --on-night-muted:#A6B0C5;
  --on-night-dim:#8E98AF;
  --on-night-line:rgba(255,255,255,.1);

  --display:"Plus Jakarta Sans","Segoe UI",Roboto,Arial,sans-serif;
  --body:"Inter","Segoe UI",Roboto,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;

  --wrap:1180px;
  --r-lg:22px;
  --r:16px;
  --r-sm:10px;
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:90px}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.6 var(--body);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
p{margin:0}
ul,ol{margin:0;padding:0}
[hidden]{display:none!important}
h1,h2,h3,h4{margin:0;font-family:var(--display);color:inherit;text-wrap:balance}
h1{font-size:clamp(2.6rem,6.4vw,4.6rem);font-weight:700;letter-spacing:-.045em;line-height:1.03}
h2{font-size:clamp(2.2rem,5vw,4rem);font-weight:700;letter-spacing:-.042em;line-height:1.02}
h3{font-size:1.3rem;font-weight:700;letter-spacing:-.025em;line-height:1.25}
.dim{color:var(--dim)}
.night .dim{color:var(--on-night-dim)}

.wrap{max-width:var(--wrap);margin:0 auto;padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}
.label{font:500 .74rem/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.night .label{color:var(--on-night-muted)}

:focus-visible{outline:2px solid var(--navy-2);outline-offset:3px;border-radius:6px}
.night :focus-visible{outline-color:var(--orange)}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:#fff;padding:10px 16px;border-radius:8px;font-weight:600;text-decoration:none}
.skip:focus{top:12px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;border-radius:999px;background:var(--ink);color:#fff;font:600 .98rem/1 var(--body);text-decoration:none;border:0;cursor:pointer;transition:transform .15s,background .15s}
.btn:hover{background:var(--navy-2)}
.btn:active{transform:translateY(1px)}
.btn svg{width:16px;height:16px;transition:transform .15s}
.btn:hover svg{transform:translateX(2px)}
.btn.light{background:#fff;color:var(--ink)}
.btn.light:hover{background:#E9EEF7}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.btn.ghost:hover{background:var(--box)}
.btn.sm{min-height:40px;padding:0 18px;font-size:.92rem}
.btn.wide{width:100%}
.link{font-weight:500;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;text-decoration-color:rgba(13,24,48,.35)}
.link:hover{text-decoration-color:currentColor}

/* header */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:41;background:#fff}
.site-header{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:rgba(255,255,255,.86);-webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid transparent;transition:border-color .2s}
.site-header.scrolled{border-bottom-color:var(--line)}
.site-header .wrap{display:flex;align-items:center;gap:32px;min-height:72px}
.brand{flex:none;display:block}
.brand img{height:34px;width:auto}
.nav{display:flex;align-items:center;gap:28px;flex:1}
.nav a{text-decoration:none;color:var(--muted);font-size:.95rem;font-weight:500}
.nav a:hover{color:var(--ink)}
.header-cta{margin-left:auto}
.menu-toggle{display:none;margin-left:auto;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);color:var(--ink);font:600 .92rem var(--body);padding:9px 14px;border-radius:999px;cursor:pointer}
.menu-toggle svg{width:16px;height:16px}
@media (max-width:900px){
  .nav{display:none;position:absolute;left:16px;right:16px;top:calc(100% + 8px);flex-direction:column;align-items:stretch;gap:2px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:8px;box-shadow:0 24px 50px rgba(13,24,48,.14)}
  .nav.open{display:flex}
  .nav a{padding:13px 14px;border-radius:10px;color:var(--ink)}
  .nav a:hover{background:var(--box)}
  .nav .nav-mobile-cta{display:flex;margin-top:6px;color:#fff}
  .nav .nav-mobile-cta:hover{background:var(--navy-2);color:#fff}
  .menu-toggle{display:inline-flex}
  .header-cta{display:none}
  .brand img{height:30px}
}
@media (min-width:901px){.nav .nav-mobile-cta{display:none}}

/* hero */
.hero{position:relative;isolation:isolate;overflow:hidden;padding-block:88px 72px}
.hero .field{position:absolute;inset:0;z-index:-1;pointer-events:none}
.hero .field::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(21,38,70,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(21,38,70,.06) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse 70% 55% at 50% 30%,#000 30%,transparent 75%);mask-image:radial-gradient(ellipse 70% 55% at 50% 30%,#000 30%,transparent 75%)}
.blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.75}
.blob.b1{width:520px;height:420px;left:-120px;top:120px;background:#C7D6F6}
.blob.b2{width:560px;height:440px;left:32%;top:440px;background:#D5DAF7}
.blob.b3{width:480px;height:400px;right:-120px;top:160px;background:#FFDCC8}
.hero-copy{text-align:center;display:grid;justify-items:center;gap:24px}
.hero-copy h1{max-width:16ch}
.hero-copy .sub{font-size:1.18rem;line-height:1.55;color:var(--muted);max-width:46ch}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:4px}
.hero-note{font-family:var(--mono);font-size:.8rem;color:var(--muted);letter-spacing:.02em}
@media (prefers-reduced-motion:no-preference){
  .rise{animation:rise 1s cubic-bezier(.16,1,.3,1) both}
  .rise.d1{animation-delay:.08s}.rise.d2{animation-delay:.16s}.rise.d3{animation-delay:.24s}.rise.d4{animation-delay:.34s}
  @keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
}

/* console mockup */
.console-wrap{margin-top:64px;position:relative}
.console{max-width:1040px;margin:0 auto;background:var(--night);color:var(--on-night);border-radius:20px;border:1px solid rgba(255,255,255,.08);box-shadow:0 50px 100px -30px rgba(13,24,48,.55),0 0 0 8px rgba(255,255,255,.55);display:grid;grid-template-columns:270px minmax(0,1fr);overflow:hidden;font-size:.86rem;text-align:left}
.c-side{border-right:1px solid var(--on-night-line);display:flex;flex-direction:column;min-width:0}
.c-side-head{display:flex;align-items:center;gap:10px;padding:16px;border-bottom:1px solid var(--on-night-line)}
.c-side-head img,.c-side-head .shop-logo{width:30px;height:30px;flex:none}
.c-side-head b{display:block;font-size:.86rem}
.c-side-head small{display:block;color:var(--on-night-dim);font-size:.74rem}
.c-group{display:flex;justify-content:space-between;align-items:center;padding:14px 16px 6px;font:500 .66rem var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--on-night-dim)}
.c-av{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font:600 .7rem var(--body);background:rgba(255,255,255,.1);color:var(--on-night)}
.c-side-foot{margin-top:auto;padding:14px 16px;border-top:1px solid var(--on-night-line);display:flex;align-items:center;gap:8px;color:var(--on-night-muted);font-size:.78rem}
.live-dot{width:7px;height:7px;border-radius:50%;background:#3BD18A;box-shadow:0 0 0 4px rgba(59,209,138,.16)}
.c-main{display:flex;flex-direction:column;min-width:0}
.c-main-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px;border-bottom:1px solid var(--on-night-line)}
.c-main-head b{font-size:.88rem}
.c-main-head small{color:var(--on-night-dim);font-size:.76rem;margin-left:8px}
.pill{display:inline-flex;align-items:center;gap:7px;padding:4px 10px;border-radius:999px;font:500 .7rem var(--mono);letter-spacing:.04em;background:rgba(59,209,138,.12);color:#7FE3B4}
.c-thread{padding:20px;display:flex;flex-direction:column;gap:12px;flex:1}
.msg{max-width:78%;padding:10px 14px;border-radius:14px;line-height:1.45}
.msg.caller{align-self:flex-end;background:#EEF2F8;color:var(--ink);border-bottom-right-radius:4px}
.msg.ai{align-self:flex-start;background:rgba(255,255,255,.07);border:1px solid var(--on-night-line);border-bottom-left-radius:4px}
.msg{position:relative}
.msg .dots{display:none;position:absolute;top:0;gap:5px;align-items:center;padding:12px 14px;border-radius:14px}
.msg.ai .dots{left:0;color:var(--on-night);background:rgba(255,255,255,.07);border:1px solid var(--on-night-line);border-bottom-left-radius:4px}
.msg.caller .dots{right:0;color:var(--ink);background:#EEF2F8;border-bottom-right-radius:4px}
.msg .dots i{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.5;animation:blink 1.1s infinite ease-in-out}
.msg .dots i:nth-child(2){animation-delay:.18s}.msg .dots i:nth-child(3){animation-delay:.36s}
@keyframes blink{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:.9;transform:translateY(-2px)}}
.anim .msg,.anim .c-card,.anim .c-row,.anim .c-input{opacity:0;transform:translateY(8px);transition:opacity .45s ease,transform .45s ease}
.anim .msg.typing{opacity:1;transform:none;background:transparent;border-color:transparent;transition:none}
.anim .msg.typing{color:transparent}
.anim .msg.typing .who{visibility:hidden}
.anim .msg.typing .dots{display:flex}
.anim .msg.shown,.anim .c-card.shown,.anim .c-row.shown,.anim .c-input.shown{opacity:1;transform:none}
.anim .c-row .ck{transform:scale(.4);transition:transform .35s cubic-bezier(.3,1.6,.5,1) .15s}
.anim .c-row.shown .ck{transform:scale(1)}
.msg .who{display:block;font:500 .64rem var(--mono);letter-spacing:.1em;text-transform:uppercase;opacity:.72;margin-bottom:3px}
.c-card{align-self:flex-start;width:min(100%,420px);border:1px solid var(--on-night-line);background:rgba(255,255,255,.04);border-radius:12px;padding:12px 14px;display:grid;gap:8px}
.c-card-head{display:flex;justify-content:space-between;align-items:center;font-size:.8rem;color:var(--on-night-muted)}
.c-row{display:grid;grid-template-columns:22px 1fr;gap:8px;align-items:center;font-size:.82rem;padding:7px 9px;background:rgba(255,255,255,.04);border-radius:8px}
.c-row .ck{width:16px;height:16px;border-radius:50%;background:rgba(59,209,138,.18);display:grid;place-items:center;color:#7FE3B4}
.c-row .ck svg{width:10px;height:10px}
.c-row em{font-style:normal;color:var(--on-night-dim)}
.c-input{display:flex;align-items:center;gap:10px;margin:0 20px 18px;padding:12px 14px;border:1px solid var(--on-night-line);border-radius:12px;color:var(--on-night-dim);font-size:.82rem}
.c-input .send{margin-left:auto;width:28px;height:28px;border-radius:50%;background:#fff;color:var(--ink);display:grid;place-items:center}
.c-input .send svg{width:14px;height:14px}
.c-head-tags{display:flex;align-items:center;gap:8px}
.ex-tag{font:500 .68rem var(--mono);letter-spacing:.06em;padding:4px 9px;border-radius:999px;background:rgba(255,255,255,.08);color:var(--on-night-muted)}
.console-caption{margin-top:18px;text-align:center;font:400 .76rem var(--mono);color:#3B4459}
@media (max-width:760px){.console{grid-template-columns:1fr}.c-side{display:none}.msg{max-width:90%}.c-main-head small{display:none}}
@media (max-width:560px){.hide-sm{display:none}}


/* console: clickable conversations */
.c-list{display:grid;gap:2px}
.c-item{appearance:none;border:0;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer;display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:10px;align-items:start;padding:10px 12px;margin:0 6px;border-radius:10px;transition:background .25s}
.c-item:hover{background:rgba(255,255,255,.05)}
.c-item.active{background:rgba(255,255,255,.09);box-shadow:inset 2px 0 0 var(--orange)}
.c-item:focus-visible{outline:2px solid var(--orange);outline-offset:1px}
.c-txt{min-width:0}
.c-txt b{display:block;font-weight:600;font-size:.84rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c-txt span{display:block;color:var(--on-night-dim);font-size:.76rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c-item time{font:400 .68rem var(--mono);color:var(--on-night-dim);padding-top:2px}
.c-hint{font:500 .62rem var(--mono);letter-spacing:.08em;color:#FFB48A;text-transform:none}
.c-main{display:grid;min-width:0}
.c-pane{grid-area:1/1;display:flex;flex-direction:column;min-width:0}
.c-pane:not(.on){visibility:hidden}
.c-note{align-self:center;font:500 .72rem var(--mono);color:var(--on-night-muted);background:rgba(255,255,255,.05);border:1px solid var(--on-night-line);border-radius:999px;padding:5px 12px;text-align:center}
.anim .c-note{opacity:0;transform:translateY(4px);transition:opacity .6s ease-out,transform .6s ease-out}
.anim .c-note.shown{opacity:1;transform:none}
@media (max-width:760px){
  .console .c-side{display:block;border-right:0;border-bottom:1px solid var(--on-night-line)}
  .c-side-head,.c-group,.c-side-foot{display:none}
  .c-list{display:flex;overflow-x:auto;gap:6px;padding:10px;scrollbar-width:none}
  .c-list::-webkit-scrollbar{display:none}
  .c-item{flex:none;margin:0;grid-template-columns:26px auto;padding:8px 12px 8px 8px;border:1px solid var(--on-night-line)}
  .c-item time,.c-txt span{display:none}
  .c-av{width:26px;height:26px}
  .c-item.active{box-shadow:none;border-color:rgba(237,112,44,.6)}
}

/* strip */
.strip{border-block:1px solid var(--line-soft);overflow:hidden;padding-block:22px;margin-top:8px}
.strip-track{display:flex;gap:44px;width:max-content}
.strip-item{display:flex;align-items:center;gap:10px;color:var(--muted);font-weight:500;white-space:nowrap}
.strip-item svg{width:18px;height:18px;color:var(--navy)}
@media (prefers-reduced-motion:no-preference){.strip-track{animation:marquee 46s linear infinite}@keyframes marquee{to{transform:translateX(-50%)}}}
@media (prefers-reduced-motion:reduce){.strip-track{flex-wrap:wrap;width:auto;justify-content:center;gap:16px 32px}.strip-track [aria-hidden="true"]{display:none}}

/* sections */
.section{padding-block:120px}
.section.tight{padding-block:96px}
.box{background:var(--box)}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:64px;align-items:start}
.split .lead{font-size:1.1rem;color:var(--muted);max-width:44ch}
.center-head{text-align:center;display:grid;justify-items:center;gap:16px;margin-bottom:72px}
.center-head p{font-size:1.12rem;color:var(--muted);max-width:52ch}
.row-head{display:flex;justify-content:space-between;align-items:end;gap:32px;margin-bottom:48px;flex-wrap:wrap}
.row-head h2{max-width:16ch}
.row-head p{max-width:36ch;color:var(--muted);text-align:right}
@media (max-width:900px){.split{grid-template-columns:1fr;gap:36px}.section{padding-block:84px}.row-head p{text-align:left}}

/* diagram card */
.diagram{background:var(--box);border:1px solid var(--line-soft);border-radius:var(--r-lg);padding:22px 20px 24px;margin-top:28px;position:relative;overflow:hidden}

/* steps: plays slowly once in view, any step can be clicked */
.steps{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:start}
.step-list{list-style:none;display:grid}
.step{border-top:1px solid var(--line)}
.step:first-child{border-top:0}
.step-btn{all:unset;box-sizing:border-box;display:grid;grid-template-columns:118px minmax(0,1fr);column-gap:16px;width:100%;padding:24px 0 26px;cursor:pointer;position:relative}
.step:first-child .step-btn{padding-top:4px}
.step-btn:focus-visible{outline:2px solid var(--navy-2);outline-offset:4px;border-radius:8px}
.when{grid-column:1;grid-row:1/3;display:flex;align-items:center;gap:10px;align-self:start;font:500 .72rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#4B556C;padding-top:9px}
.when .num{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;border:1px solid var(--line);font:600 .74rem var(--mono);letter-spacing:0;color:var(--muted);background:#fff;flex:none;transition:background .3s,color .3s,border-color .3s}
.step.active .when{color:var(--ink)}
.step.active .when .num{background:var(--ink);border-color:var(--ink);color:#fff}
.step-title{grid-column:2;font:700 clamp(1.5rem,2.4vw,2rem)/1.2 var(--display);letter-spacing:-.035em;color:#6E7891;transition:color .3s}
.step-btn:hover .step-title{color:#5E6880}
.step.active .step-title{color:var(--ink)}
.step-desc{grid-column:2;display:block;margin-top:12px;color:var(--muted);max-width:44ch;font-size:1rem;line-height:1.6}
.js .step-desc{display:grid;grid-template-rows:0fr;margin-top:0;opacity:0;transition:grid-template-rows .5s ease,opacity .45s ease,margin-top .5s ease}
.js .step.active .step-desc{grid-template-rows:1fr;opacity:1;margin-top:12px}
.step-desc > span{display:block;overflow:hidden;min-height:0}
.progress{position:absolute;left:134px;right:0;bottom:-1px;height:2px;background:transparent;opacity:0;transition:opacity .3s}
.progress i{display:block;height:100%;width:0;background:var(--ink)}
.js .step.active .progress{opacity:1}
.step.active.running .progress i{animation:fillbar var(--step-ms,14000ms) linear forwards}
.steps.hold .step.active .progress i{animation-play-state:paused}
.steps.manual .progress{display:none}
@keyframes fillbar{from{width:0}to{width:100%}}
@media (min-width:901px){.steps-left{min-height:520px}.panel{min-height:500px}}

.panel{position:sticky;top:110px;background:radial-gradient(120% 90% at 85% 10%,#1B2B52 0,transparent 55%),radial-gradient(90% 80% at 10% 100%,rgba(237,112,44,.16) 0,transparent 55%),var(--night);color:var(--on-night);border-radius:20px;border:1px solid rgba(255,255,255,.06);box-shadow:0 40px 80px -30px rgba(13,24,48,.5);min-height:470px;padding:22px;overflow:hidden}
.panel-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:12px}
.panel-head .tagp{flex:none}
.panel-step{display:block;font:500 .7rem var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--on-night-muted);margin-bottom:4px}
.panel-step b{color:#FFB48A;font-weight:500}
.panel-title{font-size:1.05rem;color:var(--on-night)}
.panel-dots{display:flex;gap:6px;margin-bottom:18px}
.panel-dots i{display:block;height:4px;flex:1;border-radius:2px;background:rgba(255,255,255,.12);transition:background .3s}
.panel-dots i.on{background:#9DB3E8}
.panel-dots i.done{background:rgba(157,179,232,.45)}
.panel{display:flex;flex-direction:column}
.view{display:grid;gap:10px;animation:fadein .4s ease both}
@keyframes fadein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.vrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid var(--on-night-line);font-size:.88rem}
.vrow small{display:block;color:var(--on-night-dim);font-size:.76rem;margin-top:2px}
.vrow .arrow{color:var(--orange);font-family:var(--mono)}
.tagp{font:500 .68rem var(--mono);letter-spacing:.06em;padding:4px 9px;border-radius:999px;background:rgba(59,209,138,.12);color:#7FE3B4;white-space:nowrap}
.tagp.warn{background:rgba(237,112,44,.15);color:#FFB48A}
.tagp.muted{background:rgba(255,255,255,.08);color:var(--on-night-muted)}
.vfoot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:6px;padding-top:14px;border-top:1px dashed var(--on-night-line);font-size:.8rem;color:var(--on-night-muted);flex-wrap:wrap}
.bars{display:grid;gap:14px}
.bar{display:grid;gap:6px;font-size:.84rem}
.bar .top{display:flex;justify-content:space-between;color:var(--on-night-muted)}
.bar .top b{color:var(--on-night);font-variant-numeric:tabular-nums}
.bar .track{height:10px;border-radius:999px;background:rgba(255,255,255,.07);overflow:hidden}
.bar .fill{height:100%;border-radius:inherit;background:linear-gradient(90deg,#5E7BC4,#9DB3E8);transform-origin:left;animation:grow .9s cubic-bezier(.2,.7,.2,1) both}
.bar .fill.or{background:linear-gradient(90deg,#C9561C,#ED702C)}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.step-m-desc{display:none}
/* phones: four compact step tabs, the active step's text, then the panel. Nothing moves when a step changes. */
@media (max-width:900px){
  .steps{grid-template-columns:1fr;gap:18px}
  .panel{position:relative;top:0}
  .step-list{grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;border-bottom:1px solid var(--line)}
  .step{border-top:0}
  .step-btn,.step:first-child .step-btn{display:flex;flex-direction:column;align-items:center;gap:8px;padding:4px 2px 14px;text-align:center}
  .when{font-size:0;letter-spacing:0;padding:0;margin:0;gap:0}
  .step-title{font-size:.82rem;line-height:1.25;letter-spacing:-.01em;color:#4B556C}
  .js .step-desc,.step-desc{display:none}
  .progress{left:4px;right:4px;bottom:-1px}
  .step-m-desc{display:block;margin:16px 0 0;color:var(--muted);font-size:1rem;line-height:1.6}
}

/* package (setup + management sold together) */
.package{border-radius:var(--r-lg);padding:30px;background:radial-gradient(90% 70% at 100% 0%,#1B2B52 0,transparent 60%),radial-gradient(60% 60% at 0% 100%,rgba(237,112,44,.12) 0,transparent 60%),var(--night);color:var(--on-night);display:grid;gap:20px;box-shadow:0 40px 80px -30px rgba(13,24,48,.45)}
.package .label{color:var(--on-night-muted)}
.pk-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.pk-badge{font:500 .72rem var(--mono);letter-spacing:.04em;padding:5px 11px;border-radius:999px;background:rgba(237,112,44,.16);color:#FFB48A}
.pk-title{font:700 clamp(1.6rem,2.8vw,2.1rem)/1.12 var(--display);letter-spacing:-.035em}
.pk-parts{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:12px;align-items:stretch}
.pk-part{border:1px solid var(--on-night-line);background:rgba(255,255,255,.04);border-radius:14px;padding:18px;display:grid;gap:12px;align-content:start}
.pk-part .k{font:500 .7rem var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#9DB3E8}
.pk-part ul{list-style:none;display:grid;gap:9px}
.pk-part li{display:grid;grid-template-columns:18px 1fr;gap:8px;font-size:.93rem;color:#DCE3EF}
.pk-part li::before{content:"";width:14px;height:14px;margin-top:4px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.3 6.5 11l6-6.5' fill='none' stroke='%237FE3B4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}
.pk-plus{align-self:center;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#fff;color:var(--ink);font:700 1.1rem var(--display)}
.pk-note{font-size:.9rem;color:var(--on-night-muted)}
.package .btn{justify-self:start}
@media (max-width:620px){.pk-parts{grid-template-columns:1fr}.pk-plus{justify-self:center}.package{padding:24px 20px}.package .btn{justify-self:stretch}}

/* night band */
.night{background:radial-gradient(70% 90% at 15% 0%,#1A2A50 0,transparent 60%),radial-gradient(50% 70% at 90% 100%,rgba(237,112,44,.14) 0,transparent 60%),var(--night);color:var(--on-night);position:relative;overflow:hidden;overflow:clip}
.night::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.35;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}
.night > *{position:relative;z-index:1}
.night .lead{color:var(--on-night-muted)}
.trust{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.trust ul{list-style:none;display:grid;gap:12px;margin:22px 0 28px}
.trust li{display:grid;grid-template-columns:22px 1fr;gap:10px;color:var(--on-night-muted)}
.trust li::before{content:"";width:8px;height:8px;margin-top:8px;border-radius:2px;background:var(--orange)}
@media (max-width:900px){.trust{grid-template-columns:1fr;gap:28px}}

/* system cards */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.card{background:#fff;border:1px solid var(--line-soft);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s}
.card:hover{transform:translateY(-2px);box-shadow:0 18px 40px -20px rgba(13,24,48,.25)}
.card-vis{height:170px;padding:18px;border-bottom:1px solid var(--line-soft);background:linear-gradient(180deg,#FBFCFE,#F5F7FA);display:flex;flex-direction:column;justify-content:center;gap:8px;font-size:.78rem}
.card-body{padding:22px 22px 26px;display:grid;gap:10px}
.card-body p{color:var(--muted);font-size:.95rem}
.mini-cap{display:flex;justify-content:space-between;font:500 .68rem var(--mono);letter-spacing:.06em;color:var(--muted);text-transform:uppercase}
@media (max-width:960px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.cards{grid-template-columns:1fr}}

/* pricing */
.pricing{display:grid;grid-template-columns:.78fr 1.22fr;gap:60px;align-items:start}
.pricing .lead{font-size:1.08rem;color:var(--muted);max-width:40ch;margin-top:22px}
.included{list-style:none;display:grid;gap:13px;margin-top:30px}
.included li{display:grid;grid-template-columns:20px 1fr;gap:10px;font-size:1rem}
.included li::before{content:"";width:16px;height:16px;margin-top:4px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.3 6.5 11l6-6.5' fill='none' stroke='%231E8A5A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
.included-note{margin-top:16px;font-size:.95rem;color:var(--muted)}
.pk-stack{display:grid;gap:10px}
.pk-label{font:500 .72rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.plan{border-radius:var(--r-lg);padding:30px 32px;display:grid;gap:4px}
.plan.light{background:var(--box);border:1px solid var(--line-soft)}
.plan.dark{background:radial-gradient(90% 80% at 100% 0%,#1B2B52 0,transparent 60%),radial-gradient(60% 60% at 0% 100%,rgba(237,112,44,.10) 0,transparent 60%),var(--night);color:var(--on-night);box-shadow:0 40px 80px -36px rgba(13,24,48,.5)}
.plan-k{font:500 .72rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.plan.dark .plan-k{color:#9DB3E8}
.plan .big{font:800 clamp(2.2rem,3.6vw,2.9rem)/1.05 var(--display);letter-spacing:-.045em;margin-top:10px}
.plan .small{font-size:.92rem;color:var(--muted)}
.plan p{margin-top:18px;color:var(--muted);font-size:.98rem;max-width:44ch}
.plan.dark .small,.plan.dark p{color:var(--on-night-muted)}
.pk-stack .pk-plus::before,.pk-stack .pk-plus::after{content:"";position:absolute;left:50%;top:50%;width:16px;height:3px;margin:-1.5px 0 0 -8px;border-radius:2px;background:#fff}
.pk-stack .pk-plus::after{transform:rotate(90deg)}
.pk-stack .pk-plus{justify-self:center;margin:-22px 0;width:44px;height:44px;font-size:0;position:relative;z-index:1;box-shadow:0 0 0 6px var(--bg,#fff),0 6px 16px -6px rgba(13,24,48,.35);background:var(--orange);color:#fff}
.plans-foot{display:flex;gap:10px 18px;flex-wrap:wrap;justify-content:space-between;font-size:.88rem;color:var(--muted);margin-top:8px}
.plans-foot a{font-weight:600;color:var(--ink)}
.pk-pair{position:relative;display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:16px}
.pk-pair .plan{padding:40px 34px;display:flex;flex-direction:column;border-radius:24px}
.pk-pair .plan .big{font-size:clamp(2.3rem,3.5vw,3.15rem);margin-top:14px}
.pk-pair .plan p{margin-top:auto;padding-top:28px;font-size:1.06rem;line-height:1.6}
.pk-pair .plan .small{font-size:1.02rem}
.pk-pair .plan-k{font-size:.78rem}
.pk-stack .pk-pair .pk-plus{position:absolute;left:50%;top:50%;margin:0;transform:translate(-50%,-50%)}
@media (min-width:961px){.pricing{align-items:center}.pk-pair .plan{min-height:450px}}
@media (max-width:620px){.pk-pair{grid-template-columns:1fr}.pk-pair .plan{padding:32px 26px}}
@media (max-width:960px){.pricing{grid-template-columns:1fr;gap:48px}}
@media (max-width:560px){.plan{padding:24px 22px}}

/* faq */
.faq{display:grid;grid-template-columns:.85fr 1.15fr;gap:64px;align-items:start}
.faq .lead{color:var(--muted);margin-top:20px;max-width:34ch}
.faq-list{border-top:1px solid var(--line);box-sizing:border-box}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item h3{font-size:inherit;letter-spacing:0}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;background:none;border:0;text-align:left;font:600 1.04rem/1.4 var(--body);color:var(--ink);cursor:pointer}
.faq-q .pm{flex:none;width:26px;height:26px;position:relative;color:var(--muted)}
.faq-q .pm::before,.faq-q .pm::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:1.6px;background:currentColor;transform:translate(-50%,-50%)}
.faq-q .pm::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .2s}
.faq-q[aria-expanded="true"] .pm::after{transform:translate(-50%,-50%) rotate(0)}
.faq{overflow-anchor:none}
.faq-a{color:var(--muted);max-width:62ch}
.faq-in::after{content:"";display:block;height:24px}
.js .faq-a{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .45s cubic-bezier(.4,0,.2,1),visibility 0s linear .45s}
.js .faq-in{overflow:hidden;min-height:0;opacity:0;transition:opacity .3s ease}
.js .faq-item.open .faq-a{grid-template-rows:1fr;visibility:visible;transition:grid-template-rows .45s cubic-bezier(.4,0,.2,1),visibility 0s}
.js .faq-item.open .faq-in{opacity:1;transition:opacity .4s ease .1s}
.faq-more{display:flex;justify-content:space-between;align-items:center;padding:22px 0;text-decoration:none;color:var(--muted);font-weight:500}
.faq-more span.go{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:#fff;border:1px solid var(--line);color:var(--ink)}
.faq-more svg{width:14px;height:14px}
@media (max-width:900px){.faq{grid-template-columns:1fr;gap:28px}}

/* closing / contact */
.closing{padding-block:120px 104px}
.closing .center-head{margin-bottom:48px}
.closing .center-head p{color:var(--on-night-muted)}
.closing-steps{display:flex;justify-content:center;gap:12px 28px;flex-wrap:wrap;margin-bottom:36px;font-size:.92rem;color:var(--on-night-muted)}
.closing-steps span{display:flex;align-items:center;gap:8px}
.closing-steps b{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;border:1px solid rgba(237,112,44,.6);color:#FFB48A;font:500 .74rem var(--mono)}
.form-card{max-width:680px;margin:0 auto;background:#fff;color:var(--ink);border-radius:var(--r-lg);padding:34px;box-shadow:0 40px 80px -30px rgba(0,0,0,.6)}
.form-card h3{font-size:1.45rem}
.form-note{color:var(--muted);font-size:.93rem;margin-top:6px}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:22px}
.field{display:grid;gap:6px;min-width:0}
.field.full{grid-column:1/-1}
.field label{font-weight:600;font-size:.9rem}
.field label .opt{font-weight:400;color:var(--muted)}
.field input,.field select,.field textarea{width:100%;font:inherit;font-size:1rem;color:var(--ink);background:#fff;border:1px solid #7A869E;border-radius:12px;padding:12px 14px;min-height:48px}
.field textarea{min-height:96px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:3px solid rgba(36,56,95,.22);outline-offset:0;border-color:var(--navy-2)}
.field [aria-invalid="true"]{border-color:#B42318}
.field-error{color:#B42318;font-size:.85rem}
.consent{grid-column:1/-1;display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--box);font-size:.85rem;color:var(--muted);line-height:1.5}
.consent input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--navy)}
.consent a,.form-legal a{color:var(--ink)}
.form-legal{grid-column:1/-1;font-size:.84rem;color:var(--muted)}
.form-error{grid-column:1/-1;color:#B42318;font-size:.92rem}
.form-error:empty{display:none}
.submit{grid-column:1/-1}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-success{display:grid;gap:10px;padding:8px 0}
.form-success .check{width:48px;height:48px;border-radius:50%;background:#E2F3EA;color:var(--ok);display:grid;place-items:center;font-size:1.3rem;font-weight:700}
.form-success p{color:var(--muted)}
@media (max-width:560px){.fields{grid-template-columns:1fr}.form-card{padding:24px 20px}}

/* about */
.about{display:grid;grid-template-columns:.8fr 1.2fr;gap:64px;align-items:center}
.portrait{margin:0;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:1/1;max-width:100%;position:relative;background:#C9D2E0}
.portrait img{width:100%;height:100%;object-fit:cover}
.portrait figcaption{position:absolute;left:16px;bottom:16px;background:rgba(13,24,48,.9);color:#fff;border-radius:999px;padding:7px 14px;font-size:.84rem;font-weight:600}
.about .lead{color:var(--muted);font-size:1.08rem;max-width:52ch;margin-top:20px}
.about .lead + .lead{margin-top:14px}
.about .contact-line{margin-top:22px;font-size:.96rem}
.about .contact-line a{font-weight:600}
@media (max-width:860px){.about{grid-template-columns:1fr;gap:32px}.portrait{max-width:420px}}

/* footer */
.site-footer{border-top:1px solid var(--line);background:#fff}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr .8fr;gap:40px;padding-block:64px 44px}
.footer-about{display:grid;gap:14px;align-content:start}
.footer-about img{height:32px;width:auto}
.footer-about p{color:var(--muted);font-size:.94rem;max-width:32ch}
.footer-grid h2{font:500 .72rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.footer-grid ul{list-style:none;display:grid;gap:9px;font-size:.94rem}
.footer-grid a{text-decoration:none;color:var(--ink)}
.footer-grid a:hover{text-decoration:underline;text-underline-offset:4px}
.footer-bottom{border-top:1px solid var(--line-soft);display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding-block:22px;font-size:.84rem;color:var(--muted)}
.footer-bottom a{color:inherit}
.footer-bottom button{background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:underline;cursor:pointer}
@media (max-width:860px){.footer-grid{grid-template-columns:1fr 1fr}.footer-about{grid-column:1/-1}}
@media (max-width:480px){.footer-grid{grid-template-columns:1fr}}

/* legal pages */
.page-hero{position:relative;isolation:isolate;overflow:hidden;padding-block:72px 32px}
.page-hero .field{position:absolute;inset:0;z-index:-1;pointer-events:none}
.page-hero .blob{opacity:.5}
.page-hero h1{font-size:clamp(2.4rem,5vw,3.6rem)}
.page-hero p{color:var(--muted);margin-top:14px;font:400 .82rem var(--mono);letter-spacing:.04em}
.doc{display:grid;grid-template-columns:230px minmax(0,1fr);gap:56px;padding-block:24px 112px}
.toc{position:sticky;top:100px;align-self:start;font-size:.92rem}
.toc h2{font:500 .72rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.toc ol{padding-left:26px;display:grid;gap:8px;color:var(--muted)}
.toc a{text-decoration:none;color:var(--ink)}
.toc a:hover{text-decoration:underline}
.prose{max-width:70ch;min-width:0}
.prose h2{font-size:1.5rem;letter-spacing:-.03em;margin:44px 0 12px}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:1.1rem;margin:24px 0 8px}
.prose p,.prose li{color:#3B455C}
.prose p+p{margin-top:12px}
.prose ul{padding-left:22px;display:grid;gap:8px;margin:12px 0}
.prose a{color:var(--navy-2);font-weight:500}
.prose .callout{background:var(--box);border:1px solid var(--line-soft);border-radius:14px;padding:18px 20px;margin:0 0 28px}
.table-wrap{overflow-x:auto;margin:16px 0;border:1px solid var(--line);border-radius:12px}
.prose table{border-collapse:collapse;width:100%;min-width:520px;font-size:.93rem}
.prose th,.prose td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}
.prose th{font-weight:600;background:var(--box)}
.prose tr:last-child td{border-bottom:0}
.request-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:28px;margin-top:20px}
.request-card .btn{width:100%}
@media (max-width:860px){.doc{grid-template-columns:1fr;gap:28px}.toc{position:static}}

/* cookie banner (only shown when analytics is configured) */
.cookie-banner{position:fixed;left:max(16px,env(safe-area-inset-left,0px));right:max(16px,env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:50;max-width:560px;background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:0 20px 50px rgba(13,24,48,.2);padding:20px;display:grid;gap:14px;font-size:.94rem}
.cookie-banner p{color:var(--muted)}
.cookie-actions{display:flex;gap:10px;flex-wrap:wrap}
.cookie-actions button{flex:1 1 140px;min-height:46px;border-radius:999px;font:600 .95rem var(--body);cursor:pointer;border:1px solid var(--ink);background:#fff;color:var(--ink)}
.cookie-actions button.primary{background:var(--ink);color:#fff}

.notfound{padding-block:120px;display:grid;gap:18px;max-width:560px}
.notfound p{color:var(--muted)}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}

/* utility classes (no inline styles, so the CSP can block them) */
.fill.w95{width:95%}.fill.w56{width:56%}.fill.w28{width:28%}.fill.w60{width:60%}.fill.w50{width:50%}.fill.w37{width:37%}
.mt{margin-top:14px}
.okc{color:var(--ok)!important}
svg.wave{display:block;width:100%;max-width:200px;height:56px;margin:0 auto}


/* ===== Motion layer ===== */

/* scroll progress under the header */
.scroll-progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:linear-gradient(90deg,var(--navy-2),var(--orange));transform-origin:left;transform:scaleX(var(--sp,0));pointer-events:none}

/* words rise in, one at a time */
.wd{display:inline-block;transition:opacity .8s ease-out,transform 1s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--w,0) * 30ms + var(--wd0,0ms))}
.words:not(.in) .wd{opacity:0;transform:translateY(.25em)}

/* blocks fade up as they enter */
.rv{transition:opacity .9s ease-out,transform 1.1s cubic-bezier(.16,1,.3,1);transition-delay:var(--d,0ms)}
.rv:not(.in){opacity:0;transform:translateY(8px)}
.rv.instant,.words.instant .wd{transition:none!important}
.rv.from-left:not(.in){transform:translateX(-6px)}
.rv.scale:not(.in){transform:translateY(8px)}

/* hero aurora */
@media (prefers-reduced-motion:no-preference){
  .blob.b1{animation:drift1 18s ease-in-out infinite alternate}
  .blob.b2{animation:drift2 22s ease-in-out infinite alternate}
  .blob.b3{animation:drift3 20s ease-in-out infinite alternate}
  @keyframes drift1{to{transform:translate(90px,60px) scale(1.15)}}
  @keyframes drift2{to{transform:translate(-120px,-40px) scale(.9)}}
  @keyframes drift3{to{transform:translate(-80px,80px) scale(1.12)}}
  .hero .rise.d2{animation-delay:.35s}.hero .rise.d3{animation-delay:.5s}.hero .rise.d4{animation-delay:.65s}
}

/* hero console tilts flat as you scroll */

/* animated flow diagram */
.flow{display:block;width:100%;height:auto;overflow:visible}
.flow .wire-base{fill:none;stroke:#D7DEEA;stroke-width:1.5}
.flow .wire{fill:none;stroke:#7F98D6;stroke-width:2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2s cubic-bezier(.4,0,.2,1)}
.flow .wire.or{stroke:var(--orange)}
.flow .w2{transition-delay:.35s}.flow .w3{transition-delay:.7s}
.diagram.in .flow .wire{stroke-dashoffset:0}
.flow .pt{fill:#5E7BC4}
.flow .pt.or{fill:var(--orange)}
.flow .pt .glow{opacity:.22}
.diagram:not(.in) .flow .particles{opacity:0}
.flow .particles{transition:opacity .9s ease 1.8s}
.flow .lbl{font:600 13px var(--body);fill:var(--ink);text-anchor:middle}
.flow .tile{fill:#fff;stroke:var(--line);stroke-width:1}
.flow .ico path,.flow .ico rect,.flow .ico circle{fill:none;stroke:var(--ink)}
.flow .ico svg{overflow:visible}
.flow .ping{fill:none;stroke:#9DB3E8;stroke-width:1.5;opacity:0;transform-box:fill-box;transform-origin:center}
.flow .s2 .ping{stroke:var(--orange)}
.flow .core{fill:#fff;stroke:var(--line)}
.flow .ring{transform-box:fill-box;transform-origin:center}
.flow .pulse{fill:none;stroke:var(--orange);stroke-width:1.5;opacity:0;transform-box:fill-box;transform-origin:center}
@media (prefers-reduced-motion:no-preference){
  .diagram.in .flow .ring{animation:spin 18s linear infinite}
  .diagram.in .flow .pulse{animation:pulse-out 4.6s ease-out infinite}
  .diagram.in .flow .pulse.p2{animation-delay:2.3s}
  .diagram.in .flow .ping{animation:ping-out 4.6s ease-out infinite}
  .diagram.in .flow .s2 .ping{animation-delay:1.15s}.diagram.in .flow .s3 .ping{animation-delay:.6s}
  @keyframes spin{to{transform:rotate(360deg)}}
  @keyframes pulse-out{0%{opacity:.4;transform:scale(.95)}100%{opacity:0;transform:scale(1.25)}}
  @keyframes ping-out{0%{opacity:.45;transform:scale(.85)}60%,100%{opacity:0;transform:scale(1.18)}}
}
@media (prefers-reduced-motion:reduce){.flow .particles{display:none}}
.hub-label{text-align:center;font:600 .9rem var(--body);color:var(--muted);margin-top:2px}

/* example cards: spotlight on hover, mini scenes play when the card arrives */
.card{position:relative}
.card::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(94,123,196,.14),transparent 70%);z-index:1}
.card:hover::before{opacity:1}
.card-problem{display:flex;align-items:center;gap:8px;font-size:.84rem;font-weight:600;color:var(--orange-text,#B4531A)}
.card-problem::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--orange);flex:none}
.rec{display:inline-block;width:7px;height:7px;border-radius:50%;background:#D93A2B;margin-right:6px;vertical-align:1px}
svg.wave rect{transform-box:fill-box;transform-origin:center}
@media (prefers-reduced-motion:no-preference){
  .card.in svg.wave rect{animation:eq 1.1s ease-in-out infinite alternate}
  .card.in svg.wave rect:nth-child(3n){animation-duration:.8s}
  .card.in svg.wave rect:nth-child(3n+1){animation-duration:1.35s;animation-delay:-.4s}
  .card.in svg.wave rect:nth-child(4n){animation-delay:-.7s}
  @keyframes eq{from{transform:scaleY(.35)}to{transform:scaleY(1)}}
  .card.in .rec{animation:recblink 1.2s steps(2) infinite}
  @keyframes recblink{50%{opacity:.2}}
}

/* night sections: slow drifting light */
.night::before{content:"";position:absolute;width:640px;height:640px;border-radius:50%;left:-160px;top:-220px;background:radial-gradient(circle,rgba(94,123,196,.22),transparent 62%);pointer-events:none;z-index:0}
@media (prefers-reduced-motion:no-preference){.night::before{animation:nightdrift 24s ease-in-out infinite alternate}@keyframes nightdrift{to{transform:translate(55vw,140px) scale(1.2)}}}

/* portrait opens up */
.portrait.rv{transition:clip-path 1.2s cubic-bezier(.16,1,.3,1),opacity .9s ease-out}
.portrait.rv:not(.in){opacity:0;transform:none;clip-path:inset(2% 2% 2% 2% round 22px)}
.portrait.rv.in{clip-path:inset(0 round 22px)}
.portrait img{transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.portrait.rv:not(.in) img{transform:scale(1.02)}

/* count-up numbers keep their width */
.bar .top b{min-width:2ch;text-align:right}

/* buttons: soft sheen */
.btn{position:relative;overflow:hidden}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.22) 50%,transparent 70%);transform:translateX(-120%);transition:transform .7s ease;pointer-events:none}
.btn:hover::after{transform:translateX(120%)}

@media (prefers-reduced-motion:reduce){
  .rv,.wd{transition:none!important;opacity:1!important;transform:none!important;filter:none!important;clip-path:none!important}
}
.flow .ico{fill:none;stroke:var(--ink);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

@media (min-width:901px){.split > h2{position:sticky;top:120px}}

/* footer social links (Font Awesome Free brand icons, see assets/icons-LICENSE-FontAwesome.txt) */


/* ===== Example cards: looping scenes ===== */
.cv{display:flex;flex-direction:column;justify-content:center;gap:9px;height:186px}
.mini-cap{display:flex;justify-content:space-between;font:500 .68rem var(--mono);letter-spacing:.06em;color:var(--muted);text-transform:uppercase}
.timer{font-variant-numeric:tabular-nums;color:var(--ink)}
.cv-cycle{position:relative;height:30px}
.cv-cycle span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:500;color:var(--muted)}
.cv-cycle span.ok{color:var(--ok)}
.cv-cycle span:not(:first-child){opacity:0}
.stars{display:flex;gap:3px}
.stars i{display:block;width:17px;height:17px;color:var(--orange)}
.stars svg{width:100%;height:100%;fill:currentColor}


/* pipeline board */
.pipe{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.pcol{background:#fff;border:1px solid var(--line);border-radius:8px;padding:7px 6px;display:grid;gap:5px;align-content:start;min-height:112px}
.pcol h4{display:flex;align-items:center;gap:5px;font:500 .58rem var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.pcol h4 i{width:6px;height:6px;border-radius:50%}
.pcol > span{display:block;height:14px;border-radius:4px}
.pcol.c1 h4 i,.pcol.c1 > span{background:#C9D6F4}
.pcol.c2 h4 i,.pcol.c2 > span{background:#FAD9C2}
.pcol.c3 h4 i,.pcol.c3 > span{background:#B9C3D8}
.pcol.c4 h4 i,.pcol.c4 > span{background:#BFE5D0}
.pcol.c1 h4 i{background:#5E7BC4}.pcol.c2 h4 i{background:var(--orange)}.pcol.c3 h4 i{background:var(--navy-2)}.pcol.c4 h4 i{background:var(--ok)}
.pmove{position:absolute;left:6px;top:26px;width:calc(25% - 16px);height:14px;border-radius:4px;background:#5E7BC4;opacity:0;transform-origin:center;box-shadow:0 4px 10px rgba(13,24,48,.18)}

/* Card scenes: each plays in once and stays on screen; only small details keep moving. */
@media (prefers-reduced-motion:no-preference){
  .card.sc .q1,.card.sc .q2,.card.sc .q3{transition:opacity .7s ease-out,transform .8s cubic-bezier(.16,1,.3,1)}
  .card.sc:not(.in) .q1,.card.sc:not(.in) .q2,.card.sc:not(.in) .q3{opacity:0;transform:translateY(5px)}
  .card.in .q1{transition-delay:.35s}.card.in .q2{transition-delay:1.25s}.card.in .q3{transition-delay:2.2s}

  /* stars fill in one at a time, then stay */
  .card.sc .stars i{transition:color .35s ease,transform .45s cubic-bezier(.3,1.6,.5,1)}
  .card.sc:not(.in) .stars i{color:#D5DCE8;transform:scale(.85)}
  .card.in .stars .st1{transition-delay:1.9s}.card.in .stars .st2{transition-delay:2.1s}.card.in .stars .st3{transition-delay:2.3s}.card.in .stars .st4{transition-delay:2.5s}.card.in .stars .st5{transition-delay:2.7s}

  /* receptionist status: crossfades, so one line is always showing */
  .card.in .cv-cycle span{animation:cyc 9s ease-in-out infinite}
  .card.in .cv-cycle span:nth-child(2){animation-delay:3s}
  .card.in .cv-cycle span:nth-child(3){animation-delay:6s}
  @keyframes cyc{0%{opacity:0}5%,33%{opacity:1}38%,100%{opacity:0}}



  /* pipeline: a lead moves New -> Quoted -> Booked -> Done, changing color as it goes */
  .card.in .pmove{animation:pmove 8s cubic-bezier(.6,0,.3,1) infinite}
  @keyframes pmove{
    0%{opacity:1;transform:translateX(0) scale(0);background:#5E7BC4}
    6%,20%{opacity:1;transform:translateX(0) scale(1);background:#5E7BC4}
    30%,44%{transform:translateX(calc(100% + 22px)) scale(1);background:var(--orange)}
    54%,68%{transform:translateX(calc(200% + 44px)) scale(1);background:var(--navy-2)}
    78%,94%{opacity:1;transform:translateX(calc(300% + 66px)) scale(1);background:var(--ok)}
    100%{opacity:1;transform:translateX(calc(300% + 66px)) scale(0);background:var(--ok)}}
  .card.in .pcol{animation:colglow 8s ease infinite}
  .card.in .pcol.c2{animation-name:colglow2}.card.in .pcol.c3{animation-name:colglow3}.card.in .pcol.c4{animation-name:colglow4}
  @keyframes colglow{0%,4%,22%,100%{border-color:var(--line)}8%,18%{border-color:#5E7BC4}}
  @keyframes colglow2{0%,28%,46%,100%{border-color:var(--line)}32%,42%{border-color:var(--orange)}}
  @keyframes colglow3{0%,52%,70%,100%{border-color:var(--line)}56%,66%{border-color:var(--navy-2)}}
  @keyframes colglow4{0%,76%,94%,100%{border-color:var(--line)}80%,90%{border-color:var(--ok)}}
}

/* footer: tagline and follow links */
.footer-about .f-tag{color:var(--ink);font-weight:600;max-width:30ch}
.follow a{display:inline-flex;align-items:center;gap:10px;color:var(--ink)}
.follow svg{width:16px;height:16px;fill:currentColor;opacity:.75;transition:opacity .2s}
.follow a:hover svg{opacity:1}


/* ===== "Common problems": cards slide sideways as you scroll (desktop) ===== */
:root{--hh:73px}
.hs-viewport{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.hs-viewport::-webkit-scrollbar{display:none}
.hs-track{display:flex;gap:20px;width:max-content;padding:4px max(24px,calc((100vw - 1180px)/2 + 24px)) 12px}
.hs-track .card{flex:0 0 min(360px,84vw);scroll-snap-align:center}
.hscroll .row-head{margin-bottom:36px}
.hscroll.hs-on{padding-block:0}
.hscroll.hs-on .hs-sticky{position:sticky;top:var(--hh);height:calc(100vh - var(--hh));display:flex;flex-direction:column;justify-content:center;overflow:hidden}
.hscroll.hs-on .hs-viewport{overflow:visible;scroll-snap-type:none}
.hscroll.hs-on .hs-track{will-change:transform;transform:translate3d(var(--hx,0px),0,0)}
.hs-progress{display:none}
.hscroll.hs-on .hs-progress{display:block;width:100%;max-width:1180px;margin:22px auto 0;padding-inline:24px}
.hs-progress span{display:block;height:2px;background:var(--line);border-radius:2px;overflow:hidden}
.hs-progress i{display:block;height:100%;background:linear-gradient(90deg,var(--navy-2),var(--orange));transform-origin:left;transform:scaleX(var(--hp,0))}
@media (min-width:901px) and (prefers-reduced-motion:reduce){
  .hs-viewport{overflow:visible}
  .hs-track{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:auto;max-width:1180px;margin:0 auto;padding-inline:24px}
  .hs-track .card{flex:none}
}

/* missed call: phone lock screen */
.cv.lock{background:radial-gradient(140% 100% at 15% 0%,#2E4677 0,#101B33 72%);justify-content:center;gap:6px;padding:10px 14px}
.lock-time{display:flex;justify-content:center;align-items:baseline;gap:7px;color:#fff;line-height:1}
.lock-time b{font:600 1.05rem/1 var(--display);letter-spacing:-.01em}
.lock-time span{font-size:.6rem;opacity:.65}
.note{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:8px;align-items:center;background:rgba(255,255,255,.13);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.12);border-radius:11px;padding:5px 9px;color:#fff}
.note b{display:block;font-size:.7rem;font-weight:600;line-height:1.25}
.note span{display:block;font-size:.66rem;opacity:.82;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.note time{font-size:.58rem;opacity:.6;align-self:start;padding-top:2px}
.ni{width:22px;height:22px;border-radius:7px;background:#5E7BC4;display:grid;place-items:center;color:#fff}
.ni svg{width:13px;height:13px}
.ni.red{background:#E5484D}.ni.grn{background:#2FB673}

/* declined repair: calendar */
.cv.cal{gap:6px;justify-content:center}
.cal-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.cal-head b{font:700 .84rem var(--display);letter-spacing:-.01em}
.cal-head span{font-size:.66rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px}
.dow{font:500 .54rem var(--mono);color:var(--muted);text-align:center}
.day{position:relative;height:38px;border-radius:6px;background:#fff;border:1px solid var(--line);padding:3px;display:flex;flex-direction:column;gap:2px;overflow:hidden;transition:background .5s,border-color .5s}
.day.wk{background:transparent;border-style:dashed}
.day i{font:500 .58rem var(--mono);font-style:normal;color:var(--muted)}
.day em{display:block;font-style:normal;font-size:.52rem;font-weight:700;line-height:1;height:9px;border-radius:3px;padding:0 3px;color:#fff;white-space:nowrap;overflow:hidden}
.day.ev4 em{height:auto;padding:2px 3px}
.ev1 em{background:var(--orange)}.ev2 em,.ev3 em{background:var(--navy-2)}.ev4 em{background:var(--ok)}
.day.ev4{background:#E2F3EA;border-color:#9FD6B9}
.cal-legend{display:flex;gap:12px;font-size:.62rem;color:var(--muted)}
.cal-legend span{display:inline-flex;align-items:center;gap:5px}
.cal-legend span::before{content:"";width:8px;height:8px;border-radius:2px}
.cal-legend .lg1::before{background:var(--orange)}.cal-legend .lg2::before{background:var(--navy-2)}.cal-legend .lg3::before{background:var(--ok)}
.cal-foot{display:inline-flex;align-self:flex-start;align-items:center;gap:7px;font-size:.7rem;font-weight:600;color:#155B3C;background:#E2F3EA;border-radius:999px;padding:4px 10px}
.cal-foot .live-dot{background:var(--ok);box-shadow:0 0 0 3px rgba(26,122,80,.15)}

/* quote: stopwatch ring */
.cv.quick{flex-direction:row;align-items:center;gap:14px}
.qr-ring{position:relative;width:86px;height:86px;flex:none}
.qr-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.qr-ring circle{fill:none;stroke-width:8}
.qr-ring .trk{stroke:#E2E8F2}
.qr-ring .arc{stroke:var(--ok);stroke-linecap:round;stroke-dasharray:60;stroke-dashoffset:2}
.qr-num{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.qr-num b{font:700 1.1rem/1 var(--display);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.qr-num span{font-size:.56rem;color:var(--muted);margin-top:2px}
.qr-side{display:grid;gap:7px;min-width:0;flex:1}
.qr-in{background:#fff;border:1px solid var(--line);border-radius:10px;padding:7px 10px;display:grid;gap:1px}
.qr-in span{font:500 .56rem var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.qr-in b{font-size:.72rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qr-out{background:#E2F3EA;border-radius:10px 10px 3px 10px;padding:7px 10px;display:grid;gap:4px}
.qr-out p{font-size:.7rem;line-height:1.38;color:#13402C}
.qr-out small{display:flex;align-items:center;gap:5px;font:500 .58rem var(--mono);color:#1A6A47}
.qr-out .ok{width:13px;height:13px;border-radius:50%;background:var(--ok);color:#fff;display:grid;place-items:center;flex:none}
.qr-out .ok svg{width:8px;height:8px}

/* reviews: rating panel */
.cv.rate{gap:10px}
.rate-top{display:flex;align-items:center;gap:14px}
.rate-num{font:800 2.5rem/1 var(--display);letter-spacing:-.05em;font-variant-numeric:tabular-nums;display:inline-block}
.rate-count{display:block;margin-top:4px;font-size:.72rem;color:var(--muted);font-variant-numeric:tabular-nums}
.rate-bars{display:grid;gap:4px}
.rate-bars span{display:grid;grid-template-columns:10px 1fr;gap:7px;align-items:center}
.rate-bars i{font:500 .58rem var(--mono);font-style:normal;color:var(--muted)}
.rate-bars em{display:block;height:6px;border-radius:3px;background:linear-gradient(90deg,#ED702C,#F5A26F);transform-origin:left}
.rate-bars .b5{width:88%}.rate-bars .b4{width:24%}.rate-bars .b3{width:7%}
.new-review{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:9px;padding:6px 10px;font-size:.72rem;min-width:0}
.new-review b{color:var(--orange);font-size:.66rem;letter-spacing:1px;flex:none}
.new-review span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

@media (prefers-reduced-motion:no-preference){
  /* lock screen notifications drop in */
  .card.sc .note{transition:opacity .6s ease-out,transform .7s cubic-bezier(.16,1,.3,1)}
  .card.sc:not(.in) .note{opacity:0;transform:translateY(-10px) scale(.97)}
  .card.in .note.q1{transition-delay:.4s}.card.in .note.q2{transition-delay:1.5s}.card.in .note.q3{transition-delay:2.6s}
  .card.in .note.missed .ni{animation:ring 2.4s ease-in-out 1s infinite}
  @keyframes ring{0%,40%,100%{transform:rotate(0)}5%,15%,25%{transform:rotate(-14deg)}10%,20%,30%{transform:rotate(14deg)}}

  /* calendar fills in day by day */
  .card.sc .day em{transition:opacity .45s ease-out,transform .5s cubic-bezier(.3,1.5,.5,1)}
  .card.sc:not(.in) .day em{opacity:0;transform:scale(.6)}
  .card.sc:not(.in) .day.ev4{background:#fff;border-color:var(--line)}
  .card.in .ev1 em{transition-delay:.4s}.card.in .ev2 em{transition-delay:1.1s}.card.in .ev3 em{transition-delay:1.8s}
  .card.in .ev4 em,.card.in .day.ev4{transition-delay:2.6s}
  .card.in .day.ev4{animation:calpulse 2.4s ease-in-out 3.4s infinite}
  @keyframes calpulse{0%,100%{box-shadow:0 0 0 0 rgba(26,122,80,.35)}60%{box-shadow:0 0 0 6px rgba(26,122,80,0)}}

  /* stopwatch ring runs to 58 seconds */
  .card.sc .qr-ring .arc{transition:stroke-dashoffset 2.3s cubic-bezier(.4,0,.2,1) .6s}
  .card.sc:not(.in) .qr-ring .arc{stroke-dashoffset:60}

  /* rating bars grow */
  .card.sc .rate-bars em{transition:transform 1.1s cubic-bezier(.16,1,.3,1)}
  .card.sc:not(.in) .rate-bars em{transform:scaleX(0)}
  .card.in .rate-bars span:nth-child(2) em{transition-delay:.15s}.card.in .rate-bars span:nth-child(3) em{transition-delay:.3s}
  .rate-num.bump{animation:bump .6s cubic-bezier(.3,1.6,.5,1)}
  @keyframes bump{40%{transform:scale(1.12);color:var(--orange)}}
}

.hs-swipe{display:none;text-align:center;font-size:.82rem;color:var(--muted);margin-top:6px}
.hscroll:not(.hs-on) .hs-swipe{display:block}
/* Desktop with a mouse: when the pinned sideways effect is off (short window, no JS), show a plain grid instead of a swipe strip */
@media (min-width:901px) and (hover:hover) and (pointer:fine){
  .hscroll:not(.hs-on) .hs-viewport{overflow:visible}
  .hscroll:not(.hs-on) .hs-track{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:auto;max-width:1180px;margin:0 auto;padding-inline:24px}
  .hscroll:not(.hs-on) .hs-track .card{flex:none}
  .hscroll:not(.hs-on) .hs-swipe{display:none}
}
@media (min-width:901px) and (prefers-reduced-motion:reduce){.hs-swipe{display:none!important}}


/* strip: colored icon chips */
.strip-item .si{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;flex:none}
.strip-item .si svg{width:16px;height:16px;color:inherit}
.strip-item.c1 .si{background:#E6ECFA;color:#3E5DB0}
.strip-item.c2 .si{background:#E2F3EA;color:#1A7A50}
.strip-item.c3 .si{background:#FDEBDD;color:#C2571B}
.strip-item.c4 .si{background:#ECE8FA;color:#5B4BB7}
.strip-item.c5 .si{background:#FDE4E5;color:#C93A3F}
.strip-item{color:var(--ink)}

/* step panel: richer views; animations replay each time a view opens */
.tagp.red{background:rgba(229,72,77,.18);color:#FFA9AB}
.view .a0,.view .a1,.view .a2,.view .a3,.view .a4,.view .a5{animation:rowin .6s cubic-bezier(.16,1,.3,1) both}
.view .a1{animation-delay:.2s}.view .a2{animation-delay:.5s}.view .a3{animation-delay:.8s}.view .a4{animation-delay:1.1s}.view .a5{animation-delay:1.5s}
@keyframes rowin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.view .pop{animation:pop .5s cubic-bezier(.3,1.6,.5,1) both}
.view .a1 .pop{animation-delay:.5s}.view .a2 .pop{animation-delay:.8s}.view .a3 .pop{animation-delay:1.1s}.view .a4 .pop{animation-delay:1.4s}
@keyframes pop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
.callhead{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 12px;border-radius:12px;border:1px dashed rgba(255,255,255,.16)}
.callhead .av{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#B4531A;color:#fff;font:600 .72rem var(--body)}
.callhead b{display:block;font-size:.86rem;font-weight:600}
.callhead small{display:flex;align-items:center;gap:6px;font-size:.74rem;color:var(--on-night-dim)}
.recd{width:7px;height:7px;border-radius:50%;background:#E5484D}
svg.wave-s{width:80px;height:26px;fill:#9DB3E8}
svg.wave-s rect{transform-box:fill-box;transform-origin:center}

.pgrid{display:grid;grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr);gap:8px 4px;align-items:center}
.ph{font:500 .66rem var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--on-night-dim);padding-bottom:2px}
.pp{display:block;padding:10px 12px;border-radius:10px;font-size:.84rem;font-weight:500;border:1px solid transparent;line-height:1.3}
.pp.red{background:rgba(229,72,77,.13);border-color:rgba(229,72,77,.38);color:#FFC2C3}
.pp.grn{background:rgba(59,209,138,.11);border-color:rgba(59,209,138,.36);color:#A6EECB}
.pp.mut{background:rgba(255,255,255,.04);border-color:var(--on-night-line);color:var(--on-night-dim)}
.parrow{position:relative;height:12px}
.parrow i{position:absolute;left:4px;right:8px;top:50%;height:2px;margin-top:-1px;background:linear-gradient(90deg,#E5484D,#3BD18A);transform-origin:left;border-radius:2px}
.parrow i::after{content:"";position:absolute;right:-6px;top:-4px;border:5px solid transparent;border-left:6px solid #3BD18A}
.parrow.mut i{background:var(--on-night-line)}.parrow.mut i::after{border-left-color:var(--on-night-line)}
.view .parrow i{animation:grow .6s cubic-bezier(.4,0,.2,1) both}
.view .parrow.a1 i{animation-delay:.45s}.view .parrow.a2 i{animation-delay:.75s}.view .parrow.a3 i{animation-delay:1.05s}.view .parrow.a4 i{animation-delay:1.35s}
.view .a1s,.view .a2s,.view .a3s,.view .a4s{animation:pop .5s cubic-bezier(.3,1.6,.5,1) both}
.view .a1s{animation-delay:.9s}.view .a2s{animation-delay:1.2s}.view .a3s{animation-delay:1.5s}.view .a4s{animation-delay:1.8s}

.trow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid var(--on-night-line);font-size:.88rem;animation:rowin .5s cubic-bezier(.16,1,.3,1) both}
.trow small{display:block;color:var(--on-night-dim);font-size:.76rem;margin-top:2px}
.t2{animation-delay:.1s}.t3{animation-delay:.2s}.t4{animation-delay:.3s}
.tstat{display:grid}
.tstat > span{grid-area:1/1;justify-self:end}
.tagp .spin{display:inline-block;width:9px;height:9px;border-radius:50%;border:1.5px solid currentColor;border-right-color:transparent;margin-right:6px;vertical-align:-1px;animation:spin .8s linear infinite}
.tagp.done{opacity:0}
.t1 .run{animation:hideit .2s ease .8s forwards}.t1 .done{animation:pop .45s cubic-bezier(.3,1.6,.5,1) .8s forwards}
.t2 .run{animation:hideit .2s ease 1.5s forwards}.t2 .done{animation:pop .45s cubic-bezier(.3,1.6,.5,1) 1.5s forwards}
.t3 .run{animation:hideit .2s ease 2.2s forwards}.t3 .done{animation:pop .45s cubic-bezier(.3,1.6,.5,1) 2.2s forwards}
.t4 .run{animation:hideit .2s ease 2.9s forwards}.t4 .done{animation:pop .45s cubic-bezier(.3,1.6,.5,1) 2.9s forwards}
@keyframes hideit{to{opacity:0;visibility:hidden}}
@keyframes pop2{from{opacity:0}to{opacity:1}}
.tprog{display:grid;gap:8px;margin-top:6px;padding-top:14px;border-top:1px dashed var(--on-night-line)}
.tprog > span{display:block;height:8px;border-radius:999px;background:rgba(255,255,255,.07);overflow:hidden}
.tprog > span i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#5E7BC4,#3BD18A);animation:tp 3.2s linear forwards}
@keyframes tp{0%,24%{width:0}26%,46%{width:25%}48%,68%{width:50%}70%,90%{width:75%}92%,100%{width:100%}}
.tcount{display:grid;font-size:.8rem;font-weight:500;color:var(--on-night-muted)}
.tcount span{grid-area:1/1}
.tcount .c0{animation:hideit .2s ease 2.9s forwards}
.tcount .c4{opacity:0;color:#8FE8BE;animation:pop2 .4s ease 2.95s forwards}

.spark{padding:12px 14px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid var(--on-night-line)}
.spark-head{display:flex;justify-content:space-between;font-size:.8rem;color:var(--on-night-muted);margin-bottom:6px}
.spark-head b{color:var(--on-night);font-variant-numeric:tabular-nums}
.spark svg{display:block;width:100%;height:70px;overflow:visible}
.spark .sp-line{fill:none;stroke:#ED702C;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.3s cubic-bezier(.4,0,.2,1) .3s forwards}
.spark .sp-area{opacity:0;animation:pop2 .8s ease 1.2s forwards}
.sp-plot{position:relative}
.sp-dot{position:absolute;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:#ED702C;opacity:0;animation:pop2 .3s ease forwards}
.sp-dot.d1{left:3.33%;top:88.57%;animation-delay:.35s}.sp-dot.d2{left:33.33%;top:65.71%;animation-delay:.7s}.sp-dot.d3{left:63.33%;top:54.29%;animation-delay:1.05s}.sp-dot.d4{left:96.67%;top:20%;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;box-shadow:0 0 0 4px rgba(237,112,44,.2);animation-delay:1.45s}
@keyframes draw{to{stroke-dashoffset:0}}
.spark-x{display:flex;justify-content:space-between;font:400 .66rem var(--mono);color:var(--on-night-dim);margin-top:4px}
.v-rep .bars{margin-top:4px}
@media (prefers-reduced-motion:reduce){
  .tagp.done,.tcount .c4,.spark .sp-area,.sp-dot{opacity:1}
  .tagp.run,.tcount .c0{display:none}
  .spark .sp-line{stroke-dashoffset:0}
  .tprog > span i{width:100%}
}
@media (prefers-reduced-motion:no-preference){
  svg.wave-s rect{animation:eq 1.1s ease-in-out infinite alternate}
  svg.wave-s rect:nth-child(3n){animation-duration:.8s}
  svg.wave-s rect:nth-child(3n+1){animation-duration:1.35s;animation-delay:-.4s}
  .recd{animation:recblink 1.2s steps(2) infinite}
}

/* car-ready card: repair order status */
.cv.ro{gap:12px}
.ro-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.ro-head b{font-size:.8rem}
.ro-head span{font-size:.7rem;color:var(--muted)}
.ro-steps{position:relative;display:grid;grid-template-columns:repeat(3,1fr)}
.ro-track{position:absolute;left:16.66%;right:16.66%;top:6px;height:3px;border-radius:3px;background:var(--line)}
.ro-track i{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,var(--orange),var(--navy-2),var(--ok));transform-origin:left}
.ro-s{position:relative;display:grid;justify-items:center;gap:6px;font-size:.7rem;font-weight:600;color:var(--ink)}
.ro-s b{width:15px;height:15px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--line)}
.ro-s.s1 b{background:var(--orange)}.ro-s.s2 b{background:var(--navy-2)}.ro-s.s3 b{background:var(--ok)}
.cv.ro .note{background:#fff;border:1px solid var(--line);color:var(--ink);-webkit-backdrop-filter:none;backdrop-filter:none}
.cv.ro .note span{opacity:1;color:var(--muted)}
@media (prefers-reduced-motion:no-preference){
  .card.sc .ro-track i{transition:transform 2.2s cubic-bezier(.4,0,.2,1) .4s}
  .card.sc:not(.in) .ro-track i{transform:scaleX(0)}
  .card.sc .ro-s b{transition:background .4s ease,transform .45s cubic-bezier(.3,1.6,.5,1)}
  .card.sc:not(.in) .ro-s b{background:#fff;transform:scale(.7)}
  .card.in .ro-s.s1 b{transition-delay:.35s}.card.in .ro-s.s2 b{transition-delay:1.5s}.card.in .ro-s.s3 b{transition-delay:2.6s}
  .card.in .cv.ro .note.q3{transition-delay:3s}
}

.c-txt span.res{color:#7FE3B4}
.c-txt span.res::before{content:"\2713  ";font-weight:700}

/* audit fixes */
main:focus{outline:none}
.strip:hover .strip-track,.strip:focus-within .strip-track{animation-play-state:paused}
.c-hint .h-touch{display:none}
@media (hover:none){.c-hint .h-mouse{display:none}.c-hint .h-touch{display:inline}}
.hs-viewport:focus-visible,.table-wrap:focus-visible{outline:2px solid var(--navy-2);outline-offset:4px;border-radius:12px}
.motion-paused *,.motion-paused *::before,.motion-paused *::after{animation-play-state:paused!important}
.included-head{margin-top:28px;font:500 .74rem var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.included-head + .included{margin-top:14px}
.footer-bottom span{display:inline-flex;flex-wrap:wrap;gap:6px 18px;align-items:center}
.f-loc{color:var(--muted);font-size:.9rem}

/* phone: show every conversation as a tappable pill, with a hint */
.c-tap{display:none}
@media (max-width:760px){
  .c-tap{display:block;margin:0;padding:12px 14px 0;font:500 .7rem var(--mono);letter-spacing:.06em;color:#FFB48A}
  .c-list{flex-wrap:wrap;overflow:visible;gap:8px;padding:10px 12px 14px}
  .c-item{grid-template-columns:22px auto;gap:7px;padding:6px 12px 6px 6px;border-radius:999px;font-size:.8rem}
  .c-av{width:22px;height:22px;font-size:.58rem}
  .c-item .nm{display:none}
  .c-item:not(.active){background:rgba(255,255,255,.04)}
  .c-item.active{background:rgba(237,112,44,.16)}
  .c-main-head{padding:12px 16px}
  .c-main-head .ex-tag{display:none}
}
.hs-note{text-align:center;font-size:.8rem;color:var(--muted);margin:10px auto 0;padding-inline:24px}