/* KidyGrow tools / widgets — shared styles
   Re-uses brand tokens from /blog/post.html, kept self-contained so each
   widget page loads ONE CSS file. */

:root {
  --primary:#2EA8A0; --primary-dark:#238F88; --primary-light:#7FD4CE;
  --primary-wash:#E6F4F2; --primary-soft:#C9E7E4;
  --coral:#E8706A; --coral-wash:#FBE5E3;
  --mint:#45B87A; --mint-wash:#E1F2E8;
  --sky:#5B9ED6; --sky-wash:#E1EDF7;
  --lavender:#9A6DC8; --lavender-wash:#EDE4F4; --lavender-soft:#D7C2E8;
  --sunflower:#E8B840; --sunflower-wash:#FAF1D5;
  --rose:#D4728A; --rose-wash:#FBE5EC;
  --bg:#FAF6F1; --surface:#FFFFFF; --cream:#F5EFE8; --border:#EDE6DB;
  --fg1:#2D2018; --fg2:#5C4A3A; --fg3:#8A7F72;
  --f-disp:'Plus Jakarta Sans', system-ui, sans-serif;
  --f-body:'Inter', system-ui, sans-serif;
  --f-article:'Inter', system-ui, sans-serif;
  --f-num:'DM Sans', system-ui, sans-serif;
  --sky-soft:#C6DCEF;
  --accent:var(--sky);
  --accent-wash:var(--sky-wash);
  --accent-soft:var(--sky-soft);
}

/* Topic accent is unified to sky (default in :root). Per-topic signal is on .topic-badge / .hub-card-badge only. */
[data-topic="pregnancy"] .topic-badge { background:var(--rose-wash); color:var(--rose); }
[data-topic="sleep"]     .topic-badge { background:var(--lavender-wash); color:var(--lavender); }
[data-topic="health"]    .topic-badge { background:var(--mint-wash); color:var(--mint); }
[data-topic="feeding"]   .topic-badge { background:var(--coral-wash); color:var(--coral); }
[data-topic="behavior"]  .topic-badge { background:var(--sunflower-wash); color:#7A5A10; }

/* Hub page accent = brand primary (warmer than sky for the landing) */
body[data-tool-slug="hub"] {
  --accent:var(--primary); --accent-wash:var(--primary-wash); --accent-soft:var(--primary-soft);
}

*{box-sizing:border-box; margin:0; padding:0}
html,body{background:var(--bg); color:var(--fg1); font-family:var(--f-body); line-height:1.6; -webkit-font-smoothing:antialiased}
a{color:inherit; text-decoration:none}
img,svg{max-width:100%; display:block}
.mi{font-family:'Material Symbols Rounded'; font-weight:normal; font-style:normal; font-feature-settings:'liga'; font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24; display:inline-block; line-height:1; user-select:none; vertical-align:middle}

/* ─── Top nav (same shape as blog) ─── */
.topnav{position:sticky; top:0; z-index:50; background:rgba(250,246,241,.82); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--border)}
.topnav-inner{max-width:1200px; margin:0 auto; padding:16px 32px; display:flex; align-items:center; gap:24px}
.brand{display:flex; align-items:center; gap:10px; font-family:var(--f-disp); font-weight:800; font-size:20px; letter-spacing:-.4px; color:var(--fg1)}
.brand-mark{width:34px; height:34px; border-radius:11px; background:linear-gradient(135deg, var(--primary-light), var(--primary)); display:grid; place-items:center; color:#fff; font-weight:900; font-size:16px; box-shadow:0 4px 12px -4px rgba(46,168,160,.45)}
.nav-links{flex:1; display:flex; gap:26px}
.nav-links a{font-size:14px; font-weight:500; color:var(--fg2)}
.nav-links a:hover{color:var(--fg1)}
.lang{display:inline-flex; background:#fff; border:1px solid var(--border); border-radius:10px; padding:3px; gap:2px}
.lang a{padding:6px 10px; font-size:11px; font-weight:700; color:var(--fg3); border-radius:7px; letter-spacing:.05em; text-transform:uppercase}
.lang a.active{background:var(--primary); color:#fff}
.cta-nav{font-size:14px; font-weight:700; color:#fff; background:var(--primary); padding:10px 18px; border-radius:999px; box-shadow:0 4px 12px -4px rgba(46,168,160,.5)}

/* ─── Page shell ─── */
.tool-wrap{max-width:760px; margin:0 auto; padding:32px 24px 80px}
.breadcrumb{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--fg3); margin-bottom:20px; flex-wrap:wrap}
.breadcrumb a{color:var(--primary); font-weight:600}
.breadcrumb .sep{opacity:.5}

/* ─── Hero ─── */
.tool-hero{margin-bottom:28px}
.topic-badge{display:inline-flex; align-items:center; gap:8px; padding:7px 14px; border-radius:999px; background:var(--accent-wash); color:var(--accent); font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; margin-bottom:16px}
.topic-badge .mi{font-size:16px}
h1.tool-title{font-family:var(--f-disp); font-weight:800; font-size:40px; line-height:1.1; letter-spacing:-.6px; color:var(--fg1); text-wrap:balance; margin-bottom:14px}
.tool-deck{font-family:var(--f-article); font-size:19px; line-height:1.5; color:var(--fg2); text-wrap:pretty; max-width:62ch}

/* ─── Widget card ─── */
.widget{margin:28px 0 36px; padding:28px; border-radius:24px; background:#fff; border:1.5px solid var(--border); box-shadow:0 12px 36px -22px rgba(45,32,24,.18)}
.widget-input{display:flex; flex-direction:column; gap:8px; margin-bottom:24px}
.widget-input-label{font-family:var(--f-disp); font-weight:700; font-size:15px; color:var(--fg1); display:flex; justify-content:space-between; align-items:baseline; gap:12px}
.widget-input-label .value{font-size:22px; color:var(--accent); font-weight:800; letter-spacing:-.4px}

/* Slider — touch friendly, accessible */
.widget-slider{-webkit-appearance:none; appearance:none; width:100%; height:8px; border-radius:999px; background:linear-gradient(90deg, var(--accent-soft), var(--accent-wash)); outline:none; cursor:pointer; margin:8px 0 4px; padding:0}
.widget-slider::-webkit-slider-thumb{-webkit-appearance:none; appearance:none; width:32px; height:32px; border-radius:50%; background:var(--accent); border:4px solid #fff; box-shadow:0 4px 10px -2px rgba(45,32,24,.28); cursor:grab; transition:transform .15s}
.widget-slider::-moz-range-thumb{width:32px; height:32px; border-radius:50%; background:var(--accent); border:4px solid #fff; box-shadow:0 4px 10px -2px rgba(45,32,24,.28); cursor:grab}
.widget-slider:active::-webkit-slider-thumb{transform:scale(1.1); cursor:grabbing}
.widget-slider:focus-visible{box-shadow:0 0 0 4px var(--accent-wash)}
.slider-ticks{display:flex; justify-content:space-between; font-size:11px; color:var(--fg3); font-weight:600; margin-top:2px; padding:0 4px}

/* Metric cards */
.metrics{display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; margin-top:8px}
.metric{padding:18px 16px; border-radius:16px; background:linear-gradient(135deg, var(--accent-wash), #fff); border:1.5px solid var(--accent-soft); text-align:center}
.metric-label{font-size:11px; font-weight:800; color:var(--accent); text-transform:uppercase; letter-spacing:.08em; margin-bottom:6px; display:flex; align-items:center; justify-content:center; gap:5px}
.metric-label .mi{font-size:14px}
.metric-value{font-family:var(--f-disp); font-weight:800; font-size:22px; color:var(--fg1); letter-spacing:-.5px; line-height:1.15}
.metric-unit{font-size:12px; color:var(--fg3); font-weight:600; margin-top:3px}

/* ─── Prose sections ─── */
.tool-section{margin:40px 0}
.tool-section h2{font-family:var(--f-disp); font-weight:800; font-size:26px; line-height:1.2; color:var(--fg1); letter-spacing:-.4px; margin:0 0 14px; position:relative; padding-left:14px}
.tool-section h2::before{content:''; position:absolute; left:0; top:8px; width:5px; height:22px; border-radius:3px; background:var(--accent)}
.tool-section h3{font-family:var(--f-disp); font-weight:700; font-size:18px; line-height:1.3; color:var(--fg1); margin:24px 0 8px}
.tool-section p{font-family:var(--f-article); font-size:17px; line-height:1.7; color:var(--fg2); margin-bottom:14px; max-width:62ch}
.tool-section ul, .tool-section ol{padding-left:22px; margin:8px 0 18px; max-width:62ch}
.tool-section li{font-family:var(--f-article); font-size:17px; line-height:1.65; color:var(--fg2); margin-bottom:8px}
.tool-section ul li::marker{color:var(--accent)}
.tool-section strong{color:var(--fg1); font-weight:700}

/* ─── Static reference table ─── */
.range-table{width:100%; border-collapse:collapse; margin:18px 0 8px; font-family:var(--f-body); font-size:14px; background:#fff; border-radius:16px; overflow:hidden; border:1.5px solid var(--border)}
.range-table caption{font-family:var(--f-disp); font-weight:700; font-size:14px; color:var(--fg3); padding:0 0 10px; text-align:left; caption-side:top}
.range-table th, .range-table td{padding:11px 14px; text-align:left; border-bottom:1px solid var(--border)}
.range-table thead th{background:var(--accent-wash); color:var(--accent); font-family:var(--f-disp); font-weight:800; font-size:12px; text-transform:uppercase; letter-spacing:.06em}
.range-table tbody tr:last-child td{border-bottom:none}
.range-table tbody tr:nth-child(even){background:rgba(250, 246, 241, .6)}
.range-table td:first-child{font-weight:700; color:var(--fg1)}

/* ─── CTA block ─── */
.kg-cta{margin:48px 0 32px; display:flex; align-items:center; gap:22px; padding:30px; border-radius:24px; background:linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); color:#fff; position:relative; overflow:hidden}
.kg-cta::before{content:''; position:absolute; width:220px; height:220px; border-radius:50%; background:rgba(255,255,255,.08); top:-50px; right:-50px}
.kg-cta > *{position:relative; z-index:1}
.kg-cta-mark{width:72px; height:72px; border-radius:20px; background:rgba(255,255,255,.18); display:grid; place-items:center; flex-shrink:0; overflow:hidden}
.kg-cta-mark img{width:64px; height:64px; object-fit:contain}
.kg-cta-text{flex:1; min-width:0}
.kg-cta-text h3{font-family:var(--f-disp); font-weight:800; font-size:22px; margin-bottom:6px; line-height:1.2; letter-spacing:-.3px; text-wrap:balance}
.kg-cta-text p{font-size:14px; opacity:.92; line-height:1.5; margin:0}
.kg-cta-button{background:#fff; color:var(--primary-dark); padding:13px 22px; border-radius:999px; font-weight:800; font-size:14px; display:inline-flex; align-items:center; gap:6px; white-space:nowrap; flex-shrink:0; transition:transform .15s}
.kg-cta-button:hover{transform:translateY(-1px)}
.kg-cta-button .mi{font-size:18px}

/* ─── FAQ ─── */
.faq{margin-top:48px; padding-top:32px; border-top:2px dashed var(--border)}
.faq-h{font-family:var(--f-disp); font-weight:800; font-size:26px; margin-bottom:18px; color:var(--fg1); letter-spacing:-.5px; display:flex; align-items:center; gap:10px}
.faq-h .mi{color:var(--accent); font-size:26px}
.faq-item{border:1.5px solid var(--border); border-radius:16px; margin-bottom:10px; background:#fff; overflow:hidden}
.faq-item summary{display:flex; align-items:center; gap:12px; padding:18px 22px; cursor:pointer; font-family:var(--f-disp); font-weight:700; font-size:16px; color:var(--fg1); line-height:1.35; list-style:none}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:'expand_more'; font-family:'Material Symbols Rounded'; margin-left:auto; color:var(--fg3); transition:transform .2s; font-weight:normal}
.faq-item[open] summary::after{transform:rotate(180deg); color:var(--accent)}
.faq-item[open]{border-color:var(--accent-soft)}
.faq-a{padding:0 22px 18px; font-family:var(--f-body); font-size:15px; color:var(--fg2); line-height:1.65}
.faq-a p{margin-bottom:10px}
.faq-a p:last-child{margin-bottom:0}

/* ─── Sources ─── */
.sources{margin-top:40px; padding:22px 24px; background:var(--cream); border-radius:16px; border:1px solid var(--border)}
.sources h4{font-family:var(--f-disp); font-weight:800; font-size:13px; text-transform:uppercase; letter-spacing:.08em; color:var(--fg3); margin-bottom:10px}
.sources ul{list-style:none; padding:0; margin:0}
.sources li{font-size:13px; color:var(--fg2); line-height:1.55; padding:4px 0}
.sources a{color:var(--primary); border-bottom:1px solid var(--primary-soft)}

/* ─── Footer ─── */
footer.site-foot{background:var(--fg1); color:#fff; padding:40px 32px 24px; margin-top:64px}
.foot-inner{max-width:1100px; margin:0 auto; display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:36px}
.foot-brand{display:flex; align-items:center; gap:10px; font-family:var(--f-disp); font-weight:800; font-size:20px; margin-bottom:12px}
.foot-tag{font-size:14px; opacity:.7; line-height:1.55; max-width:300px}
.foot-col h5{font-family:var(--f-disp); font-weight:700; font-size:13px; margin-bottom:12px; text-transform:uppercase; letter-spacing:.08em; opacity:.6}
.foot-col a{display:block; font-size:14px; opacity:.85; padding:4px 0}
.foot-col a:hover{opacity:1}
.foot-bottom{max-width:1100px; margin:28px auto 0; padding-top:20px; border-top:1px solid rgba(255,255,255,.1); display:flex; justify-content:space-between; gap:18px; font-size:12px; opacity:.6; flex-wrap:wrap; line-height:1.55}

/* ─── Responsive ─── */
.cta-nav .label-short{display:none}

@media (max-width: 760px) {
  .topnav-inner{padding:14px 18px; gap:10px}
  .nav-links{display:none}
  .cta-nav{padding:8px 14px; font-size:12.5px; display:inline-flex; align-items:center; gap:6px}
  .cta-nav .label-long{display:none}
  .cta-nav .label-short{display:inline}
  .lang{padding:2px}
  .lang a{padding:5px 8px; font-size:10.5px}
  h1.tool-title{font-size:30px; letter-spacing:-.6px}
  .tool-deck{font-size:17px}
  .widget{padding:22px 18px; border-radius:20px}
  .metrics{grid-template-columns:1fr; gap:10px}
  .metric{padding:14px 16px; text-align:left; display:grid; grid-template-columns:auto 1fr; align-items:center; gap:6px 14px}
  .metric-label{margin:0; justify-content:flex-start}
  .metric-unit{margin-top:0}
  .tool-section h2{font-size:22px}
  .kg-cta{flex-direction:column; align-items:flex-start; gap:16px; padding:24px}
  .kg-cta-button{margin-left:0}
  .foot-inner{grid-template-columns:1fr 1fr; gap:24px}
  .range-table{font-size:13px}
  .range-table th, .range-table td{padding:9px 10px}
}

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after{transition:none !important; animation:none !important}
}

/* ─── Form widget (growth percentiles) ─── */
.form-card{margin:28px 0 24px; padding:24px; border-radius:24px; background:#fff; border:1.5px solid var(--border); box-shadow:0 12px 36px -22px rgba(45,32,24,.18)}
.form-grid{display:grid; gap:16px}
.form-row{display:grid; grid-template-columns:repeat(2, 1fr); gap:12px}
.field{display:flex; flex-direction:column; gap:6px}
.field-label{font-family:var(--f-disp); font-weight:700; font-size:13px; color:var(--fg1); display:flex; align-items:center; gap:6px}
.field-hint{font-size:12px; color:var(--fg3); font-weight:500}
.field-input,.field-select{font-family:var(--f-body); font-size:16px; padding:11px 14px; border:1.5px solid var(--border); border-radius:12px; background:#fff; color:var(--fg1); transition:border-color .15s, box-shadow .15s; width:100%}
.field-input:focus,.field-select:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-wash)}
.field-input::placeholder{color:var(--fg3); font-weight:400}
.field-input[type="date"]{font-family:var(--f-body)}
.field-error{display:none; font-size:12px; color:var(--coral); font-weight:600; margin-top:2px}
.field.has-error .field-input{border-color:var(--coral); background:var(--coral-wash)}
.field.has-error .field-error{display:block}

/* Sex toggle (pill radio) */
.sex-toggle{display:grid; grid-template-columns:1fr 1fr; gap:6px; background:var(--cream); border:1.5px solid var(--border); border-radius:14px; padding:4px}
.sex-toggle input{position:absolute; opacity:0; pointer-events:none}
.sex-toggle label{display:flex; align-items:center; justify-content:center; gap:6px; padding:10px 14px; border-radius:10px; cursor:pointer; font-family:var(--f-disp); font-weight:700; font-size:14px; color:var(--fg2); transition:all .15s; user-select:none}
.sex-toggle label .mi{font-size:18px}
.sex-toggle input:checked + label{background:var(--accent); color:#fff; box-shadow:0 2px 6px -2px rgba(45,32,24,.2)}
.sex-toggle input:focus-visible + label{box-shadow:0 0 0 3px var(--accent-wash)}

/* Premature collapsible */
.collapse-row{display:flex; align-items:center; gap:10px; padding:4px 0}
.collapse-row input[type="checkbox"]{width:18px; height:18px; accent-color:var(--accent); cursor:pointer}
.collapse-row label{font-size:13px; color:var(--fg2); cursor:pointer; user-select:none}
.collapse-body{display:none; padding-top:8px}
.collapse-body.open{display:block}

/* Buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:13px 22px; border-radius:999px; font-family:var(--f-disp); font-weight:800; font-size:15px; cursor:pointer; border:none; transition:transform .12s, box-shadow .15s}
.btn-primary{background:var(--accent); color:#fff; box-shadow:0 6px 18px -8px rgba(45,32,24,.35); width:100%}
.btn-primary:hover{transform:translateY(-1px)}
.btn-primary:active{transform:translateY(0)}
.btn-primary:disabled{opacity:.55; cursor:not-allowed; transform:none}
.btn .mi{font-size:18px}

.form-error{display:none; margin-top:10px; padding:10px 14px; background:var(--coral-wash); border:1px solid var(--coral); border-radius:10px; color:var(--coral); font-size:13px; font-weight:600}
.form-error.show{display:block}

/* ─── Results (gauge cards) ─── */
.results{margin:24px 0 32px}
.results-empty{padding:24px; text-align:center; color:var(--fg3); font-size:14px; font-style:italic}
.results-grid{display:grid; gap:14px}
.result-card{padding:20px 22px; border-radius:18px; border:1.5px solid var(--border); background:#fff}
.result-card.severity-concern{border-color:var(--coral); background:linear-gradient(135deg, var(--coral-wash), #fff)}
.result-card.severity-caution{border-color:var(--sunflower); background:linear-gradient(135deg, var(--sunflower-wash), #fff)}
.result-card.severity-ok{border-color:var(--mint); background:linear-gradient(135deg, var(--mint-wash), #fff)}
.result-header{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:12px}
.result-title{font-family:var(--f-disp); font-weight:800; font-size:15px; color:var(--fg1); display:flex; align-items:center; gap:8px}
.result-title .mi{font-size:18px; color:var(--accent)}
.result-percentile{font-family:var(--f-disp); font-weight:900; font-size:28px; line-height:1; letter-spacing:-.8px; color:var(--fg1)}
.result-percentile .suffix{font-size:14px; font-weight:700; color:var(--fg3); margin-left:2px}
.result-category{font-size:13px; font-weight:700; padding:4px 10px; border-radius:999px; display:inline-block; margin-top:4px}
.severity-concern .result-category{background:var(--coral); color:#fff}
.severity-caution .result-category{background:var(--sunflower); color:var(--fg1)}
.severity-ok .result-category{background:var(--mint); color:#fff}
.result-note{font-size:13px; color:var(--fg2); margin-top:10px; line-height:1.55}
.result-corrected-note{font-size:12px; color:var(--fg3); margin-top:6px; font-style:italic}

/* Gauge bar */
.gauge{position:relative; height:14px; border-radius:999px; margin:14px 0 6px;
  background:linear-gradient(90deg, #E8706A 0%, #E8706A 3%, #E8B840 3%, #E8B840 10%, #45B87A 10%, #45B87A 90%, #E8B840 90%, #E8B840 97%, #E8706A 97%, #E8706A 100%)}
.gauge-marker{position:absolute; top:-4px; width:22px; height:22px; border-radius:50%; background:#fff; border:3px solid var(--fg1); transform:translateX(-50%); box-shadow:0 2px 8px -2px rgba(45,32,24,.35); transition:left .35s ease-out}
.severity-concern .gauge-marker{border-color:var(--coral)}
.severity-caution .gauge-marker{border-color:var(--sunflower); border-width:3px}
.severity-ok .gauge-marker{border-color:var(--mint)}
.gauge-ticks{display:flex; justify-content:space-between; font-size:10px; color:var(--fg3); font-weight:700; padding:0 1px}
.gauge-ticks span:nth-child(2){margin-left:1%}
.gauge-ticks span:nth-child(3){margin-left:38%}
.gauge-ticks span:nth-child(4){margin-left:38%}
.gauge-ticks .tick-3{position:relative; left:1%}
.gauge-ticks .tick-50{position:relative; left:48%}
.gauge-ticks .tick-97{position:relative; left:94%}

/* Final disclaimer block (high-liability widgets) */
.medical-warn{display:flex; gap:14px; padding:16px 18px; border-radius:16px; background:#fff; border:1.5px solid var(--coral); border-left:5px solid var(--coral); margin:0 0 24px; font-size:14px; color:var(--fg2); line-height:1.55}
.medical-warn .mi{flex-shrink:0; color:var(--coral); font-size:24px; margin-top:1px}
.medical-warn strong{color:var(--fg1); display:block; margin-bottom:4px}

/* ─── Last-reviewed line (freshness signal) ─── */
.last-reviewed{display:inline-flex; align-items:center; gap:8px; font-size:12px; font-weight:600; color:var(--fg3); margin:0 0 18px; padding:6px 12px; background:var(--cream); border-radius:999px; border:1px solid var(--border)}
.last-reviewed .mi{font-size:14px; color:var(--accent)}
.last-reviewed .sep{opacity:.5}

/* ─── Table of contents ─── */
.toc{margin:0 0 28px; padding:18px 22px; border-radius:16px; background:var(--surface); border:1.5px solid var(--border)}
.toc-title{font-family:var(--f-disp); font-weight:800; font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--fg3); margin-bottom:10px; display:flex; align-items:center; gap:6px}
.toc-title .mi{font-size:16px}
.toc ol{list-style:none; padding:0; margin:0; counter-reset:toc; display:grid; grid-template-columns:repeat(2, 1fr); gap:6px 18px}
.toc li{counter-increment:toc; font-size:14px; line-height:1.4}
.toc li::before{content:counter(toc) ". "; color:var(--accent); font-weight:800; margin-right:4px}
.toc a{color:var(--fg2); border-bottom:1px dashed transparent; transition:all .15s}
.toc a:hover{color:var(--accent); border-bottom-color:var(--accent)}

/* ─── How-to-measure mini cards ─── */
.measure-guide{display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; margin:18px 0}
.measure-card{padding:18px 18px 20px; border-radius:18px; background:#fff; border:1.5px solid var(--border); position:relative; transition:border-color .15s}
.measure-card:hover{border-color:var(--accent-soft)}
.measure-icon{width:44px; height:44px; border-radius:12px; background:var(--accent-wash); color:var(--accent); display:grid; place-items:center; margin-bottom:12px}
.measure-icon .mi{font-size:24px}
.measure-card h3{font-family:var(--f-disp); font-weight:800; font-size:15px; color:var(--fg1); margin:0 0 8px; letter-spacing:-.2px}
.measure-card p{font-family:var(--f-body); font-size:13px; line-height:1.55; color:var(--fg2); margin:0}

/* ─── "Trend matters" highlight callout ─── */
.trend-callout{display:flex; gap:14px; padding:18px 22px; border-radius:18px; background:linear-gradient(135deg, var(--primary-wash) 0%, #fff 100%); border:1.5px solid var(--primary-soft); margin:24px 0}
.trend-callout-icon{flex-shrink:0; width:42px; height:42px; border-radius:12px; background:var(--primary); display:grid; place-items:center; color:#fff}
.trend-callout-icon .mi{font-size:24px}
.trend-callout-text{font-family:var(--f-body); font-size:14px; line-height:1.6; color:var(--fg1)}
.trend-callout-text strong{color:var(--primary-dark); font-weight:800}

/* ─── Related reading (internal links) ─── */
.related-reading{margin:28px 0 12px; padding:20px 22px; border-radius:16px; background:var(--cream); border:1px solid var(--border)}
.related-reading h3{font-family:var(--f-disp); font-weight:800; font-size:14px; text-transform:uppercase; letter-spacing:.08em; color:var(--fg3); margin:0 0 12px; display:flex; align-items:center; gap:6px}
.related-reading h3 .mi{font-size:16px; color:var(--accent)}
.related-reading ul{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(2, 1fr); gap:8px 18px}
.related-reading li{font-size:14px; line-height:1.4}
.related-reading a{color:var(--fg1); font-weight:600; border-bottom:1.5px solid var(--accent-soft); transition:border-color .15s}
.related-reading a:hover{border-bottom-color:var(--accent)}
.related-reading a .mi{font-size:14px; color:var(--accent); margin-right:4px; vertical-align:-2px}

@media (max-width: 600px) {
  .form-row{grid-template-columns:1fr}
  .result-header{flex-direction:column; align-items:flex-start; gap:6px}
  .result-percentile{font-size:32px}
  .toc ol{grid-template-columns:1fr}
  .measure-guide{grid-template-columns:1fr}
  .related-reading ul{grid-template-columns:1fr}
}

/* ─── Hub hero with Growy mascot ─── */
.tool-hero.hub-hero{display:flex; align-items:center; gap:24px; flex-wrap:wrap}
.tool-hero.hub-hero .hub-hero-mascot{width:96px; height:96px; flex-shrink:0}
.tool-hero.hub-hero > div{flex:1; min-width:240px}
@media (max-width:560px){
  .tool-hero.hub-hero .hub-hero-mascot{width:64px; height:64px}
}

/* ─── Tools hub: card grid for widget listing ─── */
.hub-grid{display:grid; grid-template-columns:repeat(2, 1fr); gap:18px; margin:24px 0 28px}
.hub-card{display:flex; flex-direction:column; gap:12px; padding:24px; border-radius:22px; background:#fff; border:1.5px solid var(--border); transition:transform .15s, box-shadow .15s, border-color .15s; color:inherit; position:relative; overflow:hidden}
.hub-card:hover{transform:translateY(-3px); box-shadow:0 18px 36px -20px rgba(45,32,24,.2); border-color:var(--accent-soft)}
.hub-card-bg{position:absolute; top:-20px; right:-20px; width:140px; height:140px; border-radius:50%; opacity:.16; pointer-events:none}
.hub-card[data-topic="sleep"]    .hub-card-bg{background:var(--lavender)}
.hub-card[data-topic="health"]   .hub-card-bg{background:var(--mint)}
.hub-card[data-topic="pregnancy"] .hub-card-bg{background:var(--rose)}
.hub-card[data-topic="feeding"]  .hub-card-bg{background:var(--coral)}
.hub-card-icon{width:52px; height:52px; border-radius:14px; display:grid; place-items:center; color:#fff; flex-shrink:0; position:relative; z-index:1}
.hub-card[data-topic="sleep"]    .hub-card-icon{background:linear-gradient(135deg, var(--lavender), var(--lavender-soft))}
.hub-card[data-topic="health"]   .hub-card-icon{background:linear-gradient(135deg, var(--mint), #6CC597)}
.hub-card[data-topic="pregnancy"] .hub-card-icon{background:linear-gradient(135deg, var(--rose), var(--coral))}
.hub-card[data-topic="feeding"]  .hub-card-icon{background:linear-gradient(135deg, var(--coral), var(--rose))}
.hub-card-icon .mi{font-size:28px}
.hub-card-badge{display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:999px; background:var(--cream); color:var(--fg3); font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; align-self:flex-start; position:relative; z-index:1}
.hub-card h3{font-family:var(--f-disp); font-weight:800; font-size:18px; line-height:1.25; color:var(--fg1); letter-spacing:-.3px; margin:0; position:relative; z-index:1; text-wrap:balance}
.hub-card p{font-family:var(--f-body); font-size:14px; line-height:1.55; color:var(--fg2); margin:0; position:relative; z-index:1}
.hub-card-cta{display:inline-flex; align-items:center; gap:4px; font-family:var(--f-disp); font-weight:800; font-size:13px; color:var(--primary); margin-top:auto; padding-top:6px; position:relative; z-index:1}
.hub-card-cta .mi{font-size:18px; transition:transform .15s}
.hub-card:hover .hub-card-cta .mi{transform:translateX(3px)}

.hub-coming{padding:22px; border-radius:22px; background:var(--cream); border:1.5px dashed var(--border); display:flex; flex-direction:column; gap:12px; min-height:180px}
.hub-coming h4{font-family:var(--f-disp); font-weight:800; font-size:13px; color:var(--fg3); text-transform:uppercase; letter-spacing:.08em; margin:0}
.hub-coming .coming-list{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; width:100%}
.hub-coming .coming-list li{display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:12px; background:#fff; border:1px solid var(--border); font-family:var(--f-body); font-size:13px; font-weight:600; color:var(--fg2)}
.hub-coming .coming-list li > span:first-child{font-size:18px; line-height:1; flex-shrink:0}
.hub-coming .coming-list small{margin-left:auto; font-size:10.5px; font-weight:700; color:var(--fg3); letter-spacing:.5px; text-transform:uppercase; white-space:nowrap}

@media (max-width:600px){
  .hub-grid{grid-template-columns:1fr}
}

/* ─── Tooth timeline (CSS-based horizontal bars 0–36 mo) ─── */
.tooth-timeline{margin:18px 0 10px}
.tooth-timeline-axis{position:relative; height:18px; margin-bottom:6px}
.tooth-timeline-axis::before{content:''; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--border); border-radius:2px}
.tooth-timeline-tick{position:absolute; bottom:4px; transform:translateX(-50%); font-size:10px; font-weight:700; color:var(--fg3)}
.tooth-timeline-tick::after{content:''; position:absolute; left:50%; bottom:-6px; width:1px; height:5px; background:var(--fg3)}
.tooth-timeline-rows{display:grid; gap:4px}
.tooth-timeline-row{position:relative; display:grid; grid-template-columns:160px 1fr; align-items:center; gap:10px; font-size:12px}
.tooth-timeline-row .tt-name{font-family:var(--f-body); font-weight:600; color:var(--fg2); text-align:right; padding-right:4px; line-height:1.2}
.tooth-timeline-bar-track{position:relative; height:18px; background:var(--cream); border-radius:6px; border:1px solid var(--border)}
.tooth-timeline-bar-fill{position:absolute; top:0; bottom:0; background:linear-gradient(90deg, var(--sky-wash), var(--sky)); border-radius:5px; display:flex; align-items:center; padding:0 6px; font-family:var(--f-disp); font-size:10px; font-weight:800; color:#fff; white-space:nowrap; text-shadow:0 0 4px rgba(0,0,0,.18)}
@media (max-width:600px){
  .tooth-timeline-row{grid-template-columns:120px 1fr; font-size:11px}
  .tooth-timeline-row .tt-name{font-size:11px}
}

/* ─── Parent observation block (real parent language) ─── */
.parent-says{padding:22px 24px; border-radius:18px; background:linear-gradient(135deg, var(--sunflower-wash) 0%, #fff 100%); border:1.5px solid var(--sunflower); margin:24px 0}
.parent-says h3{font-family:var(--f-disp); font-weight:800; font-size:18px; color:var(--fg1); margin:0 0 4px; display:flex; align-items:center; gap:8px; letter-spacing:-.2px}
.parent-says h3 .mi{color:var(--sunflower); font-size:22px}
.parent-says-intro{font-size:13px; color:var(--fg2); margin:0 0 14px; line-height:1.55}
.parent-says ul{list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(2, 1fr); gap:8px 14px}
.parent-says li{font-size:14px; color:var(--fg1); padding:9px 14px; background:rgba(255,255,255,.7); border-radius:10px; border:1px solid rgba(232,184,64,.25); line-height:1.4; font-weight:500}
.parent-says li strong{font-weight:700}
.parent-says-quote{margin-top:14px; padding-top:12px; border-top:1px dashed rgba(232,184,64,.4); font-style:italic; color:var(--fg3); font-size:13px; line-height:1.5}

@media (max-width:560px){
  .parent-says ul{grid-template-columns:1fr}
}

/* ─── Inline contextual link (subtle in-body link) ─── */
.tool-section a, .faq-a a, .parent-says a{color:var(--primary); border-bottom:1px solid var(--primary-soft); transition:border-color .15s}
.tool-section a:hover, .faq-a a:hover, .parent-says a:hover{border-bottom-color:var(--primary)}

/* ─── Poop color guide ─── */
.feeding-toggle{display:grid; grid-template-columns:repeat(3, 1fr); gap:6px; background:var(--cream); border:1.5px solid var(--border); border-radius:14px; padding:4px; margin:0 0 20px}
.feeding-toggle input{position:absolute; opacity:0; pointer-events:none}
.feeding-toggle label{display:flex; align-items:center; justify-content:center; gap:6px; padding:10px 12px; border-radius:10px; cursor:pointer; font-family:var(--f-disp); font-weight:700; font-size:13px; color:var(--fg2); transition:all .15s; user-select:none; text-align:center; line-height:1.2}
.feeding-toggle input:checked + label{background:var(--primary); color:#fff; box-shadow:0 2px 6px -2px rgba(45,32,24,.2)}
.feeding-toggle input:focus-visible + label{box-shadow:0 0 0 3px var(--primary-wash)}

.poop-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:14px; margin:6px 0 18px}
.poop-card{padding:18px; border-radius:18px; background:#fff; border:1.5px solid var(--border); transition:transform .15s, box-shadow .15s, border-color .15s, opacity .2s; position:relative; display:flex; flex-direction:column; gap:8px}
.poop-card:hover{transform:translateY(-2px); box-shadow:0 12px 28px -16px rgba(45,32,24,.18)}
.poop-card.is-normal{border-color:var(--mint)}
.poop-card.is-watch{border-color:var(--sunflower)}
.poop-card.is-urgent{border-color:var(--coral); background:linear-gradient(135deg, var(--coral-wash) 0%, #fff 50%)}
.poop-card.is-dim{opacity:.42}
.poop-swatch{width:100%; height:54px; border-radius:12px; border:1px solid rgba(0,0,0,.08); position:relative; overflow:hidden}
.poop-swatch.mucous-overlay::after{content:''; position:absolute; inset:0; background:radial-gradient(circle at 30% 40%, rgba(255,255,255,.7) 2px, transparent 3px), radial-gradient(circle at 70% 60%, rgba(255,255,255,.5) 3px, transparent 4px), radial-gradient(circle at 50% 20%, rgba(255,255,255,.6) 2px, transparent 3px)}
.poop-name{font-family:var(--f-disp); font-weight:800; font-size:15px; color:var(--fg1); letter-spacing:-.2px; line-height:1.25}
.poop-status{display:inline-flex; align-items:center; gap:4px; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; padding:3px 9px; border-radius:999px; align-self:flex-start}
.poop-status .mi{font-size:13px}
.poop-card.is-normal .poop-status{background:var(--mint-wash); color:#2d8755}
.poop-card.is-watch .poop-status{background:var(--sunflower-wash); color:#7a5500}
.poop-card.is-urgent .poop-status{background:var(--coral); color:#fff}
.poop-meaning{font-size:13px; color:var(--fg2); line-height:1.55; flex:1}
.poop-action{font-size:12px; color:var(--fg3); padding-top:6px; border-top:1px dashed var(--border)}
.poop-action strong{color:var(--fg1); font-weight:800}

.poop-legend{display:flex; flex-wrap:wrap; gap:10px 16px; margin:10px 0 0; padding:12px 14px; background:var(--cream); border-radius:12px; font-size:12px; color:var(--fg2)}
.poop-legend-item{display:inline-flex; align-items:center; gap:6px}
.poop-legend-dot{width:10px; height:10px; border-radius:50%}
.poop-legend-dot.normal{background:var(--mint)}
.poop-legend-dot.watch{background:var(--sunflower)}
.poop-legend-dot.urgent{background:var(--coral)}

/* ─── Hero result + stat grid (promoted from due-date inline) ─── */
.due-hero{padding:24px 26px; border-radius:24px; background:linear-gradient(135deg, var(--rose-wash) 0%, #fff 100%); border:1.5px solid var(--rose); text-align:center; margin:20px 0 16px}
.due-hero-label{font-family:var(--f-disp); font-weight:800; font-size:12px; text-transform:uppercase; letter-spacing:.1em; color:var(--rose); margin-bottom:8px}
.due-hero-date{font-family:var(--f-disp); font-weight:900; font-size:32px; line-height:1.1; letter-spacing:-1px; color:var(--fg1); text-wrap:balance}
.due-hero-sub{font-size:14px; color:var(--fg2); margin-top:6px}
.stat-grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; margin-bottom:16px}
.stat-card{padding:14px 12px; border-radius:14px; background:#fff; border:1.5px solid var(--border); text-align:center}
.stat-label{font-size:11px; font-weight:800; color:var(--fg3); text-transform:uppercase; letter-spacing:.06em; margin-bottom:4px}
.stat-value{font-family:var(--f-disp); font-weight:800; font-size:20px; line-height:1.1; color:var(--fg1); letter-spacing:-.4px}
.stat-unit{font-size:11px; color:var(--fg3); margin-top:2px}
.progress-track{height:10px; border-radius:999px; background:var(--cream); border:1px solid var(--border); overflow:hidden; margin:6px 0 4px}
.progress-fill{height:100%; background:linear-gradient(90deg, var(--rose), var(--coral)); border-radius:999px; transition:width .4s}
@media (max-width:560px){
  .stat-grid{grid-template-columns:repeat(2,1fr)}
  .due-hero-date{font-size:26px}
}

/* ─── Sticky mobile CTA bar (shown after 600px scroll, dismissable) ─── */
.sticky-cta-mobile{
  display:none;
  position:fixed; left:12px; right:12px;
  bottom:calc(12px + env(safe-area-inset-bottom));
  z-index:60;
  background:#fff; border:1px solid var(--border); border-radius:18px;
  padding:10px 14px 10px 16px;
  box-shadow:0 12px 32px -12px rgba(45,32,24,.18), 0 2px 6px rgba(45,32,24,.06);
  align-items:center; gap:10px;
}
.sticky-cta-mobile > div{flex:1; min-width:0}
.sticky-cta-mobile .scm-text{font-family:var(--f-disp); font-weight:700; font-size:13px; color:var(--fg1); line-height:1.25}
.sticky-cta-mobile .scm-sub{font-family:var(--f-body); font-weight:500; font-size:11.5px; color:var(--fg3); margin-top:1px}
.sticky-cta-mobile .scm-btn{flex-shrink:0; padding:10px 14px; border-radius:12px; background:var(--primary); color:#fff; font-family:var(--f-disp); font-weight:800; font-size:12.5px; display:inline-flex; align-items:center; gap:4px; white-space:nowrap}
.sticky-cta-mobile .scm-close{position:absolute; top:-8px; right:-8px; width:24px; height:24px; border-radius:99px; background:#fff; border:1px solid var(--border); display:grid; place-items:center; font-size:14px; color:var(--fg3); cursor:pointer; padding:0; line-height:1}
@media (max-width:760px){
  .sticky-cta-mobile.is-shown{display:flex}
  body.has-sticky-cta footer.site-foot{padding-bottom:80px}
}

/* ─── Age chips (wake-windows quick selectors) ─── */
.age-chips{display:flex; gap:6px; flex-wrap:wrap; margin-top:12px}
.age-chip{padding:8px 14px; border-radius:99px; background:#fff; border:1.5px solid var(--border); font-family:var(--f-body); font-size:12.5px; font-weight:600; color:var(--fg2); cursor:pointer; transition:all .15s}
.age-chip:hover{border-color:var(--accent-soft); color:var(--fg1)}
.age-chip.is-active{background:var(--accent); color:#fff; border-color:var(--accent)}
.age-chip:focus-visible{outline:none; box-shadow:0 0 0 3px var(--accent-wash)}

/* Print: keep widget hidden, show table */
@media print {
  .widget,.form-card,.kg-cta,.topnav,footer.site-foot,.sticky-cta-mobile{display:none}
}