/* ============================================================================
   StratusQuant — design system (Agent G build, tokens per _intel/brand_system.md)
   Premium systematic-trading house: cool deep-slate, cyan-teal precision accent,
   warm amber CTA. Sora / IBM Plex. Dark/blurred-chart hero. Refined, not gaudy.
   ============================================================================ */
:root{
  /* base / surfaces */
  --sq-bg-base:#0B1220; --sq-bg-elevated:#111B2E; --sq-bg-card:#16223A;
  --sq-bg-inset:#0E1626; --sq-line:#233143;
  /* text */
  --sq-text:#E8EEF6; --sq-text-muted:#9FB0C4; --sq-text-dim:#8593AB; --sq-ink:#0B1220;
  /* accent: cyan-teal precision signature */
  --sq-accent:#29D3C2; --sq-accent-bright:#5FF0E0; --sq-accent-deep:#0FA89A;
  --sq-accent-glow:rgba(41,211,194,.28);
  /* secondary cool slate-blue */
  --sq-blue:#4F7DF0; --sq-blue-dim:#2E4A8A;
  /* CTA warm signal-amber */
  --sq-cta:#FFB23E; --sq-cta-hover:#FFC468; --sq-cta-ink:#1A1206;
  /* state */
  --sq-pos:#34D399; --sq-neg:#F26D6D;
  /* type */
  --sq-font-display:"Sora","Segoe UI",system-ui,-apple-system,sans-serif;
  --sq-font-body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --sq-font-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  /* radius */
  --sq-radius-sm:6px; --sq-radius:12px; --sq-radius-lg:20px; --sq-radius-pill:999px;
  /* shadow */
  --sq-shadow-card:0 6px 24px rgba(4,9,18,.45);
  --sq-shadow-cta:0 8px 28px rgba(255,178,62,.30);
  --sq-shadow-glow:0 0 60px var(--sq-accent-glow);
  /* motion */
  --sq-ease:cubic-bezier(.22,.61,.36,1); --sq-transition:240ms var(--sq-ease); --sq-transition-fast:140ms var(--sq-ease);
  /* spacing */
  --sq-space-xs:8px; --sq-space-sm:16px; --sq-space-md:24px; --sq-space-lg:48px; --sq-space-xl:80px;
  --sq-maxw:1120px;
}
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0;background:var(--sq-bg-base,#0B1220);color:var(--sq-text,#E8EEF6);
  font-family:var(--sq-font-body);font-size:17px;line-height:1.65;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;
}
/* subtle structural grid texture for depth (not gaudy) — SUPPRESSED 2026-06-27 (M3/A13-C1).
   The old fixed 88px grid + top-right cyan glow beat against the abstract hero's own 86px
   grid + 76%/4% radial → visible moire double-grid + a blown-out top-right corner. The
   abstract CSS/SVG hero (.sq-hero--atmos) carries all equivalent atmosphere, tuned together,
   so this global layer is now destructive. Reinstating it requires re-tuning every hero layer
   to avoid the double-grid / glow blowout. */
body::before{display:none;}
h1,h2,h3,h4{font-family:var(--sq-font-display);font-weight:700;line-height:1.12;letter-spacing:-.01em;margin:0 0 .5em;color:var(--sq-text);}
h1{font-size:clamp(2.1rem,5.2vw,3.7rem);font-weight:800;text-wrap:balance;}
h2{font-size:clamp(1.6rem,3.4vw,2.5rem);}
h3{font-size:clamp(1.18rem,2vw,1.5rem);}
p{margin:0 0 1rem;color:var(--sq-text-muted);}
a{color:var(--sq-accent-bright);text-decoration:none;transition:color var(--sq-transition-fast);}
a:hover{color:var(--sq-accent);}
strong{color:var(--sq-text);font-weight:600;}
.accent{color:var(--sq-accent);}
.mono{font-family:var(--sq-font-mono);}
.wrap{max-width:var(--sq-maxw);margin:0 auto;padding:0 24px;position:relative;z-index:1;}
section{position:relative;z-index:1;padding:var(--sq-space-xl) 0;}
.eyebrow{font-family:var(--sq-font-mono);text-transform:uppercase;letter-spacing:.22em;
  font-size:.74rem;color:var(--sq-accent);margin:0 0 1rem;font-weight:500;}
.lede{font-size:1.18rem;color:var(--sq-text-muted);max-width:60ch;}

/* ---------- header ---------- */
.sq-header{position:sticky;top:0;z-index:50;background:rgba(11,18,32,.72);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--sq-line);}
.sq-header__in{display:flex;align-items:center;justify-content:space-between;height:68px;}
.sq-brand{display:flex;align-items:center;gap:10px;font-family:var(--sq-font-display);font-weight:700;
  font-size:1.22rem;letter-spacing:-.02em;color:var(--sq-text);}
.sq-brand svg{width:30px;height:30px;display:block;}
.sq-brand b{font-weight:800;}
.sq-nav{display:flex;gap:28px;align-items:center;}
.sq-nav a{color:var(--sq-text-muted);font-size:.95rem;font-weight:500;}
.sq-nav a:hover{color:var(--sq-text);}
/* mobile: keep the nav usable (CSS-only) — wrap as compact pill links instead of hiding it.
   Header stacks brand over a wrapped pill row so Support + Get it stay reachable from the top. */
@media(max-width:760px){
  /* tall stacked nav would be heavy if sticky on a phone — let it scroll away; the product
     pages keep the price-free .sticky-cta for an always-reachable buy. */
  .sq-header{position:static;}
  .sq-header__in{flex-direction:column;align-items:stretch;height:auto;gap:10px;padding-top:12px;padding-bottom:12px;}
  .sq-brand{align-self:flex-start;min-height:44px;}
  .sq-nav{gap:8px 8px;flex-wrap:wrap;justify-content:flex-start;}
  /* ≥44px touch targets (Apple HIG / WCAG 2.5.5) for the pill nav */
  .sq-nav a{font-size:.82rem;padding:0 15px;min-height:44px;display:inline-flex;align-items:center;
    border:1px solid var(--sq-line);border-radius:var(--sq-radius-pill);
    background:var(--sq-bg-elevated);color:var(--sq-text);line-height:1.1;}
  .sq-nav a:hover,.sq-nav a:active{border-color:var(--sq-accent);color:var(--sq-accent);}
  /* make the "Get it" CTA pill stand out (last link) — but not when the last link is Support */
  .sq-nav a:last-child:not([href$="support.html"]){background:var(--sq-cta);color:var(--sq-cta-ink);border-color:var(--sq-cta);font-weight:600;}
  .sq-nav a:last-child:not([href$="support.html"]):hover{background:var(--sq-cta-hover);color:var(--sq-cta-ink);border-color:var(--sq-cta-hover);}
}
@media(max-width:380px){.sq-nav a{font-size:.76rem;padding:6px 10px;}}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.5em;font-family:var(--sq-font-display);font-weight:600;
  font-size:1.02rem;padding:15px 30px;border-radius:var(--sq-radius-pill);border:0;cursor:pointer;
  transition:transform var(--sq-transition-fast),box-shadow var(--sq-transition),background var(--sq-transition);}
.btn-cta{background:var(--sq-cta);color:var(--sq-cta-ink);box-shadow:var(--sq-shadow-cta);}
.btn-cta:hover{background:var(--sq-cta-hover);color:var(--sq-cta-ink);transform:translateY(-2px);}
.btn-ghost{background:transparent;color:var(--sq-text);border:1px solid var(--sq-line);}
.btn-ghost:hover{border-color:var(--sq-accent);color:var(--sq-accent);}
/* disabled / not-yet-live button (e.g. "Coming Soon") — looks like a .btn but inert */
.btn.is-disabled{background:var(--sq-bg-elevated);color:var(--sq-text-dim);box-shadow:none;border:1px solid var(--sq-line);
  opacity:.55;pointer-events:none;cursor:not-allowed;transform:none;}

/* coming-soon badge — matches the .eyebrow mono cue but pill-shaped and self-contained */
.sq-badge{display:inline-flex;align-items:center;gap:8px;font-family:var(--sq-font-mono);font-weight:500;
  text-transform:uppercase;letter-spacing:.16em;font-size:.72rem;line-height:1;
  padding:8px 14px;border-radius:var(--sq-radius-pill);border:1px solid var(--sq-line);
  background:var(--sq-bg-base);color:var(--sq-text-muted);}
.sq-badge--soon{color:var(--sq-cta);border-color:rgba(255,178,62,.4);background:rgba(255,178,62,.08);}
.sq-badge--soon .dot{width:7px;height:7px;border-radius:50%;background:var(--sq-cta);box-shadow:0 0 0 3px rgba(255,178,62,.18);}
.sq-badge--live{color:var(--sq-pos);border-color:var(--sq-pos);background:rgba(52,211,153,.08);}
.sq-badge--live .dot{width:7px;height:7px;border-radius:50%;background:var(--sq-pos);box-shadow:0 0 0 3px rgba(52,211,153,.18);}
/* small badge pinned on a product card */
.card-badge{position:absolute;top:18px;right:18px;}
.card{position:relative;}

/* ---------- hero (Expression A: dark/blurred chart + cyan glow) ---------- */
.sq-hero{position:relative;overflow:hidden;background:var(--sq-bg-base);padding:clamp(64px,11vw,128px) 0 var(--sq-space-xl);
  border-bottom:1px solid var(--sq-line);}
.sq-hero__bg{position:absolute;inset:0;background:center/cover no-repeat var(--hero-chart,linear-gradient(120deg,#0E1626,#16223A));
  filter:saturate(1.08);transform:scale(1.02);opacity:.92;}
.sq-hero__scrim{position:absolute;inset:0;
  background:radial-gradient(85% 70% at 80% 14%,var(--sq-accent-glow),transparent 58%),
             linear-gradient(90deg,rgba(11,18,32,.96) 0%,rgba(11,18,32,.86) 30%,rgba(11,18,32,.42) 62%,rgba(11,18,32,.12) 100%);}
.sq-hero__in{position:relative;z-index:2;max-width:880px;}
.sq-usps{list-style:none;padding:0;margin:1.6rem 0 2.2rem;display:flex;flex-wrap:wrap;gap:12px 26px;}
.sq-usps li{display:flex;align-items:center;gap:9px;color:var(--sq-text);font-weight:500;font-size:1rem;}
.sq-usps li::before{content:"";width:18px;height:18px;flex:0 0 18px;border-radius:50%;
  background:var(--sq-accent-glow);box-shadow:inset 0 0 0 2px var(--sq-accent);
  -webkit-mask:none;}
.sq-cta-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center;}
.sq-cta-note{font-size:.82rem;color:var(--sq-text-dim);font-family:var(--sq-font-mono);}
/* hero mono trust strip (mt4ic hero__trust pattern, SQ tokens) */
.sq-trust{display:flex;flex-wrap:wrap;gap:10px 24px;margin:0 0 26px;font-family:var(--sq-font-mono);
  font-size:.82rem;color:var(--sq-text-dim);}
.sq-trust span{display:inline-flex;align-items:center;gap:8px;}
.sq-trust span::before{content:"";width:14px;height:14px;flex:0 0 14px;border-radius:50%;
  background:var(--sq-accent-glow);box-shadow:inset 0 0 0 2px var(--sq-accent);}
.sq-trust b{color:var(--sq-accent-bright);font-weight:600;}

/* ---------- generic cards / grids ---------- */
.grid{display:grid;gap:22px;}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-2{grid-template-columns:repeat(2,1fr);}
@media(max-width:860px){.grid-3,.grid-2{grid-template-columns:1fr;}}
.card{background:linear-gradient(180deg,var(--sq-bg-card),var(--sq-bg-elevated));
  border:1px solid var(--sq-line);border-radius:var(--sq-radius-lg);padding:28px;box-shadow:var(--sq-shadow-card);
  transition:transform var(--sq-transition),border-color var(--sq-transition);}
.card:hover{transform:translateY(-4px);border-color:var(--sq-accent-deep);}
.card h3{margin-top:.2rem;}
.card .ic{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;margin-bottom:16px;
  background:var(--sq-accent-glow);color:var(--sq-accent);}
.card .ic svg{width:22px;height:22px;}

/* ---------- auto-fill product catalog (mt4ic catsec + reflow grid, SQ tokens) ---------- */
/* future products drop straight into .sq-catgrid with zero layout work */
.sq-catsec{margin:0 0 var(--sq-space-lg);}
.sq-catsec__h{display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  border-bottom:1px solid var(--sq-line);padding-bottom:12px;margin-bottom:24px;}
.sq-catsec__h h2{margin:0;font-size:1.5rem;}
.sq-catsec__h a{font-family:var(--sq-font-mono);font-size:.86rem;color:var(--sq-accent);white-space:nowrap;
  display:inline-flex;align-items:center;min-height:44px;}
.sq-catgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr));gap:24px;align-items:stretch;}
/* every catalog card is a full-height flex column so feet bottom-align */
.sq-catgrid .card{display:flex;flex-direction:column;}
.sq-catgrid .card > p{flex:1 1 auto;}
/* card head row: category eyebrow on the left, status badge on the right (inline, not absolute) */
.card__head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:14px;}
.card__head .eyebrow{margin:0;}
.card__head .sq-badge{position:static;}
/* thumbnail-card variant — real chart screenshot on top (mt4ic .ptile) */
.card--thumb{padding:0;overflow:hidden;}
.card--thumb .card__thumb{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;
  background:var(--sq-bg-inset);border-bottom:1px solid var(--sq-line);}
.card--thumb .card__body{padding:24px 26px 24px;display:flex;flex-direction:column;flex:1;}
.card--thumb .card__body > p{flex:1 1 auto;}
/* card foot: price/status on its own line, a real CTA BUTTON beneath it */
.card__foot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:18px;}
.card__price{font-family:var(--sq-font-mono);font-size:.9rem;color:var(--sq-text);font-weight:500;}
.card__price b{color:var(--sq-accent-bright);font-weight:600;}
.card__view{font-family:var(--sq-font-mono);font-size:.86rem;color:var(--sq-accent);white-space:nowrap;}

/* ---- Catalog card CTA — a real, unmistakable BUTTON (replaces the faint "View indicator →" text
   link that read as invisible, esp. on mobile where there is no hover). The whole card is the <a>,
   so this button-styled <span> is pure visual affordance — solid accent fill at REST so it reads as
   a button with zero interaction, brighter + lifted on hover/focus. The foot STACKS: price on its
   own line, full-width button under it, so it reads cleanly on a 360px phone and on desktop alike.
   Cyan (not the amber BUY colour) = "explore/view", so it never gets mistaken for a checkout button.
   Tap target ≥48px. Scoped to .card__cta so the inline .card__view text links are untouched. ---- */
.card--thumb .card__foot{flex-direction:column;align-items:stretch;gap:14px;margin-top:22px;}
.card--thumb .card__price{align-self:flex-start;font-size:.95rem;}
.card__cta{display:flex;align-items:center;justify-content:center;gap:9px;
  width:100%;min-height:48px;padding:13px 22px;box-sizing:border-box;
  font-family:var(--sq-font-display);font-weight:700;font-size:1rem;letter-spacing:.005em;
  color:#0B1220;background:var(--sq-accent);
  border:1.5px solid var(--sq-accent);border-radius:var(--sq-radius-pill);
  white-space:nowrap;text-align:center;box-shadow:0 6px 18px rgba(41,211,194,.22);
  transition:background var(--sq-transition),transform var(--sq-transition-fast),
    box-shadow var(--sq-transition),border-color var(--sq-transition);}
.card__cta .arr{transition:transform var(--sq-transition);}
.card--thumb:hover .card__cta,.card--thumb:focus-within .card__cta{
  background:var(--sq-accent-bright);border-color:var(--sq-accent-bright);
  transform:translateY(-1px);box-shadow:0 10px 26px rgba(41,211,194,.32);}
.card--thumb:hover .card__cta .arr{transform:translateX(4px);}
/* Coming-soon card: same button shape, muted ghost — clearly "not yet", not a live buy target. */
.card--soon .card__cta{background:var(--sq-bg-elevated);color:var(--sq-text);
  border-color:var(--sq-line);box-shadow:none;}
.card--soon:hover .card__cta{background:var(--sq-bg-card);color:var(--sq-text);
  border-color:var(--sq-accent);transform:none;box-shadow:none;}
/* --- product attribute chips on the card face (mt4ic tag--nr equivalent; A8-G1) ----------
   Scoped UNDER .card__tags so the product chip never collides with the absolute-positioned
   chart-ribbon `.sq-chip` (line ~245); both selectors stay valid. The chip is a flow-level,
   mono pill that flags an honest engineering fact — the on-card trust signal we were missing.
   `.sq-chip--parity` appears ONLY on parity-green products; omit for coming-soon. */
.card__tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px;margin-bottom:4px;}
.card__tags .sq-chip{position:static;display:inline-flex;align-items:center;
  font-family:var(--sq-font-mono);font-size:.72rem;font-weight:600;padding:3px 10px;
  border-radius:var(--sq-radius-pill);letter-spacing:.02em;line-height:1.5;
  background:var(--sq-bg-inset);color:var(--sq-text-muted);border:1px solid var(--sq-line);
  box-shadow:none;text-transform:none;}
.card__tags .sq-chip--parity{background:rgba(41,211,194,.10);color:var(--sq-accent);
  border-color:rgba(41,211,194,.3);}
/* card description colour via class (A8-G4) — removes the inline style="color:..." and keeps
   the flex:1 foot-alignment trick reliable (incl. Safari) on the real `> p` element. */
.card--thumb .card__body > p{flex:1 1 auto;color:var(--sq-text-muted);}

/* ---------- lead-magnet opt-in widget (mt4ic widget--accent, SQ tokens) ---------- */
.sq-widget{background:var(--sq-bg-card);border:1px solid var(--sq-line);border-radius:var(--sq-radius-lg);overflow:hidden;}
.sq-widget--accent{border-color:var(--sq-accent);box-shadow:var(--sq-shadow-glow);}
.sq-widget__h{margin:0;padding:14px 22px;font-family:var(--sq-font-mono);text-transform:uppercase;
  letter-spacing:.16em;font-size:.74rem;color:var(--sq-cta-ink);background:var(--sq-accent);}
.sq-widget__b{padding:26px 28px 28px;}
.sq-widget__b input[type=email]{width:100%;padding:14px 16px;border:1px solid var(--sq-line);
  background:var(--sq-bg-inset);color:var(--sq-text);border-radius:var(--sq-radius-sm);
  font-size:1rem;font-family:var(--sq-font-body);outline:none;transition:border-color var(--sq-transition-fast);}
.sq-widget__b input[type=email]:focus{border-color:var(--sq-accent);}
.optin__consent{font-size:.8rem;color:var(--sq-text-dim);line-height:1.5;margin:14px 0;}
/* full-width CTA button (for the opt-in submit) */
.btn--block{display:flex;width:100%;justify-content:center;}
/* visible support cue (near offer/FAQ) */
.sq-support-cue{margin-top:6px;text-align:center;color:var(--sq-text-muted);font-size:.98rem;}

/* ---------- persistent content + sticky sidebar shell (mt4indicatorcentral pattern) ---------- */
/* main browsing column on the left, a persistent opt-in/aside that sticks as you scroll on the right */
.sq-shell{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:40px;align-items:start;}
.sq-shell__main{min-width:0;}
/* RETIRED 2026-06-27 (M14/A8-G2): the forced 1-column override capped the catalog at a single
   column, defeating the responsive grid as products grow. Removing the column-lock lets
   .sq-catgrid's auto-fill minmax(300px,1fr) run — 1-2 products stretch full-width inside the
   shell column (the old "list" look), 3+ products grow to 2-up automatically. Kept as a no-op
   selector so the existing class in index.html harmlessly resolves to the responsive grid. */
.sq-catgrid--list{ /* column-lock removed; inherits responsive .sq-catgrid columns */ }
.sq-aside{position:sticky;top:88px;display:flex;flex-direction:column;gap:20px;}
.sq-aside .sq-widget__b{padding:22px 22px 24px;}
.sq-aside__note{background:var(--sq-bg-card);border:1px solid var(--sq-line);border-radius:var(--sq-radius-lg);
  padding:22px 24px;box-shadow:var(--sq-shadow-card);}
.sq-aside__note .eyebrow{margin-bottom:12px;}
.sq-aside__note ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;}
.sq-aside__note li{position:relative;padding-left:18px;font-size:.92rem;color:var(--sq-text-muted);line-height:1.5;}
.sq-aside__note li::before{content:"";position:absolute;left:0;top:8px;width:7px;height:7px;border-radius:50%;
  background:var(--sq-accent);box-shadow:0 0 8px var(--sq-accent);}
@media(max-width:960px){.sq-shell{grid-template-columns:minmax(0,1fr);gap:32px;}.sq-aside{position:static;min-width:0;}}

/* mechanism / proof figure */
.figure{border:1px solid var(--sq-line);border-radius:var(--sq-radius-lg);overflow:hidden;background:var(--sq-bg-inset);}
.figure img{display:block;width:100%;height:auto;}
.figure figcaption{padding:10px 16px;font-size:.78rem;color:var(--sq-text-dim);font-family:var(--sq-font-mono);
  border-top:1px solid var(--sq-line);}

/* ---------- v2 BIG-CHART band + stacked LARGE gallery (converting_sales_page_v2.md §3) ---------- */
/* the #1 fix: never a 3-up thumbnail grid for charts — big feature chart + 1-up stacked gallery */
.sq-chartband{background:var(--sq-bg-inset);border-top:1px solid var(--sq-line);
  border-bottom:1px solid var(--sq-line);padding:var(--sq-space-lg) 0;}
/* framed, glowing chart container — the "premium" jump (FA .chart-container analog, SQ tokens) */
.sq-chart{position:relative;border:1px solid rgba(41,211,194,.22);border-radius:var(--sq-radius-lg);
  overflow:hidden;background:var(--sq-bg-inset);
  box-shadow:0 16px 48px rgba(4,9,18,.6),0 0 44px var(--sq-accent-glow);}
.sq-chart img{display:block;width:100%;height:auto;}
/* chart-badge ribbon (cyan pill, top-left) — labels each chart */
.sq-chip{position:absolute;top:12px;left:14px;z-index:2;font-family:var(--sq-font-mono);font-size:.72rem;
  font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--sq-cta-ink);
  background:var(--sq-accent);padding:5px 12px;border-radius:var(--sq-radius-pill);box-shadow:var(--sq-shadow-card);}
@media(max-width:560px){.sq-chip{font-size:.66rem;padding:4px 9px;top:9px;left:10px;}}
/* per-image "illustration only" caption */
.sq-illus{font-size:.8rem;color:var(--sq-text-dim);font-family:var(--sq-font-mono);text-align:center;
  margin:14px auto 0;max-width:74ch;line-height:1.55;}
/* stacked LARGE gallery — one chart per row, full reading width */
.sq-chartstack{display:grid;gap:var(--sq-space-lg);}
.sq-chart-block{margin:0;}
.sq-chart-block h3{text-align:center;margin-bottom:14px;}
.sq-chart-block figcaption{text-align:center;}
/* optional 2-up large variant (fallback knob; still wide per cell at 1020 container) */
.sq-gallery-2up{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;}
@media(max-width:760px){.sq-gallery-2up{grid-template-columns:1fr;}}
/* zoomed marker crops — "the markers, up close" mini-row */
.sq-cropgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:6px;align-items:start;}
@media(max-width:760px){.sq-cropgrid{grid-template-columns:1fr;}}
/* mechanism color legend (marker color -> grade) */
.sq-legend{display:flex;flex-wrap:wrap;gap:10px 18px;margin:18px 0 6px;}
.sq-legend__i{display:inline-flex;align-items:center;gap:8px;font-size:.86rem;
  color:var(--sq-text-muted);font-family:var(--sq-font-mono);}
.sq-legend__i i{width:13px;height:13px;border-radius:50%;display:inline-block;flex:0 0 13px;
  box-shadow:0 0 0 1px rgba(255,255,255,.12);}

/* ---------- v2 HONEST-RICHNESS blocks (3-class / who-for / includes / trust / value) ---------- */
/* surface-alternating accent panel (breaks the flat dark column) */
.sq-panel{background:var(--sq-bg-card);border:1px solid var(--sq-line);border-radius:var(--sq-radius-lg);
  padding:var(--sq-space-lg);box-shadow:var(--sq-shadow-card);}
.sq-panel--inset{background:var(--sq-bg-inset);}
.sq-panel--accent{border-color:var(--sq-accent-deep);box-shadow:var(--sq-shadow-card),0 0 44px var(--sq-accent-glow);}

/* equal 3-up card row that reflows; cards bottom-align */
.sq-trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;align-items:stretch;}
@media(max-width:860px){.sq-trio{grid-template-columns:1fr;}}

/* "three classes at a glance" — color swatch + name + one-line definition */
.sq-classcard{background:var(--sq-bg-card);border:1px solid var(--sq-line);border-radius:var(--sq-radius-lg);
  padding:24px 24px 26px;box-shadow:var(--sq-shadow-card);display:flex;flex-direction:column;
  transition:transform var(--sq-transition),border-color var(--sq-transition);}
.sq-classcard:hover{transform:translateY(-3px);border-color:var(--sq-accent-deep);}
.sq-classcard__sw{width:34px;height:34px;border-radius:50%;margin-bottom:14px;flex:0 0 34px;
  box-shadow:0 0 0 4px rgba(255,255,255,.06),0 4px 14px rgba(4,9,18,.5);}
.sq-classcard h4{font-family:var(--sq-font-display);font-size:1.12rem;color:var(--sq-text);margin:0 0 8px;}
.sq-classcard p{font-size:.95rem;color:var(--sq-text-muted);margin:0;line-height:1.55;}
.sq-classcard .tag{font-family:var(--sq-font-mono);font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;
  color:var(--sq-accent);margin-top:auto;padding-top:14px;}

/* "who it's for" — icon-headed cards (FA who-for-card analog, SQ tokens) */
.sq-forcard{background:var(--sq-bg-inset);border:1px solid var(--sq-line);border-radius:var(--sq-radius-lg);
  padding:26px 24px;box-shadow:var(--sq-shadow-card);}
.sq-forcard__ic{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;margin-bottom:16px;
  background:var(--sq-accent-glow);color:var(--sq-accent);}
.sq-forcard__ic svg{width:22px;height:22px;}
.sq-forcard h4{font-family:var(--sq-font-display);font-size:1.06rem;color:var(--sq-text);margin:0 0 8px;}
.sq-forcard p{font-size:.95rem;color:var(--sq-text-muted);margin:0;line-height:1.55;}

/* "what's included" — checklist grid (FA factors-grid analog, SQ tokens) */
.sq-incgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;}
.sq-incitem{display:flex;align-items:flex-start;gap:12px;padding:16px 18px;background:var(--sq-bg-card);
  border:1px solid var(--sq-line);border-radius:var(--sq-radius);box-shadow:var(--sq-shadow-card);}
.sq-incitem svg{width:20px;height:20px;flex:0 0 20px;color:var(--sq-accent);margin-top:2px;}
.sq-incitem span{font-size:.96rem;color:var(--sq-text);line-height:1.45;}
.sq-incitem b{color:var(--sq-accent-bright);font-weight:600;}

/* trust-icon row near each CTA (true facts as small icons) */
.sq-trustrow{display:flex;flex-wrap:wrap;gap:14px 22px;justify-content:center;margin:22px 0 0;padding:0;list-style:none;}
.sq-trustrow li{display:inline-flex;align-items:center;gap:9px;font-family:var(--sq-font-mono);font-size:.82rem;
  color:var(--sq-text-muted);}
.sq-trustrow svg{width:18px;height:18px;flex:0 0 18px;color:var(--sq-accent);}
.sq-trustrow--left{justify-content:flex-start;}

/* honest value line at the ask ("Why $29?") */
.sq-value{margin-top:20px;padding:16px 18px;background:var(--sq-bg-inset);border:1px solid var(--sq-line);
  border-left:3px solid var(--sq-accent);border-radius:var(--sq-radius);font-size:.92rem;color:var(--sq-text-muted);line-height:1.6;}
.sq-value strong{color:var(--sq-text);}

/* params table */
.spec{width:100%;border-collapse:collapse;font-family:var(--sq-font-mono);font-size:.92rem;}
.spec th,.spec td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--sq-line);}
.spec th{color:var(--sq-accent);font-weight:500;letter-spacing:.04em;}
.spec td{color:var(--sq-text-muted);}

/* offer block */
.offer{background:linear-gradient(165deg,var(--sq-bg-elevated),var(--sq-bg-inset));border:1px solid var(--sq-line);
  border-radius:var(--sq-radius-lg);padding:38px;box-shadow:var(--sq-shadow-card);}
.offer ul{list-style:none;padding:0;margin:0 0 24px;}
.offer li{padding:10px 0 10px 30px;position:relative;color:var(--sq-text);border-bottom:1px solid var(--sq-line);}
.offer li:last-child{border-bottom:0;}
.offer li::before{content:"✓";position:absolute;left:0;color:var(--sq-accent);font-weight:700;}
.price{font-family:var(--sq-font-display);font-weight:800;font-size:2.6rem;color:var(--sq-text);line-height:1;}
.price small{font-family:var(--sq-font-mono);font-size:.9rem;color:var(--sq-text-dim);font-weight:400;display:block;margin-top:6px;}

/* FAQ */
.faq{display:grid;gap:0;border:1px solid var(--sq-line);border-radius:var(--sq-radius-lg);overflow:hidden;}
.faq__item{border-bottom:1px solid var(--sq-line);}
.faq__item:last-child{border-bottom:0;}
.faq__q{padding:22px 26px;font-family:var(--sq-font-display);font-weight:600;font-size:1.08rem;color:var(--sq-text);background:var(--sq-bg-elevated);}
.faq__a{padding:0 26px 22px;color:var(--sq-text-muted);max-width:75ch;}

/* risk / legal blocks */
.risk{background:var(--sq-bg-inset);border:1px solid var(--sq-line);border-left:3px solid var(--sq-neg);
  border-radius:var(--sq-radius);padding:22px 24px;font-size:.86rem;color:var(--sq-text-dim);line-height:1.6;}
.risk strong{color:var(--sq-text-muted);}

/* sticky mobile CTA */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;padding:12px 16px;
  background:rgba(11,18,32,.94);backdrop-filter:blur(12px);border-top:1px solid var(--sq-line);
  justify-content:space-between;align-items:center;gap:12px;}
.sticky-cta .price{font-size:1.3rem;}
.sticky-cta__meta{font-family:var(--sq-font-mono);font-size:.9rem;color:var(--sq-text);line-height:1.2;}
.sticky-cta__meta small{display:block;color:var(--sq-text-dim);font-size:.74rem;margin-top:2px;}
@media(max-width:768px){.sticky-cta{display:flex;}}

/* footer */
.sq-footer{background:var(--sq-bg-inset);border-top:1px solid var(--sq-line);padding:var(--sq-space-lg) 0 var(--sq-space-md);}
.sq-footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:32px;margin-bottom:32px;}
@media(max-width:760px){.sq-footer .cols{grid-template-columns:1fr;}}
.sq-footer a{color:var(--sq-text-muted);display:inline;padding:5px 0;font-size:.92rem;}
.sq-footer a:hover{color:var(--sq-accent);}
/* ≥44px touch targets for the footer NAV-LIST links (direct children only) — keeps prose links like
   "Affiliate program · Support" and the inline "full risk disclosure" link inline so the · and . don't strand */
.sq-footer .cols > div > a:not(.sq-brand){min-height:44px;display:flex;align-items:center;padding:4px 0;}
.sq-footer .legal{border-top:1px solid var(--sq-line);padding-top:20px;font-size:.8rem;color:var(--sq-text-dim);line-height:1.7;}

/* ---------- entrance motion (one orchestrated load) ---------- */
.reveal{opacity:0;transform:translateY(18px);animation:sqUp .7s var(--sq-ease) forwards;}
.reveal.d1{animation-delay:.08s;} .reveal.d2{animation-delay:.18s;} .reveal.d3{animation-delay:.30s;}
.reveal.d4{animation-delay:.44s;} .reveal.d5{animation-delay:.58s;}
@keyframes sqUp{to{opacity:1;transform:none;}}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important;}
  .reveal{opacity:1;transform:none;}
}
:focus-visible{outline:2px solid var(--sq-accent);outline-offset:3px;border-radius:4px;}

/* ============================================================================
   PIN BAR REVERSAL POINTS — page-scoped "Rejection Terminal" layer (pbr-*)
   Atmosphere (layered mesh + grain + glow), the terminal-panel chart frame,
   the BUY/SELL explainer, distinctive type, and staggered/scroll/hover motion.
   Scoped to .pbr-page so it never touches the shared site components.
   ============================================================================ */
.pbr-page{--pbr-glow:rgba(41,211,194,.28);--pbr-glow-soft:rgba(41,211,194,.10);}

/* --- atmospheric section (layered mesh + grain) — replaces flat dark bands --- */
.pbr-atmos{position:relative;isolation:isolate;
  background:
    radial-gradient(58% 48% at 84% -10%,rgba(41,211,194,.11),transparent 60%),
    radial-gradient(46% 58% at -4% 104%,rgba(79,125,240,.085),transparent 60%),
    linear-gradient(180deg,var(--sq-bg-base),var(--sq-bg-inset));}
.pbr-atmos::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.04;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
.pbr-flat{background:var(--sq-bg-inset);}
.pbr-elevated{background:var(--sq-bg-elevated);}
.pbr-card{background:var(--sq-bg-card);}

/* --- THE TERMINAL PANEL (load-bearing chart frame; navy matte so #000 never touches the page) --- */
.pbr-panel{position:relative;border-radius:var(--sq-radius-lg);background:var(--sq-bg-inset);padding:14px;
  border:1px solid rgba(41,211,194,.22);
  box-shadow:0 24px 60px rgba(4,9,18,.6),0 0 0 1px rgba(255,255,255,.02) inset,0 0 70px var(--pbr-glow-soft);
  transition:border-color var(--sq-transition),box-shadow var(--sq-transition),transform var(--sq-transition);}
.pbr-panel > img{display:block;width:100%;height:auto;border-radius:10px;}
.pbr-panel figcaption{margin:12px 4px 2px;}
.pbr-panel::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;
  background:linear-gradient(180deg,rgba(95,240,224,.06),transparent 22%);}
.pbr-panel:hover{transform:translateY(-3px);border-color:rgba(41,211,194,.42);
  box-shadow:0 30px 74px rgba(4,9,18,.72),0 0 0 1px rgba(255,255,255,.03) inset,0 0 96px rgba(41,211,194,.18);}
/* corner registration ticks (instrument feel) */
.pbr-panel::after{content:"";position:absolute;inset:9px;border-radius:12px;pointer-events:none;z-index:2;
  background:
    linear-gradient(var(--sq-accent),var(--sq-accent)) left 0 top 0/16px 2px no-repeat,
    linear-gradient(var(--sq-accent),var(--sq-accent)) left 0 top 0/2px 16px no-repeat,
    linear-gradient(var(--sq-accent),var(--sq-accent)) right 0 bottom 0/16px 2px no-repeat,
    linear-gradient(var(--sq-accent),var(--sq-accent)) right 0 bottom 0/2px 16px no-repeat;
  opacity:.34;}
/* the HUD chip — mono pill, top-left on the matte */
.pbr-chip{position:absolute;top:24px;left:26px;z-index:3;display:inline-flex;align-items:center;gap:8px;
  font-family:var(--sq-font-mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;font-weight:500;
  color:var(--sq-accent);background:rgba(11,18,32,.8);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border:1px solid rgba(41,211,194,.35);border-radius:var(--sq-radius-pill);padding:6px 13px;}
.pbr-chip .dot{width:7px;height:7px;border-radius:50%;background:var(--sq-accent);box-shadow:0 0 8px var(--sq-accent);
  animation:pbr-blip 2.4s var(--sq-ease) infinite;}
@keyframes pbr-blip{0%,100%{opacity:.45;transform:scale(.85);}50%{opacity:1;transform:scale(1.15);}}
@media(max-width:560px){.pbr-chip{top:18px;left:18px;font-size:.62rem;padding:5px 10px;}.pbr-panel::after{inset:7px;}}
/* bare variant: the image bakes its own two-panel frames + chips + caption, so suppress
   the matte padding, the top gradient and the corner ticks — keep only the soft outer glow */
.pbr-panel--bare{padding:8px;background:var(--sq-bg-base);}
.pbr-panel--bare::before,.pbr-panel--bare::after{content:none;display:none;}
.pbr-panel--bare > img{border-radius:14px;}

/* --- DISTINCTIVE TYPE: oversized Sora display + mono "terminal readout" voice --- */
.pbr-page .pbr-h1{font-size:clamp(2.5rem,6vw,4.25rem);font-weight:800;letter-spacing:-.03em;line-height:1.04;
  text-wrap:balance;margin:0 0 1rem;}
.pbr-page .pbr-h2{font-size:clamp(1.9rem,3.6vw,2.9rem);font-weight:700;letter-spacing:-.02em;line-height:1.1;text-wrap:balance;}
.pbr-kicker{font-family:var(--sq-font-mono);text-transform:uppercase;letter-spacing:.24em;font-size:.74rem;font-weight:500;
  color:var(--sq-accent);margin:0 0 1.1rem;display:inline-flex;align-items:center;gap:10px;}
.pbr-kicker::before{content:"";width:26px;height:1px;background:linear-gradient(90deg,var(--sq-accent),transparent);}
.pbr-page .lede{font-size:1.18rem;line-height:1.7;max-width:64ch;}
/* signature headline move: one keyword with a cyan underglow + self-drawing underline */
.hl-glow{color:var(--sq-accent-bright);position:relative;white-space:nowrap;
  text-shadow:0 0 22px var(--sq-accent-glow),0 0 2px rgba(95,240,224,.5);}
/* underline sits INSIDE the letter body (M4/A13-A): bottom:.06em (was -.08em) keeps it
   above descenders + clears the next wrapped line on multi-line headlines (no overlap). */
.hl-glow::after{content:"";position:absolute;left:0;right:0;bottom:.06em;height:2px;
  background:linear-gradient(90deg,transparent,var(--sq-accent),transparent);
  filter:drop-shadow(0 0 6px var(--sq-accent));transform:scaleX(0);transform-origin:left;
  animation:hl-underline 900ms var(--sq-ease) 700ms forwards;}
@keyframes hl-underline{to{transform:scaleX(1);}}

/* --- THE HERO: text-free atmospheric "Rejection Terminal" backdrop (no baked-in text) --- */
.pbr-hero{position:relative;overflow:hidden;border-bottom:1px solid var(--sq-line);
  padding:clamp(72px,12vw,138px) 0 clamp(56px,8vw,96px);background:var(--sq-bg-base);}
.pbr-hero__sky{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(70% 60% at 78% 8%,rgba(41,211,194,.18),transparent 58%),
    radial-gradient(60% 70% at 6% 96%,rgba(79,125,240,.12),transparent 60%),
    linear-gradient(180deg,#0A111E,var(--sq-bg-base) 60%,var(--sq-bg-inset));}
/* far-back candlestick silhouette (inline SVG, cyan-mono, behind glass) */
.pbr-hero__chart{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  filter:blur(2px) saturate(.6);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 30%,#000 75%,transparent),linear-gradient(180deg,transparent,#000 18%,#000 70%,transparent);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 30%,#000 75%,transparent),linear-gradient(180deg,transparent,#000 18%,#000 70%,transparent);mask-composite:intersect;}
.pbr-hero__chart svg{position:absolute;right:0;bottom:0;width:min(72%,920px);height:auto;}
/* faint scanline grid + a slow drifting sweep line = "live screen" */
.pbr-hero__grid{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background:linear-gradient(var(--sq-line) 1px,transparent 1px) 0 0/100% 86px,
            linear-gradient(90deg,var(--sq-line) 1px,transparent 1px) 0 0/86px 100%;
  -webkit-mask-image:radial-gradient(120% 100% at 50% 30%,#000,transparent 78%);
  mask-image:radial-gradient(120% 100% at 50% 30%,#000,transparent 78%);}
.pbr-hero__sweep{position:absolute;top:0;bottom:0;width:160px;z-index:0;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(95,240,224,.14),transparent);
  filter:blur(2px);animation:pbr-sweep 9s linear infinite;}
@keyframes pbr-sweep{0%{left:-180px;opacity:0;}12%{opacity:1;}88%{opacity:1;}100%{left:100%;opacity:0;}}
.pbr-hero__grain{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.045;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
.pbr-hero__scrim{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 60%,rgba(11,18,32,.55) 92%,var(--sq-bg-base));}
.pbr-hero__in{position:relative;z-index:2;max-width:900px;}
.pbr-hero__panel{position:relative;z-index:2;margin-top:clamp(38px,6vw,64px);}

/* hero usp chips (terminal pills) */
.pbr-usps{list-style:none;padding:0;margin:1.5rem 0 1.8rem;display:flex;flex-wrap:wrap;gap:10px;}
.pbr-usps li{display:inline-flex;align-items:center;gap:9px;font-family:var(--sq-font-mono);font-size:.78rem;
  letter-spacing:.04em;color:var(--sq-text);background:rgba(22,34,58,.55);border:1px solid var(--sq-line);
  border-radius:var(--sq-radius-pill);padding:8px 15px;backdrop-filter:blur(4px);
  transition:border-color var(--sq-transition),transform var(--sq-transition),background var(--sq-transition);}
.pbr-usps li:hover{border-color:var(--sq-accent-deep);transform:translateY(-2px);background:rgba(22,34,58,.8);}
.pbr-usps li::before{content:"";width:7px;height:7px;flex:0 0 7px;border-radius:50%;
  background:var(--sq-accent);box-shadow:0 0 10px var(--sq-accent);}

/* warm CTA: lift + glow intensify + slow shimmer sweep (the one warm element) */
.btn-cta.pbr-cta{position:relative;overflow:hidden;}
.btn-cta.pbr-cta::after{content:"";position:absolute;top:0;bottom:0;width:50%;left:-60%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.32),transparent);transform:skewX(-18deg);
  animation:pbr-shimmer 4.2s var(--sq-ease) infinite;}
@keyframes pbr-shimmer{0%{left:-60%;}28%,100%{left:160%;}}
.btn-cta.pbr-cta:hover{box-shadow:0 12px 36px rgba(255,178,62,.45);}

/* --- THE BUY/SELL EXPLAINER centerpiece --- */
.pbr-explainer{max-width:1080px;margin:0 auto;}
.pbr-explainer .pbr-panel{padding:14px;}
.pbr-rule{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 0;margin:30px auto 0;max-width:900px;
  font-family:var(--sq-font-mono);font-size:.82rem;letter-spacing:.05em;text-transform:uppercase;
  background:var(--sq-bg-inset);border:1px solid var(--sq-line);border-radius:var(--sq-radius-pill);padding:16px 22px;}
.pbr-rule span{display:inline-flex;align-items:center;gap:9px;padding:0 18px;color:var(--sq-text-muted);}
.pbr-rule span + span{border-left:1px solid var(--sq-line);}
.pbr-rule b{color:var(--sq-text);font-weight:500;}
.pbr-rule .d-buy{width:11px;height:11px;border-radius:50%;background:var(--sq-blue);box-shadow:0 0 11px var(--sq-blue);flex:0 0 11px;}
.pbr-rule .d-sell{width:11px;height:11px;border-radius:50%;background:var(--sq-neg);box-shadow:0 0 11px var(--sq-neg);flex:0 0 11px;}
.pbr-rule .d-bright{width:11px;height:11px;border-radius:50%;background:var(--sq-accent-bright);box-shadow:0 0 12px var(--sq-accent-bright);flex:0 0 11px;}
.pbr-rule .d-entry{width:18px;height:0;border-top:2px dashed var(--sq-accent-bright);box-shadow:0 0 10px var(--sq-accent-glow);flex:0 0 18px;align-self:center;}
@media(max-width:680px){.pbr-rule{flex-direction:column;align-items:flex-start;border-radius:var(--sq-radius-lg);gap:12px;}
  .pbr-rule span{padding:0;}.pbr-rule span + span{border-left:0;}}

/* read-keys under the explainer (BUY / SELL plain-English chips) */
.pbr-keys{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:26px 0 0;}
@media(max-width:680px){.pbr-keys{grid-template-columns:1fr;}}
.pbr-key{display:flex;gap:14px;align-items:flex-start;padding:18px 20px;border-radius:var(--sq-radius);
  background:var(--sq-bg-card);border:1px solid var(--sq-line);}
.pbr-key__d{width:16px;height:16px;border-radius:50%;flex:0 0 16px;margin-top:3px;}
.pbr-key--buy{border-left:3px solid var(--sq-blue);}
.pbr-key--buy .pbr-key__d{background:var(--sq-blue);box-shadow:0 0 14px var(--sq-blue);}
.pbr-key--sell{border-left:3px solid var(--sq-neg);}
.pbr-key--sell .pbr-key__d{background:var(--sq-neg);box-shadow:0 0 14px var(--sq-neg);}
.pbr-key h4{font-family:var(--sq-font-mono);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;margin:0 0 6px;}
.pbr-key--buy h4{color:var(--sq-accent-bright);}.pbr-key--sell h4{color:var(--sq-neg);}
.pbr-key p{margin:0;font-size:.94rem;color:var(--sq-text-muted);line-height:1.55;}

/* --- three-grade cards as lit terminal chips (glowing dots) --- */
.pbr-grade .sq-classcard__sw{box-shadow:0 0 16px currentColor,0 0 0 4px rgba(255,255,255,.05);}
.pbr-dot{width:13px;height:13px;border-radius:50%;display:inline-block;flex:0 0 13px;box-shadow:0 0 12px currentColor;}

/* legend swatches → lit dots */
.pbr-page .sq-legend__i i{box-shadow:0 0 12px var(--lit,transparent),0 0 0 1px rgba(255,255,255,.12);}

/* proof seal badge (designed, not a paragraph) */
.pbr-seal{display:inline-flex;align-items:center;gap:11px;font-family:var(--sq-font-mono);font-size:.78rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--sq-accent);background:rgba(41,211,194,.08);
  border:1px solid rgba(41,211,194,.3);border-radius:var(--sq-radius-pill);padding:9px 16px;margin-bottom:20px;}
.pbr-seal svg{width:16px;height:16px;}

/* spec strip (decision-load reducer) */
.pbr-specstrip{display:flex;flex-wrap:wrap;gap:12px;margin:22px 0 0;}
.pbr-specstrip span{font-family:var(--sq-font-mono);font-size:.78rem;letter-spacing:.04em;color:var(--sq-text-muted);
  background:var(--sq-bg-inset);border:1px solid var(--sq-line);border-radius:var(--sq-radius-pill);padding:8px 15px;}
.pbr-specstrip b{color:var(--sq-accent-bright);font-weight:500;}

/* pull-quote for the "problem" section */
.pbr-pull{font-family:var(--sq-font-mono);font-size:clamp(1.05rem,2.2vw,1.4rem);line-height:1.5;color:var(--sq-text);
  border-left:2px solid var(--sq-accent);padding:6px 0 6px 22px;margin:26px 0 0;max-width:60ch;letter-spacing:-.01em;}

/* price set as a mono readout */
.pbr-priceline{font-family:var(--sq-font-mono);}

/* --- MOTION: scroll-in for below-the-fold.
   Robust, non-blocking: content is VISIBLE by default. Only when JS marks the page
   (<html class="js">) AND the element hasn't entered yet do we hide+animate it in via
   an IntersectionObserver toggling .is-in. No-JS, reduced-motion, and print all show
   content immediately — content is never gated on JS or scroll. --- */
.pbr-page .pbr-inview{transition:opacity .7s var(--sq-ease),transform .7s var(--sq-ease);}
html.js .pbr-page .pbr-inview{opacity:0;transform:translateY(24px);}
html.js .pbr-page .pbr-inview.is-in{opacity:1;transform:none;}
@keyframes pbr-rise{to{opacity:1;transform:none;}}
@media(prefers-reduced-motion:reduce){
  html.js .pbr-page .pbr-inview{opacity:1!important;transform:none!important;}
  .hl-glow::after{animation:none;transform:scaleX(1);}
  .pbr-hero__sweep,.pbr-chip .dot,.btn-cta.pbr-cta::after{animation:none!important;}
}
@media print{html.js .pbr-page .pbr-inview{opacity:1!important;transform:none!important;}}

/* ============================================================================
   SITE-WIDE POLISH LAYER (2026-06-27 design pass) — "The Instrument Bench"
   Promotes the proven pin-bar atmosphere + motion to reusable, page-agnostic
   utilities so the home + every secondary page reach the same premium bar.
   SQ tokens ONLY. No footprint tokens. Behind prefers-reduced-motion.
   ============================================================================ */

/* --- site-wide scroll-reveal (twin of pbr-inview, NOT page-scoped) ---------
   Content is VISIBLE by default. Hidden+animated ONLY when <html class="js">
   AND not yet entered. No-JS / reduced-motion / print always show immediately. */
.sq-inview{transition:opacity .7s var(--sq-ease),transform .7s var(--sq-ease);}
html.js .sq-inview{opacity:0;transform:translateY(24px);}
html.js .sq-inview.is-in{opacity:1;transform:none;}
.sq-inview.d1{transition-delay:.04s;}.sq-inview.d2{transition-delay:.12s;}
.sq-inview.d3{transition-delay:.20s;}.sq-inview.d4{transition-delay:.28s;}
@media(prefers-reduced-motion:reduce){html.js .sq-inview{opacity:1!important;transform:none!important;transition:none!important;}}
@media print{html.js .sq-inview{opacity:1!important;transform:none!important;}}

/* --- site-wide atmosphere band (layered mesh + fine grain) ----------------- */
.sq-atmos{position:relative;isolation:isolate;
  background:
    radial-gradient(58% 48% at 84% -10%,rgba(41,211,194,.11),transparent 60%),
    radial-gradient(46% 58% at -4% 104%,rgba(79,125,240,.085),transparent 60%),
    linear-gradient(180deg,var(--sq-bg-base),var(--sq-bg-inset));}
.sq-atmos--soft{background:
    radial-gradient(54% 44% at 88% -12%,rgba(41,211,194,.07),transparent 62%),
    linear-gradient(180deg,var(--sq-bg-base),var(--sq-bg-inset));}
.sq-atmos::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.04;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
.sq-flat{background:var(--sq-bg-inset);}

/* --- compact atmospheric header band (secondary/legal page heroes) --------- */
.sq-pagehead{position:relative;overflow:hidden;border-bottom:1px solid var(--sq-line);
  padding:clamp(56px,9vw,104px) 0 clamp(40px,6vw,64px);}
.sq-pagehead .sq-hero__grid{opacity:.4;}
.sq-pagehead__in{position:relative;z-index:2;max-width:820px;}

/* --- kicker with a short accent rule (mono "readout" eyebrow, site-wide) ---- */
.sq-kicker{font-family:var(--sq-font-mono);text-transform:uppercase;letter-spacing:.24em;font-size:.74rem;
  font-weight:500;color:var(--sq-accent);margin:0 0 1.1rem;display:inline-flex;align-items:center;gap:10px;}
.sq-kicker::before{content:"";width:26px;height:1px;background:linear-gradient(90deg,var(--sq-accent),transparent);}
.sq-kicker--center{justify-content:center;}

/* --- HOME hero: CALM DEEP FIELD. The abstract layered "strata" art (brand motif) is
   CONTAINED to the far-right portion and HARD-MASKED off the text column so it can NEVER
   bleed into the H1/lede the way the old full-width staircase did (burn-scar 2026-06-27).
   A strong left-column scrim seats the headline/lede on near-solid deep navy → razor-crisp
   type, studio-caliber calm. Mobile hides the art entirely. ------------------- */
.sq-hero__sky{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(58% 50% at 86% 4%,rgba(41,211,194,.15),transparent 60%),
    radial-gradient(50% 60% at 0% 100%,rgba(79,125,240,.10),transparent 62%),
    linear-gradient(180deg,#0A111E,var(--sq-bg-base) 58%,var(--sq-bg-inset));}
/* art layer lives only in the right ~46% of the hero, faded out before 34% of its own box */
.sq-hero__strata{position:absolute;top:0;bottom:0;right:0;left:54%;z-index:0;pointer-events:none;
  opacity:.7;filter:saturate(1.04);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 34%);
  mask-image:linear-gradient(90deg,transparent 0,#000 34%);}
.sq-hero__strata svg{position:absolute;right:0;top:50%;transform:translateY(-50%);width:100%;height:auto;}
/* gridlines confined to the far-right corner, very faint — never under the text */
.sq-hero__grid{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.20;
  background:linear-gradient(var(--sq-line) 1px,transparent 1px) 0 0/100% 90px,
            linear-gradient(90deg,var(--sq-line) 1px,transparent 1px) 0 0/90px 100%;
  -webkit-mask-image:radial-gradient(78% 80% at 92% 24%,#000,transparent 62%);
  mask-image:radial-gradient(78% 80% at 92% 24%,#000,transparent 62%);}
/* drifting glow lives entirely in the right (art) half — never crosses the h1/lede */
.sq-hero__sweep{position:absolute;left:58%;right:0;top:0;bottom:0;width:150px;z-index:0;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(95,240,224,.10),transparent);filter:blur(2px);
  animation:pbr-sweep 9.5s linear infinite;}
.sq-hero__grain{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.04;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}
/* strong left-column scrim: headline + lede sit on near-solid deep navy (no bleed-through) */
.sq-hero--atmos .sq-hero__scrim{
  background:
    linear-gradient(90deg,var(--sq-bg-base) 0%,rgba(11,18,32,.94) 36%,rgba(11,18,32,.58) 54%,transparent 68%),
    radial-gradient(66% 60% at 84% 10%,rgba(41,211,194,.06),transparent 62%),
    linear-gradient(180deg,transparent 56%,rgba(11,18,32,.55) 90%,var(--sq-bg-base));}
.sq-hero--atmos{padding:clamp(72px,11vw,136px) 0 clamp(56px,8vw,92px);}
@media(max-width:760px){
  .sq-hero__strata,.sq-hero__sweep{display:none;}
  .sq-hero__grid{opacity:.10;}
  .sq-hero--atmos .sq-hero__scrim{
    background:linear-gradient(180deg,transparent 58%,rgba(11,18,32,.5),var(--sq-bg-base));}
}
@media(prefers-reduced-motion:reduce){.sq-hero__sweep{animation:none!important;}}

/* --- framed/lit figure (glowing panel) — no image floats flat -------------- */
.figure--lit{border-color:rgba(41,211,194,.22);
  box-shadow:0 18px 50px rgba(4,9,18,.55),0 0 46px var(--sq-accent-glow);}
.figure--lit figcaption{background:var(--sq-bg-inset);}

/* --- CTA "alive" shimmer (site-wide twin of .pbr-cta; the one warm element) - */
.btn-cta.sq-alive{position:relative;overflow:hidden;}
.btn-cta.sq-alive::after{content:"";position:absolute;top:0;bottom:0;width:50%;left:-60%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.30),transparent);transform:skewX(-18deg);
  animation:pbr-shimmer 4.4s var(--sq-ease) infinite;}
.btn-cta.sq-alive:hover{box-shadow:0 12px 36px rgba(255,178,62,.45);}
@media(prefers-reduced-motion:reduce){.btn-cta.sq-alive::after{animation:none!important;}}

/* --- catalog thumbnail: lit glass on hover (premium lift) ------------------- */
.card--thumb{transition:transform var(--sq-transition),border-color var(--sq-transition),box-shadow var(--sq-transition);}
.card--thumb:hover{transform:translateY(-5px);border-color:rgba(41,211,194,.4);
  box-shadow:0 24px 60px rgba(4,9,18,.6),0 0 56px var(--sq-accent-glow);}
.card--thumb .card__thumb{transition:transform .5s var(--sq-ease);}
.card--thumb:hover .card__thumb{transform:scale(1.035);}

/* --- elevated section dividers: a hairline cyan seam between bands ---------- */
.sq-seam{position:relative;}
.sq-seam::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(41,211,194,.34),transparent);}

/* --- narrow-phone CTA safety: compact padding + let long tokens (e.g. an email
   address inside a button) break, so a wide CTA can never force horizontal scroll --- */
@media(max-width:400px){
  .btn{padding-left:20px;padding-right:20px;max-width:100%;overflow-wrap:anywhere;}
}

/* --- a11y: inline links inside prose carry a non-color cue (underline) so they are
   not distinguished by colour alone (WCAG 1.4.1 / Lighthouse link-in-text-block).
   Scoped to prose containers so nav pills, footer columns, cards and buttons stay
   underline-free (those are not links-in-text). --- */
p a, li a, figcaption a, .lede a, .risk a, .legal a, .faq__a a, .pbr-faq__inner a,
.optin__consent a, .sq-support-cue a, .sq-aside__note a, .sq-incitem a, .sq-value a, .sq-illus a{
  text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px;
  text-decoration-color:rgba(95,240,224,.55);}
p a:hover, li a:hover, figcaption a:hover, .lede a:hover, .risk a:hover, .legal a:hover,
.faq__a a:hover, .pbr-faq__inner a:hover, .optin__consent a:hover, .sq-support-cue a:hover,
.sq-aside__note a:hover, .sq-incitem a:hover, .sq-value a:hover, .sq-illus a:hover{
  text-decoration-color:currentColor;}

/* ============================================================================
   §8 VISUAL-CRAFT FLOOR + SECTION SURFACE ALTERNATION (2026-06-27, WS-E)
   Page-agnostic utilities the rebuilt home/pin-bar/range-shift agents compose
   the converting arc from — stats band, 3-step strip, reserved-trust block,
   credibility-chip row, platform-badge row, value-stack item, agitation list.
   SQ tokens ONLY (no footprint tokens, no price tokens, no claim copy here);
   all AA-contrast (verified A13-D), reduced-motion safe (no new always-on
   animation), visible focus via the global :focus-visible. Additive — nothing
   above is modified. Locks: these are layout primitives; copy that fills them
   must still hold single-price / no-hero-price / CFTC / Long-Term-Access.
   ============================================================================ */

/* --- SECTION SURFACE ALTERNATION ------------------------------------------
   Stop the flat "blue/white/blue nothing": adjacent <section>s should toggle
   the two dark surfaces so the eye reads distinct bands. Apply --base / --inset
   in alternation (or let .sq-alt auto-zebra a run of sibling sections). The
   even bands carry the hairline cyan seam at the top edge for a crisp join. */
.sq-surf-base{background:var(--sq-bg-base);}
.sq-surf-inset{background:var(--sq-bg-inset);}
.sq-surf-elevated{background:var(--sq-bg-elevated);}
/* auto-zebra: wrap a column of sibling <section>s in .sq-alt and they alternate
   base / inset with a seam between each — no per-section class needed. */
.sq-alt > section:nth-of-type(odd){background:var(--sq-bg-base);}
.sq-alt > section:nth-of-type(even){background:var(--sq-bg-inset);position:relative;}
.sq-alt > section:nth-of-type(even)::before{content:"";position:absolute;
  left:0;right:0;top:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(41,211,194,.30),transparent);}

/* --- STATS BAND (honest counts; FA-structural lesson, SQ tokens) ----------
   e.g. "2 Indicators | Any Market & Timeframe | MT5 Native | Long-Term Access".
   No price. Reflows; hairline dividers via the grid gap. Number accent, label dim. */
.sq-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:1px;background:var(--sq-line);border:1px solid var(--sq-line);
  border-radius:var(--sq-radius-lg);overflow:hidden;box-shadow:var(--sq-shadow-card);}
.sq-stat{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;
  padding:26px 18px;background:var(--sq-bg-card);}
.sq-stat__n{font-family:var(--sq-font-display);font-weight:800;font-size:clamp(1.6rem,3vw,2.2rem);
  color:var(--sq-accent-bright);line-height:1;letter-spacing:-.02em;}
.sq-stat__l{font-family:var(--sq-font-mono);font-size:.78rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--sq-text-dim);line-height:1.4;}

/* --- 3-STEP STRIP ("running it takes about a minute" effort-collapse beat) -
   honest onboarding: buy -> drop the .ex5 in MQL5/Indicators -> refresh.
   Numbered nodes via a counter; collapses to a stack on mobile. */
.sq-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;counter-reset:sqstep;}
@media(max-width:760px){.sq-steps{grid-template-columns:1fr;}}
.sq-step{position:relative;background:var(--sq-bg-card);border:1px solid var(--sq-line);
  border-radius:var(--sq-radius-lg);padding:28px 24px 26px;box-shadow:var(--sq-shadow-card);
  transition:transform var(--sq-transition),border-color var(--sq-transition);}
.sq-step:hover{transform:translateY(-3px);border-color:var(--sq-accent-deep);}
.sq-step__n{counter-increment:sqstep;width:40px;height:40px;border-radius:50%;flex:0 0 40px;
  display:grid;place-items:center;margin-bottom:16px;font-family:var(--sq-font-display);
  font-weight:800;font-size:1.1rem;color:var(--sq-cta-ink);background:var(--sq-accent);
  box-shadow:0 0 18px var(--sq-accent-glow);}
.sq-step__n::before{content:counter(sqstep);}
.sq-step h3,.sq-step h4{font-family:var(--sq-font-display);font-size:1.08rem;color:var(--sq-text);margin:0 0 8px;}
.sq-step p{font-size:.95rem;color:var(--sq-text-muted);margin:0;line-height:1.55;}
.sq-step code{font-family:var(--sq-font-mono);font-size:.86rem;color:var(--sq-accent-bright);
  background:var(--sq-bg-inset);border:1px solid var(--sq-line);border-radius:var(--sq-radius-sm);padding:1px 6px;}

/* --- RESERVED-TRUST BLOCK (honest placeholder — NO fake quote, NO Review schema)
   Holds the human-trust slot the converting cohort drowns in, without faking it.
   The page fills it with an honest line (e.g. "Early access — verified buyer
   reactions land here as they arrive."), never an invented testimonial. */
.sq-trustblock{background:var(--sq-bg-inset);border:1px dashed var(--sq-line);
  border-radius:var(--sq-radius-lg);padding:32px 30px;text-align:center;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.01);}
.sq-trustblock__k{font-family:var(--sq-font-mono);text-transform:uppercase;letter-spacing:.18em;
  font-size:.72rem;color:var(--sq-text-dim);margin:0 0 12px;}
.sq-trustblock p{font-size:1.02rem;color:var(--sq-text-muted);margin:0 auto;max-width:56ch;line-height:1.65;}

/* --- CREDIBILITY-CHIP ROW (rigor facts as small mono chips, near a CTA) ----
   e.g. Engineered · Bar-for-bar proven · Validated across symbols/TF ·
   No-repaint on confirmed bars · Plain-English docs. Facts, not claims. */
.sq-credrow{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:22px 0 0;padding:0;list-style:none;}
.sq-credrow--left{justify-content:flex-start;}
.sq-credrow li,.sq-cred{display:inline-flex;align-items:center;gap:9px;font-family:var(--sq-font-mono);
  font-size:.78rem;letter-spacing:.02em;color:var(--sq-text-muted);
  background:var(--sq-bg-card);border:1px solid var(--sq-line);border-radius:var(--sq-radius-pill);padding:8px 15px;}
.sq-credrow li::before,.sq-cred::before{content:"";width:7px;height:7px;flex:0 0 7px;border-radius:50%;
  background:var(--sq-accent);box-shadow:0 0 9px var(--sq-accent);}

/* --- PLATFORM-BADGE ROW (real environment facts: MetaTrader 5 · Windows · X64) -
   honest technical badges; the SVG/logo slot is the page agent's; chip styling here. */
.sq-platrow{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:18px 0 0;padding:0;list-style:none;}
.sq-platrow--center{justify-content:center;}
.sq-platbadge{display:inline-flex;align-items:center;gap:10px;font-family:var(--sq-font-mono);
  font-size:.82rem;font-weight:500;color:var(--sq-text);background:var(--sq-bg-elevated);
  border:1px solid var(--sq-line);border-radius:var(--sq-radius);padding:10px 16px;}
.sq-platbadge svg{width:20px;height:20px;flex:0 0 20px;color:var(--sq-accent);}
.sq-platbadge b{color:var(--sq-accent-bright);font-weight:600;}

/* --- VALUE-STACK ITEM (each include with a one-line "why it matters") ------
   Upgrades a flat checklist to a sold stack: title + supporting why-line. */
.sq-stack{display:flex;flex-direction:column;gap:0;border:1px solid var(--sq-line);
  border-radius:var(--sq-radius-lg);overflow:hidden;box-shadow:var(--sq-shadow-card);}
.sq-stack__item{display:flex;gap:16px;align-items:flex-start;padding:20px 24px;
  background:var(--sq-bg-card);border-bottom:1px solid var(--sq-line);}
.sq-stack__item:nth-child(even){background:var(--sq-bg-inset);}
.sq-stack__item:last-child{border-bottom:0;}
.sq-stack__ic{width:30px;height:30px;flex:0 0 30px;border-radius:8px;display:grid;place-items:center;
  margin-top:2px;background:var(--sq-accent-glow);color:var(--sq-accent);}
.sq-stack__ic svg{width:18px;height:18px;}
.sq-stack__t{display:block;font-family:var(--sq-font-display);font-weight:600;font-size:1.02rem;
  color:var(--sq-text);margin:0 0 4px;line-height:1.3;}
.sq-stack__why{display:block;font-size:.92rem;color:var(--sq-text-muted);line-height:1.55;margin:0;}

/* --- AGITATION LIST (problem beat felt, not flat — 3-4 honest cost-of-inaction
   items). No fear-mongering copy baked in; structure only. Each item leads with
   a warm-amber tick rule so it reads as a "this is the pain" enumeration. */
.sq-agitate{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px;}
.sq-agitate li{position:relative;padding:16px 18px 16px 48px;background:var(--sq-bg-inset);
  border:1px solid var(--sq-line);border-left:3px solid var(--sq-cta);border-radius:var(--sq-radius);
  color:var(--sq-text);font-size:1rem;line-height:1.6;}
.sq-agitate li::before{content:"";position:absolute;left:20px;top:22px;width:10px;height:10px;
  border-radius:50%;background:var(--sq-cta);box-shadow:0 0 10px rgba(255,178,62,.5);}
.sq-agitate li b{color:var(--sq-text);font-weight:600;}

/* reduced-motion: the §8 utilities use only transform/box-shadow hover transitions
   (no always-on animation); the global prefers-reduced-motion block already nulls
   transitions. This explicit guard documents that intent + covers the hover lifts. */
@media(prefers-reduced-motion:reduce){
  .sq-step:hover{transform:none;}
}

/* ============================================================================
   DESIGN ELEVATION — "THE LIVE INSTRUMENT BENCH (v2)" — 2026-07-04
   Mark: the home + AI Breakout pages "still look bad / generic" while pin-bar
   (the protected gold standard) reads premium. This layer closes that gap
   WITHOUT touching the frozen base rules above or any HARD-PRESERVE payload:
     1. turns the timid, near-invisible far-right home "strata" into a FRAMED
        luminous INSTRUMENT hero object that fills the dead right half —
        product-agnostic + honesty-locked (abstract light-strata, no chart/candles/P&L);
     2. gives both money heroes a real focal object on the right (two-column);
     3. lifts display type + panel framing toward the pin-bar bar.
   SQ tokens ONLY (no footprint tokens, no price/claim copy). All motion behind
   prefers-reduced-motion. Scoped to .sq-hero--v2 / new .sq-instr-* classes so
   range-shift / thank-you / legal heroes (out of scope) stay byte-untouched.
   ============================================================================ */

/* --- HOME hero → two columns: copy left, framed instrument right ------------- */
.sq-hero--v2{padding:clamp(60px,10vw,120px) 0 clamp(52px,7vw,84px);}
.sq-hero--v2 .sq-hero__in{max-width:var(--sq-maxw);display:grid;
  grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);gap:clamp(30px,4vw,60px);align-items:center;}
.sq-hero--v2 .sq-hero__copy{max-width:600px;min-width:0;}
.sq-hero--v2 .sq-hero__copy h1{font-size:clamp(2.15rem,4.3vw,3.5rem);font-weight:800;letter-spacing:-.03em;
  line-height:1.06;text-wrap:balance;margin:0 0 1rem;}
.sq-hero--v2 .sq-hero__fig{min-width:0;}
@media(max-width:920px){
  .sq-hero--v2 .sq-hero__in{grid-template-columns:1fr;gap:34px;}
  /* width:100% (not just margin:auto) — an auto-margin grid item shrink-wraps to content,
     which starved .sq-instr__screen's aspect-ratio of a definite width and collapsed the panel
     on mobile. Full width in the column restores the framed instrument. */
  .sq-hero--v2 .sq-hero__fig{width:100%;max-width:480px;margin:4px auto 0;justify-self:center;}
}
/* defensive: the screen never collapses even if a parent width is indefinite */
.sq-instr__screen{min-height:200px;}

/* --- THE INSTRUMENT PANEL (reusable framed "bench readout" focal object) ------
   A calibrated instrument under glass: cyan bezel, corner registration ticks, a
   HUD chip, a luminous strata screen, a live scan sweep, and a mono readout foot.
   The single distinctive, ownable hero object — says "instrument studio" at a glance. */
.sq-instr{position:relative;border-radius:var(--sq-radius-lg);padding:15px;
  background:linear-gradient(180deg,var(--sq-bg-elevated),var(--sq-bg-inset));
  border:1px solid rgba(41,211,194,.24);
  box-shadow:0 32px 74px rgba(4,9,18,.62),0 0 0 1px rgba(255,255,255,.02) inset,0 0 92px rgba(41,211,194,.10);
  transition:border-color var(--sq-transition),box-shadow var(--sq-transition),transform var(--sq-transition);}
.sq-instr:hover{transform:translateY(-3px);border-color:rgba(41,211,194,.42);
  box-shadow:0 38px 88px rgba(4,9,18,.7),0 0 120px rgba(41,211,194,.16);}
.sq-instr__screen{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:16/11;
  background:radial-gradient(130% 96% at 50% -6%,#0F1E33,#0A1220 72%);
  border:1px solid rgba(41,211,194,.16);box-shadow:inset 0 0 60px rgba(4,9,18,.6);}
.sq-instr__screen::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(95,240,224,.06),transparent 20%);}
/* faint instrument grid inside the screen */
.sq-instr__screen::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background:linear-gradient(rgba(41,211,194,.05) 1px,transparent 1px) 0 0/100% 34px,
            linear-gradient(90deg,rgba(41,211,194,.05) 1px,transparent 1px) 0 0/34px 100%;
  -webkit-mask-image:radial-gradient(120% 110% at 50% 40%,#000,transparent 82%);
  mask-image:radial-gradient(120% 110% at 50% 40%,#000,transparent 82%);}
.sq-instr__strata{position:absolute;inset:0;z-index:1;width:100%;height:100%;display:block;}
/* the live scan sweep — the one piece of ambient "it's running" motion */
.sq-instr__scan{position:absolute;top:0;bottom:0;width:120px;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(95,240,224,.16),transparent);filter:blur(1px);
  animation:sq-instr-scan 8.5s linear infinite;}
@keyframes sq-instr-scan{0%{left:-140px;opacity:0;}12%{opacity:1;}88%{opacity:1;}100%{left:100%;opacity:0;}}
/* HUD chip, top-left */
.sq-instr__chip{position:absolute;top:22px;left:24px;z-index:3;display:inline-flex;align-items:center;gap:8px;
  font-family:var(--sq-font-mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;font-weight:500;
  color:var(--sq-accent);background:rgba(11,18,32,.8);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border:1px solid rgba(41,211,194,.34);border-radius:var(--sq-radius-pill);padding:6px 13px;}
.sq-instr__chip .dot{width:7px;height:7px;border-radius:50%;background:var(--sq-accent);box-shadow:0 0 9px var(--sq-accent);
  animation:sq-blip 2.6s var(--sq-ease) infinite;}
@keyframes sq-blip{0%,100%{opacity:.5;transform:scale(.85);}50%{opacity:1;transform:scale(1.12);}}
/* corner registration ticks */
.sq-instr__tick{position:absolute;width:13px;height:13px;border-color:rgba(41,211,194,.55);border-style:solid;z-index:3;}
.sq-instr__tick.tl{top:6px;left:6px;border-width:1px 0 0 1px;}
.sq-instr__tick.tr{top:6px;right:6px;border-width:1px 1px 0 0;}
.sq-instr__tick.bl{bottom:6px;left:6px;border-width:0 0 1px 1px;}
.sq-instr__tick.br{bottom:6px;right:6px;border-width:0 1px 1px 0;}
/* mono readout foot inside the screen — honest attributes, never a claim/number */
.sq-instr__hud{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;flex-wrap:wrap;gap:8px 14px;
  align-items:center;padding:13px 18px;font-family:var(--sq-font-mono);font-size:.66rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--sq-text-muted);
  background:linear-gradient(180deg,transparent,rgba(10,17,30,.72) 42%,rgba(10,17,30,.92));
  border-top:1px solid rgba(41,211,194,.14);}
.sq-instr__hud span{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;}
.sq-instr__hud span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--sq-accent);
  box-shadow:0 0 7px var(--sq-accent);flex:0 0 6px;}
.sq-instr__hud b{color:var(--sq-accent-bright);font-weight:500;}
@media(max-width:520px){.sq-instr__hud{font-size:.6rem;gap:6px 10px;padding:11px 13px;}
  .sq-instr__chip{font-size:.6rem;top:16px;left:16px;}}

/* the amber "index" node — the ONE warm point on a cool instrument (scarcity of warm) */
.sq-instr__node{animation:sq-node 3.2s ease-in-out infinite;transform-box:fill-box;transform-origin:center;}
@keyframes sq-node{0%,100%{opacity:.75;}50%{opacity:1;}}

/* --- section-elevation: give the home mechanism/author figures the lit frame --- */
.sq-figframe{position:relative;border-radius:var(--sq-radius-lg);background:var(--sq-bg-inset);padding:13px;
  border:1px solid rgba(41,211,194,.2);
  box-shadow:0 22px 56px rgba(4,9,18,.55),0 0 60px var(--sq-accent-glow);
  transition:border-color var(--sq-transition),box-shadow var(--sq-transition),transform var(--sq-transition);}
.sq-figframe:hover{transform:translateY(-3px);border-color:rgba(41,211,194,.4);
  box-shadow:0 28px 68px rgba(4,9,18,.66),0 0 84px rgba(41,211,194,.16);}
.sq-figframe > img{display:block;width:100%;height:auto;border-radius:9px;}
.sq-figframe figcaption{margin:12px 4px 2px;font-size:.8rem;color:var(--sq-text-dim);
  font-family:var(--sq-font-mono);line-height:1.55;}

/* --- reduced-motion guard for the elevation layer --------------------------- */
@media(prefers-reduced-motion:reduce){
  .sq-instr__scan,.sq-instr__chip .dot,.sq-instr__node{animation:none!important;}
  .sq-instr:hover,.sq-figframe:hover{transform:none;}
}

/* ============================================================================
   REDESIGN PASS — 2026-07-04 (Mark: less "Courier"/mono, stop the hard-left, make
   it POP / kill the "dead teal", centered hero + subtle backdrop (Mark reference)).
   Cyan brand LOCKED (cyan-teal only; no sibling-brand tokens).
   Distilled from the brand-audit agent's top findings. Applies site-wide; pin-bar
   keeps its structure (Mark likes it) but inherits the surface/type improvements.
   ============================================================================ */

/* (2A) POP — widen the surface VALUE steps within the same cool hue so the section
   alternation actually reads (base→inset→card were ~3 luminance pts apart = flat/"dead"). */
:root{
  --sq-bg-inset:#0C1526; --sq-bg-elevated:#16243E; --sq-bg-card:#1C2C4B;
  --sq-line:#2A3B54;
}

/* (3) CUT THE "COURIER" VOICE — eyebrows/kickers/labels/chips move to the SANS voice;
   monospace kept ONLY for real readouts: .mono, code, param tables, numerals, HUD chips. */
.eyebrow,.sq-kicker,.home-paritytag,.sq-stat__l,.sq-credrow li,.sq-cred,.sq-platbadge,
.sq-trustrow li,.card__price,.card__view,.sq-cta-note,.sq-illus,.sq-legend__i,
.abp-kicker,.abp-sub,.abp-schema__lab,.abp-chips li,.abp-plat li,.abp-plat__label,
.abp-stack__label,.abp-univ-chip,.abp-seal,.abp-specstrip span,.abp-bridge,.abp-rule span,
.abp-quote__meta,.abp-meter,.abp-note,.pbr-usps li,.pbr-seal,.pbr-specstrip span{
  font-family:var(--sq-font-body)!important;}
.eyebrow,.sq-kicker,.abp-kicker,.abp-sub,.abp-schema__lab,.abp-plat__label,.abp-stack__label{
  font-weight:600;letter-spacing:.14em;}
.abp-chips li,.abp-plat li,.abp-univ-chip,.abp-seal,.pbr-usps li{font-weight:500;letter-spacing:.01em;text-transform:none;}
/* the pull-quote was mono on pin-bar (pure typewriter) — lift to the Sora display voice */
.pbr-pull{font-family:var(--sq-font-display)!important;font-weight:600;letter-spacing:-.01em;}
/* keep the price NUMBER mono inside a now-sans price line */
.card__price b{font-family:var(--sq-font-mono);}

/* (1) STOP THE HARD-LEFT — one shared centered, measure-capped section header. Only the
   HEADER centers (kicker+H2+lede); bodies/cards/panels stay full-bleed. Editorial, not
   center-everything. Apply via the .sq-secthead class on section intro wrappers. */
.sq-secthead{max-width:64ch;margin-left:auto;margin-right:auto;text-align:center;}
.sq-secthead .eyebrow,.sq-secthead .sq-kicker,.sq-secthead .abp-kicker,.sq-secthead .pbr-kicker{
  justify-content:center;display:flex;}
.sq-secthead .lede{margin-left:auto;margin-right:auto;}

/* (1+4) CENTERED HERO (FA-style): stack the copy centered over a subtle atmospheric
   backdrop, framed focal panel centered below. Overrides the earlier two-column v2. */
.sq-hero--v2 .sq-hero__in{max-width:960px;margin:0 auto;display:flex;flex-direction:column;
  align-items:center;text-align:center;gap:clamp(30px,4vw,48px);}
.sq-hero--v2 .sq-hero__copy{max-width:820px;}
.sq-hero--v2 .sq-hero__copy h1{font-size:clamp(2.5rem,5.2vw,4.1rem);}
.sq-hero--v2 .sq-hero__fig{width:100%;max-width:860px;}
.sq-hero--v2 .sq-usps,.sq-hero--v2 .sq-cta-row{justify-content:center;}
.sq-hero--v2 .home-paritytag{margin-left:auto;margin-right:auto;}
/* centered-text scrim: soft radial + bottom hand-off (replaces the left-column scrim) */
.sq-hero--v2.sq-hero--atmos .sq-hero__scrim{
  background:
    radial-gradient(64% 60% at 50% 8%,rgba(41,211,194,.10),transparent 62%),
    linear-gradient(180deg,rgba(11,18,32,.35),transparent 30%,transparent 62%,rgba(11,18,32,.62) 92%,var(--sq-bg-base));}
@media(max-width:920px){.sq-hero--v2 .sq-hero__fig{max-width:520px;}}

/* (4) subtle atmospheric hero PHOTO layer (the ChatGPT-generated abstract backdrop wires
   here). Sits behind everything, dark + masked so headline text stays crisp. */
.sq-hero__photo{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:center/cover no-repeat;opacity:.55;
  -webkit-mask-image:radial-gradient(120% 100% at 50% 30%,#000 40%,transparent 92%);
  mask-image:radial-gradient(120% 100% at 50% 30%,#000 40%,transparent 92%);}

/* (2B) POP the focal glow — one brighter cyan bloom per hero (subtle field, punchy focal). */
.sq-hero--atmos .sq-hero__sky{
  background:
    radial-gradient(56% 52% at 50% 2%,rgba(41,211,194,.22),transparent 60%),
    radial-gradient(40% 46% at 50% 40%,rgba(95,240,224,.14),transparent 60%),
    radial-gradient(50% 60% at 6% 100%,rgba(79,125,240,.16),transparent 62%),
    linear-gradient(180deg,#0A111E,var(--sq-bg-base) 58%,var(--sq-bg-inset));}

/* (2C) AMBER SCARCITY — strip warm from non-buy elements so the buy button is the one warm hit.
   The agitation list is a PAIN list → red reads correctly, not amber. */
.sq-agitate li{border-left-color:var(--sq-neg);}
.sq-agitate li::before{background:var(--sq-neg);box-shadow:0 0 10px rgba(242,109,109,.5);}

/* (2D) lift the section seam so the cyan structure reads (was too dim). */
.sq-seam::before,.sq-alt > section:nth-of-type(even)::before{
  background:linear-gradient(90deg,transparent,rgba(41,211,194,.42),transparent);}