/* SOLVE candidates — shared tokens (style stays: white, blue, Inter; branding = motion) */
:root {
  --bg: #fafafa; --bg-2: #ffffff; --bg-soft: #f4f4f5;
  --ink: #1a1a1a; --ink-2: #3a3a3e;
  --muted: #86868b; --muted-2: #6e6e73;
  --blue: #0a84ff; --blue-soft: rgba(10, 132, 255, 0.08);
  --green: #34c759; --amber: #f2b600; --coral: #f0554d; --violet: #b663e0;
  /* text-safe variants (>=4.5:1 on --bg) for small colored type */
  --blue-text: #0064d2; --green-text: #1d7f3c; --amber-text: #96690a; --coral-text: #c92e20;
  --hairline: rgba(16, 16, 16, 0.06); --hairline-2: rgba(16, 16, 16, 0.1);
  --r-lg: 22px; --r-md: 16px; --r-sm: 12px;
  --shadow-sm: 0 1px 2px rgba(17, 17, 20, 0.04), 0 4px 14px -6px rgba(17, 17, 20, 0.06);
  --shadow-md: 0 2px 6px rgba(17, 17, 20, 0.05), 0 18px 40px -18px rgba(17, 17, 20, 0.18);
  --shadow-lg: 0 30px 80px -30px rgba(17, 17, 20, 0.28);
  --container: 1200px; --gutter: 24px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --spring: linear(0, 0.0087 0.91%, 0.0359 1.9%, 0.1441 4.14%, 0.8226 12.71%, 1.0003 16.02%, 1.0685 18.51%, 1.0925 20.01%, 1.1044 21.65%, 1.1046 23.35%, 1.0842 26.44%, 1.0028 34.42%, 0.9744 40.62%, 0.9899 49.87%, 1.0032 64.01%, 1);
}
* { margin: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg); color: var(--ink);
  font-family: Inter, -apple-system, "SF Pro Text", system-ui, sans-serif;
  font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
h1, h2, h3 { text-wrap: balance; }
::selection { background: rgba(10, 132, 255, 0.18); }
[id] { scroll-margin-top: 90px; }

/* shared primitives */
.wrap { max-width: var(--container); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  border-radius: 999px; padding: 13px 24px;
  font-size: 15.5px; font-weight: 600; text-decoration: none;
  transition: transform 0.45s var(--spring), box-shadow 0.3s ease, background 0.3s ease;
  will-change: transform;
}
.btn:hover { transform: scale(1.04); }
.btn:active { transform: scale(0.97); }
.btn, .brand-name { white-space: nowrap; }
.btn-dark { background: var(--ink); color: #fff; box-shadow: var(--shadow-md); }
.btn-blue { background: var(--blue); color: #fff; box-shadow: 0 6px 20px -8px rgba(10, 132, 255, 0.55); }
.btn-ghost { color: var(--ink); border: 1px solid var(--hairline-2); background: var(--bg-2); font-weight: 500; }

/* forms: inputs may never exceed their column (390px form bug) */
.book-form input, .book-form textarea { width: 100%; min-width: 0; }
@media (max-width: 600px) { .f-row { grid-template-columns: 1fr !important; } }

/* demo stage on small screens: taller frame, no role line under the name */
@media (max-width: 560px) {
  .ds .ds-stage { aspect-ratio: 3 / 3.5; }
  .ds .ds-role { display: none; }
}

/* mobile nav: hamburger with the same anchors, shown when .nav-links hides */
.nav-mob { display: none; position: relative; }
.nav-mob summary { list-style: none; display: grid; gap: 4px; padding: 12px 10px; cursor: pointer; border-radius: 10px; }
.nav-mob summary::-webkit-details-marker { display: none; }
.nav-mob summary i { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--ink); transition: transform .3s var(--ease-out), opacity .3s; }
.nav-mob[open] summary i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-mob[open] summary i:nth-child(2) { opacity: 0; }
.nav-mob[open] summary i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.nav-mob nav { position: absolute; right: 0; top: calc(100% + 10px); min-width: 200px; display: flex; flex-direction: column; background: var(--bg-2); border: 1px solid var(--hairline-2); border-radius: 16px; box-shadow: var(--shadow-md); padding: 8px; z-index: 60; }
.nav-mob nav a { text-decoration: none; font-size: 15px; font-weight: 500; color: var(--ink); padding: 11px 14px; border-radius: 10px; }
.nav-mob nav a:hover { background: var(--bg-soft); }
@media (max-width: 900px) { .nav-mob { display: block; } }
@media (max-width: 480px) { .nav-login { display: none; } }

/* no-JS fallback note for script-rendered widgets */
.nojs-note { padding: 22px; border: 1px dashed var(--hairline-2); border-radius: var(--r-md); color: var(--muted-2); font-size: 14.5px; background: var(--bg-2); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}