:root {
  --bg: #e5e1d8;
  --surface: #dad5ca;
  --ink: #2a1d17;
  --muted: #514239;
  --accent: #456f3a;
  --accent-ink: #fff;
  --font-display: 'Young Serif', Georgia, serif;
  --font-body: 'Source Serif 4', Georgia, serif;
}
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 28px;
}
header > a:last-child {
  display: flex;
  align-items: center;
  min-height: 44px;
  font-size: 16px;
}
.brand { font-family: var(--font-display); font-weight: 400; }
.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 680px;
  padding: 0 28px 40px;
  align-items: stretch;
}
.held-image {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: var(--accent);
  color: var(--accent-ink);
}
.botanical { max-width: 560px; }
.held-image #motion-toggle { align-self: flex-start; margin-left: 18px; }
.opening {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 32px;
  padding: 60px 40px 50px;
  background: var(--surface);
}
h1 {
  font-size: clamp(52px, 5.1vw, 86px);
  letter-spacing: -.05em;
  line-height: 1.1;
}
h1 + p { font-size: 24px; line-height: 1.4; max-width: 25ch; }
.look-link {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  min-height: 48px;
  font-size: 18px;
  transition: gap .18s;
}
.look-link:hover { gap: 24px; }
.closer-look {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  column-gap: 64px;
  row-gap: 36px;
  padding: 92px 68px 112px;
  scroll-margin-top: 40px;
}
.look-intro h2, .signup-intro h2 {
  font-size: clamp(38px, 4vw, 56px);
  line-height: 1.2;
  letter-spacing: -.04em;
  max-width: 15ch;
}
.look-intro > p, .signup-intro p {
  margin-top: 28px;
  font-size: 18px;
  max-width: 29ch;
}
.look-intro { grid-column: 1; grid-row: 1; }
.look-body { grid-column: 1; grid-row: 2; min-width: 0; }
.closer-look .device-reveal {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  min-width: 0;
}
.closer-look .device-space {
  height: clamp(460px, 44vw, 620px);
  min-width: 0;
}
.feature-notes { display: grid; gap: 36px; }
.feature-notes h3 {
  font-size: 25px;
  line-height: 1.25;
  letter-spacing: -.025em;
}
.feature-notes p {
  max-width: 42ch;
  margin-top: 12px;
  font-size: 18px;
  line-height: 1.55;
}
.signup {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  margin: 0 28px;
  padding: 72px 40px 80px;
  background: var(--surface);
  --form-surface: var(--bg);
}
.signup-form-wrap { max-width: 520px; }
footer {
  display: flex;
  gap: 30px;
  padding: 36px 28px;
  font-size: 14px;
}
footer > span { margin-left: auto; font-family: var(--font-display); }
@media (max-width: 1000px) {
  .hero { min-height: 540px; }
  .opening { padding: 36px 28px; }
  h1 { font-size: 48px; }
  h1 + p { font-size: 20px; }
  .closer-look { padding: 64px 28px 80px; column-gap: 40px; }
  .look-intro h2, .signup-intro h2 { font-size: 38px; }
  .signup { padding: 50px 28px 60px; gap: 44px; }
  .feature-notes h3 { font-size: 23px; }
}
@media (max-width: 1000px) and (min-width: 901px) {
  .feature-notes { gap: 28px; }
  .feature-notes p { font-size: 17px; }
}
@media (max-width: 900px) {
  .closer-look { grid-template-columns: 1fr; row-gap: 36px; }
  .look-intro { grid-column: 1; grid-row: 1; }
  .closer-look .device-reveal { grid-column: 1; grid-row: 2; align-self: auto; }
  .look-body { grid-column: 1; grid-row: 3; }
  .closer-look .device-space { height: clamp(360px, 70vw, 560px); }
}
@media (max-width: 650px) {
  header { padding: 16px 20px; }
  .hero {
    display: flex;
    flex-direction: column-reverse;
    padding: 0 20px;
    min-height: 0;
  }
  .opening { padding: 42px 24px; gap: 28px; }
  h1 { font-size: 48px; }
  h1 + p { font-size: 20px; }
  .look-link { font-size: 17px; }
  .held-image { padding: 8px 16px; }
  .botanical { max-width: 350px; }
  .held-image #motion-toggle { margin-left: 0; }
  .closer-look { grid-template-columns: 1fr; padding: 64px 20px; gap: 40px; }
  .closer-look .device-space { height: 370px; }
  .look-intro h2, .signup-intro h2 { font-size: 34px; }
  .look-intro > p, .signup-intro p { font-size: 17px; margin-top: 22px; }
  .feature-notes { gap: 30px; }
  .feature-notes h3 { font-size: 23px; }
  .feature-notes p { font-size: 17px; margin-top: 10px; }
  .signup { grid-template-columns: 1fr; margin: 0 20px; padding: 36px 24px 42px; gap: 32px; }
  .signup-form-wrap { max-width: none; }
  footer { padding: 28px 20px; gap: 22px; flex-wrap: wrap; }
  footer > span { display: none; }
}

/* Content is visible by default; the scroll controller opts in after setup. */
.v10 .scroll-pending { opacity: 0; }
.v10 .scroll-entering {
  animation: scroll-fade-in .7s cubic-bezier(.2,.7,.2,1) both;
  animation-delay: var(--scroll-delay, 0ms);
}
@keyframes scroll-fade-in { from { opacity: 0; } to { opacity: 1; } }
.closer-look .device-space { max-height: calc(100svh - 120px); }
@media (prefers-reduced-motion: reduce) {
  .v10 .scroll-pending, .v10 .scroll-entering { opacity: 1; animation: none; }
}
@media print {
  .v10 .scroll-pending, .v10 .scroll-entering { opacity: 1; animation: none; }
}