/* Design language from bisaprompt.com (measured 2026-11-01): Inter 600 headings, 14/20/28px radii,
   liquid-glass segments. Accents: pale blue in light mode, deeper blue in dark mode. */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/assets/fonts/inter-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/assets/fonts/inter-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: light dark;
  --bg: light-dark(#fcfcfc, #09090b);
  --bg-sunken: light-dark(#f4f4f5, #111113);
  --raised: light-dark(#ffffff, #141416);
  --text: light-dark(#09090b, #fafafa);
  --text-2: light-dark(#52525b, #a1a1aa);
  --text-3: light-dark(#6b6b74, #8d8d96);
  --border: light-dark(#00000014, #ffffff1a);
  --border-strong: light-dark(#00000026, #ffffff2e);

  --accent-soft: light-dark(#e6f1ff, #0e1d3c);
  --accent-line: light-dark(#b4d6ff, #2b4fa0);
  --accent-ink: light-dark(#0b5cc0, #8ab8ff);
  --accent-glow: light-dark(#9fcbff66, #2563eb59);
  --btn-bg: light-dark(#09090b, #1d4ed8);
  --btn-bg-hover: light-dark(#27272a, #2563eb);
  --btn-fg: #ffffff;

  --glass-bg: light-dark(#fafafa75, #16161a8c);
  --glass-solid: light-dark(#fafafaf2, #141416f2);
  --glass-border: light-dark(#ffffff80, #ffffff1a);
  --glass-hl: light-dark(#ffffffbf, #ffffff14);
  --glass-low: light-dark(#0000000a, #00000066);
  --shadow: light-dark(#00000073, #000000e6);

  --r-control: 14px;
  --r-card: 20px;
  --r-stage: 28px;
  --gutter: 20px;
  --max: 72rem;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --dur: .26s;
  --dock-space: 168px;
  --kb: 0px;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

/* Theme-specific images: the hidden one is display:none + loading=lazy, so it never downloads. */
:root[data-theme="dark"] .only-light,
:root[data-theme="light"] .only-dark,
:root:not([data-theme]) .only-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .only-dark { display: block; }
  :root:not([data-theme]) .only-light { display: none; }
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body {
  margin: 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--text);
  background:
    radial-gradient(55% 40% at 78% -4%, var(--accent-glow), transparent 70%),
    var(--bg);
  background-repeat: no-repeat;
  -webkit-font-smoothing: antialiased;
  padding-bottom: calc(var(--dock-space) + env(safe-area-inset-bottom));
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -48px; z-index: 100; padding: 10px 14px; border-radius: 10px; background: var(--raised); }
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }

/* --- Glass --------------------------------------------------------------- */
.glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 var(--glass-hl), inset 0 -1px 0 var(--glass-low), 0 10px 30px -18px var(--shadow);
  -webkit-backdrop-filter: blur(20px) saturate(2);
  backdrop-filter: blur(20px) saturate(2);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: var(--glass-solid); }
}

/* --- Type ---------------------------------------------------------------- */
h1, h2, h3 { margin: 0; font-weight: 600; text-wrap: balance; }
h1 { font-size: clamp(2.5rem, 6.2vw, 4.6rem); line-height: .97; letter-spacing: -.035em; }
h2 { font-size: clamp(1.9rem, 3.8vw, 2.9rem); line-height: 1.04; letter-spacing: -.03em; }
h3 { font-size: 1.25rem; line-height: 1.2; letter-spacing: -.015em; }
p { margin: 0; text-wrap: pretty; }
.eyebrow {
  font-family: var(--mono); font-size: .75rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent-ink); font-weight: 500;
}
.lead { font-size: clamp(1.05rem, 1.6vw, 1.2rem); color: var(--text-2); max-width: 40rem; }
.muted { color: var(--text-2); }
.small { font-size: .875rem; color: var(--text-3); }

/* --- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px; border-radius: 12px; border: 0;
  font: inherit; font-size: .9375rem; font-weight: 500; text-decoration: none; cursor: pointer;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--btn-bg); color: var(--btn-fg); }
.btn-primary:hover { background: var(--btn-bg-hover); }
.btn-ghost { color: var(--text); }
.btn-ghost:hover { border-color: var(--accent-line); }
.btn-sm { min-height: 40px; padding: 0 16px; font-size: .875rem; border-radius: 10px; }
.icon-btn {
  display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 10px;
  border: 0; background: transparent; color: var(--text-2); cursor: pointer;
}
.icon-btn:hover { background: var(--border); color: var(--text); }
.icon-btn svg { width: 18px; height: 18px; }

/* --- Navigation ---------------------------------------------------------- */
.nav { position: fixed; inset: 12px 0 auto; z-index: 40; pointer-events: none; }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.seg { pointer-events: auto; display: flex; align-items: center; gap: 2px; padding: 3px; border-radius: var(--r-control); }
.logo { display: grid; place-items: center; width: 52px; height: 42px; border-radius: 11px; color: var(--text); }
.logo svg { width: 34px; height: auto; }
.nav-links a, .lang a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 10px;
  font-size: .875rem; font-weight: 500; color: var(--text-2); text-decoration: none;
}
.nav-links a:hover, .lang a:hover { color: var(--text); background: var(--border); }
.lang a { padding: 0 10px; font-family: var(--mono); font-size: .75rem; letter-spacing: .06em; }
.lang a[aria-current="true"] { color: var(--text); background: var(--border); }
.nav-actions { gap: 4px; }
/* Mobile menu: the header grows into a floating frosted card (outside the glass segment, so
   its own backdrop blur samples the page instead of the segment) */
.menu-btn { display: none; }
.menu-btn line { transition: transform .35s cubic-bezier(.34, 1.56, .64, 1), opacity .2s ease; transform-origin: 12px 12px; }
.menu-btn[aria-expanded="true"] line:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.menu-btn[aria-expanded="true"] line:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] line:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
.menu-panel {
  pointer-events: auto; position: absolute; right: var(--gutter); top: calc(100% + 10px);
  width: min(380px, calc(100vw - 2 * var(--gutter))); padding: 8px; border-radius: 24px; display: grid; gap: 2px;
  background: color-mix(in oklab, var(--glass-solid) 72%, transparent);
  -webkit-backdrop-filter: blur(28px) saturate(1.8); backdrop-filter: blur(28px) saturate(1.8);
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 var(--glass-hl), 0 30px 60px -24px var(--shadow);
  transform-origin: calc(100% - 60px) 0;
  animation: menu-expand .55s cubic-bezier(.34, 1.56, .64, 1) both;
}
@keyframes menu-expand {
  0% { opacity: 0; transform: translateY(-14px) scale(.35, .15); filter: blur(10px); border-radius: 40px; }
  55% { opacity: 1; transform: translateY(2px) scale(1.02, 1.04); filter: blur(0); }
  100% { transform: none; }
}
.menu-panel a { padding: 15px 16px; border-radius: 14px; text-decoration: none; font-weight: 500; font-size: 1.02rem; }
.menu-panel a:hover { background: var(--border); }
@media (max-width: 860px) {
  .nav-links { display: none; }
  .menu-btn { display: inline-grid; }
}
@media (max-width: 520px) {
  .nav-cta .label-long { display: none; }
  .lang { display: none; }
}
@media (min-width: 521px) { .nav-cta .label-short { display: none; } }

/* --- Sections ------------------------------------------------------------ */
section { padding-block: clamp(64px, 10vw, 128px); }
.section-head { display: grid; gap: 16px; max-width: 46rem; margin-bottom: clamp(32px, 5vw, 56px); }

.hero-name { font-size: clamp(2.6rem, 6.4vw, 5rem); line-height: .95; letter-spacing: -.04em; max-width: 14ch; }
.badge {
  justify-self: start; rotate: -3deg; margin-top: 4px;
  padding: 7px 14px; border-radius: 8px; background: var(--btn-bg); color: var(--btn-fg);
  font-family: var(--mono); font-size: .8rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
}
.actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* Hero: full-bleed 3D workspace behind the text (poster image until/unless 3D runs) */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: min(100svh, 960px); display: grid; align-items: start;
  padding-top: 84px; padding-bottom: 48px;   /* card and pills sit just under the floating nav */
}
.hero-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; touch-action: pan-y;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 72%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, #000 72%, transparent 100%);
}
.hero-overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero-poster { position: absolute; z-index: 0; right: 4%; top: 50%; translate: 0 -50%; width: min(46vw, 640px); height: auto; }
.hero.is-3d .hero-poster { display: none !important; }
.hero-inner { position: relative; z-index: 2; pointer-events: none; display: grid; gap: 14px; justify-items: start; }
.hero-inner .glass-pills { pointer-events: auto; margin-left: 20px; }   /* beats the later .pills { margin: 0 } */
.pills li:has(.pill-icon) { display: inline-flex; align-items: center; gap: 6px; }
.pill-icon { width: 14px; height: 14px; flex: none; }
.glass-pills li {
  background: color-mix(in oklab, var(--bg) 55%, transparent); color: var(--text);
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  border-color: var(--glass-border); box-shadow: inset 0 1px 0 var(--glass-hl), 0 8px 20px -14px var(--shadow);
}
.hero-copy {
  pointer-events: auto; max-width: 560px; display: grid; gap: 18px;
  padding: clamp(22px, 3vw, 36px); border-radius: var(--r-stage);
  background: color-mix(in oklab, var(--bg) 55%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5);
  border: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 var(--glass-hl), 0 24px 60px -32px var(--shadow);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hero-copy { background: var(--glass-solid); }
}
.hero-copy .lead { color: var(--text-2); }
.hero-copy .badge { position: relative; z-index: 1; margin-top: -30px; }   /* tucks into the headline */
.marquee {
  display: flex; overflow: hidden; gap: 28px; max-width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee-track {
  display: flex; flex: none; gap: 28px; padding: 0; margin: 0; list-style: none;
  animation: marquee 26s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track li { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; font-size: .82rem; font-weight: 500; color: var(--text-2); }
.marquee-track svg { width: 16px; height: 16px; fill: currentColor; flex: none; }
@keyframes marquee { to { transform: translateX(calc(-100% - 28px)); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } .marquee { flex-wrap: wrap; mask-image: none; -webkit-mask-image: none; } .marquee-track[aria-hidden] { display: none; } }
.hero-hello { justify-self: start; display: inline-flex; align-items: center; font-weight: 600; letter-spacing: -.01em; }
.hero-hello::before {
  content: ""; width: 8px; height: 8px; margin-right: 10px; border-radius: 50%;
  background: var(--accent-ink); box-shadow: 0 0 0 4px var(--accent-soft);
}
.hero.is-loading::after {
  content: ""; position: absolute; z-index: 3; right: 20px; bottom: 20px; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--border-strong); border-top-color: var(--accent-ink); animation: spin .8s linear infinite;
}
@keyframes spin { to { rotate: 360deg; } }
.pills { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0; list-style: none; }
.pills li {
  padding: 5px 11px; border-radius: 999px; font-size: .78rem; font-weight: 500; line-height: 1.3;
  color: var(--accent-ink); background: var(--accent-soft); border: 1px solid var(--accent-line);
}
@media (max-width: 767px) {
  .hero { min-height: 100svh; }
  .hero-copy { max-width: none; gap: 12px; }
  .hero .actions { display: none; }   /* the Eclipse dock carries Ask / Book on mobile */
  .pill-geo { display: none; }
  .hero-copy .badge { margin-top: -22px; }
  .hero-poster { width: 86vw; right: 7vw; top: auto; bottom: 14%; translate: none; }
}
.scene-bubble {
  position: absolute; transform: translate(-50%, -100%); padding: 10px 14px; border-radius: 16px 16px 16px 4px;
  background: var(--raised); color: var(--text); font-weight: 600; font-size: .95rem; white-space: nowrap;
  box-shadow: 0 10px 30px -12px var(--shadow); border: 1px solid var(--border);
}
.float { position: absolute; transform: translate(-50%, -50%); font-size: 22px; animation: float-up 1.4s var(--ease) forwards; }
.float.heart { color: #e5484d; }
.float.note { color: var(--accent-ink); font-size: 20px; }
@keyframes float-up { from { opacity: 0; translate: 0 0; scale: .6; } 20% { opacity: 1; scale: 1; } to { opacity: 0; translate: 10px -70px; } }
[data-sound-toggle][aria-pressed="false"] .sound-wave { opacity: .25; }
.notify-icon {
  position: absolute; width: 46px; height: 46px; translate: -50% -100%; display: grid; place-items: center;
  border-radius: 16px; background: linear-gradient(145deg, #5b9cff, #1d4ed8); color: #fff;
  box-shadow: 0 10px 24px -8px rgba(29, 78, 216, .6), inset 0 1px 0 rgba(255, 255, 255, .45);
  animation: icon-pop .6s cubic-bezier(.34, 1.56, .64, 1) both, icon-bob 2.4s ease-in-out .6s infinite;
}
.notify-icon svg { width: 28px; height: 28px; fill: currentColor; }
.notify-icon svg circle { fill: #1d4ed8; }
.notify-icon span { position: absolute; top: -4px; right: -4px; width: 14px; height: 14px; border-radius: 50%; background: #e5484d; border: 2px solid #fff; }
@keyframes icon-pop { from { opacity: 0; scale: .3 .3; } 60% { opacity: 1; scale: 1.12 .92; } to { scale: 1 1; } }
@keyframes icon-bob { 50% { transform: translateY(-6px); } }

/* AI adoption chart */
:root { --chart-line: light-dark(#0b5cc0, #4b8ef5); }
.growth-grid { display: grid; gap: 14px; }
@media (min-width: 900px) { .growth-grid { grid-template-columns: 1.6fr 1fr; } }
.chart-card { margin: 0; padding: clamp(18px, 3vw, 28px); border-radius: var(--r-card); background: var(--raised); border: 1px solid var(--border); display: grid; gap: 12px; }
.chart-title { font-weight: 600; }
.chart { position: relative; }
.growth-svg { width: 100%; height: auto; overflow: visible; }
.growth-svg .grid { stroke: var(--border); stroke-width: 1; }
.growth-svg .axis { stroke: var(--border-strong); stroke-width: 1; }
.growth-svg .tick { fill: var(--text-3); font-size: 12px; font-family: var(--mono); }
.growth-svg .line { fill: none; stroke: var(--chart-line); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.growth-svg .fill-top { stop-color: var(--chart-line); stop-opacity: .22; }
.growth-svg .fill-bottom { stop-color: var(--chart-line); stop-opacity: 0; }
.growth-svg .dot { fill: var(--chart-line); stroke: var(--raised); stroke-width: 2; }
.growth-svg .dot.active { r: 6; }
.growth-svg .direct { fill: var(--text); font-size: 14px; font-weight: 600; }
@media (max-width: 600px) {
  .growth-svg .tick { font-size: 22px; }
  .growth-svg .direct { font-size: 26px; }
}
.growth-svg .crosshair { stroke: var(--text-3); stroke-width: 1; stroke-dasharray: 3 3; opacity: 0; }
.growth-svg.hovering .crosshair { opacity: 1; }
.growth-svg .hit { fill: transparent; cursor: crosshair; touch-action: pan-y; }
.growth-svg.animate .line { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); transition: stroke-dashoffset 1.8s var(--ease); }
.growth-svg.animate .area, .growth-svg.animate .dot, .growth-svg.animate .direct { opacity: 0; transition: opacity .5s ease; }
.growth-svg.animate .dot { transition-delay: calc(var(--i) * 180ms + 200ms); }
.growth-svg.animate .area, .growth-svg.animate .direct { transition-delay: 1.4s; }
.growth-svg.drawn .line { stroke-dashoffset: 0; }
.growth-svg.drawn .area, .growth-svg.drawn .dot, .growth-svg.drawn .direct { opacity: 1; }
.chart-tip {
  position: absolute; transform: translate(-50%, calc(-100% - 12px)); pointer-events: none; white-space: nowrap;
  padding: 6px 10px; border-radius: 10px; background: var(--text); color: var(--bg); font-size: .8125rem;
}
.chart-data summary { cursor: pointer; font-size: .8125rem; color: var(--text-2); }
.chart-data table { margin-top: 8px; border-collapse: collapse; font-size: .875rem; font-variant-numeric: tabular-nums; }
.chart-data th, .chart-data td { padding: 4px 16px 4px 0; text-align: left; font-weight: 400; }
.chart-data thead th { color: var(--text-3); }
.source { font-size: .75rem; color: var(--text-3); }
.source a { color: inherit; }
.stats { display: grid; gap: 14px; }
.stat { padding: clamp(18px, 3vw, 28px); border-radius: var(--r-card); background: var(--raised); border: 1px solid var(--border); display: grid; gap: 4px; align-content: center; }
.stat-value { font-size: clamp(2.4rem, 5vw, 3.4rem); font-weight: 600; letter-spacing: -.04em; line-height: 1; }
.stat-label { color: var(--text-2); }
.stat-value { font-variant-numeric: tabular-nums; }
.stat-accent { background: var(--accent-soft); border-color: var(--accent-line); }
.stat-accent .stat-value { color: var(--accent-ink); }
/* The latest point keeps pulsing once the line has drawn */
.growth-svg .pulse { fill: none; stroke: var(--chart-line); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.growth-svg.drawn .pulse { animation: chart-pulse 2.2s ease-out 1.9s infinite; }
@keyframes chart-pulse { from { transform: scale(1); opacity: .7; } to { transform: scale(4.5); opacity: 0; } }

/* AI answer showcase: real ad formats from OpenAI and Google, as a row of phones */
.ai-banner { margin: 0; display: grid; gap: 18px; }
.phone-gallery {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 2.4vw, 28px); padding: 24px 0 8px; margin: 0; list-style: none;
  background: radial-gradient(60% 70% at 50% 40%, var(--accent-soft), transparent 75%);
}
.phone-gallery li { display: grid; gap: 12px; justify-items: center; text-align: center; transition: transform .5s cubic-bezier(.34, 1.56, .64, 1); }
.phone-gallery li:nth-child(even) { transform: translateY(28px); }
.phone-gallery li:hover { transform: translateY(-8px) scale(1.02); }
.phone-gallery li:nth-child(even):hover { transform: translateY(20px) scale(1.02); }
.phone-gallery img { width: 100%; max-width: 260px; height: auto; filter: drop-shadow(0 24px 40px rgba(15, 30, 70, .22)); }
.phone-gallery span { display: grid; font-size: .85rem; color: var(--text-2); line-height: 1.35; }
.phone-gallery strong { color: var(--text); font-weight: 600; }
.ai-banner .note { text-align: center; margin-top: 24px; }
@media (max-width: 860px) {
  .phone-gallery {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(62vw, 240px);
    overflow-x: auto; scroll-snap-type: x mandatory; padding-inline: var(--gutter); margin-inline: calc(-1 * var(--gutter));
    scrollbar-width: none;
  }
  .phone-gallery::-webkit-scrollbar { display: none; }
  .phone-gallery li { scroll-snap-align: center; }
  .phone-gallery li:nth-child(even) { transform: none; }
}

/* Shared */
.figure { aspect-ratio: 3 / 2; display: grid; place-items: center; }
.figure img { width: 100%; height: 100%; object-fit: contain; }
.note { margin-top: 18px; font-size: .8125rem; color: var(--text-3); }
.closing { font-weight: 500; margin-top: 18px; }

/* Scroll reveals: public/js/reveal.js adds .rv, then .in when the element scrolls into view */
.rv { opacity: 0; transform: translateY(28px); filter: blur(6px);
  transition: opacity .8s var(--ease) var(--d, 0ms), transform .9s var(--ease) var(--d, 0ms), filter .8s var(--ease) var(--d, 0ms); }
.rv.in { opacity: 1; transform: none; filter: none; }

/* Services */
.cards { display: grid; gap: 14px; }
@media (min-width: 760px) { .cards { grid-template-columns: repeat(2, 1fr); } }
.card {
  position: relative; padding: clamp(22px, 3vw, 30px); border-radius: var(--r-card);
  background: var(--raised); border: 1px solid var(--border); display: grid; gap: 12px; align-content: start;
}
.card-tag { justify-self: start; }
.card-top { display: flex; align-items: center; justify-content: space-between; }
.card-icon {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px;
  color: var(--accent-ink); background: var(--accent-soft); border: 1px solid var(--accent-line);
  transition: scale .5s cubic-bezier(.34, 1.56, .64, 1), rotate .5s cubic-bezier(.34, 1.56, .64, 1);
}
.card-icon svg { width: 24px; height: 24px; }
.card-num { font-family: var(--mono); font-size: .8rem; color: var(--accent-ink); }
.card .scope { padding-top: 14px; border-top: 1px solid var(--border); }
/* Service cards: liquid glass. A soft light follows the pointer, the card lifts on hover and
   squishes with a ripple when pressed (public/js/liquid.js). */
.services .card {
  overflow: hidden; isolation: isolate;
  transition: translate .5s cubic-bezier(.34, 1.56, .64, 1), border-color .3s ease, box-shadow .4s ease;
}
.services .card::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .35s ease;
  background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 0%), color-mix(in oklab, var(--accent-ink) 14%, transparent), transparent 65%);
}
.services .card .ripple { z-index: -1; }
.services .card.liquid-hit { animation-name: liquid-soft; }
@media (hover: hover) {
  .services .card:hover { translate: 0 -4px; border-color: var(--accent-line); box-shadow: 0 18px 40px -24px var(--shadow); }
  .services .card:hover::before { opacity: 1; }
  .services .card:hover .card-icon { scale: 1.08; rotate: -6deg; }
}
/* Phones: the service cards pin and stack on top of each other while scrolling (as on bisaprompt.com) */
@media (max-width: 759px) {
  .services .cards { gap: 0; }
  .services .card { position: sticky; top: calc(88px + var(--n, 0) * 16px); margin-bottom: 20px; box-shadow: 0 -12px 32px -20px var(--shadow); }
  .services .card:nth-child(2) { --n: 1; }
  .services .card:nth-child(3) { --n: 2; }
  .services .card:nth-child(4) { --n: 3; margin-bottom: 0; }
}

/* Capabilities: brain map (public/js/cortex.js draws the wires) */
.cortex { position: relative; aspect-ratio: 16 / 10; max-width: 980px; margin: 0 auto; }
.cortex-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.cortex .wire { fill: none; stroke: var(--accent-line); stroke-width: 1.2; opacity: .6; stroke-dasharray: 100; stroke-dashoffset: 100;
  transition: stroke-dashoffset 1.4s var(--ease) calc(var(--i) * 35ms), opacity .3s, stroke .3s, stroke-width .3s; }
.cortex.on .wire { stroke-dashoffset: 0; }
.cortex .wire.lit { stroke: var(--accent-ink); opacity: 1; stroke-width: 1.8; }
.cortex .spark { fill: none; stroke: var(--accent-ink); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 2.5 97.5; opacity: 0;
  animation: spark var(--dur) linear calc(var(--i) * -.37s) infinite; transition: opacity .6s 1.2s, stroke-width .3s; }
.cortex.on .spark { opacity: .85; }
.cortex .spark.lit { stroke-width: 4; opacity: 1; transition-delay: 0s; }
@keyframes spark { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
.cortex-nodes { list-style: none; margin: 0; padding: 0; }
.cortex-nodes li, .cortex-core { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); transform: translate(-50%, -50%); }
.cortex-nodes li {
  padding: 9px 14px 9px 12px; border-radius: 999px; background: var(--raised); border: 1px solid var(--border);
  font-size: .9rem; font-weight: 500; white-space: nowrap; transition: border-color .3s, box-shadow .3s;
}
.cortex-nodes li::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--accent-ink); opacity: .45; vertical-align: 1px; transition: opacity .3s; }
.cortex-nodes li.lit { border-color: var(--accent-line); box-shadow: 0 0 0 4px var(--accent-soft), 0 0 28px var(--accent-glow); }
.cortex-nodes li.lit::before { opacity: 1; }
.cortex-core {
  --x: 50; --y: 50; width: clamp(96px, 13vw, 136px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; text-align: center;
  font-weight: 600; line-height: 1.15; background: radial-gradient(circle at 35% 30%, var(--accent-soft), var(--raised) 72%);
  border: 1px solid var(--accent-line); animation: core-beat 2.8s ease-in-out infinite;
}
.cortex-core span { max-width: 70%; }
@keyframes core-beat {
  0%, 100% { box-shadow: 0 0 0 8px var(--accent-soft), 0 0 40px var(--accent-glow); }
  50% { box-shadow: 0 0 0 16px transparent, 0 0 72px var(--accent-glow); }
}
.cortex-closing { text-align: center; margin-top: clamp(20px, 4vw, 36px); }
@media (max-width: 700px) {
  .cortex { aspect-ratio: 3 / 4.6; }
  .cortex-nodes li { left: calc(var(--mx) * 1%); top: calc(var(--my) * 1%); width: max-content; max-width: 48%; font-size: .78rem; padding: 7px 11px 7px 9px; white-space: normal; text-align: center; }
  .cortex-nodes li::before { width: 6px; height: 6px; margin-right: 6px; }
  .cortex-core { width: 88px; font-size: .85rem; }
}

/* About */
.about-grid { display: grid; gap: 14px; }
@media (min-width: 900px) { .about-grid { grid-template-columns: 1.1fr .9fr; } }
.work { display: grid; gap: 12px; padding: 0; margin: 0; list-style: none; }
.work li { padding: 18px 20px; border-radius: var(--r-card); background: var(--raised); border: 1px solid var(--border); display: grid; gap: 4px; }
.work a { color: var(--accent-ink); text-underline-offset: 3px; }

/* Experience timeline (LinkedIn style) */
.experience { margin-top: clamp(40px, 6vw, 72px); }
.xp-title { font-size: 1.35rem; margin-bottom: 20px; }
.xp { list-style: none; margin: 0; padding: 0; }
.xp-item { position: relative; display: grid; grid-template-columns: 44px 1fr; gap: 14px; padding-bottom: 18px; }
.xp-item:not(:last-child)::before { content: ""; position: absolute; left: 21px; top: 52px; bottom: 6px; width: 2px; border-radius: 2px; background: var(--border-strong); }
.xp-logo { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-weight: 700; background: var(--accent-soft); color: var(--accent-ink); border: 1px solid var(--accent-line); }
.xp-body { display: grid; gap: 10px; align-content: start; min-width: 0; padding: clamp(16px, 2.6vw, 24px); border-radius: var(--r-card); background: var(--raised); border: 1px solid var(--border); }
.xp-body h4 { margin: 0; font-size: 1.05rem; font-weight: 600; }
.xp-body > p:not(.note) { color: var(--text-2); }
.xp-body strong { color: var(--text); font-weight: 600; }
.xp-body a { color: var(--accent-ink); text-underline-offset: 3px; }
.xp-org { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: -6px; }
.xp-now { font-size: .72rem; padding: 2px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }
.xp-points { margin: 0; padding-left: 1.1em; color: var(--text-2); display: grid; gap: 4px; }
.xp-metric strong { color: var(--accent-ink); }
.proof { display: grid; gap: 12px; }
@media (min-width: 700px) { .proof { grid-template-columns: 1fr 1fr; } }
.proof-card { padding: 16px; border-radius: 16px; background: var(--bg-sunken); border: 1px solid var(--border); display: grid; gap: 10px; align-content: start; }
.proof-brand { font-weight: 600; font-size: .9rem; color: var(--text); }
.proof dl { margin: 0; display: grid; gap: 8px; }
.proof dl div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.proof dt { color: var(--text-2); font-size: .85rem; }
.proof dd { margin: 0; font-weight: 600; font-size: 1.15rem; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--accent-ink); white-space: nowrap; }
.proof-period { font-family: var(--mono); font-size: .72rem; color: var(--text-3); }
.xp-body .note { margin-top: 0; }
.xp-photos { margin: 4px 0 0; display: grid; grid-template-columns: 1.33fr 1fr; gap: 10px; }
.xp-photos img { width: 100%; height: 100%; max-height: 320px; object-fit: cover; border-radius: 14px; }
.xp-photos figcaption { grid-column: 1 / -1; font-size: .85rem; color: var(--text-2); }

/* FAQ */
.faq { display: grid; gap: 10px; max-width: 52rem; margin-inline: auto; }
.faq-section .section-head { margin-inline: auto; text-align: center; justify-items: center; }
.faq details { border-radius: 16px; background: var(--raised); border: 1px solid var(--border); overflow: hidden; }
.faq summary { cursor: pointer; padding: 18px 20px; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--text-3); font-weight: 400; }
.faq details[open] summary::after { content: "–"; }
.faq details p { padding: 0 20px 18px; color: var(--text-2); }

/* Final invitation */
.invite {
  border-radius: var(--r-stage); padding: clamp(32px, 6vw, 72px); display: grid; gap: 20px; justify-items: start;
  background: radial-gradient(80% 90% at 100% 0%, var(--accent-soft), transparent 70%), var(--raised);
  border: 1px solid var(--border);
}
.invite p { max-width: 40rem; }

/* --- Preloader ------------------------------------------------------------------------ */
.preloader {
  position: fixed; inset: 0; z-index: 100; display: grid; place-content: center; justify-items: center; gap: 26px;
  background: radial-gradient(50% 40% at 50% 45%, var(--accent-soft), transparent 70%), var(--bg); color: var(--text);
  transition: opacity .55s ease, scale .55s cubic-bezier(.22, 1, .36, 1), filter .55s ease;
}
.preloader.done { opacity: 0; scale: 1.04; filter: blur(8px); pointer-events: none; }
.preloader-logo { width: 84px; height: auto; animation: logo-breathe 1.6s cubic-bezier(.34, 1.56, .64, 1) infinite alternate; }
@keyframes logo-breathe { from { scale: .94 1; opacity: .75; } to { scale: 1.04 .97; opacity: 1; } }
.preloader-bar { width: 180px; height: 4px; border-radius: 999px; background: var(--border); overflow: hidden; }
.preloader-bar i {
  display: block; height: 100%; transform: scaleX(.04); transform-origin: left;
  background: linear-gradient(90deg, var(--accent-ink), #8ab8ff); border-radius: inherit;
  transition: transform .6s cubic-bezier(.22, 1, .36, 1);
}
html:has(.preloader:not(.done)) { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .preloader-logo { animation: none; } }

/* Progressive blur under the top navigation, mirroring the one under the dock */
.top-blur { position: fixed; left: 0; right: 0; top: 0; height: 110px; z-index: 39; pointer-events: none; }
.top-blur::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, color-mix(in oklab, var(--bg) 75%, transparent) 0%, color-mix(in oklab, var(--bg) 30%, transparent) 50%, transparent 100%);
}
.top-blur i { position: absolute; inset: 0; }
.top-blur i:nth-child(1) { -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); mask: linear-gradient(to bottom, #000 0%, #000 60%, transparent 100%); }
.top-blur i:nth-child(2) { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); mask: linear-gradient(to bottom, #000 0%, #000 40%, transparent 75%); }
.top-blur i:nth-child(3) { -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); mask: linear-gradient(to bottom, #000 0%, #000 20%, transparent 50%); }
@media (prefers-reduced-transparency: reduce) { .top-blur i { display: none; } }

/* --- Liquid glass impact (public/js/liquid.js) --------------------------------------- */
:is(.btn, .chip, .icon-btn, .send, .faq summary, .time, .nav-links a, .menu-panel a, .lang a, .logo) { position: relative; overflow: hidden; }
.liquid-hit { animation: liquid .55s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes liquid {
  0% { scale: 1 1; } 22% { scale: 1.06 .9; } 45% { scale: .96 1.05; } 70% { scale: 1.015 .99; } 100% { scale: 1 1; }
}
.dock.liquid-hit, .nav .seg.liquid-hit { animation-name: liquid-soft; }
@keyframes liquid-soft { 0% { scale: 1 1; } 25% { scale: 1.022 .955; } 50% { scale: .992 1.02; } 75% { scale: 1.004 .997; } 100% { scale: 1 1; } }
.ripple {
  position: absolute; width: var(--size, 120px); height: var(--size, 120px); translate: -50% -50%;
  border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(circle, color-mix(in oklab, var(--accent-ink) 32%, transparent) 0%, transparent 62%);
  animation: ripple .7s cubic-bezier(.22, 1, .36, 1) forwards;
}
@keyframes ripple { from { transform: scale(.05); opacity: .95; } to { transform: scale(1); opacity: 0; } }

/* Eclipse panel: liquid pop-in, dark blur backdrop behind it (both themes) */
.panel:not([hidden]) { animation: panel-pop .6s cubic-bezier(.34, 1.56, .64, 1) both; transform-origin: 50% 100%; }
@keyframes panel-pop {
  0% { opacity: 0; transform: translateY(18px) scale(.9, .82); filter: blur(8px); }
  55% { opacity: 1; transform: translateY(-3px) scale(1.02, 1.03); filter: blur(0); }
  78% { transform: translateY(1px) scale(.995, .99); }
  100% { transform: none; }
}
.eclipse-backdrop {
  position: fixed; inset: 0; z-index: 46;
  background: rgba(4, 7, 18, .48);
  -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2);
  animation: fade-in .35s ease both;
}
@keyframes fade-in { from { opacity: 0; } }

/* iOS-style progressive blur under the floating dock: content melts into frosted glass */
.bottom-blur { position: fixed; left: 0; right: 0; bottom: 0; height: calc(var(--dock-space, 168px) + 40px); z-index: 45; pointer-events: none; }
.bottom-blur::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, color-mix(in oklab, var(--bg) 78%, transparent) 0%, color-mix(in oklab, var(--bg) 35%, transparent) 45%, transparent 100%);
}
.bottom-blur i { position: absolute; inset: 0; }
.bottom-blur i:nth-child(1) { -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); mask: linear-gradient(to top, #000 0%, #000 60%, transparent 100%); }
.bottom-blur i:nth-child(2) { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); mask: linear-gradient(to top, #000 0%, #000 40%, transparent 75%); }
.bottom-blur i:nth-child(3) { -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); mask: linear-gradient(to top, #000 0%, #000 20%, transparent 50%); }
@media (prefers-reduced-transparency: reduce) { .bottom-blur i { display: none; } }

/* Legal pages: no Eclipse dock */
body.doc { padding-bottom: 0; }
@media (max-width: 520px) { .doc .lang { display: flex; } }
.prose { max-width: 46rem; padding-top: clamp(112px, 14vw, 148px); padding-bottom: 64px; display: grid; gap: 14px; }
.prose h1 { font-size: clamp(2.2rem, 5vw, 3.2rem); margin-top: 6px; }
.prose h2 { font-size: 1.25rem; letter-spacing: -.015em; margin-top: 22px; }
.prose ul { margin: 0; padding-left: 1.2em; display: grid; gap: 8px; }
.prose p, .prose li { color: var(--text-2); }
.prose strong { color: var(--text); }
.prose a { color: var(--accent-ink); text-underline-offset: 3px; }

footer { padding-block: 40px 24px; border-top: 1px solid var(--border); }
footer .wrap { display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; font-size: .8125rem; color: var(--text-3); }
footer a { color: var(--text-2); }

/* --- Eclipse dock (persistent, bottom centre) ---------------------------- */
.eclipse {
  /* No transform here: it would become the containing block for the fixed mobile sheet. */
  position: fixed; z-index: 50; left: 0; right: 0; margin-inline: auto;   /* above .bottom-blur and .eclipse-backdrop */
  bottom: calc(14px + env(safe-area-inset-bottom) + var(--kb));
  width: min(740px, calc(100% - 24px));
  display: grid; gap: 8px;
}
.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.chips::-webkit-scrollbar { display: none; }
/* Phones: suggested questions as a vertical list above the dock, no sideways scrolling */
@media (max-width: 767px) {
  .chips { flex-direction: column; align-items: flex-start; overflow: visible; }
  .chips .chip { max-width: 100%; text-align: left; white-space: normal; padding-block: 8px; }
}
.chip {
  flex: none; min-height: 36px; padding: 0 14px; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: .8125rem; font-weight: 500; color: var(--text);
}
.chip:hover { border-color: var(--accent-line); }
.chips:not([hidden]) .chip { animation: chip-in .5s cubic-bezier(.34, 1.56, .64, 1) both; }
.chips .chip:nth-child(2) { animation-delay: .05s; }
.chips .chip:nth-child(3) { animation-delay: .1s; }
.chips .chip:nth-child(4) { animation-delay: .15s; }
@keyframes chip-in { from { opacity: 0; transform: translateY(14px) scale(.9); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
.dock {
  position: relative; overflow: hidden; border-radius: 22px; padding: 10px 10px 10px 14px; display: grid; gap: 4px;
  transition: transform .55s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s ease, border-color .3s ease;
}
.dock:focus-within {
  transform: translateY(-3px) scale(1.012);
  border-color: var(--accent-line);
  box-shadow: inset 0 1px 0 var(--glass-hl), 0 0 0 4px color-mix(in oklab, var(--accent-soft) 70%, transparent), 0 18px 40px -18px var(--shadow);
}
.dock-label { font-size: .75rem; color: var(--text-3); padding-left: 2px; }
.dock-row { display: flex; align-items: flex-end; gap: 8px; }
.dock-id { display: flex; align-items: center; gap: 8px; align-self: center; flex: none; }
.dock-id img { width: 30px; height: 30px; }
.dock-id span { font-weight: 600; font-size: .875rem; }
@media (max-width: 560px) { .dock-id span, .dock-label { display: none; } }
.dock textarea {
  flex: 1; min-width: 0; resize: none; border: 0; outline: 0; background: transparent; color: var(--text);
  font: inherit; font-size: 1rem; line-height: 1.45; padding: 9px 4px; max-height: 132px;
}
.dock textarea::placeholder { color: var(--text-3); }
.dock textarea { overflow: hidden; }
.dock textarea:placeholder-shown { white-space: nowrap; text-overflow: ellipsis; }
.dock-book { flex: none; }
.send {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; border: 0;
  background: var(--btn-bg); color: var(--btn-fg); cursor: pointer;
}
.send:hover { background: var(--btn-bg-hover); }
.send:disabled { opacity: .45; cursor: default; }
.send svg { width: 18px; height: 18px; }
@media (max-width: 560px) { .dock-book .label { display: none; } .dock-book { padding: 0 12px; } }

/* Conversation panel: above the dock on desktop, bottom sheet on mobile */
.panel {
  position: absolute; left: 0; right: 0; bottom: calc(100% + 10px);
  max-height: min(70dvh, 640px); display: flex; flex-direction: column; padding: 0;
  border-radius: 22px; background: var(--glass-solid); overflow: hidden;
  -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6);
  box-shadow: inset 0 1px 0 var(--glass-hl), 0 24px 60px -24px var(--shadow);
  border: 1px solid var(--border);
}
.panel-head { display: flex; align-items: center; gap: 10px; padding: 12px 12px 12px 16px; border-bottom: 1px solid var(--border); }
.panel-head img { width: 34px; height: 34px; }
.panel-head div { flex: 1; min-width: 0; }
.panel-head strong { display: block; font-size: .9375rem; }
.panel-head span { font-size: .75rem; color: var(--text-3); }
.log { flex: 1; overflow-y: auto; padding: 16px; display: grid; gap: 12px; align-content: start; overscroll-behavior: contain; }
.msg { max-width: 88%; padding: 11px 14px; border-radius: 16px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: .9375rem; }
.msg.user { justify-self: end; background: var(--btn-bg); color: var(--btn-fg); border-bottom-right-radius: 6px; }
.msg.bot { justify-self: start; background: var(--bg-sunken); border: 1px solid var(--border); border-bottom-left-radius: 6px; }
.msg.bot a { color: var(--accent-ink); }
.msg.notice { justify-self: stretch; max-width: none; background: var(--accent-soft); border: 1px solid var(--accent-line); }
.msg.thinking { display: inline-flex; align-items: center; gap: 10px; color: var(--text-2); }
.booking-status .orb { display: inline-block; vertical-align: middle; }
.eclipse-icon { filter: drop-shadow(0 0 6px color-mix(in oklab, #4b8ef5 45%, transparent)); }
@media (prefers-reduced-motion: reduce) { .dock, .dock:focus-within { transform: none; } }
.panel-foot { padding: 10px 16px 12px; font-size: .75rem; color: var(--text-3); border-top: 1px solid var(--border); }
.turnstile:empty { display: none; }
.turnstile { padding: 0 16px 10px; }

.booking { padding: 18px 16px; display: grid; gap: 14px; overflow-y: auto; }
.booking .illus { width: 100%; max-width: 280px; aspect-ratio: 3 / 2; }
.booking .illus img { width: 100%; height: 100%; object-fit: contain; }
.booking-status:empty, .booking-step:empty { display: none; }
.booking-step { display: grid; gap: 14px; }
.booking:has(.booking-step:not(:empty)) > :is(.illus, p.muted) { display: none; }
.booking h4 { margin: 0; font-size: .875rem; font-weight: 600; }
.day { display: grid; gap: 8px; }
.times { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 6px; }
.time {
  min-height: 40px; border-radius: 10px; border: 1px solid var(--border-strong); background: var(--raised);
  color: var(--text); font: inherit; font-size: .875rem; font-variant-numeric: tabular-nums; cursor: pointer;
}
.time:hover { border-color: var(--accent-ink); background: var(--accent-soft); }
.time.request { border-style: dashed; }
.legend { margin: -4px 0 0; }
.notice-inline { padding: 10px 12px; border-radius: 12px; background: var(--accent-soft); border: 1px solid var(--accent-line); font-size: .875rem; }
.field { display: grid; gap: 6px; }
.field.inline { grid-template-columns: auto 1fr; align-items: center; gap: 10px; }
.field label { font-size: .8125rem; font-weight: 500; color: var(--text-2); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 44px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border-strong);
  background: var(--raised); color: var(--text); font: inherit; font-size: 1rem;
}
.field textarea { resize: vertical; }
.field [aria-invalid="true"] { border-color: #d93025; }
.booking-form { display: grid; gap: 12px; }
.picked { font-weight: 600; }
.review { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; font-size: .9rem; }
.review dt { color: var(--text-3); }
.review dd { margin: 0; overflow-wrap: anywhere; }
.success { font-weight: 600; }

@media (max-width: 767px) {
  .panel {
    position: fixed; left: 8px; right: 8px; translate: none;
    bottom: calc(var(--dock-h, 76px) + 22px + env(safe-area-inset-bottom) + var(--kb));
    max-height: calc(100dvh - var(--dock-h, 76px) - 40px - env(safe-area-inset-bottom) - var(--kb));
  }
}