/* Redstring landing page. Tokens and fonts live in base.css.
   Frame: a canvas product. The first screen is the board itself, edge to edge: a flat dark
   canvas with a dot grid, sample cards tied with red string, the pitch in a panel docked at
   the top left, a tool pill at the bottom. Below it everything sits on cards, and every
   diagram is a small tile of the same canvas. Flat colour only.

   Three surfaces: --bg is the page and the panels that float over the canvas, --board is the
   canvas (the first screen and every diagram tile), --card is a card. */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-size-adjust: 100%; color-scheme: dark; }
body { margin: 0; background: var(--bg); color: var(--text); font: 17px/1.5 var(--sans); }
h1, h2, h3, p, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; padding: 8px 12px; border-radius: 8px; background: #fff; color: var(--bg); font-weight: 600; }
.skip:focus { left: 12px; }
:root { --pad: max(24px, calc((100vw - 1200px) / 2)); --edge: 24px; --panel-line: rgba(255, 255, 255, .13); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 48px; padding: 0 20px; border: 0; border-radius: 10px; background: #DC2A33; /* a shade deeper than the string: white text at 4.75:1 */ color: #fff; font: 600 16px/1 var(--sans); white-space: nowrap; cursor: pointer; transition: background-color .15s ease-out, transform .15s ease-out; }
.btn:hover { background: #C3212A; }
.btn:active { transform: scale(.97); }
.btn svg { flex: none; width: 18px; height: 18px; }
.btn--sm { height: 40px; padding: 0 16px; font-size: 14px; }
.btn--line { background: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); color: var(--text); }
.btn--line:hover { background: rgba(255, 255, 255, .08); }
.req { font-size: 13px; color: var(--text-3); text-wrap: balance; }
.req span { white-space: nowrap; }
.lede { font-size: clamp(17px, 1.4vw, 20px); color: var(--text-2); text-wrap: pretty; }
h2 { font-size: clamp(30px, 3.4vw, 48px); line-height: 1.04; letter-spacing: -.03em; font-weight: 800; text-wrap: balance; }

/* ---------- top bar: nothing behind it until the page scrolls ---------- */

.nav { position: fixed; inset: 0 0 auto; z-index: 50; display: flex; align-items: center; gap: 8px; height: 72px; padding: 0 var(--edge); transition: background-color .2s ease-out; }
.nav.is-stuck { background: var(--bg); }
.logo { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; margin-right: 20px; border-radius: 8px; font-size: 20px; font-weight: 800; letter-spacing: -.03em; }
.logo img { border-radius: 7px; }
.nav__links { display: flex; gap: 8px; }
.nav__links a { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px; font-size: 14px; font-weight: 500; color: var(--text-2); transition: border-color .15s ease-out, color .15s ease-out; }
.nav__links a:hover { border-color: rgba(255, 255, 255, .45); color: var(--text); }
.nav > .btn { margin-left: auto; }

/* ---------- the canvas ---------- */

/* One screen tall. The dock is in the flow, so if its text ever runs longer the canvas grows with it
   instead of letting it run into the chips at the bottom. */
.board { --dock: clamp(380px, 30.5vw, 440px); position: relative; min-height: clamp(720px, 100vh, 900px); min-height: clamp(720px, 100svh, 900px); padding: 84px var(--edge) 76px; border-bottom: 1px solid var(--line); background: var(--board); overflow: hidden; }
.dots { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.dots circle { fill: rgba(255, 255, 255, .12); }

/* The dock: the pitch, and under it the offer that appears with the held-back card. */
.dock { position: relative; z-index: 5; display: grid; gap: 12px; width: var(--dock); }
.pitch, .sheet { border: 1px solid var(--panel-line); border-radius: 12px; background: var(--bg); box-shadow: 0 28px 56px -36px #000; }
.pitch { padding: 28px 28px 0; }
h1 { font-size: clamp(41px, 3.35vw, 48px); line-height: 1.02; letter-spacing: -.035em; font-weight: 800; text-wrap: balance; }
.pitch .lede { margin-top: 14px; font-size: 17px; }
.pitch .btn { margin-top: 24px; }
/* What it runs on: the panel's footer strip. */
.pitch .req { margin: 26px -28px 0; padding: 12px 28px 13px; border-top: 1px solid var(--line); }
.sheet { padding: 20px 24px 16px; border-style: dashed; border-color: rgba(255, 255, 255, .36); visibility: hidden; transition: border-color .25s ease-out; }
.sheet h2 { font-size: 21px; line-height: 1.2; letter-spacing: -.02em; font-weight: 700; }
.sheet p { margin-top: 6px; font-size: 14px; line-height: 1.45; color: var(--text-2); text-wrap: pretty; }
.sheet__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.again { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border: 0; border-radius: 10px; background: none; color: var(--text-2); font: 500 14px/1 var(--sans); cursor: pointer; transition: background-color .15s ease-out, color .15s ease-out; }
.again:hover { background: rgba(255, 255, 255, .08); color: var(--text); }
.again svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.board.is-done .sheet { visibility: visible; animation: rise .45s cubic-bezier(.2, .8, .2, 1); }
.sheet.is-called { border-color: var(--text); }
@keyframes rise { from { opacity: 0; translate: 0 10px; } }

/* The cards live to the right of the dock, so the pitch never covers one. */
.pins { position: absolute; top: 0; bottom: 0; left: calc(var(--edge) + var(--dock) + 24px); right: var(--edge); max-width: 1400px; margin: 0 auto; }
.strings { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.strings line { stroke: var(--string); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .55s ease-out, opacity .2s ease-out, stroke-width .2s ease-out; }
.strings .is-tied { stroke-dashoffset: 0; }
.strings .is-held { stroke-dasharray: 5 7; stroke-dashoffset: 0; stroke: var(--text-3); opacity: 0; }
.board.is-done .strings .is-held { opacity: 1; }
.pins.is-hot .strings line:not(.is-hot) { opacity: .18; }
.strings .is-hot { stroke-width: 3; }

.card { position: absolute; z-index: 2; width: 184px; padding: 17px 14px 13px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); box-shadow: 0 14px 28px -18px #000; translate: -50% 0; }
.card::before { content: ''; position: absolute; left: 50%; top: 0; width: 12px; height: 12px; border-radius: 50%; border: 3px solid var(--board); background: var(--text); translate: -50% -50%; box-sizing: content-box; }
.card span { display: block; font-size: 12px; line-height: 1.3; font-weight: 600; color: var(--text-3); }
.card b { display: block; margin-top: 2px; font-size: 16px; line-height: 1.25; font-weight: 700; letter-spacing: -.01em; overflow-wrap: anywhere; }
.card em { display: block; margin-top: 2px; font-size: 13px; font-style: normal; color: var(--text-2); }
.pins .card { cursor: grab; user-select: none; -webkit-user-select: none; touch-action: none; transition: border-color .15s ease-out; }
.pins .card:hover { border-color: rgba(255, 255, 255, .3); }
.pins .card.is-drag { z-index: 4; cursor: grabbing; border-color: rgba(255, 255, 255, .5); }
/* The card that is held back. */
.card.is-held { border-style: dashed; border-color: rgba(255, 255, 255, .4); background: var(--board); box-shadow: none; }
.card.is-held i { display: block; width: 70%; height: 13px; margin: 6px 0; border-radius: 4px; background: var(--card-2); }
.pins .card.is-held { cursor: pointer; opacity: 0; visibility: hidden; transition: opacity .4s ease-out, visibility 0s .4s; }
.board.is-done .pins .card.is-held { opacity: 1; visibility: visible; transition-delay: 0s; }
.tag { position: absolute; z-index: 3; padding: 3px 9px; border-radius: 999px; background: var(--board); color: var(--text-2); font: 500 12px/1.35 var(--sans); white-space: nowrap; translate: -50% -50%; opacity: 0; pointer-events: none; transition: opacity .3s ease-out .3s; }
.tag.is-tied { opacity: 1; }
.pins.is-hot .tag:not(.is-hot) { opacity: .15; transition-delay: 0s; }

/* Canvas chrome along the bottom edge: what was found, the tools (a picture), what this is. */
.status { position: absolute; z-index: 4; left: var(--edge); right: var(--edge); bottom: var(--edge); display: flex; justify-content: space-between; gap: 8px; pointer-events: none; }
.status p { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border: 1px solid var(--panel-line); border-radius: 999px; background: var(--bg); font-size: 13px; color: var(--text-2); white-space: nowrap; }
.status b { margin-right: 6px; font: 500 13px var(--mono); color: var(--text); font-variant-numeric: tabular-nums; }
.tools { position: absolute; z-index: 4; left: 50%; bottom: var(--edge); display: flex; align-items: center; gap: 2px; height: 48px; padding: 0 4px; border: 1px solid var(--panel-line); border-radius: 999px; background: var(--bg); box-shadow: 0 20px 40px -24px #000; translate: -50% 0; user-select: none; -webkit-user-select: none; }
.tool { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px 0 11px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--text-2); }
.tool.is-on { background: var(--card-2); color: var(--text); }
.tool em { font-style: normal; }
.tool--icon { padding: 0 9px; }
.tool svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tool .fill { fill: currentColor; stroke: none; }
.tool .red { stroke: var(--string); stroke-width: 2; }
.tools i { width: 1px; height: 20px; margin: 0 6px; background: rgba(255, 255, 255, .16); }
.tools b { min-width: 42px; text-align: center; font: 500 13px var(--mono); color: var(--text); }

/* ---------- diagram tiles: a small piece of the canvas inside a card ---------- */

.fig { position: relative; border-radius: 8px; background: var(--board); overflow: hidden; }
.fig svg, .tie svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.fig line, .tie line { stroke: var(--string); stroke-width: 2; stroke-linecap: round; }
.fig .own { stroke-dasharray: 5 7; }
.fig b { position: absolute; z-index: 1; padding: 10px 14px 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--card); font-size: 14px; line-height: 1.2; font-weight: 600; white-space: nowrap; translate: -50% 0; }
.fig b::before { content: ''; position: absolute; left: 50%; top: 0; width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--board); background: var(--text); translate: -50% -50%; box-sizing: content-box; }
.fig i { position: absolute; z-index: 2; padding: 3px 9px; border-radius: 999px; background: var(--board); color: var(--text-2); font: 500 12px/1.35 var(--sans); white-space: nowrap; translate: -50% -50%; }

/* ---------- what it links: six cards, two across ---------- */

.links, .grow, .faq, .final { padding: 120px var(--pad) 0; }
.head { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: end; }
.head .lede { max-width: 31em; }
.feats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 48px; }
.feat { display: flex; flex-direction: column; padding: 8px; border-radius: 12px; background: var(--card); }
.feat__text { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 20px; padding: 13px 16px 17px; }
h3 { font-size: 22px; line-height: 1.2; letter-spacing: -.025em; font-weight: 700; text-wrap: balance; }
.feat p { font-size: 14px; color: var(--text-2); }
.feat p span { color: var(--text-3); }
.feat .fig { flex: 1 0 188px; }

/* ---------- how it grows: one wide card, three tiles ---------- */

.grow__card { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 8px; padding: 8px; border-radius: 12px; background: var(--card); }
.grow__text { align-self: center; padding: 32px 40px 36px 36px; }
.grow h2 { font-size: clamp(30px, 2.7vw, 38px); }
.grow__text .lede { margin-top: 16px; }
.hops { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.hops li { position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: 24px 20px 20px; border-radius: 8px; background: var(--board); overflow: hidden; }
.hop { position: relative; display: block; width: 100%; height: auto; margin-bottom: 24px; }
.hop path { fill: none; stroke: var(--string); stroke-width: 2; stroke-linecap: round; }
.hop rect { fill: var(--text-2); }
.hop .far { fill: var(--text-3); }
.hop .on { fill: var(--text); }
.hops b { position: relative; margin-top: auto; font-size: 20px; line-height: 1.2; font-weight: 700; letter-spacing: -.02em; }
.hops span { position: relative; font-size: 15px; color: var(--text-2); }

/* ---------- questions: two columns of open cards that break at different heights ---------- */

.faq__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 40px; }
.faq__col { display: flex; flex-direction: column; gap: 12px; }
.qa { display: flex; flex-direction: column; padding: 26px 28px 28px; border-radius: 12px; background: var(--card); }
.qa:last-child { flex: 1; }
.qa p { margin-top: 8px; font-size: 16px; color: var(--text-2); text-wrap: pretty; }
.qa .fig { flex: 1 0 156px; margin: 22px -20px -20px; }

/* ---------- closing card: two cards, one string, the button ---------- */

.final__card { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 8px; border-radius: 12px; background: var(--card); }
.final__text { display: flex; flex-direction: column; justify-content: space-between; gap: 56px; padding: 36px 32px 36px 36px; }
.final h2 { font-size: clamp(50px, 6.6vw, 96px); line-height: .94; letter-spacing: -.045em; }
.final__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.final .req { max-width: 16em; }
.tie { position: relative; min-height: 368px; border-radius: 8px; background: var(--board); overflow: hidden; }

.foot { margin-top: 120px; padding: 24px var(--pad) 44px; border-top: 1px solid var(--line); }
.foot__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 32px; }
.foot .logo { margin-right: 0; }
.foot__links { display: flex; flex-wrap: wrap; gap: 0 28px; font-size: 14px; font-weight: 500; color: var(--text-2); }
.foot__links a { display: inline-flex; align-items: center; min-height: 40px; border-radius: 8px; }
.foot__links a:hover { color: var(--text); }
.foot p { max-width: 70ch; margin-top: 10px; font-size: 13px; color: var(--text-3); }

.js [data-reveal] { opacity: 0; translate: 0 20px; transition: opacity .7s ease-out, translate .8s cubic-bezier(.2, .7, .2, 1); }
.js [data-reveal].is-in { opacity: 1; translate: 0 0; }

/* ---------- narrower than a laptop: the dock comes off the canvas and stacks above it ---------- */

@media (max-width: 1100px) {
  :root { --edge: 12px; }
  .nav { height: 64px; padding: 0 16px; }
  .nav__links { display: none; }
  .board { display: flex; flex-direction: column; min-height: 0; padding: 72px var(--edge) var(--edge); }
  .dock { display: contents; }
  .pitch { position: relative; z-index: 5; padding: 24px 22px 0; }
  .pitch .req { margin: 22px -22px 0; padding: 11px 22px 12px; }
  h1 { font-size: clamp(38px, 10.4vw, 52px); }
  .status { position: relative; inset: auto; order: 1; margin-top: 12px; }
  .pins { position: relative; inset: auto; order: 2; align-self: center; width: 100%; max-width: 560px; height: 760px; margin: 18px 0 0; }
  .tools { position: relative; inset: auto; order: 3; align-self: center; margin-top: 12px; translate: none; }
  .sheet { position: relative; z-index: 5; order: 4; margin-top: 12px; scroll-margin: 80px 0 12px; }
  .card { width: 148px; padding: 15px 11px 11px; }
  .card b { font-size: 14.5px; }
  /* Too tight for every label: a string shows its reason while its card is touched. */
  .tag { display: none; }
  .pins.is-hot .tag.is-hot { display: block; opacity: 1; }

  .links, .grow, .faq, .final { padding-top: 88px; }
  .feat__text { flex-direction: column; align-items: flex-start; padding: 12px 14px 14px; }
  .grow__card { grid-template-columns: minmax(0, 1fr); }
  .grow__text { padding: 22px 22px 20px; }
  .final h2 { font-size: clamp(50px, 9vw, 76px); }
  .final__text { gap: 40px; padding: 28px 24px 28px; }
  .foot { margin-top: 88px; }
}
@media (max-width: 720px) {
  .tool { padding: 0 9px; }
  .tool em { display: none; }
  .head, .feats, .faq__cols, .final__card { grid-template-columns: minmax(0, 1fr); }
  .head .lede { margin-top: 4px; }
  .feats, .faq__cols { margin-top: 32px; }
  .fig b { padding: 9px 12px 8px; font-size: 13px; }
  .fig i { padding: 2px 7px; font-size: 11.5px; }
  .hops { grid-template-columns: minmax(0, 1fr); }
  .hops li { display: grid; grid-template-columns: 132px minmax(0, 1fr); align-content: center; column-gap: 20px; padding: 16px 18px; }
  .hop { grid-row: 1 / 3; margin: 0; }
  .hops b { align-self: end; }
  .qa { padding: 22px 22px 24px; }
  .qa .fig { margin: 20px -14px -16px; }
  .tie { min-height: 300px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal] { opacity: 1; translate: 0 0; transition: none; }
  .strings line, .tag, .pins .card.is-held, .sheet, .nav { transition: none; }
  .board.is-done .sheet { animation: none; }
  .btn { transition: none; }
  .btn:active { transform: none; }
}

/* ---------- every screen size (added 2026-11-13) ---------- */
@media (min-width: 1600px) { :root { --pad: max(24px, calc((100vw - min(1200px + (100vw - 1600px) * 0.98, 1740px)) / 2)); } }
@media (min-width: 1600px) {
  h1 { font-size: clamp(48px, 19.2px + 1.8vw, 60px); }
  h2 { font-size: clamp(48px, 26.4px + 1.35vw, 57.6px); }
  .lede { font-size: clamp(20px, 14px + 0.375vw, 23px); }
}

/* The board fills the window at every height; the 900px cap left a dark band on tall screens. */
@media (min-width: 1101px) { .board { min-height: max(720px, 100vh); min-height: max(720px, 100svh); } }
@media (min-width: 1600px) {
  :root { --edge: clamp(24px, 1.7vw, 40px); }
  .board { --dock: clamp(440px, 25vw, 580px); padding-top: clamp(84px, 4.6vw, 104px); }
  .pitch { padding: clamp(28px, 1.7vw, 36px) clamp(28px, 1.7vw, 36px) 0; }
  .pitch .req { margin-left: calc(-1 * clamp(28px, 1.7vw, 36px)); margin-right: calc(-1 * clamp(28px, 1.7vw, 36px)); }
  .pitch .lede { font-size: clamp(17px, .9vw, 20px); }
  .pins { max-width: 1800px; }
  .card { width: clamp(184px, 10.6vw, 236px); padding: clamp(17px, 1vw, 21px) clamp(14px, .85vw, 18px) clamp(13px, .8vw, 16px); }
  .card span { font-size: clamp(12px, .65vw, 14px); }
  .card b { font-size: clamp(16px, .86vw, 19px); }
  .card em { font-size: clamp(13px, .7vw, 15px); }
  .tag { font-size: clamp(12px, .65vw, 14px); }
}
/* ---------- end every screen size ---------- */