/* thalaria.org. Palette and type follow the iOS apps (TalariaUI: Palette.swift, Typography.swift):
   «Marfil» by day, «Noche» at night; night, bone and gold stay fixed in both.
   Motion: boot.js marks <html> with .js, and with .motion unless the visitor asked for reduced
   motion. Everything hidden or pinned for an animation is gated on those classes, so the page
   reads complete without scripts and still with «reducir movimiento». */

@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/CormorantGaramond-Regular.woff2) format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 400; font-display: swap; src: url(/assets/fonts/CormorantGaramond-Italic.woff2) format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/CormorantGaramond-Medium.woff2) format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 500; font-display: swap; src: url(/assets/fonts/CormorantGaramond-MediumItalic.woff2) format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/CormorantGaramond-SemiBold.woff2) format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/fonts/Manrope-Regular.woff2) format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 500; font-display: swap; src: url(/assets/fonts/Manrope-Medium.woff2) format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 600; font-display: swap; src: url(/assets/fonts/Manrope-SemiBold.woff2) format('woff2'); }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/fonts/Manrope-Bold.woff2) format('woff2'); }

/* Animated custom properties: the street drawing and the reading progress. */
@property --draw { syntax: '<number>'; inherits: true; initial-value: 0; }

:root {
  --paper: #f6f3ec;
  --surface: #fcfaf5;
  --cream: #eeeadf;
  --wash: #f3efe8;
  --ink: #282c27;
  --muted: #5f6157;
  --line: #dfdcd1;
  --gold: #8d754e;
  --gold-deep: #9d762f;
  --olive: #626f52;
  --wine: #7a1226;
  --pending-bg: #fbe9c8;
  --pending-ink: #6b4708;

  --night: #14110f;
  --night-2: #1e1a16;
  --night-3: #2a241c;
  --bone: #fbf3e2;
  --bone-muted: #c9bc9d;
  --bone-faint: #a89a7c;
  --gold-bright: #e6bd62;
  --gold-highlight: #e8cc87;
  --gold-shade: #b98a35;
  --gold-grad: linear-gradient(120deg, #e6bd62 0%, #b98a35 45%, #e6bd62 100%);
  --olive-bright: #9db07a;

  --serif: 'Cormorant Garamond', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --gutter: clamp(16px, 5vw, 56px);
  --measure: 70ch;
  --radius: 18px;
  --shadow: 0 30px 60px -36px rgba(40, 30, 10, 0.35);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #12100e;
    --surface: #1d1a17;
    --cream: #35312c;
    --wash: #262320;
    --ink: #f2eadb;
    --muted: #c2b7a3;
    --line: #3d362f;
    --gold: #d9b46a;
    --gold-deep: #e0b866;
    --olive: #9db07a;
    --wine: #d7798a;
    --pending-bg: #4a3612;
    --pending-ink: #f3d79b;
    --shadow: 0 30px 60px -36px rgba(0, 0, 0, 0.8);
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
/* The page behind header and footer is night: Safari on iPhone tints its bars from the body, not
   from theme-color, and the overscroll at either end then matches the header and the footer. */
body {
  margin: 0;
  background: var(--night);
  color: var(--ink);
  font: 400 17px/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
main { background: var(--paper); }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; line-height: 1.05; margin: 0; letter-spacing: -0.015em; }
h1 em, h2 em, h3 em { font-style: italic; color: var(--gold); }
p { margin: 0 0 1em; }
::selection { background: #e6bd6255; }

.container { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 var(--gutter); }
.visually-hidden, .sprite { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--gold-bright); color: var(--night); padding: 10px 16px; border-radius: 8px; font-weight: 700; }
.skip-link:focus { top: 12px; }

.eyebrow {
  display: flex; align-items: center; gap: 14px;
  margin: 0 0 22px;
  font: 600 12px/1.4 var(--sans);
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--gold);
}
.eyebrow a { text-decoration: none; }
.eyebrow-rule { width: 34px; height: 1px; background: currentColor; flex: none; }

.button {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 26px;
  border-radius: 999px; border: 1px solid transparent;
  font: 600 15px/1 var(--sans); text-decoration: none; white-space: nowrap;
  transition: transform .3s var(--ease-out), filter .2s ease, background-color .2s ease, translate .5s var(--ease-out);
}
.button:hover { transform: translateY(-1px); }
.button::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg, transparent 35%, #ffffff55 50%, transparent 65%) -150% 0 / 250% 100% no-repeat;
  transition: background-position 0s;
}
.button:hover::after { background-position: 150% 0; transition: background-position .9s var(--ease-out); }
.button-gold { background: var(--gold-grad); color: var(--night); box-shadow: 0 12px 30px -14px #a9782a; }
.button-gold:hover { filter: brightness(1.06); }
.button-ghost { border-color: #b98a3588; color: var(--bone); }
.button-ghost:hover { background-color: #b98a3522; }
.button-ghost::after, .button-outline::after { background-image: linear-gradient(105deg, transparent 35%, #e6bd6233 50%, transparent 65%); }
.button-outline { border-color: var(--gold); color: var(--gold); }
.button-outline:hover { background-color: color-mix(in srgb, var(--gold) 10%, transparent); }
.button-quiet { border-color: var(--line); color: var(--muted); font-weight: 500; white-space: normal; text-align: center; }
.button-quiet::after { display: none; }
.text-link { font-weight: 600; color: var(--gold); }

/* ── Header ─────────────────────────────────────────────── */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(20, 17, 15, 0.94);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid #b98a3540;
  color: var(--bone);
  transition: transform .55s var(--ease-out), box-shadow .3s;
  view-transition-name: site-header;
}
.site-header::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1.5px;
  background: var(--gold-grad); transform-origin: left; transform: scaleX(var(--read, 0));
}
.site-header.is-scrolled { box-shadow: 0 14px 40px -24px #000; }
.motion .site-header.is-hidden { transform: translateY(-101%); }
.header-inner { display: flex; align-items: center; justify-content: space-between; min-height: 76px; gap: 24px; }
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.brand-mark { width: 50px; height: auto; transform-origin: 70% 60%; }
.brand:hover .brand-mark { animation: flutter .9s var(--ease-out); }
.brand-name { display: flex; flex-direction: column; font: 500 26px/1 var(--serif); letter-spacing: 0.24em; }
.brand-name small { margin-top: 6px; font: 500 9.5px/1 var(--sans); letter-spacing: 0.22em; text-transform: uppercase; color: var(--bone-faint); }
.site-nav { display: flex; align-items: center; gap: 30px; font-size: 14.5px; }
.site-nav a { position: relative; text-decoration: none; color: var(--bone-muted); transition: color .2s; }
.site-nav a:not(.nav-support)::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px;
  background: var(--gold-bright); transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease-out);
}
.site-nav a:hover, .site-nav a.is-current { color: var(--gold-bright); }
.site-nav a:hover::after, .site-nav a.is-current::after { transform: scaleX(1); transform-origin: left; }
.site-nav .nav-support { padding: 9px 18px; border: 1px solid #b98a3588; border-radius: 999px; color: var(--bone); transition: background-color .2s, color .2s; }
.site-nav .nav-support:hover { background: #b98a3522; }
.nav-toggle { display: none; }
@keyframes flutter { 30% { transform: rotate(-9deg) translateY(-2px); } 60% { transform: rotate(5deg); } }

@media (max-width: 860px) {
  .brand-name small { display: none; }
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; border: 1px solid #b98a3566; border-radius: 12px; background: none; color: var(--bone); cursor: pointer;
  }
  .nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after { display: block; width: 18px; height: 1.5px; background: currentColor; position: relative; transition: transform .25s; }
  .nav-toggle-bars::before, .nav-toggle-bars::after { content: ''; position: absolute; left: 0; }
  .nav-toggle-bars::before { top: -6px; } .nav-toggle-bars::after { top: 6px; }
  [aria-expanded="true"] .nav-toggle-bars { background: transparent; }
  [aria-expanded="true"] .nav-toggle-bars::before { transform: translateY(6px) rotate(45deg); }
  [aria-expanded="true"] .nav-toggle-bars::after { transform: translateY(-6px) rotate(-45deg); }
  .site-nav {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px var(--gutter) 22px; background: var(--night);
    border-bottom: 1px solid #b98a3540;
    display: none;
  }
  .site-nav.is-open { display: flex; animation: menu-in .45s var(--ease-out); }
  .site-nav.is-open a { animation: rise .5s var(--ease-out) both; }
  .site-nav.is-open a:nth-child(2) { animation-delay: .04s; }
  .site-nav.is-open a:nth-child(3) { animation-delay: .08s; }
  .site-nav.is-open a:nth-child(4) { animation-delay: .12s; }
  .site-nav.is-open a:nth-child(5) { animation-delay: .16s; }
  .site-nav a { padding: 14px 0; border-bottom: 1px solid #ffffff12; font-size: 17px; }
  .site-nav a:not(.nav-support)::after { display: none; }
  .site-nav .nav-support { margin-top: 16px; text-align: center; border-bottom: 1px solid #b98a3588; }
}
@keyframes menu-in { from { opacity: 0; transform: translateY(-8px); } }

/* ── Split headings: words rise out of a mask ───────────── */

.split .word { display: inline-block; overflow: hidden; vertical-align: top; padding: .08em .1em .18em; margin: -.08em -.1em -.18em; }
.split .word-inner { display: inline-block; }
.motion [data-split]:not(.split), .motion .legal-hero h1:not(.split), .motion .missing h1:not(.split) { opacity: 0; }
.motion .split .word-inner { transform: translateY(112%) rotate(5deg); transform-origin: 0 100%; transition: transform 1.1s var(--ease-out) calc(var(--i, 0) * 55ms + var(--split-delay, 0s)); }
.motion .split.is-visible .word-inner { transform: none; }

/* ── Hero ───────────────────────────────────────────────── */

.hero {
  position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, var(--night) 0%, var(--night-2) 100%);
  color: var(--bone);
  padding: clamp(44px, 6vw, 84px) 0 clamp(64px, 7vw, 104px);
}
.dust { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }
.hero-glow {
  position: absolute; inset: 0; z-index: -2;
  background: radial-gradient(ellipse 55% 60% at calc(74% + var(--px, 0) * 4%) calc(48% + var(--py, 0) * 4%), #4a3a20 0%, #2a2116 38%, transparent 72%);
}
.hero-watermark {
  position: absolute; z-index: -1; left: -6%; bottom: -16%; width: min(62vw, 820px); opacity: 0.06; pointer-events: none;
  transform: translateY(calc(var(--hs, 0) * -60px)) rotate(calc(var(--hs, 0) * 6deg));
}
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr); align-items: center; gap: clamp(32px, 5vw, 72px); }
.hero-copy { translate: 0 calc(var(--hs, 0) * 70px); opacity: calc(1 - var(--hs, 0) * 1.1); }
.hero .eyebrow { color: var(--gold-bright); }
.hero h1 { font-size: clamp(52px, 7vw, 104px); line-height: 0.94; letter-spacing: -0.025em; text-wrap: balance; --split-delay: .15s; }
.hero h1 em { display: block; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: 0.08em; }
.hero h1.split em { background: none; }
.hero h1.split em .word-inner {
  background: linear-gradient(110deg, #e6bd62 0%, #b98a35 30%, #f7de97 45%, #b98a35 60%, #e6bd62 100%) 0 0 / 300% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.motion .hero h1.split em .word-inner { animation: shimmer 7s linear calc(1.8s + var(--i, 0) * .14s) infinite; }
.hero-lede { max-width: 33ch; margin: 30px 0 36px; font: 400 clamp(21px, 2.1vw, 26px)/1.4 var(--serif); color: #efe3c8; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.hero-facts { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 40px 0 0; padding: 0; list-style: none; font-size: 13.5px; color: var(--bone-faint); }
.hero-facts li { display: flex; align-items: center; gap: 9px; }
.hero-facts li::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--gold-bright); box-shadow: 0 0 10px var(--gold-bright); }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -200% 0; } }

.motion .hero-copy .eyebrow { animation: rise 1s var(--ease-out) both; }
.motion .hero-copy .eyebrow-rule { transform-origin: left; animation: grow-x 1.2s var(--ease-out) .1s both; }
.motion .hero-lede { animation: rise 1.2s var(--ease-out) .75s both; }
.motion .hero-actions { animation: rise 1.2s var(--ease-out) .9s both; }
.motion .hero-facts li { animation: rise 1s var(--ease-out) both; }
.motion .hero-facts li:nth-child(1) { animation-delay: 1.05s; }
.motion .hero-facts li:nth-child(2) { animation-delay: 1.13s; }
.motion .hero-facts li:nth-child(3) { animation-delay: 1.21s; }
@keyframes rise { from { opacity: 0; transform: translateY(26px); } }
@keyframes grow-x { from { transform: scaleX(0); } }

.store-pill {
  display: inline-flex; flex-direction: column; justify-content: center;
  min-height: 56px; padding: 8px 24px;
  border-radius: 14px; background: var(--bone); color: var(--night);
  box-shadow: 0 14px 34px -18px #000;
}
.store-pill-kicker { font: 600 10.5px/1.2 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: #8d754e; }
.store-pill-main { font: 600 19px/1.15 var(--sans); letter-spacing: -0.01em; }

/* One iPhone tells an order from the home screen to the door, under the four words of the story. */
.hero-stage { position: relative; display: grid; justify-items: center; gap: 34px; justify-self: center;
  translate: calc(var(--px, 0) * -8px) calc(var(--hs, 0) * -70px); }
.stage-halo {
  position: absolute; inset: -6% -40% 10%; z-index: -1; border-radius: 50%;
  background: radial-gradient(ellipse 50% 50%, #e6bd6230, #a9782a12 55%, transparent 72%); filter: blur(12px);
  translate: calc(var(--px, 0) * -24px) calc(var(--py, 0) * -18px);
}
.motion .stage-halo { animation: bloom 2.2s var(--ease-out) .2s both, breathe 7s ease-in-out 2.4s infinite; }
.hero-phone { width: clamp(248px, min(25vw, 35svh), 336px);
  transform: perspective(1800px) rotateY(calc(var(--px, 0) * -9deg)) rotateX(calc(var(--py, 0) * 6deg)); }
.motion .hero-phone { animation: phone-rise 1.6s var(--ease-out) .25s both, phone-float 8s ease-in-out 2s infinite; }
.stage-shadow { position: absolute; z-index: -1; left: 50%; top: calc(100% - 92px); width: 300px; height: 40px; translate: -50% 0;
  border-radius: 50%; background: radial-gradient(ellipse, #000000b3, transparent 70%); filter: blur(6px); }
.hero-steps { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin: 0; padding: 0; list-style: none;
  font: 600 11px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--bone-faint); }
.hero-steps li { display: flex; align-items: center; gap: 9px; transition: color .6s; }
.hero-steps li::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .55; transition: opacity .6s, box-shadow .6s; }
.hero-steps li.is-active { color: var(--gold-bright); }
.hero-steps li.is-active::before { opacity: 1; box-shadow: 0 0 10px var(--gold-bright); }
.motion .hero-steps { animation: rise 1s var(--ease-out) 1.3s both; }
@keyframes phone-rise { from { opacity: 0; translate: 0 120px; } }
@keyframes phone-float { 50% { translate: 0 -10px; } }
@keyframes bloom { from { opacity: 0; transform: scale(.6); } }
@keyframes breathe { 50% { opacity: .7; transform: scale(1.05); } }

@keyframes ring-burst { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(7); } }

/* App icons («Línea clásica», partials/app-icons.html), stroked as TIcon draws them. */
.i { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }

/* Street symbol: colours, widths and dashes come from the <use> through custom properties. */
.street-minor, .street-major { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: var(--street-dash, none); stroke-dashoffset: calc(var(--draw, 0) * 1200); }
.street-minor { stroke: var(--minor-color, currentColor); stroke-width: var(--minor-width, 1.3px); opacity: var(--minor-opacity, .5); }
.street-major { stroke: var(--major-color, currentColor); stroke-width: var(--major-width, 3px); opacity: var(--major-opacity, .9); }
/* Colours of the map markers (partials/map-icons.html): classes, not style attributes, which the
   site's Content-Security-Policy refuses. */
.pin-business-fill { fill: var(--pin-business, #14110f); }
.pin-business-glyph { stroke: var(--pin-business-glyph, #d4af62); }
.pin-home-fill { fill: var(--pin-home, #9d762f); }
.pin-home-glyph { stroke: var(--pin-home-glyph, #14110f); }
.courier-fill { fill: var(--courier, #626f52); }
/* Pins and the courier come from partials/map-icons.html in the apps' day tones; a map on night
   switches to their night tones, as the apps do in dark mode. */
.tour-map, .combo-map { --pin-home: #e0b866; --courier: #9db07a; }

/* ── iPhone 16: the phone the apps are made on ────────────
   Measured from the device: body 71.6 × 147.6 mm, aluminium rim, black glass, a 393 × 852 pt
   screen with 55 pt corners and the Dynamic Island (126 × 37 pt, 11 pt from the top), which stays
   above whatever the app shows. */
.iphone { position: relative; margin: 0; aspect-ratio: 71.6 / 147.6; padding: 1.9%; border-radius: 17.6% / 8.55%;
  background: linear-gradient(140deg, #4a4b4e 0%, #2a2b2d 18%, #3d3e41 48%, #232426 78%, #3a3b3e 100%);
  box-shadow: inset 0 0 0 1px #6b6c70, inset 0 0 1px 2px #1a1a1b, 0 60px 90px -40px #000, 0 30px 40px -30px #000c; }
.iphone-glass { position: relative; height: 100%; padding: 2.7%; border-radius: 15.9% / 7.7%; background: #050506; box-shadow: inset 0 0 0 1px #000; }
.iphone-screen { position: relative; height: 100%; overflow: hidden; border-radius: 14% / 6.45%; background: #f6f3ec; container-type: inline-size; isolation: isolate;
  /* Frosted bars blur what is behind them, and Chrome lets that escape a rounded overflow: the
     screen is cut to its own shape as well. */
  clip-path: inset(0 round 14% / 6.45%); }
.iphone-screen::after { content: ''; position: absolute; inset: 0; z-index: 8; pointer-events: none; border-radius: inherit;
  background: linear-gradient(118deg, #ffffff1f 0%, transparent 32%, transparent 70%, #ffffff0d 100%); }
.iphone-island { position: absolute; z-index: 60; top: 1.29%; left: 50%; width: 32.06%; height: 4.38%; transform: translateX(-50%); border-radius: 99px; background: #000; }
.iphone-button { position: absolute; width: 1%; border-radius: 2px; background: linear-gradient(90deg, #232426, #4a4b4e); }
.iphone-button.is-action { left: -.7%; top: 17.6%; height: 4%; }
.iphone-button.is-volume-up { left: -.7%; top: 24.5%; height: 6.6%; }
.iphone-button.is-volume-down { left: -.7%; top: 32.6%; height: 6.6%; }
.iphone-button.is-side { right: -.7%; top: 26.5%; height: 10.4%; background: linear-gradient(270deg, #232426, #4a4b4e); }
.iphone-button.is-camera { right: -.5%; top: 55%; height: 5.6%; width: .8%; background: linear-gradient(270deg, #1d1e20, #3b3c3f); }
/* ── The apps, drawn from their SwiftUI code ─────────────
   Screens of Talaria, Talaria Comercio and Talaria Domicilios rebuilt in HTML so they can move as
   the apps do. Every size is in the apps' points: --u is one point of the 393-point screen, so the
   numbers below are those of codebase/ios (TalariaUI tokens, the views' paddings and fonts). */
@property --u { syntax: '<length>'; inherits: true; initial-value: 1px; }
.app { --u: calc(100cqw / 393); position: absolute; inset: 0; overflow: hidden; background: var(--a-paper); color: var(--a-ink);
  font: 400 calc(15 * var(--u))/1.3 var(--sans); letter-spacing: 0; text-align: left; -webkit-font-smoothing: antialiased;
  --a-paper: #f6f3ec; --a-surface: #fcfaf5; --a-cream: #eeeadf; --a-wash: #f3efe8; --a-night: #14110f; --a-ink: #282c27; --a-muted: #7b7c70;
  --a-line: #dfdcd1; --a-gold: #8d754e; --a-gold-bright: #d4af62; --a-gold-deep: #9d762f; --a-gold-high: #e8cc87; --a-gold-shade: #b78a39;
  --a-olive: #626f52; --a-success: #46602a; --a-alert: #b3382c; --a-attention: #8f5b0a; --a-slate: #4d5d6b; --a-bone: #fbf3e2;
  --a-gold-detail: linear-gradient(135deg, #e8cc87, #d4af62 50%, #b78a39); --a-spring: cubic-bezier(.32, .72, 0, 1); }
.app * { box-sizing: border-box; }
.app :where(p, h1, h2, h3, ol, ul) { margin: 0; padding: 0; }
.app img { display: block; }
.app .i { width: calc(var(--s, 20) * var(--u)); height: calc(var(--s, 20) * var(--u)); }

/* The iPhone's status bar: the time and the three indicators, dark on light screens. */
.a-status { position: absolute; z-index: 30; left: 0; right: 0; top: 0; height: calc(54 * var(--u)); display: flex; align-items: center; justify-content: space-between;
  padding: calc(3 * var(--u)) calc(30 * var(--u)) 0 calc(42 * var(--u)); color: #000; pointer-events: none;
  font: 590 calc(17 * var(--u))/1 -apple-system, 'SF Pro Text', system-ui, sans-serif; letter-spacing: -.02em; }
.a-status svg { width: calc(78 * var(--u)); height: calc(13 * var(--u)); fill: currentColor; }
.a-status.is-light { color: #fff; }

/* A navigation stack: screens slide in from the right over the one they leave, which drifts back
   under a shade; a page sheet rises over the screen, which settles back behind it. */
.a-screen { position: absolute; inset: 0; overflow: hidden; background: var(--a-paper); visibility: hidden;
  transition: transform .5s var(--a-spring), filter .5s var(--a-spring), border-radius .5s var(--a-spring); }
.a-screen.is-on { visibility: visible; }
.a-screen.is-under { transform: translateX(-30%); filter: brightness(.9); }
.a-screen.is-pushing { transform: translateX(100%); }
.a-screen.is-behind { transform: scale(.92) translateY(calc(10 * var(--u))); border-radius: calc(38 * var(--u)); }
.a-screen.is-over { z-index: 21; }
.a-tabs.is-gone { transform: translateX(-30%); }
.a-scroll { position: absolute; left: 0; right: 0; top: 0; will-change: transform; }
/* As tStatusBarScrim: the page fades under the status bar instead of running into the clock. */
.a-scrim { position: absolute; z-index: 11; left: 0; right: 0; top: 0; height: calc(58 * var(--u)); background: linear-gradient(var(--a-paper) 55%, #f6f3ec00); pointer-events: none; }
.a-dim { position: absolute; inset: 0; z-index: 24; background: #000; opacity: 0; pointer-events: none; transition: opacity .5s var(--a-spring); }
.a-dim.is-on { opacity: .25; }
.a-sheet { position: absolute; z-index: 25; left: 0; right: 0; top: calc(59 * var(--u)); bottom: 0; overflow: hidden; background: var(--a-paper);
  border-radius: calc(38 * var(--u)) calc(38 * var(--u)) 0 0; transform: translateY(105%); transition: transform .55s var(--a-spring);
  box-shadow: 0 calc(-2 * var(--u)) calc(30 * var(--u)) #0000002e; }
.a-sheet.is-on { transform: none; }

/* A touch: a soft disc where the finger lands, and the pressed control dims as TPressStyle does. */
.a-touch { position: absolute; z-index: 40; left: 0; top: 0; width: calc(44 * var(--u)); height: calc(44 * var(--u)); margin: calc(-22 * var(--u)) 0 0 calc(-22 * var(--u));
  border-radius: 50%; background: #ffffff8c; box-shadow: 0 0 0 calc(1.5 * var(--u)) #ffffffd9, 0 calc(4 * var(--u)) calc(14 * var(--u)) #14110f40;
  opacity: 0; transform: scale(1.4); transition: opacity .18s, transform .25s var(--a-spring); pointer-events: none; }
.a-touch.is-down { opacity: 1; transform: scale(1); }
.a-press { transition: opacity .12s ease-out; }
.a-press.is-pressed { opacity: .85; }

/* The tab bar: frosted, a hairline on top, and a short gold bar over the chosen tab. */
.a-tabs { position: absolute; z-index: 20; left: 0; right: 0; bottom: 0; height: calc(90 * var(--u)); display: flex; padding: 0 calc(8 * var(--u)) calc(34 * var(--u));
  background: color-mix(in srgb, var(--a-surface) 82%, transparent); -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6);
  border-top: 1px solid var(--a-line); transition: transform .5s var(--a-spring); }
.a-tab { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(4 * var(--u));
  font: 600 calc(11 * var(--u))/1 var(--sans); color: var(--a-muted); }
.a-tab .i { --s: 24; }
.a-tab.is-on { color: var(--a-gold); }
.a-tab.is-on::before { content: ''; position: absolute; top: 0; left: 50%; width: calc(26 * var(--u)); height: calc(3 * var(--u)); translate: -50% 0; border-radius: 99px; background: currentColor; }
.a-count { position: absolute; top: calc(4 * var(--u)); left: calc(50% + 7 * var(--u)); min-width: calc(17 * var(--u)); height: calc(17 * var(--u)); padding: 0 calc(5 * var(--u));
  display: grid; place-items: center; border-radius: 99px; background: var(--a-alert); box-shadow: 0 0 0 calc(1.5 * var(--u)) var(--a-surface);
  font: 700 calc(10 * var(--u))/1 var(--sans); color: #fff; transform: scale(0); transition: transform .3s var(--a-spring); }
.a-count.is-on { transform: none; }
.a-count.is-leaving { transform: scale(0); transition-duration: .25s; }
.a-count.is-pop { animation: a-pop .5s var(--a-spring); }
@keyframes a-pop { 35% { transform: scale(1.3); } }

/* Shared pieces: cards, pills, fields, buttons, round logos. */
.a-card { background: var(--a-surface); border: 1px solid var(--a-line); border-radius: calc(14 * var(--u)); }
.a-pill { display: inline-flex; align-items: center; height: calc(22 * var(--u)); padding: 0 calc(10 * var(--u)); border-radius: 99px;
  font: 600 calc(11 * var(--u))/1 var(--sans); color: var(--tone, var(--a-muted)); background: color-mix(in srgb, var(--tone, var(--a-muted)) 12%, transparent); white-space: nowrap; }
.a-pill.is-success { --tone: var(--a-success); }
.a-pill.is-accent { --tone: var(--a-gold); }
.a-pill.is-alert { --tone: var(--a-alert); }
.a-pill.is-attention { --tone: var(--a-attention); }
.a-field { display: flex; align-items: center; gap: calc(8 * var(--u)); min-height: calc(50 * var(--u)); padding: 0 calc(16 * var(--u));
  background: var(--a-surface); border: 1px solid var(--a-line); border-radius: calc(16 * var(--u)); font: 500 calc(15 * var(--u))/1 var(--sans); color: var(--a-muted); }
.a-field .i { --s: 19; flex: none; }
.a-field-text { flex: 1; min-width: 0; color: var(--a-ink); white-space: nowrap; overflow: hidden; }
.a-field-text:empty::before { content: attr(data-placeholder); color: var(--a-muted); }
.a-primary { display: flex; align-items: center; justify-content: space-between; gap: calc(8 * var(--u)); min-height: calc(48 * var(--u)); padding: 0 calc(16 * var(--u));
  border-radius: calc(12 * var(--u)); background: var(--a-gold-bright); color: var(--a-night); font: 600 calc(16 * var(--u))/1 var(--sans); }
.a-primary b { font-weight: 700; }
.a-primary.is-centered { justify-content: center; font-size: calc(15 * var(--u)); }
.a-primary.is-off { opacity: .45; }
.a-prominent { display: grid; place-items: center; min-height: calc(44 * var(--u)); border-radius: 99px; background: linear-gradient(100deg, #e8cc87, #d4af62 45%, #b78a39);
  font: 600 calc(14 * var(--u))/1 var(--sans); color: var(--a-night); }
.a-quiet { display: grid; place-items: center; min-height: calc(44 * var(--u)); border-radius: 99px; border: 1px solid var(--a-line); background: var(--a-surface);
  font: 600 calc(14 * var(--u))/1 var(--sans); color: var(--a-ink); }
.a-logo { position: relative; flex: none; width: calc(var(--s, 44) * var(--u)); height: calc(var(--s, 44) * var(--u)); padding: calc(var(--s, 44) * .05 * var(--u));
  border-radius: 50%; background: #fff; box-shadow: 0 0 0 .5px #dfdcd199, 0 calc(var(--s, 44) * .06 * var(--u)) calc(var(--s, 44) * .28 * var(--u)) #14110f29; }
.a-logo img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.a-bottom { position: absolute; z-index: 15; left: 0; right: 0; bottom: 0; padding: calc(12 * var(--u)) calc(16 * var(--u)) calc(42 * var(--u));
  background: color-mix(in srgb, var(--a-surface) 86%, transparent); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border-top: 1px solid var(--a-line); }
.a-bottom.is-above-tabs { bottom: calc(90 * var(--u)); padding-bottom: calc(8 * var(--u)); }
.a-round { flex: none; display: grid; place-items: center; width: calc(42 * var(--u)); height: calc(42 * var(--u)); border-radius: 50%;
  background: color-mix(in srgb, var(--a-surface) 80%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: 0 0 0 .5px #dfdcd180, 0 calc(4 * var(--u)) calc(14 * var(--u)) #14110f1f; color: var(--a-ink); }
.a-round .i { --s: 20; }
.a-photo { position: relative; display: block; overflow: hidden; background: var(--a-cream); }
.a-photo img { width: 100%; height: 100%; object-fit: cover; }
.a-photo.is-empty { display: grid; place-items: center; background: linear-gradient(160deg, #f3efe8, #eae4d6); color: var(--a-gold-bright); }
.a-photo.is-empty .i { --s: 26; stroke-width: 1.3; }
.a-section-title { font: 500 calc(26 * var(--u))/1.21 var(--serif); color: var(--a-ink); }

@keyframes caret { 50% { opacity: 0; } }

/* Talaria · Inicio (HomeView): the mark and the greeting, the search, and the photo cards. */
.a-home { padding: calc(67 * var(--u)) calc(20 * var(--u)) calc(120 * var(--u)); }
.a-brand { display: flex; align-items: center; gap: calc(10 * var(--u)); height: calc(27 * var(--u)); }
.a-brand img { width: calc(34 * var(--u)); height: auto; }
.a-brand span { font: 600 calc(15 * var(--u))/1 var(--serif); letter-spacing: calc(5 * var(--u)); color: var(--a-gold-deep); }
.a-eyebrow { margin-top: calc(24 * var(--u)); font: 600 calc(10.5 * var(--u))/1.3 var(--sans); letter-spacing: calc(2 * var(--u)); text-transform: uppercase; color: var(--a-muted); }
.a-brand + .a-greeting { margin-top: calc(20 * var(--u)); }
.a-greeting { margin-top: calc(8 * var(--u)); font: 500 calc(35 * var(--u))/1.21 var(--serif); white-space: nowrap; }
.a-greeting em { color: var(--a-gold-deep); }
.a-home .a-field { margin-top: calc(16 * var(--u)); }
.a-block { margin-top: calc(24 * var(--u)); }
.a-block > .a-section-title + * { margin-top: calc(12 * var(--u)); }
.a-rail { display: flex; gap: calc(12 * var(--u)); margin: 0 calc(-20 * var(--u)); padding: calc(4 * var(--u)) calc(20 * var(--u)); overflow: visible; }
.a-rail-track { display: flex; gap: calc(12 * var(--u)); will-change: transform; }

/* ShowcaseCard: the photo fills the card, the business's badge on top with a tag, the name on a
   coffee fade at the foot. */
.a-show { position: relative; flex: none; width: calc(272 * var(--u)); height: calc(300 * var(--u)); overflow: hidden; border-radius: calc(26 * var(--u));
  background: #2a2018; box-shadow: 0 calc(10 * var(--u)) calc(32 * var(--u)) #14110f4d; color: #fff; }
.a-show.is-product { width: calc(224 * var(--u)); }
.a-show > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.a-show::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, #23160d26 0%, #23160d00 28%, #2e1e1400 47%, #2e1e141a 60%, #2e1e14a8 82%, #21160fed 100%); }
.a-show .a-logo { --s: 52; position: absolute; z-index: 1; left: calc(14 * var(--u)); top: calc(14 * var(--u)); }
.a-show-tag { position: absolute; z-index: 1; top: calc(26 * var(--u)); right: calc(14 * var(--u)); height: calc(28 * var(--u)); padding: 0 calc(11 * var(--u));
  display: flex; align-items: center; border-radius: 99px; background: #12100e8c; box-shadow: inset 0 0 0 1px #fbf3e233;
  font: 600 calc(10 * var(--u))/1 var(--sans); letter-spacing: calc(1.1 * var(--u)); text-transform: uppercase; color: var(--a-bone); }
.a-show-foot { position: absolute; z-index: 1; left: calc(18 * var(--u)); right: calc(18 * var(--u)); bottom: calc(18 * var(--u)); display: grid; gap: calc(6 * var(--u)); }
.a-show-foot strong { font: 500 calc(29 * var(--u))/1.08 var(--serif); overflow-wrap: anywhere; }
.a-show-foot strong.is-long { font-size: calc(22 * var(--u)); }
.a-show-foot small { font: 500 calc(12 * var(--u))/1.2 var(--sans); color: #d9cdb6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Search results (HomeView.results): the business with its matching dishes under it. */
.a-results { display: grid; gap: calc(24 * var(--u)); margin-top: calc(24 * var(--u)); }
.a-group { display: grid; gap: calc(8 * var(--u)); }
.a-bizrow { display: flex; align-items: center; gap: calc(12 * var(--u)); padding: calc(12 * var(--u)); background: var(--a-surface); border: 1px solid var(--a-line); border-radius: calc(18 * var(--u)); }
.a-bizrow .a-logo { --s: 48; }
.a-bizrow-text { flex: 1; display: grid; gap: calc(8 * var(--u)); }
.a-bizrow-text strong { font: 600 calc(16 * var(--u))/1.25 var(--sans); }
.a-bizrow-meta { display: flex; align-items: center; gap: calc(8 * var(--u)); font: 400 calc(12 * var(--u))/1.2 var(--sans); color: var(--a-muted); }
.a-bizrow > .i { --s: 14; color: var(--a-muted); }

/* ProductRow: the photo cut so the dish stays whole, name, description, price and a «+». */
.a-row { display: flex; align-items: center; gap: calc(14 * var(--u)); padding: calc(13 * var(--u)) 0; border-bottom: 1px solid var(--a-line); }
.a-row .a-photo { flex: none; width: calc(80 * var(--u)); height: calc(80 * var(--u)); border-radius: calc(16 * var(--u)); }
.a-row-text { flex: 1; min-width: 0; display: grid; gap: calc(4 * var(--u)); }
.a-row-text strong { font: 500 calc(19 * var(--u))/1.21 var(--serif); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.a-row-text small { font: 400 calc(12 * var(--u))/1.35 var(--sans); color: var(--a-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.a-row-text b { margin-top: calc(2 * var(--u)); font: 600 calc(13.5 * var(--u))/1.2 var(--sans); }
.a-plus { flex: none; display: grid; place-items: center; width: calc(34 * var(--u)); height: calc(34 * var(--u)); border-radius: 50%;
  background: var(--a-surface); border: 1px solid var(--a-line); color: var(--a-ink); }
.a-plus .i { --s: 16; }

/* The business's page (BusinessView): the photo fading into the page, the logo, the name and three
   facts, then «Destacados», the search, the section chips and the menu. */
.a-cover { position: relative; height: calc(380 * var(--u)); background: var(--a-wash); }
.a-cover > img { width: 100%; height: 100%; object-fit: cover; }
.a-cover::before { content: ''; position: absolute; z-index: 1; inset: 0 0 auto; height: calc(120 * var(--u)); background: linear-gradient(#00000052, #0000); }
.a-cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, #f6f3ec00 45%, var(--a-paper) 97%); }
.a-cover .a-logo { --s: 92; position: absolute; z-index: 2; left: 50%; bottom: calc(-30 * var(--u)); translate: -50% 0; }
.a-bizname { padding: calc(44 * var(--u)) calc(16 * var(--u)) 0; text-align: center; font: 500 calc(40 * var(--u))/1.21 var(--serif); }
.a-kind { margin-top: calc(8 * var(--u)); text-align: center; font: 600 calc(10 * var(--u))/1.2 var(--sans); letter-spacing: calc(2.2 * var(--u)); text-transform: uppercase; color: var(--a-gold-deep); }
.a-facts { display: grid; grid-template-columns: 1fr 1px 1fr 1px 1fr; margin: calc(18 * var(--u)) calc(30 * var(--u)) 0; border-block: 1px solid var(--a-line); }
.a-facts > i { background: var(--a-line); }
.a-facts p { display: grid; gap: calc(2 * var(--u)); padding: calc(12 * var(--u)) 0; text-align: center; font: 600 calc(14 * var(--u))/1.25 var(--sans); }
.a-facts small { font: 400 calc(11 * var(--u))/1.2 var(--sans); color: var(--a-muted); }
.a-bizdesc { padding: calc(14 * var(--u)) calc(30 * var(--u)) calc(30 * var(--u)); text-align: center; font: italic 500 calc(17 * var(--u))/1.25 var(--serif); color: var(--a-muted); }
.a-menu { padding: 0 calc(20 * var(--u)) calc(140 * var(--u)); }
.a-menu > .a-field { margin-top: calc(18 * var(--u)); min-height: calc(46 * var(--u)); border-radius: calc(14 * var(--u)); }
.a-menu > .a-field .i { --s: 17; }
.a-dish { flex: none; width: calc(148 * var(--u)); }
.a-dish .a-photo { width: calc(148 * var(--u)); height: calc(148 * var(--u)); border-radius: calc(20 * var(--u)); }
.a-dish-plus { position: absolute; right: calc(8 * var(--u)); bottom: calc(8 * var(--u)); display: grid; place-items: center; width: calc(32 * var(--u)); height: calc(32 * var(--u));
  border-radius: 50%; background: #12100e99; box-shadow: inset 0 0 0 1px #fbf3e240; color: var(--a-bone); }
.a-dish-plus .i { --s: 15; }
.a-dish strong { display: -webkit-box; margin-top: calc(10 * var(--u)); font: 500 calc(18 * var(--u))/1.21 var(--serif); -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.a-dish b { display: block; margin-top: calc(4 * var(--u)); font: 600 calc(12.5 * var(--u))/1.2 var(--sans); color: var(--a-gold-deep); }
.a-chips { display: flex; gap: calc(8 * var(--u)); margin: calc(12 * var(--u)) calc(-20 * var(--u)) 0; padding: calc(2 * var(--u)) calc(20 * var(--u)); }
.a-chip { flex: none; display: grid; place-items: center; height: calc(36 * var(--u)); padding: 0 calc(15 * var(--u)); border-radius: 99px;
  background: var(--a-surface); border: 1px solid var(--a-line); font: 600 calc(12.5 * var(--u))/1 var(--sans); color: var(--a-ink); transition: background .2s, color .2s; }
.a-chip.is-on { background: var(--a-gold-detail); border-color: transparent; color: var(--a-night); }
.a-menu-section { padding-top: calc(28 * var(--u)); }
.a-menu-section > h4 { margin: 0 0 calc(2 * var(--u)); font: 500 calc(25 * var(--u))/1.21 var(--serif); }
.a-back { position: absolute; z-index: 12; left: calc(16 * var(--u)); top: calc(61 * var(--u)); }

/* The dish as a page sheet (ProductView): photo, name and price, the options, notes, what goes
   with it, and the bar to add it. */
.a-sheet .a-scroll { padding-bottom: calc(150 * var(--u)); }
.a-sheet-photo { height: calc(340 * var(--u)); }
.a-sheet-photo > .a-photo { height: 100%; }
/* The sheet's bar: clear over the photo, frosted once the dish scrolls under it. */
.a-sheet-bar { position: absolute; z-index: 11; left: 0; right: 0; top: 0; height: calc(72 * var(--u)); background: color-mix(in srgb, var(--a-paper) 82%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); box-shadow: 0 1px 0 var(--a-line); opacity: 0; transition: opacity .25s; }
.a-sheet.is-scrolled .a-sheet-bar { opacity: 1; }
.a-sheet-close { position: absolute; z-index: 12; right: calc(16 * var(--u)); top: calc(14 * var(--u)); width: calc(44 * var(--u)); height: calc(44 * var(--u)); }
.a-sheet-close .i { --s: 18; }
.a-product { display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(24 * var(--u)); padding: calc(24 * var(--u)) calc(16 * var(--u)) 0; }
.a-product-head { display: grid; gap: calc(8 * var(--u)); }
.a-product-head h3 { font: 500 calc(32 * var(--u))/1.21 var(--serif); }
.a-product-head p { font: 400 calc(15 * var(--u))/1.4 var(--sans); color: var(--a-muted); }
.a-product-head > b { font: 500 calc(28 * var(--u))/1.21 var(--serif); color: var(--a-gold-deep); }
.a-link { display: flex; align-items: center; gap: calc(8 * var(--u)); min-height: calc(48 * var(--u)); padding: 0 calc(12 * var(--u)); border-radius: 99px;
  background: var(--a-surface); border: 1px solid var(--a-line); font: 600 calc(14 * var(--u))/1 var(--sans); }
.a-link .i { --s: 16; color: var(--a-gold); }
.a-link span { margin-left: auto; font: 400 calc(13 * var(--u))/1 var(--sans); color: var(--a-gold); }
.a-link span + .i { --s: 14; margin-left: calc(-4 * var(--u)); }
.a-group-head { display: flex; align-items: center; justify-content: space-between; }
.a-group-head h4 { margin: 0; font: 500 calc(22 * var(--u))/1.21 var(--serif); }
.a-hint { margin-top: calc(8 * var(--u)); font: 400 calc(12 * var(--u))/1.2 var(--sans); color: var(--a-muted); }
.a-options { margin-top: calc(8 * var(--u)); }
.a-option { display: flex; align-items: center; gap: calc(12 * var(--u)); min-height: calc(52 * var(--u)); padding: 0 calc(12 * var(--u)); font: 400 calc(15 * var(--u))/1.2 var(--sans); }
.a-option + .a-option { box-shadow: inset calc(52 * var(--u)) 1px 0 var(--a-surface), inset 0 1px 0 var(--a-line); }
.a-option small { margin-left: auto; font: 400 calc(14 * var(--u))/1 var(--sans); color: var(--a-muted); }
.a-radio { position: relative; flex: none; width: calc(24 * var(--u)); height: calc(24 * var(--u)); border-radius: 50%; box-shadow: inset 0 0 0 calc(1.5 * var(--u)) var(--a-line); transition: box-shadow .2s; }
.a-radio::after { content: ''; position: absolute; inset: calc(5 * var(--u)); border-radius: 50%; background: var(--a-gold); transform: scale(0); transition: transform .25s var(--a-spring); }
.a-option.is-on .a-radio { box-shadow: inset 0 0 0 calc(1.5 * var(--u)) var(--a-gold); }
.a-option.is-on .a-radio::after { transform: none; }
.a-notes { display: grid; gap: calc(8 * var(--u)); }
.a-notes h4 { margin: 0; font: 600 calc(14 * var(--u))/1.2 var(--sans); }
.a-notes .a-card { display: flex; align-items: flex-start; min-height: calc(52 * var(--u)); padding: calc(12 * var(--u)); font: 400 calc(15 * var(--u))/1.3 var(--sans); color: var(--a-ink); transition: border-color .2s; }
.a-notes .a-card.is-typing { border-color: var(--a-gold-bright); }
.a-notes-hint { color: var(--a-muted); }
[data-notes-text]:not(:empty) ~ .a-notes-hint { display: none; }
.a-caret { flex: none; width: calc(2 * var(--u)); height: calc(19 * var(--u)); margin-left: calc(1 * var(--u)); background: var(--a-gold-bright); opacity: 0; }
.is-typing > .a-caret { opacity: 1; animation: caret 1s steps(1) infinite; }
.is-typing > .a-caret ~ .a-notes-hint { display: none; }
.a-pairs h4 { margin: 0 0 calc(12 * var(--u)); font: 500 calc(26 * var(--u))/1.21 var(--serif); }
.a-pair-track { display: flex; gap: calc(12 * var(--u)); }
.a-pair { flex: none; display: flex; align-items: center; gap: calc(12 * var(--u)); padding: calc(8 * var(--u)) calc(10 * var(--u)) calc(8 * var(--u)) calc(8 * var(--u));
  background: var(--a-surface); border: 1px solid var(--a-line); border-radius: calc(16 * var(--u)); }
.a-pair .a-photo { width: calc(64 * var(--u)); height: calc(64 * var(--u)); border-radius: calc(12 * var(--u)); }
.a-pair p { width: calc(104 * var(--u)); display: grid; gap: calc(2 * var(--u)); font: 600 calc(13 * var(--u))/1.25 var(--sans); }
.a-pair small { font: 400 calc(13 * var(--u))/1.2 var(--sans); color: var(--a-gold-deep); }
.a-pair-add { display: grid; place-items: center; width: calc(36 * var(--u)); height: calc(36 * var(--u)); margin: calc(4 * var(--u)); border-radius: 50%;
  background: var(--a-gold-detail); color: var(--a-night); transition: background .3s; }
.a-pair-add .i { --s: 16; }
.a-pair-add.is-added { background: var(--a-success); color: #fff; }
.a-addbar { display: flex; gap: calc(12 * var(--u)); }
.a-stepper { display: flex; align-items: center; background: var(--a-surface); border: 1px solid var(--a-line); border-radius: 99px; color: var(--a-ink); }
.a-stepper > span { display: grid; place-items: center; width: calc(44 * var(--u)); height: calc(44 * var(--u)); }
.a-stepper .i { --s: 18; }
.a-stepper b { min-width: calc(36 * var(--u)); text-align: center; font: 600 calc(16 * var(--u))/1 var(--sans); }
.a-addbar .a-primary { flex: 1; }
.a-addbar .a-primary b { font-variant-numeric: tabular-nums; }

/* The cart (CartView) and the checkout (CheckoutView). */
.a-page { padding: calc(59 * var(--u)) calc(16 * var(--u)) calc(190 * var(--u)); }
.a-page > h2 { padding-top: calc(16 * var(--u)); font: 500 calc(38 * var(--u))/1.21 var(--serif); }
.a-shop { display: flex; align-items: center; gap: calc(8 * var(--u)); min-height: calc(44 * var(--u)); margin-top: calc(16 * var(--u)); font: 600 calc(13 * var(--u))/1 var(--sans); color: var(--a-gold); }
.a-shop .i { --s: 16; }
.a-shop .i + span + .i { --s: 13; }
.a-line { display: grid; gap: calc(12 * var(--u)); margin-top: calc(12 * var(--u)); padding: calc(12 * var(--u)); background: var(--a-surface); border: 1px solid var(--a-line); border-radius: calc(18 * var(--u)); }
.a-line-top { display: flex; align-items: flex-start; gap: calc(12 * var(--u)); }
.a-line .a-photo { width: calc(72 * var(--u)); height: calc(72 * var(--u)); border-radius: calc(14 * var(--u)); }
.a-line-top p { flex: 1; display: grid; gap: calc(4 * var(--u)); font: 600 calc(15 * var(--u))/1.25 var(--sans); }
.a-line-top small { font: 400 calc(12 * var(--u))/1.2 var(--sans); color: var(--a-muted); }
.a-line-top > .i { --s: 18; margin: calc(13 * var(--u)); color: var(--a-muted); }
.a-line-foot { display: flex; align-items: center; justify-content: space-between; }
.a-line-foot > b { font: 500 calc(21 * var(--u))/1 var(--serif); }
.a-nav { position: absolute; z-index: 12; left: 0; right: 0; top: 0; height: calc(108 * var(--u)); padding: calc(54 * var(--u)) 0 calc(2 * var(--u)); background: color-mix(in srgb, var(--a-paper) 84%, transparent); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); transition: box-shadow .25s; display: grid; grid-template-columns: calc(76 * var(--u)) 1fr calc(76 * var(--u));
  align-items: center; font: 600 calc(17 * var(--u))/1 var(--sans); text-align: center; }
.is-scrolled > .a-nav { box-shadow: 0 1px 0 var(--a-line); }
.a-nav .a-round { margin-left: calc(16 * var(--u)); width: calc(44 * var(--u)); height: calc(44 * var(--u)); }
.a-checkout { padding-top: calc(118 * var(--u)); display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(14 * var(--u)); }
.a-checkout h3 { display: flex; align-items: center; gap: calc(12 * var(--u)); margin-top: calc(14 * var(--u)); font: 500 calc(26 * var(--u))/1.21 var(--serif); }
.a-checkout h3:first-child { margin-top: 0; }
.a-checkout h3 .i { --s: 20; color: var(--a-gold); }
.a-place { display: flex; align-items: center; gap: calc(14 * var(--u)); padding: calc(14 * var(--u)) calc(16 * var(--u)); background: var(--a-surface); border: 1px solid var(--a-line);
  border-radius: calc(18 * var(--u)); transition: box-shadow .25s, border-color .25s; }
.a-place .i { --s: 20; flex: none; color: var(--a-gold); }
.a-place p { display: grid; gap: calc(4 * var(--u)); font: 500 calc(15 * var(--u))/1.35 var(--sans); }
.a-place small { font: 400 calc(12.5 * var(--u))/1.35 var(--sans); color: var(--a-muted); }
.a-place.is-on { border-color: var(--a-gold-deep); box-shadow: inset 0 0 0 calc(.5 * var(--u)) var(--a-gold-deep); }
.a-place.is-on .i { color: var(--a-success); }
.a-other { display: flex; align-items: center; justify-content: center; gap: calc(8 * var(--u)); min-height: calc(48 * var(--u)); border: 1px solid var(--a-gold); border-radius: calc(14 * var(--u)); opacity: .9;
  font: 600 calc(15 * var(--u))/1 var(--sans); color: var(--a-gold); }
.a-other .i { --s: 16; }
.a-pay { display: grid; grid-template-columns: 1fr 1fr; gap: calc(8 * var(--u)); }
.a-pay span { display: grid; place-items: center; min-height: calc(52 * var(--u)); border-radius: calc(14 * var(--u)); background: var(--a-surface); border: 1px solid var(--a-line);
  font: 500 calc(15 * var(--u))/1 var(--sans); transition: background .25s, border-color .25s; }
.a-pay span.is-on { background: var(--a-gold-bright); border-color: var(--a-gold-bright); }
.a-explain { font: 400 calc(13 * var(--u))/1.45 var(--sans); color: var(--a-muted); }
.a-sum { display: grid; gap: calc(10 * var(--u)); padding: calc(16 * var(--u)); }
.a-sum p { display: flex; justify-content: space-between; font: 400 calc(15 * var(--u))/1.2 var(--sans); }
.a-sum p.is-total { padding-top: calc(10 * var(--u)); border-top: 1px solid var(--a-line); font: 600 calc(16 * var(--u))/1.2 var(--sans); }
.a-sum p.is-total { font: 600 calc(17 * var(--u))/1.2 var(--sans); align-items: center; }
.a-sum p.is-total b { font: 500 calc(30 * var(--u))/1 var(--serif); }
.a-sum p.is-sub { color: var(--a-ink); }
.a-sum .a-sum-shop { font: 600 calc(13 * var(--u))/1.2 var(--sans); color: var(--a-gold); }
.a-cart-sum { margin-top: calc(16 * var(--u)); }
.a-cart-sum b { font: 500 calc(26 * var(--u))/1 var(--serif); }
.a-note { min-height: calc(52 * var(--u)); padding: calc(12 * var(--u)); font: 400 calc(15 * var(--u))/1.3 var(--sans); color: var(--a-muted); }
.a-section-title.is-25 { font-size: calc(25 * var(--u)); }

/* Tracking (TrackingView, TrackingMap, OrderTimeline): the map of Tame melting into the page, the
   live chip, and the order's card with its six steps. */
.a-map { position: relative; height: calc(400 * var(--u)); overflow: hidden; background: #efebe1;
  --minor-color: #fff; --major-color: #fff; --minor-width: 2.6px; --major-width: 5px; --minor-opacity: 1; --major-opacity: 1; color: #fff; }
.a-map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.a-map::after { content: ''; position: absolute; inset: auto 0 0; height: calc(140 * var(--u)); background: linear-gradient(#f6f3ec00, #f6f3ecd9 60%, var(--a-paper)); pointer-events: none; }
.a-map-route { fill: none; stroke: var(--a-gold-bright); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.a-map-route-shade { fill: none; stroke: #9d762f59; stroke-width: 6.7; stroke-linecap: round; stroke-linejoin: round; }
.a-map-label { font: 600 11.5px/1 var(--sans); fill: #6f6a5d; text-anchor: middle; paint-order: stroke; stroke: #fff; stroke-width: 3.2px; stroke-linejoin: round; }
.a-map-halo { fill: #626f5238; }
.a-map-rider { opacity: 0; transition: opacity .5s; }
.a-map-rider.is-on { opacity: 1; }
.a-live { position: absolute; z-index: 3; left: calc(16 * var(--u)); bottom: calc(92 * var(--u)); display: flex; align-items: center; gap: calc(8 * var(--u)); height: calc(32 * var(--u));
  padding: 0 calc(12 * var(--u)); border-radius: 99px; background: #fcfaf5d9; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid var(--a-line);
  font: 500 calc(12 * var(--u))/1 var(--sans); color: var(--a-ink); transition: opacity .4s; }
.a-live i { width: calc(7 * var(--u)); height: calc(7 * var(--u)); border-radius: 50%; background: var(--a-muted); }
.a-live.is-live i { background: var(--a-success); animation: live-dot 1.6s ease-out infinite; }
@keyframes live-dot { from { box-shadow: 0 0 0 0 #46602a80; } to { box-shadow: 0 0 0 calc(6 * var(--u)) #46602a00; } }
.a-track { position: relative; z-index: 4; display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(16 * var(--u)); margin-top: calc(-28 * var(--u)); padding: 0 calc(16 * var(--u)) calc(60 * var(--u)); }
.a-tcard { display: grid; gap: calc(16 * var(--u)); padding: calc(16 * var(--u)); background: var(--a-surface); border: 1px solid var(--a-line); border-radius: calc(20 * var(--u));
  box-shadow: 0 calc(6 * var(--u)) calc(20 * var(--u)) #14110f0f; }
.a-tcard-head { display: flex; align-items: center; gap: calc(12 * var(--u)); }
.a-illus { position: relative; flex: none; display: grid; place-items: center; width: calc(64 * var(--u)); height: calc(64 * var(--u)); border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fcfaf5, #efe9dc 75%); box-shadow: inset 0 0 0 1px #e6e0d2; color: var(--a-gold-deep); }
.a-illus .i { --s: 26; position: absolute; transition: opacity .35s, transform .45s var(--a-spring); }
.a-illus .i:not(.is-on) { opacity: 0; transform: scale(.6); }
.a-illus.is-done { background: radial-gradient(circle at 40% 35%, #fcfaf5, #eef0e2 75%); }
.a-ring { position: absolute; inset: 0; border-radius: 50%; border: calc(2 * var(--u)) solid var(--a-gold-bright); opacity: 0; pointer-events: none; }
.a-ring.is-burst { animation: ring-out 1.2s var(--ease-out); }
.a-tcard-text { flex: 1; min-width: 0; display: grid; gap: calc(2 * var(--u)); }
.a-tcard-text strong { font: 500 calc(27 * var(--u))/1.15 var(--serif); }
.a-tcard-text small { font: 400 calc(13 * var(--u))/1.35 var(--sans); color: var(--a-muted); }
.a-swap { transition: opacity .3s, transform .45s var(--a-spring); }
.a-swap.is-out { opacity: 0; transform: translateY(calc(6 * var(--u))); }
.a-steps { display: grid; grid-template-columns: repeat(6, 1fr); margin: 0 calc(-8 * var(--u)); }
.a-step { position: relative; display: grid; justify-items: center; align-content: start; gap: calc(6 * var(--u)); text-align: center; }
.a-step::before, .a-step::after { content: ''; position: absolute; top: calc(10 * var(--u)); height: calc(2 * var(--u)); width: 50%; background: var(--a-line); }
.a-step::before { left: 0; }
.a-step::after { right: 0; }
.a-step:first-child::before, .a-step:last-child::after { display: none; }
.a-step > i { position: relative; z-index: 1; display: grid; place-items: center; width: calc(22 * var(--u)); height: calc(22 * var(--u)); border-radius: 50%; background: var(--a-line);
  color: #fff; transition: background .35s; }
.a-step > i .i { --s: 12; opacity: 0; transition: opacity .25s; }
.a-step > i::after { content: ''; position: absolute; width: calc(8 * var(--u)); height: calc(8 * var(--u)); border-radius: 50%; background: #fff; opacity: 0; transition: opacity .25s; }
.a-step b { font: 600 calc(10 * var(--u))/1.2 var(--sans); color: var(--a-muted); white-space: pre-line; transition: color .3s; }
.a-step time { min-height: calc(12 * var(--u)); font: 400 calc(10 * var(--u))/1.2 var(--sans); color: var(--a-muted); font-variant-numeric: tabular-nums; opacity: 0; transition: opacity .4s; }
.a-step.is-done::before, .a-step.is-done::after, .a-step.is-now::before { background: var(--a-gold); transition: background .4s; }
.a-step.is-done > i, .a-step.is-now > i { background: var(--a-gold); }
.a-step.is-done > i .i { opacity: 1; }
.a-step.is-now > i::after { opacity: 1; }
.a-step.is-done b, .a-step.is-now b { color: var(--a-ink); }
.a-step.is-done time, .a-step.is-now time { opacity: 1; }
.a-info { display: flex; align-items: center; gap: calc(14 * var(--u)); padding: calc(14 * var(--u)) calc(16 * var(--u)); background: var(--a-surface); border: 1px solid var(--a-line); border-radius: calc(20 * var(--u)); }
.a-info > span { flex: none; display: grid; place-items: center; width: calc(44 * var(--u)); height: calc(44 * var(--u)); border-radius: 50%; background: #46602a14; color: var(--a-success); }
.a-info > span .i { --s: 18; }
.a-info p { display: grid; gap: calc(3 * var(--u)); font: 600 calc(15 * var(--u))/1.25 var(--sans); }
.a-info small { font: 400 calc(13 * var(--u))/1.35 var(--sans); color: var(--a-muted); }
.a-info.is-person > span { width: calc(52 * var(--u)); height: calc(52 * var(--u)); background: radial-gradient(circle at 40% 35%, #fcfaf5, #efe9dc 75%); color: var(--a-gold-deep); box-shadow: inset 0 0 0 1px #e6e0d2; }
.a-info.is-person p { font: 500 calc(24 * var(--u))/1.2 var(--serif); }

/* Talaria Comercio · La cocina (OrdersView, OrderRowView) and the receipt (TransferReceiptContent). */
.app-business { --new: var(--a-attention); --accepted: var(--a-gold); --preparing: var(--a-gold-deep); --ready: var(--a-success); --delivering: var(--a-slate); }
.k-page { padding: calc(67 * var(--u)) calc(16 * var(--u)) calc(130 * var(--u)); }
.k-eyebrow { font: 600 calc(10.5 * var(--u))/1.3 var(--sans); letter-spacing: calc(1.9 * var(--u)); text-transform: uppercase; color: var(--a-muted); }
.k-titlerow { display: flex; align-items: flex-end; justify-content: space-between; margin-top: calc(6 * var(--u)); }
.k-title { font: 500 calc(36 * var(--u))/1.21 var(--serif); }
.k-refresh { box-shadow: 0 0 0 1px var(--a-line); background: var(--a-surface); margin-bottom: calc(-26 * var(--u)); }
.k-refresh .i { --s: 18; }
.k-sub { margin-top: calc(6 * var(--u)); font: 400 calc(13.5 * var(--u))/1.3 var(--sans); color: var(--a-muted); }
.k-intake { display: flex; align-items: center; gap: calc(8 * var(--u)); min-height: calc(44 * var(--u)); margin-top: calc(16 * var(--u)); padding: 0 calc(14 * var(--u));
  background: var(--a-surface); border: 1px solid var(--a-line); border-radius: 99px; font: 600 calc(13 * var(--u))/1 var(--sans); }
.k-intake i { width: calc(8 * var(--u)); height: calc(8 * var(--u)); border-radius: 50%; background: var(--a-success); }
.k-intake span { margin-left: auto; font-size: calc(12 * var(--u)); color: var(--a-gold-deep); }
.k-seg { display: grid; grid-template-columns: 1fr 1fr; margin-top: calc(16 * var(--u)); padding: calc(2 * var(--u)); border-radius: 99px; background: #7676801f; }
.k-seg b { display: grid; place-items: center; height: calc(28 * var(--u)); border-radius: 99px; font: 500 calc(13 * var(--u))/1 var(--sans); }
.k-seg b.is-on { background: #fff; box-shadow: 0 calc(3 * var(--u)) calc(8 * var(--u)) #0000001f; }
.k-search { margin-top: calc(16 * var(--u)); border-radius: calc(14 * var(--u)); }
.k-chips { display: flex; gap: calc(8 * var(--u)); margin: calc(16 * var(--u)) calc(-16 * var(--u)) 0; padding: calc(2 * var(--u)) calc(16 * var(--u)); overflow: hidden; }
.k-chip { flex: none; display: flex; align-items: center; gap: calc(7 * var(--u)); min-height: calc(42 * var(--u)); padding: 0 calc(14 * var(--u)); border-radius: 99px;
  background: var(--a-surface); border: 1px solid var(--a-line); font: 600 calc(13 * var(--u))/1 var(--sans); transition: background .3s, border-color .3s; }
.k-chip i { width: calc(7 * var(--u)); height: calc(7 * var(--u)); border-radius: 50%; background: var(--tint); }
.k-chip b { font: 700 calc(12 * var(--u))/1 var(--sans); font-variant-numeric: tabular-nums; }
.k-chip.is-on { background: var(--a-wash); border-color: var(--a-gold-deep); }
[data-chip="new"], [data-lane="new"] { --tint: var(--new); }
[data-chip="accepted"], [data-lane="accepted"] { --tint: var(--accepted); }
[data-chip="preparing"], [data-lane="preparing"] { --tint: var(--preparing); }
[data-chip="ready"], [data-lane="ready"] { --tint: var(--ready); }
[data-chip="delivering"], [data-lane="delivering"] { --tint: var(--delivering); }
.k-lane { display: grid; gap: calc(12 * var(--u)); margin-top: calc(24 * var(--u)); }
.k-lane h3 { display: flex; align-items: center; gap: calc(10 * var(--u)); font: 500 calc(24 * var(--u))/1.21 var(--serif); }
.k-lane h3 > i { width: calc(9 * var(--u)); height: calc(9 * var(--u)); border-radius: 50%; background: var(--tint, var(--a-muted)); }
.k-lane h3 > b { display: grid; place-items: center; min-width: calc(26 * var(--u)); height: calc(22 * var(--u)); padding: 0 calc(8 * var(--u)); border-radius: 99px;
  font: 700 calc(12 * var(--u))/1 var(--sans); font-variant-numeric: tabular-nums; color: var(--a-muted); background: #7b7c701f; transition: color .3s, background .3s; }
.k-lane.has-orders h3 > b { color: var(--tint); background: color-mix(in srgb, var(--tint) 12%, transparent); }
.k-lane h3 small { display: none; margin-left: auto; font: 400 calc(12 * var(--u))/1 var(--sans); color: var(--a-muted); }
.k-lane.has-orders h3 small { display: block; }
.k-lane.is-history h3 > .i { --s: 16; margin-left: auto; color: var(--a-muted); }
.k-empty { padding-left: calc(19 * var(--u)); font: 400 calc(13.5 * var(--u))/1.3 var(--sans); color: var(--a-muted); }
.k-lane.has-orders .k-empty { display: none; }
.k-ticket { position: relative; display: grid; gap: calc(10 * var(--u)); padding: calc(16 * var(--u)); background: var(--a-surface); border: 1px solid var(--a-line); border-radius: calc(18 * var(--u));
  box-shadow: 0 calc(3 * var(--u)) calc(16 * var(--u)) #14110f08; transition: border-color .4s, box-shadow .4s; will-change: transform; }
.k-ticket.is-gone { display: none; }
.k-ticket.is-fresh { border-color: var(--a-gold-bright); box-shadow: 0 0 0 calc(.5 * var(--u)) var(--a-gold-bright), 0 calc(3 * var(--u)) calc(16 * var(--u)) #14110f14; }
.k-top { display: flex; align-items: center; gap: calc(8 * var(--u)); }
.k-code { font: 600 calc(12 * var(--u))/1 var(--sans); letter-spacing: calc(.4 * var(--u)); color: var(--a-muted); }
.k-new { display: grid; place-items: center; height: calc(20 * var(--u)); padding: 0 calc(7 * var(--u)); border-radius: 99px; background: var(--a-gold-detail);
  font: 700 calc(9.5 * var(--u))/1 var(--sans); letter-spacing: calc(1.2 * var(--u)); color: var(--a-night); transition: opacity .3s, transform .3s; }
.k-ticket:not(.is-fresh) .k-new { opacity: 0; transform: scale(.6); }
.k-wait { display: flex; align-items: center; gap: calc(4 * var(--u)); height: calc(24 * var(--u)); margin-left: auto; padding: 0 calc(9 * var(--u)); border-radius: 99px;
  background: #7b7c701a; font: 700 calc(12 * var(--u))/1 var(--sans); color: var(--a-muted); font-variant-numeric: tabular-nums; }
.k-wait .i { --s: 13; }
.k-pay { justify-self: start; display: flex; align-items: center; gap: calc(8 * var(--u)); padding: calc(10 * var(--u)) calc(12 * var(--u)); border-radius: calc(12 * var(--u));
  background: color-mix(in srgb, var(--a-slate) 12%, var(--a-surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--a-slate) 50%, transparent); font: 700 calc(13 * var(--u))/1 var(--sans); color: var(--a-slate); }
.k-pay .i { --s: 22; }
.k-who { display: flex; align-items: baseline; justify-content: space-between; }
.k-who strong { font: 500 calc(24 * var(--u))/1.21 var(--serif); }
.k-who b { font: 600 calc(15 * var(--u))/1 var(--sans); font-variant-numeric: tabular-nums; }
.k-items { display: flex; align-items: flex-start; gap: calc(8 * var(--u)); }
.k-items .a-photo { width: calc(48 * var(--u)); height: calc(48 * var(--u)); border-radius: calc(10 * var(--u)); }
.k-items p { display: grid; gap: calc(4 * var(--u)); font: 500 calc(14 * var(--u))/1.3 var(--sans); }
.k-items p b { font-weight: 700; color: var(--a-gold-deep); }
.k-items small { font: 400 calc(13 * var(--u))/1 var(--sans); color: var(--a-muted); }
.k-note { font: italic 500 calc(16 * var(--u))/1.2 var(--serif); color: var(--a-gold-deep); }
.k-rule { height: 1px; background: var(--a-line); }
.k-line { display: flex; align-items: center; gap: calc(8 * var(--u)); font: 500 calc(12.5 * var(--u))/1.3 var(--sans); color: #282c27cc; }
.k-line .i { --s: 15; color: var(--a-gold); flex: none; }
.k-line.is-money { font-weight: 400; color: var(--a-muted); }
.k-line.is-money .i { --s: 16; color: var(--a-gold-deep); }
.k-action { margin-top: calc(6 * var(--u)); transition: background .3s, color .3s, box-shadow .3s; }
.k-action.is-quiet { background: var(--a-surface); box-shadow: inset 0 0 0 1px var(--a-line); color: var(--a-ink); }
.k-ticket.is-arriving { animation: k-arrive .7s var(--a-spring) both; }
@keyframes k-arrive { from { opacity: 0; transform: translateY(calc(-14 * var(--u))) scale(.97); } }
.k-ticket.is-leaving { animation: k-leave .5s ease both; }
@keyframes k-leave { to { opacity: 0; transform: scale(.96); } }
.k-receipt { display: flex; flex-direction: column; }
.k-sheet-nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: calc(64 * var(--u)); padding: 0 calc(16 * var(--u)); }
.k-sheet-nav span { grid-column: 2; font: 600 calc(17 * var(--u))/1 var(--sans); }
.k-sheet-nav b { grid-column: 3; justify-self: end; display: grid; place-items: center; height: calc(44 * var(--u)); padding: 0 calc(16 * var(--u)); border-radius: 99px;
  background: var(--a-surface); box-shadow: 0 calc(2 * var(--u)) calc(10 * var(--u)) #14110f14; font: 500 calc(17 * var(--u))/1 var(--sans); }
.k-receipt-body { display: grid; gap: calc(16 * var(--u)); padding: calc(8 * var(--u)) calc(16 * var(--u)) calc(40 * var(--u)); }
.k-sent { font: 400 calc(13 * var(--u))/1 var(--sans); color: var(--a-muted); }
.k-proof { padding: calc(24 * var(--u)) calc(26 * var(--u)); border-radius: calc(18 * var(--u)); background: var(--a-wash); }
.k-proof-paper { display: grid; justify-items: center; padding: calc(28 * var(--u)) calc(22 * var(--u)) calc(16 * var(--u)); border-radius: calc(12 * var(--u)); background: #fff;
  box-shadow: 0 0 0 1px #e3e6e1, 0 calc(4 * var(--u)) calc(14 * var(--u)) #14110f0d; font-family: -apple-system, 'SF Pro Text', system-ui, sans-serif; color: #1d2b22; }
.k-proof-check { display: grid; place-items: center; width: calc(56 * var(--u)); height: calc(56 * var(--u)); border-radius: 50%; background: #2f7d52; color: #fff; }
.k-proof-check .i { --s: 30; stroke-width: 2.6; }
.k-proof-title { margin-top: calc(14 * var(--u)); font-size: calc(17 * var(--u)); font-weight: 600; }
.k-proof-amount { margin-top: calc(2 * var(--u)); font-size: calc(36 * var(--u)); font-weight: 700; letter-spacing: -.01em; }
.k-proof dl { display: grid; grid-template-columns: auto 1fr; width: 100%; margin: calc(18 * var(--u)) 0 0; font-size: calc(13.5 * var(--u)); }
.k-proof dt, .k-proof dd { margin: 0; padding: calc(11 * var(--u)) 0; border-bottom: 1px solid #eceeea; }
.k-proof dt { color: #6b746d; }
.k-proof dd { text-align: right; font-weight: 500; }
.k-proof-note { margin-top: calc(18 * var(--u)); font-size: calc(10 * var(--u)); color: #8a918b; }
.app .iphone-notice { z-index: 35; top: calc(54 * var(--u)); }
.app .celebrate { z-index: 26; }

/* Without scripts a drawn app shows the real screenshot it was drawn from. */
.a-fallback { position: absolute; inset: 0; z-index: 50; width: 100%; height: 100%; object-fit: cover; }
.js .a-fallback { display: none; }

/* An iOS switch: olive for availability and operation, gold for the week. */
.h-switch { position: relative; flex: none; width: calc(51 * var(--u)); height: calc(31 * var(--u)); border-radius: 99px; background: #78788029; transition: background .25s; }
.h-switch::after { content: ''; position: absolute; top: calc(2 * var(--u)); left: calc(2 * var(--u)); width: calc(27 * var(--u)); height: calc(27 * var(--u)); border-radius: 50%; background: #fff;
  box-shadow: 0 calc(3 * var(--u)) calc(8 * var(--u)) #00000026, 0 calc(1 * var(--u)) calc(1 * var(--u)) #00000010; transition: transform .3s var(--a-spring); }
.h-switch.is-on { background: var(--a-gold-deep); }
.h-switch.is-on.is-success { background: var(--a-success); }
.h-switch.is-on::after { transform: translateX(calc(20 * var(--u))); }

/* «Tu carta» (CatalogView): products with their photo, price and availability. */
.c-new { display: flex; align-items: center; gap: calc(6 * var(--u)); height: calc(44 * var(--u)); padding: 0 calc(16 * var(--u)); border-radius: 99px; background: var(--a-gold-detail);
  font: 600 calc(14 * var(--u))/1 var(--sans); color: var(--a-night); margin-bottom: calc(-24 * var(--u)); }
.c-new .i { --s: 14; }
.c-chip { flex: none; display: flex; align-items: center; gap: calc(6 * var(--u)); height: calc(38 * var(--u)); padding: 0 calc(14 * var(--u)); border-radius: 99px; background: var(--a-surface);
  border: 1px solid var(--a-line); font: 600 calc(13 * var(--u))/1 var(--sans); transition: background .25s, border-color .25s; }
.c-chip b { font: 700 calc(12 * var(--u))/1 var(--sans); color: var(--a-muted); }
.c-chip.is-on { background: var(--a-gold-detail); border-color: transparent; }
.c-chip.is-on b { color: var(--a-night); }
.c-section { display: flex; align-items: baseline; gap: calc(8 * var(--u)); margin: calc(24 * var(--u)) 0 calc(12 * var(--u)); font: 500 calc(24 * var(--u))/1.2 var(--serif); }
.c-section b { font: 700 calc(12 * var(--u))/1 var(--sans); color: var(--a-muted); }
.c-row { display: flex; align-items: flex-start; gap: calc(12 * var(--u)); margin-bottom: calc(12 * var(--u)); padding: calc(12 * var(--u)); background: var(--a-surface); border: 1px solid var(--a-line); border-radius: calc(14 * var(--u)); }
.c-row .a-photo { width: calc(84 * var(--u)); height: calc(84 * var(--u)); border-radius: calc(14 * var(--u)); transition: filter .4s, opacity .4s; }
.c-row-text { flex: 1; min-width: 0; display: grid; gap: calc(5 * var(--u)); }
.c-row-text strong { font: 600 calc(15 * var(--u))/1.25 var(--sans); }
.c-row-text small { font: 400 calc(12.5 * var(--u))/1.35 var(--sans); color: var(--a-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.c-row-text b { font: 500 calc(22 * var(--u))/1.1 var(--serif); transition: color .3s; }
.c-avail { display: grid; justify-items: end; gap: calc(4 * var(--u)); min-width: calc(52 * var(--u)); }
.c-avail .h-switch.is-on { background: var(--a-success); }
.c-avail small { font: 600 calc(10.5 * var(--u))/1 var(--sans); color: var(--a-success); }
.c-row.is-off .a-photo { filter: saturate(.2); opacity: .7; }
.c-row.is-off .c-row-text b { color: var(--a-muted); }
.c-row.is-off .c-avail small { color: var(--a-alert); }
.a-row.is-off { opacity: .55; transition: opacity .4s; }
.a-row .a-pill.is-alert { margin-left: calc(8 * var(--u)); }

/* «Una buena perspectiva» (InsightsView). */
.i-page { padding: calc(110 * var(--u)) calc(16 * var(--u)) calc(130 * var(--u)); }
.i-nav { font-family: var(--sans); }
.i-title { margin-top: calc(6 * var(--u)); font: 500 calc(36 * var(--u))/1.21 var(--serif); }
.i-periods { display: flex; gap: calc(8 * var(--u)); margin-top: calc(18 * var(--u)); }
.i-periods span { display: grid; place-items: center; height: calc(40 * var(--u)); padding: 0 calc(14 * var(--u)); border-radius: 99px; background: var(--a-surface); border: 1px solid var(--a-line);
  font: 500 calc(13.5 * var(--u))/1 var(--sans); transition: background .25s, border-color .25s; }
.i-periods span.is-on { background: var(--a-gold-detail); border-color: transparent; }
.i-range { display: flex; align-items: center; justify-content: space-between; margin-top: calc(16 * var(--u)); font: 400 calc(13 * var(--u))/1 var(--sans); color: var(--a-muted); }
.i-range > span { display: flex; align-items: center; gap: calc(6 * var(--u)); }
.i-range .i { --s: 13; }
.i-range b { display: flex; align-items: center; gap: calc(5 * var(--u)); height: calc(36 * var(--u)); padding: 0 calc(14 * var(--u)); border-radius: 99px; border: 1px solid var(--a-line); font-weight: 600; color: var(--a-gold-deep); }
.i-range b .i { rotate: 90deg; }
.i-hero { margin-top: calc(18 * var(--u)); padding: calc(24 * var(--u)); border-radius: calc(22 * var(--u)); background: radial-gradient(ellipse at 20% 0%, #3a2c1d, #1d1712 70%); color: var(--a-bone);
  box-shadow: 0 calc(10 * var(--u)) calc(26 * var(--u)) #14110f40; }
.i-label { font: 600 calc(10.5 * var(--u))/1 var(--sans); letter-spacing: calc(1.8 * var(--u)); text-transform: uppercase; color: var(--a-gold-bright); }
.i-big { margin-top: calc(12 * var(--u)); font: 500 calc(40 * var(--u))/1 var(--serif); font-variant-numeric: tabular-nums; }
.i-change { display: flex; align-items: center; gap: calc(6 * var(--u)); margin-top: calc(10 * var(--u)); font: 400 calc(13 * var(--u))/1 var(--sans); color: #c9bc9d; }
.i-change .i { --s: 13; rotate: -90deg; color: #8fb86a; }
.i-change b { color: #8fb86a; font-weight: 600; }
.i-figs { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(10 * var(--u)); margin-top: calc(18 * var(--u)); padding-top: calc(16 * var(--u)); border-top: 1px solid #ffffff1f; }
.i-figs p { display: grid; gap: calc(8 * var(--u)); }
.i-figs small { font: 600 calc(9 * var(--u))/1.3 var(--sans); letter-spacing: calc(1.4 * var(--u)); text-transform: uppercase; color: #c9bc9d; }
.i-figs b { font: 500 calc(19 * var(--u))/1 var(--serif); font-variant-numeric: tabular-nums; }
.h-card { margin-top: calc(18 * var(--u)); padding: calc(16 * var(--u)); background: var(--a-surface); border: 1px solid var(--a-line); border-radius: calc(20 * var(--u)); }
.h-eyebrow { font: 600 calc(9.5 * var(--u))/1 var(--sans); letter-spacing: calc(1.8 * var(--u)); text-transform: uppercase; color: var(--a-gold-deep); }
.h-title { margin-top: calc(6 * var(--u)); font: 500 calc(24 * var(--u))/1.2 var(--serif); }
.i-bars { position: relative; display: flex; align-items: flex-end; gap: calc(10 * var(--u)); height: calc(150 * var(--u)); margin-top: calc(18 * var(--u)); padding-left: calc(40 * var(--u));
  background: linear-gradient(var(--a-line), var(--a-line)) 0 33% / 100% 1px no-repeat, linear-gradient(var(--a-line), var(--a-line)) 0 100% / 100% 1px no-repeat; }
.i-bars span { flex: 1; height: var(--h); border-radius: calc(5 * var(--u)) calc(5 * var(--u)) 0 0; background: linear-gradient(#a98a5c, #8d754e); transform-origin: bottom;
  transition: height .7s var(--a-spring); }
.i-bars span.is-low { transform: scaleY(0); }
.i-bars::before { content: attr(data-top); position: absolute; left: 0; top: 28%; font: 400 calc(11 * var(--u))/1 var(--sans); color: var(--a-muted); }
.i-axis { display: flex; justify-content: space-between; margin-top: calc(8 * var(--u)); padding-left: calc(40 * var(--u)); font: 400 calc(11 * var(--u))/1 var(--sans); color: var(--a-muted); }
.i-top ol { margin-top: calc(10 * var(--u)) !important; list-style: none; }
.i-top li { display: grid; grid-template-columns: calc(26 * var(--u)) 1fr auto; align-items: baseline; padding: calc(12 * var(--u)) 0; border-bottom: 1px solid var(--a-line); }
.i-top li > b { font: 500 calc(18 * var(--u))/1 var(--serif); color: var(--a-gold-deep); }
.i-top li p { display: grid; gap: calc(3 * var(--u)); font: 600 calc(14 * var(--u))/1.2 var(--sans); }
.i-top li small { font: 400 calc(12 * var(--u))/1 var(--sans); color: var(--a-muted); }
.i-top li > span { font: 500 calc(14 * var(--u))/1 var(--sans); }

/* «Tu comercio» (SettingsView): the day's operation and the weekly hours. */
.h-op { display: flex; align-items: center; gap: calc(12 * var(--u)); margin-top: calc(12 * var(--u)); padding: calc(12 * var(--u)); border-radius: calc(14 * var(--u)); background: var(--a-wash); }
.h-op > i { flex: none; width: calc(10 * var(--u)); height: calc(10 * var(--u)); border-radius: 50%; background: var(--a-success); transition: background .3s; }
.h-op p { flex: 1; display: grid; gap: calc(2 * var(--u)); font: 600 calc(15 * var(--u))/1.25 var(--sans); }
.h-op small { font: 400 calc(12.5 * var(--u))/1.35 var(--sans); color: var(--a-muted); }
.h-card.is-paused .h-op > i { background: var(--a-muted); }
.h-meta { display: flex; align-items: center; justify-content: space-between; gap: calc(8 * var(--u)); margin-top: calc(12 * var(--u)); font: 400 calc(13 * var(--u))/1.2 var(--sans); }
.h-meta > span:first-child { display: flex; align-items: center; gap: calc(6 * var(--u)); }
.h-meta .i { --s: 15; color: var(--a-gold); }
.h-note { margin-top: calc(8 * var(--u)); font: 400 calc(12 * var(--u))/1.4 var(--sans); color: var(--a-muted); }
.h-day { padding: calc(14 * var(--u)) 0; border-bottom: 1px solid var(--a-line); }
.h-day:last-child { border-bottom: 0; }
.h-day-head { display: flex; align-items: center; justify-content: space-between; font: 500 calc(15 * var(--u))/1 var(--sans); }
.h-slots { display: flex; align-items: center; gap: calc(10 * var(--u)); margin-top: calc(10 * var(--u)); }
.h-slots i { font: 400 calc(12.5 * var(--u))/1 var(--sans); color: var(--a-muted); font-style: normal; }
.h-time { display: grid; place-items: center; min-width: calc(58 * var(--u)); height: calc(36 * var(--u)); padding: 0 calc(10 * var(--u)); border-radius: calc(10 * var(--u)); background: #7676801f;
  font: 400 calc(16 * var(--u))/1 var(--sans); font-variant-numeric: tabular-nums; transition: background .25s; }
.h-time.is-editing { background: #d4af6247; }
.h-add { display: flex; align-items: center; gap: calc(5 * var(--u)); margin-top: calc(10 * var(--u)); font: 600 calc(13 * var(--u))/1 var(--sans); color: var(--a-gold-deep); }
.h-add .i { --s: 12; }
.h-closed { display: none; margin-top: calc(10 * var(--u)); font: 400 calc(13 * var(--u))/1 var(--sans); color: var(--a-muted); }
.h-day.is-closed .h-slots, .h-day.is-closed .h-add { display: none; }
.h-day.is-closed .h-closed { display: block; }

/* Talaria Domicilios · Tu turno (ShiftView, OfferView, the active delivery). */
.d-avatar { display: grid; place-items: center; width: calc(46 * var(--u)); height: calc(46 * var(--u)); margin-bottom: calc(-24 * var(--u)); border-radius: 50%; background: var(--a-gold-detail);
  font: 500 calc(20 * var(--u))/1 var(--serif); color: var(--a-night); }
.d-status { display: grid; gap: calc(10 * var(--u)); margin-top: calc(20 * var(--u)); padding: calc(20 * var(--u)) calc(24 * var(--u)); border-radius: calc(24 * var(--u));
  background: radial-gradient(ellipse at 20% 0%, #3a2c1d, #1d1712 75%); color: var(--a-bone); box-shadow: 0 calc(10 * var(--u)) calc(26 * var(--u)) #14110f40; transition: opacity .5s, margin .6s var(--a-spring); }
.d-on { display: flex; align-items: center; gap: calc(7 * var(--u)); font: 600 calc(10.5 * var(--u))/1 var(--sans); letter-spacing: calc(1.8 * var(--u)); text-transform: uppercase; color: #9db07a; }
.d-on i { width: calc(8 * var(--u)); height: calc(8 * var(--u)); border-radius: 50%; background: #8fb86a; }
.d-on span { display: flex; align-items: center; gap: calc(5 * var(--u)); margin-left: auto; letter-spacing: 0; text-transform: none; font-size: calc(12 * var(--u)); color: #e9dfc9; }
.d-on .i { --s: 15; }
.d-status strong { font: 500 calc(30 * var(--u))/1.2 var(--serif); }
.d-end { display: grid; place-items: center; height: calc(46 * var(--u)); border-radius: 99px; border: 1px solid #b98a3580; font: 600 calc(14 * var(--u))/1 var(--sans); color: var(--a-gold-bright); }
.d-slot { position: relative; margin-top: calc(16 * var(--u)); transition: height .6s var(--a-spring); }
.d-card { position: absolute; left: 0; right: 0; top: 0; display: grid; gap: calc(12 * var(--u)); padding: calc(16 * var(--u)); border-radius: calc(22 * var(--u)); background: var(--a-surface);
  border: 1px solid var(--a-line); opacity: 0; visibility: hidden; transform: translateY(calc(16 * var(--u))) scale(.98); transition: opacity .45s, transform .6s var(--a-spring), visibility 0s .6s; }
.d-card.is-on { position: relative; opacity: 1; visibility: visible; transform: none; transition: opacity .45s .1s, transform .6s var(--a-spring) .1s, visibility 0s; }
.d-offer { border-color: #9d762f73; box-shadow: 0 calc(6 * var(--u)) calc(28 * var(--u)) #14110f1a; }
.d-offer-head { display: flex; align-items: flex-start; justify-content: space-between; }
.d-offer-head p { display: grid; gap: calc(6 * var(--u)); font: 600 calc(13 * var(--u))/1 var(--sans); color: var(--a-muted); }
.d-offer-head small, .d-code { font: 600 calc(10.5 * var(--u))/1 var(--sans); letter-spacing: calc(2 * var(--u)); text-transform: uppercase; color: var(--a-gold-deep); }
.d-timer { position: relative; display: grid; place-items: center; width: calc(52 * var(--u)); height: calc(52 * var(--u)); }
.d-timer svg { position: absolute; inset: 0; rotate: -90deg; }
.d-timer circle { fill: none; stroke: var(--a-line); stroke-width: 4; }
.d-timer .d-timer-left { stroke: var(--a-gold-deep); stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: var(--used, 0); transition: stroke-dashoffset 1s linear; }
.d-timer b { font: 700 calc(17 * var(--u))/1 var(--sans); color: var(--a-gold-deep); font-variant-numeric: tabular-nums; }
.d-stop { display: flex; align-items: flex-start; gap: calc(12 * var(--u)); }
.d-stop > span { display: grid; place-items: center; width: calc(36 * var(--u)); height: calc(36 * var(--u)); border-radius: 50%; color: var(--a-muted); }
.d-stop > span .i { --s: 18; }
.d-stop p { display: grid; gap: calc(3 * var(--u)); font: 500 calc(22 * var(--u))/1.2 var(--serif); }
.d-stop small { font: 400 calc(13.5 * var(--u))/1.3 var(--sans); color: var(--a-muted); }
.d-money { display: flex; align-items: center; justify-content: space-between; gap: calc(10 * var(--u)); font: 500 calc(14 * var(--u))/1.25 var(--sans); text-align: right; }
.d-gain { display: flex; align-items: flex-end; justify-content: space-between; padding: calc(14 * var(--u)); border-radius: calc(16 * var(--u)); background: var(--a-wash); border: 1px solid var(--a-line); }
.d-gain p { display: grid; gap: calc(6 * var(--u)); }
.d-gain p + p { text-align: right; font: 600 calc(14 * var(--u))/1 var(--sans); }
.d-gain small { font: 400 calc(13 * var(--u))/1 var(--sans); color: var(--a-muted); }
.d-gain p:first-child b { font: 500 calc(32 * var(--u))/1 var(--serif); }
.d-progress { display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(8 * var(--u)); list-style: none; }
.d-progress li { display: grid; gap: calc(8 * var(--u)); font: 500 calc(11.5 * var(--u))/1 var(--sans); color: var(--a-muted); transition: color .3s; }
.d-progress li::before { content: ''; height: calc(4 * var(--u)); border-radius: 99px; background: var(--a-line); transition: background .4s; }
.d-progress li.is-done::before { background: var(--a-gold-shade); }
.d-progress li.is-now { color: var(--a-ink); font-weight: 700; }
.d-progress li.is-now::before { background: var(--a-night); }
.d-title { font: 500 calc(34 * var(--u))/1.15 var(--serif); }
.d-place { font: 600 calc(19 * var(--u))/1.2 var(--sans); margin-top: calc(-4 * var(--u)); }
.d-address { display: flex; align-items: flex-start; gap: calc(8 * var(--u)); font: 400 calc(16 * var(--u))/1.35 var(--sans); color: #282c27d9; }
.d-address .i { --s: 16; flex: none; margin-top: calc(2 * var(--u)); color: var(--a-gold); }
.d-callout { display: none; gap: calc(4 * var(--u)); padding: calc(10 * var(--u)) calc(12 * var(--u)); border-left: calc(3 * var(--u)) solid var(--a-gold-deep); border-radius: calc(4 * var(--u));
  background: #ebe2cf; font: italic 500 calc(17 * var(--u))/1.3 var(--serif); }
.d-callout small { font: 600 calc(9.5 * var(--u))/1 var(--sans); font-style: normal; letter-spacing: calc(1.8 * var(--u)); text-transform: uppercase; color: var(--a-gold-deep); }
.d-trip.is-client .d-callout { display: grid; }
.d-trip.is-client .d-products { display: none; }
.d-products { display: grid; gap: calc(8 * var(--u)); padding: calc(12 * var(--u)); border-radius: calc(16 * var(--u)); border: 1px solid var(--a-line); background: var(--a-wash); font: 400 calc(15 * var(--u))/1.3 var(--sans); }
.d-products p { display: flex; align-items: center; justify-content: space-between; font: 500 calc(20 * var(--u))/1 var(--serif); }
.d-products small { font: 400 calc(12.5 * var(--u))/1.3 var(--sans); color: var(--a-muted); }
.d-wait { justify-items: center; text-align: center; padding: calc(28 * var(--u)) calc(20 * var(--u)); }
.d-signal { display: grid; place-items: center; width: calc(72 * var(--u)); height: calc(72 * var(--u)); border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fcfaf5, #efe9dc 75%);
  box-shadow: inset 0 0 0 1px #e6e0d2; color: var(--a-gold-deep); }
.d-signal .i { --s: 28; }
.d-wait.is-on .d-signal { animation: signal 2.2s ease-out infinite; }
@keyframes signal { 0% { box-shadow: inset 0 0 0 1px #e6e0d2, 0 0 0 0 #9d762f40; } 70%, 100% { box-shadow: inset 0 0 0 1px #e6e0d2, 0 0 0 calc(18 * var(--u)) #9d762f00; } }
.d-wait strong { margin-top: calc(14 * var(--u)); font: 500 calc(26 * var(--u))/1.2 var(--serif); }
.d-wait small { font: 400 calc(13.5 * var(--u))/1.4 var(--sans); color: var(--a-muted); }
.d-done { position: absolute; z-index: 3; left: 50%; top: calc(110 * var(--u)); display: grid; justify-items: center; gap: calc(6 * var(--u)); translate: -50% 0; pointer-events: none; opacity: 0; }
.d-done::before { content: ''; position: absolute; z-index: -1; left: 50%; top: 40%; width: calc(330 * var(--u)); height: calc(260 * var(--u)); translate: -50% -50%;
  background: radial-gradient(closest-side, #f6f3ecf2 30%, #f6f3ec00); }
.d-done span { display: grid; place-items: center; width: calc(72 * var(--u)); height: calc(72 * var(--u)); border-radius: 50%; background: radial-gradient(circle at 35% 30%, #6f8f45, #46602a 70%); color: #fff;
  box-shadow: 0 calc(8 * var(--u)) calc(20 * var(--u)) #46602a66; }
.d-done span .i { --s: 34; stroke-width: 2.4; }
.d-done strong { font: italic 600 calc(24 * var(--u))/1 var(--serif); color: var(--a-success); }
.d-done small { font: 700 calc(16 * var(--u))/1 var(--sans); color: var(--a-gold-deep); }
.d-done.is-on { animation: done-show 2.4s var(--a-spring) both; }
.d-done.is-on small { animation: gain-rise 2.4s ease both; }
@keyframes done-show { 0% { opacity: 0; transform: scale(.6); } 18% { opacity: 1; transform: scale(1.06); } 28%, 78% { opacity: 1; transform: none; } 100% { opacity: 0; transform: scale(.96); } }
@keyframes gain-rise { 0%, 30% { opacity: 0; transform: translateY(calc(8 * var(--u))); } 45%, 70% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(calc(70 * var(--u))) scale(.8); } }
.d-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: calc(12 * var(--u)); margin-top: calc(16 * var(--u)); }
.d-metrics p { display: grid; gap: calc(14 * var(--u)); padding: calc(16 * var(--u)); border-radius: calc(18 * var(--u)); background: var(--a-surface); border: 1px solid var(--a-line); }
.d-metrics small { display: flex; align-items: center; gap: calc(6 * var(--u)); font: 600 calc(10 * var(--u))/1 var(--sans); letter-spacing: calc(1.6 * var(--u)); text-transform: uppercase; color: var(--a-muted); }
.d-metrics small .i { --s: 15; color: var(--a-gold); }
.d-metrics b { font: 500 calc(26 * var(--u))/1 var(--serif); font-variant-numeric: tabular-nums; transition: color .4s; }
.d-metrics b.is-new { color: var(--a-success); }
.d-actions { display: flex; gap: calc(10 * var(--u)); transform: translateY(110%); transition: transform .5s var(--a-spring); }
.d-actions.is-on { transform: none; }
.d-actions .a-quiet { width: calc(118 * var(--u)); min-height: calc(52 * var(--u)); font-size: calc(16 * var(--u)); font-weight: 500; }
.d-actions .a-primary { flex: 1; min-height: calc(52 * var(--u)); border-radius: 99px; background: linear-gradient(100deg, #e8cc87, #d4af62 45%, #b78a39); font-size: calc(16 * var(--u)); font-weight: 500; }
.d-actions.is-single .a-quiet { display: none; }
.app-courier .a-tabs { z-index: 21; }

/* ── Promise ────────────────────────────────────────────── */

.promise { background: var(--surface); border-bottom: 1px solid var(--line); }
.promise-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.promise article { padding: clamp(32px, 4vw, 52px) clamp(20px, 3vw, 44px); border-left: 1px solid var(--line); }
.promise article:first-child { border-left: 0; padding-left: 0; }
.promise h2 { margin: 18px 0 10px; font-size: 30px; }
.promise p { margin: 0; color: var(--muted); font-size: 15.5px; }
.line-icon { width: 40px; height: 40px; fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.motion .line-icon path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s var(--ease-out) .25s; }
.motion .line-icon path + path { transition-delay: .6s; }
.motion .is-visible .line-icon path { stroke-dashoffset: 0; }

/* ── Sections ───────────────────────────────────────────── */

.section { padding: clamp(80px, 11vw, 150px) 0; }
.section-intro { max-width: 760px; margin-bottom: clamp(44px, 6vw, 76px); }
.section-intro h2, .feature-copy h2, .privacy h2, .money h2, .map-intro h2 { font-size: clamp(40px, 5.4vw, 70px); letter-spacing: -0.02em; }
.section-intro > p:not(.eyebrow) { margin-top: 20px; color: var(--muted); }

.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(18px, 2.5vw, 34px); margin: 0; padding: 0; list-style: none; }
.steps li { position: relative; padding-top: 28px; border-top: 1px solid var(--line); }
.steps li::before { content: ''; position: absolute; top: -1px; left: 0; width: 46px; height: 2px; background: var(--gold-grad); }
.motion .steps li::before { width: 100%; transform-origin: left; transform: scaleX(var(--fill, 0)); }
.step-numeral { display: block; margin-bottom: 18px; font: italic 500 58px/0.8 var(--serif); color: var(--gold); transform-origin: 0 100%; }
.motion .steps .step-numeral { opacity: .28; transform: translateY(10px) scale(.92); transition: opacity .8s var(--ease-out), transform .9s var(--ease-spring); }
.motion .steps li.is-lit .step-numeral { opacity: 1; transform: none; }
.steps h3 { font-size: 30px; margin-bottom: 12px; }
.steps p { color: var(--muted); font-size: 15.5px; margin: 0; }

/* ── The delivery tour on the map of Tame ───────────────── */

.map-section {
  position: relative;
  padding: clamp(80px, 10vw, 140px) 0 clamp(40px, 5vw, 64px);
  background: radial-gradient(ellipse 60% 50% at 70% 30%, #2c2418 0%, transparent 70%), var(--night);
  color: var(--bone);
}
.map-intro { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(24px, 5vw, 80px); align-items: end; margin-bottom: clamp(36px, 5vw, 64px); }
.map-intro .eyebrow { color: var(--gold-bright); }
.map-intro h2 em { color: var(--gold-bright); }
.map-intro > p { margin: 0; max-width: 46ch; color: var(--bone-muted); }
.map-note { margin: 22px auto 0; font-size: 14px; color: var(--bone-faint); }

/* Without motion the tour is a still map beside its four steps. */
.tour-stage {
  position: relative; max-width: 1240px; margin: 0 auto; padding: 0 var(--gutter);
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 4vw, 60px); align-items: center;
}
.tour-map { position: relative; order: 2; margin: 0; color: #c9a45e; --minor-opacity: .36; --major-opacity: .85; --minor-width: calc(var(--k, 1) * 1.1px); --major-width: calc(var(--k, 1) * 2.6px); }
.tour-map svg { width: 100%; height: auto; aspect-ratio: 740 / 500; }
.tour-flight { fill: none; stroke: var(--gold-highlight); stroke-width: calc(var(--k, 1) * 2.4px); stroke-dasharray: .012 .012; stroke-linecap: round; filter: drop-shadow(0 0 6px #e6bd62aa); }
.tour-route { fill: none; stroke: var(--olive-bright); stroke-width: calc(var(--k, 1) * 5px); stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 8px #9db07a88); }
.map-label { font: 600 17px var(--sans); fill: var(--bone); paint-order: stroke; stroke: var(--night); stroke-width: 5px; }
.tour-panel { order: 1; }
.tour-steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 20px; counter-reset: tour; }
.tour-steps li { position: relative; padding-left: 52px; color: var(--bone-faint); font-size: 15.5px; line-height: 1.5; counter-increment: tour; }
.tour-steps strong { display: block; margin-bottom: 4px; font: 500 24px/1.15 var(--serif); color: var(--bone); }
.tour-step-key {
  position: absolute; left: 0; top: 2px; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; border: 1px solid #b98a3577; color: var(--gold-bright);
  font: 600 12px/1 var(--sans); letter-spacing: .04em;
}
.tour-step-key::before { content: counter(tour, decimal-leading-zero); }
.tour-step-flight .tour-step-key { box-shadow: inset 0 -3px 0 -1px var(--gold-bright); }
.tour-step-ride .tour-step-key { box-shadow: inset 0 -3px 0 -1px var(--olive-bright); }
.tour-meter, .tour-pin, .tour-comet, .tour-courier, .tour-progress, .tour-skip { display: none; }

.motion .tour { height: 440svh; }
.motion .tour-stage {
  position: sticky; top: 0; display: block; max-width: none; height: 100svh; padding: 0; overflow: hidden;
  background: radial-gradient(ellipse 70% 70% at 62% 50%, #231d15, var(--night) 75%);
}
.motion .tour-stage::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(90deg, #14110fe6 0, #14110f99 26%, transparent 52%), radial-gradient(ellipse 80% 80% at 62% 50%, transparent 55%, #14110f 100%);
}
.motion .tour-map { position: absolute; inset: 0; }
.motion .tour-map svg { width: 100%; height: 100%; aspect-ratio: auto; }
.motion .tour-map { --street-dash: 1200 1200; --draw: 1; }
.motion .tour.is-drawn .tour-map { animation: draw-city 3.6s var(--ease-out) forwards; }
.motion .tour-static { display: none; }
.motion .tour-flight { stroke-dasharray: 0 1; }
.motion .tour-route { stroke-dasharray: 0 1; }
.tour-approach { display: none; fill: none; stroke: var(--olive-bright); stroke-width: calc(var(--k, 1) * 3px); stroke-linecap: round; stroke-linejoin: round; }
.motion .tour-approach { display: inline; stroke-dasharray: 0 1; opacity: 0; transition: opacity .4s; }
@keyframes draw-city { from { --draw: 1; } to { --draw: 0; } }

.motion .tour-pin, .motion .tour-comet, .motion .tour-courier { display: block; position: absolute; left: 0; top: 0; z-index: 2; will-change: transform; pointer-events: none; }
/* A pin stands on its place: the tip of the icon is the point, the rings circle the icon. */
.tour-pin-dot { position: absolute; left: -20px; top: -47px; width: 40px; height: 48px; transform: scale(0); transform-origin: 50% 98%; transition: transform .6s var(--ease-spring); filter: drop-shadow(0 4px 6px #0009); }
.tour-map .tour-pin-dot svg { width: 100%; height: 100%; max-width: none; overflow: visible; }
.tour-pin-dot::before, .tour-pin-dot::after { content: ''; position: absolute; left: -3px; top: -3px; width: 46px; height: 46px; border-radius: 50%; border: 2px solid currentColor; opacity: 0; }
.tour-pin-business { color: var(--gold-bright); }
.tour-pin-client { color: var(--olive-bright); }
.tour-pin.is-shown .tour-pin-dot { transform: scale(1); }
.tour-pin.is-busy .tour-pin-dot::before { animation: pulse-ring 1.6s var(--ease-out) infinite; }
.tour-pin.is-busy .tour-pin-dot::after { animation: pulse-ring 1.6s var(--ease-out) .8s infinite; }
.tour-pin.is-arrived { --pin-home: var(--olive-bright); }
/* The order has just gone in: the business pin takes it with a small bounce and a ring. */
.tour-pin.is-received .tour-pin-dot { animation: received .7s var(--ease-spring); }
.tour-pin.is-received .tour-pin-dot::after { animation: pulse-ring 1s var(--ease-out); }
@keyframes received { 40% { transform: scale(1.18); } }
.tour-pin.is-arrived .tour-pin-dot::before { animation: pulse-ring 1.2s var(--ease-out); }
.tour-pin-label {
  position: absolute; left: 26px; top: -42px; white-space: nowrap;
  padding: 6px 12px; border-radius: 99px; border: 1px solid #b98a3555;
  background: #14110fd9; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font: 600 13px/1.2 var(--sans); color: var(--bone);
  opacity: 0; transform: translateX(-6px); transition: opacity .5s, transform .6s var(--ease-out);
}
.tour-pin-client .tour-pin-label { left: auto; right: 26px; transform: translateX(6px); }
.tour-pin.is-shown .tour-pin-label { opacity: 1; transform: none; }
.tour-pin.is-arrived .tour-pin-label { border-color: #9db07a88; color: #e3ecd2; }
/* The order flies to the business as the Talaria mark. */
.tour-comet { width: 0; height: 0; opacity: 0; }
.tour-comet img { position: absolute; left: -24px; top: -19px; width: 48px; height: auto; max-width: none; filter: drop-shadow(0 0 8px #f7de97aa) drop-shadow(0 0 22px #e6bd6288); }
.tour-courier { opacity: 0; transition: opacity .4s; color: var(--olive-bright); }
.tour-map .tour-courier svg { position: absolute; left: -21px; top: -21px; width: 42px; height: 42px; max-width: none; filter: drop-shadow(0 3px 5px #0009); }
.tour-courier::before { content: ''; position: absolute; left: -21px; top: -21px; width: 42px; height: 42px; border-radius: 50%; border: 2px solid currentColor; animation: pulse-ring 1.8s var(--ease-out) infinite; }
.tour-courier.is-shown { opacity: 1; }
.tour-courier::before { animation-play-state: paused; opacity: 0; }
.tour-courier.is-riding::before { animation-play-state: running; opacity: 1; }
.tour-courier.is-done .tour-courier-label { opacity: 0; }
.tour-courier-label { position: absolute; left: 26px; top: -13px; padding: 4px 10px; border-radius: 99px; border: 1px solid #9db07a66; background: #14110fd9; font: 600 12px/1.2 var(--sans); color: #e3ecd2; white-space: nowrap; transition: opacity .4s; }
@keyframes pulse-ring { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(3.2); } }

.motion .tour-panel {
  position: absolute; z-index: 3; left: var(--gutter); top: 50%; transform: translateY(-50%);
  width: min(410px, 38vw); padding: 30px 30px 26px;
  border-radius: 24px; border: 1px solid #b98a3540;
  background: #1a1612b8; backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: 0 40px 80px -40px #000;
}
.motion .tour-steps li { opacity: .38; transition: opacity .5s, color .5s; }
.motion .tour-steps li.is-past { opacity: .6; }
.motion .tour-steps li.is-active { opacity: 1; color: var(--bone-muted); }
.motion .tour-steps li .tour-step-key { transition: background-color .5s, color .5s, border-color .5s; }
.motion .tour-steps li.is-active .tour-step-key { background: var(--gold-bright); border-color: var(--gold-bright); color: var(--night); box-shadow: 0 0 22px #e6bd6266; }
.motion .tour-steps li.is-past .tour-step-key { border-color: var(--gold-bright); }
.motion .tour-meter { display: flex; align-items: baseline; gap: 8px; margin: 24px 0 0; padding-top: 18px; border-top: 1px solid #ffffff14; color: var(--bone-faint); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; }
.tour-meter strong { margin-left: auto; font: 500 40px/1 var(--serif); letter-spacing: 0; color: var(--gold-highlight); font-variant-numeric: tabular-nums; }
.tour-meter small { font-size: 14px; letter-spacing: 0; text-transform: none; }
.motion .tour-progress { display: block; position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: 2px; background: #ffffff10; }
.tour-progress span { display: block; height: 100%; background: var(--gold-grad); transform-origin: left; transform: scaleX(var(--p, 0)); }
.motion .tour-skip {
  display: inline-flex; gap: 8px; position: absolute; z-index: 3; right: var(--gutter); bottom: 24px;
  padding: 9px 16px; border-radius: 99px; border: 1px solid #ffffff1f; background: #14110f99;
  font-size: 13px; color: var(--bone-faint); text-decoration: none; transition: color .2s, border-color .2s;
}
.tour-skip:hover { color: var(--gold-bright); border-color: #b98a3588; }

@media (min-width: 901px) and (max-height: 820px) {
  .motion .tour-panel { padding: 22px 24px 18px; }
  .motion .tour-steps { gap: 12px; }
  .motion .tour-steps strong { font-size: 21px; margin: 6px 0 0; }
  .motion .tour-step-text { display: block; max-height: 0; overflow: hidden; opacity: 0; transition: max-height .5s var(--ease-out), opacity .4s; }
  .motion .tour-steps li.is-active .tour-step-text { max-height: 6em; opacity: 1; margin-top: 4px; }
  .motion .tour-meter { margin-top: 14px; padding-top: 12px; }
  .tour-meter strong { font-size: 32px; }
}

/* ── Ordering: what the client app does ─────────────────── */

.ask { background: var(--paper); }
.bento { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 22px); }
.bento-card {
  position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 28px;
  padding: clamp(24px, 2.6vw, 34px); border-radius: 26px;
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow);
}
.bento-wide { grid-column: span 2; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: clamp(20px, 3vw, 40px); }
/* The piece sits in the middle of the room its card has; the words stay at the foot, level across the row. */
.bento-card:not(.bento-wide) > :is(.mini, .bento-art) { margin-block: auto; }
.bento-copy h3 { font-size: clamp(26px, 2.4vw, 32px); margin-bottom: 10px; }
.bento-copy p { margin: 0; color: var(--muted); font-size: 15.5px; }
.bento-art { position: relative; min-height: 150px; display: grid; align-content: center; }
.bento-card[data-live]:not(.is-live) * { animation-play-state: paused !important; }

/* A piece of the app inside a card, drawn at the app's scale: the card is 393 points wide. */
/* In a wide card the piece keeps a phone's proportions beside the words. */
.bento-wide .mini { justify-self: center; width: 100%; max-width: 440px; }
.mini { position: relative; container-type: inline-size; border-radius: 22px; overflow: hidden; background: #f6f3ec;
  box-shadow: 0 0 0 1px var(--line), 0 26px 44px -30px #14110f80; }
/* On a phone the pieces come a little closer, so their type stays readable. */
.mini > .app { --u: calc(100cqw / var(--mini-base, 393)); }
@media (max-width: 640px) { .mini { --mini-base: 340; } .mini-track { --mini-base: 380; } }
.mini > .app { position: relative; inset: auto; display: flex; flex-direction: column; height: auto; padding: calc(18 * var(--u)) calc(20 * var(--u)); }
.mini-near { aspect-ratio: auto; }
.mini-search { aspect-ratio: 393 / 440; }
.mini-search > .app { height: 100%; padding-bottom: 0; }
.mini-pair { aspect-ratio: auto; }
.mini-place { aspect-ratio: auto; }
.mini-track { aspect-ratio: auto; }
.mini-track > .app { height: auto; padding: calc(14 * var(--u)); }
.a-rail-native { display: flex; gap: calc(12 * var(--u)); margin: calc(12 * var(--u)) calc(-20 * var(--u)) calc(-8 * var(--u)); padding: calc(4 * var(--u)) calc(20 * var(--u)) calc(14 * var(--u));
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-y: none; scroll-snap-type: x mandatory; scroll-padding: 0 calc(20 * var(--u)); scrollbar-width: none; overscroll-behavior-x: contain; outline: none; }
.a-rail-native::-webkit-scrollbar { display: none; }
.a-rail-native > * { scroll-snap-align: start; }
.a-rail-native .a-show { cursor: grab; }
.a-input { flex: 1; min-width: 0; height: calc(48 * var(--u)); border: 0; padding: 0; background: none; outline: none; -webkit-appearance: none; appearance: none;
  font: 500 calc(15 * var(--u))/1 var(--sans); color: var(--a-ink); }
.a-input::placeholder { color: var(--a-muted); opacity: 1; }
.a-input::-webkit-search-cancel-button { display: none; }
.app .a-field { transition: border-color .2s, box-shadow .2s; cursor: text; }
.app .a-field:focus-within { border-color: var(--a-gold-bright); box-shadow: 0 0 0 calc(3 * var(--u)) #d4af6229; }
.a-clear { display: grid; place-items: center; width: calc(36 * var(--u)); height: calc(36 * var(--u)); margin-right: calc(-8 * var(--u)); border: 0; padding: 0; background: none;
  color: var(--a-muted); cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .2s; }
.a-clear .i { --s: 16; }
.is-filled .a-clear { opacity: 1; pointer-events: auto; }
.mini-search .a-results { flex: 1; margin: calc(8 * var(--u)) calc(-20 * var(--u)) 0; padding: calc(8 * var(--u)) calc(20 * var(--u)) calc(24 * var(--u)); overflow-y: auto; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(#000 85%, transparent); mask-image: linear-gradient(#000 85%, transparent); gap: calc(20 * var(--u)); align-content: start; }
.mini-search .a-results::-webkit-scrollbar { display: none; }
.a-group.is-new, .a-row.is-new { animation: a-appear .35s ease-out both; animation-delay: calc(var(--n, 0) * 45ms); }
@keyframes a-appear { from { opacity: 0; transform: translateY(calc(6 * var(--u))); } }
.a-empty { display: grid; justify-items: center; gap: calc(8 * var(--u)); padding: calc(26 * var(--u)) calc(24 * var(--u)); text-align: center; }
.a-empty span { display: grid; place-items: center; width: calc(64 * var(--u)); height: calc(64 * var(--u)); border-radius: 50%; background: var(--a-surface); border: 1px solid var(--a-line); color: var(--a-gold); }
.a-empty span .i { --s: 26; }
.a-empty strong { margin-top: calc(6 * var(--u)); font: 500 calc(24 * var(--u))/1.2 var(--serif); }
.a-empty small { font: 400 calc(13.5 * var(--u))/1.4 var(--sans); color: var(--a-muted); }
.a-pair-for { display: flex; align-items: center; gap: calc(10 * var(--u)); margin-bottom: calc(10 * var(--u)); font: 600 calc(13 * var(--u))/1 var(--sans); }
.a-pair-for .a-photo { width: calc(30 * var(--u)); height: calc(30 * var(--u)); border-radius: calc(8 * var(--u)); }
.a-pair-for small { font-weight: 400; color: var(--a-muted); }
.app button { font: inherit; color: inherit; cursor: pointer; }
.a-pair-add { border: 0; padding: 0; }
.mini-place .a-place { width: 100%; margin-top: calc(10 * var(--u)); text-align: left; -webkit-appearance: none; appearance: none; }
.a-place-title { display: flex; align-items: center; gap: calc(12 * var(--u)); margin-bottom: calc(4 * var(--u)); font: 500 calc(24 * var(--u))/1.2 var(--serif); }
.a-place-title .i { --s: 20; color: var(--a-gold); }
.mini-track .a-tcard { box-shadow: none; }
/* The card keeps one height through the six states, whatever the title's length. */
.mini-track .a-tcard-head { min-height: calc(124 * var(--u)); }

.bento-combo { background: radial-gradient(ellipse 70% 90% at 80% 50%, #2c2418, var(--night) 70%); border-color: #b98a3533; color: var(--bone); }
.bento-combo .bento-copy p { color: var(--bone-muted); }
.bento-combo h3 em { color: var(--gold-bright); }
.combo-map { width: 100%; overflow: visible; }
.combo-road { fill: none; stroke: #ffffff1c; stroke-width: 10; stroke-linecap: round; }
.combo-ride { fill: none; stroke: var(--olive-bright); stroke-width: 4; stroke-linecap: round; }
.combo-map text { font: 600 15px var(--sans); fill: var(--bone-muted); }

:root { --success: #46602a; }
@media (prefers-color-scheme: dark) { :root { --success: #8fb86a; } }

.receipt-row { display: flex; justify-content: space-between; gap: 12px; margin: 0 0 10px; padding: 12px 16px; border-radius: 14px; background: var(--paper); border: 1px solid var(--line); font-size: 14.5px; }
.receipt-row s { color: var(--muted); text-decoration-color: var(--wine); text-decoration-thickness: 2px; }
.receipt-new { border-color: color-mix(in srgb, var(--gold) 50%, transparent); }
.receipt-new b { color: var(--gold); }
.receipt-why { margin: 0; font-size: 12.5px; color: var(--muted); }
.motion .receipt-new { animation: receipt-in 5s var(--ease-out) infinite; }
@keyframes receipt-in { 0%, 14% { opacity: 0; transform: translateY(-10px); } 28%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* ── Apps ───────────────────────────────────────────────── */

.apps { background: var(--surface); border-top: 1px solid var(--line); }
.app-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 26px); }
.app-tile {
  position: relative; padding: clamp(28px, 3vw, 40px); border-radius: var(--radius);
  background: var(--paper); border: 1px solid var(--line); box-shadow: var(--shadow);
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .7s var(--ease-out), opacity .9s ease, translate .9s var(--ease-out);
}
.app-tile.is-tilting { transition: transform .12s linear, opacity .9s ease, translate .9s var(--ease-out); }
.app-tile::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), #e6bd6230, transparent 45%);
  opacity: 0; transition: opacity .4s;
}
.app-tile:hover::after { opacity: 1; }
.app-tile img { width: 76px; height: 76px; border-radius: 18px; box-shadow: 0 10px 24px -14px #000; transition: transform .6s var(--ease-spring); }
.app-tile:hover img { transform: translateY(-4px) rotate(-4deg); }
.app-tile h3 { margin: 24px 0 4px; font-size: 32px; }
.app-tile-role { margin: 0 0 18px; font: 600 12px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.app-tile ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 11px; font-size: 15.5px; color: var(--muted); }
.app-tile li { display: grid; grid-template-columns: 14px 1fr; gap: 10px; }
.app-tile li::before { content: ''; width: 6px; height: 6px; margin-top: 10px; border-radius: 50%; background: var(--gold); }
.apps-note { display: flex; align-items: center; gap: 14px; margin: 34px 0 0; color: var(--muted); font-size: 15.5px; }
.apps-note img { width: 36px; border-radius: 9px; flex: none; }

/* ── Money ──────────────────────────────────────────────── */

.money { padding: clamp(80px, 10vw, 130px) 0; background: linear-gradient(135deg, #1b1713, var(--night)); color: var(--bone); }
.money-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.money .eyebrow { color: var(--gold-bright); }
.money h2 em { color: var(--gold-bright); }
.money header > p:not(.eyebrow) { margin-top: 24px; color: var(--bone-muted); max-width: 44ch; }
.money-cards { display: grid; gap: 16px; }
.money-cards article { position: relative; padding: 26px 30px; border-radius: var(--radius); border: 1px solid #b98a3544; background: linear-gradient(135deg, #ffffff08, #ffffff02); transition: border-color .4s, background-color .4s, translate .9s var(--ease-out), opacity .9s; }
.money-cards article:hover { border-color: #e6bd6288; background-color: #ffffff05; }
.money-cards h3 { font-size: 28px; margin-bottom: 8px; color: var(--gold-highlight); }
.money-cards p { margin: 0; color: var(--bone-muted); font-size: 15.5px; }
.flow { margin: 34px 0 0; max-width: 480px; }
.flow svg { width: 100%; overflow: visible; }
.flow figcaption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.flow-edge { fill: none; stroke: #b98a3566; stroke-width: 1.5; }
.flow-later { fill: none; stroke: #ffffff30; stroke-width: 1.5; stroke-dasharray: 4 7; }
.motion .flow-later { animation: march-dash 1.4s linear infinite; }
.flow-node circle { fill: #ffffff0a; stroke: #e6bd62aa; stroke-width: 1.5; }
.flow-node text { font: 600 15px var(--sans); fill: var(--bone); }
.flow-talaria circle { stroke: #ffffff40; stroke-dasharray: 3 4; }
.flow-talaria text { fill: var(--bone-faint); }
.flow-tag { font: 500 italic 16px var(--serif); fill: var(--gold-highlight); }
.flow-tag-later { fill: var(--bone-faint); font-size: 14px; }
.flow-coin { fill: var(--gold-bright); filter: drop-shadow(0 0 6px #e6bd62); }
@keyframes march-dash { to { stroke-dashoffset: -22; } }

/* ── Features ───────────────────────────────────────────── */

.feature-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 96px); align-items: center; }
.feature-photo { margin: 0; position: relative; border-radius: 26px; overflow: hidden; aspect-ratio: 4 / 5; box-shadow: var(--shadow); }
.feature-photo img { width: 100%; height: 100%; object-fit: cover; }
.motion .feature-photo img { scale: 1.16; translate: 0 calc(var(--pp, 0) * 1%); }
.feature-photo::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px #ffffff22; }
.feature-device { margin: 0; position: relative; display: grid; place-items: center; padding: clamp(36px, 5vw, 64px) 0; border-radius: 26px; background: radial-gradient(ellipse 60% 55% at 50% 45%, #3a2e1c, transparent 75%), var(--night); box-shadow: var(--shadow); overflow: hidden; }
.feature-device::before { content: ''; position: absolute; inset: auto -10% -30% -10%; height: 60%; background: url(/assets/img/mark-gold.svg) center / contain no-repeat; opacity: .05; }
.courier-phone { position: relative; width: clamp(236px, min(22vw, 33svh), 300px); }

.feature-courier { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.feature-list { margin: 32px 0; padding: 0; list-style: none; display: grid; gap: 18px; }
.feature-list li { padding-left: 26px; position: relative; color: var(--muted); }
.feature-list li::before { content: ''; position: absolute; left: 0; top: 11px; width: 12px; height: 1.5px; background: var(--gold); }
.motion .feature-copy .feature-list li { opacity: 0; translate: 18px 0; transition: opacity .8s ease, translate .9s var(--ease-out); }
.motion .feature-copy.is-visible .feature-list li { opacity: 1; translate: none; }
.motion .feature-copy.is-visible .feature-list li:nth-child(1) { transition-delay: .25s; }
.motion .feature-copy.is-visible .feature-list li:nth-child(2) { transition-delay: .35s; }
.motion .feature-copy.is-visible .feature-list li:nth-child(3) { transition-delay: .45s; }
.motion .feature-copy.is-visible .feature-list li:nth-child(4) { transition-delay: .55s; }
.feature-list strong { color: var(--ink); font-weight: 700; }
.feature-offer { position: relative; overflow: hidden; padding: 18px 22px; border-radius: 14px; background: color-mix(in srgb, var(--gold) 9%, transparent); border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent); font-size: 15.5px; }
.motion .feature-offer::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 40%, color-mix(in srgb, var(--gold) 22%, transparent) 50%, transparent 60%) 0 0 / 300% 100% no-repeat; animation: shimmer 6s linear infinite; pointer-events: none; }
.feature-offer span { display: block; margin-bottom: 4px; font: 600 12px/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.feature-requirements { font-size: 15px; color: var(--muted); }
.feature-requirements strong { color: var(--ink); }
.feature-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 26px; margin-top: 28px; }

/* ── Managing a business: tabs and the phone ────────────── */

.manage { position: relative; overflow: hidden; background: radial-gradient(ellipse 50% 50% at 75% 60%, #2c2418, transparent 70%), var(--night); color: var(--bone); }
.manage .section-intro > p:not(.eyebrow) { color: var(--bone-muted); }
.manage .eyebrow, .manage h2 em, .manage h3 em { color: var(--gold-bright); }
.manage-tabs { display: none; }
.js .manage-tabs {
  display: flex; gap: 6px; margin: 0 0 clamp(28px, 4vw, 48px); padding: 6px;
  width: max-content; max-width: 100%; overflow-x: auto; scrollbar-width: none;
  border-radius: 99px; border: 1px solid #b98a3540; background: #ffffff06;
}
.manage-tab {
  position: relative; overflow: hidden; flex: none; display: inline-flex; align-items: center; gap: 10px;
  min-height: 46px; padding: 0 20px; border: 0; border-radius: 99px; background: none; cursor: pointer;
  font: 600 15px/1 var(--sans); color: var(--bone-faint); transition: color .3s, background-color .3s;
}
.manage-tab:hover { color: var(--bone); }
.manage-tab[aria-selected="true"] { color: var(--night); background: var(--bone); }
.manage-tab-index { font: italic 500 15px/1 var(--serif); color: var(--gold-bright); }
.manage-tab[aria-selected="true"] .manage-tab-index { color: var(--gold); }
.manage-tab-progress { position: absolute; left: 18px; right: 18px; bottom: 6px; height: 2px; border-radius: 2px; background: var(--gold-grad); transform-origin: left; transform: scaleX(0); }
.manage-tab[aria-selected="true"] .manage-tab-progress { transform: scaleX(var(--tab-p, 0)); }
.manage-panels { display: grid; gap: clamp(56px, 8vw, 96px); }
.js .manage-panels { gap: 0; }
.manage-panel { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.js .manage-panel { grid-area: 1 / 1; visibility: hidden; opacity: 0; transition: opacity .5s, visibility 0s .5s; }
.js .manage-panel.is-active { visibility: visible; opacity: 1; transition: opacity .6s; }
.manage-copy h3 { font-size: clamp(32px, 3.4vw, 46px); margin-bottom: 22px; }
.manage-copy ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.manage-copy li { position: relative; padding-left: 26px; color: var(--bone-muted); font-size: 16px; }
.manage-copy li::before { content: ''; position: absolute; left: 0; top: 12px; width: 12px; height: 1.5px; background: var(--gold-bright); }
.motion .manage-panel .manage-copy > * { opacity: 0; translate: 0 18px; }
.motion .manage-panel.is-active .manage-copy > *, .motion .manage-panel.is-active .manage-copy li { animation: rise-in .8s var(--ease-out) both; }
.motion .manage-panel .manage-copy li { opacity: 0; }
.motion .manage-panel.is-active .manage-copy li:nth-child(1) { animation-delay: .12s; }
.motion .manage-panel.is-active .manage-copy li:nth-child(2) { animation-delay: .19s; }
.motion .manage-panel.is-active .manage-copy li:nth-child(3) { animation-delay: .26s; }
.motion .manage-panel.is-active .manage-copy li:nth-child(4) { animation-delay: .33s; }
.manage-note { margin: 26px 0 0; font-size: 13px; color: var(--bone-faint); text-align: right; }
@keyframes rise-in { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: none; } }

/* The business app on the iPhone it is made on, in real screenshots (tools/app_screens.py). */
.device { position: relative; display: flex; justify-content: center; align-items: center; gap: clamp(20px, 3vw, 44px); }
.manage-phone { width: clamp(236px, min(23vw, 36svh), 312px); }
.motion .manage-panel.is-active .manage-phone { animation: phone-in .9s var(--ease-out) both; }
@keyframes phone-in { from { opacity: 0; translate: 0 26px; } }
/* «Así lo ven tus clientes»: the same dishes in the client app, beside the business's menu. */
/* The client's side needs the menus, so it shows only where scripts run. */
.seen { display: none; justify-items: center; gap: 14px; align-self: flex-end; }
.js .seen { display: grid; }
.seen-label { margin: 0; display: flex; align-items: center; gap: 9px; font: 600 11px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--gold-bright); }
.seen-label::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }
.seen-phone { width: clamp(196px, min(18.5vw, 29svh), 252px); }
.motion .manage-panel.is-active .seen { animation: phone-in 1s var(--ease-out) .25s both; }

/* A notice drops in as the new order arrives, with the Talaria mark as on the phone and the map. */
.iphone-notice { position: absolute; z-index: 9; left: 3.5%; right: 3.5%; top: 6.4%; display: flex; align-items: center; gap: 3.2cqw; margin: 0; padding: 3.2cqw 3.8cqw;
  border-radius: 6.5cqw; background: #f4f1eaf2; box-shadow: 0 3cqw 8cqw -2cqw #14110f66, 0 0 0 1px #14110f14; font: 400 3.4cqw/1.3 var(--sans); color: #1d1d1f;
  transform: translateY(-260%); transition: transform .7s var(--ease-spring); }
.iphone-notice strong { display: block; font-weight: 600; }
.iphone-notice small { margin-left: auto; align-self: flex-start; color: #8a8a8e; font-size: 2.9cqw; }
.iphone-notice.is-shown { transform: none; }
.notice-mark { flex: none; display: grid; place-items: center; width: 10cqw; height: 10cqw; border-radius: 22%; background: radial-gradient(circle at 50% 35%, #2a241c, #14110f); }
.notice-mark img { width: 72%; }

/* The moment an order is ready: a check, two rings, sparks and the word, over the screen. */
.celebrate { position: absolute; z-index: 9; left: 50%; top: 46%; width: 0; height: 0; pointer-events: none; visibility: hidden; }
.celebrate::before { content: ''; position: absolute; left: -60cqw; top: -110cqw; width: 120cqw; height: 220cqw; background: radial-gradient(circle at 50% 50%, #f6f3ecf0 0, #f6f3ecc0 30%, #f6f3ec00 62%); opacity: 0; }
.celebrate.is-on { visibility: visible; }
.celebrate.is-on::before { animation: veil 2.6s ease forwards; }
.celebrate-check { position: absolute; left: -11cqw; top: -11cqw; width: 22cqw; height: 22cqw; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #6f8f45, #46602a 70%); color: #fff; font-size: 11cqw; box-shadow: 0 3cqw 8cqw -1cqw #46602aaa; transform: scale(0); }
.celebrate-check .i { stroke-width: 2.4; }
.celebrate.is-on .celebrate-check { animation: check-pop 2.6s var(--ease-spring) forwards; }
.celebrate-ring { position: absolute; left: -11cqw; top: -11cqw; width: 22cqw; height: 22cqw; border-radius: 50%; border: .9cqw solid #46602a; opacity: 0; }
.celebrate-ring + .celebrate-ring { border-color: #d4af62; }
.celebrate.is-on .celebrate-ring { animation: ring-out 1.3s var(--ease-out) .1s; }
.celebrate.is-on .celebrate-ring + .celebrate-ring { animation-delay: .35s; }
.celebrate i { position: absolute; left: -1.1cqw; top: -1.1cqw; width: 2.2cqw; height: 2.2cqw; border-radius: 50%; background: #d4af62; opacity: 0; }
.celebrate i:nth-of-type(even) { width: 1.6cqw; height: 1.6cqw; background: #6f8f45; }
.celebrate i:nth-of-type(1) { --a: 0deg; } .celebrate i:nth-of-type(2) { --a: 30deg; } .celebrate i:nth-of-type(3) { --a: 60deg; } .celebrate i:nth-of-type(4) { --a: 90deg; }
.celebrate i:nth-of-type(5) { --a: 120deg; } .celebrate i:nth-of-type(6) { --a: 150deg; } .celebrate i:nth-of-type(7) { --a: 180deg; } .celebrate i:nth-of-type(8) { --a: 210deg; }
.celebrate i:nth-of-type(9) { --a: 240deg; } .celebrate i:nth-of-type(10) { --a: 270deg; } .celebrate i:nth-of-type(11) { --a: 300deg; } .celebrate i:nth-of-type(12) { --a: 330deg; }
.celebrate.is-on i { animation: spark 1.2s var(--ease-out) .12s; }
.celebrate-word { position: absolute; left: 0; top: 15cqw; translate: -50% 0; font: italic 600 7cqw/1 var(--serif); color: #46602a; white-space: nowrap; opacity: 0; }
.celebrate.is-on .celebrate-word { animation: word-up 2.6s var(--ease-out) forwards; }
@keyframes veil { 0% { opacity: 0; } 15%, 75% { opacity: 1; } 100% { opacity: 0; } }
@keyframes check-pop { 0% { transform: scale(0) rotate(-30deg); } 22% { transform: scale(1.12) rotate(0); } 34% { transform: scale(1); } 80% { transform: scale(1); opacity: 1; } 100% { transform: scale(.85); opacity: 0; } }
@keyframes ring-out { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(2.5); } }
@keyframes spark { from { opacity: 1; transform: rotate(var(--a)) translateY(-7cqw) scale(1); } to { opacity: 0; transform: rotate(var(--a)) translateY(-27cqw) scale(.4); } }
@keyframes word-up { 0%, 15% { opacity: 0; transform: translateY(3cqw); } 32%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* ── Privacy ────────────────────────────────────────────── */

.privacy-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 90px); align-items: start; }
.privacy header > p:not(.eyebrow) { margin: 20px 0 28px; color: var(--muted); }
.privacy-list { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.privacy-list li { padding: 24px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); color: var(--muted); font-size: 15.5px; transition: border-color .4s, translate .9s var(--ease-out), opacity .9s; }
.privacy-list li:hover { border-color: color-mix(in srgb, var(--gold) 50%, transparent); }
.privacy-list strong { display: block; margin-bottom: 8px; font: 500 23px/1.15 var(--serif); color: var(--ink); }
.privacy-list a { color: var(--gold); font-weight: 600; }

/* ── FAQ ────────────────────────────────────────────────── */

.faq { background: var(--wash); }
.faq-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 90px); align-items: start; }
.faq .section-intro a { color: var(--gold); font-weight: 600; }
.faq-list { border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0; cursor: pointer; list-style: none; font: 500 24px/1.25 var(--serif); transition: color .2s; }
.faq-list summary:hover { color: var(--gold); }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: '+'; flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--line); font: 400 20px/1 var(--sans); color: var(--gold); transition: transform .45s var(--ease-spring), background-color .3s, border-color .3s; }
.faq-list details[open] summary::after { transform: rotate(135deg); background: color-mix(in srgb, var(--gold) 12%, transparent); border-color: var(--gold); }
.faq-list details p { margin: -6px 0 24px; max-width: 62ch; color: var(--muted); }
.faq-list a { color: var(--gold); font-weight: 600; }
.motion .faq-list details[open] p { animation: rise .6s var(--ease-out); }
@supports selector(::details-content) {
  .motion .faq-list { interpolate-size: allow-keywords; }
  .motion .faq-list details::details-content { block-size: 0; overflow: hidden; transition: block-size .5s var(--ease-out), content-visibility .5s allow-discrete; }
  .motion .faq-list details[open]::details-content { block-size: auto; }
}

/* ── Closing and footer ─────────────────────────────────── */

.closing { position: relative; overflow: hidden; isolation: isolate; padding: clamp(90px, 12vw, 160px) 0; text-align: center; color: var(--bone); background: radial-gradient(ellipse 50% 60% at 50% 40%, #3a2e1c 0%, transparent 70%), var(--night); }
.closing-inner { display: flex; flex-direction: column; align-items: center; }
.closing-mark { position: relative; width: 170px; margin-bottom: 28px; filter: drop-shadow(0 10px 30px #e6bd6244); }
.closing h2 { font-size: clamp(44px, 6.5vw, 86px); }
.closing h2 em { color: var(--gold-bright); }
.closing p { margin: 18px 0 36px; font: italic 400 24px/1.3 var(--serif); color: var(--bone-faint); }
.closing-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px; }

/* The living mark (partials/mark-live.html), the night mark told in four beats: the cloche alone,
   the wings emerging from its side, the laurel crowning it, and light running over the gold and
   scattering into glints. Ivory and green stay as they are; only the gold shines. */
.mark-live { width: 100%; height: auto; overflow: visible; }
.mark-cloche { transform-origin: 560px 470px; }
.mark-wing { transform-origin: 455px 405px; }
.mark-speed path { transform-box: fill-box; transform-origin: 100% 50%; }
.mark-crown { transform-origin: 600px 230px; }
.mark-leaf { transform-box: fill-box; transform-origin: 85% 90%; }
.mark-ray { opacity: 0; }
.mark-glint { opacity: 0; transform-box: fill-box; transform-origin: center; }
.motion .mark-cloche, .motion .mark-wing, .motion .mark-speed path, .motion .mark-crown, .motion .mark-leaf { opacity: 0; }
.motion .is-visible .mark-cloche, .motion .missing .mark-cloche { animation: cloche-in 1.3s var(--ease-out) .15s both; }
.motion .is-visible .mark-crown, .motion .missing .mark-crown { animation: crown-in 1s var(--ease-spring) .8s both; }
.motion .is-visible .mark-wing, .motion .missing .mark-wing { animation: wing-out 1.6s var(--ease-out) 1.45s both, wing-idle 6s ease-in-out 5.2s infinite; }
.motion .is-visible .mark-speed path, .motion .missing .mark-speed path { animation: speed-in 1s var(--ease-out) 2.15s both; }
.motion .is-visible .mark-speed path + path, .motion .missing .mark-speed path + path { animation-delay: 2.3s; }
.motion .is-visible .mark-leaf, .motion .missing .mark-leaf { animation: leaf-in 1.2s var(--ease-spring) 2.85s both; }
.motion .is-visible .mark-leaf + .mark-leaf, .motion .missing .mark-leaf + .mark-leaf { animation-delay: 3.15s; }
.motion .is-visible .mark-ray, .motion .missing .mark-ray { animation: ray 6s cubic-bezier(.45, 0, .2, 1) 4.1s infinite; }
.motion .is-visible .mark-glint, .motion .missing .mark-glint { animation: glint 6s ease-out 4.35s infinite; }
.motion .is-visible .mark-glint:nth-child(2), .motion .missing .mark-glint:nth-child(2) { animation-delay: 4.95s; }
.motion .is-visible .mark-glint:nth-child(3), .motion .missing .mark-glint:nth-child(3) { animation-delay: 5.15s; }
.motion .is-visible .mark-glint:nth-child(4), .motion .missing .mark-glint:nth-child(4) { animation-delay: 4.55s; }
@keyframes cloche-in { from { opacity: 0; transform: translateY(26px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes crown-in { from { opacity: 0; transform: translateY(-30px) scale(.6); } to { opacity: 1; transform: none; } }
@keyframes wing-out { 0% { opacity: 0; transform: rotate(38deg) scale(.35); } 35% { opacity: 1; } 70% { transform: rotate(-5deg) scale(1.03); } 100% { opacity: 1; transform: none; } }
@keyframes wing-idle { 0%, 70%, 100% { transform: none; } 80% { transform: rotate(-5deg); } 90% { transform: rotate(1.5deg); } }
@keyframes speed-in { from { opacity: 0; transform: scaleX(0); } to { opacity: 1; transform: none; } }
@keyframes leaf-in { from { opacity: 0; transform: scale(0) rotate(-35deg); } to { opacity: 1; transform: none; } }
@keyframes ray { 0% { opacity: 0; transform: translateX(0); } 6% { opacity: 1; } 34% { opacity: 1; } 40%, 100% { opacity: 0; transform: translateX(1380px); } }
@keyframes glint { 0% { opacity: 0; transform: scale(0) rotate(0); } 3% { opacity: 1; transform: scale(1.15) rotate(45deg); } 9% { opacity: 0; transform: scale(.2) rotate(90deg); } 100% { opacity: 0; } }

.site-footer { background: var(--night); color: var(--bone-faint); border-top: 1px solid #b98a3533; font-size: 14.5px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 36px; padding-top: 64px; padding-bottom: 48px; }
.footer-brand img { width: 64px; margin-bottom: 14px; }
.footer-wordmark { margin: 0 0 10px; font: 500 26px/1 var(--serif); letter-spacing: .24em; color: var(--bone); }
.footer-brand p { max-width: 30ch; }
.footer-place { color: var(--gold-bright); font-size: 13px; letter-spacing: .08em; }
.site-footer h2 { margin: 0 0 16px; font: 600 12px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--bone); }
.site-footer nav, .footer-contact { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.site-footer a { text-decoration: none; color: var(--bone-muted); transition: color .2s, translate .3s var(--ease-out); }
.site-footer nav a:hover { color: var(--gold-bright); translate: 4px 0; }
.site-footer a:hover { color: var(--gold-bright); }
.footer-contact p { margin-top: 8px; font-size: 13px; }
.footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-top: 22px; padding-bottom: 34px; border-top: 1px solid #ffffff12; font-size: 12.5px; }
.footer-base p { margin: 0; }
.footer-base a { text-decoration: underline; }

/* ── Legal documents and support ────────────────────────── */

.legal-hero { position: relative; overflow: hidden; padding: clamp(56px, 8vw, 96px) 0 clamp(40px, 5vw, 60px); background: linear-gradient(180deg, var(--night), var(--night-2)); color: var(--bone); }
.legal-hero::before {
  content: ''; position: absolute; right: -8%; top: -30%; width: min(58vw, 640px); aspect-ratio: 860 / 680;
  background: url(/assets/img/mark-gold.svg) center / contain no-repeat; opacity: .05; pointer-events: none;
}
.motion .legal-hero::before { animation: drift 18s ease-in-out infinite alternate; }
.legal-hero .eyebrow { display: block; color: var(--gold-bright); }
.legal-hero h1 { max-width: 18ch; font-size: clamp(42px, 6vw, 76px); letter-spacing: -0.02em; }
.legal-hero h1 em { color: var(--gold-bright); }
.legal-summary { max-width: 62ch; margin: 22px 0 0; font: 400 clamp(19px, 1.8vw, 22px)/1.45 var(--serif); color: #efe3c8; }
.legal-meta { margin: 22px 0 0; font-size: 13px; letter-spacing: .04em; color: var(--bone-faint); }
.motion .legal-hero .eyebrow { animation: rise .9s var(--ease-out) both; }
.motion .legal-summary { animation: rise 1.1s var(--ease-out) .45s both; }
.motion .legal-meta { animation: rise 1.1s var(--ease-out) .6s both; }
@keyframes drift { to { transform: translate(-4%, 6%) rotate(-4deg); } }

.legal-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); padding-top: clamp(40px, 6vw, 72px); padding-bottom: clamp(72px, 9vw, 120px); align-items: start; }
.legal-aside { position: sticky; top: 104px; display: grid; gap: 30px; font-size: 14px; max-height: calc(100vh - 124px); overflow: auto; padding-right: 6px; }
.legal-aside p { margin: 0 0 12px; font: 600 11.5px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.legal-index ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; border-left: 1px solid var(--line); }
.legal-index a { display: block; padding: 6px 0 6px 16px; font: 500 16.5px/1.3 var(--serif); margin-left: -1px; border-left: 2px solid transparent; text-decoration: none; color: var(--muted); line-height: 1.35; transition: color .25s, border-color .25s, padding-left .35s var(--ease-out); }
.legal-index a:hover { color: var(--ink); border-left-color: var(--gold); }
.legal-index a.is-current { color: var(--ink); border-left-color: var(--gold); padding-left: 20px; font-weight: 600; }
.legal-documents { display: flex; flex-direction: column; gap: 8px; }
.legal-documents a { text-decoration: none; color: var(--muted); }
.legal-documents a:hover { color: var(--gold); }

/* Legal texts are set in Cormorant Garamond, a size up to match Manrope's x-height. */
.prose { max-width: 66ch; font: 400 20.5px/1.6 var(--serif); font-variant-numeric: lining-nums; }
.prose h2 { margin: 2.4em 0 .7em; font-size: clamp(30px, 3vw, 38px); letter-spacing: -0.01em; scroll-margin-top: 100px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin: 1.8em 0 .6em; font: 600 16.5px/1.3 var(--serif); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { margin: .4em 0; }
.prose li::marker { color: var(--gold); }
.prose strong { font-weight: 600; }
.prose a { color: var(--gold); font-weight: 600; }
.prose table { width: 100%; margin: 1.4em 0 1.8em; border-collapse: collapse; font-size: 18px; line-height: 1.45; display: block; overflow-x: auto; }
.prose th, .prose td { padding: 11px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.prose thead th { font: 600 14px/1.3 var(--serif); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); border-bottom: 1.5px solid var(--gold); }
.prose thead:has(th:empty) { display: none; }
.prose tbody tr:nth-child(odd) { background: color-mix(in srgb, var(--cream) 45%, transparent); }
.legal-body > p:first-child { font-size: 23px; line-height: 1.5; }
.legal-signoff { margin-top: 3em; padding-top: 1.4em; border-top: 1px solid var(--line); color: var(--muted); font-size: 18px; font-style: italic; }

mark.pending { padding: 1px 7px 2px; border-radius: 6px; background: var(--pending-bg); color: var(--pending-ink); font-size: .92em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
mark.pending span { font: 700 .62em/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; vertical-align: .12em; }

.support-contact { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: -36px; position: relative; z-index: 2; }
.contact-card { padding: 24px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); display: flex; flex-direction: column; transition: transform .5s var(--ease-out), border-color .3s; }
.contact-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--gold) 50%, transparent); }
.motion .contact-card { animation: rise 1s var(--ease-out) both; }
.motion .contact-card:nth-child(1) { animation-delay: .35s; }
.motion .contact-card:nth-child(2) { animation-delay: .43s; }
.motion .contact-card:nth-child(3) { animation-delay: .51s; }
.motion .contact-card:nth-child(4) { animation-delay: .59s; }
.contact-card h2 { font-size: 25px; margin-bottom: 6px; }
.contact-card p { color: var(--muted); font-size: 14.5px; }
.contact-value { margin: auto 0 0; font-weight: 700; color: var(--gold); text-decoration: none; overflow-wrap: anywhere; font-size: 15px; }
.support-faq dt { margin-top: 1.4em; font: 500 23px/1.25 var(--serif); }
.support-faq dd { margin: .4em 0 0; color: var(--muted); }
.support-faq a { color: var(--gold); font-weight: 600; }

.missing { position: relative; overflow: hidden; padding: clamp(90px, 14vw, 180px) 0; background: radial-gradient(ellipse 50% 60% at 50% 35%, #3a2e1c 0%, transparent 70%), var(--night); color: var(--bone); text-align: center; min-height: 60vh; }
.missing-inner { display: flex; flex-direction: column; align-items: center; }
.missing-mark { position: relative; width: 170px; margin-bottom: 30px; filter: drop-shadow(0 10px 30px #e6bd6244); }
.motion .missing-mark { animation: lost 6s ease-in-out infinite; }
.missing .eyebrow { color: var(--gold-bright); }
.missing h1 { font-size: clamp(42px, 6vw, 76px); max-width: 16ch; }
.missing h1 em { color: var(--gold-bright); }
.missing p:not(.eyebrow) { margin: 20px 0 34px; color: var(--bone-muted); }
@keyframes lost { 0%, 100% { transform: translate(0, 0) rotate(0); } 25% { transform: translate(-14px, -10px) rotate(-5deg); } 60% { transform: translate(12px, 6px) rotate(4deg); } }

/* ── Reveal on arrival ──────────────────────────────────── */

.motion [data-reveal] { opacity: 0; translate: 0 34px; transition: opacity 1s ease var(--reveal-delay, 0s), translate 1.2s var(--ease-out) var(--reveal-delay, 0s); }
.motion [data-reveal].is-visible { opacity: 1; translate: none; }
.motion .feature-photo[data-reveal] { opacity: 1; translate: none; clip-path: inset(14% 10% 0 10% round 26px); transition: clip-path 1.6s var(--ease-out); }
.motion .feature-photo[data-reveal].is-visible { clip-path: inset(0 0 0 0 round 26px); }
.motion .app-tile[data-reveal] { transition: opacity 1s ease var(--reveal-delay, 0s), translate 1.2s var(--ease-out) var(--reveal-delay, 0s), transform .7s var(--ease-out); }
.motion .app-tile[data-reveal].is-tilting { transition: opacity 1s ease, translate 1.2s var(--ease-out), transform .12s linear; }
.motion .money-cards article[data-reveal], .motion .privacy-list li[data-reveal] { transition: opacity 1s ease var(--reveal-delay, 0s), translate 1.2s var(--ease-out) var(--reveal-delay, 0s), border-color .4s, background-color .4s; }
.motion [data-expand] { clip-path: inset(0 calc(var(--shrink, 0) * 4vw) round calc(var(--shrink, 0) * 44px)); }

/* Page changes cross-fade; the header stays put. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: .3s ease both page-out; }
  ::view-transition-new(root) { animation: .55s var(--ease-out) both page-in; }
}
@keyframes page-out { to { opacity: 0; transform: translateY(-14px); } }
@keyframes page-in { from { opacity: 0; transform: translateY(22px); } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ── Narrow screens ─────────────────────────────────────── */

@media (max-width: 1080px) {
  .steps { grid-template-columns: 1fr 1fr; row-gap: 44px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .support-contact { grid-template-columns: 1fr 1fr; }
  .privacy-list { grid-template-columns: 1fr; }
  .manage-panel { grid-template-columns: 1fr; }
  .manage-phone { width: clamp(236px, 40vw, 312px); }
}

@media (max-width: 900px) {
  .hero-grid, .map-intro, .money-grid, .feature-grid, .privacy-grid, .faq-grid { grid-template-columns: 1fr; }
  .hero-stage { max-width: 460px; margin-top: 12px; }
  .feature-courier .feature-device { order: -1; }
  .feature-photo { aspect-ratio: 5 / 4; }
  .app-grid { grid-template-columns: 1fr; }
  .promise-grid { grid-template-columns: 1fr; }
  .promise article, .promise article:first-child { border-left: 0; border-top: 1px solid var(--line); padding: 30px 0; }
  .promise article:first-child { border-top: 0; }
  .legal-layout { grid-template-columns: 1fr; }
  .legal-aside { position: static; max-height: none; overflow: visible; padding: 20px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); }
  .legal-documents { display: none; }
  .tour-stage { grid-template-columns: 1fr; }
  .tour-map { order: 1; }
  .tour-panel { order: 2; }
  .motion .tour-stage::after { background: linear-gradient(0deg, #14110ff2 0, #14110fa6 30%, transparent 55%), radial-gradient(ellipse 90% 80% at 50% 40%, transparent 55%, #14110f 100%); }
  .motion .tour-panel { left: 12px; right: 12px; top: auto; bottom: 12px; transform: none; width: auto; padding: 18px 20px 16px; border-radius: 20px; }
  .motion .tour-steps { gap: 0; }
  .motion .tour-steps li { grid-area: 1 / 1; opacity: 0; translate: 0 10px; transition: opacity .45s, translate .6s var(--ease-out); pointer-events: none; }
  .motion .tour-steps li.is-active { opacity: 1; translate: none; }
  .motion .tour-steps li.is-past { opacity: 0; }
  .motion .tour-steps strong { font-size: 21px; }
  .motion .tour-meter { margin-top: 12px; padding-top: 12px; }
  .tour-meter strong { font-size: 30px; }
  .motion .tour-skip { top: 88px; bottom: auto; right: 12px; }
  /* Narrow screens have no room beside the pins: the names sit above them. */
  .tour-pin-label, .tour-pin-client .tour-pin-label { left: 0; right: auto; top: -84px; translate: -50% 0; transform: translateY(6px); }
  .flow { max-width: 420px; }
}

@media (max-width: 640px) {
  .bento { grid-template-columns: 1fr; }
  .bento-wide { grid-column: auto; grid-template-columns: 1fr; }
  .bento-card { padding: 22px 18px; }
  .manage-phone { width: min(72vw, 300px); }
  .device-pair { flex-direction: column; gap: 34px; }
  .seen { align-self: center; }
  .seen-phone { width: min(64vw, 260px); }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .button, .store-pill { width: 100%; }
  .store-pill { align-items: center; }
  .steps { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .support-contact { grid-template-columns: 1fr; margin-top: -24px; }
  .faq-list summary { font-size: 21px; }
  .map-label { font-size: 22px; }
  .manage-tab { padding: 0 15px; font-size: 14px; }
  .manage-note { text-align: left; }
}

@media print {
  .site-header, .site-footer, .legal-aside, .skip-link { display: none !important; }
  .legal-hero { background: none; color: #000; padding: 0 0 20px; }
  .legal-hero::before { display: none; }
  .legal-hero h1, .legal-summary, .legal-meta, .legal-hero .eyebrow { color: #000; }
  .legal-layout { display: block; padding: 0; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .prose a { color: #000; }
}