/* ==========================================================================
   Site Wide Hosting — WHMCS 8.8.x child theme stylesheet
   Ported from design-v3/styles.css (Donna-approved visual redesign),
   adapted to run as a child theme of WHMCS's own built-in "twenty-one"
   ("Six") theme rather than as a standalone static site. This file is
   loaded via `{assetPath file='site-wide-hosting.css'}` in header.tpl, the
   same pattern OrDomain/header.tpl uses for its own custom.css — i.e. it is
   layered ON TOP of the parent theme's own core/Bootstrap CSS (already
   loaded via `{include file="$template/includes/head.tpl"}`), not a
   replacement for it. Per the brief: this file only restyles the chrome
   (header/nav/footer) and custom marketing content (homepage + the four
   custom marketing pages); it does not touch Bootstrap's grid classes
   (.container/.row/.col-*) that WHMCS's own system pages (cart, checkout,
   client area, tickets, KB, invoices, domain search) depend on.

   Adaptations made from the original design-v3/styles.css:
   - @font-face src paths repointed away from the design-v2 source folder's
     fonts directory to this theme's own self-contained ./fonts/ folder.
   - Hero background-image url()s repointed away from the design-v2 source
     folder's images directory to this theme's own self-contained ./img/
     folder.
   - `.btn` / `.btn-*` renamed throughout to `.swh-btn` / `.swh-btn-*`.
     REQUIRED because WHMCS's own "twenty-one"/Bootstrap system UI (cart,
     checkout, modals, the topbar notification button, the generate-password
     button, etc. — all preserved verbatim from OrDomain/header.tpl and
     OrDomain/footer.tpl) also uses the bare Bootstrap `.btn`/`.btn-primary`
     classes. Reusing design-v3's unscoped `.btn` rules verbatim would have
     reskinned every WHMCS system button (pill shape, 18px/36px padding)
     site-wide, including tiny UI controls never designed for that treatment
     — exactly the "don't fight Bootstrap on system pages" problem the brief
     warned about. Renaming design-v3's own button variants avoids the
     collision while leaving WHMCS's real `.btn` alone for the parent theme
     to style as it always has.
   - `.card` renamed throughout to `.swh-card`, for the same reason —
     WHMCS/Bootstrap's own `.card` component is used pervasively by the
     parent theme's system-page content (product boxes, invoice cards, order
     summaries), which this build must not silently reskin.
   - The header `.nav{...}` rule (originally a bare class on the same
     element as `.wrap`) renamed to `.swh-nav` — `.nav` is also a real
     Bootstrap class, reused verbatim (unrenamed) elsewhere in this theme's
     footer.tpl for the required Contact-us/TOS utility links, so the two
     needed to be told apart.
   - `ul{list-style:none}` scoped to `.swh-main ul` instead of applying
     globally, so WHMCS's own system-rendered lists elsewhere on the page
     (ticket threads, KB categories, cart line items, sidebars) keep
     whatever list styling the parent theme gives them, rather than losing
     their bullets/markers site-wide.
   - A new final section, "WHMCS chrome integration", adds restyling for
     the WHMCS-required elements that have no design-v3 equivalent (the
     logged-in topbar, the real dynamic system navbar/KB-search bar kept
     from OrDomain, and the footer's required social/language/TOS utility
     row) so they sit quietly alongside the new design-v3 chrome rather than
     looking like an unstyled leftover from OrDomain.

   REBUILT 2026-09 — "Acid-Lime"/"Luminous Utility" visual pass (Donna-
   approved, explicit instruction to build the live homepage from this
   reference template): colour tokens, radii and shadows were replaced to
   match stitch-export/luminous_utility/DESIGN.md and the literal
   .bg-acid-gradient/.card-shadow values in stitch-export/
   site_wide_hosting_homepage_acid_lime/code.html. Because this stylesheet
   is shared sitewide (chrome + every marketing page's components), the
   token/component changes below necessarily cascade to header/footer/nav
   and to the About/Contact/FAQ/Shared-Hosting pages too, even though only
   homepage.tpl's own markup was edited this pass — flagged explicitly in
   the delivery report, not a silent scope creep. See the "Tokens" block
   below for the full colour-role rationale (--color-ink/--color-muted
   were renamed from the old --color-primary/--color-primary-light; the
   --color-primary name was freed up for the new dominant interactive
   green, per Donna's explicit brand-rule-change confirmation).
   ========================================================================== */

/* ---- Accessibility utility ---- */
.sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* ---- Fonts (real files, self-hosted in this theme's own fonts/ folder) ---- */
@font-face{
  font-family:'Montserrat';
  src:url('../fonts/Montserrat-Bold.ttf') format('truetype');
  font-weight:700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Montserrat';
  src:url('../fonts/Montserrat-ExtraBold.ttf') format('truetype');
  font-weight:800;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Open Sans';
  src:url('../fonts/OpenSans-Regular.ttf') format('truetype');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Open Sans';
  src:url('../fonts/OpenSans-SemiBold.ttf') format('truetype');
  font-weight:600;
  font-style:normal;
  font-display:swap;
}

/* ---- Tokens ----
   REBUILT 2026-09 to match the Donna-approved "Acid-Lime"/"Luminous Utility"
   reference (stitch-export/luminous_utility/DESIGN.md + the literal
   .bg-acid-gradient/.card-shadow values in
   stitch-export/site_wide_hosting_homepage_acid_lime/code.html). This is a
   deliberate, explicit brand-rule change confirmed directly by Donna: lime/
   green is now the dominant interactive colour (buttons, checkmarks, active
   nav, price accents, hero gradient) rather than the old "reserved for
   exactly one CTA" rule.

   --color-ink / --color-muted keep their PRE-EXISTING variable names (they
   used to be named --color-primary / --color-primary-light, holding the old
   graphite palette) — renamed here to --color-ink/--color-muted and
   repointed to the reference's "ink"/"muted" text tokens, since the vast
   majority of their ~90 existing usages across every page (headings, body
   copy, card text, borders) are genuinely TEXT/ink roles, not brand-colour
   roles, and the reference itself keeps text on `text-ink`/`text-muted`
   throughout, never on its bright "primary" green.

   --color-primary is a NEW token (this name was freed up by the rename
   above) now holding the reference's actual "Primary Interactive" green —
   used only for the specific elements the reference itself renders in
   green: buttons/CTAs, checkmarks, active nav state, the recommended-tier
   border/ribbon, and (a judgement call, flagged in the delivery report) the
   Level Line price accents, which have no reference equivalent to copy. ---- */
:root{
  --color-ink:#16233A;            /* Luminous Utility "ink" — headings/body text */
  --color-muted:#5C6B80;          /* Luminous Utility "muted" — secondary/caption text */
  --color-primary:#3F6A00;        /* Luminous Utility "primary" — dominant interactive green */
  --color-primary-dark:#3F6212;   /* Luminous Utility "lime-dark" — hover state for green buttons */
  --color-lime-bright:#84CC16;    /* Luminous Utility "lime-bright" — hero-gradient/decorative accent */
  --color-accent:#4D7C0F;         /* Luminous Utility recommended-tier accent (was #32CD32 "one CTA only" lime — explicitly superseded) */
  --color-bg:#FBFDF6;             /* Luminous Utility "tint-2" — general section tint */
  --color-tint-1:#F7FEE7;         /* Luminous Utility "tint-1" — pricing-card header block / icon-circle tint */
  --color-footer-dark:#0E1A2B;    /* Luminous Utility "footer-dark" — footer + the two full-bleed dark bands */
  --color-footer-text:#D6E4C3;    /* Luminous Utility "footer-text" — readable text on footer-dark */
  --color-white:#FFFFFF;

  --hairline:#E3EED0;             /* Luminous Utility "line" */
  --rule-15:rgba(22,35,58,0.15);
  --wash-06:rgba(63,106,0,0.08);

  --radius-sm:4px;
  --radius-md:8px;
  --radius-lg:18px;               /* Luminous Utility's significant card radius (was 12px) */
  --radius-xl:18px;               /* aligned to the same 18px card radius (was 16px) */
  --radius-btn:16px;              /* Luminous Utility button radius — buttons are rounded rectangles, not pills */
  --radius-pill:999px;            /* kept for the few remaining pill/chip uses outside this pass's scope */

  --shadow-sm:0 1px 2px rgba(22,35,58,0.08);
  --shadow-md:0 10px 25px rgba(22,35,58,0.12);   /* = literal Luminous Utility "card-shadow" */
  --shadow-lg:0 14px 32px rgba(22,35,58,0.16);
  --shadow-xl:0 20px 44px rgba(22,35,58,0.20);

  --space-xs:4px;
  --space-sm:8px;
  --space-md:16px;
  --space-lg:24px;
  --space-xl:32px;
  --space-2xl:48px;
  --space-3xl:64px;
  --space-4xl:96px;

  /* type scale */
  --h1-size:76px; --h1-lh:1.04;
  --h2-size:46px; --h2-lh:1.1;
  --h3-size:23px; --h3-lh:1.3;
  --lead-size:21px; --lead-lh:1.55;
  --body-size:17px; --body-lh:1.65;
  --caption-size:13px; --caption-lh:18px;

  --font-heading:'Montserrat','Helvetica Neue',Arial,sans-serif;
  --font-body:'Open Sans',-apple-system,BlinkMacSystemFont,sans-serif;

  --transition-fast:150ms ease;
  --transition-med:260ms cubic-bezier(.2,.7,.3,1);
}

/* ---- Base typography/link layer — applied site-wide (this is the intended
   "reskin the whole install" part of a WHMCS theme, same as OrDomain's own
   style_ordomain.css/custom.css do for their body/a/heading rules). Layout
   spacing/grid for system pages is untouched — see the .swh-main-scoped
   list-style rule below for the one place this file intentionally does NOT
   apply a rule globally. ---- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body.swh-body{
  font-family:var(--font-body);
  font-weight:400;
  font-size:var(--body-size);
  line-height:var(--body-lh);
  color:var(--color-ink);
  background:var(--color-white);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
/* Plain element selector — deliberately NOT scoped to body.swh-body/.swh-main.
   That scoping was tried and caused a real bug: body.swh-body h1 (specificity
   0,0,1,2) beat every component override that colours a heading white on a
   dark section (.hero h1, .bg-dark h2/h3, .closing-cta h2 — all 0,0,1,1),
   so hero/Level-Line/footer headings silently rendered graphite-on-dark
   instead of white. A bare h1,h2,h3,h4 rule (0,0,0,1) is exactly what
   design-v3's original stylesheet used and is always beaten by those more
   specific overrides regardless of source order — matching the intended
   cascade. It also ties with twenty-one's own bare `h1{color:#333}`, and
   since this file loads after twenty-one's CSS, ours wins that tie anyway. */
h1,h2,h3,h4{
  font-family:var(--font-heading);
  font-weight:700;
  color:var(--color-ink);
}

.swh-main a:focus-visible,
.swh-main button:focus-visible,
.swh-main input:focus-visible,
.swh-main textarea:focus-visible,
.swh-main summary:focus-visible,
.swh-header a:focus-visible,
.swh-footer a:focus-visible{
  outline:2px solid var(--color-ink);
  outline-offset:3px;
  border-radius:var(--radius-sm);
}
.swh-btn:focus-visible{outline-offset:2px}

.swh-main img{max-width:100%;display:block}

/* Scoped list-style reset — see file-header note above for why this is not
   a global `ul{list-style:none}` rule. */
.swh-main ul{list-style:none;margin:0;padding:0}

.swh-main h1{
  font-weight:800;
  font-size:var(--h1-size);
  line-height:var(--h1-lh);
  letter-spacing:-.03em;
  margin:0;
}
.swh-main h2{font-weight:800;font-size:var(--h2-size);line-height:var(--h2-lh);letter-spacing:-.02em;margin:0}
.swh-main h3{font-size:var(--h3-size);line-height:var(--h3-lh);margin:0}
.swh-main p{margin:0}

.eyebrow{
  display:inline-block;
  font-family:var(--font-heading);
  font-weight:700;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--color-muted);
}
.eyebrow.on-dark{color:rgba(255,255,255,.72)}

.wrap{max-width:1240px;margin:0 auto;padding:0 var(--space-lg)}

/* ---- Full-bleed breakout ----
   Real bug found on the live WHMCS install: header.tpl's required system
   markup (kept intact from OrDomain — <section id="main-body"><div
   class="container"><div class="row"><div class="col-12 primary-content">)
   wraps our entire <main class="swh-main"> in Bootstrap's ~1140-1320px
   .container. In design-v3 every section was meant to span the full
   viewport edge-to-edge (photo hero, Level Line band, closing CTA), with
   only the inner .wrap centring the content — but nested inside WHMCS's own
   .container, every section was constrained to that width instead, leaving
   visible side margins. This is what read as "boxed" on the live site.
   Standard full-bleed-from-a-centred-parent breakout: stretch to 100vw and
   recentre with negative margins, so the parent .container's width no
   longer constrains these specific children, while .wrap inside them keeps
   its own 1240px centred max-width exactly as before. */
.swh-main .hero,
.swh-main .section{
  width:100vw;
  position:relative;
  left:50%;
  right:50%;
  margin-left:-50vw;
  margin-right:-50vw;
}

/* ---- Section rhythm — strict alternation, never two adjacent the same ---- */
.swh-main .section{padding:var(--space-4xl) 0}
.swh-main .section.compact{padding:var(--space-3xl) 0}
.bg-white{background:var(--color-white)}
.bg-tint{background:var(--color-bg)}
.bg-dark{background:var(--color-footer-dark);color:var(--color-white)}
.bg-dark h2,.bg-dark h3{color:var(--color-white)}

/* ---- Buttons (design-v3's own button system — renamed .swh-btn* to avoid
   colliding with WHMCS/Bootstrap's real .btn/.btn-primary, see file-header
   note) ---- */
.swh-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-family:var(--font-heading);
  font-weight:700;
  font-size:16px;
  border-radius:var(--radius-btn);
  padding:18px 36px;
  transition:transform var(--transition-fast),
             box-shadow var(--transition-fast),
             background-color var(--transition-fast),
             border-color var(--transition-fast),
             opacity var(--transition-fast);
  white-space:nowrap;
  text-decoration:none;
  cursor:pointer;
}
.swh-btn.swh-btn-sm{padding:12px 26px;font-size:15px}

.swh-btn-primary{
  background:var(--color-primary);
  color:var(--color-white);
  border:1.5px solid var(--color-primary);
}
.swh-btn-primary:hover{transform:translateY(-2px);background:var(--color-primary-dark);border-color:var(--color-primary-dark);box-shadow:var(--shadow-lg)}

/* Accent lime — the recommended-tier (Growth) CTA. Explicit, Donna-confirmed
   rule change: lime/green is now the dominant interactive colour sitewide
   (buttons, checkmarks, active nav, price accents), not reserved to one
   element as the old graphite-era brand rule required. White text on this
   accent green (#4D7C0F) passes contrast comfortably. */
.swh-btn-accent{
  background:var(--color-accent);
  color:var(--color-white);
  border:1.5px solid var(--color-accent);
}
.swh-btn-accent:hover{transform:translateY(-2px);background:var(--color-primary-dark);border-color:var(--color-primary-dark);box-shadow:0 10px 24px rgba(63,106,0,.35)}

.swh-btn-outline{
  background:transparent;
  color:var(--color-ink);
  border:1.5px solid var(--color-ink);
}
.swh-btn-outline:hover{background:var(--wash-06)}

/* Neutral secondary — the non-recommended pricing-tier CTAs (Starter/
   Business), matching the reference's tint/ink/line treatment for its
   non-highlighted plan buttons. */
.swh-btn-secondary{
  background:var(--color-tint-1);
  color:var(--color-ink);
  border:1.5px solid var(--hairline);
}
.swh-btn-secondary:hover{background:var(--color-white);border-color:var(--color-primary)}

.swh-btn-on-dark-primary{
  background:var(--color-white);
  color:var(--color-ink);
  border:1.5px solid var(--color-white);
}
.swh-btn-on-dark-primary:hover{transform:translateY(-2px);box-shadow:var(--shadow-xl)}
.swh-btn-on-dark-outline{
  background:transparent;
  color:var(--color-white);
  border:1.5px solid rgba(255,255,255,.6);
}
.swh-btn-on-dark-outline:hover{background:rgba(255,255,255,.10);border-color:var(--color-white)}

.link-arrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-heading);
  font-weight:700;
  font-size:16px;
  color:var(--color-ink);
  text-decoration:none;
  transition:gap var(--transition-fast),opacity var(--transition-fast);
}
.link-arrow:hover{gap:12px}

/* ---- Cards (design-v3's own card component — renamed .swh-card, see
   file-header note) ---- */
.swh-card{
  background:var(--color-white);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md);
  transition:box-shadow var(--transition-med),transform var(--transition-med);
}
.swh-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px)}

/* ---- Icons — plain single-colour line icons only, sprite reused verbatim.
   Default stroke is now the brand green (was ink/graphite) — the reference
   renders every checkmark/benefit icon in its "primary" green
   (text-primary), not in the neutral ink/text colour. ---- */
.icon{
  width:26px;
  height:26px;
  stroke:var(--color-primary);
  stroke-width:1.5;
  fill:none;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex-shrink:0;
}
.icon-wrap{
  width:56px;
  height:56px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.icon-wrap.on-tint{background:var(--color-white);box-shadow:var(--shadow-sm)}
/* was var(--color-bg)/tint-2 (near-white, low contrast against a white
   section) — tint-1 gives the icon circle a visible lime-family tint on
   white sections, judgement call flagged in the delivery report since the
   reference's own literal value here (bg-surface-container-low, a pale
   blue-lavender Material colour) reads as unrelated to its own lime brand. */
.icon-wrap.on-white{background:var(--color-tint-1)}
.icon-wrap.on-dark{background:rgba(255,255,255,.12)}
.icon-wrap.on-dark .icon{stroke:var(--color-white)}

/* ==========================================================================
   Header / marketing nav
   ========================================================================== */
header.site-header{
  background:var(--color-white);
  border-bottom:1px solid var(--hairline);
  position:sticky;
  top:0;
  z-index:40;
}
.swh-nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:104px;
  gap:var(--space-lg);
  flex-wrap:wrap;
}
.brand-lockup{display:flex;align-items:center;gap:var(--space-sm);text-decoration:none}
.brand-icon{height:56px;width:56px;display:block}
.brand-divider{width:1px;height:44px;background:var(--rule-15);flex-shrink:0}
.brand-wordmark{display:flex;flex-direction:column;line-height:1.08}
.brand-line{
  font-family:var(--font-heading);
  font-weight:800;
  font-size:15px;
  letter-spacing:-.01em;
  color:var(--color-ink);
}

.brand-lockup-footer .brand-divider{background:rgba(255,255,255,.25)}
.brand-lockup-footer .brand-line{color:var(--color-white)}
.menu{display:flex;align-items:center;gap:var(--space-xl)}
.menu a{
  position:relative;
  font-family:var(--font-heading);
  font-weight:700;
  font-size:14px;
  color:var(--color-ink);
  text-decoration:none;
  transition:color var(--transition-fast);
}
.menu a:hover{color:var(--color-primary)}
.menu a[aria-current="page"]{color:var(--color-primary)}
.menu a[aria-current="page"]::after{
  content:'';
  position:absolute;
  left:0;right:0;
  bottom:-10px;
  height:2px;
  background:var(--color-primary);
}
.burger{display:none;font-size:26px;color:var(--color-ink);background:none;border:0;cursor:pointer}
.mobmenu{display:none}

/* ==========================================================================
   Hero — REBUILT to match the reference's .bg-acid-gradient hero exactly
   (stitch-export code.html: `linear-gradient(135deg, #BEF264 0%, #4D7C0F
   100%)`), replacing the previous full-bleed photo+graphite-scrim
   treatment. This only changes the base `.hero` rule — `.hero.hero-shared-
   hosting` (a different page, out of this pass's scope) has its own,
   higher-specificity background-image override further down this file and
   is completely unaffected by this change.
   ========================================================================== */
.hero{
  position:relative;
  background-color:var(--color-accent);
  background-image:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.14) 2px, transparent 2px),
    linear-gradient(135deg, #BEF264 0%, #4D7C0F 100%);
  background-size:40px 40px, cover;
  background-position:right top, center;
  background-repeat:repeat, no-repeat;
  padding-top:var(--space-4xl);
  /* Extra clearance for the real domain-search widget floated up over this
     edge (.hero-domain-float below) — taller than the reference's own
     static mockup card since it's WHMCS's real, functional widget (TLD/
     length selectors, captcha, mobile button row all included). */
  padding-bottom:calc(var(--space-4xl) + 180px);
  display:flex;
  align-items:center;
  text-align:center;
}

/* ==========================================================================
   Real WHMCS domain-search widget, floated as a card over the hero's
   bottom edge — the .hero-domain-float/.domain-card treatment design-v3
   always intended here, now wired to the actual functional widget (see
   homepage.tpl) instead of a static, non-functional mockup box. Every
   selector below targets WHMCS's/the multiselect plugin's own real classes
   — nothing renamed, only themed, so none of the widget's JS behaviour is
   at risk.
   ========================================================================== */
.hero-domain-float{
  position:relative;
  /* Reference: "-mt-24" (-96px). Kept slightly deeper than the literal
     reference value because this is WHMCS's real, taller functional widget
     (TLD/length selectors, captcha, mobile button row), not the reference's
     shorter static mockup — same judgement call as the padding-bottom
     clearance above. */
  margin-top:-120px;
  margin-bottom:var(--space-2xl);
  z-index:5;
}
.hero-domain-float .home-domain-search{
  background:var(--color-white);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-xl);
  max-width:760px;
  margin:0 auto;
}
.hero-domain-float .home-domain-search .container{max-width:none;padding:0}
.hero-domain-float .home-domain-search .p-5{padding:var(--space-2xl) !important}
.hero-domain-float .home-domain-search h2{
  font-family:var(--font-heading);
  font-weight:800;
  font-size:var(--h3-size);
  color:var(--color-ink);
  text-align:left !important;
  margin-bottom:var(--space-lg);
}
.hero-domain-float textarea,
.hero-domain-float .form-control{
  width:100%;
  border:1.5px solid var(--hairline) !important;
  border-radius:var(--radius-md) !important;
  padding:14px var(--space-lg);
  font-family:var(--font-body);
  font-size:16px;
  color:var(--color-ink);
  background:var(--color-white);
}
.hero-domain-float textarea:focus,
.hero-domain-float .form-control:focus{
  outline:none;
  border-color:var(--color-primary) !important;
  border-width:2px !important;
  box-shadow:0 0 0 4px var(--wash-06) !important;
}
.hero-domain-float .btn{
  font-family:var(--font-heading);
  font-weight:700;
  border-radius:var(--radius-btn) !important;
}
.hero-domain-float .btn-primary{
  background:var(--color-primary) !important;
  border-color:var(--color-primary) !important;
  color:var(--color-white) !important;
}
.hero-domain-float .btn-primary:hover{
  background:var(--color-primary-dark) !important;
  border-color:var(--color-primary-dark) !important;
}
/* Transfer — was a deliberate graphite-outline under the old "lime reserved
   for one CTA" rule; that rule is explicitly superseded this pass, so this
   is now a green outline (secondary, not filled) instead of an ink one. */
.hero-domain-float .btn-success{
  background:transparent !important;
  border-color:var(--color-primary) !important;
  color:var(--color-primary) !important;
}
.hero-domain-float .btn-default{
  border-radius:var(--radius-btn) !important;
  border-color:var(--hairline) !important;
  color:var(--color-ink) !important;
}
.hero-domain-float .btn-link{color:var(--color-muted)}

@media (max-width:640px){
  /* .hero's own padding-bottom for this breakpoint is set in the later,
     consolidated mobile block below (search "min-height:auto") — a second
     .hero{padding-bottom} rule here would tie on specificity and lose to
     that later one on source order, so the override lives there instead. */
  .hero-domain-float{margin-top:-200px}
  .hero-domain-float .home-domain-search .p-5{padding:var(--space-xl) !important}
}
/* Centred, matching the reference's `text-center` / `max-w-3xl mx-auto`
   hero layout (was left-aligned under the previous photo-hero design). */
.hero-content{max-width:720px;margin:0 auto}
.hero-content .eyebrow{margin-bottom:var(--space-lg);color:rgba(255,255,255,.85)}
.hero h1{color:var(--color-white);margin:0 auto var(--space-lg);max-width:16ch}
.hero .hero-body{
  max-width:56ch;
  margin-left:auto;
  margin-right:auto;
  font-size:var(--lead-size);
  line-height:var(--lead-lh);
  color:rgba(255,255,255,.92);
  margin-bottom:var(--space-xl);
}
.hero .hero-ctas{display:flex;gap:var(--space-md);flex-wrap:wrap;justify-content:center}
.hero .swh-btn-outline{color:var(--color-white);border-color:rgba(255,255,255,.75)}
.hero .swh-btn-outline:hover{background:rgba(255,255,255,.14);border-color:var(--color-white)}

/* ==========================================================================
   Level Line — bg-dark. Literal horizontal rule between the two prices —
   never an arrow, chart, or percentage badge (brand-v2/BRAND_GUIDELINES.md
   Part 2, "The Level Line" motif explicitly bans that iconography).
   ========================================================================== */
.level-line{text-align:center}
.level-line-block{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--space-lg);
  max-width:640px;
  margin:0 auto;
}
/* Price accents in lime-bright — the Level Line price-promise band has no
   direct reference equivalent to copy structurally, so this is a judgement
   call extending the reference's own stated pattern of colouring price
   figures with its lime family (rather than leaving them plain white),
   flagged in the delivery report. */
.level-line-price{
  font-family:var(--font-heading);
  font-weight:800;
  font-size:56px;
  line-height:1.05;
  letter-spacing:-.02em;
  color:var(--color-lime-bright);
  font-variant-numeric:tabular-nums;
  margin:0;
}
.level-line-rule{
  width:100%;
  max-width:320px;
  height:0;
  border:0;
  border-top:2px solid rgba(132,204,22,.45);
  margin:0;
}
.level-line-star{
  font-weight:400;
  font-size:.55em;
  vertical-align:top;
  color:rgba(255,255,255,.6);
  margin-left:2px;
}
.level-line-caption{
  margin-top:var(--space-xl);
  max-width:52ch;
  margin-left:auto;
  margin-right:auto;
  font-size:var(--lead-size);
  line-height:var(--lead-lh);
  color:rgba(255,255,255,.78);
}
.level-line-footnote{
  margin-top:var(--space-md);
  font-size:var(--caption-size);
  line-height:var(--caption-lh);
  color:rgba(255,255,255,.55);
}

/* ==========================================================================
   Feature strip — restyled to match the reference's Benefits section
   (centred icon-circle-over-heading-over-caption layout, circular icon
   background, border-y hairline) while keeping our own real 4
   differentiators (not the reference's generic NVMe/Uptime/Support list).
   ========================================================================== */
.feature-strip{border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.feature-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--space-2xl) var(--space-xl);
}
.feature-item{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--space-md)}
.feature-item .icon-wrap{width:64px;height:64px}
.feature-item .icon-wrap .icon{width:30px;height:30px}
.feature-item h3{font-family:var(--font-body);font-weight:700;font-size:16px;line-height:1.4}
.feature-item p{color:var(--color-muted);font-size:14px;line-height:1.5;margin:0}

/* ==========================================================================
   Trading-history trust banner
   ========================================================================== */
.trust-banner .wrap{
  display:grid;
  grid-template-columns:1.05fr 1fr;
  gap:var(--space-4xl);
  align-items:start;
}
.trust-banner h2{margin-bottom:var(--space-lg);max-width:14ch}
.trust-banner .trust-body{color:var(--color-muted);font-size:var(--lead-size);line-height:var(--lead-lh);margin-bottom:var(--space-xl);max-width:54ch}

.trust-list{display:flex;flex-direction:column;gap:var(--space-lg)}
.trust-list .feature-item{flex-direction:row;align-items:flex-start;text-align:left;gap:var(--space-md)}
.trust-list .feature-item .icon-wrap{width:56px;height:56px}
.trust-list .feature-item .icon-wrap .icon{width:26px;height:26px}
.trust-list h3{font-family:var(--font-heading);font-size:17px;margin-bottom:4px}
.trust-list p{color:var(--color-muted);font-size:15px;line-height:1.55;margin:0}

/* ==========================================================================
   Pricing table — STATIC content, see homepage.tpl/shared-hosting.tpl notes.
   Growth tier: lift, Recommended badge, the one lime CTA.
   ========================================================================== */
.pricing-intro{
  max-width:64ch;
  margin:0 auto var(--space-3xl);
  text-align:center;
}
.pricing-intro h2{margin-bottom:var(--space-md)}
.pricing-intro p{font-size:var(--lead-size);line-height:var(--lead-lh);color:var(--color-muted);margin:0}

.pricing-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--space-xl);
  align-items:start;
}

/* Tier cards — restructured to match the reference's tinted-header-block
   treatment: a `.tier-header` zone (tint-1 background, name, real feature
   summary line, price, billed caption, CTA button) separated by a hairline
   from a `.tier-body` zone (white, checkmark feature list). Markup for this
   restructure lives in homepage.tpl; every price/feature/CTA-href value is
   still our own real £8/£15/£25 content, not the reference's fake 4-tier
   pricing. */
.tier-card{
  position:relative;
  display:flex;
  flex-direction:column;
  background:var(--color-white);
  border:1px solid var(--hairline);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-md);
  overflow:hidden;
  transition:box-shadow var(--transition-med),transform var(--transition-med);
}
.tier-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-4px)}

.tier-card.recommended{
  border:2px solid var(--color-accent);
  box-shadow:var(--shadow-xl);
  transform:scale(1.03);
  z-index:2;
}
.tier-card.recommended:hover{transform:scale(1.03) translateY(-4px)}

/* Full-width top ribbon (replaces the previous floating pill chip) —
   matches the reference's "Recommended" banner across the top of its
   highlighted Business-tier card exactly. */
.recommended-ribbon{
  display:block;
  background:var(--color-accent);
  color:var(--color-white);
  font-family:var(--font-heading);
  font-weight:700;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-align:center;
  padding:8px 0;
}

.tier-header{
  background:var(--color-tint-1);
  border-bottom:1px solid var(--hairline);
  padding:var(--space-2xl) var(--space-xl) var(--space-xl);
}
.tier-name{font-size:var(--h3-size);margin-bottom:var(--space-sm)}

.tier-line{
  font-family:var(--font-body);
  font-weight:600;
  font-size:15.5px;
  color:var(--color-muted);
  margin:0 0 var(--space-lg);
}
.price-display{margin-bottom:var(--space-xs)}
.price-display .price-amount{
  font-family:var(--font-heading);
  font-weight:800;
  font-size:44px;
  color:var(--color-ink);
  font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;
}
.price-display .price-period{
  font-size:18px;
  font-weight:700;
  color:var(--color-muted);
  letter-spacing:0;
  margin-left:3px;
}
.billed-caption{
  color:var(--color-muted);
  font-size:14px;
  line-height:1.5;
  margin:0 0 var(--space-lg);
}
.tier-header .swh-btn{width:100%}

.tier-body{padding:var(--space-xl) var(--space-xl) var(--space-2xl);display:flex;flex-direction:column;flex:1}
.tier-features{display:flex;flex-direction:column;gap:12px;margin-bottom:var(--space-md);flex:1}
.tier-features li{display:flex;align-items:flex-start;gap:10px;font-size:15px;color:var(--color-ink);line-height:1.5}
.tier-features li .icon{width:18px;height:18px;margin-top:3px;stroke-width:2;stroke:var(--color-primary)}
.tier-support{font-size:14px;color:var(--color-muted);margin:0}

.pricing-footnote{
  max-width:64ch;
  margin:var(--space-3xl) auto 0;
  text-align:center;
  color:var(--color-muted);
  font-size:16px;
}

/* ==========================================================================
   Trading-history counters
   ========================================================================== */
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-xl);text-align:center}
.stat{padding:var(--space-xl) var(--space-lg)}
.stat.swh-card{box-shadow:var(--shadow-lg)}
.stat-numeral{
  font-family:var(--font-heading);
  font-weight:800;
  font-size:56px;
  line-height:1.05;
  color:var(--color-ink);
  font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;
}
.stat-label{margin-top:var(--space-sm);font-size:14px;font-weight:600;color:var(--color-muted)}

/* ==========================================================================
   Family strip
   ========================================================================== */
.family-strip .wrap{
  display:grid;
  grid-template-columns:1fr 1.05fr;
  gap:var(--space-4xl);
  align-items:center;
}
.family-strip h2{margin-bottom:var(--space-lg);max-width:13ch}
.family-strip p{color:var(--color-muted);font-size:var(--lead-size);line-height:var(--lead-lh);margin-bottom:var(--space-xl);max-width:50ch}

.family-photo{
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-lg);
  overflow:hidden;
  min-height:340px;
}
.family-photo img{width:100%;height:100%;object-fit:cover;display:block}

/* ==========================================================================
   FAQ teaser (homepage)
   ========================================================================== */
.faq-teaser-head{text-align:center;margin-bottom:var(--space-2xl)}
.faq-teaser-head h2{margin-bottom:var(--space-sm)}
.faq-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-xl);margin-bottom:var(--space-2xl)}
.qa-item{padding:var(--space-xl)}
.qa-item.swh-card{box-shadow:var(--shadow-lg)}
.qa-item h3{font-size:18px;margin-bottom:var(--space-sm);line-height:1.35}
.qa-item p{font-size:15px;color:var(--color-muted);line-height:1.55;margin:0}
.faq-linkrow{text-align:center}

/* ==========================================================================
   Closing CTA — bg-dark, now the Luminous Utility footer-dark navy band
   (was graphite) — see .bg-dark in the tokens/base section above.
   ========================================================================== */
.closing-cta{text-align:center}
.closing-cta h2{color:var(--color-white);margin-bottom:var(--space-xl);max-width:20ch;margin-left:auto;margin-right:auto}
.closing-cta .cta-row{display:flex;gap:var(--space-md);justify-content:center;flex-wrap:wrap}

/* ==========================================================================
   Testimonials
   ========================================================================== */
.testimonial-head{text-align:center;margin-bottom:var(--space-2xl)}
.testimonial-head .eyebrow{display:block;margin-bottom:var(--space-md)}
.testimonial-head h2{max-width:34ch;margin:0 auto var(--space-md)}
.testimonial-head p{color:var(--color-muted);max-width:56ch;margin:0 auto;font-size:16px;line-height:1.6}
.testimonial-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-xl)}
.testimonial-card{position:relative;padding:var(--space-2xl) var(--space-xl) var(--space-xl);overflow:hidden;text-align:left}
.testimonial-card::before{
  content:'\201C';
  position:absolute;
  top:-.1em;
  left:var(--space-lg);
  font-family:var(--font-heading);
  font-weight:800;
  font-size:100px;
  line-height:1;
  color:var(--color-ink);
  opacity:.06;
  pointer-events:none;
}
.testimonial-quote{position:relative;font-family:var(--font-heading);font-weight:700;font-size:16.5px;line-height:1.5;color:var(--color-ink);margin-bottom:var(--space-md)}
.testimonial-attribution{font-size:14px;color:var(--color-muted)}

/* ==========================================================================
   Contact page
   ========================================================================== */
.contact-intro h1{max-width:16ch}
.contact-intro-body{
  max-width:65ch;
  margin-top:var(--space-lg);
  font-size:var(--lead-size);
  line-height:var(--lead-lh);
  color:var(--color-muted);
}
.channel-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--space-xl);
}
.channel-card{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:var(--space-md);
  padding:var(--space-2xl) var(--space-xl);
}
.channel-card h3{font-size:19px}
.channel-card p{color:var(--color-muted);font-size:15.5px;line-height:1.6;flex:1;margin:0}
.channel-card .swh-btn{margin-top:var(--space-sm)}

.form-card{
  max-width:760px;
  margin:0 auto;
  padding:var(--space-3xl);
  box-shadow:var(--shadow-lg);
}
.form-card h2{margin-bottom:var(--space-sm)}
.form-lead{color:var(--color-muted);font-size:var(--body-size);margin-bottom:var(--space-xl)}

.contact-form{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--space-lg) var(--space-lg);
}
.form-field{display:flex;flex-direction:column;gap:var(--space-sm)}
.form-field-full{grid-column:1 / -1}
.form-field label{
  font-family:var(--font-heading);
  font-weight:700;
  font-size:14px;
  color:var(--color-ink);
}
.form-field input,
.form-field textarea{
  width:100%;
  padding:14px var(--space-lg);
  border:1.5px solid var(--hairline);
  border-radius:var(--radius-md);
  font-family:var(--font-body);
  font-size:16px;
  color:var(--color-ink);
  background:var(--color-bg);
  transition:border-color var(--transition-fast),box-shadow 200ms ease;
}
.form-field textarea{resize:vertical;min-height:140px;border-radius:var(--radius-md)}
.form-field input:focus,
.form-field textarea:focus{
  outline:none;
  border-color:var(--color-muted);
  box-shadow:0 0 0 4px var(--wash-06);
}
.form-submit-row{
  display:flex;
  align-items:center;
  gap:var(--space-lg);
  flex-wrap:wrap;
  margin-top:var(--space-sm);
}
.form-microcopy{color:var(--color-muted);font-size:14px;margin:0}

@media (max-width:640px){
  .channel-grid{grid-template-columns:1fr}
  .contact-form{grid-template-columns:1fr}
  .form-card{padding:var(--space-xl)}
}

/* ==========================================================================
   About page
   ========================================================================== */
.page-intro{text-align:center}
.page-intro .eyebrow{display:block;margin-bottom:var(--space-lg)}
.page-intro h1{max-width:22ch;margin:0 auto var(--space-2xl)}
.intro-prose{max-width:65ch;margin:0 auto;text-align:left}
.intro-prose p{color:var(--color-muted);font-size:var(--lead-size);line-height:var(--lead-lh)}
.intro-prose p + p{margin-top:var(--space-lg)}
.intro-prose a{color:var(--color-ink);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.intro-prose a:hover{opacity:.75}

.stats-caption{
  max-width:60ch;
  margin:var(--space-2xl) auto 0;
  text-align:center;
  color:var(--color-muted);
  font-size:15px;
}

.timeline-head{text-align:center;margin-bottom:var(--space-3xl)}
.timeline-head h2{margin-bottom:var(--space-md)}
.timeline-head p{color:var(--color-muted);font-size:var(--lead-size);max-width:56ch;margin:0 auto}

.timeline{position:relative;max-width:920px;margin:0 auto;display:flex;flex-direction:column;gap:var(--space-3xl)}
.timeline::before{
  content:'';
  position:absolute;
  left:35px;
  top:35px;
  bottom:35px;
  width:2px;
  background:var(--rule-15);
}
.timeline-item{display:grid;grid-template-columns:72px 1fr;gap:var(--space-xl);align-items:start;position:relative}
.timeline-marker{
  width:72px;
  height:72px;
  border-radius:50%;
  background:var(--color-white);
  box-shadow:var(--shadow-md);
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  z-index:2;
}
.timeline-marker .icon{width:30px;height:30px}
.timeline-card{padding:var(--space-2xl)}
.timeline-card.current{border:2px solid var(--color-ink)}
.timeline-year{
  display:block;
  font-family:var(--font-heading);
  font-weight:800;
  font-size:40px;
  letter-spacing:-.02em;
  color:var(--color-ink);
  margin-bottom:var(--space-xs);
  font-variant-numeric:tabular-nums;
}
.timeline-card h3{margin-bottom:var(--space-md)}
.timeline-card p{color:var(--color-muted);font-size:var(--body-size);line-height:var(--body-lh);max-width:58ch;margin:0}

.family-relationship{text-align:center}
.family-relationship .eyebrow{display:block;margin-bottom:var(--space-md)}
.family-relationship h2{max-width:26ch;margin:0 auto var(--space-lg)}
.family-relationship .lead-prose{max-width:65ch;margin:0 auto var(--space-2xl);text-align:left}
.family-relationship .lead-prose p{color:var(--color-muted);font-size:var(--lead-size);line-height:var(--lead-lh)}
.family-relationship .lead-prose a{color:var(--color-ink);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.family-relationship .lead-prose a:hover{opacity:.75}

.family-badges{display:flex;gap:var(--space-md);justify-content:center;flex-wrap:wrap}
.family-badge{
  display:inline-flex;
  align-items:center;
  font-family:var(--font-heading);
  font-weight:700;
  font-size:14px;
  color:var(--color-ink);
  background:var(--color-bg);
  border:1px solid var(--hairline);
  border-radius:var(--radius-pill);
  padding:10px 22px;
  text-decoration:none;
  transition:background var(--transition-fast);
}
a.family-badge:hover{background:var(--wash-06)}

.closing-cta.single .swh-btn{margin-bottom:var(--space-lg)}
.closing-cta.single .cta-caption{
  color:rgba(255,255,255,.75);
  font-size:var(--lead-size);
  line-height:var(--lead-lh);
  max-width:46ch;
  margin:0 auto;
}

/* ==========================================================================
   Shared Hosting page — additional components. Reuses every token/card/
   button/icon rule above verbatim; only new class names introduced are the
   ones with no Home-page equivalent (renewal explainer, included grid,
   email cross-sell).
   ========================================================================== */
.hero.hero-shared-hosting{
  background-image:
    linear-gradient(115deg, rgba(29,32,33,.96) 0%, rgba(38,42,44,.88) 32%, rgba(47,52,54,.52) 62%, rgba(47,52,54,.18) 100%),
    linear-gradient(0deg, rgba(20,22,23,.55) 0%, rgba(20,22,23,0) 30%),
    url('../img/hero-shared-hosting-florist.jpg');
}
.hero.hero-no-float{padding-bottom:var(--space-4xl)}

.bg-white .tier-card:not(.recommended){box-shadow:var(--shadow-lg)}

.renewal-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--space-xl);
  margin-top:var(--space-3xl);
}
.renewal-card{padding:var(--space-xl) var(--space-xl) var(--space-lg)}
.renewal-tier-name{font-size:19px;margin-bottom:var(--space-lg);padding-bottom:var(--space-md);border-bottom:1px solid var(--hairline)}
.renewal-years{display:flex;flex-direction:column;gap:var(--space-md)}
.renewal-years li{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-md)}
.renewal-year-label{font-size:14.5px;color:var(--color-muted)}
.renewal-year-price{
  font-family:var(--font-heading);
  font-weight:700;
  font-size:17px;
  color:var(--color-ink);
  font-variant-numeric:tabular-nums;
}

.included-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--space-2xl) var(--space-xl);
}
.included-grid .feature-item h3{font-size:18px}
.included-grid .feature-item p{font-size:15px}

.crosssell-card{
  max-width:680px;
  margin:0 auto;
  text-align:center;
  padding:var(--space-3xl) var(--space-2xl);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--space-md);
}
.crosssell-card h2{margin-top:var(--space-sm)}
.crosssell-card p{color:var(--color-muted);font-size:var(--lead-size);line-height:var(--lead-lh);max-width:52ch;margin:0}
.crosssell-card .link-arrow{margin-top:var(--space-sm)}

/* ==========================================================================
   Footer
   ========================================================================== */
/* Footer background — was --color-ink (shared with headings/body text);
   now the reference's own dedicated footer-dark navy token, matching
   .bg-dark above. Footer copy recoloured from plain white/rgba to the
   reference's "footer-text" tint (#D6E4C3) for the main readable content
   (strapline, nav links); dimmer captions (heading labels, copyright, NAP)
   keep a translucent-white treatment since the reference has no distinct
   token for those. */
footer.site-footer{
  background:var(--color-footer-dark);
  color:var(--color-footer-text);
  padding:var(--space-3xl) 0 var(--space-lg);
}
.footer-grid{
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1fr;
  gap:var(--space-xl);
  padding-bottom:var(--space-xl);
  border-bottom:1px solid rgba(255,255,255,0.12);
}
.footer-brand .brand-lockup-footer{margin-bottom:var(--space-sm)}
.footer-strapline{font-size:14px;color:var(--color-footer-text);max-width:34ch;margin:0}
.footer-nap{font-size:12px;line-height:1.5;color:rgba(255,255,255,0.55);max-width:34ch;margin-top:var(--space-sm)}
.footer-heading{
  font-family:var(--font-body);
  font-weight:600;
  font-size:var(--caption-size);
  text-transform:uppercase;
  letter-spacing:.1em;
  color:rgba(255,255,255,0.55);
  margin-bottom:var(--space-sm);
}
.footer-nav{display:flex;flex-direction:column;gap:var(--space-sm);align-items:flex-start}
.footer-nav a{font-size:14px;color:var(--color-footer-text);text-decoration:none;transition:color var(--transition-fast)}
.footer-nav a:hover{color:var(--color-lime-bright)}
.footer-bottom{padding-top:var(--space-lg);display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-lg);flex-wrap:wrap}
.footer-copyright{font-size:12px;color:rgba(255,255,255,0.55);margin:0}
.footer-bottom .footer-nap{margin-top:0;text-align:right;max-width:48ch}

/* ==========================================================================
   FAQ page — accordion built from native <details>/<summary>, no JS
   dependency, accessible by default. Categories alternate bg-white/bg-tint.
   No lime accent on this page. Expand/collapse indicator is a CSS-only
   rotated chevron, not an icon.
   ========================================================================== */
.faq-intro-inner{max-width:680px;margin:0 auto;text-align:center}
.faq-intro-inner h1{margin:var(--space-md) 0 var(--space-lg)}
.faq-intro-body{font-size:var(--lead-size);line-height:var(--lead-lh);color:var(--color-muted)}

.faq-narrow{max-width:860px;margin:0 auto}

.faq-cat-head{display:flex;align-items:center;gap:var(--space-md);margin-bottom:var(--space-xl)}
.faq-cat-head h2{margin:0;font-size:32px;min-width:0;overflow-wrap:break-word}

.faq-accordion{display:flex;flex-direction:column;gap:var(--space-md)}

.faq-item{overflow:hidden;box-shadow:var(--shadow-lg)}
.faq-item summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-lg);
  padding:var(--space-lg) var(--space-xl);
  cursor:pointer;
  font-family:var(--font-heading);
  font-weight:700;
  font-size:17px;
  line-height:1.4;
  color:var(--color-ink);
  list-style:none;
  transition:opacity var(--transition-fast);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{opacity:.72}

.faq-item summary::after{
  content:'';
  flex-shrink:0;
  width:9px;height:9px;
  border-right:2px solid var(--color-ink);
  border-bottom:2px solid var(--color-ink);
  transform:rotate(45deg);
  transition:transform var(--transition-fast);
}
.faq-item[open] summary::after{transform:rotate(-135deg)}

.faq-answer{padding:0 var(--space-xl) var(--space-xl)}
.faq-answer p{max-width:68ch;color:var(--color-muted);font-size:15.5px;line-height:1.65;margin:0}

.faq-closing p{color:rgba(255,255,255,.8);max-width:52ch;margin:0 auto var(--space-xl)}

/* ==========================================================================
   WHMCS chrome integration — required system elements with no design-v3
   equivalent (see header.tpl/footer.tpl for the Smarty structure). Kept
   deliberately quiet/utility-styled rather than given the full marketing
   treatment, so the real functional controls (notifications, account
   switcher, KB search, dynamic navbar, language/currency, TOS) stay easy to
   find and don't compete visually with the new design-v3 brand nav.
   ========================================================================== */
.swh-header .topbar{
  background:var(--color-bg);
  border-bottom:1px solid var(--hairline);
  font-size:13px;
}
.swh-header .topbar .btn{color:var(--color-ink)}

.swh-toolbar{
  display:flex;
  align-items:center;
  gap:var(--space-sm);
  list-style:none;
  margin:0;
  padding:0;
}
.swh-toolbar .nav-link{
  font-family:var(--font-heading);
  font-weight:700;
  font-size:13px;
  color:var(--color-ink);
}

.swh-system-nav{
  background:var(--color-bg);
  border-top:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);
}
.swh-system-nav .search{max-width:320px;margin:var(--space-sm) 0}

.swh-footer-utility{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:var(--space-md);
  padding:var(--space-lg) 0;
  border-bottom:1px solid rgba(255,255,255,0.12);
  font-size:13px;
}
.swh-footer-utility .btn,
.swh-footer-utility .nav-link{color:rgba(255,255,255,0.85)}
.swh-footer-utility ul{list-style:none;margin:0;padding:0}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1080px){
  :root{
    --h1-size:56px; --h2-size:38px;
  }
  .feature-grid{grid-template-columns:repeat(2,1fr)}
  .channel-grid{grid-template-columns:1fr}
  .renewal-grid{grid-template-columns:1fr;max-width:520px;margin-left:auto;margin-right:auto}
  .included-grid{grid-template-columns:repeat(2,1fr)}
  .pricing-grid{grid-template-columns:1fr;max-width:520px;margin:0 auto}
  .tier-card.recommended{transform:none}
  .tier-card.recommended:hover{transform:translateY(-4px)}
  .trust-banner .wrap{grid-template-columns:1fr;gap:var(--space-2xl)}
  .family-strip .wrap{grid-template-columns:1fr;gap:var(--space-2xl)}
  .family-photo{min-height:280px}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .faq-grid{grid-template-columns:1fr}
  .timeline{max-width:100%}
  .timeline-card{padding:var(--space-xl)}
  .testimonial-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr;row-gap:var(--space-2xl)}
  .footer-brand{grid-column:1 / -1}
  .menu{display:none}
  .swh-get-hosting{display:none}
  .burger{display:block}
  .mobmenu.open{
    display:flex;flex-direction:column;gap:var(--space-md);
    padding:var(--space-lg);background:var(--color-white);
    border-bottom:1px solid var(--hairline);
  }
  .mobmenu a{font-family:var(--font-heading);font-weight:700;font-size:15px;color:var(--color-ink);text-decoration:none}
  .mobmenu a:hover,
  .mobmenu a[aria-current="page"]{color:var(--color-primary)}
  .mobmenu .swh-btn{align-self:flex-start;margin-top:var(--space-sm)}
}

@media (max-width:640px){
  :root{
    --h1-size:40px; --h2-size:29px; --lead-size:18px;
  }
  .swh-main .section{padding:var(--space-3xl) 0}
  .hero{
    padding-top:var(--space-3xl);
    padding-bottom:calc(var(--space-3xl) + 220px);
    /* No mobile background-image override needed any more — the acid
       gradient set on the base .hero rule already works at every viewport
       size, unlike the old responsive photo-crop swap it replaces. */
  }
  .hero.hero-shared-hosting{
    background-image:
      linear-gradient(115deg, rgba(29,32,33,.96) 0%, rgba(38,42,44,.9) 32%, rgba(47,52,54,.58) 65%, rgba(47,52,54,.22) 100%),
      linear-gradient(0deg, rgba(20,22,23,.55) 0%, rgba(20,22,23,0) 30%),
      url('../img/hero-shared-hosting-florist-mobile.jpg');
  }
  .level-line-price{font-size:32px}
  .level-line-rule{max-width:180px}
  .feature-grid{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:repeat(2,1fr);gap:var(--space-lg)}
  .closing-cta .cta-row{flex-direction:column;align-items:stretch}
  .footer-grid{grid-template-columns:1fr}
  .renewal-grid{grid-template-columns:1fr}
  .included-grid{grid-template-columns:1fr}
  .timeline-item{grid-template-columns:56px 1fr;gap:var(--space-md)}
  .timeline-marker{width:56px;height:56px}
  .timeline-marker .icon{width:24px;height:24px}
  .timeline::before{left:27px}
  .timeline-year{font-size:32px}
  .family-badges{flex-direction:column;align-items:center}
}