/* ==================================================
   THE MACHINE THAT GREW WITH MY WORK
   A dedicated stylesheet for one long-form review page.

   Same architecture as featured-story.css: this page carries its
   own copy of the site's colour tokens rather than linking style.css,
   plus a small component library for the editorial/"product story"
   treatment this piece needs that the simpler essay template doesn't.
   Keep the shared tokens in sync with style.css / featured-story.css
   if either changes.
================================================== */

*{
    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 */
    --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;

    --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:640px;
    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;
    letter-spacing:-0.01em;
    color:var(--accent);
    margin-bottom:18px;
}

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

/* ---------- PULL QUOTE ---------- */

.pull-quote{
    border-left:3px solid var(--accent);
    padding-left:28px;
    max-width:680px;
    margin:44px 0;
}

.pull-quote p{
    font-family:"DM Sans",sans-serif;
    font-size:clamp(22px,2.6vw,30px);
    font-weight:700;
    line-height:1.3;
    color:var(--text);
    letter-spacing:-0.01em;
}

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

   A small set of restrained, editorial pastel identities — applied
   as a modifier class alongside a card component (e.g. class=
   "info-card tint-cyan") to give that card a distinct background,
   border and small-accent colour. Every card component below reads
   these through var(--tint-x, fallback), so a card without a tint
   class renders exactly as before — nothing is required to opt in.

   Colour is assigned by narrative role, not per-card randomness:
   blue = foundational/decision criteria, cyan = battery & Resolve
   (tools/precision), green = a clear "this worked" verdict, peach =
   a trade-off or "think twice", cream = a good-but-caveated verdict,
   lavender = the page's recurring "more RAM" recommendation, pink =
   the one small delightful hardware detail.
================================================== */

.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-pink{ --tint-bg:#F6E7EA; --tint-border:rgba(176,106,129,.28); --tint-accent:#B06A81; }
.tint-cyan{ --tint-bg:#E4F1EF; --tint-border:rgba(63,140,129,.28); --tint-accent:#3F8C81; }

[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-pink{ --tint-bg:rgba(210,140,160,.10); --tint-border:rgba(212,146,168,.32); --tint-accent:#D492A8; }
[data-theme="dark"] .tint-cyan{ --tint-bg:rgba(100,190,175,.10); --tint-border:rgba(111,194,178,.32); --tint-accent:#6FC2B2; }

/* 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-"],
.workflow-card[class*="tint-"],
.detail-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;
}

/* 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;
}

/* ---------- WORKFLOW CARDS ---------- */

.workflow-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:20px;
    margin-top:8px;
}

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

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

.workflow-card .verdict{
    font-family:"DM Sans",sans-serif;
    font-size:clamp(20px,2.4vw,27px);
    font-weight:800;
    line-height:1.15;
    margin-bottom:20px;
}

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

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

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

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

.workflow-card--wide{
    grid-column:1 / -1;
}

/* Resolve sub-grid of small factors inside its (wide) workflow card */
.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;
    color:var(--ink-text);
}

/* ---------- HARDWARE DETAIL CARD ---------- */

.detail-card{
    display:grid;
    grid-template-columns:.9fr 1.1fr;
    gap:40px;
    align-items:center;
    background:var(--tint-bg, var(--surface));
    border:1px solid var(--tint-border, var(--border));
    border-radius:var(--radius-lg);
    padding:44px;
    margin-top:8px;
}

.detail-card .port-mark{
    width:64px;
    height:64px;
    border-radius:50%;
    border:2px solid var(--tint-accent, var(--accent));
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:22px;
}

.detail-card .port-mark svg{
    width:26px;
    height:26px;
    stroke:var(--tint-accent, var(--accent));
}

.detail-card .card-title{
    font-family:"DM Sans",sans-serif;
    font-size:clamp(22px,2.6vw,30px);
    font-weight:800;
    margin-bottom:6px;
}

.detail-card .card-sub{
    font-size:13px;
    letter-spacing:1.5px;
    text-transform:uppercase;
    color:var(--muted-2);
    margin-bottom:18px;
}

.detail-card p{
    max-width:none;
}

/* ==================================================
   QUALITATIVE COMPARISON
================================================== */

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

.qual-row{
    display:grid;
    grid-template-columns:1fr auto;
    align-items:center;
    gap:16px;
    background:var(--surface);
    padding:18px 22px;
}

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

.qual-badge{
    display:inline-flex;
    align-items:center;
    padding:7px 16px;
    border-radius:999px;
    font-size:11.5px;
    font-weight:700;
    letter-spacing:.5px;
    text-transform:uppercase;
    white-space:nowrap;
}

.qual-badge--strong{
    background:#E9F1E6;
    color:#5C8A55;
}

[data-theme="dark"] .qual-badge--strong{
    background:rgba(140,190,125,.16);
    color:#8FBF80;
}

.qual-badge--weak{
    background:#F5E8DE;
    border:1px solid rgba(185,122,82,.3);
    color:#B97A52;
}

[data-theme="dark"] .qual-badge--weak{
    background:rgba(210,150,110,.14);
    border-color:rgba(217,155,114,.3);
    color:#D99B72;
}

.qual-note{
    font-size:13.5px;
    color:var(--muted-2);
    margin-top:18px;
    max-width:640px;
}

/* ---------- BAR CHART (verified figures only) ---------- */

.bar-chart{
    margin-top:8px;
}

.bar-row{
    margin-bottom:24px;
}

.bar-row .bar-labels{
    display:flex;
    justify-content:space-between;
    font-size:13.5px;
    font-weight:700;
    color:var(--text);
    margin-bottom:8px;
}

.bar-row .bar-labels span:last-child{
    color:var(--muted-2);
    font-weight:500;
}

.bar-track{
    background:var(--surface-2);
    border:1px solid var(--border);
    border-radius:999px;
    height:14px;
    overflow:hidden;
}

.bar-fill{
    height:100%;
    width:0;
    border-radius:999px;
    background:var(--accent);
    transition:width 1.1s var(--ease-out-apple);
}

.chart-caption{
    font-size:12.5px;
    color:var(--muted-2);
    margin-top:6px;
}

/* ==================================================
   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--overall .score-label{
    color:var(--ink-text);
}

.score-row .score-label{
    font-size:14.5px;
    font-weight:700;
    color:var(--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 > *,
.workflow-grid > *,
.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 .workflow-grid > *,
.show .decision-triad > *{
    opacity:1;
    transform:translateY(0);
}

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

.card-grid > *:nth-child(3),
.workflow-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); }
}

.show .bar-fill{
    /* width set inline per bar via style="--target:XX%" */
    width:var(--target,0);
}

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

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

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

    .card-grid > *,
    .duo > *,
    .workflow-grid > *,
    .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);
    }

    .workflow-grid{
        grid-template-columns:1fr;
    }

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

    .detail-card{
        grid-template-columns:1fr;
    }

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

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

}

@media (max-width:768px){

    .chapter{
        padding:68px 0;
    }

    .chapter--ink{
        padding:84px 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);
    }

    .pull-quote p{
        font-size:22px;
    }

    .detail-card{
        padding:30px 26px;
    }

}

@media (max-width:600px){

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

    .chapter{
        padding:54px 0;
    }

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

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

    .callout{
        padding:32px 24px;
    }

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

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

}