/* ═══════════════════════════════════════════════════════════════════════════
   index-v2.css — Desk-Ops Home v2 Editorial
   Production port of
   web/design-handoff/import-v2-editorial/Desk-Ops Home v2 Editorial.dc.html

   Values are transcribed from the comp's inline styles verbatim. The comp
   encoded its phone/desktop switches two ways — React state (renderVals:
   colAlign / colText / hideInCard / hideBand / storyPin / storyText /
   touchVeil / touchPill) and CSS `clamp(0px, calc((100vw - 700px) * 100), X)`
   show/hide hacks. Both are converted here to plain media queries at the
   700px behavioural breakpoint (phone < 700px, desktop >= 700px) with
   identical outcomes. All other clamp()/vw sizing is untouched.

   Colours are literal (not custom properties) so every declaration maps
   1:1 back to the comp; landing.css owns the site token system and is not
   shared by this page.
   ═════════════════════════════════════════════════════════════════════════ */

/* ── Self-hosted display serif ────────────────────────────────────────────
   Latin subsets pulled once from the Google css2 endpoint (static instances,
   not the variable file) and served from this origin: no Google Fonts request
   at runtime. The 700 face is the file landing.css already ships; 400 + 600
   are new. */
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/source-serif-4-400-latin.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: "Source Serif 4";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/fonts/source-serif-4-600-latin.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: "Source Serif 4";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/source-serif-4-700-latin.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;
}

/* Inter and JetBrains Mono are NOT self-hosted (no third-party fetch, no
   extra weight): the named family wins if the visitor has it installed,
   otherwise the system stack renders. */
:root {
  --f-sans: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-serif: "Source Serif 4", Georgia, serif;
  --f-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ── Base ────────────────────────────────────────────────────────────── */
html { scroll-behavior: smooth; color-scheme: dark; }
body {
  margin: 0;
  background: #2B3A4A;
  color: #FFFFFF;
  font-family: var(--f-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: #6FCE7E; }
a:hover { color: #BFE7FE; }

.page { background: #2B3A4A; overflow-x: hidden; font-family: var(--f-sans); }

/* Skip link: comp parks it off-screen; :focus brings it back so the control
   is actually reachable (matches the landing.css .skip-link pattern). */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: #FFFFFF; color: #2B3A4A; padding: 10px 18px; text-decoration: none;
}
.skip-link:focus { left: 0; }
main:focus { outline: none; } /* skip-link target (tabindex=-1), programmatic only */

/* ── Motion ──────────────────────────────────────────────────────────── */
@keyframes doDrift { from { transform: scale(1.02) translate3d(0, 0, 0); } to { transform: scale(1.11) translate3d(-1.2%, -0.8%, 0); } }
@keyframes doRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes doFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes doMarquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }

/* ═══ 1 · Hero ═════════════════════════════════════════════════════════ */
.hero {
  position: relative;
  min-height: max(100%, min(100dvh, 1080px));
  display: flex;
  align-items: flex-start;
  overflow: hidden;
  background: #101B26;
}
.hero-layer {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(100%, 1920px);
  height: max(100%, min(100dvh, 1080px));
}
.hero-media { object-fit: cover; object-position: 30% 50%; }
/* The walker sits left-of-centre in the source frame; tablet-width cover
   crops push him right into the copy column, so the framing shifts there. */
@media (min-width: 700px) and (max-width: 1149.98px) {
  .hero-media { object-position: 38% 50%; }
}
.hero-scrim-top {
  background: linear-gradient(180deg, rgba(16,27,38,0.58) 0%, rgba(16,27,38,0.14) 14%, rgba(16,27,38,0) 30%);
}
.hero-scrim-bottom {
  background: linear-gradient(180deg, rgba(16,27,38,0) 72%, rgba(24,36,48,0.42) 90%, #101B26 100%);
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,1) 62%);
  mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,1) 62%);
}
.hero-scrim-side {
  background: linear-gradient(100deg, rgba(16,27,38,0) 52%, rgba(16,27,38,0.16) 72%, rgba(16,27,38,0.30) 100%);
}

/* Header nav */
.hero-head { position: absolute; top: 0; left: 0; right: 0; z-index: 4; }
.hero-head nav {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  max-width: 1920px; margin: 0 auto;
  padding: 18px clamp(20px, 5vw, 88px);
  height: 68px; box-sizing: border-box;
}
.wordmark {
  display: flex; align-items: baseline; gap: 1px;
  font-weight: 800; font-size: 1.6rem; letter-spacing: -0.02em;
  color: #F2F2EE; text-decoration: none;
  text-shadow: 0 1px 10px rgba(0,0,0,0.45);
}
.wordmark .star {
  width: 0.7em; height: 0.7em; fill: #CE7247;
  align-self: center; margin: 0 1px; flex: 0 0 auto;
}
.nav-links { display: flex; align-items: center; gap: clamp(10px, 2vw, 26px); }
.nav-links a {
  color: #FFFFFF; text-decoration: none; font-weight: 600; font-size: 0.95rem;
  opacity: 0.9; text-shadow: 0 1px 10px rgba(0,0,0,0.45);
}
.nav-links a.nav-login { padding: 10px 0; }
.nav-links a:hover,
.nav-links a:focus-visible { opacity: 1; color: #FFFFFF; }

/* Hero copy column */
.hero-inner {
  position: relative; z-index: 2;
  width: 100%; max-width: 1920px; margin: 0 auto;
  padding: clamp(64px, calc(50vh - 235px), 176px) clamp(20px, 5vw, 88px) clamp(40px, 6vh, 72px);
  box-sizing: border-box;
  display: flex; flex-direction: column;
  justify-content: flex-start; align-items: flex-end;
}
.hero-col {
  width: clamp(400px, 34vw, 680px);
  max-width: min(100%, 700px, max(52vw, 373px));
  margin-right: clamp(0px, calc((100vw - 820px) * 0.22), 150px);
  margin-left: auto;
  flex: 0 0 auto;
}
.hero-trust {
  display: flex; flex-direction: column; align-items: flex-start;
}
.trust-line {
  width: 100%;
  margin: 0 0 clamp(10px, min(1.8vh, 2.6vw), 18px);
  max-height: 120px; overflow: hidden;
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center;
  text-align: center;
  gap: 4px 10px;
  font-size: 0.95rem;
  color: rgba(232,242,250,0.8);
  text-shadow: 0 1px 14px rgba(8,14,20,0.85);
  animation: doRise 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.85s both;
}
.stars { display: inline-flex; gap: 4px; flex: 0 0 auto; padding-top: 0.25em; }
.stars svg { width: 1.05em; height: 1.05em; fill: #CE7247; flex: 0 0 auto; }
/* Narrow viewports: the credential text wraps, orphaning the star on its own
   line. Drop the star rather than ship a two-line trust mark. */
@media (max-width: 700px) {
  .trust-line .stars { display: none; }
}

.hero-card {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  box-sizing: border-box;
  padding: clamp(26px, min(4vh, 4.6vw), 48px) clamp(20px, 2.6vw, 38px) clamp(15px, min(2.6vh, 3.4vw), 34px);
  border-radius: 18px;
  background: rgba(18,28,39,0.84);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 30px 70px -34px rgba(0,0,0,0.8);
  margin-top: 0;
  height: auto;
}
.hero-card h1 {
  margin: 0;
  font-family: var(--f-serif); font-weight: 700;
  font-size: clamp(2.4rem, min(5.4vw, 8.6vh), 4.5rem);
  line-height: 1.02; letter-spacing: -0.025em;
  color: #FFFFFF;
  text-shadow: 0 2px 24px rgba(8,14,20,0.55);
  animation: doRise 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.05s both;
}
.hero-sub {
  margin: clamp(10px, min(2.2vh, 3.2vw), 18px) 0 0;
  max-width: 28ch;
  font-family: var(--f-serif); font-weight: 600;
  font-size: clamp(1.3rem, 2.1vw, 1.75rem);
  line-height: 1.25; letter-spacing: -0.01em;
  color: #E8A87F;
  text-shadow: 0 2px 18px rgba(8,14,20,0.6);
  animation: doRise 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.16s both;
}
.hero-card .btn-coral {
  margin: clamp(14px, min(3.4vh, 4.6vw), 30px) 0 0;
  font-size: 1.02rem;
  padding: 16px 30px;
  box-shadow: 0 18px 40px -18px rgba(0,0,0,0.7);
  animation: doRise 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.36s both;
}
.card-rule {
  width: 100%; height: 1px;
  margin-top: clamp(11px, min(2.7vh, 3.6vw), 24px);
  background: rgba(255,255,255,0.24);
  animation: doFade 1s ease-out 0.95s both;
}

/* Shared coral button */
.btn-coral {
  font: inherit; font-weight: 700;
  color: #FFFFFF; background: #B85A3E;
  border: none; border-radius: 12px;
  cursor: pointer;
  transition: background 160ms ease-out;
}
.btn-coral:hover,
.btn-coral:focus-visible { background: #CE7247; }

/* Platform marquee */
.marquee {
  width: 100%; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 9%, rgba(0,0,0,1) 86%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 9%, rgba(0,0,0,1) 86%, rgba(0,0,0,0) 100%);
}
.marquee-track { display: flex; width: max-content; align-items: center; }
.marquee-track span {
  margin-right: 44px;
  font-family: var(--f-mono); font-size: 0.82rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255,255,255,0.52);
  white-space: nowrap; flex: 0 0 auto;
}
.marquee-track img { width: auto; margin-right: 44px; opacity: 0.52; flex: 0 0 auto; }
.marquee-track img.ic-citrix { height: 21px; }
.marquee-track img.ic-anthropic { height: 19px; }
.marquee-track img.ic-gemini { height: 21px; }

.marquee-card {
  margin-top: clamp(10px, min(2.4vh, 3.2vw), 22px);
  max-height: 40px;
  animation: doFade 1.2s ease-out 0.7s both;
}
.marquee-card .marquee-track { animation: doMarquee 33s linear infinite; }

/* ═══ 2 · Proof strip (phone only) ═════════════════════════════════════ */
.proof { display: none; background: #101B26; max-height: 340px; overflow: hidden; }
.proof-inner {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 18px; padding: 26px clamp(20px, 5vw, 88px) 30px;
}
.proof .trust-line {
  width: auto; max-width: 100%;
  margin: 0;
  max-height: none; overflow: visible;
  justify-content: center; text-align: center;
  line-height: 1.5;
  text-shadow: none;
  animation: none;
}
.proof-rule { width: min(100%, 340px); height: 1px; background: rgba(255,255,255,0.18); }
.marquee-band {
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 9%, rgba(0,0,0,1) 91%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 9%, rgba(0,0,0,1) 91%, rgba(0,0,0,0) 100%);
}
.marquee-band .marquee-track { animation: doMarquee 30s linear infinite; }
.marquee-band .marquee-track span { margin-right: 40px; font-size: 0.8rem; }
.marquee-band .marquee-track img { margin-right: 40px; }
.marquee-band .marquee-track img.ic-citrix { height: 20px; }
.marquee-band .marquee-track img.ic-anthropic { height: 18px; }
.marquee-band .marquee-track img.ic-gemini { height: 20px; }

/* ═══ 3 · My story ═════════════════════════════════════════════════════ */
.story {
  position: relative;
  background-color: #faf8f4; /* agent-smith.pro --background (38 33% 97%) */
  padding: clamp(64px, 8vw, 120px) 0 clamp(56px, 7vw, 104px);
  overflow: hidden;
}
.story-ground { position: absolute; inset: 0; background-color: #faf8f4; }
.story-grain {
  position: absolute; inset: 0;
  /* agent-smith.pro paper texture: /images/texture-*.jpg, 0.35, no blend */
  background-image: url("assets/textures/texture-640.jpg");
  background-repeat: repeat;
  background-size: 640px auto;
  opacity: 0.35;
  pointer-events: none;
}
@media (min-width: 1024px) {
  .story-grain { background-image: url("assets/textures/texture-1024.jpg"); background-size: 1024px auto; }
}
@media (min-width: 1920px) {
  .story-grain { background-image: url("assets/textures/texture-1920.jpg"); background-size: 1920px auto; }
}
.story-grid {
  position: relative; z-index: 1;
  max-width: 1440px; margin: 0 auto;
  padding: 0 clamp(20px, 5vw, 88px);
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(280px, 440px) minmax(0, 680px);
  grid-template-areas: "portrait letter" "flow flow";
  justify-content: center;
  gap: clamp(36px, 4.5vw, 64px) clamp(32px, 5vw, 76px);
  align-items: stretch;
}
.story-portrait-col {
  grid-area: portrait;
  display: flex; flex-direction: column; gap: 16px; height: 100%;
  max-width: clamp(280px, 40vw, 560px);
  margin-inline: 0;
}
.portrait-btn {
  --do-veil: rgba(11,11,11,0);
  --do-pill: 0;
  position: relative; display: block;
  flex: 1 1 auto;
  min-height: clamp(320px, 34vw, 480px);
  width: 100%; padding: 0; border: none; background: none; cursor: pointer;
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 18px 34px -14px rgba(28,24,20,0.42), 0 2px 6px -2px rgba(28,24,20,0.2);
  animation: doFade 1.1s ease-out both;
}
.portrait-btn:hover,
.portrait-btn:focus-visible {
  --do-veil: rgba(11,11,11,0.52);
  --do-pill: 1;
  --do-zoom: 1.05;
}
.portrait-btn img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 6%;
  filter: contrast(1.03) sepia(0.05);
  transform: scale(var(--do-zoom, 1));
  transition: transform 300ms ease-out;
}
.portrait-veil {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--do-veil, rgba(11,11,11,0));
  transition: background 300ms ease-out;
  padding: 24px;
}
.portrait-pill {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  text-align: center;
  opacity: var(--do-pill, 0);
  transition: opacity 300ms ease-out;
}
.portrait-name {
  display: block; font-family: var(--f-serif); font-weight: 700;
  font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.1; letter-spacing: -0.01em;
  color: #FFFFFF;
}
.portrait-role {
  display: block; font-family: var(--f-mono);
  font-size: 0.6875rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.2em; color: rgba(255,255,255,0.76);
}
.portrait-tick { display: block; width: 32px; height: 1px; background: rgba(255,255,255,0.34); }
.portrait-cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px; border-radius: 12px;
  background: #B85A3E; color: #FFFFFF; font-weight: 600; font-size: 0.95rem;
}

.story-text-col { grid-area: letter; max-width: 660px; display: flex; flex-direction: column; margin-inline: 0; }
.story-text-col > .letter { flex: 1 0 auto; }
.story-text-col h2 {
  margin: 16px 0 0;
  font-family: var(--f-serif); font-weight: 700;
  font-size: clamp(2rem, 3.6vw, 3.1rem);
  line-height: 1.08; letter-spacing: -0.02em;
  color: #0B0B0B; text-wrap: pretty; text-align: left;
}
.story-body {
  margin-top: 26px;
  display: flex; flex-direction: column; gap: 18px;
  font-size: 1.06rem; line-height: 1.72; color: #3C4A59;
}
.story-body p { margin: 0; }
.story-body strong { color: #0B0B0B; font-weight: 600; }
.story-body figure {
  margin: 6px 0; width: 100%;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.story-body figure img {
  display: block; width: 100%; min-width: min(480px, 100%); height: auto;
}

/* ═══ 3b · Story split: aside (caps + CTA) and compare columns ═════════ */
.story-flow {
  grid-area: flow;
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr);
  grid-template-areas: "ftext fquote" "fcmp fcmp";
  gap: clamp(28px, 3vw, 44px) clamp(28px, 3.5vw, 48px);
  align-items: start;
  margin-top: clamp(6px, 1.2vw, 16px);
}
.flow-text { grid-area: ftext; align-self: end; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.flow-text h2 {
  margin: 0;
  font-family: var(--f-serif); font-weight: 700;
  font-size: clamp(2rem, 3.2vw, 2.8rem);
  line-height: 1.08; letter-spacing: -0.02em;
  color: #0B0B0B; text-wrap: pretty; text-align: left;
}
.flow-text > p { margin: 0; font-size: 1.02rem; line-height: 1.65; color: #3C4A59; text-wrap: pretty; }
.flow-quote { grid-area: fquote; align-self: end; margin-top: 0; }
.flow-cmp { grid-area: fcmp; min-width: 0; }
.flow-cmp .lc-card {
  margin: 0; border: none;
  box-shadow: 0 18px 34px -14px rgba(28,24,20,0.42), 0 2px 6px -2px rgba(28,24,20,0.2);
  padding: clamp(22px, 2.8vw, 36px);
}
@media (max-width: 999.98px) {
  .story-grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "portrait" "letter" "flow";
    justify-items: center;
  }
  .story-portrait-col, .story-text-col { width: 100%; }
  .story-text-col { max-width: 660px; }
  .story-flow {
    width: 100%; max-width: 660px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "ftext" "fquote" "fcmp";
  }
  .flow-text, .flow-quote { align-self: auto; }
  .portrait-btn { min-height: clamp(340px, 56vw, 560px); }
}

/* ═══ 4 · Closer ═══════════════════════════════════════════════════════ */
.closer {
  background: #1C2733;
  padding: clamp(72px, 9vw, 116px) 0 clamp(64px, 8vw, 100px);
  text-align: center;
}
.closer-inner { max-width: 860px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 88px); box-sizing: border-box; }
.closer h2 {
  margin: 0;
  font-family: var(--f-serif); font-weight: 700;
  font-size: clamp(1.9rem, 3.4vw, 2.8rem);
  line-height: 1.1; letter-spacing: -0.02em;
  color: #F2F2EE; text-wrap: balance;
}
.closer-lede {
  margin: 18px auto 0; max-width: 58ch;
  font-size: 1.1rem; line-height: 1.6; color: rgba(242,242,238,0.74);
}
.closer .btn-coral { margin: 32px 0 0; font-size: 1.05rem; padding: 17px 34px; }
.closer-honesty { margin: 16px 0 0; font-size: 0.9rem; color: rgba(242,242,238,0.62); }

/* ═══ 5 · Footer ═══════════════════════════════════════════════════════ */
.site-foot { background: #1C2733; text-align: center; padding: 0 0 56px; }
.site-foot > div { max-width: 1200px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 88px); box-sizing: border-box; }
.foot-brand {
  padding-top: 26px; border-top: 1px solid rgba(255,255,255,0.1);
  display: flex; align-items: baseline; justify-content: center; gap: 14px;
}
.foot-wordmark {
  display: flex; align-items: baseline; gap: 1px;
  font-weight: 800; font-size: 1.1rem; letter-spacing: -0.02em; color: #F2F2EE;
}
.foot-wordmark .star {
  width: 0.72em; height: 0.72em; fill: #CE7247;
  align-self: center; margin: 0 1px; flex: 0 0 auto;
}
.foot-domain { color: rgba(242,242,238,0.66); font-size: 0.95rem; }
.foot-legal {
  margin-top: 12px; display: flex; flex-wrap: wrap; justify-content: center;
  gap: 2px 4px; font-size: 0.82rem;
}
.foot-legal a {
  display: inline-block; padding: 6px 9px;
  color: rgba(242,242,238,0.78); text-decoration: none;
}
.foot-legal a:hover,
.foot-legal a:focus-visible { color: #FFFFFF; text-decoration: underline; }
.foot-disclaimer {
  margin: 10px auto 0; max-width: 760px;
  font-size: 0.72rem; line-height: 1.6; color: rgba(242,242,238,0.66);
}
.foot-entity { margin: 6px 0 0; font-size: 0.72rem; color: rgba(242,242,238,0.66); }

/* ═══ 6 · Dialogs ══════════════════════════════════════════════════════ */
dialog:not([open]) { display: none !important; }
dialog::backdrop { background: rgba(16,27,38,0.74); }
body.dialog-open { overflow: hidden; }
body:has(dialog[open]) { overflow: hidden; }

.dlg-close {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.92); border: 1px solid #E5E7EB;
  border-radius: 999px; cursor: pointer; color: #3C4A59;
}

/* Bio dialog */
#bio {
  position: fixed; inset: 0; border: none; padding: 0; margin: auto;
  width: min(1080px, calc(100vw - 24px));
  max-width: min(1080px, calc(100vw - 24px));
  height: fit-content;
  max-height: calc(100vh - 24px);
  background: #FFFFFF; color-scheme: light;
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 40px 80px -24px rgba(0,0,0,0.55);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-template-rows: minmax(0, 1fr);
}
/* Below 624px `auto-fit` drops to a single column (2 cols need 2 × 300px, and
   the dialog is min(1080px, 100vw - 24px) wide → 100vw < 624px is one column).
   One column means the two children need TWO rows, but only one is declared —
   so the implicit auto row (.bio-body, ~1300px of content) took the dialog's
   whole max-height and the explicit 1fr portrait row resolved to 0px, painting
   the portrait on top of the biography. Declaring both rows fixes the band and
   leaves .bio-body as the scroller, so the close button stays anchored. */
@media (max-width: 623.98px) {
  #bio { grid-template-rows: 260px minmax(0, 1fr); }
}
.bio-portrait { position: relative; background: #EDEAE3; overflow: hidden; min-height: 260px; }
.bio-portrait img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 8%;
}
.bio-body { overflow-y: auto; min-height: 0; padding: clamp(24px, 3.5vw, 44px); }
.bio-body h2 {
  margin: 0; font-family: var(--f-serif); font-weight: 700;
  font-size: 2rem; line-height: 1.1; color: #0B0B0B;
}
.bio-role { margin: 6px 0 0; font-size: 1.1rem; color: #6B7280; }
.bio-rule { height: 1px; background: #E5E7EB; margin: 20px 0; }
.bio-lede { margin: 0; font-size: 1.05rem; line-height: 1.65; color: #0B0B0B; }
.bio-sub { margin: 14px 0 0; font-size: 0.98rem; line-height: 1.65; color: #3C4A59; }
.bio-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 22px; }
.bio-cols h3 {
  margin: 0 0 10px; font-family: var(--f-sans);
  font-size: 0.95rem; font-weight: 700; color: #0B0B0B;
}
.bio-cols ul {
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-direction: column; gap: 6px;
  font-size: 0.92rem; line-height: 1.5; color: #3C4A59;
}
.bio-body h3.bio-hl-head {
  margin: 0 0 12px; font-family: var(--f-sans);
  font-size: 1.05rem; font-weight: 700; color: #0B0B0B;
}
.bio-highlights {
  display: flex; flex-direction: column; gap: 10px;
  font-size: 0.95rem; line-height: 1.6; color: #3C4A59;
}
.bio-highlights p { margin: 0; }
.bio-highlights strong { color: #0B0B0B; }

/* Apply dialog */
#apply {
  border: none; padding: 0; background: transparent;
  position: fixed; inset: 0; margin: auto;
  width: min(560px, calc(100vw - 24px));
  max-width: min(560px, calc(100vw - 24px));
  height: fit-content;
  max-height: calc(100vh - 24px);
  overflow-y: auto; border-radius: 18px;
}
.apply-card {
  position: relative; background: #FFFFFF; color-scheme: light;
  border-radius: 18px;
  box-shadow: 0 40px 80px -24px rgba(0,0,0,0.55);
  padding: clamp(24px, 4vw, 40px);
}
.apply-card .dlg-close { background: rgba(11,11,11,0.06); }
.eyebrow-mono {
  font-family: var(--f-mono); font-size: 0.6875rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.18em; color: #3C4A59;
}
.apply-card h2 {
  margin: 10px 0 0; font-family: var(--f-serif); font-weight: 700;
  font-size: 1.7rem; line-height: 1.15; letter-spacing: -0.01em; color: #0B0B0B;
}
.apply-lede { margin: 10px 0 0; font-size: 0.98rem; line-height: 1.6; color: #3C4A59; }
.apply-step { margin-top: 20px; }
.apply-step-note { margin: 0; font-size: 0.92rem; color: #6B7280; }

.field { margin-top: 14px; }
.field label {
  display: block; font-weight: 600; font-size: 0.9rem; color: #3C4A59; margin-bottom: 6px;
}
.field input, .field textarea {
  width: 100%; box-sizing: border-box; font: inherit;
  color: #0B0B0B; background: #FFFFFF;
  padding: 11px 12px; border: 1px solid #D5D9DE; border-radius: 12px;
}
.field textarea { resize: vertical; min-height: 84px; }
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid #B85A3E; outline-offset: 1px; border-color: #B85A3E; }
.field-error { display: none; font-size: 0.82rem; color: #B3401F; margin-top: 6px; }
.field.invalid .field-error { display: block; }
.field.invalid input { border-color: #B3401F; }

.hp-field { position: absolute; left: -9999px; top: -9999px; }

#apply-step-1 .btn-coral,
#apply-step-2 .btn-coral {
  width: 100%; font-size: 1rem; padding: 15px 26px;
}
#apply-step-1 .btn-coral { margin-top: 20px; }
#apply-step-2 .btn-coral { margin-top: 22px; }

.chips { border: none; margin: 16px 0 0; padding: 0; }
.chips legend {
  font-weight: 600; font-size: 0.9rem; color: #3C4A59; padding: 0; margin-bottom: 8px;
}
.chips-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chips input[type="radio"] {
  position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none;
}
.chip {
  font: inherit; font-size: 0.92rem; padding: 11px 16px; border-radius: 999px; cursor: pointer;
  transition: border-color 160ms ease-out, background 160ms ease-out;
  background: #FFFFFF; border: 1px solid #D5D9DE; color: #3C4A59;
}
.chips input[type="radio"]:checked + .chip {
  background: #B85A3E; border: 1px solid #B85A3E; color: #FFFFFF;
}
/* The radio itself is visually hidden, so the focus ring has to live on the
   label the visitor actually sees. */
.chips input[type="radio"]:focus-visible + .chip { outline: 2px solid #B85A3E; outline-offset: 2px; }
.chips .field-error { display: none; margin-top: 8px; }
.chips.invalid .field-error { display: block; }

.apply-back {
  display: block; margin: 6px auto 0; padding: 8px 14px;
  background: none; border: none; font: inherit; font-size: 0.9rem;
  color: #6B7280; cursor: pointer; text-decoration: underline;
}
.apply-consent { margin: 14px 0 0; font-size: 0.8rem; line-height: 1.5; color: #6B7280; }
.apply-consent a, .apply-success a { color: #2E7A3F; }

.form-error {
  margin-top: 16px; padding: 12px 14px;
  border: 1px solid rgba(179,64,31,0.34); border-radius: 12px;
  background: rgba(179,64,31,0.07);
  font-size: 0.9rem; line-height: 1.5; color: #B3401F;
}
/* The page-level green link colour is for dark grounds; inside the error panel
   it drops under 4.5:1, so the fallback link inherits the error ink. */
.form-error a { color: #B3401F; text-decoration: underline; }
.apply-success { margin-top: 18px; }
.apply-success h3 {
  margin: 0; font-family: var(--f-sans); font-size: 1.25rem; font-weight: 700; color: #0B0B0B;
}
.apply-success p { margin: 10px 0 0; font-size: 0.98rem; line-height: 1.6; color: #3C4A59; }

.turnstile-slot:not(:empty) { margin-top: 16px; }

/* ═══ Phone (< 700px) — the comp's renderVals()/clamp switches ══════════ */
@media (max-width: 699.98px) {
  /* hero padding-top: max(desktop value, 38vh) */
  .hero-inner {
    padding-top: max(clamp(64px, calc(50vh - 235px), 176px), 38vh);
  }
  /* colAlign / colText → center */
  .hero-trust { align-items: center; }
  .hero-card { align-items: center; text-align: center; }
  /* hideInCard → the trust line and the in-card marquee collapse to zero */
  .hero-trust,
  .card-rule,
  .marquee-card { display: none; }
  /* hideBand → the proof strip is the phone-only home of both */
  .proof { display: block; }
  /* storyPin → margin-inline: auto; storyText → center */
  .story-portrait-col,
  .story-text-col { margin-inline: auto; }
  .story-kicker,
  .story-text-col h2 { text-align: center; }
  /* touchVeil / touchPill: no hover on touch — pill stays on, anchored to the
     bottom with a scrim gradient instead of a full veil, portrait taller. */
  .portrait-btn { --do-pill: 1; min-height: clamp(420px, 118vw, 640px); }
  .portrait-btn img { object-position: 50% 12%; }
  .portrait-veil {
    align-items: flex-end;
    background: linear-gradient(to top, rgba(11,11,11,0.62) 0%, rgba(11,11,11,0.28) 22%, rgba(11,11,11,0) 44%);
    padding: 20px;
  }
}

/* ═══ Reduced motion ═══════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; }
  html { scroll-behavior: auto; }
  /* The comp's kill switch only covered @keyframes. The portrait's hover/focus
     zoom is a transformed transition — that is motion too, so it goes as well
     (the veil + pill still appear, they just appear instantly). */
  .portrait-btn img { transform: none !important; transition: none !important; }
}

/* ═══ 7 · How Desk-Ops works (r2 delta port) ═══════════════════════════
   Appended block — everything for #how-it-works lives here, including its
   own phone media query and reduced-motion note. Values transcribed from
   the r2 comp's inline styles verbatim (lines 179–400). The comp's two
   storyPin/storyText bindings map to the 700px breakpoint per r1 rules. */
.hiw-quote {
  background: #FFFFFF; border: 1px solid #E5E7EB; border-radius: 16px;
  margin-top: 22px; padding: 22px 24px; /* 40px total: the card is a separate object, not the next paragraph */
  display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 4px 8px -2px rgba(0,0,0,0.08);
}
.hiw-quote-kicker {
  font-family: var(--f-mono); font-size: 0.6875rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.14em; color: #B85A3E;
}
.hiw-quote-head {
  font-family: var(--f-serif); font-size: 1.5rem; font-weight: 700;
  color: #0B0B0B; line-height: 1.25; text-wrap: pretty;
}
.hiw-quote p {
  margin: 0; font-size: 0.92rem; line-height: 1.62; color: #3C4A59; text-wrap: pretty;
}

.hiw-close {
  position: relative; margin-left: auto; cursor: pointer; background: none;
  font-family: var(--f-sans); font-size: 12px; font-weight: 600;
  color: rgba(245,242,236,0.6);
  border: 1px solid rgba(255,255,255,0.15); border-radius: 9999px; padding: 4px 13px;
}

/* Report lightbox: light-mode proof-report mockup. The two pills are
   non-functional mockup chrome in the comp — spans, aria-hidden, no targets. */
#hiw-report {
  position: fixed; inset: 0; margin: auto; padding: 0; border: none;
  width: min(980px, 94vw); max-width: min(980px, 94vw);
  height: fit-content; max-height: 88vh;
  background: #FDFDFC; border-radius: 16px;
  box-shadow: 0 40px 80px -20px rgba(0,0,0,0.5);
  overflow: hidden; display: flex; flex-direction: column;
  color-scheme: light;
}
.hiw-rp-bar { display: flex; align-items: center; justify-content: space-between; padding: 14px 28px; border-bottom: 1px solid #E5E7EB; }
.hiw-rp-brand { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 800; letter-spacing: -0.02em; color: #0b0b0b; }
.hiw-rp-brand-dot { width: 8px; height: 8px; border-radius: 50%; background: #CE7247; }
.hiw-rp-brand-sub { font-weight: 400; color: #5D5C58; font-size: 13px; }
.hiw-rp-bar-right { display: flex; align-items: center; gap: 14px; }
.hiw-rp-prepared { font-size: 12.5px; color: #5D5C58; }
.hiw-rp-prepared b { color: #5D5C58; }
.hiw-close-report { color: #5D5C58; border-color: #E5E7EB; }
.hiw-rp-body { overflow-y: auto; padding: 44px 64px 52px; }
.hiw-rp-live {
  display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: #5D5C58;
  border: 1px solid #E5E7EB; border-radius: 9999px; padding: 6px 16px; background: #FFFFFF;
}
.hiw-rp-live-dot { width: 7px; height: 7px; border-radius: 50%; background: #CE7247; }
.hiw-rp-head {
  font-family: var(--f-serif); font-size: 44px; font-weight: 700; color: #0b0b0b;
  line-height: 1.12; letter-spacing: -0.02em; margin-top: 24px; max-width: 780px; text-wrap: pretty;
}
.hiw-rp-lede { font-size: 17px; line-height: 1.65; color: #3f3e3a; margin: 22px 0 0; max-width: 760px; text-wrap: pretty; }
.hiw-rp-ctas { display: flex; gap: 14px; margin-top: 28px; flex-wrap: wrap; }
.hiw-rp-cta-solid {
  display: inline-flex; align-items: center; height: 46px; padding: 0 26px; border-radius: 10px;
  background: #B85A3E; color: #FFFFFF; font-size: 15px; font-weight: 600;
}
.hiw-rp-cta-line {
  display: inline-flex; align-items: center; height: 46px; padding: 0 26px; border-radius: 10px;
  border: 1.5px solid #D8D6D0; color: #0b0b0b; font-size: 15px; font-weight: 600; background: #FFFFFF;
}
.hiw-rp-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 20px;
  border-top: 1px solid #E5E7EB; margin-top: 40px; padding-top: 24px;
}
.hiw-rp-stat { font-family: var(--f-serif); font-size: 34px; font-weight: 700; color: #0b0b0b; }
.hiw-rp-stat-green { color: #419209; }
.hiw-rp-stat-cap { font-size: 12.5px; color: #5D5C58; margin-top: 4px; }

/* Self-hosted Caveat for the sketch's hand-drawn text. Google's css2
   endpoint serves ONE variable latin woff2 for both requested weights
   (400;700 → same file URL), so a single file backs both faces — same
   download-once pattern as the source-serif-4 faces above. The sketch's
   font-family="Caveat" presentation attributes stay verbatim; this rule
   layers the spec'd fallback stack over them. */
@font-face {
  font-family: "Caveat";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/fonts/caveat-latin.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: "Caveat";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("assets/fonts/caveat-latin.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;
}

/* ── Motion (r2) ───────────────────────────────────────────────────────────
   One authored moment, applied consistently: a surface arrives. Every dialog
   on the page teleported into the top layer; now each fades and settles from
   6px with the strong ease-out curve (built-in CSS easings are too weak to
   read as intentional). 200ms, inside the sub-300ms UI budget. Modals keep
   transform-origin: center — they are not anchored to a trigger, so the
   origin-awareness rule that governs popovers does not apply.

   Enter only. dialog.close() drops the element out of the top layer in the
   same frame, so an exit animation would need JS state the shipped
   wireDialog convention does not carry; instant-out is also the correct
   asymmetry (deliberate open, snappy dismiss). */
dialog[open] {
  transition: opacity 200ms cubic-bezier(0.23, 1, 0.32, 1),
              transform 200ms cubic-bezier(0.23, 1, 0.32, 1);
  opacity: 1;
  transform: translateY(0) scale(1);
}
@starting-style {
  dialog[open] { opacity: 0; transform: translateY(6px) scale(0.97); }
}
dialog[open]::backdrop { transition: opacity 200ms cubic-bezier(0.23, 1, 0.32, 1); opacity: 1; }
@starting-style { dialog[open]::backdrop { opacity: 0; } }

/* The Close control had no hover state at all — a pressable element with no
   feedback. Same 160ms ease-out the shipped .btn-coral uses. */
.hiw-close {
  transition: background-color 160ms cubic-bezier(0.23, 1, 0.32, 1),
              border-color 160ms cubic-bezier(0.23, 1, 0.32, 1),
              transform 120ms cubic-bezier(0.23, 1, 0.32, 1);
}
@media (hover: hover) and (pointer: fine) {
  .hiw-close:hover { background: rgba(255,255,255,0.09); border-color: rgba(255,255,255,0.30); }
  .hiw-close-report:hover { background: rgba(0,0,0,0.05); border-color: #D8D6D0; }
}
.hiw-close:focus-visible { border-color: rgba(255,255,255,0.30); }
.hiw-close-report:focus-visible { border-color: #D8D6D0; }
.hiw-close:active, .hiw-po-view-report:active { transform: scale(0.97); }

/* The shipped kill switch is `* { animation: none !important }`, which does
   not touch transitions. Everything added above is a transition, so it is
   named here explicitly. Reduced motion means instant, not broken: every
   end state above is the resting state, so the surfaces still arrive — they
   just stop travelling. */
@media (prefers-reduced-motion: reduce) {
  dialog[open], dialog[open]::backdrop, .hiw-plate, .hiw-hit, .hiw-node,
  .hiw-close, .hiw-po-view-report, .hiw-act {
    transition: none !important;
  }
  .hiw-node:active, .hiw-close:active, .hiw-po-view-report:active { transform: none !important; }
}

/* ═══ 8 · Founder letter (story text column) ═══════════════════════════
   Request 1 + the Request 2 graft: the story-grid stays two columns and the
   portrait button/lightbox on the left is untouched. Only the text column
   changes — it becomes a white letter sheet on the #FCFAF6 ground.

   Every colour below already appears earlier in this file:
     #FFFFFF  body/bio/apply grounds        #0B0B0B  story headline ink
     #3C4A59  story-body ink                #E5E7EB  bio-rule hairline
     #CE7247  wordmark star                 #B85A3E  btn-coral
   Measured contrast on the sheet: coral #B85A3E on #FFFFFF = 4.60 (normal
   text, ≥4.5); body ink #3C4A59 on #FFFFFF = 9.07. The 5% coral lane wash
   that used to run down the table's Desk-Ops column retired with it — see
   the tombstone below and §9 for the ruling that replaced it. */
.letter {
  background: #FFFFFF;
  border-radius: 6px;
  /* same drop shadow the portrait carries, so sheet and photo sit on the
     same plane above the paper ground */
  box-shadow: 0 18px 34px -14px rgba(28,24,20,0.42), 0 2px 6px -2px rgba(28,24,20,0.2);
  padding: clamp(24px, 3.6vw, 52px) clamp(20px, 3.2vw, 48px) clamp(26px, 3.6vw, 48px);
  box-sizing: border-box;
}

/* Letterhead: the page wordmark in ink, a dated right rail, a hairline. */
.letter-head {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: 8px 16px;
}
.letter-wordmark {
  display: flex; align-items: baseline; gap: 1px;
  font-weight: 800; font-size: 1.55rem; letter-spacing: -0.02em; color: #0B0B0B;
}
.letter-wordmark .star {
  width: 0.72em; height: 0.72em; fill: #CE7247;
  align-self: center; margin: 0 1px; flex: 0 0 auto;
}
.letter-date {
  font-family: var(--f-mono); font-size: 0.85rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.2em; color: #3C4A59;
}
.letter-rule { height: 1px; background: #E5E7EB; margin: 14px 0 26px; }

.letter h2 {
  margin: 14px 0 0;
  font-family: var(--f-serif); font-weight: 700;
  font-size: clamp(1.9rem, 3.2vw, 2.7rem);
  line-height: 1.08; letter-spacing: -0.02em;
  color: #0B0B0B; text-wrap: pretty; text-align: left;
}
.letter-salutation {
  margin: 20px 0 0;
  font-family: var(--f-serif); font-weight: 700; font-style: italic;
  font-size: 1.12rem; line-height: 1.6; color: #3C4A59;
}

/* Body prose: verbatim from the shipped story, reset in the self-hosted
   Source Serif 4 400 face declared at the top of this file. */
.letter-body {
  margin-top: 16px;
  font-family: var(--f-serif); font-weight: 400;
  font-size: 1.12rem; line-height: 1.75; color: #3C4A59;
}
/* The old section H2 survives as the letter's rhetorical question. */
.letter-question {
  font-family: var(--f-serif); font-weight: 700; font-style: italic;
  font-size: 1.12rem; line-height: 1.6; letter-spacing: -0.01em;
  color: #3C4A59; text-wrap: pretty;
}

/* ── The comparison — RETIRED 2026-08-03 ────────────────────────────────
   The letter-compare table and every rule that served it (its lead-in, head,
   stage, verdict and note selectors, plus the sub-560px block) are superseded
   by the two-lane compare card in §9. Only .lc-vh survives — §9 reuses it for
   the card's assistive-tech summary. */
.lc-vh { position: absolute; left: -9999px; top: -9999px; }

/* Relay diagram: transparent PNG sits directly on the white sheet. */
.letter-figure { margin: 26px 0 0; }
.letter-figure-caption {
  margin: 0 0 14px;
  font-family: var(--f-sans); font-size: 0.98rem; font-weight: 700;
  line-height: 1.5; color: #3C4A59; text-align: center; text-wrap: pretty;
}
/* Phone cap 280px = the founder portrait's rendered width at 390 — Skip's
   8/7 ruling: the vertical relay sits slightly smaller, portrait-sized. */
.letter-figure img { display: block; width: 100%; max-width: 280px; margin: 0 auto; height: auto; }
@media (min-width: 700px) { .letter-figure img { max-width: 100%; } }

/* ─── Manual vs Desk-Ops: two separated sides, brand star between ─── */
/* 14px under the 8/7 title line ("Here is an overview of a Manual vs
   Desk-Ops workflow:") — same lead-in rhythm as the benefits list. */
.cmp { margin: 14px 0 0; max-width: 640px; display: grid; grid-template-columns: minmax(0, 1fr); }
.cmp-side {
  border: 1px solid rgba(255,255,255,0.14); border-radius: 6px;
  padding: 20px 20px 22px;
}
.cmp-side.is-ops { border-color: rgba(184,90,62,0.6); background: rgba(255,255,255,0.05); }
.cmp-side-head {
  font-family: var(--f-serif); font-weight: 700;
  font-size: clamp(19px, 4.6vw, 23px); line-height: 1;
}
.is-manual .cmp-side-head { color: #8FA3B5; }
.is-ops .cmp-side-head { color: #F2F2EE; }
.cmp-stage { margin-top: 17px; }
.cmp-stage-name {
  font-family: var(--f-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: #BFE7FE;
}
/* 0.6 in the comp measured 4.32:1 on the band — lifted to 0.66 for 4.5:1
   (same a11y-forced move as the 8/6 step-kicker 0.52→0.58). */
.is-manual .cmp-stage-name { color: rgba(191,231,254,0.66); }
.cmp-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; column-gap: 12px; margin-top: 9px;
}
.cmp-track { position: relative; height: 12px; }
.cmp-bar { position: absolute; left: 0; top: 0; height: 100%; border-radius: 999px; }
.cmp-bar.is-slate { background: #6E8497; }
.cmp-bar.is-endless { background: linear-gradient(90deg, #6E8497 52%, rgba(110,132,151,0)); }
.cmp-bar.is-coral { background: #B85A3E; }
.cmp-dur { font-size: 13.5px; line-height: 1.3; color: #A9BCCB; white-space: nowrap; }
.is-ops .cmp-dur { color: #F2F2EE; font-weight: 600; }
.cmp-vs { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 16px 0; }
.cmp-vs-mark { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.cmp-vs-label {
  font-family: var(--f-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255,255,255,0.66); line-height: 1;
}
.cmp-vs-line { flex: 1 1 auto; height: 1px; background: rgba(255,255,255,0.16); }
.cmp-star { width: 28px; height: 28px; flex: 0 0 auto; fill: #B85A3E; }
@media (min-width: 700px) {
  .cmp { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; }
  .cmp-vs { flex-direction: column; padding: 0 14px; }
  .cmp-vs-line { width: 1px; height: auto; flex: 1 1 auto; }
}
@media (max-width: 420px) {
  .cmp-row { grid-template-columns: minmax(0, 1fr); row-gap: 6px; }
  .cmp-dur { white-space: normal; }
}

/* ─── Client quotes: one quiet box, slow cross-fade ─── */
.rot {
  margin: 26px 0 0; max-width: 60ch;
  border: 1px solid rgba(255,255,255,0.18); border-radius: 6px;
  padding: 20px 22px 22px;
}
.rot-kicker {
  font-family: var(--f-mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.52);
}
.rot-stage { position: relative; margin-top: 12px; transition: height 400ms cubic-bezier(0.16, 1, 0.3, 1); }
.rot-slide {
  position: absolute; inset: 0 0 auto; margin: 0;
  opacity: 0; visibility: hidden;
  transition: opacity 900ms ease-out, visibility 0s linear 900ms;
}
.rot-slide.is-on { opacity: 1; visibility: visible; transition: opacity 900ms ease-out; }
.rot-slide blockquote { margin: 0; font-size: 14.5px; line-height: 1.68; color: #E8F2FA; text-wrap: pretty; }
.rot-slide figcaption { display: block; margin-top: 12px; }
.rot-name { display: block; font-size: 13.5px; font-weight: 600; color: #FFFFFF; }
.rot-role {
  display: block; margin-top: 3px;
  font-family: var(--f-mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.52);
}
/* Dots: 7px visual mark inside a 24×24 hit area (WCAG 2.5.8 floor — the comp's
   bare 7px buttons failed the 8/7 web-quality-check). Inactive alpha 0.4 and
   active #CE7247 are a11y-forced lifts from the comp's 0.24 / #B85A3E: both
   now clear 3:1 non-text contrast on the #2B3A4A band (1.4.11). */
.rot-dots { display: flex; gap: 0; margin-top: 18px; }
.rot-dot {
  width: 24px; height: 24px; padding: 0; border: 0; border-radius: 999px;
  background: transparent; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.rot-dot::before {
  content: ''; width: 7px; height: 7px; border-radius: 999px;
  background: rgba(255,255,255,0.4); transition: background 180ms ease-out;
}
.rot-dot.is-on::before { background: #CE7247; }
.rot-dot:hover::before { background: rgba(255,255,255,0.6); }
.rot-dot.is-on:hover::before { background: #CE7247; }
.rot-dot:focus-visible { outline: 2px solid #CE7247; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .rot-slide, .rot-stage { transition: none; }
}

.letter-close {
  margin: 24px 0 0;
  font-family: var(--f-sans); font-size: 1.12rem; line-height: 1.6; color: #0B0B0B;
}

/* Typed sign-off. */
.letter-signoff { margin-top: 30px; }
.letter-sign {
  margin: 0;
  font-family: var(--f-serif); font-weight: 600;
  font-size: 1.18rem; line-height: 1.3; color: #0B0B0B;
}
.letter-sign-role {
  margin: 7px 0 0;
  font-family: var(--f-mono); font-size: 0.6875rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.2em; color: #3C4A59;
}

/* ═══ 9 · Compare card + capabilities grid (letter interior) ═══════════
   Port of the Claude Design export
   `../source/Desk-Ops Compare (standalone).html` — a 480px-wide standalone
   card built on the agent-smith `--as-*` token set. That token set is NOT
   available here (index-v2.css is deliberately literal-hex, comp-sourced),
   so every export value was re-expressed in this page's own palette. The
   full token map, the deviations, and the a11y rulings that forced them
   live in `../NOTES.md` — read that before changing a colour here.

   Colours below are all pre-existing on this page:
     #B85A3E coral action      #3C4A59 body ink on light
     #6B7280 muted ink         #0B0B0B headline ink
     #E5E7EB hairline          #FFFFFF sheet
   plus rgba() forms of those and of rgba(28,24,20,·) (the letter/portrait
   shadow triple). No new hex is introduced.

   The card sizes itself with container queries, not viewport queries: it
   lives inside the letter sheet, which is itself a grid column, so the
   viewport says nothing useful about how wide the card actually is.
   container-type is set on .lc-card and .caps only — never on .letter,
   which would break the sheet's own layout. */

/* ── Dek: the standfirst under the H2 ───────────────────────────────────
   Set in Inter, not the serif. The H2 above and the salutation below are
   both Source Serif 4; a third serif block at a near-identical size
   flattens the stack. Sans also matches the letter chrome (mono date,
   sans kicker), which is where this line belongs — it is a credential
   standfirst, not letter prose. */
.letter-dek {
  margin: 10px 0 0;
  font-family: var(--f-sans); font-weight: 400;
  font-size: 1.18rem; line-height: 1.45; letter-spacing: -0.005em;
  color: #3C4A59; text-wrap: pretty;
}

/* ── The card ───────────────────────────────────────────────────────── */
.lc-card {
  container-type: inline-size;
  margin: 6px 0;
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
  /* 6px, not the export's 10px: the sheet this sits on (.letter) is 6px, and
     an inner surface with a rounder corner than its container inverts the
     shape hierarchy. One rectangle radius in the letter world (6px) + one
     pill radius for meters (999px). See ../NOTES.md deviation D-3. */
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(28,24,20,0.08);
  padding: 22px;
  box-sizing: border-box;
  font-family: var(--f-sans);
}

/* §3 ships `.story-body p { margin: 0 }` at (0,1,1). Every <p> in the card
   and the grid is a descendant of .story-body, so a bare `.lc-note` (0,1,0)
   loses to it and margin-left:auto never applies. Reset here at equal
   specificity (later in the cascade wins), then re-assert the few paragraph
   margins that matter with the .lc-card / .caps prefix. */
.lc-card p,
.caps p { margin: 0; }

/* One hairline, three jobs: under the card title and under each lane head. */
.lc-rule { height: 1px; background: #E5E7EB; margin: 12px 0 16px; }
.lc-lane .lc-rule { margin: 12px 0 16px; }

.lc-cols { display: grid; grid-template-columns: 1fr; gap: 26px; }
.lc-lane { min-width: 0; }

/* Lane head: icon spans both text rows, so no wrapper div is needed. */
.lc-lane-head {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: clamp(14px, 1.6vw, 24px);
  align-items: center;
  min-height: 120px;
  margin-bottom: 6px;
}
.lc-lane-icon {
  grid-row: 1 / span 2; align-self: center;
  width: clamp(88px, 9vw, 128px); height: clamp(88px, 9vw, 128px); object-fit: contain;
}
.lc-lane-icon--avatar { width: clamp(88px, 9vw, 128px); height: clamp(88px, 9vw, 128px); border-radius: 10px; object-fit: cover; }
/* 17.5px, an optical lift from the export's 17px: the export set this in
   Playfair, which runs larger on the body than Source Serif 4 does. Same
   apparent size, different metrics. Playfair is banned by DESIGN.md. */
.lc-lane-title {
  grid-column: 2; margin: 0;
  font-family: var(--f-serif); font-weight: 700;
  font-size: clamp(1.5rem, 2.3vw, 2.1rem); line-height: 1.12; letter-spacing: -0.015em;
  color: #0B0B0B;
}
.lc-card .lc-lane-sub {
  grid-column: 2; margin: 4px 0 0;
  font-size: clamp(0.95rem, 1.1vw, 1.05rem); line-height: 1.4; font-weight: 400; color: #3C4A59;
}
.lc-lane-sub strong { font-weight: 700; color: #0B0B0B; }

/* ── Steps: a 14px marker rail beside the body ──────────────────────── */
.lc-steps { list-style: none; margin: 0; padding: 0; }
.lc-step {
  display: grid;
  grid-template-columns: 18px 1fr;
  column-gap: 14px;
}
.lc-rail { display: flex; flex-direction: column; align-items: center; }
.lc-rail-line { width: 2px; flex: 1; background: #0B0B0B; }
.lc-dot {
  width: 13px; height: 13px; border-radius: 999px;
  border: 2.5px solid rgba(90,98,110,0.75); background: #FFFFFF;
  box-sizing: border-box; flex: none; margin-top: 4px;
}
.lc-dot--filled { border-color: #3C4A59; background: #3C4A59; }
.lc-mark { flex: none; margin-top: 3px; width: 17px; height: 17px; }

.lc-step-body { padding-bottom: clamp(16px, 1.8vw, 24px); min-width: 0; }
.lc-step:last-child .lc-step-body { padding-bottom: 0; }
.lc-step-name {
  display: block;
  font-size: clamp(16px, 1.3vw, 18px); font-weight: 600; line-height: 1.3; color: #0B0B0B;
}
.lc-step-note {
  display: block; margin-top: 2px;
  font-size: clamp(13px, 1.05vw, 14.5px); line-height: 1.45; font-weight: 400; color: #4B5563;
  overflow-wrap: break-word;
}
/* The one pain-side note that is a consequence, not a description. */
.lc-step-note--alert { color: #B85A3E; }

/* ── Meters ─────────────────────────────────────────────────────────── */
.lc-meter {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
  padding-top: 5px;
}
.lc-bar {
  display: block; height: 8px; border-radius: 999px;
  width: var(--w); min-width: 24px;
}
.lc-bar--gray { background: rgba(96,104,116,0.72); }
.lc-bar--dark { background: #3C4A59; }
.lc-bar--coral { background: #B85A3E; }
.lc-bar--coral-soft { background: rgba(184,90,62,0.4); }
/* R2 design call: coral labels at 700 — weight, not color, carries the
   legibility margin (4.60:1 stands). Muted grays stay 400. */
.lc-meter-label {
  font-size: clamp(12.5px, 1vw, 13.5px); line-height: 1.3; font-weight: 700; color: #B85A3E;
}
.lc-meter-label--muted { color: #55606E; font-weight: 400; }
.lc-meter-label--endless { color: #3C4A59; font-weight: 700; }

/* ── Callouts ───────────────────────────────────────────────────────── */
.lc-callout {
  margin-top: 14px;
  border-radius: 6px;   /* D-3: one rectangle radius in the letter world */
  padding: 9px 11px;
  box-sizing: border-box;
}
.lc-callout--manual {
  border: 1px solid #E7DDD3;
  border-radius: 14px;
  background: #FCFAF6;
  display: flex; gap: 12px; align-items: center;
  padding: 14px 18px;
}
.lc-callout--manual .lc-callout-body {
  font-size: clamp(11.5px, 0.92vw, 12.5px); line-height: 1.4; white-space: nowrap; min-width: 0;
}
/* nowrap has no room on phones — the punchline clipped mid-word at ≤390px
   (comp carries the same defect; "clipped is a bug" per the design-lane
   ruling). Wrap where the one-line fit is impossible. */
@media (max-width: 700px) {
  .lc-callout--manual .lc-callout-body { white-space: normal; }
}
.lc-callout-icons { display: flex; gap: 8px; flex: none; align-items: center; }
.lc-callout-body {
  margin: 0;
  font-size: clamp(13px, 1.05vw, 14.5px); line-height: 1.55; font-weight: 600; color: #3C4A59;
}
/* The auto lane's callout is the step body, not an addendum under it. */
.lc-callout--auto {
  margin-top: 0;
  border: 1px solid #E7DDD3;
  border-radius: 14px;
  padding: 16px 18px 18px;
  background: #FCFAF6;   /* brand cream on the white sheet (D-1 contrast note upheld: body text stays near-black) */
  display: flex; flex-direction: column; gap: 12px;
}
.lc-callout--auto .lc-callout-body { color: #0B0B0B; font-weight: 400; }
.lc-callout--auto .lc-callout-body strong { color: #B85A3E; font-weight: 700; }
.lc-callout--auto .lc-meter { padding-top: 0; }
.lc-callout--auto .lc-rule { margin: -2px 0; }
.lc-lane--manual > .lc-rule:not(:first-of-type) { margin: 16px 0 0; }
.lc-lane--manual > .lc-callout--manual + .lc-rule { margin: 16px 0 0; }
.lc-callout-head {
  margin: 0;
  font-size: clamp(16px, 1.3vw, 18px); line-height: 1.3; font-weight: 600;
  /* -0.005em keeps the comp's one-line desktop fit after the "Desk-Ops" hyphen
     ruling added ~3px (hyphen glyph > space) to an exactly-fitting line. */
  letter-spacing: -0.005em;
  color: #3C4A59;
}
.lc-callout-head strong { color: #0B0B0B; font-weight: 600; }

/* End-to-end automation callout: node/arrow loop + report CTA. Nodes stack
   with the loop between them until the lane is wide enough for a triptych. */
.lc-e2e-loop {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 8px; column-gap: 14px;
  align-items: center; justify-items: center;
  margin-top: 2px;
}
.lc-e2e-side { width: 100%; display: flex; flex-direction: column; gap: 6px; align-items: center; }
.lc-e2e-node {
  width: 100%;
  background: #FFFFFF;
  /* hand-drawn: wobbly double-radius rectangle, inked outline */
  border: 1.8px solid #0B0B0B;
  border-radius: 255px 18px 225px 18px / 18px 225px 18px 255px;
  padding: 10px 14px; box-sizing: border-box;
  display: flex; flex-direction: column; gap: 3px; align-items: center; text-align: center;
}
/* Two boxes drawn on two different occasions: each gets its own corner seed,
   its own per-side pen pressure, and a sub-degree skew so neither reads as
   the other one mirrored. */
.lc-e2e-loop > .lc-e2e-side:first-child .lc-e2e-node {
  border-width: 1.6px 2.2px 1.9px 1.5px;   /* heavy on the closing right edge */
  border-radius: 240px 15px 185px 30px / 24px 195px 13px 235px;
  transform: rotate(-0.9deg) skewX(0.5deg);
}
.lc-e2e-loop > .lc-e2e-side:last-child .lc-e2e-node {
  border-width: 2.1px 1.5px 1.6px 2px;     /* heavy where this one started, top-left */
  /* Blink floors border-width to whole px, so the heavier top would add 1px
     of box height — give it back in the padding and the row stays put. */
  padding-top: 9px;
  border-radius: 30px 200px 20px 255px / 235px 26px 250px 15px;
  transform: rotate(0.8deg) skewX(-0.6deg);
}
.lc-e2e-node b {
  font-family: Caveat, cursive; font-weight: 700;
  font-size: clamp(21px, 1.7vw, 25px); color: #0B0B0B; line-height: 1.1;
}
.lc-e2e-cap { font-style: normal; font-family: var(--f-mono); font-size: 12.5px; color: #55606E; line-height: 1.4; text-align: center; }
.lc-e2e-flow { display: flex; flex-direction: column; gap: 5px; align-items: center; }
.lc-e2e-flowline { display: inline-flex; align-items: center; gap: 8px; }
.lc-e2e-flowline em {
  font-style: normal; font-family: var(--f-mono);
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: #3C4A59; white-space: nowrap;
}
.lc-e2e-arr { flex: none; display: block; }
.lc-e2e-report-link { color: #B85A3E; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; padding: 12px 6px; margin: 0 -6px; }
.lc-e2e-report-link:hover { color: #9A4830; }
/* Hand-drawn margin note. Two placements: --above (floats beside the box on
   wide sheets, arrow diving down) and --below (stacked layouts: sits under
   the box, arrow reaching back up). Only one shows at a time. */
.lc-hand { display: flex; flex-direction: column; align-items: center; margin: 4px 0 6px; }
.lc-hand--above { display: none; }
.lc-hand--below { margin: 26px auto 10px; }
.lc-hand--below .lc-hand-arrow { margin: 0 0 8px -22px; }
.lc-hand-text {
  margin: 0; max-width: 16ch; text-align: center;
  position: relative; z-index: 0;
  font-family: Caveat, cursive; font-weight: 700;
  font-size: clamp(23px, 2vw, 28px); line-height: 1.15; color: #0B0B0B;
  transform: rotate(-1.4deg);
}
/* Ring drawn round the note. The radii are irregular (each opposing pair still
   sums to 100% so the curve closes without a straight run) and the border
   thickens where a right hand bears down — a perfect ellipse is the tell. */
.lc-hand-text::before {
  content: ""; position: absolute; z-index: -1;
  inset: -30px -46px;
  background: #FDFBF7;
  border: solid rgba(107,114,128,0.55);
  border-width: 1.3px 2.3px 2px 1.5px;
  border-radius: 47% 53% 44% 56% / 55% 46% 54% 45%;
  transform: rotate(-3deg);
}
/* Second pass of the pen — its own wobble, so it crosses the first ring
   instead of nesting inside it as a concentric copy. */
.lc-hand-text::after {
  content: ""; position: absolute; z-index: -1;
  inset: -26px -43px;
  border: solid rgba(107,114,128,0.3);
  border-width: 2.1px 1.1px 1.3px 2.2px;
  border-radius: 54% 46% 57% 43% / 44% 58% 42% 56%;
  transform: rotate(3.4deg);
}
/* Words drift off the baseline in a real margin note. */
.lc-hand-text span:not(.lc-hand-ast) { color: #0B0B0B; white-space: nowrap; position: relative; top: -1.5px; }
.lc-hand-text u { color: #0B0B0B; text-decoration-thickness: 2.5px; text-underline-offset: 4px; white-space: nowrap; position: relative; top: 1px; }
.lc-hand-arrow { display: block; margin: 4px 0 0 -30px; }
.lc-hand-text .lc-hand-ast {
  position: absolute; top: -52px; right: -8px;
  font-family: var(--f-sans); font-weight: 800;
  font-size: 88px; line-height: 1; color: #B85A3E;
  transform: rotate(8deg);
  pointer-events: none;
}
/* Below-note lives OUTSIDE the sheet, on the page background; .flow-cmp is
   its container so the 940px swap still resolves. */
.flow-cmp { container-type: inline-size; }
.flow-cmp > .lc-hand--below { margin: 34px auto 10px; width: fit-content; }
@container (min-width: 940px) {
  .lc-e2e-loop { grid-template-columns: 1fr auto 1fr; align-items: start; column-gap: 6px; }
  .lc-e2e-flow { margin-top: 16px; }
  /* Keep the middle column narrow enough that the side boxes stay inside the panel. */
  .lc-e2e-flowline { gap: 5px; }
  .lc-e2e-flowline em { font-size: 9.5px; letter-spacing: 0.05em; }
  .lc-e2e-flowline .lc-e2e-arr { width: 36px; height: 10px; }
  /* Captions bleed into the empty middle so they wrap less and sit shorter. */
  .lc-e2e-side:first-child .lc-e2e-cap { width: 140%; align-self: flex-start; margin-right: -40%; }
  .lc-e2e-side:last-child .lc-e2e-cap { width: 140%; align-self: flex-end; margin-left: -40%; }
  /* Hand note floats in the lane's empty upper-right, arrow diving to the loop box. */
  .lc-lane--deskops { position: relative; }
  .lc-hand--above { display: flex; }
  .lc-hand--below { display: none; }
  .lc-lane--deskops .lc-hand {
    position: absolute; top: 210px; right: 1%; width: 44%; margin: 0;
    pointer-events: none; z-index: 1;
  }
  .lc-lane--deskops .lc-hand .lc-hand-arrow {
    width: 76px; height: 100px;
    margin: 8px 0 0 0; transform: translateX(-125px);
  }
}

/* Two lanes as soon as the card itself is wide enough — the export's
   1fr 1.15fr, which gives the busier Desk-Ops lane the extra room. */
/* Versus composition: badge sits in the stack on narrow sheets, floats in
   the centre gap on wide ones where the two rails meet. */
.lc-vs {
  width: 56px; height: 56px; border-radius: 999px;
  background: #B85A3E; color: #FFFFFF;
  font-family: var(--f-serif); font-weight: 700; font-size: 21px; letter-spacing: 0.02em;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 14px -4px rgba(184,90,62,0.5);
  transform: rotate(-4deg);
  margin: 6px auto;
  order: 2;
}
.lc-lane--manual { order: 1; }
.lc-lane--deskops { order: 3; }
/* Side-by-side VS only when each lane clears ~300px; below that the stack
   (Manual → VS → Desk-Ops) is the layout — a squeezed mirror reads broken. */
@container (min-width: 680px) {
  .lc-cols {
    position: relative;
    grid-template-columns: 1fr 1fr;
    gap: clamp(64px, 8cqw, 96px);
  }
  .lc-vs {
    position: absolute; left: 50%; top: 32px; margin: 0;
    transform: translateX(-50%) rotate(-4deg);
    z-index: 1;
  }
  /* Manual lane mirrors: text set right, rail hugging the centre spine. */
  /* Icons on the outside edges; titles face each other across the VS. */
  .lc-lane--manual .lc-lane-title { text-align: right; }
  .lc-lane--manual .lc-lane-sub { text-align: right; }
  .lc-lane--deskops .lc-lane-head { grid-template-columns: 1fr auto; }
  .lc-lane--deskops .lc-lane-icon { grid-column: 2; grid-row: 1 / span 2; }
  .lc-lane--deskops .lc-lane-title { grid-column: 1; grid-row: 1; }
  .lc-lane--deskops .lc-lane-sub { grid-column: 1; grid-row: 2; }
  .lc-lane--manual .lc-step { grid-template-columns: 1fr 18px; }
  .lc-lane--manual .lc-rail { grid-column: 2; grid-row: 1; }
  .lc-lane--manual .lc-step-body { grid-column: 1; grid-row: 1; text-align: right; }
  .lc-lane--manual .lc-meter { justify-content: flex-end; }
  .lc-lane--manual .lc-callout--manual { flex-direction: row-reverse; text-align: right; }
}

/* ── Narrow sheets ──────────────────────────────────────────────────── */
@media (max-width: 699.98px) {
  .lc-card { padding: 18px 16px; }
}

/* ═══ 10 · Story split: service overview moved between letter and flow ════
   The story section is now two bands with the dark Service Overview between
   them. First band keeps portrait+letter only; second carries the flow. */
.story-grid--letter { grid-template-areas: "portrait letter"; }
@media (max-width: 999.98px) {
  .story-grid--letter { grid-template-areas: "portrait" "letter"; }
}
.story-grid--flow { grid-template-columns: minmax(0, 1100px); grid-template-areas: "flow"; }
@media (max-width: 999.98px) {
  .story-grid--flow { grid-template-columns: minmax(0, 1fr); grid-template-areas: "flow"; }
}