/* Sunsets by Ambleway: the product page.

   The components below -- hero, how/steps, features, closing call to action --
   are Wavelength's, copied rather than re-invented so the two product pages of
   one company read as one company. Only the accent moves: Wavelength's gold is
   pushed toward the evening, because this is a page about the colour of a sky
   and the page should be able to say so.

   Everything above the "Sunsets' own" rule is unmodified from
   wavelength/wavelength.css and should stay that way; a fix belongs in both. */


:root {
  --color-ground:         #0f0f0f;
  --color-surface:        #161616;
  --color-border:         #272727;
  --color-text-primary:   #e8e4de;
  --color-text-secondary: #b4afa8;
  --color-text-tertiary:  #7d7872;
  --color-accent:         #c8a97e;
  --color-accent-dim:     #8a7659;
  --max-width:            720px;
  --reading-width:        680px;

  --fs-label: 0.852rem;   /* phi^-1/3 step (~13.6px): labels, captions, footnotes */
  --fs-small: 1rem;       /* base (16px): secondary copy, card blurbs, FAQ answers */
  --fs-body:  1.174rem;   /* +1 step, cbrt(phi) (~18.8px): body, list items, card titles */
  --fs-lede:  1.378rem;   /* +2 steps (~22px): lede paragraph */
  --fs-title: clamp(1.618rem, 5vw, 2.618rem); /* phi to phi^2: article headline */
}

html {
  background-color: var(--color-ground);
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 3rem 1.5rem;
}

.page {
  width: 100%;
  max-width: var(--max-width);
}

/* A soft warm glow behind the hero, nothing more. The page stays clean and dark
   so the screenshots and copy carry it. */
html { overflow-x: hidden; }

body { position: relative; }

body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;
  height: 900px;
  transform: translateX(-50%);
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(70% 60% at 50% 0%, rgba(200, 169, 126, 0.12), transparent 70%);
}

a { color: inherit; }

/* ---- Site masthead (small, shared across landing pages) ---- */
.masthead {
  width: 100%;
  max-width: var(--reading-width);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 2.5rem;
  text-decoration: none;
}

.masthead img {
  width: 36px;
  height: 36px;
  border-radius: 8px;
}

.masthead .mast-name {
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-text-primary);
}

.masthead .mast-tag {
  font-size: var(--fs-label);
  letter-spacing: 0.06em;
  color: var(--color-text-tertiary);
}

/* ---- Product page hero: centered, the running app as the dominant visual ----
   One column, everything centered so nothing can drift out of alignment. Short
   copy, then a large phone running Wavelength. No app icon: the running app is
   the identity. The scrolled feature screenshots below each add to the story. */
.hero {
  display: flex;
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
  /* Break out of the 720px reading column so the phone can be large and the
     hero feels immersive. Centred on the viewport, with a safe side gutter. */
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: min(1140px, 100vw - 3rem);
  /* No top padding of its own. The film is a hard-edged rectangle where the old
     framed screenshot was a cut-out phone carrying its own transparent margin,
     so the body's 3rem is already all the air it wants above it. */
  padding: 0 0 clamp(2rem, 5vw, 4rem);
}

.hero-copy { flex: 1; }

.app-name {
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}

.hero-headline {
  font-size: clamp(2.4rem, 5.5vw, 3.6rem);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.028em;
  color: var(--color-text-primary);
  text-wrap: balance;
  max-width: 13ch;
  margin: 0.9rem 0 0;
}

.hero-sub {
  font-size: var(--fs-lede);
  color: var(--color-text-secondary);
  max-width: 40ch;
  margin: 1.2rem 0 0;
  line-height: 1.5;
  text-wrap: balance;
}

.hero .app-cta { margin-top: 1.9rem; }

/* The hero phone sits on the left of the copy on wide screens (order: -1), and
   holds still (no parallax, which is reserved for the feature shots). */
.hero-shot {
  order: -1;
  flex: 0 0 50%;
  display: flex;
  justify-content: center;
  position: relative;
  overflow-x: clip; /* contain the glow horizontally so it never widens the page */
}

/* The phone appears to emit the warm light it is measuring. The glow is sized to
   fade fully to transparent before the clip edge, so it has no hard cutoff. */
.hero-shot::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 46%;
  width: 135%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(206, 172, 122, 0.3), transparent 50%);
  z-index: -1;
  pointer-events: none;
}

.hero-device {
  max-width: clamp(300px, 46vw, 500px);
}

/* The hero film. A framed screenshot is a cut-out phone floating on the page;
   the film is a phone standing in a room, so it is a rectangle, and it gets a
   corner of its own rather than borrowing the phone's. */
.hero-film {
  display: block;
  width: 100%;
  max-width: clamp(300px, 46vw, 500px);
  /* Bounded by the viewport's HEIGHT as well as its width. A 9:16 film given 500px of width
     is 889px tall, which is taller than a laptop's viewport -- the hero then pushed its own
     headline and the signup off the screen, and the page opened on a slab of video with no
     way to tell what it was for. */
  max-height: calc(100svh - 12rem);
  width: auto;
  height: auto;
  border-radius: 22px;
}

@media (max-width: 760px) {
  .hero {
    flex-direction: column;
    text-align: center;
    gap: clamp(2rem, 7vw, 3rem);
  }
  .hero-copy { width: 100%; }
  .hero-shot { order: 0; flex: none; width: 100%; }
  .hero-headline { max-width: 18ch; margin-inline: auto; }
  .hero-sub { max-width: 34ch; margin-inline: auto; }
  .hero-device { max-width: min(84vw, 370px); }
  .hero-film { max-width: min(84vw, 400px); margin-inline: auto; }
}

/* Eyebrow label above a use-case headline (amber, tracked caps). */
.feature-eyebrow {
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 0.9rem;
}

/* ---- How it works: three plain steps, so anyone gets it in five seconds ----
   Set on a full-bleed raised surface band so it reads as its own zone, a beat
   of calm between the hero and the colourful use cases. */
.how {
  position: relative;
  text-align: center;
  padding: clamp(3.5rem, 8vw, 6rem) 0 clamp(3.5rem, 8vw, 6rem);
}

.how::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  pointer-events: none;
}

.how-title {
  font-size: clamp(1.5rem, 4vw, 2.1rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--color-text-primary);
}

.steps {
  list-style: none;
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 2.5vw, 1.5rem);
  margin-top: clamp(2.2rem, 5vw, 3.2rem);
  text-align: left;
}

/* Each step is a real photo with the caption BELOW it (never overlaid), so
   nothing collides with the app's own on-screen text in step 2. */
.step {
  counter-increment: step;
  display: flex;
  flex-direction: column;
}

.step-media {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 16px;
  overflow: hidden;
}

.step-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Step 3 is the day planner, which lives at the bottom of the screenshot, so
   anchor its crop to the bottom (matters on the shorter mobile card). */
.step:last-child .step-photo { object-position: bottom; }

/* Numbered badge anchored to the photo's corner, tying the caption to the image. */
.step-media::before {
  content: counter(step);
  position: absolute;
  left: 0.85rem;
  bottom: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 999px;
  background: rgba(8, 8, 10, 0.62);
  border: 1px solid var(--color-accent);
  color: var(--color-accent);
  font-size: var(--fs-small);
  font-weight: 600;
  backdrop-filter: blur(4px);
}

.step-text {
  padding: 1.1rem 0.1rem 0;
}

.step-head {
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 0.3rem;
  text-wrap: balance;
}

.step-body {
  font-size: var(--fs-small);
  color: var(--color-text-secondary);
  line-height: 1.45;
}

.step-head {
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 0.5rem;
  text-wrap: balance;
}

.step-body {
  font-size: var(--fs-small);
  color: var(--color-text-secondary);
  line-height: 1.5;
  max-width: 26ch;
}

@media (max-width: 640px) {
  .steps { grid-template-columns: 1fr; gap: 1.75rem; max-width: 24rem; margin-inline: auto; }
  .step-media { aspect-ratio: 4 / 3; }
}


/* ---- App Store CTA ---- */
.app-store-button {
  display: inline-block;
  font-family: inherit;
  font-size: var(--fs-body);
  font-weight: 600;
  padding: 0.7rem 1.6rem;
  color: var(--color-ground);
  background: var(--color-accent);
  border: 1px solid var(--color-accent);
  border-radius: 999px;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.app-store-button:hover {
  background: var(--color-text-primary);
  border-color: var(--color-text-primary);
}

/* ---- Feature showcase: one use case per row, each with its own colour ----
   Each row pairs a full screenshot with one benefit, alternating sides. The
   dark screenshots would vanish on a flat black page, so every phone sits on a
   coloured light "stage": a wide soft wash that tints the whole row and a
   brighter glow right behind the device. The colour is the use case's identity
   (warm for travel and daylight, cool blue for sleep and night shifts), which
   also gives the long scroll rhythm. */
.features {
  display: flex;
  flex-direction: column;
  gap: clamp(3rem, 7vw, 6rem);
  padding: clamp(3rem, 7vw, 6rem) 0 3rem;
}

.feature {
  position: relative;
  display: flex;
  align-items: center;
  gap: clamp(2rem, 6vw, 5rem);
  padding: clamp(2.5rem, 5vw, 4rem) 0;
}

.feature:nth-child(even) { flex-direction: row-reverse; }

/* Wide, faint, full-bleed wash tinting the whole row in the use-case colour,
   centred on the phone's side. Exactly 100vw so it never widens the page. */
.feature::before {
  content: "";
  position: absolute;
  z-index: -2;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 150%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  background: radial-gradient(38% 56% at var(--wash-x, 28%) 50%, var(--wash), transparent 72%);
}

.feature:nth-child(even)::before { --wash-x: 72%; }

.feature-shot {
  position: relative;
  flex: 0 0 48%;
  display: flex;
  justify-content: center;
  overflow-x: clip; /* contain the wide glow below */
}

/* Brighter, tighter glow directly behind the device so its dark screen and
   titanium frame separate from the page. */
.feature-shot::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 46%;
  width: 132%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, var(--glow), transparent 62%);
  pointer-events: none;
}

.feature--jetlag { --glow: rgba(228, 150, 78, 0.46); --wash: rgba(228, 150, 78, 0.16); }
.feature--sleep  { --glow: rgba(116, 130, 230, 0.42); --wash: rgba(116, 130, 230, 0.15); }
.feature--energy { --glow: rgba(232, 188, 104, 0.46); --wash: rgba(232, 188, 104, 0.16); }
.feature--shift  { --glow: rgba(82, 160, 200, 0.42); --wash: rgba(82, 160, 200, 0.15); }

/* The screenshot is pre-composited into a real iPhone 16 Pro Max frame by
   bin/frame-shot (the same tool the App Store screenshots use), so this is just
   the framed PNG with a drop shadow that follows the device silhouette. The
   subtle scroll parallax rides on the transform. */
.device-frame {
  display: block;
  width: 100%;
  max-width: 360px;
  height: auto;
  transform: translateY(var(--py, 0));
  filter: drop-shadow(0 30px 55px rgba(0, 0, 0, 0.55));
}

.feature-text { flex: 1; }

.feature-title {
  font-size: clamp(1.55rem, 3.3vw, 2.15rem);
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--color-text-primary);
  margin-bottom: 1rem;
  text-wrap: balance;
}

.feature-body {
  font-size: var(--fs-lede);
  line-height: 1.55;
  color: var(--color-text-secondary);
}

.features-note {
  font-size: var(--fs-small);
  color: var(--color-text-tertiary);
  text-align: center;
  padding: clamp(2rem, 5vw, 3.5rem) 0 1rem;
}

/* ---- Closing call to action (repeats the beta CTA partial) ---- */
.cta-close {
  text-align: center;
  padding: clamp(3.5rem, 8vw, 6rem) 0 1rem;
  margin-top: 1rem;
}

/* The app icon as the sign-off, above the final call to action. */
.cta-icon {
  display: block;
  width: 72px;
  height: 72px;
  border-radius: 16px;
  margin: 0 auto 1.4rem;
}

.cta-title {
  font-size: clamp(1.55rem, 3.4vw, 2.2rem);
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.15;
  color: var(--color-text-primary);
  text-wrap: balance;
  margin-bottom: 0.85rem;
}

.cta-sub {
  font-size: var(--fs-body);
  color: var(--color-text-secondary);
  max-width: 44ch;
  margin: 0 auto 1.8rem;
  line-height: 1.55;
}

/* Scroll entrance: each side fades and rises in as it enters the viewport.
   Scoped to .anim (added by JS) so content stays visible without JavaScript. */
@media (prefers-reduced-motion: no-preference) {
  .anim .feature-shot,
  .anim .feature-text {
    opacity: 0;
    transform: translateY(42px);
    transition: opacity 1.2s ease, transform 1.3s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  .anim .feature.in .feature-shot { opacity: 1; transform: none; }
  .anim .feature.in .feature-text { opacity: 1; transform: none; transition-delay: 0.12s; }
}

@media (max-width: 640px) {
  .feature, .feature:nth-child(even) {
    flex-direction: column;
    text-align: center;
    gap: 1.75rem;
  }
  .feature::before,
  .feature:nth-child(even)::before { --wash-x: 50%; height: 70%; top: 38%; }
  .feature-shot { flex: none; width: 100%; }
  .device-frame { max-width: 300px; transform: none; }
}

/* ---- "Who it's for" link grid (product page -> landing pages) ---- */

/* ================= Sunsets' own ================= */

/* The evening's accent. Ambleway's forest green is the app's chrome, but a page
   is not the app: on a dark page green reads as a system colour rather than as
   dusk, so the warm end of the sky carries the links and buttons and the green
   appears only in the logo it belongs to. */
:root {
  --color-accent:     #e8a06a;
  --color-accent-dim: #a26d47;
}

/* The film is the hero, so it gets the room the phone in it needs -- and no more
   than the viewport, or the call to action beneath it is never on screen at the same
   time.

   It is cropped to the phone rather than to the frame the app was drawn in, so there
   is no backdrop to hide: the only black left is the four corners outside the phone's
   own curve, and the radius takes those. Percentage radii are per-axis, so 20%/9.6%
   is a 250 px corner at the film's own 1000x2074 and stays a 250 px corner at every
   size the page renders it -- which a single percentage would not.

   Video carries no alpha, so this rounding is what stands in for transparency. */
.hero-film {
  display: block;
  margin-inline: auto;
  /* Both auto, capped: the element then shrinks to the PICTURE rather than staying
     column-width with the phone letterboxed inside it. With the backdrop cropped away
     that letterbox was transparent, so it read as the copy being pushed off-centre by
     nothing at all. The height cap keeps the film and the call to action on one screen. */
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100svh - 12rem);
  border-radius: 20% / 9.6%;
}


.feature--sky   { --glow: rgba(232, 122, 92, 0.46);  --wash: rgba(232, 122, 92, 0.16); }
.feature--walk  { --glow: rgba(120, 168, 118, 0.42); --wash: rgba(120, 168, 118, 0.15); }

/* ---- Long-form pages (privacy, support): Wavelength's article block, unchanged ---- */
.article {
  width: 100%;
  max-width: var(--reading-width);
}

.breadcrumb {
  font-size: var(--fs-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  margin-bottom: 1.5rem;
}

.breadcrumb a { text-decoration: none; color: var(--color-text-tertiary); }
.breadcrumb a:hover { color: var(--color-text-secondary); }

.eyebrow {
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 1rem;
}

.article h1 {
  font-size: var(--fs-title);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-bottom: 1.25rem;
}

/* Who wrote the page and when it was last checked, under the headline where a
   reader deciding whether to trust a health claim will look for it. */
.byline {
  font-size: var(--fs-label);
  line-height: 1.6;
  color: var(--color-text-tertiary);
  margin-bottom: 1.75rem;
}

.lede {
  font-size: var(--fs-lede);
  line-height: 1.6;
  color: var(--color-text-primary);
  margin-bottom: 2.5rem;
}

.article h2 {
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin: 3rem 0 1rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--color-border);
}

.article h3 {
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 1.75rem 0 0.5rem;
}

.article p {
  font-size: var(--fs-body);
  line-height: 1.75;
  color: var(--color-text-secondary);
  margin-bottom: 1.2rem;
}

.article p strong { color: var(--color-text-primary); font-weight: 700; }

.article a.inline {
  color: var(--color-text-primary);
  text-decoration: none;
  border-bottom: 1px solid var(--color-border);
}

.article a.inline:hover { border-color: var(--color-text-secondary); }

.article ul, .article ol {
  margin: 0 0 1.2rem 1.2rem;
  padding: 0;
}

.article li {
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--color-text-secondary);
  margin-bottom: 0.5rem;
}

/* ---- In-article screenshot figure (floated, natural aspect ratio) ---- */

.disclaimer {
  font-size: var(--fs-label);
  line-height: 1.6;
  color: var(--color-text-tertiary);
  font-style: italic;
  margin-top: 2rem;
}

/* ---- Signup: the same beta form as the other two, component for component ---- */
.beta-cta { margin-top: 2rem; text-align: center; }

.beta-title {
  font-size: var(--fs-lede);
  font-weight: 500;
  color: var(--color-text-primary);
  margin-bottom: 0.9rem;
}

.beta-form {
  display: flex;
  gap: 0.6rem;
  justify-content: center;
  flex-wrap: wrap;
}

.beta-input {
  flex: 1 1 18rem;
  max-width: 22rem;
  padding: 0.7rem 0.9rem;
  font: inherit;
  font-size: var(--fs-small);
  color: var(--color-text-primary);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
}

.beta-input::placeholder { color: var(--color-text-tertiary); }
.beta-input:focus-visible { outline: 2px solid var(--color-accent-dim); outline-offset: 2px; }

.beta-submit {
  padding: 0.7rem 1.4rem;
  font: inherit;
  font-size: var(--fs-small);
  font-weight: 600;
  color: #14120e;
  background: var(--color-accent);
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.beta-submit:hover { background: #d7bb92; }
.beta-done { margin-top: 0.8rem; color: var(--color-text-secondary); font-size: var(--fs-small); }

.page-footer {
  margin-top: 3rem;
  text-align: center;
  color: var(--color-text-tertiary);
  font-size: var(--fs-label);
}

.footer-links {
  display: flex;
  gap: 1.2rem;
  justify-content: center;
  list-style: none;
  margin-top: 0.5rem;
}

.footer-links a { color: var(--color-text-secondary); text-decoration: none; }
.footer-links a:hover { color: var(--color-text-primary); }

@media (prefers-reduced-motion: reduce) {
  .film video { animation: none; }
}