/* ==================================================
   MORE THAN ENOUGH — A Year with the realme GT 6
   A dedicated stylesheet for one long-form review page.

   This is the same "product story" system introduced by
   macbook-story.css, carried forward rather than reinvented: same
   tokens, same chapter rhythm, same pastel tint language, same
   scroll-reveal behaviour. It adds a small number of new, additive
   components this particular piece needed — an icon badge for named
   verdict cards, a split image/text block for detail shots, one new
   pastel tint (coral), and a bespoke "emotional centre" treatment for
   the consumerism section — without touching anything the MacBook
   page relies on. Keep the shared tokens in sync with style.css /
   featured-story.css / macbook-story.css if any of them change.
================================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    transition:background-color .25s ease, color .25s ease, border-color .25s ease;
}

:root{

    color-scheme:light;

    --bg:#F6F2EB;
    --text:#1B1B1B;
    --story-text:#3E3E3E;
    --muted:#666;
    --muted-2:#777;
    --border:#ddd;
    --surface:#F5F0EA;
    --surface-2:#EFE9E0;

    /* single restrained accent — muted slate blue-grey, used sparingly,
       shared with the rest of the review system */
    --accent:#5B7285;
    --accent-soft:#5B7285;

    /* always-dark "moment" sections — deliberately constant across
       themes for dramatic contrast, not tied to light/dark mode */
    --ink:#0A0A0B;
    --ink-text:#F4F2ED;
    --ink-muted:#9B978E;
    --ink-border:#2A2A2B;

    /* the consumerism section's own palette — also deliberately
       constant across themes, the same way --ink is, so this page's
       one emotional-centre section reads the same regardless of
       reader's theme preference */
    --consumer-bg-1:#F7EFDF;
    --consumer-bg-2:#ECE5F3;
    --consumer-text:#2A2320;
    --consumer-muted:#6E6459;
    --consumer-accent:#8F5527;

    --ease-out-apple:cubic-bezier(.16,1,.3,1);
    --radius-lg:26px;
    --radius-md:18px;
    --radius-sm:12px;

}

[data-theme="dark"]{

    color-scheme:dark;

    --bg:#121212;
    --text:#F5F3EF;
    --story-text:#D8D3C9;
    --muted:#B8B3A9;
    --muted-2:#948E82;
    --border:#2A2A2A;
    --surface:#181818;
    --surface-2:#1D1D1D;

    --accent:#8CA2B3;
    --accent-soft:#8CA2B3;

}

body{
    font-family:"Manrope",sans-serif;
    background:var(--bg);
    color:var(--text);
    line-height:1.75;
    overflow-x:hidden;
}

h1,h2,h3,h4{
    font-family:"DM Sans",sans-serif;
    color:var(--text);
    letter-spacing:-0.02em;
}

::selection{
    background:var(--text);
    color:var(--bg);
}

a{
    color:inherit;
}

img{
    display:block;
    width:100%;
}

/* ---------- BACK LINK ---------- */

.back-link{
    display:inline-block;
    text-decoration:none;
    color:var(--muted-2);
    font-size:15px;
    transition:.3s;
}

.back-link:hover{
    color:var(--text);
}

.back-link:focus-visible{
    outline:2px solid var(--text);
    outline-offset:4px;
    border-radius:4px;
}

/* ---------- SHARED LAYOUT ---------- */

.wrap{
    width:min(1180px,90%);
    margin:auto;
}

.wrap--narrow{
    width:min(760px,90%);
    margin:auto;
}

.wrap--mid{
    width:min(920px,90%);
    margin:auto;
}

/* ==================================================
   HERO
================================================== */

.review-hero{
    padding:28px 0 0;
}

.review-hero .back-link{
    display:inline-block;
    margin-bottom:56px;
}

.review-hero .eyebrow{
    text-transform:uppercase;
    letter-spacing:4px;
    font-size:12px;
    font-weight:700;
    color:var(--muted-2);
    margin-bottom:22px;
    text-align:center;
}

.review-hero h1{
    font-size:clamp(42px,6.4vw,96px);
    line-height:1.02;
    font-weight:800;
    text-align:center;
    max-width:1100px;
    margin:0 auto 26px;
}

.review-hero .subtitle{
    font-size:clamp(17px,2vw,22px);
    color:var(--muted);
    text-align:center;
    max-width:660px;
    margin:0 auto 56px;
}

.review-hero-image{
    border-radius:var(--radius-lg);
    overflow:hidden;
    background:#000;
    box-shadow:0 30px 80px rgba(0,0,0,.22);
}

.review-hero-image img{
    display:block;
    width:100%;
    height:auto;
}

.chapter p.review-hero-credit{
    width:min(1180px,90%);
    max-width:none;
    margin:16px auto 0;
    text-align:center;
    font-size:12px;
    color:var(--muted-2);
}

/* ---------- SPEC STRIP ---------- */

.spec-strip{
    width:min(1100px,92%);
    margin:64px auto 0;
    display:grid;
    grid-template-columns:repeat(7,1fr);
    gap:1px;
    background:var(--border);
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    overflow:hidden;
}

.spec-chip{
    background:var(--surface);
    padding:20px 14px;
    text-align:center;
}

.spec-chip .spec-value{
    display:block;
    font-family:"DM Sans",sans-serif;
    font-size:17px;
    font-weight:700;
    color:var(--text);
    margin-bottom:6px;
}

.spec-chip .spec-label{
    display:block;
    font-size:10.5px;
    letter-spacing:1.5px;
    text-transform:uppercase;
    color:var(--muted-2);
}

/* ==================================================
   CHAPTERS — shared rhythm
================================================== */

.chapter{
    width:min(1180px,90%);
    margin:auto;
    padding:100px 0;
}

.chapter--tight{
    padding:78px 0;
}

.chapter-head{
    max-width:760px;
    margin-bottom:56px;
}

.chapter-kicker{
    display:flex;
    align-items:baseline;
    gap:14px;
    margin-bottom:20px;
}

.chapter-kicker .num{
    font-family:"DM Sans",sans-serif;
    font-size:14px;
    font-weight:700;
    color:var(--accent);
}

.chapter-kicker .label{
    text-transform:uppercase;
    letter-spacing:3px;
    font-size:12px;
    font-weight:700;
    color:var(--muted-2);
}

.chapter h2{
    font-size:clamp(30px,4.2vw,54px);
    line-height:1.06;
    font-weight:800;
}

.chapter-lede{
    font-size:19px;
    color:var(--story-text);
    max-width:680px;
    margin-top:18px;
}

.chapter p{
    font-size:18px;
    line-height:1.85;
    color:var(--story-text);
    max-width:680px;
}

.chapter p + p{
    margin-top:22px;
}

/* Full-bleed, permanently-dark "moment" sections — a small number of
   these punctuate the page for contrast; not tied to the site's own
   light/dark theme, so no [data-theme] override needed here. */

.chapter--ink{
    background:var(--ink);
    color:var(--ink-text);
    width:100%;
    padding:125px 0;
    margin:0;
}

.chapter--ink .wrap,
.chapter--ink .wrap--narrow{
    text-align:center;
}

.chapter--ink .chapter-kicker{
    justify-content:center;
}

.chapter--ink .chapter-kicker .label{
    color:var(--ink-muted);
}

.chapter--ink p{
    color:var(--ink-muted);
    max-width:620px;
    margin:0 auto;
    font-size:18px;
}

/* ---------- BIG STATEMENT TYPE ---------- */

.statement{
    font-family:"DM Sans",sans-serif;
    font-size:clamp(32px,5.6vw,80px);
    line-height:1.05;
    font-weight:800;
    letter-spacing:-0.02em;
    max-width:980px;
}

.statement--center{
    margin:0 auto;
    text-align:center;
}

.statement .dim{
    color:var(--muted-2);
}

.chapter--ink .statement{
    color:var(--ink-text);
}

.statement + .statement{
    margin-top:6px;
}

.statement-support{
    font-size:19px;
    color:var(--muted);
    max-width:560px;
    margin:26px auto 0;
    text-align:center;
}

.chapter--ink .statement-support{
    color:var(--ink-muted);
}

/* ---------- METRIC BLOCK ---------- */

.metric-block{
    text-align:center;
    max-width:640px;
    margin:0 auto;
}

.metric-block .metric{
    font-family:"DM Sans",sans-serif;
    font-size:clamp(30px,4.6vw,58px);
    font-weight:800;
    line-height:1.15;
    letter-spacing:-0.01em;
    color:var(--accent);
    margin-bottom:18px;
}

.metric-block p{
    margin:0 auto;
}

/* ==================================================
   PASTEL TINT SYSTEM

   Same mechanism as macbook-story.css: a modifier class alongside a
   card component (e.g. class="info-card tint-cyan") swaps that
   card's background, border and small-accent colour. A card without
   a tint class renders exactly as before.

   Colour is assigned by narrative role: blue = foundational decision
   factors, cyan = battery & precision, green = a clear "this worked"
   verdict, cream = grounded facts/figures, peach = a trade-off or
   "think twice", lavender = a recurring recommendation, coral = the
   page's own addition — constructive, "here's what I'd improve"
   criticism, deliberately a shade warmer and redder than peach so
   the two read as distinct even side by side.
================================================== */

.tint-blue{ --tint-bg:#E7EEF3; --tint-border:rgba(78,123,153,.28); --tint-accent:#4E7B99; }
.tint-lavender{ --tint-bg:#EFEAF6; --tint-border:rgba(124,103,166,.28); --tint-accent:#7C67A6; }
.tint-green{ --tint-bg:#E9F1E6; --tint-border:rgba(92,138,85,.28); --tint-accent:#5C8A55; }
.tint-cream{ --tint-bg:#F6EFDD; --tint-border:rgba(180,145,58,.32); --tint-accent:#A9843A; }
.tint-peach{ --tint-bg:#F5E8DE; --tint-border:rgba(185,122,82,.3); --tint-accent:#B97A52; }
.tint-cyan{ --tint-bg:#E4F1EF; --tint-border:rgba(63,140,129,.28); --tint-accent:#3F8C81; }
.tint-coral{ --tint-bg:#FBE3DC; --tint-border:rgba(199,89,64,.3); --tint-accent:#A84B31; }

[data-theme="dark"] .tint-blue{ --tint-bg:rgba(110,160,190,.10); --tint-border:rgba(143,180,204,.3); --tint-accent:#8FB4CC; }
[data-theme="dark"] .tint-lavender{ --tint-bg:rgba(170,145,210,.10); --tint-border:rgba(179,155,214,.3); --tint-accent:#B39BD6; }
[data-theme="dark"] .tint-green{ --tint-bg:rgba(140,190,125,.10); --tint-border:rgba(143,191,128,.3); --tint-accent:#8FBF80; }
[data-theme="dark"] .tint-cream{ --tint-bg:rgba(215,180,100,.10); --tint-border:rgba(216,185,104,.32); --tint-accent:#D8B968; }
[data-theme="dark"] .tint-peach{ --tint-bg:rgba(210,150,110,.10); --tint-border:rgba(217,155,114,.32); --tint-accent:#D99B72; }
[data-theme="dark"] .tint-cyan{ --tint-bg:rgba(100,190,175,.10); --tint-border:rgba(111,194,178,.32); --tint-accent:#6FC2B2; }
[data-theme="dark"] .tint-coral{ --tint-bg:rgba(214,110,80,.10); --tint-border:rgba(224,124,96,.32); --tint-accent:#DD8A6C; }

/* Tinted cards get a slightly heavier top edge in their accent colour
   — a small editorial "stripe" device. Untinted cards are untouched. */
.info-card[class*="tint-"],
.decision-card[class*="tint-"],
.duo-card[class*="tint-"]{
    border-top:3px solid var(--tint-accent);
}

/* ==================================================
   CARD GRIDS
================================================== */

.card-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
    margin-top:8px;
}

.card-grid--2{
    grid-template-columns:repeat(2,1fr);
}

.card-grid--6{
    grid-template-columns:repeat(3,1fr);
}

.info-card{
    background:var(--tint-bg, var(--surface));
    border:1px solid var(--tint-border, var(--border));
    border-radius:var(--radius-md);
    padding:26px 24px;
}

.info-card .card-label{
    text-transform:uppercase;
    letter-spacing:2px;
    font-size:11px;
    font-weight:700;
    color:var(--tint-accent, var(--muted-2));
    margin-bottom:10px;
}

.info-card .card-title{
    font-family:"DM Sans",sans-serif;
    font-size:20px;
    font-weight:700;
    margin-bottom:10px;
}

.info-card p{
    font-size:15.5px;
    color:var(--story-text);
    line-height:1.7;
    max-width:none;
}

.info-card p + p{
    margin-top:12px;
}

/* decision factors — small, dense, six-up */
.decision-card{
    background:var(--tint-bg, var(--surface));
    border:1px solid var(--tint-border, var(--border));
    border-radius:var(--radius-sm);
    padding:20px 18px;
    text-align:center;
}

.decision-card .card-title{
    font-family:"DM Sans",sans-serif;
    font-size:14px;
    font-weight:700;
    letter-spacing:.5px;
    text-transform:uppercase;
    color:var(--tint-accent, var(--text));
}

/* ---------- TWO-SIDED COMPARISON ---------- */

.duo{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
    margin-top:8px;
}

.duo-card{
    border-radius:var(--radius-md);
    padding:36px 30px;
    border:1px solid var(--tint-border, var(--border));
    background:var(--tint-bg, var(--surface));
}

.duo-card .duo-label{
    font-family:"DM Sans",sans-serif;
    font-size:clamp(22px,3vw,34px);
    font-weight:800;
    margin-bottom:14px;
    color:var(--tint-accent, var(--text));
}

.duo-card p{
    font-size:16px;
    color:var(--story-text);
    max-width:none;
}

/* ---------- FACT LIST (device/ownership key-value rows) ---------- */

.fact-list{
    margin-top:16px;
}

.fact-row{
    display:grid;
    grid-template-columns:130px 1fr;
    gap:14px;
    padding:12px 0;
    border-top:1px solid var(--tint-border, var(--border));
}

.fact-row:first-of-type{
    border-top:none;
}

.fact-row .k{
    font-size:11px;
    font-weight:700;
    letter-spacing:1px;
    text-transform:uppercase;
    color:var(--muted-2);
    padding-top:2px;
}

.fact-row .v{
    font-size:15px;
    font-weight:700;
    color:var(--story-text);
    line-height:1.6;
}

/* ---------- ICON BADGE (new — small circular icon marker used to
   lead a named verdict card: Ownership Snapshot, Battery Verdict,
   Camera Philosophy, etc. Same visual language as the MacBook page's
   headphone-jack "port-mark" — a bordered circle holding a simple
   line icon in the card's tint accent colour — generalised so any
   card can use it, not just hardware-detail ones. ) ---------- */

.card-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:36px;
    height:36px;
    border-radius:50%;
    border:1.5px solid var(--tint-accent, var(--accent));
    color:var(--tint-accent, var(--accent));
    margin-bottom:14px;
}

.card-icon svg{
    width:16px;
    height:16px;
    stroke:currentColor;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
    fill:none;
}

.card-icon svg.filled{
    fill:currentColor;
    stroke:none;
}

.card-icon-text{
    font-family:"DM Sans",sans-serif;
    font-weight:800;
    font-size:15px;
}

/* ---------- SPLIT FEATURE (new — image/text pairing used for detail
   and close-up shots throughout this piece; same rounded-corner,
   shadowed image treatment as .review-hero-image, just contained to
   half the row instead of full width) ---------- */

.split-feature{
    display:grid;
    grid-template-columns:0.85fr 1.15fr;
    gap:44px;
    align-items:center;
    margin-top:52px;
}

.split-feature img{
    border-radius:var(--radius-lg);
    box-shadow:0 20px 50px rgba(0,0,0,.16);
}

.split-feature .split-text p{
    max-width:none;
}

.split-feature.reverse{
    grid-template-columns:1.15fr 0.85fr;
}

.split-feature.reverse .split-image{
    order:2;
}

.split-feature.reverse .split-text{
    order:1;
}

/* ---------- FACTOR GRID (spec chips inside a chapter) ---------- */

.factor-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:14px;
    margin:22px 0 4px;
}

.factor-chip{
    background:var(--bg);
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    padding:14px 12px;
    text-align:center;
    font-size:12.5px;
    font-weight:700;
    letter-spacing:.4px;
    color:var(--muted);
}

/* ---------- RECOMMENDATION CALLOUT ---------- */

.callout{
    background:var(--ink);
    color:var(--ink-text);
    border-radius:var(--radius-lg);
    padding:44px 40px;
    text-align:left;
    margin-top:36px;
}

.callout .card-label{
    text-transform:uppercase;
    letter-spacing:2px;
    font-size:11px;
    font-weight:700;
    color:var(--ink-muted);
    margin-bottom:14px;
}

.callout .verdict{
    font-family:"DM Sans",sans-serif;
    font-size:clamp(24px,3.6vw,40px);
    font-weight:800;
    line-height:1.2;
    color:var(--ink-text);
}

/* ==================================================
   PULL QUOTE — FEATURE TREATMENT

   The one explicitly "striking" highlight the brief calls for. It
   reuses the pastel tint system (apply e.g. class="feature-quote
   tint-cyan") so its panel colour always matches whichever chapter
   it sits inside, rather than introducing a one-off palette.
================================================== */

.feature-quote{
    position:relative;
    width:min(760px,92%);
    margin:48px auto 0;
    text-align:center;
    padding:64px 32px 52px;
    background:var(--tint-bg, var(--surface));
    border:1px solid var(--tint-border, var(--border));
    border-radius:var(--radius-lg);
    overflow:hidden;
}

.feature-quote::before{
    content:"\201C";
    position:absolute;
    top:-6px;
    left:50%;
    transform:translateX(-50%);
    font-family:"DM Sans",sans-serif;
    font-weight:800;
    font-size:160px;
    line-height:1;
    color:var(--tint-accent, var(--accent));
    opacity:.16;
    pointer-events:none;
}

.feature-quote p{
    position:relative;
    z-index:1;
    font-family:"DM Sans",sans-serif;
    font-weight:800;
    font-size:clamp(26px,4vw,44px);
    line-height:1.28;
    letter-spacing:-0.01em;
    color:var(--text);
    max-width:none;
}

.feature-quote .quote-rule{
    position:relative;
    z-index:1;
    width:56px;
    height:3px;
    background:var(--tint-accent, var(--accent));
    border-radius:2px;
    margin:28px auto 0;
}

/* ==================================================
   CONSUMERISM SECTION — the emotional centre

   A deliberately distinct treatment from the rest of the page: a
   warm, constant (theme-independent) gradient rather than the
   surface tokens, larger type, and a faint concentric-ring
   illustration nodding at "the cycle" the opening chapter names.
================================================== */

.chapter--consumerism{
    position:relative;
    width:100%;
    margin:0;
    padding:150px 0;
    background:linear-gradient(135deg, var(--consumer-bg-1) 0%, var(--consumer-bg-2) 100%);
    color:var(--consumer-text);
    overflow:hidden;
}

.chapter--consumerism .wrap--narrow{
    position:relative;
    z-index:1;
}

.chapter--consumerism .chapter-kicker .num{
    color:var(--consumer-accent);
}

.chapter--consumerism .chapter-kicker .label{
    color:var(--consumer-muted);
}

.chapter--consumerism h2{
    color:var(--consumer-text);
    font-size:clamp(32px,5vw,62px);
    max-width:820px;
}

.chapter--consumerism p{
    color:var(--consumer-muted);
    max-width:620px;
    margin-top:20px;
    font-size:18px;
    line-height:1.85;
}

.chapter--consumerism p + p{
    margin-top:18px;
}

.consumer-lead-in{
    font-size:13px;
    text-transform:uppercase;
    letter-spacing:2px;
    font-weight:700;
    color:var(--consumer-accent) !important;
    margin-top:48px !important;
    margin-bottom:0;
}

.consumer-quote{
    font-family:"DM Sans",sans-serif;
    font-weight:800;
    font-size:clamp(24px,3.4vw,36px);
    line-height:1.32;
    color:var(--consumer-text) !important;
    max-width:640px;
    margin-top:14px !important;
    letter-spacing:-0.01em;
}

.consumer-quote--large{
    font-size:clamp(30px,4.6vw,50px);
    max-width:760px;
}

.consumer-illustration{
    position:absolute;
    top:50%;
    right:-140px;
    transform:translateY(-50%);
    width:560px;
    height:560px;
    pointer-events:none;
    z-index:0;
}

.consumer-illustration circle{
    fill:none;
    stroke:var(--consumer-accent);
    stroke-width:1;
    opacity:.4;
}

/* ==================================================
   SOURCE TAGS
================================================== */

.source-tag{
    display:inline-block;
    font-size:10.5px;
    font-weight:700;
    letter-spacing:1px;
    text-transform:uppercase;
    padding:4px 10px;
    border-radius:999px;
    margin-bottom:16px;
}

.source-tag--experience{
    background:rgba(91,114,133,.14);
    color:var(--accent);
}

.source-tag--spec{
    border:1px solid var(--border);
    color:var(--muted-2);
}

.source-tag--external{
    border:1px dashed var(--border);
    color:var(--muted-2);
}

/* ==================================================
   BUYING DECISION
================================================== */

.decision-triad{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
    margin-top:8px;
}

.decision-triad .info-card ul{
    list-style:none;
    margin-top:6px;
}

.decision-triad .info-card li{
    font-size:15.5px;
    color:var(--story-text);
    padding:8px 0;
    border-top:1px solid var(--tint-border, var(--border));
}

.decision-triad .info-card li:first-of-type{
    border-top:none;
}

/* ==================================================
   SCORECARD
================================================== */

.scorecard{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:1px;
    background:var(--border);
    border:1px solid var(--border);
    border-radius:var(--radius-md);
    overflow:hidden;
    margin-top:8px;
}

.score-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    background:var(--surface);
    padding:20px 24px;
}

.score-row--overall{
    grid-column:1 / -1;
    background:var(--ink);
}

.score-row .score-label{
    font-size:14.5px;
    font-weight:700;
    color:var(--text);
}

/* Comes after the rule above so it wins the cascade at equal
   specificity — otherwise the overall row's label renders in the
   page's dark ink text colour against its own near-black background. */
.score-row--overall .score-label{
    color:var(--ink-text);
}

.stars{
    position:relative;
    display:inline-block;
    font-size:18px;
    line-height:1;
    letter-spacing:3px;
    white-space:nowrap;
    color:var(--muted-2);
}

.stars .stars-fill{
    position:absolute;
    top:0;
    left:0;
    overflow:hidden;
    white-space:nowrap;
    color:var(--accent);
}

.score-row--overall .stars{
    color:var(--ink-muted);
}

.score-row--overall .stars .stars-fill{
    color:var(--ink-text);
}

/* ==================================================
   SOURCES & METHODOLOGY
================================================== */

.sources-block{
    margin-top:60px;
    padding-top:36px;
    border-top:1px solid var(--border);
}

.sources-block h4{
    font-size:13px;
    text-transform:uppercase;
    letter-spacing:2px;
    color:var(--muted-2);
    margin-bottom:16px;
}

.sources-block ol{
    list-style:none;
    counter-reset:src;
}

.sources-block li{
    counter-increment:src;
    font-size:13.5px;
    color:var(--muted-2);
    line-height:1.7;
    padding-left:22px;
    position:relative;
    margin-bottom:8px;
}

.sources-block li::before{
    content:counter(src) ".";
    position:absolute;
    left:0;
    font-weight:700;
}

.sources-block a{
    color:var(--muted);
    text-decoration:underline;
    text-underline-offset:3px;
}

.sources-block a:hover{
    color:var(--text);
}

/* ==================================================
   FINAL VERDICT
================================================== */

.verdict-final{
    text-align:center;
}

.verdict-final .statement{
    margin:0 auto;
}

.verdict-tagline{
    font-family:"DM Sans",sans-serif;
    font-weight:700;
    font-size:22px;
    color:var(--ink-text);
    text-align:center;
    margin:26px auto 0;
}

/* ==================================================
   SCROLL REVEAL (mirrors style.css's .hidden/.show system;
   Script.js adds .hidden to every <section> automatically —
   no JS changes needed for this page to use it)
================================================== */

.hidden{
    opacity:0;
    transform:translateY(28px);
    filter:blur(6px);
    transition:opacity .8s var(--ease-out-apple),
               transform .8s var(--ease-out-apple),
               filter .8s var(--ease-out-apple);
}

.show{
    opacity:1;
    transform:translateY(0);
    filter:blur(0);
}

/* Card-level stagger, driven purely by the parent section's own
   .show class — no extra JS required beyond the existing observer. */
.card-grid > *,
.duo > *,
.decision-triad > *{
    opacity:0;
    transform:translateY(16px);
    transition:opacity .6s var(--ease-out-apple), transform .6s var(--ease-out-apple);
}

.show .card-grid > *,
.show .duo > *,
.show .decision-triad > *{
    opacity:1;
    transform:translateY(0);
}

.card-grid > *:nth-child(2),
.duo > *:nth-child(2),
.decision-triad > *:nth-child(2){ transition-delay:.08s; }

.card-grid > *:nth-child(3),
.decision-triad > *:nth-child(3){ transition-delay:.16s; }

/* Spec strip lives in the hero, above the fold — it's visible on
   load rather than gated behind scroll-triggered .show, since the
   header isn't part of Script.js's section-based reveal system. */
.spec-strip > *{
    opacity:0;
    animation:specIn .7s var(--ease-out-apple) forwards;
}

.spec-strip > *:nth-child(1){ animation-delay:.05s; }
.spec-strip > *:nth-child(2){ animation-delay:.12s; }
.spec-strip > *:nth-child(3){ animation-delay:.19s; }
.spec-strip > *:nth-child(4){ animation-delay:.26s; }
.spec-strip > *:nth-child(5){ animation-delay:.33s; }
.spec-strip > *:nth-child(6){ animation-delay:.4s; }
.spec-strip > *:nth-child(7){ animation-delay:.47s; }

@keyframes specIn{
    from{ opacity:0; transform:translateY(12px); }
    to{ opacity:1; transform:translateY(0); }
}

@media (prefers-reduced-motion:reduce){

    .hidden,
    .card-grid > *,
    .duo > *,
    .decision-triad > *{
        transition:none !important;
    }

    .hidden{
        opacity:1;
        transform:none;
        filter:none;
    }

    .card-grid > *,
    .duo > *,
    .decision-triad > *{
        opacity:1;
        transform:none;
    }

    .spec-strip > *{
        animation:none !important;
        opacity:1;
        transform:none;
    }

}

/* ==================================================
   FOOTER + THEME TOGGLE
   (identical markup/behaviour to the rest of the site —
   duplicated here because this page has its own stylesheet)
================================================== */

footer{
    border-top:1px solid var(--border);
    text-align:center;
    padding:40px;
    color:var(--muted-2);
    font-size:14px;
}

.theme-toggle{
    position:fixed;
    bottom:24px;
    right:24px;
    z-index:1000;
    width:46px;
    height:46px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--surface);
    border:1px solid var(--border);
    color:var(--text);
    box-shadow:0 8px 24px rgba(0,0,0,.14);
    cursor:pointer;
    transition:
        transform .3s cubic-bezier(.16,1,.3,1),
        background-color .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}

.theme-toggle:hover{
    transform:translateY(-3px);
    box-shadow:0 12px 30px rgba(0,0,0,.18);
}

.theme-toggle:focus-visible{
    outline:2px solid var(--text);
    outline-offset:3px;
}

.theme-toggle-icon{
    width:20px;
    height:20px;
}

.theme-toggle-icon--sun{
    display:none;
}

[data-theme="dark"] .theme-toggle-icon--sun{
    display:block;
}

[data-theme="dark"] .theme-toggle-icon--moon{
    display:none;
}

/* ==================================================
   RESPONSIVE
================================================== */

@media (max-width:1024px){

    .card-grid,
    .card-grid--6{
        grid-template-columns:repeat(2,1fr);
    }

    .factor-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .spec-strip{
        grid-template-columns:repeat(4,1fr);
    }

    .spec-strip > *:nth-child(5){
        grid-column:span 1;
    }

    .split-feature,
    .split-feature.reverse{
        grid-template-columns:1fr;
        gap:32px;
    }

    .split-feature .split-image,
    .split-feature.reverse .split-image{
        order:1;
    }

    .split-feature .split-text,
    .split-feature.reverse .split-text{
        order:2;
    }

    .consumer-illustration{
        width:420px;
        height:420px;
        right:-160px;
        opacity:.7;
    }

}

@media (max-width:768px){

    .chapter{
        padding:68px 0;
    }

    .chapter--ink{
        padding:84px 0;
    }

    .chapter--consumerism{
        padding:110px 0;
    }

    .chapter p,
    .chapter-lede{
        font-size:16.5px;
    }

    .duo,
    .decision-triad,
    .card-grid,
    .card-grid--2,
    .card-grid--6,
    .scorecard{
        grid-template-columns:1fr;
    }

    .spec-strip{
        grid-template-columns:repeat(3,1fr);
    }

    .feature-quote{
        padding:52px 24px 40px;
    }

    .feature-quote::before{
        font-size:110px;
    }

    .consumer-illustration{
        width:320px;
        height:320px;
        right:-130px;
    }

}

@media (max-width:600px){

    .review-hero .back-link{
        margin-bottom:36px;
    }

    .chapter{
        padding:54px 0;
    }

    .chapter--ink{
        padding:68px 0;
    }

    .chapter--consumerism{
        padding:90px 0;
    }

    .spec-strip{
        grid-template-columns:repeat(2,1fr);
    }

    .callout{
        padding:32px 24px;
    }

    .consumer-illustration{
        display:none;
    }

    .theme-toggle{
        bottom:18px;
        right:18px;
        width:42px;
        height:42px;
    }

    .theme-toggle-icon{
        width:18px;
        height:18px;
    }

}