/* Phase 1: tokens.css loads first; legacy :root vars below now alias the
   token system where values match. Brand-coloured legacy vars (--accent,
   --bg-dark, --gold) keep their current literal values until the Phase 1.x
   Crow-mirror brand flip retires them via the header/footer/tile refactors. */
@import url('styles/tokens.css?v=19');

:root{
  /* Surface palette — aliased to neutral tokens (same rendered colour) */
  --bg:           var(--color-paper);           /* was #ffffff — exact match */
  --bg-alt:       #f5f6f8;                       /* legacy gray, slightly different from --color-neutral-100 #f4f4f4 — keep for now */
  --line:         var(--color-border);          /* was #e6e8ec — close to --color-neutral-300 #c4c4c4? keep legacy below */

  /* Legacy brand values — NOT yet migrated to Crow-mirror tokens.
     These keep the current site blue/navy palette intact while the
     header/footer/tile refactors land in this PR. Phase 1.x will retire. */
  --bg-dark:      #000000;       /* Phase-1.x flip: was #0c1f3d navy */
  --ink:          #0e1116;
  --ink-2:        #3a3f47;
  --muted:        #4b5563;       /* WCAG AA contrast — bumped from #6b7280 (4.47:1) to #4b5563 (7.0:1) on white */
  --accent:       var(--color-ink);  /* Phase-1.x flip: was #1e40af blue */
  --accent-hover: #1f1f1f;       /* Phase-1.x flip: was #1e3a8a blue */
  --gold:         #4b5563;       /* Phase-1.x flip: was #3b82f6 blue, retired */

  /* Bundle D additions (2026-05-31) — full-bleed card vocabulary.
     --paper-soft = canvas behind transparent product PNGs (closest token
     match: --color-neutral-100 #f4f4f4). --hairline = subtle card border
     (--line at #c4c4c4 is too strong for edge-to-edge cards on white bg).
     --text-quiet = overlay meta line; alias of --color-text-subtle. */
  --paper-soft:   var(--color-neutral-100);
  --hairline:     rgba(0,0,0,0.08);
  --text-quiet:   var(--color-text-subtle);

  --radius:       14px;                          /* legacy — Crow defaults to 0 (--radius-none) */
  --shadow-sm:    0 1px 2px rgba(14,17,22,.04), 0 1px 3px rgba(14,17,22,.06);
  --shadow-md:    0 8px 24px rgba(14,17,22,.08);
  --shadow-lg:    0 24px 60px rgba(14,17,22,.18);
  --container:    1240px;
  --t:            .25s cubic-bezier(.2,.7,.2,1);  /* matches --duration-base + --ease-standard token semantics */
}

*{box-sizing:border-box}
/* Hotfix 2026-05-18: belt-and-braces guard against any future element
   pushing past the viewport on mobile. Root cause is fixed below (header
   logo + cta-banner decoration); this is the defensive line. */
/* overflow-x:clip (not :hidden) so html/body don't become scroll containers
   and break position:sticky for descendants. Both prevent horizontal
   scrolling, but clip preserves sticky semantics. Day-4-batch item 8 fix. */
html,body{margin:0;padding:0;overflow-x:clip}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Inter","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:16px;
  line-height:1.55;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  /* Phase 1.6 fix 2 — kill the mobile-tap blue flash. Default WebKit
     tap highlight is a translucent system blue that lingers ~300ms
     after touch and reads as "the button broke and flashed blue" on
     mobile. We provide explicit :hover/:active states everywhere; the
     UA highlight is now redundant. */
  -webkit-tap-highlight-color:transparent;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none}

.container{max-width:var(--container);margin:0 auto;padding:0 28px}

/* ---------- TOP BAR ---------- */
.topbar{
  background:var(--bg-dark);
  color:#cfd2d8;
  font-size:13px;
  letter-spacing:.02em;
}
.topbar .container{display:flex;justify-content:space-between;align-items:center;height:38px}
.topbar a{color:#cfd2d8;margin-left:18px;transition:color var(--t)}
.topbar a:hover{color:#fff}

/* ---------- HEADER ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(140%) blur(12px);
  border-bottom:1px solid var(--line);
}
.site-header .container{display:flex;align-items:center;height:78px;gap:32px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.06em;font-size:22px}
.brand .logo{
  width:38px;height:38px;border-radius:8px;
  background:var(--color-ink);
  display:grid;place-items:center;color:#fff;font-weight:800;letter-spacing:0;font-size:15px;
  box-shadow:inset 0 -2px 0 #000;
}
.brand .logo-img{
  width:42px;height:42px;object-fit:contain;display:block;
}
footer .brand .logo-img{filter:brightness(1.15)}
.brand strong{color:var(--ink)}
.brand span{color:var(--accent);font-weight:800}
.nav{display:flex;gap:6px;margin-left:auto;align-items:center}
.nav a{
  padding:10px 14px;border-radius:8px;font-weight:500;font-size:15px;color:var(--ink-2);
  transition:background var(--t),color var(--t);
}
.nav a:hover{background:var(--bg-alt);color:var(--ink)}
.nav a.active{color:var(--ink);font-weight:600}
.nav-cta{
  margin-left:8px;
  background:var(--accent);color:#fff !important;
  padding:10px 18px;border-radius:8px;font-weight:600;
  transition:background var(--t),transform var(--t);
}
.nav-cta:hover{background:var(--accent-hover) !important;transform:translateY(-1px)}

/* ---------- HERO ---------- */
.hero{
  position:relative;
  background:#000000;
  color:#fff;
  overflow:hidden;
}
.hero::before{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(transparent 95%, rgba(255,255,255,.04) 95%),
    linear-gradient(90deg, transparent 95%, rgba(255,255,255,.04) 95%);
  background-size:48px 48px;
  mask-image:radial-gradient(ellipse at 50% 30%, #000 30%, transparent 75%);
  pointer-events:none;
}
.hero-inner{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center;padding:96px 0 110px}
.hero h1{
  font-size:clamp(36px,5.2vw,68px);font-weight:var(--font-weight-heading);letter-spacing:-.02em;margin:0 0 22px;line-height:1.05;
}
.hero h1 em{font-style:normal;color:var(--accent);font-weight:var(--font-weight-heading)}
.hero p.lead{font-size:18px;color:#c9ccd2;max-width:560px;margin:0 0 26px;line-height:1.6}
.hero .pill{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);
  padding:7px 14px;border-radius:999px;font-size:13px;color:#e9ebef;margin-bottom:22px;
}
.hero .pill .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(0,0,0,.25)}
.hero .cta-row{display:flex;gap:14px;flex-wrap:wrap}
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 22px;border-radius:10px;font-weight:600;font-size:15px;
  transition:all var(--t);
}
.btn-primary{background:var(--accent);color:#fff}
/* Phase 1.6 fix 2 — :active explicit so the pressed state stays
   monochrome on touch devices (matches :hover, no browser-default blue). */
.btn-primary:hover,
.btn-primary:active{background:var(--accent-hover);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.2)}
.btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.05)}
.btn-light{background:#fff;color:var(--ink)}
.btn-light:hover{background:#f1f2f4}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:#000}

/* hero visual */
.hero-visual{position:relative;height:480px;display:grid;place-items:center}
.hero-visual .panel{
  position:absolute;border-radius:18px;
  background:#000000;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:var(--shadow-lg);
  padding:18px 22px;color:#e7e9ee;
}
.hero-visual .panel .label{font-size:11px;color:#9aa0aa;letter-spacing:.18em;text-transform:uppercase;margin-bottom:6px}
.hero-visual .panel .value{font-size:22px;font-weight:700}
.hero-visual .p1{top:6%;left:0;width:240px}
.hero-visual .p2{top:42%;right:-10px;width:230px}
.hero-visual .p3{bottom:6%;left:18%;width:260px}
.hero-visual .device{
  width:280px;height:280px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%, #1f1f1f, #000000 70%);
  display:grid;place-items:center;
  box-shadow:0 30px 80px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06);
}
.hero-visual .device .led{
  width:14px;height:14px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 6px rgba(0,0,0,.18), 0 0 24px rgba(0,0,0,.6);
  animation:pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{box-shadow:0 0 0 6px rgba(0,0,0,.18), 0 0 24px rgba(0,0,0,.5)}
  50%{box-shadow:0 0 0 12px rgba(0,0,0,.05), 0 0 36px rgba(0,0,0,.9)}
}

/* ---------- METRICS STRIP ---------- */
.strip{background:var(--bg-alt);border-bottom:1px solid var(--line)}
.strip-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding:36px 0}
.strip-grid .item{padding:0 28px;border-right:1px solid var(--line)}
.strip-grid .item:last-child{border-right:none}
.strip-grid .num{font-size:34px;font-weight:800;letter-spacing:-.02em;margin-bottom:4px}
.strip-grid .lbl{color:var(--muted);font-size:14px}

/* ---------- SECTIONS ---------- */
section{padding:96px 0}
.section-head{max-width:760px;margin:0 0 56px}
.eyebrow{
  display:inline-block;
  text-transform:uppercase;letter-spacing:.18em;font-size:12px;font-weight:600;
  color:var(--accent);margin-bottom:14px;
}
h2.section-title{font-size:clamp(28px,3.4vw,42px);font-weight:var(--font-weight-heading);letter-spacing:-.01em;margin:0 0 16px;line-height:1.15}
.section-sub{color:var(--muted);font-size:17px;line-height:1.65;margin:0}

/* ---------- CATEGORIES ---------- */
.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.cat-card{
  position:relative;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:28px;transition:transform var(--t),box-shadow var(--t),border-color var(--t);
  overflow:hidden;
}
.cat-card::after{
  content:"";position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--accent);
  transition:width var(--t);
}
.cat-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:#dadde2}
.cat-card:hover::after{width:100%}
.cat-card .icon{
  width:52px;height:52px;border-radius:12px;background:var(--bg-alt);
  display:grid;place-items:center;margin-bottom:18px;color:var(--accent);
}
.cat-card h3{margin:0 0 8px;font-size:20px;font-weight:var(--font-weight-heading)}
.cat-card p{color:var(--muted);margin:0 0 14px;font-size:15px}
.cat-card .count{font-size:13px;color:var(--ink-2);font-weight:600;display:flex;align-items:center;gap:6px}
.cat-card .count svg{transition:transform var(--t)}
.cat-card:hover .count svg{transform:translateX(4px)}

/* ---------- FEATURE BLOCK (split) ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.split.reverse{direction:rtl}.split.reverse > *{direction:ltr}
.split .visual{
  aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden;
  background:#000000;
  position:relative;box-shadow:var(--shadow-md);
}
.split .visual .glow{
  position:absolute;inset:auto;left:50%;top:50%;transform:translate(-50%,-50%);
  width:60%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(0,0,0,.35),transparent 60%);
  filter:blur(20px);
}
.split h3{font-size:30px;font-weight:var(--font-weight-heading);margin:0 0 14px;letter-spacing:-.01em}
.split ul{list-style:none;padding:0;margin:24px 0 0}
.split ul li{padding:12px 0;border-top:1px solid var(--line);display:flex;align-items:flex-start;gap:12px}
.split ul li:first-child{border-top:none}
.split ul li svg{flex-shrink:0;margin-top:3px;color:var(--accent)}

/* ---------- DARK SECTION ---------- */
.dark-section{background:var(--bg-dark);color:#fff}
.dark-section h2.section-title{color:#fff}
.dark-section .section-sub{color:#a8acb5}
.dark-section .eyebrow{color:#bfdbfe}
.cloud-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:24px}
.cloud-card{
  background:#1a1a1a;border:1px solid #2a2a2a;border-radius:14px;padding:24px;
  transition:all var(--t);
}
.cloud-card:hover{border-color:#3b6499;transform:translateY(-4px)}
.cloud-card .icon{color:var(--accent);margin-bottom:12px}
.cloud-card h4{margin:0 0 6px;font-size:17px;font-weight:600}
.cloud-card p{margin:0;color:#a8acb5;font-size:14px;line-height:1.6}

/* ---------- PRODUCT GRID (catalog page) ---------- */

/* Day-4-batch item 8 (2026-05-30) — sticky filter shell per architect's
   mockup (worc-sticky-filter-mockup.html). Family chip row + sub-filter row
   travel together as a single sticky block under the WORC header so partners
   can change either filter at any scroll depth. Subtle shadow appears on
   the bottom edge when the shell is stuck (i.e. has detached from natural
   document flow). Single shadow tracks whichever row is last visible
   automatically — when sub-row collapses to max-height:0, shell shrinks
   and shadow sits on filter-bar's bottom; when sub-row is visible, shell
   extends and shadow sits on sub-row's bottom. */
.filter-shell-sentinel{ height:1px; margin-bottom:-1px; }
.filter-shell{
  position:sticky; top:var(--header-h,84px); z-index:20;
  background:var(--bg);
  padding-bottom:16px;
  transition:box-shadow var(--t);
}
.filter-shell.is-stuck{ box-shadow:0 2px 8px rgba(0,0,0,0.06); }
/* Founder review 2026-05-31 (a) — the previous .sub-hidden override
   collapsed BOTH the shell's padding-bottom AND the filter-bar's margin-
   bottom alongside the sub-row's own collapse. Founder saw the combined
   ~32px disappearance as an "invisible white extension" that aspirated
   the device section. Solution: keep the 16px gutter stable in both states;
   only the sub-row's own ~200px height collapses on hide. Less aspiration,
   no perceived hidden padding. */
.filter-bar{ scroll-margin-top:var(--header-h,84px); }

.filter-bar{
  display:flex;gap:8px;flex-wrap:wrap;
  padding:18px;background:var(--bg-alt);border-radius:12px;margin-bottom:16px;
  /* Bundle D Item 1 — z-index:2 so the sub-row visually slides UNDER the
     family-chip row when it translates up on scroll-down (sub-row z-index:1
     below). filter-bar's opaque bg covers the sub-row content during slide. */
  position:relative;
  z-index:2;
}
.filter-bar button{
  padding:9px 16px;border-radius:8px;font-weight:500;font-size:14px;
  background:#fff;color:var(--ink-2);border:1px solid var(--line);
  transition:all var(--t);
}
.filter-bar button:hover{border-color:#c4c8cf}
.filter-bar button.is-active{background:var(--ink);color:#fff;border-color:var(--ink)}
/* Phase 1.6 fix 6 — five chips were wrapping to 3 rows on mobile.
   Tightening chip horizontal padding (16->12), chip gap (8->6), and
   the bar's own padding (18->12) frees ~48px of horizontal space — enough
   to settle at 2 rows from 360px upward. At 320px a 3rd row may still
   appear; strategist explicitly accepts that. */
@media (max-width: 768px){
  .filter-bar{ gap:6px; padding:12px; }
  .filter-bar button{ padding:9px 12px; }
}

/* Phase 2.5 — Option 3 hybrid taxonomy: sub-filter row appears when a
   family chip (other than All) is active, hides when family is All or
   only has one sub-category. Animation: max-height 0 → auto via fixed
   ceiling, paired with opacity + padding. 300ms standard ease. */
.sub-filter-row{
  display:flex;flex-wrap:wrap;gap:6px;align-items:center;
  max-height:0;opacity:0;overflow:hidden;
  padding:0 18px;margin:-24px 0 0;
  background:var(--bg-alt);border-radius:0 0 12px 12px;
  /* Bundle D Item 1 — z-index:1 + transform transition added for hide-on-
     scroll-down (sub-row slides up under .filter-bar's z-index:2 cover). */
  position:relative;
  z-index:1;
  transition:max-height var(--t),opacity var(--t),padding var(--t),margin-bottom var(--t),transform 220ms ease;
}
.sub-filter-row.is-visible{
  max-height:360px;opacity:1;
  padding:14px 18px 16px;margin:-24px 0 16px;
  border-top:1px solid var(--line);
}
/* Bundle D bug-fix (2026-05-31): collapse container box in sync with the
   transform so the layout doesn't reserve an empty rectangle where the
   sub-row used to be. translate alone was visually correct but left the
   container's max-height:360px in place, blocking the products grid by
   ~116px of empty white. max-height + transform animated together at
   220ms ease (matched timing per architect's brief).
   Specificity boost via .is-visible.is-hidden-by-scroll (3 classes) so
   the collapse properties unambiguously beat the .is-visible expansion
   ones when both classes coexist. !important left off intentionally —
   specificity bump is the cleaner mechanism. */
.sub-filter-row.is-visible.is-hidden-by-scroll{
  transform:translateY(-100%);
  max-height:0;
  padding-top:0;
  padding-bottom:0;
  margin-bottom:0;
  border-top-color:transparent;
  transition:max-height 220ms ease,padding 220ms ease,margin 220ms ease,transform 220ms ease,border-color 220ms ease;
}
.sub-filter-row .sub-label{
  width:100%;font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  font-weight:600;color:var(--muted);margin-bottom:2px;
}
.sub-filter-row button{
  padding:6px 12px;border-radius:6px;font-size:12px;font-weight:500;
  background:#fff;color:var(--ink-2);border:1px solid transparent;
  transition:all var(--t);font-family:inherit;cursor:pointer;
}
.sub-filter-row button:hover{border-color:#c4c8cf}
.sub-filter-row button.is-active{background:var(--ink);color:#fff;border-color:var(--ink)}
@media (max-width: 768px){
  .sub-filter-row{ gap:5px; }
  .sub-filter-row.is-visible{ padding:12px 12px 14px; }
  .sub-filter-row button{ padding:6px 10px; font-size:11.5px; }
}

/* CLS fix (Day 4): reserve grid height before JS injects 47 cards so the
   footer doesn't get pushed down by ~3000px in a single frame.
   content-visibility:auto skips off-screen card rendering for perf;
   contain-intrinsic-size gives the browser an honest height estimate.
   Bundle D bug-fix (2026-05-31): align-content:start prevents rows from
   stretching to fill min-height when filtered families have few cards
   (e.g. telecare=4 stretched cards to 1400px / 1 row each). With start,
   rows stay content-sized and the unused min-height reservation just
   becomes empty space below the last row — visually invisible. */
.products{
  display:grid;grid-template-columns:repeat(4,1fr);gap:13px;
  align-content:start;
  min-height:1400px;
  content-visibility:auto;
  contain-intrinsic-size:auto 1400px;
}
/* Bundle D Item 4 (2026-05-31) — full-bleed image + separate text strip below.
   Image area is a clean 1:1 square on --paper-soft canvas (handles transparent
   PNGs). Strip sits BELOW the image as a solid white band with a hairline
   divider — NOT overlaid on top of the image. Card total height = image (1:1)
   + strip. Replaces Phase-1's "small image-in-card with body block" layout.
   Founder picked strip-below over overlay-on-image (2026-05-31). */
.product{
  position:relative;
  overflow:hidden;
  background:#fff;
  border:1px solid var(--hairline);
  border-radius:var(--radius);
  text-decoration:none;
  color:var(--ink);
  display:block;
}
.product .product-image{
  aspect-ratio:1;
  width:100%;
  display:flex;align-items:center;justify-content:center;
  background:var(--paper-soft);
  overflow:hidden;
}
.product .product-image img{
  width:100%;height:100%;
  object-fit:contain;
  transition:transform .3s ease;
}
.product:hover .product-image img{ transform:scale(1.02); }
.product:focus-visible{
  outline:2px solid var(--ink);
  outline-offset:2px;
}
.product .product-strip{
  background:#fff;
  padding:10px 12px;
  border-top:1px solid var(--hairline);
}
.product .product-name{
  font-size:14px;font-weight:500;line-height:1.25;color:var(--ink);
  margin:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.product .product-meta{
  font-size:11px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-quiet);
  margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

/* ---------- CTA BANNER ---------- */
.cta-banner{
  background:var(--color-ink);
  color:#fff;border-radius:var(--radius);padding:64px 56px;
  display:grid;grid-template-columns:1.6fr 1fr;gap:48px;align-items:center;
  overflow:hidden;            /* hotfix 2026-05-18: clip ::before decorative circle (right:-100px) so it doesn't contribute to scrollWidth */
  position:relative;overflow:hidden;
}
.cta-banner::before{
  content:"";position:absolute;right:-100px;top:-100px;
  width:400px;height:400px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,0,0,.25),transparent 60%);
}
.cta-banner h3{font-size:32px;font-weight:var(--font-weight-heading);margin:0 0 12px;letter-spacing:-.01em}
.cta-banner p{margin:0;color:#bcc0c8;font-size:16px;max-width:520px}
.cta-banner .btns{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end;position:relative;z-index:1}

/* ---------- FOOTER ---------- */
footer{
  background:#08172e;color:#a8acb5;padding:72px 0 28px;font-size:14px;
  border-top:1px solid #1a1a1a;
}
footer .grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:48px;margin-bottom:48px}
footer h5{color:#fff;font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;margin:0 0 18px}
footer ul{list-style:none;padding:0;margin:0}
footer li{margin-bottom:10px}
footer a{color:#a8acb5;transition:color var(--t)}
footer a:hover{color:#fff}
footer .brand-block p{margin:10px 0 16px;line-height:1.65}
footer .socials{display:flex;gap:10px}
footer .socials a{
  width:36px;height:36px;border-radius:8px;display:grid;place-items:center;
  background:#1a1a1a;border:1px solid #2a2a2a;transition:all var(--t);
}
footer .socials a:hover{background:#2c4a6f;color:#fff}
footer .bottom{
  padding-top:24px;border-top:1px solid #1a1a1a;
  display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;
}

/* ---------- Shared page chrome (brand strip + page hero) ---------- */

.page-hero{padding:90px 0 60px;background:var(--bg-alt);border-bottom:1px solid var(--line)}
/* Lock the hero title to the brand font (Satoshi). Without this it inherited the
   body system stack (-apple-system/Inter/Segoe UI…), so the title rendered in a
   different font per machine — the "unstable" hero font JC reported (2026-06-22).
   Paired with the Satoshi preload in each page <head> to avoid any swap flash. */
.page-hero h1{font-family:var(--font-display);font-size:clamp(34px,4.6vw,56px);font-weight:var(--font-weight-heading);margin:0 0 14px;letter-spacing:-.02em}
.page-hero p{color:var(--muted);font-size:18px;max-width:680px;margin:0}
.page-hero .crumbs{font-size:13px;color:var(--muted);margin-bottom:18px}
.page-hero .crumbs a{color:var(--muted)}
.page-hero .crumbs a:hover{color:var(--ink)}
.page-hero .ctas{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}

.story{display:grid;grid-template-columns:1fr 1fr;gap:80px}
.story h2{font-size:32px;font-weight:var(--font-weight-heading);margin:0 0 16px;letter-spacing:-.01em}
.story p{color:var(--ink-2);line-height:1.7;margin:0 0 12px}
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:32px}
.value{background:#fff;border:1px solid var(--line);border-radius:12px;padding:24px}
.value .icon{color:var(--accent);margin-bottom:14px}
.value h4{margin:0 0 6px;font-size:17px;font-weight:700}
.value p{color:var(--muted);font-size:14px;margin:0}

/* timeline */
.timeline{position:relative;padding-left:32px}
.timeline::before{content:"";position:absolute;left:8px;top:6px;bottom:6px;width:2px;background:var(--line)}
.timeline .step{position:relative;padding-bottom:28px}
.timeline .step::before{
  content:"";position:absolute;left:-32px;top:6px;width:18px;height:18px;border-radius:50%;
  background:#fff;border:3px solid var(--accent);
}
.timeline .yr{font-size:13px;color:var(--accent);font-weight:700;letter-spacing:.08em}
.timeline h4{margin:4px 0 4px;font-size:18px;font-weight:700}
.timeline p{color:var(--muted);margin:0;font-size:14px}

/* ---------- CONTACT page ---------- */
.contact-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:60px;align-items:start}
.contact-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:36px;box-shadow:var(--shadow-sm);
}
.contact-card h3{margin:0 0 8px;font-size:24px;font-weight:var(--font-weight-heading)}
.contact-card p.sub{color:var(--muted);margin:0 0 24px}
.field{margin-bottom:18px}
.field label{display:block;font-size:13px;font-weight:600;color:var(--ink-2);margin-bottom:6px}
.field input,.field textarea,.field select{
  width:100%;padding:12px 14px;border-radius:10px;border:1px solid var(--line);
  background:#fff;font-family:inherit;font-size:15px;transition:border-color var(--t),box-shadow var(--t);
}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(14,17,22,.08);
}
.field textarea{resize:vertical;min-height:120px}
.row-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.contact-info .info-item{
  display:flex;gap:14px;align-items:flex-start;
  padding:18px 0;border-bottom:1px solid var(--line);
}
.contact-info .info-item:last-child{border-bottom:none}
.contact-info .info-item .icon{
  width:42px;height:42px;border-radius:10px;background:var(--bg-alt);
  display:grid;place-items:center;color:var(--accent);flex-shrink:0;
}
.contact-info .info-item h5{margin:0 0 2px;font-size:14px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.contact-info .info-item p{margin:0;color:var(--muted);font-size:14px;line-height:1.5}

.map-block{
  height:300px;border-radius:var(--radius);overflow:hidden;margin-top:24px;
  background:linear-gradient(135deg,#e8eaee,#d8dce2);
  display:grid;place-items:center;color:#9498a1;font-size:14px;
  border:1px solid var(--line);
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 980px){
  .hero-inner,.split,.contact-grid,.story{grid-template-columns:1fr;gap:48px}
  .split.reverse{direction:ltr}
  .hero-visual{height:340px}
  .strip-grid{grid-template-columns:repeat(2,1fr);row-gap:28px}
  .strip-grid .item:nth-child(2){border-right:none}
  .cat-grid,.products,.cloud-grid,.values{grid-template-columns:repeat(2,1fr)}
  .cta-banner{grid-template-columns:1fr;text-align:left;padding:40px 28px}
  .cta-banner .btns{justify-content:flex-start}
  footer .grid{grid-template-columns:1fr 1fr;gap:32px}
  .nav{display:none}
}
/* Bundle D Item 3 (2026-05-31) — mobile catalog at ≤768px: 2-up grid at
   8px gap + 8px outer padding (founder pick: tight density to let square
   images dominate the viewport). Strip text scales down to 10.5/8.5px so
   long SKU names still fit on one line within 166-178px cards. */
@media (max-width: 768px){
  .products{ gap:8px; padding:8px; }
  .product .product-strip{ padding:8px 10px; }
  .product .product-name{ font-size:10.5px; }
  .product .product-meta{ font-size:8.5px; }
}
@media (max-width: 560px){
  .strip-grid{grid-template-columns:1fr;row-gap:18px}
  .strip-grid .item{border-right:none;border-bottom:1px solid var(--line);padding-bottom:18px}
  .strip-grid .item:last-child{border-bottom:none}
  /* Bundle D Item 3 — .products INTENTIONALLY stays 2-up at 320-560px
     (no 1-up fallback). Other grids still collapse to 1-up. */
  .cat-grid,.cloud-grid,.values{grid-template-columns:1fr}
  footer .grid{grid-template-columns:1fr}
  section{padding:64px 0}
  .row-2{grid-template-columns:1fr}
}

/* =====================================================   v2.1 — Trikdis-faithful refactor (added 2026-05-10)
   Sober B2B aesthetic. Horizontal nav. Neutral imagery. Higher density.
   ============================================================ */

/* ---------- HEADER v2.2 (Trikdis: dark navy, centered logo, flags + burger) ---------- */
.hdr2{
  background:#000000;color:#fff;
  position:sticky;top:0;z-index:80;
}
.hdr2 .container{padding-top:14px;padding-bottom:14px;display:flex;flex-direction:column;gap:10px}
.hdr2 .brand-row{display:flex;justify-content:center;align-items:center}
.hdr2 .brand{
  display:inline-flex;align-items:center;gap:10px;
  font-weight:800;letter-spacing:.04em;font-size:20px;color:#fff;
}
.hdr2 .brand img{height:34px;width:auto}
.hdr2 .brand strong{color:#fff}
.hdr2 .tools{display:flex;justify-content:space-between;align-items:center;min-height:36px}
.hdr2 .lang{display:flex;gap:8px;align-items:center}
.hdr2 .lang button{
  background:transparent;border:none;cursor:pointer;padding:2px;border-radius:3px;
  display:inline-flex;align-items:center;line-height:0;
  transition:opacity .2s,box-shadow .2s;
}
.hdr2 .lang button:hover{opacity:.85}
.hdr2 .lang button.active{box-shadow:0 0 0 2px rgba(255,255,255,.55)}
/* Legacy .hdr2 .flag rules retired hotfix 2026-05-18 — switcher is now
   text-based EN | FR in .hdr3. */
.hdr2 .ham{
  display:flex;width:40px;height:40px;background:transparent;border:none;cursor:pointer;
  flex-direction:column;justify-content:center;align-items:center;gap:5px;padding:0;
  position:relative;z-index:81;
}
.hdr2 .ham span{display:block;width:24px;height:2px;background:#fff;border-radius:2px;transition:transform .25s,opacity .2s}
.hdr2 .ham.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hdr2 .ham.open span:nth-child(2){opacity:0}
.hdr2 .ham.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Slide-in drawer (Trikdis) — from right, dark navy panel */
/* Phase 1.5 fix 6 — frosted-glass drawer. Solid rgba bg is the fallback
   for browsers without backdrop-filter; modern browsers get the blur. */
.menu-drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(100%,360px);
  background:rgba(0,0,0,0.65);color:#fff;
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  backdrop-filter:blur(20px) saturate(180%);
  transform:translateX(100%);transition:transform .35s cubic-bezier(.2,.7,.2,1);
  z-index:79;padding:90px 32px 32px;
  box-shadow:-12px 0 32px rgba(0,0,0,.25);
  display:flex;flex-direction:column;overflow-y:auto;
}
.menu-drawer.open{transform:translateX(0)}
.drawer-nav{display:flex;flex-direction:column}
.drawer-nav a{
  display:block;padding:18px 0;font-size:15px;font-weight:700;letter-spacing:.12em;
  color:rgba(255,255,255,0.55);border-bottom:1px solid rgba(255,255,255,0.18);text-transform:uppercase;
  transition:color .2s,padding-left .2s;
}
.drawer-nav a:hover{color:var(--color-paper);padding-left:6px}
/* Phase 1.6 fix 4 — active drawer item: white not blue. Same monochrome
   treatment as the desktop nav current-page indicator. */
.drawer-nav a.active,
.drawer-nav a[aria-current="page"]{color:var(--color-paper)}
/* Phase 1.5 fix 7 — Support link unified with .drawer-nav a typography.
   Phase 1.6 fix 5 — border-top removed: the preceding .drawer-nav a's
   border-bottom already separates SUPPORT from CONTACT. A second border
   here produced a stacked-double-line. */
.drawer-support{
  display:block;padding:18px 0;font-size:15px;font-weight:700;letter-spacing:.12em;
  color:rgba(255,255,255,0.55);text-transform:uppercase;
  margin-top:8px;
  transition:color .2s,padding-left .2s;
}
.drawer-support:hover{color:var(--color-paper);padding-left:6px}

.menu-backdrop{
  position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(8,16,32,.55);
  z-index:78;opacity:0;pointer-events:none;transition:opacity .3s;
}
.menu-backdrop.open{opacity:1;pointer-events:auto}
body.menu-open{overflow:hidden}

/* ---------- Buttons (used in page-hero CTAs) ---------- */
.btn2{
  display:inline-flex;align-items:center;gap:8px;
  padding:13px 24px;border-radius:6px;font-weight:600;font-size:15px;
  transition:all .2s;cursor:pointer;
}
.btn2.primary{background:#000000;color:#fff}
/* Phase 1.6 fix 2 — Explore Products primary CTA was flashing dark-blue
   on hover/active. Replace with subtle monochrome darken per Phase 1.5
   button mapping (filled-button states -> #1a1a1a). */
.btn2.primary:hover,
.btn2.primary:active{background:#1a1a1a}
.btn2.outline{background:transparent;color:#000000;border:1px solid #cbd5e1}
/* Phase 1.6 fix 2 — Become a Partner outline button: hover fills black,
   inverts text to white (Phase 1.5 mapping). */
.btn2.outline:hover,
.btn2.outline:active{background:#000;border-color:#000;color:#fff}

/* ---------- TRUST STRIP — Phase 2 (3 anchors, bordered grid) ----------
   Strategist 2026-05-20: 5 anchors -> 3, unblocks the worcglobal.com
   DNS attach (no aspirational numbers remain). Layout flips from flex
   row to a 3-col grid with internal hairlines (matches CEO-validation v3
   reference). Single-column at <=800px so anchors stack with breathing
   room — the new anchor text is longer than the v1 numerics. */
.trust2{background:#000000;color:#fff;padding:clamp(40px,6vw,64px) 0}
.trust2 .row{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:rgba(255,255,255,0.18);
  border:1px solid rgba(255,255,255,0.18);
}
.trust2 .item{
  background:#000;padding:clamp(28px,4vw,48px) clamp(22px,3vw,36px);
  display:flex;flex-direction:column;gap:10px;justify-content:center;
  min-height:160px;text-align:left;
}
.trust2 .num{
  color:#fff;font-weight:var(--font-weight-light,300);
  font-size:clamp(28px,3.6vw,44px);line-height:1.05;letter-spacing:-.02em;
}
.trust2 .lbl{
  font-size:11px;color:rgba(255,255,255,0.65);
  letter-spacing:.22em;text-transform:uppercase;font-weight:500;line-height:1.4;
}
@media (max-width:800px){
  .trust2 .row{grid-template-columns:1fr}
  .trust2 .item{min-height:110px}
}

/* Phase 2 (2026-05-20) — .cats2, .cat2, .subs2/.plans2/.plan2/.subs2-cta,
   .res2/.res-card removed. The homepage no longer renders any of these
   patterns: Product Range, Subscription Model, and Support Resources
   sections were cut in favour of the unified Ecosystem carousel + Final
   CTA (see .eco below). .section-head retained — still used by about.html. */
.section-head{margin-bottom:36px;max-width:680px}
.section-head .pre{
  font-size:13px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:#000000;margin-bottom:14px;display:block;
}
.section-head h2{
  font-size:36px;font-weight:var(--font-weight-heading);letter-spacing:-.01em;color:#000000;
  margin-bottom:14px;line-height:1.15;
}
.section-head p{font-size:16px;color:#3b4256;line-height:1.6}

/* ---------- FOOTER v2.1 ---------- */
.ftr2{background:#000000;color:#a3b1c8;padding:56px 0 24px}
.ftr2 .grid{
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:42px;
  padding-bottom:36px;border-bottom:1px solid #1a1a1a;
}
.ftr2 .brand{
  display:flex;align-items:center;gap:10px;color:#fff;font-weight:800;letter-spacing:.04em;
  margin-bottom:14px;
}
.ftr2 .brand img{height:28px;width:auto;filter:brightness(1.1)}
.ftr2 .brand strong{color:#fff}
.ftr2 .brand-block p{font-size:14px;line-height:1.6}
.ftr2 h5{
  color:#fff;font-size:13px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;margin-bottom:14px;
}
.ftr2 ul{list-style:none;padding:0;margin:0}
.ftr2 ul li{padding:5px 0}
.ftr2 ul li, .ftr2 ul li a{font-size:14px;color:#a3b1c8;transition:color .2s}
.ftr2 ul li a:hover{color:#fff}
.ftr2 .bottom{
  padding-top:22px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;
  font-size:12px;color:#7a8aa3;
}

/* ---------- RESPONSIVE v2.2 (Phase 2 trim — cats2/subs2/res2 references
   removed; trust2 mobile rules now live in the trust2 block itself). ---- */
@media (max-width:880px){
  .hdr2 .brand{font-size:18px}
  .hdr2 .brand img{height:30px}
  .section-head h2{font-size:26px}
  .ftr2 .grid{grid-template-columns:1fr;gap:28px}
  .ftr2 .bottom{flex-direction:column;text-align:center}
  .page-hero{padding:60px 0 40px}
  .page-hero .ctas{margin-top:22px}
}

/* =====================================================================   Phase 0 reference component — Crow-mirrored button.

   Consumes design tokens from assets/styles/tokens.css. The class name
   intentionally matches Crow's own (.button__custom) so a marketing asset
   built on top of Crow's stylesheet rebrands cleanly by swapping logo only.

   Verified against thecrowgroup.com computed styles (2026-05-17):
     bg #000 · color #fff · padding 12px 24px · weight 900 · size 20px ·
     radius 0 · text-transform none · letter-spacing 0 · no shadow.

   Light variant mirrors Crow's .button__light combinator.
   NOT YET APPLIED IN ANY HTML — phase-1 will replace .btn-primary usages.
   ============================================================================ */

.button__custom{
  display:inline-flex; align-items:center; gap:var(--space-2);
  background:var(--color-accent);
  color:var(--color-accent-inverse);
  font-family:var(--font-display);
  font-size:var(--font-size-lg);
  font-weight:var(--font-weight-black);
  letter-spacing:var(--letter-spacing-normal);
  text-transform:none;
  padding:var(--space-3) var(--space-6);
  border:0;
  border-radius:var(--radius-none);
  box-shadow:var(--shadow-none);
  cursor:pointer;
  text-decoration:none;
  transition:background var(--duration-fast) var(--ease-standard),
             color var(--duration-fast) var(--ease-standard);
}
.button__custom:hover{
  background:var(--color-accent-hover);
}
.button__custom:focus-visible{
  outline:var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset:var(--focus-ring-offset);
}
.button__custom:disabled,
.button__custom[aria-disabled="true"]{
  opacity:.55; cursor:not-allowed;
}

/* Light variant — inverse fills (mirrors Crow's .button__light). */
.button__custom.button__light{
  background:var(--color-paper);
  color:var(--color-ink);
}
.button__custom.button__light:hover{
  background:var(--color-neutral-100);
}

/* =====================================================================   Phase 1 — Crow-mirrored hybrid header + footer + tile + CLS fix.
   Header: dark band, white wordmark, nav right.
   Footer: light surface, CSS-text wordmark in Satoshi.
   ============================================================================ */

/* CLS fix: reserve header height so content doesn't shift when partials.js
   replaces #header-slot. Matches the rendered .hdr3 height (84px = 18px top
   padding + 48px logo + 18px bottom padding). */
#header-slot{
  min-height:84px;
  background:var(--color-neutral-950);
}

.hdr3{
  background:var(--color-neutral-950);
  color:var(--color-text-inverse);
  border-bottom:1px solid rgba(255,255,255,0.08);
  position:sticky; top:0; z-index:var(--z-sticky);
}
.hdr3 .container{
  display:flex; align-items:center; gap:var(--space-8);
  min-height:84px; padding-top:var(--space-4); padding-bottom:var(--space-4);
}
.hdr3-brand{
  display:flex; align-items:center; line-height:0;
}
.hdr3-brand img{
  height:28px; width:auto;            /* wordmark-only logomark, natural 872:83 aspect */
  max-width:none;                     /* override body img { max-width:100% } */
  display:block;
}
.hdr3-nav{
  display:flex; gap:var(--space-2); margin-left:auto; align-items:center;
}
.hdr3-nav a{
  color:var(--color-text-inverse-muted);
  font-family:var(--font-display);
  font-size:var(--font-size-sm);
  font-weight:var(--font-weight-medium);
  letter-spacing:var(--letter-spacing-wide);
  text-transform:uppercase;
  padding:var(--space-2) var(--space-3);
  border-radius:var(--radius-none);
  transition:color var(--duration-fast) var(--ease-standard);
}
.hdr3-nav a:hover{ color:var(--color-text-inverse); }
/* Phase 1.6 fix 3 — current-page indicator: just colour shift (white vs
   muted), no background fill. Strategist 2026-05-18: "no background fill
   on focus / current." aria-current is added by partials.js at render. */
.hdr3-nav a.active,
.hdr3-nav a[aria-current="page"]{ color:var(--color-text-inverse); }
/* Phase 1.6 fix 3 — defeat browser-default :focus outline-fill that
   appears as a persistent blue rectangle behind the clicked nav item
   on Chrome/Edge. :focus-visible (below) still paints a monochrome ring
   for keyboard users. */
.hdr3-nav a:focus{ outline:none; }
.hdr3-nav a:focus-visible{
  outline:var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset:var(--focus-ring-offset);
}
/* Phase 1.5 fix 1 + hotfix 2026-05-18 — hamburger flush to container right.
   Language switcher: text codes (EN | FR) instead of flag icons.
   Flags conflate language with nationality; text codes match the drawer
   typography (uppercase + letter-spaced) and the wider B2B EU/MEA audience. */
.hdr3-tools{ display:flex; align-items:center; gap:var(--space-6); }
.hdr3-tools .lang{ display:flex; gap:var(--space-1); align-items:center; }
.hdr3-tools .lang button{
  padding:6px 6px;
  background:transparent; border:0; cursor:pointer;
  font-family:var(--font-display);
  font-size:14px;
  font-weight:var(--font-weight-medium);
  letter-spacing:0.12em;
  color:rgba(255,255,255,0.55);
  text-transform:uppercase;
  transition:color var(--duration-fast) var(--ease-standard);
  flex-shrink:0;
}
.hdr3-tools .lang button:hover{ color:rgba(255,255,255,1); }
.hdr3-tools .lang button.active,
.hdr3-tools .lang button[aria-pressed="true"]{
  color:var(--color-paper);
}
.hdr3-tools .lang button:focus-visible{
  outline:var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset:var(--focus-ring-offset);
}
.hdr3-tools .lang .lang-divider{
  color:rgba(255,255,255,0.35);
  font-size:14px;
  letter-spacing:0;
  user-select:none;
  pointer-events:none;
}
.hdr3-tools .ham{
  display:none; width:32px; height:32px; padding:6px;
  background:transparent; border:0; cursor:pointer;
  margin-left:auto;                  /* fix 1: push flush-right within tools group */
}
.hdr3-tools .ham span{
  display:block; height:2px; background:var(--color-paper); margin:4px 0;
  transition:transform var(--duration-fast) var(--ease-standard);
}

@media (max-width: 768px){
  .hdr3-nav{ display:none; }
  /* Phase 1.6 fix 1 — when the desktop nav is hidden, .hdr3-tools must
     itself push to the right edge (nav previously claimed that space
     via margin-left:auto). Also tightens the EN|FR <-> hamburger gap
     to 12px so the trio (logo · flex-gap · EN|FR · 12px · ham) reads
     as a single right-anchored group. */
  .hdr3-tools{ margin-left:auto; gap:var(--space-3); }
  .hdr3-tools .ham{ display:block; }
}

/* Hotfix 2026-05-18 — header geometry for narrow viewports.
   Root cause of mobile horizontal overflow: WORC wordmark image fixed at
   232×48 (Phase-1.5 aspect-ratio fix) plus 32px container gap kept header
   internal width ~436px on a 320-390px viewport. Below 480px, shrink the
   logo proportionally and tighten container gap + padding so the header
   fits 320px viewports with margin to spare. */
@media (max-width: 480px){
  .hdr3 .container{
    gap:var(--space-4);            /* 32 -> 16 px */
    padding-left:var(--space-4);   /* 28 -> 16 px */
    padding-right:var(--space-4);  /* 28 -> 16 px */
  }
  .hdr3-brand img{
    height:20px;                   /* wordmark-only, scaled down for mobile */
  }
  .hdr3-tools{
    gap:var(--space-3);            /* 24 -> 12 px */
  }
}

/* =====================================================================   Footer v3 — light surface, CSS-text wordmark
   ============================================================================ */
.ftr3{
  background:var(--color-paper);
  color:var(--color-text);
  border-top:1px solid var(--color-border);
  /* Phase 1.6 fix 7 — footer block padding tightened ~30%.
     Was: var(--space-16) 0 var(--space-8) (64 / 32). */
  padding:var(--space-10) 0 var(--space-6);
  font-size:var(--font-size-sm);
}
.ftr3 .grid{
  display:grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap:var(--space-8);
}
.ftr3-wordmark{
  display:inline-flex; align-items:center; gap:var(--space-2);
  text-decoration:none;
  margin-bottom:var(--space-4);
  font-family:var(--font-display);
  letter-spacing:var(--letter-spacing-wide);
  color:var(--color-text);
}
.ftr3-wordmark-text{
  font-size:var(--font-size-2xl);
  font-weight:var(--font-weight-light);
  letter-spacing:0.16em;
}
.ftr3-wordmark-rule{
  display:inline-block; width:18px; height:1px; background:var(--color-text);
}
.ftr3-wordmark-tagline{
  font-size:9px;
  letter-spacing:var(--letter-spacing-tagline);
  font-weight:var(--font-weight-medium);
  color:var(--color-text-muted);
}
.ftr3 .brand-block p{
  color:var(--color-text-muted);
  line-height:var(--line-height-body);
  max-width:380px;
}
.ftr3-h{
  font-family:var(--font-display);
  font-size:var(--font-size-xs);
  font-weight:var(--font-weight-bold);
  letter-spacing:var(--letter-spacing-wide);
  text-transform:uppercase;
  margin:0 0 var(--space-3) 0;
  color:var(--color-text);
}
.ftr3 ul{ list-style:none; padding:0; margin:0; }
.ftr3 ul li{ padding:var(--space-1-5) 0; }
.ftr3 ul li a{
  color:var(--color-text-muted);
  transition:color var(--duration-fast) var(--ease-standard);
}
.ftr3 ul li a:hover{ color:var(--color-text); }
.ftr3 .bottom{
  /* Phase 1.6 fix 7 — bottom row pulled in: margin-top 48->32, pad 24->16. */
  margin-top:var(--space-8);
  padding-top:var(--space-4);
  border-top:1px solid var(--color-border);
  display:flex; justify-content:space-between; align-items:center;
  color:var(--color-text-subtle);
  font-size:var(--font-size-xs);
  flex-wrap:wrap; gap:var(--space-3);
}
.ftr3 .bottom a{ color:var(--color-text-muted); }
.ftr3 .bottom a:hover{ color:var(--color-text); }

@media (max-width: 768px){
  .ftr3 .grid{ grid-template-columns:1fr 1fr; gap:var(--space-6); }
  .ftr3 .brand-block{ grid-column:1 / -1; }
  .ftr3 .bottom{ flex-direction:column; align-items:flex-start; }
}
@media (max-width: 480px){
  /* Phase 1.6 fix 7 — when columns stack to single, the grid `gap` becomes
     vertical row-gap. Tighten it further so the column stack reads as one
     block, not four loose strips. */
  .ftr3 .grid{ grid-template-columns:1fr; gap:var(--space-5); }
}

/* Phase 1.6 fix 7 — last section before the footer was too tall on every
   page (default 96px desktop / 64px mobile). Halve its bottom padding so
   the footer hugs the last section closer. */
main > section:last-child{ padding-bottom:var(--space-12); }
@media (max-width: 768px){
  main > section:last-child{ padding-bottom:var(--space-8); }
}

/* =====================================================================   Tile utility (deferred from tokens.css to here so it can use the wider
   --container etc. once tokens.css gets fully consumed).
   Applied to product imagery on products.html + product.html.
   ============================================================================ */
/* Phase 1.5 fix 2 — tri-color category coding retired entirely.
   Products sit on the page surface, no tinted frame, no modifier classes.
   The .tile class survives only as a layout primitive (square aspect-ratio,
   centered image, ~75% size). */
.tile{
  display:flex; align-items:center; justify-content:center;
  aspect-ratio:1 / 1;
  background:transparent;
  padding:0;
  border-radius:var(--radius-none);
  box-shadow:var(--shadow-none);
  overflow:hidden;
}
.tile img{
  width:75%; height:75%; object-fit:contain; display:block;
}

/* =====================================================================   Phase 1.5 fix 5 — Apple-style scroll-reveal.
   400ms / cubic-bezier(.4,0,.2,1) / translateY(20px)->0 / opacity 0->1.
   JS toggles .is-revealed; no-JS or reduced-motion users see content as-is.
   ============================================================================ */
[data-reveal]{
  opacity:0;
  transform:translateY(20px);
  transition:opacity 400ms cubic-bezier(.4,0,.2,1),
             transform 400ms cubic-bezier(.4,0,.2,1);
  will-change:opacity, transform;
}
[data-reveal].is-revealed{
  opacity:1;
  transform:translateY(0);
}
/* Reduced-motion users — show final state, skip the animation entirely. */
@media (prefers-reduced-motion: reduce){
  [data-reveal]{
    opacity:1;
    transform:none;
    transition:none;
  }
  /* Phase 2.5 — instant sub-filter reveal for reduced-motion users. */
  .sub-filter-row{ transition:none; }
  /* Day-4-batch — sticky-shell shadow toggles instantly for reduced motion;
     the sticky positioning itself is unconditional (UX requirement). */
  .filter-shell{ transition:none; }
}
/* Safety net — if assets/reveal.js fails to load for any reason, content
   becomes visible after 1.5 s instead of staying invisible forever. */
@keyframes worc-reveal-fallback {
  to { opacity:1; transform:translateY(0); }
}
[data-reveal]:not(.is-revealed){
  animation:worc-reveal-fallback 400ms cubic-bezier(.4,0,.2,1) 1500ms forwards;
}

/* =====================================================================   Phase 2 — Ecosystem carousel + Final CTA + Coming Soon page
   Strategist 2026-05-20 v3 (CEO-validated). The homepage collapses to:
   Hero -> Trust strip -> THIS section (carousel + final CTA in one frame).
   ============================================================================ */

/* CTA stack — vertical CTA pair on the hero. Existing .ctas was flex-wrap
   horizontal; .ctas--stack overrides to column with consistent button widths. */
.page-hero .ctas--stack{
  display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-top:28px;
}
.page-hero .ctas--stack .btn2{ min-width:220px; justify-content:center; }

/* Ecosystem section frame */
.eco{
  background:var(--bg-alt,#fafbfc);
  padding:clamp(64px,9vw,120px) 0;   /* symmetric: .final-cta is no longer a child (CEO 2026-06-15) */
}
.eco-marker{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  font-size:11px;letter-spacing:.28em;text-transform:uppercase;
  font-weight:500;color:#4b5563;margin:0 0 36px;
}
.eco-marker .rule{
  flex:0 0 56px;height:1px;background:rgba(0,0,0,0.18);
}
.eco-title{
  font-weight:var(--font-weight-light,300);
  font-size:clamp(34px,4.6vw,56px);line-height:1.1;letter-spacing:-.015em;
  margin:0 0 28px;max-width:26ch;color:#0a0a0a;
}
.eco-lede{
  font-size:clamp(17px,1.8vw,20px);line-height:1.55;
  color:#4b5563;margin:0 0 56px;max-width:60ch;
}

/* Horizontal scroll-snap carousel */
.eco-carousel{ margin-top:8px; }
.eco-row{
  display:flex;gap:16px;overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none; -ms-overflow-style:none;
  padding-bottom:8px;
  /* let cards bleed slightly so the snap edge sits inside the container */
}
.eco-row::-webkit-scrollbar{ display:none; }
.eco-hint{
  margin-top:16px;font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:#6b7280;font-weight:500;
}

/* Destination card */
.dest-card{
  flex:0 0 300px;scroll-snap-align:start;
  background:#fff;border:1px solid rgba(0,0,0,0.18);
  padding:clamp(24px,3vw,32px);
  display:flex;flex-direction:column;gap:12px;
  min-height:320px;
  text-decoration:none;color:#0a0a0a;
  transition:border-color 200ms cubic-bezier(.4,0,.2,1),
             transform   200ms cubic-bezier(.4,0,.2,1);
  position:relative;
}
.dest-card:hover{ border-color:#000; transform:translateY(-2px); }
.dest-card .eyebrow{
  font-size:10px;letter-spacing:.28em;text-transform:uppercase;
  font-weight:500;color:#6b7280;margin-bottom:6px;
}
.dest-card h3{
  font-weight:var(--font-weight-light,300);font-size:26px;
  line-height:1.2;letter-spacing:-.01em;margin:0;
}
.dest-card .sub{
  font-size:13px;color:#4b5563;line-height:1.5;
  margin:0;min-height:36px;
}
.dest-card .body{
  font-size:14px;color:#4b5563;line-height:1.55;margin:8px 0 0;
}
.dest-card .cta{
  margin-top:auto;padding-top:14px;
  font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  font-weight:500;color:#0a0a0a;
}
.dest-card .tag{
  position:absolute;top:16px;right:16px;
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  font-weight:500;color:#fff;background:#000;padding:4px 8px;
}
.dest-card.is-soon{ background:#fafafa;border-style:dashed; }
.dest-card.is-soon h3{ color:#4b5563; }

/* Desktop: show all four cubes at once — no horizontal scroll / clipped 4th
   card (CEO 2026-06-14). Below 1100px the row stays a swipe carousel. */
@media (min-width:1100px){
  .eco-row{ overflow-x:visible; scroll-snap-type:none; }
  .eco-row .dest-card{ flex:1 1 0; min-width:0; }
  .eco-hint{ display:none; }
}

/* Rotating quote (About card) */
.quote-rotator{ position:relative;min-height:80px; }
.quote-rotator .quote{
  position:absolute;top:0;left:0;right:0;
  opacity:0;transition:opacity 600ms cubic-bezier(.4,0,.2,1);
  font-size:14px;color:#4b5563;line-height:1.55;
}
.quote-rotator .quote.is-active{ opacity:1; }
.quote-rotator .audience{
  display:block;font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;font-weight:500;color:#0a0a0a;margin-bottom:6px;
}
.quote-rotator .quote-text{ display:block;font-style:italic; }
.quote-dots{
  display:flex;gap:6px;margin-top:10px;
}
.quote-dot{
  width:6px;height:6px;border-radius:50%;
  background:rgba(0,0,0,0.18);
  transition:background 200ms cubic-bezier(.4,0,.2,1);
}
.quote-dot.is-active{ background:#000; }

@media (prefers-reduced-motion: reduce){
  .quote-rotator .quote{ transition:none; }
}

/* Final CTA — fused into the Ecosystem section per Variant B */
.final-cta{
  background:#000;color:#fff;
  padding:clamp(72px,10vw,120px) 0;
  margin-top:72px;text-align:center;
}
.final-cta h3{
  font-weight:var(--font-weight-light,300);
  font-size:clamp(28px,4vw,48px);line-height:1.12;letter-spacing:-.02em;
  margin:0 auto 20px;max-width:22ch;color:#fff;
}
.final-cta p{
  font-size:17px;color:rgba(255,255,255,0.78);
  margin:0 auto 12px;max-width:52ch;
}
.final-cta .signature{
  font-weight:500;color:#fff;
  font-size:18px;margin:12px auto 32px;max-width:52ch;
  letter-spacing:-.005em;
}
.final-cta .signature .worc-mark{
  font-weight:500;letter-spacing:.04em;
}
.final-cta .row{
  display:flex;justify-content:center;gap:12px;flex-wrap:wrap;
}
/* Final CTA inverts the button chart — primary becomes white-on-black,
   outline becomes white-bordered transparent. .btn2.outline-inverse is the
   new modifier needed only inside .final-cta. */
.final-cta .btn2.primary{ background:#fff;color:#000;border:1px solid #fff; }
.final-cta .btn2.primary:hover,
.final-cta .btn2.primary:active{ background:rgba(255,255,255,0.85);color:#000; }
.btn2.outline-inverse{
  background:transparent;color:#fff;border:1px solid #fff;
  padding:13px 24px;border-radius:6px;font-weight:600;font-size:15px;
  display:inline-flex;align-items:center;gap:8px;
  transition:all .2s cubic-bezier(.4,0,.2,1);cursor:pointer;
  text-decoration:none;
}
.btn2.outline-inverse:hover,
.btn2.outline-inverse:active{ background:#fff;color:#000; }

/* ---------- Coming Soon page ---------- */
.cs-page{ padding:clamp(80px,12vw,140px) 0;background:#fff; }
.cs-page .grid{
  display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(40px,6vw,96px);
  align-items:start;
}
@media (max-width:900px){
  .cs-page .grid{ grid-template-columns:1fr; }
}
.cs-page .crumbs{ font-size:13px;color:#6b7280;margin:0 0 32px; }
.cs-page h1{
  font-weight:var(--font-weight-light,300);
  font-size:clamp(36px,5.5vw,64px);line-height:1.05;letter-spacing:-.025em;
  margin:0 0 28px;max-width:18ch;color:#0a0a0a;
}
.cs-page .lede{
  font-size:clamp(17px,1.8vw,20px);line-height:1.55;
  color:#4b5563;margin:0 0 24px;max-width:60ch;
}
.cs-prog{
  background:#f5f5f5;border:1px solid rgba(0,0,0,0.18);
  padding:clamp(28px,3vw,40px);
}
.cs-prog .badge{
  display:inline-block;background:#000;color:#fff;
  padding:4px 10px;font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;font-weight:500;margin-bottom:20px;
}
.cs-prog h3{
  font-weight:var(--font-weight-light,300);font-size:26px;
  line-height:1.2;letter-spacing:-.01em;margin:0 0 16px;color:#0a0a0a;
}
.cs-prog ul{ margin:0 0 20px;padding-left:0;list-style:none; }
.cs-prog li{
  font-size:14px;color:#4b5563;line-height:1.55;
  padding:10px 0 10px 24px;position:relative;
  border-bottom:1px solid rgba(0,0,0,0.08);
}
.cs-prog li:last-child{ border-bottom:0; }
.cs-prog li::before{
  content:"→";position:absolute;left:0;color:#000;font-weight:500;
}
.cs-form{
  margin-top:28px;padding-top:24px;
  border-top:1px solid rgba(0,0,0,0.18);
}
.cs-form .label{
  display:block;font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;font-weight:500;color:#0a0a0a;margin-bottom:12px;
}
.cs-form .input-row{
  display:flex;gap:8px;flex-wrap:wrap;
}
.cs-form input[type="email"]{
  flex:1 1 200px;padding:12px 14px;font-family:inherit;
  font-size:14px;border:1px solid #000;background:#fff;color:#0a0a0a;
}
.cs-form input[type="email"]:focus{
  outline:none;box-shadow:0 0 0 3px rgba(0,0,0,0.08);
}
.cs-form button{
  padding:12px 20px;font-family:inherit;font-size:14px;font-weight:500;
  background:#000;color:#fff;border:1px solid #000;cursor:pointer;
  transition:background 200ms cubic-bezier(.4,0,.2,1);
}
.cs-form button:hover,
.cs-form button:active{ background:#1a1a1a; }
.cs-form .success{
  display:none;margin-top:16px;padding:14px 16px;
  background:#eef9f1;border:1px solid #c7e8d2;color:#1d6b3a;
  font-size:14px;
}

/* ---------- Coming Soon state machine (Phase 3) ----------
   Driven by <body data-cs-state="in-development|open|live|retired">. */
body .cs-state-block{ display:none; }
body[data-cs-state="in-development"] .cs-state-block[data-state~="in-development"]{ display:block; }
body[data-cs-state="open"]           .cs-state-block[data-state~="open"]{ display:block; }
body[data-cs-state="live"]           .cs-state-block[data-state~="live"]{ display:block; }
body[data-cs-state="retired"]        .cs-state-block[data-state~="retired"]{ display:block; }
body .cs-state-inline{ display:none !important; }
body[data-cs-state="in-development"] .cs-state-inline[data-state~="in-development"]{ display:inline-block !important; }
body[data-cs-state="open"]           .cs-state-inline[data-state~="open"]{ display:inline-block !important; }
body[data-cs-state="live"]           .cs-state-inline[data-state~="live"]{ display:inline-block !important; }
body[data-cs-state="retired"]        .cs-state-inline[data-state~="retired"]{ display:inline-block !important; }
.cs-talk{
  display:grid;grid-template-columns:1fr 1fr;gap:16px;
  margin-top:24px;padding-top:24px;border-top:1px solid rgba(0,0,0,0.18);
}
.cs-talk a{
  display:block;padding:14px 16px;border:1px solid #000;color:#0a0a0a;
  text-decoration:none;font-weight:500;font-size:14px;
  transition:background 200ms cubic-bezier(.4,0,.2,1),color 200ms cubic-bezier(.4,0,.2,1);
}
.cs-talk a:hover{ background:#000;color:#fff; }
@media (max-width:560px){ .cs-talk{ grid-template-columns:1fr; } }

/* ---------- Platform pages — new components (Phase 3) ---------- */

/* .feature-row — 3-up text block on Control / Installer */
.feature-row{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(32px,4vw,56px);
  padding:clamp(40px,6vw,72px) 0;
}
.feature-row .item h3{
  font-family:var(--font-display,Satoshi,system-ui);
  font-weight:var(--font-weight-light,300);
  font-size:clamp(22px,2.2vw,28px);line-height:1.2;letter-spacing:-.01em;
  margin:0 0 14px;color:#0a0a0a;
}
.feature-row .item p{
  font-size:16px;line-height:1.7;color:#4b5563;margin:0;
}
@media (max-width:768px){ .feature-row{ grid-template-columns:1fr;gap:40px; } }

/* .app-screenshot-frame — empty zone reserved for app screenshots */
.app-screenshot-row{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.5vw,32px);
  padding:clamp(32px,4vw,56px) 0;
}
.app-screenshot-frame{
  position:relative;width:100%;
  aspect-ratio: 393 / 852;
  background:#f5f5f5;border:1px solid rgba(0,0,0,0.18);
  display:flex;align-items:center;justify-content:center;
}
.app-screenshot-frame .placeholder-text{
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:#6b7280;font-weight:500;text-align:center;padding:0 16px;
}
@media (max-width:768px){
  .app-screenshot-row{ grid-template-columns:1fr;gap:24px;max-width:340px;margin:0 auto; }
}

/* .cross-link-card — full-width band linking sibling app page */
.cross-link-card{
  display:grid;grid-template-columns:1fr auto;gap:clamp(24px,4vw,48px);
  align-items:center;
  padding:clamp(28px,3.5vw,40px);
  border:1px solid rgba(0,0,0,0.18);
  margin:clamp(40px,6vw,72px) 0;
}
.cross-link-card .eyebrow{
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  font-weight:500;color:#6b7280;margin:0 0 10px;
}
.cross-link-card h3{
  font-family:var(--font-display,Satoshi,system-ui);
  font-weight:var(--font-weight-light,300);
  font-size:clamp(22px,2.4vw,30px);line-height:1.2;letter-spacing:-.01em;
  margin:0 0 8px;color:#0a0a0a;
}
.cross-link-card p{
  font-size:15px;line-height:1.55;color:#4b5563;margin:0;max-width:48ch;
}
.cross-link-card .link{
  display:inline-flex;align-items:center;gap:6px;
  color:#0a0a0a;text-decoration:none;font-weight:500;font-size:15px;
  padding:12px 18px;border:1px solid #000;
  transition:background 200ms cubic-bezier(.4,0,.2,1),color 200ms cubic-bezier(.4,0,.2,1);
}
.cross-link-card .link:hover{ background:#000;color:#fff; }
@media (max-width:768px){
  .cross-link-card{ grid-template-columns:1fr;gap:20px; }
}

/* .platform-cta-strip — full-bleed dark closing CTA */
.platform-cta-strip{
  background:#0a0a0a;color:#fff;
  padding:clamp(64px,9vw,120px) 0;
  margin-top:clamp(40px,6vw,80px);
}
.platform-cta-strip .inner{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:clamp(20px,2.5vw,32px);
}
.platform-cta-strip h2{
  font-family:var(--font-display,Satoshi,system-ui);
  font-weight:var(--font-weight-light,300);
  font-size:clamp(28px,4vw,48px);line-height:1.1;letter-spacing:-.02em;
  margin:0;color:#fff;max-width:20ch;
}
.platform-cta-strip .btn2.outline-inverse{
  font-size:15px;padding:14px 28px;
}

/* ---------- Platform.html sectioning helpers (Phase 3) ---------- */
.platform-section{
  padding:clamp(56px,8vw,96px) 0;
}
.platform-section .inner{ max-width:780px; }
.platform-section .eyebrow{
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  font-weight:500;color:#6b7280;margin:0 0 16px;
}
.platform-section h2{
  font-family:var(--font-display,Satoshi,system-ui);
  font-weight:var(--font-weight-light,300);
  font-size:clamp(28px,4vw,48px);line-height:1.1;letter-spacing:-.02em;
  margin:0 0 24px;color:#0a0a0a;
}
.platform-section p{
  font-size:17px;line-height:1.7;color:#4b5563;margin:0 0 18px;
}
.platform-section p:last-child{ margin-bottom:0; }
.platform-section .inline-link{
  color:#0a0a0a;text-decoration:none;font-weight:500;
  border-bottom:1px solid #0a0a0a;
}
.platform-section .inline-link:hover{ opacity:.7; }

/* Architecture diagram container */
.platform-diagram{
  padding:clamp(48px,7vw,96px) 0;background:#f5f5f5;
}
.platform-diagram .frame{
  max-width:1200px;margin:0 auto;
  padding:clamp(16px,2vw,24px);background:#fff;
  border:1px solid rgba(0,0,0,0.12);
}
.platform-diagram svg{ display:block;width:100%;height:auto; }
.platform-diagram img{ display:block;width:100%;height:auto; }
.platform-diagram .caption{
  margin:28px auto 0;max-width:62ch;text-align:center;
  font-size:14px;line-height:1.55;color:#4b5563;font-style:italic;
}

/* =====================================================   Phase 3.2 (2026-06-04) — Netlify Forms: honeypot + GDPR consent
   ============================================================ */
/* Honeypot: visually removed but present in the DOM for bots.
   display:none would also work for Netlify, but off-screen is safer
   against naive bots that skip hidden fields. */
.hp-field{ position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none; }

.consent{ display:flex;align-items:flex-start;gap:10px;font-size:13.5px;line-height:1.5;color:var(--muted);cursor:pointer; }
.consent input[type="checkbox"]{ flex:none;width:16px;height:16px;margin-top:2px;accent-color:var(--ink);cursor:pointer; }
.consent a{ color:inherit;text-decoration:underline;text-underline-offset:2px; }
.consent a:hover{ color:var(--ink); }

/* =====================================================   Phase 3.3 (2026-06-04) — /legal/ pages: hero, layout, sticky TOC
   ============================================================ */
.legal-hero{ padding:clamp(72px,9vw,110px) 0 clamp(28px,4vw,44px); }
.legal-hero .eyebrow{
  font-size:12px;letter-spacing:0.14em;text-transform:uppercase;
  color:var(--muted);margin:0 0 14px;font-weight:500;
}
.legal-hero h1{
  font-family:var(--font-display,Satoshi,system-ui);
  font-size:clamp(34px,5vw,60px);font-weight:300;
  letter-spacing:-0.02em;margin:0 0 16px;line-height:1.08;
}
.legal-hero .lede{ font-size:15px;color:var(--muted);margin:0; }

.legal-layout{ display:block; }
.legal-body{ max-width:72ch; }
.legal-body section{ padding:26px 0;scroll-margin-top:108px; }  /* clear the 84px sticky header */
.legal-body section + section{ border-top:1px solid var(--line,#e5e7eb); }
.legal-body h2{
  font-family:var(--font-display,Satoshi,system-ui);
  font-size:clamp(20px,2.4vw,26px);font-weight:500;
  letter-spacing:-0.01em;margin:0 0 14px;
}
.legal-body p{ font-size:15.5px;line-height:1.7;color:#374151;margin:0 0 14px; }
.legal-body p:last-child{ margin-bottom:0; }
.legal-body ul{ margin:0 0 14px;padding-left:22px; }
.legal-body li{ font-size:15.5px;line-height:1.7;color:#374151;margin:4px 0; }
.legal-body a{ color:inherit;text-decoration:underline;text-underline-offset:2px; }
.legal-body table{ width:100%;border-collapse:collapse;margin:6px 0 14px;font-size:14.5px; }
.legal-body th{
  text-align:left;font-weight:600;font-size:12.5px;letter-spacing:0.06em;
  text-transform:uppercase;color:var(--muted);
  padding:10px 14px 10px 0;border-bottom:1px solid var(--ink,#111);
}
.legal-body td{ padding:12px 14px 12px 0;border-bottom:1px solid var(--line,#e5e7eb);line-height:1.6;color:#374151;vertical-align:top; }

/* Pre-existing fix (2026-06-22): the Solution + Models pages reuse the .legal-body
   layout for marketing copy, so their headings + body did not match the rest of the
   site (they inherited the small legal fine-print sizing). Make these two pages read
   exactly like the Platform content sections (.platform-section): light 300 Satoshi
   headings at the larger clamp, and 17px body. Genuine legal pages keep 15.5px. */
body[data-page="solution"] .legal-body p,
body[data-page="solution"] .legal-body li,
body[data-page="business-development"] .legal-body p,
body[data-page="business-development"] .legal-body li{ font-size:17px; color:#4b5563; }
body[data-page="solution"] .legal-body h2,
body[data-page="business-development"] .legal-body h2{
  font-weight:var(--font-weight-light,300);
  font-size:clamp(28px,4vw,48px);
  line-height:1.1; letter-spacing:-.02em; color:#0a0a0a;
}

/* TOC — simple anchor list on mobile, sticky left column on desktop (privacy only) */
.legal-toc{ margin:0 0 10px; }
.legal-toc .toc-title{
  font-size:12px;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--muted);margin:0 0 10px;font-weight:500;
}
.legal-toc ul{ list-style:none;margin:0;padding:0; }
.legal-toc li{ margin:0; }
.legal-toc a{
  display:block;padding:5px 0;font-size:14px;color:var(--muted);
  text-decoration:none;line-height:1.45;
}
.legal-toc a:hover{ color:var(--ink,#111); }
.legal-toc a.active{ color:var(--ink,#111);font-weight:500; }

@media (min-width:1024px){
  .legal-layout.has-toc{
    display:grid;grid-template-columns:240px minmax(0,1fr);
    gap:clamp(40px,5vw,72px);align-items:start;
  }
  .legal-layout.has-toc .legal-toc{
    position:sticky;top:108px;margin:0;
    border-left:1px solid var(--line,#e5e7eb);padding-left:18px;
  }
}

/* ===== Launch sprint 2026-06-14: Focus on Growth (home) + Industry verticals (about) ===== */
/* Top padding added 2026-06-15 — the Growth section now follows the black CTA band
   (it used to sit right under the hero), so it needs its own breathing room up top.
   Bottom gap is provided by the following .final-cta margin-top. */
.growth{padding:clamp(64px,9vw,120px) 0 0}
.growth-lede{font-size:20px;font-weight:500;color:var(--ink);max-width:780px;margin:0 0 18px;line-height:1.4}
.growth-body{font-size:16px;color:var(--muted);max-width:780px;margin:0 0 14px;line-height:1.6}
.growth-grid,.verticals-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:36px}
.growth-item,.vertical-item{background:#fff;border:1px solid var(--line);border-radius:12px;padding:26px}
.growth-item h3,.vertical-item h3{margin:0 0 10px;font-size:19px;font-weight:700;color:var(--ink);letter-spacing:-.01em}
.vertical-item .v-sub{margin:0 0 12px;font-size:15px;font-weight:600;color:var(--accent);line-height:1.4}
.vertical-item .v-lead{margin:14px 0 4px;font-weight:600;color:var(--ink)}
.growth-item p,.vertical-item p{color:var(--muted);font-size:14.5px;line-height:1.6;margin:0 0 10px}
.growth-item p:last-child,.vertical-item p:last-child{margin-bottom:0}
.growth-close{font-size:18px;font-weight:500;color:var(--ink);max-width:840px;margin:36px 0 0;line-height:1.5}
@media (max-width:760px){.growth-grid,.verticals-grid{grid-template-columns:1fr}}

/* ===== About nav submenu (corrections r2 2026-06-14) ===== */
.hdr3-hassub{position:relative;display:inline-flex;align-items:center;gap:2px}
.hdr3-subtoggle{background:none;border:0;color:inherit;cursor:pointer;padding:4px 2px;font-size:11px;line-height:1;opacity:.85}
.hdr3-subtoggle::after{content:"\25BE";display:inline-block;transition:transform .2s}
.hdr3-hassub:hover .hdr3-subtoggle::after,.hdr3-hassub:focus-within .hdr3-subtoggle::after,.hdr3-hassub.open .hdr3-subtoggle::after{transform:rotate(180deg)}
.hdr3-sub{display:none;position:absolute;top:100%;left:0;min-width:232px;background:#0a0a0a;border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:8px;flex-direction:column;gap:2px;box-shadow:0 16px 40px rgba(0,0,0,.4);z-index:60}
.hdr3-hassub:hover .hdr3-sub,.hdr3-hassub:focus-within .hdr3-sub,.hdr3-hassub.open .hdr3-sub{display:flex}
.hdr3-sub a{display:block;padding:9px 12px;border-radius:7px;color:#e7e8ea;font-size:14px;white-space:nowrap}
.hdr3-sub a:hover{background:rgba(255,255,255,.08);color:#fff}
.drawer-hassub{display:flex;align-items:center;justify-content:space-between}
.drawer-subtoggle{background:none;border:0;color:inherit;cursor:pointer;font-size:14px;padding:8px 10px;line-height:1}
.drawer-subtoggle::after{content:"\25BE";display:inline-block;transition:transform .2s}
.drawer-subtoggle[aria-expanded="true"]::after{transform:rotate(180deg)}
.drawer-sub{display:none;flex-direction:column;padding-left:16px}
.drawer-sub.open{display:flex}
.drawer-sub a{padding:8px 0;font-size:15px;opacity:.85}
.v-link{display:inline-block;margin-top:14px;font-weight:600;font-size:14px;color:var(--accent);text-decoration:none}
.v-link:hover{text-decoration:underline}

/* ---------- HOME CTA BAND (2026-06-14) — CEO moved the hero CTA pair into
   the former black trust-strip band; the 49 YEARS / 46 SKUs / ALL-IN-ONE
   stats were removed from the homepage. Buttons use the inverse chart so
   they read on the black background. ---------- */
.cta-band{background:#000000;color:#fff;padding:clamp(40px,6vw,64px) 0}
.cta-band .ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.cta-band .btn2{min-width:220px;justify-content:center}
.cta-band .btn2.primary{background:#fff;color:#000;border:1px solid #fff}
.cta-band .btn2.primary:hover,
.cta-band .btn2.primary:active{background:rgba(255,255,255,0.85);color:#000}

/* ---------- INDUSTRY CARDS (2026-06-14) — compact 10-up grid on the
   Solution page; links to the per-industry vertical pages. ---------- */
.v-cards{ display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:36px; }
.v-card{ display:flex;flex-direction:column;background:#fff;border:1px solid var(--line,#e5e7eb);border-radius:12px;padding:24px;text-decoration:none;color:inherit;transition:border-color .2s,transform .2s; }
.v-card:hover{ border-color:#000;transform:translateY(-2px); }
.v-card h3{ margin:0 0 8px;font-size:18px;font-weight:700;color:var(--ink,#0e1116);letter-spacing:-.01em;line-height:1.25; }
.v-card p{ margin:0 0 16px;font-size:14px;color:var(--muted,#6b7280);line-height:1.5; }
.v-card .v-card-more{ margin-top:auto;font-weight:600;font-size:13px;color:var(--accent); }
@media (max-width:900px){ .v-cards{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .v-cards{ grid-template-columns:1fr; } }
/* ---------- PLATFORM app showcases (2026-06-14) — WORC Desktop / Control /
   Installer mockups. Removed the architecture-diagram image. ---------- */
.app-feature{ padding:clamp(40px,6vw,72px) 0; }
.app-feature + .app-feature{ border-top:1px solid var(--line,#e5e7eb); }
.app-feature .app-intro{ max-width:680px; margin:0 0 clamp(28px,4vw,44px); }
.app-feature .app-intro .eyebrow{ font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:#6b7280;margin:0 0 12px;font-weight:500; }
.app-feature .inner{ display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:center; }
.app-feature.reverse .copy{ order:2; }
.app-feature .copy .eyebrow{ font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:#6b7280;margin:0 0 12px;font-weight:500; }
.app-feature h2{ font-family:var(--font-display,Satoshi,system-ui);font-size:clamp(24px,2.8vw,34px);font-weight:300;margin:0 0 14px;line-height:1.15;color:#0a0a0a; }
.app-feature .copy p{ color:#4b5563;line-height:1.65;margin:0 0 18px;font-size:16px; }
.app-feature .media{ display:flex;gap:16px;justify-content:center; }
.app-feature .media img{ width:100%;height:auto;display:block;border-radius:12px;box-shadow:var(--shadow-md,0 10px 30px rgba(0,0,0,.12)); }
.desktop-shots{ display:grid;grid-template-columns:1fr 1fr;gap:20px; }
.desktop-shots figure{ margin:0; }
.desktop-shots img{ width:100%;height:auto;display:block;border-radius:12px;box-shadow:var(--shadow-md,0 10px 30px rgba(0,0,0,.12)); }
.desktop-shots figcaption{ margin-top:10px;font-size:13px;color:#6b7280;line-height:1.4; }
@media (max-width:820px){
  .app-feature .inner{ grid-template-columns:1fr;gap:24px; }
  .app-feature.reverse .copy{ order:0; }
  .desktop-shots{ grid-template-columns:1fr; }
}


/* ============================================================
   Interior page-intro band — subtle animated dot grid (graphism)
   Applies to every page-intro band — including the homepage hero. One shared
   treatment so Products / Solution / Resources / Contact / Platform
   (and the platform sub-pages) read as one template.
   ============================================================ */
.page-hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
}
.page-hero > .container{
  position:relative;
  z-index:2;                       /* copy sits above the pattern */
  width:100%;                      /* keep full container width when .page-hero is a flex row */
}
/* Uniform interior intro-band height (2026-06-17): every .page-hero EXCEPT the
   homepage hero shares one 360px height. Top-aligned (not centred) with a fixed
   padding-top so the title begins at the SAME starting point on every page,
   regardless of how much copy follows. The homepage hero keeps its taller height. */
.page-hero:not(.hero--video){
  min-height:360px;
  padding-top:72px;                /* fixed start point for the title */
  padding-bottom:12px;             /* low enough that the tallest copy still fits the 360px min-height (so every band is exactly 360) */
}
@media (max-width:760px){
  .page-hero:not(.hero--video){ min-height:260px; padding-top:48px; padding-bottom:36px; }
}
/* the dot field */
.page-hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:radial-gradient(rgba(14,17,22,0.11) 1px, transparent 1.6px);
  background-size:24px 24px;
  /* fade the grid out toward the bottom so it never fights the divider */
  -webkit-mask-image:linear-gradient(to bottom,#000 55%,transparent 100%);
          mask-image:linear-gradient(to bottom,#000 55%,transparent 100%);
  animation:phDotDrift 34s linear infinite;
  opacity:.9;
}
/* a soft light patch that drifts across, giving the grid gentle life */
.page-hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:radial-gradient(38% 62% at 50% 42%,rgba(255,255,255,0.55),rgba(255,255,255,0) 70%);
  background-size:55% 100%;
  background-repeat:no-repeat;
  animation:phGlowDrift 13s ease-in-out infinite alternate;
}
@keyframes phDotDrift{
  from{ background-position:0 0; }
  to{ background-position:48px 24px; }
}
@keyframes phGlowDrift{
  from{ background-position:0% 50%; }
  to{ background-position:100% 50%; }
}
@media (prefers-reduced-motion:reduce){
  .page-hero::before{ animation:none; }
  .page-hero::after{ animation:none; opacity:0; }
}

/* ============================================================
   Homepage hero — looping background animation (CEO 2026-06-15).
   Scoped to .hero--video so every interior .page-hero intro band
   keeps its dot-grid and is completely unaffected.
   ============================================================ */
.hero--video{
  min-height:clamp(440px,58vh,640px);
  display:flex;
  align-items:center;
  background:var(--bg-alt);
}
/* As a flex item the .container would shrink to its content and the margin:0 auto
   would centre it — pushing the copy to mid-page. Force full width so it keeps the
   normal container gutter and the headline lines up with the nav logo on the left. */
.hero--video > .container{ width:100%; }
/* drop the CSS dot-grid + drifting glow — the video carries its own texture */
.hero--video::before,
.hero--video::after{ display:none; }
/* keep the copy inside the solid-scrim column so it never fights the bright
   centre of the animation as the camera pushes in */
.hero--video h1{ max-width:15ch; }
.hero--video p{ max-width:30ch; }
.hero-video{
  position:absolute;
  inset:0;
  z-index:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  pointer-events:none;
}
/* Scrim: solid brand-light over the copy column on the left, fading to clear
   over the animated scene on the right. Keeps the headline + CTA legible even
   when the camera pushes in and the servers crowd toward the left edge. */
.hero-scrim{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(90deg,
     var(--bg-alt) 0%,
     var(--bg-alt) 22%,
     rgba(245,246,248,0.80) 42%,
     rgba(245,246,248,0.30) 56%,
     rgba(245,246,248,0) 66%);
}
/* Phones: don't autoplay a heavy 16:9 clip — show the poster still instead. */
@media (max-width:760px){
  .hero--video .hero-video{ display:none; }
  .hero--video{
    background:var(--bg-alt) url("/img/hero/cloud-hero-poster.jpg") center/cover;
  }
  .hero--video .hero-scrim{
    background:linear-gradient(90deg,
       var(--bg-alt) 0%,
       rgba(245,246,248,0.85) 45%,
       rgba(245,246,248,0.35) 80%,
       rgba(245,246,248,0.15) 100%);
  }
}
/* Reduced-motion users: no autoplay video, fall back to the still. */
@media (prefers-reduced-motion:reduce){
  .hero--video .hero-video{ display:none; }
  .hero--video{
    background:var(--bg-alt) url("/img/hero/cloud-hero-poster.jpg") center/cover;
  }
}

/* ==================== PR #56/#57 — Industry visuals (rev. 2026-06-21) ====================
   Clean text-free photos. #56 = photo cards on the Models page (photo fills the card,
   industry name overlaid bottom-left over a scrim). #57 = photo hero on each industry
   page (image behind, the page headline/subhead stay as HTML in front). One photo per
   industry serves both languages — only the overlaid text switches. */
.ind-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.2vw,26px);
  margin-top:clamp(22px,3vw,34px); }
@media(max-width:980px){ .ind-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:600px){ .ind-grid{ grid-template-columns:1fr; } }
.ind-card{ position:relative; display:block; aspect-ratio:4/3; border-radius:14px; overflow:hidden;
  text-decoration:none; box-shadow:0 1px 2px rgba(0,0,0,.06),0 10px 28px rgba(0,0,0,.08);
  transition:transform 180ms ease, box-shadow 180ms ease; }
.ind-card:hover{ transform:translateY(-4px); box-shadow:0 2px 4px rgba(0,0,0,.1),0 18px 42px rgba(0,0,0,.16); }
.ind-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ind-card__scrim{ position:absolute; inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.62),rgba(0,0,0,.05) 52%,rgba(0,0,0,0) 72%); }
.ind-card__name{ position:absolute; left:18px; right:18px; bottom:15px; color:#fff; font-weight:700;
  font-size:clamp(17px,1.4vw,19px); line-height:1.25; text-shadow:0 1px 8px rgba(0,0,0,.35); }

/* #57 — photo hero on each industry page: image behind, headline in front.
   Taller band shows more of each photo; the copy is left-aligned and capped in
   width so it sits over the (darker) left side and never covers the subjects on
   the right. Per-page background-position is set inline to frame the key subject. */
.legal-hero.ind-hero{ position:relative; overflow:hidden; background-size:cover; background-position:center;
  min-height:clamp(400px,46vw,580px); display:flex; align-items:center; }
.legal-hero.ind-hero::before{ content:""; position:absolute; inset:0;
  background:linear-gradient(100deg,rgba(8,14,28,.86) 0%,rgba(8,14,28,.55) 38%,rgba(8,14,28,.12) 72%,rgba(8,14,28,.02) 100%); }
.legal-hero.ind-hero > .container{ position:relative; width:100%; }
.legal-hero.ind-hero .eyebrow{ color:#9ec1ff; }
.legal-hero.ind-hero h1{ color:#fff; max-width:540px; }
.legal-hero.ind-hero .lede{ color:#e7ecf3; max-width:540px; }