/*
 * The site's own style decisions, layered over the design system.
 *
 * tokens.css, chrome.css, components.css, content.css and forms.css are
 * generated from _extra/design system by tools/extract-assets.mjs and are not
 * edited by hand: regenerating them would undo the change. Anything this site
 * decides differently lives here instead, and this file loads last on every
 * page (see _Layout.cshtml).
 *
 * The palette and the three typefaces are the approved v2.0 direction and are
 * kept. What is taken away is the ornament that reads as template work: glows,
 * gradient washes and grid textures, decorative circles, tilted backing cards,
 * hover lifts and shines, dash-and-caps labels above every heading, and very
 * large corner radii. Restraint is the point: this is a site people trust with
 * their personal details.
 */

/* ---- Shape: smaller radii, lighter shadows ---- */
:root {
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 12px;
  --radius-hero: 0;
  --shadow-md: 0 1px 3px rgba(2, 6, 23, 0.08);
  --shadow-lg: 0 2px 8px rgba(2, 6, 23, 0.08);
}

/* ---- Buttons: flat, no glow, no shine, no lift ---- */
.button::after { display: none; }
.button:hover, .button:active { transform: none; }
.button-primary, .button-primary:hover { background: var(--gold); box-shadow: none; }
.button-primary:hover { background: #f7bf5f; }

/* ---- Labels: a quiet sentence-case line, not a dash and spaced capitals ---- */
.eyebrow, .feature-label {
  gap: 0;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
.eyebrow::before, .feature-label::before, .hero .eyebrow::before { display: none; }
.brand-tagline { display: none; }
.step-number, .content-number { letter-spacing: 0; text-transform: none; }

/* ---- Backgrounds: flat navy and paper, no washes, textures or circles ---- */
.hero { background: var(--navy-900); border-radius: 0; }
.hero::before, .hero::after { display: none; }
.how-section::before, .free-card::before, .closing-card::before, .feature-visual::before { display: none; }
.how-section { background: var(--navy-900); }
.free-card, .closing-card, .feature-visual { background: var(--navy-900); border-radius: var(--radius-lg); }
.inside-section::before { display: none; }
.content-card::after, .step-card::after { display: none; }
.report-shell::before, .report-shell::after, .comparison-shell::before { display: none; }
.site-footer { border-radius: 0; }

/* ---- Cards: no hover lift, no number-and-icon-tile header ---- */
.content-card { min-height: 0; border-radius: var(--radius-lg); background: var(--white); transition: none; }
.content-card:hover { transform: none; box-shadow: none; border-color: var(--line); }
.content-number { display: none; }
.content-icon { width: auto; height: auto; margin-top: 0; place-items: start; background: none; border-radius: 0; color: var(--blue-700); }
.content-card h3 { margin-top: 12px; }
.content-card p { font-size: 0.9rem; }
.step-card { border-radius: var(--radius-lg); }

/* ---- Motion: content is simply there, rather than fading and sliding in on scroll ---- */
.js .reveal, .js .reveal.in-view { opacity: 1; transform: none; transition: none; }

/* ---- Moved from the generated stylesheets, where they had been edited by hand ---- */

/* Pages with no dark hero (the report, the order steps) put the header in
   the flow on a solid ground, instead of over the top of the page where
   its white text vanishes and it catches clicks meant for the content. */
.solid-header .site-header { position: relative; top: auto; background: var(--navy-900); }

/* Agency logos. Heights are set per logo so the three look the same size:
   Equifax is a bare wordmark, the other two carry a symbol above the name. */
.agency-logo { display: block; width: auto; height: 22px; }
.agency-logo--equifax { height: 15px; transform: translateY(15%); }
/* TransUnion's "tu" mark sits above the end of its wordmark, so centring the
   box puts the word itself low; lift it to line up with the other two. */
.agency-logo--transunion { transform: translateY(-18%); }
.agency-logo-name { font-weight: 700; }

/* The logos on the dark order card sit on a light strip; they are not made for a dark ground. */
.start-agencies { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-around; gap: 14px 18px; margin: 18px 0 0; padding: 14px 16px; border-radius: 8px; background: var(--white); }

/* Form fields keep their natural height and align to the top of their grid
   row, rather than stretching to the tallest field beside them. */
.ds-field { align-content: start; }

/* ---- Type: the hero heading is a sentence now, not three slogans, so it is
   set smaller and looser to read as one ---- */
.hero h1 { font-size: clamp(2.4rem, 4.6vw, 3.7rem); line-height: 1.08; letter-spacing: -0.02em; }
@media (max-width: 700px) {
  .hero h1 { font-size: clamp(2.1rem, 9vw, 2.8rem); }
}

/* Grid columns default to min-width:auto, so the agency comparison table
   (which scrolls inside its own wrapper) was widening its column, and the
   whole section, past the edge of a phone screen. */
.why-grid > *, .feature-row > *, .transparent-grid > * { min-width: 0; }

/* The feature labels were gold on paper: too faint to read, and gold is the
   one commercial accent. Blue is the system's colour for this kind of marker. */
.feature-label { color: var(--blue-700); }

/* There is no disclosure bar above the header any more, so the header sits at
   the top of the page at every width (chrome.css offsets it by the bar's height). */
.site-header { top: 0; }


/* The Total Credit Check logo (Views/Shared/_Brand.cshtml). The SVG is
   432 by 49, so height alone sizes it. */
.brand-logo { display: block; width: auto; height: 34px; }
@media (max-width: 700px) {
  .brand-logo { height: 26px; }
}
.sticky-mark { flex: 0 0 auto; width: 36px; height: 36px; }

/* The current page in the main navigation: white, with the underline held. */
.nav-links a[aria-current="page"] { color: var(--white); }
.nav-links a[aria-current="page"]::after { right: 0; }

/* The pre-launch homepage (Views/Home/PreLaunch): its hero panel holds two
   ways in, where the help-centre hub has its search box. */
.prelaunch-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }

/* Short codes in policy text, such as the order reference prefix. */
.prose-mono { font-family: var(--mono); font-size: .92em; }

/* The free directorship check (Views/DirectorshipCheck): the order form's
   fields inside the prose column, and each matching officer record as a card. */
.dircheck .start-form { margin: var(--space-4) 0 var(--space-8); }
.dircheck .start-form ul { margin: 0; }
.dircheck .ds-field select { width: 100%; }
/* The prose column's tall line height would make the text boxes taller than the month list. */
.dircheck .ds-field input { line-height: normal; }
.dircheck-results { margin-bottom: var(--space-8); }
.dircheck-results:focus { outline: none; }
.dircheck-outcome { font-size: 1.1rem; }
.dircheck-match { margin: var(--space-5) 0; padding: var(--space-5); border: 1px solid var(--line, #dfe5ee); border-radius: 12px; background: var(--white); }
.dircheck-match h3 { margin-top: 0; }
.dircheck-meta { margin: 0 0 var(--space-3); color: var(--body); font-size: .95rem; }
.dircheck-small { color: var(--body); font-size: .88rem; }