/* Countertalk (talkwithwebtraffic.net), v1.1.0. Own design system: "the shop counter".
   Type: Instrument Serif (display), Bricolage Grotesque (interface), Literata (the reading pane). All OFL, self-hosted. */
@font-face { font-family: "Instrument Serif"; src: url("fonts/instrument-serif-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("fonts/instrument-serif-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Bricolage Grotesque"; src: url("fonts/bricolage-grotesque-latin-wght-normal.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Literata"; src: url("fonts/literata-var.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; }

:root {
  --paper: #F5EFE3; --paper-2: #EDE4D2; --card: #FFFDF8; --ink: #1E1B16; --ink-2: #4A443A; --ink-3: #6E665A; --rule: #D9CDB5;
  --green: #1D4B3A; --green-2: #2C6650; --green-ink: #EAF1EC; --tomato: #C8432B; --mustard: #D9A632; --slate: #3F6E9A; --plum: #6E3A63; --leaf: #3D7A4F;
  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif; --sans: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --read: "Literata", Georgia, "Times New Roman", serif; --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --r: 14px; --r-sm: 8px; --shadow: 0 1px 0 rgba(30,27,22,.06), 0 12px 32px -18px rgba(30,27,22,.35);
  --gut: clamp(18px, 4vw, 40px); --max: 1180px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.6 var(--sans); font-optical-sizing: auto; }
img, svg { max-width: 100%; }
a { color: var(--green); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--tomato); }
:focus-visible { outline: 3px solid var(--mustard); outline-offset: 2px; border-radius: 4px; }
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--paper); padding: 8px 14px; border-radius: 6px; z-index: 9; }
.skip:focus { left: 8px; }
.mono { font-family: var(--mono); font-size: .92em; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }

/* type */
.display { font: 400 clamp(44px, 6.6vw, 86px)/0.98 var(--serif); letter-spacing: -0.01em; margin: 0 0 22px; }
.display em, .h1 em { font-style: italic; color: var(--green); }
.h1 { font: 400 clamp(38px, 5vw, 62px)/1.02 var(--serif); margin: 0 0 16px; letter-spacing: -0.005em; }
.h2 { font: 400 clamp(30px, 3.6vw, 44px)/1.08 var(--serif); margin: 0 0 14px; }
.h3 { font: 650 20px/1.3 var(--sans); margin: 0 0 8px; letter-spacing: -0.01em; }
.h4 { font: 650 17px/1.3 var(--sans); margin: 0 0 4px; }
/* v1.0.1: the eyebrow is a spoken line in a speech balloon (sentence case, tail at the lower left), not a letter-spaced label */
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font: 560 14.5px/1.2 var(--sans); letter-spacing: 0; color: var(--ink);
  background: var(--card); border: 1.5px solid var(--ink); border-radius: 18px 18px 18px 3px; padding: 7px 14px 7px 12px; margin: 0 0 18px; max-width: 100%; }
.eyebrow::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--tomato); box-shadow: 10px 0 0 var(--mustard), 20px 0 0 var(--green-2); margin-right: 20px; }
.eyebrow a { color: inherit; }
.eyebrow--light { color: var(--mustard); background: transparent; border-color: var(--mustard); }
.eyebrow--light::before { background: var(--mustard); box-shadow: 10px 0 0 var(--green-ink), 20px 0 0 var(--mustard); }
.lede { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.55; color: var(--ink-2); max-width: 40em; margin: 0 0 22px; }
small { font-size: .6em; }

/* buttons */
.btns { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 14px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 600 16px/1 var(--sans); padding: 13px 20px; border-radius: 999px; border: 2px solid transparent; text-decoration: none; cursor: pointer; transition: transform .12s ease, background .12s ease; }
.btn:active { transform: translateY(1px); }
.btn--ink { background: var(--ink); color: var(--paper); }
.btn--ink:hover { background: var(--green); color: var(--paper); }
.btn--line { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--line:hover { background: var(--ink); color: var(--paper); }
.btn--quiet { background: none; border: 0; color: var(--ink-3); text-decoration: underline; padding: 6px 0; font-weight: 500; }
.btn--danger { background: var(--tomato); color: #fff; }
.btn--danger:hover { background: #a6341f; color: #fff; }
.btn--big { padding: 17px 26px; font-size: 17px; }

/* masthead */
.mast { border-bottom: 1px solid var(--rule); background: var(--paper); }
.mast__in { max-width: var(--max); margin: 0 auto; padding: 16px var(--gut); display: flex; align-items: center; gap: 28px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.brand__mark { width: 34px; height: 30px; }
.brand__mark .mark__a { fill: var(--green); } .brand__mark .mark__b { fill: var(--mustard); } .brand__mark .mark__c { fill: var(--tomato); }
.brand__name { font: 400 30px/1 var(--serif); letter-spacing: -0.01em; }
.brand--light { color: var(--paper); }
.brand--light .mark__a { fill: var(--paper); }
.mast__nav { display: flex; gap: 22px; margin-left: auto; }
.mast__a { color: var(--ink-2); text-decoration: none; font-weight: 500; font-size: 15px; padding: 6px 0; border-bottom: 2px solid transparent; }
.mast__a:hover { color: var(--ink); border-bottom-color: var(--mustard); }
.mast__a.is-on { color: var(--ink); border-bottom-color: var(--tomato); }
.mast__cta { background: var(--green); color: var(--paper); text-decoration: none; font-weight: 600; font-size: 15px; padding: 10px 16px; border-radius: 999px; white-space: nowrap; }
.mast__cta:hover { background: var(--ink); color: var(--paper); }

/* hero */
.hero { padding: clamp(40px, 7vw, 92px) 0 0; overflow: hidden; }
.hero__in { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(28px, 5vw, 64px); align-items: end; }
.hero__words { padding-bottom: clamp(32px, 6vw, 80px); }
.hero__fine { color: var(--ink-3); font-size: 15px; margin: 0; }
.hero__counter { position: relative; align-self: stretch; display: flex; flex-direction: column; justify-content: flex-end; }
.slip { position: relative; z-index: 1; background: var(--card); border-radius: var(--r) var(--r) 0 0; padding: 22px 24px 18px; box-shadow: var(--shadow); transform: rotate(-1.4deg); margin: 0 12px -6px; border: 1px solid var(--rule); border-bottom: 0; }
.slip__head { display: flex; justify-content: space-between; align-items: baseline; font: 500 13px/1 var(--mono); color: var(--ink-3); margin: 0 0 12px; border-bottom: 1px dashed var(--rule); padding-bottom: 12px; }
.slip__score { font: 400 40px/1 var(--serif); color: var(--tomato); }
.slip__score small { font: 500 13px var(--sans); color: var(--ink-3); }
.slip__foot { margin: 12px 0 0; font-size: 13px; color: var(--ink-3); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.counter-edge { height: 54px; background: linear-gradient(180deg, var(--green-2) 0 10px, var(--green) 10px); border-radius: 10px 10px 0 0; box-shadow: inset 0 -12px 22px -12px rgba(0,0,0,.35); }

/* the reading pane: marks */
.page { font: 400 18px/1.75 var(--read); color: var(--ink); }
.page p { margin: 0 0 .85em; overflow-wrap: anywhere; }
.page--slip { font-size: 16px; line-height: 1.7; }
.m { background: none; color: inherit; padding: 0 1px; border-radius: 2px; text-decoration-line: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-skip-ink: none; }
.m::after { content: attr(data-k); font: 700 9px/1 var(--sans); vertical-align: super; margin-left: 1px; letter-spacing: 0; }
.m--jargon { text-decoration-color: var(--tomato); text-decoration-style: solid; background: rgba(200,67,43,.09); }
.m--jargon::after { color: var(--tomato); }
.m--house { text-decoration-color: var(--plum); text-decoration-style: double; background: rgba(110,58,99,.10); }
.m--house::after { color: var(--plum); }
.m--filler { text-decoration-color: var(--mustard); text-decoration-style: wavy; text-decoration-thickness: 1.5px; }
.m--filler::after { color: #94701a; }
.m--passive { text-decoration-color: var(--slate); text-decoration-style: dotted; text-decoration-thickness: 3px; }
.m--passive::after { color: var(--slate); }
.m--we { text-decoration-color: var(--plum); text-decoration-style: dashed; text-decoration-thickness: 1.5px; }
.m--we::after { color: var(--plum); }
.m--link { outline: 1.5px solid var(--green-2); outline-offset: 1px; text-decoration: none; }
.m--link::after { color: var(--green-2); }
.m--shout { background: rgba(200,67,43,.18); text-decoration: none; }
.m--shout::after { color: var(--tomato); }
.lng { background: linear-gradient(transparent 62%, rgba(217,166,50,.28) 62%); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.page.is-filtered .m { background: none; text-decoration: none; outline: 0; }
.page.is-filtered .m::after { content: none; }
.page.is-filtered .lng { background: none; }
.page[data-show="jargon"] .m--jargon, .page[data-show="house"] .m--house, .page[data-show="filler"] .m--filler, .page[data-show="passive"] .m--passive,
.page[data-show="we"] .m--we, .page[data-show="shout"] .m--shout { background: rgba(217,166,50,.35); text-decoration: underline; text-decoration-thickness: 2px; }
.page[data-show="link"] .m--link { outline: 2px solid var(--green-2); }
.page[data-show="lng"] .lng { background: linear-gradient(transparent 55%, rgba(217,166,50,.45) 55%); }

/* chips (legend letters) */
.chip { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 6px; font: 700 12px/1 var(--sans); color: #fff; vertical-align: middle; }
.chip--big { min-width: 40px; height: 40px; font-size: 18px; border-radius: 10px; }
.chip--jargon { background: var(--tomato); } .chip--house { background: var(--plum); } .chip--filler { background: var(--mustard); color: var(--ink); }
.chip--passive { background: var(--slate); } .chip--we { background: var(--plum); } .chip--link { background: var(--green-2); } .chip--shout { background: #8e2a19; }
.chip--lng { background: #b88a1f; } .chip--grade { background: var(--ink); } .chip--first { background: var(--leaf); }

/* section heads */
.sechead { max-width: 760px; margin: 0 0 34px; }
.sechead__note { color: var(--ink-3); font-size: 15px; margin: 0; }

/* before / after */
.ba { background: var(--card); padding: clamp(56px, 8vw, 104px) 0; border-top: 1px solid var(--rule); }
.ba__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 40px); }
.ba__col { border: 1px solid var(--rule); border-radius: var(--r); padding: 26px 28px 20px; background: var(--paper); }
.ba__col--after { background: #F1F5EF; border-color: #C9D9CD; }
.ba__top { display: grid; grid-template-columns: 88px 1fr; grid-template-rows: auto auto; column-gap: 16px; align-items: end; margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px dashed var(--rule); }
.ba__dial { grid-row: span 2; width: 88px; height: 50px; }
.ba__score { font: 400 52px/0.9 var(--serif); margin: 0; }
.ba__band { margin: 0; font-size: 14px; color: var(--ink-3); font-weight: 500; }
.ba__facts { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 8px 0 0; }
.ba__facts li { font-size: 13px; background: var(--card); border: 1px solid var(--rule); border-radius: 999px; padding: 4px 10px; }
.dial__track { fill: none; stroke: var(--paper-2); stroke-width: 10; stroke-linecap: round; }
.dial__fill { fill: none; stroke-width: 10; stroke-linecap: round; }
.dial__fill--good { stroke: var(--leaf); } .dial__fill--ok { stroke: var(--mustard); } .dial__fill--meh { stroke: #D9772C; } .dial__fill--low { stroke: var(--tomato); }

/* nine */
.nine { padding: clamp(56px, 8vw, 104px) 0; }
.nine__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 2px solid var(--ink); }
.nine__item { padding: 22px 22px 24px 0; border-bottom: 1px solid var(--rule); display: grid; grid-template-columns: 52px 1fr; column-gap: 12px; align-content: start; }
.nine__item .chip { grid-row: span 2; }
.nine__item p { margin: 0; color: var(--ink-2); font-size: 15px; }
.nine__more { margin: 22px 0 0; font-weight: 600; }

/* notebook band */
.nb-band { background: var(--green); color: var(--green-ink); padding: clamp(56px, 8vw, 96px) 0; }
.nb-band__in { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
.nb-band .h2 { color: #fff; }
.nb-band p { max-width: 36em; }
.steps { width: 100%; height: auto; }
.steps__g rect { fill: rgba(245,239,227,.14); stroke: rgba(245,239,227,.5); stroke-width: 1.5; }
.steps__g .steps__last { fill: var(--mustard); stroke: var(--mustard); }
.steps__t text { font: 400 34px var(--serif); fill: #fff; }
.steps__l text { font: 500 12px var(--sans); fill: var(--green-ink); }

/* prices */
.price-band { padding: clamp(56px, 8vw, 104px) 0; }
.price-band--page { padding-top: 10px; }
.plans { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 0; border: 2px solid var(--ink); border-radius: var(--r); overflow: hidden; background: var(--card); }
.plan { padding: 30px 28px; border-right: 1px solid var(--rule); position: relative; }
.plan:last-child { border-right: 0; }
.plan--plus { background: var(--ink); color: var(--paper); }
.plan__flag { position: absolute; top: 0; right: 24px; background: var(--mustard); color: var(--ink); font: 700 12px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; padding: 7px 10px; border-radius: 0 0 8px 8px; margin: 0; }
.plan__name { font: 650 18px/1.3 var(--sans); margin: 0 0 12px; }
.plan__price { font: 400 54px/1 var(--serif); margin: 0 0 6px; }
.plan__price small { font: 500 15px var(--sans); color: inherit; opacity: .75; }
.plan__alt { margin: 0 0 12px; font-size: 15px; opacity: .85; }
.plan__list { list-style: none; padding: 0; margin: 16px 0 0; }
.plan__list li { padding: 7px 0 7px 24px; border-top: 1px dashed currentColor; border-top-color: rgba(127,118,104,.35); position: relative; font-size: 15px; }
.plan__list li::before { content: ""; position: absolute; left: 2px; top: 15px; width: 11px; height: 6px; border-left: 2px solid var(--leaf); border-bottom: 2px solid var(--leaf); transform: rotate(-45deg); }
.plan--plus .plan__list li::before { border-color: var(--mustard); }
.plans__preview { margin: 18px 0 0; padding: 14px 18px; border-left: 4px solid var(--mustard); background: var(--card); border-radius: 0 var(--r-sm) var(--r-sm) 0; font-size: 15px; }

/* is not */
.isnt { padding: 0 0 clamp(56px, 8vw, 96px); }
.isnt__in { border-top: 2px solid var(--ink); padding-top: 28px; display: grid; grid-template-columns: 1fr 3fr; gap: 28px; }
.isnt__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 32px; }
.isnt__list li { color: var(--ink-2); }

/* footer: the counter */
.counter { background: var(--green); color: var(--green-ink); margin-top: 0; }
.counter__top { height: 12px; background: var(--green-2); }
.counter__in { max-width: var(--max); margin: 0 auto; padding: 44px var(--gut) 18px; display: flex; flex-wrap: wrap; gap: 28px 48px; justify-content: space-between; }
.counter__tag { font: italic 400 22px/1.3 var(--serif); margin: 12px 0 8px; color: #fff; }
.counter__price { font-size: 14px; margin: 0; opacity: .9; }
.counter__nav { display: flex; flex-wrap: wrap; gap: 10px 22px; align-content: start; }
.counter__nav a, .counter a { color: #fff; }
.counter__base { max-width: var(--max); margin: 0 auto; padding: 18px var(--gut) 32px; border-top: 1px solid rgba(234,241,236,.2); font-size: 13px; display: flex; flex-wrap: wrap; gap: 8px 32px; justify-content: space-between; }
.counter__base p { margin: 0; max-width: 62em; opacity: .9; }
.counter__powered { font-weight: 600; opacity: 1 !important; }
.counter__sep { color: var(--mustard); margin: 0 .6em; font-weight: 700; }

/* page heads */
.phead { padding: clamp(40px, 6vw, 76px) 0 clamp(24px, 4vw, 40px); }
.phead--msg { padding-bottom: clamp(56px, 8vw, 100px); }
.phead__in > * { max-width: 920px; }

/* check form */
.checkform { padding: 0 0 clamp(56px, 8vw, 96px); }
.checkform__in { display: grid; grid-template-columns: 1.6fr 1fr; gap: 36px; align-items: start; }
.cf { background: var(--card); border: 1px solid var(--rule); border-radius: var(--r); padding: 26px; box-shadow: var(--shadow); }
.seg { border: 0; padding: 0; margin: 0 0 18px; min-width: 0; position: relative; }
.seg > input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg > label { display: inline-block; padding: 10px 16px; border: 1.5px solid var(--ink); font-weight: 600; font-size: 15px; cursor: pointer; margin: 0 -1px 18px 0; background: var(--paper); }
.seg > label:first-of-type { border-radius: 999px 0 0 999px; }
.seg > label:last-of-type { border-radius: 0 999px 999px 0; }
.seg > input:checked + label { background: var(--ink); color: var(--paper); }
.seg > input:focus-visible + label { outline: 3px solid var(--mustard); outline-offset: 2px; }
.seg__panel { display: none; }
#m-paste:checked ~ .seg__panel--paste, #m-address:checked ~ .seg__panel--address { display: block; }
.cf__label { display: block; font-weight: 650; margin: 0 0 4px; }
.cf__hint { color: var(--ink-3); font-size: 15px; margin: 0 0 10px; }
.cf__text, .cf__url, .field input, .field select, .house__box, .swaps__box, .key__link { width: 100%; font: 400 17px/1.6 var(--read); color: var(--ink); background: var(--paper); border: 1.5px solid var(--ink-3); border-radius: var(--r-sm); padding: 12px 14px; }
.cf__text { min-height: 280px; resize: vertical; }
.cf__url, .field input, .field select, .key__link { font-family: var(--sans); font-size: 16px; }
.cf__text:focus, .cf__url:focus, .field input:focus, .field select:focus, .house__box:focus { outline: 3px solid var(--mustard); outline-offset: 1px; border-color: var(--ink); }
.cf__count { font-size: 14px; color: var(--ink-3); margin: 6px 0 0; }
.cf__count.is-over { color: var(--tomato); font-weight: 650; }
.cf__go { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.cf__small { color: var(--ink-3); font-size: 14px; margin: 0; max-width: 26em; }
.alert { background: #FBE7E2; border: 1px solid #E7B1A5; color: #6f1f10; padding: 12px 16px; border-radius: var(--r-sm); margin: 0 0 18px; font-weight: 500; }
.flash { background: #E7F0E9; border: 1px solid #B9D1BF; padding: 10px 14px; border-radius: var(--r-sm); margin: 14px 0 0; }
.checkform__side { display: grid; gap: 20px; }

/* ticket */
.ticket { background: var(--card); border: 1.5px dashed var(--ink-3); border-radius: 4px; padding: 18px 20px; position: relative; }
.ticket::before, .ticket::after { content: ""; position: absolute; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; background: var(--paper); border: 1.5px dashed var(--ink-3); }
.ticket::before { left: -10px; border-left-color: transparent; border-bottom-color: transparent; transform: rotate(45deg); }
.ticket::after { right: -10px; border-right-color: transparent; border-top-color: transparent; transform: rotate(45deg); }
.ticket__head { display: flex; justify-content: space-between; font: 600 12px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 10px; }
.ticket__no { font-family: var(--mono); letter-spacing: 0; }
.ticket__price { font: 400 34px/1.1 var(--serif); margin: 0 0 6px; }
.ticket__price small { font: 500 14px var(--sans); color: var(--ink-3); }
.ticket__or { font: italic 400 20px var(--serif); color: var(--ink-3); }
.ticket__note { font-size: 14px; color: var(--ink-2); margin: 0 0 8px; }
.ticket__free { margin: 0; font-size: 14px; padding-top: 8px; border-top: 1px dashed var(--rule); }
.ticket__free strong { color: var(--green); }
.sidecard { border-top: 2px solid var(--ink); padding-top: 16px; }
.sidecard__list { margin: 0; padding-left: 20px; color: var(--ink-2); }
.sidecard__list li { margin: 4px 0; }

/* report head */
.rhead { padding: clamp(36px, 5vw, 64px) 0 0; }
.rhead__in { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: end; }
.rhead__src { color: var(--ink-3); font-size: 15px; margin: 0; overflow-wrap: anywhere; }
.score { text-align: center; min-width: 220px; }
.score__dial { width: 220px; height: 124px; display: block; margin: 0 auto -48px; }
.score__num { font: 400 88px/1 var(--serif); margin: 0; letter-spacing: -0.02em; }
.score__num small { font: 500 16px var(--sans); color: var(--ink-3); letter-spacing: 0; }
.score__band { margin: 2px 0 0; font-weight: 650; color: var(--green); }
.facts { display: grid; grid-template-columns: repeat(5, 1fr); margin: 30px 0 0; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule); }
.facts div { padding: 14px 12px 14px 0; }
.facts dt { font-size: 13px; color: var(--ink-3); font-weight: 500; }
.facts dd { margin: 2px 0 0; font: 400 30px/1.1 var(--serif); }

/* desk */
.desk { padding: 30px 0 clamp(40px, 6vw, 72px); }
.desk__in { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); align-items: start; }
.desk__text .page { background: var(--card); border: 1px solid var(--rule); border-radius: var(--r); padding: clamp(20px, 3vw, 34px); box-shadow: var(--shadow); }
.legend { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.legend__b { font: 500 14px/1 var(--sans); background: var(--card); color: var(--ink); border: 1.5px solid var(--rule); border-radius: 999px; padding: 6px 12px 6px 6px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.legend__b[data-kind="all"] { padding-left: 12px; }
.legend__b.is-on { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.legend__n { font-weight: 700; opacity: .7; }
.swaps { margin: 22px 0 0; border: 1px solid var(--rule); border-radius: var(--r); background: var(--paper-2); padding: 14px 18px; }
.swaps summary { cursor: pointer; font-weight: 650; }
.swaps__note { font-size: 14px; color: var(--ink-2); }
.swaps__box { min-height: 200px; margin: 0 0 12px; background: var(--card); }
.rail { display: grid; gap: 10px; position: sticky; top: 16px; }
.ck { background: var(--card); border: 1px solid var(--rule); border-radius: 12px; border-left: 5px solid var(--leaf); }
.ck--check { border-left-color: var(--mustard); } .ck--fix { border-left-color: var(--tomato); }
.ck summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 28px 1fr auto; column-gap: 8px; row-gap: 4px; padding: 12px 14px; align-items: baseline; }
.ck summary::-webkit-details-marker { display: none; }
.ck__no { font: 400 22px/1 var(--serif); color: var(--ink-3); }
.ck__name { font-weight: 650; }
.ck__pts { font: 400 24px/1 var(--serif); }
.ck__pts small { font: 500 12px var(--sans); color: var(--ink-3); }
.ck__head { grid-column: 2 / 4; font-size: 14px; color: var(--ink-2); }
.ck__st { font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; margin-right: 4px; }
.ck--good .ck__st { color: var(--leaf); } .ck--check .ck__st { color: #94701a; } .ck--fix .ck__st { color: var(--tomato); }
.ck__bar { grid-column: 2 / 4; height: 5px; background: var(--paper-2); border-radius: 3px; overflow: hidden; }
.ck__fill { display: block; height: 100%; background: var(--ink); }
.ck__fill--0 { width: 2%; } .ck__fill--1 { width: 10%; } .ck__fill--2 { width: 20%; } .ck__fill--3 { width: 30%; } .ck__fill--4 { width: 40%; } .ck__fill--5 { width: 50%; }
.ck__fill--6 { width: 60%; } .ck__fill--7 { width: 70%; } .ck__fill--8 { width: 80%; } .ck__fill--9 { width: 90%; } .ck__fill--10 { width: 100%; }
.ck__detail { margin: 0; padding: 0 14px 10px 50px; font-size: 14px; color: var(--ink-2); }
.ck__items { list-style: none; margin: 0; padding: 0 14px 14px 50px; display: grid; gap: 4px; font-size: 14px; }
.ck__w { font-family: var(--read); font-weight: 600; overflow-wrap: anywhere; }
.ck__x { color: var(--ink-3); font-weight: 600; }
.ck__note { color: var(--ink-3); }
.rail__honest { font-size: 13px; color: var(--ink-3); margin: 6px 0 0; }

/* keep */
.keep { background: var(--paper-2); padding: clamp(40px, 6vw, 72px) 0; border-top: 1px solid var(--rule); }
.keep__in { display: grid; grid-template-columns: 1.5fr 1fr; gap: 40px; align-items: start; }
.keep__form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: end; margin-top: 16px; }
.keep__form .btn { grid-column: 1 / -1; justify-self: start; }
.field label { display: block; font-weight: 600; font-size: 14px; margin: 0 0 4px; }
.field .opt { font-weight: 400; color: var(--ink-3); }
.inline-form { margin-top: 10px; }

/* rules page */
.rules { padding: 0 0 clamp(56px, 8vw, 96px); }
.rule { display: grid; grid-template-columns: 140px 1fr; gap: 28px; padding: 28px 0; border-top: 1px solid var(--rule); }
.rule:first-child { border-top: 2px solid var(--ink); }
.rule__side { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.rule__no { font: 400 46px/1 var(--serif); color: var(--ink-3); }
.rule__pts { margin: 0; font-weight: 650; font-size: 14px; }
.rule__body { max-width: 760px; }
.rule__body p { margin: 0 0 10px; color: var(--ink-2); }
.rule__src { font-size: 15px; }
.rule--note { grid-template-columns: 1fr; background: var(--card); border: 1px solid var(--rule); border-radius: var(--r); padding: 24px 28px; margin-top: 18px; }

/* prose, faq */
.prose { padding: 0 0 clamp(56px, 8vw, 96px); }
.prose__in > * { max-width: 760px; }
.prose h2 { font: 650 20px/1.3 var(--sans); margin: 28px 0 8px; }
.prose p { color: var(--ink-2); }
.prose ul { padding-left: 1.2em; }
.prose li { color: var(--ink-2); margin: 0 0 8px; } /* v1.1.0: the privacy page's Advertising list */
.faq { margin-top: 48px; max-width: 820px; }
.faq dt { font-weight: 650; margin-top: 18px; }
.faq dd { margin: 4px 0 0; color: var(--ink-2); }

/* notebook */
.key { background: var(--card); border: 1.5px solid var(--ink); border-radius: var(--r); padding: 18px 20px; margin-top: 18px; max-width: 860px; }
.key--new { border-color: var(--green); box-shadow: 0 0 0 4px rgba(29,75,58,.15); }
.key__title { font-weight: 650; margin: 0 0 10px; }
.key__row { display: flex; gap: 10px; }
.key__link { flex: 1; min-width: 0; font-family: var(--mono); font-size: 14px; background: var(--paper); }
.key__fine { font-size: 14px; color: var(--ink-3); margin: 10px 0 0; }
.nb { padding: 10px 0 clamp(56px, 8vw, 96px); }
.nb__in { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.nb__count { font: 500 15px var(--sans); color: var(--ink-3); margin-left: 8px; }
.nb__side { display: grid; gap: 24px; }
.nbpage { background: var(--card); border: 1px solid var(--rule); border-radius: var(--r); padding: 20px 22px; margin: 0 0 18px; }
.nbpage__head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.nbpage__meta { margin: 0; font-size: 14px; color: var(--ink-3); }
.trend { display: flex; align-items: flex-end; gap: 4px; height: 44px; margin: 8px 0 12px; }
.trend__bar { width: 16px; background: var(--green-2); border-radius: 3px 3px 0 0; }
.trend__bar--0 { height: 3px; } .trend__bar--1 { height: 10%; } .trend__bar--2 { height: 20%; } .trend__bar--3 { height: 30%; } .trend__bar--4 { height: 40%; }
.trend__bar--5 { height: 50%; } .trend__bar--6 { height: 60%; } .trend__bar--7 { height: 70%; } .trend__bar--8 { height: 80%; } .trend__bar--9 { height: 90%; } .trend__bar--10 { height: 100%; }
.vt { width: 100%; border-collapse: collapse; font-size: 15px; }
.vt th, .vt td { text-align: left; padding: 9px 8px 9px 0; border-top: 1px solid var(--rule); vertical-align: top; }
.vt thead th { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); border-top: 0; }
.vt .num { text-align: right; white-space: nowrap; }
.vt__src { display: block; font-size: 12px; color: var(--ink-3); overflow-wrap: anywhere; font-weight: 400; }
.vt__act { text-align: right; }
.pill { display: inline-block; min-width: 38px; text-align: center; padding: 3px 8px; border-radius: 999px; font-weight: 700; color: #fff; }
.pill--good { background: var(--leaf); } .pill--ok { background: var(--mustard); color: var(--ink); } .pill--meh { background: #D9772C; } .pill--low { background: var(--tomato); }
.cmp, .add { background: var(--card); border: 1px solid var(--rule); border-radius: var(--r); padding: 20px 22px; margin: 0 0 18px; }
.cmp__row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: end; }
.add__meta { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin: 0 0 18px; }
.house { background: var(--card); border: 1px solid var(--rule); border-radius: var(--r); padding: 18px 20px; }
.house__hint { font-size: 14px; color: var(--ink-2); }
.house__box { font-family: var(--mono); font-size: 14px; margin: 0 0 10px; }
.danger { border: 1.5px solid #E7B1A5; border-radius: var(--r); padding: 18px 20px; background: #FDF3F0; }
.danger p { font-size: 14px; margin: 0 0 10px; }
.check { display: flex; gap: 8px; align-items: center; margin: 0 0 12px; font-size: 15px; }
.empty { color: var(--ink-3); font-style: italic; }

/* compare */
.cmpv { padding: 0 0 clamp(56px, 8vw, 96px); }
.cmpv__scores { display: flex; align-items: center; gap: 24px; margin: 0 0 28px; flex-wrap: wrap; }
.cmpv__s { display: grid; grid-template-columns: 88px auto; column-gap: 14px; align-items: end; background: var(--card); border: 1px solid var(--rule); border-radius: var(--r); padding: 14px 18px; }
.cmpv__s .ba__dial { grid-row: span 2; }
.cmpv__arrow { font: 400 48px var(--serif); margin: 0; color: var(--ink-3); }
.vt--cmp { background: var(--card); border-radius: var(--r); margin-bottom: 28px; }
.vt--cmp th[scope="row"] { font-weight: 600; }
.delta { font-weight: 700; } .delta--up { color: var(--leaf); } .delta--down { color: var(--tomato); } .delta--same { color: var(--ink-3); }
.cmpv__lists { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-bottom: 24px; }
.tags { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tag { padding: 5px 10px; border-radius: 999px; font-family: var(--read); font-size: 15px; border: 1px solid var(--rule); background: var(--card); }
.tag small { font: 500 11px var(--sans); color: var(--ink-3); }
.tag--gone { text-decoration: line-through; text-decoration-color: var(--leaf); }
.tag--new { border-color: #E7B1A5; }

/* phones and tablets */
@media (max-width: 960px) {
  .hero__in, .nb-band__in, .checkform__in, .desk__in, .keep__in, .nb__in, .isnt__in { grid-template-columns: 1fr; }
  .hero__counter { margin-top: 8px; }
  .rail { position: static; }
  .plans { grid-template-columns: 1fr; }
  .plan { border-right: 0; border-bottom: 1px solid var(--rule); }
  .plan:last-child { border-bottom: 0; }
  .nine__grid { grid-template-columns: 1fr 1fr; }
  .facts { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .mast__in { flex-wrap: wrap; gap: 10px 16px; padding-top: 12px; padding-bottom: 10px; }
  .mast__nav { order: 3; width: 100%; margin: 0; gap: 18px; overflow-x: auto; }
  .mast__cta { margin-left: auto; padding: 9px 13px; font-size: 14px; }
  .brand__name { font-size: 26px; }
  .ba__grid, .nine__grid, .isnt__list, .cmpv__lists, .add__meta, .keep__form, .cmp__row { grid-template-columns: 1fr; }
  .nine__item { padding-right: 0; }
  .slip { margin: 0 4px -6px; padding: 18px 16px 14px; }
  .rhead__in { grid-template-columns: 1fr; }
  .score { min-width: 0; justify-self: start; text-align: left; display: grid; grid-template-columns: 150px auto; align-items: end; column-gap: 14px; }
  .score__dial { width: 150px; height: 84px; margin: 0; grid-row: span 2; }
  .score__num { font-size: 64px; }
  .facts { grid-template-columns: 1fr 1fr; }
  .facts dd { font-size: 24px; }
  .rule { grid-template-columns: 1fr; gap: 10px; }
  .rule__side { flex-direction: row; align-items: center; }
  .page { font-size: 17px; }
  .vt th, .vt td { padding-right: 6px; font-size: 14px; }
  .key__row { flex-direction: column; }
  .cf { padding: 18px; }
  .seg > label { padding: 9px 12px; font-size: 14px; }
  .ck__detail, .ck__items { padding-left: 14px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
@media print {
  .mast, .counter, .keep, .legend, .swaps, .btn, .mast__cta { display: none !important; }
  body { background: #fff; }
  .desk__in { grid-template-columns: 1fr; }
  .ck { break-inside: avoid; }
  .ck[open] summary ~ * { display: block; }
}
.page[data-show="jargon"] .m--jargon::after, .page[data-show="house"] .m--house::after, .page[data-show="filler"] .m--filler::after, .page[data-show="passive"] .m--passive::after,
.page[data-show="we"] .m--we::after, .page[data-show="link"] .m--link::after, .page[data-show="shout"] .m--shout::after { content: attr(data-k); }

/* v1.1.0 AdEngine banner (adengine.us). One labelled slot between the main content and the green counter footer, on the public
   pages only (the controllers opt in). The label, the reserved height and the spacing are all on the <ins>, so when tag.js (or
   ae-size.js) hides a slot it cannot fill, the label and the space go with it and the page closes up exactly as before.
   110px = 16px label + 4px gap + 90px banner; 270px on phones (300x250). Every ad page already ends with 56-104px of paper
   padding and the counter footer has no top margin, so the slot adds space below itself only. Label: the interface sans in
   spaced capitals, --ink-3 on paper (4.9:1). display stays in this file and is never !important: tag.js hides a slot with
   style.display='none'. <ins> is underlined by default, so text-decoration is reset (the label would be underlined). */
.ae-slot { margin: 0; padding: 0 var(--gut); }
.ae-slot ins.adengine { display: block; max-width: 728px; min-height: 110px; margin: 0 auto clamp(40px, 6vw, 64px); text-align: center; text-decoration: none; }
.ae-slot ins.adengine::before { content: "Advertisement"; display: block; margin-bottom: 4px; font: 600 11px/16px var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.ae-slot ins.adengine a { display: inline-block; vertical-align: top; }
.ae-slot:has(> ins.adengine[style*="none"]) { display: none; }
@media (max-width: 767px) { .ae-slot ins.adengine { max-width: 300px; min-height: 270px; } }
@media print { .ae-slot { display: none; } }