/* The landing page's own styles.
 *
 * Sits on base.css, which owns the design tokens (--bg, --fg, --muted, --line,
 * --panel, --soft) and the vendored @font-face rules. Nothing here redeclares
 * either: the fonts are declared once in base.css, and a palette or a font stack
 * living in two files drifts the first time one is edited.
 *
 * Served by nginx from /assets/ — see nginx/snippets/location-assets.conf.
 *
 * The shape is the one the research on developer-tool pages keeps finding: a
 * centred hero, the product itself directly below the claim, then trust, then
 * the model. Visuals carry the argument wherever one can — the run timeline, the
 * capability bars, the job document — because a diagram of the runtime is read
 * faster and believed sooner than a paragraph describing it.
 */

/* --- page frame ----------------------------------------------------------- */

*{box-sizing:border-box}
html{scroll-behavior:smooth}

/* The faint blueprint grid behind everything. `mask-image` fades it out down
   the page so it never competes with content, and it is pure decoration:
   nothing here is meant to be read. */
body:before{content:'';position:fixed;inset:0;pointer-events:none;opacity:.08;background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);background-size:48px 48px;mask-image:linear-gradient(to bottom,#000,transparent 75%)}

a{color:inherit;text-decoration:none}
.wrap{width:min(1180px,calc(100% - 40px));margin:auto}
.mono{font-family:'DM Mono',monospace}
.dim{color:#555}
.key{color:#8d8d8d}

/* --- nav ------------------------------------------------------------------ */

.nav{height:76px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;font-weight:600;letter-spacing:-.03em}
.mark{width:28px;height:28px;object-fit:contain;display:block}
.navlinks{display:flex;gap:28px;color:#9a9a9a;font-size:14px}
.navlinks a:hover{color:#fff}
.navbtn{border:1px solid #444;border-radius:var(--r);padding:9px 15px;font-size:13px}
.navbtn:hover{border-color:#6a6a6a}

/* The signed-in replacement for the sign-in button. landing.js swaps it in once
   /auth/me confirms a session, so the page never asks a signed-in visitor to
   sign in again. Sized to the nav's type rather than the dashboard header's:
   the landing is the looser surface. */
.account{display:inline-flex;align-items:center;gap:9px;border:1px solid #444;border-radius:var(--r);padding:7px 14px 7px 8px;font-size:13px}
.account:hover{border-color:#6a6a6a}
.account .avatar{width:26px;height:26px;border-radius:50%;object-fit:cover;display:block;border:1px solid var(--line)}
.account .avatar-fallback{display:grid;place-items:center;background:var(--soft);color:var(--muted);font:11px 'DM Mono'}
.account-name{max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* --- hero ----------------------------------------------------------------- */

/* Centred, with the claim first and the product directly under it. This is the
   dominant composition across developer-tool landing pages, and it is dominant
   because it matches how the page is read: the headline is understood in one
   pass, the shot is examined only if the headline earned it. */
.hero{padding:104px 0 0;text-align:center}
.pill{display:inline-flex;align-items:center;gap:9px;font-size:11px;color:#9d9d9d;border:1px solid #2f2f2f;background:#0d0d0d;padding:5px 13px;border-radius:999px;margin-bottom:28px;text-transform:uppercase;letter-spacing:.09em}
.pill .dot{width:6px;height:6px;border-radius:50%;background:#7fb98d;box-shadow:0 0 0 3px rgba(127,185,141,.13)}

.hero h1{font-size:clamp(42px,6.4vw,84px);line-height:.93;letter-spacing:-.065em;margin:0 auto 26px;font-weight:600;max-width:16ch}
.hero h1 em{font-style:normal;color:#8d8d8d}

/* Sixteen words, down from thirty. Everything cut became a section's job
   instead of the hero's, and the hero's job is to be read in one glance. */
.lead{font-size:clamp(17px,1.7vw,20px);line-height:1.5;color:#a8a8a8;max-width:52ch;margin:0 auto 32px}

.actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.primary{background:#eee;color:#080808;border-radius:var(--r);padding:14px 22px;font-size:14px;font-weight:600}
.primary:hover{background:#fff}
.secondary{border:1px solid #414141;border-radius:var(--r);padding:13px 22px;color:#bbb;font-size:14px}
.secondary:hover{border-color:#6a6a6a;color:#fff}

/* --- the product shot ----------------------------------------------------- */

/* A frame, not a screenshot: every pixel is markup, so it stays in sync with
   the product, costs a few kilobytes instead of a few hundred, and reflows on a
   phone. It shows the four run states, which *are* dispatch → isolate → execute
   → resume — the same story the ASCII diagram used to tell, told as something
   the product would actually render. */
.shot{border:1px solid #2b2b2b;background:#0c0c0c;border-radius:var(--r-lg);overflow:hidden;text-align:left;box-shadow:0 50px 120px rgba(0,0,0,.75);margin:58px auto 0;max-width:940px}
.shotbar{height:34px;display:flex;align-items:center;gap:7px;padding:0 13px;border-bottom:1px solid #212121;background:#0f0f0f}
.shotbar i{width:7px;height:7px;border-radius:50%;background:#2a2a2a}
.shotbar span{font-size:11px;color:#5c5c5c;margin-left:8px}
.shotbody{padding:20px 20px 18px;display:grid;gap:9px}

.job{display:grid;grid-template-columns:88px 1fr 150px;gap:16px;align-items:center;border:1px solid #1e1e1e;background:#0e0e0e;border-radius:var(--r);padding:11px 14px}
.jid{font-size:11px;color:#7a7a7a}

/* Five segments standing in for the stages of one run. Only the state of the
   run matters, so the segments are colour and nothing else — the label beside
   them is where the words are. */
.stages{display:flex;gap:5px}
.stages i{height:5px;flex:1;border-radius:2px;background:#1c1c1c;display:block}
.stages i.done{background:#3f6a4a}
.stages i.now{background:#eee;animation:pulse 1.6s ease-in-out infinite}
.stages i.fail{background:#7a4436}
@keyframes pulse{50%{opacity:.45}}
/* Honour the OS setting: a decorative loop is exactly what this is for, and a
   full stage bar still reads correctly when it stops moving. */
@media(prefers-reduced-motion:reduce){.stages i.now{animation:none}}

.verdict{font-size:11px;text-align:right;color:#8d8d8d}
.verdict.good{color:#7fb98d}
.verdict.bad{color:#d08a72}

.legend{display:flex;gap:22px;flex-wrap:wrap;padding:14px 20px;border-top:1px solid #1b1b1b;font-size:11px;color:#6a6a6a}
.legend span{display:inline-flex;align-items:center;gap:7px}
.legend i{width:11px;height:5px;border-radius:2px;display:block}
.legend i.done{background:#3f6a4a}
.legend i.now{background:#eee}
.legend i.fail{background:#7a4436}

/* The trust belt. Four claims, each a short phrase over its own evidence —
   the shape the research calls the fastest way to build credibility, and
   honest for a product with no logos to show yet. */
.belt{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;margin-top:64px}
.belt>div{padding:20px 16px;border-right:1px solid var(--line)}
.belt>div:last-child{border-right:0}
.belt b{display:block;font-size:15px;letter-spacing:-.02em;margin-bottom:5px}
.belt span{font-size:11px;color:#666;text-transform:uppercase;letter-spacing:.09em}

/* --- sections ------------------------------------------------------------- */

.section{padding:120px 0}
.sectionhead{display:grid;grid-template-columns:.8fr 1.2fr;gap:80px;margin-bottom:56px}
.kicker{font:11px 'DM Mono';color:#666;text-transform:uppercase;letter-spacing:.15em}
.section h2{font-size:clamp(32px,4vw,48px);line-height:1;letter-spacing:-.055em;margin:0 0 20px;max-width:20ch;font-weight:600}
.section .sectionhead p{color:#929292;line-height:1.7;font-size:17px;margin:0;max-width:62ch}

/* Cards, separated by the page line showing through a 1px gap rather than by
   borders, so a row reads as one surface divided rather than as three objects. */
.grid3,.flow3{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
/* `flow3` continues into `spec` below it, so only its top half is a corner. */
.flow3{border-bottom:0;border-radius:var(--r-lg) var(--r-lg) 0 0}

.card{background:#0b0b0b;padding:30px;min-height:250px;transition:background .25s}
.card:hover{background:#111}
.cardnum{font-size:11px;color:#555;text-transform:uppercase;letter-spacing:.12em}
.card h3{font-size:20px;margin:52px 0 12px;letter-spacing:-.03em;font-weight:600}
.card p{font-size:14px;color:#777;line-height:1.6;margin:0}

.flowcard{background:#0b0b0b;padding:26px 24px}
.flowcard h3{font-size:18px;margin:14px 0 10px;letter-spacing:-.03em;font-weight:600}
.flowcard p{font-size:14px;color:#777;line-height:1.6;margin:0 0 18px}

/* Capability bars: three states of the same five-segment run, one per card, so
   the row reads left to right as a run progressing. Decoration with a job —
   `aria-hidden` because the sentence beside it already says everything. */
.bars{display:flex;gap:4px;height:6px;margin-top:20px}
.bars i{flex:1;border-radius:2px;background:#1e1e1e;display:block}
.bars i.done{background:#3f6a4a}
.bars i.now{background:#eee}

/* --- the job document ----------------------------------------------------- */

/* The section's real argument. Six lines of a contract a reader can judge in
   the time a paragraph about it would take to skim — and the reason this
   section replaces both the ASCII diagram and a wall of prose. */
.spec{display:grid;grid-template-columns:1.25fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-top:0;border-radius:0 0 var(--r-lg) var(--r-lg);overflow:hidden}
.spec>div{background:#0b0b0b;padding:26px 24px}
.spec pre{margin:16px 0 0;font:12.5px/1.75 'DM Mono';color:#c9c9c9;overflow-x:auto}
.speccopy h3{font-size:15px;margin:0 0 8px;letter-spacing:-.02em;font-weight:600}
.speccopy h3:not(:first-child){margin-top:22px}
.speccopy p{font-size:13.5px;color:#8a8a8a;line-height:1.65;margin:0}

/* --- cta and footer ------------------------------------------------------- */

.cta{padding:130px 0;border-top:1px solid var(--line);text-align:center}
.cta h2{font-size:clamp(38px,5.6vw,68px);line-height:.95;letter-spacing:-.06em;margin:0 auto 24px;max-width:760px}
.cta p{color:#777;margin-bottom:32px}
.cta .kicker{display:block;margin-bottom:18px}

.footer{border-top:1px solid var(--line);padding:25px 0;display:flex;justify-content:space-between;color:#555;font:11px 'DM Mono'}

/* --- narrow --------------------------------------------------------------- */

@media(max-width:900px){
  .sectionhead{grid-template-columns:1fr;gap:24px}
  .section{padding:88px 0}
  .spec{grid-template-columns:1fr}
}

@media(max-width:800px){
  .wrap{width:min(100% - 28px,1180px)}
  .navlinks{display:none}
  .hero{padding:72px 0 0}
  .hero h1{font-size:clamp(38px,10vw,54px)}
  .shot{margin-top:40px}
  .job{grid-template-columns:1fr auto;gap:10px 14px}
  /* The run id goes above the bars rather than squeezing them to nothing. */
  .jid{grid-column:1}
  .stages{grid-column:1 / -1;order:3}
  .verdict{grid-column:2;grid-row:1}
  .belt{grid-template-columns:1fr 1fr}
  .belt>div{border-bottom:1px solid var(--line)}
  .belt>div:nth-child(2n){border-right:0}
  .grid3,.flow3{grid-template-columns:1fr}
  .card{min-height:0}
  .card h3{margin-top:26px}
  .footer{flex-direction:column;gap:12px}
}

@media(max-width:520px){
  /* The name beside the avatar is the first thing to go: the picture and the
     link to the dashboard are what a signed-in visitor needs from this slot. */
  .account-name{display:none}
  .account{padding:6px}
}