/*
  styles.css
  Friends Day — the customer-facing site (RS-1, RS-2, M9).

  The locked palette, and nothing else: docs/FriendsDay_Locked_Brand_Colors.md.
  Light only — dark mode is designed separately in Milestone 12 (BC-5), and an
  auto-inverted brand is exactly what that decision forbids.
*/

:root {
  --green: #33ad8e;
  --green-deep: #2fa083;
  --green-text: #237a64;
  --mint: #e9f6f1;
  --coral: #ff6038;
  --navy: #0f263f;
  --beige: #fdeedf;
  --cream: #fff8f0;
  --warm: #f6e9dc;
  --white: #ffffff;
  --muted: rgba(15, 38, 63, 0.66);
  --faint: rgba(15, 38, 63, 0.45);
  color-scheme: light;

  /* One motion language for everything interactive. A decelerating curve, so
     a hover arrives fast and settles instead of stopping dead — which is what
     made the old instant colour swaps read as cuts rather than responses.
     Every rule below spells out the properties it animates; nothing uses
     `transition: all`, which would also animate layout and paint. */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 200ms;
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  /* "See how it works" glides to the band instead of teleporting. No sticky
     header on this site, so the section lands flush against the top of the
     viewport and needs no scroll-margin to clear anything. */
  scroll-behavior: smooth;
  /* .band stretches full-bleed with 50vw margins; on browsers whose 50vw
     includes the scrollbar that overshoots by ~15px — clip it. */
  overflow-x: clip;
}

body {
  margin: 0;
  padding: 0 20px 64px;
  background: var(--cream);
  color: var(--navy);
  font: 17px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: 44rem;
  margin: 0 auto;
}

/* The landing page spreads out on big screens; the reading pages (FAQ, legal)
   keep the narrow measure long text needs. */
.wrap.wide {
  max-width: 78rem;
}

/* Long-form text inside a wide page still wraps at a readable width. */
.prose {
  max-width: 46rem;
}

/* A section that escapes the wrap to paint edge to edge. */
.band {
  margin-inline: calc(50% - 50vw);
  padding-inline: calc(50vw - 50%);
  background: var(--mint);
  padding-top: 40px;
  padding-bottom: 48px;
  margin-top: 48px;
  margin-bottom: 8px;
}

.band > :first-child {
  margin-top: 0;
}

/* ---- Header ------------------------------------------------------------- */

.site-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 0;
  flex-wrap: wrap;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  color: var(--navy);
  text-decoration: none;
}

.wordmark .mark {
  display: block;
  border-radius: 7px;
}

.site-nav {
  display: flex;
  gap: 20px;
  font-size: 0.95rem;
}

.site-nav a {
  color: var(--muted);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--navy);
}

/* ---- Type --------------------------------------------------------------- */

h1 {
  font-size: 2.4rem;
  line-height: 1.1;
  letter-spacing: -0.025em;
  margin: 24px 0 12px;
}

h2 {
  font-size: 1.3rem;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 36px 0 10px;
}

h3 {
  font-size: 1.02rem;
  margin: 24px 0 6px;
}

p,
li {
  color: var(--muted);
}

h1 + p.lede {
  font-size: 1.15rem;
  color: var(--navy);
}

a {
  color: var(--green);
}

strong {
  color: var(--navy);
}

.eyebrow {
  margin: 0;
  color: var(--green);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.updated {
  color: var(--faint);
  font-size: 0.9rem;
}

/* ---- Blocks ------------------------------------------------------------- */

.card {
  background: var(--white);
  border-radius: 20px;
  padding: 28px 26px;
  margin: 24px 0;
  box-shadow:
    0 1px 3px rgba(15, 38, 63, 0.06),
    0 8px 24px rgba(15, 38, 63, 0.05);
}

.card h2:first-child,
.card h3:first-child {
  margin-top: 0;
}

.rule {
  border: none;
  border-top: 1px solid var(--warm);
  margin: 40px 0;
}

.button {
  display: inline-block;
  margin-top: 10px;
  padding: 13px 24px;
  border-radius: 999px;
  background: var(--green);
  color: var(--white);
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--dur) var(--ease),
    transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    opacity var(--dur) var(--ease);
}

.button:hover {
  background: var(--green-deep);
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(51, 173, 142, 0.3);
}

.button:active {
  opacity: 0.85;
  transform: translateY(0);
  box-shadow: none;
}

.button.secondary {
  background: var(--warm);
  color: var(--navy);
}

/* Unused today (the 404 page carries the only `.button`), but without this the
   moment anyone adds a secondary one it would turn green on hover. */
.button.secondary:hover {
  background: var(--beige);
}

.steps {
  counter-reset: step;
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
}

.steps li {
  counter-increment: step;
  position: relative;
  padding: 0 0 0 40px;
  margin-bottom: 16px;
}

.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 1px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--green);
  color: var(--white);
  font-size: 0.85rem;
  font-weight: 700;
  display: grid;
  place-items: center;
}

.pillars {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  padding: 0;
  margin: 20px 0 0;
  list-style: none;
}

.pillars li {
  background: var(--white);
  border-radius: 16px;
  padding: 18px 20px;
}

.pillars strong {
  display: block;
  margin-bottom: 4px;
}

.callout {
  background: var(--mint);
  border-left: 4px solid var(--green);
  border-radius: 16px;
  padding: 18px 20px;
  margin: 24px 0;
  max-width: 46rem;
}

.callout p:last-child {
  margin-bottom: 0;
}

/* ---- Data table --------------------------------------------------------- */

.table-scroll {
  overflow-x: auto;
  margin: 16px 0;
}

table {
  border-collapse: collapse;
  width: 100%;
  min-width: 32rem;
  font-size: 0.95rem;
}

th,
td {
  text-align: left;
  vertical-align: top;
  padding: 12px 14px;
  border-bottom: 1px solid var(--warm);
  color: var(--muted);
}

th {
  color: var(--navy);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ---- Hero + phone frames ------------------------------------------------ */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 48px;
  align-items: center;
  margin-top: 16px;
}

.hero h1 {
  margin-top: 12px;
  font-size: 2.9rem;
}

.hero .lede {
  max-width: 34rem;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 22px;
  margin-top: 30px;
}

.cta-row .button {
  margin-top: 0;
}

/* ── Keyboard focus ──
   The site had no focus styles at all, so keyboard users got the UA default —
   and on the App Store badge that draws a *square* ring around visibly rounded
   artwork, because the anchor's own corners are what the ring follows.

   `:focus-visible` rather than `:focus`, so a mouse click on a button does not
   leave a ring behind it; browsers only match it when focus arrived by keyboard
   (or equivalent). The offset is what keeps the ring off the badge's black
   fill, where a navy ring would disappear. */
:where(a, button, [tabindex]):focus-visible {
  outline: 3px solid var(--green-text);
  outline-offset: 3px;
  border-radius: 4px;
}

/* The two hero CTAs are already rounded; matching the ring to their own radius
   stops it cutting across their corners. */
.appstore-badge:focus-visible {
  border-radius: 15px;
}

.cta-secondary:focus-visible {
  border-radius: 999px;
}

/* ── Secondary hero CTA ──
   A plain underlined link could not hold the other half of the row once the
   badge grew to 72px — it read as body copy that happened to sit there. This
   is deliberately *not* the green `.button`: two filled pills would be two
   primary actions, and the badge has to win. An outlined pill with real
   weight, plus an arrow that actually points at the section it scrolls to
   (and nudges toward it on hover, which is the whole tell).

   It rests in mint rather than white on purpose — twice over. White-on-cream
   with a grey hairline read as an empty form control, and mint is the exact
   fill of the `.band` this button scrolls down to, so the colour is a promise
   about where the click lands.

   The label stays `--green-text` in both states at 4.68:1 on mint (AA for
   normal text). The hover step is carried by the border alone — a fill that
   also deepened dropped the label to 4.16:1, under the 4.5 line, for the sake
   of a shade nobody would consciously notice. */
.cta-secondary {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 16px 28px;
  border: 2px solid rgba(51, 173, 142, 0.45);
  border-radius: 999px;
  background: var(--mint);
  color: var(--green-text);
  font-size: 1.03rem;
  font-weight: 600;
  text-decoration: none;
  transition: border-color var(--dur) var(--ease),
    transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.cta-secondary:hover {
  border-color: var(--green);
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(51, 173, 142, 0.28);
}

.cta-secondary:active {
  transform: translateY(0);
  box-shadow: none;
}

/* The pill lifts -2px on hover and the arrow travels +6px, so what a visitor
   actually sees the arrow do is the 4px difference — the two gestures are
   subtracted, not added. Anything under about 5px net simply does not register
   as movement. The overshoot curve does the rest: the arrow passes its mark
   and settles back, which reads as a deliberate nudge downward rather than a
   slow slide. */
.cta-secondary-arrow {
  transition: transform 240ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.cta-secondary:hover .cta-secondary-arrow {
  transform: translateY(6px);
}

/* ── App Store badge ──
   Apple's own artwork (marketing toolbox, US/UK black, 119.664 × 40), served
   from images/ rather than hotlinked. Not rebuilt in CSS: the badge is
   trademarked lockup and the guidelines want the supplied file, which is also
   the only way it reads as the button everyone already recognises.

   The radius must track the artwork's own corners (8.44 at height 40) or the
   shadow paints square corners behind a rounded badge — hence the ratio.

   Sized as the page's primary call to action, not as a footnote: the lockup is
   a fixed 2.99:1, so the only honest way to make it wider is to make it
   bigger. 72px tall reads as ~215px wide, which holds its own against the
   hero headline and still clears Apple's 40px web minimum three times over. */
.appstore-badge {
  display: inline-block;
  border-radius: 15px;
  box-shadow: 0 8px 24px rgba(15, 38, 63, 0.24);
  transition: transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}

.appstore-badge img {
  display: block;
  width: auto;
  height: 72px;
}

.appstore-badge:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 38px rgba(15, 38, 63, 0.32);
}

.appstore-badge:active {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(15, 38, 63, 0.24);
}

/* The rest of this site has no motion at all; honour the same preference the
   moment a visitor asks for less of it. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .site-nav a,
  .site-foot a,
  .button,
  .appstore-badge,
  .cta-secondary,
  .cta-secondary-arrow {
    transition: none;
  }

  .button:hover,
  .appstore-badge:hover,
  .cta-secondary:hover,
  .cta-secondary:hover .cta-secondary-arrow {
    transform: none;
  }
}

/* Phones are fixed-size frames — the screenshot can never dictate the page's
   height. Every image inside keeps its own aspect and clips to the bezel. */
.phone {
  position: relative;
  margin: 0 auto;
  width: 280px;
  max-width: 78vw;
  border-radius: 44px;
  padding: 10px;
  background: var(--navy);
  box-shadow:
    0 2px 6px rgba(15, 38, 63, 0.18),
    0 24px 48px rgba(15, 38, 63, 0.22);
}

.phone img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 590px;
  object-fit: cover;
  object-position: top;
  border-radius: 34px;
}

.phone.small {
  width: 220px;
  max-width: 70vw;
  border-radius: 38px;
  padding: 8px;
}

.phone.small img {
  border-radius: 30px;
  max-height: 464px;
}

.phone-caption {
  text-align: center;
  font-size: 0.9rem;
  color: var(--faint);
  margin-top: 12px;
}

/* ---- The walkthrough ---------------------------------------------------- */

.walkthrough .kicker {
  margin: 0 0 4px;
  color: var(--green-text);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.step-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 22px;
  margin-top: 26px;
}

.step-card {
  background: var(--white);
  border-radius: 20px;
  padding: 22px 20px 26px;
  border-top: 4px solid var(--green);
  box-shadow:
    0 1px 3px rgba(15, 38, 63, 0.06),
    0 8px 24px rgba(15, 38, 63, 0.05);
  text-align: center;
}

.step-card .phone {
  margin-bottom: 18px;
}

.step-card .step-num {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--green);
  color: var(--white);
  font-size: 0.9rem;
  font-weight: 700;
  margin-bottom: 8px;
}

.step-card h3 {
  margin: 0 0 6px;
}

.step-card p {
  margin: 0;
  font-size: 0.95rem;
}

@media (max-width: 46rem) {
  .hero {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .hero h1 {
    font-size: 2.2rem;
  }

  .hero .phone {
    order: 2;
  }

  .band {
    padding-top: 28px;
    padding-bottom: 32px;
  }
}

/* ---- Footer ------------------------------------------------------------- */

.site-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  align-items: center;
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--warm);
  font-size: 0.9rem;
  color: var(--faint);
}

.site-foot a {
  color: var(--muted);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}

.site-foot a:hover {
  color: var(--navy);
}

.site-foot .spacer {
  flex: 1 1 auto;
}

@media (max-width: 30rem) {
  h1 {
    font-size: 1.9rem;
  }
}