@import url("fonts/fonts.css");

:root {
  --formica: #F5F0E8;
  --formica-2: #EAE2D3;
  --card: #FFFDF8;
  --blue-wash: #E4ECF5;
  --blue: #0052A3;
  --blue-deep: #003F7E;
  --navy: #082946;
  --red: #B31010;
  --neon: #27C4D9;
  --bulb: #F8C008;
  --muted: #4A5A6B;
  --line: #D8CDB9;
  --kds: #10202F;
  --display: 'Jost', 'Futura', 'Century Gothic', sans-serif;
  --body: 'DM Sans', 'Helvetica Neue', sans-serif;
  --mono: 'DM Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --script: 'Yellowtail', 'Brush Script MT', cursive;
  --r-sm: 6px;
  --r-md: 14px;
  --r-dev: 28px;
  --gutter: clamp(16px, 4vw, 64px);
  --neon-ring: 0 0 0 3px var(--neon), 0 0 18px rgba(39, 196, 217, .45);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }
body { margin: 0; background: var(--formica); color: var(--navy); font: 400 18px/1.55 var(--body); -webkit-font-smoothing: antialiased; touch-action: manipulation; -webkit-tap-highlight-color: rgba(0, 82, 163, .15); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blue); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--blue-deep); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; letter-spacing: -.01em; margin: 0; text-wrap: balance; }
h2 { font-size: clamp(32px, 4.2vw, 50px); line-height: 1.06; max-width: 22ch; }
h3 { font-size: 22px; line-height: 1.2; }
p { margin: 0; }
section[id], [id$="-h"] { scroll-margin-top: 96px; }
.wrap { width: 100%; margin-inline: auto; padding-inline: var(--gutter); }
.nowrap { white-space: nowrap; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; background: var(--navy); color: var(--formica); padding: 12px 18px; border-radius: var(--r-sm); z-index: 50; }
.skip:focus { top: 12px; }
.i { width: 1.15em; height: 1.15em; fill: currentColor; flex: none; vertical-align: -.2em; }
code { font-family: var(--mono); font-size: .88em; }
.section-sub { font-size: 20px; color: var(--muted); max-width: 60ch; margin-top: 16px; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: 999px; font: 700 17px/1 var(--body); text-decoration: none; cursor: pointer; border: 2px solid transparent; white-space: nowrap; transition: background-color .15s, color .15s, box-shadow .2s, transform .15s; }
.btn:active { transform: translateY(1px); }
.btn-neon { background: var(--blue); color: var(--formica); box-shadow: var(--neon-ring); }
.btn-neon:hover { background: var(--blue-deep); color: var(--formica); box-shadow: 0 0 0 3px var(--neon), 0 0 26px rgba(39, 196, 217, .65); }
.btn-line { border-color: var(--navy); color: var(--navy); background: transparent; font-weight: 600; }
.btn-line:hover { background: var(--navy); color: var(--formica); }
.btn-solid { background: var(--navy); color: var(--formica); }
.btn-solid:hover { background: var(--blue); color: var(--formica); }
.btn-small { min-height: 44px; padding: 0 18px; font-size: 16px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

/* nav */
.nav { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 10px var(--gutter); padding-top: max(10px, env(safe-area-inset-top)); background: rgba(245, 240, 232, .94); backdrop-filter: saturate(1.2) blur(8px); border-bottom: 1px solid rgba(8, 41, 70, .08); }
.nav-logo img { width: 90px; height: auto; }
.nav nav { display: flex; gap: clamp(14px, 2.4vw, 34px); flex-wrap: wrap; justify-content: flex-end; }
.nav nav a { color: var(--navy); font-weight: 500; font-size: 16px; text-decoration: none; padding: 8px 2px; }
.nav nav a:hover { color: var(--blue); text-decoration: underline; }
@media (max-width: 720px) { .nav nav { display: none; } .nav-logo img { width: 72px; } }

/* hero */
.hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: end; padding: clamp(24px, 4vw, 56px) var(--gutter) 0; }
.hero-copy { padding-bottom: clamp(32px, 5vw, 72px); min-width: 0; }
.script-line { font-family: var(--script); font-size: clamp(26px, 2.6vw, 34px); color: var(--red); line-height: 1.1; margin-bottom: 14px; }
.hero h1 { font-size: clamp(40px, 5.2vw, 70px); line-height: 1.02; letter-spacing: -.02em; max-width: 15ch; }
.hero-sub { font-size: clamp(18px, 1.6vw, 21px); color: var(--muted); max-width: 44ch; margin-top: 22px; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.hero-media { margin: 0; min-width: 0; }
.hero-media img { width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover; border-radius: var(--r-dev) var(--r-dev) 0 0; background: var(--formica-2); }
.hero-media.is-missing { display: none; }
.curb { height: 22px; background: var(--red); position: relative; }
.curb::after { content: ""; position: absolute; inset: 22px 0 auto; height: 34px; background: url("img/terrazzo.webp") center / 760px auto repeat, var(--formica-2); }
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
  .hero-copy { padding-bottom: 8px; }
  .hero-media img { aspect-ratio: 3 / 2; }
}
@media (max-width: 480px) { .hero-ctas .btn { width: 100%; } }

/* problem */
.problem { padding-block: clamp(96px, 10vw, 140px) clamp(64px, 8vw, 110px); }
.greg-quote { margin: 40px 0 0; padding: 0 0 0 28px; border-left: 6px solid var(--blue); max-width: 46ch; }
.greg-quote p { font: 500 clamp(22px, 2.4vw, 30px)/1.35 var(--display); color: var(--navy); }
.greg-quote footer { margin-top: 14px; color: var(--muted); font-size: 16px; }
.reviews { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 20px; margin-top: 56px; }
.review { margin: 0; padding: 24px 24px 20px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); display: flex; flex-direction: column; justify-content: space-between; gap: 18px; }
.review:first-child { background: var(--formica-2); border-color: transparent; }
.review blockquote { margin: 0; }
.review blockquote p { font-size: 19px; line-height: 1.45; }
.review figcaption { font-size: 15px; color: var(--muted); }
.fair-note { margin-top: 28px; max-width: 72ch; font-size: 16px; color: var(--muted); }
.fair-note strong { color: var(--navy); }
@media (max-width: 900px) { .reviews { grid-template-columns: 1fr; } }

/* prototype stage */
.proto { padding-top: clamp(72px, 8vw, 110px); background: linear-gradient(var(--formica), var(--formica) 70%, var(--formica-2)); }
.proto-head { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.proto-head h2 { max-width: 24ch; }
.proto-head p { max-width: 62ch; color: var(--muted); font-size: 19px; }
.proto-head strong { color: var(--navy); font-family: var(--mono); font-weight: 500; }
.demo-bar { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; justify-content: center; margin-top: 28px; }
.seg { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--formica-2); }
.seg button { min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: transparent; font: 600 15px var(--body); color: var(--navy); cursor: pointer; }
.seg button[aria-checked="true"] { background: var(--navy); color: var(--formica); }
.grace-ctl { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; }
.grace-ctl select { min-height: 44px; border-radius: var(--r-sm); border: 2px solid var(--line); background: var(--card); color: var(--navy); font: 500 16px var(--body); padding: 0 12px; }
.stage { position: relative; margin-top: 32px; padding-inline: var(--gutter); }
.bezel { position: relative; z-index: 2; max-width: min(1224px, calc((100svh - 150px) * 1.439 + 44px)); margin-inline: auto; padding: clamp(10px, 1.6vw, 22px); border-radius: clamp(22px, 3vw, 40px); background: #1B2733; box-shadow: var(--neon-ring), 0 30px 60px rgba(8, 41, 70, .25); }
.slab { position: relative; z-index: 1; height: clamp(90px, 10vw, 140px); margin-top: -40px; border-top: 10px solid var(--red); background: url("img/terrazzo.webp") center / 820px auto repeat, #E4DACB; }
.api-wrap { padding-block: 28px 80px; background: #E4DACB; max-width: none; }
.api-log { max-width: 1224px; margin-inline: auto; background: var(--card); border-radius: var(--r-md); border: 1px solid var(--line); }
.api-log summary { cursor: pointer; padding: 18px 22px; font-weight: 700; display: flex; gap: 12px; align-items: center; list-style: none; min-height: 56px; }
.api-log summary::-webkit-details-marker { display: none; }
.api-log summary::before { content: "+"; font: 500 22px var(--mono); color: var(--blue); width: 18px; }
.api-log[open] summary::before { content: "−"; }
.api-count { margin-left: auto; font: 500 14px var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.api-note { padding: 0 22px 12px; font-size: 15px; color: var(--muted); }
.api-list { list-style: none; margin: 0; padding: 0 22px 22px; display: grid; gap: 14px; max-height: 520px; overflow: auto; overscroll-behavior: contain; }
.api-list li { border-top: 1px solid var(--line); padding-top: 12px; min-width: 0; }
.api-line { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.api-line code { font-weight: 500; color: var(--navy); word-break: break-all; }
.api-t { font: 500 13px var(--mono); color: var(--muted); }
.api-res { font: 400 14px var(--mono); color: var(--red); margin-top: 4px; }
.api-list pre { margin: 8px 0 0; padding: 12px 14px; background: var(--kds); color: #DCE8F5; border-radius: var(--r-sm); font: 13px/1.5 var(--mono); overflow-x: auto; max-height: 260px; }
.api-empty { color: var(--muted); font-size: 15px; border: 0 !important; }

/* ================= TABLET ================= */
.tablet { container-type: inline-size; position: relative; overflow: hidden; border-radius: clamp(12px, 1.6vw, 20px); background: var(--formica); color: var(--navy); aspect-ratio: 1180 / 820; font-size: 18px; line-height: 1.4; }
.tablet.is-narrow { aspect-ratio: auto; height: min(760px, 88svh); }
.tablet button { font-family: var(--body); color: inherit; }
.tablet :focus-visible { outline: 3px solid var(--neon); outline-offset: 2px; }
.t-h { font-family: var(--display); font-weight: 600; font-size: 34px; line-height: 1.1; }

.t-loading { position: absolute; inset: 0; display: grid; grid-template-columns: 42% 1fr; }
.sk { background: linear-gradient(90deg, var(--formica-2), #F1EBDF, var(--formica-2)); background-size: 200% 100%; animation: sk 1.4s linear infinite; border-radius: var(--r-md); }
.sk-panel { background: var(--navy); border-radius: 0; animation: none; }
.sk-col { padding: 48px 64px; display: grid; gap: 22px; align-content: start; }
.sk-line { height: 30px; width: 80%; } .sk-box { height: 76px; } .sk-grid { height: 360px; }
@keyframes sk { to { background-position: -200% 0; } }
.t-error { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 16px; text-align: center; padding: 32px; }

.t-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 60px; padding: 0 30px; border-radius: 999px; border: 2px solid transparent; font-weight: 700; font-size: 20px; cursor: pointer; transition: background-color .15s, box-shadow .2s, transform .12s; white-space: nowrap; }
.t-btn.is-pressed { transform: scale(.96); }
.t-btn[disabled] { opacity: .5; cursor: not-allowed; }
.t-neon { background: var(--blue); color: var(--formica) !important; box-shadow: var(--neon-ring); }
@media (hover: hover) { .t-neon:hover:not([disabled]) { background: var(--blue-deep); } }
.t-line { border-color: var(--navy); background: transparent; color: var(--navy); font-weight: 600; }
.t-solid { background: var(--navy); color: var(--formica) !important; }
.t-ghost-light { border-color: rgba(245, 240, 232, .7); background: transparent; color: var(--formica) !important; font-weight: 600; }
@media (hover: hover) { .t-ghost-light:hover { background: rgba(245, 240, 232, .12); } }
.t-small { min-height: 56px; padding: 0 18px; font-size: 17px; }
.t-big { min-height: 72px; padding: 0 40px; font-size: 22px; }
.t-link { background: none; border: 0; padding: 10px 6px; min-height: 56px; font-weight: 700; font-size: 16px; color: var(--blue) !important; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.t-link-red { color: var(--red) !important; }
.t-count { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.t-num { font-family: var(--mono); font-variant-numeric: tabular-nums; font-weight: 500; }
.t-err { color: var(--red); font-weight: 600; font-size: 16px; min-height: 0; }
.t-err:empty { display: none; }
.t-fine { font-size: 14px; color: var(--muted); }
.t-x { width: 56px; height: 56px; border-radius: 999px; border: 0; background: var(--formica-2); display: grid; place-items: center; cursor: pointer; flex: none; }
.t-x .i { width: 26px; height: 26px; }

/* welcome */
.t-welcome { position: absolute; inset: 0; display: grid; grid-template-columns: 42% 1fr; }
.t-sign { background: var(--navy); color: var(--formica); padding: 44px; display: flex; flex-direction: column; justify-content: space-between; gap: 20px; }
.t-seat { font: 500 22px var(--display); color: var(--bulb); }
.t-sign-mid { display: grid; gap: 22px; }
.t-script { width: min(380px, 100%); height: auto; }
.t-greet { font: 500 28px/1.2 var(--display); max-width: 18ch; }
.t-thanks { background: rgba(248, 192, 8, .14); border-left: 4px solid var(--bulb); padding: 10px 14px; font-size: 17px; border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.t-sign .t-btn { align-self: flex-start; }
.t-keypad { padding: 40px 56px; display: flex; flex-direction: column; align-items: center; gap: 14px; overflow: auto; }
.t-q { font-size: 25px; font-weight: 700; text-align: center; }
.t-phone-wrap { position: relative; width: min(420px, 100%); height: 76px; }
.t-phone { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: var(--r-md); border: 2px solid var(--blue); background: var(--card); color: transparent; caret-color: var(--blue); font: 500 34px var(--mono); text-align: center; letter-spacing: .02em; }
.t-phone[aria-invalid="true"] { border-color: var(--red); }
.t-phone-mask { position: absolute; inset: 0; display: grid; place-items: center; font: 500 34px var(--mono); pointer-events: none; color: var(--navy); font-variant-numeric: tabular-nums; }
.t-help { font-size: 15px; color: var(--muted); text-align: center; }
.t-pad { display: grid; grid-template-columns: repeat(3, 132px); gap: 12px; }
.t-key { height: 70px; border-radius: var(--r-md); border: 0; background: var(--formica-2); font: 600 30px var(--body); cursor: pointer; display: grid; place-items: center; transition: background-color .12s, transform .1s; }
@media (hover: hover) { .t-key:hover { background: #E0D6C4; } }
.t-key.is-pressed { transform: scale(.96); background: #D6CAB4; }
.t-key-word { font-size: 18px; }
.t-key .i { width: 30px; height: 30px; }
.t-acts { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }

/* main */
.t-main { position: absolute; inset: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); }
.t-top { display: flex; align-items: center; gap: 18px; padding: 12px 24px; background: var(--navy); color: var(--formica); min-width: 0; }
.t-logo-btn { border: 0; background: none; padding: 4px; min-width: 56px; min-height: 56px; display: grid; place-items: center; cursor: pointer; flex: none; border-radius: var(--r-sm); }
.t-logo-btn img { width: 96px; height: auto; }
.t-tabs { display: flex; gap: 6px; }
.t-tab { min-height: 56px; padding: 0 20px; border-radius: 999px; border: 0; background: transparent; color: var(--formica) !important; font-weight: 600; font-size: 18px; cursor: pointer; white-space: nowrap; }
.t-tab[aria-selected="true"] { background: var(--formica); color: var(--navy) !important; }
.t-who { margin-left: auto; color: var(--bulb); font-weight: 600; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.t-top-acts { display: flex; gap: 8px; flex: none; }
.t-checkbtn { display: none; }
.t-body { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 340px; min-height: 0; }
.t-content { min-height: 0; min-width: 0; overflow: hidden; display: flex; }
.t-content > * { flex: 1; min-width: 0; }

.t-usuals { padding: 30px 34px; display: flex; flex-direction: column; gap: 20px; overflow: auto; overscroll-behavior: contain; }
.t-usual-hero { display: flex; gap: 24px; align-items: center; padding: 26px; border-radius: var(--r-md); background: var(--card); border: 2px solid var(--formica-2); }
.t-usual-info { flex: 1; min-width: 0; display: grid; gap: 8px; }
.t-usual-name { font-size: 26px; font-weight: 700; line-height: 1.15; }
.t-usual-mods { font-size: 18px; color: var(--muted); }
.t-usual-price { font: 500 17px var(--mono); color: var(--red); font-variant-numeric: tabular-nums; }
.t-usual-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.t-usual-card { padding: 22px; border-radius: var(--r-md); background: var(--formica-2); display: grid; gap: 6px; align-content: start; }
.t-usual-card .t-usual-name { font-size: 21px; }
.t-usual-card .t-usual-mods { font-size: 16px; }
.t-card-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.t-browse-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; padding: 0 22px; border-radius: var(--r-md); border: 2px dashed var(--line); background: transparent; font-weight: 600; font-size: 18px; cursor: pointer; text-align: left; }
@media (hover: hover) { .t-browse-row:hover { border-color: var(--blue); color: var(--blue); } }

.t-menu { display: grid; grid-template-columns: 200px minmax(0, 1fr); min-height: 0; }
.t-cats { overflow: auto; overscroll-behavior: contain; padding: 16px 10px; display: flex; flex-direction: column; gap: 4px; background: var(--formica-2); }
.t-cat { text-align: left; min-height: 56px; padding: 0 14px; border: 0; border-radius: var(--r-sm); background: transparent; font-weight: 600; font-size: 17px; cursor: pointer; }
@media (hover: hover) { .t-cat:hover { background: rgba(8, 41, 70, .06); } }
.t-cat[aria-current="true"] { background: var(--blue); color: var(--formica) !important; }
.t-items { overflow: auto; overscroll-behavior: contain; padding: 24px 26px 32px; }
.t-cat-h { font-size: 30px; margin-bottom: 16px; display: flex; align-items: baseline; gap: 12px; }
.t-cat-h span { font: 500 15px var(--body); color: var(--muted); }
.t-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.t-item { display: flex; flex-direction: column; gap: 6px; text-align: left; padding: 16px 16px 14px; min-height: 130px; border-radius: var(--r-md); border: 2px solid var(--formica-2); background: var(--card); cursor: pointer; transition: border-color .12s, transform .12s; }
@media (hover: hover) { .t-item:hover { border-color: var(--blue); } }
.t-item.is-pressed { transform: scale(.98); border-color: var(--blue); }
.t-item-name { font-weight: 700; font-size: 18px; line-height: 1.2; }
.t-item-desc { font-size: 14px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.t-item-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.t-item-price { font: 500 16px var(--mono); color: var(--red); font-variant-numeric: tabular-nums; }
.t-al { display: flex; gap: 4px; flex-wrap: wrap; }
.t-al span { font-size: 11px; font-weight: 700; padding: 2px 6px; border-radius: 4px; background: var(--formica-2); color: var(--muted); letter-spacing: .02em; }

/* check panel */
.t-check { background: var(--formica-2); display: flex; flex-direction: column; min-height: 0; border-left: 1px solid var(--line); }
.t-check-head { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px 8px; }
.t-check-head h3 { font: 700 22px var(--body); }
.t-check-close { display: none; }
.t-seats { display: flex; gap: 6px; padding: 4px 22px 8px; flex-wrap: wrap; }
.t-seatchip { min-height: 56px; padding: 0 18px; border-radius: 999px; border: 2px solid var(--navy); background: transparent; font-weight: 600; font-size: 15px; cursor: pointer; }
.t-seatchip[aria-checked="true"] { background: var(--navy); color: var(--formica) !important; }
.t-splitrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 22px 10px; font-size: 15px; font-weight: 600; }
.t-seg { display: inline-flex; background: var(--formica); border-radius: 999px; padding: 3px; }
.t-seg button { min-height: 56px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; font-weight: 600; font-size: 14px; cursor: pointer; }
.t-seg button[aria-pressed="true"] { background: var(--blue); color: var(--formica) !important; }
.t-check-scroll { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 4px 22px 16px; display: flex; flex-direction: column; gap: 10px; }
.t-sub-h { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-top: 8px; }
.t-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.t-line { background: var(--card); border-radius: var(--r-sm); padding: 12px 14px; display: grid; gap: 4px; }
.t-line.is-void { opacity: .6; }
.t-line.is-void .t-line-name { text-decoration: line-through; }
.t-line-top { display: flex; justify-content: space-between; gap: 10px; }
.t-line-name { font-weight: 700; font-size: 17px; min-width: 0; }
.t-line-price { font: 500 16px var(--mono); font-variant-numeric: tabular-nums; }
.t-line-mods { font-size: 14px; color: var(--muted); }
.t-line-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.t-when { font-size: 13px; color: var(--muted); }
.t-seattag { font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 4px; border: 1px solid var(--navy); }
.t-st { font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 4px; letter-spacing: .02em; }
.st-new { background: var(--formica-2); color: var(--navy); border: 1px solid var(--line); }
.st-held { background: #FBE7B0; color: #5A4300; }
.st-sent { background: var(--blue); color: var(--formica); }
.st-ready { background: var(--bulb); color: var(--navy); }
.st-void { background: transparent; color: var(--red); border: 1px solid var(--red); }
.t-line-acts { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; margin-top: -4px; }
.t-sending { font-size: 15px; font-weight: 600; color: var(--navy); font-variant-numeric: tabular-nums; }
.t-allergy { display: flex; gap: 8px; align-items: center; font-size: 14px; font-weight: 600; color: var(--red); margin-top: 6px; }
.t-allergy-in, .t-save input[type="text"], .t-note { width: 100%; min-height: 56px; border-radius: var(--r-sm); border: 2px solid var(--line); background: var(--card); padding: 10px 12px; font: 400 17px var(--body); color: var(--navy); }
.t-allergy-in::placeholder, .t-save input::placeholder, .t-note::placeholder { color: #6B7785; }
.t-send { width: 100%; margin-top: 4px; font-size: 19px; }
.t-check-send { padding: 8px 22px 6px; }
.t-check-scroll { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent); }
.t-empty { text-align: center; padding: 36px 8px; display: grid; justify-items: center; gap: 6px; color: var(--muted); }
.t-empty-i { width: 40px; height: 40px; color: var(--line); }
.t-check-foot { display: flex; justify-content: space-between; padding: 14px 22px 4px; border-top: 2px solid var(--navy); font-weight: 700; font-size: 19px; }
.t-foot-fine { padding: 0 22px 14px; }
.t-save { background: var(--card); border: 2px solid var(--blue); border-radius: var(--r-md); padding: 16px; display: grid; gap: 10px; margin-top: 8px; }
.t-save-h { font-weight: 700; font-size: 18px; display: flex; gap: 8px; align-items: center; color: var(--blue); }
.t-save label { font-size: 14px; font-weight: 600; }
.t-check-lab { display: flex; gap: 10px; align-items: center; min-height: 56px; font-weight: 500 !important; }
.t-check-lab input { width: 22px; height: 22px; accent-color: var(--blue); }
.t-saved { display: flex; gap: 8px; align-items: flex-start; font-size: 15px; font-weight: 600; color: var(--blue); background: var(--card); padding: 12px; border-radius: var(--r-sm); }

/* overlays */
.t-overlay { position: absolute; inset: 0; z-index: 10; border-radius: inherit; background: rgba(8, 41, 70, calc(.55 * var(--dim, 1))); display: flex; align-items: flex-end; justify-content: center; animation: fade .18s ease-out; }
.t-sheet { position: relative; width: min(1060px, 94%); max-height: 88%; background: var(--formica); border-radius: 28px 28px 0 0; display: flex; flex-direction: column; overflow: hidden; animation: rise .32s cubic-bezier(.2, .8, .2, 1); }
.t-sheet-sm { width: min(640px, 94%); align-self: center; border-radius: 28px; max-height: 92%; }
@keyframes fade { from { opacity: 0; } }
@keyframes rise { from { transform: translateY(56px); opacity: 0; } }
.t-sheet-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding: 24px 32px 16px; border-bottom: 2px solid var(--formica-2); }
.t-sheet-title { font: 600 32px/1.1 var(--display); }
.t-sheet-desc { font-size: 17px; color: var(--muted); margin-top: 6px; }
.t-pad-x { padding: 16px 32px 0; margin: 0; }
.t-sheet-body { overflow: auto; overscroll-behavior: contain; padding: 18px 32px 24px; display: grid; gap: 22px; }
.t-group { border: 0; margin: 0; padding: 0; display: grid; gap: 10px; min-width: 0; }
.t-group legend { display: flex; gap: 12px; align-items: baseline; padding: 0; margin-bottom: 10px; }
.t-group-name { font-size: 21px; font-weight: 700; }
.t-req { font-size: 14px; font-weight: 600; color: var(--muted); }
.t-req.is-req { color: var(--red); }
.t-group.has-err .t-opts { outline: 2px solid var(--red); outline-offset: 6px; border-radius: var(--r-sm); }
.t-opts { display: flex; flex-wrap: wrap; gap: 10px; }
.t-opt { min-height: 56px; padding: 0 18px; border-radius: var(--r-sm); border: 2px solid var(--line); background: var(--card); font-weight: 600; font-size: 17px; cursor: pointer; display: inline-flex; gap: 8px; align-items: center; }
@media (hover: hover) { .t-opt:hover { border-color: var(--blue); } }
.t-opt[aria-checked="true"] { background: var(--blue); border-color: var(--blue); color: var(--formica) !important; }
.t-opt[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.t-opt-p { font: 500 15px var(--mono); color: var(--red); }
.t-opt[aria-checked="true"] .t-opt-p { color: var(--bulb); }
.t-note { resize: vertical; }
.t-al-note { display: flex; gap: 8px; align-items: center; color: var(--red); font-weight: 600; font-size: 16px; }
.t-sheet-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 32px; background: var(--formica-2); }
.t-qty { display: flex; align-items: center; gap: 18px; }
.t-qty-n { font: 700 26px var(--body); min-width: 1.2em; text-align: center; font-variant-numeric: tabular-nums; }
.t-round-btn { width: 56px; height: 56px; border-radius: 999px; border: 2px solid var(--navy); background: transparent; display: grid; place-items: center; cursor: pointer; }
.t-round-btn[disabled] { opacity: .35; cursor: not-allowed; }
.t-sheet-foot .t-btn { gap: 18px; }
.t-need-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 20px 32px 32px; }
.t-need { min-height: 76px; display: flex; align-items: center; gap: 14px; padding: 0 20px; border-radius: var(--r-md); border: 2px solid var(--line); background: var(--card); font-weight: 700; font-size: 19px; cursor: pointer; text-align: left; }
@media (hover: hover) { .t-need:hover { border-color: var(--blue); } }
.t-need .i { width: 28px; height: 28px; color: var(--blue); }
.t-pay { padding: 20px 32px 32px; display: grid; gap: 12px; overflow: auto; }
.t-pay-total { font-size: 19px; }
.t-pay-opt { display: grid; gap: 4px; padding: 16px 18px; border-radius: var(--r-md); background: var(--card); border: 2px solid var(--formica-2); }
.t-pay-opt span { color: var(--muted); font-size: 16px; }
.t-pay-opt.is-off { background: transparent; border-style: dashed; grid-template-columns: 1fr auto; align-items: center; }
.t-pay-opt.is-off span { grid-column: 1; }
.t-pay-opt.is-off .t-btn { grid-row: 1 / 3; grid-column: 2; }
.t-toast { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 20; display: flex; align-items: center; gap: 20px; max-width: calc(100% - 32px); padding: 14px 16px 14px 24px; border-radius: var(--r-md); background: var(--navy); color: var(--formica); font-weight: 600; font-size: 18px; box-shadow: 0 12px 30px rgba(8, 41, 70, .3); animation: pop .2s ease-out; }
@keyframes pop { from { opacity: 0; transform: translate(-50%, 10px); } }
.t-toast-btn { min-height: 56px; padding: 0 20px; border-radius: 999px; border: 2px solid var(--bulb); background: transparent; color: var(--bulb) !important; font-weight: 700; font-size: 18px; cursor: pointer; }

/* tablet: laptop-width container */
@container (max-width: 1080px) {
  .t-body { grid-template-columns: minmax(0, 1fr) 300px; }
  .t-menu { grid-template-columns: 170px minmax(0, 1fr); }
  .t-keypad { padding: 28px 32px; gap: 10px; }
  .t-key { height: 60px; }
  .t-pad { grid-template-columns: repeat(3, 116px); }
  .t-sign { padding: 32px; }
  .t-top-acts .t-btn span { display: none; }
  .t-top-acts .t-btn { width: 56px; min-height: 56px; padding: 0; }
  .t-who { font-size: 15px; }
}
/* tablet: narrow (phone-sized page) */
.tablet.is-narrow .t-welcome { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
.tablet.is-narrow .t-sign { padding: 18px 20px; flex-direction: row; align-items: center; flex-wrap: wrap; }
.tablet.is-narrow .t-sign-mid { order: -1; gap: 6px; flex: 1; min-width: 0; }
.tablet.is-narrow .t-script { width: 110px; }
.tablet.is-narrow .t-greet { font-size: 17px; }
.tablet.is-narrow .t-seat { font-size: 15px; }
.tablet.is-narrow .t-sign .t-btn { min-height: 56px; font-size: 15px; padding: 0 14px; }
.tablet.is-narrow .t-keypad { padding: 18px 16px; }
.tablet.is-narrow .t-q { font-size: 19px; }
.tablet.is-narrow .t-phone-wrap { height: 60px; }
.tablet.is-narrow .t-phone, .tablet.is-narrow .t-phone-mask { font-size: 24px; }
.tablet.is-narrow .t-pad { grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; max-width: 360px; gap: 8px; }
.tablet.is-narrow .t-key { height: 56px; font-size: 24px; }
.tablet.is-narrow .t-btn { min-height: 56px; font-size: 17px; padding: 0 20px; }
.tablet.is-narrow .t-top { padding: 8px 10px; gap: 8px; flex-wrap: wrap; }
.tablet.is-narrow .t-logo-btn img { width: 64px; }
.tablet.is-narrow .t-who { display: none; }
.tablet.is-narrow .t-tab { min-height: 56px; padding: 0 12px; font-size: 15px; }
.tablet.is-narrow .t-top-acts { margin-left: auto; }
.tablet.is-narrow .t-top-acts .t-btn span { display: none; }
.tablet.is-narrow .t-top-acts .t-btn { width: 56px; min-height: 56px; padding: 0; }
.tablet.is-narrow .t-checkbtn { display: inline-flex; }
.tablet.is-narrow .t-body { grid-template-columns: 1fr; }
.tablet.is-narrow .t-check { position: absolute; inset: 0; z-index: 8; transform: translateY(100%); visibility: hidden; transition: transform .22s ease, visibility 0s .22s; border-left: 0; }
.tablet.is-narrow.show-check .t-check { transform: none; visibility: visible; transition: transform .22s ease; }
.tablet.is-narrow .t-check-close { display: grid; width: 56px; height: 56px; }
.tablet.is-narrow .t-menu { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
.tablet.is-narrow .t-cats { flex-direction: row; overflow-x: auto; padding: 8px; }
.tablet.is-narrow .t-cat { white-space: nowrap; min-height: 56px; font-size: 15px; }
.tablet.is-narrow .t-items { padding: 16px; }
.tablet.is-narrow .t-grid { grid-template-columns: 1fr; }
.tablet.is-narrow .t-item { min-height: 0; }
.tablet.is-narrow .t-usuals { padding: 18px 16px; }
.tablet.is-narrow .t-h { font-size: 24px; }
.tablet.is-narrow .t-usual-hero { flex-direction: column; align-items: stretch; padding: 18px; }
.tablet.is-narrow .t-usual-row { grid-template-columns: 1fr; }
.tablet.is-narrow .t-sheet, .tablet.is-narrow .t-sheet-sm { width: 100%; max-height: 94%; border-radius: 20px 20px 0 0; align-self: flex-end; }
.tablet.is-narrow .t-sheet-head, .tablet.is-narrow .t-sheet-body, .tablet.is-narrow .t-sheet-foot, .tablet.is-narrow .t-pay, .tablet.is-narrow .t-need-grid { padding-inline: 16px; }
.tablet.is-narrow .t-pad-x { padding-inline: 16px; }
.tablet.is-narrow .t-sheet-title { font-size: 24px; }
.tablet.is-narrow .t-sheet-foot { flex-wrap: wrap; }
.tablet.is-narrow .t-sheet-foot .t-btn { flex: 1; }
.tablet.is-narrow .t-need-grid { grid-template-columns: 1fr; }
.tablet.is-narrow .t-opt { min-height: 56px; font-size: 16px; }
.tablet.is-narrow .t-toast { font-size: 15px; bottom: 12px; width: calc(100% - 24px); justify-content: space-between; }

/* ================= STAFF ================= */
.staff { padding-block: clamp(80px, 9vw, 130px); background: var(--formica-2); }
.staff h2 { max-width: 24ch; }
.dev-label { display: flex; gap: 8px; align-items: center; font-weight: 700; font-size: 15px; color: var(--navy); margin-bottom: 10px; }
.kds-device { margin-top: 40px; }
.kds { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 14px; padding: 16px; background: var(--kds); border-radius: var(--r-md); border: 10px solid #1B2733; min-height: 300px; }
.k-tickets { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; align-content: start; }
.k-ticket { background: var(--card); border-radius: var(--r-sm); overflow: hidden; font-family: var(--mono); font-size: 14px; color: var(--navy); }
.k-ticket header { display: flex; justify-content: space-between; gap: 6px; padding: 8px 10px; background: #4A5A6B; color: var(--formica); font-weight: 500; font-size: 13px; }
.k-tab header { background: var(--blue); }
.k-late header { background: var(--red); }
.k-held header { background: #7A6420; }
.k-ready header { background: var(--bulb); color: var(--navy); }
.k-void header { background: #6B7785; }
.k-void .k-body { opacity: .55; }
.k-time { font-variant-numeric: tabular-nums; }
.k-new { animation: pop-in .35s ease-out; }
@keyframes pop-in { from { transform: scale(.96); opacity: 0; } }
.k-body { padding: 10px; display: grid; gap: 2px; }
.k-st { font-size: 11px; color: var(--muted); letter-spacing: .06em; margin-bottom: 4px; }
.k-item { font-weight: 500; font-size: 15px; }
.k-item em { font-style: normal; background: #FBE7B0; padding: 0 4px; border-radius: 3px; font-size: 12px; }
.k-item.is-void { text-decoration: line-through; }
.k-mod { padding-left: 14px; font-size: 13px; }
.k-note, .k-hold { color: var(--muted); }
.k-allergy { background: var(--red); color: var(--formica); padding: 3px 6px; font-size: 12px; font-weight: 500; margin-bottom: 4px; }
.k-allday { background: #1B3148; color: var(--formica); border-radius: var(--r-sm); padding: 14px; font: 14px/1.7 var(--mono); align-self: start; }
.k-ad-h { color: var(--bulb); font-size: 13px; margin-bottom: 6px; letter-spacing: .06em; }
.k-ad-n { display: inline-block; min-width: 2ch; font-variant-numeric: tabular-nums; color: var(--bulb); }
.staff-row { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 28px; margin-top: 32px; align-items: start; }
.go2 { background: var(--card); border: 12px solid #1B2733; border-radius: 34px; padding: 14px; min-height: 480px; display: grid; gap: 12px; align-content: start; font-size: 15px; }
.g-bar { display: flex; justify-content: space-between; font-weight: 700; font-size: 13px; color: var(--muted); padding: 0 4px; }
.g-seat { background: var(--formica-2); border-radius: var(--r-md); padding: 14px; display: grid; gap: 4px; }
.g-seat-h { font-weight: 700; font-size: 18px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.g-reg { font-size: 12px; background: var(--bulb); color: var(--navy); padding: 2px 8px; border-radius: 4px; }
.g-seat-s { color: var(--muted); }
.g-tip { font-size: 13px; color: var(--blue); font-weight: 600; }
.g-close { margin-top: 8px; justify-self: start; }
.g-sugg { display: grid; gap: 6px; }
.g-sugg p { display: flex; gap: 8px; align-items: flex-start; background: #EAF3FB; color: var(--blue-deep); padding: 10px 12px; border-radius: var(--r-sm); font-size: 14px; font-weight: 600; }
.g-feed { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.g-feed li { display: grid; grid-template-columns: 62px 1fr; gap: 8px; padding: 8px 4px; border-bottom: 1px solid var(--formica-2); font-size: 14px; }
.g-t { font: 500 12px var(--mono); color: var(--muted); padding-top: 2px; }
.g-ping { font-weight: 700; color: var(--red); }
.g-ready { color: var(--blue-deep); font-weight: 600; }
.g-empty { display: block !important; color: var(--muted); }
.fountain { background: var(--kds); color: var(--formica); border: 10px solid #1B2733; border-radius: var(--r-md); padding: 16px; min-height: 480px; }
.f-cols { display: grid; grid-template-columns: 1.2fr 1.2fr .9fr; gap: 14px; }
.f-h { font: 500 13px var(--mono); color: var(--bulb); letter-spacing: .06em; margin-bottom: 8px; }
.f-tk, .f-req { background: #1B3148; border-radius: var(--r-sm); padding: 10px; margin-bottom: 8px; font-size: 14px; display: grid; gap: 2px; position: relative; }
.f-tk strong { font: 500 12px var(--mono); color: var(--neon); }
.f-tk span { color: #B9C7D6; font-size: 13px; }
.f-tk em { position: absolute; right: 10px; top: 10px; font-style: normal; font-size: 12px; font-weight: 700; color: var(--bulb); }
.f-tk.is-ready { outline: 2px solid var(--bulb); }
.f-tk.is-void { opacity: .5; text-decoration: line-through; }
.f-req span { font: 500 12px var(--mono); color: #B9C7D6; }
.f-req.is-bus { background: var(--red); }
.f-empty { color: #B9C7D6; font-size: 14px; }
.f-stock { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; padding: 6px 0; border-bottom: 1px solid #22394F; }
.f-stock strong { font-family: var(--mono); color: var(--bulb); font-weight: 500; font-variant-numeric: tabular-nums; }
.staff-rules { list-style: none; padding: 0; margin: 44px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.staff-rules li { font-size: 17px; color: var(--muted); border-top: 3px solid var(--navy); padding-top: 14px; }
.staff-rules strong { display: block; color: var(--navy); font-size: 19px; margin-bottom: 4px; }
@media (max-width: 1000px) { .staff-row { grid-template-columns: 1fr; } .go2 { max-width: 420px; } }
@media (max-width: 760px) {
  .kds { grid-template-columns: 1fr; border-width: 6px; }
  .f-cols { grid-template-columns: 1fr; }
  .staff-rules { grid-template-columns: 1fr; }
}

/* ================= TOAST ================= */
.toast { padding-block: clamp(80px, 9vw, 130px); }
.diagram { margin: 44px 0 0; }
.dg { width: 100%; height: auto; font-family: var(--body); }
.dg-tall { display: none; max-width: 420px; }
.dg-custom rect { fill: var(--blue); stroke: var(--neon); stroke-width: 3; }
.dg-custom .dg-own { fill: var(--bulb); }
.dg-custom .dg-h { fill: var(--formica); }
.dg-custom .dg-s { fill: #DCE8F5; }
.dg-toast rect { fill: var(--card); stroke: var(--navy); stroke-width: 2; }
.dg-toast .dg-own { fill: var(--muted); }
.dg-toast .dg-h { fill: var(--navy); }
.dg-toast .dg-s { fill: var(--muted); }
.dg-own { font: 500 13px var(--mono); letter-spacing: .06em; }
.dg-h { font: 700 22px var(--body); }
.dg-s { font: 400 16px var(--body); }
.dg-arrows path { stroke: var(--red); stroke-width: 3; fill: none; }
@media (max-width: 760px) { .dg-wide { display: none; } .dg-tall { display: block; margin-inline: auto; } }
.calls { margin-top: 56px; }
.call-list { margin: 18px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.call-list div { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md); padding: 20px; min-width: 0; }
.call-list dt code { font-size: 15px; font-weight: 500; color: var(--blue); word-break: break-all; }
.call-list dd { margin: 8px 0 0; font-size: 16px; color: var(--muted); }
.call-note { margin: 16px 0 0; font-size: 16px; color: var(--muted); max-width: 60ch; }
.split-lists { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 48px; }
.split-lists > div { border-radius: var(--r-md); padding: 26px 28px; }
.list-native { background: var(--card); border: 2px solid var(--navy); }
.list-custom { background: var(--blue); color: var(--formica); box-shadow: var(--neon-ring); }
.list-custom a { color: var(--formica); }
.split-lists ul { margin: 14px 0 0; padding-left: 20px; display: grid; gap: 8px; font-size: 17px; }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 48px; }
.facts p { font-size: 16px; color: var(--muted); }
.facts strong { display: block; color: var(--navy); font-size: 19px; margin-bottom: 6px; font-family: var(--display); font-weight: 600; }
@media (max-width: 900px) { .call-list, .split-lists, .facts { grid-template-columns: 1fr; } }

/* ================= NUMBERS ================= */
.numbers { padding-block: clamp(80px, 9vw, 130px); background: var(--card); border-block: 1px solid var(--line); }
.numbers h2 { max-width: 20ch; }
.numbers-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); margin-top: 44px; align-items: start; }
.evidence { display: grid; gap: 18px; }
.ev { border-radius: var(--r-md); padding: 24px 26px; }
.ev-ind { background: var(--navy); color: var(--formica); }
.ev-ind a { color: var(--formica); }
.ev-ind p { color: #DCE8F5; font-size: 16px; }
.ev-big { font: 600 clamp(30px, 3.4vw, 44px)/1.05 var(--display) !important; color: var(--formica) !important; margin: 6px 0 12px; }
.ev-tag { font-size: 13px !important; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--bulb) !important; }
.ev-ven { background: var(--formica); border: 1px dashed var(--muted); }
.ev-ven .ev-tag, .ev-loy .ev-tag { color: var(--red) !important; }
.ev ul { margin: 10px 0 0; padding-left: 20px; display: grid; gap: 8px; font-size: 16px; color: var(--muted); }
.ev-loy { background: var(--formica-2); }
.ev-greg { margin: 16px 0 0; padding-left: 16px; border-left: 4px solid var(--blue); }
.ev-greg p { font: 500 20px/1.35 var(--display); color: var(--navy); }
.ev-greg footer { font-size: 14px; color: var(--muted); margin-top: 6px; }
.ev-caveat { font-size: 14px; color: var(--muted); margin-top: 12px; }
.calc { position: sticky; top: 100px; background: var(--formica); border-radius: var(--r-md); padding: 28px; border: 2px solid var(--navy); display: grid; gap: 16px; }
.calc-flag { font-size: 14px; font-weight: 700; color: var(--red); }
.calc-fields { display: grid; gap: 12px; }
.calc-fields label { display: grid; grid-template-columns: minmax(0, 1fr) 128px; gap: 12px; align-items: center; font-size: 16px; font-weight: 600; }
.calc input { width: 100%; min-height: 48px; border-radius: var(--r-sm); border: 2px solid var(--line); background: var(--card); padding: 0 12px; font: 500 18px var(--mono); color: var(--navy); font-variant-numeric: tabular-nums; }
.calc input[aria-invalid="true"] { border-color: var(--red); }
.in-pre, .in-post { position: relative; display: block; }
.in-pre > span { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-family: var(--mono); color: var(--muted); }
.in-pre input { padding-left: 26px; }
.in-post > span { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-family: var(--mono); color: var(--muted); }
.calc-err { color: var(--red); font-weight: 600; font-size: 15px; }
.calc-out { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.calc-out div { background: var(--navy); color: var(--formica); border-radius: var(--r-md); padding: 18px; display: grid; gap: 4px; }
.co-num { font: 600 clamp(32px, 3.2vw, 44px)/1 var(--display); font-variant-numeric: tabular-nums; }
.co-money { color: var(--bulb); }
.co-lab { font-size: 14px; color: #DCE8F5; }
.calc-how { font: 13px/1.5 var(--mono); color: var(--muted); }
.calc-caveat { font-size: 14px; color: var(--muted); }
@media (max-width: 960px) { .numbers-grid { grid-template-columns: 1fr; } .calc { position: static; } }
@media (max-width: 480px) { .calc-fields label { grid-template-columns: 1fr; gap: 6px; } .calc { padding: 20px; } }

/* ================= PILOT ================= */
.pilot { padding-block: clamp(80px, 9vw, 130px); background: linear-gradient(rgba(234, 226, 211, .86), rgba(234, 226, 211, .86)), url("img/terrazzo.webp") center / 900px auto repeat, #E4DACB; border-top: 10px solid var(--red); }
.pilot .section-sub { color: var(--navy); }
.timeline { list-style: none; padding: 0; margin: 40px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-radius: var(--r-md); overflow: hidden; box-shadow: 0 10px 30px rgba(8, 41, 70, .12); }
.timeline li { padding: 24px; background: var(--card); display: grid; gap: 6px; align-content: start; font-size: 16px; color: var(--muted); border-right: 1px solid var(--line); }
.timeline strong { color: var(--navy); font: 700 21px/1.2 var(--body); }
.tl-when { font: 500 14px var(--mono); color: var(--red); }
.timeline .tl-hot { background: var(--blue); color: #DCE8F5; }
.timeline .tl-hot strong { color: var(--formica); }
.timeline .tl-hot .tl-when, .timeline .tl-go .tl-when { color: var(--bulb); }
.timeline .tl-go { background: var(--navy); color: #DCE8F5; border: 0; }
.timeline .tl-go strong { color: var(--formica); }
.pilot-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px; margin-top: 28px; }
.budget, .measure { background: var(--card); border-radius: var(--r-md); padding: 28px; box-shadow: 0 10px 30px rgba(8, 41, 70, .1); min-width: 0; }
.table-scroll { overflow-x: auto; margin-top: 14px; }
.budget table { width: 100%; border-collapse: collapse; font-size: 16px; min-width: 420px; }
.budget th, .budget td { text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--formica-2); }
.budget thead th { font-size: 14px; color: var(--muted); font-weight: 700; vertical-align: bottom; }
.budget td { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.budget tbody th { font-weight: 500; }
.budget .tot th, .budget .tot td { border-top: 2px solid var(--navy); border-bottom: 0; font-weight: 700; font-size: 18px; }
.budget .tot td { color: var(--red); font-weight: 500; }
.rec { display: inline-block; font: 700 11px var(--body); background: var(--bulb); color: var(--navy); padding: 2px 6px; border-radius: 4px; margin-left: 4px; vertical-align: 2px; }
.budget-notes { margin: 18px 0 0; padding-left: 20px; display: grid; gap: 6px; font-size: 15px; color: var(--muted); }
.measure h3 { margin-top: 22px; }
.measure h3:first-child { margin-top: 0; }
.measure ul, .measure ol { margin: 12px 0 0; padding-left: 20px; display: grid; gap: 8px; font-size: 16px; color: var(--muted); }
.measure strong { color: var(--navy); }
.go-list { list-style: none; padding-left: 0 !important; }
.go-list li { padding-left: 30px; position: relative; color: var(--navy) !important; font-weight: 600; }
.go-list li::before { content: ""; position: absolute; left: 0; top: .3em; width: 18px; height: 18px; border-radius: 4px; border: 2px solid var(--blue); background: linear-gradient(var(--blue), var(--blue)) center / 8px 8px no-repeat; }
@media (max-width: 960px) { .timeline { grid-template-columns: 1fr 1fr; } .pilot-grid { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .timeline { grid-template-columns: 1fr; } .budget, .measure { padding: 20px; } }

/* ================= RISKS ================= */
.risks { padding-block: clamp(80px, 9vw, 130px); }
.risk-list { margin: 40px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; }
.risk-list div { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 18px; padding: 18px 0; border-top: 1px solid var(--line); }
.risk-list dt { font-weight: 700; font-size: 18px; display: flex; gap: 10px; align-items: flex-start; }
.risk-list dt .i { color: var(--blue); width: 22px; height: 22px; margin-top: 2px; }
.risk-list dd { margin: 0; font-size: 16px; color: var(--muted); }
@media (max-width: 1100px) { .risk-list { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .risk-list div { grid-template-columns: 1fr; gap: 6px; } }

/* ================= CLOSE ================= */
.close { padding-block: clamp(90px, 10vw, 150px); background: var(--formica-2); text-align: center; border-top: 10px solid var(--red); }
.close-inner { display: grid; justify-items: center; gap: 20px; }
.close h2 { font-size: clamp(38px, 5vw, 64px); max-width: 16ch; }
.close p { font-size: 20px; color: var(--muted); max-width: 46ch; }
.close-ctas { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
.email-line { font-size: 18px !important; }
.email { font-family: var(--mono); color: var(--navy); font-weight: 500; user-select: all; }
.copied { color: var(--blue); font-weight: 700; margin-left: 6px; }

.foot { background: var(--navy); color: #C9D3DE; padding-block: 56px calc(40px + env(safe-area-inset-bottom)); }
.foot-inner { display: grid; gap: 22px; }
.foot-logo { width: min(440px, 90%); height: auto; }
.disclaimer { font-size: 15px; max-width: 70ch; }
.sources summary { cursor: pointer; font-weight: 700; color: var(--formica); min-height: 44px; display: flex; align-items: center; }
.sources ul { margin: 8px 0 0; padding-left: 20px; display: grid; gap: 6px; font-size: 14px; }
.foot a { color: #E6EEF6; }
.foot a:hover { color: var(--neon); }
.no-anim, .no-anim .t-sheet { animation: none !important; }
.t-keypad > * { flex: none; }
.tablet.is-narrow .t-sheet-desc { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 15px; }
.hero-media { position: relative; }
.hero-media figcaption { position: absolute; right: 14px; bottom: 14px; background: rgba(8, 41, 70, .78); color: var(--formica); font-size: 13px; font-weight: 600; padding: 5px 10px; border-radius: 999px; }
.scenes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 40px; }
.scenes figure { margin: 0; display: grid; gap: 10px; }
.scenes img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-md); background: var(--formica); }
.scenes figcaption { font-size: 16px; color: var(--navy); font-weight: 500; }
.scenes-note { grid-column: 1 / -1; font-size: 14px; color: var(--muted); }
@media (max-width: 1100px) { .scenes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .scenes { grid-template-columns: 1fr; } }
.review-one { margin-top: 48px; max-width: 62ch; background: var(--formica-2); border-color: transparent; }
.t-toast.t-toast-top { top: 22px; bottom: auto; }
.t-seat-subs { padding: 10px 22px 0; display: grid; gap: 4px; border-top: 1px solid var(--line); }
.t-seat-subs p { display: flex; justify-content: space-between; font-size: 15px; font-weight: 600; color: var(--muted); }
/* doneness slider */
.t-temp { --thumb: 60px; --temp-track: linear-gradient(90deg, #9E1B2A 0%, #C8414B 18%, #D9707A 34%, #C98A6B 52%, #A4683F 70%, #7A4A26 86%, #4E2E16 100%); }
.t-temp-now { position: relative; height: 44px; margin: 4px 0 2px; container-type: inline-size; }
.t-temp-now span { position: absolute; left: 0; transform: translateX(calc(var(--pos) * (100cqw - 100%))); white-space: nowrap; font: 600 30px/44px var(--display); color: var(--navy); transition: transform .12s ease-out; will-change: transform; }
.t-temp-range { -webkit-appearance: none; appearance: none; width: 100%; height: var(--thumb); margin: 0; background: transparent; cursor: pointer; touch-action: none; }
.t-temp-range:focus-visible { outline: 3px solid var(--neon); outline-offset: 4px; border-radius: 999px; }
.t-temp-range::-webkit-slider-runnable-track { height: 22px; border-radius: 999px; background: var(--temp-track); box-shadow: inset 0 0 0 2px rgba(8, 41, 70, .12); }
.t-temp-range::-moz-range-track { height: 22px; border-radius: 999px; background: var(--temp-track); }
.t-temp-range::-webkit-slider-thumb { -webkit-appearance: none; width: var(--thumb); height: var(--thumb); margin-top: calc((22px - var(--thumb)) / 2); border-radius: 50%; background: var(--card); border: 5px solid var(--navy); box-shadow: 0 0 0 3px var(--neon), 0 6px 14px rgba(8, 41, 70, .3); }
.t-temp-range::-moz-range-thumb { width: var(--thumb); height: var(--thumb); border-radius: 50%; background: var(--card); border: 5px solid var(--navy); box-shadow: 0 0 0 3px var(--neon); }
.t-temp-ticks { display: grid; gap: 4px; margin-top: 4px; }
.t-temp-tick { min-height: 56px; padding: 4px 2px; border: 0; background: none; border-top: 3px solid var(--line); font: 600 14px/1.2 var(--body); color: var(--muted) !important; cursor: pointer; text-align: center; }
.t-temp-tick[aria-pressed="true"] { color: var(--navy) !important; border-top-color: var(--navy); }
.tablet.is-narrow .t-temp { --thumb: 56px; }
.tablet.is-narrow .t-temp-now span { font-size: 22px; }
.tablet.is-narrow .t-temp-ticks { position: relative; display: block; height: 30px; }
.tablet.is-narrow .t-temp-tick { position: absolute; top: 0; min-height: 0; padding: 4px 0 0; border-top: 0; font-size: 14px; white-space: nowrap; pointer-events: none; visibility: hidden; }
.tablet.is-narrow .t-temp-tick:first-child { left: 0; visibility: visible; }
.tablet.is-narrow .t-temp-tick:last-child { right: 0; visibility: visible; }
.tablet.is-narrow .t-temp-tick[aria-pressed="true"]:not(:first-child):not(:last-child) { display: none; }
/* photo pass */
.photo { margin: 0; display: grid; gap: 10px; min-width: 0; }
.photo img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-md); background: var(--formica-2); }
.photo figcaption, .visit-strip figcaption { font-size: 16px; color: var(--navy); font-weight: 500; }
.cr { display: inline-block; font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: .02em; }
.photo.band { margin-top: 36px; }
.photo.band img { aspect-ratio: 21 / 9; }
.problem-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 56px); align-items: center; margin-top: 40px; }
.problem-grid .greg-quote { margin-top: 0; }
.visit { padding-block: 0 clamp(64px, 8vw, 110px); }
.visit-strip { list-style: none; padding: 0; margin: 28px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.visit-strip figure { margin: 0; display: grid; gap: 10px; }
.visit-strip img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-md); background: var(--formica-2); }
.vs-n { display: inline-grid; place-items: center; width: 28px; height: 28px; margin-right: 8px; border-radius: 50%; background: var(--blue); color: var(--formica); font: 700 15px var(--body); vertical-align: 1px; }
.proto-photo { width: min(640px, 100%); margin-top: 12px; text-align: left; }
.hw-photo { margin-bottom: 18px; }
.risk-photo { display: block; width: 100%; max-width: 360px; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r-sm); margin-bottom: 4px; }
.risk-list dd .cr { display: block; margin-bottom: 8px; }
.close-photo { width: 100%; margin-top: 28px; text-align: left; }
@media (max-width: 900px) { .problem-grid { grid-template-columns: 1fr; } .visit-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .visit-strip { grid-template-columns: 1fr; } .photo.band img { aspect-ratio: 16 / 10; } }
.t-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.t-seg button[disabled] { opacity: .55; cursor: not-allowed; }
.t-split-hint { padding: 0 22px 8px; }

/* ---------- modifier sheet v2: dish photo + pre-chosen rows ---------- */
.t-sheet-item { position: relative; width: min(1100px, 96%); max-height: 94%; }
.t-sheet-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 34%) minmax(0, 1fr); }
.t-dish { display: flex; flex-direction: column; min-height: 0; background: var(--formica-2); }
.t-dish-img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; background: var(--line); }
.t-dish-text { padding: 18px 22px 20px; display: grid; gap: 8px; align-content: start; overflow: auto; overscroll-behavior: contain; }
.t-sheet-item .t-sheet-title { font-size: 30px; padding-right: 8px; }
.t-sheet-item .t-sheet-desc { margin-top: 0; font-size: 16px; line-height: 1.4; }
.t-sheet-item .t-al-note { font-size: 14px; align-items: flex-start; }
.t-sheet-item .t-al-note .i { flex: none; width: 20px; height: 20px; margin-top: 1px; }
.t-usual-tag { display: inline-flex; align-items: center; gap: 6px; justify-self: start; font-size: 14px; font-weight: 700; color: var(--blue); background: var(--blue-wash); padding: 5px 10px; border-radius: var(--r-sm); }
.t-usual-tag .i { width: 16px; height: 16px; }
.t-sheet-x { position: absolute; top: 12px; left: 12px; z-index: 2; width: 56px; height: 56px; border-radius: 999px; background: var(--card); box-shadow: 0 2px 8px rgba(8, 41, 70, .18); }
.t-sheet-item .t-sheet-body { padding: 16px 22px 18px; gap: 8px; align-content: start; }

.t-mgroup { display: grid; min-width: 0; }
.t-mrow { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto auto; align-items: center; gap: 16px; width: 100%; min-height: 84px; padding: 5px 16px 5px 5px; border: 2px solid var(--line); border-radius: var(--r-md); background: var(--card); text-align: left; cursor: pointer; transition: border-color .12s, background-color .12s; }
@media (hover: hover) { .t-mrow:hover { border-color: var(--blue); } }
.t-mrow.is-pressed { background: var(--blue-wash); transform: scale(.99); }
.t-mrow-img, .t-mrow-swatch { width: 72px; height: 72px; border-radius: 10px; object-fit: cover; background: var(--formica-2); display: block; }
.t-mrow-swatch { background: radial-gradient(circle at 50% 50%, var(--sw) 0 46%, #7A4A26 47% 60%, #4E2E16 61%); }
.t-mrow.no-thumb { grid-template-columns: minmax(0, 1fr) auto auto; padding-left: 18px; }
.t-dish.no-img .t-dish-text { padding-top: 82px; }
.t-mrow-plus { display: grid; place-items: center; background: var(--formica-2); color: var(--blue); }
.t-mrow-plus .i { width: 30px; height: 30px; }
.t-mrow-text { display: grid; gap: 2px; min-width: 0; }
.t-mrow-group { font-size: 14px; font-weight: 600; color: var(--muted); }
.t-mrow-val { font: 600 22px/1.2 var(--display); color: var(--navy); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-mrow-val.is-none { color: var(--muted); font-weight: 500; }
.t-mrow-price { font: 500 16px var(--mono); color: var(--red); font-variant-numeric: tabular-nums; white-space: nowrap; }
.t-mrow-change { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 16px; color: var(--blue); white-space: nowrap; }
.t-mrow-change .i { width: 20px; height: 20px; transition: transform .16s ease; }
.t-mgroup.is-open .t-mrow { border-color: var(--blue); border-radius: var(--r-md) var(--r-md) 0 0; background: var(--blue-wash); }
.t-mgroup.is-open .t-mrow-change .i { transform: rotate(180deg); }
.t-mgroup.has-err .t-mrow { border-color: var(--red); }
.t-mrow-err { margin: 6px 4px 0; }
.t-mpanel { border: 2px solid var(--blue); border-top: 0; border-radius: 0 0 var(--r-md) var(--r-md); background: var(--card); padding: 14px; display: grid; gap: 12px; animation: fade .16s ease-out; }
.t-mdone { justify-self: end; min-height: 56px; }
.t-ocards { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.t-ocard { position: relative; display: grid; grid-template-rows: auto auto auto; justify-items: center; align-content: start; gap: 4px; padding: 6px 6px 10px; min-height: 56px; border: 2px solid var(--line); border-radius: var(--r-md); background: var(--formica); font-weight: 600; font-size: 16px; line-height: 1.2; text-align: center; cursor: pointer; transition: border-color .12s; }
.t-ocard img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-sm); background: var(--formica-2); }
@media (hover: hover) { .t-ocard:hover { border-color: var(--blue); } }
.t-ocard[aria-checked="true"] { border-color: var(--blue); background: var(--blue-wash); box-shadow: inset 0 0 0 2px var(--blue); }
.t-ocard[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.t-ocard-name { padding-inline: 2px; }
.t-ocard .t-opt-p { font-size: 14px; }
.t-ocard-on { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; border-radius: 999px; background: var(--blue); color: var(--formica); display: grid; place-items: center; box-shadow: 0 0 0 3px var(--card); }
.t-ocard-on .i { width: 18px; height: 18px; }
.t-xgroup { display: grid; gap: 8px; }
.t-xgroup + .t-xgroup { border-top: 1px solid var(--formica-2); padding-top: 12px; }
.t-xgroup-h { display: flex; gap: 10px; align-items: baseline; font-weight: 700; font-size: 17px; }
.t-mpanel .t-temp { padding: 0 6px; }
.t-note-group { gap: 6px; margin-top: 4px; }
.t-note-lab { font-size: 14px; font-weight: 600; color: var(--muted); }
.t-sheet-item .t-note { min-height: 56px; }
.t-sheet-item .t-sheet-foot { padding: 14px 24px; }

.tablet.is-narrow .t-sheet-item { width: 100%; max-height: 96%; }
.tablet.is-narrow .t-sheet-grid { display: block; overflow: auto; overscroll-behavior: contain; }
.tablet.is-narrow .t-dish-img { aspect-ratio: 16 / 7; }
.tablet.is-narrow .t-dish-text { padding: 14px 16px 12px; overflow: visible; }
.tablet.is-narrow .t-sheet-item .t-sheet-title { font-size: 24px; }
.tablet.is-narrow .t-sheet-item .t-sheet-body { overflow: visible; padding: 12px 16px 16px; }
.tablet.is-narrow .t-mrow { grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; min-height: 80px; padding-right: 12px; }
.tablet.is-narrow .t-mrow-img, .tablet.is-narrow .t-mrow-swatch { width: 64px; height: 64px; }
.tablet.is-narrow .t-mrow-price { display: none; }
.tablet.is-narrow .t-mrow.no-thumb { grid-template-columns: minmax(0, 1fr) auto; }
.tablet.is-narrow .t-dish.no-img .t-dish-text { padding: 12px 16px 12px 80px; min-height: 80px; }
.tablet.is-narrow .t-mrow-val { font-size: 19px; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.tablet.is-narrow .t-mrow-change { font-size: 15px; }
.tablet.is-narrow .t-ocards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tablet.is-narrow .t-ocard { font-size: 14px; }
.tablet.is-narrow .t-sheet-item .t-sheet-foot { padding: 12px 16px; }

/* menu list pictures */
.t-cat { display: flex; align-items: center; gap: 10px; }
.t-cat-img { width: 40px; height: 40px; border-radius: var(--r-sm); object-fit: cover; flex: none; background: var(--line); }
.t-item.has-img { flex-direction: row; align-items: stretch; gap: 14px; padding: 12px; }
.t-item-img { width: 96px; height: 96px; flex: none; border-radius: 10px; object-fit: cover; background: var(--formica-2); }
.t-item-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
.t-item:not(.has-img) .t-item-text { flex: 1; }
.tablet.is-narrow .t-cat { gap: 8px; padding: 0 12px 0 8px; }
.tablet.is-narrow .t-cat-img { width: 32px; height: 32px; }
@media (prefers-reduced-motion: reduce) { .t-mpanel { animation: none; } .t-mrow-change .i { transition: none; } }
.tablet.is-narrow .t-toast.t-toast-top { top: 88px; bottom: auto; }
.t-toast:not(.t-toast-pend) { pointer-events: none; }

/* motion language: one easing, one clock, the picture travels */
:root { --vt-ease: cubic-bezier(.2, .8, .2, 1); --vt-dur: .32s; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-group(*) { animation-duration: var(--vt-dur); animation-timing-function: var(--vt-ease); }
::view-transition-old(*), ::view-transition-new(*) { animation-duration: var(--vt-dur); animation-timing-function: var(--vt-ease); }
::view-transition-group(overlay) { z-index: 10; }
::view-transition-group(sheet) { z-index: 20; }
::view-transition-group(panel) { z-index: 22; }
::view-transition-group(pick) { z-index: 30; }
::view-transition-group(dish) { z-index: 40; }
::view-transition-group(toast) { z-index: 50; }
::view-transition-group(cat-on) { z-index: 3; }
::view-transition-new(overlay):only-child { animation: vt-fade .2s ease-out; }
::view-transition-old(overlay):only-child { animation: vt-fade-out .2s ease-in; }
::view-transition-new(sheet):only-child { animation: vt-rise var(--vt-dur) var(--vt-ease); }
::view-transition-old(sheet):only-child { animation: vt-sink .22s ease-in; }
::view-transition-new(items) { animation: vt-in-right var(--vt-dur) var(--vt-ease); }
::view-transition-old(items) { animation: vt-out-left .2s ease-in; }
:root.vt-back::view-transition-new(items) { animation-name: vt-in-left; }
:root.vt-back::view-transition-old(items) { animation-name: vt-out-right; }
::view-transition-new(pane) { animation: vt-in-up var(--vt-dur) var(--vt-ease); }
::view-transition-old(pane) { animation: vt-fade-out .16s ease-in; }
::view-transition-new(panel):only-child { animation: vt-expand .26s var(--vt-ease); transform-origin: top center; }
::view-transition-old(panel):only-child { animation: vt-collapse .18s ease-in; transform-origin: top center; }
::view-transition-old(panel), ::view-transition-new(panel) { mix-blend-mode: normal; }
::view-transition-old(dish), ::view-transition-new(dish), ::view-transition-old(pick), ::view-transition-new(pick) { object-fit: cover; mix-blend-mode: normal; }
::view-transition-image-pair(dish), ::view-transition-image-pair(pick) { isolation: auto; border-radius: 12px; overflow: hidden; }
::view-transition-new(toast):only-child { animation: vt-in-up .22s var(--vt-ease); }
::view-transition-old(toast):only-child { animation: vt-fade-out .16s ease-in; }
.t-line { view-transition-class: line; }
.t-mgroup, .t-note-group { view-transition-class: mg; }
::view-transition-new(.line):only-child { animation: vt-in-up var(--vt-dur) var(--vt-ease); }
::view-transition-old(.line):only-child { animation: vt-collapse .2s ease-in; transform-origin: top center; }
::view-transition-group(.mg) { z-index: 23; }
.t-line.is-new { animation: vt-glow 1.4s ease-out; }
.t-sub-h.is-new { animation: vt-fade .4s ease-out; }
.t-checkbtn.is-pulse { animation: vt-pulse .7s var(--vt-ease); }
.no-anim .t-mpanel, .t-mpanel.no-anim { animation: none !important; }
@keyframes vt-fade { from { opacity: 0; } }
@keyframes vt-fade-out { to { opacity: 0; } }
@keyframes vt-rise { from { opacity: 0; transform: translateY(48px); clip-path: inset(0 0 48px 0); } to { clip-path: inset(0); } }
@keyframes vt-sink { from { clip-path: inset(0); } to { opacity: 0; transform: translateY(48px); clip-path: inset(0 0 48px 0); } }
@keyframes vt-in-right { from { opacity: 0; transform: translateX(44px); clip-path: inset(0 44px 0 0); } to { clip-path: inset(0); } }
@keyframes vt-in-left { from { opacity: 0; transform: translateX(-44px); clip-path: inset(0 0 0 44px); } to { clip-path: inset(0); } }
@keyframes vt-out-left { from { clip-path: inset(0); } to { opacity: 0; transform: translateX(-44px); clip-path: inset(0 0 0 44px); } }
@keyframes vt-out-right { from { clip-path: inset(0); } to { opacity: 0; transform: translateX(44px); clip-path: inset(0 44px 0 0); } }
@keyframes vt-in-up { from { opacity: 0; transform: translateY(18px); clip-path: inset(0 0 18px 0); } to { clip-path: inset(0); } }
@keyframes vt-expand { from { opacity: 0; transform: scaleY(.55); } }
@keyframes vt-collapse { to { opacity: 0; transform: scaleY(.55); } }
@keyframes vt-glow { 0% { box-shadow: 0 0 0 3px var(--neon); background: var(--blue-wash); } 100% { box-shadow: 0 0 0 0 transparent; background: var(--card); } }
@keyframes vt-pulse { 35% { transform: scale(1.14); background: var(--blue-wash); } }
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }

/* ================= NATIVE FEEL (shared by the pitch page and /demo) ================= */
.tablet { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.tablet :is(button, a, .t-grab) { transition: transform 90ms ease-out, background-color 90ms ease-out, border-color 90ms ease-out, color 90ms ease-out; }
.tablet .is-pressed { transition-duration: 0s !important; }
.tablet :is(.t-link, .t-tab, .t-cat, .t-need, .t-opt, .t-seatchip, .t-round-btn, .t-x, .t-toast-btn, .t-temp-tick, .t-browse-row, .t-logo-btn, .t-gear, .t-seg button).is-pressed { transform: scale(.96); }
.tablet :is(.t-need, .t-opt, .t-ocard, .t-browse-row).is-pressed { border-color: var(--blue); background: var(--blue-wash); }
.tablet .t-ocard.is-pressed { transform: scale(.97); }
.tablet :is(.t-cat, .t-tab, .t-link).is-pressed { background: rgba(8, 41, 70, .08); }
.tablet .t-top :is(.t-tab, .t-btn).is-pressed:not([aria-selected="true"]) { background: rgba(245, 240, 232, .16); }
.tablet .t-neon.is-pressed { background: var(--blue-deep); }
.tablet .t-line.is-pressed { background: rgba(8, 41, 70, .08); }
.tablet .t-solid.is-pressed { background: var(--blue-deep); }
.tablet .t-round-btn.is-pressed, .tablet .t-x.is-pressed { background: var(--line); }
.tablet .t-toast-btn.is-pressed { background: rgba(248, 192, 8, .18); }
.tablet [aria-disabled="true"].t-btn { opacity: .5; box-shadow: none; }
.no-trans, .no-trans * { transition: none !important; }

/* phone number: filled digits, blinking caret, remaining placeholders */
.t-phone-mask { display: flex; justify-content: center; align-items: center; white-space: pre; }
.t-phone-mask .m-off { color: #9AA5B1; }
.t-phone-mask .m-caret { position: relative; width: 0; align-self: stretch; }
.t-phone-mask .m-caret::after { content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 2px; border-radius: 2px; background: var(--blue); animation: caret 1.05s steps(1) infinite; }
.t-phone-wrap.is-full .m-caret::after { display: none; }
.t-phone { cursor: default; caret-color: transparent; }
.t-phone:focus-visible { outline: 3px solid var(--neon); outline-offset: 2px; }
.t-phone-wrap.is-full .t-phone { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(39, 196, 217, .35); }
@keyframes caret { 50% { opacity: 0; } }
.t-phone-wrap.is-shake { animation: shake 300ms cubic-bezier(.36, .07, .19, .97); }
@keyframes shake { 16%, 50%, 83% { transform: translateX(-9px); } 33%, 66% { transform: translateX(9px); } 100% { transform: none; } }

/* quantity number pops when it changes */
.t-qty-n.is-bump { animation: bump .22s cubic-bezier(.2, .8, .2, 1); }
@keyframes bump { 40% { transform: scale(1.28); } }

/* doneness thumb grows while dragging */
.t-temp-range::-webkit-slider-thumb { transition: transform .12s ease-out; }
.t-temp-range::-moz-range-thumb { transition: transform .12s ease-out; }
.t-temp.is-drag .t-temp-range::-webkit-slider-thumb { transform: scale(1.18); }
.t-temp.is-drag .t-temp-range::-moz-range-thumb { transform: scale(1.18); }

/* sheet grab handle, swipe down to dismiss */
.t-grab { position: absolute; top: 0; left: 50%; z-index: 6; width: 132px; height: 30px; margin-left: -66px; display: grid; place-items: center; touch-action: none; cursor: grab; }
.t-grab span { width: 44px; height: 5px; border-radius: 999px; background: rgba(8, 41, 70, .28); box-shadow: 0 0 0 1px rgba(255, 253, 248, .55); }
.t-grab:active { cursor: grabbing; }
.t-sheet-item .t-grab span { background: rgba(255, 253, 248, .9); box-shadow: 0 1px 4px rgba(8, 41, 70, .45); }
.t-overlay.is-closing { animation: fade-out .2s ease-in forwards !important; pointer-events: none; }
.t-overlay.is-closing .t-sheet { animation: sink .2s ease-in forwards !important; }
@keyframes fade-out { to { opacity: 0; } }
@keyframes sink { to { transform: translateY(56px); opacity: 0; } }

/* toasts rise, hold, then sink */
.t-toast { animation: pop .26s cubic-bezier(.2, .8, .2, 1); }
.t-toast.is-leaving { animation: toast-out .19s ease-in forwards !important; }
@keyframes toast-out { to { opacity: 0; transform: translate(-50%, 14px); } }

/* demo settings (full-screen app only) */
.t-gear { width: 48px; height: 48px; flex: none; display: grid; place-items: center; border: 0; border-radius: 999px; background: transparent; color: rgba(245, 240, 232, .72) !important; cursor: pointer; }
.t-gear .i { width: 24px; height: 24px; }
@media (hover: hover) { .t-gear:hover { color: var(--formica) !important; background: rgba(245, 240, 232, .1); } }
.t-gear-w { position: absolute; z-index: 3; top: 14px; right: 14px; color: rgba(8, 41, 70, .5) !important; }
.tablet.is-narrow .t-gear-w { color: rgba(245, 240, 232, .72) !important; top: 10px; right: 8px; }
.t-sheet-set { width: min(560px, 94%); }
.t-set-body { overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 18px 32px 28px; display: grid; gap: 20px; }
.t-set-row { display: grid; gap: 8px; }
.t-set-lab { font-size: 14px; font-weight: 700; color: var(--muted); }
.t-set-seg { justify-self: start; background: var(--formica-2); }
.t-set-seg button { font-size: 15px; padding: 0 18px; }
.t-set-seg button[aria-checked="true"] { background: var(--navy); color: var(--formica) !important; }
.t-select { min-height: 56px; border-radius: var(--r-sm); border: 2px solid var(--line); background: var(--card); color: var(--navy); font: 500 17px var(--body); padding: 0 14px; justify-self: start; min-width: 220px; }
.t-set-acts { display: flex; flex-wrap: wrap; gap: 10px; }
.t-set-acts .t-btn .i { width: 20px; height: 20px; }
.t-api { max-width: none; margin: 0; }
.t-api summary { min-height: 56px; }
.t-api .api-list { max-height: none; }
.t-set-tip { margin: 0; }
.t-set-pitch { justify-self: start; text-decoration: none; display: inline-flex; padding: 0 22px; }
.tablet.is-narrow .t-set-body { padding-inline: 16px; }

/* narrow layout on a tall iPad-portrait-sized screen */
@container (min-width: 600px) {
  .tablet.is-narrow .t-pad { max-width: 460px; gap: 12px; }
  .tablet.is-narrow .t-key { height: 76px; font-size: 30px; }
  .tablet.is-narrow .t-phone-wrap { height: 76px; max-width: 460px; }
  .tablet.is-narrow .t-phone, .tablet.is-narrow .t-phone-mask { font-size: 34px; }
  .tablet.is-narrow .t-q { font-size: 24px; }
  .tablet.is-narrow .t-keypad { justify-content: center; }
  .tablet.is-narrow .t-grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
  .tablet.is-narrow .t-usual-row { grid-template-columns: 1fr 1fr; }
  .tablet.is-narrow .t-usuals, .tablet.is-narrow .t-items { padding: 24px; }
  .tablet.is-narrow .t-script { width: 150px; }
  .tablet.is-narrow .t-greet { font-size: 21px; }
  .tablet.is-narrow .t-need-grid { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) { .t-phone-mask .m-caret::after { animation: none; } .t-phone-wrap.is-shake { animation: none; } }

/* pitch page: ways into the full-screen demo */
.proto-full { margin-top: 4px; }
.bezel-fs { position: absolute; z-index: 3; top: 0; right: clamp(22px, 3vw, 40px); transform: translateY(-50%); display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 999px; background: #1B2733; color: var(--formica); font: 600 15px/1 var(--body); text-decoration: none; box-shadow: 0 0 0 2px var(--neon); }
.bezel-fs .i { width: 18px; height: 18px; }
@media (hover: hover) { .bezel-fs:hover { background: var(--blue); color: var(--formica); } }
/* the error takes the help line's place, so the keypad never moves */
.t-keypad:has(.t-err:not(:empty)) .t-help { display: none; }
.t-keypad .t-err { font-size: 15px; line-height: 1.4; text-align: center; }
/* on the tablet layout toasts center over the content, clear of the check column */
.tablet:not(.is-narrow) .t-main ~ .t-toast:not(.t-toast-top) { left: calc(50% - 170px); max-width: calc(100% - 340px - 32px); }
@container (max-width: 1080px) { .tablet:not(.is-narrow) .t-main ~ .t-toast:not(.t-toast-top) { left: calc(50% - 150px); max-width: calc(100% - 300px - 32px); } }
/* phone welcome band: logo and greeting on top, seat and help button below */
.tablet.is-narrow .t-sign { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.tablet.is-narrow .t-sign-mid { order: 0; grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding-right: 40px; }
.tablet.is-narrow .t-sign-mid .t-script { flex: none; }
.tablet.is-narrow .t-greet { flex: 1 1 10em; min-width: 0; max-width: none; }
.tablet.is-narrow .t-thanks { flex: 1 1 100%; font-size: 15px; }
.tablet.is-narrow .t-seat { grid-row: 2; grid-column: 1; margin: 0; }
.tablet.is-narrow .t-sign > .t-btn { grid-row: 2; grid-column: 2; align-self: center; }
.tablet.is-narrow .t-skel .t-sign > .sk-pill { grid-row: 2; grid-column: 2; }