/* Home page sections. Elements marked data-ui are pieces of the app's own
   interface and follow src/ui/theme.ts instead of the page's rules. */

.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: clamp(2.5rem, 5vw, 4rem); }
.grid > * { grid-column: 1 / -1; min-width: 0; }
:root { --t-item: clamp(1.1875rem, 1rem + 0.5vw, 1.5rem); }
.hero-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
.hero-grid > * { grid-column: 1 / -1; min-width: 0; }

.sec { padding-block: calc(var(--section) / 2); }
.sec h2 { font-size: var(--t-heading); }
.sec p + p { margin-top: 1rem; }
.statement { font-size: var(--t-statement); line-height: 1.3; letter-spacing: -0.015em; font-weight: 500; max-width: 36ch; }
h2 + .statement, h2 + p { margin-top: clamp(1.25rem, 2.4vw, 2rem); }
.statement + p { margin-top: 1.5rem !important; max-width: 46ch; }
.caption { font-size: var(--t-small); color: var(--ink-soft); line-height: 1.5; max-width: 52ch; }
.field { background: var(--blue); color: var(--on-field); padding-block: calc(var(--section) * 0.8); }
.field .caption { color: var(--on-field-soft); }
.field a { color: var(--on-field); }

.js .js-only { } /* shown */
html:not(.js) .js-only { display: none !important; }

/* Hero ------------------------------------------------------------------ */
.hero { padding-block: clamp(1.5rem, 3vw, 3rem) calc(var(--section) / 2); }
.hero h1 { font-size: clamp(2.75rem, 1.1rem + 4.4vw, 5rem); max-width: 12ch; }
.lede { font-size: var(--t-statement); line-height: 1.3; letter-spacing: -0.015em; margin-top: clamp(1.5rem, 2.6vw, 2.25rem); max-width: 34ch; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; margin-top: clamp(1.75rem, 3vw, 2.5rem); }
.textlink { font-weight: 600; color: var(--ink); }
.hero-note { margin-top: 1.25rem; font-size: var(--t-small); color: var(--ink-soft); max-width: 36ch; }

.hero-stage { display: grid; grid-template-columns: minmax(0, 1fr); margin-top: clamp(2.5rem, 6vw, 4rem); }
.hero-stage::before { content: ''; grid-area: 2 / 1 / 4 / 2; background: var(--blue); margin-inline: calc(var(--m) * -1); }
.hero-plate { grid-area: 3 / 1; margin: 0; padding: 2rem 0 2.5rem; position: relative; }
.kc--lookup { grid-area: 1 / 1 / 3 / 2; position: relative; z-index: 2; }
.hero-try { grid-area: 4 / 1; margin-top: 1.25rem; }

.hero-plate .crop { overflow: hidden; aspect-ratio: 1280 / 1956; }
.hero-plate img { width: 100%; height: 100%; object-fit: cover; clip-path: inset(1.6% 1.8% 1.4% 1.8%); transform: scale(1.03); }
.hero-plate figcaption { margin-top: 1rem; color: var(--on-field); font-size: var(--t-small); max-width: 34ch; }

.hero-try { font-size: var(--t-small); color: var(--ink-soft); line-height: 1.9; max-width: 44ch; }
.chip {
  font: inherit; font-weight: 600; color: var(--ink);
  background: var(--tone); border: 0; border-radius: 999px; padding: 0.2rem 0.7rem; cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 200ms ease;
}
.chip:active { transform: scale(0.96); }
@media (hover: hover) and (pointer: fine) { .chip:hover { background: #d3dce8; } }

@media (min-width: 48rem) {
  /* Panel, a strip of field, then the painting; the panel overlaps only the paper margin. */
  .hero-stage { grid-template-columns: minmax(0, 17rem) 3rem 4rem minmax(0, 1fr); }
  .hero-stage::before { grid-area: 1 / 2 / 2 / -1; margin: 0; }
  .hero-plate { grid-area: 1 / 3 / 2 / -1; padding: clamp(1.5rem, 2.6vw, 2.5rem) clamp(1.5rem, 2.6vw, 2.5rem) clamp(1.5rem, 2.6vw, 2.5rem) 0; }
  .hero-plate figcaption { padding-left: 4.75rem; }
  .kc--lookup { grid-area: 1 / 1 / 2 / 4; align-self: center; margin-block: 2rem; }
  .hero-try { grid-area: 2 / 1 / 3 / 4; }
}

@media (min-width: 80rem) {
  .hero-grid { align-items: start; }
  .hero-copy { grid-column: 1 / span 5; padding-top: clamp(2rem, 5vw, 5.5rem); }
  .hero-stage { grid-column: 6 / -1; margin-top: 0; }
}

/* App fragments (data-ui) ---------------------------------------------- */
.kc {
  --k-text: #111418; --k-muted: #3b4350; --k-border: #5b6472; --k-primary: #0b4f8a;
  --k-screen: #f3f6fa; --k-surface: #eef2f7;
  font-family: var(--app-font);
  font-variant-numeric: normal;
  color: var(--k-text);
  background: var(--k-screen);
  border-radius: 22px;
  padding: 18px;
  font-size: 17px;
  line-height: 1.35;
  letter-spacing: -0.01em;
  box-shadow: 0 0 0 1px rgba(13, 26, 43, 0.14);
  width: 100%;
  max-width: 26.5rem;
}
.kc p { margin: 0; }
.kc a { color: var(--k-primary); text-decoration: underline; text-underline-offset: 2px; }
.kc-title { font-family: var(--app-font); font-size: 28px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; margin: 16px 0 8px; text-wrap: initial; }
.kc-sub { color: var(--k-muted); margin: -2px 0 8px; }
.kc-source { display: flex; gap: 4px; align-items: flex-start; color: var(--k-muted); font-size: 15px; margin-top: 4px !important; }
.kc-source svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.kc-nav { color: var(--k-primary); font-size: 17px; }
.kc-nav span { font-size: 26px; line-height: 0; vertical-align: -3px; margin-right: 2px; }

.kc-search { position: relative; }
.kc-search input {
  width: 100%; height: 52px; padding: 0 14px 0 44px;
  border: 1px solid var(--k-border); border-radius: 12px; background: #fff; color: var(--k-text);
  font: inherit; font-size: 19px; -webkit-appearance: none; appearance: none;
}
.kc-search input:focus-visible { outline: 3px solid var(--k-primary); outline-offset: 1px; }
.kc-search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.kc-search-icon { position: absolute; left: 14px; top: 15px; width: 22px; height: 22px; color: var(--k-muted); pointer-events: none; }
.kc-results {
  position: absolute; z-index: 5; left: 0; right: 0; top: 58px; margin: 0; padding: 6px; list-style: none;
  background: #fff; border-radius: 14px; box-shadow: 0 18px 40px -12px rgba(6, 26, 52, 0.4), 0 0 0 1px rgba(6, 26, 52, 0.08);
  max-height: 320px; overflow: auto; transform-origin: top center;
  transition: opacity 150ms var(--ease-out), transform 150ms var(--ease-out);
}
.kc-results[data-state='closed'] { opacity: 0; transform: scale(0.97) translateY(-4px); pointer-events: none; }
.kc-results li { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding: 10px 10px; border-radius: 10px; cursor: pointer; font-size: 17px; }
.kc-results li small { color: var(--k-muted); font-size: 15px; white-space: nowrap; }
.kc-results li[aria-selected='true'] { background: var(--k-surface); }
.kc-results .kc-empty { color: var(--k-muted); cursor: default; }

.kc-portion { margin-top: 14px; display: grid; gap: 4px; }
.kc-portion label { font-size: 15px; color: var(--k-muted); font-weight: 600; }
.kc-portion select {
  width: 100%; min-height: 52px; padding: 0 40px 0 14px; border: 1px solid var(--k-border); border-radius: 12px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%233b4350' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center / 20px;
  color: var(--k-text); font: inherit; font-size: 17px; -webkit-appearance: none; appearance: none; text-overflow: ellipsis;
}
.kc-portion select:focus-visible { outline: 3px solid var(--k-primary); outline-offset: 1px; }

.kc-card { background: #fff; border-radius: 16px; padding: 14px 16px 6px; margin-top: 14px; }
.kc-card-title { font-weight: 700; font-size: 19px; margin-bottom: 8px !important; }
.kc-table { width: 100%; border-collapse: collapse; border-top: 1px solid var(--k-border); }
.kc-table tr { border-bottom: 1px solid var(--k-border); }
.kc-table th { text-align: left; font-weight: 700; font-size: 19px; padding: 8px 0; }
.kc-table td { text-align: right; padding: 8px 0; }
.kc-table .kc-minor th { font-weight: 400; }
.kc-table .kc-minor .kc-v { font-size: 19px; }
.kc-v { display: inline-block; font-weight: 700; font-size: 22px; font-variant-numeric: tabular-nums; }
.kc-v.is-muted { color: var(--k-muted); }
.kc-table tr:last-child { border-bottom: 0; }
.kc-table .is-estimate { background: #fff4d6; }
.kc-table .is-estimate th, .kc-table .is-estimate td { padding-inline: 6px; }
.kc-badge {
  display: block; width: max-content; margin: 4px 0 0 auto; padding: 1px 8px;
  border: 2px dashed #5c3b00; border-radius: 12px; color: #5c3b00; font-size: 14px; font-weight: 700;
}
.kc-foot { margin-top: 12px !important; color: var(--k-muted); font-size: 15px; }
.kc-strong { font-weight: 700; font-size: 19px; }
.kc-muted { color: var(--k-muted); font-size: 15px; }
.kc-ask p + p { margin-top: 4px; }
.kc-ask { padding-bottom: 16px; }
.kc-btn {
  display: flex; align-items: center; justify-content: center; text-align: center; min-height: 52px; margin-top: 12px; padding: 6px 12px;
  border: 2px solid var(--k-primary); border-radius: 12px; color: var(--k-primary); font-weight: 700; font-size: 17px;
}
.kc-warn { margin-top: 14px; background: #fde8e8; border: 2px solid #7a0e12; border-radius: 16px; padding: 14px 16px; color: #7a0e12; }
.kc-warn p { font-size: 16px; }
.kc-warn-title { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 17px !important; }
.kc-warn-title:not(:first-child) { margin-top: 12px !important; }
.kc-warn svg { width: 20px; height: 20px; flex: none; }

/* Value roll: the signature move when a food or portion changes. */
.kc-v.is-out { animation: kc-out 140ms var(--ease-out) forwards; }
.kc-v.is-in { animation: kc-in 260ms var(--ease-out) both; }
@keyframes kc-out { to { opacity: 0; transform: translateY(-40%); filter: blur(3px); } }
@keyframes kc-in { from { opacity: 0; transform: translateY(45%); filter: blur(3px); } }

/* Missing ---------------------------------------------------------------- */
@media (min-width: 64rem) {
  .missing-copy { grid-column: 1 / span 5; align-self: start; padding-top: 1rem; }
  .missing-shot { grid-column: 7 / -1; }
}
.missing-shot .kc { margin-inline: auto; }
.missing-shot .caption { margin: 1.25rem auto 0; max-width: 26.5rem; }

/* Additives -------------------------------------------------------------- */
.additives { background: var(--tone); margin-top: calc(var(--section) / 2); padding-block: calc(var(--section) * 0.7); }
@media (min-width: 64rem) {
  .additives-title { grid-column: 1 / span 6; }
  .additives-copy { grid-column: 8 / -1; align-self: end; }
  .tally ol { grid-template-columns: 1fr 1fr; column-gap: var(--gap); grid-auto-flow: column; grid-template-rows: repeat(4, auto); }
}
.tally { margin: 0; }
.tally figcaption { font-size: var(--t-small); color: var(--ink-soft); padding-bottom: 0.75rem; }
.tally ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.tally li { position: relative; display: flex; justify-content: space-between; gap: 1rem; padding: 0.7rem 1rem; background: var(--ground); font-size: var(--t-item); letter-spacing: -0.015em; isolation: isolate; }
.tally li::before { content: ''; position: absolute; inset: 0; z-index: -1; background: #c9d5e4; transform-origin: left center; transform: scaleX(var(--w)); transition: transform 900ms var(--ease-out); transition-delay: var(--d, 0ms); }
.tally li.is-k::before { background: #bfe0c1; }
.tally .t-name { font-weight: 600; }
.tally .t-num { font-weight: 700; white-space: nowrap; }
.additives-list .caption { margin-top: 1rem; }
.additives-copy p { max-width: 46ch; }

/* Today ------------------------------------------------------------------ */
@media (min-width: 64rem) {
  .today-title { grid-column: 1 / span 7; }
  .today-shot { grid-column: 1 / span 5; grid-row: 2; }
  .today-copy { grid-column: 7 / -1; grid-row: 2; align-self: start; padding-top: 0.5rem; }
}
.today-shot .kc { margin-inline: 0; }
.caption--field { margin-top: 2rem !important; }
.kc--today { padding: 0 0 16px; overflow: hidden; }
.kc-hero { background: #0a2a52; color: #fff; padding: 20px 18px 18px; }
.kc-hero-day { font-size: 15px; color: #cfdcec; }
.kc-hero-big { font-size: 34px; font-weight: 700; letter-spacing: -0.02em; }
.kc-bars { list-style: none; margin: 0; padding: 10px 18px 4px; display: grid; gap: 10px; }
.kc-bars li { --c: #0b4f8a; display: grid; gap: 4px; }
.kc-bars li.is-near { --c: #7a4b00; }
.kc-bars p { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; flex-wrap: wrap; font-size: 17px; }
.kc-bars p span { color: var(--k-muted); }
.kc-bars p span b { color: var(--k-text); }
.kc-track { display: block; height: 12px; border-radius: 6px; background: #dfe3e8; overflow: hidden; }
.kc-track i { display: block; height: 100%; width: 100%; background: var(--c); border-radius: 6px; transform-origin: left center; transform: scaleX(var(--v)); }
.kc-left { font-size: 15px !important; color: var(--k-muted); }
.kc-bars .is-near .kc-left { font-weight: 700; color: #7a4b00; }
.kc-fit { margin: 8px 18px 0; background: #fff; border-radius: 16px; padding: 14px 16px; }
.kc-fit ul { list-style: none; margin: 8px 0; padding: 0; }
.kc-fit li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid #c9ced6; }
.kc-fit li span { display: grid; font-weight: 600; }
.kc-fit li small { color: var(--k-muted); font-weight: 400; font-size: 15px; }
.kc-fit li b { white-space: nowrap; }

/* Fruit rail ------------------------------------------------------------- */
@media (min-width: 64rem) {
  .fruit-head h2 { grid-column: 1 / span 6; }
  .fruit-head p { grid-column: 8 / -1; align-self: end; max-width: 40ch; }
}
.rail { margin-top: clamp(2.5rem, 5vw, 4rem); }
.rail-track {
  list-style: none; margin: 0; display: flex; gap: var(--gap);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
  padding: 0 var(--m) 1.25rem; scroll-padding-inline: var(--m);
  scrollbar-width: thin; scrollbar-color: var(--blue) transparent;
  cursor: grab;
}
.rail-track.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.rail-track:focus-visible { outline-offset: -3px; }
@media (min-width: 90rem) { .rail-track { padding-inline: calc((100vw - var(--max)) / 2 + var(--m)); scroll-padding-inline: calc((100vw - var(--max)) / 2 + var(--m)); } }
.specimen { flex: 0 0 clamp(15rem, 21vw, 19.5rem); scroll-snap-align: start; }
.specimen .tile {
  aspect-ratio: 4 / 5; padding: 9%; display: flex; align-items: center; justify-content: center;
  background: var(--tile, var(--tone));
}
.specimen img {
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  clip-path: inset(2.4% 2.6% 2.2% 2.6%);
  -webkit-user-drag: none; user-select: none;
  transition: transform 500ms var(--ease-out);
}
@media (hover: hover) and (pointer: fine) { .specimen:hover img { transform: scale(1.03); } }
.specimen:nth-child(3n + 2) { --tile: #dde7dd; }
.specimen:nth-child(3n + 3) { --tile: #d9e4f0; }
.specimen h3 { font-size: var(--t-item); letter-spacing: -0.025em; margin-top: 1rem; }
.specimen p { margin-top: 0.3rem; }
.specimen p a { font-weight: 700; }
.specimen .credit { font-size: var(--t-small); color: var(--ink-soft); }
.rail-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1.5rem; margin-top: clamp(2rem, 4vw, 3rem); }
.rail-foot .statement { max-width: 32ch; }
.rail-buttons { display: flex; gap: 0.75rem; }
.round {
  width: 3.25rem; height: 3.25rem; border-radius: 999px; border: 0; display: grid; place-items: center;
  background: var(--ink); color: #fff; cursor: pointer;
  transition: transform 160ms var(--ease-out), opacity 200ms ease, background-color 200ms ease;
}
.round svg { width: 1.4rem; height: 1.4rem; }
.round:active { transform: scale(0.94); }
.round:disabled { opacity: 0.3; cursor: default; }
@media (hover: hover) and (pointer: fine) { .round:not(:disabled):hover { background: var(--blue); } }

/* Report ----------------------------------------------------------------- */
.report { background: var(--tone); margin-top: calc(var(--section) / 2); padding-block: calc(var(--section) * 0.7); }
@media (min-width: 64rem) {
  .report-shot { grid-column: 1 / span 6; }
  .report-copy { grid-column: 8 / -1; align-self: center; }
}
.sheet {
  font-family: var(--app-font); font-variant-numeric: tabular-nums;
  background: #fff; color: #111418; padding: clamp(20px, 3vw, 36px);
  aspect-ratio: auto; max-width: 36rem; margin-inline: auto;
  box-shadow: 0 0 0 1px rgba(13, 26, 43, 0.12);
  font-size: 14px; line-height: 1.4;
}
.sheet p { margin: 0; }
.sheet-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding-bottom: 14px; border-bottom: 3px solid #0b4f8a; }
.sheet-title { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; }
.sheet-meta { text-align: right; color: #3b4350; font-size: 13px; }
.sheet-table { width: 100%; border-collapse: collapse; margin-top: 16px; }
.sheet-table caption { text-align: left; font-weight: 700; font-size: 15px; padding-bottom: 6px; }
.sheet-table th, .sheet-table td { padding: 7px 6px; text-align: right; border-bottom: 1px solid #c9ced6; font-size: 14px; }
.sheet-table th:first-child { text-align: left; }
.sheet-table thead th { color: #3b4350; font-weight: 600; font-size: 12.5px; }
.sheet-table tbody th { font-weight: 600; }
.sheet-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; }
.sheet-h { font-weight: 700; font-size: 14px; margin-bottom: 6px !important; }
.sheet-list { margin: 0; padding: 0 0 0 1.1em; }
.sheet-list li { padding: 3px 0; }
.sheet-list li span:last-child { float: right; color: #3b4350; }
.sheet-chart { width: 100%; height: auto; overflow: visible; }
.sheet-chart text { font: 12px var(--app-font); fill: #3b4350; }
.sheet-foot { margin-top: 20px !important; color: #3b4350; font-size: 12px; }
@media (max-width: 30rem) { .sheet-cols { grid-template-columns: 1fr; } }
.report-copy .caption { margin-top: 2rem !important; }

/* Promises --------------------------------------------------------------- */
.promises { background: var(--navy); }
.promise h2 { font-size: var(--t-heading); }
.promise > p { margin-top: 1.5rem; max-width: 40ch; color: var(--on-field); }
@media (min-width: 64rem) {
  .promise--private { grid-column: 1 / span 5; }
  .promise--type { grid-column: 7 / -1; }
}
.leaves { margin: clamp(2rem, 4vw, 3rem) 0 0; }
.leaves h3 { font-size: var(--t-statement); letter-spacing: -0.02em; line-height: 1.2; }
.leaves dl { margin: 1rem 0 0; display: grid; gap: 1.25rem; max-width: 44ch; }
.leaves dt { font-weight: 700; }
.leaves dd { margin: 0.25rem 0 0; color: var(--on-field-soft); font-size: var(--t-small); line-height: 1.5; }
.sizes { margin: clamp(2rem, 4vw, 3rem) 0 0; font-family: var(--app-font); }
.sizes p { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0 1rem; font-size: var(--s); line-height: 1.2; padding: 0.55em 0.7em; background: #12355f; margin-top: 6px; }
.sizes p span { font-weight: 700; }
.sizes p b { font-weight: 700; white-space: nowrap; }
.sizes figcaption { margin-top: 1rem; font-family: var(--font); font-size: var(--t-small); color: var(--on-field-soft); max-width: 46ch; }

/* Pricing ---------------------------------------------------------------- */
.pricing-title { grid-column: 1 / -1; }
.plan h3 { font-size: var(--t-statement); letter-spacing: -0.02em; line-height: 1.2; }
.plan ul { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 0.6rem; }
.plan--premium ul { columns: 2; column-gap: var(--gap); display: block; }
.plan--premium li { break-inside: avoid; margin-bottom: 0.6rem; }
.prices { width: 100%; border-collapse: collapse; }
.prices th, .prices td { text-align: left; padding: 1rem 1.25rem; font-size: var(--t-item); letter-spacing: -0.015em; }
.prices tbody tr { background: var(--paper); border-bottom: 6px solid var(--ground); }
.prices th { font-weight: 700; }
.prices td:nth-child(2) { font-weight: 600; }
.prices td:last-child { color: var(--ink-soft); font-size: var(--t-body); }
.buy-cta .caption { margin-top: 1.25rem; }
@media (min-width: 64rem) {
  .plan--free { grid-column: 1 / span 4; }
  .plan--premium { grid-column: 6 / -1; }
  .buy { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: center; }
  .prices { grid-column: 1 / span 7; }
  .buy-cta { grid-column: 9 / -1; }
}
@media (max-width: 63.99rem) { .plan--premium ul { columns: 1; } .buy-cta { margin-top: 1.5rem; } }
@media (max-width: 30rem) { .prices td:last-child { display: none; } }

/* Questions -------------------------------------------------------------- */
@media (min-width: 64rem) {
  .questions-head { grid-column: 1 / span 4; position: sticky; top: 7rem; align-self: start; }
  .faq { grid-column: 6 / -1; }
}
.questions-head p { margin-top: 1.25rem; }
.faq details { transition: background-color 200ms ease; }
.faq details[open] { background: var(--paper); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: 1.1rem 1.25rem; font-size: var(--t-item); font-weight: 600; letter-spacing: -0.015em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; flex: none; width: 1.75rem; height: 1.75rem; border-radius: 50%;
  background: var(--tone) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 6v12M6 12h12' stroke='%230d1a2b' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 1rem;
  transition: transform 200ms var(--ease-out), background-color 200ms ease;
}
.faq details[open] summary::after { transform: rotate(45deg); background-color: #d3dce8; }
.faq details p { padding: 0 1.25rem 1.4rem; max-width: 62ch; }
@media (hover: hover) and (pointer: fine) { .faq summary:hover::after { background-color: #d3dce8; } }

/* Entrances: content is visible without script; with it, parts rise in order. */
.js [data-rise] { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); transition-delay: var(--d, 0ms); }
.js [data-rise].is-in { opacity: 1; transform: none; }
.js [data-reveal] img { clip-path: inset(100% 1.8% 1.4% 1.8%); transition: clip-path 1100ms var(--ease-in-out) 150ms; }
.js [data-reveal].is-in img { clip-path: inset(1.6% 1.8% 1.4% 1.8%); }
.js [data-reveal] figcaption { opacity: 0; transition: opacity 600ms ease 900ms; }
.js [data-reveal].is-in figcaption { opacity: 1; }
.js .kc--today .kc-track i { transform: scaleX(0); transition: transform 900ms var(--ease-out); transition-delay: var(--d, 0ms); }
.js .kc--today.is-in .kc-track i { transform: scaleX(var(--v)); }
.js .tally li::before { transform: scaleX(0); }
.js .is-in .tally li::before, .js .tally.is-in li::before { transform: scaleX(var(--w)); }

/* The hero painting drifts a little as the page scrolls. */
@supports (animation-timeline: view()) {
  .hero-plate img { animation: drift linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
  @keyframes drift { from { transform: scale(1.03) translateY(-1%); } to { transform: scale(1.09) translateY(2%); } }
}

@media (prefers-reduced-motion: reduce) {
  .js [data-rise] { opacity: 1; transform: none; }
  .js [data-reveal] img { clip-path: inset(1.6% 1.8% 1.4% 1.8%); }
  .js [data-reveal] figcaption { opacity: 1; }
  .js .kc--today .kc-track i { transform: scaleX(var(--v)); }
  .js .tally li::before { transform: scaleX(var(--w)); }
  .hero-plate img { animation: none !important; }
  .kc-v.is-out, .kc-v.is-in { animation: none; }
}