/*  Connect — landing page styles.

    The palette is lifted straight from the app's `Brand` enum so the site and the product are
    visibly the same thing; the gradient is the app's own splash ramp.

    Plain CSS on purpose. This page has no state and no build step — adding a toolchain for one
    static page would be the tail wagging the dog.  */

:root {
  --blue:        #2E7BF6;
  --blue-deep:   #1857CE;
  --cyan:        #08F7FF;
  --navy:        #11389A;
  --ink:         #12243C;
  --muted:       #6B7D98;
  --sky:         #EAF2FF;
  --surface:     #FFFFFF;
  --line:        #E6ECF6;
  --live:        #12B981;
  --radius:      20px;
  --shell:       min(1100px, 100% - 3rem);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto,
               Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--sky);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}

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

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

.hero {
  /* The app's splash ramp, corner to corner. */
  background: linear-gradient(145deg, var(--cyan) 0%, #0C98CC 42%, var(--navy) 100%);
  color: #fff;
  padding: clamp(3.5rem, 9vw, 6.5rem) 0 clamp(4rem, 10vw, 7rem);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.mark {
  width: 88px; height: 88px; border-radius: 22px; display: block; margin-inline: auto;
  box-shadow: 0 18px 40px rgba(3, 26, 74, .3);
}

.hero h1 {
  margin: 1.5rem 0 0;
  font-size: clamp(2.5rem, 8vw, 4rem);
  line-height: 1.02;
  letter-spacing: -.035em;
  font-weight: 800;
}

.hero .tagline {
  margin: 1rem auto 0;
  max-width: 30ch;
  font-size: clamp(1.05rem, 3.2vw, 1.35rem);
  color: rgba(255, 255, 255, .93);
  /* Keeps the two lines evenly weighted instead of leaving one orphan word. */
  text-wrap: balance;
}

/* The second line of the hero — the deck's own framing of what Connect is for. Smaller and a shade
   quieter than the line above it, so the two read as a statement and its explanation rather than as
   two competing headlines. */
.hero .tagline--sub {
  margin-top: .75rem;
  font-size: clamp(.95rem, 2.2vw, 1.05rem);
  max-width: 54ch;
  color: rgba(255, 255, 255, .82);
  font-weight: 400;
}

.badge {
  margin-top: 2rem;
  display: inline-flex; align-items: center; gap: .55rem;
  padding: .7rem 1.25rem; border-radius: 999px;
  font-size: .95rem; font-weight: 650;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .3);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.badge .dot {
  width: 8px; height: 8px; border-radius: 50%; background: #7CFFB2; flex: none;
  box-shadow: 0 0 0 4px rgba(124, 255, 178, .25);
}

/* ------------------------------------------------------------- features */

.features { padding: clamp(3.5rem, 8vw, 6rem) 0; }

.feature {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  padding: clamp(2rem, 5vw, 3.5rem) 0;
}

@media (min-width: 52rem) {
  .feature { grid-template-columns: 1fr 1fr; }
  /* Alternate which side the phone sits on, so the page doesn't read as a single column of
     left-aligned text with pictures bolted to the right. */
  .feature:nth-child(even) .feature__text { order: 2; }
}

.feature__eyebrow {
  font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--blue); margin: 0 0 .6rem;
}
.feature__text h2 {
  margin: 0 0 .75rem;
  font-size: clamp(1.6rem, 4.2vw, 2.1rem);
  letter-spacing: -.025em; line-height: 1.15; font-weight: 750;
}
.feature__text p { margin: 0; color: var(--muted); font-size: 1.05rem; max-width: 42ch; }

.feature__shot { display: flex; justify-content: center; }

/*  The screenshots ALREADY carry a real iPhone bezel — they're captures of the Simulator's own
    window, transparent corners and all (see capture.sh). So there is no CSS frame here any more:
    wrapping one around them drew a phone inside a phone, which is exactly what it looked like.

    All that's left is the shadow the frame used to provide, cast through the alpha so it follows
    the device's actual silhouette rather than a rectangle.  */

.phone {
  width: min(300px, 76vw);
  line-height: 0;
}

.phone img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 26px 44px rgba(18, 36, 60, .26))
          drop-shadow(0 4px 10px rgba(18, 36, 60, .12));
}

/* ------------------------------------------------------- everything else

   The showcase sections above carry a screenshot each. They aren't the whole app, and a page that
   stopped there would read as a product with five features — so the rest is listed here as short
   cards. No screenshot needed to say "voice notes" or "works offline", and inventing five more
   device frames to say it would be padding.  */

.detail { background: var(--surface); border-top: 1px solid var(--line); }
.detail__inner { padding: clamp(3rem, 7vw, 5rem) 0; }

.detail h2 {
  margin: 0 0 .5rem; font-size: clamp(1.7rem, 4.5vw, 2.3rem);
  letter-spacing: -.025em; font-weight: 750; text-align: center;
}
.detail__lede {
  margin: 0 auto clamp(2.5rem, 5vw, 3.5rem); max-width: 48ch;
  text-align: center; color: var(--muted); font-size: 1.05rem;
}

.cards { display: grid; gap: 1rem; }
@media (min-width: 40rem) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .cards { grid-template-columns: repeat(3, 1fr); } }

.card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.4rem 1.5rem 1.5rem;
  background: #fff;
}
.card h3 {
  margin: 0 0 .85rem; font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em;
  display: flex; align-items: center; gap: .6rem;
}
.card h3 .glyph {
  width: 28px; height: 28px; border-radius: 9px; flex: none;
  display: grid; place-items: center; font-size: .85rem; line-height: 1;
  background: var(--sky); color: var(--blue);
}
.card ul { margin: 0; padding-left: 1.15rem; }
.card li { margin: 0 0 .55rem; color: var(--muted); font-size: .95rem; line-height: 1.45; }
.card li:last-child { margin-bottom: 0; }
.card li b { color: var(--ink); font-weight: 650; }

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

.closing {
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding: clamp(3rem, 7vw, 4.5rem) 0;
  text-align: center;
}
.closing h2 {
  margin: 0 0 .75rem; font-size: clamp(1.5rem, 4vw, 2rem);
  letter-spacing: -.02em; font-weight: 750;
}
.closing p { margin: 0 auto; color: var(--muted); max-width: 46ch; }

footer {
  padding: 2rem 0 3rem; text-align: center;
  color: var(--muted); font-size: .85rem;
  background: var(--surface);
}

/* Nothing on this page animates, so there is nothing to reduce — noted so it stays that way. */