/* KOA Labs — shared stylesheet for every generated page (home, careers, roles; five languages).
   Corporate redesign, 5-nov-2026: one designed theme (white body, ink bands),
   Manrope light for headlines, pill buttons, wide container, few sections.
   Brand tokens: 99_docs/business/koalabs-consultancy/03-brand.md */

*{margin:0;padding:0;box-sizing:border-box}

:root{
  --ink:#0a0a0a;
  --white:#ffffff;
  --panel:#f4f3f9;
  --text:#14121f;
  --muted:#625e78;
  --dim:#8d8aa3;
  --line:rgba(20,18,31,.12);
  --on-dark:#f7f8f8;
  --on-dark-muted:#a9adb8;
  --line-dark:rgba(255,255,255,.14);
  --accent:#a0a0ff;
  --accent-ink:#5e5ee0;
  --amber:#92600a;   /* low-stock / "needs your eye" flag — AA on white (~5.4:1); demos (F1c, 6-nov) */
  --wrap:1240px;
  --pad:40px;
  --motion-short:150ms;
  --motion-medium:280ms;
  --ease-emphasized:cubic-bezier(.2,0,0,1);
}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--white);color:var(--text);
  font-family:'Manrope',-apple-system,system-ui,'Segoe UI',sans-serif;
  font-size:17px;font-weight:400;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
:focus-visible{outline:2px solid var(--accent-ink);outline-offset:3px;border-radius:4px}
.dark :focus-visible,nav :focus-visible{outline-color:var(--accent)}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
section{padding:128px 0}
.dark{background:var(--ink);color:var(--on-dark)}
.tint{background:var(--panel)}

h1,h2,h3{font-weight:300;letter-spacing:-.03em;line-height:1.06;text-wrap:balance}
h2{font-size:clamp(32px,4.2vw,56px)}
.label{font-size:14px;font-weight:500;color:var(--muted);letter-spacing:.01em;margin-bottom:20px}
.dark .label{color:var(--on-dark-muted)}

/* ─── Buttons ─── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:0 26px;border-radius:999px;
  font-size:15px;font-weight:500;white-space:nowrap;
  border:1px solid transparent;
  transition:background var(--motion-short) var(--ease-emphasized),color var(--motion-short) var(--ease-emphasized),border-color var(--motion-short) var(--ease-emphasized);
}
.btn-light{background:var(--white);color:var(--ink)}
.btn-light:hover{background:#e6e5f2}
.btn-line{border-color:rgba(255,255,255,.5);color:var(--white)}
.btn-line:hover{background:rgba(255,255,255,.1);border-color:var(--white)}
.btn-ink{background:var(--ink);color:var(--white)}
.btn-ink:hover{background:#2a2838}
.btn-outline{border-color:rgba(20,18,31,.28);color:var(--text)}
.btn-outline:hover{border-color:var(--ink);background:rgba(20,18,31,.04)}

/* ─── Nav ─── */
nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(10,10,10,.78);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  color:var(--on-dark);
}
.nav-inner{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad);height:72px;display:flex;align-items:center;gap:48px}
.brand{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-size:19px;letter-spacing:-.02em}
.brand svg{width:26px;height:26px;color:var(--accent)}
.brand b{font-weight:600}
.brand span{font-weight:400;opacity:.72}
.nav-links{display:flex;gap:32px;margin-right:auto}
.nav-links a{font-size:15px;color:rgba(255,255,255,.76);min-height:44px;display:inline-flex;align-items:center;transition:color var(--motion-short) var(--ease-emphasized)}
.nav-links a:hover{color:var(--white)}
.nav-tools{display:flex;align-items:center;gap:10px;margin-left:auto}
.nav-tools .btn{min-height:44px;padding:0 20px;font-size:14px}
.lang{min-width:52px;padding:0 14px!important}

.langs{position:relative}
.langs summary{list-style:none;cursor:pointer;gap:6px;user-select:none}
.langs summary::-webkit-details-marker{display:none}
.langs summary svg{width:13px;height:13px;opacity:.75;transition:transform var(--motion-short) var(--ease-emphasized)}
.langs[open] summary svg{transform:rotate(180deg)}
.langs .menu-panel{min-width:176px}
.menu-panel a[aria-current]{color:var(--accent)}
.nav-links a[aria-current]{color:var(--white)}

/* "Industrias" dropdown (S1, ruling 57, 7-nov-2026): same .langs look, wider + scrollable since
   the list grows with every new industry page (I1's batches). .industries sits in .nav-links on
   desktop; on mobile it's the .submenu below instead (.nav-links is hidden there). */
.industries .menu-panel{min-width:264px;max-height:min(420px,70vh);overflow-y:auto}
.submenu{border-radius:10px}
.submenu > summary{display:flex;align-items:center;justify-content:space-between;gap:8px;list-style:none;cursor:pointer;min-height:48px;padding:0 16px;border-radius:10px;font-size:16px}
.submenu > summary::-webkit-details-marker{display:none}
.submenu > summary svg{width:13px;height:13px;opacity:.75;transition:transform var(--motion-short) var(--ease-emphasized)}
.submenu[open] > summary svg{transform:rotate(180deg)}
.submenu > summary:hover{background:rgba(255,255,255,.08)}
.submenu-panel{padding:0 0 4px 10px;max-height:min(360px,50vh);overflow-y:auto}

.menu{display:none;position:relative}
/* Direct-child combinator (K2, ruling 60, 7-nov-2026): was ".menu summary" (descendant), which also
   matched the nested Industries <summary> inside .submenu (added by S1's mobile dropdown) — the
   hamburger's 44px round-button styles (fixed size, border, display:grid) bled into that unrelated
   summary and drew a circle over the "Industries" row in the mobile menu. */
.menu > summary{list-style:none;cursor:pointer;width:44px;height:44px;border-radius:999px;border:1px solid rgba(255,255,255,.5);display:grid;place-items:center}
.menu > summary::-webkit-details-marker{display:none}
.menu-panel{position:absolute;right:0;top:56px;min-width:220px;background:var(--ink);border:1px solid var(--line-dark);border-radius:16px;padding:8px}
.menu-panel a{display:flex;align-items:center;min-height:48px;padding:0 16px;border-radius:10px;font-size:16px}
.menu-panel a:hover{background:rgba(255,255,255,.08)}

/* ─── Hero ─── */
.hero{
  position:relative;overflow:hidden;
  background:var(--ink);color:var(--on-dark);
  min-height:min(880px,100svh);
  display:flex;align-items:flex-end;
  padding:168px 0 80px;
}
.hero-art{position:absolute;inset:0;pointer-events:none}
.hero-art::before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(ellipse 60% 70% at 82% 38%,rgba(113,112,255,.30),transparent 68%),
    radial-gradient(ellipse 40% 50% at 12% 110%,rgba(113,112,255,.12),transparent 70%);
}
.hero-art::after{
  content:'';position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:radial-gradient(ellipse 70% 80% at 80% 40%,#000,transparent 72%);
  mask-image:radial-gradient(ellipse 70% 80% at 80% 40%,#000,transparent 72%);
}
.hero-art svg{position:absolute;right:-9%;top:-2%;width:min(60vw,800px);height:auto;color:var(--accent);opacity:.10}
.hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,330px);align-items:end;gap:56px}
.hero h1{font-size:clamp(42px,6vw,88px)}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero-side p{font-size:19px;line-height:1.45;color:var(--on-dark);margin-bottom:28px}
/* S1 (ruling 57, 7-nov-2026): the "software adapts to you" tagline, a short kicker above the
   hero's own lead paragraph — same line repeats, centered, in the #industries head (.lead-ink). */
.hero-adapt{font-size:15px;font-weight:600;letter-spacing:.01em;color:var(--accent);margin-bottom:10px}
.hero-actions{display:flex;flex-wrap:wrap;gap:10px}

/* ─── Statement ─── */
.statement p{
  max-width:1000px;margin:0 auto;text-align:center;
  font-size:clamp(26px,3.5vw,48px);font-weight:300;line-height:1.18;letter-spacing:-.025em;text-wrap:balance;
}
.statement .dimmed{color:var(--dim)}

/* ─── Section head ─── */
.head{display:grid;grid-template-columns:minmax(0,1fr);gap:0;margin-bottom:64px;max-width:820px}
.head.center{margin-left:auto;margin-right:auto;text-align:center}
/* The Lego line, Approach/"how we work" section (S1, ruling 57, 7-nov-2026): "the pieces already
   exist, we model them to your business" — left-aligned like the rest of this non-centered head. */
.a-lead{font-size:18px;line-height:1.5;color:var(--muted);max-width:620px;margin-top:10px}

/* ─── Services ─── */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.card{
  background:var(--panel);border-radius:24px;padding:36px;
  display:flex;flex-direction:column;
}
.card > div{margin-top:72px}
.card svg{width:32px;height:32px;color:var(--accent-ink)}
.card h3{font-size:30px;font-weight:400;letter-spacing:-.025em;margin-bottom:14px}
.card p{font-size:16px;color:var(--muted);max-width:34ch}

/* ─── Approach: four steps, horizontal ─── */
.steps{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px;counter-reset:step}
.steps::before{content:'';position:absolute;top:5px;left:0;right:0;height:1px;background:var(--line)}
.step{position:relative;padding-top:44px}
.step::before{content:'';position:absolute;top:0;left:0;width:11px;height:11px;border-radius:50%;background:var(--ink)}
.step-num{display:block;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:13px;color:var(--muted);margin-bottom:18px}
.step h3{font-size:32px;margin-bottom:14px}
.step p{font-size:16px;color:var(--muted);max-width:28ch}

/* ─── Platform ─── */
.platform{position:relative;overflow:hidden;padding:152px 0 112px}
.platform-art{position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.34) 1.3px,transparent 1.5px);
  background-size:56px 56px;background-position:center top;
  -webkit-mask-image:radial-gradient(ellipse 62% 58% at 50% 34%,transparent 30%,#000 60%,transparent 100%);
  mask-image:radial-gradient(ellipse 62% 58% at 50% 34%,transparent 30%,#000 60%,transparent 100%);
}
.platform .wrap{position:relative}
.chip{
  position:absolute;display:inline-flex;align-items:center;gap:8px;
  font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12px;line-height:1;
  color:var(--ink);background:var(--on-dark);padding:7px 10px;
}
.chip::before{content:'';width:7px;height:7px;background:var(--accent-ink)}
.platform .head{margin-bottom:0}
.platform h2{margin-bottom:24px}
.platform .lead{font-size:19px;line-height:1.5;color:var(--on-dark-muted);max-width:640px;margin:0 auto 36px}
.platform .hero-actions{justify-content:center}
.own{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px;margin-top:136px;padding-top:36px;border-top:1px solid var(--line-dark)}
.own strong{display:block;font-size:18px;font-weight:500;margin-bottom:8px}
.own span{font-size:15px;color:var(--on-dark-muted)}

/* ─── Industries ─── */
.pills{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.pills li{min-height:48px;padding:0 24px;border-radius:999px;border:1px solid var(--line);display:inline-flex;align-items:center;font-size:16px}
.pills li.has-link{padding:0}
.pills li.has-link a{display:flex;align-items:center;gap:6px;height:100%;padding:0 24px;color:inherit;text-decoration:none}
.pills li.has-link a:hover{color:var(--accent-ink)}
.pills li.has-link svg{width:16px;height:16px}

/* K2 step 6 (ruling 60/61, 7-nov-2026): the industries-index pill grows a second, muted line — a
   real example thumbnail (one KPI from that industry's own dashboard), not a screenshot. */
.pills li.pill-thumb{min-height:60px}
.pills li.pill-thumb a{flex-wrap:wrap;align-items:flex-start;gap:2px 6px;padding:10px 20px}
.pill-thumb-name{display:inline-flex;align-items:center;gap:6px}
.pill-thumb-ex{flex:0 0 100%;font-size:11px;color:var(--muted);font-family:'JetBrains Mono',ui-monospace,monospace}

/* ─── Industry landing pages (F1): "where it helps" cards reuse .step, FAQ and the boxed callout are new ─── */
.helps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:40px;counter-reset:step}
.stays{background:var(--panel);border-radius:24px;padding:36px 40px;margin-top:56px}
.stays p{font-size:17px;max-width:62ch}
.faq{display:grid;gap:36px;max-width:760px}
.faq-item h3{font-size:19px;font-weight:500;margin-bottom:8px}
.faq-item p{font-size:16px;color:var(--muted);max-width:60ch}

/* ─── Company ─── */
.company{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.9fr);gap:64px}
.company .big{font-size:clamp(24px,2.7vw,36px);font-weight:300;line-height:1.25;letter-spacing:-.02em;margin-bottom:32px;text-wrap:balance}
.company .small{font-size:17px;color:var(--muted);max-width:60ch;margin-bottom:20px}
.link{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:500;transition:color var(--motion-short) var(--ease-emphasized)}
.link svg{width:18px;height:18px}
.link:hover{color:var(--accent-ink)}

/* ─── Contact ─── */
.contact{text-align:center;padding:152px 0}
.contact h2{font-size:clamp(36px,5.4vw,76px);max-width:14em;margin:0 auto 40px}
.contact .mail{display:inline-flex;align-items:center;min-height:44px;margin-top:20px;color:var(--on-dark-muted);font-size:16px}
.contact .mail:hover{color:var(--white)}
.contact-note{margin:20px auto 0;max-width:46ch;font-size:14px;color:var(--on-dark-muted)}
/* ruling 28 (6-Nov-2026): label the plain mail line as a fallback to the chat CTA above it,
   never a second main call to action — quiet, same row on wide screens, wraps on narrow ones. */
.mail-fallback{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px;margin-top:14px;font-size:14px;color:var(--on-dark-muted)}
.mail-fallback .mail{margin-top:0;font-size:14px}

/* ─── Footer ─── */
footer{background:var(--ink);color:var(--on-dark-muted);border-top:1px solid var(--line-dark);padding:36px 0 44px;font-size:14px}
.footer-inner{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
footer .brand{color:var(--on-dark)}
.footer-links{display:flex;flex-wrap:wrap;gap:4px 28px}
.footer-links a{min-height:44px;display:inline-flex;align-items:center}
.footer-links a:hover,.footer-langs a:hover{color:var(--white)}
.footer-langs{display:flex;flex-wrap:wrap;gap:4px 22px;flex-basis:100%;order:3;padding-top:12px;border-top:1px solid var(--line-dark)}
.footer-langs a{min-height:44px;display:inline-flex;align-items:center}
.footer-langs a[aria-current]{color:var(--on-dark)}
.footer-inner > div:last-child{order:4}

/* ─── Careers ─── */
.hero.compact{min-height:0;padding:208px 0 96px}
.hero-plain{position:relative;width:100%}
.hero-actions.centered{justify-content:center}

/* ─── Industry hero photo (restaurants, F1b 6-nov-2026) ───
   Full-bleed photo background + left-to-right dark gradient so a left-aligned copy block (~55%
   of .wrap on desktop) stays AA-readable while the barista's face/hands/cup on the right stay
   uncovered. Scoped under .hero-photo only — every other .hero/.hero.compact page (home, careers,
   examples) keeps its koala-mark background untouched. */
.hero-photo{background:var(--ink)}
.hero-photo .hero-art{display:none}
.hero-photo .hero-bg{position:absolute;inset:0;overflow:hidden}
.hero-photo .hero-bg picture,.hero-photo .hero-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:76% 38%}
.hero-photo .hero-bg::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(10,10,10,.90) 0%,rgba(10,10,10,.82) 30%,rgba(10,10,10,.52) 50%,rgba(10,10,10,.14) 68%,transparent 84%);
}
.hero-photo .hero-grid{position:relative;display:block;max-width:600px}
.hero-photo .label{color:var(--on-dark-muted)}
.hero-tagline{font-size:clamp(30px,4.4vw,54px);font-weight:300;letter-spacing:-.02em;line-height:1.14;color:var(--white);margin:0 0 18px;text-wrap:balance}
.hero-photo h1{font-size:clamp(19px,2vw,24px);font-weight:500;letter-spacing:0;line-height:1.4;color:var(--on-dark-muted);margin-bottom:30px;text-wrap:balance}
.hero-photo h1 em{font-style:normal;color:var(--on-dark)}
.industry-lead{padding:64px 0 0;max-width:820px}
.industry-lead p{font-size:19px;line-height:1.6;color:var(--muted)}

/* ─── Scenes (F1d, 6-nov-2026): an optional two-photo row between #how and #faq, for an industry
   page whose copy dict carries a `scenes` list (fine dining, venues) — gen.py renders nothing here
   for a page without one (restaurants). Same rounded-card language as .demo-stage. */
.scenes{padding:8px 0 64px}
.scene-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.scene{display:flex;flex-direction:column;gap:12px;margin:0}
.scene picture,.scene img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:20px}
.scene figcaption{font-size:14px;line-height:1.4;color:var(--muted)}
@media (max-width:767px){
  .scene-grid{grid-template-columns:1fr;gap:16px}
}
.lead-ink{font-size:19px;line-height:1.5;color:var(--muted);max-width:620px;margin:24px auto 36px}

/* ─── Demos (F1c, 6-nov-2026): three looping mock-UI cards right after the industry hero, before
   #helps — "examples at the very top, not only chatbots" (Miguel's review of the live page). Pure
   HTML/CSS loops (inventory, morning summary) + the reused chat-replay widget, compacted. Paused
   off-screen by assets/demos.js; prefers-reduced-motion freezes every card on its final frame. */
.demos{padding:56px 0 104px}
.demos + #helps{padding-top:64px}
.demos .head{margin-bottom:40px}
.demo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.demo{display:flex;flex-direction:column;gap:14px;min-width:0}   /* flex/grid items default to min-width:auto — without this, a long unbreakable run anywhere inside (a nowrap label, a button) grows the whole card past its column/basis */
.demo-stage{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:20px;padding:20px;min-height:264px;overflow:hidden}
.demo-caption{font-size:14px;line-height:1.4;color:var(--muted)}
.demo-chat .ex-chat{margin:0;padding:16px}
.demo-chat .m{font-size:14px;padding:9px 13px}
.demo-chat .ex-thread{gap:8px}

.tag{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:2px 10px;white-space:nowrap}
.demo-stage.paused *{animation-play-state:paused}

/* ─── WhatsApp-looking conversation (S1, ruling 57, 7-nov-2026): a business-profile header,
   grey bubbles for the customer (left) and green for the business's own account (right, same side
   WhatsApp Business shows your own sent messages), a timestamp + read ticks inside the bubble like
   the real app. Deliberately uses WhatsApp's own colors, not the site's palette, the way a mockup
   of another app's screen always borrows that app's chrome — the outer card (.ex-chat/.demo-chat)
   keeps the site's own radius/spacing/panel tokens. */
.wa-head{display:flex;align-items:center;gap:10px;padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid var(--line);min-width:0}
.wa-avatar{flex:0 0 auto;width:30px;height:30px;border-radius:50%;background:var(--accent-ink);color:var(--white);display:grid;place-items:center;font-size:13px;font-weight:600}
.wa-id{display:flex;flex-direction:column;flex:1 1 auto;min-width:0;gap:1px}
.wa-name{font-size:13px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wa-sub{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wa-head .tag{flex:0 0 auto}
.wa-thread{background:#e9e2d4;margin:0 -16px -16px;padding:14px 12px;border-radius:0 0 20px 20px}
.wa .m{max-width:84%}
.wa .m.c{align-self:flex-start;background:var(--white);color:#13171a;border-bottom-left-radius:6px;border-bottom-right-radius:16px}
.wa .m.a{align-self:flex-end;background:#d9f2c4;color:#13171a;border-bottom-right-radius:6px;border-bottom-left-radius:16px}
.wa-bubble{display:block;word-wrap:break-word}
.wa-meta{float:right;margin:4px 0 -2px 10px;font-size:11px;color:rgba(19,23,26,.48);display:inline-flex;align-items:center;gap:3px;white-space:nowrap}
.wa-ticks{color:#4fc3f7;font-weight:700;letter-spacing:-1px}

/* ─── Dashboard card: 3-4 KPI tiles + one chart, plausible sample data (dataviz skill: one axis,
   single hue, no legend needed for one series, native <title> as the hover layer). ─── */
.demo-dash{display:flex;flex-direction:column}
.demo-dash .tag{align-self:flex-end;margin-bottom:10px}
.kpi-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.kpi-tile{display:flex;flex-direction:column;gap:2px;padding:10px 12px;background:var(--white);border:1px solid var(--line);border-radius:14px}
.kpi-label{font-size:11px;color:var(--muted);line-height:1.3}
.kpi-value{font-size:20px;font-weight:600;color:var(--text);font-family:'JetBrains Mono',ui-monospace,monospace}
.kpi-delta{font-size:12px;font-weight:600}
.kpi-delta.up{color:var(--accent-ink)}
.kpi-delta.down{color:var(--amber)}
.chart-wrap{margin-top:14px}
.chart-title{font-size:12px;color:var(--muted);margin-bottom:6px}
.chart-svg{display:block;width:100%;height:auto}
.chart-bar{fill:var(--accent-ink)}
.chart-axis{font-size:9px;fill:var(--muted);font-family:'JetBrains Mono',ui-monospace,monospace}

/* K2 step 5 (ruling 60/61, 7-nov-2026): the bars grow from the baseline the first time the chart
   scrolls into view — demos.js adds .grown once (IntersectionObserver, one-shot, no framework) to
   .chart-wrap. transform-box:fill-box lets each SVG <path> scale from its own bottom edge rather
   than the SVG's (0,0) origin. Only when .js is set on <html> (progressive enhancement, same
   pattern as .reveal below): without JS, or with reduced motion, the chart simply renders full. */
.js .chart-bar{transform-box:fill-box;transform-origin:bottom;transform:scaleY(0);transition:transform .7s var(--ease-emphasized)}
.js .chart-wrap.grown .chart-bar{transform:scaleY(1)}
.js .chart-bar:nth-of-type(1){transition-delay:40ms}
.js .chart-bar:nth-of-type(2){transition-delay:90ms}
.js .chart-bar:nth-of-type(3){transition-delay:140ms}
.js .chart-bar:nth-of-type(4){transition-delay:190ms}
.js .chart-bar:nth-of-type(5){transition-delay:240ms}
.js .chart-bar:nth-of-type(6){transition-delay:290ms}
.js .chart-bar:nth-of-type(7){transition-delay:340ms}
/* No 8th+ delay rule, on purpose: every chart shipped so far uses 7 categories (days of the
   week, README.md's documented shape). An 8th+ bar still grows — just with no extra stagger,
   not a bug if some future chart needs more columns. */

/* ─── Phone notification/flow (K2 step 5): 3 stacked lock-screen-style notifications, newest on
   top, a short status flow for the trade (order placed -> being prepared -> ready). Static; the
   whole stack fades in with .reveal like any other section. ─── */
.demo-notif{display:flex;flex-direction:column}
.demo-notif .tag{align-self:flex-end;margin-bottom:10px}
.notif-stack{display:flex;flex-direction:column;gap:8px}
.notif-item{background:var(--white);border:1px solid var(--line);border-radius:14px;padding:10px 12px;display:grid;grid-template-columns:1fr auto;gap:0 8px}
.notif-app{font-size:11px;font-weight:600;color:var(--text);text-transform:uppercase;letter-spacing:.02em}
.notif-time{font-size:11px;color:var(--muted);text-align:right}
.notif-title{grid-column:1/-1;font-size:13px;font-weight:600;color:var(--text);margin:3px 0 0}
.notif-body{grid-column:1/-1;font-size:13px;color:var(--muted);margin:2px 0 0;line-height:1.35}

/* ─── Order/booking form (K2 step 5): a static mockup screen, realistic fields for the trade,
   pre-filled with a plausible illustrative value — no <input> (nothing here is interactive). ─── */
.demo-form{display:flex;flex-direction:column}
.demo-form .tag{align-self:flex-end;margin-bottom:10px}
.form-title{font-size:13px;font-weight:600;color:var(--text);margin:0 0 10px}
.form-grid{display:flex;flex-direction:column;gap:8px}
.form-field{display:flex;flex-direction:column;gap:2px;padding:8px 12px;background:var(--white);border:1px solid var(--line);border-radius:12px}
.form-label{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.form-value{font-size:13px;color:var(--text)}
.form-submit{margin-top:12px;align-self:flex-start;display:inline-flex;min-height:36px;align-items:center;padding:0 16px;border-radius:999px;background:var(--accent-ink);color:var(--white);font-size:13px;font-weight:500}

/* ─── Weekly report card (K2 step 5): 3 numbers + 2 closing sentences, the kind of note an owner
   reads once a week — not a live dashboard (the KPI/chart card already covers that). ─── */
.demo-report{display:flex;flex-direction:column}
.demo-report .tag{align-self:flex-end;margin-bottom:10px}
.report-headline{font-size:13px;font-weight:600;color:var(--text);margin:0 0 12px}
.report-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:12px}
.report-num{display:flex;flex-direction:column;gap:2px;padding:10px 8px;background:var(--white);border:1px solid var(--line);border-radius:12px;text-align:center}
.report-value{font-size:18px;font-weight:600;color:var(--text);font-family:'JetBrains Mono',ui-monospace,monospace}
.report-label{font-size:10px;color:var(--muted);line-height:1.25}
.report-text{font-size:13px;color:var(--muted);line-height:1.4;display:flex;flex-direction:column;gap:4px}
.report-text p{margin:0}

/* ─── Interlink chips (K2 step 6, ruling 60/61): every industry's #demos section ends with a row
   of chips to every industry page (I.INDUSTRY_SLUGS), so a visitor can browse the rest from
   any one example. ─── */
.interlink{margin-top:32px;padding-top:28px;border-top:1px solid var(--line)}
.interlink-label{font-size:13px;font-weight:500;color:var(--muted);margin-bottom:14px}
.interlink-chips{display:flex;flex-wrap:wrap;gap:8px}
.chip-link{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--line);font-size:13px;color:var(--text);transition:border-color var(--motion-short) var(--ease-emphasized),background var(--motion-short) var(--ease-emphasized)}
.chip-link svg{width:15px;height:15px;color:var(--muted);flex:0 0 auto}
.chip-link:hover{border-color:var(--ink)}
.chip-link.current{background:var(--ink);color:var(--on-dark);border-color:var(--ink)}
.chip-link.current svg{color:var(--on-dark)}

/* K2 step 5 (ruling 60/61): the lucide icon that sits beside the #demos section label — 20-24px,
   trace 1.5px, matches the nav dropdown's icon treatment (BRAND.md §6). */
.demos-icon{width:20px;height:20px;vertical-align:-4px;margin-right:6px;color:var(--muted)}

/* ─── Operational table: reservations/appointments/events, one real <table>, contained horizontal
   scroll at narrow widths (same pattern as .demo-grid's own mobile carousel — never the page). ─── */
.demo-tbl{display:flex;flex-direction:column}
.demo-tbl .tag{align-self:flex-end;margin-bottom:10px}
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.op-table{width:100%;min-width:420px;border-collapse:collapse;font-size:13px}
.op-table th,.op-table td{text-align:left;padding:7px 10px;white-space:nowrap}
.op-table thead th{font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;border-bottom:1px solid var(--line)}
.op-table tbody tr:not(:last-child) td{border-bottom:1px solid var(--line)}
.op-status.warn{color:var(--amber);font-weight:600}

/* ─── Integrations page (K2 step 7, ruling 60/61, 7-nov-2026): the industries x category matrix
   and the per-industry sections — both plain <table>, same op-table language as the demo cards. ─── */
#matrix{padding-bottom:0}
.int-matrix{width:100%;min-width:760px;border-collapse:collapse;font-size:13px}
.int-matrix th,.int-matrix td{text-align:center;padding:9px 10px;white-space:nowrap}
.int-matrix thead th{font-size:11px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.02em;border-bottom:1px solid var(--line);vertical-align:bottom}
.int-matrix tbody th{text-align:left;font-weight:500;color:var(--text);display:flex;align-items:center;gap:8px;white-space:nowrap}
.int-matrix tbody th svg{width:16px;height:16px;color:var(--muted);flex:0 0 auto}
.int-matrix tbody tr:not(:last-child) td,.int-matrix tbody tr:not(:last-child) th{border-bottom:1px solid var(--line)}
.int-matrix tbody td{color:var(--muted);font-family:'JetBrains Mono',ui-monospace,monospace}
.int-source{margin-top:28px;font-size:12px;color:var(--muted)}
.int-section{padding:40px 0;border-top:1px solid var(--line)}
#by-industry .int-section:first-of-type{border-top:none;padding-top:8px}
.int-section h3{display:flex;align-items:center;gap:8px;font-size:22px;margin-bottom:16px}
.int-section h3 svg{width:20px;height:20px;color:var(--muted)}
.int-table{font-size:13px}
.status-chip{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;border-radius:999px;padding:3px 10px;white-space:nowrap;border:1px solid var(--line)}
.status-chip.prod{background:var(--accent-ink);color:var(--white);border-color:var(--accent-ink)}
.status-chip.tested{color:var(--accent-ink);border-color:var(--accent-ink)}
.status-chip.possible{color:var(--muted)}

/* K2 step 7: the compact "Integrations for <industry>" teaser each industry page carries. */
.int-teaser{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:0 0 20px}
.int-teaser li{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px;border-radius:999px;background:var(--white);border:1px solid var(--line);font-size:14px}

.roles{margin-top:56px}
.head + .roles{margin-top:0}
.roles-label{font-size:14px;font-weight:500;color:var(--muted);padding-bottom:16px}
.role{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1.35fr) auto;gap:48px;align-items:center;padding:32px 0;border-top:1px solid var(--line);transition:background var(--motion-short) var(--ease-emphasized)}
.roles .role:last-child{border-bottom:1px solid var(--line)}
.role h3{font-size:30px;line-height:1.14}
.role .meta,.role-meta{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:13px;color:var(--muted);margin-top:12px}
.role p{font-size:16px;color:var(--muted);max-width:46ch}
.role-go{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:15px;font-weight:500;white-space:nowrap}
.role-go svg{width:18px;height:18px;transition:transform var(--motion-short) var(--ease-emphasized)}
.role:hover .role-go{color:var(--accent-ink)}
.role:hover .role-go svg{transform:translateX(4px)}
.note{font-size:15px;color:var(--muted);margin-top:24px}
.note + .note{margin-top:6px}
/* Founder block — careers index and co-founder role pages only (Miguel, 6-Nov-2026) */
.founder{display:flex;align-items:center;gap:14px;margin-top:28px}
.founder-avatar{flex:0 0 auto;width:40px;height:40px;border-radius:50%;overflow:hidden;background:var(--ink);display:flex;align-items:center;justify-content:center}
.founder-avatar svg{width:24px;height:24px;color:var(--accent)}
.founder-avatar-img{width:100%;height:100%;object-fit:cover}
.founder p{font-size:14px;color:var(--muted);line-height:1.4}
.founder a{text-decoration:underline;text-underline-offset:2px;color:var(--accent-ink)}
.founder a:hover{color:var(--ink)}
.terms{padding:128px 0}
.terms .own{margin-top:0}

/* ─── Role page ─── */
.back{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-bottom:28px;font-size:15px;color:var(--on-dark-muted)}
.back svg{width:18px;height:18px;transform:rotate(180deg)}
.back:hover{color:var(--white)}
.role-meta{color:var(--on-dark-muted);margin-top:24px;font-size:14px}
.role-page{padding:96px 0 128px}
.role-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(280px,1fr);gap:80px;align-items:start}
.prose .intro{font-size:clamp(22px,2.3vw,30px);font-weight:300;line-height:1.3;letter-spacing:-.02em;max-width:28em;text-wrap:balance}
.role-note{color:var(--muted);font-size:14px;line-height:1.5;margin-top:14px;max-width:62ch}
.fit-note{color:var(--text);font-size:16px;line-height:1.5;margin:-8px 0 18px;max-width:62ch}
.prose h2{font-size:26px;font-weight:400;letter-spacing:-.02em;margin:56px 0 20px}
.prose p{max-width:62ch}
.prose h2 + p{color:var(--muted)}
.prose ul{display:grid;gap:14px}
.prose li{position:relative;padding-left:24px;color:var(--muted);max-width:62ch}
.prose li::before{content:'';position:absolute;left:2px;top:.68em;width:6px;height:6px;border-radius:50%;background:var(--accent-ink)}
.side{position:sticky;top:104px;background:var(--panel);border-radius:24px;padding:32px}
.side dl{display:grid;gap:18px;margin-bottom:28px}
.side dt{font-size:13px;color:var(--muted);margin-bottom:2px}
.side dd{font-size:16px}
.side .btn{width:100%}
.side .mail{display:flex;align-items:center;justify-content:center;min-height:44px;margin-top:6px;font-size:15px;color:var(--muted)}
.side .mail:hover{color:var(--accent-ink)}
.side .fine{font-size:13px;line-height:1.5;color:var(--muted);margin-top:12px}

/* ─── Examples: a replayable conversation, who does what, and the checks ─── */
.after-cards{margin-top:28px}
.examples{padding:112px 0 96px}
.ex{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:72px;align-items:start;padding:72px 0;border-top:1px solid var(--line)}
.ex:first-child{border-top:0;padding-top:0}
.ex:nth-child(even) .ex-chat{order:2}
.ex-chat{background:var(--panel);border-radius:24px;padding:20px}
.ex-bar{display:flex;align-items:center;gap:12px;padding:4px 4px 16px;font-size:13px;color:var(--muted)}
.ex-chan{font-weight:600;color:var(--text)}
.ex-chan::before{content:'';display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--accent-ink);margin-right:8px}
.ex-tag{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12px}
.ex-play{margin-left:auto;min-height:44px;padding:0 18px;border-radius:999px;border:1px solid rgba(20,18,31,.28);background:transparent;color:var(--text);font:inherit;font-size:14px;font-weight:500;cursor:pointer}
.ex-play:hover{border-color:var(--ink)}
.ex-thread{display:flex;flex-direction:column;gap:10px}
.m{max-width:84%;padding:11px 15px;border-radius:18px;font-size:15px;line-height:1.45;transition:opacity var(--motion-medium) var(--ease-emphasized),transform var(--motion-medium) var(--ease-emphasized)}
.m.c{align-self:flex-end;background:var(--ink);color:var(--on-dark);border-bottom-right-radius:6px}
.m.a{align-self:flex-start;background:var(--white);border-bottom-left-radius:6px}
.m.p{align-self:flex-start;background:var(--white);border:1px solid var(--accent-ink);border-bottom-left-radius:6px}
.m .from{display:block;font-size:12px;font-weight:600;color:var(--accent-ink);margin-bottom:2px}
.m.sys{align-self:center;max-width:92%;padding:4px 10px;background:none;text-align:center;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12px;color:var(--muted)}
.m.sys::before{content:'↳ '}
.ex.playing .m.wait{opacity:0;transform:translateY(8px)}
.ex-side h2{font-size:clamp(28px,3vw,40px);margin-bottom:16px}
.ex-lead{font-size:18px;color:var(--muted);max-width:44ch}
.ex-side h3{font-size:14px;font-weight:500;letter-spacing:.01em;line-height:1.3;color:var(--muted);margin:40px 0 14px}
.flow{display:flex;flex-wrap:wrap;gap:10px 30px}
.flow li{position:relative;min-height:44px;padding:0 14px;border-radius:12px;border:1px solid var(--line);display:inline-flex;align-items:center;font-size:15px;transition:background var(--motion-short) var(--ease-emphasized),color var(--motion-short) var(--ease-emphasized),border-color var(--motion-short) var(--ease-emphasized)}
.flow li:not(:last-child)::after{content:'→';position:absolute;right:-23px;color:var(--dim)}
.flow li.on{background:var(--ink);border-color:var(--ink);color:var(--on-dark)}
.checks{display:grid;gap:10px}
.checks li{position:relative;padding-left:28px;font-size:16px;color:var(--text);max-width:52ch}
.checks li::before{content:'';position:absolute;left:2px;top:.42em;width:14px;height:8px;border-left:2px solid var(--accent-ink);border-bottom:2px solid var(--accent-ink);transform:rotate(-45deg) scale(.8)}
.examples + .statement{padding-top:0}
.own-asst .head{margin-bottom:36px}
.own-asst .ex-lead{margin-top:20px;max-width:60ch}
.own-asst .flow li{background:var(--white)}
.sheet-sum{margin:44px 0 16px;font-size:18px}
.sheet-sum strong{font-weight:600}
.sheet{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 56px;border-top:1px solid var(--line)}
.sheet li{display:flex;align-items:baseline;justify-content:space-between;gap:20px;padding:14px 0;border-bottom:1px solid var(--line);font-size:15px}
.sheet em{font-style:normal;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:12px;white-space:nowrap;color:var(--accent-ink)}
.sheet li.ko em{color:#b3261e}
.sheet-try{margin-top:28px}
.sheet-try[hidden]{display:none}

/* ─── Visitor assistant (shown only when the server behind the site says it is on) ─── */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.asst{position:fixed;right:24px;bottom:24px;z-index:90;display:flex;flex-direction:column;align-items:flex-end;gap:12px;pointer-events:none}
.asst > *{pointer-events:auto}
.asst[hidden],.asst-panel[hidden]{display:none}
.asst-open{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 22px 0 16px;border-radius:999px;border:1px solid rgba(255,255,255,.2);background:var(--ink);color:var(--on-dark);font:inherit;font-size:15px;font-weight:500;cursor:pointer;box-shadow:0 10px 30px rgba(10,10,10,.28)}
.asst-open svg{width:24px;height:24px;color:var(--accent)}
.asst-open:hover{background:#2a2838}
.asst-panel{width:min(384px,calc(100vw - 24px));max-height:min(620px,calc(100svh - 176px));display:flex;flex-direction:column;background:var(--white);color:var(--text);border-radius:22px;border:1px solid var(--line);box-shadow:0 24px 60px rgba(10,10,10,.28);overflow:hidden}
.asst-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 6px 6px 18px;background:var(--ink);color:var(--on-dark);font-size:14px}
.asst-head-actions{display:flex;align-items:center;gap:2px;flex:none}
.asst-close{width:44px;height:44px;border:0;background:none;color:inherit;font-size:24px;line-height:1;cursor:pointer;border-radius:999px}
.asst-close:hover{background:rgba(255,255,255,.12)}
.asst-mute{width:44px;height:44px;border:0;background:none;color:inherit;cursor:pointer;border-radius:999px;display:flex;align-items:center;justify-content:center}
.asst-mute svg{width:20px;height:20px}
.asst-mute:hover{background:rgba(255,255,255,.12)}
.asst-mute[hidden]{display:none}
.asst-mute[aria-pressed="true"]{color:var(--muted)}
.asst-thread{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;min-height:160px}
.asst-thread .m{max-width:88%;white-space:pre-wrap;overflow-wrap:anywhere}
.asst-thread .m.a{background:var(--panel)}
.asst-thread .m.typing{color:var(--muted)}
.asst-status{min-height:18px;margin:0;padding:0 16px;font-size:12px;line-height:18px;color:var(--accent-ink)}
.asst-status.warn{margin:4px 12px 0;padding:6px 10px;border-radius:10px;background:#fff4e5;color:#7a3d00;line-height:16px}
.asst-form{display:flex;gap:8px;align-items:flex-end;padding:10px 12px;border-top:1px solid var(--line)}
.asst-form textarea{flex:1;min-width:0;min-height:44px;max-height:120px;resize:none;border:1px solid rgba(20,18,31,.28);border-radius:14px;padding:10px 12px;font:inherit;font-size:16px;line-height:1.4;color:var(--text);background:var(--white)}
.asst-form .btn{min-height:44px;padding:0 18px;flex:none}
.asst-form[aria-disabled="true"]{opacity:.5}
.asst-mic{width:44px;height:44px;flex:none;border:1px solid rgba(20,18,31,.28);border-radius:999px;background:var(--white);color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center;touch-action:none}
.asst-mic svg{width:20px;height:20px}
.asst-mic[hidden]{display:none}
.asst-mic.listening{background:#b3261e;border-color:#b3261e;color:#fff}
.asst-note{padding:0 16px 12px;font-size:12px;line-height:1.4;color:var(--muted)}
.asst-thread .m.s{background:var(--ink);color:var(--on-dark)}
.asst-thread .m.s b{display:block;font-size:12px;font-weight:600;opacity:.75;margin-bottom:2px}
.asst-thread .m.info{background:none;border:1px dashed var(--line);color:var(--text);font-size:14px}
.asst-contact{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--line)}
.asst-contact[hidden],.asst-human[hidden]{display:none}
.asst-contact input{flex:1;min-height:44px;border:1px solid rgba(20,18,31,.28);border-radius:14px;padding:0 12px;font:inherit;font-size:16px;color:var(--text);background:var(--white)}
.asst-contact .btn{min-height:44px;padding:0 18px}
.asst-foot{padding:0 12px 8px}
.asst-human{min-height:44px;width:100%;border:1px solid var(--line);border-radius:999px;background:var(--white);color:var(--text);font:inherit;font-size:15px;cursor:pointer}
.asst-human:hover{background:var(--panel)}

/* ─── Reveal (only when JS is on) ─── */
.js .reveal{opacity:0;transform:translateY(14px);transition:opacity var(--motion-medium) var(--ease-emphasized),transform var(--motion-medium) var(--ease-emphasized)}
.js .reveal.visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .reveal{opacity:1;transform:none;transition:none}
  .btn,.nav-links a,.link,.m,.flow li{transition:none}
}

/* ─── Tablet ─── */
@media (max-width:1279px){
  .chip{display:none}
  .nav-inner{gap:28px}
  .nav-links{gap:22px}
}
@media (max-width:1023px){
  .nav-links{display:none}
  .menu{display:block}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:56px}
  .steps::before{display:none}
  .step{border-top:1px solid var(--line)}
  .step::before{top:-6px}
  .own{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cards{grid-template-columns:minmax(0,1fr)}
  .card > div{margin-top:48px}
  .role{grid-template-columns:minmax(0,1fr);gap:10px;padding:28px 0}
  .ex{grid-template-columns:minmax(0,1fr);gap:36px;padding:56px 0}
  .sheet{grid-template-columns:minmax(0,1fr)}
  .ex:nth-child(even) .ex-chat{order:0}
  .role-grid{grid-template-columns:minmax(0,1fr);gap:56px}
  .side{position:static}
  /* Demos (F1c): a horizontal scroll-snap row instead of a 3-up grid once it no longer fits */
  .demo-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:16px;padding-bottom:6px;margin:0 calc(var(--pad) * -1);padding-left:var(--pad);padding-right:var(--pad)}
  .demo{flex:0 0 82%;scroll-snap-align:start}
}

/* ─── Mobile ─── */
@media (max-width:767px){
  :root{--pad:24px}
  body{font-size:16px}
  section{padding:80px 0}
  .nav-inner{height:64px;gap:12px}
  .nav-tools .btn-light{display:none}
  .hero{padding:128px 0 56px;min-height:0}
  .hero-grid{grid-template-columns:minmax(0,1fr);gap:32px}
  .hero-art svg{right:-34%;top:auto;bottom:22%;width:118vw}
  .hero-side p{font-size:17px}
  .hero-actions .btn{flex:1 1 auto}
  .head{margin-bottom:40px}
  .statement p{text-align:left}
  .card{padding:28px;border-radius:20px}
  .stays{padding:28px}
  .card > div{margin-top:36px}
  .card h3{font-size:26px}
  .steps{grid-template-columns:minmax(0,1fr);row-gap:40px}
  .step h3{font-size:28px}
  .step p{max-width:none}
  .platform{padding:96px 0 80px}
  .own{grid-template-columns:minmax(0,1fr);gap:28px;margin-top:72px}
  .pills{justify-content:flex-start}
  .head.center{text-align:left}
  .company{grid-template-columns:minmax(0,1fr);gap:8px}
  .contact{padding:96px 0;text-align:left}
  .contact h2{margin-left:0}
  .footer-inner{flex-direction:column;align-items:flex-start;gap:12px}
  .footer-langs{flex-basis:auto;width:100%}
  .hero.compact{padding:128px 0 56px}
  .hero-actions.centered{justify-content:flex-start}
  .lead-ink{margin-left:0;font-size:17px}
  .hero-photo .hero-bg img{object-position:75% 50%}
  .hero-photo .hero-bg::after{background:linear-gradient(180deg,rgba(10,10,10,.58) 0%,rgba(10,10,10,.74) 42%,rgba(10,10,10,.95) 78%,rgba(10,10,10,.97) 100%)}
  .hero-photo .hero-grid{max-width:none}
  .hero-tagline{font-size:28px}
  .hero-photo h1{font-size:17px}
  .industry-lead{padding:40px 0 0}
  .industry-lead p{font-size:17px}
  .role h3{font-size:26px}
  .terms{padding:80px 0}
  .role-page{padding:56px 0 80px}
  .prose h2{margin-top:44px}
  .side{padding:24px;border-radius:20px}
  .contact-note{margin-left:0}
  .asst{right:12px;bottom:12px;left:12px}
  .asst-panel{width:100%;max-height:calc(100svh - 150px)}
  footer{padding-bottom:96px}
  .examples{padding:64px 0 56px}
  .ex-chat{padding:14px;border-radius:20px;margin:0 -6px}
  .m{max-width:90%}
  .ex-tag{display:none}
  .ex-play{padding:0 16px;font-size:15px}
  .wa-head .tag{display:none}   /* same reason as .ex-tag above: make room for the business name */
  .wa-head .ex-play{padding:0 12px;font-size:13px;min-height:36px}
  /* who-does-what diagram: stack vertically with a down arrow instead of wrapping a
     left-to-right row, where the arrows end up pointing off the edge of the screen */
  .flow{flex-direction:column;align-items:stretch;gap:32px 0}
  .flow li{justify-content:center;text-align:center;width:100%}
  .flow li:not(:last-child)::after{content:'↓';right:auto;left:50%;top:100%;transform:translateX(-50%);margin-top:4px}
  /* Demos (F1c) */
  .demos{padding:40px 0 64px}
  .demos + #helps{padding-top:40px}
  .demo{flex:0 0 88%}
  .demo-stage{min-height:0;padding:16px}
  .kpi-grid{gap:8px}
  .kpi-value{font-size:18px}
  .op-table{min-width:380px}
}

/* ─── koa-todo e53a8395: on a phone the restaurants hero photo was too dark and cropped, the
   latte-art cup out of frame. A taller hero shows the photo's top ~55% largely unobscured (the
   barista's face and cup both stay in frame); the gradient and copy concentrate in the bottom ~45%,
   kept at AA contrast (checked: white text on the darkest gradient stop is well over 4.5:1). ─── */
@media (max-width:640px){
  .hero.compact.hero-photo{min-height:86svh}   /* beats .hero.compact{min-height:0}'s equal-but-earlier specificity */
  .hero-photo .hero-bg img{object-position:72% 70%}
  .hero-photo .hero-bg::after{background:linear-gradient(180deg,rgba(10,10,10,0) 0%,rgba(10,10,10,.12) 46%,rgba(10,10,10,.74) 66%,rgba(10,10,10,.95) 84%,rgba(10,10,10,.97) 100%)}
}