/* HairColorGPT — WordPress theme · Playful Modern (v1.2)
   Allineato al nuovo stile del sito: gradient brand viola→magenta→arancio,
   font Inter, radii morbidi, hover lift, ombre soft. */

:root {
  --hcg-font-heading: "Neuton", Georgia, serif;
  --hcg-font-body: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --hcg-font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* Brand */
  --hcg-c1: #6e3aff;
  --hcg-c2: #ff3a8c;
  --hcg-c3: #ff8a3a;
  --hcg-gradient: linear-gradient(135deg, #6e3aff 0%, #ff3a8c 50%, #ff8a3a 100%);
  --hcg-gradient-soft: linear-gradient(135deg, rgba(110,58,255,.06) 0%, rgba(255,58,140,.06) 50%, rgba(255,138,58,.06) 100%);
  --hcg-accent: #6e3aff;

  /* Radii */
  --hcg-r: 10px;
  --hcg-r-lg: 14px;
  --hcg-r-xl: 20px;

  /* Shadows */
  --hcg-shadow-sm: 0 2px 4px rgba(15,23,42,.04);
  --hcg-shadow:    0 8px 24px -8px rgba(15,23,42,.10), 0 4px 8px -4px rgba(15,23,42,.06);
  --hcg-shadow-lg: 0 20px 40px -12px rgba(15,23,42,.12);
}

/* Brand split-text — used by [hcg_split] shortcode and .hcg-grad utility class */
/* NOTE: wrapper class is .hcg-textsplit to avoid collision with the .hcg-split section layout further down */
.hcg-textsplit { display: inline; }
.hcg-textsplit__plain { color: inherit; }
.hcg-grad {
  background-image: var(--hcg-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.hcg-grad--violet-cyan {
  background-image: linear-gradient(90deg, #6e3aff 0%, #00d2ff 100%);
}
.hcg-grad--mono {
  background-image: none;
  -webkit-text-fill-color: var(--hcg-accent);
  color: var(--hcg-accent);
}

/* LIGHT (explicit) — neutral palette, matches HairColorGPT plugin ui-tokens.css (no blue tint) */
html[data-hcgpt-theme="light"],
body.hcgpt-theme-light {
  --hcg-bg: #fafafa;
  --hcg-academy-grid-line: #e0e0e0;
  --hcg-surface: #ffffff;
  --hcg-surface-2: #f5f5f5;
  --hcg-text: #0a0a0a;
  --hcg-text-2: #1a1a1d;
  --hcg-muted: #737378;
  --hcg-border: rgba(0,0,0,.08);
  --hcg-border-strong: rgba(0,0,0,.15);
  --hcg-hover: rgba(0,0,0,.04);
  --hcg-topbar: rgba(255,255,255,.85);
  background: var(--hcg-bg) !important;
  color: var(--hcg-text) !important;
  color-scheme: light;
}

/* DARK (default + explicit) */
html, body,
html[data-hcgpt-theme="dark"],
body.hcgpt-theme-dark {
  --hcg-bg: #0a0a0a;
  --hcg-academy-grid-line: rgba(255,255,255,.08);
  --hcg-surface: #141416;
  --hcg-surface-2: #1a1a1d;
  --hcg-text: #f5f5f7;
  --hcg-text-2: #d4d4d8;
  --hcg-muted: #8a8a93;
  --hcg-border: rgba(255,255,255,.08);
  --hcg-border-strong: rgba(255,255,255,.16);
  --hcg-hover: rgba(255,255,255,.06);
  --hcg-topbar: rgba(20,20,22,.85);
  background: var(--hcg-bg);
  color-scheme: dark;
}

/* SYSTEM — follows the OS */
@media (prefers-color-scheme: dark) {
  html[data-hcgpt-theme="system"],
  body.hcgpt-theme-system {
    --hcg-bg: #0a0a0a;
    --hcg-academy-grid-line: rgba(255,255,255,.08);
    --hcg-surface: #141416;
    --hcg-surface-2: #1a1a1d;
    --hcg-text: #f5f5f7;
    --hcg-text-2: #d4d4d8;
    --hcg-muted: #8a8a93;
    --hcg-border: rgba(255,255,255,.08);
    --hcg-border-strong: rgba(255,255,255,.16);
    --hcg-hover: rgba(255,255,255,.06);
    --hcg-topbar: rgba(20,20,22,.85);
    background: var(--hcg-bg);
    color-scheme: dark;
  }
}
@media (prefers-color-scheme: light) {
  html[data-hcgpt-theme="system"],
  body.hcgpt-theme-system {
    --hcg-bg: #fafafa;
    --hcg-academy-grid-line: #e0e0e0;
    --hcg-surface: #ffffff;
    --hcg-surface-2: #f5f5f5;
    --hcg-text: #0a0a0a;
    --hcg-text-2: #1a1a1d;
    --hcg-muted: #737378;
    --hcg-border: rgba(0,0,0,.08);
    --hcg-border-strong: rgba(0,0,0,.15);
    --hcg-hover: rgba(0,0,0,.04);
    --hcg-topbar: rgba(255,255,255,.85);
    background: var(--hcg-bg);
    color-scheme: light;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--hcg-font-body);
  color: var(--hcg-text);
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
}
img { max-width: 100%; height: auto; }
a { color: inherit; }
.hcg-skip { position: absolute; left: -9999px; top: -9999px; }
.hcg-skip:focus { left: 16px; top: 16px; background: var(--hcg-text); color: var(--hcg-bg); padding: 10px 14px; border-radius: 6px; z-index: 100; }

/* ===== ATOMS ===== */
.hcg-eyebrow {
  font-family: var(--hcg-font-body);
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--hcg-muted); font-weight: 600;
}
.hcg-section-title {
  font-family: var(--hcg-font-heading);
  font-weight: 700;
  /* Mobile lower bound bumped to 28px to match the hero scale-up
     (Davide: section H2 felt small after the hero grew). 5vw mid keeps
     desktop unchanged at the 44px cap. */
  font-size: clamp(28px, 5vw, 44px);
  letter-spacing: -.025em;
  line-height: 1.1;
  margin: 0;
  color: var(--hcg-text);
  overflow-wrap: break-word;
}
.hcg-section-title em {
  font-style: normal;
  background: var(--hcg-gradient);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hcg-section-sub { font-size: 16px; line-height: 1.6; color: var(--hcg-muted); max-width: 60ch; margin: 14px 0 0; }
.hcg-hairline { border: 0; border-top: 1px solid var(--hcg-border); margin: 0; }

/* ===== Section alternation (home and other long pages) =====
   Every other top-level `<section.hcg-section>` gets the lighter surface
   tone, so long scrolling pages have an editorial bg/surface rhythm
   instead of one uniform grey wall. The `.hcg-hero` section (1st) stays
   on the default bg — nth-of-type counts ALL sibling <section>s.

   The section itself is capped at max-width: 1240px (see .hcg-section
   above), so a plain `background` would stop at that width and leave the
   body bg visible at the sides. We extend the colour to the full viewport
   width with the box-shadow + clip-path trick: a 100vmax solid shadow
   paints the same colour outside the container, and clip-path keeps the
   vertical edges flush so the colour fills only the section's row. */
.hcg-section:nth-of-type(even) {
  background: var(--hcg-surface);
  box-shadow: 0 0 0 100vmax var(--hcg-surface);
  clip-path: inset(0 -100vmax);
}

.hcg-btn {
  font-family: inherit; font-size: 14px; font-weight: 600;
  padding: 10px 18px; border-radius: 999px;
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  transition: all .18s ease;
  -webkit-appearance: none; appearance: none;
  outline: none;
  background-clip: padding-box;
}
.hcg-btn:focus { outline: none; }
.hcg-btn:focus-visible { outline: 2px solid var(--hcg-accent); outline-offset: 2px; }
.hcg-btn--sm { padding: 8px 14px; font-size: 13px; }
.hcg-btn--primary { background: var(--hcg-gradient); color: #fff; border: 0; box-shadow: 0 4px 14px rgba(110,58,255,.3); }
.hcg-btn--primary:hover { box-shadow: 0 6px 20px rgba(110,58,255,.4); transform: translateY(-1px); }
.hcg-btn--ghost { background: var(--hcg-surface); color: var(--hcg-text); border-color: var(--hcg-border-strong); box-shadow: var(--hcg-shadow-sm); }
.hcg-btn--ghost:hover { background: var(--hcg-surface-2); }
.hcg-btn--accent { background: var(--hcg-gradient); color: #fff; border: 0; box-shadow: 0 4px 14px rgba(110,58,255,.3); }
.hcg-btn--accent:hover { box-shadow: 0 6px 20px rgba(110,58,255,.4); transform: translateY(-1px); }

/* ===== NAV ===== */
.hcg-nav { position: sticky; top: 0; z-index: 50; background: var(--hcg-topbar); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--hcg-border); }

/* Admin-bar offset — keep the sticky nav clear of the WordPress admin bar.
   Old static breakpoints (32px desktop / 46px ≤782px / 0 ≤600px) left a
   visible gap on iPad-sized viewports because WP's media queries don't
   always match what the device actually paints (iPad Safari with touch
   UA can render the 46px tablet variant at 834px viewport, where our
   theme rule still expected 32px). Use a CSS custom property that JS in
   header.php sets to the real `#wpadminbar` height. Static fallbacks
   keep this working with JS disabled or before paint. */
body.admin-bar .hcg-nav { top: var(--hcg-admin-bar-h, 32px); }
@media screen and (max-width: 782px) {
  body.admin-bar .hcg-nav { top: var(--hcg-admin-bar-h, 46px); }
}
@media screen and (max-width: 600px) {
  /* Phone: WP admin bar switches to position: absolute and scrolls away,
     so the sticky nav can go back to top: 0 once the admin bar is past. */
  body.admin-bar .hcg-nav { top: 0; }
}

.hcg-nav__inner { max-width: 1240px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 14px 28px; }
/* `line-height: 1` on both wrapper and wordmark tightens the text box so
   flex `align-items: center` doesn't push the wordmark vertically lower
   than the logo image — the previous default ~1.5 line-height inflated
   the text box, shifting its optical baseline below the 22px logo and
   making the logo look misaligned. Same fix applied across the brand
   cluster (nav header, footer, anywhere `.hcg-brand` is rendered). */
.hcg-brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--hcg-text); font-weight: 600; line-height: 1; }
.hcg-brand-symbol { display: block; flex: 0 0 auto; width: 22px; height: 22px; object-fit: contain; }
.hcg-brand__logo { width: 22px; height: 22px; display: block; }
.hcg-brand__name { line-height: 1; font-size: 15px; }
.hcg-brand__mark { width: 28px; height: 28px; border-radius: 8px; background: var(--hcg-gradient); display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: 12px; box-shadow: 0 4px 12px rgba(110,58,255,.3); }
/* duplicate .hcg-brand__name removed — consolidated into rule above. */
.hcg-menu { list-style: none; display: flex; gap: 4px; margin: 0; padding: 0; font-size: 13px; }
/* white-space: nowrap prevents Safari from wrapping multi-word menu labels
   ("Build for Salons", "How it Works", "Brands & Lines") onto two lines when
   the row gets tight. Paired with the hamburger toggle below so under
   1200px we collapse to the mobile drawer instead of overflowing the row. */
.hcg-menu a { padding: 6px 12px; border-radius: 6px; color: var(--hcg-muted); text-decoration: none; white-space: nowrap; }
.hcg-menu a:hover { background: var(--hcg-hover); color: var(--hcg-text); }

/* Hamburger toggle button — hidden on desktop (≥1200px), visible below.
   Three stacked bars that morph into an X when aria-expanded="true". */
.hcg-nav__toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 40px;
  height: 40px;
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  padding: 0;
  margin: 0;
  flex: 0 0 auto;
}
.hcg-nav__toggle:hover { background: var(--hcg-hover); }
.hcg-nav__toggle:focus-visible { outline: 2px solid var(--hcg-c1); outline-offset: 2px; }
.hcg-nav__toggle-bar {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--hcg-text);
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
.hcg-nav__toggle[aria-expanded="true"] .hcg-nav__toggle-bar:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.hcg-nav__toggle[aria-expanded="true"] .hcg-nav__toggle-bar:nth-child(2) {
  opacity: 0;
}
.hcg-nav__toggle[aria-expanded="true"] .hcg-nav__toggle-bar:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* Mobile/tablet: show hamburger, collapse desktop menu into a drawer.
   The drawer sits absolutely below the header and slides in via opacity +
   transform. The 1200px breakpoint is the same one that hides .hcg-menu in
   its inline form (no separate media query needed here — the .hcg-menu
   display:none from the old 960px block has been removed). */
@media (max-width: 1200px) {
  .hcg-nav { position: relative; }
  .hcg-nav__toggle { display: inline-flex; }
  .hcg-nav__menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--hcg-bg);
    border-top: 1px solid var(--hcg-border);
    border-bottom: 1px solid var(--hcg-border);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
    z-index: 100;
    max-height: calc(100vh - 64px);
    overflow-y: auto;
  }
  .hcg-nav.hcg-nav--open .hcg-nav__menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .hcg-menu {
    flex-direction: column;
    gap: 0;
    padding: 12px 28px;
    font-size: 15px;
  }
  .hcg-menu a {
    display: block;
    padding: 12px 12px;
  }
  /* Optional: lock body scroll while drawer open (avoids double scroll). */
  body.hcg-nav-locked { overflow: hidden; }
}
.hcg-nav__actions { display: flex; gap: 8px; align-items: center; }

/* Language switcher slot — hosts a multilingua plugin widget (Polylang, WPML, TranslatePress, GTranslate, …) */
.hcg-lang-slot { display: inline-flex; align-items: center; }
.hcg-lang-widget { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--hcg-muted); }
.hcg-lang-widget .widget-title, .hcg-lang-widget .widgettitle { display: none; }
/* Common plugin selectors — Polylang & WPML render <ul>; GTranslate renders a <select> or list */
.hcg-lang-widget ul { list-style: none; margin: 0; padding: 3px; display: inline-flex; gap: 2px; background: var(--hcg-surface-2); border: 1px solid var(--hcg-border); border-radius: 999px; }
.hcg-lang-widget ul li { margin: 0; }
.hcg-lang-widget ul li a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 999px;
  color: var(--hcg-muted); text-decoration: none;
  font-size: 12px; font-weight: 600; line-height: 1; text-transform: uppercase; letter-spacing: .04em;
  transition: all .15s ease;
}
.hcg-lang-widget ul li a:hover { color: var(--hcg-text); }
.hcg-lang-widget ul li.current-lang a, .hcg-lang-widget ul li.current_lang a, .hcg-lang-widget ul li.current-menu-item a, .hcg-lang-widget ul li.wpml-ls-current-language a {
  background: var(--hcg-surface); color: var(--hcg-text); box-shadow: var(--hcg-shadow-sm);
}
.hcg-lang-widget img.flag, .hcg-lang-widget img.wpml-ls-flag, .hcg-lang-widget .lang-flag, .hcg-lang-widget img[class*="flag"] {
  width: 14px; height: 14px; border-radius: 999px; object-fit: cover; vertical-align: middle;
}
/* GTranslate / TranslatePress fallback — selects */
.hcg-lang-widget select, .hcg-lang-widget .gt_selector, .hcg-lang-widget .trp-language-switcher select {
  background: var(--hcg-surface-2); border: 1px solid var(--hcg-border); color: var(--hcg-text);
  font-family: inherit; font-size: 12px; font-weight: 600;
  padding: 7px 28px 7px 12px; border-radius: 999px; cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='none' stroke='%2364748b' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1l4 4 4-4'/></svg>");
  background-repeat: no-repeat; background-position: right 10px center;
}
@media (max-width: 600px) {
  .hcg-lang-widget ul li a { padding: 5px 8px; font-size: 11px; }
}

/* Tone switcher (Light/Dark/Auto segmented).
   `flex-shrink: 0` on the container, each button, AND each svg is the
   fix for "icons collapse to tiny dots" — the pill sits inside the
   flex `.hcg-nav__actions` row and, without an explicit shrink: 0,
   the inner SVGs were the only thing allowed to compress when the
   row got tight (e.g. on tablet widths or when the language switcher
   widget loaded late and reflowed the row). */
.hcg-tone-switch { display: inline-flex; padding: 3px; background: var(--hcg-surface-2); border: 1px solid var(--hcg-border); border-radius: 999px; gap: 2px; flex-shrink: 0; }
.hcg-tone-switch button { background: transparent; border: 0; color: var(--hcg-muted); padding: 6px 10px; border-radius: 999px; cursor: pointer; font-family: inherit; font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 4px; flex-shrink: 0; min-width: 28px; min-height: 28px; }
.hcg-tone-switch button[aria-pressed="true"] { background: var(--hcg-surface); color: var(--hcg-text); box-shadow: var(--hcg-shadow-sm); }
.hcg-tone-switch svg { width: 14px; height: 14px; flex-shrink: 0; display: block; }

/* ===== HERO ===== */
.hcg-hero { max-width: 1240px; margin: 0 auto; padding: 32px 28px 24px; display: grid; gap: 24px; }
/* Desktop: chat demo in a fixed mobile-width column on the left, headline +
   copy (left-aligned) in the flexible column on the right. DOM order keeps
   the h1 first; `order` swaps the visual columns. */
.hcg-hero__split { display: grid; grid-template-columns: 400px minmax(0, 1fr); gap: 56px; align-items: center; }
.hcg-hero__split > .hcg-chat-frame { order: 1; }
.hcg-hero__split > .hcg-hero__meta { order: 2; }
.hcg-hero__meta { text-align: left; }
.hcg-hero__meta .hcg-eyebrow { display: inline-block; margin-bottom: 14px; }
.hcg-hero__title {
  font-family: var(--hcg-font-heading); font-weight: 800;
  /* Mobile lower bound bumped to 34px (Davide: hero H1 felt too timid
     on phone). 7vw makes it scale faster: 360px viewport ≈ 34px (min),
     600px ≈ 42px, ≥800px caps at 56px. The wider clamp range works
     because beta.69 fixed the underlying grid blow-out, so larger
     headings no longer overflow even at narrow viewports. */
  font-size: clamp(34px, 7vw, 56px);
  line-height: 1.05; letter-spacing: -.03em;
  margin: 0; color: var(--hcg-text);
  /* Safety net for very long unbroken tokens (URLs, ALL-CAPS brand
     terms) so they break instead of forcing horizontal overflow. */
  overflow-wrap: break-word;
  word-break: normal;
}
.hcg-hero__title em,
.hcg-hero__title-accent {
  font-style: normal;
  background: var(--hcg-gradient);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  color: transparent;
}
.hcg-hero__sub { color: var(--hcg-muted); font-size: 17px; max-width: 52ch; margin: 16px 0 0; overflow-wrap: break-word; }
.hcg-hero__meta .hcg-action-row .hcg-btn { padding: 13px 26px; font-size: 15px; }
.hcg-hero__trust { color: var(--hcg-muted); font-size: 13px; margin: 12px 0 0; }

.hcg-chat-frame { width: 100%; margin: 0; height: clamp(480px, 64vh, 600px); display: flex; }
/* Examples section reuses the chat frame as a static, scrollable showcase card. */
.hcg-chat-frame--example { height: clamp(420px, 58vh, 560px); }
.hcg-scroll-hint { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--hcg-muted); font-size: 12px; }
.hcg-scroll-arrow { animation: hcg-bob 2s ease-in-out infinite; }
@keyframes hcg-bob { 0%,100%{transform:translateY(0);} 50%{transform:translateY(6px);} }

/* ===== CHAT ===== */
.hcg-chat { flex: 1; display: flex; flex-direction: column; border: 1px solid var(--hcg-border); border-radius: var(--hcg-r-xl); background: var(--hcg-surface); overflow: hidden; position: relative; box-shadow: var(--hcg-shadow); }
/* Chat-preview header — ALWAYS show only the demo pill, centered.
   The .hcg-chat-frame is ~400px wide on desktop AND ~480px max on
   mobile, so the brand cluster (logo + "HairColorGPT" wordmark) +
   pill in IT/DE/FR/PT wraps onto two lines at every viewport. Dropped
   the brand cluster across the board — the site brand is already
   visible in the main nav header above, so the chat-preview doesn't
   need to repeat it. This replaces the prior @media (max-width: 960px)
   scoping which left the broken layout intact on desktop. */
.hcg-chat__head { display: flex; align-items: center; justify-content: center; padding: 14px 20px; border-bottom: 1px solid var(--hcg-border); }
.hcg-chat__head-l { display: none !important; }
.hcg-chat__head-r { display: flex; justify-content: center; flex: 1 1 auto; }
.hcg-chat__brand-logo { width: 18px; height: 18px; }
.hcg-chat__title { font-weight: 600; font-size: 15px; }
.hcg-chat__pill { font-family: var(--hcg-font-body); font-size: 11px; letter-spacing: .04em; color: var(--hcg-muted); background: var(--hcg-surface-2); border: 1px solid var(--hcg-border); padding: 4px 10px; border-radius: 999px; font-weight: 500; display: inline-block; white-space: nowrap; }
.hcg-chat__body { flex: 1; padding: 28px 24px; overflow-y: auto; display: flex; flex-direction: column; gap: 18px; min-height: 280px; position: relative; }
.hcg-chat__greeting { text-align: center; padding: 28px 0 8px; }
.hcg-chat__greeting-eyebrow { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--hcg-muted); font-weight: 600; margin-bottom: 16px; }
.hcg-chat__greeting-title { font-family: var(--hcg-font-heading); font-weight: 600; font-size: clamp(18px, 2.4vw, 26px); line-height: 1.3; letter-spacing: -.01em; margin: 0 auto; max-width: 32ch; color: var(--hcg-text); overflow-wrap: break-word; padding: 0 12px; }
/* Persistent suggestion strip just above the composer — mirrors the real app.
   Horizontal scroll keeps the chips on one row inside the narrow chat column. */
.hcg-chat__starters { display: flex; gap: 8px; padding: 12px 14px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.hcg-chat__starters::-webkit-scrollbar { display: none; }
/* Starter pills — button is just the chrome; the inner
   .hcg-chat__starter-text owns the line-clamp. Safari ignores
   `-webkit-line-clamp` when applied directly to a <button> (UA reset
   on form controls overrides the `display: -webkit-box` we'd need),
   so chat.js wraps the textContent in a <span> and the clamp lives
   there. min-height on the button + max-height on the span are both
   hard caps so a 4th line can never bleed through under the ellipsis. */
.hcg-chat__starter {
	flex: 0 0 auto;
	width: 168px;
	text-align: left;
	font-family: inherit;
	font-size: 12.5px;
	line-height: 1.35;
	color: var(--hcg-text-2);
	background: var(--hcg-surface-2);
	border: 1px solid var(--hcg-border);
	padding: 8px 14px;
	border-radius: 16px;
	cursor: pointer;
	transition: border-color .18s, color .18s, transform .18s;
	font-weight: 500;
	display: flex;
	align-items: flex-start;
	overflow: hidden;
	/* 3 lines × ~17px line-height + 16px vertical padding ≈ 67px */
	min-height: 67px;
	max-height: 67px;
}
.hcg-chat__starter-text {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
	/* 3 × 17px = 51px hard cap on the text element itself. */
	max-height: 51px;
	width: 100%;
}
.hcg-chat__starter:hover { color: var(--hcg-text); border-color: var(--hcg-c1); transform: translateY(-1px); }

.hcg-msg { display: flex; gap: 10px; align-items: flex-start; }
.hcg-msg--user { justify-content: flex-end; }
.hcg-msg__avatar { width: 26px; height: 26px; border-radius: 999px; background: var(--hcg-gradient); display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; font-size: 11px; font-weight: 700; }
/* Brand variant — uses the real HairColorGPT mark, no gradient disc behind it. */
.hcg-msg__avatar--brand { background: none; }
.hcg-msg__avatar--brand img { width: 100%; height: 100%; object-fit: contain; display: block; }
.hcg-msg__bubble { max-width: 78%; padding: 12px 16px; border-radius: var(--hcg-r-lg); font-size: 14px; line-height: 1.6; white-space: pre-wrap; }
.hcg-msg--user .hcg-msg__bubble { background: var(--hcg-gradient); color: #fff; border-bottom-right-radius: 4px; }
/* AI message — plain text in the chat body, no surface; brand avatar. */
.hcg-msg--ai .hcg-msg__bubble { color: var(--hcg-text); background: transparent; border: 0; padding: 0; white-space: normal; flex: 1; min-width: 0; max-width: none; }
.hcg-msg--ai .hcg-msg__bubble p { margin: 0 0 10px; line-height: 1.62; }
.hcg-msg--ai .hcg-msg__bubble p:last-child { margin-bottom: 0; }
.hcg-msg--ai .hcg-msg__bubble strong { font-weight: 700; color: var(--hcg-text); }
.hcg-msg--ai .hcg-msg__bubble em { font-style: italic; color: var(--hcg-text-2); }
/* Typewriter caret — blinks on the segment currently being typed. */
.hcg-msg__bubble .hcg-caret::after {
  content: ''; display: inline-block; width: 2px; height: 1em;
  background: var(--hcg-muted); margin-left: 1px; vertical-align: -2px;
  animation: hcg-caret-blink 1s steps(1) infinite;
}
@keyframes hcg-caret-blink { 0%,50%{opacity:1;} 50.01%,100%{opacity:0;} }
.hcg-msg__bubble--thinking { display: inline-flex; gap: 4px; align-items: center; min-height: 26px; }
.hcg-msg__bubble--thinking span { width: 6px; height: 6px; border-radius: 999px; background: var(--hcg-muted); animation: hcg-dot 1.2s infinite ease-in-out; }
.hcg-msg__bubble--thinking span:nth-child(2) { animation-delay: .15s; }
.hcg-msg__bubble--thinking span:nth-child(3) { animation-delay: .3s; }
@keyframes hcg-dot { 0%,80%,100%{transform:scale(.6);opacity:.4;} 40%{transform:scale(1);opacity:1;} }

/* Static rich answer bubble — used by the examples section fake-chat.
   No surface/border: the bot's answer reads as plain text in the chat body. */
.hcg-msg--ai .hcg-msg__bubble--rich { flex: 1; min-width: 0; max-width: none; white-space: normal; background: transparent; border: 0; padding: 0; }
.hcg-msg__bubble--rich p { margin: 0 0 10px; }
.hcg-msg__bubble--rich p:last-child { margin-bottom: 0; }
.hcg-msg__h { display: block; font-family: var(--hcg-font-heading); font-weight: 700; font-size: 13px; letter-spacing: -.01em; margin: 14px 0 6px; color: var(--hcg-text); }
.hcg-msg__h2 { display: block; font-weight: 600; font-size: 12px; letter-spacing: .02em; margin: 12px 0 4px; color: var(--hcg-text-2); }
.hcg-msg__h + .hcg-msg__h2 { margin-top: 6px; }
.hcg-msg__bubble--rich ul { margin: 0 0 10px; padding-left: 18px; }
.hcg-msg__bubble--rich li { margin-bottom: 5px; }
.hcg-msg__bubble--rich li:last-child { margin-bottom: 0; }
.hcg-msg__bubble--rich li strong { color: var(--hcg-text); }

/* Client photo attached to a user message (examples section fake-chat). */
.hcg-msg__photo { margin: 0; width: 132px; max-width: 45%; }
.hcg-msg__photo img { display: block; width: 100%; height: auto; border-radius: var(--hcg-r-lg); border: 1px solid var(--hcg-border); }

.hcg-chat__input { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--hcg-border); background: var(--hcg-surface); }
.hcg-chat__icon, .hcg-chat__tools { background: transparent; border: 0; color: var(--hcg-muted); padding: 8px 10px; border-radius: 999px; cursor: pointer; font-family: inherit; font-size: 13px; }
.hcg-chat__icon:hover, .hcg-chat__tools:hover { color: var(--hcg-text); background: var(--hcg-hover); }
.hcg-chat__field { flex: 1; background: transparent; border: 0; outline: none; color: var(--hcg-text); font-family: inherit; font-size: 14px; padding: 10px 4px; }
.hcg-chat__field::placeholder { color: var(--hcg-muted); }
.hcg-chat__send { width: 36px; height: 36px; padding: 0; justify-content: center; background: var(--hcg-gradient); color: #fff; border: 0; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; box-shadow: 0 4px 14px rgba(110,58,255,.3); }
.hcg-chat__send:disabled { opacity: .3; cursor: not-allowed; box-shadow: none; }

/* Decorative composer: looks like the real input bar, but inert. */
.hcg-chat__input--decorative { cursor: default; }
.hcg-chat__input--decorative .hcg-chat__icon,
.hcg-chat__input--decorative .hcg-chat__tools,
.hcg-chat__input--decorative .hcg-chat__send { pointer-events: none; }
.hcg-chat__input--decorative .hcg-chat__field { cursor: default; -webkit-text-fill-color: var(--hcg-muted); }
.hcg-chat__input--decorative .hcg-chat__field::placeholder { color: var(--hcg-muted); }

/* Suggestion-only demo: soft CTA card shown in the conversation after N turns. */
@keyframes hcg-fade { from{opacity:0;} to{opacity:1;} }
.hcg-chat__cta { background: var(--hcg-surface-2); border: 1px solid var(--hcg-border-strong); border-radius: var(--hcg-r-lg); padding: 22px 24px; text-align: center; animation: hcg-fade .3s ease; }
.hcg-chat__cta-eye { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; background: var(--hcg-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 10px; }
.hcg-chat__cta h4 { font-weight: 700; font-size: 18px; margin: 0 0 6px; line-height: 1.25; letter-spacing: -.02em; color: var(--hcg-text); }
.hcg-chat__cta p { color: var(--hcg-muted); font-size: 13px; line-height: 1.5; margin: 0 0 16px; }
.hcg-chat__cta .hcg-btn { display: inline-flex; }

/* ===== SECTIONS ===== */
.hcg-section { padding: 96px 28px; max-width: 1240px; margin: 0 auto; }

/* Academy section — grid ("quadretti") background, reproduced from the real
   Academy app (.academy-content-panel in academy-frontend.css): 1px lines on
   a 40px cell, tinted per tone via --hcg-academy-grid-line. */
.hcg-section--academy {
  background-image:
    linear-gradient(to right, transparent 39px, color-mix(in srgb, var(--hcg-academy-grid-line) 42%, transparent) 39px, color-mix(in srgb, var(--hcg-academy-grid-line) 42%, transparent) 40px, transparent 40px),
    linear-gradient(to bottom, transparent 39px, color-mix(in srgb, var(--hcg-academy-grid-line) 42%, transparent) 39px, color-mix(in srgb, var(--hcg-academy-grid-line) 42%, transparent) 40px, transparent 40px);
  background-size: 40px 40px;
}
.hcg-sec-head { margin-bottom: 56px; max-width: 720px; }
.hcg-sec-head--center { text-align: center; margin-left: auto; margin-right: auto; }
.hcg-sec-head .hcg-eyebrow { display: block; margin-bottom: 14px; }

/* Proactive Recall AI — centred closing section (template-parts/sections/recall.php). */
.hcg-section--recall { text-align: center; }
.hcg-section--recall .hcg-sec-head { margin-bottom: 0; }
.hcg-section--recall .hcg-section-sub { margin-left: auto; margin-right: auto; }
.hcg-recall__lead { font-family: var(--hcg-font-body); font-weight: 600; font-size: 1.05rem; color: var(--hcg-text-2); margin: 14px 0 0; }
.hcg-recall__cta { display: flex; justify-content: center; }

/* How-it-works — connected timeline (template-parts/sections/steps.php).
   A single vertical flow: a gradient spine links three icon nodes so the
   section reads as a sequence, not three identical cards. */
.hcg-steps-flow { position: relative; }
.hcg-step-node { position: relative; display: grid; grid-template-columns: 44px 1fr; gap: 20px; padding-bottom: 36px; }
.hcg-step-node:last-child { padding-bottom: 0; }
.hcg-step-node::before {
  content: ""; position: absolute; left: 21px; top: 44px; bottom: -4px; width: 2px;
  background: linear-gradient(180deg, var(--hcg-c1), var(--hcg-c2)); opacity: .35;
}
.hcg-step-node:last-child::before { display: none; }
.hcg-step-node__icon {
  width: 44px; height: 44px; border-radius: 13px; display: flex; align-items: center; justify-content: center;
  background: var(--hcg-surface); border: 1px solid var(--hcg-border-strong); color: var(--hcg-text);
  position: relative; z-index: 1;
}
.hcg-step-node__icon svg { width: 20px; height: 20px; }
.hcg-step-node:nth-child(1) .hcg-step-node__icon { box-shadow: 0 0 0 3px rgba(110,58,255,.12); }
.hcg-step-node:nth-child(2) .hcg-step-node__icon { box-shadow: 0 0 0 3px rgba(255,58,140,.12); }
.hcg-step-node:nth-child(3) .hcg-step-node__icon { box-shadow: 0 0 0 3px rgba(255,138,58,.12); }
.hcg-step-node__n { font-family: var(--hcg-font-mono); font-size: 11px; color: var(--hcg-muted); letter-spacing: .1em; display: block; margin-bottom: 4px; }
.hcg-step-node__t { font-family: var(--hcg-font-heading); font-weight: 700; font-size: 19px; margin: 0 0 6px; color: var(--hcg-text); }
.hcg-step-node__b { font-size: 14px; line-height: 1.62; color: var(--hcg-muted); margin: 0; }

/* Split-section screenshots (Formula Book, Academy previews).
   Keep this scoped to preview media only: fake chats inside split visuals
   have small logos/photos that must retain their own component sizing. */
.hcg-split-visual > img,
.hcg-split-visual > picture > img,
.hcg-slider__slide > img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--hcg-r-xl);
  border: 1px solid var(--hcg-border);
  box-shadow: var(--hcg-shadow);
}

/* Formula Book slideshow — cross-fade carousel (assets/js/slider.js).
   The active slide drives the track height; the rest are stacked behind it. */
.hcg-slider { position: relative; }
.hcg-slider__track { position: relative; }
.hcg-slider__slide { margin: 0; transition: opacity .45s ease; }
.hcg-slider__slide:not(.is-active) { position: absolute; top: 0; left: 0; width: 100%; opacity: 0; pointer-events: none; }
.hcg-slider__slide.is-active { position: relative; opacity: 1; }
.hcg-slider__dots { display: flex; gap: 8px; justify-content: center; margin-top: 18px; }
.hcg-slider__dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: var(--hcg-border-strong); cursor: pointer; transition: background .2s, transform .2s; }
.hcg-slider__dot:hover { background: var(--hcg-muted); }
.hcg-slider__dot.is-active { background: var(--hcg-c1); transform: scale(1.25); }
@media (prefers-reduced-motion: reduce) { .hcg-slider__slide { transition: none; } }

/* Tone-paired media — show the variant matching the active canonical
   tone. Reusable on any <img> pair: .hcg-tone-light-only renders by
   default; .hcg-tone-dark-only renders only in dark / system-dark. */
img.hcg-tone-dark-only { display: none; }
body.hcgpt-theme-dark img.hcg-tone-light-only,
html[data-hcgpt-theme="dark"] img.hcg-tone-light-only { display: none; }
body.hcgpt-theme-dark img.hcg-tone-dark-only,
html[data-hcgpt-theme="dark"] img.hcg-tone-dark-only { display: block; }
@media (prefers-color-scheme: dark) {
  body.hcgpt-theme-system img.hcg-tone-light-only,
  html[data-hcgpt-theme="system"] img.hcg-tone-light-only { display: none; }
  body.hcgpt-theme-system img.hcg-tone-dark-only,
  html[data-hcgpt-theme="system"] img.hcg-tone-dark-only { display: block; }
}

.hcg-split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.hcg-split--reverse .hcg-split-text { order: 2; }
.hcg-split--reverse .hcg-split-visual { order: 1; }
.hcg-split-text .hcg-eyebrow { display: block; margin-bottom: 14px; }


.hcg-fb-preview { background: var(--hcg-surface); border: 1px solid var(--hcg-border); border-radius: var(--hcg-r-xl); padding: 22px; box-shadow: var(--hcg-shadow); }
.hcg-fb-preview__head { display: flex; justify-content: space-between; align-items: center; padding: 0 4px 16px; border-bottom: 1px solid var(--hcg-border); margin-bottom: 16px; }
.hcg-fb-preview__head-r { display: flex; gap: 12px; color: var(--hcg-muted); }
.hcg-fb-preview__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hcg-fb-preview__card { background: var(--hcg-surface-2); border: 1px solid var(--hcg-border); border-radius: var(--hcg-r); padding: 12px; }
.hcg-fb-preview__avatars { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 12px; }
.hcg-fb-preview__name { font-weight: 700; font-size: 13px; letter-spacing: .04em; margin-bottom: 8px; color: var(--hcg-text); }
.hcg-fb-preview__row { display: flex; justify-content: space-between; gap: 6px; font-size: 9.5px; letter-spacing: .12em; color: var(--hcg-muted); padding: 8px 0; border-top: 1px solid var(--hcg-border); border-bottom: 1px solid var(--hcg-border); margin-bottom: 8px; font-weight: 600; }
.hcg-fb-preview__visit { display: flex; justify-content: space-between; align-items: center; font-size: 9.5px; letter-spacing: .1em; color: var(--hcg-muted); font-weight: 600; }
.hcg-fb-preview__score { padding: 3px 8px; border-radius: 999px; font-weight: 700; }
.hcg-fb-preview__score--good { background: rgba(34,197,94,.15); color: #16a34a; }
.hcg-fb-preview__score--ok { background: rgba(14,165,233,.15); color: #0284c7; }
.hcg-fb-preview__score--warning { background: rgba(217,119,6,.15); color: #d97706; }

.hcg-ph { border-radius: var(--hcg-r); background: var(--hcg-gradient-soft); border: 1px solid var(--hcg-border); display: flex; align-items: center; justify-content: center; color: var(--hcg-muted); font-family: var(--hcg-font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.hcg-ph--square { aspect-ratio: 1 / 1; }
.hcg-ph--portrait { aspect-ratio: 4 / 5; }

.hcg-action-row { margin-top: 24px; }

body.hcg-blank {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background: #0a0a0a;
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body.hcg-blank .hcg-blank__content {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

body.hcg-blank .hcg-blank__content > * { max-width: none; }

.hcg-ac-preview { background: var(--hcg-surface); border: 1px solid var(--hcg-border); border-radius: var(--hcg-r-xl); padding: 28px; box-shadow: var(--hcg-shadow); }
.hcg-ac-preview__hero { background: var(--hcg-gradient-soft); border: 1px solid var(--hcg-border); border-radius: var(--hcg-r-lg); padding: 28px; text-align: center; }
.hcg-ac-preview__cap { font-size: 32px; margin-bottom: 8px; background: var(--hcg-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hcg-ac-preview__title { font-family: var(--hcg-font-heading); font-weight: 700; font-size: 22px; margin: 0 0 6px; letter-spacing: -.01em; }
.hcg-ac-preview__hero p { color: var(--hcg-muted); font-size: 14px; margin: 0 0 20px; }
.hcg-ac-preview__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px; }
.hcg-ac-preview__stats > div { background: var(--hcg-surface); border: 1px solid var(--hcg-border); border-radius: var(--hcg-r); padding: 14px 8px; }
.hcg-ac-preview__stat { font-weight: 700; font-size: 22px; margin-bottom: 4px; letter-spacing: -.02em; }
.hcg-ac-preview__level { background: var(--hcg-surface); border: 1px solid var(--hcg-border); border-radius: var(--hcg-r); padding: 16px; text-align: left; }
.hcg-ac-preview__level .hcg-eyebrow { display: block; margin-bottom: 6px; }
.hcg-ac-preview__level-name { font-weight: 700; font-size: 16px; margin-bottom: 14px; }
.hcg-ac-preview__strengths { font-size: 13px; line-height: 1.5; color: var(--hcg-text); margin-top: 6px; }

/* ===== PRICING (allineato a /pricing/) ===== */
.hcg-pricing { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; max-width: 1180px; margin: 0 auto; }
.hcg-plan { background: var(--hcg-surface); border: 1px solid var(--hcg-border); border-radius: 18px; padding: 32px 28px 28px; display: flex; flex-direction: column; text-align: center; position: relative; transition: transform .2s, box-shadow .2s; }
.hcg-plan:hover { transform: translateY(-3px); box-shadow: 0 16px 36px -16px rgba(15,23,42,.12); }
.hcg-plan--featured { border-color: transparent; background: linear-gradient(var(--hcg-surface), var(--hcg-surface)) padding-box, var(--hcg-gradient) border-box; border: 2px solid transparent; box-shadow: 0 16px 40px -16px rgba(110,58,255,.25); }
.hcg-plan__badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--hcg-gradient); color: #fff; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; font-weight: 700; box-shadow: 0 4px 12px rgba(110,58,255,.3); white-space: nowrap; }
.hcg-plan__name { font-size: 12px; letter-spacing: .2em; color: var(--hcg-muted); text-transform: uppercase; font-weight: 700; margin-bottom: 8px; }
.hcg-plan--featured .hcg-plan__name { background: var(--hcg-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hcg-plan__price { display: flex; align-items: baseline; gap: 4px; justify-content: center; margin: 16px 0 8px; }
.hcg-plan__amount { font-family: var(--hcg-font-heading); font-weight: 700; font-size: 42px; letter-spacing: -.03em; color: var(--hcg-text); }
.hcg-plan__per { font-size: 14px; color: var(--hcg-muted); }
.hcg-plan__perks { list-style: none; padding: 0; margin: 20px 0; flex: 1; text-align: left; }
.hcg-plan__perks li { padding: 8px 0 8px 26px; font-size: 14px; color: var(--hcg-text-2); position: relative; }
.hcg-plan__perks li::before { content: "✓"; position: absolute; left: 0; top: 8px; width: 18px; height: 18px; border-radius: 999px; background: var(--hcg-gradient); color: #fff; font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.hcg-plan__cta { width: 100%; justify-content: center; }

/* ===== FOOTER ===== */
.hcg-footer { padding: 64px 28px 32px; border-top: 1px solid var(--hcg-border); background: var(--hcg-surface); }
.hcg-footer__inner { max-width: 1240px; margin: 0 auto; }
.hcg-footer__top { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 24px; }
.hcg-footer__brand { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 15px; }
.hcg-footer__brand-logo { width: 22px; height: 22px; }
.hcg-footer__tag { font-size: 18px; font-weight: 600; margin: 0; background: var(--hcg-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hcg-footer__menu { margin: 40px 0; }
.hcg-footer__list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 24px; }
.hcg-footer__list a { color: var(--hcg-muted); text-decoration: none; font-size: 14px; }
.hcg-footer__list a:hover { color: var(--hcg-text); }
.hcg-footer__bottom {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px;
  padding-top: 24px; border-top: 1px solid var(--hcg-border);
  font-size: 13px; color: var(--hcg-muted);
}
/* Copyright stays left, switcher + cookie link pushed to the right. */
.hcg-footer__bottom > span { margin-right: auto; }

/* Footer widget columns — rendered by inc/footer-columns.php as
   .hcg-footer__cols.hcg-footer__cols--{2|3|4} > .hcg-footer__col > widgets. */
.hcg-footer__cols {
  display: grid;
  gap: 32px clamp(24px, 4vw, 56px);
  margin-bottom: 44px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--hcg-border);
}
.hcg-footer__cols--2 { grid-template-columns: repeat(2, 1fr); }
.hcg-footer__cols--3 { grid-template-columns: repeat(3, 1fr); }
.hcg-footer__cols--4 { grid-template-columns: repeat(4, 1fr); }
.hcg-footer-widget + .hcg-footer-widget { margin-top: 28px; }
.hcg-footer-widget__title {
  font-family: var(--hcg-font-heading);
  font-size: 15px; font-weight: 700; letter-spacing: -.01em;
  color: var(--hcg-text); margin: 0 0 14px;
}
.hcg-footer-widget ul { list-style: none; margin: 0; padding: 0; }
.hcg-footer-widget li { margin: 0 0 8px; }
.hcg-footer-widget a { color: var(--hcg-muted); text-decoration: none; font-size: 14px; }
.hcg-footer-widget a:hover { color: var(--hcg-text); }
@media (max-width: 960px) {
  .hcg-footer__cols--3, .hcg-footer__cols--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .hcg-footer__cols { grid-template-columns: 1fr; }
}

/* ===== Pages / 404 / posts =====
   .hcg-section already centers at 1240px and gives left/right padding.
   .hcg-page is the *inner* container — center the article column inside it
   instead of constraining the body alone (which left-aligned narrow content
   inside a wide box). */
.hcg-page { padding-top: 0; }
.hcg-article { max-width: 760px; margin-inline: auto; }
.hcg-article__head { margin-bottom: 32px; }
.hcg-article__head .hcg-eyebrow { display: block; margin-bottom: 12px; }
.hcg-article__body { font-size: 16px; line-height: 1.7; color: var(--hcg-text-2); }
.hcg-article__body > * + * { margin-top: 1em; }
.hcg-article__body h2, .hcg-article__body h3 { color: var(--hcg-text); font-family: var(--hcg-font-heading); font-weight: 700; letter-spacing: -.02em; }
/* Wide / boxed layout overrides — set per-page via metabox in v1.11. */
.hcg-article--wide { max-width: none; }
.hcg-article--boxed { max-width: 1080px; }

.hcg-posts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }
.hcg-post { padding: 24px 0; border-top: 1px solid var(--hcg-border); }
.hcg-post .hcg-eyebrow { display: block; margin-bottom: 8px; }
.hcg-post__title { font-family: var(--hcg-font-heading); font-weight: 700; font-size: 22px; margin: 0 0 8px; letter-spacing: -.02em; }
.hcg-post__title a { color: var(--hcg-text); text-decoration: none; }
.hcg-post__title a:hover { background: var(--hcg-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hcg-post__excerpt { color: var(--hcg-muted); font-size: 15px; }

/* ===== Mobile overflow safety net (1.16.0-beta.66) =====
   Prevents horizontal scroll on mobile caused by media, embeds, or
   off-canvas content. `html, body { overflow-x: clip }` is preferred
   over `hidden` because it doesn't create a containing block for
   position:fixed (the header still scrolls correctly). */
html, body { overflow-x: clip; }
img, svg, video, iframe, canvas, embed, object { max-width: 100%; height: auto; }
.hcg-nav__inner, .hcg-section, .hcg-hero { min-width: 0; }

/* ===== Mobile button wrap (1.16.0-beta.67) =====
   .hcg-btn has `white-space: nowrap` (correct for short header CTAs).
   On mobile, hero/section CTAs with long localized labels ("Inizia
   l'analisi fotografica gratuita", "Démarrer l'analyse photo gratuite")
   overflow the viewport. Allow wrap in body-area CTAs at narrow widths
   while keeping the header chrome unchanged. */
@media (max-width: 600px) {
  .hcg-hero .hcg-btn,
  .hcg-action-row .hcg-btn,
  .hcg-section .hcg-btn {
    white-space: normal;
    max-width: 100%;
    text-align: center;
    hyphens: auto;
    -webkit-hyphens: auto;
  }
}

/* ===== Responsive ===== */
@media (max-width: 960px) {
  /* .hcg-menu { display: none; } — moved up to the wider 1200px breakpoint
     near the .hcg-menu owner block (search "Hamburger collapse"). */
  .hcg-pricing, .hcg-posts { grid-template-columns: 1fr; }

  /* Text + image sections — reorder so the CTA sits AFTER the visual.
     Mobile UX pattern: context (eyebrow + heading + body) → proof
     (visual) → action (CTA). The CTA is nested inside .hcg-split-text
     in the DOM, so `display: contents` flattens .hcg-split-text into
     the flex column parent and lets us reorder its children alongside
     the sibling .hcg-split-visual. Works for both .hcg-split and
     .hcg-split--reverse — same column order on mobile regardless of
     desktop layout choice. */
  .hcg-split, .hcg-split--reverse {
    display: flex;
    flex-direction: column;
    gap: 32px;
  }
  .hcg-split,
  .hcg-split--reverse                    { align-items: center; }
  .hcg-split-text { display: contents; }
  .hcg-split-text > .hcg-eyebrow         { order: 1; }
  .hcg-split-text > .hcg-section-title,
  .hcg-split-text > h2,
  .hcg-split-text > h3                   { order: 2; }
  .hcg-split-text > .hcg-section-sub,
  .hcg-split-text > p                    { order: 3; }
  /* Both selectors needed: the desktop rule
     `.hcg-split--reverse .hcg-split-visual { order: 1; }` has
     specificity (0,2,0) and would otherwise win at parity over a
     bare `.hcg-split-visual` on mobile, leaving the visual stuck
     before the heading on every alternating (reverse) zigzag
     section (e.g. /it/ "Brief reali"). */
  .hcg-split > .hcg-split-visual,
  .hcg-split--reverse > .hcg-split-visual { order: 4; }
  .hcg-split-text > .hcg-action-row      { order: 5; }
  /* Center text inside flattened split-text children too — `display:
     contents` drops the wrapper box, so text-align must live on each
     child or on the flex parent. Selecting via `.hcg-split-text > *`
     covers eyebrow, h2/h3, p, action-row, image inside, etc. */
  .hcg-split-text > *                    { text-align: center; }
  .hcg-split-text > .hcg-section-sub     { margin-left: auto; margin-right: auto; }

  .hcg-section { padding: 64px 20px; }
  .hcg-hero { padding: 24px 20px; }
  /* `minmax(0, 1fr)` (not `1fr`) is critical here: with bare `1fr` the
     grid column expands to the child's min-content width. The chat-frame
     contains a horizontal scroll row of 168px starter pills (~520px
     intrinsic min-content), which would blow the column past the
     viewport and overflow the whole hero. minmax(0, 1fr) caps it. */
  /* Hero — flex column so we can reorder the CTA AFTER the chat frame.
     `display: contents` on .hcg-hero__meta flattens its children into
     the flex parent so .hcg-action-row sits next to .hcg-chat-frame in
     the order chain (see comment on .hcg-split above for the rationale). */
  .hcg-hero__split {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
  }
  .hcg-hero__meta { display: contents; }
  .hcg-hero__meta > .hcg-eyebrow     { order: 1; }
  .hcg-hero__meta > .hcg-hero__title { order: 2; }
  .hcg-hero__meta > .hcg-hero__sub   { order: 3; }
  .hcg-hero__split > .hcg-chat-frame { order: 4; }
  .hcg-hero__meta > .hcg-action-row  { order: 5; }
  .hcg-hero__meta > .hcg-hero__trust { order: 6; }
  /* `display: contents` drops the wrapping box, so any block-level styling
     that used to live on .hcg-hero__meta (text-align, max-width centering)
     now has to live on the flex parent or directly on the children. */
  .hcg-hero__split > .hcg-eyebrow,
  .hcg-hero__split > .hcg-hero__title,
  .hcg-hero__split > .hcg-hero__sub,
  .hcg-hero__split > .hcg-action-row,
  .hcg-hero__split > .hcg-hero__trust { text-align: center; }
  .hcg-hero__sub { margin-left: auto; margin-right: auto; }
  .hcg-chat-frame { min-width: 0; max-width: 480px; margin: 0 auto; }
  /* Defensive: the .hcg-hero grid is implicit 1 col, but child sections
     can still blow out without min-width:0. */
  .hcg-hero > * { min-width: 0; }
  .hcg-nav__inner { padding: 12px 20px; }
  .hcg-tone-switch button span { display: none; }

  /* Tone switcher compact mode: show only the active button and cycle
     on tap (Light → Dark → System → Light). Cleaner than a popover
     dropdown on tablet/mobile widths where header real estate is tight.
     JS in header.php detects when clicking the already-pressed button
     and rotates to the next tone instead of toggling. */
  .hcg-tone-switch { gap: 0; padding: 2px; }
  .hcg-tone-switch button[aria-pressed="false"] { display: none; }
  .hcg-tone-switch button[aria-pressed="true"] {
    width: 32px; height: 32px; padding: 0;
  }

}
@media (max-width: 600px) {
  .hcg-fb-preview__grid { grid-template-columns: 1fr; }
  .hcg-chat__tools { display: none; }
}
@media (max-width: 480px) {
  .hcg-nav__inner { gap: 8px; padding-left: 12px; padding-right: 12px; }
  .hcg-nav__brand { min-width: 0; flex: 1 1 auto; }
  .hcg-brand__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .hcg-nav__actions { flex: 0 0 auto; gap: 6px; min-width: 0; }
  .hcg-nav__actions .hcg-tone-switch { display: none; }
  .hcg-nav__actions .hcg-btn--sm { padding-left: 12px; padding-right: 12px; }
  /* Drop the secondary "Log in" ghost button at narrow widths so the
     "Start free trial" primary CTA + lang slot + brand still fit on
     one row without overflow. Log in remains accessible from the
     drawer menu. */
  .hcg-nav__actions .hcg-btn--ghost { display: none; }
}

/* ===== v1.9.0 — Customizer-driven layout / buttons / header overrides ===== */
/* These rules read CSS custom properties set by the theme's inline <style>
   (see hcg_assets() in functions.php) so they react to Customizer changes. */

/* Container width — apply to the main bounded inner wrappers.
   Fallback widened to 1440px so content breathes on large desktop
   screens instead of sitting in a narrow column. The Customizer
   setting (hcg_container_max) still overrides per-site. */
.hcg-nav__inner,
.hcg-hero,
.hcg-section,
.hcg-footer__inner {
  max-width: var(--hcg-container-max, 1440px);
}

/* Section vertical padding. Mobile rule above keeps its own override. */
@media (min-width: 901px) {
  .hcg-section {
    padding-top: var(--hcg-section-py, 96px);
    padding-bottom: var(--hcg-section-py, 96px);
  }
}

/* Global radius / shadow scale — applied to neutral surfaces.
   Buttons & chat have their own pill-shape rules; left untouched. */
.hcg-pricing-card,
.hcg-post-card,
.hcg-fb-preview,
.hcg-fb-card {
  border-radius: var(--hcg-radius, 14px);
  box-shadow: var(--hcg-shadow, none);
}

/* Buttons — preset shapes via body classes + accent override via var. */
body.hcg-btn-sharp   .hcg-btn { border-radius: 0; }
body.hcg-btn-rounded .hcg-btn { border-radius: 8px; }
body.hcg-btn-pill    .hcg-btn { border-radius: 999px; }

/* Honor accent override for the primary/accent buttons that don't use
   the brand gradient (ghost variants stay neutral). */
.hcg-btn--primary,
.hcg-btn--accent {
  /* If a custom override is set, use it as a flat colour;
     otherwise the brand gradient defined elsewhere wins. */
}
body[style*="--hcg-btn-accent"] .hcg-btn--primary,
body[style*="--hcg-btn-accent"] .hcg-btn--accent {
  background: var(--hcg-btn-accent);
}

/* Header — height / sticky / shrink / background style / layout. */
.hcg-nav { min-height: var(--hcg-header-height, 72px); }
.hcg-nav__inner { min-height: var(--hcg-header-height, 72px); padding-top: 0; padding-bottom: 0; }

/* Sticky toggle — default CSS already has position:sticky, so we only
   override OFF when the body class is missing. */
body:not(.hcg-hdr-sticky) .hcg-nav { position: relative; top: auto; }

/* Shrink on scroll — JS toggles .hcg-hdr-scrolled on <body>. */
body.hcg-hdr-shrink.hcg-hdr-scrolled .hcg-nav,
body.hcg-hdr-shrink.hcg-hdr-scrolled .hcg-nav__inner {
  min-height: calc(var(--hcg-header-height, 72px) - 12px);
}
.hcg-nav { transition: min-height .25s ease, background-color .25s ease, backdrop-filter .25s ease, border-color .25s ease; }

/* Background style. */
body.hcg-hdr-bg-solid .hcg-nav {
  background: var(--hcg-bg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body.hcg-hdr-bg-blurred .hcg-nav {
  background: var(--hcg-topbar);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
body.hcg-hdr-bg-transparent-hero .hcg-nav {
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body.hcg-hdr-bg-transparent-hero.hcg-hdr-scrolled .hcg-nav {
  background: var(--hcg-topbar);
  border-bottom-color: var(--hcg-border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Layout variants — the inner is already a flex row; we just shift items. */
body.hcg-hdr-layout-logo-left .hcg-nav__inner {
  justify-content: flex-start;
  gap: 32px;
}
body.hcg-hdr-layout-logo-left .hcg-nav__actions { margin-left: auto; }

body.hcg-hdr-layout-logo-center .hcg-nav__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}
body.hcg-hdr-layout-logo-center .hcg-nav__brand,
body.hcg-hdr-layout-logo-center .hcg-brand { grid-column: 2; justify-self: center; }
body.hcg-hdr-layout-logo-center .hcg-menu  { grid-column: 1; justify-self: start; }
body.hcg-hdr-layout-logo-center .hcg-nav__actions { grid-column: 3; justify-self: end; }

body.hcg-hdr-layout-logo-left-cta-right .hcg-nav__inner {
  justify-content: space-between;
}


/* ============================================================
 * 404 — On-brand template
 * ============================================================ */
.hcg-page--404 { padding-top: 0; }
.hcg-section--404 {
  padding: clamp(64px, 10vw, 140px) 28px clamp(80px, 12vw, 160px);
  text-align: center;
}
.hcg-404 {
  max-width: 880px;
  margin: 0 auto;
}
.hcg-404__eyebrow {
  font-family: var(--hcg-font-body);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 12px;
  font-weight: 600;
  color: color-mix(in oklab, var(--hcg-accent), currentColor 25%);
  margin: 0 0 28px;
}
.hcg-404__headline {
  font-family: var(--hcg-font-heading);
  font-weight: 700;
  font-size: clamp(120px, 22vw, 280px);
  line-height: 0.9;
  margin: 0 0 36px;
  letter-spacing: -0.04em;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(8px, 1.5vw, 24px);
  color: var(--hcg-fg, #1a1a1a);
}
.hcg-404__digit { display: inline-block; }
.hcg-404__digit--0 {
  position: relative;
  width: clamp(110px, 20vw, 250px);
  height: clamp(120px, 22vw, 280px);
}
.hcg-404__zero {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
}
.hcg-404__zero-ring {
  position: absolute; inset: 8%;
  border-radius: 50%;
  border: clamp(10px, 1.6vw, 22px) solid currentColor;
  box-sizing: border-box;
}
.hcg-404__zero-shears {
  position: relative;
  width: 38%;
  aspect-ratio: 1 / 1;
  color: var(--hcg-accent);
  display: grid; place-items: center;
  animation: hcg-404-shears 4.2s ease-in-out infinite;
}
.hcg-404__zero-shears svg { width: 100%; height: 100%; }
@keyframes hcg-404-shears {
  0%, 70%, 100% { transform: rotate(0deg); }
  78%           { transform: rotate(-12deg); }
  86%           { transform: rotate(8deg); }
  94%           { transform: rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) {
  .hcg-404__zero-shears { animation: none; }
}

.hcg-404__title {
  font-family: var(--hcg-font-heading);
  font-weight: 700;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.15;
  margin: 0 0 16px;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.hcg-404__lede {
  font-family: var(--hcg-font-body);
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.55;
  max-width: 60ch;
  margin: 0 auto 40px;
  color: color-mix(in oklab, currentColor 75%, transparent);
  text-wrap: pretty;
}
.hcg-404__custom { text-align: left; margin: 0 auto 40px; max-width: 70ch; }
.hcg-404__custom-title { font-family: var(--hcg-font-heading); font-size: clamp(24px, 3vw, 32px); margin: 0 0 12px; }

.hcg-404__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin: 0 0 56px;
}

.hcg-404__search {
  border-top: 1px solid color-mix(in oklab, currentColor 12%, transparent);
  padding-top: 28px;
  max-width: 520px;
  margin: 0 auto;
}
.hcg-404__search-label {
  font-size: 13px;
  font-weight: 500;
  color: color-mix(in oklab, currentColor 60%, transparent);
  margin: 0 0 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.hcg-404__search .search-form {
  display: flex; gap: 8px;
}
.hcg-404__search .search-field {
  flex: 1;
  padding: 12px 16px;
  border-radius: var(--hcg-radius, 8px);
  border: 1px solid color-mix(in oklab, currentColor 18%, transparent);
  background: transparent;
  font: inherit;
  color: inherit;
}
.hcg-404__search .search-submit {
  padding: 12px 20px;
  border-radius: var(--hcg-radius, 8px);
  border: 0;
  background: var(--hcg-accent);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}

@media (max-width: 600px) {
  .hcg-404__cta { flex-direction: column; align-items: stretch; }
  .hcg-404__cta .hcg-btn { width: 100%; }
}

/* Theme Doctor frontend overlay: admin-only markup emitted from inc/theme-doctor.php. */
.hcg-theme-doctor-overlay {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 99998;
  width: min(360px, calc(100vw - 32px));
  max-height: min(420px, calc(100vh - 32px));
  overflow: auto;
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  background: rgba(18, 18, 18, 0.94);
  color: #f5f5f5;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.32);
  font: 12px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.hcg-theme-doctor-overlay strong {
  display: block;
  margin: 0 0 8px;
  font-size: 13px;
}
.hcg-theme-doctor-overlay dl {
  display: grid;
  grid-template-columns: minmax(80px, 0.38fr) minmax(0, 1fr);
  gap: 5px 10px;
  margin: 0;
}
.hcg-theme-doctor-overlay dt {
  color: rgba(255, 255, 255, 0.62);
}
.hcg-theme-doctor-overlay dd {
  margin: 0;
  overflow-wrap: anywhere;
}

/* ===== APP-SHELL PAGES: viewport reset =====
   Pagine che ospitano la chat app / settings / formula-book.
   body.hcg-app-shell-page viene aggiunto da inc/plugin-compat.php
   dopo aver verificato route/shortcode app-shell reali. Lo shell
   HCGPT riempie il viewport da solo via height: 100dvh + composer
   fixed bottom, quindi il theme deve:
     1. Lockare body + content wrapper a 100dvh (NON 100vh — su iOS
        100vh = largest viewport con browser chrome nascosto, lascia
        spazio bianco visibile sotto lo shell)
     2. Sopprimere footer del theme se presente (template normali)
     3. Azzerare main padding/min-height (template normali)
   Il template canonico per la chat è templates/blank-app.php che
   aggiunge body.hcg-blank: il selettore `.hcg-blank__content` qui
   sotto copre quel caso. I selettori `.hcg-main`/`.hcg-footer`
   coprono pagine app-shell che usano page.php con shortcode HCGPT
   embeddato.

   Non usare body.hcgpt-chat-page qui: il plugin può aggiungerlo anche
   a pagine marketing con demo/chat shortcode, che devono mantenere lo
   scroll documentale normale. */
body.hcg-app-shell-page {
  margin: 0;
  overflow: hidden;
  min-height: 100dvh;
  height: 100dvh;
}
@supports not (height: 100dvh) {
  body.hcg-app-shell-page {
    min-height: 100vh;
    height: 100vh;
  }
}
body.hcg-app-shell-page .hcg-blank__content {
  /* 100% (NOT 100dvh) — il body è già lockato dal plugin a
     calc(100dvh - admin-offset) via body.hcgpt-app-shell-lock.admin-bar
     (frontend.css del plugin). Se usiamo 100dvh qui, blank-content
     supera il body di 32px (admin bar offset), tutta la cascata
     interna perde spazio e il chat shell non riempie più il viewport
     visibile. height: 100% segue correttamente il body sized. */
  min-height: 100%;
  height: 100%;
  overflow: hidden;
}
body.hcg-app-shell-page .hcg-main {
  padding: 0;
  margin: 0;
  min-height: 0;
  height: 100%;
  background: transparent;
}
/* The app shortcode can render inside the editorial page wrapper
   (hcg-section / hcg-article) instead of the blank template's
   .hcg-blank__content. Flatten that wrapper on app-shell pages so the app
   shell fills the locked viewport and the chat composer is not pushed below
   the fold (the section's top padding was offsetting the shell ~96px). */
body.hcg-app-shell-page .hcg-section.hcg-page,
body.hcg-app-shell-page .hcg-article,
body.hcg-app-shell-page .hcg-article__body {
  padding: 0;
  margin: 0;
  height: 100%;
  min-height: 0;
  max-width: none;
}
body.hcg-app-shell-page .hcg-section.hcg-page {
  display: flex;
  flex-direction: column;
}
body.hcg-app-shell-page .hcg-footer {
  display: none;
}