/* theme-bridge.css — the join between the SaasoX template and this site.
   ---------------------------------------------------------------------------
   Loaded LAST, after style.css, so it wins where the two overlap.

   WHAT IT IS FOR. style.css is a complete design system for a SaaS marketing
   template. It has no idea this site's real content is a three-step enquiry
   form, and it has no styles for the classes that form is built from — .field,
   .wizard__*, .choice — because those classes are ours. Without this file the
   form renders as unstyled browser defaults inside a beautifully styled page.

   WHAT IT IS NOT FOR. It is not a recolour. The template's purple/lime is
   still here on purpose: the brief was to port the stylesheet faithfully
   first and judge it, so nothing below overrides --theme-color-* or the
   hardcoded #551DFF/#D324A8 gradients. Recolouring to brand is a second pass
   and is a find-and-replace over ~30 rules in style.css, not a patch here.

   WORTH KNOWING BEFORE THAT PASS: this site's palette carries measured
   contrast ratios (src/styles/tokens.css) and the template's does not. Two
   things break if the purple stays — the "green means go" rule that reserves
   green for the one action worth taking, and the AA ratios on button text.
   Both are recorded rather than quietly accepted.

   ORDER OF BUSINESS BELOW: the bits of site chrome the template has no
   equivalent for, then the form, then the shared button classes that the
   consent card and the sticky CTA also use.
   =========================================================================== */

/* Brand tokens, for the few values below that should follow the palette
   rather than the template. Imported rather than duplicated so there is still
   one definition of the brand colours. */
@import url('/theme/css/tokens-bridge.css');

/* ---------------------------------------------------------------------------
   1. Accessibility primitives
   style.css has neither, and both are load-bearing.
   --------------------------------------------------------------------------- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* THE SPAM HONEYPOT. This rule is load-bearing and its absence is silent.

   src/components/EnquiryForm.astro renders a `.hp` div holding a real, labelled
   text input reading "Leave this field empty". api-src/_lib/security.ts rejects
   any submission where it is filled, and does so WITHOUT surfacing an error —
   which is right for a bot and catastrophic for a person. Its off-screen
   positioning lived in base.css and died with it, so for a while the field was
   simply on the page: 616x65px of visible input between the phone field and the
   consent line, on the last screen before submit. Anyone who read the label and
   typed in it had their enquiry dropped on the floor.

   `left: -9999px` rather than the `clip` used by .visually-hidden below: some
   bots ignore clipped-but-onscreen fields, and this one is meant to be found by
   them and by nothing else. tabindex="-1" and aria-hidden already keep keyboard
   and screen-reader users away; this is what keeps sighted mouse users away.

   test/page-contract.test.mjs asserts it stays hidden. */
.hp {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -3rem;
  z-index: 100;
  background: #fff;
  color: var(--heading-color);
  padding: 0.5rem 1rem;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  text-decoration: none;
  transition: top 0.12s ease;
}
.skip-link:focus {
  top: 1rem;
}

/* The template sets no visible focus ring anywhere. On a page carrying a form
   that is a genuine defect, not a style choice. */
:focus-visible {
  outline: 3px solid var(--theme-color-2);
  outline-offset: 2px;
}

/* ON THE DARK BANDS the brand blue ring is 2.21:1 against the navy — below the
   3:1 WCAG 1.4.11 minimum for a non-text indicator, which makes the focus ring
   effectively invisible exactly where the footer's links and the CTA band's
   buttons live. White clears it outright at 11.84:1. */
.cs_page_heading :focus-visible,
.cs_cta_band :focus-visible,
.cs_counter :focus-visible,
.cs_footer :focus-visible,
.band--ink :focus-visible {
  outline-color: #fff;
}

/* ---------------------------------------------------------------------------
   2. Site chrome the template has no equivalent for
   --------------------------------------------------------------------------- */

/* Parent-brand bar above the header. */
.ryc_brandbar {
  background: var(--heading-color);
  color: #fff;
  font-family: var(--body-font);
  font-size: 14px;
}
.ryc_brandbar_in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 38px;
}
.ryc_brandbar p {
  margin: 0;
}
.ryc_brandbar a {
  color: #fff;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ryc_brandbar_aside {
  opacity: 0.72;
}
@media (max-width: 575px) {
  .ryc_brandbar_aside {
    display: none;
  }
}

/* THE LOGO. Concept 1 from the 2026 deck, in place of the wordmark that stood
   in while this product had no logo file.

   The two brand colours are custom properties rather than baked into the SVG
   so one copy of the artwork serves both grounds: the header is white and
   wants the navy, the footer is dark and wants white. These are the deck's
   own values and deliberately NOT the site's --color-accent (#0088CC) — the
   logo's blue is #3777D3 and a logo that drifts to match its surroundings
   stops being a logo. Repoint them here if the palettes are ever unified. */
.ryc_logo {
  /* The colours are NOT set here. They live in each path's var() fallback in
     Logo.astro, because a custom property set on .ryc_logo itself would beat
     one inherited from an ancestor — .ryc_footer_brand could then never
     repaint the mark. Defaults in the fallback, overrides on any ancestor. */
  display: block;
  width: auto;
  /* Height, not width: the lockup and the mark have very different aspect
     ratios, and every slot on this site is height-constrained. */
  height: var(--ryc-logo-height, 34px);
}

.ryc_brand {
  display: grid;
  /* justify-items, because a grid item defaults to stretch and would blow the
     SVG out to the column width, ignoring its own aspect ratio. */
  justify-items: start;
  gap: 3px;
  line-height: 1.15;
  text-decoration: none;
}
.ryc_brand_by {
  font-family: var(--body-font);
  font-size: 12px;
  color: var(--body-color);
  /* Sits under the wordmark's left edge, which starts one mark-width in. The
     indent lines it up with "REGISTER" rather than with the glyph. */
  padding-left: 2px;
}
@media (max-width: 400px) {
  /* Narrowest phones: the header row is brand + burger and nothing else, so
     the lockup keeps its wordmark and just loses 4px of height. Checked at
     320px, where the burger still clears it. */
  .ryc_brand .ryc_logo {
    --ryc-logo-height: 30px;
  }
}

/* The landline, in the brand bar. It sat in the header row until the header
   turned out to already be at its width with six menu items and a CTA — see
   the note in ThemeLayout. */
.ryc_brandbar_tel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  /* A real target on a phone, without stretching the 38px bar on desktop. */
  min-height: 38px;
}
.ryc_brandbar_tel:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}
.ryc_brandbar_aside {
  display: inline-flex;
  align-items: center;
  gap: 18px;
}
@media (max-width: 767px) {
  /* The stat is reinforcement; the number is the point. */
  .ryc_brandbar_stat {
    display: none;
  }
}

/* THE MONEY-BACK CLAUSE, under the two pricing cards. A band rather than a
   third card: it is not a third option to weigh up, it is a condition attached
   to the two above it, and a card would invite the reader to compare it with
   them. The brand-blue left edge is the only thing marking it out — a tinted
   panel here would be the fourth background in one section. */
.ryc_guarantee {
  margin-top: 34px;
  padding: 26px 28px;
  background: var(--white-color, #fff);
  border: 1px solid var(--border-color);
  border-left: 4px solid var(--color-accent-strong, #0071a8);
  border-radius: 20px;
}
@media (max-width: 575px) {
  .ryc_guarantee {
    padding: 22px 20px;
  }
}

.ryc_footer_brand {
  display: block;
  /* The footer ground is --heading-color, so the navy half of the mark would
     vanish into it. White ink, brand blue kept: the accent has enough contrast
     on the dark ground to stay legible and is the only colour in the footer. */
  --ryc-logo-ink: #fff;
  --ryc-logo-height: 42px;
}
.ryc_footer_muted {
  opacity: 0.75;
}
/* A <button>, not an <a href="#">: it opens something in the page rather than
   navigating. Styled as a footer link so the column still reads as one list. */
.ryc_footer_control {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

/* ---------------------------------------------------------------------------
   3. The enquiry form
   The reason this file exists. Every class here is ours; style.css has no
   opinion on any of them, so these are definitions rather than overrides.
   --------------------------------------------------------------------------- */

.ryc_form_card {
  background: #fff;
  border-radius: 20px;
  padding: 40px;
  box-shadow: 0 24px 60px rgba(26, 26, 46, 0.12);
}
@media (max-width: 575px) {
  .ryc_form_card {
    padding: 24px 20px;
  }
}

.form__heading {
  font-size: 26px;
  margin-bottom: 6px;
}
.form__intro {
  color: var(--body-color);
  margin-bottom: 24px;
}

/* ---- Progress ---- */
.wizard__progress {
  margin-bottom: 24px;
}
.wizard__progress-label {
  display: block;
  font-family: var(--heading-font);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--body-color);
  margin-bottom: 8px;
}
.wizard__progress-track {
  display: block;
  height: 6px;
  border-radius: 100px;
  background: var(--gray-color-2);
  overflow: hidden;
}
.wizard__progress-bar {
  display: block;
  height: 100%;
  border-radius: 100px;
  /* The same gradient scripts/recolour-theme.mjs writes into style.css. Kept
     as literals rather than var()s because the template hardcodes it there
     too — if the brand blue ever moves, both change in that one script. */
  background: linear-gradient(245deg, #0071a8 -67.04%, #0b4f86 129.05%);
  transition: width 0.3s ease;
}

/* ---- Steps ---- */
.wizard__step {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}
.wizard__legend {
  font-family: var(--heading-font);
  font-weight: 700;
  font-size: 22px;
  color: var(--heading-color);
  padding: 0;
  margin-bottom: 18px;
}

.wizard__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

/* ---- Fields ---- */
.field {
  margin-bottom: 18px;
}
.field label {
  display: block;
  font-family: var(--heading-font);
  font-weight: 600;
  font-size: 15px;
  color: var(--heading-color);
  margin-bottom: 8px;
}
.field input,
.field select,
.field textarea {
  width: 100%;
  max-width: 100%;
  font-family: var(--body-font);
  /* 16px minimum: anything smaller makes iOS Safari zoom the viewport on
     focus, and this form is mobile-first. */
  font-size: max(16px, 1rem);
  color: var(--heading-color);
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--theme-color-2);
  box-shadow: 0 0 0 3px rgba(115, 65, 241, 0.15);
  outline: none;
}
.field input::placeholder {
  color: #a6adbb;
}

/* Native invalid styling fires on empty required fields before anyone has
   typed, so this is scoped to fields the island has actually marked. */
.field input[aria-invalid='true'],
.field select[aria-invalid='true'] {
  border-color: var(--color-danger);
}

.field__error {
  display: block;
  margin-top: 6px;
  color: var(--color-danger);
  font-size: 14px;
  font-weight: 700;
}
.field__hint {
  display: block;
  margin-top: 6px;
  color: var(--body-color);
  font-size: 14px;
}
/* A hint is muted body text, so a link inside one inherits that grey and
   reads as prose. The non-EU signpost under the country select is the whole
   reason a visitor with the wrong vehicle leaves this form usefully rather
   than confused, so it has to look clickable — colour AND underline, not
   colour alone. */
.field__hint a {
  color: var(--theme-color-2);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.field-row--pair {
  display: grid;
  gap: 0 18px;
}
@media (min-width: 576px) {
  .field-row--pair {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---- Radio groups ---- */
.subq {
  border: 0;
  padding: 0;
  margin: 0 0 18px;
  min-width: 0;
}
.subq legend {
  font-family: var(--heading-font);
  font-weight: 600;
  font-size: 15px;
  color: var(--heading-color);
  padding: 0;
  margin-bottom: 8px;
}
.subq__hint {
  margin: 0 0 10px;
  font-size: 14px;
  color: var(--body-color);
}
.choices {
  display: grid;
  gap: 10px;
}
.choice {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: var(--gray-color-1);
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.choice:hover {
  border-color: var(--theme-color-2);
}
.choice input {
  accent-color: var(--theme-color-2);
  width: 18px;
  height: 18px;
  flex: none;
}
.choice:has(input:checked) {
  border-color: var(--theme-color-2);
  background: #fff;
}

/* ---------------------------------------------------------------------------
   4. Shared button classes
   Used by the form, the consent card and the sticky mobile CTA — all three are
   Astro components written against these names, so they are defined here
   rather than rewritten in cs_ classes at every call site.
   --------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--heading-font);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1em;
  padding: 19px 30px;
  border: 1px solid transparent;
  border-radius: 100px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.4s ease;
}
.btn:not(.btn--noarrow)::after {
  content: '\f061'; /* fa-arrow-right */
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 0.85em;
  transition: transform 0.3s ease;
}
.btn:not(.btn--noarrow):hover::after {
  transform: translateX(4px);
}

/* Matches .cs_btn.cs_style_1.cs_bg_1 after the recolour, so a .btn and a
   cs_btn sitting side by side are the same object. White on both ends of this
   gradient clears AA — 5.35:1 and 8.48:1; the guard in the recolour script
   is what keeps that true. */
.btn--primary,
.btn--go {
  background: linear-gradient(245deg, #0071a8 -67.04%, #0b4f86 129.05%);
  color: #fff;
}
.btn--primary:hover,
.btn--go:hover {
  background: linear-gradient(245deg, #0b4f86 -77.04%, #0071a8 119.05%);
  color: #fff;
}

.btn--ghost {
  background: transparent;
  color: var(--heading-color);
  border-color: var(--heading-color);
}
.btn--ghost:hover {
  background: var(--heading-color);
  color: #fff;
}

/* In-flight state. `aria-busy` rather than `disabled`: disabling the focused
   button moves focus to <body>, which strands a screen-reader user mid-submit. */
.btn[aria-busy='true'] {
  pointer-events: none;
  opacity: 0.75;
}

/* ---------------------------------------------------------------------------
   5. Small layout helpers used by the rebuilt page
   --------------------------------------------------------------------------- */
.ryc_hero_form_col {
  position: relative;
  z-index: 2;
}

/* The template's own list marker, for feature lists in our content. */
.ryc_ticks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.ryc_ticks li {
  position: relative;
  padding-left: 30px;
  color: var(--body-color);
}
.ryc_ticks li::before {
  content: '\f00c'; /* fa-check */
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 1px;
  color: var(--green-color);
}
.ryc_ticks--excluded li::before {
  content: '\f068'; /* fa-minus */
  color: var(--body-color);
}

/* ---------------------------------------------------------------------------
   6. Hero
   .cs_hero.cs_style_1 is `padding: 0 15px` — the template's own heroes carry
   their height in a variant class (cs_style_2 is `264px 0 510px`) built for a
   centred column of text. Ours holds the enquiry form in a second column and
   needs a workable band rather than a tall one.
   --------------------------------------------------------------------------- */
/* TWO CLASSES, NOT ONE. style.css sets `.cs_hero.cs_style_1 { padding: 0 15px }`
   at specificity (0,2,0); a bare `.ryc_hero` is (0,1,0) and lost, so the hero
   was rendering with NO vertical padding whatsoever — the headline started
   flush against the header. Matching the template's specificity is what makes
   this rule apply at all. */
.cs_hero.ryc_hero {
  padding: 96px 0 110px;
  /* DARK TEAL, AND THE CARD IS STILL THE BRIGHTEST THING IN THE BAND.
     This band was a near-white tint because the template's own hero photograph
     competed with the white enquiry card. The backdrop that replaced it
     (theme-images/header-background.jpg, 8 Sep 2026) does not have that
     problem, and settles it from the other direction: it is a subjectless
     radial vignette running #105369 at its centre to near-black at the edges,
     so the white card is now the only light object in the band rather than the
     brightest of several. Nothing in it has an edge that can collide with type.

     THE COLOUR IS NOT A FALLBACK, IT IS THE FLOOR. Every piece of text in this
     band is light (see the block below), so if the image were slow, cached out
     or 404ing, a default white ground would render the whole pitch invisible.
     #113746 is the image's own mean, painted first and unconditionally, so the
     band is legible before — and without — the image.

     BORDER DROPPED. It separated one light band from the next; a dark band
     against the white section under it needs no help, and a light hairline
     there reads as a stray rule. */
  background-color: #113746;
  background-image: url('../img/ryc/hero-background.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* The pitch column only. The form card lives in the other column and stays on
   white with its own dark type — scoping to .cs_hero_text is what keeps the
   two apart, so nothing here can leak into a label or an input.

   SET ON THE COLUMN, NOT ON A LIST OF CLASSES. The first version of this named
   the title, the lede and the ticks, which is every element that was in the
   hero that afternoon — and left the "Would rather talk to somebody?" note and
   the My Car Import line beneath it at #555 on #113746, a contrast of 1.14:1.
   They carry no colour of their own, so they inherit: colouring the container
   catches them, and catches the next thing added here too.

   Not pure white. The body copy reads as secondary to the headline; 82% over
   this ground is ~6:1, comfortably past AA. */
.ryc_hero .cs_hero_text {
  color: rgba(255, 255, 255, 0.82);
}
/* The two that set a colour of their own, which inheritance cannot reach. */
.ryc_hero .cs_hero_text .cs_hero_desc,
.ryc_hero .cs_hero_text .ryc_ticks li {
  color: rgba(255, 255, 255, 0.82);
}
.ryc_hero .cs_hero_text .cs_hero_title,
.ryc_hero .cs_hero_text .cs_hero_subtitle,
.ryc_hero .cs_hero_text strong {
  color: #fff;
}
/* The template gives links `color: inherit`, so the phone number now takes the
   82% body tint and stops reading as a link at all. Full white plus the
   underline is what puts it back. */
.ryc_hero .cs_hero_text a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
}
/* The eyebrow's star ships as a blue-gradient SVG (#0B4F86 → #0071A8), which
   on this ground is 1.6:1 — present in the markup and invisible on screen.
   It is an <img>, so `color` cannot reach it. brightness(0) crushes it to
   black whatever its gradient, invert(1) lifts that to white: a deterministic
   recolour that needs no second copy of the file to drift out of sync. */
.ryc_hero .cs_hero_text .cs_hero_subtitle img {
  filter: brightness(0) invert(1);
  opacity: 0.9;
}
@media (max-width: 1199px) {
  .cs_hero.ryc_hero {
    padding: 64px 0 80px;
  }
}
@media (max-width: 767px) {
  .cs_hero.ryc_hero {
    padding: 40px 0 56px;
  }
}
.ryc_hero .cs_hero_title {
  margin-bottom: 20px;
}

/* ---------------------------------------------------------------------------
   7. Mobile drawer
   The template's drawer opens from the top of the header and its first item
   lands under the branding. That is invisible in the demo because the demo's
   logo is a short image; ours is a two-line wordmark, so the first menu item
   sat behind "by My Car Import".
   --------------------------------------------------------------------------- */
@media (max-width: 1199px) {
  .cs_nav .cs_nav_list {
    padding-top: 26px;
  }
}

/* ---------------------------------------------------------------------------
   8. Layout helpers the content pages are written against
   ---------------------------------------------------------------------------
   The six content pages and the 27 country pages were built before the port,
   against a small set of layout classes — .band, .card, .grid-cards and so on.
   Rewriting 35 pages of markup into cs_ classes would have been a great deal
   of churn for no visual difference, so those classes are defined HERE instead,
   in the template's own values: its 20px radius, its greys, its spacing, its
   type. The result is the template's look; the class names are just the names
   the markup already uses.

   Everything below takes its values from style.css's :root, so a change to the
   theme's palette carries through here without being restated.
   --------------------------------------------------------------------------- */

/* ---- Bands: the template runs 120px between sections, 80px on mobile ---- */
.band {
  padding-block: 120px;
  position: relative;
}
.band--tight {
  padding-block: 70px;
}
@media (max-width: 991px) {
  .band {
    padding-block: 80px;
  }
  .band--tight {
    padding-block: 50px;
  }
}
.band--alt {
  background-color: var(--gray-color-2);
}
.band--ink {
  background-color: var(--accent-color);
  color: #fff;
}
.band--ink h1,
.band--ink h2,
.band--ink h3,
.band--ink h4,
.band--ink a {
  color: #fff;
}

.container--narrow {
  max-width: 900px;
}

/* ---- Cards: the template's .cs_iconbox.cs_style_2 geometry ---- */
.grid-cards {
  display: grid;
  gap: 30px;
  grid-template-columns: repeat(auto-fit, minmax(min(270px, 100%), 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

/* EXACTLY THREE ITEMS GET AN EXPLICIT COLUMN COUNT, never auto-fit.

   This rule existed on the old site and was lost in the port, which is how
   three cards came to render as two-and-a-lonely-one at tablet widths. The
   note it carried is worth restoring with it: auto-fit resolves to whatever
   happens to fit, so a three-card row becomes 2+1 across a whole band of
   widths, and the stranded third card reads as a mistake.

   So: one column, then three. Never two — the count has to divide three.
   `:has(> :last-child:nth-child(3))` is "the third child is also the last",
   i.e. exactly three, so it applies itself wherever a three-up grid appears
   without every caller having to remember a modifier class. */
.grid-cards:has(> :last-child:nth-child(3)) {
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .grid-cards:has(> :last-child:nth-child(3)) {
    grid-template-columns: repeat(3, 1fr);
  }
}
.grid-cards--wide {
  grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
}

/* NO HAIRLINE BORDER. Every content block on this site was a bordered white
   rectangle, and a page of them reads as a spreadsheet — "very boxy" was the
   verdict, and it was ours rather than the template's: SaasoX's own
   .cs_iconbox.cs_style_2 has no border, no background and no padding at all,
   and it reserves the bordered .cs_feature_item for one grid.

   So the outline goes and a soft shadow does the separating. It reads as a
   raised surface on both the white and the grey bands without drawing a line
   round everything, and it leaves the hover lift somewhere to go. */
.card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 36px 34px;
  background: #fff;
  border: 0;
  border-radius: 20px;
  box-shadow: 0 2px 10px rgba(34, 34, 34, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
@media (hover: hover) {
  .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 44px rgba(34, 34, 34, 0.1);
  }
}
@media (max-width: 575px) {
  .card {
    padding: 28px 24px;
  }
}
.card__title {
  margin: 0 0 4px;
  font-size: 24px;
}
.card__body {
  margin: 0;
  color: var(--body-color);
}
.card--feature {
  background: var(--accent-color);
  border-color: transparent;
  color: #fff;
}
.card--feature .card__title,
.card--feature .card__body {
  color: #fff;
}
.card--link {
  position: relative;
}
.card--link .card__title a {
  text-decoration: none;
}
.card--link .card__title a::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

/* ---- Icon tiles: the template's .cs_iconbox_icon ---- */
.icon-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  flex: none;
  /* The template's own .cs_iconbox.cs_style_2 corner: three rounded, one
     square. A small thing, and most of why its tiles do not read as boxes. */
  border-radius: 20px 20px 0 20px;
  margin-bottom: 22px;
  background: var(--theme-color-1);
  color: var(--heading-color);
}
.icon-tile--go {
  background: var(--theme-color-1);
  color: var(--heading-color);
}
.icon-tile--deep {
  background: var(--gray-color-2);
  color: var(--theme-color-2);
}
.icon-tile--ink {
  background: var(--gray-color-1);
  color: var(--heading-color);
}
.icon-tile--sm {
  width: 40px;
  height: 40px;
  border-radius: 12px 12px 0 12px;
  margin-bottom: 0;
}
.card--feature .icon-tile,
.band--ink .icon-tile {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

/* ---- Text button: the template's .cs_text_btn ---- */
.text-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  margin-top: auto;
  padding-top: 14px;
  font-family: var(--heading-font);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--theme-color-2);
  text-decoration: none;
}
.text-btn::after {
  content: '\f061';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  transition: transform 0.3s ease;
}
.text-btn:hover::after {
  transform: translateX(4px);
}

/* ---- Tick lists ---- */
.tick-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.tick-list li {
  position: relative;
  padding-left: 30px;
}
.tick-list li::before {
  content: '\f00c';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 1px;
  color: var(--green-color);
}
.tick-list--excluded li::before {
  content: '\f068';
  color: var(--body-color);
}

/* ---- Stats, where a page needs them outside the counter band ---- */
.stat__value {
  display: block;
  font-family: var(--heading-font);
  font-weight: 600;
  font-size: 48px;
  line-height: 1;
  color: var(--theme-color-2);
}
.stat__label {
  display: block;
  font-weight: 700;
  margin-top: 8px;
}
.stat__sub {
  display: block;
  font-size: 14px;
  color: var(--body-color);
}
.band--ink .stat__value {
  color: var(--green-color);
}
.band--ink .stat__sub {
  color: rgba(255, 255, 255, 0.72);
}

/* ---- Prose ---- */
.prose {
  max-width: 72ch;
}
.prose > * + * {
  margin-top: 16px;
}
.prose h2 {
  margin-top: 48px;
}
.prose h3 {
  margin-top: 32px;
}
.prose a {
  color: var(--theme-color-2);
}

/* ---- Counter band's source line, which the template has no slot for ---- */
.cs_counter_sub {
  opacity: 0.72;
  font-size: 15px;
}

/* ---- Page heading ----
   THE TEMPLATE'S PAGE HEADING IS LIGHT; ours is the dark accent, which is why
   the breadcrumb needs undoing rather than tweaking. style.css gradient-fills
   the crumb text (`background-clip: text` with
   `-webkit-text-fill-color: transparent`), which is handsome on its own pale
   ground and close to unreadable on navy. Plain white, and the fill reset —
   `-webkit-text-fill-color` overrides `color` outright, so setting colour
   alone would change nothing. */
.cs_page_heading .breadcrumb-item,
.cs_page_heading .breadcrumb-item a,
.cs_page_heading .breadcrumb-item.active {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: rgba(255, 255, 255, 0.85);
}
.cs_page_heading .breadcrumb-item a:hover {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cs_page_heading .breadcrumb-item + .breadcrumb-item::before {
  color: rgba(255, 255, 255, 0.45);
}

/* ---- Page heading ---- */
.cs_page_heading.cs_style_1 {
  background-color: var(--accent-color);
  padding: 90px 0;
}
.cs_page_lede {
  max-width: 60ch;
  margin: 16px 0 0;
  opacity: 0.85;
}
.cs_page_heading .breadcrumb {
  /* style.css centres this (inline-flex + justify-content: center), which is
     right for its own centred page headings and wrong for our left-aligned
     one. */
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
  font-size: 15px;
}
.text-center .cs_page_heading_in .breadcrumb {
  justify-content: center;
}
.cs_page_heading .breadcrumb-item + .breadcrumb-item::before {
  content: '/';
  margin-right: 8px;
  opacity: 0.5;
}
.text-center .cs_page_heading_in .breadcrumb {
  justify-content: center;
}

/* ---- CTA band ---- */
.cs_cta_band {
  padding: 70px 0;
}
.cs_cta_band_in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.cs_cta_band_text {
  max-width: 52ch;
  opacity: 0.85;
}
.cs_cta_band .cs_btns_group {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.cs_cta_band_tel {
  border-color: rgba(255, 255, 255, 0.5) !important;
}
.cs_cta_band_tel:hover {
  background-color: #fff !important;
  color: var(--heading-color) !important;
}

/* ---- Section heading lede ---- */
.cs_section_lede {
  margin-top: 16px;
  max-width: 58ch;
}
.cs_section_heading.cs_center_column .cs_section_lede {
  margin-left: auto;
  margin-right: auto;
}

/* ---------------------------------------------------------------------------
   9. On a dark ground
   ---------------------------------------------------------------------------
   The page heading and the CTA band are the accent navy. Anything of ours
   dropped into them via a slot is drawn for a light ground by default —
   .btn--ghost is ink-on-transparent with an ink border, which on navy is a
   dark button on a dark band, and muted body copy disappears entirely.
   --------------------------------------------------------------------------- */
.cs_page_heading .btn--ghost,
.band--ink .btn--ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.5);
}
.cs_page_heading .btn--ghost:hover,
.band--ink .btn--ghost:hover {
  background: #fff;
  color: var(--heading-color);
  border-color: #fff;
}

/* Slot content in the page heading: the country pages put a flag caption and
   a pair of buttons under the lede. */
.cs_page_heading,
.cs_page_heading p,
.cs_page_heading li {
  color: rgba(255, 255, 255, 0.85);
}
.cs_page_heading strong {
  color: #fff;
}
.cs_page_heading a:not(.btn):not(.cs_btn) {
  color: #fff;
}

/* ---------------------------------------------------------------------------
   10. Reduced motion
   ---------------------------------------------------------------------------
   WOW.js sets `visibility: hidden` on every .wow element and reveals it on
   scroll. It has no idea about prefers-reduced-motion, and neither does
   animate.css, so a visitor who has asked their operating system for less
   movement still gets a page of fading and sliding headings.

   This does two jobs at once. It honours the preference — and it is a safety
   net, because it forces `visibility: visible` regardless of what WOW has
   done. Content hidden behind a scroll listener is content one broken listener
   away from being invisible, and on a page whose job is a lead form that is a
   risk worth removing for the people who have opted out anyway.

   `!important` is unavoidable: WOW writes its state to the inline style
   attribute, and nothing but !important outranks that.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .wow,
  .animated {
    animation: none !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .cs_scrollup,
  .shape--blob {
    animation: none !important;
  }
}

/* ---------------------------------------------------------------------------
   11. Room for the fixed things at the bottom of the viewport
   ---------------------------------------------------------------------------
   These rules lived in base.css and went with it. Without them the sticky CTA
   sits on top of the last line of the footer, and the consent card covers it
   entirely — both only on a phone, and both only for the visitor who scrolls
   to the bottom, which is exactly the sort of regression a desktop check
   misses.

   `:has()` rather than a bare body rule, because only the service page renders
   the CTA bar: every other page would otherwise reserve 60px for a bar it does
   not have and show a strip of background below the footer.
   --------------------------------------------------------------------------- */
body:has(.sticky-cta) {
  padding-bottom: var(--sticky-cta-height);
}
html:has(.sticky-cta) {
  scroll-padding-bottom: var(--sticky-cta-height);
}

/* While the consent card is still asking, IT owns the bottom of the screen. */
body:has(.consent[data-consent-prompt]:not([hidden])) {
  padding-bottom: var(--consent-height);
}
html:has(.consent[data-consent-prompt]:not([hidden])) {
  scroll-padding-bottom: var(--consent-height);
}

/* One fixed object at the bottom at a time. The card takes the slot while a
   decision is outstanding, so the bar borrows the hidden state it already has
   for itself — StickyCta needs no change, and its module pairs this with
   inert + aria-hidden so the bar is genuinely out of reach, not just
   invisible. */
body:has(.consent[data-consent-prompt]:not([hidden])) .sticky-cta {
  transform: translateY(100%);
  visibility: hidden;
  pointer-events: none;
}

@media (min-width: 48rem) {
  /* The bar is phones-only. */
  body:has(.sticky-cta) {
    padding-bottom: 0;
  }
  html:has(.sticky-cta) {
    scroll-padding-bottom: 0;
  }
}

/* ---------------------------------------------------------------------------
   12. Line breaks that mean something
   ---------------------------------------------------------------------------
   style.css carries a GLOBAL `@media (max-width: 991px) { br { display: none } }`.
   For the template that is reasonable: it uses <br> only to hand-break long
   headings on desktop, and those breaks are wrong on a phone.

   It is not reasonable for us. Our <br>s are semantic — they separate the
   lines of a postal address, and a phone number from the opening hours. Below
   992px the contact and about addresses rendered as
   "Trent LaneCastle DoningtonDerbyDE74 2PY", which is the sort of thing that
   makes a company look like it does not exist.

   So: breaks come back by default, and the template's cosmetic ones are
   re-hidden by the heading classes that own them.
   --------------------------------------------------------------------------- */
@media (max-width: 991px) {
  br {
    display: inline;
  }
  .cs_hero_title br,
  .cs_section_title br,
  .cs_page_title br,
  .cs_hero_desc br,
  .cs_counter .cs_fs_24 br,
  .cs_feature_item br {
    display: none;
  }
}

/* ---------------------------------------------------------------------------
   13. The form's remaining states
   ---------------------------------------------------------------------------
   Two more rules that lived in base.css. Both are on the submit screen, which
   is the least-visited part of the form and therefore the easiest to miss.
   --------------------------------------------------------------------------- */

/* The panel shown when the POST fails. It is the only thing standing between a
   failed submission and a lost enquiry, and it was rendering as unstyled body
   copy — no panel, no colour, and a phone number that did not look like a link
   in the one moment the visitor most needs to see it is one. */
.wizard__terminal {
  margin-top: 24px;
  padding: 20px 22px;
  border: 1px solid var(--color-danger);
  border-left-width: 4px;
  border-radius: 12px;
  background: #fff5f4;
}
.wizard__terminal h3 {
  margin: 0 0 8px;
  font-size: 20px;
  color: var(--color-danger);
}
.wizard__terminal p {
  margin: 0;
}
.wizard__terminal a {
  color: var(--theme-color-2);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.wizard__consent {
  margin-top: 18px;
  font-size: 14px;
  color: var(--body-color);
}
/* style.css leaves anchors the inherited colour, so this read as plain text —
   a privacy-policy link nobody can see is a consent notice with a missing
   half. */
.wizard__consent a {
  color: var(--theme-color-2);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.wizard__reassure {
  margin-top: 16px;
  font-size: 14px;
  color: var(--body-color);
}

.wizard__noscript {
  padding: 16px 18px;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  background: var(--gray-color-1);
}
.wizard__noscript a {
  color: var(--theme-color-2);
  font-weight: 700;
}

/* ---------------------------------------------------------------------------
   14. The off-canvas menu, and the tab order
   ---------------------------------------------------------------------------
   style.css parks the closed mobile menu at `left: -100vw` and leaves it
   there. Off screen is not out of the tab order: below 1200px a keyboard user
   tabbing from the logo fell through six links they could not see, on their
   way to the page.

   `visibility: hidden` removes them from the tab order and still animates —
   it is a discrete property, so with the existing `transition: all` it flips
   at the end of the slide out and the start of the slide in, which is exactly
   when you want it.

   The other half of this fix is src/islands/theme-nav.ts, which makes the
   template's injected <span> hamburger focusable in the first place. Neither
   half is any use alone.
   --------------------------------------------------------------------------- */
@media (max-width: 1199px) {
  .cs_nav .cs_nav_list {
    visibility: hidden;
  }
  .cs_nav .cs_nav_list.cs_active {
    visibility: visible;
  }
  /* The injected toggle is a <span>; the island gives it role=button and
     tabindex, and this gives it a focus ring and a real target. */
  .cs_menu_toggle {
    cursor: pointer;
  }
  .cs_menu_toggle:focus-visible {
    outline: 3px solid var(--theme-color-2);
    outline-offset: 4px;
  }
}

/* ---------------------------------------------------------------------------
   15. Gutters
   ---------------------------------------------------------------------------
   Bootstrap's .container gives 12px of side padding, which on a 375px phone
   puts body copy 12px from the bezel. The template's own pages mostly carry
   full-bleed imagery at those widths so it does not show; ours are text and a
   form, where it reads as cramped.
   --------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .container {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* ---------------------------------------------------------------------------
   16. A full-width header, not a floating pill
   ---------------------------------------------------------------------------
   SaasoX's header is an inset rounded pill: `.cs_type_1` pushes it 40px down
   the page and a background <img> supplies the rounded shape. It suits a
   marketing page that opens on a full-bleed hero.

   It does not suit this one. The pill left a band of page colour above and
   beside it, so the header read as a floating widget rather than as the top of
   the site, and it sat awkwardly under the parent-brand bar — two stacked
   objects of different widths. Full width, flush under the brand bar, with a
   hairline to separate it from the hero.

   The `.cs_type_1` margin is overridden at the same specificity it was set
   with; the shape is gone from the markup entirely.
   --------------------------------------------------------------------------- */
.cs_site_header.cs_style_1.cs_type_1 {
  margin-top: 0;
}

.cs_site_header.cs_style_1 {
  background-color: #fff;
  border-bottom: 1px solid var(--border-color);
  padding: 0;
}

.cs_site_header.cs_style_1 .cs_main_header_in {
  /* The template caps this at 1620px and pads it 45px. Matching .container
     instead lines the logo and the menu up with the page content beneath them,
     which is the whole point of a full-width bar. */
  max-width: 1140px;
  height: 88px;
  padding: 0 12px;
}

@media (max-width: 1199px) {
  .cs_site_header.cs_style_1 .cs_main_header_in {
    height: 76px;
  }
}
@media (max-width: 767px) {
  .cs_site_header.cs_style_1 .cs_main_header_in {
    padding: 0 20px;
  }
}

/* ---------------------------------------------------------------------------
   17. The live quote
   ---------------------------------------------------------------------------
   Rendered into the form by src/islands/register-wizard.ts as the visitor
   fills it in. It sits directly above the submit, which is the moment the
   price actually matters.

   THE UNPRICED ROWS ARE NOT GREYED OUT. The instinct is to mute a line that
   has no figure; the effect is to make a real charge look like a footnote.
   They are set in the same weight as everything else, with the reason beside
   them, because "we cannot price this yet" is information the customer needs
   at full volume.
   --------------------------------------------------------------------------- */
.quote {
  margin-top: 26px;
  padding: 24px 22px;
  border-radius: 16px;
  background: var(--gray-color-1);
  border: 1px solid var(--border-color);
}

.quote__title {
  margin: 0 0 16px;
  font-size: 18px;
}

.quote__rows {
  display: grid;
  gap: 12px;
}

.quote__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  font-size: 15px;
}

.quote__label {
  display: grid;
  gap: 1px;
}

.quote__payee {
  font-size: 12px;
  color: var(--body-color);
}

.quote__note {
  font-size: 12px;
  color: var(--body-color);
  max-width: 42ch;
}

.quote__amount {
  font-family: var(--heading-font);
  font-weight: 700;
  white-space: nowrap;
}

.quote__tbc {
  font-family: var(--body-font);
  font-weight: 400;
  font-size: 13px;
  color: var(--body-color);
}

.quote__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border-color);
  font-family: var(--heading-font);
  font-weight: 700;
  font-size: 17px;
}

.quote__total-amount {
  font-size: 26px;
  letter-spacing: -0.02em;
}

.quote__foot {
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--body-color);
}

/* The engine-size box, with its unit sitting inside the field. */
.field__suffixed {
  position: relative;
}
.field__suffixed input {
  padding-right: 46px;
}
.field__suffix {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--body-color);
  font-size: 15px;
  pointer-events: none;
}

/* ---------------------------------------------------------------------------
   14. The journey, the outcome and the origin picker
   Everything below is the service page's, and none of it has a template
   equivalent — SaasoX has no stepper, no photograph-beside-prose block and no
   27-item picker. Written against the template's own custom properties
   (--theme-color-2, --border-color, --heading-font …) rather than the brand
   tokens, because on this page the template's palette is in charge and
   src/styles/tokens.css is not loaded. That is the same rule the rest of this
   file follows.
   --------------------------------------------------------------------------- */

/* ---- Illustrations ----
   The recoloured pack drawings, used on the three claims. Sized in CSS as well
   as on the attributes so the box is right before the file lands, and capped
   rather than stretched: these are 2000x2000 masters and there is no size at
   which one wants to be 300px wide in a three-column row. */
.ryc_illus {
  display: block;
  width: 104px;
  height: 104px;
  max-width: 100%;
}

/* A lede under a section heading. .cs_section_heading centres its children and
   the template has no paragraph style for the line that follows the title. */
.ryc_section_lede {
  max-width: 46rem;
  margin: 14px auto 0;
  color: var(--body-color);
  font-size: 17px;
  line-height: 1.6;
}

.ryc_eyebrow {
  margin: 0 0 8px;
  font-family: var(--heading-font);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--theme-color-2);
}

/* ---- The journey rail ----------------------------------------------------
   TWO LAYOUTS IN ONE COMPONENT, and the unenhanced one is not a degraded
   version of the other — it is a different, complete thing. Without the script
   the rail is a list of links and all three panels are stacked below it, so
   the section reads top to bottom as a three-part explanation. The
   [data-journey-enhanced] rules are what turn that into one-panel-at-a-time,
   and they are only ever applied by journey.ts, at the same moment it applies
   the tab roles. Nothing here hides content that the page cannot get back. */
.ryc_journey_rail {
  list-style: none;
  margin: 0 0 30px;
  padding: 0;
  display: grid;
  gap: 12px;
  /* The two numbers the rail geometry below is built out of. --journey-count
     is written onto the element by the page from PROCESS_STEPS.length, so
     adding a fourth stage moves the line's end points instead of leaving them
     drawn for three. */
  --journey-dot: 44px;
  --journey-tab-pad: 10px;
}

@media (min-width: 768px) {
  .ryc_journey_rail {
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 0;
    /* The line the dots sit on. Drawn on the list rather than between the
       items so it cannot fall out of alignment when one label wraps to two
       lines and its neighbour does not. */
    position: relative;
  }

  .ryc_journey_rail::before,
  .ryc_journey_rail::after {
    content: '';
    position: absolute;
    /* Through the middle of the dots, derived rather than measured: the tab's
       own top padding plus half a dot. Typed as a literal 21px first, which
       put the line 11px above the row and read as a stray hairline. */
    top: calc(var(--journey-tab-pad) + var(--journey-dot) / 2 - 1px);
    height: 2px;
    /* Stops under the first and last dot, not at the edge of the list: a rail
       that runs past the final stage implies a stage that is not there. Each
       stage owns 1/count of the width, so its centre is half of that in. */
    left: calc(100% / (var(--journey-count, 3) * 2));
    right: calc(100% / (var(--journey-count, 3) * 2));
    border-radius: 2px;
  }

  /* NOT --border-color. The rail sits on .cs_gray_bg_2 (#EFF4F8) and the
     template's hairline grey (#E4E4E4) is a shade off it — the untravelled
     part of the line was invisible, so the rail read as three loose dots. */
  .ryc_journey_rail::before {
    background: rgba(11, 59, 86, 0.16);
  }

  /* The travelled part. --journey-progress is 0 → 1, set by journey.ts from
     the selected index; the transition is what makes moving between stages
     read as progress rather than as a redraw. */
  .ryc_journey_rail::after {
    background: var(--theme-color-2);
    transform-origin: left center;
    transform: scaleX(var(--journey-progress, 0));
    transition: transform 0.35s ease;
  }
}

.ryc_journey_item {
  position: relative;
  z-index: 1;
}

.ryc_journey_tab {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: var(--journey-tab-pad, 10px);
  border-radius: 14px;
  text-decoration: none;
  color: var(--heading-color);
  background: transparent;
  transition: background 0.2s ease;
}

@media (min-width: 768px) {
  .ryc_journey_tab {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
  }
}

.ryc_journey_dot {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--journey-dot, 44px);
  height: var(--journey-dot, 44px);
  border-radius: 50%;
  /* On the gray band, so the rail line is hidden behind the dot rather than
     crossing it. */
  background: var(--white-color);
  border: 2px solid var(--border-color);
  font-family: var(--heading-font);
  font-weight: 700;
  font-size: 17px;
  line-height: 1;
  color: var(--body-color);
  transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

/* Reached, i.e. this stage and every stage before it. */
.ryc_journey_tab.is-reached .ryc_journey_dot {
  border-color: var(--theme-color-2);
  color: var(--theme-color-2);
}

.ryc_journey_tab.is-active .ryc_journey_dot {
  background: var(--theme-color-2);
  border-color: var(--theme-color-2);
  color: var(--white-color);
}

.ryc_journey_meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

@media (min-width: 768px) {
  .ryc_journey_meta {
    align-items: center;
  }
}

/* "You" and "Us". The division of labour is the reassuring fact about this
   service, so it gets the colour: green is this site's go/positive, and the
   one stage the visitor has to do anything for is the one wearing it. */
.ryc_journey_who {
  align-self: flex-start;
  padding: 2px 9px;
  border-radius: 999px;
  font-family: var(--heading-font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  line-height: 1.6;
}

.ryc_journey_who.is-you {
  background: var(--theme-color-1);
  color: #2c5c0a;
}

.ryc_journey_who.is-us {
  background: var(--gray-color-2);
  color: var(--accent-color);
}

.ryc_journey_label {
  font-family: var(--heading-font);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.3;
}

@media (hover: hover) {
  .ryc_journey_tab:hover {
    background: rgba(0, 0, 0, 0.035);
  }
}

.ryc_journey_tab:focus-visible {
  outline: 2px solid var(--theme-color-2);
  outline-offset: 2px;
}

/* ---- The panels ---- */
.ryc_journey_panels {
  display: grid;
  gap: 20px;
}

.ryc_journey_panel {
  display: grid;
  gap: 22px;
  align-items: center;
  padding: 30px;
  background: var(--white-color);
  border: 1px solid var(--border-color);
  border-radius: 20px;
}

@media (min-width: 768px) {
  .ryc_journey_panel {
    grid-template-columns: 180px 1fr;
    gap: 34px;
    padding: 38px 40px;
  }
}

.ryc_journey_panel:focus-visible {
  outline: 2px solid var(--theme-color-2);
  outline-offset: 3px;
}

.ryc_journey_panel_art img {
  display: block;
  width: 140px;
  height: 140px;
  max-width: 100%;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .ryc_journey_panel_art img {
    width: 180px;
    height: 180px;
  }
}

.ryc_journey_lede {
  margin: 0 0 12px;
  font-size: 18px;
  line-height: 1.55;
  color: var(--heading-color);
  font-weight: 500;
}

/* Enhanced: one panel at a time, and it fades in on the switch. The fade is
   the only motion added here and it is 180ms — long enough to say "this is a
   new panel", short enough not to be in the way of somebody arrowing through
   all three. */
[data-journey-enhanced] .ryc_journey_panel[hidden] {
  display: none;
}

[data-journey-enhanced] .ryc_journey_panel:not([hidden]) {
  animation: ryc_journey_in 0.18s ease-out both;
}

@keyframes ryc_journey_in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-journey-enhanced] .ryc_journey_panel:not([hidden]) {
    animation: none;
  }
  .ryc_journey_rail::after {
    transition: none;
  }
}

/* ---- The outcome ---------------------------------------------------------
   The photograph and the paragraph that says what the reader is left holding.
   Sits inside the same section as the journey, below the panels, so the three
   stages and their destination read as one block. */
.ryc_outcome {
  display: grid;
  gap: 26px;
  align-items: center;
  margin-top: 40px;
  padding: 30px;
  background: var(--white-color);
  border: 1px solid var(--border-color);
  border-radius: 20px;
}

@media (min-width: 992px) {
  .ryc_outcome {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 44px;
    padding: 40px;
  }
}

/* <Placeholder> owns its own box and its own radius; this only places it. */
.ryc_outcome_art {
  min-width: 0;
}

.ryc_outcome_body {
  min-width: 0;
}

/* ---- The origin picker ---------------------------------------------------
   27 tiles that wrap. Not a grid with fixed columns: the names run from
   "Malta" to "Czech Republic" and a column wide enough for the longest is
   mostly empty for the rest. */
.ryc_eu_flag {
  display: block;
  margin-inline: auto;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px rgba(20, 20, 20, 0.16);
}

.ryc_origins {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ryc_origin {
  display: flex;
  align-items: center;
  gap: 9px;
  /* 44px tall including the border: a real target on a phone, which is most of
     why this is a strip of tiles and not a second dropdown. */
  padding: 9px 14px;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background: var(--white-color);
  text-decoration: none;
  color: var(--heading-color);
  font-family: var(--heading-font);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

@media (hover: hover) {
  .ryc_origin:hover {
    border-color: var(--theme-color-2);
    box-shadow: 0 6px 18px rgba(11, 59, 86, 0.12);
    transform: translateY(-2px);
    color: var(--heading-color);
  }
}

.ryc_origin:focus-visible {
  outline: 2px solid var(--theme-color-2);
  outline-offset: 2px;
}

/* The tile whose country is now sitting in the form. Set by journey.ts after
   it fills the select, so the page confirms what the click did — the form is
   often below the fold on a laptop and the scroll alone is ambiguous. */
.ryc_origin.is-picked {
  border-color: var(--theme-color-2);
  background: var(--gray-color-2);
}

.ryc_origins_note {
  margin: 26px 0 0;
  text-align: center;
  color: var(--body-color);
}

/* ---------------------------------------------------------------------------
   15. The DVLA registration lookup
   Shown only for a vehicle claimed as former UK. See the note on the field in
   src/components/EnquiryForm.astro.
   --------------------------------------------------------------------------- */

.field__optional {
  font-weight: 400;
  color: var(--body-color);
}

/* Input and button on one line, wrapping to two when there is not room —
   at 320px a 44px-tall button beside a text field leaves the field about
   nine characters wide, which is narrower than a UK number plate. */
.field__inline {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: stretch;
}

.field__inline input {
  flex: 1 1 11rem;
  min-width: 0;
  /* Plates are read back character by character; the extra tracking is the
     difference between confirming a plate at a glance and squinting at it. */
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.field__inline .btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

.vrm-result {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 10px;
  padding: 12px 14px;
  border: 1px solid var(--border-color);
  border-left-width: 3px;
  border-radius: 10px;
  background: var(--gray-color-1);
  font-size: 15px;
  line-height: 1.5;
  color: var(--body-color);
}

/* A found record. Green is this site's "go", and a confirmed vehicle is the
   one moment in this form where something has actually gone right. */
.vrm-result.is-ok {
  border-left-color: var(--theme-color-3);
  background: var(--theme-color-1);
  color: var(--heading-color);
}

/* NOT --color-danger, and that is the whole point. "No DVLA record" is not an
   error and must not look like one — nothing has gone wrong, the answer is
   simply no, and the form carries on either way. A neutral amber says
   "noted" where red would say "you have broken something". */
.vrm-result.is-warn {
  border-left-color: #b68922;
  background: #fff8e8;
}

.vrm-result__head {
  font-family: var(--heading-font);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--theme-color-5);
}

.vrm-result__facts {
  color: var(--heading-color);
}

.vrm-result__flag {
  font-weight: 600;
  color: var(--theme-color-5);
}

.vrm-result__flag--muted {
  font-weight: 400;
  color: var(--body-color);
}

/* ---- The outcome stage ----
   The last panel on the rail carries the photograph rather than a 180px
   illustration, so it needs a wider art column. Everything else about it — the
   card, the padding, the body column — is the same panel as the other three,
   because it is the same rail arriving at its destination and should not look
   like a different component. */
.ryc_journey_panel--outcome .ryc_journey_panel_art {
  /* <Placeholder> owns its own box and ratio; this only places it. */
  width: 100%;
}

@media (min-width: 48rem) {
  .ryc_journey_panel--outcome {
    grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
    align-items: center;
  }
}

.ryc_journey_cta {
  margin-top: 22px;
}

/* ---- Section-closing CTAs ----
   A button and the one-line reassurance under it, centred at the end of a
   section. The note is not decoration: "free" invites the question "free until
   when?", and answering it next to the button is cheaper than losing the click
   to that doubt. */
.ryc_section_cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin: 44px 0 0;
  text-align: center;
}

.ryc_section_cta_note {
  font-size: 15px;
  color: var(--body-color);
}

/* ---- The three-claim cards ----
   See the note at the call site in src/pages/index.astro about why these are
   boxed now having deliberately been unboxed during the port. */
.ryc_card {
  height: 100%;
  padding: 32px 28px 30px;
  background: var(--white-color);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  /* THE SHADOW IS DOING THE WORK, NOT THE BORDER. These sit on white, where a
     hairline alone is close to invisible and the instinct is to darken it —
     which is exactly the hard edge that made the page read as boxy last time.
     A soft, wide, low-opacity shadow separates the card from the page without
     drawing a line round it. */
  box-shadow: 0 2px 4px rgba(11, 59, 86, 0.04), 0 12px 28px rgba(11, 59, 86, 0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

@media (hover: hover) {
  .ryc_card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 8px rgba(11, 59, 86, 0.06), 0 20px 40px rgba(11, 59, 86, 0.1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ryc_card {
    transition: none;
  }
  .ryc_card:hover {
    transform: none;
  }
}

/* The row is a flex container in Bootstrap, so the columns already stretch;
   this makes the CARD fill the column it was given rather than shrink to its
   own text. Without it the three cards are three different heights, which is
   the single thing that makes a card row look unfinished. */
.ryc_card_row > [class*='col-'] {
  display: flex;
}

/* ---------------------------------------------------------------------------
   16. The vehicle-type cards
   Radio buttons wearing a card. The input stays a real radio — see the note at
   the call site in EnquiryForm.astro — so everything below styles the LABEL
   and reacts to :checked and :focus-visible on the input it wraps.
   --------------------------------------------------------------------------- */
.vtype {
  border: 0;
  padding: 0;
  margin: 0 0 22px;
  min-width: 0;
}

.vtype__legend {
  padding: 0;
  margin: 0 0 10px;
  font-family: var(--heading-font);
  font-size: 15px;
  font-weight: 600;
  color: var(--heading-color);
}

/* Three across at every width — one per entry in src/data/vehicle-types.ts.
   This was two-up on a phone back when there were four types; with three it
   left Motorbike orphaned on a row of its own, which read as an afterthought
   and pushed the Make field another 130px down the first screen. Not
   auto-fit: these are a set, and a set that reflows to two-plus-one looks
   broken. Checked at 320px, where each card is ~86px and "Motorbike" still
   fits on one line. */
.vtype__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

@media (max-width: 359px) {
  .vtype__grid {
    gap: 6px;
  }
  .vtype__inner {
    padding-inline: 4px;
  }
}

.vtype__card {
  display: block;
  cursor: pointer;
  margin: 0;
}

/* The radio itself is not display:none — a hidden input is skipped by some
   screen readers and cannot be focused. It is clipped instead, so it stays in
   the accessibility tree and the tab order while the card does the showing. */
.vtype__card input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.vtype__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 100%;
  padding: 16px 8px 14px;
  text-align: center;
  background: var(--white-color);
  border: 1.5px solid var(--border-color);
  border-radius: 14px;
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.vtype__icon {
  color: var(--body-color);
  line-height: 0;
  transition: color 0.18s ease;
}

.vtype__label {
  font-family: var(--heading-font);
  font-size: 15px;
  font-weight: 600;
  color: var(--heading-color);
  line-height: 1.2;
}

.vtype__hint {
  font-size: 12px;
  line-height: 1.3;
  color: var(--body-color);
}

@media (hover: hover) {
  .vtype__card:hover .vtype__inner {
    border-color: var(--theme-color-2);
  }
}

/* Selected. Colour is not the only signal — the border also thickens to 1.5px
   of a much darker hue and the icon changes colour, so the state survives a
   greyscale print and a colour-blind reader. */
.vtype__card input:checked + .vtype__inner {
  border-color: var(--theme-color-2);
  background: var(--gray-color-2);
  box-shadow: inset 0 0 0 1px var(--theme-color-2);
}

.vtype__card input:checked + .vtype__inner .vtype__icon {
  color: var(--theme-color-2);
}

/* The focus ring lands on the CARD, because the input it belongs to is clipped
   to a pixel and a ring around that is invisible. */
.vtype__card input:focus-visible + .vtype__inner {
  outline: 2px solid var(--theme-color-2);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .vtype__inner,
  .vtype__icon {
    transition: none;
  }
}

/* A currency field: the £ sits inside the box, so the number the visitor types
   lines up with the number they are thinking of. aria-hidden — the label and
   the hint both say pounds, and a screen reader announcing "pound" before every
   digit adds nothing. */
.field__prefixed {
  position: relative;
}
.field__prefixed input {
  padding-left: 30px;
}
.field__prefix {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--body-color);
  font-size: 15px;
  pointer-events: none;
}

/* ---------------------------------------------------------------------------
   17. The estimate — shown after a successful submit
   --------------------------------------------------------------------------- */
.wizard__result {
  /* No outline on the panel itself: focus is moved here programmatically so a
     screen reader announces it, but a visible ring round a whole card reads as
     an error state to everyone else. */
  outline: none;
}

.wizard__result_eyebrow {
  margin: 0 0 6px;
  font-family: var(--heading-font);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--theme-color-5);
}

.wizard__result_title {
  margin: 0 0 8px;
  font-family: var(--heading-font);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--heading-color);
}

.wizard__result_lede {
  margin: 0 0 22px;
  color: var(--body-color);
}

/* ---- The two halves ---- */
.quote__half {
  padding: 20px 22px;
  border: 1px solid var(--border-color);
  border-radius: 16px;
  margin-bottom: 16px;
}

/* Today's half is the committed one, so it carries the weight. The later half
   is deliberately quieter — it is an estimate of somebody else's charge, and
   giving it equal emphasis would make the whole thing read as one big bill. */
.quote__half--today {
  background: var(--white-color);
  border-color: var(--theme-color-2);
  box-shadow: inset 0 0 0 1px var(--theme-color-2);
}

.quote__half--later {
  background: var(--gray-color-1);
}

.quote__half_title {
  margin: 0 0 2px;
  font-family: var(--heading-font);
  font-size: 17px;
  font-weight: 700;
  color: var(--heading-color);
}

.quote__half_sub {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--body-color);
}

.quote__subtotal {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border-color);
  font-family: var(--heading-font);
  font-weight: 700;
  color: var(--heading-color);
}

/* THE GRAND TOTAL. Heavier than a half's subtotal because it is the number a
   customer actually plans against, and set apart from the halves above it so
   it cannot be mistaken for a third section of charges. */
.quote__grand {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-top: 20px;
  padding: 18px 0 4px;
  border-top: 2px solid var(--heading-color);
  font-family: var(--heading-font);
  font-weight: 700;
  color: var(--heading-color);
}
.quote__grand_label {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
/* The when-and-to-whom, under the what. Regular weight so the split reads as a
   caption to the total rather than as a second heading competing with it. */
.quote__grand_split {
  font-family: var(--body-font, inherit);
  font-weight: 400;
  font-size: 13px;
  line-height: 18px;
  color: var(--body-color);
}
.quote__grand_amount {
  font-size: 28px;
  white-space: nowrap;
}

/* THE PAY BLOCK on the result panel. Sits below the quote, so the figure is
   read before the button that acts on it. */
.wizard__pay {
  margin-top: 24px;
  padding: 20px;
  border: 1px solid var(--border-color);
  border-radius: 14px;
  background: var(--gray-color-1);
}
.wizard__pay_head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.wizard__pay_label {
  font-family: var(--heading-font);
  font-weight: 700;
  color: var(--heading-color);
}
.wizard__pay_amount {
  font-family: var(--heading-font);
  font-weight: 700;
  font-size: 28px;
  color: var(--heading-color);
}
.wizard__pay .btn {
  width: 100%;
  justify-content: center;
}
/* A disabled button still has to look deliberate rather than broken — the note
   under it is what explains the state, so the button only needs to stop
   inviting the click. While a payment is starting it is disabled too, and
   aria-busy is what tells the two apart. */
.wizard__pay .btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}
.wizard__pay .btn[aria-busy='true'] {
  cursor: progress;
}
/* Why Pay now did not work, directly under the button that failed. Every
   version of the message says whether money was taken, because that is the
   first thing anybody wants to know when a payment page does not open. */
.wizard__pay_error {
  margin: 12px 0 0;
  padding: 10px 12px;
  font-size: 14px;
  line-height: 20px;
  color: #8a1c1c;
  background: #fdecec;
  border-radius: 8px;
}
.wizard__pay_note {
  margin: 12px 0 0;
  font-size: 13px;
  line-height: 19px;
  color: var(--body-color);
}

/* GOING AHEAD IS THE MAIN ACTION (Jamie, 2 Oct 2026: "make sure the button
   to go ahead is more prevalent and the email option is a clear secondary
   option"). Pay now is bigger and lifted; emailing the quote is a plain text
   link under the pay block — available, clearly not the thing to press. */
.wizard__pay .btn[data-pay-now] {
  padding: 22px 30px;
  font-size: 16px;
  box-shadow: 0 10px 24px rgba(11, 79, 134, 0.28);
}
.wizard__pay .btn[data-pay-now]:not([disabled]):hover {
  box-shadow: 0 14px 30px rgba(11, 79, 134, 0.34);
}

.wizard__emailquote {
  margin-top: 16px;
  text-align: center;
}
.wizard__emailquote_link {
  background: none;
  border: 0;
  padding: 8px 4px;
  font: inherit;
  font-size: 15px;
  color: var(--theme-color-2);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.wizard__emailquote_link:hover {
  color: var(--heading-color);
}
.wizard__emailquote_link[disabled] {
  opacity: 0.55;
  cursor: progress;
}
.wizard__emailquote_status {
  margin: 6px 0 0;
  font-size: 14px;
  line-height: 20px;
  color: var(--heading-color);
}

/* The piece to camera: 16:9, same radius as the quote cards, a click-to-play
   thumbnail until pressed. */
.wizard__video {
  position: relative;
  aspect-ratio: 16 / 9;
  max-width: 100%;
  margin: 0 0 20px;
  border-radius: 14px;
  overflow: hidden;
  background: #0d2433;
}
.wizard__video_play {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.wizard__video_play img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.wizard__video_icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  line-height: 0;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.35));
  transition: transform 0.2s ease;
}
.wizard__video_play:hover .wizard__video_icon,
.wizard__video_play:focus-visible .wizard__video_icon {
  transform: translate(-50%, -50%) scale(1.08);
}
.wizard__video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.quote__subtotal-amount {
  font-size: 24px;
  letter-spacing: -0.02em;
}

.quote__half--later .quote__subtotal-amount {
  font-weight: 600;
  color: var(--body-color);
}

/* ---- The marketing opt-out ---- */
.wizard__optout {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--body-color);
  cursor: pointer;
}

.wizard__optout input {
  /* A real checkbox at a real size — this is a legal control, not decoration,
     and it must be as easy to tick as anything else on the form. */
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
}

/* ---------------------------------------------------------------------------
   18. The form goes first on a phone
   ---------------------------------------------------------------------------
   Jamie, 3 Sep 2026: "on mobile do you think we can hide the top text? might
   convert better". The instinct is right — on a phone the pitch pushed the form
   roughly a screen and a half down, so the thing the visitor came to do was
   invisible until they scrolled.

   REORDERED RATHER THAN HIDDEN, and the difference matters three ways:

     1. The <h1> is the page's heading. `display: none` takes it out of the
        accessibility tree entirely, so a screen-reader user on a phone loses
        the page's title, and the strongest on-page SEO signal is hidden from
        exactly the crawler that indexes mobile first.
     2. The pitch is what persuades somebody who is not yet sure. Hiding it
        assumes every phone visitor has already decided; the ones who have get
        the form immediately either way, and the ones who have not still have
        the argument, just below it.
     3. Nothing is lost if the guess is wrong. Reordering is reversible in a
        line; deleted content from a mobile viewport is a decision nobody
        revisits.

   FOCUS ORDER: source order still runs pitch then form, so a keyboard user
   tabs through the pitch first while seeing the form first. On the homepage
   that mismatch is invisible because the pitch column contains nothing
   focusable at all. On /free-estimate/ it holds one phone link, which is a
   reasonable thing to reach before a four-step form.

   991.98px is Bootstrap's own lg breakpoint — the width at which these two
   col-lg-6 columns stop sitting side by side and start stacking. */
@media (max-width: 991.98px) {
  .ryc_hero_form_col {
    order: -1;
  }

  /* Breathing room where the pitch now sits UNDER the card rather than above
     it — without this the two are flush and read as one block. */
  .ryc_hero .cs_hero_text {
    margin-top: 8px;
  }
}

/* ---------------------------------------------------------------------------
   Phones
   ---------------------------------------------------------------------------
   A pass at 375px (and checked at 320px) over every public page, Oct 2026.
   Each rule below fixes something that measured wrong at that width, not a
   general "make it smaller": the type scale and the form-first hero order
   above were already decided for phones and are left alone.
   --------------------------------------------------------------------------- */
@media (max-width: 575px) {
  /* Section headings. style.css takes cs_fs_48 down to 36px and stops, so
     "What does change from one country to the next" ran to four lines and
     filled half the screen on its own. 30px keeps it clearly a heading. */
  .cs_fs_48 {
    font-size: 30px;
  }
  /* The homepage h1: 42px is five lines at 375px, and on a phone it sits
     UNDER the form, so it is a restatement rather than the first thing read. */
  .ryc_hero .cs_hero_title.cs_fs_64 {
    font-size: 36px;
  }

  /* Inner-page heading. 90px above and below the title is a desktop ratio;
     on a phone it put the first line of content below the fold on every
     inner page. */
  .cs_page_heading.cs_style_1 {
    padding: 44px 0 48px;
  }

  /* Buttons whose label does not fit on one line ("Request your registration"
     on /pricing/). `.btn` is line-height: 1em, which is right for a single
     line and makes two lines overprint each other. */
  .btn,
  .cs_btn {
    line-height: 1.25;
    text-align: center;
  }
  .btn {
    padding: 16px 24px;
  }

  /* Footer links were 21px tall with 10px between them — eight targets in a
     column at roughly half the 44px a thumb needs. Same visual rhythm, real
     targets: the padding is the hit area and the margin it replaces is gone. */
  .cs_footer.cs_style_1 .cs_footer_menu li {
    margin-bottom: 0;
  }
  .cs_footer.cs_style_1 .cs_footer_menu li > a,
  .cs_footer.cs_style_1 .cs_footer_menu li > .ryc_footer_control {
    display: inline-block;
    padding: 10px 0;
  }
  .cs_footer.cs_style_1 .cs_footer_menu li > span {
    display: inline-block;
    padding: 10px 0;
  }
}