@layer reset, tokens, base, layout, chrome, components, sections, utils, responsive;

@layer reset {
    *,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
    html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
    img,svg { display:block; max-width:100%; height:auto; }
    a { color:inherit; text-decoration:none; }
    button { font:inherit; color:inherit; cursor:pointer; border:0; background:none; }
    table { border-collapse:collapse; width:100%; }
    ul,ol { list-style:none; }
    :focus-visible { outline:2px solid var(--ember); outline-offset:2px; }
}

@layer tokens {
    :root {
        --carbon:#0d0f13; --carbon-2:#12151b; --panel:#171b22; --panel-2:#1d222b;
        --line:#2a3140; --line-2:#374152;
        --ink:#eef2f7; --muted:#98a4b6; --muted-2:#6d7889;
        --ember:#ec2230; --ember-deep:#b3121d; --ember-soft:rgba(236,34,48,.14);
        --amber:#f79a25; --amber-soft:rgba(247,154,37,.14);
        --pass:#39c58d;
        --wrap:1140px; --gap:clamp(18px,4vw,34px);
        --r-s:8px; --r-m:14px; --r-l:22px;
        --sh:0 18px 44px -20px rgba(0,0,0,.7);
        --disp:"Oxanium",system-ui,sans-serif;
        --body:"Barlow",system-ui,-apple-system,sans-serif;
    }
}

@layer base {
    body { font-family:var(--body); background:var(--carbon); color:var(--ink);
        line-height:1.62; font-size:17px; letter-spacing:.1px;
        background-image:radial-gradient(1100px 520px at 78% -6%, rgba(236,34,48,.10), transparent 60%),
            radial-gradient(760px 420px at 6% 4%, rgba(247,154,37,.06), transparent 55%);
        background-attachment:fixed; }
    h1,h2,h3,h4 { font-family:var(--disp); font-weight:800; line-height:1.08;
        letter-spacing:.4px; color:#fff; }
    h1 { font-size:clamp(2.05rem,5.4vw,3.35rem); text-transform:uppercase; }
    h2 { font-size:clamp(1.55rem,3.6vw,2.3rem); text-transform:uppercase; }
    h3 { font-size:clamp(1.14rem,2vw,1.4rem); }
    h4 { font-size:1.02rem; font-weight:700; letter-spacing:.6px; text-transform:uppercase; }
    p { margin:0 0 1em; }
    strong { color:#fff; font-weight:600; }
    a.cx-link { color:var(--amber); text-decoration:underline; text-underline-offset:3px;
        text-decoration-color:rgba(247,154,37,.4); }
    a.cx-link:hover { color:#ffb857; }
    ::selection { background:var(--ember); color:#fff; }
}

@layer layout {
    .cx-wrap { width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(16px,4vw,30px); }
    .cx-narrow { max-width:820px; }
    .cx-stack > * + * { margin-top:1.05em; }
    .cx-grid { display:grid; gap:var(--gap); }
    .cx-row { display:flex; flex-wrap:wrap; gap:14px; }
    .cx-cluster { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
    section { padding-block:clamp(46px,7vw,86px); }
    .cx-sec-line { border-top:1px solid var(--line); }
}

@layer chrome {
    /* ribbon */
    .cx-ribbon { background:linear-gradient(90deg,var(--ember-deep),var(--ember)); color:#fff;
        font-size:.76rem; letter-spacing:.7px; text-transform:uppercase; font-weight:600;
        text-align:center; padding:7px 14px; font-family:var(--disp); }
    /* masthead */
    .cx-mast { position:sticky; top:0; z-index:50; background:rgba(13,15,19,.92);
        backdrop-filter:blur(9px); border-bottom:1px solid var(--line); }
    .cx-mast__bar { display:flex; align-items:center; justify-content:space-between; gap:16px;
        min-height:66px; }
    .cx-logo { display:flex; align-items:center; gap:10px; font-family:var(--disp);
        font-weight:800; font-size:1.16rem; letter-spacing:.6px; text-transform:uppercase; color:#fff; }
    .cx-logo__mk { width:30px; height:30px; }
    .cx-logo small { display:block; font-family:var(--body); font-weight:600; font-size:.56rem;
        letter-spacing:2.4px; color:var(--amber); margin-top:-2px; }
    .cx-nav { display:flex; align-items:center; gap:22px; }
    .cx-nav a { font-family:var(--disp); font-weight:600; font-size:.86rem; letter-spacing:.5px;
        text-transform:uppercase; color:var(--muted); padding:6px 2px; border-bottom:2px solid transparent; }
    .cx-nav a:hover { color:#fff; }
    .cx-nav a[aria-current="page"] { color:#fff; border-bottom-color:var(--ember); }
    .cx-burger { display:none; width:44px; height:44px; border:1px solid var(--line-2);
        border-radius:var(--r-s); align-items:center; justify-content:center; }
    .cx-burger span,.cx-burger span::before,.cx-burger span::after { content:""; display:block;
        width:19px; height:2px; background:#fff; position:relative; transition:.2s; }
    .cx-burger span::before { position:absolute; top:-6px; }
    .cx-burger span::after { position:absolute; top:6px; }
    .cx-mnav { position:absolute; left:0; right:0; top:100%; background:var(--carbon-2);
        border-bottom:1px solid var(--line); padding:10px clamp(16px,4vw,30px) 18px;
        display:flex; flex-direction:column; gap:2px; opacity:0; visibility:hidden;
        transform:translateY(-8px); transition:.18s; }
    .cx-mnav.is-open { opacity:1; visibility:visible; transform:none; }
    .cx-mnav a { padding:11px 6px; border-bottom:1px solid var(--line); font-family:var(--disp);
        font-weight:600; letter-spacing:.5px; text-transform:uppercase; font-size:.94rem; color:var(--ink); }
    .cx-mnav a[aria-current="page"] { color:var(--ember); }
    /* breadcrumb */
    .cx-crumb { border-bottom:1px solid var(--line); background:var(--carbon-2); }
    .cx-crumb ol { display:flex; flex-wrap:wrap; gap:7px; align-items:center; padding-block:11px;
        font-size:.8rem; color:var(--muted-2); }
    .cx-crumb li::after { content:"›"; margin-left:7px; color:var(--line-2); }
    .cx-crumb li:last-child::after { content:""; }
    .cx-crumb a:hover { color:var(--amber); }
    .cx-crumb [aria-current] { color:var(--muted); }
    /* footer */
    .cx-foot { background:#0a0c0f; border-top:1px solid var(--line); padding-block:52px 30px; margin-top:8px; }
    .cx-foot__grid { display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr; gap:34px; }
    .cx-foot h4 { color:var(--amber); margin-bottom:12px; font-size:.78rem; letter-spacing:1.4px; }
    .cx-foot li { margin-bottom:8px; }
    .cx-foot a { color:var(--muted); font-size:.93rem; }
    .cx-foot a:hover { color:#fff; }
    .cx-foot__brand p { color:var(--muted); font-size:.9rem; }
    .cx-foot__meta { border-top:1px solid var(--line); margin-top:34px; padding-top:20px;
        font-size:.8rem; color:var(--muted-2); }
    .cx-foot__meta p { margin-bottom:.7em; }
    .cx-disc { background:var(--panel); border:1px solid var(--line); border-radius:var(--r-m);
        padding:16px 18px; font-size:.78rem; color:var(--muted-2); line-height:1.55; }
}

@layer components {
    .cx-btn { display:inline-flex; align-items:center; justify-content:center; gap:9px;
        font-family:var(--disp); font-weight:800; letter-spacing:.7px; text-transform:uppercase;
        font-size:.94rem; padding:15px 26px; border-radius:var(--r-s); color:#fff;
        background:linear-gradient(180deg,#f5333f,var(--ember-deep));
        box-shadow:0 12px 26px -12px rgba(236,34,48,.75); transition:transform .15s, box-shadow .15s;
        border:1px solid rgba(255,120,120,.35); text-align:center; }
    .cx-btn:hover { transform:translateY(-2px); box-shadow:0 18px 34px -14px rgba(236,34,48,.85); }
    .cx-btn[data-variant="ghost"] { background:transparent; color:#fff; box-shadow:none;
        border:1px solid var(--line-2); }
    .cx-btn[data-variant="ghost"]:hover { border-color:var(--amber); color:var(--amber); transform:none; }
    .cx-btn[data-size="lg"] { padding:18px 34px; font-size:1.02rem; }
    .cx-btn__sub { display:block; font-family:var(--body); font-weight:600; font-size:.72rem;
        letter-spacing:.3px; text-transform:none; opacity:.85; margin-top:1px; }

    .cx-chip { display:inline-flex; align-items:center; gap:6px; font-family:var(--disp);
        font-weight:600; font-size:.72rem; letter-spacing:.8px; text-transform:uppercase;
        padding:5px 11px; border-radius:100px; border:1px solid var(--line-2); color:var(--muted); }
    .cx-chip[data-tone="ember"] { color:#ff8a91; border-color:rgba(236,34,48,.5); background:var(--ember-soft); }
    .cx-chip[data-tone="amber"] { color:#ffc074; border-color:rgba(247,154,37,.5); background:var(--amber-soft); }
    .cx-chip[data-tone="pass"] { color:var(--pass); border-color:rgba(57,197,141,.5); background:rgba(57,197,141,.1); }

    .cx-card { background:var(--panel); border:1px solid var(--line); border-radius:var(--r-m);
        padding:24px; }
    .cx-card--raise { box-shadow:var(--sh); }
    .cx-panel { background:linear-gradient(180deg,var(--panel),var(--carbon-2));
        border:1px solid var(--line); border-radius:var(--r-l); padding:clamp(22px,4vw,34px); }

    .cx-kick { font-family:var(--disp); font-weight:700; font-size:.78rem; letter-spacing:2.6px;
        text-transform:uppercase; color:var(--amber); margin-bottom:12px; }
    .cx-lead { font-size:1.12rem; color:#cfd7e2; }

    /* stat line (Key Facts dl) */
    .cx-stat { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line);
        border:1px solid var(--line); border-radius:var(--r-m); overflow:hidden; }
    .cx-stat div { background:var(--panel); padding:14px 16px; }
    .cx-stat dt { font-family:var(--disp); font-size:.7rem; letter-spacing:1.3px; text-transform:uppercase;
        color:var(--muted-2); margin-bottom:3px; }
    .cx-stat dd { font-weight:600; color:#fff; font-size:.98rem; }

    /* tldr / takeaways boxes */
    .cx-note { border:1px solid var(--line-2); border-left:3px solid var(--ember);
        background:var(--panel); border-radius:var(--r-m); padding:20px 22px; }
    .cx-note[data-tone="amber"] { border-left-color:var(--amber); }
    .cx-note__lab { font-family:var(--disp); font-weight:700; font-size:.76rem; letter-spacing:2px;
        text-transform:uppercase; color:var(--amber); margin-bottom:8px; }
    .cx-note ul { margin:.4em 0 0; display:grid; gap:9px; }
    .cx-note li { position:relative; padding-left:22px; }
    .cx-note li::before { content:"▸"; position:absolute; left:0; color:var(--ember); }

    /* tables */
    .cx-table { font-size:.95rem; border:1px solid var(--line); border-radius:var(--r-m); overflow:hidden; }
    .cx-table th,.cx-table td { text-align:left; padding:13px 16px; border-bottom:1px solid var(--line); }
    .cx-table thead th { background:var(--panel-2); font-family:var(--disp); font-size:.74rem;
        letter-spacing:1px; text-transform:uppercase; color:var(--amber); }
    .cx-table tbody tr:nth-child(even) td { background:rgba(255,255,255,.015); }
    .cx-table tbody tr:last-child td { border-bottom:0; }
    .cx-table td:first-child { color:#fff; font-weight:600; }
    .cx-table--mono td:nth-child(2),.cx-table--mono td.mono { font-family:ui-monospace,"Cascadia Code",monospace;
        color:var(--amber); font-size:.9rem; }
    .cx-tablewrap { overflow-x:auto; }

    /* pillars / feature cards */
    .cx-pill { background:var(--panel); border:1px solid var(--line); border-radius:var(--r-m);
        padding:24px; border-top:3px solid var(--ember); }
    .cx-pill h3 { color:#fff; margin-bottom:6px; }
    .cx-pill .n { font-family:var(--disp); font-weight:800; color:var(--ember-deep); font-size:1.7rem; }

    /* price cards */
    .cx-price { background:var(--panel); border:1px solid var(--line); border-radius:var(--r-l);
        padding:22px; display:flex; flex-direction:column; text-align:center; position:relative; }
    .cx-price[data-pop="1"] { border-color:var(--ember); box-shadow:var(--sh); }
    .cx-price__tag { position:absolute; top:-13px; left:50%; transform:translateX(-50%);
        font-family:var(--disp); font-weight:700; font-size:.68rem; letter-spacing:1.4px; text-transform:uppercase;
        padding:5px 14px; border-radius:100px; background:var(--panel-2); border:1px solid var(--line-2); color:var(--muted); white-space:nowrap; }
    .cx-price[data-pop="1"] .cx-price__tag { background:var(--ember); border-color:var(--ember); color:#fff; }
    .cx-price__b { font-family:var(--disp); font-weight:800; font-size:1.5rem; color:#fff; margin-top:8px; text-transform:uppercase; }
    .cx-price__s { font-size:.82rem; color:var(--muted); text-transform:uppercase; letter-spacing:1px; }
    .cx-price img { width:150px; height:150px; object-fit:contain; margin:12px auto 6px;
        filter:drop-shadow(0 14px 22px rgba(0,0,0,.55)); }
    .cx-price__per { font-family:var(--disp); font-weight:800; font-size:2.6rem; color:#fff; line-height:1; }
    .cx-price__per sup { font-size:1.1rem; vertical-align:super; color:var(--amber); }
    .cx-price__per small { font-size:.8rem; color:var(--muted); font-family:var(--body); font-weight:600; }
    .cx-price__was { color:var(--muted-2); text-decoration:line-through; font-size:.9rem; }
    .cx-price__total { font-weight:700; color:#fff; }
    .cx-price__save { color:var(--pass); font-weight:600; font-size:.9rem; }
    .cx-price__ship { font-size:.84rem; color:var(--muted); }
    .cx-price ul { margin:12px 0; display:grid; gap:6px; text-align:left; font-size:.9rem; }
    .cx-price li { padding-left:22px; position:relative; color:var(--muted); }
    .cx-price li::before { content:"✓"; position:absolute; left:0; color:var(--pass); font-weight:700; }
    .cx-price .cx-btn { margin-top:auto; }

    /* rating bars */
    .cx-bar { display:grid; grid-template-columns:130px 1fr 44px; align-items:center; gap:12px; margin-bottom:9px; font-size:.88rem; }
    .cx-bar__t { height:9px; background:var(--panel-2); border-radius:100px; overflow:hidden; border:1px solid var(--line); }
    .cx-bar__f { height:100%; background:linear-gradient(90deg,var(--amber),var(--ember)); }
    .cx-bar__v { font-family:var(--disp); font-weight:700; color:#fff; text-align:right; }

    /* review cards */
    .cx-rev { background:var(--panel); border:1px solid var(--line); border-radius:var(--r-m); padding:20px; }
    .cx-rev__h { display:flex; align-items:center; gap:12px; margin-bottom:10px; }
    .cx-ava { width:42px; height:42px; border-radius:100px; display:grid; place-items:center;
        font-family:var(--disp); font-weight:800; color:#fff; background:linear-gradient(135deg,var(--ember-deep),#5a2230); flex:none; }
    .cx-rev__n { font-weight:600; color:#fff; }
    .cx-rev__m { font-size:.78rem; color:var(--muted-2); }
    .cx-stars { color:var(--amber); letter-spacing:1px; font-size:.9rem; }

    /* stat magnet */
    .cx-mag { background:var(--panel); border:1px solid var(--line); border-radius:var(--r-m); padding:18px; text-align:center; }
    .cx-mag b { display:block; font-family:var(--disp); font-weight:800; font-size:1.9rem; color:var(--ember); }
    .cx-mag span { font-size:.8rem; color:var(--muted); text-transform:uppercase; letter-spacing:.6px; }

    /* references */
    .cx-refs { counter-reset:r; font-size:.86rem; color:var(--muted); }
    .cx-refs li { counter-increment:r; padding:9px 0 9px 34px; position:relative; border-bottom:1px solid var(--line); }
    .cx-refs li::before { content:"["counter(r)"]"; position:absolute; left:0; color:var(--amber);
        font-family:ui-monospace,monospace; font-size:.8rem; }
    .cx-refs a { color:#bcc6d4; text-decoration:underline; text-underline-offset:2px; word-break:break-word; }
    .cx-refs a:hover { color:var(--amber); }
    sup.cx-cite { color:var(--amber); font-family:ui-monospace,monospace; font-size:.72em; }

    /* byline */
    .cx-byline { display:flex; flex-wrap:wrap; gap:10px 16px; align-items:center; font-size:.84rem;
        color:var(--muted); border-block:1px solid var(--line); padding:12px 0; }
    .cx-byline b { color:#fff; }

    /* faq details */
    .cx-faq details { border:1px solid var(--line); border-radius:var(--r-m); background:var(--panel); margin-bottom:10px; }
    .cx-faq summary { padding:16px 20px; font-family:var(--disp); font-weight:700; color:#fff;
        cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:14px; }
    .cx-faq summary::-webkit-details-marker { display:none; }
    .cx-faq summary::after { content:"+"; color:var(--ember); font-size:1.3rem; font-weight:800; }
    .cx-faq details[open] summary::after { content:"–"; }
    .cx-faq details[open] summary { border-bottom:1px solid var(--line); }
    .cx-faq__b { padding:16px 20px; color:var(--muted); }
    .cx-faq__b p { margin-bottom:.7em; }

    /* form */
    .cx-field { margin-bottom:15px; }
    .cx-field label { display:block; font-family:var(--disp); font-size:.78rem; letter-spacing:1px;
        text-transform:uppercase; color:var(--muted); margin-bottom:6px; }
    .cx-field input,.cx-field select,.cx-field textarea { width:100%; background:var(--carbon-2);
        border:1px solid var(--line-2); border-radius:var(--r-s); padding:12px 14px; color:#fff; font:inherit; }
    .cx-field input:focus,.cx-field textarea:focus,.cx-field select:focus { border-color:var(--ember); outline:none; }

    .cx-trust { display:flex; flex-wrap:wrap; gap:10px 22px; align-items:center; }
    .cx-trust span { font-family:var(--disp); font-size:.78rem; letter-spacing:.8px; text-transform:uppercase;
        color:var(--muted); display:flex; align-items:center; gap:7px; }
    .cx-trust span::before { content:"◆"; color:var(--ember); font-size:.7rem; }
    .cx-feat { display:flex; flex-wrap:wrap; gap:8px 26px; align-items:center; opacity:.8; }
    .cx-feat span { font-family:var(--disp); font-weight:700; letter-spacing:.6px; color:var(--muted); font-size:.96rem; }
    .cx-skip { position:absolute; left:-999px; top:0; background:var(--ember); color:#fff; padding:10px 16px; z-index:99; }
    .cx-skip:focus { left:10px; top:10px; }
}

@layer sections {
    .cx-hero { position:relative; overflow:hidden; padding-block:clamp(38px,6vw,70px) clamp(30px,5vw,54px); }
    .cx-hero__grid { display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(24px,5vw,50px); align-items:center; }
    .cx-hero__img { position:relative; }
    .cx-hero__img img { width:100%; max-width:430px; margin-inline:auto;
        filter:drop-shadow(0 40px 60px rgba(0,0,0,.7)) drop-shadow(0 0 42px rgba(236,34,48,.28)); }
    .cx-hero__glow { position:absolute; inset:6% 12%; background:radial-gradient(circle,var(--ember-soft),transparent 65%); z-index:-1; }
    .cx-portal { background:var(--panel); border:1px solid var(--line); border-left:3px solid var(--amber);
        border-radius:var(--r-m); padding:16px 20px; font-size:.96rem; color:#cfd7e2; }
    .cx-cta-band { background:linear-gradient(180deg,var(--carbon-2),#140a0c);
        border-block:1px solid var(--line); text-align:center; }
    .cx-eyebrow-n { font-family:var(--disp); font-weight:800; color:var(--ember-deep); font-size:2.1rem; margin-right:6px; }
}

@layer utils {
    .u-mt0{margin-top:0}.u-tc{text-align:center}.u-mx{margin-inline:auto}
    .u-muted{color:var(--muted)}.u-amber{color:var(--amber)}.u-white{color:#fff}
    .u-max70{max-width:70ch}.u-g2{display:grid;gap:20px}
    .g-2{grid-template-columns:repeat(2,1fr)}.g-3{grid-template-columns:repeat(3,1fr)}.g-4{grid-template-columns:repeat(4,1fr)}
    .u-mb0{margin-bottom:0}.u-small{font-size:.86rem}
}

@layer responsive {
    @media (max-width:900px){
        .cx-nav{display:none}.cx-burger{display:flex}
        .cx-hero__grid{grid-template-columns:1fr}.cx-hero__img{order:-1;max-width:340px;margin-inline:auto}
        .cx-foot__grid{grid-template-columns:1fr 1fr}
        .g-4{grid-template-columns:repeat(2,1fr)}.g-3{grid-template-columns:1fr}
        .cx-price[data-pop="1"]{order:-1}
    }
    @media (max-width:560px){
        body{font-size:16px}
        .cx-stat{grid-template-columns:1fr}.g-2,.g-4{grid-template-columns:1fr}
        .cx-foot__grid{grid-template-columns:1fr}
        .cx-bar{grid-template-columns:96px 1fr 40px}
        .cx-price__grid{grid-template-columns:1fr}
    }
    @media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto}}
}