/*
 * Pages D: how it works, FAQ, comparison, about, pricing, 404 and the four legal pages.
 * Loaded with `styles: pages-d` in the front matter. Tokens come from site.css: same world as the home
 * page, sizes from the five steps only, square corners, no rule, no outline, no shadow at rest.
 * Interface fragments (`.frag`, data-ui) follow the application's own conventions instead.
 */

/* Hero: the title block left, one fragment of the product right. */
.dhero { padding: clamp(1rem, 2vw, 1.5rem) 0 clamp(3rem, 6vw, 5rem); }
.dhero__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--split-gap); align-items: center; }
.dhero__text { grid-column: 1 / span 7; }
.dhero__ui { grid-column: 8 / -1; }
.dhero h1 { margin: 0.5rem 0 1.25rem; font-size: var(--step-head); letter-spacing: -0.045em; max-width: 20ch; }
.dhero .lead { max-width: 40ch; }
.dhero .guide-hero__facts { margin-top: 0.5rem; }
.dhero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 2rem 0 0; }

/* Full-bleed tone band and the statement it carries. */
.dband { margin-top: var(--section-gap); padding: var(--section-gap) 0; background: var(--tone-1); }
.dband + .dband, .dhero + .dband { margin-top: 0; }
.dstatement { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--split-gap); align-items: start; }
.dstatement > h2 { grid-column: 1 / span 4; margin: 0; font-size: var(--step-h); }
.dstatement__text { grid-column: 5 / -1; }
/* Text in a column fills that column (the generic .prose measure is for single-column reading). */
.dstatement__text.prose, .cmp-show__text.prose { max-width: none; }
.dstatement__text p { margin: 0 0 1rem; font-size: var(--step-lead); line-height: 1.35; max-width: none; }
.dstatement__text p:last-child { margin-bottom: 0; }
.dstatement__text.prose p + p { font-size: var(--step-body); line-height: 1.5; max-width: none; }

/* Interface fragments: cropped pieces of the application, figures from the engine. */
.frag { padding: 1.25rem 1.35rem; background: #ffffff; border: 1px solid var(--tone-2); border-radius: 12px; font-size: var(--step-small); line-height: 1.4; color: var(--ink); }
.frag p { max-width: none; }
.frag__title { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin: 0 0 0.85rem; font-weight: 600; }
.frag__tag { padding: 0.15rem 0.55rem; border-radius: 999px; background: var(--tone-1); color: var(--ink-soft); font-weight: 500; }
.frag__sub { margin: 0 0 0.6rem; color: var(--ink-soft); }
.frag__sub:last-child { margin: 0.75rem 0 0; }
.frag__lines { margin: 0; }
.frag__lines div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.5rem 0; border-top: 1px solid var(--tone-1); }
.frag__lines div:first-child { border-top: 0; }
.frag__lines dt { color: var(--ink-soft); }
.frag__lines dd { margin: 0; font-weight: 500; font-variant-numeric: tabular-nums; }
.frag__total { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin: 0.5rem 0 0; padding-top: 0.75rem; border-top: 1px solid var(--tone-2); font-weight: 600; }
.frag__total strong, .frag__big { font-size: var(--step-h); letter-spacing: -0.03em; }
.frag__big { margin: 0.25rem 0 0.35rem; font-weight: 600; line-height: 1.1; }
.frag__field { display: flex; gap: 0.75rem; margin-bottom: 0.4rem; padding: 0.55rem 0.75rem; border: 1px solid var(--tone-2); border-radius: 8px; }
.frag__field span { min-width: 6.5rem; color: var(--ink-soft); }
.frag__btn { display: inline-block; margin-top: 0.5rem; padding: 0.55rem 0.95rem; border-radius: 6px; background: var(--ink); color: #ffffff; font-weight: 600; }
.frag__btn--soft { background: var(--tone-1); color: var(--ink); }
.frag__days, .frag__orgs, .frag__states { margin: 0; padding: 0; list-style: none; }
.frag__days li { display: grid; grid-template-columns: 4rem 1fr auto auto; gap: 0.75rem; padding: 0.5rem 0; border-top: 1px solid var(--tone-1); font-variant-numeric: tabular-nums; }
.frag__days li:first-child { border-top: 0; }
.frag__days b { min-width: 4.5rem; text-align: right; }
.frag__states { display: grid; gap: 0.4rem; }
.frag__states li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.55rem 0.75rem; border: 1px solid var(--tone-2); border-radius: 8px; color: var(--ink-soft); }
.frag__states li.is-on { border-color: var(--ink); background: var(--ink); color: #ffffff; font-weight: 600; }
.frag__states small { font-size: inherit; font-weight: 400; color: var(--field-soft); }
.frag__orgs li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.55rem 0.75rem; border-radius: 8px; }
.frag__orgs li.is-on { background: var(--tone-1); font-weight: 600; }
.frag__orgs small { font-size: inherit; color: var(--ink-soft); font-weight: 400; }
.frag__table { display: table; width: 100%; margin: 0; border-collapse: collapse; font-size: inherit; font-variant-numeric: tabular-nums; }
.frag__table td { padding: 0.45rem 0.35rem; border-top: 1px solid var(--tone-1); background: none !important; }
.frag__table td:nth-child(3), .frag__table td:nth-child(4) { text-align: right; white-space: nowrap; }
.frag__table tfoot td { border-top: 1px solid var(--tone-2); font-weight: 600; }
.frag__csv { margin: 0; padding: 0.75rem; overflow-x: auto; border-radius: 8px; background: var(--tone-1); font: inherit; font-variant-numeric: tabular-nums; white-space: pre-wrap; overflow-wrap: anywhere; }
/* Connector page (`/connecter-un-assistant`): a conversation, a tour preview, the consent rights. */
.frag__say { margin: 0 0 0.75rem auto; max-width: 85%; padding: 0.6rem 0.85rem; border-radius: 12px 12px 4px 12px; background: var(--tone-1); }
.frag__reply { margin: 0 0 0.75rem; max-width: 90%; }
.frag__reply p { margin: 0 0 0.35rem; }
.frag__asks { margin: 0; padding-left: 1.2rem; }
.frag__asks li { padding: 0.15rem 0; font-weight: 500; }
.frag__legs { margin: 0; padding: 0; list-style: none; }
.frag__legs li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 0.75rem; align-items: baseline; padding: 0.5rem 0; border-top: 1px solid var(--tone-1); font-variant-numeric: tabular-nums; }
.frag__legs li:first-child { border-top: 0; }
.frag__legs b { min-width: 4.5rem; text-align: right; }
.frag__mark { margin-left: 0.35rem; padding: 0.05rem 0.45rem; border: 1px solid var(--tone-2); border-radius: 999px; font-style: normal; font-weight: 500; }
.frag__code { font: inherit; overflow-wrap: anywhere; }
.frag__rights { display: grid; gap: 0.45rem; margin: 0 0 0.5rem; padding: 0; list-style: none; }
.frag__rights li { display: flex; align-items: flex-start; gap: 0.5rem; }
.frag__rights svg { flex: none; width: 1rem; height: 1rem; margin-top: 0.15rem; }
.frag__app { padding: 0.75rem; border: 1px solid var(--tone-2); border-radius: 8px; }
.frag__app p { margin: 0 0 0.35rem; }
.frag__app p span { color: var(--ink-soft); }
.frag__chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.frag__chips .frag__tag { color: var(--ink); }

/* How it works: one row per step, the text and the screen it describes. */
/* How it works: a sticky contents list beside the five step cards, as in the first version, flattened.
   Each card holds the step's number and icon, its text, and the screen it describes. */
.howto-layout { margin-top: 0; }
.howto-aside { grid-column: 1; position: sticky; top: calc(var(--header-height) + 1.5rem); display: grid; gap: 1.25rem; }
.howto-aside .guide-toc { position: static; }
.howto-help { padding: 1.5rem; background: #ffffff; font-size: var(--step-small); }
.howto-help h2 { margin: 0 0 0.5rem; font-size: var(--step-body); }
.howto-help p { margin: 0 0 1rem; color: var(--ink-soft); }
.howto-help .btn { width: 100%; }
.howto-steps { grid-column: 2; display: grid; gap: clamp(3rem, 5vw, 4.5rem); }
.step { scroll-margin-top: calc(var(--header-height) + 1rem); }
.step > h2 { margin: 0 0 1.25rem; font-size: var(--step-h); }
.step__card { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 20rem); column-gap: var(--split-gap); align-items: start; padding: clamp(1.5rem, 3vw, 2.5rem); background: #ffffff; }
.step__marks { display: grid; justify-items: center; gap: 1rem; }
/* The step's number is already in its heading: the navy square carries the step's icon, in white. */
.step__badge { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; background: var(--ink); color: #ffffff; }
.step__badge .icon { width: 1.5rem; height: 1.5rem; }
.step__text { max-width: none; }
.step__text > :first-child { margin-top: 0; }
.step__text > :last-child { margin-bottom: 0; }
.step__ui .frag { border-color: var(--tone-2); }
.dsources { margin-top: var(--section-gap); }

/* FAQ: search, categories as square chips, each category beside the screen it is about. */
.faq-tools { margin: 0 0 3rem; }
.faq-search { display: flex; gap: 0.5rem; max-width: 46rem; margin: 0 0 1rem; }
.faq-search__field { position: relative; flex: 1; }
.faq-search__field .icon { position: absolute; left: 1rem; top: 50%; width: 1.3rem; height: 1.3rem; transform: translateY(-50%); color: var(--ink-soft); pointer-events: none; }
.faq-search input { width: 100%; min-height: 3rem; padding: 0.6rem 1rem 0.6rem 3rem; border: 1px solid var(--ink-soft); border-radius: 0; background: var(--ground); font: inherit; color: var(--ink); }
.faq-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.faq-chips a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0.3rem 1.1rem; background: var(--tone-1); color: var(--ink); font-size: var(--step-small); font-weight: 500; text-decoration: none; transition: background-color var(--t-hover) ease, transform var(--t-press) var(--ease-out); }
.faq-chips a[aria-current] { background: var(--ink); color: #ffffff; }
/* Pressable tiles answer the press, as the buttons do. */
.faq-chips a:active, .notfound__links a:active, .faq-search .btn:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
  .faq-chips a:not([aria-current]):hover { background: var(--tone-2); }
}
.faq-result { margin: 0 0 1.5rem; font-weight: 600; }
.faq-empty { padding: 1.25rem 1.5rem; background: var(--tone-1); }
.faq-body { margin-top: var(--section-gap); }
.faq-cat { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--split-gap); align-items: start; scroll-margin-top: calc(var(--header-height) + 1rem); }
.faq-cat + .faq-cat { margin-top: clamp(4rem, 7vw, 6rem); }
.faq-cat__main { grid-column: 1 / span 7; }
.faq-cat__ui { grid-column: 8 / -1; position: sticky; top: calc(var(--header-height) + 1.5rem); }
.faq-cat__head { margin-bottom: 1.25rem; }
/* A category without a screen: heading and intro on the left, its questions on the right, no empty column. */
.faq-cat--text .faq-cat__main { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--split-gap); align-items: start; }
.faq-cat--text .faq-cat__head { margin: 0; }
.faq-cat__head h2 { margin: 0 0 0.5rem; font-size: var(--step-h); }
.faq-cat__head p { margin: 0; max-width: none; }
.faq-cat__list { display: grid; gap: 8px; }
.faq-cat__list details.faq { margin: 0; transition: background-color var(--t-ui) ease; }
.faq-cat__list details.faq[open] { background: var(--tone-2); }
.faq-cat__list summary h3 { margin: 0; font-size: var(--step-body); font-weight: 600; }
.faq-cat__list .faq__answer { padding: 0 1.1rem 0.75rem; }
.faq-cat__list .faq__answer p { max-width: none; }

/* Comparison: the table stays a table, Quitéa's card carries the navy. */
.cmp { margin-top: var(--section-gap); }
.cmp-section + .cmp-section { margin-top: clamp(4rem, 7vw, 6rem); }
.cmp-section > h2 { margin: 0 0 1rem; font-size: var(--step-h); }
.cmp-section > p { max-width: 62ch; }
.cmp-table table { display: table; width: 100%; margin: 0; font-size: var(--step-small); }
.cmp-scroll { overflow-x: auto; }
.cmp-table th, .cmp-table td { padding: 0.75rem 0.9rem; }
.cmp-table tbody tr:first-child td { background: var(--ink) !important; color: #ffffff; font-weight: 500; }
.cmp-table tbody tr:first-child a { color: #ffffff; }
.cmp-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); margin: 1.5rem 0 0; }
.cmp-card { display: flex; flex-direction: column; padding: clamp(1.5rem, 2vw, 2rem); background: var(--tone-1); }
.cmp-card--own { background: var(--ink); color: #ffffff; }
/* A focus ring drawn in ink vanishes on ink: on the navy surfaces it turns white. */
.cmp-card--own :focus-visible, .cmp-table tbody tr:first-child :focus-visible { outline-color: #ffffff; }
.cmp-card--own h3, .cmp-card--own a { color: #ffffff; }
.cmp-card h3 { margin: 0 0 0.75rem; font-size: var(--step-lead); }
.cmp-card p { margin: 0 0 0.75rem; font-size: var(--step-small); }
.cmp-card ul { margin: 0; padding: 0; list-style: none; font-size: var(--step-small); }
.cmp-card li { position: relative; margin: 0 0 0.45rem; padding-left: 1.5rem; }
.cmp-card li::before { content: ''; position: absolute; left: 0; top: 0.2rem; width: 1rem; height: 1rem; background: url('../img/motif/check-ink.svg') center / contain no-repeat; }
.cmp-card--own li::before { background-image: url('../img/motif/check-accent.svg'); }
.cmp-pick { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem var(--gutter); margin: 1.5rem 0 0; }
.cmp-pick h3 { margin: 0 0 0.6rem; font-size: var(--step-lead); }
.cmp-pick p { margin: 0 0 0.6rem; }
.cmp-show { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--split-gap); align-items: start; }
.cmp-show > h2 { grid-column: 1; margin: 0; font-size: var(--step-h); }
.cmp-show__text { grid-column: 2; }
.cmp-show__text > :first-child { margin-top: 0; }
.cmp-show__ui { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); align-items: start; margin-top: clamp(2rem, 4vw, 3rem); }
/* Text-only sections keep the two-column rhythm of the rows: heading left, text right, filling its column. */
.cmp-section.prose { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--split-gap); align-items: start; max-width: none; }
.cmp-section.prose > * { grid-column: 2; max-width: none; }
.cmp-section.prose > h2 { grid-column: 1; grid-row: 1 / span 20; margin: 0; }
.cmp-section.prose > h2 + * { margin-top: 0; }
.cmp-note { color: var(--ink-soft); font-size: var(--step-small); }

/* About: a statement, three principles each beside their proof, four reasons in columns. */
.about-principles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem var(--gutter); margin-top: 2rem; }
.about-principles h3 { margin: 0 0 0.5rem; font-size: var(--step-h); }
.about-principles > div > p { margin: 0 0 1.5rem; max-width: none; }
.about-section { margin-top: var(--section-gap); }
.about-section > h2 { margin: 0 0 1rem; font-size: var(--step-h); }
.about-section > p { max-width: 62ch; }
.about-why { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem var(--gutter); margin-top: 2rem; }
.about-why h3 { margin: 0 0 0.5rem; font-size: var(--step-lead); }
.about-why p { margin: 0; }
.about-who { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--split-gap); }
.about-who > h2 { grid-column: 1 / span 4; margin: 0; font-size: var(--step-h); }
.about-who__text { grid-column: 5 / -1; }
.about-who__text p { margin: 0 0 1rem; font-size: var(--step-lead); line-height: 1.35; max-width: none; }
.about-who__facts { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.about-who__facts li { padding: 0.5rem 0.9rem; background: var(--ground); font-size: var(--step-small); font-weight: 500; }

/* Pricing: the shared cards, then what each plan buys, shown. */
.price-hero { padding: clamp(1rem, 2vw, 1.5rem) 0 clamp(2.5rem, 5vw, 4rem); }
.price-hero h1 { margin: 0.5rem 0 1.25rem; font-size: var(--step-head); letter-spacing: -0.045em; max-width: 16ch; }
.price-hero .lead { max-width: 46ch; }
.price-hero__note { margin: 1rem 0 0; color: var(--ink-soft); font-size: var(--step-small); }
.price-proof { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem var(--gutter); margin-top: 2.5rem; }
.price-proof h3 { margin: 0 0 0.4rem; font-size: var(--step-lead); }
.price-proof > div > p { margin: 0 0 1.25rem; max-width: 46ch; }
.price-trust { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem var(--gutter); margin: 0; padding: 0; list-style: none; }
.price-trust strong { display: block; margin-bottom: 0.35rem; font-size: var(--step-body); }
.price-trust span { color: var(--ink); }
.price-prose { max-width: 46rem; }
.price-prose h2 { margin: 3rem 0 0.75rem; font-size: var(--step-h); }
.price-prose > :first-child { margin-top: 0; }

/* 404: the trip that leads nowhere, then four ways back. */
.notfound { padding: clamp(2rem, 5vw, 4rem) 0 0; }
.notfound__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--split-gap); align-items: center; }
.notfound__text { grid-column: 1 / span 7; }
.notfound__ui { grid-column: 8 / -1; }
.notfound h1 { margin: 0 0 1.25rem; font-size: var(--step-head); letter-spacing: -0.045em; max-width: 16ch; }
.notfound .lead { max-width: 40ch; }
.notfound .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin: 2rem 0 0; }
.notfound__help { margin-top: var(--section-gap); padding: var(--section-gap) 0; background: var(--tone-1); }
.notfound__help h2 { margin: 0 0 2rem; font-size: var(--step-h); }
.notfound__links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.notfound__links a { display: flex; flex-direction: column; gap: 0.5rem; height: 100%; padding: 1.5rem; background: var(--ground); color: var(--ink); text-decoration: none; transition: background-color var(--t-hover) ease, transform var(--t-press) var(--ease-out); }
.notfound__links strong { font-size: var(--step-lead); }
.notfound__links span { color: var(--ink-soft); }
@media (hover: hover) and (pointer: fine) {
  .notfound__links a:hover { background: var(--tone-2); }
}
.notfound--plain { padding: 3rem 0; }
.frag--trip { font-size: var(--step-body); }
.frag--trip .frag__field:last-of-type { color: var(--ink-soft); }

/* Legal reading template: reading first, nothing else. */
/* Legal pages: on the site grid like every other page, the contents list sticky beside the text. */
.wrap.page-default:has(> .legal-doc) { max-width: var(--page); }
.legal-doc { display: grid; grid-template-columns: minmax(14rem, 3fr) minmax(0, 9fr); column-gap: var(--split-gap); align-items: start; }
.legal-doc > h1, .legal-doc > .lead, .legal-doc > .legal-doc__updated { grid-column: 1 / -1; }
.legal-doc h1 { margin: 0.5rem 0 1rem; }
.legal-doc .lead { max-width: 40ch; }
.legal-doc__updated { margin: 0 0 3rem; color: var(--ink-soft); font-size: var(--step-small); }
.legal-toc { grid-column: 1; position: sticky; top: calc(var(--header-height) + 1.5rem); margin: 0; font-size: var(--step-body); }
.legal-toc h2 { margin: 0 0 1rem; font-size: var(--step-lead); }
.legal-toc ol { margin: 0; padding: 0; list-style: none; counter-reset: legal-toc; }
.legal-toc a { display: block; padding: 0.55rem 0 0.55rem 1rem; border-left: 3px solid var(--tone-2); color: var(--ink-soft); line-height: 1.35; text-decoration: none; text-wrap: pretty; transition: color var(--t-hover) ease, border-color var(--t-hover) ease; }
.legal-toc a::before { counter-increment: legal-toc; content: counter(legal-toc) '. '; }
@media (hover: hover) and (pointer: fine) {
  .legal-toc a:hover { border-color: var(--ink); color: var(--ink); }
}
.legal-body { grid-column: 2; max-width: none; }
.legal-doc:not(:has(.legal-toc)) .legal-body { grid-column: 1 / -1; }
.legal-body > .anchor:first-child + h2, .legal-body > h2:first-child { margin-top: 0; }
.legal-body { counter-reset: legal; }
.legal-body h2 { counter-increment: legal; counter-reset: legal-sub; margin: 4rem 0 1rem; padding-top: 2rem; border-top: 1px solid var(--tone-2); font-size: var(--step-h); scroll-margin-top: calc(var(--header-height) + 1rem); }
.legal-body > .anchor:first-child + h2, .legal-body > h2:first-child { padding-top: 0; border-top: 0; }
.legal-body h2::before { content: counter(legal) '. '; color: var(--ink-soft); }
.legal-body h3 { counter-increment: legal-sub; margin: 2.25rem 0 0.5rem; font-size: calc(var(--step-body) * 1.12); letter-spacing: -0.015em; line-height: 1.25; }
.legal-body h3::before { content: counter(legal) '.' counter(legal-sub) ' '; color: var(--ink-soft); font-weight: 500; }
.legal-body p, .legal-body li { max-width: 68ch; }
.legal-body ul, .legal-body ol { padding-left: 1.25rem; }
.legal-body li + li { margin-top: 0.4rem; }
.legal-table { margin: 1.25rem 0 1.75rem; overflow-x: auto; }
.legal-body table { display: table; width: 100%; margin: 0; font-size: var(--step-small); line-height: 1.45; }
.legal-body th, .legal-body td { border-bottom: 1px solid var(--tone-2); }
.legal-body td:first-child { font-weight: 600; color: var(--ink); }
.legal-body td code { font-size: 0.95em; white-space: nowrap; }
.legal-body .legal-pending, .legal-body em { color: var(--ink-soft); }
.legal-body .anchor { display: block; position: relative; top: -1rem; visibility: hidden; }

/* Motion: fragments come up as their row scrolls in. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .step__ui .frag, .faq-cat__ui .frag, .cmp-show__ui .frag, .about-principles .frag, .price-proof .frag { animation: app-in linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
    .step__card, .faq-cat__main, .cmp-card, .cmp-pick > *, .about-principles > *, .about-why > *, .price-trust > *, .notfound__links li, .legal-toc, .legal-body h2, .legal-body h2 + p { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
  }
}

/* Responsive */
@media (max-width: 75rem) {
  .cmp-pick, .about-why, .price-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 64rem) {
  .legal-doc { grid-template-columns: minmax(0, 1fr); }
  .legal-toc { position: static; margin-bottom: 2.5rem; }
  .legal-body { grid-column: 1; }
  .legal-body table:has(th:nth-child(4)) { min-width: 44rem; }
  .dhero__text, .dhero__ui, .dstatement > h2, .dstatement__text, .faq-cat__main, .faq-cat__ui, .cmp-show__text, .cmp-show__ui, .about-who > h2, .about-who__text, .notfound__text, .notfound__ui { grid-column: 1 / -1; }
  .dhero__ui, .notfound__ui { margin-top: 2.5rem; max-width: 34rem; }
  .dstatement > h2, .about-who > h2 { margin-bottom: 1.25rem; }
  .faq-cat__ui { position: static; margin-top: 2rem; max-width: 34rem; }
  .faq-cat--text .faq-cat__main { grid-template-columns: minmax(0, 1fr); }
  .faq-cat--text .faq-cat__head { margin-bottom: 1.25rem; }
  .howto-aside, .howto-steps { grid-column: 1; }
  .howto-aside { position: static; }
  .howto-help { display: none; }
  .step__card { grid-template-columns: auto minmax(0, 1fr); row-gap: 1.5rem; }
  .step__ui { grid-column: 1 / -1; max-width: 34rem; }
  .cmp-show, .cmp-section.prose { grid-template-columns: minmax(0, 1fr); }
  .cmp-show > h2, .cmp-section.prose > h2 { grid-row: auto; margin-bottom: 1rem; }
  .cmp-section.prose > * { grid-column: 1; }
  .cmp-show__ui { grid-template-columns: minmax(0, 1fr); max-width: 34rem; margin-top: 2rem; }
  .cmp-cards, .about-principles { grid-template-columns: minmax(0, 1fr); }
  .notfound__links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .price-proof { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 40rem) {
  .step__card { grid-template-columns: minmax(0, 1fr); }
  .step__marks { display: flex; align-items: center; gap: 1rem; justify-items: start; }
  .step__ui { grid-column: 1; }
  .dhero__actions .btn, .notfound .actions .btn { width: 100%; }
  .cmp-pick, .about-why, .price-trust, .notfound__links { grid-template-columns: minmax(0, 1fr); }
  .faq-search { flex-wrap: wrap; }
  .faq-search .btn { width: 100%; }
  .frag__field span { min-width: 5rem; }
  .frag__days li { grid-template-columns: 3.5rem 1fr auto; }
  .frag__days li span:nth-child(2) { display: none; }
}

@media print {
  .faq-tools, .dhero__ui, .step__ui, .faq-cat__ui, .cmp-show__ui { display: none !important; }
  .faq-cat__list details.faq:not([open]) .faq__answer { display: block; }
}