/**
 * PAL Comparison pages — stylesheet
 *
 * Adapted from the three comparison prototypes (Directions A/B/C), with the
 * hard-coded area tokens generalised to --area-a / --area-b (BUILD-BRIEF §6) and
 * the background reconciled to the design-system cream (#f8f6f1). One area
 * colour system for every pair: A green, B blue — consistent so a reader tracks
 * the two columns across the whole page.
 *
 * Full light + dark themes; only transform/opacity animate; motion guarded.
 * Added 2026-07-27 for the neighbourhood-comparison programme.
 */

:root {
	--cmp-bg:#f8f6f1; --cmp-surface:#ffffff; --cmp-surface-2:#faf8f2;
	--cmp-ink:#1a2332; --cmp-ink-soft:#5b6472; --cmp-ink-faint:#8a919c;
	--cmp-line:rgba(26,35,50,.12); --cmp-line-soft:rgba(26,35,50,.07);
	--area-a:#2d5f3f; --area-a-tint:rgba(45,95,63,.10);
	--area-b:#3c6d7e; --area-b-tint:rgba(60,109,126,.12);
	--cmp-gold:#b8863f; --cmp-tie:#8a8f98;
	--cmp-shadow:0 1px 2px rgba(26,35,50,.04),0 10px 30px rgba(26,35,50,.07);
	--cmp-shadow-lg:0 4px 8px rgba(26,35,50,.05),0 24px 60px rgba(26,35,50,.10);
	--cmp-serif:'Spectral','Iowan Old Style',Georgia,'Times New Roman',serif;
	--cmp-sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
	--cmp-mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:dark){
	:root{
		--cmp-bg:#12181f; --cmp-surface:#1b232e; --cmp-surface-2:#212b36;
		--cmp-ink:#f1ede3; --cmp-ink-soft:#a3abb6; --cmp-ink-faint:#7d838d;
		--cmp-line:rgba(255,255,255,.12); --cmp-line-soft:rgba(255,255,255,.06);
		--area-a:#67ab81; --area-a-tint:rgba(103,171,129,.14);
		--area-b:#74b3c7; --area-b-tint:rgba(116,179,199,.15);
		--cmp-gold:#d6ac70; --cmp-tie:#828892;
		--cmp-shadow:0 1px 2px rgba(0,0,0,.3),0 12px 34px rgba(0,0,0,.34);
		--cmp-shadow-lg:0 6px 14px rgba(0,0,0,.36),0 30px 70px rgba(0,0,0,.46);
	}
}
:root[data-theme="dark"]{
	--cmp-bg:#12181f; --cmp-surface:#1b232e; --cmp-surface-2:#212b36;
	--cmp-ink:#f1ede3; --cmp-ink-soft:#a3abb6; --cmp-ink-faint:#7d838d;
	--cmp-line:rgba(255,255,255,.12); --cmp-line-soft:rgba(255,255,255,.06);
	--area-a:#67ab81; --area-a-tint:rgba(103,171,129,.14);
	--area-b:#74b3c7; --area-b-tint:rgba(116,179,199,.15);
	--cmp-gold:#d6ac70; --cmp-tie:#828892;
}
:root[data-theme="light"]{
	--cmp-bg:#f8f6f1; --cmp-surface:#ffffff; --cmp-surface-2:#faf8f2;
	--cmp-ink:#1a2332; --cmp-ink-soft:#5b6472; --cmp-ink-faint:#8a919c;
	--cmp-line:rgba(26,35,50,.12); --cmp-line-soft:rgba(26,35,50,.07);
	--area-a:#2d5f3f; --area-a-tint:rgba(45,95,63,.10);
	--area-b:#3c6d7e; --area-b-tint:rgba(60,109,126,.12);
	--cmp-gold:#b8863f; --cmp-tie:#8a8f98;
}

/* ---------- base ---------- */
body.pal-comparison{margin:0;background:var(--cmp-bg);color:var(--cmp-ink);
	font-family:var(--cmp-sans);line-height:1.7;-webkit-font-smoothing:antialiased}
body.pal-comparison.grain::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.025;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.pal-comparison__content{display:block}
.pal-comparison .wrap{max-width:1000px;margin:0 auto;padding:0 1.5rem}
.pal-comparison .num{font-family:var(--cmp-mono);font-variant-numeric:tabular-nums;font-weight:600;letter-spacing:-.02em}
.pal-comparison .eyebrow{font-family:var(--cmp-sans);font-size:.72rem;font-weight:600;letter-spacing:.14em;
	text-transform:uppercase;color:var(--cmp-ink-faint);margin:0}
.pal-comparison h1,.pal-comparison h2,.pal-comparison h3{font-family:var(--cmp-serif);font-weight:600;
	letter-spacing:-.025em;text-wrap:balance;color:var(--cmp-ink)}
/* Inherit colour for AUTHORED inline links only. Scoped to unclassed <a> so it
   can't override component links (buttons, TOC, related) that set their own
   colour with a single class — otherwise .pal-comparison a (0,1,1) beats
   .cmp-btn--solid (0,1,0) and the solid buttons render dark-on-dark. */
.pal-comparison a:not([class]){color:inherit}
.nm-a{color:var(--area-a)}.nm-b{color:var(--area-b)}

/* ---------- split hero ---------- */
.cmp-hero{margin:0 0 1rem}
.cmp-hero__stage{position:relative;display:grid;grid-template-columns:1fr 2px 1fr;background:var(--cmp-surface-2)}
.cmp-hero__half{position:relative;aspect-ratio:4/5;overflow:hidden;display:flex;align-items:flex-end}
/* No whole-image filter — matches the LIVE neighbourhood guide hero
   (.pal-hero-img), which uses a bottom gradient scrim, NOT the brightness()
   filter the design-system doc still lists. Same gradient values as the guide,
   photographic halves only, so the two heroes read consistently. */
.cmp-hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cmp-hero__half:not(.is-typographic)::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
	background:linear-gradient(to top,rgba(0,0,0,.55) 0%,rgba(0,0,0,.25) 25%,transparent 45%)}
.cmp-hero__half--a.is-typographic{background:var(--area-a-tint)}
.cmp-hero__half--b.is-typographic{background:var(--area-b-tint)}
.cmp-hero__half.is-typographic .cmp-hero__name,
.cmp-hero__half.is-typographic .cmp-hero__meta{color:var(--cmp-ink)}
.cmp-hero__half.is-typographic .cmp-hero__price{color:var(--cmp-ink)}
.cmp-hero__half--a.is-typographic .cmp-hero__price{color:var(--area-a)}
.cmp-hero__half--b.is-typographic .cmp-hero__price{color:var(--area-b)}
.cmp-hero__seam{background:var(--cmp-line)}
.cmp-hero__overlay{position:relative;z-index:2;padding:1.4rem 1.5rem;width:100%}
.cmp-hero__name{font-family:var(--cmp-serif);font-size:clamp(1.5rem,3.4vw,2.2rem);font-weight:600;margin:0;color:#fff}
.cmp-hero__meta{margin:.15rem 0 0;font-size:.82rem;color:rgba(255,255,255,.86)}
.cmp-hero__price{font-family:var(--cmp-mono);font-weight:600;font-size:clamp(1.2rem,2.6vw,1.6rem);
	margin:.5rem 0 0;color:#fff}
.cmp-hero__price-lab{display:block;font-family:var(--cmp-sans);font-size:.62rem;letter-spacing:.1em;
	text-transform:uppercase;font-weight:600;color:rgba(255,255,255,.7)}
.cmp-hero__half.is-typographic .cmp-hero__price-lab{color:var(--cmp-ink-faint)}
.cmp-hero__head{text-align:center}
/* Shares .wrap, so give it matching specificity or `.pal-comparison .wrap`'s
   `padding:0 1.5rem` zeroes the block padding. 2.25rem = 36px top and bottom. */
.cmp-hero__head.wrap{padding-block:2.25rem}
.cmp-hero__h1{font-size:clamp(2rem,5.4vw,3.4rem);line-height:1.05;margin:.4rem 0 0}
.cmp-hero__vs{font-style:italic;color:var(--cmp-gold);font-weight:500;padding:0 .12em}
.cmp-hero__h1-tail{display:block;font-size:.5em;color:var(--cmp-ink-soft);font-style:italic;margin-top:.3rem}

/* ---------- table of contents ---------- */
/* scroll-margin so a "back to contents" jump lands it below the sticky nav. */
.cmp-toc{background:var(--cmp-surface-2);border:1px solid var(--cmp-line-soft);
	border-radius:14px;padding:1.1rem 1.4rem;scroll-margin-top:84px}
/* The TOC also carries .wrap, whose `.pal-comparison .wrap{margin:0 auto}` (two
   classes) outweighs a single-class `.cmp-toc` margin. Match that specificity
   with `.cmp-toc.wrap` and set only the block (top/bottom) margin, so .wrap
   keeps centring it horizontally. */
.cmp-toc.wrap{margin-block:2.25rem}
.cmp-toc:focus{outline:none}
.cmp-toc__label{font-family:var(--cmp-sans);font-size:.64rem;font-weight:700;letter-spacing:.12em;
	text-transform:uppercase;color:var(--cmp-gold);margin:0 0 .7rem}
.cmp-toc__list{list-style:none;margin:0;padding:0;display:grid;
	grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:.2rem .9rem}
.cmp-toc__entry{margin:0;font-family:var(--cmp-serif);font-size:1.02rem;font-weight:600;line-height:1.3;
	letter-spacing:-.01em}
.cmp-toc__link{display:inline-flex;align-items:baseline;text-decoration:none;color:var(--cmp-ink-soft);
	font-size:inherit;padding:.32rem 0;border-bottom:1px solid transparent;
	transition:color .15s,border-color .15s}
.cmp-toc__link:hover{color:var(--cmp-ink);border-bottom-color:var(--cmp-gold)}

/* Smooth in-page jumps for the TOC + back-to-top links, motion-guarded. */
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
#cmp-top{scroll-margin-top:0}

/* "Back to top" link at the end of each section — subtle, right-aligned. */
.cmp-top-link{display:block;width:fit-content;margin:1.4rem 0 0 auto;font-size:.7rem;font-weight:600;
	letter-spacing:.08em;text-transform:uppercase;color:var(--cmp-ink-faint);text-decoration:none;
	transition:color .15s}
.cmp-top-link:hover{color:var(--cmp-gold)}
.cmp-top-link__arrow{margin-left:.35rem}

/* ---------- section shell ---------- */
/* scroll-margin so an in-page jump clears the site's sticky nav. */
.cmp-section{padding:2.4rem 0;border-top:1px solid var(--cmp-line-soft);scroll-margin-top:84px}
.cmp-section__kicker{font-family:var(--cmp-sans);font-size:.64rem;font-weight:700;letter-spacing:.12em;
	text-transform:uppercase;color:var(--cmp-gold);margin:0 0 .3rem}
.cmp-section__title{font-size:clamp(1.4rem,3vw,1.9rem);margin:0}
.cmp-section__deck{margin:.6rem 0 0;color:var(--cmp-ink-soft);font-size:1.02rem;max-width:62ch}
.cmp-src{font-size:.72rem;color:var(--cmp-ink-faint);margin:1rem 0 0}
.cmp-byline{font-size:.8rem;color:var(--cmp-ink-soft);margin:0 0 1rem;font-style:italic}
.cmp-prose{margin:1rem 0 0;color:var(--cmp-ink);font-size:1.02rem;max-width:64ch}
.cmp-prose p{margin:0 0 1rem}

/* ---------- verdict + choose ---------- */
/* Shares .wrap — set block padding at matching specificity or it gets zeroed by
   `.pal-comparison .wrap{padding:0 1.5rem}`. 2.25rem = 36px top and bottom. */
.cmp-verdict.wrap{padding-block:2.25rem}
.cmp-verdict__box{background:var(--cmp-surface);border:1px solid var(--cmp-line);border-radius:16px;
	padding:1.6rem 1.8rem;box-shadow:var(--cmp-shadow);position:relative;overflow:hidden}
.cmp-verdict__box::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;
	background:linear-gradient(var(--area-a),var(--area-b))}
.cmp-verdict__text{margin:.4rem 0 0;font-size:1.08rem;color:var(--cmp-ink)}
.cmp-verdict__tie{margin:.7rem 0 0;font-size:.92rem;color:var(--cmp-ink-soft)}
.cmp-choose{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin:1.4rem 0 0}
.cmp-choose__card{border-radius:16px;padding:1.5rem;border:1px solid var(--cmp-line);
	background:var(--cmp-surface);box-shadow:var(--cmp-shadow)}
.cmp-choose__card--a{border-top:3px solid var(--area-a)}
.cmp-choose__card--b{border-top:3px solid var(--area-b)}
.cmp-choose__card h3{margin:0 0 .2rem;font-size:1.35rem}
.cmp-choose__card--a h3{color:var(--area-a)}.cmp-choose__card--b h3{color:var(--area-b)}
.cmp-choose__who{font-size:.78rem;color:var(--cmp-ink-faint);margin:0 0 1rem}
.cmp-choose__card ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.7rem}
/* Normal inline flow (NOT flex) so a mid-sentence <b>figure</b> and its
   surrounding "(…)" stay on the text baseline; the dot is positioned absolutely
   rather than as a flex item. */
.cmp-choose__card li{position:relative;padding-left:1.1rem;font-size:.92rem;line-height:1.5}
.cmp-choose__card li::before{content:'';position:absolute;left:0;top:.6em;width:7px;height:7px;border-radius:50%}
.cmp-choose__card--a li::before{background:var(--area-a)}
.cmp-choose__card--b li::before{background:var(--area-b)}
.cmp-choose__card li b{font-family:var(--cmp-mono);font-size:.85em;font-weight:600;white-space:nowrap}

/* ---------- comparative stat rows ---------- */
.cmp-stats{margin:1.2rem 0 0;border:1px solid var(--cmp-line);border-radius:14px;overflow:hidden;
	background:var(--cmp-surface)}
.cmp-stat{display:grid;grid-template-columns:1.3fr 1fr 1fr;align-items:center;gap:.5rem;
	padding:.85rem 1.1rem;border-bottom:1px solid var(--cmp-line-soft)}
.cmp-stat:last-child{border-bottom:0}
.cmp-stat:nth-child(even){background:var(--cmp-surface-2)}
.cmp-stat__label{font-size:.86rem;color:var(--cmp-ink-soft)}
.cmp-stat__val{text-align:right;font-family:var(--cmp-mono);font-weight:600;font-size:.98rem;
	display:flex;flex-direction:column;align-items:flex-end;gap:.1rem}
.cmp-stat__who{font-family:var(--cmp-sans);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;
	color:var(--cmp-ink-faint);font-weight:600}
.cmp-stat__val--a.is-lead{color:var(--area-a)}
.cmp-stat__val--b.is-lead{color:var(--area-b)}
/* Leading value set larger so the winner in each row reads at a glance. The
   who-label and "leads" tag are sized in rem, so they stay put — only the
   figure grows. */
.cmp-stat__val.is-lead{font-size:1.3rem;line-height:1.15}
.cmp-stat__tag{font-family:var(--cmp-sans);font-size:.58rem;font-weight:700;letter-spacing:.06em;
	text-transform:uppercase;padding:.05rem .35rem;border-radius:4px;color:#fff;margin-top:.15rem}
.cmp-stat__val--a.is-lead .cmp-stat__tag{background:var(--area-a)}
.cmp-stat__val--b.is-lead .cmp-stat__tag{background:var(--area-b)}

/* ---------- scoreboard (Direction B) ---------- */
.cmp-scoreboard__scroll{overflow-x:auto;margin:1.2rem 0 0}
.cmp-scoreboard__table{width:100%;border-collapse:collapse;background:var(--cmp-surface);
	border:1px solid var(--cmp-line);border-radius:16px;overflow:hidden;min-width:34rem}
.cmp-scoreboard__caption{caption-side:top;text-align:left;font-size:.78rem;color:var(--cmp-ink-faint);
	margin-bottom:.6rem;max-width:70ch}
.cmp-scoreboard__table th,.cmp-scoreboard__table td{padding:.8rem 1.1rem;text-align:right;
	border-bottom:1px solid var(--cmp-line-soft);font-size:.92rem}
.cmp-scoreboard__table thead th{font-family:var(--cmp-sans);font-weight:700;font-size:.82rem;
	background:var(--cmp-surface);border-bottom:1px solid var(--cmp-line)}
.cmp-scoreboard__table th[scope="row"]{text-align:left;font-family:var(--cmp-sans);font-weight:500;
	color:var(--cmp-ink-soft)}
.cmp-scoreboard__table tbody tr:last-child th,.cmp-scoreboard__table tbody tr:last-child td{border-bottom:0}
.cmp-scoreboard__table td.num{font-family:var(--cmp-mono);font-weight:600}
.cmp-scoreboard__col--a{color:var(--area-a)}.cmp-scoreboard__col--b{color:var(--area-b)}
.cmp-scoreboard__table td.is-lead{font-weight:700;font-size:1.3rem;line-height:1.15}
.cmp-scoreboard__lead{display:inline-block;font-family:var(--cmp-sans);font-size:.56rem;font-weight:700;
	letter-spacing:.06em;text-transform:uppercase;color:#fff;padding:.05rem .35rem;border-radius:4px;margin-left:.4rem}
.cmp-scoreboard__col--a.is-lead .cmp-scoreboard__lead{background:var(--area-a)}
td.is-lead.cmp-scoreboard__col--a .cmp-scoreboard__lead{background:var(--area-a)}
td.is-lead.cmp-scoreboard__col--b .cmp-scoreboard__lead{background:var(--area-b)}
.cmp-scoreboard__chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0 0}
.cmp-chip{display:inline-flex;align-items:center;gap:.4rem;font-size:.76rem;font-weight:600;
	padding:.35rem .7rem;border-radius:999px;border:1px solid var(--cmp-line);background:var(--cmp-surface)}
.cmp-chip__k{color:var(--cmp-ink-faint);font-weight:500}
.cmp-chip.is-a{border-color:var(--area-a);color:var(--area-a)}
.cmp-chip.is-b{border-color:var(--area-b);color:var(--area-b)}
.cmp-chip.is-tie{color:var(--cmp-tie)}

/* ---------- paired photos ---------- */
.cmp-photo-pair{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1.4rem 0 0}
.cmp-photo{margin:0}
.cmp-photo img{width:100%;height:auto;aspect-ratio:10/7;object-fit:cover;border-radius:12px;
	filter:saturate(1.05);display:block}
.cmp-photo--a img{border-top:3px solid var(--area-a)}
.cmp-photo--b img{border-top:3px solid var(--area-b)}
.cmp-photo__cap{font-size:.72rem;color:var(--cmp-ink-faint);margin:.4rem 0 0}
.cmp-photo--a .cmp-photo__cap{color:var(--area-a)}
.cmp-photo--b .cmp-photo__cap{color:var(--area-b)}

/* ---------- priorities (Direction C) ---------- */
.cmp-prio__picker{display:flex;flex-wrap:wrap;gap:.6rem;margin:1.4rem 0 .4rem}
.cmp-prio__btn{font-family:var(--cmp-sans);font-size:.86rem;font-weight:600;color:var(--cmp-ink-soft);
	cursor:pointer;padding:.55rem 1rem;border-radius:999px;border:1.5px solid var(--cmp-line);
	background:var(--cmp-surface);display:inline-flex;align-items:center;gap:.45rem;
	transition:transform .15s cubic-bezier(.34,1.56,.64,1),border-color .2s,color .2s,background .2s}
.cmp-prio__btn:hover{transform:translateY(-2px)}
.cmp-prio__tick{width:15px;height:15px;border-radius:50%;border:1.5px solid var(--cmp-ink-faint);
	display:grid;place-items:center;font-size:.6rem;color:transparent}
.cmp-prio__btn[aria-pressed="true"]{border-color:var(--cmp-gold);color:var(--cmp-ink);
	background:color-mix(in srgb,var(--cmp-gold) 12%,transparent)}
.cmp-prio__btn[aria-pressed="true"] .cmp-prio__tick{background:var(--cmp-gold);border-color:var(--cmp-gold);color:#fff}
.cmp-prio__fit{background:var(--cmp-surface);border:1px solid var(--cmp-line);border-radius:18px;
	padding:1.6rem 1.8rem;box-shadow:var(--cmp-shadow-lg);margin:1.2rem 0}
.cmp-prio__verdict{text-align:center;font-family:var(--cmp-serif);font-size:1.25rem;margin:0 0 1.3rem;
	min-height:1.5em;color:var(--cmp-ink)}
.cmp-prio__meter{display:grid;grid-template-columns:90px 1fr 52px;align-items:center;gap:.9rem;margin:.7rem 0}
.cmp-prio__lab{font-weight:600;font-size:.9rem}
.cmp-prio__meter--a .cmp-prio__lab{color:var(--area-a)}
.cmp-prio__meter--b .cmp-prio__lab{color:var(--area-b)}
.cmp-prio__track{height:14px;border-radius:999px;background:var(--cmp-surface-2);overflow:hidden;
	border:1px solid var(--cmp-line-soft);display:block}
.cmp-prio__bar{height:100%;width:50%;border-radius:999px;display:block;
	transition:width .7s cubic-bezier(.16,1,.3,1)}
.cmp-prio__meter--a .cmp-prio__bar{background:var(--area-a)}
.cmp-prio__meter--b .cmp-prio__bar{background:var(--area-b)}
.cmp-prio__pct{text-align:right;font-weight:600;font-size:.9rem}
.cmp-prio__grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1rem 0 0}
.cmp-dim{border:1px solid var(--cmp-line);border-radius:14px;padding:1.1rem 1.2rem;background:var(--cmp-surface);
	transition:box-shadow .25s,border-color .25s}
.cmp-dim[data-on="1"]{border-color:var(--cmp-gold);box-shadow:0 0 0 1px var(--cmp-gold),var(--cmp-shadow)}
.cmp-dim__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:.7rem}
.cmp-dim__head h3{font-size:1rem;margin:0}
.cmp-dim__pill{font-size:.6rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
	color:var(--cmp-gold);opacity:0}
.cmp-dim[data-on="1"] .cmp-dim__pill{opacity:1}
.cmp-dim__cmp{display:flex;justify-content:space-between;gap:.5rem}
.cmp-dim__side{display:flex;flex-direction:column;gap:.15rem}
.cmp-dim__side--b{text-align:right;align-items:flex-end}
.cmp-dim__who{font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;color:var(--cmp-ink-faint)}
.cmp-dim__fg{font-weight:600;font-size:1.05rem}
.cmp-dim__side--a.is-lead .cmp-dim__fg{color:var(--area-a)}
.cmp-dim__side--b.is-lead .cmp-dim__fg{color:var(--area-b)}
.cmp-dim__note{margin:.7rem 0 0;font-size:.8rem;color:var(--cmp-ink-soft)}

/* ---------- faq ---------- */
.cmp-faq__list{margin:1.2rem 0 0;border:1px solid var(--cmp-line);border-radius:14px;overflow:hidden;
	background:var(--cmp-surface)}
.cmp-faq__item{border-bottom:1px solid var(--cmp-line-soft)}
.cmp-faq__item:last-child{border-bottom:0}
.cmp-faq__q{cursor:pointer;padding:1rem 1.2rem;font-family:var(--cmp-serif);font-weight:600;font-size:1.02rem;
	list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.cmp-faq__q::-webkit-details-marker{display:none}
.cmp-faq__q::after{content:'+';font-family:var(--cmp-mono);color:var(--cmp-gold);font-size:1.2rem;flex:none}
.cmp-faq__item[open] .cmp-faq__q::after{content:'\2212'}
.cmp-faq__a{padding:0 1.2rem 1.1rem;color:var(--cmp-ink-soft);font-size:.96rem}
.cmp-faq__a p{margin:0 0 .7rem}.cmp-faq__a p:last-child{margin:0}

/* ---------- buttons / links ---------- */
.cmp-links__row{display:flex;flex-wrap:wrap;gap:.7rem;margin:1.1rem 0 0}
.cmp-btn{display:inline-flex;align-items:center;gap:.4rem;font-size:.85rem;font-weight:600;text-decoration:none;
	padding:.6rem 1rem;border-radius:10px;border:1px solid var(--cmp-line);background:var(--cmp-surface);
	color:var(--cmp-ink);transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s}
.cmp-btn:hover{transform:translateY(-2px);box-shadow:var(--cmp-shadow)}
.cmp-btn--solid{background:var(--cmp-ink);color:var(--cmp-bg);border-color:var(--cmp-ink)}

/* related comparisons */
.cmp-related{margin:1.6rem 0 0}
.cmp-related__label{font-family:var(--cmp-sans);font-size:.64rem;font-weight:700;letter-spacing:.12em;
	text-transform:uppercase;color:var(--cmp-gold);margin:0 0 .6rem}
.cmp-related__list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem .8rem}
.cmp-related__link{display:inline-flex;align-items:center;font-size:.9rem;font-weight:600;text-decoration:none;
	color:var(--cmp-ink-soft);padding:.4rem .8rem;border:1px solid var(--cmp-line);border-radius:999px;
	background:var(--cmp-surface);transition:transform .15s cubic-bezier(.34,1.56,.64,1),color .15s,border-color .15s}
.cmp-related__link:hover{transform:translateY(-1px);color:var(--cmp-ink);border-color:var(--cmp-gold)}

/* ---------- archive hub ---------- */
.cmp-archive__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem}
.cmp-archive__card{display:flex;flex-direction:column;gap:.3rem;padding:1.4rem 1.5rem;border-radius:16px;
	border:1px solid var(--cmp-line);background:var(--cmp-surface);box-shadow:var(--cmp-shadow);
	text-decoration:none;position:relative;overflow:hidden;
	transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s}
.cmp-archive__card:hover{transform:translateY(-3px);box-shadow:var(--cmp-shadow-lg)}
.cmp-archive__seam{position:absolute;left:0;top:0;bottom:0;width:4px;
	background:linear-gradient(var(--area-a),var(--area-b))}
.cmp-archive__title{font-family:var(--cmp-serif);font-weight:600;font-size:1.2rem;color:var(--cmp-ink)}
.cmp-archive__sub{font-size:.78rem;color:var(--cmp-ink-faint)}

/* ---------- responsive ---------- */
@media (max-width:760px){
	.cmp-hero__stage{grid-template-columns:1fr;grid-template-rows:auto auto auto}
	.cmp-hero__seam{height:2px;width:100%}
	.cmp-hero__half{aspect-ratio:16/10}
	.cmp-choose,.cmp-prio__grid,.cmp-photo-pair{grid-template-columns:1fr}
	.cmp-stat{grid-template-columns:1fr;gap:.3rem;text-align:left}
	.cmp-stat__val{align-items:flex-start;text-align:left;flex-direction:row;gap:.5rem}
}
@media (prefers-reduced-motion:reduce){
	.pal-comparison *{animation-duration:.001ms!important;transition-duration:.001ms!important}
}
.pal-comparison :focus-visible{outline:2.5px solid var(--cmp-gold);outline-offset:2px;border-radius:4px}