/* =====================================================================
   Self-hosted fonts (latin) — no external CDN, better privacy + speed.
   Files live in /fonts; paths are relative to this stylesheet (css/).
   ===================================================================== */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/fraunces-500.woff2') format('woff2');}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/fraunces-600.woff2') format('woff2');}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/fraunces-700.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/inter-400.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/inter-500.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/inter-600.woff2') format('woff2');}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/inter-700.woff2') format('woff2');}
/* Optional dyslexia-friendly reading font — toggled in the Reading Comfort Lens */
@font-face{font-family:'OpenDyslexic';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/opendyslexic-400.woff2') format('woff2');}
@font-face{font-family:'OpenDyslexic';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/opendyslexic-700.woff2') format('woff2');}

/* =====================================================================
   Miranda Makary, BS, RN — Website Design System
   Direction: "Clinical Modern + Warm Authority" blend
   (A second "Warm Authority" palette is documented in README.md)
   ===================================================================== */

:root {
  /* Brand palette */
  --navy:        #123642;   /* deep teal-navy — trust, clinical */
  --navy-700:    #1c4a59;
  --teal:        #2b7a8c;   /* secondary, links */
  --teal-100:    #e3f0f2;
  --coral:       #e07a5f;   /* primary CTA — warm, hopeful */
  --coral-600:   #cf6a50;
  --gold:        #d9a441;   /* accent / speaking */
  --cream:       #f8f5f0;   /* page background */
  --sand:        #efe9e0;   /* alt section */
  --ink:         #20323a;   /* body text */
  --muted:       #5c6b71;   /* secondary text */
  --line:        #e2dccf;   /* borders */
  --white:       #ffffff;
  --success-bg:  #e7f3ec;
  --success-br:  #2f8f5b;

  /* Type */
  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Layout */
  --maxw: 1140px;
  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 10px 30px rgba(18, 54, 66, 0.08);
  --shadow-lg: 0 18px 50px rgba(18, 54, 66, 0.14);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--cream);
  line-height: 1.65;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--teal); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { font-family: var(--serif); color: var(--navy); line-height: 1.15; font-weight: 600; margin: 0 0 .5em; }
h1 { font-size: clamp(2rem, 4.5vw, 3.25rem); letter-spacing: -0.5px; }
h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); }
h3 { font-size: 1.3rem; }
p { margin: 0 0 1.1em; }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }
.section { padding: 76px 0; }
.section--tight { padding: 52px 0; }
.section--sand { background: var(--sand); }
.section--navy { background: var(--navy); color: #dce8eb; }
.section--navy h1, .section--navy h2, .section--navy h3 { color: #fff; }
.section--teal { background: var(--teal-100); }
.center { text-align: center; }
.lead { font-size: 1.2rem; color: var(--muted); max-width: 60ch; }
.center .lead { margin-left: auto; margin-right: auto; }
.eyebrow { text-transform: uppercase; letter-spacing: 2px; font-size: .78rem; font-weight: 700; color: var(--coral-600); margin-bottom: 12px; }
.section--navy .eyebrow { color: var(--gold); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--sans); font-weight: 600; font-size: 1rem;
  padding: 14px 26px; border-radius: 999px; border: 2px solid transparent;
  cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  text-decoration: none; line-height: 1;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn--primary { background: var(--coral); color: #fff; box-shadow: 0 8px 20px rgba(224,122,95,.35); }
.btn--primary:hover { background: var(--coral-600); }
.btn--secondary { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn--secondary:hover { background: var(--navy); color: #fff; }
.btn--ghost { background: rgba(255,255,255,.12); color:#fff; border-color: rgba(255,255,255,.5); }
.btn--ghost:hover { background: #fff; color: var(--navy); }
.btn--gold { background: var(--gold); color: #2a2206; box-shadow: 0 8px 20px rgba(217,164,65,.35); }
.btn--gold:hover { background: #c9962f; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }
.center .btn-row { justify-content: center; }

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(248,245,240,.92); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.nav { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.brand { display: flex; flex-direction: column; line-height: 1.05; }
.brand a { color: var(--navy); text-decoration: none; display: flex; flex-direction: column; gap: 2px; }
.brand__name { font-family: var(--serif); font-weight: 600; font-size: 1.25rem; }
.brand__role { font-size: .72rem; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.nav__links { display: flex; align-items: center; gap: 22px; list-style: none; margin: 0; padding: 0; }
.nav__links a { color: var(--ink); font-weight: 500; font-size: .96rem; }
.nav__links a:hover, .nav__links a.active { color: var(--coral-600); text-decoration: none; }
.nav__links a.nav-hl { color: var(--coral-600); font-weight: 700; }
.nav__links a.nav-hl::before { content: "✦ "; color: var(--gold); }

/* Scroll-reveal (progressive enhancement) */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none; }
  html { scroll-behavior: auto; }
}
.nav__cta { margin-left: 6px; }
.nav__toggle { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.nav__toggle span { display: block; width: 24px; height: 2px; background: var(--navy); margin: 5px 0; transition: .2s; }

@media (max-width: 900px) {
  .nav__toggle { display: block; }
  .nav__links {
    position: absolute; top: 72px; left: 0; right: 0;
    flex-direction: column; align-items: flex-start; gap: 0;
    background: var(--cream); border-bottom: 1px solid var(--line);
    padding: 8px 22px 18px; box-shadow: var(--shadow);
    display: none;
  }
  .nav__links.open { display: flex; }
  .nav__links li { width: 100%; }
  .nav__links a { display: block; padding: 12px 0; width: 100%; border-bottom: 1px solid var(--line); }
  .nav__cta { margin: 12px 0 0; }
}

/* ---------- Hero ---------- */
.hero { background: linear-gradient(160deg, #14424f 0%, #0e2c36 100%); color: #e6f0f2; padding: 84px 0 88px; }
.hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
.hero h1 { color: #fff; }
.hero__sub { font-size: 1.22rem; color: #bcd3d8; max-width: 52ch; }
.hero__card {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--radius); padding: 26px; backdrop-filter: blur(4px);
}
.hero__imgph {
  aspect-ratio: 4/5; border-radius: var(--radius);
  background:
    radial-gradient(circle at 30% 30%, rgba(224,122,95,.45), transparent 60%),
    linear-gradient(135deg, #2b7a8c, #123642);
  display: flex; align-items: flex-end; padding: 18px;
  color: #eaf3f4; font-size: .85rem; border: 1px solid rgba(255,255,255,.18);
}
@media (max-width: 820px) {
  .hero__grid { grid-template-columns: 1fr; gap: 30px; }
}

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

.card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow);
}
.card h3 { margin-top: 6px; }
.card__icon {
  width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center;
  background: var(--teal-100); color: var(--teal); font-size: 1.4rem; margin-bottom: 14px;
}
.card--feature { border-top: 4px solid var(--coral); }
.card--link a { font-weight: 600; }

/* Symptom / checklist */
.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.checklist li { display: flex; gap: 12px; align-items: flex-start; }
.checklist li::before { content: "✓"; color: var(--teal); font-weight: 800; margin-top: 1px; }
.signs { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2,1fr); gap: 12px; }
.signs li { background: #fff; border:1px solid var(--line); border-radius: var(--radius-sm); padding: 14px 16px; display:flex; gap:10px; }
.signs li::before { content: "•"; color: var(--coral); font-weight: 800; }
@media (max-width:600px){ .signs { grid-template-columns: 1fr; } }

/* Steps */
.steps { counter-reset: step; display: grid; gap: 18px; }
.step { display: grid; grid-template-columns: 48px 1fr; gap: 18px; align-items: start;
  background:#fff; border:1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.step__num { counter-increment: step; width:46px; height:46px; border-radius:50%; background: var(--navy); color:#fff;
  display:grid; place-items:center; font-family:var(--serif); font-weight:600; font-size:1.2rem; }
.step__num::before { content: counter(step); }
.step h3 { margin: 2px 0 6px; }

/* Two-col compare (can / cannot) */
.compare { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
@media (max-width:700px){ .compare { grid-template-columns:1fr; } }
.compare__col { border-radius: var(--radius); padding: 24px; }
.compare__can { background: var(--success-bg); border:1px solid #bfe0cd; }
.compare__cannot { background: #fbeee9; border:1px solid #f0cfc3; }
.compare h3 { margin-top:0; }

/* Audience pills */
.audience { display:flex; flex-wrap:wrap; gap:10px; }
.audience span { background:#fff; border:1px solid var(--line); border-radius:999px; padding:8px 16px; font-size:.92rem; font-weight:500; }

/* Testimonials */
.quote {
  background:#fff; border:1px solid var(--line); border-left:4px solid var(--coral);
  border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow);
}
.quote p { font-size:1.05rem; font-style: italic; color: var(--ink); }
.quote__by { font-style: normal; font-weight:600; color: var(--navy); margin:0; }
.quote__tag { display:inline-block; margin-top:8px; font-size:.72rem; letter-spacing:1px; text-transform:uppercase;
  color:var(--muted); background:var(--sand); padding:3px 10px; border-radius:999px; }

/* FAQ accordion */
.faq { display:grid; gap:12px; max-width: 820px; margin: 0 auto; }
.faq__item { background:#fff; border:1px solid var(--line); border-radius: var(--radius-sm); overflow:hidden; }
.faq__q { width:100%; text-align:left; background:none; border:0; cursor:pointer;
  padding: 18px 22px; font-size:1.05rem; font-weight:600; color:var(--navy); font-family:var(--sans);
  display:flex; justify-content:space-between; align-items:center; gap:14px; }
.faq__q::after { content:"+"; font-size:1.5rem; color:var(--coral); transition: transform .2s; line-height:1; }
.faq__item.open .faq__q::after { content:"–"; }
.faq__a { max-height:0; overflow:hidden; transition:max-height .25s ease; padding:0 22px; }
.faq__item.open .faq__a { max-height: 600px; padding:0 22px 20px; }

/* CTA band */
.ctaband { background: linear-gradient(135deg, var(--coral), #d98a52); color:#fff; border-radius: var(--radius); padding: 48px; text-align:center; }
.ctaband h2 { color:#fff; }
.ctaband p { color: #fff4ef; max-width: 56ch; margin-inline:auto; }

/* Disclaimer / notes */
.note {
  background: #fff; border:1px dashed var(--teal); border-radius: var(--radius-sm);
  padding: 14px 18px; font-size:.92rem; color: var(--muted);
}
.placeholder {
  background: #fff8e6; border:1px dashed var(--gold); border-radius: var(--radius-sm);
  padding: 4px 8px; font-size:.9em; color:#8a6d1e; font-weight:600;
}

/* Forms */
.form-tabs { display:flex; flex-wrap:wrap; gap:10px; margin-bottom: 26px; }
.form-tab { background:#fff; border:1px solid var(--line); border-radius:999px; padding:10px 20px; cursor:pointer;
  font-weight:600; color:var(--navy); font-family:var(--sans); font-size:.95rem; }
.form-tab.active { background: var(--navy); color:#fff; border-color: var(--navy); }
.lead-form { background:#fff; border:1px solid var(--line); border-radius: var(--radius); padding: 30px; box-shadow: var(--shadow); display:none; }
.lead-form.active { display:block; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:640px){ .form-grid { grid-template-columns:1fr; } }
.field { display:flex; flex-direction:column; gap:6px; margin-bottom:16px; }
.field.full { grid-column:1 / -1; }
.field label { font-weight:600; font-size:.92rem; color:var(--navy); }
.field .req { color: var(--coral-600); }
.field input, .field select, .field textarea {
  font-family:var(--sans); font-size:1rem; padding:11px 13px; border:1px solid var(--line);
  border-radius: var(--radius-sm); background:#fdfcfa; color:var(--ink); width:100%;
}
.field input:focus, .field select:focus, .field textarea:focus { outline:2px solid var(--teal); border-color:var(--teal); }
.field textarea { min-height:120px; resize:vertical; }
.consent { display:flex; gap:10px; align-items:flex-start; font-size:.92rem; color:var(--muted); }
.consent input { width:auto; margin-top:4px; }
.form-micro { font-size:.95rem; color:var(--muted); margin-bottom:20px; }
.form-success {
  display:none; background:var(--success-bg); border:1px solid #bfe0cd; border-radius:var(--radius);
  padding:26px; color:#1c5b39;
}
.form-success.show { display:block; }
.form-success h3 { color:#1c5b39; margin-top:0; }

/* Footer */
.site-footer { background: var(--navy); color:#b9cdd2; padding: 56px 0 28px; font-size:.95rem; }
.site-footer a { color:#cfe0e4; }
.footer-grid { display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap:32px; }
@media (max-width:780px){ .footer-grid { grid-template-columns:1fr 1fr; gap:26px; } }
@media (max-width:480px){ .footer-grid { grid-template-columns:1fr; } }
.site-footer h4 { color:#fff; font-family:var(--sans); font-size:.82rem; text-transform:uppercase; letter-spacing:1.5px; margin-bottom:14px; }
.site-footer ul { list-style:none; padding:0; margin:0; display:grid; gap:9px; }
.footer-brand__name { font-family:var(--serif); font-size:1.3rem; color:#fff; }
.footer-disclaimer { border-top:1px solid rgba(255,255,255,.14); margin-top:36px; padding-top:22px; font-size:.83rem; color:#8fa9b0; }
.footer-social { display:flex; gap:14px; margin-top:14px; }
.footer-social a { font-size:.9rem; }

/* Utility */
.mt-0 { margin-top:0; } .mb-0 { margin-bottom:0; }
.maxw-prose { max-width: 72ch; }
.maxw-prose.center { margin-inline:auto; }
.divider { height:1px; background:var(--line); border:0; margin: 0; }
.tag-row { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.tag { background:var(--teal-100); color:var(--teal); border-radius:999px; padding:5px 13px; font-size:.85rem; font-weight:600; }
.skip-link { position:absolute; left:-999px; }
.skip-link:focus { left:12px; top:12px; background:#fff; padding:8px 14px; border-radius:8px; z-index:100; }

/* =====================================================================
   Interactive Self-Check experience (self-check.html)
   ===================================================================== */
.sc-screen-tint { position:fixed; inset:0; z-index:9998; pointer-events:none; mix-blend-mode:multiply; opacity:0; transition:opacity .25s, background-color .25s; }
.sc-steps-nav { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:34px; }
.sc-pill { display:flex; align-items:center; gap:9px; background:#fff; border:1px solid var(--line); border-radius:999px; padding:8px 16px; font-size:.9rem; font-weight:600; color:var(--muted); }
.sc-pill .n { width:24px; height:24px; border-radius:50%; background:var(--sand); color:var(--navy); display:grid; place-items:center; font-size:.82rem; }
.sc-pill.active { border-color:var(--coral); color:var(--navy); box-shadow:var(--shadow); }
.sc-pill.active .n { background:var(--coral); color:#fff; }
.sc-pill.done .n { background:var(--success-br); color:#fff; }

.sc-panel { display:none; }
.sc-panel.active { display:block; animation:scfade .35s ease; }
@keyframes scfade { from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;} }

/* Quiz */
.sc-q { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:18px 22px; margin-bottom:14px; }
.sc-q p { margin:0 0 12px; font-weight:600; color:var(--navy); }
.sc-opts { display:flex; flex-wrap:wrap; gap:8px; }
.sc-opt { flex:1 1 120px; }
.sc-opt input { position:absolute; opacity:0; }
.sc-opt label { display:block; text-align:center; border:1px solid var(--line); border-radius:999px; padding:9px 12px; cursor:pointer; font-size:.92rem; font-weight:600; color:var(--muted); transition:.15s; }
.sc-opt input:checked + label { background:var(--teal); color:#fff; border-color:var(--teal); }
.sc-opt label:hover { border-color:var(--teal); }

/* Reading sample / overlay */
.sc-reader-wrap { position:relative; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow); }
.sc-reader { background:#fff; padding:30px 34px; font-size:1.18rem; line-height:1.9; color:#15202a; position:relative; z-index:1; transition:filter .15s; }
.sc-reader h4 { font-family:var(--serif); margin:0 0 12px; }
.sc-tint { position:absolute; inset:0; z-index:2; pointer-events:none; mix-blend-mode:multiply; opacity:0; transition:opacity .2s, background-color .2s; }
.sc-swatches { display:flex; flex-wrap:wrap; gap:10px; margin:20px 0 8px; }
.sc-swatch { width:46px; height:46px; border-radius:12px; border:3px solid #fff; box-shadow:0 0 0 1px var(--line),0 4px 10px rgba(0,0,0,.08); cursor:pointer; position:relative; transition:transform .12s; }
.sc-swatch:hover { transform:translateY(-2px); }
.sc-swatch.sel { outline:3px solid var(--navy); outline-offset:2px; }
.sc-swatch.none { background:repeating-linear-gradient(45deg,#fff,#fff 6px,#eee 6px,#eee 12px); display:grid; place-items:center; font-size:.7rem; color:var(--muted); font-weight:700; }
.sc-controls { display:grid; gap:16px; margin-top:18px; }
.sc-control label { font-weight:600; font-size:.92rem; color:var(--navy); display:flex; justify-content:space-between; }
.sc-control input[type=range] { width:100%; accent-color:var(--coral); }
.sc-toggle { display:flex; align-items:center; gap:10px; font-weight:600; color:var(--navy); cursor:pointer; }

/* Distortion sim */
.sc-effects { display:flex; flex-wrap:wrap; gap:9px; margin:18px 0; }
.sc-effbtn { background:#fff; border:1px solid var(--line); border-radius:999px; padding:9px 16px; cursor:pointer; font-weight:600; color:var(--navy); font-size:.92rem; transition:.15s; }
.sc-effbtn.on { background:var(--navy); color:#fff; border-color:var(--navy); }
.sc-sim { background:#fff; padding:30px 34px; border-radius:var(--radius); border:1px solid var(--line); box-shadow:var(--shadow); font-size:1.2rem; line-height:1.95; color:#16222b; position:relative; overflow:hidden; }
.sc-sim .glow { position:absolute; inset:0; pointer-events:none; opacity:0; background:radial-gradient(circle at 50% 40%, rgba(255,255,255,.9), rgba(255,255,255,0) 60%); transition:opacity .2s; }
.fx-blur { filter:blur(calc(var(--fx) * 1.6px)); }
.fx-wash { color:#8a98a0; }
.fx-glare { filter:brightness(calc(1 + var(--fx)*0.16)) contrast(calc(1 - var(--fx)*0.05)); }
.fx-glare .glow { opacity:calc(var(--fx)*0.12); }
.fx-double { text-shadow:calc(var(--fx)*0.9px) calc(var(--fx)*0.7px) 0 rgba(40,60,70,.45), calc(var(--fx)*-0.6px) 0 0 rgba(120,80,80,.25); }
.fx-swim .sc-swimword { display:inline-block; animation:swim calc(2.6s - var(--fx)*0.12s) ease-in-out infinite; }
@keyframes swim { 0%,100%{transform:transl(0,0);} 25%{transform:translate(calc(var(--fx)*0.6px),calc(var(--fx)*-0.5px));} 50%{transform:translate(calc(var(--fx)*-0.5px),calc(var(--fx)*0.6px));} 75%{transform:translate(calc(var(--fx)*0.4px),calc(var(--fx)*0.4px));} }
.fx-flicker { animation:flick calc(1.4s - var(--fx)*0.05s) steps(2) infinite; }
@keyframes flick { 0%,100%{opacity:1;} 50%{opacity:calc(1 - var(--fx)*0.05);} }

/* Familiar checkboxes */
.sc-familiar { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-top:16px; }
@media(max-width:600px){ .sc-familiar{ grid-template-columns:1fr; } }
.sc-familiar label { display:flex; gap:10px; align-items:center; background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm); padding:12px 14px; cursor:pointer; font-weight:500; }
.sc-familiar input { width:auto; accent-color:var(--teal); }

/* Step buttons */
.sc-nav-btns { display:flex; justify-content:space-between; gap:12px; margin-top:26px; }

/* Results */
.sc-result-band { border-radius:var(--radius); padding:26px 28px; color:#fff; margin-bottom:22px; }
.sc-result-band h3 { color:#fff; margin-top:0; }
.sc-meter { height:14px; border-radius:999px; background:rgba(255,255,255,.3); overflow:hidden; margin:14px 0 6px; }
.sc-meter > span { display:block; height:100%; background:#fff; border-radius:999px; transition:width .6s; }
.sc-result-cols { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media(max-width:700px){ .sc-result-cols{ grid-template-columns:1fr; } }
.sc-bestcolor { width:60px; height:60px; border-radius:14px; border:3px solid #fff; box-shadow:0 0 0 1px var(--line); display:inline-block; vertical-align:middle; }
.sc-dl { display:flex; flex-wrap:wrap; gap:12px; margin-top:8px; }

/* Real photos */
.photo { width:100%; border-radius:var(--radius); box-shadow:var(--shadow-lg); display:block; object-fit:cover; }
.photo--portrait { aspect-ratio:4/5; }
.photo--hero { aspect-ratio:1/1; }
.photo--square { aspect-ratio:1/1; max-width:420px; }
.photo--round { border-radius:50%; width:100%; max-width:300px; aspect-ratio:1/1; margin:0 auto; }
.photo-frame { position:relative; }
.photo-frame::after { content:""; position:absolute; inset:0; border-radius:var(--radius); box-shadow:inset 0 0 0 1px rgba(255,255,255,.25); pointer-events:none; }

/* =====================================================================
   Reading Comfort Lens — site-wide color overlay + reading aids
   Injected on every page by js/main.js. All selectors are namespaced
   rcl-* so there is zero collision with the self-check sc-* experience.
   An educational comfort tool — explore color & comfort, not a diagnosis.
   ===================================================================== */

/* ---- Fixed visual layers (never intercept pointer events) ---- */
#rcl-glare, #rcl-tint, #rcl-ruler-layer { position:fixed; inset:0; pointer-events:none; }
#rcl-glare       { z-index:54; background:#2a2614; opacity:0; }
#rcl-tint        { z-index:55; background:rgb(var(--rcl-tint-rgb, 0 0 0) / var(--rcl-tint-alpha, 0)); mix-blend-mode:var(--rcl-tint-blend, normal); }
#rcl-ruler-layer { z-index:56; display:none; }
html[data-rcl-glare="1"] #rcl-glare { opacity:.07; }
html[data-rcl-ruler="highlight"] #rcl-ruler-layer,
html[data-rcl-ruler="mask"] #rcl-ruler-layer { display:block; }

/* Arm transitions only after saved prefs are applied (avoids a FOUC pop) */
.rcl-armed #rcl-tint  { transition:background-color .2s ease; }
.rcl-armed #rcl-glare { transition:opacity .2s ease; }

/* Self-check step 3 yields the global tint so only ONE tint is ever active */
html[data-rcl-yield="1"] #rcl-tint,
html[data-rcl-yield="1"] #rcl-glare { opacity:0 !important; background:transparent !important; }

/* ---- Reading guide (ruler) band ---- */
.rcl-ruler-band { position:absolute; left:0; right:0; top:0; height:2.4em; transform:translateY(var(--rcl-ruler-y, -200px)); will-change:transform; }
html[data-rcl-ruler="highlight"] .rcl-ruler-band { background:rgba(217,164,65,.20); border-top:1px solid rgba(217,164,65,.5); border-bottom:1px solid rgba(217,164,65,.5); }
html[data-rcl-ruler="mask"] .rcl-ruler-band { background:transparent; box-shadow:0 0 0 100vh rgba(18,54,66,.34); }
@media (prefers-reduced-motion: no-preference) { .rcl-armed .rcl-ruler-band { transition:transform .06s linear; } }

/* ---- Compare (split-screen before/after) ---- */
#rcl-split { position:fixed; top:0; bottom:0; left:var(--rcl-split-x, 50%); width:2px; margin-left:-1px; background:var(--navy); z-index:9000; display:none; }
html[data-rcl-compare="1"] #rcl-split { display:block; }
html[data-rcl-compare="1"] #rcl-tint { clip-path:inset(0 0 0 var(--rcl-split-x, 50%)); }
#rcl-split .rcl-grip { position:absolute; top:50%; left:50%; width:44px; height:44px; margin:-22px 0 0 -22px; border-radius:50%; background:var(--cream); border:1px solid var(--navy); color:var(--navy); cursor:ew-resize; display:grid; place-items:center; font-size:1rem; box-shadow:var(--shadow); touch-action:none; }
#rcl-split .rcl-grip:focus-visible { outline:3px solid var(--teal); outline-offset:2px; }

/* ---- Dyslexia-friendly font: swap the brand font variables to OpenDyslexic ---- */
html[data-rcl-font="dyslexic"] { --serif:"OpenDyslexic","Comic Sans MS",sans-serif; --sans:"OpenDyslexic",system-ui,sans-serif; }
html[data-rcl-font="dyslexic"] body { letter-spacing:.01em; word-spacing:.05em; }

/* ---- Text size + line spacing (driven by data-attrs on <html>) ---- */
html[data-rcl-textscale="1.15"] { font-size:18.4px; }
html[data-rcl-textscale="1.3"]  { font-size:20.8px; }
html[data-rcl-textscale] body   { font-size:1.0625rem; }
html[data-rcl-line="1.9"] body  { line-height:1.9; }
html[data-rcl-line="2.2"] body  { line-height:2.2; }

/* ---- Launcher pill (always above the tint, so it is never tinted) ---- */
#rcl-launcher {
  position:fixed; right:max(18px, env(safe-area-inset-right)); bottom:max(18px, env(safe-area-inset-bottom));
  z-index:9000; display:inline-flex; align-items:center; gap:10px; height:52px; padding:0 18px;
  border-radius:999px; background:var(--cream); color:var(--navy); border:1px solid var(--navy);
  font-family:var(--sans); font-weight:600; font-size:.95rem; line-height:1; cursor:pointer; box-shadow:var(--shadow);
}
#rcl-launcher:hover { box-shadow:var(--shadow-lg); transform:translateY(-1px); }
#rcl-launcher:focus-visible { outline:3px solid var(--teal); outline-offset:2px; }
/* first-visit attention pulse — gently draws the eye, then settles */
#rcl-launcher.rcl-attention { animation:rcl-pulse 2.2s ease-out 6; }
@keyframes rcl-pulse {
  0%   { box-shadow:var(--shadow), 0 0 0 0 rgba(224,122,95,.55); }
  70%  { box-shadow:var(--shadow), 0 0 0 14px rgba(224,122,95,0); }
  100% { box-shadow:var(--shadow), 0 0 0 0 rgba(224,122,95,0); }
}
@media (prefers-reduced-motion: reduce) { #rcl-launcher.rcl-attention { animation:none; } }
.rcl-dot { width:18px; height:18px; border-radius:50%; border:2px solid var(--navy); flex:none;
  background:repeating-linear-gradient(45deg,#fff,#fff 4px,#dfdfdf 4px,#dfdfdf 8px); }

/* ---- First-visit nudge ---- */
.rcl-nudge {
  position:fixed; right:max(18px, env(safe-area-inset-right)); bottom:calc(max(18px, env(safe-area-inset-bottom)) + 64px);
  z-index:9000; max-width:236px; background:var(--navy); color:#fff; padding:12px 36px 12px 14px; border-radius:14px;
  box-shadow:var(--shadow-lg); font-size:.88rem; line-height:1.4;
}
.rcl-nudge button { position:absolute; top:6px; right:6px; width:26px; height:26px; border:0; border-radius:50%;
  background:rgba(255,255,255,.14); color:#fff; cursor:pointer; font-size:.9rem; line-height:1; }
.rcl-nudge button:focus-visible { outline:2px solid var(--gold); outline-offset:2px; }

/* ---- Panel ---- */
#rcl-panel {
  position:fixed; top:0; right:0; height:100%; width:min(360px, 92vw); z-index:9001;
  background:var(--cream); color:var(--ink); border-left:1px solid var(--line);
  box-shadow:-18px 0 50px rgba(18,54,66,.18); display:flex; flex-direction:column;
  transform:translateX(105%); visibility:hidden;
}
#rcl-panel.open { transform:none; visibility:visible; }
.rcl-armed #rcl-panel { transition:transform .28s ease, visibility .28s ease; }
.rcl-phead { padding:18px 18px 14px; border-bottom:1px solid var(--line); position:relative; }
.rcl-phead h2 { font-size:1.25rem; margin:0; }
.rcl-phead p { margin:4px 0 0; font-size:.9rem; color:var(--muted); }
.rcl-micro { display:block; margin-top:8px; font-size:.78rem; color:var(--muted); font-style:italic; }
.rcl-close { position:absolute; top:12px; right:12px; width:44px; height:44px; border:0; background:none; cursor:pointer;
  color:var(--navy); font-size:1.5rem; line-height:1; border-radius:10px; }
.rcl-close:hover { background:rgba(18,54,66,.06); }
.rcl-close:focus-visible { outline:2px solid var(--teal); outline-offset:2px; }
.rcl-pbody { overflow-y:auto; flex:1; -webkit-overflow-scrolling:touch; }
.rcl-section { padding:16px 18px; border-bottom:1px solid var(--line); }
.rcl-section > h3 { font-family:var(--sans); font-size:.74rem; letter-spacing:1.2px; text-transform:uppercase; color:var(--muted); margin:0 0 11px; font-weight:700; }
.rcl-help { font-size:.8rem; color:var(--muted); margin:10px 0 0; }

/* swatches */
#rcl-swatches { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; }
.rcl-swatch { width:100%; min-height:44px; aspect-ratio:1/1; border-radius:12px; border:3px solid #fff; padding:0; cursor:pointer;
  position:relative; box-shadow:0 0 0 1px var(--line), 0 4px 10px rgba(0,0,0,.08); }
.rcl-swatch:focus-visible { outline:3px solid var(--teal); outline-offset:2px; }
.rcl-swatch[aria-checked="true"] { outline:3px solid var(--navy); outline-offset:2px; }
.rcl-swatch[aria-checked="true"]:not(.rcl-off)::after { content:"\2713"; position:absolute; inset:0; display:grid; place-items:center;
  color:var(--navy); font-weight:800; font-size:1.1rem; text-shadow:0 0 3px rgba(255,255,255,.8); }
.rcl-swatch.rcl-off { background:repeating-linear-gradient(45deg,#fff,#fff 6px,#eee 6px,#eee 12px); display:grid; place-items:center;
  font-size:.6rem; font-weight:800; color:var(--muted); }

/* strength slider */
.rcl-strength-row { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; }
.rcl-strength-row span { font-weight:600; font-size:.9rem; color:var(--navy); }
#rcl-strength { width:100%; accent-color:var(--coral); height:24px; }
.rcl-clampnote { font-size:.78rem; color:var(--teal); margin:8px 0 0; display:none; }
.rcl-clampnote.show { display:block; }

/* segmented + toggle controls */
.rcl-seg { display:inline-flex; gap:6px; flex-wrap:wrap; }
.rcl-seg button, .rcl-toggle { font-family:var(--sans); font-weight:600; font-size:.88rem; border:1px solid var(--line);
  background:#fff; color:var(--navy); border-radius:999px; padding:9px 15px; min-height:40px; cursor:pointer; }
.rcl-seg button[aria-pressed="true"], .rcl-toggle[aria-pressed="true"] { background:var(--navy); color:#fff; border-color:var(--navy); }
.rcl-seg button:focus-visible, .rcl-toggle:focus-visible { outline:2px solid var(--teal); outline-offset:2px; }
.rcl-toggle-row { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.rcl-subseg { margin-top:10px; display:none; }
.rcl-subseg.show { display:inline-flex; }

/* gated conversion callout */
.rcl-callout { display:none; margin:0; padding:16px 18px; background:var(--teal-100); border-top:1px solid var(--line); }
.rcl-callout.show { display:block; animation:scfade .35s ease; }
.rcl-callout h3 { font-size:1.05rem; margin:0 0 6px; }
.rcl-callout p { font-size:.9rem; margin:0 0 12px; }
.rcl-callout .btn { width:100%; justify-content:center; margin-bottom:8px; }
.rcl-callout .btn:last-child { margin-bottom:0; }
.rcl-callout-extra { font-size:.84rem; color:var(--navy); margin:10px 0 0; font-weight:600; display:none; }
.rcl-callout-extra.show { display:block; }

/* visually-hidden live region */
.rcl-sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* contact-page handoff confirmation */
.rcl-prefill-note { background:var(--success-bg); border:1px solid #bfe0cd; border-radius:var(--radius-sm);
  padding:12px 16px; font-size:.92rem; color:#1c5b39; margin:0 0 18px; display:flex; gap:10px; align-items:center; }
.rcl-prefill-note .rcl-dot { width:20px; height:20px; }

/* mobile: panel becomes a bottom sheet */
@media (max-width:480px) {
  #rcl-panel { top:auto; bottom:0; height:auto; max-height:86vh; width:100%; border-left:0; border-top:1px solid var(--line);
    border-radius:18px 18px 0 0; transform:translateY(105%); box-shadow:0 -18px 50px rgba(18,54,66,.22); }
  #rcl-panel.open { transform:none; }
  #rcl-split .rcl-grip { width:52px; height:52px; margin:-26px 0 0 -26px; }  /* roomier touch target */
}
/* keep every swatch comfortably above the 44px touch minimum on the narrowest phones */
@media (max-width:360px) { #rcl-swatches { grid-template-columns:repeat(4,1fr); } }
/* the ew-resize cursor is a desktop affordance; drop it where there is no pointer */
@media (hover:none) { #rcl-split .rcl-grip { cursor:default; } }

/* high-contrast / forced-colors note: hidden normally, shown only when the tint is paused */
.rcl-fc-note { display:none; margin-top:8px; font-size:.78rem; color:var(--navy); font-weight:600; }
@media (forced-colors: active) { .rcl-fc-note { display:block; } .rcl-micro { display:none; } }

/* honor reduced-motion: kill the slide/morph animation, but leave the open/close
   positioning transforms (desktop translateX vs mobile translateY) to their own
   rules so the panel still hides when closed and shows when open — it just snaps. */
@media (prefers-reduced-motion: reduce) {
  .rcl-armed #rcl-panel { transition:none !important; }
  #rcl-launcher:hover { transform:none; }
  .rcl-callout.show { animation:none; }
}

/* don't fight OS high-contrast / forced-colors themes */
@media (forced-colors: active) {
  #rcl-tint, #rcl-glare { background:transparent !important; }
}

/* keep printed pages clean — the overlay PDF, not the screen tint, is what prints */
@media print {
  #rcl-root, #rcl-tint, #rcl-glare, #rcl-ruler-layer, #rcl-split, .rcl-nudge { display:none !important; }
}