/* ==========================================================================
   HairAdvice.pro — Design System
   Palette: deep forest ink (trust/medical) + warm amber accent + warm sand bg
   Type: Source Serif 4 (headlines) + Inter (body/UI)
   ========================================================================== */

:root {
  --ink: #14332B;
  --ink-soft: #2A473E;
  --sand: #F7F5EF;
  --sand-deep: #EFEBDF;
  --accent: #C9762C;
  --accent-deep: #A85F1F;
  --sage: #7C9885;
  --line: #DEDACD;
  --text: #24231F;
  --text-muted: #5C6B64;
  --white: #FFFFFF;
  --danger: #B3452E;
  --radius: 8px;
  --shadow: 0 1px 3px rgba(20,51,43,0.08);
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--text);
  background: var(--sand);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--ink); }
a:hover { color: var(--accent); }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.22;
  margin: 0 0 .5em;
}
h1 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; }
h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-top: 2em; }
h3 { font-size: 1.25rem; margin-top: 1.6em; }
p { margin: 0 0 1.1em; max-width: 70ch; }
.container { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.narrow { max-width: 720px; margin: 0 auto; }

/* ---------- Header ---------- */
.site-header {
  background: var(--ink);
  color: var(--sand);
  position: sticky; top: 0; z-index: 50;
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; padding-top: 14px; padding-bottom: 14px; }
.logo { font-family: var(--serif); font-size: 1.3rem; font-weight: 700; color: #fff; text-decoration: none; letter-spacing: -.01em; }
.logo span { color: var(--accent); }
.main-nav { display: flex; gap: 28px; align-items: center; }
.main-nav a { color: #D9E2DC; text-decoration: none; font-size: .93rem; font-weight: 500; }
.main-nav a:hover { color: #fff; }
.nav-cta { background: var(--accent); color: #fff !important; padding: 9px 18px; border-radius: 6px; }
.nav-cta:hover { background: var(--accent-deep); color: #fff !important; }
.nav-toggle { display: none; background: none; border: 0; color: #fff; font-size: 1.5rem; cursor: pointer; }

@media (max-width: 780px) {
  .main-nav { position: fixed; top: 58px; left: 0; right: 0; background: var(--ink); flex-direction: column; align-items: flex-start; padding: 18px 20px; gap: 16px; display: none; }
  .main-nav.open { display: flex; }
  .nav-toggle { display: block; }
}

/* ---------- Buttons ---------- */
.btn { display: inline-block; padding: 13px 26px; border-radius: 6px; font-weight: 600; text-decoration: none; font-size: .96rem; border: 1px solid transparent; cursor: pointer; transition: transform .1s ease, background-color .15s ease, box-shadow .15s ease; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-deep); color: #fff; box-shadow: 0 3px 10px rgba(201,118,44,0.28); }
.btn-primary:active { transform: translateY(1px); }
.btn-outline { background: transparent; border-color: var(--ink); color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: #fff; }
.btn-lg { padding: 16px 34px; font-size: 1.05rem; }

/* ---------- Hero ---------- */
.hero { padding: 64px 0 56px; border-bottom: 1px solid var(--line); }
.hero-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
.hero-eyebrow { color: var(--accent-deep); font-weight: 600; font-size: .92rem; margin-bottom: 10px; }
.hero p.lead { font-size: 1.15rem; color: var(--text-muted); max-width: 46ch; }
.hero-actions { display: flex; gap: 14px; margin-top: 26px; flex-wrap: wrap; }
.hero-stats { display: flex; gap: 30px; margin-top: 34px; }
.hero-stats div strong { display: block; font-family: var(--serif); font-size: 1.6rem; color: var(--ink); }
.hero-stats div span { font-size: .82rem; color: var(--text-muted); }
.hero-visual { background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 26px; box-shadow: var(--shadow); }
@media (max-width: 860px) { .hero-grid { grid-template-columns: 1fr; } }

/* ---------- Sections ---------- */
.section { padding: 56px 0; }
.section-head { max-width: 640px; margin-bottom: 36px; }
.section-head .kicker { color: var(--accent-deep); font-weight: 600; font-size: .86rem; }
.bg-alt { background: var(--white); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
@media (max-width: 860px) { .grid-3, .grid-2 { grid-template-columns: 1fr; } }

.card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; transition: box-shadow .15s ease, border-color .15s ease; }
.card:hover { box-shadow: 0 4px 14px rgba(20,51,43,0.06); }
.card h3 { margin-top: 0; font-size: 1.1rem; }
.card p { color: var(--text-muted); font-size: .95rem; }

.stage-list { border-top: 1px solid var(--line); }
.stage-row { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: 18px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.stage-row .num { font-family: var(--serif); color: var(--accent-deep); font-size: 1.1rem; }

/* ---------- Quiz ---------- */
.quiz-box { background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 34px; max-width: 640px; margin: 0 auto; box-shadow: var(--shadow); }
.quiz-progress { height: 5px; background: var(--sand-deep); border-radius: 3px; margin-bottom: 26px; overflow: hidden; }
.quiz-progress-bar { height: 100%; background: var(--accent); width: 10%; transition: width .3s ease; }
.quiz-step { display: none; }
.quiz-step.active { display: block; }
.quiz-options { display: grid; gap: 10px; margin-top: 20px; }
.quiz-opt { display: block; width: 100%; text-align: left; padding: 14px 18px; border: 1.5px solid var(--line); border-radius: 8px; background: var(--sand); cursor: pointer; font-size: .98rem; font-family: var(--sans); }
.quiz-opt:hover { border-color: var(--accent); }
.quiz-opt.selected { border-color: var(--accent); background: #FBEFE2; }
.quiz-nav { display: flex; justify-content: space-between; margin-top: 26px; }
.quiz-back { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: .9rem; }

/* ---------- Blog ---------- */
.post-list { display: grid; gap: 26px; }
.post-card { display: grid; grid-template-columns: 220px 1fr; gap: 22px; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.post-card img { border-radius: 6px; aspect-ratio: 4/3; object-fit: cover; }
.post-card h2 { font-size: 1.25rem; margin: 0 0 8px; }
.post-meta { font-size: .82rem; color: var(--text-muted); margin-bottom: 8px; }
@media (max-width: 700px) { .post-card { grid-template-columns: 1fr; } }

.article { max-width: 720px; margin: 0 auto; }
.article-meta { color: var(--text-muted); font-size: .9rem; margin-bottom: 24px; }
.article img { border-radius: 8px; margin: 20px 0; }
.article h2 { border-top: 1px solid var(--line); padding-top: .6em; }
.article ul, .article ol { max-width: 70ch; padding-left: 1.3em; }
.article li { margin-bottom: .4em; }
.breadcrumb { font-size: .82rem; color: var(--text-muted); margin-bottom: 18px; }
.breadcrumb a { color: var(--text-muted); text-decoration: none; }

/* ---------- Forms ---------- */
.form-field { margin-bottom: 16px; }
.form-field label { display: block; font-size: .88rem; font-weight: 600; margin-bottom: 5px; }
.form-field input, .form-field select, .form-field textarea {
  width: 100%; padding: 11px 13px; border: 1px solid var(--line); border-radius: 6px; font-size: .96rem; font-family: var(--sans); background: #fff;
}
.form-field input:focus, .form-field textarea:focus { outline: 2px solid var(--accent); border-color: var(--accent); }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: #C7D2CB; padding: 48px 0 28px; margin-top: 60px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 30px; }
.footer-grid h4 { color: #fff; font-family: var(--sans); font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 14px; }
.footer-grid a { color: #C7D2CB; text-decoration: none; font-size: .9rem; display: block; margin-bottom: 8px; }
.footer-grid a:hover { color: #fff; }
.footer-bottom { border-top: 1px solid #2A473E; margin-top: 34px; padding-top: 20px; font-size: .82rem; color: #90A69B; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; } }

/* ---------- Misc ---------- */
.badge { display: inline-block; background: var(--sand-deep); color: var(--ink-soft); font-size: .78rem; font-weight: 600; padding: 4px 10px; border-radius: 4px; }
.pagination { display: flex; justify-content: space-between; margin: 40px 0; }
.page-link { text-decoration: none; font-weight: 600; }
.disclaimer-box { background: #FBEFE2; border: 1px solid #EAD2B0; border-radius: 8px; padding: 16px 20px; font-size: .9rem; color: #6B4A1F; margin: 24px 0; }
.review-badge { display: flex; align-items: center; gap: 8px; background: #EAF4EC; border: 1px solid #B7D9BE; border-radius: 6px; padding: 10px 14px; font-size: .86rem; color: #1e5a30; margin-bottom: 20px; }
.review-badge-icon { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; background: #2f7a45; color: #fff; border-radius: 50%; font-size: .7rem; flex-shrink: 0; }
.trust-strip { display: flex; gap: 36px; flex-wrap: wrap; padding: 20px 0; color: var(--text-muted); font-size: .85rem; }
.skip-link { position: absolute; left: -999px; top: 0; background: var(--accent); color: #fff; padding: 10px; z-index: 999; }
.skip-link:focus { left: 10px; top: 10px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ---------- Consent banner (AdSense EEA/UK requirement) ---------- */
.consent-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 200; background: var(--ink); color: #fff; box-shadow: 0 -4px 20px rgba(0,0,0,0.18); }
.consent-inner { max-width: 1120px; margin: 0 auto; padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.consent-inner p { margin: 0; font-size: .86rem; color: #dce6e1; max-width: 60ch; }
.consent-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
@media (max-width: 700px) { .consent-inner { flex-direction: column; align-items: flex-start; } }

/* ---------- Tool widgets (calculators, trackers, planners) ---------- */
.tool-box { background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 32px; box-shadow: var(--shadow); max-width: 760px; margin: 0 auto; }
.tool-field { margin-bottom: 20px; }
.tool-field label { display: block; font-weight: 600; font-size: .92rem; margin-bottom: 8px; }
.tool-field select, .tool-field input[type="number"], .tool-field input[type="date"], .tool-field input[type="text"] {
  width: 100%; padding: 11px 13px; border: 1px solid var(--line); border-radius: 7px; font-size: .96rem; font-family: var(--sans); background: #fff;
}
.tool-field select:focus, .tool-field input:focus { outline: 2px solid var(--accent); border-color: var(--accent); }
.tool-chip-group { display: flex; flex-wrap: wrap; gap: 8px; }
.tool-chip { padding: 9px 16px; border: 1.5px solid var(--line); border-radius: 20px; background: var(--sand); cursor: pointer; font-size: .88rem; font-family: var(--sans); font-weight: 500; }
.tool-chip.selected { background: var(--ink); color: #fff; border-color: var(--ink); }
.tool-slider-value { font-family: var(--serif); font-size: 1.3rem; color: var(--accent-deep); font-weight: 700; text-align: center; margin-bottom: 6px; }
.tool-range { width: 100%; accent-color: var(--accent); }
.tool-result { margin-top: 24px; padding: 22px; background: var(--sand); border-radius: 10px; border: 1px solid var(--line); display: none; }
.tool-result.show { display: block; }
.tool-result-score { font-family: var(--serif); font-size: 2.4rem; font-weight: 700; color: var(--ink); text-align: center; margin-bottom: 4px; }
.tool-result-label { text-align: center; color: var(--text-muted); font-size: .88rem; margin-bottom: 18px; }
.tool-result-bar { height: 10px; background: #E5E1D2; border-radius: 6px; overflow: hidden; margin-bottom: 18px; }
.tool-result-bar span { display: block; height: 100%; border-radius: 6px; transition: width .4s ease; }
.tool-timeline { border-left: 2px solid var(--line); margin-left: 8px; padding-left: 22px; }
.tool-timeline-item { position: relative; padding-bottom: 22px; }
.tool-timeline-item::before { content: ''; position: absolute; left: -28px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); border: 2px solid #fff; box-shadow: 0 0 0 2px var(--line); }
.tool-timeline-item strong { display: block; font-family: var(--serif); color: var(--ink); margin-bottom: 3px; }
.tool-timeline-item p { font-size: .88rem; color: var(--text-muted); margin: 0; }
.tool-disclaimer { font-size: .78rem; color: var(--text-muted); text-align: center; margin-top: 16px; }
.tools-grid-card { background: var(--white); border: 1px solid var(--line); border-radius: 10px; padding: 22px; text-decoration: none; display: block; transition: box-shadow .15s ease; }
.tools-grid-card:hover { box-shadow: var(--shadow-sm, 0 2px 10px rgba(20,51,43,0.08)); border-color: var(--accent); }
.tools-grid-card h3 { color: var(--ink); margin: 0 0 8px; font-size: 1.05rem; }
.tools-grid-card p { color: var(--text-muted); font-size: .88rem; margin: 0; }
.streak-dot { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 700; background: #E5E1D2; color: var(--text-muted); cursor: pointer; }
.streak-dot.done { background: #4F8B5E; color: #fff; }

/* ---------- Ad slot (clearly labelled per AdSense policy) ---------- */
.ad-slot { margin: 32px 0; min-height: 90px; }
.ad-slot-label { text-align: center; font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); margin-bottom: 6px; }
.ad-slot-unit { text-align: center; }

/* ==========================================================================
   v9 FUTURE THEME — aurora gradients, glass, system fonts (no web-font delay)
   ========================================================================== */
:root{
  --ink:#0B1226; --ink-soft:#1B2547; --sand:#F3F6FD; --sand-deep:#E6ECF8;
  --accent:#6D5DF6; --accent-deep:#5443E0; --sage:#14B8A6; --cyan:#22D3EE; --pink:#F472B6;
  --line:#DDE5F3; --text:#111B33; --text-muted:#5A6A86; --white:#fff;
  --radius:16px; --shadow:0 10px 30px -12px rgba(30,41,99,.18);
  --grad:linear-gradient(135deg,#6D5DF6 0%,#22D3EE 100%);
  --grad2:linear-gradient(135deg,#F472B6 0%,#6D5DF6 55%,#22D3EE 100%);
  --serif:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --sans:var(--serif);
}
body{background:var(--sand);background-image:radial-gradient(900px 500px at 8% -5%,rgba(var(--accent-rgb),.10),transparent 60%),radial-gradient(800px 500px at 100% 0,rgba(34,211,238,.10),transparent 60%);background-repeat:no-repeat;letter-spacing:-.005em}
h1,h2,h3,h4{letter-spacing:-.03em;font-weight:800}
h1{font-size:clamp(2.1rem,5.2vw,3.6rem);line-height:1.08}
h2{font-size:clamp(1.55rem,3vw,2.2rem)}
a{color:var(--accent-deep)}
.read-progress{position:fixed;top:0;left:0;right:0;height:3px;background:var(--grad2);transform:scaleX(0);transform-origin:0 50%;z-index:300}

/* header */
.site-header{position:sticky;top:0;z-index:100;background:rgba(7,11,26,.72);backdrop-filter:saturate(1.6) blur(16px);-webkit-backdrop-filter:saturate(1.6) blur(16px);border-bottom:1px solid rgba(255,255,255,.08);transition:box-shadow .25s}
.site-header.scrolled{box-shadow:0 8px 30px -10px rgba(0,0,0,.45)}
.logo{display:inline-flex;align-items:center;gap:10px;font-family:var(--serif);font-weight:800;font-size:1.25rem;color:#fff;text-decoration:none}
.logo:hover{color:#fff}
.logo-mark{width:26px;height:26px;border-radius:9px;background:var(--grad2);box-shadow:0 0 18px rgba(var(--accent-rgb),.7);position:relative;flex:none}
.logo-mark::after{content:"";position:absolute;inset:7px;border-radius:50%;background:#070B1A}
.logo span span,.logo-text>span{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.main-nav{gap:6px}
.main-nav a{color:#C9D3F0;padding:8px 14px;border-radius:999px;font-weight:600;transition:background .2s,color .2s}
.main-nav a:hover{background:rgba(255,255,255,.08);color:#fff}
.main-nav a.nav-cta,.nav-cta{background:var(--grad);color:#06101F!important;margin-left:8px;box-shadow:0 6px 20px -6px rgba(34,211,238,.6)}
.main-nav a.nav-cta:hover{background:var(--grad);filter:brightness(1.1)}
.nav-toggle{display:none;width:44px;height:44px;padding:0;border-radius:12px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.nav-toggle b{display:block;width:20px;height:2px;background:#fff;border-radius:2px;transition:transform .25s,opacity .2s}
.nav-toggle.open b:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.open b:nth-child(2){opacity:0}
.nav-toggle.open b:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:780px){
  .nav-toggle{display:flex}
  .main-nav{display:none;position:absolute;top:100%;left:12px;right:12px;flex-direction:column;align-items:stretch;gap:2px;padding:12px;background:rgba(9,14,32,.96);border:1px solid rgba(255,255,255,.1);border-radius:18px;box-shadow:0 20px 50px -10px rgba(0,0,0,.6)}
  .main-nav.open{display:flex}
  .main-nav a{padding:13px 16px}
  .main-nav a.nav-cta{margin:6px 0 0;text-align:center}
}

/* buttons */
.btn{border-radius:999px;padding:13px 28px;font-weight:700;transition:transform .15s,box-shadow .2s,background .2s,filter .2s}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--grad);color:#06101F;box-shadow:0 10px 26px -10px rgba(var(--accent-rgb),.8)}
.btn-primary:hover{background:var(--grad);color:#06101F;filter:brightness(1.08);box-shadow:0 14px 30px -10px rgba(34,211,238,.8)}
.btn-outline{border:1.5px solid rgba(255,255,255,.28);color:#fff;background:rgba(255,255,255,.05)}
.btn-outline:hover{background:rgba(255,255,255,.14);color:#fff}
.section:not(.hero-dark) .btn-outline,.bg-alt .btn-outline,.card .btn-outline{border-color:var(--accent);color:var(--accent-deep);background:transparent}
.section .btn-outline:hover,.bg-alt .btn-outline:hover,.card .btn-outline:hover{background:var(--accent);color:#fff}

/* hero */
.hero{position:relative;overflow:hidden;color:#E6ECFF;background:#070B1A;border:0;padding:84px 0 92px;isolation:isolate}
.hero::before,.hero::after{content:"";position:absolute;border-radius:50%;filter:blur(70px);z-index:-1;opacity:.55;animation:float 14s ease-in-out infinite}
.hero::before{width:520px;height:520px;left:-120px;top:-160px;background:#6D5DF6}
.hero::after{width:460px;height:460px;right:-100px;bottom:-180px;background:#06B6D4;animation-delay:-6s}
@keyframes float{50%{transform:translate(40px,30px) scale(1.1)}}
.hero .container{position:relative}
.hero h1{color:#fff}
.hero h1 em,.grad-text{font-style:normal;background:var(--grad2);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-eyebrow{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);color:#BFE9FF;font-size:.84rem;font-weight:600}
.hero-eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:#34D399;box-shadow:0 0 0 4px rgba(52,211,153,.25)}
.hero p.lead{color:#B5C2E4;font-size:1.15rem}
.hero-stats div strong{font-size:1.9rem;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-stats div span{color:#8FA0C9}
.hero-visual{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:0 30px 70px -25px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.12);border-radius:24px;color:#DCE5FF}
.hero-visual h3{color:#fff}
.hero .stage-list{border-color:rgba(255,255,255,.12)}
.hero .stage-row{border-color:rgba(255,255,255,.1)}
.hero .stage-row .num{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800}
.hero .hero-visual p{color:#9FB0D8!important}

/* trust marquee */
.pill-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.pill{padding:8px 14px;border-radius:999px;font-size:.82rem;font-weight:600;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);color:#C9D6F7}

/* sections & cards */
.section{padding:72px 0}
.section-head .kicker{display:inline-block;padding:5px 12px;border-radius:999px;background:rgba(var(--accent-rgb),.1);color:var(--accent-deep);font-size:.78rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;margin-bottom:12px}
.bg-alt{background:rgba(255,255,255,.7);border-color:var(--line)}
.card,.tools-grid-card,.post-card,.tool-box,.quiz-box{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.card{padding:28px;transition:transform .25s,box-shadow .25s,border-color .25s}
.card:hover,.tools-grid-card:hover,.post-card:hover{transform:translateY(-5px);box-shadow:0 22px 40px -18px rgba(60,64,170,.35);border-color:rgba(var(--accent-rgb),.4)}
.card h3{font-size:1.15rem}
.icon-bubble{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;background:var(--grad);color:#06101F;font-size:1.4rem;margin-bottom:16px;box-shadow:0 10px 22px -10px rgba(var(--accent-rgb),.7)}
.tools-grid-card{padding:24px;transition:transform .25s,box-shadow .25s,border-color .25s}
.tools-grid-card h3{background:none;font-size:1.05rem}
.tools-grid-card::after{content:"Open tool \2192";display:block;margin-top:14px;font-size:.82rem;font-weight:700;color:var(--accent-deep)}

/* guide grid */
.post-list{grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:24px}
.post-card{display:flex;flex-direction:column;grid-template-columns:none;padding:0;overflow:hidden;transition:transform .25s,box-shadow .25s,border-color .25s}
.post-card img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:0}
.post-card>div{padding:20px 22px 24px;display:flex;flex-direction:column;flex:1}
.post-card h2{font-size:1.1rem;line-height:1.3}
.post-card h2 a{color:var(--ink);text-decoration:none}
.post-card p{font-size:.92rem;color:var(--text-muted);flex:1}
.post-meta{font-weight:600;color:var(--accent-deep)}
.post-list .ad-slot{grid-column:1/-1;margin:0}

/* article */
.article{max-width:760px}
.article h1{font-size:clamp(1.9rem,4.4vw,2.9rem)}
.article-body{font-size:1.08rem;line-height:1.8;color:#1B2745}
.article h2{border:0;padding:0;margin-top:2em;position:relative}
.article h2::before{content:"";display:block;width:44px;height:4px;border-radius:4px;background:var(--grad);margin-bottom:12px}
.article img{border-radius:var(--radius)}
.article-meta{display:inline-block;padding:6px 14px;border-radius:999px;background:#fff;border:1px solid var(--line);font-weight:600}
.disclaimer-box{background:linear-gradient(135deg,#FFF7E6,#FFEFD6);border-color:#F6D9A3;border-radius:14px}
.review-badge{border-radius:14px}

/* ads */
.ad-slot{margin:28px auto;max-width:1120px;padding:0 20px;min-height:0;text-align:center;overflow:hidden;contain:content}
.article .ad-slot{padding:0;margin:30px 0}
.ad-slot-label{font-size:.62rem;letter-spacing:.14em;color:#8A97B3;margin-bottom:6px}
.ad-unit{display:flex;justify-content:center;align-items:center;max-width:100%;overflow:hidden}
.ad-unit ins,.ad-unit iframe{max-width:100%}
.ad-sticky{position:fixed;left:0;right:0;bottom:0;z-index:180;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);box-shadow:0 -8px 26px rgba(10,20,60,.18);padding:6px 8px;text-align:center}
.ad-sticky .ad-unit{max-height:100px}
.ad-sticky-x{position:absolute;top:-26px;right:8px;width:26px;height:26px;border:0;border-radius:8px 8px 0 0;background:#fff;color:#333;font-size:18px;line-height:1;cursor:pointer;box-shadow:0 -4px 10px rgba(10,20,60,.12)}

/* footer */
.site-footer{background:#070B1A;color:#9FB0D8;margin-top:0;padding:64px 0 28px;position:relative;overflow:hidden}
.site-footer::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--grad2)}
.footer-about{color:#8191B8;font-size:.9rem;max-width:38ch;margin-top:14px}
.footer-grid a{color:#9FB0D8;transition:color .2s,transform .2s}
.footer-grid a:hover{color:#fff;transform:translateX(3px)}
.footer-grid h4{color:#fff;font-family:var(--sans)}
.footer-bottom{border-color:rgba(255,255,255,.08);color:#6F7FA6}
.to-top{position:fixed;right:16px;bottom:16px;z-index:170;width:44px;height:44px;border-radius:14px;border:0;background:var(--grad);color:#06101F;font-size:1.2rem;font-weight:800;cursor:pointer;opacity:0;transform:translateY(12px);pointer-events:none;transition:.25s;box-shadow:0 10px 24px -8px rgba(var(--accent-rgb),.8)}
.to-top.show{opacity:1;transform:none;pointer-events:auto}

/* forms, tools, quiz */
.tool-box,.quiz-box{border-radius:22px}
.tool-chip{border-radius:999px}
.tool-chip.selected{background:var(--grad);color:#06101F;border-color:transparent;font-weight:700}
.quiz-opt{border-radius:14px;transition:transform .15s,border-color .2s,background .2s}
.quiz-opt:hover{transform:translateX(4px)}
.quiz-opt.selected{background:rgba(var(--accent-rgb),.1);border-color:var(--accent)}
.quiz-progress-bar{background:var(--grad)}
.tool-result{border-radius:16px;background:linear-gradient(180deg,#fff,#F3F6FD)}
.tool-result-score{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.form-field input,.form-field select,.form-field textarea,.tool-field select,.tool-field input{border-radius:12px}
.consent-banner{background:#0B1226;border-top:1px solid rgba(255,255,255,.1)}

/* motion */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}html{scroll-behavior:auto}}
@media(max-width:860px){.hero{padding:56px 0 64px}.section{padding:52px 0}.hero-stats{gap:20px}}
@media(max-width:600px){body{padding-bottom:0}.footer-grid{grid-template-columns:1fr}.hero-actions .btn{flex:1;text-align:center}}

/* ---------- v9.1 additions: quiz, clinics, search, article extras, tools ---------- */
.hero-eyebrow-lite{display:inline-block;padding:6px 14px;border-radius:999px;background:rgba(var(--accent-rgb),.1);color:var(--accent-deep);font-size:.8rem;font-weight:700;margin-bottom:12px}
.chip-row{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.chip{display:inline-block;padding:7px 14px;border-radius:999px;background:#fff;border:1px solid var(--line);color:var(--text);font:600 .82rem var(--sans);text-decoration:none;cursor:pointer;transition:.2s}
.chip.small{padding:4px 10px;font-size:.74rem;background:rgba(var(--accent-rgb),.08);border-color:transparent;color:var(--accent-deep)}
.chip:hover{border-color:var(--accent);color:var(--accent-deep)}
.chip.on{background:var(--grad);color:#06101F;border-color:transparent}
.search-input{width:100%;max-width:560px;padding:14px 20px;border-radius:999px;border:1.5px solid var(--line);background:#fff;font:500 1rem var(--sans);box-shadow:var(--shadow);transition:.2s}
.search-input:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 4px rgba(var(--accent-rgb),.15)}
.search-form{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 26px}
.search-form .search-input{flex:1;min-width:220px}

/* quiz */
.quiz-box{padding:34px;max-width:680px;margin:0 auto;position:relative}
.quiz-top{display:flex;justify-content:space-between;font-size:.8rem;font-weight:700;color:var(--text-muted);margin-bottom:8px}
.quiz-progress{height:8px;border-radius:8px;background:var(--sand-deep)}
.quiz-progress-bar{border-radius:8px;transition:width .4s cubic-bezier(.4,0,.2,1)}
.quiz-step.active{display:block;animation:slideIn .35s ease}
@keyframes slideIn{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
.quiz-opt{display:flex;align-items:center;gap:14px;padding:16px 18px;border-width:2px;font-weight:600}
.opt-dot{width:20px;height:20px;border-radius:50%;border:2px solid var(--line);flex:none;transition:.2s}
.quiz-opt.selected .opt-dot{border-color:var(--accent);background:var(--accent);box-shadow:inset 0 0 0 3px #fff}
.result-wrap{max-width:900px;margin:0 auto}
.result-main{max-width:none;animation:slideIn .5s ease}
.result-badge{display:inline-block;padding:6px 14px;border-radius:999px;background:var(--grad);color:#06101F;font-size:.78rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.match{display:flex;align-items:center;gap:12px;margin-bottom:16px;font-size:.85rem;font-weight:700;color:var(--text-muted)}
.match-bar{flex:1;height:10px;border-radius:10px;background:var(--sand-deep);overflow:hidden}
.match-bar i{display:block;height:100%;width:0;border-radius:10px;background:var(--grad2);transition:width 1.1s cubic-bezier(.2,.8,.2,1)}
.match b{color:var(--accent-deep);min-width:42px;text-align:right}
.answer-chips{display:flex;flex-wrap:wrap;gap:8px}
.next-steps{padding-left:0;list-style:none;counter-reset:s;margin:0}
.next-steps li{counter-increment:s;position:relative;padding:12px 14px 12px 52px;margin-bottom:10px;background:var(--sand);border-radius:14px;border:1px solid var(--line)}
.next-steps li::before{content:counter(s);position:absolute;left:14px;top:50%;transform:translateY(-50%);width:26px;height:26px;border-radius:50%;background:var(--grad);color:#06101F;font-weight:800;font-size:.8rem;display:grid;place-items:center}
.result-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.result-side{margin-top:28px}

/* clinics */
.clinic-card{position:relative;margin-bottom:16px}
.feat-badge{position:absolute;top:16px;right:16px;background:var(--grad);color:#06101F;font-size:.7rem;font-weight:800;padding:4px 10px;border-radius:999px}
.clinic-meta{color:var(--text-muted);font-size:.9rem;margin-bottom:8px}
.clinic-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.clinic-actions .btn{padding:9px 18px;font-size:.86rem}
.success-card{text-align:center}.success-card .icon-bubble{margin:0 auto 14px}

/* article extras */
.toc{background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px 20px;margin:0 0 24px;box-shadow:var(--shadow)}
.toc summary{cursor:pointer;font-weight:800;color:var(--ink)}
.toc ol{margin:10px 0 0;padding-left:1.2em}.toc li{margin:5px 0;font-size:.95rem}.toc a{text-decoration:none}
.article h2{scroll-margin-top:90px}
.share-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:26px 0}
.share-bar span{font-weight:700;font-size:.85rem;color:var(--text-muted);margin-right:4px}
.share-bar a,.share-bar button{padding:8px 16px;border-radius:999px;border:1px solid var(--line);background:#fff;color:var(--ink);font:700 .82rem var(--sans);text-decoration:none;cursor:pointer;transition:.2s}
.share-bar a:hover,.share-bar button:hover{border-color:var(--accent);color:var(--accent-deep)}
.share-bar a.wa{background:#25D366;border-color:#25D366;color:#06210F}
.cta-band{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;padding:22px 26px;border-radius:20px;color:#E6ECFF;background:linear-gradient(135deg,#0B1226,#1B2547);position:relative;overflow:hidden;margin:26px 0}
.cta-band::after{content:"";position:absolute;right:-60px;top:-60px;width:200px;height:200px;border-radius:50%;background:var(--accent);filter:blur(60px);opacity:.5}
.cta-band h3{color:#fff}.cta-band p{color:#B5C2E4}.cta-band>*{position:relative;z-index:1}
.cta-band .btn-outline{border-color:rgba(255,255,255,.3);color:#fff}
.prev-next{display:grid;grid-template-columns:1fr 1fr;gap:14px;max-width:760px;margin:24px auto}
.prev-next a{display:block;padding:16px 18px;border:1px solid var(--line);border-radius:16px;background:#fff;text-decoration:none;color:var(--ink);font-weight:700;transition:.2s}
.prev-next a:hover{border-color:var(--accent);transform:translateY(-3px)}
.prev-next small{display:block;color:var(--text-muted);font-weight:600;margin-bottom:4px}
.popular-list{list-style:none;padding:0;margin:0;display:grid;gap:12px;counter-reset:p}
.popular-list a{display:flex;align-items:center;gap:16px;padding:16px 20px;background:#fff;border:1px solid var(--line);border-radius:16px;text-decoration:none;color:var(--ink);font-weight:700;transition:.2s}
.popular-list a:hover{transform:translateX(6px);border-color:var(--accent)}
.rank{width:34px;height:34px;border-radius:12px;background:var(--grad);color:#06101F;display:grid;place-items:center;font-weight:800;flex:none}
@media(max-width:600px){.prev-next{grid-template-columns:1fr}}

/* tools */
.tool-box{padding:36px;position:relative}
.tool-box::before{content:"";position:absolute;inset:0;border-radius:22px;padding:1.5px;background:var(--grad2);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.55;pointer-events:none}
.tool-field label{font-weight:700}
.tool-chip{transition:transform .15s,box-shadow .2s;font-weight:600}
.tool-chip:hover{transform:translateY(-2px);border-color:var(--accent)}
.tool-result.pop{animation:popIn .5s cubic-bezier(.2,.9,.3,1.2)}
@keyframes popIn{from{opacity:0;transform:scale(.94) translateY(10px)}to{opacity:1;transform:none}}
.tool-result-bar{height:12px;border-radius:12px}.tool-result-bar span{transition:width 1s cubic-bezier(.2,.8,.2,1)}
.res-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:18px}
.res-actions button{padding:9px 16px;border-radius:999px;border:1px solid var(--line);background:#fff;font:700 .8rem var(--sans);cursor:pointer;transition:.2s}
.res-actions button:hover{border-color:var(--accent);color:var(--accent-deep)}
.tool-more{padding-top:24px}
.tool-tile .icon-bubble{margin-bottom:14px}
.tool-timeline-item::before{box-shadow:0 0 0 4px rgba(var(--accent-rgb),.2)}
@media print{.site-header,.site-footer,.ad-slot,.ad-sticky,.to-top,.tool-more,.res-actions,.consent-banner{display:none!important}}

/* ==========================================================================
   v10 MINIMAL — one accent, light surfaces, calm motion. Matches the admin.
   ========================================================================== */
:root{--accent-rgb:79,70,229;--ink:#0B1226;--accent:#4F46E5;--accent-deep:#4338CA;--sand:#F7F8FC;--sand-deep:#EEF0F7;--line:#E4E7F0;--text:#111A33;--text-muted:#5D6A85;
  --grad:linear-gradient(135deg,#4F46E5,#7C6CF6);--grad2:linear-gradient(135deg,#4F46E5,#06B6D4);--shadow:0 1px 2px rgba(15,23,60,.04),0 8px 24px -12px rgba(15,23,60,.12)}
body{background:#fff;background-image:none;font-size:17px}
.muted{color:var(--text-muted)}
/* header: light + glass */
.site-header{background:rgba(255,255,255,.82);border-bottom:1px solid var(--line)}
.site-header.scrolled{box-shadow:0 6px 24px -14px rgba(15,23,60,.25)}
.logo,.logo:hover{color:var(--ink)}
.logo-mark{box-shadow:none;background:var(--grad)}
.logo-mark::after{background:#fff}
.main-nav a{color:var(--text-muted)}
.main-nav a:hover{background:var(--sand-deep);color:var(--ink)}
.main-nav a.nav-cta,.nav-cta{background:var(--ink);color:#fff!important;box-shadow:none}
.main-nav a.nav-cta:hover{background:var(--accent);filter:none}
.nav-toggle{background:var(--sand);border-color:var(--line)}.nav-toggle b{background:var(--ink)}
@media(max-width:780px){.main-nav{background:#fff;border-color:var(--line);box-shadow:0 20px 40px -16px rgba(15,23,60,.3)}}
/* buttons */
.btn-primary,.btn-primary:hover{background:var(--accent);color:#fff;box-shadow:0 8px 20px -10px rgba(var(--accent-rgb),.7)}
.btn-primary:hover{background:var(--accent-deep);filter:none}
.btn-ghost{background:#fff;border:1.5px solid var(--line);color:var(--ink)}.btn-ghost:hover{border-color:var(--ink);color:var(--ink)}
.btn-lg{padding:15px 32px;font-size:1rem}
.icon-bubble,.chip.on,.tool-chip.selected,.feat-badge,.result-badge,.rank,.to-top,.next-steps li::before{color:#fff}
.icon-bubble{box-shadow:none}.tool-chip.selected{background:var(--accent)}
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
/* minimal home */
.mhero{padding:88px 0 56px;text-align:center;background:radial-gradient(circle at 1px 1px,#E4E7F0 1px,transparent 0) 0 0/26px 26px;position:relative}
.mhero::after{content:"";position:absolute;inset:auto 0 0;height:90px;background:linear-gradient(transparent,#fff)}
.mhero .container{position:relative;z-index:1;max-width:820px}
.mhero-tag{display:inline-block;padding:6px 14px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--text-muted);font-size:.82rem;font-weight:600}
.mhero h1{margin:22px 0 18px;font-size:clamp(2.2rem,6vw,4rem);letter-spacing:-.04em;line-height:1.05;color:var(--ink)}
.mhero-lead{font-size:1.15rem;color:var(--text-muted);max-width:56ch;margin:0 auto 28px}
.mhero-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.mhero-search{display:flex;max-width:520px;margin:28px auto 0;border:1.5px solid var(--line);border-radius:999px;background:#fff;padding:5px;box-shadow:var(--shadow);transition:border-color .2s,box-shadow .2s}
.mhero-search:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px rgba(var(--accent-rgb),.12)}
.mhero-search input{flex:1;border:0;outline:0;background:transparent;padding:10px 16px;font:500 1rem var(--sans);min-width:0}
.mhero-search button{border:0;border-radius:999px;background:var(--ink);color:#fff;padding:0 22px;font:700 .9rem var(--sans);cursor:pointer;transition:background .2s}
.mhero-search button:hover{background:var(--accent)}
.mhero-trust{display:flex;gap:28px;justify-content:center;flex-wrap:wrap;list-style:none;margin:30px 0 0;padding:0;color:var(--text-muted);font-size:.92rem}
.mhero-trust b{color:var(--ink);font-size:1.05rem}
.msec{padding:44px 0}
.msec-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:22px}
.msec-head h2{margin:0;font-size:1.5rem;letter-spacing:-.03em}
.msec-head .more{font-weight:700;font-size:.9rem;text-decoration:none}
.msteps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.mstep{padding:24px;border:1px solid var(--line);border-radius:18px;background:#fff}
.mstep span{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:var(--sand-deep);color:var(--accent-deep);font-weight:800;margin-bottom:14px}
.mstep h3{margin:0 0 6px;font-size:1.05rem}.mstep p{margin:0;color:var(--text-muted);font-size:.95rem}
.mgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.mcard{display:flex;flex-direction:column;padding:22px;border:1px solid var(--line);border-radius:18px;background:#fff;text-decoration:none;color:var(--text);transition:transform .2s,border-color .2s,box-shadow .2s}
.mcard:hover{transform:translateY(-4px);border-color:rgba(var(--accent-rgb),.45);box-shadow:var(--shadow);color:var(--text)}
.mcard small{color:var(--text-muted);font-size:.78rem;font-weight:600;margin-bottom:8px}
.mcard h3{margin:0 0 8px;font-size:1.08rem;line-height:1.3;color:var(--ink)}
.mcard p{margin:0 0 14px;color:var(--text-muted);font-size:.92rem;flex:1}
.mcard .go{font-weight:700;font-size:.85rem;color:var(--accent-deep)}
.mcard.tool{background:var(--sand)}
@media(max-width:860px){.msteps,.mgrid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.mhero{padding:56px 0 40px}.msteps,.mgrid{grid-template-columns:1fr}.mhero-actions .btn{flex:1}.msec{padding:30px 0}}
/* footer + cta + cards calmer */
.cta-band{background:var(--ink)}.cta-band::after{background:var(--accent);opacity:.35}
.card,.post-card,.tools-grid-card{box-shadow:var(--shadow)}
.site-footer{background:var(--ink)}.site-footer::before{background:var(--grad2)}
.section{padding:56px 0}
.bg-alt{background:var(--sand)}
.quiz-progress-bar,.match-bar i{background:var(--accent)}
.tool-result-score{background:none;-webkit-text-fill-color:var(--accent);color:var(--accent)}
.tool-box::before{display:none}

/* country hubs, quick answer, breadcrumbs */
.quick-answer{margin:0 0 26px;padding:18px 22px;border-radius:16px;background:rgba(var(--accent-rgb),.07);border:1px solid rgba(var(--accent-rgb),.25)}
.quick-answer b{display:block;color:var(--accent-deep);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;margin-bottom:6px}
.quick-answer p{margin:0;color:var(--ink);font-size:1.02rem;line-height:1.65}
.crumbs{font-size:.84rem;color:var(--text-muted);margin:0 0 14px}.crumbs a{text-decoration:none}.crumbs span{margin:0 4px;opacity:.6}
.related-links{padding-left:1.2em}.related-links li{margin:8px 0}
.article-body h3{font-size:1.1rem;margin:1.4em 0 .3em}

/* ---------- AI consultant widget ---------- */
.nav-ai i{font-style:normal;font-size:.62rem;font-weight:800;background:var(--grad);color:#fff;padding:2px 6px;border-radius:999px;margin-left:4px;vertical-align:1px}
.hc-fab{position:fixed;right:18px;bottom:18px;z-index:190;display:flex;align-items:center;gap:10px;border:0;cursor:pointer;color:#fff;background:var(--grad);padding:0 20px 0 14px;height:56px;border-radius:999px;font:700 .95rem var(--sans);box-shadow:0 14px 34px -10px rgba(var(--accent-rgb),.75);transition:transform .2s,box-shadow .2s}
.hc-fab:hover{transform:translateY(-3px)}
.hc-fab-ico{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.2)}
.hc-dot{position:absolute;top:8px;left:36px;width:10px;height:10px;border-radius:50%;background:#22C55E;border:2px solid #fff}
.hc-fab.tip::after{content:"Questions about your hair? I can help";position:absolute;right:0;bottom:68px;white-space:nowrap;background:#fff;color:var(--ink);padding:10px 14px;border-radius:14px;font-weight:600;font-size:.84rem;box-shadow:0 12px 30px -10px rgba(15,23,60,.35);animation:hcIn .4s ease}
body:has(.ad-sticky) .hc-fab{bottom:86px}body:has(.ad-sticky) .to-top{bottom:86px;right:auto;left:16px}
.hc-open .hc-fab{opacity:0;pointer-events:none}
.hc-panel{position:fixed;right:18px;bottom:18px;z-index:200;width:392px;max-width:calc(100vw - 24px);height:620px;max-height:calc(100vh - 36px);display:none;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:24px;box-shadow:0 30px 80px -20px rgba(15,23,60,.45);overflow:hidden}
.hc-panel.open{display:flex;animation:hcIn .3s ease}
@keyframes hcIn{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.hc-head{display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--grad);color:#fff}
.hc-av{position:relative;width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.22);display:grid;place-items:center;font-weight:800;font-size:1.1rem;flex:none}
.hc-av i{position:absolute;right:0;bottom:0;width:11px;height:11px;border-radius:50%;background:#22C55E;border:2px solid #fff}
.hc-who{flex:1;min-width:0}.hc-who b{display:block;font-size:1rem}.hc-who span{font-size:.76rem;opacity:.9}
.hc-x,.hc-new{border:0;background:rgba(255,255,255,.2);color:#fff;border-radius:12px;cursor:pointer;font:700 .8rem var(--sans)}
.hc-x{width:34px;height:34px;font-size:1.4rem;line-height:1}.hc-new{padding:8px 12px}
.hc-body{flex:1;overflow-y:auto;padding:16px;background:var(--sand);display:flex;flex-direction:column;gap:10px;scroll-behavior:smooth}
.hc-m{max-width:88%;padding:11px 14px;border-radius:18px;font-size:.93rem;line-height:1.55;word-wrap:break-word;animation:hcIn .25s ease}
.hc-m p{margin:0 0 .5em}.hc-m p:last-child{margin:0}.hc-m ul,.hc-m ol{margin:.3em 0 .5em;padding-left:1.2em}.hc-m li{margin:.15em 0}
.hc-a{align-self:flex-start;background:#fff;border:1px solid var(--line);border-bottom-left-radius:6px;color:var(--text)}
.hc-u{align-self:flex-end;background:var(--accent);color:#fff;border-bottom-right-radius:6px}
.hc-a a{color:var(--accent-deep);font-weight:600}
.hc-sug{margin-top:10px;padding-top:8px;border-top:1px dashed var(--line);display:grid;gap:6px}.hc-sug small{color:var(--text-muted);font-weight:700;font-size:.72rem;text-transform:uppercase;letter-spacing:.05em}
.hc-sug a{display:block;padding:8px 10px;border-radius:10px;background:var(--sand);text-decoration:none;font-size:.84rem}
.hc-typing{display:flex;gap:5px;padding:14px 16px}.hc-typing span{width:8px;height:8px;border-radius:50%;background:var(--accent);opacity:.35;animation:hcDot 1.1s infinite}.hc-typing span:nth-child(2){animation-delay:.18s}.hc-typing span:nth-child(3){animation-delay:.36s}
@keyframes hcDot{50%{opacity:1;transform:translateY(-4px)}}
.hc-chips{display:flex;flex-wrap:wrap;gap:8px;padding:0 16px;background:var(--sand)}.hc-chips:not(:empty){padding-bottom:12px}
.hc-chips button{border:1px solid rgba(var(--accent-rgb),.35);background:#fff;color:var(--accent-deep);border-radius:999px;padding:8px 13px;font:600 .8rem var(--sans);cursor:pointer;transition:.15s}.hc-chips button:hover{background:var(--accent);color:#fff}
.hc-form{display:flex;align-items:flex-end;gap:8px;padding:12px;border-top:1px solid var(--line);background:#fff}
.hc-form textarea{flex:1;resize:none;border:1.5px solid var(--line);border-radius:16px;padding:11px 14px;font:500 .95rem var(--sans);max-height:120px;outline:0;transition:border-color .2s}.hc-form textarea:focus{border-color:var(--accent)}
.hc-form button{flex:none;width:44px;height:44px;border:0;border-radius:50%;background:var(--accent);color:#fff;cursor:pointer;display:grid;place-items:center;transition:transform .15s,background .2s}.hc-form button:hover{background:var(--accent-deep);transform:scale(1.06)}
.hc-hp{position:absolute!important;left:-9999px;opacity:0;height:0;width:0}
.hc-foot{padding:7px 14px 10px;background:#fff;font-size:.7rem;color:var(--text-muted);text-align:center}
.hc-page{position:relative;display:flex;flex-direction:column;height:640px;max-height:80vh;border:1px solid var(--line);border-radius:24px;overflow:hidden;background:#fff;box-shadow:0 30px 70px -30px rgba(15,23,60,.35)}
@media(max-width:560px){.hc-panel{right:0;bottom:0;left:0;width:100%;max-width:100%;height:92vh;max-height:92vh;border-radius:24px 24px 0 0}.hc-fab-txt{display:none}.hc-fab{padding:0 14px}.hc-dot{left:34px}}
@media(prefers-reduced-motion:reduce){.hc-m,.hc-panel.open,.hc-fab.tip::after{animation:none}}
.ask-head{text-align:center;max-width:780px;margin:0 auto 26px}.ask-head h1{margin:18px 0 12px}
.ask-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:24px;align-items:start}
.ask-side{display:grid;gap:16px}.ask-side .card{padding:20px}
.ask-note{font-size:.78rem;color:var(--text-muted);text-align:center;margin:10px 0 0}
.tick,.warn{list-style:none;padding:0;margin:0;display:grid;gap:8px;font-size:.92rem}
.tick li::before{content:"\2713";color:#16A34A;font-weight:800;margin-right:8px}.warn li::before{content:"!";display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#FEE2E2;color:#B91C1C;font-weight:800;font-size:.72rem;margin-right:8px}
@media(max-width:900px){.ask-grid{grid-template-columns:1fr}}
.ad-preview{border:2px dashed rgba(var(--accent-rgb),.5)!important;background:rgba(var(--accent-rgb),.05);border-radius:14px;padding:14px!important;color:var(--accent-deep);font-weight:700;font-size:.85rem;text-align:center}
.ad-preview a{color:inherit;text-decoration:none;display:block}.ad-preview small{display:block;font-weight:500;opacity:.8;margin-top:2px}
.ad-sticky.ad-preview{border-radius:0;border-width:2px 0 0}
.admin-bar{position:fixed;left:14px;bottom:14px;z-index:185;display:flex;align-items:center;gap:4px;flex-wrap:wrap;padding:6px 8px;border-radius:14px;background:#0B1226;color:#fff;font-size:.78rem;box-shadow:0 12px 30px -10px rgba(0,0,0,.5);max-width:calc(100vw - 100px)}
.admin-bar b{padding:4px 8px;border-radius:8px;background:var(--grad)}.admin-bar a{color:#C9D3F0;text-decoration:none;padding:4px 8px;border-radius:8px}.admin-bar a:hover{background:rgba(255,255,255,.12);color:#fff}
body:has(.ad-sticky) .admin-bar{bottom:86px}
@media(max-width:560px){.admin-bar{display:none}}

/* ==========================================================================
   v11 REFINED MINIMAL — calm neutrals, solid accent, almost no gradients,
   no floating overlaps. Colours below are the final neutrals of the site.
   ========================================================================== */
:root{--ink:#0F172A;--text:#1E293B;--text-muted:#64748B;--line:#E2E8F0;--sand:#F8FAFC;--sand-deep:#F1F5F9;
  --shadow:0 1px 2px rgba(15,23,42,.04),0 6px 20px -10px rgba(15,23,42,.10);--radius:14px}
body{color:var(--text);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{font-weight:700;color:var(--ink)}
h1{letter-spacing:-.035em}
.grad-text{background:none;-webkit-text-fill-color:currentColor;color:var(--accent)}
.btn-primary,.btn-primary:hover{background:var(--accent);box-shadow:none}
.btn-primary:hover{background:var(--accent-deep)}
.main-nav a.nav-cta{background:var(--accent)}.main-nav a.nav-cta:hover{background:var(--accent-deep)}
.nav-ai i{background:var(--accent)}
.icon-bubble{background:rgba(var(--accent-rgb),.10);color:var(--accent);box-shadow:none}
.mhero{background:radial-gradient(circle at 1px 1px,#E2E8F0 1px,transparent 0) 0 0/28px 28px}
.mhero-tag,.hero-eyebrow-lite{background:rgba(var(--accent-rgb),.08);border-color:rgba(var(--accent-rgb),.18);color:var(--accent-deep)}
.card,.mcard,.mstep,.post-card,.tools-grid-card,.toc,.prev-next a,.popular-list a{border-radius:var(--radius);border-color:var(--line)}
.mcard:hover,.card:hover,.tools-grid-card:hover,.post-card:hover{box-shadow:var(--shadow);border-color:rgba(var(--accent-rgb),.4)}
.chip.on,.tool-chip.selected{background:var(--accent);color:#fff}
.rank,.next-steps li::before,.feat-badge,.result-badge{background:var(--accent);color:#fff}
.quick-answer{border-radius:var(--radius)}
.cta-band{background:var(--ink)}.cta-band::after{opacity:.25}
.site-footer::before{background:var(--accent)}
.to-top{background:var(--ink);box-shadow:var(--shadow)}
/* chat: solid, calm */
.hc-fab{background:var(--accent);box-shadow:0 10px 28px -10px rgba(var(--accent-rgb),.7)}
.hc-head{background:var(--accent)}
.hc-panel{border-radius:20px}
/* floating buttons stack on the right, never overlap */
.to-top{right:22px;bottom:86px}
body:has(.ad-sticky) .hc-fab{bottom:86px}
body:has(.ad-sticky) .to-top{right:22px;left:auto;bottom:154px}
.hc-open .to-top{opacity:0;pointer-events:none}
@media(max-width:560px){.to-top{right:14px;bottom:84px}body:has(.ad-sticky) .to-top{bottom:152px}}
/* admin shortcut strip: normal flow at the very top, never covers content */
.admin-bar{position:static;display:flex;align-items:center;gap:2px;flex-wrap:wrap;padding:5px 14px;border-radius:0;max-width:none;background:var(--ink);color:#CBD5E1;font-size:.78rem;box-shadow:none}
.admin-bar b{background:var(--accent);color:#fff;padding:3px 9px;border-radius:7px;margin-right:6px}
.admin-bar a{color:#CBD5E1;padding:3px 9px;border-radius:7px}.admin-bar a:hover{background:rgba(255,255,255,.1);color:#fff}
.admin-bar .ab-note{margin-left:auto;opacity:.65;font-size:.72rem}
body:has(.ad-sticky) .admin-bar{bottom:auto}
@media(max-width:700px){.admin-bar{display:flex}.admin-bar .ab-note{display:none}}
.linkbtn{background:none;border:0;padding:0;cursor:pointer;font:inherit;font-size:.76rem;color:#B91C1C}