/* NestUp — nestup.best
   Colours are copied verbatim from the app's src/theme/colors.ts so the site
   and the product are the same brand. Two rules carried over from the app:
   never pure white, never pure black. */

:root {
  --rose-700: #A95F70;   /* the only rose that clears AA on the light ground */
  --rose-900: #8B4E5D;
  --rose-200: #F3B6C2;
  --rose-100: #F8DEE3;
  --sage-500: #7C9A82;
  --sand-100: #F1E4CE;
  --sky-100:  #E6EFF3;

  --bg:      #FAF8F4;
  --surface: #FEFDFB;
  --line:    #E3E0D6;
  --text:    #2B2B28;
  --text-2:  #726F65;

  --bezel:   #16161A;

  /* One ratio-based scale, so nothing is an arbitrary number. */
  --s1: .5rem;  --s2: 1rem;  --s3: 1.5rem;  --s4: 2.5rem;
  --s5: 4rem;   --s6: 6rem;  --s7: 9rem;

  --shell: 1140px;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* The hero halo is deliberately wider than the viewport so the colour
     bleeds off both edges. Clipping here — on html, not just body — is what
     stops that bleed from becoming a horizontal scrollbar. `clip` rather than
     `hidden` so it never creates a scroll container and breaks position:sticky
     on the header. */
  overflow-x: clip;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3 {
  margin: 0;
  /* Large display type needs negative tracking to stop looking loose. */
  letter-spacing: -.03em;
  line-height: 1.05;
  font-weight: 640;
  text-wrap: balance;
}

p { margin: 0; }

a { color: inherit; }

.skip {
  position: absolute; left: -9999px;
  background: var(--surface); padding: var(--s2); border-radius: 12px; z-index: 99;
}
.skip:focus { left: var(--s2); top: var(--s2); }

:focus-visible { outline: 2px solid var(--rose-700); outline-offset: 3px; border-radius: 6px; }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--rose-700);
  color: var(--surface);
  text-decoration: none;
  font-weight: 620;
  letter-spacing: -.01em;
  border-radius: 999px;
  /* 44px is the iOS minimum touch target; no control here goes under it. */
  min-height: 44px;
  padding: 0 var(--s3);
  box-shadow: 0 1px 2px rgba(43, 43, 40, .12), 0 8px 24px -8px rgba(169, 95, 112, .55);
  transition: background .18s var(--ease), transform .18s var(--ease), box-shadow .18s var(--ease);
}
.btn:hover { background: var(--rose-900); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-sm { font-size: .95rem; padding: 0 1.15rem; }
.btn-lg { min-height: 54px; padding: 0 var(--s4); font-size: 1.06rem; }

.fine { color: var(--text-2); font-size: .9rem; }

/* ---------- header ---------- */

.bar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s2);
  max-width: var(--shell);
  margin: 0 auto;
  padding: .85rem var(--s3);
  /* Sticky over a scrolling page: blur keeps the mark legible without a hard
     bar edge cutting the composition. */
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(150%) blur(12px);
}
@supports not (backdrop-filter: blur(1px)) { .bar { background: var(--bg); } }

.lockup {
  display: inline-flex; align-items: center; gap: .6rem;
  text-decoration: none; font-weight: 660; letter-spacing: -.02em; font-size: 1.1rem;
  min-height: 44px;
}
.lockup img { border-radius: 9px; }

/* ---------- 01 hero ---------- */

.hero {
  max-width: var(--shell);
  margin: 0 auto;
  padding: var(--s4) var(--s3) var(--s6);
  display: grid;
  gap: var(--s4);
  justify-items: center;
  text-align: center;
}

.hero h1 { font-size: clamp(2.2rem, 8.2vw, 3.1rem); }

/* The authored line breaks are a desktop typesetting decision. On narrow
   screens they fight text-wrap:balance and produce a worse rag, so drop
   them and let the browser set the lines. */
.bp { display: none; }

.lede {
  margin-top: var(--s2);
  color: var(--text-2);
  font-size: clamp(1.05rem, 4.2vw, 1.2rem);
  max-width: 34ch;
  text-wrap: pretty;
}

.hero-type .btn { margin-top: var(--s3); }
.hero-type .fine { margin-top: .9rem; }

/* The stage is the art direction: a soft brand field the device sits in front
   of, rather than a phone floating beside a column of text. */
.stage {
  position: relative;
  margin: 0;
  width: 100%;
  display: flex;
  justify-content: center;
}

.halo {
  position: absolute;
  inset: 12% -22% 8%;
  background:
    radial-gradient(60% 50% at 30% 25%, var(--rose-100), transparent 70%),
    radial-gradient(55% 45% at 75% 60%, var(--sky-100), transparent 70%),
    radial-gradient(50% 40% at 50% 95%, var(--sand-100), transparent 72%);
  filter: blur(28px);
  z-index: 0;
}

/* ---------- device ---------- */

.phone {
  position: relative;
  z-index: 1;
  width: 272px;
  flex: none;
  /* Titanium-edge feel: a hairline highlight inside the dark bezel. */
  background: var(--bezel);
  padding: 9px;
  border-radius: 50px;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .16),
    0 2px 6px rgba(43, 43, 40, .16),
    0 30px 60px -24px rgba(43, 43, 40, .42);
}

.phone .screen {
  width: 100%;
  /* The inner radius must be the outer radius minus the bezel, or the screen
     corners cut through the frame. */
  border-radius: 41px;
  background: var(--surface);
}

.island {
  position: absolute;
  z-index: 2;
  top: 20px; left: 50%;
  transform: translateX(-50%);
  width: 78px; height: 23px;
  background: var(--bezel);
  border-radius: 999px;
}

/* These two screens are content-dense at the top and quiet further down.
   Showing the whole device would put empty app space on the page, so the
   window crops to the part that carries the story and fades the device out
   rather than cutting it with a hard line. */
.window {
  width: 100%;
  height: 300px;
  display: flex;
  justify-content: center;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 72%, transparent 100%);
}

.phone.sm { width: 232px; padding: 8px; border-radius: 44px; align-self: start; }
.phone.sm .screen { border-radius: 36px; }
.phone.sm .island { top: 17px; width: 66px; height: 20px; }

/* ---------- 02 product proof ---------- */

.proof {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--s3) var(--s6);
}

.proof-head { max-width: 26ch; margin-bottom: var(--s4); }
.proof-head h2 { font-size: clamp(1.9rem, 6.6vw, 2.4rem); }

.kicker {
  color: var(--rose-700);
  font-size: .8rem; font-weight: 680;
  letter-spacing: .14em; text-transform: uppercase;
  margin-bottom: .75rem;
}

.pair { display: grid; gap: var(--s5); }

.tile {
  margin: 0;
  display: grid;
  gap: var(--s3);
  justify-items: center;
  text-align: center;
  padding: var(--s4) var(--s3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 28px;
}

.tile h3 { font-size: 1.3rem; margin-bottom: .5rem; }
.tile figcaption { max-width: 30ch; }
.tile figcaption p { color: var(--text-2); text-wrap: pretty; }

/* ---------- 03 close ---------- */

.close {
  display: grid;
  justify-items: center;
  gap: var(--s3);
  text-align: center;
  padding: var(--s6) var(--s3) var(--s5);
  background:
    radial-gradient(70% 100% at 50% 0%, var(--rose-100), transparent 70%),
    var(--bg);
  border-top: 1px solid var(--line);
}
.close img { border-radius: 16px; }
.close h2 { font-size: clamp(1.9rem, 7vw, 2.6rem); }

/* ---------- footer ---------- */

.foot {
  max-width: var(--shell);
  margin: 0 auto;
  padding: var(--s3);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s2);
  color: var(--text-2);
  font-size: .9rem;
}
.foot nav { display: flex; flex-wrap: wrap; gap: var(--s2); }
/* Inline-sized text links would be ~23px tall. Padding brings every footer
   target up to the 44px floor without changing how they look. */
.foot a { text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 .5rem; }
.foot a:hover { color: var(--text); text-decoration: underline; }

/* ---------- motion ----------
   Entrance only, and only on capable browsers. Nothing here is required to
   read the page: if the animation never runs, the content is already visible
   because the end state is the default. */

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .reveal {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 34%;
    }
  }
  @keyframes rise {
    from { opacity: 0; transform: translateY(26px) scale(.97); }
    to   { opacity: 1; transform: none; }
  }
}

/* ---------- 430px and up ---------- */

@media (min-width: 430px) {
  .phone { width: 300px; }
  .phone.sm { width: 252px; }
}

/* ---------- tablet ---------- */

@media (min-width: 760px) {
  body { font-size: 18px; }

  .pair { grid-template-columns: 1fr 1fr; gap: var(--s3); }
  .tile { padding: var(--s5) var(--s3); }
}

/* ---------- desktop ----------
   The hero becomes one overlapping composition: the type block sits on the
   left of the stage and the halo bleeds past it, so the two read as a single
   art-directed frame rather than two columns parked side by side. */

@media (min-width: 1000px) {
  .hero {
    /* The type column has to hold "Your parent community" on one line at the
       display size, so it gets the larger share; the device only needs its
       own width plus room for the tilt. */
    grid-template-columns: 1.25fr .75fr;
    align-items: center;
    justify-items: start;
    text-align: left;
    gap: var(--s3);
    padding: var(--s5) var(--s3) var(--s7);
  }

  .bp { display: inline; }
  .hero h1 { font-size: clamp(2.9rem, 3.9vw, 3.6rem); }
  .lede { max-width: 32ch; }

  .stage { justify-content: flex-end; }

  /* A restrained tilt — enough to read as a photographed object, not enough
     to make the UI inside hard to read. */
  .phone {
    width: 340px;
    transform: rotate(-3deg);
    transition: transform .5s var(--ease);
  }
  .stage:hover .phone { transform: rotate(0deg); }

  .halo { inset: -14% -30% -14% -55%; filter: blur(46px); }

  .proof-head { margin-bottom: var(--s5); }
  .proof-head h2 { font-size: 2.9rem; }

  .pair { gap: var(--s4); }
  /* Fixed first track rather than `auto`: the window is a clipping box, so its
     intrinsic width would otherwise fight the device inside it. */
  .tile { grid-template-columns: 248px 1fr; justify-items: start; text-align: left; align-items: center;
          gap: var(--s4); padding: var(--s4); }
  .window { height: 340px; }
  .phone.sm { width: 224px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .phone { transform: none !important; }
}