/* ============================================================
   SHOWCASE LAYER — css/showcase.css  (branch: showcase/pinnacle)
   "Night Ledger": the night-showroom light story staged for real,
   set in the brand's single-family Poppins type system (no serif).
   Loads AFTER styles.css and overrides at equal specificity.
   styles.css is never edited. Acts:
     I  Arrival (hero + marquee)      V   The Math (pricing)
     II The Leak (pain)               VI  The Vault (security)
     III The Machine (how-it-works)   VII The Questions (faq)
     IV The Proof (cdk)               VIII Dawn (book-demo finale)
   ============================================================ */

/* ---------- S0. TOKENS + TYPE SCALE ---------- */
:root{
  --font-display:"Poppins",system-ui,sans-serif;
  --amber-hot:#FFB454;
  --gold-dawn:#FFE0A6;
  --cool-key:#B9C8FF;
  --carmine-deep:#6E1B24;
  --ink-red:#FF6B72;
  /* Display scale grows: the page finally uses its vertical real estate */
  --text-h1:clamp(2.7rem,1.35rem + 4.6vw,4.35rem);
  --text-h2:clamp(2.05rem,1.3rem + 3vw,3rem);
}

/* ---------- S1. GLOBAL TYPE SYSTEM ----------
   Single family: Poppins carries voice (headlines, italic accents) AND
   every UI surface, body line, and numeral (the brand kit's one-face rule),
   contrast comes from weight extremes, not a second face. Interior headers
   stay calm white per the sitewide calm pass; the italic accent IS the
   accent now (matches the wordmark's own upright-plus-italic lockup). */
.section-header h2{
  font-family:var(--font-display);font-weight:700;letter-spacing:-0.012em;line-height:1.06}
.section-header h2 .grad-text{font-style:italic;font-weight:700}
.section-header p{color:var(--text-muted)}

/* Act ordinals: claim-free wayfinding stamped before each act's eyebrow */
main{counter-reset:act}
.section-header{counter-increment:act}
.section-header .eyebrow::before{
  content:counter(act,decimal-leading-zero);
  display:inline-block;margin-right:10px;padding-right:10px;
  border-right:1px solid rgba(255,255,255,0.18);
  color:var(--text-muted);letter-spacing:0.08em}

/* Self-drawing hairline under every act header (piggybacks the existing
   .fade-up IntersectionObserver — no new JS, no new observers) */
.section-header.fade-up::after{
  content:"";display:block;width:min(240px,38%);height:1px;margin:26px auto 0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.30),transparent);
  transform:scaleX(0);transition:transform 0.9s var(--ease-out-expo) 0.15s}
.section-header.fade-up.visible::after{transform:scaleX(1)}

/* ---------- S2. ACT I — ARRIVAL: the staged hero ---------- */
/* Full-height showroom bay: copy centered, marquee pinned to the sill.
   Layer order (back to front): atmosphere canvas (-3) -> floor (-2) ->
   pointer glow (-1) -> content. */
.hero{display:flex;flex-direction:column;justify-content:center;min-height:calc(100svh + 72px);
  padding:calc(72px + var(--space-6)) 0 0}
.hero .container.hero-grid{width:100%}
.hero .logo-marquee{margin-top:auto}
@media (min-width:1025px){.hero .trust-bar{margin-bottom:56px}}
/* Tall-window balance fix: on tall desktop windows the leftover height above
   min-height used to pool entirely in the marquee's own margin-top:auto gap
   below the trust chips. Giving the content block a matching margin-top:auto
   splits that leftover into two equal auto gaps (above the title, below the
   chips), so the composition stays centered instead of bottom-heavy at any
   window height. justify-content switches to flex-start so the flex column's
   own centering never fights these two auto margins. */
@media (min-width:1025px){
  .hero{justify-content:flex-start}
  .hero .container.hero-grid{margin-top:auto}
}

.hero-atmo{position:absolute;inset:0;z-index:-3;pointer-events:none}
.atmo-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}

/* Polished showroom floor: a cool sheen plane, plus a warm pool under the
   card's side of the stage. Reads under the WebGL light; carries the
   grounding alone if WebGL is absent. */
.hero-floor{position:absolute;left:0;right:0;bottom:0;height:34%;z-index:-2;pointer-events:none;
  background:
    radial-gradient(52% 88% at 71% 100%,rgba(255,140,35,0.10),transparent 70%),
    radial-gradient(80% 120% at 50% 118%,rgba(214,222,240,0.055),transparent 62%),
    linear-gradient(180deg,transparent 0%,rgba(214,222,240,0.028) 55%,rgba(214,222,240,0.05) 100%)}

.hero .trust-item{color:var(--text-primary)}

/* Display headline: Poppins at weight 800, with the brand-gradient phrase
   in italic. Poppins sets wider than the serif it replaced, so the measure
   widened from 620px to 680px to keep a balanced 3-line headline at 1440. */
.hero-title{font-family:var(--font-display);font-weight:800;letter-spacing:-0.02em;
  line-height:1.05;max-width:680px;text-wrap:balance}
.hero-title .grad-text{font-style:italic;font-weight:700}
.hero-sub{max-width:50ch;font-size:clamp(1.02rem,0.95rem + 0.4vw,1.16rem)}
.hero-copy{max-width:640px}

/* Entrance: copy rises in a stagger; the whole sequence begins as the
   ignition loader lifts. fill:both so the reduced-motion duration collapse
   lands every element on its final frame. */
@keyframes scRise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.hero-title,.hero-sub,.hero-buttons,.hero-cred,.trust-bar{
  animation:scRise 0.9s var(--ease-out-expo) both}
/* Delays sit just past the ignition loader's 900ms lift on first visit, so the
   loader wipe hands off into the copy rise as one continuous sequence; on
   repeat visits (loader skipped) the beat still reads as a deliberate curtain. */
.hero-title{animation-delay:0.40s}
.hero-sub{animation-delay:0.53s}
.hero-buttons{animation-delay:0.65s}
.hero-cred{animation-delay:0.77s}
.trust-bar{animation-delay:0.87s}

/* The card arrives larger, grounded on the lit floor, with a one-time
   headlight sweep across its face. */
.hero-card-scene{width:min(100%,500px)}
.hero-stage{animation:scRise 1.1s var(--ease-out-expo) 0.60s both}
.hero-card-face::after{content:"";position:absolute;inset:-40%;pointer-events:none;
  mix-blend-mode:screen;opacity:0;
  background:linear-gradient(115deg,transparent 38%,rgba(255,196,120,0.34) 48%,rgba(255,255,255,0.20) 50%,rgba(255,196,120,0.34) 52%,transparent 62%);
  transform:translateX(-60%);
  animation:scSweep 1.3s var(--ease-out-expo) 1.65s 1}
@keyframes scSweep{0%{opacity:0;transform:translateX(-60%)}18%{opacity:1}82%{opacity:1}100%{opacity:0;transform:translateX(60%)}}

/* Floor reflection: CUT after audit pass 2. The card's printing occupies its
   whole bottom quarter, so any visible mirror band kept legible upside-down
   text (a dated glossy-UI trope), and box-reflect on the bobbing card was
   the costliest effect on the page. The floor pool + contact shadow carry
   the grounding; the shadow is the honest cue. */

/* ---------- S3. MARQUEE — chrome sill ---------- */
.logo-marquee{padding:26px 0}
.logo-chip img{width:70px;height:70px}
/* A single light glint traveling the band's top hairline (transform-only) */
.logo-marquee::before{content:"";position:absolute;top:-1px;left:0;width:30%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,180,84,0.55),transparent);
  transform:translateX(-100%);animation:scGlint 7s linear infinite;pointer-events:none}
@keyframes scGlint{to{transform:translateX(433%)}}

/* ---------- S4. ACT II — THE LEAK ---------- */
/* Deeper carmine atmosphere; the money figure goes display-scale. */
#pain-points::before{background:
  radial-gradient(48% 54% at 22% 52%,rgba(178,54,63,0.16),transparent 72%),
  radial-gradient(40% 46% at 84% 70%,rgba(110,27,36,0.20),transparent 74%),
  radial-gradient(46% 50% at 82% 30%,rgba(255,140,35,0.05),transparent 74%)}
.leak-amount{font-size:clamp(3.4rem,2.2rem + 5.4vw,6.2rem);color:var(--ink-red);
  text-shadow:0 0 54px rgba(178,54,63,0.5)}
.leak-annual-num{color:var(--ink-red)}
.stat-num{color:var(--ink-red)}
/* Ledger hairline under the leak figure: red ink gets ruled like a statement */
.leak-meter{padding-bottom:18px;border-bottom:1px solid rgba(228,86,93,0.22)}

/* ---------- S5. ACT III — THE MACHINE: center-spine timeline ---------- */
/* Desktop: the spine moves to the page's center line and the step cards
   alternate sides around it; ghost act numerals sit behind each card.
   ledgerCurrent() keeps working untouched — it reads node geometry, not
   layout. Mobile keeps the shipped left-spine layout. */
@media (min-width:1025px){
  .hiw{max-width:1180px}
  .hiw-timeline::before,.hiw-timeline::after{left:50%}
  .hiw-step{grid-template-columns:1fr var(--hiw-node) 1fr;column-gap:clamp(28px,3.4vw,52px);
    z-index:1} /* positioned (base rule) + z-index -> stacking context: the ghost ordinal's
                  z-index:-1 stays above the opaque section bg, and the step (nodes included)
                  keeps painting above the timeline's positioned spine pseudos */
  .hiw-node{grid-column:2;grid-row:1}
  .hiw-card{grid-column:3;grid-row:1;max-width:560px;justify-self:start}
  .hiw-step:nth-child(even) .hiw-card{grid-column:1;justify-self:end}
  /* Oversized ghost ordinals filling the empty half of each row */
  .hiw-step::before{content:attr(data-step);position:absolute;top:50%;z-index:-1;
    transform:translateY(-52%);
    font-family:var(--font-display);font-weight:800;font-style:italic;
    font-size:clamp(9rem,13vw,13rem);line-height:1;color:transparent;
    -webkit-text-stroke:1.5px rgba(255,255,255,0.11);pointer-events:none}
  .hiw-step:nth-child(odd)::before{left:13%}
  .hiw-step:nth-child(even)::before{right:13%}
  .hiw-step--final::before{-webkit-text-stroke-color:rgba(16,185,129,0.12)}
}
.hiw-title{font-family:var(--font-display);font-weight:800;letter-spacing:-0.01em}

/* The 5-up recap becomes a ruled spec strip */
#how-it-works .callout-grid{max-width:1080px;padding:26px 8px;gap:0;
  border-top:1px solid var(--border-color);border-bottom:1px solid var(--border-color)}
#how-it-works .callout-item{padding:6px 18px}
#how-it-works .callout-item + .callout-item{border-left:1px solid var(--border-subtle)}
#how-it-works .callout-icon{background:none;border:none;width:auto;height:auto;margin:0 auto 10px}
#how-it-works .callout-item h5{text-transform:uppercase;letter-spacing:0.06em;font-size:0.78rem}
#how-it-works .callout-item p{color:var(--text-muted)}

/* ---------- S6. ACT VIII — DAWN: the booking finale ---------- */
/* The warmest frame on the page: the atmosphere canvas (warm grade) sits at
   the bottom of the stage's stack; every parallax player paints above it. */
/* Canvas is the stage's first positioned child (z auto) so every .player sibling
   paints above it by DOM order; no z-index overrides needed. */
.pband-title{font-family:var(--font-display);font-weight:800;letter-spacing:-0.012em}
.pband-title .grad-text{font-style:italic;font-weight:700}
/* Booking card: lit from behind, warm hairline rim, the light's focal point */
.cta-form-card{position:relative;
  border:1px solid transparent;
  background:
    linear-gradient(var(--glass-bg),var(--glass-bg)) padding-box,
    linear-gradient(155deg,rgba(255,224,166,0.45),rgba(255,140,35,0.18) 30%,rgba(255,255,255,0.06) 60%,rgba(178,54,63,0.25)) border-box;
  box-shadow:0 0 60px rgba(255,140,35,0.10),0 30px 80px rgba(0,0,0,0.5)}
.cta-form-card::before{content:"";position:absolute;inset:-70px;z-index:-1;pointer-events:none;
  background:radial-gradient(60% 60% at 50% 50%,rgba(255,180,84,0.12),transparent 70%)}

/* ---------- S7. FOCUS SYSTEM — corner brackets ---------- */
/* Distinctive four-corner viewfinder brackets on the page's big interactive
   moments; small controls keep the sitewide ring. */
.btn{position:relative}
.btn:focus-visible,.push-start:focus-visible,.hiw-node:focus-visible{
  outline:none;box-shadow:none}
.btn:focus-visible::after,.push-start:focus-visible::after,.hiw-node:focus-visible::after{
  content:"";position:absolute;inset:-7px;pointer-events:none;border-radius:0;
  background:
    linear-gradient(var(--orange),var(--orange)) left 0 top 0/12px 2px,
    linear-gradient(var(--orange),var(--orange)) left 0 top 0/2px 12px,
    linear-gradient(var(--orange),var(--orange)) right 0 top 0/12px 2px,
    linear-gradient(var(--orange),var(--orange)) right 0 top 0/2px 12px,
    linear-gradient(var(--orange),var(--orange)) left 0 bottom 0/12px 2px,
    linear-gradient(var(--orange),var(--orange)) left 0 bottom 0/2px 12px,
    linear-gradient(var(--orange),var(--orange)) right 0 bottom 0/12px 2px,
    linear-gradient(var(--orange),var(--orange)) right 0 bottom 0/2px 12px;
  background-repeat:no-repeat;
  /* mask keeps the existing conic halo on .hiw-node from fighting the brackets */
  opacity:1}
.hiw-node:focus-visible::after{inset:-9px;padding:0;background-repeat:no-repeat;
  -webkit-mask:none;mask:none}

/* ---------- S8. RESPONSIVE ---------- */
@media (max-width:1024px){
  .hero{min-height:0;padding-top:calc(72px + var(--space-8))}
  .hero-card-float{-webkit-box-reflect:none}
  .hero-floor{height:32%}
  .hero-stage{display:none}
  .hero .trust-bar{margin-bottom:20px}
  .hero .logo-marquee{margin-top:28px}
}
@media (max-width:768px){
  .logo-chip img{width:60px;height:60px}
  .section-header .eyebrow::before{margin-right:8px;padding-right:8px}
  #how-it-works .callout-grid{gap:14px;padding:20px 8px;border-left:none;border-right:none}
  #how-it-works .callout-item + .callout-item{border-left:none}
}

/* ---------- S9. REDUCED MOTION ----------
   The sitewide section-20 reset already collapses every animation above to
   its final frame (all entrance keyframes declare fill:both). The atmosphere
   canvas never mounts (showcase.js guards). Only the marquee glint needs an
   explicit kill: at 1 iteration it would freeze mid-band. */
@media (prefers-reduced-motion:reduce){
  .logo-marquee::before{display:none}
  .hero-card-face::after{display:none}
}
/* ============================================================
   Night Ledger  -  section fragment: Acts IV-VII (#cdk, #pricing,
   #security, #faq). Loads inside css/showcase.css, AFTER
   css/styles.css, so equal-specificity selectors here win.

   TOKENS ASSUMED (defined by the orchestrator's core file, used
   freely below): --font-display, --amber-hot (#FFB454),
   --gold-dawn (#FFE0A6), --cool-key (#B9C8FF), --carmine-deep
   (#6E1B24), --ink-red (#FF6B72). Everything else is an existing
   styles.css token.

   SPECIFICITY STRATEGY: most rules below are prefixed with the
   section id (#cdk / #pricing / #security / #faq) so they win
   outright over styles.css without a specificity fight. The ONE
   deliberate exception is .lv-was / .lv-free / .lv-was::after in
   Act V(b)  -  those are left UNPREFIXED, at the same specificity
   as their styles.css originals, on purpose: the value-ledger
   has a JS-driven scroll state machine (.is-armed / .is-struck)
   whose rules are already more specific (more chained classes)
   than a bare .lv-was. Adding an #pricing id there would make our
   "resting" color win in EVERY state, including mid-animation,
   and break the red-to-gray strike sequence. Keeping specificity
   equal lets our new resting tone show for the honest static/
   reduced-motion end state while the state machine still safely
   overrides it while it's actually animating. See the comment
   inline at that rule for the full trace.

   FADE-UP SAFETY: .cdk-demo, .pricing-cards, .calc-binnacle,
   .value-ledger, .sec-band and .faq-list all carry the sitewide
   .fade-up class directly in the markup, and fade-up owns
   `transform` on those exact elements. Nothing below sets
   `transform` on any of those six selectors themselves  -  new
   transforms only ever land on pseudo-elements (::before/::after)
   or on unrelated descendants (.ps-ring, .sec-band-seal, dotted
   leaders, ghost ordinals). Checked one by one; see per-act notes.

   NO MARKUP EDITS were needed for anything below. */


/* ============================================================
   ACT IV  -  THE PROOF (#cdk): service-bay staging + editorial table
   ============================================================ */

/* Stage the demo on a lit floor: a soft radial pool grounding the
   whole terminal+panel group, and a faint vertical light shaft
   dropping onto the terminal column specifically. Both are
   pseudo-elements at z-index:-1 inside #cdk .cdk-demo's existing
   isolation:isolate context, so they paint behind the terminal
   button / wire / panel without needing any new stacking context
   or markup. .cdk-demo itself keeps position:relative + isolate
   from styles.css; .cdk-terminal-col gets position:relative here
   only to anchor its own shaft pseudo. */
#cdk .cdk-terminal-col{position:relative}

#cdk .cdk-demo::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  left:50%;bottom:-40px;width:130%;height:210px;
  transform:translateX(-50%);
  background:radial-gradient(ellipse 55% 100% at 50% 100%, rgba(255,180,84,0.10), transparent 72%);
  filter:blur(4px);
}
#cdk .cdk-terminal-col::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  left:50%;top:-72px;bottom:-24px;width:150px;
  transform:translateX(-50%);
  background:linear-gradient(180deg,
    rgba(255,180,84,0) 0%,
    rgba(255,180,84,0.11) 40%,
    rgba(255,180,84,0.16) 62%,
    rgba(255,180,84,0.03) 86%,
    rgba(255,180,84,0) 100%);
  filter:blur(9px);
}

/* Slightly deepened panel shadow  -  the RO panel currently has no
   box-shadow of its own (it relies on the section background
   matching var(--bg-elevated)); give it real ground contact so it
   reads as a physical object catching the shaft/floor light. */
#cdk .cdk-panel{
  box-shadow:0 28px 56px -20px rgba(0,0,0,0.58), inset 0 1px 0 rgba(255,255,255,0.04);
}

/* Editorial comparison table: de-box the wrap into top/bottom
   hairlines only, and a warmer (amber, not white) row hover to
   match the neutral-warm zone. The row-lead (first td) keeps a
   medium weight for a touch of emphasis, but no longer needs a
   separate font-family override, since it inherits Poppins like
   the rest of the table now, so a second face isn't the source
   of the contrast anymore. Scoped to #cdk .comparison-table so
   /security/'s battle table (.security-table) and every other
   sitewide table are untouched. */
#cdk .table-wrap{
  border:none;border-radius:0;background:none;
  border-top:1px solid var(--border-color);
  border-bottom:1px solid var(--border-color);
}
#cdk .comparison-table thead th{
  background:none;
  border-bottom:1px solid var(--border-color);
}
#cdk .comparison-table td{
  border-top:1px solid var(--border-color); /* was --border-subtle (0.04); a touch more defined without a box */
}
#cdk .comparison-table td:first-child{
  font-weight:500;
  font-size:1.05rem;
  letter-spacing:-0.01em;
}
/* Warmer hover  -  same technique as the sitewide `tbody tr:hover`,
   just re-tinted amber for this section's neutral-warm register. */
#cdk .comparison-table tbody tr:hover{
  background-color:rgba(255,180,84,0.07);
}

@media (max-width:1024px){
  /* .cdk-demo drops its desktop-only zoom:1.25 below this width;
     the floor pool/shaft scale with it automatically (they're
     sized in px relative to the same box), no override needed. */
}
@media (max-width:768px){
  /* .cdk-demo goes flex-direction:column here (styles.css section
     19)  -  terminal stacks above the wire/panel. Tighten the floor
     pool so it doesn't read as an oversized ellipse under a much
     taller column, and shorten the shaft to match. */
  #cdk .cdk-demo::before{height:150px;bottom:-24px}
  #cdk .cdk-terminal-col::before{width:120px;top:-40px;bottom:-16px}
}
@media (max-width:480px){
  #cdk .cdk-terminal-col::before{width:96px}
}


/* ============================================================
   ACT V  -  THE MATH (#pricing): asymmetric bento + real ledger
   ============================================================ */

/* (a) Bento re-grid at >=1025px only. Markup order stays featured,
   debit, monthly (untouched)  -  explicit column/row placement, not
   a reorder. Below 1025px this block simply doesn't apply and the
   existing 3-up / 1-up rules from styles.css section 19 keep
   working unchanged. */
@media (min-width:1025px){
  #pricing .pricing-cards{
    grid-template-columns:3fr 2fr;
    grid-template-rows:1fr 1fr;
    align-items:stretch;
  }
  #pricing .pricing-card.featured{
    grid-column:1;grid-row:1 / 3;
    display:flex;flex-direction:column;justify-content:center;
    padding:48px 44px;
  }
  #pricing .pricing-cards .pricing-card:nth-child(2){grid-column:2;grid-row:1}
  #pricing .pricing-cards .pricing-card:nth-child(3){grid-column:2;grid-row:2}

  /* Featured price becomes the page's big display-scale figure. */
  #pricing .pricing-card.featured .card-price{
    font-family:var(--font-display);
    font-weight:800;
    font-size:clamp(4rem,2rem + 9vw,7rem);
    line-height:0.9;
    letter-spacing:-0.02em;
    margin:22px 0 16px;
  }
  #pricing .pricing-card.featured .card-label{font-size:0.9rem}
  #pricing .pricing-card.featured .card-desc{font-size:1rem;max-width:34ch}
}

/* (b) Value ledger: dotted leaders, tabular figures, red-ink "was"
   / kept-ink "FREE". The leader is built on .ledger-name (NOT the
   grid  -  .ledger-row stays the existing 3-column auto/1fr/auto
   grid from styles.css; no markup/structure change). Turning
   .ledger-name into a flex row lets its own ::after grow as a
   dotted rule filling the rest of the name column, reading as a
   classic ledger leader up to the value gutter. Gated to >=769px:
   below that the row's name column narrows enough (and item names
   like "Managed PCI Compliance" get long enough) that forcing
   nowrap could clip text  -  mobile keeps the plain stacked
   name/desc block exactly as it ships today. */
@media (min-width:769px){
  #pricing .ledger-name{
    display:flex;align-items:baseline;gap:10px;white-space:nowrap;
  }
  #pricing .ledger-name::after{
    content:"";flex:1 1 auto;min-width:16px;align-self:center;
    border-bottom:1px dotted rgba(240,242,245,0.26);
    transform:translateY(-3px);
  }
}

#pricing .ledger-value{
  font-feature-settings:var(--tabular); /* font-variant-numeric:tabular-nums already set in styles.css */
}

/* .lv-was / .lv-free / .lv-was::after are DELIBERATELY left at the
   SAME selector (no #pricing id) as their styles.css originals  -
   see the file-header note. This only changes the resting/base
   tone (what no-JS, reduced-motion, and pre-scroll visitors see);
   the .is-armed / .is-struck scroll state machine's own,
   higher-specificity rules still safely take over mid-animation. */
.lv-was{color:var(--carmine-deep)}
.ledger-value[data-value] .lv-was::after{background:var(--carmine-deep)}
.lv-free{color:var(--success)}

/* (c) #calcStart attract state: a slow breathing glow on .ps-ring
   ONLY, and only while the panel is truly idle (not yet lit, not
   mid-crank). Because the selector requires :not(.is-lit) AND
   :not(.is-cranking), it can never match at the same time as the
   styles.css `.is-lit .ps-ring` or `.is-cranking .ps-ring` rules  -
   the three states are mutually exclusive by construction, so
   there's no specificity fight and no risk of shadowing the
   ignition crank flicker or the lit resting ring. Nothing else
   about the dead-panel gating (.is-armed opacity/filter on
   .cluster/.odo-row) is touched. */
#pricing .calc-binnacle:not(.is-lit):not(.is-cranking) .ps-ring{
  animation:scPsAttract 2.8s ease-in-out infinite;
}
@keyframes scPsAttract{
  0%,100%{border-color:rgba(255,180,84,0.18);box-shadow:none}
  50%{border-color:rgba(255,180,84,0.6);
      box-shadow:0 0 14px rgba(255,180,84,0.45),inset 0 0 8px rgba(255,180,84,0.18)}
}

@media (max-width:1024px){
  /* Bento is >=1025px-only by design; nothing to adjust here. */
}
@media (max-width:768px){
  /* .pricing-cards already stacks 1-up (section 19); the ledger's
     dotted leader is already off below 769px. No further changes. */
}
@media (max-width:480px){
  #pricing .ledger-name{white-space:normal} /* belt-and-braces: the >=769px rule already excludes this width */
}


/* ============================================================
   ACT VI  -  THE VAULT (#security): the one cool zone
   ============================================================ */

/* Section-level teal + cool-blue wash, same technique as the
   #pain-points::before carmine wash in styles.css (two soft radial
   gradients, very low opacity, z-index:0 behind the content). This
   sits OUTSIDE .sec-band's own glass (which already has a teal
   ::before of its own scoped to the card)  -  it's the section's
   ambient temperature, visible in the negative space around the
   band, continuing the page's cold-to-warm zone story. #security
   already has position:relative + overflow:hidden from the shared
   .section rule, so no extra positioning is needed here. */
#security::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(46% 50% at 18% 26%, rgba(16,185,129,0.07), transparent 72%),
    radial-gradient(50% 56% at 86% 76%, rgba(185,200,255,0.045), transparent 76%);
}
#security .container{position:relative;z-index:1}

/* Vault-door concentric rings behind the seal icon. .sec-band-seal
   already reads as a small circular badge with its own 1px ring
   border (from styles.css)  -  that border is effectively ring #1;
   these two pseudo-elements add two more, larger and fainter, so
   the icon reads as the center of a vault door. Contained well
   inside .sec-band's own padding (36px/40px) so overflow:hidden on
   .sec-band never clips them. */
#security .sec-band-seal{position:relative;isolation:isolate}
#security .sec-band-seal::before,
#security .sec-band-seal::after{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  left:50%;top:50%;border-radius:50%;
  transform:translate(-50%,-50%);
}
#security .sec-band-seal::before{
  width:76px;height:76px;border:1px solid rgba(16,185,129,0.18);
}
#security .sec-band-seal::after{
  width:94px;height:94px;border:1px solid rgba(16,185,129,0.10);
}

@media (max-width:1024px){
  /* No change  -  the wash and rings both scale with the section/seal, not the viewport. */
}
@media (max-width:768px){
  /* .sec-band already switches to a single column at max-width:900px
     in styles.css; the seal (and its rings) stay the same size, just
     re-flow above the stats. Nothing to override. */
}
@media (max-width:480px){
  #security .sec-band-seal::after{width:86px;height:86px} /* tiny extra margin on the narrowest phones */
}


/* ============================================================
   ACT VII  -  THE QUESTIONS (#faq): editorial ledger of questions
   ============================================================ */

/* styles.css section 15 boxes each .faq-item (border + radius +
   background). This replaces that with hairline top rules between
   items (closed off top/bottom by the list itself), larger question
   type, more generous vertical padding, and an oversized ghost
   ordinal on desktop. The accordion mechanics themselves
   (.faq-question button, .faq-answer max-height transition,
   .faq-item.active / .faq-toggle rotate) are untouched  -  only
   cosmetics change below. */
#faq .faq-list{
  gap:0;
  counter-reset:scFaqCount;
  border-bottom:1px solid var(--border-color);
}
#faq .faq-item{
  counter-increment:scFaqCount;
  position:relative;
  overflow:visible; /* was overflow:hidden, needed only to clip the old boxed corners */
  border:none;
  border-top:1px solid var(--border-color);
  border-radius:0;
  background:none;
  transition:border-color var(--dur-fast) ease;
}
/* Re-declared at the same #faq specificity so the open/active state
   still gets a warm accent  -  now on the item's own hairline instead
   of a full box outline. */
#faq .faq-item.active{border-top-color:rgba(255,140,35,0.45)}

#faq .faq-question{
  padding:28px 8px;
  font-size:clamp(1.15rem,1.05rem + 0.35vw,1.25rem);
  font-weight:600;
}
#faq .faq-answer p{padding:0 8px 28px}

/* Oversized ghost ordinal, desktop only. Positioned inside the
   item's own (widened) padding-left rather than bled out past the
   item edge  -  safe regardless of how wide .faq-list itself is
   (the structural-breakout rule in styles.css section 2 can widen
   .container--narrow .faq-list up to 1080px at this width, which
   would eat into any margin an outside-bled numeral relied on). */
@media (min-width:1025px){
  #faq .faq-item{padding-left:100px}
  #faq .faq-item::before{
    content:counter(scFaqCount, decimal-leading-zero);
    position:absolute;left:0;top:50%;
    transform:translateY(-50%);
    font-family:var(--font-display);
    font-weight:800;
    font-size:3.2rem;
    line-height:1;
    letter-spacing:-0.02em;
    color:var(--text-primary);
    opacity:0.08;
    pointer-events:none;
  }
}

@media (max-width:1024px){
  /* Ghost ordinal is >=1025px-only by design; item padding reverts automatically. */
}
@media (max-width:768px){
  #faq .faq-question{padding:24px 6px}
  #faq .faq-answer p{padding:0 6px 24px}
}
@media (max-width:480px){
  #faq .faq-question{padding:20px 4px;font-size:1.08rem}
  #faq .faq-answer p{padding:0 4px 20px}
}

/* ============================================================
   ORCHESTRATOR POLISH ROUND 1 (post-integration)
   ============================================================ */

/* ACT V: the featured $0 card read as a lit void — give the space intent.
   Background restates the glass recipe's two layers and adds a warm floor
   pool; content gets a ruled ledger break between price and description. */
@media (min-width:1025px){
  #pricing .pricing-card.featured{
    background:
      radial-gradient(72% 90% at 26% 84%,rgba(255,140,35,0.10),transparent 70%),
      linear-gradient(180deg, rgba(255,255,255,0.055), rgba(255,255,255,0) 42%),
      linear-gradient(155deg, rgba(255,255,255,0.045), rgba(255,255,255,0.012))}
  #pricing .pricing-card.featured .card-qual{font-size:0.9rem;letter-spacing:0.14em;
    text-transform:uppercase;color:var(--amber-hot)}
  #pricing .pricing-card.featured .card-desc{border-top:1px solid var(--border-subtle);
    padding-top:18px;margin-top:18px;font-size:1.02rem}
}

/* ============================================================
   FIX ROUND 1 — audit pass 1 (29 findings triaged; append-only,
   later rules win at equal specificity)
   ============================================================ */

/* [design P0] Hero seal: deepen the deboss so it reads stamped, not stuck on.
   Darker recess center, heavier top inner shadow, brighter lower lip. */
.cdk-seal{background:radial-gradient(circle,rgba(5,7,12,0.84) 0%,rgba(6,9,14,0.64) 55%,rgba(8,11,17,0.36) 100%);
  box-shadow:
    inset 0 4px 9px rgba(0,0,0,0.64),
    inset 0 -1px 2px rgba(255,255,255,0.17),
    0 1px 1px rgba(255,255,255,0.18),
    0 -1px 1px rgba(0,0,0,0.30)}
.cdk-seal::before{border-color:rgba(255,140,35,0.42)}

/* [design P0] CDK wire: anchor both ends with glowing terminals so the line
   reads as a live connection, not a stray segment. Horizontal on desktop,
   vertical in the stacked <=768 layout. */
#cdk .cdk-wire{position:relative}
#cdk .cdk-wire::before,#cdk .cdk-wire::after{content:"";position:absolute;width:8px;height:8px;
  border-radius:50%;top:50%;transform:translateY(-50%)}
#cdk .cdk-wire::before{left:-4px;background:var(--orange);box-shadow:0 0 10px rgba(255,140,35,0.8)}
#cdk .cdk-wire::after{right:-4px;background:var(--success);box-shadow:0 0 10px rgba(16,185,129,0.7)}
@media (max-width:768px){
  #cdk .cdk-wire::before{left:50%;top:-4px;transform:translateX(-50%)}
  #cdk .cdk-wire::after{right:auto;left:50%;top:auto;bottom:-4px;transform:translateX(-50%)}
}

/* [design P2] Terminal + RO mockup fidelity: inset screen depth, varied
   repair-order bar lengths so the mock reads as real data. */
#cdk .ct-screen{box-shadow:inset 0 2px 6px rgba(0,0,0,0.5)}
#cdk .cdk-lines li:nth-child(1) .cdk-bar{flex-basis:96px}
#cdk .cdk-lines li:nth-child(2) .cdk-bar{flex-basis:58px}

/* [design P0] Pricing chip swatches read as placeholder assets at bento
   scale — retire them in this section (the card-motif chip lives on in the
   hero's real EMV chip). */
#pricing .pricing-card::after{display:none}

/* [design/layout P0] Timeline gutters below the center-spine breakpoint:
   .hiw sits outside .container and had no side padding of its own. */
@media (max-width:1024px){
  .hiw{padding-left:24px;padding-right:24px}
}
/* [layout P1] Tablet band: cap card measure so text never runs edge to edge */
@media (min-width:769px) and (max-width:1024px){
  .hiw-card{max-width:640px}
}

/* [design P1] Pain cards: one reading order across the bento (icon,
   heading, figure, prose) + split the lead card's slack space. */
#pain-points .pain-card--stat{display:flex;flex-direction:column}
#pain-points .pain-card--stat .card-icon{order:-2}
#pain-points .pain-card--stat h3{order:-1;margin-bottom:14px}
#pain-points .pain-card--lead p{margin-bottom:auto}

/* [a11y P0] Ledger "was" ink was too dark to read at rest / reduced motion.
   Dusty carmine: clearly struck-out, still legible on the dark surface. */
.lv-was{color:#B06066}
.ledger-value[data-value] .lv-was::after{background:#B06066}

/* [a11y P1] Focus brackets must never spin: the current node's conic-halo
   animation would otherwise rotate the viewfinder marks. */
.hiw-node:focus-visible::after{animation:none;transform:none}
/* [a11y P2] Bracket clearance inside the ledger's clipped footer */
.ledger-foot .btn:focus-visible::after{inset:-4px}

/* [design P0] Small-phone navbar: real breathing room between wordmark,
   CTA, and hamburger; toggle stays inside the safe gutter. */
@media (max-width:480px){
  .nav-logo{font-size:1rem;gap:8px}
  .brand-mark{width:26px;height:26px}
  .nav-cta{margin-right:8px}
  .nav-cta .btn{padding:8px 12px}
}

/* [layout P2] Phone table: right-edge fade signals the horizontal scroll */
@media (max-width:768px){
  #cdk .table-wrap{-webkit-mask-image:linear-gradient(90deg,#000 86%,transparent);
    mask-image:linear-gradient(90deg,#000 86%,transparent)}
}

/* [perf P0] The reflection is a desktop-only effect — at <=1024 the shorter
   stage let it bleed over the marquee band. (S8 already zeroed it; this
   restates it after the fix-round rules so the cascade can never resurrect it.) */
@media (max-width:1024px){
  .hero-card-float{-webkit-box-reflect:none}
}

/* [perf P1] The finale form card sat a backdrop-filter on top of the live
   dawn shader — every frame re-blurred a full card of pixels. The card is
   near-opaque anyway (its content is the booking iframe): drop the blur,
   keep the glass read via the rim gradient, wire the dawn tokens in. */
.cta-form-card{-webkit-backdrop-filter:none;backdrop-filter:none;
  background:
    linear-gradient(rgba(11,15,26,0.90),rgba(11,15,26,0.90)) padding-box,
    linear-gradient(155deg,
      color-mix(in srgb,var(--gold-dawn) 45%,transparent),
      color-mix(in srgb,var(--orange) 18%,transparent) 30%,
      rgba(255,255,255,0.06) 60%,
      color-mix(in srgb,var(--carmine) 25%,transparent)) border-box}

/* [a11y P2] Reduced motion: the global reset collapses durations but not
   delays — kill the hero entrance outright so nothing pops in sequence. */
@media (prefers-reduced-motion:reduce){
  .hero-title,.hero-sub,.hero-buttons,.hero-cred,.trust-bar,.hero-stage{
    animation:none;opacity:1;transform:none}
}

/* ============================================================
   ROUND 2 - CINEMA PASS
   Owner feedback on the first pass: too conservative, no scroll
   choreography, no depth. This block is scroll camera work and
   ignition lighting. Contract: js/showcase.js sets --hs (0..1) on
   .hero as an inline style and adds "sc-lit" (add-only) to
   #pain-points, #how-it-works, #cdk, #pricing, #security, #faq,
   #book-demo when each crosses 25% viewport visibility. Under
   reduced motion the JS never runs the scroll math; it adds
   sc-lit to every target immediately instead, so --hs stays 0 and
   every wash below lands lit, not dim. All new rules append; none
   edit an earlier declaration in place.
   ============================================================ */

/* ---------- R2-1. HERO CAMERA DOLLY (>=1025px only) ----------
   The card recedes like a slow pull-back; the copy column drifts
   at a slower, independent rate and fades as the visitor leaves
   the hero. Hosts are chosen deliberately: .hero-card-scene and
   .hero-copy carry no fill:both entrance keyframe of their own
   (those live on .hero-title/.hero-sub/.hero-buttons/.hero-cred/
   .trust-bar and on .hero-stage), so putting transform here never
   fights an entrance animation. No transition on either rule:
   --hs already tracks scroll on a rAF throttle in JS, so the
   motion IS the scrollbar; adding a CSS transition would make the
   card visibly lag a frame behind the finger/wheel. */
@media (min-width:1025px){
  .hero-card-scene{
    transform:translateY(calc(var(--hs,0) * 110px)) scale(calc(1 - var(--hs,0) * 0.10));
  }
  .hero-copy{
    transform:translateY(calc(var(--hs,0) * 55px));
    opacity:calc(1 - var(--hs,0) * 0.55);
  }
}

/* ---------- R2-2. SECTION IGNITION ----------
   The page's ambient light comes on section by section as the
   visitor walks it, instead of every wash sitting at full strength
   from first paint. Two sections already carry a wash (#pain-points,
   #security, both from earlier rounds) - those get an opacity ramp
   restated on the SAME selector. Four sections had no wash at all
   (checked both files: no #how-it-works::before, #cdk::before,
   #pricing::before, or #faq::before existed anywhere before this
   block) - those get a brand-new ::before built on the exact same
   recipe already proven on #pain-points: absolute inset:0, z-index:0,
   pointer-events:none, with the section's real content promoted to
   z-index:1 so it keeps painting above the wash (without that
   promotion, a static-positioned .container paints BEHIND a z-index:0
   sibling pseudo-element, per normal stacking order - the reason
   every prior wash in this file already does the same promotion).
   Every gradient stop below stays under rgba alpha .16, so AA text
   contrast is never at stake - only the negative space around the
   content shifts. #cdk .cdk-demo::before (the floor pool) and
   #cdk .cdk-terminal-col::before (the light shaft) are DIFFERENT,
   already-scoped elements from Act IV and are untouched here. */
#pain-points::before{opacity:.12;transition:opacity 1.4s ease .1s}
#pain-points.sc-lit::before{opacity:1}

#security::before{opacity:.12;transition:opacity 1.4s ease .1s}
#security.sc-lit::before{opacity:1}

#how-it-works::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  opacity:.12;transition:opacity 1.4s ease .1s;
  background:
    radial-gradient(52% 56% at 50% 34%, rgba(255,140,35,0.14), transparent 72%),
    radial-gradient(44% 48% at 50% 82%, rgba(255,140,35,0.06), transparent 76%)}
#how-it-works.sc-lit::before{opacity:1}
#how-it-works .container{position:relative;z-index:1}
#how-it-works .hiw{z-index:1}

#cdk::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  opacity:.12;transition:opacity 1.4s ease .1s;
  background:
    radial-gradient(54% 46% at 50% 30%, rgba(255,180,84,0.15), transparent 74%),
    radial-gradient(40% 40% at 16% 72%, rgba(255,140,35,0.05), transparent 76%)}
#cdk.sc-lit::before{opacity:1}
#cdk .container{position:relative;z-index:1}

#pricing::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  opacity:.12;transition:opacity 1.4s ease .1s;
  background:
    radial-gradient(56% 50% at 50% 60%, rgba(255,140,35,0.16), transparent 74%),
    radial-gradient(42% 42% at 80% 26%, rgba(255,180,84,0.08), transparent 76%)}
#pricing.sc-lit::before{opacity:1}
#pricing .container{position:relative;z-index:1}

#faq::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  opacity:.12;transition:opacity 1.4s ease .1s;
  background:radial-gradient(60% 60% at 50% 46%, rgba(240,242,245,0.05), transparent 78%)}
#faq.sc-lit::before{opacity:1}
#faq .container{position:relative;z-index:1}

/* ---------- R2-3. FINALE DAWN BUILD ----------
   .player--glow::before (styles.css section 17b) is currently a flat,
   always-on radial glow behind the booking card with no baseline
   opacity or transition of its own. Give it a dim baseline and let
   dawn genuinely BREAK once the finale crosses 25% viewport: bigger,
   brighter, over ~2s. Only transform/opacity/background change here;
   the parallax --dy drift stays owned by .player itself (untouched). */
.player--glow::before{opacity:.55;transition:transform 2s ease,opacity 2s ease}
#book-demo.sc-lit .player--glow::before{
  transform:scale(1.35);opacity:1;
  background:radial-gradient(circle,rgba(255,180,84,.34),rgba(178,54,63,.10) 45%,transparent 68%);
}

/* ---------- R2-4. DEPTH ----------
   (a) True 3D on the two hover-lift cards already on the page. Both
   box-shadow blocks are copied VERBATIM from their styles.css hover
   rules (.pricing-card:hover line ~1302, .pain-card:hover line ~571)
   so only the transform changes. Both cards carry "fade-up" directly
   in the markup, same as the existing hover rules they extend - the
   file-order rule keeps this safe (showcase.css loads after
   styles.css, so this rule wins the equal-specificity tie against
   .fade-up.visible's transform:none the same way the original hover
   rules already needed to). */
.pricing-card:hover{
  transform:translateY(-6px) perspective(900px) rotateX(1.6deg);
  box-shadow:
    0 24px 50px rgba(0,0,0,0.48),
    inset 0 1px 0.5px rgba(255,255,255,0.32),
    inset 0 -20px 30px -24px rgba(0,0,0,0.4),
    0 0 26px rgba(255,140,35,0.08);
}
.pain-card:hover{
  transform:translateY(-6px) perspective(900px) rotateX(1.6deg);
  box-shadow:inset 0 1px 0.5px rgba(255,255,255,0.4),inset -1px -3px 9px rgba(0,0,0,0.36),
    0 0 0 1px rgba(178,54,63,0.28),0 0 40px rgba(178,54,63,0.18),0 30px 60px rgba(0,0,0,0.5);
}

/* (b) .hiw-card had a transition on border-color/box-shadow only; add
   transform to that list and give it a real hover lift plus a
   slightly stronger neutral edge. The current-step rule
   (.hiw-step:has(.hiw-node.is-current) .hiw-card) is a longer,
   higher-specificity selector, so it still wins the border-color
   whenever a step is actually current - this hover just adds a
   resting-state hint on every other card. Not touching .cdk-panel:
   its shatter-burst WAAPI sequence owns that element's transform. */
.hiw-card{transition:border-color .4s ease,box-shadow .4s ease,transform .4s var(--ease-out-expo)}
.hiw-card:hover{transform:translateY(-3px);border-color:rgba(255,255,255,0.18)}

/* ---------- R2-5. DISPLAY DRAMA ---------- */
/* Bigger display ceiling: restates the custom property from S0, later wins.
   Ceiling trimmed from 5rem to 4.5rem for the Poppins restore, since bold
   Poppins carries more visual mass per point than the serif it replaced. */
:root{--text-h1:clamp(2.7rem,1.35rem + 4.6vw,4.5rem)}

/* A slow breathing glow on the leak figure - the loss visibly pulses,
   never resting at one brightness. Paint-only (text-shadow), no
   layout property involved, matched to the other slow ambient loops
   on the page (ledBreathe, btnShine) rather than anything jarring. */
@keyframes scLeakGlow{
  0%,100%{text-shadow:0 0 54px rgba(178,54,63,.40)}
  50%{text-shadow:0 0 54px rgba(255,107,114,.75)}
}
.leak-amount{animation:scLeakGlow 3s ease-in-out infinite}

/* Marquee glint, turned up: brighter streak, quicker pass. Restated in
   full (not just the changed properties) with a NEW keyframe name
   (scGlint2) so it never collides with S3's scGlint - the two names
   coexisting is harmless since only one rule ever targets
   .logo-marquee::before's animation property at a time (this one,
   being later in the file, wins outright). */
.logo-marquee::before{content:"";position:absolute;top:-1px;left:0;width:30%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,180,84,0.85),transparent);
  transform:translateX(-100%);animation:scGlint2 5.5s linear infinite;pointer-events:none}
@keyframes scGlint2{to{transform:translateX(433%)}}

/* ---------- R2-6. SPINE COMET ----------
   Restate only background + box-shadow on .hiw-timeline::after (the
   spine fill, styles.css section 7b): every other property (content,
   position, width, top/height driven by --spine-top/--spine-fill,
   transform, border-radius, pointer-events, the height transition)
   is left exactly as shipped. The fill now runs carmine to orange to
   a hot near-white tip, with a heavier glow, so the "current step"
   read is a comet with a white-hot head rather than a flat gradient. */
.hiw-timeline::after{
  background:linear-gradient(180deg, var(--carmine), var(--orange) 82%, #FFD9A0 100%);
  box-shadow:0 0 22px rgba(255,140,35,0.7),0 0 40px rgba(255,217,160,0.35);
}

/* ---------- R2-7. REDUCED MOTION + RESPONSIVE ---------- */
/* The dolly in R2-1 already needs nothing extra: JS never sets --hs
   above 0 under reduced motion, so both transforms stay at their
   zero-state with no override required. The section washes need
   nothing extra either: sc-lit lands on every target synchronously
   (see the file-header note above) and the sitewide global reset in
   styles.css section 20 already collapses every transition duration
   to near-zero, so the lit end-state is what reduced-motion visitors
   see, never the dim pre-state. Only the two new looping keyframes
   need an explicit kill, matching how S9 already handles the older
   marquee glint. */
@media (prefers-reduced-motion:reduce){
  .leak-amount{animation:none}
  .logo-marquee::before{display:none}
}
/* Washes are unscoped to any width (inset:0, no transform, no
   dimension change) so there is no horizontal-overflow risk at any
   breakpoint; the dolly stays desktop-only per R2-1's own media
   query, so mobile/tablet never see it. Nothing in this block needs
   a dedicated responsive override beyond what R2-1 through R2-6
   already scope themselves. */