:root{
 --bg:#f3f7f7;--card:#fff;--text:#142229;--muted:#667780;--border:#dfe8e8;--soft:#f7fafa;
 --accent:#126b59;--accent2:#2b947d;--accentSoft:#eaf6f2;--navy:#183b45;--amber:#b7791f;
 --orange:#bd6227;--red:#b63a34;--shadow:0 22px 62px rgba(20,42,48,.10);--r:18px
}
*{box-sizing:border-box}html{font-size:16px}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:linear-gradient(180deg,#f8fbfb,var(--bg));color:var(--text)}
button,input,select{font:inherit}button{touch-action:manipulation}.aa-page{min-height:100vh;padding:24px 14px;display:flex;justify-content:center;align-items:flex-start}.aa-app{width:min(880px,100%);background:var(--card);border:1px solid var(--border);border-radius:28px;box-shadow:var(--shadow);overflow:hidden}.aa-topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 24px 12px}.aa-brand{display:flex;align-items:center;gap:11px;min-width:0}.aa-logo{width:42px;height:42px;display:grid;place-items:center;background:var(--accent);color:#fff;border-radius:13px;font-size:24px;font-weight:900;flex:0 0 auto}.aa-brand strong{display:block;font-size:15px}.aa-brand small{display:block;margin-top:2px;color:var(--muted);font-size:11px}.aa-clear{border:0;background:transparent;color:var(--muted);font-size:12px;font-weight:700;cursor:pointer;padding:10px}.aa-clear:hover{color:var(--text)}
.aa-progress-wrap{padding:0 24px}.aa-progress-meta{display:flex;justify-content:space-between;gap:12px;color:var(--muted);font-size:11px;margin-bottom:7px}.aa-progress{height:7px;background:#edf2f2;border-radius:999px;overflow:hidden}.aa-progress span{height:100%;width:0;display:block;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width .25s ease;border-radius:999px}.aa-stage{padding:30px 24px 26px;min-height:420px}.aa-stage-in{animation:aaIn .22s ease}@keyframes aaIn{from{opacity:.35;transform:translateY(4px)}to{opacity:1;transform:none}}.aa-kicker{display:inline-flex;gap:7px;align-items:center;padding:6px 10px;border-radius:999px;background:var(--accentSoft);color:#195b4d;font-size:11px;font-weight:850;letter-spacing:.02em}.aa-stage h1,.aa-stage h2{letter-spacing:-.035em;line-height:1.12;margin:13px 0 9px}.aa-stage h1{font-size:clamp(31px,5vw,48px)}.aa-stage h2{font-size:clamp(25px,4vw,35px)}.aa-lead{font-size:16px;line-height:1.65;color:var(--muted);max-width:700px;margin:0}.aa-micro{font-size:11px;color:var(--muted);line-height:1.5}.aa-intro-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin-top:23px}.aa-intro-card{border:1px solid var(--border);border-radius:15px;padding:15px;background:var(--soft)}.aa-intro-card b{display:block;font-size:13px}.aa-intro-card span{display:block;font-size:11px;line-height:1.48;color:var(--muted);margin-top:4px}.aa-privacy{display:grid;grid-template-columns:auto 1fr;gap:11px;margin-top:17px;padding:14px;border:1px solid #d5eae3;background:#f7fcfa;border-radius:15px}.aa-privacy b{font-size:13px}.aa-privacy p{font-size:11px;line-height:1.55;color:var(--muted);margin:3px 0 0}
.aa-options{display:grid;gap:11px;margin-top:22px}.aa-option{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;padding:16px;border:1.5px solid var(--border);border-radius:16px;cursor:pointer;background:#fff;transition:.15s}.aa-option input{width:18px;height:18px;margin-top:1px;accent-color:var(--accent)}.aa-option strong{display:block;font-size:14px}.aa-option small{display:block;color:var(--muted);font-size:11px;line-height:1.5;margin-top:4px}.aa-option:has(input:checked){border-color:var(--accent);background:var(--accentSoft);box-shadow:0 0 0 3px rgba(18,107,89,.07)}@media(hover:hover) and (pointer:fine){.aa-option:hover{border-color:#9dbab1;transform:translateY(-1px)}}
.aa-info-line{display:flex;gap:8px;align-items:flex-start;padding:11px 12px;background:#f5f8f9;border-radius:12px;color:#52656e;font-size:11px;line-height:1.55;margin-top:14px}.aa-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-top:20px}.aa-field{display:grid;gap:7px;min-width:0}.aa-field label{font-size:12px;font-weight:800}.aa-field input,.aa-field select{width:100%;min-height:48px;border:1.5px solid var(--border);border-radius:12px;background:#fff;color:var(--text);padding:11px 12px;outline:0;font-size:16px}.aa-field input:focus,.aa-field select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(18,107,89,.09)}.aa-help{font-size:10px;color:var(--muted);line-height:1.45}.aa-drinks{display:grid;gap:10px;margin-top:19px}.aa-drink-row{display:grid;grid-template-columns:minmax(240px,2.1fr) 1fr 1fr auto;align-items:end;gap:9px;padding:13px;border:1px solid var(--border);background:var(--soft);border-radius:15px}.aa-remove{height:48px;border:1px solid var(--border);border-radius:11px;background:#fff;padding:0 11px;font-size:11px;font-weight:800;color:#6d7c84;cursor:pointer}.aa-add{margin-top:11px;border:1px dashed #a9c9bf;background:#f7fcfa;color:#185a4c;border-radius:11px;padding:11px 14px;font-size:12px;font-weight:850;cursor:pointer}.aa-live{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:17px}.aa-live-card{border:1px solid var(--border);border-radius:14px;background:#fff;padding:14px}.aa-live-card b{font-size:24px;display:block;letter-spacing:-.04em}.aa-live-card span{display:block;color:var(--muted);font-size:10px;line-height:1.4;margin-top:3px}.aa-ref{margin-top:11px;padding:11px 13px;border-radius:12px;background:#fff9ed;border:1px solid #f1dfb9;color:#755621;font-size:11px;line-height:1.55}.aa-error{margin-top:13px;padding:11px 12px;border:1px solid #f4c7c4;background:#fff2f1;color:#a72e28;border-radius:11px;font-size:12px}.aa-footer{padding:15px 24px 22px;border-top:1px solid #edf1f2;display:flex;justify-content:space-between;gap:12px;background:#fff}.aa-footer-right{display:flex;gap:9px}.aa-btn{border:0;border-radius:12px;min-height:48px;padding:11px 18px;font-weight:850;cursor:pointer}.aa-btn-primary{background:var(--accent);color:#fff}.aa-btn-primary:hover{background:#0f584a}.aa-btn-light{background:#eef3f4;color:#44565e}.aa-btn-outline{background:#fff;color:#344750;border:1px solid var(--border)}.aa-btn[hidden]{display:none}.aa-btn:focus-visible,.aa-add:focus-visible,.aa-remove:focus-visible,.aa-clear:focus-visible{outline:3px solid rgba(18,107,89,.2);outline-offset:2px}
.aa-report{display:grid;gap:16px}.aa-report-hero{position:relative;overflow:hidden;padding:24px;border-radius:22px;background:linear-gradient(135deg,#173b43,#126b59 58%,#28927a);color:#fff}.aa-report-hero:after{content:"";position:absolute;width:230px;height:230px;border-radius:50%;right:-78px;top:-96px;background:rgba(255,255,255,.08)}.aa-report-hero .aa-kicker{background:rgba(255,255,255,.15);color:#fff}.aa-report-hero h2{position:relative;z-index:1;font-size:clamp(28px,5vw,42px);margin:11px 0 6px}.aa-report-hero p{position:relative;z-index:1;margin:0;max-width:670px;color:rgba(255,255,255,.82);line-height:1.55;font-size:14px}.aa-report-meta{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:7px 13px;color:rgba(255,255,255,.78);font-size:10px;margin-top:14px}.aa-status{position:relative;z-index:1;display:inline-flex;align-items:center;gap:7px;margin-top:17px;padding:8px 11px;background:#fff;color:#173c34;border-radius:999px;font-size:11px;font-weight:900}.aa-status-dot{width:8px;height:8px;border-radius:50%;background:var(--accent2)}.aa-report-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}.aa-stat{border:1px solid var(--border);border-radius:15px;padding:15px;background:var(--soft);min-width:0}.aa-stat b{display:block;font-size:24px;letter-spacing:-.04em;overflow-wrap:anywhere}.aa-stat span{display:block;color:var(--muted);font-size:10px;line-height:1.42;margin-top:3px}.aa-panel{border:1px solid var(--border);border-radius:17px;padding:18px;background:#fff}.aa-panel-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:8px}.aa-panel h3{font-size:16px;margin:0}.aa-panel p{font-size:13px;color:#50626b;line-height:1.65;margin:0}.aa-panel ul{margin:9px 0 0;padding-left:18px;color:#50626b;font-size:13px;line-height:1.65}.aa-tag{padding:5px 8px;border-radius:999px;background:#eef3f4;color:#5d6d75;font-size:9px;font-weight:850;white-space:nowrap}.aa-risk-scale{margin-top:15px}.aa-risk-track{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}.aa-risk-track span{height:9px;border-radius:999px}.aa-risk-track span:nth-child(1){background:#83bcae}.aa-risk-track span:nth-child(2){background:#dbbf70}.aa-risk-track span:nth-child(3){background:#d79055}.aa-risk-track span:nth-child(4){background:#d46d66}.aa-risk-pointer{height:18px;position:relative;margin-top:3px}.aa-risk-pointer i{position:absolute;top:0;width:2px;height:14px;background:#17272e;transform:translateX(-50%);border-radius:2px}.aa-risk-labels{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;color:var(--muted);font-size:9px}.aa-benchmark{margin-top:13px}.aa-benchmark-head{display:flex;justify-content:space-between;gap:10px;font-size:10px;color:var(--muted);margin-bottom:6px}.aa-benchmark-bar{height:10px;background:#edf1f2;border-radius:999px;overflow:hidden}.aa-benchmark-bar span{height:100%;display:block;background:linear-gradient(90deg,#66ae9c,#d8aa58,#c66455);border-radius:999px}.aa-breakdown{width:100%;border-collapse:collapse;margin-top:7px}.aa-breakdown th,.aa-breakdown td{text-align:left;padding:9px 8px;border-bottom:1px solid #edf1f2;font-size:11px}.aa-breakdown th{color:var(--muted);font-size:9px;text-transform:uppercase;letter-spacing:.04em}.aa-breakdown td:nth-child(n+2),.aa-breakdown th:nth-child(n+2){text-align:right}.aa-signal-list{display:grid;gap:8px;margin-top:11px}.aa-signal{display:grid;grid-template-columns:auto 1fr;gap:9px;padding:11px;border-radius:12px;background:var(--soft)}.aa-signal span:first-child{width:22px;height:22px;display:grid;place-items:center;border-radius:7px;background:#fff;border:1px solid var(--border);font-size:10px;font-weight:900}.aa-signal b{display:block;font-size:11px}.aa-signal small{display:block;color:var(--muted);font-size:10px;line-height:1.48;margin-top:2px}.aa-plan{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin-top:11px}.aa-plan-btn{border:1.5px solid var(--border);background:#fff;border-radius:13px;text-align:left;padding:12px;cursor:pointer;color:var(--text)}.aa-plan-btn b{display:block;font-size:11px}.aa-plan-btn small{display:block;color:var(--muted);font-size:10px;line-height:1.45;margin-top:3px}.aa-plan-btn[aria-pressed="true"]{border-color:var(--accent);background:var(--accentSoft)}.aa-report-actions{display:flex;gap:9px;flex-wrap:wrap}.aa-sources{font-size:9px;color:#7a888e;line-height:1.55}.aa-sources a{color:#5c737b}.aa-print-title{display:none}.aa-empty{color:var(--muted);font-size:11px}.aa-contact-note{margin-top:14px;padding:12px 13px;border-left:3px solid var(--accent);background:var(--accentSoft);border-radius:0 12px 12px 0;color:#3f5e56;font-size:11px;line-height:1.55}
@media(max-width:720px){.aa-page{padding:9px}.aa-app{border-radius:18px}.aa-topbar,.aa-progress-wrap,.aa-stage,.aa-footer{padding-left:17px;padding-right:17px}.aa-stage{min-height:390px;padding-top:24px}.aa-intro-grid,.aa-live,.aa-report-grid{grid-template-columns:1fr 1fr}.aa-drink-row{grid-template-columns:1fr 1fr}.aa-drink-type,.aa-remove-wrap{grid-column:1/-1}.aa-remove{width:100%}.aa-footer{position:sticky;bottom:0}.aa-clear{font-size:10px}.aa-plan{grid-template-columns:1fr}}
@media(max-width:470px){.aa-grid,.aa-intro-grid,.aa-live,.aa-report-grid{grid-template-columns:1fr}.aa-topbar{align-items:flex-start}.aa-brand small{max-width:180px}.aa-footer{flex-wrap:wrap}.aa-footer>.aa-btn{flex:1}.aa-footer-right{width:100%}.aa-footer-right .aa-btn{flex:1}.aa-report-actions .aa-btn{width:100%}.aa-breakdown th:nth-child(3),.aa-breakdown td:nth-child(3){display:none}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media print{body{background:#fff}.aa-page{padding:0}.aa-app{width:100%;border:0;box-shadow:none;border-radius:0}.aa-topbar,.aa-progress-wrap,.aa-footer,.aa-report-actions,.aa-save-status,.mg-site-header,.mg-site-footer{display:none!important}.aa-stage{padding:0;min-height:0}.aa-report-hero{-webkit-print-color-adjust:exact;print-color-adjust:exact}.aa-panel,.aa-stat{break-inside:avoid}.aa-print-title{display:block;font-size:12px;color:#677;margin-bottom:8px}.aa-plan-btn{pointer-events:none}}


/* V3.1 — simplified, patient-friendly drink calculator */
.aa-example{display:flex;gap:10px;align-items:flex-start;margin-top:16px;padding:12px 13px;border-radius:13px;background:#f5f8f9;border:1px solid var(--border);color:#52656e;font-size:11px;line-height:1.55}.aa-example b{flex:0 0 auto;padding:3px 7px;border-radius:7px;background:#fff;color:#234b42}.aa-drink-card{border:1px solid var(--border);background:var(--soft);border-radius:18px;padding:16px;display:grid;gap:14px}.aa-drink-card-head{display:flex;gap:12px;align-items:end}.aa-drink-card-head .aa-drink-type{flex:1}.aa-remove-link{border:0;background:transparent;color:#8a514d;font-size:10px;font-weight:800;cursor:pointer;padding:10px 2px;text-decoration:underline;text-underline-offset:3px}.aa-drink-question{background:#fff;border:1px solid #e4eaec;border-radius:15px;padding:14px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center}.aa-frequency-question{grid-template-columns:1fr}.aa-question-copy{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;align-items:start}.aa-q-number{width:28px;height:28px;border-radius:9px;background:var(--accentSoft);color:var(--accent);display:grid;place-items:center;font-size:11px;font-weight:900}.aa-question-copy b{display:block;font-size:13px;line-height:1.42}.aa-question-copy small{display:block;margin-top:4px;color:var(--muted);font-size:10px;line-height:1.45}.aa-stepper{display:grid;grid-template-columns:46px 58px 46px;align-items:center;border:1.5px solid #cfe0da;border-radius:13px;overflow:hidden;background:#fff}.aa-stepper button{height:48px;border:0;background:#f3f8f6;color:var(--accent);font-size:22px;font-weight:800;cursor:pointer}.aa-stepper output{height:48px;display:grid;place-items:center;font-size:20px;font-weight:900;border-left:1px solid #dce8e4;border-right:1px solid #dce8e4}.aa-frequency-picker{display:grid;grid-template-columns:repeat(7,1fr);gap:7px;margin-top:2px}.aa-day-btn{min-height:52px;border:1.5px solid var(--border);background:#fff;border-radius:11px;color:var(--text);cursor:pointer;padding:6px 4px}.aa-day-btn b{display:block;font-size:15px}.aa-day-btn span{display:block;color:var(--muted);font-size:8px;margin-top:1px}.aa-day-btn[aria-pressed="true"]{border-color:var(--accent);background:var(--accentSoft);color:var(--accent)}.aa-day-btn[aria-pressed="true"] span{color:#3f6b61}.aa-less-btn{justify-self:start;margin-top:8px;border:1px solid var(--border);border-radius:10px;background:#fff;color:#52656e;padding:8px 10px;font-size:10px;font-weight:750;cursor:pointer}.aa-less-btn span{font-weight:500;color:var(--muted)}.aa-less-btn[aria-pressed="true"]{border-color:var(--accent);background:var(--accentSoft);color:var(--accent)}.aa-drink-estimate{display:flex;justify-content:space-between;gap:14px;align-items:center;padding:12px 13px;border-radius:13px;background:#edf7f3;border:1px solid #d2e9e1}.aa-drink-estimate>div:first-child b{display:block;font-size:11px;color:#174f43;text-transform:capitalize}.aa-drink-estimate>div:first-child span{display:block;color:#557069;font-size:10px;margin-top:3px}.aa-estimate-values{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}.aa-estimate-values strong{min-width:72px;background:#fff;border:1px solid #d8e8e3;border-radius:9px;padding:7px 8px;text-align:center;font-size:13px;color:#173f36}.aa-estimate-values small{display:block;color:var(--muted);font-size:7px;font-weight:650;margin-top:2px}.aa-drinks{gap:14px}.aa-add{font-size:11px}.aa-stepper button:focus-visible,.aa-day-btn:focus-visible,.aa-less-btn:focus-visible,.aa-remove-link:focus-visible{outline:3px solid rgba(18,107,89,.2);outline-offset:2px}
@media(max-width:720px){.aa-drink-card-head{align-items:stretch;flex-direction:column}.aa-remove-link{align-self:flex-start}.aa-drink-question{grid-template-columns:1fr}.aa-stepper{justify-self:start}.aa-frequency-picker{grid-template-columns:repeat(4,1fr)}.aa-drink-estimate{align-items:stretch;flex-direction:column}.aa-estimate-values{justify-content:flex-start}.aa-estimate-values strong{flex:1;min-width:90px}}
@media(max-width:470px){.aa-frequency-picker{grid-template-columns:repeat(3,1fr)}.aa-stepper{grid-template-columns:48px 64px 48px}.aa-estimate-values{display:grid;grid-template-columns:repeat(3,1fr);width:100%}.aa-estimate-values strong{min-width:0}.aa-example{flex-direction:column;gap:6px}}

/* V4.3 — vertical beer/wine/whisky checklist: tick any/all that apply, each reveals its own config inline */
.aa-drink-type-heading{margin-top:4px}
.aa-drink-type-heading label{display:block;font-size:13px;font-weight:800;color:var(--text)}
.aa-drink-type-heading small{display:block;margin-top:2px;color:var(--muted);font-size:11px}
.aa-drink-type-list{display:flex;flex-direction:column;gap:12px;margin-top:10px}
.aa-drink-type-block{border:1.5px solid var(--border);border-radius:16px;background:#fff;overflow:hidden;transition:border-color .14s,box-shadow .14s}
.aa-drink-type-block-open{border-color:var(--accent);box-shadow:0 0 0 3px rgba(18,107,89,.06)}
.aa-drink-type-toggle{display:flex;align-items:center;gap:12px;padding:16px;cursor:pointer;user-select:none}
.aa-drink-type-toggle input{width:22px;height:22px;min-width:22px;accent-color:var(--accent);cursor:pointer}
.aa-drink-type-toggle-icon{font-size:24px;line-height:1}
.aa-drink-type-toggle-label{font-size:15px;font-weight:800;color:var(--text)}
.aa-drink-type-config{padding:14px 16px 16px;border-top:1px solid #eef2f2;display:grid;gap:14px}
.aa-drink-variant-select{margin-top:0}
@media(max-width:470px){.aa-drink-type-toggle{padding:13px;gap:10px}.aa-drink-type-toggle-icon{font-size:20px}.aa-drink-type-toggle-label{font-size:13.5px}.aa-drink-type-config{padding:12px 13px 13px}}
\n\n/* V3.2 — risk-sensitive doctor connection CTA */
.aa-doctor-cta{display:grid;grid-template-columns:52px minmax(0,1fr);gap:15px;align-items:start;padding:19px;border:1px solid #d5e6e0;border-radius:18px;background:linear-gradient(135deg,#f3faf7 0%,#edf7f3 100%)}
.aa-doctor-cta-urgent{border-color:#ebd4b7;background:linear-gradient(135deg,#fff9ef 0%,#fff5e7 100%)}
.aa-doctor-icon{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;background:var(--accent);color:#fff;font-size:28px;font-weight:900;box-shadow:0 7px 18px rgba(18,107,89,.16)}
.aa-doctor-cta-urgent .aa-doctor-icon{background:#a86620;box-shadow:0 7px 18px rgba(168,102,32,.16)}
.aa-doctor-kicker{display:inline-block;margin-bottom:4px;color:var(--accent);font-size:9px;font-weight:900;letter-spacing:.06em;text-transform:uppercase}
.aa-doctor-cta-urgent .aa-doctor-kicker{color:#8e571d}
.aa-doctor-copy h3{margin:0 0 6px;font-size:17px;line-height:1.3}
.aa-doctor-copy p{margin:0;color:#50626b;font-size:12px;line-height:1.6;max-width:680px}
.aa-doctor-actions{display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin-top:13px}
.aa-btn-doctor{display:inline-flex;align-items:center;justify-content:center;background:var(--accent);color:#fff;text-decoration:none;min-height:46px}
.aa-btn-doctor:hover{background:#0d594a}
.aa-doctor-cta-urgent .aa-btn-doctor{background:#9c5d1c}
.aa-doctor-cta-urgent .aa-btn-doctor:hover{background:#7f4913}
.aa-doctor-actions span{color:var(--muted);font-size:9px;line-height:1.4}
@media(max-width:560px){.aa-doctor-cta{grid-template-columns:1fr}.aa-doctor-icon{width:44px;height:44px;border-radius:13px;font-size:24px}.aa-doctor-actions{align-items:stretch}.aa-btn-doctor{width:100%}.aa-doctor-actions span{width:100%;text-align:center}}
@media print{.aa-doctor-cta{break-inside:avoid;-webkit-print-color-adjust:exact;print-color-adjust:exact}.aa-btn-doctor{border:1px solid #cfdad6;background:#fff!important;color:#173c34!important}.aa-doctor-actions span{display:block}}


/* V3.4 additions */
body,.aa-app,button,input,select{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}

/* =========================================================
   V3.6 — Mobile-first responsive hardening
   Optimized for ~320px phones through tablet/desktop.
   ========================================================= */

html,body{max-width:100%;overflow-x:hidden}
.aa-page,.aa-app,.aa-topbar,.aa-progress-wrap,.aa-stage,.aa-footer,
.aa-stage *,.aa-report *{min-width:0}
.aa-stage h1,.aa-stage h2,.aa-panel h3,.aa-doctor-copy h3,.aa-brand strong,
.aa-brand small,.aa-lead,.aa-option strong,.aa-option small,.aa-panel p,
.aa-panel li,.aa-status,.aa-tag,.aa-sources{overflow-wrap:anywhere}
.aa-field select{max-width:100%;text-overflow:ellipsis}
.aa-report-hero,.aa-panel,.aa-stat,.aa-drink-card{max-width:100%}
.aa-status{max-width:100%;white-space:normal;flex-wrap:wrap;line-height:1.35}
.aa-report-meta span{overflow-wrap:anywhere;word-break:break-word}
.aa-risk-labels span{text-align:center;min-width:0;line-height:1.25;overflow-wrap:anywhere}
.aa-breakdown{display:table;table-layout:fixed;min-width:100%}
.aa-breakdown th:first-child,.aa-breakdown td:first-child{width:43%;overflow-wrap:anywhere}
.aa-breakdown th:not(:first-child),.aa-breakdown td:not(:first-child){width:19%}

@media(max-width:760px){
  body{background:#f5f8f8}
  .aa-page{padding:8px 8px 18px;display:block;min-height:0}
  .aa-app{width:100%;border-radius:18px;box-shadow:0 8px 28px rgba(20,42,48,.08)}
  .aa-topbar{padding:14px 14px 10px;gap:10px}
  .aa-progress-wrap{padding:0 14px}
  .aa-stage{padding:22px 14px 24px;min-height:0}
  .aa-footer{padding:12px 14px calc(12px + env(safe-area-inset-bottom));}
  .aa-stage h1{font-size:clamp(28px,8vw,38px);line-height:1.14}
  .aa-stage h2{font-size:clamp(23px,6.6vw,30px);line-height:1.2}
  .aa-lead{font-size:15px;line-height:1.6}
  .aa-option{padding:15px 14px;gap:11px;border-radius:14px}
  .aa-option strong{font-size:14px;line-height:1.4}
  .aa-option small{font-size:11px}
  .aa-grid{grid-template-columns:1fr}
  .aa-intro-grid{grid-template-columns:1fr}
  .aa-live{grid-template-columns:repeat(3,minmax(0,1fr))}
  .aa-report-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .aa-panel{padding:16px;border-radius:15px}
  .aa-panel-head{flex-wrap:wrap}
  .aa-tag{white-space:normal;max-width:100%}
  .aa-report-hero{padding:20px;border-radius:18px}
  .aa-report-hero h2{font-size:clamp(27px,7vw,35px)}
  .aa-report-hero p{font-size:13px}
  .aa-stat{padding:14px}
  .aa-stat b{font-size:22px}
  .aa-stat span{font-size:10px}
  .aa-benchmark-head{flex-wrap:wrap;line-height:1.4}
  .aa-plan{grid-template-columns:1fr}
  .aa-report-actions{display:grid;grid-template-columns:1fr;gap:9px}
  .aa-report-actions .aa-btn{width:100%}
  .aa-signal{grid-template-columns:28px minmax(0,1fr)}
  .aa-doctor-cta{grid-template-columns:44px minmax(0,1fr);padding:16px;gap:12px}
  .aa-doctor-icon{width:44px;height:44px;font-size:23px}
  .aa-doctor-actions{display:grid;grid-template-columns:1fr;gap:7px}
  .aa-btn-doctor{width:100%}
  .aa-doctor-actions span{text-align:center;width:100%}
}

@media(max-width:560px){
  .aa-topbar{display:grid;grid-template-columns:1fr;align-items:start}
  .aa-brand{width:100%}
  .aa-logo{width:38px;height:38px;border-radius:11px;font-size:21px}
  .aa-brand strong{font-size:14px;line-height:1.3}
  .aa-brand small{font-size:10px;line-height:1.4;max-width:none}
  .aa-clear{justify-self:end;margin-top:-2px;padding:4px 0;font-size:10px}
  .aa-progress-meta{font-size:10px}
  .aa-progress{height:6px}

  .aa-footer{
    position:sticky;bottom:0;z-index:20;
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:9px;
    background:rgba(255,255,255,.97);backdrop-filter:blur(8px);
    box-shadow:0 -7px 20px rgba(20,42,48,.06)
  }
  .aa-footer>#backBtn{grid-column:1;grid-row:1;width:100%}
  .aa-footer-right{display:contents}
  .aa-footer-right>#nextBtn{grid-column:2;grid-row:1;width:100%}
  .aa-footer-right>#skipBtn:not([hidden]){grid-column:1/-1;grid-row:2;width:100%}
  .aa-btn{min-height:50px;padding:11px 12px;font-size:13px}

  .aa-privacy{padding:13px;gap:9px}
  .aa-info-line,.aa-ref,.aa-example,.aa-contact-note{font-size:11px}

  .aa-drink-card{padding:13px;border-radius:16px;gap:12px}
  .aa-drink-card-head{display:grid;grid-template-columns:1fr;gap:7px}
  .aa-remove-link{justify-self:start;padding:5px 1px}
  .aa-drink-question{grid-template-columns:1fr;padding:13px;gap:12px}
  .aa-question-copy{grid-template-columns:26px minmax(0,1fr);gap:9px}
  .aa-q-number{width:26px;height:26px}
  .aa-question-copy b{font-size:13px}
  .aa-stepper{width:100%;grid-template-columns:52px minmax(64px,1fr) 52px;justify-self:stretch}
  .aa-stepper button,.aa-stepper output{height:52px}
  .aa-frequency-picker{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
  .aa-day-btn{min-height:54px;padding:6px 2px}
  .aa-less-btn{width:100%;min-height:44px;justify-self:stretch;text-align:center}
  .aa-drink-estimate{padding:12px;gap:10px}
  .aa-estimate-values{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;gap:6px}
  .aa-estimate-values strong{min-width:0;padding:7px 5px;font-size:12px}
  .aa-estimate-values small{font-size:7.5px;line-height:1.25}
  .aa-add{width:100%;min-height:46px;text-align:center}

  .aa-live{grid-template-columns:1fr;gap:8px}
  .aa-live-card{padding:12px;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:12px}
  .aa-live-card b{font-size:22px}
  .aa-live-card span{font-size:10px;margin-top:0}

  .aa-report-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .aa-report-meta{display:grid;grid-template-columns:1fr;gap:4px}
  .aa-status{display:flex;width:max-content;max-width:100%;font-size:10px}
  .aa-risk-labels{font-size:8px;gap:2px}
  .aa-risk-track{gap:3px}
  .aa-risk-track span{height:8px}

  .aa-breakdown{font-size:10px}
  .aa-breakdown th,.aa-breakdown td{padding:8px 5px;font-size:10px}
  .aa-breakdown th{font-size:8px;line-height:1.25}
  .aa-breakdown th:nth-child(3),.aa-breakdown td:nth-child(3){display:table-cell}

  .aa-doctor-cta{grid-template-columns:1fr}
  .aa-doctor-copy h3{font-size:16px}
  .aa-doctor-copy p{font-size:12px}
}

@media(max-width:390px){
  .aa-page{padding:0 0 14px}
  .aa-app{border-left:0;border-right:0;border-top:0;border-radius:0 0 16px 16px;box-shadow:none}
  .aa-topbar{padding:12px 12px 8px}
  .aa-progress-wrap{padding:0 12px}
  .aa-stage{padding:20px 12px 22px}
  .aa-footer{padding-left:12px;padding-right:12px}
  .aa-stage h1{font-size:27px}
  .aa-stage h2{font-size:23px}
  .aa-kicker{font-size:10px;padding:5px 8px}
  .aa-lead{font-size:14px}

  .aa-option{padding:14px 12px}
  .aa-field label{font-size:11px}
  .aa-field input,.aa-field select{min-height:50px;padding:10px 11px;font-size:16px}
  .aa-frequency-picker{grid-template-columns:repeat(3,minmax(0,1fr))}
  .aa-estimate-values{grid-template-columns:1fr}
  .aa-estimate-values strong{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:8px;text-align:left}
  .aa-estimate-values small{margin-top:0;text-align:right;font-size:8px}

  .aa-report-hero{padding:17px;border-radius:16px}
  .aa-report-hero h2{font-size:26px}
  .aa-report-grid{grid-template-columns:1fr 1fr}
  .aa-stat{padding:12px}
  .aa-stat b{font-size:20px}
  .aa-panel{padding:14px}
  .aa-panel p,.aa-panel ul{font-size:12px}
  .aa-panel h3{font-size:15px}
  .aa-risk-labels{font-size:7.5px}
  .aa-breakdown th:first-child,.aa-breakdown td:first-child{width:47%}
  .aa-breakdown th:not(:first-child),.aa-breakdown td:not(:first-child){width:17.66%}
  .aa-breakdown th,.aa-breakdown td{padding:7px 3px;font-size:9px}
  .aa-breakdown th{font-size:7px}
  .aa-sources{font-size:8.5px}
}

@media(max-width:340px){
  .aa-stage{padding-left:10px;padding-right:10px}
  .aa-footer{padding-left:10px;padding-right:10px;gap:7px}
  .aa-btn{font-size:12px;padding-left:8px;padding-right:8px}
  .aa-report-grid{grid-template-columns:1fr}
  .aa-risk-labels{font-size:7px}
  .aa-frequency-picker{grid-template-columns:repeat(2,minmax(0,1fr))}
  .aa-stepper{grid-template-columns:48px minmax(54px,1fr) 48px}
}

@media(orientation:landscape) and (max-height:520px) and (max-width:900px){
  .aa-footer{position:static;box-shadow:none}
  .aa-page{padding-bottom:8px}
}

/* =========================================================
   V3.7 — Phone-native layout refinement
   More compact, thumb-friendly, and optimized for 320–480px.
   ========================================================= */
@media(max-width:760px){
  body{background:#fff}
  .aa-page{padding:0;display:block;width:100%}
  .aa-app{width:100%;max-width:none;border:0;border-radius:0;box-shadow:none;overflow:visible}

  /* Compact app chrome */
  .aa-topbar{
    position:relative;display:flex;flex-direction:row;align-items:center;justify-content:space-between;
    padding:10px 12px 8px;gap:8px;border-bottom:0;background:#fff
  }
  .aa-brand{gap:8px;flex:1;min-width:0}
  .aa-logo{width:34px;height:34px;border-radius:10px;font-size:19px}
  .aa-brand strong{font-size:13px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .aa-brand small{font-size:9.5px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .aa-clear{flex:0 0 auto;margin:0;padding:8px 7px;border-radius:9px;background:#f2f6f6;font-size:10px;line-height:1.1}

  .aa-progress-wrap{padding:0 12px 8px;background:#fff;border-bottom:1px solid #eef2f2}
  .aa-progress-meta{margin-bottom:5px;font-size:9.5px}
  .aa-progress{height:5px}

  /* Content uses available screen width */
  .aa-stage{padding:18px 12px 104px;min-height:0}
  .aa-stage h1{font-size:27px;margin:10px 0 7px;line-height:1.15}
  .aa-stage h2{font-size:22px;margin:10px 0 7px;line-height:1.22}
  .aa-kicker{font-size:9.5px;padding:5px 8px}
  .aa-lead{font-size:14px;line-height:1.52}

  /* Intro and language screens: less scrolling */
  .aa-intro-grid{gap:7px;margin-top:15px}
  .aa-intro-card{padding:11px 12px;border-radius:12px;display:grid;grid-template-columns:minmax(100px,.7fr) 1.3fr;gap:9px;align-items:start}
  .aa-intro-card b{font-size:12px}
  .aa-intro-card span{font-size:10px;margin:0;line-height:1.4}
  .aa-privacy{margin-top:12px;padding:11px;border-radius:12px}
  .aa-privacy b{font-size:12px}.aa-privacy p{font-size:10px;line-height:1.45}

  /* Choice screens */
  .aa-options{gap:8px;margin-top:15px}
  .aa-option{min-height:58px;padding:12px 12px;border-radius:13px;gap:10px;align-items:center}
  .aa-option input{width:20px;height:20px;margin:0}
  .aa-option strong{font-size:13.5px;line-height:1.32}
  .aa-option small{font-size:10px;line-height:1.38;margin-top:2px}
  .aa-info-line{margin-top:10px;padding:9px 10px;border-radius:10px;font-size:10px}

  /* Inputs */
  .aa-grid{gap:10px;margin-top:14px}
  .aa-field{gap:5px}
  .aa-field label{font-size:11px}
  .aa-field input,.aa-field select{min-height:50px;border-radius:11px;padding:10px 11px;font-size:16px}
  .aa-help{font-size:9.5px}

  /* Weekly calculator */
  .aa-example{margin-top:11px;padding:9px 10px;font-size:10px;border-radius:10px}
  .aa-drinks{margin-top:12px;gap:10px}
  .aa-drink-card{padding:10px;border-radius:13px;gap:9px}
  .aa-drink-card-head{gap:5px}
  .aa-remove-link{font-size:9.5px;padding:4px 0}
  .aa-drink-question{padding:10px;border-radius:12px;gap:9px}
  .aa-question-copy{grid-template-columns:24px minmax(0,1fr);gap:8px}
  .aa-q-number{width:24px;height:24px;border-radius:7px;font-size:10px}
  .aa-question-copy b{font-size:12px;line-height:1.35}
  .aa-question-copy small{font-size:9px;line-height:1.35;margin-top:2px}
  .aa-stepper{grid-template-columns:48px minmax(58px,1fr) 48px;width:100%;border-radius:11px}
  .aa-stepper button,.aa-stepper output{height:48px}
  .aa-stepper button{font-size:22px}
  .aa-stepper output{font-size:18px}
  .aa-frequency-picker{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
  .aa-day-btn{min-height:46px;border-radius:9px;padding:4px 2px}
  .aa-day-btn b{font-size:13px}.aa-day-btn span{font-size:7px}
  .aa-less-btn{margin-top:5px;min-height:42px;padding:7px 8px;font-size:9.5px}
  .aa-drink-estimate{padding:9px 10px;border-radius:11px;gap:8px}
  .aa-drink-estimate>div:first-child b{font-size:10px}
  .aa-drink-estimate>div:first-child span{font-size:9px}
  .aa-estimate-values{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
  .aa-estimate-values strong{padding:6px 4px;border-radius:8px;font-size:11.5px}
  .aa-estimate-values small{font-size:7px}
  .aa-add{margin-top:8px;min-height:44px;border-radius:10px;padding:9px 10px;font-size:10.5px}
  .aa-live{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:10px}
  .aa-live-card{display:block;padding:9px 7px;text-align:center;border-radius:11px}
  .aa-live-card b{font-size:18px}.aa-live-card span{font-size:8px;line-height:1.25;margin-top:2px}
  .aa-ref{margin-top:8px;padding:9px 10px;font-size:9.5px;border-radius:10px}

  /* Bottom navigation: stable and thumb-friendly */
  .aa-footer{
    position:fixed;left:0;right:0;bottom:0;z-index:50;width:100%;
    grid-template-columns:minmax(0,.9fr) minmax(0,1.35fr);gap:8px;
    padding:9px 10px calc(9px + env(safe-area-inset-bottom));
    border-top:1px solid #e5ecec;background:rgba(255,255,255,.98);
    box-shadow:0 -6px 18px rgba(18,39,45,.08);backdrop-filter:blur(10px)
  }
  .aa-btn{min-height:48px;border-radius:11px;padding:10px 9px;font-size:12.5px;white-space:normal;line-height:1.2}

  /* Report: phone-native information hierarchy */
  .aa-report{gap:10px}
  .aa-report-hero{padding:16px;border-radius:15px}
  .aa-report-hero:after{width:160px;height:160px;right:-65px;top:-65px}
  .aa-report-hero h2{font-size:24px;line-height:1.22;margin:8px 0 5px}
  .aa-report-hero p{font-size:11.5px;line-height:1.48}
  .aa-report-meta{font-size:9px;margin-top:10px;gap:3px}
  .aa-status{margin-top:11px;padding:6px 8px;font-size:9.5px;border-radius:10px;width:100%;justify-content:flex-start}
  .aa-report-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .aa-stat{padding:10px;border-radius:12px}
  .aa-stat b{font-size:19px}.aa-stat span{font-size:8.5px;line-height:1.28}
  .aa-panel{padding:12px;border-radius:13px}
  .aa-panel-head{gap:6px;margin-bottom:6px}
  .aa-panel h3{font-size:14px;line-height:1.3}
  .aa-panel p,.aa-panel ul{font-size:11px;line-height:1.55}
  .aa-panel ul{padding-left:17px;margin-top:7px}
  .aa-tag{font-size:8px;padding:4px 6px}
  .aa-risk-scale{margin-top:11px}
  .aa-risk-labels{font-size:7.5px}
  .aa-benchmark{margin-top:9px}.aa-benchmark-head{font-size:8.5px}
  .aa-signal-list{gap:6px;margin-top:8px}
  .aa-signal{padding:9px;border-radius:10px;gap:7px}
  .aa-signal span:first-child{width:20px;height:20px}
  .aa-signal b{font-size:10.5px}.aa-signal small{font-size:9px;line-height:1.35}
  .aa-plan{gap:6px}.aa-plan button{min-height:44px;padding:9px 10px;font-size:10px}
  .aa-doctor-cta{padding:12px;border-radius:13px;gap:9px}
  .aa-doctor-icon{width:38px;height:38px;font-size:20px}
  .aa-doctor-copy h3{font-size:14px;line-height:1.3}
  .aa-doctor-copy p{font-size:10.5px;line-height:1.48}
  .aa-doctor-kicker{font-size:8px}
  .aa-btn-doctor{min-height:46px;font-size:11.5px}
  .aa-report-actions{gap:7px}
  .aa-sources{font-size:8.5px;line-height:1.45}
}

@media(max-width:480px){
  .aa-brand small{display:none}
  .aa-stage{padding-left:10px;padding-right:10px;padding-top:16px}
  .aa-topbar,.aa-progress-wrap{padding-left:10px;padding-right:10px}
  .aa-stage h1{font-size:25px}.aa-stage h2{font-size:21px}
  .aa-intro-card{grid-template-columns:1fr;gap:3px}
  .aa-frequency-picker{grid-template-columns:repeat(4,minmax(0,1fr))}
  .aa-day-btn{min-height:44px}
  .aa-breakdown-wrap{overflow:visible}
  .aa-breakdown{table-layout:auto}
  .aa-breakdown th,.aa-breakdown td{font-size:8.5px;padding:6px 3px}
  .aa-breakdown th{font-size:6.8px}
}

@media(max-width:360px){
  .aa-clear{font-size:9px;padding:7px 5px}
  .aa-logo{width:32px;height:32px}
  .aa-brand strong{font-size:12px}
  .aa-stage h1{font-size:23px}.aa-stage h2{font-size:20px}
  .aa-footer{grid-template-columns:minmax(0,.8fr) minmax(0,1.45fr);padding-left:8px;padding-right:8px}
  .aa-btn{font-size:11.5px;padding-left:6px;padding-right:6px}
  .aa-frequency-picker{grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
  .aa-day-btn{min-height:42px}.aa-day-btn b{font-size:12px}.aa-day-btn span{font-size:6.5px}
  .aa-live-card b{font-size:16px}.aa-live-card span{font-size:7px}
  .aa-report-grid{grid-template-columns:1fr 1fr}
  .aa-stat{padding:9px}.aa-stat b{font-size:17px}
}

/* When printing, never keep the mobile fixed footer. */
@media print{.aa-footer{position:static!important}}

/* =========================================================
   V4 — UI/UX DESIGN SYSTEM
   Healthcare-focused, calm, premium, mobile-first refinement
   ========================================================= */
:root{
  --aa-v4-bg:#f2f7f6;
  --aa-v4-surface:#ffffff;
  --aa-v4-surface-soft:#f7faf9;
  --aa-v4-ink:#10251f;
  --aa-v4-muted:#64756f;
  --aa-v4-line:#dbe6e2;
  --aa-v4-line-strong:#c7d9d3;
  --aa-v4-primary:#0f6b58;
  --aa-v4-primary-strong:#095343;
  --aa-v4-primary-soft:#e9f6f1;
  --aa-v4-primary-soft-2:#f2faf7;
  --aa-v4-blue:#2f6271;
  --aa-v4-amber:#a96b12;
  --aa-v4-danger:#a83b36;
  --aa-v4-shadow:0 24px 70px rgba(20,49,41,.10);
  --aa-v4-shadow-sm:0 8px 24px rgba(20,49,41,.07);
  --aa-v4-radius-xl:28px;
  --aa-v4-radius-lg:20px;
  --aa-v4-radius-md:15px;
}

html{scroll-behavior:smooth}
body{
  color:var(--aa-v4-ink);
  background:
    radial-gradient(circle at 15% 0%, rgba(15,107,88,.07), transparent 30%),
    linear-gradient(180deg,#fbfdfc 0%,var(--aa-v4-bg) 100%);
}
.aa-page{padding:32px 18px 44px}
.aa-app{
  width:min(960px,100%);
  background:rgba(255,255,255,.98);
  border:1px solid rgba(199,217,211,.9);
  border-radius:var(--aa-v4-radius-xl);
  box-shadow:var(--aa-v4-shadow);
}

/* Header */
.aa-topbar{
  padding:22px 28px 14px;
  background:linear-gradient(180deg,#fff 0%,#fbfdfc 100%);
  border-bottom:1px solid rgba(219,230,226,.75);
}
.aa-brand{gap:13px}
.aa-logo{
  width:46px;height:46px;border-radius:15px;
  background:linear-gradient(145deg,var(--aa-v4-primary),#16866e);
  box-shadow:0 8px 18px rgba(15,107,88,.20);
  font-size:25px;
}
.aa-brand strong{font-size:16px;letter-spacing:-.01em;color:var(--aa-v4-ink)}
.aa-brand small{font-size:11px;color:var(--aa-v4-muted)}
.aa-clear{
  min-height:38px;padding:8px 12px;border-radius:11px;
  background:#f2f6f5;color:#5d6f69;border:1px solid transparent;
  transition:background .16s,border-color .16s,color .16s;
}
@media(hover:hover) and (pointer:fine){
  .aa-clear:hover{background:#fff;border-color:var(--aa-v4-line);color:var(--aa-v4-ink)}
}

/* Progress */
.aa-progress-wrap{padding:14px 28px 0;background:#fff}
.aa-progress-meta{font-size:11px;font-weight:700;color:#71817c;margin-bottom:8px}
.aa-progress{height:7px;background:#eaf0ee}
.aa-progress span{background:linear-gradient(90deg,#0f6b58,#2c9c83)}

/* Content */
.aa-stage{padding:36px 40px 34px;min-height:470px}
.aa-stage > :not(.aa-report){max-width:780px;margin-left:auto;margin-right:auto}
.aa-stage h1,.aa-stage h2{color:var(--aa-v4-ink);letter-spacing:-.035em}
.aa-stage h1{font-size:clamp(34px,5vw,52px);max-width:720px}
.aa-stage h2{font-size:clamp(27px,4vw,38px);max-width:760px}
.aa-lead{font-size:17px;line-height:1.65;color:var(--aa-v4-muted);max-width:710px}
.aa-kicker{
  padding:7px 11px;border:1px solid #d4eae2;
  background:var(--aa-v4-primary-soft);color:#185f50;
  font-size:11px;font-weight:850;
}

/* Intro */
.aa-intro-grid{gap:13px;margin-top:27px}
.aa-intro-card{
  min-height:118px;padding:18px;border-radius:17px;
  background:linear-gradient(180deg,#fff,var(--aa-v4-surface-soft));
  border:1px solid var(--aa-v4-line);
  box-shadow:0 4px 14px rgba(31,61,52,.035);
}
.aa-intro-card b{font-size:14px;color:var(--aa-v4-ink)}
.aa-intro-card span{font-size:11.5px;line-height:1.55;color:var(--aa-v4-muted)}
.aa-privacy{
  margin-top:18px;padding:16px 17px;border-radius:16px;
  border:1px solid #cfe8df;background:linear-gradient(180deg,#f8fdfa,#f1f9f6);
}
.aa-privacy b{font-size:13px;color:#244c41}
.aa-privacy p{font-size:11.5px;line-height:1.58}
.aa-consent{display:flex;align-items:flex-start;gap:10px;margin-top:12px;padding-top:12px;border-top:1px dashed #cfe8df;cursor:pointer}
.aa-consent input{width:20px;height:20px;min-width:20px;margin-top:1px;accent-color:var(--aa-v4-primary,#126b59)}
.aa-consent span{font-size:11.5px;line-height:1.55;color:#244c41}

/* Autosave status indicator */
.aa-save-status{
  position:fixed;right:14px;bottom:14px;z-index:40;
  padding:6px 12px;border-radius:999px;font-size:11px;font-weight:600;
  background:#eef6f3;color:#245349;border:1px solid #cfe8df;
  box-shadow:0 2px 8px rgba(0,0,0,.08);opacity:0;pointer-events:none;
  transition:opacity .25s;
}
.aa-save-status[data-state="saving"],.aa-save-status[data-state="saved"],.aa-save-status[data-state="error"]{opacity:1}
.aa-save-status[data-state="error"]{background:#fdecec;color:#a13a3a;border-color:#f3c9c9}

/* Resume-previous-assessment banner (language screen) */
.aa-resume-banner{
  margin-bottom:18px;padding:16px 17px;border-radius:16px;text-align:left;
  border:1px solid #d9e6c9;background:linear-gradient(180deg,#fbfdf6,#f6faee);
}
.aa-resume-banner b{font-size:13px;color:#3c4a24}
.aa-resume-banner p{font-size:11.5px;line-height:1.55;margin-top:4px}
.aa-resume-actions{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.aa-resume-actions .aa-btn{flex:1;min-width:140px}


/* Answer options */
.aa-options{gap:12px;margin-top:24px}
.aa-option{
  position:relative;min-height:72px;padding:17px 18px;
  border:1.5px solid var(--aa-v4-line);border-radius:17px;
  background:#fff;box-shadow:0 3px 12px rgba(26,56,47,.025);
  transition:border-color .16s,background .16s,box-shadow .16s,transform .16s;
}
.aa-option input{width:20px;height:20px;accent-color:var(--aa-v4-primary)}
.aa-option strong{font-size:15px;color:var(--aa-v4-ink);line-height:1.4}
.aa-option small{font-size:11.5px;line-height:1.5;color:var(--aa-v4-muted)}
.aa-option:has(input:checked){
  border-color:var(--aa-v4-primary);background:var(--aa-v4-primary-soft-2);
  box-shadow:0 0 0 4px rgba(15,107,88,.075)
}
@media(hover:hover) and (pointer:fine){
  .aa-option:hover{transform:translateY(-1px);border-color:#a8c6bc;box-shadow:0 7px 20px rgba(26,56,47,.055)}
}

.aa-info-line,.aa-ref,.aa-example,.aa-contact-note{
  border-radius:13px;line-height:1.6
}
.aa-info-line{background:#f4f8f7;color:#566a64}
.aa-ref{background:#fff8e9;border-color:#eeddb8}

/* Inputs */
.aa-grid{gap:15px}
.aa-field label{font-size:12.5px;color:#29463e}
.aa-required{color:#b7433f;font-weight:800}
.aa-optional-mark{color:var(--muted);font-weight:600;font-size:11px}
.aa-field input,.aa-field select{
  min-height:52px;border:1.5px solid var(--aa-v4-line);border-radius:13px;
  background:#fff;padding:12px 14px;color:var(--aa-v4-ink);
  transition:border-color .15s,box-shadow .15s,background .15s;
}
.aa-field input:hover,.aa-field select:hover{border-color:#bfd2cc}
.aa-field input:focus,.aa-field select:focus{
  border-color:var(--aa-v4-primary);box-shadow:0 0 0 4px rgba(15,107,88,.09)
}

/* Drink calculator */
.aa-drink-card{
  border:1px solid var(--aa-v4-line);background:#fff;border-radius:19px;
  padding:16px;box-shadow:0 6px 20px rgba(30,58,50,.045)
}
.aa-drink-question{background:#f7faf9;border-color:#e0eae6;border-radius:15px}
.aa-q-number{background:var(--aa-v4-primary-soft);color:#17604f;border:1px solid #d3e9e1}
.aa-stepper{border-color:#d8e5e1;background:#fff;box-shadow:0 3px 10px rgba(22,52,44,.04)}
.aa-stepper button{background:#f3f7f6;color:var(--aa-v4-primary);font-weight:900}
.aa-stepper button:hover{background:#e8f4f0}
.aa-stepper output{color:var(--aa-v4-ink);font-weight:900}
.aa-day-btn{border-color:#d8e5e1;background:#fff;color:#425851;transition:.14s}
.aa-day-btn[aria-pressed="true"]{border-color:var(--aa-v4-primary);background:var(--aa-v4-primary-soft);color:#155a4b;box-shadow:0 0 0 3px rgba(15,107,88,.07)}
.aa-less-btn{border-color:#d6e3df;background:#f7faf9;color:#4d625b}
.aa-drink-estimate{background:#f4f9f7;border-color:#dbeae5}
.aa-estimate-values strong{background:#fff;border:1px solid #dfebe7;border-radius:11px;color:#193c33}
.aa-add{border-color:#9fc8bb;background:var(--aa-v4-primary-soft-2);color:#185b4d}
.aa-live-card{background:#fff;border-color:var(--aa-v4-line);box-shadow:0 4px 14px rgba(30,58,50,.03)}
.aa-live-card b{color:#163d33}

/* Footer */
.aa-footer{
  padding:17px 28px 25px;border-top:1px solid var(--aa-v4-line);
  background:linear-gradient(180deg,#fff 0%,#fbfdfc 100%)
}
.aa-btn{
  min-height:50px;border-radius:13px;padding:12px 20px;
  font-size:13px;font-weight:850;transition:transform .14s,background .14s,box-shadow .14s
}
.aa-btn-primary{background:linear-gradient(135deg,var(--aa-v4-primary),#15836b);box-shadow:0 8px 18px rgba(15,107,88,.18)}
.aa-btn-primary:hover{background:linear-gradient(135deg,var(--aa-v4-primary-strong),#0f725e);transform:translateY(-1px)}
.aa-btn-light{background:#eef4f2;color:#41574f}
.aa-btn-outline{border-color:var(--aa-v4-line);color:#314b43}

/* Report */
.aa-report{gap:18px;max-width:860px;margin:0 auto}
.aa-report-hero{
  padding:30px;border-radius:24px;
  background:
    radial-gradient(circle at 92% 8%,rgba(255,255,255,.12),transparent 27%),
    linear-gradient(135deg,#173a42 0%,#0f6b58 60%,#248f75 100%);
  box-shadow:0 16px 40px rgba(18,64,52,.16)
}
.aa-report-hero h2{font-size:clamp(31px,5vw,44px)}
.aa-report-hero p{font-size:14.5px;line-height:1.65}
.aa-status{box-shadow:0 4px 14px rgba(0,0,0,.08)}
.aa-report-grid{gap:11px}
.aa-stat{
  min-height:112px;padding:17px;border-radius:17px;background:linear-gradient(180deg,#fff,#f8fbfa);
  border-color:var(--aa-v4-line);box-shadow:0 4px 16px rgba(28,56,48,.035)
}
.aa-stat b{font-size:26px;color:#173d33}
.aa-stat span{font-size:10.5px;line-height:1.5}
.aa-panel{
  border-color:var(--aa-v4-line);border-radius:19px;padding:20px;
  box-shadow:0 5px 18px rgba(31,61,52,.035)
}
.aa-panel h3{font-size:17px;color:#183b32}
.aa-panel p,.aa-panel ul{color:#536660;line-height:1.68}
.aa-tag{background:#f0f6f4;color:#527068;border:1px solid #dae7e3}
.aa-risk-track span{height:10px}
.aa-doctor-cta{border-radius:20px;box-shadow:0 10px 30px rgba(30,65,54,.08)}
.aa-btn-doctor{box-shadow:0 7px 18px rgba(15,107,88,.17)}
.aa-breakdown{border-radius:14px;overflow:hidden;border:1px solid var(--aa-v4-line)}
.aa-breakdown th{background:#f5f9f7;color:#5e706a}
.aa-signal{border-radius:14px;background:#fafcfb;border-color:#e1ebe7}
.aa-signal>span{background:var(--aa-v4-primary-soft);color:#155e4e}
.aa-plan button{border-color:#d9e6e2;border-radius:13px}
.aa-plan button[aria-pressed="true"]{background:var(--aa-v4-primary-soft);border-color:var(--aa-v4-primary);color:#15594b}

/* Better hierarchy on desktop */
@media(min-width:901px){
  .aa-stage:not(:has(.aa-report)){padding-top:42px;padding-bottom:42px}
  .aa-options{max-width:720px}
  .aa-footer{padding-left:40px;padding-right:40px}
}

/* Tablet */
@media(max-width:900px){
  .aa-page{padding:18px 12px 30px}
  .aa-app{border-radius:22px}
  .aa-topbar,.aa-progress-wrap,.aa-footer{padding-left:20px;padding-right:20px}
  .aa-stage{padding:30px 20px 30px}
  .aa-report-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Mobile product experience */
@media(max-width:700px){
  body{background:#fff}
  .aa-page{padding:0;display:block}
  .aa-app{width:100%;border:0;border-radius:0;box-shadow:none;overflow:visible}
  .aa-topbar{
    position:sticky;top:0;z-index:40;padding:10px 12px 8px;
    background:rgba(255,255,255,.96);backdrop-filter:blur(12px);
    border-bottom:1px solid #edf2f0
  }
  .aa-logo{width:35px;height:35px;border-radius:11px;font-size:20px;box-shadow:none}
  .aa-brand{gap:9px}
  .aa-brand strong{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:190px}
  .aa-brand small{font-size:9.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:190px}
  .aa-clear{min-height:34px;padding:7px 8px;font-size:9.5px;background:#f3f7f6}
  .aa-progress-wrap{
    position:sticky;top:54px;z-index:39;padding:7px 12px 9px;
    background:rgba(255,255,255,.97);backdrop-filter:blur(10px);
    border-bottom:1px solid #edf2f0
  }
  .aa-progress-meta{font-size:9.5px;margin-bottom:5px}
  .aa-progress{height:5px}
  .aa-stage{padding:20px 14px 112px;min-height:0}
  .aa-stage h1{font-size:29px;line-height:1.14;margin:10px 0 8px}
  .aa-stage h2{font-size:23px;line-height:1.25;margin:10px 0 8px}
  .aa-lead{font-size:14px;line-height:1.58}
  .aa-kicker{font-size:9.5px;padding:5px 8px}

  .aa-intro-grid{grid-template-columns:1fr;gap:8px;margin-top:16px}
  .aa-intro-card{min-height:0;padding:12px 13px;display:grid;grid-template-columns:110px 1fr;gap:10px;align-items:start;border-radius:13px}
  .aa-intro-card b{font-size:12px}
  .aa-intro-card span{font-size:10px;line-height:1.45;margin:0}
  .aa-privacy{padding:12px;margin-top:12px;border-radius:13px}
  .aa-privacy p{font-size:10px}


  .aa-options{gap:8px;margin-top:16px}
  .aa-option{min-height:62px;padding:13px;border-radius:14px;gap:10px;align-items:center;box-shadow:none}
  .aa-option input{width:20px;height:20px;margin:0}
  .aa-option strong{font-size:13.5px}
  .aa-option small{font-size:10px;margin-top:2px}

  .aa-grid{grid-template-columns:1fr;gap:10px;margin-top:15px}
  .aa-field input,.aa-field select{min-height:52px;border-radius:12px;font-size:16px}

  .aa-drink-card{padding:11px;border-radius:15px;box-shadow:none}
  .aa-drink-question{padding:11px;border-radius:12px}
  .aa-stepper{width:100%;grid-template-columns:52px minmax(60px,1fr) 52px}
  .aa-stepper button,.aa-stepper output{height:52px}
  .aa-frequency-picker{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
  .aa-day-btn{min-height:48px;border-radius:10px}
  .aa-add{width:100%;min-height:48px}
  .aa-live{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .aa-live-card{padding:10px 7px;text-align:center;border-radius:12px;display:block}
  .aa-live-card b{font-size:19px}
  .aa-live-card span{font-size:8.5px;line-height:1.28;margin-top:3px}

  .aa-footer{
    position:fixed;left:0;right:0;bottom:0;z-index:50;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.96);backdrop-filter:blur(14px);
    box-shadow:0 -8px 24px rgba(20,49,41,.08);
    display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.35fr);gap:8px
  }
  .aa-footer>#backBtn{grid-column:1;grid-row:1;width:100%}
  .aa-footer-right{display:contents}
  .aa-footer-right>#nextBtn{grid-column:2;grid-row:1;width:100%}
  .aa-footer-right>#skipBtn:not([hidden]){grid-column:1/-1;grid-row:2;width:100%}
  .aa-btn{min-height:50px;padding:11px 12px;font-size:13px;border-radius:12px}

  .aa-report{gap:12px}
  .aa-report-hero{padding:18px;border-radius:17px;box-shadow:none}
  .aa-report-hero h2{font-size:27px;line-height:1.17;margin:9px 0 6px}
  .aa-report-hero p{font-size:12.5px;line-height:1.55}
  .aa-report-meta{font-size:9px;display:grid;grid-template-columns:1fr;gap:4px}
  .aa-status{font-size:9.5px;padding:7px 9px}
  .aa-report-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
  .aa-stat{min-height:86px;padding:12px;border-radius:13px;box-shadow:none}
  .aa-stat b{font-size:21px}
  .aa-stat span{font-size:8.8px;line-height:1.35}
  .aa-panel{padding:14px;border-radius:15px;box-shadow:none}
  .aa-panel-head{gap:8px;align-items:flex-start}
  .aa-panel h3{font-size:15px}
  .aa-panel p,.aa-panel ul{font-size:12px;line-height:1.62}
  .aa-tag{font-size:8.5px;padding:5px 7px;white-space:normal;text-align:right}
  .aa-risk-labels{font-size:7.5px}
  .aa-doctor-cta{grid-template-columns:1fr;padding:14px;border-radius:15px;box-shadow:none}
  .aa-doctor-copy h3{font-size:16px}
  .aa-doctor-copy p{font-size:11.5px}
  .aa-btn-doctor{width:100%}
  .aa-doctor-actions{display:grid;grid-template-columns:1fr;gap:6px}
  .aa-doctor-actions span{text-align:center}
  .aa-breakdown{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .aa-breakdown table{min-width:480px}
  .aa-signal{padding:10px;border-radius:12px}
  .aa-sources{font-size:8.5px}
}

@media(max-width:390px){
  .aa-brand strong,.aa-brand small{max-width:155px}
  .aa-stage{padding-left:12px;padding-right:12px}
  .aa-stage h1{font-size:27px}
  .aa-stage h2{font-size:22px}
  .aa-intro-card{grid-template-columns:100px 1fr;padding:11px}
  .aa-frequency-picker{grid-template-columns:repeat(3,minmax(0,1fr))}
  .aa-live-card b{font-size:18px}
  .aa-report-grid{grid-template-columns:1fr 1fr}
}

@media(max-width:340px){
  .aa-brand strong,.aa-brand small{max-width:130px}
  .aa-clear{font-size:8.5px;padding:6px}
  .aa-stage h1{font-size:25px}
  .aa-stage h2{font-size:21px}
  .aa-intro-card{grid-template-columns:1fr;gap:4px}
  .aa-frequency-picker{grid-template-columns:repeat(2,minmax(0,1fr))}
  .aa-report-grid{grid-template-columns:1fr}
  .aa-live{grid-template-columns:1fr}
  .aa-live-card{display:grid;grid-template-columns:auto 1fr;text-align:left;align-items:center;gap:10px}
}

/* Accessibility */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .aa-option,.aa-btn,.aa-progress span{transition:none!important}
}

/* V4 interaction state */
.aa-btn:disabled{
  cursor:not-allowed;
  opacity:.48;
  box-shadow:none!important;
  transform:none!important;
}
.aa-btn-primary:disabled{background:#9eb9b2;color:#eef5f3}


/* =========================================================
   V5 — refreshed palette, type system, and the
   report components added from the assessment workbook.
   Declared last so these tokens win the cascade.
   ========================================================= */
:root{
  /* Surfaces & ink — cleaner, lighter ground than V4 */
  --bg:#f5f9f8;            --aa-v4-bg:#f5f9f8;
  --card:#ffffff;          --aa-v4-surface:#ffffff;
  --soft:#f7fbfa;          --aa-v4-surface-soft:#f7fbfa;
  --text:#0f211d;          --aa-v4-ink:#0f211d;
  --muted:#5d716c;         --aa-v4-muted:#5d716c;
  --border:#dde8e4;        --aa-v4-line:#dde8e4;
                           --aa-v4-line-strong:#c6d9d3;
  /* Brand — deeper, cleaner teal */
  --accent:#0e6b62;        --aa-v4-primary:#0e6b62;
  --accent2:#17907f;       --aa-v4-primary-strong:#094f48;
  --accentSoft:#e7f4f1;    --aa-v4-primary-soft:#e7f4f1;
                           --aa-v4-primary-soft-2:#f2faf8;
  --navy:#12414a;          --aa-v4-blue:#2c6070;
  --amber:#b45309;         --aa-v4-amber:#b45309;
  --orange:#c2410c;
  --red:#b91c1c;           --aa-v4-danger:#b91c1c;
  --shadow:0 20px 56px rgba(14,45,39,.09);
  --aa-v4-shadow:0 20px 56px rgba(14,45,39,.09);
  --aa-v4-shadow-sm:0 6px 20px rgba(14,45,39,.06);
  /* Risk semantics — deliberately separate from the brand hue */
  --r1:#15803d; --r1-soft:#e8f6ed;
  --r2:#b45309; --r2-soft:#fdf2e3;
  --r3:#c2410c; --r3-soft:#fdeee6;
  --r4:#b91c1c; --r4-soft:#fdeaea;
}

/* Type — Manrope for headings, Noto Sans for body. */
body,.aa-app,button,input,select,textarea{
  font-family:"Noto Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
}
.aa-stage h1,.aa-stage h2,.aa-panel h3,.aa-doctor-copy h3,.aa-brand strong,
.aa-report-hero h2,.aa-stat b,.aa-live-card b,.aa-btn{
  font-family:Manrope,ui-sans-serif,system-ui,sans-serif;
  font-weight:800;letter-spacing:-.015em;
}
.aa-stage h1{line-height:1.18;text-wrap:balance}
.aa-stage h2{line-height:1.25;text-wrap:balance}
.aa-lead{line-height:1.62}
.aa-kicker{letter-spacing:.07em}

/* --- Score gauge (risk of harm / risk of addiction) --- */
.aa-gauge{margin-top:30px}
.aa-gauge-track{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.aa-gauge-seg{height:9px;border-radius:99px;background:#e4ece9}
.aa-gauge-seg.on.aa-g1{background:var(--r1)}
.aa-gauge-seg.on.aa-g2{background:var(--r2)}
.aa-gauge-seg.on.aa-g3{background:var(--r3)}
.aa-gauge-seg.on.aa-g4{background:var(--r4)}
.aa-gauge-labels{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-top:7px}
.aa-gauge-labels span{font-size:9.5px;line-height:1.3;color:var(--muted);text-align:center;overflow-wrap:anywhere}
.aa-gauge-labels span.on{color:var(--text);font-weight:700}

/* Exact-value marker: a vertical pin at the score's real position on the
   0-max scale, on top of the four risk-band segments, with a small
   floating value pill above it so the precise score is never in doubt. */
.aa-gauge-mark{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--text);border-radius:2px;transform:translateX(-1px)}
.aa-gauge-mark em{
  position:absolute;bottom:calc(100% + 7px);left:50%;transform:translateX(-50%);
  font-style:normal;font-size:10.5px;font-weight:700;letter-spacing:.02em;
  color:#fff;background:var(--text);padding:3px 7px;border-radius:6px;white-space:nowrap;
}
.aa-gauge-mark em::after{
  content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);
  border:4px solid transparent;border-top-color:var(--text);
}

/* --- FRAMES brief intervention --- */
.aa-frames{display:grid;gap:0}
.aa-frame{padding:15px 0;border-top:1px solid var(--border)}
.aa-frame:first-of-type{border-top:0;padding-top:6px}
.aa-frame-label{
  display:inline-block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;
  color:var(--accent);background:var(--accentSoft);padding:4px 10px;border-radius:99px;margin-bottom:9px;
}
.aa-frame p{margin:0 0 8px;font-size:12.5px;line-height:1.68}
.aa-frame p:last-child{margin-bottom:0}
.aa-frame ul{margin:8px 0 0;padding-left:18px}
.aa-frame li{font-size:12.5px;line-height:1.6;margin:5px 0}
.aa-urgent{
  margin:10px 0;padding:11px 13px;border-radius:12px;font-size:11.5px;font-weight:700;letter-spacing:.02em;
  background:var(--r4-soft);color:var(--r4);border:1px solid #f3cfcf;
}
.aa-risk-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:12px}
.aa-risk-cols b{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:6px}
.aa-risk-cols ul{margin:0;padding-left:17px}
.aa-risk-cols li{font-size:11.5px;line-height:1.55;margin:4px 0}

/* --- Binge drinking panel --- */
.aa-binge{border-color:#f0d5bd;background:linear-gradient(180deg,#fffaf4,#fdf5ec)}
.aa-binge .aa-panel-head h3{color:var(--orange)}
.aa-binge p{font-size:12.5px;line-height:1.66}

/* --- Question-screen helpers --- */
.aa-equiv,.aa-derived{
  display:flex;gap:10px;flex-direction:column;margin-top:14px;padding:13px 15px;border-radius:14px;
  background:var(--accentSoft);border:1px solid #cfe6df;
}
.aa-equiv b,.aa-derived b{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--accent)}
.aa-equiv span,.aa-derived span{font-size:12.5px;line-height:1.6;color:var(--text)}

/* Per-drink personalised threshold breakdown (Q3 screen) — one row per
   drink type the user actually selected in the consumption step, not a
   generic fixed serving size. Overrides the general .aa-equiv b{} rule
   above (which styles the box's heading) so the drink names inside each
   row stay normal weight/case instead of turning into tiny caps labels. */
.aa-equiv-personal ul{margin:9px 0 0;padding-left:19px;display:flex;flex-direction:column;gap:7px}
.aa-equiv-personal li{font-size:12.5px;line-height:1.58;color:var(--text)}
.aa-equiv-personal li b{font-size:12.5px;text-transform:none;letter-spacing:normal;color:var(--text);font-weight:700}

/* --- Multiple serving sizes within one drink category --- */
.aa-size-row{display:grid;gap:12px;padding-top:14px;margin-top:14px;border-top:1px dashed var(--border)}
.aa-size-row:first-child{padding-top:0;margin-top:0;border-top:0}
.aa-size-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.aa-size-head span{font-size:12px;font-weight:700;color:var(--text)}
.aa-add-size{
  margin-top:14px;width:100%;min-height:44px;border:1.5px dashed var(--aa-v4-line-strong);border-radius:13px;
  background:#fff;color:var(--accent);font-size:12px;font-weight:700;cursor:pointer;transition:.14s;
}
.aa-add-size:hover{border-color:var(--accent);background:var(--accentSoft)}

/* --- Stat-card label (above the number) and status (below it): same
   bold weight, size and colour on both, so they read as one consistent
   style bracketing the number rather than a bold heading over a faint
   caption. Uses clamp() rather than another breakpoint-specific
   override, since .aa-stat already has several stacked size overrides
   across the file for this pair - this rule intentionally comes after
   all of those so it wins at every width. --- */
.aa-stat-label,.aa-stat span{font-weight:800;font-size:clamp(10.5px,2.6vw,13px);line-height:1.32;color:var(--text)}
.aa-stat-label{display:block;margin-bottom:4px;overflow-wrap:anywhere}

/* --- Risk-tinted stat cards in the report --- */
.aa-stat-r1{border-color:#cbe8d7;background:var(--r1-soft)}
.aa-stat-r1 b{color:var(--r1)}
.aa-stat-r2{border-color:#efdcbe;background:var(--r2-soft)}
.aa-stat-r2 b{color:var(--r2)}
.aa-stat-r3{border-color:#f2d3c1;background:var(--r3-soft)}
.aa-stat-r3 b{color:var(--r3)}
.aa-stat-r4{border-color:#f2c9c9;background:var(--r4-soft)}
.aa-stat-r4 b{color:var(--r4)}

@media(max-width:560px){
  .aa-risk-cols{grid-template-columns:1fr;gap:12px}
  .aa-chart-row{grid-template-columns:minmax(72px,42%) 1fr auto;gap:8px}
  .aa-chart-label{font-size:10.5px}
  .aa-gauge-labels span{font-size:8.5px}
}
@media print{
  .aa-chart-bar i,.aa-limit-bar i,.aa-gauge-seg,.aa-gauge-mark,.aa-gauge-mark em{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .aa-frame{break-inside:avoid}
}


/* =========================================================
   V5.1 — contrast and readability corrections
   ========================================================= */

/* The report hero sits on a dark gradient, but `.aa-stage h1/h2 {color:...}`
   targets the heading directly and so beat the hero's inherited white.
   Restate the light colours here, scoped to the hero. */
.aa-report-hero,
.aa-stage .aa-report-hero h2,
.aa-stage .aa-report-hero h1{color:#fff}
.aa-report-hero .aa-kicker{
  background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.34);
}
.aa-report-hero p,
.aa-report-hero .aa-report-meta span{color:rgba(255,255,255,.9)}
.aa-report-hero .aa-status{background:rgba(255,255,255,.15);color:#fff;border-color:rgba(255,255,255,.3)}

/* Body copy inside report panels was #536660 — too light for long clinical
   text. Bring it up to a proper reading contrast against white. */
.aa-panel p,.aa-panel ul,.aa-panel li{color:#2b3d39}
.aa-panel .aa-micro{color:var(--muted)}
.aa-frame p,.aa-frame li{color:#2b3d39}
.aa-binge p,.aa-binge li{color:#3a2d20}

/* Binge advice as a proper list */
/* NB: do not put display:flex on these lists — flex items are not
   list-items, so the bullet markers disappear. Spacing comes from li margins. */
.aa-binge-list,.aa-limit-list{margin:10px 0 0;padding-left:22px;list-style:disc}
.aa-binge-list li,.aa-limit-list li{font-size:12.5px;line-height:1.62;margin:0 0 9px}
.aa-binge-list li:last-child,.aa-limit-list li:last-child{margin-bottom:0}
.aa-binge-list li::marker{color:var(--orange);font-size:1.05em}
.aa-limit-list li::marker{color:var(--accent);font-size:1.05em}
.aa-limit-list li{color:#2b3d39}

/* Action-plan picker now carries full advice sentences, so it needs to read
   as a selectable checklist rather than a grid of bold headline buttons. */
.aa-plan{grid-template-columns:1fr;gap:9px}
.aa-plan-btn{
  display:grid;grid-template-columns:20px minmax(0,1fr);gap:11px;align-items:start;
  text-align:left;padding:13px 15px;min-height:0;
}
.aa-plan-btn::before{
  content:"";width:19px;height:19px;margin-top:1px;border-radius:6px;
  border:1.5px solid var(--aa-v4-line-strong);background:#fff;transition:.14s;
}
.aa-plan-btn[aria-pressed="true"]::before{
  border-color:var(--accent);background:var(--accent);
  box-shadow:inset 0 0 0 3px #fff;
}
.aa-plan-btn b{
  font-family:"Noto Sans",sans-serif;
  font-weight:500;font-size:12.5px;line-height:1.55;color:#2b3d39;
}
.aa-plan-btn[aria-pressed="true"] b{color:var(--accent);font-weight:600}

/* Slightly calmer heading scale in the report so the panels don't shout */
.aa-panel h3{font-size:16px;letter-spacing:-.01em}
.aa-report-hero h2{font-size:clamp(26px,3.4vw,34px);line-height:1.2}
@media(max-width:560px){
  .aa-report-hero h2{font-size:22px}
  .aa-panel h3{font-size:15px}
  .aa-plan-btn b{font-size:12px}
}

/* Restored-answers notice shown once after an accidental refresh */
.aa-restored{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin-bottom:16px;padding:11px 14px;border-radius:13px;
  background:var(--accentSoft);border:1px solid #cfe6df;
}
.aa-restored span{font-size:12px;line-height:1.5;color:var(--accent);font-weight:600}
.aa-restored button{
  border:1px solid var(--aa-v4-line-strong);background:#fff;color:var(--text);
  font-size:11.5px;font-weight:700;padding:7px 13px;border-radius:9px;cursor:pointer;
}
.aa-restored button:hover{border-color:var(--accent);color:var(--accent)}

/* --- Unified per-drink breakdown (replaces the separate chart + table,
       which repeated the same numbers twice) --- */
.aa-db{display:flex;flex-direction:column;gap:2px;margin-top:14px}
.aa-db-row{padding:12px 0;border-bottom:1px solid var(--border)}
.aa-db-row:first-child{padding-top:4px}
.aa-db-head{display:flex;justify-content:space-between;align-items:baseline;gap:14px}
.aa-db-name{font-size:12.5px;font-weight:600;color:var(--text);min-width:0;overflow-wrap:anywhere}
.aa-db-units{flex:0 0 auto;font-size:10.5px;color:var(--muted);white-space:nowrap}
.aa-db-units b{font-size:16px;color:var(--accent);font-variant-numeric:tabular-nums;margin-right:3px}
.aa-db-bar{height:7px;border-radius:99px;background:#e9f0ee;overflow:hidden;margin:8px 0 7px}
.aa-db-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--accent),var(--accent2))}
.aa-db-meta{display:flex;gap:16px;font-size:10.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.aa-db-total{
  display:flex;justify-content:space-between;align-items:baseline;gap:14px;flex-wrap:wrap;
  margin-top:12px;padding:11px 13px;border-radius:12px;background:var(--accentSoft);
}
.aa-db-total>span:first-child{font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;font-weight:700;color:var(--accent)}
.aa-db-total>span:last-child{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.aa-db-total b{font-size:14px;color:var(--text)}
@media(max-width:560px){
  .aa-db-head{flex-direction:column;gap:3px}
  .aa-db-units{font-size:10px}
  .aa-db-units b{font-size:15px}
  .aa-db-name{font-size:12px}
  .aa-db-meta{gap:12px;font-size:10px}
  .aa-db-total{flex-direction:column;gap:4px}
}
@media print{.aa-db-bar i{-webkit-print-color-adjust:exact;print-color-adjust:exact}.aa-db-row{break-inside:avoid}}

/* --- Weekly limit: intake vs the workbook's gender-specific limit --- */
.aa-limit-figures{display:flex;gap:26px;flex-wrap:wrap;margin-top:14px}
.aa-limit-fig b{
  display:block;font-family:Manrope,sans-serif;font-weight:800;
  font-size:28px;line-height:1.1;color:var(--text);font-variant-numeric:tabular-nums;
}
.aa-limit-fig.over b{color:var(--r4)}
.aa-limit-fig span{display:block;margin-top:3px;font-size:10.5px;color:var(--muted)}
/* Track is scaled to max(intake, limit) so the marker sits at a true position */
.aa-limit-bar{position:relative;height:15px;border-radius:99px;background:#e9f0ee;margin:16px 0 30px}
.aa-limit-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--r1),#3aa06a)}
.aa-limit-bar.over i{background:linear-gradient(90deg,#d97b3a,var(--r4))}
.aa-limit-mark{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--text);opacity:.75;border-radius:2px}
.aa-limit-mark em{
  position:absolute;top:calc(100% + 5px);left:50%;transform:translateX(-50%);
  font-style:normal;font-size:9.5px;font-weight:700;letter-spacing:.03em;
  color:var(--text);white-space:nowrap;
}
.aa-limit-over{color:var(--r4);font-weight:700}
.aa-limit-under{color:var(--r1);font-weight:700}
.aa-tag-over{background:var(--r4-soft);color:var(--r4);border-color:#f0c9c9}
@media(max-width:560px){
  .aa-limit-figures{gap:20px}
  .aa-limit-fig b{font-size:24px}
  .aa-limit-bar{margin-bottom:28px}
}
@media print{.aa-limit-bar i,.aa-limit-mark{-webkit-print-color-adjust:exact;print-color-adjust:exact}}

/* =========================================================
   V5.2 — doctor consultation CTA rebuilt
   The icon was the app's own "+" brand mark reused as a doctor icon,
   which read as a stray logo rather than anything medical. Colors also
   didn't track the risk gauges above it (level 4 showed amber, while
   the addiction gauge for the same result shows red). Rebuilt to use a
   real icon and the same r3/r4 risk tokens as the rest of the report.
   ========================================================= */
.aa-doctor-cta{
  padding:22px 24px;border-radius:18px;border:1px solid var(--r3-soft);
  background:linear-gradient(135deg,#fff8f5 0%,var(--r3-soft) 100%);
  box-shadow:0 10px 30px rgba(194,65,12,.07);
}
.aa-doctor-cta-urgent{
  border-color:#f0c9c9;background:linear-gradient(135deg,#fef6f6 0%,var(--r4-soft) 100%);
  box-shadow:0 10px 30px rgba(185,28,28,.08);
}
.aa-doctor-top{display:flex;align-items:center;gap:14px}
.aa-doctor-icon{
  flex:0 0 auto;width:46px;height:46px;border-radius:13px;display:grid;place-items:center;
  background:#fff;font-size:22px;border:1.5px solid var(--r3);
}
.aa-doctor-cta-urgent .aa-doctor-icon{border-color:var(--r4)}
.aa-doctor-copy{min-width:0}
.aa-doctor-kicker{
  display:inline-block;margin-bottom:3px;color:var(--r3);font-size:10px;font-weight:800;
  letter-spacing:.07em;text-transform:uppercase;
}
.aa-doctor-cta-urgent .aa-doctor-kicker{color:var(--r4)}
.aa-doctor-copy h3{margin:0;font-size:18px;line-height:1.28;color:var(--text)}
.aa-doctor-body{margin:14px 0 0;color:#3d302c;font-size:12.5px;line-height:1.65;max-width:640px}
.aa-doctor-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:16px}
.aa-btn-doctor{
  display:inline-flex;align-items:center;justify-content:center;min-height:46px;
  background:var(--r3);color:#fff;text-decoration:none;box-shadow:0 7px 18px rgba(194,65,12,.18);
}
.aa-btn-doctor:hover{background:#a3390f}
.aa-doctor-cta-urgent .aa-btn-doctor{background:var(--r4);box-shadow:0 7px 18px rgba(185,28,28,.18)}
.aa-doctor-cta-urgent .aa-btn-doctor:hover{background:#9c1717}
.aa-doctor-actions span{color:var(--muted);font-size:10.5px;line-height:1.4}
@media(max-width:560px){
  .aa-doctor-cta{padding:16px;border-radius:15px}
  .aa-doctor-icon{width:40px;height:40px;font-size:19px;border-radius:11px}
  .aa-doctor-copy h3{font-size:15.5px}
  .aa-doctor-body{font-size:11.5px}
  .aa-doctor-actions{align-items:stretch}
  .aa-btn-doctor{width:100%}
  .aa-doctor-actions span{width:100%;text-align:center}
}
@media print{
  .aa-doctor-cta{break-inside:avoid;box-shadow:none;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .aa-btn-doctor{border:1px solid #d9c2b9;background:#fff!important;color:var(--r3)!important}
  .aa-doctor-cta-urgent .aa-btn-doctor{color:var(--r4)!important}
  .aa-doctor-actions span{display:block}
}

/* =========================================================
   V5.3 — "What influenced your score" grouped by what kind of
   signal each item actually is (consumption pattern vs dependence
   indicator vs a reported outcome), instead of a flat list of
   identical grey cards with a meaningless answer-order number.
   Colour escalates with what the signal actually represents:
   pattern = brand teal (expected, base-rate), dependence = amber,
   outcome = red (something concrete already happened).
   ========================================================= */
.aa-sig-group{margin-top:16px}
.aa-sig-group:first-child{margin-top:2px}
.aa-sig-group h4{
  margin:0 0 8px;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;
  display:flex;align-items:center;gap:7px;color:var(--muted);
}
.aa-sig-group h4::before{content:"";width:7px;height:7px;border-radius:50%;flex:0 0 auto}
.aa-sig-pattern h4::before{background:var(--accent)}
.aa-sig-dependence h4::before{background:var(--r2)}
.aa-sig-outcome h4::before{background:var(--r4)}
.aa-sig-pattern h4{color:var(--accent)}
.aa-sig-dependence h4{color:var(--r2)}
.aa-sig-outcome h4{color:var(--r4)}

.aa-signal{
  display:block;padding:11px 14px;border-radius:11px;background:var(--soft);
  border-left:3px solid var(--aa-v4-line-strong);margin-top:6px;
}
.aa-signal:first-of-type{margin-top:0}
.aa-sig-pattern .aa-signal{border-left-color:var(--accent)}
.aa-sig-dependence .aa-signal{border-left-color:var(--r2)}
.aa-sig-outcome .aa-signal{border-left-color:var(--r4);background:var(--r4-soft)}
.aa-signal b{display:block;font-size:12px;color:var(--text)}
.aa-signal small{display:block;color:#4b5b57;font-size:11px;line-height:1.5;margin-top:2px}
.aa-sig-outcome .aa-signal small{color:#5c2c26}

@media(max-width:560px){
  .aa-sig-group{margin-top:13px}
  .aa-signal{padding:10px 12px}
  .aa-signal b{font-size:11.5px}
  .aa-signal small{font-size:10.5px}
}
@media print{.aa-signal{break-inside:avoid}}

/* =========================================================
   V5.4 — Megastar Hospitals brand chrome (site header + footer)
   Colors and fonts sampled from megastarhospitals.com's own logo and
   Elementor theme kit (Roboto/Open Sans, red #E11D1D primary, navy
   #1F3A5F from the logo's "Hospitals & Medical Sciences" band).
   Deliberately scoped to .mg- prefixed selectors and NOT blended into
   the wizard's --accent/--r1..--r4 tokens: the hospital's brand red is
   the same hue as this report's "severe risk" colour, so reusing it as
   a general interactive/brand color throughout the assessment itself
   would blur what red means on the risk gauges. Branding lives in the
   header and footer chrome; the assessment's internal UI keeps its
   own tested colour system untouched.
   ========================================================= */
:root{
  --mg-red:#e11d1d;--mg-red-dark:#b91414;--mg-red-soft:#fdecec;
  --mg-navy:#1f3a5f;--mg-navy-soft:#eef2f7;
}

.mg-site-header{background:#fff;border-bottom:1px solid #ececec;position:relative;z-index:20}
.mg-site-header-inner{
  max-width:1120px;margin:0 auto;padding:14px 20px;
  display:flex;align-items:center;justify-content:space-between;gap:14px 20px;flex-wrap:wrap;
}
/* Above 860px there's room for logo / nav / call-button in one row, with
   the nav centered in the space between the logo and the phone number.
   Below that it falls back to the stacked layout (nav on its own row). */
@media(min-width:860px){
  .mg-site-header-inner{flex-wrap:nowrap}
  .mg-site-nav{order:2;flex:1;flex-basis:auto;border-top:0;padding-top:0;margin-top:0}
  .mg-site-header-actions{order:3}
}
.mg-site-logo{display:block;flex:0 0 auto;line-height:0}
.mg-site-logo img{display:block;height:36px;width:auto}
.mg-site-header-actions{display:flex;align-items:center;gap:16px}
.mg-site-link{
  font-family:Roboto,ui-sans-serif,system-ui,sans-serif;font-size:12.5px;font-weight:700;
  color:var(--mg-navy);text-decoration:none;
}
.mg-site-link:hover{text-decoration:underline}

/* Main nav — Home / About Us / Health Tools (dropdown) / Blog */
.mg-site-nav{
  display:flex;align-items:center;gap:4px;flex-wrap:wrap;
  font-family:Roboto,ui-sans-serif,system-ui,sans-serif;
  order:3;flex-basis:100%;justify-content:center;
  padding-top:6px;margin-top:2px;border-top:1px solid #f1f1f1;
}
.mg-site-nav>a{
  display:inline-flex;align-items:center;
  font-size:15px;font-weight:600;color:var(--mg-navy);text-decoration:none;
  padding:12px 14px;border-radius:10px;transition:background .15s,color .15s;
}
.mg-site-nav>a:hover{color:var(--mg-red);background:var(--mg-red-soft)}

.mg-nav-dropdown{position:relative}
.mg-nav-dropdown summary{
  display:flex;align-items:center;gap:5px;cursor:pointer;list-style:none;
  font-size:15px;font-weight:600;color:var(--mg-navy);
  padding:12px 14px;border-radius:10px;transition:background .15s,color .15s;
}
.mg-nav-dropdown summary::-webkit-details-marker{display:none}
.mg-nav-dropdown summary:hover{color:var(--mg-red);background:var(--mg-red-soft)}
.mg-nav-chevron{transition:transform .15s;flex:0 0 auto}
.mg-nav-dropdown[open] summary{color:var(--mg-red);background:var(--mg-red-soft)}
.mg-nav-dropdown[open] .mg-nav-chevron{transform:rotate(180deg)}
.mg-nav-dropdown-menu{
  position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);
  min-width:200px;background:#fff;border:1px solid #ececec;border-radius:12px;
  box-shadow:0 14px 34px rgba(20,30,45,.12);padding:7px;display:flex;flex-direction:column;
  gap:1px;z-index:30;
}
.mg-nav-dropdown-menu a{
  display:block;padding:9px 12px;border-radius:8px;font-size:12.5px;font-weight:500;
  color:#33404d;text-decoration:none;white-space:nowrap;transition:background .12s,color .12s;
}
.mg-nav-dropdown-menu a:hover{background:var(--mg-red-soft);color:var(--mg-red)}
.mg-call-link{
  display:inline-flex;align-items:center;gap:7px;background:var(--mg-red);color:#fff;
  text-decoration:none;font-family:Roboto,ui-sans-serif,system-ui,sans-serif;font-weight:700;
  font-size:12.5px;padding:9px 15px;border-radius:99px;transition:background .15s;white-space:nowrap;
}
.mg-call-link:hover{background:var(--mg-red-dark)}

.mg-site-footer{background:var(--mg-navy);color:#eef1f5;margin-top:0}
.mg-site-footer-inner{
  max-width:1120px;margin:0 auto;padding:40px 20px 30px;
  display:grid;grid-template-columns:1.4fr 1fr 1.2fr 1fr;gap:30px 26px;
}
.mg-footer-logo-plate{
  display:inline-flex;background:#fff;border-radius:10px;
  padding:9px 14px;margin-bottom:14px;
}
.mg-footer-brand img{display:block;height:30px;width:auto}
.mg-footer-brand p{margin:0;font-family:"Open Sans",ui-sans-serif,system-ui,sans-serif;font-size:12.5px;line-height:1.65;color:#c3ceda;max-width:260px}

/* Quick Links / Health Tools / Contact — same column shape, each with its
   own small-caps label so the footer reads as organised sections rather
   than three unrelated floating lists. */
.mg-footer-col h4{
  margin:0 0 14px;font-family:Roboto,ui-sans-serif,system-ui,sans-serif;
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  color:#8ea0b8;
}
.mg-footer-col{display:flex;flex-direction:column;min-width:0}
.mg-footer-col a{
  display:flex;align-items:center;gap:9px;color:#eef1f5;text-decoration:none;
  font-family:"Open Sans",ui-sans-serif,system-ui,sans-serif;font-size:12.5px;font-weight:600;
  padding:5px 0;
}
.mg-footer-col a svg{flex:0 0 auto;opacity:.8}
.mg-footer-col a:hover{color:#fff;text-decoration:underline}

.mg-site-footer-bottom{border-top:1px solid rgba(255,255,255,.12)}
.mg-site-footer-bottom-inner{
  max-width:1120px;margin:0 auto;padding:16px 20px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.mg-site-footer-bottom p{
  margin:0;font-family:"Open Sans",ui-sans-serif,system-ui,sans-serif;
  font-size:11px;line-height:1.6;color:#94a5b9;
}
.mg-footer-social{display:flex;gap:9px;flex:0 0 auto}
.mg-footer-social a{
  width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.1);color:#fff;transition:background .15s;
}
.mg-footer-social a:hover{background:rgba(255,255,255,.2)}

@media(max-width:640px){
  .mg-site-header-inner{padding:11px 14px 8px}
  .mg-site-logo img{height:28px}
  .mg-site-link{display:none}
  .mg-call-link{padding:8px 12px;font-size:0}
  .mg-call-link svg{width:15px;height:15px}
  .mg-site-nav{gap:14px 16px;padding-top:8px;justify-content:flex-start}
  .mg-site-nav>a,.mg-nav-dropdown summary{font-size:14.5px;padding:10px 11px}
  .mg-nav-dropdown-menu{left:0;transform:none;min-width:190px}
  .mg-site-footer-inner{grid-template-columns:1fr 1fr;gap:26px 20px;padding:28px 18px 20px}
  .mg-footer-brand{grid-column:1/-1}
  .mg-footer-brand p{max-width:none}
  .mg-site-footer-bottom-inner{flex-direction:column;text-align:center;padding:16px 18px}
}
@media(max-width:470px){
  .mg-site-footer-inner{grid-template-columns:1fr}
}

/* =========================================================
   V10 — print / PDF output.

   Declared last on purpose: the palette and layout blocks
   above set body/.aa-app backgrounds AFTER the original
   print block near the top of this file, so those rules were
   winning and the on-screen app chrome (tinted page ground,
   rounded card, borders) was being printed on every sheet.

   The other fix here is pagination. .aa-panel used to carry
   break-inside:avoid, so any panel that could not fit in the
   space left on a page was pushed whole to the next one,
   leaving blank bands up to two thirds of a page. Panels now
   flow and break; only the small units inside them (a stat
   card, a gauge, a table row, a signal, a heading with its
   first lines) are kept whole.
   ========================================================= */
@page{size:A4;margin:14mm 12mm 15mm}

@media print{
  /* --- paper, not app chrome --- */
  html,body{background:#fff!important;margin:0!important;padding:0!important}
  body{font-size:9.5pt;line-height:1.5;color:#16262c}
  .aa-page{display:block!important;padding:0!important;min-height:0!important}
  .aa-app{
    width:100%!important;max-width:none!important;background:#fff!important;
    border:0!important;border-radius:0!important;box-shadow:none!important;overflow:visible!important
  }
  .aa-stage{padding:0!important;min-height:0!important;animation:none!important}

  /* chrome that must never reach paper */
  .aa-topbar,.aa-progress-wrap,.aa-footer,.aa-report-actions,.aa-save-status,
  .mg-site-header,.mg-site-footer,.aa-resume-banner,.aa-restored{display:none!important}

  /* --- masthead on page 1 --- */
  .aa-print-title{
    display:block!important;font-family:Manrope,ui-sans-serif,sans-serif;font-weight:800;
    font-size:9pt!important;letter-spacing:.02em;color:#0f6b58!important;
    margin:0 0 9pt!important;padding-bottom:4pt;border-bottom:1.2pt solid #0f6b58
  }

  /* --- block flow paginates far more predictably than grid --- */
  .aa-report{display:block!important}
  .aa-report>*{margin:0 0 8pt!important}
  .aa-report>*:last-child{margin-bottom:0!important}

  /* --- hero --- */
  .aa-report-hero{
    padding:11pt 13pt!important;border-radius:5pt!important;
    break-inside:avoid;break-after:avoid
  }
  .aa-report-hero:after{display:none!important}
  .aa-report-hero h2{font-size:16pt!important;line-height:1.15!important;margin:5pt 0 3pt!important}
  .aa-report-hero .aa-kicker{padding:2.5pt 7pt!important;font-size:7pt!important}
  .aa-report-meta{gap:2pt 9pt!important;font-size:7.5pt!important;margin-top:5pt!important}

  /* --- KPI cards: four across, they are short enough --- */
  .aa-report-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:5pt!important;break-inside:avoid}
  .aa-stat{
    min-height:0!important;padding:7pt!important;border-radius:4pt!important;
    box-shadow:none!important;break-inside:avoid
  }
  .aa-stat b{font-size:14pt!important}
  .aa-stat-label,.aa-stat span{font-size:7pt!important;line-height:1.3!important}

  /* --- panels flow across pages, headings never left stranded --- */
  .aa-panel{
    break-inside:auto!important;
    padding:9pt 11pt!important;border-radius:4pt!important;
    box-shadow:none!important;border:.75pt solid #d8e3e0!important
  }
  .aa-panel-head{margin-bottom:5pt!important;break-after:avoid}
  .aa-panel h3{font-size:11pt!important;break-after:avoid}
  .aa-panel p,.aa-panel li{font-size:9.5pt!important;line-height:1.5!important;orphans:3;widows:3}
  .aa-tag{font-size:6.5pt!important;padding:2.5pt 5pt!important}

  /* small units stay whole */
  .aa-gauge,.aa-signal,.aa-db-row,.aa-db-total,.aa-frame,.aa-limit-figures,
  .aa-limit-bar,.aa-stat,.aa-plan-btn,.aa-sig-group>*{break-inside:avoid}
  .aa-gauge,.aa-limit-bar{break-before:avoid}
  .aa-binge-list li,.aa-limit-list li{break-inside:avoid;margin-bottom:3pt}

  /* --- gauges and bars --- */
  .aa-gauge{margin-top:16pt!important}
  .aa-gauge-labels span{font-size:6.5pt!important}
  .aa-gauge-mark em{font-size:7pt!important;padding:1.5pt 4pt!important}
  .aa-limit-bar{margin:10pt 0 18pt!important}
  .aa-limit-fig b{font-size:15pt!important}

  /* --- doctor CTA: a button is meaningless on paper, so print the link --- */
  .aa-doctor-cta{padding:9pt 11pt!important;border-radius:4pt!important;break-inside:avoid}
  .aa-doctor-copy h3{font-size:12pt!important}
  .aa-btn-doctor{min-height:0!important;padding:5pt 8pt!important;font-size:9pt!important}
  .aa-btn-doctor:after{content:" (" attr(href) ")";font-weight:600;font-size:7.5pt;word-break:break-all}

  /* --- action-plan checkboxes read as a checklist on paper --- */
  .aa-plan{grid-template-columns:1fr 1fr!important;gap:5pt!important}
  .aa-plan-btn{padding:7pt 9pt!important;border-radius:4pt!important;box-shadow:none!important}

  /* --- breakdown --- */
  .aa-db-row{margin-bottom:5pt!important}
  .aa-db-name,.aa-db-units,.aa-db-meta{font-size:8pt!important}

  /* --- signals --- */
  .aa-signal{padding:6pt 8pt!important;border-radius:4pt!important;margin-bottom:4pt!important}
  .aa-signal b{font-size:9pt!important}
  .aa-signal small{font-size:8pt!important}

  /* --- sources footer --- */
  .aa-sources{font-size:7pt!important;line-height:1.45!important;break-inside:avoid;color:#5c6f76!important}
  .aa-sources a{color:#5c6f76!important;text-decoration:underline}

  /* keep the risk colours faithful on paper */
  .aa-report-hero,.aa-stat,.aa-doctor-cta,.aa-gauge-seg,.aa-gauge-mark,.aa-gauge-mark em,
  .aa-limit-bar,.aa-limit-bar i,.aa-limit-mark,.aa-db-bar i,.aa-tag,.aa-frame-label,.aa-kicker{
    -webkit-print-color-adjust:exact;print-color-adjust:exact
  }
}

/* The hidden attribute must always win: several late layout blocks set
   display on .aa-footer, which otherwise re-showed the Back/Continue bar
   under the finished report on narrow (or zoomed) viewports. */
[hidden]{display:none!important}

/* =========================================================
   V10.1 — hospital contact details, printed at the end of
   the report so a saved or handed-over PDF always carries a
   way to reach the hospital. Screen already has the site
   footer, so this is print-only.

   Letterhead rule, identity line, then the details as two
   aligned label/value columns. Kept near 120pt tall so it
   fits in the tail of a short report rather than starting a
   near-empty extra page — a non-drinker report stays one
   sheet.

   Text, hairlines and one <img> only, no background fills,
   so it looks the same whether or not the person leaves
   Chrome's "Background graphics" box ticked (it is off by
   default, which is how most of these PDFs get saved).
   ========================================================= */
.aa-print-contact{display:none}

@media print{
  .aa-print-contact{
    display:block;break-inside:avoid;
    margin-top:7pt;padding-top:7pt;border-top:1.5pt solid #0f6b58
  }

  /* --- identity line --- */
  .aa-print-contact-brand{display:flex;align-items:center;gap:10pt;margin-bottom:5pt}
  .aa-print-contact-brand img{width:108pt;height:auto;flex:0 0 auto}
  .aa-print-contact-brand b{
    font-family:Manrope,ui-sans-serif,sans-serif;font-weight:800;
    font-size:12pt;line-height:1.2;letter-spacing:-.01em;color:#123c33
  }

  /* --- details as two aligned records --- */
  .aa-print-contact-cols{display:grid;grid-template-columns:1fr 1fr;gap:11pt}
  .aa-print-contact-list{
    display:grid;grid-template-columns:56pt 1fr;gap:4.5pt 8pt;margin:0;align-content:start
  }
  .aa-print-contact-list dt{
    margin:0;padding-top:.5pt;font-size:8pt;font-weight:700;line-height:1.35;color:#6d8088;white-space:nowrap
  }
  .aa-print-contact-list dd{
    margin:0;font-size:9pt;line-height:1.3;color:#16262c;word-break:break-word
  }

  .aa-print-contact-note{
    margin:7pt 0 0;padding-top:5pt;border-top:.6pt solid #dde6e3;
    font-size:8pt;line-height:1.45;color:#5b6f77
  }
}

/* =========================================================
   V11 — smoking tool additions.

   The smoking screening reuses this whole stylesheet as the
   design system; only what it genuinely adds lives here. The
   dependence scale has five bands where the alcohol risk
   scales have four, so the gauge gets a five-column variant
   and a fifth colour stop beyond --r4.
   ========================================================= */
:root{--r5:#8f2b26}

.sm-gauge-5 .aa-gauge-track,
.sm-gauge-5 .aa-gauge-labels{grid-template-columns:repeat(5,1fr)}
.aa-gauge-seg.on.aa-g5{background:var(--r5)}
.sm-gauge-5 .aa-gauge-labels span{font-size:9px}

/* sub-heading for a screen that asks two related questions at once */
.sm-subq{
  margin:22px 0 10px;font-size:14px;font-weight:800;color:var(--text);
  letter-spacing:-.01em
}
.sm-subq:first-of-type{margin-top:18px}

/* the banded feedback paragraph under the dependence gauge */
.sm-band-note{
  margin-top:16px;padding-top:14px;border-top:1px solid #e8efec
}
.sm-band-note p{margin:0 0 8px}
.sm-band-note p:last-child{margin-bottom:0}

/* medical-assistance line closing the "if you need more help" panel */
.sm-medical{
  margin-top:12px;padding:11px 13px;border-radius:12px;
  background:var(--soft);border:1px solid var(--border)
}
.sm-medical b{display:block;font-size:12px;margin-bottom:4px;color:var(--text)}
.sm-medical p{margin:0;font-size:12.5px;line-height:1.55;color:#50626b}

@media(max-width:560px){
  .sm-gauge-5 .aa-gauge-labels span{font-size:8px}
  .sm-subq{margin:18px 0 8px;font-size:13px}
}
@media print{
  .sm-gauge-5 .aa-gauge-labels span{font-size:6pt!important}
  .sm-subq{font-size:10pt!important}
  .sm-band-note{margin-top:8pt!important;padding-top:7pt!important}
  .sm-medical{
    padding:7pt 9pt!important;border-radius:4pt!important;break-inside:avoid;
    -webkit-print-color-adjust:exact;print-color-adjust:exact
  }
}

/* The action-plan button is a two-column grid: checkbox, then text. The alcohol
   tool puts only a title there, so nothing ever placed a description, and the
   smoking tool's <small> fell into the 20px checkbox column and wrapped one
   word per line. Put it in the text column, under the title. */
.aa-plan-btn{row-gap:0}   /* the 11px gap is for the checkbox column, not between title and description */
.aa-plan-btn small{
  grid-column:2;display:block;margin-top:3px;
  font-size:11.5px;line-height:1.5;color:var(--muted)
}
.aa-plan-btn[aria-pressed="true"] small{color:#3d6a5d}

@media(max-width:560px){
  .aa-plan-btn small{font-size:11px;line-height:1.5}
}
@media print{
  .aa-plan-btn small{font-size:7.5pt!important;line-height:1.4!important;margin-top:2pt!important}
}

/* --- Chance of stopping: four labelled factors, each marked as working for
   or against the person, instead of one run of prose. Reuses the FRAMES
   block from the alcohol report so both tools look the same. --- */
.sm-factor-watch .aa-frame-label{color:var(--r3);background:var(--r3-soft)}
.sm-factor .aa-frame-label::before{content:"✓ ";font-weight:800}
.sm-factor-watch .aa-frame-label::before{content:"! "}

.sm-steps{margin:10px 0 0;padding-left:22px;list-style:decimal}
.sm-steps li{margin:6px 0;padding-left:2px}

/* The smoking report carries more prose than the alcohol one, so its body
   text is set a notch larger. Scoped to this tool to leave alcohol alone. */
#smokingAssessment .aa-panel p,
#smokingAssessment .aa-panel li,
#smokingAssessment .aa-frame p,
#smokingAssessment .aa-frame li,
#smokingAssessment .sm-steps li{font-size:14px;line-height:1.72}
#smokingAssessment .aa-frame p{margin:0 0 10px}
#smokingAssessment .sm-band-note p{font-size:14px;line-height:1.72}
#smokingAssessment .aa-signal small{font-size:12.5px;line-height:1.6}
#smokingAssessment .aa-sources{font-size:9px}

@media(max-width:560px){
  #smokingAssessment .aa-panel p,
  #smokingAssessment .aa-panel li,
  #smokingAssessment .aa-frame p,
  #smokingAssessment .aa-frame li,
  #smokingAssessment .sm-steps li{font-size:13.5px;line-height:1.68}
}
@media print{
  .sm-factor{break-inside:avoid}
  .sm-steps{margin:5pt 0 0;padding-left:14pt}
  .sm-steps li{margin:2.5pt 0}
  #smokingAssessment .aa-panel p,
  #smokingAssessment .aa-panel li,
  #smokingAssessment .aa-frame p,
  #smokingAssessment .aa-frame li,
  #smokingAssessment .sm-steps li,
  #smokingAssessment .sm-band-note p{font-size:9.5pt!important;line-height:1.5!important}
  #smokingAssessment .aa-sources{font-size:7pt!important}
}

/* =========================================================
   V12 — responsive shell.

   Authoritative layer for the wizard chrome and the answer
   controls. It is deliberately last in the file: the blocks
   above are five generations of responsive patches on the
   same selectors (.aa-stage alone is touched 45 times across
   14 breakpoints), and every layout bug fixed this session
   came from one of them beating another. Rather than add a
   sixth set of skirmishes, this layer states the final
   result for the things it owns.

   Owns: .aa-phase*, the site header on phones, .aa-options
   layout, .aa-topbar, the sticky action bar, and the footer's
   phone treatment. Everything else is left alone.
   ========================================================= */

/* --- progress, as named phases -------------------------- */
.aa-phase{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  margin-bottom:8px
}
.aa-phase-pill{
  display:inline-flex;align-items:center;gap:5px;flex:0 0 auto;
  padding:4px 10px;border-radius:999px;
  background:var(--accentSoft);color:#14584a;
  font-size:10.5px;font-weight:850;letter-spacing:.02em;white-space:nowrap
}
.aa-phase-name{
  flex:1 1 auto;min-width:0;
  font-size:11.5px;font-weight:700;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
.aa-phase-pct{flex:0 0 auto;font-size:11px;font-weight:800;color:var(--accent)}

.aa-phase-bar{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px}
.aa-phase-bar span{
  position:relative;height:6px;border-radius:999px;background:#e6eeec;overflow:hidden
}
.aa-phase-bar span.on{background:var(--accent)}
.aa-phase-bar span.now::after{
  content:"";position:absolute;inset:0 auto 0 0;width:var(--fill,0%);
  background:var(--accent);border-radius:999px;transition:width .25s ease
}

/* --- answer options ------------------------------------- */
/* Short labels sit two-up instead of one 70px row each: the
   "who around you smokes" screen was 490px of scrolling for
   seven one-word answers. The engine adds -compact only when
   every label on the screen is short enough to pair. */
.aa-options-compact{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.aa-options-compact .aa-option{padding:13px 12px}
.aa-options-compact .aa-option small{display:none}

/* --- sub-question grouping ------------------------------ */
/* A screen that asks more than one thing gets a card per
   question instead of bold text run together. */
.aa-subq{
  margin-top:16px;padding:15px 15px 16px;
  border:1px solid var(--border);border-radius:16px;background:#fff
}
.aa-subq:first-of-type{margin-top:18px}
.aa-subq-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:2px}
.aa-subq-num{
  flex:0 0 auto;width:22px;height:22px;border-radius:8px;
  display:grid;place-items:center;margin-top:1px;
  background:var(--accentSoft);color:#14584a;font-size:11px;font-weight:850
}
.aa-subq-title{font-size:14px;font-weight:800;line-height:1.4;color:var(--text)}
.aa-subq .aa-options{margin-top:12px}

/* ============ phones ==================================== */
/* The menu toggle exists only on phones; offscreen rather than hidden so
   it can still be reached with a keyboard. */
.mg-nav-check{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.mg-nav-toggle{display:none}

@media(max-width:640px){
  /* the site bar collapses to a menu button + logo + call */
  .mg-site-header-inner{
    display:grid!important;
    grid-template-columns:auto 1fr auto;
    align-items:center;gap:10px;
    padding:8px 14px!important
  }
  .mg-nav-toggle{
    grid-column:1;grid-row:1;cursor:pointer;
    width:38px;height:38px;border-radius:11px;border:1px solid var(--border);
    background:#fff;display:grid;place-items:center
  }
  .mg-nav-toggle-bars{display:grid;gap:3.5px}
  .mg-nav-toggle-bars i{display:block;width:16px;height:2px;border-radius:2px;background:#2b3d39}
  .mg-nav-check:checked ~ .mg-nav-toggle{background:var(--accentSoft);border-color:#bcd9d0}
  .mg-nav-check:focus-visible ~ .mg-nav-toggle{outline:3px solid rgba(18,107,89,.25);outline-offset:2px}

  .mg-site-logo{grid-column:2;grid-row:1;justify-self:start}
  .mg-site-logo img{width:132px;height:auto}
  .mg-site-header-actions{grid-column:3;grid-row:1}

  /* the links themselves appear only once the menu is opened */
  .mg-site-nav{
    grid-column:1/-1;grid-row:2;
    display:none;flex-direction:column;align-items:stretch;gap:0;
    margin-top:8px;padding-top:6px;border-top:1px solid var(--border)
  }
  .mg-nav-check:checked ~ .mg-site-nav{display:flex}
  .mg-site-nav>a,.mg-nav-dropdown>summary{padding:11px 2px;font-size:14px}
  .mg-nav-dropdown-menu{position:static;box-shadow:none;border:0;padding:0 0 0 12px;min-width:0}

  /* tool chrome, tightened */
  .aa-page{padding:0!important}
  .aa-app{border-radius:0!important;border-left:0!important;border-right:0!important}
  .aa-topbar{padding:12px 16px 8px!important;gap:10px;align-items:flex-start}
  /* the product name was being ellipsised to "Smoking Health Asse..." */
  .aa-brand{min-width:0}
  .aa-brand strong{
    font-size:13.5px;line-height:1.3;
    white-space:normal;overflow:visible;text-overflow:clip
  }
  .aa-brand small{display:none}
  .aa-clear{flex:0 0 auto;font-size:11px;padding:7px 9px}
  .aa-progress-wrap{padding:0 16px 10px!important}
  .aa-stage{padding:16px 16px 20px!important;min-height:0!important}
  .aa-phase-name{font-size:11px}

  .aa-stage h1{font-size:25px!important;line-height:1.2!important}
  .aa-stage h2{font-size:21px!important;line-height:1.25!important}
  .aa-lead{font-size:14px!important;line-height:1.6!important}

  .aa-option{padding:14px 13px}
  .aa-option strong{font-size:14px}
  .aa-options-compact{gap:8px}

  /* the intro cards squeezed a 110px label column against the text;
     at this width they read better stacked */
  .aa-intro-card{grid-template-columns:1fr!important;gap:3px!important;padding:13px 14px!important}
  .aa-intro-card b{font-size:13px}
  .aa-intro-card span{font-size:11.5px;line-height:1.5}

  /* .aa-page carries min-height:100vh, which left a band of empty page
     under the footer once the action bar became sticky */
  .aa-page{min-height:0!important}

  /* the footer was taller than the tool on most screens */
  .mg-site-footer-inner{grid-template-columns:1fr 1fr!important;gap:18px 14px!important;padding:24px 16px!important}
  .mg-footer-brand{grid-column:1/-1}
  .mg-footer-col h4{font-size:11px}
  .mg-footer-col a{font-size:12.5px;padding:3px 0}
  .mg-site-footer-bottom-inner{padding:14px 16px!important;gap:10px}

  /* the action bar is the primary control: give it the width */
  .aa-footer{padding:10px 12px calc(10px + env(safe-area-inset-bottom))!important}
  .aa-footer .aa-btn{min-height:50px;font-size:15px}
}

@media(max-width:380px){
  .aa-options-compact{grid-template-columns:1fr}
  .mg-site-footer-inner{grid-template-columns:1fr!important}
}

/* ============ desktop =================================== */
@media(min-width:1024px){
  /* the wizard was a phone column stretched across a wide
     screen, with every answer marooned against the left edge.
     Hold the reading column and centre it in the card. */
  .aa-stage{padding:34px 40px 30px}
  .aa-stage>.aa-kicker,
  .aa-stage>h1,.aa-stage>h2,.aa-stage>.aa-lead,
  .aa-stage>.aa-options,.aa-stage>.aa-grid,
  .aa-stage>.aa-info-line,.aa-stage>.aa-subq,
  .aa-stage>.aa-privacy,.aa-stage>.aa-intro-grid,
  .aa-stage>.aa-error{max-width:720px;margin-left:auto;margin-right:auto}
  .aa-stage>h1,.aa-stage>h2{margin-top:14px}
  .aa-options-compact{grid-template-columns:1fr 1fr}
  .aa-progress-wrap{padding-left:40px;padding-right:40px}
  .aa-topbar{padding-left:40px;padding-right:40px}
  .aa-footer{padding-left:40px;padding-right:40px}
}
@media print{
  .aa-phase,.aa-phase-bar,.mg-nav-toggle{display:none!important}
}

/* --- number entry with nudge buttons -------------------- */
.aa-stepper{
  display:grid;grid-template-columns:48px minmax(0,1fr) 48px;align-items:stretch;gap:8px
}
.aa-stepper input{
  text-align:center;font-weight:800;font-size:17px;
  -moz-appearance:textfield
}
.aa-stepper input::-webkit-outer-spin-button,
.aa-stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.aa-step-btn{
  border:1.5px solid var(--border);background:#fff;border-radius:12px;
  font-size:20px;line-height:1;font-weight:700;color:#2b3d39;cursor:pointer;
  min-height:48px;display:grid;place-items:center;transition:.14s;user-select:none
}
.aa-step-btn:active{transform:scale(.96)}
@media(hover:hover) and (pointer:fine){
  .aa-step-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accentSoft)}
}
@media(max-width:640px){
  .aa-stepper{grid-template-columns:52px minmax(0,1fr) 52px}
  .aa-step-btn{min-height:52px;font-size:22px}
  .aa-stepper input{font-size:18px}
}
@media print{.aa-step-btn{display:none}.aa-stepper{grid-template-columns:1fr}}

/* --- collapsible footer groups -------------------------- */
/* Expanded, the footer ran taller than the assessment above it on a phone.
   Each group collapses there and stays open on desktop. Checkbox rather
   than <details>, which cannot be forced open again by CSS once closed. */
.mg-footer-check{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.mg-footer-head{display:block}
.mg-footer-chevron{display:none}
.mg-footer-links{display:grid}

@media(max-width:640px){
  .mg-site-footer-inner{grid-template-columns:1fr!important;gap:0!important;padding:20px 16px 8px!important}
  .mg-footer-brand{margin-bottom:14px}

  .mg-footer-col{border-top:1px solid rgba(255,255,255,.12)}
  .mg-footer-head{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:13px 0;cursor:pointer;-webkit-tap-highlight-color:transparent
  }
  .mg-footer-head h4{margin:0!important}
  .mg-footer-chevron{
    display:block;flex:0 0 auto;color:rgba(255,255,255,.55);
    transition:transform .18s ease
  }
  .mg-footer-check:checked ~ .mg-footer-head .mg-footer-chevron{transform:rotate(180deg)}
  .mg-footer-check:focus-visible ~ .mg-footer-head{outline:2px solid rgba(255,255,255,.4);outline-offset:3px}

  .mg-footer-links{display:none;padding:0 0 12px}
  .mg-footer-check:checked ~ .mg-footer-links{display:grid;gap:2px}
}

@media(max-width:640px){
  /* The action bar is fixed on phones, so the page needs room beneath it or
     it sits on top of the last footer line. And with a short assessment the
     page used to end above the fold, leaving a band of white under the navy
     footer; pushing the footer down puts that slack inside the white card
     above it, where it does not read as a gap. */
  body{min-height:100dvh;display:flex;flex-direction:column;padding-bottom:78px}
  .mg-site-footer{margin-top:auto}
}

/* =========================================================
   V14 — plain document pages (terms and the like).
   ========================================================= */
.mg-doc{
  width:min(760px,100%);margin:0 auto;
  background:var(--card);border:1px solid var(--border);border-radius:22px;
  padding:34px 40px 30px;box-shadow:var(--shadow)
}
.mg-doc-head{padding-bottom:18px;margin-bottom:6px;border-bottom:1px solid var(--border)}
.mg-doc-head h1{
  font-family:Manrope,ui-sans-serif,sans-serif;font-weight:800;
  font-size:clamp(28px,4.6vw,38px);line-height:1.15;letter-spacing:-.03em;
  margin:12px 0 6px;color:var(--text)
}
.mg-doc-meta{margin:0;font-size:12.5px;color:var(--muted)}

.mg-doc-section{margin-top:26px}
.mg-doc-section h2{
  font-family:Manrope,ui-sans-serif,sans-serif;font-weight:800;
  font-size:18px;letter-spacing:-.01em;margin:0 0 12px;color:#123c33
}
.mg-doc-section p{
  margin:0 0 14px;font-size:14.5px;line-height:1.72;color:#3b4d53;
  max-width:68ch
}
.mg-doc-section p:last-child{margin-bottom:0}

/* the emergency paragraph should not read as one more line of small print */
.mg-doc-urgent{
  padding:14px 16px;border-radius:14px;
  background:var(--r4-soft);border:1px solid #f0c9c9;
  color:#8c2b26!important;font-weight:600
}

.mg-doc-contact{padding-top:22px;border-top:1px solid var(--border)}
.mg-doc-contact a{color:var(--accent);font-weight:700}
.mg-doc-back{margin:26px 0 0;font-size:13.5px}
.mg-doc-back a{color:var(--accent);font-weight:700;text-decoration:none}
.mg-doc-back a:hover{text-decoration:underline}

@media(max-width:640px){
  .mg-doc{
    border-radius:0;border-left:0;border-right:0;box-shadow:none;
    padding:24px 18px 26px
  }
  .mg-doc-section{margin-top:22px}
  .mg-doc-section p{font-size:14px;line-height:1.68}
  .mg-doc-section h2{font-size:16.5px}
}
@media print{
  .mg-doc{border:0;box-shadow:none;padding:0}
  .mg-doc-back{display:none}
}

/* The report disclaimer is several paragraphs now. Default <p> margins on
   three of them cost about 28pt of a page, which was enough to push the
   contact block onto a sheet of its own. Tighten the gaps, not the type:
   this is legal text and should stay as readable as it was. */
.aa-sources p{margin:0 0 6px}
.aa-sources p:last-child{margin-bottom:0}
@media print{
  .aa-sources p{margin:0 0 3pt!important}
  .aa-sources p:last-child{margin-bottom:0!important}
}

/* =========================================================
   V15 — save retries and the printed action plan.
   ========================================================= */

/* Saves now retry on network and server errors, so "retrying" is a real
   state. It is a warning, not a failure, and reads as one. */
.aa-save-status[data-state="retrying"]{opacity:1;background:#fff6e5;color:#8a5a00;border-color:#f1d9a6}

/* The plan asks people to pick the actions they want included when they
   print, so paper carries only the chosen ones, and nothing at all when
   none were chosen. The picking instruction means nothing on paper. The
   tick is a background fill, which Chrome drops unless told to keep it. */
@media print{
  .aa-plan-btn[aria-pressed="false"]{display:none!important}
  .aa-plan-panel:not(:has(.aa-plan-btn[aria-pressed="true"])){display:none!important}
  .aa-plan-panel>p,.aa-plan-panel .aa-tag{display:none!important}
  .aa-plan-btn::before{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* =========================================================
   V16 — diabetes camp questionnaire (/diabetes).

   Reuses the wizard and report components above; only what
   this tool adds lives here, prefixed dm-.
   ========================================================= */

/* the camp this questionnaire belongs to */
.dm-camp-card{
  margin-top:18px;padding:14px 16px;border-radius:14px;
  border:1px solid var(--border);background:var(--soft)
}
.dm-camp-card b{display:block;font-family:Manrope,ui-sans-serif,sans-serif;font-size:15px;color:var(--text)}
.dm-camp-card>span{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
.dm-camp-card dl{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:10px 0 0}
.dm-camp-card dt{font-size:12px;font-weight:700;color:var(--muted)}
.dm-camp-card dd{margin:0;font-size:13px;color:var(--text)}
.dm-consent{margin-top:20px}

/* medicines: the paper's five-row table as editable rows */
.dm-meds{margin-top:16px;display:grid;gap:12px}
.dm-med-row{
  display:grid;grid-template-columns:28px minmax(0,1fr) 190px auto;gap:10px;align-items:end;
  padding:12px;border:1px solid var(--border);border-radius:14px;background:var(--card)
}
.dm-med-num{
  align-self:center;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  font-size:12px;font-weight:800;color:var(--accent);background:var(--accentSoft,#e8f4f1)
}
.dm-med-row .aa-field{margin:0}
.dm-med-row select{width:100%}
.dm-med-remove{
  align-self:center;border:0;background:none;color:var(--r4);font-size:12.5px;font-weight:700;cursor:pointer;padding:8px 4px
}
@media(max-width:640px){
  .dm-med-row{grid-template-columns:28px minmax(0,1fr)}
  .dm-med-row .aa-field{grid-column:2}
  .dm-med-remove{grid-column:2;justify-self:start;padding:0}
}

/* registration number: the one thing to bring to the camp */
.dm-regno{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;
  padding:14px 18px;border-radius:16px;border:2px dashed var(--accent);background:var(--card)
}
.dm-regno-label{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);flex-basis:100%}
.dm-regno-value{font-family:Manrope,ui-sans-serif,sans-serif;font-size:30px;font-weight:800;letter-spacing:.04em;color:var(--accent)}
.dm-regno-pending{font-size:18px;color:var(--muted)}
.dm-regno>span:last-child:not(.dm-regno-label){font-size:12.5px;color:var(--muted)}
.dm-regno-failed{font-size:13px;color:var(--r3);font-weight:600}

.aa-report-grid.dm-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.aa-report-grid.dm-grid-1{grid-template-columns:minmax(0,1fr)}

/* IDRS gauge on a true 0-100 scale: low 0-29, moderate 30-59, high 60-100.
   The score bubble sits above the track, so the gauge needs more headroom
   than the others or the bubble covers the sentence before it. */
.dm-gauge{margin-top:40px}
.dm-gauge .aa-gauge-track,.dm-gauge .aa-gauge-labels{grid-template-columns:30fr 30fr 40fr}
.dm-gauge-range{
  position:absolute;top:-6px;bottom:-6px;border:2px dashed var(--text);border-radius:8px;opacity:.55;pointer-events:none
}
.dm-gauge .aa-gauge-labels small{font-weight:500}
.dm-parts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:18px 0 0}
.dm-parts div{padding:10px;border-radius:12px;background:var(--soft);border:1px solid var(--border)}
.dm-parts dt{font-size:11px;font-weight:700;color:var(--muted)}
.dm-parts dd{margin:3px 0 0;font-size:13px;font-weight:700;color:var(--text)}
.dm-note{font-size:12.5px!important;color:var(--muted)!important}

.dm-camp-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:14px}
.dm-camp-cols b{display:block;font-size:13px;margin-bottom:4px}

.dm-med-table{width:100%;border-collapse:collapse;font-size:13px}
.dm-med-table th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);padding:6px 8px;border-bottom:1px solid var(--border)}
.dm-med-table td{padding:8px;border-bottom:1px solid var(--border)}

.dm-answer-list{display:grid;gap:6px;margin:0}
.dm-answer-list div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;padding:7px 0;border-bottom:1px solid var(--border)}
.dm-answer-list dt{font-size:12.5px;color:var(--muted)}
.dm-answer-list dd{margin:0;font-size:12.5px;font-weight:700;color:var(--text);text-align:right;max-width:46ch}

@media(max-width:560px){
  .aa-report-grid.dm-grid-3{grid-template-columns:1fr}
  .dm-parts{grid-template-columns:1fr 1fr}
  .dm-camp-cols{grid-template-columns:1fr}
  .dm-answer-list div{grid-template-columns:1fr}
  .dm-answer-list dd{text-align:left}
}
@media print{
  .dm-regno{padding:7pt 10pt!important;border-radius:5pt!important;break-inside:avoid}
  .dm-regno-value{font-size:20pt!important}
  .aa-report-grid.dm-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .dm-parts{gap:4pt!important;margin-top:8pt!important}
  .dm-parts div{padding:4pt 6pt!important}
  .dm-gauge-range{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .dm-camp-card{padding:6pt 8pt!important;margin-top:6pt!important}
  .dm-camp-cols{gap:8pt!important;margin-top:6pt!important}
  .dm-gauge{margin-top:26pt!important}
  /* A grid container moves to the next page whole rather than splitting,
     which stranded the "Your answers" heading above half a blank page.
     Block flow lets the rows break across pages, as V10 found for the
     report container. */
  .dm-answer-list{display:block!important}
  .dm-answer-list div{padding:2pt 0!important;break-inside:avoid}
  .dm-answer-list dt,.dm-answer-list dd,.dm-med-table{font-size:8pt!important}
  .dm-med-table tr{break-inside:avoid}
  .dm-consent{display:none!important}
}

/* =========================================================
   V18 — landing page (/) listing every health check, and the
   breadcrumb back to it from each tool.

   Result first and compact: the hero shows what a result looks
   like (labelled examples), each card says what its report
   shows, and the full "what it asks and how it is scored"
   sits behind a toggle on the card.

   Prefixed hub-. Built on the V5 tokens (--accent, --text,
   --muted, --border, --card, --soft) and the same Manrope /
   Noto Sans pairing. Each check has a tone of its own, not one
   of the risk colours; the risk colours (--r1..--r5) appear
   only on the example meters, where they mean what they mean
   in the reports.
   ========================================================= */
.hub{width:min(1120px,calc(100% - 32px));margin:0 auto;padding:24px 0 48px}
.hub h1,.hub h2,.hub h3,.hub h4{font-family:Manrope,ui-sans-serif,sans-serif;color:var(--text);margin:0}
.hub p{margin:0}
.hub-card-alcohol{--tone:#0e6b62;--tone-soft:#e7f4f1}
.hub-card-smoking{--tone:#4b5d8f;--tone-soft:#eceff7}
.hub-card-diabetes{--tone:#2f5b86;--tone-soft:#e7eef6}
.hub-visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* buttons and small parts */
.hub-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 20px;border-radius:999px;border:1.5px solid transparent;
  font:700 14px/1.2 "Noto Sans",ui-sans-serif,sans-serif;text-decoration:none;cursor:pointer;
  transition:transform .15s,box-shadow .15s,background .15s
}
.hub-btn:hover{transform:translateY(-1px)}
.hub-btn:focus-visible,.hub-start-btn:focus-visible,.hub-faq summary:focus-visible,.hub-more summary:focus-visible{outline:3px solid #f2b84b;outline-offset:2px}
.hub-btn-icon{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.hub-btn-primary{background:linear-gradient(135deg,var(--accent),#15836b);color:#fff;box-shadow:0 8px 18px rgba(15,107,88,.2)}
.hub-btn-light{background:#fff;color:#1f3a5f}
.hub-btn-outline{border-color:var(--border);background:var(--card);color:var(--text)}
.hub-eyebrow{
  display:inline-block;font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--accent);background:var(--accentSoft);padding:5px 11px;border-radius:999px
}
.hub-eyebrow-light{color:#fff;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22)}
.hub-icon{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.hub-meta-icon{width:14px;height:14px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* hero: the promise, three ways in, and what a result looks like */
.hub-hero{
  position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:36px;align-items:center;
  padding:40px 44px;border-radius:28px;color:#fff;
  background:linear-gradient(135deg,#143a42 0%,#0e6b62 55%,#24927b 100%);box-shadow:0 22px 56px rgba(14,60,52,.2)
}
.hub-hero::before{content:"";position:absolute;width:460px;height:460px;right:-150px;top:-200px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.15),transparent 70%);pointer-events:none}
.hub-hero>*{position:relative;z-index:1}
.hub-hero h1{color:#fff;font-size:clamp(28px,3.8vw,44px);font-weight:800;line-height:1.08;letter-spacing:-.035em;margin:14px 0 12px}
.hub-hero-copy>p{font-size:16px;line-height:1.6;color:rgba(255,255,255,.88);max-width:50ch}

.hub-start{display:grid;gap:10px;margin-top:22px;max-width:460px}
.hub-start-btn{
  display:grid;grid-template-columns:40px 1fr 18px;align-items:center;gap:12px;
  padding:10px 16px 10px 10px;border-radius:16px;background:#fff;color:var(--text);text-decoration:none;
  box-shadow:0 6px 16px rgba(5,30,26,.18);transition:transform .15s,box-shadow .15s
}
.hub-start-btn:hover{transform:translateX(3px);box-shadow:0 10px 22px rgba(5,30,26,.24)}
.hub-start-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--tone-soft);color:var(--tone)}
.hub-start-icon .hub-icon{width:21px;height:21px}
.hub-start-btn b{display:block;font-family:Manrope,ui-sans-serif,sans-serif;font-size:15px;font-weight:800}
.hub-start-btn small{display:block;font-size:12px;color:var(--muted)}
.hub-start-btn .hub-btn-icon{color:var(--tone)}

.hub-trust{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px 16px}
.hub-trust li{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:rgba(255,255,255,.9)}
.hub-trust-tick{width:15px;height:15px;fill:none;stroke:#9be3cf;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}

/* the example results card */
.hub-results{background:#fff;color:var(--text);border-radius:22px;padding:18px 18px 16px;box-shadow:0 24px 50px rgba(4,28,24,.3)}
.hub-results-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.hub-results-head b{font-family:Manrope,ui-sans-serif,sans-serif;font-size:15px;font-weight:800}
.hub-results-head span{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);background:var(--soft);border:1px solid var(--border);padding:3px 8px;border-radius:999px}
.hub-result{display:grid;grid-template-columns:38px minmax(0,1fr);gap:12px;align-items:center;padding:12px 2px;border-top:1px solid var(--border)}
.hub-result:first-of-type{border-top:0}
.hub-result-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--tone-soft);color:var(--tone)}
.hub-result-icon .hub-icon{width:20px;height:20px}
.hub-result-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.hub-result-label{font-size:12.5px;font-weight:700;color:var(--muted)}
.hub-result-value{display:flex;align-items:baseline;gap:4px;margin-top:1px}
.hub-result-value b{font-family:Manrope,ui-sans-serif,sans-serif;font-size:24px;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.hub-result-value span{font-size:13px;font-weight:600;color:var(--muted)}
.hub-band{font-size:11px;font-weight:800;padding:3px 9px;border-radius:999px;white-space:nowrap}
.hub-band-r1{color:var(--r1);background:var(--r1-soft)}
.hub-band-r2{color:var(--r2);background:var(--r2-soft)}
.hub-band-r3{color:var(--r3);background:var(--r3-soft)}
.hub-band-r4{color:var(--r4);background:var(--r4-soft)}
.hub-meter{position:relative;display:flex;gap:3px;height:7px;margin-top:7px}
.hub-meter i{display:block;height:100%;border-radius:99px;opacity:.28}
.hub-meter i.on{opacity:1}
.hub-meter-r1{background:var(--r1)} .hub-meter-r2{background:var(--r2)} .hub-meter-r3{background:var(--r3)}
.hub-meter-r4{background:var(--r4)} .hub-meter-r5{background:var(--r5,#8f2b26)}
.hub-meter em{position:absolute;top:50%;width:13px;height:13px;border-radius:50%;background:#fff;border:3px solid var(--text);transform:translate(-50%,-50%);box-shadow:0 1px 3px rgba(0,0,0,.25)}
.hub-results-foot{margin-top:6px!important;padding-top:10px;border-top:1px dashed var(--border);font-size:12px;line-height:1.5;color:var(--muted)}

/* section heads */
.hub-section{margin-top:48px}
.hub-section-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 20px;margin-bottom:18px}
.hub-section-head h2{font-size:clamp(22px,2.6vw,28px);font-weight:800;letter-spacing:-.025em;line-height:1.2}
.hub-section-head p{font-size:14.5px;color:var(--muted)}

/* check cards */
/* equal heights, with the "for" line, button and toggle pinned to the bottom,
   so the three start buttons line up whatever each card says above them */
.hub-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:stretch}
.hub-card{
  position:relative;display:flex;flex-direction:column;padding:22px 20px 18px;border-radius:22px;
  background:var(--card);border:1px solid var(--border);box-shadow:0 8px 24px rgba(14,45,39,.05);
  transition:box-shadow .2s,transform .2s
}
.hub-card::before{content:"";position:absolute;inset:0 0 auto;height:4px;border-radius:22px 22px 0 0;background:var(--tone)}
.hub-card:hover{transform:translateY(-2px);box-shadow:0 16px 38px rgba(14,45,39,.1)}
.hub-card-top{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:12px;align-items:center}
.hub-card-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--tone-soft);color:var(--tone)}
.hub-tag{align-self:start;font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--tone);background:var(--tone-soft);padding:4px 8px;border-radius:999px;white-space:nowrap}
.hub-card h3{font-size:17px;font-weight:800;letter-spacing:-.015em;line-height:1.25}
.hub-card-meta{display:flex;align-items:center;gap:5px;margin-top:3px!important;font-size:12.5px;font-weight:600;color:var(--muted)}
.hub-card-summary{margin-top:14px!important;font-size:14px;line-height:1.55;color:var(--text)}
.hub-card-gets{margin-top:14px;padding:12px 14px;border-radius:14px;background:var(--soft);border:1px solid var(--border)}
.hub-card-gets b{font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--tone)}
.hub-card-gets ul{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:7px}
.hub-card-gets li{display:grid;grid-template-columns:18px 1fr;gap:7px;font-size:13px;line-height:1.45;color:var(--text)}
.hub-tick{width:16px;height:16px;margin-top:1px;fill:none;stroke:var(--tone);stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
.hub-card-who{margin-top:auto!important;padding-top:12px;font-size:12.5px;color:var(--muted)}
.hub-card-cta{margin-top:14px;width:100%;background:var(--tone);box-shadow:none}
.hub-more{margin-top:10px}
.hub-more summary{
  list-style:none;cursor:pointer;display:flex;justify-content:center;align-items:center;gap:6px;padding:6px;
  font-size:13px;font-weight:700;color:var(--tone);border-radius:10px
}
.hub-more summary::-webkit-details-marker{display:none}
.hub-more summary::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s}
.hub-more[open] summary::after{transform:translateY(2px) rotate(-135deg)}
.hub-more h4{margin-top:12px;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--tone)}
.hub-more ul{margin:6px 0 0;padding-left:18px;display:grid;gap:5px}
.hub-more li{font-size:13px;line-height:1.5;color:var(--text)}
.hub-more li::marker{color:var(--tone)}

/* the diabetes camp, as one strip */
.hub-camp{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:18px;align-items:center;
  margin-top:24px;padding:20px 24px;border-radius:22px;color:#fff;
  background:linear-gradient(135deg,#1f3a5f,#2f5b86 60%,#3d76a8)
}
.hub-camp-icon-wrap{display:grid;place-items:center;width:50px;height:50px;border-radius:16px;background:rgba(255,255,255,.14);color:#fff}
.hub-camp h2{color:#fff;font-size:18px;font-weight:800;letter-spacing:-.01em}
.hub-camp-copy>p{margin-top:3px!important;font-size:13.5px;color:rgba(255,255,255,.85)}
.hub-camp-facts{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.hub-camp-facts li{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;padding:5px 10px;border-radius:999px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.16)}

/* how it works: four steps in a row */
.hub-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.hub-steps li{display:grid;grid-template-columns:36px minmax(0,1fr);gap:12px;align-items:start;padding:16px;border-radius:18px;background:var(--card);border:1px solid var(--border)}
.hub-step-num{display:grid;place-items:center;width:36px;height:36px;border-radius:12px;background:var(--accent);color:#fff;font:800 16px/1 Manrope,ui-sans-serif,sans-serif}
.hub-steps b{display:block;font-family:Manrope,ui-sans-serif,sans-serif;font-size:14.5px;font-weight:800;color:var(--text);line-height:1.3}
.hub-steps p{margin-top:4px!important;font-size:12.5px;line-height:1.5;color:var(--muted)}

/* your information, as one band */
.hub-privacy{
  margin-top:18px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px 20px;
  padding:18px 22px;border-radius:18px;background:var(--accentSoft);border:1px solid #cfe7df
}
.hub-privacy-item{display:grid;grid-template-columns:32px minmax(0,1fr);gap:10px;align-items:start;padding:4px 0}
.hub-privacy-icon{width:32px;height:32px;padding:6px;border-radius:10px;background:#fff;fill:none;stroke:var(--accent);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.hub-privacy-item b{display:block;font-family:Manrope,ui-sans-serif,sans-serif;font-size:13.5px;font-weight:800;color:var(--text)}
.hub-privacy-item p{margin-top:2px!important;font-size:12.5px;line-height:1.45;color:#3f5b55}

/* FAQ, two columns */
.hub-faq{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:start}
.hub-faq details{border-radius:14px;background:var(--card);border:1px solid var(--border)}
.hub-faq details[open]{border-color:#bfdcd3}
.hub-faq summary{
  list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:13px 16px;font-family:Manrope,ui-sans-serif,sans-serif;font-size:14px;font-weight:800;color:var(--text)
}
.hub-faq summary::-webkit-details-marker{display:none}
.hub-faq summary::after{content:"+";flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--accentSoft);color:var(--accent);font-size:16px;font-weight:700;transition:transform .2s}
.hub-faq details[open] summary::after{transform:rotate(45deg)}
.hub-faq details p{padding:0 16px 14px;font-size:13.5px;line-height:1.6;color:var(--muted)}

/* talk to a doctor */
.hub-cta{
  margin-top:40px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px 22px;
  padding:24px 28px;border-radius:22px;background:var(--card);border:1px solid var(--border);box-shadow:0 8px 24px rgba(14,45,39,.05)
}
.hub-cta h2{font-size:20px;font-weight:800;letter-spacing:-.02em}
.hub-cta p{margin-top:4px!important;font-size:14px;color:var(--muted)}
.hub-cta-actions{display:flex;flex-wrap:wrap;gap:10px}
.hub-legal{max-width:760px;margin:20px auto 0!important;text-align:center;font-size:12px;line-height:1.6;color:var(--muted)}
.hub-legal a{color:var(--accent);font-weight:700}

/* breadcrumb on the tool pages */
.hub-crumb{width:min(880px,calc(100% - 28px));margin:18px auto 0;display:flex;align-items:center;gap:8px;font-size:13px}
.hub-crumb a{color:var(--accent);font-weight:700;text-decoration:none}
.hub-crumb a::before{content:"← "}
.hub-crumb a:hover{text-decoration:underline}
.hub-crumb span{color:var(--muted)}
.hub-crumb span::before{content:"/";margin-right:8px;color:var(--border)}

@media(max-width:1024px){
  .hub-hero{grid-template-columns:1fr;gap:26px}
  .hub-start{max-width:none;grid-template-columns:repeat(3,minmax(0,1fr))}
  .hub-start-btn{grid-template-columns:36px 1fr;padding:10px 12px 10px 10px}
  .hub-start-btn>.hub-btn-icon{display:none}
  .hub-results{max-width:560px}
  .hub-cards{grid-template-columns:1fr;max-width:640px}
  .hub-steps{grid-template-columns:1fr 1fr}
  .hub-privacy{grid-template-columns:1fr 1fr;gap:10px 20px}
}
@media(max-width:760px){
  .hub-camp{grid-template-columns:auto minmax(0,1fr)}
  .hub-camp>.hub-btn{grid-column:1/-1;width:100%}
  .hub-faq{grid-template-columns:1fr}
}
@media(max-width:640px){
  .hub{padding-top:14px}
  .hub-hero{padding:26px 18px 18px;border-radius:22px}
  .hub-hero-copy>p{font-size:15px}
  .hub-start{grid-template-columns:1fr}
  .hub-start-btn{grid-template-columns:40px 1fr 18px}
  .hub-start-btn>.hub-btn-icon{display:block}
  .hub-results{padding:14px 14px 12px;border-radius:18px}
  .hub-section{margin-top:36px}
  .hub-section-head{display:block}
  .hub-section-head p{margin-top:4px!important}
  .hub-card{padding:20px 16px 14px}
  .hub-camp{padding:18px 16px;gap:12px 14px}
  .hub-steps{grid-template-columns:1fr;gap:8px}
  .hub-steps li{padding:12px 14px}
  .hub-privacy{grid-template-columns:1fr;padding:14px 16px}
  .hub-cta{padding:20px 16px;margin-top:32px}
  .hub-cta-actions,.hub-cta-actions .hub-btn{width:100%}
  .hub-crumb{margin-top:12px;width:calc(100% - 32px)}
}
@media(prefers-reduced-motion:reduce){
  .hub-btn,.hub-card,.hub-start-btn,.hub-faq summary::after,.hub-more summary::after{transition:none}
  .hub-btn:hover,.hub-card:hover,.hub-start-btn:hover{transform:none}
}
@media print{
  .hub-crumb{display:none!important}
}

/* =========================================================
   V19 — floating WhatsApp button, on every public page.

   Bottom-right, above everything but the browser's own UI.
   Two things already lived in that corner and are moved:

   - On phones the tools' Back / Continue bar is fixed to the
     bottom (about 78px tall, z-index 50). The button sits
     above it there (body.has-action-bar), and drops back to
     the corner on the report, where the bar is hidden.
   - The save badge moves up beside the button. On phones it
     used to sit under the fixed bar and was never seen; it
     now shows beside the button, above the bar.
   ========================================================= */
.wa-float{
  position:fixed;right:20px;bottom:20px;z-index:60;
  display:flex;align-items:center;gap:10px;text-decoration:none
}
.wa-float-btn{
  position:relative;display:grid;place-items:center;width:58px;height:58px;border-radius:50%;
  background:#25d366;color:#fff;
  box-shadow:0 10px 24px rgba(0,0,0,.2),0 3px 8px rgba(37,211,102,.35);transition:transform .2s,box-shadow .2s
}
.wa-float-btn svg{width:31px;height:31px}
/* three slow pulses after load to draw the eye, then still */
.wa-float-btn::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #25d366;opacity:0;animation:wa-pulse 2.4s ease-out 1.2s 3}
@keyframes wa-pulse{0%{transform:scale(1);opacity:.75}100%{transform:scale(1.65);opacity:0}}
.wa-float:hover .wa-float-btn{transform:scale(1.06);box-shadow:0 14px 30px rgba(0,0,0,.24),0 4px 10px rgba(37,211,102,.4)}
.wa-float:focus-visible{outline:none}
.wa-float:focus-visible .wa-float-btn{outline:3px solid #f2b84b;outline-offset:3px}
.wa-float-label{
  padding:9px 14px;border-radius:999px;background:#fff;color:#0f211d;
  font:700 13px/1.2 "Noto Sans",ui-sans-serif,sans-serif;white-space:nowrap;
  box-shadow:0 8px 22px rgba(0,0,0,.14);border:1px solid #e3ece9;
  opacity:0;transform:translateX(8px);pointer-events:none;transition:opacity .2s,transform .2s
}
.wa-float:hover .wa-float-label,.wa-float:focus-visible .wa-float-label{opacity:1;transform:none}
/* Keep the label showing only where it clears the tool card (about 960px
   wide) entirely: button and label need about 345px of the right edge.
   Narrower, a permanent label sat over the card's Continue button. */
@media(min-width:1680px){.wa-float-label{opacity:1;transform:none}}

/* Between phone and wide desktop the tool card reaches into the button's
   column, so Continue could scroll in under it. Give the card's action bar
   room on the right for the button. */
@media(min-width:761px) and (max-width:1119px){
  .has-action-bar .aa-footer{padding-right:96px}
}

/* At the very end of a page nothing can scroll out from under the button,
   so the footer ends with clear space for it rather than with contact
   links the button would sit on. */
.mg-site-footer-bottom{padding-bottom:84px}

/* the save badge moves up, out of the button's corner */
.aa-save-status{right:20px;bottom:88px}

@media(max-width:760px){
  .wa-float{right:16px;bottom:calc(16px + env(safe-area-inset-bottom))}
  .wa-float-btn{width:54px;height:54px}
  .wa-float-btn svg{width:29px;height:29px}
  .wa-float-label{display:none}
  .has-action-bar .wa-float{bottom:calc(88px + env(safe-area-inset-bottom))}
  .has-action-bar:has(.aa-footer[hidden]) .wa-float{bottom:calc(16px + env(safe-area-inset-bottom))}

  .aa-save-status{right:80px;bottom:calc(29px + env(safe-area-inset-bottom));z-index:61}
  .has-action-bar .aa-save-status{bottom:calc(101px + env(safe-area-inset-bottom))}
  .has-action-bar:has(.aa-footer[hidden]) .aa-save-status{bottom:calc(29px + env(safe-area-inset-bottom))}
}
@media(prefers-reduced-motion:reduce){
  .wa-float-btn::after{animation:none}
  .wa-float-btn,.wa-float-label{transition:none}
  .wa-float:hover .wa-float-btn{transform:none}
}
@media print{
  .wa-float{display:none!important}
}

/* =========================================================
   V20 — About Us page (/about), and the current page marked
   in the site header.

   The page reuses the landing page's hub- components (hero,
   section heads, start buttons, camp strip, closing CTA);
   only what it adds lives here, prefixed ab-.
   ========================================================= */

/* the site header shows which page you are on, as the hover pill held on
   (an inset underline curved with the link's rounded corners) */
.mg-site-nav>a[aria-current="page"]{color:var(--mg-red);background:var(--mg-red-soft)}
/* on a check, Health Tools and that check's menu entry say so too */
.mg-nav-dropdown.is-current>summary{color:var(--mg-red);background:var(--mg-red-soft)}
.mg-nav-dropdown-menu a[aria-current="page"]{color:var(--mg-red);background:var(--mg-red-soft);font-weight:700}

/* the tools that live only on the main website are grouped under its name,
   and each is marked as leaving this site */
.mg-nav-dropdown-label{
  display:block;margin:6px 4px 2px;padding:8px 8px 4px;border-top:1px solid #ececec;
  font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#8a95a0;
  white-space:nowrap   /* the menu widens to fit it rather than splitting the domain */
}
.mg-ext-icon{display:inline-block;margin-left:5px;font-size:.9em;opacity:.55}

/* Health Tools opens on hover with a mouse (site-nav.js). The menu hangs
   10px below "Health Tools"; an invisible bridge over that gap keeps the
   pointer inside the menu on its way down, so it does not close mid-way.
   Desktop layout only: in the phone list the menu is in the flow. */
@media(min-width:641px){
  .mg-nav-dropdown-menu::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
  .mg-nav-dropdown[open] .mg-nav-dropdown-menu{animation:mg-menu-in .16s ease-out}
}
@keyframes mg-menu-in{from{opacity:0;translate:0 -4px}to{opacity:1;translate:0 0}}
@media(prefers-reduced-motion:reduce){
  .mg-nav-dropdown[open] .mg-nav-dropdown-menu{animation:none}
}
@media(max-width:640px){
  .mg-nav-dropdown-label{margin:4px 0 0;padding:8px 0 2px}
}

.ab-hero{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.ab-hero h1{font-size:clamp(28px,3.4vw,40px)}
.ab-hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.ab-btn-ghost{border-color:rgba(255,255,255,.55);color:#fff}
.ab-btn-ghost:hover{background:rgba(255,255,255,.1)}

/* the founder card, on the hero */
.ab-founder{background:#fff;color:var(--text);border-radius:22px;padding:22px;box-shadow:0 24px 50px rgba(4,28,24,.3)}
.ab-founder-top{display:grid;grid-template-columns:64px minmax(0,1fr);gap:14px;align-items:center}
.ab-avatar{
  display:grid;place-items:center;width:64px;height:64px;border-radius:20px;
  background:linear-gradient(135deg,#0e6b62,#24927b);color:#fff;
  font:800 22px/1 Manrope,ui-sans-serif,sans-serif;letter-spacing:.02em
}
.ab-founder-role{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.ab-founder h2{font-size:20px;font-weight:800;letter-spacing:-.02em;margin-top:2px}
.ab-founder-creds{margin-top:2px!important;font-size:13px;font-weight:700;color:var(--muted)}
.ab-founder-title{margin-top:14px!important;padding:10px 12px;border-radius:12px;background:var(--accentSoft);font-size:13.5px;font-weight:700;color:#0e5a52}
.ab-founder-facts{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:9px}
.ab-founder-facts li{display:grid;grid-template-columns:18px 1fr;gap:8px;font-size:13.5px;line-height:1.5}
.ab-founder .hub-tick{stroke:var(--accent)}

/* mission, vision, principle */
.ab-values{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.ab-value{padding:22px;border-radius:20px;background:var(--card);border:1px solid var(--border);box-shadow:0 8px 24px rgba(14,45,39,.05)}
.ab-value-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--accentSoft);color:var(--accent)}
.ab-value b{display:block;margin-top:14px;font-family:Manrope,ui-sans-serif,sans-serif;font-size:16px;font-weight:800;color:var(--text)}
.ab-value p{margin-top:6px!important;font-size:14px;line-height:1.6;color:var(--muted)}

/* why these checks */
.ab-why{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.ab-why-item{display:grid;grid-template-columns:32px minmax(0,1fr);gap:12px;align-items:start}
.ab-why-icon{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:var(--accent);color:#fff}
.ab-why-item b{display:block;font-family:Manrope,ui-sans-serif,sans-serif;font-size:15px;font-weight:800;color:var(--text)}
.ab-why-item p{margin-top:4px!important;font-size:13.5px;line-height:1.55;color:var(--muted)}
.ab-checks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:20px}
.ab-checks .hub-start-btn{border:1px solid var(--border);box-shadow:0 6px 16px rgba(14,45,39,.06)}

/* the wider service: a highlighted panel, with the way to the main website
   as its button rather than a line of small print */
.ab-beyond{
  position:relative;overflow:hidden;margin-top:48px;padding:28px;border-radius:24px;
  background:linear-gradient(135deg,#e3f3ee 0%,#f1faf7 55%,#fbfefd 100%);
  border:1px solid #c6e3da;box-shadow:0 12px 32px rgba(14,90,82,.08)
}
.ab-beyond::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:linear-gradient(180deg,var(--accent),#24927b)}
.ab-beyond::after{content:"";position:absolute;width:260px;height:260px;right:-90px;top:-120px;border-radius:50%;background:radial-gradient(circle,rgba(36,146,123,.14),transparent 70%);pointer-events:none}
.ab-beyond>*{position:relative;z-index:1}
.ab-beyond .hub-eyebrow{background:#fff;border:1px solid #cfe7df}
.ab-beyond-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px 24px}
.ab-beyond-head h2{font-size:clamp(22px,2.6vw,28px);font-weight:800;letter-spacing:-.025em;margin-top:10px}
.ab-beyond-head p{margin-top:6px!important;max-width:58ch;font-size:14.5px;line-height:1.6;color:#3f5b55}
.ab-site-btn{flex:none;padding:13px 22px;font-size:14.5px}
.ab-services{
  list-style:none;margin:22px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px
}
.ab-services li{
  display:grid;grid-template-columns:18px 1fr;gap:8px;align-items:start;
  padding:11px 14px;border-radius:14px;background:#fff;border:1px solid #d6ebe4;
  font-size:13.5px;font-weight:600;line-height:1.45;color:var(--text)
}
.ab-services .hub-tick{stroke:var(--accent)}

/* contact */
.ab-contact{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.ab-contact-item{display:grid;grid-template-columns:36px minmax(0,1fr);gap:12px;align-items:start;padding:16px;border-radius:16px;background:var(--card);border:1px solid var(--border)}
.ab-contact-icon{width:36px;height:36px;padding:8px;border-radius:11px;background:var(--accentSoft);fill:none;stroke:var(--accent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ab-contact-item b{display:block;font-family:Manrope,ui-sans-serif,sans-serif;font-size:14px;font-weight:800;color:var(--text)}
.ab-contact-item p{margin-top:3px!important;font-size:13.5px;line-height:1.5;color:var(--muted);overflow-wrap:anywhere}
.ab-contact-item a{color:var(--accent);font-weight:700;text-decoration:none}
.ab-contact-item a:hover{text-decoration:underline}

@media(max-width:1024px){
  .ab-hero{grid-template-columns:1fr}
  .ab-founder{max-width:560px}
  .ab-values,.ab-why{grid-template-columns:1fr}
  .ab-checks{grid-template-columns:1fr}
  .ab-contact{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .ab-hero-actions .hub-btn{flex:1 1 100%}
  .ab-founder{padding:18px}
  .ab-contact{grid-template-columns:1fr}
  .ab-beyond{margin-top:36px;padding:22px 16px 18px 20px}
  .ab-site-btn{width:100%}
  /* two to a row: one per row ran the panel to twice the screen's height */
  .ab-services{grid-template-columns:1fr 1fr;gap:8px;margin-top:18px}
  .ab-services li{grid-template-columns:15px 1fr;gap:6px;padding:9px 10px;font-size:12.5px}
  .ab-services .hub-tick{width:14px;height:14px}
}