/* Aged Care, Plainly: design system v2 (see design/design-system.md). Source: src/assets/styles.css, copied to site/ by build.py */
@font-face{font-family:"Atkinson Hyperlegible";src:url(/fonts/atkinson-hyperlegible-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible";src:url(/fonts/atkinson-hyperlegible-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
:root{
 --bg:#fbf7f0;--card:#ffffff;--sand:#efe4d2;--ink:#1d2327;--muted:#3d464d;
 --teal:#0d4f54;--teal-2:#0a3e42;--teal-soft:#e2efec;--sage:#9fc6be;
 --warm:#a3461d;--warm-2:#8a3a17;--warm-soft:#f6e6d6;--sun:#e9a36f;--focus-dark:#f6c08f;
 --line:#d9cfc0;--card-line:#ece3d5;--field:#5f584e;
 --s1:.25rem;--s2:.5rem;--s3:.75rem;--s4:1rem;--s5:1.5rem;--s6:2rem;--s7:3rem;--s8:4.5rem;
 --container:60rem;--gutter:clamp(1.1rem,4vw,2rem);
 --r-sm:10px;--r-md:14px;--r-lg:22px;--r-pill:999px;
 --sh-1:0 1px 2px rgba(40,30,10,.06),0 2px 8px rgba(40,30,10,.05);
 --sh-2:0 2px 4px rgba(40,30,10,.06),0 12px 28px -10px rgba(40,30,10,.18);
 --sh-float:0 8px 24px rgba(10,30,32,.22);
 --t-fast:120ms;--t-base:200ms;--t-slow:500ms;--t-draw:900ms;
 --ease-out:cubic-bezier(.22,1,.36,1);--ease-io:cubic-bezier(.65,0,.35,1);
 --radius:var(--r-lg);--shadow:var(--sh-1);
 --bar-h:76px;
}
*{box-sizing:border-box}
html{font-size:125%;-webkit-text-size-adjust:100%;scroll-padding-top:1rem}
body{margin:0;font-family:"Atkinson Hyperlegible",Verdana,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.6;padding-bottom:calc(var(--bar-h) + env(safe-area-inset-bottom))}
img,svg{max-width:100%}
h1,h2,h3{text-wrap:balance;color:var(--ink)}
p{text-wrap:pretty}
p,li,dd,.lead{max-width:65ch}
a{color:var(--teal);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}
a:hover{color:var(--teal-2);text-decoration-thickness:3px}
:focus-visible{outline:3px solid var(--warm);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-999px;top:0;background:#fff;color:#000;padding:.7rem 1rem;z-index:100}
.skip:focus{left:.5rem;top:.5rem}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:var(--container);margin:0 auto;padding-inline:var(--gutter)}
main>.wrap{max-width:calc(46rem + 2*var(--gutter))}
.page-home main>.wrap{max-width:var(--container)}

/* ---------- header + nav ---------- */
header.site{background:var(--bg);border-bottom:1px solid var(--line);position:relative;z-index:5}
header.site>.wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;column-gap:1rem}
.logo{display:flex;align-items:center;gap:.55rem;text-decoration:none;color:var(--ink);min-height:48px;padding:.45rem 0 .2rem}
.logo svg{width:40px;height:40px;flex:none}
.logo b{font-size:1.1rem;line-height:1.05;letter-spacing:-.01em}
.logo b span{color:var(--warm)}
.btn.callhdr{display:none}
nav.main{order:3;width:100%}
nav.main ul{list-style:none;margin:0 0 0 -.65rem;padding:.15rem 0 .35rem;display:flex;flex-wrap:wrap;gap:.1rem .15rem}
nav.main a{display:flex;align-items:center;min-height:48px;padding:.15rem .65rem;color:var(--teal-2);text-decoration:none;border-radius:var(--r-pill);font-size:.95rem;font-weight:700;transition:background var(--t-base),color var(--t-base)}
nav.main a:hover{background:var(--teal-soft);color:var(--teal-2)}
nav.main a[aria-current=page]{background:var(--teal);color:#fff}
nav.main a[aria-current=page]:focus-visible{outline-color:var(--warm)}

main{padding:var(--s4) 0 var(--s6)}
h1{font-size:1.75rem;line-height:1.15;margin:1.2rem 0 .8rem;letter-spacing:-.01em}
h2{font-size:1.4rem;line-height:1.25;margin:0 0 .5rem}
h3{font-size:1.15rem;line-height:1.3;margin:.2rem 0 .3rem}
p{margin:.4rem 0 .8rem}
ul,ol{padding-left:1.3rem}
li{margin:.35rem 0}
.lead{font-size:1.15rem;line-height:1.55;color:var(--muted)}

/* ---------- hero ---------- */
.hero{background:linear-gradient(180deg,var(--sand) 0%,#f5ede0 70%,var(--bg) 100%);border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.hero>.wrap{padding-top:0;padding-bottom:var(--s5);position:relative}
.hero .art-wrap{position:relative;margin:0 calc(-1*var(--gutter))}
.hero svg.art{display:block;width:100%;height:160px}
.hero h1{font-size:2rem;line-height:1.1;letter-spacing:-.015em;margin:.9rem 0 .5rem}
.hero .lead{margin:0 0 .4rem}
.hero .btns{flex-direction:column;align-items:stretch;margin-top:1rem}
.hero .btns .btn{justify-content:center}
.trust{font-size:.9rem;color:var(--muted);margin:.8rem 0 0;line-height:1.5}
.trust span{white-space:nowrap}

/* ---------- buttons ---------- */
.btns{display:flex;flex-wrap:wrap;gap:.6rem;margin:1rem 0 .4rem}
.btn{display:inline-flex;align-items:center;gap:.5rem;min-height:56px;padding:.6rem 1.3rem;border-radius:var(--r-pill);font:inherit;font-weight:700;font-size:1rem;line-height:1.2;text-decoration:none;cursor:pointer;border:3px solid var(--teal);background:var(--teal);color:#fff;box-shadow:var(--sh-1);transition:background-color var(--t-base),border-color var(--t-base),color var(--t-base),box-shadow var(--t-base),translate var(--t-base) var(--ease-out),scale 80ms}
.btn:hover{background:var(--teal-2);border-color:var(--teal-2);color:#fff;box-shadow:var(--sh-2);translate:0 -1px}
.btn:active{translate:0 1px;scale:.98;box-shadow:var(--sh-1)}
.btn.alt{background:#fff;color:var(--teal)}
.btn.alt:hover{background:var(--teal-soft);color:var(--teal-2);border-color:var(--teal-2)}
.btn.warm{background:var(--warm);border-color:var(--warm)}
.btn.warm:hover{background:var(--warm-2);border-color:var(--warm-2)}
.btn svg{width:26px;height:26px;flex:none}
.btn .arr{width:22px;height:22px;transition:translate var(--t-base) var(--ease-out)}
.btn:hover .arr{translate:3px 0}
.btn.block{width:100%;justify-content:center}

/* ---------- short version ---------- */
.short{background:var(--teal-soft);border:2px solid #0d4f5459;border-radius:var(--r-lg);padding:1.1rem 1.25rem;margin:1.2rem 0 1.8rem}
.short h2{font-size:1.15rem;color:var(--teal-2);margin-bottom:.3rem;display:flex;align-items:center;gap:.5rem}
.short h2 svg{width:28px;height:28px;flex:none;color:var(--warm)}
.short ul{margin:.2rem 0}

/* ---------- cards ---------- */
.card{background:var(--card);border:1px solid var(--card-line);border-radius:var(--r-lg);padding:var(--s5);margin:1rem 0;box-shadow:var(--sh-1)}
.card .ic{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:16px;background:var(--warm-soft);color:var(--warm);margin-bottom:.6rem;flex:none}
.card .ic svg{width:30px;height:30px}
.card.head{display:block}
.card.head .ic{margin:0 0 .6rem}
.card.link{position:relative;transition:box-shadow var(--t-base),translate var(--t-base) var(--ease-out),border-color var(--t-base)}
.card.link .more a{font-weight:700;text-decoration:none;display:inline-flex;align-items:center;gap:.4rem;min-height:48px}
.card.link .more a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.card.link .more a:focus-visible{outline:none}
.card.link:has(.more a:focus-visible){outline:3px solid var(--warm);outline-offset:3px}
.card.link .more .arr{width:22px;height:22px;transition:translate var(--t-base) var(--ease-out)}
.card.link:hover{box-shadow:var(--sh-2);translate:0 -2px;border-color:var(--line)}
.card.link:hover .more a{text-decoration:underline}
.card.link:hover .arr{translate:3px 0}
.card.link .src{position:relative;z-index:1}
.grid3{display:grid;gap:1rem;grid-template-columns:1fr}
.grid3 .card{margin:0}
.cards2{display:grid;gap:1rem;grid-template-columns:1fr;margin:1rem 0}
.cards2 .card{margin:0}
.section{margin:var(--s7) 0}
.note{background:var(--warm-soft);border-left:6px solid var(--warm);border-radius:var(--r-md);padding:.8rem 1rem;margin:1rem 0}
.badge{display:inline-block;background:var(--warm-soft);color:var(--warm-2);font-weight:700;border-radius:var(--r-pill);padding:.25rem .9rem;margin:1rem 0 0}
.src{font-size:.9rem;line-height:1.5;color:var(--muted);margin:.5rem 0 0}
.src a{color:var(--muted)}
.big{font-size:1.15rem}
.small{font-size:.9rem}

/* ---------- steps ---------- */
ol.steps{list-style:none;padding:0;margin:1rem 0;counter-reset:s;position:relative}
ol.steps>li{counter-increment:s;position:relative;background:var(--card);border:1px solid var(--card-line);border-radius:var(--r-lg);padding:1.1rem 1.2rem 1rem 4.6rem;margin:1rem 0;box-shadow:var(--sh-1);max-width:none}
ol.steps>li::before{content:counter(s);position:absolute;left:1.1rem;top:1rem;width:2.6rem;height:2.6rem;border-radius:50%;background:var(--teal);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;font-size:1.1rem;z-index:1}
ol.steps>li:not(:last-child)::after{content:"";position:absolute;left:calc(1.1rem + 1.3rem - 1.5px);top:3.6rem;bottom:-1.1rem;width:3px;background:var(--teal-soft);border-radius:3px}
ol.steps h2,ol.steps h3{margin-top:.25rem}
/* illustrated home steps */
ol.steps.vis>li{padding-top:1rem}
ol.steps.vis .vig{display:none}

/* ---------- tables ---------- */
table{border-collapse:separate;border-spacing:0;width:100%;margin:.6rem 0;background:#fff;border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line)}
th,td{border-bottom:1px solid var(--line);padding:.7rem .9rem;text-align:left;vertical-align:top}
tbody tr:last-child>*{border-bottom:0}
tbody tr:nth-child(even){background:#fdfaf5}
thead th{background:var(--teal-2);color:#fff}
tbody th{background:var(--teal-soft)}

/* ---------- glossary ---------- */
dl.words{margin:0}
dl.words div{background:var(--card);border:1px solid var(--card-line);border-radius:var(--r-md);padding:.9rem 1.1rem;margin:.7rem 0;box-shadow:var(--sh-1)}
dl.words dt{font-weight:700;font-size:1.1rem;color:var(--teal-2)}
dl.words dd{margin:.2rem 0 0}

/* ---------- help ---------- */
.help{background:var(--teal-2);color:#fff;border-radius:var(--r-lg);padding:var(--s5);margin:var(--s7) 0 var(--s6);position:relative;overflow:hidden;isolation:isolate}
.help .hill{position:absolute;right:-10px;bottom:-6px;width:220px;height:auto;z-index:-1;pointer-events:none}
.help h2{color:#fff}
.help p{margin:.3rem 0 .9rem}
.help a{color:#fff}
.help .small{font-size:.95rem;color:#e8f1ef}
.help .btn{background:#fff;color:var(--teal);border-color:#fff;width:100%;justify-content:center}
.help .btn:hover{background:var(--teal-soft);color:var(--teal-2);border-color:var(--teal-soft)}
.help :focus-visible,footer.site :focus-visible,.chat .bar :focus-visible{outline-color:var(--focus-dark)}
.help-grid{display:grid;gap:.2rem 1.5rem}

/* ---------- signup ---------- */
form.signup{background:var(--sand);border-radius:var(--r-lg);padding:var(--s5);margin:var(--s6) 0;position:relative;overflow:hidden}
form.signup .env{width:64px;height:64px;display:block;margin-bottom:.4rem}
form.signup h2{margin-top:0}
form.signup label{display:block;font-weight:700;margin:.8rem 0 .25rem}
form.signup .opt{font-weight:400}
form.signup input{font:inherit;padding:.6rem .8rem;width:100%;max-width:26rem;min-height:56px;border:2px solid var(--field);border-radius:var(--r-sm);background:#fff;color:var(--ink)}
form.signup input:focus{outline:3px solid var(--warm);outline-offset:2px}
form.signup button{margin-top:1rem}
form.signup button:disabled{opacity:.7}
form.signup .su-msg{margin:.6rem 0 0;font-weight:700}
form.signup .su-msg:empty{display:none}

/* ---------- sources ---------- */
.sources{border-top:2px solid var(--line);margin-top:var(--s7);padding-top:1rem;font-size:.95rem}
.sources h2{font-size:1.15rem}
.sources li{margin:.6rem 0;word-break:break-word}

/* ---------- checklist ---------- */
.check{list-style:none;padding:0}
.check li{position:relative;padding-left:2.4rem;margin:.7rem 0}
.check li::before{content:"";position:absolute;left:0;top:.2rem;width:1.5rem;height:1.5rem;border:3px solid var(--ink);border-radius:5px;background:#fff}
.writein{display:block;border-bottom:2px solid #555;height:2rem;margin:.1rem 0 .4rem}
.printonly{display:none}

/* ---------- family kit ---------- */
.kitfigs{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;margin:1.5rem 0}
.kitfigs figure{margin:0}
.kitfigs img{width:100%;height:auto;border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:var(--sh-2);background:#fff}
.kitfigs figcaption{font-size:.95rem;margin-top:.5rem;color:var(--muted)}

/* ---------- footer ---------- */
footer.site{background:var(--teal-2);color:#fff;padding:var(--s6) 0 var(--s6);margin-top:var(--s6)}
footer.site a{color:#fff}
footer.site ul{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:.1rem 1.2rem;margin:.2rem 0 1rem}
footer.site li a{display:inline-flex;align-items:center;min-height:48px}
footer.site p{font-size:.95rem;color:#eef5f3}
footer.site .indep{font-size:1rem;font-weight:700;color:#fff;border-top:1px solid rgba(255,255,255,.25);padding-top:1rem;margin-top:1rem}
footer.site .flogo{display:flex;align-items:center;gap:.6rem;font-weight:700;font-size:1.1rem;margin-bottom:.6rem}
footer.site .flogo svg{width:36px;height:36px}

/* ---------- sticky action bar (mobile) ---------- */
.actionbar{position:fixed;left:0;right:0;bottom:0;z-index:40;background:rgba(251,247,240,.98);border-top:1px solid var(--line);box-shadow:0 -2px 12px rgba(0,0,0,.08);padding:.45rem .6rem calc(.45rem + env(safe-area-inset-bottom))}
@supports ((backdrop-filter:blur(8px)) or (-webkit-backdrop-filter:blur(8px))){.actionbar{background:rgba(251,247,240,.86);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}}
.actionbar .in{max-width:46rem;margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.actionbar .btn{justify-content:center;min-height:56px;padding:.3rem .6rem;font-size:.95rem;line-height:1.15;text-align:left;width:100%}
.actionbar .btn small{display:block;white-space:nowrap;font-size:.9rem;font-weight:400}
.actionbar .btn svg{width:24px;height:24px}

/* ---------- chat ---------- */
dialog.chat{border:0;padding:0;margin:0;width:100%;max-width:100%;height:100%;max-height:100%;background:var(--bg);color:var(--ink)}
dialog.chat::backdrop{background:rgba(10,30,32,.55)}
.chat .bar{display:flex;align-items:center;justify-content:space-between;gap:.5rem;background:var(--teal-2);color:#fff;padding:.5rem .6rem .5rem 1rem}
.chat .bar h2{color:#fff;font-size:1.15rem;margin:0}
.chat .close{min-width:56px;min-height:56px;border-radius:var(--r-pill);border:2px solid #fff;background:transparent;color:#fff;font:inherit;font-weight:700;font-size:1rem;cursor:pointer;padding:0 .9rem}
.chat .close:hover{background:rgba(255,255,255,.12)}
.chat .body{display:flex;flex-direction:column;height:calc(100% - 72px)}
.chat .log{flex:1;overflow-y:auto;padding:.8rem 1rem}
.chat .warnbox{background:var(--warm-soft);border-radius:var(--r-md);padding:.7rem .9rem;font-size:.95rem;margin:.2rem 0 .8rem}
.chat .msg{border-radius:18px;padding:.7rem .9rem;margin:.6rem 0;max-width:92%;white-space:pre-wrap;word-wrap:break-word}
.chat .msg.user{background:var(--teal);color:#fff;margin-left:auto;border-bottom-right-radius:4px}
.chat .msg.bot{background:var(--card);box-shadow:var(--sh-1);border:1px solid var(--card-line);border-bottom-left-radius:4px}
.chat .msg.bot a{font-weight:700}
.chat .who{display:block;font-size:.85rem;font-weight:700;opacity:.9;margin-bottom:.1rem}
.chat .starters{display:grid;gap:.5rem;margin:.4rem 0 .6rem}
.chat .starters button{font:inherit;font-size:1rem;text-align:left;min-height:56px;padding:.6rem 1rem;border-radius:var(--r-md);border:2px solid transparent;background:var(--teal-soft);color:var(--teal-2);font-weight:700;cursor:pointer;transition:background var(--t-base),border-color var(--t-base)}
.chat .starters button:hover{border-color:var(--teal);background:#d3e7e2}
.chat form{border-top:1px solid var(--line);padding:.6rem .8rem calc(.6rem + env(safe-area-inset-bottom));background:#fff}
.chat label{font-weight:700;display:block;margin-bottom:.2rem}
.chat .row{display:flex;gap:.5rem;align-items:stretch}
.chat textarea{flex:1;font:inherit;font-size:1rem;min-height:56px;max-height:9rem;padding:.6rem .8rem;border:2px solid var(--field);border-radius:var(--r-md);resize:vertical;background:#fff;color:var(--ink)}
.chat .send{min-width:88px;justify-content:center}
.chat .count{font-size:.9rem;color:var(--muted);margin:.2rem 0 0}
.chat .count b{font-weight:700}
.typing{font-style:italic;color:var(--muted)}

main li,main a,main p{overflow-wrap:anywhere}
svg[aria-hidden]:not([class]):not([viewBox="0 0 48 48"]){max-width:32px;max-height:32px}

/* mobile: keep the hero trust line clear of the fixed bottom action bar on a typical phone (390x844) */
@media (max-width:719px){
 .hero svg.art{height:104px}
 .hero h1{margin:.75rem 0 .4rem}
 .hero .btns{margin-top:.8rem;gap:.5rem}
 .hero .trust{margin-top:.6rem;line-height:1.4}
 .hero>.wrap{padding-bottom:calc(var(--s5) + .5rem)}
}

/* ================= desktop ================= */
@media (min-width:720px){
 html{font-size:131.25%}
 body{padding-bottom:0}
 main{padding-bottom:6rem}
 h1{font-size:2.25rem}
 h2{font-size:1.6rem}
 h3{font-size:1.2rem}
 .lead{font-size:1.2rem}
 .section{margin:var(--s8) 0}
 .card{padding:var(--s6)}
 .hero>.wrap{display:grid;grid-template-columns:1.1fr 1fr;gap:2rem;align-items:center;padding-top:var(--s6);padding-bottom:var(--s7)}
 .hero .art-wrap{order:2;margin:0}
 .hero svg.art{height:auto;max-height:340px;aspect-ratio:560/300}
 .hero h1{font-size:2.75rem;margin-top:0}
 .hero .btns{flex-direction:row;align-items:center}
 .grid3{grid-template-columns:repeat(3,1fr)}
 .cards2{grid-template-columns:1fr 1fr}
 .card.head{display:grid;grid-template-columns:auto 1fr;column-gap:1.1rem;align-items:start}
 .card.head .ic{margin:0}
 .help-grid{grid-template-columns:1fr 1fr}
 .help .btn{width:auto}
 .actionbar{left:auto;right:1.2rem;bottom:1.2rem;background:none;border:0;box-shadow:none;padding:0;-webkit-backdrop-filter:none;backdrop-filter:none}
 .actionbar .in{display:block}
 .actionbar .call{display:none}
 .actionbar .btn{width:auto;min-height:64px;padding:.5rem 1.4rem;box-shadow:var(--sh-float);font-size:1.05rem}
 dialog.chat{width:min(30rem,94vw);height:min(44rem,88vh);margin:auto 1.2rem 1.2rem auto;border-radius:22px;overflow:hidden;box-shadow:0 10px 40px rgba(0,0,0,.3)}
 dialog.chat[open]{position:fixed;inset:auto 1.2rem 1.2rem auto}
 .page-home .short ul{columns:2;column-gap:2rem}
 .page-home .short li{break-inside:avoid;margin-top:0}
 /* illustrated 3-step timeline */
 ol.steps.vis{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
 ol.steps.vis>li{margin:0;padding:1.2rem 1.3rem 1.3rem;text-align:left}
 ol.steps.vis>li::before{position:static;margin:.6rem 0 .5rem}
 ol.steps.vis>li::after{display:none}
 ol.steps.vis .vig{display:block;width:96px;height:96px}
}
@media (min-width:1024px){
 header.site>.wrap{flex-wrap:nowrap;min-height:76px}
 nav.main{order:0;width:auto;margin:0;flex:1}
 nav.main ul{justify-content:center;padding:0;margin:0}
 .btn.callhdr{display:inline-flex;min-height:52px;padding:.4rem 1rem;font-size:.9rem;background:#fff;color:var(--teal);box-shadow:none}
 .btn.callhdr:hover{background:var(--teal-soft);color:var(--teal-2)}
 .btn.callhdr svg{width:22px;height:22px}
}
@media (max-width:600px){
 table.stack thead{position:absolute;left:-9999px}
 table.stack,table.stack tbody,table.stack tr,table.stack th,table.stack td{display:block;width:100%}
 table.stack{border:0;background:none;overflow:visible}
 table.stack tr{border:2px solid var(--line);border-radius:var(--r-md);margin:.8rem 0;overflow:hidden;background:#fff}
 table.stack th,table.stack td{border:0;border-bottom:1px solid var(--line)}
 table.stack td::before{content:attr(data-label) ": ";font-weight:700}
 th,td{padding:.5rem .6rem}
 table{font-size:1rem}
}

/* ================= motion (only when the user hasn't asked for less) ================= */
@media (prefers-reduced-motion:no-preference){
 /* hero entrance */
 .hero svg.art .a-hills{transform-box:fill-box;animation:rise 600ms var(--ease-out) both}
 .hero svg.art .a-house{animation:fade 600ms var(--ease-out) 150ms both}
 .hero svg.art .a-sunwrap{transform-box:fill-box;animation:sunrise var(--t-draw) var(--ease-out) both}
 /* hero ambient */
 .hero svg.art .a-halo{transform-box:fill-box;transform-origin:center;animation:halo 4s var(--ease-io) 900ms infinite alternate}
 .hero svg.art .a-tree{transform-box:fill-box;transform-origin:50% 100%;animation:sway 4.5s var(--ease-io) infinite alternate}
 .hero svg.art .a-win{animation:glow 4s var(--ease-io) infinite alternate}
 .hero svg.art .a-cloud{animation:drift 16s linear infinite alternate}
 .hero svg.art .a-smoke{transform-box:fill-box;animation:smoke 4s var(--ease-io) infinite}
 .hero.paused svg.art *,.hero.offscreen svg.art *{animation-play-state:paused!important}
 /* scroll reveal */
 html.js .reveal{opacity:0;translate:0 16px;transition:opacity var(--t-slow) var(--ease-out),translate var(--t-slow) var(--ease-out)}
 html.js .reveal.in{opacity:1;translate:0 0}
 /* step vignettes: draw once on view */
 html.js .vig .draw{stroke-dasharray:1;stroke-dashoffset:1}
 html.js .vig .acc{opacity:0;transform-box:fill-box;transform-origin:center;scale:.92}
 html.js .vig.drawn .draw{animation:draw var(--t-draw) var(--ease-out) var(--d,0ms) forwards}
 html.js .vig.drawn .acc{animation:pop 300ms var(--ease-out) calc(var(--d,0ms) + 700ms) forwards}
 html.js .vig.drawn .idle{transform-box:fill-box;animation:pop 300ms var(--ease-out) calc(var(--d,0ms) + 700ms) forwards,steam 4s var(--ease-io) calc(var(--d,0ms) + 1100ms) infinite alternate}
 html.motion-paused .vig .idle{animation-play-state:paused!important}
 /* focus ring settles in */
 :focus-visible{animation:focusin var(--t-fast) ease-out}
 /* chat open */
 dialog.chat[open]{animation:chatin 250ms var(--ease-out)}
 dialog.chat[open]::backdrop{animation:fade 200ms ease-out}
}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes sunrise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes halo{from{transform:scale(1);opacity:.16}to{transform:scale(1.18);opacity:.38}}
@keyframes sway{from{transform:rotate(-3deg)}to{transform:rotate(3deg)}}
@keyframes glow{from{fill:#e9a36f}to{fill:#ffdcaa}}
@keyframes drift{from{transform:translateX(-10px)}to{transform:translateX(80px)}}
@keyframes smoke{0%{opacity:0;transform:translateY(4px)}35%{opacity:.85}100%{opacity:0;transform:translateY(-22px)}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes pop{to{opacity:1;scale:1}}
@keyframes steam{from{transform:translateY(0)}to{transform:translateY(-4px)}}
@keyframes focusin{from{outline-offset:6px}to{outline-offset:3px}}
@keyframes chatin{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@media (min-width:720px){@keyframes chatin{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}}
@media (prefers-reduced-motion:reduce){
 *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
 .reveal{opacity:1!important;translate:none!important}
 svg .draw{stroke-dashoffset:0!important}
}

/* ================= print ================= */
@page{size:A4;margin:18mm 16mm 20mm}
@media print{
 html{font-size:14pt} body{background:#fff;padding:0;line-height:1.5;color:#000}
 h1{font-size:24pt} h2{font-size:18pt}
 header.site,nav.main,.actionbar,dialog,.noprint,.skip,footer.site ul,.hero svg,.help .hill,.vig,footer.site .flogo{display:none!important}
 .reveal{opacity:1!important;translate:none!important}
 .printonly{display:block;font-weight:700;border-bottom:2px solid #000}
 .card,.short,.note,dl.words div,ol.steps>li{box-shadow:none;border:1pt solid #000;background:#fff}
 .help{background:#fff;color:#000;border:1pt solid #000}.help h2,.help a,.help .small{color:#000}
 .help .btn{border:0;padding:0;min-height:0;font-size:16pt;color:#000;background:none;box-shadow:none}
 footer.site{background:none;color:#000;padding:0;margin:0} footer.site a,footer.site p,footer.site .indep{color:#000}
 .card,li,tr{break-inside:avoid} h2{break-after:avoid}
 .pb{break-before:page}
 .check li::before{width:7mm;height:7mm;border:1.5pt solid #000}
 .writein{height:10mm}
 .sources a[href^="http"]::after,.page-checklist main a[href^="http"]::after{content:" (" attr(href) ")";font-size:12pt}
}

/* ---- v3 polish after screenshot review ---- */
nav.main li{margin:0;max-width:none}
.page-home main{padding-top:0}
.actionbar .in{grid-template-columns:1.3fr 1fr}
.actionbar .btn{gap:.4rem;padding:.3rem .5rem}
.actionbar .call span{white-space:nowrap;font-size:.9rem}
.actionbar .btn svg{width:22px;height:22px}
@media (max-width:370px){.actionbar .call svg{display:none}}
@media (min-width:720px){
 .hero svg.art{border-radius:28px;box-shadow:var(--sh-2)}
}
@media (min-width:1024px){
 nav.main a{white-space:nowrap;font-size:.9rem;padding:.15rem .6rem}
 nav.main ul{flex-wrap:nowrap;gap:.1rem}
}

/* links to the explainer animation and handout (home + get started) */
.morelinks{list-style:none;padding:0;margin:var(--s4) 0}
.morelinks li{margin:.25rem 0;max-width:none}
.morelinks a{display:inline-flex;align-items:center;gap:.55rem;min-height:48px;font-weight:700}
.morelinks .arr{width:24px;height:24px;flex:none}