/* whitetape.io, the dress (templates/whitetape-dress.md, 2026-11-04). White primary, black type, charcoal bands that make the white
   cards pop. Roboto for headlines (commercial), Inter for body (a step plainer), IBM Plex Mono for the document. Addressed to the
   muscle's section ids: hero, for, who, how, care, about, revealed, states, locations, top, others. */
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@500;700&family=Inter:wght@400;500&family=IBM+Plex+Mono:wght@400;500&display=swap");
:root { --white: #FFFFFF; --ink: #111111; --charcoal-1: #2B2D31; --charcoal-2: #34373D; --charcoal-3: #3D4047; --charcoal-4: #46494F; --line: #E6E6E6; --muted: #6B6E75; --gov: #1F2A44 }
* { box-sizing: border-box }
html { background: var(--white) }
body { margin: 0; font: 400 17px/1.55 Inter, system-ui, sans-serif; color: var(--ink); background: var(--white) }
h1, h2, h3 { font-family: Roboto, system-ui, sans-serif; font-weight: 700; color: var(--ink); margin: 0; letter-spacing: -.01em }
h1 { font-size: 46px; line-height: 1.08 } h2 { font-size: 30px; line-height: 1.18; margin-bottom: 14px } h3 { font-size: 19px; font-weight: 500; margin-bottom: 6px }
p { margin: 0 0 14px } a { color: var(--ink) }
.col { max-width: 1040px; margin: 0 auto; padding: 0 24px }
header.top { padding: 18px 0; border-bottom: 1px solid var(--line); background: var(--white) } header.top .col { display: flex; align-items: center; justify-content: space-between; gap: 16px }
.mark { font: 700 18px/1 Roboto, system-ui, sans-serif; color: var(--ink); text-decoration: none; display: inline-block; padding: 9px 18px; background: url("/assets/tape.svg") no-repeat center / 100% 100%; transform: rotate(-2deg); white-space: nowrap } nav a { color: var(--ink); text-decoration: none; margin-left: 18px; font-size: 15px }
.crumbs { font-size: 14px; color: var(--muted); margin: 0 0 10px } .crumbs a { color: var(--muted); text-decoration: none }
section { padding: 56px 0 }
.label { font: 500 12px/16px Inter, system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px }
.sub { font-size: 20px; line-height: 1.45; color: var(--ink); max-width: 760px }

/* the bands: one shade darker each, white cards on them */
#for { background: var(--charcoal-1) } #who { background: var(--charcoal-2) } #how { background: var(--charcoal-3) } #care { background: var(--charcoal-4) }
#for, #who, #how, #care { color: var(--white) } #for h2, #who h2, #how h2, #care h2, #for .sub { color: var(--white) } #for .label, #who .label, #how .label, #care .label { color: rgba(255,255,255,.7) }
.three { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px }
.three > div { background: var(--white); color: var(--ink); border-radius: 14px; padding: 20px } .three > div h3 { color: var(--ink) } .three p { font-size: 15.5px; margin: 0 } .three a { color: var(--ink) }
#about, #revealed, #states, #locations, #top, #others, #hero, #faq { background: var(--white) }
.faq { max-width: 760px } .faq details { border-bottom: 1px solid var(--line); padding: 12px 0 } .faq summary { font: 500 18px Roboto, system-ui, sans-serif; cursor: pointer } .faq p { margin: 10px 0 0; color: var(--ink) }
.doc th[scope], .doc tbody th { text-align: left; background: #F4F5F8; font-weight: 500 } .doc td b { font-weight: 500 }
#hero { padding: 56px 0 48px } #hero h1 { max-width: 820px; margin-bottom: 12px }

/* the pull: a white card with a hairline, a form not a banner */
.pull { background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 20px; margin-top: 24px; display: grid; gap: 12px; max-width: 880px }
.pull .row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px }
.pull select, .pull input { font: 400 16px Inter, system-ui, sans-serif; padding: 12px 14px; border: 1px solid #CFCFCF; border-radius: 10px; background: var(--white); color: var(--ink); width: 100% }
.btn { display: inline-block; background: var(--ink); color: var(--white); font: 500 15px/1 Roboto, system-ui, sans-serif; padding: 15px 22px; border-radius: 999px; text-decoration: none; border: 0; cursor: pointer }
.btn.quiet { background: transparent; color: var(--ink); border: 1px solid var(--ink) }
.consent { font-size: 12.5px; color: var(--muted); margin: 0 }
#quote { font-size: 15px } #quote b { font: 700 30px/1.1 Roboto, system-ui, sans-serif; color: var(--ink); display: block; margin: 6px 0 }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px; margin: 24px 0 0 }
.stat { background: var(--white); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px } .stat b { display: block; font: 700 36px/1 Roboto, system-ui, sans-serif; color: var(--ink); margin-bottom: 6px } .stat span { font-size: 14px; color: var(--muted) }

/* the document: a government spreadsheet */
.doc { background: var(--white); border: 1px solid #9AA0AD; font: 400 12.5px/1.4 "IBM Plex Mono", ui-monospace, Menlo, monospace; color: #1A1A1A; overflow: auto }
.doc .dochead { background: var(--gov); color: var(--white); padding: 12px 16px; font: 500 12px/1.5 "IBM Plex Mono", ui-monospace, Menlo, monospace; letter-spacing: .06em; text-transform: uppercase }
.doc .dochead small { display: block; opacity: .8; letter-spacing: .02em; text-transform: none }
.doc table { width: 100%; border-collapse: collapse } .doc th, .doc td { border: 1px solid #CFD3DC; padding: 6px 8px; text-align: left; vertical-align: top; white-space: nowrap }
.doc th { background: #E9ECF2; font-weight: 500 } .doc td.wrap { white-space: normal; min-width: 240px; max-width: 420px }
.doc td.grey { color: transparent; text-shadow: 0 0 9px rgba(0,0,0,.55); user-select: none; position: relative; min-width: 180px } .doc td.grey::after { content: "paid row"; color: #6B7280; text-shadow: none; font-size: 10px; position: absolute; right: 8px; top: 7px }
.doc tfoot td { background: #F4F5F8; color: #4B5563; white-space: normal; font-size: 11.5px }

/* lists */
.towns { columns: 3; column-gap: 32px; font-size: 16px } .towns a { display: block; padding: 6px 0; text-decoration: none; border-bottom: 1px solid var(--line) } .towns small { color: var(--muted); margin-left: 8px }
.states { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px 24px; font-size: 16px } .states a { text-decoration: none; padding: 6px 0; border-bottom: 1px solid var(--line) } .states small { color: var(--muted); margin-left: 6px }
ul.plain { list-style: none; padding: 0; margin: 0; max-width: 520px } ul.plain li { padding: 8px 0; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; gap: 12px; font-size: 15px }
footer { padding: 40px 0 60px; font-size: 14px; color: var(--muted); border-top: 1px solid var(--line) } footer a { color: var(--muted) } footer .credit { margin: 28px 0 0; text-align: left; font-size: 13px } footer .credit a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line) }
@media (max-width: 760px) { h1 { font-size: 34px } .towns { columns: 1 } .col { padding: 0 16px } section { padding: 40px 0 } }