:root {
  color-scheme: light dark;
  --paper: #f5f5f7;
  --surface: #ffffff;
  --surface-soft: #fbfbfd;
  --ink: #1d1d1f;
  --muted: #5d6570;
  --line: #d6d6dc;
  --teal: #078a8b;
  --blue: #0071e3;
  --navy: #1d1d1f;
  --deep: #111114;
  --glow: rgba(0, 113, 227, 0.12);
  --shadow: 0 18px 48px rgba(0, 0, 0, 0.09);
  --radius: 8px;
}

:root[data-theme="light"] {
  color-scheme: light;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #000000;
  --surface: #111114;
  --surface-soft: #1c1c1e;
  --ink: #f5f5f7;
  --muted: #a1a1a6;
  --line: rgba(255, 255, 255, 0.16);
  --glow: rgba(0, 113, 227, 0.24);
}

:root[data-vibe="vice-city"] {
  --paper: #edf5f7;
  --surface: #fbfdff;
  --surface-soft: #dff0f3;
  --ink: #243044;
  --muted: #657184;
  --line: rgba(81, 135, 153, 0.24);
  --teal: #70b9c7;
  --blue: #4fa7c7;
  --navy: #243044;
  --deep: #1e2d3d;
  --glow: rgba(79, 167, 199, 0.2);
  --shadow: 0 22px 62px rgba(48, 95, 112, 0.14);
}

:root[data-vibe="vice-city"][data-theme="dark"] {
  --paper: #050608;
  --surface: #111419;
  --surface-soft: #191d23;
  --ink: #f5f7fa;
  --muted: #b6bec8;
  --line: rgba(255, 255, 255, 0.16);
  --teal: #9fd0d8;
  --blue: #8bc8de;
  --navy: #f4fbff;
  --deep: #020304;
  --glow: rgba(139, 200, 222, 0.24);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  width: 100%;
  max-width: 100%;
}

body {
  margin: 0;
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  background: var(--paper);
  color: var(--ink);
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.6;
}

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

a {
  color: inherit;
}

.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;
}

:focus-visible {
  outline: 3px solid rgba(0, 118, 189, 0.55);
  outline-offset: 4px;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  width: 100%;
  max-width: 100vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 82px;
  padding: 14px clamp(18px, 5vw, 72px);
  background: rgba(245, 245, 247, 0.82);
  border-bottom: 1px solid rgba(214, 214, 220, 0.62);
  backdrop-filter: saturate(180%) blur(20px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  color: var(--ink);
  font-size: 1.6rem;
  font-weight: 800;
  text-decoration: none;
}

.brand img {
  width: 50px;
  height: 50px;
  margin-inline: 1px;
  object-fit: none;
  object-position: -20px -20px;
  transform: scale(1.024);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(15px, 2.4vw, 32px);
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 740;
}

.site-nav a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--ink);
}

.nav-toggle {
  display: none;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.theme-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 5%, var(--surface));
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  backdrop-filter: saturate(180%) blur(18px);
}

.settings-menu {
  position: relative;
  flex: 0 0 auto;
}

.settings-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  min-height: 38px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 0;
  font-weight: 780;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  backdrop-filter: saturate(180%) blur(18px);
}

.settings-button::before {
  content: "";
  width: 15px;
  height: 15px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12.22%202h-.44a2%202%200%200%200-2%202v.18a2%202%200%200%201-1%201.73l-.43.25a2%202%200%200%201-2%200l-.15-.08a2%202%200%200%200-2.73.73l-.22.38a2%202%200%200%200%20.73%202.73l.15.1a2%202%200%200%201%201%201.72v.51a2%202%200%200%201-1%201.74l-.15.09a2%202%200%200%200-.73%202.73l.22.38a2%202%200%200%200%202.73.73l.15-.08a2%202%200%200%201%202%200l.43.25a2%202%200%200%201%201%201.73V20a2%202%200%200%200%202%202h.44a2%202%200%200%200%202-2v-.18a2%202%200%200%201%201-1.73l.43-.25a2%202%200%200%201%202%200l.15.08a2%202%200%200%200%202.73-.73l.22-.39a2%202%200%200%200-.73-2.73l-.15-.08a2%202%200%200%201-1-1.74v-.5a2%202%200%200%201%201-1.74l.15-.09a2%202%200%200%200%20.73-2.73l-.22-.38a2%202%200%200%200-2.73-.73l-.15.08a2%202%200%200%201-2%200l-.43-.25a2%202%200%200%201-1-1.73V4a2%202%200%200%200-2-2z'/%3E%3Ccircle%20cx='12'%20cy='12'%20r='3'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12.22%202h-.44a2%202%200%200%200-2%202v.18a2%202%200%200%201-1%201.73l-.43.25a2%202%200%200%201-2%200l-.15-.08a2%202%200%200%200-2.73.73l-.22.38a2%202%200%200%200%20.73%202.73l.15.1a2%202%200%200%201%201%201.72v.51a2%202%200%200%201-1%201.74l-.15.09a2%202%200%200%200-.73%202.73l.22.38a2%202%200%200%200%202.73.73l.15-.08a2%202%200%200%201%202%200l.43.25a2%202%200%200%201%201%201.73V20a2%202%200%200%200%202%202h.44a2%202%200%200%200%202-2v-.18a2%202%200%200%201%201-1.73l.43-.25a2%202%200%200%201%202%200l.15.08a2%202%200%200%200%202.73-.73l.22-.39a2%202%200%200%200-.73-2.73l-.15-.08a2%202%200%200%201-1-1.74v-.5a2%202%200%200%201%201-1.74l.15-.09a2%202%200%200%200%20.73-2.73l-.22-.38a2%202%200%200%200-2.73-.73l-.15.08a2%202%200%200%201-2%200l-.43-.25a2%202%200%200%201-1-1.73V4a2%202%200%200%200-2-2z'/%3E%3Ccircle%20cx='12'%20cy='12'%20r='3'/%3E%3C/svg%3E") center / contain no-repeat;
}

.settings-panel {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  z-index: 30;
  display: none;
  width: min(360px, calc(100vw - 28px));
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.settings-panel.is-open {
  display: grid;
  gap: 18px;
}

.panel-title {
  color: var(--ink);
  font-weight: 820;
}

.panel-group {
  display: grid;
  gap: 8px;
}

.panel-group > span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 780;
}

.segmented-control {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  width: fit-content;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 5%, var(--surface));
}

.segmented-control.wide {
  width: 100%;
}

.segmented-control button {
  min-height: 34px;
  padding: 0 11px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 780;
  cursor: pointer;
}

.segmented-control.wide button {
  flex: 1;
}

.segmented-control button[aria-pressed="true"] {
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.14);
}

.theme-switch button,
.segmented-control[aria-label="Color mode"] button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0;
  font-weight: 760;
  cursor: pointer;
  transition: background 180ms ease, color 180ms ease;
}

.theme-switch button::before,
.segmented-control[aria-label="Color mode"] button::before {
  content: "";
  width: 16px;
  height: 16px;
  background: currentColor;
}

.theme-switch button[data-theme-choice="light"]::before,
.segmented-control[aria-label="Color mode"] button[data-theme-choice="light"]::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='4'/%3E%3Cpath%20d='M12%203v2M12%2019v2M3%2012h2M19%2012h2M5.64%205.64l1.41%201.41M16.95%2016.95l1.41%201.41M5.64%2018.36l1.41-1.41M16.95%207.05l1.41-1.41'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='4'/%3E%3Cpath%20d='M12%203v2M12%2019v2M3%2012h2M19%2012h2M5.64%205.64l1.41%201.41M16.95%2016.95l1.41%201.41M5.64%2018.36l1.41-1.41M16.95%207.05l1.41-1.41'/%3E%3C/svg%3E") center / contain no-repeat;
}

.theme-switch button[data-theme-choice="dark"]::before,
.segmented-control[aria-label="Color mode"] button[data-theme-choice="dark"]::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M21%2012.79A9%209%200%201%201%2011.21%203%207%207%200%200%200%2021%2012.79z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M21%2012.79A9%209%200%201%201%2011.21%203%207%207%200%200%200%2021%2012.79z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.theme-switch button[data-theme-choice="system"]::before,
.segmented-control[aria-label="Color mode"] button[data-theme-choice="system"]::before {
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3'%20y='4.5'%20width='18'%20height='12'%20rx='2.5'/%3E%3Cpath%20d='M12%2016.5v3M8.5%2019.5h7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3'%20y='4.5'%20width='18'%20height='12'%20rx='2.5'/%3E%3Cpath%20d='M12%2016.5v3M8.5%2019.5h7'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* The panel is the only mode control on touch, so give it a larger target
   and match the height of the Theme control sitting below it. */
.segmented-control[aria-label="Color mode"] button {
  width: 34px;
  height: 34px;
  min-height: 34px;
}

.theme-switch button:hover,
.segmented-control[aria-label="Color mode"] button:hover {
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  color: var(--ink);
}

.theme-switch button[aria-pressed="true"],
.segmented-control[aria-label="Color mode"] button[aria-pressed="true"] {
  background: var(--surface);
  color: var(--ink);
  box-shadow:
    0 0 0 0.5px rgba(0, 0, 0, 0.05),
    0 1px 2.5px rgba(0, 0, 0, 0.11);
}

h1,
h2,
h3,
p {
  overflow-wrap: anywhere;
}

h1,
h2,
h3 {
  margin: 0;
  color: var(--ink);
  line-height: 1.06;
  letter-spacing: 0;
}

h1 {
  max-width: 680px;
  font-size: clamp(2.45rem, 4.8vw, 4.45rem);
}

.studio-hero h1 {
  max-width: none;
  white-space: nowrap;
  font-size: clamp(1.2rem, 6.5vw, 3.2rem);
}

.studio-hero h1 .typed-character {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.18em);
}

.studio-hero h1.is-typing .typed-character {
  animation: type-character 260ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(180ms + (var(--character-index) * 38ms));
}

@keyframes type-character {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

h2 {
  font-size: clamp(1.75rem, 3vw, 2.85rem);
}

h3 {
  font-size: 1.2rem;
}

p {
  margin: 0;
}

.quiet-label {
  margin: 0 0 14px;
  color: var(--blue);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.mini-label {
  margin: 0 0 4px;
  color: var(--blue);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.lede {
  max-width: 680px;
  margin-top: 22px;
  color: var(--muted);
  font-size: clamp(1.16rem, 2vw, 1.42rem);
  line-height: 1.52;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 13px 19px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-size: 0.96rem;
  font-weight: 840;
  text-decoration: none;
}

.button.primary {
  background: var(--blue);
  color: #ffffff;
  box-shadow: 0 12px 28px rgba(0, 113, 227, 0.18);
}

.button.primary:hover {
  background: #056aa4;
  transform: translateY(-2px);
}

.button.secondary {
  border-color: rgba(7, 46, 69, 0.24);
  background: rgba(255, 255, 255, 0.62);
  color: var(--navy);
}

.button.secondary:hover {
  border-color: rgba(7, 46, 69, 0.48);
  transform: translateY(-2px);
}

.button {
  transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.text-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--blue);
  font-weight: 840;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

.text-link.inline-copy-link {
  display: inline;
  min-height: 0;
}

.hero-actions,
.inline-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 34px;
}

.studio-hero {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 100vw;
  min-height: auto;
  display: grid;
  grid-template-columns: minmax(0, 780px);
  gap: 0;
  align-items: center;
  padding: clamp(72px, 8vw, 112px) clamp(20px, 6vw, 86px) clamp(60px, 7vw, 96px);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(245, 245, 247, 0.96)),
    radial-gradient(circle at 88% 20%, var(--glow), transparent 32%);
}

:root[data-vibe="vice-city"] .studio-hero {
  min-height: clamp(500px, 68svh, 640px);
  background:
    linear-gradient(90deg, rgba(244, 251, 253, 0.78), rgba(244, 251, 253, 0.5) 42%, rgba(244, 251, 253, 0.12)),
    linear-gradient(180deg, rgba(36, 48, 68, 0.03), rgba(79, 167, 199, 0.08)),
    url("assets/vice-city-wallpaper.png") center bottom / cover no-repeat;
}

:root[data-vibe="vice-city"] .studio-hero::before,
:root[data-vibe="vice-city"] .studio-hero::after {
  display: none;
}

:root[data-vibe="vice-city"] .button.primary {
  background: linear-gradient(135deg, #4fa7c7, #8c8fd6);
  box-shadow: 0 14px 30px rgba(79, 167, 199, 0.22);
}

:root[data-vibe="vice-city"] .quiet-label,
:root[data-vibe="vice-city"] .mini-label,
:root[data-vibe="vice-city"] .text-link {
  color: #367f9f;
}

:root[data-vibe="vice-city"][data-theme="dark"] .quiet-label,
:root[data-vibe="vice-city"][data-theme="dark"] .mini-label,
:root[data-vibe="vice-city"][data-theme="dark"] .text-link {
  color: #a9dce8;
}

.hero-product {
  position: relative;
  min-height: 560px;
}

.product-card {
  position: absolute;
  left: 0;
  top: 8%;
  z-index: 2;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 20px;
  max-width: 430px;
  min-width: 0;
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}

.product-card > div {
  min-width: 0;
}

.product-card .app-icon {
  width: 92px;
  border-radius: 22px;
  box-shadow: 0 14px 30px rgba(0, 118, 189, 0.18);
}

.product-card h2 {
  font-size: 2rem;
}

.product-card p {
  color: var(--muted);
  font-size: 0.98rem;
  line-height: 1.48;
}

.hero-device {
  position: absolute;
  right: min(2vw, 18px);
  bottom: -10px;
  width: min(72%, 430px);
  filter: drop-shadow(0 30px 60px rgba(7, 46, 69, 0.22));
}

.section {
  padding: clamp(68px, 9vw, 126px) clamp(20px, 6vw, 86px);
}

section[id] {
  scroll-margin-top: 78px;
}

.product-feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.78fr);
  gap: clamp(34px, 6vw, 76px);
  align-items: center;
  background: var(--surface);
}

.feature-media {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #dcecf1;
  box-shadow: var(--shadow);
}

.feature-media img {
  width: 100%;
  transition: transform 1100ms cubic-bezier(0.22, 1, 0.36, 1);
}

.motion-ready .reveal-on-scroll {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

.motion-ready .reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
  will-change: auto;
}

.motion-ready .feature-media.reveal-on-scroll img {
  transform: scale(1.035);
}

.motion-ready .feature-media.reveal-on-scroll.is-visible img {
  transform: scale(1);
}

.feature-copy p:not(.quiet-label),
.copy-block p,
.content-card p,
.contact-panel p {
  margin-top: 18px;
  color: var(--muted);
}

.build-list {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(34px, 7vw, 90px);
  background: var(--surface-soft);
}

:root[data-vibe="vice-city"] .build-list {
  background: #dff0f3;
}

:root[data-vibe="vice-city"][data-theme="dark"] .build-list {
  background: #080b0f;
}

.build-items {
  display: grid;
  gap: 22px;
}

.build-items article {
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}

.build-items article:last-child {
  border-bottom: 0;
}

.build-items p,
.about-strip p,
.invitation p {
  margin-top: 14px;
  color: var(--muted);
}

.single-page-section {
  background: var(--paper);
}

.section-intro {
  max-width: 820px;
  margin-bottom: clamp(38px, 6vw, 68px);
}

.section-intro p:not(.quiet-label) {
  max-width: 760px;
  margin-top: 20px;
  color: var(--muted);
  font-size: 1.18rem;
}

.capability-grid,
.about-grid {
  display: grid;
  gap: 24px clamp(28px, 5vw, 64px);
}

.capability-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.about-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.capability-grid article,
.about-grid article {
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.capability-grid p,
.about-grid p {
  margin-top: 12px;
  color: var(--muted);
}

.about-section {
  background: var(--surface-soft);
}

.invitation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  background: var(--deep);
  color: #ffffff;
}

:root[data-vibe="vice-city"] .invitation {
  background:
    linear-gradient(90deg, rgba(246, 252, 255, 0.94) 0%, rgba(246, 252, 255, 0.9) 48%, rgba(246, 252, 255, 0.58) 68%, rgba(246, 252, 255, 0.12) 100%),
    url("assets/vice-city-lower-wallpaper.png") center bottom / cover no-repeat;
  color: var(--ink);
}

.invitation h2,
.page-hero.dark h1,
.page-hero.dark p,
.invitation .quiet-label {
  color: #ffffff;
}

.invitation p {
  max-width: 680px;
  color: rgba(255, 255, 255, 0.76);
  font-size: 1.2rem;
}

:root[data-vibe="vice-city"] .invitation h2,
:root[data-vibe="vice-city"] .invitation .quiet-label {
  color: #243044;
}

:root[data-vibe="vice-city"] .invitation p {
  color: #35465b;
}

.about-strip {
  max-width: 1020px;
}

.about-strip p {
  max-width: 790px;
  font-size: 1.22rem;
}

.page-hero {
  padding: clamp(68px, 10vw, 126px) clamp(20px, 6vw, 86px);
  background: linear-gradient(135deg, var(--paper), var(--surface-soft));
}

.page-hero.dark {
  background:
    linear-gradient(135deg, rgba(17, 17, 20, 0.97), rgba(31, 37, 46, 0.96)),
    radial-gradient(circle at 84% 20%, var(--glow), transparent 32%);
  color: #ffffff;
}

:root[data-vibe="vice-city"] .page-hero {
  background:
    linear-gradient(90deg, rgba(255, 248, 251, 0.84), rgba(255, 248, 251, 0.52)),
    url("assets/vice-city-wallpaper.png") center / cover no-repeat;
}

:root[data-vibe="vice-city"] .page-hero.dark {
  background:
    linear-gradient(90deg, rgba(21, 13, 28, 0.82), rgba(21, 13, 28, 0.54)),
    url("assets/vice-city-wallpaper.png") center / cover no-repeat;
}

.page-hero p:not(.quiet-label) {
  max-width: 760px;
  margin-top: 22px;
  color: var(--muted);
  font-size: 1.24rem;
}

.page-hero.dark p:not(.quiet-label) {
  color: rgba(255, 255, 255, 0.78);
}

.content-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.content-card {
  padding: clamp(24px, 4vw, 36px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.content-card.wide {
  grid-column: 1 / -1;
}

.product-detail {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(320px, 1.05fr);
  gap: clamp(34px, 7vw, 86px);
  align-items: center;
  background: var(--surface);
}

.product-detail .app-icon {
  width: 112px;
  border-radius: 26px;
  box-shadow: 0 18px 34px rgba(0, 118, 189, 0.22);
}

.product-detail figure {
  margin: 0;
}

.product-detail figure img {
  max-height: 660px;
  margin-inline: auto;
  object-fit: contain;
  filter: drop-shadow(0 30px 70px rgba(6, 31, 43, 0.2));
}

.simple-list {
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  color: var(--muted);
}

.simple-list li {
  padding: 12px 0;
  border-top: 1px solid var(--line);
}

.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(320px, 1.1fr);
  gap: clamp(28px, 6vw, 72px);
  align-items: start;
}

.contact-panel {
  padding: clamp(26px, 5vw, 44px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
}

.contact-panel + .contact-panel {
  margin-top: 18px;
}

.site-footer {
  display: grid;
  grid-template-columns: minmax(190px, 0.8fr) minmax(0, 1.4fr);
  gap: 24px;
  padding: 38px clamp(20px, 6vw, 86px);
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.94rem;
}

.site-footer strong,
.site-footer span {
  display: block;
}

.site-footer strong {
  color: var(--ink);
}

.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  justify-content: flex-end;
}

.site-footer a {
  color: var(--ink);
  font-weight: 760;
  text-decoration: none;
}

.site-footer a:hover {
  text-decoration: underline;
  text-underline-offset: 5px;
}

.site-footer p {
  grid-column: 1 / -1;
}

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

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #000000;
    --surface: #111114;
    --surface-soft: #1c1c1e;
    --ink: #eef8fb;
    --muted: #a1a1a6;
    --line: rgba(255, 255, 255, 0.16);
    --glow: rgba(0, 113, 227, 0.24);
  }

  :root[data-vibe="vice-city"]:not([data-theme="light"]) {
    --paper: #050608;
    --surface: #111419;
    --surface-soft: #191d23;
    --ink: #f5f7fa;
    --muted: #b6bec8;
    --line: rgba(255, 255, 255, 0.16);
    --teal: #9fd0d8;
    --blue: #8bc8de;
    --navy: #f4fbff;
    --deep: #020304;
    --glow: rgba(139, 200, 222, 0.24);
    --shadow: 0 22px 62px rgba(0, 0, 0, 0.38);
  }

  :root[data-vibe="vice-city"]:not([data-theme="light"]) .build-list {
    background: #080b0f;
  }

  :root:not([data-theme="light"]) .site-header {
    background: rgba(0, 0, 0, 0.78);
    border-bottom-color: rgba(255, 255, 255, 0.14);
  }

  :root[data-vibe="vice-city"]:not([data-theme="light"]) .site-header {
    background: rgba(5, 6, 8, 0.9);
  }

  :root:not([data-theme="light"]) .button.secondary {
    border-color: rgba(255, 255, 255, 0.26);
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
  }

  :root:not([data-theme="light"]) .studio-hero,
  :root:not([data-theme="light"]) .page-hero {
    background:
      linear-gradient(135deg, rgba(0, 0, 0, 0.98), rgba(28, 28, 30, 0.94)),
      radial-gradient(circle at 84% 20%, var(--glow), transparent 34%);
  }

  :root[data-vibe="vice-city"]:not([data-theme="light"]) .studio-hero,
  :root[data-vibe="vice-city"]:not([data-theme="light"]) .page-hero {
    background:
      linear-gradient(90deg, rgba(5, 6, 8, 0.7), rgba(5, 6, 8, 0.42) 48%, rgba(5, 6, 8, 0.16)),
      linear-gradient(180deg, rgba(5, 6, 8, 0.06), rgba(5, 6, 8, 0.2)),
      url("assets/vice-city-wallpaper.png") center bottom / cover no-repeat;
  }

  :root:not([data-theme="light"]) .product-card {
    border-color: rgba(255, 255, 255, 0.16);
    background: rgba(17, 17, 20, 0.8);
  }

  :root:not([data-theme="light"]) .feature-media {
    background: #111114;
  }

  :root[data-vibe="vice-city"]:not([data-theme="light"]) .product-card {
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(17, 20, 25, 0.88);
  }

  :root[data-vibe="vice-city"]:not([data-theme="light"]) .feature-media {
    background: #171c22;
  }
}

:root[data-theme="dark"] .site-header {
  background: rgba(0, 0, 0, 0.78);
  border-bottom-color: rgba(255, 255, 255, 0.14);
}

:root[data-vibe="vice-city"][data-theme="dark"] .site-header {
  background: rgba(5, 6, 8, 0.9);
}

:root[data-theme="dark"] .button.secondary {
  border-color: rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
}

:root[data-theme="dark"] .studio-hero,
:root[data-theme="dark"] .page-hero {
  background:
    linear-gradient(135deg, rgba(0, 0, 0, 0.98), rgba(28, 28, 30, 0.94)),
    radial-gradient(circle at 86% 18%, var(--glow), transparent 32%);
}

:root[data-vibe="vice-city"][data-theme="dark"] .studio-hero,
:root[data-vibe="vice-city"][data-theme="dark"] .page-hero {
  background:
    linear-gradient(90deg, rgba(5, 6, 8, 0.7), rgba(5, 6, 8, 0.42) 48%, rgba(5, 6, 8, 0.16)),
    linear-gradient(180deg, rgba(5, 6, 8, 0.06), rgba(5, 6, 8, 0.2)),
    url("assets/vice-city-wallpaper.png") center bottom / cover no-repeat;
}

:root[data-vibe="vice-city"][data-theme="dark"] .product-card {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(17, 20, 25, 0.88);
}

:root[data-vibe="vice-city"][data-theme="dark"] .feature-media {
  background: #171c22;
}

:root[data-theme="dark"] .product-card {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(17, 17, 20, 0.8);
}

:root[data-theme="dark"] .feature-media {
  background: #111114;
}

/* Apple Core: continuously cycling color wash behind the header and hero.
   Reproduces the looping gradient at the top of captions.ai in pure CSS, following
   the same peach -> amber -> lavender -> cyan journey. Vice City opts out through
   the existing .studio-hero::before reset above. */
@property --tc-wash-1 {
  syntax: "<color>";
  inherits: false;
  initial-value: #ffc9a8;
}

@property --tc-wash-2 {
  syntax: "<color>";
  inherits: false;
  initial-value: #ffb3cd;
}

@property --tc-wash-3 {
  syntax: "<color>";
  inherits: false;
  initial-value: #9ec2fa;
}

@property --tc-wash-4 {
  syntax: "<color>";
  inherits: false;
  initial-value: #8fdde2;
}

:root:not([data-vibe="vice-city"]) .studio-hero {
  overflow: visible;
}

:root:not([data-vibe="vice-city"]) .hero-copy-block {
  position: relative;
  z-index: 1;
}

:root:not([data-vibe="vice-city"]) .studio-hero::before {
  content: "";
  position: absolute;
  top: -104px;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  pointer-events: none;
  /* Also declared as plain values so the wash still renders where @property is absent. */
  --tc-wash-1: #ffab7a;
  --tc-wash-2: #ff93b8;
  --tc-wash-3: #74a6f7;
  --tc-wash-4: #4fcdd8;
  background:
    radial-gradient(58% 78% at 4% 6%, color-mix(in srgb, var(--tc-wash-1) 92%, transparent), transparent 66%),
    radial-gradient(54% 74% at 32% 0%, color-mix(in srgb, var(--tc-wash-2) 78%, transparent), transparent 68%),
    radial-gradient(62% 86% at 66% 8%, color-mix(in srgb, var(--tc-wash-3) 86%, transparent), transparent 70%),
    radial-gradient(66% 82% at 99% 20%, color-mix(in srgb, var(--tc-wash-4) 92%, transparent), transparent 68%);
  background-repeat: no-repeat;
  background-size: 180% 180%, 172% 172%, 190% 190%, 164% 164%;
  background-position: 0% 28%, 22% 0%, 78% 12%, 100% 38%;
  animation:
    tc-wash-drift 34s ease-in-out infinite alternate,
    tc-wash-cycle 16s linear infinite;
  will-change: background-position, background-image;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 44%, rgba(0, 0, 0, 0.5) 74%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 44%, rgba(0, 0, 0, 0.5) 74%, transparent 100%);
}

@keyframes tc-wash-drift {
  from {
    background-position: 0% 28%, 22% 0%, 78% 12%, 100% 38%;
  }
  to {
    background-position: 24% 0%, 0% 32%, 100% 0%, 68% 22%;
  }
}

@keyframes tc-wash-cycle {
  0%,
  100% {
    --tc-wash-1: #ffab7a;
    --tc-wash-2: #ff93b8;
    --tc-wash-3: #74a6f7;
    --tc-wash-4: #4fcdd8;
  }
  25% {
    --tc-wash-1: #ffc056;
    --tc-wash-2: #ff9b7d;
    --tc-wash-3: #7fb0f5;
    --tc-wash-4: #5bbfe8;
  }
  50% {
    --tc-wash-1: #ff8fb5;
    --tc-wash-2: #b98af0;
    --tc-wash-3: #8b9df2;
    --tc-wash-4: #6fa8f0;
  }
  75% {
    --tc-wash-1: #ab8ded;
    --tc-wash-2: #7fb2f5;
    --tc-wash-3: #5cc0e6;
    --tc-wash-4: #45cbcf;
  }
}

:root[data-theme="dark"]:not([data-vibe="vice-city"]) .studio-hero::before {
  opacity: 0.42;
  mix-blend-mode: screen;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-vibe="vice-city"]) .studio-hero::before {
    opacity: 0.42;
    mix-blend-mode: screen;
  }
}

/* The wash fades out into --paper, and every band below it used to sit within a
   percent or two of its neighbour, so the sections ran together. Alternating
   surface and paper down the page does the separating on its own - no rules
   between sections. Both tokens flip with the colour mode, so one rhythm covers
   light (#fff / #f5f5f7) and dark (#111114 / #000). */
:root:not([data-vibe="vice-city"]) .build-list,
:root:not([data-vibe="vice-city"]) .single-page-section {
  background: var(--surface);
}

:root:not([data-vibe="vice-city"]) .product-feature,
:root:not([data-vibe="vice-city"]) .about-section {
  background: var(--paper);
}

/* ---------------------------------------------------------------------------
   Hero molecule: a ball-and-stick cluster where each atom is an app tile.
   Eight atoms sit on the corners of a cube, so every bond is the same length.
   Pure CSS 3D - the scene spins on Y and each tile counter-spins at the exact
   same rate, which keeps the artwork facing the viewer (billboarding).
   Apple Core only; Vice City keeps its wallpaper hero.
   --------------------------------------------------------------------------- */
.hero-visual {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  min-height: 400px;
  perspective: 1200px;
  perspective-origin: 50% 45%;
}

.hero-visual::before {
  content: "";
  position: absolute;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(92, 200, 228, 0.3), transparent 68%);
  filter: blur(18px);
}

.molecule-tilt {
  position: relative;
  width: 400px;
  height: 400px;
  transform: rotateX(-14deg) rotateZ(3deg);
  transform-style: preserve-3d;
}

.molecule {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  animation: molecule-spin 30s linear infinite;
}

@keyframes molecule-spin {
  from { transform: rotateY(0deg); }
  to { transform: rotateY(360deg); }
}

.molecule-core {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 92px;
  height: 92px;
  margin: -46px 0 0 -46px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.35) 14%, transparent 46%),
    radial-gradient(circle at 50% 55%, #7ae2e8, #14a2b8 44%, #0a7691);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.42),
    0 14px 38px rgba(12, 132, 166, 0.46),
    0 0 66px rgba(110, 214, 234, 0.42);
  animation: molecule-counterspin 30s linear infinite;
}

.molecule-core::after {
  content: "";
  position: absolute;
  inset: -14px;
  border: 1px solid rgba(110, 214, 234, 0.55);
  border-radius: 50%;
  animation: core-pulse 3.8s ease-out infinite;
}

@keyframes core-pulse {
  0% { opacity: 0.85; transform: scale(0.9); }
  70% { opacity: 0; transform: scale(1.35); }
  100% { opacity: 0; transform: scale(1.35); }
}

/* Bonds start at the core's surface rather than its centre, so the eight of
   them no longer converge on a hard vertex. */
.bond {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 109px;
  height: 4px;
  margin-top: -2px;
  border-radius: 2px;
  transform-origin: 0 50%;
  transform-style: preserve-3d;
  background: linear-gradient(90deg, rgba(20, 162, 184, 0.5) 0%, rgba(20, 162, 184, 0.92) 22%, rgba(125, 220, 235, 0.3) 100%);
}

/* A bond is a flat plane, so it thins to nothing whenever the rotation turns it
   edge-on. A second blade at 90 degrees keeps one face toward the viewer at all
   times, which is what stops bonds winking out mid-spin. */
.bond::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: inherit;
  transform: rotateX(90deg);
}

/* The stub that overlaps the core: blurred, and fading to fully transparent at
   the centre so the bonds dissolve into the sphere instead of drawing a bright
   knot across it. */
.bond::before {
  content: "";
  position: absolute;
  top: 0;
  left: -46px;
  width: 60px;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(20, 162, 184, 0) 0%, rgba(20, 162, 184, 0.18) 55%, rgba(20, 162, 184, 0.5) 100%);
  filter: blur(2.5px);
}

.bond-1 { transform: rotateY(-45.0deg) rotateZ(-35.26deg) translateX(46px); }
.bond-2 { transform: rotateY(-135.0deg) rotateZ(-35.26deg) translateX(46px); }
.bond-3 { transform: rotateY(135.0deg) rotateZ(-35.26deg) translateX(46px); }
.bond-4 { transform: rotateY(45.0deg) rotateZ(-35.26deg) translateX(46px); }
.bond-5 { transform: rotateY(-45.0deg) rotateZ(35.26deg) translateX(46px); }
.bond-6 { transform: rotateY(-135.0deg) rotateZ(35.26deg) translateX(46px); }
.bond-7 { transform: rotateY(135.0deg) rotateZ(35.26deg) translateX(46px); }
.bond-8 { transform: rotateY(45.0deg) rotateZ(35.26deg) translateX(46px); }

.atom {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 60px;
  height: 60px;
  margin: -30px 0 0 -30px;
  transform-style: preserve-3d;
}

.atom-1 { transform: translate3d(89.5px, -89.5px, 89.5px); }
.atom-2 { transform: translate3d(-89.5px, -89.5px, 89.5px); }
.atom-3 { transform: translate3d(-89.5px, -89.5px, -89.5px); }
.atom-4 { transform: translate3d(89.5px, -89.5px, -89.5px); }
.atom-5 { transform: translate3d(89.5px, 89.5px, 89.5px); }
.atom-6 { transform: translate3d(-89.5px, 89.5px, 89.5px); }
.atom-7 { transform: translate3d(-89.5px, 89.5px, -89.5px); }
.atom-8 { transform: translate3d(89.5px, 89.5px, -89.5px); }

.atom-face {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: 16px;
  color: #ffffff;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 10px 22px rgba(15, 23, 42, 0.28);
  animation: molecule-counterspin 30s linear infinite;
}

/* Cancels the scene rotation exactly: same duration, same easing, opposite direction. */
@keyframes molecule-counterspin {
  from { transform: rotateY(0deg); }
  to { transform: rotateY(-360deg); }
}

.atom-face svg {
  width: 28px;
  height: 28px;
}

.atom-1 .atom-face { background: linear-gradient(160deg, #34d399, #059669); }
.atom-2 .atom-face { background: linear-gradient(160deg, #fb7185, #e11d48); }
.atom-3 .atom-face { background: linear-gradient(160deg, #38bdf8, #0284c7); }
.atom-4 .atom-face { background: linear-gradient(160deg, #fbbf24, #d97706); }
.atom-5 .atom-face { background: linear-gradient(160deg, #a78bfa, #7c3aed); }
.atom-6 .atom-face { background: linear-gradient(160deg, #818cf8, #4f46e5); }
.atom-7 .atom-face { background: linear-gradient(160deg, #e879f9, #c026d3); }
.atom-8 .atom-face { background: linear-gradient(160deg, #2dd4bf, #0d9488); }

:root[data-theme="dark"] .atom-face {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 10px 24px rgba(0, 0, 0, 0.55);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .atom-face {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.28),
      0 10px 24px rgba(0, 0, 0, 0.55);
  }
}

/* Two columns once there is room for the molecule to sit beside the copy.
   The molecule keeps its full size, so the whole 20% height reduction comes
   out of the padding: 668px -> 534px at 1440 wide. The stage min-height matches
   the molecule box exactly so it never adds height of its own. Vice City keeps
   the original padding. */
:root:not([data-vibe="vice-city"]) .studio-hero {
  grid-template-columns: minmax(0, 1fr) minmax(0, 440px);
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
  padding-top: clamp(46px, 5vw, 72px);
  padding-bottom: clamp(40px, 4.4vw, 62px);
}

/* Nudged off the column centre toward the copy. */
.hero-visual {
  transform: translateX(-15%);
}

:root:not([data-vibe="vice-city"]) .hero-copy-block {
  container-type: inline-size;
}

/* The headline is white-space: nowrap and was sized off the viewport, which no
   longer tracks its column now the hero is split. 9cqw keeps the single line
   inside the copy column at every width (the string measures 10.7x its font size). */
:root:not([data-vibe="vice-city"]) .studio-hero h1 {
  font-size: clamp(1.2rem, 8.5cqw, 3.2rem);
}

:root[data-vibe="vice-city"] .hero-visual {
  display: none;
}


@media (max-width: 980px) {
  .hero-visual {
    display: none;
  }

  :root:not([data-vibe="vice-city"]) .studio-hero {
    grid-template-columns: minmax(0, 780px);
  }

  /* Single column again, so the viewport is the right basis once more. */
  :root:not([data-vibe="vice-city"]) .studio-hero h1 {
    font-size: clamp(1.2rem, 6.5vw, 3.2rem);
  }

  .site-header {
    align-items: center;
  }

  .header-actions {
    gap: 10px;
  }

  .theme-switch {
    display: none;
  }

  .settings-menu {
    order: 1;
  }

  .nav-toggle {
    order: 2;
  }

  .nav-toggle {
    display: inline-grid;
    place-items: center;
    /* Without this the auto rows stretch and the three bars spread apart. */
    align-content: center;
    gap: 5px;
    width: 46px;
    height: 46px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--ink);
  }

  .nav-toggle span:not(.sr-only) {
    width: 20px;
    height: 2px;
    background: currentColor;
  }

  .site-nav {
    order: 3;
    position: absolute;
    left: 14px;
    right: 14px;
    top: calc(100% + 8px);
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--surface);
    box-shadow: var(--shadow);
  }

  .site-nav.is-open {
    display: flex;
  }

  .site-nav a {
    padding: 6px 10px;
  }

  .studio-hero,
  .product-feature,
  .build-list,
  .product-detail,
  .contact-layout,
  .content-grid,
  .capability-grid,
  .about-grid,
  .site-footer {
    grid-template-columns: 1fr;
  }

  .hero-product {
    min-height: 520px;
  }

  .hero-device {
    right: 0;
    width: min(62vw, 360px);
  }

  .site-footer nav {
    justify-content: flex-start;
  }
}

@media (max-width: 620px) {
  main,
  section,
  footer {
    max-width: 100vw;
    overflow-x: hidden;
  }

  .site-header {
    width: 100vw;
    display: flex;
    justify-content: flex-start;
    gap: 8px;
    min-height: 68px;
    padding: 10px 14px;
  }

  .brand {
    gap: 8px;
  }

  .brand img {
    width: 44px;
    height: 44px;
    margin-inline: 0;
    object-position: -20px -20px;
    transform: none;
  }

  .header-actions {
    margin-left: auto;
    gap: 8px;
  }

  .settings-button {
    min-height: 40px;
    width: 40px;
    height: 40px;
    padding: 0;
    font-size: 0;
  }

  .settings-panel {
    position: fixed;
    top: 76px;
    left: auto !important;
    right: 14px !important;
    width: min(320px, calc(100vw - 28px)) !important;
    max-width: min(320px, calc(100vw - 28px));
    max-height: calc(100dvh - 92px);
    overflow-y: auto;
    padding: 14px;
    border-radius: var(--radius);
    transform: none;
  }

  .settings-panel.is-open {
    gap: 14px;
  }

  .segmented-control {
    width: 100%;
    min-width: 0;
    overflow: hidden;
  }

  .segmented-control button {
    min-width: 0;
    padding: 0 6px;
    font-size: 0.72rem;
    white-space: nowrap;
  }

  .segmented-control[aria-label="Color mode"] button {
    flex: 1;
    width: auto;
    padding: 0;
    font-size: 0;
  }

  .nav-toggle {
    width: 42px;
    height: 42px;
  }

  body {
    font-size: 17px;
  }

  .brand span {
    font-size: 1.18rem;
  }

  h1 {
    font-size: 2.4rem;
  }

  h2 {
    font-size: 2.15rem;
  }

  .studio-hero {
    width: 100vw;
    min-height: auto;
    grid-template-columns: minmax(0, 1fr);
    padding-top: 48px;
    padding-right: 30px;
    padding-left: 30px;
  }

  :root[data-vibe="vice-city"] .studio-hero::before,
  :root[data-vibe="vice-city"] .studio-hero::after {
    display: none;
  }

  .hero-copy-block,
  .hero-copy-block .lede {
    width: min(100%, 330px);
    max-width: 330px;
  }

  .hero-actions,
  .inline-actions,
  .button {
    width: 100%;
  }

  .hero-product {
    min-height: auto;
    display: grid;
    gap: 24px;
  }

  .product-card,
  .hero-device {
    position: static;
  }

  .product-card {
    grid-template-columns: 72px minmax(0, 1fr);
    width: min(100%, 330px);
    max-width: 330px;
    overflow: hidden;
    padding: 18px;
  }

  .product-card .app-icon {
    width: 72px;
    border-radius: 18px;
  }

  .hero-device {
    width: min(86vw, 330px);
    margin-inline: auto;
  }

  .invitation {
    flex-direction: column;
    align-items: flex-start;
  }
}