/* site/site.css — the Perri site.
   Board: docs/design/mockups-v8-website/website-board.png.

   ── THE SAME PRODUCT, IN A WIDER ROOM ─────────────────────────────────────
   The tokens are the app's own, lifted rather than re-picked: a site whose
   violet is a shade off the product's is a site that was designed separately,
   and a person who goes from one to the other feels it before they can say
   what it was. */

:root {
  --ground: #0a0912;
  --panel: #15131f;
  --edge: rgba(167,139,250,0.13);
  --ink: #f1eef8;
  --ink-quiet: #8b8798;
  --accent: #b9a5ff;
  --violet: #8b5cf6;
  --violet-deep: #7c3aed;
  --measure: 68rem;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  background-image: radial-gradient(120% 60% at 70% -10%, rgba(139,92,246,0.20), transparent 60%);
  background-repeat: no-repeat;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { margin: 0; line-height: 1.15; letter-spacing: -0.015em; }
.accent { color: var(--accent); }
.centred { text-align: center; }
/* Balanced headlines everywhere, for the same reason the app's are: a hard
   break is right for one width and wrong for every other. */
h1, h2 { text-wrap: balance; }

.fine { color: var(--ink-quiet); font-size: 0.86rem; }
.lede { color: var(--ink-quiet); font-size: 1.05rem; max-width: 34rem; margin: 0; }

/* ── NAV ─────────────────────────────────────────────────────────────── */
.nav {
  display: flex; align-items: center; gap: 1.4rem;
  max-width: var(--measure); margin: 0 auto; padding: 1.3rem 1.5rem;
}
.brand { display: flex; align-items: center; gap: 0.5rem; font-weight: 600;
  text-decoration: none; font-size: 1.05rem; }
.nav-links { display: flex; gap: 1.4rem; margin-left: auto; }
.nav-links a { color: var(--ink-quiet); text-decoration: none; font-size: 0.94rem; }
.nav-links a:hover { color: var(--ink); }
.nav-cta { margin-left: 0.4rem; }

.btn {
  display: inline-block; padding: 0.72rem 1.3rem; border-radius: 999px;
  font-size: 0.95rem; font-weight: 600; text-decoration: none; cursor: pointer;
  border: 1px solid transparent; font-family: inherit;
}
.btn-solid {
  color: #fff; background: linear-gradient(180deg, var(--violet), var(--violet-deep));
  border-color: rgba(167,139,250,0.5);
  box-shadow: 0 10px 30px rgba(124,58,237,0.30);
}
.btn-ghost { color: var(--ink); background: rgba(255,255,255,0.05);
  border-color: rgba(255,255,255,0.14); }

/* ── HERO ────────────────────────────────────────────────────────────── */
.hero {
  max-width: var(--measure); margin: 0 auto; padding: 3rem 1.5rem 4rem;
  display: grid; grid-template-columns: 1fr auto; gap: 3rem; align-items: center;
}
.hero h1 { font-size: clamp(2.5rem, 6vw, 4rem); font-weight: 700; }
.hero-words { display: flex; flex-direction: column; gap: 1.2rem; }
.hero-actions { display: flex; gap: 0.7rem; flex-wrap: wrap; }
/* THE PHONE IS THE PRODUCT, so it is shown at a size where the words on it can
   be read. The shot is 2× for exactly this. */
.hero-shot img {
  width: 300px; border-radius: 2.2rem;
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 40px 90px rgba(0,0,0,0.55), 0 0 80px rgba(139,92,246,0.18);
}

/* ── VALUE PROPS ─────────────────────────────────────────────────────── */
.props {
  max-width: var(--measure); margin: 0 auto; padding: 0 1.5rem 4rem;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6rem;
}
.prop h3 { font-size: 1rem; margin-bottom: 0.35rem; }
.prop p { margin: 0; color: var(--ink-quiet); font-size: 0.9rem; }

/* ── STEPS ───────────────────────────────────────────────────────────── */
.steps {
  max-width: var(--measure); margin: 0 auto; padding: 3.4rem 1.5rem;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.steps h2 { font-size: clamp(1.8rem, 4vw, 2.4rem); text-align: center; margin-bottom: 2rem; }
.step-list {
  list-style: none; counter-reset: step; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6rem;
}
.step-list li { counter-increment: step; }
.step-list li::before {
  content: counter(step);
  display: grid; place-items: center; width: 1.9rem; height: 1.9rem;
  border-radius: 50%; margin-bottom: 0.7rem;
  font-size: 0.85rem; font-weight: 600; color: var(--accent);
  background: rgba(139,92,246,0.16); border: 1px solid var(--edge);
}
.step-list h3 { font-size: 1rem; margin-bottom: 0.3rem; }
.step-list p { margin: 0; color: var(--ink-quiet); font-size: 0.9rem; }
.more { text-align: center; margin: 2rem 0 0; }
.more a { color: var(--accent); text-decoration: none; font-size: 0.95rem; }
.shot-pair {
  display: flex; gap: 1.6rem; justify-content: center; margin-top: 2.6rem; flex-wrap: wrap;
}

/* ── PRICING ─────────────────────────────────────────────────────────── */
.pricing {
  max-width: var(--measure); margin: 0 auto; padding: 3.4rem 1.5rem;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.pricing h2 { font-size: clamp(1.8rem, 4vw, 2.4rem); text-align: center; }
.plans {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; margin: 2rem 0 1.2rem;
}
.plan {
  position: relative; padding: 1.4rem 1.2rem; border-radius: 1.2rem;
  background: var(--panel); border: 1px solid rgba(255,255,255,0.08);
  display: flex; flex-direction: column; gap: 0.5rem;
}
.plan.is-featured { border-color: rgba(167,139,250,0.45); background: rgba(139,92,246,0.10); }
.plan-flag {
  position: absolute; top: -0.7rem; left: 1.2rem;
  padding: 0.2rem 0.6rem; border-radius: 999px; font-size: 0.7rem; font-weight: 600;
  color: #fff; background: var(--violet);
}
.plan h3 { font-size: 1.1rem; color: var(--accent); }
.plan-sub { margin: 0; color: var(--ink-quiet); font-size: 0.85rem; }
.plan-price { margin: 0.2rem 0 0; font-size: 1.5rem; font-weight: 700; }
.plan-price small { font-size: 0.85rem; font-weight: 400; color: var(--ink-quiet); }
/* The line that turns a feature list into a promise, and it is not decoration:
   the Actions tier's bullets are all PENDING in the audit. */
.plan-when { margin: 0.3rem 0 0; font-size: 0.82rem; color: var(--accent); }
.plan ul { list-style: none; margin: 0.3rem 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.88rem; }
.plan li { display: flex; gap: 0.5rem; }
.plan li::before { content: '✓'; color: var(--accent); }

/* ── TRUST ───────────────────────────────────────────────────────────── */
.trust {
  max-width: var(--measure); margin: 0 auto; padding: 2.6rem 1.5rem;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.trust-item h3 { font-size: 0.98rem; margin-bottom: 0.3rem; }
.trust-item p { margin: 0; color: var(--ink-quiet); font-size: 0.88rem; }

/* ── WAITLIST ────────────────────────────────────────────────────────── */
.waitlist {
  max-width: 40rem; margin: 0 auto; padding: 3.4rem 1.5rem 4rem; text-align: center;
}
.waitlist h2 { font-size: clamp(1.8rem, 4vw, 2.4rem); margin-bottom: 0.6rem; }
.waitlist .lede { margin: 0 auto; }
.wl-form { display: flex; gap: 0.6rem; margin: 1.6rem auto 0.8rem; max-width: 28rem; }
.wl-input {
  flex: 1; min-width: 0; padding: 0.72rem 1rem; border-radius: 999px;
  font: inherit; font-size: 0.95rem; color: var(--ink);
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.14);
}
.wl-input:focus { outline: none; border-color: rgba(167,139,250,0.6); }
/* Not red. A typo in an email address is not a hazard. */
#wl-said { min-height: 1.4rem; color: var(--accent); }

/* ── FOOTER ──────────────────────────────────────────────────────────── */
.foot {
  max-width: var(--measure); margin: 0 auto;
  padding: 2rem 1.5rem 3rem; border-top: 1px solid rgba(255,255,255,0.06);
  display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap;
}
.foot-brand { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; }
.foot-tag { color: var(--ink-quiet); font-weight: 400; font-size: 0.88rem; margin-left: 0.4rem; }
.foot-links { display: flex; gap: 1.2rem; margin-left: auto; }
.foot-links a { color: var(--ink-quiet); text-decoration: none; font-size: 0.9rem; }
.foot-fine { width: 100%; margin: 0; color: var(--ink-quiet); font-size: 0.82rem; }

/* ── ONE PHONE, ONE COLUMN ───────────────────────────────────────────────
   Not a separate design: the same page, stacked. The hero's phone goes UNDER
   the words rather than beside them, because a 300px phone next to a headline
   on a 380px screen is two things fighting. */
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 2rem; }
  .props, .step-list, .plans, .trust { grid-template-columns: repeat(2, 1fr); }
  /* Brand · How it works · Pricing · a pill does not fit in 390px, and a nav
     that wraps to two lines is the wrapped tab bar the app's own camera found.
     Both links are in the footer, and the hero carries "See how it works". */
  .nav-links { display: none; }
  /* WITH THE LINKS GONE, THE PILL LOST ITS RIGHT EDGE. `.nav-links` held the
     auto margin that pushed it there, so on a phone the CTA sat mid-row with
     a third of the bar empty beside it. The camera found that too. */
  .nav-cta { margin-left: auto; }
}
@media (max-width: 560px) {
  .props, .step-list, .plans, .trust { grid-template-columns: 1fr; }
  .wl-form { flex-direction: column; }
  .foot-links { margin-left: 0; }
}

/* ══ HOW IT WORKS ════════════════════════════════════════════════════════ */
.hiw { max-width: var(--measure); margin: 0 auto; padding: 1rem 1.5rem 3rem; }
.crumbs { color: var(--ink-quiet); font-size: 0.85rem; margin: 0 0 2rem; }
.crumbs a { color: var(--ink-quiet); text-decoration: none; }
.crumbs span { margin: 0 0.4rem; }
.hiw h1 { font-size: clamp(2rem, 5vw, 3rem); text-align: center; }
.hiw-lede { margin: 1rem auto 3rem; }

.hiw-step {
  display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center;
  padding: 2.6rem 0; border-top: 1px solid rgba(255,255,255,0.06);
}
.hiw-words h2 { font-size: 1.5rem; margin: 0.7rem 0 0.6rem; }
.hiw-words p { margin: 0 0 0.9rem; color: var(--ink-quiet); }
.hiw-words ul { list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.92rem; }
.hiw-words li { display: flex; gap: 0.55rem; }
.hiw-words li::before { content: '✓'; color: var(--accent); }
.hiw-num {
  display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%;
  font-size: 0.9rem; font-weight: 600; color: var(--accent);
  background: rgba(139,92,246,0.16); border: 1px solid var(--edge);
}
.hiw-visual { display: flex; flex-direction: column; gap: 0.7rem; align-items: center; }

/* ── THE SHOTS ARE CROPPED, AND THE CAMERA IS WHY ─────────────────────────
   A phone screen is 390×844 and the app's surfaces put their content in the
   top third — so a full-height shot is a column of dead space with a tab bar
   at the bottom, and steps 3 and 4 came back with a hand's width of nothing
   beside their words. The first shoot showed it immediately; reading the CSS
   never would have.

   So they are cropped to their content and faded out, which is a phone
   continuing past the edge rather than a screen with nothing on it. Cropping
   is not a claim: every pixel shown is the shipped app, which is the part the
   audit cares about. */
.hiw-visual img, .shot-pair img {
  width: 270px; height: 320px;
  object-fit: cover; object-position: top center;
  border-radius: 1.9rem 1.9rem 0 0;
  border: 1px solid rgba(255,255,255,0.09); border-bottom: 0;
  box-shadow: 0 30px 70px rgba(0,0,0,0.5);
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 55%, transparent 100%);
}

/* ── THE STEPS ALTERNATE ──────────────────────────────────────────────────
   Four rows with the words always on the left is a list wearing a layout. The
   eye has nothing to do; alternating gives the page a beat, and it is the
   board's own rhythm. `nth-of-type` counts sections, so the heading and lede
   above cannot shift the parity the way `nth-child` would. */
.hiw-step:nth-of-type(even) .hiw-words { order: 2; }

.chat {
  width: 100%; padding: 1.1rem; border-radius: 1.2rem;
  background: var(--panel); border: 1px solid var(--edge);
  display: flex; flex-direction: column; gap: 0.55rem;
}
.chat p { margin: 0; padding: 0.6rem 0.85rem; border-radius: 1rem; font-size: 0.9rem; max-width: 85%; }
.chat-them { background: rgba(255,255,255,0.05); }
.chat-me { background: linear-gradient(180deg, var(--violet), var(--violet-deep));
  color: #fff; align-self: flex-end; }

.scopes { width: 100%; display: flex; flex-direction: column; gap: 0.6rem; }
.scope {
  padding: 0.85rem 1rem; border-radius: 1rem;
  background: var(--panel); border: 1px solid rgba(255,255,255,0.08);
  display: flex; flex-direction: column; gap: 0.15rem;
}
.scope span { color: var(--ink-quiet); font-size: 0.86rem; }

@media (max-width: 900px) {
  .hiw-step { grid-template-columns: 1fr; gap: 1.6rem; }
  /* ONE COLUMN MEANS THE ALTERNATION HAS TO GO. Left-right becomes
     above-below, so steps 2 and 4 would lead with a picture while 1 and 3 lead
     with their words — a rhythm on a wide screen turning into an inconsistency
     on a narrow one. Every step reads words-then-picture on a phone. */
  .hiw-step:nth-of-type(even) .hiw-words { order: 0; }
}

/* ══ TAP TARGETS ═════════════════════════════════════════════════════════
   The camera measured every link and button on both widths and found the nav
   and footer links at 23–27px tall. A finger is not a cursor: below ~44px a
   link is a thing you aim at rather than press, and the misses land on
   whatever is beside it.

   Padding rather than font-size, so nothing about the design changes — the
   hit area grows and the type stays where it was drawn. Applied at every
   width, because a trackpad user gains from it too and a rule that only
   exists under a media query is a rule half the traffic never gets. */
.brand,
.foot-brand,
.nav-links a,
.foot-links a,
.crumbs a,
.more a {
  display: inline-flex; align-items: center;
  min-height: 44px;
  /* Negative margin keeps the enlarged box from pushing the layout around:
     the target grows into space the row already had. */
  margin-block: -0.6rem;
}
.wl-input, .wl-form .btn { min-height: 48px; }