/* =========================================================
   Display screens (display/): a TV or tablet across the counter.
   Always dark (easy on the eyes, makes photos stand out), big type
   that reads from a few steps away, no scrolling.
   ========================================================= */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #0D110F; color: #E7EEEA; font-family: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif; overflow: hidden; }
main { height: 100dvh; position: relative; container-type: size; }
/* Turned for a TV mounted on its side (display.js sets is-turned / is-turned-flip): sizes
   below use container units (cqw / cqh), so they follow the turned page, not the glass */
main.is-turned, main.is-turned-flip { position: fixed; top: 0; left: 0; width: 100vh; height: 100vw; transform-origin: top left; }
main.is-turned { transform: translateX(100vw) rotate(90deg); }
main.is-turned-flip { transform: translateY(100vh) rotate(-90deg); }
[hidden] { display: none !important; }

/* Pairing code */
.d-pair { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2cqh; text-align: center; padding: 4cqh 6cqw; }
.d-logo { height: 5cqh; min-height: 28px; filter: brightness(1.15); }
.d-pair h1 { margin: 2cqh 0 0; font-size: clamp(22px, 3.4cqw, 44px); font-weight: 600; }
.d-code { font-size: clamp(64px, 14cqw, 200px); font-weight: 800; letter-spacing: .08em; color: #5BD072; font-variant-numeric: tabular-nums; line-height: 1; }
.d-help { margin: 0; font-size: clamp(16px, 2cqw, 26px); color: #97A49D; max-width: 900px; }
.d-small { margin: 0; font-size: clamp(14px, 1.5cqw, 20px); color: #6C7973; }

/* Welcome */
.d-welcome { height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; padding: 6cqh 6cqw;
             background: radial-gradient(circle at 50% 40%, #18201b 0%, #0D110F 70%); }
.d-welcome h1 { margin: 1cqh 0; font-size: clamp(36px, 7cqw, 110px); font-weight: 800; line-height: 1.05; }
.d-welcome .d-small { font-size: clamp(18px, 2.4cqw, 34px); color: #5BD072; font-weight: 600; }
.d-place { margin: 0; font-size: clamp(18px, 2.4cqw, 32px); color: #97A49D; }
.d-mark { position: absolute; bottom: 4cqh; right: 4cqw; width: clamp(36px, 5cqw, 72px); opacity: .7; }

/* The static logo on the Welcome card */
.d-brand { display: flex; justify-content: center; margin-bottom: 3cqh; }
.d-brand img { max-width: min(40cqw, 320px); max-height: 30cqh; border-radius: 18px; object-fit: contain; }
/* The logo animation, full screen */
.d-anim { position: absolute; inset: 0; background: #000; display: grid; place-items: center; }
.d-anim video, .d-anim img { width: 100%; height: 100%; object-fit: contain; }

/* An offer */
.d-offer { height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 5cqw; padding: 6cqh 5cqw; align-items: center; animation: d-in .45s ease; }
.d-offer-photo { aspect-ratio: 1; border-radius: 26px; overflow: hidden; background: #1A221E; display: grid; place-items: center; max-height: 86cqh; }
.d-offer-photo img { width: 100%; height: 100%; object-fit: cover; }
.d-offer-info { display: flex; flex-direction: column; gap: 2cqh; align-items: flex-start; }
.d-offer-badge { padding: 8px 18px; border-radius: 999px; background: #FFC700; color: #3A2A00; font-weight: 800; font-size: clamp(16px, 2cqw, 30px); }
.d-offer-info h1 { margin: 0; font-size: clamp(34px, 5.6cqw, 92px); font-weight: 800; line-height: 1.05; }
.d-offer-info .d-place:empty { display: none; }
.d-portrait .d-offer { grid-template-columns: 1fr; align-content: center; } .d-portrait .d-offer-photo { max-height: 46cqh; }

/* Product details */
.d-product { height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 4cqw; padding: 5cqh 4cqw; align-items: center; animation: d-in .35s ease; }
@keyframes d-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.d-photos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2cqh; max-height: 90cqh; }
.d-photo-main { grid-column: 1 / -1; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 22px; background: #1A221E; }
.d-photo-small { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; background: #1A221E; }
.d-photos.is-empty { display: grid; grid-template-columns: 1fr; place-items: center; aspect-ratio: 1; background: #1A221E; border-radius: 22px; }
.d-initials { font-size: clamp(60px, 12cqw, 180px); font-weight: 800; color: #2E3A34; }
.d-info { min-width: 0; display: flex; flex-direction: column; gap: 1.6cqh; max-height: 90cqh; overflow: hidden; }
.d-tags { display: flex; flex-wrap: wrap; gap: 10px; }
.d-tag { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: #1A221E; color: #97A49D; font-size: clamp(14px, 1.4cqw, 20px); font-weight: 600; }
.d-food::before { content: ''; width: 12px; height: 12px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px #0D110F, 0 0 0 5px currentColor; margin-right: 4px; }
.d-food.veg, .d-food.vegan { color: #5BD072; }
.d-food.non_veg { color: #FF8A80; }
.d-info h1 { margin: 0; font-size: clamp(30px, 4.6cqw, 72px); font-weight: 800; line-height: 1.08; }
.d-desc { margin: 0; font-size: clamp(16px, 1.8cqw, 26px); color: #97A49D; line-height: 1.4; }
.d-desc:empty { display: none; }
.d-price { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.d-price b { font-size: clamp(34px, 5cqw, 80px); font-weight: 800; color: #FFD54A; }
.d-price small { font-size: clamp(16px, 1.6cqw, 24px); color: #97A49D; }
.d-price s { font-size: clamp(18px, 2cqw, 30px); color: #6C7973; }
.d-facts { display: grid; grid-template-columns: max-content 1fr; gap: 1.2cqh 2cqw; margin: 1cqh 0 0; padding-top: 2cqh; border-top: 1px solid #232D28; }
.d-facts dt { font-size: clamp(14px, 1.4cqw, 20px); color: #6C7973; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; padding-top: 3px; }
.d-facts dd { margin: 0; font-size: clamp(16px, 1.8cqw, 26px); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
/* Portrait: photos on top, details below */
.d-portrait .d-product { grid-template-columns: 1fr; align-content: start; gap: 3cqh; }
/* Photos stay square (never cropped into a wide box): the block is narrowed to fit the height */
.d-portrait .d-photos { width: min(100%, 40cqh); justify-self: center; max-height: none; }
.d-portrait .d-info { max-height: none; }

/* The bill */
.d-bill { height: 100%; display: flex; flex-direction: column; padding: 5cqh 6cqw 4cqh; animation: d-in .3s ease; }
.d-bill-head { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding-bottom: 2cqh; border-bottom: 1px solid #232D28; }
.d-bill-head h1 { margin: 0; font-size: clamp(26px, 3.6cqw, 56px); font-weight: 800; }
.d-lines { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; padding: 1cqh 0; scroll-behavior: smooth; }
.d-line { display: flex; align-items: center; gap: 2cqw; padding: 1.4cqh 0; border-bottom: 1px solid #1A221E; }
.d-line.is-changed { animation: d-new 1.2s ease; }
@keyframes d-new { 0%, 35% { background: rgba(47, 174, 69, .22); } 100% { background: transparent; } }
.d-line-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .4cqh; }
.d-line-main b { font-size: clamp(18px, 2.3cqw, 34px); font-weight: 700; }
.d-line-main small { font-size: clamp(14px, 1.6cqw, 24px); color: #97A49D; }
.d-line-main s { color: #6C7973; }
.d-line-amount { font-size: clamp(18px, 2.3cqw, 34px); font-weight: 700; font-variant-numeric: tabular-nums; }
.d-totals { display: grid; grid-template-columns: 1fr auto; gap: .8cqh 2cqw; margin: 0; padding-top: 2cqh; border-top: 1px solid #232D28; }
.d-totals dt, .d-totals dd { margin: 0; font-size: clamp(16px, 2cqw, 28px); color: #97A49D; }
.d-totals dd { text-align: right; font-variant-numeric: tabular-nums; color: #E7EEEA; font-weight: 600; }
.d-totals .is-off { color: #5BD072; }
.d-totals .is-small { font-size: clamp(14px, 1.5cqw, 20px); color: #6C7973; }
.d-totals dt.is-total { font-size: clamp(24px, 3.4cqw, 52px); font-weight: 800; color: #E7EEEA; padding-top: 1cqh; }
.d-totals dd.is-total { font-size: clamp(30px, 4.8cqw, 76px); font-weight: 800; color: #FFD54A; }

/* Tax breakup */
.d-tax { height: 100%; display: flex; flex-direction: column; padding: 4cqh 4cqw 3cqh; animation: d-in .3s ease; }
.d-tax-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 3cqw; padding-top: 2cqh; }
.d-table { width: 100%; border-collapse: collapse; align-self: start; }
.d-table th { text-align: left; font-size: clamp(12px, 1.2cqw, 18px); color: #6C7973; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; padding: 0 0 1cqh; border-bottom: 1px solid #232D28; }
.d-table td { padding: 1.2cqh 0; border-bottom: 1px solid #1A221E; font-size: clamp(15px, 1.6cqw, 24px); vertical-align: top; }
.d-table td small { display: block; color: #6C7973; font-size: clamp(12px, 1.2cqw, 17px); margin-top: .3cqh; }
.d-table .n { text-align: right; font-variant-numeric: tabular-nums; padding-left: 1.5cqw; }
.d-table th + th, .d-table td + td { padding-left: 1.5cqw; }
.d-tax-side { display: flex; flex-direction: column; gap: 1.4cqh; min-width: 0; }
.d-tax-side h2 { margin: 0; font-size: clamp(14px, 1.4cqw, 20px); color: #6C7973; text-transform: uppercase; letter-spacing: .04em; }
.d-taxbox { padding: 1.4cqh 1.4cqw; border-radius: 14px; background: #121815; border: 1px solid #232D28; }
.d-taxbox-head { display: flex; justify-content: space-between; gap: 1cqw; font-size: clamp(16px, 1.8cqw, 26px); }
.d-taxbox-head span { font-weight: 700; color: #FFD54A; font-variant-numeric: tabular-nums; }
.d-taxbox-line { font-size: clamp(13px, 1.4cqw, 20px); color: #97A49D; margin-top: .5cqh; white-space: pre; }
.d-tax .d-totals { margin-top: auto; }
.d-portrait .d-tax-body { grid-template-columns: 1fr; overflow: hidden; }

/* Paid */
.d-paid { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2cqh; text-align: center; padding: 4cqh 6cqw; animation: d-in .3s ease; }
.d-paid-icon { width: clamp(80px, 12cqw, 160px); height: clamp(80px, 12cqw, 160px); border-radius: 50%; display: grid; place-items: center; background: rgba(47, 174, 69, .16); color: #5BD072; font-size: clamp(44px, 7cqw, 96px); font-weight: 800; animation: d-pop .45s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes d-pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.d-paid h1 { margin: 0; font-size: clamp(30px, 5cqw, 80px); font-weight: 800; }
.d-paid-total { font-size: clamp(34px, 5cqw, 80px); font-weight: 800; color: #FFD54A; }
.d-paid-change { padding: 1.4cqh 3cqw; border-radius: 999px; background: rgba(255, 199, 0, .14); color: #FFD54A; font-size: clamp(20px, 3cqw, 44px); font-weight: 700; }

.d-offline { position: absolute; top: 2cqh; left: 50%; transform: translateX(-50%); padding: 8px 16px; border-radius: 999px; background: rgba(255, 199, 0, .14); color: #FFD54A; font-weight: 600; font-size: 16px; }
.d-full { position: absolute; top: 2cqh; right: 2cqw; padding: 10px 18px; border: 1px solid #2E3A34; border-radius: 999px; background: #121815; color: #97A49D; font: inherit; font-size: 15px; cursor: pointer; }

/* Portrait: the bill reads from across the counter and shows many more lines; reels fill the glass */
.d-portrait .d-bill { padding: 4cqh 6cqw 3cqh; }
.d-portrait .d-bill-head h1 { font-size: clamp(26px, 3cqh, 64px); }
.d-portrait .d-line { padding: 1cqh 0; }
.d-portrait .d-line-main b, .d-portrait .d-line-amount { font-size: clamp(18px, 2cqh, 40px); }
.d-portrait .d-line-main small { font-size: clamp(14px, 1.4cqh, 28px); }
.d-portrait .d-totals dt, .d-portrait .d-totals dd { font-size: clamp(16px, 1.7cqh, 34px); }
.d-portrait .d-totals dt.is-total { font-size: clamp(24px, 2.8cqh, 56px); }
.d-portrait .d-totals dd.is-total { font-size: clamp(30px, 4cqh, 84px); }
.d-portrait .d-welcome h1 { font-size: clamp(36px, 10cqw, 120px); }
.d-portrait .d-anim .is-tall { object-fit: cover; } /* a 9:16 reel fills a portrait screen edge to edge; a wide video stays whole */

/* Customer Keyboard: the customer's own form, big touch targets (Mohit, 11 Oct 2026) */
.d-form { height: 100%; overflow: auto; display: flex; align-items: flex-start; justify-content: center; padding: 4cqh 6cqw; }
.d-form form { width: min(100%, 720px); margin: auto 0; }
.d-form h1 { margin: 0 0 1cqh; font-size: clamp(26px, 4.5cqw, 48px); font-weight: 800; }
.d-form .d-help { margin-bottom: 3cqh; }
.d-field { display: block; margin-bottom: 2.2cqh; }
.d-field span { display: block; margin-bottom: 6px; font-size: clamp(14px, 1.8cqw, 20px); color: #97A49D; font-weight: 600; }
.d-field input, .d-field textarea { width: 100%; font: inherit; font-size: clamp(20px, 2.8cqw, 30px); font-weight: 600; color: #E7EEEA; background: #161C19; border: 2px solid #2A3530; border-radius: 16px; padding: 14px 18px; outline: none; }
.d-field input:focus, .d-field textarea:focus { border-color: #5BD072; }
/* iPhone Safari draws a date box its own way (wider than the others, text centred): make it line up */
/* Every box one fixed height (an empty date box on iPhone otherwise shrinks to half) */
.d-field input { display: block; min-width: 0; max-width: 100%; -webkit-appearance: none; appearance: none; line-height: 1.3; height: calc(1.3em + 32px); }
.d-field input[type="date"] { text-align: left; color-scheme: dark; }
.d-field input[type="date"]::-webkit-date-and-time-value { text-align: left; margin: 0; }
.d-field input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(.7); }
.d-field textarea { resize: none; font-weight: 500; }
.d-form-err { margin: -1cqh 0 2cqh; color: #FF8A80; font-weight: 600; font-size: clamp(14px, 1.8cqw, 20px); }
.d-form-actions { display: flex; gap: 14px; justify-content: flex-end; margin-top: 1cqh; }
.d-btn, .d-btn-ghost { font: inherit; font-size: clamp(18px, 2.4cqw, 26px); font-weight: 700; padding: 16px 32px; border-radius: 999px; border: 2px solid #2FAE45; background: #2FAE45; color: #fff; cursor: pointer; }
.d-btn:disabled { opacity: .4; cursor: default; }
.d-btn-ghost { background: transparent; border-color: #2A3530; color: #97A49D; }
.d-form-thanks { margin: auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 2cqh; }
.d-form-thanks h1 { margin: 0; font-size: clamp(28px, 5cqw, 56px); font-weight: 800; }
/* The rating */
.d-stars { display: flex; gap: 2cqw; justify-content: center; margin: 2cqh 0 1cqh; }
.d-star { font: inherit; font-size: clamp(44px, 9cqw, 96px); line-height: 1; background: none; border: 0; color: #2A3530; cursor: pointer; padding: 4px; transition: transform .12s ease, color .12s ease; }
.d-star.is-on { color: #FFD54A; transform: scale(1.08); }
.d-star-word { margin: 0 0 2cqh; text-align: center; font-size: clamp(18px, 2.6cqw, 30px); font-weight: 700; color: #FFD54A; min-height: 1.4em; }
/* Customer Display: what is being typed on the keyboard */
.d-typing { height: 100%; display: flex; align-items: center; justify-content: center; text-align: center; padding: 6cqh 6cqw; animation: d-in .3s ease; }
.d-typing h1 { margin: 1cqh auto 3cqh; max-width: 24ch; font-size: clamp(30px, 4.6cqw, 72px); font-weight: 800; line-height: 1.12; min-height: 1.1em; }
.d-typing .d-small { font-size: clamp(18px, 2.4cqw, 34px); color: #5BD072; font-weight: 600; }
.d-typing-facts { display: grid; grid-template-columns: auto auto; gap: 1.2cqh 3cqw; justify-content: center; text-align: left; margin: 0; }
.d-typing-facts dt { color: #97A49D; font-size: clamp(16px, 2cqw, 28px); }
.d-typing-facts dd { margin: 0; font-size: clamp(20px, 2.6cqw, 36px); font-weight: 700; font-variant-numeric: tabular-nums; }

/* The business's logo above "Your mobile number" (keyboard) and the invitation (customer display) */
.d-form-brand { justify-content: flex-start; margin-bottom: 2cqh; }
.d-form-brand img { max-height: 14cqh; max-width: 40cqw; }
.d-typing .d-brand img { max-height: 26cqh; }

/* ===== Customer Keyboard prompts, redone (Mohit, 11 Oct 2026: "doesn't look that pro") =====
   A soft, slow-moving glow in the business's own colour (from its logo, display.js brandTint)
   instead of flat black; a short headline, a calm subline, the privacy line last with a lock;
   the logo eases in and breathes. Cheap to draw: gradients moved with transform, no blur filter. */
main { --b1: #2FAE45; --b2: #1A6E7A; --b1-ink: #FFFFFF; }
.d-aura { position: relative; isolation: isolate; overflow: hidden; background: #0B0F0D; }
.d-glow { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.d-glow i { position: absolute; width: 90cqmax; height: 90cqmax; border-radius: 50%; opacity: .8; will-change: transform; }
.d-glow i:nth-child(1) { left: -30cqmax; top: -40cqmax; background: radial-gradient(closest-side, var(--b1), transparent); animation: d-drift1 22s ease-in-out infinite alternate; }
.d-glow i:nth-child(2) { right: -35cqmax; bottom: -45cqmax; background: radial-gradient(closest-side, var(--b2), transparent); opacity: .65; animation: d-drift2 28s ease-in-out infinite alternate; }
.d-glow i:nth-child(3) { left: 30%; top: 40%; width: 60cqmax; height: 60cqmax; background: radial-gradient(closest-side, rgba(255, 255, 255, .07), transparent); animation: d-drift3 18s ease-in-out infinite alternate; }
@keyframes d-drift1 { to { transform: translate(18cqw, 22cqh) scale(1.15); } }
@keyframes d-drift2 { to { transform: translate(-20cqw, -18cqh) scale(1.1); } }
@keyframes d-drift3 { to { transform: translate(-25cqw, -20cqh); } }
.d-aura::after { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at center, transparent 40%, rgba(0, 0, 0, .45)); pointer-events: none; }

.d-logo-card { display: grid; place-items: center; margin: 0; }
.d-logo-card img { display: block; width: auto; max-width: 100%; border-radius: 0; box-shadow: none; animation: d-logo-in .9s cubic-bezier(.2, .9, .3, 1.2) both, d-breathe 5s ease-in-out .9s infinite; }
@keyframes d-logo-in { from { opacity: 0; transform: translateY(14px) scale(.85); } to { opacity: 1; transform: none; } }
@keyframes d-breathe { 50% { transform: scale(1.035); } }
.d-eyebrow { margin: 0; font-size: clamp(12px, 1.4cqw, 18px); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .62); }
.d-sub { margin: 0; color: rgba(231, 238, 234, .72); font-weight: 400; line-height: 1.45; }
.d-privacy { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0; color: rgba(231, 238, 234, .5); font-size: clamp(13px, 1.4cqw, 18px); font-weight: 500; }
.d-lock { width: 1em; height: 1em; flex: none; opacity: .85; }

/* Customer Display: the invitation */
.d-typing { align-items: center; }
.d-typing-inner { display: flex; flex-direction: column; align-items: center; gap: 1.6cqh; max-width: 1100px; }
.d-typing .d-logo-card img { height: clamp(90px, 22cqh, 240px); }
.d-typing .d-logo-card { margin-bottom: 2cqh; }
.d-typing h1 { margin: 0; max-width: 20ch; font-size: clamp(30px, 5cqw, 76px); font-weight: 700; line-height: 1.08; letter-spacing: -.02em; min-height: 0; }
.d-typing .d-sub { max-width: 40ch; font-size: clamp(17px, 2.1cqw, 30px); }
.d-typing .d-privacy { margin-top: 3cqh; }
.d-typing-inner.is-in > * { animation: d-rise .7s cubic-bezier(.2, .8, .2, 1) both; }
.d-typing-inner.is-in > *:nth-child(2) { animation-delay: .12s; }
.d-typing-inner.is-in > *:nth-child(3) { animation-delay: .22s; }
.d-typing-inner.is-in > *:nth-child(4) { animation-delay: .32s; }
.d-typing-inner.is-in > *:nth-child(5) { animation-delay: .5s; }
.d-typing-inner.is-in > .d-logo-card { animation: none; }
@keyframes d-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.d-portrait .d-typing h1 { font-size: clamp(30px, 8cqw, 72px); }
.d-portrait .d-typing .d-sub { font-size: clamp(17px, 3.4cqw, 30px); }

/* Customer Keyboard: the form on a glass card */
.d-form { align-items: flex-start; padding: 3cqh 4cqw; } /* the card centres itself (margin: auto) and scrolls when taller than the screen */
.d-card .d-field { margin-bottom: 1.6cqh; }
.d-card { width: min(100%, 640px); margin: auto 0; padding: clamp(22px, 4cqw, 40px); border-radius: 28px; background: rgba(14, 19, 17, .66); border: 1px solid rgba(255, 255, 255, .09); box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .7); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); animation: d-rise .6s cubic-bezier(.2, .8, .2, 1) both; }
.d-card-head { display: flex; align-items: center; gap: 16px; margin-bottom: 1.4cqh; }
.d-card-head .d-logo-card img { height: clamp(52px, 9cqh, 76px); } /* the logo as it is: no tile, frame or shadow behind it (Mohit) */
.d-form .d-card h1 { margin: 2px 0 0; font-size: clamp(24px, 3.6cqw, 36px); font-weight: 700; letter-spacing: -.01em; line-height: 1.15; }
.d-card .d-sub { margin-bottom: 2.6cqh; font-size: clamp(15px, 1.9cqw, 19px); }
.d-card .d-field span { font-size: clamp(13px, 1.5cqw, 16px); font-weight: 500; color: rgba(231, 238, 234, .6); }
.d-card .d-field input, .d-card .d-field textarea { background: rgba(255, 255, 255, .06); border: 1.5px solid rgba(255, 255, 255, .12); font-size: clamp(19px, 2.4cqw, 26px); }
.d-card .d-field input:focus, .d-card .d-field textarea:focus { border-color: var(--b1); box-shadow: 0 0 0 4px color-mix(in srgb, var(--b1) 30%, transparent); }
.d-card .d-btn { background: var(--b1); border-color: var(--b1); color: var(--b1-ink); box-shadow: 0 10px 30px -10px var(--b1); }
.d-card .d-btn-ghost { border-color: rgba(255, 255, 255, .16); color: rgba(231, 238, 234, .7); }
.d-card .d-privacy { justify-content: flex-start; margin-top: 2.4cqh; }
.d-card .d-form-actions { margin-top: .6cqh; }
.d-rate .d-card { text-align: center; }
.d-rate .d-card h1 { font-size: clamp(28px, 4.4cqw, 44px); }
.d-aura .d-form-thanks h1 { font-weight: 700; }

/* "Enter your mobile number" on one line at any screen size: the size shrinks to fit instead of wrapping */
.d-typing h1.is-one-line { max-width: none; white-space: nowrap; font-size: min(clamp(30px, 5cqw, 76px), 6.2cqw); }
.d-portrait .d-typing h1.is-one-line { font-size: min(clamp(26px, 8cqw, 72px), 6.6cqw); }

/* Keyboard headline on one line on a phone too: the card measures itself (container), the logo goes
   above the headline when the card is narrow, and the headline shrinks to the card's width */
.d-card { container-type: inline-size; }
@container (max-width: 520px) {
  .d-card-head { flex-direction: column; align-items: flex-start; gap: 12px; }
}
.d-form .d-card h1.is-one-line { white-space: nowrap; font-size: min(clamp(22px, 3.6cqw, 36px), 7cqi); }

/* Customer Display invitation, text tidied: balanced lines, the perk as a soft pill, a readable privacy line */
.d-typing h1, .d-typing .d-sub { text-wrap: balance; }
.d-typing .d-sub { max-width: 30ch; }
.d-perk { margin: 1cqh 0 0; padding: 10px 22px; border-radius: 999px; background: color-mix(in srgb, var(--b1) 22%, transparent); border: 1px solid color-mix(in srgb, var(--b1) 45%, transparent); color: #fff; font-weight: 600; font-size: clamp(15px, 1.8cqw, 24px); }
.d-typing .d-privacy { font-size: clamp(15px, 1.7cqw, 22px); color: rgba(231, 238, 234, .62); }
.d-portrait .d-perk { font-size: clamp(15px, 3cqw, 24px); }
.d-portrait .d-typing .d-privacy { font-size: clamp(15px, 2.6cqw, 22px); }
.d-typing .d-eyebrow { font-size: clamp(13px, 1.5cqw, 20px); }
.d-portrait .d-typing .d-eyebrow { font-size: clamp(13px, 2.4cqw, 20px); }
.d-typing .d-sub { max-width: 46ch; }
.d-portrait .d-typing .d-sub { max-width: 30ch; }
/* Headline and subline read as one group (Mohit): a smaller gap between them */
.d-typing h1 + .d-sub { margin-top: -.9cqh; }
.d-card-head { margin-bottom: .6cqh; }

/* Lines that must stay on one line (display.js fitLines shrinks them to fit) */
[data-fit] { white-space: nowrap; overflow: hidden; text-overflow: clip; }
.d-typing-inner > * { max-width: 100%; min-width: 0; }
.d-typing-inner { width: 100%; padding: 0 2cqw; }
.d-typing .d-sub, .d-portrait .d-typing .d-sub { max-width: 100%; }
.d-typing h1.is-one-line { max-width: 100%; }
.d-card-head > div { min-width: 0; flex: 1; }
.d-card-head > .d-logo-card { flex: none; }
.d-form-thanks { max-width: 100%; }
.d-form-thanks h1 { max-width: 92cqw; }
/* "text-wrap: balance" above would switch wrapping back on: one-line texts win */
.d-aura [data-fit], .d-aura h1[data-fit], .d-aura p[data-fit] { white-space: nowrap; text-wrap: nowrap; }

/* Joining: the offers tick and the terms line (Mohit, 11 Oct 2026) */
.d-consent { margin: .4cqh 0 1.6cqh; }
.d-check { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; font-size: clamp(15px, 1.8cqw, 19px); color: #E7EEEA; line-height: 1.35; }
.d-check input { flex: none; width: 24px; height: 24px; margin: 0; accent-color: var(--b1); }
.d-terms { margin: 1.2cqh 0 0; font-size: clamp(13px, 1.5cqw, 16px); color: rgba(231, 238, 234, .6); line-height: 1.4; }
.d-link { font: inherit; color: #fff; background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
/* The terms, on the keyboard itself */
.d-sheet { position: absolute; inset: 0; z-index: 5; display: flex; align-items: flex-end; justify-content: center; background: rgba(0, 0, 0, .55); padding: 2cqh 3cqw 0; animation: d-in .25s ease; }
.d-sheet-card { width: min(100%, 760px); max-height: 92%; display: flex; flex-direction: column; background: #121816; border: 1px solid rgba(255, 255, 255, .1); border-bottom: 0; border-radius: 24px 24px 0 0; box-shadow: 0 -20px 60px rgba(0, 0, 0, .5); }
.d-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.d-sheet-head h2 { margin: 0; font-size: clamp(18px, 2.4cqw, 26px); }
.d-sheet-head .d-btn { padding: 10px 22px; font-size: 16px; background: var(--b1); border-color: var(--b1); color: var(--b1-ink); }
.d-sheet-body { overflow: auto; padding: 8px 22px 28px; -webkit-overflow-scrolling: touch; }
.d-sheet-body h3 { margin: 18px 0 6px; font-size: clamp(15px, 1.8cqw, 19px); }
.d-sheet-body p { margin: 0 0 8px; font-size: clamp(14px, 1.6cqw, 17px); line-height: 1.55; color: rgba(231, 238, 234, .82); }
.d-sheet-body .d-muted { color: rgba(231, 238, 234, .5); font-size: 13px; }

.d-field .g-date-words { display: block; min-height: 1.3em; margin-top: 6px; font-size: clamp(14px, 1.6cqw, 17px); font-weight: 600; color: color-mix(in srgb, var(--b1) 55%, #fff); }
.d-field .g-date-words.is-bad { color: #FF8A80; }