@font-face {
  font-family:'Instrument Sans';
  src:url('/assets/instrument-sans.woff2') format('woff2');
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
}

@font-face {
  font-family:'Newsreader';
  src:url('/assets/newsreader.woff2') format('woff2');
  font-style:normal;
  font-weight:400;
  font-display:swap;
}

:root {
  --ink:#f1efe2;
  --muted:#a5b3a7;
  --line:#b8c4ac30;
  --backdrop:#05140f;
  --green:#153e32;
  --paper:#f5f3eb;
  --soft:#eeeee3;
  --white:#fffefa;
  --gold:#c6a364;
  --gold-light:#dbc18d;
  --action-ivory:#f1eee4;
  --action-ivory-hover:#fffaf0;
  --action-ink:#14392e;
  --sans:'Instrument Sans',Arial,sans-serif;
  --serif:'Newsreader',Georgia,'Times New Roman',serif;
}

* {
  box-sizing:border-box;
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:110px;
}

body {
  margin:0;
  background:var(--backdrop);
  color:var(--ink);
  isolation:isolate;
  -webkit-font-smoothing:antialiased;
}

/* Doorways connect merchant spaces. This still environment sits behind the
   transparent live sand scene, never replacing its geometry or moving grains.
   A fixed element (not background-attachment) also works on mobile browsers. */
body:before {
  content:'';
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background-color:var(--backdrop);
  background-image:linear-gradient(180deg,#05140f38,#05140f66 65%,#05140f99),url('/assets/courtyard.webp');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

@media(max-width:850px) {
  body:before {
    /* Keep the nested doorway visible in the narrow reading corridor. */
    background-position:64% center;
  }
}

::selection {
  background:#d8b776;
  color:#172f27;
}

a {
  color:inherit;
  text-decoration:none;
}

button,input {
  font:inherit;
}

button,a {
  -webkit-tap-highlight-color:transparent;
}

button {
  cursor:pointer;
}

a:focus-visible,button:focus-visible,input:focus-visible {
  outline:2px solid var(--gold);
  outline-offset:5px;
}

.together-section :focus-visible {
  outline-color:var(--gold-light);
}

p,h1,h2,h3,h4 {
  margin:0;
}

.wrap {
  width:70%;
  max-width:1160px;
  margin-inline:auto;
}

[hidden] {
  display:none!important;
}

.visually-hidden {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}

.skip-link {
  position:fixed;
  top:-100px;
  left:20px;
  padding:14px 20px;
  background:var(--green);
  color:white;
  z-index:20;
}

.skip-link:focus {
  top:12px;
}

.site-header {
  position:sticky;
  top:0;
  z-index:10;
  background:transparent;
}

.site-header:before {
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(180deg,#05140ffc 0%,#05140fed 70%,#05140f00 100%);
  mask-image:linear-gradient(90deg,#0000 6%,#000 12% 88%,#0000 94%);
}

.header-inner {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:104px;
  padding-block:12px;
  gap:30px;
}

.brand {
  display:inline-flex;
  align-items:center;
  gap:9px;
  flex-shrink:0;
}

.logo-mark {
  --logo-image-width:37px;
  --logo-image-height:40.3px;
  --logo-image-left:-5px;
  --logo-image-top:-4px;
  position:relative;
  display:block;
  width:21px;
  height:34px;
  overflow:hidden;
  mix-blend-mode:screen;
  flex-shrink:0;
}

.logo-mark img {
  position:absolute;
  width:var(--logo-image-width);
  height:var(--logo-image-height);
  max-width:none;
  left:var(--logo-image-left);
  top:var(--logo-image-top);
  filter:invert(1);
}

/* Remove only the original image's white backing, preserving its exact pixels and orientation. */
@supports(mask-composite:exclude) {
  .logo-mark {
    background:currentColor;
    mix-blend-mode:normal;
    mask-image:linear-gradient(#fff,#fff),url('/assets/logo-source.jpeg');
    mask-mode:alpha,luminance;
    mask-repeat:no-repeat;
    mask-size:var(--logo-image-width) var(--logo-image-height);
    mask-position:var(--logo-image-left) var(--logo-image-top);
    mask-composite:exclude;
  }

  .logo-mark img {
    opacity:0;
  }
}

nav {
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:54px;
}

nav a {
  padding-block:16px;
  position:relative;
}

nav a:after,.share-email:after {
  content:'';
  height:1px;
  position:absolute;
  left:0;
  right:0;
  bottom:10px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .2s ease;
}

nav a:hover:after,.share-email:hover:after {
  transform:scaleX(1);
}

.launch-note {
  display:inline-flex;
  align-items:center;
  gap:34px;

  position:relative;
  min-height:36px;
  padding:4px 19px;
}

/* Slim ivory actions retain a 44px-high hit area around their visible face. */
.launch-note:before,.hero-actions .button-primary:before,.example-actions .button-primary:before {
  content:'';
  position:absolute;
  inset:-4px 0;
}

.launch-note span {
  font-size:19px;
  line-height:1;
}

/* Custom linework, never font glyphs or platform-dependent emoji. */
.icon-frame {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  vertical-align:middle;
}

.icon {
  display:block;
  width:1em;
  height:1em;
  flex-shrink:0;
  fill:none;
  stroke:currentColor;
  stroke-width:1.35;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.eyebrow {
  display:flex;
  align-items:center;
  gap:9px;
  font-size:10px;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  line-height:1.7;
}

.status-dot {
  display:inline-block;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 0 4px #89652e12;
  flex-shrink:0;
}

/* One continuous environment, with all real content above the decorative frame. */
main,.site-footer {
  position:relative;
  z-index:1;
}

.sculpture-frame {
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
  contain:strict;
}

.flow-surface {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}

.connection-art,.flow-canvas {
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  pointer-events:none;
}

.connection-art {
  opacity:1;
  transition:opacity .6s ease;
}

.flow-canvas {
  opacity:0;
  transition:opacity .6s ease;
}

.flow-ready .flow-canvas {
  opacity:1;
}

.flow-ready .connection-art {
  opacity:0;
}

.flow-failed .connection-art {
  opacity:1;
}

.flow-failed .flow-canvas {
  opacity:0;
}

.hero {
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  min-height:max(790px,calc(100svh - 104px));
  padding-block:90px 190px;
  text-align:center;
}

.hero-copy {
  width:100%;
  max-width:900px;
}

.hero .status-dot,.closing-copy .status-dot { display:none; }

.hero .eyebrow {
  font-size:11px;
  letter-spacing:.18em;
  justify-content:center;
  color:var(--gold);
}

.hero h1 {

  margin:30px 0 30px;
}

.hero-detail {
  font-size:17px;
  line-height:1.65;
  max-width:390px;
  margin:27px auto 0;
  color:#c2c8ba;
}

.hero-actions {
  display:flex;
  align-items:center;
  gap:40px;
  margin-top:40px;
  justify-content:center;
  flex-wrap:wrap;
}

.button {
  display:inline-flex;
  justify-content:center;
  align-items:center;
  gap:36px;
  min-height:52px;
  padding:14px 22px;
  border-radius:5px;
  font-size:14px;
  font-weight:400;
  border:1px solid transparent;
  transition:background .2s,transform .2s,box-shadow .2s;
}

.button span {
  font-size:22px;
  line-height:1;
}

.button:hover {
  transform:translateY(-2px);
}

.button-primary {
  background:var(--gold);
  color:#102c23;
}

.button-primary:hover {
  background:#dbc18d;
  box-shadow:0 5px 20px #00000026;
}

/* Ivory actions on the dark courtyard; the form retains its green submit. */
.launch-note,.hero-actions .button-primary,.example-actions .button-primary {
  background:var(--action-ivory);
  color:var(--action-ink);
  border:1px solid #ffffff45;
  border-radius:8px;
  box-shadow:0 2px 8px #00000018;
  transform:none;
  transition:background .2s;
}

.hero-actions .button-primary,.example-actions .button-primary {
  position:relative;
  min-height:36px;
  padding:4px 16px;
  gap:22px;
}

.launch-note:hover,.hero-actions .button-primary:hover,.example-actions .button-primary:hover {
  background:var(--action-ivory-hover);
  box-shadow:0 2px 8px #00000018;
  transform:none;
}

.button-light {
  background:var(--gold-light);
  color:var(--green);
}

.button-light:hover {
  background:#ead3a8;
}

.button-outline {
  border-color:#acb79d80;
  background:#081b1670;
  color:var(--ink);
}

.button-outline:hover {
  background:#244334;
}

.text-link {
  color:var(--gold);
  display:inline-flex;
  align-items:center;
  gap:15px;
  font-size:15px;
  font-weight:400;
  line-height:1.7;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:9px;
}

.text-link>span {
  font-size:19px;
  transition:transform .2s;
}

.text-link:hover>span {
  transform:translate(2px,2px);
}

.text-link:hover {
  text-decoration:underline;
  text-underline-offset:5px;
}

.launch-context {

  color:var(--muted);
  margin-top:34px;
}

.hero-footnote {
  position:absolute;
  left:50%;
  width:min(100%,560px);
  transform:translateX(-50%);
  bottom:80px;
  min-height:80px;
  display:flex;
  align-items:center;
  gap:25px;
  justify-content:center;
  flex-wrap:wrap;
  border-top:1px solid var(--line);
  font-size:14px;
}

.hero-footnote>span+span:before {
  content:none;
}

/* Keep individual words legible without veiling the continuous centre sculpture. */
.hero-footnote>span {
  text-shadow:0 1px 3px #05140f,0 0 6px #05140fcc;
}

/* Reserve the central sculpture's silhouette instead of veiling it with copy. */
.hero-footnote {
  display:grid;
  grid-template-columns:1fr clamp(72px,7vw,108px) 1fr;
  grid-template-rows:min-content min-content;
  align-content:center;
  column-gap:0;
  row-gap:6px;
  border-top:0;
  background:linear-gradient(90deg,var(--line) 0 40%,transparent 40% 60%,var(--line) 60% 100%) top/100% 1px no-repeat;
}

.hero-footnote>span:nth-child(1),.hero-footnote>span:nth-child(2) {
  grid-column:1;
  justify-self:end;
}

.hero-footnote>span:nth-child(1) { grid-row:1; }
.hero-footnote>span:nth-child(2) { grid-row:2; }
.hero-footnote>span:nth-child(3) {
  grid-column:3;
  grid-row:1/3;
  justify-self:start;
}

.hero .launch-context {
  position:relative;
  top:0;
}

/* Sharing/footer stay quiet; the two narrative panels use one glass surface
   each instead of separate, fuzzy contrast patches behind their children. */
.spread>div,.footer-inner,.footer-legal {
  position:relative;
  isolation:isolate;
}
.spread>div:before,.footer-inner:before,.footer-legal:before {
  content:'';
  position:absolute;
  inset:0 -14px;
  z-index:-1;
  pointer-events:none;
  background:#05140ff2;
  filter:blur(16px);
}

.scroll-cue {
  display:none;
  align-items:center;
  gap:25px;
  font-size:10px;
  letter-spacing:.03em;
  color:var(--muted);
}

.scroll-cue span {
  font-size:18px;
}

/* The illustrative product moment makes the concept concrete without implying a live app. */
.idea-section {
  padding:46px 0 108px;
  background:transparent;
}

.idea-section>.wrap {
  width:65.6%;
  max-width:1060px;
}

.section-intro {
  display:block;
}

.section-intro .eyebrow {
  grid-column:1/-1;
  margin-bottom:23px;
  color:var(--gold);
}

.experience-grid {
  display:grid;
  grid-template-columns:minmax(0,1.065fr) minmax(0,1fr);
  gap:90px;
  margin-top:38px;
  padding-inline:32px 56px;
  align-items:start;
}

.experience-visual {
  position:relative;
  width:100%;
  margin:0 auto;
}

.example-disclaimer {
  text-align:center;
  color:#b9c2b2;
  position:relative;
  z-index:1;
  margin-top:21px;
}

.steps {
  padding-block:8px;
}

.step {
  display:grid;
  grid-template-columns:44px 1fr;
  gap:33px;
  padding:29px 0;
  border-bottom:1px solid #b793555c;
}

.step:first-child {
  padding-top:0;
}

.step-number {
  width:44px;
  height:44px;
  border:1px solid #b79355;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:16px;
  color:var(--ink);
}

.step h3 {
  font-size:20px;
  font-weight:400;
}

.step:last-of-type {
  border-bottom:0;
}

h3 {
  font-size:20px;
  line-height:1.4;
  letter-spacing:-.035em;
  font-weight:600;
}

.step p {
  font-size:15px;
  color:#c0c8b9;
  line-height:1.7;
  margin-top:12px;
  max-width:310px;
}

.steps>.text-link {
  margin-top:24px;
}

/* Quiet section rules preserve one unbroken sculptural environment. */
.together-section {
  min-height:calc(100svh - 110px);
  padding:65px 0 76px;
  background:transparent;
  border-block:1px solid var(--line);
  color:var(--paper);
  position:relative;
}

.together-section>.wrap,.questions-section.wrap {
  width:56%;
  max-width:920px;
}

.together-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.together-heading .eyebrow {
  color:var(--gold-light);
}

.together-note {
  font-family:var(--sans);
  font-style:italic;
  font-size:15px;
  line-height:1.5;
  color:#cad4bd;
  text-align:right;
}

.together-inner {
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:48px;
  align-items:center;
  margin-top:40px;
}

.together-section h2 {
  font-size:clamp(44px,3.92vw,60px);
  line-height:1.12;
}

.together-copy p {
  font-size:14px;
  line-height:1.9;
  color:#d4ddce;
}

.together-copy p:first-child {
  font-size:17px;
  letter-spacing:-.025em;
  color:var(--paper);
  margin-bottom:13px;
}

.together-copy .button {
  margin-top:24px;
}

.benefits {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:38px;
  margin-top:62px;
}

.benefit {
  border-top:1px solid #5a7160;
  padding-top:23px;
}

.benefit-symbol {
  display:block;
  font-size:34px;
  font-weight:400;
  line-height:1;
  margin-bottom:23px;
  color:var(--gold-light);
}

.benefit h3 {
  font-size:18px;
  margin-bottom:12px;
}

.benefit p {
  font-size:14px;
  line-height:1.85;
  color:#c3d0bf;
  max-width:310px;
}

.questions-section {
  display:grid;
  min-height:calc(100svh - 110px);
  grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  align-content:start;
  gap:48px;
  padding-block:99px;
}

.questions-intro .eyebrow {
  color:var(--gold);
  margin-bottom:23px;
}

.questions-intro h2 {
  font-size:42px;
}

.questions-intro>p:last-child {
  font-size:12px;
  color:var(--muted);
  line-height:1.8;
  margin-top:25px;
}

.questions-intro .text-link {
  margin-top:6px;
  color:var(--gold);
}

.questions-list {
  padding-top:1px;
}

.faq-item {
  border-bottom:1px solid var(--line);
  padding:23px 0;
}

.faq-item:first-child {
  border-top:1px solid var(--line);
}

.faq-item h3 {

  margin-bottom:12px;
}

.faq-item p {

  color:var(--muted);
  padding-right:16px;
}

/* One native form and a truthful post-success state; no modal, forced sharing, or tracking. */
.closing {
  background:transparent;
  padding-top:110px;
}

.closing-grid {
  display:grid;
  width:65.6%;
  max-width:1060px;
  grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:64px;
  align-items:start;
}

.closing-copy {
  min-width:0;
  padding:19px 0 0 80px;
}

.closing-copy .eyebrow {
  margin-bottom:29px;
}

.closing-copy>p:not(.eyebrow) {

  margin-top:32px;
  color:#c0c8b9;
  max-width:380px;
}

.signup-expectations {
  display:flex;
  flex-direction:column;
  gap:0;
  font-size:13px;
  margin-top:28px;
}

.signup-expectations>span {
  display:flex;
  gap:18px;
  align-items:center;
  padding-block:15px;
}

.signup-expectations>span+span {
  border-top:1px solid var(--line);
}

.signup-expectations>span>span {
  font-size:13px;
  color:var(--gold);
}

.waitlist-form {
  --ink:#172f27;
  --muted:#5d665e;
  --line:#d9dbcf;
  --gold:#89652e;
  color:var(--ink);
  padding:46px 46px 36px;
  background:#eeeadf;
  border:1px solid #c7cfbc;
  box-shadow:0 20px 60px #00000024;
  border-radius:6px;
  text-align:left;
  min-width:0;
}

.form-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:var(--gold);
  margin-bottom:32px;
}

.form-heading .eyebrow {
  font-size:10px;
  letter-spacing:.13em;
}

.form-heading>span:last-child {
  display:none;
}

.waitlist-form h3 {
  font-size:25px;
  font-weight:400;
  letter-spacing:-.045em;
  line-height:1.25;
}

.waitlist-form fieldset {
  border:0;
  padding:0;
  margin:0;
  min-width:0;
}

.waitlist-form label {
  display:block;

  margin:29px 0 6px;
}

.waitlist-form input:not([type=checkbox]),.share-fallback input {
  display:block;
  width:100%;
  min-width:0;
  min-height:48px;
  padding:12px 14px;
  background:#eeeadf;
  color:#172f27;
  border:1px solid #75836e;
  border-radius:4px;
  font:inherit;
}

.waitlist-form input::placeholder {
  color:#72766a;
}

.waitlist-form input[aria-invalid=true] {
  border-color:#a03524;
}

.waitlist-form .waitlist-choice {
  display:flex;
  align-items:center;
  gap:10px;
  margin:14px 0 19px;
  min-height:36px;
  cursor:pointer;
}

.waitlist-choice input {
  width:18px;
  height:18px;
  accent-color:var(--green);
  flex-shrink:0;
  margin:0;
}

.waitlist-form button {
  width:100%;
  min-height:52px;
  border:0;
  border-radius:4px;
  background:var(--green);
  color:white;
  font:inherit;
  font-size:15px;
  font-weight:400;
  cursor:pointer;
  padding:14px 18px;
  transition:background .2s;
}

.waitlist-form button:hover:not(:disabled) {
  background:#245544;
}

.waitlist-form button:disabled,.waitlist-form input:disabled {
  opacity:.55;
  cursor:not-allowed;
}

.waitlist-notice {

  margin-top:22px;
  color:var(--muted);
}

.waitlist-reassurance {
  font-size:12px;
  line-height:1.75;
  margin-top:16px;
  color:var(--ink);
}

.closing-copy>p.closing-alternative {
  font-size:14px;
  line-height:1.8;
  margin-top:20px;
}

.waitlist-status {

  margin-top:12px;
  color:var(--green);
}

.waitlist-status:empty {
  margin-top:0;
}

.field-error {
  display:block;
  color:#a03524;

  margin-top:5px;
}

.field-error:empty {
  display:none;
}

.waitlist-success {
  border-top:1px solid var(--line);
  padding-top:21px;
  margin-top:19px;
}

.success-check {
  font-size:17px;
  display:grid;
  place-items:center;
  width:33px;
  height:33px;
  border-radius:50%;
  background:#e7eddc;
  margin-bottom:11px;
  color:var(--green);
}

.waitlist-success h4 {
  font-family:var(--sans);
  font-weight:400;
  font-size:23px;
  line-height:1.2;
  letter-spacing:-.025em;
}

.waitlist-success p {
  font-size:12px;
  line-height:1.8;
  color:var(--muted);
  margin:10px 0;
}

.waitlist-success .text-link {
  font-size:12px;
}

.is-success #waitlist-submit {
  opacity:1;
  background:#dce6d1;
  color:var(--green);
}

.spread {
  display:flex;
  flex-direction:column;
  max-width:560px;
  gap:18px;
  align-items:center;
  text-align:center;
  border-top:1px solid var(--line);
  margin-top:193px;
  padding-block:36px 42px;
}

.spread .eyebrow {
  justify-content:center;
  font-size:8px;
  color:var(--gold);
  margin-bottom:11px;
}

.spread h3 {
  font-size:21px;
  font-weight:400;
  letter-spacing:-.025em;
}

.spread>div>p:last-child {
  font-size:12px;
  color:var(--muted);
  margin-top:8px;
}

.share-controls {
  align-self:center;
  justify-self:center;
  max-width:100%;
  min-width:0;
}

.share-buttons {
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:11px;
  align-items:center;
}

.share-buttons .button {
  min-height:45px;
  padding:11px 15px;
  font-size:11px;
  gap:17px;
}

.share-buttons .button span {
  font-size:17px;
}

.share-email {
  position:relative;
  font-size:11px;
  padding:15px 0;
  margin-left:7px;
  white-space:nowrap;
}

.share-email>span {
  margin-left:9px;
}

.share-status {
  font-size:11px;
  line-height:1.7;
  margin-top:8px;
  color:var(--gold-light);
}

.share-status:empty {
  margin-top:0;
}

.share-fallback {
  margin-top:12px;
}

.share-fallback label {
  display:block;
  font-size:11px;
  line-height:1.6;
  margin-bottom:8px;
}

.site-footer {
  padding:30px 0 clamp(110px,14vh,170px);
}

.site-footer .wrap {
  max-width:560px;
}

.footer-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  padding-bottom:26px;
  border-bottom:1px solid var(--line);
}

.footer-inner .wordmark {
  font-size:22px;
}

.footer-inner>p {

  color:var(--muted);
}

.back-top {
  white-space:nowrap;
  flex-shrink:0;
  display:flex;
  align-items:center;
  gap:18px;
  min-height:44px;
}

.back-top>span {
  font-size:19px;
}

.footer-legal {
  display:flex;
  justify-content:space-between;

  color:var(--muted);
  padding-top:18px;
}

.footer-inner>p,.footer-legal {
  text-shadow:0 1px 5px #05140f,0 0 12px #05140f;
}

@media(max-width:1150px) {
  .wrap,.idea-section>.wrap,.closing-grid { width:78%; }
  .together-section>.wrap,.questions-section.wrap { width:68%; }
  .header-inner { gap:24px; }
  nav { gap:23px; }

  .launch-note { gap:20px; padding-inline:15px; }

  .section-intro,.experience-grid,.together-inner,.closing-grid { column-gap:42px; }
  .experience-grid { padding-inline:0; }
  .experience-visual { padding:0; }
  .closing-copy { padding-left:0; }
  .benefits { gap:32px; }
  .questions-section { gap:45px; }
  .questions-intro h2 { font-size:40px; }

  .waitlist-form { padding-inline:26px; }
  .spread { gap:30px; }
  .share-buttons .button { padding-inline:12px; gap:12px; }
  .share-email { margin-left:0; }
}

@media(max-width:900px) {
  .wrap,.idea-section>.wrap,.closing-grid,.together-section>.wrap,.questions-section.wrap { width:82%; }
  .together-section,.questions-section { min-height:0; }
  .header-inner { min-height:78px; gap:16px; }
  nav { gap:18px; }

  .brand { gap:6px; }
  .launch-note { padding-inline:13px; gap:15px; }
  .hero { min-height:max(690px,calc(100svh - 78px)); padding-block:72px 145px; }
  .hero-footnote { bottom:30px; }

  .hero .eyebrow { font-size:9px; }

  .hero-detail { font-size:14px; }
  .idea-section { padding-block:76px; }
  .section-intro { column-gap:35px; }

  .experience-grid { grid-template-columns:1fr; gap:38px; }
  .experience-visual { width:100%; max-width:426px; margin-inline:auto; padding:0; }
  .steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
  .step { grid-template-columns:1fr; gap:14px; padding-block:0 24px; }
  .step h3 { font-size:17px; }
  .step p { font-size:14px; }
  .steps>.text-link { grid-column:1/-1; margin-top:0; }
  .together-inner { grid-template-columns:1fr; gap:28px; }
  .together-section h2 { font-size:62px; }
  .together-copy { max-width:540px; }
  .benefits { gap:25px; margin-top:45px; }
  .benefit h3 { font-size:17px; }
  .benefit p { font-size:13px; }
  .questions-section { grid-template-columns:1fr; gap:32px; padding-block:76px; }
  .questions-intro h2 { font-size:43px; }
  .closing { padding-top:70px; }
  .closing-grid { grid-template-columns:1fr; gap:38px; }
  .closing-copy { max-width:590px; padding:0; margin-inline:auto; text-align:center; }
  .closing-copy .eyebrow { justify-content:center; }
  .closing-copy>p:not(.eyebrow) { margin-inline:auto; }
  .signup-expectations { align-items:center; }
  .signup-expectations>span { min-width:270px; }

  .waitlist-form { width:100%; max-width:480px; padding:36px; margin-inline:auto; }
  .spread { grid-template-columns:1fr; gap:24px; margin-top:58px; }
  .share-controls { justify-self:start; }
  .footer-inner>p { max-width:220px; text-align:center; }
}

@media(max-width:850px) {
  /* Only the static vector fallback needs a compact crop; live 3D owns its viewport geometry. */
  .fallback-left { transform:scaleX(.48); transform-origin:0 0; transform-box:view-box; }
  .fallback-right { transform:scaleX(.48); transform-origin:100% 0; transform-box:view-box; }
  .fallback-dust { opacity:.2; }
  .site-header:before {
    mask-image:linear-gradient(90deg,#0000 0%,#000 7% 93%,#0000 100%);
  }
}

@media(max-width:680px) {
  html { scroll-padding-top:89px; }
  .wrap,.idea-section>.wrap,.closing-grid,.together-section>.wrap,.questions-section.wrap { width:78%; }
  .header-inner.wrap { width:82%; }
  .header-inner { min-height:72px; gap:12px; }
  nav { display:none; }

  .logo-mark { --logo-image-width:35px; --logo-image-height:38px; width:17px; height:32px; }
  .launch-note { gap:16px; padding-inline:12px; }
  .hero { min-height:max(710px,calc(100svh - 72px)); padding-block:63px 99px; }
  .hero-copy { position:relative; top:-22px; }
  .hero .launch-context { top:0; }
  .hero .eyebrow { font-size:8px; letter-spacing:.1em; max-width:290px; margin:auto; }
  .hero h1 { margin:27px 0 24px; }

  .hero-description { max-width:min(76vw,360px); margin-inline:auto; }
  .hero-detail { font-size:14px; line-height:1.8; max-width:min(76vw,380px); margin-top:17px; }
  .hero-actions { gap:22px; margin-top:27px; }
  .hero-actions .text-link { font-size:12px; gap:12px; }
  .launch-context { margin-top:17px; }
  .hero-footnote { min-height:65px; gap:13px; font-size:10px; bottom:24px; }
  .hero-footnote>span+span:before { margin-right:16px; }

  .idea-section { padding-block:61px; }
  .section-intro { display:block; }
  .section-intro .eyebrow { font-size:8px; margin-bottom:20px; }

  .experience-grid { gap:33px; margin-top:34px; }
  .experience-visual { padding:0; }
  .example-disclaimer { margin-top:20px; }
  .steps { display:block; padding:0; }
  .step { grid-template-columns:34px 1fr; gap:14px; padding:24px 0; }
  .step-number { width:32px; height:32px; font-size:13px; }
  .step h3 { font-size:19px; }
  .step p { max-width:450px; }
  .steps>.text-link { margin-top:22px; font-size:13px; }
  .together-section { padding-block:47px 54px; }
  .together-heading .eyebrow { font-size:8px; }
  .together-note { display:none; }
  .together-inner { gap:27px; margin-top:27px; }
  .together-section h2 { font-size:clamp(43px,9.2vw,60px); }
  .together-copy p { font-size:14px; line-height:1.9; }
  .together-copy p:first-child { font-size:17px; }
  .together-copy .button { margin-top:24px; gap:42px; }
  .benefits { grid-template-columns:1fr; gap:26px; margin-top:44px; }
  .benefit { position:relative; padding:24px 0 0 46px; }
  .benefit-symbol { position:absolute; top:23px; left:0; font-size:28px; }
  .benefit h3 { font-size:19px; margin-bottom:9px; }
  .benefit p { font-size:14px; max-width:430px; }
  .questions-section { gap:30px; padding-block:60px; }
  .questions-intro h2 { font-size:40px; }
  .questions-intro .eyebrow { font-size:8px; margin-bottom:19px; }
  .questions-intro>p:last-child { margin-top:18px; }
  .questions-list .faq-item { padding-block:22px; }
  .questions-list .faq-item p { padding-right:0; }
  .closing { padding-top:54px; }
  .closing-grid { gap:32px; }
  .closing-copy .eyebrow { margin-bottom:22px; font-size:8px; }

  .closing-copy>p:not(.eyebrow) { margin-top:24px; max-width:430px; }
  .signup-expectations { gap:0; margin-top:20px; font-size:11px; }
  .signup-expectations>span { padding-block:10px; min-width:0; }
  .waitlist-form { padding:27px 22px; }
  .form-heading { display:none; }
  .form-heading .eyebrow { font-size:8px; }
  .waitlist-form h3 { font-family:var(--sans); font-size:25px; text-align:center; }

  .waitlist-form input:not([type=checkbox]) { min-height:51px; }
  .spread { margin-top:40px; padding-block:30px; gap:20px; text-align:center; }
  .spread .eyebrow { justify-content:center; }
  .spread h3 { margin-inline:auto; }
  .share-controls { justify-self:center; }
  .share-buttons { justify-content:center; }
  .spread h3 { font-size:22px; line-height:1.4; max-width:330px; }
  .spread .eyebrow { font-size:8px; }
  .spread>div>p:last-child { font-size:13px; }
  .share-buttons { gap:10px; }
  .share-buttons .button { font-size:11px; padding-inline:12px; gap:10px; }
  .share-email { font-size:11px; margin-left:3px; }
  .site-footer { padding-block:26px 110px; }
  .footer-inner { flex-wrap:wrap; gap:12px; padding-bottom:23px; }
  .footer-inner .brand { order:0; }
  .footer-inner>p { order:2; width:100%; max-width:none; margin-top:7px; text-align:left; }
  .back-top { order:1; margin-left:auto; gap:12px; }
  .footer-legal { gap:20px; padding-top:17px; }
}

@media(max-width:400px) {
  .wrap,.idea-section>.wrap,.closing-grid,.together-section>.wrap,.questions-section.wrap { width:80%; }

  .brand { gap:4px; }
  .logo-mark { width:17px; }
  .launch-note { padding-inline:10px; gap:10px; }
  .hero { padding-block:57px 91px; }

  .hero .eyebrow { font-size:8px; max-width:255px; }

  .hero-actions { flex-direction:column; gap:20px; }
  .hero-footnote { font-size:9px; gap:9px; }
  .hero-footnote>span+span:before { margin-right:9px; }

  h2,.questions-intro h2 { font-size:36px; }
  .experience-visual { padding:0; }
  .waitlist-form { padding-inline:18px; }
  .waitlist-form h3 { font-size:23px; }
  .share-buttons { gap:8px; }
  .share-email { margin-left:0; }
}

/* One shared pane width, measured against the former widest story/closing
   container (65.6%, capped at 1060px). No blur: retain architectural detail
   through a teal laminate, with a crisp rim and restrained reflected light. */
.section-panel.wrap {
  --panel-width:65.6%;
  width:min(var(--panel-width),1060px);
  max-width:none;
  position:relative;
  isolation:isolate;
  padding:clamp(28px,3.4vw,52px);
  border:1px solid #a7cfc424;
  border-top-color:#c2ded43d;
  border-radius:16px;
  background:
    linear-gradient(125deg,#d9fff006,transparent 36%,#6ac8be03 75%,#bce7db05),
    linear-gradient(150deg,#06242099,#0317148f 58%,#05211e80);
  -webkit-backdrop-filter:saturate(105%);
  backdrop-filter:saturate(105%);
  box-shadow:inset 0 1px 0 #effffb0a,inset 0 -1px 0 #00120e60,0 20px 48px #00000020;
}
.idea-section { padding:46px 0 36px; }
.together-section { min-height:0; padding:36px 0; border:0; }
.questions-section.section-panel { min-height:0; margin-block:36px; }
.closing { padding-top:36px; }
.section-panel .experience-grid { padding-inline:0; gap:48px; }
.section-panel .closing-copy { padding-left:0; }

@media(max-width:1150px) {
  .section-panel.wrap { --panel-width:78%; }
  .section-panel .experience-grid { gap:36px; }
}
@media(max-width:900px) {
  .section-panel.wrap { --panel-width:82%; padding:32px; }
}
@media(max-width:600px) {
  /* Add pane gutters outside the existing mobile reading width, not inside it. */
  .section-panel.wrap { --panel-width:calc(100% - 32px); padding:28px 20px; border-radius:12px; }
  .idea-section { padding-block:42px 24px; }
  .together-section { padding-block:24px; }
  .questions-section.section-panel { margin-block:24px; }
  .closing { padding-top:24px; }
}
@media(max-width:400px) {
  .section-panel.wrap { --panel-width:calc(100% - 24px); padding-inline:16px; }
}

/* The pared-back discovery story: one example, then questions beside signup. */
.hero { padding-block:80px 110px; }
.hero h1 { max-width:860px; margin:0 auto 30px;  }

.hero-description { max-width:570px; margin-inline:auto;  }
.hero .launch-context { margin-top:24px; }
.section-intro h2 { max-width:680px; }
.section-panel .experience-grid { grid-template-columns:.85fr 1.15fr; align-items:center; }
.example-copy { min-width:0; }
.example-copy strong { color:var(--ink); font-weight:500; }

.example-copy p+p { margin-top:28px; color:var(--muted);   }

/* "Request an invitation" follows the film in the page, so in one column it comes
   after the film and its caption. In two it sits under the copy, beside the film,
   and the flexible rows around the pair keep it centred against the film's
   column, as the copy alone was. */
.example-actions { display:flex; }
@media(min-width:901px) {
  .section-panel .experience-grid { grid-template-rows:1fr auto auto 1fr; row-gap:0; }
  .example-copy { grid-row:2; grid-column:1; }
  .example-actions { grid-row:3; grid-column:1; margin-top:36px; }
  .experience-visual { grid-row:1 / -1; grid-column:2; }
}

.closing { padding-bottom:70px; }
.closing-grid { align-items:start; }

.closing-copy .questions-list { margin-top:32px; text-align:left; }
.closing-copy .faq-item:last-child { padding-bottom:0; border-bottom:0; }

.closing-copy .faq-item p { padding-right:0; }
.waitlist-form fieldset>label:first-of-type { margin-top:0; }
.footer-share { padding-block:16px 8px; }
.footer-share .share-buttons { justify-content:flex-start; gap:12px 24px; }
.footer-share .button,.footer-share .share-email {
  min-height:44px; padding:10px 0; border:0; border-radius:0; background:transparent;
  color:var(--muted);  box-shadow:none; gap:10px; margin:0;
  text-decoration:underline; text-underline-offset:5px;
}
.footer-share .button:hover,.footer-share .share-email:hover { color:var(--gold-light); transform:none; }
.footer-share .share-fallback { max-width:360px; }

@media(max-width:900px) {
  .hero { padding-block:70px 100px; }

  .section-panel .experience-grid { grid-template-columns:1fr; gap:32px; }
  .example-copy { max-width:540px; }
  .example-copy p+p { margin-top:18px; }
  .example-actions { justify-content:center; }
  .closing-copy { text-align:left; max-width:480px; }
  .closing { padding-bottom:44px; }
}
@media(max-width:680px) {
  .hero { min-height:calc(100svh - 72px); padding-block:64px 84px; }
  .hero-copy { top:0; }
  .hero h1 { margin:0 auto 26px; }

  .closing-copy>p:not(.eyebrow) { margin-top:22px; }
  .closing-copy .questions-list { margin-top:26px; }

}

@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*:before,*:after { animation:none!important; transition:none!important; }
  .button:hover { transform:none; }
}

/* Reading-first typography: a single source of truth across breakpoints.
   Rem-based minimums keep practical copy readable when text is enlarged. */
body { font-family:var(--sans); font-size:1rem; font-weight:400; line-height:1.65; letter-spacing:0; }
.hero h1,h2,.closing h2 {
  font-family:var(--sans); font-weight:400; font-style:normal;
  line-height:1.15; letter-spacing:-.02em; word-spacing:normal;
  overflow-wrap:break-word;
}
.hero h1 { font-size:clamp(2.25rem,5vw,4rem); }
h2,.closing h2 { font-size:clamp(2rem,3.5vw,2.75rem); }
.heading-accent { color:var(--gold); }
.hero-description,.example-copy p,.closing-copy>p:not(.eyebrow) {
  font-size:clamp(1.125rem,1.5vw,1.25rem); line-height:1.65; letter-spacing:0;
}
.example-copy p+p,.faq-item p,.questions-list .faq-item p {
  font-size:1rem; line-height:1.65; letter-spacing:0;
}
.faq-item h3,.closing-copy .faq-item h3 { font-size:1rem; line-height:1.5; font-weight:500; letter-spacing:0; }
nav,.launch-note,.hero-actions .button,.button,.text-link,.back-top,
.example-disclaimer,
.launch-context,.hero .launch-context,.waitlist-form label,.waitlist-form .waitlist-choice,
.waitlist-notice,.waitlist-status,.field-error,.waitlist-success,
.footer-share .button,.footer-share .share-email,.share-status,.share-fallback label {
  font-size:.875rem; line-height:1.65; letter-spacing:0;
}
nav,.launch-note,.button,.text-link,.back-top,.waitlist-form label { font-weight:500; }
.waitlist-form input:not([type=checkbox]),.share-fallback input {
  font-family:var(--sans); font-size:1rem; line-height:1.5;
}
.waitlist-form input::placeholder { font-size:1rem; }
.waitlist-form button { font-family:var(--sans); font-size:1rem; font-weight:500; line-height:1.5; }
.wordmark { font-size:1.125rem; letter-spacing:.12em; font-weight:400; }
.footer-inner .wordmark { font-size:1.375rem; }
.footer-inner>p { font-family:var(--serif); font-size:1.375rem; font-weight:400; font-style:normal; line-height:1.4; letter-spacing:0; font-optical-sizing:auto; }
.footer-legal { font-size:.75rem; line-height:1.65; }
/* Text must be allowed to reflow inside grid/flex children, including zoom. */
.header-inner>* ,.footer-inner>* { min-width:0; }
.waitlist-form,.footer-legal { overflow-wrap:anywhere; }
.header-inner { flex-wrap:wrap; }
.launch-note { flex-shrink:0; max-width:100%; }
.footer-inner { flex-wrap:wrap; }
.back-top { white-space:normal; }
/* Keep navigation in the wrapping header flow when fonts are enlarged. */
.header-inner nav { position:static; transform:none; flex-wrap:wrap; justify-content:center; max-width:100%; }

/* The how-it-works film: transparent, so the panel shows through it. Its place
   keeps the room for the film and its controls while it plays in the corner. */
.film-slot { position:relative; aspect-ratio:4/5; margin-bottom:60px; }
.film-frame { position:absolute; inset:0 0 auto; }
.film-screen { position:relative; }
.film { display:block; width:100%; height:auto; aspect-ratio:4/5; }
.film-controls { display:flex; justify-content:center; gap:6px; margin-top:12px; }
.film-control,.film-close {
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; padding:0; border:1px solid #acb79d80; border-radius:50%;
  background:#081b16b8; color:var(--ink); font-size:20px; transition:background .2s;
}
.film-control:hover,.film-close:hover { background:#244334; }
/* A 48px touch target around the 40px face. */
.film-control:after,.film-close:after { content:''; position:absolute; inset:-4px; border-radius:50%; }
.film-frame:not([data-playing]) .icon-pause,.film-frame[data-playing] .icon-play,
.film-frame:not([data-heard]) [data-film-sound] .icon-sound-on,
.film-frame[data-heard] [data-film-sound] .icon-sound-off { display:none; }

/* The loading screen, over the film until it can play. */
.film-loading {
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  color:var(--muted); font-size:.875rem; line-height:1.65; pointer-events:none;
}
.film-spinner {
  width:32px; height:32px; border:2px solid #c6a36433; border-top-color:var(--gold); border-radius:50%;
  animation:film-spin .9s linear infinite;
}
@keyframes film-spin { to { transform:rotate(1turn); } }

/* Sound, offered where the browser held it back until a click. */
.film-sound-prompt {
  position:absolute; left:50%; bottom:6%; transform:translateX(-50%);
  display:inline-flex; align-items:center; gap:10px; min-height:40px; padding:8px 16px;
  border:1px solid #ffffff45; border-radius:999px; background:var(--action-ivory); color:var(--action-ink);
  font-size:.875rem; font-weight:500; line-height:1.2; white-space:nowrap; box-shadow:0 6px 18px #0000004d;
}
.film-sound-prompt:hover { background:var(--action-ivory-hover); }
.film-sound-prompt .icon { font-size:18px; }

/* The corner player: the same film and controls, small, over the page. */
.film-frame[data-floating] {
  position:fixed; inset:auto max(16px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) auto;
  z-index:30; width:clamp(200px,18vw,264px); padding:10px 10px 8px;
  border:1px solid #b8c4ac40; border-radius:14px;
  background:linear-gradient(150deg,#062420f5,#031714f5 58%,#05211ef5); box-shadow:0 18px 48px #00000080;
  animation:film-rise .35s ease-out;
}
@keyframes film-rise { from { opacity:0; transform:translateY(12px); } }
.film-frame[data-floating] .film-controls { gap:4px; margin-top:8px; }
.film-frame[data-floating] .film-control { width:30px; height:30px; font-size:15px; }
.film-frame[data-floating] .film-sound-prompt { gap:8px; min-height:34px; padding:6px 12px; }
.film-close { position:absolute; top:-14px; right:-14px; width:32px; height:32px; font-size:16px; background:#0b221c; }
@media(max-width:680px) {
  /* On a phone the corner player is the film alone, clear of the hero's action:
     a tap pauses it, and its full controls wait in its place in the page. */
  .film-frame[data-floating] { width:min(44vw,200px); padding:8px; }
  .film-frame[data-floating] .film-controls { display:none; }
  .film-frame[data-floating] .film-sound-prompt { gap:6px; min-height:30px; padding:4px 10px; font-size:.75rem; }
  .film-frame[data-floating] .film-sound-prompt .icon { font-size:14px; }
}