/* profiles.red: the parts pbn.red's skin doesn't have. Tokens, reset, header, footer, verdict boxes, the check band,
 * decl lines, how band, tiers and FAQ all come from pbn.red's base.css, skin.css, hero.css, shop.css and hunt.css.
 *
 * The button: lime, a color nothing else on the site uses (load-cro rule 9; the same squint winner pbn.red's shop
 * uses). Lime fails 3:1 on white paper, so every button sits on a red or ink surface. On red the label is ink; on ink
 * it is deep red, so the letters never read as holes in the bar.
 */
:root {
  --go-fill: #C6FF00;
  --go-fill-hover: #D8FF4A;
  --go-label: #111111;
  --go-label-on-ink: #9E0009;
  --on-ink-2: oklch(84% 0.004 88);
  --on-ink-rule: oklch(36% 0.004 88);
  --p-h1: clamp(2.35rem, 3.3vw + 1rem, 4.5rem);
  --p-h2: clamp(1.85rem, 2vw + 1rem, 3rem);
  --p-h3: clamp(1.25rem, 0.8vw + 1rem, 1.6rem);
}

/* ---------- The button ---------- */
.go {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  border: 0; border-radius: 0; cursor: pointer; text-decoration: none; white-space: nowrap;
  background: var(--go-fill); color: var(--go-label);
  font-family: var(--font-display); font-weight: 900; font-style: italic; font-size: var(--text-md);
  letter-spacing: -0.01em; line-height: 1.2; padding: 0.85rem 1.5rem 0.9rem; min-height: 3.25rem;
  transition: background-color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out);
}
.go:hover { background: var(--go-fill-hover); }
.go:active { transform: translateY(1px); }
.go:focus-visible { outline: 3px solid var(--color-paper); outline-offset: 3px; }
.go:disabled, .go[aria-busy="true"] { background: var(--color-paper-3); color: var(--color-muted); cursor: progress; transform: none; }
.on-ink .go, .tier .go { color: var(--go-label-on-ink); }
.go--wide { width: 100%; }
.go__micro { margin-top: var(--space-xs); font-size: var(--text-sm); font-weight: 600; }

/* header button wears the lime too */
.slab__links .slab__cta { background: var(--go-fill); color: var(--go-label); }
.slab__links .slab__cta:hover { background: var(--go-fill-hover); color: var(--go-label); text-decoration-line: none; }
.slab__links .slab__cta[aria-current="page"] { text-decoration-line: none; }

@media (max-width: 63.99rem) {
  .xhero__in { grid-template-columns: minmax(0, 1fr); }
}

/* three doors instead of pbn.red's two */
.door--reviews { background: var(--color-red); color: var(--color-on-red); }
.door--reviews:hover { background: var(--color-red-deep); }
.xhero h1 { max-width: 14ch; }
.xhero__big {
  margin-top: clamp(1rem, 1.6vw, 1.4rem); font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.3rem, 0.9vw + 1rem, 1.85rem); line-height: 1.18; letter-spacing: -0.02em; max-width: 26ch;
}

/* ---------- Inner page hero ---------- */
.phero { padding-block: clamp(2rem, 4vw, 3.75rem) clamp(2.25rem, 4vw, 3.5rem); border-bottom: var(--rule-hair); }
.phero__in { display: grid; gap: var(--space-xl) clamp(2rem, 5vw, 5rem); align-items: end; }
@media (min-width: 62rem) { .phero__in { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); } }
.phero h1 { font-weight: 900; font-size: var(--p-h1); line-height: 0.98; letter-spacing: -0.042em; max-width: 16ch; }
.phero__big {
  margin-top: var(--space-lg); font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.3rem, 0.9vw + 1rem, 1.85rem); line-height: 1.18; letter-spacing: -0.02em; max-width: 30ch;
}
.phero__lede { margin-top: var(--space-md); font-size: clamp(1.1rem, 0.4vw + 1rem, 1.3rem); font-weight: 500; line-height: 1.45; max-width: 46ch; color: var(--color-ink-2); }
.phero__promise {
  margin-top: var(--space-lg); display: grid; grid-template-columns: 0.85rem minmax(0, 1fr); gap: var(--space-sm);
  align-items: baseline; max-width: 40ch; font-size: var(--text-md); font-weight: 800; line-height: 1.3;
}
.phero__promise::before { content: ""; width: 0.7rem; height: 0.7rem; background: var(--color-red); transform: translateY(0.02em); }

/* the price card beside an inner hero */
.offer { background: var(--color-ink); color: var(--color-paper); padding: clamp(1.25rem, 2.2vw, 1.9rem); display: grid; gap: var(--space-sm); }
.offer__name { font-family: var(--font-display); font-weight: 900; font-style: italic; font-size: var(--text-lg); letter-spacing: -0.02em; line-height: 1.05; }
.offer__price { font-family: var(--font-display); font-weight: 900; font-size: clamp(3rem, 3.4vw + 1.25rem, 4.5rem); line-height: 0.92; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.offer__price small { font-size: 0.32em; font-weight: 800; letter-spacing: 0; margin-left: 0.15em; }
.offer__list { list-style: none; padding: var(--space-sm) 0 0; margin: 0; border-top: 1px solid var(--on-ink-rule); display: grid; gap: 0.35rem; }
.offer__list li { position: relative; padding-left: 1.3rem; font-weight: 600; color: var(--on-ink-2); }
.offer__list li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 0.55rem; height: 0.55rem; background: var(--go-fill); }
.offer .go { margin-top: var(--space-xs); }
.offer .go__micro { color: var(--on-ink-2); }

/* ---------- Body sections ---------- */
.sec { padding-block: clamp(2.75rem, 5vw, 4.75rem); }
.sec + .sec { padding-top: 0; }
.sec--tint { background: var(--color-paper-2); border-top: var(--rule-slab); }
.sec--tint + .sec { padding-top: clamp(2.75rem, 5vw, 4.75rem); }
.ph2 { font-size: var(--p-h2); font-weight: 900; letter-spacing: -0.035em; max-width: 24ch; }
.ph3 { margin-top: var(--space-xl); font-size: var(--p-h3); font-weight: 900; letter-spacing: -0.02em; line-height: 1.15; max-width: 34ch; }
.prose { max-width: 70ch; }
.prose > p, .prose > ul, .prose > ol, .prose > .note, .prose > table, .prose > .tablewrap { margin-top: var(--space-md); }
.prose > .ph2 + p { margin-top: var(--space-md); }
.prose p, .prose li { color: var(--color-ink-2); font-size: 1.0625rem; line-height: 1.62; }
.prose b, .prose strong { color: var(--color-ink); font-weight: 800; }
.prose a:not(.go) { font-weight: 700; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.prose a:not(.go):hover { text-decoration-color: var(--color-red); }
.prose ul { list-style: none; padding: 0; display: grid; gap: 0.55rem; }
/* bullets sit in the padding, so a line mixing bold, links and plain text stays one line of text */
.prose ul li { position: relative; padding-left: 1.4rem; }
.prose ul li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 0.55rem; height: 0.55rem; background: var(--color-red); }
.prose ol { padding-left: 1.4rem; display: grid; gap: 0.55rem; }
.prose ol li::marker { font-family: var(--font-data); color: var(--color-ink); }
.split { display: grid; gap: var(--space-xl) clamp(2rem, 5vw, 5rem); }
@media (min-width: 62rem) { .split { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; } }

/* a fact box in running text */
.note { border-left: 6px solid var(--color-red); background: var(--color-paper-2); padding: var(--space-md) var(--space-lg); }
.note p { margin: 0; color: var(--color-ink); }
.note p + p { margin-top: var(--space-xs); }

/* simple tables (prices, owner vs manager) */
.tablewrap { overflow-x: auto; }
.ptable { width: 100%; border-collapse: collapse; border-top: var(--rule-ink); font-size: 1rem; }
.ptable th, .ptable td { text-align: left; vertical-align: top; padding: 0.8rem 0.9rem 0.8rem 0; border-bottom: var(--rule-hair); color: var(--color-ink-2); }
.ptable th { color: var(--color-ink); font-weight: 800; }
.ptable thead th { font-size: var(--text-sm); letter-spacing: 0.08em; text-transform: uppercase; }
.ptable td.n, .ptable th.n { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 800; color: var(--color-ink); }
@media (max-width: 40rem) {
  .ptable thead { display: none; }
  .ptable tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; padding: 0.7rem 0; border-bottom: var(--rule-hair); }
  .ptable td, .ptable th { border: 0; padding: 0.15rem 0; }
  .ptable td:not(:first-child):not(.n), .ptable th:not(:first-child):not(.n) { grid-column: 1 / -1; }
}

/* ---------- Prices: pbn.red shop tiers (shop.css .tiers/.tier) with lists ---------- */
.plans { background: var(--color-paper-2); border-top: var(--rule-slab); padding-block: clamp(2.75rem, 5vw, 5rem); }
.plans .tiers { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.5rem), 1fr)); }
.tier__price small { font-size: 0.32em; font-weight: 800; letter-spacing: 0; margin-left: 0.15em; }
.tier__price small.tier__from { margin: 0 0.3em 0 0; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.22em; vertical-align: 0.6em; }
.tier__price sup { font-size: 0.42em; vertical-align: 0.95em; margin-right: 0.03em; letter-spacing: 0; }
.tier__list { list-style: none; padding: var(--space-sm) 0 0; margin: 0; border-top: 1px solid var(--on-ink-rule); display: grid; gap: 0.4rem; }
.tier__list li { position: relative; padding-left: 1.2rem; font-weight: 600; font-size: var(--text-sm); color: var(--on-ink-2); line-height: 1.4; }
.tier__list li::before { content: ""; position: absolute; left: 0; top: 0.45em; width: 0.5rem; height: 0.5rem; background: var(--go-fill); }
.tier .go { margin-top: auto; }
.tier__who { font-weight: 800; line-height: 1.3; }
.plans__care { margin-top: var(--space-md); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-sm) var(--space-xl); align-items: center; background: var(--color-paper); box-shadow: inset 0 0 0 3px var(--color-ink); padding: clamp(1rem, 2vw, 1.4rem) clamp(1.1rem, 2vw, 1.6rem); }
.plans__care b { font-family: var(--font-display); font-weight: 900; font-style: italic; font-size: var(--text-lg); letter-spacing: -0.02em; }
.plans__care p { color: var(--color-ink-2); }
.plans__care .n { font-family: var(--font-display); font-weight: 900; font-size: var(--text-2xl); letter-spacing: -0.04em; white-space: nowrap; }
.plans__care .n small { font-size: 0.45em; font-weight: 800; letter-spacing: 0; }
.plans__fine { margin-top: var(--space-md); color: var(--color-ink-2); max-width: 72ch; }
@media (max-width: 40rem) { .plans__care { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Order band (home): the copy left, an ink order card right ---------- */
.order { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 27rem); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.order .check__lead { max-width: 36ch; }
.order__points { list-style: none; margin: var(--space-lg) 0 0; padding: 0; display: grid; gap: 0.6rem; }
.order__points li { position: relative; padding-left: 1.4rem; font-weight: 800; font-size: var(--text-md); line-height: 1.3; }
.order__points li::before { content: ""; position: absolute; left: 0; top: 0.4em; width: 0.62rem; height: 0.62rem; background: var(--color-paper); }
.order__copy .check__fine { margin-top: var(--space-xl); }
.check form.order__card {
  margin: 0; max-width: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-md);
  padding: clamp(1.25rem, 2.6vw, 2rem); background: var(--color-ink); color: var(--color-paper);
}
.order__price { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-md); padding-bottom: var(--space-md); border-bottom: 1px solid var(--on-ink-rule); }
.order__price b { font-family: var(--font-display); font-weight: 900; font-style: italic; font-size: var(--text-lg); letter-spacing: -0.02em; }
.order__price span { font-family: var(--font-display); font-weight: 900; font-size: clamp(2rem, 1.4vw + 1.4rem, 2.6rem); letter-spacing: -0.045em; line-height: 1; font-variant-numeric: tabular-nums; }
.order__card .field { display: grid; gap: var(--space-xs); min-width: 0; }
.check .order__card label { margin: 0; font-size: var(--text-xs); letter-spacing: 0.12em; color: var(--on-ink-2); }
.check .order__card input { width: 100%; height: 3.4rem; }
.order__card .go { margin-top: var(--space-xs); min-height: 3.6rem; font-size: clamp(1.2rem, 0.9rem + 1.4vw, 1.5625rem); }
.order__fine { font-size: var(--text-sm); font-weight: 600; color: var(--on-ink-2); }
.order__side .check__ok { margin-top: 0; }
@media (max-width: 63.99rem) {
  .order { grid-template-columns: minmax(0, 1fr); }
  .order__side { max-width: 34rem; }
}

/* ---------- How it works (home): eight cards, the owner's three steps in ink (.hsteps: shop.css owns .steps) ---------- */
.hsteps { list-style: none; margin: clamp(1.75rem, 3vw, 2.5rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-sm); }
.hstep { display: flex; flex-direction: column; gap: 0.55rem; min-height: 13rem; padding: 1.2rem 1.25rem 1.35rem; background: var(--color-paper); box-shadow: inset 0 0 0 2px var(--color-ink); }
.hstep__top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 0.4rem; }
.hstep__n { font-family: var(--font-display); font-weight: 900; font-style: italic; font-size: 3rem; line-height: 0.85; letter-spacing: -0.05em; color: var(--color-red); }
.hstep__who { font-family: var(--font-data); font-size: 0.6875rem; letter-spacing: 0.14em; padding: 0.2rem 0.5rem; background: var(--color-ink); color: var(--color-paper); }
.hstep__t { font-family: var(--font-display); font-weight: 900; font-size: 1.3rem; letter-spacing: -0.02em; line-height: 1.1; }
.hstep__d { color: var(--color-ink-2); line-height: 1.45; }
.hstep--you { background: var(--color-ink); color: var(--color-paper); box-shadow: none; }
.hstep--you .hstep__d { color: var(--on-ink-2); }
.hstep--you .hstep__who { background: var(--color-red); }
.hstep--done { justify-content: flex-end; background: var(--color-red); color: var(--color-on-red); box-shadow: none; }
.hstep--done .hstep__t { font-size: clamp(1.8rem, 1.2vw + 1.3rem, 2.4rem); line-height: 1; letter-spacing: -0.04em; }
.hstep--done .hstep__d { color: var(--color-on-red); font-weight: 600; }
@media (max-width: 63.99rem) { .hsteps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 30rem) { .hsteps { grid-template-columns: minmax(0, 1fr); } .hstep { min-height: 0; } }

/* ---------- Check band: two fields and the button ---------- */
.check form.check--two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 0; }
.check--two .field { display: grid; min-width: 0; }
.check--two .field + .field input { border-left: 2px solid var(--color-rule); }
.check--two .go { height: var(--c-field-h); padding-block: 0; font-size: var(--text-md); }
.check .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 47.99rem) {
  .check form.check--two { grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); }
  .check--two .field + .field input { border-left: 0; }
  .check--two .go { width: 100%; }
}
.check__ok { margin-top: var(--space-lg); background: var(--color-ink); color: var(--color-paper); padding: var(--space-md) var(--space-lg); font-weight: 700; max-width: 54rem; }
.check__ok[hidden] { display: none; }
.check a.tlink { color: var(--color-on-red); }

/* ---------- Forms on paper (/start): pbn.red hunt.css fields, with our status lines ---------- */
.form-sec { padding-block: clamp(2.25rem, 4vw, 3.75rem) clamp(3rem, 5vw, 4.75rem); }
.form-ok { background: var(--color-ink); color: var(--color-paper); padding: clamp(1.25rem, 2.5vw, 2rem); max-width: 40rem; }
.form-ok h2, .form-ok__h { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 900; letter-spacing: -0.03em; line-height: 1.1; }
.form-ok p { margin-top: var(--space-sm); color: var(--on-ink-2); }
.form-ok[hidden], .form-err[hidden] { display: none; }
.form-err { border-left: 6px solid var(--color-red); background: var(--color-red-wash); padding: var(--space-md) var(--space-lg); font-weight: 600; max-width: 40rem; }
.hunt .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.hunt select {
  display: block; width: 100%; min-width: 0; border: 0; border-radius: 0; appearance: none;
  background: var(--color-paper); color: var(--color-ink); box-shadow: inset 0 0 0 2px var(--color-ink);
  font: inherit; font-size: var(--text-md); font-weight: 500; padding: 0 1rem; height: 3.5rem;
}
.hunt__box b { white-space: normal; }
.hunt__box > span { white-space: normal; }
.send { background: var(--color-ink); padding: var(--space-md); display: grid; gap: var(--space-xs); max-width: 40rem; }
.send p { color: var(--on-ink-2); font-size: var(--text-sm); font-weight: 600; }
@media (max-width: 40rem) { .hunt__pair { grid-template-columns: minmax(0, 1fr); } }

/* ---------- FAQ: every answer open, two columns on wide screens (no accordions, Bike 11/8/2026) ---------- */
.faq { margin-top: var(--space-lg); max-width: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 4vw, 4rem); border-top: var(--rule-ink); }
.faq__item { padding: var(--space-lg) 0; border-bottom: var(--rule-hair); }
.faq__item h3 { font-size: var(--text-md); font-weight: 800; letter-spacing: -0.015em; line-height: 1.25; }
.faq__item p { margin-top: var(--space-xs); color: var(--color-ink-2); max-width: 62ch; }
@media (max-width: 47.99rem) { .faq { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Sources ---------- */
.sources { margin-top: var(--space-xl); padding-top: var(--space-md); border-top: var(--rule-hair); max-width: 72ch; }
.sources h2 { font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.sources ol { margin: var(--space-sm) 0 0; padding-left: 1.3rem; display: grid; gap: 0.35rem; font-size: var(--text-sm); color: var(--color-ink-2); }
.sources a { overflow-wrap: anywhere; }

/* ---------- End band: one more ask, on red ---------- */
.endband { background: var(--color-red); color: var(--color-on-red); padding-block: clamp(2.5rem, 5vw, 4rem); }
.endband__in { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-lg) clamp(1.5rem, 4vw, 4rem); align-items: center; }
.endband h2 { font-size: clamp(1.6rem, 1.8vw + 1rem, 2.6rem); font-weight: 900; letter-spacing: -0.032em; max-width: 24ch; }
.endband p { margin-top: var(--space-xs); font-weight: 500; max-width: 56ch; }
@media (max-width: 47.99rem) { .endband__in { grid-template-columns: minmax(0, 1fr); } .endband .go { width: 100%; } }

/* footer extras */
.foot__legal a { color: inherit; }
.foot__legal a[aria-current="page"] { color: var(--color-ink); font-weight: 700; }
.foot__src a.tlink { white-space: normal; }

/* the HTML sitemap */
.mapl { list-style: none; padding: 0; margin: var(--space-lg) 0 0; border-top: var(--rule-ink); max-width: 46rem; }
.mapl li { border-bottom: var(--rule-hair); padding: 0.8rem 0; display: grid; gap: 0.15rem; }
.mapl a { font-family: var(--font-display); font-weight: 900; font-size: var(--text-md); letter-spacing: -0.015em; }
.mapl span { color: var(--color-ink-2); font-size: var(--text-sm); }

/* our running-text links are longer than pbn.red's, so they wrap (the footer's ask stays on one line) */
.tlink { white-space: normal; }
.foot__cta { white-space: nowrap; }

/* the word is longer than pbn.red's, so the logo runs wider to keep the same height */
.slab .logo img { --logo-w: 184px; }
.foot__meta .logo img { --logo-w: 132px; }
@media (max-width: 26rem) { .slab .logo img { --logo-w: 156px; } }

/* body text lines up with the hero's left edge, like pbn.red's sections; only the line length is capped */
.prose { max-width: none; }
.prose > * { max-width: 70ch; }
.prose > .tablewrap { max-width: 60rem; }
.prose > .ph2:not(:first-child) { margin-top: clamp(2.75rem, 4.5vw, 4rem); }
.prose ul[hidden] { display: none; }
/* shop.css (loaded for the FAQ and tiers) outlines the header button on pbn.red's shop page; ours stays solid lime */
.slab__links .slab__cta { box-shadow: none; }

/* hunt.css styles the text, email and url boxes; the order form's phone box matches them */
.hunt input[type="tel"] {
  display: block; width: 100%; min-width: 0; border: 0; border-radius: 0;
  background: var(--color-paper); color: var(--color-ink); box-shadow: inset 0 0 0 2px var(--color-ink);
  font: inherit; font-size: var(--text-md); font-weight: 500; padding: 0 1rem; height: 3.5rem;
}