@charset "utf-8";

/* ==========================================================================
   Bily - trybily.com
   Design system: light-first flat, tokens lifted from app/Bilby/DesignSystem/
   Theme.swift so the site and the app are visibly the same product.
   Variance 5 / Motion 4 / Density 4.
   ========================================================================== */

:root {
  /* Colour */
  --ground: #F0F0F2;
  --ground-2: #E7E8EC;
  --surface: #FFFFFF;
  --surface-2: #FAFAFB;
  --ink: #0B0D10;
  --muted: #5A6068;
  --blue: #1E40AF;
  --blue-soft: #E8EDFB;
  --green: #047857;
  --green-hover: #036448;
  --green-soft: #E3F2EC;
  --on-green: #FFFFFF;
  --border: #D9DCE1;
  --border-soft: #E9EBEF;
  --danger: #B91C1C;

  --shadow-sm: 0 1px 2px rgba(11, 13, 16, .06), 0 1px 1px rgba(11, 13, 16, .04);
  --shadow-md: 0 6px 16px rgba(11, 13, 16, .08), 0 2px 5px rgba(11, 13, 16, .05);
  --shadow-lg: 0 24px 60px rgba(11, 13, 16, .14), 0 6px 18px rgba(11, 13, 16, .07);

  /* Radius */
  --r-field: 12px;
  --r-card: 16px;
  --r-pill: 28px;

  /* Space, density 4/10 */
  --s1: 4px;  --s2: 8px;  --s3: 16px; --s4: 24px;
  --s5: 32px; --s6: 48px; --s7: 72px; --s8: 96px;

  --measure: 62ch;
  --shell: 1160px;

  --font-display: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: "Public Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --t-fast: 140ms;
  --t-base: 220ms;
  --ease: cubic-bezier(.2, .7, .3, 1);

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #0E1116;
    --ground-2: #151A21;
    --surface: #1A1F27;
    --surface-2: #232A34;
    --ink: #F5F7FA;
    --muted: #A4ADB8;
    --blue: #6C8CF5;
    --blue-soft: #1D2740;
    --green: #34D399;
    --green-hover: #4FE0AC;
    --green-soft: #12301F;
    --on-green: #06231A;
    --border: #333B47;
    --border-soft: #262E39;
    --danger: #F87171;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
    --shadow-md: 0 6px 16px rgba(0, 0, 0, .45);
    --shadow-lg: 0 24px 60px rgba(0, 0, 0, .6), 0 6px 18px rgba(0, 0, 0, .4);

    color-scheme: dark;
  }
}

/* ---------- Reset ---------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -.022em;
  line-height: 1.08;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

/* Japanese breaks between any two characters, so a browser left alone will
   split a word across two lines: the headline read "支払いをもっと早 / く。" on the
   first capture. `auto-phrase` breaks at phrase boundaries instead, and
   `line-break: strict` keeps the small kana and the closing marks off the
   start of a line. Both are ignored by anything that does not know them, so
   the worst case is the behaviour we already had. */
html[lang^="ja"] h1,
html[lang^="ja"] h2,
html[lang^="ja"] h3,
html[lang^="ja"] h4,
html[lang^="ja"] .lede,
html[lang^="ja"] .eyebrow { word-break: auto-phrase; line-break: strict; }

a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: 3px; }

a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
  border-radius: 6px;
}

button { font: inherit; cursor: pointer; }

/* ---------- Layout ---------- */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--s4);
}

.band { padding-block: var(--s7); }
.band--tight { padding-block: var(--s6); }
.band--alt { background: var(--ground-2); }

.skip {
  position: absolute;
  left: -9999px;
  top: var(--s2);
  background: var(--surface);
  color: var(--ink);
  padding: var(--s2) var(--s3);
  border-radius: var(--r-field);
  z-index: 100;
}
.skip:focus { left: var(--s3); }

/* ---------- Type helpers ---------- */

.eyebrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: var(--s2);
}

.h-xl  { font-size: clamp(2.35rem, 6.2vw, 4rem); }
.h-lg  { font-size: clamp(1.95rem, 4.4vw, 2.9rem); }
.h-md  { font-size: clamp(1.35rem, 2.6vw, 1.7rem); letter-spacing: -.015em; }
.h-sm  { font-size: 1.08rem; font-weight: 700; letter-spacing: -.01em; }

.lede {
  font-size: clamp(1.05rem, 1.9vw, 1.2rem);
  color: var(--muted);
  max-width: 46ch;
}

.note { font-size: .9rem; color: var(--muted); }

.section-head { max-width: 620px; margin-bottom: var(--s5); }
.section-head .lede { margin-top: var(--s3); }

/* ---------- Header ---------- */

.masthead {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--ground) 88%, transparent);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-base) var(--ease);
}
.masthead[data-stuck="true"] { border-bottom-color: var(--border-soft); }

.masthead__inner {
  display: flex;
  align-items: center;
  gap: var(--s4);
  min-height: 66px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.18rem;
  letter-spacing: -.02em;
  color: var(--ink);
  text-decoration: none;
  margin-right: auto;
}
.brand__mark {
  width: 30px; height: 30px;
  border-radius: 9px;
  background: var(--green);
  display: grid; place-items: center;
  flex: 0 0 auto;
}
.brand__mark svg { width: 17px; height: 17px; stroke: var(--on-green); }

.navlinks { display: flex; gap: var(--s4); align-items: center; }
.navlinks a {
  color: var(--muted);
  text-decoration: none;
  font-size: .95rem;
  font-weight: 500;
  transition: color var(--t-fast) var(--ease);
}
.navlinks a:hover { color: var(--ink); }

@media (max-width: 760px) { .navlinks { display: none; } }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 var(--s5);
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: -.01em;
  text-decoration: none;
  text-align: center;
  transition: background-color var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
}

.btn--primary {
  background: var(--green);
  color: var(--on-green);
  box-shadow: var(--shadow-md);
}
.btn--primary:hover { background: var(--green-hover); transform: translateY(-2px); }
.btn--primary:active { transform: translateY(0); }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--border);
  min-height: 52px;
}
.btn--ghost:hover { background: var(--surface); transform: translateY(-2px); }

.btn svg { width: 19px; height: 19px; flex: 0 0 auto; }

.cta-stack { display: flex; flex-direction: column; gap: var(--s3); align-items: flex-start; }
.cta-stack .note { margin-left: 2px; }

/* A download button closing a section, rather than sitting inside a block
   that already has its own spacing. */
.cta-stack--section { margin-top: var(--s6); }

@media (max-width: 640px) {
  .btn { width: 100%; }
  .cta-stack { align-items: stretch; }
  .cta-stack .note { text-align: center; margin-left: 0; }
}

/* ---------- Hero ---------- */

.hero {
  padding-block: var(--s7) var(--s8);
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: -30% 40% 30% -20%;
  background: radial-gradient(60% 60% at 50% 50%, color-mix(in srgb, var(--green) 11%, transparent), transparent 70%);
  pointer-events: none;
}

.hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: var(--s7);
  align-items: center;
}

.hero__copy { min-width: 0; }
.hero__copy h1 { font-size: clamp(2.4rem, 5vw, 3.5rem); }
.hero__copy .lede { margin-top: var(--s4); }
.hero__copy .cta-stack { margin-top: var(--s5); }

.hero__proof {
  margin-top: var(--s5);
  padding-top: var(--s4);
  border-top: 1px solid var(--border-soft);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s4);
}
.hero__proof li {
  list-style: none;
  font-size: .92rem;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.hero__proof ul { display: contents; }
.hero__proof svg { width: 15px; height: 15px; stroke: var(--green); flex: 0 0 auto; }

@media (max-width: 900px) {
  .hero { padding-block: var(--s6) var(--s7); }
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
  .hero::before { inset: -20% -20% 50% -20%; }
}

/* ---------- Phone player ---------- */

.player { display: grid; justify-items: center; gap: var(--s3); }

.phone {
  position: relative;
  width: min(292px, 74vw);
  aspect-ratio: 560 / 1214;
  background: #0B0D10;
  border-radius: 40px;
  padding: 9px;
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255, 255, 255, .06) inset;
}
.phone__screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 32px;
  overflow: hidden;
  background: var(--ground);
}
.phone__screen img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 620ms var(--ease);
}
.phone__screen img.is-live { opacity: 1; }

.phone__caption {
  font-size: .9rem;
  font-weight: 600;
  color: var(--muted);
  min-height: 1.4em;
  text-align: center;
  font-family: var(--font-display);
}

.ticks { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; }
.ticks li {
  width: 26px;
  height: 4px;
  border-radius: 3px;
  background: var(--border);
  overflow: hidden;
  position: relative;
}
.ticks li::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--green);
  transform: scaleX(0);
  transform-origin: left;
}
.ticks li[data-state="done"]::after { transform: scaleX(1); }
.ticks li[data-state="live"]::after { animation: tick 2200ms linear forwards; }

@keyframes tick { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- The invoice ---------- */

.paper-wrap {
  perspective: 1600px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  margin-top: var(--s6);
}

.paper {
  width: min(660px, 100%);
  min-width: 0;
  max-width: 100%;
  background: #FFFFFF;
  color: #0B0D10;
  border-radius: 10px;
  padding: clamp(20px, 3.6vw, 40px);
  box-shadow: var(--shadow-lg);
  transform: rotate(-1.15deg) rotateX(3deg);
  font-size: clamp(11px, 1.55vw, 14px);
  line-height: 1.5;
  border: 1px solid rgba(11, 13, 16, .07);
  transition: transform 400ms var(--ease);
}
.paper:hover { transform: rotate(0deg) rotateX(0deg); }

.paper__top { display: flex; justify-content: space-between; gap: var(--s4); align-items: flex-start; }
.paper__biz { font-family: var(--font-display); font-weight: 800; font-size: 1.45em; letter-spacing: -.02em; }
.paper__addr { color: #5A6068; font-size: .88em; margin-top: 6px; }
.paper__word {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.35em;
  letter-spacing: .04em;
  text-align: right;
}
.paper__meta { margin-top: 8px; font-size: .88em; }
.paper__meta div { display: flex; justify-content: flex-end; gap: 14px; }
.paper__meta dt { color: #5A6068; }
.paper__meta dd { margin: 0; font-weight: 600; min-width: 86px; text-align: right; }

.paper hr { border: 0; border-top: 1px solid #E4E6EA; margin: 16px 0; }

.paper__label { font-size: .76em; letter-spacing: .09em; text-transform: uppercase; color: #5A6068; }

.paper table { width: 100%; border-collapse: collapse; font-size: .95em; }
.paper th {
  text-align: left;
  font-size: .78em;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #5A6068;
  font-weight: 500;
  padding-bottom: 7px;
  border-bottom: 1px solid #E4E6EA;
}
.paper td { padding: 9px 0; vertical-align: top; }
.paper .num { text-align: right; white-space: nowrap; }

.paper__totals { margin-left: auto; width: min(290px, 100%); font-size: .95em; }
.paper__totals div { display: flex; justify-content: space-between; gap: var(--s4); padding: 4px 0; }
.paper__totals .is-strong { font-weight: 700; }
/* A document with no tax line has one row in the totals block, and one row
   reads as a fourth line item unless it is ruled off from the table. */
.paper__totals--single { margin-top: 10px; border-top: 1px solid #E4E6EA; padding-top: 6px; }
.paper__totals .is-deduct { color: #B91C1C; }
.paper__totals .is-payable {
  border-top: 1px solid #C9CCD2;
  margin-top: 8px;
  padding-top: 10px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.18em;
}
.paper__totals .is-payable span:last-child { color: #047857; }

.paper__pay { display: grid; grid-template-columns: auto 1fr; gap: 4px 20px; margin-top: 8px; font-size: .95em; }
.paper__pay dt { color: #5A6068; }
.paper__pay dd { margin: 0; font-weight: 600; }

.paper__foot {
  margin-top: 22px;
  padding-top: 12px;
  border-top: 1px solid #E4E6EA;
  font-size: .82em;
  color: #5A6068;
  display: flex;
  justify-content: space-between;
  gap: var(--s3);
  flex-wrap: wrap;
}
.paper__foot b { color: #047857; font-weight: 700; }

.paper-note {
  margin-top: var(--s5);
  margin-inline: auto;
  text-align: center;
  max-width: 54ch;
  color: var(--muted);
  font-size: .98rem;
}

@media (max-width: 560px) {
  .paper { transform: none; }
  .paper__top { flex-direction: column; }
  .paper__word { text-align: left; }
  .paper__meta div { justify-content: flex-start; }
  .paper__meta dd { text-align: left; min-width: 0; }
  .paper__totals { width: 100%; }
}

/* ---------- Alternating outcomes ---------- */

.outcome {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .8fr);
  min-width: 0;
  gap: var(--s7);
  align-items: center;
  padding-block: var(--s6);
}
.outcome + .outcome { border-top: 1px solid var(--border-soft); }
.outcome--flip .outcome__media { order: -1; }
.outcome__body h3 { font-size: clamp(1.6rem, 3.2vw, 2.15rem); }
.outcome__body p { margin-top: var(--s3); color: var(--muted); max-width: 44ch; }
.outcome__list { margin: var(--s4) 0 0; padding: 0; list-style: none; display: grid; gap: var(--s2); }
.outcome__list li { display: flex; gap: 10px; align-items: flex-start; font-size: .98rem; }
.outcome__list svg { width: 17px; height: 17px; stroke: var(--green); flex: 0 0 auto; margin-top: 4px; }
.outcome__media { display: grid; justify-items: center; }

.phone--still {
  width: min(250px, 66vw);
  aspect-ratio: 560 / 1214;
  background: #0B0D10;
  border-radius: 36px;
  padding: 8px;
  box-shadow: var(--shadow-lg);
}
.phone--still img { width: 100%; height: 100%; object-fit: cover; border-radius: 29px; }

@media (max-width: 860px) {
  .outcome { grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
  .outcome--flip .outcome__media { order: 0; }
}

/* ---------- Cards ---------- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: var(--s4);
}

.card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-card);
  padding: var(--s5);
  box-shadow: var(--shadow-sm);
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

/* A single local card. Left aligned under the section head, held to a
   comfortable measure instead of running the whole width. */
.cards--one { grid-template-columns: minmax(0, 34rem); }

.card__flag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  background: var(--blue-soft);
  color: var(--blue);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
}
.card__list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s2); color: var(--muted); font-size: .98rem; }
.card__list li { display: flex; gap: 10px; align-items: flex-start; }
.card__list svg { width: 17px; height: 17px; stroke: var(--green); flex: 0 0 auto; margin-top: 4px; }
.card__more { margin-top: auto; font-weight: 600; text-decoration: none; display: inline-flex; gap: 6px; align-items: center; }
.card__more:hover { text-decoration: underline; }
.card__more svg { width: 15px; height: 15px; stroke: currentColor; transition: transform var(--t-fast) var(--ease); }
.card:hover .card__more svg { transform: translateX(3px); }

/* ---------- Call to action strip ---------- */

.cta-strip {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-card);
  padding: var(--s5);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
  align-items: center;
  justify-content: space-between;
  box-shadow: var(--shadow-sm);
}
.cta-strip__text { max-width: 46ch; }


/* ---------- FAQ ---------- */

.faq { display: grid; gap: var(--s2); max-width: 760px; }
.faq details {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-card);
  padding: var(--s3) var(--s4);
  box-shadow: var(--shadow-sm);
}
.faq summary {
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.04rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: var(--s3);
  align-items: center;
  min-height: 44px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  width: 11px; height: 11px;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg);
  flex: 0 0 auto;
  transition: transform var(--t-base) var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq p { color: var(--muted); padding-bottom: var(--s3); max-width: var(--measure); }
.faq p + p { padding-top: var(--s2); }

/* ---------- Final CTA ---------- */

.finale {
  background: var(--ink);
  color: var(--ground);
  border-radius: 0;
  padding-block: var(--s7);
  text-align: center;
}
.finale h2 { font-size: clamp(2.05rem, 5vw, 3.1rem); color: #FFFFFF; }
.finale p { margin: var(--s3) auto 0; color: #C8CCD3; max-width: 46ch; }
.finale .cta-stack { align-items: center; width: fit-content; margin: var(--s5) auto 0; }
.finale .note { color: #A4ADB8; }
/* .cta-stack .note sets a 2px left margin that outranks the auto margin
   .finale p hands every paragraph, which parks this one at flex-start. */
.finale .cta-stack .note { margin-inline: 0; }
@media (prefers-color-scheme: dark) {
  .finale { background: var(--surface-2); }
  .finale h2 { color: var(--ink); }
}

/* ---------- Prose pages ---------- */

.prose { max-width: var(--measure); min-width: 0; }
.prose h2 { font-size: clamp(1.45rem, 3vw, 1.8rem); margin-top: var(--s6); }
.prose h3 { font-size: 1.14rem; margin-top: var(--s5); }
.prose p, .prose li { color: var(--muted); }
.prose p { margin-top: var(--s3); }
.prose ul, .prose ol { margin: var(--s3) 0 0; padding-left: 20px; display: grid; gap: var(--s2); }
.prose .placeholder {
  display: inline-block;
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  color: var(--danger);
  border: 1px dashed var(--danger);
  border-radius: 6px;
  padding: 1px 7px;
  font-weight: 700;
  font-size: .9em;
}
.prose table { width: 100%; border-collapse: collapse; margin-top: var(--s4); font-size: .96rem; }
.prose th, .prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border-soft); vertical-align: top; }
.prose th { font-family: var(--font-display); font-weight: 700; color: var(--ink); }
.prose td { color: var(--muted); }
.table-scroll { overflow-x: auto; max-width: 100%; }

.page-head { padding-block: var(--s6) var(--s5); }
.page-head .lede { margin-top: var(--s3); max-width: 54ch; }

/* ---------- Mail link ---------- */

.mailto {
  background: none;
  border: 0;
  padding: 0;
  color: var(--blue);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Footer ---------- */

.foot {
  background: var(--ground-2);
  border-top: 1px solid var(--border-soft);
  padding-block: var(--s6) var(--s5);
}
.foot__grid { display: flex; flex-wrap: wrap; gap: var(--s5); justify-content: space-between; }
.foot__nav { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); }
.foot__nav a,
.foot__nav .mailto { color: var(--muted); text-decoration: none; font-size: .95rem; font-weight: 500; }
.foot__nav a:hover,
.foot__nav .mailto:hover { color: var(--ink); text-decoration: underline; }
.foot__legal { margin-top: var(--s5); color: var(--muted); font-size: .88rem; max-width: 62ch; }
/* The language line. Quiet on purpose: a reader who wants it is looking for
   their own language's name, and everyone else should not have to read past
   it. Underlined so it is legible as a link at this weight. */
.foot__langs { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); margin-top: var(--s4); }
.foot__langs a { color: var(--muted); font-size: .95rem; font-weight: 500;
                 text-decoration: underline; text-underline-offset: .2em; }
.foot__langs a:hover { color: var(--ink); }

/* ---------- Reveal on scroll (visible at rest) ---------- */

@media (prefers-reduced-motion: no-preference) {
  /* Visible at rest. The offset and the fade only exist once JavaScript has
     claimed the page, so a script failure leaves every section exactly where
     it belongs rather than 14px low and invisible. */
  .reveal { transition: transform 560ms var(--ease), opacity 560ms var(--ease); }
  .js .reveal { opacity: .001; transform: translateY(14px); }
  .js .reveal.is-in { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
  .phone__screen img { transition: none; }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* ---------- 404 ---------- */

.lost { min-height: 62vh; display: grid; place-items: center; text-align: center; }
.lost .cta-stack { align-items: center; margin-top: var(--s5); }

/* ---------- Hidden slots ----------
 *
 * The pages are generated per country, so a slot a country does not use is
 * left out of the markup rather than hidden. `hidden` survives for anything a
 * script toggles: the browser default is display:none, but a later
 * `display: flex` or `display: table-cell` beats it on specificity, so it is
 * spelled out once here. */
[hidden] { display: none !important; }