@font-face {
  font-family: Nunito;
  src: url("assets/type/nunito-variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 200 1000;
  font-display: swap;
}

@property --waitlist-bob {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

@property --waitlist-bob-strength {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

:root {
  color-scheme: light;
  --ink: #390a3d;
  --body: #4d284e;
  --quiet: #63455f;
  --paper: #fff4e9;
  --edge: #e9d6e5;
  --plum: #671878;
  --ease-glide: cubic-bezier(.2, .72, .25, 1);
  --ease-tint: cubic-bezier(.32, 0, .24, 1);
  --glide: 320ms var(--ease-glide);
  --tint: 230ms var(--ease-tint);
  --surface-shadow: inset 0 1px 0 rgb(255 255 255 / .75),
    0 2px 4px rgb(74 34 58 / .04), 0 10px 24px rgb(74 34 58 / .07);
  --panel-shadow: inset 0 1px 0 rgb(255 255 255 / .74),
    0 3px 6px rgb(74 34 58 / .06), 0 16px 36px rgb(74 34 58 / .10);
  --type: Nunito, "Avenir Next", ui-rounded, system-ui, sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--type);
}
* { box-sizing: border-box; }
body { margin: 0; }
a { color: inherit; text-decoration: none; }
button, select { color: inherit; font: inherit; }
button, select { cursor: pointer; }
:focus-visible { outline: 3px solid #712090; outline-offset: 3px; }
img { display: block; max-width: 100%; }
button:disabled { cursor: default; }
.content-width { width: min(1256px, calc(100% - 9vw)); margin-inline: auto; }
.skip-link {
  position: fixed; z-index: 5; left: 12px; top: 12px; padding: 10px 14px;
  transform: translateY(-150%); border-radius: 8px; color: var(--ink); background: #fff;
}
.skip-link:focus { transform: none; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.site-header { background: #fff3e8; }
.harbor-page {
  --harbor-clearance: 114px;
  scroll-padding-block-start: var(--harbor-clearance);
}
.first-hello-home .site-header {
  position: fixed; z-index: 4;
  inset: max(clamp(12px, 1.8vw, 24px), env(safe-area-inset-top)) max(clamp(12px, 4vw, 64px), env(safe-area-inset-right))
    auto max(clamp(12px, 4vw, 64px), env(safe-area-inset-left));
  background: transparent;
  pointer-events: none;
}
.first-hello-home .site-header .navigation {
  position: relative; isolation: isolate; pointer-events: auto;
  max-width: 1480px; min-height: 70px;
  padding-inline: clamp(14px, 2.5vw, 40px);
  border: 1px solid rgb(255 255 255 / .74); border-radius: 999px;
  box-shadow: 0 2px 6px rgb(62 26 49 / .08), 0 8px 28px rgb(62 26 49 / .14);
}
.first-hello-home .navigation::before, .first-hello-home .navigation::after, .harbor-lens {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
}
.first-hello-home .navigation::before {
  content: ""; z-index: -3;
  background: rgb(255 244 232 / .34);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  backdrop-filter: blur(16px) saturate(1.15);
}
.first-hello-home .navigation::after {
  content: ""; z-index: -1;
  background-color: rgb(255 244 232 / var(--harbor-tint, .48));
  box-shadow: inset 0 1px 1px rgb(255 255 255 / .78), inset 0 -1px 1px rgb(255 255 255 / .46);
  transition: background-color 160ms var(--ease-tint);
}
.harbor-lens {
  z-index: -2; width: 100%; height: 100%; overflow: hidden;
  opacity: 0;
}
.harbor-lens[data-refracts="true"] { opacity: 1; }
.harbor-lens[data-flowers="true"] {
  mask-image: linear-gradient(90deg, #000, #000 28%, transparent 70%),
    linear-gradient(#000, #000 20%, transparent);
  mask-composite: intersect;
}
.navigation {
  display: flex; align-items: center; justify-content: space-between; gap: clamp(14px, 3.5vw, 52px);
  min-height: 76px; max-width: 1536px; margin-inline: auto;
  padding: 8px clamp(22px, 4.4vw, 66px) 8px clamp(22px, 8.8vw, 135px);
}
.brand { display: inline-flex; align-items: center; gap: clamp(15px, 2.05vw, 31px); flex-shrink: 0; }
.wordmark { display: block; width: clamp(86px, 9.4vw, 144px); height: auto; flex-shrink: 0; }
.brand-name {
  padding-inline-start: clamp(12px, 1.4vw, 22px); border-inline-start: 1px solid currentColor;
  font-size: clamp(.68rem, 1.17vw, 1.06rem); line-height: 1.21; font-weight: 900;
  text-transform: uppercase; letter-spacing: .26em;
}
.nav-links { display: flex; align-items: center; gap: clamp(3px, 1.15vw, 17px); margin-inline-start: auto; }
.nav-links a {
  display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 5px 14px;
  border-radius: 999px; font-weight: 750; font-size: clamp(.9rem, 1.36vw, 1.18rem); white-space: nowrap;
  transition: color var(--tint), background-color var(--tint), box-shadow var(--glide);
}
.nav-links a[aria-current="page"] { background: #efd5f1; box-shadow: inset 0 1px 2px rgb(89 27 101 / .09); }
.button {
  --lift: -4px;
  --button-rim: inset 0 1px 0 rgb(255 255 255 / .78), inset 0 -1px 0 rgb(73 25 79 / .10);
  --button-rest: var(--button-rim), 0 2px 4px rgb(78 28 88 / .12), 0 6px 13px rgb(78 28 88 / .10);
  --button-hover: var(--button-rim), 0 4px 7px rgb(78 28 88 / .13), 0 12px 22px rgb(78 28 88 / .19);
  --button-pressed: var(--button-rim), 0 1px 2px rgb(78 28 88 / .13), 0 2px 5px rgb(78 28 88 / .10);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px; padding: 9px 22px; border: 0; border-radius: 999px;
  font-weight: 850; line-height: 1.15; text-align: center;
  background-color: var(--button-fill);
  box-shadow: var(--button-rest);
  translate: 0 0;
  transition: translate var(--glide), box-shadow var(--glide), background-color var(--tint),
    border-color var(--tint), --waitlist-bob-strength var(--glide);
}
.button-primary {
  --button-fill: #861898;
  --button-fill-hover: #9d1da9;
  --button-fill-pressed: #751483;
  --button-rim: inset 0 1px 0 rgb(255 229 255 / .48), inset 0 -2px 0 rgb(57 8 67 / .26);
  color: #fff;
  /* Keep the sheen fixed; easing the color beneath it avoids a gradient snap. */
  background-image: linear-gradient(180deg, rgb(251 86 255 / .31), rgb(61 8 73 / .24));
}
.header-cta { white-space: nowrap; font-size: clamp(.9rem, 1.6vw, 1.38rem); padding-inline: clamp(15px, 2.6vw, 36px); }

.hero {
  position: relative; isolation: isolate; display: grid; align-items: center;
  overflow: hidden; min-height: 100vh; min-height: 100svh;
  padding-block-start: var(--harbor-clearance);
  background: #ffedda;
}
.hero-art { position: absolute; z-index: -1; inset: 0; }
.hero-art img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 54% 50%; }
.hero::after {
  content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 34% 46% at 19% 55%,
    rgb(255 246 234 / .63) 15%, rgb(255 246 234 / .44) 53%, rgb(255 246 234 / .14) 77%, transparent 100%);
}
.hero-layout { width: 100%; }
.hero-flowers { display: none; }
.hero-copy {
  width: min(38.7%, 594px); padding: 58px 17px 49px clamp(32px, 5.2vw, 80px);
  padding-inline-start: max(clamp(32px, 5.2vw, 80px), calc(env(safe-area-inset-left) + 18px));
}
.hero h1 {
  margin: 0; font-size: clamp(2.8rem, 4.19vw, 4.45rem); font-weight: 950;
  letter-spacing: -.052em; line-height: .97;
}
.hero h1 span { display: block; }
.hero-copy > p {
  margin: 16px 0 27px; max-width: 28ch; font-size: clamp(1.2rem, 1.9vw, 1.78rem);
  line-height: 1.17; font-weight: 670; letter-spacing: -.02em;
}
.hero-action { display: grid; justify-items: center; gap: 10px; width: fit-content; margin-inline-start: clamp(8px, 1vw, 15px); }
.hero-cta {
  --lift: -5px;
  min-height: clamp(58px, 5vw, 77px); padding-inline: clamp(22px, 3.2vw, 48px);
  font-size: clamp(1.45rem, 2.58vw, 2.42rem); letter-spacing: -.035em; white-space: nowrap;
}
.hero-action small { font-size: clamp(.86rem, 1.2vw, 1.13rem); font-weight: 700; }

.features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding-block: 23px 26px; }
.feature {
  min-width: 0; display: flex; align-items: center; gap: clamp(12px, 1.4vw, 22px);
  padding-inline: clamp(12px, 1.65vw, 25px);
}
.feature + .feature { border-inline-start: 1px solid #ddc7c7; }
.feature img { width: clamp(60px, 7vw, 106px); height: auto; flex: 0 0 auto; border-radius: 18px; }
.feature h2 { margin: 0; font-size: clamp(1.7rem, 3.05vw, 2.72rem); font-weight: 920; letter-spacing: -.044em; line-height: 1; }
.feature h2 svg { width: .44em; height: .44em; stroke: #9650a0; fill: none; stroke-width: 2; stroke-linecap: round; vertical-align: middle; }
.feature p { margin: 4px 0 0; font-size: clamp(.91rem, 1.34vw, 1.15rem); color: var(--body); font-weight: 700; line-height: 1.2; }
.feature-link h2 { transition: color var(--tint); }
.feature-link img { transition: translate var(--glide), box-shadow var(--glide); }
.feature-link h2 svg { transition: translate var(--glide); }

.demo {
  scroll-margin-top: 16px; display: grid; grid-template-columns: minmax(235px, .78fr) minmax(0, 1.22fr);
  align-items: center; gap: clamp(24px, 3.5vw, 52px); padding: clamp(24px, 3.2vw, 48px);
  border: 1px solid #eeded2; border-radius: 34px; background: #fffaf3;
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 7px; margin: 0;
  color: #6d4a40; font-size: .78rem; font-weight: 850;
}
.eyebrow span { width: 7px; height: 7px; border-radius: 50%; background: #a35d47; }
.demo h2 { margin: 11px 0 8px; font-size: clamp(2.45rem, 4.27vw, 3.84rem); font-weight: 930; line-height: 1; letter-spacing: -.053em; }
.demo-summary { max-width: 33ch; margin: 0 0 18px; color: var(--body); font-size: 1.06rem; line-height: 1.45; }
.scenes { display: flex; flex-wrap: wrap; gap: 8px; }
.scenes button {
  min-height: 42px; padding: 6px 13px; border: 1px solid #dcc9b9; border-radius: 999px;
  background: transparent; color: var(--ink); font-size: .87rem; font-weight: 770;
  transition: background-color var(--tint), border-color var(--tint), box-shadow var(--glide);
}
.scenes button[aria-pressed="true"] {
  background: #f3e4d7; border-color: #9a7a68; box-shadow: inset 0 1px 3px rgb(98 60 48 / .11);
}
.demo-controls { display: flex; flex-wrap: wrap; gap: 11px; align-items: center; margin-top: 15px; scroll-margin-top: 14px; }
.demo-controls[hidden] { display: none; }
.button-demo {
  --lift: -3px;
  --button-fill: #591866;
  --button-fill-hover: #742483;
  --button-fill-pressed: #50135c;
  --button-rim: inset 0 1px 0 rgb(255 224 255 / .22), inset 0 -1px 0 rgb(57 8 67 / .26);
  color: #fff; min-width: 140px; min-height: 44px;
}
.button-demo svg { width: 19px; height: 19px; }
.button-demo .pause-icon, .button-demo[data-playing="true"] .play-icon { display: none; }
.button-demo[data-playing="true"] .pause-icon { display: block; }
.demo-note { color: var(--quiet); font-size: .82rem; }

.demo-window { min-width: 0; }
.language-row, .orb-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr);
  align-items: center; gap: 8px; text-align: center;
}
.language-picker { min-width: 0; position: relative; }
.language-picker::after {
  content: ""; position: absolute; right: 11px; top: 17px; width: 6px; height: 6px; color: #795748;
  transform: rotate(45deg); border-right: 1.7px solid; border-bottom: 1.7px solid; pointer-events: none;
}
.language-picker select {
  appearance: none; width: 100%; min-width: 0; min-height: 44px; padding: 5px 23px 5px 11px;
  border: 0; border-bottom: 1px solid #a98d7d; border-radius: 0; background: transparent;
  font-size: clamp(.76rem, 1.2vw, 1rem); font-weight: 760; text-overflow: ellipsis;
  transition: border-color var(--tint), background-color var(--tint);
}
.swap {
  width: 100%; height: 44px; display: grid; place-items: center; padding: 0;
  border: 0; border-radius: 16px; color: #795748; background: transparent;
  transition: background-color var(--tint);
}
.swap svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.orb-row { margin-top: 25px; }
.demo-orb { display: grid; justify-items: center; align-content: center; gap: 8px; }
.orb-disc { width: min(100%, 154px); aspect-ratio: 1; display: grid; place-items: center; }
.orb-disc canvas {
  display: block; width: 100%; height: 100%; border-radius: 50%;
  transform: translateY(var(--orb-float, 0px))
    scale(var(--orb-scale-x, var(--orb-scale, 1)), var(--orb-scale-y, var(--orb-scale, 1)));
  background: radial-gradient(ellipse at 22% 8%, #f1f4fc, #314b91 77%, #d83e4e);
}
.demo-orb:last-child canvas { background: radial-gradient(ellipse at 22% 8%, #f4f7ee, #008553 77%, #d23845); }
.orb-state { min-height: 21px; color: var(--quiet); font-size: .78rem; font-weight: 700; }
[data-orb][data-speaking="true"] .orb-state { color: #6e2582; font-weight: 880; }
.orb-divider { justify-self: center; width: 5px; height: 5px; border-radius: 50%; background: #d0b6a5; }
.transcript { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.transcript-line { min-width: 0; padding: 10px 11px; border-radius: 12px; transition: background-color var(--tint); }
.transcript-line[data-speaking="true"] { background: #f2e3f4; }
.speaker { display: block; color: var(--quiet); font-size: .74rem; font-weight: 820; }
.transcript-line p { margin: 3px 0 0; font-size: clamp(.86rem, 1.15vw, 1rem); font-weight: 760; line-height: 1.28; overflow-wrap: anywhere; }

.app-preview {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center;
  gap: clamp(24px, 4vw, 60px); margin-top: clamp(28px, 4vw, 54px); padding: clamp(24px, 4vw, 56px);
  scroll-margin-top: 16px; border: 1px solid #eeded2; border-radius: 34px;
  background: radial-gradient(ellipse at 76% 34%, #f4dfeb, transparent 64%), #fff9f1;
}
.app-preview-copy { max-width: 430px; justify-self: center; }
.app-preview h2 {
  margin: 9px 0 0; font-size: clamp(2rem, 3.9vw, 3.7rem);
  font-weight: 930; line-height: 1.02; letter-spacing: -.048em;
}
.app-preview-description { max-width: 35ch; margin: 12px 0 18px; color: var(--body); line-height: 1.5; }
.app-preview-figure { width: min(100%, 270px); margin: 0; justify-self: center; text-align: center; }
/* Adapted from the Devices.css iPhone 14 Pro by Yan Zhu. See assets/devices-css-LICENSE.txt. */
.app-preview-frame {
  position: relative; padding: 7px; border: 1px solid #756c79; border-radius: 41px;
  background: #121016;
  box-shadow: inset 0 0 0 1px #a49aa6, inset 0 0 0 3px #3a333f,
    0 5px 9px #3d253a24, 0 19px 36px #3d253a33;
}
.app-preview-screen { position: relative; overflow: hidden; border-radius: 33px; background: #121016; }
.app-preview-screen img { width: 100%; height: auto; }
.app-preview-screen::after {
  content: ""; position: absolute; inset: 1.65% auto auto 50%; width: 28%; aspect-ratio: 3.43;
  transform: translateX(-50%); border-radius: 999px; pointer-events: none;
  background: radial-gradient(circle at 85% 50%, #323854 0%, #191b27 6%, transparent 9%), #09080b;
}
.app-preview-buttons, .app-preview-buttons::before, .app-preview-buttons::after, .app-preview-frame::after {
  position: absolute; width: 3px; border-radius: 2px; background: linear-gradient(#756c79, #372f3b 25%, #2c262f);
  pointer-events: none;
}
.app-preview-buttons { inset: 13.2% auto auto -3px; height: 3.7%; }
.app-preview-buttons::before, .app-preview-buttons::after {
  content: ""; left: 0; height: 185%;
}
.app-preview-buttons::before { top: 190%; }
.app-preview-buttons::after { top: 425%; }
.app-preview-frame::after {
  content: ""; inset: 23% -3px auto auto; height: 10.5%;
}
.app-preview-figure figcaption { margin-top: 14px; color: var(--quiet); font-size: .78rem; line-height: 1.4; }
.app-preview-figure figcaption a {
  display: flex; align-items: center; width: fit-content; min-height: 44px; margin-inline: auto; padding: 7px 6px;
  color: var(--plum); font-weight: 820; text-decoration: underline; text-underline-offset: 3px;
}

.story {
  display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); align-items: center;
  width: min(1000px, calc(100% - 9vw)); gap: clamp(24px, 5.2vw, 76px);
  padding-block: clamp(44px, 5vw, 76px); scroll-margin-top: 15px;
}
.story-label { margin: 0 0 8px; color: var(--quiet); font-size: .83rem; font-weight: 820; }
.story h2 {
  max-width: 21ch; margin: 0; font-size: clamp(1.8rem, 3.1vw, 2.8rem);
  font-weight: 900; line-height: 1.08; letter-spacing: -.042em;
}
.story-description { max-width: 46ch; margin: 14px 0 0; color: var(--body); font-size: 1.06rem; line-height: 1.5; }
.story-art { width: min(100%, 392px); height: auto; justify-self: center; }
.story-link {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 10px;
  color: var(--plum); font-weight: 850; text-decoration: underline; text-underline-offset: 4px;
}
.story-link span { transition: translate var(--glide); }
.waitlist {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  align-items: center; gap: clamp(18px, 3vw, 46px); scroll-margin-top: 16px;
  margin-bottom: 18px; padding: clamp(21px, 3vw, 36px); border-radius: 34px;
  background: linear-gradient(100deg, #f3d9f1, #ead4f2);
}
.waitlist h2 { margin: 0; font-size: clamp(1.95rem, 3.1vw, 2.74rem); font-weight: 920; line-height: 1.05; letter-spacing: -.05em; }
.waitlist-copy p { margin: 7px 0 0; color: var(--body); font-size: .96rem; font-weight: 700; }
.waitlist-signup { min-width: 0; }
.waitlist-label { display: block; margin-bottom: 6px; font-size: .92rem; font-weight: 810; }
.signup-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.signup-row input {
  min-width: 0; width: 100%; min-height: 46px; border: 1px solid #b584b9; border-radius: 999px;
  padding: 8px 14px; background: #fffaf7; color: var(--ink); font: inherit; font-size: 1rem;
  box-shadow: inset 0 1px 3px rgb(89 27 101 / .10);
  transition: background-color var(--tint), border-color var(--tint), box-shadow var(--glide);
}
.signup-row input:focus {
  background-color: #fff; border-color: #88509a;
  box-shadow: inset 0 1px 3px rgb(89 27 101 / .05), 0 2px 8px rgb(89 27 101 / .12);
}
.signup-row input::placeholder { color: #795873; opacity: 1; }
.signup-row input[aria-invalid="true"] { border-color: #93264d; }
.signup-row .button { white-space: nowrap; }
.signup-row .button:disabled { opacity: .72; }
.waitlist-extra {
  display: flex; align-items: center; gap: 8px; width: fit-content; min-height: 44px;
  margin-top: 3px; color: var(--body); font-size: .89rem; line-height: 1.3; cursor: pointer;
}
.waitlist-extra input { flex: none; width: 1.1rem; height: 1.1rem; margin: 0; accent-color: var(--plum); cursor: pointer; }
.waitlist-disclosure, .waitlist-error, .waitlist-complete p {
  margin: 6px 0 0; color: var(--body); font-size: .86rem; line-height: 1.4;
}
.waitlist-error { color: #7d2146; font-weight: 790; }
.waitlist-disclosure a { font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.waitlist-complete h3 { margin: 0; font-size: 1.25rem; font-weight: 880; }
.site-footer { border-top: 1px solid #efd9cc; }
.footer-inner { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 8px 16px; padding-block: 12px; }
.footer-inner > a { display: grid; align-content: center; min-height: 42px; }
.footer-inner .wordmark { width: clamp(70px, 5.2vw, 80px); }
.footer-inner nav { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 0 4px; min-width: 0; padding-inline-start: 10px; border-inline-start: 1px solid #945c90; font-size: .9rem; font-weight: 690; }
.footer-inner nav a, .footer-more summary { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 8px; }
.footer-more summary { display: list-item; line-height: 44px; cursor: pointer; }
.footer-more ul { display: flex; flex-wrap: wrap; gap: 0 5px; margin: 0; padding: 0; list-style: none; }

.interior-page { padding-block: clamp(22px, 4vw, 56px) clamp(46px, 6vw, 86px); }
.interior-hero {
  display: flex; align-items: center; gap: clamp(18px, 4vw, 60px); padding: clamp(22px, 5vw, 72px);
  border-radius: 34px; background: radial-gradient(ellipse at 92% 18%, #f6e5ed, transparent 62%), #fff9f1;
}
.interior-copy { flex: 1; min-width: 0; }
.interior-copy h1 {
  max-width: 19ch; margin: 11px 0 0; font-size: clamp(2.3rem, 5vw, 4.7rem);
  font-weight: 950; line-height: 1; letter-spacing: -.053em; text-wrap: balance;
}
.interior-copy:only-child h1 { max-width: none; font-size: clamp(2.3rem, 4.65vw, 4.4rem); }
.interior-copy h1 span { display: block; }
.interior-copy > p:not(.eyebrow), .interior-section > p {
  max-width: 57ch; margin: 14px 0 0; color: var(--body);
  font-size: clamp(1.02rem, 1.45vw, 1.21rem); line-height: 1.5;
}
.interior-art { flex: 0 1 auto; width: min(43%, 425px); height: auto; }
.interior-action { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.button-secondary {
  --button-lift-border: #a577aa;
  --button-fill: #fff9f4;
  --button-fill-hover: #f8eaf5;
  --button-fill-pressed: #f0e0ef;
  border: 1px solid #b593b4; color: var(--plum);
}
.interior-section { margin-top: clamp(30px, 5vw, 67px); }
.interior-section h2 {
  margin: 0; font-size: clamp(1.8rem, 3.4vw, 3rem); font-weight: 920; line-height: 1.06; letter-spacing: -.04em;
}
.interior-feature-list, .interior-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 2vw, 26px); margin-top: 20px;
}
.interior-feature, .interior-card {
  padding: clamp(17px, 2.4vw, 32px); border: 1px solid #eeded2; border-radius: 24px;
  background: #fffaf3; scroll-margin-top: 16px;
}
.interior-feature-icon { width: clamp(58px, 7vw, 96px); height: auto; margin-bottom: 12px; border-radius: 15px; }
.interior-feature h3, .interior-card h3 {
  margin: 0; font-size: clamp(1.3rem, 2vw, 1.78rem); line-height: 1.1; font-weight: 900; letter-spacing: -.025em;
}
.interior-feature p, .interior-card p { margin: 9px 0 0; color: var(--body); line-height: 1.5; }
.language-catalog {
  margin-top: 20px; border: 1px solid #eeded2; border-radius: 24px; background: #fffaf3;
}
.language-catalog summary {
  min-height: 44px; padding: 16px clamp(14px, 2.4vw, 28px); border-radius: inherit;
  color: var(--plum); font-weight: 850; cursor: pointer;
}
.language-catalog__search { padding: 0 clamp(14px, 2.4vw, 28px) 16px; }
.language-catalog__search label { display: block; margin-bottom: 6px; font-weight: 800; }
.language-catalog__search input {
  width: min(100%, 420px); min-height: 44px; padding: 9px 13px; border: 1px solid #b593b4;
  border-radius: 12px; background: #fff; color: var(--ink); font: inherit;
}
.language-catalog__search p, .language-catalog__empty { margin: 8px 0 0; color: var(--quiet); }
.language-catalog__empty { padding: 0 clamp(14px, 2.4vw, 28px) 18px; }
.language-catalog .lang-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(105px, 1fr)); gap: 8px;
  max-height: min(420px, 65vh); overflow-y: auto; list-style: none;
  margin: 0 clamp(14px, 2.4vw, 28px) 18px; padding: 0;
}
.language-catalog .lang-grid:focus-visible { outline-offset: 1px; }
.language-catalog .lang {
  display: flex; align-items: flex-start; gap: 6px; padding: 9px 8px;
  border: 1px solid #eeded2; border-radius: 12px; background: #fff;
}
.language-catalog .lang__symbol { flex: none; line-height: 1.4; }
.language-catalog .lang__name { min-width: 0; font-size: .88rem; font-weight: 800; overflow-wrap: anywhere; }
.language-catalog .lang__name small { display: block; color: var(--quiet); font-size: .8rem; font-weight: 600; }
.language-catalog [hidden] { display: none; }
.interior-signup {
  padding: clamp(20px, 3.3vw, 42px); border-radius: 28px;
  background: linear-gradient(100deg, #f3d9f1, #ead4f2);
}

.demo, .app-preview, .waitlist, .interior-hero, .interior-signup { box-shadow: var(--panel-shadow); }
.interior-feature, .interior-card, .language-catalog { box-shadow: var(--surface-shadow); }
.footer-inner nav a, .footer-more summary { border-radius: 10px; transition: background-color var(--tint), color var(--tint); }
.story-link, .app-preview-figure figcaption a, .waitlist-disclosure a {
  transition: color var(--tint), text-decoration-color var(--tint);
}
.language-catalog summary { transition: background-color var(--tint); }

.nav-links a:not([aria-current="page"]):focus-visible { background-color: #f5e0f2; }
.feature-link:focus-visible h2 { color: var(--plum); }

@media (hover: hover) and (pointer: fine) {
  .button:not(:disabled):hover {
    background-color: var(--button-fill-hover); box-shadow: var(--button-hover);
    border-color: var(--button-lift-border, transparent);
  }
  .nav-links a:not([aria-current="page"]):hover {
    color: var(--plum); background-color: #f5e0f2; box-shadow: 0 2px 6px rgb(89 27 101 / .08);
  }
  .feature-link:hover h2 { color: var(--plum); }
  .feature-link:hover img { box-shadow: 0 9px 16px rgb(77 28 87 / .16); }
  .scenes button:not([aria-pressed="true"]):hover {
    background-color: #fbefe3; border-color: #9a7a68; box-shadow: 0 3px 8px rgb(98 60 48 / .09);
  }
  .language-picker select:hover { background-color: #fbefe3; border-bottom-color: #795748; }
  .swap:hover { background-color: #f3e4d7; }
  .language-catalog summary:hover { background-color: #f8edf6; }
  .story-link:hover, .app-preview-figure figcaption a:hover, .waitlist-disclosure a:hover { color: #852298; }
  .footer-inner nav a:hover, .footer-more summary:hover { color: var(--plum); background-color: #f6e5ef; }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .button:not(:disabled):hover { translate: 0 var(--lift); }
  .button:not(:disabled):hover::after {
    /* Keep the original lower edge hittable as the visible button rises. */
    content: ""; position: absolute; inset: 0 0 var(--lift); border-radius: inherit;
  }
  .button-float {
    --bob-height: -2.5px;
    /* Pause at the current height and ease its contribution away on exit or press. */
    transform: translateY(calc(var(--waitlist-bob, 0px) * var(--waitlist-bob-strength, 0)));
    animation: waitlist-bob 1.35s ease-in-out 320ms infinite alternate paused;
  }
  .button-float:not(:disabled):hover:not(:active) {
    --waitlist-bob-strength: 1;
    animation-play-state: running;
  }
  .button-float:not(:disabled):hover::after { bottom: calc(var(--lift) + var(--bob-height)); }
  .feature-link:hover img { translate: 0 -3px; }
  .feature-link:hover h2 svg, .story-link:hover span { translate: 3px 0; }
}

@keyframes waitlist-bob {
  from { --waitlist-bob: 0px; }
  to { --waitlist-bob: var(--bob-height); }
}

.button:not(:disabled):active {
  translate: 0 0; background-color: var(--button-fill-pressed); box-shadow: var(--button-pressed);
  transition-duration: 95ms;
}

@media (max-width: 1050px) {
  .navigation { padding-inline: 24px; gap: 12px; }
  .brand { gap: 12px; }
  .brand-name { letter-spacing: .19em; }
  .nav-links a { padding-inline: 9px; }
  .hero-copy { width: 38%; padding: 38px 9px 23px max(4.1vw, calc(env(safe-area-inset-left) + 18px)); }
  .hero h1 { font-size: clamp(2.03rem, 4.25vw, 2.8rem); }
  .hero-copy > p { margin-block: 10px 14px; font-size: clamp(.96rem, 1.76vw, 1.15rem); }
  .hero-cta { min-height: 47px; padding-inline: 21px; font-size: clamp(1.18rem, 2.45vw, 1.55rem); }
  .hero-action { gap: 6px; margin-inline-start: 10px; }
  .hero-action small { font-size: .77rem; }
  .feature { padding-inline: 13px; }
}
@media (max-width: 860px) {
  .waitlist { grid-template-columns: 1fr; gap: 15px; }
  .waitlist-copy { text-align: center; }
  .waitlist-signup { width: min(100%, 600px); justify-self: center; }
}
@media (max-width: 720px) {
  .content-width { width: calc(100% - 30px); }
  .navigation { flex-wrap: wrap; padding: 8px 16px 5px; gap: 3px 12px; min-height: 0; }
  .brand-name { font-size: .59rem; }
  .nav-links { order: 3; justify-content: center; width: 100%; margin: 0; }
  .nav-links a { min-height: 36px; }
  .header-cta { min-height: 41px; }
  .harbor-page { --harbor-clearance: 130px; }
  .first-hello-home .site-header .navigation { padding: 8px 12px 6px; border-radius: 26px; }
}
@media (max-width: 720px), (max-aspect-ratio: 4/3) {
  .hero {
    --hero-seam: #fce7d6;
    grid-template-rows: minmax(min-content, 1fr) clamp(152px, max(37svh, min(54svh, 49vw)), 580px);
    padding-block-start: 0;
    background: var(--hero-seam);
  }
  .hero::after { display: none; }
  .hero-layout {
    grid-row: 1; align-self: stretch; display: grid; align-items: center;
    position: relative; isolation: isolate;
    background: linear-gradient(to top, var(--hero-seam), transparent 26px),
      linear-gradient(135deg, #fff1e4, #fff7ed 74%);
  }
  .hero-flowers {
    display: block; position: absolute; z-index: -1; inset: 0 auto auto 0; width: 75%; max-height: 168px;
    overflow: hidden;
    mask-image: linear-gradient(#000, transparent), linear-gradient(to right, #000 55%, transparent);
    mask-composite: intersect;
  }
  .hero-flowers img { width: 100%; height: auto; }
  .hero-copy {
    width: 100%; max-width: 510px; margin-inline: auto;
    padding: calc(var(--harbor-clearance) + clamp(13px, 2.5svh, 25px)) 23px clamp(16px, 3svh, 28px);
  }
  .hero h1 { font-size: clamp(2.34rem, 10.3vw, 3.68rem); }
  .hero-copy > p { max-width: 32ch; margin-block: 11px 17px; font-size: clamp(1.08rem, 4.7vw, 1.19rem); }
  .hero-cta { min-height: 52px; padding-inline: 24px; font-size: 1.45rem; }
  .hero-action { justify-items: start; gap: 9px; margin-inline-start: 0; }
  .hero-action small { font-size: .86rem; }
  .hero-art { position: absolute; grid-row: 2; width: 100%; }
  .hero-art::after {
    content: ""; position: absolute; inset: 0 0 auto; height: clamp(12px, 4.6vw, 27px);
    background: linear-gradient(var(--hero-seam), transparent); pointer-events: none;
  }
  .hero-art img { object-position: 40% 50%; }
}
@media (max-width: 720px) {
  .features { padding-block: 15px 20px; }
  .feature { flex-direction: column; align-items: flex-start; gap: 6px; padding-inline: 7px; }
  .feature img { width: 50px; border-radius: 10px; }
  .feature h2 { font-size: 1.4rem; }
  .feature p { font-size: .85rem; }
  .demo { grid-template-columns: 1fr; gap: 23px; border-radius: 23px; padding: 21px 18px 23px; }
  .demo h2 { font-size: 2.55rem; }
  .demo-summary { margin-bottom: 13px; font-size: .98rem; }
  .language-row, .orb-row { grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1fr); gap: 4px; }
  .language-picker select { padding-inline: 7px 17px; }
  .language-picker::after { right: 7px; }
  .orb-disc { width: min(100%, 112px); }
  .orb-row { margin-top: 21px; }
  .transcript { margin-top: 12px; }
  .app-preview { grid-template-columns: 1fr; gap: 23px; padding: 23px 18px 17px; border-radius: 23px; }
  .app-preview-copy { justify-self: start; }
  .story { grid-template-columns: 1fr; gap: 18px; padding-block: 36px 40px; text-align: center; }
  .story h2, .story-description { margin-inline: auto; }
  .story-art { width: min(78%, 300px); }
  .waitlist { border-radius: 23px; }
  .interior-hero { flex-direction: column; align-items: flex-start; border-radius: 24px; }
  .interior-art { align-self: center; width: min(88%, 320px); }
  .interior-feature-list, .interior-grid { grid-template-columns: 1fr; }
  .interior-feature { display: flex; align-items: flex-start; gap: 14px; }
  .interior-feature-icon { flex: 0 0 54px; margin: 0; border-radius: 11px; }
}
@media (max-width: 480px) {
  .signup-row { grid-template-columns: 1fr; }
}
@media (max-width: 430px) {
  .first-hello-home .brand-name { display: none; }
}
@media (max-width: 360px) {
  .brand-name { display: none; }
  .navigation { padding-inline: 13px; }
  .hero-copy { padding-inline: max(18px, env(safe-area-inset-left)) max(18px, env(safe-area-inset-right)); }
  .feature p { font-size: .79rem; }
  .demo { width: calc(100% - 20px); padding: 18px 15px 20px; }
  .language-row { grid-template-columns: minmax(0, 1fr) 30px minmax(0, 1fr); }
  .language-picker select { padding-inline: 4px 14px; font-size: .75rem; }
  .transcript-line { padding-inline: 7px; }
  .footer-inner { gap: 6px 10px; }
  .footer-inner nav { padding-inline-start: 3px; }
}

@media (min-width: 1051px) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll(root block)) and (animation-range: 0px 520px) {
    .hero-art img {
      animation: harbor-scroll linear both;
      animation-timeline: scroll(root block);
      animation-range: 0px 520px;
    }
    @keyframes harbor-scroll {
      from { transform: none; }
      to { transform: translateY(10px) scale(1.045); }
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .orb-disc canvas { transform: none; }
  .first-hello-home .navigation::after { transition: none; }
  .button, .nav-links a, .feature-link :is(h2, img, svg), .scenes button,
  .language-picker select, .swap, .transcript-line, .signup-row input, .story-link, .story-link span,
  .app-preview-figure figcaption a, .waitlist-disclosure a, .footer-inner nav a,
  .footer-more summary, .language-catalog summary { transition: none; }
}