/* ===================== RULED LAYOUT =====================
   Site-wide layer on top of styles.css, loaded right after it by every
   page that uses styles.css (go/pm-arsenal keeps its own look and loads
   neither; go/checklist carries its own inline version of this system).

   Each page is one centered column drawn with hairlines: two vertical
   rules run the full height of the page at the column's edges, and every
   section starts with a horizontal rule that runs edge to edge across the
   viewport. Blocks inside a section are cells divided by the same
   hairlines — no card surfaces, shadows or rounded corners — with the
   isometric line illustrations sitting directly on the app's own canvas
   color (--bg, #f5f4f2).

   Two tricks carry the whole system:
   - the vertical rules are a gradient on body's own background, so they
     need no extra markup and never scroll out of sync with content;
   - the full-bleed horizontal rules are a border-image with a 100vw
     horizontal outset, which paints past the column without creating
     scrollable overflow. */

:root {
  --col: min(1120px, calc(100% - 32px));
  --line: rgba(46, 44, 39, 0.12);
  --cell-pad: 48px;
}

body {
  background:
    linear-gradient(to right,
      transparent calc(50% - var(--col) / 2 - 1px),
      var(--line) calc(50% - var(--col) / 2 - 1px) calc(50% - var(--col) / 2),
      transparent calc(50% - var(--col) / 2) calc(50% + var(--col) / 2),
      var(--line) calc(50% + var(--col) / 2) calc(50% + var(--col) / 2 + 1px),
      transparent calc(50% + var(--col) / 2 + 1px)),
    var(--bg);
}

/* Full-bleed horizontal rule along a block's top edge. */
.value-grid,
.trust-break,
.program-card,
.prose,
.jobs-section,
.hero-illo,
.stats,
.feature-sticky,
.case-studies,
.case-studies-grid,
.testimonials,
.testimonials-marquee,
.closing,
.footer {
  border-top: 1px solid var(--line);
  border-image: linear-gradient(var(--line), var(--line)) 1 / 1px 0 0 0 / 0 100vw;
}

/* Every section is exactly the column, flush against the next one. */
.page-hero,
.value-grid,
.trust-break,
.program-card,
.prose,
.jobs-section,
.hero,
.stats,
.features,
.case-studies,
.testimonials,
.closing,
.footer {
  width: var(--col);
  max-width: none;
  margin: 0 auto;
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
}

/* ── Nav: a full-width translucent bar with a hairline underneath ── */
.nav {
  top: 0;
  width: 100%;
  max-width: none;
  border-radius: 0;
  background: rgba(245, 244, 242, 0.78);
  border-bottom: 1px solid var(--line);
}
.nav.is-scrolled {
  background: rgba(245, 244, 242, 0.86);
  box-shadow: none;
}
.nav-inner {
  width: var(--col);
  margin: 0 auto;
  padding: 0 var(--cell-pad);
  border-inline: 1px solid var(--line);
}
.nav-mobile-menu { border-radius: 0; }

/* ── Hero: left-aligned pitch, then the illustration as its own cell ── */
.hero {
  text-align: left;
  padding-top: 0;
  padding-bottom: 0;
}
/* The pitch gets ~75% of the first screen to itself (less the 61px
   nav), centered vertically, so it has room to breathe before the
   product shot below starts. */
.hero-intro {
  position: relative;
  min-height: calc(75svh - 61px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 72px 0;
  box-sizing: border-box;
}
.hero-intro > .hero-title,
.hero-intro > .hero-sub,
.hero-intro > .hero-cta { padding: 0 var(--cell-pad); }
.hero-title { max-width: 820px; box-sizing: content-box; }
.hero-sub { margin-left: 0; max-width: 520px; box-sizing: content-box; }
.hero-intro > .hero-cta { align-items: flex-start; }
/* Real-situation cards (a ticket slipping, Slack messages, sprint pace).
   Wide screens: they float in the space right of the headline, flat
   white panels with a hairline border and a hard 1px-offset underside
   like the illustrations' slabs, drifting gently but no longer tilted.
   Narrower: a ruled row of cells under the CTA (see the media queries
   at the end of this file). */
.hero-signals {
  position: absolute;
  top: 0;
  right: 0;
  width: 400px;
  height: 100%;
  pointer-events: none;
}
/* bottom/margin-left and the drift's transform/opacity undo the old
   below-1320px "pile" layout in styles.css, which this replaces. */
.hero-float { width: 216px; bottom: auto; margin-left: 0; }
.hero-float--tl { top: 15%; left: 24px; right: auto; }
.hero-float--tr { top: 32%; right: 40px; left: auto; }
.hero-float--bl { top: 52%; left: 0; right: auto; }
.hero-float--br { top: 73%; right: 64px; left: auto; width: 190px; }
.hero-float-drift {
  transform: none;
  opacity: 1;
  animation: hero-float-drift 7s ease-in-out infinite;
  animation-delay: var(--float-delay, 0s);
  border-radius: 4px;
  border: 1px solid rgba(46, 44, 39, 0.18);
  box-shadow: -4px 4px 0 -1px #e6e4df, -4px 4px 0 0 rgba(46, 44, 39, 0.18);
  --float-rot: 0deg;
}
.hero-float--tl .hero-float-drift,
.hero-float--tr .hero-float-drift,
.hero-float--bl .hero-float-drift,
.hero-float--br .hero-float-drift { --float-rot: 0deg; }
.hero-float-icon { border-radius: 4px; }

.hero-illo {
  height: clamp(360px, 46vw, 560px);
  /* The illustration's floor grid runs past its viewBox on purpose; the
     cell is what bounds it. */
  overflow: hidden;
}
.hero-illo .feature-illo { width: 100%; height: 100%; }

/* ── Hero product shot: the real Today / Delivery screen ──
   A faithful HTML copy of the app's own screen (same blocks, copy
   pattern, type scale and colors as frontend-app's styles.css: the
   #fcfcfb Today card, 600-weight headline, #6B6A63 secondary ink, white
   30px-radius Delivery cards, blue activity bars), drawn as a window
   lying on the page's isometric floor with the same projection as the
   SVG illustrations — matrix(.866,-.5,.866,.5) — and a hard slab edge
   underneath. Its scale is set by a small script to fit the cell. The
   motion (chart drawing in, bars growing, tasks arriving) only runs on
   screen; reduced motion gets the finished screen. */
.hero-illo.hero-illo--app {
  position: relative;
  height: clamp(420px, 54vw, 700px);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='69.28' height='40'%3E%3Cpath d='M0 0L69.28 40M69.28 0L0 40' stroke='%232E2C27' stroke-opacity='0.09' stroke-dasharray='2 4' fill='none'/%3E%3C/svg%3E") center / 69.28px 40px;
}
.app-shot-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
/* The hero's window rides up over the bottom of the first screen: its
   stage is shifted up by --shot-overlap, so the grid (the cell's own
   background) stays in the second block while the window's top corner
   crosses the rule into the first. */
.hero-illo--app { --shot-overlap: clamp(90px, 15vw, 210px); z-index: 2; }
.hero-illo--app .app-shot-stage {
  inset: calc(-1 * var(--shot-overlap)) 0 calc(var(--shot-overlap) / 3) 0;
  overflow: visible;
}
.hero-illo.hero-illo--app { overflow: visible; }
.app-shot-lift {
  /* Centered absolutely rather than by grid alignment: an unscaled window
     taller than its cell would otherwise be pinned to the top and end up
     off-center once projected. */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) matrix(0.866, -0.5, 0.866, 0.5, 0, 0) scale(var(--shot-scale, 0.62));
}
.app-shot {
  --ink: #2E2C27;
  --ink-soft: #6B6A63;
  --ink-faint: #9c9ca1;
  --hot: #c6613f;
  --hair: rgba(46, 44, 39, 0.1);
  width: 820px;
  background: var(--bg);
  border: 1.5px solid var(--ink);
  border-radius: 14px;
  box-shadow: -18px 18px 0 -1.5px #e6e4df, -18px 18px 0 0 var(--ink);
  font-family: var(--font);
  color: var(--ink);
  text-align: left;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
.app-shot svg { display: block; }
.as-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 40px;
  padding: 0 16px;
  border-bottom: 1.5px solid var(--ink);
  background: #fff;
}
.as-bar i { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--ink); }
.as-bar i:first-child { background: var(--ink); }
.as-bar-title { margin-left: 10px; font-size: 13px; font-weight: 600; }

/* Today — #nowContent: one flat #fcfcfb card, header band over a hairline. */
.as-now { background: #fcfcfb; }
.as-band-top { padding: 34px 40px 30px; border-bottom: 1px solid var(--hair); }
.as-headline { margin: 0 0 14px; max-width: 20ch; font-size: 38px; font-weight: 600; line-height: 1.12; letter-spacing: -0.02em; }
.as-lede { margin: 0 0 22px; max-width: 56ch; font-size: 14px; line-height: 1.55; letter-spacing: -0.01em; color: var(--ink-soft); }
.as-caption { margin: 0 0 8px; font-size: 11px; color: var(--ink-soft); }
.as-burn { width: 100%; height: 76px; margin-bottom: 22px; overflow: visible; }
.as-ideal { fill: none; stroke: #9c9ca1; stroke-width: 1.2; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.as-actual { fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.as-dot { fill: var(--accent); }
.as-acts { display: flex; gap: 28px; }
.as-act { flex: 1; min-width: 0; }
.as-act b { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; font-size: 12.5px; font-weight: 600; letter-spacing: -0.01em; }
.as-act svg { width: 13px; height: 13px; fill: none; stroke: var(--ink-soft); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.as-act span { display: block; font-size: 12px; line-height: 1.5; color: var(--ink-soft); }
.as-band-bottom { padding: 26px 40px 30px; }
.as-eyebrow { margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid var(--hair); font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.as-group { margin: 10px 0 6px; font-size: 11.5px; font-weight: 600; }
.as-tasks { list-style: none; margin: 0; padding: 0; }
.as-task { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 6px 0 8px; }
.as-task-main { display: flex; flex-direction: column; gap: 2px; }
.as-issue { font-size: 13px; letter-spacing: -0.01em; }
.as-facts { display: flex; gap: 6px; font-size: 11.5px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.as-facts i { font-style: normal; color: var(--ink-faint); }
.as-hot { font-style: normal; color: var(--hot); }
.as-link svg { width: 11px; height: 11px; fill: none; stroke: var(--ink-faint); stroke-width: 2; stroke-linecap: round; }

/* Delivery — #statesList: section heads over white 30px-radius cards. */
.as-st { padding: 22px 26px 26px; }
.as-st-head { margin: 4px 0 10px; font-size: 15px; font-weight: 600; letter-spacing: -0.02em; color: #1c1c1e; }
.as-st-head + .as-card { margin-bottom: 18px; }
.as-card { background: #fff; border-radius: 22px; padding: 16px 18px; box-shadow: 0 0 0 1px var(--hair); }
.as-title { margin: 0 0 8px; font-size: 12px; font-weight: 600; letter-spacing: -0.015em; color: #1c1c1e; }
.as-metric-row { display: flex; align-items: baseline; gap: 6px; margin: 0 0 10px; }
.as-metric { font-size: 26px; font-weight: 700; line-height: 1; letter-spacing: -0.03em; color: #1c1c1e; font-variant-numeric: tabular-nums; }
.as-delta { font-size: 10.5px; color: var(--accent); }
.as-warn { font-size: 10.5px; color: var(--orange); }
.as-minmax { margin-left: 6px; font-size: 10px; line-height: 1.35; color: var(--ink-faint); }
.as-activity { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.as-bars { display: flex; align-items: flex-end; gap: 7px; height: 70px; }
.as-bars i {
  flex: 1;
  height: var(--h);
  border-radius: 6px 6px 3px 3px;
  background: linear-gradient(to bottom, rgba(0, 80, 200, 0.26), rgba(0, 80, 200, 0.12));
  transform-origin: bottom;
}
.as-bars i.is-now { background: linear-gradient(to bottom, #2a6ad6, var(--accent)); }
.as-cycle-row { display: grid; grid-template-columns: 1.6fr 1fr; gap: 14px; }
.as-progress { position: relative; height: 6px; margin: 0 0 12px; border-radius: 99px; background: rgba(0, 80, 200, 0.1); }
.as-progress-fill { position: absolute; inset: 0 36% 0 0; border-radius: inherit; background: var(--accent); transform-origin: left; }
.as-progress-ideal { position: absolute; top: -3px; bottom: -3px; left: 64%; width: 2px; background: #1c1c1e; }
.as-cycle .as-burn { height: 96px; margin-bottom: 12px; }
.as-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 99px; background: var(--bg); font-size: 10px; color: var(--ink-soft); }
.as-chip svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 2; }
.as-desc { margin: 0 0 12px; font-size: 11px; line-height: 1.5; color: var(--ink-soft); }
.as-stack { position: relative; display: flex; height: 6px; margin-bottom: 8px; border-radius: 99px; background: rgba(0, 80, 200, 0.08); }
.as-stack-done { width: 64%; border-radius: 99px 0 0 99px; background: var(--accent); }
.as-stack-exp { width: 26%; background: rgba(0, 80, 200, 0.32); }
.as-stack-tick { position: absolute; top: -3px; bottom: -3px; left: 95%; width: 2px; background: #1c1c1e; }
.as-legend { display: flex; gap: 10px; margin: 0; font-size: 9.5px; color: var(--ink-soft); }
.as-legend span { display: inline-flex; align-items: center; gap: 4px; }
.as-legend i { width: 7px; height: 7px; border-radius: 2px; }
.as-legend .is-done { background: var(--accent); }
.as-legend .is-exp { background: rgba(0, 80, 200, 0.32); }
.as-legend .is-tick { width: 2px; height: 8px; border-radius: 0; background: #1c1c1e; }

/* Motion: the chart draws in, tasks arrive one by one, bars grow. */
.app-shot :is(.as-draw, .as-task, .as-hot, .as-bars i, .as-progress-fill, .as-dot) { animation-play-state: paused; }
.app-shot-stage.is-playing .app-shot :is(.as-draw, .as-task, .as-hot, .as-bars i, .as-progress-fill, .as-dot) { animation-play-state: running; }
.app-shot .as-draw { stroke-dasharray: 1; animation: as-draw 7s ease-in-out infinite; }
@keyframes as-draw { 0% { stroke-dashoffset: 1; } 35%, 92% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 1; } }
.app-shot .as-dot { animation: as-dot 7s ease-in-out infinite; }
@keyframes as-dot { 0%, 30% { opacity: 0; } 36%, 92% { opacity: 1; } 100% { opacity: 0; } }
.app-shot .as-task { animation: as-task 7s ease-out infinite; animation-delay: calc(var(--i) * 0.35s); }
@keyframes as-task { 0%, 30% { opacity: 0; transform: translateY(6px); } 40%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.app-shot .as-hot { animation: as-hot 2.4s ease-in-out infinite; }
@keyframes as-hot { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
.app-shot .as-bars i { animation: as-grow 7s cubic-bezier(.2,.8,.2,1) infinite; animation-delay: calc(var(--i) * 0.06s); }
@keyframes as-grow { 0% { transform: scaleY(0); } 25%, 92% { transform: scaleY(1); } 100% { transform: scaleY(0); } }
.app-shot .as-progress-fill { animation: as-fill 7s cubic-bezier(.2,.8,.2,1) infinite; }
@keyframes as-fill { 0% { transform: scaleX(0); } 30%, 92% { transform: scaleX(1); } 100% { transform: scaleX(0); } }

/* ── Feature shots: the app's own screens in each feature cell ──
   Same window and projection as the hero shot. Each frame still carries
   its original SVG illustration; html.illo-legacy brings those back and
   hides the app screens, so the switch is one class. */
.feature-frame:has(.app-shot-stage--feature) {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='69.28' height='40'%3E%3Cpath d='M0 0L69.28 40M69.28 0L0 40' stroke='%232E2C27' stroke-opacity='0.09' stroke-dasharray='2 4' fill='none'/%3E%3C/svg%3E") center / 69.28px 40px;
}
.feature-frame:has(.app-shot-stage--feature) .feature-illo { display: none; }
html.illo-legacy .feature-frame .feature-illo { display: block; }
html.illo-legacy .app-shot-stage--feature { display: none; }
html.illo-legacy .feature-frame:has(.app-shot-stage--feature) { background: none; }
.feature-frame,
.feature-row--reverse .feature-frame { height: clamp(360px, 46vw, 580px); }

.app-shot--standup,
.app-shot--alerts,
.app-shot--ask { width: 640px; }
.app-shot--forecast { width: 760px; }

/* Today, lower band */
.as-sub-group + .as-sub-group { border-top: 1px solid var(--hair); margin-top: 6px; padding-top: 4px; }
.as-eyebrow--gap { margin-top: 26px; }
.as-flow { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--hair); }
.as-flow .as-issue { font-size: 14px; }
.as-change { font-size: 14px; font-variant-numeric: tabular-nums; color: var(--ink-faint); }
.as-change.is-good { color: var(--green); }
.as-change.is-bad { color: var(--hot); }
.as-faster { margin: 12px 0 18px; font-size: 12px; color: var(--ink-soft); }
.as-faster b { font-weight: 400; color: var(--ink); }
.as-copy { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-faint); }
.as-copy svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; }

/* Notifications */
.as-notifs { padding: 18px 22px 22px; display: flex; flex-direction: column; gap: 10px; }
.as-mark { align-self: flex-end; padding: 5px 11px; border: 1px solid var(--hair); border-radius: 99px; background: #fff; font-size: 10.5px; font-weight: 600; color: var(--ink-soft); }
.as-notif-card { padding: 12px 12px 10px; border-radius: 16px; }
.as-day { margin: 0 0 6px 8px; font-size: 9.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); }
.as-notif-card ul { list-style: none; margin: 0; padding: 0; }
.as-notif { display: flex; align-items: flex-start; gap: 9px; padding: 8px; border-radius: 10px; }
.as-notif > svg { flex: none; width: 13px; height: 13px; margin-top: 1px; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.as-notif > svg.is-crit { stroke: var(--red, #d4000a); }
.as-notif > svg.is-warn { stroke: var(--orange); }
.as-notif > svg.is-info { stroke: var(--ink-faint); }
.as-notif > svg.is-ok { stroke: var(--green); }
.as-notif-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.as-notif-main b { font-size: 12.5px; font-weight: 400; color: var(--ink-soft); }
.as-notif.is-unread .as-notif-main b { font-weight: 600; color: #1c1c1e; }
.as-notif.is-open { background: #efeeea; }
.as-notif.is-open .as-notif-main b { font-weight: 400; color: var(--ink-soft); }
.as-notif-body { font-size: 11.5px; line-height: 1.55; color: var(--ink-soft); }
.as-notif-time { display: inline-flex; align-items: center; gap: 6px; font-size: 10px; color: var(--ink-faint); white-space: nowrap; }
.as-unread { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

/* Delivery: chance table */
.as-st-head--row { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; }
.as-seg { display: inline-flex; gap: 2px; padding: 2px; border-radius: 8px; background: #ebeae6; font-size: 9.5px; font-weight: 500; color: var(--ink-soft); }
.as-seg > * { padding: 3px 7px; border-radius: 6px; }
.as-seg b { background: #fff; color: #1c1c1e; font-weight: 600; }
.as-table { padding: 6px 14px; }
.as-table ul { list-style: none; margin: 0; padding: 0; }
.as-row { display: grid; grid-template-columns: 34px 1fr 92px 104px 96px; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--hair); font-size: 11px; }
.as-row:last-child { border-bottom: 0; }
.as-row-task { color: #1c1c1e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.as-prio, .as-pill { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-soft); font-size: 10px; }
.as-pill { justify-self: start; padding: 3px 7px; border-radius: 99px; background: var(--bg); }
.as-prio svg, .as-pill svg { width: 9px; height: 9px; fill: none; stroke: currentColor; stroke-width: 2; }
.as-chance { display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-variant-numeric: tabular-nums; }
.as-chance-track { flex: 1; height: 4px; border-radius: 99px; background: #ecebe8; overflow: hidden; }
.as-chance-track i { display: block; width: var(--w); height: 100%; border-radius: inherit; transform-origin: left; }
.as-chance.is-high { color: var(--green); } .as-chance.is-high i { background: #2fbf55; }
.as-chance.is-mid { color: var(--orange); } .as-chance.is-mid i { background: #f39c12; }
.as-chance.is-low { color: var(--red, #d4000a); } .as-chance.is-low i { background: #e5352b; }

/* Ask panel */
.as-ask { display: flex; flex-direction: column; min-height: 470px; background: #fff; }
.as-ask-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; }
.as-ask-head b { font-size: 13px; font-weight: 600; }
.as-ask-head span { display: inline-flex; gap: 14px; }
.as-ask-head svg { width: 13px; height: 13px; fill: none; stroke: var(--ink-faint); stroke-width: 2; stroke-linecap: round; }
.as-ask-thread { flex: 1; padding: 6px 18px 12px; display: flex; flex-direction: column; gap: 14px; }
.as-q { align-self: flex-end; margin: 0; padding: 9px 14px; border: 1px solid var(--hair); border-radius: 16px; background: #f5f4f2; font-size: 12.5px; color: #1c1c1e; }
.as-thinking { display: flex; gap: 4px; padding: 4px 2px; }
.as-thinking i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-faint); }
.as-a { font-size: 12.5px; line-height: 1.6; color: var(--ink-soft); }
.as-a p { margin: 0 0 8px; }
.as-a b { color: #1c1c1e; font-weight: 600; }
.as-a ul { margin: 0 0 10px; padding-left: 22px; }
.as-a-copy svg { width: 11px; height: 11px; fill: none; stroke: var(--ink-faint); stroke-width: 2; }
.as-ask-input { display: flex; align-items: center; justify-content: space-between; margin: 0 12px 12px; padding: 7px 7px 7px 14px; border: 1.5px solid rgba(0, 80, 200, 0.28); border-radius: 14px; font-size: 12px; color: var(--ink-faint); }
.as-ask-input i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--accent); }
.as-ask-input svg { width: 13px; height: 13px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

/* Feature motion (paused off screen, like the hero's). */
.app-shot :is(.as-flow, .as-notif--new, .as-chance-track i, .as-row, .as-q, .as-thinking, .as-thinking i, .as-a) { animation-play-state: paused; }
.app-shot-stage.is-playing .app-shot :is(.as-flow, .as-notif--new, .as-chance-track i, .as-row, .as-q, .as-thinking, .as-thinking i, .as-a) { animation-play-state: running; }
.app-shot .as-flow { animation: as-task 7s ease-out infinite; animation-delay: calc(var(--i) * 0.3s); }
/* A new alert drops in at the top and opens. */
.app-shot .as-notif--new { animation: as-notif 7s cubic-bezier(.2,.8,.2,1) infinite; transform-origin: top; }
@keyframes as-notif {
  0%, 8% { opacity: 0; transform: translateY(-10px) scale(.98); }
  20%, 92% { opacity: 1; transform: none; }
  100% { opacity: 0; }
}
.app-shot .as-row { animation: as-task 7s ease-out infinite; animation-delay: calc(var(--i) * 0.2s); }
.app-shot .as-chance-track i { animation: as-fill 7s cubic-bezier(.2,.8,.2,1) infinite; animation-delay: calc(var(--i, 0) * 0.15s); }
/* Ask: question, a beat of thinking, then the answer. */
.app-shot .as-q { animation: as-q 8s ease-out infinite; }
@keyframes as-q { 0%, 4% { opacity: 0; transform: translateY(8px); } 12%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.app-shot .as-thinking { opacity: 0; height: 0; padding: 0; overflow: hidden; animation: as-think 8s ease infinite; }
@keyframes as-think { 0%, 14% { opacity: 0; height: 0; padding: 0; } 16%, 34% { opacity: 1; height: 14px; padding: 4px 2px; } 36%, 100% { opacity: 0; height: 0; padding: 0; } }
.app-shot .as-thinking i { animation: as-blink 0.9s ease-in-out infinite; }
.app-shot .as-thinking i:nth-child(2) { animation-delay: .15s; }
.app-shot .as-thinking i:nth-child(3) { animation-delay: .3s; }
@keyframes as-blink { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
.app-shot .as-a { animation: as-a 8s ease-out infinite; }
@keyframes as-a { 0%, 34% { opacity: 0; transform: translateY(6px); } 44%, 94% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* ── Stats: three cells divided by hairlines ── */
.stats { padding-top: 0; padding-bottom: 0; }
.stats-grid { max-width: none; gap: 0; }
.stat {
  text-align: left;
  background: none;
  border-radius: 0;
  padding: 40px var(--cell-pad) 44px;
}
.stat + .stat { border-left: 1px solid var(--line); }
.stat-icon { margin: 0 0 18px; }
.stat-text { margin: 0; }

/* ── Features: each one a cell — copy on top, illustration beneath,
   the way the reference lays out each capability. No sticky stacking
   and no floating cards. ── */
.features { padding-top: 0; }
.feature-sticky { height: auto; }
.feature-sticky:not(:first-of-type) .feature-row { margin-top: 0; }
.feature-row,
.feature-row--reverse {
  position: static;
  flex-direction: column;
  min-height: 0;
  box-shadow: none;
}
.feature-row::before { content: none; }
.feature-content,
.feature-row--reverse .feature-content {
  flex: none;
  background: none;
  border-radius: 0;
  padding: 56px var(--cell-pad) 8px;
  width: 100%;
  max-width: calc(680px + 2 * var(--cell-pad));
}
.feature-media { flex: none; }
.feature-frame,
.feature-row--reverse .feature-frame {
  height: clamp(340px, 42vw, 520px);
  border-radius: 0;
  background: none;
}
.feature-frame:has(.feature-illo) { background: none; }

/* Tags read as small outlined chips on the canvas rather than filled
   pills, matching the line language. */
.feature-tag {
  background: none;
  border: 1px solid var(--line);
  border-radius: 6px;
}
.feature-tag:hover { background: rgba(255, 255, 255, 0.6); }

/* ── Case studies: heading cell, then three cells in a ruled row ── */
.case-studies { padding-top: 0; }
.case-studies-head,
.testimonials-head {
  max-width: none;
  margin: 0;
  padding: 72px var(--cell-pad) 48px;
  text-align: left;
}
.case-studies-grid { gap: 0; }
.case-study-card,
.testimonial-card {
  background: none;
  border-radius: 0;
  /* CornerKit squircles (see the module script in index.html) clip
     these with an inline clip-path; cells here are square. */
  clip-path: none !important;
}
.case-study-card { padding: 40px var(--cell-pad) 44px; }
.case-study-card + .case-study-card { border-left: 1px solid var(--line); }
.case-study-card:hover {
  transform: none;
  box-shadow: none;
  background: rgba(255, 255, 255, 0.55);
}

/* ── Testimonials: the two marquee rows become ruled strips of cells ── */
.testimonials { padding-top: 0; padding-bottom: 0; }
.testimonials-marquee { gap: 0; }
.testimonials-track { gap: 0; }
.testimonials-track + .testimonials-track { border-top: 1px solid var(--line); }
.testimonial-card {
  border-right: 1px solid var(--line);
  padding: 36px 32px;
}

/* ── Closing: a plain cell on a faint isometric grid ── */
.closing {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='69.28' height='40'%3E%3Cpath d='M0 0L69.28 40M69.28 0L0 40' stroke='%232E2C27' stroke-opacity='0.08' stroke-dasharray='2 4' fill='none'/%3E%3C/svg%3E") center / 69.28px 40px,
    var(--bg);
  border-radius: 0;
  box-shadow: none;
  padding: 128px var(--cell-pad);
}
.closing-title { color: var(--text-primary); }
.closing-title .text-accent { color: var(--clay); }
.closing-sub { color: var(--text-secondary); }
.closing .hero-cta-note { color: var(--text-tertiary); }

/* ── Footer: inside the column, no tinted band ── */
.footer {
  background: none;
  overflow: visible;
  padding: 72px var(--cell-pad) 40px;
}
.footer-watermark { display: none; }
.footer-top,
.footer-bottom { max-width: none; }
.footer-top { border-bottom-color: var(--line); }

/* ── Inner pages (about, segments, careers, legal) ── */
.page-hero {
  text-align: left;
  padding: 112px var(--cell-pad) 72px;
}
.page-sub { margin-left: 0; }

/* Value cards become three ruled cells. */
.value-grid { padding: 0; gap: 0; }
.value-card {
  background: none;
  border-radius: 0;
  clip-path: none !important;
  padding: 40px var(--cell-pad) 44px;
}
.value-card + .value-card { border-left: 1px solid var(--line); }

/* About's one-line stat, set as its own cell. */
.trust-break { padding: 72px var(--cell-pad); }
.trust-stat {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--text-primary);
  max-width: 760px;
  margin: 0 0 12px;
}
.trust-stat-number { color: var(--clay); }
.trust-source { font-size: 15px; color: var(--text-tertiary); margin: 0; }

/* Segment pages' offer: a plain cell instead of a white card. */
.program-card { padding: 72px var(--cell-pad); }
.program-card-inner {
  background: none;
  border-radius: 0;
  clip-path: none !important;
  padding: 0;
  text-align: left;
}
.program-desc { margin-left: 0; }

/* Legal text: a reading-width measure inside the full-width cell. */
.prose { padding: 64px var(--cell-pad) 96px; }
.prose > * { max-width: 700px; }
.prose-meta { text-align: left; margin: 0 0 44px; }

/* Careers: a heading cell, then one ruled row per opening. */
.jobs-section { padding: 0; }
.jobs-title {
  text-align: left;
  margin: 0;
  padding: 56px var(--cell-pad) 32px;
}
.jobs-list { gap: 0; }
.job-card {
  background: none;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  clip-path: none !important;
  padding: 28px var(--cell-pad);
}
.job-card:hover {
  border-color: var(--line);
  box-shadow: none;
  background: rgba(255, 255, 255, 0.55);
}

/* ── Modals (feature deep dive, case study): a flat ruled panel on the
   canvas over a frosted backdrop, instead of a rounded white card over a
   dark scrim. The header strip, content and tab row are cells split by
   the same hairlines as the page; the sliding tab indicator becomes a
   2px accent bar on the active cell's top edge. Lifted above the nav so
   the nav never sits over an open modal. ── */
.feature-tag { cursor: pointer; }

.deepdive-overlay,
.case-study-overlay {
  z-index: 300;
  background: rgba(245, 244, 242, 0.62);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
}

.deepdive-modal,
.case-study-modal {
  background: var(--bg);
  border: 1px solid rgba(46, 44, 39, 0.2);
  border-radius: 0;
  clip-path: none !important;
  box-shadow: 0 30px 80px -20px rgba(46, 44, 39, 0.28);
  padding: 0;
  overflow: hidden;
}

/* Close sits in its own square cell in the top-right corner. */
.deepdive-close,
.case-study-close {
  top: 0;
  right: 0;
  width: 52px;
  height: 52px;
  border-radius: 0;
  background: none;
  border-left: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  z-index: 2;
}
.deepdive-close:hover,
.case-study-close:hover { background: rgba(255, 255, 255, 0.6); }

.deepdive-content,
.case-study-modal-content { padding: 72px 32px 28px; }

/* A ruled strip across the top, level with the close cell. */
.deepdive-modal::before,
.case-study-modal::before {
  content: "";
  position: absolute;
  top: 51px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--line);
  pointer-events: none;
}

.deepdive-icon {
  width: 44px;
  height: 44px;
  border-radius: 0;
  background: none;
  border: 1px solid var(--line);
}

.case-study-modal-quote {
  background: none;
  border-radius: 0;
  border-left: 2px solid var(--accent);
  padding: 4px 0 4px 18px;
  overflow: visible;
}
.case-study-modal-quote::before { content: none; }

/* Tab row: equal cells divided by hairlines along the bottom edge. */
.deepdive-tabs,
.case-study-tabs {
  margin: 0;
  padding: 0;
  gap: 0;
  background: none;
  border-radius: 0;
  border-top: 1px solid var(--line);
}
.deepdive-tab,
.case-study-tab {
  border-radius: 0;
  padding: 14px 6px;
}
.deepdive-tab + .deepdive-tab,
.case-study-tab + .case-study-tab { border-left: 1px solid var(--line); }
.deepdive-tab:hover,
.case-study-tab:hover { background: rgba(255, 255, 255, 0.6); }
.deepdive-tab.is-active,
.case-study-tab.is-active { color: var(--text-primary); background: rgba(255, 255, 255, 0.7); }
.deepdive-tab.is-active svg { color: var(--feature-accent, var(--accent)); }

.deepdive-tab-indicator,
.case-study-tab-indicator {
  top: -1px;
  height: 2px;
  border-radius: 0;
  z-index: 2;
}
.case-study-tab-indicator { background: var(--accent); }

/* Below 1200px there's no room beside the headline, so the cards drop
   into the flow as a ruled row of four cells between the CTA and the
   illustration, each card sitting flat in its cell. */
@media (max-width: 1199px) {
  /* The row of cells closes the intro block, flush with its bottom. */
  .hero-intro { padding-bottom: 0; }
  .hero-signals {
    margin-top: 56px;
    position: static;
    width: auto;
    height: auto;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid var(--line);
    border-image: linear-gradient(var(--line), var(--line)) 1 / 1px 0 0 0 / 0 100vw;
  }
  .hero-float,
  .hero-float--br {
    position: static;
    width: auto;
    padding: 24px 20px;
  }
  .hero-float + .hero-float { border-left: 1px solid var(--line); }
  .hero-float-drift { animation: none; height: 100%; box-sizing: border-box; }
}

/* ── Small screens: cells stack, and every stacked cell gets its own
   top rule instead of a left one. ── */
@media (max-width: 860px) {
  :root { --cell-pad: 24px; }
  .stats-grid,
  .case-studies-grid,
  .value-grid { grid-template-columns: 1fr; max-width: none; }
  .stat + .stat,
  .case-study-card + .case-study-card,
  .value-card + .value-card {
    border-left: none;
    border-top: 1px solid var(--line);
  }
  .feature-frame,
  .feature-row--reverse .feature-frame,
  .feature-frame:has(.feature-illo) { height: auto; aspect-ratio: 4 / 3; border-radius: 0; }
  .hero-illo--app { --shot-overlap: 56px; }
  .page-hero { padding-top: 64px; }
  .page-hero { padding-bottom: 48px; }
  .trust-break,
  .program-card { padding: 56px var(--cell-pad); }
  .hero-illo,
  .hero-illo.hero-illo--app { height: auto; aspect-ratio: 4 / 3; }

  /* Phones: the four cells become a sideways-scrolling strip. */
  .hero-signals {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .hero-signals::-webkit-scrollbar { display: none; }
  .hero-float,
  .hero-float--br {
    flex: 0 0 72%;
    scroll-snap-align: start;
    padding: 20px 16px;
  }
  .closing { padding: 88px var(--cell-pad); }

  /* Modals open as a near-full-height panel so a case study's quote
     isn't left below the fold of a short fixed-height card. */
  .deepdive-overlay,
  .case-study-overlay { padding: 16px; }
  .case-study-modal { height: calc(100dvh - 32px); }
  .deepdive-content,
  .case-study-modal-content { padding: 68px 22px 24px; }
}

@media (max-width: 680px) {
  .nav-inner { padding: 0 16px; }
  .feature-content,
  .feature-row--reverse .feature-content { padding: 40px var(--cell-pad) 4px; border-radius: 0; }
  .footer { padding: 56px var(--cell-pad) 28px; }
}