/* ══════════════════════════════════════════════════════════════════════════
   landing.css — the public landing page.

   NOTHING HERE IS INVENTED. Every colour, the radius, the type family and the
   primary-button treatment are copied verbatim out of the product's own house
   stylesheet, `../tb-shared.css`, which is the source of truth. They are copied
   rather than imported for one reason: this page has to work as a plain file
   with no build step and no dependency outside this folder. If a house token
   changes in tb-shared.css, change it here too — the values below are a copy,
   not a second opinion.

   The button reuses `.tb-viewswitch .on` exactly: accent fill, on-accent ink,
   uppercase, 700 weight, .14em tracking. That is already the product's own
   primary-action look, so the page and the board read as one thing.
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  --tb-ground:#05070a;      /* the ground everything sits on */
  --tb-panel:#0b0f15;       /* chrome surfaces */
  --tb-edge:#1b2430;        /* every border */
  --tb-ink:#e8eef7;         /* body copy — near-white, never dim grey */
  --tb-ink-dim:#8b97a8;     /* small uppercase LABELS only */
  --tb-accent:#f97316;      /* the ONE accent */
  --tb-on-accent:#0a0500;   /* text on the accent */
  --tb-radius:10px;
  --tb-font:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
}

*{box-sizing:border-box}

html{ -webkit-text-size-adjust:100% }

body{
  margin:0;
  background:var(--tb-ground);
  color:var(--tb-ink);
  font:400 18px/1.6 var(--tb-font);
  /* the hero is a dark screenshot; letting it bleed into the same ground is
     the whole reason the page is this colour and not a lighter one */
  -webkit-font-smoothing:antialiased;
}

.wrap{
  max-width:1040px;
  margin:0 auto;
  padding:72px 28px 96px;
}

/* ── the word-mark. Small uppercase label, so it takes the dim ink and
      nothing else does. ─────────────────────────────────────────────────── */
.mark{
  margin:0 0 44px;
  font:700 11px/1 var(--tb-font);
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--tb-ink-dim);
}

/* `max-width` in `ch` was measured wrong and broke this into THREE lines with
   "and 3D." orphaned on the last one — seen in the 1440px screenshot, not
   reasoned about. A px measure plus `text-wrap:balance` gives two even lines;
   browsers without balance still get two lines from the measure alone. */
h1{
  margin:0 0 18px;
  font:700 52px/1.08 var(--tb-font);
  letter-spacing:-.02em;
  max-width:840px;
  text-wrap:balance;
}

.lede{
  margin:0 0 32px;
  font-size:20px;
  line-height:1.55;
  max-width:56ch;
  color:var(--tb-ink);
}

/* ── the button. Copied from `.tb-viewswitch .on` in tb-shared.css. ─────── */
.cta{ margin:0 0 56px }

.btn{
  display:inline-block;
  text-decoration:none;
  font:700 15px/1 var(--tb-font);
  letter-spacing:.14em;
  text-transform:uppercase;
  padding:17px 34px;
  border-radius:var(--tb-radius);
  border:1px solid var(--tb-accent);
  background:var(--tb-accent);
  color:var(--tb-on-accent);
}
.btn:hover{ filter:brightness(1.1) }
.btn:focus-visible{ outline:2px solid var(--tb-ink); outline-offset:3px }

/* ── the picture. One border so the dark screenshot has an edge against the
      equally dark page, and nothing else. ──────────────────────────────── */
.shot{ margin:0 0 64px }

.shot img{
  display:block;
  width:100%;
  height:auto;
  border:1px solid var(--tb-edge);
  border-radius:var(--tb-radius);
  background:var(--tb-panel);
}

.shot figcaption{
  margin-top:12px;
  font:600 11px/1.5 var(--tb-font);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--tb-ink-dim);
}

h2{
  margin:0 0 22px;
  font:700 13px/1 var(--tb-font);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--tb-ink-dim);
  padding-bottom:14px;
  border-bottom:1px solid var(--tb-edge);
}

/* ── what it does. A term-and-line list, not a card grid. Two columns on a
      wide screen, one column on a phone. ───────────────────────────────── */
/* `column-gap` is 0 ON PURPOSE. The row rule is drawn on the two cells
   separately, so a 32px gap between the columns cut every rule into two
   dashes with a hole in the middle — clearly visible in the 1440px
   screenshot and it read as a mistake, not as a design. The space between
   the columns is padding on the description instead, so the two borders
   butt together and make ONE continuous hairline. */
.does{
  margin:0 0 64px;
  display:grid;
  grid-template-columns:minmax(160px,15.5rem) 1fr;
  column-gap:0;
}

/* equal padding top and bottom on both cells, so a one-line row and a
   three-line row keep the same rhythm against the rules */
.does dt{
  font-weight:700;
  padding:18px 0;
}

.does dd{
  margin:0;
  padding:18px 0 18px 32px;
  max-width:calc(62ch + 32px);
}

/* a hairline between rows, and none above the first — the rule is the only
   piece of furniture in this list */
.does dt:not(:first-of-type),
.does dt:not(:first-of-type) + dd{
  border-top:1px solid var(--tb-edge);
}

p{ max-width:62ch }

/* ══════════════════════════════════════════════════════════════════════════
   NARROW. Checked at 390px — the phone the page is most likely to be opened on
   when a link is tapped out of a video description.
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width:760px){
  body{ font-size:17px }
  .wrap{ padding:44px 20px 72px }
  .mark{ margin-bottom:32px }
  h1{ font-size:33px; max-width:none; text-wrap:pretty }
  .lede{ font-size:18px }
  .cta{ margin-bottom:40px }
  .btn{ display:block; text-align:center; padding:18px 20px }
  .shot{ margin-bottom:48px }
  .does{
    display:block;
    margin-bottom:48px;
  }
  .does dt{ padding:20px 0 0 }
  .does dd{ padding:6px 0 20px; max-width:none }
  /* the two-column rule above is meaningless once the list stacks: the rule
     belongs above the TERM, and nowhere else */
  .does dt:not(:first-of-type) + dd,
  .does dd{ border-top:0 }
  .does dt:not(:first-of-type){ border-top:1px solid var(--tb-edge) }
}