/* ==========================================================================
   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)}
.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 ---------- */
.badges{display:flex;gap:12px;flex-wrap:wrap}
.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{opacity:.85;color:var(--cream)}
.store-badge:active{transform:scale(.985)}
.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{font-size:10.5px;font-weight:500;opacity:.75;letter-spacing:.01em}
.store-badge .txt .l,.store-badge .l{font-size:17px;font-weight:600;letter-spacing:-.01em}
.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)}

/* ---------- 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;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}
  .sp-content{font-size:1rem}
}