/* Senso marketing site. Tokens come from the Senso design system that the
   pages were designed with; the component rules below replace the React
   components of the design export (Button, Card, Badge, Icon, Input, Select,
   Dialog, Toast) so the pages need no script to look right. */

/* ---------- Tokens ---------- */
:root {
  /* Brand: sampled from the Senso logo files. */
  --brand-violet: #9c60fe;
  --brand-indigo: #495cce;
  --brand-500: #6e5be4;
  --brand-50: #f3f1fe; --brand-100: #e7e3fd; --brand-200: #cfc8fa; --brand-300: #b0a5f5;
  --brand-400: #8e7dee; --brand-600: #5b48d4; --brand-700: #4a3ab4; --brand-800: #392d8c; --brand-900: #241c5c;
  /* Never re-angle the gradient: violet sits low-left, indigo high-right. */
  --brand-gradient: linear-gradient(to top right, var(--brand-violet), var(--brand-indigo));

  --neutral-0: #ffffff; --neutral-25: #fafafc; --neutral-50: #f5f5f8; --neutral-100: #eeeef3;
  --neutral-200: #e2e2ea; --neutral-300: #c9c9d6; --neutral-400: #a0a0b4; --neutral-500: #757589;
  --neutral-600: #55556a; --neutral-700: #3b3b4d; --neutral-800: #262633; --neutral-900: #17161c;

  --ok-500: #12a150; --ok-soft: #e7f7ee; --ok-border: #b6e6c9; --ok-text: #0a7038;
  --alert-500: #e5484d; --alert-soft: #fdecec; --alert-border: #f6c3c4; --alert-text: #a6161b;

  --accent: var(--brand-500);
  --accent-hover: var(--brand-600);
  --accent-soft: var(--brand-50);
  --accent-on: var(--neutral-0);

  --text-primary: var(--neutral-900);
  --text-secondary: var(--neutral-600);
  --text-muted: var(--neutral-500);
  --text-faint: var(--neutral-400);
  --text-accent: var(--brand-600);

  --surface-page: var(--neutral-25);
  --surface-card: var(--neutral-0);
  --surface-sunken: var(--neutral-50);
  --surface-overlay: rgba(14, 14, 20, .5);
  --surface-glass: rgba(255, 255, 255, .72);

  --border-subtle: var(--neutral-100);
  --border-default: var(--neutral-200);
  --border-strong: var(--neutral-300);
  --focus-ring: 0 0 0 3px rgba(110, 91, 228, .32);
  --chart-grid: var(--neutral-100);
  --chart-track: var(--neutral-200);

  --font-display: "Poppins", "Plus Jakarta Sans", system-ui, sans-serif;
  --font-sans: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700;
  --text-2xs: 11px; --text-xs: 12px; --text-sm: 13px; --text-base: 15px; --text-md: 17px; --text-lg: 20px;
  --tracking-tight: -0.018em;
  --type-h3: var(--weight-semibold) var(--text-lg)/1.3 var(--font-sans);
  --type-body-sm: 400 var(--text-sm)/1.5 var(--font-sans);
  --type-label: var(--weight-semibold) var(--text-xs)/1.3 var(--font-sans);
  --type-caption: var(--weight-medium) var(--text-2xs)/1.3 var(--font-sans);
  --type-mono: var(--weight-medium) var(--text-xs)/1.3 var(--font-mono);

  --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-7: 28px;
  --radius-lg: 16px; --radius-2xl: 28px; --radius-full: 999px;
  --radius-card: 20px; --radius-control: 12px; --radius-button: 10px; --radius-chip: 8px;

  --shadow-xs: 0 1px 2px rgba(23, 22, 28, .05);
  --shadow-sm: 0 1px 3px rgba(23, 22, 28, .06), 0 1px 2px rgba(23, 22, 28, .04);
  --shadow-md: 0 4px 14px rgba(23, 22, 28, .06);
  --shadow-lg: 0 12px 32px rgba(23, 22, 28, .08);
  --shadow-xl: 0 24px 60px rgba(23, 22, 28, .10);
  --shadow-accent: 0 8px 22px rgba(110, 91, 228, .28);
  --shadow-accent-sm: 0 3px 10px rgba(110, 91, 228, .24);
  --blur-glass: blur(14px);
  --blur-scrim: blur(2px);

  --dur-fast: 120ms; --dur-base: 180ms; --dur-slow: 280ms;
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --transition-control: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  --press-scale: 0.985;

  /* Layout: the sticky header's height (the toast and anchor scrolling clear
     it), the horizontal page gutter, and the vertical rhythm between sections.
     Phones get the smaller values at the bottom of this file. */
  --header-h: 68px;
  --gutter: 32px;
  --section-y: 96px;
  --section-y-compact: 80px;
  --hero-top: 80px;
  --hero-bottom: 64px;
  /* Inputs sit at 16px on phones: anything smaller makes iOS Safari zoom the
     page into the field and leave it there. */
  --text-input: var(--text-base);
}

/* A press under a thumb needs more give than one under a pointer to be seen at all. */
@media (pointer: coarse) {
  :root { --press-scale: 0.97; }
}
@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; --press-scale: 1; }
  .dialog[open], .toast { animation: none; }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 16px); }
html, body { margin: 0; background: var(--surface-page); color: var(--text-primary); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p { margin: 0; }
a { color: var(--text-accent); }
/* Images carry their intrinsic size in the markup, so the page keeps its
   shape while they load; height: auto keeps the ratio where CSS sets a width. */
img { max-width: 100%; height: auto; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline: none; box-shadow: var(--focus-ring); }
/* Controls never double-tap-zoom, so a tap fires at once, and a long press
   on a button must not select its label. */
a, button, summary { touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
/* Hover colours only where a pointer can hover: on a phone they would stick
   to whatever was tapped last. */
@media (hover: hover) {
  a:hover { color: var(--accent-hover); }
}
.icon { display: inline-block; flex: 0 0 auto; }
.fill { height: 100%; }
@keyframes senso-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- Sections ---------- */
.section { padding: var(--section-y) var(--gutter); }
.section-compact { padding: var(--section-y-compact) var(--gutter); }
.section-hero { padding: var(--hero-top) var(--gutter) var(--hero-bottom); }
.section-flush-top { padding-top: 0; }
.section-footer { padding: 64px var(--gutter) calc(32px + env(safe-area-inset-bottom)); }
/* Footer links are small text but full-height targets: 44px each, laid out so
   the rows still read as a list. */
.footer-links { display: grid; margin: -11px 0; }
.footer-link { display: inline-flex; align-items: center; min-height: 44px; font: 400 14px/1.5 var(--font-sans); color: rgba(255, 255, 255, .72); text-decoration: none; }
.footer-legal { display: flex; gap: 20px; }
.footer-legal .footer-link { color: inherit; }
@media (hover: hover) {
  .footer-link:hover { color: #fff; }
}

/* ---------- Header and navigation ---------- */
.site-header { position: sticky; top: 0; z-index: 30; background: var(--surface-glass); backdrop-filter: var(--blur-glass); -webkit-backdrop-filter: var(--blur-glass); border-bottom: 1px solid var(--border-subtle); padding-top: env(safe-area-inset-top); }
.site-header-inner { max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter); height: var(--header-h); display: flex; align-items: center; gap: 32px; }
.site-logo { display: flex; }
.site-logo img { height: 26px; width: auto; display: block; }
.nav-desktop { display: flex; gap: 24px; flex: 1; flex-wrap: wrap; }
.nav-desktop a { font: 500 14px/1 var(--font-sans); color: var(--text-secondary); text-decoration: none; }
.nav-desktop a[aria-current="page"] { color: var(--text-primary); font-weight: 600; }
.cta-header { margin-left: auto; }
.nav-toggle { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--border-default); background: var(--surface-card); color: var(--text-primary); cursor: pointer; padding: 0; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-menu { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: inline-block; }
.nav-mobile { background: var(--surface-card); border-top: 1px solid var(--border-subtle); padding: 8px 20px 20px; box-shadow: var(--shadow-md); }
.nav-mobile[hidden] { display: none; }
.nav-mobile a { display: block; padding: 14px 4px; font: 600 17px/1.2 var(--font-sans); color: var(--text-primary); text-decoration: none; border-bottom: 1px solid var(--border-subtle); }
.nav-mobile a:last-of-type { border-bottom: none; }
.nav-mobile .btn { width: 100%; margin-top: 16px; }
@media (hover: hover) {
  .nav-desktop a:hover { color: var(--text-primary); }
}

/* ---------- Hero ---------- */
.hero-actions { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
.hero-stats { display: flex; gap: 32px; margin-top: 36px; flex-wrap: wrap; }
.hero-stat-value { font: 700 22px/1 var(--font-display); letter-spacing: -0.03em; }
.hero-stat-label { font: 400 13px/1.5 var(--font-sans); color: var(--text-muted); margin-top: 4px; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-button); font-family: var(--font-sans); font-weight: var(--weight-semibold); line-height: 1; letter-spacing: var(--tracking-tight); white-space: nowrap; cursor: pointer; text-decoration: none; border: 1px solid transparent; transition: var(--transition-control); }
.btn:active { transform: scale(var(--press-scale)); }
.btn:disabled { opacity: .6; pointer-events: none; }
.btn-sm { height: 32px; padding: 0 14px; gap: 6px; font-size: var(--text-sm); }
.btn-md { height: 40px; padding: 0 18px; gap: 8px; font-size: var(--text-base); }
.btn-lg { height: 48px; padding: 0 26px; gap: 10px; font-size: var(--text-md); }
.btn-primary { background: var(--accent); color: var(--accent-on); box-shadow: var(--shadow-accent-sm); }
.btn-gradient { background: var(--brand-gradient); color: var(--accent-on); box-shadow: var(--shadow-accent-sm); }
.btn-secondary { background: var(--surface-card); color: var(--text-primary); border-color: var(--border-default); box-shadow: var(--shadow-xs); }
.btn-dark { background: var(--neutral-900); color: #fff; }
.btn-ghost { background: transparent; color: var(--text-secondary); }
@media (hover: hover) {
  .btn:hover { text-decoration: none; }
  .btn-primary:hover { background: var(--accent-hover); color: var(--accent-on); box-shadow: var(--shadow-accent); }
  .btn-gradient:hover { color: var(--accent-on); filter: saturate(1.08) brightness(1.04); box-shadow: var(--shadow-accent); }
  .btn-secondary:hover { background: var(--surface-sunken); color: var(--text-primary); border-color: var(--border-strong); }
  .btn-dark:hover { background: var(--neutral-800); color: #fff; }
  .btn-ghost:hover { background: var(--surface-sunken); color: var(--text-primary); }
}

/* ---------- Cards and badges ---------- */
.card { border-radius: var(--radius-card); padding: var(--space-7); min-width: 0; background: var(--surface-card); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-sm); }
.card-flush { padding: 0; }
.card-flat { box-shadow: none; }
.card-raised { box-shadow: var(--shadow-lg); }
.card-sunken { background: var(--surface-sunken); border-color: transparent; }
.card-gradient { background: var(--brand-gradient); border-color: transparent; color: #fff; }
/* One icon treatment for every card: the brand colour in a soft circle. */
.card-icon { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius-full); background: var(--accent-soft); color: var(--text-accent); }
.badge { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: var(--radius-chip); border: 1px solid; font: var(--weight-semibold) var(--text-xs)/1 var(--font-sans); white-space: nowrap; }
.badge-accent { background: var(--accent-soft); color: var(--text-accent); border-color: var(--brand-200); }
.badge-ok { background: var(--ok-soft); color: var(--ok-text); border-color: var(--ok-border); }
.badge-dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; opacity: .9; }

/* ---------- FAQ ---------- */
.faq { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: 0 20px; box-shadow: var(--shadow-sm); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; font: 600 16px/1.3 var(--font-sans); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .icon { color: var(--text-muted); transition: transform var(--dur-base) var(--ease-out); }
.faq[open] summary .icon { transform: rotate(180deg); }
.faq-answer { font: 400 15px/1.65 var(--font-sans); color: var(--text-secondary); padding: 0 0 20px; }
/* The answer slides open rather than cutting in, where the browser can
   animate a details element (Chrome, Edge, Safari 18.4+); elsewhere it opens
   as before. interpolate-size lets height tween to auto. */
:root { interpolate-size: allow-keywords; }
.faq::details-content { block-size: 0; opacity: 0; overflow: hidden; transition: block-size var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out), content-visibility var(--dur-base) allow-discrete; }
.faq[open]::details-content { block-size: auto; opacity: 1; }

/* ---------- Form fields ---------- */
.field-label { display: block; font: var(--type-label); color: var(--text-secondary); margin-bottom: 6px; }
.input-wrap { display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px; background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-control); box-shadow: var(--shadow-xs); transition: var(--transition-control); }
.input-wrap:focus-within { border-color: var(--brand-300); box-shadow: var(--focus-ring); }
.input { flex: 1; min-width: 0; border: none; outline: none; background: transparent; font: var(--weight-medium) var(--text-input)/1 var(--font-sans); color: var(--text-primary); padding: 0; }
.input:focus-visible { box-shadow: none; }
.select { width: 100%; height: 42px; padding: 0 36px 0 14px; appearance: none; background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-control); box-shadow: var(--shadow-xs); font: var(--weight-medium) var(--text-input)/1 var(--font-sans); color: var(--text-primary); cursor: pointer; transition: var(--transition-control); }
.select:focus { border-color: var(--brand-300); }

/* ---------- Booking dialog ---------- */
.dialog { width: 100%; max-width: 480px; padding: 0; border: none; background: var(--surface-card); color: var(--text-primary); border-radius: var(--radius-2xl); box-shadow: var(--shadow-xl); overflow: hidden; }
.dialog[open] { animation: senso-rise var(--dur-slow) var(--ease-out); }
.dialog::backdrop { background: var(--surface-overlay); backdrop-filter: var(--blur-scrim); -webkit-backdrop-filter: var(--blur-scrim); }
.dialog-head { display: flex; align-items: flex-start; gap: var(--space-4); padding: var(--space-6) var(--space-6) var(--space-4); }
.dialog-title { font: var(--type-h3); letter-spacing: var(--tracking-tight); }
.dialog-subtitle { font: var(--type-body-sm); color: var(--text-muted); margin-top: 4px; }
.dialog-close { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: none; border-radius: var(--radius-full); cursor: pointer; padding: 0; background: transparent; color: var(--text-muted); transition: var(--transition-control); }
/* minmax(0, 1fr): a plain 1fr track cannot shrink below a text input's
   intrinsic width, so the two-up row would overflow the dialog and widen
   every field below it. */
.dialog-body { padding: 0 var(--space-6) var(--space-6); display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.dialog-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.dialog-foot { display: flex; justify-content: flex-end; gap: var(--space-2); padding: var(--space-4) var(--space-6); background: var(--surface-sunken); border-top: 1px solid var(--border-subtle); }
@media (hover: hover) {
  .dialog-close:hover { background: var(--surface-sunken); color: var(--text-primary); }
}
@media (max-width: 480px) { .dialog-row { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Toast ---------- */
.toast { position: fixed; left: 50%; bottom: calc(28px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 80; display: flex; align-items: flex-start; gap: var(--space-3); padding: 14px 16px; width: max-content; max-width: min(400px, calc(100vw - 40px)); background: var(--neutral-900); color: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); animation: senso-rise var(--dur-slow) var(--ease-out); }
.toast[hidden] { display: none; }
.toast .icon { color: var(--ok-500); margin-top: 1px; }
.toast-title { font: var(--weight-semibold) var(--text-sm)/1.35 var(--font-sans); }
.toast-body { font: var(--type-body-sm); color: rgba(255, 255, 255, .68); margin-top: 2px; }

/* ---------- Phones ---------- */
@media (max-width: 820px) {
  :root { --gutter: 20px; --text-input: 16px; }
  .nav-desktop { display: none; }
  .nav-toggle { display: inline-flex; }
  .site-header-inner { gap: 12px; }
  .site-logo img { height: 22px; }
  /* The booking button stays in the header, at the same 44px as the menu
     toggle beside it; the menu's own copy is for people already in the menu. */
  .cta-header { height: 44px; padding: 0 14px; }
}
@media (max-width: 640px) {
  :root { --section-y: 56px; --section-y-compact: 48px; --hero-top: 40px; --hero-bottom: 40px; }
  /* Three stats read as one set on one line, not three paragraphs. */
  .hero-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 28px; }
  .hero-stat-value { font-size: 20px; }
  .hero-stat-label { font-size: 12px; }
  /* The toast sits under the header, not over the button that was just used
     and the thumb that used it. */
  .toast { top: calc(var(--header-h) + env(safe-area-inset-top) + 12px); bottom: auto; }
}