/* ==========================================================================
   AXIS landing – British racing green + gold re-skin (AXIS-RESKIN-007).
   Linked ONLY from /axis (axis.html) on the marketing vhost. Supersedes the
   navy axis-landing.css for this page; that file is left in place for other
   references and rollback. Self-hosted fonts only, no third-party origins.

   Body design system is the signed reference (AXIS Landing 6e.html). Nav,
   footer, trust strip, FAQ and the closing band keep the LIVE page's markup
   classes, restyled to this palette (AXIS-RESKIN-007 weld 6). The hero
   split-flap keeps the live .cd-* flip markup + landing-countdown.js, restyled
   to the green digit-cell treatment (weld 9).
   ========================================================================== */

/* ---- self-hosted faces (shared with the marketing site) ------------------
   Inter variable is body + display. Spline Sans Mono is the DIGITS-ONLY subset
   and is scoped to the split-flap countdown alone (--flap). Register refs,
   prices and timestamps take --mono = Inter with tabular numerals: the site
   holds no full mono face, and the digits subset cannot render letters/£, so
   the nearest-equivalent tabular treatment is used (matches LANDING-FIX-001).*/
@font-face{ font-family:'Inter'; font-style:normal; font-weight:100 900; font-display:swap;
  src:url('../fonts/inter/InterVariable.woff2') format('woff2'); }
@font-face{ font-family:'Spline Sans Mono'; font-style:normal; font-weight:700; font-display:swap;
  src:url('../fonts/spline/spline-sans-mono-700-digits.woff2') format('woff2'); unicode-range:U+0030-0039; }

:root{
  --grn:#0A2F23; --grn-deep:#072318; --grn-tile:#123C2C;
  --gold:#EBB542; --head-d:#F7F5EF; --body-d:#D9DBD6; --meta-d:#A8AEA8; --hair-d:#2A5240;
  --paper:#F7F5EF; --card:#FFFFFF; --ink:#0A2F23; --body-l:#3B4540; --meta-l:#5C665F; --hair-l:#DCD9CE;
  --st-action:#B45309; --st-overdue:#791F1F; --st-done:#3B4540; --st-ok:#1A6B45;
  --band-cr:#B4674E; --band-psr:#EBB542; --band-hnt:#5E86A8; --band-vdi:#4E8AA6; --band-tr1:#B4894E;
  --band-str:#7C6DA4; --band-drt:#A8628B; --band-frs:#6E8B6B; --band-scp:#C97E4A;
  --mono:'Inter', system-ui, -apple-system, sans-serif;
  --flap:'Spline Sans Mono', ui-monospace, monospace;
  --sans:'Inter', system-ui, -apple-system, sans-serif;
  --disp:'Inter', system-ui, -apple-system, sans-serif;
}

/* ---- base ---- */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; background:var(--paper); color:var(--body-l); font-family:var(--sans);
  font-size:16px; line-height:1.7; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
a{ color:var(--ink); } a:hover{ color:var(--grn-deep); }
p{ text-wrap:pretty; }
img{ max-width:100%; }
.wrap{ max-width:1120px; margin:0 auto; padding:0 40px; }
@media (max-width:640px){ .wrap{ padding:0 20px; } }

.eyebrow{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:1.5px; margin:0; }
.mono{ font-family:var(--mono); font-variant-numeric:tabular-nums; letter-spacing:0.03em; }
.h1{ font-family:var(--disp); font-weight:700; font-size:44px; line-height:1.08; letter-spacing:-1px; margin:0; text-wrap:balance; }
.h2{ font-family:var(--disp); font-weight:700; font-size:28px; line-height:1.2; letter-spacing:-0.4px; margin:0; }
.h3{ font-size:17px; font-weight:700; line-height:1.4; margin:0; }
@media (max-width:720px){ .h1{ font-size:32px; } .h2{ font-size:23px; } }

/* ---- buttons ---- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--sans);
  font-size:14px; font-weight:700; padding:12px 20px; border-radius:6px; text-decoration:none;
  white-space:nowrap; min-height:44px; cursor:pointer; }
.btn-gold{ background:var(--gold); color:var(--grn); border:1px solid var(--gold); }
.btn-gold:hover{ background:#DFA832; color:var(--grn); }
.btn-line-d{ border:1px solid var(--hair-d); color:var(--head-d); background:transparent; }
.btn-line-d:hover{ border-color:var(--meta-d); color:#fff; }
.btn-line-l{ border:1px solid var(--ink); color:var(--ink); background:transparent; }
.btn-line-l:hover{ background:var(--ink); color:var(--paper); }
/* live nav markup keeps .btn-primary / .btn-secondary — mapped to the palette */
.btn-primary{ background:var(--gold); color:var(--grn); border:1px solid var(--gold); }
.btn-primary:hover{ background:#DFA832; color:var(--grn); }
.btn-secondary{ background:transparent; color:var(--head-d); border:1px solid var(--hair-d); }
.btn-secondary:hover{ border-color:var(--meta-d); color:#fff; }

/* ---- grounds ---- */
.g-dark{ background:var(--grn); color:var(--body-d); }
.g-deep{ background:var(--grn-deep); color:var(--body-d); }
.g-paper{ background:var(--paper); color:var(--body-l); }
.g-dark .h1,.g-dark .h2,.g-dark .h3,.g-deep .h1,.g-deep .h2,.g-deep .h3{ color:var(--head-d); }
.g-dark .eyebrow,.g-deep .eyebrow{ color:var(--gold); }
.g-dark a,.g-deep a{ color:var(--head-d); }
.g-paper .eyebrow{ color:var(--meta-l); }
.g-paper .h2,.g-paper .h3{ color:var(--ink); }
section{ padding:88px 0; }

/* ---- nav (live markup: header.nav / .nav-links / .nav-actions / .lockup) ---- */
header.nav{ position:sticky; top:0; z-index:50; background:var(--grn); border-bottom:1px solid var(--hair-d); }
header.nav .wrap{ display:flex; align-items:center; justify-content:space-between; height:64px; }
.lockup{ display:inline-flex; align-items:center; gap:11px; text-decoration:none; }
.nav-links{ display:flex; align-items:center; gap:26px; }
.nav-links a{ font-size:14px; color:var(--body-d); text-decoration:none; }
.nav-links a:hover{ color:#fff; }
@media (max-width:880px){ .nav-links{ display:none; } }
.nav-actions{ display:flex; align-items:center; gap:10px; }
.nav-actions .btn{ padding:8px 16px; min-height:0; }

/* ---- S1 hero ---- */
.hero{ padding:88px 0 96px; position:relative; overflow:hidden; }
.hero .wrap{ position:relative; }
.hero-grid{ display:grid; grid-template-columns:1.25fr 0.75fr; gap:64px; align-items:start; }
@media (max-width:880px){ .hero-grid{ grid-template-columns:1fr; gap:40px; } }
.hero .lede{ font-size:17px; max-width:520px; margin:22px 0 0; color:var(--body-d); }
.hero-cta{ display:flex; gap:12px; margin-top:30px; flex-wrap:wrap; }
.rate-line{ font-size:14px; margin:26px 0 0; color:var(--body-d); border-top:1px solid var(--hair-d);
  padding-top:18px; max-width:520px; }
.rate-line b{ color:var(--head-d); }
.hero-wm{ position:absolute; right:-30px; bottom:-40px; height:150px; width:auto; opacity:0.06;
  pointer-events:none; user-select:none; }
.hero-col2{ position:relative; }

/* split-flap card (container) */
.flap-card{ border:1px solid var(--hair-d); border-radius:8px; padding:26px 28px; }
.flap-label{ font-size:12px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--meta-d); margin:0 0 16px; }
.flap-unit{ font-size:13px; color:var(--meta-d); margin:12px 0 0; max-width:200px; }
.flap-date{ font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:13px; color:var(--head-d);
  margin:18px 0 0; padding-top:16px; border-top:1px solid var(--hair-d); }
.flap-date small{ display:block; font-family:var(--sans); font-size:12px; color:var(--meta-d); margin-top:3px; }

/* split-flap tiles (live .cd-* flip markup + landing-countdown.js, restyled green) */
.hf{ display:flex; gap:6px; margin-bottom:6px; }
.cd-unit{ position:relative; width:40px; height:56px; perspective:200px; font-family:var(--flap);
  border:1px solid var(--hair-d); border-radius:6px; background:var(--grn-deep); }
.cd-card{ position:absolute; left:0; width:100%; height:28px; overflow:hidden; background:var(--grn-deep); }
.cd-card b{ position:absolute; left:0; width:100%; height:56px; line-height:56px; text-align:center;
  font-size:32px; font-weight:700; color:var(--head-d); letter-spacing:-0.5px; }
.cd-top, .cd-ftop{ top:0; border-radius:5px 5px 0 0; border-bottom:1px solid var(--hair-d); }
.cd-bottom, .cd-fbot{ top:28px; border-radius:0 0 5px 5px; }
.cd-top b, .cd-ftop b{ top:0; }
.cd-bottom b, .cd-fbot b{ top:-28px; }
.cd-ftop{ transform-origin:bottom center; backface-visibility:hidden; z-index:4; }
.cd-fbot{ transform:rotateX(90deg); transform-origin:top center; backface-visibility:hidden; z-index:4; }
.cd-sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (prefers-reduced-motion:reduce){ .cd-card{ transition:none !important; } }

/* ---- register entry component --------------------------------------------
   GROUND (RESKIN-FIX-008): entry rows live ONLY inside light cards — S2
   .reg-card, S3 .moment, S4 .reg-panel. The light ground is stated EXPLICITLY
   below so the component can never inherit or leak a dark fill onto a light
   card (the FIX-002 class of defect: a component moved across grounds without
   restating the ground). There is NO dark-ground entry variant: the only dark
   entry-like rows are the S4 mode samples, which use .row (not .entry) and are
   scoped by .mode-dark / .mode-hc further down. */
.entry{ display:grid; grid-template-columns:112px 1fr auto; gap:14px; align-items:baseline;
  padding:12px 0; background:transparent; border-top:1px solid var(--hair-l); font-size:13.5px; }
.entry .ref{ font-family:var(--mono); font-variant-numeric:tabular-nums; letter-spacing:0.03em;
  font-weight:700; color:var(--ink); white-space:nowrap; }
.entry .desc{ color:var(--body-l); line-height:1.55; }
/* Entry timestamp — its OWN class (RESKIN-FIX-009). It must NOT reuse `.ts`,
   which is the trust-strip section class (`.ts{ background:var(--grn-deep) }`
   below): that collision painted every timestamp span with the trust strip's
   dark-green fill + border, meta text dark-on-dark inside it. Transparent, no
   border, meta colour for the light card it sits on. */
.entry .desc .ets{ font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:12px;
  color:var(--meta-l); background:transparent; border:0; display:block; }
.entry .st{ font-size:12px; font-weight:700; white-space:nowrap; }
.st.ok{ color:var(--st-ok); } .st.due{ color:var(--st-action); }
.st.over{ color:var(--st-overdue); } .st.done{ color:var(--st-done); }
@media (max-width:640px){ .entry{ grid-template-columns:1fr auto; } .entry .ref{ grid-column:1 / -1; } }
/* Explicit light ground inside every card type (higher specificity than any
   ground/section rule) — entries stay on card white with ink/body/meta text and
   hairline separators regardless of the enclosing section's dark ground. */
.reg-card .entry, .moment .entry, .reg-panel .entry{ background:transparent; }
.reg-card .entry .ref, .moment .entry .ref, .reg-panel .entry .ref{ color:var(--ink); }
.reg-card .entry .desc, .moment .entry .desc, .reg-panel .entry .desc{ color:var(--body-l); }
.reg-card .entry .desc .ets, .moment .entry .desc .ets, .reg-panel .entry .desc .ets{ color:var(--meta-l); }
/* stacked variant — default inside narrow containers (cards, moments) */
.reg-card .entry, .moment .entry{ grid-template-columns:1fr auto; }
.reg-card .entry .ref, .moment .entry .ref{ grid-column:1; }
.reg-card .entry .st, .moment .entry .st{ grid-column:2; grid-row:1; }
.reg-card .entry .desc, .moment .entry .desc{ grid-column:1 / -1; }

/* ---- S2 technical assurance ---- */
.ta-head{ display:grid; grid-template-columns:1fr 380px; gap:56px; align-items:end; }
@media (max-width:880px){ .ta-head{ grid-template-columns:1fr; } }
/* Three-up cards, all stretched to the tallest by the grid row; each card is a
   flex column so its zones stack and any slack falls to the foot (RESKIN-FIX-010). */
.ta-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:48px; align-items:stretch; }
@media (max-width:880px){ .ta-grid{ grid-template-columns:1fr; } }
.reg-card{ background:var(--card); border:1px solid var(--hair-l); border-radius:8px; padding:22px 24px;
  display:flex; flex-direction:column; }
.reg-card .band{ height:4px; border-radius:2px; width:44px; margin-bottom:16px; }
/* Title zone reserves TWO lines (2.8em = h3 line-height 1.4 x 2) so a one-line
   title (VDI, TR1) does not pull its code/description/entries up above HNTAS's
   two-line title. Guarantees title baselines + description starts align. */
.reg-card .h3{ margin-bottom:4px; min-height:2.8em; }
.reg-card .code{ font-family:var(--mono); font-variant-numeric:tabular-nums; letter-spacing:0.03em;
  font-size:12px; color:var(--meta-l); }
/* Description zone reserves THREE lines (5.1em = line-height 1.7 x 3 — the tallest
   about at desktop width) so the first entry row starts at the same y across the
   three cards regardless of description length. */
.reg-card p.about{ font-size:13.5px; line-height:1.7; margin:10px 0 6px; min-height:5.1em; }
/* Stacked full-width (<=880px): titles/descriptions no longer wrap the two-line
   way, so drop the reservations to avoid odd gaps above the entries. */
@media (max-width:880px){ .reg-card .h3{ min-height:0; } .reg-card p.about{ min-height:0; } }
.photo{ border-radius:8px; overflow:hidden; }
.photo img{ display:block; width:100%; height:100%; object-fit:cover; }

/* ---- S3 day two ---- */
.moments{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:48px; }
@media (max-width:880px){ .moments{ grid-template-columns:1fr; } }
.moment{ background:var(--card); border:1px solid var(--hair-l); border-radius:8px; padding:24px 26px; }
.moment .when{ font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:12px; color:var(--meta-l); }
.moment .h3{ margin:10px 0 8px; color:var(--ink); }
.moment p{ font-size:14px; margin:0 0 14px; color:var(--body-l); }
.moment .entry{ border-top:1px solid var(--hair-l); }
.moment .entry .ref{ color:var(--ink); }
.moment .entry .desc{ color:var(--body-l); }
.moment .entry .desc .ets{ color:var(--meta-l); }
.photo-row{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:24px; }
@media (max-width:640px){ .photo-row{ grid-template-columns:1fr; } }

/* ---- S4 register browser ---- */
.browser-grid{ display:grid; grid-template-columns:320px 1fr; gap:32px; margin-top:44px; align-items:start; }
@media (max-width:880px){ .browser-grid{ grid-template-columns:1fr; } }
.reg-list{ display:flex; flex-direction:column; }
.reg-btn{ display:flex; align-items:center; gap:12px; min-height:48px; padding:10px 14px; border:none;
  background:none; border-top:1px solid var(--hair-l); font-family:var(--sans); font-size:14px;
  color:var(--body-l); cursor:pointer; text-align:left; width:100%; }
.reg-btn:last-child{ border-bottom:1px solid var(--hair-l); }
.reg-btn .dot{ width:10px; height:10px; border-radius:3px; background:var(--band); flex-shrink:0; }
.reg-btn[aria-selected="true"]{ background:var(--card); font-weight:700; color:var(--ink);
  border-left:3px solid var(--band); padding-left:11px; }
.reg-panel{ background:var(--card); border:1px solid var(--hair-l); border-radius:8px; padding:24px 28px; }
.reg-panel .h3{ margin:0; }
.reg-panel .sub{ font-size:13px; color:var(--meta-l); margin:4px 0 16px; }
.reg-panel[hidden]{ display:none; }
/* modes strip */
.modes{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:44px; }
@media (max-width:760px){ .modes{ grid-template-columns:1fr; } }
.mode{ border:1px solid var(--hair-l); border-radius:8px; overflow:hidden; background:var(--card); }
.mode .sample{ padding:20px 24px; }
.mode .sample .row{ display:flex; gap:14px; align-items:baseline; font-size:13px; padding:9px 0; }
.mode .sample .row + .row{ border-top:1px solid; }
.mode .sample .ref{ font-family:var(--mono); font-variant-numeric:tabular-nums; letter-spacing:0.03em; font-weight:700; }
.mode .lab{ padding:12px 24px; border-top:1px solid var(--hair-l); font-size:13px; font-weight:700; color:var(--ink); }
.mode-dark .sample{ background:#10141A; }
.mode-dark .sample .row{ color:#C7CDD6; }
.mode-dark .sample .row + .row{ border-color:#232A34; }
.mode-dark .sample .ref{ color:#F2F4F7; }
.mode-hc .sample{ background:#000000; }
.mode-hc .sample .row{ color:#FFFFFF; }
.mode-hc .sample .row + .row{ border-color:#FFFFFF; }
.mode-hc .sample .ref{ color:#FFD500; }

/* ---- S5 january obligations ---- */
.obl{ display:grid; grid-template-columns:repeat(2,1fr); gap:0 56px; margin-top:36px; }
@media (max-width:760px){ .obl{ grid-template-columns:1fr; } }
.obl-row{ display:grid; grid-template-columns:1fr auto; gap:16px; padding:14px 0;
  border-top:1px solid var(--hair-l); font-size:14.5px; align-items:baseline; }
.obl-row .k{ color:var(--ink); font-weight:700; font-size:16px; }
.obl-row .v{ font-size:13px; color:var(--body-l); font-weight:700; }

/* ---- S6 pricing ---- */
.price-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin:44px auto 0; max-width:780px; }
@media (max-width:760px){ .price-grid{ grid-template-columns:1fr; } }
.price{ border:1px solid var(--hair-l); border-radius:8px; padding:30px 32px; background:var(--card); }
.price.lead{ border:1.5px solid var(--ink); }
.price .tag{ display:inline-block; font-size:12px; font-weight:700; text-transform:uppercase;
  letter-spacing:1.5px; color:var(--grn); background:var(--gold); padding:3px 10px; border-radius:4px; margin-bottom:14px; }
.price .amt{ font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:38px; font-weight:700;
  color:var(--ink); letter-spacing:-1px; }
.price .per{ font-size:14px; color:var(--meta-l); }
.price .sub-amt{ font-size:12.5px; color:var(--meta-l); margin:4px 0 0; }
.price ul{ list-style:none; margin:20px 0 24px; padding:0; }
.price li{ font-size:14px; padding:9px 0; border-top:1px solid var(--hair-l); color:var(--body-l); }
.price .btn{ width:100%; }
.price-note{ font-size:13px; color:var(--meta-l); margin-top:20px; }

/* ---- FAQ (live markup, restyled to paper) ---- */
.faq{ display:grid; grid-template-columns:1fr 1fr; gap:0 56px; margin-top:8px; }
@media (max-width:760px){ .faq{ grid-template-columns:1fr; } }
.faq-item{ padding:24px 0; border-top:1px solid var(--hair-l); }
.faq-item .q{ font-weight:700; font-size:16px; color:var(--ink); margin:0 0 8px; }
.faq-item .a{ font-size:15px; line-height:1.6; color:var(--body-l); margin:0; }

/* ---- closing band ---- */
.closing{ text-align:center; padding:96px 0; }
.closing .h2{ max-width:680px; margin:0 auto; }
.closing .hero-cta{ justify-content:center; margin-top:24px; }

/* ---- trust strip + footer (live markup, restyled) ---- */
.ts{ background:var(--grn-deep); border-top:1px solid var(--hair-d); padding:26px 0; }
.ts-inner{ text-align:center; }
.ts-label{ color:var(--gold); }
.ts-names{ margin:10px 0 0; font-size:13px; line-height:1.7; color:var(--body-d); }
@media (max-width:560px){ .ts-names{ font-size:12.5px; } }

footer{ background:var(--grn-deep); color:var(--body-d); padding:56px 0 40px; }
footer a{ color:var(--body-d); text-decoration:none; }
footer a:hover{ color:#fff; }
.foot-grid{ display:flex; align-items:flex-start; justify-content:space-between; gap:40px; flex-wrap:wrap; }
.foot-brand{ max-width:300px; }
.foot-badge{ display:inline-block; margin-top:18px; }
.foot-badge img{ height:48px; width:auto; display:block; }
.foot-links{ display:flex; gap:48px; flex-wrap:wrap; }
.foot-col h3{ font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:1.5px; color:#fff; margin:0 0 14px; }
.foot-col a{ display:block; font-size:14px; color:var(--body-d); margin-bottom:9px; }
.foot-bottom{ display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-top:48px;
  padding-top:24px; border-top:1px solid var(--hair-d); font-size:13px; color:var(--meta-d); }
.foot-bottom .mono{ color:var(--head-d); }
.foot-ip{ margin:16px 0 0; font-size:12px; line-height:1.6; color:var(--meta-d); }
/* Contracting-entity disclosure, bottom line. Deliberately de-emphasised per CJ
   ruling 31 Jul: 10px / #4A5C52 on --grn-deep = 2.33:1 (below WCAG AA 4.5:1 by
   intent, still above the --hair-d rule at 1.88:1). Real text — selectable,
   findable via in-page search, and announced by screen readers. Do not convert
   to an image or hide it. */
.foot-entity{ margin:14px 0 0; font-size:10px; line-height:1.5; color:#4A5C52; }