/* The signed-out page.
 *
 * Its own stylesheet rather than a block inside talent.css, where these rules
 * lived because the landing page *was* the CV reader. It is not any more, and a
 * page's styles filed under the feature it used to be is how a stylesheet stops
 * being findable.
 *
 * The restraint is the argument. What is being sold here is a system that keeps
 * an honest record, and a landing page dressed differently from the instrument it
 * advertises would be telling two stories about one product. So: the same tokens,
 * the same hairlines, the same square corners, the same tabular numerals as every
 * table in the app. Nothing below invents a colour or a size.
 */

body.landing { background: var(--page); color: var(--ink); margin: 0;
               font: 15px/1.55 var(--grot); -webkit-font-smoothing: antialiased; }

/* --- the bar ---------------------------------------------------------------- */

.lbar {
  display: flex; align-items: center; gap: var(--s5);
  padding: 0 var(--s5); height: var(--appbar-h);
  background: var(--surface); border-bottom: 1px solid var(--rule);
}
.lbar-gap { flex: 1; }
.lbar-nav { display: flex; align-items: center; gap: var(--s5); }
.lbar-link { font-size: .85rem; color: var(--muted); text-decoration: none; }
.lbar-link:hover { color: var(--ink); }
/* The one primary action on the page, and it is the same red as Save inside the
   app: a visitor who signs up meets a button that already means "act here". */
.lbar-cta {
  font-size: .85rem; font-weight: 700; padding: .32rem .9rem; text-decoration: none;
  background: var(--red); border: 1px solid var(--red); color: #fff;
}
.lbar-cta:hover { background: var(--red-d); border-color: var(--red-d); }

/* --- shared band furniture -------------------------------------------------- */

.lwrap { max-width: 72rem; margin: 0 auto; }
.band { border-top: 1px solid var(--rule); padding: var(--s7) var(--s6); }
.band.on-surface { background: var(--surface); }
.bandhead { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s7);
            align-items: end; margin-bottom: var(--s6); }
.bandhead h2 { font-size: 1.6rem; line-height: 1.15; letter-spacing: -.022em;
               margin: 0; }
.bandhead .note { font-size: .85rem; color: var(--muted); max-width: 52ch; margin: 0; }
.kicker {
  font-size: .68rem; font-weight: 700; letter-spacing: .11em;
  text-transform: uppercase; color: var(--red); margin: 0 0 var(--s3);
}

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

/* The pulse is the right column rather than a section below the fold, for the
   reason the upload used to be: it is the only thing on this page that works
   before an account exists, so it must not need a scroll. */
.hero {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--s7);
  align-items: start; padding: var(--s8) var(--s6) var(--s7);
  max-width: 72rem; margin: 0 auto;
}
.hero h1 { font-size: clamp(1.9rem, 4.2vw, 2.7rem); line-height: 1.06;
           letter-spacing: -.028em; margin: 0 0 var(--s4); text-wrap: balance; }
.hero .lede { font-size: 1rem; max-width: 46ch; }
.hero .lede-strong { font-size: 1rem; color: var(--ink); max-width: 46ch;
                     margin: var(--s4) 0 0; }
.promises {
  list-style: none; margin: var(--s5) 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--s4);
  font-size: .8rem; color: var(--muted);
}
.promises li::before { content: "✓"; color: var(--ok); margin-right: .35rem; }

/* --- the pulse panel -------------------------------------------------------- */

.pulse { border: 1px solid var(--rule); background: var(--surface); }
.pulse-head {
  display: flex; align-items: baseline; gap: var(--s3);
  padding: var(--s4) 1.1rem var(--s3); border-bottom: 1px solid var(--rule-2);
}
.pulse-head h2 { font-size: 1rem; margin: 0; }
.pulse-live { display: inline-flex; align-items: center; gap: .35rem;
              font-size: .7rem; color: var(--muted); }
.pulse-live::before { content: ""; width: 6px; height: 6px; background: var(--ok);
                      display: block; }
.pulse-when { font-family: var(--mono); font-size: .7rem; color: var(--faint);
              margin-left: auto; }

/* 1px gaps over a rule-coloured ground: four tiles separated by hairlines
   without four borders that double up where they meet. */
.pulse-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
               gap: 1px; background: var(--rule-2); }
.ptile { background: var(--surface); padding: .9rem 1.1rem; }
.ptile .n { display: block; font-size: 1.9rem; font-weight: 700; line-height: 1.1;
            letter-spacing: -.028em; font-variant-numeric: tabular-nums; }
.ptile .n small { font-size: 1.1rem; }
.ptile .l { display: block; font-size: .72rem; color: var(--muted); }
/* A figure the floor withheld. An em dash and a reason, never a 0: a zero here
   would be a claim about the fleet, and a false one. */
.ptile.held .n { color: var(--faint); font-family: var(--mono); font-size: 1.6rem; }
.ptile .why { display: block; font-size: .7rem; color: var(--warn); margin-top: .2rem; }
/* A snapshot the tick has not refreshed. Shown greyed with its age rather than
   hidden: the same number presented as current would be the dishonest option. */
.ptile.stale .n { color: var(--muted); }
.ptile .age { display: block; font-size: .7rem; color: var(--faint); margin-top: .2rem; }

.pulse-chart { padding: 1.1rem 1.1rem var(--s3); }
.charthead { display: flex; align-items: baseline; justify-content: space-between;
             margin-bottom: .6rem; }
.bars { display: flex; align-items: flex-end; gap: 3px; height: 64px; }
.bars span { flex: 1; background: var(--q3); min-height: 1px; }
.pulse-foot { font-size: .72rem; color: var(--faint); padding: var(--s3) 1.1rem 1.1rem;
              border-top: 1px solid var(--rule-2); margin: var(--s2) 0 0; }

.eyebrow { font-size: .64rem; font-weight: 700; letter-spacing: .09em;
           text-transform: uppercase; color: var(--muted); }

/* --- the busiest agents ----------------------------------------------------- */

.fleettable { width: 100%; border-collapse: collapse; }
.fleettable th { font-size: .64rem; text-transform: uppercase; letter-spacing: .09em;
                 color: var(--muted); font-weight: 700; text-align: left;
                 border-bottom: 1px solid var(--rule); padding: 0 .6rem .35rem 0; }
.fleettable td { border-bottom: 1px solid var(--rule-2); padding: .55rem .6rem .55rem 0;
                 font-size: .8rem; vertical-align: middle; }
.fleettable tr:hover td { background: var(--sunk); }
.fleettable .role { font-size: .875rem; font-weight: 700; }
.fleettable .num { text-align: right; font-variant-numeric: tabular-nums; }
.fleettable .engine { color: var(--muted); }

.code {
  font-family: var(--mono); font-size: .76rem; display: inline-block;
  padding: .15rem .4rem; background: var(--sunk); color: var(--ink);
}
.fleettable tr:hover .code { background: var(--surface); }

/* A filled track, so a short bar reads as a share of the leader rather than as a
   stray mark floating in white space. */
.runbar { display: flex; align-items: center; gap: var(--s3); }
.runbar .track { flex: 1; height: 10px; background: var(--rule-2); display: block; }
.runbar .fill { display: block; height: 10px; background: var(--q6); }
.runbar .v { font-family: var(--mono); font-size: .8rem; width: 3.4rem;
             text-align: right; font-variant-numeric: tabular-nums; }

.footnote { font-size: .78rem; color: var(--faint); margin: var(--s4) 0 0; }

/* --- the board grid --------------------------------------------------------- */

.boardgrid { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 8px; }
.boardgrid span { aspect-ratio: 1; }
/* Six steps of one warm hue. Deliberately not the accent and not --scale-lo/mid/hi:
   how much ran on a board carries no judgement, and the app's three-colour scale
   is for quantities that do. */
.q0 { background: var(--q1); } .q1 { background: var(--q2); }
.q2 { background: var(--q3); } .q3 { background: var(--q4); }
.q4 { background: var(--q5); } .q5 { background: var(--q6); }
.held {
  border: 1px dashed var(--rule);
  background: repeating-linear-gradient(45deg, transparent 0 4px, var(--rule-2) 4px 5px);
}

.legend { display: flex; align-items: center; gap: var(--s6); margin-top: var(--s4);
          flex-wrap: wrap; font-size: .72rem; color: var(--muted); }
.legend .ramp { display: flex; gap: 2px; }
.legend .ramp span { width: 22px; height: 12px; }
.legend .swatch { width: 22px; height: 12px; display: block; flex: none; }
.legend .pair { display: flex; align-items: center; gap: var(--s2); }

.statrow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
           gap: 1px; background: var(--rule); border: 1px solid var(--rule);
           margin-top: var(--s6); }
.statrow .ptile .n { font-size: 1.5rem; letter-spacing: -.025em; }

/* --- the systems ------------------------------------------------------------ */

.syscards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); }
.syscard { border: 1px solid var(--rule); padding: 1.1rem; background: var(--surface); }
.syscard svg { display: block; margin-bottom: var(--s4); }
.syscard h3 { font-size: .95rem; margin: 0 0 .2rem; }
.syscard .kind { font-size: .75rem; color: var(--faint); margin: 0 0 var(--s3); }
.syscard p { font-size: .8rem; color: var(--muted); margin: 0; }

.providers { display: grid; grid-template-columns: 1fr 2fr; gap: var(--s7);
             margin-top: var(--s6); padding-top: var(--s5);
             border-top: 1px solid var(--rule-2); }
.pbar { display: flex; align-items: center; gap: var(--s4); }
.pbar .name { width: 6rem; font-size: .8rem; }
.pbar .track { flex: 1; height: 14px; background: var(--rule-2); display: block; }
.pbar .fill { display: block; height: 14px; background: var(--q5); }
.pbar .v { font-family: var(--mono); width: 2.6rem; text-align: right;
           font-size: .78rem; font-variant-numeric: tabular-nums; }

/* --- how it works ----------------------------------------------------------- */

.three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s6); }
.three h3 { font-size: .95rem; margin: 0 0 var(--s2); }
.three p { font-size: .85rem; color: var(--muted); margin: 0; }
/* Numbered because these *are* a sequence - hire, then grant, then keep the
   record. Numbering an unordered set of features would be decoration. */
.three .n {
  display: block; font-family: var(--mono); font-size: .7rem; color: var(--red);
  border-top: 2px solid var(--red); padding-top: var(--s2); margin-bottom: var(--s3);
}

/* --- the close -------------------------------------------------------------- */

.close { text-align: center; padding: var(--s8) var(--s6); }
.close h2 { font-size: 2rem; line-height: 1.12; letter-spacing: -.025em;
            margin: 0 0 var(--s4); }
.close p { font-size: 1rem; color: var(--muted); max-width: 52ch; margin: 0 auto; }
.close .actions { display: flex; justify-content: center; align-items: center;
                  gap: var(--s5); margin-top: var(--s6); }
.close .cta {
  font-size: .95rem; font-weight: 700; padding: .6rem 1.6rem; text-decoration: none;
  background: var(--red); border: 1px solid var(--red); color: #fff;
}
.close .cta:hover { background: var(--red-d); border-color: var(--red-d); }
.close .alt { font-size: .875rem; color: var(--muted); text-decoration: none; }

/* --- the foot --------------------------------------------------------------- */

.lfoot {
  border-top: 1px solid var(--rule); padding: var(--s5) var(--s6);
  display: flex; align-items: baseline; gap: var(--s5);
  font-size: .78rem; color: var(--faint); max-width: 72rem; margin: 0 auto;
}
.lfoot a { color: var(--faint); text-decoration: none; }
.lfoot a:hover { color: var(--ink); }
.lfoot .disclaimer { margin-left: auto; max-width: 60ch; text-align: right; }

/* --- what it looks like before the fetch lands ------------------------------ */

.skeleton { display: block; background: var(--sunk); height: .8rem; }
.skeleton.n { height: 1.3rem; width: 40%; margin-bottom: .35rem; }
.skeleton.l { width: 80%; }

/* --- the state a demo never has and a deployment always does ---------------- */

/* Day one, when fewer than five fleets have run and the floor withholds nearly
   everything. Not an error and not an empty box: the same page with the
   catalogue in place of the counts, because what a visitor can hire is true
   whether or not anybody has hired it yet. */
.tooearly { border: 1px solid var(--rule); background: var(--page); padding: var(--s5); }
.tooearly h3 { font-size: 1.15rem; letter-spacing: -.018em; margin: 0 0 var(--s3); }
.tooearly p { font-size: .82rem; color: var(--muted); margin: 0 0 var(--s4); max-width: 60ch; }
.rolechips { display: flex; flex-wrap: wrap; gap: var(--s2); }
.rolechips span { font-size: .78rem; padding: .2rem .6rem; border: 1px solid var(--rule);
                  background: var(--surface); }

/* --- narrow ------------------------------------------------------------------
 *
 * The same breakpoint the app uses. Everything becomes one column; the grid
 * halves its track count rather than its cell size, so a cell stays a tap target
 * instead of becoming a speck.
 */
@media (max-width: 56rem) {
  .lbar { gap: var(--s3); padding: 0 var(--s4); }
  .lbar-nav .lbar-link:not(.keep) { display: none; }
  .hero { grid-template-columns: 1fr; gap: var(--s6); padding: var(--s6) var(--s4); }
  .band, .close { padding: var(--s6) var(--s4); }
  .bandhead { grid-template-columns: 1fr; gap: var(--s3); align-items: start; }
  .three, .providers { grid-template-columns: 1fr; gap: var(--s5); }
  .syscards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .statrow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .boardgrid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; }
  .lfoot { flex-direction: column; padding: var(--s5) var(--s4); }
  .lfoot .disclaimer { margin-left: 0; text-align: left; }
  .close .actions { flex-direction: column; gap: var(--s3); }
  .close .cta { display: block; width: 100%; }
  /* A table of six columns does not survive 390px, and the answer is not a second
     rendering: one DOM, two layouts. The header row goes, each row becomes a
     block, and every cell that would be ambiguous without its column carries the
     column name from `data-label`. A JS branch here would mean two lists of rows
     to keep in step, and the narrow one is the one nobody looks at again. */
  .fleettable thead { display: none; }
  .fleettable, .fleettable tbody, .fleettable tr, .fleettable td { display: block;
                                                                   width: 100%; }
  .fleettable tr { border-top: 1px solid var(--rule-2); padding: var(--s3) 0; }
  .fleettable td { border: 0; padding: .15rem 0; text-align: left; }
  .fleettable td.num { text-align: left; }
  .fleettable td[data-label]::before {
    content: attr(data-label) " ";
    font-size: .64rem; text-transform: uppercase; letter-spacing: .09em;
    color: var(--muted); font-weight: 700; margin-right: .4rem;
  }
  /* The bar keeps its full width and loses its inline value, which the label
     above now carries. */
  .runbar .v { width: auto; }
}