/* ==========================================================================
   KF.Social Golden Hour shared stylesheet
   The single source of truth for the sitewide "Golden Hour" design system.
   Extracted from homepage.html. Loaded by every static SEO page so the whole
   site reads as one product: cream page, ink text, gold accents, self-hosted
   Inter (UI) + Fraunces italic (accents), generous whitespace.

   This file intentionally REPLACES the old Tailwind (styles.css) +
   static-pages.css pair for SEO pages. It provides:
     1. Golden Hour tokens + self-hosted @font-face
     2. A small hand-written subset of layout utilities the templates use
     3. Golden Hour chrome: nav, footer, store badges, sticky mobile bar
     4. Every sp-* component re-skinned to Golden Hour
     5. Article prose (comfortable ~68ch measure, 18px body)
   Light only. AA contrast: gold #C98A3B is used for large text + labels only,
   never body copy.
   ========================================================================== */

/* ---------- Self-hosted fonts ---------- */
@font-face{
  font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('/seo/assets/fonts/inter-var.woff2') format('woff2');
}
@font-face{
  font-family:'Fraunces';font-style:italic;font-weight:400 500;font-display:swap;
  src:url('/seo/assets/fonts/fraunces-italic.woff2') format('woff2');
}

/* ---------- Tokens: Golden Hour ---------- */
:root{
  --cream:#FFFDF6;--cream-2:#FBF4E6;--ink:#17130C;--coffee:#241703;--coffee-deep:#0d0a07;
  --gold:#C98A3B;--gold-soft:#E8C288;--gold-deep:#A66E27;--body:#5C5347;--faint:#9A8F7E;
  --line:#EDE5D6;--line-dark:rgba(255,246,228,.14);--blue:#4C6FFF;--green:#2E7D46;
  --r-sm:12px;--r-md:18px;--r-lg:28px;
  --shadow-card:0 1px 2px rgba(23,19,12,.05),0 10px 30px -14px rgba(23,19,12,.14);
  --shadow-shot:0 2px 6px rgba(13,10,7,.18),0 34px 70px -30px rgba(13,10,7,.5);
  --w:1120px;--ease:cubic-bezier(.22,.61,.36,1);

  /* Legacy sp-* variable aliases mapped onto Golden Hour so old markup that
     references var(--border) etc. renders correctly. */
  --bg-body:var(--cream);--bg-surface:#fff;--bg-surface-raised:#fff;
  --bg-hero:var(--cream-2);--bg-hero-alt:var(--cream-2);--bg-muted:var(--cream-2);
  --border:var(--line);--border-subtle:var(--line);
  --text-primary:var(--ink);--text-secondary:var(--body);--text-muted:var(--faint);
  --text-faint:var(--faint);--text-heading:var(--ink);
  --text-link:var(--gold-deep);--text-link-hover:var(--ink);
}

/* ---------- Base ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body,.seo-page{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
  font-size:16px;color:var(--ink);background:var(--cream);line-height:1.55;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
.seo-page a{color:var(--text-link)}
.seo-page a:hover{color:var(--text-link-hover)}
::selection{background:rgba(201,138,59,.25)}
.serif{font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:400;letter-spacing:0}
.label,.sp-eyebrow,.eyebrow{display:inline-block;font-size:12px;font-weight:650;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}

/* ---------- Layout utility subset (Tailwind-compatible names) ---------- */
.container{max-width:var(--w);margin:0 auto;padding:0 28px}
.flex{display:flex}
.inline-flex{display:inline-flex}
.inline-block{display:inline-block}
.grid{display:grid}
.hidden{display:none}
.relative{position:relative}
.absolute{position:absolute}
.flex-col{flex-direction:column}
.flex-wrap{flex-wrap:wrap}
.items-center{align-items:center}
.items-start{align-items:flex-start}
.justify-between{justify-content:space-between}
.justify-center{justify-content:center}
.text-center{text-align:center}
.text-left{text-align:left}
.overflow-hidden{overflow:hidden}
.ml-auto{margin-left:auto}
.mx-auto{margin-left:auto;margin-right:auto}
.mx-1{margin-left:.25rem;margin-right:.25rem}
.mr-1{margin-right:.25rem}
.mt-8{margin-top:2rem}.mt-12{margin-top:3rem}
.mb-1{margin-bottom:.25rem}.mb-2{margin-bottom:.5rem}.mb-3{margin-bottom:.75rem}
.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}
.-mt-0\.5{margin-top:-.125rem}
.p-4{padding:1rem}.p-8{padding:2rem}
.px-4{padding-left:1rem;padding-right:1rem}.px-6{padding-left:1.5rem;padding-right:1.5rem}
.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}
.py-4{padding-top:1rem;padding-bottom:1rem}.py-8{padding-top:2rem;padding-bottom:2rem}
.py-12{padding-top:3rem;padding-bottom:3rem}
.pt-4{padding-top:1rem}.pb-4{padding-bottom:1rem}.pb-6{padding-bottom:1.5rem}
.gap-1{gap:.25rem}.gap-1\.5{gap:.375rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}
.w-4{width:1rem}.h-4{height:1rem}.w-12{width:3rem}.h-12{height:3rem}
.max-w-2xl{max-width:42rem}.max-w-4xl{max-width:56rem}.max-w-5xl{max-width:64rem}
.max-w-6xl{max-width:72rem}.max-w-none{max-width:none}
.rounded-lg{border-radius:var(--r-sm)}.rounded-xl{border-radius:var(--r-md)}.rounded-full{border-radius:999px}
.border-t{border-top:1px solid var(--line)}
.font-light{font-weight:300}.font-medium{font-weight:500}.font-semibold{font-weight:600}
.font-bold{font-weight:700}.font-extrabold{font-weight:800}
.text-sm{font-size:.875rem}.text-lg{font-size:1.125rem}.text-xl{font-size:1.25rem}
.text-2xl{font-size:1.5rem}.text-3xl{font-size:1.875rem}
.tracking-tight{letter-spacing:-.02em}
.leading-relaxed{line-height:1.65}
.text-white{color:#fff}
.text-gray-300{color:var(--faint)}.text-gray-400{color:var(--faint)}
.text-gray-500{color:var(--faint)}.text-gray-600{color:var(--body)}
.text-gray-700{color:var(--body)}.text-gray-800{color:var(--ink)}.text-gray-900{color:var(--ink)}
.text-indigo-100{color:var(--ink)}
.bg-white{background:#fff}.bg-gray-900{background:var(--ink)}
.shadow-lg{box-shadow:var(--shadow-card)}
.hover\:underline:hover{text-decoration:underline}
.hover\:opacity-90:hover{opacity:.9}
.hover\:text-white:hover{color:var(--ink)}
.hover\:bg-gray-100:hover{opacity:.9}
.transition{transition:all .2s var(--ease)}
.duration-200{transition-duration:.2s}
@media(min-width:768px){
  .md\:flex-row{flex-direction:row}
  .md\:text-4xl{font-size:2.25rem}
  .md\:text-5xl{font-size:3rem}
}

/* ==========================================================================
   SHARED GOLDEN HOUR CHROME
   ========================================================================== */

/* ---------- Skip link ---------- */
.sp-skip-link,.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:var(--cream);padding:12px 18px;font-weight:600;font-size:14px}
.sp-skip-link:focus,.skip:focus{left:0;color:var(--cream)}

/* ---------- Nav ---------- */
.gh-nav{position:sticky;top:0;left:0;right:0;z-index:50;background:rgba(255,253,246,.88);backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);border-bottom:1px solid var(--line)}
.gh-nav-in{max-width:var(--w);margin:0 auto;padding:0 28px;height:64px;display:flex;align-items:center;justify-content:space-between}
.gh-brand{display:flex;align-items:center;gap:10px;font-weight:650;font-size:17.5px;letter-spacing:-.02em;color:var(--ink)}
.gh-brand img{width:32px;height:32px;border-radius:9px;flex:none}
.gh-nav-links{display:flex;gap:26px;font-size:14.5px;font-weight:500;color:var(--body)}
.gh-nav-links a:hover{color:var(--ink)}
/* Right-hand nav cluster: the web-app sign-in link plus the store CTA. Kept as
   one flex child so .gh-nav-in stays a three-child space-between layout. The
   .nav-login colours are set explicitly because .seo-page a / .seo-page a:hover
   would otherwise paint it as body copy link gold (see golden_css_test.go). */
.gh-nav-cta{display:flex;align-items:center;gap:18px}
.gh-nav .nav-login{font-size:14px;font-weight:600;color:var(--body);white-space:nowrap;transition:color .2s var(--ease)}
.gh-nav .nav-login:hover,.gh-nav .nav-login:focus-visible{color:var(--ink)}
.gh-nav .btn-nav{padding:10px 20px;font-size:14px;background:var(--ink);color:var(--cream);border-radius:999px;font-weight:600;transition:background .2s var(--ease)}
.gh-nav .btn-nav:hover{background:#2C2517;color:var(--cream)}
@media(max-width:840px){.gh-nav-links{display:none}}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:15px;font-weight:600;letter-spacing:-.01em;padding:13px 24px;border-radius:99px;border:0;cursor:pointer;transition:background .2s var(--ease),transform .2s var(--ease),opacity .2s}
.btn-ink{background:var(--ink);color:var(--cream)}
.btn-ink:hover{background:#2C2517;color:var(--cream)}
.btn-cream{background:var(--cream);color:var(--ink)}
.btn-cream:hover{opacity:.9}
.btn:active{transform:scale(.985)}

/* ---------- Store badges ---------- */
/* Selectors are written as `.seo-page .store-badge` (specificity 0,2,0) so they
   beat the sitewide `.seo-page a{color:var(--text-link)}` link rule. Store
   badges are <a> elements; without this the ink slab would inherit the gold
   link colour (gold-on-ink text) and, worse, the ink `:hover` link colour would
   make the text invisible on the ink background. Cream text on the ink slab
   matches the homepage badges exactly. Bare `.store-badge` selectors stay as a
   fallback for the (non-.seo-page) homepage. */
.badges{display:flex;gap:12px;flex-wrap:wrap}
.store-badge,.seo-page .store-badge{display:inline-flex;align-items:center;gap:10px;border-radius:13px;padding:10px 18px 10px 14px;min-height:56px;background:var(--ink);color:var(--cream);transition:opacity .2s var(--ease),transform .2s var(--ease)}
.store-badge:hover,.seo-page .store-badge:hover{opacity:.85;background:var(--ink);color:var(--cream)}
.store-badge:active{transform:scale(.985)}
.store-badge svg,.seo-page .store-badge svg{width:24px;height:24px;flex:none;fill:var(--cream)}
.store-badge .txt{display:flex;flex-direction:column;line-height:1.15;text-align:left}
.store-badge .txt .s,.store-badge .s,.seo-page .store-badge .s{font-size:10.5px;font-weight:500;opacity:.75;letter-spacing:.01em;color:var(--cream)}
.store-badge .txt .l,.store-badge .l,.seo-page .store-badge .l{font-size:17px;font-weight:600;letter-spacing:-.01em;color:var(--cream)}
.on-cream .store-badge,.seo-page.on-cream .store-badge,.seo-page .on-cream .store-badge{background:var(--ink);color:var(--cream)}
.on-cream .store-badge svg{fill:var(--cream)}

/* ---------- Footer (identical structure to homepage) ---------- */
.gh-footer,.sp-footer{border-top:1px solid var(--line);padding:56px 0 44px;font-size:14px;color:var(--faint);background:var(--cream)}
.gh-footer .foot-wrap{max-width:var(--w);margin:0 auto;padding:0 28px}
.gh-footer .foot-grid{display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap}
.gh-footer .foot-brand{display:flex;align-items:center;gap:10px;font-weight:650;font-size:16px;color:var(--ink)}
.gh-footer .foot-brand img{width:28px;height:28px;border-radius:8px}
.gh-footer .foot-links{display:flex;gap:22px;font-weight:500;flex-wrap:wrap;color:var(--body)}
.gh-footer .foot-links a{color:var(--body)}
.gh-footer .foot-links a:hover{color:var(--ink)}
.gh-footer .foot-bottom{margin-top:34px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:13px;color:var(--faint)}
.gh-footer .foot-badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.sp-footer a{color:var(--body)}
.sp-footer a:hover{color:var(--ink)}

/* ---------- Sticky mobile "Get the app" bar ---------- */
.gh-mbar,.mbar{position:fixed;left:0;right:0;bottom:0;z-index:60;background:rgba(23,19,12,.92);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-top:1px solid var(--line-dark);color:var(--cream);padding:10px 16px calc(10px + env(safe-area-inset-bottom));display:none;align-items:center;justify-content:space-between;gap:14px}
.gh-mbar .m-l{display:flex;align-items:center;gap:11px}
.gh-mbar .m-l img{width:38px;height:38px;border-radius:10px}
.gh-mbar .m-t{font-size:14px;font-weight:650;letter-spacing:-.01em;color:var(--cream)}
.gh-mbar .m-s{font-size:12px;color:rgba(255,253,246,.6);font-weight:500}
.gh-mbar .btn{padding:11px 20px;font-size:14px;flex:none;background:var(--cream);color:var(--ink)}
.gh-mbar .btn:hover{color:var(--ink)}
@media(max-width:840px){.gh-mbar{display:flex}}

/* ==========================================================================
   SP-* COMPONENTS re-skinned to Golden Hour
   ========================================================================== */

/* ---------- Old header/footer fallbacks (in case a template still uses them) ---------- */
.sp-header{background:rgba(255,253,246,.92);backdrop-filter:blur(16px);border-bottom:1px solid var(--line);color:var(--ink)}
.sp-header a{color:var(--ink)!important}
.sp-header svg{color:var(--ink)!important;fill:var(--ink)!important}
.sp-header a.sp-header-cta{background:var(--ink)!important;color:var(--cream)!important;font-weight:600!important;padding:.5rem 1rem;border-radius:999px;font-size:.875rem}

/* ---------- Hero sections ---------- */
.sp-hero{background:var(--cream-2);border-bottom:1px solid var(--line);padding:3rem 1rem 2.5rem;text-align:center;position:relative;overflow:hidden}
.sp-hero-indigo,.sp-hero-green,.sp-hero-purple{background:var(--cream-2);border-bottom:1px solid var(--line)}
.sp-hero-indigo::before,.sp-hero::before{content:none}
.sp-hero h1{color:var(--ink);font-weight:650;letter-spacing:-.03em;line-height:1.08;margin-bottom:.6rem}
.sp-hero h1 .serif{color:var(--gold)}
.sp-hero p{color:var(--body);line-height:1.65}
.hero-section{background:var(--cream-2);border-bottom:1px solid var(--line)}

/* ---------- Breadcrumb (gold micro-label style) ---------- */
.sp-breadcrumb{color:var(--faint);font-size:.8125rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;margin-bottom:1.25rem}
.sp-breadcrumb a{color:var(--gold-deep)}
.sp-breadcrumb a:hover{color:var(--ink);text-decoration:underline}
.sp-breadcrumb-current{color:var(--body)}
/* Consistent breadcrumb list reset: every family's breadcrumb <ol>/<ul> must
   never paint list markers (ordered-list numbers were overlapping the labels
   on explore/policy/community, whose <ol> lacked list-style:none). */
nav[aria-label="Breadcrumb"] ol,
nav[aria-label="Breadcrumb"] ul{list-style:none;margin:0;padding:0}
nav[aria-label="Breadcrumb"] li{list-style:none}

/* ---------- Cards ---------- */
.sp-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-card);padding:1.5rem;transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease)}
.sp-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-shot);border-color:var(--gold-soft)}
.sp-card-body{padding:1.5rem}
.sp-card-lg{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-card);padding:2.5rem 3rem}
@media(max-width:640px){.sp-card-lg{padding:1.75rem 1.5rem}}

/* ---------- Content / Prose (comfortable reading measure) ---------- */
.sp-content{color:var(--ink);font-size:1.0625rem;line-height:1.75;max-width:68ch}
.sp-content>:first-child{margin-top:0}
.sp-content h2{font-size:1.6rem;font-weight:650;letter-spacing:-.02em;line-height:1.2;color:var(--ink);margin:2.5rem 0 .9rem;padding-top:1.9rem;border-top:1px solid var(--line)}
.sp-content>h2:first-child{border-top:none;padding-top:0;margin-top:0}
.sp-content h3{font-size:1.25rem;font-weight:650;letter-spacing:-.015em;line-height:1.35;color:var(--ink);margin:1.9rem 0 .65rem}
.sp-content h2 .serif,.sp-content h3 .serif{color:var(--gold)}
.sp-content p{margin:0 0 1.15rem;color:var(--ink)}
.sp-content ul,.sp-content ol{margin:0 0 1.25rem;padding-left:1.4rem}
.sp-content li{margin-bottom:.5rem;color:var(--ink)}
.sp-content li::marker{color:var(--gold)}
.sp-content strong{color:var(--ink);font-weight:650}
.sp-content a{color:var(--gold-deep);text-decoration:underline;text-decoration-color:var(--gold-soft);text-underline-offset:2px}
.sp-content a:hover{color:var(--ink)}
.sp-content blockquote{margin:1.6rem 0;padding:.25rem 0 .25rem 1.25rem;border-left:3px solid var(--gold);color:var(--body);font-family:'Fraunces',Georgia,serif;font-style:italic;font-size:1.15rem}
.sp-content img{border-radius:var(--r-md);box-shadow:var(--shadow-card);margin:1.5rem 0}

/* Fraunces italic intro / lead paragraph */
.sp-lead{font-family:'Fraunces',Georgia,serif;font-style:italic;font-size:1.35rem;line-height:1.5;color:var(--body);max-width:60ch;margin:0 0 1.75rem}

/* ---------- Badges / Pills / Chips ---------- */
.sp-badge,.badge{display:inline-flex;align-items:center;gap:.375rem;padding:.375rem .75rem;border-radius:999px;font-size:.8125rem;font-weight:600;background:var(--cream-2);border:1px solid var(--line);color:var(--body)}
.sp-badge-green{background:rgba(46,125,70,.1);color:var(--green);border-color:rgba(46,125,70,.25)}
.sp-pill{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;border-radius:999px;font-weight:600;font-size:.875rem;border:1px solid var(--line);background:var(--cream-2);color:var(--body);transition:all .2s var(--ease);text-decoration:none}
.sp-pill:hover{transform:translateY(-1px);border-color:var(--gold-soft)}
.sp-chip,a.sp-chip{display:inline-flex;align-items:center;gap:.375rem;padding:.3125rem .75rem;border-radius:999px;font-size:.8125rem;font-weight:650;letter-spacing:.02em;line-height:1.4;text-decoration:none;color:var(--gold-deep);background:rgba(201,138,59,.1);border:1px solid rgba(201,138,59,.28)}
a.sp-chip{transition:transform .15s var(--ease),background .15s var(--ease),border-color .15s var(--ease)}
a.sp-chip:hover{transform:translateY(-1px);background:rgba(201,138,59,.16);border-color:rgba(201,138,59,.42)}
.feature-chip{display:inline-flex;align-items:center;gap:.375rem;padding:.4rem .85rem;border-radius:999px;font-size:.8125rem;font-weight:600;background:var(--cream-2);border:1px solid var(--line);color:var(--body)}

/* ---------- Trust badges ---------- */
.sp-trust-badge,.trust-badge{display:inline-flex;align-items:center;gap:.375rem;padding:.5rem 1rem;border-radius:999px;font-size:.875rem;font-weight:500;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-card);color:var(--body)}

/* ---------- FAQ accordion (homepage details/summary pattern) ---------- */
.sp-faq{border:1px solid var(--line);border-radius:var(--r-md);margin-bottom:.75rem;background:#fff;transition:box-shadow .2s var(--ease),border-color .2s var(--ease)}
.sp-faq:hover{border-color:var(--gold-soft);box-shadow:var(--shadow-card)}
.sp-faq summary{padding:1.1rem 1.35rem;cursor:pointer;font-weight:600;font-size:1.0625rem;letter-spacing:-.01em;color:var(--ink);display:flex;align-items:center;justify-content:space-between;list-style:none;border-radius:var(--r-md)}
.sp-faq summary::-webkit-details-marker{display:none}
.sp-faq summary svg{color:var(--gold)!important;transition:transform .25s var(--ease)}
.sp-faq[open] summary{color:var(--ink)}
.sp-faq[open] summary svg{transform:rotate(180deg)}
.sp-faq-answer{padding:0 1.35rem 1.35rem;color:var(--body);line-height:1.7;font-size:1rem;max-width:64ch}

/* Homepage-style bare faq list */
.faq-list{max-width:740px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;padding:22px 4px;font-size:17px;font-weight:600;letter-spacing:-.015em}
.faq summary::-webkit-details-marker{display:none}
.faq details p{padding:0 44px 22px 4px;font-size:15.5px;color:var(--body);max-width:62ch}

/* ---------- CTA block (dark coffee slab, cream badges) ---------- */
.sp-cta{position:relative;background:var(--coffee-deep);border-radius:var(--r-lg);box-shadow:var(--shadow-card);padding:3rem 2rem;text-align:center;overflow:hidden;color:var(--cream)}
.sp-cta h2{color:var(--cream)!important;font-weight:650;letter-spacing:-.02em}
.sp-cta h2 .serif{color:var(--gold-soft)}
.sp-cta p{color:rgba(255,253,246,.72)!important;line-height:1.6}
.sp-cta-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:.85rem 2rem;border-radius:999px;color:var(--ink)!important;font-weight:600;background:var(--cream)!important;box-shadow:var(--shadow-card);transition:transform .2s var(--ease),opacity .2s var(--ease);text-decoration:none!important}
.sp-cta-button:hover{transform:translateY(-2px);opacity:.94;color:var(--ink)!important}
.sp-cta-button-pulse{animation:none}
.sp-cta .badges{justify-content:center}
.sp-cta a:not(.sp-cta-button):not(.store-badge){color:var(--gold-soft)}

/* ---------- Related cards ---------- */
.sp-related-card,.related-card{background:#fff;border-radius:var(--r-md);border:1px solid var(--line);padding:1.25rem 1.5rem;box-shadow:var(--shadow-card);transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease);text-decoration:none;display:block;color:var(--ink)}
.sp-related-card:hover,.related-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-shot);border-color:var(--gold-soft)}
.sp-related-card span{color:var(--gold-deep);font-weight:600}

/* ---------- Share buttons ---------- */
.sp-share-row{display:flex;align-items:center;gap:.25rem;justify-content:center;flex-wrap:wrap}
.sp-share-label{font-size:.75rem;font-weight:650;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-deep);margin-right:.5rem}
.sp-share-btn{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:50%;color:var(--faint);background:none;border:none;cursor:pointer;transition:color .2s,background .2s;text-decoration:none;padding:0}
.sp-share-btn:hover{color:var(--ink);background:var(--cream-2)}

/* ---------- Section headings ---------- */
.sp-section-heading,.section-heading,.section-title{font-size:1.5rem;font-weight:650;letter-spacing:-.02em;color:var(--ink);margin-bottom:1.25rem}
.sp-section-heading .serif,.section-heading .serif,.section-title .serif{color:var(--gold)}
.section-subtitle{color:var(--body);font-size:1.0625rem;line-height:1.65}

/* ---------- Icon circles ---------- */
.sp-icon-circle{width:2.5rem;height:2.5rem;border-radius:12px;display:flex;align-items:center;justify-content:center;color:var(--gold-deep);background:rgba(201,138,59,.12);flex-shrink:0}
.sp-icon-circle svg{color:var(--gold-deep);fill:var(--gold-deep)}

/* ---------- Pricing cards ---------- */
.sp-pricing-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-card);padding:1.5rem}

/* ---------- Area chips ---------- */
.sp-area-chip{display:block;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line);background:#fff;text-decoration:none;transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.sp-area-chip:hover{transform:translateY(-2px);box-shadow:var(--shadow-shot);border-color:var(--gold-soft)}

/* ---------- Table (clean on cream, gold header accents) ---------- */
.sp-table{width:100%;border-collapse:collapse;font-size:.95rem}
.sp-table th{background:var(--cream-2);color:var(--ink);font-weight:650;font-size:.8125rem;letter-spacing:.04em;text-transform:uppercase;padding:.85rem 1rem;text-align:left;border-bottom:2px solid var(--gold-soft)}
.sp-table td{padding:.85rem 1rem;border-bottom:1px solid var(--line);color:var(--ink)}
.sp-table tr:last-child td{border-bottom:none}
.sp-table tr:hover td{background:var(--cream-2)}
/* Comparison / content tables inside prose */
.sp-content table{width:100%;border-collapse:collapse;font-size:.95rem;margin:1.5rem 0;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.sp-content th{background:var(--cream-2);color:var(--ink);font-weight:650;font-size:.8125rem;letter-spacing:.04em;text-transform:uppercase;padding:.85rem 1rem;text-align:left;border-bottom:2px solid var(--gold-soft)}
.sp-content td{padding:.85rem 1rem;border-bottom:1px solid var(--line);color:var(--ink);vertical-align:top}
.sp-content tr:last-child td{border-bottom:none}

/* ---------- Sidebar / TOC ---------- */
.sp-toc{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:1.5rem}
/* Sticky only when the legal layout is a two-column grid (>=1024px). Below that
   the ToC stacks above the content in a single column; keeping it sticky made it
   overlap the content scrolling beneath it on mobile. */
@media(min-width:1024px){.sp-toc{position:sticky;top:80px}}
.sp-toc-title{font-weight:650;color:var(--gold-deep);margin-bottom:.75rem;font-size:.75rem;text-transform:uppercase;letter-spacing:.12em}
.sp-toc-link{display:block;padding:.375rem .75rem;font-size:.8125rem;color:var(--body);border-left:2px solid var(--line);text-decoration:none;transition:color .2s,border-color .2s}
.sp-toc-link:hover{color:var(--gold-deep);border-left-color:var(--gold);background:var(--cream-2)}

/* ---------- Prose wrapper defaults (Tailwind .prose replacement) ---------- */
.prose{color:var(--ink);max-width:68ch;line-height:1.75}
.prose h2{font-size:1.6rem;font-weight:650;letter-spacing:-.02em;color:var(--ink);margin:2.5rem 0 .9rem}
.prose h3{font-size:1.25rem;font-weight:650;color:var(--ink);margin:1.9rem 0 .65rem}
.prose p{margin:0 0 1.15rem}
.prose a{color:var(--gold-deep);text-decoration:underline;text-decoration-color:var(--gold-soft)}
.prose ul,.prose ol{margin:0 0 1.25rem;padding-left:1.4rem}
.prose li::marker{color:var(--gold)}
.prose-gray{color:var(--body)}

/* ---------- Reveal-on-scroll (matches homepage .rv) ---------- */
.rv{opacity:0;transform:translateY(14px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- Responsive ---------- */
@media(max-width:640px){
  .container{padding:0 20px}
  .gh-nav-in{padding:0 20px}
  /* Below 640px .gh-nav-links is already hidden, so the bar is brand + the
     cta cluster. Tighten the cluster so brand, "Log in" and the store pill
     still fit a 320px viewport without wrapping. */
  .gh-nav-cta{gap:12px}
  .gh-nav .btn-nav{padding:9px 16px}
  .sp-content{font-size:1rem}
}

/* ==========================================================================
   Guide article art direction (guides-formatting)
   Category hero banner, editorial callouts, in-page TOC. Appended at the end
   so the block is self-contained and easy to merge.
   ========================================================================== */

/* Category hero banner: full-bleed photographic image above the article card. */
.sp-guide-hero{position:relative;max-width:56rem;margin:0 auto 2rem;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-shot);aspect-ratio:1200/480;background:var(--cream-2)}
.sp-guide-hero img{display:block;width:100%;height:100%;object-fit:cover;margin:0;border-radius:0;box-shadow:none}
.sp-guide-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(13,10,7,.34),rgba(13,10,7,0) 55%);pointer-events:none}
@media(max-width:640px){.sp-guide-hero{border-radius:var(--r-md);margin-bottom:1.5rem}}

/* Editorial callout: pulls one key piece of advice out of the flow. */
.sp-callout{margin:1.9rem 0;padding:1.15rem 1.4rem 1.15rem 1.25rem;border-left:4px solid var(--gold);border-radius:0 var(--r-md) var(--r-md) 0;background:var(--cream-2)}
.sp-callout p{margin:0;color:var(--ink);line-height:1.65}
.sp-callout .sp-callout-label{display:block;font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:.4rem}
.sp-content .sp-callout p:last-child{margin-bottom:0}

/* In-page table of contents (rendered for long articles). */
.sp-toc-inline{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-card);padding:1.35rem 1.5rem;margin:0 0 2rem}
.sp-toc-inline .sp-toc-title{margin-bottom:.85rem}
.sp-toc-inline ol{list-style:none;margin:0;padding:0;columns:2;column-gap:2rem}
.sp-toc-inline li{margin:0 0 .5rem;break-inside:avoid}
.sp-toc-inline a{color:var(--body);text-decoration:none;font-size:.95rem;line-height:1.4;border-bottom:1px solid transparent;transition:color .15s var(--ease),border-color .15s var(--ease)}
.sp-toc-inline a:hover{color:var(--gold-deep);border-bottom-color:var(--gold-soft)}
.sp-content h2[id],.sp-content h3[id]{scroll-margin-top:88px}
@media(max-width:640px){.sp-toc-inline ol{columns:1}}

/* ==========================================================================
   ARTICLE REDESIGN v2 (article-redesign-v2)
   Editorial guide article: art-directed header, TL;DR answer box, sticky
   right-rail TOC with scroll-spy, in-flow product moment, share row,
   photographic related cards, end-of-article conversion slab. Category
   accent (--cat-color) gives each guide family a temperature on the cream
   canvas. Appended as a self-contained block. No em-dashes in copy.
   ========================================================================== */

/* ---------- Art-directed header ---------- */
.gh-article-head{background:var(--cream-2);border-bottom:1px solid var(--line);padding:2.75rem 0 0}
.gh-head-in{max-width:44rem;margin:0 auto;padding:0 28px}
.gh-head-crumb{margin:0 0 1.5rem;text-align:left}
.gh-head-crumb ol{justify-content:flex-start}
.gh-kicker{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--cat-color,var(--gold-deep));margin-bottom:1rem;text-decoration:none}
.gh-kicker:hover{opacity:.82}
.gh-article-h1{font-family:'Inter',sans-serif;font-size:2.6rem;font-weight:650;letter-spacing:-.032em;line-height:1.06;color:var(--ink);margin:0 0 1.1rem;max-width:20ch}
.gh-article-h1 .serif{color:var(--cat-color,var(--gold));font-weight:400}
.gh-dek{font-family:'Fraunces',Georgia,serif;font-style:italic;font-size:1.4rem;line-height:1.45;color:var(--body);max-width:40ch;margin:0 0 1.4rem}
.gh-meta{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;font-size:.85rem;font-weight:500;color:var(--faint);padding-bottom:2.5rem}
.gh-meta span{white-space:nowrap}

/* Hero image: generously inset, rounded, soft shadow, gradient scrim. */
.gh-head-hero{max-width:56rem;margin:0 auto;transform:translateY(2.5rem);position:relative;z-index:2}
@media(max-width:900px){.gh-head-hero{max-width:calc(100% - 40px)}}
@media(max-width:640px){
  .gh-article-head{padding-top:1.75rem}
  .gh-article-h1{font-size:1.9rem;letter-spacing:-.028em}
  .gh-dek{font-size:1.2rem}
  .gh-head-hero{transform:translateY(1.75rem)}
}

/* ---------- Article layout: body column + sticky rail ---------- */
.gh-article-wrap{max-width:var(--w);margin:0 auto;padding:4.5rem 28px 3.5rem}
.gh-article-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:3.5rem;max-width:44rem;margin:0 auto}
.gh-article-col{min-width:0}
@media(min-width:1080px){
  .gh-article-grid{grid-template-columns:minmax(0,44rem) 15rem;max-width:none;justify-content:center;align-items:start}
}
@media(max-width:640px){.gh-article-wrap{padding:3rem 20px 3rem}}

/* ---------- TL;DR answer box ---------- */
.gh-tldr{background:var(--cream-2);border:1px solid var(--line);border-left:4px solid var(--cat-color,var(--gold));border-radius:0 var(--r-md) var(--r-md) 0;padding:1.35rem 1.6rem;margin:0 0 2.5rem}
.gh-tldr-label{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--cat-color,var(--gold-deep));margin-bottom:.5rem}
.gh-tldr p{margin:0;font-size:1.08rem;line-height:1.6;color:var(--ink);font-weight:450}

/* ---------- Article body typography ---------- */
.gh-article-body{font-size:1.19rem;line-height:1.72;max-width:none;color:var(--ink)}
.gh-article-body>:first-child{margin-top:0}
.gh-article-body p{margin:0 0 1.35rem}
/* Fraunces-scale lead treatment on the article's very first paragraph only. */
.gh-body-lead>p:first-of-type{font-size:1.34rem;line-height:1.55;color:var(--coffee)}
.gh-article-body h2{font-size:1.75rem;font-weight:650;letter-spacing:-.022em;line-height:1.18;color:var(--ink);margin:4rem 0 1.1rem;padding-top:0;border-top:none;display:flex;flex-direction:column;gap:.35rem}
.gh-body-lead>h2:first-child{margin-top:1rem}
.gh-article-body h2 .sp-h2-index{font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:400;font-size:1.05rem;line-height:1;color:var(--cat-color,var(--gold));letter-spacing:.02em}
.gh-article-body h3{font-size:1.32rem;font-weight:650;letter-spacing:-.015em;line-height:1.32;color:var(--ink);margin:2.4rem 0 .7rem}
.gh-article-body p+h3{margin-top:2.4rem}
.gh-article-body strong{color:var(--ink);font-weight:650}
.gh-article-body a{color:var(--gold-deep);text-decoration:underline;text-decoration-color:var(--gold-soft);text-underline-offset:2px}
.gh-article-body a:hover{color:var(--ink)}
.gh-article-body ul,.gh-article-body ol{margin:0 0 1.5rem;padding-left:1.5rem}
.gh-article-body li{margin-bottom:.6rem;padding-left:.2rem}
.gh-article-body li::marker{color:var(--cat-color,var(--gold));font-weight:600}
.gh-article-body blockquote{margin:2rem 0;padding:.4rem 0 .4rem 1.5rem;border-left:3px solid var(--cat-color,var(--gold));font-family:'Fraunces',Georgia,serif;font-style:italic;font-size:1.42rem;line-height:1.45;color:var(--coffee)}
.gh-article-body h2[id],.gh-article-body h3[id]{scroll-margin-top:96px}
/* Restyled editorial callout (warm card, category accent, label + icon) */
.gh-article-body .sp-callout{margin:2rem 0;padding:1.3rem 1.5rem;border:1px solid var(--line);border-left:4px solid var(--cat-color,var(--gold));border-radius:0 var(--r-md) var(--r-md) 0;background:#fff;box-shadow:var(--shadow-card);position:relative}
.gh-article-body .sp-callout .sp-callout-label{display:inline-flex;align-items:center;gap:.4rem;font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--cat-color,var(--gold-deep));margin-bottom:.5rem}
.gh-article-body .sp-callout .sp-callout-label::before{content:"";width:.85rem;height:.85rem;flex:none;background:var(--cat-color,var(--gold));-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4M12 3a6 6 0 0 0-4 10.5c.5.5 1 1.2 1 2.5h6c0-1.3.5-2 1-2.5A6 6 0 0 0 12 3z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4M12 3a6 6 0 0 0-4 10.5c.5.5 1 1.2 1 2.5h6c0-1.3.5-2 1-2.5A6 6 0 0 0 12 3z'/%3E%3C/svg%3E") center/contain no-repeat}
.gh-article-body .sp-callout p{margin:0;line-height:1.6;color:var(--ink)}
.gh-article-body table{width:100%;border-collapse:collapse;font-size:1rem;margin:1.75rem 0;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.gh-article-body th{background:var(--cream-2);color:var(--ink);font-weight:650;font-size:.8125rem;letter-spacing:.04em;text-transform:uppercase;padding:.85rem 1rem;text-align:left;border-bottom:2px solid var(--cat-color,var(--gold-soft))}
.gh-article-body td{padding:.85rem 1rem;border-bottom:1px solid var(--line);vertical-align:top}
@media(max-width:640px){
  .gh-article-body{font-size:1.08rem}
  .gh-article-body>p:first-of-type{font-size:1.18rem}
  .gh-article-body h2{font-size:1.5rem;margin-top:3rem}
}

/* ---------- In-flow product moment: table card ---------- */
.gh-table-card{margin:3.25rem 0;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-shot);overflow:hidden;display:flex;flex-wrap:wrap}
.gh-table-card-face{background:linear-gradient(135deg,var(--coffee),var(--coffee-deep));color:var(--cream);padding:1.5rem 1.7rem;min-width:15rem;flex:1 1 15rem;display:flex;flex-direction:column;justify-content:center;gap:.25rem;position:relative}
.gh-table-card-face::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 80% at 100% 0,rgba(201,138,59,.28),transparent 60%);pointer-events:none}
.gh-table-day{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-soft)}
.gh-table-title{font-size:1.3rem;font-weight:650;letter-spacing:-.02em;color:var(--cream)}
.gh-table-sub{font-size:.9rem;color:rgba(255,253,246,.7);font-weight:500}
.gh-table-card-body{padding:1.5rem 1.7rem;flex:2 1 16rem;display:flex;flex-direction:column;justify-content:center;gap:1rem}
.gh-table-line{margin:0;font-size:1.1rem;line-height:1.5;font-weight:500;color:var(--ink)}
.gh-table-cta{display:inline-flex;align-self:flex-start;align-items:center;padding:.7rem 1.5rem;border-radius:999px;background:var(--ink);color:var(--cream)!important;font-weight:600;font-size:.95rem;text-decoration:none!important;transition:background .2s var(--ease),transform .2s var(--ease)}
.gh-table-cta:hover{background:#2C2517;color:var(--cream)!important;transform:translateY(-1px)}

/* ---------- Share row ---------- */
.gh-share{margin:3.25rem 0 0;padding:1.75rem 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.gh-share-head{font-family:'Fraunces',Georgia,serif;font-style:italic;font-size:1.25rem;color:var(--ink);margin-bottom:1rem}
.gh-share-chips{display:flex;flex-wrap:wrap;gap:.6rem}
.gh-chip{display:inline-flex;align-items:center;gap:.5rem;padding:.55rem 1rem;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--body)!important;font-size:.9rem;font-weight:550;cursor:pointer;text-decoration:none!important;transition:border-color .18s var(--ease),color .18s var(--ease),background .18s var(--ease)}
.gh-chip:hover{border-color:var(--gold-soft);color:var(--ink)!important;background:var(--cream-2)}
.gh-chip svg{flex:none}

/* ---------- Related reading: photographic cards ---------- */
.gh-related{margin:3.25rem 0 0}
.gh-related-head{font-size:1.5rem;font-weight:650;letter-spacing:-.02em;color:var(--ink);margin:0 0 1.5rem}
.gh-related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.gh-related-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow-card);text-decoration:none;color:var(--ink);transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s var(--ease)}
.gh-related-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-shot);border-color:var(--gold-soft)}
.gh-related-thumb{display:block;aspect-ratio:16/10;background-size:cover;background-position:center;background-color:var(--cream-2)}
.gh-related-body{padding:.95rem 1.1rem 1.15rem;display:flex;flex-direction:column;gap:.4rem}
.gh-related-cat{font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-deep)}
.gh-related-title{font-size:1rem;font-weight:600;line-height:1.32;color:var(--ink);letter-spacing:-.01em}
@media(max-width:820px){.gh-related-grid{grid-template-columns:1fr;gap:.85rem}.gh-related-card{flex-direction:row;align-items:stretch}.gh-related-thumb{width:38%;aspect-ratio:auto;min-height:5.5rem;flex:none}.gh-related-body{justify-content:center}}

/* ---------- End-of-article conversion slab ---------- */
.gh-convert{position:relative;margin:3.25rem 0 0;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-shot);isolation:isolate;min-height:20rem;display:flex}
.gh-convert-bg{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0;transform:scale(1.02)}
.gh-convert-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(105deg,rgba(13,10,7,.94) 30%,rgba(13,10,7,.72) 62%,rgba(13,10,7,.55))}
.gh-convert-in{position:relative;z-index:2;padding:2.75rem 2.5rem;color:var(--cream);display:flex;flex-direction:column;justify-content:center;gap:1rem;max-width:34rem}
.gh-convert-h2{font-size:1.9rem;font-weight:650;letter-spacing:-.025em;line-height:1.12;color:var(--cream);margin:0}
.gh-convert-p{font-size:1.08rem;line-height:1.55;color:rgba(255,253,246,.82);margin:0}
.gh-convert-actions{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap;margin-top:.35rem}
.gh-convert-qr{display:flex;flex-direction:column;align-items:center;gap:.4rem}
.gh-convert-qr img{border-radius:10px;background:#fff;padding:5px}
.gh-convert-qr span{font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,253,246,.65)}
.gh-convert-more{align-self:flex-start;margin-top:.4rem;font-size:.95rem;font-weight:600;color:var(--gold-soft)!important;text-decoration:none!important}
.gh-convert-more:hover{color:var(--cream)!important}
@media(max-width:640px){.gh-convert-in{padding:2rem 1.5rem}.gh-convert-h2{font-size:1.55rem}.gh-convert-scrim{background:linear-gradient(180deg,rgba(13,10,7,.82),rgba(13,10,7,.94))}}

/* ---------- Sticky right-rail TOC (desktop) ---------- */
.gh-rail{display:none}
@media(min-width:1080px){
  .gh-rail{display:block;position:sticky;top:96px;align-self:start}
  .gh-rail-title{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:1rem}
  .gh-rail-list{list-style:none;margin:0;padding:0;counter-reset:toc;border-left:1px solid var(--line)}
  .gh-rail-list li{counter-increment:toc;margin:0}
  .gh-rail-list a{display:flex;gap:.6rem;padding:.4rem 0 .4rem 1rem;margin-left:-1px;border-left:2px solid transparent;font-size:.875rem;line-height:1.4;color:var(--faint);text-decoration:none;transition:color .18s var(--ease),border-color .18s var(--ease)}
  .gh-rail-list a::before{content:counter(toc,decimal-leading-zero);font-family:'Fraunces',Georgia,serif;font-style:italic;font-size:.8rem;color:var(--gold-soft);flex:none;padding-top:.05rem}
  .gh-rail-list a:hover{color:var(--body)}
  .gh-rail-list a.is-active{color:var(--ink);border-left-color:var(--cat-color,var(--gold));font-weight:550}
  .gh-rail-list a.is-active::before{color:var(--cat-color,var(--gold))}
}

/* ---------- Mobile collapsible TOC ---------- */
.gh-toc-mobile{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-card);margin:0 0 2.5rem;overflow:hidden}
.gh-toc-mobile summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;padding:1rem 1.25rem}
.gh-toc-mobile summary::-webkit-details-marker{display:none}
.gh-toc-mobile-label{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep)}
.gh-toc-mobile summary svg{color:var(--gold);transition:transform .2s var(--ease)}
.gh-toc-mobile[open] summary svg{transform:rotate(180deg)}
.gh-toc-mobile .gh-toc-list{list-style:none;margin:0;padding:0 1.25rem 1rem;counter-reset:mtoc}
.gh-toc-mobile .gh-toc-list li{counter-increment:mtoc;margin:0}
.gh-toc-mobile .gh-toc-list a{display:flex;gap:.65rem;padding:.5rem 0;font-size:.95rem;color:var(--body);text-decoration:none;border-top:1px solid var(--line)}
.gh-toc-mobile .gh-toc-list li:first-child a{border-top:none}
.gh-toc-mobile .gh-toc-list a::before{content:counter(mtoc,decimal-leading-zero);font-family:'Fraunces',Georgia,serif;font-style:italic;font-size:.85rem;color:var(--gold);flex:none}
.gh-toc-mobile .gh-toc-list a:hover{color:var(--gold-deep)}
@media(min-width:1080px){.gh-toc-mobile{display:none}}

/* ---------- Comparison verdict box (article-redesign-v2) ---------- */
.gh-verdict{background:linear-gradient(135deg,var(--coffee),var(--coffee-deep));border-radius:var(--r-lg);box-shadow:var(--shadow-shot);padding:1.6rem 1.75rem;margin:0 0 2.5rem;color:var(--cream);position:relative;overflow:hidden}
.gh-verdict::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 100% 0,rgba(201,138,59,.24),transparent 58%);pointer-events:none}
.gh-verdict-label{position:relative;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-soft);margin-bottom:.6rem}
.gh-verdict p{position:relative;margin:0 0 1.15rem;font-size:1.12rem;line-height:1.55;color:var(--cream);font-weight:450}
.gh-verdict-cta{position:relative;display:inline-flex;align-items:center;padding:.7rem 1.5rem;border-radius:999px;background:var(--cream);color:var(--ink)!important;font-weight:600;font-size:.95rem;text-decoration:none!important;transition:transform .2s var(--ease),opacity .2s var(--ease)}
.gh-verdict-cta:hover{transform:translateY(-1px);opacity:.94;color:var(--ink)!important}

/* ---------- Compact editorial header (help + security articles) ---------- */
.gh-article-head-compact{padding:2.5rem 0 2.5rem}
.gh-article-head-compact .gh-head-in{max-width:800px}
.gh-article-head-compact .gh-article-h1{font-size:2.2rem;max-width:26ch;margin-bottom:.75rem}
.gh-article-head-compact .gh-meta{padding-bottom:0}
@media(max-width:640px){.gh-article-head-compact{padding:1.75rem 0}.gh-article-head-compact .gh-article-h1{font-size:1.7rem}}

/* ---------- Security article: understated, serious tone ---------- */
.gh-kicker-plain{color:var(--faint)}
.gh-article-head-security{background:var(--cream)}
.gh-article-head-security .gh-head-in{max-width:760px}