/* Kruvaa: the look of arvindtogra.com (morning sky, navy ink, glass), shaped for an app */

@font-face {
  font-family: "Mona Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  font-stretch: 75% 125%;
  src: url("../fonts/mona-sans-latin-standard-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Mona Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 200 900;
  font-stretch: 75% 125%;
  src: url("../fonts/mona-sans-latin-ext-standard-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Tokens, from the arvindtogra.com brand kit */
:root {
  --ink: #12233C;
  --ink-2: #3E516B;
  --ink-3: #5F7189;
  --navy: #16294A;
  --deep: #1F3760;
  --steel: #2F4C78;
  --sky: #E6EDF4;
  --porcelain: #F4F7FB;
  --dawn: #E8A070;
  --dawn-deep: #C66A28;
  --gold: #E9962B;
  --hairline: #D5DEE8;

  /* charts */
  --c1: #3468B0; --c2: #DD7A35; --c3: #1E9A8A; --c4: #C08514; --c5: #8A4E9C; --c6: #4D9A50;
  --context: #A9B5C4;
  --grid: #E3E9F0; --axis: #C9D3DF;
  --good: #2E7D4F; --warn: #E0A100; --bad: #C0392B;
  --good-bg: #E3F1E8; --warn-bg: #FFF3CF; --bad-bg: #F8E1DE;

  --glass: rgb(255 255 255 / 0.56);
  --glass-strong: rgb(255 255 255 / 0.78);
  --glass-edge: rgb(255 255 255 / 0.88);
  --glass-shadow: 0 12px 32px -14px rgb(18 35 60 / 0.30);

  --font: "Mona Sans", "Helvetica Neue", Arial, sans-serif;
  --max: 80rem;
  --gutter: clamp(1rem, 4vw, 3rem);
  --hdr-h: 4.25rem;
  --tab-h: 4.1rem;
  --radius: 1.25rem;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }

body {
  margin: 0;
  min-height: 100svh;
  background: #E7EEF5;
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.5;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  padding-bottom: env(safe-area-inset-bottom);
}
/* the morning sky, painted once behind everything */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60rem 30rem at 85% -10%, rgb(255 214 180 / 0.55), transparent 60%),
    radial-gradient(70rem 36rem at 10% 0%, rgb(190 214 240 / 0.9), transparent 60%),
    linear-gradient(180deg, #DCE7F2 0%, #E7EEF5 45%, #EEF1F0 100%);
}
body.plain { display: grid; place-items: center; }

h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
svg { display: block; }
p { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }
a { color: inherit; }
button { font: inherit; color: inherit; }
img { max-width: 100%; height: auto; }

:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; border-radius: 0.5rem; }

.skip { position: absolute; left: 1rem; top: -4rem; z-index: 60; padding: 0.6rem 1rem; border-radius: 999px; background: var(--navy); color: #fff; font-weight: 600; text-decoration: none; }
.skip:focus { top: 1rem; }
.noscript { padding: 6rem 1rem; text-align: center; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Type */
.h1 { font-size: clamp(2rem, 5.2vw, 3.25rem); font-weight: 720; font-stretch: 105%; letter-spacing: -0.02em; line-height: 1.05; color: var(--navy); }
.h2 { font-size: clamp(1.45rem, 3vw, 1.9rem); font-weight: 700; letter-spacing: -0.015em; line-height: 1.15; color: var(--navy); }
.h3 { font-size: 1.15rem; font-weight: 700; line-height: 1.25; color: var(--navy); }
.lead { font-size: clamp(1.1rem, 2vw, 1.3rem); color: var(--ink-2); max-width: 44ch; }
.eyebrow { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.muted { color: var(--ink-3); }
.small { font-size: 0.9rem; }
.num { font-variant-numeric: tabular-nums; }
.pretty { max-width: 62ch; }

/* Glass */
.glass {
  background: var(--glass);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-shadow), inset 0 1px 0 rgb(255 255 255 / 0.95);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  backdrop-filter: blur(18px) saturate(170%);
}

/* Buttons and chips */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 3rem; padding: 0.7rem 1.4rem; border: 0; border-radius: 999px; cursor: pointer;
  font-size: 1rem; font-weight: 600; line-height: 1.2; text-decoration: none; white-space: nowrap; overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-gloss {
  background: linear-gradient(180deg, #36598F 0%, #1C335A 52%, #14274A 100%); color: #fff;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.5), inset 0 -3px 8px rgb(0 0 0 / 0.22), 0 14px 28px -12px rgb(20 39 74 / 0.65);
}
.btn-gloss::before { content: ""; position: absolute; inset: 1px 1px 52% 1px; border-radius: 999px 999px 18px 18px; background: linear-gradient(180deg, rgb(255 255 255 / 0.42), rgb(255 255 255 / 0.04)); pointer-events: none; }
.btn-glass { background: var(--glass); border: 1px solid var(--glass-edge); color: var(--ink); box-shadow: var(--glass-shadow); }
.btn-glass:hover { background: var(--glass-strong); }
.btn-sm { min-height: 2.4rem; padding: 0.45rem 1rem; font-size: 0.925rem; }
.btn-dawn { background: linear-gradient(180deg, #F2B384, #D8803E 60%, #C66A28); color: #2A1A0E; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.5), 0 12px 24px -12px rgb(198 106 40 / 0.7); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.55; pointer-events: none; }

.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip {
  display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.25rem; padding: 0.35rem 0.9rem; border-radius: 999px;
  border: 1px solid var(--glass-edge); background: var(--glass); color: var(--ink-2); font-size: 0.9rem; font-weight: 600; cursor: pointer; text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.chip:hover { background: var(--glass-strong); color: var(--ink); }
.chip[aria-pressed="true"], .chip.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.chip .dot { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: currentColor; }

/* icons inside buttons and chips take the text size */
.chip svg, .btn svg, .go svg, .door .go svg { width: 1em; height: 1em; flex: none; }

/* Status */
.status { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.15rem 0.6rem; border-radius: 999px; font-size: 0.8rem; font-weight: 700; white-space: nowrap; }
.status svg { width: 0.85rem; height: 0.85rem; }
.status.good { background: var(--good-bg); color: #1F5B38; }
.status.warn { background: var(--warn-bg); color: #6E4E00; }
.status.bad  { background: var(--bad-bg); color: #8E2A1F; }
.status.idle { background: rgb(255 255 255 / 0.6); color: var(--ink-3); }
.status.done { background: #E3F1E8; color: #1F5B38; }
.status.live { background: #DCE8F7; color: #1F3760; }

/* Header: a floating glass bar */
.hdr {
  position: sticky; top: 0.75rem; z-index: 40;
  width: min(var(--max), 100% - 2 * var(--gutter)); margin: 0.75rem auto 0;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.75rem;
  min-height: var(--hdr-h); padding: 0.4rem 0.6rem 0.4rem 0.9rem; border-radius: 999px;
}
.brand { display: inline-flex; align-items: center; gap: 0.55rem; font-size: 1.15rem; font-weight: 760; font-stretch: 105%; letter-spacing: 0.02em; text-decoration: none; white-space: nowrap; color: var(--navy); }
.brand .mark { width: 1.75rem; height: 1.75rem; }
.brand small { font-weight: 500; letter-spacing: 0; color: var(--ink-3); font-size: 0.85rem; }
/* The tagline: a pill in the brand's warm accent, next to the name on wide screens and under it on phones. */
.brand .tagline { display: inline-flex; align-items: center; margin-left: 0.3rem; padding: 0.3rem 0.8rem; border-radius: 999px; font-size: 0.875rem; font-weight: 700; font-stretch: 100%; letter-spacing: 0.01em; color: #fff; background: linear-gradient(135deg, #B45A1E, #93420F); box-shadow: 0 6px 16px -8px rgb(147 66 15 / 0.7), inset 0 1px 0 rgb(255 255 255 / 0.25); }
.hdr-nav { display: flex; gap: 0.15rem; justify-content: safe center; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.hdr-nav::-webkit-scrollbar { display: none; }
.hdr-nav a { display: inline-flex; align-items: center; min-height: 2.4rem; padding: 0.45rem 0.8rem; border-radius: 999px; font-size: 0.925rem; font-weight: 600; color: var(--ink-2); text-decoration: none; white-space: nowrap; }
.hdr-nav a:hover { background: rgb(255 255 255 / 0.65); color: var(--ink); }
.hdr-nav a[aria-current="page"] { background: var(--navy); color: #fff; }
.hdr-right { display: flex; align-items: center; gap: 0.4rem; grid-column: 3; justify-self: end; }
.door-switch { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.4rem; padding: 0.35rem 0.9rem; border-radius: 999px; font-size: 0.875rem; font-weight: 600; text-decoration: none; color: var(--ink-2); background: rgb(255 255 255 / 0.55); border: 1px solid var(--glass-edge); white-space: nowrap; }
.door-switch:hover { color: var(--ink); background: #fff; }
@media (max-width: 900px) { .door-switch.rm-link { display: none; } }   /* phones reach the World roadmap from About */
@media (max-width: 1100px) {
  .hdr-nav a { padding: 0.45rem 0.6rem; font-size: 0.875rem; }
  .hdr-nav a.more { display: none; }   /* Money and Roles stay reachable from the overview */
  .door-switch .long { display: none; }
}
@media (max-width: 720px) {
  .hdr { grid-template-columns: auto 1fr auto; padding-left: 0.75rem; }
  .hdr-nav { display: none; }
  .brand small { display: none; }
  /* the tagline moves under the name */
  .brand.with-tagline { display: grid; grid-template-columns: auto auto; column-gap: 0.55rem; row-gap: 0.2rem; align-items: center; }
  .brand.with-tagline .mark { grid-row: 1 / span 2; }
  .brand.with-tagline .tagline { grid-column: 2; margin-left: 0; padding: 0.2rem 0.6rem; font-size: 0.75rem; }
}

/* Bottom tab bar on phones */
.tabbar { position: fixed; left: 50%; bottom: max(0.6rem, env(safe-area-inset-bottom)); z-index: 40; transform: translateX(-50%); display: none; width: min(100% - 1.25rem, 32rem); padding: 0.3rem; border-radius: 999px; }
.tabbar ul { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
.tabbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.1rem; min-height: 3.2rem; padding: 0.3rem 0.1rem; border-radius: 999px; font-size: 0.75rem; font-weight: 700; color: var(--ink-3); text-decoration: none; letter-spacing: 0.01em; }
.tabbar a svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tabbar a[aria-current="page"] { background: var(--navy); color: #fff; }
@media (max-width: 720px) { .tabbar:not([hidden]) { display: block; } body.has-tabs { padding-bottom: calc(var(--tab-h) + 1.25rem + env(safe-area-inset-bottom)); } }

/* Page frame */
main { width: min(var(--max), 100% - 2 * var(--gutter)); margin: 1.5rem auto 3rem; }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; margin: 0.5rem 0 1.25rem; }
.page-head .lead { margin-top: 0.4rem; }
.section { margin-top: 2rem; }
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 1.5rem; margin-bottom: 0.9rem; }
.section-head p { color: var(--ink-3); font-size: 0.95rem; }

.grid { display: grid; gap: 1rem; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr)); }
.cols { display: grid; gap: 1.25rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .cols-2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } .cols-1-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); } .cols-1-1 { grid-template-columns: 1fr 1fr; } }
.only-narrow { display: block; } .only-wide { display: none; }
@media (min-width: 900px) { .only-narrow { display: none; } .only-wide { display: block; } }

/* Cards */
.card { padding: 1.1rem 1.2rem; border-radius: var(--radius); background: var(--glass); border: 1px solid var(--glass-edge); box-shadow: var(--glass-shadow), inset 0 1px 0 rgb(255 255 255 / 0.95); }
.card.strong { background: var(--glass-strong); }
.card.navy { background: linear-gradient(160deg, #1F3760, #16294A); color: #fff; border-color: #2F4C78; }
.card.navy .muted, .card.navy .eyebrow { color: #B9C7DA; }
.card.navy .h2, .card.navy .h3 { color: #fff; }
.card .h3 + p { margin-top: 0.35rem; }
.card-link { display: block; text-decoration: none; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.card-link:hover { transform: translateY(-2px); box-shadow: 0 18px 36px -16px rgb(18 35 60 / 0.4); }
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; }
.card-foot { margin-top: 0.9rem; padding-top: 0.75rem; border-top: 1px solid var(--hairline); font-size: 0.9rem; color: var(--ink-3); }

/* Stat tiles */
.stats { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); }
.stat { padding: 0.9rem 1rem; border-radius: 1rem; background: var(--glass-strong); border: 1px solid var(--glass-edge); }
.stat .label { font-size: 0.8rem; font-weight: 700; color: var(--ink-3); letter-spacing: 0.02em; }
.stat .value { font-size: clamp(1.5rem, 3vw, 1.9rem); font-weight: 720; font-stretch: 105%; letter-spacing: -0.02em; line-height: 1.1; color: var(--navy); font-variant-numeric: tabular-nums; margin-top: 0.2rem; }
.stat .value small { font-size: 0.65em; font-weight: 600; color: var(--ink-2); }
.stat .delta { margin-top: 0.25rem; font-size: 0.85rem; font-weight: 600; color: var(--ink-3); }
.stat .delta.up { color: var(--good); } .stat .delta.down { color: var(--bad); } .stat .delta.flat { color: var(--ink-3); }

/* Lists and tables */
.rows { display: grid; }
.row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.5rem 1rem; padding: 0.75rem 0; border-top: 1px solid var(--hairline); }
.row:first-child { border-top: 0; }
.row .t { font-weight: 600; } .row .s { font-size: 0.9rem; color: var(--ink-3); }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 1rem; }
table { width: 100%; border-collapse: collapse; font-size: 0.925rem; }
th, td { padding: 0.6rem 0.7rem; text-align: left; vertical-align: top; border-top: 1px solid var(--hairline); }
th { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); border-top: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
tr.hl td { background: rgb(255 255 255 / 0.5); }

/* Stage strip and loop */
.loop { position: relative; }
.stages { display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11.5rem), 1fr)); }
.stage { position: relative; padding: 0.85rem 0.95rem 0.9rem; border-radius: 1rem; background: var(--glass-strong); border: 1px solid var(--glass-edge); text-decoration: none; color: inherit; display: grid; gap: 0.35rem; align-content: start; min-height: 8.5rem; transition: transform 0.2s ease; }
.stage:hover { transform: translateY(-2px); }
.stage .n { font-size: 0.75rem; font-weight: 800; color: var(--ink-3); letter-spacing: 0.05em; }
.stage .name { font-weight: 700; line-height: 1.2; color: var(--navy); }
.stage .who { font-size: 0.82rem; color: var(--ink-3); }
.stage .kpi { font-size: 1.15rem; font-weight: 720; font-variant-numeric: tabular-nums; color: var(--ink); margin-top: 0.2rem; }
.stage .kpi small { font-size: 0.75rem; font-weight: 600; color: var(--ink-3); display: block; }
.stage.now { outline: 2px solid var(--navy); outline-offset: 0; }
.stage.past { opacity: 0.92; }
.stage .bar { height: 0.35rem; border-radius: 999px; background: var(--sky); overflow: hidden; margin-top: 0.15rem; }
.stage .bar i { display: block; height: 100%; background: var(--c1); border-radius: 999px; }
.stage.bad .bar i { background: var(--bad); } .stage.warn .bar i { background: var(--warn); } .stage.good .bar i { background: var(--good); }
.loopback { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.7rem; font-size: 0.9rem; color: var(--ink-3); }
.loopback svg { width: 2rem; height: 1.2rem; stroke: var(--dawn-deep); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.tiers { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(8.5rem, 1fr); gap: 0.5rem; overflow-x: auto; padding-bottom: 0.4rem; scroll-snap-type: x proximity; }
.tier { scroll-snap-align: start; padding: 0.7rem 0.8rem; border-radius: 0.9rem; background: rgb(255 255 255 / 0.55); border: 1px solid var(--glass-edge); display: grid; gap: 0.2rem; align-content: start; }
.tier .name { font-weight: 700; font-size: 0.925rem; color: var(--navy); }
.tier .s { font-size: 0.8rem; color: var(--ink-3); }
.tier .v { font-weight: 700; font-variant-numeric: tabular-nums; }
.tier.hit { background: var(--warn-bg); border-color: #F0D58A; }
.tier.hit.bad { background: var(--bad-bg); border-color: #EBB8B1; }

/* Programme clock */
.clock { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.75rem 1rem; padding: 0.75rem 1rem; border-radius: 1rem; }
.clock .when { font-weight: 720; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--navy); }
.clock .when small { display: block; font-size: 0.75rem; font-weight: 600; color: var(--ink-3); }
.clock input[type="range"] { width: 100%; height: 2.25rem; accent-color: var(--navy); margin: 0; cursor: pointer; }
.clock .ctl { display: flex; gap: 0.3rem; }
.clock .ctl button { width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 1px solid var(--glass-edge); background: rgb(255 255 255 / 0.7); cursor: pointer; display: grid; place-items: center; }
.clock .ctl button:hover { background: #fff; }
.clock .ctl svg { width: 1rem; height: 1rem; fill: var(--navy); }
.clock .marks { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--ink-3); margin-top: 0; }
@media (max-width: 560px) { .clock { grid-template-columns: 1fr auto; } .clock .track { grid-column: 1 / -1; } }

.banner { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; padding: 0.7rem 1rem; border-radius: 1rem; background: #FFF1DF; border: 1px solid #F3D1AE; font-size: 0.925rem; }
.banner.calm { background: #E4EEF9; border-color: #C7D9EE; }
.banner .grow { flex: 1 1 14rem; }

/* Timeline (gantt-ish) */
.gantt { display: grid; gap: 0.3rem; }
.grow-row { display: grid; grid-template-columns: minmax(7rem, 11rem) minmax(0, 1fr); align-items: center; gap: 0.6rem; font-size: 0.85rem; }
.grow-row .lbl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink-2); font-weight: 600; }
.grow-row .track { position: relative; height: 1.1rem; background: rgb(255 255 255 / 0.5); border-radius: 999px; overflow: hidden; }
.grow-row .bar { position: absolute; top: 0.15rem; bottom: 0.15rem; border-radius: 999px; background: var(--c1); }
.grow-row .bar.base { background: var(--context); opacity: 0.8; }
.grow-row .bar.late { background: var(--bad); }
.grow-row .bar.gate { width: 0.9rem; border-radius: 0.2rem; transform: rotate(45deg) scale(0.8); background: var(--dawn-deep); }
.grow-row .now { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--navy); }
@media (max-width: 560px) { .grow-row { grid-template-columns: minmax(5.5rem, 7rem) minmax(0, 1fr); } }

/* Loop steps (develop board) */
.loopsteps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.25rem; }
.loopsteps span { font-size: 0.75rem; font-weight: 700; text-align: center; padding: 0.3rem 0.1rem; border-radius: 0.5rem; background: rgb(255 255 255 / 0.5); color: var(--ink-3); }
.loopsteps span.done { background: #DCE8F7; color: var(--deep); }
.loopsteps span.now { background: var(--navy); color: #fff; }
.iter { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr) auto; gap: 0.5rem 0.8rem; padding: 0.6rem 0; border-top: 1px solid var(--hairline); font-size: 0.925rem; align-items: start; }
.iter .m { font-weight: 700; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.iter .k { display: inline-block; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--deep); margin-right: 0.4rem; }
.iter .d { color: var(--ink-2); font-size: 0.875rem; }
.iter.future { opacity: 0.55; }

/* Trace tree */
.tree { display: grid; gap: 0.2rem; }
.tree details { border-top: 1px solid var(--hairline); }
.tree details:first-child { border-top: 0; }
.tree summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1.25rem minmax(0, 1fr) auto; align-items: center; gap: 0.6rem; padding: 0.6rem 0; }
.tree summary::-webkit-details-marker { display: none; }
.tree summary .tw { width: 1.25rem; height: 1.25rem; display: grid; place-items: center; color: var(--ink-3); }
.tree summary .tw svg { width: 0.9rem; height: 0.9rem; stroke: currentColor; fill: none; stroke-width: 2; transition: transform 0.2s ease; }
.tree details[open] > summary .tw svg { transform: rotate(90deg); }
.tree .leaf summary .tw { visibility: hidden; }
.tree .kids { padding-left: 1.6rem; }
.tree .nm { font-weight: 600; } .tree .sb { font-size: 0.82rem; color: var(--ink-3); }
.tree .tier-tag { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.05em; color: var(--deep); background: #DCE8F7; padding: 0.1rem 0.45rem; border-radius: 999px; white-space: nowrap; }
.tree .flag { background: var(--bad-bg); color: #8E2A1F; }

/* Charts */
.chart { position: relative; width: 100%; max-width: 56rem; }
.chart svg { width: 100%; height: auto; overflow: visible; font-family: var(--font); }
.chart .grid line { stroke: var(--grid); stroke-width: 1; }
.chart .axis line, .chart .axis path { stroke: var(--axis); stroke-width: 1; }
.chart text { fill: var(--ink-3); font-size: 12px; }
.chart text.v { fill: var(--ink); font-weight: 700; }
.chart .line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .area { opacity: 0.12; }
.chart .hit { fill: transparent; }
.chart .marker { stroke: #fff; stroke-width: 2; }
.chart .now { stroke: var(--navy); stroke-width: 1.5; stroke-dasharray: 3 3; }
.chart .hover { stroke: var(--ink-3); stroke-width: 1; }
.legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; margin-top: 0.5rem; font-size: 0.85rem; color: var(--ink-2); }
.legend span { display: inline-flex; align-items: center; gap: 0.4rem; }
.legend i { width: 0.9rem; height: 0.25rem; border-radius: 999px; background: var(--c1); }
.legend i.dash { background: repeating-linear-gradient(90deg, var(--context) 0 3px, transparent 3px 6px); }
.tip { position: fixed; z-index: 50; max-width: 18rem; padding: 0.5rem 0.7rem; border-radius: 0.7rem; background: var(--navy); color: #fff; font-size: 0.85rem; line-height: 1.35; pointer-events: none; box-shadow: 0 10px 24px -10px rgb(18 35 60 / 0.6); }
.tip b { color: #FFD6B8; }

.bars { display: grid; gap: 0.45rem; }
.barrow { display: grid; grid-template-columns: minmax(6rem, 10rem) minmax(0, 1fr) auto; align-items: center; gap: 0.6rem; font-size: 0.875rem; }
.barrow .lbl { color: var(--ink-2); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barrow .track { display: block; height: 0.75rem; border-radius: 999px; background: rgb(255 255 255 / 0.55); overflow: hidden; }
.barrow .fill { display: block; height: 100%; border-radius: 999px; background: var(--c1); }
.barrow .val { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--ink); white-space: nowrap; min-width: 3.2rem; }

/* Front door */
.door-hero { display: grid; gap: 1.25rem; padding: clamp(1.5rem, 4vw, 3rem) 0 1rem; }
.doors { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); margin-top: 0.5rem; }
.door { display: grid; gap: 0.6rem; align-content: start; padding: 1.4rem 1.4rem 1.5rem; border-radius: 1.5rem; text-decoration: none; color: inherit; min-height: 14rem; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.door:hover { transform: translateY(-3px); box-shadow: 0 24px 44px -20px rgb(18 35 60 / 0.5); }
.door .h2 { margin-top: 0.3rem; }
.door .go { margin-top: auto; padding-top: 0.8rem; font-weight: 700; color: var(--deep); display: inline-flex; align-items: center; gap: 0.4rem; }
.door .go svg { width: 1.1rem; height: 1.1rem; stroke: currentColor; fill: none; stroke-width: 2; }
.door.oem { background: linear-gradient(160deg, rgb(255 255 255 / 0.75), rgb(255 255 255 / 0.5)); border: 1px solid var(--glass-edge); }
.door.t1 { background: linear-gradient(160deg, #FFF3E6, #FFE6CF); border: 1px solid #F3D1AE; }
.doors.prog .door { min-height: 11rem; cursor: pointer; font: inherit; text-align: left; }
.doors.prog .door.on { outline: 2px solid var(--navy); outline-offset: 0; }
.doors.prog .door .muted { color: var(--ink-2); }
.pills { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.4rem; }
.pills span { font-size: 0.8rem; font-weight: 600; padding: 0.25rem 0.65rem; border-radius: 999px; background: rgb(255 255 255 / 0.7); color: var(--ink-2); }
.story-list { counter-reset: s; display: grid; gap: 0.6rem; }
.story-list li { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: 0.6rem; align-items: start; }
.story-list li > * { grid-column: 2; }
.story-list li::before { grid-column: 1; grid-row: 1; }
.story-list li::before { counter-increment: s; content: counter(s); width: 1.75rem; height: 1.75rem; border-radius: 50%; display: grid; place-items: center; background: var(--navy); color: #fff; font-size: 0.8rem; font-weight: 800; }

/* Tier 1 home */
.today { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.today .card { display: grid; gap: 0.6rem; align-content: start; }
.item { display: grid; grid-template-columns: 0.55rem minmax(0, 1fr); gap: 0.6rem; align-items: start; padding: 0.5rem 0; border-top: 1px solid var(--hairline); }
.item:first-of-type { border-top: 0; }
.item i { width: 0.55rem; height: 0.55rem; border-radius: 50%; margin-top: 0.5rem; background: var(--c1); }
.item.warn i { background: var(--warn); } .item.bad i { background: var(--bad); } .item.good i { background: var(--good); }
.item .t { font-weight: 600; } .item .s { font-size: 0.875rem; color: var(--ink-3); }
.item .act { margin-top: 0.2rem; font-size: 0.875rem; color: var(--deep); font-weight: 600; }
.flow { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(7.5rem, 1fr); gap: 0.4rem; overflow-x: auto; padding-bottom: 0.4rem; }
.flow .step { padding: 0.65rem 0.7rem; border-radius: 0.8rem; background: rgb(255 255 255 / 0.55); border: 1px solid var(--glass-edge); display: grid; gap: 0.2rem; align-content: start; }
.flow .step .n { font-size: 0.75rem; font-weight: 800; color: var(--ink-3); letter-spacing: 0.05em; }
.flow .step .name { font-weight: 700; font-size: 0.9rem; color: var(--navy); line-height: 1.2; }
.flow .step .s { font-size: 0.8rem; color: var(--ink-3); }
.flow .step.done { background: #E3F1E8; border-color: #BFDFCB; }
.flow .step.now { background: var(--navy); color: #fff; border-color: var(--navy); }
.flow .step.now .n, .flow .step.now .s { color: #B9C7DA; } .flow .step.now .name { color: #fff; }

/* Week in the life */
.week { display: grid; gap: 0.75rem; }
.day { display: grid; grid-template-columns: 4.25rem minmax(0, 1fr); gap: 0.8rem; }
.day .d { font-weight: 800; color: var(--navy); padding-top: 1rem; }
.day .d small { display: block; font-weight: 600; color: var(--ink-3); font-size: 0.75rem; }
.day .card { display: grid; gap: 0.5rem; }
.day .flag { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.5rem; padding: 0.6rem 0.8rem; border-radius: 0.8rem; background: #FFF1DF; border: 1px solid #F3D1AE; font-size: 0.925rem; }
.day .flag b { color: var(--dawn-deep); white-space: nowrap; }
.day .did { font-size: 0.925rem; color: var(--ink-2); }
.day .did b { color: var(--deep); }
@media (max-width: 560px) { .day { grid-template-columns: 1fr; gap: 0.3rem; } .day .d { padding-top: 0; } }

/* Both sides */
.sides { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.side-oem { border-left: 4px solid var(--c1); } .side-t1 { border-left: 4px solid var(--c2); }

/* Car drawing */
.car { width: 100%; max-width: 40rem; margin: 0 auto; }
.car .body { fill: #fff; stroke: var(--navy); stroke-width: 2; }
.car .part { fill: var(--sky); stroke: var(--steel); stroke-width: 1.2; transition: fill 0.2s ease; }
.car .part.hl { fill: var(--dawn); stroke: var(--dawn-deep); }
.car text { font-size: 12px; font-weight: 700; fill: var(--ink-2); }

/* What-if */
.scn { display: grid; gap: 0.5rem; }
.scn-btn { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.3rem 0.75rem; align-items: center; text-align: left; padding: 0.7rem 0.9rem; border-radius: 0.9rem; border: 1px solid var(--glass-edge); background: rgb(255 255 255 / 0.55); cursor: pointer; }
.scn-btn:hover { background: #fff; }
.scn-btn[aria-pressed="true"] { background: var(--navy); color: #fff; border-color: var(--navy); }
.scn-btn .t { font-weight: 700; } .scn-btn .s { font-size: 0.82rem; color: var(--ink-3); grid-column: 1 / -1; }
.scn-btn[aria-pressed="true"] .s { color: #B9C7DA; }
.ripple { display: grid; gap: 0.4rem; }
.ripple li { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr); gap: 0.6rem; align-items: start; padding: 0.5rem 0.7rem; border-radius: 0.8rem; background: rgb(255 255 255 / 0.5); opacity: 0; transform: translateX(-6px); animation: rip 0.4s ease forwards; }
.ripple li .m { font-weight: 800; color: var(--dawn-deep); font-variant-numeric: tabular-nums; }
.ripple li .st { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-3); }
@keyframes rip { to { opacity: 1; transform: none; } }
.compare { display: grid; gap: 0.5rem; }
.cmp { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 0.4rem; align-items: center; padding: 0.5rem 0; border-top: 1px solid var(--hairline); font-size: 0.925rem; }
.cmp:first-child { border-top: 0; font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-3); }
.cmp .num { text-align: right; font-weight: 700; }
.cmp .worse { color: var(--bad); } .cmp .better { color: var(--good); }

/* Role lens */
.roles { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.handoff { display: grid; gap: 0.5rem; }
.handoff li { display: grid; grid-template-columns: 1.4rem minmax(0, 1fr); gap: 0.5rem; align-items: start; }
.handoff svg { width: 1.2rem; height: 1.2rem; stroke: var(--deep); fill: none; stroke-width: 2; margin-top: 0.15rem; }

/* Footer note */
.foot { margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--hairline); font-size: 0.85rem; color: var(--ink-3); display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: space-between; }
.foot a { color: var(--ink-2); }

/* Not found */
.notfound { max-width: 34rem; padding: 2rem; text-align: center; display: grid; gap: 1rem; justify-items: center; }
.notfound h1 { font-size: 2rem; color: var(--navy); font-weight: 720; }

/* Settings */
.settings { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; font-size: 0.9rem; }
select { font: inherit; font-size: 0.925rem; padding: 0.4rem 0.7rem; border-radius: 999px; border: 1px solid var(--glass-edge); background: rgb(255 255 255 / 0.75); color: var(--ink); }

/* Large screens: content stays centred, never stretched */
@media (min-width: 1800px) { :root { --max: 86rem; } body { font-size: 1.125rem; } }
@media print { .hdr, .tabbar, .tip { display: none !important; } body { background: #fff; } .card, .stat { box-shadow: none; } }

/* The first screen is written into index.html so it paints before the script; on a deep link that copy
   stays invisible until the app renders the page asked for (js/route.js adds .deep). */
.deep [data-pre] { visibility: hidden; }

/* ---- Front door ------------------------------------------------------------------------------ */
.ld-hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; align-items: center; padding: clamp(1rem, 3vw, 2.5rem) 0 0.5rem; }
@media (min-width: 1000px) { .ld-hero { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 3rem; min-height: calc(100svh - 9rem); } }
.ld-kicker { font-size: 0.95rem; font-weight: 600; color: var(--deep); letter-spacing: 0.01em; }
/* The hero says first that this is a demonstration: a small outlined tag and a plain line beside it. */
.ld-demo { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.55rem; margin-bottom: 0.9rem; font-size: 0.9rem; font-weight: 600; color: var(--ink-2); }
.ld-demo span { padding: 0.1rem 0.6rem; border: 1.5px solid #A8541B; border-radius: 999px; font-size: 0.8rem; font-weight: 760; letter-spacing: 0.01em; color: #A8541B; background: #fff; }
.ld-h1 { font-size: clamp(2.3rem, 4.4vw, 3.5rem); font-weight: 760; font-stretch: 118%; letter-spacing: -0.03em; line-height: 1.02; color: var(--navy); max-width: 15ch; text-wrap: balance; }
.ld-lead { margin-top: 1.1rem; font-size: clamp(1.1rem, 1.6vw, 1.3rem); line-height: 1.5; color: var(--ink-2); max-width: 40ch; }
.ld-cta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.6rem; }
.ld-proof { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem 1.5rem; margin-top: 2.2rem; padding-top: 1.2rem; border-top: 1px solid var(--hairline); color: var(--ink-2); font-size: 0.95rem; line-height: 1.3; }
@media (min-width: 560px) { .ld-proof { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ld-proof b { display: block; font-size: 1.9rem; font-weight: 720; font-stretch: 105%; letter-spacing: -0.02em; color: var(--navy); font-variant-numeric: tabular-nums; }

.ld-figure { position: relative; margin: 0 auto; width: min(100%, 34rem); }
.ld-figure::before { content: ""; position: absolute; inset: 6% 6% 10% 6%; border-radius: 50%; background: radial-gradient(closest-side, rgb(255 236 220 / 0.95), rgb(255 236 220 / 0) 72%); z-index: -1; }
.ld-figure figcaption { margin-top: 0.4rem; text-align: center; font-size: 0.875rem; color: var(--ink-3); }
.ring { width: 100%; height: auto; font-family: var(--font); overflow: visible; }
.ring .base { fill: none; stroke: rgb(255 255 255 / 0.85); stroke-width: 16; }
.ring .prog { fill: none; stroke: var(--navy); stroke-width: 16; stroke-linecap: round; }
.ring .rn circle { fill: #fff; stroke: var(--steel); stroke-width: 2; }
.ring .rn.done circle { fill: var(--navy); stroke: var(--navy); }
.ring .rn.now circle { fill: var(--dawn); stroke: #fff; stroke-width: 3; }
.ring .rn.warn circle { fill: var(--warn); stroke: #fff; stroke-width: 3; }
.ring .rn.bad circle { fill: var(--bad); stroke: #fff; stroke-width: 3; }
.ring .rn .halo { fill: none; stroke: var(--dawn-deep); stroke-width: 2; opacity: 0.6; transform-box: fill-box; transform-origin: center; animation: halo 2.4s ease-out infinite; }
.ring .rn text { font-size: 15px; font-weight: 600; fill: var(--ink-2); }
.ring .rn.now text { fill: var(--navy); font-weight: 760; }
.ring .flow circle { fill: var(--dawn-deep); }
.ring .flow { transform-box: view-box; transform-origin: 280px 280px; animation: orbit 36s linear infinite; }
.ring .centre .when { font-size: 46px; font-weight: 720; letter-spacing: -0.02em; fill: var(--navy); }
.ring .centre .sub { font-size: 16px; fill: var(--ink-3); }
.ring .centre .num { font-size: 17px; font-weight: 600; fill: var(--ink-2); }
@keyframes orbit { to { transform: rotate(360deg); } }
@keyframes halo { 0% { transform: scale(0.6); opacity: 0.7; } 100% { transform: scale(1.5); opacity: 0; } }
/* Phones: the drawing spans the screen edge to edge; under 480px its type is set larger and the view
   box widens (the view adds .narrow then). */
@media (max-width: 600px) {
  .ld-figure { width: auto; margin: 0 calc(-1 * var(--gutter)); }
  .ld-figure figcaption { padding: 0 var(--gutter); }
}
.ring.narrow .rn text { font-size: 23px; }
.ring.narrow .centre .when { font-size: 56px; }
.ring.narrow .centre .sub, .ring.narrow .centre .num { font-size: 23px; }
.ld-figure:has(.ring.narrow)::before { inset: 6% 16% 10% 16%; }

/* The three spaces. Each opens with a short label in the warm accent, a heading and a lead. */
.ld-space { margin-top: clamp(3.5rem, 8vw, 6rem); scroll-margin-top: calc(var(--hdr-h) + 1.5rem); }
.ld-space:focus { outline: none; }   /* focus lands here after a jump from the hero; the section itself is not a control */
.ld-head { display: grid; gap: 0.4rem; margin-bottom: 1.6rem; max-width: 62ch; }
.ld-head p { color: var(--ink-3); }
.ld-head .ld-label { font-size: 0.95rem; font-weight: 700; color: var(--dawn-deep); }
.ld-h2 { font-size: clamp(1.7rem, 3.6vw, 2.4rem); font-weight: 720; font-stretch: 105%; letter-spacing: -0.022em; line-height: 1.08; color: var(--navy); }
.ld-sub { margin: 2.25rem 0 1rem; display: grid; gap: 0.2rem; }
.ld-sub p { color: var(--ink-3); }

/* Vehicle types: a row of drawings. Cars are live; the others say what changes for them. */
.ld-types { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.ld-type { display: grid; gap: 0.4rem; grid-template-rows: auto auto 1fr auto auto; align-content: start; padding: 1.1rem 1.2rem 1.2rem; border-radius: 1.4rem; border: 1px solid var(--glass-edge); background: rgb(255 255 255 / 0.5); }
.ld-type.live { background: linear-gradient(170deg, rgb(255 255 255 / 0.85), rgb(255 255 255 / 0.6)); border-color: var(--steel); box-shadow: var(--glass-shadow); }
.ld-type .sil { width: 100%; max-width: 15rem; height: auto; margin: 0 0 0.4rem -0.2rem; }
.ld-type h3 { font-size: 1.1rem; font-weight: 720; color: var(--navy); letter-spacing: -0.01em; }
.ld-type p { font-size: 0.9rem; color: var(--ink-2); line-height: 1.45; }
.ld-state { justify-self: start; margin-top: 0.3rem; padding: 0.22rem 0.65rem; border-radius: 999px; font-size: 0.8rem; font-weight: 700; color: var(--ink-3); background: rgb(255 255 255 / 0.8); border: 1px solid var(--glass-edge); }
.ld-state.live { color: #fff; background: var(--navy); border-color: var(--navy); }
.ld-ask { justify-self: start; min-height: 2.25rem; padding: 0.3rem 0; border: 0; background: none; font: inherit; font-size: 0.9rem; font-weight: 600; color: var(--deep); text-decoration: underline; text-underline-offset: 0.15em; cursor: pointer; }
.ld-ask:hover { color: var(--navy); }
@media (max-width: 600px) {
  /* Phones: one vehicle type per row, the drawing on the left and the words beside it. */
  .ld-types { grid-template-columns: minmax(0, 1fr); gap: 0.7rem; }
  .ld-type { grid-template-columns: 5.75rem minmax(0, 1fr); grid-template-rows: none; column-gap: 0.9rem; row-gap: 0.3rem; align-items: start; padding: 0.95rem 1rem 1rem; }
  .ld-type .sil { grid-row: 1 / span 4; width: 100%; max-width: none; margin: 0.15rem 0 0; }
  .ld-type > :not(.sil) { grid-column: 2; }
  .ld-type p { font-size: 0.875rem; }
}

.ld-progs { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
.ld-prog { display: grid; gap: 0.25rem; align-content: start; justify-items: start; text-align: left; font: inherit; color: inherit; text-decoration: none; cursor: pointer;
  padding: 1.4rem 1.5rem 1.5rem; border-radius: 1.5rem; border: 1px solid var(--glass-edge); background: linear-gradient(170deg, rgb(255 255 255 / 0.78), rgb(255 255 255 / 0.5)); box-shadow: var(--glass-shadow); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.ld-prog:hover { transform: translateY(-2px); }
.ld-prog.on { outline: 2px solid var(--navy); outline-offset: 0; }
.ld-prog .sil { width: 100%; max-width: 22rem; height: auto; margin: 0 0 0.8rem -0.25rem; }
.ld-prog:hover .ld-prog-state, .ld-comp:hover .ld-prog-state { background: var(--navy); color: #fff; border-color: var(--navy); }

/* Component makers: three drawings, each a door. */
.ld-comps { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
.ld-comp { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: 1rem; align-items: start; padding: 1.3rem 1.4rem 1.4rem; border-radius: 1.5rem; text-decoration: none; color: inherit; border: 1px solid var(--glass-edge); background: linear-gradient(170deg, rgb(255 255 255 / 0.78), rgb(255 255 255 / 0.5)); box-shadow: var(--glass-shadow); transition: transform 0.2s ease; }
.ld-comp:hover { transform: translateY(-2px); }
.ld-comp .pic { width: 6rem; height: auto; }
.ld-comp-body { display: grid; gap: 0.3rem; justify-items: start; }
.ld-comp-name { font-size: 1.3rem; font-weight: 720; letter-spacing: -0.015em; color: var(--navy); }
.ld-comp-type { font-size: 0.875rem; font-weight: 600; color: var(--dawn-deep); }
.ld-comp-what { font-size: 0.925rem; color: var(--ink-2); line-height: 1.45; }
.pic .ringline { fill: none; stroke: var(--navy); stroke-width: 5; }
.pic .shine { fill: none; stroke: #D5E2F0; stroke-width: 2.5; stroke-linecap: round; }
.pic .stitch { fill: none; stroke: var(--dawn); stroke-width: 2; stroke-dasharray: 3 4; }
@media (max-width: 480px) {
  /* Phones: the drawing sits above the words, so the words get the card's full width. */
  .ld-comp { grid-template-columns: minmax(0, 1fr); gap: 0.6rem; }
  .ld-comp .pic { width: 5rem; }
}
.ld-note { margin-top: 1.25rem; font-size: 0.95rem; color: var(--ink-3); max-width: 70ch; }

/* Talk to me: a navy panel at the foot of the page, the one place that asks for anything. */
.ld-bd { padding: clamp(1.5rem, 4vw, 3rem); border-radius: 1rem; color: #fff; background: linear-gradient(160deg, #1F3760, #16294A 60%, #12233C); box-shadow: 0 30px 60px -30px rgb(18 35 60 / 0.6); }
.ld-bd .ld-head { margin-bottom: 1.25rem; }
.ld-bd .ld-h2 { color: #fff; }
.ld-bd .ld-head p { color: #C7D3E3; }
.ld-contact-links { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.ld-bd .btn-glass { background: rgb(255 255 255 / 0.12); border-color: rgb(255 255 255 / 0.25); color: #fff; box-shadow: none; }
.ld-bd .btn-glass:hover { background: rgb(255 255 255 / 0.2); }
.ld-more { display: inline-flex; align-items: center; margin-top: 1rem; min-height: 2.4rem; color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 0.15em; }
@media (max-width: 600px) {
  /* Phones: the navy panel runs edge to edge. */
  .ld-bd { margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); border-radius: 0; padding: 1.75rem var(--gutter); }
}
.ld-type .btn { justify-self: start; margin-top: 0.4rem; }

/* Work with Kruvaa, the page */
.wk-steps { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); counter-reset: wk; }
.wk-steps li { counter-increment: wk; }
.wk-step-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.5rem; }
.wk-step-head .h3::before { content: counter(wk) ". "; color: var(--dawn-deep); }
.wk-when { font-size: 0.85rem; font-weight: 600; color: var(--ink-3); white-space: nowrap; }
.wk-dl { display: grid; gap: 0.15rem; margin-top: 0.9rem; font-size: 0.9rem; }
.wk-dl dt { font-weight: 700; color: var(--navy); }
.wk-dl dd { color: var(--ink-2); margin: 0 0 0.6rem; }
.wk-faq { display: grid; gap: 0.2rem 0; margin-top: 0.5rem; }
.wk-faq dt { font-weight: 700; color: var(--navy); margin-top: 0.6rem; }
.wk-faq dd { color: var(--ink-2); margin: 0; }
.wk-contact { display: grid; gap: 0.6rem; margin-top: 1rem; max-width: 34rem; }
.wk-contact .btn { justify-content: space-between; gap: 1rem; white-space: normal; text-align: left; }
.wk-contact .btn small { font-weight: 500; font-size: 0.85rem; opacity: 0.85; }
ul.plain { display: grid; gap: 0.45rem; margin-top: 0.5rem; color: var(--ink-2); }
ul.plain li { padding-left: 1rem; position: relative; }
ul.plain li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--steel); }
/* Vehicles and components as wireframes: outlines in ink on paper, glass tinted, lamps in dawn */
.sil .body { fill: var(--wf-bg); stroke: var(--wf-ink); stroke-width: 2; stroke-linejoin: round; }
.sil .glass { fill: var(--wf-glass); stroke: var(--wf-ink); stroke-width: 1.2; stroke-linejoin: round; }
.sil .wheel { fill: var(--wf-bg); stroke: var(--wf-ink); stroke-width: 2; }
.sil .hub { fill: none; stroke: var(--wf-ink); stroke-width: 1.2; }
.sil .lamp, .sil .port { fill: var(--wf-hot); }
.sil .rail { stroke: var(--wf-ink); stroke-width: 2; stroke-linecap: round; fill: none; }
.sil .pipe { stroke: var(--wf-ink); stroke-width: 2.4; stroke-linecap: round; fill: none; }
.pic.sil .ringline { stroke: var(--wf-ink); stroke-width: 2.5; }
.ld-prog-name { font-size: 1.45rem; font-weight: 720; letter-spacing: -0.015em; color: var(--navy); }
.ld-prog-kind { color: var(--ink-3); }
.ld-prog-specs { margin-top: 0.4rem; font-size: 0.9rem; color: var(--ink-2); }
.ld-prog-state { display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 0.9rem; min-height: 2.25rem; padding: 0.3rem 0.9rem; border-radius: 999px; font-size: 0.9rem; font-weight: 700; color: var(--deep); background: rgb(255 255 255 / 0.7); border: 1px solid var(--glass-edge); }
.ld-prog.on .ld-prog-state { background: var(--navy); color: #fff; border-color: var(--navy); }
.ld-prog-state svg { width: 1em; height: 1em; }

.ld-chain { position: relative; padding: 0.5rem 0 0; }
.ld-chain ol { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(6.2rem, 1fr); gap: 0.5rem; overflow-x: auto; scrollbar-width: none; padding: 0 0 0.5rem; }
.ld-chain ol::-webkit-scrollbar { display: none; }
.ld-chain li { display: grid; justify-items: center; gap: 0.55rem; text-align: center; font-size: 0.875rem; font-weight: 600; color: var(--ink-2); }
.ld-ico { display: grid; place-items: center; width: 3.4rem; height: 3.4rem; border-radius: 50%; background: var(--navy); box-shadow: 0 10px 22px -12px rgb(22 41 74 / 0.6), inset 0 1px 0 rgb(255 255 255 / 0.25); }
.ld-chain li:last-child .ld-ico { background: var(--dawn-deep); }
.ld-ico svg { width: 1.6rem; height: 1.6rem; fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ld-chain-line { position: absolute; left: 3rem; right: 3rem; top: 2.2rem; height: 20px; width: calc(100% - 6rem); z-index: 0; }
.ld-chain-line .rail { stroke: rgb(255 255 255 / 0.9); stroke-width: 6; fill: none; }
.ld-chain-line .dash { stroke: var(--steel); stroke-width: 2; fill: none; stroke-dasharray: 6 10; animation: flow 1.8s linear infinite; }
.ld-chain ol { z-index: 1; }
@keyframes flow { to { stroke-dashoffset: -16; } }
.ld-back { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.75rem; font-size: 0.925rem; color: var(--ink-3); }
.ld-back svg { width: 2rem; height: 1.2rem; stroke: var(--dawn-deep); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.ld-doors { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.ld-door { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: 1.1rem; padding: 1.5rem; border-radius: 1.5rem; text-decoration: none; color: inherit; border: 1px solid var(--glass-edge); background: linear-gradient(170deg, rgb(255 255 255 / 0.78), rgb(255 255 255 / 0.5)); box-shadow: var(--glass-shadow); transition: transform 0.2s ease; }
.ld-door:hover { transform: translateY(-2px); }
.ld-door-ico { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--navy); }
.ld-door.t1 .ld-door-ico { background: var(--dawn-deep); }
.ld-door-ico svg { width: 1.7rem; height: 1.7rem; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ld-door-body { display: grid; gap: 0.4rem; align-content: start; }
.ld-door-title { font-size: 1.35rem; font-weight: 720; letter-spacing: -0.015em; color: var(--navy); }
.ld-door-text { color: var(--ink-2); font-size: 0.975rem; }
.ld-door-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.3rem; }
.ld-door-tags span { font-size: 0.8rem; font-weight: 600; padding: 0.22rem 0.6rem; border-radius: 999px; background: rgb(255 255 255 / 0.75); color: var(--ink-2); border: 1px solid var(--glass-edge); }

.ld-steps { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.ld-steps li a { display: block; padding: 1.1rem 1.2rem; border-radius: 1.25rem; text-decoration: none; color: var(--ink-2); background: rgb(255 255 255 / 0.5); border: 1px solid var(--glass-edge); line-height: 1.45; transition: background-color 0.2s ease; }
.ld-steps li a:hover { background: rgb(255 255 255 / 0.85); }
.ld-steps b { color: var(--navy); }
@media (max-width: 560px) {
  .ld-door { grid-template-columns: 1fr; }
  .ld-door-ico { width: 3rem; height: 3rem; }
  /* The chain scrolls sideways on a phone; the fade at the right edge says so. */
  .ld-chain ol { scroll-snap-type: x proximity; padding-right: 3.5rem; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 3.5rem), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 3.5rem), transparent); }
  .ld-chain li { scroll-snap-align: start; }
  .ld-chain-line { left: 2.4rem; right: 2.4rem; width: calc(100% - 4.8rem); top: 2rem; }
}

/* ---- The drawing office: line drawings (js/ui/drawings.js) ---------------------------------------- */
/* One line language for every picture. Paper by default; .blueprint swaps the palette for the navy band. */
:root { --paper: #F7F9FC; --wf-ink: #16294A; --wf-con: #8FA3BC; --wf-hot: #C66A28; --wf-bg: var(--paper); --wf-glass: rgb(207 224 242 / 0.55); --wf-note: #5F7189; }
.blueprint { --wf-ink: #DCE8F5; --wf-con: #5E7FAA; --wf-hot: #F2B384; --wf-bg: #18305A; --wf-glass: rgb(220 232 245 / 0.08); --wf-note: #AFC3DB; }
.wf { display: block; width: 100%; height: auto; overflow: visible; }
.wf .l { fill: none; stroke: var(--wf-ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.wf .t { fill: none; stroke: var(--wf-ink); stroke-width: 0.9; stroke-linecap: round; stroke-linejoin: round; opacity: 0.7; }
.wf .c { fill: none; stroke: var(--wf-con); stroke-width: 0.9; stroke-dasharray: 5 4; }
.wf .h { fill: none; stroke: var(--wf-hot); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.wf .hf { fill: var(--wf-hot); }
.wf .o { fill: var(--wf-bg); stroke: none; }
.wf .g { fill: var(--wf-glass); stroke: none; }
.wf .n { font-family: var(--font); font-size: 13px; font-weight: 500; fill: var(--wf-note); }
.wf .n.b { font-size: 12px; font-weight: 760; fill: var(--wf-hot); }
.wf .n.hot { fill: var(--wf-hot); font-weight: 650; }
.wf .hid { stroke: var(--wf-ink); opacity: 0.65; }
.wf .dash { stroke-dasharray: 3 4; stroke-width: 1.2; }
.wf .dash.thin { stroke-width: 0.8; }
.wf .mesh { opacity: 0.38; }
.sig { display: block; width: 6rem; height: 1.5rem; overflow: visible; }
.sig .h { fill: none; stroke: var(--wf-hot); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* ---- Front door, the drawing office: hero sheet, title block, people, the life of a vehicle ---------- */
.ld-h2 { font-stretch: 112%; }
/* The hero drawing sits on a sheet of engineering paper with a title block in its corner. */
.sheet { position: relative; margin: 0; padding: clamp(0.75rem, 2vw, 1.25rem) clamp(0.75rem, 2vw, 1.25rem) 1rem; border: 1px solid #C9D5E3; border-radius: 6px; background-color: var(--paper);
  background-image: linear-gradient(rgb(22 41 74 / 0.045) 1px, transparent 1px), linear-gradient(90deg, rgb(22 41 74 / 0.045) 1px, transparent 1px); background-size: 24px 24px; box-shadow: 0 24px 48px -32px rgb(18 35 60 / 0.45); }
.sheet::before, .sheet::after { content: ""; position: absolute; width: 14px; height: 14px; border-color: var(--wf-ink); border-style: solid; opacity: 0.5; }
.sheet::before { top: 6px; left: 6px; border-width: 1.5px 0 0 1.5px; }
.sheet::after { bottom: 6px; right: 6px; border-width: 0 1.5px 1.5px 0; }
.tblock { margin-top: 0.75rem; border: 1.5px solid var(--wf-ink); background: var(--paper); font-size: 0.8rem; color: var(--ink-2); }
.tb-head { display: flex; justify-content: space-between; gap: 0.75rem; padding: 0.35rem 0.6rem; border-bottom: 1.5px solid var(--wf-ink); }
.tb-head b { color: var(--navy); font-weight: 760; font-stretch: 112%; }
.tb-row { display: grid; grid-template-columns: 4.9rem minmax(0, 1fr) 4.6rem; align-items: center; gap: 0.4rem; padding: 0.05rem 0.6rem; border-bottom: 1px solid #C9D5E3; }
.tb-row:last-child { border-bottom: 0; }
.tb-row b { color: var(--navy); font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tb-row .sig { width: 4.4rem; height: 1.1rem; justify-self: end; }
.tb-row.you { background: rgb(232 160 112 / 0.16); }
.tb-row.you b { color: var(--dawn-deep); font-weight: 800; }
.tb-row.you .sig .h { stroke-width: 2; }
@media (min-width: 1000px) {
  /* a real drawing keeps its title block in the bottom right-hand corner */
  .tblock { position: absolute; right: 1.25rem; bottom: 2.9rem; width: 21rem; margin: 0; }
}
.parts { display: flex; flex-wrap: wrap; gap: 0.35rem 1.25rem; margin-top: 0.75rem; font-size: 0.85rem; color: var(--ink-2); }
.parts span { display: inline-flex; align-items: center; gap: 0.4rem; }
.parts i, .ld-scene-name i { display: inline-grid; place-items: center; width: 1.35rem; height: 1.35rem; border-radius: 50%; border: 1.5px solid var(--wf-hot); color: var(--wf-hot); font-style: normal; font-size: 0.75rem; font-weight: 760; }
@media (max-width: 600px) {
  .sheet { margin: 0 calc(-1 * var(--gutter)); border-radius: 0; border-left: 0; border-right: 0; }
  .hero-wf .n { display: none; }
}

/* Everyone's name is on it: six people, a drawing each, in their own words. */
.ld-roles { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .ld-roles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .ld-roles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ld-role { display: grid; grid-template-rows: auto auto 1fr auto auto; gap: 0.45rem; padding: 0.9rem 1.1rem 1.1rem; border: 1px solid #C9D5E3; border-radius: 6px; background: var(--paper); }
.ld-role .wf { margin: 0 -0.25rem 0.35rem; }
.ld-role-who { font-size: 0.875rem; font-weight: 760; font-stretch: 112%; color: var(--dawn-deep); }
.ld-role-says { margin: 0; font-size: 1.2rem; line-height: 1.32; font-weight: 640; letter-spacing: -0.01em; color: var(--navy); text-wrap: pretty; }
.ld-role-yours { font-size: 0.9rem; line-height: 1.45; color: var(--ink-2); }
.ld-role-yours b { color: var(--navy); font-weight: 700; }
.ld-role-go { justify-self: start; display: inline-flex; align-items: center; min-height: 2.4rem; font-size: 0.925rem; font-weight: 700; color: var(--deep); text-decoration: underline; text-underline-offset: 0.18em; }
.ld-role-go:hover { color: var(--navy); }

/* From the first sketch to the driveway: the blueprint band. */
.ld-life { padding: clamp(1.5rem, 4vw, 3rem); border-radius: 1rem; color: #fff; background-color: #18305A;
  background-image: linear-gradient(rgb(220 232 245 / 0.06) 1px, transparent 1px), linear-gradient(90deg, rgb(220 232 245 / 0.06) 1px, transparent 1px); background-size: 24px 24px; }
.ld-life .ld-h2 { color: #fff; }
.ld-life .ld-head p { color: #C7D3E3; }
.ld-scenes { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); counter-reset: none; }
.ld-scene { display: grid; gap: 0.45rem; height: 100%; padding: 0.75rem 0.9rem 1rem; border: 1px solid rgb(220 232 245 / 0.22); border-radius: 6px; color: inherit; text-decoration: none; background: rgb(255 255 255 / 0.02); transition: border-color 0.2s ease, background-color 0.2s ease; }
.ld-scene:hover { border-color: rgb(242 179 132 / 0.7); background: rgb(255 255 255 / 0.05); }
.ld-scene-name { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 1.1rem; font-weight: 720; font-stretch: 112%; color: #fff; }
.ld-scene-line { font-size: 0.925rem; line-height: 1.45; color: #C7D3E3; }
@media (max-width: 600px) {
  .ld-life { margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); border-radius: 0; padding: 1.75rem var(--gutter); }
}

/* The vehicle makers' space opens with the live loop beside its heading. */
.ld-space-top { display: grid; gap: 1.5rem; align-items: center; margin-bottom: 1rem; }
@media (min-width: 1000px) { .ld-space-top { grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); gap: 3rem; } }
.ld-proofline { font-size: 0.95rem; font-weight: 600; color: var(--ink-2) !important; }
.ld-figure figcaption a { color: var(--deep); font-weight: 600; }

/* The live loop as an instrument dial, in the same line language: month ticks, a bezel, the clock in dawn */
.ring .base { fill: none; stroke: var(--wf-ink); stroke-width: 1.4; opacity: 0.3; }
.ring .bezel { fill: none; stroke: var(--wf-ink); stroke-width: 1; opacity: 0.18; }
.ring .tick { fill: none; stroke: var(--wf-ink); stroke-width: 1; opacity: 0.4; }
.ring .tick.major { stroke-width: 1.8; opacity: 0.85; }
.ring .prog { fill: none; stroke: var(--wf-hot); stroke-width: 5; stroke-linecap: round; }
.ring .rn circle { fill: var(--paper); stroke: var(--wf-ink); stroke-width: 1.8; }
.ring .rn.done circle { fill: var(--wf-ink); stroke: var(--wf-ink); }
.ring .rn.now circle { fill: var(--wf-hot); stroke: var(--paper); stroke-width: 3; }
.ring .rn.warn circle { fill: var(--warn); stroke: var(--paper); stroke-width: 3; }
.ring .rn.bad circle { fill: var(--bad); stroke: var(--paper); stroke-width: 3; }
.ring .rn .halo { fill: none; stroke: var(--wf-hot); stroke-width: 1.5; }
.ring .centre .when { font-stretch: 112%; }
.ld-figure::before { display: none; }

/* Drawing-office cards: paper, a hairline, small corners; the live one ruled in ink */
.ld-type, .ld-prog, .ld-comp, .ld-steps li a { background: var(--paper); border: 1px solid #C9D5E3; border-radius: 6px; box-shadow: none; }
.ld-type.live, .ld-prog.on { border: 1.5px solid var(--wf-ink); outline: 0; box-shadow: none; }
.ld-prog:hover, .ld-comp:hover { transform: none; border-color: var(--wf-ink); }
.ld-steps li a:hover { background: #fff; border-color: var(--wf-ink); }
/* Phones: the long rows of cards become strips you swipe sideways, so the page stays short; the next
   card shows at the edge to say there is more. */
@media (max-width: 600px) {
  .strip { display: grid; grid-auto-flow: column; grid-auto-columns: 82%; grid-template-columns: none; gap: 0.75rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) 0.6rem; scrollbar-width: thin; }
  .strip > * { scroll-snap-align: start; min-width: 0; }
  .ld-progs.strip { grid-auto-columns: 86%; }
  /* in a strip each vehicle type is a card again: the drawing on top, the words under it */
  .strip .ld-type { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr auto auto; }
  .strip .ld-type .sil { grid-row: auto; max-width: 12rem; margin: 0 0 0.3rem -0.2rem; }
  .strip .ld-type > :not(.sil) { grid-column: auto; }
}

/* The chain as drawn discs: ink on paper, the aftermarket in dawn */
.ld-ico { background: var(--paper); border: 1.5px solid var(--wf-ink); box-shadow: none; }
.ld-ico svg { stroke: var(--wf-ink); stroke-width: 1.6; }
.ld-chain li:last-child .ld-ico { background: var(--paper); border-color: var(--wf-hot); }
.ld-chain li:last-child .ld-ico svg { stroke: var(--wf-hot); }
.ld-chain-line .rail { stroke: var(--paper); }
.ld-chain-line .dash { stroke: var(--wf-ink); opacity: 0.5; }

/* ---- The landing film (js/ui/film.js) ---------------------------------------------------------------- */
.film-svg { display: block; width: 100%; height: auto; }
.film .car .l { stroke-width: 2.2; }
.film .car .t { stroke-width: 1.3; }
.film .car .h { stroke-width: 2.4; }
.film .mini .t { stroke-width: 5; opacity: 0.9; }
.film .sk { stroke-width: 1.7; opacity: 0.85; }
.film .hair, .film .face { fill: var(--wf-ink); }
.film .mouth { stroke-width: 1.4; }
.film .l.thin { stroke-width: 1.1; }
.film .h.thin { stroke-width: 1.3; }
.film .shoe { stroke-width: 3; }
.film .tint { fill: #1F3760; fill-opacity: 0.86; }
.film .shine { fill: #fff; fill-opacity: 0.45; }
.film .tyre { fill: #1B2A44; }
.film .rim { fill: #D5DEE8; stroke: var(--wf-ink); stroke-width: 2; }
.film .roll { fill: none; stroke: var(--wf-ink); stroke-width: 1.4; stroke-dasharray: 5 4; opacity: 0.7; }
.film .tube-o { fill: none; stroke: var(--wf-ink); stroke-width: 13; stroke-linecap: round; stroke-linejoin: round; }
.film .tube-i { fill: none; stroke: var(--wf-bg); stroke-width: 9.4; stroke-linecap: round; stroke-linejoin: round; }
.film .beam { fill: #E8A070; fill-opacity: 0.09; }
.film .glasswall { opacity: 0.45; }
.film .stamp { fill: none; stroke: #B45A1E; stroke-width: 3; }
.film .stamp.thin { stroke-width: 1.2; }
.film .stampt { font-family: var(--font); font-size: 22px; font-weight: 800; font-stretch: 112%; letter-spacing: 0.08em; fill: #B45A1E; }
.film .stamps { font-family: var(--font); font-size: 13px; font-weight: 650; fill: #B45A1E; }
.film .flash { fill: #fff; pointer-events: none; }
.film .n.big { font-size: 15px; }
.film .n.strong { font-weight: 700; fill: var(--wf-ink); }
.film .n.sign { font-size: 16px; font-weight: 800; font-stretch: 125%; letter-spacing: 0.12em; fill: var(--wf-ink); }
.film .n.huge { font-size: 56px; font-weight: 800; font-stretch: 118%; letter-spacing: -0.02em; fill: var(--wf-ink); }
.film [data-fx="pop"] { transform-box: fill-box; transform-origin: 50% 50%; }
.film [data-fx="grow"] { transform-box: fill-box; transform-origin: 50% 100%; }
.film-bar { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.6rem; }
.film-caption { flex: 1; min-height: 2.9em; margin: 0; font-size: 0.95rem; line-height: 1.45; color: var(--ink-2); }
.film-ctl { display: flex; gap: 0.4rem; }
.film-btn { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; padding: 0; border-radius: 50%; border: 1.5px solid var(--wf-ink); background: var(--paper); color: var(--wf-ink); cursor: pointer; }
.film-btn svg { width: 1.05rem; height: 1.05rem; fill: currentColor; }
.film-btn svg[fill="none"] { fill: none; }
.film-btn:hover { background: #fff; }
@media (max-width: 600px) {
  .film-caption { font-size: 0.9rem; min-height: 4.35em; }
}
.film .marigold { fill: #F6C445; stroke: #A8541B; stroke-width: 1.2; }
.film .string { fill: none; stroke: #2E7D4F; stroke-width: 2; }
/* Phones and tablets: the tag, the headline and the plain line, then the film, so it plays in the first screen */
@media (max-width: 999px) {
  .ld-hero { gap: 1.25rem; }
  .ld-hero .ld-copy { display: contents; }
  .ld-hero .ld-demo { order: 0; margin-bottom: -0.5rem; }
  .ld-hero .ld-h1 { order: 1; }
  .ld-hero .ld-lead { order: 2; margin-top: -0.4rem; }
  .ld-hero .sheet { order: 3; }
  .ld-hero .ld-cta { order: 4; margin-top: 0; }
}
.film [data-fx="growx"] { transform-box: fill-box; transform-origin: 0 50%; }
.film .scaled { vector-effect: non-scaling-stroke; }
.film .l.scaled { stroke-width: 1.6; }
.film .t.scaled { stroke-width: 1; }
.film .h.dash.scaled { stroke-width: 1.6; }
.film .tube-o.small { stroke-width: 6; }
@media (max-width: 600px) {
}
.film-voice { display: inline-flex; align-items: center; gap: 0.4rem; height: 2.5rem; padding: 0 0.95rem 0 0.75rem; border-radius: 999px; border: 1.5px solid var(--wf-ink); background: var(--paper); color: var(--wf-ink); font: inherit; font-size: 0.875rem; font-weight: 700; cursor: pointer; }
.film-voice svg { width: 1.15rem; height: 1.15rem; }
.film-voice[aria-pressed="true"] { background: var(--wf-ink); color: #fff; }
.film-voice:hover { background: #fff; }
.film-voice[aria-pressed="true"]:hover { background: var(--deep); }
@media (max-width: 600px) {
  /* the caption gets the full width; the controls sit under it */
  .film-bar { flex-direction: column; align-items: stretch; gap: 0.5rem; }
  .film-ctl { justify-content: flex-end; }
}
.film .biw { fill: none; stroke: #7E93AD; stroke-width: 2.6; stroke-linejoin: round; }
.film .biw.thin { stroke-width: 1.6; }
.film .brandname { font-family: var(--font); font-size: 17px; font-weight: 800; font-stretch: 112%; letter-spacing: 0.02em; fill: var(--wf-ink); }
.film .inkfill { fill: var(--wf-ink); }
.film .n.total { font-size: 42px; font-weight: 800; font-stretch: 112%; letter-spacing: -0.01em; fill: var(--wf-ink); }
.film .n.hotfill { fill: var(--wf-hot); }

/* The sign-off: a strip of steps under the film, one per scene, scrolled along as the story plays */
.signoff { display: grid; grid-auto-flow: column; grid-auto-columns: 9.6rem; margin-top: 0.6rem; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; border: 1.5px solid var(--wf-ink); background: var(--paper); }
.signoff button { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 0.4rem; align-items: center; min-height: 3.2rem; padding: 0.3rem 0.55rem; border: 0; border-right: 1px solid #C9D5E3; background: transparent; font: inherit; text-align: left; color: inherit; cursor: pointer; scroll-snap-align: start; }
.signoff button:last-child { border-right: 0; }
.signoff .what { grid-row: 1; grid-column: 1; font-size: 0.75rem; color: var(--ink-3); }
.signoff .who { grid-row: 2; grid-column: 1 / -1; font-size: 0.85rem; font-weight: 700; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.signoff .sig { grid-row: 1; grid-column: 2; width: 3.4rem; height: 0.95rem; }
.signoff button.now { background: rgb(232 160 112 / 0.18); }
.signoff button:last-child .who { color: var(--dawn-deep); }
.signoff button:hover { background: #fff; }
/* the credit, small and light under the strip */
.film-by { margin: 0.5rem 0 0; font-size: 0.75rem; font-weight: 400; letter-spacing: 0.01em; color: var(--ink-3); text-align: center; }