/* ==========================================================================
   Seniors IT | bespoke accessible identity (seniorsit.au)
   "Patient tech help, at your pace." Warm, calm, dignified, genuinely
   accessible: larger comfortable type, high contrast, generous spacing,
   plain language. Distinct from the niche framework and from sister sites:
   warm sage-green + soft reassuring blue on warm cream, a humanist serif
   (Newsreader) paired with Atkinson Hyperlegible body for low-vision comfort,
   and a gentle scroll-driven "worry being eased" centrepiece.
   Accessibility is part of the brand. No build step, no dependencies.
   ========================================================================== */
:root{
  --bg:        oklch(0.985 0.012 88);
  --bg-2:      oklch(0.962 0.018 86);
  --paper:     oklch(1 0 0);
  --ink:       oklch(0.27 0.026 168);
  --ink-soft:  oklch(0.38 0.024 168);
  --muted:     oklch(0.47 0.022 168);
  --brand:     oklch(0.50 0.078 168);
  --brand-ink: oklch(0.42 0.080 168);
  --brand-deep:oklch(0.29 0.046 170);
  --night:     oklch(0.27 0.038 188);
  --accent:    oklch(0.55 0.108 246);
  --accent-ink:oklch(0.46 0.110 248);
  --accent-soft:oklch(0.92 0.038 240);
  --sky:       oklch(0.90 0.046 232);
  --sage:      oklch(0.948 0.026 158);
  --warm:      oklch(0.93 0.044 78);
  --line:      oklch(0.88 0.018 140);
  --on-dark:   oklch(0.975 0.014 90);
  --ok:        oklch(0.52 0.092 162);

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

  --maxw: 1180px;
  --gutter: clamp(1.25rem, 5vw, 5rem);
  --radius: 18px; --radius-lg: 28px; --radius-sm: 13px;
  --shadow: 0 2px 6px oklch(0.3 0.04 168 / .05), 0 24px 60px -24px oklch(0.3 0.05 168 / .24);
  --shadow-sm: 0 1px 3px oklch(0.3 0.04 168 / .06), 0 10px 24px -16px oklch(0.3 0.05 168 / .2);

  --z-nav:200;
  --ease: cubic-bezier(.16,1,.3,1);
}
*,*::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(--bg); color:var(--ink); font-family:var(--sans);
  /* larger, comfortable reading size for older eyes */
  font-size:clamp(1.08rem,1.02rem + .26vw,1.24rem); line-height:1.7;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{ max-width:100%; display:block; }
a{ color:var(--accent-ink); }
::selection{ background:oklch(0.90 0.046 232 / .85); }

h1,h2,h3{ font-family:var(--serif); font-weight:480; line-height:1.08;
  letter-spacing:-0.012em; text-wrap:balance; margin:0; color:var(--ink);
  font-optical-sizing:auto; overflow-wrap:break-word; }
h1{ font-size:clamp(2.5rem,1.7rem + 3.8vw,4.6rem); }
h2{ font-size:clamp(1.95rem,1.4rem + 2.4vw,3.1rem); }
h3{ font-size:clamp(1.3rem,1.15rem + .7vw,1.6rem); }
p{ margin:0; text-wrap:pretty; overflow-wrap:break-word; }
.lead{ font-size:clamp(1.22rem,1.1rem + .6vw,1.5rem); line-height:1.55; color:var(--ink-soft); }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.measure{ max-width:62ch; }
.skip{ position:absolute; left:-999px; }
.skip:focus{ left:1rem; top:1rem; z-index:999; background:var(--ink); color:#fff; padding:.7rem 1rem; border-radius:8px; }
/* generous, very visible focus ring: accessibility-first */
:where(a,button,summary,input,textarea):focus-visible{ outline:3px solid var(--accent); outline-offset:3px; border-radius:6px; }

/* ---------- buttons (large comfortable targets) ---------- */
.btn{ display:inline-flex; align-items:center; gap:.55rem; font-family:var(--sans); font-weight:700; white-space:nowrap;
  font-size:1.06rem; line-height:1; padding:1rem 1.6rem; border-radius:999px; border:2px solid transparent;
  text-decoration:none; cursor:pointer; min-width:0;
  transition:transform .4s var(--ease), background-color .25s, box-shadow .4s, border-color .25s; }
.btn--primary{ background:var(--accent); color:oklch(0.99 0.01 240); box-shadow:0 10px 26px -10px oklch(0.55 0.108 246 / .55); }
.btn--primary:hover{ background:var(--accent-ink); transform:translateY(-2px); box-shadow:0 16px 36px -10px oklch(0.55 0.108 246 / .65); }
.btn--ghost{ background:var(--paper); color:var(--brand-ink); border-color:var(--line); }
.btn--ghost:hover{ border-color:var(--brand); transform:translateY(-2px); }
.btn--lg{ padding:1.15rem 2rem; font-size:1.14rem; }
.textlink{ color:var(--accent-ink); font-weight:700; text-decoration:none; border-bottom:2px solid oklch(0.55 0.108 246 / .42); padding-bottom:1px; transition:border-color .25s; }
.textlink:hover{ border-color:var(--accent); }
@media (prefers-reduced-motion: reduce){ .btn:hover{ transform:none; } }

/* ---------- header ---------- */
.nav{ position:sticky; top:0; z-index:var(--z-nav); background:oklch(0.985 0.012 88 / .85); backdrop-filter:blur(12px) saturate(1.25);
  border-bottom:1px solid transparent; transition:border-color .3s, background-color .3s; }
.nav.is-stuck{ border-color:var(--line); }
.nav__in{ display:flex; align-items:center; justify-content:space-between; min-height:74px; gap:1rem; flex-wrap:wrap; }
.brand{ display:inline-flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--ink); font-family:var(--serif); font-weight:560; font-size:1.4rem; letter-spacing:-0.01em; }
.brand svg{ width:34px; height:34px; flex:none; }
.nav__cta{ display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap; }
.nav__cta a:not(.btn){ color:var(--ink-soft); text-decoration:none; font-weight:700; font-size:1.02rem; }
.nav__cta a:not(.btn):hover{ color:var(--brand-ink); }
.nav__cta a:not(.btn).is-here{ color:var(--brand-ink); }
@media (max-width:560px){ .nav__cta a:not(.btn){ display:none; } }

/* ---------- hero ---------- */
.hero{ position:relative; padding:clamp(3.2rem,2.6rem + 6vw,7rem) 0 clamp(2.8rem,2rem + 5vw,5.5rem); overflow:hidden; }
.hero::before{ content:""; position:absolute; inset:-30% -10% auto -10%; height:92%; z-index:-1;
  background:radial-gradient(58% 70% at 74% 16%, oklch(0.90 0.046 232 / .8), transparent 70%),
             radial-gradient(52% 62% at 10% 2%, oklch(0.948 0.026 158 / .82), transparent 66%);
  filter:blur(10px); }
.hero__in{ display:grid; grid-template-columns:1.12fr .88fr; gap:clamp(2rem,4vw,5rem); align-items:center; }
@media (max-width:920px){ .hero__in{ grid-template-columns:1fr; } }
.kicker{ font-family:var(--sans); font-weight:700; letter-spacing:.01em; color:var(--brand-ink); font-size:1rem;
  margin:0 0 1rem; display:inline-flex; gap:.5rem; align-items:center; }
.kicker svg{ width:20px; height:20px; flex:none; color:var(--brand); }
.hero h1{ margin-bottom:1.3rem; }
.hero h1 em{ font-style:italic; color:var(--accent-ink); font-weight:480; }
.hero .lead{ max-width:42ch; margin-bottom:2rem; }
.hero__cta{ display:flex; flex-wrap:wrap; gap:1rem; align-items:center; }
.hero__note{ margin-top:1.8rem; color:var(--muted); font-size:1.02rem; font-weight:600; display:flex; gap:.55rem; align-items:flex-start; max-width:44ch; }
.hero__note svg{ width:21px; height:21px; flex:none; color:var(--brand); margin-top:.15rem; }

/* hero art: a calm device that goes from a worried prompt to a kind helping hand */
.hero__art{ position:relative; justify-self:center; width:min(100%,420px); aspect-ratio:1; }
.calm{ position:absolute; inset:0; display:grid; place-items:center; }
.calm::before{ content:""; position:absolute; width:84%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle at 50% 44%, oklch(0.97 0.03 200), oklch(0.90 0.046 232 / .5) 58%, transparent 73%); }
.calm__ring{ position:absolute; border-radius:50%; border:1.6px solid oklch(0.50 0.078 168 / .22); }
.calm__ring.r1{ width:92%; aspect-ratio:1; animation:breathe 6s var(--ease) infinite; }
.calm__ring.r2{ width:64%; aspect-ratio:1; animation:breathe 6s var(--ease) infinite 1.1s; }
.calm__ring.r3{ width:40%; aspect-ratio:1; border-color:oklch(0.50 0.078 168 / .36); }
@keyframes breathe{ 0%{ transform:scale(.92); opacity:.7; } 70%{ opacity:.16; } 100%{ transform:scale(1.12); opacity:0; } }
.calm__core{ position:relative; width:23%; aspect-ratio:1; border-radius:30%; background:var(--brand); color:var(--on-dark);
  display:grid; place-items:center; box-shadow:0 16px 34px -8px oklch(0.50 0.078 168 / .6); }
.calm__core svg{ width:52%; height:52%; }
.hero__chip{ position:absolute; background:var(--paper); border-radius:16px; box-shadow:var(--shadow);
  padding:.78rem .95rem; display:flex; gap:.6rem; align-items:center; max-width:230px; }
.hero__chip .dot{ width:38px; height:38px; flex:none; border-radius:12px; display:grid; place-items:center; }
.hero__chip .dot svg{ width:20px; height:20px; }
.hero__chip b{ font-family:var(--sans); font-weight:700; font-size:.92rem; display:block; color:var(--ink); }
.hero__chip small{ color:var(--muted); font-size:.82rem; }
.hero__chip.calm-note{ top:5%; right:-3%; }
.hero__chip.calm-note .dot{ background:var(--sky); color:var(--accent-ink); }
.hero__chip.help-note{ left:-3%; bottom:9%; }
.hero__chip.help-note .dot{ background:var(--sage); color:var(--brand); }
@media (prefers-reduced-motion: reduce){ .calm__ring{ animation:none; } }
@media (max-width:920px){ .hero__art{ width:min(80%,320px); margin-top:.5rem; } }
@media (max-width:420px){ .hero__chip{ max-width:200px; } }

/* ---------- section rhythm ---------- */
.section{ padding:clamp(3.6rem,3rem + 5vw,7rem) 0; }
.section.panel{ background:var(--bg-2); }
.section__head{ max-width:46ch; margin-bottom:clamp(2rem,3vw,3rem); }
.section__head h2{ margin-bottom:.9rem; }
.section__head p{ color:var(--ink-soft); font-size:1.18rem; }

/* ---------- story: sticky calm scene + scrolling beats (worry -> confident) ---------- */
.story{ background:var(--night); color:var(--on-dark); position:relative; }
.story::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(42% 30% at 82% 8%, oklch(0.55 0.108 246 / .26), transparent 70%),
             radial-gradient(46% 36% at 8% 96%, oklch(0.50 0.078 168 / .34), transparent 70%); }
.story .wrap{ position:relative; z-index:1; }
.story__intro{ max-width:44ch; padding-bottom:clamp(1rem,2vw,2.5rem); }
.story__intro h2{ color:var(--on-dark); margin-bottom:.9rem; }
.story__intro p{ color:oklch(0.86 0.02 90); font-size:1.18rem; }
.story__intro .tag{ font-family:var(--sans); font-weight:700; letter-spacing:.01em; color:var(--sky); font-size:.98rem; margin-bottom:1rem; display:inline-flex; gap:.5rem; align-items:center; }
.story__intro .tag svg{ width:19px; height:19px; flex:none; }

.story__cols{ display:grid; grid-template-columns:0.92fr 1.08fr; gap:clamp(2rem,5vw,6rem); align-items:start; }
.story__stage{ position:sticky; top:0; height:100vh; display:flex; align-items:center; justify-content:center; }
.beats{ padding:4vh 0 8vh; }
.beat{ min-height:62vh; display:flex; flex-direction:column; justify-content:center; max-width:32ch; }
.beat__step{ font-family:var(--sans); font-weight:700; font-size:.96rem; letter-spacing:.03em; color:var(--sky); margin-bottom:.7rem; display:inline-flex; gap:.5rem; align-items:center; }
.beat__step .num{ width:28px; height:28px; flex:none; border-radius:50%; border:1.6px solid oklch(0.90 0.046 232 / .45); display:grid; place-items:center; font-size:.86rem; }
.beat h3{ color:var(--on-dark); font-size:clamp(1.6rem,1.2rem + 1.8vw,2.5rem); margin-bottom:.8rem; }
.beat p{ color:oklch(0.85 0.02 90); font-size:1.14rem; }
.beat.is-good .beat__step{ color:var(--ok); }
.beat.is-good .beat__step .num{ border-color:oklch(0.52 0.092 162 / .6); }

/* the calm "tablet" scene that transitions from a worried prompt to confidence */
.glass{ width:min(330px,76vw); aspect-ratio:3/4; background:#0e1714; border-radius:30px; padding:13px;
  box-shadow:0 0 0 2px oklch(0.5 0.05 168 / .35), 0 44px 84px -30px #000; position:relative; }
.glass__screen{ position:relative; width:100%; height:100%; border-radius:20px; overflow:hidden;
  background:linear-gradient(180deg, oklch(0.5 0.07 200), oklch(0.34 0.055 196)); }
.scene{ position:absolute; inset:0; padding:1.6rem 1.4rem; display:flex; flex-direction:column; gap:.9rem;
  opacity:0; transform:scale(1.02); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.scene.is-active{ opacity:1; transform:none; }
.scene__app{ text-align:center; font-size:.74rem; letter-spacing:.06em; opacity:.78; font-family:var(--sans); text-transform:uppercase; color:oklch(0.95 0.01 90); }
.scene__face{ display:grid; place-items:center; margin:auto 0; }
.scene__face .ball{ width:118px; height:118px; border-radius:50%; display:grid; place-items:center; }
.scene__face .ball svg{ width:60px; height:60px; }
.scene__card{ background:oklch(1 0 0 / .15); backdrop-filter:blur(6px); border:1px solid oklch(1 0 0 / .2);
  border-radius:16px; padding:.95rem 1rem; display:flex; gap:.7rem; align-items:center; color:#fff; }
.scene__card .ic{ width:42px; height:42px; flex:none; border-radius:12px; background:oklch(1 0 0 / .2); display:grid; place-items:center; }
.scene__card .ic svg{ width:23px; height:23px; }
.scene__card b{ font-size:.96rem; font-weight:700; display:block; font-family:var(--sans); }
.scene__card small{ font-size:.82rem; opacity:.85; line-height:1.4; }
/* worried scene tints amber/grey; resolved scene tints calm green */
.scene--worry .ball{ background:oklch(0.78 0.10 70 / .9); color:oklch(0.32 0.08 60); }
.scene--worry .scene__screen{}
.scene--help .ball{ background:oklch(1 0 0 / .18); color:#fff; }
.scene--good .ball{ background:oklch(0.62 0.12 162 / .92); color:#fff; }
.scene--good .scene__card{ background:oklch(0.52 0.092 162 / .9); border-color:oklch(0.7 0.1 160 / .5); }

@media (max-width:900px){
  .story__cols{ grid-template-columns:1fr; }
  .story__stage{ height:auto; position:sticky; top:64px; padding:1rem 0 1.5rem; }
  .glass{ width:min(238px,58vw); }
  .beats{ padding:2vh 0 0; }
  .beat{ min-height:54vh; }
}

/* ---------- pains (the "you're in the right place" grid) ---------- */
.pains{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(1.2rem,2.4vw,1.8rem); }
@media (max-width:740px){ .pains{ grid-template-columns:1fr; } }
.pain{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:clamp(1.5rem,1.2rem + 1vw,2rem); box-shadow:var(--shadow-sm); }
.pain h3{ display:flex; gap:.7rem; align-items:center; font-size:1.32rem; margin-bottom:.6rem; }
.pain h3 .x{ width:34px; height:34px; flex:none; border-radius:50%; background:var(--warm); color:oklch(0.5 0.13 60);
  display:grid; place-items:center; font-family:var(--sans); font-weight:700; font-size:1.1rem; }
.pain p{ color:var(--ink-soft); }

/* ---------- feature grid ---------- */
.feats{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.4rem,2.6vw,2.2rem); }
@media (max-width:860px){ .feats{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .feats{ grid-template-columns:1fr; } }
.feat{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:clamp(1.5rem,1.2rem + 1vw,2.1rem);
  box-shadow:var(--shadow-sm); display:flex; gap:1.1rem; }
.feat--stack{ flex-direction:column; }
.feat__ic{ width:48px; height:48px; flex:none; border-radius:14px; background:var(--sage); color:var(--brand);
  padding:11px; }
.feat h3{ font-size:1.28rem; margin-bottom:.45rem; }
.feat p{ color:var(--ink-soft); font-size:1.04rem; }
.feat > div{ min-width:0; }

/* ---------- compare / confidence chart (scroll-animated centrepiece-lite) ---------- */
.compare{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,4vw,4rem); align-items:center; }
@media (max-width:860px){ .compare{ grid-template-columns:1fr; } }
.compare p{ color:var(--ink-soft); }
.compare p.lead{ color:var(--ink-soft); margin-bottom:1rem; }
.confid{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg); padding:clamp(1.6rem,1.3rem + 1.5vw,2.4rem); box-shadow:var(--shadow); }
.confid h3{ font-family:var(--sans); font-weight:700; font-size:1.15rem; margin-bottom:1.3rem; color:var(--ink); }
.confid__row{ display:grid; grid-template-columns:5.5rem 1fr; gap:1rem; align-items:center; margin-bottom:1rem; }
.confid__yr{ font-weight:700; font-size:1rem; color:var(--muted); }
.confid__track{ height:18px; border-radius:999px; background:var(--bg-2); overflow:hidden; }
.confid__track i{ display:block; height:100%; width:0; border-radius:999px; background:linear-gradient(90deg, var(--brand), var(--ok));
  transition:width 1.1s var(--ease); }
.confid__track.now i{ background:linear-gradient(90deg, var(--accent), var(--brand)); }
.is-shown .confid__track i{ width:var(--w); }
.confid__note{ color:var(--muted); font-size:1rem; margin-top:1.1rem; }

/* ---------- steps (numbered sequence) ---------- */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.5rem,3vw,3rem); counter-reset:s; }
@media (max-width:820px){ .steps{ grid-template-columns:1fr; gap:0; } }
.step{ counter-increment:s; position:relative; padding-top:1.7rem; border-top:3px solid var(--line); }
@media (max-width:820px){ .step{ padding:1.6rem 0; } .step + .step{ border-top:1px solid var(--line); } }
.step::before{ content:none; font-family:var(--serif); font-weight:560; font-size:1.6rem; color:var(--accent-ink); position:absolute; top:1.4rem; right:0; }
.step h3{ font-size:1.3rem; margin:.2rem 0 .5rem; }
.step p{ color:var(--ink-soft); }

/* ---------- proof band ---------- */
.proof{ background:linear-gradient(135deg, oklch(0.50 0.078 168), oklch(0.34 0.05 174)); color:var(--on-dark);
  border-radius:var(--radius-lg); padding:clamp(2.2rem,1.8rem + 4vw,4rem); }
.proof h2{ color:var(--on-dark); max-width:22ch; margin-bottom:1rem; }
.proof p{ color:oklch(0.92 0.02 90); max-width:62ch; font-size:1.14rem; }
.proof a{ color:#fff; text-decoration:underline; text-underline-offset:3px; }
.stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; margin-top:2.2rem; }
@media (max-width:680px){ .stats{ grid-template-columns:1fr; } }
.stat{ background:oklch(1 0 0 / .12); border:1px solid oklch(1 0 0 / .2); border-radius:var(--radius); padding:1.3rem 1.4rem; }
.stat b{ font-family:var(--serif); font-weight:500; font-size:1.7rem; display:block; color:#fff; }
.stat span{ color:oklch(0.9 0.02 90); font-size:1rem; }

/* ---------- faq ---------- */
.faq{ max-width:780px; }
.faq details{ border-bottom:1px solid var(--line); }
.faq summary{ list-style:none; cursor:pointer; padding:1.5rem 2.6rem 1.5rem 0; position:relative; font-family:var(--serif); font-weight:520; font-size:1.3rem; color:var(--ink); }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:""; position:absolute; right:.3rem; top:50%; width:14px; height:14px; margin-top:-8px;
  border-right:2.4px solid var(--accent); border-bottom:2.4px solid var(--accent); transform:rotate(45deg); transition:transform .3s var(--ease); }
.faq details[open] summary::after{ transform:rotate(225deg); }
.faq p{ color:var(--ink-soft); padding-bottom:1.5rem; max-width:66ch; }

/* ---------- closing CTA ---------- */
.close{ text-align:center; position:relative; overflow:hidden; }
.close::before{ content:""; position:absolute; inset:auto -10% -40% -10%; height:72%; z-index:-1;
  background:radial-gradient(50% 100% at 50% 100%, oklch(0.90 0.046 232 / .7), transparent 72%); }
.close h2{ max-width:20ch; margin:0 auto 1.2rem; }
.close p{ max-width:50ch; margin:0 auto 2rem; color:var(--ink-soft); font-size:1.2rem; }
.close__cta{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

/* ---------- contact page ---------- */
.contact-grid{ display:grid; grid-template-columns:1.2fr .8fr; gap:clamp(2rem,4vw,4rem); align-items:start; }
@media (max-width:880px){ .contact-grid{ grid-template-columns:1fr; } }
.card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg); padding:clamp(1.6rem,1.2rem + 2vw,2.6rem); box-shadow:var(--shadow-sm); }
.card h2{ font-size:clamp(1.5rem,1.2rem + 1vw,1.95rem); margin-bottom:1.4rem; }
.form{ display:grid; gap:1.2rem; }
.form__honey{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.field{ display:grid; gap:.45rem; }
.field label{ font-family:var(--sans); font-weight:700; font-size:1.04rem; color:var(--ink); }
.field .opt{ font-weight:400; color:var(--muted); }
.field input,.field textarea{ font-family:var(--sans); font-size:1.08rem; color:var(--ink); background:var(--bg); border:2px solid var(--line);
  border-radius:var(--radius-sm); padding:.9rem 1rem; width:100%; min-width:0; transition:border-color .2s, box-shadow .2s; }
.field textarea{ min-height:8.5rem; resize:vertical; line-height:1.6; }
.field input:focus,.field textarea:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px oklch(0.55 0.108 246 / .16); }
.form button{ justify-self:start; }
.form__note{ color:var(--muted); font-size:.96rem; max-width:50ch; }
.aside h2{ font-size:1.35rem; margin-bottom:.5rem; }
.aside dl{ margin:1.2rem 0 0; }
.aside dt{ font-family:var(--sans); font-weight:700; font-size:1.06rem; color:var(--ink); margin-top:1.1rem; }
.aside dt:first-child{ margin-top:0; }
.aside dd{ margin:.25rem 0 0; color:var(--ink-soft); }
.aside .label{ font-family:var(--sans); font-weight:700; font-size:.92rem; color:var(--muted); margin-top:1.5rem; }
.aside .fine{ margin-top:1.5rem; color:var(--muted); font-size:1rem; }

/* ==========================================================================
   long-form PROSE layer (article bodies) — reusable, scoped to .prose
   Uses ONLY existing brand tokens & fonts. No new colours, no chrome changes.
   Contrast verified against --bg: body --ink-soft 9.47:1, headings --ink
   14.29:1, links --accent-ink 6.8:1 — all >= 4.5:1.
   ========================================================================== */
.prose{
  /* readable measure, centred */
  max-width:68ch;
  margin-inline:auto;
  color:var(--ink-soft);
  font-size:clamp(1.08rem,1.02rem + .26vw,1.2rem);
  line-height:1.75;
  text-wrap:pretty;
}
.prose > :first-child{ margin-top:0; }
.prose > :last-child{ margin-bottom:0; }

/* paragraphs: comfortable spacing */
.prose p{ margin:0 0 1.1em; color:var(--ink-soft); }

/* lead / opening paragraph: slightly larger, softer */
.prose .lead,
.prose > p:first-of-type{
  font-size:clamp(1.2rem,1.08rem + .55vw,1.42rem);
  line-height:1.55;
  color:var(--muted);
  margin-bottom:1.5em;
}
.prose .lead{ color:var(--muted); }

/* heading rhythm: display serif, generous top / tighter bottom */
.prose h2,
.prose h3{ font-family:var(--serif); color:var(--ink); text-wrap:balance; letter-spacing:-0.012em; }
.prose h2{
  font-size:clamp(1.7rem,1.3rem + 1.7vw,2.4rem);
  line-height:1.12;
  margin:2.2em 0 .6em;
}
.prose h3{
  font-size:clamp(1.3rem,1.15rem + .7vw,1.6rem);
  line-height:1.2;
  margin:1.8em 0 .5em;
}
.prose h2:first-child,
.prose h3:first-child{ margin-top:0; }
/* the article H1 keeps its global styling; just give it breathing room below */
.prose > h1{ margin-bottom:.6em; }
.prose > h1 + p,
.prose > h1 + .lead{ margin-top:0; }

/* lists: proper indent, accent markers, comfortable li spacing */
.prose ul,
.prose ol{ margin:0 0 1.4em; padding-left:1.5em; }
.prose li{ margin:0 0 .6em; padding-left:.25em; line-height:1.7; }
.prose li:last-child{ margin-bottom:0; }
.prose li::marker{ color:var(--accent-ink); font-weight:700; }
.prose ul{ list-style:disc; }
.prose ol{ list-style:decimal; }
.prose li > strong:first-child{ color:var(--ink); }
.prose li ul,
.prose li ol{ margin:.6em 0 0; }

/* links: visible, accessible, brand accent */
.prose a:not(.btn):not(.textlink){
  color:var(--accent-ink);
  text-decoration:underline;
  text-decoration-thickness:1.5px;
  text-underline-offset:3px;
  text-decoration-color:oklch(0.55 0.108 246 / .5);
  transition:text-decoration-color .25s var(--ease), color .25s var(--ease);
}
.prose a:not(.btn):not(.textlink):hover{
  color:var(--accent);
  text-decoration-color:var(--accent);
}

/* blockquote */
.prose blockquote{
  margin:1.6em 0;
  padding:.4em 0 .4em 1.2em;
  border-left:3px solid var(--brand);
  color:var(--ink-soft);
  font-style:italic;
}
.prose blockquote p:last-child{ margin-bottom:0; }

/* inline + block code (if present) */
.prose code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.9em;
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:.12em .4em;
  color:var(--ink);
}
.prose pre{
  background:var(--bg-2);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  padding:1rem 1.1rem;
  overflow:auto;
  margin:0 0 1.4em;
}
.prose pre code{ background:none; border:0; padding:0; font-size:.92em; }

/* horizontal rule */
.prose hr{ border:0; border-top:1px solid var(--line); margin:2.4em 0; }

/* generous spacing for the FAQ / sub-section block inside the article */
.prose #faq,
.prose .article-section{ margin-top:2.4em; }

/* styled FAQ <details>/<summary> — rounded, hairline border, clear open state.
   Applies to FAQ items that aren't already wrapped in the homepage .faq list. */
.prose details{
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:var(--paper);
  margin:0 0 .75em;
  box-shadow:var(--shadow-sm);
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.prose details[open]{ border-color:var(--brand); }
.prose summary{
  list-style:none;
  cursor:pointer;
  position:relative;
  padding:1.05rem 3rem 1.05rem 1.2rem;
  font-family:var(--serif);
  font-weight:520;
  font-size:1.2rem;
  line-height:1.3;
  color:var(--ink);
  border-radius:var(--radius-sm);
}
.prose summary::-webkit-details-marker{ display:none; }
.prose summary::after{
  content:"";
  position:absolute;
  right:1.2rem; top:50%;
  width:11px; height:11px; margin-top:-7px;
  border-right:2.4px solid var(--accent-ink);
  border-bottom:2.4px solid var(--accent-ink);
  transform:rotate(45deg);
  transition:transform .3s var(--ease);
}
.prose details[open] summary::after{ transform:rotate(225deg); margin-top:-3px; }
.prose details > p,
.prose details > :not(summary){
  margin:0;
  padding:0 1.2rem 1.1rem;
  color:var(--ink-soft);
}
.prose details > p + p{ padding-top:.6rem; }

/* a closing call-to-action paragraph inside the prose, gently set apart */
.prose p.cta{
  margin-top:1.8em;
  padding-top:1.5em;
  border-top:1px solid var(--line);
  color:var(--ink-soft);
}

/* if the homepage .faq component is used inside the article, don't double-box it */
.prose .faq details{ border:0; border-bottom:1px solid var(--line); border-radius:0; background:none; box-shadow:none; margin:0; }
.prose .faq summary{ padding:1.5rem 2.6rem 1.5rem 0; }
.prose .faq summary::after{ right:.3rem; }
.prose .faq p{ padding:0 0 1.5rem; }

@media (prefers-reduced-motion: reduce){
  .prose a:not(.btn):not(.textlink),
  .prose details,
  .prose summary::after{ transition:none; }
}

/* ---------- footer ---------- */
.foot{ background:var(--brand-deep); color:oklch(0.86 0.02 90); padding:clamp(3rem,2rem + 3vw,4.5rem) 0 2.5rem; }
.foot a{ color:oklch(0.92 0.02 90); }
.foot__top{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:2.5rem; }
.foot__brand{ max-width:32ch; }
.foot__brand .brand{ color:var(--on-dark); }
.foot__promise{ font-family:var(--serif); font-weight:500; font-size:1.5rem; color:var(--on-dark); margin:0; max-width:18ch; }
.foot__cols{ display:flex; flex-wrap:wrap; gap:2.5rem 3.5rem; }
.foot__col h4{ font-family:var(--sans); font-size:.82rem; text-transform:uppercase; letter-spacing:.08em; color:var(--sky); margin:0 0 .9rem; }
.foot__col ul{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem; }
.foot__col li{ color:oklch(0.84 0.02 90); font-size:1rem; }
.foot__col a{ text-decoration:none; font-size:1rem; }
.foot__col a:hover{ color:#fff; }
.foot__bottom{ border-top:1px solid oklch(1 0 0 / .12); margin-top:2.8rem; padding-top:1.6rem; display:flex; flex-wrap:wrap; gap:.6rem 1.6rem; justify-content:space-between; color:oklch(0.74 0.02 90); font-size:.92rem; }
.foot__bottom a{ color:oklch(0.84 0.02 90); }

/* ---------- reveal motion (visible by default; JS hides only below-fold) ---------- */
.reveal{ transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-pending{ opacity:0; transform:translateY(22px); }
@media (prefers-reduced-motion: reduce){ .reveal.is-pending{ opacity:1; transform:none; } .scene{ transition:none; } .confid__track i{ transition:none; } }

/* form-feedback (re-applied 2026-06-26) */
.field .err{display:block;color:#c0392b;font-size:.85rem;margin-top:.3rem}
.field .err:empty{display:none}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:#c0392b}
.btn[aria-busy="true"]{opacity:.75;cursor:progress}