/* ════════════════════════════════════════════════════════════════════
   HILLAND CONTENT — rich editorial templates (Guide · Comparison · Index)
   Ported from the Phase 3 content-site formats (anchor_guide / listicle /
   data_piece), scoped under .cpage so they never collide with the
   storefront chrome. Rendered INSIDE the storefront shell, with live
   commerce-adjacency (.sku-embed) woven in — the Shopify advantage.
   ════════════════════════════════════════════════════════════════════ */

/* reading-progress level-line */
.cpage-progress{position:fixed;top:0;left:0;height:3px;width:0%;background:var(--accent);z-index:70;transition:width 80ms linear;}

.cpage{background:var(--bg-light);position:relative;}
.cpage .wrap{max-width:var(--container);margin:0 auto;padding:0 var(--s5);}

/* ── article header (dark authority band) ── */
.cpage .guide-head{background:var(--bg);color:var(--text);padding:var(--s8) 0 var(--s8);}
.cpage .guide-head.tall{padding-bottom:var(--s9);}
.cpage .breadcrumb{display:flex;align-items:center;gap:0.6rem;flex-wrap:wrap;font-size:var(--fs-small);color:var(--text-faint);margin-bottom:var(--s6);padding:0;}
.cpage .breadcrumb a{color:var(--text-faint);text-decoration:none;cursor:pointer;}
.cpage .breadcrumb a:hover{color:var(--text);}
.cpage .breadcrumb .sep{opacity:0.4;color:var(--text-faint);}
.cpage .breadcrumb [aria-current]{color:var(--text);}
.cpage .guide-pillar{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-label);font-weight:700;letter-spacing:var(--ls-pill);text-transform:uppercase;color:var(--text-faint);border:1px solid var(--edge-dark);padding:0.4rem 0.85rem;border-radius:var(--r-pill);margin-bottom:var(--s5);}
.cpage .guide-pillar .d{width:7px;height:7px;border-radius:50%;background:var(--edge,var(--accent));}
.cpage .guide-title{font-family:var(--font-display);font-size:clamp(2rem,5vw,3.4rem);font-weight:800;line-height:1.06;letter-spacing:-0.025em;max-width:20ch;margin-bottom:var(--s5);color:var(--text);}
.cpage .guide-dek{font-size:clamp(1.1rem,2.2vw,1.35rem);font-weight:400;line-height:1.6;color:var(--text-faint);max-width:58ch;margin-bottom:var(--s7);}
.cpage .guide-dek b{color:var(--text);font-weight:600;}

/* byline */
.cpage .byline{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap;}
.cpage .avatars{display:flex;}
.cpage .avatar{width:48px;height:48px;border-radius:50%;background:var(--charcoal-raised);border:2px solid var(--accent);flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--accent);font-weight:700;font-size:1.05rem;font-family:var(--font-display);overflow:hidden;}
.cpage .avatars .avatar + .avatar{margin-left:-14px;}
.cpage .avatar--photo{overflow:hidden;padding:0;}
.cpage .avatar--photo img{width:100%;height:100%;object-fit:cover;display:block;}
.cpage .byline-text{font-size:0.92rem;line-height:1.5;}
.cpage .byline-text .by-name{font-weight:700;color:var(--text);}
.cpage .byline-text .by-role{color:var(--text-faint);}
.cpage .byline-sep{width:1px;height:34px;background:var(--border);}
.cpage .byline-meta{font-family:var(--font-mono);font-size:0.74rem;color:var(--text-faint);line-height:1.6;letter-spacing:0.02em;}
.cpage .byline-meta b{color:var(--accent);font-weight:400;}

/* hero figure (photo zone) */
.cpage .guide-hero{background:var(--bg);padding-bottom:var(--s8);}
.cpage .hero-figure{margin:0;}
.cpage .hero-photo{aspect-ratio:21/9;border-radius:var(--r-lg);border:1px solid var(--border);border-top:3px solid var(--edge,var(--accent));overflow:hidden;background:repeating-linear-gradient(135deg,#34302c,#34302c 13px,#2f2b27 13px,#2f2b27 26px);display:flex;align-items:center;justify-content:center;position:relative;}
.cpage .hero-photo .ph{font-family:var(--font-mono);font-size:0.74rem;color:var(--text-faint);letter-spacing:0.04em;padding:0.4rem 0.9rem;background:rgba(42,39,36,0.7);border:1px solid var(--border);border-radius:var(--r-pill);text-align:center;}
.cpage .hero-cap{display:flex;align-items:baseline;gap:var(--s3);margin-top:var(--s4);font-family:var(--font-mono);font-size:0.74rem;color:var(--text-muted);}
.cpage .hero-cap::before{content:"";height:2px;width:22px;background:var(--accent);border-radius:1px;align-self:center;flex-shrink:0;}

/* ── body grid: TOC + article ── */
.cpage .guide-body{padding:var(--s9) 0 var(--s8);}
.cpage .guide-grid{display:grid;grid-template-columns:230px minmax(0,var(--measure)) 1fr;gap:var(--s7);align-items:start;}
.cpage .toc{position:sticky;top:96px;align-self:start;}
.cpage .toc-label{display:flex;align-items:center;gap:0.6rem;font-size:var(--fs-label);font-weight:700;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-muted);margin-bottom:var(--s4);}
.cpage .toc-label::before{content:"";height:2px;width:18px;background:var(--accent);border-radius:1px;}
.cpage .toc ol{list-style:none;counter-reset:toc;display:flex;flex-direction:column;gap:2px;border-left:1px solid var(--border-light);}
.cpage .toc a{counter-increment:toc;display:block;padding:0.4rem 0 0.4rem var(--s4);margin-left:-1px;border-left:2px solid transparent;font-size:0.86rem;line-height:1.4;color:var(--text-muted);text-decoration:none;cursor:pointer;transition:color var(--dur) var(--ease),border-color var(--dur) var(--ease);}
.cpage .toc a::before{content:counter(toc,decimal-leading-zero);font-family:var(--font-mono);font-size:0.72rem;color:var(--text-faint);margin-right:0.5rem;}
.cpage .toc a:hover{color:var(--text-strong);}
.cpage .toc a.active{color:var(--text-strong);font-weight:600;border-left-color:var(--accent);}
.cpage .toc a.active::before{color:var(--accent);}

/* ── prose ── */
.cpage .article{max-width:var(--measure);}
.cpage .article > *{margin-bottom:1.4em;}
.cpage .lede{font-size:1.28rem;line-height:1.65;color:var(--text-strong);font-weight:400;}
.cpage .lede b{font-weight:700;}
.cpage .article p{font-size:1.12rem;line-height:1.78;color:var(--text-strong);}
.cpage .article h2{font-family:var(--font-display);font-size:var(--fs-h2);font-weight:800;line-height:1.15;letter-spacing:-0.015em;color:var(--text-strong);margin-top:2.4em;padding-top:var(--s5);border-top:1px solid var(--border-light);scroll-margin-top:96px;}
.cpage .article h2 .h2-idx{font-family:var(--font-mono);font-size:0.8rem;color:var(--accent);font-weight:400;display:block;margin-bottom:0.5rem;letter-spacing:0.06em;}
.cpage .article h3{font-family:var(--font-display);font-size:var(--fs-h3);font-weight:700;line-height:1.25;color:var(--text-strong);margin-top:1.8em;scroll-margin-top:96px;}
.cpage .article ul,.cpage .article ol{padding-left:1.3em;}
.cpage .article li{font-size:1.12rem;line-height:1.7;color:var(--text-strong);margin-bottom:0.6em;padding-left:0.3em;}
.cpage .article ul li::marker{color:var(--accent);}
.cpage .article ol li::marker{color:var(--accent);font-family:var(--font-mono);font-weight:700;font-size:0.9em;}
.cpage .article strong{font-weight:700;}
.cpage .article a:not(.aspill):not(.btn){color:var(--text-strong);text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:3px;cursor:pointer;}

/* inline AS pill */
.cpage .aspill{display:inline-flex;align-items:center;gap:6px;background:var(--charcoal);color:var(--offwhite);font-size:0.72rem;font-weight:700;letter-spacing:0.06em;padding:0.15rem 0.6rem;border-radius:var(--r-pill);white-space:nowrap;text-decoration:none;vertical-align:middle;line-height:1.6;}
.cpage .aspill .d{width:5px;height:5px;border-radius:50%;background:var(--accent);}

/* short-answer */
.cpage .shortanswer{background:var(--charcoal);color:var(--text);border-radius:var(--r-lg);padding:var(--s6);border-left:4px solid var(--accent);}
.cpage .shortanswer .sa-label{display:flex;align-items:center;gap:0.6rem;font-size:var(--fs-label);font-weight:700;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-faint);margin-bottom:var(--s3);}
.cpage .shortanswer p{font-size:1.12rem !important;line-height:1.7;color:var(--text) !important;margin:0;}
.cpage .shortanswer b{color:var(--accent);}

/* callout */
.cpage .callout{background:var(--offwhite-shade);border:1px solid var(--border-light);border-left:3px solid var(--accent);border-radius:var(--r-md);padding:var(--s5);}
.cpage .callout .co-label{font-family:var(--font-mono);font-size:0.7rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-muted);margin-bottom:var(--s3);}
.cpage .callout .co-label::before{content:"// ";color:var(--accent);}
.cpage .callout p,.cpage .callout li{font-size:1rem !important;color:var(--text-strong);}
.cpage .callout p:last-child{margin-bottom:0;}

/* key stat (number as hero) */
.cpage .keystat{display:flex;align-items:center;gap:var(--s4);padding:var(--s5) 0;border-top:2px solid var(--accent);border-bottom:1px solid var(--border-light);}
.cpage .keystat .n{font-size:clamp(2.6rem,7vw,3.8rem);font-weight:800;letter-spacing:-0.03em;line-height:0.9;color:var(--text-strong);font-family:var(--font-display);}
.cpage .keystat .ks-text{font-size:1rem;line-height:1.5;color:var(--text-muted);}
.cpage .keystat .ks-text b{color:var(--text-strong);}

/* pull quote */
.cpage blockquote.pull{border:none;padding:var(--s2) 0 var(--s2) var(--s5);border-left:3px solid var(--accent);margin-left:0;}
.cpage blockquote.pull p{font-size:1.3rem !important;line-height:1.5;font-weight:500;color:var(--text-strong);font-style:normal;}
.cpage blockquote.pull cite{display:block;margin-top:var(--s3);font-style:normal;font-family:var(--font-mono);font-size:0.78rem;color:var(--text-muted);}
.cpage blockquote.pull cite::before{content:"– ";color:var(--accent);}

/* inline figure */
.cpage figure.inline{margin:0;}
.cpage figure.inline .fz{aspect-ratio:16/9;border-radius:var(--r-md);border:1px solid var(--border-light);overflow:hidden;background:repeating-linear-gradient(135deg,#fbf9f6,#fbf9f6 12px,#f1ede7 12px,#f1ede7 24px);display:flex;align-items:center;justify-content:center;}
.cpage figure.inline .fz .ph{font-family:var(--font-mono);font-size:0.7rem;color:var(--text-muted);letter-spacing:0.03em;padding:0.35rem 0.8rem;background:rgba(245,242,238,0.9);border:1px solid var(--border-light);border-radius:var(--r-pill);text-align:center;}
.cpage figure.inline figcaption{margin-top:var(--s3);font-family:var(--font-mono);font-size:0.74rem;color:var(--text-muted);line-height:1.5;display:flex;gap:0.5rem;}
.cpage figure.inline figcaption .fnum{color:var(--accent);flex-shrink:0;}

/* zebra table */
.cpage .table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--border-light);border-radius:var(--r-md);}
.cpage table.zebra{width:100%;border-collapse:collapse;font-size:0.95rem;min-width:520px;}
.cpage table.zebra caption{caption-side:top;text-align:left;font-family:var(--font-mono);font-size:0.72rem;letter-spacing:0.04em;color:var(--text-muted);padding:var(--s4) var(--s4) var(--s3);}
.cpage table.zebra caption::before{content:"// ";color:var(--accent);}
.cpage table.zebra th,.cpage table.zebra td{text-align:left;padding:0.85rem var(--s4);vertical-align:top;line-height:1.45;}
.cpage table.zebra thead th{background:var(--charcoal);color:var(--offwhite);font-size:0.72rem;font-weight:700;letter-spacing:0.08em;text-transform:uppercase;}
.cpage table.zebra thead th.r,.cpage table.zebra td.r{text-align:right;}
.cpage table.zebra tbody tr:nth-child(even){background:var(--offwhite-shade);}
.cpage table.zebra tbody th{font-weight:700;color:var(--text-strong);}
.cpage table.zebra td{color:var(--text-muted);}
.cpage table.zebra td.mono,.cpage table.zebra th.mono{font-family:var(--font-mono);font-size:0.86rem;color:var(--text-strong);}
.cpage table.zebra td .yes{color:var(--text-strong);font-weight:700;}
.cpage table.zebra td .yes::before{content:"▲ ";color:var(--accent);}
.cpage table.zebra td .no{color:var(--text-faint);}
.cpage table.zebra td .no::before{content:"– ";}

/* updated line */
.cpage .updated{display:inline-flex;align-items:center;gap:0.6rem;font-family:var(--font-mono);font-size:0.76rem;color:var(--text-muted);padding:var(--s4) 0;}
.cpage .updated::before{content:"";height:2px;width:18px;background:var(--accent);border-radius:1px;}

/* ── article footer: author + related + continue ── */
.cpage .article-foot{border-top:1px solid var(--border-light);margin-top:var(--s8);padding-top:var(--s7);}
.cpage .article-foot.measure{max-width:var(--measure);margin-left:auto;margin-right:auto;}
.cpage .author-card{display:grid;grid-template-columns:auto 1fr;gap:var(--s5);background:#fff;border:1px solid var(--border-light);border-radius:var(--r-lg);padding:var(--s6);}
.cpage .author-card .a-photo{width:84px;height:84px;border-radius:var(--r-md);border:3px solid var(--accent);background:var(--charcoal);display:flex;align-items:center;justify-content:center;color:var(--accent);font-weight:700;font-size:1.6rem;font-family:var(--font-display);flex-shrink:0;overflow:hidden;box-sizing:border-box;}
.cpage .author-card .a-name{font-size:1.2rem;font-weight:800;color:var(--text-strong);}
.cpage .author-card .a-role{font-family:var(--font-mono);font-size:0.76rem;color:var(--text-muted);margin:0.2rem 0 var(--s3);}
.cpage .author-card .a-bio{font-size:0.96rem;line-height:1.6;color:var(--text-muted);}
.cpage .author-card .a-link{display:inline-block;margin-top:var(--s3);font-weight:700;font-size:0.9rem;color:var(--text-strong);text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:3px;cursor:pointer;}
.cpage .related-head{display:flex;align-items:center;gap:0.7rem;font-size:var(--fs-label);font-weight:700;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-muted);margin:var(--s8) 0 var(--s5);}
.cpage .related-head::before{content:"";height:2px;width:22px;background:var(--accent);border-radius:1px;}
.cpage .related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s5);}
.cpage .rcard{display:flex;flex-direction:column;gap:var(--s3);background:#fff;border:1px solid var(--border-light);border-left:3px solid var(--edge,var(--accent));border-radius:var(--r-md);padding:var(--s5);text-decoration:none;cursor:pointer;transition:box-shadow var(--dur) var(--ease),border-color var(--dur) var(--ease);}
.cpage .rcard:hover{box-shadow:var(--shadow-2);border-color:var(--accent);}
.cpage .rcard .rchip{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;font-size:var(--fs-label);font-weight:700;letter-spacing:var(--ls-pill);text-transform:uppercase;color:var(--text-strong);background:var(--bg-shade);padding:0.35rem 0.75rem;border-radius:var(--r-pill);}
.cpage .rcard .rchip .d{width:6px;height:6px;border-radius:50%;background:var(--edge,var(--accent));}
.cpage .rcard h4{font-size:1.02rem;font-weight:700;color:var(--text-strong);line-height:1.25;}
.cpage .rcard .r-meta{margin-top:auto;font-family:var(--font-mono);font-size:0.72rem;color:var(--text-muted);}
.cpage .continue{margin-top:var(--s8);background:var(--charcoal);color:var(--text);border-radius:var(--r-lg);padding:var(--s7);display:flex;align-items:center;justify-content:space-between;gap:var(--s5);flex-wrap:wrap;}
.cpage .continue .c-kicker{font-size:var(--fs-label);font-weight:700;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-faint);margin-bottom:var(--s3);display:flex;align-items:center;gap:0.6rem;}
.cpage .continue .c-kicker::before{content:"";height:2px;width:18px;background:var(--accent);border-radius:1px;}
.cpage .continue h3{font-family:var(--font-display);font-size:1.4rem;font-weight:800;color:var(--text);line-height:1.2;max-width:24ch;}
.cpage .continue .c-btn{background:var(--accent);color:var(--offwhite);font-weight:700;font-size:0.95rem;padding:0.85rem 1.5rem;border-radius:var(--r-pill);text-decoration:none;white-space:nowrap;border:none;cursor:pointer;transition:background var(--dur) var(--ease);}
.cpage .continue .c-btn:hover{background:var(--accent-hover);}
.cpage .compliance{padding-top:var(--s5);margin-top:var(--s7);border-top:1px solid var(--border-light);font-size:0.82rem;line-height:1.7;color:var(--text-muted);}
.cpage .compliance.measure{max-width:var(--measure);margin-left:auto;margin-right:auto;}
.cpage .compliance b{color:var(--text-strong);}

/* ── LISTICLE: methodology + entries ── */
.cpage .method{background:var(--charcoal-raised);border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
.cpage .method-in{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s5);padding:var(--s6) 0;}
.cpage .method .m{border-top:2px solid var(--accent);padding-top:var(--s3);}
.cpage .method .m .mn{font-size:1.9rem;font-weight:800;font-family:var(--font-display);color:var(--text);line-height:1;letter-spacing:-0.02em;}
.cpage .method .m .ml{font-size:0.82rem;color:var(--text-faint);line-height:1.45;margin-top:var(--s2);}
.cpage .method-note{padding-bottom:var(--s6);font-family:var(--font-mono);font-size:0.74rem;color:var(--text-faint);}
.cpage .method-note::before{content:"// ";color:var(--accent);}

.cpage .listicle{padding:var(--s9) 0 var(--s8);}
.cpage .l-wrap{max-width:var(--measure);margin:0 auto;}
.cpage .l-h2{max-width:var(--measure);margin:0 auto var(--s5);font-family:var(--font-display);font-size:var(--fs-h2);font-weight:800;line-height:1.15;letter-spacing:-0.015em;color:var(--text-strong);display:flex;align-items:center;gap:var(--s3);scroll-margin-top:96px;}
.cpage .l-h2::before{content:"";height:3px;width:28px;background:var(--accent);border-radius:1px;flex-shrink:0;}
.cpage .t-rank{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--accent);color:var(--offwhite);font-weight:700;font-size:0.85rem;font-family:var(--font-display);}
.cpage .t-pick{font-family:var(--font-mono);font-size:0.7rem;color:var(--accent);letter-spacing:0.04em;display:block;margin-top:2px;}
.cpage table.zebra td.cellrank{width:46px;}

.cpage .entries{max-width:var(--measure);margin:0 auto;display:flex;flex-direction:column;gap:var(--s8);}
.cpage .entry{scroll-margin-top:96px;}
.cpage .entry-head{display:flex;align-items:flex-start;gap:var(--s4);margin-bottom:var(--s5);}
.cpage .rank{flex-shrink:0;width:54px;height:54px;border-radius:50%;background:var(--accent);color:var(--offwhite);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.5rem;font-family:var(--font-display);}
.cpage .entry-titles{flex:1;}
.cpage .entry-bestfor{display:inline-flex;align-items:center;gap:7px;font-size:var(--fs-label);font-weight:700;letter-spacing:var(--ls-pill);text-transform:uppercase;color:var(--text-strong);background:var(--bg-shade);border:1px solid var(--border-light);padding:0.35rem 0.8rem;border-radius:var(--r-pill);margin-bottom:var(--s3);}
.cpage .entry-bestfor .d{width:7px;height:7px;border-radius:50%;background:var(--edge,var(--accent));}
.cpage .entry h3{font-family:var(--font-display);font-size:clamp(1.4rem,3vw,1.8rem);font-weight:800;letter-spacing:-0.02em;color:var(--text-strong);line-height:1.1;}
.cpage .entry .sub{font-family:var(--font-mono);font-size:0.8rem;color:var(--text-muted);margin-top:var(--s2);}
.cpage .entry-photo{aspect-ratio:16/9;border-radius:var(--r-md);border:1px solid var(--border-light);border-top:3px solid var(--edge,var(--accent));overflow:hidden;background:repeating-linear-gradient(135deg,#fbf9f6,#fbf9f6 12px,#f1ede7 12px,#f1ede7 24px);display:flex;align-items:center;justify-content:center;margin-bottom:var(--s5);}
.cpage .entry-photo .ph{font-family:var(--font-mono);font-size:0.7rem;color:var(--text-muted);letter-spacing:0.03em;padding:0.35rem 0.8rem;background:rgba(245,242,238,0.9);border:1px solid var(--border-light);border-radius:var(--r-pill);}
.cpage .entry p.body{font-size:1.08rem;line-height:1.7;color:var(--text-strong);margin-bottom:var(--s5);}
.cpage .proscons{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);margin-bottom:var(--s5);}
.cpage .pc-col h4{font-size:var(--fs-label);font-weight:700;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-muted);margin-bottom:var(--s3);display:flex;align-items:center;gap:0.5rem;}
.cpage .pc-col ul{list-style:none;display:flex;flex-direction:column;gap:var(--s3);padding:0;}
.cpage .pc-col li{display:flex;gap:0.6rem;font-size:0.96rem;line-height:1.5;color:var(--text-muted);margin:0;padding:0;}
.cpage .pc-col li .mk{flex-shrink:0;font-weight:700;line-height:1.5;}
.cpage .pc-col.pros li .mk{color:var(--accent);}
.cpage .pc-col.cons li .mk{color:var(--text-faint);}
.cpage .entry-specs{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:1px;background:var(--border-light);border:1px solid var(--border-light);border-radius:var(--r-md);overflow:hidden;margin-bottom:var(--s5);}
.cpage .entry-specs .sp{background:#fff;padding:var(--s4);}
.cpage .entry-specs .sp .k{font-family:var(--font-mono);font-size:0.64rem;letter-spacing:0.06em;text-transform:uppercase;color:var(--text-muted);}
.cpage .entry-specs .sp .v{font-family:var(--font-mono);font-size:0.95rem;color:var(--text-strong);margin-top:2px;font-weight:500;}
.cpage .verdict{background:var(--charcoal);color:var(--text);border-radius:var(--r-md);border-left:4px solid var(--accent);padding:var(--s5);}
.cpage .verdict .vl{font-size:var(--fs-label);font-weight:700;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-faint);margin-bottom:var(--s2);}
.cpage .verdict p{font-size:1.02rem;line-height:1.6;color:var(--text);margin:0;}
.cpage .verdict .score{float:right;font-family:var(--font-display);font-weight:800;font-size:1.4rem;color:var(--accent);margin-left:var(--s4);}
.cpage .entry-divider{max-width:var(--measure);margin:0 auto;height:1px;background:var(--border-light);}

/* FAQ */
.cpage .faq{max-width:var(--measure);margin:var(--s7) auto 0;}
.cpage .faq-item{border-bottom:1px solid var(--border-light);}
.cpage .faq-item summary{list-style:none;cursor:pointer;padding:var(--s5) var(--s7) var(--s5) 0;font-family:var(--font-display);font-size:1.12rem;font-weight:700;color:var(--text-strong);position:relative;line-height:1.35;}
.cpage .faq-item summary::-webkit-details-marker{display:none;}
.cpage .faq-item summary::after{content:"+";position:absolute;right:0;top:50%;transform:translateY(-50%);font-size:1.5rem;font-weight:400;color:var(--accent);}
.cpage .faq-item[open] summary::after{content:"–";}
.cpage .faq-item .ans{padding:0 var(--s7) var(--s5) 0;}
.cpage .faq-item .ans p{font-size:1.02rem;line-height:1.7;color:var(--text-muted);}

/* ── DATA PIECE: hero metric + chart + bars + takeaways ── */
.cpage .metric-band{background:var(--bg);color:var(--text);padding-bottom:var(--s9);}
.cpage .metric-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:var(--s7);align-items:end;border-top:1px solid var(--border);padding-top:var(--s7);}
.cpage .metric-main .ms-label{display:flex;align-items:center;gap:0.6rem;font-size:var(--fs-label);font-weight:700;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-faint);margin-bottom:var(--s4);}
.cpage .metric-main .ms-label::before{content:"";height:2px;width:22px;background:var(--accent);border-radius:1px;}
.cpage .metric-main .big{display:flex;align-items:baseline;gap:var(--s4);}
.cpage .metric-main .arrow{font-size:clamp(2.4rem,5vw,3.4rem);color:var(--accent);line-height:1;}
.cpage .metric-main .n{font-family:var(--font-display);font-size:clamp(4rem,12vw,7.5rem);font-weight:800;letter-spacing:-0.04em;line-height:0.85;color:var(--text);}
.cpage .metric-main .ctx{font-family:var(--font-mono);font-size:0.82rem;color:var(--text-faint);margin-top:var(--s4);line-height:1.7;}
.cpage .metric-main .ctx b{color:var(--accent);font-weight:400;}
.cpage .metric-side{display:flex;flex-direction:column;gap:var(--s4);}
.cpage .ms-stat{border-top:2px solid var(--accent);padding-top:var(--s3);}
.cpage .ms-stat .v{font-family:var(--font-display);font-size:1.8rem;font-weight:800;color:var(--text);line-height:1;letter-spacing:-0.02em;}
.cpage .ms-stat .k{font-size:0.8rem;color:var(--text-faint);margin-top:var(--s2);line-height:1.4;}

.cpage .data-body{padding:var(--s9) 0 var(--s8);}
.cpage .col{max-width:var(--measure);margin:0 auto;}
.cpage .col p{font-size:1.12rem;line-height:1.78;color:var(--text-strong);margin-bottom:1.4em;}
.cpage .col p.lede{font-size:1.28rem;line-height:1.65;}
.cpage .sec-h2{max-width:var(--measure);margin:0 auto var(--s5);font-family:var(--font-display);font-size:var(--fs-h2);font-weight:800;line-height:1.15;letter-spacing:-0.015em;color:var(--text-strong);display:flex;align-items:center;gap:var(--s3);scroll-margin-top:96px;}
.cpage .sec-h2::before{content:"";height:3px;width:28px;background:var(--accent);border-radius:1px;flex-shrink:0;}
.cpage .chart-card{max-width:var(--measure);margin:0 auto var(--s8);background:#fff;border:1px solid var(--border-light);border-radius:var(--r-lg);padding:var(--s6);}
.cpage .chart-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s4);margin-bottom:var(--s5);flex-wrap:wrap;}
.cpage .chart-head .ct{font-family:var(--font-display);font-size:1.1rem;font-weight:800;color:var(--text-strong);}
.cpage .chart-head .cl{font-family:var(--font-mono);font-size:0.72rem;color:var(--text-muted);}
.cpage .chart-wrap{position:relative;height:300px;}
.cpage .chart-foot{margin-top:var(--s4);font-family:var(--font-mono);font-size:0.7rem;color:var(--text-muted);}
.cpage .chart-foot::before{content:"// ";color:var(--accent);}
.cpage .cat-wrap{max-width:var(--measure);margin:0 auto var(--s8);}
.cpage .mv{font-family:var(--font-mono);font-weight:700;font-size:0.92rem;white-space:nowrap;}
.cpage .mv.up{color:var(--accent);} .cpage .mv.up::before{content:"▲ ";}
.cpage .mv.down{color:var(--text-muted);} .cpage .mv.down::before{content:"▼ ";}
.cpage .mv.flat{color:var(--text-faint);} .cpage .mv.flat::before{content:"– ";}
.cpage .spark{display:inline-block;vertical-align:middle;}
.cpage .bars{max-width:var(--measure);margin:0 auto var(--s8);display:flex;flex-direction:column;gap:var(--s4);}
.cpage .bar-row{display:grid;grid-template-columns:140px 1fr auto;align-items:center;gap:var(--s4);}
.cpage .bar-row .bl{font-size:0.9rem;font-weight:600;color:var(--text-strong);}
.cpage .bar-track{height:14px;background:var(--offwhite-shade);border-radius:var(--r-pill);overflow:hidden;}
.cpage .bar-fill{height:100%;background:var(--accent);border-radius:var(--r-pill);}
.cpage .bar-fill.muted{background:var(--f-hdg);}
.cpage .bar-row .bv{font-family:var(--font-mono);font-size:0.86rem;color:var(--text-strong);font-weight:500;}
.cpage .takeaways{max-width:var(--measure);margin:0 auto var(--s8);background:var(--charcoal);color:var(--text);border-radius:var(--r-lg);padding:var(--s7);border-left:4px solid var(--accent);}
.cpage .takeaways .tl{display:flex;align-items:center;gap:0.6rem;font-size:var(--fs-label);font-weight:700;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--text-faint);margin-bottom:var(--s5);}
.cpage .takeaways ol{list-style:none;counter-reset:tk;display:flex;flex-direction:column;gap:var(--s5);padding:0;}
.cpage .takeaways li{counter-increment:tk;display:grid;grid-template-columns:auto 1fr;gap:var(--s4);align-items:baseline;margin:0;}
.cpage .takeaways li::before{content:counter(tk,decimal-leading-zero);font-family:var(--font-mono);font-size:0.85rem;color:var(--accent);font-weight:700;}
.cpage .takeaways .tk-body{font-size:1.05rem;line-height:1.6;color:var(--text-faint);}
.cpage .takeaways .tk-body b{color:var(--text);font-weight:700;}
.cpage .method-box{max-width:var(--measure);margin:0 auto var(--s7);background:var(--offwhite-shade);border:1px solid var(--border-light);border-left:3px solid var(--accent);border-radius:var(--r-md);padding:var(--s5);}
.cpage .method-box .ml{font-family:var(--font-mono);font-size:0.7rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-muted);margin-bottom:var(--s3);}
.cpage .method-box .ml::before{content:"// ";color:var(--accent);}
.cpage .method-box p{font-size:0.96rem;line-height:1.6;color:var(--text-strong);margin:0;}
.cpage .authors-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4);}
.cpage .authors-2 .author-card{display:flex;grid-template-columns:none;gap:var(--s4);padding:var(--s5);}
.cpage .authors-2 .author-card .a-photo{width:60px;height:60px;font-size:1.2rem;}

/* commerce-adjacency embed inside articles (max-width to article measure) */
.cpage .sku-embed{max-width:var(--measure);}
.cpage .article .sku-embed{max-width:none;}

/* ── responsive ── */
@media (max-width:1080px){
  .cpage .guide-grid{display:block;}
  .cpage .toc{display:none;}
  .cpage .article{max-width:100%;margin:0 auto;min-width:0;}
}
@media (max-width:860px){
  /* belt-and-braces: never let content pages scroll the page sideways
     (vertical scroll preserved; internal .table-scroll still scrolls) */
  .cpage{overflow-x:clip;}
  /* prevent grid/flex min-content blowout → no horizontal scroll on content pages */
  .cpage .article,.cpage .col,.cpage .l-wrap,.cpage .entries,.cpage .entry,.cpage .faq,
  .cpage .article-foot,.cpage .chart-card,.cpage .cat-wrap,.cpage .bars,.cpage .takeaways,
  .cpage .method-box,.cpage .l-h2,.cpage .sec-h2,.cpage .sku-embed{min-width:0;}
  .cpage .sku-embed{max-width:100%;}
}
@media (max-width:720px){
  .cpage .metric-grid{grid-template-columns:1fr;gap:var(--s6);align-items:start;}
}
@media (max-width:680px){
  .cpage .method-in{grid-template-columns:1fr 1fr;}
  .cpage .byline-sep{display:none;}
  .cpage .verdict .score{float:none;display:block;margin:0 0 var(--s2);}
  .cpage .authors-2{grid-template-columns:1fr;}
}
@media (max-width:560px){
  .cpage .proscons{grid-template-columns:1fr;}
  .cpage .bar-row{grid-template-columns:1fr auto;}
  .cpage .bar-row .bar-track{grid-column:1 / -1;order:3;}
  .cpage .author-card{grid-template-columns:1fr;}
}