/* ==========================================================================
   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: light neutral canvas, ink text, KF blue 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. KF product tokens + self-hosted @font-face
     2. A small hand-written subset of layout utilities the templates use
     3. KF chrome: nav, footer, store badges, sticky mobile bar
     4. Every sp-* component re-skinned to the product system
     5. Article prose (comfortable ~68ch measure, 18px body)
   Light only. Blue is reserved for actions, links, focus states, and small
   brand marks; body copy remains near-black or neutral for reliable contrast.
   ========================================================================== */

/* ---------- 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: KF product light ---------- */
:root{
  --cream:#F5F5F7;--cream-2:#EEF0FA;--ink:#111318;--coffee:#171A24;--coffee-deep:#080A12;
  --gold:#2452D5;--gold-soft:#C9D2FF;--gold-deep:#2447B7;--body:#565963;--faint:#7A7E8A;
  --line:#E1E3EC;--line-dark:rgba(255,255,255,.14);--blue:#2452D5;--green:#237A58;
  --r-sm:12px;--r-md:18px;--r-lg:28px;
  --shadow-card:0 1px 2px rgba(17,19,24,.05),0 10px 30px -14px rgba(17,19,24,.14);
  --shadow-shot:0 2px 6px rgba(17,19,24,.18),0 34px 70px -30px rgba(17,19,24,.35);
  --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:#F7EAF0;--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(36,82,213,.22)}

/* ---------- Shared hand-drawn details ----------
   These are deliberately small and decorative: the page remains fully
   understandable when pseudo-elements are disabled, clipped, or omitted by a
   reader mode. The same marks are used on guides, comparisons, and trust pages
   so the public site feels like one product rather than a set of microsites. */
.seo-page .sp-hero,
.seo-page .gh-article-head,
.seo-page .hub-hero,
.seo-page .wow-sec-tight{position:relative;overflow:hidden;isolation:isolate}
.seo-page .gh-article-head::before{content:"";position:absolute;right:clamp(1.5rem,8vw,7rem);top:clamp(1.2rem,4vw,3rem);width:clamp(4.5rem,9vw,7rem);height:clamp(3rem,6vw,4.5rem);border:2px solid rgba(36,82,213,.32);border-radius:10px 14px 9px 13px;transform:rotate(7deg);background:repeating-linear-gradient(to bottom,transparent 0 10px,rgba(36,82,213,.2) 10px 11px);pointer-events:none;z-index:0}
.seo-page .gh-article-head::after{content:"✎";position:absolute;right:clamp(1.2rem,6vw,5rem);bottom:1.4rem;color:var(--blue);font-size:1.35rem;line-height:1;transform:rotate(-15deg);pointer-events:none;z-index:0}
.seo-page .hub-hero::before{content:"⌖";position:absolute;right:clamp(2rem,10vw,9rem);top:clamp(1rem,4vw,3rem);color:color-mix(in srgb,var(--hub-accent,var(--blue)) 70%,transparent);font-size:clamp(3rem,7vw,5rem);line-height:1;transform:rotate(-12deg);pointer-events:none;z-index:0}
.seo-page .hub-hero::after{content:"···  ↗";position:absolute;right:clamp(1.2rem,6vw,5rem);bottom:1.4rem;color:var(--hub-accent,var(--blue));font-size:1.25rem;letter-spacing:.22em;transform:rotate(-5deg);pointer-events:none;z-index:0}
.seo-page .wow-sec-tight::before{content:"↗";position:absolute;right:clamp(2rem,8vw,7rem);top:clamp(1.2rem,4vw,3rem);color:var(--blue);font-size:2rem;line-height:1;transform:rotate(-16deg);pointer-events:none;z-index:0}
.seo-page .wow-sec-tight::after{content:"______";position:absolute;right:clamp(1.2rem,6vw,5rem);bottom:1.4rem;color:var(--blue);font-size:.95rem;letter-spacing:-.12em;transform:rotate(-4deg);pointer-events:none;z-index:0}
@media(max-width:640px){
  .seo-page .gh-article-head::before{right:1rem;top:1rem;width:4.25rem;height:2.8rem}
  .seo-page .gh-article-head::after,.seo-page .hub-hero::after,.seo-page .wow-sec-tight::after{right:1rem;bottom:.9rem;font-size:1rem}
  .seo-page .hub-hero::before{right:1.5rem;top:1rem;font-size:3rem}
  .seo-page .wow-sec-tight::before{right:1rem;top:1rem;font-size:1.5rem}
}
@media(prefers-reduced-motion:reduce){
  .seo-page .gh-article-head::before{transform:rotate(7deg)}
}

/* Page-family marks. Each public surface gets a small visual cue tied to its
   job, so the doodle language feels authored rather than stamped everywhere. */
.seo-page .ab-hero::after{content:"◎  ·  ·";position:absolute;right:8%;bottom:12%;color:rgba(36,82,213,.56);font-size:1.35rem;letter-spacing:.2em;transform:rotate(-8deg);pointer-events:none}
.seo-page .vf-hero::after{content:"✓  ⌁";position:absolute;right:8%;top:18%;color:rgba(36,82,213,.62);font-size:1.45rem;letter-spacing:.18em;transform:rotate(10deg);pointer-events:none}
.seo-page.security-page .wow-dark::after{content:"⌁  ✓  ⌁";position:absolute;right:8%;top:16%;color:rgba(201,210,255,.7);font-size:1.2rem;letter-spacing:.2em;transform:rotate(-9deg);pointer-events:none}
.seo-page.press-page main>.wow-sec:first-child::before{content:"▱  ✎";position:absolute;right:8%;top:18%;color:rgba(36,82,213,.58);font-size:1.45rem;letter-spacing:.16em;transform:rotate(-8deg);pointer-events:none}
.seo-page.profile-page .w2-profile-hero::after{content:"♡  ···";position:absolute;right:8%;bottom:14%;color:rgba(36,82,213,.65);font-size:1.35rem;letter-spacing:.2em;transform:rotate(8deg);pointer-events:none}
.seo-page.invite-page .w2-invite-hero::after{content:"↗  ♡";position:absolute;right:8%;top:18%;color:rgba(36,82,213,.62);font-size:1.45rem;letter-spacing:.16em;transform:rotate(-10deg);pointer-events:none}
.seo-page.post-page .pa-hero::after{content:"▱  ·  ▶";position:absolute;right:8%;bottom:12%;color:rgba(36,82,213,.64);font-size:1.25rem;letter-spacing:.18em;transform:rotate(-7deg);pointer-events:none}
.seo-page.creators-page .cr-hero::after{content:"▢  ▶  ···";position:absolute;right:8%;top:18%;color:rgba(36,82,213,.62);font-size:1.25rem;letter-spacing:.18em;transform:rotate(8deg);pointer-events:none}
body.affiliates-page .hero::after{content:"↗  %";position:absolute;right:8%;top:18%;color:rgba(36,82,213,.68);font-size:1.45rem;letter-spacing:.18em;transform:rotate(-8deg);pointer-events:none}
body.cities-page .hero::after{content:"⌖  · ─ · ─ ·";position:absolute;right:8%;top:18%;color:rgba(201,210,255,.72);font-size:1.2rem;letter-spacing:.12em;transform:rotate(-8deg);pointer-events:none}
body.city-page .hero::after{content:"⌖  ···";position:absolute;right:8%;top:17%;color:rgba(201,210,255,.7);font-size:1.4rem;letter-spacing:.18em;transform:rotate(9deg);pointer-events:none}
body.this-week-page .hero::after{content:"▢  ·  ·";position:absolute;right:8%;top:17%;color:rgba(201,210,255,.72);font-size:1.35rem;letter-spacing:.2em;transform:rotate(-7deg);pointer-events:none}
@media(max-width:640px){
  .seo-page .ab-hero::after,.seo-page .vf-hero::after,.seo-page.security-page .wow-dark::after,.seo-page.press-page main>.wow-sec:first-child::before,.seo-page.profile-page .w2-profile-hero::after,.seo-page.invite-page .w2-invite-hero::after,.seo-page.post-page .pa-hero::after,.seo-page.creators-page .cr-hero::after,body.affiliates-page .hero::after,body.cities-page .hero::after,body.city-page .hero::after,body.this-week-page .hero::after{right:1.1rem;font-size:1rem}
}

/* Brand and primary navigation always use the same neutral/blue product
   language. Page-specific accent variables must never turn the logo gold. */
.seo-page .gh-brand,
.seo-page .brand,
.seo-page .cr-brand,
.seo-page .foot-brand,
.seo-page .cr-foot-brand,
.seo-page .gh-footer .foot-brand{color:var(--ink)!important}
.seo-page .gh-nav-links a,
.seo-page .nav-links a,
.seo-page .nav-login{color:var(--body)!important}
.seo-page .gh-nav-links a:hover,
.seo-page .nav-links a:hover,
.seo-page .nav-login:hover{color:var(--ink)!important}
.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,255,255,0.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:#1D3CA8;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:#1D3CA8;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(17,19,24,0.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,255,255,0.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,255,255,0.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{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(36,82,213,.1);border:1px solid rgba(36,82,213,.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(36,82,213,.16);border-color:rgba(36,82,213,.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,255,255,0.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(36,82,213,.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}
}

/* Keep both account actions visible on narrow phones without wrapping. */
@media(max-width:380px){
  .gh-nav-in{padding:0 12px;gap:12px}
  .gh-brand{font-size:16px;gap:7px;white-space:nowrap;flex:none}
  .gh-brand img{width:28px;height:28px}
  .gh-nav-cta{gap:10px;flex:none}
  .gh-nav .nav-login{font-size:12px;display:inline-flex;align-items:center;min-height:44px}
  .gh-nav .btn-nav{font-size:12px;padding:0 12px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;flex:none}
}

/* ==========================================================================
   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 img[src*="article-hero-first-dinner-arrival"],
.sp-guide-hero img[src*="article-hero-friends-park-catch-up"],
.sp-guide-hero img[src*="article-hero-beginner-drawing-group"],
.sp-guide-hero img[src*="article-hero-shared-home-dinner"],
.sp-guide-hero img[src*="article-hero-cafe-friendship-catch-up"]{object-position:center top}
@media(max-width:640px){
  .sp-guide-hero:has(img[src*="article-hero-first-dinner-arrival"]),
  .sp-guide-hero:has(img[src*="article-hero-friends-park-catch-up"]),
  .sp-guide-hero:has(img[src*="article-hero-beginner-drawing-group"]),
  .sp-guide-hero:has(img[src*="article-hero-shared-home-dinner"]),
  .sp-guide-hero:has(img[src*="article-hero-cafe-friendship-catch-up"]){aspect-ratio:3/2}
}
.sp-guide-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(17,19,24,0.34),rgba(17,19,24,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}
  /* No rail: a single centred column, not a body shoved left of an empty track. */
  .gh-article-grid:not(:has(> .gh-rail)){grid-template-columns:minmax(0,44rem)}
}
@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}
/* Engineering posts carry <pre> blocks and wide tables. Neither wraps by
   default, so at phone width one long line pushed the whole page sideways.
   They scroll inside their own box instead. */
.gh-article-body pre{overflow-x:auto;max-width:100%;margin:0 0 1.35rem;padding:1rem 1.15rem;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--cream-2);font-size:.92rem;line-height:1.55;color:var(--ink)}
.gh-article-body pre code{white-space:pre;background:none;padding:0;font-size:inherit}
.gh-article-body :not(pre)>code{font-size:.92em;background:var(--cream-2);padding:.1em .38em;border-radius:6px;color:var(--ink)}
.gh-article-body table{display:block;overflow-x:auto;max-width:100%}
.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(36,82,213,.22),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,255,255,0.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:#1D3CA8;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(17,19,24,0.94) 30%,rgba(17,19,24,0.72) 62%,rgba(17,19,24,0.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,255,255,0.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,255,255,0.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(17,19,24,0.82),rgba(17,19,24,0.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(36,82,213,.2),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}