/* ============================================================
   Showcase page styles.
   Loaded alongside the main site's /styles.css — this file only
   adds what styles.css doesn't already cover (hero, numbers bar,
   case studies, creator cards, the quote form, promises, lang
   toggle). Sections alternate between three full-bleed "bands",
   all pulled from tones already used elsewhere on the site rather
   than invented here — .sc-band-coral (the homepage .hero gradient),
   .sc-band-dark (--bg-dark, the same near-black the About page uses
   for its "What sets us apart" section), and .sc-band-light (the
   site's --bg-secondary) — so adjacent sections read as visually
   distinct, matching the homepage's own light/dark/coral rhythm.
   Each <section> is the full-width band; a nested .section-container
   (the site's own class, 1200px) holds the actual content, same
   two-layer pattern the homepage uses for .hero/.hero-container.
   Form field styling is ported from onboarding.php's form components
   so the quote form matches the existing intake form.
   ============================================================ */

.showcase-body {
    background: var(--bg-secondary, #f9fafb);
}

.sc-band-coral {
    /* Flat, not gradient: a diagonal gradient recalculates per-element based
       on that element's own box height, so two adjacent sections with the
       same gradient CSS still show visibly different tones at their shared
       edge. A flat color is pixel-identical across every coral band. */
    background: var(--primary-color, #FF7A59);
}

.sc-band-dark {
    background: var(--bg-dark, #111827);
}

.sc-band-light {
    background: var(--bg-secondary, #f9fafb);
}

/* --accent-color — the lightest, warmest coral stop already in the
   site's palette (no true beige exists anywhere in the codebase; this
   is the closest existing tone). Light enough that the default dark
   .section-title/.section-badge styling still has good contrast, so
   unlike the coral/dark bands below it needs no white-text override. */
.sc-band-accent {
    background: var(--accent-color, #FFB399);
}

/* Section chrome (badge/title/description) sits directly on the band
   background outside of cards. Coral and dark bands need the
   light/white treatment (mirrors the site's existing .section-dark
   pattern); on a light band the site's own default styling already
   has the right contrast, so no override is needed there. */
.sc-band-coral .section-badge,
.sc-band-dark .section-badge {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
    backdrop-filter: blur(10px);
}

.sc-band-coral .section-title,
.sc-band-dark .section-title {
    color: #fff;
}

.sc-band-coral .section-description,
.sc-band-dark .section-description {
    color: rgba(255, 255, 255, 0.85);
}

/* ---------- Lang toggle / Offer toggle ----------
   Same pill mechanism for both — only vertical position differs, so the
   offer toggle stacks under the lang toggle instead of overlapping it. */
.lang-toggle,
.offer-toggle {
    position: fixed;
    right: 1rem;
    z-index: 50;
    display: flex;
    background: white;
    border-radius: 50px;
    box-shadow: 0 10px 25px rgba(0,0,0,.15);
    padding: 0.25rem;
    gap: 0.25rem;
}

.lang-toggle  { top: 1rem; }
.offer-toggle { top: 4rem; }

.lang-toggle a,
.offer-toggle a {
    padding: 0.4rem 0.9rem;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--text-secondary, #6b7280);
}

.lang-toggle a.active,
.offer-toggle a.active {
    background: var(--gradient-primary, linear-gradient(135deg,#FF7A59,#FF9F7A));
    color: white;
}

/* No default-hide rule here on purpose. This file is shared between
   preview.html (which has BOTH pricing sections in its markup, toggled
   by its own JS) and gate.php (the real per-token page, which only ever
   outputs ONE pricing section server-side — the other isn't in the DOM
   at all). A rule like "#pricing-organic { display: none }" here would
   default-hide it on the real page too, with nothing to ever reveal it
   again since gate.php has no offer-toggle to add a body class — which
   is exactly the bug that made organic-interest prospects see no
   pricing section whatsoever. preview.html's own script now handles
   its show/hide entirely with inline styles instead, so this file
   doesn't need to know preview.html's toggle exists. */

/* ---------- Hero (white-on-coral, like the main site's .hero) ---------- */
.sc-hero {
    padding: 5.5rem 0 3.5rem;
    text-align: center;
}

.sc-hero h1 {
    font-size: clamp(1.9rem, 4.5vw, 3rem);
    font-weight: 800;
    line-height: 1.15;
    color: #fff;
    max-width: 780px;
    margin: 0 auto 1.1rem;
}

.sc-hero-tagline {
    font-size: 1.25rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    max-width: 620px;
    margin: 0 auto 1rem;
}

.sc-hero p {
    font-size: 1.05rem;
    color: rgba(255, 255, 255, 0.85);
    max-width: 580px;
    margin: 0 auto 1.75rem;
}

/* .btn-primary / .btn-secondary come from styles.css and are already
   designed for a coral background (white pill, coral text) — no
   override needed here, same as the homepage hero. */

/* ---------- Numbers bar ---------- */
.sc-numbers {
    padding: 1rem 0 3.5rem;
}

.sc-numbers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 220px));
    justify-content: center;
    gap: 1.25rem;
}

/* Flippable stat cards — same accessible mechanism as the review flip
   cards (hover on desktop, tap/click + keyboard elsewhere), but with a
   fixed-height container so flipping never causes layout shift: both
   faces are absolutely positioned inside the same box, so the box's own
   size never changes regardless of which face (or how much text) shows. */
.sc-stat-flip {
    min-height: 190px;
    perspective: 1200px;
    cursor: pointer;
}

.sc-stat-flip-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.45s cubic-bezier(0.4, 0.2, 0.2, 1);
    transform-style: preserve-3d;
}

.sc-stat-flip:hover .sc-stat-flip-inner,
.sc-stat-flip.is-flipped .sc-stat-flip-inner {
    transform: rotateY(180deg);
}

.sc-stat-flip:focus-visible {
    outline: 3px solid white;
    outline-offset: 3px;
    border-radius: 14px;
}

/* justify-content: flex-start, not center — the four cards' desc lines
   wrap to different lengths ("Every age, type and niche..." vs. "From
   idea to final creative."), so centering the whole value+label+desc
   block made the value number and label land at a different height on
   each card depending on how much desc text followed. Anchoring to the
   top means the value and label always start right after the same
   padding, in line across all four cards, regardless of desc length —
   only the trailing whitespace below a short desc varies now. */
.sc-stat-face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 14px;
    padding: 1.5rem 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    background: white;
    box-shadow: 0 6px 18px rgba(0,0,0,0.1);
}

.sc-stat-back {
    transform: rotateY(180deg);
    border-top: 3px solid var(--primary-color, #FF7A59);
}

.sc-stat-value {
    font-size: 2.3rem;
    font-weight: 800;
    background: var(--gradient-primary, linear-gradient(135deg,#FF7A59,#FF9F7A));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.sc-stat-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-primary, #1f2937);
    margin-top: 0.3rem;
}

.sc-stat-desc {
    font-size: 0.72rem;
    color: var(--text-secondary, #6b7280);
    margin-top: 0.5rem;
    line-height: 1.35;
}

.sc-stat-back-line {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--primary-color, #FF7A59);
    margin-bottom: 0.6rem;
}

.sc-stat-back-desc {
    font-size: 0.85rem;
    color: var(--text-secondary, #6b7280);
    line-height: 1.4;
}

/* ---------- Shared section header ---------- */
.sc-section {
    padding: 3.25rem 0;
}

/* Use Cases now carries the real case-study proof (folded into two of
   its cards) as well as the service overview — the single most important
   part of the page — so it gets more vertical room and a larger heading
   than the other sections instead of matching their scale. */
#use-cases {
    padding: 5.5rem 0;
}

#use-cases .section-title {
    font-size: 3rem;
}

.sc-section-header {
    text-align: center;
    max-width: 600px;
    margin: 0 auto 2.25rem;
}

/* ---------- Use Cases: minimal 2x2 case-study grid ----------
   Redesigned per direction: premium/minimalist (Figma-like), lots of
   whitespace, no visual clutter. Cards no longer carry video + full
   narrative inline — each card is just logo/tag, a one-line headline,
   a one-line lead, 4 icon-led metrics (2x2) and a subtle text CTA. The
   full Problem / What We Did / Proof story (plus the client video where
   one exists) lives in the on-click modal below instead. Hover is a
   quiet border highlight + logo color reveal (grayscale -> full color) —
   no scale-pop, no bounce. */
.uc-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem;
}

.uc-card {
    background: #fff;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 20px;
    padding: 2.25rem 2.25rem 2rem;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    text-align: left;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 400ms ease, transform 400ms ease,
                border-color 300ms ease, box-shadow 300ms ease;
}

.uc-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.uc-card:nth-child(2) { transition-delay: 60ms; }
.uc-card:nth-child(3) { transition-delay: 120ms; }
.uc-card:nth-child(4) { transition-delay: 180ms; }

.uc-card:hover,
.uc-card:focus-visible {
    border-color: var(--primary-color, #FF7A59);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

.uc-card:focus-visible {
    outline: none;
}

/* Fixed to the same height as the tallest possible content (a 60px
   logo image) so every card's metric numbers start at the same Y
   position, whether that card has an image logo, a row of logos, or
   just a plain text badge (Confidential / All Clients) — without this,
   text-only cards are ~40px shorter here and their numbers sit higher
   than the image-logo cards', breaking the grid's symmetry. */
.uc-card-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    min-height: 60px;
    margin-bottom: 1.75rem;
}

.uc-card-tag {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-light, #9ca3af);
}

/* Client wordmark/logo — muted by default, same "grayscale shift" idea
   for both real logo images and text stand-ins (Confidential / All
   Clients), reveals full color/contrast only on hover. */
.uc-card-logo {
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: var(--text-light, #9ca3af);
    white-space: nowrap;
    transition: color 300ms ease, filter 300ms ease, opacity 300ms ease;
}

.uc-card-logo--img {
    height: 60px;
    width: auto;
    max-width: 270px;
    object-fit: contain;
    filter: grayscale(1);
    opacity: 0.55;
}

.uc-card:hover .uc-card-logo,
.uc-card:focus-visible .uc-card-logo {
    color: var(--primary-color, #FF7A59);
}

.uc-card:hover .uc-card-logo--img,
.uc-card:focus-visible .uc-card-logo--img {
    filter: grayscale(0);
    opacity: 1;
}

/* Multi-client card (Organic Clients): logos side by side on the same
   row as the tag, each at the same 60px height as every other card's
   single logo (.uc-card-logo--img above, no override here) — sitting
   in one row means they don't add any extra height that would push the
   metrics further down than on any other card. */
.uc-card-logo-row {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

/* ---------- Organic video wall (modal) ----------
   The actual homepage Video Wall treatment (styles.css .video-wall-*,
   ~lines 978-1061): a passive, continuously auto-scrolling marquee, not
   a manual slider — no prev/next/dots, it just slides on its own via a
   CSS animation, with the track's content listed twice back to back so
   -50% lands exactly back on the start with no visible seam. Scaled
   down (smaller tiles, narrower edge fade, no section padding) to sit
   inside this modal column instead of a full-width page section. */
.uc-organic-wall {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.uc-organic-wall::before,
.uc-organic-wall::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 32px;
    z-index: 2;
    pointer-events: none;
}

.uc-organic-wall::before {
    left: 0;
    background: linear-gradient(to right, #fff, transparent);
}

.uc-organic-wall::after {
    right: 0;
    background: linear-gradient(to left, #fff, transparent);
}

@keyframes uc-organic-wall-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.uc-organic-wall-track {
    display: flex;
    gap: 0.65rem;
    width: fit-content;
    animation: uc-organic-wall-scroll 28s linear infinite;
}

.uc-organic-wall-item {
    flex-shrink: 0;
    width: 90px;
    aspect-ratio: 9 / 16;
    border-radius: 10px;
    overflow: hidden;
    background: #000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--border-color, #e5e7eb);
}

.uc-organic-wall-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* The numbers are the card now — no title, no lead paragraph, just
   logo/tag for identity and a subtle CTA underneath. Everything about
   this block is tuned to make the values the first (and loudest) thing
   the eye lands on: nearly 2x the size of the old inline-card numbers,
   with the icon/label kept small and quiet by comparison. */
.uc-metrics {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem 1.25rem;
    margin-bottom: 1.75rem;
}

.uc-metric {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.uc-metric-icon {
    width: 20px;
    height: 20px;
    color: var(--primary-color, #FF7A59);
    margin-bottom: 0.15rem;
}

.uc-metric-value {
    font-size: 2.1rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.05;
    color: var(--text-primary, #1f2937);
}

.uc-metric-label {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    line-height: 1.4;
    color: var(--text-light, #9ca3af);
}

.uc-card-cta {
    margin-top: auto;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--primary-color, #FF7A59);
}

.uc-card-cta span[aria-hidden] {
    display: inline-block;
    transition: transform 300ms ease;
}

.uc-card:hover .uc-card-cta span[aria-hidden],
.uc-card:focus-visible .uc-card-cta span[aria-hidden] {
    transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
    .uc-card {
        opacity: 1;
        transform: none;
        transition: border-color 300ms ease, box-shadow 300ms ease;
    }
}

@media (max-width: 860px) {
    .uc-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .uc-card { padding: 1.75rem 1.5rem; }
    .uc-metric-value { font-size: 1.7rem; }
    .uc-metrics { grid-template-columns: repeat(2, 1fr); gap: 1.25rem 1rem; }
    .sc-form-close { position: static; display: block; margin: 0 0 1.5rem; text-align: right; }
}

/* ---------- Use Cases modal ----------
   Same story structure as the card's underlying content: Problem / What
   We Did / Proof, plus one closing line. Backdrop is a light 20%-black
   scrim (not the near-opaque dark overlay used elsewhere on the site) so
   it reads as quiet, not heavy. Everything fades — no slide-down, no
   scale — matching the "less is more" direction for this section. */
.uc-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 300;
    background: rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.25rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 350ms ease, visibility 0s linear 350ms;
}

.uc-modal-overlay.is-open {
    opacity: 1;
    visibility: visible;
    transition: opacity 350ms ease, visibility 0s linear 0s;
}

.uc-modal {
    position: relative;
    background: #fff;
    border-radius: 22px;
    width: 100%;
    max-width: 780px;
    max-height: 85vh;
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.2);
}

/* Absolute, not a flex sibling of .uc-modal-panel — as a flex item it
   was competing with the panel for width, shrinking it and leaving a
   white gap down the left side. Positioned against .uc-modal's own box
   (not the scrolled content), so it stays put in the corner even when
   the copy column is long enough to scroll. */
.uc-modal-close {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    width: 32px;
    height: 32px;
    border: none;
    background: var(--bg-secondary, #f9fafb);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary, #6b7280);
    cursor: pointer;
    z-index: 2;
    transition: background 200ms ease, color 200ms ease;
}

.uc-modal-close svg {
    width: 14px;
    height: 14px;
}

.uc-modal-close:hover {
    background: var(--border-color, #e5e7eb);
    color: var(--text-primary, #1f2937);
}

/* Fixed, bounded height — not "however tall the copy text happens to
   be." Before, the media column stretched to match the copy column's
   full natural height, so a long Problem/What We Did/Proof story
   produced one huge black slab next to it (a "phone case" running the
   entire scroll height). Now the row itself has a capped height and
   only the copy column scrolls inside it; the video panel stays a
   normal, bounded size regardless of how much text is in the story. */
.uc-modal-panel {
    display: flex;
    width: 100%;
    height: min(600px, 82vh);
}

/* Without this, [hidden] loses to the flex rule above (same specificity,
   author stylesheet order wins) and every panel renders at once — e.g.
   opening any one case study showed all four videos stacked together. */
.uc-modal-panel[hidden] {
    display: none;
}

/* No video on this one, so none of the fixed-height reasoning above
   applies — let it size to its (short) content instead, scrolling
   itself only in the unlikely case that ever overflows 82vh. */
.uc-modal-panel--nomedia {
    height: auto;
    max-height: 82vh;
    overflow-y: auto;
    max-width: 560px;
    margin: 0 auto;
}

/* A true 9:16 black box, sized off the row's fixed height (not a
   percentage width) — the source clips are native 1080x1920, so this
   box is exactly their shape: the video fills it edge to edge with zero
   cropping, instead of being cover-cropped into an arbitrary rectangle. */
.uc-modal-media {
    flex: 0 0 auto;
    aspect-ratio: 9 / 16;
    height: 100%;
    position: relative;
    overflow: hidden;
    background: #000;
    border-radius: 22px 0 0 22px;
}

/* Absolute + inset:0, not width/height:100% — a plain 100% height can't
   resolve against a flex item whose own height comes from stretching
   (circular: media's height depends on the row, the row's height
   depends on media's content, so it collapses to ~0 and the video never
   shows, just the #000 fallback). Taking the video out of flow entirely
   sidesteps that: .uc-modal-media then stretches to match the copy
   column's natural height, and the video simply fills whatever that is. */
.uc-modal-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* A bottom scrim (not a background box) keeps the caption legible over
   whatever the video frame happens to show, without adding any visible
   border/panel around the video. */
.uc-modal-media::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 40%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0));
    pointer-events: none;
}

.uc-modal-media-caption {
    position: absolute;
    left: 1.25rem;
    bottom: 1rem;
    z-index: 1;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.9);
}

/* Organic Clients modal is single-column (no left media panel, see
   .uc-modal-panel--nomedia) — text first, then the video wall, then
   the results grid below. Spacing/divider matching the other fields'
   rhythm since this sits as a sibling of .uc-modal-field/.uc-modal-closing
   rather than inside a full page section. */
.uc-modal-copy .uc-organic-wall {
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color, #e5e7eb);
}

/* Small, always-visible thumbnails (no nav needed) — 4 real analytics
   screenshots, 2 per row, shown uncropped (contain, not cover) since
   they're landscape stat-card crops, not something to cover-crop. */
.uc-modal-results-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color, #e5e7eb);
}

.uc-modal-results-grid img {
    width: 100%;
    height: 90px;
    object-fit: contain;
    background: #f4f4f5;
    border-radius: 8px;
    padding: 0.5rem;
    box-sizing: border-box;
}

.uc-modal-copy {
    flex: 1;
    min-width: 0;
    height: 100%;
    overflow-y: auto;
    padding: 3rem 2.75rem 2.75rem;
}

/* The nomedia panel already scrolls itself (see .uc-modal-panel--nomedia
   above) — a second scroll container nested inside it would be a
   confusing double-scrollbar for no reason, since there's no video
   height to protect here. */
.uc-modal-panel--nomedia .uc-modal-copy {
    height: auto;
    overflow-y: visible;
    padding: 1rem 2.75rem 2.75rem;
}

.uc-modal-title {
    font-size: 1.7rem;
    font-weight: 800;
    letter-spacing: -0.015em;
    line-height: 1.3;
    color: #111;
    margin: 0.6rem 0 1.75rem;
}

.uc-modal-field {
    margin-bottom: 1.75rem;
}

.uc-modal-field-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--primary-color, #FF7A59);
    margin-bottom: 0.5rem;
}

.uc-modal-field-value {
    font-size: 0.95rem;
    line-height: 1.75;
    letter-spacing: 0.01em;
    color: var(--text-secondary, #6b7280);
}

.uc-modal-metrics {
    margin-bottom: 0;
}

/* Raw before/after figures behind a rounded headline metric (e.g. the
   0.18% -> 1.03% CTR move behind the card's "5.7x" tile) — kept as a
   quiet footnote under the grid rather than its own oversized tile, so
   every number in the hero-number grid stays short and legible at size. */
.uc-modal-metrics-detail {
    font-size: 0.78rem;
    color: var(--text-light, #9ca3af);
    margin-top: 1rem;
}

.uc-modal-closing {
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color, #e5e7eb);
}

.uc-modal-closing .uc-modal-field-value {
    margin-top: 0.5rem;
}

@media (max-width: 700px) {
    /* Stacked layout scrolls as one unit (video banner + text together)
       instead of the desktop's fixed-height row with an independently
       scrolling text column — simpler and more expected on a phone. */
    .uc-modal-panel {
        flex-direction: column;
        height: auto;
        max-height: 82vh;
        overflow-y: auto;
    }
    .uc-modal-media { flex: 0 0 auto; aspect-ratio: 16 / 9; border-radius: 22px 22px 0 0; }
    .uc-modal-copy { height: auto; overflow-y: visible; padding: 2rem 1.5rem 2rem; }
    .uc-modal-panel--nomedia .uc-modal-copy { padding: 1.5rem 1.5rem 2rem; }
    .uc-modal-title { font-size: 1.4rem; }
}

/* ---------- Creators: a casting board, not a marketplace grid ----------
   No card container (no white bg, no shadow, no border-heavy box) — the
   video itself is the object, sitting directly on the dark section
   background like a photo on a casting board, with a plain caption
   underneath. Ambient autoplay (no native player controls) keeps it
   feeling like curated motion photography rather than a clickable
   product tile. Strict 9:16, cover-cropped to fit if a source isn't
   already vertical. */
.sc-creator-video {
    aspect-ratio: 9 / 16;
    background: #111827;
    object-fit: cover;
    display: block;
    width: 100%;
    border-radius: 16px;
    border: 1px solid var(--primary-color, #FF7A59);
    transition: opacity 0.3s ease;
}

/* Empty slot — same box as a filled one, honestly marked as not
   populated yet (real creator videos come from a separate library). */
.sc-creator-placeholder {
    aspect-ratio: 9 / 16;
    width: 100%;
    border-radius: 16px;
    border: 1px dashed rgba(255, 255, 255, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1rem;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.7rem;
    font-style: italic;
    line-height: 1.4;
}

.sc-creator-handle--placeholder {
    color: var(--text-light, #9ca3af);
    font-weight: 500;
    font-style: italic;
}

.sc-creators-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    margin-top: 100px;
}

.sc-creator-card {
    position: relative;
    transition: transform 0.3s ease;
}

/* Creator badge — sits on the video's top-right corner, half in / half
   out, like a seal on a premium product shot. A slow continuous spin
   (not a hover effect) is the only motion — minimal, not decorative
   clutter. */
.sc-creator-badge {
    position: absolute;
    top: -28px;
    right: -28px;
    width: 120px;
    height: 120px;
    z-index: 2;
    animation: sc-creator-badge-spin 40s linear infinite;
    pointer-events: none;
}

@keyframes sc-creator-badge-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.sc-creator-card:hover {
    transform: translateY(-3px);
}

.sc-creator-card:hover .sc-creator-video {
    opacity: 0.9;
}

/* Creator videos are click-to-play, not ambient autoplay like the use-case
   proof clips — a prospect deliberately presses play to watch a creator,
   with sound. */
.sc-creator-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1;
    transition: transform 0.2s ease, background 0.2s ease;
}

.sc-creator-play svg {
    color: var(--primary-color, #FF7A59);
    margin-left: 2px;
}

.sc-creator-play:hover {
    background: #fff;
    transform: translate(-50%, -50%) scale(1.08);
}

.sc-creator-card.is-playing .sc-creator-play {
    display: none;
}

.sc-creator-body {
    padding-top: 0.85rem;
    text-align: left;
}

.sc-creator-handle {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-primary, #1f2937);
}

.sc-creator-niche {
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-light, #9ca3af);
    margin-top: 0.2rem;
}

/* ---------- Quote CTA (ported form fields from onboarding.php) ----------
   Editorial composition, not a generic SaaS CTA stack: a centered column
   using the site's own .section-badge eyebrow (consistent with every
   other section on the page) instead of an invented label style. Coral
   shows up in exactly two restrained places — the badge and the flat
   (not gradient) button — everything else is quiet type and one
   hairline divider. */
/* Small padding on purpose — with the teaser removed (the Custom
   Requests section above now opens this instead), the form is fully
   collapsed by default with nothing visible in here, so a big padding
   value would just render as dead empty space between the sections on
   either side. */
/* Small on purpose — collapsed by default (nothing visible inside until
   the Custom Requests button opens it), and this section shares the same
   light band as Creators right after it, so any padding here silently
   stacks on top of that section's own top padding instead of reading as
   a normal single gap. */
.sc-form-section {
    padding: 0.5rem 0;
}

/* Form: collapsed to zero height by default, grows open with its own
   height animation (not just an opacity fade) so nothing below it snaps
   into place abruptly. Presented as a continuation of the CTA column
   above it (same left edge, a hairline divider, no floating card/shadow)
   rather than a separate boxed form. */
.sc-form-wrapper {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    visibility: hidden;
    transition: grid-template-rows 0.45s ease, opacity 0.4s ease;
}

.sc-form-wrapper.is-visible {
    grid-template-rows: 1fr;
    opacity: 1;
    visibility: visible;
}

.sc-form-content {
    position: relative;
    min-height: 0;
    overflow: hidden;
    max-width: 860px;
    margin: 1rem auto 0;
    padding: 2.5rem 0 0.5rem;
    border-top: 1px solid var(--border-color, #e5e7eb);
}

.sc-form-close {
    position: absolute;
    top: 2.5rem;
    right: 0;
    background: none;
    border: none;
    padding: 0;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--text-light, #9ca3af);
    cursor: pointer;
    transition: color 0.2s ease;
}

.sc-form-close:hover {
    color: var(--primary-color, #FF7A59);
}

/* Quote configurator fields — a refined evolution of the site's existing
   form language (same input padding/radius/focus ring below), not a new
   system. Section markers are quiet uppercase labels with a hairline
   rule instead of the old bold underlined heading, matching the same
   "quiet label" convention used on the use-case cards. */
.qf-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    margin-bottom: 0;
}

.qf-block-full {
    margin-top: 2.25rem;
}

.qf-block-title {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-light, #9ca3af);
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
}

.qf-field {
    display: flex;
    flex-direction: column;
}

.qf-field + .qf-field,
.qf-field-row + .qf-field {
    margin-top: 1.4rem;
}

.qf-field label {
    font-weight: 600;
    font-size: 0.88rem;
    line-height: 1.3;
    color: var(--text-primary, #1f2937);
    margin-bottom: 0.45rem;
}

/* Small manual nudge to match Creator tier/Video length's label position
   — tell me "more"/"less" if this isn't quite it, since it's a visual
   call I can't verify pixel-for-pixel here. */
#creatorsField label {
    margin-top: 0.65rem;
}

.qf-microhint {
    display: block;
    font-size: 0.78rem;
    color: var(--text-secondary, #6b7280);
    margin-top: 0.35rem;
}

/* CSS Grid with explicit rows (label / control / hint), and each field
   uses subgrid to inherit those exact row tracks. This is a structural
   guarantee, not a spacing guess: whatever is in row 1 (the label)
   across every field is forced into the same row track, so it cannot
   drift regardless of what renders underneath — a field with no hint
   text just leaves row 3 empty instead of pulling row 1 out of line. */
.qf-field-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto auto;
    align-items: start;
    gap: 1.25rem;
}

.qf-field-row:not(.qf-field-row--stack) .qf-field {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: 1 / span 3;
}

/* Concepts + hooks stack full-width instead of sharing a row. */
.qf-field-row--stack {
    grid-template-columns: 1fr;
}

/* Segmented/pill selection — real checkbox/radio inputs visually hidden,
   their <label> styled as the control, so it stays a native, accessible
   form element rather than a JS-only widget.
   No margin-top here: .qf-field's flex-column layout doesn't collapse
   margins between children, so an extra margin-top here would stack on
   top of the field label's own margin-bottom, giving option-group fields
   more label-to-control spacing than plain-input fields get. Spacing
   comes solely from the label's margin-bottom, for both component types. */
.qf-option-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.qf-option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.55rem 1.1rem;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary, #1f2937);
    background: white;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
    user-select: none;
}

.qf-option:hover {
    border-color: var(--primary-color, #FF7A59);
}

.qf-option-input:checked + .qf-option {
    background: var(--primary-color, #FF7A59);
    border-color: var(--primary-color, #FF7A59);
    color: #fff;
}

.qf-option-input:focus-visible + .qf-option {
    outline: 2px solid var(--primary-color, #FF7A59);
    outline-offset: 2px;
}

/* Segmented variant (single-select controls: engagement, tier, duration,
   usage) reads as one joined control instead of loose pills. */
.qf-segmented {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 10px;
    background: #fff;
}

.qf-segmented .qf-option {
    border: none;
    border-radius: 8px;
    background: transparent;
    padding: 0.5rem 1rem;
}

.qf-segmented .qf-option:hover {
    color: var(--primary-color, #FF7A59);
}

.qf-segmented .qf-option-input:checked + .qf-option {
    background: var(--primary-color, #FF7A59);
    color: #fff;
}

/* Extra hooks: collapses to zero height (not just hidden) when no paid
   platform is selected, so it disappears cleanly below Core concepts
   instead of leaving empty vertical space. JS removes it from flow
   entirely once the collapse animation finishes (see script). */
.qf-collapsible {
    max-height: 160px;
    overflow: hidden;
    opacity: 1;
    transition: max-height 0.4s ease, opacity 0.3s ease;
}

.qf-collapsible.is-collapsed {
    max-height: 0;
    opacity: 0;
    pointer-events: none;
}

.qf-collapsible-inner {
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* The live calculation — the single strongest visual moment in the form,
   reusing the same big-coral-number "hero stat" language already used
   on the use-case cards, not a new pattern. */
.qf-calc {
    margin-top: 1.5rem;
    padding: 1.5rem 1.75rem;
    background: #fff;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 14px;
}

.qf-calc-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-light, #9ca3af);
    margin-bottom: 0.5rem;
}

.qf-calc-formula {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-secondary, #6b7280);
    margin-bottom: 0.25rem;
    min-height: 1.3em;
}

.qf-calc-result {
    font-size: 2.25rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.1;
    color: var(--primary-color, #FF7A59);
}

.qf-calc-sub {
    font-size: 0.8rem;
    color: var(--text-secondary, #6b7280);
    margin-top: 0.4rem;
}

.qf-summary {
    padding: 1.75rem;
    background: #fff;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 14px;
}

.qf-summary-total {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--text-primary, #1f2937);
}

.qf-summary-line {
    font-size: 0.9rem;
    color: var(--text-secondary, #6b7280);
    margin-top: 0.35rem;
}

.qf-post-submit-note {
    text-align: center;
    font-size: 0.82rem;
    color: var(--text-secondary, #6b7280);
    margin-top: 0.85rem;
}

@media (max-width: 820px) {
    .qf-grid { grid-template-columns: 1fr; gap: 1.75rem; }
}

.sc-form-content input[type="text"],
.sc-form-content input[type="email"],
.sc-form-content input[type="url"],
.sc-form-content input[type="number"],
.sc-form-content textarea,
.sc-form-content select {
    padding: 0.8rem 0.95rem;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 12px;
    font-family: inherit;
    font-size: 0.92rem;
    color: var(--text-primary, #1f2937);
    background: white;
}

.sc-form-content input:focus,
.sc-form-content textarea:focus,
.sc-form-content select:focus {
    outline: none;
    border-color: var(--primary-color, #FF7A59);
    box-shadow: 0 0 0 3px rgba(255,122,89,0.1);
}

.message {
    padding: 1rem 1.3rem;
    border-radius: 12px;
    margin-bottom: 1.4rem;
    display: none;
    font-size: 0.88rem;
}

.message.success {
    background: #d1fae5;
    color: #065f46;
    border: 1px solid #6ee7b7;
    display: block;
}

.message.error {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fca5a5;
    display: block;
}

/* Same gradient/shadow/pill button used site-wide — matches the teaser
   CTA above the form and onboarding.php's own .btn-submit. */
.sc-form-content .btn-submit {
    background: var(--gradient-primary, linear-gradient(135deg,#FF7A59,#FF9F7A));
    color: white;
    border: none;
    padding: 1rem 2.25rem;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    width: 100%;
    margin-top: 2rem;
    box-shadow: 0 4px 15px rgba(255,122,89,0.3);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.sc-form-content .btn-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(255,122,89,0.4);
}

.sc-form-privacy {
    text-align: center;
    font-size: 0.78rem;
    color: var(--text-light, #9ca3af);
    margin-top: 1rem;
}

/* Honeypot — hidden from real visitors, present for bots that auto-fill forms */
.sc-hp-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}


/* ---------- Pricing (organic) ----------
   Same fonts, colors and shadow tokens as the rest of the site (Inter,
   var(--primary-color)/--shadow-lg/--border-color) on the section's
   flat coral band (.sc-band-coral, same as the hero) — only the warm
   off-white card background is new, everything else is reused. */
.sc-pricing-intro {
    color: #fff;
    font-size: 1.15rem;
    line-height: 1.7;
    text-align: center;
    max-width: 720px;
    margin: 0 auto 1rem;
}

/* The credit callout sentence — sits below both pricing cards (a
   sibling of .sc-pricing-cards inside .sc-pricing-wrap, so it spans
   full width instead of following either column) rather than in the
   intro copy above the cards. */
.sc-pricing-credit-line {
    max-width: 640px;
    margin: 2rem auto 0;
    text-align: center;
    color: #fff;
    font-weight: 700;
    font-size: 1.1rem;
    line-height: 1.6;
}

.sc-pricing-wrap {
    margin-top: 3rem;
}

/* Narrower than the full section width — two modest columns instead of
   two cards stretched edge-to-edge, so neither card (nor its price)
   dominates the section. */
.sc-pricing-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    max-width: 900px;
    margin: 0 auto;
}

/* Same rest/hover language as .package-card elsewhere on the site: flat
   at rest (no shadow), border + lift only on hover — plain background
   color is the only real difference. */
.sc-pricing-card {
    background: #FFF9F7;
    border: 2px solid var(--border-color, #e5e7eb);
    border-radius: 18px;
    padding: 2rem 1.75rem;
    box-sizing: border-box;
    transition: all 0.3s ease;
}

.sc-pricing-card:hover {
    border-color: var(--primary-color);
    box-shadow: 0 16px 40px rgba(255, 122, 89, 0.12);
    transform: translateY(-4px);
}

.sc-pricing-pill {
    display: block;
    color: var(--primary-color, #FF7A59);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 0.6rem;
}

.sc-pricing-title {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--text-primary, #1f2937);
    margin-bottom: 1.1rem;
}

.sc-pricing-price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.25rem;
}

.sc-pricing-amount {
    font-size: clamp(1.5rem, 2vw, 1.75rem);
    font-weight: 800;
    line-height: 1;
    color: var(--primary-color, #FF7A59);
}

.sc-pricing-unit {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-secondary, #6b7280);
}

.sc-pricing-divider {
    height: 1px;
    background: var(--border-color, #e5e7eb);
    margin-bottom: 1.5rem;
}

.sc-pricing-desc {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-secondary, #6b7280);
    margin-bottom: 1.5rem;
}

/* Bullet list reuses the site's existing .pkg-includes component as-is
   (see styles.css) instead of a parallel checkmark implementation —
   only the bonus-line accent color is new. Selectors match
   .pkg-includes li('s specificity so this actually overrides it. */
.pkg-includes li.sc-pricing-feature--bonus,
.pkg-includes li.sc-pricing-feature--bonus::before {
    color: var(--primary-dark, #E55A35);
}

/* Reserves the same height as the Test Phase card's extra first line
   ("Thorough Niche & Competitor Research", Retainer-only removed but
   still needed for row alignment) without showing it — same spacer
   technique as .sc-pricing-banner--spacer above. */
.pkg-includes li.sc-pricing-item--spacer {
    visibility: hidden;
}

/* Organic pricing only: price amount and its "X concepts / videos"
   unit stack on their own lines instead of sharing one row — scoped to
   #pricing-organic so the shared .sc-pricing-price/-amount/-unit rules
   (still used inline by #pricing-ads) are untouched. */
#pricing-organic .sc-pricing-price {
    display: block;
}

#pricing-organic .sc-pricing-amount {
    display: block;
}

#pricing-organic .sc-pricing-unit {
    display: block;
    margin-top: 0.35rem;
}

/* Retainer-only "what's extra" block: a second, visually separated
   checkmark list at the bottom of the Retainer card, in the coral
   accent color, so what you only get with the Retainer (beyond the
   identical list shared with the Test Phase above it) is immediately
   obvious rather than blended into one long list. */
#pricing-organic .sc-pricing-extra {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px dashed rgba(255, 122, 89, 0.35);
}

#pricing-organic .sc-pricing-extra-label {
    display: block;
    color: var(--primary-color, #FF7A59);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
}

/* The refund badge — lives inside the Retainer card itself now (its own
   offer, not something floating between both cards), same recipe as the
   site's existing .popular-badge: gradient pill, no border, sitting in
   normal flow at the top of the card's off-white area. */
.sc-pricing-banner {
    display: inline-block;
    line-height: 1.4;
    background: var(--gradient-primary);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
    padding: 0.55rem 1.5rem;
    border-radius: 50px;
    margin-bottom: 1.25rem;
}

/* Same markup/copy as the real badge, kept invisible in the Test Phase
   card — reserves the exact same height so the pill label, title, price
   and everything below it line up row-for-row between both columns,
   instead of the Retainer card's extra badge pushing only its own
   content down. */
.sc-pricing-banner--spacer {
    visibility: hidden;
}

/* Reassurance line + legal footnote, grouped in .sc-pricing-notes (the
   3rd child of .sc-pricing-cards, so grid auto-placement drops it into
   row 2 / column 1 — right under the Test Phase card, not spanning or
   centered under both), left-aligned and stacked instead of the
   footnote's usual right-aligned, full-width placement. */
.sc-pricing-notes {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.sc-pricing-note {
    margin: 0;
    text-align: left;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.78rem;
    line-height: 1.6;
}

/* Base footnote styling (max-width/right-align/top-margin) stays as-is
   for #pricing-ads, which still places it full-width below both cards;
   overridden below for #pricing-organic where it now stacks under the
   note instead. */
.sc-pricing-footnote {
    max-width: 900px;
    margin: 2rem auto 0;
    text-align: right;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.78rem;
}

#pricing-organic .sc-pricing-footnote {
    max-width: none;
    margin: 0;
    text-align: left;
}

@media (max-width: 900px) {
    .sc-pricing-cards { gap: 1.25rem; }
    .sc-pricing-card { padding: 1.6rem 1.5rem; }
    .sc-pricing-banner { font-size: 0.78rem; padding: 0.5rem 1.1rem; }
}

@media (max-width: 680px) {
    .sc-pricing-cards { grid-template-columns: 1fr; gap: 1.5rem; }
    /* Cards stack into one column here, so DOM order alone would put the
       note (3rd child) after the Retainer card — force it back to sit
       right after the Test Phase card, same as the 2-column layout. */
    .sc-pricing-card:first-of-type { order: 1; }
    .sc-pricing-notes { order: 2; }
    .sc-pricing-card:last-of-type { order: 3; }
    .sc-pricing-wrap { margin-top: 2.25rem; }
    .sc-pricing-intro { font-size: 1rem; }
    .sc-pricing-footnote { text-align: center; }
}

/* ═══════════════════════════════════════════════════════════
   Responsive — mirrors the main site's breakpoints (768px / 600px)
   so the showcase page tracks the homepage instead of its own scale.
   ═══════════════════════════════════════════════════════════ */

/* ── 768px (site's tablet/large-mobile breakpoint) ─────────── */
@media (max-width: 768px) {
    .sc-hero { padding: 4.5rem 0 2.5rem; }
    .sc-section { padding: 2.75rem 0; }
    .sc-form-section { padding: 0.5rem 0; }
    .sc-numbers { padding: 0.5rem 0 2.75rem; }

    .sc-numbers-grid { grid-template-columns: repeat(2, 1fr); max-width: 460px; margin: 0 auto; }
    .sc-creators-grid { grid-template-columns: repeat(2, 1fr); max-width: 380px; margin: 0 auto; }

}

/* ── 600px (site's small-mobile breakpoint) ────────────────── */
@media (max-width: 600px) {
    .sc-numbers-grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; max-width: 340px; margin: 0 auto; }
    .sc-creators-grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
    .sc-creator-badge { width: 84px; height: 84px; top: -20px; right: -20px; }
}

/* ---------- Gate messages (invalid/expired link) ----------
   Reuses .section-title/.section-description/.cta-button/.sc-band-light
   as-is — just a narrower, vertically padded reading column, nothing
   invented. */
.sc-gate-container {
    max-width: 560px;
    text-align: center;
    padding-top: 6rem;
    padding-bottom: 6rem;
}

.sc-gate-container .cta-button {
    display: inline-block;
    text-decoration: none;
    margin-top: 1.5rem;
}

/* Same spacing as .sc-gate-container's cta-button above — a button
   directly under a .section-description needs its own top margin since
   the description itself carries none. .btn-primary (white pill, coral
   text) rather than .cta-button here since this section sits on the
   coral band, same reasoning as the homepage hero's own buttons. */
#custom-offer .btn-primary {
    display: inline-block;
    margin-top: 1.5rem;
}

/* Same spacing fix as #custom-offer .btn-primary above, but .cta-button
   here since this section sits on a light band, not coral. */
#next-step .cta-button {
    display: inline-block;
    text-decoration: none;
    margin-top: 1.5rem;
}

.sc-gate-email {
    margin-top: 1rem;
    font-size: 0.85rem;
    color: var(--text-light, #9ca3af);
}

.sc-gate-email a {
    color: var(--primary-color, #FF7A59);
    font-weight: 600;
    text-decoration: none;
}

/* Closing CTA: a plain bordered box instead of a button — the only
   action here is "email us", so it reads as an invitation rather than
   a form submission. */
.sc-contact-box {
    display: inline-block;
    margin-top: 0.5rem;
    padding: 1.1rem 2rem;
    background: #fff;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: 14px;
    font-size: 1rem;
    color: var(--text-secondary, #6b7280);
}

.sc-contact-box a {
    color: var(--primary-color, #FF7A59);
    font-weight: 700;
    text-decoration: none;
}

.sc-contact-box a:hover {
    text-decoration: underline;
}

.sc-gate-email a:hover {
    text-decoration: underline;
}