@import 'styles.css';

/* Boardverse — component styles.
   Every value below comes from a token. If a rule needs a value the tokens do
   not carry, add the token first.

   Breakpoints appear as literals because a custom property cannot be used in a
   media query condition. They are documented in tokens/spacing.css as
   --bp-nav (1080px), --bp-tablet (900px) and --bp-mobile (560px). Changing one
   means changing both places. */

/* ---------- reset ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-heading);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
}

/* A single visible focus treatment for every interactive element. The
   prototype defined one only for FAQ summaries and tab buttons, so links and
   the brand anchor had no visible keyboard affordance. */
:focus-visible {
  outline: 2px solid var(--accent-marker);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--surface-inverse);
  color: var(--text-inverse);
  padding: var(--sp2) var(--sp3);
  font-size: var(--fs-small);
  font-weight: 500;
  text-decoration: none;
}
.skip-link:focus { left: 0; }

/* ---------- type ---------- */
h1, h2, h3, h4 {
  font-weight: 100;
  letter-spacing: var(--track-tight);
  color: var(--text-heading);
}
h1 { font-size: clamp(40px, 5.5vw, 64px); line-height: var(--lh-display); }
h2 { font-size: clamp(30px, 3.8vw, 44px); line-height: var(--lh-section); margin-bottom: var(--sp3); }
h3 { font-size: var(--fs-h3); font-weight: 400; line-height: var(--lh-heading); }

p { max-width: var(--measure-body); }
strong { font-weight: 500; }

.eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--sp3);
}

.mono { font-family: var(--font-mono); font-weight: 500; }

.lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--text-body);
  max-width: var(--measure-lead);
  margin: var(--sp3) 0;
}

.body-copy { color: var(--text-body); margin-top: var(--sp3); }
.body-copy p + p { margin-top: var(--sp2); }

/* ---------- layout ---------- */
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--sp3); }
section { padding: var(--sp7) 0; }
.block-paper { background: var(--surface-panel); border-top: var(--hair-strong); }

/* ---------- header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(255, 255, 255, 0.94);
  border-bottom: var(--hair-strong);
  backdrop-filter: blur(6px);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp3);
  min-height: var(--sp6);
}

.brand {
  font-size: 20px;
  font-weight: 500;
  letter-spacing: var(--track-tight);
  color: var(--text-heading);
  text-decoration: none;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  flex: none;
}
.brand:hover { color: var(--text-link-hover); }
/* The ring carries less ink than a solid glyph, so it needs slightly more
   height than the wordmark's cap to sit level with it. The header and footer
   marks use the eight-node compact geometry; the fourteen-node ring turns to
   mush below about 48px. */
.logo-mark {
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  flex: none;
  color: currentColor;
  transition: color var(--t-fast);
}

.main-nav ul { display: flex; gap: var(--sp3); list-style: none; }
.main-nav a {
  font-size: 14px;
  font-weight: 400;
  color: var(--text-body);
  text-decoration: none;
  transition: color var(--t-fast);
  white-space: nowrap;
}
.main-nav a:hover { color: var(--text-link-hover); }
.main-nav a[aria-current="page"] { color: var(--text-heading); font-weight: 500; }
.main-nav a[aria-current="page"]::after {
  content: "";
  display: block;
  height: 1px;
  background: var(--text-heading);
  margin-top: 4px;
}

/* The disclosure control. The supplied prototype hides the nav below 900px and
   ships no toggle at all, so a phone reader had the brand link and one button
   and no route to the other nine pages. */
.nav-toggle {
  display: none;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: var(--hair-ink);
  border-radius: var(--radius);
  cursor: pointer;
  color: var(--text-heading);
  align-items: center;
  justify-content: center;
}
.nav-toggle-bars {
  display: block;
  position: relative;
  width: 18px;
  height: 2px;
  background: currentColor;
}
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background: currentColor;
}
.nav-toggle-bars::before { top: -6px; }
.nav-toggle-bars::after { top: 6px; }

.header-cta { flex: none; }

@media (max-width: 1080px) {
  .nav-toggle { display: inline-flex; }
  /* Scoped to .site-header deliberately. A bare .header-cta ties on specificity
     with the .btn rule below and loses on source order, so the button would
     stay visible and overflow the header on a phone. */
  .site-header .header-cta { display: none; }

  .main-nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--surface-page);
    border-bottom: var(--hair-strong);
    padding: var(--sp2) var(--sp3) var(--sp4);
  }
  .site-header.open .main-nav { display: block; }
  .main-nav ul { flex-direction: column; gap: 0; }
  .main-nav li { border-top: var(--hair-strong); }
  .main-nav li:first-child { border-top: none; }
  .main-nav a { display: block; padding: var(--sp2) 0; font-size: var(--fs-answer); }
  .main-nav a[aria-current="page"]::after { display: none; }
  .main-nav .nav-cta {
    display: inline-block;
    margin-top: var(--sp3);
  }
}

@media (min-width: 1081px) {
  /* The CTA inside the disclosure panel is a duplicate of .header-cta, which is
     visible at this width. Hiding it prevents the same action appearing twice. */
  .main-nav .nav-cta { display: none; }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: var(--track-button);
  text-transform: uppercase;
  color: var(--text-heading);
  background: var(--surface-page);
  border: var(--hair-ink);
  border-radius: var(--radius);
  padding: 14px 24px;
  text-decoration: none;
  transition: background var(--t-fast), color var(--t-fast);
}
.btn:hover { background: var(--nude); color: var(--text-heading); }
.btn.solid { background: var(--surface-inverse); color: var(--text-inverse); }
.btn.solid:hover { background: var(--charcoal); color: var(--text-inverse); }
.btn.nude { background: var(--nude); border-color: var(--nude); color: var(--text-heading); }

.cta-row { display: flex; flex-wrap: wrap; gap: var(--sp2); margin-top: var(--sp4); }

/* ---------- hero ---------- */
.hero { padding: var(--sp7) 0 var(--sp6); border-bottom: var(--hair-strong); }

/* Flat brand-colour hero for pages with no photography, so an image-free page
   reads as a deliberate choice rather than a missing asset. */
.hero.stage { position: relative; overflow: hidden; background: var(--surface-panel); }
.hero.stage .wrap { position: relative; z-index: 1; }
.hero.stage .stage-mark {
  position: absolute;
  right: -70px;
  top: 50%;
  transform: translateY(-50%);
  width: 380px;
  height: 380px;
  color: var(--accent-mark);
  opacity: 0.14;
  pointer-events: none;
  z-index: 0;
}
@media (max-width: 900px) {
  .hero.stage .stage-mark { width: 240px; height: 240px; right: -80px; opacity: 0.1; }
}

.accent-mark {
  display: block;
  width: 56px;
  height: 56px;
  color: var(--accent-mark);
  margin-bottom: var(--sp3);
}

/* ---------- stats ---------- */
.stats { border-bottom: var(--hair-strong); background: var(--surface-panel); }
.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp4); padding: var(--sp6) 0; }
.stat .num {
  font-family: var(--font-mono);
  font-size: var(--fs-stat);
  font-weight: 500;
  color: var(--text-heading);
  line-height: 1;
  font-feature-settings: "tnum";
}
.stat .num sup { font-size: 28px; }
.stat .desc { margin-top: var(--sp2); color: var(--text-muted); font-size: var(--fs-small); }
.stat .src { margin-top: var(--sp1); color: var(--text-caption); font-size: var(--fs-caption); font-family: var(--font-mono); }

/* Three figures side by side invite a reader to treat them as one population.
   The first uses the GOV.UK Professional and Business Services grouping and the
   third uses the ONS classification for professional, scientific and technical
   activities, which are related but not the same. The note says so. */
.stats-note {
  margin: 0 0 var(--sp6);
  padding-top: var(--sp3);
  border-top: var(--hair-strong);
  color: var(--text-muted);
  font-size: var(--fs-caption);
  max-width: var(--measure-body);
}

/* ---------- cards and panels ---------- */
.card { border-top: var(--hair-cool); padding-top: var(--sp3); }
.card + .card { margin-top: var(--sp4); }
.card p { color: var(--text-body); margin-top: var(--sp1); }

.panel { background: var(--surface-panel); padding: var(--sp4); }
.panel.accent { background: var(--surface-accent); }
.panel.outline { border: var(--hair-strong); background: var(--surface-page); }
.panel + .panel { margin-top: var(--sp3); }
.panel p { margin-top: var(--sp2); color: var(--text-body); }

.two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp5); }
.col ul { list-style: none; }
.col ul li {
  padding: var(--sp2) 0;
  border-top: var(--hair-strong);
  color: var(--text-body);
  font-size: var(--fs-answer);
}
.col ul li b { color: var(--text-heading); font-weight: 500; }
.col > h3 { margin-bottom: var(--sp2); }

/* ---------- numbered features ---------- */
.feature {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--sp3);
  padding: var(--sp4) 0;
  border-top: var(--hair-strong);
}
/* Charcoal, not taupe. Taupe at 20px measures 2.92:1 here, and the brand
   guidelines restrict it to display sizes. The mono face and the size already
   separate the numeral from the heading; it does not need the accent to read as
   a marker. Same reasoning as the FAQ tab counts. */
.feature .n { font-family: var(--font-mono); font-size: 20px; font-weight: 500; color: var(--text-body); }
.feature h3 { margin-bottom: var(--sp1); }
.feature p { color: var(--text-body); }

/* ---------- module grid ---------- */
.module-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp3); }
.module { border-top: var(--hair-cool); padding-top: var(--sp2); font-size: var(--fs-small); color: var(--text-body); }

.module-group + .module-group { margin-top: var(--sp5); }
.module-group > h3 {
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--sp2);
}

/* ---------- pricing ---------- */
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp3); }
.price { background: var(--surface-panel); padding: var(--sp4); }
.price .amt { font-family: var(--font-mono); font-size: var(--fs-price); font-weight: 500; color: var(--text-heading); font-feature-settings: "tnum"; }
.price .per { font-size: var(--fs-small); color: var(--text-muted); }
.price ul { list-style: none; margin-top: var(--sp3); }
.price ul li { padding: var(--sp1) 0; border-top: var(--hair-strong); font-size: var(--fs-small); color: var(--text-body); }

/* ---------- pull quote ---------- */
.quote {
  font-family: var(--font-serif-quote);
  font-style: italic;
  font-size: var(--fs-quote);
  line-height: 1.35;
  color: var(--text-heading);
  max-width: 60ch;
  margin: var(--sp4) 0;
}

/* ---------- legal pages ---------- */
.legal ol { list-style: none; counter-reset: item; }
.legal > ol > li { margin-top: var(--sp4); counter-increment: item; }
.legal > ol > li > h3 { font-weight: 500; }
/* Charcoal for the same reason as .feature .n: this is a clause number a reader
   has to be able to cite, not decoration, and taupe fails contrast at h3 size. */
.legal > ol > li > h3::before { content: counter(item) ". "; color: var(--text-body); }
.legal ol ol { list-style: none; margin-top: var(--sp2); }
.legal ol ol li { padding: var(--sp1) 0; border-top: var(--hair-strong); color: var(--text-body); font-size: var(--fs-answer); }
.legal ol ol li::before { content: attr(data-n) ". "; font-family: var(--font-mono); color: var(--text-muted); }
.legal-note {
  margin-top: var(--sp4);
  padding: var(--sp3);
  background: var(--surface-accent);
  border-left: 3px solid var(--accent-mark);
  font-size: var(--fs-small);
  color: var(--text-body);
  max-width: var(--measure-body);
}

/* ---------- FAQ disclosure ---------- */
.faq { margin-top: var(--sp5); padding-top: var(--sp4); border-top: var(--hair-strong); }
.faq h3 { margin-bottom: var(--sp3); }
.faq-group { display: flex; flex-direction: column; }
.faq-group details { border-top: var(--hair-strong); padding: var(--sp3) 0; }
.faq-group details:first-child { border-top: none; padding-top: 0; }
.faq-group details[open] { padding-bottom: var(--sp3); }
.faq-group summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp3);
  font-size: var(--fs-body);
  font-weight: 500;
  color: var(--text-heading);
  transition: color var(--t-fast);
}
.faq-group summary::-webkit-details-marker { display: none; }
.faq-group summary:hover { color: var(--text-link-hover); }
.faq-icon {
  flex: none;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 24px;
  line-height: 1;
  color: var(--accent-marker);
  transition: transform var(--t-slow);
}
/* Rotating a "+" 45 degrees into a "×" animates, where swapping the character
   for "−" cannot. The prototype declared a transform transition on a rule that
   changed content instead, so the transition never ran. */
.faq-group details[open] .faq-icon { transform: rotate(45deg); }
.faq-group .answer {
  margin-top: var(--sp2);
  color: var(--text-body);
  font-size: var(--fs-answer);
  line-height: var(--lh-answer);
  max-width: var(--measure-answer);
}
.faq-group .answer p + p { margin-top: var(--sp2); }

.link-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp1);
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-heading);
  text-decoration: none;
  border: var(--hair-strong);
  padding: 10px 16px;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.link-pill:hover { background: var(--surface-panel); border-color: var(--border-strong); }

/* ---------- FAQ tabs ---------- */
.tabs { margin-top: var(--sp5); }
.tablist { display: flex; flex-wrap: wrap; gap: 0; border-top: var(--hair-strong); border-bottom: var(--hair-strong); }
.tablist button {
  flex: 1 1 auto;
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: 400;
  color: var(--text-muted);
  background: transparent;
  border: 0;
  border-right: var(--hair-strong);
  padding: var(--sp3) var(--sp2);
  text-align: left;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
  border-radius: var(--radius);
}
.tablist button:last-child { border-right: 0; }
.tablist button:hover { background: var(--surface-panel); color: var(--text-heading); }
.tablist button[aria-selected="true"] { color: var(--text-heading); font-weight: 500; background: var(--surface-accent); }
.tablist .tab-count { display: block; font-family: var(--font-mono); font-size: var(--fs-eyebrow); font-weight: 500; color: var(--text-caption); margin-top: 4px; }
/* Not taupe. Taupe at 12px on the nude wash measures 1.8:1, and the brand
   guidelines restrict taupe to display sizes for exactly this reason. The
   active tab is already signalled by ink text, weight 500 and the wash. */
.tablist button[aria-selected="true"] .tab-count { color: var(--text-body); }

.tabpanels { margin-top: var(--sp4); }
.tabpanel[hidden] { display: none; }
.tabpanel > header { margin-bottom: var(--sp3); }
.tabpanel > header h3 { margin-bottom: 4px; }
.tabpanel > header p { margin: 0; color: var(--text-body); font-size: var(--fs-small); }

/* ---------- closing call to action ---------- */
.cta-banner { background: var(--surface-panel); border-top: var(--hair-strong); }
.cta-banner p { color: var(--text-body); margin-top: var(--sp3); }

/* ---------- 404 ---------- */
.notfound { padding: var(--sp7) 0; }
.notfound .code { font-family: var(--font-mono); font-size: var(--fs-stat); font-weight: 500; color: var(--accent-mark); line-height: 1; }
.notfound ul { list-style: none; margin-top: var(--sp4); }
.notfound ul li { padding: var(--sp2) 0; border-top: var(--hair-strong); }
.notfound ul a { color: var(--text-heading); text-decoration: none; font-size: var(--fs-answer); }
.notfound ul a:hover { color: var(--text-link-hover); }

/* ---------- footer ---------- */
.site-footer { border-top: var(--hair-strong); background: var(--surface-panel); padding: var(--sp5) 0; }
.foot { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--sp4); }
.foot a { display: block; color: var(--text-body); text-decoration: none; font-size: var(--fs-small); padding: 4px 0; }
.foot a:hover { color: var(--text-link-hover); }
.foot .tagline { margin-top: var(--sp2); color: var(--text-muted); font-size: var(--fs-small); max-width: 44ch; }
.foot h4 { font-size: var(--fs-eyebrow); font-weight: 500; letter-spacing: var(--track-eyebrow); text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--sp1); }
.legal-line { margin-top: var(--sp4); color: var(--text-caption); font-size: var(--fs-caption); }
.legal-line a { display: inline; color: var(--text-caption); }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  section { padding: var(--sp6) 0; }
  .hero { padding: var(--sp6) 0 var(--sp5); }
  .stats-grid, .price-grid, .module-grid { grid-template-columns: 1fr 1fr; }
  .two { grid-template-columns: 1fr; gap: var(--sp4); }
  .foot { grid-template-columns: 1fr; }
  .tablist button { flex: 1 1 50%; border-bottom: var(--hair-strong); }
  .tablist button:nth-child(2n) { border-right: 0; }
}

@media (max-width: 560px) {
  body { font-size: var(--fs-answer); }
  .stats-grid, .price-grid, .module-grid { grid-template-columns: 1fr; }
  .cta-row .btn { width: 100%; text-align: center; }
  .tablist button { flex: 1 1 100%; border-right: 0; }
  .feature { grid-template-columns: 1fr; gap: var(--sp1); }
}