/* Construction Control — Pay App Bridge homepage
   One stylesheet, no external assets, no webfonts. Content never depends on JS. */

:root{
  --ink:#16232e;
  --slate:#37485a;        /* secondary text on white */
  --paper:#ffffff;
  --mist:#f4f6f5;         /* alternating section background */
  --line:#d8deda;
  --brand:#14532d;        /* primary green */
  --brand-dark:#0e3d21;
  --amber-bg:#fef3c7;
  --amber:#92400e;
  --focus:#b45309;
  --radius:10px;
  --radius-sm:8px;
  --radius-btn:6px;
  --table-head:#eef2ef;
  --tap:44px;
  /* one type scale */
  --fs-display:42px;
  --fs-price-big:40px;
  --fs-h2:30px;
  --fs-price:27px;
  --fs-h3:19px;
  --fs-lede:19px;
  --fs-body:17px;
  --fs-secondary:15.5px;
  --fs-small:14.5px;
  --fs-micro:13.5px;
  --fs-caption:12.5px;
  /* one spacing rhythm */
  --space-section:60px;
  --space-section-sm:44px;
  --space-block:24px;
  --space-card:24px;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
  font-size:var(--fs-body);
}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.narrow{max-width:860px}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:10px 16px;z-index:20}
.skip:focus{left:8px;top:8px}
a{color:var(--brand)}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:2px}

.mono{font-family:var(--mono);font-size:.92em}
.micro{font-size:var(--fs-micro);color:var(--slate)}
.lede{font-size:var(--fs-lede);color:var(--slate);max-width:68ch}

/* ---------- header ---------- */
.site-header{background:var(--ink);color:#fff;position:relative}
.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;flex-wrap:wrap}
.brand{font-weight:700;font-size:19px;color:#fff;text-decoration:none}
.brand span{color:#8fd0a8}
.site-nav{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.site-nav a{color:#d7e5db;text-decoration:none;font-size:14px}
.site-nav a:hover{text-decoration:underline}
.nav-toggle{display:none;background:transparent;color:#fff;border:1px solid #d7e5db;border-radius:var(--radius-btn);padding:8px 14px;font-size:14.5px;cursor:pointer}
.cta{display:inline-block;background:var(--brand);color:#fff;padding:13px 24px;border-radius:var(--radius-btn);text-decoration:none;font-weight:600;font-size:16.5px}
.cta:hover{background:var(--brand-dark)}
.cta-small{padding:9px 14px;font-size:14px;color:#fff !important}

/* ---------- hero ---------- */
.hero{
  padding:54px 0 46px;
  background:
    repeating-linear-gradient(0deg,transparent,transparent 31px,rgba(22,35,46,.05) 32px),
    repeating-linear-gradient(90deg,transparent,transparent 31px,rgba(22,35,46,.05) 32px),
    var(--paper);
}
.eyebrow{font-size:13px;letter-spacing:.13em;text-transform:uppercase;color:var(--brand);font-weight:700;margin:0 0 12px}
h1{font-size:var(--fs-display);line-height:1.15;margin:0 0 18px;max-width:26ch}
.sub{font-size:var(--fs-lede);color:var(--slate);max-width:64ch;margin:0 0 26px}
.buyrow{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-bottom:12px}
.price{font-size:16px;margin:0}
.price strong{font-size:var(--fs-price)}
.price small{display:block;color:var(--slate);font-size:13px}
.ghost{font-weight:600}
.is-strip{border-top:1px solid var(--line);margin:30px 0 0;padding-top:16px;font-size:15px;color:var(--slate)}
.is-strip strong{color:var(--ink)}

/* ---------- sheet / report visual ---------- */
.sheet{border:1px solid var(--line);border-radius:var(--radius);background:#fff;box-shadow:0 12px 32px rgba(22,35,46,.12);overflow:hidden;margin:28px 0 0}
.sheet-tab{display:flex;justify-content:space-between;align-items:center;gap:12px;background:var(--mist);border-bottom:1px solid var(--line);padding:10px 18px}
.sheet-tab strong{font-size:14.5px}
.sheet-tab .mono{color:var(--slate);font-size:12.5px}
.sheet table{border-collapse:collapse;width:100%;font-size:14.5px}
.sheet th,.sheet td{border-bottom:1px solid var(--line);padding:10px 14px;text-align:left;vertical-align:top}
.sheet thead th{background:var(--table-head);font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--slate)}
.sheet figcaption{font-size:12.5px;color:var(--slate);padding:10px 18px;margin:0}

/* schedule-of-values mini grid */
.sov{border-collapse:collapse;width:100%;font-size:14px;margin-top:10px;background:#fff}
.sov th,.sov td{border:1px solid var(--line);padding:8px 10px;text-align:left}
.sov thead th{background:var(--table-head);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--slate)}

.chip{display:inline-block;background:var(--amber-bg);color:var(--amber);font-weight:600;font-size:12.5px;padding:2px 9px;border-radius:99px;white-space:nowrap}

/* ---------- sections ---------- */
.section{padding:var(--space-section) 0}
.section.alt{background:var(--mist)}
h2{font-size:var(--fs-h2);line-height:1.25;margin:0 0 18px}
h3{font-size:var(--fs-h3);margin:0 0 8px}
.section p{max-width:70ch}

.compare{border-collapse:collapse;width:100%;margin-top:26px;font-size:15.5px;background:#fff}
.compare th,.compare td{border:1px solid var(--line);padding:11px 14px;text-align:left;vertical-align:top}
.compare thead th{background:var(--table-head)}
.compare tbody th{width:22%;background:var(--mist);font-weight:600}

/* wide tables scroll horizontally inside their wrapper instead of clipping at narrow widths */
.table-scroll{overflow-x:auto}

.demo-grid{display:grid;grid-template-columns:1.25fr .85fr;gap:34px;align-items:start;margin-top:8px}
.demo-grid .sheet{margin-top:0}
.demo-notes h3{margin-top:22px}
.demo-notes h3:first-child{margin-top:0}
.demo-notes ul{padding-left:20px;margin:8px 0}
.demo-notes li{margin-bottom:8px}

.steps{list-style:none;margin:26px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.steps li{border:1px solid var(--line);border-radius:var(--radius);padding:var(--space-card);background:#fff}
.steps h3{display:flex;align-items:center;gap:10px}
.step-n{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--brand);color:#fff;font-size:15px;flex:none}
.steps p{margin:0;color:var(--slate);font-size:15.5px}

.checks{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:24px 0 0}
.checks div{border:1px solid var(--line);border-radius:var(--radius-sm);padding:16px 18px;background:#fff}
.checks dt{font-weight:700;margin-bottom:4px}
.checks dt .mono{color:var(--brand);margin-right:8px}
.checks dd{margin:0;color:var(--slate);font-size:15.5px}

.two-col{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:8px}
.card{border:1px solid var(--line);border-radius:var(--radius);padding:var(--space-card);background:#fff}
.card ul{padding-left:20px;margin:8px 0 0}
.card li{margin-bottom:10px}

.files{list-style:none;padding:0;margin:0 0 18px}
.files li{border-left:4px solid var(--brand);padding:10px 16px;margin-bottom:12px;background:#fff}
.section.alt .files li{background:var(--paper)}

.price-card{border:2px solid var(--ink);border-radius:var(--radius);padding:var(--space-card);background:#fff}
.big-price{font-size:var(--fs-price-big);font-weight:700;margin:0 0 12px}
.big-price span{font-size:17px;font-weight:600;color:var(--slate)}
.price-card ul{padding-left:20px;margin:0 0 22px}
.price-card li{margin-bottom:7px}

.limits{border:1px solid var(--amber);background:#fffdf3;border-radius:var(--radius);padding:var(--space-card)}
.limits ul{padding-left:20px;margin:0}
.limits li{margin-bottom:10px}
.limits li:last-child{margin-bottom:0}

details{border:1px solid var(--line);border-radius:var(--radius-sm);background:#fff;margin-bottom:12px}
summary{cursor:pointer;font-weight:600;padding:15px 18px}
details p{padding:0 18px 16px;margin:0;color:var(--slate)}

#support ul{padding-left:20px}
#support li{margin-bottom:8px}

.final{background:var(--ink);color:#fff;text-align:left}
.final h2{color:#fff}
.final p{color:#d7e5db}
.final .cta{background:#fff;color:var(--brand-dark);font-weight:700}

/* ---------- v2 additions: demo video, report illustration, checklist ---------- */
.video-frame{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:0 12px 32px rgba(22,35,46,.12);margin:24px 0 10px;background:#0c1f16;max-width:960px}
.video-frame video{display:block;width:100%;height:auto}
.transcript{max-width:860px;margin-top:14px}
.shot{margin:30px 0 0;max-width:1060px}
.shot img{display:block;max-width:100%;height:auto;border:1px solid var(--line);border-radius:var(--radius)}
.shot figcaption{font-size:13.5px;color:var(--slate);padding:10px 2px 0}
#checklist ul{padding-left:20px;margin:0 0 18px}
#checklist li{margin-bottom:9px}

/* ---------- v2.1 additions: straight-talk block, contents inventory ---------- */
.sub-h{font-size:var(--fs-h3);margin:30px 0 10px}
#straight-talk .limits{margin-top:16px;max-width:860px}
.inventory{width:100%;border-collapse:collapse;background:#fff}
.inventory caption{text-align:left;padding:0 0 8px}

/* ---------- footer ---------- */
.site-footer{background:var(--ink);color:#d7e5db;border-top:1px solid rgba(255,255,255,.18);padding:30px 0 38px}
.foot-brand{font-weight:700;color:#fff;margin:0 0 10px}
.site-footer nav{display:flex;gap:20px;flex-wrap:wrap;margin-bottom:12px}
.site-footer nav a{color:#d7e5db;font-size:14.5px}
.foot-note{font-size:13px;color:#aebfcc;margin:0}

/* ---------- responsive ---------- */
@media (max-width:1024px){
  .demo-grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .steps li{max-width:640px}
}
@media (max-width:768px){
  body{font-size:16px}
  h1{font-size:32px}
  h2{font-size:25px}
  .hero{padding:38px 0 36px}
  .section{padding:var(--space-section-sm) 0}
  .nav-toggle{display:none}
  .js .nav-toggle{display:inline-block}
  .js .site-nav{display:none;width:100%;flex-direction:column;align-items:flex-start;gap:12px;padding:10px 0 6px}
  .js .site-nav.open{display:flex}
  .checks{grid-template-columns:1fr}
  .two-col{grid-template-columns:1fr}
  .sheet table{font-size:13.5px}
  .sheet th:nth-child(3),.sheet td:nth-child(3){display:none} /* keep Check / Reference / Status on narrow screens */
  .compare th,.compare td{padding:9px 10px;font-size:14.5px}
}
@media (max-width:420px){
  .wrap{padding:0 16px}
  h1{font-size:28px}
  .buyrow{gap:14px}
  .cta{width:100%;text-align:center}
  .buyrow .cta{width:100%}
  .price small{display:inline;margin-left:6px}
  .sheet th,.sheet td{padding:8px 10px}
}

/* ---------- v2.2 polish: unified buttons, tap targets, hero separation ---------- */
/* Buttons: one primary (.cta), one secondary (.ghost), shared radius + 44px targets */
.cta{display:inline-flex;align-items:center;justify-content:center;min-height:var(--tap)}
.ghost{display:inline-flex;align-items:center;justify-content:center;min-height:var(--tap);padding:11px 20px;border:1px solid var(--brand);border-radius:var(--radius-btn);color:var(--brand);text-decoration:none}
.ghost:hover{background:var(--mist);text-decoration:none}
.nav-toggle{min-height:var(--tap)}
.cta-small{min-height:var(--tap)}
/* Text-link tap targets without disturbing the nav CTA's own padding */
.site-nav a:not(.cta){padding-top:10px;padding-bottom:10px}
.site-footer nav a{padding-top:6px;padding-bottom:6px}
summary{display:flex;align-items:center;min-height:var(--tap)}
/* Hero reads as one unit: problem -> product -> proof -> price, separated from what follows */
.hero{border-bottom:1px solid var(--line)}
.price strong{color:var(--brand-dark)}
/* No horizontal scroll by construction: media never exceeds its column */
img,video{max-width:100%}

/* ---------- v2.3 render-QA polish (2026-10-23): presentation only ---------- */
/* Disclosure affordance: the flex summary suppresses the native marker, so
   closed FAQ/transcript items read as static boxes. Restore an explicit
   + / – indicator, right-aligned, brand colour. */
summary{list-style:none}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";margin-left:auto;padding-left:14px;color:var(--brand);font-weight:700;font-size:20px;line-height:1;flex:none}
details[open]>summary::after{content:"\2013"}
/* Final CTA and footer are both ink-dark and merge into one block; a brand
   rule on the seam separates them. */
.final{border-bottom:4px solid var(--brand)}
@media (max-width:768px){
  /* Sheet tab: stack the title over its example-data label instead of a
     ragged right-aligned two-line wrap. */
  .sheet-tab{flex-direction:column;align-items:flex-start;gap:2px}
}

/* ---------- v2.4 storefront restructure (V15.2/V15.3): trust band, buyer
   quotes, CTA ladder bands, asset note, final-audit line. Same system:
   brand green, ink, mist, one radius scale, no new typefaces. ---------- */

/* Trust band: one line, directly under the hero */
.trust-band{background:var(--brand-dark);color:#e6f2ea;padding:13px 0}
.trust-band p{margin:0;font-size:var(--fs-secondary);max-width:none}
.trust-band strong{color:#fff}

/* Buyer quotes (problem section): verbatim words, source in small print */
.quotes{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:22px 0 26px}
.quotes blockquote{margin:0;border:1px solid var(--line);border-left:4px solid var(--brand);border-radius:var(--radius-sm);background:#fff;padding:16px 18px}
.quotes blockquote p{margin:0 0 8px;font-size:var(--fs-body);line-height:1.5}
.quotes blockquote footer{font-size:var(--fs-caption);color:var(--slate)}

/* CTA ladder bands between major sections */
.cta-band{background:var(--ink);color:#fff;padding:26px 0}
.band-row{display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap}
.band-row p{margin:0;color:#d7e5db;font-size:var(--fs-lede);max-width:56ch}
.band-row p strong{color:#fff}
.band-row .cta{flex:none}

/* In-section ladder rows sit below the section's own content */
.band-cta{margin-top:28px;margin-bottom:0}

/* Free-asset note inside the mechanism (T&M template) */
.asset-note{border-left:4px solid var(--brand);background:var(--mist);border-radius:var(--radius-sm);padding:12px 16px;margin:24px 0 0;font-size:var(--fs-secondary);max-width:70ch}

/* Final block: audit line under the workbook CTA */
.final-audit{margin-top:20px}
.final-audit a{color:#8fd0a8;font-weight:600}

@media (max-width:768px){
  .quotes{grid-template-columns:1fr}
  .band-row{flex-direction:column;align-items:flex-start}
  .band-row .cta{width:100%;text-align:center}
}

/* ---------- v2.5 conversion candidate (2026-10-24): seven-check cards and
   genuine screenshots in place of the stylized report/SOV mockups. Same
   system only: brand green, ink, mist, existing type + spacing scales,
   no new palette, no new typefaces. ---------- */

/* The seven checks as compact, visually consistent cards */
.check-cards{list-style:none;margin:24px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.check-card{border:1px solid var(--line);border-radius:var(--radius-sm);padding:18px;background:#fff}
.check-card .check-id{margin:0 0 6px}
.check-card .check-id .mono{color:var(--brand);font-weight:700;font-size:13px;letter-spacing:.06em}
.check-card h3{margin:0 0 6px;font-size:17px;line-height:1.3}
.check-card>p:last-child{margin:0;color:var(--slate);font-size:15.5px}
.checks-limit{margin-top:16px}

/* Genuine workbook screenshots inside the report walkthrough grid */
.demo-shot{margin:0;max-width:none}
.demo-shot-sm{margin:14px 0 0;max-width:none}
.demo-grid .shot figcaption{font-size:13.5px;color:var(--slate);padding:10px 2px 0}

@media (max-width:1024px){
  .check-cards{grid-template-columns:1fr 1fr}
}
@media (max-width:768px){
  .check-cards{grid-template-columns:1fr}
}

/* ---------- v2.6 PREMIUM CANDIDATE (2026-10-24, staging only — NOT deployed):
   Concept design layer from construction_control_premium_concept.html, ported
   onto the verified production tree. Scoped to body.premium (index + demo
   only) and x- prefixed components, so articles / privacy / terms / 404 keep
   the production system untouched. Concept tokens are declared as --x-*
   variables; the production :root contract tokens above are unchanged.
   Palette-vs-brand-gate divergence is an open reviewer/owner item — see
   BEFORE_AFTER.md. No webfonts, no external assets, no new scripts. */
body.premium{
  --x-ink:#142923;
  --x-forest:#114c3a;
  --x-forest2:#0d3b30;
  --x-footer:#103d2e;
  --x-leaf:#217754;
  --x-mint:#c3f3db;
  --x-pale:#eef8f1;
  --x-paper:#f9fbf8;
  --x-cream:#fafcf9;
  --x-line:#dbe8df;
  --x-muted:#667b6f;
  background:var(--x-paper);
  color:var(--x-ink);
}

/* header: light, sticky, concept wordmark treatment (markup/links unchanged) */
body.premium .site-header{background:rgba(250,252,249,.96);color:var(--x-ink);border-bottom:1px solid var(--x-line);position:sticky;top:0;z-index:20}
body.premium .brand{color:var(--x-ink)}
body.premium .brand span{color:var(--x-leaf)}
body.premium .site-nav a{color:#435b4c}
body.premium .site-nav a:hover{color:var(--x-forest)}
body.premium .nav-toggle{color:var(--x-ink);border-color:#cddfd3}
body.premium .cta{background:var(--x-forest)}
body.premium .cta:hover{background:#146648}
body.premium .ghost{border-color:#cddfd3;color:var(--x-forest)}
body.premium .ghost:hover{background:#fff}
body.premium .eyebrow{color:var(--x-leaf)}

/* hero: two-column composition, dotted mint field, framed genuine screenshot */
body.premium .x-hero{
  overflow:hidden;
  border-bottom:1px solid #deebe1;
  background:
    radial-gradient(ellipse 42% 65% at 89% 0%,rgba(190,240,214,.65) 0%,transparent 90%),
    radial-gradient(ellipse 35% 60% at 11% 100%,rgba(213,244,224,.31) 0%,transparent 80%),
    linear-gradient(180deg,#fbfefb 0%,#f0f8f1 100%);
}
.x-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:50px;align-items:center;padding:38px 0 30px}
.x-eyebrow{display:inline-flex;align-items:center;gap:10px;border:1px solid #cfe3d6;background:rgba(255,255,255,.7);padding:10px 15px;border-radius:40px;margin:0 0 26px}
.x-dot{width:7px;height:7px;border-radius:50%;background:#1c9567;box-shadow:0 0 0 5px #d8f3e4;flex:none}
body.premium .x-hero h1{font-size:clamp(38px,4.2vw,58px);line-height:1.1;letter-spacing:-.03em;max-width:22ch}
body.premium .x-hero .sub{color:#557065}
.x-under-cta{display:flex;flex-wrap:wrap;gap:12px 21px;margin:6px 0 14px}
.x-under-cta span{font-size:13px;color:#618071;display:inline-flex;align-items:center;gap:7px}
.x-tick{display:grid;place-items:center;width:17px;height:17px;border:1px solid #b1d9c1;border-radius:50%;color:#167551;font-size:11px;font-weight:900;font-style:normal;flex:none}
.x-hero-art{position:relative;padding:10px 0 26px;min-width:0}
.x-frame{position:relative;background:linear-gradient(135deg,#0a4d37,#177357 55%,#0a493c);padding:18px;border-radius:27px;box-shadow:0 35px 85px rgba(15,85,52,.23),inset 0 0 0 1px rgba(255,255,255,.22);transform:rotate(-1.4deg)}
.x-frame-top{display:flex;align-items:center;justify-content:space-between;gap:10px;color:#d6f7e3;font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin:0;padding:2px 5px 13px}
.x-frame-dots{display:flex;gap:5px}
.x-frame-dots i{width:6px;height:6px;display:block;border-radius:50%;background:#a5deb8}
.x-frame-shot{margin:0;background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 10px 30px rgba(7,44,33,.2)}
.x-frame-shot a{display:block}
.x-frame-shot img{display:block;width:100%;height:auto}
.x-frame-shot figcaption{font-size:12px;color:#557065;padding:11px 16px 13px;border-top:1px solid #e2ede5}
.x-float-chip{position:absolute;right:-6px;bottom:0;background:#fff;border:1px solid #d7e9d9;box-shadow:0 13px 29px rgba(19,67,46,.17);border-radius:14px;padding:12px 15px;transform:rotate(2deg);display:flex;gap:10px;align-items:center;margin:0}
.x-chip-icon{width:35px;height:35px;background:#e6f8ed;border-radius:10px;display:grid;place-items:center;color:#1b865c;font-size:18px;flex:none}
.x-float-chip strong{display:block;font-size:12.5px;color:var(--x-ink)}
.x-float-chip small{display:block;font-size:10.5px;color:#779080;margin-top:2px}
body.premium .x-hero .is-strip{border-top-color:#deebe1;margin-bottom:8px}

/* trust band: concept white bar (production sentence retained verbatim) */
body.premium .trust-band{background:#fff;color:var(--x-ink);border-bottom:1px solid #e3ede5;padding:16px 0}
body.premium .trust-band strong{color:var(--x-forest)}

/* sections on the premium pages: mint alternation, forest headings */
body.premium .section.alt{background:var(--x-pale)}
body.premium h2{letter-spacing:-.02em}

/* bridge: concept three-record step cards (production step copy retained) */
.x-steps{list-style:none;margin:26px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:19px}
.x-step{position:relative;border:1px solid #dceae0;border-radius:20px;background:#fff;padding:26px;box-shadow:0 12px 32px rgba(40,91,55,.06)}
.x-step-top{display:flex;align-items:center;justify-content:space-between;margin:0 0 22px}
.x-num{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:#e9f7ee;color:#267750;font-weight:900;font-size:13px}
.x-tag{font-size:10px;letter-spacing:.1em;font-weight:800;color:#9bb1a0;text-transform:uppercase}
.x-step h3{margin:0 0 10px;font-size:19px;letter-spacing:-.02em}
.x-step p:last-child{margin:0;color:#718578;font-size:15px}

/* seven checks: concept 4-column grid + dark limit card (verified names/copy) */
.x-check-cards{list-style:none;margin:24px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}
.x-check-card{background:#fff;border:1px solid #d7e7dc;border-radius:17px;padding:22px;transition:transform .2s,box-shadow .2s}
.x-check-card:hover{transform:translateY(-3px);box-shadow:0 12px 25px rgba(23,69,49,.08)}
.x-check-card .check-id{margin:0 0 14px}
.x-check-card .check-id .mono{display:inline-flex;font-size:11px;font-weight:900;color:#166545;background:#e8f8ed;border-radius:7px;padding:6px 8px;letter-spacing:.05em}
.x-check-card h3{font-size:16.5px;letter-spacing:-.02em;margin:0 0 9px;line-height:1.3}
.x-check-card>p:last-child{margin:0;color:#6c8174;font-size:13.5px;line-height:1.65}
.x-limit-card{background:var(--x-forest);border-color:var(--x-forest)}
.x-limit-card .check-id .mono{background:#26644f;color:#e8fff1}
.x-limit-card h3{color:#fff}
.x-limit-card>p:last-child{color:#c6e9d4}

/* genuine screenshots: concept framing on the existing proof figures */
body.premium .shot img{border:1px solid #cde5d1;border-radius:14px;box-shadow:0 18px 44px rgba(21,92,48,.14)}

/* limitations: concept dark panel (production limits list retained verbatim) */
body.premium #limitations .limits{background:#113e31;border:1px solid #113e31;border-radius:24px;padding:30px 32px;color:#e4f9eb}
body.premium #limitations .limits li{color:#e4f9eb}
body.premium #limitations .limits strong{color:#fff}

/* price card: concept product box (production pricing copy retained verbatim) */
body.premium .price-card{border:1px solid #dbeade;border-radius:23px;box-shadow:0 20px 70px rgba(23,69,48,.09);padding:32px}
body.premium .big-price{letter-spacing:-.02em}

/* FAQ + final + footer on premium pages */
body.premium details{border-radius:12px}
body.premium .final{background:var(--x-forest2);border-bottom:4px solid var(--x-leaf)}
body.premium .site-footer{background:var(--x-footer)}
body.premium .foot-note{color:#86b1a0}

/* premium responsive */
@media (max-width:1080px){
  .x-check-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .x-hero-grid{gap:26px}
}
@media (max-width:1024px){
  .x-steps{grid-template-columns:1fr}
  .x-step{max-width:640px}
}
@media (max-width:780px){
  .x-hero-grid{grid-template-columns:1fr;padding:14px 0 8px;gap:4px}
  .x-hero-art{padding:22px 4px 30px}
  .x-float-chip{right:0}
}
@media (max-width:480px){
  .x-check-cards{grid-template-columns:1fr}
  .x-frame{padding:10px;border-radius:18px}
  .x-float-chip{display:none}
  body.premium #limitations .limits{padding:24px 20px}
  body.premium .price-card{padding:24px 20px}
}

/* Reduced motion (from the concept; production stylesheet previously had no
   such rule — added as the minimal global guard, noted in BEFORE_AFTER.md) */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{transition:none !important;animation:none !important}
}

/* ---------- Claude premium review fixes (Oct 24, READY WITH FIXES ruling;
   premium-scoped only — x- classes and body.premium exist solely on the
   premium index/demo pages, so articles/legal pages stay unreachable) ---- */
/* 1. Final-CTA cascade collision (HIGH): body.premium .cta (line ~362) was
   overriding the .final band's white button with the forest background.
   This higher-specificity rule restores white bg + dark text on the band. */
body.premium .final .cta{background:#fff;color:var(--x-forest2)}
/* 2. Hero frame focus ring was clipped by .x-frame-shot overflow:hidden;
   pull the outline inside the frame. */
.x-frame-shot a:focus-visible{outline-offset:-4px}
/* 3. Anchors were landing under the sticky header on premium pages.
   Scoped via :has(> body.premium) so the shared stylesheet's article/legal
   pages are untouched; browsers without :has keep the prior behavior. */
html:has(> body.premium){scroll-padding-top:96px}
/* 4. Mobile hero headline size. */
@media (max-width:480px){
  body.premium .x-hero h1{font-size:30px}
}
/* 5. Open mobile menu could overflow the viewport (nav lives in the 768px
   block as .js .site-nav.open); cap its height and let it scroll. */
@media (max-width:768px){
  body.premium .site-nav.open{max-height:calc(100vh - 70px);overflow-y:auto}
}
/* 6. Contrast: small/body text darkened toward #566b5e within the
   forest/mint family (no new hues); .x-tag raised to 12px. */
body.premium .x-tag{color:#566b5e;font-size:12px}
body.premium .x-float-chip small{color:#566b5e}
body.premium .x-step p:last-child{color:#566b5e}
body.premium .x-check-card>p:last-child{color:#566b5e}
body.premium .x-under-cta span{color:#566b5e}