/* Castillo Registration Services
   Layout: a cherry-red hero band with a stamped paper pile, then alternating paper-white and
   warm "counter" bands. Colors come from the California plate (red script, navy letters) and
   San Leandro's cherries; navy stays inside the plate so nothing reads like the DMV's own look. */
:root {
  --bg: #FBF7F1;
  --card: #FFFFFF;
  --soft: #F3EBE1;
  --ink: #1E1A1D;
  --muted: #5E5459;
  --rule: #E6DCD0;
  --accent: #B3122E;
  --fill: #B3122E;
  --fill-hover: #9A0F27;
  --on-fill: #FFFFFF;
  --band: #B3122E;
  --band-ink: #FFFFFF;
  --band-muted: #FFDDE2;
  --sticker: #FFD43B;
  --on-sticker: #3A2C00;
  --sticker-soft: #FFF4C7;
  --dark: #1E1A1D;
  --on-dark: #FBF7F1;
  --dark-muted: #CDC2C7;
  --dark-rule: #3B3337;
  --open: #1E8A4C;
  --desk: #E7D7C3;
  --desk-edge: #CDB79C;
  --shadow: rgba(30, 26, 29, .22);
  --f-display: "Archivo", "Arial Black", "Helvetica Neue", Arial, sans-serif;
  --f-body: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #151113; --card: #1F191C; --soft: #241D21; --ink: #F4EDE7; --muted: #BDB0B6; --rule: #3A3135;
    --accent: #F2687F; --fill: #C2183A; --fill-hover: #D42347; --on-fill: #FFFFFF;
    --band: #7E0C21; --band-ink: #FFFFFF; --band-muted: #F6C9D1;
    --sticker: #FFD43B; --on-sticker: #3A2C00; --sticker-soft: rgba(255, 212, 59, .13);
    --dark: #0D0A0B; --on-dark: #F4EDE7; --dark-muted: #B9ADB2; --dark-rule: #2E272A;
    --open: #56C98A; --desk: #4A3A30; --desk-edge: #5E4A3D; --shadow: rgba(0, 0, 0, .5);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #151113; --card: #1F191C; --soft: #241D21; --ink: #F4EDE7; --muted: #BDB0B6; --rule: #3A3135;
  --accent: #F2687F; --fill: #C2183A; --fill-hover: #D42347; --on-fill: #FFFFFF;
  --band: #7E0C21; --band-ink: #FFFFFF; --band-muted: #F6C9D1;
  --sticker: #FFD43B; --on-sticker: #3A2C00; --sticker-soft: rgba(255, 212, 59, .13);
  --dark: #0D0A0B; --on-dark: #F4EDE7; --dark-muted: #B9ADB2; --dark-rule: #2E272A;
  --open: #56C98A; --desk: #4A3A30; --desk-edge: #5E4A3D; --shadow: rgba(0, 0, 0, .5);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--f-body); font-size: 1.0625rem; line-height: 1.6; }
body::before { content: ""; position: fixed; inset: 0 0 auto; z-index: 30; height: env(safe-area-inset-top, 0px); background: var(--bg); }
[hidden] { display: none !important; }
img, svg { max-width: 100%; }
a { color: inherit; text-underline-offset: 3px; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
figure { margin: 0; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

.wrap {
  max-width: 1160px; margin-inline: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
@media (min-width: 720px) {
  .wrap { padding-left: max(32px, env(safe-area-inset-left, 0px)); padding-right: max(32px, env(safe-area-inset-right, 0px)); }
}

h1, h2 { margin: 0; font-family: var(--f-display); font-weight: 800; font-stretch: 112%; line-height: 1.02; letter-spacing: -.012em; text-wrap: balance; }
h3 { margin: 0; font-family: var(--f-display); font-weight: 700; font-stretch: 100%; font-size: 1.28rem; line-height: 1.15; }
h1 { font-size: clamp(2.2rem, 1.35rem + 3.6vw, 4rem); }
h2 { font-size: clamp(1.8rem, 1.3rem + 1.9vw, 2.8rem); }
.eyebrow { font-family: var(--f-mono); font-size: .78rem; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 60; background: var(--card); padding: 8px 12px; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 20px; border: 2px solid var(--fill); border-radius: 10px;
  background: var(--fill); color: var(--on-fill);
  font-family: var(--f-body); font-weight: 700; font-size: 1rem; line-height: 1.2; text-decoration: none; cursor: pointer;
  transition: transform .15s ease, background-color .15s ease;
}
.btn:hover { background: var(--fill-hover); border-color: var(--fill-hover); }
.btn:active { transform: translateY(1px); }
.btn--small { padding: 8px 14px; font-size: .95rem; }
.btn--sticker { background: var(--sticker); border-color: var(--sticker); color: var(--on-sticker); }
.btn--sticker:hover { background: #FFC800; border-color: #FFC800; }
.btn--white { background: #FFFFFF; border-color: #FFFFFF; color: #8E0E24; }
.btn--white:hover { background: #FFF1F3; border-color: #FFF1F3; }
.btn--line { background: transparent; border-color: rgba(255, 255, 255, .8); color: #FFFFFF; }
.btn--line:hover { background: rgba(255, 255, 255, .12); border-color: #FFFFFF; }
.btn--ghost { background: transparent; border-color: var(--ink); color: var(--ink); }
.btn--ghost:hover { background: var(--soft); border-color: var(--ink); }
.cta { display: flex; flex-wrap: wrap; gap: 10px; }

/* Header */
.hdr { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--bg); border-bottom: 1px solid var(--rule); }
.hdr__in { display: flex; align-items: center; gap: 22px; min-height: 66px; }
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: var(--ink); min-width: 0; }
.brand__name { display: flex; flex-direction: column; line-height: 1; min-width: 0; }
.brand__1 { font-family: var(--f-display); font-weight: 800; font-stretch: 118%; font-size: 1.2rem; letter-spacing: .06em; text-transform: uppercase; }
.brand__2 { margin-top: 4px; font-family: var(--f-mono); font-size: .64rem; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
@media (max-width: 400px) { .brand__2 { display: none; } }
.plate { flex: none; width: 66px; height: 33px; perspective: 360px; }
.plate__card { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .42s cubic-bezier(.45, .05, .3, 1); }
.plate__card.flipped { transform: rotateY(180deg); }
.plate__card.no-anim { transition: none; }
.plate__face { position: absolute; inset: 0; width: 100%; height: 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden; filter: drop-shadow(0 1px 1px var(--shadow)); }
.plate__back { transform: rotateY(180deg); }
.brand:hover .plate__card:not(.flipped) { transform: rotate(-3deg); }
.nav { display: none; gap: 20px; margin-left: auto; }
.nav a { text-decoration: none; color: var(--muted); font-size: .95rem; }
.nav a:hover { color: var(--ink); text-decoration: underline; }
.hdr__act { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.hdr__act .btn--call { display: none; }
@media (min-width: 720px) { .hdr__act .btn--call { display: inline-flex; } }
@media (min-width: 1060px) { .nav { display: flex; } .hdr__act { margin-left: 0; } }

/* Hero */
.hero { background: var(--band); color: var(--band-ink); padding-block: 44px 56px; overflow: hidden; }
.hero__in { display: grid; gap: 36px; align-items: center; }
@media (min-width: 940px) { .hero__in { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 56px; } }
.hero__copy { display: grid; gap: 20px; min-width: 0; }
.hero__eyebrow { font-family: var(--f-mono); font-size: .8rem; letter-spacing: .09em; text-transform: uppercase; color: var(--band-muted); }
.es-hint { display: inline-block; margin-left: 2px; padding: 3px 9px; border-radius: 6px; background: var(--sticker); color: var(--on-sticker); font-weight: 500; letter-spacing: .06em; }
.hero__lede { font-size: 1.15rem; max-width: 36rem; color: var(--band-muted); }
.status { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.12rem; }
.status__dot { width: 12px; height: 12px; border-radius: 50%; background: #7BE0A0; box-shadow: 0 0 0 4px rgba(123, 224, 160, .25); }
.status[data-open="false"] .status__dot { background: #FFB4C0; box-shadow: 0 0 0 4px rgba(255, 180, 192, .25); }
.status--dark .status__dot { background: var(--open); box-shadow: 0 0 0 4px color-mix(in srgb, var(--open) 22%, transparent); }
.status--dark[data-open="false"] .status__dot { background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { padding: 5px 11px; border: 1px solid rgba(255, 255, 255, .45); border-radius: 999px; font-size: .86rem; }

/* Hero paper pile */
.pile { display: grid; gap: 12px; justify-items: center; min-width: 0; }
.pile__btn { appearance: none; border: 0; padding: 0; background: none; cursor: pointer; width: 100%; max-width: 440px; border-radius: 16px; }
.pile__art { display: block; width: 100%; height: auto; overflow: visible; }
.pile__desk { fill: var(--desk); }
.pile__edge { fill: var(--desk-edge); }
.pile figcaption, .pile > figcaption { font-weight: 700; text-align: center; color: var(--band-ink); max-width: 26rem; }
.pp, .pile__stamp, .pile__stack { transform-box: fill-box; transform-origin: 50% 50%; }
.pile__btn.play .pp { animation: tidy .8s cubic-bezier(.3, 1.35, .5, 1) both; animation-delay: calc(var(--i) * .13s + .25s); }
@keyframes tidy { from { transform: translate(var(--fx), var(--fy)) rotate(var(--fr)); } to { transform: none; } }
.pile__btn.play .pile__stamp { animation: slam .5s 1.55s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes slam { 0% { opacity: 0; transform: scale(2.4) rotate(-14deg); } 60% { opacity: 1; transform: scale(.9); } 100% { opacity: 1; transform: none; } }
.pile__btn.play .pile__stack { animation: thud .32s 1.78s ease-out both; }
@keyframes thud { 0%, 100% { transform: none; } 40% { transform: translateY(3px) scaleY(.985); } }

/* Sections */
.sec { padding-block: 72px; }
.sec--soft { background: var(--soft); }
.sec__head { display: grid; gap: 12px; max-width: 46rem; margin-bottom: 34px; }
.sec__head p { color: var(--muted); }

/* Problem picker */
/* Cards are big on purpose: the paper drawings are about 2 inches tall on a computer
   so older visitors can see them, and the labels are large. */
.picks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 900px) { .picks { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }
.pick {
  display: flex; flex-direction: column; align-items: center; gap: 12px; min-width: 0; text-align: center;
  padding: 20px 14px 18px; background: var(--card); color: var(--ink); text-decoration: none;
  border: 2px solid var(--rule); border-radius: 18px;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.pick:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 14px 28px -18px var(--shadow); }
.pick__icon { flex: none; width: 108px; height: 138px; }
@media (min-width: 900px) { .pick__icon { width: 150px; height: 192px; } }
.pick__icon svg { display: block; width: 100%; height: 100%; overflow: visible; transition: transform .35s cubic-bezier(.34, 1.56, .64, 1); }
.pick:hover .pick__icon svg { transform: rotate(-6deg) translateY(-4px); }
.pick__label { font-weight: 700; font-size: 1.15rem; line-height: 1.25; }
@media (min-width: 900px) { .pick__label { font-size: 1.25rem; } }
.pick__sub { display: block; margin-top: 6px; font-size: 1rem; color: var(--muted); }
.pick--unknown { grid-column: 1 / -1; flex-direction: row; text-align: left; background: var(--sticker-soft); border-color: var(--sticker); }

/* Envelope: the flap flips up and the letter slides out (hover on a computer, in view on a phone) */
.env__flap, .env__flap2, .env__paper { transform-box: fill-box; }
.env__flap { transform-origin: 50% 0%; transition: transform .22s ease-in .42s; }
.env__flap2 { transform-origin: 50% 100%; transform: scaleY(0); transition: transform .2s ease-in .24s; }
.env__paper { transition: transform .3s ease-in 0s; }
.pick:hover .env__flap, .is-open .env__flap { transform: scaleY(0); transition: transform .22s ease-in 0s; }
.pick:hover .env__flap2, .is-open .env__flap2 { transform: scaleY(1); transition: transform .22s ease-out .2s; }
.pick:hover .env__paper, .is-open .env__paper { transform: translateY(-27px); transition: transform .55s cubic-bezier(.34, 1.56, .64, 1) .38s; }
@media (min-width: 900px) { .pick--unknown { grid-column: span 2; } }
.no-id { margin-top: 18px; font-size: .95rem; color: var(--muted); }

/* Take-a-number strip */
.tk { background: var(--soft); padding-block: 56px; }
.tk__in { display: grid; gap: 28px; align-items: center; }
@media (min-width: 820px) { .tk__in { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; } }
.tk__pic { max-width: 400px; width: 100%; justify-self: center; }
.tk__art { display: block; width: 100%; height: auto; }
.tk__copy { display: grid; gap: 12px; min-width: 0; }
.tk__copy p { color: var(--muted); max-width: 34rem; }
mark.hl {
  padding: 1px 5px; border-radius: 4px; color: var(--on-sticker); font-weight: 700;
  background-color: transparent; background-image: linear-gradient(var(--sticker), var(--sticker));
  background-repeat: no-repeat; background-size: 100% 100%;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.tk.armed:not(.seen) mark.hl { background-size: 0% 100%; color: inherit; }
.tk.seen.armed mark.hl { animation: hl-sweep .7s 1.7s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes hl-sweep { from { background-size: 0% 100%; color: inherit; } to { background-size: 100% 100%; } }
.tk__feed, .tk__tear { transform-box: fill-box; }
.tk__tear { transform-origin: 0% 50%; transform: translateY(5px) rotate(8deg); }
.tk.armed:not(.play) .tk__feed { transform: translateX(-128px); }
.tk.armed:not(.play) .tk__tear { transform: none; }
.tk.play .tk__feed { animation: feed 1s .15s cubic-bezier(.25, .9, .35, 1) both; }
.tk.play .tk__tear { animation: tear .65s 1.25s cubic-bezier(.4, 1.7, .5, 1) both; }
@keyframes feed { from { transform: translateX(-128px); } to { transform: none; } }
@keyframes tear { from { transform: none; } to { transform: translateY(5px) rotate(8deg); } }

/* Sell with the buyer */
.sell { background: var(--dark); color: var(--on-dark); padding-block: 76px; }
.sell__in { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) { .sell__in { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 64px; } }
.sell__copy { display: grid; gap: 16px; min-width: 0; }
.sell .eyebrow { color: var(--dark-muted); }
.sell__copy > p { color: var(--dark-muted); max-width: 36rem; }
.sell__list { list-style: none; display: grid; gap: 0; border-top: 1px solid var(--dark-rule); }
.sell__list li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--dark-rule); }
.sell__list li::before { content: ""; width: 12px; height: 7px; margin: 8px 0 0 4px; border-left: 3px solid var(--sticker); border-bottom: 3px solid var(--sticker); transform: rotate(-45deg); }
.sell__pair { display: flex; align-items: center; justify-content: center; gap: 14px; }
.sell__pair figure { display: grid; gap: 10px; justify-items: center; }
.sell__paper { display: block; width: 120px; height: 153px; }
@media (min-width: 600px) { .sell__paper { width: 150px; height: 192px; } }
.sell__paper svg { width: 100%; height: 100%; overflow: visible; }
.sell__pair figure:first-child .sell__paper { transform: rotate(-6deg); }
.sell__pair figure:last-child .sell__paper { transform: rotate(5deg); }
.sell__pair figcaption { font-family: var(--f-mono); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--dark-muted); }
.sell__arrow { font-size: 2rem; color: var(--sticker); }

/* Services with paper pop-ups */
.svc { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); border-top: 2px solid var(--ink); }
@media (min-width: 800px) { .svc { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 52px; } }
.svc li { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: baseline; padding: 19px 92px 20px 0; border-bottom: 1px solid var(--rule); }
.svc p { grid-column: 1 / -1; color: var(--muted); font-size: 1rem; }
.svc .tag { font-family: var(--f-mono); font-size: .74rem; color: var(--muted); white-space: nowrap; }
.svc li.svc__hard { background: var(--sticker-soft); padding-left: 14px; }
.svc li.svc__hard p { color: var(--ink); }
.peek { position: absolute; right: 8px; top: -26px; bottom: 0; width: 80px; pointer-events: none; clip-path: inset(-40px -40px 0 -40px); }
.peek svg { position: absolute; left: 4px; bottom: -6px; width: 72px; height: 92px; overflow: visible; transform-origin: 50% 100%; transform: translateY(112%) rotate(9deg); transition: transform .35s cubic-bezier(.5, 0, .75, 0); }
.peek .sway { transform-box: fill-box; transform-origin: 50% 100%; }
.svc li:hover .peek svg, .svc li.is-up .peek svg { transform: translateY(0) rotate(-5deg); transition: transform .85s cubic-bezier(.34, 1.56, .64, 1); }
.svc li:hover .peek .sway, .svc li.is-up .peek .sway { animation: sway 2.6s .85s ease-in-out infinite; }
@keyframes sway { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(3.5deg); } }
@media (max-width: 600px) {
  .svc li { padding-right: 70px; grid-template-columns: minmax(0, 1fr); }
  .peek { width: 64px; right: 2px; }
  .peek svg { width: 58px; height: 74px; }
}

/* What to bring */
.tabs-wrap { min-width: 0; }
.tabs { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; margin-bottom: 24px; }
.tabs::-webkit-scrollbar { display: none; }
.tabs button {
  appearance: none; flex: none; cursor: pointer;
  padding: 10px 16px; border: 1.5px solid var(--rule); border-radius: 999px; background: var(--card); color: var(--ink);
  font-family: var(--f-body); font-weight: 700; font-size: .98rem; white-space: nowrap;
}
.tabs button:hover { border-color: var(--ink); }
.tabs button[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.panel { display: grid; gap: 20px; }
@media (min-width: 880px) { .panel { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 32px; align-items: start; } }
.check { list-style: none; background: var(--card); border: 1px solid var(--rule); border-radius: 16px; padding: 4px 20px; }
.check li { border-bottom: 1px solid var(--rule); }
.check li:last-child { border-bottom: 0; }
.ck {
  appearance: none; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 14px; width: 100%;
  padding: 15px 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.ck::before {
  content: ""; width: 26px; height: 26px; border: 2.5px solid var(--ink); border-radius: 7px; background: var(--bg);
  background-position: center; background-repeat: no-repeat; background-size: 16px;
  transition: background-color .15s ease, border-color .15s ease, transform .2s cubic-bezier(.34, 1.56, .64, 1);
}
.ck[aria-checked="true"]::before {
  background-color: var(--fill); border-color: var(--fill); transform: scale(1.08);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.ck:hover::before { border-color: var(--accent); }
.ck__t { font-weight: 700; }
.ck small { display: block; margin-top: 2px; color: var(--muted); font-size: .92rem; font-weight: 400; }
.opt { opacity: .62; }
.ck--opt { cursor: default; }
.ck--opt::before { border-style: dashed; border-color: var(--muted); }
.ck--opt .ck__t { font-weight: 400; }
.ck--opt em { display: block; margin-bottom: 2px; font-style: normal; font-family: var(--f-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.panel__side { display: grid; gap: 16px; min-width: 0; }
.note { display: grid; gap: 6px; padding: 20px 22px; background: var(--sticker-soft); border: 1.5px solid var(--sticker); border-radius: 16px; }
.note .eyebrow { color: var(--ink); }

/* The paper stack: each checked item drops a paper here; all required items → stamp */
.stack {
  --sz: 120px; --spread: 1;
  position: relative; display: grid; justify-items: center; align-content: end; gap: 10px;
  min-height: 330px; padding: 18px 16px 16px; overflow: hidden;
  background: var(--card); border: 2px dashed var(--rule); border-radius: 16px;
}
@media (max-width: 480px) { .stack { --sz: 104px; --spread: .78; } }
.stack__pile { position: relative; width: 100%; height: 250px; }
.sp {
  position: absolute; width: var(--sz); height: var(--sz);
  left: calc(50% + var(--x) * var(--spread) * 1px - var(--sz) / 2); top: calc(var(--y) * 1px);
  transform: rotate(var(--r)); animation: drop .55s cubic-bezier(.3, 1.5, .5, 1) both;
  transition: left .35s ease, top .35s ease, transform .35s ease;
}
.sp > svg { display: block; width: 100%; height: 100%; overflow: visible; }
.sp.out { animation: lift .3s ease-in both; }
@keyframes drop { from { opacity: 0; transform: translateY(-80px) rotate(calc(var(--r) * -3)); } to { opacity: 1; transform: rotate(var(--r)); } }
@keyframes lift { to { opacity: 0; transform: translateY(-40px) rotate(var(--r)); } }
.stack__stamp {
  position: absolute; z-index: 2; top: 26%; left: 50%; padding: 6px 18px;
  border: 4px solid #C8202F; border-radius: 8px; background: rgba(255, 253, 246, .9); color: #C8202F;
  font-family: var(--f-display); font-weight: 800; font-stretch: 112%; font-size: 2rem; letter-spacing: .14em;
  opacity: 0; transform: translateX(-50%) rotate(-12deg); pointer-events: none;
}
.stack.is-done .stack__stamp { animation: slam2 .5s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes slam2 { 0% { opacity: 0; transform: translateX(-50%) scale(2.2) rotate(-18deg); } 60% { opacity: 1; transform: translateX(-50%) scale(.92) rotate(-12deg); } 100% { opacity: 1; transform: translateX(-50%) rotate(-12deg); } }
.stack__msg { text-align: center; font-weight: 700; }
.stack.is-done .stack__msg { color: var(--open); }
.stack__msg small { display: block; font-family: var(--f-mono); font-weight: 400; font-size: .78rem; color: var(--muted); }

/* Dealers */
.dealer { position: relative; display: grid; gap: 28px; padding: 32px 28px; background: var(--card); border: 1.5px solid var(--rule); border-radius: 20px; overflow: hidden; }
@media (min-width: 880px) { .dealer { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 48px; padding: 44px 48px; align-items: center; } }
.dealer__copy { display: grid; gap: 14px; min-width: 0; }
.dealer__copy > p { color: var(--muted); max-width: 32rem; }
.dealer__list { list-style: none; border-top: 1px solid var(--rule); position: relative; z-index: 1; }
.dealer__list li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.dealer__list li::before { content: ""; width: 12px; height: 7px; margin: 8px 0 0 4px; border-left: 3px solid var(--accent); border-bottom: 3px solid var(--accent); transform: rotate(-45deg); }
.dealer__paper { position: absolute; right: -10px; bottom: -34px; width: 120px; height: 153px; opacity: .9; transform: rotate(10deg); pointer-events: none; }
.dealer__paper svg { width: 100%; height: 100%; }
@media (max-width: 879px) { .dealer__paper { display: none; } }
@media (min-width: 880px) { .dealer__list { margin-right: 76px; } }

/* VIN */
.vin__in { display: grid; gap: 36px; }
@media (min-width: 920px) { .vin__in { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 56px; align-items: start; } }
.vin__copy { display: grid; gap: 14px; min-width: 0; }
.vin__copy p { color: var(--muted); }
.vtool { display: grid; gap: 14px; min-width: 0; padding: 24px 22px; background: var(--card); border: 1px solid var(--rule); border-radius: 16px; }
.vtool__head { display: grid; gap: 6px; }
.vtool__head p { color: var(--muted); font-size: 1rem; }
.vtool label { font-family: var(--f-mono); font-size: .76rem; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }
.vtool__row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.vtool input { flex: 1 1 15rem; min-width: 0; padding: 12px 14px; border: 2px solid var(--ink); border-radius: 10px; background: var(--bg); color: var(--ink); font-family: var(--f-mono); font-size: 1.1rem; letter-spacing: .1em; text-transform: uppercase; }
.vtool input::placeholder { color: var(--muted); opacity: .7; letter-spacing: .06em; }
.linkbtn { appearance: none; background: none; border: 0; padding: 4px 0; cursor: pointer; font: inherit; font-size: .95rem; font-weight: 700; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.cells { display: grid; grid-template-columns: repeat(17, minmax(0, 1fr)); gap: 3px; }
.cell { aspect-ratio: 3 / 4; max-width: 100%; display: grid; place-items: center; border: 1px solid var(--rule); border-radius: 3px; background: var(--bg); font-family: var(--f-mono); font-size: clamp(.66rem, 2.3vw, 1rem); font-weight: 500; }
.cell.is-filled { border-color: var(--muted); }
.cell.is-check { border: 2px solid var(--ink); }
.cell.is-ok { border-color: var(--open); color: var(--open); }
.cell.is-bad { border-color: var(--accent); color: var(--accent); }
.legend { display: flex; flex-wrap: wrap; gap: 4px 16px; font-family: var(--f-mono); font-size: .74rem; color: var(--muted); }
.legend b { color: var(--ink); font-weight: 500; }
.vres { display: grid; gap: 6px; min-height: 3.4em; padding-top: 6px; border-top: 1px solid var(--rule); }
.vres[data-state="ok"] strong { color: var(--open); }
.vres[data-state="bad"] strong { color: var(--accent); }
.vres .facts { display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: .95rem; }
.vres .facts span { color: var(--muted); }
.fine { font-size: .88rem; color: var(--muted); }

/* Fees */
.fees__in { display: grid; gap: 40px; }
@media (min-width: 920px) { .fees__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; align-items: center; } }
.fees__copy { display: grid; gap: 16px; min-width: 0; }
.fees__copy > p { color: var(--muted); }
.fees__copy .disclose { font-size: .95rem; font-weight: 700; color: var(--ink); }
.links { display: flex; flex-wrap: wrap; gap: 8px 22px; font-weight: 700; font-size: .98rem; }
.receipt { justify-self: center; width: 100%; max-width: 25rem; padding: 26px 24px 30px; background: #FFFDF6; color: #1E1A1D; border: 1px solid #E6DCD0; box-shadow: 0 22px 44px -30px var(--shadow); font-family: var(--f-mono); font-size: .88rem; transform: rotate(1.2deg); }
.receipt__top { text-align: center; display: grid; gap: 2px; padding-bottom: 14px; border-bottom: 1.5px dashed #8C8086; }
.receipt__top b { font-weight: 500; letter-spacing: .06em; }
.receipt__top span, .rline small { color: #6A6065; font-size: .78rem; }
.rline { display: grid; gap: 2px; padding: 16px 0; border-bottom: 1.5px dashed #8C8086; }
.rline__row { display: flex; justify-content: space-between; gap: 12px; font-weight: 500; }
.rline__row span:last-child { text-align: right; }
.receipt__foot { padding-top: 14px; text-align: center; letter-spacing: .06em; text-transform: uppercase; font-size: .76rem; color: #B3122E; }

/* Reviews */
.reviews { background: var(--sticker-soft); border-block: 1.5px solid var(--sticker); padding-block: 44px; }
.reviews__in { display: grid; gap: 20px; align-items: center; }
.reviews__in > div:first-child { display: grid; gap: 8px; }
.reviews__in p { color: var(--muted); }
@media (min-width: 860px) { .reviews__in { grid-template-columns: minmax(0, 1fr) auto; gap: 40px; } }

/* Visit */
.visit__in { display: grid; gap: 36px; }
@media (min-width: 900px) { .visit__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: start; } }
.visit__info { display: grid; gap: 14px; justify-items: start; min-width: 0; }
.visit__addr { font-size: 1.3rem; font-weight: 700; line-height: 1.35; }
.visit__unit { color: var(--muted); }
.hours__h { margin-top: 12px; }
.hours { border-collapse: collapse; width: 100%; max-width: 26rem; font-variant-numeric: tabular-nums; }
.hours th, .hours td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--rule); font-weight: 400; }
.hours td { text-align: right; }
.hours tr.is-today th, .hours tr.is-today td { font-weight: 700; background: var(--sticker-soft); }
.visit__side { display: grid; gap: 12px; min-width: 0; }
.visit__pic { border-radius: 20px; overflow: hidden; border: 1px solid var(--rule); min-width: 0; background: var(--soft); }
.visit__map { display: block; width: 100%; max-width: 100%; aspect-ratio: 4 / 3; border: 0; }
.visit__drawn { position: relative; }
.visit__mapnote { position: absolute; left: 12px; right: 12px; bottom: 12px; padding: 8px 12px; border-radius: 10px; background: var(--card); font-size: .88rem; color: var(--muted); text-align: center; }
.visit__maplink { justify-self: start; font-weight: 700; color: var(--accent); }
.visit__photo { display: block; width: 100%; height: auto; border-radius: 20px; }
.door { display: block; width: 100%; height: auto; }
.door__wall { fill: var(--soft); }
.door__awning { fill: var(--fill); }
.door__frame { fill: var(--ink); }
.door__glass { fill: color-mix(in srgb, var(--card) 70%, #9CC3D6); }
.door__num { font-family: var(--f-display); font-weight: 800; font-size: 22px; fill: var(--ink); }
.door__knob { fill: var(--sticker); }
.door__step { fill: var(--desk-edge); }
.cherry-line { display: flex; align-items: center; gap: 10px; margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--rule); color: var(--muted); font-size: .95rem; }
.cherry { width: 28px; height: 28px; flex: none; }

/* Footer */
.ftr { background: var(--soft); border-top: 1px solid var(--rule); padding-block: 36px 112px; font-size: .92rem; color: var(--muted); }
@media (min-width: 720px) { .ftr { padding-bottom: 40px; } }
.ftr__in { display: grid; gap: 20px; }
@media (min-width: 880px) { .ftr__in { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 56px; } }
.ftr__in > div { display: grid; gap: 10px; align-content: start; }
.ftr nav { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.ftr strong { color: var(--ink); }

/* Mobile call bar */
.callbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; display: flex; gap: 10px;
  padding: 10px max(16px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  background: var(--bg); border-top: 1px solid var(--rule);
}
.callbar .btn { flex: 1 1 0; }
@media (min-width: 720px) { .callbar { display: none; } }

/* Each section does one small thing as it scrolls into view, so the eye keeps moving down.
   Everything is already visible before that; the motion only draws attention. */
@keyframes nudge { 0%, 100% { transform: none; } 40% { transform: translateY(-6px) scale(1.03); } 70% { transform: translateY(1px); } }
@keyframes wiggle { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-2.5deg); } 40% { transform: rotate(2deg); } 60% { transform: rotate(-1.2deg); } 80% { transform: rotate(.6deg); } }
@keyframes pop-in { 0% { transform: scale(.82) rotate(var(--rot, 0deg)); } 60% { transform: scale(1.07) rotate(var(--rot, 0deg)); } 100% { transform: scale(1) rotate(var(--rot, 0deg)); } }
@keyframes ring { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); } 100% { box-shadow: 0 0 0 14px transparent; } }
@keyframes slide-in { from { transform: translate(60px, 40px) rotate(24deg); } to { transform: rotate(10deg); } }
@keyframes swing { 0% { transform: rotate(9deg); } 55% { transform: rotate(-1.5deg); } 100% { transform: rotate(1.2deg); } }
@keyframes cellwave { 0%, 100% { transform: none; background: var(--bg); } 40% { transform: translateY(-5px); background: var(--sticker-soft); } }
.picker.seen .pick { animation: nudge .6s calc(var(--n, 0) * 80ms) ease-out both; }
.picker.seen .pick--unknown { animation: wiggle .8s .7s ease-in-out both; }
.sell.seen .sell__pair figure:first-child .sell__paper { --rot: -6deg; animation: pop-in .6s .15s cubic-bezier(.3, 1.5, .5, 1) both; }
.sell.seen .sell__pair figure:last-child .sell__paper { --rot: 5deg; animation: pop-in .6s .45s cubic-bezier(.3, 1.5, .5, 1) both; }
.sell.seen .sell__arrow { animation: nudge .5s .9s ease-out both; }
#bring.seen .stack { animation: nudge .6s .3s ease-out both; }
#bring.seen .panel:not([hidden]) li:first-child .ck::before { animation: ring 1s .8s ease-out 2; }
#dealers.seen .dealer__paper { animation: slide-in .8s .2s cubic-bezier(.3, 1.4, .5, 1) both; }
#vin.seen .cell { animation: cellwave .5s calc(var(--n, 0) * 45ms + .2s) ease-out both; }
#fees.seen .receipt { animation: swing .9s .2s cubic-bezier(.3, 1.4, .5, 1) both; }
.reviews.seen .btn--call { animation: nudge .55s .3s ease-out 2; }
#visit.seen .status__dot { animation: ring 1.1s .3s ease-out 3; }
#visit.seen .cherry { animation: wiggle .8s .5s ease-in-out both; transform-origin: 50% 10%; }

/* Thick arrow from "Se habla español" to the Español button (English page, once per visit) */
.es-thick { position: absolute; left: 0; top: 0; z-index: 22; pointer-events: none; overflow: visible; transition: opacity .5s ease; }
.es-thick.gone { opacity: 0; }
.es-thick__body { fill: none; stroke: var(--sticker); stroke-width: 30; stroke-linecap: round; }
.es-thick__head { fill: var(--sticker); }
.es-thick__text { font-family: var(--f-body); font-weight: 700; font-size: 14px; fill: var(--on-sticker); opacity: 0; }
.es-thick.in .es-thick__body { animation: draw 1s .25s cubic-bezier(.45, .05, .3, 1) both; }
.es-thick.in .es-thick__head { transform-box: fill-box; transform-origin: 50% 0%; animation: head-pop .4s 1.15s cubic-bezier(.3, 1.8, .5, 1) both; }
.es-thick.in .es-thick__text { animation: fade-in .35s 1.2s ease-out both; }
@keyframes head-pop { from { transform: scale(0); } to { transform: none; } }
@keyframes fade-in { to { opacity: 1; } }

/* Preview only: phone links can't dial inside the private preview, so a note appears instead */
.toast {
  position: fixed; z-index: 45; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  width: max-content; max-width: calc(100vw - 32px); padding: 12px 16px; border-radius: 12px;
  background: var(--ink); color: var(--bg); font-weight: 700; text-align: center;
  transform: translateX(-50%); animation: toast-in .25s ease-out both;
}
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 10px); } }

/* First-visit Spanish pop-up (English page) */
.es-tip {
  position: fixed; z-index: 41; width: min(330px, calc(100vw - 32px));
  padding: 18px 18px 14px; border-radius: 18px;
  background: #FFF6CF; color: #2B2200; border: 2px solid #E8B400;
  box-shadow: 0 24px 48px -20px rgba(0, 0, 0, .45);
  transform-origin: 85% 0%;
}
.es-tip.in { animation: tip-pop .5s cubic-bezier(.3, 1.5, .5, 1) both; }
@keyframes tip-pop { from { opacity: 0; transform: translateY(14px) scale(.85); } to { opacity: 1; transform: none; } }
.es-tip__x {
  position: absolute; top: 8px; right: 8px; width: 34px; height: 34px; border-radius: 50%;
  border: 1.5px solid #C9A100; background: #FFFFFF; color: #2B2200; font-size: 1.3rem; line-height: 1; cursor: pointer;
}
.es-tip__x:hover { background: #FFE9A0; }
.es-tip__body { display: grid; gap: 6px; padding-right: 34px; text-decoration: none; color: inherit; }
.es-tip__body strong { font-family: var(--f-display); font-weight: 800; font-stretch: 110%; font-size: 1.35rem; line-height: 1.1; }
.es-tip__go { margin-top: 4px; justify-self: start; padding: 8px 14px; border-radius: 10px; background: #B3122E; color: #FFFFFF; font-weight: 700; }
.es-tip__body:hover .es-tip__go { background: #9A0F27; }
.es-tip__en { margin-top: 12px; padding-top: 10px; border-top: 1px solid #E8C94A; font-size: .9rem; color: #5A4A12; }
.es-arrow { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 40; pointer-events: none; overflow: visible; }
.es-arrow path { fill: none; stroke: #E8A200; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.es-arrow__head { opacity: 0; }
.es-arrow.in .es-arrow__line { animation: draw .75s .45s ease-out both; }
.es-arrow.in .es-arrow__head { animation: aim .45s 1.15s cubic-bezier(.3, 1.8, .5, 1) both; }
@keyframes draw { from { stroke-dashoffset: var(--len); } to { stroke-dashoffset: 0; } }
@keyframes aim { 0% { opacity: 0; transform: translate(var(--bx), var(--by)); } 60% { opacity: 1; transform: translate(calc(var(--ax) * 1px), calc(var(--ay) * 1px)); } 100% { opacity: 1; transform: none; } }
#lang-btn.pulse { animation: btn-pulse 1s 1.4s ease-out 2; }
@keyframes btn-pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 212, 59, .8); } 100% { box-shadow: 0 0 0 12px rgba(255, 212, 59, 0); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero h1 .u, .pile__btn.play .pp, .pile__btn.play .pile__stamp, .pile__btn.play .pile__stack,
  .tk.play .tk__feed, .tk.play .tk__tear, .es-tip.in, .es-arrow.in path, #lang-btn.pulse { animation: none !important; }
  .es-arrow__head { opacity: 1; }
  .plate__card { transition: none; }
  .peek svg, .svc li:hover .peek svg, .svc li.is-up .peek svg { transform: rotate(-5deg); transition: opacity .25s; opacity: 0; }
  .svc li:hover .peek svg, .svc li.is-up .peek svg { opacity: 1; }
  .svc li:hover .peek .sway, .svc li.is-up .peek .sway { animation: none; }
  .pick, .pick__icon svg, .ck::before { transition: none; }
  .sp, .sp.out, .stack.is-done .stack__stamp, .toast { animation: none; }
  .env__flap, .env__flap2, .env__paper { transition: none; }
  [data-pop].seen *, .es-thick, .es-thick * { animation: none !important; }
  .es-thick__text { opacity: 1; }
  .tk.armed:not(.seen) mark.hl { background-size: 100% 100%; }
  .stack.is-done .stack__stamp { opacity: 1; }
}