/* Device cards and the catalogue's grid, in the reel's and the sheet's language: the device
   floating on its own stage over a glow of its colour, then maker, name, one line, price and a
   small Buy pill. No borders, no white photo boxes, no rows of buttons. Loaded last on every
   page but the front page, so it wins over the older card rules without !important where it
   can. */
:root { --c-ink: #fef9ed; --c-muted: rgba(254,249,237,.62); --c-faint: rgba(254,249,237,.4); --c-rule: rgba(254,249,237,.1); --c-yellow: #fbe154; }

/* ——— the card ——— */
body .device-card { position: relative; display: flex; flex-direction: column; min-width: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--c-ink); }
body .device-card .card-stage { position: relative; display: grid; place-items: center; aspect-ratio: 1 / 1.08; overflow: hidden; border-radius: 26px; background: radial-gradient(70% 60% at 50% 44%, color-mix(in srgb, var(--tint, #3b3a36) 55%, #1d1c1a) 0%, color-mix(in srgb, var(--tint, #3b3a36) 18%, #171716) 55%, #151514 85%); box-shadow: inset 0 1px 0 rgba(254,249,237,.07), inset 0 0 0 1px rgba(254,249,237,.05); text-decoration: none; }
body .device-card .card-stage .device-art { position: relative; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: none !important; aspect-ratio: auto; }
body .device-card .card-stage .device-art.has-cutout > img { max-width: 70% !important; max-height: 70% !important; filter: drop-shadow(0 20px 22px rgba(0,0,0,.55)); }
/* A device still without a cut-out fills its stage as a photograph, never a white box. */
body .device-card .card-stage .device-art.has-image { display: block; }
body .device-card .card-stage .device-art.has-image > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; mix-blend-mode: normal; }
body .device-card .card-stage::after { content: ''; position: absolute; left: 28%; right: 28%; bottom: 9%; height: 6%; background: radial-gradient(closest-side, rgba(0,0,0,.5), transparent); pointer-events: none; }
body .device-card:hover .card-stage .device-art.has-cutout > img { transform: translateY(-6px) scale(1.04) !important; }
body .device-card .card-stage:focus-visible { outline: 2px solid var(--c-yellow); outline-offset: 3px; }

body .device-card .card-copy { display: flex; flex-direction: column; flex: 1; gap: 0; padding: 16px 4px 0; border: 0; background: none; }
body .device-card .card-maker { margin: 0; font: 600 11px/1.3 'Inter Display', Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--c-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body .device-card h2 { margin: 8px 0 0; font: 700 26px/.95 'News Cycle', Impact, 'Arial Narrow', sans-serif; letter-spacing: -.015em; text-transform: uppercase; }
body .device-card h2 a { color: var(--c-ink); text-decoration: none; }
body .device-card h2 a:hover { color: var(--c-yellow); }
body .device-card .device-description { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 8px 0 0; font: 400 14px/1.45 'Instrument Sans', Inter, sans-serif; color: var(--c-muted); }
body .device-card .card-foot { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 16px; }
body .device-card .card-price { font: 700 22px/1 'News Cycle', Impact, sans-serif; letter-spacing: -.01em; color: var(--c-ink); font-variant-numeric: tabular-nums; }
body .device-card .card-status { display: inline-flex; align-items: center; gap: 6px; font: 600 10px/1 'Inter Display', Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--c-faint); white-space: nowrap; }
body .device-card .card-status i { width: 6px; height: 6px; border-radius: 50%; background: var(--c-faint); }
body .device-card .card-status.st-listed i { background: #7fe3a0; box-shadow: 0 0 8px rgba(127,227,160,.6); }
body .device-card .card-status.st-preorder i, body .device-card .card-status.st-crowdfunding i { background: var(--c-yellow); }
body .device-card .card-status.st-soldout i { background: #ff7a66; }
body .device-card .card-buy { display: inline-flex; align-items: center; gap: 8px; height: 38px; margin-left: auto; padding: 0 12px 0 16px; border-radius: 999px; background: linear-gradient(180deg, #ffe86e, #fbe154 60%, #f3d63f); color: #151515; font: 600 14px/1 'Instrument Sans', Inter, sans-serif; text-decoration: none; box-shadow: 0 10px 22px -12px rgba(251,225,84,.6), inset 0 1px 0 rgba(255,255,255,.35); transition: transform 200ms cubic-bezier(.23,1,.32,1); }
body .device-card .card-buy svg { width: 14px; height: 14px; }
body .device-card .card-buy:hover { transform: translateY(-1px); }
body .device-card .card-buy:active { transform: scale(.96); }
body .device-card .card-buy.is-quiet { background: rgba(254,249,237,.08); color: var(--c-ink); box-shadow: inset 0 0 0 1px rgba(254,249,237,.22); }

/* Cards rise in as they come into view (app.js marks them). */
@keyframes card-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
body .device-card.is-new { animation: card-rise 620ms cubic-bezier(.23,1,.32,1) both; }
@media (prefers-reduced-motion: reduce) { body .device-card.is-new { animation: none; } body .device-card .card-buy { transition: none; } }

/* ——— the catalogue, as a grid ——— */
body[data-page=catalog]:not(.carousel-mode) .hardware-intro { position: static; width: auto; height: auto; overflow: visible; clip-path: none; margin: 56px 0 0; }
body[data-page=catalog]:not(.carousel-mode) .hardware-intro h1 { margin: 0; font: 700 clamp(48px, 7vw, 96px)/.88 'News Cycle', Impact, 'Arial Narrow', sans-serif; letter-spacing: -.03em; text-transform: uppercase; color: var(--c-ink); }
body[data-page=catalog]:not(.carousel-mode) .catalog-start { margin: 16px 0 0; font: 500 15px/1.4 'Instrument Sans', Inter, sans-serif; }
body[data-page=catalog]:not(.carousel-mode) .catalog-start a { color: var(--c-muted); text-decoration: none; }
body[data-page=catalog]:not(.carousel-mode) .catalog-start a:hover { color: var(--c-yellow); }
body[data-page=catalog]:not(.carousel-mode) .discovery-section-head, body[data-page=catalog]:not(.carousel-mode) .task-nav { display: none; }
body[data-page=catalog]:not(.carousel-mode) .category-nav { display: flex; gap: 26px; margin: 34px 0 0; padding: 0 0 2px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--c-rule); animation: none; white-space: nowrap; }
body[data-page=catalog]:not(.carousel-mode) .category-nav::-webkit-scrollbar { display: none; }
body[data-page=catalog]:not(.carousel-mode) .category-nav a { display: inline-flex; align-items: baseline; gap: 6px; padding: 0 0 14px; border-bottom: 2px solid transparent; margin-bottom: -1px; color: var(--c-muted); font: 600 13px/1 'Inter Display', Inter, sans-serif; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; animation: none; transform: none; }
body[data-page=catalog]:not(.carousel-mode) .category-nav a:hover { color: var(--c-ink); }
body[data-page=catalog]:not(.carousel-mode) .category-nav a[aria-current=page] { color: var(--c-ink); border-bottom-color: var(--c-yellow); }
body[data-page=catalog]:not(.carousel-mode) .category-nav a span { font-size: 10px; color: var(--c-faint); letter-spacing: 0; }

body[data-page=catalog]:not(.carousel-mode) .browse-layout { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "toolbar filters" "results results"; align-items: start; column-gap: 10px; margin-top: 24px; }
body[data-page=catalog]:not(.carousel-mode) .browse-sidebar { grid-area: filters; position: relative; width: auto; margin: 0; padding: 0; border: 0; background: none; }
body[data-page=catalog]:not(.carousel-mode) .browse-results { display: contents; }
body[data-page=catalog]:not(.carousel-mode) .browse-toolbar { grid-area: toolbar; display: flex; align-items: center; gap: 10px; margin: 0; padding: 0; border: 0; background: none; }
body[data-page=catalog]:not(.carousel-mode) .browse-results > :not(.browse-toolbar) { grid-column: 1 / -1; }
body[data-page=catalog]:not(.carousel-mode) .search-form { flex: 1; min-width: 0; }
body[data-page=catalog]:not(.carousel-mode) .search-field { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 18px; border: 1px solid rgba(254,249,237,.16); border-radius: 999px; background: rgba(254,249,237,.06); color: var(--c-ink); }
body[data-page=catalog]:not(.carousel-mode) .search-field svg { flex: none; width: 18px; height: 18px; opacity: .8; }
body[data-page=catalog]:not(.carousel-mode) .search-field input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; color: var(--c-ink); font: 500 15px/1 'Instrument Sans', Inter, sans-serif; outline: none; box-shadow: none; padding: 0; }
body[data-page=catalog]:not(.carousel-mode) .search-field input::placeholder { color: var(--c-faint); }
body[data-page=catalog]:not(.carousel-mode) .search-field:focus-within { border-color: rgba(251,225,84,.6); background: rgba(254,249,237,.09); }
body[data-page=catalog]:not(.carousel-mode) .view-controls { display: flex; gap: 2px; padding: 3px; border: 1px solid rgba(254,249,237,.16); border-radius: 999px; background: rgba(254,249,237,.04); }
body[data-page=catalog]:not(.carousel-mode) .view-controls button { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 999px; background: none; color: var(--c-muted); cursor: pointer; }
body[data-page=catalog]:not(.carousel-mode) .view-controls button svg { width: 17px; height: 17px; }
body[data-page=catalog]:not(.carousel-mode) .view-controls button[aria-pressed=true] { background: var(--c-ink); color: #151515; }
body[data-page=catalog]:not(.carousel-mode) #filter-panel { position: relative; border: 0; background: none; padding: 0; }
body[data-page=catalog]:not(.carousel-mode) #filter-panel > summary { display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 18px; border: 1px solid rgba(254,249,237,.16); border-radius: 999px; background: rgba(254,249,237,.06); color: var(--c-ink); cursor: pointer; list-style: none; font: 500 15px/1 'Instrument Sans', Inter, sans-serif; }
body[data-page=catalog]:not(.carousel-mode) #filter-panel > summary::-webkit-details-marker { display: none; }
body[data-page=catalog]:not(.carousel-mode) #filter-panel > summary::after { content: none; }
body[data-page=catalog]:not(.carousel-mode) #filter-panel > summary svg { width: 16px; height: 16px; }
body[data-page=catalog]:not(.carousel-mode) #filter-panel[open] > summary { border-color: rgba(251,225,84,.6); }
body[data-page=catalog]:not(.carousel-mode) #filter-panel > form { position: absolute; right: 0; top: 56px; z-index: 40; width: min(92vw, 380px); display: grid; gap: 14px; padding: 20px; border: 1px solid rgba(254,249,237,.14); border-radius: 22px; background: rgba(24,24,23,.96); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: 0 30px 60px -20px rgba(0,0,0,.8); }
body[data-page=catalog]:not(.carousel-mode) #filter-panel label { display: grid; gap: 6px; font: 600 11px/1.3 'Inter Display', Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--c-faint); }
body[data-page=catalog]:not(.carousel-mode) #filter-panel select { height: 42px; padding: 0 12px; border: 1px solid rgba(254,249,237,.14); border-radius: 12px; background: #1d1c1a; color: var(--c-ink); font: 500 14px/1 'Instrument Sans', Inter, sans-serif; text-transform: none; letter-spacing: 0; }
body[data-page=catalog]:not(.carousel-mode) #filter-panel .filter-heading h2 { margin: 0; font: 700 22px/1 'News Cycle', Impact, sans-serif; text-transform: uppercase; color: var(--c-ink); }
body[data-page=catalog]:not(.carousel-mode) #filter-panel .filter-heading { display: flex; align-items: center; justify-content: space-between; }
body[data-page=catalog]:not(.carousel-mode) #filter-panel .checkbox-label { display: flex; align-items: center; gap: 8px; text-transform: none; letter-spacing: 0; font: 500 14px/1.3 'Instrument Sans', Inter, sans-serif; color: var(--c-muted); }
body[data-page=catalog]:not(.carousel-mode) .results-line { margin: 22px 0 0; }
body[data-page=catalog]:not(.carousel-mode) .results-line p { margin: 0; font: 600 11px/1 'Inter Display', Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--c-faint); }

body .device-feed.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(262px, 1fr)); gap: 44px 26px; margin-top: 22px; }
body .device-feed.list { display: flex; flex-direction: column; gap: 0; margin-top: 22px; }
body .device-feed.list .device-card { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 20px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--c-rule); }
body .device-feed.list .device-card .card-stage { aspect-ratio: 1; border-radius: 20px; }
body .device-feed.list .device-card .card-copy { padding: 0; }

@media (max-width: 700px) {
  body[data-page=catalog]:not(.carousel-mode) .hardware-intro { margin-top: 30px; }
  body[data-page=catalog]:not(.carousel-mode) .browse-layout { grid-template-columns: minmax(0, 1fr) auto; }
  body[data-page=catalog]:not(.carousel-mode) .browse-toolbar { gap: 8px; }
  body[data-page=catalog]:not(.carousel-mode) .view-controls button { width: 36px; height: 36px; }
  body[data-page=catalog]:not(.carousel-mode) #filter-panel > summary { width: 48px; padding: 0; justify-content: center; font-size: 0; }
  body[data-page=catalog]:not(.carousel-mode) #filter-panel > summary span { display: none; }
  body .device-feed.grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 12px; }
  body .device-feed.grid .device-card .card-stage { border-radius: 20px; }
  body .device-feed.grid .device-card h2 { font-size: 20px; }
  body .device-feed.grid .device-card .device-description { display: none; }
  body .device-feed.grid .device-card .card-foot { flex-wrap: wrap; gap: 8px; }
  body .device-feed.grid .device-card .card-buy { margin-left: 0; height: 34px; font-size: 13px; }
  body .device-feed.grid .device-card .card-price { font-size: 19px; }
  body .device-feed.list .device-card { grid-template-columns: 96px minmax(0, 1fr); gap: 14px; }
}
html.cards-rise .device-card:not(.is-new) { opacity: 0; }

/* Older sheets force square corners (border-radius: 0 !important) and a wrapping, ruled
   category row; the pills and the single scrolling row win here. */
body[data-page=catalog]:not(.carousel-mode) :is(.search-field, #filter-panel > summary, .view-controls, .view-controls button) { border-radius: 999px !important; }
body[data-page=catalog]:not(.carousel-mode) #filter-panel > form { border-radius: 22px !important; }
body[data-page=catalog]:not(.carousel-mode) #filter-panel select { border-radius: 12px !important; }
body .device-card .card-stage { border-radius: 26px !important; }
body .device-card .card-buy { border-radius: 999px !important; }
body[data-page=catalog]:not(.carousel-mode) .category-nav { flex-wrap: nowrap !important; border-top: 0 !important; margin-top: 30px; }
body[data-page=catalog]:not(.carousel-mode) .hardware-intro { margin-top: 36px; }
body[data-page=catalog]:not(.carousel-mode) .browse-layout { margin-top: 20px; }
body[data-page=catalog]:not(.carousel-mode) .results-line { margin-top: 18px; }
body[data-page=catalog]:not(.carousel-mode) #active-filters:empty, body[data-page=catalog]:not(.carousel-mode) #task-context[hidden] { display: none; }
body .device-feed.grid { margin-top: 18px; }
@media (max-width: 700px) { body .device-feed.grid .device-card .card-stage { border-radius: 20px !important; } }
/* The art box fills the stage exactly, so a tall cut-out (the T-Deck with its antenna) is held
   by the height limit as a wide one is by the width. */
body .device-card .card-stage .device-art { position: absolute !important; inset: 0 !important; width: auto !important; height: auto !important; display: grid !important; place-items: center; }

/* ——— guides: three picks, each the device on its own lit stage ——— */
body[data-page=guide] .guide-picks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 26px; }
body[data-page=guide] .guide-pick { display: flex; flex-direction: column; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--c-ink); }
body[data-page=guide] .guide-pick .pick-stage { position: relative; display: grid; place-items: center; aspect-ratio: 1 / .92; overflow: hidden; border-radius: 26px; background: radial-gradient(70% 60% at 50% 44%, color-mix(in srgb, var(--tint, #3b3a36) 55%, #1d1c1a) 0%, color-mix(in srgb, var(--tint, #3b3a36) 18%, #171716) 55%, #151514 85%); box-shadow: inset 0 1px 0 rgba(254,249,237,.07), inset 0 0 0 1px rgba(254,249,237,.05); }
/* Pinned to the stage so a tall cut-out's percentage height has something to measure against. */
body[data-page=guide] .guide-pick .pick-stage .device-art { position: absolute; inset: 0; display: grid; place-items: center; width: auto; height: auto; margin: 0; padding: 0; border: 0; background: none !important; aspect-ratio: auto; }
body[data-page=guide] .guide-pick .pick-stage .device-art.has-cutout > img { max-width: 68% !important; max-height: 68% !important; filter: drop-shadow(0 20px 22px rgba(0,0,0,.55)); transition: transform 420ms cubic-bezier(.23,1,.32,1); }
body[data-page=guide] .guide-pick .pick-stage .device-art.has-image > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
body[data-page=guide] .guide-pick:hover .pick-stage .device-art.has-cutout > img { transform: translateY(-6px) scale(1.04); }
body[data-page=guide] .guide-pick .pick-copy { display: flex; flex-direction: column; flex: 1; padding: 18px 4px 0; }
body[data-page=guide] .guide-pick .pick-number { margin: 0; font: 600 11px/1 'Inter Display', Inter, sans-serif; letter-spacing: .12em; color: var(--c-faint); }
body[data-page=guide] .guide-pick h3 { margin: 10px 0 0; font: 600 21px/1.2 'Instrument Sans', Inter, sans-serif; letter-spacing: -.015em; color: var(--c-ink); }
body[data-page=guide] .guide-pick .pick-device { display: inline-flex; align-items: center; gap: 8px; margin: 12px 0 0; font: 700 24px/.95 'News Cycle', Impact, 'Arial Narrow', sans-serif; letter-spacing: -.01em; text-transform: uppercase; color: var(--c-yellow); text-decoration: none; }
body[data-page=guide] .guide-pick .pick-device svg { width: 16px; height: 16px; }
body[data-page=guide] .guide-pick .pick-copy > p:not(.pick-number) { margin: 10px 0 0; font: 400 14px/1.5 'Instrument Sans', Inter, sans-serif; color: var(--c-muted); }
body[data-page=guide] .guide-pick .pick-foot { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 18px; }
body[data-page=guide] .guide-pick .pick-foot .availability { display: inline-flex; align-items: center; gap: 6px; margin: 0; padding: 0; border: 0; background: none; font: 600 10px/1 'Inter Display', Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--c-faint); }
body[data-page=guide] .guide-pick .pick-foot .card-buy { display: inline-flex; align-items: center; gap: 8px; height: 38px; margin-left: auto; padding: 0 12px 0 16px; border-radius: 999px; background: linear-gradient(180deg, #ffe86e, #fbe154 60%, #f3d63f); color: #151515; font: 600 14px/1 'Instrument Sans', Inter, sans-serif; text-decoration: none; }
body[data-page=guide] .guide-pick .pick-foot .card-buy svg { width: 14px; height: 14px; }
body[data-page=guide] .guide-pick .pick-foot .card-buy.is-quiet { background: rgba(254,249,237,.08); color: var(--c-ink); box-shadow: inset 0 0 0 1px rgba(254,249,237,.22); }
body[data-page=guide] .guide-compare { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 18px 0 20px; border-radius: 999px; background: rgba(254,249,237,.07); box-shadow: inset 0 0 0 1px rgba(254,249,237,.16); color: var(--c-ink); font: 500 14px/1 'Instrument Sans', Inter, sans-serif; text-decoration: none; transition: background 160ms ease; }
body[data-page=guide] .guide-compare:hover { background: rgba(254,249,237,.14); }
body[data-page=guide] .guide-compare svg { width: 14px; height: 14px; }
@media (max-width: 900px) { body[data-page=guide] .guide-picks { grid-template-columns: 1fr; gap: 34px; } }
/* The setup checklist: soft rounded rows, a green wash once a step is done. */
body[data-page=guide] .session-checklist li { border-radius: 18px; border: 1px solid rgba(254,249,237,.07); background: rgba(254,249,237,.03); }
body[data-page=guide] .session-checklist li:has(input:checked) { background: rgba(127,227,160,.07); border-color: rgba(127,227,160,.25); }

/* ——— the guides index: each guide shows its three picks, lifted onto one lit stage ——— */
body[data-page=guides] .guide-directory { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 30px; }
body[data-page=guides] .guide-tile { display: flex; flex-direction: column; align-items: stretch; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: var(--c-ink); text-decoration: none; }
body[data-page=guides] .guide-stage { position: relative; display: block; align-self: stretch; width: 100%; aspect-ratio: 1.35 / 1; overflow: hidden; border-radius: 26px; background: radial-gradient(70% 62% at 50% 46%, color-mix(in srgb, var(--tint, #3b3a36) 52%, #1d1c1a) 0%, color-mix(in srgb, var(--tint, #3b3a36) 16%, #171716) 58%, #151514 88%); box-shadow: inset 0 1px 0 rgba(254,249,237,.07), inset 0 0 0 1px rgba(254,249,237,.05); }
body[data-page=guides] .guide-stage img { position: absolute; top: 50%; left: 50%; width: auto; height: auto; max-width: 42%; max-height: 62%; object-fit: contain; filter: drop-shadow(0 16px 18px rgba(0,0,0,.55)); transition: transform 460ms cubic-bezier(.23,1,.32,1); }
body[data-page=guides] .guide-stage .gs-0 { z-index: 3; transform: translate(-50%, -50%); }
body[data-page=guides] .guide-stage .gs-1 { z-index: 2; transform: translate(-118%, -44%) rotate(-7deg) scale(.82); opacity: .92; }
body[data-page=guides] .guide-stage .gs-2 { z-index: 1; transform: translate(18%, -44%) rotate(7deg) scale(.82); opacity: .92; }
body[data-page=guides] .guide-tile:hover .gs-0 { transform: translate(-50%, -54%) scale(1.04); }
body[data-page=guides] .guide-tile:hover .gs-1 { transform: translate(-126%, -46%) rotate(-10deg) scale(.84); }
body[data-page=guides] .guide-tile:hover .gs-2 { transform: translate(26%, -46%) rotate(10deg) scale(.84); }
body[data-page=guides] .guide-stage .guide-icon { position: absolute; inset: 0; display: grid; place-items: center; border: 0; background: none; color: var(--c-yellow); }
body[data-page=guides] .guide-copy { display: flex; flex-direction: column; padding: 18px 4px 0; }
body[data-page=guides] .guide-label { font: 600 11px/1.3 'Inter Display', Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--c-faint); }
body[data-page=guides] .guide-tile h2 { margin: 10px 0 0; font: 700 28px/.95 'News Cycle', Impact, 'Arial Narrow', sans-serif; letter-spacing: -.015em; text-transform: uppercase; color: var(--c-ink); }
body[data-page=guides] .guide-read { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font: 500 14px/1 'Instrument Sans', Inter, sans-serif; color: var(--c-yellow); }
body[data-page=guides] .guide-read svg { width: 14px; height: 14px; }
@media (max-width: 900px) { body[data-page=guides] .guide-directory { grid-template-columns: 1fr; gap: 34px; } }
@media (prefers-reduced-motion: reduce) { body[data-page=guides] .guide-stage img { transition: none; } }

/* ——— compare: pill controls, a rounded table, each device lifted onto a lit stage ——— */
body[data-page=compare] .compare-picker select { -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%23fef9ed' stroke-opacity='.7' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; height: 46px; padding: 0 40px 0 18px; border: 0; border-radius: 999px; background-color: rgba(254,249,237,.07); box-shadow: inset 0 0 0 1px rgba(254,249,237,.16); color: var(--c-ink); font: 500 14px/1 'Instrument Sans', Inter, sans-serif; }
body[data-page=compare] .compare-picker .button.primary { height: 46px; padding: 0 20px; border: 0; border-radius: 999px; background: linear-gradient(180deg, #ffe86e, #fbe154 60%, #f3d63f); color: #151515; font: 600 14px/1 'Instrument Sans', Inter, sans-serif; }
body[data-page=compare] #share-comparison { height: 46px; padding: 0 18px 0 20px; border: 0; border-radius: 999px; background: rgba(254,249,237,.07); box-shadow: inset 0 0 0 1px rgba(254,249,237,.16); color: var(--c-ink); font: 500 14px/1 'Instrument Sans', Inter, sans-serif; }
body[data-page=compare] .comparison-scroll { border: 1px solid rgba(254,249,237,.08); border-radius: 24px; background: rgba(254,249,237,.02); }
body[data-page=compare] table.comparison th, body[data-page=compare] table.comparison td { border-color: rgba(254,249,237,.07); }
body[data-page=compare] table.comparison thead .device-art { position: relative; display: grid; place-items: center; height: 200px; margin: 0 0 14px; border: 0; border-radius: 20px; background: radial-gradient(70% 62% at 50% 46%, #33322e 0%, #1d1c1a 60%, #161615 90%) !important; box-shadow: inset 0 1px 0 rgba(254,249,237,.06); aspect-ratio: auto; }
body[data-page=compare] table.comparison thead .device-art.has-cutout > img { max-width: 70%; max-height: 78%; width: auto; height: auto; object-fit: contain; filter: drop-shadow(0 16px 18px rgba(0,0,0,.55)); }

/* ——— every other page: buttons are pills, the primary one yellow; no square boxes ——— */
body:not(.carousel-mode) .button { border-radius: 999px; }
body:not(.carousel-mode) .button.primary { background: linear-gradient(180deg, #ffe86e, #fbe154 60%, #f3d63f); color: #151515; border-color: transparent; }
body:not(.carousel-mode) .button.secondary { background: rgba(254,249,237,.07); color: var(--c-ink); border-color: rgba(254,249,237,.16); }
body:not(.carousel-mode) .builds-card { border-radius: 24px; overflow: hidden; }
/* The about page's lede was a leftover light-theme slate. */
body[data-page=about] .essay .lede { color: var(--c-muted) !important; }
body:not(.carousel-mode) .builds-card > div { padding: 0 22px 22px; }