/*
 * Leadsscape Bank-Ready Premium Experience
 * Layer: reusable components, active homepage, and core-page theme.
 * Depends on main.css for reset/base compatibility; intentionally loaded last.
 */
:root {
  --ls-premium-navy: #0a2540;
  --ls-premium-navy-deep: #071d33;
  --ls-premium-blue: #0073aa;
  --ls-premium-blue-bright: #11a8e8;
  --ls-premium-ink: #111827;
  --ls-premium-muted: #53657a;
  --ls-premium-border: rgba(10, 37, 64, 0.12);
  --ls-premium-surface: #f3f6f9;
  --ls-premium-white: #fff;
  --ls-premium-radius-sm: 12px;
  --ls-premium-radius: 20px;
  --ls-premium-radius-lg: 28px;
  --ls-premium-shadow: 0 24px 64px rgba(10, 37, 64, 0.1);
  /* Founder screenshot review (2026-07-21): padding-block never collapses
     (unlike margin), so two adjacent <section class="ls-premium-section">
     elements always add their padding-bottom + padding-top together. The
     2026-07-19 pass reduced the token to clamp(3.25rem,6vw,5.5rem) but
     that still produces up to 2 x 5.5rem = 176px of dead gap between
     same-background sections (e.g. Core Solutions -> Who This Is For,
     Why Leadsscape -> FAQ) - still above CINEMATIC_SPACING.md's 96-120px
     "Standard" band once doubled. Tightened so two stacked sections land
     inside that band (2 x 44-64px = 88-128px) instead of exceeding it. */
  --ls-premium-section: clamp(2.75rem, 4.5vw, 4rem);
}

html { scroll-behavior: smooth; }
body { color: var(--ls-premium-ink); background: var(--ls-premium-white); }
.ls-container { width: min(1180px, calc(100% - 48px)); margin-inline: auto; padding-inline: 0; }
.ls-eyebrow,
.ls-premium-eyebrow { display: block; margin: 0 0 1rem; color: var(--ls-premium-blue); font-size: .75rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.ls-premium h1,
.ls-premium-page h1 { max-width: 780px; margin: 0; color: var(--ls-premium-navy); font-size: clamp(2.75rem, 6vw, 5rem); line-height: 1.02; letter-spacing: -.045em; }
.ls-premium h2,
.ls-premium-page h2 { margin: 0; color: var(--ls-premium-navy); font-size: clamp(1.75rem, 3.2vw, 2.75rem); line-height: 1.12; letter-spacing: -.03em; }
.ls-premium h3,
.ls-premium-page h3 { color: var(--ls-premium-navy); line-height: 1.25; }
.ls-premium p,
.ls-premium-page p { color: var(--ls-premium-muted); font-size: 1.0625rem; line-height: 1.72; }
.ls-premium-section { padding-block: var(--ls-premium-section); }
.ls-premium-section--soft { background: var(--ls-premium-surface); }
.ls-premium-section--dark { color: #fff; background: var(--ls-premium-navy-deep); }
.ls-premium-section--dark h2,
.ls-premium-section--dark h3 { color: #fff; }
.ls-premium-section--dark p { color: rgba(255,255,255,.74); }
/* Founder screenshot review (2026-07-21): align-items:end bottom-aligned
   the heading column against the paragraph column, so the paragraph's
   vertical position shifted with however many lines the H2 wrapped to -
   the literal cause of "supporting paragraph too high/low/far away" and
   inconsistent baselines between repeated two-column section intros.
   start gives every section intro across the site the same predictable
   baseline: heading and paragraph both begin on the same top line. */
.ls-premium-intro { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(300px, .75fr); gap: 3rem; align-items: start; margin-bottom: 2.25rem; }
.ls-premium-intro p { margin: 0; max-width: 46ch; }
.ls-premium-actions { display: flex; flex-wrap: wrap; gap: .875rem; align-items: center; margin-top: 2rem; }
.ls-premium .ls-btn,
.ls-premium-page .ls-btn { min-height: 50px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--ls-premium-radius-sm); padding: .875rem 1.4rem; text-decoration: none; }
.ls-premium .ls-btn-primary,
.ls-premium-page .ls-btn-primary { border-color: var(--ls-premium-blue); background: var(--ls-premium-blue); color: #fff; box-shadow: 0 14px 30px rgba(0,115,170,.22); }
.ls-premium .ls-btn-secondary,
.ls-premium-page .ls-btn-secondary { border: 1px solid var(--ls-premium-navy); background: transparent; color: var(--ls-premium-navy); }
.ls-premium-text-link { display: inline-flex; gap: .45rem; align-items: center; color: var(--ls-premium-blue); font-weight: 800; text-decoration: none; }
.ls-premium a:focus-visible,
.ls-header a:focus-visible,
.ls-header summary:focus-visible,
.ls-footer a:focus-visible { outline: 3px solid var(--ls-premium-blue-bright); outline-offset: 4px; }

/* Header */
.ls-header { position: relative; z-index: 20; border-bottom: 1px solid var(--ls-premium-border); background: rgba(255,255,255,.97); }
.ls-header-inner { min-height: 78px; gap: 2rem; }
.ls-logo-text { color: var(--ls-premium-navy); font-weight: 800; letter-spacing: -.02em; }
.ls-nav { gap: clamp(.8rem, 1.7vw, 1.45rem); }
.ls-nav > a:not(.ls-btn) { color: #34475c; font-size: .92rem; font-weight: 700; }
.ls-mobile-nav { display: none; margin-left: auto; }
.ls-mobile-nav summary { cursor: pointer; border: 1px solid var(--ls-premium-border); border-radius: 10px; padding: .7rem .9rem; color: var(--ls-premium-navy); font-weight: 800; list-style: none; }
.ls-mobile-nav-panel { position: absolute; top: 100%; right: 24px; left: 24px; display: grid; gap: .25rem; border: 1px solid var(--ls-premium-border); border-radius: 16px; padding: 1rem; background: #fff; box-shadow: var(--ls-premium-shadow); }
.ls-mobile-nav-panel a { min-height: 44px; display: flex; align-items: center; border-radius: 8px; padding: .55rem .75rem; color: var(--ls-premium-navy); font-weight: 700; text-decoration: none; }

/* Homepage */
/* Founder screenshot review (2026-07-21): 4.75-7rem (76-112px) of top
   padding pushed the hero copy too far below the header before the H1
   became visible. Tightened so the value proposition reads immediately
   on load without shrinking the header-to-hero gap to zero. */
.ls-premium-hero { overflow: hidden; padding: clamp(3.5rem, 5.5vw, 5rem) 0 3rem; background: linear-gradient(135deg, #f7fafc 0%, #fff 62%, #edf5f8 100%); }
.ls-premium-hero-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(380px, .9fr); gap: clamp(3rem, 7vw, 6rem); align-items: center; }
/* Codex audit follow-up (Founder screenshot review, 2026-07-19): the base
   .ls-premium-page h1 rule (clamp up to 5rem/80px) was designed for a
   full-width headline, but the hero copy column is only ~550-650px wide.
   At 80px that produced 5-6 mechanically-wrapped lines. This scoped
   override sizes the hero H1 so it wraps into natural, phrase-aligned
   lines instead (verified in-browser: "Build a lead system that" /
   "captures, qualifies, and converts" / "more opportunities."). */
.ls-premium-hero-copy h1 { max-width: 640px; font-size: clamp(1.85rem, 2.9vw, 2.625rem); line-height: 1.12; letter-spacing: -.025em; }
.ls-premium-hero-copy > p { max-width: 560px; margin: 1.5rem 0 0; font-size: clamp(1.05rem, 1.5vw, 1.2rem); }
.ls-premium-hero .ls-premium-text-link { margin-top: 1.25rem; }
.ls-revenue-console { border: 1px solid rgba(17,168,232,.2); border-radius: var(--ls-premium-radius-lg); padding: clamp(1.5rem, 3vw, 2.25rem); background: var(--ls-premium-navy-deep); color: #fff; box-shadow: 0 34px 80px rgba(7,29,51,.24); }
.ls-revenue-console-head { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: 1.2rem; border-bottom: 1px solid rgba(255,255,255,.14); }
.ls-revenue-console-head strong { font-size: 1rem; }
.ls-revenue-console-head span { color: #84d8f5; font-size: .76rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.ls-revenue-flow { display: grid; gap: .7rem; margin-top: 1.4rem; list-style: none; padding: 0; margin-left: 0; }
.ls-revenue-flow li { display: grid; grid-template-columns: 34px 1fr auto; gap: .8rem; align-items: center; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; padding: .85rem; background: rgba(255,255,255,.055); }
.ls-revenue-flow b { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: rgba(17,168,232,.17); color: #84d8f5; font-size: .72rem; }
.ls-revenue-flow small { color: rgba(255,255,255,.58); }
.ls-trust-strip { border-block: 1px solid var(--ls-premium-border); background: #fff; }
.ls-trust-strip ul { display: grid; grid-template-columns: repeat(5, 1fr); margin: 0; padding: 1.4rem 0; list-style: none; }
.ls-trust-strip li { padding: .4rem 1rem; border-right: 1px solid var(--ls-premium-border); color: var(--ls-premium-navy); font-size: .82rem; font-weight: 800; text-align: center; }
.ls-trust-strip li:last-child { border-right: 0; }
.ls-editorial-problems { display: grid; grid-template-columns: .75fr 1.25fr; gap: clamp(3rem, 8vw, 7rem); align-items: start; }
.ls-problem-list { margin: 0; padding: 0; list-style: none; counter-reset: problem; }
.ls-problem-list li { counter-increment: problem; display: grid; grid-template-columns: 42px 1fr; gap: 1rem; padding: 1.25rem 0; border-top: 1px solid var(--ls-premium-border); }
.ls-problem-list li::before { content: "0" counter(problem); color: var(--ls-premium-blue); font-size: .78rem; font-weight: 800; }
.ls-problem-list strong { display: block; color: var(--ls-premium-navy); }
.ls-problem-list span { display: block; margin-top: .35rem; color: var(--ls-premium-muted); line-height: 1.55; }
.ls-solutions-start-fallback { margin-top: 2rem; }
.ls-process-rail { display: grid; grid-template-columns: repeat(7, 1fr); margin: 3rem 0 0; padding: 0; list-style: none; }
.ls-process-rail li { position: relative; min-height: 124px; padding: 1rem .8rem; border-top: 2px solid rgba(255,255,255,.22); }
.ls-process-rail li::before { content: ""; position: absolute; top: -6px; left: .8rem; width: 10px; height: 10px; border-radius: 50%; background: var(--ls-premium-blue-bright); }
.ls-process-rail span { display: block; margin-bottom: 1rem; color: #84d8f5; font-size: .7rem; font-weight: 800; }
.ls-process-rail strong { color: #fff; }
.ls-outcome-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; }
.ls-outcome-card { min-height: 220px; padding: 1.55rem; border: 1px solid var(--ls-premium-border); border-radius: var(--ls-premium-radius); background: #fff; }
.ls-outcome-card span { color: var(--ls-premium-blue); font-size: .73rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.ls-outcome-card h3 { margin: 1.6rem 0 .7rem; font-size: 1.22rem; }
.ls-outcome-card p { margin: 0; font-size: .96rem; }
/* Founder screenshot review (2026-07-21): the Acquire -> Capture -> Qualify
   -> Convert -> Learn journey read as five unrelated boxes with no visual
   sequence. Connector only renders at the one width where the grid is a
   true single row of 5 (base rule above 1024px); the 1024px and 768px
   breakpoints already reflow this grid to 3 and 2 columns respectively, so
   a connector spanning card N -> N+1 would cross into the wrong row. At
   those widths the stage eyebrow (ACQUIRE/CAPTURE/...) already carries the
   sequence, so the connector is removed rather than shown broken. */
@media (min-width: 1025px) {
  .ls-outcome-grid { gap: 1.85rem; }
  .ls-outcome-card { position: relative; }
  .ls-outcome-card:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 2.05rem;
    right: -1.85rem;
    width: 1.85rem;
    height: 2px;
    background: repeating-linear-gradient(to right, rgba(10,37,64,.22) 0 6px, transparent 6px 11px);
    pointer-events: none;
  }
  .ls-outcome-card:not(:last-child)::before {
    content: "";
    position: absolute;
    top: 1.72rem;
    right: -1.15rem;
    width: 9px;
    height: 9px;
    border-top: 2px solid var(--ls-premium-blue);
    border-right: 2px solid var(--ls-premium-blue);
    transform: rotate(45deg);
    pointer-events: none;
  }
}
.ls-walkthrough-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(3rem, 7vw, 6rem); align-items: center; }
.ls-walkthrough-poster { aspect-ratio: 16/9; display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; border: 1px solid rgba(17,168,232,.18); border-radius: var(--ls-premium-radius-lg); padding: 1.25rem; background: var(--ls-premium-navy-deep); box-shadow: var(--ls-premium-shadow); list-style: none; margin: 0; }
.ls-walkthrough-poster li { display: flex; flex-direction: column; justify-content: flex-end; border-radius: 14px; padding: 1rem; background: rgba(255,255,255,.065); color: #fff; }
.ls-walkthrough-poster small { margin-top: .35rem; color: rgba(255,255,255,.64); }

/* Founder screenshot review (2026-07-21): the homepage had no honest
   video-placeholder treatment - the no-video fallback was a plain static
   diagram with no play affordance, so it did not read as "a video is
   planned here." This overlays a disabled-styled play badge on the same
   diagram (now dimmed to opacity .5 so the badge stays legible) instead
   of pretending a video is live or leaving the section unlabeled. When a
   real video is configured via leadsscape_get_walkthrough_config(), this
   branch never renders - the real <video> element does instead. */
.ls-walkthrough-visual { display: flex; flex-direction: column; gap: 1rem; }
.ls-walkthrough-frame { position: relative; }
.ls-walkthrough-frame .ls-walkthrough-poster { opacity: .5; }
.ls-walkthrough-badge { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .75rem; padding: 1.5rem; text-align: center; color: #fff; }
.ls-walkthrough-badge-play { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: rgba(255,255,255,.14); border: 1.5px solid rgba(255,255,255,.42); }
.ls-walkthrough-badge strong { max-width: 220px; font-size: .98rem; font-weight: 800; letter-spacing: -.01em; text-shadow: 0 2px 12px rgba(7,29,51,.55); }
.ls-walkthrough-caption { margin: 0; color: var(--ls-premium-muted); font-size: .92rem; line-height: 1.6; }

/* Codex audit follow-up (Founder mandate Section 6, 2026-07-19): premium
   click-to-load YouTube facade. Reuses .ls-walkthrough-poster for the 16:9
   frame, border, radius, and shadow (Video Frame Rule in
   docs/Design_Intelligence/PREMIUM_LAYOUT_PATTERNS.md - integrated, not a
   floating embed), then overrides its grid/padding so the poster image and
   play button can fill the frame edge-to-edge instead of the 4-cell layout
   built for the no-video fallback list. */
.ls-youtube-facade-wrap { position: relative; display: block; padding: 0; overflow: hidden; }
.ls-youtube-facade { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border: 0; padding: 0; background-color: var(--ls-premium-navy-deep); background-size: cover; background-position: center; cursor: pointer; }
.ls-youtube-facade::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7,29,51,.05), rgba(7,29,51,.55)); pointer-events: none; }
.ls-youtube-facade-play { position: relative; z-index: 1; display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; color: #fff; background: rgba(17,168,232,.92); box-shadow: 0 18px 40px rgba(7,29,51,.4); transition: transform .15s ease, background-color .15s ease; }
.ls-youtube-facade:hover .ls-youtube-facade-play,
.ls-youtube-facade:focus-visible .ls-youtube-facade-play { transform: scale(1.08); background: var(--ls-premium-blue-bright); }
.ls-youtube-facade:focus-visible { outline: 3px solid var(--ls-premium-blue-bright); outline-offset: 3px; }
.ls-youtube-facade-frame { width: 100%; height: 100%; border: 0; }
.ls-youtube-facade-transcript { display: block; margin-top: .85rem; color: var(--ls-premium-blue-bright); font-weight: 700; text-decoration: none; }
/* Founder screenshot review (2026-07-21): clamp(2rem,5vw,4.5rem) (32-72px)
   card padding left a visible band of empty canvas below the shorter
   column's content at desktop widths - "several sections look incomplete
   because content occupies only part of a large section canvas." Tightened
   toward CINEMATIC_SPACING.md's card-padding "Premium" tier (36-44px). */
.ls-assessment-panel { display: grid; grid-template-columns: 1fr .8fr; gap: 2rem; align-items: center; border: 1px solid var(--ls-premium-border); border-radius: var(--ls-premium-radius-lg); padding: clamp(1.75rem, 3.5vw, 2.75rem); background: #fff; box-shadow: var(--ls-premium-shadow); }
.ls-assessment-deliverables { margin: 0; padding: 0; list-style: none; }
.ls-assessment-deliverables li { padding: .85rem 0; border-bottom: 1px solid var(--ls-premium-border); color: var(--ls-premium-navy); font-weight: 750; }
.ls-differentiators { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem 2rem; margin-top: 2.25rem; }
.ls-differentiators article { padding-top: 1.2rem; border-top: 2px solid var(--ls-premium-blue); }
.ls-differentiators h3 { margin: 0 0 .6rem; font-size: 1.05rem; }
.ls-differentiators p { margin: 0; font-size: .94rem; }

/* Need-based pathway cards (homepage "find your starting point") */
.ls-pathway-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-top: 2.25rem; }
.ls-pathway-card { display: flex; flex-direction: column; gap: .75rem; border: 1px solid var(--ls-premium-border); border-radius: var(--ls-premium-radius); padding: 1.55rem; background: #fff; box-shadow: 0 20px 50px rgba(10,37,64,.05); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.ls-pathway-card:hover { transform: translateY(-3px); border-color: rgba(0,115,170,.35); box-shadow: 0 26px 60px rgba(10,37,64,.08); }
.ls-pathway-card h3 { margin: 0; font-size: 1.05rem; }
.ls-pathway-card p { margin: 0; font-size: .93rem; }
.ls-pathway-card .ls-premium-text-link { margin-top: auto; font-size: .92rem; }

/* FAQ / decision-guidance list (homepage) */
.ls-faq-list { display: grid; gap: 0; margin: 2.25rem 0 0; }
.ls-faq-item { padding: 1.5rem 0; border-top: 1px solid var(--ls-premium-border); }
.ls-faq-item:last-child { border-bottom: 1px solid var(--ls-premium-border); }
.ls-faq-item dt { margin: 0 0 .5rem; color: var(--ls-premium-navy); font-size: 1.05rem; font-weight: 750; }
.ls-faq-item dd { margin: 0; max-width: 72ch; color: var(--ls-premium-muted); font-size: .97rem; line-height: 1.7; }
.ls-premium-close { padding: 0 0 var(--ls-premium-section); }
.ls-premium-close-card { border-radius: var(--ls-premium-radius-lg); padding: clamp(2.5rem, 7vw, 5.5rem); background: var(--ls-premium-navy); color: #fff; }
.ls-premium-close-card h2 { color: #fff; }
.ls-premium-close-card p { color: rgba(255,255,255,.74); }
.ls-premium-close-card .ls-btn-secondary { border-color: rgba(255,255,255,.35); color: #fff; }

/* Shared internal-page shell */
/* Sprint 010 spacing correction (2026-07-24): clamp(4rem,8vw,6.5rem) resolved
   to 104px at desktop widths, measured header-to-H1 gap ~139-141px on
   Solutions/How It Works/About - the "internal-page heroes beginning too
   far below the header" defect. Tightened to match the corrected homepage
   hero range (clamp(56px,5vw,80px)) for consistent vertical rhythm. */
.ls-premium-page-hero { padding: clamp(56px, 5vw, 80px) 0; border-bottom: 1px solid var(--ls-premium-border); background: linear-gradient(135deg,#f7fafc,#fff 62%,#eef6f9); }
.ls-premium-page-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, .65fr); gap: clamp(3rem, 7vw, 6rem); align-items: center; }
.ls-premium-page-hero p { max-width: 680px; margin: 1.4rem 0 0; }
.ls-premium-diagram { border-radius: var(--ls-premium-radius-lg); padding: 2rem; background: var(--ls-premium-navy-deep); color: #fff; box-shadow: var(--ls-premium-shadow); }
.ls-premium-diagram ol,
.ls-premium-diagram ul { display: grid; gap: .65rem; margin: 1.2rem 0 0; padding: 0; list-style: none; }
.ls-premium-diagram li { border: 1px solid rgba(255,255,255,.12); border-radius: 10px; padding: .85rem; background: rgba(255,255,255,.055); }
.ls-premium-editorial { display: grid; grid-template-columns: minmax(230px,.55fr) minmax(0,1.2fr); gap: clamp(3rem,8vw,7rem); }
.ls-premium-editorial + .ls-premium-editorial { margin-top: 5rem; }
.ls-premium-editorial h2 { position: sticky; top: 2rem; }
.ls-premium-copy { max-width: 760px; }
.ls-premium-copy h3 { margin-top: 2.2rem; }
.ls-premium-values { display: grid; grid-template-columns: repeat(2,1fr); gap: 1rem; }
.ls-premium-values article { border: 1px solid var(--ls-premium-border); border-radius: 16px; padding: 1.4rem; }

/* Founder screenshot review (2026-07-21): legacy-page-styles.css sets
   .ls-contact-info-card h3 and .ls-legal-sidebar h2 to white for their dark
   navy card backgrounds, but that file is enqueued before this one, and
   .ls-premium-page h3/h2 (navy) has equal selector specificity - so this
   stylesheet's navy wins on load order alone, making the heading nearly
   invisible on the same navy background (the same root cause as the
   earlier .ls-footer .ls-logo-text contrast fix). Restoring white here,
   in the file that actually wins the cascade, instead of depending on
   enqueue order between two separate stylesheets. */
.ls-contact-info-card h3,
.ls-legal-sidebar h2 { color: #fff; }

/* Existing form and utility templates receive one shared visual language. */
/* Sprint 010 spacing correction (2026-07-24): same clamp(4rem,8vw,6.5rem)
   defect as .ls-premium-page-hero above (measured 139px header-to-H1 gap
   on Contact) - same fix, same target range, one source of truth. */
.ls-lsa-hero,
.ls-contact-hero,
.ls-booking-hero { padding: clamp(56px,5vw,80px) 0; background: linear-gradient(135deg,#f7fafc,#fff 62%,#eef6f9); border-bottom: 1px solid var(--ls-premium-border); }
.ls-lsa-hero h1,
.ls-contact-hero h1,
.ls-booking-card h1 { color: var(--ls-premium-navy); font-size: clamp(2.6rem,5vw,4.5rem); }
.ls-lsa-form-section,
.ls-contact-body { padding: var(--ls-premium-section) 0; background: var(--ls-premium-surface); }
.ls-lsa-layout { display: grid; grid-template-columns: minmax(0,820px) minmax(260px,1fr); gap: 2rem; align-items: start; }
.ls-lsa-form-card,
.ls-contact-form-section,
.ls-booking-card { max-width: none; margin: 0; border: 1px solid var(--ls-premium-border); border-radius: var(--ls-premium-radius); padding: clamp(1.5rem,4vw,3rem); box-shadow: var(--ls-premium-shadow); }
.ls-lsa-context { position: sticky; top: 2rem; border-radius: var(--ls-premium-radius); padding: 1.75rem; background: var(--ls-premium-navy-deep); color: #fff; }
.ls-lsa-context h3 { margin-top: 0; color: #fff; }
.ls-lsa-context p { color: rgba(255,255,255,.72); font-size: .94rem; }
.ls-lsa-context ol { display: grid; gap: .7rem; padding-left: 1.2rem; }
.ls-lsa-group-title { margin: 1.25rem 0 .25rem; padding-top: 1.5rem; border-top: 1px solid var(--ls-premium-border); }
.ls-lsa-group-title:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.ls-lsa-group-title h3 { margin: 0 0 .3rem; font-size: 1.05rem; }
.ls-lsa-group-title p { margin: 0; font-size: .86rem; }
.ls-lsa-field input,
.ls-lsa-field select,
.ls-lsa-field textarea,
.ls-contact-field input,
.ls-contact-field textarea { min-height: 48px; border-color: #bdc9d5; border-radius: 10px; }
.ls-lsa-choice { min-height: 44px; display: flex; align-items: center; border: 1px solid var(--ls-premium-border); border-radius: 10px; padding: .7rem .85rem; background: #fff; }
.ls-lsa-choice:has(input:checked) { border-color: var(--ls-premium-blue); background: #edf8fc; color: var(--ls-premium-navy); }
.ls-lsa-consent { border: 1px solid var(--ls-premium-border); border-radius: 12px; padding: 1rem; background: #f8fafc; }
.ls-lsa-next,
.ls-lsa-trust { padding: var(--ls-premium-section) 0; }
.ls-contact-grid { grid-template-columns: minmax(0,1fr) minmax(280px,360px); gap: 2rem; }
.ls-booking-card { max-width: 860px; margin-inline: auto; }
.ls-booking-note { border-left: 3px solid var(--ls-premium-blue); background: #f4f8fc; }

.ls-legal-page,
.ls-thankyou-page,
.ls-404-page { background: var(--ls-premium-surface); }
.ls-legal-body .ls-container,
.ls-aty-card,
.ls-404-card { width: min(860px, calc(100% - 48px)); margin: 0 auto; padding: var(--ls-premium-section) 0; }
.ls-legal-hero { padding: clamp(3.5rem,7vw,5.5rem) 0 2.5rem; background: #fff; }
.ls-legal-hero h1 { color: var(--ls-premium-navy); font-size: clamp(2.6rem,5vw,4.4rem); }
.ls-legal-body { padding: 0 0 var(--ls-premium-section); }
.ls-legal-content,
.ls-aty-card,
.ls-404-card { border: 1px solid var(--ls-premium-border); border-radius: var(--ls-premium-radius); padding: clamp(1.5rem,4vw,3rem); background: #fff; box-shadow: var(--ls-premium-shadow); }
.ls-legal-section { padding: 1.5rem 0; border-bottom: 1px solid var(--ls-premium-border); }
.ls-legal-section:last-child { border-bottom: 0; }
.ls-legal-content p,
.ls-legal-content li { max-width: 72ch; color: var(--ls-premium-muted); line-height: 1.75; }
.ls-aty-hero { padding: var(--ls-premium-section) 0; }
.ls-aty-card { padding: clamp(1.5rem,4vw,3rem); }
.ls-404-card { margin-block: var(--ls-premium-section); }

/* Footer */
.ls-footer { padding: 4.5rem 0 0; background: var(--ls-premium-navy-deep); color: #fff; }
.ls-footer .ls-logo-text { color: #fff; }
.ls-footer-grid { display: grid; grid-template-columns: 1.45fr repeat(5, minmax(110px,1fr)); gap: 2rem; }
.ls-footer-brand p { max-width: 310px; color: rgba(255,255,255,.66); }
.ls-footer-location { color: rgba(255,255,255,.78); font-size: .9rem; }
.ls-footer-column h4 { margin: 0 0 1rem; color: #fff; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }
.ls-footer-column a { display: block; margin: .65rem 0; color: rgba(255,255,255,.68); text-decoration: none; }
.ls-footer-column a:hover { color: #fff; }
/* Renamed from .ls-footer-social (2026-07-21): main.css carries several
   legacy, un-superseded !important blocks targeting ".ls-footer-social a"
   and ".ls-footer-social img" (see "FOOTER SOCIAL TEXT ICONS - FINAL SAFE
   VERSION"). Those rules would silently win over this stylesheet despite
   load order because they use !important. Renaming the wrapper avoids the
   collision entirely instead of fighting it with more !important. */
.ls-footer-social-links { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.25rem; }
/* Accessible inline-SVG icon buttons: 40px circular targets (close to the
   44px touch-target guideline; footer nav is a secondary action so 40px is
   an accepted trade-off), visible border in the resting state so the
   control reads even before hover/focus, and a clear focus-visible ring
   for keyboard users. Falls back to a plain text pill if a platform key
   has no icon markup, so a link is never invisible. */
.ls-footer-social-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin: 0; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; padding: 0; color: rgba(255,255,255,.78); background: rgba(255,255,255,.04); transition: background-color .15s ease, color .15s ease, border-color .15s ease; }
.ls-footer-social-icon:hover,
.ls-footer-social-icon:focus-visible { color: #fff; background: rgba(17,168,232,.22); border-color: rgba(17,168,232,.55); }
.ls-footer-social-icon svg { width: 18px; height: 18px; fill: currentColor; }
.ls-footer-social-icon span { padding: 0 .6rem; font-size: .72rem; font-weight: 700; white-space: nowrap; }
/* Founder direction (2026-07-21): unconfigured platforms stay visible as an
   honestly-disabled "launching soon" badge instead of disappearing - dashed
   border and lower opacity read as unavailable without looking broken. */
.ls-footer-social-icon--pending { border-style: dashed; color: rgba(255,255,255,.4); background: transparent; cursor: default; opacity: .65; }
.ls-footer-social-icon--pending:hover { background: transparent; border-color: rgba(255,255,255,.18); color: rgba(255,255,255,.4); }
.ls-footer-social-icon--pending:focus-visible { color: rgba(255,255,255,.7); opacity: 1; outline: 3px solid var(--ls-premium-blue-bright); outline-offset: 3px; }
.ls-footer-bottom { display: flex; justify-content: space-between; gap: 1rem; margin-top: 3rem; padding: 1.4rem 0; border-top: 1px solid rgba(255,255,255,.12); }
.ls-footer-bottom p { margin: 0; color: rgba(255,255,255,.55); font-size: .82rem; }

@media (max-width: 1024px) {
  .ls-premium-hero-grid,
  .ls-premium-page-hero-grid,
  .ls-walkthrough-grid,
  .ls-premium-intro,
  .ls-editorial-problems,
  .ls-assessment-panel,
  .ls-lsa-layout { grid-template-columns: 1fr; }
  .ls-trust-strip ul { grid-template-columns: repeat(3,1fr); }
  .ls-outcome-grid { grid-template-columns: repeat(3,1fr); }
  .ls-pathway-grid { grid-template-columns: repeat(2,1fr); }
  .ls-process-rail { grid-template-columns: repeat(4,1fr); }
  .ls-lsa-context { position: static; }
  .ls-footer-grid { grid-template-columns: repeat(3,1fr); }
}

@media (max-width: 768px) {
  .ls-container { width: min(100% - 32px, 1180px); }
  .ls-nav { display: none; }
  .ls-mobile-nav { display: block; }
  .ls-premium-editorial,
  .ls-contact-grid { grid-template-columns: 1fr; }
  .ls-premium-editorial h2 { position: static; }
  .ls-trust-strip ul,
  .ls-outcome-grid,
  .ls-differentiators,
  .ls-premium-values,
  .ls-pathway-grid { grid-template-columns: repeat(2,1fr); }
  .ls-process-rail { grid-template-columns: repeat(2,1fr); }
  .ls-footer-grid { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 480px) {
  .ls-premium h1,
  .ls-premium-page h1,
  .ls-lsa-hero h1,
  .ls-contact-hero h1,
  .ls-booking-card h1 { font-size: 2.45rem; }
  .ls-premium-actions { align-items: stretch; flex-direction: column; }
  .ls-premium-actions .ls-btn { width: 100%; }
  .ls-trust-strip ul,
  .ls-outcome-grid,
  .ls-differentiators,
  .ls-premium-values,
  .ls-pathway-grid,
  .ls-process-rail,
  .ls-walkthrough-poster,
  .ls-footer-grid { grid-template-columns: 1fr; }
  .ls-trust-strip li { border-right: 0; border-bottom: 1px solid var(--ls-premium-border); }
  .ls-footer-bottom { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ls-premium *,
  .ls-premium-page *,
  .ls-header *,
  .ls-footer * { animation: none; transition: none; }
}