@font-face {
  font-family: "Satoshi";
  src: url("fonts/Satoshi-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Satoshi";
  src: url("fonts/Satoshi-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --ivory: #faf9f7;
  --paper: #ffffff;
  --ink: #2c2c2a;
  --soft: #6b655b;
  --muted: #9b9890;
  --border: #eaeaea;
  --eucalyptus: #A7B8AB;
  --deep: #4a6e62;
  --red: #c0433a;
  --display: "Satoshi", "Inter", "SF Pro Text", "Helvetica Neue", sans-serif;
  --ui: "Satoshi", "Inter", "SF Pro Text", "Helvetica Neue", sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --content: min(1180px, calc(100% - 64px));
}

* {
  box-sizing: border-box;
}

html {
  background: var(--ivory);
  scroll-behavior: smooth;
}

body {
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background: var(--ivory);
  font-family: var(--ui);
  font-weight: 400;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

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

button,
input {
  font: inherit;
}

button {
  color: inherit;
}

h1,
h2,
p {
  margin: 0;
}

h1,
h2 {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
}

::selection {
  color: var(--paper);
  background: var(--eucalyptus);
}

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

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 2000;
  padding: 12px 17px;
  color: var(--paper);
  background: var(--ink);
  border-radius: 24px;
  box-shadow: 0 10px 30px rgba(32, 34, 31, 0.16);
  font: 500 13px / 1 var(--ui);
  transform: translateY(-160%);
  transition: transform 0.25s var(--ease);
}

.skip-link:focus {
  outline: none;
  transform: translateY(0);
}

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

.launch-curtain {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  color: var(--ink);
  background: var(--ivory);
  clip-path: inset(0 0 0 0);
  transition: clip-path 1.05s var(--ease), visibility 1.05s;
}

.launch-curtain.is-hidden {
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
}

.launch-curtain img {
  display: block;
  height: clamp(26px, 3vw, 42px);
  width: auto;
  animation: mark-in 1.05s var(--ease) both;
}

@keyframes mark-in {
  from {
    opacity: 0;
    filter: blur(12px);
    letter-spacing: 0.3em;
    transform: translateY(12px) scale(0.985);
  }
}

.site-header {
  position: fixed;
  top: 18px;
  left: 50%;
  z-index: 800;
  width: min(1180px, calc(100% - 40px));
  min-height: 66px;
  padding: 7px 8px 7px 28px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  opacity: 0;
  transform: translate(-50%, -14px);
  border: 1px solid rgba(234, 234, 234, 0.78);
  border-radius: 33px;
  background: rgba(255, 254, 250, 0.78);
  box-shadow: 0 14px 38px rgba(32, 34, 31, 0.08);
  backdrop-filter: blur(24px) saturate(135%);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease), background 0.35s ease, box-shadow 0.35s ease;
}

body.is-ready .site-header {
  opacity: 1;
  transform: translate(-50%, 0);
}

.site-header.is-scrolled {
  background: rgba(255, 254, 250, 0.95);
  box-shadow: 0 10px 28px rgba(32, 34, 31, 0.09);
}

.wordmark {
  justify-self: start;
  color: var(--ink);
  font-family: "Satoshi", "Inter", "SF Pro Text", "Helvetica Neue", sans-serif;
  font-size: 19px;
  font-weight: 400;
  line-height: 1;
  font-feature-settings: "kern" 1, "liga" 1;
  font-kerning: normal;
  letter-spacing: 0.115em;
  text-indent: 0.115em;
  -webkit-font-smoothing: antialiased;
  -webkit-text-fill-color: var(--ink);
  white-space: nowrap;
  transition: color 0.25s ease;
}

.wordmark:hover {
  color: var(--deep);
  -webkit-text-fill-color: var(--deep);
}
.wordmark-mark {
  width: auto;
  height: 26px;
  margin-right: 17px;
  flex: none;
  display: inline-block;
  vertical-align: middle;
}

.wordmark-type {
  height: 13px;
  width: auto;
  display: inline-block;
  vertical-align: middle;
  transition: opacity 0.25s ease;
}

.wordmark:hover .wordmark-type {
  opacity: 0.72;
}

.closing footer .wordmark-mark {
  height: 22px;
  margin-right: 14px;
}

.closing footer .wordmark-type {
  height: 10px;
}

.site-header > .wordmark {
  width: max-content;
  height: 100%;
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  align-self: stretch;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 34px;
}

.site-nav a {
  position: relative;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--soft);
  font-family: var(--display);
  font-size: 14px;
  font-weight: 400;
  transition: color 0.25s ease;
}

.site-nav a:hover,
.site-nav a.is-active {
  color: var(--ink);
}

.site-nav a.is-active::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 2px;
  left: 0;
  width: 18px;
  height: 2px;
  margin: auto;
  border-radius: 1px;
  background: var(--eucalyptus);
}

.header-actions {
  justify-self: end;
  display: flex;
  align-items: center;
}

.header-social {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-right: 20px;
}

.header-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--soft);
  transition: color 0.3s var(--ease), transform 0.3s var(--ease);
}

.header-social a:hover,
.header-social a:focus-visible {
  color: var(--ink);
  transform: translateY(-1px);
}

.header-social svg {
  display: block;
}

.header-cta {
  min-width: 128px;
  height: 50px;
  padding: 0 21px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 25px;
  color: var(--paper);
  background: var(--ink);
  font-family: var(--display);
  font-size: 13.5px;
  font-weight: 400;
  transition: transform 0.3s var(--ease), background 0.3s ease;
}

.header-cta:hover {
  transform: translateY(-2px);
  background: var(--deep);
}

.hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  background: var(--ivory);
}

.hero-inner {
  position: relative;
  z-index: 1;
  width: var(--content);
  min-height: 100svh;
  margin: 0 auto;
  padding: 164px 0 72px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
  align-items: center;
  gap: 56px;
}

.hero-copy {
  max-width: 620px;
}

.eyebrow {
  margin-bottom: 23px;
  color: var(--eucalyptus);
  font-size: 13px;
  font-weight: 500;
}

.hero h1 {
  max-width: 760px;
  color: var(--ink);
  font-size: clamp(50px, 5.3vw, 74px);
  line-height: 0.99;
}

.hero h1 span {
  display: block;
}

.hero h1 span:last-child {
  color: var(--eucalyptus);
}

body.is-ready .hero-copy.is-visible h1 span {
  animation: headline-in 0.92s var(--ease) both;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

body.is-ready .hero-copy.is-visible h1 span:nth-child(2) {
  animation-delay: 0.08s;
}

body.is-ready .hero-copy.is-visible h1 span:nth-child(3) {
  animation-delay: 0.16s;
}

@keyframes headline-in {
  from {
    opacity: 0;
    transform: translateY(28px) scale(0.992);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.hero-intro {
  max-width: 580px;
  margin-top: 32px;
  color: var(--soft);
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.62;
}

.hero-signup {
  width: 100%;
}

.waitlist-form {
  position: relative;
  width: min(590px, 100%);
  min-height: 64px;
  margin-top: 38px;
  padding: 6px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  border: 1px solid rgba(234, 234, 234, 0.82);
  border-radius: 30px;
  background: rgba(255, 254, 250, 0.84);
  box-shadow: 0 18px 44px rgba(32, 34, 31, 0.09);
  backdrop-filter: blur(22px) saturate(130%);
}

.waitlist-form input {
  min-width: 0;
  height: 52px;
  padding: 0 20px;
  border: 0;
  outline: 0;
  color: var(--ink);
  background: transparent;
  font-size: 14px;
}

.waitlist-form input::placeholder {
  color: var(--muted);
}

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

.waitlist-form button {
  height: 52px;
  padding: 0 24px;
  border: 0;
  border-radius: 24px;
  color: var(--paper);
  background: var(--ink);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: transform 0.3s var(--ease), background 0.3s ease;
}

.waitlist-form button:hover {
  transform: translateY(-1px);
  background: var(--deep);
}

.waitlist-form button:disabled {
  cursor: wait;
  opacity: 0.72;
}

.waitlist-form.is-success {
  grid-template-columns: 1fr;
}

.waitlist-form.is-success input,
.waitlist-form.is-success button {
  display: none;
}

.form-message {
  position: absolute;
  top: calc(100% + 9px);
  left: 18px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 500;
}

.waitlist-form.is-success .form-message {
  position: static;
  padding: 13px 20px;
  color: var(--deep);
  font-size: 14px;
}

.waitlist-form.has-error {
  box-shadow: 0 0 0 1px rgba(192, 67, 58, 0.38), 0 18px 44px rgba(32, 34, 31, 0.09);
}

.waitlist-form.has-error .form-message {
  color: var(--red);
}

.idea {
  position: relative;
  min-height: 92svh;
  padding: 132px 0 116px;
  display: grid;
  align-items: center;
  overflow: hidden;
  color: var(--ink);
  background: var(--eucalyptus);
}

.idea-inner {
  position: relative;
  z-index: 1;
  width: var(--content);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(430px, 1fr);
  align-items: center;
  gap: 100px;
}

/* The right column is ring plus caption, so its visual centre sits below the
   ring's. This pad offsets the heading by the caption's reserved space, so
   the text centres on the circle itself rather than on the column. */
.idea-heading {
  padding-bottom: 118px;
}

.idea .eyebrow {
  color: rgba(44, 44, 42, 0.86);
}

.idea h2 {
  color: var(--ink);
  font-size: clamp(52px, 6vw, 82px);
  line-height: 0.98;
}

.idea h2 span {
  color: rgba(44, 44, 42, 0.88);
}

.closing {
  position: relative;
  padding: 92px 0 158px;
  display: grid;
  align-items: center;
  overflow: hidden;
  background: var(--paper);
}

.closing-inner {
  position: relative;
  z-index: 1;
  width: var(--content);
  margin: 0 auto;
}

.closing h2 {
  max-width: 760px;
  color: var(--ink);
  font-size: clamp(48px, 5.8vw, 78px);
  line-height: 0.98;
}

.closing-inner > p:not(.eyebrow) {
  max-width: 510px;
  margin-top: 29px;
  color: var(--soft);
  font-size: 16px;
  line-height: 1.65;
}

.waitlist-form-closing {
  margin-top: 34px;
}

.closing footer {
  position: absolute;
  right: max(32px, calc((100vw - 1180px) / 2));
  bottom: 26px;
  left: max(32px, calc((100vw - 1180px) / 2));
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  color: var(--soft);
  font-size: 11px;
}

.closing footer .footer-meta {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 18px;
}

.footer-social {
  display: flex;
  align-items: center;
  gap: 14px;
}

.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--soft);
  transition: color 0.3s var(--ease), transform 0.3s var(--ease);
}

.footer-social a:hover,
.footer-social a:focus-visible {
  color: var(--ink);
  transform: translateY(-1px);
}

.footer-social svg {
  display: block;
}

[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.85s var(--ease), transform 0.85s var(--ease);
  will-change: transform, opacity;
  backface-visibility: hidden;
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 960px) {
  :root {
    --content: calc(100% - 48px);
  }

  .site-nav {
    display: none;
  }

  .site-header {
    grid-template-columns: 1fr auto;
  }

  .idea-inner {
    grid-template-columns: 1fr 0.8fr;
    gap: 54px;
  }
}

@media (max-width: 720px) {
  :root {
    --content: calc(100% - 48px);
  }

  .site-header {
    top: 12px;
    width: calc(100% - 24px);
    min-height: 56px;
    padding: 6px 6px 6px 20px;
    border-radius: 28px;
  }

  .wordmark {
    font-size: 16.5px;
    letter-spacing: 0.105em;
    text-indent: 0.105em;
  }

  .header-social {
    display: none;
  }

  .site-header .wordmark-mark {
    height: 22px;
    margin-right: 14px;
  }

  .site-header .wordmark-type {
    height: 11px;
  }

  .site-header > .wordmark {
    height: 44px;
    min-height: 44px;
  }

  .header-cta {
    min-width: 112px;
    height: 44px;
    padding: 0 16px;
    font-size: 12px;
  }

  .hero-inner {
    padding: 112px 0 62px;
    align-items: flex-start;
  }

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

  .hero h1 {
    font-size: clamp(39px, 10.3vw, 42px);
    line-height: 1.02;
  }

  .hero-intro {
    margin-top: 25px;
    font-size: 15px;
  }

  .waitlist-form {
    min-height: 0;
    grid-template-columns: minmax(0, 1fr) auto;
    border-radius: 27px;
  }

  .waitlist-form input {
    height: 48px;
  }

  .waitlist-form button {
    width: auto;
    padding-right: 20px;
    padding-left: 20px;
  }

  .idea {
    min-height: auto;
    padding: 108px 0 105px;
  }

  .idea-inner {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 60px;
  }

  .idea h2 {
    font-size: clamp(46px, 13vw, 56px);
  }

  .closing {
    min-height: 92svh;
    padding: 112px 0 178px;
  }

  .closing h2 {
    font-size: clamp(44px, 12.5vw, 54px);
  }

  .closing-inner > p:not(.eyebrow) {
    margin-top: 24px;
    font-size: 15px;
  }

  .closing footer {
    right: 24px;
    bottom: 22px;
    left: 24px;
    grid-template-columns: 1fr auto;
  }

  .closing footer > p:nth-child(2) {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .launch-curtain {
    display: none;
  }

  [data-reveal] {
    opacity: 1;
    transform: none;
  }
}

/* ---------------------------------------------------------------------------
 * Waitlist detail modal (name + mobile capture)
 * ------------------------------------------------------------------------- */
.wl-modal {
  position: fixed;
  inset: 0;
  z-index: 1500;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.wl-modal.is-open { display: flex; }
body.wl-modal-open { overflow: hidden; }
.wl-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(32, 34, 31, 0.42);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.35s var(--ease);
}
.wl-modal.is-open .wl-modal-backdrop { opacity: 1; }
.wl-modal-card {
  position: relative;
  width: 100%;
  max-width: 432px;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 26px;
  box-shadow: 0 40px 90px -40px rgba(32, 34, 31, 0.4);
  padding: 38px 34px 30px;
  transform: translateY(16px) scale(0.985);
  opacity: 0;
  transition: transform 0.42s var(--ease), opacity 0.42s var(--ease);
}
.wl-modal.is-open .wl-modal-card { transform: translateY(0) scale(1); opacity: 1; }
.wl-modal-x {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.wl-modal-x:hover { background: var(--ivory); color: var(--ink); }
.wl-eyebrow { margin: 0 0 10px; color: var(--deep); font: 600 12px/1.2 var(--ui); }
.wl-modal-card h2 { margin: 0; font: 400 32px/1.05 var(--display); color: var(--ink); letter-spacing: 0; }
.wl-sub { margin: 12px 0 24px; color: var(--soft); font-size: 14.5px; line-height: 1.6; }
.wl-field { margin-bottom: 15px; }
.wl-field label { display: block; margin: 0 0 7px; color: var(--soft); font-size: 12px; font-weight: 500; }
.wl-optional { color: var(--muted); font-weight: 400; }
.wl-field input {
  width: 100%;
  height: 52px;
  padding: 0 16px;
  border: 1px solid var(--border);
  border-radius: 15px;
  background: var(--paper);
  color: var(--ink);
  font: 400 15px var(--ui);
  transition: border-color 0.2s, box-shadow 0.2s;
  -webkit-appearance: none;
}
.wl-field input::placeholder { color: #aaa69e; }
.wl-field input:focus { outline: none; border-color: rgba(92, 133, 120, 0.6); box-shadow: 0 0 0 4px rgba(92, 133, 120, 0.1); }
.wl-msg { min-height: 16px; margin: 2px 0 10px; color: var(--red); font-size: 13px; line-height: 1.4; }
.wl-msg:empty { min-height: 0; margin: 0; }
.wl-submit {
  width: 100%;
  height: 52px;
  border: 0;
  border-radius: 26px;
  background: var(--ink);
  color: var(--paper);
  font: 600 14px var(--ui);
  cursor: pointer;
  transition: transform 0.25s var(--ease), background 0.25s ease;
}
.wl-submit:hover { transform: translateY(-1px); background: var(--deep); }
.wl-submit:disabled { opacity: 0.7; cursor: wait; transform: none; }
.wl-skip {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 8px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: 500 13px var(--ui);
  cursor: pointer;
  transition: color 0.2s;
}
.wl-skip:hover { color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .wl-modal-card, .wl-modal-backdrop { transition: none; } }
@media (max-width: 480px) { .wl-modal-card { padding: 32px 24px 26px; } .wl-modal-card h2 { font-size: 28px; } }

/* ===========================================================================
 * Hero: the app, showing "Shop the look"
 *
 * Drawn rather than photographed, so it stays sharp at any size, costs no
 * image weight, and can animate the one gesture the copy is describing.
 * ========================================================================= */
.hero-app {
  justify-self: center;
  /* The stage the device tilts inside. */
  perspective: 1400px;
  perspective-origin: 50% 40%;
}

/* Sized by height, not width: the phone has to fit the viewport on a laptop,
   and its width follows from the aspect ratio rather than fighting it. */
.phone {
  position: relative;
  display: block;
  height: min(660px, 70svh);
  width: auto;
  aspect-ratio: 303 / 637;
  padding: 9px;
  border: 0;
  border-radius: 44px;
  background: linear-gradient(160deg, #1d1e1c, #34352f 55%, #1d1e1c);
  box-shadow: 0 40px 90px rgba(32, 34, 31, 0.22), 0 6px 18px rgba(32, 34, 31, 0.1);
  cursor: pointer;
  transform-style: preserve-3d;
  /* Driven from JS; the defaults keep it flat before any pointer arrives. */
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(var(--sc, 1));
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}

/* While the pointer is actually over it, follow immediately rather than
   easing - a lagging tilt feels broken rather than smooth. */
.hero-app.is-tracking .phone {
  transition: box-shadow 0.5s var(--ease);
}

.hero-app.is-tracking .phone {
  box-shadow: 0 54px 110px rgba(32, 34, 31, 0.26), 0 8px 22px rgba(32, 34, 31, 0.12);
}

.phone:focus-visible {
  outline: 2px solid var(--deep);
  outline-offset: 6px;
}

/* No drawn notch: the screenshots are real captures and already contain the
   dynamic island. Drawing a second one over the top only ever matched at one
   size, and on a small screen it floated free of the island beneath it. */

.phone-screen {
  position: relative;
  display: block;
  height: 100%;
  overflow: hidden;
  border-radius: 36px;
  background: #d9d6cf;
}

/* Two frames of the real app, pixel-aligned. The open frame is identical
   above the sheet, so revealing it from the bottom edge upward reads as the
   sheet expanding rather than as one image replacing another. */
.app-shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: top center;
}

.app-open {
  clip-path: inset(100% 0 0 0);
  transition: clip-path 0.62s var(--ease);
}

.hero-app.is-open .app-open {
  clip-path: inset(0 0 0 0);
}

/* Light raking across the glass, tracking the pointer. */
.glare {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: 36px;
  background: radial-gradient(120px 220px at var(--gx, 30%) var(--gy, 12%),
    rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.06) 45%, transparent 70%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  mix-blend-mode: screen;
}

.hero-app.is-tracking .glare {
  opacity: 1;
}

/* The tap that opens it, over the "Shop the look" bar. Only shown while the
   hero is demonstrating itself; once the visitor takes over it retires. */
.tap-dot {
  position: absolute;
  bottom: 12.5%;
  left: 30%;
  z-index: 2;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.85);
  opacity: 0;
  pointer-events: none;
}

.hero-app.is-demo .tap-dot {
  animation: stl-tap 3.4s var(--ease) infinite;
}

@keyframes stl-tap {
  0%, 10%  { opacity: 0; transform: scale(1.6); }
  18%      { opacity: 1; transform: scale(1); }
  32%      { opacity: 0; transform: scale(0.86); }
  100%     { opacity: 0; }
}

.hero-app-hint {
  margin-top: 16px;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
  opacity: 0;
  transition: opacity 0.45s ease;
}

.hero-app.is-demo .hero-app-hint {
  opacity: 1;
}

/* ===========================================================================
 * The loop, as a loop
 * ========================================================================= */
.idea-lede {
  max-width: 460px;
  margin-top: 26px;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.68;
}

.idea-note {
  margin-top: 18px;
  color: var(--deep);
  font: 500 14px / 1.5 var(--ui);
}

.loop-wrap {
  justify-self: center;
  width: min(490px, 100%);
  display: grid;
  gap: 26px;
}

.loop {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
}

.loop-ring {
  position: absolute;
  inset: 0;
}

.loop-ring svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  transform: rotate(-90deg);
}

.loop-track {
  fill: none;
  stroke: rgba(44, 44, 42, 0.16);
  stroke-width: 1;
}

/* A moving dash: the loop reads as continuous motion, not a static ring. */
.loop-flow {
  fill: none;
  stroke: var(--deep);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 26 803;
  animation: loop-flow 7s linear infinite;
}

@keyframes loop-flow {
  to { stroke-dashoffset: -829; }
}

.loop-steps {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Each step owns a full-size box pinned to the ring's top centre; rotating
   that box swings the step around the rim. No radius arithmetic, and it
   scales with the ring instead of guessing at its width. */
.loop-steps li {
  position: absolute;
  inset: 0;
  padding-top: 8%;
  display: grid;
  place-items: start center;
  transform: rotate(var(--a));
  pointer-events: none;
}

.ls {
  display: grid;
  justify-items: center;
  gap: 3px;
  padding: 9px 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  /* Counter-rotate so every label reads upright wherever it sits. */
  transform: rotate(calc(-1 * var(--a)));
  transition: transform 0.34s var(--ease), background 0.28s ease;
}

.ls-n {
  color: rgba(44, 44, 42, 0.55);
  font: 500 9.5px / 1 var(--ui);
  letter-spacing: 0.06em;
  transition: color 0.28s ease;
}

.ls-w {
  color: var(--ink);
  font: 400 19px / 1.1 var(--display);
  white-space: nowrap;
  transition: font-size 0.34s var(--ease);
}

.ls:hover,
.ls:focus-visible,
.ls.is-on {
  outline: none;
  background: rgba(255, 254, 250, 0.5);
  transform: rotate(calc(-1 * var(--a))) scale(1.16);
}

.ls:hover .ls-n,
.ls:focus-visible .ls-n,
.ls.is-on .ls-n {
  color: var(--deep);
}

/* The hub. Wardrobe is not one stop on the loop - it is what the loop turns
   around, so it holds the centre permanently. */
.loop-hub {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 46%;
  aspect-ratio: 1;
  display: grid;
  place-content: center;
  gap: 4px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 254, 250, 0.42);
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}

/* The hub shares .ls for behaviour, but .ls's state transforms (rotate for
   the rim counter-spin, scale on hover) must never displace it: its transform
   is its centring, so it is restated for every state the rim rules cover. */
.loop-hub,
.loop-hub:hover,
.loop-hub:focus-visible,
.loop-hub.is-on {
  transform: translate(-50%, -50%);
  padding: 0;
}

.loop-hub:hover,
.loop-hub:focus-visible,
.loop-hub.is-on {
  outline: none;
  background: rgba(255, 254, 250, 0.62);
  box-shadow: 0 14px 40px rgba(44, 44, 42, 0.08);
}

.lh-w {
  color: var(--ink);
  font: 400 clamp(22px, 2.4vw, 28px) / 1.1 var(--display);
}

.lh-s {
  color: rgba(44, 44, 42, 0.62);
  font-size: 11.5px;
  letter-spacing:0.02em;
}

/* What the highlighted step means, beneath the ring rather than inside it,
   so the words never fight the geometry for room. */
.loop-caption {
  min-height: 92px;
  text-align: center;
  padding: 0 12px;
}

.loop-caption.is-swap .lc-h,
.loop-caption.is-swap .lc-s {
  opacity: 0;
  transform: translateY(5px);
}

.lc-h,
.lc-s {
  transition: opacity 0.22s ease, transform 0.22s var(--ease);
}

/* ===========================================================================
 * Access: the form and the FAQs, side by side
 * ========================================================================= */
.closing-grid {
  position: relative;
  z-index: 1;
  width: var(--content);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  align-items: start;
  gap: 72px;
}

.closing-grid .closing-inner {
  width: auto;
  margin: 0;
}

.faqs-h {
  margin: 0 0 4px;
  color: var(--ink);
  font: 400 20px / 1.2 var(--display);
}

.faq {
  border-bottom: 1px solid var(--border);
}

.faq summary {
  position: relative;
  padding: 17px 34px 17px 0;
  color: var(--ink);
  font: 500 14.5px / 1.4 var(--ui);
  cursor: pointer;
  list-style: none;
  transition: color 0.2s ease;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary:hover { color: var(--deep); }

.faq summary::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 4px;
  width: 9px;
  height: 9px;
  margin-top: -6px;
  border-right: 1.5px solid var(--soft);
  border-bottom: 1.5px solid var(--soft);
  transform: rotate(45deg);
  transition: transform 0.28s var(--ease);
}

.faq[open] summary::after {
  margin-top: -2px;
  transform: rotate(-135deg);
}

.faq p {
  padding: 0 8px 18px 0;
  color: var(--soft);
  font-size: 14px;
  line-height: 1.72;
}

@media (prefers-reduced-motion: reduce) {
  .loop-flow,
  .tap-dot,
  .app-open {
    animation: none !important;
  }
  /* Show the sheet already open rather than animating it into place. */
  .app-open { clip-path: inset(0 0 0 0); }
}

/* ---------------------------------------------------------------------------
 * Responsive: the new hero, loop and access layouts
 * ------------------------------------------------------------------------- */
@media (max-width: 960px) {
  .hero-inner {
    grid-template-columns: 1fr;
    gap: 0;
  }

  /* The form comes before the feed on a phone. A visitor who reads the
     promise and wants in should not have to scroll past a phone mockup to
     find the field. hero-copy dissolves so its children can be reordered
     around the app. Everything is slightly smaller than desktop. */
  .hero-copy {
    display: contents;
  }

  .hero h1 { order: 1; font-size: clamp(38px, 10vw, 46px); }
  .hero-intro { order: 2; margin-top: 20px; font-size: 15px; }
  .hero-signup { order: 3; }
  .hero-app { order: 4; margin: 28px 0 6px; justify-self: center; }

  .hero-inner { padding-top: 128px; }

  .phone {
    height: min(480px, 52svh);
  }

  .waitlist-form { margin-top: 22px; min-height: 56px; }
  .waitlist-form input, .waitlist-form button { height: 46px; }

  .hero-social { justify-content: center; }

  .idea-inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  /* Single column: the ring sits below the text, so the centring pad is dead
     space here. */
  .idea-heading {
    padding-bottom: 0;
  }

  .idea h2 { font-size: clamp(38px, 9.6vw, 48px); }

  .loop-wrap {
    width: min(420px, 100%);
    justify-self: center;
  }

  .closing-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .closing h2 { font-size: clamp(36px, 9.4vw, 46px); }
}

@media (max-width: 720px) {
  .phone {
    height: min(440px, 50svh);
  }

  .loop-wrap {
    width: min(330px, 100%);
    gap: 20px;
  }

  .ls-w {
    font-size: 15px;
  }

  .ls {
    padding: 7px 10px;
  }

  .lh-w { font-size: 19px; }
  .lh-s { font-size: 10px; }

  .loop-caption { min-height: 110px; }
  .lc-s { font-size: 12.5px; }

  .closing {
    padding-bottom: 128px;
  }
}

.hero-social {
  display: flex;
  align-items: center;
  gap: 17px;
  margin-top: 22px;
  padding-left: 6px;
}

.hero-social a {
  display: inline-flex;
  color: var(--muted);
  transition: color 0.3s var(--ease), transform 0.3s var(--ease);
}

.hero-social a:hover,
.hero-social a:focus-visible {
  color: var(--ink);
  transform: translateY(-1px);
}

/* ── The shelf ────────────────────────────────────────────────────────────
   Curated content below the circle: one lead piece, a grid of articles, and
   a rail of social posts. Everything is optional — the section only appears
   once the API returns something, and each block hides itself if empty.   */
/* Sits between the sage Loop and the white circle, so the ivory body colour
   is doing the separating and a rule across the top would only add noise. */
.shelf {
  position: relative;
  z-index: 1;
  width: var(--content);
  margin: 0 auto;
  padding: 116px 0 120px;
}

.shelf-head {
  max-width: 640px;
  margin-bottom: 52px;
}

.shelf-head h2 {
  margin: 0;
  font-size: clamp(30px, 4.2vw, 46px);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.01em;
}

.shelf-note {
  margin: 16px 0 0;
  color: var(--soft);
  font-size: 16px;
  line-height: 1.6;
}

.shelf-subhead {
  margin: 0 0 22px;
  color: var(--soft);
  font-family: var(--display);
  font-size: 19px;
  font-weight: 400;
  letter-spacing: 0;
}

/* Every card is the same animal: a link that lifts a little. */
.shelf-card {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: transform 0.35s var(--ease);
}

.shelf-card:hover {
  transform: translateY(-3px);
}

.shelf-card:focus-visible {
  outline: 2px solid var(--eucalyptus);
  outline-offset: 6px;
  border-radius: 22px;
}

.shelf-shot {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  background: #efedea;
  aspect-ratio: 4 / 3;
}

.shelf-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.7s var(--ease);
}

.shelf-card:hover .shelf-shot img {
  transform: scale(1.035);
}

.shelf-kind {
  position: absolute;
  top: 14px;
  left: 14px;
  padding: 6px 12px;
  border-radius: 99px;
  background: rgba(255, 254, 250, 0.94);
  color: var(--deep);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
}

.shelf-card h3 {
  margin: 18px 0 0;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.28;
  letter-spacing: -0.005em;
}

.shelf-card p {
  margin: 9px 0 0;
  color: var(--soft);
  font-size: 14.5px;
  line-height: 1.6;
}

.shelf-by {
  margin-top: 12px;
  color: var(--muted);
  font-size: 12.5px;
}

/* The lead piece runs wide: picture on one side, words on the other. */
.shelf-lead:empty {
  display: none;
}

.shelf-lead .shelf-card {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(24px, 4vw, 52px);
  align-items: center;
  margin-bottom: 60px;
}

.shelf-lead .shelf-shot {
  aspect-ratio: 3 / 2;
}

.shelf-lead h3 {
  margin-top: 0;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.14;
}

.shelf-lead p {
  font-size: 16px;
}

.shelf-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(22px, 3vw, 38px);
}

.shelf-grid:empty {
  display: none;
}

.shelf-social {
  margin-top: 72px;
}

/* A rail rather than a grid: social is a glance, not a read.
 *
 * It flows in columns, so with eight posts it is a rail you push along. With
 * one it used to be a single 210px tile adrift in the full width of the page,
 * which read as something broken rather than as a young account. The count is
 * set on the element by the script, and small numbers get a layout of their
 * own: fewer, larger, and laid out left to right like anything else. */
.social-rail {
  display: grid;
  grid-auto-flow: column;
  /* Never 1fr. One post in a 1fr track took the full width of the page and
     rendered a 1180px picture, which is what a rail is least able to survive.
     A card here has a size of its own and the rail scrolls when there are
     more of them than fit. */
  grid-auto-columns: minmax(200px, 240px);
  gap: 18px;
  margin: 0;
  padding: 0 0 6px;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

/* One to three posts: a row, not a rail. Nothing to scroll, so nothing that
   pretends there is. */
.social-rail[data-count="1"],
.social-rail[data-count="2"],
.social-rail[data-count="3"] {
  grid-auto-flow: row;
  /* auto-fill, not auto-fit: the empty tracks stay, so three cards keep their
     own width instead of growing to swallow the row. Social is a glance and
     should sit smaller than the pieces above it, not the same size. */
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  overflow-x: visible;
  scroll-snap-type: none;
}

/* A single post carries the section on its own, so it is given the room to:
   the picture beside the words rather than under them. */
@media (min-width: 720px) {
  .social-rail[data-count="1"] {
    grid-template-columns: minmax(0, 420px);
  }

  .social-rail[data-count="1"] .shelf-card {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 20px;
    align-items: center;
  }

  .social-rail[data-count="1"] .shelf-shot {
    margin: 0;
  }
}

/* The words under a post: the opening line of the caption, then who and when.
   A picture with a handle under it says nothing about what was posted. */
.social-meta {
  margin-top: 12px;
}

.social-cap {
  margin: 0 0 6px;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.social-when {
  color: var(--soft);
}

.social-when::before {
  content: "·";
  margin: 0 6px;
}

.social-rail::-webkit-scrollbar {
  display: none;
}

.social-rail li {
  scroll-snap-align: start;
}

.social-rail .shelf-shot {
  aspect-ratio: 4 / 5;
  border-radius: 20px;
}

.social-badge {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 254, 250, 0.94);
  color: var(--ink);
}

.social-rail .shelf-by {
  margin-top: 10px;
  color: var(--soft);
  font-size: 13px;
}

@media (max-width: 900px) {
  .shelf {
    padding-top: 72px;
  }

  .shelf-lead .shelf-card {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 46px;
  }

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

@media (max-width: 620px) {
  .shelf-grid {
    grid-template-columns: 1fr;
  }

  .shelf-social {
    margin-top: 52px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .shelf-card,
  .shelf-shot img {
    transition: none;
  }

  .shelf-card:hover {
    transform: none;
  }

  .shelf-card:hover .shelf-shot img {
    transform: none;
  }
}

/* The rail before there is anything in it. A follow is a better outcome than
   an empty space, so the placeholder is a real link, not a grey box. */
.social-soon {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 208px;
  padding: 28px 30px 26px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 26px;
  background: var(--paper);
  color: inherit;
  text-decoration: none;
  transition: border-color 0.4s var(--ease), transform 0.4s var(--ease),
    box-shadow 0.4s var(--ease);
}

/* A wash of the brand sage bleeding out of the corner, so the card reads as
   NuPARE's rather than as a generic empty state. */
.social-soon::after {
  content: "";
  position: absolute;
  right: -58px;
  bottom: -78px;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  background: var(--eucalyptus);
  opacity: 0.16;
  transition: transform 0.6s var(--ease), opacity 0.4s ease;
}

.social-soon:hover {
  border-color: transparent;
  transform: translateY(-3px);
  box-shadow: 0 22px 54px rgba(44, 44, 42, 0.1);
}

.social-soon:hover::after {
  transform: scale(1.18);
  opacity: 0.24;
}

.social-soon:focus-visible {
  outline: 2px solid var(--eucalyptus);
  outline-offset: 3px;
}

.social-soon-icon {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 50%;
  color: var(--deep);
  background: rgba(167, 184, 171, 0.22);
}

.social-soon-handle {
  position: relative;
  z-index: 1;
  margin-top: 26px;
  font-family: var(--display);
  font-size: 19px;
  line-height: 1.2;
}

.social-soon-note {
  position: relative;
  z-index: 1;
  margin-top: 9px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--soft);
  font-size: 13px;
}

/* A small live dot, so "coming soon" reads as a countdown rather than a
   closed door. */
.social-soon-note::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--eucalyptus);
}

@media (prefers-reduced-motion: reduce) {
  .social-soon,
  .social-soon:hover {
    transition: none;
    transform: none;
  }
}

/* Articles, before there are any. Sits where the grid would, at the same
   width, so the section keeps its shape instead of collapsing to a stub. */
.shelf-soon {
  padding: clamp(44px, 6vw, 76px) clamp(26px, 4vw, 52px);
  border: 1px solid var(--border);
  border-radius: 28px;
  background: var(--paper);
  text-align: center;
}

.shelf-soon-line {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(21px, 2.6vw, 27px);
  font-weight: 400;
  line-height: 1.2;
}

.shelf-soon-note {
  margin: 12px 0 0;
  color: var(--soft);
  font-size: 15px;
}

/* With only the two placeholders in it, the rail should read as a pair of
   cards rather than two panels stretched across the page. */
.social-rail:has(.social-soon) {
  grid-auto-flow: row;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-columns: auto;
  overflow: visible;
}

@media (max-width: 620px) {
  .social-rail:has(.social-soon) {
    grid-template-columns: 1fr;
  }
}

/* One card should not sit in a third of the row looking abandoned. */
.shelf-grid:has(> :only-child) {
  grid-template-columns: minmax(0, 660px);
}

/* A piece without a photograph of its own. The mark and wordmark sit on a
   panel rather than being cropped to fill, where a logo reads as an error. */
.shelf-standin {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 14px;
  background: linear-gradient(160deg, #edf0ec, #e1e7e2);
  border: 1px solid var(--border);
}

.shelf-standin .sm {
  width: 34px;
  height: auto;
}

.shelf-standin .sw {
  width: min(190px, 46%);
  height: auto;
}

.shelf-lead .shelf-standin .sm {
  width: 44px;
}

.shelf-lead .shelf-standin .sw {
  width: min(250px, 44%);
}

.shelf-card:not(:has(.shelf-shot)) h3 {
  margin-top: 0;
  font-size: clamp(23px, 2.8vw, 30px);
  line-height: 1.16;
}

.shelf-card:not(:has(.shelf-shot)) {
  padding: clamp(28px, 3.4vw, 42px);
  border: 1px solid var(--border);
  border-radius: 26px;
  background: var(--paper);
}

.shelf-card:not(:has(.shelf-shot)) p {
  font-size: 16px;
}

/* The legal line gets a row of its own across the footer, rather than
   sharing the right-hand cell with the social icons, where it was cramped. */
.footer-fine {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(234, 234, 234, 0.9);
}

.fine-c {
  white-space: nowrap;
}

/* A group, so a separator can only ever sit between two links: a dot at the
   start of a wrapped row reads as a typo. */
.fine-links {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  white-space: nowrap;
}

.fine-links a {
  position: relative;
  color: var(--muted);
  transition: color 0.25s ease;
}

.fine-links a + a::before {
  content: "";
  position: absolute;
  left: -11px;
  top: 50%;
  width: 2px;
  height: 2px;
  margin-top: -1px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.55;
}

.fine-links a:hover {
  color: var(--ink);
}

@media (max-width: 720px) {
  .footer-fine {
    justify-content: center;
    gap: 8px 16px;
    padding-top: 14px;
  }

  .fine-links {
    gap: 16px;
  }

  .fine-links a + a::before {
    left: -9px;
  }
}