/* ============================================
   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. Subtle uniform darkening (20%) across the full hero to lock
      text contrast 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(15, 27, 45, 0.20) 0%,
        rgba(15, 27, 45, 0.20) 65%,
        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 {
    font-size: var(--font-size-4xl);
    font-weight: var(--fw-semibold);
    line-height: 1.1;
    letter-spacing: -0.02em;
    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: transparent;
    color: var(--color-text-primary);
    border-color: var(--color-border);
}
.svc-cta--secondary:hover {
    border-color: var(--color-gold);
    color: var(--color-gold);
}

/* ----------------------------------------
   Trust Bar — AWS service-card aesthetic
   ----------------------------------------
   Each card is themed by an inline `--svc-trust-color`
   custom property supplied by the renderer (validated
   hex from JSON). All visual treatments — animated gradient
   wash, glow ring, icon tile — derive from that single
   token via color-mix(), so adding a new card or recoloring
   one is a one-value change in JSON.

   Visual layers (back → front):
     1. ::before — large animated conic-gradient "aurora"
        in the card's color, slowly drifting to give the
        card a living, lit-from-within feel.
     2. Card body: dark surface gradient with an inner
        radial wash so content stays readable.
     3. ::after  — focused glow blob that intensifies on
        hover for an interactive "lit up" response.

   All motion respects prefers-reduced-motion (handled in
   h0-homepage.css globally — animations collapse to 0.01ms).
   ---------------------------------------- */
.svc-trust__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-lg);
}

.svc-trust__item {
    --svc-trust-color: var(--color-gold);
    /* Per-card alpha tints derived from the card color, so
       all gradients, glows, and tile fills stay in sync.
       Toned for an AWS-console feel — color reads as accent,
       not paint. Bump these tokens to dial intensity up. */
    --svc-trust-tint-strong: color-mix(in srgb, var(--svc-trust-color) 22%, transparent);
    --svc-trust-tint-mid:    color-mix(in srgb, var(--svc-trust-color) 12%, transparent);
    --svc-trust-tint-soft:   color-mix(in srgb, var(--svc-trust-color)  6%, transparent);
    /* Ambient layer opacities — kept low so copy is the hero. */
    --svc-trust-aurora-opacity: 0.28;
    --svc-trust-glow-opacity:   0.26;
    /* Per-card motion values are generated by the renderer so
       gradients and glows never sync up. */
    --svc-trust-anim-delay: 0s;
    --svc-trust-aurora-duration: 16s;
    --svc-trust-drift-duration: 12s;
    --svc-trust-gradient-x: 50%;
    --svc-trust-gradient-y: 100%;
    --svc-trust-glow-x: -20%;
    --svc-trust-glow-y: -30%;
    --svc-trust-aurora-angle: 0deg;

    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    /* Padding lives on `.svc-trust__content` so the hero image
       can sit flush with the card's edges. */
    padding: 0;
    /* Full colored border in the card's accent color — the card's
       theme reads as a single confident outline rather than a stripe. */
    border: 1px solid var(--svc-trust-color);
    border-radius: var(--radius-md);
    background:
        radial-gradient(120% 80% at var(--svc-trust-gradient-x) var(--svc-trust-gradient-y), var(--svc-trust-tint-soft) 0%, transparent 65%),
        linear-gradient(165deg, var(--color-bg-surface) 0%, var(--color-bg-alt) 100%);
    overflow: hidden;
    transition:
        transform var(--transition-base),
        border-color var(--transition-base),
        box-shadow var(--transition-base);
}

/* Animated "aurora" — slowly rotating conic gradient in
   the card's color. Sits behind content (z-index: -1) and
   drifts continuously for a sense of life. */
.svc-trust__item::before {
    content: "";
    position: absolute;
    /* Oversize so rotation never reveals the corners */
    inset: -50%;
    background: conic-gradient(
        from var(--svc-trust-aurora-angle),
        transparent 0deg,
        var(--svc-trust-tint-strong) 70deg,
        transparent 140deg,
        var(--svc-trust-tint-mid) 220deg,
        transparent 290deg,
        var(--svc-trust-tint-strong) 360deg
    );
    filter: blur(28px);
    opacity: var(--svc-trust-aurora-opacity);
    z-index: -1;
    animation: svc-trust-aurora var(--svc-trust-aurora-duration) linear infinite;
    animation-delay: var(--svc-trust-anim-delay);
    pointer-events: none;
}

/* Focused glow blob — softly drifts on its own loop and
   intensifies on hover for an interactive response. */
.svc-trust__item::after {
    content: "";
    position: absolute;
    top: var(--svc-trust-glow-y);
    right: var(--svc-trust-glow-x);
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--svc-trust-tint-strong) 0%, transparent 70%);
    opacity: var(--svc-trust-glow-opacity);
    z-index: -1;
    animation: svc-trust-drift var(--svc-trust-drift-duration) ease-in-out infinite;
    animation-delay: var(--svc-trust-anim-delay);
    transition: opacity var(--transition-base);
    pointer-events: none;
}

.svc-trust__item:hover {
    transform: translateY(-3px);
    border-color: var(--svc-trust-color);
    box-shadow:
        0 12px 32px rgba(0, 7, 22, 0.45),
        0 0 0 1px color-mix(in srgb, var(--svc-trust-color) 28%, transparent),
        0 0 24px color-mix(in srgb, var(--svc-trust-color) 14%, transparent);
}

.svc-trust__item:hover::after { opacity: calc(var(--svc-trust-glow-opacity) + 0.18); }

/* Slowly rotate the aurora for continuous, subtle motion */
@keyframes svc-trust-aurora {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Drift the corner glow so the lit area shifts over time */
@keyframes svc-trust-drift {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(-30px, 30px) scale(1.15); }
}

/* AWS-console-style header row — icon tile on the left, a small
   numbered index + category tag stacked on the right. The index
   is generated automatically by the renderer (01, 02, …) so the
   layout scales with the number of cards in JSON. */
.svc-trust__header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    width: 100%;
    margin-bottom: var(--spacing-xs);
}

.svc-trust__tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    color: var(--svc-trust-color);
    font-size: 1.2rem;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 1px 2px rgba(0, 7, 22, 0.35);
}

.svc-trust__meta {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    line-height: 1.1;
    min-width: 0;
}

.svc-trust__index {
    font-size: 0.7rem;
    font-weight: var(--fw-bold);
    letter-spacing: 0.18em;
    color: var(--svc-trust-color);
    font-variant-numeric: tabular-nums;
}

.svc-trust__tag {
    font-size: 0.72rem;
    font-weight: var(--fw-semibold);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.svc-trust__label {
    margin: 0;
    font-size: var(--font-size-lg);
    font-weight: var(--fw-semibold);
    line-height: 1.3;
    color: var(--color-text-primary);
    letter-spacing: -0.005em;
}

.svc-trust__detail {
    margin: 0 0 var(--spacing-sm);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: 1.55;
}

/* Trust card bullets — short, scannable commitments. Uses the same
   subtle row-separator pattern as `.svc-faq__bullets` and
   `.svc-step__bullets` so progressive disclosure feels consistent
   across the page. */
.svc-trust__bullets {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.svc-trust__bullets li {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: var(--spacing-sm) 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: 1.55;
    border-bottom: 1px solid rgba(65, 77, 92, 0.45);
}
.svc-trust__bullets li:first-child { padding-top: 0; }
.svc-trust__bullets li:last-child  { border-bottom: none; padding-bottom: 0; }
.svc-trust__bullets li::before {
    content: "";
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--svc-trust-color, var(--color-gold));
    margin-top: calc((1.55em - 6px) / 2);
}

/* ----------------------------------------
   Hero image (top of card)
   ----------------------------------------
   Edge-to-edge polished illustration. JSON-driven — adding
   a new card is a single `image: { src, alt }` entry. Lazy-
   loaded by the renderer so the four PNGs incur zero network
   cost above the fold.

   A short bottom gradient blends the photo into the card's
   themed surface so the boundary feels intentional rather
   than abrupt — works for any future image without per-card
   tweaking.
   ---------------------------------------- */
.svc-trust__image {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: rgba(0, 7, 22, 0.35);
    border-bottom: 1px solid color-mix(in srgb, var(--svc-trust-color) 24%, transparent);
}
.svc-trust__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-base), filter var(--transition-base);
}
.svc-trust__image::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 38%;
    background: linear-gradient(
        180deg,
        transparent 0%,
        color-mix(in srgb, var(--color-bg-surface) 70%, transparent) 70%,
        var(--color-bg-surface) 100%
    );
    pointer-events: none;
}
.svc-trust__item:hover .svc-trust__image img {
    transform: scale(1.025);
    filter: saturate(1.06);
}

/* ----------------------------------------
   Card content + collapsible body
   ----------------------------------------
   `.svc-trust__content` owns the inner padding so the hero
   image can sit flush with the card edges. The body uses the
   `grid-template-rows: 0fr → 1fr` collapsing technique — no
   JS height measurement required, fully animatable, and
   honors `prefers-reduced-motion` because we collapse the
   transition globally elsewhere.
   ---------------------------------------- */
.svc-trust__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-sm);
    padding: var(--spacing-lg);
    flex: 1;
}

.svc-trust__body-frame {
    display: grid;
    grid-template-rows: 0fr;
    width: 100%;
    transition: grid-template-rows var(--transition-base);
}
.svc-trust__body {
    overflow: hidden;
    min-height: 0;
}
.svc-trust__body > :first-child { padding-top: var(--spacing-sm); }
.svc-trust__item.is-expanded .svc-trust__body-frame {
    grid-template-rows: 1fr;
}

/* ----------------------------------------
   "Tap to view more" toggle
   ----------------------------------------
   Sits at the bottom of every card, full-width and visually
   subtle by default. The card's accent color brightens on
   hover/expanded so the affordance is unmistakable without
   shouting. Chevron rotates 180° when the body is open.
   ---------------------------------------- */
.svc-trust__toggle {
    margin-top: auto;
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: var(--spacing-sm) var(--spacing-md);
    background: color-mix(in srgb, var(--svc-trust-color) 6%, transparent);
    color: var(--svc-trust-color);
    border: 1px solid color-mix(in srgb, var(--svc-trust-color) 28%, transparent);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.02em;
    cursor: pointer;
    transition:
        background var(--transition-base),
        border-color var(--transition-base),
        color var(--transition-base);
}
.svc-trust__toggle:hover,
.svc-trust__toggle:focus-visible {
    background: color-mix(in srgb, var(--svc-trust-color) 14%, transparent);
    border-color: var(--svc-trust-color);
    outline: none;
}
.svc-trust__toggle i {
    font-size: 0.75rem;
    transition: transform var(--transition-base);
}
.svc-trust__item.is-expanded .svc-trust__toggle i {
    transform: rotate(180deg);
}

/* ----------------------------------------
   Pricing
   ---------------------------------------- */
.svc-pricing__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-xl);
    align-items: stretch;
}

.svc-tier {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: var(--spacing-2xl);
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    transition: all var(--transition-base);
    /* Establish a stacking context so the banner's negative z-index stays
       scoped to the card while keeping the badge above (overflow visible). */
    isolation: isolate;
}
.svc-tier:hover {
    border-color: var(--color-border-hover);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}
.svc-tier--featured {
    border-color: var(--color-gold);
    background: linear-gradient(180deg, var(--color-gold-light) 0%, var(--color-bg-surface) 25%);
    box-shadow: var(--shadow-lg);
}
.svc-tier--featured:hover { border-color: var(--color-gold); }

.svc-tier__badge {
    position: absolute;
    top: -0.75rem;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.3rem 0.85rem;
    background: var(--color-gold);
    color: var(--color-text-inverse);
    font-size: var(--font-size-xs);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border-radius: var(--radius-full);
    white-space: nowrap;
    z-index: 1;
}

/* Segmented banner — single image split across all tier cards via
   background-position. Each card displays its slice (left/middle/right …)
   as a subtle full-card background behind the content.
   Driven by inline custom props: --svc-banner-src, --svc-banner-index,
   --svc-banner-total. */
.svc-tier__banner {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    /* Clip the image to the card's rounded corners locally so the parent
       can keep overflow visible (badge must sit above the card edge). */
    border-radius: inherit;
    overflow: hidden;
    opacity: 0.18;
    background-image: var(--svc-banner-src);
    background-repeat: no-repeat;
    background-size: calc(var(--svc-banner-total, 1) * 100%) 100%;
    background-position:
        calc(var(--svc-banner-index, 0) / max(var(--svc-banner-total, 1) - 1, 1) * 100%) center;
    transition: opacity var(--transition-base);
}
.svc-tier__banner::after {
    /* Vertical fade so copy stays readable over the image. */
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(25, 37, 52, 0.35) 0%,
        rgba(25, 37, 52, 0.75) 55%,
        var(--color-bg-surface) 100%
    );
}
.svc-tier:hover .svc-tier__banner { opacity: 0.28; }
.svc-tier--featured .svc-tier__banner { opacity: 0.22; }
.svc-tier--featured:hover .svc-tier__banner { opacity: 0.32; }

.svc-tier__icon    { font-size: 1.75rem; color: var(--color-gold); margin-bottom: var(--spacing-md); }
.svc-tier__name    { font-size: var(--font-size-xl); font-weight: var(--fw-semibold); color: var(--color-text-primary); margin-bottom: var(--spacing-xs); }
.svc-tier__tagline { font-size: var(--font-size-sm); color: var(--color-text-secondary); line-height: 1.5; margin-bottom: var(--spacing-lg); min-height: 2.6em; }

.svc-tier__price { display: flex; align-items: baseline; gap: var(--spacing-xs); }
.svc-tier__price-amount { font-size: var(--font-size-4xl); font-weight: var(--fw-bold); color: var(--color-text-primary); letter-spacing: -0.02em; }
.svc-tier__price-period { font-size: var(--font-size-sm); color: var(--color-text-tertiary); }
.svc-tier__price-subtext {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    margin: var(--spacing-xs) 0 var(--spacing-lg);
}

.svc-tier__ideal {
    margin-bottom: var(--spacing-lg);
    padding-bottom: var(--spacing-lg);
    border-bottom: 1px solid var(--color-border);
}
.svc-tier__ideal-label {
    display: block;
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-text-tertiary);
    margin-bottom: var(--spacing-sm);
}
.svc-tier__ideal-list { display: flex; flex-wrap: wrap; gap: var(--spacing-xs); }
.svc-tier__ideal-tag {
    padding: 0.2rem 0.6rem;
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

.svc-tier__features { flex: 1; margin-bottom: var(--spacing-lg); }
.svc-tier__features li {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    line-height: 1.5;
}
.svc-tier__features .fa-check     { color: var(--color-success);        margin-top: 0.25rem; }
.svc-tier__features .fa-star      { color: var(--color-gold);           margin-top: 0.25rem; }
.svc-tier__features .fa-times     { color: var(--color-text-tertiary);  margin-top: 0.25rem; }
.svc-tier__features li.is-excluded{ color: var(--color-text-tertiary); }

.svc-tier__cta {
    display: block;
    padding: 0.85rem 1.25rem;
    text-align: center;
    font-weight: var(--fw-semibold);
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: all var(--transition-base);
    border: 1px solid var(--color-border);
    color: var(--color-text-primary);
    background: var(--color-bg-alt);
}
.svc-tier__cta:hover { border-color: var(--color-gold); color: var(--color-gold); }
.svc-tier--featured .svc-tier__cta {
    background: var(--color-gold);
    border-color: var(--color-gold);
    color: var(--color-text-inverse);
}
.svc-tier--featured .svc-tier__cta:hover { background: var(--color-gold-hover); color: var(--color-text-inverse); }

.svc-pricing__notice {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    background: var(--color-crimson-light);
    border: 1px solid rgba(217, 21, 21, 0.3);
    border-radius: var(--radius-md);
    padding: var(--spacing-md) var(--spacing-lg);
    margin-top: var(--spacing-2xl);
}
.svc-pricing__notice-icon { color: var(--color-crimson); font-size: 1.1rem; margin-top: 2px; flex-shrink: 0; }
.svc-pricing__notice-title {
    color: var(--color-text-primary);
    font-weight: var(--fw-semibold);
    margin: 0 0 var(--spacing-xs) 0;
    font-size: var(--font-size-sm);
}
.svc-pricing__notice-body {
    color: var(--color-text-secondary);
    margin: 0;
    font-size: var(--font-size-sm);
    line-height: 1.6;
    text-align: justify;
    hyphens: auto;
}

/* ----------------------------------------
   Showcase — live iframe previews
   ---------------------------------------- */
.svc-showcase__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
    gap: var(--spacing-xl);
    margin-top: var(--spacing-3xl);
}

.svc-showcase {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-surface);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
.svc-showcase:hover {
    border-color: var(--color-border-gold);
    box-shadow: var(--shadow-md);
}

/* Faux browser chrome */
.svc-showcase__browser {
    display: flex;
    flex-direction: column;
}

.svc-showcase__toolbar {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-bg-dark);
    border-bottom: 1px solid var(--color-border);
}

.svc-showcase__dots {
    display: flex;
    gap: 6px;
}
.svc-showcase__dots i {
    width: 10px;
    height: 10px;
    border-radius: var(--radius-full);
    background: var(--color-text-tertiary);
}
.svc-showcase__dots i:nth-child(1) { background: #ff5f57; }
.svc-showcase__dots i:nth-child(2) { background: #febc2e; }
.svc-showcase__dots i:nth-child(3) { background: #28c840; }

.svc-showcase__url {
    flex: 1;
    font-family: var(--font-body);
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    background: var(--color-bg-elevated);
    padding: 4px var(--spacing-sm);
    border-radius: var(--radius-xs);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Iframe viewport — 16:10 aspect ratio */
.svc-showcase__viewport {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--color-bg-dark);
}

.svc-showcase__iframe {
    position: absolute;
    inset: 0;
    width: 200%;
    height: 200%;
    border: none;
    transform: scale(0.5);
    transform-origin: top left;
    pointer-events: none;
}

/* Info bar below iframe */
.svc-showcase__info {
    padding: var(--spacing-lg);
    border-top: 1px solid var(--color-border);
}

.svc-showcase__name {
    font-size: var(--font-size-base);
    font-weight: var(--fw-semibold);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-xs);
}

.svc-showcase__desc {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: 1.5;
}

/* Fallback overlay — hidden by default, shown on iframe load failure */
.svc-showcase__fallback {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    background: var(--color-bg-dark);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--transition-base), visibility var(--transition-base);
}
.svc-showcase__fallback i {
    font-size: var(--font-size-2xl);
    color: var(--color-gold);
}

/* ----------------------------------------
   Loader — elegant shimmer + dot pulse while
   the iframe is fetching its first paint.
   ----------------------------------------
   The viewport carries one of three states:
     • --loading  (default)  → loader visible
     • --failed              → fallback visible
     • (no modifier)         → iframe visible
   Animation timings live in design tokens so
   they can be retuned globally.
   ---------------------------------------- */
.svc-showcase__loader {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
    background: var(--color-bg-dark);
    color: var(--color-text-secondary);
    font-size: var(--font-size-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--transition-base), visibility var(--transition-base);
    overflow: hidden;
    z-index: 1;
}
.svc-showcase__loader-shimmer {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        110deg,
        transparent 0%,
        transparent 35%,
        rgba(255, 215, 0, 0.06) 50%,
        transparent 65%,
        transparent 100%
    );
    background-size: 220% 100%;
    animation: svc-showcase-shimmer 2.4s ease-in-out infinite;
}
.svc-showcase__loader-spinner {
    position: relative;
    display: inline-flex;
    gap: 8px;
}
.svc-showcase__loader-spinner span {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    background: var(--color-gold);
    opacity: 0.35;
    animation: svc-showcase-pulse 1.2s ease-in-out infinite;
}
.svc-showcase__loader-spinner span:nth-child(2) { animation-delay: 0.15s; }
.svc-showcase__loader-spinner span:nth-child(3) { animation-delay: 0.30s; }
.svc-showcase__loader-label {
    position: relative;
    margin: 0;
    color: var(--color-text-tertiary);
}

@keyframes svc-showcase-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -100% 0; }
}
@keyframes svc-showcase-pulse {
    0%, 100% { opacity: 0.25; transform: scale(0.85); }
    50%      { opacity: 1;    transform: scale(1.15); }
}
@media (prefers-reduced-motion: reduce) {
    .svc-showcase__loader-shimmer,
    .svc-showcase__loader-spinner span { animation: none; }
    .svc-showcase__loader-spinner span { opacity: 0.7; }
}

/* State machine — single source of truth for which
   overlay is visible. Iframe stays hidden until loaded
   so users never see a black flash. */
.svc-showcase__viewport--loading .svc-showcase__iframe { visibility: hidden; }
.svc-showcase__viewport--loading .svc-showcase__loader { opacity: 1; visibility: visible; }

/* Show fallback when iframe fails */
.svc-showcase__viewport--failed .svc-showcase__iframe { visibility: hidden; }
.svc-showcase__viewport--failed .svc-showcase__loader  { opacity: 0; visibility: hidden; }
.svc-showcase__viewport--failed .svc-showcase__fallback { opacity: 1; visibility: visible; }

/* ----------------------------------------
   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-steps,
.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); }

/* --- Cost table (Infrastructure tab) --- */
.svc-cost {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-sm);
    min-width: 780px;
}
.svc-cost thead th {
    background: var(--color-bg-elevated);
    color: var(--color-text-primary);
    padding: var(--spacing-md);
    font-weight: var(--fw-semibold);
    text-align: center;
    border-bottom: 1px solid var(--color-border);
    white-space: nowrap;
}
.svc-cost thead th.svc-cost__service-col { text-align: left; }
.svc-cost__sublabel {
    display: block;
    font-size: var(--font-size-xs);
    font-weight: var(--fw-regular);
    color: var(--color-text-tertiary);
    margin-top: 2px;
}
.svc-cost tbody td {
    padding: var(--spacing-md);
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
}
.svc-cost tbody tr:last-child td { border-bottom: 0; }

.svc-cost__service-cell {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    min-width: 220px;
}
.svc-cost__service-icon { font-size: 1.1rem; flex-shrink: 0; }
.svc-cost__service-body { display: flex; flex-direction: column; gap: 2px; }
.svc-cost__service-name { font-weight: var(--fw-semibold); color: var(--color-text-primary); display: inline-flex; align-items: center; gap: var(--spacing-xs); }
.svc-cost__service-desc { font-size: var(--font-size-xs); color: var(--color-text-tertiary); }

.svc-cost__cell {
    text-align: center;
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
}
.svc-cost__cell.is-free {
    color: var(--color-success);
    font-weight: var(--fw-semibold);
}

.svc-cost__total-row td {
    background: var(--color-bg-elevated);
    font-weight: var(--fw-bold);
    color: var(--color-gold);
}

/* --- 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; }
}

/* --- Steps (Process) --- */
.svc-steps {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    max-width: 820px;
    margin: 0 auto;
}
.svc-step {
    position: relative;
    display: grid;
    grid-template-columns: auto 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);
}

/* Progress rail — a single subtle line connecting each step's number
   circle to the next. Drawn per-step so it survives reorder and uneven
   step heights. Hidden on the last step. Quiet AWS-Console aesthetic. */
.svc-step:not(:last-child)::before {
    content: "";
    position: absolute;
    left: calc(var(--spacing-lg) + 1.125rem - 1px);
    /* Pierce halfway into each circle to guarantee no visible gap.
       Circle height = 2.25rem, so 1.125rem = circle center. */
    top: calc(var(--spacing-lg) + 1.125rem);
    bottom: calc(-1 * (var(--spacing-md) + var(--spacing-lg) + 1.125rem));
    width: 2px;
    background: var(--color-border);
    border-radius: 1px;
    pointer-events: none;
    z-index: 1;
}

.svc-step__number {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius-full);
    background: var(--color-gold);
    color: var(--color-text-inverse);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--fw-bold);
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.svc-step__title {
    font-size: var(--font-size-base);
    font-weight: var(--fw-semibold);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-xs);
}
.svc-step__body  { max-width: 65ch; }
/* Step description: subordinate to the step title. Smaller, lighter,
   non-bold so it reads as supporting copy rather than a second heading. */
.svc-step__summary {
    font-size: var(--font-size-sm);
    font-weight: var(--fw-regular);
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin-bottom: var(--spacing-sm);
}
.svc-step__text  { font-size: var(--font-size-sm); color: var(--color-text-secondary); line-height: 1.7; }
.svc-step__text + .svc-step__text { margin-top: var(--spacing-sm); }

/* Bullet list inside step dropdowns. Uses the same subtle row
   separator as the FAQ accordion (`.svc-faq__bullets`) so progressive
   disclosure feels visually consistent across the page. */
.svc-step__bullets {
    list-style: none;
    margin: var(--spacing-sm) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.svc-step__bullets li {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding: var(--spacing-sm) 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: 1.6;
    border-bottom: 1px solid rgba(65, 77, 92, 0.45); /* matches .svc-faq__bullets */
}
.svc-step__bullets li:last-child { border-bottom: none; }
.svc-step__bullets li::before {
    content: "";
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-gold);
    margin-top: calc((1.6em - 6px) / 2);
}

/* "You'll need" mini-row — REMOVED (config no longer used). */

/* Stats strip — scannable scope facts (icon + numeral + label).
   Numerals act as visual anchors; gold accent draws the eye to the
   value first (inverted-pyramid for data). Wraps on narrow screens. */
.svc-step__stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
}
.svc-step__stats__item {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    flex: 1 1 auto;
    min-width: 0;
}
.svc-step__stats__icon {
    color: var(--color-gold);
    font-size: 1.1rem;
    flex-shrink: 0;
}
.svc-step__stats__text { display: flex; flex-direction: column; min-width: 0; }
.svc-step__stats__value {
    font-size: var(--font-size-base);
    font-weight: var(--fw-bold);
    color: var(--color-text-primary);
    line-height: 1.2;
    letter-spacing: -0.01em;
}
.svc-step__stats__label {
    font-size: var(--font-size-xs);
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 2px;
}

/* Progressive disclosure — AWS-Console-style pill button.
   Whole summary is the click target. Explicit "Show more / Hide details"
   action label removes ambiguity for non-technical users. */
.svc-step__details {
    margin-top: var(--spacing-md);
}
.svc-step__details-summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: 0.5rem 0.85rem;
    background: var(--color-aws-blue-light);
    border: 1px solid rgba(83, 159, 229, 0.35);
    border-radius: var(--radius-full);
    color: var(--color-aws-blue);
    font-size: var(--font-size-xs);
    font-weight: var(--fw-semibold);
    -webkit-user-select: none;
    user-select: none;
    transition:
        background var(--transition-fast),
        border-color var(--transition-fast),
        color var(--transition-fast);
}
.svc-step__details-summary::-webkit-details-marker { display: none; }
.svc-step__details-summary:hover {
    background: rgba(83, 159, 229, 0.2);
    border-color: var(--color-aws-blue);
    color: var(--color-aws-blue-hover);
}
.svc-step__details-label {
    text-transform: none;
    letter-spacing: 0;
    color: var(--color-text-primary);
}
.svc-step__details-action {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding-left: var(--spacing-sm);
    border-left: 1px solid rgba(83, 159, 229, 0.4);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
/* Action label swaps via data-attributes — no JS needed */
.svc-step__details-action-text::before { content: attr(data-show); }
.svc-step__details[open] .svc-step__details-action-text::before { content: attr(data-hide); }
.svc-step__details-icon {
    font-size: 0.7rem;
    transition: transform var(--transition-fast);
}
.svc-step__details[open] .svc-step__details-icon { transform: rotate(180deg); }
.svc-step__details-body {
    margin-top: var(--spacing-md);
    padding: var(--spacing-md);
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

/* Mobile — drop the pill's inline action onto its own row beneath
   a hairline separator so the question label can wrap freely above
   without crowding the "Show more / Hide details" affordance. The
   summary stretches to the full card width to give the label room
   and to make the action a clear, tappable footer.

   Driven entirely by flex-wrap + a 100%-basis action row, so adding
   future affordances inside the pill (e.g. an extra meta chip)
   simply slots into the same wrap behavior — no new breakpoints. */
@media (max-width: 480px) {
    .svc-step__details-summary {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        width: 100%;
        border-radius: var(--radius-sm);
    }
    .svc-step__details-label {
        flex: 1 1 100%;
        min-width: 0;
        white-space: normal;
        text-align: center;
    }
    .svc-step__details-action {
        flex: 0 0 100%;
        justify-content: center;
        margin-top: var(--spacing-sm);
        padding: var(--spacing-sm) 0 0;
        padding-left: 0;
        border-left: 0;
        border-top: 1px solid rgba(83, 159, 229, 0.4);
    }
}

/* 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-text-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);
}

/* ----------------------------------------
   Builder — Founder quote card
   ----------------------------------------
   The bio reads as a pull-quote signed by the founder so
   visitors understand the work is owned by a senior team,
   not a single person.

   Layout: two-column grid on desktop (portrait | quote),
   stacked single column on mobile. The decorative opening
   quote glyph anchors to the quote text — never the card —
   so it can never collide with the portrait. Credentials
   span the full card width beneath both columns.

   All sizing uses design tokens; per-instance values
   (portrait width, glyph size) live in single CSS custom
   properties so they're trivial to retune in one place.
   ---------------------------------------- */
.svc-builder__card {
    --svc-builder-portrait-w: 200px;
    --svc-builder-signature-w: 38px;        /* signature is a raster asset; kept small to avoid pixelation */
    --svc-builder-quote-mark-size: 5rem;

    display: grid;
    grid-template-columns: var(--svc-builder-portrait-w) 1fr;
    grid-template-areas:
        "portrait quote"
        "credentials credentials";
    column-gap: var(--spacing-2xl);
    row-gap: var(--spacing-2xl);
    align-items: start;
    padding: var(--spacing-2xl);
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

/* Portrait + signature: framed plate that anchors the
   attribution. Tokens come from the global palette so the
   look stays consistent if the theme is retuned. */
.svc-builder__portrait {
    grid-area: portrait;
    margin: 0;
    padding: var(--spacing-md);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);        /* matches top/bottom padding so signature is vertically centred */
    background: linear-gradient(180deg, var(--color-bg-elevated) 0%, var(--color-bg-alt) 100%);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 6px 18px rgba(0, 7, 22, 0.3);
}
.svc-builder__photo {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-sm);
    object-fit: cover;
    background: var(--color-bg-alt);
    box-shadow:
        0 0 0 1px var(--color-border),
        0 4px 12px rgba(0, 7, 22, 0.4);
}
.svc-builder__signature {
    display: block;
    width: 100%;
    max-width: var(--svc-builder-signature-w);
    height: auto;
    opacity: 0.95;
    filter: brightness(1.6) drop-shadow(0 1px 2px rgba(0, 7, 22, 0.5));
}

/* Quote block — anchored to the right column. The decorative
   opening glyph sits above the bio inside this block, so it
   can never overlap the portrait regardless of viewport. */
.svc-builder__quote {
    grid-area: quote;
    position: relative;
    margin: 0;
    padding-top: calc(var(--svc-builder-quote-mark-size) * 0.55);
}
.svc-builder__quote::before {
    content: "\201C";
    position: absolute;
    top: calc(var(--svc-builder-quote-mark-size) * -0.18);
    left: -0.05em;
    font-family: Georgia, "Times New Roman", serif;
    font-size: var(--svc-builder-quote-mark-size);
    line-height: 1;
    color: var(--color-gold);
    opacity: 0.22;
    pointer-events: none;
}
.svc-builder__bio {
    margin: 0;
    font-size: var(--font-size-lg);
    line-height: 1.65;
    color: var(--color-text-primary);
    font-style: italic;
    letter-spacing: -0.005em;
}

/* Attribution — name + role beneath the quote, separated by
   a hairline so the signing line reads like a real testimonial. */
.svc-builder__attribution {
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.svc-builder__name {
    font-size: var(--font-size-base);
    font-weight: var(--fw-semibold);
    font-style: normal;
    color: var(--color-text-primary);
}
.svc-builder__title {
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--color-gold);
}

/* Credentials grid — spans the full card width below the quote.
   Auto-fit columns so the grid scales with viewport width. */
.svc-builder__credentials {
    grid-area: credentials;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    gap: var(--spacing-sm) var(--spacing-lg);
    list-style: none;
    padding: var(--spacing-lg) 0 0;
    margin: 0;
    border-top: 1px solid var(--color-border);
}
.svc-builder__credential {
    display: grid;
    grid-template-columns: 1.75rem 1fr;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    line-height: 1.45;
}
.svc-builder__credential-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    color: var(--color-gold);      /* fallback when no per-item color */
    flex-shrink: 0;
}
.svc-builder__credential-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}
.svc-builder__credential-icon i { font-size: 1rem; }
.svc-builder__credential-text   { min-width: 0; }

/* ----------------------------------------
   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-trust__grid     { grid-template-columns: repeat(2, 1fr); }
    .svc-pricing__grid   { grid-template-columns: 1fr; max-width: 460px; margin-left: auto; margin-right: auto; }
    .svc-showcase__grid  { grid-template-columns: 1fr; }
    .svc-tier--featured  { order: -1; }
    /* Stacked tiers: preserve per-card banner segmentation by anchoring
       to height (auto width keeps the image's aspect ratio) so each
       card still reveals its own horizontal slice via --svc-banner-index. */
    .svc-tier__banner {
        background-size: auto 100%;
    }
    .svc-info-row        { grid-template-columns: 1fr; gap: var(--spacing-sm); }

    /* Builder — collapse to single column with the portrait centered
       above the quote. The decorative glyph stays anchored to the
       quote text, so it can never collide with the portrait. */
    .svc-builder__card {
        /* Larger portrait + signature on mobile: with the grid collapsed
           to a single centered column, there's no neighboring text to
           compete for width, so a bolder portrait reads better. */
        --svc-builder-portrait-w: 75%;
        --svc-builder-signature-w: 63px;

        grid-template-columns: 1fr;
        grid-template-areas:
            "portrait"
            "quote"
            "credentials";
        padding: var(--spacing-2xl) var(--spacing-lg);
        row-gap: var(--spacing-xl);
    }
    .svc-builder__portrait {
        width: var(--svc-builder-portrait-w);
        max-width: 280px;
        margin: 0 auto;
    }
    .svc-builder__bio { font-size: var(--font-size-base); }

    /* Credentials — 2-column compact grid of badge-style rows so the
       section reads as a cohesive block on narrow viewports. */
    .svc-builder__credentials {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-sm);
    }
    .svc-builder__credential {
        padding: var(--spacing-sm) var(--spacing-md);
        background: var(--color-bg-alt);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-sm);
    }
}

/* ----------------------------------------
   Responsive — mobile (<= 600px)
   ---------------------------------------- */
@media (max-width: 600px) {
    .svc-hero__heading      { font-size: var(--font-size-3xl); }
    .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-trust__grid     { grid-template-columns: 1fr; }
    .svc-trust__item     { padding: var(--spacing-md); }
    .svc-trust__tile     { width: 40px; height: 40px; font-size: 1.05rem; }
    .svc-trust__label    { font-size: var(--font-size-base); }
    .svc-trust__visual   { width: 112px; height: 96px; }
    .svc-section         { padding: var(--spacing-3xl) 0; }
    .svc-step            { grid-template-columns: 1fr; }
    .svc-step__number    { justify-self: start; }
    /* Rail only makes sense in 2-col layout — hide in stacked mode */
    .svc-step:not(:last-child)::before { display: none; }
    .svc-tabcard__tabs   { padding: var(--spacing-sm); }
    .svc-panel__header,
    .svc-panel__hint,
    .svc-info-rows,
    .svc-steps,
    .svc-panel__footnote,
    .svc-panel__error    { padding-inline: var(--spacing-md); }

    .svc-builder__credentials { grid-template-columns: 1fr; }
}