/* Curiotter components. Every class used on the Define artboards, unchanged, so the templates can
   be built by copying markup from the .dc.html files. Requires tokens.css, icons.svg and mark.svg.
   The .task class on .page dials outlines and shadows down (signed-in screens). .page is the
   centred column, 640px for task screens and 1040px (.wide) for the homepage and Library grid.
   The desktop layer is at the bottom: 760 for chrome, 1024 for layout, plus pointer-only hover.

   GENERATED from cq/tokens.py, cq/desktop.py and cq/deliver.py. Do not edit; edit the source and
   run build.py. */
@import url("tokens.css");
html, body { margin: 0; min-height: 100%; }
body { color: var(--ink); background: var(--paper); font-family: var(--body); font-size: var(--fs-body); line-height: 1.45; }
.page { max-width: 640px; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; position: relative; }
.page.wide { max-width: 1040px; }
a { color: var(--green-deep); text-decoration: none; } a:hover { color: var(--ink); }
img { display: block; width: 100%; height: auto; }
p { margin: 0; }
.x { padding-left: var(--page-x); padding-right: var(--page-x); }

/* type */
.wordmark { display: flex; align-items: center; gap: 9px; font-family: var(--display); font-weight: 600; font-size: 20px; color: var(--green-deep); letter-spacing: -0.015em; line-height: 1; }
.wordmark .mark, .wordmark .badge { flex: none; }
.mark, .badge { display: block; }
.hero-h { margin: 0; font-family: var(--display); font-weight: 600; font-size: var(--fs-hero); line-height: 1.1; letter-spacing: -0.01em; text-wrap: pretty; }
.h1 { margin: 0; font-family: var(--display); font-weight: 600; font-size: var(--fs-h1); line-height: 1.15; letter-spacing: -0.01em; text-wrap: pretty; }
.h2 { margin: 0; font-family: var(--display); font-weight: 600; font-size: var(--fs-h2); line-height: 1.2; }
.h3 { margin: 0; font-family: var(--display); font-weight: 600; font-size: var(--fs-h3); line-height: 1.25; }
.sub { color: var(--muted); font-size: 16px; text-wrap: pretty; }
.label { font-size: var(--fs-label); font-weight: 700; }
.hint { font-size: var(--fs-small); color: var(--muted); font-weight: 400; line-height: 1.4; }
.fine { font-size: var(--fs-small); color: var(--muted); text-align: center; line-height: 1.4; } .fine.left { text-align: left; }
.body { font-size: var(--fs-body); }
.script { font-size: var(--fs-script); line-height: 1.55; }
.script p + p { margin-top: 12px; }
.prompt { font-family: var(--body); font-size: var(--fs-prompt); line-height: 1.5; font-weight: 400; }
.eyebrow { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 800; }
.strong { font-weight: 700; }
.green { color: var(--green-deep); } .alert { color: var(--alert); } .muted { color: var(--muted); }

/* app bar and tab bar (task screens) */
.appbar { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 8px 12px 0 12px; }
.appbar .title { flex: 1; font-family: var(--display); font-weight: 600; font-size: 18px; text-align: center; }
.iconbtn { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--ink); flex: 0 0 auto; }
.iconbtn.ghost { visibility: hidden; }
.tabbar { display: flex; justify-content: space-around; align-items: stretch; margin-top: auto; padding: 8px 8px 18px 8px; background: var(--card); border-top: 2px solid var(--line); }
.tab { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 76px; min-height: 48px; justify-content: center; font-size: 11.5px; font-weight: 700; color: var(--muted); border-radius: 14px; }
.tab.on { color: var(--green-deep); }

/* buttons */
.btn { min-height: var(--btn); display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: var(--r-pill); font-family: var(--display); font-weight: 600; font-size: 18px; padding: 0 20px; border: var(--outline) solid var(--ink); box-shadow: 0 4px 0 var(--ink); background: var(--card); color: var(--ink); box-sizing: border-box; }
.btn.primary { background: var(--green); color: var(--on-green); }
.btn.secondary { background: var(--marigold); color: var(--ink); }
.btn.quiet { background: transparent; box-shadow: none; border-color: var(--line); }
.btn.small { min-height: var(--btn-small); font-size: 16px; padding: 0 16px; box-shadow: 0 3px 0 var(--ink); }
.btn.pressed { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.btn.disabled { background: var(--tint); color: var(--muted); border-color: var(--line); box-shadow: 0 4px 0 var(--line); }
.btn.full { width: 100%; }
.btn.danger { background: transparent; color: var(--alert); border-color: transparent; box-shadow: none; }
.btn.record { background: var(--alert); color: var(--on-alert); }
.btn.ink { background: var(--ink); color: var(--paper); }
.textbtn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-family: var(--body); font-size: 15px; font-weight: 700; color: var(--green-deep); }
.textbtn.muted { color: var(--muted); }

/* chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { min-height: 44px; padding: 0 16px; display: flex; align-items: center; gap: 6px; border: var(--outline) solid var(--ink); border-radius: var(--r-pill); font-family: var(--display); font-weight: 500; font-size: 15.5px; background: var(--card); box-sizing: border-box; }
.chip.i0 { background: var(--clay); } .chip.i1 { background: var(--marigold); } .chip.i2 { background: var(--sky); } .chip.i3 { background: var(--leaf); }
.chip.selected { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.chip.more { background: transparent; border-style: dashed; }
.chip.filter { min-height: 40px; font-size: 14px; padding: 0 14px; border-width: var(--outline-quiet); border-color: var(--line); background: var(--card); font-family: var(--body); font-weight: 700; }
.chip.filter.selected { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* fields */
.field { min-height: var(--field-h); padding: 0 14px; display: flex; align-items: center; gap: 10px; border: var(--outline) solid var(--ink); border-radius: var(--r-field); background: var(--card); font-size: 16px; box-sizing: border-box; }
.field.area { min-height: 96px; align-items: flex-start; padding: 12px 14px; }
.field.focus { border-color: var(--green); }
.field.error { border-color: var(--alert); }
.ph { color: var(--muted); } .typed { color: var(--ink); }
.fielderr { font-size: var(--fs-small); color: var(--alert); font-weight: 700; }
.code { display: flex; gap: 8px; }
.code .cell { flex: 1; height: 58px; border: var(--outline) solid var(--ink); border-radius: 14px; background: var(--card); display: flex; align-items: center; justify-content: center; font-family: var(--display); font-weight: 600; font-size: 24px; }
.code .cell.empty { border-color: var(--line); }
.code .cell.focus { box-shadow: 0 0 0 3px var(--sky); }

/* cards */
.card { background: var(--card); border: var(--outline) solid var(--ink); border-radius: var(--r-card); padding: 14px; box-shadow: var(--offset) var(--offset) 0 var(--tint); box-sizing: border-box; }
.card.sky { box-shadow: var(--offset) var(--offset) 0 var(--sky); }
.card.marigold { box-shadow: var(--offset) var(--offset) 0 var(--marigold); }
.card.leaf { box-shadow: var(--offset) var(--offset) 0 var(--leaf); }
.card.clay { box-shadow: var(--offset) var(--offset) 0 var(--clay); }
.card.flat { box-shadow: none; }
.card.tintfill { background: var(--tint); border-color: var(--tint); box-shadow: none; }
.card.skyfill { background: var(--sky); border-color: var(--sky); box-shadow: none; }
.card.leaffill { background: var(--leaf); border-color: var(--leaf); box-shadow: none; }
.card.clayfill { background: var(--clay); border-color: var(--clay); box-shadow: none; }
.card.marigoldfill { background: var(--marigold); border-color: var(--marigold); box-shadow: none; }
.cardrow { display: flex; gap: 12px; align-items: flex-start; }
.cardtext { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.q { font-family: var(--display); font-weight: 600; font-size: 18px; line-height: 1.25; }
.a { font-size: 14px; color: var(--muted); line-height: 1.4; }
.meta { display: flex; align-items: center; gap: 8px; font-size: var(--fs-small); color: var(--muted); margin-top: 2px; flex-wrap: wrap; }
.meta .checked { display: inline-flex; align-items: center; gap: 4px; color: var(--green-deep); font-weight: 700; }
.dot { width: 3px; height: 3px; border-radius: 50%; background: var(--line); }
.rule { height: 2px; background: var(--line); }

/* play and player */
.playbtn { flex: 0 0 auto; width: var(--play); height: var(--play); border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--green); color: var(--on-green); }
.playbtn.small { width: var(--play-small); height: var(--play-small); }
.playbtn.paused { background: var(--ink); }
.playbtn.quiet { background: var(--card); color: var(--ink); border: var(--outline-quiet) solid var(--ink); box-shadow: none; }
.player { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: var(--outline) solid var(--ink); border-radius: var(--r-pill); background: var(--card); }
.player .track { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.player .bar { height: 6px; border-radius: 3px; background: var(--tint); position: relative; }
.player .bar .fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: var(--green); }
.player .bar .knob { position: absolute; top: -5px; width: 16px; height: 16px; border-radius: 50%; background: var(--card); border: 2px solid var(--ink); transform: translateX(-8px); }
.player .times { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--muted); font-weight: 700; }

/* level meter */
.meter { display: flex; gap: 3px; align-items: flex-end; height: 28px; }
.meter .seg { flex: 1; height: 100%; border-radius: 3px; background: var(--tint); }
.meter .seg.g { background: var(--green); } .meter .seg.y { background: var(--marigold); } .meter .seg.r { background: var(--alert); }
.meterlabels { display: flex; justify-content: space-between; font-size: 11.5px; font-weight: 700; color: var(--muted); }

/* badges */
.badge { display: inline-flex; align-items: center; gap: 5px; min-height: 26px; padding: 0 10px; border-radius: var(--r-pill); font-size: 12px; font-weight: 800; color: var(--ink); background: var(--tint); }
.badge.gen { background: var(--marigold); } .badge.review { background: var(--sky); } .badge.done { background: var(--leaf); } .badge.held { background: var(--clay); } .badge.quiet { background: var(--tint); color: var(--muted); }
.badge.outline { background: transparent; border: var(--outline-quiet) solid var(--line); color: var(--muted); }
.vbadge { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 800; color: var(--green-deep); }

/* voice block */
.vgroup { display: flex; flex-direction: column; border: var(--outline) solid var(--ink); border-radius: var(--r-card); background: var(--card); overflow: hidden; }
.vrow { display: flex; align-items: center; gap: 12px; padding: 0 14px; min-height: 52px; border-top: 1.5px solid var(--line); }
.vrow:first-child { border-top: none; }
.vrow.selected { background: var(--sky); }
.vtext { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vname { font-weight: 800; font-size: 15px; } .vsub { font-size: var(--fs-small); color: var(--muted); }
.radio { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--ink); background: var(--card); flex: 0 0 auto; display: flex; align-items: center; justify-content: center; }
.radio.on::after { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--green); }
.checkbox { width: 24px; height: 24px; border-radius: 7px; border: 2px solid var(--ink); background: var(--card); flex: 0 0 auto; display: flex; align-items: center; justify-content: center; color: var(--on-green); }
.checkbox.on { background: var(--green); border-color: var(--green); }

/* covers */
.cover { aspect-ratio: 1 / 1; border-radius: var(--r-cover); border: var(--outline) solid var(--ink); display: flex; flex-direction: column; justify-content: space-between; padding: 8px; box-sizing: border-box; font-family: var(--display); font-weight: 600; font-size: 12.5px; color: var(--on-green); background: var(--green-deep); position: relative; overflow: hidden; }
.cover.c1 { background: var(--marigold); color: var(--ink); } .cover.c2 { background: var(--sky-mid); color: var(--ink); } .cover.c3 { background: var(--clay); color: var(--ink); } .cover.c4 { background: var(--leaf); color: var(--ink); }

/* One class per Library category (D69). A real item always carries one; the plain .cover
   green is the fallback for an item with no category yet, and for the homepage samples. */
.cover.cat-earth { background: var(--cat-earth); color: var(--paper); }
.cover.cat-sky { background: var(--cat-sky); color: var(--paper); }
.cover.cat-animals { background: var(--cat-animals); color: var(--ink); }
.cover.cat-ocean { background: var(--cat-ocean); color: var(--ink); }
.cover.cat-machines { background: var(--cat-machines); color: var(--ink); }
.cover.cat-plants { background: var(--cat-plants); color: var(--ink); }
.cover.cat-places { background: var(--cat-places); color: var(--ink); }
.cover.cat-body { background: var(--cat-body); color: var(--ink); }
.cover.cat-past { background: var(--cat-past); color: var(--ink); }
.cover.cat-make { background: var(--cat-make); color: var(--ink); }
.cover .playbtn { background: rgba(255,255,255,0.94); color: var(--ink); width: 30px; height: 30px; box-shadow: none; }
.cover .glyph { position: absolute; right: -6px; bottom: -6px; width: 56%; opacity: 0.9; }
.cover.sm { width: 64px; height: 64px; flex: 0 0 auto; padding: 5px; font-size: 10.5px; }
.cover.noplay { justify-content: flex-end; }
.cover.md { width: 84px; height: 84px; flex: 0 0 auto; }

/* sheets, banners, gates */
.sheet { box-sizing: border-box; margin-top: auto; background: var(--paper); border: var(--outline) solid var(--ink); border-bottom: none; border-radius: var(--r-sheet) var(--r-sheet) 0 0; padding: 10px 20px 28px 20px; display: flex; flex-direction: column; gap: 14px; }
.grabber { width: 40px; height: 5px; border-radius: 3px; background: var(--ink); opacity: 0.25; margin: 0 auto 4px auto; }
.scrim { background: rgba(58,44,30,0.5); }
.overlay { position: fixed; inset: 0; background: rgba(58,44,30,0.5); display: flex; flex-direction: column; justify-content: flex-end; }
.page { position: relative; }
.banner { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; background: var(--marigold); border-bottom: var(--outline) solid var(--ink); font-size: 14px; font-weight: 700; }
.banner.clay { background: var(--clay); }
.gate { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: var(--r-card); background: var(--sky); border: var(--outline) solid var(--sky); }
.gate .t { font-weight: 800; font-size: 15px; } .gate .d { font-size: 14px; color: var(--ink); }
.gate.inline { flex-direction: row; align-items: center; }
.notice { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-field); background: var(--tint); font-size: 14px; }
.notice.clay { background: var(--clay); } .notice.leaf { background: var(--leaf); } .notice.sky { background: var(--sky); }

/* stats strip on the dashboard */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.stat { display: flex; flex-direction: column; gap: 2px; padding: 10px 8px; border-radius: 14px; background: var(--card); border: var(--outline-quiet) solid var(--line); align-items: center; text-align: center; }
.stat .n { font-family: var(--display); font-weight: 600; font-size: 20px; line-height: 1; } .stat .l { font-size: 10.5px; color: var(--muted); font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }

/* steps */
.steps { display: flex; align-items: center; gap: 6px; }
.steps .d { width: 8px; height: 8px; border-radius: 50%; background: var(--line); } .steps .d.on { background: var(--green); width: 22px; border-radius: 4px; } .steps .d.done { background: var(--green); }
.steptext { font-size: var(--fs-small); color: var(--muted); font-weight: 800; }

/* lists */
.row { display: flex; align-items: center; gap: 12px; min-height: 52px; }
.row.rule { border-bottom: 2px solid var(--line); border-radius: 0; height: auto; background: transparent; padding: 8px 0; }
.rowtext { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }

/* A row inside a sheet, where the whole row is the target and there is no chevron because
   tapping it does the thing rather than going somewhere. The last one drops its rule so the
   list does not end on a line. */
/* A row of short facts separated by dots. Its parts wrap as units: without this a 2-up
   Library card breaks "Topic, 14 min" across two lines and the row reads as three ragged
   columns. */
.metaline { display: flex; align-items: center; flex-wrap: wrap; gap: 3px 8px; }
.metaline > * { flex: none; }

.menurow { min-height: 56px; }
.menurow:last-child { border-bottom: none; }
.chev { color: var(--muted); flex: 0 0 auto; }

/* speech bubble and hero blob */
.bubble { display: inline-block; padding: 10px 14px; background: var(--marigold); color: var(--ink); font-family: var(--display); font-weight: 600; font-size: 17px; line-height: 1.2; border-radius: 20px 20px 20px 4px; transform: rotate(-4deg); box-shadow: 0 3px 0 rgba(59,47,47,0.12); }
.art { position: relative; padding: 10px; }
.art::before { content: ""; position: absolute; inset: 0; background: var(--sky); border-radius: 46% 54% 52% 48% / 40% 44% 56% 60%; }
.art img { position: relative; border-radius: 22px; border: 3px solid var(--card); }
.art.leaf::before { background: var(--leaf); } .art.clay::before { background: var(--clay); } .art.marigold::before { background: var(--marigold); }
.spot { width: 200px; margin: 0 auto; }
.spot img { border-radius: 18px; }
.spot.art { padding: 10px; } .spot.art img { border: 3px solid var(--card); border-radius: 22px; }

/* task screens: outlines and shadows dialed down */
.task .card { border-width: var(--outline-quiet); border-color: var(--line); box-shadow: none; }
.task .card.strong { border-width: var(--outline); border-color: var(--ink); }
.task .chip { border-width: var(--outline-quiet); font-family: var(--body); font-weight: 700; font-size: 15px; }
.task .chip.i0, .task .chip.i1, .task .chip.i2, .task .chip.i3 { background: var(--card); }
.task .chip.selected { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.task .field { border-width: var(--outline-quiet); border-color: var(--ink); }
.task .btn.secondary { background: var(--card); }
.task .vgroup { border-width: var(--outline-quiet); border-color: var(--line); }
.task .cover { border-width: var(--outline-quiet); }
.task .player { border-width: var(--outline-quiet); }
.task .btn { box-shadow: 0 3px 0 var(--ink); }
.task .btn.quiet, .task .btn.danger { box-shadow: none; }
.task .btn.disabled { box-shadow: 0 3px 0 var(--line); }
.task .btn.small { box-shadow: none; }
.task .btn.small.ink { box-shadow: none; }
.allow { font-size: 14px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.allow .on { color: var(--ink); font-weight: 700; }
.vbadge.quiet { color: var(--muted); font-weight: 700; }

/* ---------- Chrome and form defaults. Kept together and at the end of BASE on purpose:
   these went missing once already when an edit sliced the file by index. ---------- */
.tabs { display: flex; flex: 1; justify-content: space-around; align-items: stretch; }
.navmark { display: none; }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }

/* the UA gives form controls their own font and a blue focus ring; the system owns both */
button, input, select, textarea { font: inherit; color: inherit; }
input:focus, textarea:focus, select:focus { outline: none; }
.field:focus-within { border-color: var(--green); }
.btn:focus-visible, .chip:focus-visible, .tab:focus-visible, .textbtn:focus-visible,
.row:focus-visible, .vrow:focus-visible, .playbtn:focus-visible, .iconbtn:focus-visible,
a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible,
button:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

/* desktop artboards: the frame stands in for the viewport, the column sits inside it */


/* ---------- The homepage (D42, D43). Scoped to .home: Main and MainDesktop only.
   Lifted from the old standalone Main.dc.html on 2026-09-12, values unchanged, its private
   variables replaced by the system ones that already held the same colours. ---------- */
.home .nav { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 0 20px; }
.home .hero { display: flex; flex-direction: column; gap: 16px; padding: 22px 20px 8px 20px; }
.home .what { display: flex; flex-direction: column; gap: 10px; padding: 26px 20px 8px 20px; }
.home .builder { display: flex; flex-direction: column; gap: 22px; padding: 34px 20px 8px 20px; }
.home .step { display: flex; flex-direction: column; gap: 10px; }
.home .chips.ages { display: flex; flex-wrap: wrap; gap: 8px; }
.home .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.home .result { display: flex; flex-direction: column; gap: 12px; }
.home .resulthead { display: flex; flex-direction: column; gap: 2px; }
.home .cards { display: flex; flex-direction: column; gap: 10px; }
.home .cta { display: flex; flex-direction: column; gap: 10px; padding-top: 6px; }
.home .section.topics { display: flex; flex-direction: column; gap: 14px; padding: 44px 20px 8px 20px; }
.home .howlist { display: flex; flex-direction: column; gap: 14px; padding-top: 6px; }
.home .section.voicesec { display: flex; flex-direction: column; gap: 14px; padding: 44px 20px 8px 20px; }
.home .section.trust { display: flex; flex-direction: column; gap: 12px; padding: 44px 20px 8px 20px; }
.home .trustlist { display: flex; flex-direction: column; gap: 10px; }
.home .section.library { display: flex; flex-direction: column; gap: 12px; padding: 44px 20px 8px 20px; }
.home .resulthead.split { flex-direction: row; align-items: baseline; justify-content: space-between; }
.home .libgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.home .section.otters { display: flex; flex-direction: column; gap: 12px; padding: 44px 20px 8px 20px; }
.home .strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.home .plans { display: flex; flex-direction: column; gap: 10px; }
.home .section.pricing { display: flex; flex-direction: column; gap: 12px; padding: 44px 20px 8px 20px; }
.home .section.faq { display: flex; flex-direction: column; gap: 0; padding: 44px 20px 8px 20px; }
.home .footer { display: flex; flex-direction: column; gap: 8px; padding: 40px 20px 36px 20px; }
.home a { color: var(--green-deep); text-decoration: none; }
.home a:hover { color: var(--ink); }
.home img { display: block; width: 100%; height: auto; }
.home .navlink { font-size: 13px; }
.home .heroart { position: relative; }
.home .heroart img { border-radius: var(--r-card); }
.home .bubble { position: absolute; left: 12px; top: 12px; max-width: 170px; padding: 10px 14px; background: var(--marigold); color: var(--ink); font-family: var(--display); font-weight: 600; font-size: 16px; line-height: 1.2; border-radius: 16px 16px 16px 4px; transform: rotate(-3deg); box-shadow: 0 2px 0 rgba(0,0,0,0.08); }
.home .headline { margin: 0; font-family: var(--display); font-weight: 600; font-size: 34px; line-height: 1.1; letter-spacing: -0.02em; text-wrap: pretty; }
.home .sub { margin: 0; font-size: 16px; color: var(--muted); text-wrap: pretty; }
.home .h2 { font-family: var(--display); font-size: 21px; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; }
.home .h2big { font-family: var(--display); font-size: 27px; font-weight: 600; line-height: 1.12; letter-spacing: -0.02em; text-wrap: pretty; }
.home .label { font-size: 15px; font-weight: 600; }
.home .hint { font-size: 12.5px; color: var(--muted); font-weight: 400; }
.home .whatrow, .home .howrow { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-card); background: var(--tint); }
.home .whaticon { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--green); color: var(--on-green); }
.home .whattext { display: flex; flex-direction: column; gap: 2px; }
.home .whatname { font-family: var(--display); font-weight: 600; font-size: 17px; }
.home .chip { min-height: 44px; padding: 0 16px; display: flex; align-items: center; gap: 6px; border: 1.5px solid var(--line); border-radius: var(--r-pill); font-size: 15px; background: var(--card); }
.home .chip.selected { background: var(--green); border-color: var(--green); color: var(--on-green); font-weight: 600; }
.home .chip.more { border-style: dashed; color: var(--muted); }
.home .field { min-height: 48px; padding: 0 14px; display: flex; align-items: center; gap: 10px; border: 1.5px solid var(--line); border-radius: var(--r-field); background: var(--card); font-size: 15px; }
.home .field.zip { max-width: 160px; }
.home .ph { color: var(--muted); }
.home .typed { color: var(--ink); }
.home .card { background: var(--card); border: 1.5px solid var(--line); border-radius: var(--r-card); padding: 14px; }
.home .cardrow { display: flex; gap: 12px; align-items: flex-start; }
.home .cardtext { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.home .playbtn { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--green); color: var(--on-green); }
.home .playbtn.small { width: 34px; height: 34px; }
.home .q { font-family: var(--display); font-weight: 600; font-size: 17px; line-height: 1.25; }
.home .a { font-size: 14px; color: var(--muted); line-height: 1.4; }
.home .meta { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); margin-top: 4px; flex-wrap: wrap; }
.home .meta .checked { display: inline-flex; align-items: center; gap: 4px; color: var(--green-deep); font-weight: 600; }
.home .meta .swap { display: inline-flex; align-items: center; gap: 4px; }
.home .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--line); }
.home .num { font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.home .more { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--green-deep); min-height: 44px; }
.home .ask { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: var(--r-card); background: var(--tint); margin-top: 10px; }
.home .askresult { display: flex; flex-direction: column; gap: 10px; padding-top: 4px; }
.home .askhit { display: flex; gap: 10px; align-items: flex-start; }
.home .askadd { font-size: 13px; font-weight: 600; color: var(--green-deep); }
.home .btn { min-height: 50px; display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: var(--r-pill); font-size: 16px; font-weight: 600; padding: 0 18px; }
.home .btn.primary { background: var(--green); color: var(--on-green); }
.home .btn.secondary { border: 1.5px solid var(--ink); color: var(--ink); }
.home .btn.full { width: 100%; box-sizing: border-box; }
.home .fine { font-size: 12.5px; color: var(--muted); text-align: center; }
.home .fine.left { text-align: left; }
.home .topiccard { display: flex; flex-direction: column; gap: 12px; padding: 14px; border: 1.5px solid var(--line); border-radius: var(--r-card); background: var(--card); }
.home .topichead { display: flex; gap: 12px; align-items: center; }
.home .topichead .cover { width: 84px; height: 84px; flex: 0 0 auto; }
.home .topictitle { display: flex; flex-direction: column; gap: 3px; }
.home .voicebadge { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; color: var(--green-deep); }
.home .chapters { display: flex; flex-direction: column; gap: 6px; }
.home .chapter { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.home .chtext { flex: 1; font-size: 14.5px; }
.home .chn { font-weight: 600; color: var(--green-deep); margin-right: 4px; }
.home .vtext { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.home .vname { font-weight: 600; font-size: 15px; }
.home .vsub { font-size: 12.5px; color: var(--muted); }
.home .script { display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: var(--r-card); background: var(--tint); }
.home .script .a { color: var(--ink); font-size: 14.5px; }
.home .sources { font-size: 12.5px; color: rgba(36, 51, 43, 0.75); }   /* not --muted, which is 3.4:1 on the clay card; ink at 75% is 4.5 and keeps the hierarchy */
.home .srclabel { font-weight: 600; color: var(--ink); margin-right: 6px; }
.home .trustrow { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; }
.home .tick { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--tint); color: var(--green-deep); }
.home .panel { display: flex; flex-direction: column; gap: 8px; }
.home .panel img { border-radius: var(--r-card); }
.home .cap { font-size: 12.5px; color: var(--muted); line-height: 1.35; }
.home .libcard { display: flex; flex-direction: column; gap: 4px; }
.home .cover { aspect-ratio: 1 / 1; border-radius: var(--r-card); display: flex; flex-direction: column; justify-content: space-between; padding: 8px; box-sizing: border-box; font-family: var(--display); font-weight: 600; font-size: 12.5px; }
.home .cover .playbtn { background: rgba(255,255,255,0.92); color: var(--ink); width: 30px; height: 30px; }
.home .cover.c0 { background: var(--green-deep); color: var(--on-green); }   /* not --green: the cover word is 12.5px and fails AA on it */
.home .cover.c1 { background: var(--marigold); color: var(--ink); }
.home .cover.c2 { background: var(--sky-mid); color: var(--ink); }
.home .libq { font-size: 13px; font-weight: 600; line-height: 1.25; margin-top: 4px; }
.home .libmeta { font-size: 11.5px; color: var(--muted); }
.home .plan { display: flex; flex-direction: column; gap: 8px; padding: 18px; border: 1.5px solid var(--line); border-radius: var(--r-card); background: var(--card); }
.home .plan.featured { border-color: var(--green); }
.home .planname { font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.home .price { font-family: var(--display); font-size: 30px; font-weight: 600; line-height: 1; }
.home .per { font-family: var(--body); font-size: 14px; font-weight: 400; color: var(--muted); }
.home .planlist { font-size: 14px; color: var(--muted); }
.home .faqrow { display: flex; align-items: center; justify-content: space-between; min-height: 52px; border-bottom: 1px solid var(--line); font-size: 15px; font-weight: 500; }
.home .vgroup { display: flex; flex-direction: column; border: 2px solid var(--ink); border-radius: var(--r-card); background: var(--card); overflow: hidden; }
.home .vrow { display: flex; align-items: center; gap: 12px; padding: 0 14px; min-height: 52px; border-top: 1.5px solid var(--line); }
.home .vrow:first-child { border-top: none; }
.home .vrow.selected { background: var(--sky); }
.home .vtext { flex: 1; display: flex; flex-direction: row; align-items: baseline; gap: 8px; flex-wrap: wrap; min-width: 0; }
.home .vname { font-weight: 800; font-size: 15px; }
.home .radio { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--ink); background: var(--card); flex: 0 0 auto; display: flex; align-items: center; justify-content: center; }
.home .radio.on::after { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--green); }
.home .playbtn.quiet { background: var(--card); color: var(--ink); border: 1.5px solid var(--ink); box-shadow: none; }
.home .headline { font-size: 38px; font-weight: 600; letter-spacing: -0.01em; }
.home .h2big { font-weight: 600; font-size: 28px; }
.home .h2 { font-weight: 600; font-size: 22px; }
.home .heroart { padding: 10px; }
.home .heroart::before { content: ""; position: absolute; inset: 0; background: var(--sky); border-radius: 46% 54% 52% 48% / 40% 44% 56% 60%; z-index: 0; }
.home .heroart img { position: relative; z-index: 1; border-radius: 22px; border: 3px solid var(--card); }
.home .bubble { z-index: 2; left: 18px; top: 16px; font-family: var(--display); font-weight: 600; font-size: 17px; border-radius: 20px 20px 20px 4px; transform: rotate(-4deg); box-shadow: 0 3px 0 rgba(59,47,47,0.12); }
.home .whatrow { border: 2px solid var(--ink); background: var(--card); box-shadow: 4px 4px 0 var(--marigold); border-radius: 18px; }
.home .whatrow:nth-child(2) { box-shadow: 4px 4px 0 var(--sky); }
.home .whatrow:nth-child(3) { box-shadow: 4px 4px 0 var(--leaf); }
.home .whaticon { background: var(--marigold); color: var(--ink); }
.home .whatrow:nth-child(2) .whaticon { background: var(--sky); }
.home .whatrow:nth-child(3) .whaticon { background: var(--leaf); }
.home .whatname { font-size: 18px; }
.home .chip { border: 2px solid var(--ink); background: var(--card); font-weight: 700; font-family: var(--display); font-weight: 500; font-size: 15.5px; }
.home .chip.i0 { background: var(--clay); }
.home .chip.i1 { background: var(--marigold); }
.home .chip.i2 { background: var(--sky); }
.home .chip.i3 { background: var(--leaf); }
.home .chip.selected { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.home .chip.more { background: transparent; border-style: dashed; }
.home .field { border: 2px solid var(--ink); }
.home .card { border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--tint); }
.home .playbtn { box-shadow: 0 3px 0 rgba(59,47,47,0.18); }
.home .q { font-weight: 600; font-size: 18px; }
.home .btn { border: 2px solid var(--ink); box-shadow: 0 4px 0 var(--ink); font-family: var(--display); font-weight: 600; font-size: 18px; min-height: 54px; }
.home .btn.primary { background: var(--green); }
.home .btn.secondary { background: var(--marigold); color: var(--ink); }
.home .ask { border: 2px solid var(--ink); background: var(--sky); }
.home .ask .hint { color: var(--ink); opacity: 0.75; }
.home .result { padding: 16px; background: var(--tint); border-radius: 22px; }
.home .topiccard { border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--marigold); }
.home .howrow { background: var(--card); border: 2px solid var(--line); }
.home .script { background: var(--clay); }
.home .tick { background: var(--leaf); color: var(--ink); }
.home .cover { border: 2px solid var(--ink); }


.home .plan { border: 2px solid var(--line); }
.home .plan.featured { border-color: var(--ink); box-shadow: 6px 6px 0 var(--sky); }
.home .price { font-weight: 600; }
.home .faqrow { font-family: var(--display); font-weight: 500; font-size: 16px; border-bottom: 2px solid var(--line); }
.home .faqrow.open { border-bottom: none; }
.home .faqrow.open svg { transform: rotate(180deg); }
.home .faqa { font-size: 15px; line-height: 1.55; color: var(--ink); padding: 0 0 18px 0; border-bottom: 2px solid var(--line); max-width: 60ch; }
.home .panel img { border: 2px solid var(--ink); }

/* ---------- desktop layer (2026-09-12). Phone first; these are the only width rules. ---------- */
@media (min-width: 760px) {

    /* the tab bar moves to the top of the column and becomes a nav. The padding keeps the
       rule under it full width while the wordmark and links stay on the column. */
    .tabbar { order: -1; margin-top: 0; align-items: center; justify-content: space-between; border-top: none; border-bottom: 2px solid var(--line); background: var(--paper); padding: 10px max(20px, calc((100% - 640px) / 2)); }
    .navmark { display: flex; }
    .tabs { flex: 0 0 auto; justify-content: flex-end; gap: 4px; }
    .tab { flex-direction: row; gap: 8px; min-width: 0; min-height: 44px; padding: 0 14px; font-family: var(--display); font-weight: 600; font-size: 15px; border-radius: var(--r-pill); }
    .tab.on { background: var(--leaf); color: var(--green-deep); }
    .pagemark { display: none; }
    .dashhead { justify-content: flex-end; padding-top: 22px; }

    /* the parent sits further from the screen than from a phone */
    .prompt { font-size: 26px; }

    /* a bottom sheet becomes a dialog on the column, near the top, with no grabber.
       In the build the overlay is position: fixed; on the canvas it is absolute to the frame. */
    .overlay { justify-content: flex-start; align-items: center; padding: 88px 20px 40px 20px; }
    .sheet { width: 100%; max-width: 460px; margin: 0; border-radius: var(--r-sheet); border-bottom: var(--outline) solid var(--ink); padding-bottom: 24px; }
    .grabber { display: none; }

    /* a primary action stops spanning the whole column */
    .btn.full { max-width: 380px; }
    .sheet .btn.full, .cta .btn.full { max-width: none; }
}

@media (min-width: 1024px) {

    .grid2 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (hover: hover) and (pointer: fine) {
    .btn, .chip, .tab, .textbtn, .playbtn, .row, .cover, .vrow, .iconbtn, .radio, .checkbox, .faqrow, .navlink { cursor: pointer; }
    .btn:hover { transform: translateY(-1px); box-shadow: 0 5px 0 var(--ink); }
    .btn.small:hover { transform: translateY(-1px); box-shadow: 0 4px 0 var(--ink); }
    .btn.quiet:hover, .btn.danger:hover { transform: none; box-shadow: none; background: var(--tint); }
    .btn.disabled:hover { transform: none; box-shadow: 0 4px 0 var(--line); }
    .task .btn:hover { box-shadow: 0 4px 0 var(--ink); }
    .task .btn.small:hover, .task .btn.quiet:hover, .task .btn.danger:hover { transform: none; box-shadow: none; }
    .chip:hover { background: var(--tint); }
    .chip.selected:hover { background: var(--ink); }
    .row:hover, .vrow:hover { background: var(--card); }
    .vrow.selected:hover { background: var(--sky); }
    .tab:hover { color: var(--ink); }
    .textbtn:hover, .navlink:hover, a:hover { text-decoration: underline; }
    .playbtn:hover { background: var(--green-deep); }
    .playbtn.quiet:hover { background: var(--leaf); }
    .cover:hover { transform: translateY(-2px); }
}

/* the homepage's own desktop rules; they only match under .home */
@media (min-width: 1024px) {

    .home .nav { padding: 24px 40px 0 40px; }
    .home .hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 48px; row-gap: 14px; align-items: center; padding: 28px 40px 10px 40px; }
    .home .heroart { grid-column: 2; grid-row: 1 / span 3; }
    .home .headline { grid-column: 1; grid-row: 1; align-self: end; font-size: 46px; }
    .home .hero .sub { grid-column: 1; grid-row: 2; max-width: 460px; }
    .home .hero .btn { grid-column: 1; grid-row: 3; justify-self: start; min-width: 320px; }
    .home .what { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; padding: 22px 40px; align-items: start; }
    .home .whatrow { align-items: flex-start; }
    .home .section { padding-left: 40px; padding-right: 40px; }
    .home .builder { max-width: 700px; margin: 0 auto; }
    .home .section > .sub, .home .script, .home .topiccard { max-width: 720px; }
    .home .howlist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 28px; }
    .home .trustlist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 32px; }
    .home .plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
    .home .section.faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 64px; row-gap: 0; align-items: start; }
    .home .section.faq .h2 { grid-column: 1 / -1; }
    .home .footer { padding-left: 40px; padding-right: 40px; }
}