/* ─────────────────────────────────────────────────────────────────────────────
   MySubbys, the public site.

   ⭐ The :root block below is lifted VERBATIM from the platform's
   src/styles.css, which carries its own warning not to nudge these values.
   --hi is the colour of a hi-vis jacket, not a lime tech yellow. If the
   platform's tokens change, re-lift this block rather than editing it here.

   Fonts are self-hosted in /fonts. Nothing on this site fetches from a CDN.
   ───────────────────────────────────────────────────────────────────────────── */

@font-face{font-family:'Rajdhani';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/rajdhani-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Rajdhani';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/rajdhani-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/inter-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/inter-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2')}

:root {
  --page: 1080px;
  --gutter: clamp(18px, 4vw, 40px);
  --ground:    #11141A;
  --ground-2:  #161A22;
  --panel:     #1B212B;
  --panel-2:   #222A36;
  --panel-3:   #2A3340;
  --line:      #303A49;
  --line-soft: #262F3B;

  --hi:        #F5C518;
  --hi-dim:    #B99510;
  --hi-ink:    #14171E;

  --ink:       #EDF1F6;
  --ink-dim:   #9DA9B8;
  --ink-faint: #6C7887;

  /* Four states, four colours, and they never get collapsed into a traffic
     light. "No response" is not a worse "not ready" -- it is a different
     conversation with a different urgency, so it gets its own colour. */
  --go:    #3FBF87;
  --stop:  #E5484D;
  --later: #5B8DEF;
  --warn:  #E8913A;

  --display: 'Rajdhani', 'Arial Narrow', system-ui, sans-serif;
  --body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;

  --hazard: repeating-linear-gradient(135deg, var(--hi) 0 14px, #14171E 14px 28px);
  --radius: 4px;
  /* ⭐ Same idea as the phone's white rim, scaled DOWN. The phone is one large
     object with room around it; these are grids of six with 10px gutters, so
     the phone's 3px ring and 46px halo would bleed card into card and read as
     fog. A 1px rim and a halo that stops inside the gutter gives the same lift
     without the grid turning into one glowing block. */
  /* A brighter edge than --line-soft. The cards sit on a near-black ground
     and #262F3B disappeared into it, so the box read as text floating rather
     than as a card. This is the border doing the standing-out; --lift only
     separates it from the page behind. */
  --edge: rgba(255, 255, 255, .16);
  --lift:
    0 10px 22px -8px rgba(0, 0, 0, .55),
    0 0 0 1px rgba(255, 255, 255, .055),
    0 0 24px -4px rgba(255, 255, 255, .12);
  color-scheme: dark;
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font-family: var(--body); font-size: 16px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, .display, .brand, .pill, .tile-l, .eyebrow, .btn, label {
  font-family: var(--display); text-transform: uppercase;
  letter-spacing: .07em; font-weight: 600;
}
a { color: var(--hi); }
img { max-width: 100%; }

/* The hazard stripe. It is the one piece of the brand that says "site"
   before a word is read, so it opens every page. */
.stripe { height: 9px; background: var(--hazard); }
.stripe-thin { height: 5px; background: var(--hazard); }

/* ── shell ─────────────────────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 30;
  background: rgba(17,20,26,.94); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line-soft);
}
.nav-in { display: flex; align-items: center; gap: 16px;
  padding-top: 14px; padding-bottom: 14px; }
.brand { font-size: 1.15rem; letter-spacing: .1em; font-weight: 700; color: var(--ink);
  text-decoration: none; display: flex; align-items: center; gap: 9px; }
.brand .bar { width: 9px; height: 22px; background: var(--hi); border-radius: 1px; }
.brand b { color: var(--hi); font-weight: 700; }
.nav .spacer { flex: 1; }
.nav a.navlink { font-family: var(--display); text-transform: uppercase; letter-spacing: .1em;
  font-size: .72rem; color: var(--ink-dim); text-decoration: none; }
.nav a.navlink:hover { color: var(--hi); }

/* ⭐ ONE PAGE MEASURE. The nav, every section and the footer sit on the same
   centred column with the same gutter, so their left edges line up all the way
   down the page. */
.nav-in, .wrap, .foot-in {
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ⚠️ .narrow used to be a different CONTAINER -- max-width 720 with
   margin-left:0 -- which pulled those sections hard against the viewport edge
   while every other section sat in a centred 1080 column. On a wide screen the
   text visibly jumped left, and on subbies.html, where every section is narrow,
   the whole page sat left under a centred nav. That is the jumping Rob saw.

   ⭐ Now they are CENTRED: block centred inside the page column, text centred
   with it. A short statement section reads as a statement when it is centred
   and as an unfinished column when it is not, and 68ch keeps the line length
   comfortable however wide the window gets. */
.wrap.narrow > * {
  max-width: 68ch;
  margin-inline: auto;
  text-align: center;
}
/* A centred form with left-aligned fields looks like a mistake, so the form
   centres as a block and its inputs stay full width inside it. */
.wrap.narrow .form-row { justify-content: center; margin-inline: auto; }
.wrap.narrow .form-note { justify-content: center; }

/* ⭐ The wide sections lead with a centred heading and deck, then drop into
   left-aligned detail inside the cards -- statements centred, content ranged
   left, which is the pattern the whole page now follows. */
.wrap > h2, .wrap > .lede, .wrap > .eyebrow {
  max-width: 68ch;
  margin-inline: auto;
  text-align: center;
}

section { padding: clamp(48px,7vw,86px) 0; border-bottom: 1px solid var(--line-soft); }
section:last-of-type { border-bottom: none; }

.eyebrow { font-family: var(--mono); font-size: .7rem; letter-spacing: .18em;
  color: var(--hi); text-transform: uppercase; font-weight: 500; margin-bottom: 14px; }
h1 { font-size: clamp(1.8rem, 3.5vw, 2.8rem); text-wrap: balance; line-height: .97; margin: 0; font-weight: 700;
  letter-spacing: .01em; }
h2 { font-size: clamp(1.5rem, 4vw, 2.3rem); line-height: 1.02; margin: 0 0 16px;
  font-weight: 700; letter-spacing: .02em; color: var(--ink); }
h3 { font-size: 1rem; margin: 0 0 6px; letter-spacing: .09em; }
.lede { color: var(--ink-dim); font-size: clamp(1rem,2.1vw,1.18rem); margin: 20px 0 0; max-width: 620px; }
/* ⚠️ MUST stay below .lede. Every deck is also a .lede, both are single-class
   so specificity ties, and .lede's `margin: 20px 0 0` SHORTHAND resets
   margin-bottom to 0. Declared above .lede this rule was dead -- the decks
   sat hard against the cards for as long as the rule had existed and it read
   as a missing rule rather than an overridden one.
   The line under a heading. One rhythm, one place to change it. */
.deck { margin-bottom: 38px; }
/* Same rhythm where a heading runs straight into the cards with no deck, so
   the gap does not depend on whether that section happens to have a line. */
h2 + .grid, h2 + .steps { margin-top: 38px; }
/* The button that closes a section. Was two inline margin-top:26px, which put
   the button hard against the line above it and meant the rhythm lived in the
   markup rather than here. Same 38px as everything else. */
.cta { margin-top: 38px; }
p { margin: 0 0 14px; }
.muted { color: var(--ink-dim); }
.small { font-size: .85rem; }
.mono { font-family: var(--mono); }

/* ── surfaces, straight out of the platform ────────────────────────────────── */
.card { background: var(--panel); border: 1px solid var(--line-soft);
  border-radius: var(--radius); padding: 18px; }
.hazard { border-left: 3px solid var(--warn); background: var(--panel-2);
  padding: 13px 15px; border-radius: var(--radius); font-size: .93rem; }
.hazard strong { color: var(--warn); }
.pill { font-size: .66rem; font-weight: 700; letter-spacing: .1em; padding: 3px 8px;
  border-radius: 2px; white-space: nowrap; border: 1px solid transparent; }
.pill.go{background:rgba(63,191,135,.13);color:var(--go);border-color:rgba(63,191,135,.32)}
.pill.no{background:rgba(229,72,77,.12);color:var(--stop);border-color:rgba(229,72,77,.30)}
.pill.warn{background:rgba(232,145,58,.13);color:var(--warn);border-color:rgba(232,145,58,.32)}

/* Hierarchy is FILLED yellow (primary, one per page -- Get Early Access) then
   OUTLINED yellow (secondary) then plain text. A grey box on a near-black
   ground did not read as a button at all; going outline rather than filled is
   what keeps it below the primary instead of competing with it.
   ⛔ Do not fill this one. The moment there are two solid yellow buttons the
   page stops telling anyone which action it actually wants. */
.btn { display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 14px 30px; border-radius: var(--radius);
  border: 1px solid rgba(245, 197, 24, .55); background: rgba(245, 197, 24, .07);
  color: var(--hi);
  cursor: pointer; text-decoration: none; font-size: .84rem; font-weight: 700;
  box-shadow: var(--lift); transition: border-color .14s, color .14s, background .14s; }
.btn:hover { border-color: var(--hi); background: rgba(245, 197, 24, .14); }
.btn.primary { background: var(--hi); color: var(--hi-ink); border-color: var(--hi);
  font-weight: 700; box-shadow: 0 10px 24px -12px rgba(245, 197, 24, .55); }
.btn.primary:hover { color: var(--hi-ink); }
.btn.primary:hover { background: #FFD52E; }
.btn:disabled { opacity: .45; cursor: not-allowed; }

label { display: block; font-size: .68rem; color: var(--ink-dim); margin: 0 0 6px;
  letter-spacing: .12em; }
input { width: 100%; padding: 13px 12px; min-height: 48px; font-size: 16px;
  font-family: var(--body); background: var(--ground-2); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius); }
input:focus { outline: 2px solid var(--hi); outline-offset: -1px; border-color: var(--hi); }
input::placeholder { color: var(--ink-faint); }
.hint { font-size: .8rem; color: var(--ink-faint); margin-top: 9px; }
:focus:not(:focus-visible) { outline: none; }
:focus-visible { outline: 2px solid var(--hi-dim); outline-offset: 2px; }

/* ── hero ──────────────────────────────────────────────────────────────────── */
.hero-wrap { display: grid; gap: clamp(34px,5vw,56px); align-items: center; }
@media (min-width: 900px) { .hero-wrap { grid-template-columns: 1.15fr .85fr; } }
.form-row { display: flex; gap: 8px; margin-top: 26px; max-width: 460px; flex-wrap: wrap; }
.form-row input { flex: 1; min-width: 210px; }
.form-note { display: flex; gap: 18px; margin-top: 14px; flex-wrap: wrap;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .09em;
  color: var(--ink-faint); text-transform: uppercase; }
.form-note span::before { content: '▪'; color: var(--hi-dim); margin-right: 7px; }
.ok { color: var(--go); margin-top: 14px; font-size: .9rem; }
.bad { color: var(--stop); margin-top: 14px; font-size: .9rem; }

/* ── a screen of the real thing ────────────────────────────────────────────── */
/* ⭐ THE PHONE, LIFTED VERBATIM FROM MySubbys_Walkthrough.html.
   Same rule as the colour tokens: re-lift from the artefact rather than
   inventing a second version, or the app, the site and the ad drift apart.
   The first attempt at this was a frame of my own with a speaker slot -- it
   looked fine and it was not the one in the artefact, which is the problem. */
.phone {
  width: 100%;
  max-width: 372px;
  margin-inline: auto;
  background: #05070A;
  border: 1px solid #39424F;
  border-radius: 42px;
  padding: 11px;
  /* ⚠️ The dark shadow alone is near-invisible on a #11141A ground, so the
     artefact's yellow rim is what actually separates it from the page. */
  box-shadow:
    0 30px 70px rgba(0, 0, 0, .62),
    0 0 0 1px rgba(245, 197, 24, .09),
    /* Site-only layer, NOT from the artefact: a thin white rim plus a soft
       halo, so the device reads as lifted off the page rather than cut into
       it. Deliberately kept outside the yellow rim so the artefact's own
       separation is still the one doing the work. */
    0 0 0 3px rgba(255, 255, 255, .055),
    0 0 46px -10px rgba(255, 255, 255, .17),
    0 0 110px -30px rgba(245, 197, 24, .16);
}
.screen {
  background: var(--ground-2);
  border-radius: 32px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* The device's own chrome, above the app's. */
.statusbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 22px 7px;
  font-family: var(--mono); font-size: .66rem; color: var(--ink-dim);
}
.statusbar .sig { display: flex; gap: 5px; align-items: center; }

.appbar {
  padding: 8px 18px 14px; border-bottom: 1px solid var(--line-soft);
  display: flex; align-items: center; gap: 12px; background: var(--ground-2);
}
.appbar .spacer { flex: 1; }
.avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--panel-3); border: 1px solid var(--line);
  font-family: var(--mono); font-size: .66rem;
  display: flex; align-items: center; justify-content: center; color: var(--ink-dim);
}

/* ⭐ The bottom bar is the point. It is the only navigation a subbie or a
   builder gets on a phone, so a mock without it is not this product. */
.tabbar { display: flex; border-top: 1px solid var(--line); background: #0C0F14; }
.tab {
  flex: 1; padding: 11px 4px 13px; text-align: center;
  font-family: var(--display); font-weight: 600; text-transform: uppercase;
  letter-spacing: .08em; font-size: .66rem; color: var(--ink-faint);
}
.tab.on { color: var(--hi); }
.tab .ic { display: block; font-size: 1rem; margin-bottom: 3px; color: inherit; }

@media (max-width: 420px) { .phone { border-radius: 32px; padding: 8px; } .screen { border-radius: 26px; } }

.screen-body { padding: 16px; }
.screen .tiles { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 7px; margin-bottom: 15px; }
.screen .tile { position: relative; overflow: hidden; display: flex; flex-direction: column;
  gap: 4px; background: var(--panel); border: 1px solid var(--line-soft);
  border-radius: var(--radius); padding: 17px 10px 12px; min-height: 78px; }
.screen .tile::before { content:''; position:absolute; inset:0 0 auto 0; height:6px;
  background: repeating-linear-gradient(135deg, var(--tile-c) 0 10px, var(--hi-ink) 10px 20px); }
.tile-n { font-family: var(--display); font-size: 1.9rem; line-height: 1; font-weight: 700; }
.tile-l { font-size: .58rem; color: var(--ink-dim); letter-spacing: .09em; }
.tile.no{--tile-c:var(--stop)} .tile.no .tile-n{color:var(--stop)}
.tile.warn{--tile-c:var(--warn)} .tile.warn .tile-n{color:var(--warn)}
.tile.wait{--tile-c:var(--later)} .tile.wait .tile-n{color:var(--later)}
.tile.go{--tile-c:var(--go)} .tile.go .tile-n{color:var(--go)}
.screen .row { background: var(--panel); border: 1px solid var(--line-soft);
  border-left: 3px solid var(--line); border-radius: var(--radius);
  padding: 12px 13px; margin-bottom: 7px; }
.row.go{border-left-color:var(--go)} .row.no{border-left-color:var(--stop)}
.row.warn{border-left-color:var(--warn)} .row.wait{border-left-color:var(--later)}
.row-top { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.row-name { font-size: .95rem; font-weight: 600; }
.row-detail { color: var(--ink-dim); font-size: .8rem; margin-top: 3px; }

/* ── grids ─────────────────────────────────────────────────────────────────── */
.grid { display: grid; gap: 18px; }
@media (min-width:700px){ .grid.g3 { grid-template-columns: repeat(3,1fr); } }
@media (min-width:700px){ .grid.g2 { grid-template-columns: repeat(2,1fr); } }
/* ⭐ Hazard tape down the edge, the same black and yellow as the band that
   opens every page. A flat yellow line is a line; the tape is the one piece of
   the brand that says "site" before a word has been read, and repeating it on
   the cards is what carries that feel down the page rather than leaving it
   stranded in the header.
   ⚠️ A border cannot carry a gradient, so it is a pseudo-element -- and the
   segments are tighter than the header's 14px because on a 5px strip the
   diagonal has to read at a glance. */
.feat { position: relative; overflow: hidden;
  background: var(--panel); border: 1px solid var(--edge);
  border-radius: var(--radius); padding: 20px 20px 20px 26px;
  box-shadow: var(--lift); }
.feat::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 5px;
  background: repeating-linear-gradient(135deg, var(--hi) 0 8px, var(--hi-ink) 8px 16px); }
.feat h3 { color: var(--ink); }
.feat p { color: var(--ink-dim); font-size: .92rem; margin: 0; }
.steps { counter-reset: s; display: grid; gap: 18px; }
.step { position: relative; overflow: hidden;
  display: flex; gap: 16px; align-items: flex-start; background: var(--panel);
  border: 1px solid var(--edge); border-radius: var(--radius); padding: 18px 20px 18px 26px;
  box-shadow: var(--lift); }
/* ⚠️ ::after, not ::before -- .step::before is already the step NUMBER. Using
   it here would have absolutely positioned the numbered badge into a 5px strip
   and lost the counter. */
.step::after { content: ''; position: absolute; inset: 0 auto 0 0; width: 5px;
  background: repeating-linear-gradient(135deg, var(--hi) 0 8px, var(--hi-ink) 8px 16px); }
.step::before { counter-increment: s; content: counter(s); font-family: var(--display);
  font-weight: 700; font-size: 1.3rem; color: var(--hi); line-height: 1; flex: none;
  width: 30px; padding-top: 2px; }
.step h3 { color: var(--ink); }
.step p { color: var(--ink-dim); font-size: .92rem; margin: 0; }

/* ── footer ────────────────────────────────────────────────────────────────── */
footer { background: var(--ground-2); border-top: 1px solid var(--line-soft); }
.foot-in { padding-top: 40px; padding-bottom: 46px; }
/* Centred, like the rest of the page. It was brand-left / links-pushed-right
   via a flex spacer span in the markup -- the one part of the site still
   ranged left after the centring pass, which is what made it look bolted on. */
.foot-top { display: flex; gap: 22px; flex-wrap: wrap; align-items: center;
  justify-content: center;
  padding-bottom: 22px; border-bottom: 1px solid var(--line-soft); }
.foot-links { display: flex; gap: 22px; flex-wrap: wrap; justify-content: center; }
.foot-links a { font-family: var(--display); text-transform: uppercase; letter-spacing: .1em;
  font-size: .72rem; color: var(--ink-dim); text-decoration: none; }
.foot-links a:hover { color: var(--hi); }
/* ⚠️ Statutory: registered name, number, place of registration and registered
   office must all appear. Keep all four, they are not decorative. */
.statutory { margin-top: 22px; color: var(--ink-faint); font-size: .76rem;
  max-width: 640px; margin-inline: auto; text-align: center; }

/* ── legal ─────────────────────────────────────────────────────────────────── */
.legal h2 { margin-top: 42px; scroll-margin-top: 90px; }
.legal h2:first-of-type { margin-top: 0; }
.legal h3 { color: var(--ink); margin-top: 26px; letter-spacing: .06em; font-size: .95rem; }
.legal p, .legal li { color: var(--ink-dim); font-size: .95rem; }
.legal ul { padding-left: 20px; }
.jump { display: flex; gap: 10px; flex-wrap: wrap; margin: 22px 0 34px; }
.updated { font-family: var(--mono); font-size: .7rem; letter-spacing: .1em;
  color: var(--ink-faint); text-transform: uppercase; }

/* ── phone ─────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* Four KPI tiles do not fit across a phone. Two by two, same as the app. */
  .screen .tiles { grid-template-columns: repeat(2, minmax(0,1fr)); }
  /* The email box carried a 210px minimum, which the button then pushed off
     the right-hand edge. Stack them instead. */
  .form-row { flex-direction: column; }
  .form-row input { min-width: 0; width: 100%; }
  .form-row .btn { width: 100%; }
  .nav-in { gap: 12px; }
  .nav a.navlink { font-size: .64rem; }
  .foot-top { gap: 14px; }
}

/* The enquiry form now asks four things rather than one, so it stacks on a
   phone and goes two-up where there is room. */
.form-stack { display: grid; grid-template-columns: 1fr; gap: 10px; }
.form-stack input, .form-stack select { width: 100%; }
@media (min-width: 620px) {
  .form-stack { grid-template-columns: 1fr 1fr; }
  .form-stack button { grid-column: 1 / -1; }
}