/*
 * Home page, direction "the product performs": every section shows a true fragment of Quitéa at
 * work. Fragments carry data-ui: inside them the product's own conventions apply (1px control
 * borders, small radii, a shadow on a floating document). Outside, the house rules hold.
 * Direction contract: .impeccable/surfaces/resources-views-site-home-edge.md.
 */

.home > section { max-width: var(--page); margin: var(--section-gap) auto 0; padding-inline: var(--gutter); }
.home h2 { margin: 0; }
.home p { margin: 0; }

/* Product conventions, shared by every fragment. */
[data-ui] { --ui-line: #d7d9e0; --ui-radius: 10px; --ui-text: 0.9375rem; color: var(--ink); font-size: var(--ui-text); letter-spacing: 0; }

/* Hero: a plain headline, then the app doing its job at true size. */
.home > .hero-app { margin-top: 0; min-height: min(calc(100svh - var(--header-height)), 52rem); padding-block: clamp(2rem, 5vh, 4rem); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--split-gap); row-gap: 3rem; align-items: center; }
.hero-app__text { grid-column: 1 / span 5; display: grid; gap: 1.75rem; justify-items: start; }
.hero-app h1 { margin: 0; font-size: clamp(2.5rem, 4.2vw, 4.75rem); }
.hero-app__lead { font-size: var(--step-lead); line-height: 1.35; max-width: 32ch; }
.hero-app__actions { margin-top: 0.5rem !important; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.25rem; }
.hero-app__note { font-size: var(--step-small); color: var(--ink-soft); }
.app { grid-column: 6 / -1; background: #ffffff; border: 1px solid var(--ui-line); border-radius: var(--ui-radius); overflow: hidden; }
.app__bar { display: flex; align-items: center; gap: 1.5rem; padding: 0.85rem 1.25rem; border-bottom: 1px solid var(--ui-line); }
.app__brand { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 600; letter-spacing: -0.02em; }
.app__brand .brand__mark { width: 1.08rem; height: 1rem; }
.app__month { font-weight: 600; }
.app__who { margin-left: auto; color: var(--ink-soft); }
.app__entry { margin: 0; padding: 1.25rem; background: var(--tone-1); border-bottom: 1px solid var(--ui-line); }
.app__entry-title { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 0.9rem !important; font-weight: 600; }
.app__entry-title span { font-size: 0.8125rem; font-weight: 500; color: #8a4a00; }
.app__fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 0.75rem; align-items: end; }
.app__field { display: grid; gap: 0.35rem; font-size: 0.8125rem; color: var(--ink-soft); }
.app__input { display: flex; align-items: center; background: #ffffff; border: 1px solid var(--ui-line); border-radius: 6px; transition: border-color var(--t-hover) ease, box-shadow var(--t-hover) ease; }
.app__input:focus-within { border-color: var(--ink); box-shadow: 0 0 0 3px rgb(247 148 29 / 35%); }
.app__input input { width: 100%; min-width: 0; height: 2.75rem; padding: 0 0.7rem; border: 0; background: none; font: 500 1rem/1 var(--font); color: var(--ink); outline: none; -moz-appearance: textfield; appearance: textfield; }
.app__input input::-webkit-inner-spin-button, .app__input input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.app__input em { padding-right: 0.7rem; font-style: normal; color: var(--ink-soft); }
.app__go { height: 2.75rem; padding: 0 1.25rem; border: 0; border-radius: 6px; background: var(--ink); color: #ffffff; font: 500 0.9375rem/1 var(--font); cursor: pointer; transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease; }
.app__go:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .app__go:hover { background: #2c3b66; }
}
.app__trips { display: table; width: calc(100% - 2.5rem); margin: 0.5rem 1.25rem 0; border-collapse: collapse; font-size: var(--ui-text); }
.app__trips th, .app__trips td { padding: 0.7rem 0.6rem; border-bottom: 1px solid var(--ui-line); background: none !important; color: var(--ink); text-align: left; font-weight: 400; }
.app__trips thead th { font-size: 0.8125rem; font-weight: 500; color: var(--ink-soft); }
.app__trips td:nth-child(n + 4), .app__trips th:nth-child(n + 4) { text-align: right; white-space: nowrap; }
.app__trips td:last-child { font-weight: 600; }
.app__trips tr.is-active td { background: #fff4e6 !important; }
.app__trips tbody tr { transition: background-color var(--t-hover) ease; }
@media (hover: hover) and (pointer: fine) {
  .app__trips tbody tr:hover td { background: var(--tone-1) !important; }
}
.app__total { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0.5rem 0.65rem 0.75rem; }
.app__total p { display: grid; gap: 0.25rem; padding: 0.85rem 1.2rem; }
.app__total span { font-size: 0.8125rem; color: var(--ink-soft); }
.app__total strong { font-weight: 600; }
.app__total p:last-child strong { font-size: 1.25rem; letter-spacing: -0.02em; }

/* Story: three gestures scroll past while the note they build stays pinned. */
.story { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--split-gap); align-items: start; timeline-scope: --step-1, --step-2, --step-3; }
.story__steps { grid-column: 1 / span 5; }
.story__title { font-size: var(--step-head); margin-bottom: clamp(3rem, 8vh, 5rem) !important; }
.story__step { padding-bottom: clamp(3rem, 8vh, 5rem); }
.story__step--1 { view-timeline-name: --step-1; }
.story__step--2 { view-timeline-name: --step-2; }
.story__step--3 { view-timeline-name: --step-3; min-height: 0; }
.story__say { font-size: var(--step-h); font-weight: 500; letter-spacing: -0.02em; margin-bottom: 1rem !important; }
.story__call { max-width: 34rem; padding: 1.25rem; background: #ffffff; border: 1px solid var(--ui-line); border-radius: var(--ui-radius); }
.story__call--form { display: grid; gap: 0.5rem; }
.story__call--form p { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); align-items: center; padding: 0.6rem 0.75rem; border: 1px solid var(--ui-line); border-radius: 6px; font-weight: 500; }
.story__call--form p span { font-size: 0.8125rem; font-weight: 400; color: var(--ink-soft); }
.story__call--calc { display: grid; gap: 0.35rem; }
.story__figure { font-size: var(--step-h); font-weight: 600; letter-spacing: -0.04em; line-height: 1; }
.story__hint { font-size: 0.875rem; color: var(--ink-soft); }
.story__calc { margin: 0; display: grid; }
.story__calc div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.55rem 0; border-bottom: 1px solid var(--ui-line); }
.story__calc dt { color: var(--ink-soft); }
.story__calc dd { margin: 0; font-weight: 500; white-space: nowrap; }
.story__calc-total { border-bottom: 0 !important; padding-top: 0.8rem !important; }
.story__calc-total dt { color: var(--ink); font-weight: 500; }
.story__calc-total dd { font-size: var(--step-lead); font-weight: 600; letter-spacing: -0.02em; }
.story__call--form .story__button { justify-self: start; margin-top: 0.35rem; }
.story__call--submit { display: grid; gap: 0.75rem; justify-items: start; }
.story__button { padding: 0.7rem 1.1rem; border-radius: 6px; background: var(--ink); color: #ffffff; font-weight: 500; }
.story__more { margin-top: 1rem !important; }
.story__stage { grid-column: 6 / -1; position: sticky; top: calc(var(--header-height) + 2rem); }
.note { padding: 1.5rem; background: #ffffff; border: 1px solid var(--ui-line); border-radius: var(--ui-radius); }
.note__head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1.25rem; }
.note__title { font-size: 1.125rem; font-weight: 600; }
.note__status { display: grid; }
.note__s { grid-area: 1 / 1; justify-self: end; padding: 0.25rem 0.7rem; border-radius: 999px; font-size: 0.8125rem; font-weight: 500; white-space: nowrap; }
.note__s--draft { background: var(--tone-1); }
.note__s--calc { background: #e7ebf5; }
.note__s--ok { background: #e3f1e6; color: #1c5b2c; }
.note__s--draft, .note__s--calc { visibility: hidden; }
.note__rows { list-style: none; margin: 0; padding: 0; }
.note__row { display: grid; grid-template-columns: 5rem minmax(0, 1fr) 4.5rem 5.5rem; gap: 0.75rem; padding: 0.8rem 0; border-bottom: 1px solid var(--ui-line); }
.note__row > :nth-child(n + 3) { text-align: right; white-space: nowrap; }
.note__row > :first-child { color: var(--ink-soft); }
.note__amount { font-weight: 600; }
.note__sum { display: flex; justify-content: space-between; padding: 1rem 0; font-size: 1.125rem; }
.note__out { display: flex; gap: 0.5rem; }
.note__out span { padding: 0.6rem 1rem; border-radius: 6px; background: var(--ink); color: #ffffff; font-weight: 500; }
.note__out .note__csv { background: var(--tone-1); color: var(--ink); }

/* Bands: full-bleed fields that break the page into chapters. */
.home > section.band { max-width: none; margin: var(--section-gap) 0 0; padding: var(--section-gap) max(var(--gutter), calc((100% - var(--page)) / 2 + var(--gutter))); }
.home > section.band + section.band { margin-top: 0; }
.band--tone { background: var(--tone-1); }
.band--ink { background: var(--ink); color: #ffffff; }
.band--ink h2 { color: #ffffff; }
.band--ink a { color: #ffffff; }
.band--tone .story__call, .band--tone .note { border-color: var(--tone-2); }

/* Route motif: the road marking from the logo study, used around the mark, never in it.
   Story: a dashed route links the three gestures, one stop per gesture. */
.story__step { position: relative; padding-left: 3.25rem; }
.story__step::before { content: ''; position: absolute; left: calc(0.7rem + 2px); top: 0.9rem; bottom: -0.9rem; width: 6px; background: url('../img/motif/route-v-ink.svg') repeat-y top center / 6px 36px; }
.story__step--3::before { bottom: auto; height: 0; }
.story__step::after { content: ''; position: absolute; left: -0.1rem; top: 0.15rem; width: calc(1.6rem + 10px); height: calc(1.6rem + 10px); box-sizing: border-box; border-radius: 50%; border: 5px solid var(--tone-1); background: var(--ink); }
.story__step--3::after { background: var(--accent); }

/* Power: click a vehicle, the amount on the left follows. */
.power { position: relative; overflow-x: clip; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--split-gap); row-gap: 1.5rem; align-items: center; }
.power__input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.power__text { grid-column: 1 / span 6; grid-row: 1 / span 2; }
.power__text h2 { font-size: var(--step-h); margin-bottom: 0.75rem !important; }
.power__hint { color: #d6dbea; }
.power__amount { margin: 2rem 0 1rem !important; font-size: var(--step-head); font-weight: 600; letter-spacing: -0.045em; line-height: 1; }
.power__rule { max-width: 40ch; color: #d6dbea; }
.power__electric { display: none; }
.power:has(#vehicle-electric:checked) .power__electric { display: inline; }
.power:has(#vehicle-electric:checked) .power__thermal { display: none; }
.power__amount span { animation: amount-in 260ms var(--ease-out) both; }
@keyframes amount-in { from { opacity: 0; transform: translateY(6px); } }
.vehicle { grid-row: 1; position: relative; display: block; overflow: hidden; background: #33416a; cursor: pointer; opacity: 0.6; outline: 3px solid transparent; outline-offset: 4px; transition: opacity var(--t-ui) ease, outline-color var(--t-ui) ease, transform var(--t-press) var(--ease-out); }
.vehicle--thermal { grid-column: 7 / span 3; }
.vehicle--electric { grid-column: 10 / span 3; }
.vehicle img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; transition: transform 260ms var(--ease-out); }
.vehicle__kind { position: absolute; left: 0; bottom: 0; padding: 0.6rem 1rem; background: #ffffff; color: var(--ink); font-weight: 600; }
.vehicle:active { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) {
  .vehicle:hover { opacity: 0.85; }
  .vehicle:hover img { transform: scale(1.03); }
}
.power:has(#vehicle-thermal:checked) .vehicle--thermal, .power:has(#vehicle-electric:checked) .vehicle--electric { opacity: 1; outline-color: var(--accent); }
.power:has(#vehicle-thermal:checked) .vehicle--thermal .vehicle__kind, .power:has(#vehicle-electric:checked) .vehicle--electric .vehicle__kind { background: var(--accent); color: var(--accent-ink); }
.power:has(#vehicle-thermal:focus-visible) .vehicle--thermal, .power:has(#vehicle-electric:focus-visible) .vehicle--electric { outline-color: #ffffff; }
.power::before, .power::after { content: ''; position: absolute; left: -320px; right: -320px; height: 8px; background: url('../img/motif/route-h-white.svg') repeat-x left center / 64px 8px; opacity: 0.32; pointer-events: none; }
.power::before { top: clamp(1.5rem, 3vw, 2.5rem); }
.power::after { bottom: clamp(1.5rem, 3vw, 2.5rem); }
.power__credits { grid-column: 7 / -1; grid-row: 2; font-size: var(--step-small); color: #c3cbe2; }
.power__credits a { color: #c3cbe2; }

/* Proof: one car, one year, the overpayment drawn to scale. Bars are <progress> elements so
   their length comes from the engine's figures, not from a style attribute. */
.trap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--split-gap); row-gap: 3rem; align-items: center; }
.trap__text { grid-column: 1 / span 6; }
.trap__title { font-size: var(--step-head); }
.trap__case { margin-top: 1.5rem !important; max-width: none; }
.trap__sources { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 1.25rem; margin-top: 2rem !important; font-weight: 600; }
.trap__sources span { flex-basis: 100%; font-size: var(--step-small); font-weight: 400; color: var(--ink-soft); }
.trap__sources a { text-decoration: none; }
@media (hover: hover) and (pointer: fine) {
  .trap__sources a:hover { text-decoration: underline; }
}
.chart { grid-column: 7 / -1; display: grid; gap: 2.5rem; padding: clamp(1.75rem, 3vw, 2.75rem); background: var(--tone-1); }
.chart__row { display: grid; gap: 0.75rem; }
.chart__label { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.chart__label span { font-weight: 500; }
.chart__label strong { font-size: var(--step-h); font-weight: 600; letter-spacing: -0.035em; }
.chart__bar { display: block; width: 100%; height: 3.25rem; border: 0; background: transparent; -webkit-appearance: none; appearance: none; color: var(--ink); }
.chart__bar::-webkit-progress-bar { background: transparent; }
.chart__bar::-webkit-progress-value { background: var(--ink); }
.chart__bar::-moz-progress-bar { background: var(--ink); }
.chart__bar--over { background: var(--accent); }
.chart__bar--over::-webkit-progress-bar { background: var(--accent); }
.chart__gap { display: flex; align-items: center; gap: 0.6rem; padding-top: 0.5rem; }
.chart__gap strong { font-size: var(--step-h); font-weight: 600; letter-spacing: -0.035em; }
.chart__swatch { width: 1rem; height: 1rem; background: var(--accent); }

/* Offer: plan names as the index, one stage that changes with the selection. */



/* Pricing sits on a tone band, as the offer section did, so trap, pricing and FAQ do not run as one white field. */
.home > .tiers { max-width: none; margin: var(--section-gap) 0 0; padding: var(--section-gap) max(var(--gutter), calc((100% - var(--page)) / 2 + var(--gutter))); background: var(--tone-1); }
.home > .tiers .tier:not(.tier--pick), .home > .tiers .tiers__switch { background: #ffffff; }

/* FAQ: a sticky heading beside a stack of filled tiles. */
.faq-tiles { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--split-gap); align-items: start; }
.faq-tiles__title { grid-column: 1 / span 4; position: sticky; top: calc(var(--header-height) + 1.5rem); font-size: var(--step-h); }
.faq-tiles__list { grid-column: 5 / -1; display: grid; gap: 8px; }
.faq-tiles details { background: var(--tone-1); transition: background-color var(--t-ui) ease; }
.faq-tiles details[open] { background: var(--tone-2); }
/* The answer opens instead of jumping: height eases out, under the same 220ms as the tile colour. */
@supports selector(::details-content) {
  @media (prefers-reduced-motion: no-preference) {
    .faq-tiles details { interpolate-size: allow-keywords; }
    .faq-tiles details::details-content { block-size: 0; overflow: clip; transition: block-size var(--t-ui) var(--ease-out), content-visibility var(--t-ui) allow-discrete; }
    .faq-tiles details[open]::details-content { block-size: auto; }
  }
}
.faq-tiles summary { position: relative; display: flex; align-items: center; min-height: 4.5rem; padding: 1rem 4rem 1rem 1.5rem; font-size: 1.25rem; font-weight: 500; letter-spacing: -0.015em; cursor: pointer; list-style: none; }
.faq-tiles summary::-webkit-details-marker { display: none; }
.faq-tiles summary::before, .faq-tiles summary::after { content: ''; position: absolute; right: 1.5rem; top: 50%; width: 16px; height: 3px; margin-top: -1.5px; background: var(--ink); transition: transform var(--t-ui) var(--ease-out); }
.faq-tiles summary::after { transform: rotate(90deg); }
.faq-tiles details[open] summary::after { transform: rotate(0deg); }
.faq-tiles details p { max-width: none; padding: 0 1.5rem 1.5rem; }
.faq-tiles__more { grid-column: 5 / -1; margin-top: 1.5rem !important; color: var(--ink-soft); }

/* Limits and sources read as a plain document. */
.home > .limits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto 1fr; grid-auto-flow: column; column-gap: var(--split-gap); align-items: start; }
.limits h2 { font-size: var(--step-h); margin: 0 0 1rem; }

.limits p, .limits li { max-width: none; }
.limits p { margin-bottom: 1rem; }
.limits ul { padding-left: 1.1rem; }
.limits li { margin-bottom: 0.6rem; }

/* Start: the first screen of the product, already open, on a dark field. */
.home > .start { max-width: none; margin-inline: 0; margin-top: 0; margin-bottom: 0; padding: clamp(4rem, 8vw, 7rem) max(var(--gutter), calc((100% - var(--page)) / 2 + var(--gutter))); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--split-gap); align-items: center; background: var(--ink); color: #ffffff; }
.start__text { grid-column: 1 / span 5; }
.start__title { color: #ffffff; font-size: var(--step-head); line-height: 0.98; margin-bottom: 1.5rem !important; }
.start__text p { max-width: 42ch; color: #d6dbea; }
.start__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 2rem !important; }
.start__link { color: #ffffff; }
.pdf { grid-column: 6 / -1; padding: clamp(1.5rem, 3vw, 2.5rem); background: #ffffff; color: var(--ink); border-radius: 4px; box-shadow: 0 24px 60px rgb(0 0 0 / 45%); }
.pdf__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1.5rem; }
.pdf__brand { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 1.25rem; font-weight: 600; letter-spacing: -0.03em; }
.pdf__brand .brand__mark { width: 1.3rem; height: 1.2rem; }
.pdf__title { text-align: right; font-weight: 600; line-height: 1.3; }
.pdf__title span { display: block; font-weight: 400; color: var(--ink-soft); }
.pdf table { display: table; width: 100%; margin: 0; border-collapse: collapse; font-size: 0.875rem; }
.pdf th, .pdf td { padding: 0.6rem 0.5rem; border-bottom: 1px solid var(--ui-line); background: none !important; color: var(--ink); text-align: left; font-weight: 400; vertical-align: top; }
.pdf thead th { font-size: 0.8125rem; font-weight: 500; color: var(--ink-soft); }
.pdf td span { display: block; font-size: 0.8125rem; color: var(--ink-soft); }
.pdf td:nth-child(n + 3), .pdf th:nth-child(n + 3) { text-align: right; white-space: nowrap; }
.pdf tfoot td { border-bottom: 0; font-weight: 600; }
.pdf td.pdf__num { text-align: right; white-space: nowrap; }
.pdf__rule { margin-top: 1.25rem !important; font-size: 0.875rem; }
.pdf__stamp { margin-top: 0.5rem !important; font-size: 0.8125rem; color: var(--ink-soft); }

/* Responsive compositions */
@media (max-width: 64rem) {
  .hero-app__text, .app { grid-column: 1 / -1; }
  .home > .hero-app { min-height: 0; }
  .story__steps, .story__stage { grid-column: 1 / -1; }
  .story__stage { position: static; margin-top: 2rem; }
  .story__step { min-height: 0; padding-bottom: 3rem; }
  .trap__text, .chart { grid-column: 1 / -1; }
  .faq-tiles__title, .faq-tiles__list, .faq-tiles__more { grid-column: 1 / -1; }
  .faq-tiles__title { position: static; margin-bottom: 2rem !important; }
  .start__text, .pdf { grid-column: 1 / -1; }
  .power__text { grid-column: 1 / -1; grid-row: auto; }
  .vehicle { grid-row: auto; }
  .vehicle--thermal { grid-column: 1 / span 6; }
  .vehicle--electric { grid-column: 7 / span 6; }
  .power__credits { grid-column: 1 / -1; grid-row: auto; }
  .home > .limits { grid-template-columns: minmax(0, 1fr); grid-auto-flow: row; }
  .limits h2 ~ h2 { margin-top: 2.5rem; }
  .pdf { margin-top: 3rem; }
}
@media (max-width: 40rem) {
  .app__bar { gap: 1rem; flex-wrap: wrap; }
  .app__entry { padding: 1rem; }
  .app__fields { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .app__field:last-of-type { grid-column: 1 / -1; }
  .app__go { grid-column: 1 / -1; }
  .app__trips { width: calc(100% - 1.5rem); margin: 0 0.75rem; }
  .app__trips th:nth-child(3), .app__trips td:nth-child(3), .app__trips th:first-child, .app__trips td:first-child { display: none; }
  .app__total { grid-template-columns: minmax(0, 1fr); margin: 0.5rem 0; }
  .hero-app__actions .btn { width: 100%; }
  .note { padding: 1rem; }
  .note__row { grid-template-columns: minmax(0, 1fr) 4rem 5rem; }
  .note__row > :first-child { display: none; }
  .vehicle img { aspect-ratio: 1 / 1; }
  .faq-tiles summary { font-size: 1.125rem; min-height: 4rem; padding-left: 1.25rem; }
  .start__title { font-size: 13vw; }
  .pdf thead th:nth-child(4), .pdf tbody td:nth-child(4), .pdf tfoot td:nth-child(3) { display: none; }
  .pdf__head { flex-direction: column; }
  .pdf__title { text-align: left; }
  .start__actions .btn { width: 100%; }
}

/* Motion. Signature: the pinned note changes state as the three gestures scroll past. Each
   section's parts arrive once, in reading order. Without scroll timelines, or under reduced
   motion, everything is in its finished state. */
@media (prefers-reduced-motion: no-preference) {
  .hero-app h1 { animation: rise var(--t-reveal) var(--ease-out) 40ms both; }
  .hero-app__lead { animation: rise var(--t-reveal) var(--ease-out) 120ms both; }
  .hero-app__actions { animation: rise var(--t-reveal) var(--ease-out) 200ms both; }
  .app { animation: app-in 900ms var(--ease-out) 260ms both; }
  .app__trips tbody tr { animation: rise 600ms var(--ease-out) both; }
  .app__trips tbody tr:nth-child(1) { animation-delay: 620ms; }
  .app__trips tbody tr:nth-child(2) { animation-delay: 690ms; }
  .app__trips tbody tr:nth-child(3) { animation-delay: 760ms; }
}
@keyframes appear { from { opacity: 0; transform: translateY(-8px); } }
@keyframes hide { from { opacity: 1; } to { opacity: 0; } }
@keyframes light { from { opacity: 0.3; } to { opacity: 1; } }

@supports (animation-timeline: view()) and (timeline-scope: --a) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 64.01rem) {
    .note__s--draft, .note__s--calc { visibility: visible; }
    .note__row--new { animation: appear linear both; animation-timeline: --step-1; animation-range: entry 40% contain 30%; }
    .note__amount { animation: show linear both; animation-timeline: --step-2; animation-range: entry 40% contain 20%; }
    .note__s--draft { animation: hide linear both; animation-timeline: --step-2; animation-range: entry 40% contain 20%; }
    .note__s--calc { animation: show linear both, hide linear both; animation-timeline: --step-2, --step-3; animation-range: entry 40% contain 20%, entry 40% contain 20%; }
    .note__s--ok { animation: show linear both; animation-timeline: --step-3; animation-range: entry 40% contain 20%; }
    .note__out span { animation: light linear both; animation-timeline: --step-3; animation-range: entry 40% contain 20%; }
  }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .story__title, .story__say, .story__call, .trap__text > *, .chart__row, .faq-tiles details, .limits > *, .start__text, .power__text, .vehicle { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
    .pdf { animation: app-in linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
  }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .story__step::before { animation: route-draw linear both; animation-timeline: view(); animation-range: entry 30% cover 55%; }
    .power::after { animation: road-shift linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
    .power::before { animation: road-shift-back linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
  }
}