/* ==========================================================================
   mattswart.co.za v5
   Chassis: design-glm-r2.md §2 (global system) §3 (sections) + coordinator deltas
   v4: sticky header and the fixed station ruler are gone; the content column is
   symmetric again. See BUILD-BRIEF-V4.md.
   v5: Murmurgo reborn on paper with the film as a bounded screen (§1); SafetyGrip
   at natural AR with the scrim gone (§2); iRoll 720 film (§3); footer wordmark
   replaces the old slide line (§4); ProFilm logo top-left (§6); credentials
   essay swapped for the plain-language equation line (§7). See BUILD-BRIEF-V5.md.
   v6: mobile type floor + tap system (§1); SafetyGrip film cleaned, app-concept
   block below it (§2); ProFilm compact split row (§3); social card v2 (§4).
   See BUILD-BRIEF-V6.md.
   ========================================================================== */

/* --- faces ---------------------------------------------------------------- */
@font-face{font-family:'Barlow Condensed';src:url('../fonts/barlow-condensed-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url('../fonts/barlow-condensed-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url('../fonts/barlow-condensed-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url('../fonts/barlow-condensed-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url('../fonts/barlow-condensed-800.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url('../fonts/barlow-condensed-900.woff2') format('woff2');font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:'DM Sans';src:url('../fonts/dm-sans-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'DM Mono';src:url('../fonts/dm-mono-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'DM Mono';src:url('../fonts/dm-mono-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}

/* --- tokens (§2.4) -------------------------------------------------------- */
:root{
  --ink:#1A1F24; --ink-70:#2E353D;
  --paper:#F2EFE9; --paper-2:#EAE7E1; --void:#12161B;
  --plekify:#95BF47; --safarinow:#48A8F0; --sn-ink:#0B2540;
  --murmurgo-bg:#0E1116; --murmurgo-accent:#86E3C9;
  --iroll-black:#000; --iroll-green:#2BB580;
  --profilm:#00AF62;
  --white:#F7FAFC; --white-75:rgba(247,250,252,.75);

  --barlow:'Barlow Condensed',-apple-system,'Arial Narrow',sans-serif;
  --sans:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'DM Mono',ui-monospace,'SF Mono',Menlo,monospace;
}

/* --- base ----------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--void);color:var(--ink);
  font-family:var(--sans);font-size:18px;line-height:1.65;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,video,canvas,svg{display:block;max-width:100%}
h1,h2,h3,p,dl,dd,ul,ol,figure{margin:0;padding:0}
ul,ol{list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid #86E3C9;outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.skip{position:absolute;left:-9999px;top:0;z-index:99;background:var(--void);color:var(--white);padding:12px 20px;font-family:var(--mono);font-size:13px}
.skip:focus{left:8px;top:8px}

/* content column (§2.1): symmetric inline padding, centred max-width — no
   viewport-edge reservation of any kind */
.wrap{max-width:1296px;margin:0 auto;padding:0 clamp(16px,4vw,48px)}

/* --- type system (§2.2) --------------------------------------------------- */
.eyebrow{
  font-family:var(--mono);font-weight:400;font-size:13px;line-height:1.5;
  letter-spacing:.16em;text-transform:uppercase;
}
.h2{font-family:var(--barlow);font-weight:800;font-size:clamp(30px,3.4vw,44px);line-height:1;letter-spacing:-.01em;margin-bottom:32px}
.body{font-size:18px;line-height:1.65;max-width:62ch}

/* --- reveal (§2.8) -------------------------------------------------------- */
/* v6 (§1.10): the hide is gated on html.js (set by the inline head script), so a
   reader without JS gets the paragraphs rather than permanent blanks. */
.js .rv{opacity:0;transform:translateY(14px);transition:opacity .5s cubic-bezier(.16,1,.3,1),transform .5s cubic-bezier(.16,1,.3,1)}
.js .rv.in{opacity:1;transform:none}

/* --- glass (§2.7) --------------------------------------------------------- */
.glass{
  backdrop-filter:blur(20px) saturate(170%);
  -webkit-backdrop-filter:blur(20px) saturate(170%);
  background:rgba(14,17,22,.45);
  border:1px solid rgba(255,255,255,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.32),0 32px 64px -16px rgba(0,0,0,.6);
  border-radius:18px;
  padding:32px;
  color:var(--white);
}
.glass .tag{
  font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  border:1px solid rgba(255,255,255,.35);border-radius:2px;padding:5px 9px;display:inline-block;
  margin-bottom:18px;
}
.glass h3{font-family:var(--barlow);font-weight:800;font-size:30px;line-height:1;margin-bottom:14px}
.panel__body{font-size:16px;line-height:1.6;color:var(--white);max-width:46ch}

/* ==========================================================================
   SECTIONS
   ========================================================================== */
.sec{position:relative;padding:112px 0;overflow:hidden}
.sec--plk{background:var(--plekify);color:var(--ink)}
.sec--sn{background:var(--safarinow);color:var(--sn-ink);padding:112px 0 128px}
.sec--mu{background:#F4F2ED;color:#1A1F24;padding:clamp(64px,8vw,120px) 0}
.sec--ir{background:var(--iroll-black);color:var(--white)}
.sec--sg{position:relative;display:block;background:#0B0E12;color:var(--white);padding:0}
.sg__content{max-width:1228px;margin:0 auto;padding:64px 24px 72px}
.sg__head h3{
  font-family:var(--barlow);font-weight:800;font-size:clamp(28px,3.2vw,40px);
  line-height:1.02;letter-spacing:-.01em;margin:16px 0 20px;
}
.sg__head .body{color:#C9CDD2}
.sg__signals{display:flex;flex-direction:column;gap:8px;margin-top:28px}
/* marker hangs in the gutter: wrapped rows indent past it (§1.4) */
.sg__signals li{
  font-family:var(--mono);font-size:13px;line-height:1.45;color:#C9CDD2;
  padding-left:1.2em;text-indent:-1.2em;
}
.sg__signals li::before{content:"→ ";color:var(--iroll-green)}
.sg__grid{
  display:grid;grid-template-columns:0.85fr 1.15fr;gap:48px;
  max-width:1180px;margin:44px auto 0;align-items:center;
}
.sg__mockup{display:flex;justify-content:center}
/* paper card: the portrait mockup reads as product, not decoration, on #0B0E12 */
.sg__mockup-frame{
  background:#F4F2ED;border-radius:4px;padding:22px;max-width:100%;
  box-shadow:0 0 0 1px rgba(255,255,255,.08);
}
.sg__mockup-frame img{display:block;width:auto;max-width:100%;max-height:560px;height:auto;object-fit:contain;margin:0 auto}
.sec--pf{background:#12161B;color:var(--white);padding:112px clamp(16px,4vw,48px)}
.sec--cr{background:var(--paper);color:var(--ink)}
.sec--pe{background:var(--paper-2);color:var(--ink)}
.sec--fo{background:var(--void);color:var(--white);padding:112px 0 96px}

/* ==========================================================================
   00 · HERO — paper #F4F2ED is THE default; dark #12161B via ?hero=dark (§1.1)
   ========================================================================== */
.sec--hero{
  padding:0;min-height:100vh;background:#F4F2ED;color:#1A1F24;
  /* 5 contour greys, light → dark ink-on-paper (§1.4) */
  --c0:#C8C4BA;--c1:#B0ABA0;--c2:#8A8478;--c3:#5C564A;--c4:#3A362E;
  /* ink triplet for the copy vessels, so the ?hero=dark variant inverts with them */
  --hero-ink:26,31,36;
}
.dark-hero .sec--hero{
  background:var(--void);color:#F4F2ED;
  --c0:#2A2E33;--c1:#3A3F46;--c2:#4A5058;--c3:#5A6169;--c4:#6B7178;
  --hero-ink:244,242,237;
}

.hero__grid{position:relative;min-height:100vh}
.hero__body{
  position:relative;z-index:2;
  display:flex;flex-direction:column;justify-content:center;
  min-height:100vh;width:45%;
  padding:40px 40px 64px clamp(16px,4vw,48px);
}
.hero__eyebrow{font-size:13px;letter-spacing:.1em;color:rgba(var(--hero-ink),.7);margin-bottom:24px}

/* --- wordmark (§1.3) — the dominant object, typography alone --------------- */
.hero__mark{
  font-family:var(--barlow);font-size:clamp(64px,8vw,128px);line-height:.9;
  letter-spacing:-.01em;white-space:nowrap;
}
.hero__mark-a{font-weight:600}
.hero__mark-b{font-weight:400}
/* the seam: exactly 1ch at BODY size, not scaled with the display type */
.hero__seam{display:inline-block;width:1ch;font-family:var(--sans);font-size:18px;overflow:hidden}
.hero__mark-legal{
  font-family:var(--mono);font-size:14px;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(var(--hero-ink),.6);margin:8px 0 32px;
}

/* --- copy vessels (§1.5) --------------------------------------------------- */
.hero__h1{
  font-family:var(--barlow);font-weight:500;font-size:clamp(32px,4vw,48px);
  line-height:1.05;letter-spacing:-.01em;margin-bottom:20px;
}
.hero__sub{font-size:18px;line-height:1.5;max-width:60ch;color:rgba(var(--hero-ink),.85);margin-bottom:40px}

/* quiet ledger: three rows, hairline dividers top+bottom of the group */
.hero__ledger{
  border-top:1px solid rgba(var(--hero-ink),.1);border-bottom:1px solid rgba(var(--hero-ink),.1);
  max-width:54ch;
}
.hero__ledger li{font-family:var(--mono);font-size:14px;line-height:1.4;padding:16px 0}

/* --- background art: deterministic ASCII contour plot (§1.4) --------------- */
.hero__art{position:absolute;top:80px;right:0;bottom:0;width:55%;overflow:hidden;pointer-events:none}
.contour{
  font-family:var(--mono);font-weight:400;font-size:11px;line-height:1;letter-spacing:0;
  white-space:pre;margin:0;
}
.contour i{font-style:normal}
.contour .b0{color:var(--c0)}
.contour .b1{color:var(--c1)}
.contour .b2{color:var(--c2)}
.contour .b3{color:var(--c3)}
.contour .b4{color:var(--c4)}
.contour--desktop,.contour--tablet,.contour--mobile{display:none}
.hero__art .contour{position:absolute;top:0;left:0}
.dark-hero .hero__art{opacity:.92}

/* ==========================================================================
   01 · PLEKIFY
   ========================================================================== */
.plk__grid{display:grid;grid-template-columns:7fr 5fr;gap:64px;align-items:start}
.plk__left .eyebrow{margin-bottom:28px}
.plk__mark{width:88px;height:88px;margin-bottom:28px}
.plk__left .h2{max-width:16ch;font-size:clamp(38px,4.6vw,64px)}
.plk__left .body{max-width:44ch;margin-bottom:32px}
.chips{display:flex;gap:12px;margin-bottom:34px}
.chips>li{display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.chip{border:1px solid #383E42;border-radius:2px;padding:8px 14px}
.chip__name{font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.chip__name:hover{text-decoration:underline;text-underline-offset:3px}
.chipnote{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:rgba(26,31,36,.72);line-height:1.35;max-width:20ch}
.statpair{display:flex;gap:48px;margin-bottom:34px}
.statpair dt{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(26,31,36,.72)}
.statpair dd{font-family:var(--barlow);font-weight:800;font-size:44px;line-height:1}
.src{font-family:var(--mono);font-size:11px;line-height:1.9;letter-spacing:.03em;color:rgba(26,31,36,.78);max-width:52ch;word-break:break-word}
.src a{border-bottom:1px solid rgba(26,31,36,.5)}
.src a:hover{border-bottom-color:currentColor}

/* ==========================================================================
   CHARTS (both)
   ========================================================================== */
.chart{margin:0}
.crow{display:grid;grid-template-columns:132px 1fr;gap:0 24px;align-items:center;padding:11px 0}
.crow__lab{display:flex;flex-direction:column;gap:3px;font-family:var(--mono);font-size:12px;letter-spacing:.04em;text-transform:lowercase}
.crow__lab b{font-weight:500}
.crow__lab i{font-style:normal;font-size:11px;opacity:.72}
.crow__track{position:relative;height:26px;margin-right:86px}
#chartSn .crow__track{margin-right:132px}
.bar{
  display:block;height:26px;width:0;position:relative;
  transition:width .7s cubic-bezier(.16,1,.3,1);
}
.chart.in .bar{width:var(--w)}
.bar--solid{background:#383E42}
.bar--ghost{background:rgba(56,62,66,.30);border:1px solid #383E42}
.bar--sn{background:var(--sn-ink)}
.bar--snghost{background:rgba(11,37,64,.28);border:1px solid var(--sn-ink)}
.bar__num{
  position:absolute;left:100%;margin-left:14px;top:50%;transform:translateY(-50%);
  font-family:var(--barlow);font-weight:800;font-size:36px;line-height:1;font-style:normal;white-space:nowrap;color:var(--ink);
}
#chartSn .bar__num{color:var(--sn-ink)}
.chartcap{font-family:var(--mono);font-size:12px;letter-spacing:.06em;margin-top:22px}
.chartnote{font-family:var(--mono);font-size:11px;letter-spacing:.06em;opacity:.72;margin-top:6px}

/* ==========================================================================
   02 · SAFARINOW
   ========================================================================== */
.sn__band--2{margin-top:112px}
.sn__band--3{margin-top:112px}
.sn__band .eyebrow{margin-bottom:36px}
.sn__logo{width:340px;height:auto;margin-bottom:40px}
.sn__framing{font-size:18px;line-height:1.6;max-width:62ch;margin-bottom:8px}

.spine{position:relative;margin-top:72px}
.spine::before{content:"";position:absolute;left:56px;top:0;bottom:0;width:2px;background:rgba(11,37,64,.55)}
.stop{position:relative;display:grid;grid-template-columns:56px 1fr;gap:0 26px;padding:12px 0;min-height:48px}
.stop::before{content:"";position:absolute;left:54.5px;top:29px;width:5px;height:5px;background:var(--sn-ink)}
.stop__yr{font-family:var(--mono);font-weight:500;font-size:16px;line-height:1.4;text-align:right}
.stop__ev{font-size:16px;line-height:1.45;padding-top:2px}
.stop--peak{display:block;padding:44px 0 52px}
.stop--peak::before{top:58px}
.stop--peak .stop__yr{display:block;text-align:left;width:56px;margin-bottom:12px}
.peak{font-family:var(--barlow);font-weight:800;font-size:96px;line-height:.9;letter-spacing:-.02em}
.peak__cap{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;margin-top:12px}

.metrics{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(11,37,64,.28);margin-bottom:72px}
.metrics li{display:flex;flex-direction:column;gap:4px;padding:26px 24px 26px 0;border-right:1px solid rgba(11,37,64,.28)}
.metrics li:last-child{border-right:0}
.metrics b{font-family:var(--barlow);font-weight:800;font-size:44px;line-height:1}
.metrics span{font-size:15px;line-height:1.35}
.metrics i{font-family:var(--mono);font-style:normal;font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.7;margin-top:4px}
.thesis{font-family:var(--barlow);font-weight:700;font-size:28px;line-height:1.1;margin-top:48px}

.firsts{margin-bottom:88px}
.firsts li{display:grid;grid-template-columns:88px 1fr;gap:0 20px;padding:11px 0;border-bottom:1px solid rgba(11,37,64,.22);font-size:17px}
.firsts li span{font-family:var(--mono);font-size:13px;padding-top:3px;opacity:.85}
.sn__callout{margin-bottom:88px}
.callout{font-family:var(--barlow);font-weight:700;font-size:36px;line-height:1.12;max-width:26ch;margin-bottom:34px}
.features{columns:2;column-gap:48px;font-size:15px;line-height:1.5}
.features li{break-inside:avoid;padding:5px 0}
.platformcap{font-family:var(--mono);font-size:11px;letter-spacing:.06em;margin-top:28px;opacity:.85}
.colophoncap{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:20px;opacity:.85}
.colophon{font-family:var(--mono);font-weight:500;font-size:13px;line-height:2.2;letter-spacing:.06em;text-transform:uppercase;max-width:70ch}
.awards{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;margin-top:36px;padding-top:24px;border-top:1px solid rgba(11,37,64,.28)}

/* ==========================================================================
   03 · MURMURGO — v5 rebirth (§1): paper ground, the film a bounded "screen" in
   the right column, content off the film entirely, no scrim and no tint. Black
   is iRoll's territory; no rule below re-inks a dark section.
   ========================================================================== */
.sec--mu{background:#F4F2ED;color:#1A1F24;padding:clamp(64px,8vw,120px) 0}
.mu__grid{display:grid;grid-template-columns:minmax(320px,38%) 1fr;gap:clamp(32px,4vw,64px);align-items:center}
.eyebrow--mu{color:#6B7280;margin-bottom:28px}

/* --- 1.2 contrast (v6.fix: UNCONDITIONAL, all widths) ----------------------
   The contract asserts these four pairs at >=4.5:1 with NO width qualifier, and
   colour is not a responsive property — the desktop rendering carried the same
   too-light values as the phone. These declarations sit after every base rule for
   these selectors (172 / 218 / 220 / this line) and no later rule re-colours them
   at any width, so nothing overrides them at desktop. The dark-hero companion
   travels with the pair so ?hero=dark keeps paper ink on its dark ground. */
.chipnote, .statpair dt{color:rgba(26,31,36,.9)}
.eyebrow--mu{color:#5B6470}
.hero__mark-legal{color:rgba(26,31,36,.74)}
.dark-hero .hero__mark-legal{color:rgba(244,242,237,.74)}

.mu__left .h2{max-width:17ch;font-size:clamp(38px,4.6vw,64px);margin-bottom:26px}
.mu__left .body{color:#3A4148;max-width:46ch}
.signals{display:flex;flex-direction:column;gap:10px;margin-top:32px}
.signals li{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:#1A1F24;padding-left:18px;position:relative;border-top:1px solid #D8D4CB}
.signals li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:1px;background:var(--murmurgo-accent)}
.signals a{border-bottom:1px solid rgba(134,227,201,.5)}
.signals a:hover{border-bottom-color:var(--murmurgo-accent)}
/* the film is a framed object, not atmosphere: 1124/480 is the served AR of the
   SD-480p CDN rendition, so the frame is the film's own shape, uncropped.
   The demo panel sits BELOW the frame at every breakpoint: a content-sized panel
   docked over the screen covers ~80% of it (and a 42%-clamped one clips the body
   mid-glyph and never reaches the traces), so the founder constraint wins — the
   footage stays untouched and the panel reads in full under it. */
.mu__film{display:flex;flex-direction:column}
.mu__frame{position:relative;aspect-ratio:1124/480;background:#0B0E12;border:1px solid #1A1F24;overflow:hidden}
.mu__frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:1;pointer-events:none}
/* demo panel: paper glass below the screen, a window into the stream rather than
   a second column */
.mu__film .demo{
  position:static;width:100%;max-width:420px;margin-top:12px;max-height:none;overflow:visible;
  background:rgba(244,242,237,0.86);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(26,31,36,0.15);border-radius:2px;padding:14px 16px;color:#1A1F24;
}
.demo__head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:20px;flex-wrap:wrap;color:#1A1F24}
.demo__status{font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:.18em;color:#1A1F24}
.demo__cap{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:#6B7280}
.demo__body{font-family:var(--mono);font-size:13px;line-height:1.7;color:#1A1F24;min-height:118px}
.demo__line{margin-bottom:2px}
.demo__line--live{color:#1A1F24}
.caret{display:inline-block;width:7px;height:15px;background:#1A1F24;vertical-align:-2px;margin-left:2px;animation:caretblink 1s steps(1,end) infinite}
@keyframes caretblink{0%,49%{opacity:1}50%,100%{opacity:0}}
.demo__traces{margin-top:20px;padding-top:16px;border-top:1px solid rgba(26,31,36,.15)}
.demo__trow{display:flex;gap:8px;margin-bottom:8px}
.demo__trow:last-child{margin-bottom:0}
.tchip{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;border:1px solid rgba(26,31,36,.2);border-radius:2px;padding:4px 8px;color:rgba(26,31,36,.72)}

/* ==========================================================================
   04 · IROLL — headline treatment measured off iroll.co.za's hero:
   solid ink · solid --ir-green · black fill inside a 2.5px green stroke
   ========================================================================== */
.sec--ir{position:relative}
.ir__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none}
.ir__canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0;pointer-events:none}
.ir__grid{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.eyebrow--ir{display:flex;align-items:center;gap:0;color:var(--iroll-green);letter-spacing:.2em;margin-bottom:26px}
.eyebrow--ir .dash{display:inline-block;width:24px;height:1px;background:var(--iroll-green);margin-right:14px}
.ir__h2{
  font-family:var(--barlow);font-weight:900;font-size:clamp(44px,6vw,88px);line-height:.9;
  letter-spacing:-.03em;text-transform:uppercase;color:var(--white);margin-bottom:26px;
}
/* line breaks come from the spans, not from <br>, so the accessible sentence
   stays "I built and run iRoll's technology" */
.ir__h2 span{display:block}
.ir__l1{color:#F7FAFC}
.ir__l2{color:var(--iroll-green)}
.ir__l3{color:#000;-webkit-text-stroke:2.5px var(--iroll-green);paint-order:stroke fill}
.ir__sub{font-size:17px;line-height:1.6;color:var(--white-75);max-width:46ch;margin-bottom:16px}
.ir__link{
  display:inline-block;font-family:var(--mono);font-weight:400;font-size:13px;letter-spacing:.06em;
  color:var(--iroll-green);text-decoration:underline;text-underline-offset:3px;margin-bottom:40px;
}
.ir__link:hover{color:var(--white)}
.ir__video{border:1px solid rgba(43,181,128,.5);aspect-ratio:16/9;overflow:hidden;background:#000}
.ir__video video{width:100%;height:100%;object-fit:cover}
/* the scooter art rides the right column, hung on its end edge, clear of the film */
.ir__right{display:flex;flex-direction:column;gap:28px}
.ir__art{display:block;align-self:flex-end;max-width:clamp(380px,30vw,460px);position:relative;z-index:1}
.ir__art img{width:100%;height:auto}
.ledger li{display:grid;grid-template-columns:44px 1fr;gap:0 18px;padding:26px 0;border-top:1px solid rgba(255,255,255,.14)}
.ledger li:last-child{border-bottom:1px solid rgba(255,255,255,.14)}
.ledger__i{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--iroll-green);padding-top:6px}
.ledger b{font-family:var(--barlow);font-weight:800;font-size:28px;line-height:1;display:block;margin-bottom:8px}
.ledger p{font-size:15px;line-height:1.5;color:var(--white-75)}

/* ==========================================================================
   05 · SAFETYGRIP
   ========================================================================== */
/* v5 (§2): the film drives the section height at its own AR, full brightness —
   the scrim is gone, so the glass panels carry their own contrast.
   v6 (§2): the film reads CLEAN — no overlay, native controls, logo top-left at
   preload=metadata so the scrubber arms instead of sitting dead at 0:00. The two
   glass panels move into the content row below it (see .sg__content). */
/* v6 (§2): the film is its own positioning context — the play button and the
   top-left mark anchor to the FILM, not to the section, which now extends past
   the content row below it. aspect-ratio holds the 1280×720 box before the lazy
   src lands (preload=metadata alone would leave a 300×150 default). */
.sg__film{position:relative;display:block}
.sg__video{position:static;display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;background:#0B0E12}
/* the mark from the film itself, in the top-left slot the old text credit held.
   White art on this section's #0B0E12; the drop-shadow keeps it legible over
   the bright frames of the drift shot. */
.sg__logo{
  position:absolute;top:32px;left:32px;z-index:4;
  width:clamp(240px,26vw,340px);height:auto;
  filter:drop-shadow(0 2px 14px rgba(0,0,0,.6));
}
.sg__play{
  position:absolute;right:24px;bottom:max(72px,8vh);z-index:3;
  background:rgba(10,12,15,.72);color:var(--white);border:1px solid rgba(255,255,255,.35);
  border-radius:2px;padding:14px 22px;font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;
}
/* v6 (§2): stacked beside the mockup on a flat #0B0E12 ground — no blur to do,
   so the glass goes and the panels carry a plain hairline box instead. */
.sg__panels{display:flex;flex-direction:column;gap:16px}
.sg__panels .panel{
  width:100%;
  background:rgba(247,250,252,.06);border:1px solid rgba(247,250,252,.14);border-radius:4px;
  box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;
}
.price{font-family:var(--barlow);font-weight:800;font-size:56px;line-height:1;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.price__was{color:rgba(247,250,252,.55);text-decoration:line-through;text-decoration-thickness:2px}
.price__arw{font-size:34px;color:var(--white-75)}
.price__now{color:var(--white)}
.price__cap{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--white-75);max-width:52ch}

/* ==========================================================================
   06 · PROFILM
   ========================================================================== */
/* v6 (§3): bounded split row — the backdrop is a fixed-ratio side panel again
   rather than atmosphere behind everything, so it is cropped ONCE, to the cell. */
.sec--pf{position:relative;display:block}
.pf__row{
  display:grid;grid-template-columns:1fr 1.08fr;max-width:1180px;margin:0 auto;
  aspect-ratio:16/9;max-height:560px;overflow:hidden;border-radius:4px;
}
.pf__bg{width:100%;height:100%;object-fit:cover;object-position:50% 35%}
/* v6.1: the logo PNG carries 141px of transparent margin on its left (of 1063),
   i.e. 15.7px once rendered at 118px, so the artwork floated inboard of the type
   column. Cancel it with -14px so the ink lands on the column edge. */
.pf__logo{width:118px;height:auto;margin-left:-14px}
.pf__panel{
  background:rgba(18,22,27,.72);border:0;border-radius:0;box-shadow:none;
  backdrop-filter:none;-webkit-backdrop-filter:none;min-width:0;
  padding:26px 30px;gap:13px;
  display:flex;flex-direction:column;justify-content:center;
}
.pf__stat{font-family:var(--barlow);font-weight:800;font-size:34px;line-height:1;color:var(--profilm)}
.pf__cap{font-family:var(--mono);font-size:10.5px;line-height:1.4;letter-spacing:.12em;text-transform:uppercase;color:var(--white-75)}
/* outbound rows: label left, domain right, ↗ in iRoll green, ≥44px tap height.
   flex-wrap keeps the row's min-content to its widest item, so the 30-char
   /account/login domain cannot force the grid column past the viewport. */
.pf__links{font-family:var(--mono);font-size:13px;line-height:1.4}
.pf__links a{
  display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:center;gap:16px;
  min-height:44px;padding:10px 0;
  border-bottom:1px solid rgba(255,255,255,.12);color:#E4E7EA;
}
.pf__links li:last-child a{border-bottom:0}
.pf__links a::after{content:"↗";color:var(--iroll-green);margin-left:10px}
.pf__links a:hover{color:var(--white)}
/* v6.1: the values share ONE right edge. `space-between` spread whatever free
   space each row happened to have between the value and the ↗, so the three
   domains ended at x1070 / 1066 / 1134 (measured 1440) and the long one, which
   wraps at phone width, left-aligned itself entirely. `margin-left:auto` pins the
   value against the arrow on its own line and on a wrapped line alike. */
.pf__dom{color:rgba(247,250,252,.62);overflow-wrap:anywhere;margin-left:auto;text-align:right}
/* the frozen panel copy + 3 links do not fit the design's type sizes inside the
   560px depth cap held at 16:9 — trim the two least structural leads (the honesty
   tag and the body) at ≥1024 only, so tablet/phone keep their own scale. */
@media (min-width:1024px){
  .pf__panel .tag{font-size:10.5px;letter-spacing:.12em}
  .pf__panel .panel__body{font-size:15px;line-height:1.5}
}
.pf__facts{display:none}

/* ==========================================================================
   07 · CREDENTIALS
   ========================================================================== */
.sec--cr{position:relative}
.survey{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.survey__net line{stroke:rgba(26,31,36,.07);stroke-width:.5}
.survey__pts circle{fill:rgba(26,31,36,.08)}
.survey__err{fill:none;stroke:rgba(26,31,36,.14);stroke-width:1;stroke-dasharray:6 6}
.cr__grid{position:relative;display:grid;grid-template-columns:5fr 7fr;gap:64px;align-items:start}
.cr__ledger .eyebrow{margin-bottom:32px}
.cr__ledger li{display:grid;grid-template-columns:100px 1fr;gap:0 18px;padding:11px 0;border-bottom:1px solid rgba(26,31,36,.16);font-size:16px;line-height:1.5}
.cr__ledger li span{font-family:var(--mono);font-size:12px;letter-spacing:.08em;padding-top:4px;opacity:.8}
.cr__ledger i{display:block;grid-column:2;font-style:normal;font-family:var(--mono);font-size:12px;opacity:.72;margin-top:5px}
/* founder photo — retired from the hero into Credentials (§3): original colour
   frame, 160px, square, 1px ink border, top-left, caption as figure note */
.cr__photo{float:left;width:160px;margin:2px 28px 10px 0}
.cr__photo img{width:160px;height:160px;border:1px solid #1A1F24;border-radius:0}
.cr__photo figcaption{
  font-family:var(--mono);font-size:11px;line-height:1.4;letter-spacing:.08em;
  text-transform:uppercase;color:rgba(26,31,36,.75);margin-top:8px;
}
.cr__essay .body{max-width:62ch}
.eq{margin-top:56px;padding-top:28px;border-top:1px solid rgba(26,31,36,.22)}
.eq__f{font-family:var(--mono);font-weight:500;font-size:28px;line-height:1.2;letter-spacing:.02em}
.eq__plain{font-family:var(--sans);font-size:15px;line-height:1.5;color:#3A4148;margin-top:8px}
.eq__c{font-family:var(--mono);font-size:11px;letter-spacing:.1em;line-height:1.7;margin-top:14px;opacity:.75;max-width:62ch}

/* ==========================================================================
   08 · PERSONAL
   ========================================================================== */
.pe__in{max-width:620px}
.sec--pe .wrap.pe__in{max-width:668px}
.pe__in .eyebrow{margin-bottom:24px}
.pe__line{font-size:16px;line-height:1.6;margin-bottom:44px}
.cards{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.cards img{width:100%;height:auto;border-radius:4px;aspect-ratio:3/2;object-fit:cover}
.card__lab{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.12em;margin-top:12px}
.cards a:hover .card__lab{text-decoration:underline;text-underline-offset:3px}

/* ==========================================================================
   09 · FOOTER
   ========================================================================== */
.fo__contact{display:flex;flex-wrap:wrap;gap:8px 28px;font-family:var(--mono);font-size:13px;letter-spacing:.06em;color:var(--white-75);margin-bottom:88px}
.fo__contact a{border-bottom:1px solid transparent}
.fo__contact a:hover{border-bottom-color:currentColor}
/* v5 (§4): the old slide line is gone — the registered company name closes the
   page instead, the hero's own construction at ~35% scale. Same span grammar as
   .hero__mark / .hero__seam: MATTSW 600 · 1ch seam · ART 400, legal line below. */
.fo__mark-main{font-family:var(--barlow);line-height:1;margin:0}
.fo__m1{font-weight:600;font-size:clamp(20px,2.4vw,34px);color:#F4F2ED}
.fo__seam{display:inline-block;width:1ch;font-family:var(--sans);font-size:18px;overflow:hidden}
.fo__m2{font-weight:400;font-size:clamp(20px,2.4vw,34px);color:#A8A296}
.fo__mark-sub{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:#6B7280;margin:6px 0 0}
.fo__rule{width:48px;height:1px;background:rgba(244,242,237,0.12);margin:20px 0}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
/* --- contour art availability per breakpoint (§1.4) ------------------------ */
@media (min-width:1024px){ .contour--desktop{display:block} }
@media (min-width:768px) and (max-width:1023px){ .contour--tablet{display:block} }

@media (max-width:1247px){
  .hero__body{padding:32px 32px 56px clamp(16px,4vw,48px)}
}

@media (max-width:1023px){
  body{font-size:16.5px}
  .sec{padding:64px 0}
  .sec--hero,.sec--sg,.sec--pf{padding:0}
  .sec--sn{padding:64px 0 80px}
  .sec--fo{padding:64px 0 72px}

  .hero__grid{min-height:100vh}
  .hero__body{
    width:100%;justify-content:center;
    padding:32px 24px 64px clamp(16px,4vw,48px);
  }
  /* tablet: art drops to right 40% at 70% opacity, behind the copy */
  .hero__art{width:40%;opacity:.7}

  .plk__grid,.mu__grid,.ir__grid,.cr__grid{grid-template-columns:1fr;gap:52px}
  /* the film/demo structure is the same at every breakpoint now — the panel is in
     flow under the frame, so nothing here needs to re-dock or un-clip it (v5 §1) */
  .plk__mark{width:64px;height:64px}
  .plk__left .body{max-width:none}
  .statpair{gap:32px}

  .crow{grid-template-columns:1fr;gap:8px 0;padding:14px 0}
  .crow__track{margin-right:74px}
  #chartSn .crow__track{margin-right:104px}
  .bar__num{font-size:32px;margin-left:12px}
  .bar,.crow__track{height:22px}

  .sn__logo{width:220px}
  .sn__band--2,.sn__band--3{margin-top:64px}
  .spine::before{left:0}
  .stop{display:block;padding:14px 0 14px 24px;min-height:0}
  .stop::before{left:-1.5px;top:24px}
  .stop__yr{display:block;text-align:left;font-size:13px;margin-bottom:3px}
  .stop--peak{padding:32px 0 36px 24px}
  .stop--peak::before{left:-1.5px;top:44px}
  .peak{font-size:64px}
  .metrics{grid-template-columns:1fr 1fr;margin-bottom:56px}
  .metrics li{padding:20px 16px 20px 0}
  .metrics b{font-size:32px}
  .firsts li{grid-template-columns:76px 1fr;gap:0 14px;font-size:16px}
  .callout{font-size:28px}
  .features{columns:1}
  .sn__callout,.firsts{margin-bottom:64px}

  .demo__body{font-size:12px}

  .ir__sub{margin-bottom:14px}
  .ir__link{margin-bottom:32px}
  .ir__video{width:100%}
  /* the scooter drops below the film, centred, on its own row order */
  .ir__art{align-self:center;order:-1;max-width:280px;margin-bottom:4px}
  .ledger li{padding:20px 0}

  /* v6 §2: film first at its own AR, then the content row, stacked */
  .sec--sg{padding:0;min-height:0}
  .sg__content{padding:48px 20px 56px}
  .sg__grid{grid-template-columns:1fr;gap:32px;margin-top:32px}
  .sg__logo{top:20px;left:20px;width:clamp(160px,44vw,220px)}
  .sg__play{bottom:56px;right:16px}
  .sg__panels .panel{max-width:none}
  .glass{padding:20px;border-radius:14px}
  .price{font-size:40px}

  /* v6.1: once the row stacks, the media goes full-bleed — the card spans the
     viewport and the panel keeps the text exactly where it was (16px section
     gutter + 20px panel padding = 36px, now carried by the panel alone). */
  .sec--pf{padding:64px 0}
  .pf__row{grid-template-columns:1fr;aspect-ratio:auto;max-height:none}
  .pf__bg{aspect-ratio:16/9;object-position:50% 30%}
  .pf__panel{padding:28px 36px}
  .pf__stat{font-size:38px}
  .pf__logo{width:clamp(130px,34vw,180px)}

  .cr__ledger li{grid-template-columns:88px 1fr;gap:0 14px;font-size:15px}
  /* v6 §1.9: the float was never unset, so the first row's text column collapsed
     to ~68px. Unset the float only — the ledger stays a grid. */
  .cr__photo{float:none;width:auto;max-width:220px;margin:0 0 12px}
  .eq__f{font-size:20px}

  .cards{grid-template-columns:1fr;gap:20px}
  .pe__in .eyebrow{margin-bottom:18px}

  .fo__contact{margin-bottom:56px}
  .fo__mark-sub{font-size:10px}
}

@media (max-width:767px){
  .sec--hero{min-height:0}
  .hero__grid{min-height:0}
  .hero__body{
    width:100%;min-height:calc(100vh - 168px);justify-content:flex-start;
    padding:24px 16px 0 clamp(16px,4vw,48px);
  }
  .hero__art{display:none}
  .hero__mark-legal{margin-bottom:28px}
  /* contour art becomes a horizon strip below the offer rows */
  .contour--mobile{
    display:block;width:100vw;height:88px;font-size:14.6px;line-height:1;
    padding-left:16px;margin:40px 0 0;overflow:hidden;
  }
}

@media (max-width:480px){
  .metrics b{font-size:28px}
  /* v6 §1.6: the finer pen left line 3 carried by a hairline on black at 390 —
     hold the 2.5px desktop pen at 2px rather than 1.5px, with a sub-pixel
     reinforcement that is not a glow. */
  .ir__l3{-webkit-text-stroke-width:2px;text-shadow:0 0 .5px var(--iroll-green)}
}

/* ==========================================================================
   v6 · TASK 1 — MOBILE TYPE + TAP SYSTEM (≤768px only; nothing above 768 moves)
   ========================================================================== */
@media (max-width:768px){

  /* 1.1 caption floor — the 11px tier reads too small on a phone. Selectors are
     doubled where the base rule is more specific (.glass .tag, .cr__photo figcaption). */
  .tag, .glass .tag, .price__cap, .pf__cap, .eq__c, .chipnote, .statpair dt,
  .peak__cap, .platformcap, .colophoncap, .chartnote, .chartcap, .metrics i,
  .src, figcaption, .cr__photo figcaption {
    font-size:12.5px;line-height:1.45;
  }

  /* 1.2 contrast — moved OUT of this block; it now applies unconditionally at the
     top of the Murmurgo section (see "1.2 contrast (v6.fix)"). Nothing is left here
     so there is exactly one place that owns these values. */

  /* 1.3 tap targets — the ANCHOR carries the box (padding + cancelling margin, so
     the text does not move and the visual box is unchanged) */
  a.chip__name{display:inline-block;padding:14px 10px;margin:-14px -10px}
  .ir__link{display:inline-block;padding:12px 8px;margin:-12px -8px 20px}
  .signals a, .fo__contact a{display:inline-block;padding:12px 8px;margin:-12px -8px}

  /* 1.4 hanging indent for wrapped mono rows — the marker sits in the gutter */
  .signals li{padding-left:1.2em;text-indent:-1.2em}
  .signals li::before{
    position:static;display:inline-block;vertical-align:middle;
    width:6px;height:1px;margin:0 8px 0 0;background:var(--murmurgo-accent);
  }

  /* 1.7 SafariNow: break the 14-row platform wall, balance the metric labels
     (the partner run's columns:2 was dropped — see the note below) */
  .features{display:grid;grid-template-columns:1fr 1fr;gap:4px 16px;column-count:2;column-gap:16px}
  .features li{padding:0}
  /* 1.7 partner run — v6.fix: multicol is GONE from the colophon. The brief asked
     for columns:2, but a 2-up run cannot hold the longest name: "PICK N PAY
     SMARTSHOPPER" is 206px at 13px DM Mono + .06em, and the columns are 136px at
     320, 171px at 390, 182px at 414. It therefore either fragments across the column
     gap ("PICK N" | "N PAY" | "SMARTSHOPPER") or wraps inside its own box — both are
     a broken name. Names are atomic now (see .pp) and the run is a single column, in
     which the 14 names pack to ~4 wrapped lines. */
  .colophon .pp{display:inline-block}
  .metrics i{text-wrap:balance}

  /* 1.8 windsurf: the source is 960×960 — stop forcing it into the 3:2 crop */
  .cards li:nth-child(2) img{aspect-ratio:1/1;object-position:center}

  /* 1.9 (float lives in the ≤1023 block) — the ledger label column narrows so the
     text column clears 300px at 390 and the years stop squeezing the rows */
  .cr__ledger li{grid-template-columns:48px 1fr;gap:0 6px;font-size:16.5px}

  /* 2 · SafetyGrip content row — mockup card above the panels */
  .sg__content{padding:40px 20px 48px}
  .sg__grid{margin-top:28px}
  .sg__mockup-frame{max-width:340px;margin:32px auto}

  /* 3 · ProFilm — link rows keep their 44px */
  .pf__links{font-size:12.5px}

  /* v6.1 heading orphans — at phone width both section h3s drop a single short
     word onto its own line ("…with no / signal", "…shopify / b2b"); balance the
     two lines instead. ≤768 only: the desktop blocks are untouched. */
  .sg__head h3, .pf__panel h3{text-wrap:balance}
}

/* ==========================================================================
   REDUCED MOTION (§2.8 full fallback set)
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .js .rv{opacity:1;transform:none}
  .bar{width:var(--w)}
  .caret{animation:none !important}
  .ir__canvas{display:none}
  .ir__bg{display:block;opacity:.5}
}