/* OneHourCertified - "Antes y después": a sample certificate lies on a desk and turns into
   its certified English translation under a draggable divider. */

:root {
  color-scheme: light;

  --desk: #D8E1E8;
  --page: #F6F8FA;
  --paper: #FFFFFF;
  --original-tint: #EDF3EA;
  --ink: #13233A;
  --muted: #50607A;
  --highlight: #FFE45C;
  --accent: #0F766E;
  --accent-deep: #0B5953;
  --rule: #CBD5DF;
  --rule-strong: #8594A7; /* form field borders: 3:1 against white */
  --danger: #B42318;
  --danger-tint: #FDEDEB;
  --accent-tint: #E3F1EF;
  --notice-tint: #FFF6CC;
  --placeholder: #66748A;

  /* Sample-document inks (illustration only) */
  --print-ink: #3A5A47;
  --typed-ink: #1F2A24;
  --seal-ink: #5E5486;
  --pen-ink: #253A6B;

  --font-display: 'Literata', Georgia, 'Times New Roman', serif;
  --font-ui: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-typed: 'Courier Prime', 'Courier New', monospace;

  --shadow-paper: 0 1px 2px rgb(19 35 58 / 0.08), 0 14px 30px -10px rgb(19 35 58 / 0.25), 0 40px 70px -30px rgb(19 35 58 / 0.3);
  --shadow-card: 0 1px 2px rgb(19 35 58 / 0.06), 0 10px 28px -14px rgb(19 35 58 / 0.22);
  --max: 1160px;
  --gutter: 16px;
}

/* ---------- Base ---------- */

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

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

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font: 400 16px/1.55 var(--font-ui);
  -webkit-font-smoothing: antialiased;
}

@media (min-width: 960px) {
  body {
    font-size: 17px;
  }
}

h1,
h2,
h3,
p,
ul,
ol,
dl,
dd,
figure {
  margin: 0;
}

a {
  color: var(--accent-deep);
  text-underline-offset: 0.18em;
}

a:hover {
  text-decoration-thickness: 2px;
}

img,
svg {
  display: block;
}

button,
input {
  font: inherit;
  color: inherit;
}

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

[hidden] {
  display: none !important;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  z-index: 100;
  left: 8px;
  top: -80px;
  padding: 12px 16px;
  border-radius: 8px;
  background: var(--ink);
  color: #fff;
  font-weight: 600;
}

.skip-link:focus {
  top: 8px;
}

.wrap {
  width: min(100% - 2 * var(--gutter), var(--max));
  margin-inline: auto;
}

.wrap--narrow {
  width: min(100% - 2 * var(--gutter), 780px);
}

@media (min-width: 720px) {
  :root {
    --gutter: 24px;
  }
}

/* ---------- Buttons and links ---------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 28px;
  border: 0;
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  font: 600 17px/1.2 var(--font-ui);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 1px 0 var(--accent-deep), 0 10px 22px -12px rgb(15 118 110 / 0.7);
  transition: background-color 0.15s ease;
}

.button:hover {
  background: var(--accent-deep);
}

.button:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

.button:disabled {
  opacity: 0.75;
  cursor: progress;
}

.text-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
}

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

.site-header {
  background: var(--desk);
}

.site-header__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 8px;
  padding-block: 10px;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink);
  font: 700 clamp(17px, 4.6vw, 22px)/1 var(--font-display);
  letter-spacing: -0.01em;
  text-decoration: none;
}

.wordmark span {
  color: var(--accent-deep);
  font-weight: 500;
}

.site-header__tools {
  display: flex;
  align-items: center;
  gap: 4px;
}

.site-header__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 8px;
  border-radius: 8px;
  color: var(--ink);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
}

.site-header__link:hover {
  text-decoration: underline;
}

.lang-switch {
  display: inline-flex;
  padding: 2px;
  border-radius: 10px;
  background: rgb(255 255 255 / 0.6);
}

.lang-switch button {
  min-width: 44px;
  min-height: 44px;
  padding: 0 6px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font: 600 14px/1 var(--font-ui);
  letter-spacing: 0.04em;
  cursor: pointer;
}

.lang-switch button:hover {
  color: var(--ink);
}

.lang-switch button[aria-pressed='true'] {
  background: var(--ink);
  color: #fff;
}

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

.hero {
  background: var(--desk);
  padding: 16px 0 56px;
}

.hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero__eyebrow {
  color: var(--accent-deep);
  font: 600 13px/1.3 var(--font-ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero__title {
  max-width: 18ch;
  margin-top: 12px;
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 700;
  font-size: clamp(30px, 7.4vw, 54px);
  line-height: 1.08;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.hero__lede {
  max-width: 46ch;
  margin-top: 14px;
  color: var(--muted);
  font-size: clamp(16px, 2.2vw, 19px);
  text-wrap: pretty;
}

.hero__lede strong {
  color: var(--ink);
  font-weight: 600;
}

.hero__action {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.due-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  margin-top: 28px;
  padding: 10px 16px;
  border-radius: 14px;
  background: var(--paper);
  box-shadow: 0 1px 2px rgb(19 35 58 / 0.12);
  font-size: 15px;
  line-height: 1.4;
  text-align: left;
}

@media (min-width: 560px) {
  .due-chip {
    border-radius: 999px;
    padding-inline: 18px 20px;
  }
}

.due-chip__dot {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgb(15 118 110 / 0.18);
}

.due-chip__time {
  font-weight: 700;
  white-space: nowrap;
}

.due-chip__sep {
  color: var(--muted);
}

.hero__cta {
  width: 100%;
  max-width: 360px;
  margin-top: 16px;
}

.hero__hours {
  max-width: 50ch;
  margin-top: 12px;
  color: var(--muted);
  font-size: 14px;
  text-wrap: pretty;
}

.assurances {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 22px;
  padding: 0;
  list-style: none;
  font-size: 15px;
  font-weight: 500;
  text-align: left;
}

.assurances li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.assurances svg {
  flex: none;
  margin-top: 2px;
  color: var(--accent-deep);
}

@media (min-width: 760px) {
  .assurances {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 26px;
  }
}

/* ---------- Signature: before/after viewer ---------- */

.viewer {
  --p: 50;
  --label-size: clamp(8.5px, 2.3vw, 11px);
  --value-size: clamp(10px, 2.9vw, 14px);
  --title-size: clamp(15px, 4.6vw, 24px);
  --seal-size: clamp(62px, 17vw, 92px);
  --sign-height: clamp(30px, 9vw, 48px);
  --pad-x: clamp(14px, 4.6vw, 34px);

  position: relative;
  isolation: isolate;
  container-type: inline-size;
  width: 100%;
  max-width: 760px;
  margin-top: 28px;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: 3px;
  background: var(--paper);
  box-shadow: var(--shadow-paper);
  text-align: left;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.viewer.is-ready {
  cursor: col-resize;
}

@media (min-width: 560px) {
  .viewer {
    aspect-ratio: 4 / 5;
  }
}

@media (min-width: 720px) {
  .viewer {
    --label-size: clamp(9.5px, 1.45cqi, 11px);
    --value-size: clamp(12px, 1.9cqi, 14px);
    --title-size: clamp(18px, 3.2cqi, 26px);
    --seal-size: clamp(76px, 13cqi, 100px);
    --sign-height: clamp(38px, 6.5cqi, 50px);
    --pad-x: 6cqi;

    aspect-ratio: 4 / 3;
  }
}

/* The range input covers the viewer for keyboard and screen readers.
   Pointer and touch input is handled on the viewer itself (see js/landing.js). */
.viewer__range {
  position: absolute;
  z-index: 6;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}

.doc {
  position: absolute;
  inset: 0;
  color: var(--ink);
  font-family: var(--font-ui);
}

.doc--original {
  z-index: 1;
  color: var(--typed-ink);
  background:
    repeating-radial-gradient(circle at 0 0, rgb(58 90 71 / 0.075) 0 0.7px, transparent 1.3px 5.5px),
    repeating-radial-gradient(circle at 100% 100%, rgb(58 90 71 / 0.06) 0 0.7px, transparent 1.3px 5.5px),
    var(--original-tint);
}

/* Printed double frame of the original certificate */
.doc--original::before {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1px solid rgb(58 90 71 / 0.4);
  box-shadow: inset 0 0 0 3px var(--original-tint), inset 0 0 0 4px rgb(58 90 71 / 0.28);
  pointer-events: none;
}

.doc--translation {
  z-index: 2;
  background: var(--paper);
  clip-path: inset(0 0 0 calc(var(--p) * 1%));
}

.corner-label {
  position: absolute;
  z-index: 2;
  top: 12px;
  max-width: calc(50% - 30px);
  padding: 5px 9px;
  border-radius: 6px;
  color: #fff;
  font: 600 11px/1.2 var(--font-ui);
  letter-spacing: 0.01em;
}

.corner-label--original {
  left: 12px;
  background: var(--ink);
  opacity: clamp(0, (var(--p) - 6) / 10, 1);
}

.corner-label--translation {
  right: 12px;
  background: var(--accent-deep);
  text-align: right;
  opacity: clamp(0, (94 - var(--p)) / 10, 1);
}

.doc__sheet {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 52px var(--pad-x) 16px;
}

@media (min-width: 720px) {
  .doc__sheet {
    padding-top: 46px;
    padding-bottom: 22px;
  }

  .corner-label {
    top: 14px;
    font-size: 12px;
  }
}

.doc__head {
  padding-bottom: 8px;
  border-bottom: 1px solid currentColor;
  text-align: center;
}

.doc__authority {
  font: 600 var(--label-size)/1.2 var(--font-ui);
  letter-spacing: 0.24em;
}

.doc__title {
  margin-top: 3px;
  font: 700 var(--title-size)/1.1 var(--font-display);
  letter-spacing: 0.08em;
}

.doc--original .doc__head,
.doc--original .doc__authority,
.doc--original dt,
.doc--original .doc__sign-role {
  color: var(--print-ink);
}

.doc--translation .doc__authority,
.doc--translation dt,
.doc--translation .doc__sign-role {
  color: var(--muted);
}

.doc--translation .doc__head {
  border-bottom-color: var(--rule);
}

.doc__fields {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-areas:
    'name name name name name name'
    'date date date date sex sex'
    'place place place place place place'
    'notes notes notes notes notes notes';
  align-content: space-evenly;
  column-gap: 12px;
  row-gap: 2px;
  padding-block: 8px;
}

.f {
  min-width: 0;
  padding-bottom: 3px;
  border-bottom: 1px dotted rgb(58 90 71 / 0.45);
}

.doc--translation .f {
  border-bottom-color: var(--rule);
}

.f--name { grid-area: name; }
.f--date { grid-area: date; }
.f--sex { grid-area: sex; }
.f--place { grid-area: place; }
.f--father { grid-area: father; }
.f--mother { grid-area: mother; }
.f--office { grid-area: office; }
.f--book { grid-area: book; }
.f--number { grid-area: number; }
.f--notes { grid-area: notes; }

/* Narrow phones: same rows hidden on both layers so they stay aligned */
.f--optional {
  display: none;
}

@media (min-width: 420px) {
  .f--optional {
    display: block;
  }

  .doc__fields {
    grid-template-areas:
      'name name name name name name'
      'date date date date sex sex'
      'place place place place place place'
      'father father father father father father'
      'mother mother mother mother mother mother'
      'office office book book number number'
      'notes notes notes notes notes notes';
  }
}

@media (min-width: 720px) {
  .doc__fields {
    grid-template-areas:
      'name name name name date date'
      'place place place place sex sex'
      'father father father mother mother mother'
      'office office book book number number'
      'notes notes notes notes notes notes';
    column-gap: 3cqi;
    row-gap: 6px;
  }
}

.f dt {
  overflow: hidden;
  font: 600 var(--label-size)/1.25 var(--font-ui);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.f dd {
  margin-top: 1px;
  font: 700 var(--value-size)/1.35 var(--font-typed);
  white-space: nowrap;
}

@media (min-width: 720px) {
  .f dd {
    font-weight: 400;
  }
}

.doc mark {
  padding: 0.04em 0.26em;
  margin: 0 -0.26em;
  border-radius: 3px 7px 4px 6px / 6px 3px 7px 4px;
  background: var(--highlight);
  color: inherit;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.doc__foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  align-items: end;
  column-gap: 8%;
  margin-top: 8px;
}

.doc__seal {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--seal-size);
}

.seal {
  display: grid;
  place-content: center;
  gap: 0.35em;
  width: var(--seal-size);
  height: var(--seal-size);
  border: 2px solid var(--seal-ink);
  border-radius: 50%;
  box-shadow: inset 0 0 0 3px var(--original-tint), inset 0 0 0 4px var(--seal-ink);
  color: var(--seal-ink);
  font: 700 calc(var(--seal-size) * 0.085)/1.1 var(--font-ui);
  letter-spacing: 0.05em;
  text-align: center;
  opacity: 0.85;
  transform: rotate(-12deg);
}

.seal span + span {
  padding-top: 0.35em;
  border-top: 1px solid currentColor;
}

.doc__bracket {
  font: 700 calc(var(--value-size) * 0.9)/1.6 var(--font-typed);
  text-align: center;
}

@media (min-width: 720px) {
  .doc__bracket {
    font-weight: 400;
  }
}

.doc__sign-mark {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: var(--sign-height);
  padding-bottom: 2px;
  border-bottom: 1px solid currentColor;
}

.doc--translation .doc__sign-mark {
  border-bottom-color: var(--rule-strong);
}

.signature {
  width: 88%;
  height: 100%;
  color: var(--pen-ink);
}

.doc__sign-role {
  margin-top: 3px;
  overflow: hidden;
  font: 600 var(--label-size)/1.25 var(--font-ui);
  letter-spacing: 0.04em;
  text-align: center;
  white-space: nowrap;
}

.doc__note {
  min-height: calc(var(--label-size) * 2.6 + 7px);
  margin-top: 10px;
  padding: 6px 64px 0 0;
  border-top: 1px solid transparent;
  color: var(--muted);
  font: 500 var(--label-size)/1.3 var(--font-ui);
}

.doc--translation .doc__note {
  border-top-color: var(--rule);
}

.viewer__ribbon {
  position: absolute;
  z-index: 3;
  right: -46px;
  bottom: 20px;
  width: 160px;
  padding: 4px 0;
  background: var(--ink);
  color: #fff;
  font: 700 9px/1.2 var(--font-ui);
  letter-spacing: 0.16em;
  text-align: center;
  transform: rotate(-45deg);
  pointer-events: none;
}

.viewer__divider {
  position: absolute;
  z-index: 4;
  top: 0;
  bottom: 0;
  left: calc(var(--p) * 1%);
  width: 0;
  pointer-events: none;
}

.viewer__divider::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -1px;
  width: 2px;
  background: var(--accent);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.75);
}

.viewer__handle {
  position: absolute;
  top: 50%;
  left: 0;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  box-shadow: 0 0 0 3px #fff, 0 8px 18px rgb(19 35 58 / 0.3);
  transform: translate(-50%, -50%);
  transition: transform 0.15s ease;
}

.viewer.is-dragging .viewer__handle {
  transform: translate(-50%, -50%) scale(1.08);
}

.viewer:not(.is-pointer-focus) .viewer__range:focus-visible ~ .viewer__divider .viewer__handle {
  outline: 3px solid var(--ink);
  outline-offset: 4px;
}

.viewer__hint {
  position: absolute;
  top: calc(50% + 34px);
  left: 0;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgb(19 35 58 / 0.9);
  color: #fff;
  font: 600 12px/1.2 var(--font-ui);
  white-space: nowrap;
  transform: translateX(-50%);
  transition: opacity 0.3s ease;
}

.viewer.is-touched .viewer__hint {
  opacity: 0;
}

/* ---------- Sections ---------- */

.section {
  padding-block: clamp(56px, 9vw, 96px);
}

.section--steps,
.section--docs {
  background: var(--paper);
  border-block: 1px solid var(--rule);
}

.section__title {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 650;
  font-size: clamp(26px, 5vw, 38px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.section__lede {
  max-width: 56ch;
  margin-top: 10px;
  color: var(--muted);
  font-size: 17px;
}

.section__fine {
  margin-top: 12px;
  color: var(--muted);
  font-size: 13px;
}

/* ---------- What you get + order form ---------- */

.order-layout {
  display: grid;
  gap: 48px;
}

@media (min-width: 960px) {
  .order-layout {
    grid-template-columns: minmax(0, 1fr) minmax(400px, 470px);
    align-items: start;
    gap: 72px;
  }

  .receive {
    position: sticky;
    top: 32px;
  }
}

.receive__list {
  display: grid;
  gap: 20px;
  margin-top: 24px;
  padding: 0;
  list-style: none;
}

.receive__item {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.receive__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--paper);
  color: var(--accent-deep);
}

.receive__item strong {
  display: block;
  font-weight: 600;
}

.receive__item span {
  color: var(--muted);
}

.cert-peek {
  max-width: 400px;
  margin-top: 32px;
  padding: 22px 22px 18px;
  border-radius: 3px;
  background: var(--paper);
  box-shadow: var(--shadow-paper);
}

.cert-peek__title {
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rule);
  font: 700 12px/1.3 var(--font-display);
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
}

.cert-peek__body {
  margin-top: 12px;
  font: 500 13px/1.6 var(--font-display);
}

.cert-peek__signature {
  width: 150px;
  height: 40px;
  margin-top: 14px;
  color: var(--pen-ink);
}

.cert-peek__caption {
  padding-top: 4px;
  border-top: 1px solid var(--rule-strong);
  color: var(--muted);
  font: 500 11px/1.35 var(--font-ui);
}

/* ---------- Order form ---------- */

.order {
  scroll-margin-top: 16px;
  padding: 24px 18px 22px;
  border: 1px solid var(--rule);
  border-radius: 16px;
  background: var(--paper);
  box-shadow: var(--shadow-card);
}

@media (min-width: 560px) {
  .order {
    padding: 32px 30px 28px;
  }
}

.order__title {
  font: 650 26px/1.2 var(--font-display);
  letter-spacing: -0.01em;
}

.order__notice {
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--notice-tint);
  font-size: 15px;
}

.order__group {
  min-width: 0;
  margin: 22px 0 0;
  padding: 0;
  border: 0;
}

.order__label {
  display: block;
  margin-bottom: 8px;
  padding: 0;
  font-weight: 600;
  font-size: 16px;
}

.optional {
  color: var(--muted);
  font-weight: 400;
}

.order__hint {
  margin-top: 6px;
  color: var(--muted);
  font-size: 14px;
}

.dropzone {
  display: grid;
  justify-items: center;
  gap: 4px;
  padding: 22px 16px;
  border: 2px dashed rgb(15 118 110 / 0.55);
  border-radius: 12px;
  background: var(--page);
  text-align: center;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.dropzone:hover,
.dropzone.is-dragover {
  border-color: var(--accent);
  background: var(--accent-tint);
}

#files:focus-visible + .dropzone {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

.dropzone__icon {
  width: 30px;
  height: 30px;
  margin-bottom: 4px;
  color: var(--accent);
}

.dropzone__title {
  color: var(--ink);
  font-weight: 600;
  font-size: 17px;
}

.dropzone__hint {
  max-width: 34ch;
  color: var(--muted);
  font-size: 14px;
}

.file-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.file-list:not(:empty) {
  margin-top: 10px;
}

.file-item {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 6px 6px 6px 8px;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--paper);
}

.file-thumb {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 6px;
  background: var(--original-tint);
  color: var(--accent-deep);
  font: 700 10px/1 var(--font-ui);
  letter-spacing: 0.06em;
  object-fit: cover;
}

.file-info {
  display: grid;
  min-width: 0;
}

.file-name {
  overflow: hidden;
  font-weight: 600;
  font-size: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-meta {
  color: var(--muted);
  font-size: 13px;
}

.file-remove {
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--accent-deep);
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
}

.file-remove:hover {
  background: var(--page);
}

.stepper {
  display: inline-grid;
  grid-template-columns: 52px 76px 52px;
  height: 52px;
  overflow: hidden;
  border: 1px solid var(--rule-strong);
  border-radius: 10px;
}

.stepper__button {
  border: 0;
  background: var(--page);
  color: var(--ink);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.stepper__button:hover {
  background: var(--accent-tint);
}

.stepper__button:focus-visible,
.stepper__input:focus-visible {
  outline-offset: -3px;
}

.stepper__input {
  width: 100%;
  border: 0;
  border-inline: 1px solid var(--rule);
  border-radius: 0;
  background: var(--paper);
  font-weight: 600;
  font-size: 18px;
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}

.stepper__input::-webkit-inner-spin-button,
.stepper__input::-webkit-outer-spin-button {
  margin: 0;
  -webkit-appearance: none;
}

.order__input {
  display: block;
  width: 100%;
  min-height: 50px;
  padding: 10px 14px;
  border: 1px solid var(--rule-strong);
  border-radius: 10px;
  background: var(--paper);
  font-size: 17px;
}

.order__input::placeholder {
  color: var(--placeholder);
}

.order__input:focus-visible {
  border-color: var(--accent);
  outline-offset: 1px;
}

.order__input[aria-invalid='true'] {
  border-color: var(--danger);
}

.order__total {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
  margin-top: 26px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  color: var(--muted);
}

.order__total strong {
  color: var(--ink);
  font: 700 30px/1.1 var(--font-display);
  font-variant-numeric: tabular-nums;
}

.order__error {
  margin-top: 16px;
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--danger-tint);
  color: var(--danger);
  font-weight: 600;
  font-size: 15px;
}

.progress {
  margin-top: 16px;
}

.progress__track {
  height: 6px;
  overflow: hidden;
  border-radius: 99px;
  background: var(--page);
}

.progress__bar {
  width: 0;
  height: 100%;
  background: var(--accent);
  transition: width 0.2s ease;
}

.progress__text {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 14px;
}

.order__pay {
  width: 100%;
  min-height: 56px;
  margin-top: 16px;
  font-size: 18px;
}

.order__fine {
  margin-top: 12px;
  color: var(--muted);
  font-size: 13px;
}

/* ---------- How it works ---------- */

.steps {
  display: grid;
  margin-top: 32px;
  padding: 0;
  list-style: none;
}

.step {
  position: relative;
  padding: 0 0 28px 60px;
}

.step:last-child {
  padding-bottom: 0;
}

.step::before {
  content: '';
  position: absolute;
  top: 44px;
  bottom: 4px;
  left: 21px;
  width: 2px;
  background: var(--rule);
}

.step:last-child::before {
  display: none;
}

.step__num {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 2px solid var(--accent);
  border-radius: 50%;
  background: var(--paper);
  color: var(--accent-deep);
  font: 700 18px/1 var(--font-display);
}

.step:last-child .step__num {
  background: var(--accent);
  color: #fff;
}

.step__title {
  padding-top: 9px;
  font-weight: 600;
  font-size: 18px;
  line-height: 1.3;
}

.step__text {
  margin-top: 4px;
  color: var(--muted);
}

@media (min-width: 760px) {
  .steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 40px;
  }

  .step,
  .step:last-child {
    padding: 64px 0 0;
  }

  .step::before {
    top: 21px;
    bottom: auto;
    left: 56px;
    right: -28px;
    width: auto;
    height: 2px;
  }
}

/* ---------- Price comparison ---------- */

.compare-card {
  margin-top: 26px;
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: 14px;
  background: var(--paper);
}

.compare {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.compare th,
.compare td {
  padding: 14px 18px;
  border-top: 1px solid var(--rule);
  text-align: left;
  vertical-align: baseline;
}

.compare thead th {
  border-top: 0;
  color: var(--muted);
  font-weight: 600;
  font-size: 14px;
  vertical-align: bottom;
}

.compare tbody th {
  font-weight: 500;
}

.compare .compare__us {
  color: var(--accent-deep);
  font-weight: 600;
}

.compare .compare__total > * {
  font-weight: 700;
  font-size: 18px;
}

.hl {
  padding: 0.05em 0.3em;
  margin: 0 -0.3em;
  border-radius: 3px 7px 4px 6px / 6px 3px 7px 4px;
  background: var(--highlight);
  color: var(--ink);
}

@media (max-width: 559px) {
  .compare,
  .compare thead,
  .compare tbody {
    display: block;
  }

  .compare tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .compare .compare__corner {
    display: none;
  }

  .compare th,
  .compare td {
    padding: 12px 16px;
  }

  .compare tbody th {
    grid-column: 1 / -1;
    padding-bottom: 0;
    color: var(--muted);
    font-size: 14px;
  }

  .compare tbody td {
    padding-top: 4px;
    border-top: 0;
  }

  .compare .compare__total th {
    font-size: 14px;
    font-weight: 600;
  }
}

/* ---------- Guarantee ---------- */

/* Same background as the price comparison above it: don't double the gap */
.section--guarantee {
  padding-top: 0;
}

.guarantee {
  padding: 28px 22px;
  border: 1px solid var(--rule);
  border-radius: 16px;
  background: var(--paper);
}

@media (min-width: 720px) {
  .guarantee {
    padding: 40px 44px;
  }
}

.guarantee__title {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 650;
  font-size: clamp(24px, 4.6vw, 34px);
  line-height: 1.18;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.guarantee__text {
  max-width: 58ch;
  margin-top: 12px;
}

.guarantee .text-link {
  margin-top: 6px;
}

/* ---------- Documents ---------- */

.doc-types {
  display: grid;
  margin-top: 24px;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule);
}

@media (min-width: 560px) {
  .doc-types {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 32px;
  }
}

.doc-types li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
  font-weight: 500;
}

.doc-types li::before {
  content: '';
  flex: none;
  width: 10px;
  height: 13px;
  border: 1.5px solid var(--accent);
  border-radius: 1px 4px 1px 1px;
  transform: translateY(1px);
}

.doc-types__countries {
  margin-top: 18px;
  color: var(--muted);
}

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

.faq {
  margin-top: 24px;
  border-top: 1px solid var(--rule);
}

.faq__item {
  border-bottom: 1px solid var(--rule);
}

.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 60px;
  padding: 14px 0;
  font-weight: 600;
  font-size: 17px;
  line-height: 1.35;
  list-style: none;
  cursor: pointer;
}

.faq__item summary::-webkit-details-marker {
  display: none;
}

.faq__item summary::after {
  content: '';
  flex: none;
  width: 28px;
  height: 28px;
  border: 1.5px solid var(--rule-strong);
  border-radius: 50%;
  background:
    linear-gradient(var(--accent-deep), var(--accent-deep)) center / 12px 2px no-repeat,
    linear-gradient(var(--accent-deep), var(--accent-deep)) center / 2px 12px no-repeat;
  transition: transform 0.2s ease;
}

.faq__item[open] summary::after {
  transform: rotate(45deg);
}

.faq__item summary:focus-visible {
  outline-offset: 2px;
  border-radius: 4px;
}

.faq__item p {
  max-width: 64ch;
  padding: 0 44px 20px 0;
}

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

.site-footer {
  padding: 40px 0 48px;
  background: var(--desk);
  color: var(--muted);
  font-size: 14px;
}

.wordmark--footer {
  font-size: 19px;
}

.site-footer__disclaimer {
  max-width: 64ch;
  margin-top: 8px;
}

.site-footer__company {
  margin-top: 8px;
  overflow-wrap: anywhere;
}

.site-footer__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 20px;
  margin-top: 8px;
}

.site-footer__nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
}

@media (max-width: 959px) {
  .site-footer {
    padding-bottom: 104px;
  }
}

/* ---------- Sticky phone CTA ---------- */

.sticky-cta {
  position: fixed;
  z-index: 40;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--rule);
  background: rgb(255 255 255 / 0.97);
  box-shadow: 0 -10px 24px rgb(19 35 58 / 0.12);
  transform: translateY(110%);
  transition: transform 0.25s ease;
}

.sticky-cta.is-visible {
  transform: none;
}

.sticky-cta__text {
  display: grid;
  min-width: 0;
  font-size: 14px;
  line-height: 1.3;
}

.sticky-cta__price strong {
  font-size: 18px;
}

.sticky-cta__due {
  color: var(--muted);
  font-size: 13px;
}

.sticky-cta__button {
  flex: none;
  min-height: 48px;
  padding: 0 18px;
  font-size: 16px;
  white-space: nowrap;
}

@media (min-width: 960px) {
  .sticky-cta {
    display: none;
  }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ---------- Plain pages: thank-you and policies ---------- */

.page {
  padding-block: clamp(40px, 8vw, 88px);
}

.page--desk {
  min-height: 62vh;
  background: var(--desk);
}

.page__title {
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 700;
  font-size: clamp(28px, 6vw, 46px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.page__lede {
  max-width: 46ch;
  margin-top: 16px;
  color: var(--muted);
  font-size: clamp(16px, 2.2vw, 19px);
  text-wrap: pretty;
}

.page__fine {
  margin-top: 14px;
  color: var(--muted);
  font-size: 14px;
}

.confirm {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.confirm .hero__eyebrow {
  margin-bottom: 10px;
}

.confirm .due-chip {
  font-size: 16px;
}

.confirm .due-chip__time {
  font-size: 19px;
}

.legal {
  max-width: 70ch;
}

.legal__updated {
  margin-top: 10px;
  color: var(--muted);
  font-size: 14px;
}

.legal h2 {
  margin: 36px 0 10px;
  font-family: var(--font-display);
  font-optical-sizing: auto;
  font-weight: 650;
  font-size: 22px;
  line-height: 1.25;
}

.legal p,
.legal ul {
  margin: 0 0 14px;
}

.legal > p:first-of-type {
  margin-top: 24px;
}

.legal ul {
  padding-left: 1.25em;
}

.legal li + li {
  margin-top: 6px;
}

/* Pages without the sticky phone button don't need the extra bottom space. */
.site-footer--plain {
  padding-bottom: 48px !important;
}

/* Short pages: keep the desk color down to the bottom of the screen. */
body:has(.page--desk) {
  background: var(--desk);
}