/* ═══════════════════════════════════════════════════
   SAMRO STUDIOS · the consulting look on generated pages (round 3, 2026-10-20)
   Loaded after a page's own stylesheet (public/pages/pages.css, the blog's
   inline src/blog.css, the terms page's own <style>) on pages whose
   <body> carries class "c-themed": /websites, /sites-web, /web-design,
   /conception-web, every /blog and /blogue page, /terms and /conditions.
   It swaps the old tokens (General Sans, blue buttons, white ground) for the
   home page's (Plus Jakarta Sans over Inter, the gold pill, ivory paper,
   a dark page hero) and leaves each page's layout alone. The header and
   footer are /consult/page-chrome.css. Zero em dashes.
   ═══════════════════════════════════════════════════ */

body.c-themed {
  --ink: #12141C;
  --secondary: #4A4E58;
  --muted: #585C67;
  --bone: #F6F5F1;
  --bone-card: #FFFFFF;
  --hair: rgba(18, 20, 28, 0.1);
  --hair-soft: rgba(18, 20, 28, 0.06);
  --gold: #D9A441;
  --gold-text: #85601A;
  --gold-soft: rgba(217, 164, 65, 0.16);
  --cta: #D9A441;
  --cta-hover: #E6B653;
  --cta-ink: #85601A;
  --cta-soft: rgba(217, 164, 65, 0.16);
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --c-head: 'Plus Jakarta Sans', 'Helvetica Neue', Arial, sans-serif;
  --radius: 20px;
  --radius-sm: 14px;
  --navh: 69px;
  background: #F6F5F1;
  color: var(--ink);
  font-family: var(--font-body);
}

body.c-themed main h1, body.c-themed main h2, body.c-themed main h3, body.c-themed main h4,
body.c-themed .section-h, body.c-themed .plan__name, body.c-themed .plan__price {
  font-family: var(--c-head);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}
body.c-themed ::selection { background: #F2C766; color: #12141C; }

/* links in running text: ink with a gold underline, not the old blue */
body.c-themed main a:not([class]) {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: rgba(217, 164, 65, 0.7);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
body.c-themed main a:not([class]):hover { color: var(--gold-text); }

/* every filled button becomes the gold pill with ink text */
body.c-themed .btn-primary,
body.c-themed .hero-btn--fill,
body.c-themed .plan__cta--fill,
body.c-themed .plan__cta:hover {
  background: linear-gradient(90deg, #D9A441 0%, #F2C766 100%);
  color: #12141C;
  border-color: transparent;
  font-family: var(--c-head);
  font-weight: 700;
}
body.c-themed .btn-primary:hover,
body.c-themed .hero-btn--fill:hover { background: linear-gradient(90deg, #E0AE4E 0%, #F5CF7A 100%); box-shadow: 0 16px 40px -14px rgba(217, 164, 65, 0.75); }
body.c-themed .plan__cta, body.c-themed .hero-btn--line, body.c-themed .btn-ghost { border-color: rgba(18, 20, 28, 0.16); color: var(--ink); background: transparent; font-family: var(--c-head); font-weight: 700; }

/* the page hero: the dark band from the home page */
body.c-themed .hero,
body.c-themed .page-hero,
body.c-themed .terms-hero {
  position: relative; isolation: isolate; overflow: hidden;
  background: #070A12; color: #F5F3EE;
  padding-block: clamp(72px, 9vw, 128px) clamp(56px, 7vw, 96px);
}
body.c-themed .hero::before,
body.c-themed .page-hero::before,
body.c-themed .terms-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(60% 80% at 88% 10%, rgba(217, 164, 65, 0.16) 0%, rgba(217, 164, 65, 0) 60%),
    radial-gradient(50% 70% at 0% 100%, rgba(242, 199, 102, 0.07) 0%, rgba(242, 199, 102, 0) 70%);
}
body.c-themed .hero h1,
body.c-themed .page-hero h1,
body.c-themed .terms-hero h1 { color: #FFFFFF; font-size: clamp(36px, 5.2vw, 64px); line-height: 1.08; }
body.c-themed .hero .lede,
body.c-themed .page-hero p,
body.c-themed .terms-hero p { color: rgba(245, 243, 238, 0.78); }
body.c-themed .hero-kicker,
body.c-themed .eyebrow {
  font: 700 12px/1.4 var(--c-head); letter-spacing: 0.16em; text-transform: uppercase; color: #E2BC6C;
}
body.c-themed .hero .hero-trust { color: rgba(245, 243, 238, 0.6); }

/* cards: white on paper, the home page radius, no heavy shadow */
body.c-themed .plan,
body.c-themed .faq-item,
body.c-themed .card {
  background: #FFFFFF;
  border: 1px solid rgba(18, 20, 28, 0.08);
  border-radius: 24px;
}
body.c-themed .plan__bullets li::before { background: #D9A441; border-color: #D9A441; }
body.c-themed .ba-frame--after .ba-chip { background: linear-gradient(90deg, #D9A441 0%, #F2C766 100%); color: #12141C; }

/* the consulting pill, when a template prints it inside a page body */
body.c-themed main .c-btn { text-decoration: none; }
body.c-themed .plan .c-btn { align-self: flex-start; margin-top: auto; }
body.c-themed .hero .crumbs, body.c-themed .hero .crumbs a, body.c-themed .hero .crumbs span[aria-current] { color: rgba(245, 243, 238, 0.62); }
body.c-themed .hero .section-title { color: #FFFFFF; }
body.c-themed .hero .sub, body.c-themed .hero .section-sub { color: rgba(245, 243, 238, 0.75); }
body.c-themed .hero .section-subtitle { color: rgba(245, 243, 238, 0.75); }

/* pages whose hero was drawn for a light ground (/makeover, /transformation)
   keep it light: only the type and the buttons change there */
body.c-themed.c-hero-light .hero { background: transparent; color: var(--ink); padding-block: clamp(48px, 7vw, 88px) clamp(28px, 4vw, 44px); }
body.c-themed.c-hero-light .hero::before { content: none; }
body.c-themed.c-hero-light .hero h1 { color: var(--ink); }
body.c-themed.c-hero-light .hero .lede, body.c-themed.c-hero-light .hero p { color: var(--secondary); }
body.c-themed .faq-item { padding: 6px 20px; }