/* ==========================================================================================================
   The public pages and the pages of signing in. Built on ui.css; everything here is layout and the few pieces
   only these pages have: the header, the hero with its instrument panel, the numbered steps, the price cards.
   ========================================================================================================== */

/* ------------------------------------------------------------------------------------------------ the page */
.site { display: flex; flex-direction: column; min-height: 100dvh; overflow-x: clip; }
.site main { flex: 1; }
.backdrop { position: absolute; inset: 0 0 auto 0; height: 56rem; z-index: -1; pointer-events: none; overflow: hidden; }
/* the grid is a layer of its own, so that signals can run along its lines and the whole of it can fall behind the scroll */
.backdrop__grid { position: absolute; inset: 0; background-image: linear-gradient(rgb(34 40 49 / 0.55) 1px, transparent 1px), linear-gradient(90deg, rgb(34 40 49 / 0.55) 1px, transparent 1px); background-size: 56px 56px; mask-image: radial-gradient(ellipse 75% 62% at 50% 0%, #000 22%, transparent 72%); -webkit-mask-image: radial-gradient(ellipse 75% 62% at 50% 0%, #000 22%, transparent 72%); }
.backdrop__spark { display: none; }
.backdrop::after { content: ""; position: absolute; left: 50%; top: -22rem; width: 70rem; height: 44rem; transform: translateX(-50%); background: radial-gradient(closest-side, rgb(255 122 26 / 0.2), rgb(255 122 26 / 0.05) 55%, transparent); filter: blur(12px); }

/* ---------------------------------------------------------------------------------------------- the header */
.site-header { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid transparent; background: rgb(7 8 10 / 0.72); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); transition: border-color var(--t) var(--ease); }
.site-header { border-bottom-color: var(--line); }
.site-header__in { display: flex; align-items: center; gap: var(--s-6); height: 4.25rem; }
.site-nav { display: flex; align-items: center; gap: var(--s-1); margin-right: auto; }
.site-nav a { padding: var(--s-2) var(--s-3); border-radius: var(--r-sm); color: var(--fg-1); font-size: var(--text-sm); font-weight: 550; text-decoration: none; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--fg-0); background: var(--bg-3); }
.site-actions { display: flex; align-items: center; gap: var(--s-2); }
.site-menu { display: none; }
@media (max-width: 860px) {
  .site-nav, .site-actions .btn--ghost { display: none; }
  .site-menu { display: block; }
  .site-actions { gap: var(--s-2); margin-left: auto; }
  .site-header__in { gap: var(--s-3); }
}
@media (max-width: 420px) { .site-actions .lang { display: none; } }

/* ------------------------------------------------------------------------------------------------ the hero */
.hero { position: relative; padding: clamp(3rem, 2rem + 6vw, 6.5rem) 0 clamp(3rem, 2rem + 5vw, 6rem); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(2rem, 1rem + 4vw, 4.5rem); align-items: center; }
.hero h1 { margin-top: var(--s-5); font-size: var(--text-hero); text-wrap: wrap; }
.hero h1 em { display: block; font-style: normal; color: var(--accent); text-wrap: balance; }      /* no last line of one word */
.hero__lead { margin-top: var(--s-6); max-width: 34rem; font-size: var(--text-lg); line-height: 1.6; color: var(--fg-1); }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-8); }
.hero__notes { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin-top: var(--s-6); font-size: var(--text-sm); color: var(--fg-2); }
.hero__notes li { display: inline-flex; align-items: center; gap: 0.45em; }
.hero__notes .icon { color: var(--ok); }
@media (max-width: 960px) { .hero__grid { grid-template-columns: minmax(0, 1fr); } }

/* the instrument panel: a sample workspace drawn in HTML and SVG */
.panel { position: relative; padding: var(--s-5); border: 1px solid var(--line-strong); border-radius: var(--r-xl); background: linear-gradient(180deg, rgb(23 27 33 / 0.92), rgb(11 13 16 / 0.96)); box-shadow: var(--shadow-3), 0 0 0 1px rgb(255 255 255 / 0.02) inset; }
.panel::before { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; background: linear-gradient(140deg, rgb(255 122 26 / 0.55), transparent 32%, transparent 68%, rgb(62 207 208 / 0.35)); filter: blur(22px); opacity: 0.5; }
.panel__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-3); padding-bottom: var(--s-4); border-bottom: 1px solid var(--line); }
.lights--lg { display: none; gap: 10px; }
.lights--lg i { width: 13px; height: 13px; }
.stage { position: relative; }
.panel__scan { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
.panel__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); padding: var(--s-5) 0 var(--s-4); }
.panel__stat { padding: var(--s-3) var(--s-4); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg-1); }
.panel__stat b { display: block; margin-top: var(--s-2); font: 600 1.5rem/1 var(--font-mono); letter-spacing: -0.04em; }
.panel__stat b small { font-size: 0.55em; color: var(--fg-2); font-weight: 500; }
.panel__chart { padding: var(--s-3) var(--s-2) 0; }
.panel__foot { display: grid; grid-template-columns: 7.5rem 1fr; gap: var(--s-5); align-items: center; padding-top: var(--s-4); margin-top: var(--s-4); border-top: 1px solid var(--line); }
.panel__factors { display: grid; gap: var(--s-2); font-size: var(--text-sm); }
.panel__factors li { display: flex; justify-content: space-between; gap: var(--s-3); color: var(--fg-1); }
.panel__factors b { font: 600 var(--text-sm) var(--font-mono); color: var(--fg-0); }
@media (max-width: 520px) { .panel { padding: var(--s-4); border-radius: var(--r-lg); } .panel__stat { padding: var(--s-3); } .panel__stat b { font-size: 1.125rem; } .panel__foot { grid-template-columns: 5.5rem 1fr; gap: var(--s-4); } }

/* ---------------------------------------------------------------------------------------------- the strip */
.strip { border-block: 1px solid var(--line); background: var(--bg-1); }
.strip__in { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.strip__item { padding: var(--s-6) var(--s-5); border-left: 1px solid var(--line); }
.strip__item:first-child { border-left: 0; padding-left: 0; }
.strip__item b { display: block; font: 600 clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem)/1 var(--font-mono); letter-spacing: -0.045em; }
.strip__item > span { display: block; margin-top: var(--s-2); font-size: var(--text-sm); color: var(--fg-2); }
@media (max-width: 760px) { .strip__in { grid-template-columns: repeat(2, minmax(0, 1fr)); } .strip__item:nth-child(odd) { border-left: 0; padding-left: 0; } .strip__item:nth-child(n+3) { border-top: 1px solid var(--line); } }

/* --------------------------------------------------------------------------------------------- sections */
.section { padding: clamp(2rem, 1rem + 4vw, 4.5rem) 0; }
.section--tight { padding-top: 0; }
.section__head { max-width: 46rem; margin-bottom: clamp(2rem, 1.2rem + 3vw, 3.5rem); }
.section__head h2 { margin-top: var(--s-3); font: 700 var(--text-3xl)/1.06 var(--font-display); letter-spacing: -0.035em; }
.section__head p:not(.eyebrow) { margin-top: var(--s-4); font-size: var(--text-lg); color: var(--fg-1); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(2rem, 1rem + 4vw, 4.5rem); align-items: center; }
.split h2 { font-size: var(--text-2xl); }
.split--flip > :first-child { order: 2; }
.split--top { align-items: start; }
@media (max-width: 900px) { .split { grid-template-columns: minmax(0, 1fr); } .split--flip > :first-child { order: 0; } }

.step-card { position: relative; display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-6); border: 1px solid var(--line); border-radius: var(--r-lg); background: linear-gradient(180deg, var(--bg-2), var(--bg-1)); overflow: hidden; transition: transform var(--t) var(--ease), border-color var(--t) var(--ease); }
.step-card:hover { transform: translateY(-3px); border-color: var(--line-strong); }
.step-card__n { font: 700 3.25rem/1 var(--font-display); letter-spacing: -0.05em; color: transparent; -webkit-text-stroke: 1px var(--line-strong); }
.step-card:hover .step-card__n { -webkit-text-stroke-color: var(--accent); }
.step-card h3 { font-size: var(--text-xl); }
.step-card p { color: var(--fg-1); }
.step-card .chips { margin-top: auto; padding-top: var(--s-3); }

/* the limit, as a picture */
.formula { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-top: var(--s-6); font: 600 var(--text-sm) var(--font-mono); }
.formula span:not(.formula__group) { padding: var(--s-2) var(--s-3); border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--bg-2); color: var(--fg-0); }
.formula__group { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }      /* an operator stays with what it applies to */
.formula i { color: var(--fg-2); font-style: normal; }
.formula .is-result { border-color: var(--accent-line); background: var(--accent-wash); color: var(--accent-hi); }
.ramp { position: relative; overflow: hidden; padding: var(--s-6); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg-1); }
.ramp__axis { display: flex; justify-content: space-between; margin-top: var(--s-2); font: 500 var(--text-xs) var(--font-mono); color: var(--fg-2); }
.ramp__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); margin-bottom: var(--s-4); }
.ramp__head b { font: 600 2rem/1 var(--font-mono); letter-spacing: -0.04em; }
.sources-list { display: grid; gap: var(--s-3); margin-top: var(--s-6); font-size: var(--text-sm); }
.sources-list li { display: grid; grid-template-columns: 1fr auto; gap: var(--s-2) var(--s-4); padding: var(--s-3) 0; border-top: 1px solid var(--line); color: var(--fg-1); }
.sources-list b { font-family: var(--font-mono); color: var(--fg-0); }
.sources-list a { grid-column: 1 / -1; color: var(--fg-2); font-size: var(--text-xs); overflow-wrap: anywhere; }

/* a pipeline, drawn */
.board-mock { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3); padding: var(--s-4); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg-1); }
.board-mock__col { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }
.board-mock__col > b { display: flex; justify-content: space-between; padding: 0 var(--s-1) var(--s-2); font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-2); }
.board-mock__card { padding: var(--s-3); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg-2); font-size: var(--text-sm); }
.board-mock__card span { display: block; color: var(--fg-2); font-size: var(--text-xs); }
.board-mock__card b { display: block; margin-top: var(--s-2); font: 600 var(--text-sm) var(--font-mono); }
.board-mock__card--won { border-color: rgb(61 220 151 / 0.4); background: var(--ok-wash); }
.board-mock__lane { display: none; }

/* what an answer does: the words that came back, how they are filed, what follows */
.sorter { display: grid; gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.sorter__row { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) 1.25rem 13.5rem minmax(0, 6fr); align-items: center; gap: var(--s-2) var(--s-5); padding: var(--s-4) var(--s-5); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg-1); }
.sorter__words { font: 500 var(--text-sm)/1.5 var(--font-mono); color: var(--fg-0); }
.sorter__arrow { display: grid; place-items: center; color: var(--fg-2); }
.sorter__effect { color: var(--fg-1); font-size: var(--text-sm); }
@media (max-width: 900px) {
  .sorter__row { grid-template-columns: minmax(0, 1fr); padding: var(--s-4); }
  .sorter__arrow { display: none; }
}

/* every niche there is: a cloud that wraps as it stands, two rows that run past each other where the page may move */
.marquee { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.marquee__row { display: contents; }
.marquee__copy { display: none; }
@media (max-width: 620px) { .board-mock { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.grid--features { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .grid--features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .grid--features { grid-template-columns: minmax(0, 1fr); } }
.feature { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-6); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--bg-1); transition: border-color var(--t) var(--ease), transform var(--t) var(--ease); }
.feature:hover { border-color: var(--line-strong); }
.feature__icon { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--bg-3); color: var(--accent); transition: border-color var(--t) var(--ease), box-shadow var(--t-slow) var(--ease), transform var(--t-slow) var(--ease); }
.feature:hover .feature__icon { border-color: var(--accent-line); box-shadow: 0 0 0 4px var(--accent-wash); transform: translateY(-2px); }
.feature p { color: var(--fg-1); font-size: var(--text-md); }
/* a phone: the long page gets shorter - features as rows with the picture beside the words, the three price cards side
   by side in a strip one swipes, smaller cards for the steps */
@media (max-width: 600px) {
  .feature { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); gap: var(--s-1) var(--s-4); padding: var(--s-4); }
  .feature__icon { grid-row: span 2; }
  .feature p { font-size: var(--text-sm); }
  .step-card { padding: var(--s-4); }
  .step-card__n { font-size: 2.25rem; }
  .pricing .plans { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 86%; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--gutter) * -1); padding: var(--s-4) var(--gutter) var(--s-3); scroll-padding-inline: var(--gutter); }
  .pricing .plan { scroll-snap-align: center; }
}

/* --------------------------------------------------------------------------------------------- the prices */
.billing-switch { display: inline-flex; padding: 4px; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--bg-1); }
.billing-switch label { position: relative; cursor: pointer; }
.billing-switch input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.billing-switch span { display: inline-flex; align-items: center; gap: var(--s-2); height: 2.25rem; padding: 0 var(--s-4); border-radius: var(--r-pill); color: var(--fg-2); font-size: var(--text-sm); font-weight: 600; transition: all var(--t-fast) var(--ease); }
.billing-switch input:checked + span { background: var(--bg-4); color: var(--fg-0); box-shadow: var(--shadow-1); }
.billing-switch input:focus-visible + span { box-shadow: var(--ring); }
.plans-more { margin-top: var(--s-10, 2.5rem); text-align: center; }
/* one switch shows the monthly or the yearly figures everywhere on the page - by a selector, without script */
.pricing { display: grid; gap: var(--s-8); }
.pricing:not(:has(#bill-year:checked)) .per-year { display: none; }
.pricing:has(#bill-year:checked) .per-month { display: none; }
.compare { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.compare th, .compare td { padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line); text-align: right; }
.compare th:first-child, .compare td:first-child { text-align: left; color: var(--fg-1); font-weight: 500; }
.compare thead th { color: var(--fg-2); font: 600 var(--text-xs)/1.2 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; }
.compare td { font-family: var(--font-mono); color: var(--fg-0); }
.compare td[colspan] { font-family: var(--font-body); color: var(--fg-2); text-align: left; }
@media (max-width: 700px) {
  .compare { min-width: 34rem; }
  .compare th:first-child { position: sticky; left: 0; z-index: 1; width: 9.5rem; max-width: 9.5rem; background: var(--bg-1); box-shadow: 1px 0 0 var(--line); }
  .compare td[colspan] { white-space: normal; }
}

/* ------------------------------------------------------------------------------------------------ the FAQ */
.faq { display: grid; gap: var(--s-2); max-width: 52rem; }
.faq-split { display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.5fr); gap: clamp(2rem, 1rem + 4vw, 4.5rem); align-items: start; }
.faq-split .section__head { position: sticky; top: 6rem; margin-bottom: 0; }
.faq-split .section__head h2 { font-size: var(--text-2xl); }
@media (max-width: 900px) { .faq-split { grid-template-columns: minmax(0, 1fr); } .faq-split .section__head { position: static; } }
.faq details { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg-1); transition: border-color var(--t) var(--ease); }
.faq details[open] { border-color: var(--line-strong); background: var(--bg-2); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-4) var(--s-5); font-weight: 600; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .icon { color: var(--fg-2); transition: transform var(--t) var(--ease); }
.faq details[open] summary .icon { transform: rotate(45deg); color: var(--accent); }
.faq p { padding: 0 var(--s-5) var(--s-5); color: var(--fg-1); max-width: 64ch; }

.cta { position: relative; overflow: hidden; isolation: isolate; display: grid; gap: var(--s-6); justify-items: start; padding: clamp(2rem, 1rem + 5vw, 4.5rem); border: 1px solid var(--accent-line); border-radius: var(--r-xl); background: radial-gradient(120% 140% at 100% 0%, rgb(255 122 26 / 0.2), transparent 55%), var(--bg-1); }
.cta h2 { max-width: 20ch; font: 700 var(--text-3xl)/1.05 var(--font-display); letter-spacing: -0.035em; }
.cta p { max-width: 46ch; color: var(--fg-1); font-size: var(--text-lg); }
.cta .hatch { position: absolute; right: 0; bottom: 0; width: 40%; height: 8px; }

/* --------------------------------------------------------------------------------------------- the footer */
.site-footer { margin-top: var(--s-16); border-top: 1px solid var(--line); background: var(--bg-1); }
.site-footer__in { display: grid; grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); gap: var(--s-8); padding: var(--s-12) 0 var(--s-8); }
.site-footer h4 { margin-bottom: var(--s-3); font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-2); }
.site-footer li { margin-bottom: var(--s-2); font-size: var(--text-sm); }
.site-footer a { color: var(--fg-1); text-decoration: none; }
.site-footer a:hover { color: var(--fg-0); }
.site-footer__note { padding: var(--s-5) 0 var(--s-8); border-top: 1px solid var(--line); color: var(--fg-2); font-size: var(--text-xs); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3); }
@media (max-width: 760px) { .site-footer__in { grid-template-columns: 1fr 1fr; } .site-footer__in > :first-child { grid-column: 1 / -1; } }

/* ------------------------------------------------------------------------------------- text pages, forms */
.page-head { padding: clamp(2.5rem, 1.5rem + 4vw, 4.5rem) 0 var(--s-8); }
.page-head h1 { margin-top: var(--s-3); font: 700 var(--text-3xl)/1.06 var(--font-display); letter-spacing: -0.035em; }
.page-head p:not(.eyebrow) { margin-top: var(--s-4); max-width: 60ch; font-size: var(--text-lg); color: var(--fg-1); }
.draft-mark { display: inline-flex; align-items: center; gap: var(--s-2); padding: var(--s-2) var(--s-3); border: 1px dashed rgb(246 196 83 / 0.5); border-radius: var(--r-sm); background: var(--warn-wash); color: var(--warn); font-size: var(--text-sm); font-weight: 600; }

.auth { position: relative; display: grid; place-items: start center; min-height: 100dvh; padding: clamp(1.5rem, 1rem + 4vw, 4rem) var(--gutter) var(--s-12); }
.auth__box { width: min(100%, 27rem); }
.auth__box--wide { width: min(100%, 34rem); }
.auth__brand { display: flex; justify-content: center; margin-bottom: var(--s-8); }
.auth__card { padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); border: 1px solid var(--line-strong); border-radius: var(--r-xl); background: linear-gradient(180deg, var(--bg-2), var(--bg-1)); box-shadow: var(--shadow-3); }
.auth__card h1 { font: 700 var(--text-2xl)/1.1 var(--font-display); letter-spacing: -0.03em; }
.auth__card > p { margin-top: var(--s-3); color: var(--fg-1); }
.auth__form { display: grid; gap: var(--s-4); margin-top: var(--s-6); }
.auth__foot { margin-top: var(--s-6); text-align: center; font-size: var(--text-sm); color: var(--fg-2); }
.auth__steps { display: grid; gap: var(--s-4); margin-top: var(--s-6); counter-reset: step; }
.auth__steps > li { position: relative; padding-left: 2.75rem; color: var(--fg-1); }
.auth__steps > li::before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: -0.1rem; display: grid; place-items: center; width: 1.875rem; height: 1.875rem; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--bg-3); font: 600 var(--text-sm) var(--font-mono); color: var(--accent); }
.auth__steps b { color: var(--fg-0); }
.codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); margin-top: var(--s-5); }
.codes li { padding: var(--s-3); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg-0); font: 600 var(--text-md) var(--font-mono); letter-spacing: 0.06em; text-align: center; }
.status-line { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg-1); font-size: var(--text-sm); color: var(--fg-1); }
.status-line i { flex: none; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--warn); animation: pulse 1.8s var(--ease) infinite; }
.status-line.is-ready i { background: var(--ok); animation: none; }
.error-page { display: grid; place-items: center; min-height: 70dvh; padding: var(--s-16) var(--gutter); text-align: center; }
.error-page b { display: block; font: 700 clamp(5rem, 3rem + 12vw, 11rem)/0.9 var(--font-display); letter-spacing: -0.06em; color: transparent; -webkit-text-stroke: 1.5px var(--line-strong); }
.error-page b { -webkit-text-stroke-color: #414b5a; }
.error-page h1 { margin-top: var(--s-6); font-family: var(--font-display); letter-spacing: -0.03em; }
.error-page p { margin-top: var(--s-4); color: var(--fg-1); }
.error-page .btn { margin-top: var(--s-6); }

/* ==========================================================================================================
   Motion. Every rule that moves something stands inside «no-preference»: a reader who asked for less motion, and
   every automated screenshot, gets the page as it is drawn above - complete, with nothing waiting to come in.
   What a stylesheet cannot do by itself (a number that runs up, a block that comes in when reached, a light that
   follows the pointer) is js/motion.js; its hooks are the attributes data-rise, data-seen, data-count, data-glow
   and data-tilt, and the class «moves» it puts on the page.
   ========================================================================================================== */
@media (prefers-reduced-motion: no-preference) {

  /* ---- the backdrop: the glow breathes, signals run along the lines of the grid, the grid falls behind the scroll */
  .backdrop::after { animation: breathe 9s ease-in-out infinite; }
  .backdrop__spark { display: block; position: absolute; left: 0; width: 8rem; height: 1px; background: linear-gradient(90deg, transparent, var(--accent-hi)); opacity: 0; animation: spark-x 9s linear infinite; }
  .backdrop__spark--1 { top: 112px; animation-delay: 0.6s; }
  .backdrop__spark--2 { top: 280px; animation-duration: 13s; animation-delay: 3.2s; background: linear-gradient(90deg, transparent, var(--cyan)); }
  .backdrop__spark--3 { top: 448px; animation-duration: 11s; animation-delay: 6.4s; }
  .backdrop__spark--4, .backdrop__spark--5 { top: 0; width: 1px; height: 8rem; background: linear-gradient(180deg, transparent, var(--accent-hi)); animation-name: spark-y; }
  .backdrop__spark--4 { left: 168px; animation-duration: 10s; animation-delay: 1.8s; }
  .backdrop__spark--5 { left: calc(100% - 224px); animation-duration: 14s; animation-delay: 5s; background: linear-gradient(180deg, transparent, var(--cyan)); }
  @supports (animation-timeline: scroll()) {
    .backdrop__grid { animation: fall-behind linear both; animation-timeline: scroll(root block); animation-range: 0 60rem; }
    /* how far down the page the reader is, along the bottom edge of the header */
    .site-header::after { content: ""; position: absolute; inset: auto 0 -1px 0; height: 2px; background: linear-gradient(90deg, var(--accent), var(--cyan)); transform-origin: 0 50%; animation: fill-x linear both; animation-timeline: scroll(root block); }
  }

  /* ---- the hero: the second line of the headline catches a light, the panel leans, floats and starts like a race */
  .hero h1 em { background: linear-gradient(100deg, var(--accent) 0 42%, #ffe0bd 50%, var(--accent) 58% 100%) 100% 0 / 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: sheen 7s var(--ease) 1.4s infinite; }
  .stage[data-tilt] { transform: perspective(70rem) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 0.6s var(--ease); }
  .stage[data-reveal] { animation: enter 0.7s var(--ease) 270ms backwards, float 8s ease-in-out 2.4s infinite; }
  .panel .lights i { animation: light-on 0.14s ease-out forwards, light-out 0.3s ease-in forwards; animation-delay: 0.45s, 1.5s; }
  .panel .lights i:nth-child(2) { animation-delay: 0.62s, 1.5s; }
  .panel .lights i:nth-child(3) { animation-delay: 0.79s, 1.5s; }
  .panel .lights i:nth-child(4) { animation-delay: 0.96s, 1.5s; }
  .panel .lights i:nth-child(5) { animation-delay: 1.13s, 1.5s; }
  /* lights out: the instruments come alive, and a line of light runs down the panel - then again, now and then */
  .panel .chart__line { animation-delay: 1.5s; }
  .panel .chart__line--b { animation-delay: 1.7s; }
  .panel .chart__area { animation-delay: 1.9s; }
  .panel .chart__dot { animation-delay: 2.7s; }
  .panel .ring__value { animation-delay: 1.5s; }
  .panel__scan::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 40%; background: linear-gradient(180deg, transparent, rgb(255 122 26 / 0.07) 70%, rgb(255 200 150 / 0.4) 99%, transparent); transform: translateY(-110%); animation: scan 8s var(--ease) 1.5s infinite; }

  /* ---- three steps: a line runs through them as the page is scrolled, and each number lights as the line arrives */
  @supports (animation-timeline: view()) {
    .steps { view-timeline: --steps block; }
    .steps .step-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 2px; background: linear-gradient(90deg, var(--accent-lo), var(--accent-hi)); transform-origin: 0 50%; animation: fill-x linear both; animation-timeline: --steps; }
    .steps .step-card__n { animation: number-lit linear both; animation-timeline: --steps; }
    .steps .step-card:nth-child(1)::before { animation-range: cover 12% cover 25%; }
    .steps .step-card:nth-child(1) .step-card__n { animation-range: cover 12% cover 16%; }
    .steps .step-card:nth-child(2)::before { animation-range: cover 25% cover 38%; }
    .steps .step-card:nth-child(2) .step-card__n { animation-range: cover 25% cover 29%; }
    .steps .step-card:nth-child(3)::before { animation-range: cover 38% cover 51%; }
    .steps .step-card:nth-child(3) .step-card__n { animation-range: cover 38% cover 42%; }

    /* ---- the limit: the stairs of a mailbox's first weeks are drawn by the scroll */
    .ramp { view-timeline: --ramp block; }
    .ramp .chart__line { animation: draw linear both; animation-timeline: --ramp; animation-range: entry 30% cover 46%; }
    .ramp .chart__area { animation: appear linear both; animation-timeline: --ramp; animation-range: cover 30% cover 50%; }
    .ramp .chart__dot { animation: appear linear both; animation-timeline: --ramp; animation-range: cover 45% cover 50%; }
  }

  /* ---- every niche, in two rows that run past each other and stop under the pointer */
  /* (a row is as long as all its tags, twice: the frame must not take its width from it) */
  .marquee { display: grid; grid-template-columns: minmax(0, 1fr); contain: inline-size; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
  .marquee__row { display: flex; gap: var(--s-2); width: max-content; padding-right: var(--s-2); animation: marquee 52s linear infinite; }
  .marquee__row--back { animation-direction: reverse; animation-duration: 60s; }
  .marquee:hover .marquee__row { animation-play-state: paused; }
  .marquee__copy { display: inline-flex; }

  /* ---- the formula is put together piece by piece, and its result lights */
  .moves .formula[data-seen] .formula__group { opacity: 0; transform: translateY(8px) scale(0.96); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); }
  .moves .formula.is-seen .formula__group { opacity: 1; transform: none; }
  .moves .formula.is-seen .formula__group:nth-child(2) { transition-delay: 0.2s; }
  .moves .formula.is-seen .formula__group:nth-child(3) { transition-delay: 0.4s; }
  .moves .formula.is-seen .formula__group:nth-child(4) { transition-delay: 0.6s; }
  .moves .formula.is-seen .is-result { animation: result-lit 1.8s var(--ease) 1s both; }

  /* ---- answers come in one after another; then each in its turn is the one being filed */
  .sorter__row { --i: 0; }
  .sorter__row:nth-child(2) { --i: 1; } .sorter__row:nth-child(3) { --i: 2; } .sorter__row:nth-child(4) { --i: 3; }
  .sorter__row:nth-child(5) { --i: 4; } .sorter__row:nth-child(6) { --i: 5; }
  .moves .sorter[data-seen] .sorter__row { opacity: 0; transform: translateX(-1.25rem); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); transition-delay: calc(var(--i) * 90ms); }
  .moves .sorter.is-seen .sorter__row { opacity: 1; transform: none; animation: filed 15s var(--ease) calc(var(--i) * 2.5s + 1.2s) infinite; }
  .moves .sorter.is-seen .sorter__arrow { animation: filed-arrow 15s var(--ease) calc(var(--i) * 2.5s + 1.2s) infinite; }
  .moves .sorter.is-seen .sorter__verdict .badge { animation: filed-stamp 15s var(--ease) calc(var(--i) * 2.5s + 1.45s) infinite; }

  /* ---- a deal travels through the pipeline: answered, met, offered, won - and the column it is in says so */
  .board-mock__lane { display: block; grid-column: 1 / -1; }
  .board-mock__puck { width: calc((100% - 3 * var(--s-3)) / 4); border-color: var(--accent-line); box-shadow: 0 10px 28px -14px rgb(255 122 26 / 0.6); animation: travel 11s var(--ease) infinite; }
  .board-mock__col > b { animation: column-lit 11s var(--ease) infinite; }
  .board-mock__col:nth-of-type(2) > b { animation-delay: 2.75s; }
  .board-mock__col:nth-of-type(3) > b { animation-delay: 5.5s; }
  .board-mock__col:nth-of-type(4) > b { animation-delay: 8.25s; }

  /* ---- questions open and close by growing, where the browser can do it */
  @supports selector(::details-content) {
    .faq { interpolate-size: allow-keywords; }
    .faq details::details-content { block-size: 0; overflow: clip; transition: block-size 0.4s var(--ease), content-visibility 0.4s allow-discrete; }
    .faq details[open]::details-content { block-size: auto; }
  }

  /* ---- the closing call: the hatch runs, the five lights come on and go out, and the button answers */
  .cta .hatch { animation: hatch 1.1s linear infinite; }
  .moves .cta .lights--lg { display: flex; }
  .moves .cta.is-seen .lights i { animation: light-on 0.14s ease-out forwards, light-out 0.3s ease-in forwards; animation-delay: 0.3s, 1.4s; }
  .moves .cta.is-seen .lights i:nth-child(2) { animation-delay: 0.48s, 1.4s; }
  .moves .cta.is-seen .lights i:nth-child(3) { animation-delay: 0.66s, 1.4s; }
  .moves .cta.is-seen .lights i:nth-child(4) { animation-delay: 0.84s, 1.4s; }
  .moves .cta.is-seen .lights i:nth-child(5) { animation-delay: 1.02s, 1.4s; }
  .moves .cta.is-seen .btn--primary { animation: go 1.1s var(--ease) 1.45s; }

  @media (max-width: 620px) { .board-mock__lane { display: none; } }
}

@keyframes breathe { 50% { opacity: 0.62; } }
@keyframes spark-x { 0% { transform: translateX(-9rem); opacity: 0; } 5%, 55% { opacity: 0.85; } 62%, 100% { transform: translateX(100vw); opacity: 0; } }
@keyframes spark-y { 0% { transform: translateY(-9rem); opacity: 0; } 5%, 50% { opacity: 0.8; } 60%, 100% { transform: translateY(40rem); opacity: 0; } }
@keyframes fall-behind { to { transform: translateY(9rem); } }
@keyframes fill-x { from { transform: scaleX(0); } }
@keyframes sheen { 0% { background-position: 100% 0; } 40%, 100% { background-position: 0 0; } }
@keyframes float { 50% { translate: 0 -9px; } }
@keyframes scan { 0% { transform: translateY(-110%); } 16%, 100% { transform: translateY(290%); } }
@keyframes number-lit { to { -webkit-text-stroke-color: var(--accent); text-shadow: 0 0 28px rgb(255 122 26 / 0.4); } }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes result-lit { 0%, 100% { box-shadow: none; } 40% { box-shadow: 0 0 0 4px var(--accent-wash), 0 0 28px rgb(255 122 26 / 0.45); } }
@keyframes filed { 0%, 15%, 100% { border-color: var(--line); background: var(--bg-1); } 2%, 12% { border-color: var(--accent-line); background: var(--bg-2); } }
@keyframes filed-arrow { 0%, 15%, 100% { transform: none; color: var(--fg-2); } 2% { transform: translateX(-4px); color: var(--accent); } 8%, 12% { transform: translateX(4px); color: var(--accent); } }
@keyframes filed-stamp { 0%, 12%, 100% { transform: none; } 2% { transform: scale(1.16) rotate(-3deg); } 5% { transform: scale(1); } }
@keyframes travel {
  0% { transform: translateX(0); opacity: 0; }
  4%, 16% { transform: translateX(0); opacity: 1; }
  25%, 41% { transform: translateX(calc(100% + var(--s-3))); }
  50%, 66% { transform: translateX(calc(200% + 2 * var(--s-3))); border-color: var(--accent-line); background: var(--bg-2); box-shadow: 0 10px 28px -14px rgb(255 122 26 / 0.6); }
  75%, 94% { transform: translateX(calc(300% + 3 * var(--s-3))); border-color: rgb(61 220 151 / 0.55); background: var(--ok-wash); box-shadow: 0 10px 28px -14px rgb(61 220 151 / 0.7); opacity: 1; }
  100% { transform: translateX(calc(300% + 3 * var(--s-3))); border-color: rgb(61 220 151 / 0.55); background: var(--ok-wash); opacity: 0; }
}
@keyframes column-lit { 0%, 25%, 100% { color: var(--fg-2); } 3%, 20% { color: var(--accent-hi); } }
@keyframes hatch { to { background-position: 11.314px 0; } }
@keyframes go { 0% { box-shadow: 0 1px 0 rgb(255 255 255 / 0.28) inset, 0 10px 28px -10px rgb(255 122 26 / 0.6), 0 0 0 0 rgb(255 122 26 / 0.7); } 100% { box-shadow: 0 1px 0 rgb(255 255 255 / 0.28) inset, 0 10px 28px -10px rgb(255 122 26 / 0.6), 0 0 0 1.5rem rgb(255 122 26 / 0); } }