:root {
  --cream: #f7f0e5;
  --cream-deep: #eadcca;
  --paper: #fffaf3;
  --brown: #754324;
  --brown-deep: #351e13;
  --brown-soft: #986b4d;
  --ink: #201812;
  --muted: #75675d;
  --line: rgba(53, 30, 19, 0.17);
  --coral: #ff6d68;
  --green: #58d174;
  --blue: #389ff2;
  --shell: min(1240px, calc(100vw - 64px));
  /* Height of the Timely Web launch strip. Set to 0px and the page returns to
     exactly what it was before the announcement — see the ".launch-strip"
     block near the bottom of this file. */
  --launch-strip-h: 46px;
  --sans: "DM Sans", sans-serif;
  --display: "Manrope", sans-serif;
}

/* Only index.html carries the strip; upgrade.html and help-feedback.html share
   this stylesheet without it. They must not reserve its height, or the fixed
   header sits 46px down the viewport with a dead cream band above it — and
   scrolled content slides up through that band, over the top of the header. */
html:not(:has(.launch-strip)) { --launch-strip-h: 0px; }

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(88px + var(--launch-strip-h));
}

body {
  margin: 0;
  padding-top: var(--launch-strip-h);
  color: var(--ink);
  background: var(--cream);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

body.menu-open { overflow: hidden; }

a { color: inherit; text-decoration: none; }
button { font: inherit; }
img { display: block; max-width: 100%; }

.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;
  z-index: 1000;
  top: 12px;
  left: 12px;
  padding: 12px 16px;
  color: white;
  background: var(--brown-deep);
  transform: translateY(-160%);
  transition: transform 180ms ease;
}

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

/* -------------------------------------------------------------------------
   Timely Web launch strip
   A flat deep-brown line above everything, so it reads as one dark field with
   the hero underneath it rather than a bar bolted onto the page. Sized by
   --launch-strip-h (:root) — the header, the hero and the mobile menu all
   measure themselves off that token, so the whole announcement comes down by
   deleting this block and the <a class="launch-strip"> in index.html.
   ------------------------------------------------------------------------- */
.launch-strip {
  position: fixed;
  z-index: 120;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  height: var(--launch-strip-h);
  padding: 0 20px;
  color: var(--cream);
  background: #241309;
  box-shadow: inset 0 -1px 0 rgba(247, 240, 229, 0.13);
  font-size: 0.86rem;
  line-height: 1;
  transition: background 220ms ease;
}

.launch-strip:hover { background: #301a0e; }

.launch-strip-pill {
  flex: none;
  padding: 5px 9px 4px;
  border-radius: 999px;
  background: rgba(247, 240, 229, 0.15);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.launch-strip-copy {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.launch-strip-copy strong { font-weight: 600; }
.launch-strip-copy > span { color: rgba(247, 240, 229, 0.66); }

.launch-strip-cta {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  white-space: nowrap;
}

.launch-strip-cta svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 220ms ease;
}

.launch-strip:hover .launch-strip-cta svg { transform: translateX(3px); }

.site-header {
  position: fixed;
  z-index: 100;
  top: var(--launch-strip-h);
  left: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: 100%;
  min-height: 82px;
  padding: 0 32px;
  color: var(--cream);
  transition: color 250ms ease, background 250ms ease, box-shadow 250ms ease;
}

.site-header.is-scrolled {
  color: var(--ink);
  background: rgba(247, 240, 229, 0.92);
  box-shadow: 0 1px 0 var(--line);
  backdrop-filter: blur(18px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  width: max-content;
  font-family: var(--display);
  font-size: 1.18rem;
  letter-spacing: -0.04em;
}

.brand-symbol {
  display: block;
  width: 33px;
  height: 33px;
  object-fit: contain;
}

.desktop-nav {
  display: flex;
  align-items: center;
  gap: 30px;
  font-size: 0.89rem;
}

.desktop-nav a,
.footer-main nav a {
  position: relative;
}

.desktop-nav a::after,
.footer-main nav a::after {
  position: absolute;
  right: 0;
  bottom: -5px;
  left: 0;
  height: 1px;
  background: currentColor;
  content: "";
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 200ms ease;
}

.desktop-nav a:hover::after,
.footer-main nav a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.header-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
}

.button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 9px;
  min-height: 52px;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: 2px;
  font-size: 0.9rem;
  font-weight: 600;
  transition: transform 180ms ease, background 180ms ease, color 180ms ease;
}

.button:hover { transform: translateY(-2px); }
.button-small { min-height: 44px; padding: 0 19px; }
.button-cream { color: var(--brown-deep); background: var(--cream); }
.site-header.is-scrolled .button-cream { color: var(--cream); background: var(--brown); }
.button-brown { color: var(--cream); background: var(--brown); }
.button-outline { border-color: var(--brown); color: var(--brown); }
.button-outline:hover { color: var(--cream); background: var(--brown); }

/* --- Account actions in the header ---------------------------------------
   Sign in is a plain link and Sign up an outlined button, so "Get the app"
   stays the only filled button up there — three filled buttons in a row and
   none of them is the call to action any more.

   Both take their colour from the header rather than declaring one, because
   the header flips from cream (over the hero) to ink (once scrolled). A fixed
   brown, like .button-outline uses, is invisible against the hero. */
.header-link {
  font-size: 0.89rem;
  font-weight: 600;
  color: inherit;
  white-space: nowrap;
  transition: opacity 180ms ease;
}
.header-link:hover { opacity: 0.68; }

.button-ghost {
  border-color: currentColor;
  color: inherit;
  background: transparent;
}
.button-ghost:hover { color: var(--brown-deep); background: var(--cream); }
.site-header.is-scrolled .button-ghost:hover { color: var(--cream); background: var(--brown); }

.menu-button,
.mobile-nav { display: none; }

.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(420px, 0.8fr);
  align-items: center;
  min-height: 920px;
  /* Minus the launch strip, so the hero still ends exactly at the fold. */
  height: max(calc(100vh - var(--launch-strip-h)), 920px);
  padding: 118px max(32px, calc((100vw - 1240px) / 2)) 42px;
  overflow: hidden;
  color: var(--cream);
  background:
    radial-gradient(circle at 73% 38%, rgba(199, 143, 98, 0.38), transparent 24%),
    linear-gradient(125deg, #2b180f 0%, #60341f 48%, #8b5836 100%);
}

.hero::after {
  position: absolute;
  inset: 0;
  background: url("../assets/gradient.png") center / cover;
  content: "";
  opacity: 0.08;
  mix-blend-mode: screen;
  pointer-events: none;
}

.hero-copy {
  position: relative;
  z-index: 3;
  max-width: 650px;
  padding-bottom: 34px;
}

.eyebrow,
.section-index {
  margin: 0 0 28px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.hero h1 {
  max-width: 720px;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(4.8rem, 7vw, 8.2rem);
  font-weight: 500;
  line-height: 0.86;
  letter-spacing: -0.075em;
}

.hero h1 em {
  color: #dfbaa0;
  font-family: Georgia, serif;
  font-weight: 400;
}

.hero-intro {
  max-width: 525px;
  margin: 35px 0 0;
  color: rgba(247, 240, 229, 0.78);
  font-size: clamp(1.06rem, 1.5vw, 1.32rem);
  line-height: 1.55;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-top: 34px;
}

.app-store-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 184px;
  padding: 10px 18px 11px;
  color: var(--brown-deep);
  background: var(--cream);
  border-radius: 9px;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.app-store-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 35px rgba(17, 9, 5, 0.22);
}

.app-store-button svg { width: 27px; fill: currentColor; }
.app-store-button span { display: flex; flex-direction: column; font-weight: 600; line-height: 1.05; }
.app-store-button small { margin-bottom: 3px; font-size: 0.62rem; font-weight: 500; }

.hero-link {
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(247, 240, 229, 0.55);
  font-size: 0.9rem;
}

.hero-note {
  margin: 18px 0 0;
  color: rgba(247, 240, 229, 0.58);
  font-size: 0.76rem;
  letter-spacing: 0.02em;
}

.hero-product {
  position: relative;
  z-index: 2;
  align-self: end;
  justify-self: center;
  width: min(500px, 38vw);
  height: calc(100% - 34px);
  /* Lifts the whole product group — phone, glow ring and both float notes —
     off the bottom edge together, so their alignment stays exactly as tuned.
     Margin, not transform: .hero-reveal.is-visible sets `transform: none` and
     wins on specificity, so a transform here would be silently dropped. */
  margin-bottom: 90px;
}

.hero-product > img {
  position: absolute;
  z-index: 2;
  bottom: -7%;
  left: 50%;
  width: 88%;
  max-height: 102%;
  object-fit: contain;
  object-position: top center;
  filter: drop-shadow(0 40px 50px rgba(22, 10, 4, 0.44));
  transform: translateX(-50%) rotate(1.5deg);
}

.hero-glow {
  position: absolute;
  top: 16%;
  left: 50%;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(244, 221, 194, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
  transform: translateX(-50%);
}

.hero-orbit {
  position: absolute;
  border: 1px solid rgba(247, 240, 229, 0.13);
  border-radius: 50%;
}

.orbit-one { right: -18vw; bottom: -43vw; width: 90vw; height: 90vw; }
.orbit-two { right: 20vw; top: -17vw; width: 40vw; height: 40vw; }

.float-note {
  position: absolute;
  z-index: 4;
  display: flex;
  flex-direction: column;
  min-width: 142px;
  padding: 15px 18px;
  color: var(--brown-deep);
  background: rgba(255, 250, 243, 0.92);
  box-shadow: 0 16px 40px rgba(32, 16, 8, 0.18);
  backdrop-filter: blur(12px);
  animation: float 5s ease-in-out infinite;
}

.float-note span { margin-bottom: 5px; color: var(--brown-soft); font-size: 0.61rem; font-weight: 700; letter-spacing: 0.15em; }
.float-note strong { font-family: var(--display); font-size: 1.2rem; letter-spacing: -0.04em; }
.float-note-hours { top: 30%; left: -10%; }
.float-note-pay { right: -7%; bottom: 20%; animation-delay: -2.2s; }

.hero-caption {
  position: absolute;
  z-index: 3;
  right: 32px;
  bottom: 28px;
  margin: 0;
  color: rgba(247, 240, 229, 0.45);
  font-size: 0.62rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.section-shell { width: var(--shell); margin-inline: auto; }

.promise { padding: 140px 0 150px; }
.section-index { color: var(--brown-soft); }
.promise-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 9vw; align-items: start; }

.promise h2,
.flow-heading h2,
.faq-heading h2,
.teams-copy h2 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(2.8rem, 5vw, 5.7rem);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.065em;
}

.lead { margin: 0; font-size: clamp(1.2rem, 2vw, 1.65rem); line-height: 1.48; }
.quiet { margin: 30px 0 0; color: var(--muted); line-height: 1.7; }

.showcase {
  color: var(--cream);
  background: var(--brown-deep);
  overflow: hidden;
}

.showcase-layout {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 7vw;
  align-items: center;
  min-height: 900px;
  padding-block: 110px;
}

.light-index { color: rgba(247, 240, 229, 0.48); }
.showcase h2 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(3.2rem, 5.4vw, 6rem);
  font-weight: 500;
  line-height: 0.94;
  letter-spacing: -0.065em;
}

.showcase-intro { max-width: 520px; margin: 30px 0 46px; color: rgba(247, 240, 229, 0.64); font-size: 1.05rem; line-height: 1.65; }
.feature-tabs { border-top: 1px solid rgba(247, 240, 229, 0.16); }

.feature-tab {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 14px;
  width: 100%;
  padding: 21px 0;
  border: 0;
  border-bottom: 1px solid rgba(247, 240, 229, 0.16);
  color: rgba(247, 240, 229, 0.43);
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: color 180ms ease, padding 180ms ease;
}

.feature-tab:hover,
.feature-tab.is-active { color: var(--cream); padding-left: 8px; }
.feature-tab > span:first-child { padding-top: 3px; font-size: 0.68rem; }
.feature-tab > span:last-child { display: flex; flex-direction: column; }
.feature-tab strong { font-size: 1.03rem; font-weight: 600; }
.feature-tab small { margin-top: 5px; color: rgba(247, 240, 229, 0.48); font-size: 0.79rem; }

.screen-stage {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 660px;
}

.screen-stage img {
  position: relative;
  z-index: 2;
  width: min(345px, 70%);
  max-height: 610px;
  object-fit: contain;
  filter: drop-shadow(0 40px 45px rgba(0, 0, 0, 0.4));
  transition: opacity 160ms ease, transform 260ms ease;
}

.screen-stage.is-changing img { opacity: 0; transform: translateY(14px) scale(0.98); }
.screen-stage p { position: absolute; z-index: 2; right: 0; bottom: 8%; width: 150px; margin: 0; color: rgba(247, 240, 229, 0.56); font-size: 0.76rem; line-height: 1.5; }

.screen-ring {
  position: absolute;
  border: 1px solid rgba(247, 240, 229, 0.13);
  border-radius: 50%;
}

.ring-a { width: 610px; height: 610px; }
.ring-b { width: 420px; height: 420px; }

.daily-flow { padding: 150px 0; }
.flow-heading { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 100px; }
.flow-heading .section-index { flex: 0 0 30%; }
.flow-heading h2 { flex: 1; max-width: 840px; font-size: clamp(2.8rem, 4.8vw, 5.2rem); }
.flow-list { border-top: 1px solid var(--line); }

.flow-item {
  display: grid;
  grid-template-columns: 0.65fr 1.15fr 1fr;
  gap: 40px;
  align-items: center;
  padding: 44px 0;
  border-bottom: 1px solid var(--line);
}

.flow-item p { color: var(--brown-soft); font-size: 0.67rem; font-weight: 700; letter-spacing: 0.16em; }
.flow-item h3 { margin: 0; font-family: var(--display); font-size: clamp(1.55rem, 2.6vw, 2.8rem); font-weight: 500; letter-spacing: -0.05em; }
.flow-item > span { color: var(--muted); font-size: 0.94rem; line-height: 1.6; }

.elite {
  position: relative;
  color: var(--cream);
  background: linear-gradient(125deg, #512c1a, #986341);
  overflow: hidden;
}

.elite-light {
  position: absolute;
  top: -45%;
  right: -8%;
  width: 720px;
  height: 720px;
  border-radius: 50%;
  background: rgba(246, 205, 169, 0.17);
  filter: blur(2px);
}

.elite-layout {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 0.8fr;
  gap: 8vw;
  align-items: center;
  min-height: 730px;
  padding-block: 100px;
}

.elite-mark { margin: 0 0 28px; font-size: 0.9rem; font-weight: 700; letter-spacing: 0.17em; }
.elite-mark span { color: #ecc5a7; }
.elite h2 { max-width: 680px; margin: 0; font-family: var(--display); font-size: clamp(3.2rem, 5.3vw, 5.8rem); font-weight: 500; line-height: 0.96; letter-spacing: -0.065em; }
.elite-copy > p:not(.section-index, .elite-mark) { max-width: 600px; margin: 30px 0 34px; color: rgba(247, 240, 229, 0.7); font-size: 1.02rem; line-height: 1.65; }

.elite-visual { display: grid; place-items: center; }
.elite-visual img {
  width: min(490px, 100%);
  border-radius: 52px;
  box-shadow: 0 45px 80px rgba(39, 18, 8, 0.3);
  transform: rotate(4deg);
}

.teams-bridge {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 80px;
  padding-block: 145px;
}

.teams-copy { max-width: 780px; }
.teams-copy p:last-child { max-width: 620px; margin: 28px 0 0; color: var(--muted); font-size: 1.06rem; line-height: 1.65; }
.teams-bridge .button { flex: 0 0 auto; }

.faq {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 9vw;
  padding: 30px 0 150px;
}

.faq-heading h2 { font-size: clamp(2.8rem, 4.5vw, 4.8rem); }
.faq-list { border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { display: flex; justify-content: space-between; gap: 30px; padding: 26px 0; font-size: 1rem; font-weight: 600; cursor: pointer; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary span { color: var(--brown-soft); font-size: 1.4rem; font-weight: 400; transition: transform 180ms ease; }
.faq-list details[open] summary span { transform: rotate(45deg); }
.faq-list details p { max-width: 650px; margin: -4px 42px 28px 0; color: var(--muted); font-size: 0.93rem; line-height: 1.7; }

.closing {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 650px;
  color: var(--brown-deep);
  background: #e6c6aa;
  overflow: hidden;
  text-align: center;
}

.closing::before,
.closing::after,
.closing-orbit {
  position: absolute;
  border: 1px solid rgba(53, 30, 19, 0.18);
  border-radius: 50%;
  content: "";
}

.closing::before { width: 780px; height: 780px; }
.closing::after { width: 530px; height: 530px; }
.closing-orbit { width: 310px; height: 310px; }
.closing-copy { position: relative; z-index: 2; }
.closing h2 { margin: 0 0 38px; font-family: var(--display); font-size: clamp(4rem, 7vw, 7.3rem); font-weight: 500; line-height: 0.89; letter-spacing: -0.075em; }
.app-store-button-dark { margin-inline: auto; color: var(--cream); background: var(--brown-deep); }

.site-footer { padding: 70px 32px 30px; color: var(--cream); background: var(--brown-deep); }
.footer-main { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: start; width: var(--shell); margin: 0 auto 80px; }
.footer-brand { font-size: 1.25rem; }
.footer-main > p { max-width: 240px; margin: 6px 0 0; color: rgba(247, 240, 229, 0.55); font-size: 0.86rem; }
.footer-main nav { display: grid; justify-self: end; gap: 14px; font-size: 0.83rem; }
.footer-main nav a { width: max-content; }
.footer-bottom { display: flex; justify-content: space-between; padding-top: 23px; border-top: 1px solid rgba(247, 240, 229, 0.13); color: rgba(247, 240, 229, 0.4); font-size: 0.69rem; }

.reveal,
.hero-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms cubic-bezier(.2,.75,.2,1), transform 700ms cubic-bezier(.2,.75,.2,1);
}

.reveal.is-visible,
.hero-reveal.is-visible { opacity: 1; transform: none; }

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@media (max-width: 980px) {
  :root { --shell: min(100% - 40px, 760px); }
  .site-header { grid-template-columns: 1fr auto; min-height: 72px; padding: 0 20px; }
  .site-header > .brand,
  .site-header > .header-actions { position: relative; z-index: 2; }
  /* Sign in / Sign up move into the mobile menu with the rest of the nav. */
  .desktop-nav, .site-header .button-small, .site-header .header-link { display: none; }
  .menu-button {
    display: grid;
    gap: 6px;
    width: 42px;
    height: 42px;
    padding: 12px 8px;
    border: 0;
    color: inherit;
    background: transparent;
    cursor: pointer;
  }
  .menu-button span:not(.sr-only) { display: block; height: 1px; background: currentColor; transition: transform 180ms ease; }
  .menu-button[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
  .menu-button[aria-expanded="true"] span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }
  .mobile-nav {
    position: fixed;
    z-index: 90;
    /* Starts under the header, which the launch strip pushed down. */
    inset: calc(72px + var(--launch-strip-h)) 0 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 26px;
    padding: 90px 24px 40px;
    color: var(--ink);
    background: var(--cream);
    font-family: var(--display);
    font-size: 1.75rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 200ms ease, visibility 200ms ease;
  }
  .mobile-nav.is-open { opacity: 1; visibility: visible; }
  .mobile-nav .button { margin-top: 12px; color: var(--cream); font-family: var(--sans); font-size: 0.9rem; }
  body:has(.mobile-nav.is-open) .site-header {
    color: var(--ink);
    background: var(--cream);
    box-shadow: 0 1px 0 var(--line);
  }

  /* Launch strip: the second line of copy is the first thing to go — the
     headline and the way in are what matter on a narrow screen. */
  .launch-strip { gap: 11px; padding: 0 16px; font-size: 0.8rem; }
  .launch-strip-copy > span { display: none; }

  .hero {
    grid-template-columns: 1fr;
    align-items: start;
    height: auto;
    min-height: 1100px;
    padding: 125px 20px 0;
  }
  .hero-copy { max-width: 700px; margin-inline: auto; padding-bottom: 25px; }
  .hero h1 { font-size: clamp(4.2rem, 15vw, 7.2rem); }
  .hero-product { width: min(460px, 70vw); height: 550px; align-self: end; margin-bottom: 0; }
  .hero-product > img { bottom: -21%; width: 92%; max-height: none; }
  .float-note-hours { top: 21%; }
  .float-note-pay { bottom: 22%; }
  .hero-caption { display: none; }

  .promise { padding-block: 100px; }
  .promise-grid,
  .showcase-layout,
  .elite-layout,
  .faq { grid-template-columns: 1fr; }
  .promise-grid { gap: 55px; }
  .showcase-layout { gap: 70px; padding-block: 100px; }
  .screen-stage { min-height: 590px; }
  .screen-stage p { right: 8%; }
  .flow-heading { display: block; margin-bottom: 70px; }
  .flow-heading .section-index { margin-bottom: 32px; }
  .flow-item { grid-template-columns: 0.35fr 0.9fr 1fr; gap: 25px; }
  .elite-layout { min-height: 0; padding-block: 100px; }
  .elite-visual img { width: min(420px, 80%); margin-top: 20px; }
  .teams-bridge { align-items: flex-start; padding-block: 100px; }
  .faq { gap: 60px; padding-bottom: 110px; }
}

@media (max-width: 640px) {
  :root { --shell: calc(100vw - 40px); --launch-strip-h: 40px; }
  /* Phone: pill + one sentence, and the arrow alone carries the link. */
  .launch-strip { gap: 9px; padding: 0 14px; font-size: 0.76rem; }
  .launch-strip-pill { padding: 4px 7px 3px; font-size: 0.56rem; letter-spacing: 0.13em; }
  .launch-strip-cta { font-size: 0; gap: 0; }
  .launch-strip-cta svg { width: 15px; height: 15px; }
  .hero { min-height: 990px; }
  .hero h1 { font-size: clamp(4rem, 20vw, 5.8rem); }
  .hero-intro { max-width: 92%; margin-top: 28px; }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 20px; }
  .hero-product { width: 86vw; height: 450px; }
  .hero-product > img { bottom: -22%; width: 90%; }
  .hero-glow { top: 11%; }
  .float-note { min-width: 118px; padding: 11px 13px; }
  .float-note strong { font-size: 0.98rem; }
  .float-note-hours { top: 26%; left: -3%; }
  .float-note-pay { right: -2%; bottom: 19%; }
  .promise { padding-block: 84px; }
  .promise h2,
  .flow-heading h2,
  .teams-copy h2 { font-size: 2.75rem; }
  .showcase-layout { padding-block: 86px; }
  .showcase h2,
  .elite h2 { font-size: 3.25rem; }
  .screen-stage { min-height: 490px; }
  .screen-stage img { width: 255px; max-height: 470px; }
  .ring-a { width: 430px; height: 430px; }
  .ring-b { width: 300px; height: 300px; }
  .screen-stage p { right: 0; bottom: 1%; width: 120px; }
  .daily-flow { padding-block: 90px; }
  .flow-item { display: block; padding: 30px 0; }
  .flow-item p { margin: 0 0 15px; }
  .flow-item h3 { margin-bottom: 13px; font-size: 1.75rem; }
  .elite-layout { padding-block: 85px; }
  .elite-visual img { width: 88%; border-radius: 34px; }
  .teams-bridge { flex-direction: column; gap: 38px; padding-block: 86px; }
  .faq { padding-top: 0; }
  .closing { min-height: 560px; padding-inline: 20px; }
  .closing h2 { font-size: clamp(3.7rem, 18vw, 5.2rem); }
  .site-footer { padding-inline: 20px; }
  .footer-main { grid-template-columns: 1fr; gap: 25px; margin-bottom: 55px; }
  .footer-main nav { justify-self: start; margin-top: 18px; }
  .footer-bottom { align-items: flex-start; flex-direction: column; gap: 10px; }
}

@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; }
  .reveal, .hero-reveal { opacity: 1; transform: none; }
}