/* VelvoLab HQ: one stylesheet for every page. The later "skin" pass only changes this file.
   Follows the Frontend Website Rules in CLAUDE.md: two fonts (Archivo headings, Inter body),
   one spacing scale, layered tinted shadows (base -> elevated -> floating), motion on
   transform/opacity only with spring easing, hover + focus-visible + active on everything clickable. */
:root{
  /* colour */
  --bg:#f5f5f7; --tile:#ffffff; --ink:#1d1d1f; --ink-2:#6e6e73; --ink-3:#8e8e93;
  --line:#e5e5ea; --velvet:#8c2f47; --velvet-hi:#d0587a; --velvet-soft:#f6eaee;
  --graphite:#141416; --amber:#8a5a00; --amber-soft:#fbf3e2;
  --ok:#1f7a3d; --bad:#b3261e; --bad-soft:#fdecea;
  /* type */
  --display:"Archivo",Inter,-apple-system,sans-serif; --body:Inter,-apple-system,BlinkMacSystemFont,sans-serif;
  /* spacing scale (4px base) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:40px; --s8:48px; --s9:56px; --s10:72px;
  /* depth: elevated tiles and floating layers, tinted with the brand colour */
  --lift-1:0 1px 2px rgba(60,20,32,.04),0 6px 16px -6px rgba(60,20,32,.06),0 18px 40px -16px rgba(60,20,32,.08);
  --lift-2:0 2px 4px rgba(60,20,32,.05),0 12px 28px -8px rgba(60,20,32,.12),0 40px 80px -24px rgba(60,20,32,.22);
  --lift-hero:0 2px 6px rgba(20,6,12,.12),0 24px 48px -16px rgba(60,20,32,.28),0 60px 120px -40px rgba(140,47,71,.30);
  --r:22px; --r-sm:12px;
  --spring:cubic-bezier(.34,1.56,.64,1); --ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.7;-webkit-font-smoothing:antialiased}
button,input,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--velvet);outline-offset:3px;border-radius:8px}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
h1,h2,h3{font-family:var(--display);font-variation-settings:"wdth" 112}

/* ---------- top menu (floating layer) ---------- */
/* Liquid Glass NavBar (capture file Q60): the pages sit in one glass pill (rebuilt in plain CSS from the
   owner's 21st.dev "Liquid Glass NavBar"); a glass drop sits under the current page and slides over from
   the page you came from. The bar itself is see-through with a soft fade, so the page shows behind it. */
.nav{position:sticky;top:0;z-index:5;background:linear-gradient(rgba(245,245,247,.92) 55%,rgba(245,245,247,0))}
.nav-in{max-width:1120px;margin:0 auto;padding:0 var(--s4);height:76px;display:flex;align-items:center;gap:var(--s4);font-size:13px;line-height:1.4;color:var(--ink-2)}
.brand{font-family:var(--display);font-variation-settings:"wdth" 112;font-weight:600;font-size:19px;line-height:1.2;color:var(--ink);letter-spacing:-.02em;white-space:nowrap;display:flex;align-items:center;gap:10px;text-decoration:none;transition:opacity .15s var(--ease)}
.brand i{width:12px;height:12px;border-radius:50%;background:var(--velvet);display:inline-block}
.brand:hover{opacity:.75} .brand:active{opacity:.55}
.lgn{position:relative;isolation:isolate;display:flex;align-items:center;gap:2px;padding:5px;border-radius:999px;margin-right:auto}
.lgn-glass{position:absolute;inset:0;z-index:-2;border-radius:inherit;background:rgba(255,255,255,.55);
  -webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.9),inset 0 0 0 1px rgba(255,255,255,.35),var(--lift-1)}
.lgn-drop{position:absolute;top:5px;bottom:5px;left:0;z-index:-1;border-radius:999px;pointer-events:none;
  background:radial-gradient(120% 140% at 30% 0%,rgba(255,255,255,.95),rgba(255,255,255,0) 55%),rgba(255,255,255,.6);
  box-shadow:inset 0 1px 1px #fff,inset 0 -2px 6px rgba(140,47,71,.22),inset 0 0 0 1px rgba(255,255,255,.7),0 6px 16px -6px rgba(140,47,71,.45)}
.lgn.slide .lgn-drop{transition:transform .55s var(--spring),width .55s var(--spring)}
.lgn > a,.lgn > .soon{display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 12px;border-radius:999px;color:var(--ink-2);font-weight:500;text-decoration:none;white-space:nowrap;transition:color .2s var(--ease),transform .25s var(--spring)}
.lgn > a i,.lgn > .soon i{font-size:16px}
.lgn > a:hover{color:var(--ink)} .lgn > a:active{transform:scale(.95)} .lgn > a:focus-visible{border-radius:999px}
.lgn > a.on{color:var(--ink)} .lgn > a.on i{color:var(--velvet)}
.lgn > .soon{color:#c7c7cc;cursor:default}
/* Dark pages (Home's Wave Mesh, Product's Silk): smoked glass, white words */
body.silk .nav{background:linear-gradient(rgba(2,1,10,.55) 50%,rgba(2,1,10,0))}
body.silk .brand{color:#fff}
body.silk .lgn-glass{background:rgba(20,20,22,.32);box-shadow:inset 0 1px 1px rgba(255,255,255,.28),inset 0 0 0 1px rgba(255,255,255,.12),0 12px 32px -14px rgba(0,0,0,.6)}
body.silk .lgn > a{color:rgba(255,255,255,.72)} body.silk .lgn > a:hover{color:#fff}
body.silk .lgn > a.on{color:var(--ink)}
body.silk .lgn > .soon{color:rgba(255,255,255,.3)}
body.silk .who-k{color:rgba(255,255,255,.72)}
body.silk .who-glass select{color:#fff}
body.silk .who-glass select option{color:var(--ink)}
@media (prefers-reduced-motion:reduce){ .lgn.slide .lgn-drop{transition:none} }
/* Mid-size windows: icons only, the current page keeps its name (each icon is named for screen readers) */
@media (max-width:1140px){ .lgn > a:not(.on) span,.lgn > .soon span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} }

main{max-width:1120px;margin:0 auto;padding:var(--s5) var(--s4) var(--s10)}

/* ---------- messages ---------- */
.bar{max-width:1120px;margin:var(--s3) auto 0;padding:var(--s3) var(--s4);border-radius:var(--r-sm);font-size:14px}
.bar.bad{background:var(--bad-soft);color:var(--bad)}
.bar.warn{background:var(--amber-soft);color:var(--amber)}   /* TEST DATA on preview links and the Mac test copy (S-7 §8) */
.bar code{font-size:13px}
.msg{font-size:13px;line-height:1.5;min-height:20px}
.msg.ok{color:var(--ok)} .msg.bad{color:var(--bad)} .msg.wait{color:var(--ink-3)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:var(--s2);background:var(--ink);color:#fff;border:0;border-radius:999px;padding:var(--s2) var(--s4);font-size:13px;line-height:1.5;font-weight:500;cursor:pointer;text-decoration:none;box-shadow:0 1px 2px rgba(60,20,32,.12),0 6px 14px -6px rgba(60,20,32,.35);transition:transform .25s var(--spring)}
.btn:hover{background:#000;transform:translateY(-1px)} .btn:active{transform:translateY(0) scale(.97)}
.btn.ghost{background:var(--tile);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.btn.ghost:hover{background:var(--bg)}
.btn[disabled]{opacity:.5;cursor:default;transform:none}
.icon-btn{width:var(--s6);height:var(--s6);border-radius:50%;border:1px solid var(--line);background:var(--tile);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink-2);box-shadow:var(--lift-1);transition:transform .25s var(--spring)}
.icon-btn:hover{color:var(--ink);transform:translateY(-1px) rotate(90deg)} .icon-btn:active{transform:scale(.92)}

/* ---------- Home: active-car hero (the one bold thing) ---------- */
.hero{position:relative;overflow:hidden;overflow:clip;border-radius:var(--r);color:#f5f5f7;padding:var(--s7) var(--s8) var(--s6);box-shadow:var(--lift-hero);
      background:
        radial-gradient(60% 80% at 78% 92%,rgba(140,47,71,.55),transparent 70%),
        radial-gradient(40% 50% at 12% 0%,rgba(208,88,122,.12),transparent 70%),
        radial-gradient(120% 90% at 50% 120%,rgba(60,20,32,.6),transparent 60%),
        var(--graphite);
      --name-h:60px;--chips-h:68px;--img-h:230px}
/* fine grain so the dark surface feels like material, not a flat fill */
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.09;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%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.stage{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:var(--s5);align-items:start;transition:opacity .28s var(--ease),transform .28s var(--ease)}
.stage.out{opacity:0;transform:translateX(var(--dx,0))}
.eyebrow{font-size:13px;line-height:20px;color:#e6a3b5;font-weight:500;height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* label + name share one fixed space and sit at its bottom, so they always meet the subtitle */
.title{height:calc(var(--name-h) + 32px);display:flex;flex-direction:column;overflow:hidden}
.title > .eyebrow{margin-top:auto;flex:none}
.hero h1{font-size:52px;line-height:1.02;letter-spacing:-.035em;font-weight:600;margin:var(--s2) 0 var(--s1);overflow-wrap:anywhere}
.sub{color:#a1a1a6;font-size:16px;line-height:26px;height:26px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chips{display:flex;gap:var(--s2);flex-wrap:wrap;margin-top:var(--s4);height:var(--chips-h);align-content:flex-start;overflow:hidden}
.chips span{font-size:12px;line-height:20px;border:1px solid #3a3a3c;color:#a1a1a6;border-radius:999px;padding:var(--s1) 10px;background:rgba(20,20,22,.35)}
.chips span.on{border-color:var(--velvet-hi);color:#f5f5f7;background:rgba(140,47,71,.18)}
.cta{margin-top:var(--s4);display:inline-flex;align-items:center;gap:var(--s2);background:#f5f5f7;color:var(--graphite);border:0;border-radius:999px;padding:10px 20px;font-weight:500;font-size:14px;line-height:1.5;cursor:pointer;box-shadow:0 8px 24px -8px rgba(0,0,0,.6);transition:transform .25s var(--spring)}
.cta:hover{background:#fff;transform:translateY(-2px)} .cta:active{transform:translateY(0) scale(.97)}
.cta-note{display:block;margin-top:10px;font-size:12px;line-height:18px;color:#a1a1a6;height:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.imgbox{position:relative;height:var(--img-h);display:flex;align-items:center;justify-content:center;justify-self:end;width:100%;max-width:540px;isolation:isolate}
.imgbox img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;filter:drop-shadow(0 30px 30px rgba(0,0,0,.5))}
/* image treatment: a soft dark floor and a light velvet colour layer, faded at the edges */
.imgbox::before,.imgbox::after{content:"";position:absolute;inset:0;pointer-events:none;-webkit-mask-image:radial-gradient(closest-side,#000 60%,transparent);mask-image:radial-gradient(closest-side,#000 60%,transparent)}
.imgbox::before{background:var(--velvet);mix-blend-mode:multiply;opacity:.14;z-index:1}
.imgbox::after{background:linear-gradient(to top,rgba(0,0,0,.6),transparent 42%);z-index:2}
.imgbox .noimg{color:#3a3a3c;font-size:96px}
.line{position:relative;z-index:1;margin-top:var(--s5)}
.cta-note:empty{height:0;margin:0}
.seg{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--s1)}
.seg span{height:6px;border-radius:3px;background:#3a3a3c}
.seg .d{background:#f5f5f7} .seg .c{background:var(--velvet-hi);box-shadow:0 0 12px rgba(208,88,122,.6)}
.dept{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--s1);margin-top:var(--s2);font-size:12px;line-height:1.5;color:#8e8e93}
.chev{position:absolute;z-index:3;top:50%;width:36px;height:36px;margin-top:-18px;border-radius:50%;border:1px solid #3a3a3c;background:rgba(20,20,22,.6);color:#d1d1d6;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .25s var(--spring)}
.chev:hover{background:#2c2c2e;color:#fff;transform:scale(1.08)} .chev:active{transform:scale(.92)}
.chev.l{left:18px} .chev.r{right:18px} .chev i{font-size:18px}
.pos{position:absolute;z-index:3;top:20px;right:var(--s5);font-size:12px;line-height:1.5;color:#a1a1a6}
.empty{position:relative;z-index:1;text-align:center;padding:var(--s10) 0}
.empty h1{height:auto;display:block}
.empty a{color:#e6a3b5} .empty a:hover{color:#fff} .empty a:active{opacity:.7}

/* ---------- Home background: the Silk shader (silk.js), only when WebGL works ---------- */
.silk-bg{position:fixed;inset:0;width:100%;height:100%;z-index:-1;display:block;pointer-events:none}
body.silk{background:#02010a}
body.silk .sec-h h2{color:#f5f5f7}
body.silk .sec-h .hint{color:#a1a1a6}

/* ---------- Business preparation (elevated tiles) ---------- */
.sec{margin-top:var(--s8)}
.sec-h{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s4);flex-wrap:wrap}
.sec-h h2{font-size:26px;line-height:1.2;letter-spacing:-.03em;font-weight:600;margin:0}
.sec-h .hint{margin-left:auto;font-size:13px;line-height:1.5;color:var(--ink-3)}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4)}
.card{background:var(--tile);border-radius:var(--r);padding:var(--s5);display:flex;flex-direction:column;gap:var(--s1);min-height:240px;box-shadow:var(--lift-1)}
.card i.ti{font-size:22px;color:var(--velvet)}
.card h3{margin:var(--s3) 0 var(--s1);font-size:17px;line-height:1.3;font-weight:600;letter-spacing:-.01em;overflow-wrap:anywhere}
.status{align-self:flex-start;font-size:12px;line-height:1.6;color:var(--ink-2);background:var(--bg);border-radius:999px;padding:2px 10px}
.status.prog{color:var(--velvet);background:var(--velvet-soft)}
.k{font-size:12px;line-height:1.5;color:var(--ink-3);margin-top:var(--s2)}
.v{font-size:14px;line-height:1.5}
.counts{font-size:12px;line-height:1.5;color:var(--ink-3)}
.card .btn{margin-top:auto;align-self:flex-start}

/* ---------- small dialog form (floating layer) ---------- */
dialog{border:0;border-radius:var(--r);padding:var(--s6);width:min(440px,calc(100vw - 32px));box-shadow:var(--lift-2)}
dialog::backdrop{background:rgba(29,29,31,.35)}
dialog h3{margin:0 0 var(--s4);font-size:20px;letter-spacing:-.02em}
label{display:block;font-size:13px;line-height:1.5;color:var(--ink-2);margin:var(--s3) 0 6px}
input[type=text],input[type=url],textarea{width:100%;border:1px solid var(--line);border-radius:var(--r-sm);padding:10px var(--s3);background:#fff;font-size:14px;line-height:1.5}
input:hover,textarea:hover{border-color:#d1d1d6}
input:focus,textarea:focus{outline:none;border-color:var(--velvet);box-shadow:0 0 0 3px var(--velvet-soft)}
textarea{min-height:120px;resize:vertical;line-height:1.7}
.row-btns{display:flex;gap:var(--s2);align-items:center;margin-top:var(--s5);flex-wrap:wrap}

/* ---------- Folder workspace ---------- */
.back{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--ink-2);text-decoration:none;margin:var(--s2) 0 var(--s5);transition:transform .25s var(--spring)}
.back:hover{color:var(--ink);transform:translateX(-2px)} .back:active{opacity:.6}
.ws-h h1{font-size:44px;letter-spacing:-.035em;line-height:1.1;margin:var(--s2) 0 6px;font-weight:600;overflow-wrap:anywhere}
.ws-h p{margin:0;color:var(--ink-2);font-size:16px;max-width:64ch}
.ws-meta .status{background:var(--tile);box-shadow:inset 0 0 0 1px var(--line)}
.ws-meta .status.prog{background:var(--velvet-soft);box-shadow:none}
.ws-meta{display:flex;gap:var(--s4);align-items:center;margin-top:var(--s3);font-size:13px;color:var(--ink-2);flex-wrap:wrap}
.ws{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4);margin-top:var(--s6)}
.panel{background:var(--tile);border-radius:var(--r);padding:var(--s5) var(--s6);box-shadow:var(--lift-1)}
.panel.wide{grid-column:1/-1}
.panel-h{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s2)}
.panel-h h2{font-size:18px;margin:0;font-weight:600;letter-spacing:-.02em}
.panel-h .n{font-size:13px;color:var(--ink-3)}
.panel-h .btn,.panel-h label.btn{margin:0 0 0 auto}
.list{margin:0;padding:0;list-style:none}
.list li{display:flex;gap:var(--s3);align-items:center;padding:var(--s3) 0;border-top:1px solid var(--line);font-size:14px;line-height:1.5;min-width:0}
.list li:first-child{border-top:0}
.list .grow{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.list .meta{font-size:12px;color:var(--ink-3);white-space:nowrap}
.list a{color:var(--ink);text-decoration:none} .list a:hover{color:var(--velvet);text-decoration:underline} .list a:active{opacity:.6}
.none{font-size:14px;color:var(--ink-3);padding:var(--s2) 0}
.ck{appearance:none;width:20px;height:20px;border-radius:50%;border:1.5px solid var(--ink-3);flex:none;margin:0;cursor:pointer;display:grid;place-content:center;transition:transform .25s var(--spring)}
.ck:hover{border-color:var(--velvet);transform:scale(1.08)} .ck:active{transform:scale(.9)}
.ck:checked{background:var(--velvet);border-color:var(--velvet)}
.ck:checked::after{content:"";width:8px;height:5px;border:2px solid #fff;border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px)}
.list label{margin:0;font-size:14px;color:inherit;cursor:pointer}
.list label:hover{color:var(--velvet)}
.list label.done,.done{color:var(--ink-3);text-decoration:line-through}
.wait{font-size:11px;line-height:1.6;color:var(--amber);background:var(--amber-soft);border-radius:999px;padding:2px var(--s2);white-space:nowrap}
.drop{border:1.5px dashed var(--line);border-radius:var(--s4);padding:var(--s4);text-align:center;font-size:13px;line-height:1.5;color:var(--ink-3);margin:var(--s2) 0 var(--s1)}
.drop.over{border-color:var(--velvet);background:var(--velvet-soft);color:var(--velvet)}
.note{border-top:1px solid var(--line);padding:var(--s4) 0}
.note:first-child{border-top:0}
.note h3{margin:0;font-size:16px;font-weight:600;letter-spacing:-.01em}
.note .body{white-space:pre-wrap;font-size:14px;color:var(--ink);margin-top:var(--s1);overflow-wrap:anywhere;max-width:72ch}
.note .meta{font-size:12px;color:var(--ink-3);margin-top:6px;display:flex;gap:var(--s3);align-items:center}
.linkbtn{background:none;border:0;padding:0;color:var(--velvet);cursor:pointer;font-size:12px}
.linkbtn:hover{text-decoration:underline} .linkbtn:active{opacity:.6}
.inline-form{background:var(--bg);border-radius:var(--s4);padding:var(--s4);margin:var(--s2) 0}
.inline-form label:first-child{margin-top:0}

/* ---------- "You are" name picker (in the menu) ---------- */
.who{display:flex;align-items:center;gap:var(--s2);margin:0 0 0 var(--s2);font-size:13px;color:var(--ink-2);white-space:nowrap}
.who select{font:inherit;font-size:13px;color:var(--ink);background:var(--tile);border:1px solid var(--line);border-radius:999px;padding:4px 10px;cursor:pointer;transition:transform .25s var(--spring)}
.who select:hover{border-color:#d1d1d6} .who select:active{transform:scale(.97)}
.who select:focus-visible{outline:2px solid var(--velvet);outline-offset:2px}
.who select.need{border-color:var(--velvet);box-shadow:0 0 0 3px var(--velvet-soft)}

/* ---------- Product development page ---------- */
.pd-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s4);margin:var(--s5) 0}
.pd-head h1{font-size:32px;letter-spacing:-.03em;line-height:1.1;margin:0;font-weight:600}
.pd-head p{margin:var(--s1) 0 0;color:var(--ink-2);font-size:15px}
.pd-start{min-height:44px}
.pd-hero{position:relative;overflow:hidden;overflow:clip;border-radius:28px;padding:var(--s5) 72px;color:#f5f5f7;box-shadow:var(--lift-hero);
  background:radial-gradient(70% 120% at 15% 20%,rgba(208,88,122,.35),rgba(208,88,122,0) 60%),radial-gradient(60% 90% at 95% 110%,rgba(140,47,71,.55),rgba(140,47,71,0) 60%),var(--graphite)}
.pd-hero::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.18;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='.6'/%3E%3C/svg%3E")}
.pd-vp{position:relative;overflow:hidden}
.pd-slide{width:100%;will-change:transform}
.pd-slide.abs{position:absolute;inset:0}
.pd-sh{display:grid;grid-template-columns:200px minmax(0,1fr) auto;gap:28px;align-items:center}
.pd-pic{position:relative;height:120px;display:grid;place-items:center}
.pd-pic::after{content:"";position:absolute;bottom:14px;width:160px;height:16px;border-radius:50%;background:radial-gradient(rgba(0,0,0,.6),rgba(0,0,0,0) 70%)}
.pd-img{position:relative;z-index:1;max-width:200px;max-height:120px;object-fit:contain}
.pd-noimg{display:grid;place-items:center;width:120px;height:72px;border-radius:14px;background:rgba(255,255,255,.08);color:#8e8e93;font-size:28px}
.pd-count{font-size:12px;color:#8e8e93;margin-bottom:var(--s1)}
.pd-t h2{font-size:34px;letter-spacing:-.035em;line-height:1.05;margin:0;font-weight:600;overflow-wrap:anywhere}
.pd-t p{margin:6px 0 0;color:#b9b9c0;font-size:15px} .pd-t p b{color:#f0a3b8;font-weight:500}
.pd-cw{display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border-radius:999px;background:#fff;color:var(--graphite);font-size:14px;font-weight:500;text-decoration:none;transition:transform .25s var(--spring)}
.pd-cw:hover{transform:translateY(-2px)} .pd-cw:active{transform:scale(.97)} .pd-cw:focus-visible{outline:2px solid #f0a3b8;outline-offset:3px}
.pd-track{position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));margin-top:20px}
.pd-track::before{content:"";position:absolute;left:calc(100%/12);right:calc(100%/12);top:13px;height:2px;background:rgba(255,255,255,.16)}
.pd-track::after{content:"";position:absolute;left:calc(100%/12);top:13px;height:2px;width:calc(var(--fill) * (100% - 100%/6));background:var(--velvet-hi)}
.pd-st{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px}
.pd-dot{width:28px;height:28px;border-radius:50%;background:var(--graphite);box-shadow:inset 0 0 0 2px rgba(255,255,255,.28);display:grid;place-content:center;font-size:12px;font-weight:600;color:#8e8e93}
.pd-st.ok .pd-dot{background:var(--velvet-hi);box-shadow:none;color:#fff;font-size:15px}
.pd-st.cur .pd-dot{box-shadow:inset 0 0 0 2px var(--velvet-hi),0 0 0 6px rgba(208,88,122,.22);color:#f0a3b8}
.pd-st b{font-weight:500;font-size:13px;line-height:1.3;color:#8e8e93} .pd-st.ok b,.pd-st.cur b{color:#f5f5f7}
.pd-st small{font-size:12px;line-height:1.2;min-height:15px;color:#8e8e93} .pd-st.cur small{color:#f0a3b8}
.pd-next{display:flex;gap:10px;align-items:center;margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.12);font-size:14px;color:#b9b9c0}
.pd-next i{color:#f0a3b8} .pd-next strong{color:#fff;font-weight:500}
.pd-arw{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);color:#d1d1d6;display:grid;place-content:center;font-size:18px;cursor:pointer;transition:transform .25s var(--spring)}
.pd-arw:hover{color:#fff;transform:translateY(-50%) scale(1.06)} .pd-arw:active{transform:translateY(-50%) scale(.94)}
.pd-arw:focus-visible{outline:2px solid #f0a3b8;outline-offset:2px}
.pd-arw.p{left:14px} .pd-arw.n{right:14px} .pd-arw[hidden]{display:none}
.pd-empty{background:var(--tile);border-radius:28px;box-shadow:var(--lift-1);padding:var(--s8);text-align:center}
.pd-empty h2{margin:0;font-size:24px;letter-spacing:-.02em} .pd-empty p{color:var(--ink-2)}
.pd-lh{display:flex;align-items:baseline;gap:var(--s2);margin:var(--s7) 0 var(--s3)}
.pd-lh h2{font-size:20px;letter-spacing:-.02em;margin:0;font-weight:600} .pd-lh span{color:var(--ink-2);font-size:14px}
.pd-list{background:var(--tile);border-radius:22px;box-shadow:var(--lift-1);overflow:hidden}
.pd-row{display:grid;grid-template-columns:110px minmax(0,1.15fr) minmax(0,1.3fr) 140px;gap:24px;align-items:center;padding:18px 24px;border-top:1px solid var(--line)}
.pd-row:first-child{border-top:0} .pd-row.sel{background:var(--velvet-soft)}
.pd-thumb{width:110px;max-height:70px;object-fit:contain}
.pd-thumb.pd-noimg{width:96px;height:56px;background:var(--bg);color:var(--ink-3);font-size:22px}
.pd-nm{font-weight:600;font-size:16px;line-height:1.3}
.pd-nx{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--ink);margin-top:2px} .pd-nx i{color:var(--velvet);font-size:14px}
.pd-ndg{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:500;color:var(--ink-2);margin-top:6px;padding:2px 8px;border-radius:999px;background:var(--bg)}   /* 4.66:1 (audit) */
.pd-ndg.ok{color:var(--ok);background:#e8f4ec} .pd-ndg.warm{color:var(--amber);background:var(--amber-soft)}
.pd-rd{position:relative;height:28px;margin:0 14px 0 4px}
.pd-rd::before{content:"";position:absolute;left:0;right:0;top:13px;height:3px;border-radius:2px;background:repeating-linear-gradient(90deg,#d9d9de 0 8px,transparent 8px 14px)}
.pd-fill{position:absolute;left:0;top:13px;height:3px;border-radius:2px;background:var(--velvet)}
.pd-stop{position:absolute;top:10px;width:9px;height:9px;border-radius:50%;background:var(--tile);box-shadow:inset 0 0 0 2px #c7c7cc;transform:translateX(-50%);z-index:1}
.pd-stop.ok{background:var(--velvet);box-shadow:none} .pd-stop.cur{box-shadow:inset 0 0 0 2px var(--velvet)}
.pd-car{position:absolute;top:-6px;transform:translateX(-50%);z-index:2;width:28px;height:28px;border-radius:50%;background:var(--velvet);color:#fff;display:grid;place-content:center;font-size:16px;box-shadow:0 4px 10px -2px rgba(140,47,71,.5)}
.pd-flag{position:absolute;right:-14px;top:-12px;color:var(--velvet);font-size:18px}
.pd-cap{font-size:13px;color:var(--ink-2);margin-top:8px} .pd-cap b{color:var(--ink);font-weight:500}
.pd-togo{margin-left:8px;font-size:12px;font-weight:500;color:var(--velvet);background:var(--velvet-soft);padding:1px 8px;border-radius:999px}
.pd-go{justify-self:end;display:inline-flex;align-items:center;gap:4px;min-height:44px;padding:0 14px;border-radius:999px;font-size:14px;font-weight:500;color:var(--ink);background:var(--tile);box-shadow:inset 0 0 0 1px var(--line);text-decoration:none;white-space:nowrap;transition:transform .25s var(--spring)}
.pd-go:hover{box-shadow:inset 0 0 0 1px #d1d1d6;transform:translateX(2px)} .pd-go:active{transform:scale(.97)} .pd-go:focus-visible{outline:2px solid var(--velvet);outline-offset:2px}
.pd-here{justify-self:end;display:inline-flex;align-items:center;gap:4px;font-size:14px;color:var(--ink-2);white-space:nowrap}
.pd-ph{font-size:28px;letter-spacing:-.02em;margin:0 0 var(--s2)}
@media (prefers-reduced-motion:reduce){.pd-slide{transition:none!important}}
@media (max-width:860px){
  .pd-hero{padding:var(--s5) 56px}
  .pd-sh{grid-template-columns:1fr;justify-items:start}
  .pd-st b{font-size:11px}
  .pd-row{grid-template-columns:72px minmax(0,1fr);row-gap:12px}
  .pd-thumb{width:72px}
  .pd-road{grid-column:1/-1} .pd-go,.pd-here{grid-column:1/-1;justify-self:start}
}

/* ---------- Step pages (sp-): frame and sidebar ---------- */
/* Banner higher and taller (Q54, option A): 16px less space above it, the gap under the back link stays 24px,
   and 14px more inside it top and bottom, so it is about 28px taller with everything centred. */
.sp-page{padding-top:var(--s4)} .sp-page > .back{margin-top:0}
.sp-strip{position:relative;overflow:hidden;overflow:clip;border-radius:22px;padding:30px 28px;display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1.5fr);gap:24px;align-items:center;color:#f5f5f7;box-shadow:var(--lift-hero);
  background:radial-gradient(60% 160% at 10% 0%,rgba(208,88,122,.35),rgba(208,88,122,0) 60%),radial-gradient(50% 140% at 100% 120%,rgba(140,47,71,.55),rgba(140,47,71,0) 60%),var(--graphite)}
.sp-strip::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.18;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='.6'/%3E%3C/svg%3E")}
.sp-strip > img{position:relative;width:120px;max-height:72px;object-fit:contain}
.sp-noimg{position:relative;margin:0;width:120px;height:64px;border-radius:14px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:#b9b9c0;font-size:22px}
.sp-noimg small{font-size:11px}
label.sp-noimg{cursor:pointer;transition:transform .25s var(--spring)}
label.sp-noimg:hover{color:#fff;transform:translateY(-1px)} label.sp-noimg:active{transform:scale(.97)} label.sp-noimg:focus-within{outline:2px solid #f0a3b8;outline-offset:2px}
.sp-nm{position:relative;font-family:var(--display);font-variation-settings:"wdth" 112;font-size:22px;font-weight:600;letter-spacing:-.02em;line-height:1.1}
.sp-sub{position:relative;font-size:13px;color:#b9b9c0} .sp-sub b{color:#f0a3b8;font-weight:500}
.sp-mt{position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr))}
.sp-mt::before{content:"";position:absolute;left:calc(100%/12);right:calc(100%/12);top:12px;height:2px;background:rgba(255,255,255,.16)}
.sp-mt::after{content:"";position:absolute;left:calc(100%/12);top:12px;height:2px;width:calc(var(--fill) * (100% - 100%/6));background:var(--velvet-hi)}
.sp-mt a,.sp-mt span{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:6px;padding:2px;border-radius:8px;text-decoration:none;text-align:center;font-size:11px;line-height:1.2;color:#8e8e93}
.sp-mt i{width:22px;height:22px;border-radius:50%;background:var(--graphite);box-shadow:inset 0 0 0 2px rgba(255,255,255,.28);display:grid;place-content:center;font-style:normal;font-size:11px;font-weight:600;transition:transform .25s var(--spring)}
.sp-mt .ok i{background:var(--velvet-hi);box-shadow:none;color:#fff}
.sp-mt .cur{color:#f5f5f7;font-weight:500} .sp-mt .cur i{box-shadow:inset 0 0 0 2px var(--velvet-hi),0 0 0 5px rgba(208,88,122,.22);color:#f0a3b8}
.sp-mt a:hover{color:#fff} .sp-mt a:hover i{transform:scale(1.08)} .sp-mt a:active{opacity:.7} .sp-mt a:focus-visible{outline:2px solid #f0a3b8;outline-offset:2px}
.sp-err{margin:var(--s3) 0 0} .sp-err a{color:var(--bad);font-weight:500}
.sp-ws{display:grid;grid-template-columns:minmax(0,1fr) 264px;gap:24px;margin-top:24px;align-items:start}
.sp-q{font-size:26px;line-height:1.2;letter-spacing:-.025em;font-weight:600;margin:0}
.sp-how{font-size:14px;color:var(--ink-2);margin:4px 0 20px}
.sp-h3{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);margin:var(--s5) 0 var(--s3)}
.sp-h3 h3{font-size:20px;letter-spacing:-.02em;margin:0;font-weight:600} .sp-h3 > span{font-size:13px;color:var(--ink-2)}
.sp-h3 > .sp-pill{font-weight:500;color:var(--velvet);background:var(--velvet-soft);padding:2px 10px;border-radius:999px}
.sp-rail{display:flex;flex-direction:column;gap:12px}
.sp-facts{display:flex;flex-direction:column;gap:8px;padding:4px 2px}
.sp-f{position:relative;display:flex;align-items:center;gap:10px}
.sp-f > i{font-size:18px;color:var(--velvet)} .sp-f > div{flex:1;min-width:0}
.sp-f span{display:block;font-size:11px;line-height:1.3;color:var(--ink-2)} .sp-f b{display:block;font-size:14px;font-weight:500;line-height:1.35}
.sp-mats{display:flex!important;flex-direction:column;gap:2px}
.sp-mats span{display:flex;align-items:center;gap:6px;font-size:14px;line-height:1.45;color:var(--ink)} .sp-mats em{font-style:normal;font-weight:400;font-size:12px;color:var(--ink-2)}
.sp-sw{width:10px;height:10px;border-radius:50%;display:inline-block;flex:none}
.sp-ib{width:32px;height:32px;border-radius:50%;border:0;background:transparent;color:var(--ink-2);display:grid;place-content:center;font-size:18px;cursor:pointer;flex:none;transition:transform .25s var(--spring)}
.sp-ib:hover{background:var(--tile);color:var(--velvet)} .sp-ib:active{transform:scale(.92)} .sp-ib.on{background:var(--velvet-soft);color:var(--velvet)}
.sp-ib.sm{width:28px;height:28px;font-size:16px}
.sp-scanform{display:flex;gap:6px;margin-top:2px} .sp-scanform input{padding:6px 10px;font-size:13px} .sp-scanform .btn{min-height:32px;padding:0 12px}
.sp-pop{position:absolute;right:-8px;top:calc(100% + 10px);z-index:4;width:260px;background:var(--tile);border-radius:16px;box-shadow:var(--lift-2);padding:12px 14px}
.sp-ph{font-size:13px;font-weight:600} .sp-pd{font-size:12px;color:var(--ink-2);margin:2px 0 0}
.sp-opts{margin-top:8px;padding-top:8px;border-top:1px solid var(--line)}
.sp-opt{display:flex;align-items:center;gap:10px;margin:0;padding:6px 4px;font-size:13px;color:var(--ink);cursor:pointer}
.sp-opt input{accent-color:var(--velvet);width:16px;height:16px;margin:0}
.sp-mmrow{display:flex;align-items:center;gap:2px;margin:0 0 6px 30px;width:max-content;background:var(--bg);border-radius:999px;padding:2px}
.sp-mm{border:0;width:26px;height:24px;border-radius:999px;background:transparent;font-size:12px;color:var(--ink-2);cursor:pointer}
.sp-mm:hover{color:var(--ink)} .sp-mm:active{transform:scale(.92)} .sp-mm.on{background:var(--tile);color:var(--velvet);font-weight:600;box-shadow:0 1px 2px rgba(60,20,32,.15)}
.sp-mmrow em{font-style:normal;font-size:11px;color:var(--ink-2);padding:0 6px}
.sp-addmat{display:flex;gap:6px;margin-top:8px} .sp-addmat input{padding:6px 10px;font-size:13px} .sp-addmat .btn{min-height:32px;padding:0 12px}
.sp-panel{background:var(--tile);border-radius:16px;box-shadow:var(--lift-1);padding:10px 14px 12px}
.sp-mh{display:flex;align-items:center;justify-content:space-between;font-size:12px;font-weight:600;color:var(--ink-2)}
.sp-mh.sep{margin-top:6px;padding-top:6px;border-top:1px solid var(--line)}
.sp-mn{font-size:13px;line-height:1.45;color:var(--ink);margin:2px 0 6px;overflow-wrap:anywhere} .sp-mn small{margin-left:6px;font-size:11px;color:var(--ink-2)}
.sp-ml{display:flex;align-items:center;gap:6px;padding:3px 0;font-size:13px;color:var(--ink);text-decoration:none} .sp-ml:hover{color:var(--velvet)} .sp-ml:active{opacity:.6} .sp-ml i{font-size:14px;color:var(--ink-2)}
.sp-none{font-size:12px;color:var(--ink-2);margin:2px 0 6px}
.sp-inline{margin:6px 0} .sp-inline textarea{min-height:64px;font-size:13px} .sp-inline input{margin-bottom:6px;padding:8px 10px;font-size:13px}
.sp-inline .row-btns{margin-top:6px} .sp-inline .btn{min-height:32px;padding:0 12px;font-size:12px}
.sp-done{margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.sp-panel > .sp-done:first-child{margin-top:0;padding-top:0;border-top:0}
.sp-left{font-size:13px;line-height:1.45;color:var(--ink-2);margin:0 0 8px} .sp-left b{color:var(--ink);font-weight:500}
.sp-wide{width:100%;justify-content:center;min-height:40px}
.btn.go{background:var(--velvet)} .btn.go:hover{background:#7a2840}
.btn.muted{background:var(--bg);color:var(--ink-2);box-shadow:inset 0 0 0 1px var(--line)} .btn.muted:hover{background:#ececf0}
@media (max-width:860px){
  .sp-ws{grid-template-columns:1fr}
  .sp-strip{grid-template-columns:auto minmax(0,1fr)} .sp-mt{grid-column:1/-1}
  .sp-pop{right:auto;left:0}
}
@media (max-width:560px){
  .sp-strip{padding:30px 16px}
  .sp-mt a,.sp-mt span{font-size:0;gap:0} .sp-mt i{font-size:11px}
}

/* ---------- Step 1 Select ---------- */
.sp-search{display:flex;align-items:center;gap:10px;background:var(--tile);border-radius:14px;box-shadow:inset 0 0 0 1px var(--line);padding:0 14px}
.sp-search:focus-within{box-shadow:inset 0 0 0 1.5px var(--velvet),0 0 0 4px var(--velvet-soft)}
.sp-search > i{color:var(--ink-2);font-size:18px}
.sp-search input{flex:1;min-width:0;width:100%;border:0!important;box-shadow:none!important;background:transparent;padding:12px 0;font-size:15px;outline:none}
/* Q44: suggested top 10 as picture pills; results as rows with larger car pictures */
.sp-launch{margin:14px 0 12px} .sp-launch > span{display:block;font-size:12px;color:var(--ink-2);margin-bottom:8px}
.sp-pls{display:flex;flex-wrap:wrap;gap:6px}
.sp-pl{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:3px 12px 3px 4px;border:0;border-radius:999px;background:var(--tile);box-shadow:inset 0 0 0 1px var(--line);font:inherit;font-size:13px;color:var(--ink);cursor:pointer;transition:transform .25s var(--spring)}
.sp-pl:hover{box-shadow:inset 0 0 0 1px #d1d1d6} .sp-pl:active{transform:scale(.97)}
.sp-pl.on{background:var(--velvet-soft);color:var(--velvet);font-weight:600;box-shadow:inset 0 0 0 1.5px var(--velvet)}
.sp-plr{font-size:11px;font-weight:600;color:var(--ink-2)} .sp-pl.on .sp-plr{color:#5c5c61}
.sp-cpic{position:relative;display:grid;place-items:center;flex:none;overflow:hidden}
.sp-cpic > i{display:none;color:#c7c7cc} .sp-cpic.none{background:var(--bg)} .sp-cpic.none > i{display:block}
.sp-ci{max-width:100%;max-height:100%;object-fit:contain}
.sp-cpic.tiny{width:44px;height:28px;border-radius:999px;background:var(--bg)} .sp-cpic.tiny .sp-ci{max-width:40px;max-height:24px} .sp-cpic.tiny > i{font-size:15px}
.sp-pl.on .sp-cpic.tiny{background:var(--tile)}
.sp-results{background:var(--tile);border-radius:18px;box-shadow:var(--lift-1);padding:6px}
.sp-rh{font-size:12px;color:var(--ink-2);padding:6px 10px 2px}
.sp-hint{font-size:13px;color:var(--ink-2);margin:6px 10px}
.sp-car{width:100%;display:grid;grid-template-columns:110px minmax(0,1fr) auto 22px;gap:12px;align-items:center;padding:8px 12px;border:0;border-radius:12px;background:transparent;font:inherit;text-align:left;color:var(--ink);cursor:pointer}
.sp-car:hover{background:var(--bg)} .sp-car:active{transform:scale(.995)} .sp-car.on{background:var(--velvet-soft)}
.sp-cpic.big{width:110px;height:60px;border-radius:10px} .sp-cpic.big > i{font-size:24px}
.sp-ct{min-width:0} .sp-ct b{display:block;font-size:14px;font-weight:600} .sp-ct small{font-size:12px;color:var(--ink-2)}
.sp-car.on .sp-ct b{color:var(--velvet)} .sp-car.on .sp-ct small{color:#5c5c61} .sp-car.on .sp-cpic.none{background:var(--tile)}
.sp-nop{font-size:11px;color:var(--ink-2);background:var(--bg);padding:2px 8px;border-radius:999px;white-space:nowrap}
.sp-car > i{color:var(--velvet);font-size:18px}
.sp-fixed{font-size:14px;color:var(--ink-2);margin:0}
.sp-tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;margin-bottom:var(--s4)}
.sp-part{position:relative;display:grid;grid-template-columns:auto 1fr;grid-template-areas:"ico ck" "pn pn" "ps ps";row-gap:4px;padding:14px 16px;border:0;border-radius:20px;background:transparent;outline:1.5px dashed #c7c7cc;outline-offset:-1.5px;font:inherit;color:inherit;text-align:left;cursor:pointer;transition:transform .25s var(--spring)}
.sp-part:hover{transform:translateY(-1px)} .sp-part:active{transform:scale(.98)} .sp-part:focus-visible{outline:2px solid var(--velvet);outline-offset:2px}
.sp-part .sp-ico{grid-area:ico;margin-bottom:6px}
.sp-ck{grid-area:ck;justify-self:end;width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 1.5px #c7c7cc;display:grid;place-content:center;color:#fff;font-size:13px}
.sp-pn{grid-area:pn;font-weight:600;font-size:15px} .sp-ps{grid-area:ps;font-size:12px;color:var(--ink-2)}
.sp-part.on{background:var(--tile);outline:none;box-shadow:inset 0 0 0 1.5px var(--velvet),var(--lift-1)} .sp-part.on .sp-ck{background:var(--velvet);box-shadow:none}
.sp-part.on:focus-visible{outline:2px solid var(--velvet);outline-offset:2px}
.sp-add .sp-ico{background:transparent!important;box-shadow:inset 0 0 0 1.5px #d1d1d6}
.sp-addform{display:block;cursor:default;outline-style:solid} .sp-addform:hover{transform:none}
.sp-addform > label{margin:0 0 6px} .sp-addform input[type=text]{padding:8px 10px;font-size:14px}
.sp-sides{display:flex;flex-wrap:wrap;gap:12px;margin:8px 0} .sp-sides label{display:flex;align-items:center;gap:6px;margin:0;font-size:13px;color:var(--ink)}
.sp-sides input{accent-color:var(--velvet);margin:0}
.sp-addform .row-btns{margin-top:8px} .sp-addform .btn{min-height:32px;padding:0 12px}
.sp-ico{width:40px;height:40px;border-radius:12px;display:grid;place-content:center;font-size:20px;background:#ececf0;color:var(--ink-2)}
.sp-part.on .sp-ico{background:var(--velvet-soft);color:var(--velvet)}
@media (max-width:860px){ .sp-car{grid-template-columns:76px minmax(0,1fr) auto 22px;gap:10px;padding:8px} .sp-cpic.big{width:76px;height:44px} }

/* ---------- Pocket tiles (Template and later steps) ---------- */
.sp-segs{display:flex;gap:4px;margin:-4px 0 16px} .sp-segs i{flex:1;height:6px;border-radius:3px;background:#e5e5ea} .sp-segs i.ok{background:var(--velvet)}
.sp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.sp-tile{position:relative;display:flex;flex-direction:column;gap:4px;min-height:176px;padding:16px;border-radius:20px}
.sp-tile.ok{background:var(--tile);box-shadow:inset 0 0 0 1.5px var(--velvet),var(--lift-1)}
.sp-tile.no{background:transparent;outline:1.5px dashed #c7c7cc;outline-offset:-1.5px}
.sp-tile.over{outline:2px dashed var(--velvet);background:var(--velvet-soft)}
.sp-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.sp-tile.ok .sp-ico{background:var(--velvet-soft);color:var(--velvet)}
.sp-tick{width:24px;height:24px;border-radius:50%;background:var(--velvet);color:#fff;display:grid;place-content:center;font-size:14px}
.sp-state{font-size:12px;font-weight:500;color:var(--ink-2)}
.sp-tn{margin:0;font-size:15px;font-weight:600;line-height:1.3}
.sp-fl{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:13px;color:var(--ink)} .sp-fl i{color:var(--velvet)} .sp-fl span{font-size:12px;color:var(--ink-2)}
.sp-fl.muted{color:var(--ink-2)}
.sp-full{font-family:ui-monospace,Menlo,monospace;font-size:11px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sp-rm{margin:4px 0 0;font-size:13px;line-height:1.4;font-style:italic;color:var(--ink-2)}
.sp-rmk-form{margin-top:6px} .sp-rmk-form textarea{min-height:56px;font-size:13px} .sp-rmk-form .btn{min-height:32px;padding:0 12px;font-size:12px}
.sp-foot{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:auto;padding-top:10px}
.sp-foot label{display:inline-flex;align-items:center;gap:6px;margin:0;cursor:pointer}
.sp-foot label.linkbtn{font-size:12px;color:var(--velvet)}
.sp-foot .btn{min-height:36px}
.sp-tmsg{font-size:12px}

/* ---------- Steps 3-6 (Plan 4) ---------- */
.sp-h3 > span{white-space:nowrap}
.sp-grid.wide{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.sp-segs i.wk{background:#e0b84a}
.sp-h3 > .sp-nw{font-weight:500;color:var(--amber);background:var(--amber-soft);padding:2px 10px;border-radius:999px}
.sp-h3 > .sp-okp{font-weight:500;color:var(--ok);background:#e8f4ec;padding:2px 10px;border-radius:999px}
.sp-h3 > .sp-pill.gray{color:var(--ink-2);background:#ececf0}
.sp-code{font-family:ui-monospace,Menlo,monospace;font-size:12px;background:var(--tile);box-shadow:inset 0 0 0 1px var(--line);padding:1px 6px;border-radius:6px;color:var(--ink-2)}
.sp-sg{border-top:1px solid var(--line);padding:6px 0 4px}
.sp-sg.over{background:var(--velvet-soft);border-radius:12px}
.sp-sgh{display:flex;align-items:center;gap:10px;margin:6px 0}
.sp-sl{min-width:44px;padding:4px 8px;font-size:12px;font-weight:600;color:var(--ink-2);background:#f2f2f5;border-radius:8px;text-align:center}
.sp-sl.on{background:var(--velvet-soft);color:var(--velvet)}
.sp-cnt{flex:1;min-width:0;font-size:12px;color:var(--ink-2)}
.sp-sgh .sp-add{display:inline-flex;align-items:center;gap:4px;margin:0;font-size:12px;font-weight:500;color:var(--velvet);padding:4px 10px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line);background:var(--tile);cursor:pointer;transition:transform .25s var(--spring)}
.sp-sgh .sp-add:hover{box-shadow:inset 0 0 0 1px #d1d1d6} .sp-sgh .sp-add:active{transform:scale(.97)}
.sp-sd{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}
.sp-sd.over{background:var(--velvet-soft);border-radius:12px}
.sp-sd .sp-sl{min-width:44px;padding:4px 8px;white-space:nowrap} .sp-sd label.btn{margin:0}
.sp-sf{min-width:0} .sp-sf .sp-fl{font-weight:500} .sp-sf .sp-fl span{font-weight:400;margin-left:2px}
.sp-sf .sp-full{margin-top:2px} .sp-sf .sp-foot0{margin-top:2px}
.sp-sdi{color:var(--velvet);font-size:18px}
.btn.sp-sm{min-height:32px;padding:0 12px;font-size:12px}
.sp-row3{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:start}
.sp-mres{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin:4px 0 8px}
.sp-mres > span{display:flex;align-items:center;gap:6px;font-size:13px}
.sp-res{display:inline-flex;gap:2px;background:var(--bg);border-radius:999px;padding:2px}
.sp-res-b{display:inline-flex;align-items:center;gap:4px;min-height:32px;padding:0 12px;border:0;border-radius:999px;background:transparent;font:inherit;font-size:12px;color:var(--ink-2);cursor:pointer;transition:transform .25s var(--spring)}
.sp-res-b:hover{color:var(--ink)} .sp-res-b:active{transform:scale(.95)}
.sp-res-b.on{background:var(--tile);font-weight:600;box-shadow:0 1px 2px rgba(60,20,32,.15)}
.sp-res-b.on.f{color:var(--ok)} .sp-res-b.on.w{color:var(--amber)}
.sp-mlist{display:flex;flex-direction:column}
.sp-mi{display:grid;grid-template-columns:56px minmax(0,1fr);gap:10px;align-items:start;padding:8px 0;border-top:1px dashed #ececf0}
.sp-mlist > .sp-mi:first-child{border-top:0}
.sp-th{width:56px;height:42px;border-radius:10px;object-fit:cover;display:grid;place-content:center;background:#d9d9de;color:#fff;font-size:16px}
.sp-th{position:relative;overflow:hidden;background:linear-gradient(135deg,#d9d9de,#c7c7cc)} .sp-th img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sp-th.video{background:linear-gradient(135deg,#3a1520,#8c2f47)}
.sp-mi > a{border-radius:10px} .sp-mi > a:focus-visible{outline:2px solid var(--velvet);outline-offset:2px}
.sp-mh11{display:flex;flex-wrap:wrap;gap:6px;font-size:12px;font-weight:600} .sp-mh11 span{font-weight:400;color:var(--ink-2)}
.sp-mi .sp-rm{margin:2px 0;font-style:normal;color:var(--ink)}
.sp-dz{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin:4px 0;padding:12px;border-radius:12px;border:1.5px dashed #c7c7cc;background:var(--tile);font-size:13px;color:var(--ink-2);text-align:center;cursor:pointer;transition:transform .25s var(--spring)}
.sp-dz i{color:var(--velvet);font-size:18px} .sp-dz small{flex-basis:100%;font-size:11px;color:var(--ink-2)}
.sp-dz:hover{border-color:var(--velvet)} .sp-dz:active{transform:scale(.99)} .sp-dz.over{border-color:var(--velvet);background:var(--velvet-soft)}
.sp-dz.big{flex-wrap:nowrap;justify-content:flex-start;gap:14px;padding:22px;text-align:left} .sp-dz.big i{font-size:28px}
.sp-dz.big b{display:block;color:var(--ink);font-size:15px} .sp-dz.big small{font-size:13px}
.sp-hint0{font-size:12px;color:var(--ink-2);margin:4px 0}
.sp-was{display:flex;gap:10px;align-items:flex-start;background:var(--amber-soft);color:#5c4300;border-radius:12px;padding:10px 12px;font-size:13px;line-height:1.45;margin:8px 0 4px}
.sp-was i{color:var(--amber);font-size:16px;margin-top:2px} .sp-was b{display:block;font-size:12px;color:var(--amber)}
.sp-foot0{display:flex;flex-wrap:wrap;gap:14px;margin-top:4px} .sp-foot0 label{margin:0;cursor:pointer;font-size:12px;color:var(--velvet)}
.sp-allfit{display:flex;gap:12px;align-items:flex-start;border-radius:20px;padding:18px;background:var(--tile);box-shadow:inset 0 0 0 1px var(--line);font-size:13px;color:var(--ink-2);line-height:1.5;align-self:start}
.sp-allfit i{font-size:22px;color:var(--ok)} .sp-allfit b{display:block;color:var(--ink);font-size:14px}
.sp-box{background:var(--tile);border-radius:20px;box-shadow:var(--lift-1);padding:14px 18px}
.sp-box.bare{background:none;box-shadow:none;padding:0}
.sp-pctl a,.sp-mi > a{text-decoration:none;display:block}
.sp-tn .sp-sl{display:inline-block;min-width:0;margin-left:6px;vertical-align:2px}
.sp-prow{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--line)}
.sp-prow:first-child{border-top:0}
.sp-prow b{display:block;font-size:14px} .sp-prow small{font-size:12px;color:var(--ink-2)}
.sp-pctl{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:13px;color:var(--ink-2)}
.sp-pctl label.btn{margin:0;min-height:36px;cursor:pointer}
.sp-pctl input[type=number]{width:80px;border:1px solid var(--line);border-radius:var(--r-sm);padding:8px 10px;font-size:14px;background:#fff}
.sp-pctl input[type=number]:focus{outline:none;border-color:var(--velvet);box-shadow:0 0 0 3px var(--velvet-soft)}
.sp-pctl .btn{min-height:36px}
.sp-fset{background:var(--tile);border-radius:20px;box-shadow:var(--lift-1);padding:4px 18px}
.sp-fr{display:grid;grid-template-columns:76px minmax(0,1fr) 40px auto;gap:12px;align-items:center;padding:12px 0;border-top:1px solid var(--line)}
.sp-fr:first-child{border-top:0} .sp-fr .sp-sl{justify-self:start}
.sp-frn{font-size:14px;font-weight:600}
.sp-frv{font-size:12px;font-weight:600;color:var(--ink-2);background:#f2f2f5;border-radius:6px;text-align:center;padding:2px 0}
.sp-frs{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--ok);white-space:nowrap} .sp-frs i{font-size:16px} .sp-frs.bad{color:var(--amber)}
.sp-two{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
.sp-bh{font-size:12px;font-weight:600;color:var(--ink-2);margin-bottom:8px}
.sp-mrow{display:flex;align-items:center;gap:8px;font-size:14px;padding:3px 0} .sp-mrow span{margin-left:auto;font-size:13px;color:var(--ink-2)}
.sp-ready{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--ok);margin-bottom:6px} .sp-ready b{color:var(--ink)}
.sp-nda{display:flex;gap:6px;align-items:flex-start;font-size:12px;color:var(--amber);line-height:1.4;margin-top:8px}
@media (max-width:860px){ .sp-two{grid-template-columns:1fr} .sp-grid.wide{grid-template-columns:1fr} .sp-fr{grid-template-columns:76px minmax(0,1fr)} .sp-frv,.sp-frs{grid-column:2} }

/* Q45: parts an install video shows (one colour per part) */
.sp-mh11 .sp-vtag{display:inline-flex;align-items:center;gap:4px;padding:1px 9px;border-radius:999px;font-size:11px;font-weight:600}
.sp-vtag i{font-size:13px}
.sp-vtag.sp-vc0{color:#8c2f47;background:#f6eaee} .sp-vtag.sp-vc1{color:#1d4f91;background:#e6eefa} .sp-vtag.sp-vc2{color:#1f6b3a;background:#e5f3ea}
.sp-vtag.sp-vc3{color:#7a4f00;background:#fbf0d9} .sp-vtag.sp-vc4{color:#5b3a8c;background:#efe9f8} .sp-vtag.sp-vc5{color:#0f5f66;background:#e2f3f4}
.sp-vdot{width:10px;height:10px;border-radius:50%;flex:none}
.sp-vdot.sp-vc0{background:#8c2f47} .sp-vdot.sp-vc1{background:#1d4f91} .sp-vdot.sp-vc2{background:#1f6b3a} .sp-vdot.sp-vc3{background:#7a4f00} .sp-vdot.sp-vc4{background:#5b3a8c} .sp-vdot.sp-vc5{background:#0f5f66}
.sp-vparts-form{display:inline-flex;flex-direction:column;gap:8px;margin:8px 0 4px;padding:12px 14px;border-radius:14px;background:var(--tile);box-shadow:0 8px 24px rgba(60,20,32,.14),inset 0 0 0 1px var(--line)}
.sp-vparts-form fieldset{border:0;margin:0;padding:0;display:flex;flex-direction:column}
.sp-vparts-form legend{padding:0;margin-bottom:4px;font-size:12px;color:var(--ink-2)}
  .sp-vparts-form .row-btns{margin-top:4px}
label.sp-vopt{display:flex;align-items:center;gap:8px;margin:0;min-height:32px;font-size:13px;color:var(--ink);cursor:pointer}
.sp-vopt input{width:16px;height:16px;margin:0;accent-color:var(--velvet)}

/* phone: the step names under the dots don't fit; "Step N of 6, name" already says it */
.pd-start{white-space:nowrap}
@media (max-width:560px){
  .pd-hero{padding:var(--s4) var(--s4) var(--s5)}
  .pd-st b,.pd-st small{display:none}
  .pd-head{align-items:flex-start}
  .pd-t h2{font-size:28px}
}
@media (max-width:760px){
  .dept{display:none}
  .sub{white-space:normal;height:52px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}
@media (max-width:1000px){.hero{--chips-h:112px}}
@media (max-width:860px){.cards{grid-template-columns:1fr}.ws{grid-template-columns:1fr}}
@media (max-width:760px){
  .nav-in{gap:var(--s4);overflow-x:auto}
  .hero{padding:var(--s8) var(--s8) var(--s6);--name-h:86px;--chips-h:148px;--img-h:180px}
  .stage{grid-template-columns:1fr}
  .imgbox{justify-self:center;order:-1}
  .hero h1{font-size:42px}
  .chips{height:auto}   /* phones: the parts take only the rows they need, no empty gap above the button */
  .chev{top:120px;margin-top:0} .chev.l{left:6px} .chev.r{right:6px}
  .pos{top:14px;right:var(--s4)}
  .sec-h .hint{margin-left:0;flex-basis:100%}
  .ws-h h1{font-size:32px}
  .panel{padding:20px}
}

/* ======================================================================
   Business development (Spec S-4): shared look for Knowledge, Business and the car business page.
   Business has its own shade, "ledger green", used for money answers and its icons. Velvet stays
   the brand colour. Amber = Estimate, red = short or losing money. (Mocks: brainstorms/mockups/biz-v2-*)
   ====================================================================== */
:root{--biz:#1e5b4c;--biz-hi:#3f9b80;--biz-soft:#e6f0ec}
.bz-head{display:flex;align-items:center;gap:var(--s4);margin:var(--s2) 0 var(--s5);flex-wrap:wrap}
.bz-head > div{flex:1;min-width:0}
.bz-head h1{font-size:30px;line-height:1.1;letter-spacing:-.03em;font-weight:600;margin:0}
.bz-head p{margin:2px 0 0;font-size:14px;line-height:1.5;color:var(--ink-2)}
.bz-ico{width:44px;height:44px;border-radius:14px;display:grid;place-content:center;background:var(--biz-soft);color:var(--biz);font-size:22px;flex:none}
.kn-ico{background:var(--tile);color:var(--ink);box-shadow:var(--lift-1)}
.bz-tile{background:var(--tile);border-radius:20px;box-shadow:var(--lift-1);padding:var(--s5)}
.bz-tile-h{display:flex;align-items:center;gap:10px;margin-bottom:var(--s4);flex-wrap:wrap}
.bz-tile-h > i{font-size:20px;color:var(--c,var(--biz))}
.bz-tile-h h2{font-size:18px;line-height:1.3;font-weight:600;letter-spacing:-.01em;margin:0}
.bz-tile-h .right{margin-left:auto;font-size:12px;line-height:1.5;color:var(--ink-3)}
.chip{display:inline-flex;align-items:center;gap:4px;font-size:12px;line-height:1.6;border-radius:999px;padding:2px 10px;white-space:nowrap;vertical-align:middle}
.chip i{font-size:13px}
.chip.est{background:var(--amber-soft);color:var(--amber)}
.chip.real{background:var(--biz-soft);color:var(--biz)}
.chip.grey{background:var(--bg);color:var(--ink-2)}
.chip.ok{background:#e8f4ec;color:var(--ok)}
.chip.bad{background:var(--bad-soft);color:var(--bad)}
.mono{font-variant-numeric:tabular-nums}
.kn-dash{color:var(--ink-3)}
.kn-none{font-size:13px;line-height:1.5;color:var(--ink-3)}

/* ---------- Knowledge: tabs (one colour per list, same as the Home Shortcuts) ---------- */
.kn-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s3);margin-bottom:var(--s4)}
.kn-tab{display:flex;align-items:center;gap:var(--s3);padding:var(--s4);border-radius:var(--s4);background:var(--tile);box-shadow:var(--lift-1);font-size:14px;line-height:1.4;color:var(--ink);text-decoration:none;border:0;text-align:left;cursor:pointer;transition:transform .25s var(--spring)}
.kn-tab:hover{transform:translateY(-2px)} .kn-tab:active{transform:translateY(0) scale(.98)}
.kn-tab > i{width:36px;height:36px;border-radius:var(--s3);display:grid;place-content:center;background:var(--cs,var(--bg));color:var(--c,var(--ink-2));font-size:18px;flex:none}
.kn-tab b{display:block;font-weight:600}
.kn-tab small{display:block;font-size:12px;color:var(--ink-3)}
.kn-tab.on{box-shadow:inset 0 0 0 2px var(--c),var(--lift-1)}
.kn-tab.on > i{background:var(--c);color:#fff}

/* ---------- Knowledge: the list ---------- */
.kn-list .bz-tile-h > i{color:var(--c)}
.kn-add{margin-left:auto}
.kn-arch{margin-left:auto;font-size:13px}
.kn-arch:not([hidden]) + .kn-add{margin-left:var(--s3)}
.kn-hd,.kn-row{display:grid;align-items:center;gap:var(--s3);font-size:14px;line-height:1.5}
.kn-suppliers .kn-hd,.kn-suppliers .kn-row{grid-template-columns:minmax(0,1.6fr) 100px 120px 100px 140px 90px}
.kn-partners .kn-hd,.kn-partners .kn-row{grid-template-columns:minmax(0,1.6fr) 130px 70px 100px 140px}
.kn-hd{font-size:12px;color:var(--ink-3);padding:0 var(--s2) var(--s2)}
.kn-hd .r,.kn-row .r{text-align:right}
.kn-row{width:100%;background:none;border:0;border-top:1px solid var(--line);padding:var(--s3) var(--s2);text-align:left;cursor:pointer;color:var(--ink);border-radius:0;transition:background-color .15s var(--ease)}
.kn-row:first-child{border-top:0}
.kn-row:hover{background:var(--bg)} .kn-row:active{background:#ececf0}
.kn-row:focus-visible{border-radius:var(--s2)}
.kn-row.arch{color:var(--ink-3)}
.kn-name{min-width:0}
.kn-name b{font-weight:600;margin-right:6px}
.kn-name small{display:block;font-size:12px;color:var(--ink-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kn-empty{padding:var(--s5) var(--s2);font-size:14px;color:var(--ink-2)}
.kn-empty b{color:var(--ink);font-weight:600}
.kn-lock{margin:var(--s3) 0 0;font-size:12px;line-height:1.6;color:var(--ink-3);display:flex;flex-direction:column}
.kn-lock:empty{display:none}
.kn-lock i{margin-right:4px}

/* ---------- Knowledge: add / change dialog ---------- */
.kn-dlg{width:min(640px,calc(100vw - 32px))}
.kn-dlg-h{display:flex;align-items:center;gap:var(--s3)}
.kn-dlg-h h3{margin:0;overflow-wrap:anywhere}
.kn-x{margin-left:auto;width:32px;height:32px;border-radius:50%;border:0;background:var(--bg);color:var(--ink-2);display:grid;place-content:center;cursor:pointer;transition:transform .25s var(--spring)}
.kn-x:hover{color:var(--ink);transform:rotate(90deg)} .kn-x:active{transform:scale(.9)}
.kn-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--s4);margin-top:var(--s2)}
.kn-f.wide{grid-column:1/-1}
.kn-f > label{margin:var(--s3) 0 6px}
.kn-tickf{display:flex;align-items:flex-end;padding-bottom:10px}
label.kn-tick{display:flex;align-items:center;gap:10px;margin:0;font-size:14px;color:var(--ink);cursor:pointer}
.kn-tick .ck{border-radius:6px}
.kn-num{display:flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:var(--r-sm);padding:0 var(--s3);background:#fff;transition:border-color .15s var(--ease)}
.kn-num:hover{border-color:#d1d1d6}
.kn-num:focus-within{border-color:var(--velvet);box-shadow:0 0 0 3px var(--velvet-soft)}
.kn-num span{font-size:12px;color:var(--ink-3)}
.kn-num input{border:0;outline:none;background:none;padding:10px 0;width:100%;min-width:0;font-size:14px;line-height:1.5;font-variant-numeric:tabular-nums}
.kn-num input:focus{box-shadow:none}
.kn-pair{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s2)}
.kn-sel{font:inherit;font-size:14px;line-height:1.5;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);padding:10px var(--s3);width:100%;cursor:pointer}
.kn-sel:hover{border-color:#d1d1d6}
.kn-sel:focus{outline:none;border-color:var(--velvet);box-shadow:0 0 0 3px var(--velvet-soft)}
.kn-pair .kn-sel{width:auto}
.kn-models{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:var(--s2)}
.kn-mchip{display:inline-flex;align-items:center;gap:4px;font-size:13px;line-height:1.5;background:var(--velvet-soft);color:var(--velvet);border-radius:999px;padding:2px 4px 2px 10px}
.kn-mchip button{border:0;background:none;color:inherit;width:20px;height:20px;border-radius:50%;display:grid;place-content:center;cursor:pointer}
.kn-mchip button:hover{background:rgba(140,47,71,.12)} .kn-mchip button:active{transform:scale(.9)}
.kn-res-list{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--s2)}
.kn-res{display:inline-flex;align-items:center;gap:4px;font-size:13px;line-height:1.5;border:1px solid var(--line);background:#fff;border-radius:999px;padding:4px 10px;cursor:pointer;transition:transform .25s var(--spring)}
.kn-res:hover{border-color:var(--velvet);color:var(--velvet);transform:translateY(-1px)} .kn-res:active{transform:scale(.97)}
.kn-filebox{margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--line)}
.kn-files-h{display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
.kn-files-h b{font-weight:600;margin-right:auto;font-size:14px}
.kn-files-h .kn-sel{width:auto;padding:6px 10px;font-size:13px}
.kn-files-h label.btn{margin:0}
.kn-danger{color:var(--bad)!important}
.kn-danger[data-armed="1"]{background:var(--bad-soft)}
.kn-by{margin:var(--s3) 0 0;font-size:12px;color:var(--ink-3)}
.kn-by:empty{display:none}

/* ---------- Home: Shortcuts to the four lists ---------- */
.sc-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s4)}
.sc-tile{display:flex;flex-direction:column;gap:2px;padding:var(--s5);border-radius:var(--r);color:var(--ink);text-decoration:none;box-shadow:var(--lift-1);
  background:linear-gradient(to bottom,color-mix(in srgb,var(--cs) 35%,#fff),#fff 45%);transition:transform .25s var(--spring)}
.sc-tile:hover{transform:translateY(-3px)} .sc-tile:active{transform:translateY(0) scale(.98)}
.sc-tile > i{width:44px;height:44px;border-radius:var(--s3);display:grid;place-content:center;background:var(--cs);color:var(--c);font-size:20px;margin-bottom:var(--s4)}
.sc-tile h3{margin:0;font-size:17px;line-height:1.3;font-weight:600;letter-spacing:-.01em}
.sc-count{font-size:12px;line-height:1.5;color:var(--ink-3)}
.sc-k{font-size:12px;line-height:1.5;color:var(--ink-3);margin-top:var(--s3)}
.sc-next{font-size:14px;line-height:1.5}
a.sc-hint{text-decoration:none} a.sc-hint:hover{color:#fff;text-decoration:underline} a.sc-hint:active{opacity:.7}
body:not(.silk) a.sc-hint:hover{color:var(--ink)}

@media (max-width:900px){
  .sc-grid,.kn-tabs{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:760px){
  .bz-tile{padding:var(--s4)}
  .kn-hd{display:none}
  .kn-suppliers .kn-row,.kn-partners .kn-row{grid-template-columns:1fr 1fr;gap:6px var(--s3)}
  .kn-row .kn-name{grid-column:1/-1}
  .kn-row .r{text-align:left}
  .kn-row > span[data-l]::before{content:attr(data-l);display:block;font-size:11px;color:var(--ink-3)}
  .kn-fields{grid-template-columns:1fr}
  .kn-pair{grid-template-columns:1fr}
  .kn-pair .kn-sel{width:100%}
  .kn-add{margin-left:0}
}
@media (max-width:520px){
  .sc-grid{grid-template-columns:1fr}
}

/* ---------- Step pages: link to the car's business numbers ---------- */
.sp-biz{display:inline-flex;align-items:center;gap:6px;margin-top:6px;font-size:12px;line-height:1.5;color:#9fdcc6;text-decoration:none;border-radius:999px;padding:2px 10px 2px 8px;background:rgba(63,155,128,.16);transition:transform .25s var(--spring)}
.sp-biz:hover{background:rgba(63,155,128,.28);color:#d6f3e8;transform:translateY(-1px)} .sp-biz:active{transform:scale(.97)}

/* ---------- Business: shared bits ---------- */
.bz-dash{color:var(--ink-3)}
.bz-none{font-size:14px;line-height:1.6;color:var(--ink-2);margin:var(--s2) 0}
.bz-none a{color:var(--velvet)} .bz-none a:hover{text-decoration:none} .bz-none a:active{opacity:.7}
.bz-warn{display:flex;gap:var(--s2);align-items:flex-start;margin:var(--s2) 0;padding:10px var(--s3);border-radius:var(--r-sm);background:var(--amber-soft);color:var(--amber);font-size:13px;line-height:1.5}
.bz-warn i{margin-top:2px}
/* money boxes: a light box with RM / kits / % in grey */
.bz-in{display:flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:10px;padding:0 var(--s3);background:#fff;transition:border-color .15s var(--ease)}
.bz-in:hover{border-color:#d1d1d6}
.bz-in:focus-within{border-color:var(--biz);box-shadow:0 0 0 3px var(--biz-soft)}
.bz-in.bad,.bz-in:has(input.bad){border-color:var(--bad);box-shadow:0 0 0 3px var(--bad-soft)}
.bz-in > span{font-size:12px;color:var(--ink-3);flex:none}
.bz-in input{border:0;outline:none;background:none;padding:8px 0;width:100%;min-width:0;font-size:15px;line-height:1.5;color:var(--ink);font-variant-numeric:tabular-nums}
.bz-in input::placeholder{color:#b0b0b6}
.bz-in input:disabled{color:var(--ink-3);cursor:not-allowed}
.bz-in-r input{text-align:right}
.bz-ck{border-radius:6px}
.bz-ck:hover{border-color:var(--biz)} .bz-ck:checked{background:var(--biz);border-color:var(--biz)}
.bz-from{text-decoration:none} .bz-from:hover{color:var(--biz);text-decoration:underline} .bz-from:active{opacity:.7}

/* ---------- Business page: launch bill, verdict, ticks ---------- */
.bz-bill{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:var(--s4);align-items:start}
.bz-line{display:grid;grid-template-columns:minmax(0,1fr) 160px;align-items:center;gap:var(--s3);padding:10px 0;border-top:1px solid var(--line);font-size:14px;line-height:1.5;color:var(--ink);text-decoration:none}
#bill-cars .bz-line:first-child,#bill-co .bz-line:first-child{border-top:0}
.bz-line label{margin:0;font-size:14px;color:var(--ink)}
.bz-line small{display:block;font-size:12px;color:var(--ink-3)}
.bz-line .r{text-align:right}
.bz-link{border-radius:0;transition:background-color .15s var(--ease)}
.bz-link:hover{background:linear-gradient(to right,transparent,var(--bg) 12%,var(--bg) 88%,transparent)} .bz-link:active{opacity:.7}
.bz-sub-h{font-size:12px;color:var(--ink-3);margin:var(--s4) 0 0}
.bz-total{display:grid;grid-template-columns:minmax(0,1fr) 160px;align-items:center;gap:var(--s2) var(--s3);margin-top:var(--s3);padding:var(--s4);border-radius:14px;background:var(--bg);font-size:14px}
.bz-total b{font-weight:600;text-align:right;font-size:16px}
.bz-total label{margin:0;font-size:14px;color:var(--ink-2)}
.bz-side{display:flex;flex-direction:column;gap:var(--s4)}
.bz-verdict{border-radius:20px;padding:var(--s5);color:#fff;box-shadow:var(--lift-hero);background:radial-gradient(70% 90% at 90% 110%,rgba(161,161,166,.28),transparent 70%),var(--graphite)}
.bz-verdict.bad{background:radial-gradient(70% 90% at 90% 110%,rgba(179,38,30,.55),transparent 70%),var(--graphite)}
.bz-verdict.good{background:radial-gradient(70% 90% at 90% 110%,rgba(63,155,128,.55),transparent 70%),var(--graphite)}
.bz-verdict .k{font-size:13px;line-height:1.5;color:#b9b9c0;display:flex;align-items:center;gap:var(--s2)}
.bz-verdict .big{font-family:var(--display);font-variation-settings:"wdth" 112;font-size:44px;line-height:1.05;font-weight:600;letter-spacing:-.03em;margin:var(--s2) 0 6px;overflow-wrap:anywhere}
.bz-verdict.bad .big{color:#ff8a80} .bz-verdict.good .big{color:#9fdcc6}
.bz-verdict .unit,.bz-ans .unit{font-family:var(--body);font-size:16px;font-weight:500;letter-spacing:0;color:#a1a1a6}
.bz-verdict p{margin:0;font-size:13px;line-height:1.6;color:#a1a1a6}
.bz-verdict p b{color:#f5f5f7;font-weight:500}
.bz-ticks{padding-bottom:var(--s4)}
.bz-tick{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--line);font-size:14px;flex-wrap:wrap}
.bz-tick:first-child{border-top:0}
.bz-tick > label:first-child{display:flex;align-items:center;gap:10px;margin:0;font-size:14px;color:var(--ink);cursor:pointer;flex:1;min-width:0}
.bz-file{font-size:12px;color:var(--ink-3);max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bz-file:hover{color:var(--biz)} .bz-file:active{opacity:.7}
label.bz-attach{margin:0;font-size:12px;color:var(--biz)}

/* ---------- Business page: cars ---------- */
.bz-cars{margin-top:var(--s4)}
.bz-car-hd,.bz-car{display:grid;grid-template-columns:96px minmax(0,1fr) 120px 120px 120px 110px;align-items:center;gap:var(--s3);font-size:14px;line-height:1.5}
.bz-car-hd{font-size:12px;color:var(--ink-3);padding-bottom:var(--s2)}
.bz-car-hd .r,.bz-car .r{text-align:right}
.bz-car{padding:var(--s3) var(--s2);margin:0 calc(-1 * var(--s2));border-top:1px solid var(--line);color:var(--ink);text-decoration:none;border-radius:var(--s3);transition:background-color .15s var(--ease)}
.bz-car:first-child{border-top-color:transparent}
.bz-car:hover{background:var(--bg)} .bz-car:active{background:#ececf0}
.bz-thumb{width:96px;height:44px;object-fit:contain}
.bz-nopic{display:grid;place-content:center;color:#c7c7cc;font-size:28px}
.bz-cn b{display:block;font-weight:600}
.bz-cn small{display:block;font-size:12px;color:var(--ink-3)}
.bz-state{justify-self:start}

/* ---------- Car business page (mock B) ---------- */
.bz-carhead{margin-bottom:var(--s3)}
.bz-carpic{width:120px;height:56px;object-fit:contain}
.bz-early{display:flex;align-items:center;gap:var(--s2);margin:0 0 var(--s4);font-size:13px;color:var(--ink-2)}
.bz-early i{color:var(--ink-3)}
.bz-ws{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:var(--s5);align-items:start}
.bz-step{margin-bottom:var(--s4)}
.bz-step .bz-tile-h .n{width:26px;height:26px;border-radius:50%;display:grid;place-content:center;font-size:12px;font-weight:600;background:var(--biz-soft);color:var(--biz)}
.bz-step .q{font-size:14px;line-height:1.5;color:var(--ink-2);margin:-10px 0 var(--s4) 36px}
.bz-step .body{margin-left:36px}
.bz-opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--s3)}
.bz-opt{display:block;text-align:left;font:inherit;border:0;border-radius:14px;padding:14px var(--s4);box-shadow:inset 0 0 0 1px var(--line);background:#fff;font-size:13px;line-height:1.55;color:var(--ink-2);cursor:pointer;transition:transform .25s var(--spring),box-shadow .15s var(--ease)}
.bz-opt:hover:not(:disabled){box-shadow:inset 0 0 0 1px var(--biz-hi);transform:translateY(-1px)} .bz-opt:active:not(:disabled){transform:scale(.98)}
.bz-opt b{display:flex;align-items:center;gap:6px;font-size:15px;color:var(--ink);font-weight:600;margin-bottom:2px}
.bz-opt b i{color:var(--biz)}
.bz-opt.on{box-shadow:inset 0 0 0 2px var(--biz);background:var(--biz-soft);cursor:default}
.bz-opt:disabled{opacity:.55;cursor:not-allowed}
.bz-opt .cash{display:block;margin-top:var(--s2);padding-top:var(--s2);border-top:1px dashed var(--line);color:var(--ink)}
.bz-opt .cash > span:first-child{color:var(--ink-3)}
.bz-f2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3) var(--s4);margin-top:var(--s4)}
.bz-f2-end{margin-top:0;align-items:end}
.fld label{display:block;font-size:12px;line-height:1.5;color:var(--ink-3);margin:0 0 var(--s1)}
label.bz-check{display:flex;align-items:center;gap:10px;margin:0;padding:10px 0;font-size:14px;color:var(--ink);cursor:pointer}
.bz-extras{display:flex;flex-direction:column;gap:var(--s2);margin-top:var(--s3)}
.bz-extras:empty{display:none}
.bz-extra{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) 32px;gap:var(--s3);align-items:center}
.bz-extra > input{border:1px solid var(--line);border-radius:10px;padding:8px var(--s3);font-size:14px;line-height:1.5;background:#fff}
.bz-extra > input:focus{outline:none;border-color:var(--biz);box-shadow:0 0 0 3px var(--biz-soft)}
.bz-rm{width:32px;height:32px;border-radius:50%;border:0;background:var(--bg);color:var(--ink-2);display:grid;place-content:center;cursor:pointer;transition:transform .25s var(--spring)}
.bz-rm:hover{color:var(--bad);background:var(--bad-soft)} .bz-rm:active{transform:scale(.9)}
.bz-addline{display:inline-flex;align-items:center;gap:6px;margin-top:var(--s3);font-size:13px;color:var(--biz)}
.bz-step .msg{margin:var(--s2) 0 0}
.bz-step .msg:empty{display:none}
.bz-sum{display:flex;justify-content:space-between;align-items:center;margin-top:var(--s4);padding:var(--s3) var(--s4);border-radius:var(--s3);background:var(--bg);font-size:14px}
.bz-sum b{font-size:16px;font-weight:600}
.bz-prow{display:grid;grid-template-columns:20px minmax(0,1fr) 60px 110px;gap:var(--s3);align-items:center;padding:10px 0;border-top:1px solid var(--line);font-size:14px;line-height:1.5}
.bz-prow.hd{border-top:0;font-size:12px;color:var(--ink-3);padding-top:0}
#partners .bz-prow:first-child{border-top-color:var(--line)}
.bz-prow .r{text-align:right}
.bz-prow small{display:block;font-size:12px;color:var(--ink-3)}
.bz-prow:not(.on):not(.hd) > span{color:var(--ink-2)}
.bz-in-s{padding:0 10px} .bz-in-s input{text-align:right;padding:6px 0}
/* the answers panel: the one dark, bold thing on the page */
.bz-ans{position:sticky;top:72px;border-radius:22px;padding:var(--s5);color:#f5f5f7;box-shadow:var(--lift-hero);
  background:radial-gradient(70% 70% at 85% 100%,rgba(63,155,128,.45),transparent 70%),var(--graphite)}
.bz-ans .top{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:#b9b9c0}
.bz-ans .a{padding:18px 0 var(--s4);border-top:1px solid rgba(255,255,255,.12);margin-top:var(--s4)}
.bz-ans .a + .a{margin-top:0}
.bz-ans .lab{display:flex;align-items:center;gap:10px;font-size:14px;color:#d1d1d6}
.bz-ans .lab .n{width:24px;height:24px;border-radius:50%;display:grid;place-content:center;font-size:12px;font-weight:600;background:rgba(63,155,128,.25);color:#9fdcc6}
.bz-ans .big{font-family:var(--display);font-variation-settings:"wdth" 112;font-size:40px;line-height:1.1;font-weight:600;letter-spacing:-.03em;margin:var(--s2) 0 6px;overflow-wrap:anywhere}
.bz-ans .split{display:grid;grid-template-columns:1fr auto;gap:2px var(--s3);font-size:13px;line-height:1.6;color:#a1a1a6}
.bz-ans .split b{color:#f5f5f7;font-weight:500;text-align:right}
.bz-ans .split .neg{color:#ff8a80}
.bz-ans .later{font-size:12px;line-height:1.6;color:#a1a1a6;margin:10px 0 0}
.bz-missing{margin:0 0 var(--s3);padding:var(--s3) 14px;border-radius:var(--s3);background:rgba(251,243,226,.08);font-size:12px;line-height:1.6;color:#e9d3a6}
.bz-missing b{display:block;font-weight:600;color:#f5deb0;margin-bottom:2px}
.bz-missing ul{margin:0;padding-left:18px}
.bz-missing small{display:block;color:#b9a77f}
label.bz-inl{display:flex;align-items:center;justify-content:space-between;margin:var(--s2) 0 0;padding:var(--s3) 14px;border-radius:var(--s3);background:rgba(255,255,255,.06);font-size:13px;color:#d1d1d6;cursor:pointer}
label.bz-inl:hover{background:rgba(255,255,255,.1)}
.bz-switch{appearance:none;margin:0;width:36px;height:20px;border-radius:999px;background:#48484a;position:relative;cursor:pointer;flex:none;transition:background-color .2s var(--ease)}
.bz-switch::after{content:"";position:absolute;left:2px;top:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .25s var(--spring)}
.bz-switch:checked{background:var(--biz-hi)} .bz-switch:checked::after{transform:translateX(16px)}
.bz-switch:focus-visible{outline:2px solid #9fdcc6;outline-offset:2px}
.bz-ans .saved{display:flex;align-items:center;gap:6px;font-size:12px;line-height:1.5;color:#8e8e93;margin-top:var(--s3)}
.bz-ans .saved.bad{color:#ff8a80}

@media (max-width:900px){
  .bz-bill,.bz-ws{grid-template-columns:1fr}
  .bz-ans{position:static}
}
@media (max-width:760px){
  .bz-verdict .big{font-size:36px}
  .bz-line,.bz-total{grid-template-columns:minmax(0,1fr) 130px}
  .bz-car-hd{display:none}
  .bz-car{grid-template-columns:72px minmax(0,1fr) auto;gap:4px var(--s3)}
  .bz-thumb{width:72px}
  .bz-car .bz-cn{grid-column:2/-1}
  .bz-car > span[data-l]{grid-column:2;text-align:left}
  .bz-car > span[data-l]::before{content:attr(data-l) "  ";font-size:12px;color:var(--ink-3)}
  .bz-car .bz-state{grid-column:3;grid-row:2}
  .bz-step .q,.bz-step .body{margin-left:0}
  .bz-step .q{margin-top:-8px}
  .bz-f2{grid-template-columns:1fr}
  .bz-prow{grid-template-columns:20px minmax(0,1fr) 44px 80px}
}

/* ---------- Business: polish after the first screenshot round ---------- */
.bz-in input:focus{box-shadow:none;border:0}          /* the box shows focus, not the input inside it */
.bz-line .bz-in,.bz-total .bz-in{background:var(--bg);border-color:transparent}   /* typed-once numbers read like the bill, still clearly editable */
.bz-total .bz-in{background:#fff}
.bz-line .bz-in:hover{border-color:var(--line)}
.bz-line .bz-in:focus-within{background:#fff;border-color:var(--biz)}
.bz-ans .big,.bz-verdict .big{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:6px}
.bz-ans .unit,.bz-verdict .unit{white-space:nowrap}
.bz-addline{text-align:left}
.bz-prow.gone > span{color:var(--ink-3)}
.bz-prow.gone small{color:var(--amber)}

/* ---------- Touch-up v1 (capture file Q48) ---------- */
/* 1. Phone menu in two rows: name and "You are" on top, the built pages below. Unbuilt pages are
      hidden on phones, so nothing runs off the edge and the name picker is always in reach. */
.nav .row-break{display:none}
@media (max-width:760px){
  .nav-in{flex-wrap:wrap;height:auto;overflow:visible;row-gap:0;column-gap:var(--s4);padding:var(--s2) var(--s4) 0}
  .nav-in .brand{order:0;height:36px}
  .nav-in .who{order:1;margin:0}
  .nav-in .who .who-k{display:none}
  .nav .row-break{display:block;order:1;flex-basis:100%;height:0}
  .nav-in .soon{display:none}
  /* Glass menu (Q60): a full-width pill of icons on its own row, every icon 44px to tap; Home is back as an icon */
  .nav-in .brand{font-size:18px;height:44px}
  .nav-in .lgn{order:2;flex-basis:100%;margin:var(--s2) 0 var(--s2);justify-content:space-between}
  .lgn > a{height:44px;min-width:44px;justify-content:center;padding:0 10px;font-size:13px}
  .lgn > a i{font-size:19px}
  .nav-in .who{margin-left:auto}
  .nav-in .who select{min-height:44px}
}
/* 2. Home car card: the arrows sit next to "1 of 3", top right, so they never cover the part chips. */
@media (min-width:761px){
  .hero .chev{top:16px;margin-top:0;width:32px;height:32px}
  .hero .chev.r{right:16px}
  .hero .chev.l{left:auto;right:108px}
  .hero .pos{top:22px;right:56px;min-width:44px;text-align:center}
}
/* 3. Business pages: a big answer with no number yet is a short, quiet dash, not a long white bar. */
.bz-verdict .big .blank,.bz-ans .big .blank{font-family:var(--body);font-variation-settings:normal;font-weight:400;font-size:28px;letter-spacing:0;color:rgba(255,255,255,.5)}   /* 5.3:1 on graphite: quiet but readable */
.bz-ans .big.has-blank .unit{color:rgba(255,255,255,.5)}
/* 4. Knowledge: any folder beyond the 4 lists is a small pill, with New folder at the end of the row. */
.kn-more{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);margin:calc(-1 * var(--s1)) 0 var(--s4)}
.kn-more .k{display:inline-flex;align-items:center;min-height:36px;font-size:12px;line-height:1;color:var(--ink-2);margin:0 var(--s1) 0 0}   /* ink-2: 4.7:1, ink-3 is too light for small text */
.kn-more-list{display:contents}
.kn-pill{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 var(--s3);border-radius:999px;background:var(--tile);box-shadow:var(--lift-1);border:0;font:inherit;font-size:13px;line-height:1.4;color:var(--ink);text-decoration:none;cursor:pointer;transition:transform .25s var(--spring)}
.kn-pill i{font-size:15px;color:var(--ink-2)}
.kn-pill small{font-size:12px;color:var(--ink-2)}
.kn-pill:hover{transform:translateY(-1px)} .kn-pill:active{transform:scale(.97)}
.kn-pill.add{background:transparent;box-shadow:none;border:1px dashed var(--line);color:var(--ink-2)}
.kn-pill.add:hover{color:var(--ink)}
@media (max-width:560px){ .kn-pill{min-height:44px} }
/* 5. Car business page: "No suppliers yet" uses the full width, so it never breaks mid-name. */
.bz-opts .bz-none{grid-column:1/-1}

/* ---------- Liquid Glass on Home (capture file Q49) ---------- */
/* Rebuilt in plain CSS from the owner's 21st.dev LiquidButton: a rim of soft inner light, and behind
   it the Silk background blurred (and bent, in Chrome-type browsers, by the SVG filters in index.html).
   Only while the Silk is showing (body.silk); without it Home keeps its plain white tiles. */
/* .pd-sh .lg = the same glass on the Product page car card's "Continue work" (Q56; frosted, no bending there) */
body.silk .lg,.pd-sh .lg{isolation:isolate;
  box-shadow:0 0 8px rgba(0,0,0,.03),0 2px 6px rgba(0,0,0,.08),
    inset 3px 3px .5px -3.5px rgba(255,255,255,.09),inset -3px -3px .5px -3.5px rgba(255,255,255,.85),
    inset 1px 1px 1px -.5px rgba(255,255,255,.6),inset -1px -1px 1px -.5px rgba(255,255,255,.6),
    inset 0 0 6px 6px rgba(255,255,255,.12),inset 0 0 2px 2px rgba(255,255,255,.06),0 0 12px rgba(0,0,0,.15)}
body.silk .lg:not(.chev),.pd-sh .lg{position:relative}   /* the car arrows keep their own place */
body.silk .lg::before,.pd-sh .lg::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;overflow:hidden;
  -webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%)}
.lg-bend body.silk .lg::before{backdrop-filter:url(#lg-glass) saturate(160%)}
.lg-bend body.silk .sc-tile.lg::before{backdrop-filter:url(#lg-glass-soft) blur(6px) saturate(160%)}
body.silk .lg:focus-visible,.pd-sh .lg:focus-visible{outline-color:#fff}   /* velvet would vanish on the dark glass */
.pd-sh .pd-cw.lg{background:rgba(255,255,255,.06);color:#fff}
/* Car card: Continue work and the arrows */
body.silk .hero .cta.lg{background:rgba(255,255,255,.06);color:#fff}
body.silk .hero .chev.lg{background:rgba(255,255,255,.04);border-color:transparent;color:#fff}
/* Shortcut tiles: smoked glass, each list keeps its own colour on the icon (Build B15) */
body.silk .sc-tile.lg{background:rgba(20,20,22,.30);color:#fff}
body.silk .sc-tile.lg > i{background:var(--c);color:#fff}
body.silk .sc-tile.lg .sc-count,body.silk .sc-tile.lg .sc-k{color:rgba(255,255,255,.72)}
body.silk .sc-tile.lg .sc-next{color:#fff}

/* ---------- Liquid Glass on the name picker (capture file Q51) ---------- */
/* The "You are" picker sits in a glass pill on every page: the light version of the 21st.dev rim
   (the menu is light) over a frosted blur. No bending here: the pill is small and holds text. */
.who-glass{position:relative;isolation:isolate;display:inline-flex;border-radius:999px;transition:transform .25s var(--spring);
  box-shadow:0 0 6px rgba(0,0,0,.03),0 2px 6px rgba(0,0,0,.08),
    inset 3px 3px .5px -3px rgba(0,0,0,.9),inset -3px -3px .5px -3px rgba(0,0,0,.85),
    inset 1px 1px 1px -.5px rgba(0,0,0,.6),inset -1px -1px 1px -.5px rgba(0,0,0,.6),
    inset 0 0 6px 6px rgba(0,0,0,.12),inset 0 0 2px 2px rgba(0,0,0,.06),0 0 12px rgba(255,255,255,.15)}
.who-glass::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;overflow:hidden;
  -webkit-backdrop-filter:blur(10px) saturate(160%);backdrop-filter:blur(10px) saturate(160%)}
.who-glass:hover{transform:translateY(-1px)}
.who .who-glass select{background:transparent;border-color:transparent;font-weight:500;padding:4px 10px 4px 14px}
/* "Pick your name first": the velvet glow still shows on the glass */
.who .who-glass select.need{border-color:var(--velvet);box-shadow:0 0 0 3px var(--velvet-soft)}

/* ---------- Marketing page (Spec S-5, look: capture file Q50, option A) ---------- */
/* Marketing's colour is the plum the Ideas list already has, so HQ gets no new colour. Velvet stays
   for done ticks. Phones: the ready number comes before the checklist. */
:root{--mkt:#5b3fa0;--mkt-soft:#eee9f8}
.mk-ico{background:var(--mkt-soft);color:var(--mkt)}
.mk-tabs .kn-tab{--c:var(--mkt);--cs:var(--mkt-soft)}
.mk-tabs .kn-tab.on > i{background:var(--mkt);color:#fff}
.mk-tab .bz-tile-h > i{color:var(--mkt)}
.mk-tab .msg{display:block;min-height:0;margin-top:var(--s2)}
.mk-h3{font-size:13px;font-weight:600;color:var(--ink-2);margin:0 0 var(--s1)}
/* checklist rows */
.mk-row{display:grid;grid-template-columns:20px minmax(0,1fr) auto;align-items:center;gap:var(--s3);padding:10px 0;border-top:1px solid var(--line);font-size:14px;line-height:1.5}
.mk-row:first-of-type{border-top:0}
.mk-row small{display:block;font-size:12px;color:var(--ink-2)}
.mk-row .side{display:flex;align-items:center;gap:var(--s3);font-size:12px;color:var(--ink-2);white-space:nowrap}
.mk-row .side a{color:var(--ink-2);text-decoration:none} .mk-row .side a:hover{color:var(--ink);text-decoration:underline} .mk-row .side a:active{opacity:.7}
.mk-dot{width:20px;height:20px;border-radius:50%;border:1.5px dashed var(--ink-3);box-sizing:border-box}
.mk-dot.y,.mk-row .ck:checked{border:0;background:var(--velvet) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' stroke='%23fff' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat}
.mk-row .ck:checked::after{display:none}
.mk-note{display:block;width:100%;margin-top:4px;font:inherit;font-size:12px;color:var(--ink);background:var(--bg);border:1px solid transparent;border-radius:8px;padding:4px 8px}
.mk-note:focus{border-color:var(--line);background:var(--tile)}
.mk-linkbtn{font:inherit;font-size:12px;color:var(--velvet);background:none;border:0;padding:0;cursor:pointer;text-align:left;transition:opacity .15s var(--ease)}
.mk-linkbtn:hover{text-decoration:underline} .mk-linkbtn:active{opacity:.7}
.mk-attach{display:inline-flex;align-items:center;gap:4px;cursor:pointer;color:var(--ink-2)}
.mk-attach:hover{color:var(--ink)}
/* the ready tile, dark like the Business verdict */
.mk-a{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:var(--s4);align-items:start;margin-bottom:var(--s4)}
.mk-side{display:grid;gap:var(--s4)}
.mk-ready{border-radius:20px;padding:var(--s5);color:#fff;box-shadow:var(--lift-hero);background:radial-gradient(70% 90% at 90% 110%,rgba(140,47,71,.35),transparent 70%),var(--graphite)}
.mk-ready .k{font-size:13px;color:#b9b9c0;display:flex;align-items:center;gap:var(--s2)}
.mk-ready .big{font-family:var(--display);font-variation-settings:"wdth" 112;font-size:56px;line-height:1;font-weight:600;letter-spacing:-.03em;margin:var(--s3) 0 var(--s2)}
.mk-ready .big span{font-size:24px;color:#a1a1a6;letter-spacing:-.01em}
.mk-bar{height:6px;border-radius:999px;background:#2c2c2e;overflow:hidden;margin:var(--s3) 0 var(--s4)}
.mk-bar i{display:block;height:100%;background:var(--velvet-hi);border-radius:999px;transform-origin:left}
.mk-next{display:flex;align-items:center;gap:var(--s2);font-size:14px;color:#f5f5f7}
.mk-next .k2{color:#a1a1a6}
.mk-ready p{font-size:13px;line-height:1.6;color:#b9b9c0;margin:var(--s3) 0 0}
/* the car table */
.mk-cars{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(5,minmax(0,1fr));font-size:13px}
.mk-cars > div{padding:10px 8px;border-top:1px solid var(--line);display:flex;align-items:center;min-width:0}
.mk-cars .hd{border-top:0;font-size:12px;color:var(--ink-2);padding-top:0;align-items:flex-end}
.mk-cars .off{opacity:.55}
.mk-car{display:flex;align-items:center;gap:var(--s3);min-width:0}
.mk-car img,.mk-car .bz-nopic{width:64px;height:36px;object-fit:contain;flex:none}
.mk-car b{display:block;font-weight:600;font-size:14px}
.mk-car small{font-size:12px;color:var(--ink-2)}
.mk-cell{display:inline-flex;align-items:center;gap:6px;color:var(--ink-2)}
.mk-cell.y{color:var(--ink)}
.mk-cell.y::before{content:"";width:16px;height:16px;border-radius:50%;flex:none;background:var(--velvet) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' stroke='%23fff' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px no-repeat}
/* content */
.mk-pieces{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3)}
.mk-piece{border-radius:16px;background:var(--bg);padding:var(--s4);display:flex;flex-direction:column;gap:var(--s2);min-width:0}
.mk-piece .top{display:flex;align-items:center;gap:var(--s2);font-size:14px;font-weight:600}
.mk-piece .top .chip{margin-left:auto}
.mk-piece .chip.grey{background:var(--tile)}
.mk-piece p{margin:0;font-size:13px;line-height:1.6;color:var(--ink-2);overflow-wrap:anywhere}
.mk-piece input[type=text],.mk-piece textarea,.mk-piece select,.mk-field{width:100%;font:inherit;font-size:13px;color:var(--ink);background:var(--tile);border:1px solid var(--line);border-radius:10px;padding:8px 10px}
.mk-piece textarea{min-height:96px;resize:vertical;line-height:1.5}
.mk-piece .acts{display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;margin-top:auto}
.mk-thumbs{display:flex;gap:6px;flex-wrap:wrap}
.mk-thumbs a{width:calc((100% - 12px)/3);aspect-ratio:4/3;border-radius:10px;background:var(--tile) center/cover no-repeat;box-shadow:inset 0 0 0 1px var(--line);display:grid;place-content:center;color:var(--ink-3)}
.mk-vid{aspect-ratio:16/9;border-radius:10px;background:var(--graphite);display:grid;place-content:center;color:#fff;font-size:22px}
.mk-carhead{display:flex;align-items:center;gap:var(--s3);margin-bottom:var(--s3);flex-wrap:wrap}
.mk-carhead img,.mk-carhead .bz-nopic{width:72px;height:40px;object-fit:contain}
.mk-carhead b{font-size:16px}
.mk-carhead .right{margin-left:auto;font-size:12px;color:var(--ink-2)}
.mk-closed{display:flex;align-items:center;gap:var(--s3);padding:var(--s3) 0;border-top:1px solid var(--line);font-size:14px}
.mk-closed img,.mk-closed .bz-nopic{width:72px;height:40px;object-fit:contain}
.mk-closed small{display:block;color:var(--ink-2);font-size:12px}
.mk-closed .btn{margin-left:auto}
.mk-list .mk-row{grid-template-columns:28px minmax(0,1fr) auto}
.mk-ch{font-size:18px;color:var(--ink-2)}
.mk-rule{display:flex;align-items:center;gap:var(--s2);background:var(--amber-soft);color:var(--amber);border-radius:12px;padding:10px var(--s3);font-size:13px;font-weight:500;margin-bottom:var(--s2)}
.mk-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4);margin-top:var(--s4)}
.mk-add{display:flex;gap:var(--s2);flex-wrap:wrap;margin-top:var(--s3)}
.mk-add .mk-field{flex:1;min-width:140px;width:auto}
.mk-add select.mk-field{flex:0 0 auto}
.chip.maybe{background:var(--amber-soft);color:var(--amber)}
button.chip{border:0;cursor:pointer;font:inherit;font-size:12px;transition:transform .25s var(--spring)}
button.chip:hover{transform:translateY(-1px)} button.chip:active{transform:scale(.95)}
/* buyers */
.mk-stats{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr));gap:var(--s4);margin-bottom:var(--s4);align-items:start}
.mk-stat{background:var(--tile);border-radius:20px;box-shadow:var(--lift-1);padding:var(--s5)}
.mk-stat .k{font-size:13px;color:var(--ink-2)}
.mk-stat .big{font-family:var(--display);font-variation-settings:"wdth" 112;font-size:34px;line-height:1.1;font-weight:600;letter-spacing:-.03em;margin:var(--s2) 0 var(--s1)}
.mk-stat .line{font-size:13px;color:var(--ink-2);margin-top:var(--s1)}
.mk-stat .line b{color:var(--ink)}
.mk-stat.lead{background:var(--mkt-soft)}
.mk-stat.lead .big{color:var(--mkt);font-size:28px}
.mk-prog{display:grid;gap:var(--s3);margin-top:var(--s3)}
.mk-prog div{font-size:13px}
.mk-prog i{display:block;height:6px;border-radius:999px;background:var(--bg);margin-top:4px;overflow:hidden}
.mk-prog i b{display:block;height:100%;background:var(--mkt);border-radius:999px}
.mk-price{display:inline-flex;align-items:center;gap:var(--s2);font-size:13px;color:var(--ink-2);margin-left:auto}
.mk-price .bz-in{width:110px}
.mk-talks{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr) 90px 110px 90px minmax(0,1.2fr);font-size:13px}
.mk-talks > *{padding:10px 8px;border-top:1px solid var(--line);display:flex;flex-direction:column;justify-content:center;min-width:0}
.mk-talks .hd{border-top:0;font-size:12px;color:var(--ink-2);padding-top:0;justify-content:flex-end}
.mk-talks > .chipcell > .chip{align-self:flex-start}
.mk-talk{display:contents;cursor:pointer}
.mk-talk:hover > *{background:var(--bg)}
.mk-talk b{font-weight:600;font-size:14px}
.mk-talk small{color:var(--ink-2);font-size:12px}
.mk-qs{display:grid;gap:var(--s3);margin:var(--s3) 0}
.mk-qs label{font-size:13px;color:var(--ink);display:grid;gap:4px}
.mk-qs textarea{font:inherit;font-size:13px;border:1px solid var(--line);border-radius:10px;padding:8px 10px;min-height:44px;resize:vertical}
/* brands */
.mk-brands{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s3);margin-bottom:var(--s4)}
.mk-brand{background:var(--tile);border-radius:20px;box-shadow:var(--lift-1);padding:var(--s4);display:flex;flex-direction:column;gap:var(--s2);text-decoration:none;color:var(--ink);border:0;font:inherit;text-align:left;cursor:pointer;transition:transform .25s var(--spring)}
.mk-brand:hover{transform:translateY(-2px)} .mk-brand:active{transform:scale(.98)}
.mk-brand.on{box-shadow:inset 0 0 0 2px var(--mkt),var(--lift-1)}
.mk-brand b{font-size:15px} .mk-brand small{font-size:12px;color:var(--ink-2)}
.mk-prev{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.mk-prev span{aspect-ratio:1;border-radius:10px;background:var(--bg) center/cover no-repeat;display:grid;place-content:center;color:var(--ink-3);font-size:16px}
.mk-brand.add{background:transparent;box-shadow:none;border:1.5px dashed var(--line);align-items:center;justify-content:center;color:var(--ink-2);font-size:14px;min-height:120px}
.mk-sum{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4);margin-bottom:var(--s4)}
.mk-sum label{display:grid;gap:4px;font-size:12px;color:var(--ink-2)}
.mk-items{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s3)}
.mk-item{font-size:12px;color:var(--ink-2);text-decoration:none;min-width:0;overflow-wrap:anywhere;position:relative}
.mk-item .pic{display:grid;place-content:center;aspect-ratio:4/3;border-radius:12px;background:var(--bg) center/cover no-repeat;color:var(--ink-3);font-size:20px;margin-bottom:6px}
.mk-item b{display:block;color:var(--ink);font-weight:500;font-size:13px}
.mk-item .x{position:absolute;top:6px;right:6px}
.mk-none{font-size:14px;line-height:1.6;color:var(--ink-2);margin:0}
@media (max-width:860px){
  .mk-a,.mk-two,.mk-stats,.mk-sum{grid-template-columns:1fr}
  .mk-a .mk-side{order:-1}
  .mk-pieces{grid-template-columns:1fr}
  .mk-brands{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mk-items{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mk-cars{grid-template-columns:minmax(0,1fr) repeat(5,32px)}
  .mk-cars .hd:not(:first-child),.mk-cell{font-size:0}
  .mk-cell:not(.y)::before{content:"";width:16px;height:16px;border-radius:50%;border:1.5px dashed var(--ink-3);box-sizing:border-box;flex:none}
  .mk-car img,.mk-car .bz-nopic{width:48px}
  .mk-talks{grid-template-columns:minmax(0,1fr) auto}
  .mk-talks .hd,.mk-talks .opt{display:none}
  .mk-price{margin-left:0}
}
.mk-plain{font:inherit;font-size:12px;background:none;border:0;padding:0}
.mk-row .mk-note{height:30px;margin-top:6px;padding:4px 10px;font-size:12px;border-radius:8px;border:1px solid var(--line);background:var(--bg)}
.mk-row .mk-note:focus{background:var(--tile)}
.mk-next{align-items:baseline}
.mk-row .side label{margin:0;font-size:12px;line-height:1.5}   /* the general label style adds space above and below */
.mk-plain{line-height:1.5}
.mk-tab a.mk-file{color:var(--velvet);text-decoration:none;overflow-wrap:anywhere} .mk-tab a.mk-file:hover{text-decoration:underline} .mk-tab a.mk-file:active{opacity:.7}
.mk-price label{margin:0;font-size:13px}
.mk-who{display:flex;flex-direction:column;align-items:flex-start;text-align:left;cursor:pointer;color:var(--ink)}
.mk-who small{font-size:12px;color:var(--ink-2)}
.mk-who:hover b{text-decoration:underline}
.mk-qs label{margin:0}
#talk-dlg .fld{margin-top:var(--s3)}
#talk-dlg [hidden]{display:none}
.mk-talks > .mk-talk > *{padding:10px 8px;border-top:1px solid var(--line);display:flex;flex-direction:column;justify-content:center;min-width:0}
.mk-talk > .chipcell > .chip{align-self:flex-start}
.mk-sum label{margin:0}
.mk-sum .mk-field{width:100%;font:inherit;font-size:14px;color:var(--ink);background:var(--bg);border:1px solid transparent;border-radius:10px;padding:8px 10px}
.mk-sum .mk-field:focus{background:var(--tile);border-color:var(--line)}
.mk-item .kn-x{width:26px;height:26px;background:rgba(255,255,255,.9)}
.mk-brand.add .mk-field{width:100%;font:inherit;font-size:14px;border:1px solid var(--line);border-radius:10px;padding:8px 10px;background:var(--tile)}
.mk-tab label.btn{margin:0}
#brand-open .mk-add .mk-field{background:var(--tile);border:1px solid var(--line);border-radius:10px;padding:8px 10px;font:inherit;font-size:13px}
/* Phones: every Marketing button and link-button is at least 44px tall, so it is easy to tap */
@media (max-width:760px){
  .mk-tab .mk-attach,.mk-tab .mk-plain,.mk-tab .btn,.mk-tab button.chip,.mk-tab .mk-linkbtn,.mk-tab .mk-who{min-height:44px;display:inline-flex;align-items:center}
  .mk-tab .mk-who{align-items:flex-start;justify-content:center}
  .mk-tab .kn-x{min-height:44px;min-width:44px}
  .mk-tab .mk-row .side{gap:var(--s2);flex-wrap:wrap;justify-content:flex-end}
}
@media (max-width:560px){
  .mk-tab .mk-row{grid-template-columns:20px minmax(0,1fr)}
  .mk-tab .mk-list .mk-row{grid-template-columns:28px minmax(0,1fr)}
  .mk-tab .mk-row .side{grid-column:2;justify-content:flex-start}
}
.mk-stat.lead .k,.mk-stat.lead .line{color:var(--ink)}   /* ink-2 on the plum tile is only 4.3:1 */
/* Final review fixes (Build B22) */
.mk-ticklabel{display:block;margin:0;font-size:14px;line-height:1.5;color:var(--ink);cursor:pointer}
@media (max-width:760px){ .mk-ticklabel{min-height:44px;display:flex;align-items:center} }
/* hidden file inputs: the button that opens them shows the focus ring */
.mk-tab label:has(+ input.sr-only:focus),#talk-dlg label:has(+ input.sr-only:focus){outline:2px solid var(--velvet);outline-offset:2px;border-radius:8px}

/* ---------- Home: the Marketing launch strip (capture file Q52) ---------- */
/* A slim bar between the car card and the Shortcuts: how ready the launch is and the next thing
   missing. White tile without the Silk; smoked glass over it, like the Shortcut tiles. */
.mk-strip{display:flex;align-items:center;gap:var(--s4);margin-top:var(--s5);padding:var(--s3) var(--s5);min-height:56px;border-radius:20px;background:var(--tile);box-shadow:var(--lift-1);color:var(--ink);text-decoration:none;font-size:14px;line-height:1.4;transition:transform .25s var(--spring)}
.mk-strip:hover{transform:translateY(-2px)} .mk-strip:active{transform:scale(.99)}
.mk-strip[hidden]{display:none}
.mk-strip-ico{width:32px;height:32px;border-radius:10px;display:grid;place-content:center;background:var(--mkt);color:#fff;font-size:16px;flex:none}
.mk-strip-k{font-weight:600}
.mk-strip b{font-weight:600;white-space:nowrap}
.mk-strip-bar{flex:0 0 120px;height:6px;border-radius:999px;background:var(--bg);overflow:hidden}
.mk-strip-bar i{display:block;height:100%;width:0;background:var(--velvet);border-radius:999px}
.mk-strip-next{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink-2)}
.mk-strip-go{font-size:18px;color:var(--ink-2)}
body.silk .mk-strip.lg{background:rgba(20,20,22,.30);color:#fff}
body.silk .mk-strip.lg .mk-strip-next,body.silk .mk-strip.lg .mk-strip-go{color:rgba(255,255,255,.72)}
body.silk .mk-strip.lg .mk-strip-bar{background:rgba(255,255,255,.18)}
body.silk .mk-strip.lg .mk-strip-bar i{background:var(--velvet-hi)}
.lg-bend body.silk .mk-strip.lg::before{backdrop-filter:url(#lg-glass-soft) blur(6px) saturate(160%)}
@media (max-width:560px){
  .mk-strip{flex-wrap:wrap;row-gap:var(--s2);padding:var(--s3) var(--s4)}
  .mk-strip-bar{flex:1 0 80px}
  .mk-strip-next{flex-basis:calc(100% - 40px);order:5;white-space:normal}
  .mk-strip-go{order:6}
}

/* ---------- Calendar (Spec S-6, Q53) ---------- */
/* Look: brainstorms/mockups/calendar-v1.html?div=line (option A: white day box; a thin line and a small
   icon above Events, Work done and Notes). Kinds: meeting green, important amber, work done grey,
   today and the picked day velvet. */
.cal-ico{background:var(--ink);color:#fff}
.cal-wrap{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:var(--s5);align-items:start}

/* the month */
.cal{background:var(--tile);border-radius:var(--r);box-shadow:var(--lift-1);padding:var(--s4)}
.cal-top{display:flex;align-items:center;gap:var(--s2);padding:0 var(--s1) var(--s3)}
.cal-top h2{margin:0;font-size:22px;line-height:1.2;letter-spacing:-.02em;font-weight:600;flex:1}
.cal-top .icon-btn{box-shadow:none}
.cal-top .icon-btn:hover{transform:translateY(-1px)}          /* arrows lift, they don't spin like the + buttons */
.cal-top .icon-btn:active{transform:scale(.92)}
.cal-dow{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));font-size:12px;line-height:1.5;color:var(--ink-2);padding:0 0 var(--s2)}
.cal-dow span{padding-left:var(--s2)}
.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden}
.day{all:unset;box-sizing:border-box;background:var(--tile);min-height:108px;padding:6px 6px var(--s1);display:flex;flex-direction:column;gap:2px;cursor:pointer;min-width:0;position:relative;transition:opacity .2s var(--ease)}
.day:hover{background:var(--bg)}
.day:active{opacity:.7}
.day:focus-visible{outline:2px solid var(--velvet);outline-offset:-2px}
.day.out{background:var(--bg)} .day.out .n{color:var(--ink-3)}
.day .n{font-size:12px;line-height:1;font-weight:500;width:24px;height:24px;display:grid;place-content:center;border-radius:50%;margin-bottom:2px;font-variant-numeric:tabular-nums;flex:none}
.day.today .n{background:var(--velvet);color:#fff}
.day.sel{box-shadow:inset 0 0 0 2px var(--velvet)}
.ev{font-size:12px;line-height:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:none}
.ev.all{border-radius:6px;padding:0 6px;font-weight:500;background:var(--bg);color:var(--ink-2)}
.ev.all.meet{background:#e8f4ec;color:var(--ok)}
.ev.all.imp{background:var(--amber-soft);color:var(--amber)}
.ev.t{display:flex;align-items:center;gap:5px;padding:0 2px;color:var(--ink);--c:var(--ink-3)}
.ev.t::before{content:"";flex:none;width:3px;height:12px;border-radius:2px;background:var(--c)}
.ev.t.meet{--c:var(--ok)} .ev.t.imp{--c:var(--amber)}
.ev.t b{font-weight:500;color:var(--ink-2)}
.ev.t span{overflow:hidden;text-overflow:ellipsis}
.ev.work{color:var(--ink-2);display:flex;align-items:center;gap:4px;padding:0 2px}
.ev.work i{font-size:13px;color:var(--ink-3);flex:none}
.ev.work span{overflow:hidden;text-overflow:ellipsis}       /* long name lists end in … like the event lines */
.more{font-size:12px;line-height:18px;color:var(--ink-2);padding:0 2px}
.pips{display:none}
.cal-key{display:flex;gap:var(--s4);flex-wrap:wrap;font-size:12px;line-height:1.5;color:var(--ink-2);padding:var(--s3) var(--s1) 0}
.cal-key span{display:inline-flex;align-items:center;gap:6px}
.cal-key span::before{content:"";width:10px;height:10px;border-radius:3px;background:var(--c)}
.cal-key .k-meet{--c:var(--ok)} .cal-key .k-imp{--c:var(--amber)} .cal-key .k-work{--c:var(--ink-3)}

/* the day box (option A: white), each part split by a thin line */
.dayp{background:var(--tile);border-radius:var(--r);box-shadow:var(--lift-1);padding:var(--s5);position:sticky;top:64px}
.dayp-h{display:flex;align-items:baseline;gap:var(--s2);flex-wrap:wrap}
.dayp-h h2{margin:0;font-size:20px;line-height:1.2;letter-spacing:-.02em;font-weight:600}
.dayp-h .pill{font-size:12px;line-height:1.5;font-weight:500;color:var(--velvet);background:var(--velvet-soft);border-radius:999px;padding:2px 10px}
.dp-sec{border-top:1px solid var(--line);padding-top:var(--s4);margin-top:var(--s4)}
.dp-sec h3{font-family:var(--body);font-variation-settings:normal;font-size:13px;line-height:1.5;font-weight:600;margin:0 0 var(--s2);display:flex;align-items:center;gap:6px;color:var(--ink)}
.dp-sec h3 i{font-size:16px;color:var(--ink-2)}
.dp-sec h3 .c{font-weight:400;color:var(--ink-2)}
.dp-ev{all:unset;box-sizing:border-box;width:100%;display:flex;gap:var(--s3);padding:var(--s2) 0;cursor:pointer;border-radius:4px;--c:var(--ink-3);transition:opacity .2s var(--ease)}
.dp-ev.meet{--c:var(--ok)} .dp-ev.imp{--c:var(--amber)}
.dp-ev::before{content:"";flex:none;width:3px;border-radius:2px;background:var(--c)}
.dp-ev > div{min-width:0}
.dp-ev b{display:block;font-size:14px;line-height:1.4;font-weight:500;overflow-wrap:anywhere}
.dp-ev small{display:block;font-size:12px;line-height:1.5;color:var(--ink-2)}
.dp-ev:hover b{text-decoration:underline}
.dp-ev:active{opacity:.6}
.dp-ev:focus-visible{outline:2px solid var(--velvet);outline-offset:2px}
.dp-who{display:flex;gap:var(--s2);padding:6px 0;align-items:flex-start}
.dp-who .av{flex:none;width:24px;height:24px;border-radius:50%;background:var(--bg);color:var(--ink-2);font-size:11px;font-weight:600;display:grid;place-content:center;margin-top:1px}
.dp-who ul{list-style:none;margin:0;padding:0;min-width:0;flex:1}
.dp-who li{display:flex;gap:var(--s2);font-size:13px;line-height:1.6}
.dp-who li a{color:var(--ink);text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
.dp-who li a:hover{text-decoration:underline} .dp-who li a:active{opacity:.6}
.dp-who li time{color:var(--ink-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.dp-who .nm{font-size:13px;line-height:1.6;font-weight:600}
.dp-note{padding:var(--s2) 0;border-top:1px solid var(--line)}
.dp-note:first-of-type{border-top:0}
.dp-note .meta{font-size:12px;line-height:1.5;color:var(--ink-2);display:flex;align-items:baseline;gap:4px;flex-wrap:wrap}
.dp-note .meta b{color:var(--ink);font-weight:600}
.dp-note p{margin:2px 0 0;font-size:14px;line-height:1.55;white-space:pre-wrap;overflow-wrap:anywhere}
.dp-own{margin-left:auto;display:inline-flex;gap:var(--s3)}
.dp-own .linkbtn{transition:opacity .15s var(--ease)}
.dp-own .linkbtn:hover{text-decoration:underline} .dp-own .linkbtn:active{opacity:.6}
.dp-write{margin-top:var(--s3);display:flex;flex-direction:column;gap:var(--s2)}
.dp-write textarea,.dp-note .dp-edit{font:inherit;font-size:14px;line-height:1.5;border:1px solid var(--line);border-radius:var(--r-sm);padding:var(--s2) var(--s3);resize:vertical;min-height:64px;background:var(--tile);color:var(--ink)}
.dp-note .dp-edit{margin-top:var(--s1)}
.dp-write-row{display:flex;align-items:center;justify-content:flex-end;gap:var(--s2)}
.dp-write-row .msg{margin-right:auto}
.dp-write-row .msg:empty{min-height:0}
.dp-note .dp-write-row{margin-top:var(--s2)}
.dayp .kn-none{margin:0;padding:var(--s1) 0}
/* event dialog: start and end side by side */
.cal-times{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--s4)}
.cal-times label{margin:var(--s3) 0 6px}
.cal-dlg .kn-f > label.kn-tick{margin:var(--s4) 0 0}
.cal-dlg .kn-sel,.cal-dlg input[type=text]{min-height:44px}   /* every box the same height, easy to tap */
.cal-dlg textarea{min-height:88px}

/* phones: the calendar on top, the day below */
@media (max-width:860px){
  .cal-wrap{grid-template-columns:1fr}
  .dayp{position:static}
}
@media (max-width:560px){
  .cal{padding:var(--s3) var(--s2) var(--s2)}
  .cal-top h2{font-size:19px;white-space:nowrap}
  .cal-head > div{flex-basis:calc(100% - 60px)}          /* title and line on their own row; the button below */
  .cal-head .btn{margin-left:auto}
  .cal-dow span{padding-left:0;text-align:center}
  .day{min-height:52px;align-items:center;padding:4px 2px}
  .day .ev,.day .more{display:none}
  .pips{display:flex;gap:3px;justify-content:center}
  .pips i{width:6px;height:6px;border-radius:50%;background:var(--c,var(--ink-3))}
  .pips .meet{--c:var(--ok)} .pips .imp{--c:var(--amber)} .pips .work{--c:var(--ink-3)}
  .cal-key{gap:var(--s3)}
  .cal-top .btn.ghost{min-height:44px}
  .cal-top .icon-btn{width:44px;height:44px}
  .cal-head .btn{min-height:44px}
  .dp-own .linkbtn{min-height:44px;margin:-12px 0}       /* easy to tap, without making the line taller */
  .dp-write-row .btn{min-height:44px}
  .cal-times{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.day,.dp-ev{transition:none}}

/* ---------- 21st.dev buttons, rebuilt in plain CSS (Q56) ---------- */
/* Interactive hover button (Home "Continue work", on top of its liquid glass): a small velvet dot grows until it fills the pill,
   the words slide away and the arrow words slide in. Keyboard focus does the same as hover. */
.ihb{position:relative;overflow:hidden;isolation:isolate;justify-content:center;min-width:150px}
.ihb-t1,.ihb-t2{display:inline-flex;align-items:center;gap:var(--s2);transition:transform .3s var(--spring),opacity .3s var(--ease)}
.ihb-t1{padding-left:14px}
.ihb-t2{position:absolute;inset:0;justify-content:center;color:#fff;opacity:0;transform:translateX(40px);z-index:2}
.ihb-dot{position:absolute;left:18px;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:999px;background:var(--velvet);z-index:1;transition:transform .4s var(--ease)}
.ihb:hover .ihb-t1,.ihb:focus-visible .ihb-t1{transform:translateX(40px);opacity:0}
.ihb:hover .ihb-t2,.ihb:focus-visible .ihb-t2{transform:none;opacity:1}
.ihb:hover .ihb-dot,.ihb:focus-visible .ihb-dot{transform:scale(48)}
.ihb:active{transform:scale(.97)}

/* Shiny button: every add / create / upload button in HQ (Q56/Q57). A dark pill with a red rim; a bright
   light keeps running round the rim. A big spinning colour wheel sits behind; a dark pill 2.5px smaller
   covers all but the rim. Add the class "shiny" to any button, link or label: it keeps its own size,
   words and icon, and only its look changes. */
.shiny{position:relative;overflow:hidden;isolation:isolate;border-radius:999px;border-color:transparent;color:#fff}
/* white words always win over the old ghost/pill/link colours (repeated class = stronger rule) */
.shiny.shiny.shiny,.shiny.shiny.shiny:hover,.shiny.shiny.shiny i{color:#fff}
.shiny::before{content:"";position:absolute;left:50%;top:50%;width:300px;height:300px;margin:-150px 0 0 -150px;z-index:-2;
  background:conic-gradient(from 0deg,rgba(208,88,122,.55) 0 55%,var(--velvet-hi) 70%,#fff 80%,var(--velvet-hi) 90%,rgba(208,88,122,.55) 100%);
  animation:shiny-spin 2.6s linear infinite}
.shiny::after{content:"";position:absolute;inset:2.5px;border-radius:inherit;background:var(--ink);z-index:-1}
.shiny:hover::after{background:#000}
.shiny-in{display:inline-flex;align-items:center;gap:var(--s2)}
.mk-attach.shiny{padding:6px 14px;font-size:13px;font-weight:500}   /* was a plain text link */
.sp-ib.shiny{border-radius:50%}
@keyframes shiny-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.shiny::before{animation:none}.ihb-t1,.ihb-t2,.ihb-dot{transition:none}}
/* Product page: hero "Continue work" and each Active cars "Continue" use the hover button too (Q56) */
.pd-go.ihb{min-width:124px}

/* ---------- HQ look v2 (capture file Q60) ---------- */
/* Wave Mesh on Home (mesh.js): the dot sea sits behind the page, like the Silk does on Product */
.mesh-bg{position:fixed;inset:0;width:100%;height:100%;z-index:-1;display:block;pointer-events:none}
body.mesh{background:radial-gradient(120% 60% at 50% 30%,rgba(245,245,247,.06),transparent 60%),#02010a}

/* Spotlight cards (rebuilt in plain CSS from the owner's 21st.dev "Spotlight Card"): a soft light on the
   card's edge, and a faint glow inside, follow the mouse (app.js sets --mx/--my). No mouse: no light. */
.spot{position:relative;isolation:isolate}
.spot::after{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;padding:1.5px;pointer-events:none;
  background:radial-gradient(180px circle at var(--mx,-999px) var(--my,-999px),#fff,var(--velvet-hi) 30%,transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.sc-tile.spot{background-image:radial-gradient(260px circle at var(--mx,-999px) var(--my,-999px),rgba(208,88,122,.22),transparent 65%)}

/* Product: each active car is its own card, so each can glow */
.pd-list{background:transparent;box-shadow:none;overflow:visible;border-radius:0;display:grid;gap:var(--s3)}
.pd-row{border-top:0;border-radius:var(--r);background-color:var(--tile);box-shadow:var(--lift-1)}
.pd-row.spot{background-image:radial-gradient(320px circle at var(--mx,-999px) var(--my,-999px),rgba(208,88,122,.10),transparent 65%)}

/* Product on the Silk (silk.js adds body.silk): white words, car rows in smoked glass */
body.silk .pd-head h1,body.silk .pd-lh h2{color:#fff}
body.silk .pd-head p{color:rgba(255,255,255,.72)}
body.silk .pd-lh span{color:rgba(255,255,255,.6)}
body.silk .pd-empty{background:rgba(20,20,22,.34);color:#fff}
body.silk .pd-row{--ink:#fff;--ink-2:rgba(255,255,255,.72);color:#fff;background-color:rgba(20,20,22,.34);
  -webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.22),inset 0 0 0 1px rgba(255,255,255,.08),0 12px 32px -14px rgba(0,0,0,.6)}
body.silk .pd-row.sel{background-color:rgba(140,47,71,.30)}
body.silk .pd-row.spot{background-image:radial-gradient(320px circle at var(--mx,-999px) var(--my,-999px),rgba(208,88,122,.22),transparent 65%)}
body.silk .pd-nm,body.silk .pd-nx,body.silk .pd-here{color:#fff}
body.silk .pd-ndg{background:rgba(255,255,255,.1);color:rgba(255,255,255,.75)}
body.silk .pd-ndg.warm{background:rgba(251,243,226,.16);color:var(--amber-soft)}
body.silk .pd-ndg.ok{background:rgba(232,244,236,.14);color:#e8f4ec}
body.silk .pd-go{background:rgba(255,255,255,.08);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
body.silk .pd-row :focus-visible{outline-color:#fff}
/* Phones: "Start a car" goes under the title (it was cut off at the right edge), and the car card's
   arrows sit side by side at the top right, clear of "Step 2 of 6" (they used to cover it). */
@media (max-width:560px){
  .pd-head{flex-direction:column;align-items:flex-start}
  .pd-hero .pd-arw{top:16px;transform:none}
  .pd-hero .pd-arw:hover{transform:scale(1.06)} .pd-hero .pd-arw:active{transform:scale(.94)}
  .pd-hero .pd-arw.p{left:auto;right:68px} .pd-hero .pd-arw.n{right:16px}
}
/* Audit fixes (design-auditor, Q60): on the bright parts of the Silk, light words need help to stay readable */
body.silk .lgn > a:focus-visible,body.silk .brand:focus-visible{outline-color:#fff}   /* velvet ring vanished on the dark glass */
body.silk .lgn-glass{background:rgba(20,20,22,.46)}
body.silk .lgn > a{color:rgba(255,255,255,.85)}
body.silk .who-k{color:#fff;text-shadow:0 1px 10px rgba(2,1,10,.6)}
body.silk .pd-head h1,body.silk .pd-head p,body.silk .pd-lh h2,body.silk .pd-lh span{color:#fff;text-shadow:0 1px 14px rgba(2,1,10,.55),0 0 2px rgba(2,1,10,.35)}

/* ---------- Dark glass pages on a coloured Silk (capture file Q61) ---------- */
/* Business (+ each car's money page) on emerald Silk, Marketing on wine Silk: <body class="night" data-silk="…">.
   One idea: flip the colour tokens for the whole page (light words, smoked-glass cards), then patch the few
   places that had white or the dark ink colour built in. The glass blurs the Silk behind it. */
body.night{
  --bg:#02010a; --tile:rgba(20,20,22,.36); --ink:#f5f5f7; --ink-2:rgba(255,255,255,.72); --ink-3:rgba(255,255,255,.52);
  --line:rgba(255,255,255,.12); --velvet:#d0587a;
  --amber:#fbf3e2; --amber-soft:rgba(138,90,0,.36); --ok:#e8f4ec; --bad:#fdecea; --bad-soft:rgba(179,38,30,.32);
  --biz:#3f9b80; --biz-soft:rgba(63,155,128,.18);
  --lift-1:inset 0 1px 1px rgba(255,255,255,.16),inset 0 0 0 1px rgba(255,255,255,.08),0 12px 32px -14px rgba(0,0,0,.7);
  --lift-2:inset 0 1px 1px rgba(255,255,255,.18),inset 0 0 0 1px rgba(255,255,255,.09),0 24px 48px -16px rgba(0,0,0,.8);
  background:#02010a;color:var(--ink)}
body.night .bz-tile,body.night .kn-tab,body.night .kn-pill,body.night .bz-car,body.night .mk-brand,body.night .bz-step{
  -webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%)}
body.night .kn-tab{background:var(--tile)}
body.night .kn-tab.on{background:rgba(208,88,122,.16);box-shadow:inset 0 0 0 1.5px var(--velvet-hi),var(--lift-1)}
body.night .spot{background-image:radial-gradient(300px circle at var(--mx,-999px) var(--my,-999px),rgba(208,88,122,.20),transparent 65%)}
/* text boxes and number boxes: dark wells */
body.night input:not([type=checkbox]):not([type=radio]):not([type=file]),body.night textarea,body.night select{background:rgba(255,255,255,.08);color:var(--ink);border-color:rgba(255,255,255,.16)}
body.night ::placeholder{color:rgba(255,255,255,.45)}
body.night .kn-num,body.night .kn-sel,body.night .kn-res,body.night .bz-in,body.night .bz-opt,body.night .bz-extra > input,body.night .bz-total .bz-in{background:rgba(255,255,255,.08)}
body.night :is(.bz-in,.kn-num) input:not([type=checkbox]):not([type=radio]):not([type=file]){background:transparent;border:0}
/* buttons that used the dark ink colour */
body.night .btn{background:var(--graphite);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
body.night .btn:hover{background:rgba(255,255,255,.14)}
body.night .btn.go{background:var(--velvet);box-shadow:none}
body.night .btn.ghost,body.night .btn.muted{background:rgba(255,255,255,.08)} body.night .btn.ghost:hover,body.night .btn.muted:hover{background:rgba(255,255,255,.14)}
body.night .shiny::after{background:var(--graphite)}
body.night .seg .d{background:rgba(255,255,255,.18)}
body.night .bz-ico{background:rgba(255,255,255,.08);color:var(--biz);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
body.night .lgn > a.on{color:var(--graphite)}   /* the drop is light glass, so its words stay dark */
body.night :focus-visible{outline-color:#fff}
/* page title and subtitle stay readable on the bright parts of the Silk */
body.night .bz-head h1,body.night .bz-head p,body.night .back{text-shadow:0 1px 14px rgba(2,1,10,.55),0 0 2px rgba(2,1,10,.35)}
/* second pass after the built screenshots */
body.night{--bg:rgba(2,1,10,.42)}   /* inner boxes, chips and hover rows: a darker layer, not solid black (the page itself stays #02010a) */
body.night .mk-ico{background:rgba(255,255,255,.08);color:var(--velvet-hi);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
body.night .bz-head .bz-ico:not(.mk-ico){color:var(--biz)}
body.night .mk-stat.lead{background:rgba(208,88,122,.20);-webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%)}
body.night .mk-stat.lead .big{color:#fff}
body.night .mk-stat{-webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%)}
body.night label.bz-attach{color:#fff;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.45)}
body.night .nav{background:linear-gradient(rgba(2,1,10,.94) 50%,rgba(2,1,10,0))}   /* cards scrolling under the menu stay out of the way */

/* ---------- Matrix rain on Knowledge, folders and Calendar (capture file Q62, option B) ---------- */
/* matrix.js draws the rain; it sits behind the page at about half brightness so dates and lists stay readable.
   The pages use the same dark glass as Business and Marketing (body.night, Q61). */
.rain-bg{position:fixed;inset:0;width:100%;height:100%;z-index:-1;display:block;pointer-events:none;opacity:.45}
body.night .cal,body.night .dayp,body.night .panel{-webkit-backdrop-filter:blur(10px) saturate(140%);backdrop-filter:blur(10px) saturate(140%)}
body.night .cal-grid{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.10)}
body.night .day{background:rgba(2,1,10,.55)}
body.night .day.out{background:rgba(2,1,10,.75)}
body.night .day:hover{background:rgba(255,255,255,.08)}
body.night .day.sel{box-shadow:inset 0 0 0 2px var(--velvet-hi)}
body.night .dayp{top:88px}   /* clear of the taller glass menu */
/* pop-up boxes (add event, add supplier, add a talk…) stay solid, so they never show the page through them */
body.night dialog{background:var(--graphite);color:var(--ink);box-shadow:inset 0 1px 1px rgba(255,255,255,.14),inset 0 0 0 1px rgba(255,255,255,.08),0 40px 80px -20px rgba(0,0,0,.8)}
body.night dialog::backdrop{background:rgba(2,1,10,.6)}

/* Spotlight on the glass parts and the menu bar (Q62): the same velvet light along the edge as the cards.
   app.js (SPOT_ALL) tells each one where the mouse is. The Calendar day box is sticky, which already holds it. */
:is(.lgn,.who-glass,.hero,.mk-strip,.pd-hero,.bz-tile,.bz-step,.mk-stat,.cal,.dayp,.kn-tab,.kn-pill,body.night .panel)::after{
  content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;padding:1.5px;pointer-events:none;
  background:radial-gradient(180px circle at var(--mx,-999px) var(--my,-999px),#fff,var(--velvet-hi) 30%,transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
:is(.who-glass,.hero,.mk-strip,.pd-hero,.bz-tile,.bz-step,.mk-stat,.cal,.kn-tab,.kn-pill,body.night .panel){position:relative}

/* ---------- Product page: compact top section (capture file Q63, option A) ---------- */
/* Same layout, one size smaller, so the menu + heading + car banner take under half the screen and
   2–3 Active cars rows show without scrolling (44% and 3 rows at 1440×900). Desktop and tablet only;
   phones keep their own layout from the rules above. */
@media (min-width:861px){
  .pd-page{padding-top:var(--s2)}
  .pd-head{margin:var(--s2) 0 var(--s4)}
  .pd-head h1{font-size:28px}
  .pd-head p{font-size:14px;margin-top:2px}
  .pd-hero{padding:var(--s4) 68px var(--s3)}
  .pd-sh{grid-template-columns:160px minmax(0,1fr) auto;gap:22px}
  .pd-pic{height:88px} .pd-img{max-width:160px;max-height:88px} .pd-pic::after{bottom:8px;width:128px}
  .pd-t h2{font-size:28px} .pd-t p{font-size:14px;margin-top:4px} .pd-count{margin-bottom:2px}
  .pd-track{margin-top:10px} .pd-track::before,.pd-track::after{top:12px}
  .pd-dot{width:26px;height:26px} .pd-st{gap:4px}
  .pd-st b{font-size:12.5px}
  .pd-next{margin-top:10px;padding-top:10px;font-size:13.5px}
  .pd-lh{margin:var(--s5) 0 var(--s2)}
  .pd-list{gap:var(--s2)}
  .pd-row{padding:12px 24px} .pd-thumb{width:96px;max-height:56px}
  .pd-ndg{margin-top:4px}
}

/* ---------- Glass folders (capture file Q65, option A: 5 per row) ---------- */
/* The owner's 21st.dev "Glass Folder Cards", built by hq/glass-folder.js. First the original's own styles, copied
   unchanged (classes gf-*), then HQ's adjustments below them. The folder is drawn at 340px wide and scaled to fit
   5 in a row (about 60%), which is why the words are set larger here than they appear. */
.gfd-h{display:flex;align-items:baseline;gap:var(--s2);margin:var(--s5) 0 0}
.gfd-h h2{font-size:20px;letter-spacing:-.02em;margin:0;font-weight:600} .gfd-h span{font-size:13px;color:var(--ink-2)}

.gf-root {
  --gf-px: 0;
  --gf-py: 0;
  --gf-ease: cubic-bezier(.2, .8, .2, 1);
  --gf-spring: cubic-bezier(.34, 1.36, .5, 1);
  --gf-hinge: 0deg;
  --gf-lift: 42px;
  --gf-spread: 0px;
  --gf-fan: 0deg;
  --gf-stack: 15px;
  --gf-ink: #141416;
  --gf-ink-soft: rgba(20, 20, 22, .55);
  position: relative;
  display: inline-block;
  flex: none;
  vertical-align: top;
  font-family: ui-sans-serif, system-ui, -apple-system, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  isolation: isolate;
}
.gf-root[data-tone="dark"] { --gf-ink: #f5f5f7; --gf-ink-soft: rgba(245, 245, 247, .58); }
.gf-root:hover, .gf-root:focus-within { --gf-hinge: -11deg; --gf-lift: -34px; --gf-spread: 8px; --gf-fan: 1.4deg; --gf-stack: 10px; }
.gf-root[data-open] { --gf-hinge: -24deg; --gf-lift: -96px; --gf-spread: 40px; --gf-fan: 5deg; --gf-stack: 30px; }

.gf-stage {
  position: absolute;
  left: 0;
  top: 0;
  width: 340px;
  height: 272px;
  transform-origin: 0 0;
}
.gf-tilt {
  position: absolute;
  inset: 0;
  transform: perspective(1400px) rotateX(calc(var(--gf-py) * -3deg)) rotateY(calc(var(--gf-px) * 4deg));
  transition: transform .9s var(--gf-ease);
}

.gf-shadow {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: -6px;
  height: 60px;
  border-radius: 40px;
  background: rgba(16, 18, 24, .34);
  filter: blur(22px);
  transform: translateX(calc(var(--gf-px) * -8px));
  transition: transform .9s var(--gf-ease), opacity .9s var(--gf-ease);
}
.gf-root[data-tone="dark"] .gf-shadow { background: rgba(0, 0, 0, .62); }

.gf-back {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: linear-gradient(180deg, #f3f3f4 0%, #e3e3e6 100%);
}
.gf-root[data-tone="dark"] .gf-back { background: linear-gradient(180deg, #2a2a2e 0%, #121214 100%); }
.gf-art {
  position: absolute;
  left: -12px;
  top: -12px;
  max-width: none;
  object-fit: cover;
  transform: translate(calc(var(--gf-px) * -7px), calc(var(--gf-py) * -6px)) scale(1.02);
  transition: transform 1.1s var(--gf-ease), opacity 1.2s var(--gf-ease), filter 1.2s var(--gf-ease);
}
canvas.gf-art { opacity: 0; filter: blur(14px) saturate(.6); }
canvas.gf-art[data-ready] { opacity: 1; filter: none; }
.gf-back-sheen {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, 0) 22%),
    radial-gradient(120% 80% at 80% 0%, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 60%);
  pointer-events: none;
}

.gf-rim {
  position: absolute;
  left: 0;
  top: 0;
  max-width: none;
  overflow: visible;
  pointer-events: none;
  fill: none;
}
.gf-back-rim { width: 340px; height: 272px; }
.gf-back-rim path { stroke: rgba(255, 255, 255, .45); stroke-width: 1; }
.gf-root[data-tone="dark"] .gf-back-rim path { stroke: rgba(255, 255, 255, .16); }

/* ---- files ---------------------------------------------------------------- */
.gf-files {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  /* nothing hangs out of the bottom of the pocket, however tall the stack */
  clip-path: inset(-400px -400px 10px -400px);
}
.gf-sheet-slot { display: contents; }
.gf-sheet {
  all: unset;
  box-sizing: border-box;
  position: absolute;
  left: 34px;
  top: 96px;
  width: 272px;
  height: 184px;
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  pointer-events: auto;
  background: linear-gradient(180deg, #ffffff 0%, #f2f2f0 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 0 0 .5px rgba(0, 0, 0, .1),
    0 10px 26px -8px rgba(10, 12, 20, .28);
  transform-origin: 50% 100%;
  transform:
    translate(calc(var(--gf-jx) + var(--gf-slot) * var(--gf-spread)), calc(var(--gf-lift) + var(--gf-depth) * var(--gf-stack) * -1))
    rotate(calc(var(--gf-jr) + var(--gf-slot) * var(--gf-fan)));
  transition:
    transform .75s var(--gf-spring) calc(var(--gf-depth) * 40ms),
    box-shadow .4s var(--gf-ease),
    translate .9s var(--gf-ease),
    opacity .9s var(--gf-ease);
}
.gf-root[data-tone="dark"] .gf-sheet { background: linear-gradient(180deg, #2c2c30 0%, #1c1c1f 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 0 0 .5px rgba(255, 255, 255, .08), 0 12px 28px -8px rgba(0, 0, 0, .7); }
.gf-sheet--art { background: #1a1a1d; }
.gf-root[data-open] .gf-sheet:hover,
.gf-root[data-open] .gf-sheet:focus-visible {
  transform:
    translate(calc(var(--gf-jx) + var(--gf-slot) * var(--gf-spread)), calc(var(--gf-lift) + var(--gf-depth) * var(--gf-stack) * -1 - 18px))
    rotate(calc(var(--gf-slot) * var(--gf-fan) * .6));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 0 0 .5px rgba(0, 0, 0, .1), 0 22px 40px -12px rgba(10, 12, 20, .42);
  transition-delay: 0s;
}
.gf-sheet:focus-visible { outline: 2px solid #4c8dff; outline-offset: 2px; }
.gf-sheet-art {
  position: absolute;
  left: 0;
  top: 0;
  width: 272px;
  height: 184px;
  max-width: none;
  object-fit: cover;
  transition: opacity .9s var(--gf-ease), filter .9s var(--gf-ease);
}
canvas.gf-sheet-art { opacity: 0; filter: blur(10px); }
canvas.gf-sheet-art[data-ready] { opacity: 1; filter: none; }
.gf-sheet--art::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(0, 0, 0, .42) 0%, rgba(0, 0, 0, 0) 34%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2);
  pointer-events: none;
}
.gf-sheet-head {
  position: absolute;
  left: 14px;
  right: 14px;
  top: 11px;
  z-index: 1;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  white-space: nowrap;
}
.gf-sheet-name {
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12.5px;
  font-weight: 560;
  letter-spacing: -.005em;
  color: #18181b;
}
.gf-sheet-meta {
  flex: none;
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px;
  letter-spacing: .02em;
  color: rgba(24, 24, 27, .5);
}
.gf-root[data-tone="dark"] .gf-sheet-name, .gf-sheet--art .gf-sheet-name { color: #fafafa; }
.gf-root[data-tone="dark"] .gf-sheet-meta, .gf-sheet--art .gf-sheet-meta { color: rgba(250, 250, 250, .66); }
.gf-lines {
  position: absolute;
  left: 14px;
  right: 14px;
  top: 40px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.gf-lines i {
  display: block;
  height: 5px;
  border-radius: 3px;
  background: rgba(24, 24, 27, .08);
}
.gf-lines i:first-child { height: 9px; margin-bottom: 4px; background: rgba(24, 24, 27, .14); }
.gf-root[data-tone="dark"] .gf-lines i { background: rgba(255, 255, 255, .08); }
.gf-root[data-tone="dark"] .gf-lines i:first-child { background: rgba(255, 255, 255, .16); }

.gf-sheet--drop { animation: gf-drop .85s var(--gf-ease) both; }
@keyframes gf-drop {
  0% { translate: 0 -190px; rotate: -9deg; opacity: 0; }
  35% { opacity: 1; }
  72% { translate: 0 10px; rotate: 1deg; }
  100% { translate: 0 0; rotate: 0deg; opacity: 1; }
}

/* ---- front glass ----------------------------------------------------------- */
.gf-front {
  position: absolute;
  left: 0;
  top: 74px;
  width: 340px;
  height: 198px;
  z-index: 10;
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  backdrop-filter: blur(22px) saturate(1.5);
  transform-origin: 50% 100%;
  transform: perspective(760px) rotateX(var(--gf-hinge));
  transition: transform .8s var(--gf-spring), translate 1s var(--gf-ease), opacity 1s var(--gf-ease);
}
.gf-front--bump { animation: gf-bump .7s var(--gf-ease) .38s both; }
@keyframes gf-bump {
  0% { scale: 1; }
  35% { scale: 1.018 .975; }
  70% { scale: .996 1.006; }
  100% { scale: 1; }
}
.gf-tint {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, .5) 42%, rgba(252, 252, 252, .93) 100%);
}
.gf-root[data-tone="dark"] .gf-tint {
  background: linear-gradient(180deg, rgba(18, 18, 20, .18) 0%, rgba(14, 14, 16, .62) 46%, rgba(8, 8, 10, .94) 100%);
}
.gf-spec {
  position: absolute;
  inset: 0;
  background: radial-gradient(260px 200px at calc(50% + var(--gf-px) * 46%) calc(30% + var(--gf-py) * 40%), rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 70%);
  mix-blend-mode: soft-light;
  opacity: .9;
  transition: background-position .6s var(--gf-ease);
  pointer-events: none;
}
.gf-root[data-tone="dark"] .gf-spec { mix-blend-mode: screen; opacity: .16; }
.gf-front-rim { width: 340px; height: 198px; }
.gf-front-rim path { stroke-width: 2.4; transition: stroke-width .3s var(--gf-ease); }
.gf-root[data-tone="dark"] .gf-front-rim { opacity: .55; }

.gf-hit {
  all: unset;
  position: absolute;
  inset: 0;
  z-index: 1;
  cursor: pointer;
}
.gf-hit:focus-visible ~ .gf-label .gf-title { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.gf-front:has(.gf-hit:focus-visible) .gf-front-rim path { stroke-width: 5; }

.gf-label {
  position: absolute;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 200px;
  pointer-events: none;
  color: var(--gf-ink);
}
.gf-root[data-place="bottom-left"] .gf-label { left: 28px; bottom: 32px; }
.gf-root[data-place="top-left"] .gf-label { left: 28px; top: 34px; }
.gf-root[data-place="top-right"] .gf-label { right: 32px; top: 52px; align-items: flex-start; }
.gf-title {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -.012em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gf-meta {
  font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  letter-spacing: .03em;
  color: var(--gf-ink-soft);
  white-space: nowrap;
  animation: gf-roll .5s var(--gf-ease) both;
}
@keyframes gf-roll {
  from { opacity: 0; translate: 0 7px; filter: blur(3px); }
  to { opacity: 1; translate: 0 0; filter: blur(0); }
}

/* ---- the key: + or ··· ------------------------------------------------------ */
.gf-key {
  all: unset;
  box-sizing: border-box;
  position: absolute;
  right: 22px;
  bottom: 22px;
  z-index: 12;
  width: 58px;
  height: 58px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform .35s var(--gf-spring), box-shadow .35s var(--gf-ease), background .35s var(--gf-ease);
}
.gf-key:hover { transform: translateY(-2px); }
.gf-key:active { transform: translateY(0) scale(.93); transition-duration: .12s; }
.gf-key:focus-visible { outline: 2px solid #4c8dff; outline-offset: 3px; }
.gf-key--add {
  color: #fff;
  background: radial-gradient(120% 90% at 50% 0%, #3a3a3f 0%, #121214 55%, #050506 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .22),
    inset 0 -3px 8px rgba(0, 0, 0, .7),
    0 0 0 1px rgba(0, 0, 0, .75),
    0 14px 22px -8px rgba(0, 0, 0, .55),
    0 3px 6px -2px rgba(0, 0, 0, .35);
}
.gf-root[data-tone="dark"] .gf-key--add {
  color: #111113;
  background: radial-gradient(120% 90% at 50% 0%, #ffffff 0%, #ececee 55%, #d2d2d6 100%);
  box-shadow: inset 0 1px 0 #fff, inset 0 -3px 8px rgba(0, 0, 0, .14), 0 0 0 1px rgba(0, 0, 0, .4), 0 14px 22px -8px rgba(0, 0, 0, .7);
}
.gf-key--more {
  color: #111113;
  background: linear-gradient(180deg, rgba(255, 255, 255, .92) 0%, rgba(226, 226, 230, .82) 100%);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow:
    inset 0 1px 0 #fff,
    inset 0 -2px 4px rgba(0, 0, 0, .06),
    0 0 0 1px rgba(0, 0, 0, .16),
    0 10px 18px -8px rgba(0, 0, 0, .3);
}
.gf-root[data-tone="dark"] .gf-key--more {
  color: #f5f5f7;
  background: linear-gradient(180deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, .06) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 0 0 1px rgba(255, 255, 255, .1), 0 10px 18px -8px rgba(0, 0, 0, .6);
}
.gf-key--more[aria-expanded="true"] { transform: scale(.96); }
.gf-glyph { display: block; max-width: none; fill: none; stroke: currentColor; stroke-linecap: round; }
.gf-glyph--plus { width: 26px; height: 26px; stroke-width: 1.6; animation: gf-turn .6s var(--gf-spring); }
.gf-glyph--more { width: 30px; height: 12px; stroke-width: 1.7; }
@keyframes gf-turn { from { rotate: -90deg; } to { rotate: 0deg; } }

/* ---- menu ------------------------------------------------------------------- */
.gf-menu {
  position: absolute;
  right: 22px;
  bottom: 90px;
  z-index: 20;
  min-width: 176px;
  padding: 6px;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  background: rgba(252, 252, 253, .72);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  backdrop-filter: blur(24px) saturate(1.6);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 0 0 .5px rgba(0, 0, 0, .14), 0 24px 48px -16px rgba(10, 12, 20, .4);
  transform-origin: 100% 100%;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px) scale(.94);
  transition: opacity .2s var(--gf-ease), transform .32s var(--gf-spring), visibility 0s .32s;
}
.gf-menu[data-open] { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.gf-root[data-tone="dark"] .gf-menu { background: rgba(30, 30, 34, .72); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 0 0 .5px rgba(255, 255, 255, .1), 0 24px 48px -16px rgba(0, 0, 0, .8); }
.gf-menu-item {
  all: unset;
  box-sizing: border-box;
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 450;
  color: #18181b;
  cursor: pointer;
}
.gf-root[data-tone="dark"] .gf-menu-item { color: #f4f4f5; }
.gf-menu-item:hover, .gf-menu-item:focus-visible { background: rgba(24, 24, 27, .07); }
.gf-root[data-tone="dark"] .gf-menu-item:hover, .gf-root[data-tone="dark"] .gf-menu-item:focus-visible { background: rgba(255, 255, 255, .09); }
.gf-menu-item--danger { color: #d92d20; }
.gf-root[data-tone="dark"] .gf-menu-item--danger { color: #ff6b5e; }

/* ---- entrance: the folder assembles itself ---------------------------------- */
.gf-root:not([data-entered]) .gf-back,
.gf-root:not([data-entered]) .gf-back-rim { translate: 0 22px; opacity: 0; }
.gf-root:not([data-entered]) .gf-sheet { translate: 0 -120px; opacity: 0; }
.gf-root:not([data-entered]) .gf-front { translate: 0 46px; opacity: 0; }
.gf-root:not([data-entered]) .gf-key { opacity: 0; scale: .6; }
.gf-root:not([data-entered]) .gf-shadow { opacity: 0; }
.gf-back, .gf-back-rim { transition: translate 1s var(--gf-ease), opacity .9s var(--gf-ease); }
.gf-root[data-entered] .gf-sheet { transition-delay: calc(var(--gf-depth) * 40ms), 0s, calc(.18s + var(--gf-depth) * 90ms), calc(.18s + var(--gf-depth) * 90ms); }
.gf-root[data-entered] .gf-front { transition-delay: 0s, .42s, .42s; }
.gf-key { transition: transform .35s var(--gf-spring), box-shadow .35s var(--gf-ease), opacity .6s var(--gf-ease) .7s, scale .7s var(--gf-spring) .7s; }

@media (prefers-reduced-motion: reduce) {
  .gf-root *, .gf-root *::before, .gf-root *::after {
    transition-duration: 0s !important;
    transition-delay: 0s !important;
    animation: none !important;
  }
  .gf-tilt { transform: none; }
}

/* HQ adjustments */
.gfr-row{display:flex;flex-wrap:wrap;gap:16px;margin:36px 0 var(--s2)}
.gfr-msg{min-height:20px;margin:0 0 var(--s5);font-size:13px}
.gf-root{font-family:var(--body)}
.gf-title{font-family:var(--display);font-variation-settings:"wdth" 112;font-weight:600;letter-spacing:-.02em;font-size:28px;white-space:normal;line-height:1.1}
.gf-meta,.gf-sheet-meta{font-family:var(--body);font-variant-numeric:tabular-nums;letter-spacing:0}
.gf-meta{font-size:20px;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gf-label{max-width:230px;gap:6px}
.gf-sheet-name{font-size:19px}
.gf-sheet-meta{font-size:15px}
.gf-sheet:focus-visible,.gf-key:focus-visible{outline-color:#fff}
.gf-hit:focus-visible ~ .gf-label .gf-title{text-decoration-color:#fff}
a.gf-key{text-decoration:none}
/* the "Open folder" card: velvet-edged, so it reads as the way in, not as a file */
.gf-root[data-tone="dark"] .gf-sheet--go{background:linear-gradient(180deg,#3a1522 0%,#1c0c12 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 0 0 1px rgba(208,88,122,.55),0 12px 28px -8px rgba(0,0,0,.7)}
.gf-sheet--go .gf-sheet-meta{color:#f0a3b8!important;font-size:20px}
.gf-go-sub{position:absolute;left:14px;right:14px;top:46px;font-size:16px;line-height:1.4;color:rgba(255,255,255,.62)}
/* browsers that can't cut the folder shape: same layers with rounded corners */
.gf-nocut .gf-back{border-radius:22px;top:34px} .gf-nocut .gf-front{border-radius:22px} .gf-nocut .gf-rim{display:none}
/* phones: the + stays 44px on screen however small the folder is drawn */
@media (max-width:560px){ .gf-key{width:88px;height:88px;border-radius:26px} .gf-glyph--plus{width:36px;height:36px} }
label[for="file-in"]:has(+ #file-in:focus-visible){outline:2px solid #fff;outline-offset:3px}
.kn-tabs.two{grid-template-columns:repeat(2,minmax(0,1fr))}

/* Production pack list (Spec S-7 §7): each approved file with Download, plus Download all */
.sp-pack-files{list-style:none;margin:0 0 var(--s2);padding:0;font-size:12px;line-height:1.45}
.sp-pack-files li{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s2);padding:var(--s1) 0;border-top:1px solid var(--line)}
.sp-pack-files span{overflow-wrap:anywhere;color:var(--ink-2)}

/* ---------- Signed in (Spec S-7 §4, owner picked A and A) ---------- */
/* Top right: the signed-in name and Log out in one glass pill (replaces "You are" + the name picker). */
.who-pill{align-items:center;gap:var(--s2);padding:5px 6px 5px 14px;min-height:34px}
.who-name{font-weight:500;color:var(--ink)}
.who-sep{width:1px;height:16px;background:var(--line)}
.who-f{margin:0;display:inline-flex}
.who-out{border:0;background:transparent;color:var(--ink-2);font-size:13px;min-height:28px;padding:2px 10px 2px 2px;cursor:pointer;border-radius:999px;transition:transform .25s var(--spring)}
.who-out:hover{color:var(--velvet)} .who-out:active{transform:scale(.96)}
.who-out:focus-visible{outline:2px solid var(--velvet);outline-offset:2px}
body.silk .who-name{color:#fff} body.silk .who-out{color:rgba(255,255,255,.85)} body.silk .who-out:hover{color:#fff}
body.silk .who-out:focus-visible{outline-color:#fff}   /* velvet is under 3:1 on the dark pages */
body.silk .who-sep{background:rgba(255,255,255,.24)}
@media (max-width:760px){ .who-pill{min-height:44px;padding-block:0} .who-out{min-height:44px} }

/* The sign-in page (look A): Home's Wave Mesh behind a smoked-glass card. */
body.signin{min-height:100vh} body.signin:not(.mesh){background:var(--graphite)}   /* Home's near-black comes with the Wave Mesh (body.mesh) */
.si-wrap{position:relative;z-index:3;min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:var(--s5) var(--s4)}
.si-card{width:min(380px,100%);border-radius:var(--r);padding:var(--s7) var(--s6) var(--s6);text-align:center;color:#fff;
  background:rgba(20,20,22,.42);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 0 0 1px rgba(255,255,255,.10),var(--lift-hero)}
.si-brand{display:inline-flex;align-items:center;gap:var(--s3);font-family:var(--display);font-variation-settings:"wdth" 112;font-weight:600;font-size:28px;line-height:1.15;letter-spacing:-.03em;margin:0}
.si-brand i{width:16px;height:16px;border-radius:50%;background:var(--velvet);display:inline-block;box-shadow:0 0 0 6px rgba(140,47,71,.18)}
.si-line{font-size:14px;line-height:1.6;margin:var(--s3) 0 var(--s6);color:rgba(255,255,255,.72)}
.si-google{display:flex;align-items:center;justify-content:center;gap:var(--s3);width:100%;min-height:48px;border-radius:999px;background:#fff;color:var(--graphite);
  font-size:15px;font-weight:500;text-decoration:none;transition:transform .25s var(--spring)}
.si-google i{font-size:20px}
.si-google:hover{transform:translateY(-1px)} .si-google:active{transform:scale(.98)}
.si-google:focus-visible,.si-test button:focus-visible{outline:2px solid #fff;outline-offset:3px}
.si-err{font-size:13px;line-height:1.5;margin:var(--s4) 0 0;color:var(--velvet-hi)}
.si-err:empty{display:none}
.si-test{margin:var(--s6) 0 0;padding-top:var(--s4);border-top:1px solid rgba(255,255,255,.14)}
.si-test p{font-size:12px;line-height:1.5;margin:0 0 var(--s3);color:rgba(255,255,255,.72)}
.si-test div{display:flex;gap:var(--s2);justify-content:center;flex-wrap:wrap}
.si-test button{border-radius:999px;padding:6px 14px;min-height:36px;font-size:13px;cursor:pointer;background:transparent;color:#fff;border:1px solid rgba(255,255,255,.28);transition:transform .25s var(--spring)}
.si-test button:hover{border-color:rgba(255,255,255,.6)} .si-test button:active{transform:scale(.96)}
@media (max-width:760px){ .si-test button{min-height:44px} }