/* Selected serif/rainbow direction. The typed system owns display metrics. */
@layer website-base {
  .hero h1,
  .section-heading,
  .personal-heading,
  .faq-heading,
  .cta-heading,
  .closing h2 {
    font-family:var(--type-display-family), Georgia, serif;
    font-weight:var(--type-weight-display);
    font-synthesis:none;
  }

  .hero h1,
  .hero h1 span {
    color:var(--ink);
  }

  .hero-heading { display:flex; flex-direction:column; }
  .hero-heading > .eyebrow,
  .hero-description { margin-bottom:0; }
  .hero-heading > .eyebrow { margin-inline:auto; }

  .hero .offer-note {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:2px;
  }

  .hero .offer-note span { margin:0; }

  .viewer-wrap {
    isolation:isolate;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:var(--space-s);
  }

  /* The artwork slot includes the floating shadow's clearance. Controls live
     after this slot, just as they do in the shared Figma component. */
  .hero-artwork {
    position:relative;
    width:100%;
    height:497.5px;
    isolation:isolate;
  }

  .hero-artwork .device-viewer {
    position:relative;
    width:100%;
    height:calc(100% - 80px);
    min-height:0;
    margin:0;
  }

  .hero-artwork .viewer-still { position:absolute; height:auto; max-width:none; pointer-events:none; }
  .hero-device-still { left:calc(50% - 211.46px); top:31.7974px; width:438.66px; }
  .hero-shadow-still { left:calc(50% - 237.44px); top:280.2716px; width:480.30px; }
  .hero-artwork .viewer-unavailable { position:absolute; left:0; right:0; top:calc(100% + 80px); bottom:auto; margin:8px 0 0; }

  .viewer-wrap .viewer-controls {
    position:relative;
    margin:0;
    padding:0;
    flex:none;
  }
  .viewer-controls .segmented-control { --selector-inline:12px; }
  .viewer-wrap .viewer-controls[hidden] { display:none; }

  /* Separate from the WebGL canvas and contact shadow; never intercepts input. */
  .hero-ground {
    --hero-ground-opacity:1;
    position:absolute;
    z-index:0;
    pointer-events:none;
    inset:auto;
    left:-20%;
    top:11.0553%;
    width:140%;
    height:101.3065%;
    opacity:var(--hero-ground-opacity);
  }
  .hero-ground-poster,
  .hero-ground-video { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
  .hero-ground .brand-grain { position:absolute; inset:0; }
  .hero-ground-video { opacity:0; transition:opacity 200ms ease; }
  .hero-ground[data-playing] .hero-ground-video { opacity:1; }
  @media(prefers-reduced-motion:reduce) { .hero-ground-video { display:none; transition:none; } }

  .feature-overview {
    background:var(--white);
  }

  .feature-overview .feature-card {
    border:1px solid var(--line);
  }

  @media(max-width:650px) {
    .viewer-wrap { margin-top:0; }
    .hero-artwork {
      height:clamp(320px,92.3077vw,360px);
    }
    .hero-device-still { left:calc(50% - min(38.2018%, 149.75px) + min(1.37%, 5.35px)); top:clamp(19.04px, calc(134px - 29.3vw), 40.2px); width:min(76.4036%, 299.5px); }
    .hero-shadow-still { left:calc(50% - min(38.2018%, 149.75px) + min(1.37%, 5.35px) - min(4.5295%, 17.75px)); top:calc(clamp(19.04px, calc(134px - 29.3vw), 40.2px) + min(43.33vw, 169.8px)); width:min(83.668%, 328px); }
    .hero-ground {
      left:-50%;
      top:27.7778%;
      width:200%;
      height:72.2222%;
    }
  }
}

/* The heading group owns the relationship; the label adds no external spacing. */
.hero-heading > .ui-label.eyebrow { margin-bottom:0; }
.feature-overview .feature-card-copy { display:flex; flex-direction:column; gap:var(--space-s); }
.feature-overview .feature-card-copy > :is(h3,p) { margin:0; }
.scenarios-section .heading-group { display:flex; flex-direction:column; align-items:center; gap:var(--space-l); height:auto; }
.scenarios-section .heading-group .heading-description { width:100%; max-width:532px; margin:0; }
@media(min-width:900px) {
  #appearance .appearance-layout { grid-template-columns:minmax(0,480fr) minmax(0,476fr); column-gap:var(--space-l); min-height:0; }
  #appearance .appearance-preview { grid-column:1; grid-row:1; }
  #appearance .appearance-controls { grid-column:2; grid-row:1; }
  #appearance .appearance-styles { grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--space-l); }
  #appearance .keycap-art { max-width:96px; }
}

/* Selected photograph: keep its scale, with the live title behind the phone. */
.palm-story.palm-portrait { --photo-parallax-travel:32px; --photo-parallax-rate:.1; position:relative; aspect-ratio:3/2; min-height:0; height:auto; padding:0; }
.palm-story.palm-portrait .palm-copy { position:absolute; inset:0 0 auto; z-index:1; margin:0 auto; padding-inline:var(--page-gutter); max-width:1060px; transform:none; }
.palm-story.palm-portrait .palm-copy .section-heading { max-width:900px; margin:0 auto; transform:none; }
.palm-story .palm-foreground { z-index:2; overflow:visible; transform:translate3d(0,var(--photo-parallax-offset,0px),0); }
.palm-story .palm-foreground img { position:absolute; display:block; top:12%; left:0; width:100%; height:auto; max-width:none; object-fit:contain; transform:scale(var(--story-image-scale,1)); }
.palm-story.is-photo-visible .palm-foreground { will-change:transform; }
@media(min-width:651px) and (max-width:1199px) {
  .palm-story.palm-portrait { --photo-parallax-travel:24px; min-height:max(66.666667vw,calc(128px + 2 * var(--type-photo-title-size) + 36.5vw)); max-height:none; }
  .palm-story .palm-foreground img { top:max(12%,calc(64px + 2 * var(--type-photo-title-size) - 10.6vw)); }
}
@media(max-width:650px) {
  .palm-story.palm-portrait { --photo-parallax-travel:16px; aspect-ratio:2/3; }
  .palm-story.palm-portrait .palm-copy { inset:48px 0 auto; }
  .palm-story .palm-foreground img { top:auto; bottom:calc(-1 * var(--photo-parallax-travel)); left:-32.5%; width:165%; }
}
@media(prefers-reduced-motion:reduce) {
  .palm-story .palm-foreground,.palm-story .palm-foreground img { transform:none; }
}