/* ============================================
   HOMEPAGE FEATURE 8 — Services / Trust Landing
   All sections use `.container` (max-width 1200px)
   for consistent page width. Design tokens from
   h0-homepage.css are reused throughout.
   ============================================ */

/* ----------------------------------------
   Shared section shell
   ----------------------------------------
   - Every top-level rendered block is wrapped by section()
     in JS, producing <section class="svc-section svc-*">
     <div class="container">…</div></section>.
   - Uniform padding + a container-width divider above every
     section after the first gives a consistent rhythm
     without full-width borders or background swaps.
   ---------------------------------------- */
.svc-section {
    position: relative;
    padding: var(--spacing-4xl) 0;
}

/* ----------------------------------------
   Section rhythm — hairline separator between
   ANY two adjacent sections inside the landing
   container, regardless of their class. This
   keeps the rhythm intact when feature modules
   (e.g. the gallery) inject foreign sections
   such as `.section-gallery` between native
   `.svc-section` blocks.

   Using `#services-landing > section + section`
   instead of `.svc-section + .svc-section` makes
   the separator a property of the container, so
   adding new sections requires no CSS changes.
   ---------------------------------------- */
#services-landing > section { position: relative; }

#services-landing > section + section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 2 * var(--container-padding));
    max-width: var(--container-max);
    height: 1px;
    background: var(--color-border);
}

.svc-header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto var(--spacing-3xl);
}

.svc-eyebrow {
    font-size: var(--font-size-xs);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--color-gold);
    margin-bottom: var(--spacing-md);
}

.svc-heading {
    font-size: var(--font-size-3xl);
    font-weight: var(--fw-medium);
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-md);
}

.svc-subheading {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    line-height: 1.6;
}

/* ----------------------------------------
   Hero — full viewport height, vertically centered.
   - min-height: 100dvh uses dynamic viewport height so the
     hero fills the screen precisely on mobile, accounting for
     collapsible browser chrome (address bar shrink/expand).
     100vh is kept as the implicit fallback for browsers that
     predate dvh support (pre-2023 Safari / Chrome).
   - display: flex + align-items: center vertically centers
     .container (the single flex child) within the viewport.
   - padding-bottom > padding-top (5xl vs 4xl) shifts the flex
     center point upward so content sits slightly above the
     geometric center — a standard hero convention.
   - position: relative (inherited from .svc-section) anchors
     the absolutely-positioned .svc-hero__scroll-cue.
   ---------------------------------------- */
.svc-section.svc-hero {
    min-height: 100dvh;
    display: flex;
    align-items: center;
    /* Asymmetric padding shifts content above exact center.
       Inherited padding-top from .svc-section: --spacing-4xl (6rem).
       padding-bottom = --spacing-5xl (8rem) + 10.5vh = ~10.5% viewport lift. */
    padding-bottom: calc(var(--spacing-5xl) + 10.5vh);
    /* Background image — path supplied via --svc-hero-bg CSS custom property
       injected by renderHero() from hero.bg in homepage-content.json.
       Falls back to none (transparent) when no image is configured. */
    background-image: var(--svc-hero-bg, none);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* Local stacking context — confines the ::before z-index: -1 to this
       section so the overlay can sit beneath in-flow content (the .container
       and the absolutely-positioned .svc-hero__scroll-cue) WITHOUT us having
       to explicitly position those children. Critically, this preserves the
       scroll cue's anchor to .svc-section.svc-hero (its nearest positioned
       ancestor), so `bottom: var(--spacing-3xl)` measures from the section's
       bottom edge — not from the (much shorter) .container. */
    isolation: isolate;
}

/* Overlay — two layers composited in a single gradient:
   1. A soft warm-ivory veil over the hero to lift contrast for the
      dark heading text against the image without obscuring the artwork.
   2. Bottom fade to --color-bg-primary so the hero dissolves cleanly
      into the first content section rather than hard-cutting.
   z-index: -1 + the section's `isolation: isolate` means this layer
   sits behind in-flow content but cannot escape the section's
   stacking context. */
.svc-section.svc-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(251, 246, 238, 0.30) 0%,
        rgba(251, 246, 238, 0.18) 55%,
        var(--color-bg-primary)  100%
    );
    pointer-events: none;
    z-index: -1;
}

.svc-hero__inner {
    text-align: center;
    max-width: 880px;
    margin: 0 auto;
}

.svc-hero__eyebrow {
    font-size: var(--font-size-xs);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--color-gold);
    margin-bottom: var(--spacing-lg);
}

.svc-hero__heading {
    /* The couple's names — the hero centerpiece, set in the flowing
       script face. clamp() scales fluidly from phone to desktop so no
       per-breakpoint override is needed. Single weight (Great Vibes is
       400 only) and neutral tracking keep the connected letters intact. */
    font-family: var(--font-script, 'Great Vibes', cursive);
    font-size: clamp(3.5rem, 11vw, 6rem);
    font-weight: var(--fw-regular);
    line-height: 1.05;
    letter-spacing: normal;
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-lg);
}

.svc-hero__subheading {
    font-size: var(--font-size-lg);
    color: var(--color-text-secondary);
    line-height: 1.6;
    max-width: 680px;
    margin: 0 auto var(--spacing-2xl);
}

.svc-hero__ctas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-md);
}

/* ----------------------------------------
   Scroll cue — bouncing chevron anchored to
   the hero's bottom edge.
   - Absolutely positioned relative to .svc-section.svc-hero
     (position: relative, inherited from .svc-section).
   - aria-hidden in markup — purely decorative.
   - animation: svc-hero-bounce loops infinitely at low opacity
     to signal scrollability without demanding attention.
   - prefers-reduced-motion collapses the animation to near-zero
     duration via the global rule in h0-homepage.css.
   ---------------------------------------- */
.svc-hero__scroll-cue {
    position: absolute;
    /* spacing-3xl (4rem) — one token above the previous 3rem position.
       Anchored to .svc-section.svc-hero (its nearest positioned ancestor),
       so this measures from the bottom of the full-viewport hero — not from
       the (much shorter) .container, which deliberately has no `position`. */
    bottom: var(--spacing-3xl);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs);
    /* AWS console text palette: secondary at low opacity keeps it
       present but fully subordinate to the hero content. */
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
    font-weight: var(--fw-medium);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
    /* Slower, shallower bounce → reads as composed, not playful.
       Opacity ceiling kept deliberately low (0.55) for AWS restraint. */
    animation: svc-hero-bounce 2.8s ease-in-out infinite;
    white-space: nowrap;
}

.svc-hero__scroll-cue i {
    font-size: 0.9rem;
}

@keyframes svc-hero-bounce {
    0%, 100% { transform: translateX(-50%) translateY(0);   opacity: 0.30; }
    50%       { transform: translateX(-50%) translateY(5px); opacity: 0.55; }
}

/* ----------------------------------------
   CTA buttons (shared primary/secondary)
   ---------------------------------------- */
.svc-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 0.85rem 1.6rem;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-base);
    font-weight: var(--fw-semibold);
    text-decoration: none;
    transition: all var(--transition-base);
    border: 1px solid transparent;
    white-space: nowrap;
}

.svc-cta--primary {
    background: var(--color-gold);
    color: var(--color-text-inverse);
}
.svc-cta--primary:hover {
    background: var(--color-gold-hover);
    color: var(--color-text-inverse);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.svc-cta--secondary {
    background: rgba(255, 255, 255, 0.5);
    color: var(--color-text-primary);
    border-color: var(--color-gold);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.svc-cta--secondary:hover {
    background: rgba(255, 255, 255, 0.78);
    border-color: var(--color-gold-hover);
    color: var(--color-gold-hover);
}

/* ----------------------------------------
   Technical deep-dive — unified tab card
   Tabs, panel header, and content share a
   single bordered surface for cohesion.
   ---------------------------------------- */
.svc-tabcard {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-surface);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.svc-tabcard__tabs {
    padding: var(--spacing-md);
    background: var(--color-bg-elevated);
    border-bottom: 1px solid var(--color-border);
}

.svc-tabcard__body {
    padding-block: var(--spacing-xl);
}

.svc-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-sm);
}

.svc-tab {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 0.65rem 1.25rem;
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--fw-semibold);
    cursor: pointer;
    transition: all var(--transition-fast);
}
.svc-tab:hover {
    color: var(--color-text-primary);
    border-color: var(--color-border-hover);
}
.svc-tab.is-active {
    background: var(--color-gold);
    color: var(--color-text-inverse);
    border-color: var(--color-gold);
}

.svc-panels   { position: relative; }
.svc-panel    { display: none; }
.svc-panel.is-active { display: block; }

/* Panel children — padded inward so tables can span edge-to-edge */
.svc-panel__header,
.svc-info-rows,
.svc-panel__footnote,
.svc-panel__error {
    padding-inline: var(--spacing-xl);
}

.svc-panel__header      { text-align: center; margin-bottom: var(--spacing-xl); }
.svc-panel__title       { font-size: var(--font-size-2xl); font-weight: var(--fw-semibold); color: var(--color-text-primary); margin-bottom: var(--spacing-sm); }
.svc-panel__description { font-size: var(--font-size-base); color: var(--color-text-secondary); }
.svc-panel__footnote    { margin-top: var(--spacing-xl); font-size: var(--font-size-sm); color: var(--color-text-secondary); line-height: 1.6; text-align: center; }
.svc-panel__error       { color: var(--color-error); text-align: center; }

/* Horizontal scroll wrapper for wide tables — flush with card edges */
.svc-table-scroll {
    width: 100%;
    overflow-x: auto;
    background: transparent;
    border: 0;
    border-radius: 0;
}

/* Frame provides edge-fade shadows + chevron affordances when the
   inner scroller overflows. data-scroll is toggled by initTableScroll. */
.svc-table-frame {
    position: relative;
}
.svc-table-frame::before,
.svc-table-frame::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 48px;
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    transition: opacity var(--transition-base);
}
.svc-table-frame::before {
    left: 0;
    background: linear-gradient(to right, var(--color-bg-surface), transparent);
}
.svc-table-frame::after {
    right: 0;
    background: linear-gradient(to left, var(--color-bg-surface), transparent);
}
.svc-table-frame[data-scroll="middle"]::before,
.svc-table-frame[data-scroll="end"]::before    { opacity: 1; }
.svc-table-frame[data-scroll="middle"]::after,
.svc-table-frame[data-scroll="start"]::after   { opacity: 1; }

/* Chevron hint buttons — only surfaced when overflow + relevant direction */
.svc-scroll-hint {
    position: absolute;
    top: 50%;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: var(--radius-full);
    background: var(--color-gold);
    color: var(--color-text-inverse);
    font-size: var(--font-size-sm);
    cursor: pointer;
    z-index: 2;
    box-shadow: var(--shadow-md);
    transition: opacity var(--transition-base);
    opacity: 0;
    pointer-events: none;
}
.svc-scroll-hint--left  { left:  var(--spacing-sm); transform: translateY(-50%); }
.svc-scroll-hint--right { right: var(--spacing-sm); transform: translateY(-50%); animation: svc-nudge-right 1.8s ease-in-out infinite; }

.svc-table-frame[data-scroll="start"]  .svc-scroll-hint--right,
.svc-table-frame[data-scroll="middle"] .svc-scroll-hint--left,
.svc-table-frame[data-scroll="middle"] .svc-scroll-hint--right,
.svc-table-frame[data-scroll="end"]    .svc-scroll-hint--left {
    opacity: 1;
    pointer-events: auto;
}

@keyframes svc-nudge-right {
    0%, 60%, 100% { transform: translateY(-50%) translateX(0); }
    30%           { transform: translateY(-50%) translateX(4px); }
}

/* --- Comparison table (Features tab) --- */
.svc-ct {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
}
.svc-ct thead th {
    background: var(--color-bg-elevated);
    color: var(--color-text-primary);
    text-align: left;
    padding: var(--spacing-md);
    font-weight: var(--fw-semibold);
    font-size: var(--font-size-sm);
    border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
}
.svc-ct thead th.svc-ct__tier-col { text-align: center; color: var(--color-gold); }

.svc-ct tbody td {
    padding: var(--spacing-md);
    color: var(--color-text-primary);
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
}
.svc-ct tbody td:not(.svc-ct__feature-cell) { text-align: center; }
.svc-ct tbody tr:hover td                   { background: var(--color-bg-alt); }
.svc-ct tbody tr:last-child td              { border-bottom: 0; }

.svc-ct .fa-check { color: var(--color-success); }
.svc-ct .fa-times { color: var(--color-text-tertiary); }
.svc-ct .fa-star  { color: var(--color-gold); }

.svc-priority-high    { color: var(--color-gold); font-weight: var(--fw-semibold); }
.svc-priority-medium  { color: var(--color-aws-blue); font-weight: var(--fw-semibold); }
.svc-priority-low     { color: var(--color-text-secondary); }

/* --- Info rows (Guarantees / Contact / Security) --- */
.svc-info-rows {
    display: grid;
    gap: var(--spacing-md);
    max-width: 820px;
    margin: 0 auto;
}
.svc-info-row {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: var(--spacing-lg);
    padding: var(--spacing-lg);
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-base);
}
.svc-info-row:hover { border-color: var(--color-border-gold); }
.svc-info-row__label {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-sm);
    font-weight: var(--fw-semibold);
    color: var(--color-text-primary);
}
.svc-info-row__label i { color: var(--color-gold); }
.svc-info-row__detail  { font-size: var(--font-size-sm); color: var(--color-text-secondary); line-height: 1.6; }

/* Reuse svc-step__cta button styles for in-row actions (e.g. Contact
   tab's "Create Account" / "Jump to Inquiry Form") via renderStepAction
   so we get one button system, one set of states. */
/* In-row action CTAs (Contact tab) — force onto their own line below
   the detail copy so the button reads as a distinct call-to-action
   rather than running inline with the surrounding text. */
.svc-info-row__detail .svc-step__cta {
    display: flex;
    width: fit-content;
    margin-top: var(--spacing-sm);
}

/* --- Inline Resource Trigger (e.g. NDA PDF) ---
   Rendered as a <button> inside step bodies, info-row details, and
   panel footnotes whenever the JSON entry includes a `link` field.
   Clicking opens the shared resource modal (see `.svc-modal`),
   giving the user the choice to view in a new tab or download.
   Pill-style outlined trigger — visually distinct from body copy
   without competing with primary CTAs. */
.svc-link {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    margin-top: var(--spacing-sm);
    padding: 0.4rem 0.85rem;
    font-family: inherit;
    font-size: var(--font-size-xs);
    font-weight: var(--fw-semibold);
    line-height: 1.2;
    color: var(--color-gold);
    background: var(--color-gold-light);
    border: 1px solid var(--color-border-gold);
    border-radius: var(--radius-full);
    text-decoration: none;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.svc-link:hover,
.svc-link:focus-visible {
    background: var(--color-gold);
    color: var(--color-text-inverse);
    border-color: var(--color-gold);
    outline: none;
}
.svc-link i { font-size: 0.95em; }
.svc-panel__footnote .svc-link { margin-left: var(--spacing-xs); }

/* --- Resource Modal (shared) ---
   One modal serves every `.svc-link` trigger in the section. Its
   contents (title, description, CTA labels, target URL) are populated
   per-click from the trigger's JSON payload, so no copy is hardcoded
   in markup. */
.svc-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-md);
}
.svc-modal[hidden] { display: none; }
.svc-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    transition: opacity var(--transition-base);
}
.svc-modal--open .svc-modal__backdrop { opacity: 1; }
.svc-modal__panel {
    position: relative;
    width: 100%;
    max-width: 28rem;
    padding: var(--spacing-xl);
    background: var(--color-bg-elevated, var(--color-bg-surface));
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    transform: translateY(0.5rem);
    opacity: 0;
    transition: transform var(--transition-base), opacity var(--transition-base);
}
.svc-modal--open .svc-modal__panel {
    transform: translateY(0);
    opacity: 1;
}
.svc-modal__close {
    position: absolute;
    top: var(--spacing-sm);
    right: var(--spacing-sm);
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: var(--radius-full);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.svc-modal__close:hover {
    background: var(--color-bg-surface);
    color: var(--color-text-primary);
}
.svc-modal__title {
    font-size: var(--font-size-lg);
    font-weight: var(--fw-semibold);
    color: var(--color-text-primary);
    margin: 0 0 var(--spacing-xs);
    padding-right: var(--spacing-xl);
}
.svc-modal__desc {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin: 0 0 var(--spacing-lg);
}
.svc-modal__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}
.svc-modal__btn {
    flex: 1 1 0;
    min-width: 8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    padding: 0.65rem 1rem;
    font-size: var(--font-size-sm);
    font-weight: var(--fw-semibold);
    border-radius: var(--radius-md);
    text-decoration: none;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.svc-modal__btn--primary {
    color: var(--color-text-inverse);
    background: var(--color-gold);
    border: 1px solid var(--color-gold);
}
.svc-modal__btn--primary:hover {
    background: var(--color-gold-dark, var(--color-gold));
    border-color: var(--color-gold-dark, var(--color-gold));
}
.svc-modal__btn--secondary {
    color: var(--color-gold);
    background: transparent;
    border: 1px solid var(--color-border-gold);
}
.svc-modal__btn--secondary:hover {
    background: var(--color-gold-light);
}
/* Tertiary — neutral "Close" action shown beneath View / Download.
   Distinct from the primary/secondary CTAs so it doesn't compete
   visually, while still meeting the 44×44px touch target via padding. */
.svc-modal__btn--tertiary {
    color: var(--color-text-secondary);
    background: transparent;
    border: 1px solid var(--color-border);
    flex: 1 1 100%;          /* drop to its own row, full-width */
}
.svc-modal__btn--tertiary:hover,
.svc-modal__btn--tertiary:focus-visible {
    color: var(--color-text-primary);
    border-color: var(--color-border-hover);
    background: var(--color-bg-surface);
    outline: none;
}

/* Loading overlay — shown while a manifest URL is being resolved.
   Sits on top of the panel content (without unmounting it) so the
   title/description stay rendered, eliminating a layout shift when
   the spinner clears. Action buttons are hidden during loading via
   the parent state class. */
.svc-modal__loader {
    display: none;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-lg) 0 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}
.svc-modal__loader i { color: var(--color-gold); font-size: 1.1rem; }
.svc-modal--loading .svc-modal__actions { display: none; }
.svc-modal--loading .svc-modal__loader  { display: flex; }
@media (max-width: 480px) {
    .svc-modal__actions { flex-direction: column; }
    .svc-modal__btn     { flex: 1 1 auto; }
}

/* Step CTA — in-flow action button (e.g. "Create Account").
   Two visual variants driven by --primary / --secondary modifier
   class. Sits below details/disclosures so the badge is the first
   call-to-action and this is the explicit follow-through. */
.svc-step__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
    padding: 0.65rem 1.25rem;
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    font-weight: var(--fw-semibold);
    cursor: pointer;
    border: 1px solid transparent;
    transition:
        background var(--transition-fast),
        border-color var(--transition-fast),
        color var(--transition-fast),
        transform var(--transition-fast);
}
.svc-step__cta:hover { transform: translateY(-1px); }
.svc-step__cta:active { transform: translateY(0); }

.svc-step__cta--primary {
    background: var(--color-gold);
    color: var(--color-text-inverse);
}
.svc-step__cta--primary:hover {
    background: var(--color-gold-hover);
}

.svc-step__cta--secondary {
    background: transparent;
    border-color: var(--color-border);
    color: var(--color-text-primary);
}
.svc-step__cta--secondary:hover {
    border-color: var(--color-gold);
    color: var(--color-gold);
}

/* --- Tooltip (used inside comparison + cost tables) ---
   The trigger is a small inline button. The actual popup is portaled
   to <body> by initTooltips() in JS so it can escape the table's
   `overflow-x: auto` clip and stay clamped inside the viewport — no
   matter how narrow the screen or how far the user has scrolled the
   table horizontally. Variables drive offset/arrow geometry so the
   look is tuned in one place. */
.svc-tooltip {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-left: var(--spacing-xs);
    cursor: help;
    border-radius: 50%;
}
.svc-tooltip i {
    font-size: 0.8rem;
    color: var(--color-text-tertiary);
    transition: color var(--transition-fast);
}
.svc-tooltip:hover i,
.svc-tooltip:focus-visible i { color: var(--color-gold); }
.svc-tooltip:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 2px;
}

/* Floating popup — position/top/left set inline by JS in document
   coordinates. Width is hard-capped here, then further clamped by JS
   to the viewport so the bubble never extends off-screen. */
.svc-tooltip-floating {
    --svc-tooltip-arrow-x: 50%;
    --svc-tooltip-arrow-size: 6px;

    position: absolute;
    z-index: 9999;
    max-width: 300px;
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-bg-dark);
    color: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    font-weight: var(--fw-regular);
    line-height: 1.5;
    text-align: left;
    white-space: normal;
    box-shadow: var(--shadow-md);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-base);
}
.svc-tooltip-floating.is-visible { opacity: 1; }
.svc-tooltip-floating[hidden]    { display: none; }

/* Arrow — anchored to the trigger via --svc-tooltip-arrow-x (set by
   JS) so it points at the icon even after horizontal viewport
   clamping shifts the bubble. Flips sides when the popup is placed
   below the trigger instead of above. */
.svc-tooltip-floating::after {
    content: "";
    position: absolute;
    left: var(--svc-tooltip-arrow-x);
    width: 0;
    height: 0;
    border: var(--svc-tooltip-arrow-size) solid transparent;
    transform: translateX(-50%);
}
.svc-tooltip-floating[data-placement="top"]::after {
    top: 100%;
    border-top-color: var(--color-bg-dark);
}
.svc-tooltip-floating[data-placement="bottom"]::after {
    bottom: 100%;
    border-bottom-color: var(--color-bg-dark);
}

/* ----------------------------------------
   FAQ (native <details> accordion)
   ---------------------------------------- */
.svc-faq__list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}
.svc-faq__item {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: border-color var(--transition-base);
}
.svc-faq__item[open] { border-color: var(--color-border-gold); }

.svc-faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    font-size: var(--font-size-base);
    font-weight: var(--fw-semibold);
    color: var(--color-text-primary);
    cursor: pointer;
    list-style: none;
}
.svc-faq__question::-webkit-details-marker { display: none; }
.svc-faq__icon { flex-shrink: 0; color: var(--color-gold); transition: transform var(--transition-base); }
.svc-faq__item[open] .svc-faq__icon { transform: rotate(45deg); }
.svc-faq__answer {
    padding: 0 var(--spacing-lg) var(--spacing-lg);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: 1.7;
}

.svc-faq__paragraph { margin: 0; }

/* Top margin separates the intro paragraph from the bullet list.
   Applied directly here so specificity never loses to margin:0 resets. */
.svc-faq__bullets {
    list-style: none;
    margin: var(--spacing-md) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.svc-faq__bullets li {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: var(--spacing-sm) 0;
    color: var(--color-text-secondary);
    line-height: 1.6;
    border-bottom: 1px solid rgba(65, 77, 92, 0.45); /* --color-border at reduced opacity */
}
.svc-faq__bullets li:last-child { border-bottom: none; }
.svc-faq__bullets li::before {
    content: "";
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-gold);
    /* Centre dot on the first text line: offset by half the line-height minus half the dot height */
    margin-top: calc((1.6em - 6px) / 2);
}

/* ----------------------------------------
   Responsive — tablet (<= 900px)
   ---------------------------------------- */
@media (max-width: 900px) {
    .svc-info-row        { grid-template-columns: 1fr; gap: var(--spacing-sm); }
}

/* ----------------------------------------
   Responsive — mobile (<= 600px)
   ---------------------------------------- */
@media (max-width: 600px) {
    .svc-hero__ctas         { flex-direction: column; align-items: stretch; }
    /* Scroll cue text label is redundant at this size — icon alone suffices */
    .svc-hero__scroll-cue   { font-size: 0; gap: 0; }
    .svc-section         { padding: var(--spacing-3xl) 0; }
    .svc-tabcard__tabs   { padding: var(--spacing-sm); }
    .svc-panel__header,
    .svc-panel__hint,
    .svc-info-rows,
    .svc-panel__footnote,
    .svc-panel__error    { padding-inline: var(--spacing-md); }
}