/* חותמת – marketing site. Loud and flat: the Israeli licence plate (yellow, heavy
   black figures), the insurer's official paper, and the navy ink it is filled in.
   RTL first: "start" is the right edge. */

@font-face { font-family: 'Display'; font-weight: 900; font-display: swap; src: url('../fonts/Heebo-Black.ttf') format('truetype'); }
@font-face { font-family: 'Plex'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/plex-hebrew-400.woff2') format('woff2'); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: 'Plex'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/plex-hebrew-600.woff2') format('woff2'); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }
@font-face { font-family: 'Plex'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/plex-latin-400.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Plex'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/plex-latin-600.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* The form preview is inked with the same font the PDF is stamped with. */
@font-face { font-family: 'FormInk'; font-display: block; src: url('../fonts/Heebo-Regular.ttf') format('truetype'); }

:root {
  --plate: #FFCB05;
  --black: #0C0D10;
  --navy: #0D2478;
  --paper: #FFFFFF;
  --paper-step: #EEF0F4;
  --navy-step: #16307F;
  --plate-blue: #1C3F9E;

  --display: 'Display', 'Heebo', 'Arial Hebrew', sans-serif;
  --text: 'Plex', 'Heebo', 'Segoe UI', system-ui, sans-serif;

  /* five sizes do the work */
  --t-mega: clamp(96px, 25vw, 400px);
  --t-hero: clamp(72px, 13.2vw, 228px);
  --t-d2: clamp(52px, 8.6vw, 150px);
  --t-d3: clamp(36px, 4.6vw, 76px);
  --t-s3: clamp(22px, 1.9vw, 28px);
  --t-body: 19px;
  --t-small: 15px;

  --m: clamp(16px, 2vw, 28px);
  --gap: clamp(120px, 14vw, 200px);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  color-scheme: light;
  font-family: var(--text);
  font-size: var(--t-body);
  line-height: 1.5;
  color: var(--black);
  background: var(--plate);
  -webkit-text-size-adjust: 100%;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; }
body { background: var(--plate); overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
button, input { font: inherit; color: inherit; }
a { color: inherit; }
p, h1, h2, h3, figure, ul, dl, dd { margin: 0; padding: 0; }
ul { list-style: none; }
::selection { background: var(--navy); color: var(--plate); }
:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }
.skip { position: absolute; inset-inline-start: var(--m); top: -60px; background: var(--black); color: var(--paper); padding: 10px 16px; z-index: 10; }
.skip:focus { top: var(--m); }

/* ---------------------------------------------------------------- buttons: flat, square */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 64px; padding: 0 32px;
  background: var(--navy); color: var(--paper);
  font-weight: 600; font-size: var(--t-body); text-decoration: none; white-space: nowrap;
  transition: background-color .15s, color .15s, transform .12s var(--ease-out);
}
.btn:hover { background: var(--black); }
.btn:active { transform: translateY(2px); }
.btn-dark { background: var(--black); }
.btn-dark:hover { background: var(--navy); }
/* on the navy field the button is the plate's yellow */
.btn-plate { background: var(--plate); color: var(--black); }
.btn-plate:hover { background: var(--paper); }
/* a screen's second action: a plain link, underlined at rest */
.text-link { font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .3em; transition: color .15s; }
.text-link:hover { color: var(--navy); }

/* ---------------------------------------------------------------- hero */
.hero {
  position: relative; min-height: max(100svh, 680px);
  display: grid; grid-template-rows: auto 1fr auto; padding: 24px var(--m) 28px;
  background: var(--plate); overflow: hidden;
}
.nav { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; font-size: var(--t-body); position: relative; z-index: 2; }
.wordmark { font-family: var(--display); font-size: var(--t-s3); line-height: 1; text-decoration: none; letter-spacing: -0.02em; }
/* the drawn logo (assets/logo, small-size cut) as a mask, so it takes the colour of wherever it sits */
.wordmark-art { display: block; height: 1.15em; aspect-ratio: 516.12 / 130; background: currentColor;
  -webkit-mask: url(/img/logo-wordmark.svg) center / contain no-repeat; mask: url(/img/logo-wordmark.svg) center / contain no-repeat; }
.nav-links { display: flex; gap: clamp(16px, 2.4vw, 36px); }
.nav-links a { text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 6px; transition: text-decoration-color .2s; }
.nav-links a:hover, .nav-links a:focus-visible { text-decoration-color: currentColor; }

.lines .line { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.lines [data-line] { display: block; }

.hero-title {
  align-self: start; margin-top: 11vh; position: relative; z-index: 1;
  font-family: var(--display); font-weight: 900; font-size: var(--t-hero);
  line-height: .86; letter-spacing: -0.035em;
}
.hero-title .line-start { text-align: start; }
.hero-title .line-end { text-align: end; }

.hero-sheet {
  position: absolute; z-index: 0; inset-inline-start: 56%; translate: 50% 0;
  bottom: -26%; width: clamp(220px, 23vw, 380px);
  rotate: -4deg;
}
.hero-sheet img { width: 100%; background: var(--paper); }
.hero-sheet .stamp {
  position: absolute; top: 6%; inset-inline-start: -10%;
  display: grid; gap: 2px; padding: 10px 14px; rotate: 9deg;
  border: 4px solid var(--navy); color: var(--navy); background: rgba(255, 255, 255, .55);
  font-family: var(--display); font-size: var(--t-s3); line-height: 1; text-align: center;
}
.hero-sheet .stamp span { font-family: var(--text); font-weight: 600; font-size: var(--t-small); direction: ltr; }

.hero-foot { position: relative; z-index: 1; display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
.hero-lede { max-width: 31ch; font-size: var(--t-s3); line-height: 1.4; }
.hero-act { display: grid; justify-items: start; gap: 18px; }

/* ---------------------------------------------------------------- try: the plate you can type */
.try { background: var(--navy); color: var(--paper); padding: var(--gap) var(--m); min-height: 88svh; }
.plate {
  display: flex; align-items: stretch; width: fit-content; max-width: 100%; overflow: hidden;
  background: var(--plate); color: var(--black); direction: ltr;
}
/* The number must never be bigger than its box, or the browser scrolls it inside the box (wheel, drag, touch).
   Sideways: 10.5ch fits the longest value the input allows (8 digits + 2 dashes; this dash is nearly a digit
   wide). Up and down: Heebo Black is 1.47em tall (ascent + descent), so the line is 1.47 – a shorter line spills
   over and scrolls. The negative margins keep the plate at its old size; .plate clips the spare line height. */
.plate-input {
  width: 10.5ch; min-width: 0; border: 0; background: none; padding: 0 .25em; margin-block: -.125em -.185em;
  font-family: var(--display); font-weight: 900; font-size: var(--t-d2); line-height: 1.47; letter-spacing: -0.01em;
  caret-color: var(--navy); text-align: center; font-variant-numeric: tabular-nums;
}
.plate-input:focus-visible { outline: none; }
.plate:focus-within { outline: 4px solid var(--paper); outline-offset: 4px; }
.plate-strip { order: -1; display: grid; place-items: end center; width: clamp(34px, 3.4vw, 56px); background: var(--plate-blue); color: var(--paper); padding-bottom: .5em; }
.plate-strip b { font-family: var(--text); font-weight: 600; font-size: var(--t-small); }

.try-body { display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); margin-top: 56px; align-items: start; }
.try-answer { background: var(--paper); }
.form-crop { position: relative; overflow: hidden; aspect-ratio: 595 / 262; }
.form-crop .sheet-page { position: absolute; inset-inline: 0; top: 0; translate: 0 -11.6%; }
.sheet-page img { width: 100%; height: auto; user-select: none; }
.sheet-page svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sheet-page .ink-text { font-family: 'FormInk', 'Heebo', sans-serif; fill: var(--navy); unicode-bidi: bidi-override; direction: ltr; white-space: pre; }
.sheet-page .hl { fill: rgba(255, 203, 5, .55); stroke: none; }
.try-lede { max-width: 34ch; font-size: var(--t-s3); line-height: 1.45; }
.try-examples { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 28px; }
.try-examples button {
  border: 0; background: none; padding: 6px 0; cursor: pointer; direction: ltr;
  font-size: var(--t-body); font-weight: 600; color: var(--plate); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px;
  transition: color .15s, transform .12s var(--ease-out);
}
.try-examples button:hover { color: var(--paper); }
.try-examples button:active { transform: translateY(2px); }
/* …then on to the real form with that plate, as the customer, on the demo garage (/g/demo) */
.try-go { display: grid; justify-items: start; gap: 18px; margin-top: 56px; }
.try-go p { max-width: 40ch; font-size: var(--t-small); }
.try .text-link { color: var(--plate); }
.try .text-link:hover { color: var(--paper); }
.try :focus-visible { outline-color: var(--plate); }

/* ---------------------------------------------------------------- how: one card, four fields */
.how { display: grid; grid-template-columns: repeat(4, 1fr); }
.field { position: relative; min-height: 84svh; padding: 28px; display: grid; grid-template-rows: auto 1fr auto; }
.f1 { background: var(--plate); }
.f2 { background: var(--paper); }
.f3 { background: var(--paper-step); }
.f4 { background: var(--black); color: var(--paper); }
.how-title { grid-row: 1; font-family: var(--display); font-size: var(--t-s3); line-height: 1.1; letter-spacing: -0.01em; }
.field .card { grid-row: 2; align-self: start; justify-self: center; margin-top: 22svh; width: min(260px, 100%); transition: transform .15s var(--ease-out); }
.field:hover .card { transform: translateY(-6px); }
.f1 .card { margin-top: calc(22svh - 1.1em); }
.clause { grid-row: 3; font-size: var(--t-s3); line-height: 1.25; max-width: 15em; }
.card.shot { aspect-ratio: 780 / 1240; overflow: hidden; background: var(--paper); }
.card.shot img { width: 100%; }
.f2 .card.shot { outline: 0; background: var(--paper-step); }
/* ---------------------------------------------------------------- how: the two phones (steps 1 and 4) */
/* CSS-built iPhones turned toward the page. What their screens show is the product's real output: the
   dashboard's WhatsApp text with the garage page's own title/description, and the claim e-mail
   lib/mailer.js sends (its wording, a few rows left out to fit). Inside a screen, 1em = 16 iPhone points
   (the screen is 390pt wide). */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.field .card.device { width: auto; margin-bottom: 40px; perspective: 1400px; }
.f1 .card.device { margin-top: calc(11svh - 1.1em); }
.f4 .card.device { margin-top: 11svh; }
.phone {
  --phone-w: 242px; --turn: 15deg; --rim: #3A3C41; --rim-hi: #8C8E94; --edge: linear-gradient(90deg, #2A2B2F, #75777D 40%, #3D3F44); /* taste-skill-ignore: real app UI inside a data-ui phone */
  position: relative; width: var(--phone-w); aspect-ratio: 71.5 / 147.6; padding: calc(var(--phone-w) * .038);
  border-radius: calc(var(--phone-w) * .18); background: #0A0B0D;
  box-shadow: inset 0 0 0 1px #2E3034, 0 0 0 2px var(--rim-hi), 0 0 0 3.5px var(--rim), /* taste-skill-ignore: real app UI inside a data-ui phone */
    16px 30px 42px -14px rgb(12 13 16 / .5), 5px 10px 16px -6px rgb(12 13 16 / .32);
  transform: rotateY(var(--turn)) rotateX(5deg) rotateZ(calc(var(--turn) / -12));
  transform-style: preserve-3d;
}
/* Chrome rasterises text inside a perspective transform at about 1x, which blurs on 3x screens:
   there the phones keep their frame and depth cues but lean flat instead of turning in 3D */
@media (min-resolution: 2.5dppx) {
  .phone { transform: rotate(calc(var(--turn) / -4)); }
  .phone::before { display: none; }
}
/* the titanium side, seen past the turn */
.phone::before { content: ''; position: absolute; inset: -3px; border-radius: inherit; background: var(--edge); transform: translateZ(-9px); }
.phone-end { --turn: -15deg; --rim: #B9B4AB; --rim-hi: #E4E0D8; --edge: linear-gradient(90deg, #8F8A82, #EAE6DE 55%, #A39E95); } /* taste-skill-ignore: real app UI inside a data-ui phone */
.phone-key { position: absolute; width: 3px; border-radius: 2px; background: var(--rim); transform: translateZ(-4px); }
.key-side { right: -5px; top: 27%; height: 11%; }
.key-vol { left: -5px; top: 21%; height: 6.5%; box-shadow: 0 calc(var(--phone-w) * .1) 0 var(--rim); } /* taste-skill-ignore: real app UI inside a data-ui phone */
.phone-screen {
  position: relative; height: 100%; overflow: hidden; display: flex; flex-direction: column;
  border-radius: calc(var(--phone-w) * .145); font-family: var(--text); font-size: calc(var(--phone-w) / 390 * 16);
  line-height: 1.3; color: #111B21; text-align: start; letter-spacing: 0;
}
.island { position: absolute; top: .7em; left: 50%; z-index: 2; width: 7.4em; height: 2.2em; translate: -50% 0; border-radius: 2em; background: #000; }
.status { flex: none; display: flex; align-items: center; justify-content: space-between; height: 3.3em; padding: .35em 2.1em 0; font-size: 1.04em; font-weight: 600; }
.status-icons { display: flex; align-items: center; gap: .3em; direction: ltr; }
.status-icons svg { height: .7em; width: auto; fill: currentColor; }
.ico { width: 1.45em; height: 1.45em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.home-bar { position: absolute; bottom: .5em; left: 50%; width: 8.6em; height: .3em; translate: -50% 0; border-radius: 1em; background: #111; }

/* step 1 – WhatsApp on the customer's phone */
.wa { background: #E9E7E3; }
.wa .status, .wa-head, .wa-input { background: #F7F7F7; }
.wa-head { flex: none; display: flex; align-items: center; gap: .5em; padding: .2em .75em .55em; border-bottom: 1px solid #DEDEDE; } /* taste-skill-ignore: real app UI inside a data-ui phone */
.wa-back { width: 1.25em; color: #1C1C1E; }
.wa-avatar { flex: none; display: grid; place-items: end center; width: 2.3em; height: 2.3em; border-radius: 50%; overflow: hidden; background: #CFD4D8; color: #fff; }
.wa-avatar svg { width: 84%; height: 84%; fill: currentColor; }
.wa-who { flex: 1; min-width: 0; display: grid; line-height: 1.2; }
.wa-who b { font-size: 1em; font-weight: 600; }
.wa-who small { font-size: .74em; color: #566670; }
.wa-calls { display: flex; gap: .9em; color: #1C1C1E; }
.wa-body { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: .6em; padding: .8em .75em; }
.wa-day { align-self: center; padding: .25em .75em; border-radius: .55em; background: #fff; color: #54656F; font-size: .72em; box-shadow: 0 1px .5px rgb(11 20 26 / .13); } /* taste-skill-ignore: real app UI inside a data-ui phone */
.wa-msg { position: relative; align-self: flex-start; max-width: 88%; padding: .28em; border-radius: .6em; border-start-start-radius: 0; background: #fff; box-shadow: 0 1px .5px rgb(11 20 26 / .13); } /* taste-skill-ignore: real app UI inside a data-ui phone */
.wa-msg::before { content: ''; position: absolute; top: 0; inset-inline-start: -.5em; width: .55em; height: .7em; background: #fff; clip-path: polygon(0 0, 100% 0, 0 100%); }
.wa-preview { display: flex; align-items: center; gap: .5em; padding: .45em; border-radius: .45em; background: #F2F3F3; }
.wa-preview img { flex: none; width: 2.9em; height: 2.9em; border-radius: .35em; }
.wa-preview span { display: grid; gap: .1em; min-width: 0; }
.wa-preview b { font-size: .8em; font-weight: 600; }
.wa-preview small { display: -webkit-box; overflow: hidden; font-size: .7em; color: #566670; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.wa-domain { font-size: .66em; color: #566670; }
.wa-text { padding: .4em .35em 0; font-size: 1.02em; line-height: 1.35; }
.wa-link { color: #027EB5; text-decoration: underline; text-underline-offset: .15em; overflow-wrap: anywhere; }
.wa-time { display: block; margin-top: .1em; padding-inline-end: .3em; text-align: end; font-size: .66em; color: #566670; }
.wa-input { flex: none; display: flex; align-items: center; gap: .65em; padding: .45em .75em 1.9em; border-top: 1px solid #DEDEDE; color: #1C1C1E; } /* taste-skill-ignore: real app UI inside a data-ui phone */
.wa-field { flex: 1; height: 2.1em; border: 1px solid #E2E2E2; border-radius: 1.1em; background: #fff; } /* taste-skill-ignore: real app UI inside a data-ui phone */

/* step 4 – the e-mail on the garage's phone (a mail app showing lib/mailer.js's message) */
.mx { background: #fff; color: #1C1C1E; }
.mx-nav { flex: none; display: flex; align-items: center; justify-content: space-between; padding: .25em .8em .45em; color: #0A66D1; }
.mx-back { display: flex; align-items: center; gap: .1em; }
.mx-arrows { display: flex; gap: .7em; }
.mx-head { flex: none; display: flex; align-items: center; gap: .6em; padding: .35em 1em .5em; }
.mx-avatar { flex: none; display: grid; place-items: center; width: 2.5em; height: 2.5em; border-radius: 50%; background: linear-gradient(#6E737D, #585D67); color: #fff; font-weight: 600; } /* taste-skill-ignore: real app UI inside a data-ui phone */
.mx-meta { flex: 1; min-width: 0; display: grid; line-height: 1.25; }
.mx-line { display: flex; align-items: baseline; justify-content: space-between; }
.mx-line b { font-weight: 600; }
.mx-line time, .mx-meta small { font-size: .78em; color: #6A6A6F; }
.mx-subj { flex: none; padding: 0 1em .6em; border-bottom: 1px solid #E5E5EA; font-size: 1.06em; font-weight: 700; line-height: 1.25; } /* taste-skill-ignore: real app UI inside a data-ui phone */
.mx-body { flex: 1; min-height: 0; overflow: hidden; display: grid; align-content: start; gap: .65em; padding: .85em .75em; background: #EDF0F4; }
.mx-card { display: grid; gap: .15em; padding: .85em; border: 1px solid #D3DAE3; border-radius: .7em; background: #fff; } /* taste-skill-ignore: real app UI inside a data-ui phone */
.mx-h { font-size: 1.02em; font-weight: 700; color: #0D2478; }
.mx-sub { margin-bottom: .45em; font-size: .76em; color: #5A6575; }
.mx-rows { display: grid; gap: .3em; font-size: .76em; }
.mx-rows div { display: grid; grid-template-columns: 6.6em 1fr; }
.mx-rows dt { color: #5A6575; }
.mx-rows dd { font-weight: 700; }
.mx-note { margin-top: .5em; padding: .45em .55em; border-radius: .5em; background: #FFF6D6; font-size: .72em; }
.mx-fwd, .mx-end { margin-top: .5em; font-size: .72em; color: #5A6575; }
.mx-end { color: #1B2330; }
.mx-foot { font-size: .66em; color: #5C6676; text-align: center; }
.mx bdi { white-space: nowrap; }
.mx-att { display: flex; align-items: center; gap: .6em; padding: .5em; border: 1px solid #D3DAE3; border-radius: .7em; background: #fff; } /* taste-skill-ignore: real app UI inside a data-ui phone */
.mx-att img { flex: none; width: 2.4em; height: 3.4em; object-fit: cover; object-position: top; border: 1px solid #E1E4EA; border-radius: .2em; } /* taste-skill-ignore: real app UI inside a data-ui phone */
.mx-att span { display: grid; min-width: 0; }
.mx-att b { overflow: hidden; font-size: .74em; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.mx-att small { font-size: .68em; color: #6A6A6F; }
.mx-tools { flex: none; display: flex; justify-content: space-between; padding: .55em 1.4em 1.9em; border-top: 1px solid #E5E5EA; background: #F9F9F9; color: #0A66D1; } /* taste-skill-ignore: real app UI inside a data-ui phone */

/* the one moment here: as each phone scrolls in, it turns from steep to resting, toward the reader */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .phone { animation: phone-turn linear both; animation-timeline: view(); animation-range: entry 5% cover 42%; }
    .phone-end { animation-name: phone-turn-end; }
  }
  @media (prefers-reduced-motion: no-preference) and (min-resolution: 2.5dppx) {
    .phone, .phone-end { animation-name: phone-lean; }
  }
}
@keyframes phone-turn { from { transform: rotateY(36deg) rotateX(14deg) rotateZ(-3deg) translateY(28px); } }
@keyframes phone-turn-end { from { transform: rotateY(-36deg) rotateX(14deg) rotateZ(3deg) translateY(28px); } }
@keyframes phone-lean { from { transform: rotate(0deg) translateY(28px); } }

/* ---------------------------------------------------------------- forms: the line-up – what each form saves the office */
.forms { background: var(--paper); padding: var(--gap) var(--m); }
.forms-head { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: end; gap: 28px clamp(32px, 6vw, 96px); margin-bottom: clamp(40px, 5vw, 64px); }
.forms-title { font-family: var(--display); font-size: var(--t-d3); line-height: 1; letter-spacing: -0.03em; text-wrap: balance; }
.forms-lede { max-width: 36ch; font-size: var(--t-s3); line-height: 1.4; }
.forms-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.forms-table th, .forms-table td { padding: 14px 16px; font-weight: 400; text-align: start; vertical-align: baseline; }
/* each row says it all: the form, the fields the office doesn't fill, the minutes it saves */
.forms-table .n, .forms-table .t { text-align: end; white-space: nowrap; }
.forms-table tbody th[scope="row"] { width: 28%; font-family: var(--display); font-size: var(--t-s3); line-height: 1.1; letter-spacing: -0.01em; }
.forms-table tbody td { font-size: var(--t-body); color: #3B4250; }
.forms-table tbody td.n { font-weight: 600; font-size: var(--t-s3); color: var(--black); }
.forms-table tbody td.t { font-family: var(--display); color: var(--navy); }
.forms-table td.t b { font-family: var(--display); font-weight: 900; font-size: var(--t-d3); line-height: .9; letter-spacing: -0.03em; }
.forms-table .unit { font-family: var(--text); font-size: var(--t-small); font-weight: 400; color: #474E5C; }
.forms-table td.t .unit { font-family: var(--display); font-size: var(--t-s3); color: var(--navy); }
.forms-table tbody tr:nth-child(odd of :not(.group)) { background: var(--paper-step); }
.forms-table tbody tr:not(.group) { transition: background-color .15s; }
.forms-table tbody tr:not(.group):hover { background: var(--plate); }
.forms-table tbody tr:not(.group):hover td.t { color: var(--black); }
.forms-table tr.group th { padding: 56px 16px 14px; font-family: var(--display); font-size: var(--t-s3); color: var(--navy); letter-spacing: -0.01em; }
.forms-note { margin-top: 28px; max-width: 72ch; font-size: var(--t-small); color: #474E5C; }
/* the recording: bleeds off both edges, caption on a solid bar */
.loop { position: relative; background: var(--paper-step); }
.loop video { display: block; width: 100%; height: auto; max-height: 92svh; object-fit: cover; object-position: top; }
.loop figcaption {
  position: absolute; inset-inline-start: var(--m); bottom: 0; max-width: min(640px, 70%);
  padding: 20px 24px; background: var(--navy); color: var(--paper); font-size: var(--t-s3); line-height: 1.35;
}

/* ---------------------------------------------------------------- command list */
.cmd { background: var(--black); color: var(--paper); padding: var(--gap) var(--m); }
.cmd-search input {
  width: min(100%, 1100px); height: 1.9em; border: 0; padding: 0 .5em;
  background: #20232B; color: var(--paper); font-size: var(--t-s3);
}
.cmd-search input::placeholder { color: #B9BFCB; }
.cmd-search input:focus-visible { outline: 3px solid var(--plate); outline-offset: 0; }
.cmd-list { margin-top: 40px; }
.cmd-list button {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  border: 0; background: none; padding: .06em .2em; cursor: pointer; text-align: start;
  font-family: var(--display); font-size: var(--t-d3); line-height: 1.12; letter-spacing: -0.025em;
  transition: background-color .12s, color .12s;
}
.cmd-list li.on { background: var(--plate); color: var(--black); }
.cmd-list li.on button { color: var(--black); }
.cmd-list li:not(.on) button:hover { background: #20232B; }
.cmd-list kbd {
  flex: none; display: grid; place-items: center; width: 1em; height: 1em;
  background: #20232B; color: var(--paper); font-family: var(--text); font-weight: 600; font-size: .42em;
}
.cmd-list li.on kbd { background: var(--black); color: var(--plate); }
.cmd-list p { display: none; padding: 6px 12px 28px; max-width: 56ch; font-size: var(--t-body); }
.cmd-list li.on p { display: block; }
.cmd-empty { margin-top: 24px; font-size: var(--t-s3); }

/* ---------------------------------------------------------------- price */
.price { background: var(--plate); padding: var(--gap) var(--m); min-height: 80svh; display: grid; align-content: center; }
.price-title { font-family: var(--display); font-weight: 900; font-size: var(--t-d2); line-height: .98; letter-spacing: -0.035em; }
.price-title .tag { display: inline-block; background: var(--navy); color: var(--plate); padding: 0 .15em; line-height: .98; direction: ltr; unicode-bidi: isolate; }
.price-foot { margin-top: 64px; display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
.price-foot p { max-width: 46ch; font-size: var(--t-body); }

/* ---------------------------------------------------------------- faq: folders in a drawer */
.faq { background: var(--paper); padding: var(--gap) var(--m); }
.faq-title, .drawer { width: min(100%, 980px); margin-inline: auto; }
.faq-title { font-family: var(--display); font-size: var(--t-d3); line-height: 1; letter-spacing: -0.03em; margin-bottom: 64px; }
.folder { --tab-w: 210px; --tab-step: 150px; position: relative; margin-top: -24px; padding-top: 40px; }
.folder:first-child { margin-top: 0; }
.folder h3 { margin: 0; }
.folder button {
  display: block; width: 100%; border: 0; padding: 0; background: none; cursor: pointer; text-align: start;
  font-weight: 600;
}
.folder .tab {
  position: absolute; top: 0; inset-inline-start: calc(var(--n) * var(--tab-step));
  width: var(--tab-w); height: 41px; padding: 10px 20px 0; font-size: var(--t-small); background: var(--fill); color: var(--on);
  clip-path: polygon(0 100%, 14px 0, calc(100% - 14px) 0, 100% 100%);
}
.folder .q { display: block; padding: 24px 28px 48px; font-size: var(--t-s3); background: var(--fill); color: var(--on); transition: padding .2s var(--ease-out); }
.folder button:hover .q { padding-top: 20px; }
.folder .answer { background: var(--fill); color: var(--on); padding: 0 28px 64px; margin-top: -32px; }
.folder .answer p { max-width: 50ch; font-size: var(--t-body); }
.c1 { --fill: var(--plate); --on: var(--black); }
.c2 { --fill: var(--navy); --on: var(--paper); }
.c3 { --fill: var(--paper-step); --on: var(--black); }

/* ---------------------------------------------------------------- cta: one word */
.cta {
  position: relative; display: block; min-height: 60svh; padding: 28px var(--m) 24px;
  background: var(--navy); color: var(--plate); text-decoration: none; overflow: hidden;
}
.cta:hover, .cta:focus-visible { background: var(--plate); color: var(--navy); outline: none; }
.cta-note { display: block; max-width: 28ch; font-size: var(--t-s3); color: var(--paper); }
.cta:hover .cta-note, .cta:focus-visible .cta-note { color: var(--navy); }
.cta-arrow { position: absolute; top: 28px; inset-inline-end: var(--m); width: 48px; height: 48px; }
.cta-word {
  position: absolute; bottom: 24px; inset-inline-start: var(--m);
  font-family: var(--display); font-size: var(--t-mega); line-height: .74; letter-spacing: -0.05em;
}

/* ---------------------------------------------------------------- footer */
.foot { background: var(--black); color: var(--paper); min-height: 90svh; padding: 40px var(--m) 28px; display: grid; grid-template-rows: auto 1fr auto auto; }
.foot-top { display: flex; align-items: baseline; gap: 40px; font-size: var(--t-small); }
.foot-top .to-top { margin-inline-start: auto; }
.foot-claim { grid-row: 3; }
.foot-contact {
  display: block; text-align: right; text-decoration: none; color: var(--plate);
  font-family: var(--display); font-size: clamp(40px, 6vw, 104px); line-height: 1.04; letter-spacing: -0.03em;
}
.foot-contact span { display: block; text-wrap: balance; }
.foot-contact span + span { color: var(--paper); }
.foot-contact:hover { color: var(--paper); }
.foot-whatsapp { margin-top: 28px; font-size: var(--t-s3); }
.foot-whatsapp a { color: var(--plate); }
.foot-meta { grid-row: 4; margin-top: 48px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; font-size: var(--t-small); color: #C9CED8; }
.foot-meta p:nth-child(2) { text-align: center; }
.foot-meta p:last-child { text-align: end; }
.foot-meta a { color: var(--paper); }

/* ---------------------------------------------------------------- phone */
@media (max-width: 860px) {
  :root { --t-body: 17px; }
  .nav .wide { display: none; }
  .hero { min-height: max(100svh, 640px); }
  .hero-title { margin-top: 12vh; font-size: 17.5vw; line-height: .9; }
  .hero-title .line-end { text-align: start; }
  .hero-sheet { width: 46vw; bottom: auto; top: 50%; inset-inline-start: auto; inset-inline-end: -6vw; translate: none; rotate: 6deg; }
  .hero-sheet .stamp { inset-inline-start: -18%; top: 10%; }
  .hero-foot { flex-direction: column; align-items: stretch; gap: 20px; }
  .hero-lede { max-width: 21ch; font-size: var(--t-body); }
  .btn { width: 100%; }

  .try { min-height: 0; }
  /* the plate (10.5ch ≈ 6.11em + the 34px strip) must fit between the side margins on any phone */
  .plate-input { font-size: min(13vw, calc((100vw - 2 * var(--m) - 34px) / 6.2)); }
  .try-body { grid-template-columns: 1fr; margin-top: 28px; gap: 28px; }
  .try-lede { font-size: var(--t-body); }
  .try-examples { gap: 10px; }
  .try-examples button { background: var(--plate); color: var(--black); text-decoration: none; min-height: 44px; padding: 0 14px; }
  .try-examples button:hover { color: var(--black); background: var(--paper); }
  .try-go { margin-top: 36px; }

  .how { grid-template-columns: 1fr; }
  .field { min-height: 64svh; grid-template-rows: auto auto 1fr; padding: 24px 20px 40px; }
  .how-title { margin-bottom: 8px; }
  .clause { grid-row: 2; }
  .field .card, .f1 .card { grid-row: 3; justify-self: start; margin-top: 32px; }
  .f1 .card.device, .f4 .card.device { margin-top: 36px; }
  .phone { --phone-w: min(250px, 64vw); --turn: 11deg; }
  .phone-end { --turn: -11deg; }

  .loop figcaption { position: static; max-width: none; font-size: var(--t-body); padding: 16px var(--m); }
  /* each row becomes a card: company + minutes on top, the form and its field count under them */
  .forms-head { grid-template-columns: 1fr; }
  .forms-table, .forms-table tbody { display: block; }
  .forms-table tr { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 2px 12px; padding: 14px 12px; }
  .forms-table th, .forms-table td, .forms-table tbody th[scope="row"] { width: auto; padding: 0; }
  .forms-table tbody th[scope="row"] { grid-column: 1; grid-row: 1; }
  .forms-table td.t { grid-column: 2; grid-row: 1; }
  .forms-table tbody td:nth-child(2) { grid-column: 1 / -1; font-size: var(--t-small); }
  .forms-table tbody td.n { grid-column: 1 / -1; text-align: start; font-weight: 400; font-size: var(--t-small); color: #3B4250; }
  .forms-table td.t b { font-size: var(--t-s3); }
  .forms-table td.t .unit { font-size: var(--t-small); }
  .forms-table tr.group { display: block; padding: 0; }
  .forms-table tr.group th { display: block; padding: 40px 12px 12px; }

  .cmd-search input { height: 56px; }
  .cmd-list button { font-size: 8.5vw; }
  .cmd-list kbd { display: none; }


  .price-title { font-size: 11vw; line-height: 1.02; }
  .price-foot { flex-direction: column; align-items: stretch; margin-top: 40px; }


  /* the 6th tab sits 5 steps in: shrink the step on narrow phones so it never sticks out of the page */
  .folder { --tab-w: 120px; --tab-step: min(44px, calc((100% - var(--tab-w)) / 5)); margin-top: -20px; }
  .folder .tab { padding: 10px 14px 0; }
  .folder .q { padding: 20px 20px 44px; }
  .folder .answer { padding: 0 20px 56px; }
  .faq-title { font-size: 9vw; margin-bottom: 40px; }

  .cta { min-height: 46svh; }
  .cta-note { max-width: 18ch; }
  .cta-arrow { width: 32px; height: 32px; }
  .cta-word { font-size: 25vw; }

  .foot-top { flex-direction: column; align-items: flex-start; gap: 10px; }
  .foot-top .to-top { margin-inline-start: 0; }
  /* two lines on tablets (each half of the claim on one line); phones may take three */
  .foot-contact { font-size: max(6.2vw, min(9.4vw, 38px)); line-height: 1.08; }
  .foot-meta { grid-template-columns: 1fr; }
  .foot-meta p:nth-child(2), .foot-meta p:last-child { text-align: start; }
}

/* ---------------------------------------------------------------- motion */
@media (prefers-reduced-motion: no-preference) {
  .js .lines [data-line] { transform: translateY(105%); }
  .js .lines.is-in [data-line] { animation: line-up 900ms var(--ease-out) forwards; animation-delay: calc(var(--i) * 110ms + 120ms); }
  .js .hero-foot, .js .hero-sheet { opacity: 0; }
  .js .hero.is-in .hero-foot { animation: rise 700ms var(--ease-out) 420ms forwards; }
  .js .hero.is-in .hero-sheet { animation: slide-in 1100ms var(--ease-out) 300ms forwards; }
  .js .hero.is-in .stamp { animation: stamp 420ms cubic-bezier(.16, 1, .3, 1) 1250ms both; }

  .js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out); transition-delay: calc(var(--d, 0) * 80ms); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }

  .hero-sheet img { will-change: transform; }
}
@keyframes line-up { to { transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes slide-in { from { opacity: 0; transform: translateY(40%) rotate(8deg); } to { opacity: 1; transform: none; } }
@keyframes stamp { from { opacity: 0; transform: scale(1.6); } to { opacity: 1; transform: none; } }

/* stagger and folder steps (no inline styles under the CSP) */
.lines .line:nth-child(1) [data-line] { --i: 0; }
.lines .line:nth-child(2) [data-line] { --i: 1; }
.folder:nth-child(1) { --n: 0; }
.folder:nth-child(2) { --n: 1; }
.folder:nth-child(3) { --n: 2; }
.folder:nth-child(4) { --n: 3; }
.folder:nth-child(5) { --n: 4; }
.folder:nth-child(6) { --n: 5; }