/* The angle landings of Simulator. One page design; make.py changes its words by the path.
   Two sizes of type: the serif from 30px up for titles and figures, the sans at 14 or 16px for everything else.
   Shades of blue only. Nothing here blurs, and only transform and opacity move. */

@font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/instrument-serif-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url("/fonts/instrument-serif-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/fonts/instrument-sans-latin-wght-normal.woff2") format("woff2"); }

:root {
  --serif: "Instrument Serif", ui-serif, Georgia, serif;
  --sans: "Instrument Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --night: oklch(0.142 0.045 262);
  --ink: oklch(0.98 0.004 255);
  --ink-2: oklch(0.98 0.004 255 / 0.74);
  --ink-3: oklch(0.98 0.004 255 / 0.54);
  --line: oklch(1 0 0 / 0.1);
  --blue: oklch(0.55 0.21 262);
  --blue-up: oklch(0.61 0.2 262);
  --blue-soft: oklch(0.76 0.12 256);
  --card: oklch(0.235 0.012 262);          /* at night a card is grey with a breath of blue, never navy on navy */
  --day: oklch(0.975 0.004 255);
  --day-ink: oklch(0.18 0.06 262);
  --day-ink-3: oklch(0.18 0.06 262 / 0.58);
  --day-line: oklch(0.18 0.06 262 / 0.1);
  --quiet: var(--ink-3);
  --bar: 64px;
  --gutter: clamp(16px, 4vw, 40px);
  --sec: clamp(72px, 10vw, 148px);
  --t-small: 0.875rem;
  --t-text: 1rem;
  --t-title: clamp(1.875rem, 3.6vw, 3.25rem);
  --e: cubic-bezier(0.16, 1, 0.3, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--night); color: var(--ink); font: 400 var(--t-text)/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ol, ul { margin: 0; padding: 0; }
ol, ul { list-style: none; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--blue-soft); outline-offset: 3px; }

.wrap { width: min(1200px, 100% - 2 * var(--gutter)); margin-inline: auto; }
.quiet { font-size: var(--t-small); color: var(--quiet); }
.strong { font-size: var(--t-small); font-weight: 600; }
.title { font: 400 var(--t-title)/1.02 var(--serif); letter-spacing: -0.022em; text-wrap: balance; }
em { font-style: italic; }

/* ---- buttons: pills, one blue ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 22px; border: 0; border-radius: 999px;
  background: var(--blue); color: oklch(1 0 0); font-weight: 600; font-size: var(--t-text); line-height: 1.15; text-align: center; cursor: pointer;
  transition: transform 0.25s var(--e); }
.btn:hover { background: var(--blue-up); transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-small { min-height: 40px; padding: 0 18px; font-size: var(--t-small); }
.btn-big { min-height: 56px; padding: 0 32px; }
.btn-wide { width: 100%; }
.btn-ghost { background: oklch(1 0 0 / 0.09); color: var(--ink); }
.btn-ghost:hover { background: oklch(1 0 0 / 0.15); }

/* ---- 1. the slim bar ---- */
.bar { position: sticky; top: 0; z-index: 10; height: var(--bar); }
.bar::before { content: ""; position: absolute; inset: 0; background: oklch(0.142 0.045 262 / 0.94); border-bottom: 1px solid var(--line); opacity: 0; transition: opacity 0.3s var(--e); }
.bar.is-stuck::before, .idx .bar::before { opacity: 1; }
.bar-in { position: relative; height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { font: 400 1.875rem/1 var(--serif); letter-spacing: -0.02em; }
.bar-end { display: flex; align-items: center; gap: 8px; min-width: 0; }
.bar-end .btn { flex: none; white-space: nowrap; }
/* The language menu, top right: it opens under the pointer, on a tap where there is no pointer, and on the keyboard's
   focus. The pop starts at the button's edge (its top padding is the gap), so the pointer never leaves it on the way. */
.lm { position: relative; flex: none; }
.lm-btn { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 14px; border: 0; border-radius: 999px; background: oklch(1 0 0 / 0.09);
  font-size: var(--t-small); font-weight: 600; letter-spacing: 0.02em; cursor: pointer; }
.lm-btn::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; opacity: 0.7;
  transform: translateY(-2px) rotate(45deg); transition: transform 0.25s var(--e); }
.lm-pop { position: absolute; top: 100%; right: 0; padding-top: 8px; opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 0.2s var(--e), transform 0.2s var(--e), visibility 0s 0.2s; }
.lm-list { display: grid; gap: 2px; min-width: 148px; padding: 6px; border-radius: 18px; background: var(--card); border: 1px solid var(--line);
  box-shadow: 0 18px 44px -18px oklch(0.05 0.05 262 / 0.8); font-size: var(--t-small); }
.lm-list > * { padding: 9px 12px; border-radius: 12px; color: var(--ink-2); white-space: nowrap; }
.lm-list > .lm-on { color: var(--ink); font-weight: 600; background: oklch(1 0 0 / 0.1); }
.lm.is-open .lm-pop, .lm:focus-within .lm-pop { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.lm.is-open .lm-btn::after { transform: translateY(1px) rotate(225deg); }
@media (hover: hover) {
  .lm:hover .lm-pop { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .lm:hover .lm-btn::after { transform: translateY(1px) rotate(225deg); }
  .lm-btn:hover { background: oklch(1 0 0 / 0.15); }
  .lm-list a:hover { color: var(--ink); background: oklch(1 0 0 / 0.07); }
}
/* On a phone the menu is its two letters; under 360px there is no room beside the bar's button, and the footer's switch stays. */
@media (max-width: 400px) { .bar-end { gap: 6px; } .bar-end .btn { padding: 0 14px; } .lm-btn { padding: 0 11px; } .lm-btn::after { display: none; } }
@media (max-width: 359px) { .lm { display: none; } }

/* ---- 2. the hero ---- */
.hero { position: relative; margin-top: calc(-1 * var(--bar)); padding: calc(var(--bar) + clamp(56px, 11vh, 132px)) 0 clamp(72px, 12vh, 150px); text-align: center; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(90deg, oklch(1 0 0 / 0.075) 0 1px, transparent 1px 3.1%, oklch(0.1 0.04 262 / 0.5) 3.1% calc(3.1% + 3px), transparent calc(3.1% + 3px) 6.2%),
    radial-gradient(44% 80% at 94% 30%, oklch(0.58 0.2 262 / 0.7), transparent 72%),
    radial-gradient(40% 64% at 2% 0%, oklch(0.44 0.17 262 / 0.5), transparent 72%);
  -webkit-mask-image: linear-gradient(#000 48%, transparent); mask-image: linear-gradient(#000 48%, transparent); }
.hero-in { position: relative; display: grid; justify-items: center; gap: clamp(20px, 2.6vw, 30px); }
.hero-title { font: 400 clamp(2.5rem, 6.2vw, 5.75rem)/0.96 var(--serif); letter-spacing: -0.026em; max-width: 13.5em; text-wrap: balance; }
.hero-title.is-long { font-size: clamp(2.25rem, 4.7vw, 4.375rem); max-width: 16em; }
.hero-body { max-width: 34em; color: var(--ink-2); text-wrap: balance; }
.hero .btn { margin-top: 6px; }

/* ---- 3. the product, shown: the call, then what comes after ---- */
.stage { --quiet: var(--day-ink-3); display: grid; grid-template-columns: minmax(0, 1.32fr) minmax(0, 1fr); gap: clamp(22px, 3.6vw, 60px); align-items: center;
  padding: clamp(14px, 2.6vw, 40px); border-radius: clamp(22px, 2.6vw, 36px); color: var(--day-ink);
  background: linear-gradient(158deg, oklch(0.985 0.003 255), oklch(0.925 0.034 262)); }
.call { padding: clamp(12px, 1.6vw, 20px); border-radius: clamp(16px, 1.8vw, 24px); background: oklch(0.215 0.012 262); color: var(--ink);
  box-shadow: 0 34px 60px -34px oklch(0.2 0.08 262 / 0.55); }
.call-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.call-title { min-width: 0; font-size: var(--t-small); font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.call-time { flex: none; display: inline-flex; align-items: center; gap: 7px; font-size: var(--t-small); color: var(--ink-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.call-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--blue-soft); }
.call-view { position: relative; margin-top: 12px; aspect-ratio: 3 / 2; border-radius: 14px; overflow: hidden; background: #202124; }
/* the call as corporate draws it, Meet's way (call-commands.tsx, look="meet"): the video fills the frame, each window
   wears its name at the bottom left, the keys sit in a dark pill over the video, the caption above the pill */
.tile-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.call-view::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, 0.45)); pointer-events: none; }
.tile-name { position: absolute; z-index: 2; left: 3%; bottom: 4.5%; display: inline-flex; align-items: center; gap: 7px; padding: 3px 8px; border-radius: 6px;
  background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 12px; font-weight: 500; line-height: 1.4; white-space: nowrap; }
.tile-self { position: absolute; z-index: 3; right: 2.5%; bottom: 4%; width: 21%; aspect-ratio: 3 / 2; border-radius: 10px; overflow: hidden;
  display: grid; place-items: center; background: #3c4043; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4); }
.self-dot { display: grid; place-items: center; width: 34%; aspect-ratio: 1; border-radius: 50%; background: oklch(0.55 0.13 255); color: #fff; font-size: clamp(13px, 1.4vw, 18px); font-weight: 500; }
.tile-name-self { left: 6%; bottom: 7%; padding: 1px 6px; font-size: 11px; }
.tile-sub { position: absolute; left: 50%; bottom: calc(4.5% + 60px); z-index: 4; width: max-content; max-width: 70%; transform: translateX(-50%); padding: 6px 12px; border-radius: 8px;
  background: rgba(0, 0, 0, 0.62); color: #fff; font-size: clamp(13px, 1.2vw, 15px); line-height: 1.4; text-align: center; text-wrap: balance; }
.tile-sub:empty { visibility: hidden; }
.wave { display: inline-flex; align-items: center; gap: 2px; height: 11px; }
.wave i { width: 2px; height: 100%; border-radius: 2px; background: #8ab4f8; transform: scaleY(0.35); animation: wave 1.15s ease-in-out infinite; }
.wave i:nth-child(2) { animation-delay: -0.9s; } .wave i:nth-child(3) { animation-delay: -0.45s; } .wave i:nth-child(4) { animation-delay: -0.7s; } .wave i:nth-child(5) { animation-delay: -0.2s; }
@keyframes wave { 0%, 100% { transform: scaleY(0.3); } 50% { transform: scaleY(1); } }
.meet-keys { position: absolute; z-index: 4; left: 50%; bottom: 4.5%; display: flex; gap: 10px; padding: 8px 10px; border-radius: 999px; transform: translateX(-50%);
  background: rgba(32, 33, 36, 0.62); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.14), 0 14px 34px -14px rgba(0, 0, 0, 0.8); }
.key { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, 0.14); color: #fff; }
.key svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.key-end { width: 58px; border-radius: 999px; background: #ea4335; }
.call-caption { margin-top: 12px; text-align: center; font-size: var(--t-small); color: var(--ink-2); text-wrap: balance; }

.after { min-width: 0; display: grid; gap: 6px; padding: clamp(4px, 1vw, 12px) clamp(2px, 1vw, 12px); }
.dial { text-align: center; margin: 6px 0 clamp(14px, 2vw, 24px); }
.dial-svg { display: block; width: min(100%, 290px); height: auto; margin-inline: auto; overflow: visible; }
.dial-track, .dial-value { fill: none; stroke-width: 14; stroke-linecap: round; }
.dial-track { stroke: oklch(0.18 0.06 262 / 0.1); }
.dial-lo { stop-color: oklch(0.74 0.12 250); } .dial-hi { stop-color: oklch(0.5 0.22 264); }
.dial-needle { transform-box: view-box; transform-origin: 100px 100px; transform: rotate(var(--deg)); transition: transform 1.3s var(--spring); }
.dial-needle path { stroke: var(--day-ink); stroke-width: 4; stroke-linecap: round; fill: none; }
.dial-hub { fill: var(--day-ink); }
.js .dial:not(.is-in) .dial-needle { transform: rotate(-90deg); }
.dial-figure { margin-top: 12px; font: 400 clamp(3.25rem, 5.4vw, 4.75rem)/1 var(--serif); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.things { counter-reset: thing; }
.things li { counter-increment: thing; display: grid; grid-template-columns: 1.6em minmax(0, 1fr); padding: 13px 0; border-top: 1px solid var(--day-line); line-height: 1.35; }
.things li:first-child { margin-top: 8px; }
.things li::before { content: counter(thing); color: var(--day-ink-3); font-variant-numeric: tabular-nums; }

/* ---- 4. three steps ---- */
.steps { margin-top: var(--sec); }
.steps-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(26px, 4vw, 64px); }
.step { display: grid; align-content: start; gap: 12px; padding-top: 22px; border-top: 1px solid var(--line); }
.step-n { font: 400 3rem/1 var(--serif); color: var(--blue-soft); }
.step p { color: var(--ink-2); max-width: 26em; }

/* ---- 5. proof ---- */
.proof { margin-top: var(--sec); text-align: center; }
.proof-line { font: 400 var(--t-title)/1.04 var(--serif); letter-spacing: -0.022em; max-width: 19em; margin-inline: auto; text-wrap: balance; }
.proof-small { margin: 16px auto 0; max-width: 46em; text-wrap: balance; }

/* ---- 6. the plans ---- */
.plans { margin-top: var(--sec); text-align: center; }
.plans .title { max-width: 17em; margin-inline: auto; }
.plan-line { margin: 16px auto 0; max-width: 40em; color: var(--ink-2); text-wrap: balance; }
.plan-grid { margin-top: clamp(28px, 4vw, 52px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; text-align: left; }
.plan-grid-1 { grid-template-columns: minmax(0, 440px); justify-content: center; }
.plan { min-width: 0; display: flex; flex-direction: column; gap: 8px; padding: clamp(20px, 2.2vw, 30px); border-radius: 26px; background: var(--card); border: 1px solid var(--line); }
.plan.is-lit { background: linear-gradient(180deg, oklch(0.37 0.095 262), oklch(0.27 0.05 262)); border-color: oklch(0.66 0.16 262 / 0.6); }
.plan-top { display: flex; align-items: center; align-self: start; justify-content: space-between; gap: 8px 12px; flex-wrap: wrap; }
.plan-name { font: 400 1.875rem/1.05 var(--serif); letter-spacing: -0.02em; }
.chip { padding: 5px 12px; border-radius: 999px; background: oklch(1 0 0 / 0.12); font-size: var(--t-small); font-weight: 600; line-height: 1.3; }
.plan.is-lit .chip { background: oklch(1 0 0 / 0.18); }
.plan-price { margin-top: 18px; display: flex; align-items: baseline; gap: 4px 10px; flex-wrap: wrap; }
.plan-figure { font: 400 clamp(2.5rem, 4vw, 3.25rem)/1 var(--serif); letter-spacing: -0.03em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.plan.is-lit .quiet { color: var(--ink-2); }
.plan-min { font-weight: 600; margin-bottom: 20px; }
.plan .btn { margin-top: auto; }
/* The same line of every plan sits on the same row, whatever wraps in its neighbour. */
@supports (grid-template-rows: subgrid) {
  .plan { display: grid; grid-template-rows: subgrid; grid-row: span 5; row-gap: 8px; align-content: start; }
  .plan .btn { margin-top: 0; align-self: end; }
}
.plan-foot { margin: 22px auto 0; max-width: 52em; text-wrap: balance; }

/* ---- 8. the footer ---- */
.foot { margin-top: var(--sec); border-top: 1px solid var(--line); padding: 34px 0 52px; }
.foot-in { display: flex; align-items: flex-start; justify-content: space-between; gap: 22px 32px; flex-wrap: wrap; }
.foot-words { display: grid; gap: 6px; min-width: 0; }
.foot-links { display: flex; align-items: center; gap: 10px 22px; flex-wrap: wrap; font-size: var(--t-small); color: var(--ink-2); }
.foot-links a:hover { color: var(--ink); }
.lang { display: inline-flex; padding: 3px; border-radius: 999px; background: oklch(1 0 0 / 0.07); }
.lang > * { padding: 6px 13px; border-radius: 999px; line-height: 1.3; }
.lang-on { background: oklch(1 0 0 / 0.14); color: var(--ink); font-weight: 600; }

/* ---- 7. the reservation screen: a dialog of our own ---- */
.sheet { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px; overflow-y: auto; background: oklch(0.09 0.035 262 / 0.82); }
.sheet-card { position: relative; width: min(100%, 510px); padding: clamp(22px, 4vw, 36px); border-radius: 28px; background: var(--card); border: 1px solid var(--line); animation: rise 0.34s var(--e) both; }
@keyframes rise { from { opacity: 0; transform: translateY(18px) scale(0.985); } to { opacity: 1; transform: none; } }
.sheet .title { font-size: clamp(1.875rem, 4vw, 2.375rem); padding-right: 44px; }
.sheet-text { margin-top: 10px; color: var(--ink-2); }
.sheet-plan { margin-top: 10px; }
.sheet-close { position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; border: 0; border-radius: 999px; background: transparent; cursor: pointer; }
.sheet-close:hover { background: oklch(1 0 0 / 0.08); }
.sheet-close span::before, .sheet-close span::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 1.5px; background: var(--ink-2); transform: translate(-50%, -50%) rotate(45deg); }
.sheet-close span::after { transform: translate(-50%, -50%) rotate(-45deg); }
.form { margin-top: 22px; display: grid; gap: 16px; }
.field { min-width: 0; }
.label { display: block; margin-bottom: 8px; font-size: var(--t-small); font-weight: 600; }
.input { width: 100%; min-height: 52px; padding: 0 16px; border-radius: 14px; border: 1px solid oklch(1 0 0 / 0.16); background: oklch(1 0 0 / 0.05); font-size: var(--t-text); }
.input:focus-visible { outline-offset: 1px; }
.picker { display: flex; flex-wrap: wrap; gap: 8px; }
.pick { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid oklch(1 0 0 / 0.18); background: transparent; font-size: var(--t-small); font-weight: 600; cursor: pointer; transition: transform 0.25s var(--e); }
.pick:hover { background: oklch(1 0 0 / 0.08); transform: translateY(-2px); }
.pick[aria-checked="true"] { background: var(--ink); border-color: var(--ink); color: var(--day-ink); }
.check { position: relative; display: flex; align-items: center; gap: 12px; min-height: 32px; cursor: pointer; }
.check input { position: absolute; left: 0; top: 50%; width: 24px; height: 24px; margin: -12px 0 0; opacity: 0; cursor: pointer; }
.check-box { position: relative; flex: none; width: 24px; height: 24px; border-radius: 8px; border: 1.5px solid oklch(1 0 0 / 0.4); }
.check input:checked + .check-box { background: var(--blue); border-color: var(--blue); }
.check input:checked + .check-box::after { content: ""; position: absolute; left: 7.5px; top: 3.5px; width: 6px; height: 11px; border: solid oklch(1 0 0); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.check input:focus-visible + .check-box { outline: 2px solid var(--blue-soft); outline-offset: 3px; }
.form .btn { margin-top: 4px; }
.form-msg { min-height: 1.45em; text-align: center; font-size: var(--t-small); font-weight: 600; color: var(--blue-soft); }

/* ---- the team's index ---- */
.idx-main { padding: clamp(40px, 6vw, 72px) 0 96px; }
.idx-main > .quiet { margin-top: 14px; max-width: 56em; }
.idx-group { margin-top: clamp(40px, 5vw, 60px); font: 400 1.875rem/1.1 var(--serif); letter-spacing: -0.02em; }
.idx-group .quiet { font-family: var(--sans); letter-spacing: 0; margin-left: 6px; }
.idx-list { margin-top: 14px; border-top: 1px solid var(--line); }
.idx-row { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) auto; gap: 6px 24px; align-items: baseline; padding: 15px 0; border-bottom: 1px solid var(--line); }
.idx-path { font-weight: 600; color: var(--blue-soft); overflow-wrap: anywhere; }
.idx-path:hover { color: var(--ink); }
.idx-title { min-width: 0; }
.idx-note { display: block; margin-top: 4px; }
.idx-state { justify-self: start; padding: 4px 12px; border-radius: 999px; background: oklch(1 0 0 / 0.08); font-size: var(--t-small); font-weight: 600; white-space: nowrap; line-height: 1.4; }
.idx-state.is-first-nine { background: var(--blue); }
.idx-state.is-held { background: transparent; box-shadow: inset 0 0 0 1px oklch(1 0 0 / 0.3); color: var(--ink-2); }

/* ---- narrow windows, and a zoomed one: the columns stack, nothing keeps a fixed width ---- */
@media (max-width: 900px) {
  .stage { grid-template-columns: minmax(0, 1fr); }
  .plan-grid { grid-template-columns: minmax(0, 1fr); }
  .plan-grid-1 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .steps-list { grid-template-columns: minmax(0, 1fr); }
  .idx-row { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .tile-name { font-size: 11px; padding: 2px 6px; gap: 5px; bottom: auto; top: 5%; }
  .tag-ai { display: none; }
  .tile-self { width: 24%; bottom: auto; top: 4%; }
  .tile-name-self { display: none; }
  .tile-sub { bottom: calc(4.5% + 46px); max-width: 84%; font-size: 12px; padding: 4px 9px; }
  .meet-keys { gap: 7px; padding: 6px 8px; }
  .key { width: 34px; height: 34px; } .key-end { width: 48px; }
  .key svg { width: 15px; height: 15px; }
}

@media (max-width: 420px) {
  .brand { font-size: 1.875rem; }
  .bar .btn-small { padding: 0 14px; }
  .hero-title, .hero-title.is-long { font-size: clamp(2.125rem, 10.4vw, 2.75rem); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .wave i { animation: none; transform: scaleY(0.7); }
  .dial-needle, .btn, .pick { transition: none; }
  .sheet-card { animation: none; }
}