/*
 * Poster pieces for the home, how-it-works, about, FAQ and learn pages (Nov 2026 revamp).
 * Loaded after styles.css and content.css. Uses their tokens, so pieces work on ink, amber band and paper.
 * Grounds: ink (default), .band (amber halftone, styles.css), .paper-band (full-bleed paper, below).
 */

/* ---------- Grounds ---------- */
.paper-band {
  --ground: var(--paper);
  --surface: #fff;
  --edge: var(--ink);
  --divider: var(--ink);
  --rule: #C9C3B6;
  --text: var(--ink);
  --muted: #4A4740;
  --accent: var(--ink);
  --link: var(--ink);
  --link-line: var(--ink);
  --link-weight: 600;
  --hover: var(--highlight);
  --focus: var(--ink);
  --btn-edge: var(--ink);
  color: var(--text);
  position: relative;
  isolation: isolate;
}
.paper-band::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  background: var(--paper);
}
.paper-band .btn:not(.btn-ghost) { background: var(--ink); color: var(--amber); border-color: var(--ink) }
.paper-band .btn:not(.btn-ghost):hover { background: var(--panel); border-color: var(--panel); color: var(--amber) }

.band.section, .paper-band.section { border-top: 0 }
.band + .section, .paper-band + .section, .section + .band, .section + .paper-band { border-top: 0 }
.band.section { padding: 48px 0 }

/* ---------- Static ---------- */
picture.static { display: block; line-height: 0 }
picture.static img { width: 100%; height: auto; display: block }
.static-side { width: min(220px, 52vw); margin: 0 auto }
@media (min-width: 800px) { .static-side { width: 100%; max-width: 300px; margin: 0 0 0 auto } }
.static-stamp { width: 120px; flex-shrink: 0 }
@media (min-width: 720px) { .static-stamp { width: 150px } }

/* Section head with Static beside the title */
.head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px }
.head-row h2 { margin: 0 0 8px }
.head-row .section-intro { margin-bottom: 0 }

/* ---------- Big poster headline ---------- */
.poster-h1 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(48px, 11vw, 96px);
  line-height: .92;
  text-transform: uppercase;
  letter-spacing: .005em;
  margin: 0 0 18px;
  text-wrap: balance;
}
.hero .lede, .page-head .lede { font-size: 19px; max-width: 38ch; margin: 0 0 10px }
.no-list { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 8px }
.no-list li {
  font-family: var(--mono);
  font-weight: 800;
  font-size: 12.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  border: 2px solid var(--ink);
  padding: 6px 10px;
  background: var(--paper);
  color: var(--ink);
}
.hero .cta-row { margin-top: 22px }

/* ---------- Stamp strip: 1 bill · 1 call · 0 monthly charges ---------- */
.stamps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); border: 3px solid var(--amber) }
.stamps li { padding: 18px 10px 16px; text-align: center; border-left: 3px solid var(--amber) }
.stamps li:first-child { border-left: 0 }
.stamps b { display: block; font-family: var(--display); font-weight: 400; font-size: clamp(44px, 12vw, 72px); line-height: 1; color: var(--amber) }
.stamps span { display: block; margin-top: 6px; font-family: var(--mono); font-weight: 800; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--paper) }
.stamps-wrap { padding: 32px 0 8px }

/* ---------- Lane cards (homes / businesses) ---------- */
.lanes { display: grid; gap: 18px }
@media (min-width: 760px) { .lanes { grid-template-columns: 1fr 1fr } }
.lane {
  position: relative;
  background: var(--paper);
  color: var(--ink);
  border: 4px solid var(--ink);
  outline: 3px solid var(--amber);
  padding: 30px 22px 22px;
  display: flex;
  flex-direction: column;
}
.lane-tag {
  position: absolute;
  top: -3px;
  right: -3px;
  background: var(--amber);
  color: var(--ink);
  font-family: var(--mono);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .16em;
  padding: 6px 10px;
  text-transform: uppercase;
}
.lane h3 { font-family: var(--display); font-weight: 400; font-size: 38px; line-height: 1; text-transform: uppercase; margin: 0 0 8px }
.lane > p { margin: 0 0 12px; color: #4A4740; font-size: 16px }
.lane ul { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 8px }
.lane li { padding-left: 28px; position: relative; font-size: 16px; font-weight: 600 }
.lane li::before { content: ""; position: absolute; left: 0; top: 6px; width: 14px; height: 14px; background: var(--amber); border: 2px solid var(--ink) }
.lane .btn { margin-top: auto; align-self: flex-start; background: var(--ink); color: var(--amber); border-color: var(--ink) }
.lane .btn:hover { background: var(--panel); border-color: var(--panel); color: var(--amber) }

/* ---------- Trap cards with a chart on top ---------- */
.traps { display: grid; gap: 18px }
@media (min-width: 860px) { .traps { grid-template-columns: repeat(3, 1fr) } }
.trap { background: var(--surface); border: 3px solid var(--edge); display: flex; flex-direction: column }
.trap figure { margin: 0; padding: 14px 14px 6px; border-bottom: 3px solid var(--edge); background: var(--paper) }
.trap svg { width: 100%; height: auto; display: block }
.trap h3 { font-family: var(--display); font-weight: 400; font-size: 28px; line-height: 1.05; text-transform: uppercase; margin: 16px 16px 8px }
.trap p { margin: 0 16px 16px; font-size: 16px; color: var(--muted) }
.trap p b { color: var(--text) }

/* Chart ink colors (charts sit on paper) */
.chart { color: var(--ink) }
.chart .bar { fill: var(--ink) }
.chart .bar.hot { fill: var(--amber); stroke: var(--ink); stroke-width: 2 }
.chart .avg { stroke: var(--red); stroke-width: 3; stroke-dasharray: 8 6; fill: none }
.chart .line { stroke: var(--ink); stroke-width: 4; fill: none; stroke-linejoin: round; stroke-linecap: round }
.chart .zone { fill: var(--highlight) }
.chart .danger { fill: var(--red) }
.chart .lbl { font-family: var(--mono); font-weight: 800; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; fill: var(--ink) }
.chart .lbl-red { fill: var(--red) }
.chart .lbl-paper { fill: var(--paper) }
.chart .axis { stroke: var(--ink); stroke-width: 2 }

/* ---------- Static's take ---------- */
.says {
  position: relative;
  display: inline-block;
  max-width: 34ch;
  margin: 26px 0 0;
  padding: 16px 20px 16px;
  background: var(--ink);
  color: var(--paper);
  border: 3px solid var(--amber);
  font-family: var(--display);
  font-size: 26px;
  line-height: 1.15;
  text-transform: uppercase;
}
.says::after {
  content: "";
  position: absolute;
  left: 28px;
  bottom: -18px;
  border: 9px solid transparent;
  border-top-color: var(--amber);
  border-left-color: var(--amber);
}
.says-who { display: block; font-family: var(--mono); font-weight: 800; font-size: 11px; letter-spacing: .18em; color: var(--amber); margin-bottom: 4px }
.says-row { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap }
.says-row .static-stamp { order: 2 }

/* ---------- Tiles (what you get) ---------- */
.tiles { display: grid; gap: 14px }
@media (min-width: 640px) { .tiles { grid-template-columns: 1fr 1fr } }
.tile { border: 3px solid var(--edge); background: var(--surface); padding: 18px 18px 16px; border-top: 8px solid var(--amber) }
.paper-band .tile { border-top-color: var(--ink) }
.tile h3 { font-family: var(--display); font-weight: 400; font-size: 26px; text-transform: uppercase; line-height: 1.05; margin: 0 0 6px }
.tile p { margin: 0; font-size: 16px; color: var(--muted) }

/* ---------- You vs alone ticket ---------- */
.versus { display: grid; border: 4px solid var(--ink); background: var(--paper); color: var(--ink) }
@media (min-width: 720px) { .versus { grid-template-columns: 1fr 1fr } }
.versus > div { padding: 20px 20px 18px }
.versus .us { background: var(--amber) }
.versus .alone { border-top: 4px dashed var(--ink) }
@media (min-width: 720px) { .versus .alone { border-top: 0; border-left: 4px dashed var(--ink) } }
.versus h3 { font-family: var(--display); font-weight: 400; font-size: 30px; text-transform: uppercase; margin: 0 0 4px; line-height: 1 }
.versus .count { font-family: var(--mono); font-weight: 800; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 12px }
.versus ol { margin: 0; padding: 0; list-style: none; counter-reset: v; display: grid; gap: 8px }
.versus li { counter-increment: v; padding-left: 40px; position: relative; font-size: 16.5px; font-weight: 600; min-height: 28px; padding-top: 2px }
.versus li::before { content: counter(v); position: absolute; left: 0; top: 0; width: 28px; height: 28px; background: var(--ink); color: var(--amber); font-family: var(--display); font-size: 16px; line-height: 28px; text-align: center }
.versus .alone li { color: #4A4740; font-weight: 400 }
.versus .alone li::before { background: transparent; color: var(--ink); border: 2px solid var(--ink); line-height: 24px }

/* ---------- Different (no-name contrast) ---------- */
.diff { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px }
@media (min-width: 720px) { .diff { grid-template-columns: 1fr 1fr } }
.diff li { display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: start; padding: 14px; border: 3px solid var(--edge); background: var(--surface) }
.diff li::before { content: "\2715"; width: 44px; height: 44px; display: grid; place-items: center; background: var(--amber); color: var(--ink); font-weight: 800; font-size: 20px; border: 2px solid var(--ink) }
.diff b { display: block; font-family: var(--display); font-weight: 400; font-size: 22px; text-transform: uppercase; line-height: 1.1; margin-bottom: 2px }
.diff span { color: var(--muted); font-size: 15.5px }

/* ---------- Big numbered steps ---------- */
.big-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; max-width: 780px }
.big-steps li { display: grid; grid-template-columns: 84px 1fr; gap: 16px; padding: 18px 0; border-top: 3px solid var(--divider) }
.big-steps li:first-child { border-top: 0; padding-top: 0 }
@media (min-width: 720px) { .big-steps li { grid-template-columns: 120px 1fr } }
.big-steps .n { font-family: var(--display); font-size: clamp(56px, 14vw, 88px); line-height: .85; color: var(--accent) }
.big-steps h3 { font-family: var(--display); font-weight: 400; font-size: 28px; text-transform: uppercase; line-height: 1.05; margin: 4px 0 6px }
.big-steps p { margin: 0; color: var(--muted); font-size: 16.5px; max-width: 52ch }

/* ---------- Comparison table (on your own vs with us) ---------- */
.vs-table { width: 100%; border-collapse: collapse; border: 4px solid var(--ink); background: var(--paper); color: var(--ink); max-width: 860px }
.vs-table th, .vs-table td { padding: 12px 14px; text-align: left; vertical-align: top; border-top: 2px solid #C9C3B6; font-size: 16px }
.vs-table thead th { background: var(--ink); color: var(--paper); font-family: var(--mono); font-weight: 800; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; border-top: 0 }
.vs-table thead th:last-child { background: var(--amber); color: var(--ink) }
.vs-table td:first-child { color: #4A4740; text-decoration: line-through; text-decoration-color: rgba(194, 63, 23, .7); text-decoration-thickness: 2px }
.vs-table td:last-child { font-weight: 600; background: #FFF3D6 }
@media (max-width: 560px) {
  .vs-table thead { display: none }
  .vs-table tr { display: block; border-top: 3px solid var(--ink) }
  .vs-table tr:first-child { border-top: 0 }
  .vs-table td { display: block; border-top: 0 }
  .vs-table td:first-child::before { content: "Alone: "; font-weight: 800; text-decoration: none; display: inline-block; margin-right: 4px }
  .vs-table td:last-child::before { content: "Us: "; font-weight: 800 }
}

/* ---------- Gotcha list ---------- */
.gotchas { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; max-width: 640px }
.gotchas li { padding: 12px 14px 12px 52px; position: relative; background: var(--surface); border: 3px solid var(--edge); font-size: 16.5px; font-weight: 600 }
.gotchas li::before { content: "!"; position: absolute; left: 12px; top: 10px; width: 28px; height: 28px; background: var(--red); color: var(--paper); font-family: var(--display); font-size: 18px; line-height: 28px; text-align: center }
.with-static { display: grid; gap: 20px; align-items: end }
@media (min-width: 760px) { .with-static { grid-template-columns: 1fr 220px } }
.with-static .static { width: 160px; justify-self: center }
@media (min-width: 760px) { .with-static .static { width: 220px } }
.after-line { margin: 16px 0 0; font-weight: 800; font-size: 17px }

/* ---------- Good-to-know link cards ---------- */
.know { display: grid; gap: 14px }
@media (min-width: 760px) { .know { grid-template-columns: repeat(3, 1fr) } }
a.know-card { display: block; padding: 18px; border: 3px solid var(--edge); background: var(--surface); color: var(--text) }
a.know-card:hover { background: var(--hover); color: var(--ink) }
a.know-card:hover p { color: var(--ink) }
.know-card h3 { font-family: var(--display); font-weight: 400; font-size: 24px; text-transform: uppercase; margin: 0 0 6px; line-height: 1.05 }
.know-card p { margin: 0 0 10px; color: var(--muted); font-size: 15.5px }
.know-card .more { font-family: var(--mono); font-weight: 800; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; border-bottom: 2px solid var(--link-line) }

/* ---------- Picker (how-it-works.html) ---------- */
.picker { display: grid; gap: 18px; margin-top: 8px }
@media (min-width: 720px) { .picker { grid-template-columns: 1fr 1fr } }
a.pick { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 24px 18px; background: var(--paper); color: var(--ink); border: 4px solid var(--ink); text-align: center }
a.pick:hover { background: var(--highlight) }
a.pick .static { width: 150px }
a.pick b { font-family: var(--display); font-weight: 400; font-size: 40px; text-transform: uppercase; line-height: 1 }

/* ---------- CTA poster ---------- */
.cta-poster { display: grid; gap: 18px; align-items: center; padding: 40px 0 44px }
@media (min-width: 720px) { .cta-poster { grid-template-columns: 200px 1fr; gap: 32px } }
.cta-poster .cta-static { width: 150px; margin: 0 auto }
@media (min-width: 720px) { .cta-poster .cta-static { width: 190px } }
.cta-poster h2 { font-family: var(--display); font-weight: 400; font-size: clamp(40px, 9vw, 64px); line-height: .95; text-transform: uppercase; margin: 0 0 8px }
.cta-poster p { margin: 0 0 6px; font-size: 18px; font-weight: 600 }
.wrap > .cta-poster:last-of-type { margin-bottom: -48px }

/* ---------- About ---------- */
.about-pair { display: grid; gap: 24px; align-items: center }
@media (min-width: 800px) { .about-pair { grid-template-columns: 1fr 1fr; gap: 44px } .about-pair.flip > :first-child { order: 2 } }
.about-pair .copy p { font-size: 18px; max-width: 46ch }
.about-pair .static { width: min(260px, 64vw); margin: 0 auto }
.portrait { margin: 0; justify-self: center; width: min(340px, 82vw); border: 4px solid var(--ink); outline: 3px solid var(--amber); background: var(--amber); position: relative }
.portrait img { display: block; width: 100%; height: auto }
.portrait figcaption { position: absolute; left: -3px; bottom: -3px; background: var(--ink); color: var(--amber); font-family: var(--mono); font-weight: 800; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; padding: 6px 10px }
.portrait .sticker { position: absolute; right: -36px; bottom: -28px; width: 120px }
.family-note { margin-top: 12px; font-family: var(--mono); font-weight: 800; font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted) }

/* ---------- FAQ: groups fold too, plus search ---------- */
.faq-search { margin: 0 0 22px; max-width: 560px }
.faq-search label { display: block; margin-bottom: 6px }
.faq-search input { width: 100% }
.faq-empty { display: none; font-weight: 600 }
.faq-empty.show { display: block }
details.faq-group-d { border-top: 3px solid var(--divider); padding: 0 }
details.faq-group-d:last-of-type { border-bottom: 3px solid var(--divider) }
details.faq-group-d > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 0;
  font-family: var(--display);
  font-size: clamp(26px, 5.5vw, 36px);
  text-transform: uppercase;
  line-height: 1.05;
}
details.faq-group-d > summary::-webkit-details-marker { display: none }
details.faq-group-d > summary::after { content: "+"; font-family: var(--display); width: 40px; height: 40px; flex-shrink: 0; display: grid; place-items: center; background: var(--amber); color: var(--ink); font-size: 28px }
details.faq-group-d[open] > summary::after { content: "\2212" }
details.faq-group-d > summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px }
details.faq-group-d > summary .count { font-family: var(--mono); font-weight: 800; font-size: 12px; letter-spacing: .14em; color: var(--muted); margin-left: auto }
details.faq-group-d > .faq-list { padding-bottom: 22px }
.faq-tools { display: flex; gap: 10px; flex-wrap: wrap; margin: 0 0 14px }
.faq-tools button { font: 800 12px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; padding: 10px 12px; background: transparent; color: var(--text); border: 2px solid var(--edge); cursor: pointer; min-height: 44px }
.faq-tools button:hover { background: var(--hover); color: var(--ink) }
.tag-mini { display: inline-block; font-family: var(--mono); font-weight: 800; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; padding: 3px 6px; margin-right: 8px; vertical-align: 3px; background: var(--amber); color: var(--ink) }
.tag-mini.biz { background: var(--paper); border: 2px solid var(--ink) }

/* ---------- Learn ---------- */
.learn-lane { padding: 40px 0 }
.learn-lane .cards { margin-top: 6px }
.tip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px }
.tip-row a { font-family: var(--mono); font-weight: 800; font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; padding: 10px 12px; border: 2px solid var(--edge); color: var(--text) }
.tip-row a:hover { background: var(--hover); color: var(--ink) }
.answer-box { background: var(--amber); color: var(--ink); border: 3px solid var(--ink); padding: 16px 18px; font-size: 18px; font-weight: 600; max-width: 62ch; margin: 0 0 22px }
.answer-box b { font-family: var(--mono); font-weight: 800; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; display: block; margin-bottom: 4px }
.guide figure { margin: 18px 0 22px; max-width: 560px; border: 3px solid var(--ink); background: var(--paper); padding: 14px }
.guide figure svg { width: 100%; height: auto; display: block }
.guide figcaption { font-size: 14px; color: #4A4740; margin-top: 8px }
.check-list { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 8px; max-width: 62ch }
.check-list li { padding: 10px 12px 10px 46px; position: relative; border: 2px solid var(--ink); background: #fff; font-size: 16.5px }
.check-list li::before { content: ""; position: absolute; left: 12px; top: 12px; width: 20px; height: 20px; background: var(--amber); border: 2px solid var(--ink) }
.check-list b { font-weight: 800 }

/* Screen-reader-only text */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0 }
.faq-search input[type=search] {
  width: 100%; min-height: 48px; padding: 12px 14px; font: 400 17px/1.3 var(--body);
  background: var(--paper); color: var(--ink); border: 3px solid var(--amber); -webkit-appearance: none; appearance: none;
}
.faq-search input[type=search]:focus { outline: 3px solid var(--paper); outline-offset: 2px }
.faq-search input::placeholder { color: #6B665C }
.portrait picture { display: block; line-height: 0 }
@media (min-width: 800px) { .about-pair .portrait { width: 100%; max-width: 440px } }

/* About (v2): one image in the hero, one story */
.cta-poster.no-art { grid-template-columns: 1fr }
.about-hero .portrait { width: min(360px, 84vw) }
@media (min-width: 800px) { .about-hero .portrait { width: 100%; max-width: 400px; margin-left: auto } }
.story { max-width: 58ch }
.story p { font-size: 19px; line-height: 1.6 }