/* Groundlark
   ---------------------------------------------------------------------------
   Construction software is uniformly hi-vis: orange, yellow, hard hat. Deep pine
   and teal is differentiating in that market while still reading as ground and
   open air, which is what the name is about.

   Dark chrome, bright workspace: the app bar anchors, the content breathes.
   Coral is reserved for deadlines alone, so warm colour always means time.
   --------------------------------------------------------------------------- */

/* Fonts are SELF-HOSTED, not loaded from Google.
   Three reasons, in order of weight:
     1. Privacy. Requesting a font from fonts.gstatic.com sends every visitor's IP to a
        third party. A German court has already fined a site owner over exactly this, and
        it is an easy question to avoid rather than answer.
     2. Speed. No extra DNS lookup, TLS handshake and round trip before text renders.
     3. Reliability. The product does not stop looking like itself if a CDN is blocked by
        a corporate proxy - and this sells into locked-down construction firms.
   104KB total, latin subset only. `font-display: swap` so text is readable immediately
   and reflows once, rather than sitting invisible. */

@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('/static/fonts/plus-jakarta-sans-latin-700-normal.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('/static/fonts/plus-jakarta-sans-latin-800-normal.woff2') format('woff2');
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('/static/fonts/space-grotesk-latin-400-normal.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('/static/fonts/space-grotesk-latin-500-normal.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('/static/fonts/space-grotesk-latin-600-normal.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('/static/fonts/space-grotesk-latin-700-normal.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}


:root {
  --pine:       #0B1A17;
  --pine-soft:  #16302A;
  --pine-line:  #23443C;

  --surface:    #FFFFFF;
  --canvas:     #F2F6F4;
  --sunk:       #E9F0ED;

  --ink:        #0B1A17;
  --ink-soft:   #4B5F58;
  --ink-faint:  #8AA098;

  --line:       #DCE7E2;
  --line-soft:  #EAF1EE;

  --brand:      #00A98F;
  --brand-deep: #00806D;
  --brand-lift: #E3F7F2;

  --flag:       #F2542D;   /* deadlines only */
  --flag-soft:  #FEEDE7;
  --amber:      #E8A317;
  --amber-soft: #FDF3DF;

  --r-lg: 14px;
  --r-md: 10px;
  --r-sm: 7px;
  --r-pill: 999px;

  --lift:    0 1px 2px rgba(11,26,23,.05), 0 8px 24px -12px rgba(11,26,23,.16);
  --lift-hi: 0 2px 4px rgba(11,26,23,.06), 0 16px 40px -16px rgba(11,26,23,.24);

  --font: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  /* The wordmark has its own face. Tracking is deliberately looser than the interface:
     at wordmark size the default fit is too tight and the letters knot together. */
  --font-wordmark: 'Plus Jakarta Sans', 'Space Grotesk', system-ui, sans-serif;
  --track-wordmark: -0.021em;

  --gut: 1.75rem;
  --rail: 15.5rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font);
  font-size: 0.9375rem;
  line-height: 1.5;
  font-variant-numeric: tabular-nums lining-nums;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
button, select, input { font-family: inherit; font-size: inherit; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 3px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ------------------------------------------------------------------ app bar */

.masthead {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  padding: 0 var(--gut);
  height: 3.5rem;
  background: var(--pine);
  color: #EAF3F0;
  position: sticky;
  top: 0;
  z-index: 30;
}

.wordmark {
  display: flex; align-items: center; gap: 4px;
  font-family: var(--font-wordmark);
  font-weight: 700; font-size: 1.0625rem;
  letter-spacing: var(--track-wordmark);
  text-decoration: none; color: #fff; white-space: nowrap;
}
.wordmark .mark {
  width: 1.4rem; height: 1.4rem;
  flex: none;
  /* The stroke inherits from the wordmark, so one mark serves every background. */
  color: var(--brand);
  /* Optically aligned to the x-height rather than the cap-height: the ascent reads as
     sitting too high otherwise. */
  transform: translateY(1px);
}

.nav { display: flex; gap: 0.2rem; flex: 1; }
.nav a {
  text-decoration: none; color: #9DB8B0;
  padding: 0.35rem 0.75rem; border-radius: var(--r-sm);
  font-weight: 500; transition: background .15s, color .15s;
}
.nav a:hover { color: #fff; background: var(--pine-soft); }
.nav a[aria-current="page"] { color: #fff; background: var(--pine-soft); }

.masthead .who { display: flex; align-items: center; gap: 0.6rem; color: #9DB8B0; font-size: 0.875rem; white-space: nowrap; }
.masthead .avatar {
  width: 1.8rem; height: 1.8rem; border-radius: var(--r-pill);
  background: var(--pine-soft); border: 1px solid var(--pine-line);
  display: grid; place-items: center; color: #fff; font-weight: 600; font-size: 0.75rem;
}

/* -------------------------------------------------------------------- shell */

.shell { display: grid; grid-template-columns: var(--rail) 1fr; align-items: start; }
.rail { padding: 1.5rem 0 3rem var(--gut); position: sticky; top: 3.5rem; }
.rail h2 { font-size: 0.75rem; font-weight: 600; color: var(--ink-faint); margin: 0 0 0.55rem; }
.rail h2:not(:first-child) { margin-top: 1.75rem; }

.views { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.views a {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  padding: 0.45rem 0.7rem; border-radius: var(--r-md);
  text-decoration: none; color: var(--ink-soft); font-weight: 500;
  transition: background .15s, color .15s;
}
.views a:hover { background: var(--sunk); color: var(--ink); }
.views a[aria-current="page"] { background: var(--brand-lift); color: var(--brand-deep); }
.views .count {
  font-size: 0.8125rem; color: var(--ink-faint);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-pill); min-width: 1.55rem; text-align: center; padding: 0 0.35rem;
}
.views a[aria-current="page"] .count { border-color: transparent; color: var(--brand-deep); background: #fff; }

.main { padding: 1.5rem var(--gut) 4rem; max-width: 74rem; }

/* ---------------------------------------------------------------- page head */

.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; }
.page-head h1 { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.035em; margin: 0 0 0.15rem; }
.page-head .sub { color: var(--ink-soft); margin: 0; }
.live {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-size: 0.8125rem; color: var(--ink-soft);
  background: var(--surface); border: 1px solid var(--line);
  padding: 0.35rem 0.75rem; border-radius: var(--r-pill); white-space: nowrap;
}
.live .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--brand); flex: none; }

/* ------------------------------------------------------------------- stats */

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; margin-bottom: 1.5rem; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 0.9rem 1.05rem; }
.stat .n { font-size: 1.625rem; font-weight: 700; letter-spacing: -0.04em; line-height: 1.15; }
.stat .k { font-size: 0.8125rem; color: var(--ink-soft); }
.stat--flag .n { color: var(--flag); }
.stat--brand .n { color: var(--brand-deep); }

/* -------------------------------------------------------------------- rows */

.rows { display: grid; gap: 0.6rem; }

.row {
  display: grid; grid-template-columns: auto 1fr auto;
  gap: 1.1rem; align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1rem 1.15rem;
  transition: box-shadow .18s ease, transform .18s ease;
}
.row:hover { box-shadow: var(--lift-hi); transform: translateY(-1px); }

/* The score as an object, not a number in a column. The ring carries the value
   so it is readable before the digits are. */
.score {
  --pct: 0;
  width: 3.4rem; height: 3.4rem; flex: none;
  border-radius: var(--r-pill);
  display: grid; place-items: center;
  background: conic-gradient(var(--ring) calc(var(--pct) * 1%), var(--line-soft) 0);
}
.score span {
  width: 2.75rem; height: 2.75rem;
  border-radius: var(--r-pill);
  background: var(--surface);
  display: grid; place-items: center;
  font-weight: 700; font-size: 1.0625rem; letter-spacing: -0.03em;
}
.score--high { --ring: var(--brand); }
.score--high span { color: var(--brand-deep); }
.score--mid  { --ring: var(--amber); }
.score--mid span { color: #8A6410; }
.score--low  { --ring: var(--line); }
.score--low span { color: var(--ink-faint); }

.row .title { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 0.3rem; text-decoration: none; display: block; }
.row .title:hover { color: var(--brand-deep); }

.facts { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.7rem; color: var(--ink-soft); font-size: 0.875rem; }
.facts .buyer { color: var(--ink); font-weight: 500; }
.facts .sep { width: 3px; height: 3px; border-radius: 50%; background: var(--line); flex: none; }

.row .right { text-align: right; white-space: nowrap; display: grid; gap: 0.35rem; justify-items: end; }
.row .value { font-size: 1.125rem; font-weight: 700; letter-spacing: -0.03em; }
.row .value--unstated { font-size: 0.9375rem; font-weight: 500; color: var(--ink-faint); letter-spacing: 0; }

/* ------------------------------------------------------------------- chips */

.chip {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.8125rem; font-weight: 500;
  padding: 0.2rem 0.6rem; border-radius: var(--r-pill);
  background: var(--sunk); color: var(--ink-soft); white-space: nowrap;
}
.chip--soon { background: var(--flag-soft); color: var(--flag); font-weight: 600; }
.chip--predicted { background: var(--amber-soft); color: #8A6410; }
.chip--stage { background: var(--brand-lift); color: var(--brand-deep); }

/* ------------------------------------------------------------------ detail */

.detail-grid { display: grid; grid-template-columns: 1fr 19rem; gap: 1.25rem; align-items: start; }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.35rem 1.5rem; }
.card + .card { margin-top: 1rem; }
.card h2 { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 0.9rem; }
.card h3 { font-size: 0.9375rem; font-weight: 600; margin: 0 0 0.9rem; }

.spec { display: grid; grid-template-columns: 8.5rem 1fr; gap: 0.7rem 1rem; margin: 0; }
.spec dt { color: var(--ink-faint); font-size: 0.875rem; }
.spec dd { margin: 0; font-weight: 500; }
.spec dd.unstated { color: var(--ink-faint); font-weight: 400; }

.prose { color: var(--ink-soft); max-width: 62ch; margin: 0; }

.bar { display: grid; grid-template-columns: 6.75rem 1fr 1.75rem; gap: 0.6rem; align-items: center; margin-bottom: 0.5rem; font-size: 0.875rem; }
.bar .k { color: var(--ink-soft); }
.bar .track { display: block; height: 0.4rem; border-radius: var(--r-pill); background: var(--sunk); overflow: hidden; }
.bar .fill { display: block; height: 100%; border-radius: var(--r-pill); background: var(--brand); }
.bar .n { text-align: right; font-weight: 600; }

.score-hero { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 1.1rem; }
.score-hero .big { font-size: 2.5rem; font-weight: 700; letter-spacing: -0.05em; line-height: 1; color: var(--brand-deep); }
.score-hero .of { color: var(--ink-faint); font-size: 0.875rem; }

/* ----------------------------------------------------------------- buttons */

.btn {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-weight: 500; padding: 0.55rem 1rem;
  border-radius: var(--r-md); border: 1px solid var(--line);
  background: var(--surface); color: var(--ink);
  cursor: pointer; text-decoration: none;
  transition: background .15s, border-color .15s;
}
.btn:hover { background: var(--sunk); }
.btn--go { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: var(--lift); }
.btn--go:hover { background: var(--brand-deep); border-color: var(--brand-deep); }
.btn-row { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 1.25rem; }

.field { margin-bottom: 0.9rem; }
.field label { display: block; font-size: 0.8125rem; color: var(--ink-faint); margin-bottom: 0.3rem; }
.field select, .field input {
  width: 100%; padding: 0.5rem 0.6rem;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); color: var(--ink);
}
.field select:hover { border-color: var(--ink-faint); }

/* ------------------------------------------------------------------- board */

.board { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 0.75rem; }
.col { background: var(--sunk); border-radius: var(--r-lg); padding: 0.75rem; min-height: 16rem; }
.col h3 { display: flex; justify-content: space-between; align-items: center; font-size: 0.875rem; font-weight: 600; margin: 0 0 0.7rem; padding: 0 0.25rem; }
.col h3 .count { color: var(--ink-faint); font-weight: 500; }
.stub {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 0.7rem 0.8rem; margin-bottom: 0.5rem;
  transition: box-shadow .15s, transform .15s;
}
.stub:hover { box-shadow: var(--lift); transform: translateY(-1px); }
.stub a { text-decoration: none; font-weight: 600; font-size: 0.9375rem; letter-spacing: -0.015em; display: block; margin-bottom: 0.3rem; }
.stub a:hover { color: var(--brand-deep); }
.stub .facts { font-size: 0.8125rem; }
.col .none { color: var(--ink-faint); font-size: 0.8125rem; padding: 0.25rem; }

/* ------------------------------------------------------------------ notice */

.banner {
  display: flex; gap: 0.75rem; align-items: flex-start;
  background: var(--amber-soft); border: 1px solid #F3DFB0;
  border-radius: var(--r-lg); padding: 0.9rem 1.1rem;
  margin-bottom: 1.25rem; color: #6E4F0C;
}
.banner b { font-weight: 600; }

.empty { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 3rem 2rem; text-align: center; }
.empty h2 { font-size: 1.25rem; letter-spacing: -0.02em; margin: 0 0 0.4rem; }
.empty p { color: var(--ink-soft); margin: 0 auto 1.25rem; max-width: 38ch; }

.footnote { margin-top: 2rem; color: var(--ink-faint); font-size: 0.8125rem; max-width: 64ch; }

/* -------------------------------------------------------------- responsive */

@media (max-width: 64rem) {
  .shell { grid-template-columns: 1fr; }
  .rail { position: static; padding: 1.25rem var(--gut) 0; }
  .views { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; }
  .detail-grid { grid-template-columns: 1fr; }
  .board { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 46rem) {
  :root { --gut: 1.1rem; }
  .row { grid-template-columns: auto 1fr; row-gap: 0.75rem; }
  .row .right { grid-column: 2; justify-items: start; text-align: left; }
  .board { grid-template-columns: 1fr; }
  .page-head { flex-direction: column; }
}

/* ------------------------------------------------------------------- auth
   A single centred column on the pine canvas. No app chrome: someone who is not
   signed in has no navigation to use, and showing it invites a dead click. */

.auth-page { min-height: 100vh; background: var(--pine); display: grid; place-items: center; padding: 2rem 1.1rem; }
.auth { width: 100%; max-width: 26rem; }

.auth .brand {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  margin-bottom: 1.5rem; color: #fff;
  font-family: var(--font-wordmark); font-weight: 700; font-size: 1.25rem;
  letter-spacing: var(--track-wordmark); text-decoration: none;
}
.auth .brand .mark { width: 1.7rem; height: 1.7rem; flex: none; color: var(--brand); }

.auth .panel { background: var(--surface); border-radius: var(--r-lg); padding: 1.9rem; box-shadow: var(--lift-hi); }
.auth h1 { font-size: 1.375rem; font-weight: 700; letter-spacing: -0.03em; margin: 0 0 0.4rem; }
.auth .lede { color: var(--ink-soft); margin: 0 0 1.4rem; }

.auth .field input[type="email"], .auth .field input[type="text"] { padding: 0.7rem 0.75rem; font-size: 1rem; }
.auth .btn { width: 100%; justify-content: center; padding: 0.75rem 1rem; font-size: 1rem; }

/* The code is read off a phone and typed on a desktop, so it is set large and
   widely tracked to be transcribed without error. */
.auth input.code {
  font-size: 1.75rem; font-weight: 600; letter-spacing: 0.35em;
  text-align: center; padding: 0.7rem 0.4rem 0.7rem 0.75rem;
}

.auth .alt { margin: 1.4rem 0 0; padding-top: 1.2rem; border-top: 1px solid var(--line-soft); color: var(--ink-soft); font-size: 0.875rem; text-align: center; }
.auth .alt a { color: var(--brand-deep); font-weight: 500; }

.auth .note { margin-top: 1.25rem; color: #7E9A92; font-size: 0.8125rem; text-align: center; line-height: 1.6; }
.auth .note a { color: #9DB8B0; }

.auth .sent {
  display: grid; place-items: center; width: 3rem; height: 3rem;
  border-radius: var(--r-pill); background: var(--brand-lift);
  margin: 0 auto 1rem;
}

.alert {
  display: flex; gap: 0.6rem; align-items: flex-start;
  background: var(--flag-soft); border: 1px solid #F8D3C6;
  color: #9B3418; border-radius: var(--r-md);
  padding: 0.75rem 0.9rem; margin-bottom: 1.2rem; font-size: 0.9375rem;
}

/* ----------------------------------------------------------------- public
   Unauthenticated pages. They carry a different header - someone not signed in
   has no app navigation to use, and showing it invites a dead click. */

.pub-head {
  display: flex; align-items: center; gap: 1.5rem;
  padding: 0 var(--gut); height: 3.75rem;
  background: var(--surface); border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 30;
}
.pub-head .wordmark { color: var(--ink); }
.pub-head .wordmark .mark { color: var(--brand-deep); }
.pub-head .spacer { flex: 1; }
.pub-head .links { display: flex; align-items: center; gap: 1.25rem; }
.pub-head .links a { color: var(--ink-soft); text-decoration: none; font-weight: 500; }
.pub-head .links a:hover { color: var(--ink); }

.pub { max-width: 58rem; margin: 0 auto; padding: 2.5rem var(--gut) 5rem; }
.pub-narrow { max-width: 44rem; }

/* Hero: the tool itself, not a headline about the tool. The most persuasive thing
   on the page is the reader's own contract. */
.hero { text-align: center; padding: 3rem 0 2.5rem; }
.hero h1 { font-size: clamp(2rem, 5vw, 2.9rem); font-weight: 700; letter-spacing: -0.04em; line-height: 1.1; margin: 0 0 0.75rem; }
.hero p { font-size: 1.125rem; color: var(--ink-soft); max-width: 34rem; margin: 0 auto 2rem; }

.checker { display: flex; gap: 0.6rem; max-width: 32rem; margin: 0 auto; }
.checker input {
  flex: 1; padding: 0.85rem 1rem; font-size: 1.0625rem;
  border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface);
}
.checker input:focus { border-color: var(--brand); }
.checker .btn { padding: 0.85rem 1.4rem; font-size: 1.0625rem; white-space: nowrap; }
.checker-note { color: var(--ink-faint); font-size: 0.875rem; margin: 0.9rem 0 0; }

/* The answer. Deliberately the loudest thing on the page. */
.finding {
  background: var(--surface); border: 1px solid var(--line);
  border-left: 4px solid var(--flag);
  border-radius: var(--r-lg); padding: 1.5rem 1.75rem; margin-bottom: 1rem;
}
.finding .who { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.03em; margin: 0 0 0.35rem; }
.finding .what { font-size: 1.0625rem; color: var(--flag); font-weight: 600; margin: 0 0 1rem; }
.finding .none { color: var(--ink-soft); font-weight: 400; }

.contracts { display: grid; gap: 0.5rem; margin-top: 1rem; }
.contract {
  display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: center;
  padding: 0.85rem 1rem; background: var(--canvas); border-radius: var(--r-md);
}
.contract .t { font-weight: 500; }
.contract .m { color: var(--ink-soft); font-size: 0.875rem; margin-top: 0.15rem; }
.contract .r { text-align: right; white-space: nowrap; }
.contract .v { font-weight: 700; }

.countdown { display: inline-block; font-size: 0.8125rem; font-weight: 600; padding: 0.2rem 0.6rem; border-radius: var(--r-pill); background: var(--flag-soft); color: var(--flag); }
.countdown--far { background: var(--sunk); color: var(--ink-soft); font-weight: 500; }

.convert {
  background: var(--pine); color: #fff; border-radius: var(--r-lg);
  padding: 2rem; text-align: center; margin-top: 1.75rem;
}
.convert h2 { font-size: 1.375rem; font-weight: 700; letter-spacing: -0.03em; margin: 0 0 0.5rem; }
.convert p { color: #9DB8B0; margin: 0 auto 1.4rem; max-width: 30rem; }

.profile-head { border-bottom: 1px solid var(--line); padding-bottom: 1.5rem; margin-bottom: 1.75rem; }
.profile-head h1 { font-size: 2rem; font-weight: 700; letter-spacing: -0.04em; margin: 0 0 0.5rem; }
.profile-head .summary { color: var(--ink-soft); font-size: 1.0625rem; margin: 0; }

.figures { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; margin-bottom: 1.75rem; }

.tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.75rem; }

@media (max-width: 46rem) {
  .checker { flex-direction: column; }
  .figures { grid-template-columns: 1fr; }
  .contract { grid-template-columns: 1fr; }
  .contract .r { text-align: left; }
}

/* -------------------------------------------------------------- onboarding */

.setup { max-width: 40rem; margin: 0 auto; padding: 2.5rem var(--gut) 5rem; }

.progress { display: flex; gap: 0.35rem; margin-bottom: 2rem; }
.progress span { flex: 1; height: 3px; border-radius: var(--r-pill); background: var(--line); }
.progress span.done { background: var(--brand); }
.progress span.now { background: var(--brand); opacity: 0.45; }

.setup h1 { font-size: 1.875rem; font-weight: 700; letter-spacing: -0.035em; margin: 0 0 0.5rem; }
.setup .lede { color: var(--ink-soft); font-size: 1.0625rem; margin: 0 0 1.75rem; }

/* Free text first: one sentence answers four questions, and making someone tap
   through screens to say what they just typed is how you lose them. */
.quick { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.25rem; margin-bottom: 1.5rem; }
.quick label { display: block; font-weight: 600; margin-bottom: 0.5rem; }
.quick textarea {
  width: 100%; min-height: 5rem; resize: vertical;
  padding: 0.7rem 0.8rem; font-family: inherit; font-size: 1rem;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--canvas); color: var(--ink); line-height: 1.5;
}
.quick textarea:focus { border-color: var(--brand); background: var(--surface); }
.quick .eg { color: var(--ink-faint); font-size: 0.875rem; margin: 0.6rem 0 0.9rem; }

.or { display: flex; align-items: center; gap: 0.9rem; color: var(--ink-faint); font-size: 0.875rem; margin: 1.5rem 0; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* Selectable tiles. Checkboxes so the form works without JavaScript. */
.picks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
.pick input { position: absolute; opacity: 0; pointer-events: none; }
.pick span {
  display: flex; align-items: center; gap: 0.55rem;
  padding: 0.8rem 0.9rem; border: 1px solid var(--line);
  border-radius: var(--r-md); background: var(--surface);
  cursor: pointer; font-weight: 500; transition: border-color .15s, background .15s;
}
.pick span::before {
  content: ""; width: 1.05rem; height: 1.05rem; border-radius: 5px; flex: none;
  border: 1.5px solid var(--line); background: var(--surface);
}
.pick span:hover { border-color: var(--ink-faint); }
.pick input:checked + span { border-color: var(--brand); background: var(--brand-lift); }
.pick input:checked + span::before {
  background: var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.5l3 3 6-7' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/78% no-repeat;
  border-color: var(--brand);
}
.pick input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }

.picks--tight { grid-template-columns: repeat(3, 1fr); }
.picks--tight span { justify-content: center; }
.picks--tight span::before { display: none; }

.setup-actions { display: flex; gap: 0.6rem; align-items: center; margin-top: 1.75rem; }
.setup-actions .skip { color: var(--ink-faint); text-decoration: none; font-size: 0.9375rem; }
.setup-actions .skip:hover { color: var(--ink-soft); text-decoration: underline; }

.readback {
  background: var(--brand-lift); border: 1px solid #BFEDE3;
  border-radius: var(--r-lg); padding: 1.1rem 1.25rem; margin-bottom: 1.5rem;
}
.readback .k { font-size: 0.8125rem; color: var(--brand-deep); font-weight: 600; margin-bottom: 0.3rem; }
.readback .v { font-size: 1.0625rem; font-weight: 500; }

.volume { color: var(--ink-soft); font-size: 0.9375rem; margin-top: 1rem; }

.settings-grid { display: grid; gap: 1rem; }
.setting-row { display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: center; padding: 0.9rem 0; border-bottom: 1px solid var(--line-soft); }
.setting-row:last-child { border-bottom: 0; }
.setting-row .k { font-weight: 500; }
.setting-row .d { color: var(--ink-soft); font-size: 0.875rem; margin-top: 0.15rem; }
.setting-row select { min-width: 11rem; padding: 0.45rem 0.55rem; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }

@media (max-width: 40rem) {
  .picks, .picks--tight { grid-template-columns: 1fr 1fr; }
  .setting-row { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------- home
   The hero is the tool itself, not a headline about the tool. The most
   persuasive thing on this page is a true fact about the reader's own
   contract, so the checker sits above the fold and everything else is
   supporting material. */

.home-hero {
  background: var(--pine);
  color: #fff;
  padding: 4.5rem var(--gut) 4rem;
}
.home-hero .inner { max-width: 46rem; margin: 0 auto; text-align: center; }
.home-hero h1 {
  font-size: clamp(2.1rem, 5.5vw, 3.3rem);
  font-weight: 700; letter-spacing: -0.04em; line-height: 1.08;
  margin: 0 0 0.9rem;
}
.home-hero .lede { font-size: 1.1875rem; color: #A8C4BB; margin: 0 auto 2.25rem; max-width: 34rem; }
.home-hero .checker input { border-color: transparent; }
.home-hero .checker-note { color: #7E9A92; }

.strip {
  background: var(--surface); border-bottom: 1px solid var(--line);
  padding: 0.9rem var(--gut);
}
.strip .inner {
  max-width: 58rem; margin: 0 auto;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem 2rem;
  color: var(--ink-soft); font-size: 0.9375rem;
}
.strip b { color: var(--ink); font-weight: 600; }

.band { padding: 4rem var(--gut); }
.band--sunk { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.band .inner { max-width: 58rem; margin: 0 auto; }
.band h2 { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.035em; margin: 0 0 0.6rem; }
.band .sub { color: var(--ink-soft); font-size: 1.0625rem; margin: 0 0 2rem; max-width: 40rem; }

.three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.three h3 { font-size: 1.0625rem; font-weight: 600; margin: 0 0 0.4rem; }
.three p { color: var(--ink-soft); margin: 0; }
.three .n {
  width: 2.1rem; height: 2.1rem; border-radius: var(--r-md);
  background: var(--brand-lift); color: var(--brand-deep);
  display: grid; place-items: center; font-weight: 700; margin-bottom: 0.8rem;
}

/* A real alert, rendered exactly as the product renders it. Showing the output is
   more convincing than describing it, and it keeps the marketing honest. */
.demo { max-width: 40rem; }
.demo .caption { color: var(--ink-faint); font-size: 0.875rem; margin: 0.9rem 0 0; }

.price {
  display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: center;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 2rem;
}
.price .amount { font-size: 2.75rem; font-weight: 700; letter-spacing: -0.045em; line-height: 1; }
.price .per { color: var(--ink-soft); }
.price ul { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; gap: 0.45rem; }
.price li { display: flex; gap: 0.55rem; color: var(--ink-soft); }
.price li::before { content: "✓"; color: var(--brand); font-weight: 700; }

.founding {
  background: var(--amber-soft); border: 1px solid #F3DFB0; color: #6E4F0C;
  border-radius: var(--r-md); padding: 0.7rem 0.95rem; margin-top: 1.25rem;
  font-size: 0.9375rem;
}

.coverage { display: grid; gap: 0.6rem; }
.coverage .item { display: grid; grid-template-columns: auto 1fr; gap: 0.75rem; align-items: start; padding: 0.85rem 0; border-bottom: 1px solid var(--line-soft); }
.coverage .item:last-child { border-bottom: 0; }
.coverage .tick { color: var(--brand); font-weight: 700; }
.coverage .warn { color: var(--amber); font-weight: 700; }
.coverage .k { font-weight: 500; }
.coverage .d { color: var(--ink-soft); font-size: 0.9375rem; margin-top: 0.15rem; }

@media (max-width: 52rem) {
  .three { grid-template-columns: 1fr; }
  .price { grid-template-columns: 1fr; }
}


/* ------------------------------------------------------------------- mark
   A filled silhouette, so it takes colour from the surrounding text and one
   definition serves pine, paper, single colour and reversed. */
.mark { display: block; width: 100%; height: 100%; }

/* ----------------------------------------------------------------- billing */

.plan {
  display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: start;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 1.75rem;
}
.plan .amount { font-size: 2.25rem; font-weight: 700; letter-spacing: -0.045em; line-height: 1; }
.plan .per { color: var(--ink-soft); }
.plan .status { display: inline-flex; align-items: center; gap: 0.4rem; margin-bottom: 0.9rem; }

.pill {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.8125rem; font-weight: 600; padding: 0.25rem 0.7rem;
  border-radius: var(--r-pill);
}
.pill--ok { background: var(--brand-lift); color: var(--brand-deep); }
.pill--warn { background: var(--amber-soft); color: #8A6410; }

.card-on-file {
  display: flex; align-items: center; gap: 0.6rem;
  color: var(--ink-soft); font-size: 0.9375rem; margin-top: 0.9rem;
}
.card-on-file .brand-tag {
  font-weight: 600; color: var(--ink); text-transform: uppercase;
  font-size: 0.75rem; letter-spacing: 0.02em;
  background: var(--sunk); padding: 0.15rem 0.45rem; border-radius: var(--r-sm);
}

.includes { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; gap: 0.4rem; }
.includes li { display: flex; gap: 0.55rem; color: var(--ink-soft); }
.includes li::before { content: "✓"; color: var(--brand); font-weight: 700; }

.seats { display: grid; gap: 0.5rem; margin-top: 0.5rem; }
.seat {
  display: grid; grid-template-columns: auto 1fr auto; gap: 0.85rem; align-items: center;
  padding: 0.75rem 0; border-bottom: 1px solid var(--line-soft);
}
.seat:last-child { border-bottom: 0; }
.seat .who { font-weight: 500; }
.seat .role { color: var(--ink-faint); font-size: 0.875rem; }
.seat .avatar {
  width: 2rem; height: 2rem; border-radius: var(--r-pill); flex: none;
  background: var(--sunk); color: var(--ink-soft);
  display: grid; place-items: center; font-weight: 600; font-size: 0.75rem;
}
.seat--empty .avatar { background: transparent; border: 1px dashed var(--line); }
.seat--empty .who { color: var(--ink-faint); font-weight: 400; }

.danger {
  margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line-soft);
  color: var(--ink-faint); font-size: 0.875rem;
}
.danger a { color: var(--ink-soft); }

/* ------------------------------------------------------------- control room */
/* The operator surface uses the same tokens as the product. Two additions only: a plain
   data table, and an amber chip for the middling states (DELAYED, PARTIAL, DRAFT) that sit
   between healthy and failed. Coral stays reserved for deadlines and failures. */

.table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.table th { text-align: left; font-weight: 600; color: var(--ink-faint); font-size: 0.75rem;
            padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--line); }
.table td { padding: 0.55rem 0.6rem; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.table tr:last-child td { border-bottom: 0; }
.table code { font-size: 0.8125rem; color: var(--ink-soft); }

.chip--amber { background: var(--amber-soft); color: #8A5F00; font-weight: 600; }

.masthead .nav a.on { background: var(--pine-line); color: #fff; }

/* ------------------------------------------------------- hero: real contracts */
/* The previous hero was a headline, a paragraph and a search box — a visitor got nothing
   concrete until they scrolled, so the strongest thing the product has sat below the fold.
   This puts a genuine expiring contract beside the pitch. */

.hero-split {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 3.5rem;
  align-items: center;
}

.hero-pitch .eyebrow {
  font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.01em;
  color: var(--brand); margin: 0 0 0.9rem;
}

.home-hero h1 { max-width: 15ch; }
.home-hero .lede { max-width: 46ch; }

/* The proof panel. Sits on pine, so the cards are the light surface — the inversion is what
   makes them read as data rather than as decoration. */
.hero-proof { display: flex; flex-direction: column; gap: 0.75rem; }

.proof-label {
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase; color: #8AA098;
}

.proof-card {
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: 1.15rem 1.25rem;
  box-shadow: var(--lift-hi);
}

/* Coral, because coral means time everywhere else in this product. A countdown is the one
   thing on this page that should feel urgent — and it is urgent because it is true. */
.proof-when {
  display: inline-block;
  background: var(--flag-soft); color: var(--flag);
  font-size: 0.8125rem; font-weight: 600;
  padding: 0.2rem 0.55rem; border-radius: var(--r-pill);
  margin-bottom: 0.6rem;
}

.proof-title {
  font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.02em;
  color: var(--ink); margin: 0 0 0.75rem; line-height: 1.3;
}

.proof-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem 1rem; margin: 0; }
.proof-meta dt {
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.03em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: 0.1rem;
}
.proof-meta dd {
  font-size: 0.875rem; font-weight: 500; color: var(--ink); margin: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.proof-note { font-size: 0.8125rem; color: #8AA098; margin: 0.35rem 0 0; }

@media (max-width: 64rem) {
  .hero-split { grid-template-columns: 1fr; gap: 2.25rem; }
  .home-hero h1, .home-hero .lede { max-width: none; }
  /* One card on mobile: two pushes the checker off the screen, and the checker is the
     conversion. */
  .hero-proof .proof-card:nth-of-type(2) { display: none; }
}

/* Contract cards on the hero. The value sits in the line of prose rather than in a labelled
   box: a 2x2 label grid read like a form, and the thing a contractor reacts to is "held by
   somebody else", not a field called Held by. */
.proof-who { font-size: 0.8125rem; color: var(--ink-soft); margin: 0.25rem 0 0.8rem; }
.proof-who b { color: var(--ink); font-weight: 600; }

.proof-bar {
  height: 4px; background: var(--sunk); border-radius: var(--r-pill);
  overflow: hidden; margin-bottom: 0.5rem;
}
.proof-bar .fill { display: block; height: 100%; }
/* Coral is short enough to act on now; amber is watch this. That distinction is the
   judgement the product exists to make. */
.proof-bar .fill--act { background: var(--flag); }
.proof-bar .fill--watch { background: var(--amber); }
.proof-bar .fill--later { background: var(--ink-faint); }

.proof-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.75rem; font-size: 0.75rem;
}
.proof-left { font-weight: 600; }
.proof-left--act { color: var(--flag); }
.proof-left--watch { color: #8A5F00; }
.proof-left--later { color: var(--ink-faint); }
.proof-predicted { color: var(--ink-faint); display: inline-flex; align-items: center; gap: 0.25rem; }

/* ------------------------------------------------------------- site footer */
/* Statutory disclosure. Quiet but legible — the point is that a visitor can find out who
   they are contracting with, which a 10px grey blur does not achieve. */
.site-footer {
  border-top: 1px solid var(--line);
  background: var(--sunk);
  padding: 2.25rem 0 2.75rem;
  margin-top: 4rem;
}
.site-footer .inner { max-width: 62rem; margin: 0 auto; padding: 0 var(--gut); }

.footer-links {
  display: flex; flex-wrap: wrap; gap: 1.5rem;
  padding-bottom: 1.25rem; margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--line);
}
.footer-links a {
  font-size: 0.875rem; font-weight: 500; color: var(--ink-soft); text-decoration: none;
}
.footer-links a:hover { color: var(--brand-deep); }

.footer-notice { font-size: 0.8125rem; color: var(--ink-soft); margin: 0 0 0.75rem; max-width: 62ch; }
.footer-ogl { font-size: 0.75rem; color: var(--ink-faint); margin: 0 0 1.25rem; max-width: 62ch; }

.footer-legal { font-size: 0.75rem; color: var(--ink-faint); line-height: 1.6; }
.footer-legal p { margin: 0 0 0.2rem; }

@media (max-width: 46rem) {
  .footer-links { gap: 1rem 1.25rem; }
}

/* --------------------------------------------- hero ticker: today's contracts */
/* A continuous vertical scroll through the day's expiring contracts. The point is that the
   panel is alive — it proves the product is running now, not that two examples were picked
   once. */

.proof-viewport {
  /* Roughly two and a half cards, so a third is always part-visible and the panel reads as
     a window onto a longer list rather than a fixed pair. */
  height: 21rem;
  overflow: hidden;
  position: relative;
  /* Fades top and bottom so cards enter and leave rather than being cut off by a hard edge,
     which would read as a rendering fault. */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent);
}

.proof-track {
  display: flex; flex-direction: column; gap: 0.6rem;
  /* Duration scales with the number of rows so the speed per card is constant — a fixed
     duration would make ten contracts scroll twice as fast as five. */
  animation: proof-roll calc(var(--rows, 10) * 4.5s) linear infinite;
}

/* The list is rendered twice and this moves by exactly half the track's height, so the
   second copy lands where the first began. No seam, no reset flash. */
@keyframes proof-roll {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}

/* Stop it when somebody is trying to read. A panel that moves while you are reading a
   contract value is worse than a static one. */
.proof-viewport:hover .proof-track,
.proof-viewport:focus-within .proof-track { animation-play-state: paused; }

/* The small pulse beside "Expiring now" — the only thing on the page that says "this is
   live" rather than "this was true once". */
.live-dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--brand); margin-right: 0.4rem; vertical-align: middle;
  animation: live-pulse 2.4s ease-in-out infinite;
}
@keyframes live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

.proof-label { display: flex; align-items: center; }

@media (prefers-reduced-motion: reduce) {
  /* Honour it properly: the track stops *and* the viewport grows to fit, so the content is
     all reachable rather than two thirds of it being permanently clipped. Motion is the
     decoration; the contracts are the point. */
  .proof-track { animation: none; }
  .proof-viewport { height: auto; -webkit-mask-image: none; mask-image: none; }
  .proof-track .proof-card:nth-child(n + 4) { display: none; }
  .live-dot { animation: none; }
}

@media (max-width: 64rem) {
  .proof-viewport { height: 15.5rem; }
}

/* ------------------------------------------------------------------- legal pages */
/* Readable, not buried. A terms page nobody can get through is a terms page nobody has
   agreed to in any meaningful sense, and these are the pages a customer reads when
   something has gone wrong. */
.legal { padding-top: 2.5rem; padding-bottom: 3rem; }
.legal h1 { margin-bottom: 0.4rem; }
.legal h2 {
  margin-top: 2.25rem; margin-bottom: 0.6rem;
  font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.02em;
  padding-top: 1.25rem; border-top: 1px solid var(--line-soft);
}
.legal h2:first-of-type { border-top: 0; }
.legal .prose { max-width: 66ch; margin: 0 0 0.85rem; line-height: 1.65; }
.legal ul.prose { padding-left: 1.15rem; }
.legal ul.prose li { margin-bottom: 0.45rem; }
.legal .legal-meta { font-size: 0.8125rem; color: var(--ink-faint); margin-bottom: 1.75rem; }
.legal strong { font-weight: 600; }

/* ------------------------------------------------------ delivery channels */
/* Delivery was a single caption line under the sample alert. It is one of the two or three
   things a contractor actually wants to know, so it gets its own block. */
.channels { margin-top: 2.5rem; }
.channels-head {
  font-size: 1rem; font-weight: 600; letter-spacing: -0.02em;
  color: var(--ink); margin: 0 0 1.25rem;
}

.channel-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem;
}

.channel {
  display: flex; gap: 0.85rem; align-items: flex-start;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 1.1rem 1.15rem;
}
.channel h4 {
  font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.015em;
  color: var(--ink); margin: 0 0 0.3rem;
}
.channel p {
  font-size: 0.8125rem; line-height: 1.55; color: var(--ink-soft); margin: 0;
}

.channel-mark {
  flex: 0 0 auto; width: 2.25rem; height: 2.25rem; border-radius: var(--r-md);
  display: grid; place-items: center;
  background: var(--brand-wash); color: var(--brand-deep);
}
/* Telegram's own blue, because a logo tinted to our palette reads as a different mark and
   the point of showing it is instant recognition. */
.channel-mark--telegram { background: #E7F3FA; color: #229ED9; }

.channels-note {
  font-size: 0.8125rem; color: var(--ink-faint); margin: 1rem 0 0; max-width: 62ch;
}

@media (max-width: 54rem) {
  .channel-grid { grid-template-columns: 1fr; gap: 0.75rem; }
}

/* ------------------------------------------------------------------ team page */
/* It rendered opportunities.html with an empty list, so Team and Opportunities were the
   same screen with one permanently blank. A placeholder that looks like a broken feature is
   worse than an honest "not built yet". */
.team-list { margin: 1.5rem 0 2.5rem; }
.team-row {
  display: flex; align-items: center; gap: 0.85rem;
  padding: 0.85rem 0; border-bottom: 1px solid var(--line-soft);
}
.team-row:last-child { border-bottom: 0; }
.team-who { flex: 1; min-width: 0; }
.team-name { font-size: 0.9375rem; font-weight: 600; color: var(--ink); }
.team-email {
  font-size: 0.8125rem; color: var(--ink-soft);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chip--owner { background: var(--brand-wash); color: var(--brand-deep); }
.chip--member { background: var(--sunk); color: var(--ink-soft); }

.team-add { border-top: 1px solid var(--line); padding-top: 1.5rem; }
.team-add h2 { font-size: 1rem; font-weight: 600; margin: 0 0 0.3rem; }
.team-form { display: flex; gap: 0.6rem; margin: 1rem 0 0.6rem; max-width: 30rem; }
.team-form input {
  flex: 1; padding: 0.7rem 0.9rem; border: 1px solid var(--line);
  border-radius: var(--r-md); font-size: 0.9375rem;
}
.hint { font-size: 0.8125rem; color: var(--ink-faint); margin: 0; }
.form-error {
  background: var(--flag-soft); color: var(--flag);
  padding: 0.7rem 0.9rem; border-radius: var(--r-md); font-size: 0.875rem;
}

/* ------------------------------------------------------------- preview gate */
/* Shown to an account that has set a profile and not yet subscribed. It names how many
   matches are being held back, because "subscribe for more" persuades nobody and "9 more
   matched your trade and your patch" is a fact about their own business. */
.preview-gate {
  margin-top: 1rem; padding: 1.75rem 1.5rem; text-align: center;
  background: var(--brand-wash); border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.preview-count {
  font-size: 1.125rem; font-weight: 600; color: var(--ink);
  margin: 0 0 0.4rem; letter-spacing: -0.02em;
}
.preview-note {
  font-size: 0.875rem; color: var(--ink-soft); margin: 0 auto 1.15rem; max-width: 42ch;
  line-height: 1.55;
}
.preview-small { font-size: 0.75rem; color: var(--ink-faint); margin: 0.75rem 0 0; }

/* ================================================================== public site, second pass
   The first landing page was a single centred column of same-shaped sections, which reads as
   a template on any screen wider than a laptop. This pass keeps every token above (pine,
   teal, coral-means-time) and changes the composition: the hero is left-aligned with the
   live board beside it, sections pair a short heading column with a wide content column,
   figures are set large, and the boxes around everything come off. Scoped to `body.pub-site`
   so the product screens are untouched. */

body.pub-site { font-size: 1rem; line-height: 1.55; background: var(--surface); }
body.pub-site :root { --gut: 2rem; }
.pub-site { --wide: 76rem; --gut: 2rem; }

/* header: sits on the page rather than capping it */
.pub-site .pub-head {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center;
  height: 4rem; padding: 0 var(--gut);
  background: rgba(255,255,255,.82);
  -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--line-soft);
}
.pub-site .pub-head .wordmark { font-size: 1.125rem; }
.pub-site .pub-head .links { gap: 1.75rem; font-size: 0.9375rem; }
.pub-site .pub-head .links .btn { border-radius: var(--r-pill); padding: 0.55rem 1.1rem; }

/* buttons: the primary action is a pill; everything else stays quiet */
.pub-site .btn--go {
  border-radius: var(--r-pill);
  box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 10px 24px -12px rgba(0,169,143,.65);
  transition: transform .12s ease, box-shadow .12s ease;
}
.pub-site .btn--go:hover { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 14px 28px -12px rgba(0,169,143,.75); }
.pub-site .btn--go:active { transform: translateY(0); }

/* ---------------------------------------------------------------- hero */
.pub-site .home-hero {
  position: relative; overflow: hidden;
  padding: 6.5rem var(--gut) 6rem;
  background:
    radial-gradient(90rem 40rem at 85% -10%, rgba(0,169,143,.28), transparent 60%),
    radial-gradient(50rem 30rem at -10% 110%, rgba(0,128,109,.22), transparent 60%),
    var(--pine);
}
/* A faint survey grid — ground, plots, boundaries — instead of a flat fill. Quiet enough that
   it only registers as texture. */
.pub-site .home-hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 3.5rem 3.5rem;
  -webkit-mask-image: radial-gradient(70rem 40rem at 50% 40%, #000 30%, transparent 100%);
          mask-image: radial-gradient(70rem 40rem at 50% 40%, #000 30%, transparent 100%);
}
.pub-site .home-hero .inner { position: relative; max-width: var(--wide); margin: 0 auto; text-align: left; }
.pub-site .hero-split { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 5rem; align-items: center; }

.pub-site .hero-pitch .eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.875rem; font-weight: 500; letter-spacing: 0; color: #BFE8DD;
  padding: 0.35rem 0.85rem 0.35rem 0.6rem; border-radius: var(--r-pill);
  border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06);
  margin: 0 0 1.5rem;
}
.pub-site .hero-pitch .eyebrow::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--brand);
  box-shadow: 0 0 0 4px rgba(0,169,143,.25);
}
.pub-site .home-hero h1 {
  font-size: clamp(2.75rem, 6.2vw, 4.75rem);
  font-weight: 700; letter-spacing: -0.045em; line-height: 0.98;
  max-width: 12ch; margin: 0 0 1.4rem;
}
.pub-site .home-hero .lede {
  font-size: 1.25rem; line-height: 1.5; color: #B9D2CA;
  max-width: 44ch; margin: 0 0 2.4rem;
}
/* The dark "glass" checker belongs to the home hero only. It was applied to every checker
   on the public site, so on the white results page the typed text was white on white and
   the form sat hard left. */
.pub-site .home-hero .checker {
  max-width: 34rem; margin: 0; padding: 0.4rem;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--r-pill); gap: 0.4rem;
}
.pub-site .home-hero .checker input {
  flex: 1; min-width: 0; background: transparent; border: 0; color: #fff;
  padding: 0.7rem 1rem; font-size: 1.0625rem; outline: none;
}
.pub-site .home-hero .checker input::placeholder { color: #8AA098; }
.pub-site .home-hero .checker:focus-within { border-color: rgba(0,169,143,.7); box-shadow: 0 0 0 4px rgba(0,169,143,.18); }
.pub-site .checker { margin: 0 auto; }
.pub-site .checker .btn { padding: 0.75rem 1.35rem; font-size: 1rem; }
.pub-site .home-hero .checker-note { color: #7E9A92; margin-top: 1rem; }

/* the board: dark glass, so it belongs to the hero rather than sitting on it */
.pub-site .hero-proof {
  gap: 0.9rem; padding: 1.25rem 1.25rem 1.1rem;
  background: rgba(11,26,23,.55); border: 1px solid rgba(255,255,255,.12);
  border-radius: 20px;
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.7), 0 0 0 1px rgba(0,0,0,.2);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.pub-site .proof-label {
  font-size: 0.8125rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: #BFE8DD;
}
.pub-site .proof-viewport { height: 22.5rem; }
.pub-site .proof-card {
  background: rgba(255,255,255,.96); border-radius: 14px; padding: 1rem 1.1rem;
  box-shadow: 0 1px 0 rgba(255,255,255,.6) inset;
}
.pub-site .proof-title { font-size: 1rem; margin-bottom: 0.25rem; }
.pub-site .proof-who { font-size: 0.8125rem; margin-bottom: 0.7rem; }
.pub-site .proof-foot { font-size: 0.75rem; }
.pub-site .proof-note { color: #7E9A92; }

/* --------------------------------------------------------------- figures */
.pub-site .strip {
  background: var(--surface); border-bottom: 1px solid var(--line-soft);
  padding: 2.25rem var(--gut);
}
.pub-site .strip .inner {
  max-width: var(--wide);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem;
  justify-content: start; text-align: left;
}
.pub-site .fig { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.9375rem; color: var(--ink-soft); }
.pub-site .fig b { font-size: 2.125rem; font-weight: 700; letter-spacing: -0.045em; line-height: 1; color: var(--ink); }
.pub-site .fig--text { justify-content: end; font-weight: 500; color: var(--ink); }

/* -------------------------------------------------------------- sections */
/* Heading column left, content column right. The heading stays short by design: the space
   does the emphasis rather than the type. */
.pub-site .band { padding: 6rem var(--gut); }
.pub-site .band--sunk { background: var(--canvas); border: 0; }
.pub-site .band .inner {
  max-width: var(--wide);
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 8fr);
  grid-template-rows: auto 1fr;
  column-gap: 5rem; row-gap: 1rem; align-items: start;
}
.pub-site .band .inner > h2 {
  grid-column: 1; grid-row: 1;
  font-size: clamp(1.875rem, 3vw, 2.5rem); font-weight: 700;
  letter-spacing: -0.04em; line-height: 1.05; margin: 0;
}
.pub-site .band .inner > .sub { grid-column: 1; grid-row: 2; font-size: 1.125rem; color: var(--ink-soft); margin: 0; max-width: 30ch; }
.pub-site .band .inner > :nth-child(3) { grid-column: 2; grid-row: 1 / span 2; }
.pub-site .band .inner > :nth-child(n + 4) { grid-column: 2; }

/* three things: no boxes, a hairline above each, large light numerals because it IS a sequence */
.pub-site .three { gap: 2.5rem; }
.pub-site .three > div { border-top: 1px solid var(--line); padding-top: 1.25rem; }
.pub-site .three .n {
  width: auto; height: auto; background: none; margin-bottom: 1.1rem;
  font-size: 1.75rem; font-weight: 500; letter-spacing: -0.03em; color: var(--brand-deep); display: block;
}
.pub-site .three h3 { font-size: 1.125rem; letter-spacing: -0.02em; margin-bottom: 0.5rem; }
.pub-site .three p { font-size: 0.9375rem; line-height: 1.6; }

/* the alert demo: presented on a soft plinth so it reads as a screenshot of the product */
.pub-site .demo { max-width: none; }
.pub-site .demo .rows {
  padding: 1.5rem; background: var(--sunk); border-radius: 20px;
  background-image: radial-gradient(30rem 12rem at 10% 0%, rgba(0,169,143,.14), transparent 70%);
}
.pub-site .demo .row { box-shadow: var(--lift-hi); }
.pub-site .demo .caption { margin-top: 1rem; }

.pub-site .channels { margin-top: 0; }
.pub-site .channels-head { font-size: 1.125rem; margin-bottom: 1.25rem; }
.pub-site .channel { background: transparent; border: 0; padding: 0; gap: 1rem; }
.pub-site .channel-grid { gap: 2rem; }
.pub-site .channel p { font-size: 0.9375rem; }
.pub-site .channel-mark { width: 2.5rem; height: 2.5rem; border-radius: 12px; background: var(--brand-lift); }
.pub-site .channel-mark--telegram { background: #E7F3FA; }

/* price: one wide statement */
.pub-site .price {
  grid-template-columns: minmax(0, 1fr) auto; gap: 3rem; padding: 2.5rem;
  border-radius: 20px; border-color: var(--line);
  box-shadow: 0 30px 60px -40px rgba(11,26,23,.35);
}
.pub-site .price .amount { font-size: 4rem; letter-spacing: -0.055em; }
.pub-site .price .per { font-size: 1.0625rem; }
.pub-site .price ul { margin-top: 1.5rem; gap: 0.6rem; font-size: 0.9375rem; }
.pub-site .price > div:last-child { display: grid; gap: 0.25rem; justify-items: center; }
.pub-site .price .btn--go { padding: 0.9rem 1.75rem; font-size: 1.0625rem; }
.pub-site .founding { border-radius: var(--r-md); display: block; padding: 0.8rem 1rem; margin-top: 1.5rem; max-width: 30rem; }

/* coverage: two columns of plain rows */
.pub-site .coverage { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 3rem; }
.pub-site .coverage .item { padding: 1.1rem 0; border-bottom: 1px solid var(--line); }
.pub-site .coverage .item:last-child { border-bottom: 1px solid var(--line); }
.pub-site .coverage .k { font-size: 1rem; }
.pub-site .coverage .tick, .pub-site .coverage .warn {
  width: 1.4rem; height: 1.4rem; border-radius: 50%; display: grid; place-items: center;
  font-size: 0.8125rem; margin-top: 0.1rem;
}
.pub-site .coverage .tick { background: var(--brand-lift); }
.pub-site .coverage .warn { background: var(--amber-soft); }

/* footer */
.pub-site .site-footer { background: var(--pine); color: #A8C4BB; border: 0; margin-top: 0; padding: 3.5rem 0 3rem; }
.pub-site .site-footer .inner { max-width: var(--wide); }
.pub-site .footer-links { border-color: rgba(255,255,255,.1); }
.pub-site .footer-links a { color: #EAF3F0; }
.pub-site .footer-links a:hover { color: var(--brand); }
.pub-site .footer-notice { color: #A8C4BB; }
.pub-site .footer-ogl, .pub-site .footer-legal { color: #7E9A92; }

/* other public pages inherit the wider measure and the type scale */
.pub-site .pub { max-width: 46rem; padding-top: 4rem; }
.pub-site .hero h1 { font-size: clamp(2.25rem, 5vw, 3.25rem); letter-spacing: -0.045em; }

@media (max-width: 64rem) {
  .pub-site .hero-split { grid-template-columns: 1fr; gap: 3rem; }
  .pub-site .home-hero h1 { max-width: none; }
  .pub-site .hero-proof .proof-card:nth-of-type(2) { display: block; }
  .pub-site .proof-viewport { height: 17rem; }
  .pub-site .home-hero { padding: 4rem var(--gut) 3.5rem; }
  .pub-site .strip .inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pub-site .band { padding: 4rem var(--gut); }
  .pub-site .band .inner { grid-template-columns: 1fr; row-gap: 1.5rem; }
  .pub-site .band .inner > h2 { grid-row: auto; }
  .pub-site .band .inner > .sub { grid-row: auto; }
  .pub-site .band .inner > :nth-child(3) { grid-column: 1; grid-row: auto; }
  .pub-site .band .inner > :nth-child(n + 4) { grid-column: 1; }
  .pub-site .coverage { grid-template-columns: 1fr; }
}
@media (max-width: 40rem) {
  .pub-site { --gut: 1.25rem; }
  .pub-site .pub-head { height: 3.5rem; gap: 0.75rem; }
  .pub-site .pub-head .wordmark { font-size: 1rem; }
  .pub-site .pub-head .links { gap: 0.75rem; font-size: 0.875rem; white-space: nowrap; }
  .pub-site .pub-head .links .btn { padding: 0.4rem 0.8rem; }
  .pub-site .hero-pitch .eyebrow { font-size: 0.8125rem; }
  .pub-site .home-hero { padding: 3rem var(--gut) 3rem; }
  .pub-site .home-hero h1 { font-size: clamp(2.25rem, 11vw, 2.75rem); }
  .pub-site .home-hero .lede { font-size: 1.0625rem; }
  .pub-site .band { padding: 3.5rem var(--gut); }
  .pub-site .checker { flex-direction: column; }
  .pub-site .home-hero .checker { border-radius: 20px; }
  .pub-site .checker .btn { width: 100%; justify-content: center; }
  .pub-site .strip .inner { grid-template-columns: 1fr; gap: 1.25rem; }
}

/* ------------------------------------------------------------------ account menu */
.account-menu { position: relative; }
.account-menu > summary { list-style: none; display: flex; align-items: center; gap: .55rem; cursor: pointer; }
.account-menu > summary::-webkit-details-marker { display: none; }
.account-menu > summary::after { content: "▾"; font-size: .75rem; opacity: .7; }
.account-menu__panel {
  position: absolute; right: 0; top: calc(100% + .5rem); z-index: 50; min-width: 12rem;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: 0 18px 40px -18px rgba(11,26,23,.35); padding: .35rem; display: grid;
}
.account-menu__panel a, .account-menu__panel button {
  display: block; text-align: left; padding: .6rem .75rem; border-radius: 8px; font: inherit;
  color: inherit; text-decoration: none; background: none; border: 0; cursor: pointer; width: 100%;
}
.account-menu__panel a:hover, .account-menu__panel button:hover { background: var(--sunk); }
.account-menu__panel form { margin: 0; }
.subscribe-cta { margin: 0 .75rem 0 auto; }
.subscribe-cta .btn { padding: .5rem 1rem; }

/* ------------------------------------------------------------------ preview */
.preview-page { max-width: 820px; margin: 2.5rem auto 4rem; padding: 0 1.25rem; }
.preview-head h1 { margin: 0 0 .4rem; }
.preview-page .list { margin-top: 1.4rem; }
.locked { position: relative; margin-top: .8rem; }
.locked-row { display: grid; gap: .45rem; padding: 1.1rem 1.2rem; border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); margin-bottom: .6rem; filter: blur(1.5px); opacity: .7; }
.locked-row .bar { height: .8rem; border-radius: 4px; background: var(--sunk); width: 70%; }
.locked-row .bar--short { width: 40%; }
.locked-count { text-align: center; font-weight: 600; margin: 1rem 0 0; }
.subscribe-box { margin-top: 2rem; padding: 1.6rem 1.6rem 1.2rem; border: 1px solid var(--line); border-radius: var(--r-lg, 16px);
  background: var(--surface); box-shadow: 0 18px 40px -24px rgba(11,26,23,.3); }
.subscribe-box h2 { margin-top: 0; }
.subscribe-box .preview-price { font-size: 1.05rem; margin: 1rem 0; }
.btn--big { font-size: 1.05rem; padding: .85rem 2.2rem; }

/* The account menu is a <details>. The older `.masthead .who { display: flex }` rule turned
   it into a flex box, and a flex <details> does not open when clicked — found by clicking
   it in a real browser. Block for the menu; flex only for its visible row. */
.masthead .account-menu { display: block; position: relative; }
.masthead .account-menu > summary { display: flex; align-items: center; gap: 0.6rem; color: #9DB8B0; }
.masthead { overflow: visible; }
.masthead .account-menu__panel { z-index: 100; }


/* ------------------------------------------------------------------ layout fixes (visual audit) */
/* "Sign in" in the public header: the header's grey link colour beat the button's white. */
.pub-head .links a.btn--go, .pub-site .pub-head .links a.btn--go { color: #fff; }
/* The Team page had no container, so it sat hard against the left edge. */
.app-page { padding: 2.5rem var(--gut) 4rem; }
.app-page .inner { max-width: 880px; margin: 0 auto; }
.app-page h1 { margin: 0 0 .35rem; }
.app-page .sub { color: var(--ink-soft); margin: 0 0 1.5rem; }
.team-list { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.team-row { display: flex; align-items: center; gap: .9rem; padding: .9rem 1.1rem; border-bottom: 1px solid var(--line-soft); }
.team-row:last-child { border-bottom: 0; }
.team-who { flex: 1; min-width: 0; }
.team-name { font-weight: 600; }
.team-email { color: var(--ink-faint); font-size: .875rem; }
.team-remove { margin: 0; }
.btn--quiet { background: none; border: 1px solid var(--line); color: var(--ink-soft); padding: .4rem .8rem; }
.team-add { margin-top: 2rem; padding: 1.4rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }
.team-add h2 { margin-top: 0; }
.team-form { display: flex; gap: .6rem; }
.team-form input { flex: 1; padding: .75rem 1rem; border: 1px solid var(--line); border-radius: var(--r-md); font: inherit; }
.team-list .empty { padding: 1.2rem; margin: 0; color: var(--ink-faint); }
@media (max-width: 640px) { .team-form { flex-direction: column; } }
/* Onboarding's Telegram step sat jammed under the Start watching button. */
.telegram-step { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
.telegram-step .prose { margin: 0 0 .9rem; }

/* ------------------------------------------------------------------ phones (visual audit) */
/* Long titles and names forced grids and flex rows wider than the screen: match cards ran
   off the right edge, and the header pushed the account menu off-screen entirely. */
.row > div { min-width: 0; }
.row .title { overflow-wrap: anywhere; }
.facts { flex-wrap: wrap; row-gap: .2rem; }
.masthead .who-name { max-width: 16rem; overflow: hidden; text-overflow: ellipsis; }
/* The area page's trade and region pickers, styled like the rest of the form. */
.pub-site .checker select, .checker select {
  flex: 1; min-width: 0; padding: .75rem 1rem; font: inherit; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
}

@media (max-width: 760px) {
  .masthead { gap: .6rem; padding-left: .9rem; padding-right: .9rem; }
  .masthead .nav { flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; gap: .15rem; }
  .masthead .nav::-webkit-scrollbar { display: none; }
  .masthead .nav a { white-space: nowrap; padding: .4rem .55rem; font-size: .875rem; }
  .masthead .who-name { display: none; }            /* the initials open the menu */
  .masthead .account-menu > summary::after { display: none; }
  .subscribe-cta { margin: 0; }
  .subscribe-cta .btn { padding: .4rem .75rem; font-size: .8125rem; white-space: nowrap; }
  .masthead .wordmark { flex-shrink: 0; }

  .row { grid-template-columns: auto 1fr; gap: .8rem; padding: .9rem; }
  .row .right { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; }

  .plan { grid-template-columns: 1fr; gap: 1.2rem; padding: 1.3rem; }
  .shell { grid-template-columns: 1fr; }
  .rail { position: static; padding: 1rem var(--gut) 0; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .detail-grid { grid-template-columns: 1fr; }
  .preview-page, .app-page { padding-left: .9rem; padding-right: .9rem; }
  .subscribe-box { padding: 1.2rem; }
}
/* Opportunities on a phone: the main column grew to fit its widest child. */
.shell > * { min-width: 0; }
.rail select, .rail input { width: 100%; max-width: 100%; box-sizing: border-box; }
@media (max-width: 760px) {
  .rail .views, .rail nav { display: flex; overflow-x: auto; gap: .35rem; scrollbar-width: none; }
  .main, .shell main { padding-left: .9rem; padding-right: .9rem; }
}

/* Renewals page */
.app-page .inner--wide { max-width: 1040px; }
.window-tabs { display: flex; gap: .4rem; margin: 0 0 1.2rem; flex-wrap: wrap; }
.window-tabs a { padding: .45rem .9rem; border: 1px solid var(--line); border-radius: var(--r-pill);
  color: var(--ink-soft); text-decoration: none; font-weight: 500; background: var(--surface); }
.window-tabs a[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.app-page .count { color: var(--ink-faint); margin: 0 0 .8rem; font-size: .9rem; }
.renewal-list { display: grid; gap: .6rem; }
.row.renewal { grid-template-columns: 1fr auto; }
.renewal .holder { margin-top: .35rem; color: var(--ink-soft); font-size: .9rem; }
.renewal .right { display: flex; flex-direction: column; align-items: flex-end; gap: .35rem; }
.renewal .ends-on { color: var(--ink-faint); font-size: .8rem; }
.empty-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.6rem; }
.empty-card h2 { margin-top: 0; }
.stat--link { text-decoration: none; color: inherit; }
.stat--link:hover { box-shadow: var(--lift-hi); }
.renewal .value--unstated { font-size: .85rem; font-weight: 500; color: var(--ink-faint); }
/* Two columns down to phone width. It used to stack at 760px and spread value, end and date
   across the full width, which looked broken on a small laptop window. */
@media (max-width: 760px) {
  /* The general phone rule for list rows moves .right onto its own full-width line at 760px;
     Renewals rows keep two columns until 600px. */
  .row.renewal { grid-template-columns: 1fr auto; }
  .row.renewal .right { grid-column: auto; display: flex; flex-direction: column; align-items: flex-end; }
}
@media (max-width: 600px) {
  .row.renewal { grid-template-columns: 1fr; gap: .7rem; }
  .row.renewal .right { grid-column: 1 / -1; }
  .renewal .right { flex-direction: row; flex-wrap: wrap; justify-content: flex-start;
                    align-items: center; gap: .5rem .8rem; }
}

/* Control Room: funnel figures on one line; the emailed-list search. */
.funnel .bar .n { white-space: nowrap; min-width: 10rem; text-align: right; }
.funnel .bar .n small { font-weight: 400; }
.admin-search { margin-bottom: 1rem; }
.admin-search input { flex: 1; padding: .6rem .8rem; border: 1px solid var(--line); border-radius: 10px; font: inherit; }

/* A tender whose lots match more than once. */
.chip--lots { background: var(--brand-lift); color: var(--brand-deep); font-weight: 600; }

/* An informational note (not a success banner). */
.banner--info { background: var(--surface-soft, #F3F6F5); border-color: var(--line); color: var(--ink-soft); }
.banner--info strong { color: var(--ink); }

/* Opportunities: the "Worth a look" band below the strong matches. */
.band-head { margin: 1.4rem 0 .4rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.band-head h3 { margin: 0 0 .25rem; font-size: 1rem; }
.band-head p { margin: 0; color: var(--ink-faint); font-size: .875rem; max-width: 60ch; }

/* Help: the in-app support conversation. */
.help-thread { display: grid; gap: .9rem; }
.help-msg { max-width: 46rem; }
.help-msg--user { justify-self: end; text-align: right; }
.help-who { font-size: .75rem; color: var(--ink-faint); margin-bottom: .2rem; }
.help-body { white-space: pre-wrap; line-height: 1.5; display: inline-block; text-align: left;
             padding: .7rem .9rem; border-radius: 12px; background: var(--surface-soft, #F3F6F5); }
.help-msg--user .help-body { background: var(--brand-lift); }
.help-form textarea { width: 100%; padding: .7rem .8rem; border: 1px solid var(--line); border-radius: 10px; font: inherit; resize: vertical; }
.help-form .btn-row { margin-top: .6rem; }
.help-new { margin-top: .6rem; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* v57: the checker sells first — the sign-up card sits above the contracts, not only below them */
.convert--top { margin: 0.9rem 0 1.1rem; padding: 0.9rem 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; }
.convert--top p { margin: 0; flex: 1 1 18rem; }
.convert--top .checker-note { margin: 0; }
.did-you-mean a { font-weight: 600; }

/* v58: the terms are agreed at sign-in, beside the button */
.consent { font-size: 0.8125rem; color: #6B7F79; margin: 0.7rem 0 0; line-height: 1.45; }
.consent a { color: inherit; text-decoration: underline; }

/* v90: the tender a live-tender email named, shown first on /live */
.contract--featured { outline: 2px solid #4FA88E; }
.featured-tag { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em; color: #2E7D68; text-transform: uppercase; margin-bottom: 0.2rem; }