/* Case study pages — same tokens and type as index.html (Precision Dark) */
:root{
  --bg:#08080A; --bg-2:#0E0E11; --surface:#121215; --surface-2:#18181C; --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.14);
  --text:#EDEDEF; --body:#C9C9CF; --text-2:#A1A1AA; --text-3:#8B8B94;
  --lime:#DDFA5C; --on-lime:#0A0A0A; --signal:#DDFA5C; --glow:rgba(221,250,92,.14); --shadow:0 30px 80px -30px rgba(0,0,0,.8);
  --sans:"Geist", ui-sans-serif, system-ui, sans-serif; --display:"Bricolage Grotesque", var(--sans); --mono:"Geist Mono", ui-monospace, monospace;
  --gutter:clamp(16px,4vw,40px); --col:720px; --r:20px;
  --rail-x:max(var(--gutter), 50vw - 600px); /* contents rail: left edge */
  --rail-w:180px;
  /* motion tokens — the only easings and durations on the site.
     Each easing matches a GSAP built-in so CSS and JS motion feel the same:
     out = power4.out · expo = expo.out · in-out = power3.inOut · spring = back.out(1.7) */
  --ease-out:cubic-bezier(.165,.84,.44,1);   /* hovers, presses, state changes */
  --ease-expo:cubic-bezier(.16,1,.3,1);      /* entrances, reveals, media */
  --ease-in-out:cubic-bezier(.65,0,.35,1);   /* page and theme changes */
  --ease-spring:cubic-bezier(.34,1.56,.64,1);/* small playful settles */
  --dur-instant:120ms;  /* color, border */
  --dur-fast:240ms;     /* buttons, icons */
  --dur-base:480ms;     /* cards, glows, theme */
  --dur-slow:800ms;     /* media, page transitions */
  --dur-reveal:1100ms;  /* scroll reveals, headlines */
  --stagger:60ms;

  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#FAFAF8; --bg-2:#F3F3F0; --surface:#FFFFFF; --surface-2:#F4F4F1; --line:rgba(10,10,10,.08); --line-2:rgba(10,10,10,.14);
  --text:#0A0A0A; --body:#2E2E33; --text-2:#55555C; --text-3:#6B6B73;
  --signal:#4E6B00; --glow:rgba(160,200,0,.16); --shadow:0 30px 80px -40px rgba(0,0,0,.25);
  color-scheme:light;
}

*{box-sizing:border-box;margin:0;padding:0}
html{overflow-x:clip;scroll-padding-top:90px;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--body);font-family:var(--sans);font-size:17.5px;line-height:1.75;overflow-x:clip;-webkit-font-smoothing:antialiased;transition:background var(--dur-base) var(--ease-in-out),color var(--dur-base) var(--ease-in-out)}
a{color:inherit;text-decoration:none}
img,video{display:block;max-width:100%;height:auto}
picture{display:contents}
::selection{background:var(--lime);color:var(--on-lime)}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px;border-radius:6px}

.wrap{max-width:calc(var(--col) + 2 * var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}

/* ---------- top bar ---------- */
.cnav{position:fixed;inset:12px 12px auto;z-index:50;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:6px 6px 6px 8px;max-width:1200px;margin-inline:auto;
  border-radius:16px;background:color-mix(in srgb,var(--bg) 72%,transparent);backdrop-filter:blur(14px);border:1px solid var(--line);overflow:hidden}
.cnav .logo{display:flex;align-items:center;gap:10px;font-weight:600;letter-spacing:-.01em;color:var(--text);font-size:15px}
.cnav .logo i{width:28px;height:28px;border-radius:9px;background:url(portrait.jpg) center/cover;display:inline-block}
.cnav .right{display:flex;gap:8px;align-items:center}
.cnav .back{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;border-radius:10px;font-size:14px;font-weight:500;color:var(--text);background:var(--surface);border:1px solid var(--line-2);transition:background var(--dur-instant) var(--ease-out),border-color var(--dur-instant) var(--ease-out)}
.cnav .back:hover{background:var(--surface-2);border-color:var(--text-3)}
.cnav .theme{width:36px;height:36px;border-radius:10px;border:1px solid var(--line);background:transparent;color:var(--text-2);cursor:pointer;font-size:14px}
.cnav .theme:hover{color:var(--text);border-color:var(--line-2)}
.progress{position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--lime);transform-origin:left;transform:scaleX(0)}
@media (max-width:520px){.cnav .logo span{display:none}}

/* ---------- contents rail (wide screens, article body only) ---------- */
.toc{position:fixed;left:var(--rail-x);top:50%;transform:translateY(-50%);z-index:40;width:var(--rail-w);display:none;opacity:0;pointer-events:none;transition:opacity var(--dur-base) var(--ease-out)}
.toc.show{opacity:1;pointer-events:auto}
.toc-label{font-family:var(--mono);font-size:11px;color:var(--text-3);margin-bottom:12px}
.toc-list{list-style:none}
.toc-list a{display:flex;align-items:center;gap:10px;font-size:14px;line-height:1.35;color:var(--text-3);padding:6px 0;transition:color var(--dur-instant) var(--ease-out)}
.toc-list a::before{content:"";width:12px;height:1px;background:currentColor;flex-shrink:0;transition:width var(--dur-base) var(--ease-expo),background var(--dur-base) var(--ease-out)}
.toc-list a:hover{color:var(--text)}
.toc-list a.active{color:var(--text)}
.toc-list a.active::before{width:22px;background:var(--lime)}
@media (min-width:1280px){.toc{display:block}}

/* ---------- hero ---------- */
.chero{position:relative;padding-top:clamp(130px,16vw,180px);padding-bottom:clamp(40px,6vw,64px);isolation:isolate}
.chero::before{content:"";position:absolute;inset:0;z-index:-1;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:64px 64px;
  -webkit-mask:radial-gradient(ellipse 60% 70% at 50% 20%,#000 20%,transparent 70%);mask:radial-gradient(ellipse 60% 70% at 50% 20%,#000 20%,transparent 70%)}
.chero::after{content:"";position:absolute;z-index:-1;left:50%;top:10%;width:700px;max-width:100%;height:500px;transform:translateX(-50%);background:radial-gradient(circle,var(--glow),transparent 60%);pointer-events:none}
.eyebrow,.cover-date{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;color:var(--text-2);padding:5px 12px 5px 10px;border-radius:99px;border:1px solid var(--line-2);background:var(--surface);line-height:1.4}
.eyebrow::before,.cover-date::before{content:"";width:6px;height:6px;border-radius:2px;background:var(--lime)}
.chero h1{color:var(--text);font-size:clamp(40px,6vw,76px);line-height:1.02;letter-spacing:-.027em;font-weight:600;margin:24px 0 20px;text-wrap:balance}
.dek{font-size:clamp(18px,1.6vw,21px);line-height:1.55;color:var(--text-2);max-width:46ch}
.cmeta{display:grid;grid-template-columns:repeat(4,1fr);margin-top:40px;border:1px solid var(--line);border-radius:16px;background:var(--surface);overflow:hidden}
.cmeta > div{padding:16px 18px;border-left:1px solid var(--line)}
.cmeta > div:first-child{border-left:0}
.cmeta .k{font-family:var(--mono);font-size:11px;color:var(--text-3)}
.cmeta .v{color:var(--text);font-weight:500;font-size:15px;line-height:1.35;margin-top:4px}
@media (max-width:560px){.cmeta{grid-template-columns:1fr 1fr}.cmeta > div:nth-child(3){border-left:0}.cmeta > div:nth-child(n+3){border-top:1px solid var(--line)}}

/* wide cover with media (Aziz) */
.chero:has(.cover-grid) .wrap{max-width:calc(1200px + 2 * var(--gutter))}
.cover-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(32px,5vw,64px);align-items:center}
.cover-right{display:grid;place-items:center;padding:24px;border-radius:var(--r);background:var(--bg-2);border:1px solid var(--line);position:relative;overflow:hidden;isolation:isolate}
.cover-right::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 50% at 50% 60%,var(--glow),transparent 70%)}
.cover-right > video,.cover-right > img{max-height:560px;width:auto;border-radius:30px;border:6px solid #1d1d22;box-shadow:var(--shadow)}
.cover-right .iph{aspect-ratio:700/1546;width:auto;height:min(560px,70vh)}
.cover-byline{display:flex;align-items:center;gap:12px;margin-top:28px}
.cover-byline img{width:40px;height:40px;border-radius:12px;object-fit:cover}
.cover-byline b{display:block;color:var(--text);line-height:1.2;font-weight:600;font-size:15px}
.cover-byline span{font-size:13px;color:var(--text-2)}
.cover-row{display:flex;align-items:center;gap:14px;margin-top:16px;flex-wrap:wrap}
.cover-tagpill{font-family:var(--mono);font-size:12px;background:var(--lime);color:var(--on-lime);padding:3px 10px;border-radius:99px}
.cover-read{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:12px;color:var(--text-2)}
.cover-read svg{width:15px;height:15px}
@media (max-width:900px){.cover-grid{grid-template-columns:1fr}.cover-right .iph{height:420px;width:auto}} /* headline first on phones, media after */

/* ---------- article ---------- */
section{padding-block:clamp(36px,5vw,64px)}
section.tight{padding-block:clamp(16px,3vw,32px)}
section.stripe{border-top:1px solid var(--line)}
.lead{color:var(--text);font-size:clamp(24px,2.6vw,32px);line-height:1.3;letter-spacing:-.025em;font-weight:500}
h2{color:var(--text);font-size:clamp(28px,3.4vw,40px);line-height:1.1;letter-spacing:-.021em;font-weight:600;margin-bottom:20px;text-wrap:balance}
h3{color:var(--text);font-size:19px;line-height:1.35;letter-spacing:-.015em;font-weight:600;margin:34px 0 8px}
section p + p{margin-top:16px}
p b{color:var(--text);font-weight:600}
p i{color:var(--text);font-style:italic}
.stripe > .wrap > .eyebrow{margin-bottom:8px}

/* pull quote — big statement with a lime rule */
.pull{margin:30px 0;padding:6px 0 6px 24px;border-left:2px solid var(--lime)}
.pull p{color:var(--text);font-size:clamp(22px,2.4vw,28px);line-height:1.3;letter-spacing:-.018em;font-weight:600;text-wrap:balance}

/* figures break out of the reading column */
.frame{margin:40px 0;width:min(1100px,calc(100vw - 2 * var(--gutter)));position:relative;left:50%;transform:translateX(-50%);padding:12px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line)}
.frame img{width:auto;max-width:100%;max-height:min(78vh,760px);margin-inline:auto;border-radius:12px}
.frame figcaption{display:block;font-size:14px;color:var(--text-2);padding:14px 6px 2px;line-height:1.5}
/* a row of phone screens inside one frame */
.frame .phones{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;padding:6px}
.frame .phones img{width:100%;height:auto;max-height:none;border-radius:14px;box-shadow:0 0 0 1px var(--line),0 12px 28px -18px rgba(0,0,0,.35)}
@media (max-width:700px){.frame .phones{grid-template-columns:1fr 1fr}}
@media (min-width:1280px){.frame{width:min(1100px,calc(100vw - 2 * (var(--rail-x) + var(--rail-w) + 32px)))}}

/* numbers */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin:30px 0;border:1px solid var(--line);border-radius:16px;background:var(--surface);overflow:hidden}
.stat{padding:20px;border-left:1px solid var(--line)}
.stat:first-child{border-left:0}
.stat b{display:block;color:var(--text);font-size:clamp(30px,3.4vw,40px);font-weight:600;letter-spacing:-.021em;line-height:1.05}
.stat span{display:block;font-size:14px;line-height:1.4;color:var(--text-2);margin-top:6px}
@media (max-width:620px){.stat{border-left:0;border-top:1px solid var(--line)}.stat:first-child{border-top:0}}

/* honest-caveat note */
.note{margin:8px 0 28px;border:1px solid rgba(221,250,92,.35);background:color-mix(in srgb,var(--lime) 7%,var(--surface));border-radius:16px;padding:18px 20px;font-size:15px;line-height:1.65;color:var(--body)}
.note b{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;color:var(--signal);margin-bottom:6px;font-weight:500}
.note b::before{content:"!";width:16px;height:16px;border-radius:5px;display:grid;place-items:center;background:var(--lime);color:var(--on-lime);font-weight:700;font-size:11px}

/* numbered steps */
.steps{list-style:none;counter-reset:s;margin-top:22px;display:grid;gap:10px}
.steps li{counter-increment:s;position:relative;padding:16px 18px 16px 58px;border:1px solid var(--line);border-radius:14px;background:var(--surface);font-size:16px;line-height:1.6}
.steps li::before{content:counter(s);position:absolute;left:18px;top:16px;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font-family:var(--mono);font-size:12px;background:var(--surface-2);border:1px solid var(--line-2);color:var(--signal)}
.steps li b{color:var(--text)}

/* tags, table, credit, team */
.tagrow{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0}
.tag{font-family:var(--mono);font-size:12px;border:1px solid var(--line-2);color:var(--text-2);padding:5px 12px;border-radius:99px;background:var(--surface)}
.cmp{width:100%;border-collapse:separate;border-spacing:0;margin:24px 0 8px;font-size:15px;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--surface)}
.cmp th{font-family:var(--mono);font-size:11px;color:var(--text-3);font-weight:500;text-align:left;padding:14px 16px;background:var(--surface-2);border-bottom:1px solid var(--line)}
.cmp td{padding:14px 16px;border-bottom:1px solid var(--line);vertical-align:top}
.cmp tr:last-child td{border-bottom:0}
.cmp td:first-child{color:var(--text);font-weight:500}
.cmp td.up{white-space:nowrap;font-family:var(--mono);font-size:13px;color:var(--signal)}
.cmp td.up::before{content:"↑ "}
/* phones: each row becomes a card, every value labelled with its column */
@media (max-width:600px){
  .cmp,.cmp tbody,.cmp tr,.cmp td{display:block}
  .cmp{border:0;background:none;border-radius:0}
  .cmp thead{display:none}
  .cmp tr{margin-bottom:10px;border:1px solid var(--line);border-radius:14px;background:var(--surface);overflow:hidden}
  .cmp td{border-bottom:1px solid var(--line);padding:10px 14px}
  .cmp tr td:last-child{border-bottom:0}
  .cmp td:first-child{background:var(--surface-2);font-size:15px}
  .cmp td[data-label]:not(:first-child)::before{content:attr(data-label);display:block;margin-bottom:2px;font-family:var(--mono);font-size:11px;font-weight:400;color:var(--text-3)}
  .cmp td.up{white-space:normal}
}
.credit{display:flex;align-items:center;gap:14px;margin:26px 0;padding:16px 18px;border:1px solid var(--line);border-radius:16px;background:var(--surface)}
.credit .dot{width:44px;height:44px;border-radius:12px;object-fit:cover;flex-shrink:0}
.credit b{display:block;color:var(--text);font-size:15px;line-height:1.35;font-weight:600}
.credit span{font-size:14px;color:var(--text-2)}
.team{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.who{font-size:14px;border:1px solid var(--line);border-radius:10px;padding:7px 12px;color:var(--text-2);background:var(--surface)}
.who b{color:var(--text);font-weight:600}

/* ---------- closing CTA ---------- */
.ccta{padding-block:clamp(56px,8vw,96px)}
.ccta .wrap{max-width:calc(1200px + 2 * var(--gutter));position:relative}
.ccta .wrap::before{content:"";position:absolute;inset:0 var(--gutter);border:1px solid var(--line);border-radius:var(--r);background:radial-gradient(900px 500px at 50% 120%,rgba(221,250,92,.2),transparent 60%),var(--surface)}
.ccta h2,.ccta p,.ccta-actions{position:relative;z-index:1}
.ccta h2{text-align:center;margin:0 auto;padding-top:clamp(40px,6vw,72px);font-size:clamp(32px,5vw,60px);max-width:16ch;letter-spacing:-.027em}
.ccta p{text-align:center;color:var(--text-2);max-width:52ch;margin:18px auto 0;padding-inline:20px}
.ccta-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:30px;padding-bottom:clamp(40px,6vw,72px)}
.btn{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 18px;border-radius:12px;font-weight:500;font-size:15px;transition:background var(--dur-instant) var(--ease-out),border-color var(--dur-instant) var(--ease-out)}
.btn-fill{background:var(--lime);color:var(--on-lime);box-shadow:0 0 0 1px rgba(221,250,92,.3),0 8px 30px -8px rgba(221,250,92,.45)}
.btn-fill:hover{background:#E8FF7A}
.btn-line{border:1px solid var(--line-2);color:var(--text);background:var(--surface-2)}
.btn-line:hover{border-color:var(--text-3)}

/* ---------- micro-interactions (all timed with the motion tokens) ---------- */
.cnav .back .ar{display:inline-block;transition:translate var(--dur-fast) var(--ease-spring)}
.cnav .back:hover .ar{translate:-3px 0}
.cnav .theme{transition:color var(--dur-instant) var(--ease-out),border-color var(--dur-instant) var(--ease-out),rotate var(--dur-base) var(--ease-spring),scale var(--dur-fast) var(--ease-spring)}
:root[data-theme="light"] .cnav .theme{rotate:180deg}
.btn,.cnav .back{transition:background var(--dur-instant) var(--ease-out),border-color var(--dur-instant) var(--ease-out),scale var(--dur-fast) var(--ease-spring)}
.btn:active,.cnav .back:active,.cnav .theme:active{scale:.96;transition-duration:var(--dur-instant)}
.btn-fill{position:relative;overflow:hidden;isolation:isolate}
.btn-fill::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.6) 50%,transparent 65%);translate:-110% 0;transition:translate var(--dur-slow) var(--ease-out)}
.btn-fill:hover::after{translate:110% 0}
.toc-list a:hover::before{width:18px}
.who{transition:border-color var(--dur-fast) var(--ease-out),translate var(--dur-base) var(--ease-expo)}
@media (hover:hover){.who:hover{border-color:var(--line-2);translate:0 -2px}}

/* smooth scroll (Lenis) */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:clip}

/* page transitions between the portfolio and case studies */
@view-transition{navigation:auto}
::view-transition-old(root){animation:var(--dur-base) var(--ease-in-out) both vt-out}
::view-transition-new(root){animation:var(--dur-slow) var(--ease-expo) both vt-in}
::view-transition-group(case-title){animation-duration:var(--dur-slow);animation-timing-function:var(--ease-expo)}
@keyframes vt-out{to{opacity:0;transform:scale(.985)}}
@keyframes vt-in{from{opacity:0;transform:translateY(40px)}}
.chero h1{view-transition-name:case-title}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}

/* image zoom (medium-zoom): readable annotations on click */
:root{--zoom-bg:rgba(8,8,10,.92)}
:root[data-theme="light"]{--zoom-bg:rgba(250,250,248,.94)}
[data-zoom]{cursor:zoom-in}
.medium-zoom-overlay{z-index:90;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.medium-zoom-image--opened{z-index:91;border-radius:12px;box-shadow:0 30px 80px -30px rgba(0,0,0,.35)}

/* ---------- at a glance: the whole case in three lines, for skimmers ---------- */
.glance{display:grid;grid-template-columns:repeat(3,1fr);margin-top:28px;border:1px solid var(--line);border-radius:16px;background:var(--surface);overflow:hidden}
.glance > div{padding:18px 20px;border-left:1px solid var(--line)}
.glance > div:first-child{border-left:0}
.glance .k{display:block;margin-bottom:6px;font-family:var(--mono);font-size:11px;color:var(--text-3)}
.glance p{margin:0;font-size:15px;line-height:1.5;color:var(--text)}
.glance > div:last-child .k{color:var(--signal)}
@media (max-width:720px){.glance{grid-template-columns:1fr}.glance > div{border-left:0;border-top:1px solid var(--line)}.glance > div:first-child{border-top:0}}

/* ---------- live demo: a phone that plays the real flow (demo.js drives the steps) ---------- */
/* iPhone: titanium edge, black bezel, Dynamic Island and home indicator */
.demo,.iph{position:relative;width:min(300px,78vw);aspect-ratio:300/620;padding:10px;border-radius:50px;background:#000;box-shadow:0 0 0 1.5px #3A3A3F,var(--shadow)}
.demo::before,.iph::before{content:"";position:absolute;z-index:9;left:50%;top:19px;width:28%;height:25px;translate:-50% 0;border-radius:20px;background:#000;pointer-events:none}
.demo .scr::after,.iph::after{content:"";position:absolute;z-index:9;left:50%;bottom:7px;width:36%;height:4px;translate:-50% 0;border-radius:4px;background:#111;opacity:.85;pointer-events:none}
.iph::after{bottom:14px;background:#fff;opacity:.7}
.iph video,.iph img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;border-radius:41px;background:#fff}
.demo .scr{position:relative;height:100%;overflow:hidden;border-radius:41px;background:#fff;color:#0A0A0A;font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;font-size:12.5px;line-height:1.4}
.demo .sb{display:flex;justify-content:space-between;align-items:center;height:44px;padding:4px 18px 0 26px;font-size:13px;font-weight:600;letter-spacing:-.01em}
.demo .sb i{display:flex;gap:4px;align-items:center}
.demo .sb svg{display:block;height:10px;width:auto;fill:currentColor}
.demo .sb svg:last-child{height:11px}
.demo .nav{display:flex;align-items:center;gap:10px;padding:10px 16px;border-bottom:1px solid #EEE;font-weight:600}
.demo .nav i{font-style:normal;color:#666}
/* a step takes no space until its moment, then settles in */
.demo [data-at]:not(.on),.demo .gone{display:none !important} /* wins over each step's own display */
.demo .on{animation:d-in .55s var(--ease-expo) both}
@keyframes d-in{from{opacity:0;translate:0 8px}}
@media (max-width:900px){.demo,.iph{width:min(250px,66vw);border-radius:42px}.demo .scr,.iph video{border-radius:34px}.demo::before,.iph::before{top:16px;height:20px}.demo .sb{padding:2px 14px 0 22px;font-size:12px}.demo .sb svg{height:8.5px}.demo .sb svg:last-child{height:9.5px}} /* on phones the title should still show above the fold */

/* musaed: the invoice chat */
.chat{position:absolute;inset:78px 0 74px;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;padding:0 14px}
.chat .hi{position:absolute;inset:0;display:grid;place-content:center;text-align:center;gap:2px;color:#666}
.chat .hi b{color:#0A0A0A;font-size:14px}
.bub{max-width:82%;padding:8px 11px;border-radius:14px}
.bub.me{align-self:flex-end;background:#F1F1EF;border-bottom-right-radius:4px}
.bub.ai{align-self:flex-start;padding-left:0}
.inv{display:grid;gap:3px;width:118px;margin-bottom:6px;padding:8px;border-radius:8px;background:#fff;border:1px solid #E6E6E6}
.inv i{height:4px;border-radius:2px;background:#E4E4E4}.inv i:nth-child(1){width:55%;background:#CFCFCF}.inv i:nth-child(3){width:80%}.inv i:nth-child(5){width:40%;margin-left:auto;background:#CFCFCF}
.think{align-self:flex-start;color:#8A3FD1;font-size:12px}
.think::before{content:"✦ "}
.opts{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}
.opts span{padding:4px 9px;border-radius:99px;border:1px solid #DDD;font-size:11.5px;transition:background .3s,border-color .3s}
.opts span.pick{background:#0E7C6B;border-color:#0E7C6B;color:#fff}
.sum{margin-top:6px;padding:8px 10px;border-radius:10px;background:#F6F6F4;font-size:11.5px;color:#444}
.sum b{display:block;color:#0A0A0A}
.composer{position:absolute;left:12px;right:12px;bottom:34px;display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:14px;border:1px solid #E4E4E4;color:#999;font-size:12px}
.composer::before{content:"+";color:#0E7C6B;font-size:15px}
.notice{position:absolute;left:0;right:0;bottom:12px;text-align:center;font-size:10.5px;color:#888}
.notice b{color:#0E7C6B;font-weight:600}

/* mrsool: the order card counts down, escalates at 5 seconds, then rejects itself */
.map{position:absolute;inset:0 0 44%;background:
  linear-gradient(90deg,transparent 46%,#fff 46% 50%,transparent 50%) 0 0/88px 100%,
  linear-gradient(0deg,transparent 46%,#fff 46% 50%,transparent 50%) 0 0/100% 70px,
  linear-gradient(35deg,transparent 48%,#F6E6A8 48% 52%,transparent 52%),#E9EEE6}
.map .pin{position:absolute;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:#fff;box-shadow:0 4px 10px rgba(0,0,0,.2);font-size:12px}
.map .pin.a{left:30%;top:28%}.map .pin.b{left:62%;top:52%}
.order{position:absolute;left:0;right:0;bottom:0;height:47%;padding:14px 16px;border-radius:20px 20px 0 0;background:#fff;box-shadow:0 -10px 30px rgba(0,0,0,.08);display:flex;flex-direction:column;gap:8px}
.order .ow{text-align:center;font-size:12px;color:#555}
.order .ow b{display:block;color:#0A0A0A;font-size:13px}
.order .free{text-align:center;color:#1E9E57;font-weight:600}
.order .kv{display:grid;grid-template-columns:1fr 1fr;text-align:center;font-size:11px;color:#777}
.order .kv b{display:block;color:#0A0A0A;font-size:13px}
.order .cd{margin-top:auto;text-align:center;font-size:11px;color:#1673D6;transition:color .3s}
.order .cd.hot{color:#D92D20;font-weight:600}
.order .acc{padding:10px;border-radius:10px;background:#1E9E57;color:#fff;text-align:center;font-weight:600}
.scr.buzz{animation:buzz .5s linear 3}
@keyframes buzz{0%,100%{translate:0}20%{translate:-2px 0}40%{translate:2px 0}60%{translate:-2px 0}80%{translate:2px 0}}
.timeout{position:absolute;inset:0;display:grid;place-content:center;gap:8px;padding:28px;text-align:center;background:#fff}
.timeout .ic{width:52px;height:52px;margin:0 auto 4px;border-radius:50%;display:grid;place-items:center;background:#FDECEA;color:#D92D20;font-size:22px;font-weight:700}
.timeout b{font-size:15px}
.timeout p{margin:0;color:#666;font-size:12px}

/* type pairing: Geist for reading, Bricolage Grotesque for headings, statements and the big numbers */
h1,h2,h3,.lead,.pull p,.stat b{font-family:var(--display)}
.demo h1,.demo h2,.demo h3{font-family:inherit}

/* real-screen demo: the phone plays actual screens in order, each fading in over the last */
.demo.shots{aspect-ratio:390/860}
.demo.shots .scr img{position:absolute;inset:0;width:100%;height:100%;max-height:none;object-fit:cover;object-position:top;border:0;border-radius:0;box-shadow:none}
.demo.shots .on{animation:d-fade .6s var(--ease-out) both}
@keyframes d-fade{from{opacity:0}}

/* labelled phone rows inside figures */
.frame .phones > div{display:grid;gap:10px;justify-items:center;align-content:start}
.frame .phones > div span{font-family:var(--mono);font-size:12px;color:var(--text-2);text-align:center}

/* ---------- Musaed clickable prototype (proto.js): the real flow rebuilt in HTML, so it stays sharp ---------- */
.proto-wrap{display:grid;justify-items:center;gap:14px}
.demo.proto{aspect-ratio:300/640}
.proto .scr{display:flex;flex-direction:column;font-size:12.5px}
.p-nav{display:flex;align-items:center;gap:12px;padding:10px 16px 12px;border-bottom:1px solid #EEE;font-size:14px}
.p-nav span{color:#444}
.p-hi{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:0 14px;text-align:center;color:#666}
.p-hi b{color:#111;font-size:14.5px}
.p-logo{width:36px;height:36px;margin-bottom:10px;border-radius:10px;background:linear-gradient(135deg,#C04AD8,#6B4AE6 60%,#4A9BE6);box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.p-logo::after{content:"✦";display:grid;place-items:center;height:100%;color:#fff;font-size:16px}
.p-hi small{align-self:flex-start;margin-top:auto;padding-bottom:8px;font-size:11px;color:#555}
.p-chips{align-self:flex-start;display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px;text-align:left}
.p-chips i{padding:5px 9px;border-radius:8px;border:1px solid #E6E6E6;font-style:normal;font-size:10.5px;color:#333}
.p-hi[hidden]{display:none}
.p-thread{flex:1;display:flex;flex-direction:column;gap:9px;padding:12px 12px 6px;overflow-y:auto;scrollbar-width:none}
.p-hi:not([hidden]) + .p-thread{flex:0 0 0;padding:0}
.p-msg{max-width:88%;line-height:1.4;animation:d-in .45s var(--ease-expo) both}
.p-msg.me{align-self:flex-end;display:grid;justify-items:end;gap:6px}
.p-msg.me::after{content:none}
.p-msg.me{color:#111}
.p-msg.me > :not(.p-inv){padding:7px 11px;border-radius:12px;background:#F1F1EF}
.p-msg.ai{align-self:flex-start;color:#1a1a1a}
.p-msg.think{color:#8A3FD1}
.p-msg.think::before{content:"✦ "}
.p-sum{display:block;margin-top:7px;padding:8px 10px;border-radius:10px;background:#F6F6F4;font-size:11.5px;line-height:1.5;color:#444}
.p-sum b{color:#111}
.p-sum > b:first-child{display:block;margin-bottom:2px}
.p-acts{display:flex;gap:10px;margin-top:6px;color:#777}
.p-acts svg{width:14px;height:14px}
.p-inv{display:grid;gap:3px;width:104px;padding:8px;border-radius:8px;background:#fff;border:1px solid #E6E6E6;box-shadow:0 2px 6px rgba(0,0,0,.06)}
.p-inv i{height:3px;border-radius:2px;background:#E4E4E4}
.p-inv i:nth-child(1){width:50%;background:#C9C9C9}.p-inv i:nth-child(3){width:80%}.p-inv i:nth-child(5){width:65%}.p-inv i:nth-child(6){width:38%;margin-left:auto;background:#C9C9C9}
.p-composer{margin:0 12px;padding:8px 10px;border-radius:14px;border:1px solid #E4E4E4;background:#fff}
.p-attach{padding-bottom:8px}
.p-attach[hidden]{display:none}
.p-row{display:flex;align-items:center;gap:8px}
.p-plus,.p-send{flex:none;display:grid;place-items:center;width:26px;height:26px;border:0;border-radius:8px;background:none;font:600 17px/1 inherit;color:#0E7C6B;cursor:pointer}
.p-plus:disabled{opacity:.35;cursor:default}
.p-send{background:#EDEDEB;color:#fff;font-size:14px}
.p-send:not(:disabled){background:#0E7C6B}
.p-input{flex:1;color:#999;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.p-input.typed{color:#111}
.p-note{margin:6px 0 10px;text-align:center;font-size:9.5px;color:#999}
.p-sheet{position:absolute;left:8px;right:8px;bottom:8px;z-index:3;padding:12px;border-radius:16px;background:#fff;box-shadow:0 -6px 30px rgba(0,0,0,.14),0 0 0 1px #EEE;
  translate:0 110%;transition:translate .35s var(--ease-expo)}
.p-sheet.open{translate:0 0}
.p-sheet[hidden]{display:none}
.p-sh-h{display:flex;justify-content:space-between;margin-bottom:8px;font-size:11px;color:#888}
.p-sh-h b{font-weight:400}
.p-opt{display:flex;align-items:center;gap:10px;width:100%;margin-top:6px;padding:9px 10px;border:0;border-radius:10px;background:#F6F6F4;font:500 12.5px/1.2 inherit;color:#111;text-align:left;cursor:pointer}
.p-opt i{margin-left:auto;font-style:normal;color:#0E7C6B}
.p-opt:hover{background:#EEEEEB}
.p-ic{display:grid;place-items:center;color:#333}
.p-ic svg{width:16px;height:16px}
.p-sh-f{display:flex;justify-content:space-between;align-items:center;margin-top:10px;padding-top:8px;border-top:1px solid #EEE;font-size:11px;color:#777}
.p-skip{padding:4px 12px;border-radius:8px;border:1px solid #0E7C6B;background:none;font:500 11px/1.4 inherit;color:#0E7C6B;cursor:pointer}
/* the next thing to tap pulses in the site's lime */
.proto .cue{position:relative;z-index:1;box-shadow:0 0 0 0 rgba(170,210,40,.7);animation:p-cue 1.6s var(--ease-out) infinite}
@keyframes p-cue{0%{box-shadow:0 0 0 0 rgba(170,210,40,.75)}70%{box-shadow:0 0 0 10px rgba(170,210,40,0)}100%{box-shadow:0 0 0 0 rgba(170,210,40,0)}}
.p-under{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 12px;max-width:320px;min-height:30px;text-align:center;font-family:var(--mono);font-size:12px;color:var(--text-2)}
.p-under .p-hint::before{content:"→ ";color:var(--signal)}
.p-replay{padding:5px 12px;border-radius:99px;border:1px solid var(--line-2);background:var(--surface);font:500 12px/1.2 var(--mono);color:var(--text);cursor:pointer}
.p-replay[hidden]{display:none}
.proto button:focus-visible{outline:2px solid #0E7C6B;outline-offset:2px}
@media (prefers-reduced-motion:reduce){.proto .cue{animation:none;box-shadow:0 0 0 3px rgba(170,210,40,.8)}.p-sheet{transition:none}.p-msg{animation:none}}

/* ---------- Musaed build audit: rule cards with an area filter ---------- */
.frame .phones.two{grid-template-columns:repeat(2,minmax(0,280px));justify-content:center;gap:28px}
.r-chips{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 16px}
.r-chips button{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:99px;border:1px solid var(--line-2);background:var(--surface);color:var(--text-2);font:500 14px/1 var(--sans);cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.r-chips button i{font:500 11px/1 var(--mono);font-style:normal;color:var(--text-3)}
.r-chips button:hover{color:var(--text);border-color:var(--text-3)}
.r-chips button.on{background:var(--lime);border-color:var(--lime);color:var(--on-lime)}
.r-chips button.on i{color:var(--on-lime);opacity:.7}
.r-chips button:focus-visible{outline:2px solid var(--signal);outline-offset:2px}
.rules{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;margin:0 0 8px;padding:0}
.rule{display:flex;flex-direction:column;gap:10px;padding:18px 18px 20px;border:1px solid var(--line);border-radius:16px;background:var(--surface);animation:d-in .45s var(--ease-expo) both}
.rule[hidden]{display:none}
.r-k{align-self:flex-start;font-family:var(--mono);font-size:11px;color:var(--signal);padding:4px 8px;border-radius:6px;background:color-mix(in srgb,var(--lime) 10%,transparent)}
.r-seen{margin:0;font-size:14px;line-height:1.55;color:var(--text-2);padding-left:14px;position:relative}
.r-seen::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;border-radius:50%;background:#E5484D}
.r-rule{margin:0;font-size:15.5px;line-height:1.55;color:var(--text);font-weight:500;padding-top:10px;border-top:1px dashed var(--line-2)}
/* analytics notice under the closing call to action */
.ccta-actions:has(+ .privacy-note){padding-bottom:0}
.privacy-note{position:relative;margin:32px auto 0;padding:0 var(--gutter) clamp(32px,5vw,56px);max-width:70ch;text-align:center;font-size:12.5px;line-height:1.5;color:var(--text-3)}
.privacy-note a{text-decoration:underline;text-underline-offset:2px}
.frame .phones.even img{aspect-ratio:393/852;object-fit:cover;object-position:top}

/* tap indicator: a fingertip that presses and leaves a ripple where an autoplay "click" lands */
.tap{position:absolute;z-index:8;left:var(--x);top:var(--y);width:36px;height:36px;margin:-18px 0 0 -18px;border-radius:50%;pointer-events:none;
  background:rgba(15,15,18,.32);box-shadow:0 0 0 2.5px rgba(255,255,255,.95),0 6px 16px -4px rgba(0,0,0,.45);opacity:0}
.tap::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid rgba(255,255,255,.9);opacity:0}
.demo.shots .tap.on,.tap.go{animation:tap-press .8s var(--ease-out) both}
.demo.shots .tap.on::after,.tap.go::after{animation:tap-ripple .8s var(--ease-out) both}
@keyframes tap-press{0%{opacity:0;scale:1.5}30%{opacity:1;scale:1}50%{scale:.78}70%{scale:1;opacity:1}100%{opacity:0;scale:1}}
@keyframes tap-ripple{0%,45%{opacity:0;scale:1}55%{opacity:.9}100%{opacity:0;scale:2.6}}