/* /playbook — the one page on the site with a capture form. Loaded after base.css.
   Literal clamps below mirror SPEC.md §3.2's --t-* scale. Swap them for the tokens
   the day that scale actually ships in base.css; until then this file must work
   against base.css AS SHIPPED, which has no --t-*, no --s*, and no --r. */

/* ---------------------------------------------------------------------------
   THE NOTATION, EXTENDED BY ONE STATE — and only one.
   base.css defines three grades as three rule weights. This page needs a fourth
   case: a figure for which NO reading exists yet. It is drawn as the ABSENCE of
   a rule, not as a fourth weight — three weights is the legible maximum and
   SPEC.md §3.4 already settled that. The transparent 1px border keeps the stamp
   on precisely the same baseline as a graded stamp, so an ungraded figure sits
   flush in a column of graded ones instead of riding 1px high.
   This is the whole CSS cost of the empty state.
   --------------------------------------------------------------------------- */

/* The form is deliberately NOT graded. The grade rule means one thing — how a
   figure was measured — and hanging a gold rule on a control because it looks
   important is the taxonomy-mixing error SPEC.md §3.4 diagnosed and cut. The
   form gets --edge, like every other control on the property. */

/* ============================== hero ============================== */
.phero{ padding:clamp(48px,6vw,84px) 0 clamp(36px,4.5vw,60px); border-top:0; }
/* 12px of the fold budget, bought back where the budget is tightest. */
@media(max-width:560px){ .phero{ padding-top:36px; } }
.phero > .wrap{ display:grid; gap:clamp(28px,3.5vw,56px); grid-template-columns:minmax(0,1fr); }
@media(min-width:900px){
  .phero > .wrap{ grid-template-columns:minmax(0,1fr) minmax(330px,400px); align-items:start; }
}
.phero h1{
  font-size:clamp(38px,4.5vw + 17.2px,68px); line-height:1.04; letter-spacing:-.018em;
  max-width:13em; margin:18px 0 0;
}
.phero .sub{
  font-size:clamp(18px,.65vw + 15.9px,21px); line-height:1.45; color:var(--cream);
  max-width:32em; margin-top:20px;
}

/* The bypass line. The single most important element on this page for the second
   reader, and the reason the first reader trusts the form underneath it. Mono,
   one rule, no colour event — it must read as an aside, not as a second offer. */
.bypass{
  margin-top:24px; padding-top:12px; border-top:1px solid var(--rule);
  font-family:var(--mono); font-size:12px; letter-spacing:.02em; line-height:1.75;
  color:var(--muted); max-width:44em;
}
.bypass a{ color:var(--cream); border-bottom:1px solid var(--rule); padding-bottom:1px; white-space:nowrap; }
.bypass a:hover{ border-color:var(--accent); }

/* ============================== the form ==============================
   A recessed control surface, not a card: --well fill (L* 6.99, deltaL* -10.33
   against the field) with an --edge border at 3.85:1 on the well, which clears
   SC 1.4.11 for a boundary that is the sole indicator of a control.
   The input inverts back UP to --ink inside it — deltaL* +10.33 — so the field
   reads as raised inside the recess. Cream on --ink is 12.11:1.
   ====================================================================== */
.pform{
  background:var(--well); border:1px solid var(--edge); border-radius:4px;
  padding:clamp(22px,2.2vw,28px); min-width:0;
}
.pform .plab{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent); font-weight:500; line-height:1.6;
}
/* Below the button by design. Context must never push the control down: at
   390px these three lines are the difference between a tap target inside the
   first iOS viewport and one that needs a scroll. */
.pform .plede{ font-size:15px; line-height:1.6; color:var(--muted); margin-top:16px; max-width:34em; }
.pform label.pq{
  display:block; font-size:17px; font-weight:600; color:var(--cream); margin-top:18px; margin-bottom:10px;
}
.pfield{
  display:flex; align-items:center; gap:8px;
  background:var(--ink); border:1px solid var(--edge); border-radius:4px;
  padding:0 14px; transition:border-color .15s ease;
}
.pfield:focus-within{ border-color:var(--accent); outline:2px solid var(--accent); outline-offset:2px; }
.pfield input{
  flex:1; min-width:0; width:100%; background:transparent; border:0; outline:0;
  color:var(--cream); font-family:var(--mono); font-size:17px; padding:15px 0;
}
.pfield input::placeholder{ color:rgba(169,189,184,.8); }
.pform .btn{ margin-top:14px; width:100%; white-space:normal; line-height:1.35; text-align:center; }
.pform .btn[aria-busy="true"]{ opacity:.7; cursor:progress; }

/* Consent + promise. Mono 400 sentence case: the annotation voice, per SPEC §3.2. */
.pfine{
  margin-top:14px; font-family:var(--mono); font-weight:400; font-size:11.5px;
  letter-spacing:.02em; line-height:1.7; color:var(--muted);
}
.pfine a{ color:var(--cream); border-bottom:1px solid var(--rule); }

/* Errors and the post-submit state. Both live inside the form block so nothing
   below them moves; the block is sized by its tallest state at authoring time. */
.perr{
  margin-top:14px; font-family:var(--mono); font-size:12px; line-height:1.65;
  color:var(--accent); border-left:2px solid var(--accent); padding-left:12px;
}
.pdone .pdh{ font-family:var(--serif); font-size:clamp(24px,1.6vw + 18px,30px); line-height:1.12; margin-top:6px; }
.pdone p{ font-size:15px; line-height:1.65; color:var(--muted); margin-top:12px; max-width:34em; }
.pdone p.lead{ color:var(--cream); }

/* The honeypot. Off-screen rather than display:none, because some bots skip
   anything that is display:none and fill everything that is not. */
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* ============================== the legend ==============================
   A marketer arriving from LinkedIn has never seen the homepage, so the
   notation has to teach itself here. Drawn as real rules, never described. */
/* ============================== specimen ==============================
   Tighter top than base.css's section rhythm, so the first graded figure
   arrives sooner on a short laptop. base.css gives sections
   clamp(60px,8vw,110px); at 1280 that is 102px of nothing above the eyebrow. */
#specimen{ padding-top:clamp(44px,5vw,72px); }
.spec{ margin-top:30px; background:var(--well); border:1px solid var(--rule); border-radius:4px; padding:clamp(22px,2.4vw,30px); }
.spec .fig{
  display:block; font-family:var(--serif); font-weight:400;
  font-size:clamp(42px,4vw + 24.2px,72px); line-height:1; letter-spacing:-.03em;
}
.spec .cap{
  display:block; font-family:var(--mono); font-size:11.5px; letter-spacing:.04em;
  color:var(--muted); margin-top:12px; line-height:1.55;
}
/* No tabular-nums anywhere on a serif figure. SPEC.md measured the face: nine
   distinct digit widths, "1" at 54% of "0". It has always been a silent no-op. */
.specgrid{ display:grid; gap:20px; grid-template-columns:repeat(2,minmax(0,1fr)); }
@media(max-width:720px){ .specgrid{ grid-template-columns:1fr; } }

/* The derivation. Mono 400 on the well: the method-note voice from SPEC §3.5. */
.notes{ list-style:none; margin:22px 0 0; padding:20px 22px; background:var(--well); border-radius:4px; counter-reset:n; }
.notes li{
  font-family:var(--mono); font-weight:400; font-size:12px; line-height:1.75;
  color:var(--muted); counter-increment:n; padding-left:26px; position:relative;
}
.notes li + li{ margin-top:12px; }
.notes li::before{ content:counter(n); position:absolute; left:0; top:0; color:var(--accent); }
.notes li:empty{ display:none; }

/* ============================== the five lessons ==============================
   Rule-separated rows, not cards. The number column is the work-row geometry
   from SPEC §3.5 so this page and the homepage share one table grammar. */
.lessons{ list-style:none; margin:30px 0 0; padding:0; }
.lesson{
  display:grid; grid-template-columns:44px minmax(0,1fr); gap:10px 20px;
  border-top:1px solid var(--rule); padding:22px 0;
}
@media(max-width:560px){ .lesson{ grid-template-columns:1fr; gap:8px; } }
.lesson .no{ font-family:var(--serif); font-size:32px; line-height:1; color:var(--accent); }
.lesson h3{ font-size:clamp(21px,1vw + 17.8px,28px); line-height:1.14; }
.lesson p{ font-size:16px; line-height:1.65; color:var(--cream); opacity:.92; max-width:44em; margin-top:8px; }
.lesson .stamp{ max-width:30em; }
.lessons + .lessonfoot{ margin-top:26px; font-size:15px; line-height:1.65; color:var(--muted); max-width:46em; }

/* ============================== the empty state ==============================
   Not a hole: a disclosure, in the same hand as the evidence. */
.pnone{ margin-top:28px; border-top:1px solid var(--rule); padding-top:24px; max-width:34em; }
.pnone .fig{
  display:block; font-family:var(--serif); font-weight:400;
  font-size:clamp(42px,4vw + 24.2px,72px); line-height:1; letter-spacing:-.03em; color:var(--muted);
}
.pnone .cap{
  display:block; font-family:var(--mono); font-size:11.5px; letter-spacing:.04em;
  color:var(--muted); margin-top:12px; line-height:1.55;
}

/* ============================== who wrote this ============================== */
.who3{ display:grid; gap:20px 32px; grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:30px; }
@media(max-width:720px){ .who3{ grid-template-columns:1fr; gap:18px; } }
.who3 > div{ border-top:1px solid var(--rule); padding-top:18px; min-width:0; }
.who3 b{
  display:block; font-family:var(--mono); font-size:11px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--accent); font-weight:500; margin-bottom:8px;
}
.who3 p{ font-size:15.5px; line-height:1.6; color:var(--muted); }
.who3 a{ color:var(--cream); border-bottom:1px solid var(--rule); padding-bottom:1px; }
.who3 a:hover{ border-color:var(--accent); }

/* Foot form: same component, narrower column, its own ids and its own
   custom_source so top-of-page and foot-of-page are separable in Klaviyo
   without any analytics product at all. */
.pfoot-form{ max-width:520px; margin-top:30px; }

/* ============================== /playbook/confirmed ============================== */
.cwrap{ max-width:820px; margin:0 auto; padding-inline:var(--gutter); }
.cnext{ list-style:none; margin:32px 0 0; padding:0; }
.cnext li{ border-top:1px solid var(--rule); padding:22px 0; }
.cnext h2{ font-size:clamp(24px,1.8vw + 18px,32px); margin-top:0; max-width:20em; }
.cnext p{ font-size:16px; line-height:1.65; color:var(--muted); margin-top:10px; max-width:44em; }
.cnext .ctarow{ margin-top:18px; }
.copyrow{ display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:16px; }
.copyurl{
  font-family:var(--mono); font-size:13px; color:var(--cream);
  background:var(--well); border:1px solid var(--edge); border-radius:4px; padding:11px 14px;
}
.copyok{ font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); }

/* ============================== touch + motion ==============================
   Every hover on this page is inside hover:hover, and every control has an
   :active. AUDIT-interaction §3.1/§3.2: today nothing on this site responds to
   being touched, and every :hover sticks through bfcache. */
@media(hover:hover){
  .pform .btn.primary:hover{ background:var(--accent2); }
}
.pform .btn:active,.cnext .btn:active{ transform:translateY(1px); }
@media(prefers-reduced-motion:reduce){
  .pfield,.pform .btn{ transition:none; }
  .pform .btn:active,.cnext .btn:active{ transform:none; }
}

/* ============================== print ==============================
   base.css sets color:var(--cream) — roughly 1.1:1 on white paper — and has no
   print block yet, so this page ships its own until the shared one in SPEC §3.7
   lands. The grade encoding is a border, not a fill, so it survives with
   "background graphics" off, which is the default. */
@media print{
  html,body{ background:#fff; color:#111; }
  .top,footer.site,.skip,.pform,.pfoot-form,.bypass{ display:none !important; }
  .spec,.notes{ background:none; border:1px solid #ccc; }
  .spec .cap,.pnone .cap,.notes li,.lesson .stamp,.stamp{ color:#333; }
  .lesson .no,.notes li::before{ color:#111; }
  .lesson,.cnext li{ break-inside:avoid; }
}