/* The signed-out landing page.
 *
 * Loaded AFTER board.css, and deliberately dependent on it: the board section
 * embedded here is the shipped component, not a second rendering of it. Every
 * token below (--accent, --line, --muted, the --l-* label ramp) comes from that
 * sheet, so a change to the product's colours reaches this page without anyone
 * remembering to make it twice.
 *
 * What this file adds is only what a marketing page needs and a board does not:
 * a wider page frame, a display type ramp, and the section bands. */

.page {
  /* The board fills its viewport; this page has a measure. 1200 keeps the board
     columns near the width they have in the app rather than stretching them into
     something a visitor will not recognise when they sign up. "Near", not "at":
     how many lanes divide this measure is data and grows - see `.frame .board`. */
  --frame: 1200px;
  --gutter: clamp(20px, 5vw, 120px);
}

/* Sections alternate between --surface and the two greys so the page has a
   rhythm without a single gradient or divider graphic. */
.band { padding: 64px var(--gutter) 66px; border-top: 1px solid var(--line); }
.band > .inner { max-width: var(--frame); margin: 0 auto; }
.band-page { background: var(--page); }
.band-bg { background: var(--bg); }
.band-surface { background: var(--surface); }
/* The board band alone runs wider than the page's reading measure. Six lanes in
   1200px leaves each one 178px, which is narrow enough that the column headings
   wrap and the card footers crowd - and a board that looks cramped here is a
   promise about the product that signing up would disappoint. Its heading keeps
   its own measure, so only the board gets the extra width. */
.band-wide { padding-left: clamp(20px, 3vw, 40px); padding-right: clamp(20px, 3vw, 40px); }
.band-wide > .inner { max-width: 1400px; }
.band-ink { background: var(--ink); color: var(--page); border-top: none; }

.eyebrow { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 700; color: var(--muted); }
.sechead { font-size: 1.6rem; line-height: 1.2; letter-spacing: -.02em; margin: 0; font-weight: 700; }
.lede { color: var(--muted); font-size: 1rem; line-height: 1.6; margin: 0; }

/* --- top bar ---------------------------------------------------------------
   The board's own .topbar, widened to this page's gutter and given the product
   nav a board has no room for. */
.landing .topbar { padding-left: var(--gutter); padding-right: var(--gutter); }
.landing .topbar .nav.product { display: flex; gap: 1.4rem; margin-left: 1.6rem; }
.landing .topbar .nav.product a { margin-left: 0; }

/* --- hero ------------------------------------------------------------------ */
.hero { display: grid; grid-template-columns: 1fr 520px; gap: 72px;
  align-items: start; padding: 72px var(--gutter) 64px; max-width: calc(var(--frame) + 2 * var(--gutter));
  margin: 0 auto; }
.hero h1 { font-size: 3.25rem; line-height: 1.06; letter-spacing: -.035em; margin: 0;
  font-weight: 800; text-wrap: balance; }
.hero .lede { font-size: 1.14rem; max-width: 36em; }
.hero .lead { display: flex; flex-direction: column; gap: 22px; }
.hero .fineprint { margin: 2px 0 0; font-size: .88rem; color: var(--faint); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .72rem 1.35rem; border-radius: 9px; font-weight: 700; font-size: 1rem;
  text-decoration: none; border: 1px solid transparent; min-height: 48px; }
.btn-primary { background: var(--accent); color: #fff; box-shadow: var(--shadow); }
.btn-primary:hover { color: #fff; filter: brightness(1.08); }
.btn-quiet { border-color: var(--line); background: var(--surface); color: var(--ink);
  font-weight: 600; padding: .72rem 1.15rem; }
.btn-quiet:hover { border-color: var(--accent); color: var(--accent); }
.btn-row { display: flex; align-items: center; gap: 14px; padding-top: 6px; flex-wrap: wrap; }

/* Who is on the board, named. The avatars are the board's own .av. */
.roster { display: flex; align-items: center; gap: 12px; margin-top: 26px;
  padding-top: 26px; border-top: 1px solid var(--line); }
.roster .avatars .av { border: 2px solid var(--page); }
.roster p { margin: 0; font-size: .88rem; color: var(--muted); }
.roster b { color: var(--ink); font-weight: 600; }

/* The API, shown working rather than described. */
.termcard { border-radius: 12px; overflow: hidden; border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(20,32,27,.10), 0 12px 34px rgba(20,32,27,.12);
  background: var(--ink); }
.termcard .bar { display: flex; align-items: center; gap: .5rem; padding: .6rem .85rem;
  border-bottom: 1px solid rgba(255,255,255,.10); }
.termcard .bar i { width: 9px; height: 9px; border-radius: 50%; background: #3a4b43; }
.termcard .bar span { margin-left: .5rem; font-family: var(--mono); font-size: .72rem; color: var(--faint); }
.termcard pre { margin: 0; padding: 1.1rem 1.15rem 1.25rem; font-family: var(--mono);
  font-size: .78rem; line-height: 1.75; color: #c8d4cd; white-space: pre-wrap; word-break: break-word; }
.termcard .s { color: #a3d9b8; }
.termcard .p { color: var(--faint); }
.termcard .r { color: #fff; }
.termcard .then { display: flex; align-items: center; gap: .5rem; margin: 0;
  padding: .85rem 1.15rem 1.25rem; border-top: 1px solid rgba(255,255,255,.10);
  font-size: .82rem; color: var(--faint); }
.termcard .then i { width: 7px; height: 7px; border-radius: 50%; background: var(--done); flex: none; }

/* --- telemetry -------------------------------------------------------------
   Hairline grid: one background showing through 1px gaps, so there are no
   borders to keep in sync when a tile is added or dropped. */
.telemetry-head { display: flex; align-items: baseline; gap: .6rem; margin-bottom: 22px; flex-wrap: wrap; }
.telemetry-head span:last-child { font-size: .82rem; color: var(--faint); }
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.tile { background: var(--page); padding: 20px 22px 22px; }
.tile .n { font-size: 2.6rem; line-height: 1; font-weight: 800; letter-spacing: -.03em;
  color: var(--ink); font-variant-numeric: tabular-nums; }
.tile .n .unit { font-size: 1.1rem; font-weight: 700; color: var(--faint); }
.tile.delivered .n { color: var(--accent); }
.tile.flight .n { color: var(--prog); }
.tile .k { margin-top: 8px; font-size: .86rem; font-weight: 600; color: var(--ink); }
.tile .sub { margin-top: 2px; font-size: .78rem; color: var(--faint); }

/* --- the embedded board ---------------------------------------------------- */
.boardhead { display: flex; align-items: flex-end; gap: 2rem; margin-bottom: 26px; flex-wrap: wrap; }
.boardhead .lede { margin-top: 10px; }
.boardhead .sechead { margin-top: 10px; }
.boardhead .spacer { flex: 1 1 auto; }

.frame { border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  background: var(--page); box-shadow: 0 1px 2px rgba(20,32,27,.10), 0 10px 30px rgba(20,32,27,.07); }
.frame .chrome { display: flex; align-items: center; gap: .85rem; padding: .75rem 1.1rem;
  background: var(--surface); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.frame .chrome .spacer { flex: 1 1 auto; }
.spacekey { font-family: var(--mono); font-size: .72rem; font-weight: 700; letter-spacing: .04em;
  color: var(--accent); border: 1px solid var(--accent); border-radius: 5px; padding: .1rem .4rem; }
/* board.js writes these three, exactly as it does on /live - which is why they
   keep the ids it looks up rather than getting landing-page names. */
.frame #sprintName { font-size: .95rem; font-weight: 700; letter-spacing: -.01em; margin: 0; }
.frame #sprintGoal { font-size: .86rem; color: var(--muted); }
.frame #sprintDays { font-size: .78rem; color: var(--faint); }
/* The board inside the frame: the app's own grid, with the frame's padding and
   no page-height minimum - it is a section here, not a viewport.
 *
 * The lanes are narrower than the app's 270px so that all of them fit the frame
 * at desktop width. On /live a board wider than the window is right - the work
 * is what the reader came for and they will scroll for it. Here the reader came
 * for the page, and a board whose last two columns are off the edge shows a
 * pipeline that appears to stop at In Review. Below the breakpoint it goes back
 * to scrolling, because a whole pipeline on a phone is not a choice worth making.
 *
 * THE WIDTH COMES FROM HOW MANY LANES THERE ARE, NOT FROM A NUMBER.
 *
 * It was `minmax(200px, 1fr)`, tuned to the six statuses this board had when the
 * rule was written, and it held until a seventh arrived: "Releasing" was seeded in
 * #344 - a change about a custom field - and seven lanes at 200px plus the gaps
 * overflowed the frame by 149px, which is the failure this comment now exists to
 * prevent a second time.
 *
 * The lane count is data. It grows whenever somebody seeds a status, and that
 * somebody has no reason to open this file. So a fixed floor here is a promise
 * that expires silently, and the only warning was a nightly browser test. A zero
 * floor cannot expire: the lanes divide whatever width the frame has, so the whole
 * pipeline stays on screen at any count and narrows gradually instead of running
 * off the edge. */
.frame .board { padding: .85rem 1.1rem 1.2rem; min-height: 0;
  grid-auto-columns: minmax(0, 1fr);
  /* board.css stretches every lane to the height of the tallest one, and says
     why: it makes the whole lane a drop target rather than just the strip its
     cards occupy. Nothing here can be dropped, so what stretch buys this page is
     a 700px column of empty grey beside a lane holding one card. */
  align-items: start; }

/* An empty review section is drawn on /live because it is a drop target as much
   as a heading - Sortable needs somewhere to drop, so board.js emits all five
   whether or not they hold anything. Nothing here can be dragged, so an empty
   one is a row of furniture with no purpose, and five of them stacked under an
   empty column is the loudest thing in the section. The column's own count still
   reads 0, so nothing is being hidden that the header does not say. */
.frame .sec:has(.cards:empty) { display: none; }
.frame .framefoot { display: flex; align-items: center; gap: .6rem; padding: .7rem 1.1rem;
  background: var(--surface); border-top: 1px solid var(--line); font-size: .82rem;
  color: var(--muted); flex-wrap: wrap; }
.frame .framefoot .spacer { flex: 1 1 auto; }
.frame .framefoot svg { flex: none; }
.frame .framefoot a { color: var(--accent); font-weight: 600; text-decoration: none; }

/* --- steps, split, capabilities -------------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 36px; }
.step { background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 26px 26px 28px; display: flex; flex-direction: column; gap: 12px; }
.step .top { display: flex; align-items: center; gap: .65rem; }
.step .glyph { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center;
  background: var(--bg); color: var(--accent); }
.step .no { font-family: var(--mono); font-size: .74rem; font-weight: 700; color: var(--faint); }
.step h3 { margin: 6px 0 0; font-size: 1.06rem; letter-spacing: -.01em; }
.step p { margin: 0; color: var(--muted); font-size: .93rem; line-height: 1.6; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.split > div { padding: 34px 36px 38px; }
.split .team { background: var(--surface); }
.split .fleet { background: var(--page); }
.split h3 { margin: 12px 0 10px; font-size: 1.35rem; letter-spacing: -.02em; }
.split p { margin: 0 0 20px; color: var(--muted); font-size: .95rem; line-height: 1.6; }
.ticks { display: flex; flex-direction: column; gap: 11px; }
.ticks div { display: flex; gap: .6rem; align-items: flex-start; font-size: .93rem; }
.ticks svg { flex: none; margin-top: 3px; }
.routes { display: flex; flex-direction: column; gap: 7px; font-family: var(--mono); font-size: .79rem; }
.routes div { background: var(--surface); border: 1px solid var(--line); border-radius: 7px; padding: .5rem .7rem; }
.routes b { font-weight: 700; }
.routes .get, .routes .post { color: var(--done); }
.routes .hook { color: var(--review); }
.routes span { color: var(--muted); }
.readmore { display: inline-flex; align-items: center; gap: .4rem; margin-top: 20px;
  font-weight: 600; font-size: .92rem; color: var(--accent); text-decoration: none; }

/* --- pricing ---------------------------------------------------------------- */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.plan { background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
  padding: 28px 26px 30px; display: flex; flex-direction: column; gap: 16px; }
.plan.featured { border: 1.5px solid var(--accent);
  box-shadow: 0 1px 2px rgba(20,32,27,.10), 0 8px 24px rgba(20,32,27,.09); }
.plan .tier { font-size: .86rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); }
.plan.featured .tier { color: var(--accent); }
.plan .badge { font-size: .68rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: #fff; background: var(--accent); border-radius: 4px; padding: .1rem .38rem; }
.plan .amount { margin-top: 12px; display: flex; align-items: baseline; gap: .35rem; }
.plan .amount b { font-size: 2.4rem; font-weight: 800; letter-spacing: -.03em; }
.plan .amount span { font-size: .9rem; color: var(--faint); }
.plan .per { font-size: .84rem; color: var(--faint); margin-top: 2px; }
.plan hr { border: none; border-top: 1px solid var(--line-2); margin: 0; }
.plan ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column;
  gap: 9px; font-size: .9rem; }
.plan ul li.extra { color: var(--muted); }
.plan .spacer { flex: 1 1 auto; }
.plan .btn { width: 100%; font-size: .92rem; padding: .6rem 1rem; min-height: 44px; }

/* --- closing + footer ------------------------------------------------------- */
.closing { display: grid; grid-template-columns: 1fr auto; gap: 56px; align-items: center; }
.closing h2 { margin: 0; font-size: 2.3rem; line-height: 1.14; letter-spacing: -.03em;
  font-weight: 800; max-width: 16em; }
.closing p { margin: 14px 0 0; color: #a7b5ad; font-size: 1.02rem; line-height: 1.6; max-width: 34em; }
.closing .actions { display: flex; flex-direction: column; gap: 12px; min-width: 260px; }
.closing .btn-onink { border-color: #3a4b43; color: var(--page); background: transparent; font-weight: 600; }
.closing .btn-onink:hover { border-color: var(--page); color: var(--page); }

.sitefoot { background: var(--ink); border-top: 1px solid #2a382f; color: var(--faint);
  padding: 26px var(--gutter) 34px; display: flex; align-items: center; gap: 1.6rem;
  font-size: .85rem; flex-wrap: wrap; }
.sitefoot .brand { color: #c8d4cd; }
.sitefoot .brand .logo { width: 22px; height: 22px; font-size: 12px; }
.sitefoot .spacer { flex: 1 1 auto; }
.sitefoot a { color: var(--faint); text-decoration: none; }
.sitefoot a:hover { color: var(--page); }

/* --- narrow ----------------------------------------------------------------
   One breakpoint, not three. The board keeps its columns and scrolls sideways -
   .board is already overflow-x:auto, so a phone gets the real board rather than
   a second renderer that would drift from it. */
@media (max-width: 1080px) {
  .hero { grid-template-columns: 1fr; gap: 40px; }
  .hero h1 { font-size: 2.4rem; }
  .split, .steps, .plans { grid-template-columns: 1fr; }
  .split { gap: 1px; }
  .closing { grid-template-columns: 1fr; gap: 28px; }
  .closing .actions { min-width: 0; }
}
@media (max-width: 720px) {
  .band { padding: 40px var(--gutter) 42px; }
  .hero { padding: 34px var(--gutter) 32px; }
  .hero h1 { font-size: 2.05rem; }
  /* Four tiles land as a clean 2x2 on a phone; no tile has to span a row to
     avoid sitting beside a hole. */
  .tiles { grid-template-columns: 1fr 1fr; }
  .btn-row .btn { flex: 1 1 100%; }
  /* The product nav and the live chip both go: what is left is the brand and the
     one action, which fits 390px on one line. The chip is no loss - the board
     section carries its own, beside the thing it is describing. */
  .landing .topbar .nav.product,
  .landing .topbar .livechip { display: none; }
  /* And the plain sign-in link goes with them, which is what the sentence above
     already claimed was left. It was not: the second nav still carried Sign in
     *and* the call to action, and on a runner whose fonts set the two ends of the
     header ~30px wider than this workstation does, the pair no longer fit and the
     call to action dropped onto a row of its own (AGENTS-915). Nothing is lost by
     it - sign-in is on this same first screen in the hero, again in the closing
     section, and again in the footer. */
  .landing .topbar .nav a[href="/login"] { display: none; }
  /* Tightened until the brand and the one action share a line: the header
     wrapping puts the call to action on a row of its own under a band of white,
     which reads as an afterthought on the first screen a visitor sees. */
  .landing .topbar { padding: .6rem 16px; gap: .5rem; }
  /* The base .topbar wraps, which is right for a wide header with a nav in it and
     is exactly how the call to action got its own row here. With two items left
     there is nothing that should ever move to a second line, so it is forbidden
     rather than merely made to fit: if some future font pushes past 390px the
     failure is a tight header, which the page's own no-sideways-scroll assertion
     catches, instead of a silent band of white nobody measured. */
  .landing .topbar { flex-wrap: nowrap; }
  .landing .topbar .nav a { margin-left: .7rem; }
  .landing .topbar .cta { font-size: .82rem; padding: .4rem .6rem; white-space: nowrap; }
  /* Back to scrolling lanes, at a width where a card title still reads. */
  .frame .board { grid-auto-columns: minmax(236px, 1fr); }
  .closing h2 { font-size: 1.6rem; }
}