/* ============================================================
   BYC 2026 DESIGN SYSTEM - hand-maintained source of truth.
   Originally generated from design-prototypes/landing-v3.html by
   _build_landing_template.py (now retired to design-prototypes/archive/).
   Edit THIS file directly; the prototype is design reference only.
   Fonts are self-hosted (GDPR) - variable woff2, latin subset.
   ============================================================ */
@font-face{
  font-family:'Inter';
  src:url('../fonts/inter-variable-latin.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:optional;
}
@font-face{
  font-family:'JetBrains Mono';
  src:url('../fonts/jetbrains-mono-variable-latin.woff2') format('woff2');
  font-weight:100 800;font-style:normal;font-display:optional;
}
/* Orbitron: used ONLY for the brand wordmark (logo lockup) */
@font-face{
  font-family:'Orbitron';
  src:url('../fonts/orbitron-v31-latin-700.woff2') format('woff2');
  font-weight:700;font-style:normal;font-display:optional;
}

/* light-touch guards against parent-theme/plugin styles bleeding in.
   The heading font-family guard matters: Astra's Customizer sets
   Orbitron on h1-h6 site-wide via inline CSS - without this rule the
   old brand font bleeds into the new design. */
body.byc-2026{margin:0;font-family:'Inter',system-ui,sans-serif}
/* background enforcement: Astra/Spectra/Customizer styles (some printed in
   the footer, after our stylesheet) override plain `body` rules - these
   carry the canvas + grid with enough weight to always win */
body.byc-2026{
  background-color:#0a0a0b !important;
  background-image:
    linear-gradient(rgba(255,255,255,.019) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.019) 1px,transparent 1px) !important;
  background-size:52px 52px !important;
  background-position:center top !important;
  background-attachment:scroll !important;
}
body.byc-2026 h1,body.byc-2026 h2,body.byc-2026 h3,body.byc-2026 h4,
body.byc-2026 h5,body.byc-2026 h6{margin:0;color:inherit;
  font-family:'Inter',system-ui,sans-serif}
body.byc-2026 a{text-decoration:none}
body.byc-2026 p{margin:0}
body.byc-2026 button{font:inherit}
/* ============================================================
   BYC 2026 DESIGN TOKENS - single source of truth for the
   spacing + type scales (shared by all 2026 page stylesheets).

   - Standalone prototypes link this file directly.
   - Build scripts (_build_*_template.py / _build_*_css.py) PREPEND
     this file into each generated stylesheet, so production CSS is
     self-contained.
   Edit the scale HERE, rebuild, and every page updates together.

   NOTE: color + font-family + radius tokens still live in each page's
   own :root for now (a later phase consolidates those here too).
   Size tokens use the `--fs-*` prefix (not `--text-*`) to avoid
   colliding with the existing `--text` / `--text-muted` color tokens.
   ============================================================ */
:root{
  /* ---- SPACING (4px base; name = px / 4) --------------------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ---- TYPE: text (static UI / body) ------------------------ */
  --fs-2xs:  12px;   /* mono micro-labels: badges, meta, pills, nav, tags */
  --fs-xs:   12px;   /* eyebrows, captions, star ratings, roles           */
  --fs-sm:   13px;   /* card titles/prices, bullets                       */
  --fs-base: 14px;   /* body copy, testimonial text                       */
  --fs-md:   16px;   /* benefit body, flagship name/price, card subs      */
  --fs-lg:   18px;   /* collection headings                               */
  --fs-xl:   20px;   /* intro captions                                    */

  /* ============================================================
     TWO BODY REGISTERS (decided 2026-06-16) - hierarchy by PAGE TYPE,
     not by whim. Both sit inside best practice (16-18px body); the split
     is RULE-BASED, so a guide and a product page differing by 1px reads
     as intentional, never sloppy.

       READING register = --fs-read 17 / --weight-read 300 /
                          --text-read (#b9b9bf, bright) / --leading-read 1.55.
         Sustained long-form: guides (speed, support, INSTALLATION),
         FAQ answers, legal, BLOG. "Sit and read" pages.

       PRODUCT register = 16px / default weight / --text-muted /
                          line-height ~1.6.
         Dense scan-and-buy pages beside compact buy UI: indicator detail
         pages, single-product supporting copy. (Owner prefers 16 here; it
         harmonises with the 11-13px buy-rail microcopy.)

       MICRO-LABEL floor = --fs-2xs 12px mono (badges/pills/nav/footer/
         captions). Nothing renders below 12px except the decorative
         heatmap .cell and the two 11px indicator-dock accent chips.

     rem was a trap (Astra sets the root to 18px not 16, so rem ballooned
     ~12.5%) - ALL type tokens are static px, identical on every viewport. ---- */
  --fs-read:      17px;         /* THE body size - all running text, all viewports (owner: 17px) */
  --fs-read-sm:   14px;         /* secondary/dense reading: table cells */
  --measure:      700px;        /* running-text + FAQ accordion max-width (~73 chars @17px; widened a touch so embedded screenshots aren't squished, still compact) */
  --measure-max:  720px;        /* wider reading contexts */
  --text-read:    #b9b9bf;      /* PRIMARY reading-text color: AAA on bg/surface */
  --accent-read:  #e05260;      /* in-prose links: passes AA on bg/surface (keep 1px underline) */

  /* ---- TYPE: content headings (Inter, in-prose h2/h3/h4) ---- */
  --fs-h2:        25px;
  --fs-h3:        20px;
  --fs-h4:        18px;         /* = body size; separated by brightness (--text-heading) + a 450 weight nudge, not weight */

  /* ---- TYPE: display (fluid headings) ----------------------- */
  --lead:        clamp(16px, 1.4vw, 19px);   /* lead paragraph     */
  --display-sm:  clamp(22px, 2.4vw, 30px);   /* card titles        */
  --display-md:  clamp(24px, 3vw,   34px);   /* benefit headings   */
  --display-lg:  clamp(30px, 4vw,   46px);   /* CTA + stat numbers */
  --display-xl:  clamp(32px, 5vw,   56px);   /* section headings   */
  --display-2xl: clamp(30px, 6.5vw, 76px);   /* hero H1            */
  --display-ghost: clamp(80px, 12vw, 150px); /* decorative numerals */

  /* ---- FONT WEIGHT (Inter variable) ------------------------- */
  --weight-read:     300;   /* reading body: matches the Templates-page lead (300) the owner uses as the universal text reference; light, like the pre-redesign site */
  --weight-normal:   400;   /* regular: accordion titles (one step above the 300 reading body) */
  --weight-body:     450;   /* corrected body weight (self-hosted Inter) */
  --weight-medium:   500;   /* in-content h2/h3 (renders ~450 on self-hosted Inter, so it sits calm beside the 300 body) */
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    800;

  /* ---- LINE HEIGHT ------------------------------------------ */
  --leading-tight:   1.02;  /* display headings */
  --leading-snug:    1.2;
  --leading-heading: 1.3;   /* in-prose h2/h3/h4 */
  --leading-normal:  1.5;   /* dense UI body   */
  --leading-read:    1.55;  /* reading prose body: sits in the 1.5-1.65 reading band (was 1.4, a UI/heading leading) */
  --leading-relaxed: 1.65;  /* quotes          */
}


  /* ============================================================
     DESIGN TOKENS
     ============================================================ */
  :root{
    /* brand base is #d93b3b - deliberately pushed to a louder, flashier red per owner preference */
    --accent:        #f2202e;
    --accent-dim:    #ff525e;
    --accent-glow:   rgba(242,32,46,.22);

    --bg:            #0a0a0b;
    --bg-soft:       #0d0d0f;
    --surface:       #101012;   /* visitenkarte body */
    --surface-2:     #141417;
    --inset:         #0b0b0d;   /* inner diagram panel */
    --line:          rgba(255,255,255,.07);
    --line-faint:    rgba(255,255,255,.019);  /* bg grid: extra subtle so real separator lines stand out */
    --line-strong:   rgba(255,255,255,.15);

    --text:          #f4f4f5;
    --text-heading:  #dcdce1;  /* slightly-dimmed white for reading-page heading hierarchy (softer than pure --text) */
    --text-muted:    #8a8a90;
    --text-faint:    #5b5b61;

    --radius:0px;      /* slicker, less round */
    --maxw:          1120px;
    --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
    --sans:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  }

  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{
    font-family:var(--sans);background:var(--bg);color:var(--text);line-height:1.5;
    -webkit-font-smoothing:antialiased;
    /* discreet grid: bigger cells, fainter lines */
    background-image:
      linear-gradient(var(--line-faint) 1px,transparent 1px),
      linear-gradient(90deg,var(--line-faint) 1px,transparent 1px);
    background-size:52px 52px;background-position:center top;
  }
  /* ============================================================
     GRAIN / NOISE OVERLAY - film-grain texture over the whole
     page (backgrounds, cards, insets). Generated by an inline
     SVG turbulence filter, no image asset needed. Sits on top of
     everything at ~5% opacity; pointer-events off so it's
     untouchable. Tune intensity via --grain-opacity.
     ============================================================ */
  :root{--grain-opacity:.05}
  /* mix-blend-mode:overlay = the UNIFORM site-wide treatment (matches shop +
     product pages): deepens blacks instead of adding a milky haze */
  body::after{
    content:"";position:fixed;inset:0;z-index:40;pointer-events:none;
    opacity:var(--grain-opacity);mix-blend-mode:overlay;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size:160px 160px;
  }
  /* NOTE: no z-index on .wrap - it must not create a stacking context,
     or .frame could never rise above the grain overlay */
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--space-6);position:relative}
  section{padding:var(--space-24) 0}
  section[id]{scroll-margin-top:var(--space-20)}
  a{color:inherit;text-decoration:none}

  /* ---------- atoms ---------- */
  .eyebrow{font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.2em;text-transform:uppercase;
    color:var(--text-muted);display:inline-flex;align-items:center;gap:var(--space-3)}
  .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);
    box-shadow:0 0 0 4px var(--accent-glow)}
  .h-display{font-weight:800;letter-spacing:-.03em;line-height:1.02;
    font-size:var(--display-2xl)}
  .h-display .muted{color:var(--text-muted)}
  .lead{color:var(--text-muted);font-weight:var(--weight-body);font-size:var(--lead);max-width:52ch}
  .section-head{margin-bottom:var(--space-12)}
  .section-head .h-display{font-size:var(--display-xl)}
  .section-head.center{text-align:center}
  .section-head.center .lead{margin:var(--space-4) auto 0}

  /* fixed height so every action button matches exactly (nav + hero + sections) */
  .btn{display:inline-flex;align-items:center;gap:var(--space-2);font-family:var(--mono);font-size:var(--fs-sm);
    letter-spacing:.04em;height:46px;padding:0 var(--space-5);border-radius:6px;
    border:1px solid var(--line-strong);transition:.18s ease;cursor:pointer;line-height:1}
  .btn-primary{background:#fff;color:#000;border-color:#fff;font-weight:600}
  .btn-primary:hover{background:var(--accent);border-color:var(--accent);color:#fff;
    box-shadow:0 0 30px var(--accent-glow)}
  .btn-ghost:hover{border-color:var(--line-strong);background:var(--surface-2)}

  /* status pill - exact element from reference: bordered box, dot + mono label */
  .pill{font-family:var(--mono);font-size:var(--fs-2xs);letter-spacing:.16em;text-transform:uppercase;
    color:var(--accent-dim);border:1px solid rgba(225,29,42,.35);border-radius:0;
    padding:var(--space-1) var(--space-3);display:inline-flex;align-items:center;gap:var(--space-2);background:rgba(225,29,42,.05)}
  .pill .dot{width:6px;height:6px;box-shadow:none}
  .pill.grey{color:var(--text-muted);border-color:var(--line);background:transparent}
  .pill.grey .dot{background:var(--text-faint)}

  /* ============================================================
     VISITENKARTE CARD - the reference product-card structure
     ============================================================ */
  .vcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
    padding:var(--space-10);display:flex;flex-direction:column;transition:.2s ease;position:relative}
  .vcard:hover{border-color:var(--line-strong)}
  .vcard .pill{align-self:flex-start;margin-bottom:var(--space-6)}
  .vcard h3{font-size:var(--display-sm);font-weight:800;letter-spacing:-.02em;margin-bottom:var(--space-3)}
  .vcard .sub{color:var(--text-muted);font-size:var(--fs-md);line-height:1.5;max-width:52ch;margin-bottom:var(--space-5)}
  .vcard .bullets{list-style:none;display:flex;flex-direction:column;gap:var(--space-3);margin-bottom:var(--space-6)}
  .vcard .bullets li{font-family:var(--mono);font-size:var(--fs-sm);letter-spacing:.04em;
    color:var(--text-muted);display:flex;align-items:center;gap:var(--space-3)}
  .vcard .bullets li::before{content:"";width:6px;height:6px;border-radius:50%;
    background:var(--accent);flex:none}
  .vcard .inset{background:var(--inset);border:1px solid var(--line);border-radius:0;
    overflow:hidden;position:relative}
  .inset img{display:block;width:100%;height:100%;object-fit:cover}
  /* product shots keep their natural aspect - never cropped, full fidelity */
  .inset.shot{aspect-ratio:1200/545;height:auto}
  .compact .inset.shot{margin-bottom:var(--space-1)}

  /* ============================================================
     TRADEMARK FRAME - corner brackets around every product shot.
     - --fgap controls the breathing space between bracket and
       picture (set to 0px for flush).
     - z-index lifts the whole frame ABOVE the grain overlay, so
       brackets + screenshot render pixel-crisp with no noise.
     ============================================================ */
  /* ============================================================
     FEATURED CAROUSEL - 3-up sliding track. Auto-advances left every
     few seconds; the leftmost card exits, a new one enters right
     (infinite loop). Each card: trademark frame + dimmed mono caption
     (brightens on hover, like the shop grid). Click = product page.
     ============================================================ */
  /* controls only (section-head carries the eyebrow + title) */
  .car3-head{display:flex;align-items:center;justify-content:flex-end;margin-bottom:var(--space-4)}
  .car3-ctrl{display:flex;align-items:center;gap:var(--space-2)}
  .car3-count{font-family:var(--mono);font-size:var(--fs-2xs);letter-spacing:.16em;
    color:var(--text-faint);margin-right:var(--space-2)}
  .car-btn{font-family:var(--mono);font-size:var(--fs-md);line-height:1;color:var(--text-muted);
    border:1px solid var(--line);border-radius:6px;background:none;width:28px;height:24px;
    cursor:pointer;transition:.16s ease;padding:0}
  .car-btn:hover{color:var(--text);border-color:var(--line-strong)}

  /* viewport clips; items carry inner padding so corner brackets survive */
  .car3-viewport{overflow:hidden;margin:0 -11px}
  .car3-track{display:flex}
  .car3-item{flex:0 0 33.3333%;min-width:33.3333%;padding:9px 11px;display:block}
  @media(max-width:1020px){.car3-item{flex-basis:50%;min-width:50%}}
  @media(max-width:640px){.car3-item{flex-basis:100%;min-width:100%}}
  .car3-item .shot{background:var(--inset);border:1px solid var(--line);border-radius:0;
    overflow:hidden;aspect-ratio:1910/890}
  .car3-item .shot img{width:100%;height:100%;object-fit:cover;display:block}
  .car3-cap{font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.04em;
    color:var(--text-muted);margin-top:var(--space-4);transition:.18s;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .car3-item:hover .car3-cap{color:var(--text)}

  .car-dots{display:flex;gap:var(--space-2);justify-content:center;margin-top:var(--space-5)}
  .car-dots button{width:28px;height:3px;border:none;border-radius:0;padding:0;
    background:var(--line-strong);cursor:pointer;transition:.2s ease}
  .car-dots button:hover{background:var(--text-faint)}
  .car-dots button.active{background:var(--accent);box-shadow:0 0 10px var(--accent-glow)}

  /* discreet brackets: hairline 1px, muted grey, like the reference */
  :root{--fgap:8px;--bracket:rgba(255,255,255,.5);--bsize:18px;--bweight:1px}
  .frame{position:relative;z-index:45}  /* above grain (40), below sticky nav (50) */
  .frame .cb{position:absolute;width:var(--bsize);height:var(--bsize);z-index:3;pointer-events:none;filter:drop-shadow(0 0 1px rgba(0,0,0,.65));transition:width .2s ease,height .2s ease,border-color .2s ease}
  .frame .cb.tl{top:calc(var(--fgap)*-1);left:calc(var(--fgap)*-1);
    border-top:var(--bweight) solid var(--bracket);border-left:var(--bweight) solid var(--bracket)}
  .frame .cb.tr{top:calc(var(--fgap)*-1);right:calc(var(--fgap)*-1);
    border-top:var(--bweight) solid var(--bracket);border-right:var(--bweight) solid var(--bracket)}
  .frame .cb.bl{bottom:calc(var(--fgap)*-1);left:calc(var(--fgap)*-1);
    border-bottom:var(--bweight) solid var(--bracket);border-left:var(--bweight) solid var(--bracket)}
  .frame .cb.br{bottom:calc(var(--fgap)*-1);right:calc(var(--fgap)*-1);
    border-bottom:var(--bweight) solid var(--bracket);border-right:var(--bweight) solid var(--bracket)}
  .frame .inset{border-radius:0}  /* sharp corners suit the framing marks */
  /* clickable frame (the landing hero shot): brackets expand + brighten on hover or
     tap - the same affordance the product cards use (.pcard:hover>.cb). Pointer-only
     visual; on touch the :active state gives brief tap feedback before navigation. */
  a.frame{display:block;cursor:pointer}
  a.frame:hover .cb,a.frame:active .cb{width:26px;height:26px;border-color:rgba(255,255,255,.85)}
  .vcard .foot{display:flex;align-items:center;justify-content:space-between;margin-top:var(--space-8)}
  .vcard .foot .label{font-family:var(--mono);font-size:var(--fs-2xs);letter-spacing:.28em;
    text-transform:uppercase;color:var(--text-faint)}
  .vcard .foot .more{font-size:var(--fs-base);font-weight:600;color:var(--text);
    display:inline-flex;align-items:center;gap:var(--space-2);transition:.18s}
  .vcard .foot .more span{transition:.18s}
  .vcard:hover .foot .more{color:var(--accent-dim)}
  .vcard:hover .foot .more span{transform:translateX(3px)}

  /* node diagram inset - chips in corners, dashed lines to glowing center */
  .diagram{height:170px}
  .diagram svg{position:absolute;inset:0;width:100%;height:100%}
  .diagram .chip{position:absolute;font-family:var(--mono);font-size:var(--fs-2xs);letter-spacing:.06em;
    color:var(--text-muted);border:1px solid var(--line);background:var(--surface-2);
    border-radius:0;padding:var(--space-1) var(--space-3)}
  .diagram .chip.tl{top:18px;left:18px}
  .diagram .chip.bl{bottom:18px;left:18px}
  .diagram .chip.tr{top:18px;right:18px}
  .diagram .chip.br{bottom:18px;right:18px}
  .diagram .core{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
    width:46px;height:46px;border-radius:50%;border:1px solid rgba(225,29,42,.5);
    background:rgba(225,29,42,.07);display:grid;place-items:center;font-size:var(--fs-xl);
    color:var(--accent-dim);box-shadow:0 0 26px var(--accent-glow)}

  /* footprint inset (mini) */
  .inset .bar{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);
    border-bottom:1px solid var(--line);font-family:var(--mono);font-size:var(--fs-2xs);
    letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted)}
  .inset .bar .tt{margin-left:auto;color:var(--text-faint)}
  .chart-body{display:grid;grid-template-columns:repeat(10,1fr);gap:var(--space-1);padding:var(--space-3);
    height:130px;align-items:end}
  .col{display:flex;flex-direction:column;gap:var(--space-1);justify-content:flex-end;height:100%}
  .cell{border-radius:0;font-family:var(--mono);font-size:8.5px;color:#0a0a0b;
    text-align:center;padding:1px 0;line-height:1.4}
  .cell.buy{background:linear-gradient(180deg,var(--accent),#8c1119);color:#fff;opacity:.92}
  .cell.sell{background:#1b1b1f;color:var(--text-muted)}
  .cell.poc{outline:1px solid var(--accent-dim);background:var(--accent);color:#fff}

  /* grids of vcards */
  .vgrid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5)}
  @media(max-width:880px){.vgrid-2{grid-template-columns:1fr}}
  .vgrid-2 .compact{padding:var(--space-8)}
  .compact h3{font-size:var(--fs-xl)}
  .compact .sub{font-size:var(--fs-base);margin-bottom:var(--space-4)}
  .compact .foot{margin-top:var(--space-5)}

  /* ---------- nav ---------- */
  header.nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(10px);
    background:rgba(10,10,11,.72);border-bottom:1px solid var(--line)}
  .nav-inner{display:flex;align-items:center;justify-content:space-between;height:64px;
    max-width:var(--maxw);margin:0 auto;padding:0 var(--space-6)}
  /* brand lockup: real SVG mark + wordmark in Orbitron (logo-only exception
     to the Inter system - the wordmark is brand identity, not typography) */
  .brand{display:flex;align-items:center;gap:var(--space-3);font-family:'Orbitron',var(--sans);
    font-weight:700;letter-spacing:.04em;font-size:var(--fs-md);color:#fff;line-height:1}
  .brand svg{width:28px;height:28px;display:block;flex:none;
    filter:drop-shadow(0 0 12px var(--accent-glow))}
  .nav-links{display:flex;gap:var(--space-6);font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.08em;
    text-transform:uppercase;color:var(--text-muted);line-height:1;align-items:center}
  .nav-links a:hover{color:var(--text)}
  @media(max-width:860px){.nav-links{display:none}}

  /* ---------- hero ---------- */
  .hero{padding-top:var(--space-20);padding-bottom:var(--space-16)}
  .hero .meta-row{display:flex;gap:var(--space-3);flex-wrap:wrap;margin-bottom:var(--space-4)}
  .hero .h-display{margin:0 0 var(--space-5)}
  .hero-cta{display:flex;gap:var(--space-3);margin-top:var(--space-4);flex-wrap:wrap}

  /* ============================================================
     STAT STRIP - exact element from reference, centered w/ dividers
     ============================================================ */
  .trustband{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
    background:var(--bg-soft);padding:var(--space-16) 0;text-align:center}
  .trustband .eyebrow{justify-content:center;margin-bottom:var(--space-10);display:flex}
  .statrow{display:flex;justify-content:center;align-items:stretch}
  .statcol{padding:0 var(--space-12);border-left:1px solid var(--line);display:flex;
    flex-direction:column;align-items:center;gap:var(--space-3)}
  .statcol:first-child{border-left:none}
  .statcol .ico{width:34px;height:34px;border-radius:0;border:1px solid var(--line);
    background:var(--surface-2);display:grid;place-items:center;font-size:var(--fs-md);
    color:var(--text-muted);margin-bottom:var(--space-1)}
  .statcol .num{font-size:var(--display-lg);font-weight:800;letter-spacing:-.02em}
  .statcol .cap{font-family:var(--mono);font-size:var(--fs-2xs);letter-spacing:.22em;
    text-transform:uppercase;color:var(--text-faint)}
  @media(max-width:720px){.statrow{flex-direction:column;gap:var(--space-8)}
    .statcol{border-left:none;padding:0}}

  /* ---------- centered two-tone interlude ---------- */
  .interlude{text-align:center;padding:var(--space-24) 0 var(--space-24)}
  .interlude .lead{margin:var(--space-5) auto 0}

  /* ---------- collections ---------- */
  .coll-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-4)}
  @media(max-width:980px){.coll-grid{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:560px){.coll-grid{grid-template-columns:1fr}}
  .coll{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
    padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-3);min-height:220px;transition:.2s}
  .coll:hover{border-color:var(--line-strong)}
  .coll .ico{width:40px;height:40px;border-radius:0;border:1px solid var(--line);
    background:var(--surface-2);display:grid;place-items:center;font-size:var(--fs-lg)}
  .coll h4{font-size:var(--fs-lg);letter-spacing:-.01em}
  .coll p{color:var(--text-muted);font-size:var(--fs-base);line-height:1.55}
  .coll .foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;padding-top:var(--space-4)}
  .coll .foot .label{font-family:var(--mono);font-size:var(--fs-2xs);letter-spacing:.24em;
    text-transform:uppercase;color:var(--text-faint)}
  .coll .foot .more{font-size:var(--fs-base);font-weight:600}
  .coll:hover .foot .more{color:var(--accent-dim)}

  /* ---------- benefits (editorial split: sticky intro + numbered list) ---------- */
  .benefits{display:grid;grid-template-columns:.82fr 1.18fr;gap:var(--space-16)}
  .benefits .bintro .h-display{font-size:var(--display-lg)}
  .benefits .bintro-sub{color:var(--text-muted);font-size:var(--fs-md);line-height:1.6;
    margin-top:var(--space-5);max-width:34ch}
  .blist{display:flex;flex-direction:column}
  .bitem{display:grid;grid-template-columns:auto 1fr;gap:var(--space-6);
    padding:var(--space-6) 0;border-top:1px solid var(--line)}
  .bitem:last-child{border-bottom:1px solid var(--line)}
  .bidx{font-family:var(--mono);font-size:var(--fs-md);font-weight:700;
    color:var(--accent-dim);line-height:1.4}
  .bitem h3{font-size:var(--fs-lg);font-weight:800;letter-spacing:-.01em;
    margin-bottom:var(--space-2);display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap}
  .btag{font-family:var(--mono);font-size:var(--fs-2xs);letter-spacing:.18em;
    text-transform:uppercase;color:var(--text-faint);font-weight:400}
  .bitem p{color:var(--text-muted);font-size:var(--fs-base);line-height:1.62;max-width:54ch}
  @media(max-width:880px){.benefits{grid-template-columns:1fr;gap:var(--space-8)}}

  /* ---------- testimonials ---------- */
  .quote-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4);align-items:start}
  @media(max-width:900px){.quote-grid{grid-template-columns:1fr}}
  /* phones: the 6 testimonials become a horizontal swipe carousel instead of a
     ~1500px stacked vertical wall. All six stay in the DOM - the VOLUME of varied
     verified reviews IS the credibility signal, so nothing is hidden; they're swiped,
     not scrolled past. Pure CSS scroll-snap (native momentum, no JS); the peek of the
     next card signals it's swipeable. Full-bleed via negative margin so the first card
     aligns to the content edge and the scroll reaches the screen edges. */
  @media(max-width:640px){
    .quote-grid{display:flex;grid-template-columns:none;gap:var(--space-4);align-items:stretch;
      overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
      margin:0 calc(var(--space-6)*-1);padding:var(--space-2) var(--space-6) var(--space-4);
      scroll-padding-left:var(--space-6);scrollbar-width:none}
    .quote-grid::-webkit-scrollbar{display:none}
    /* equal-height cards (align-items:stretch) so swiping between a long quote and a
       short one stays uniform; .quote already pins its "Verified" tag to the bottom. */
    .quote-grid>.quote{flex:0 0 88%;scroll-snap-align:start}
  }
  .quote{background:var(--surface);border:1px solid var(--line);border-radius:6px;
    padding:var(--space-8);display:flex;flex-direction:column;gap:var(--space-4);transition:.2s}
  .quote:hover{border-color:var(--line-strong)}
  .quote .who{display:flex;align-items:center;gap:var(--space-3)}
  .quote .av{width:38px;height:38px;border-radius:6px;border:1px solid var(--line);
    background:var(--surface-2);display:grid;place-items:center;font-family:var(--mono);
    font-size:var(--fs-base);color:var(--accent-dim)}
  .quote .who .nm{font-weight:600;font-size:var(--fs-base)}
  .quote .who .role{font-family:var(--mono);font-size:var(--fs-2xs);letter-spacing:.12em;
    text-transform:uppercase;color:var(--text-faint)}
  .quote .stars{font-size:var(--fs-xs);letter-spacing:3px;color:var(--accent-dim)}
  .quote p{color:var(--text-muted);font-size:var(--fs-base);line-height:1.65}
  .quote .tag{margin-top:auto;font-family:var(--mono);font-size:var(--fs-2xs);letter-spacing:.16em;
    text-transform:uppercase;color:var(--text-faint);padding-top:var(--space-4);border-top:1px solid var(--line);
    display:flex;justify-content:space-between}
  .quote .tag .v{color:var(--accent-dim)}

  /* ---------- contact ---------- */
  .cta{border:1px solid var(--line);border-radius:6px;padding:var(--space-16) var(--space-12);
    background:radial-gradient(120% 140% at 50% 0%,rgba(225,29,42,.10),transparent 60%),var(--surface);
    display:grid;grid-template-columns:1fr 1fr;gap:var(--space-12);align-items:center}
  @media(max-width:860px){.cta{grid-template-columns:1fr;padding:var(--space-10) var(--space-6)}}
  .cta .h-display{font-size:var(--display-lg);margin:var(--space-4) 0 var(--space-4)}
  /* support hub: email + help routes */
  .hub{display:flex;flex-direction:column;gap:var(--space-2)}
  .chan{display:flex;align-items:center;gap:var(--space-4);border:1px solid var(--line);
    background:var(--inset);padding:var(--space-4) var(--space-5);transition:.16s ease}
  .chan:hover{border-color:var(--line-strong);background:var(--surface-2)}
  .chan .cico{width:38px;height:38px;border:1px solid var(--line);background:var(--surface-2);
    display:grid;place-items:center;color:var(--accent-dim);flex:none}
  .chan .cico svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;
    stroke-linecap:round;stroke-linejoin:round}
  .chan:hover .cico{color:var(--accent);border-color:var(--line-strong)}
  .chan .ct{font-size:var(--fs-base);font-weight:600;color:var(--text)}
  .chan .cs{font-family:var(--mono);font-size:var(--fs-2xs);color:var(--text-muted);
    margin-top:2px;overflow-wrap:anywhere}
  .chan .carrow{margin-left:auto;color:var(--text-faint);font-size:var(--fs-md);transition:.16s}
  .chan:hover .carrow{color:var(--accent-dim);transform:translateX(3px)}
  /* follow / social on the contact intro */
  .csocial{display:flex;align-items:center;gap:var(--space-3);margin-top:var(--space-8)}
  .csocial-lab{font-family:var(--mono);font-size:var(--fs-2xs);letter-spacing:.2em;
    text-transform:uppercase;color:var(--text-faint)}
  .ssocial{width:38px;height:38px;border:1px solid var(--line);display:grid;place-items:center;
    color:var(--text-muted);transition:.16s ease}
  .ssocial:hover{color:var(--accent);border-color:rgba(242,32,46,.4);background:rgba(242,32,46,.05)}
  .ssocial svg{width:18px;height:18px;fill:currentColor}

  /* closing CTA - centered conversion band after the testimonials (the warmest
     moment, just after the proof). Styled like the contact .cta box. Mobile-only
     (owner request): on desktop the page flows straight into the contact/support
     hub, so the extra CTA is hidden there and kept only on phones. */
  .closecta{display:none}
  @media(max-width:880px){.closecta{display:block}}
  .closecta-box{border:1px solid var(--line);border-radius:6px;text-align:center;
    background:radial-gradient(120% 140% at 50% 0%,rgba(225,29,42,.10),transparent 60%),var(--surface);
    padding:var(--space-16) var(--space-12);
    display:flex;flex-direction:column;align-items:center;gap:var(--space-5)}
  .closecta-box .eyebrow{justify-content:center}
  .closecta-box .h-display{font-size:var(--display-lg)}
  .closecta-box .flagship-row{margin:0;justify-content:center}
  .closecta-box .lead{margin:0;max-width:48ch}
  .closecta-box .hero-cta{margin:0;justify-content:center}
  @media(max-width:860px){.closecta-box{padding:var(--space-10) var(--space-6)}}

  footer{border-top:1px solid var(--line);padding:var(--space-10) 0;color:var(--text-faint);
    font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.06em}
  .foot-inner{display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--space-4)}
  .note{font-family:var(--mono);font-size:var(--fs-2xs);color:var(--text-faint);letter-spacing:.06em;
    text-align:center;padding:var(--space-4);border-top:1px dashed var(--line);line-height:1.8}

  /* ============================================================
     SELLING LAYOUT ADDITIONS
     ============================================================ */
  .flagship-row{display:flex;align-items:center;gap:var(--space-4);flex-wrap:wrap;margin:var(--space-10) 0 0}
  .flagship-name{font-weight:700;font-size:var(--fs-md)}
  .flagship-price{font-family:var(--mono);font-size:var(--fs-md);font-weight:600;
    display:inline-flex;align-items:baseline;gap:var(--space-3)}
  .flagship-price .old{color:var(--text-faint);text-decoration:line-through;
    font-size:var(--fs-sm);font-weight:400}
  .flagship-price .save{font-size:var(--fs-2xs);letter-spacing:.12em;text-transform:uppercase;
    color:var(--accent-dim);border:1px solid rgba(242,32,46,.35);border-radius:0;
    padding:var(--space-1) var(--space-2);margin-left:2px}
  /* cropped flagship visual - focus on the stacked charts */
  .hero-shot{aspect-ratio:2.35/1;overflow:hidden}
  .hero-shot picture{display:block;width:100%;height:100%}   /* <picture> wrapper must not collapse the inline box */
  .hero-shot img{width:100%;height:100%;object-fit:cover;object-position:center 42%;display:block}
  /* framed flagship visual: standing gap above it on desktop; tightened on phones
     (see the max-width:600px block below) so the chart surfaces sooner. */
  .hero-figure{margin-top:var(--space-12)}

  /* early-proof row: mobile-only one-liner under the hero image (desktop shows the
     .quoteband instead, so this stays hidden there). Single line, clamped so it can
     never wrap and re-bury the product lineup the way the stacked 3-quote band did.
     Links down to the full Recent Customers reviews. */
  .hero-proof{display:none}
  @media(max-width:880px){
    /* baseline-aligned so the stars sit on the text baseline; allowed to wrap to a
       second line on the narrowest phones rather than truncate (a 2-line micro-row is
       still tiny - the thing we must avoid is the tall STACKED band, not one wrap). */
    .hero-proof{display:flex;align-items:baseline;gap:var(--space-3);margin-top:var(--space-8);
      color:var(--text-muted);font-size:var(--fs-sm);transition:.16s ease}
    .hero-proof .hp-stars{flex:none;color:var(--accent-dim);letter-spacing:2px;font-size:var(--fs-xs)}
    .hero-proof .hp-text{font-family:var(--mono);letter-spacing:.04em;line-height:1.5}
    .hero-proof .hp-text strong{color:var(--text);font-weight:700}
    .hero-proof:hover .hp-text{color:var(--text)}
  }

  /* phones: surface the Crimson hero chart sooner. Drop the marketing lead (the
     headline + category pill already frame the offer) and trim the gap above the
     framed visual, so the flagship price/CTA + chart land in the first view -
     screenshot-first, the way the shop cards work. */
  @media(max-width:600px){
    .hero .lead{display:none}
    .hero-figure{margin-top:var(--space-6)}
  }

  /* social-proof quote strip */
  .quoteband{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
    background:var(--bg-soft);padding:var(--space-10) 0}
  .qstrip{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-8)}
  @media(max-width:880px){.qstrip{grid-template-columns:1fr;gap:var(--space-6)}}
  /* on phones + small tablets this band duplicates the full testimonials section
     further down, and stacked it buries the products - hide it so products surface
     fast. With the band gone, let #featured flow straight off the hero like every
     other section (its symmetric 96px top only reads right WITH the band above). */
  @media(max-width:880px){
    .quoteband{display:none}
    #featured{padding-top:0}
  }
  .qitem .stars{font-size:var(--fs-2xs);letter-spacing:3px;color:var(--accent-dim);margin-bottom:var(--space-3)}
  .qitem p{color:var(--text-muted);font-size:var(--fs-base);line-height:1.6}
  .qitem .who{font-family:var(--mono);font-size:var(--fs-2xs);letter-spacing:.16em;
    text-transform:uppercase;color:var(--text-faint);margin-top:var(--space-3)}

  /* collections: 6-up with custom icons */
  .coll-grid{grid-template-columns:repeat(3,1fr)}
  @media(max-width:980px){.coll-grid{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:560px){.coll-grid{grid-template-columns:1fr}}
  .cicon{width:44px;height:44px;border-radius:0;border:1px solid var(--line);
    background:var(--surface-2);display:grid;place-items:center;color:var(--text-muted)}
  .cicon svg{width:23px;height:23px}
  .coll:hover .cicon{border-color:var(--line-strong);color:var(--text)}

  /* indicators grid */
  .ind-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-5)}
  @media(max-width:880px){.ind-grid{grid-template-columns:1fr}}
  .ind .inset.shot{aspect-ratio:1.95/1;height:auto}
  .ind .inset.shot img{width:100%;height:100%;object-fit:cover}
  .ind .foot{margin-top:auto}
  .pcard.soon{pointer-events:none}   /* coming-soon teaser: not a link, no hover/click affordance */

  /* ============================================================
     MOTION - subtle, modern, reduced-motion safe
     ============================================================ */
  /* scroll reveal (html.rv-on set by JS only when motion is allowed) */
  html.rv-on .rv{opacity:0;transform:translateY(22px);
    transition:opacity .8s cubic-bezier(.2,.6,.2,1),transform .8s cubic-bezier(.2,.6,.2,1)}
  html.rv-on .rv.in{opacity:1;transform:none}
  /* pulsating accent dots - gentle breathing glow */
  @keyframes bycPulse{0%,100%{box-shadow:0 0 0 4px var(--accent-glow)}
    50%{box-shadow:0 0 0 8px rgba(242,32,46,.07)}}
  .dot{animation:bycPulse 3.2s ease-in-out infinite}
  .pill .dot{animation:none}  /* pills keep their flat dot */
  @media (prefers-reduced-motion: reduce){.dot{animation:none}}

  /* ============================================================
     UNIFIED PRODUCT CARD (shop-style) + BREAKOUT CAROUSEL + CHIPS
     ============================================================ */
  /* the carousel deliberately breaks out of the text container -
     system width = shop canvas (1380px); never causes h-scroll.
     Centered via MARGIN, not transform: the scroll-reveal ends on
     transform:none and would wipe a translateX centering.
     z-index keeps the band above grain (40), below nav (50). */
  .car3{position:relative;z-index:45;width:min(1380px,96vw);
    margin-left:calc((100% - min(1380px,96vw))/2)}
  .car3-item{padding:9px 11px}
  .pcard{background:var(--surface);position:relative;
    padding:0;display:flex;flex-direction:column;transition:.2s ease;height:100%}
  /* C-card: corner brackets ARE the card border (no box border) */
  .pcard>.cb{position:absolute;width:18px;height:18px;z-index:46;pointer-events:none;
    transition:.2s ease}
  .pcard>.cb.tl{top:0;left:0;border-top:1px solid var(--bracket);border-left:1px solid var(--bracket)}
  .pcard>.cb.tr{top:0;right:0;border-top:1px solid var(--bracket);border-right:1px solid var(--bracket)}
  .pcard>.cb.bl{bottom:0;left:0;border-bottom:1px solid var(--bracket);border-left:1px solid var(--bracket)}
  .pcard>.cb.br{bottom:0;right:0;border-bottom:1px solid var(--bracket);border-right:1px solid var(--bracket)}
  .pcard:hover>.cb{width:26px;height:26px;border-color:rgba(255,255,255,.85)}
  /* card corners overlap the screenshot - they need more presence than the
     page-frame brackets (.28 white vanishes over chart imagery) */
  .pcard>.cb{filter:drop-shadow(0 0 1px rgba(0,0,0,.65))}

  .pcard .badges{display:flex;gap:var(--space-2);flex-wrap:wrap}
  .badge{font-family:var(--mono);font-size:var(--fs-2xs);letter-spacing:.14em;text-transform:uppercase;
    color:var(--text-muted);border:1px solid var(--line);border-radius:0;padding:var(--space-1) var(--space-2);
    display:inline-flex;align-items:center;gap:var(--space-2)}
  .badge::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--text-faint)}
  .badge.hot{color:var(--accent-dim);border-color:rgba(242,32,46,.35)}
  .badge.hot::before{background:var(--accent)}
  .pcard .shot{background:var(--inset);border:0;border-bottom:1px solid var(--line);
    border-radius:0;overflow:hidden;aspect-ratio:1910/890;position:relative;z-index:45}
  .pcard .meta{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;
    padding:var(--space-3) var(--space-4) var(--space-3);border-bottom:1px solid var(--line)}
  .pcard .meta .b{font-family:var(--mono);font-size:var(--fs-2xs);letter-spacing:.14em;
    text-transform:uppercase;color:var(--text-muted);border:1px solid var(--line);
    padding:var(--space-1) var(--space-2);display:inline-flex;align-items:center;gap:var(--space-2);transition:.16s}
  .pcard .meta .b::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--text-faint)}
  .pcard:hover .meta .b{border-color:var(--line-strong)}

  .pcard .shot img{width:100%;height:100%;object-fit:cover;display:block}
  .pcard .trow{display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);margin-top:auto;padding:var(--space-4) var(--space-4) var(--space-4)}
  .ptitle{font-family:var(--mono);font-size:var(--fs-sm);font-weight:700;color:var(--text);
    letter-spacing:.06em;text-transform:uppercase;line-height:1.5;overflow:hidden;
    white-space:nowrap;text-overflow:ellipsis}
  .pprice{font-family:var(--mono);font-size:var(--fs-sm);font-weight:500;color:var(--text-muted);
    white-space:nowrap;transition:.18s}
  .pprice .old{color:var(--text-faint);text-decoration:line-through;font-size:var(--fs-2xs);
    margin-right:var(--space-2);font-weight:400}
  .pcard:hover .pprice{color:var(--text)}
  .ind .shot{aspect-ratio:1.95/1}
  
  .indsub{color:var(--text-muted);font-size:var(--fs-base);line-height:1.6}

  /* category chips - pure navigation into the filtered shop */
  .catchips{display:flex;align-items:center;justify-content:center;gap:var(--space-2);
    flex-wrap:wrap;margin-top:var(--space-8)}
  .cclabel{font-family:var(--mono);font-size:var(--fs-2xs);letter-spacing:.22em;
    text-transform:uppercase;color:var(--text-faint);margin-right:var(--space-2)}
  .catchip{font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.12em;text-transform:uppercase;
    color:var(--text-muted);border:1px solid var(--line);border-radius:6px;padding:var(--space-2) var(--space-4);
    transition:.16s ease}
  .catchip:hover{color:var(--accent-dim);border-color:rgba(242,32,46,.4);
    background:rgba(242,32,46,.05)}
  /* separates the format axis (Singles/Suite) from the analysis categories */
  .ccsep{width:1px;height:16px;background:var(--line-strong);margin:0 var(--space-2)}

  /* responsive vertical rhythm - desktop 96px gaps scale down on mobile */
  @media(max-width:720px){
    section{padding:var(--space-16) 0}
    .hero{padding-top:var(--space-12);padding-bottom:var(--space-12)}
    .section-head{margin-bottom:var(--space-8)}
    .quoteband{padding:var(--space-8) 0}
    .cta{padding:var(--space-10) var(--space-6)}
    .bitem{padding:var(--space-5) 0}
  }