/* Brandstoryy — layout concept: a fixed studio rail (logo + index) beside soft, rounded bento slabs.
   Palette is taken only from the logo: ink, logo red and white, plus tints and shades of those. */
:root{
  --paper:#FFFFFF; --paper-2:#F5F2F1; --ink:#181616; --muted:#6A6362; --line:#E7E1E0;
  --red:#BE2721; --red-deep:#8F1B17; --red-soft:#FBEAE8; --red-text:#B3231D; --on-red:#FFFFFF;
  --slab:#181616; --slab-2:#262121; --on-slab:#FFFFFF; --on-slab-muted:#B9B0AE;
  --logo-ink:#181616; --logo-red:#BE2721;
  --f-display:"Fraunces", "Cooper Black", Georgia, serif;
  --f-body:"Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono:"JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --t-xs:.78rem; --t-sm:.9rem; --t-md:1.0625rem; --t-lg:1.3rem; --t-xl:clamp(1.6rem,2.6vw,2.2rem);
  --t-2xl:clamp(2.3rem,4.6vw,3.9rem); --t-hero:clamp(2.8rem,7.4vw,6.8rem);
  --r-lg:26px; --r-md:18px; --r-sm:12px; --rail:252px;
  --ease:cubic-bezier(.2,.8,.2,1); --spring:cubic-bezier(.3,1.55,.5,1);
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --paper:#161616; --paper-2:#1F1C1C; --ink:#F7F3F2; --muted:#A79E9C; --line:#302B2A;
  --red:#C9302A; --red-deep:#7E1814; --red-soft:#2B1817; --red-text:#F0665E; --on-red:#FFFFFF;
  --slab:#0E0D0D; --slab-2:#252020; --on-slab:#FFFFFF; --on-slab-muted:#ADA4A2;
  --logo-ink:#FFFFFF; --logo-red:#C9302A; color-scheme:dark }}
:root[data-theme="dark"]{
  --paper:#161616; --paper-2:#1F1C1C; --ink:#F7F3F2; --muted:#A79E9C; --line:#302B2A;
  --red:#C9302A; --red-deep:#7E1814; --red-soft:#2B1817; --red-text:#F0665E; --on-red:#FFFFFF;
  --slab:#0E0D0D; --slab-2:#252020; --on-slab:#FFFFFF; --on-slab-muted:#ADA4A2;
  --logo-ink:#FFFFFF; --logo-red:#C9302A; color-scheme:dark }

@view-transition{navigation:auto}
/* page swap: old content lifts away, new content glides up into place */
::view-transition-group(main){animation-duration:0s}
::view-transition-old(main),::view-transition-new(main){height:100%;object-fit:none;object-position:50% 0;mix-blend-mode:normal}
::view-transition-old(main){animation:vt-out .22s cubic-bezier(.4,0,1,1) both}
::view-transition-new(main){animation:vt-in .55s cubic-bezier(.2,.8,.2,1) .06s both}
::view-transition-group(rail),::view-transition-group(topbar){animation:none}
::view-transition-old(rail),::view-transition-old(topbar){display:none}
::view-transition-new(rail),::view-transition-new(topbar){animation:none}
@keyframes vt-out{to{opacity:0;transform:translateY(-14px) scale(.99)}}
@keyframes vt-in{from{opacity:0;transform:translateY(28px)}}

*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-body);font-size:var(--t-md);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:90;background:var(--paper)}
a{color:inherit}
img,svg{max-width:100%}
:focus-visible{outline:2.5px solid var(--red);outline-offset:3px;border-radius:8px}
::selection{background:var(--red);color:var(--on-red)}
h1,h2,h3,h4{font-family:var(--f-display);font-variation-settings:"SOFT" 100,"WONK" 0;font-weight:800;letter-spacing:-.02em;line-height:.98;text-wrap:balance;margin:0}
p{margin:0}
.red{color:var(--red-text)}
.it{font-style:italic;font-variation-settings:"SOFT" 100,"WONK" 1;font-weight:600}
.eyebrow{font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);display:inline-flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--red)}
.lede{font-size:var(--t-lg);line-height:1.5;color:var(--muted);max-width:52ch}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- shell: rail + main ---------- */
.shell{display:grid;grid-template-columns:1fr;min-height:100vh}
@media (min-width:1024px){.shell{grid-template-columns:var(--rail) minmax(0,1fr)}}
.rail{display:none}
@media (min-width:1024px){
  .rail{display:flex;flex-direction:column;gap:28px;position:sticky;top:0;height:100vh;height:100dvh;padding:28px 22px 22px max(22px,env(safe-area-inset-left,0px));border-right:1px solid var(--line);background:var(--paper);view-transition-name:rail;z-index:20}
}
.rail .logo{display:block;width:150px}
.rail nav{display:grid;gap:2px}
.rail nav a{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:12px;text-decoration:none;padding:10px 12px;border-radius:var(--r-sm);font-weight:600;font-size:var(--t-md);position:relative;}
.rail nav a small{grid-column:2;font-family:var(--f-mono);font-weight:400;font-size:11px;letter-spacing:.04em;color:var(--muted);margin-top:-4px}
.rail nav a .pip{grid-row:span 2;width:9px;height:9px;border-radius:50%;border:1.5px solid var(--line);transition:transform .18s var(--spring),border-color .12s,background .12s}
.rail nav:not(.pill-ready) a:hover{background:var(--paper-2)}
.rail nav a:hover .pip{border-color:var(--red);transform:scale(1.3)}
.rail nav a[aria-current="page"]{background:var(--red-soft)}
.rail nav a[aria-current="page"] .pip{background:var(--red);border-color:var(--red)}
.rail nav a.ai span{display:inline-flex;align-items:center;gap:8px}
.badge{font-family:var(--f-mono);font-size:10px;letter-spacing:.06em;padding:3px 7px;border-radius:999px;background:var(--red);color:var(--on-red);font-weight:500}
.rail-foot{margin-top:auto;display:grid;gap:14px}
.avail{display:flex;gap:10px;align-items:center;font-size:var(--t-xs);color:var(--muted);font-family:var(--f-mono)}
.live{width:8px;height:8px;border-radius:50%;background:var(--red);animation:live 1.8s infinite;flex:none}
@keyframes live{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--red) 55%,transparent)}100%{box-shadow:0 0 0 9px transparent}}

/* mobile top bar */
.topbar{view-transition-name:topbar;position:sticky;top:env(safe-area-inset-top,0px);z-index:40;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px max(16px,env(safe-area-inset-right,0px)) 12px max(16px,env(safe-area-inset-left,0px));background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.topbar .logo{width:96px;display:block}
@media (min-width:1024px){.topbar{display:none}}
.menu-btn{width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:var(--paper);display:grid;place-items:center;cursor:pointer;color:var(--ink)}
.menu-btn i{display:block;width:18px;height:2px;background:currentColor;position:relative;transition:transform .3s}
.menu-btn i::before,.menu-btn i::after{content:"";position:absolute;left:0;width:18px;height:2px;background:currentColor;transition:transform .3s}
.menu-btn i::before{top:-6px}.menu-btn i::after{top:6px}
.menu-open .menu-btn i{background:transparent}
.menu-open .menu-btn i::before{transform:translateY(6px) rotate(45deg)}
.menu-open .menu-btn i::after{transform:translateY(-6px) rotate(-45deg)}
.sheet{position:fixed;inset:0;z-index:35;background:var(--red);color:var(--on-red);padding:calc(96px + env(safe-area-inset-top,0px)) max(20px,env(safe-area-inset-right,0px)) calc(28px + env(safe-area-inset-bottom,0px)) max(20px,env(safe-area-inset-left,0px));display:flex;flex-direction:column;gap:6px;clip-path:circle(0% at calc(100% - 40px) 40px);transition:clip-path .6s var(--ease);visibility:hidden}
.menu-open .sheet{clip-path:circle(150% at calc(100% - 40px) 40px);visibility:visible}
.sheet a{font-family:var(--f-display);font-variation-settings:"SOFT" 100;font-weight:800;font-size:clamp(2.2rem,10vw,3.4rem);line-height:1.08;text-decoration:none;transform:translateY(20px);opacity:0;transition:transform .5s var(--ease),opacity .5s}
.menu-open .sheet a{transform:none;opacity:1}
.menu-open .sheet a:nth-child(2){transition-delay:.05s}.menu-open .sheet a:nth-child(3){transition-delay:.1s}.menu-open .sheet a:nth-child(4){transition-delay:.15s}.menu-open .sheet a:nth-child(5){transition-delay:.2s}.menu-open .sheet a:nth-child(6){transition-delay:.25s}

/* ---------- main ---------- */
main{min-width:0;overflow-x:clip;will-change:opacity,transform}
.wrap{max-width:1240px;margin-inline:auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
@media (min-width:700px){.wrap{padding-left:max(36px,env(safe-area-inset-left,0px));padding-right:max(36px,env(safe-area-inset-right,0px))}}
@media (min-width:1024px){.wrap{padding-left:48px;padding-right:max(48px,env(safe-area-inset-right,0px))}}
.sec{padding-block:clamp(64px,8vw,120px)}
.sec.tight{padding-top:0}
.head{display:flex;justify-content:space-between;align-items:end;gap:20px 40px;flex-wrap:wrap;margin-bottom:clamp(32px,4vw,52px)}
.head h2{font-size:var(--t-2xl);max-width:17ch;margin-top:16px}
.head p{color:var(--muted);max-width:44ch}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;font:600 var(--t-sm)/1 var(--f-body);padding:15px 22px;border-radius:999px;text-decoration:none;border:1.5px solid var(--ink);color:var(--ink);background:transparent;cursor:pointer;transition:background .25s,color .25s,border-color .25s,transform .3s var(--ease);will-change:transform}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn.red{background:var(--red);border-color:var(--red);color:var(--on-red)}
.btn.red:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.btn.light{border-color:var(--on-slab);color:var(--on-slab)}
.btn.light:hover{background:var(--on-slab);color:var(--slab)}
.btn .arr{display:inline-block;transition:transform .3s var(--ease)}
.btn:hover .arr{transform:translateX(4px) rotate(-8deg)}
.btns{display:flex;gap:12px;flex-wrap:wrap}

/* ---------- logo motion ---------- */
.logo svg{display:block;width:100%;height:auto;overflow:visible}
.logo .lg-brand{fill:var(--logo-ink)}
.logo .lg-story{fill:var(--logo-red)}
.on-slab .logo .lg-brand,.logo.white .lg-brand{fill:#FFFFFF}
.logo path{transform-box:fill-box;transform-origin:50% 100%}
.logo.intro .lg-brand path{animation:lg-drop .9s var(--spring) backwards}
.logo.intro .lg-story path{animation:lg-rise .9s var(--spring) backwards}
.logo.intro path:nth-child(1){animation-delay:.05s}.logo.intro path:nth-child(2){animation-delay:.14s}.logo.intro path:nth-child(3){animation-delay:.23s}
.logo.intro .lg-story path:nth-child(1){animation-delay:.38s}.logo.intro .lg-story path:nth-child(2){animation-delay:.47s}.logo.intro .lg-story path:nth-child(3){animation-delay:.56s}
@keyframes lg-drop{0%{transform:translateY(-70%) scaleY(1.15);opacity:0}60%{transform:translateY(4%) scale(1.06,.9);opacity:1}100%{transform:none}}
@keyframes lg-rise{0%{transform:translateY(80%) rotate(6deg);opacity:0}65%{transform:translateY(-6%) rotate(-2deg);opacity:1}100%{transform:none}}
.logo:hover path{animation:lg-wob .7s var(--spring)}
.logo:hover path:nth-child(2){animation-delay:.05s}.logo:hover path:nth-child(3){animation-delay:.1s}
.logo:hover .lg-story path{animation-delay:.12s}
@keyframes lg-wob{30%{transform:translateY(-6%) rotate(-3deg)}60%{transform:translateY(2%) rotate(2deg)}}
.logo.draw path{animation:lg-draw 2.4s ease-in-out both;stroke-width:3;stroke-dasharray:var(--len,3000);stroke-dashoffset:var(--len,3000)}
.logo.draw .lg-brand path{stroke:var(--logo-ink)}
.on-slab .logo.draw .lg-brand path{stroke:#FFFFFF}
.logo.draw .lg-story path{stroke:var(--logo-red);animation-delay:.4s}
@keyframes lg-draw{0%{fill-opacity:0;stroke-dashoffset:var(--len,3000)}65%{fill-opacity:0;stroke-dashoffset:0}100%{fill-opacity:1;stroke-dashoffset:0}}

/* ---------- page hero ---------- */
.phero{padding-block:clamp(48px,7vw,96px) clamp(40px,5vw,64px)}
.phero h1{font-size:var(--t-hero);margin-top:22px;max-width:15ch}
.phero .lede{margin-top:26px}
.phero .btns{margin-top:34px}
.w{display:inline-block;animation:w-in .9s var(--ease) backwards}
@keyframes w-in{from{transform:translateY(.5em) rotate(3deg);opacity:0}}

/* ---------- bento ---------- */
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px}
.tile{border-radius:var(--r-lg);padding:clamp(22px,2.6vw,34px);background:var(--paper-2);position:relative;overflow:hidden;min-width:0;display:flex;flex-direction:column;gap:14px;text-decoration:none;transition:transform .45s var(--ease)}
a.tile:hover{transform:translateY(-5px)}
.tile.red{background:var(--red);color:var(--on-red)}
.tile.slab{background:var(--slab);color:var(--on-slab)}
.tile.line{background:transparent;border:1.5px solid var(--line)}
.tile h3{font-size:var(--t-xl)}
.tile p{opacity:.85}
.tile .tag{font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;opacity:.75}
.tile .go{margin-top:auto;display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:var(--t-sm)}
.tile .go::after{content:"→";transition:transform .3s var(--ease)}
a.tile:hover .go::after{transform:translateX(5px)}
.c12{grid-column:span 12}.c8{grid-column:span 8}.c7{grid-column:span 7}.c6{grid-column:span 6}.c5{grid-column:span 5}.c4{grid-column:span 4}.c3{grid-column:span 3}
@media (max-width:1100px){.c3{grid-column:span 6}}
@media (max-width:860px){.c8,.c7,.c6,.c5,.c4{grid-column:span 12}}
@media (max-width:560px){.c3{grid-column:span 12}}

/* home hero */
.hhero{padding-block:clamp(32px,4vw,56px) 16px}
.hhero .bento{grid-auto-rows:minmax(0,auto)}
.hh-main{grid-column:span 8;grid-row:span 2;background:var(--paper-2);justify-content:space-between;min-height:520px}
.hh-main h1{font-size:clamp(2.6rem,6.6vw,6.6rem);max-width:12ch}
.hh-side{grid-column:span 4}
@media (max-width:860px){.hh-main,.hh-side{grid-column:span 12}.hh-main{min-height:0}}
.rot{display:inline-block;color:var(--red-text)}
.rot.swap{animation:rot .55s var(--spring)}
@keyframes rot{from{transform:translateY(55%) rotate(4deg);opacity:0}}
.mini-flow{height:150px;width:100%;display:block}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font-size:var(--t-xs);font-family:var(--f-mono);padding:6px 11px;border-radius:999px;border:1px solid currentColor;opacity:.8;white-space:nowrap}
.stamp{position:absolute;right:-30px;top:-30px;width:150px;height:150px;animation:spin 22s linear infinite;opacity:.95}
.stamp text{font:600 11.5px var(--f-mono);letter-spacing:3.2px;fill:currentColor}
@keyframes spin{to{transform:rotate(360deg)}}

/* marquee band */
.band{background:var(--red);color:var(--on-red);overflow:hidden;padding-block:16px;transform:rotate(-1.2deg);margin-block:28px;width:104%;margin-left:-2%}
.band .track{display:flex;width:max-content;animation:marq 40s linear infinite}
.band:hover .track{animation-play-state:paused}
.band span{font-family:var(--f-display);font-variation-settings:"SOFT" 100;font-weight:800;font-size:clamp(1.3rem,2.6vw,2.1rem);padding-inline:22px;display:flex;align-items:center;gap:44px;white-space:nowrap}
.band span::after{content:"";width:16px;height:16px;background:var(--on-red);clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%)}
@keyframes marq{to{transform:translateX(-50%)}}

/* journey */
.journey{position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;padding-top:44px}
.journey .track-line{position:absolute;left:0;right:0;top:12px;height:4px;border-radius:4px;background:linear-gradient(90deg,var(--red) 0 50%,var(--ink) 50% 100%)}
.journey .runner{position:absolute;top:2px;left:0;width:24px;height:24px;border-radius:50%;background:var(--paper);border:5px solid var(--red);animation:run 9s linear infinite;box-shadow:0 0 0 6px color-mix(in srgb,var(--red) 18%,transparent)}
@keyframes run{0%{left:0;border-color:var(--red)}49%{border-color:var(--red)}50%{border-color:var(--ink)}100%{left:calc(100% - 24px);border-color:var(--ink)}}
.stop{display:grid;gap:6px;align-content:start}
.stop b{font-family:var(--f-display);font-variation-settings:"SOFT" 100;font-size:var(--t-lg);line-height:1.1}
.stop span{font-size:var(--t-sm);color:var(--muted)}
.stop em{font-style:normal;font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--red-text)}
.stop.auto em{color:var(--ink)}
.stop b{animation:ping 9s infinite}
.stop:nth-of-type(1) b{animation-delay:0s}.stop:nth-of-type(2) b{animation-delay:1.8s}.stop:nth-of-type(3) b{animation-delay:3.6s}.stop:nth-of-type(4) b{animation-delay:5.4s}.stop:nth-of-type(5) b{animation-delay:7.2s}.stop:nth-of-type(6) b{animation-delay:8.6s}
@keyframes ping{0%,8%{color:var(--red-text);transform:translateY(-3px)}14%,100%{color:inherit;transform:none}}
.legend{display:flex;gap:20px;flex-wrap:wrap;margin-top:28px;font-size:var(--t-sm);color:var(--muted)}
.legend i{display:inline-block;width:22px;height:4px;border-radius:4px;background:var(--red);vertical-align:middle;margin-right:8px}
.legend i.k{background:var(--ink)}
@media (max-width:860px){
  .journey{grid-template-columns:1fr;padding-top:0;padding-left:44px;gap:22px}
  .journey .track-line{left:10px;right:auto;top:0;bottom:0;width:4px;height:auto;background:linear-gradient(180deg,var(--red) 0 50%,var(--ink) 50% 100%)}
  .journey .runner{left:0;animation-name:run-v}
  @keyframes run-v{0%{top:0;border-color:var(--red)}49%{border-color:var(--red)}50%{border-color:var(--ink)}100%{top:calc(100% - 24px);border-color:var(--ink)}}
}

/* list rows (services) */
.rows{border-top:1.5px solid var(--ink)}
.row{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr) minmax(0,.9fr);gap:28px;padding-block:34px;border-bottom:1px solid var(--line);align-items:start;position:relative}
.row h3{font-size:var(--t-xl)}
.row .meta{font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.06em;color:var(--muted);margin-top:10px}
.row p{color:var(--muted)}
.row ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.row li{font-size:var(--t-sm);padding:7px 12px;border-radius:999px;background:var(--paper-2);transition:background .25s,color .25s}
.row:hover li{background:var(--red-soft)}
.row.hot{background:var(--slab);color:var(--on-slab);border-radius:var(--r-lg);padding-inline:clamp(20px,3vw,36px);border:0;margin-top:16px}
.row.hot p,.row.hot .meta{color:var(--on-slab-muted)}
.row.hot li{background:var(--slab-2)}
.row.hot:hover li{background:var(--red);color:var(--on-red)}
@media (max-width:860px){.row{grid-template-columns:1fr;gap:16px}}

/* rewrite demo */
.editor{border-radius:var(--r-lg);border:1.5px solid var(--line);overflow:hidden;background:var(--paper)}
.ed-tabs{display:flex;gap:4px;padding:10px;border-bottom:1px solid var(--line);overflow-x:auto;background:var(--paper-2)}
.ed-tabs button{font:500 var(--t-xs)/1 var(--f-mono);padding:9px 12px;border-radius:999px;border:0;background:transparent;color:var(--muted);cursor:pointer;white-space:nowrap}
.ed-tabs button[aria-selected="true"]{background:var(--ink);color:var(--paper)}
.ed-body{padding:clamp(20px,3vw,34px);display:grid;gap:22px}
.ed-label{font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.before{color:var(--muted);text-decoration:line-through;text-decoration-color:var(--red);text-decoration-thickness:2px}
.after{font-family:var(--f-display);font-variation-settings:"SOFT" 100;font-weight:700;font-size:clamp(1.35rem,2.4vw,1.9rem);line-height:1.2;min-height:3.7em}
.caret{display:inline-block;width:3px;height:.95em;background:var(--red);vertical-align:-.1em;margin-left:3px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* models */
.models{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media (max-width:1100px){.models{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.models{grid-template-columns:1fr}}
.model{border-radius:var(--r-lg);border:1.5px solid var(--line);padding:28px;display:flex;flex-direction:column;gap:14px;transition:transform .4s var(--ease),border-color .3s}
.model:hover{transform:translateY(-6px);border-color:var(--red)}
.model.red{background:var(--red);border-color:var(--red);color:var(--on-red)}
.model.slab{background:var(--slab);border-color:var(--slab);color:var(--on-slab)}
.model h3{font-size:var(--t-xl)}
.model .len{font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.08em;text-transform:uppercase;opacity:.75}
.model p{font-size:var(--t-sm);opacity:.85}
.model ul{list-style:none;margin:0;padding:16px 0 0;border-top:1px solid color-mix(in srgb,currentColor 20%,transparent);display:grid;gap:9px;font-size:var(--t-sm);flex:1}
.model li{display:flex;gap:10px}
.model li::before{content:"";flex:none;width:7px;height:7px;border-radius:50%;background:var(--red);margin-top:.55em}
.model.red li::before,.model.slab li::before{background:currentColor}
.model .btn{align-self:flex-start}
.model.red .btn,.model.slab .btn{border-color:currentColor;color:inherit}
.model.red .btn:hover{background:var(--on-red);color:var(--red)}
.model.slab .btn:hover{background:var(--on-slab);color:var(--slab)}

/* ---------- workflow canvas (AI page) ---------- */
.flow-wrap{background:var(--slab);color:var(--on-slab);border-radius:var(--r-lg);padding:clamp(18px,2.6vw,30px);overflow:hidden}
.flow-top{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.flow-tabs{display:flex;gap:6px;flex-wrap:wrap}
.flow-tabs button{font:500 var(--t-xs)/1 var(--f-mono);padding:10px 13px;border-radius:999px;border:1px solid color-mix(in srgb,var(--on-slab) 25%,transparent);background:transparent;color:var(--on-slab-muted);cursor:pointer;transition:all .25s}
.flow-tabs button:hover{color:var(--on-slab);border-color:var(--on-slab)}
.flow-tabs button[aria-selected="true"]{background:var(--red);border-color:var(--red);color:var(--on-red)}
.flow-status{font-family:var(--f-mono);font-size:var(--t-xs);color:var(--on-slab-muted);display:flex;align-items:center;gap:8px}
#flow{width:100%;height:auto;display:block;margin-top:18px}
#flow .edge{fill:none;stroke:color-mix(in srgb,var(--on-slab) 22%,transparent);stroke-width:2;stroke-dasharray:6 8;animation:dash 1.2s linear infinite}
@keyframes dash{to{stroke-dashoffset:-14}}
#flow .node rect{stroke-width:2;transition:transform .3s}
#flow .node{transition:opacity .4s}
#flow .node .t{font:600 17px var(--f-body);fill:currentColor}
#flow .node .s{font:400 12.5px var(--f-mono);fill:currentColor;opacity:.7}
#flow .n-trigger rect{fill:var(--slab-2);stroke:var(--red)}
#flow .n-ai rect{fill:var(--red);stroke:var(--red)}
#flow .n-act rect{fill:var(--slab-2);stroke:color-mix(in srgb,var(--on-slab) 30%,transparent)}
#flow .n-human rect{fill:transparent;stroke:var(--on-slab);stroke-dasharray:6 6}
#flow .n-out rect{fill:var(--on-slab);stroke:var(--on-slab)}
#flow .node{color:var(--on-slab)}
#flow .node.n-out{color:var(--slab)}
#flow .node.hit rect{animation:hit .6s var(--spring)}
#flow .node g.inner{transform-box:fill-box;transform-origin:center}
#flow .node.hit g.inner{animation:hit .6s var(--spring)}
@keyframes hit{40%{transform:scale(1.07)}}
#flow .packet{fill:var(--on-slab)}
#flow .packet.r{fill:#FF8F88}
.flow-legend{display:flex;gap:18px;flex-wrap:wrap;margin-top:14px;font-size:var(--t-xs);font-family:var(--f-mono);color:var(--on-slab-muted)}
.flow-legend i{display:inline-block;width:12px;height:12px;border-radius:4px;margin-right:7px;vertical-align:-1px;border:2px solid var(--red)}
.flow-legend i.ai{background:var(--red)}
.flow-legend i.hu{border:2px dashed var(--on-slab)}
.flow-legend i.ou{background:var(--on-slab);border-color:var(--on-slab)}
.flow-note{margin-top:16px;color:var(--on-slab-muted);font-size:var(--t-sm);max-width:70ch}

/* use cases */
.uc{display:flex;flex-direction:column;gap:12px}
.uc .chain{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-family:var(--f-mono);font-size:11.5px;margin-top:auto}
.uc .chain span{padding:5px 9px;border-radius:8px;background:var(--paper);border:1px solid var(--line)}
.uc .chain span.ai{background:var(--red);border-color:var(--red);color:var(--on-red)}
.uc .chain b{color:var(--muted);font-weight:400}
.ico{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--red);color:var(--on-red)}
.ico svg{width:24px;height:24px}

/* calculator */
.calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
@media (max-width:860px){.calc{grid-template-columns:1fr}}
.field{display:grid;gap:10px}
.field label{display:flex;justify-content:space-between;gap:12px;font-weight:600}
.field output{font-family:var(--f-mono);color:var(--red-text);font-weight:500}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:6px;background:var(--line);outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:var(--red);border:4px solid var(--paper);box-shadow:0 0 0 1.5px var(--red);cursor:grab}
input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--red);border:4px solid var(--paper);box-shadow:0 0 0 1.5px var(--red);cursor:grab}
.result .big{font-family:var(--f-display);font-variation-settings:"SOFT" 100;font-weight:900;font-size:clamp(3.6rem,8vw,6.4rem);line-height:.9;font-variant-numeric:tabular-nums}
.result .unit{font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;opacity:.8}
.result .pair{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:8px;padding-top:18px;border-top:1px solid color-mix(in srgb,currentColor 25%,transparent)}
.result .pair b{display:block;font-family:var(--f-display);font-size:2rem;font-variant-numeric:tabular-nums}
.fine{font-size:var(--t-xs);opacity:.75}

/* steps */
.steps{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;counter-reset:s}
.steps.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.step{border-top:3px solid var(--line);padding-top:18px;display:grid;gap:8px;align-content:start;position:relative}
.step::before{counter-increment:s;content:counter(s,decimal-leading-zero);font-family:var(--f-mono);font-size:var(--t-xs);color:var(--red-text);letter-spacing:.08em}
.step::after{content:"";position:absolute;left:0;top:-3px;height:3px;width:0;background:var(--red);transition:width 1s var(--ease)}
.steps.lit .step::after{width:100%}
.steps.lit .step:nth-child(2)::after{transition-delay:.25s}.steps.lit .step:nth-child(3)::after{transition-delay:.5s}.steps.lit .step:nth-child(4)::after{transition-delay:.75s}.steps.lit .step:nth-child(5)::after{transition-delay:1s}
.step h3{font-size:var(--t-lg)}
.step p{font-size:var(--t-sm);color:var(--muted)}
.step .wk{font-family:var(--f-mono);font-size:11px;color:var(--muted);letter-spacing:.05em}
@media (max-width:1000px){.steps,.steps.four{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.steps,.steps.four{grid-template-columns:1fr}}

/* tools strip */
.tools{display:flex;flex-wrap:wrap;gap:10px}
.tools span{padding:12px 18px;border-radius:999px;border:1.5px solid var(--line);font-weight:600;font-size:var(--t-sm);transition:all .3s var(--spring)}
.tools span:hover{border-color:var(--red);color:var(--red-text);transform:translateY(-3px) rotate(-2deg)}

/* faq */
.faq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(28px,5vw,80px)}
@media (max-width:860px){.faq{grid-template-columns:1fr}}
.faq h2{font-size:var(--t-2xl);margin-top:16px}
details{border-bottom:1px solid var(--line)}
details:first-of-type{border-top:1.5px solid var(--ink)}
summary{list-style:none;cursor:pointer;padding-block:22px;font-weight:600;font-size:var(--t-lg);display:flex;justify-content:space-between;gap:20px;align-items:center}
summary::-webkit-details-marker{display:none}
summary .pm{flex:none;width:30px;height:30px;border-radius:50%;background:var(--paper-2);position:relative;transition:background .3s,transform .4s var(--spring)}
summary .pm::before,summary .pm::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;background:var(--ink);transform:translate(-50%,-50%)}
summary .pm::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .35s}
details[open] summary .pm{background:var(--red);transform:rotate(180deg)}
details[open] summary .pm::before,details[open] summary .pm::after{background:var(--on-red)}
details[open] summary .pm::after{transform:translate(-50%,-50%) rotate(0)}
details p{padding-bottom:24px;color:var(--muted);max-width:62ch}

/* work grid */
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:24px}
.filters button{font:600 var(--t-sm)/1 var(--f-body);padding:11px 16px;border-radius:999px;border:1.5px solid var(--line);background:transparent;color:var(--ink);cursor:pointer;transition:all .25s}
.filters button:hover{border-color:var(--ink)}
.filters button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.works{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px}
.work{grid-column:span 6;text-decoration:none;display:block;transition:opacity .4s,transform .5s var(--ease)}
.work.big{grid-column:span 12}
.work.third{grid-column:span 4}
@media (max-width:860px){.work,.work.big,.work.third{grid-column:span 12}}
.work.out{opacity:.12;transform:scale(.97);pointer-events:none}
.art{position:relative;aspect-ratio:4/3;max-width:100%;border-radius:var(--r-lg);overflow:hidden;background:var(--paper-2)}
.work.big .art{aspect-ratio:21/9}
@media (max-width:860px){.work.big .art{aspect-ratio:4/3}}
.art canvas{position:absolute;inset:0;width:100%;height:100%;transition:transform .9s var(--ease)}
.work:hover .art canvas{transform:scale(1.05)}
.art .ph{position:absolute;top:14px;left:14px;font-family:var(--f-mono);font-size:11px;padding:6px 10px;border-radius:999px;background:var(--paper);color:var(--muted)}
.work-meta{display:flex;justify-content:space-between;gap:12px;margin-top:14px;flex-wrap:wrap;align-items:baseline}
.work-meta h3{font-size:var(--t-lg)}
.work-meta span{font-family:var(--f-mono);font-size:var(--t-xs);color:var(--muted)}

/* values */
.vals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:860px){.vals{grid-template-columns:1fr}}
.big-quote{font-family:var(--f-display);font-variation-settings:"SOFT" 100,"WONK" 1;font-weight:700;font-size:clamp(1.9rem,4.4vw,3.6rem);line-height:1.08;letter-spacing:-.02em;max-width:22ch;text-wrap:balance}

/* contact */
.contact-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:16px}
@media (max-width:960px){.contact-grid{grid-template-columns:1fr}}
form{display:grid;gap:16px}
.f{display:grid;gap:8px}
.f > span,.f legend{font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
fieldset{border:0;padding:0;margin:0}
input[type=text],input[type=email],textarea,select{font:400 var(--t-md)/1.4 var(--f-body);color:var(--ink);background:var(--paper);border:1.5px solid var(--line);border-radius:var(--r-sm);padding:14px 16px;width:100%;transition:border-color .2s}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--red)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:560px){.two{grid-template-columns:1fr}}
.pick{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.pick label{cursor:pointer}
.pick input{position:absolute;opacity:0;pointer-events:none}
.pick span{display:inline-block;padding:10px 15px;border-radius:999px;border:1.5px solid var(--line);font-size:var(--t-sm);font-weight:600;transition:all .25s var(--spring)}
.pick input:checked + span{background:var(--red);border-color:var(--red);color:var(--on-red);transform:scale(1.04)}
.pick input:focus-visible + span{outline:2.5px solid var(--red);outline-offset:2px}
.form-msg{font-weight:600}
.form-msg.ok{font-family:var(--f-display);font-variation-settings:"SOFT" 100;font-size:var(--t-lg);color:var(--red-text)}
.copy{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.copy code{font-family:var(--f-mono);font-size:var(--t-md);padding:10px 14px;border-radius:var(--r-sm);background:var(--slab-2);color:var(--on-slab);user-select:all}
.copy button{font:600 var(--t-xs)/1 var(--f-mono);padding:11px 14px;border-radius:999px;border:1px solid color-mix(in srgb,var(--on-slab) 40%,transparent);background:transparent;color:var(--on-slab);cursor:pointer}

/* cta + footer */
.cta{background:var(--red);color:var(--on-red);border-radius:clamp(22px,3vw,38px);padding:clamp(32px,6vw,84px);display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:32px;align-items:end;position:relative;overflow:hidden}
.cta h2{font-size:var(--t-2xl);max-width:15ch}
.cta p{opacity:.9;margin-top:16px;max-width:42ch}
.cta .btns{justify-content:flex-end}
.cta .btn{border-color:var(--on-red);color:var(--on-red)}
.cta .btn:hover{background:var(--on-red);color:var(--red)}
.cta .btn.solid{background:var(--on-red);color:var(--red)}
.cta .btn.solid:hover{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.cta .ring{position:absolute;width:380px;height:380px;right:-120px;top:-170px;border-radius:50%;border:2px dashed color-mix(in srgb,var(--on-red) 35%,transparent);animation:spin 40s linear infinite}
@media (max-width:860px){.cta{grid-template-columns:1fr}.cta .btns{justify-content:flex-start}}
footer.foot{background:var(--slab);color:var(--on-slab);border-radius:clamp(22px,3vw,38px) clamp(22px,3vw,38px) 0 0;margin-top:clamp(56px,7vw,96px);padding-block:clamp(48px,6vw,80px) calc(28px + env(safe-area-inset-bottom,0px))}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:32px}
@media (max-width:860px){.foot-grid{grid-template-columns:1fr 1fr}}
.foot h4{font-family:var(--f-mono);font-weight:500;font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--on-slab-muted);margin-bottom:14px}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.foot a{text-decoration:none;color:var(--on-slab)}
.foot a:hover{color:#FF8F88}
.foot p{color:var(--on-slab-muted);max-width:34ch;margin-top:14px}
.foot .logo{width:min(100%,170px);margin-bottom:4px}
@media (max-width:860px){.foot-grid > div:first-child{grid-column:1/-1}}
.foot .base{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:32px;padding-top:20px;border-top:1px solid #FFFFFF22;font-size:var(--t-xs);font-family:var(--f-mono);color:var(--on-slab-muted)}

/* scroll motion: transform only, so content is readable at rest */
@supports (animation-timeline: view()){
  .lift{animation:lift linear both;animation-timeline:view();animation-range:entry 0% cover 28%}
  @keyframes lift{from{transform:translateY(56px) scale(.98)}}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  ::view-transition-old(main),::view-transition-new(main){animation:none}
}

/* ---------- case studies ---------- */
.nda{display:flex;gap:14px;align-items:flex-start;padding:18px 22px;border-radius:var(--r-md);background:var(--red-soft);font-size:var(--t-sm);margin-bottom:28px}
.nda b{color:var(--red-text)}
.cases{display:grid;gap:clamp(20px,3vw,32px)}
.cs{border-radius:var(--r-lg);border:1.5px solid var(--line);padding:clamp(22px,3.4vw,44px);display:grid;gap:clamp(22px,3vw,34px);background:var(--paper);transition:opacity .4s,transform .5s var(--ease),border-color .3s;scroll-margin-top:96px}
.cs:hover{border-color:color-mix(in srgb,var(--red) 45%,var(--line))}
.cs.out{display:none}
.cs-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px 32px;align-items:start}
@media (max-width:760px){.cs-head{grid-template-columns:1fr}}
.cs-head h2{font-size:clamp(1.8rem,3.6vw,3rem);margin-top:14px;max-width:20ch}
.cs .client{color:var(--muted);margin-top:14px;max-width:62ch}
.cs .chips{margin-top:16px;color:var(--muted)}
.toggle{position:relative;display:inline-grid;grid-template-columns:1fr 1fr;padding:5px;border-radius:999px;background:var(--paper-2);border:1px solid var(--line);justify-self:start}
.toggle button{position:relative;z-index:1;border:0;background:transparent;font:600 var(--t-sm)/1 var(--f-body);color:var(--muted);padding:11px 18px;border-radius:999px;cursor:pointer;transition:color .3s;white-space:nowrap}
.toggle button[aria-pressed="true"]{color:var(--on-red)}
.toggle i{position:absolute;top:5px;bottom:5px;left:5px;width:calc(50% - 5px);border-radius:999px;background:var(--red);transition:transform .45s var(--spring)}
.cs[data-state="before"] .toggle i{transform:none;background:var(--ink)}
.cs[data-state="before"] .toggle button[aria-pressed="true"]{color:var(--paper)}
.cs[data-state="after"] .toggle i{transform:translateX(100%)}
.ba{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:760px){.ba{grid-template-columns:1fr}}
.ba-col{border-radius:var(--r-md);padding:22px 24px;transition:opacity .4s,transform .4s var(--ease),background .4s}
.ba-col h3{font-family:var(--f-mono);font-weight:500;font-size:var(--t-xs);letter-spacing:.1em;text-transform:uppercase;margin-bottom:14px}
.ba-col ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:var(--t-sm)}
.ba-col li{display:flex;gap:10px}
.ba-col.before{background:var(--paper-2);color:var(--muted)}
.ba-col.before li::before{content:"✕";flex:none;font-weight:700;opacity:.7}
.ba-col.after{background:var(--slab);color:var(--on-slab)}
.ba-col.after li::before{content:"✓";flex:none;font-weight:700;color:#FF8F88}
.cs[data-state="after"] .ba-col.before{opacity:.55;transform:scale(.98)}
.cs[data-state="before"] .ba-col.after{opacity:.4;transform:scale(.98)}
.cs[data-state="before"] .ba-col.before{background:var(--red-soft);color:var(--ink)}
.metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:860px){.metrics{grid-template-columns:1fr}}
.metric{border-top:1.5px solid var(--ink);padding-top:16px;display:grid;gap:6px;align-content:start}
.m-label{font-size:var(--t-sm);color:var(--muted);font-weight:500}
.m-row{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.m-val{font-family:var(--f-display);font-variation-settings:"SOFT" 100;font-weight:900;font-size:clamp(2.6rem,5vw,3.8rem);line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--ink);transition:color .3s}
.cs[data-state="after"] .m-val{color:var(--red-text)}
.m-delta{font-family:var(--f-mono);font-size:var(--t-xs);padding:5px 9px;border-radius:999px;background:var(--red);color:var(--on-red);transition:opacity .3s,transform .4s var(--spring)}
.cs[data-state="before"] .m-delta{opacity:0;transform:scale(.6)}
.m-bars{display:grid;gap:7px;margin-top:8px}
.mb{display:grid;grid-template-columns:52px 1fr;align-items:center;gap:10px;font-family:var(--f-mono);font-size:11px;color:var(--muted)}
.mb span{height:10px;border-radius:10px;background:var(--paper-2);overflow:hidden;display:block}
.mb span i{display:block;height:100%;width:var(--w);border-radius:10px;background:var(--muted);transform-origin:left;transition:transform 1.1s var(--ease)}
.mb.a span i{background:var(--red)}
.metric.pre .mb span i{transform:scaleX(0)}
.metric.lit .mb.a span i{transition-delay:.35s}
.ex{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.05em;color:var(--muted);border:1px dashed var(--line);border-radius:999px;padding:3px 8px;justify-self:start}
.cs-foot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:center;font-size:var(--t-sm);color:var(--muted)}
.cs-foot .time{font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.06em;text-transform:uppercase}
/* home result tiles */
.res .m-val{font-size:clamp(2.6rem,4.4vw,3.6rem);color:inherit}
.tile.red .ex,.tile.slab .ex{color:inherit;border-color:color-mix(in srgb,currentColor 40%,transparent);opacity:.85}

/* ---------- blog ---------- */
@media (min-width:1024px){.rail{overflow-y:auto}.rail nav a{padding-block:8px}}
.post-card{gap:12px}
.post-card .art{aspect-ratio:16/10;border-radius:var(--r-md);margin-bottom:6px}
.post-card .art.wide{aspect-ratio:21/8}
@media (max-width:860px){.post-card .art.wide{aspect-ratio:16/10}}
.post-card h3{font-size:var(--t-xl)}
.post-card.featured h3{font-size:var(--t-2xl);max-width:22ch}
.post-card p{color:var(--muted);max-width:60ch}
.post-card.out{display:none}
.pc-meta{display:flex;gap:12px;flex-wrap:wrap;align-items:center;font-family:var(--f-mono);font-size:var(--t-xs);color:var(--muted)}
.pc-meta .cat{padding:5px 10px;border-radius:999px;background:var(--red-soft);color:var(--red-text);font-weight:500}
.subscribe{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:end;padding:clamp(28px,5vw,56px)}
@media (max-width:860px){.subscribe{grid-template-columns:1fr}}
.subscribe form{display:flex;flex-wrap:wrap;gap:10px}
.subscribe input{flex:1 1 220px;background:var(--slab-2);border-color:#FFFFFF22;color:var(--on-slab)}
.subscribe .fine{flex-basis:100%;color:var(--on-slab-muted)}
.progress{position:fixed;left:0;right:0;top:env(safe-area-inset-top,0px);height:4px;z-index:95;pointer-events:none}
.progress i{display:block;height:100%;background:var(--red);transform-origin:left;transform:scaleX(0)}
.back{font-family:var(--f-mono);font-size:var(--t-xs);text-decoration:none;color:var(--muted)}
.back:hover{color:var(--red-text)}
.post-head h1{margin-top:18px}
.post-grid{display:grid;grid-template-columns:220px minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:start;padding-bottom:24px}
@media (max-width:960px){.post-grid{grid-template-columns:1fr}.toc{display:none}}
.toc{position:sticky;top:32px;display:grid;gap:14px}
.toc ol{list-style:none;margin:0;padding:0;display:grid;gap:4px;border-left:2px solid var(--line)}
.toc a{display:block;text-decoration:none;font-size:var(--t-sm);color:var(--muted);padding:6px 0 6px 14px;margin-left:-2px;border-left:2px solid transparent;transition:color .2s,border-color .2s}
.toc a:hover{color:var(--ink)}
.toc a.on{color:var(--red-text);border-left-color:var(--red);font-weight:600}
.prose{max-width:68ch;font-size:1.125rem;line-height:1.75}
.prose > * + *{margin-top:1.1em}
.prose h2{font-size:clamp(1.6rem,2.8vw,2.2rem);margin-top:2em;scroll-margin-top:90px}
.prose ul{padding-left:1.2em}
.prose li + li{margin-top:.4em}
.prose li::marker{color:var(--red)}
.prose .drop::first-letter{font-family:var(--f-display);font-variation-settings:"SOFT" 100;font-weight:900;float:left;font-size:4.2em;line-height:.82;padding:.06em .1em 0 0;color:var(--red-text)}
.prose blockquote{margin:1.6em 0;padding:0 0 0 22px;border-left:4px solid var(--red);font-family:var(--f-display);font-variation-settings:"SOFT" 100,"WONK" 1;font-style:italic;font-weight:600;font-size:clamp(1.35rem,2.2vw,1.7rem);line-height:1.3}
.callout{padding:18px 22px;border-radius:var(--r-md);background:var(--paper-2);font-size:1rem}
.callout b{color:var(--red-text)}
.steps-list{list-style:none;padding:0;counter-reset:st;display:grid;gap:14px}
.steps-list li{counter-increment:st;display:block;position:relative;padding:16px 18px 16px 70px;border-radius:var(--r-md);border:1.5px solid var(--line);transition:border-color .3s,transform .3s var(--ease)}
.steps-list li:hover{border-color:var(--red);transform:translateX(4px)}
.steps-list li::before{content:counter(st);position:absolute;left:18px;top:16px;width:36px;height:36px;border-radius:50%;background:var(--red);color:var(--on-red);display:grid;place-items:center;font-family:var(--f-mono);font-size:var(--t-sm);font-weight:500}
.steps-list li + li{margin-top:0}
.post-cta{margin-top:2.4em!important}
.post-cta h3{font-size:var(--t-xl)}

.ba-col.before{text-decoration:none}

/* blog Q&A */
.qa-list{margin-top:2.6em!important;padding-top:1.4em;border-top:1.5px solid var(--ink)}
.qa-list h2{margin-top:0!important}
.qa-intro{color:var(--muted);margin-top:.5em}
.qa-items{margin-top:1.2em}
.qa-items details:first-of-type{border-top:1px solid var(--line)}
.qa-items summary{font-size:1.1rem;padding-block:18px}
.qa-items details p{font-size:1.02rem}
.qa-items details[open]{animation:qa-open .35s var(--ease)}
@keyframes qa-open{from{background:var(--red-soft)}}
.qa-ask{margin-top:1.2em;font-size:1rem;color:var(--muted)}
.qa-ask a{color:var(--red-text);font-weight:600}

/* theme toggle: floating, top-right corner */
.theme-btn,.agent-btn{position:fixed;z-index:60;top:calc(env(safe-area-inset-top,0px) + 12px);right:max(14px,env(safe-area-inset-right,0px));width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:color-mix(in srgb,var(--paper) 85%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--ink);display:grid;place-items:center;cursor:pointer;view-transition-name:theme;transition:border-color .25s,background .25s,transform .4s var(--spring);box-shadow:0 6px 20px -10px color-mix(in srgb,var(--ink) 40%,transparent)}
.theme-btn:hover{border-color:var(--red);transform:rotate(-12deg) scale(1.06)}
.agent-btn:hover{border-color:var(--red);transform:scale(1.08)}
.theme-btn svg{grid-area:1/1;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .5s var(--spring),opacity .3s}
.theme-btn .i-moon{fill:currentColor;stroke:none}
.theme-btn .i-sun{opacity:0;transform:rotate(-90deg) scale(.5)}
.theme-btn[data-mode="dark"] .i-sun{opacity:1;transform:none;color:#FFB4AE}
.theme-btn[data-mode="dark"] .i-moon{opacity:0;transform:rotate(90deg) scale(.5)}
::view-transition-group(theme){animation:none}
::view-transition-old(theme){display:none}
::view-transition-new(theme){animation:none}
@media (max-width:1023px){.theme-btn{width:46px;height:46px;top:calc(env(safe-area-inset-top,0px) + 12px);right:calc(max(16px,env(safe-area-inset-right,0px)) + 56px);box-shadow:none}}
.menu-open .theme-btn{color:var(--on-red);border-color:color-mix(in srgb,var(--on-red) 40%,transparent);background:transparent}

/* rail: gliding hover highlight */
.rail nav{position:relative;isolation:isolate}
.rail nav a{z-index:1;transition:none}
.rail nav a > span{transition:transform .18s var(--ease)}
.rail nav a:hover > span{transform:translateX(3px)}
.nav-pill{position:absolute;left:0;right:0;top:0;height:0;border-radius:var(--r-sm);background:var(--paper-2);z-index:0;opacity:0;pointer-events:none;will-change:transform,height;transition:transform .22s cubic-bezier(.2,.8,.2,1),height .22s cubic-bezier(.2,.8,.2,1),opacity .12s}
.rail nav.hovering .nav-pill{opacity:1}

/* let the mouse reach the real page while a page swap is animating */
::view-transition{pointer-events:none}

/* ElevenLabs voice + chat agent, themed with the logo palette.
   Page styles on the host element override the widget's defaults, and
   because they point at our tokens the widget follows light/dark mode. */
elevenlabs-convai{
  --el-base:var(--paper); --el-base-hover:var(--paper-2); --el-base-active:var(--line);
  --el-base-border:var(--line); --el-base-subtle:var(--muted); --el-base-primary:var(--ink); --el-base-error:var(--red);
  --el-accent:var(--red); --el-accent-hover:var(--red-deep); --el-accent-active:var(--red-deep);
  --el-accent-border:var(--red-deep); --el-accent-subtle:var(--red-soft); --el-accent-primary:var(--on-red);
  --el-button-radius:999px; --el-input-radius:14px; --el-bubble-radius:18px; --el-overlay-padding:20px;
  --el-sheet-radius:26px; --el-compact-sheet-radius:28px; --el-dropdown-sheet-radius:18px;
  font-family:var(--f-body);
}

/* AI agent launcher: same look as the theme button, bottom-right corner */
.agent-btn{top:auto;bottom:calc(env(safe-area-inset-bottom,0px) + 20px);right:max(20px,env(safe-area-inset-right,0px));width:52px;height:52px;z-index:2147483646}
@media (max-width:1023px){.agent-btn{top:auto;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(env(safe-area-inset-bottom,0px) + 16px);width:52px;height:52px}}
.agent-btn .bars{grid-area:1/1;display:flex;align-items:center;gap:3px;height:20px;transition:opacity .25s,transform .4s var(--spring)}
.agent-btn .bars i{display:block;width:3px;border-radius:3px;background:var(--red);height:40%;animation:eq 1.1s ease-in-out infinite}
.agent-btn .bars i:nth-child(2){animation-delay:-.3s;height:80%}.agent-btn .bars i:nth-child(3){animation-delay:-.6s;height:100%}.agent-btn .bars i:nth-child(4){animation-delay:-.15s;height:55%}
@keyframes eq{0%,100%{transform:scaleY(.45)}50%{transform:scaleY(1)}}
.agent-btn .i-x{grid-area:1/1;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;opacity:0;transform:rotate(-90deg) scale(.5);transition:transform .45s var(--spring),opacity .25s}
.agent-btn[aria-expanded="true"]{background:var(--red);border-color:var(--red);color:var(--on-red)}
.agent-btn[aria-expanded="true"] .bars{opacity:0;transform:scale(.4)}
.agent-btn[aria-expanded="true"] .i-x{opacity:1;transform:none}
.agent-btn::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:2px solid var(--red);opacity:0;animation:agent-ping 2.8s 1.2s ease-out 3}
@keyframes agent-ping{0%{opacity:.6;transform:scale(1)}100%{opacity:0;transform:scale(1.6)}}
.agent-toast{position:fixed;z-index:2147483646;right:max(20px,env(safe-area-inset-right,0px));bottom:calc(env(safe-area-inset-bottom,0px) + 84px);max-width:min(280px,calc(100vw - 40px));margin:0;padding:12px 14px;border-radius:14px;background:var(--slab);color:var(--on-slab);font-size:var(--t-sm);line-height:1.45;box-shadow:0 12px 30px -12px #0008;opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .25s,transform .35s var(--ease)}
.agent-toast.show{opacity:1;transform:none}

.agent-btn.aside,.agent-btn.dup{opacity:0;pointer-events:none;transform:scale(.6)}

/* while the agent panel is open, the round button docks beside the panel's Expand button as a × */
.agent-btn.docked{width:32px;height:32px;right:auto;bottom:auto;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;transition:transform .4s var(--spring),background .25s,border-color .25s}
.agent-btn.docked::after{display:none}
.agent-btn.docked .i-x{width:16px;height:16px}

/* hover label for the agent button */
.agent-tip{position:absolute;right:calc(100% + 12px);top:50%;white-space:nowrap;padding:9px 14px;border-radius:999px;background:var(--slab);color:var(--on-slab);font:600 var(--t-sm)/1 var(--f-body);box-shadow:0 10px 24px -12px #0009;pointer-events:none;opacity:0;transform:translate(10px,-50%);transition:opacity .2s,transform .3s var(--ease)}
.agent-tip::after{content:"";position:absolute;right:-5px;top:50%;width:10px;height:10px;background:inherit;transform:translateY(-50%) rotate(45deg);border-radius:2px}
.agent-btn:hover .agent-tip,.agent-btn:focus-visible .agent-tip{opacity:1;transform:translate(0,-50%)}
.agent-btn:hover{transform:scale(1.06)}
.agent-btn[aria-expanded="true"] .agent-tip,.agent-btn.docked .agent-tip{display:none}

/* phone / WhatsApp rows */
.ph-list{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ph-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 14px}
.ph-num{font-family:var(--f-mono);font-size:var(--t-sm);font-variant-numeric:tabular-nums;white-space:nowrap}
.ph-acts{display:flex;gap:6px}
.ph-acts a{font:600 12px/1 var(--f-body);padding:8px 11px;border-radius:999px;border:1px solid color-mix(in srgb,currentColor 35%,transparent);text-decoration:none;white-space:nowrap;transition:background .2s,color .2s,border-color .2s}
.ph-acts a.ph-wa{background:var(--red);border-color:var(--red);color:var(--on-red)}
.ph-acts a:hover{background:var(--on-slab);color:var(--slab);border-color:var(--on-slab)}
.ph-list.big{margin-top:6px}
.ph-list.big .ph-row{padding:12px 0;border-top:1px solid #FFFFFF1f}
.ph-list.big .ph-num{font-size:1.15rem}
.form-msg a{color:var(--red-text);font-weight:600}

/* mobile header: theme toggle and menu button share one centre line */
@media (max-width:1023px){
  .topbar{min-height:72px;padding-top:0;padding-bottom:0}
  .theme-btn{top:calc(env(safe-area-inset-top,0px) + 13px)}
}

/* blog: on tablets and phones the contents list sits above the article instead of floating over it */
.toc-toggle{display:none}
@media (max-width:960px){
  /* sticky bar under the header that shows the current section and opens the full list */
  .toc{position:sticky;top:calc(env(safe-area-inset-top,0px) + 72px);z-index:30;display:block;margin:0 calc(-1 * max(16px,env(safe-area-inset-left,0px)));padding:0}
  .toc-label{display:none}
  .toc-toggle{display:flex;align-items:center;gap:10px;width:100%;min-height:52px;padding:10px max(16px,env(safe-area-inset-left,0px));border:0;border-bottom:1px solid var(--line);background:var(--paper);color:var(--ink);font:600 var(--t-sm)/1.25 var(--f-body);text-align:left;cursor:pointer;position:relative}
  .toc-k{flex:none;font-family:var(--f-mono);font-weight:500;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--red-text)}
  .toc-current{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .toc-toggle svg{flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease)}
  .toc.open .toc-toggle svg{transform:rotate(180deg)}
  .toc-bar{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--red);transform-origin:left;transform:scaleX(0)}
  .toc ol{position:absolute;left:max(16px,env(safe-area-inset-left,0px));right:max(16px,env(safe-area-inset-right,0px));top:calc(100% + 8px);display:grid;gap:2px;border-left:0;padding:10px 14px;border-radius:var(--r-md);background:var(--paper);border:1px solid var(--line);box-shadow:0 18px 40px -18px #0006;max-height:60vh;overflow:auto;opacity:0;transform:translateY(-8px);pointer-events:none;visibility:hidden;transition:opacity .2s,transform .25s var(--ease),visibility 0s .25s}
  .toc.open ol{opacity:1;transform:none;pointer-events:auto;visibility:visible;transition:opacity .2s,transform .25s var(--ease)}
  .toc a{padding:11px 4px;margin-left:0;border-left:0;font-size:1rem}
  .toc a.on{border-left:0}
  .prose h2{scroll-margin-top:140px}
}