/* Proposal Pulse product site.
   Standalone: nothing here is shared with the main site's stylesheet.

   Light, with frosted panels over a soft lime and sky wash. The lime is a fill (buttons,
   highlights, the pulse line) and never text: on white it measures 1.3:1. Anything green
   that has to be read uses --signal-ink.

   Components a page can use: .pp-wrap, .pp-section, .pp-eyebrow, .pp-lede, .pp-actions,
   .pp-btn (--signal, --ghost, --sm), .pp-card, .pp-grid, .pp-pill (--hot, --warm, --looked),
   .pp-table-wrap > .pp-plans, .pp-shot, .pp-device, .pp-form with .pp-field, .pp-mono, .pp-hl.
   Page parts: .pp-film, .pp-pulse, .pp-steps, .pp-feature, .pp-phones, .pp-nudges, .pp-trades,
   .pp-plan-grid > .pp-plan, .pp-billing, .pp-faq, .pp-join, .pp-example (.pp-estimate,
   .pp-read, .pp-sms), .pp-prose. */

/* ---------- tokens ---------- */
:root {
  --bg: #F6F7F3;
  --surface: #FFFFFF;
  --line: #E1E3DD;
  --rule: #ECEDE8;
  --text: #0D0E12;
  --muted: #565B66;
  --signal: #C8F25A;
  --signal-ink: #3F6A08;
  --ink: #0D0E12;
  --hot: #B83A16;
  --hot-bg: rgba(255, 107, 74, .14);
  --warm: #8A5A00;
  --warm-bg: rgba(255, 196, 87, .22);
  --looked: #3F6A08;
  --looked-bg: rgba(200, 242, 90, .35);
  --quiet: #5F636C;
  --quiet-bg: #ECEEE8;
  /* Frosted panels. --glass-solid is what they fall back to without backdrop-filter. */
  --glass: rgba(255, 255, 255, .6);
  --glass-solid: rgba(255, 255, 255, .92);
  --glass-edge: rgba(255, 255, 255, .9);
  /* The 1px ring stands in for a border: a white edge vanishes on the page, a grey one
     looks drawn on */
  --shadow: 0 0 0 1px rgba(13, 14, 18, .06), 0 1px 2px rgba(13, 14, 18, .04), 0 16px 40px -20px rgba(13, 14, 18, .18);
  --shadow-lg: 0 0 0 1px rgba(13, 14, 18, .06), 0 2px 6px rgba(13, 14, 18, .04), 0 40px 80px -32px rgba(13, 14, 18, .3);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --sans: Manrope, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --gutter: 16px;
  --max: 1120px;
  --radius: 18px;
  color-scheme: light;
}

/* ---------- fonts ---------- */
@font-face {
  font-family: Manrope;
  src: url(/assets/fonts/manrope-latin-wght-normal.woff2) format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url(/assets/fonts/jetbrains-mono-latin-500-normal.woff2) format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 500 16px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}
/* The wash the glass sits on. Fixed, so a frosted panel picks up the same faint tint wherever
   it is on the page; the hero lays a stronger one of its own over the top. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(46rem 30rem at 0% 0%, rgba(200, 242, 90, .22), transparent 70%),
    radial-gradient(42rem 30rem at 100% 35%, rgba(125, 211, 252, .16), transparent 70%),
    radial-gradient(40rem 28rem at 30% 100%, rgba(200, 242, 90, .14), transparent 70%);
}
img, svg, video { max-width: 100%; display: block; }
figure { margin: 0; }
a { color: var(--signal-ink); text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }
::selection { background: rgba(200, 242, 90, .6); }
/* No border-radius here: it would square off the pill buttons while they had focus */
:focus-visible { outline: 2px solid var(--signal-ink); outline-offset: 3px; }
h1, h2, h3 {
  margin: 0;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.08;
  text-wrap: balance;
}
h1 { font-size: clamp(2.25rem, 1.4rem + 4.2vw, 4.5rem); letter-spacing: -.04em; line-height: 1.02; }
h2 { font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.75rem); letter-spacing: -.035em; }
h3 { font-size: 1.125rem; letter-spacing: -.015em; line-height: 1.25; }
p { margin: 0; }
section[id], [id].pp-anchor { scroll-margin-top: 96px; }

.pp-wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.pp-mono { font-family: var(--mono); font-weight: 500; letter-spacing: 0; }
.pp-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.pp-skip {
  position: absolute; left: var(--gutter); top: -60px; z-index: 30;
  padding: 10px 16px; border-radius: 999px;
  background: var(--signal); color: var(--ink); font-weight: 800; text-decoration: none;
}
.pp-skip:focus { top: 10px; }

/* ---------- glass ---------- */
/* One recipe for every frosted panel. Without backdrop-filter they're near-solid white,
   which reads fine; with it they drop to the see-through version. */
.pp-card, .pp-step, .pp-plan, .pp-trade, .pp-read, .pp-sms, .pp-billing,
.pp-shot__frame, .pp-film__frame, .pp-join .pp-form {
  background: var(--glass-solid);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--shadow);
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .pp-card, .pp-step, .pp-plan, .pp-trade, .pp-read, .pp-sms, .pp-billing,
  .pp-shot__frame, .pp-film__frame, .pp-join .pp-form {
    background: var(--glass);
    -webkit-backdrop-filter: blur(16px) saturate(1.5);
    backdrop-filter: blur(16px) saturate(1.5);
  }
}

/* ---------- nav ---------- */
/* A frosted bar floating 12px below the top edge. .pp-nav is what sticks; the bar inside is
   what shows, so the strip above it stays clear. No view-transition-name on it: that makes
   it a backdrop root, and the bar's blur then sees nothing but the nav itself. */
.pp-nav {
  position: sticky; top: 0; z-index: 20; padding-top: 12px;
  container: pp-nav / scroll-state;
}
.pp-nav__bar {
  position: relative; display: flex; align-items: center; gap: 8px; min-height: 60px;
  padding: 7px 7px 7px 12px;
  background: rgba(255, 255, 255, .92);
  border: 1px solid var(--glass-edge); border-radius: 999px;
  box-shadow: var(--shadow);
  transition: background-color .3s, box-shadow .3s;
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .pp-nav__bar {
    background: rgba(255, 255, 255, .58);
    -webkit-backdrop-filter: blur(18px) saturate(1.6);
    backdrop-filter: blur(18px) saturate(1.6);
  }
}
/* Firmer once there's page scrolling under it. Chrome only for now; elsewhere it keeps the
   lighter look, which is still readable. */
@container pp-nav scroll-state(stuck: top) {
  .pp-nav__bar { background: rgba(255, 255, 255, .86); box-shadow: var(--shadow-lg); }
}
.pp-brand {
  display: inline-flex; align-items: center; gap: 10px; margin-right: auto;
  color: var(--text); text-decoration: none;
  font-weight: 800; font-size: 1.0625rem; letter-spacing: -.02em; white-space: nowrap;
}
.pp-brand img { width: 32px; height: 32px; flex: none; border-radius: 9px; box-shadow: 0 6px 14px -6px rgba(13, 14, 18, .5); }
.pp-nav__links { display: none; }
.pp-nav__links a {
  display: block; padding: 12px 4px;
  color: var(--muted); font-weight: 600; font-size: .9375rem; text-decoration: none;
}
.pp-nav__links a:hover, .pp-nav__links a[aria-current] { color: var(--text); }
.pp-nav__toggle {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 44px; height: 44px; padding: 0;
  background: rgba(255, 255, 255, .7); border: 1px solid var(--line); border-radius: 999px; color: var(--text);
  cursor: pointer;
}
.pp-nav__toggle[hidden] { display: none; }
.pp-nav__toggle span, .pp-nav__toggle span::before, .pp-nav__toggle span::after {
  display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor;
}
.pp-nav__toggle span { position: relative; }
.pp-nav__toggle span::before, .pp-nav__toggle span::after { content: ""; position: absolute; left: 0; }
.pp-nav__toggle span::before { top: -6px; }
.pp-nav__toggle span::after { top: 6px; }
.pp-nav--open .pp-nav__links {
  display: block; position: absolute; top: calc(100% + 8px); left: 0; right: 0;
  padding: 6px 20px;
  background: rgba(255, 255, 255, .97);
  border: 1px solid var(--glass-edge); border-radius: 24px;
  box-shadow: var(--shadow-lg);
  transition: opacity .2s, translate .2s var(--ease);
}
/* Near-solid rather than frosted: it sits inside the bar, and the bar's own backdrop-filter
   cuts it off from the page, so a blur here would have nothing to blur. */
@starting-style {
  .pp-nav--open .pp-nav__links { opacity: 0; translate: 0 -6px; }
}
.pp-nav--open .pp-nav__links a { padding: 14px 0; border-top: 1px solid var(--rule); font-size: 1rem; }
.pp-nav--open .pp-nav__links a:first-child { border-top: 0; }

/* ---------- buttons ---------- */
.pp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 24px;
  border: 1px solid transparent; border-radius: 999px;
  font: 800 1rem/1 var(--sans); letter-spacing: -.01em; text-decoration: none; text-align: center;
  cursor: pointer;
  transition: translate .2s var(--ease), box-shadow .2s var(--ease), background-color .2s;
}
.pp-btn:hover { translate: 0 -1px; text-decoration: none; }
/* A lime button on white has no edge of its own, so it gets a hairline and a green glow */
.pp-btn--signal {
  background: var(--signal); color: var(--ink);
  box-shadow: inset 0 0 0 1px rgba(13, 14, 18, .08), inset 0 1px 0 rgba(255, 255, 255, .55), 0 10px 24px -12px rgba(98, 150, 10, .8);
}
.pp-btn--signal:hover {
  background: #D2F76E;
  box-shadow: inset 0 0 0 1px rgba(13, 14, 18, .08), inset 0 1px 0 rgba(255, 255, 255, .55), 0 14px 30px -12px rgba(98, 150, 10, .9);
}
.pp-btn--ghost { background: rgba(255, 255, 255, .7); border-color: var(--line); color: var(--text); }
.pp-btn--ghost:hover { background: #fff; box-shadow: var(--shadow); }
.pp-btn--sm { min-height: 44px; padding: 0 18px; font-size: .875rem; }
.pp-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- sections ---------- */
.pp-section { padding-block: clamp(64px, 10vw, 128px); }
.pp-section--surface {
  background: linear-gradient(rgba(255, 255, 255, .7), rgba(255, 255, 255, .4));
  border-block: 1px solid var(--rule);
}
.pp-section__head { max-width: 720px; margin-bottom: clamp(32px, 5vw, 56px); }
.pp-section__head > * + * { margin-top: 14px; }
.pp-eyebrow {
  font: 500 .8125rem/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--signal-ink);
}
.pp-lede { max-width: 38em; font-size: clamp(1.0625rem, 1rem + .4vw, 1.25rem); line-height: 1.55; color: var(--muted); }

/* ---------- hero ---------- */
.pp-hero {
  position: relative; isolation: isolate; overflow: clip;
  padding-block: clamp(48px, 9vw, 112px) clamp(56px, 9vw, 104px);
  text-align: center;
}
/* Its own wash, stronger than the page's, and a faint grid that fades out from the top */
.pp-hero::before, .pp-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.pp-hero::before {
  background:
    radial-gradient(56rem 32rem at 50% -14%, rgba(200, 242, 90, .55), transparent 68%),
    radial-gradient(34rem 26rem at 96% 6%, rgba(125, 211, 252, .38), transparent 70%),
    radial-gradient(30rem 24rem at 2% 38%, rgba(167, 243, 208, .4), transparent 70%);
}
.pp-hero::after {
  background:
    linear-gradient(rgba(13, 14, 18, .05) 1px, transparent 0) 50% 0 / 56px 56px,
    linear-gradient(90deg, rgba(13, 14, 18, .05) 1px, transparent 0) 50% 0 / 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 64% 70% at 50% 0%, #000 20%, transparent 72%);
  mask-image: radial-gradient(ellipse 64% 70% at 50% 0%, #000 20%, transparent 72%);
}
.pp-hero .pp-wrap > * + * { margin-top: 22px; }
.pp-hero h1, .pp-hero .pp-lede { margin-inline: auto; }
.pp-hero h1 { max-width: 13em; }
.pp-hero .pp-actions { justify-content: center; margin-top: 34px; }
.pp-hero__note { font: 500 .8125rem/1.5 var(--mono); color: var(--muted); }
.pp-hero .pp-actions + .pp-hero__note { margin-top: 16px; }
/* The eyebrow becomes a frosted chip with a lit dot */
.pp-hero .pp-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 14px 6px 11px; border-radius: 999px;
  background: rgba(255, 255, 255, .72); border: 1px solid var(--glass-edge); box-shadow: var(--shadow);
  color: var(--text);
}
.pp-hero .pp-eyebrow::before {
  content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 0 1px rgba(63, 106, 8, .4), 0 0 0 0 rgba(200, 242, 90, .8), 0 0 10px 1px rgba(200, 242, 90, .9);
}
/* Inner pages: a smaller headline, and the first section follows straight on */
.pp-hero--page { padding-block: clamp(48px, 8vw, 96px) clamp(40px, 6vw, 64px); }
.pp-hero--page h1 { max-width: 16em; font-size: clamp(2.125rem, 1.4rem + 3.4vw, 3.75rem); }
.pp-hero--page + .pp-section { padding-top: 0; }
.pp-section--tight { padding-block: clamp(40px, 6vw, 72px); }

/* A highlighter stroke behind a word or two of a headline */
.pp-hl {
  padding-inline: .06em; margin-inline: -.06em;
  background: linear-gradient(var(--signal), var(--signal)) no-repeat 0 86% / 100% .3em;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* ---------- pulse line ---------- */
/* The mark's line run the width of the page above the walkthrough. preserveAspectRatio is
   "slice", so a narrow screen crops the flat ends and the beat keeps its shape. */
.pp-pulse { height: 72px; margin-inline: calc(50% - 50vw); }
.pp-hero .pp-pulse { margin-top: clamp(32px, 5vw, 56px); }
.pp-pulse svg {
  width: 100%; height: 100%; overflow: visible;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
}
.pp-pulse path { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
/* A dark green underlay gives the lime an edge to hold against the pale wash */
.pp-pulse__shade { stroke: rgba(63, 106, 8, .22); stroke-width: 5; }
.pp-pulse__line { stroke: var(--signal); stroke-width: 3; filter: drop-shadow(0 0 5px rgba(200, 242, 90, .95)); }
.pp-pulse__blip { visibility: hidden; stroke: #F4FFD6; stroke-width: 3; filter: drop-shadow(0 0 6px #C8F25A) drop-shadow(0 0 2px #fff); }

/* ---------- hero film ---------- */
.pp-film { max-width: 1040px; margin-inline: auto; }
.pp-hero .pp-pulse + .pp-film { margin-top: 4px; }
.pp-film__frame { overflow: hidden; padding: 8px; border-radius: 26px; box-shadow: var(--shadow-lg); }
.pp-film video { width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 18px; background: var(--ink); }
.pp-film figcaption {
  display: flex; justify-content: center; gap: 12px; max-width: 46em; margin: 16px auto 0;
  text-align: left; font-size: .9375rem; line-height: 1.5; color: var(--muted);
}
.pp-film figcaption .pp-mono { flex: none; color: var(--signal-ink); font-size: .8125rem; line-height: 1.85; }

/* ---------- cards ---------- */
.pp-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
.pp-card { padding: 24px; border-radius: var(--radius); }
.pp-card > * + * { margin-top: 10px; }
.pp-card p { color: var(--muted); }
.pp-card__num { font: 500 .8125rem/1 var(--mono); color: var(--signal-ink); }

/* ---------- pills ---------- */
.pp-pill {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  background: var(--quiet-bg); color: var(--quiet);
  font: 700 .75rem/1.5 var(--sans); letter-spacing: .02em;
}
.pp-pill--hot { background: var(--hot-bg); color: var(--hot); }
.pp-pill--warm { background: var(--warm-bg); color: var(--warm); }
.pp-pill--looked { background: var(--looked-bg); color: var(--looked); }

/* ---------- plans table ---------- */
/* position: relative keeps the cells' visually hidden labels (.pp-sr, absolute) inside the
   scroller. Without it they belong to the page and widen it on a phone. Solid white, not
   glass: the sticky feature column has to match whatever slides under it. */
.pp-table-wrap {
  position: relative; overflow-x: auto;
  background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow);
}
.pp-plans { width: 100%; min-width: 560px; border-collapse: collapse; text-align: left; }
.pp-plans th, .pp-plans td { padding: 14px 16px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.pp-plans tbody tr:last-child > * { border-bottom: 0; }
.pp-plans thead th {
  border-bottom: 1px solid var(--line);
  font-weight: 800; font-size: 1.0625rem; letter-spacing: -.015em; vertical-align: bottom;
}
.pp-plans thead th small { display: block; margin-top: 4px; font: 500 .875rem/1.4 var(--mono); color: var(--muted); }
/* The feature column stays put while the plans scroll sideways on a phone */
.pp-plans tbody th { position: sticky; left: 0; width: 34%; min-width: 150px; background: var(--surface); font-weight: 600; color: var(--muted); }
.pp-plans td { font-weight: 600; }
.pp-plans .pp-plans__hl { background: rgba(200, 242, 90, .16); }
.pp-plans .pp-plans__soon { color: var(--muted); font-weight: 500; }
/* Fixed layout so the three plan columns come out the same width whatever is in them */
.pp-plans { table-layout: fixed; }
.pp-plans thead th:first-child { position: sticky; left: 0; width: 34%; background: var(--surface); }
.pp-plans tbody th, .pp-plans thead th:first-child { z-index: 1; }
.pp-plans .pp-plans__yes { color: var(--signal-ink); }
.pp-plans .pp-plans__no { color: var(--quiet); }
.pp-plans__foot { margin-top: 14px; font-size: .875rem; color: var(--muted); }

/* ---------- plan cards ---------- */
.pp-plan-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.pp-plan {
  display: flex; flex-direction: column; gap: 12px; height: 100%;
  padding: 28px 24px 24px; border-radius: var(--radius);
}
/* Pro is the one to look at: a lime ring and a tint that fades down the card */
.pp-plan.pp-plan--pro {
  background: linear-gradient(180deg, rgba(200, 242, 90, .34), rgba(255, 255, 255, .7) 48%);
  box-shadow: 0 0 0 2px var(--signal), var(--shadow-lg);
}
.pp-plan__name { font-size: 1.25rem; }
.pp-plan__price { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; }
.pp-plan__amount { font: 500 clamp(2.25rem, 1.9rem + 1.2vw, 2.75rem)/1 var(--mono); letter-spacing: -.03em; }
.pp-plan__per { color: var(--muted); font-weight: 600; }
.pp-plan__alt { margin-top: -4px; font-size: .875rem; color: var(--muted); }
.pp-plan__count { font-weight: 700; }
.pp-plan__count .pp-mono { color: var(--signal-ink); }
.pp-plan__blurb { color: var(--muted); }
.pp-plan__plus { margin-top: 4px; font-size: .875rem; font-weight: 700; }
.pp-plan__list { list-style: none; margin: 0; padding: 0 0 12px; display: grid; gap: 10px; }
.pp-plan__list li { position: relative; padding-left: 26px; }
.pp-plan__list li::before {
  content: ""; position: absolute; left: 2px; top: .45em;
  width: 12px; height: 6px;
  border-left: 2px solid var(--signal-ink); border-bottom: 2px solid var(--signal-ink);
  transform: rotate(-45deg);
}
/* Not built yet, so it gets a hollow dot, never a tick */
.pp-plan__list .pp-plan__soon { color: var(--muted); }
.pp-plan__list .pp-plan__soon::before { top: .5em; left: 3px; width: 9px; height: 9px; border: 2px solid var(--quiet); border-radius: 50%; transform: none; }
.pp-plan__note { padding-top: 12px; border-top: 1px solid var(--rule); font-size: .875rem; color: var(--muted); }
.pp-plan > .pp-btn { margin-top: auto; }
.pp-plans-more { margin-top: 32px; }

/* Monthly or yearly. Without scripts the toggle stays hidden and only the monthly price shows. */
.pp-billing { display: inline-flex; gap: 4px; margin-bottom: 28px; padding: 4px; border-radius: 999px; }
.pp-billing[hidden] { display: none; }
.pp-billing button {
  min-height: 44px; padding: 0 18px;
  background: none; border: 0; border-radius: 999px; color: var(--muted);
  font: 700 .9375rem/1 var(--sans); cursor: pointer;
  transition: background-color .2s, color .2s;
}
.pp-billing button:hover { color: var(--text); }
.pp-billing button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.pp-billing__save { margin-left: 4px; font: 500 .75rem/1 var(--mono); }
.pp-billing button[aria-pressed="false"] .pp-billing__save { color: var(--signal-ink); }
.pp-billing button[aria-pressed="true"] .pp-billing__save { color: var(--signal); }
.pp-cycle-month, .pp-cycle-year { display: inline-flex; align-items: baseline; gap: 8px; }
.pp-cycle-year, [data-pp-cycle="year"] .pp-cycle-month { display: none; }
[data-pp-cycle="year"] .pp-cycle-year { display: inline-flex; }

/* ---------- screenshot frame ---------- */
/* Screens sit in a frosted bezel, inset 8px, so a dark capture still belongs on a light page */
.pp-shot { margin: 0; }
.pp-shot__frame { overflow: hidden; padding: 8px; border-radius: 24px; box-shadow: var(--shadow-lg); }
.pp-shot__frame img { border-radius: 16px; }
.pp-shot img { width: 100%; height: auto; }
.pp-shot figcaption { margin-top: 12px; font-size: .875rem; color: var(--muted); }

/* A phone-sized screenshot in a bezel. The summary email is four screens long, so it scrolls
   inside the frame rather than running a column three times taller than its neighbour. */
.pp-device {
  overflow: hidden; background: #000;
  border: 8px solid #1C1D21; border-radius: 40px;
  box-shadow: 0 0 0 1px rgba(13, 14, 18, .18), inset 0 0 0 1px rgba(255, 255, 255, .06), 0 40px 70px -28px rgba(13, 14, 18, .45);
}
.pp-device__scroll {
  aspect-ratio: 390 / 844; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: #3A3E48 transparent;
}
/* The bezel clips anything drawn on the scroller, so the focus ring goes on the bezel */
.pp-device__scroll:focus-visible { outline: none; }
.pp-device:has(.pp-device__scroll:focus-visible) { outline: 2px solid var(--signal-ink); outline-offset: 3px; }
/* The alert is a whole phone on a transparent canvas: the body is 414 of its 468px, inset
   27px all round. Drawing it wider and pulling the margins in by that inset lines it up
   with the framed screen beside it. */
.pp-shot--alert img { width: calc(100% * 468 / 414); max-width: none; margin: calc(-100% * 27 / 414); filter: drop-shadow(0 30px 40px rgba(13, 14, 18, .22)); }

/* ---------- how it works ---------- */
.pp-how { display: grid; gap: 48px; }
.pp-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.pp-step {
  display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: 6px 14px;
  padding: 22px 24px; border-radius: var(--radius);
}
.pp-step__num {
  grid-row: 1 / span 2; display: grid; place-items: center; width: 2.5rem; height: 2.5rem;
  border-radius: 12px; background: var(--looked-bg);
  font: 500 .875rem/1 var(--mono); color: var(--signal-ink);
}
.pp-step h3, .pp-step p { grid-column: 2; }
.pp-step h3 { padding-top: 2px; }
.pp-step p { color: var(--muted); }
.pp-how__phone { justify-self: center; width: 100%; max-width: 280px; }

/* ---------- feature blocks ---------- */
.pp-features { display: grid; gap: clamp(72px, 11vw, 128px); }
.pp-feature { display: grid; gap: 28px; align-items: center; }
.pp-feature__copy { max-width: 640px; }
.pp-feature__copy > * + * { margin-top: 12px; }
.pp-feature__copy > p { font-size: 1.0625rem; color: var(--muted); }
.pp-feature__copy > .pp-feature__label {
  font: 500 .8125rem/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--signal-ink);
}
.pp-feature__copy > .pp-feature__plan { padding-left: 14px; border-left: 3px solid var(--signal); font-size: .9375rem; color: var(--text); }
.pp-feature h3 { font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2.125rem); letter-spacing: -.03em; line-height: 1.12; }
.pp-phones { display: grid; gap: 40px; justify-items: center; }
.pp-phones .pp-shot { width: 100%; max-width: 280px; }

/* Nudges are drawn in markup, as they'd land on a lock screen: frosted notifications over a
   bright wallpaper. The app icon stays dark, as it is on a home screen. */
.pp-nudges {
  display: grid; gap: 12px; justify-self: center; width: 100%; max-width: 440px;
  padding: clamp(20px, 4vw, 32px) clamp(12px, 3vw, 24px);
  border: 1px solid var(--glass-edge); border-radius: 36px;
  background:
    radial-gradient(26rem 18rem at 10% 0%, rgba(200, 242, 90, .85), transparent 70%),
    radial-gradient(24rem 20rem at 100% 100%, rgba(125, 211, 252, .7), transparent 70%),
    linear-gradient(160deg, #E4F5C8, #D4ECF5);
  box-shadow: var(--shadow-lg);
}
.pp-nudge {
  display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 12px;
  padding: 14px; background: rgba(255, 255, 255, .86);
  border: 1px solid rgba(255, 255, 255, .8); border-radius: 22px;
  box-shadow: 0 10px 30px -14px rgba(13, 14, 18, .35);
  font-size: .9375rem; line-height: 1.45;
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .pp-nudge {
    background: rgba(255, 255, 255, .58);
    -webkit-backdrop-filter: blur(24px) saturate(1.8);
    backdrop-filter: blur(24px) saturate(1.8);
  }
}
.pp-nudge__icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: var(--ink); }
.pp-nudge__body > * + * { margin-top: 4px; }
.pp-nudge__body p { color: #2A2D34; }
.pp-nudge__body .pp-nudge__meta { display: flex; justify-content: space-between; gap: 8px; font-size: .8125rem; color: var(--muted); }
.pp-nudge__body .pp-nudge__title { font-weight: 800; color: var(--text); }
.pp-nudge__title span { margin-right: 4px; }
.pp-nudge__body .pp-nudge__text { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(13, 14, 18, .08); }

/* ---------- trade links ---------- */
.pp-trades { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.pp-trade {
  display: block; height: 100%; padding: 20px 22px; border-radius: var(--radius);
  color: var(--text); text-decoration: none;
  transition: translate .25s var(--ease), box-shadow .25s var(--ease);
}
.pp-trade:hover { translate: 0 -3px; box-shadow: var(--shadow-lg); }
.pp-trade strong { display: flex; justify-content: space-between; gap: 12px; font-weight: 800; font-size: 1.0625rem; letter-spacing: -.01em; }
.pp-trade strong::after { content: "→"; content: "→" / ""; color: var(--signal-ink); transition: translate .25s var(--ease); }
.pp-trade:hover strong::after { translate: 4px 0; }
.pp-trade span { display: block; margin-top: 4px; font-size: .9375rem; color: var(--muted); }
.pp-trades__more { max-width: 40em; margin-top: 20px; color: var(--muted); }

/* ---------- FAQ ---------- */
.pp-faq { display: grid; gap: 32px 56px; }
.pp-faq__item { padding-top: 20px; border-top: 1px solid var(--line); }
.pp-faq__item p { margin-top: 8px; color: var(--muted); }

/* ---------- trade page example ---------- */
.pp-example { display: grid; gap: 40px; }
.pp-example__col > * + * { margin-top: 16px; }
.pp-example__label { font: 500 .8125rem/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
/* The estimate is the business's document, not the app, so it's drawn on paper */
.pp-estimate {
  padding: clamp(22px, 4vw, 36px); background: #FFFFFF; color: #16181D;
  border-top: 6px solid #2A2E36; border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
.pp-estimate > * + * { margin-top: 6px; }
.pp-estimate__kicker, .pp-estimate__lines caption {
  font: 500 .75rem/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #565A62;
}
.pp-estimate h3 { font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem); letter-spacing: -.025em; }
.pp-estimate__for { font-size: .9375rem; color: #565A62; }
.pp-estimate .pp-estimate__lines { width: 100%; margin-top: 22px; border-collapse: collapse; font-size: .9375rem; }
.pp-estimate__lines caption { padding-bottom: 8px; text-align: left; }
/* Rules on the rows, not the cells: cell borders left a hairline gap where the two met */
.pp-estimate__lines tr { border-top: 1px solid #E3E5DF; }
.pp-estimate__lines tfoot tr { border-top: 2px solid #16181D; }
.pp-estimate__lines th, .pp-estimate__lines td { padding: 12px 0; vertical-align: top; text-align: left; font-weight: 600; }
.pp-estimate__lines th { padding-right: 16px; }
.pp-estimate__lines td { text-align: right; white-space: nowrap; font: 500 .9375rem/1.6 var(--mono); }
.pp-estimate__lines tfoot th, .pp-estimate__lines tfoot td { padding-top: 14px; font-weight: 800; }
.pp-estimate__lines tfoot td { font-size: 1.125rem; }
.pp-read, .pp-sms { padding: 18px 20px; border-radius: var(--radius); }
.pp-read__head { display: flex; align-items: center; gap: 10px; font-weight: 800; }
.pp-read__head img { flex: none; border-radius: 7px; }
.pp-read p + p { margin-top: 8px; color: var(--muted); }
.pp-sms__label { font: 500 .75rem/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--signal-ink); }
.pp-sms__bubble { margin-top: 12px; padding: 14px 16px; background: #E9EBE5; color: var(--ink); border-radius: 20px 20px 20px 6px; line-height: 1.5; }
.pp-sms__note { margin-top: 10px; font-size: .8125rem; color: var(--muted); }
.pp-timing > * { max-width: 760px; }
.pp-timing > * + * { margin-top: 14px; }

/* ---------- privacy ---------- */
.pp-prose > * { max-width: 720px; }
.pp-prose h2 { margin-top: 48px; font-size: clamp(1.375rem, 1.1rem + 1.2vw, 1.875rem); letter-spacing: -.025em; }
.pp-prose h2:first-child { margin-top: 0; }
.pp-prose h3 { margin-top: 28px; }
.pp-prose p, .pp-prose ul { margin-top: 12px; color: var(--muted); }
.pp-prose ul { display: grid; gap: 6px; padding-left: 1.25em; }
.pp-prose li::marker { color: var(--signal-ink); }

/* ---------- forms ---------- */
.pp-form { display: grid; gap: 16px; max-width: 480px; }
.pp-field { display: grid; gap: 6px; }
.pp-field label { font-weight: 700; font-size: .9375rem; }
.pp-field .pp-field__hint { font-size: .8125rem; color: var(--muted); }
.pp-field input, .pp-field select, .pp-field textarea {
  width: 100%; min-height: 48px; padding: 12px 16px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--line); border-radius: 14px;
  font: 500 1rem/1.4 var(--sans);
  transition: border-color .2s, box-shadow .2s;
}
.pp-field select { appearance: none; padding-right: 40px; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
.pp-field input::placeholder { color: #8A8E97; }
.pp-field input:focus, .pp-field select:focus, .pp-field textarea:focus { outline: none; border-color: var(--signal-ink); box-shadow: 0 0 0 4px rgba(200, 242, 90, .55); }
.pp-form__note { font-size: .8125rem; color: var(--muted); }
.pp-form__error { padding: 12px 14px; background: var(--hot-bg); border-radius: 12px; color: var(--hot); font-weight: 600; }
.pp-field input[aria-invalid="true"] { border-color: var(--hot); }
.pp-form .pp-btn { justify-self: start; }
.pp-form__done {
  padding: 20px 22px; background: var(--looked-bg);
  border: 1px solid rgba(63, 106, 8, .25); border-radius: var(--radius);
  font-weight: 700; font-size: 1.0625rem;
}
/* The form-guard honeypot, off screen for people and still in the form for bots */
.pp-hp { position: absolute; left: -9999px; top: -9999px; height: 0; overflow: hidden; }
.pp-join { display: grid; gap: 32px; }
.pp-join__copy > * + * { margin-top: 14px; }
.pp-join .pp-form { max-width: none; padding: clamp(20px, 4vw, 28px); border-radius: 24px; box-shadow: var(--shadow-lg); }

/* ---------- footer ---------- */
.pp-footer { border-top: 1px solid var(--line); background: rgba(255, 255, 255, .5); padding-block: 40px; color: var(--muted); font-size: .9375rem; }
.pp-footer .pp-wrap { display: grid; gap: 24px; }
.pp-footer__links { display: flex; flex-wrap: wrap; gap: 4px 24px; }
.pp-footer__links a { display: inline-block; padding: 8px 0; color: var(--muted); text-decoration: none; }
.pp-footer__links a:hover { color: var(--text); text-decoration: underline; }

/* ---------- motion ---------- */
/* All of it is decoration, so it's all opt-in: reduced motion gets the finished page, and a
   browser without scroll-driven animations (Firefox) gets the page without the reveals. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }

  /* The hero comes in on load, a line at a time */
  .pp-hero .pp-wrap > * { animation: pp-rise .9s var(--ease) both; }
  .pp-hero .pp-wrap > :nth-child(2) { animation-delay: .08s; }
  .pp-hero .pp-wrap > :nth-child(3) { animation-delay: .16s; }
  .pp-hero .pp-wrap > :nth-child(4) { animation-delay: .24s; }
  .pp-hero .pp-wrap > :nth-child(5) { animation-delay: .3s; }
  .pp-hero .pp-wrap > .pp-pulse { animation: none; }
  .pp-hero .pp-wrap > .pp-film { animation: pp-fade 1s var(--ease) .45s both; }
  .pp-hero .pp-hl { animation: pp-mark .7s var(--ease) .75s both; }
  .pp-hero .pp-eyebrow::before { animation: pp-ping 1.6s ease-out 1s 3; }

  /* The line draws itself, then a blip runs along it twice. pathLength="1" on both paths. */
  .pp-pulse__line, .pp-pulse__shade { stroke-dasharray: 1; animation: pp-draw 1.6s var(--ease) .35s both; }
  .pp-pulse__blip { visibility: visible; stroke-dasharray: .06 1.06; animation: pp-blip 2.6s cubic-bezier(.45, 0, .55, 1) 2s 2 both; }

  @supports ((animation-timeline: view()) and (animation-range: entry)) {
    /* The walkthrough leans back and flattens out as it comes up the screen */
    .pp-film__frame {
      animation: pp-tilt linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 45%;
    }

    /* Everything else rises in as it scrolls into view. Glass panels animate themselves,
       never an ancestor: an ancestor's opacity cuts the panel off from the page behind it,
       and the blur would blink out until it finished. */
    .pp-section__head, .pp-feature__copy, .pp-faq__item, .pp-join__copy, .pp-timing,
    .pp-step, .pp-card, .pp-plan-grid > li, .pp-trades > li, .pp-shot__frame, .pp-device,
    .pp-shot--alert, .pp-nudge, .pp-table-wrap, .pp-billing, .pp-estimate, .pp-read, .pp-sms,
    .pp-join .pp-form, .pp-join .pp-form__done, .pp-prose > * {
      animation: pp-reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 22%;
    }
    /* Headings come into focus as well: blur only where it's text, it's costly on images */
    .pp-section__head, .pp-feature__copy, .pp-join__copy, .pp-timing { animation-name: pp-reveal-focus; }
  }
}
@keyframes pp-rise { from { opacity: 0; translate: 0 18px; filter: blur(8px); } }
@keyframes pp-fade { from { opacity: 0; translate: 0 28px; } }
@keyframes pp-mark { from { background-size: 0% .3em; } }
@keyframes pp-ping { to { box-shadow: 0 0 0 1px rgba(63, 106, 8, .4), 0 0 0 9px rgba(200, 242, 90, 0), 0 0 10px 1px rgba(200, 242, 90, .9); } }
@keyframes pp-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes pp-blip { from { stroke-dashoffset: .06; } to { stroke-dashoffset: -1; } }
@keyframes pp-tilt { from { transform: perspective(1800px) rotateX(16deg) scale(.94); } }
@keyframes pp-reveal { from { opacity: 0; translate: 0 32px; } }
@keyframes pp-reveal-focus { from { opacity: 0; translate: 0 24px; filter: blur(8px); } }

/* ---------- wider screens ---------- */
@media (min-width: 560px) {
  .pp-phones { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 24px; }
  .pp-trades { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 700px) {
  :root { --gutter: 24px; }
  .pp-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .pp-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .pp-footer .pp-wrap { grid-template-columns: 1fr auto; align-items: center; }
  .pp-footer .pp-brand { grid-column: 1; }
  .pp-footer__links { grid-column: 2; }
  .pp-footer__copy { grid-column: 1 / -1; }
}
@media (min-width: 900px) {
  :root { --gutter: 32px; }
  .pp-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .pp-nav__bar { padding-left: 14px; }
  .pp-nav__toggle { display: none; }
  .pp-nav__links { display: flex; gap: 4px; margin-right: 8px; }
  .pp-nav__links a { padding: 9px 16px; border-radius: 999px; }
  .pp-nav__links a:hover { background: rgba(13, 14, 18, .05); }
  .pp-nav__links a[aria-current] { background: rgba(13, 14, 18, .07); }
  .pp-nav--open .pp-nav__links { position: static; padding: 0; background: none; border: 0; box-shadow: none; }
  .pp-nav--open .pp-nav__links a { padding: 9px 16px; border: 0; font-size: .9375rem; }
  .pp-how { grid-template-columns: minmax(0, 1fr) 280px; gap: 72px; align-items: center; }
  .pp-feature--side { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; }
  /* Four trades on the home page, three on a trade page: either fills the row */
  .pp-trades { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
  .pp-plan-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pp-faq { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pp-join { grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: 72px; align-items: start; }
  .pp-example { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
}

/* On a phone the feature column gives up width so a whole plan column fits beside it */
@media (max-width: 559px) {
  .pp-plans { min-width: 480px; }
  .pp-plans thead th:first-child { width: 132px; }
  .pp-plans th, .pp-plans td { padding-inline: 12px; }
}
@media (min-width: 700px) {
  .pp-plans__swipe { display: none; }
}
.pp-plans__swipe { margin-bottom: 10px; font-size: .875rem; color: var(--muted); }

/* ---------- very narrow phones ---------- */
@media (max-width: 380px) {
  .pp-brand { font-size: .9375rem; gap: 8px; }
  .pp-brand img { width: 28px; height: 28px; }
  .pp-btn--sm { padding: 0 12px; }
  .pp-actions .pp-btn { width: 100%; }
  .pp-form .pp-btn { justify-self: stretch; }
  .pp-billing button { padding: 0 12px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .pp-btn, .pp-trade, .pp-trade strong::after { transition: none; }
  .pp-btn:hover, .pp-trade:hover, .pp-trade:hover strong::after { translate: none; }
}