/* SoloBackOffice. Paper, ink and one orange accent per section.
   The paperwork itself is the decoration: a canary work order, Excel printouts on white,
   a tear-off signup form, and pencil notes in Kalam. */
/* Fonts are self-hosted (SIL Open Font License; licences are in /fonts/). Latin subset from @fontsource. */
@font-face { font-family: Figtree; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/figtree-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: Figtree; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/figtree-latin-600-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: Figtree; font-style: normal; font-weight: 800; font-display: swap; src: url(/fonts/figtree-latin-800-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: Kalam; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/kalam-latin-400-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

:root {
  --paper: #F4F1EA;
  --ink: #1B1F23;
  --orange: #F26B1D;
  --orange-text: #B4470E;  /* orange for small text on paper; #F26B1D is too light to read there */
  --muted: #5E6368;
  --body: #33383D;
  --rule: #D9D4C7;
  --canary: #F6ECBF;       /* the work order only */
  --canary-rule: #D8C98A;
  --pencil: #2F4A7A;       /* handwriting */
  --sheet: #FFFFFF;        /* printouts and the signup form */
  --flag-act: #FDE3D2;     /* the Excel file's own row shading */
  --flag-today: #FFF2B8;
  --on-ink: #C9CDD1;       /* body text on the ink bands */

  --hand: Kalam, "Bradley Hand", cursive;
  --gutter: 24px;
  --section: 96px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 16px; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: "Avenir Next", Avenir, Figtree, "Helvetica Neue", Arial, sans-serif;
  font-size: 19px;
  line-height: 1.55;
  overflow-wrap: break-word;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 2px; }
.nowrap { white-space: nowrap; }
code { font-family: inherit; font-weight: 700; background: var(--flag-act); padding: 0 4px; border-radius: 2px; }

.wrap { max-width: 1168px; margin: 0 auto; padding: 0 var(--gutter); }

/* Type scale: 15 / 17 / 19 / 23 / 30 / 40, the H1 set by clamp */
h1 { font-size: clamp(40px, 6vw, 72px); line-height: 1.02; font-weight: 800; letter-spacing: -0.025em; max-width: 13ch; text-wrap: balance; }
h2 { font-size: clamp(30px, 3.6vw, 40px); line-height: 1.1; font-weight: 800; letter-spacing: -0.015em; text-wrap: balance; }
h3 { font-size: 19px; line-height: 1.3; font-weight: 700; }
.lede { margin-top: 24px; font-size: 23px; line-height: 1.45; color: var(--body); max-width: 32em; }
.fine { font-size: 15px; line-height: 1.5; color: var(--muted); }
.small { font-size: 16px; color: var(--muted); }
.note { font-family: var(--hand); color: var(--pencil); font-size: 23px; line-height: 1.2; }

/* Header and footer */
header.top { padding: 20px 0; }
header.top .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 32px; }
.brand { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; font-weight: 700; text-decoration: none; font-size: 18px; letter-spacing: 0.2px; }
.brand img { width: 40px; height: 40px; border-radius: 50%; }
.brand b { color: var(--orange-text); font-weight: 700; }
nav.primary { display: flex; flex-wrap: wrap; gap: 0 24px; font-size: 17px; font-weight: 600; }
nav.primary a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
nav.primary a:hover, nav.primary a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 3px; text-underline-offset: 6px; }

footer { border-top: 1px solid var(--rule); padding: 32px 0 48px; color: var(--muted); font-size: 15px; }
footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 24px; }
footer .links { display: flex; flex-wrap: wrap; align-items: center; gap: 0 20px; }
footer .links a { display: inline-flex; align-items: center; min-height: 44px; }

/* Buttons and links */
.actions { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px;
  background: var(--ink); color: var(--paper); text-decoration: none; border: 0; cursor: pointer;
  font: inherit; font-weight: 700; padding: 12px 26px; border-radius: 6px;
}
.btn:hover { background: #000; }
.text-link {
  display: inline-flex; align-items: center; min-height: 44px; font-weight: 700;
  text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 3px; text-underline-offset: 6px;
}
.text-link:hover { text-decoration-color: currentColor; }

/* Shared section rhythm */
main > section { padding: var(--section) 0; }
.section-head { max-width: 40em; margin-bottom: 44px; }
.section-head p { margin-top: 14px; color: var(--body); }

/* Hero: big type on the left, the line-art scene on the right */
main > section.hero { padding: 40px 0 var(--section); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.hero-copy > p:not(.lede):not(.fine) { margin-top: 16px; color: var(--body); max-width: 34em; }
.hero-copy .fine { margin-top: 24px; max-width: 36em; }
.hero-art { position: relative; }
.hero-art figcaption { position: absolute; right: 4%; bottom: -34px; transform: rotate(-3deg); }

/* The six jobs: a route from inquiry to records */
main > section.jobs { padding-top: 24px; }
.jobs-head { max-width: 36em; }
.jobs-head p { margin-top: 12px; color: var(--body); }
.job-list { list-style: none; margin-top: 44px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.job { position: relative; }
.job > a { display: block; text-decoration: none; }
.job-icon { display: block; width: 100%; max-width: 120px; }
.job:not(.is-ready) .job-icon { opacity: 0.5; }
.job-name { display: block; margin-top: 14px; font-weight: 700; font-size: 19px; line-height: 1.25; }
.job-state { display: block; margin-top: 4px; font-size: 15px; color: var(--muted); }
.job.is-ready .job-state { color: var(--orange-text); font-weight: 700; }
.job.is-ready .job-name { text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 3px; text-underline-offset: 6px; }
.job.is-ready a:hover .job-name { text-decoration-color: currentColor; }
.job:not(:last-child)::after { /* dashed leg of the route to the next job */
  content: ""; position: absolute; top: 60px; left: 132px; right: -8px;
  border-top: 3px dashed var(--rule);
}

/* The tracker feature: the work order lies on the printout of the Leads tab */
main > section.feature { padding-top: 72px; }
.feature-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 72px; row-gap: 40px;
}
.feature-copy { grid-column: 1; grid-row: 1; align-self: start; }
.feature-copy > p { margin-top: 18px; color: var(--body); max-width: 32em; }
/* The ticket's negative bottom margin lets its last 56px lie across the printout's top edge. */
.desk { grid-column: 2; grid-row: 1; align-self: end; position: relative; z-index: 2; margin-bottom: -96px; }
.printout.feature-sheet { grid-column: 1 / -1; grid-row: 2; position: relative; z-index: 1; padding-top: 76px; transform: rotate(-0.4deg); }
.feature-flags { grid-column: 1; grid-row: 3; }
.feature-aside { grid-column: 2; grid-row: 3; align-self: end; max-width: 30em; }
.feature-aside .text-link { margin-top: 14px; }

.ticket {
  position: relative; z-index: 2; max-width: 420px; margin-left: 6%;
  background: var(--canary); border: 1px solid var(--canary-rule); border-radius: 3px;
  padding: 26px 28px 28px; font-size: 15px;
  box-shadow: 0 1px 0 var(--canary-rule), 0 18px 40px -24px rgba(27, 31, 35, 0.45);
  transform: rotate(-1.6deg);
}
.ticket::before { /* perforated tear-off edge */
  content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 8px;
  background: radial-gradient(circle at 6px -1px, var(--paper) 4px, transparent 4.5px) 0 0 / 12px 8px repeat-x;
}
.ticket-head { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 2px solid var(--ink); padding-bottom: 10px; }
.ticket-head .ticket-title { font-size: 20px; font-weight: 800; }
.ticket-head span:last-child { color: var(--muted); }
.field { display: grid; grid-template-columns: 84px 1fr; gap: 12px; padding: 12px 0 8px; border-bottom: 1px solid var(--canary-rule); align-items: end; }
.field .label { color: var(--muted); }
.hand { font-family: var(--hand); color: var(--pencil); font-size: 20px; line-height: 1.2; }
.tasks { list-style: none; margin-top: 12px; }
.tasks li { display: grid; grid-template-columns: 26px 1fr auto; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px dashed var(--canary-rule); }
.tasks .hand { font-size: 18px; }
.box { position: relative; width: 18px; height: 18px; border: 2px solid var(--ink); border-radius: 2px; background: #FFFBEA; }
.tasks li.done .box::after { /* pencil tick */
  content: ""; position: absolute; left: 3px; top: -4px; width: 7px; height: 13px;
  border: solid var(--pencil); border-width: 0 3px 3px 0; transform: rotate(40deg);
}
.tasks li.now { font-weight: 700; }
.tasks li.now .box { border-color: var(--orange); background: var(--orange); }
.tasks li.now .hand { color: var(--orange-text); }
.ticket-foot { margin-top: 12px; color: var(--muted); font-size: 13px; }

.printout { background: var(--sheet); padding: 12px; box-shadow: 0 1px 0 var(--rule), 0 16px 34px -22px rgba(27, 31, 35, 0.5); }
.printout a { display: block; }
.printout figcaption { margin-top: 10px; font-size: 15px; line-height: 1.45; color: var(--muted); }

table.flags { width: 100%; border-collapse: collapse; font-size: 16px; background: var(--sheet); }
table.flags caption { text-align: left; font-weight: 700; font-size: 19px; padding-bottom: 12px; }
table.flags th, table.flags td { text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--rule); }
table.flags th { background: var(--ink); color: var(--paper); font-weight: 700; }
table.flags td:first-child { white-space: nowrap; font-weight: 600; }
table.flags .act { background: var(--flag-act); }
table.flags .act td:first-child { color: var(--orange-text); font-weight: 800; }
table.flags .today { background: var(--flag-today); }

/* Latest guides: one lead story and three shorter ones */
main > section.guides { border-top: 1px solid var(--rule); }
.guides-head { max-width: 36em; margin-bottom: 40px; }
.guides-head p { margin-top: 12px; color: var(--body); }
.guide-list { list-style: none; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); grid-template-rows: repeat(3, auto); column-gap: 56px; row-gap: 28px; }
.guide-lead { grid-row: 1 / span 3; }
.guide > a { display: contents; text-decoration: none; }
.guide-art { display: block; }
.guide-title { display: block; font-weight: 800; line-height: 1.2; }
.guide-state { display: block; margin-top: 4px; font-size: 15px; color: var(--muted); }
.guide-lead .guide-art { width: 100%; }
.guide-lead .guide-title { margin-top: 20px; font-size: 30px; letter-spacing: -0.01em; max-width: 16ch; }
.guide:not(.guide-lead) { display: grid; grid-template-columns: 240px minmax(0, 1fr); column-gap: 24px; align-content: center; align-items: center; }
.guide:not(.guide-lead) + .guide:not(.guide-lead) { border-top: 1px solid var(--rule); padding-top: 28px; }
.guide:not(.guide-lead) .guide-art { grid-row: 1 / span 2; width: 240px; }
.guide:not(.guide-lead) .guide-title { font-size: 23px; align-self: end; }
.guide:not(.guide-lead) .guide-state { align-self: start; }
.guide a:hover .guide-title { text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 3px; text-underline-offset: 5px; }

/* Ink bands: how we test (home) and what it won't do (tracker) */
main > section.bench, main > section.limits { background: var(--ink); color: var(--paper); }
.bench-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 56px; }
.bench-head p { margin-top: 14px; color: var(--on-ink); }
.bench-head .text-link { margin-top: 18px; }
.rules, .limit-list { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 4px solid var(--orange); }
.rules li, .limit-list li { padding: 24px 24px 4px; border-left: 1px solid #3A3F45; }
.rules li:first-child, .limit-list li:first-child { border-left: 0; padding-left: 0; }
.rules h3 { font-size: 23px; }
.rules p { margin-top: 10px; color: var(--on-ink); font-size: 17px; }
.rules .applied { font-family: var(--hand); color: var(--paper); font-size: 20px; line-height: 1.25; margin-top: 16px; }
.limits h2 { max-width: 14ch; }
.limit-list { margin-top: 40px; }
.limit-list h3 { font-size: 26px; line-height: 1.2; }
.limit-list p { margin-top: 12px; color: var(--on-ink); }

/* Signup: a tear-off reply form */
.coupon {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px;
  background: var(--sheet); border: 2px dashed var(--ink); border-radius: 4px; padding: 48px;
}
.coupon-copy > p { margin-top: 14px; color: var(--body); }
.coupon-copy > .small { color: var(--muted); }
form.signup { display: grid; gap: 18px; align-content: start; }
form.signup label { display: block; font-weight: 600; font-size: 16px; margin-bottom: 6px; }
form.signup input[type=email], form.signup select {
  display: block; width: 100%; min-height: 52px; padding: 10px 14px;
  font: inherit; font-size: 18px; color: var(--ink); background-color: var(--paper);
  border: 2px solid var(--ink); border-radius: 4px;
}
form.signup select {
  appearance: none; -webkit-appearance: none; padding-right: 40px;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat;
}
.field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: end; }
form.signup .btn { background: var(--orange); color: var(--ink); justify-self: start; min-width: 200px; }
form.signup .btn:hover { background: #E05E12; }
form.signup .btn:disabled { opacity: 0.6; cursor: wait; }
.signup-status:empty { display: none; }
.signup-status { font-weight: 700; font-size: 19px; }
.signup-status.is-error { color: var(--orange-text); }
form.signup.is-done > :not(.signup-status) { display: none; }
form.signup.is-done .signup-status { font-size: 23px; line-height: 1.35; }

/* What you won't find here: crossed off the list */
.nots-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 56px; align-items: start; }
.struck { list-style: none; }
.struck li {
  font-size: clamp(24px, 3vw, 34px); font-weight: 700; line-height: 1.2; padding: 10px 0; color: var(--body);
  text-decoration: line-through; text-decoration-color: var(--orange); text-decoration-thickness: 4px;
}
.nots .note { margin-top: 28px; font-size: 26px; max-width: 22em; text-wrap: balance; transform: rotate(-1.5deg); transform-origin: left; }

/* Tracker page */
.hero-tracker h1 { max-width: 12ch; }
.flags-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: start; }
.printout-summary { transform: rotate(1deg); }
main > section.sheet-section { padding-top: 0; }
.printout .full-size { font-size: 15px; margin-top: 2px; }

.steps { list-style: none; counter-reset: step; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px; }
.steps li { counter-increment: step; border-top: 2px solid var(--ink); padding-top: 14px; }
.steps li::before { content: counter(step); display: block; font-size: 48px; font-weight: 800; line-height: 1; color: var(--orange); margin-bottom: 14px; }
.steps h3 { font-size: 21px; }
.steps p { margin-top: 8px; font-size: 17px; color: var(--body); }

main > section.tested { border-top: 1px solid var(--rule); }
.rounds { list-style: none; }
.round { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 40px; padding: 36px 0 44px; border-top: 2px solid var(--ink); }
.round-no { display: block; font-size: 15px; font-weight: 800; color: var(--muted); }
.round-what { display: block; margin-top: 4px; font-size: 26px; font-weight: 800; line-height: 1.15; letter-spacing: -0.01em; }
.round-intro { color: var(--body); max-width: 40em; }
.broke-fixed { margin-top: 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 36px; }
.broke-fixed h3 { font-size: 16px; color: var(--muted); padding-bottom: 8px; border-bottom: 1px solid var(--rule); }
.broke-fixed ul { list-style: none; }
.broke-fixed li { position: relative; padding: 12px 0 12px 30px; font-size: 17px; border-bottom: 1px solid var(--rule); }
.broke-fixed > div:first-child li::before, .broke-fixed > div:first-child li::after { /* a cross for what broke */
  content: ""; position: absolute; left: 3px; top: 23px; width: 15px; height: 3px; background: var(--ink); transform: rotate(45deg);
}
.broke-fixed > div:first-child li::after { transform: rotate(-45deg); }
.broke-fixed > div:last-child li::before { /* a tick for the fix */
  content: ""; position: absolute; left: 6px; top: 14px; width: 7px; height: 14px;
  border: solid var(--ink); border-width: 0 3px 3px 0; transform: rotate(40deg);
}
.result { margin-top: 24px; padding-left: 16px; border-left: 4px solid var(--ink); font-weight: 600; max-width: 44em; }
.before-after { margin-top: 32px; }
.ba-labels { display: grid; grid-template-columns: 854fr 40fr 1028fr; font-size: 15px; font-weight: 700; padding-bottom: 8px; }
.ba-labels span:last-child { grid-column: 3; }
.table-scroll { margin-top: 28px; overflow-x: auto; }
table.data { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 16px; background: var(--sheet); }
table.data caption { text-align: left; font-weight: 700; padding-bottom: 10px; }
table.data th, table.data td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--rule); }
table.data th { background: var(--ink); color: var(--paper); }
table.data .blank { color: var(--muted); font-style: italic; }
table.data th:nth-child(-n+4), table.data td:nth-child(n+2):nth-child(-n+4) { white-space: nowrap; }
.untested { margin-top: 12px; padding-top: 28px; border-top: 2px solid var(--ink); display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 40px; }
.untested h3 { font-size: 26px; font-weight: 800; }
.untested ul { padding-left: 1.1em; color: var(--body); }
.untested li { padding: 3px 0; }

.faq-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 56px; align-items: start; }
.faq { border-top: 2px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px;
  min-height: 60px; padding: 14px 0; font-weight: 700; font-size: 20px; line-height: 1.3;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { /* a plus that turns into a minus */
  content: ""; flex: none; width: 18px; height: 18px;
  background: linear-gradient(var(--ink), var(--ink)) center / 18px 3px no-repeat, linear-gradient(var(--ink), var(--ink)) center / 3px 18px no-repeat;
}
.faq details[open] summary::after { background: linear-gradient(var(--ink), var(--ink)) center / 18px 3px no-repeat; }
.faq details p { padding: 0 40px 22px 0; color: var(--body); max-width: 40em; }

/* Honeypot field on the signup form: off-screen for people, still in the DOM for bots */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Plain pages (subscribed, signup error) */
.col { max-width: 728px; padding-top: 40px; padding-bottom: 72px; }
.col > p { margin-top: 18px; color: var(--body); }

@media (max-width: 1080px) {
  .job-list { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 36px; }
  .job:nth-child(3)::after { display: none; }
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 36px; }
}

@media (max-width: 900px) {
  :root { --gutter: 20px; --section: 72px; }
  body { font-size: 18px; }
  .lede { font-size: 20px; }
  .hero-grid, .flags-grid, .bench-grid, .nots-grid, .faq-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .hero-art { max-width: 560px; }
  .feature-grid { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .feature-copy, .desk, .printout.feature-sheet, .feature-flags, .feature-aside { grid-column: 1; grid-row: auto; }
  .desk { margin-bottom: 0; }
  .printout.feature-sheet { margin-top: -64px; padding-top: 60px; }
  .ticket { margin-left: 0; transform: rotate(-1deg); }
  .guide-list { grid-template-columns: minmax(0, 1fr); }
  .guide-lead { grid-row: auto; }
  .coupon { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 32px 28px; }
  .round, .untested { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .broke-fixed { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .rules, .limit-list { grid-template-columns: minmax(0, 1fr); }
  .rules li, .limit-list li { border-left: 0; padding: 22px 0; border-top: 1px solid #3A3F45; }
  .rules li:first-child, .limit-list li:first-child { border-top: 0; }
}

@media (max-width: 640px) {
  :root { --gutter: 16px; --section: 60px; }
  header.top { padding: 10px 0 4px; }
  main > section.hero { padding-top: 16px; }
  h1 { letter-spacing: -0.02em; }
  .actions { margin-top: 26px; }
  .hero-art figcaption { bottom: -30px; font-size: 20px; }

  .job-list { gap: 28px 8px; margin-top: 32px; }
  .job::after, .job:not(:last-child)::after { display: none; }
  .job-name { font-size: 16px; margin-top: 8px; }
  .job-state { font-size: 15px; }

  .ticket { padding: 22px 18px 22px; }
  .field { grid-template-columns: 72px 1fr; }
  .printout.feature-sheet { margin-top: -52px; padding: 48px 8px 8px; }
  table.flags th, table.flags td { padding: 10px 10px; }

  /* Guides become a sideways row you swipe through; each scene stays at least 240px wide */
  .guide-list {
    grid-auto-flow: column; grid-template-columns: none; grid-template-rows: none;
    grid-auto-columns: minmax(250px, 80%); column-gap: 16px; row-gap: 0;
    overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 12px; scroll-padding: 0 var(--gutter);
  }
  .guide, .guide:not(.guide-lead) { display: block; scroll-snap-align: start; }
  .guide:not(.guide-lead) + .guide:not(.guide-lead) { border-top: 0; padding-top: 0; }
  .guide:not(.guide-lead) .guide-art { width: 100%; }
  .guide-lead .guide-title, .guide:not(.guide-lead) .guide-title { margin-top: 14px; font-size: 21px; }

  .coupon { padding: 26px 18px; }
  .field-pair { grid-template-columns: minmax(0, 1fr); }
  form.signup .btn { width: 100%; }
  .struck li { padding: 6px 0; font-size: 21px; }

  .steps { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .steps li { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 12px; padding: 16px 0 18px; border-top: 1px solid var(--rule); }
  .steps li:first-child { border-top: 2px solid var(--ink); }
  .steps li::before { grid-row: 1 / span 2; font-size: 36px; margin: 0; }
  .round-what { font-size: 23px; }
  .result { font-size: 17px; }
  .ba-labels { font-size: 13px; }
  .faq summary { font-size: 18px; }
  .faq details p { padding-right: 0; }
}

@media (prefers-reduced-motion: no-preference) {
  .faq details[open] p { animation: open-answer 180ms ease-out; }
  @keyframes open-answer { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
}

/* How we test, About, Privacy, 404 */
.rule-list { list-style: none; counter-reset: rule; border-top: 2px solid var(--ink); }
.rule-list li {
  counter-increment: rule; display: grid; grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 28px; align-items: start; padding: 24px 0; border-bottom: 1px solid var(--rule);
}
.rule-list li::before { content: counter(rule); grid-row: 1 / span 2; font-size: 48px; font-weight: 800; line-height: 1; color: var(--orange); }
.rule-list h3 { grid-column: 2; font-size: 23px; }
.rule-list p { grid-column: 2; margin-top: 8px; color: var(--body); max-width: 34em; }
.rule-list .rule-applied { grid-column: 3; grid-row: 1 / span 2; margin-top: 0; font-family: var(--hand); color: var(--pencil); font-size: 21px; line-height: 1.3; }
.rule-applied a { color: inherit; }
main > section.log-section { border-top: 1px solid var(--rule); }
table.data.log { min-width: 760px; }
table.data.log th:nth-child(n), table.data.log td:nth-child(n) { white-space: normal; }
table.data.log td:first-child { white-space: nowrap; }

.about-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 56px; align-items: start; }
main > section.why, main > section.wont, main > section.contact { border-top: 1px solid var(--rule); }
.prose p { color: var(--body); max-width: 36em; }
.prose p + p { margin-top: 18px; }
.prose .pull { font-size: clamp(24px, 3vw, 34px); font-weight: 700; line-height: 1.2; color: var(--ink); text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 4px; text-underline-offset: 6px; }
.plain-list { list-style: none; border-top: 2px solid var(--ink); }
.plain-list li { padding: 14px 0; border-bottom: 1px solid var(--rule); font-size: 21px; font-weight: 600; color: var(--body); }

.privacy h2 { margin-top: 48px; font-size: 30px; }
.privacy .lede { margin-bottom: 0; }
.privacy ul { margin-top: 18px; padding-left: 1.2em; color: var(--body); }
.privacy li { padding: 4px 0; }
.privacy blockquote { margin-top: 18px; padding: 4px 0 4px 18px; border-left: 4px solid var(--orange); font-weight: 600; max-width: 36em; }
.privacy h2 + p, .privacy h2 + ul { margin-top: 16px; }
.back-links { list-style: none; margin-top: 28px; }
.back-links li { border-top: 1px solid var(--rule); }
.back-links li:last-child { border-bottom: 1px solid var(--rule); }
.back-links a { display: flex; align-items: center; min-height: 52px; font-weight: 700; font-size: 21px; }

@media (max-width: 900px) {
  .about-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .rule-list li { grid-template-columns: 48px minmax(0, 1fr); }
  .rule-list li::before { font-size: 36px; }
  .rule-list .rule-applied { grid-column: 2; grid-row: auto; margin-top: 12px; }
}
@media (max-width: 640px) {
  .plain-list li { font-size: 19px; }
  .privacy h2 { font-size: 26px; }
}

/* Guides: an index of four cards and a plain reading column */
main > section.hero-solo { padding: 40px 0 56px; }
.hero-solo h1 { max-width: 16ch; }
.hero-guide h1 { max-width: 15ch; font-size: clamp(36px, 5vw, 60px); }
.crumb { font-size: 15px; font-weight: 600; margin-bottom: 12px; }
.hero-copy > p.crumb { margin-top: 0; }
.crumb a { display: inline-flex; align-items: center; min-height: 44px; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.guide-grid { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px 56px; }
.guide-grid a { display: block; text-decoration: none; }
.guide-grid .guide-art { width: 100%; }
.guide-grid .guide-title { display: block; margin-top: 16px; font-size: 26px; font-weight: 800; line-height: 1.2; }
.guide-blurb { display: block; margin-top: 8px; color: var(--body); max-width: 30em; }
.guide-grid a:hover .guide-title { text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 3px; text-underline-offset: 5px; }
.guide-more { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--rule); color: var(--body); }
main > section.guide-index { padding: 0 0 var(--section); }
main > section.article-section { padding: 0 0 var(--section); }
.article { max-width: 680px; }
.article h2 { margin-top: 56px; font-size: clamp(26px, 3.2vw, 34px); }
.article h3 { margin-top: 32px; font-size: 23px; }
.article p, .article ul, .article ol, .article blockquote, .article .table-scroll { margin-top: 16px; color: var(--body); }
.article > p:first-child { margin-top: 0; font-size: 23px; line-height: 1.45; color: var(--ink); }
.article ul, .article ol { padding-left: 1.3em; }
.article li { padding: 4px 0; padding-left: 4px; }
.article a { font-weight: 600; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.article blockquote { padding: 14px 18px; border-left: 4px solid var(--orange); background: var(--sheet); color: var(--ink); }
.article blockquote p { margin-top: 0; color: inherit; }
.article table.data { min-width: 480px; }
.article table.data th, .article table.data td { white-space: normal; }
.article .full-guide { margin-top: 56px; padding-top: 20px; border-top: 2px solid var(--ink); font-weight: 600; color: var(--ink); }
.article h2 + p, .article h3 + p { margin-top: 12px; }
@media (max-width: 900px) {
  .guide-grid { gap: 40px 32px; }
}
@media (max-width: 640px) {
  .guide-grid { grid-template-columns: minmax(0, 1fr); }
  .article > p:first-child { font-size: 21px; }
  .article h2 { margin-top: 44px; }
}
.guide-label { display: block; margin-top: 10px; font-family: var(--hand); color: var(--pencil); font-size: 21px; line-height: 1.2; }

/* The paid guide page, and its card on the home page */
.hero-product h1 { max-width: 12ch; font-size: clamp(38px, 5.4vw, 66px); }
.hero-product .lede { max-width: 28em; }
.buy { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; }
.buy-price { margin-top: 0; font-weight: 700; color: var(--muted); }
.buy-price span { font-size: 40px; font-weight: 800; line-height: 1; color: var(--ink); letter-spacing: -0.02em; }
.buy-soon {
  margin-top: 0; display: inline-flex; align-items: center; min-height: 52px; padding: 10px 22px;
  border: 2px dashed var(--ink); border-radius: 6px; font-weight: 800; color: var(--ink);
}
.price-line { margin-top: 16px; font-weight: 700; color: var(--ink); max-width: 34em; }
.hero-product .fine { margin-top: 20px; }

main > section.who, main > section.inside { border-top: 1px solid var(--rule); }
.chapter-groups { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.chapter-group h3 { font-size: 26px; font-weight: 800; }
.chapter-group > .small { margin-top: 4px; }
.chapters { list-style: none; margin-top: 18px; border-top: 2px solid var(--ink); }
.chapter {
  display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 12px; padding: 16px 0 18px;
  border-bottom: 1px solid var(--rule);
}
.chap-n { grid-row: 1 / span 3; font-size: 30px; white-space: nowrap; font-weight: 800; line-height: 1.05; color: var(--orange-text); }
.chap-title { font-weight: 800; line-height: 1.25; }
.chap-blurb { margin-top: 4px; color: var(--body); font-size: 17px; line-height: 1.45; }
.chap-label { margin-top: 6px; font-size: 15px; font-weight: 600; color: var(--muted); }
.chapter.is-tested .chap-label { color: var(--ink); font-weight: 800; text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.appendix { margin-top: 56px; }
.appendix h3 { font-size: 26px; font-weight: 800; }
.appendix ul { list-style: none; margin-top: 18px; border-top: 2px solid var(--ink); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 56px; }
.appendix li { padding: 14px 0; border-bottom: 1px solid var(--rule); }
.appendix .chap-title { display: block; }
.appendix .chap-blurb { display: block; }

main > section.honest { background: var(--ink); color: var(--paper); }
.honest-line { font-size: clamp(24px, 3vw, 32px); font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; max-width: 22em; text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 4px; text-underline-offset: 6px; }
.honest-body p + p { margin-top: 18px; color: var(--on-ink); max-width: 36em; }
.honest-body a { color: var(--paper); text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 4px; }
main > section.faq-section { border-top: 1px solid var(--rule); }

main > section.guide-promo { border-top: 1px solid var(--rule); padding: 56px 0; }
.promo-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 56px; align-items: center; }
.promo-grid p { color: var(--body); max-width: 34em; }
.promo-grid .text-link { margin-top: 10px; }

@media (max-width: 900px) {
  .chapter-groups { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .appendix ul { grid-template-columns: minmax(0, 1fr); }
  .promo-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}
@media (max-width: 640px) {
  .chapter { grid-template-columns: 44px minmax(0, 1fr); }
  .chap-n { font-size: 26px; }
  .buy-price span { font-size: 34px; }
  .buy .btn, .buy-soon { width: 100%; }
  .chapter-group h3, .appendix h3 { font-size: 23px; }
}