/* ——— Modern Jurist tokens, website warm-neutral variation (DESIGN.md
   "Website" section) — shared by every page.
   Site rules: never pure #fff or #000, no neons, no lavender/purple tints.
   Neutrals run warm (paper, oatmeal, sand); navy stays the anchor. ——— */
:root {
  --pp-primary: #031635;
  --pp-primary-container: #1A2B4B;
  --pp-ink: #14110E;        /* warm near-black — phone bezels */
  --pp-paper: #FBFAF7;      /* warm near-white — cards, inputs, text on navy */
  --pp-surface: #FAF8F3;    /* page background */
  --pp-surface-low: #F4F1EA;
  --pp-surface-container: #EDE9DF;
  --pp-surface-high: #E8E2D6;
  --pp-oatmeal: #F5F0E6;    /* hover — cool off-white warms, no shadow/opacity */
  --pp-sand: #EFE8D9;       /* selected fill, one step warmer than oatmeal */
  --pp-terracotta: #B25C41; /* active-state accent (2px left border / underline) */
  --pp-charcoal: #55504A;   /* pull-quote ink — dark warm grey, reads grey (not black) at display sizes */
  --pp-parchment: #FAF9F6;  /* full-bleed band behind the 01 lead spread */
  --pp-rule: #E5E5E0;       /* viewport-spanning 1px rules between major sections */
  --pp-bronze: #8A6238;     /* ambient hero light, warm undertone */
  --pp-plum: #462B40;       /* ambient hero light, dark undertone */
  --pp-on-surface: #131B2E;
  --pp-on-surface-variant: #44474E;
  --pp-slate: #64748B;
  --pp-border-soft: rgba(31, 26, 17, 0.08);
  --pp-hairline: #E6E1D7; /* 1px editorial rules — features section, dividers */
  --pp-outline: #C8C2B4;
  --pp-error: #BA1A1A;
  --pp-error-container: #FFDAD6;
  --pp-success: #4A7C59;
  --pp-success-container: #E3EFE6;
  --pp-warning: #9A6B00;
  --pp-warning-container: #FAEEDA;
  --pp-shadow-ambient: 0 10px 30px rgba(3, 22, 53, 0.14);
  --pp-margin: 24px;
  --pp-gutter: 16px;
  --pp-stack-sm: 8px;
  --pp-stack-md: 16px;
  --pp-stack-lg: 32px;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-brand: "Ortica", Georgia, "Times New Roman", serif;
}

@font-face {
  font-family: "Ortica";
  src: url("assets/OrticaLinear-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Ortica";
  src: url("assets/OrticaLinear-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--pp-on-surface);
  /* Ambient mesh: three vast, faint radial washes anchored near the top of
     the page — navy from the top right, bronze from the left, plum lower
     down. Lighting, not a focal point; without color-mix support the page
     falls back to the plain warm surface. */
  background:
    radial-gradient(90rem 60rem at 84% -18rem, color-mix(in srgb, var(--pp-primary-container) 10%, transparent), transparent 62%),
    radial-gradient(80rem 55rem at -14% 22rem, color-mix(in srgb, var(--pp-bronze) 8%, transparent), transparent 66%),
    radial-gradient(70rem 50rem at 55% 58rem, color-mix(in srgb, var(--pp-plum) 7%, transparent), transparent 62%),
    var(--pp-surface);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 var(--pp-margin); }

/* ——— Top bar ——— */
header.topbar { padding: 20px 0; }
.topbar .wrap { display: flex; align-items: center; gap: 12px; }
.topbar .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.topbar img { width: 40px; height: 40px; }
.wordmark {
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: 24px;
  color: var(--pp-primary);
  letter-spacing: 0.2px;
}
.topbar nav { margin-left: auto; display: flex; gap: 28px; }
.nav-tab {
  display: inline-flex; align-items: center;
  padding: 4px 0;
  color: var(--pp-slate);
  font-family: var(--font-brand);
  font-size: 17px; font-weight: 400; letter-spacing: 0.4px;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out;
}
.nav-tab:hover { color: var(--pp-primary); }
.nav-tab[aria-current="page"] { color: var(--pp-primary); border-bottom-color: var(--pp-terracotta); }
/* Beta plaque — a carefully constructed label at the nav's outer right,
   not a button: whisper of terracotta, hairline frame, same type as the tabs */
.nav-tab-plaque {
  border: 1px solid color-mix(in srgb, var(--pp-terracotta) 32%, transparent);
  background: color-mix(in srgb, var(--pp-terracotta) 5%, transparent);
  border-radius: 4px;
  padding: 3px 14px;
}
.nav-tab-plaque:hover {
  color: var(--pp-primary);
  border-color: color-mix(in srgb, var(--pp-terracotta) 55%, transparent);
}
.nav-tab-plaque[aria-current="page"] {
  color: var(--pp-primary);
  border-color: var(--pp-terracotta);
}

/* ——— Type ——— */
h1 {
  font-family: var(--font-brand);
  font-weight: 400;
  font-size: clamp(38px, 5.4vw, 56px);
  line-height: 1.12;
  color: var(--pp-primary);
  margin-bottom: var(--pp-stack-md);
  text-wrap: balance;
}
.eyebrow {
  display: flex; align-items: center; gap: 8px;
  color: var(--pp-slate);
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  margin-bottom: var(--pp-stack-md);
}
.eyebrow svg { width: 14px; height: 14px; flex: none; }
.lede {
  font-size: 18px;
  color: var(--pp-on-surface-variant);
  max-width: 34em;
  margin-bottom: var(--pp-stack-md);
}
.lede strong { color: var(--pp-on-surface); }
.section-header {
  display: flex; align-items: center; gap: 8px;
  color: var(--pp-slate);
  font-size: 13px; font-weight: 600;
  letter-spacing: 0.8px; text-transform: uppercase;
  margin-bottom: var(--pp-stack-md);
}
.section-header svg { width: 14px; height: 14px; }

/* ——— Chips: minimalist typographic lockup, divided by hairlines ——— */
.chips { display: flex; flex-wrap: wrap; align-items: center; row-gap: 8px; margin-bottom: var(--pp-stack-lg); }
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--pp-primary);
  font-family: var(--font-brand);
  font-size: 15px; font-weight: 400; letter-spacing: 0.4px;
  padding: 2px 20px;
  white-space: nowrap;
  text-decoration: none;
}
.chip:first-child { padding-left: 0; }
.chip + .chip { border-left: 1px solid var(--pp-hairline); }
.chip svg { width: 14px; height: 14px; stroke-width: 1.5; }
.count-badge {
  display: inline-flex; align-items: center;
  border-radius: 999px;
  background: var(--pp-surface-high);
  border: 1px solid var(--pp-border-soft);
  color: var(--pp-primary);
  font-size: 14px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  padding: 1px 12px;
}
.status-chip {
  border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 3px 10px;
  border: 1px solid var(--pp-border-soft);
  white-space: nowrap;
}
.status-chip.proposed { background: var(--pp-surface-high); color: var(--pp-primary); }
.status-chip.planned { background: var(--pp-surface-high); color: var(--pp-primary); }
.status-chip.building { background: var(--pp-warning-container); color: var(--pp-warning); }
.status-chip.shipped { background: var(--pp-success-container); color: var(--pp-success); }

/* ——— Buttons & inputs ——— */
.btn-primary {
  height: 56px;
  padding: 0 28px;
  border: 0;
  border-radius: 8px;
  text-decoration: none;
  background: var(--pp-primary);
  color: var(--pp-paper);
  font-family: var(--font-body);
  font-size: 16px; font-weight: 600; letter-spacing: 0.5px;
  cursor: pointer;
  box-shadow: var(--pp-shadow-ambient);
  transition: background-color 0.3s ease-in-out;
}
.btn-primary:hover { background: var(--pp-primary-container); }
.btn-primary:disabled { background: var(--pp-slate); opacity: 0.4; cursor: default; box-shadow: none; }
.btn-inverse {
  display: inline-block;
  height: 56px; line-height: 56px;
  padding: 0 32px;
  border-radius: 8px;
  background: var(--pp-paper);
  color: var(--pp-primary);
  font-size: 16px; font-weight: 600; letter-spacing: 0.5px;
  text-decoration: none;
  transition: background-color 0.3s ease-in-out;
}
.btn-inverse:hover { background: var(--pp-sand); }
.field-label {
  display: block;
  font-size: 14px; font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--pp-on-surface);
  margin-bottom: var(--pp-stack-sm);
}
.input {
  width: 100%;
  padding: 15px 16px;
  font-size: 16px;
  font-family: var(--font-body);
  color: var(--pp-on-surface);
  background: var(--pp-paper);
  border: 1px solid var(--pp-outline);
  border-radius: 4px;
  outline: none;
}
.input:focus { border: 2px solid var(--pp-primary); padding: 14px 15px; }
textarea.input { resize: vertical; min-height: 88px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form-status { margin-top: var(--pp-stack-sm); font-size: 14px; }
.form-status.error { color: var(--pp-error); }

/* ——— Cards ——— */
.card {
  background: var(--pp-paper);
  border: 1px solid var(--pp-border-soft);
  border-radius: 8px;
  padding: var(--pp-gutter);
  transition: transform 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
}
.success-card {
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--pp-success-container);
  color: var(--pp-success);
  border: 1px solid var(--pp-border-soft);
  border-radius: 8px;
  padding: var(--pp-gutter);
}
.success-card svg { width: 22px; height: 22px; flex: none; margin-top: 2px; }
.success-card p { font-size: 16px; font-weight: 600; }
.success-card .sub { font-size: 14px; font-weight: 400; margin-top: 2px; }

/* ——— Landing: hero ——— */
.hero { padding: 40px 0 72px; }

/* ——— Landing: interstitial pull quote — pure typography, no images ———
   Deep top padding because the hero phone bleeds down across this section's
   top rule; the quote is flush right with hanging final periods. */
/* No rule at the hero boundary — the bleeding phone carries the transition,
   and a line behind it read as a glitch rather than structure. */
.interstitial {
  padding: clamp(140px, 16vw, 240px) 0 clamp(40px, 5vw, 64px);
}
/* Paper grain on the parchment plates — 3% noise, the tooth of heavy stock */
.interstitial, .lead-band { position: relative; }
.interstitial::after, .lead-band::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.03;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.pull-quote {
  font-family: var(--font-brand);
  font-weight: 400;
  font-size: clamp(44px, 7.6vw, 108px);
  line-height: 0.96; /* descenders nearly touching ascenders — deliberate tension */
  letter-spacing: -1px;
  color: var(--pp-charcoal);
  text-align: right;
  padding-right: 0.32em; /* the hanging zone — periods live here, outside the letters' flush edge */
}
.pq-line { display: block; position: relative; }
.pq-dot { position: absolute; left: 100%; } /* hangs the period so s/e/s letters align */
.pull-note {
  /* Breaks the grid: pulled up into the negative space after "Your business."
     and nudged left off the container edge, like an art-book caption. */
  margin-top: clamp(18px, 2.2vw, 30px); /* a beat of air between quote mass and caption */
  margin-right: clamp(8px, 3vw, 56px);
  margin-left: auto;
  max-width: 32em;
  text-align: right;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.75;
  color: var(--pp-charcoal);
}

/* ——— Landing: how it works — three steps, ruled like a printed ledger ——— */
.how { border-top: 1px solid var(--pp-rule); padding: clamp(28px, 3.5vw, 44px) 0 0; }
.how-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--pp-hairline);
}
.how-step {
  position: relative;
  display: flex; flex-direction: column;
  padding: clamp(40px, 5vw, 64px) clamp(20px, 2.5vw, 36px) 0 0;
}
.how-step + .how-step { padding-left: clamp(20px, 2.5vw, 36px); }
/* Vertical dividers overshoot the content top and bottom, crossing the
   horizontal rules the way ruled lines do on a printed table */
.how-step + .how-step::before {
  content: "";
  position: absolute;
  left: 0; top: -24px; bottom: -24px;
  width: 1px;
  background: var(--pp-hairline);
}
.how-step:last-child { padding-right: 0; }
.how-step h3 { font-size: clamp(22px, 2.2vw, 27px); }
.how-step .feat-no { font-size: 34px; margin-bottom: var(--pp-stack-sm); }
.how-step .feat-p { font-size: 15px; }
.how-step .shot-window { margin-top: var(--pp-stack-lg); }
.how-step:hover .shot-window .app-screen { transform: translateY(-1px); }
.shot-window-step { height: 360px; padding: 28px 14px 0; }
#how-it-works, #features { scroll-margin-top: 16px; }
.hero .wrap {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 56px;
  align-items: center;
}
.signup .row { display: flex; gap: 10px; flex-wrap: wrap; }
.signup .row .input { flex: 1 1 240px; width: auto; }
.signup .caption {
  font-size: 12px;
  color: var(--pp-slate);
  margin-top: var(--pp-stack-sm);
}

/* ——— Landing: phone mockup ———
   The hero phone breaks the hero's baseline: its bottom quarter bleeds down
   across the section rule into the pull-quote section, floated above the rule
   on a diffused warm shadow. */
.phone-col { display: flex; justify-content: center; }
.phone {
  width: min(320px, 78vw);
  background: var(--pp-ink);
  border-radius: 52px;
  padding: 11px;
  box-shadow: 0 30px 70px rgba(3, 22, 53, 0.22);
}
.phone-col .phone {
  position: relative;
  z-index: 1;
  /* the hero's 72px bottom padding absorbs the first stretch of this pull,
     so the painted overlap past the section rule is |margin| − 72px —
     about the phone's bottom quarter at full width */
  margin-bottom: clamp(-260px, -18vw, -140px);
  box-shadow: 0 28px 60px rgba(34, 31, 27, 0.15), 0 72px 140px rgba(34, 31, 27, 0.11);
}
.phone img { border-radius: 42px; }
.phone .app-screen { width: 100%; border-radius: 42px; aspect-ratio: 750 / 1630; }

/* ——— App screen mockups (HTML recreations of the app UI) ———
   Fixed 298px design width so type renders at phone scale everywhere. */
.app-screen {
  position: relative;
  width: 298px;
  overflow: hidden;
  background: var(--pp-surface);
  font-family: var(--font-body);
  color: var(--pp-on-surface);
  line-height: 1.35;
}
.as-status {
  display: flex; align-items: center;
  padding: 10px 20px 2px;
  font-size: 11px; font-weight: 700;
}
.as-island {
  width: 74px; height: 20px;
  background: var(--pp-ink);
  border-radius: 999px;
  margin: 0 auto;
}
.as-status .as-glyphs { display: flex; gap: 4px; align-items: center; }
.as-status svg { width: 13px; height: 13px; }
.as-nav {
  display: flex; align-items: center;
  padding: 8px 10px 4px;
}
.as-back {
  width: 26px; height: 26px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--pp-paper); border-radius: 999px;
  box-shadow: 0 2px 8px rgba(3, 22, 53, 0.10);
}
.as-back svg { width: 11px; height: 11px; }
.as-nav .as-title {
  flex: 1; text-align: center;
  font-size: 12.5px; font-weight: 600;
  margin-right: 26px; /* balances the back button so the title centres */
}
.as-body { padding: 6px 12px 0; display: grid; gap: 9px; }
.as-card {
  background: var(--pp-paper);
  border: 1px solid var(--pp-border-soft);
  border-radius: 8px;
  padding: 10px 12px;
}
.as-vitals-h {
  font-size: 9px; font-weight: 700;
  letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--pp-slate);
  margin-bottom: 6px;
}
.as-row { display: flex; align-items: baseline; gap: 8px; padding: 2.5px 0; }
.as-row .k { flex: none; width: 92px; font-size: 10.5px; color: var(--pp-slate); }
.as-row .v { font-size: 11px; font-weight: 600; }
.as-row .flag { margin-left: auto; align-self: center; display: flex; }
.as-row .flag svg { width: 10px; height: 10px; fill: var(--pp-warning); }
.as-warn .head { display: flex; align-items: center; gap: 6px; }
.as-warn .head svg { width: 12px; height: 12px; flex: none; stroke: var(--pp-warning); }
.as-warn .head .t { font-size: 12px; font-weight: 600; color: var(--pp-warning); flex: 1; }
.as-warn .head .pg { font-size: 10px; color: var(--pp-slate); }
.as-warn .q { font-size: 9.5px; color: var(--pp-slate); margin-top: 3px; }
.as-warn .x { font-size: 10.5px; margin-top: 2px; }
.as-ask {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid var(--pp-outline);
  border-radius: 8px;
  padding: 9px;
  font-size: 11.5px; font-weight: 600;
}
.as-ask svg { width: 13px; height: 13px; }
.as-tabbar {
  position: absolute; left: 14px; right: 14px; bottom: 10px;
  display: flex; align-items: center; justify-content: space-around;
  background: var(--pp-paper);
  border-radius: 999px;
  box-shadow: var(--pp-shadow-ambient);
  padding: 6px 8px;
}
.as-tabbar .tab {
  display: flex; align-items: center; justify-content: center;
  padding: 5px 16px; border-radius: 999px;
}
.as-tabbar .tab.active { background: var(--pp-surface-container); }
.as-tabbar svg { width: 14px; height: 14px; }
/* Home screen bits */
.as-wordmark { display: flex; align-items: center; gap: 6px; padding: 8px 14px 0; }
.as-wordmark img { width: 18px; height: 18px; }
.as-wordmark span { font-family: var(--font-brand); font-weight: 700; font-size: 13px; color: var(--pp-primary); }
.as-hello {
  font-family: var(--font-brand);
  font-size: 21px; color: var(--pp-primary);
  padding: 8px 14px 2px;
}
.as-upload {
  display: flex; align-items: center; gap: 9px;
  background: var(--pp-primary);
  border-radius: 8px;
  padding: 11px 12px;
  color: var(--pp-paper);
}
.as-upload .tile {
  width: 30px; height: 30px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--pp-primary-container);
  border-radius: 6px;
}
.as-upload svg { width: 15px; height: 15px; stroke: var(--pp-paper); }
.as-upload .tt { font-size: 12px; font-weight: 700; }
.as-upload .ts { font-size: 9px; color: var(--pp-surface-high); }
.as-upload .chev { margin-left: auto; }
.as-upload .chev svg { width: 10px; height: 10px; }
.as-h2 { font-size: 13px; font-weight: 700; padding: 2px 2px 0; }
.as-recent .rt { font-size: 11.5px; font-weight: 600; }
.as-recent .rm { font-size: 9.5px; color: var(--pp-slate); margin-top: 1px; }
.as-recent .rf { font-size: 9.5px; color: var(--pp-warning); margin-top: 1px; }
.as-hint { font-size: 9.5px; color: var(--pp-slate); padding: 0 2px; }
/* Chat (Issues) screen bits */
.as-note { font-size: 9.5px; color: var(--pp-slate); padding: 2px 2px 0; }
.as-qa .q { font-size: 12px; font-weight: 700; }
.as-qa .a { font-size: 10.5px; margin-top: 4px; }
.app-screen .cites { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.app-screen .cite {
  background: var(--pp-surface-high);
  border-radius: 999px;
  font-size: 8.5px; font-weight: 700;
  color: var(--pp-primary);
  padding: 2px 7px;
}
.app-screen .cl { font-size: 9px; color: var(--pp-slate); }
.as-inputbar { display: flex; align-items: center; gap: 6px; padding: 2px 0; }
.as-inputbar .fld {
  flex: 1;
  background: var(--pp-surface-high);
  border-radius: 999px;
  font-size: 9.5px; color: var(--pp-slate);
  padding: 7px 11px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.as-inputbar .send {
  width: 24px; height: 24px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--pp-surface-container);
  border-radius: 999px;
}
.as-inputbar .send svg { width: 11px; height: 11px; }
/* MLX "reading" scan — a soft terracotta bar pans down the Contract Vitals
   card, easing at both ends, with a long soft tail (~500ms of travel) as its
   trailing glow. Applied via .as-scan on the feature-02 vitals card. */
.as-scan { position: relative; overflow: hidden; }
.as-scan::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 64px;
  pointer-events: none;
  background: linear-gradient(to bottom,
    transparent 0%,
    color-mix(in srgb, var(--pp-terracotta) 5%, transparent) 42%,
    color-mix(in srgb, var(--pp-terracotta) 14%, transparent) 80%,
    color-mix(in srgb, var(--pp-terracotta) 17%, transparent) 88%,
    transparent 100%);
  animation: pp-scan 5s ease-in-out infinite;
}
@keyframes pp-scan {
  0%   { transform: translateY(-70px); }
  62%  { transform: translateY(230px); }
  100% { transform: translateY(230px); } /* rest below the card, then loop */
}
/* Swipe-to-delete vignette — a recent contract slides left on a loop,
   revealing the red delete action behind it, then settles back: the
   "delete it and it's gone" story told as the native gesture. */
.as-swipe { position: relative; }
.as-swipe-action {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 64px;
  display: flex; align-items: center; justify-content: center;
  background: var(--pp-error);
  border-radius: 8px;
}
.as-swipe-action svg { width: 15px; height: 15px; stroke: var(--pp-paper); }
.as-swipe .as-card { position: relative; animation: pp-swipe 7s ease-in-out infinite; }
@keyframes pp-swipe {
  0%, 52%   { transform: translateX(0); }
  60%, 80%  { transform: translateX(-72px); }
  88%, 100% { transform: translateX(0); }
}
/* "Insight appearance" — once the Issues screen has revealed, the answer card
   materialises in two beats: the card fades up (300ms, 4px lift), then its
   text clarifies from a 2px blur (200ms) — type settling on a page, not a
   slide-in. Armed by .js; without JavaScript the card is simply visible. */
.js .shot-window[data-reveal] .as-qa { opacity: 0; }
.js .shot-window[data-reveal] .as-qa .q,
.js .shot-window[data-reveal] .as-qa .a,
.js .shot-window[data-reveal] .as-qa .cites { filter: blur(2px); }
/* Delays sit past the window's own 0.8s + 0.18s reveal, so the insight
   composes on a screen that is already fully visible — not inside its fade. */
.js .shot-window[data-reveal].is-in .as-qa {
  animation: pp-insight-card 300ms ease-out 1.15s forwards;
}
.js .shot-window[data-reveal].is-in .as-qa .q,
.js .shot-window[data-reveal].is-in .as-qa .a,
.js .shot-window[data-reveal].is-in .as-qa .cites {
  animation: pp-insight-text 200ms ease-out 1.45s forwards;
}
@keyframes pp-insight-card {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pp-insight-text {
  to { filter: blur(0); }
}
/* Drafting screen bits */
.as-p { font-size: 10.5px; }
.as-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--pp-primary);
  color: var(--pp-paper);
  border-radius: 6px;
  padding: 9px;
  font-size: 11px; font-weight: 600;
}
.as-btn svg { width: 12px; height: 12px; stroke: var(--pp-paper); }

/* ——— Landing: features — asymmetric editorial spread ———
   Sections are defined by 1px hairlines and macropadding, not cards or
   shadows: a full-width lead feature, a 60/40 split row, and a reversed
   full-width closer. Blocks reveal on scroll (see [data-reveal] below). */
.features { border-top: 1px solid var(--pp-rule); padding: clamp(40px, 5vw, 64px) 0 16px; }
.features-head {
  margin-bottom: clamp(40px, 5vw, 72px);
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  gap: var(--pp-stack-lg) 64px;
  align-items: end;
}
.features h2, .how h2 {
  font-family: var(--font-brand);
  font-weight: 400;
  font-size: clamp(30px, 4.2vw, 44px);
  line-height: 1.15;
  color: var(--pp-primary);
  text-wrap: balance;
}
.features-deck {
  font-size: 17px;
  color: var(--pp-on-surface-variant);
  max-width: 24em;
  padding-bottom: 6px;
}

.feat {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 48px clamp(48px, 8vw, 104px);
  align-items: center;
  border-top: 1px solid var(--pp-hairline);
  padding: clamp(56px, 7vw, 96px) 0 clamp(32px, 4vw, 48px);
}
.feat-close { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.feat-close .feat-shot { order: -1; }
.feat-no {
  font-family: var(--font-brand);
  font-weight: 400;
  font-size: 42px;
  line-height: 1;
  color: var(--pp-outline);
  margin-bottom: var(--pp-stack-md);
}
.feat h3, .feat-cell h3, .how-step h3, .lead-copy h3 {
  font-family: var(--font-brand);
  font-weight: 400;
  font-size: clamp(25px, 3vw, 33px);
  line-height: 1.2;
  color: var(--pp-primary);
  margin-bottom: 10px;
  text-wrap: balance;
}
.feat-cell h3 { font-size: clamp(23px, 2.4vw, 28px); }
.feat-p { font-size: 17px; color: var(--pp-on-surface-variant); max-width: 30em; }
.feat-list { list-style: none; margin-top: var(--pp-stack-lg); max-width: 30em; }
.feat-list li {
  display: flex; gap: 12px; align-items: baseline;
  border-top: 1px solid var(--pp-hairline);
  padding: 12px 2px;
  font-size: 15px;
}
.feat-list li:last-child { border-bottom: 1px solid var(--pp-hairline); }
.feat-list li::before { content: "—"; color: var(--pp-outline); flex: none; }

/* ——— Features: 01 lead — 30/70 parchment spread, phone bleeding the band ——— */
.lead-band {
  background: var(--pp-parchment);
  border-top: 1px solid var(--pp-hairline);
  border-bottom: 1px solid var(--pp-hairline);
  margin: clamp(24px, 3vw, 40px) 0 clamp(64px, 8vw, 96px);
}
.feat-lead-spread {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 7fr);
  gap: 32px clamp(40px, 6vw, 80px);
  align-items: center;
  padding: clamp(40px, 5vw, 64px) 0;
}
.lead-no {
  font-family: var(--font-brand);
  font-weight: 400;
  font-size: clamp(120px, 15vw, 210px);
  line-height: 0.75;
  color: var(--pp-surface-high); /* watermark — light beige, behind the header */
  margin: 0 0 -0.26em -6px;
  user-select: none;
}
.lead-copy h3 { position: relative; }
/* The 70% side carries a photograph, not another phone — it keeps the band
   bleed, with an editorial caption over a navy scrim. Until an image file
   lands in assets/, the plate renders as deep navy and still reads composed. */
.lead-figure {
  margin: clamp(-72px, -5vw, -40px) 0; /* top and bottom bleed off the band */
  position: relative;
}
.lead-photo {
  position: relative;
  height: clamp(440px, 46vw, 640px);
  border-radius: 4px;
  overflow: hidden;
  background: var(--pp-primary) url("assets/privacy-photo.jpg") center / cover no-repeat;
  box-shadow: var(--pp-shadow-ambient);
}

/* Cropped app screens float directly on the page — no bounding plate. A crisp
   ink bezel defines the edge and a diffused two-layer shadow lifts it; the
   invisible window only crops the screen and gives the shadow room. */
.shot-window {
  overflow: hidden;
  display: flex; justify-content: center; align-items: flex-start;
  padding: clamp(24px, 3vw, 36px) 40px 0;
  height: 380px;
}
.shot-window .app-screen {
  flex: none;
  border: 7px solid var(--pp-ink);
  border-bottom: 0;
  border-radius: 34px 34px 0 0;
  box-shadow: 0 10px 40px -10px rgba(20, 17, 14, 0.12), 0 1px 3px rgba(20, 17, 14, 0.05);
  transition: transform 0.3s ease-in-out;
}
.feat-cell:hover .shot-window .app-screen,
.feat-close:hover .shot-window .app-screen { transform: translateY(-1px); }
.shot-window-tall { height: 440px; }
/* The 60% cell carries the dominant artifact: its screen renders upscaled */
.feat-cell-wide .shot-window .app-screen { transform: scale(1.12); transform-origin: top center; }
.feat-cell-wide:hover .shot-window .app-screen { transform: scale(1.12) translateY(-1px); }

/* 60/40 split row, divided by a vertical hairline */
.feat-row {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  border-top: 1px solid var(--pp-hairline);
}
.feat-cell { display: flex; flex-direction: column; padding: clamp(48px, 6vw, 80px) 0; }
.feat-cell-wide { padding-right: clamp(36px, 5vw, 72px); }
.feat-cell + .feat-cell { border-left: 1px solid var(--pp-hairline); padding-left: clamp(36px, 5vw, 72px); }
.feat-cell .feat-copy { margin-bottom: 44px; }
.feat-cell .shot-window { margin-top: auto; }

/* ——— Scroll-in reveals — armed by the .js class so content is always
   visible without JavaScript ——— */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--rv-delay, 0s);
}
.js [data-reveal="zoom"] { transform: translateY(20px) scale(0.95); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

.card .icon-tile {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: var(--pp-surface-container);
  border: 1px solid var(--pp-border-soft);
  border-radius: 8px;
  margin-bottom: var(--pp-stack-md);
}
.card .icon-tile svg { width: 22px; height: 22px; }
.card h3 { font-size: 20px; font-weight: 600; color: var(--pp-on-surface); margin-bottom: 6px; }
.card p { font-size: 16px; color: var(--pp-on-surface-variant); }
.source-chips { display: flex; gap: 8px; margin-top: var(--pp-stack-md); flex-wrap: wrap; }
.source-chip {
  border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.8px;
  padding: 4px 10px;
  border: 1px solid var(--pp-border-soft);
}
.source-chip.found { background: var(--pp-success-container); color: var(--pp-success); }
.source-chip.page { background: var(--pp-surface-high); color: var(--pp-primary); }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .shot-window .app-screen { transition: none; }
  .as-scan::after { animation: none; opacity: 0; }
  .as-swipe .as-card { animation: none; }
  .js .shot-window[data-reveal] .as-qa { opacity: 1; animation: none; }
  .js .shot-window[data-reveal] .as-qa .q,
  .js .shot-window[data-reveal] .as-qa .a,
  .js .shot-window[data-reveal] .as-qa .cites { filter: none; animation: none; }
  .feat-cell:hover .shot-window .app-screen,
  .feat-close:hover .shot-window .app-screen { transform: none; }
  .feat-cell-wide .shot-window .app-screen,
  .feat-cell-wide:hover .shot-window .app-screen { transform: scale(1.12); }
}

/* ——— Landing: CTA band ——— */
.cta { border-top: 1px solid var(--pp-rule); padding: 32px 0 56px; }
.cta-band {
  background: var(--pp-primary);
  border-radius: 8px;
  padding: 48px var(--pp-margin);
  text-align: center;
}
.cta-band h2 {
  font-family: var(--font-brand);
  font-weight: 400;
  font-size: clamp(26px, 3.6vw, 36px);
  color: var(--pp-paper);
  margin-bottom: var(--pp-stack-sm);
  text-wrap: balance;
}
.cta-band p { color: var(--pp-surface-high); font-size: 16px; margin-bottom: var(--pp-stack-lg); }

/* ——— Beta: feedback board ——— */
.board-page { padding: 24px 0 72px; }
.board-page .lede { margin-bottom: var(--pp-stack-lg); }
.board-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 48px;
  align-items: start;
}
.board-head { display: flex; align-items: center; gap: 10px; margin-bottom: var(--pp-stack-md); }
.board-head .section-header { margin-bottom: 0; }
.board-list { display: grid; gap: var(--pp-stack-md); }
.feature-card { display: flex; gap: var(--pp-gutter); align-items: flex-start; }
.feature-card .body { flex: 1; min-width: 0; }
.feature-card .title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 2px; }
.feature-card h3 { font-size: 18px; font-weight: 600; color: var(--pp-on-surface); }
.feature-card .details { font-size: 14px; color: var(--pp-on-surface-variant); }
.vote-cluster { display: flex; flex-direction: column; gap: 6px; flex: none; }
.vote-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 64px; min-height: 36px;
  padding: 4px 12px;
  border-radius: 8px;
  border: 1px solid var(--pp-outline);
  background: var(--pp-paper);
  color: var(--pp-slate);
  font-family: var(--font-body);
  font-size: 14px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: color 0.3s ease-in-out, border-color 0.3s ease-in-out, background-color 0.3s ease-in-out;
}
.vote-btn:hover { border-color: var(--pp-primary); color: var(--pp-primary); }
.vote-btn[aria-pressed="true"] {
  background: var(--pp-sand);
  border-color: var(--pp-outline);
  border-left: 2px solid var(--pp-terracotta);
  color: var(--pp-primary);
}
.vote-btn:disabled { cursor: default; opacity: 0.45; }
.vote-btn:disabled:hover { border-color: var(--pp-outline); color: var(--pp-slate); }
.vote-btn svg { width: 13px; height: 13px; }
.board-notice {
  background: var(--pp-surface-low);
  border: 1px solid var(--pp-border-soft);
  border-radius: 8px;
  padding: 10px var(--pp-gutter);
  font-size: 14px;
  color: var(--pp-slate);
  margin-bottom: var(--pp-stack-md);
}
.request-form .field { margin-bottom: var(--pp-stack-md); }
.request-form .caption { font-size: 12px; color: var(--pp-slate); margin-top: var(--pp-stack-sm); }

/* ——— Articles ——— */
.articles-page { padding: 24px 0 72px; }
.articles-page .wrap { max-width: 780px; }
.articles-empty {
  text-align: center;
  padding: 48px var(--pp-margin);
  margin-top: var(--pp-stack-lg);
}
.articles-empty .icon-tile { margin: 0 auto var(--pp-stack-md); }
.articles-empty h2 { font-size: 20px; font-weight: 600; margin-bottom: 6px; }
.articles-empty p { color: var(--pp-on-surface-variant); max-width: 32em; margin: 0 auto 6px; }
.articles-empty .actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: var(--pp-stack-lg); }
.article-list { display: grid; gap: var(--pp-stack-md); margin-top: var(--pp-stack-lg); }
.feature-card:hover { background: var(--pp-oatmeal); }

/* Listing: hairline-ruled editorial index rows, not cards */
.article-card {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 6px 32px;
  align-items: baseline;
  border-top: 1px solid var(--pp-hairline);
  padding: 22px 8px 22px 2px;
  text-decoration: none; color: inherit;
  transition: background-color 0.3s ease-in-out, transform 0.3s ease-in-out;
}
.article-card:last-child { border-bottom: 1px solid var(--pp-hairline); }
.article-card:hover { background: var(--pp-oatmeal); transform: translateY(-1px); }
.article-card .meta {
  font-size: 12px; font-weight: 600; letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--pp-slate);
}
.article-card h3 {
  font-family: var(--font-brand); font-weight: 400;
  font-size: clamp(21px, 2.2vw, 26px); line-height: 1.25;
  color: var(--pp-primary);
}
.article-card p { grid-column: 2; font-size: 15px; color: var(--pp-on-surface-variant); }

/* ——— Article pages — editorial prose (reference: articles/template.html) ——— */
.article-page { padding: clamp(24px, 3.5vw, 44px) 0 clamp(56px, 7vw, 88px); }
.article-page .wrap { max-width: 760px; }
.article-page h1 { margin-bottom: var(--pp-stack-md); }
.standfirst {
  font-size: 19px; line-height: 1.6;
  color: var(--pp-on-surface-variant);
  max-width: 32em;
  margin-bottom: var(--pp-stack-lg);
}
.art-meta {
  display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap;
  border-top: 1px solid var(--pp-hairline);
  border-bottom: 1px solid var(--pp-hairline);
  padding: 10px 2px;
  margin-bottom: clamp(32px, 4vw, 48px);
  font-size: 12px; font-weight: 600; letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--pp-slate);
}
.article-body { font-size: 17px; line-height: 1.75; color: var(--pp-on-surface); }
.article-body p { margin-bottom: 18px; }
.article-body h2 {
  font-family: var(--font-brand); font-weight: 400;
  font-size: clamp(24px, 2.6vw, 30px); line-height: 1.25;
  color: var(--pp-primary);
  margin: 40px 0 12px;
  text-wrap: balance;
}
.article-body h3 {
  font-family: var(--font-brand); font-weight: 400;
  font-size: 21px;
  color: var(--pp-primary);
  margin: 28px 0 8px;
}
.article-body a { color: var(--pp-primary); text-decoration: underline; text-underline-offset: 2px; }
.article-body ul, .article-body ol { margin: 0 0 18px 22px; }
.article-body li { margin-bottom: 8px; }
.article-body blockquote {
  border-top: 1px solid var(--pp-hairline);
  border-bottom: 1px solid var(--pp-hairline);
  margin: 36px 0;
  padding: 22px 2px;
  font-family: var(--font-brand);
  font-size: clamp(22px, 2.4vw, 27px);
  line-height: 1.3;
  color: var(--pp-charcoal);
  text-wrap: balance;
}
.article-body figure { margin: 36px 0; }
.article-body figure img { border-radius: 4px; box-shadow: var(--pp-shadow-ambient); }
.article-body figcaption { margin-top: 10px; font-size: 13px; color: var(--pp-slate); text-align: right; }
.article-body hr { border: 0; border-top: 1px solid var(--pp-hairline); margin: 44px 0; }
.article-note {
  margin-top: clamp(40px, 5vw, 56px);
  border-top: 1px solid var(--pp-hairline);
  padding-top: 16px;
  font-size: 14px;
  color: var(--pp-slate);
}

/* ——— Legal pages (privacy / terms) ——— */
.legal { padding: 16px 0 72px; }
.legal .wrap { max-width: 780px; }
.legal h1 { margin-bottom: 6px; }
.legal .doc-sub {
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.8px; text-transform: uppercase;
  color: var(--pp-slate);
  margin-bottom: 2px;
}
.legal .updated { font-size: 12px; color: var(--pp-slate); margin-bottom: var(--pp-stack-lg); }
.legal h2 {
  font-size: 20px; font-weight: 600;
  color: var(--pp-on-surface);
  margin: 28px 0 8px;
}
.legal p { margin-bottom: 12px; }
.legal p a { color: var(--pp-primary); text-decoration: underline; text-underline-offset: 2px; }
.legal ul { margin: 0 0 12px 22px; }
.legal li { margin-bottom: 6px; }
.legal address { font-style: normal; margin-bottom: 12px; }
.legal .copyright { font-size: 12px; color: var(--pp-slate); margin-top: var(--pp-stack-lg); }

/* ——— Footer ——— */
footer { border-top: 1px solid var(--pp-rule); padding: 32px 0 48px; }
footer .wrap { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
footer img { width: 28px; height: 28px; }
footer .lines { flex: 1; min-width: 240px; }
footer p { font-size: 12px; color: var(--pp-slate); }
.footer-links { display: flex; gap: 16px; flex-wrap: wrap; }
.footer-links a {
  font-size: 12px; font-weight: 600;
  color: var(--pp-slate);
  text-decoration: none;
  border-bottom: 1px solid var(--pp-outline);
  padding-bottom: 1px;
}
.footer-links a:hover { color: var(--pp-primary); border-bottom-color: var(--pp-primary); }
.footer-links a:focus-visible { outline: 2px solid var(--pp-primary); outline-offset: 2px; }

@media (max-width: 860px) {
  .hero { padding-top: 16px; }
  .hero .wrap { grid-template-columns: 1fr; gap: 48px; }
  .phone-col { order: 2; }
  .topbar .wrap { flex-wrap: wrap; }
  .topbar nav { flex-wrap: wrap; gap: 6px 20px; }
  .phone-col .phone { margin-bottom: -104px; }
  .interstitial { padding-top: 72px; }
  .pull-note { margin: 28px 0 0; }
  .pull-note br { display: none; }
  .how-step + .how-step::before { display: none; }
  .how-steps { grid-template-columns: 1fr; }
  .how-step { padding: 40px 0 0; }
  .how-step + .how-step { border-left: 0; border-top: 1px solid var(--pp-hairline); padding-left: 0; margin-top: 40px; }
  .feat-lead-spread { grid-template-columns: 1fr; }
  .lead-no { font-size: 104px; }
  .lead-figure { margin: 8px 0 -48px; }
  .lead-photo { height: 320px; }
  .features-head { grid-template-columns: 1fr; align-items: start; }
  .features-deck { padding-bottom: 0; }
  .feat, .feat-close { grid-template-columns: 1fr; gap: 40px; }
  .feat-close .feat-shot { order: 0; }
  .feat-row { grid-template-columns: 1fr; }
  .feat-cell-wide { padding-right: 0; }
  .feat-cell + .feat-cell { border-left: 0; border-top: 1px solid var(--pp-hairline); padding-left: 0; }
  .feat-cell .feat-copy { margin-bottom: 32px; }
  .article-card { grid-template-columns: 1fr; gap: 4px; }
  .article-card p { grid-column: 1; }
  .board-grid { grid-template-columns: 1fr; }
}