/* ==========================================================================
   Check On Mum - "First light" bespoke identity.
   Calm daily-reassurance brand for adult children of an ageing parent.
   Deliberately distinct from the generic framework AND from the fall
   monitoring sibling (no teal, no coral, no Fraunces). Warm dawn palette,
   Newsreader serif display + Figtree humanist body, gentle pacing.
   Colours in OKLCH. AU English. No em dash anywhere in this file.
   ========================================================================== */

:root{
  /* Warm "first light" surfaces - dusty rose-tinted, not cream/sand */
  --page:        oklch(0.975 0.008 60);   /* soft warm off-white with a rose breath */
  --page-warm:   oklch(0.955 0.018 50);   /* warm band */
  --page-rose:   oklch(0.94 0.026 28);    /* gentle rose band */
  --card:        oklch(0.995 0.004 70);   /* near white, faint warmth */

  /* Ink - deep plum-brown for strong contrast on warm surfaces */
  --ink:         oklch(0.27 0.035 35);    /* body text, ~13:1 on --page */
  --ink-soft:    oklch(0.43 0.03 38);     /* secondary text, > 4.5:1 */
  --ink-faint:   oklch(0.55 0.025 40);    /* captions / fine print, used on light cards only */

  /* Brand - warm clay / terracotta-rose */
  --brand:       oklch(0.52 0.13 32);     /* primary clay rose */
  --brand-deep:  oklch(0.40 0.115 32);    /* hover / deep */
  --brand-soft:  oklch(0.93 0.04 32);     /* tint wash */

  /* Accent - honeyed gold (warmth + first-light) */
  --gold:        oklch(0.74 0.13 78);
  --gold-deep:   oklch(0.60 0.12 70);
  --gold-soft:   oklch(0.93 0.05 82);

  /* Reassurance green - the "all okay" tick, calm not clinical */
  --okay:        oklch(0.55 0.10 150);
  --okay-soft:   oklch(0.93 0.04 150);

  /* Gentle alert - amber-rose, never harsh red */
  --warn:        oklch(0.58 0.14 45);
  --warn-soft:   oklch(0.94 0.045 50);

  --line:        oklch(0.88 0.02 45);     /* hairlines */
  --line-soft:   oklch(0.92 0.015 45);

  --shadow:      0 1px 2px oklch(0.45 0.04 35 / .06),
                 0 8px 26px oklch(0.45 0.06 35 / .08);
  --shadow-lg:   0 2px 6px oklch(0.45 0.04 35 / .08),
                 0 22px 50px oklch(0.45 0.07 35 / .14);

  --r:   16px;
  --r-lg:26px;
  --r-sm:11px;
  --r-pill:999px;

  --serif:"Newsreader", Georgia, "Times New Roman", serif;
  --sans:"Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --wrap:1140px;
  --gut:clamp(1.3rem, 5vw, 4.5rem);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--page);
  color:var(--ink);
  font-family:var(--sans);
  /* large, comfortable body for an older-reader-adjacent audience */
  font-size:clamp(1.08rem, 1.02rem + .35vw, 1.22rem);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;            /* belt-and-braces against horizontal overflow */
}

img,svg{max-width:100%;height:auto}

h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:500;
  line-height:1.12;
  letter-spacing:-0.01em;
  color:var(--ink);
  margin:0 0 .5em;
  text-wrap:balance;
}
h1{font-size:clamp(2.2rem, 1.6rem + 3.4vw, 3.9rem);font-weight:540}
h2{font-size:clamp(1.65rem, 1.3rem + 1.7vw, 2.6rem)}
h3{font-size:clamp(1.2rem, 1.08rem + .55vw, 1.45rem);font-weight:560;letter-spacing:-0.005em}
h4{font-size:1.02rem;font-weight:600;letter-spacing:.01em}
p{margin:0 0 1rem}
strong,b{font-weight:640;color:var(--ink)}

a{color:var(--brand-deep);text-underline-offset:3px;text-decoration-thickness:1.5px}
a:hover{color:var(--brand)}

/* Visible focus ring everywhere - accessibility for older users */
a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,textarea:focus-visible{
  outline:3px solid var(--gold-deep);
  outline-offset:2px;
  border-radius:6px;
}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.measure{max-width:64ch}

.skip{
  position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;
  padding:.7rem 1.1rem;border-radius:0 0 var(--r-sm) 0;z-index:200;font-weight:600;
}
.skip:focus{left:0}

/* ---------- Buttons ---------- big touch targets ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;justify-content:center;
  font-family:var(--sans);font-weight:620;font-size:1rem;line-height:1;
  padding:.92rem 1.4rem;min-height:48px;border-radius:var(--r-pill);
  border:1.5px solid transparent;cursor:pointer;text-decoration:none;
  transition:transform .15s ease, background .15s ease, box-shadow .15s ease, color .15s ease;
}
.btn--lg{padding:1.08rem 1.7rem;font-size:1.06rem;min-height:54px}
.btn--primary{background:var(--brand);color:#fff;box-shadow:var(--shadow)}
.btn--primary:hover{background:var(--brand-deep);color:#fff;transform:translateY(-1px);box-shadow:var(--shadow-lg)}
.btn--ghost{background:transparent;color:var(--brand-deep);border-color:var(--line)}
.btn--ghost:hover{background:var(--card);color:var(--brand-deep);border-color:var(--brand);transform:translateY(-1px)}
@media (prefers-reduced-motion:reduce){.btn:hover{transform:none}}

/* ---------- Header ---------- */
.site{
  position:sticky;top:0;z-index:100;
  background:oklch(0.975 0.008 60 / .86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-soft);
}
.site__in{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:68px}
.brand{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--serif);
  font-weight:560;font-size:1.24rem;color:var(--ink);text-decoration:none;letter-spacing:-.01em}
.brand svg{width:30px;height:30px;flex:none}
.brand:hover{color:var(--brand-deep)}

.nav{display:flex;align-items:center;gap:.4rem}
.nav a{
  color:var(--ink-soft);text-decoration:none;font-weight:560;font-size:1rem;
  padding:.6rem .85rem;border-radius:var(--r-pill);line-height:1;
}
.nav a:not(.btn):hover{color:var(--ink);background:var(--brand-soft)}
.nav a[aria-current="page"]:not(.btn){color:var(--brand-deep);background:var(--brand-soft)}

.nav__toggle{
  display:none;font-family:var(--sans);font-weight:600;font-size:1rem;
  background:var(--card);color:var(--ink);border:1.5px solid var(--line);
  padding:.6rem 1rem;min-height:46px;border-radius:var(--r-pill);cursor:pointer;
}

@media (max-width:760px){
  .nav__toggle{display:inline-flex;align-items:center}
  .nav{
    position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;
    gap:.25rem;background:var(--card);border-bottom:1px solid var(--line);
    padding:.8rem var(--gut) 1.1rem;box-shadow:var(--shadow-lg);
    display:none;
  }
  .nav.open{display:flex}
  .nav a{padding:.85rem 1rem;font-size:1.08rem}
  .nav .btn{margin-top:.35rem}
}

/* ---------- Eyebrow ---------- */
.eyebrow{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--sans);font-weight:640;font-size:.82rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--brand-deep);margin:0 0 1rem;
}
.eyebrow .dot{width:9px;height:9px;border-radius:50%;background:var(--gold);flex:none;
  box-shadow:0 0 0 4px var(--gold-soft)}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  padding:clamp(2.4rem,1.8rem+4vw,5rem) 0 clamp(2rem,1.6rem+3vw,4rem);
  background:
    radial-gradient(120% 80% at 88% -10%, var(--gold-soft) 0%, transparent 55%),
    radial-gradient(110% 90% at -5% 0%, var(--brand-soft) 0%, transparent 50%),
    var(--page);
}
.hero__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.6rem,1rem+3vw,3.4rem);align-items:center}
@media (max-width:880px){.hero__grid{grid-template-columns:1fr;gap:2.2rem}}

.hero .sub{
  font-size:clamp(1.16rem,1.06rem+.4vw,1.34rem);color:var(--ink-soft);
  max-width:36ch;margin-top:.4rem;
}
.hero__cta{display:flex;flex-wrap:wrap;gap:.8rem;margin:1.6rem 0 1.1rem}
.hero__note{
  display:inline-flex;align-items:center;gap:.5rem;color:var(--ink-soft);
  font-size:.98rem;margin:0;
}
.hero__note svg{color:var(--brand);flex:none}

/* ---------- Reassurance card (hero figure) ---------- */
.hero__fig{position:relative}
.peace{
  background:var(--card);border:1px solid var(--line-soft);border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);padding:1.1rem;max-width:430px;margin-inline:auto;
}
.peace__top{
  display:flex;align-items:center;gap:.5rem;font-size:.86rem;font-weight:600;
  color:var(--ink-soft);padding:.2rem .4rem .7rem;border-bottom:1px solid var(--line-soft);
}
.live{width:9px;height:9px;border-radius:50%;background:var(--okay);flex:none;
  box-shadow:0 0 0 4px var(--okay-soft)}
.note{
  display:flex;gap:.7rem;align-items:flex-start;padding:.8rem .5rem;
  border-bottom:1px solid var(--line-soft);
}
.note:last-child{border-bottom:0}
.note__ic{
  width:34px;height:34px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:var(--okay-soft);color:var(--okay);
}
.note b{display:block;font-size:1rem;color:var(--ink);font-weight:620}
.note span span{display:block;font-size:.9rem;color:var(--ink-soft);margin-top:.1rem}
.note--alert .note__ic{background:var(--warn-soft);color:var(--warn)}
.note--alert b{color:var(--warn)}

/* ---------- Sections / bands ---------- */
.band{padding:clamp(2.6rem,2rem+3vw,4.6rem) 0}
.band--warm{background:var(--page-warm)}
.band--rose{background:var(--page-rose)}
.band__head{max-width:62ch;margin-bottom:2rem}
.band__head.center{margin-inline:auto;text-align:center}
.band__head p{color:var(--ink-soft);font-size:1.1rem;margin-bottom:0}
.band__head.center .eyebrow{justify-content:center}

/* ---------- Worry grid ---------- */
.worry{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
@media (max-width:680px){.worry{grid-template-columns:1fr}}
.worry__item{
  background:var(--card);border:1px solid var(--line-soft);border-radius:var(--r);
  padding:1.4rem 1.5rem;box-shadow:var(--shadow);
}
.worry__item h3{margin-bottom:.3rem;color:var(--brand-deep)}
.worry__item p{margin:0;color:var(--ink-soft)}

/* ---------- Trio (trust) ---------- */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
@media (max-width:820px){.trio{grid-template-columns:1fr}}
.trust{
  background:var(--card);border:1px solid var(--line-soft);border-radius:var(--r);
  padding:1.6rem 1.5rem;box-shadow:var(--shadow);
}
.trust__ic{
  width:52px;height:52px;border-radius:14px;display:grid;place-items:center;margin-bottom:1rem;
  background:var(--brand-soft);color:var(--brand-deep);
}
.trust h3{margin-bottom:.35rem}
.trust p{margin:0;color:var(--ink-soft)}

/* ---------- Day rhythm (the reassurance ribbon) ---------- */
.day{position:relative}
.dayribbon{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;position:relative;
}
.dayribbon--3{grid-template-columns:repeat(3,1fr)}
@media (max-width:820px){.dayribbon,.dayribbon--3{grid-template-columns:1fr;gap:.9rem;max-width:30rem;margin-inline:auto}}
.day__step{
  position:relative;background:var(--card);border:1px solid var(--line-soft);
  border-radius:var(--r);padding:1.4rem 1.4rem 1.5rem;box-shadow:var(--shadow);
}
.day__step::before{
  content:"";position:absolute;left:1.4rem;top:1.4rem;width:13px;height:13px;border-radius:50%;
  background:var(--line);box-shadow:0 0 0 4px var(--page);transition:background .4s ease, box-shadow .4s ease;
}
.day__step.is-in::before{background:var(--okay);box-shadow:0 0 0 4px var(--okay-soft)}
.day__time{
  display:block;margin:0 0 .5rem 1.5rem;font-family:var(--sans);font-weight:680;
  font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:oklch(0.54 0.12 70);
}
.day__step h3{margin-bottom:.3rem;font-size:1.18rem}
.day__step p{margin:0;color:var(--ink-soft);font-size:1rem}

/* the closing "all okay" payoff chip */
.day__okay{
  margin-top:1.4rem;display:flex;justify-content:center;
}
.okaychip{
  display:inline-flex;align-items:center;gap:.6rem;background:var(--okay-soft);
  color:oklch(0.40 0.09 150);border:1px solid oklch(0.80 0.06 150);
  font-weight:640;font-size:1.05rem;padding:.7rem 1.3rem;border-radius:var(--r-pill);
}
.okaychip svg{flex:none}

/* ---------- vs (pendant comparison) ---------- */
.vs{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
@media (max-width:760px){.vs{grid-template-columns:1fr}}
.vs__col{background:var(--card);border:1px solid var(--line-soft);border-radius:var(--r);
  padding:1.5rem 1.6rem;box-shadow:var(--shadow)}
.vs__col--win{border-color:oklch(0.80 0.06 150);background:linear-gradient(var(--okay-soft),var(--card))}
.vs__col h3{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem}
.vs__tag{font-family:var(--sans);font-size:.74rem;font-weight:680;letter-spacing:.05em;text-transform:uppercase;
  padding:.3rem .6rem;border-radius:var(--r-pill)}
.vs__col--alt .vs__tag{background:var(--warn-soft);color:oklch(0.50 0.14 45)}
.vs__col--win .vs__tag{background:var(--okay-soft);color:oklch(0.40 0.09 150)}
.vs ul{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.vs li{display:flex;gap:.6rem;align-items:flex-start;font-size:1.02rem;color:var(--ink-soft)}
.vs li svg{flex:none;margin-top:.2rem}
.vs--no li svg{color:var(--warn)}
.vs--yes li svg{color:var(--okay)}

/* ---------- Funding panel ---------- */
.fund{
  background:linear-gradient(135deg, var(--brand-deep), var(--brand));
  color:#fff;border-radius:var(--r-lg);padding:clamp(1.8rem,1.4rem+2vw,3rem);
  box-shadow:var(--shadow-lg);
}
.fund h2{color:#fff}
.fund .eyebrow{color:var(--gold-soft)}
.fund .eyebrow .dot{background:var(--gold);box-shadow:0 0 0 4px oklch(0.74 0.13 78 / .3)}
.fund>p{color:oklch(0.95 0.02 40);font-size:1.12rem;max-width:60ch}
.fund strong{color:#fff}
.fund__row{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:1.6rem 0 1.2rem}
@media (max-width:680px){.fund__row{grid-template-columns:1fr}}
.fund__row>div{background:oklch(1 0 0 / .1);border:1px solid oklch(1 0 0 / .16);
  border-radius:var(--r);padding:1.1rem 1.2rem}
.fund__row b{display:block;font-size:1.1rem;margin-bottom:.2rem;color:#fff}
.fund__row span{font-size:.94rem;color:oklch(0.93 0.02 50)}
.fine{font-size:.92rem;color:oklch(0.95 0.02 50);margin:0;max-width:70ch}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:.7rem;max-width:50rem;margin-inline:auto}
.faq details{
  background:var(--card);border:1px solid var(--line-soft);border-radius:var(--r);
  padding:.4rem 1.3rem;box-shadow:var(--shadow);
}
.faq summary{
  list-style:none;cursor:pointer;font-family:var(--serif);font-weight:540;
  font-size:1.16rem;color:var(--ink);padding:.95rem 0;position:relative;padding-right:2rem;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"+";position:absolute;right:.1rem;top:50%;transform:translateY(-50%);
  font-family:var(--sans);font-weight:600;font-size:1.5rem;color:var(--brand);line-height:1;
}
.faq details[open] summary::after{content:"\2013"} /* en dash glyph, not an em dash */
.faq details[open] summary{border-bottom:1px solid var(--line-soft)}
.faq details p{margin:.9rem 0 1rem;color:var(--ink-soft)}

/* ---------- CTA ---------- */
.cta{padding:clamp(2.6rem,2rem+3vw,4.6rem) 0}
.cta .wrap{
  background:var(--page-rose);border:1px solid var(--line-soft);border-radius:var(--r-lg);
  padding:clamp(2rem,1.6rem+2vw,3.4rem);text-align:center;max-width:var(--wrap);
}
.cta h2{margin-bottom:.5rem}
.cta p{color:var(--ink-soft);max-width:50ch;margin-inline:auto;font-size:1.1rem}
.cta .btn{margin-top:1.4rem}

/* ---------- Breadcrumb ---------- */
.crumbs{font-size:.92rem;color:var(--ink-soft);margin-bottom:1rem}
.crumbs a{color:var(--brand-deep)}

/* ---------- Prose (how-it-works) ---------- */
.prose h2{margin-top:2.2rem}
.prose h2:first-child{margin-top:0}
.prose ul{padding-left:1.2rem;margin:0 0 1.2rem}
.prose li{margin-bottom:.55rem;color:var(--ink-soft)}
.prose li strong{color:var(--ink)}
.callout{
  background:var(--gold-soft);border:1.5px solid oklch(0.78 0.09 80);
  border-radius:var(--r-sm);padding:1.1rem 1.3rem;margin-top:1.6rem;color:var(--ink);font-size:1rem;
}

/* ---------- Contact ---------- */
.cgrid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(1.6rem,1rem+2vw,3rem);align-items:start}
@media (max-width:840px){.cgrid{grid-template-columns:1fr}}
.form{display:grid;gap:1rem;max-width:38rem}
.form__honey{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.field{display:grid;gap:.4rem}
.field label{font-weight:620;font-size:1rem;color:var(--ink)}
.field .opt{font-weight:500;color:var(--ink-soft);font-size:.9rem}
.field input,.field textarea{
  font-family:var(--sans);font-size:1.05rem;color:var(--ink);background:var(--card);
  border:1.5px solid var(--line);border-radius:var(--r-sm);padding:.85rem 1rem;
  min-height:50px;width:100%;
}
.field textarea{min-height:140px;resize:vertical;line-height:1.6}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-faint)}
.field input:focus,.field textarea:focus{border-color:var(--brand)}
.form__note{font-size:.9rem;color:var(--ink-soft);margin:.2rem 0 0}
.aside{
  background:var(--card);border:1px solid var(--line-soft);border-radius:var(--r-lg);
  padding:1.6rem 1.7rem;box-shadow:var(--shadow);
}
.aside dl{margin:0}
.aside dt{font-weight:640;color:var(--ink);margin-top:1rem}
.aside dt:first-of-type{margin-top:0}
.aside dd{margin:.15rem 0 0;color:var(--ink-soft);font-size:1rem}

/* ---------- Footer ---------- */
.foot{background:oklch(0.30 0.04 35);color:oklch(0.90 0.02 50);padding:clamp(2.4rem,2rem+2vw,3.4rem) 0 1.8rem}
.foot__promise{font-family:var(--serif);font-size:clamp(1.4rem,1.1rem+1.5vw,2rem);color:#fff;
  margin:0 0 1.8rem;max-width:30ch}
.foot__cols{display:grid;grid-template-columns:repeat(4,1fr);gap:1.6rem;margin-bottom:1.8rem}
@media (max-width:760px){.foot__cols{grid-template-columns:repeat(2,1fr);gap:1.4rem}}
@media (max-width:420px){.foot__cols{grid-template-columns:1fr}}
.foot h4{color:#fff;font-family:var(--sans);font-size:.86rem;letter-spacing:.08em;
  text-transform:uppercase;margin:0 0 .8rem}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.foot li{color:oklch(0.85 0.02 50);font-size:.98rem}
.foot a{color:oklch(0.88 0.03 55);text-decoration:none}
.foot a:hover{color:#fff;text-decoration:underline}
.foot__call{
  display:inline-flex;align-items:center;gap:.5rem;font-weight:640;color:#fff;
  font-size:1.06rem;min-height:44px;
}
.foot__call svg{flex:none;color:var(--gold)}
.foot__contact{display:grid;gap:.55rem;margin-top:.2rem}
.foot__bottom{
  display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;justify-content:space-between;align-items:center;
  border-top:1px solid oklch(1 0 0 / .14);padding-top:1.4rem;font-size:.9rem;
  color:oklch(0.82 0.02 50);
}
.foot__bottom a{color:oklch(0.88 0.03 55)}
.foot__legal{display:flex;flex-wrap:wrap;gap:.4rem .9rem;align-items:center}

/* ---------- Reveal motion ---------- visible by default ---------- */
.reveal{opacity:1;transform:none}
.js .reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease, transform .6s ease}
.js .reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none;transition:none}
}