/* WHIPS — one stylesheet for the whole site.
   Light is the default; dark applies when the system asks for it unless the
   visitor picked light, or whenever the visitor picked dark. */

:root {
  color-scheme: light;
  --bg: #f5f3ee;
  --bg-sunk: #ece9e2;
  --surface: #fbfaf7;
  --surface-hi: #ffffff;
  --text: #191816;
  --text-2: #524f49;
  --text-3: #67635b;
  --line: rgba(25, 24, 22, 0.09);
  --line-2: rgba(25, 24, 22, 0.15);
  --focus: #1f5fd6;
  --link: #1d58c4;
  --glow: rgba(255, 255, 255, 0.75);
  --hover: rgba(25, 24, 22, 0.05);
  --glass: rgba(252, 251, 248, 0.62);
  --glass-solid: rgba(252, 251, 248, 0.96);
  --glass-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    inset 0 -1px 0 rgba(25, 24, 22, 0.04),
    0 0 0 0.5px rgba(25, 24, 22, 0.12),
    0 2px 4px rgba(45, 36, 22, 0.05),
    0 12px 30px -12px rgba(45, 36, 22, 0.28);

  --card-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 0 0 1px rgba(25, 24, 22, 0.06),
    0 1px 2px rgba(45, 36, 22, 0.06),
    0 10px 24px -10px rgba(45, 36, 22, 0.14),
    0 28px 60px -28px rgba(45, 36, 22, 0.22);
  --card-shadow-hover:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 0 0 1px rgba(25, 24, 22, 0.07),
    0 2px 4px rgba(45, 36, 22, 0.06),
    0 16px 32px -12px rgba(45, 36, 22, 0.18),
    0 40px 80px -32px rgba(45, 36, 22, 0.28);
  --sunk-shadow:
    inset 0 1px 3px rgba(45, 36, 22, 0.08),
    inset 0 0 0 1px rgba(25, 24, 22, 0.05),
    0 1px 0 rgba(255, 255, 255, 0.8);
  --window-shadow:
    0 0 0 0.5px rgba(0, 0, 0, 0.16),
    0 2px 5px rgba(30, 24, 16, 0.07),
    0 22px 44px -18px rgba(30, 24, 16, 0.3),
    0 60px 110px -40px rgba(30, 24, 16, 0.38);
  --control-bg: linear-gradient(#fdfcfa, #f1eee8);
  --control-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 0 0 1px rgba(25, 24, 22, 0.12),
    0 1px 2px rgba(45, 36, 22, 0.1);
  --primary-bg: linear-gradient(#34332f, #1a1917);
  --primary-text: #fbfaf7;
  --primary-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 0 0 1px rgba(0, 0, 0, 0.55),
    0 2px 4px rgba(30, 24, 16, 0.16),
    0 8px 18px -8px rgba(30, 24, 16, 0.35);

  --wrap: 1160px;
  --gutter: clamp(16px, 4.5vw, 44px);
  --radius-card: 28px;
  /* Vertical rhythm, on an 8px base. --space-head: heading to its intro;
     --space-content: a section's head to its content; --space-cluster: the
     parts of one group (StillLane hero → offers → formats); --space-section:
     between sections, and before the footer. */
  --space-head: 12px;
  --space-content: 32px;
  --space-cluster: clamp(32px, 3vw, 40px);
  --space-section: clamp(72px, 9vw, 120px);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #151514;
  --bg-sunk: #111110;
  --surface: #1d1d1b;
  --surface-hi: #252523;
  --text: #f1efea;
  --text-2: #b8b4ac;
  --text-3: #a09c94;
  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.14);
  --focus: #86adff;
  --link: #8fb3ff;
  --glow: rgba(255, 255, 255, 0.045);
  --hover: rgba(255, 255, 255, 0.06);
  --glass: rgba(34, 34, 32, 0.6);
  --glass-solid: rgba(34, 34, 32, 0.97);
  --glass-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    inset 0 -1px 0 rgba(0, 0, 0, 0.25),
    0 0 0 0.5px rgba(255, 255, 255, 0.1),
    0 2px 6px rgba(0, 0, 0, 0.35),
    0 14px 34px -12px rgba(0, 0, 0, 0.7);
  --card-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 0 0 1px rgba(255, 255, 255, 0.06),
    0 1px 2px rgba(0, 0, 0, 0.5),
    0 14px 30px -12px rgba(0, 0, 0, 0.6),
    0 34px 70px -30px rgba(0, 0, 0, 0.75);
  --card-shadow-hover:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 1px rgba(255, 255, 255, 0.09),
    0 2px 4px rgba(0, 0, 0, 0.5),
    0 20px 40px -14px rgba(0, 0, 0, 0.7),
    0 46px 90px -34px rgba(0, 0, 0, 0.85);
  --sunk-shadow:
    inset 0 1px 4px rgba(0, 0, 0, 0.45),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    0 1px 0 rgba(255, 255, 255, 0.04);
  --window-shadow:
    0 0 0 0.5px rgba(255, 255, 255, 0.16),
    0 2px 6px rgba(0, 0, 0, 0.4),
    0 24px 48px -18px rgba(0, 0, 0, 0.7),
    0 60px 120px -40px rgba(0, 0, 0, 0.8);
  --control-bg: linear-gradient(#2d2d2b, #232321);
  --control-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 0 0 1px rgba(0, 0, 0, 0.6),
    0 1px 2px rgba(0, 0, 0, 0.4);
  --primary-bg: linear-gradient(#fbfaf7, #e2dfd8);
  --primary-text: #191816;
  --primary-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 0 0 1px rgba(0, 0, 0, 0.6),
    0 2px 4px rgba(0, 0, 0, 0.4),
    0 10px 22px -10px rgba(0, 0, 0, 0.7);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #151514;
    --bg-sunk: #111110;
    --surface: #1d1d1b;
    --surface-hi: #252523;
    --text: #f1efea;
    --text-2: #b8b4ac;
    --text-3: #a09c94;
    --line: rgba(255, 255, 255, 0.08);
    --line-2: rgba(255, 255, 255, 0.14);
    --focus: #86adff;
    --link: #8fb3ff;
    --glow: rgba(255, 255, 255, 0.045);
    --hover: rgba(255, 255, 255, 0.06);
    --glass: rgba(34, 34, 32, 0.6);
    --glass-solid: rgba(34, 34, 32, 0.97);
    --glass-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.09),
      inset 0 -1px 0 rgba(0, 0, 0, 0.25),
      0 0 0 0.5px rgba(255, 255, 255, 0.1),
      0 2px 6px rgba(0, 0, 0, 0.35),
      0 14px 34px -12px rgba(0, 0, 0, 0.7);
    --card-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.07),
      0 0 0 1px rgba(255, 255, 255, 0.06),
      0 1px 2px rgba(0, 0, 0, 0.5),
      0 14px 30px -12px rgba(0, 0, 0, 0.6),
      0 34px 70px -30px rgba(0, 0, 0, 0.75);
    --card-shadow-hover:
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      0 0 0 1px rgba(255, 255, 255, 0.09),
      0 2px 4px rgba(0, 0, 0, 0.5),
      0 20px 40px -14px rgba(0, 0, 0, 0.7),
      0 46px 90px -34px rgba(0, 0, 0, 0.85);
    --sunk-shadow:
      inset 0 1px 4px rgba(0, 0, 0, 0.45),
      inset 0 0 0 1px rgba(255, 255, 255, 0.04),
      0 1px 0 rgba(255, 255, 255, 0.04);
    --window-shadow:
      0 0 0 0.5px rgba(255, 255, 255, 0.16),
      0 2px 6px rgba(0, 0, 0, 0.4),
      0 24px 48px -18px rgba(0, 0, 0, 0.7),
      0 60px 120px -40px rgba(0, 0, 0, 0.8);
    --control-bg: linear-gradient(#2d2d2b, #232321);
    --control-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      0 0 0 1px rgba(0, 0, 0, 0.6),
      0 1px 2px rgba(0, 0, 0, 0.4);
    --primary-bg: linear-gradient(#fbfaf7, #e2dfd8);
    --primary-text: #191816;
    --primary-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.9),
      0 0 0 1px rgba(0, 0, 0, 0.6),
      0 2px 4px rgba(0, 0, 0, 0.4),
      0 10px 22px -10px rgba(0, 0, 0, 0.7);
  }
}

/* Base ------------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--bg);
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--text);
  background:
    radial-gradient(ellipse 90% 60% at 50% -12%, var(--glow), transparent 70%),
    var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

main { flex: 1; outline: none; }

img, svg { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: 650; letter-spacing: -0.02em; line-height: 1.15; }
p { margin: 0; }

a { color: var(--link); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 6px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.wrap {
  width: min(var(--wrap), 100% - 2 * var(--gutter));
  margin-inline: auto;
}

.skip-link {
  position: absolute;
  left: 12px; top: -60px;
  z-index: 20;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--surface-hi);
  color: var(--text);
  box-shadow: var(--card-shadow);
}
.skip-link:focus { top: 12px; }
.skip-link[hidden] { display: none; }

.eyebrow {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* Header ------------------------------------------------------------------
   Sticky, and "magnetic": at the top of the page it rests flat on the
   background; once the page scrolls it lifts into a floating glass bar with
   a shadow, keeping projects and appearance one click away anywhere. */

html { scroll-padding-top: 96px; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  padding-top: 10px;
  pointer-events: none;
}
.site-header__bar {
  pointer-events: auto;
  border-radius: 22px;
  transition: background-color 260ms var(--ease), box-shadow 260ms var(--ease),
    -webkit-backdrop-filter 260ms var(--ease), backdrop-filter 260ms var(--ease), transform 260ms var(--ease);
}
.site-header__top { display: contents; }
.site-header__inner {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 60px;
  padding-inline: 4px;
  transition: padding 260ms var(--ease);
}
.is-scrolled .site-header__bar {
  background-color: var(--glass);
  -webkit-backdrop-filter: saturate(180%) blur(22px);
  backdrop-filter: saturate(180%) blur(22px);
  box-shadow: var(--glass-shadow);
  transform: translateY(2px);
}
.is-scrolled .site-header__inner { padding-inline: 18px 8px; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .is-scrolled .site-header__bar { background-color: var(--glass-solid); }
}

.wordmark {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 750;
  letter-spacing: 0.16em;
  color: var(--text);
  text-decoration: none;
  padding: 10px 2px;
  margin-right: auto;
}
.wordmark--small { font-size: 0.9375rem; margin: 0; }

.site-nav { display: flex; gap: 2px; order: 1; }
.lang-menu { order: 2; }
.theme-switch { order: 3; }
.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 12px;
  color: var(--text-2);
  font-weight: 550;
  font-size: 0.9375rem;
  text-decoration: none;
  transition: color 160ms var(--ease), background-color 160ms var(--ease);
}
.site-nav a:hover { color: var(--text); background: var(--hover); }
/* The current product rests in a shallow well, like the chosen appearance. */
.site-nav a[aria-current] { color: var(--text); background: var(--bg-sunk); box-shadow: var(--sunk-shadow); }

/* On phones the sticky row and the scrolling tabs participate in the page
   flow independently, so the sticky row is not confined to the header height. */
@media (max-width: 560px) {
  html { scroll-padding-top: 72px; }
  .site-header, .site-header__bar, .site-header__inner { display: contents; }
  .site-header__top {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 60px;
    padding: 4px max(12px, env(safe-area-inset-right)) 4px max(12px, env(safe-area-inset-left));
    border-radius: 22px;
    transition: background-color 260ms var(--ease), box-shadow 260ms var(--ease),
      -webkit-backdrop-filter 260ms var(--ease), backdrop-filter 260ms var(--ease);
  }
  .is-scrolled .site-header__top {
    background-color: var(--glass);
    -webkit-backdrop-filter: saturate(180%) blur(22px);
    backdrop-filter: saturate(180%) blur(22px);
    box-shadow: var(--glass-shadow);
  }
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .is-scrolled .site-header__top { background-color: var(--glass-solid); }
  }
  .site-header__top .wordmark { font-size: .9375rem; letter-spacing: .14em; }
  .site-nav {
    position: relative;
    z-index: 1;
    order: 0;
    padding-inline: max(12px, env(safe-area-inset-left));
    gap: 4px;
    background: var(--bg);
    box-shadow: 0 1px 0 var(--line);
  }
  .site-nav a { position: relative; min-height: 44px; padding: 0 10px; border-radius: 0; }
  .site-nav a[aria-current] { background: transparent; box-shadow: none; }
  .site-nav a[aria-current]::after {
    content: ""; position: absolute; height: 2px; bottom: 0; left: 10px; right: 10px;
    background: currentColor; border-radius: 2px;
  }
}

/* Language: a compact disclosure that matches the appearance switch — a well
   holding one raised key — and opens a short list downwards. Needs script; the
   links are shown inline without it. Grows to any number of languages. */
.lang-menu { position: relative; margin-left: 4px; }
.lang-menu__list { display: flex; margin: 0; padding: 0; list-style: none; }
.lang-menu__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 44px;
  padding: 0 10px;
  border-radius: 10px;
  color: var(--text-2);
  font-size: 0.9375rem;
  font-weight: 550;
  text-decoration: none;
}
.lang-menu__list a:hover { color: var(--text); background: var(--hover); }
.lang-menu__code { color: var(--text-3); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; }
html:not(.js) .lang-menu__list a[aria-current], html:not(.js) .lang-menu__code { display: none; }

.lang-menu__button { display: none; }
.js .lang-menu__button {
  display: inline-flex;
  padding: 3px;
  border: 0;
  border-radius: 999px;
  font: inherit;
  background: var(--bg-sunk);
  box-shadow: var(--sunk-shadow);
  cursor: pointer;
}
.lang-menu__face {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 32px;
  padding: 0 9px 0 12px;
  border-radius: 999px;
  color: var(--text);
  background: var(--control-bg);
  box-shadow: var(--control-shadow);
  font-size: 0.8125rem;
  font-weight: 650;
  letter-spacing: 0.04em;
}
.lang-menu__face svg { width: 12px; height: 12px; color: var(--text-3); transition: transform 160ms var(--ease); }
.js .lang-menu__button:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
.lang-menu.is-open .lang-menu__face svg { transform: rotate(180deg); }

.js .lang-menu__list {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 1;
  display: none;
  flex-direction: column;
  gap: 2px;
  min-width: 184px;
  max-height: min(60vh, 420px);
  overflow-y: auto;
  padding: 6px;
  border-radius: 16px;
  background: var(--glass-solid);
  box-shadow: var(--card-shadow-hover);
}
.js .lang-menu.is-open .lang-menu__list { display: flex; animation: lang-menu-in 140ms var(--ease); }
.js .lang-menu__list a { color: var(--text); }
.js .lang-menu__list a[aria-current] { background: var(--bg-sunk); box-shadow: var(--sunk-shadow); }
.js .lang-menu__list a:focus-visible { outline-offset: -3px; }
@keyframes lang-menu-in { from { opacity: 0; transform: translateY(-4px); } }

/* Appearance: a small tactile three-way switch. Needs script, so it stays
   hidden without it and the page simply follows the system. */
.theme-switch {
  display: none;
  margin: 0 0 0 4px;
  padding: 3px;
  border: 0;
  border-radius: 999px;
  background: var(--bg-sunk);
  box-shadow: var(--sunk-shadow);
}
.js .theme-switch { display: inline-flex; }

.theme-switch__option {
  position: relative;
  display: grid;
  place-items: center;
  width: 36px;
  height: 32px;
  border-radius: 999px;
  color: var(--text-3);
  cursor: pointer;
  transition: color 160ms var(--ease), background 160ms var(--ease), box-shadow 160ms var(--ease);
}
.theme-switch__option svg { width: 18px; height: 18px; }
.theme-switch__option input {
  position: absolute; inset: 0;
  margin: 0; opacity: 0; cursor: pointer;
}
.theme-switch__option:hover { color: var(--text); }
.theme-switch__option:has(input:checked) {
  color: var(--text);
  background: var(--control-bg);
  box-shadow: var(--control-shadow);
}
.theme-switch__option:has(input:focus-visible) {
  outline: 3px solid var(--focus);
  outline-offset: 1px;
}

/* Buttons ---------------------------------------------------------------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 20px;
  border: 0;
  border-radius: 12px;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text);
  background: var(--control-bg);
  box-shadow: var(--control-shadow);
  text-decoration: none;
  cursor: pointer;
  transition: transform 120ms var(--ease), box-shadow 160ms var(--ease);
}
.button:hover { text-decoration: none; }
.button:active { transform: translateY(1px); }

.button--primary {
  min-height: 50px;
  padding: 0 26px;
  border-radius: 14px;
  font-size: 1rem;
  color: var(--primary-text);
  background: var(--primary-bg);
  box-shadow: var(--primary-shadow);
}

.link-button {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  cursor: pointer;
}

/* Home ------------------------------------------------------------------ */

.home-hero {
  padding-block: clamp(36px, 6.5vw, 84px) clamp(28px, 4vw, 48px);
}
.home-hero h1 {
  max-width: 15ch;
  font-size: clamp(2.5rem, 6.4vw, 4.75rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.038em;
  text-wrap: balance;
}
.home-hero p {
  margin-top: clamp(16px, 2vw, 24px);
  max-width: 44ch;
  font-size: clamp(1.125rem, 1.7vw, 1.375rem);
  line-height: 1.45;
  color: var(--text-2);
  text-wrap: balance;
}

.projects {
  display: grid;
  grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr);
  gap: clamp(16px, 2vw, 24px);
  padding-bottom: var(--space-section);
}

.project-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: clamp(420px, 44vw, 520px);
  border-radius: var(--radius-card);
  background: linear-gradient(180deg, var(--surface-hi), var(--surface));
  box-shadow: var(--card-shadow);
  color: inherit;
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  transition: box-shadow 220ms var(--ease), transform 220ms var(--ease);
}
a.project-card:hover { box-shadow: var(--card-shadow-hover); transform: translateY(-2px); text-decoration: none; }
a.project-card:focus-visible { outline-offset: 4px; border-radius: var(--radius-card); }

.project-card__head {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: clamp(22px, 3vw, 32px) clamp(22px, 3vw, 32px) 0;
}
.project-card__icon {
  flex: none;
  width: 84px;
  margin: -8px -4px -8px -8px;
}
.project-card__title { font-size: 1.625rem; letter-spacing: -0.025em; }
.project-card__tagline { margin-top: 2px; color: var(--text-2); font-size: 1rem; }
.project-card__meta { margin-top: 6px; color: var(--text-3); font-size: 0.875rem; }
.project-card__go {
  align-self: flex-start;
  margin-left: auto;
  width: 36px; height: 36px;
  flex: none;
  display: grid; place-items: center;
  border-radius: 999px;
  color: var(--text-2);
  background: var(--control-bg);
  box-shadow: var(--control-shadow);
  transition: transform 220ms var(--ease), color 220ms var(--ease);
}
.project-card__go svg { width: 16px; height: 16px; }
a.project-card:hover .project-card__go { transform: translateX(3px); color: var(--text); }

/* Two real captures, overlapped and cut by the card's lower edge. */
.project-card__shots {
  position: relative;
  flex: 1;
  min-height: 230px;
  margin-top: clamp(24px, 3vw, 36px);
  perspective: 1800px;
}
.project-card__shots .shot {
  position: absolute;
  top: 0;
}
.project-card__shots .shot--back {
  right: -4%;
  top: 14px;
  width: 64%;
  transform: rotateY(-10deg) rotateZ(0.6deg);
  transform-origin: 100% 0;
}
.project-card__shots .shot--front {
  left: 7%;
  top: 34px;
  width: 64%;
  transform: rotateY(6deg);
  transform-origin: 0 0;
  transition: transform 320ms var(--ease);
}
a.project-card:hover .project-card__shots .shot--front { transform: rotateY(4deg) translateY(-4px); }

/* Two products side by side: equal cards on one baseline. Each keeps its own
   evidence — BlankKey two Quick Look windows (light and dark), StillLane a
   source page and the app window holding its Markdown. */
.projects--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.projects--pair .project-card { min-height: clamp(440px, 40vw, 500px); }
.projects--pair .project-card__shots .shot--back { top: 22px; right: -16%; width: 74%; }
.projects--pair .project-card__shots .shot--front { top: 54px; left: 5%; width: 70%; }

/* Tablets: half a card is narrow, so the head gives the evidence more room. */
@media (min-width: 761px) and (max-width: 1000px) {
  .projects--pair .project-card__head { gap: 14px; }
  .projects--pair .project-card__icon { width: 68px; }
}

.project-card__desk {
  position: relative;
  flex: 1;
  min-height: 230px;
  margin-top: clamp(24px, 3vw, 36px);
}
.desk__page {
  position: absolute;
  top: 4px;
  left: 6%;
  width: 38%;
  transform: rotate(-3deg);
  transform-origin: 50% 0;
}
.desk__page img {
  width: 100%;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(25, 24, 22, 0.06), 0 2px 4px rgba(25, 24, 22, 0.08), 0 18px 34px -16px rgba(25, 24, 22, 0.4);
}
.desk__window {
  position: absolute;
  top: 82px;
  left: 27%;
  width: 96%;
  transition: transform 320ms var(--ease);
}
/* The captures' window corners were flattened onto white: masked as on the
   StillLane page (--sl-window-radius). */
.desk__window img { width: 100%; border-radius: var(--sl-window-radius); box-shadow: var(--window-shadow); }
.desk__window--dark { display: none; }
:root[data-theme="dark"] .desk__window--light { display: none; }
:root[data-theme="dark"] .desk__window--dark { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .desk__window--light { display: none; }
  :root:not([data-theme="light"]) .desk__window--dark { display: block; }
}
a.project-card:hover .desk__window { transform: translateY(-4px); }

/* Coming soon: one diagonal beam of light on a quiet surface. The beam is
   clipped on a child and only lightly feathered by a filter on its wrapper
   (the filter runs after the child's clip, so the edge stays readable);
   brightness falls from the entry edge. Nothing moves, nothing is clickable. */
.coming-soon {
  --cs-surface-top: #ece8df;
  --cs-surface-bottom: #e3dfd5;
  --cs-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.7),
    0 0 0 1px var(--line),
    0 1px 2px rgba(45, 36, 22, 0.05),
    0 8px 20px -12px rgba(45, 36, 22, 0.14);
  --cs-beam-in: rgba(255, 252, 243, 0.9);
  --cs-beam-mid: rgba(255, 251, 241, 0.55);
  --cs-beam-out: rgba(255, 251, 241, 0.12);
  --cs-scatter: rgba(255, 251, 241, 0.22);
  --cs-feather: 2.5px;
  --cs-scatter-blur: 14px;
  --cs-angle: 208deg;
  /* Percent of the card: enters along the top edge at the upper right and
     leaves along the bottom edge toward the text. */
  --cs-beam: polygon(64% 0%, 108% 0%, 58% 100%, 12% 100%);

  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  min-height: clamp(260px, 44vw, 520px);
  padding: clamp(22px, 3vw, 32px);
  border-radius: var(--radius-card);
  background: linear-gradient(196deg, var(--cs-surface-top) 0%, var(--cs-surface-bottom) 100%);
  box-shadow: var(--cs-shadow);
  color: var(--text-2);
}
.coming-soon__light,
.coming-soon__scatter,
.coming-soon__beam {
  position: absolute;
  inset: 0;
}
.coming-soon__light { z-index: -1; }
.coming-soon__scatter { filter: blur(var(--cs-scatter-blur)); }
.coming-soon__beam { filter: blur(var(--cs-feather)); }
.coming-soon__scatter::before,
.coming-soon__beam::before {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: var(--cs-beam);
}
/* A faint scatter just outside the edges, so they read as light, not a cut. */
.coming-soon__scatter::before {
  background: linear-gradient(var(--cs-angle), var(--cs-scatter) 0%, transparent 80%);
}
.coming-soon__beam::before {
  background: linear-gradient(var(--cs-angle), var(--cs-beam-in) 4%, var(--cs-beam-mid) 45%, var(--cs-beam-out) 100%);
}
.coming-soon__text {
  position: relative;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* Dark: the same beam at lower contrast, warm. */
:root[data-theme="dark"] .coming-soon {
  --cs-surface-top: #1e1d1b;
  --cs-surface-bottom: #191816;
  --cs-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 0 0 1px var(--line),
    0 1px 2px rgba(0, 0, 0, 0.45),
    0 10px 24px -14px rgba(0, 0, 0, 0.6);
  --cs-beam-in: rgba(255, 238, 214, 0.14);
  --cs-beam-mid: rgba(255, 238, 214, 0.08);
  --cs-beam-out: rgba(255, 238, 214, 0.02);
  --cs-scatter: rgba(255, 238, 214, 0.04);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .coming-soon {
    --cs-surface-top: #1e1d1b;
    --cs-surface-bottom: #191816;
    --cs-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.05),
      0 0 0 1px var(--line),
      0 1px 2px rgba(0, 0, 0, 0.45),
      0 10px 24px -14px rgba(0, 0, 0, 0.6);
    --cs-beam-in: rgba(255, 238, 214, 0.14);
    --cs-beam-mid: rgba(255, 238, 214, 0.08);
    --cs-beam-out: rgba(255, 238, 214, 0.02);
    --cs-scatter: rgba(255, 238, 214, 0.04);
  }
}

/* Phones: the teaser sits under BlankKey and stays quieter than it. The surface
   comes close to the page, the shadow is lighter, the text steps down in tone,
   and the beam is a narrow localized diagonal at the right end; most of the
   strip stays calm. */
@media (max-width: 760px) {
  .coming-soon {
    --cs-surface-top: #f0ede7;
    --cs-surface-bottom: #ebe8e1;
    --cs-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.6),
      0 0 0 1px var(--line),
      0 1px 2px rgba(45, 36, 22, 0.04);
    --cs-beam: polygon(76% 0%, 94% 0%, 80% 100%, 62% 100%);
    --cs-beam-in: rgba(255, 253, 248, 0.75);
    --cs-beam-mid: rgba(255, 253, 248, 0.45);
    --cs-beam-out: rgba(255, 253, 248, 0.15);
    --cs-scatter: rgba(255, 253, 248, 0.15);
    --cs-feather: 1.5px;
    --cs-scatter-blur: 8px;
    --cs-angle: 180deg;

    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    min-height: 112px;
    padding: 0 22px;
    color: var(--text-3);
  }
  :root[data-theme="dark"] .coming-soon {
    --cs-surface-top: #1a1a18;
    --cs-surface-bottom: #181816;
    --cs-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.04),
      0 0 0 1px var(--line),
      0 1px 2px rgba(0, 0, 0, 0.35);
    --cs-beam-in: rgba(255, 238, 214, 0.1);
    --cs-beam-mid: rgba(255, 238, 214, 0.06);
    --cs-beam-out: rgba(255, 238, 214, 0.02);
    --cs-scatter: rgba(255, 238, 214, 0.03);
  }
}
@media (max-width: 760px) and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .coming-soon {
    --cs-surface-top: #1a1a18;
    --cs-surface-bottom: #181816;
    --cs-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.04),
      0 0 0 1px var(--line),
      0 1px 2px rgba(0, 0, 0, 0.35);
    --cs-beam-in: rgba(255, 238, 214, 0.1);
    --cs-beam-mid: rgba(255, 238, 214, 0.06);
    --cs-beam-out: rgba(255, 238, 214, 0.02);
    --cs-scatter: rgba(255, 238, 214, 0.03);
  }
}

/* Windows (real captures) --------------------------------------------------- */

.shot img {
  width: 100%;
  height: auto;
  /* Matches the capture's own corner: 52 px on a 2420 × 1858 frame. */
  border-radius: 2.15% / 2.8%;
  box-shadow: var(--window-shadow);
  background: transparent;
}
.shot--editor img { border-radius: 1.54% / 2.22%; }

/* BlankKey --------------------------------------------------------------- */

.bk-hero {
  padding-top: clamp(20px, 3.5vw, 44px);
  text-align: center;
}
.bk-hero__icon {
  width: clamp(96px, 10vw, 120px);
  margin: 0 auto;
}
.bk-hero__name {
  margin-top: 4px;
  font-size: 1.375rem;
  letter-spacing: -0.015em;
}
.bk-hero .eyebrow { margin-top: 6px; }
.bk-hero__headline {
  margin: clamp(16px, 2vw, 24px) auto 0;
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 7vw, 5.25rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.045em;
}
.bk-hero__headline span { display: inline-block; }
.bk-hero__lede {
  max-width: 46rem;
  margin: clamp(16px, 2vw, 24px) auto 0;
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  line-height: 1.5;
  color: var(--text-2);
  text-wrap: balance;
}
.bk-hero__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: clamp(20px, 2.6vw, 28px);
}
.bk-hero__meta { color: var(--text-3); font-size: 0.9375rem; }
/* Apple's black Mac App Store badge, used as supplied in both themes (its gray
   border carries it on the dark background): no filters or hover effects.
   Apple asks for clear space of a quarter of the badge height; the margin
   tops the column gap up to that. The focus ring follows the badge corners. */
.store-badge {
  display: block;
  margin-bottom: 2px;
  border-radius: 11px;
}
.store-badge img { width: auto; height: 48px; }
.cta-pending {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--text-2);
}

/* Showcase: a foreground window that changes state, with two real captures
   behind it in perspective. */
.showcase { padding-top: clamp(32px, 4.5vw, 56px); }

.stage {
  position: relative;
  width: min(1240px, 100% - 2 * var(--gutter));
  margin-inline: auto;
  perspective: 2600px;
  perspective-origin: 50% 30%;
}
.stage__back {
  position: absolute;
  top: 15%;
  width: 49%;
  z-index: 1;
}
.stage__back--left {
  left: 0;
  transform: rotateY(12deg) translateZ(-40px);
  transform-origin: 0 50%;
}
.stage__back--right {
  right: 0;
  top: 2%;
  transform: rotateY(-12deg) translateZ(-40px);
  transform-origin: 100% 50%;
}
.stage__front {
  position: relative;
  z-index: 2;
  width: 60%;
  margin-inline: auto;
  display: grid;
}
.stage__state {
  grid-area: 1 / 1;
  align-self: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 240ms var(--ease), visibility 0s linear 240ms;
}
.stage__state.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 240ms var(--ease), visibility 0s;
}
.stage__state--edit { width: 104%; margin-left: -2%; }

.showcase__tabs {
  display: none;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px clamp(8px, 2vw, 22px);
  margin-top: clamp(28px, 4vw, 44px);
}
.js .showcase__tabs { display: flex; }
.showcase__tab {
  position: relative;
  min-height: 44px;
  padding: 0 8px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.9875rem;
  font-weight: 550;
  color: var(--text-3);
  cursor: pointer;
  transition: color 160ms var(--ease);
}
.showcase__tab::after {
  content: "";
  position: absolute;
  left: 8px; right: 8px; bottom: 6px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transform: scaleX(0);
  transition: transform 220ms var(--ease);
}
.showcase__tab:hover { color: var(--text); }
.showcase__tab[aria-selected="true"] { color: var(--text); }
.showcase__tab[aria-selected="true"]::after { transform: scaleX(1); }

.showcase__caption {
  min-height: 1.5em;
  margin-top: 6px;
  text-align: center;
  color: var(--text-3);
  font-size: 0.9375rem;
}

.capabilities {
  padding-top: clamp(48px, 7vw, 88px);
  text-align: center;
}
.capabilities h2 { font-size: 0.8125rem; }
.capabilities ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: 60rem;
  margin: 16px auto 0;
  padding: 0;
  list-style: none;
}
.capabilities li {
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 550;
  color: var(--text-2);
  background: var(--bg-sunk);
  box-shadow: var(--sunk-shadow);
}

.editor {
  padding-top: clamp(80px, 11vw, 150px);
}
.editor__copy { max-width: 38rem; margin-inline: auto; text-align: center; }
.editor__copy h2 {
  margin-top: 10px;
  font-size: clamp(2rem, 4.4vw, 3.25rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.05;
}
.editor__copy p:last-child { margin-top: 16px; color: var(--text-2); font-size: clamp(1.0625rem, 1.4vw, 1.1875rem); text-wrap: pretty; }
.editor__shot {
  width: min(1120px, 100% - 2 * var(--gutter));
  margin: clamp(32px, 5vw, 56px) auto 0;
}

.features {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 40px);
  padding-block: clamp(80px, 10vw, 136px) clamp(64px, 8vw, 104px);
}
.features h3 {
  padding-top: 16px;
  border-top: 1px solid var(--line-2);
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
}
.features p { margin-top: 8px; color: var(--text-2); font-size: 0.96875rem; line-height: 1.55; }

.bk-requirements {
  padding-bottom: clamp(56px, 7vw, 88px);
  text-align: center;
  color: var(--text-3);
  font-size: 0.9375rem;
}

/* Prose pages --------------------------------------------------------------- */

.prose {
  width: min(44rem, 100% - 2 * var(--gutter));
  margin-inline: auto;
  padding-block: clamp(32px, 6vw, 72px) clamp(64px, 8vw, 104px);
}
.prose__head { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.prose__head img { width: 56px; margin: -6px; }
.prose h1 { font-size: clamp(2rem, 4.4vw, 2.75rem); font-weight: 700; letter-spacing: -0.03em; }
.prose h2 { margin-top: 2.2em; font-size: 1.3125rem; letter-spacing: -0.015em; }
.prose h3 { margin-top: 1.6em; font-size: 1.0625rem; }
.prose p, .prose ul, .prose ol { margin-top: 0.85em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: 0.35em; }
.prose .lede { margin-top: 12px; font-size: 1.1875rem; color: var(--text-2); }
.prose .note { color: var(--text-3); font-size: 0.9375rem; }
.prose hr { margin: 2.5em 0; border: 0; border-top: 1px solid var(--line-2); }
.prose table { width: 100%; margin-top: 1em; border-collapse: collapse; font-size: 0.9375rem; }
.prose th, .prose td { padding: 8px 10px 8px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.prose th { color: var(--text-2); font-weight: 600; }

.contact-card {
  margin-top: 1.2em;
  padding: 20px 22px;
  border-radius: 18px;
  background: linear-gradient(180deg, var(--surface-hi), var(--surface));
  box-shadow: var(--card-shadow);
}
.contact-card p:first-child { margin-top: 0; }
.contact-card a { font-weight: 600; }

/* Footer ------------------------------------------------------------------ */

.site-footer {
  border-top: 1px solid var(--line);
  color: var(--text-3);
  font-size: 0.9375rem;
}
.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
  padding-block: 20px 28px;
}
.site-footer__seller { flex-basis: 100%; font-size: 0.8125rem; line-height: 1.6; overflow-wrap: anywhere; }
.site-footer__mark { margin-right: auto; }
/* Links sit in 10px of padding so the current one can rest in a well (as in
   the header); the negative margin keeps the text on the page's edges. Hover
   underlines; current is the well, without an underline. */
.site-footer__nav { display: flex; flex-wrap: wrap; gap: 2px 4px; margin-inline: -10px; }
.site-footer__nav a, .site-footer__nav .link-button {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 10px;
  border-radius: 999px;
  color: var(--text-2);
  text-decoration: none;
}
.site-footer__nav a:hover, .site-footer__nav .link-button:hover { color: var(--text); text-decoration: underline; }
.site-footer__nav a[aria-current] { color: var(--text); background: var(--bg-sunk); box-shadow: var(--sunk-shadow); }
/* A section of the page shown (terms → refunds): a flat tint, a step below the page. */
.site-footer__nav a[aria-current="location"] { background: var(--hover); box-shadow: none; }
.site-footer__nav a[aria-current]:hover { text-decoration: none; }

/* Consent ------------------------------------------------------------------ */

.consent {
  position: fixed;
  z-index: 30;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  width: min(400px, 100vw - 32px);
  padding: 20px;
  border-radius: 20px;
  background: linear-gradient(180deg, var(--surface-hi), var(--surface));
  box-shadow: var(--card-shadow-hover);
}
.consent[hidden] { display: none; }
.consent:focus { outline: none; }
.consent:focus-visible { outline: 3px solid var(--focus); }
.consent__title { font-size: 1rem; }
.consent__text { margin-top: 6px; color: var(--text-2); font-size: 0.9375rem; line-height: 1.5; }
.consent__note { margin-top: 8px; font-size: 0.875rem; line-height: 1.45; }
.consent__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.consent__actions .button { padding-inline: 12px; }

/* StillLane ---------------------------------------------------------------- */

.sl-buy { display: grid; justify-items: center; gap: 8px; width: min(22rem, 100%); }
.sl-buy__label { color: var(--text-2); font-size: 0.875rem; }
.sl-buy__email {
  width: 100%;
  min-height: 44px;
  padding: 0 14px;
  border: 0;
  border-radius: 12px;
  font: inherit;
  color: var(--text);
  background: var(--surface-hi);
  box-shadow: var(--sunk-shadow);
}
.sl-buy__note, .sl-buy__status { color: var(--text-3); font-size: 0.875rem; }
.sl-buy__status:empty { display: none; }

.sl-draft {
  margin-top: 14px;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--bg-sunk);
  box-shadow: var(--sunk-shadow);
  font-weight: 600;
}
.owner-input { padding: 0 4px; border-radius: 4px; background: var(--bg-sunk); color: var(--text-3); }

.sl-license__label { display: block; margin-top: 1.4em; color: var(--text-2); font-size: 0.875rem; font-weight: 600; }
.sl-license__key {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 12px 14px;
  border: 0;
  border-radius: 12px;
  font: 0.8125rem/1.5 ui-monospace, Menlo, monospace;
  word-break: break-all;
  resize: none;
  color: var(--text);
  background: var(--surface-hi);
  box-shadow: var(--sunk-shadow);
}
.sl-license__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.sl-license [data-license-unavailable] .button { margin-top: 1em; }

/* 404 ------------------------------------------------------------------------ */

.not-found { padding-block: clamp(64px, 12vw, 160px); }
.not-found h1 { font-size: clamp(2.25rem, 5vw, 3.5rem); font-weight: 700; letter-spacing: -0.035em; }
.not-found p { margin-top: 14px; color: var(--text-2); font-size: 1.125rem; }

/* Responsive ------------------------------------------------------------------ */

@media (max-width: 960px) {
  .features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stage__front { width: 72%; }
  .stage__back { width: 46%; }
}

@media (max-width: 760px) {
  .projects { grid-template-columns: 1fr; }
  .project-card { min-height: 0; }
  .project-card__shots { flex: none; min-height: 0; height: min(58vw, 300px); }
  .project-card__shots .shot--front { width: 78%; left: 4%; }
  .project-card__shots .shot--back { width: 70%; right: -14%; }
  .projects--pair .project-card { min-height: 0; }
  .projects--pair .project-card__shots .shot--front { top: 34px; width: 78%; left: 4%; }
  .projects--pair .project-card__shots .shot--back { top: 14px; width: 70%; right: -14%; }
  .project-card__desk { flex: none; min-height: 0; height: min(58vw, 300px); }
  .desk__page { left: 4%; width: 36%; }
  .desk__window { top: 44px; left: 24%; width: 96%; }

  /* Phones: the foreground window alone, as wide as possible; the other
     states stay one tap away in the tabs. */
  .stage { width: calc(100% - 24px); }
  .stage__back { display: none; }
  .stage__front { width: 100%; }
  .stage__state--edit { width: 100%; margin-left: 0; }
}

@media (max-width: 560px) {
  .features { grid-template-columns: 1fr; }
  .project-card__head { gap: 14px; }
  .project-card__icon { width: 72px; }
  .project-card__go { display: none; }
  .showcase__tabs { gap: 0; flex-wrap: nowrap; }
  .showcase__tab { padding: 0 7px; font-size: 0.9375rem; white-space: nowrap; }
  .showcase__tab::after { left: 7px; right: 7px; }
  .theme-switch__option { width: 34px; }
  .bk-hero__headline span { display: block; }
}

@media (max-width: 340px) {
  .showcase__tabs { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  a.project-card:hover,
  a.project-card:hover .project-card__shots .shot--front,
  a.project-card:hover .project-card__go,
  a.project-card:hover .desk__window { transform: none; }
}

@media print {
  .site-header .theme-switch, .consent, .showcase__tabs { display: none !important; }
}


/* StillLane product page ------------------------------------------------------
   The site's vertical rhythm (--space-*, see :root): the decision cluster
   (hero → offers → formats) is spaced by --space-cluster, the sections after it
   by --space-section. Each section sets only its top spacing. */
:root {
  /* macOS window corners in the captures (2562 × 1344) were flattened onto
     white by the capture API. A 52px source-pixel circle (measured: white
     reaches 38px along the top edge) masks them at any display size. */
  --sl-window-radius: 2.03% / 3.87%;
}

.sl-hero { padding-top: clamp(20px, 3vw, 36px); text-align: center; }
.sl-hero__id { display: inline-flex; align-items: center; gap: 14px; text-align: left; }
.sl-hero__icon { width: 68px; height: 68px; }
.sl-hero__name { font-size: 1.5rem; line-height: 1.1; letter-spacing: -0.02em; }
.sl-hero__platform { margin-top: 3px; color: var(--text-2); font-size: 0.9375rem; }
.sl-hero__headline {
  margin-top: clamp(20px, 2.2vw, 28px);
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 5.6vw, 4.5rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.045em;
}
.sl-hero__headline span { display: inline-block; }
.sl-hero__lede {
  max-width: 40rem;
  margin: 16px auto 0;
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  line-height: 1.5;
  color: var(--text-2);
  text-wrap: balance;
}

/* Two offers on one tray: the trial is lifted out of it as the primary
   action; the license rests on the tray. Rows are shared (subgrid), so the
   buttons line up whatever the text length in either language. */
.sl-offers { padding-top: var(--space-cluster); }
.sl-offers__pair {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  grid-template-rows: repeat(5, auto);
  column-gap: 8px;
  max-width: 880px;
  margin-inline: auto;
  padding: 8px;
  border-radius: 30px;
  background: var(--surface);
  box-shadow: var(--card-shadow);
}
.sl-offer {
  display: grid;
  grid-row: span 5;
  grid-template-rows: subgrid;
  align-content: start;
  padding: 26px 28px 24px;
  border-radius: 22px;
  text-align: left;
}
.sl-offer--trial {
  background: var(--surface-hi);
  box-shadow: inset 0 1px 0 var(--glow), 0 0 0 1px var(--line), 0 1px 2px rgba(30, 24, 16, 0.08), 0 10px 24px -14px rgba(30, 24, 16, 0.35);
}
.sl-offer h2 { grid-row: 1; font-size: 1.3125rem; font-weight: 650; line-height: 1.2; letter-spacing: -0.02em; }
.sl-offer__text { grid-row: 2; margin-top: 6px; color: var(--text-2); font-size: 0.9375rem; line-height: 1.45; }
.sl-offer__action, .sl-offer .sl-buy { grid-row: 3; align-self: start; width: 100%; margin-top: 20px; }
.sl-offer__action { min-height: 52px; border-radius: 14px; font-size: 1rem; }
.sl-offer__action:disabled { opacity: 0.5; cursor: default; transform: none; }
.sl-offer__glyph { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sl-offer .sl-buy { justify-items: stretch; }
.sl-offer .sl-buy .sl-offer__action { margin-top: 0; }
.sl-offer__pending { grid-row: 4; margin-top: 10px; color: var(--text-3); font-size: 0.875rem; }
.sl-offer__price { grid-row: 4; margin-top: 10px; color: var(--text-2); font-size: 0.9375rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.sl-offer__specs { grid-row: 5; display: grid; gap: 5px; margin: 18px 0 0; padding: 0; list-style: none; color: var(--text-2); font-size: 0.875rem; }
.sl-offer__specs li { display: flex; align-items: baseline; gap: 9px; }
.sl-offer__specs li::before { content: ""; flex: none; width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: 0.55; transform: translateY(-2px); }
.sl-offers__note { margin-top: 16px; text-align: center; color: var(--text-2); font-size: 0.9375rem; text-wrap: balance; }

.sl-formats { padding-top: var(--space-cluster); text-align: center; }
.sl-formats > h2 { font-size: 1.0625rem; font-weight: 650; letter-spacing: -0.01em; }
.sl-formats__groups { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px 40px; margin-top: 16px; }
.sl-formats__group { display: grid; justify-items: center; align-content: start; gap: 8px; }
.sl-formats__group h3 { color: var(--text-3); font-size: 0.8125rem; font-weight: 600; }
.sl-formats__group ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0; padding: 0; list-style: none; }
.sl-formats__group li {
  padding: 5px 10px;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
  background: var(--bg-sunk);
  box-shadow: var(--sunk-shadow);
}
.sl-formats__group li span { font-weight: 500; color: var(--text-3); }
.sl-formats__note { max-width: 42rem; margin: 20px auto 0; color: var(--text-3); font-size: 0.9375rem; line-height: 1.5; text-wrap: balance; }

.sl-section-head h2 { font-size: clamp(1.75rem, 3.2vw, 2.5rem); line-height: 1.12; letter-spacing: -0.035em; }
.sl-section-head p { max-width: 40rem; margin-top: var(--space-head); color: var(--text-2); font-size: clamp(1rem, 1.3vw, 1.125rem); line-height: 1.55; }
.sl-section-head--center { text-align: center; }
.sl-section-head--center p { margin-inline: auto; }

/* Showcase: a segmented control picks one of six scenes; each scene pairs the
   original with its Markdown and then shows the same result in the app. */
.sl-showcase { padding-top: var(--space-section); }
.sl-scene-nav { margin-top: var(--space-content); }
.sl-scene-tabs {
  display: flex;
  gap: 2px;
  overflow-x: auto;
  padding: 4px;
  border-radius: 14px;
  background: var(--bg-sunk);
  box-shadow: var(--sunk-shadow);
  scrollbar-width: none;
}
.sl-scene-tabs a {
  flex: 1 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 10px;
  color: var(--text-2);
  font-size: 0.875rem;
  font-weight: 550;
  text-decoration: none;
  white-space: nowrap;
}
.sl-scene-tabs a:hover { color: var(--text); text-decoration: none; }
.sl-scene-tabs a[aria-current="true"] { color: var(--text); background: var(--surface-hi); box-shadow: var(--control-shadow); }
.sl-scene-controls { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 12px; }
.sl-scene-controls[hidden], .sl-scene[hidden] { display: none; }
.sl-scene-controls p { color: var(--text-2); font-size: 0.875rem; text-align: center; }
.sl-scene-controls button, .sl-panel-bar button, .sl-zoom button {
  min-width: 44px;
  min-height: 40px;
  padding: 0 14px;
  border: 0;
  border-radius: 10px;
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text);
  background: var(--control-bg);
  box-shadow: var(--control-shadow);
  cursor: pointer;
}
/* All six scenes fit in the control on wider screens; arrows are for phones.
   The status stays for screen readers. */
@media (min-width: 761px) {
  .sl-scene-controls { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

.sl-scene { margin-top: 32px; scroll-margin-top: 100px; }
.sl-scene__heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 32px; align-items: baseline; margin-bottom: 24px; }
.sl-scene__heading h3 { font-size: clamp(1.375rem, 2.2vw, 1.75rem); line-height: 1.2; letter-spacing: -0.025em; }
.sl-scene__heading p { color: var(--text-2); line-height: 1.55; }
.sl-comparison { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: 24px; align-items: stretch; }
.sl-original, .sl-result {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--card-shadow);
}
.sl-panel-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 56px;
  padding: 8px 8px 8px 20px;
  border-bottom: 1px solid var(--line);
  font-size: 0.875rem;
  font-weight: 600;
}
.sl-panel-bar small { margin-left: 4px; color: var(--text-3); font-size: 0.8125rem; font-weight: 400; }
.sl-original > a { display: block; flex: 1 1 auto; background: #fff; }
.sl-original img { display: block; width: 100%; height: auto; }
/* The original page sets the row height; the Markdown fills it and scrolls. */
.sl-document {
  flex: 1 1 auto;
  height: 0;
  min-height: 420px;
  overflow: auto;
  padding: 24px 28px;
  background: var(--surface-hi);
  font-size: 0.875rem;
  line-height: 1.65;
  overflow-wrap: anywhere;
}
.sl-document h3 { margin: 0 0 22px; font-size: 1.5rem; line-height: 1.15; letter-spacing: -0.02em; }
.sl-document h4 { margin: 22px 0 14px; font-size: 1.3125rem; line-height: 1.25; }
.sl-document h5 { margin: 22px 0 12px; font-size: 0.8125rem; }
.sl-document p { margin: 14px 0; }
.sl-document hr { margin: 22px 0; border: 0; border-top: 1px solid var(--line-2); }
.sl-document__table { overflow-x: auto; }
.sl-document table { width: 100%; border-collapse: collapse; font-size: 0.75rem; }
.sl-document td, .sl-document th { padding: 9px 7px; border: 1px solid var(--line-2); text-align: left; white-space: normal; }
.sl-document th { background: var(--bg-sunk); font-weight: 600; }
.sl-document .sl-gantt-active { background: #6c8b9a; color: #fff; }
.sl-formula { padding: 16px; white-space: pre-wrap; background: var(--bg-sunk); }
.sl-source { padding: 12px 20px; border-top: 1px solid var(--line); }
.sl-source summary { min-height: 32px; display: flex; align-items: center; cursor: pointer; font-size: 0.875rem; font-weight: 600; }
.sl-source summary::-webkit-details-marker { display: none; }
.sl-source summary::before { content: ""; width: 6px; height: 6px; margin: 0 10px 0 2px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(-45deg); transition: transform 160ms var(--ease); }
.sl-source[open] summary::before { transform: rotate(45deg); }
.sl-source pre { max-height: 380px; margin-top: 10px; overflow: auto; font-size: 0.75rem; white-space: pre; }

/* The real app window, as part of the scene. */
.sl-app { max-width: 980px; margin: 40px auto 0; }
.sl-app > a { display: block; border-radius: var(--sl-window-radius); box-shadow: var(--window-shadow); }
.sl-app__shot { display: block; width: 100%; height: auto; border-radius: var(--sl-window-radius); }
.sl-app figcaption { margin-top: 14px; text-align: center; color: var(--text-3); font-size: 0.875rem; }
.sl-showcase__note { max-width: 48rem; margin: 32px auto 0; text-align: center; color: var(--text-3); font-size: 0.875rem; line-height: 1.6; }

/* Real app screens: a plain horizontal strip that snaps to each window; the
   next one peeks in. One strip per appearance, the other hidden (and so never
   loaded). The captures keep the window's own transparent corners, so the
   shadow follows them (drop-shadow) and no mask is needed. */
.sl-review { padding-top: var(--space-section); }
.sl-review__strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(860px, 86%);
  gap: clamp(16px, 2.5vw, 32px);
  margin-top: var(--space-content);
  padding: 8px 4px 36px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 4px;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.sl-review__strip::-webkit-scrollbar { display: none; }
.sl-review__strip:focus-visible { outline-offset: -3px; border-radius: 12px; }
.sl-review__strip--dark { display: none; }
:root[data-theme="dark"] .sl-review__strip--light { display: none; }
:root[data-theme="dark"] .sl-review__strip--dark { display: grid; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sl-review__strip--light { display: none; }
  :root:not([data-theme="light"]) .sl-review__strip--dark { display: grid; }
}
.sl-review__slide { display: block; scroll-snap-align: start; cursor: zoom-in; }
.sl-review__shot { display: block; width: 100%; height: auto; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.16)) drop-shadow(0 16px 26px rgba(0, 0, 0, 0.2)); }
.sl-review__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.sl-review__credit { color: var(--text-3); font-size: 0.8125rem; line-height: 1.5; }
.sl-review__buttons { display: flex; gap: 8px; flex: none; }
.sl-review__buttons[hidden] { display: none; }
.sl-review__buttons button {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 999px;
  font: inherit;
  color: var(--text);
  background: var(--control-bg);
  box-shadow: var(--control-shadow);
  cursor: pointer;
}
.sl-review__buttons button:disabled { opacity: 0.4; cursor: default; }

.sl-zoom { width: min(1240px, 96vw); max-height: 94dvh; padding: 16px; color: var(--text); background: var(--surface); border: 1px solid var(--line-2); border-radius: 18px; box-shadow: var(--window-shadow); }
.sl-zoom::backdrop { background: rgba(0, 0, 0, 0.7); }
/* The frame and backdrop close the view (stilllane-showcase.js); the content does not. */
.sl-zoom { cursor: zoom-out; }
.sl-zoom [data-zoom-content] > *, .sl-zoom button { cursor: auto; }
.sl-zoom button { cursor: pointer; }
.sl-zoom__toolbar { position: sticky; top: 0; z-index: 1; display: flex; justify-content: flex-end; margin-bottom: 12px; }
.sl-zoom img { display: block; width: 100%; height: auto; }
.sl-document--zoom { height: auto; min-height: 50vh; padding: clamp(16px, 4vw, 64px); font-size: 1.125rem; }
.sl-document--zoom table { font-size: 1rem; }

.sl-workflow { padding-top: var(--space-section); }
.sl-workflow__steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin: var(--space-content) 0 0; padding: 0; list-style: none; counter-reset: workflow; }
.sl-workflow__steps li { padding-top: 16px; border-top: 1px solid var(--line-2); counter-increment: workflow; }
.sl-workflow__steps h3 { display: flex; align-items: center; gap: 10px; font-size: 1.125rem; letter-spacing: -0.01em; }
.sl-workflow__steps h3::before {
  content: counter(workflow);
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: var(--text-2);
  background: var(--bg-sunk);
  box-shadow: var(--sunk-shadow);
  font-size: 0.75rem;
  font-weight: 600;
}
.sl-workflow__steps p { margin-top: 10px; color: var(--text-2); font-size: 0.9375rem; line-height: 1.55; }


/* Privacy: the reason to choose StillLane, right after the decision cluster.
   Four plain facts on one sunk tray; the network note stays precise below. */
.sl-privacy { padding-top: var(--space-section); text-align: center; }
.sl-privacy > h2 { font-size: clamp(1.75rem, 3.2vw, 2.5rem); line-height: 1.12; letter-spacing: -0.035em; text-wrap: balance; }
.sl-privacy__items {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: var(--space-content) 0 0;
  padding: 8px;
  list-style: none;
  border-radius: 24px;
  background: var(--bg-sunk);
  box-shadow: var(--sunk-shadow);
  text-align: left;
}
.sl-privacy__items li { padding: 20px 22px 22px; }
.sl-privacy__items li + li { border-left: 1px solid var(--line); }
.sl-privacy__items h3 { font-size: 1.0625rem; letter-spacing: -0.01em; }
.sl-privacy__items p { margin-top: 8px; color: var(--text-2); font-size: 0.9375rem; line-height: 1.5; }
.sl-privacy__note { max-width: 42rem; margin: 16px auto 0; color: var(--text-3); font-size: 0.875rem; line-height: 1.5; text-wrap: balance; }

/* License and questions: one shared two-part grid. The license rests on a
   card, the questions on the page, with the same insets, so their headings and
   item columns line up; four items each, in two columns on wide screens. */
.sl-closing { display: grid; gap: clamp(24px, 3vw, 40px); padding-block: var(--space-section); }
.sl-split {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 24px clamp(32px, 4vw, 56px);
  padding: clamp(24px, 3vw, 36px);
}
.sl-terms { border-radius: 24px; background: var(--surface); box-shadow: var(--card-shadow); }
.sl-split__head h2 { font-size: 1.375rem; line-height: 1.2; letter-spacing: -0.02em; }
.sl-split__head p { margin-top: 10px; color: var(--text-2); font-size: 0.9375rem; line-height: 1.5; }
.sl-split__items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px clamp(24px, 3vw, 40px); margin: 0; padding: 0; list-style: none; }
.sl-split__items > * { padding-top: 14px; border-top: 1px solid var(--line-2); }
.sl-split__items h3 { font-size: 1rem; line-height: 1.35; letter-spacing: -0.01em; }
.sl-split__items h3 + p { margin-top: 6px; }
.sl-split__items p { color: var(--text-2); font-size: 0.9375rem; line-height: 1.55; }

@media (max-width: 960px) {
  .sl-workflow__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sl-privacy__items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sl-privacy__items li:nth-child(3) { border-left: 0; }
  .sl-privacy__items li:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .sl-split { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .sl-offers__pair { grid-template-columns: 1fr; grid-template-rows: none; row-gap: 8px; }
  .sl-offer { display: flex; flex-direction: column; grid-row: auto; padding: 22px 20px 20px; }
  .sl-offer__action, .sl-offer .sl-buy { margin-top: 18px; }
  .sl-scene__heading, .sl-comparison { grid-template-columns: 1fr; gap: 12px; }
  .sl-comparison { gap: 16px; }
  .sl-panel-bar small { display: block; margin: 2px 0 0; font-size: 0.75rem; }
  .sl-document { flex: none; height: 480px; min-height: 0; padding: 20px; }
  .sl-app { margin-top: 28px; }
  .sl-privacy__items { grid-template-columns: 1fr; }
  .sl-privacy__items li + li { border-left: 0; border-top: 1px solid var(--line); }
  .sl-privacy__items li { padding: 18px 16px 20px; }
  .sl-split__items { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .sl-hero__icon { width: 56px; height: 56px; }
  .sl-hero__name { font-size: 1.3125rem; }
  .sl-hero__headline { font-size: clamp(2rem, 9.2vw, 2.5rem); }
  .sl-hero__headline span { display: block; }
  .sl-hero__lede { font-size: 1.0625rem; }
  .sl-offers__pair { padding: 6px; border-radius: 26px; }
  .sl-workflow__steps { grid-template-columns: 1fr; gap: 24px; }
  .sl-split { padding: 22px 20px; }
  .sl-faq { padding-inline: 0; }
}
@media (prefers-reduced-motion: reduce) { .sl-showcase *, .sl-zoom * { scroll-behavior: auto; transition: none; animation: none; } }