/* Walkaround - the page around the receipt. Same paper, same mono, one accent. */

body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.55 var(--font); overflow-x: hidden; }

.shell { max-width: 1120px; margin: 0 auto; padding: 0 20px 80px; }

.bar { border-bottom: 1px solid var(--border); background: var(--surface); }
.bar .in { max-width: 1120px; margin: 0 auto; padding: 12px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wordmark { font: 700 13px/1 var(--mono); letter-spacing: .34em; text-transform: uppercase; color: var(--text); text-decoration: none; }
.wordmark small { display: block; font: 400 9.5px/1.6 var(--mono); letter-spacing: .18em; color: var(--subtle); margin-top: 4px; }
.bar nav { display: flex; align-items: center; gap: 14px; font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.bar nav a { color: var(--muted); text-decoration: none; }
.bar nav a:hover { color: var(--text); }
.toggle { border: 1px solid var(--border); background: var(--surface-2); color: var(--muted); border-radius: 999px; font: 600 10px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: 6px 10px; cursor: pointer; }

h1 { font-size: 30px; line-height: 1.18; letter-spacing: -.015em; margin: 34px 0 10px; }
h1.mono { font: 700 26px/1.2 var(--mono); letter-spacing: -.01em; }
.lede { color: var(--muted); max-width: 62ch; margin: 0 0 22px; font-size: 16px; }
h2 { font: 600 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--subtle); margin: 40px 0 14px; }

.honest { border-left: 3px solid var(--accent); padding: 2px 0 2px 14px; color: var(--muted); font-size: 14px; max-width: 66ch; margin: 18px 0 0; }

/* ---- the hero: the offer on the left, the proof on the right ------------
   Two columns at desktop, one under 900px. The right column is a real receipt
   rather than decoration: it is built from the newest demo row, so it carries
   that row's own stamp, count and date. With no demo rows the column does not
   exist and the grid says so with .hero-single, which is a single column.
   ------------------------------------------------------------------------- */
.hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 36px; align-items: start; }
.hero.hero-single { grid-template-columns: minmax(0, 1fr); }
.heroleft { min-width: 0; }
.hero h1 { font-size: 34px; line-height: 1.14; max-width: 22ch; }
.hero .lede { margin-bottom: 20px; }
/* The one form carries the anchor the foot of the page points at. */
#check { scroll-margin-top: 18px; }
.heroright { min-width: 0; padding-top: 44px; }
.heroproof {
  display: flex; flex-direction: column; gap: 11px; min-width: 0;
  border: 1px solid var(--text); border-radius: var(--app-radius);
  background: var(--surface); padding: 18px 18px 16px;
}
.heroproof .hhost { font: 600 14px/1.3 var(--mono); letter-spacing: .01em; overflow-wrap: anywhere; word-break: break-word; }
/* The stamp is receipt.css's; only the size is set here, so there is still one
   definition of what a stamp looks like in this product. */
.heroproof .stamp { align-self: flex-start; font-size: 15px; padding: 7px 9px; letter-spacing: .1em; }
.heroproof .hmeta { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font: 500 11.5px/1.5 var(--mono); color: var(--muted); }
.heroproof .hmeta b { color: var(--text); font-weight: 700; }
.heroproof .hmeta span { color: var(--subtle); white-space: nowrap; }
.heroproof .hlink {
  align-self: flex-start; padding-bottom: 3px;
  color: var(--text); text-decoration: none; border-bottom: 1px solid var(--border);
  font: 700 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
}
.heroproof .hlink:hover { border-bottom-color: var(--text); }
.heroproof .hnote {
  margin: 3px 0 0; padding-top: 11px; border-top: 1px dotted var(--border);
  color: var(--subtle); font: 400 11px/1.7 var(--mono);
}
.heroproof .hnote b { color: var(--muted); font-weight: 700; }

/* The foot of the page: the section's own eyebrow heading, then one anchor back
   to the one form - never a second copy of it with its own fine print and
   timing caption. */
.endcta {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.endcta .btn { padding: 15px 22px; }
.endcta .hint { margin: 0; max-width: 46ch; }

/* ---- the one control on the landing page ---- */
.scanform { display: flex; gap: 8px; align-items: stretch; max-width: 640px; flex-wrap: wrap; }
.scanform .field {
  flex: 1 1 320px; min-width: 0; display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--text); border-radius: var(--app-radius); background: var(--surface); padding: 0 12px;
}
.scanform .field .scheme { font: 700 12px/1 var(--mono); color: var(--subtle); letter-spacing: .06em; }
.scanform input[type=url], .scanform input[type=text] {
  flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text);
  font: 500 14px/1 var(--mono); padding: 14px 0;
}
.btn {
  display: inline-block; border: 1px solid var(--text); border-radius: var(--app-radius);
  background: var(--text); color: var(--bg); font: 700 11px/1 var(--mono); letter-spacing: .12em;
  text-transform: uppercase; padding: 14px 18px; cursor: pointer; text-decoration: none; text-align: center;
}
.btn.ghost { background: transparent; color: var(--text); }
.btn[aria-busy="true"] { opacity: .6; }
.btn.wide { display: block; width: 100%; line-height: 1.35; padding: 12px 14px; }
.hint { color: var(--subtle); font: 400 11px/1.6 var(--mono); margin: 10px 0 0; }

/* ---- the two columns of "what it reads" ---- */
.cols { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 26px; align-items: start; }
.panel { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); padding: 16px 18px; }
.panel .ln { padding-top: 0; }
.panel .ln + .ln { border-top: 1px dotted var(--border); margin-top: 4px; }
.panel p { margin: 0 0 8px; color: var(--muted); font-size: 13.5px; }
.panel ul { margin: 0; padding-left: 18px; color: var(--muted); font-size: 13.5px; }
.panel li { margin-bottom: 6px; }
.panel .small { margin-top: 10px; }

.price { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.price .tier { border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; background: var(--surface); }
.price .tier.now { border-color: var(--text); }
.price .amt { font: 700 26px/1 var(--mono); letter-spacing: -.02em; margin: 6px 0 2px; }
.price .amt small { font: 500 11px/1 var(--mono); color: var(--subtle); letter-spacing: .1em; }
.price ul { margin: 12px 0 0; padding-left: 18px; color: var(--muted); font-size: 13.5px; }
.price li { margin-bottom: 5px; }
/* The line that stops the two paid tiers reading as a pricing mistake: what the
   one-off is for, and why the monthly is cheaper. */
.price .tiernote { margin: 12px 0 0; padding-top: 11px; border-top: 1px dotted var(--border); color: var(--muted); font-size: 13px; line-height: 1.5; }

.foot { border-top: 1px solid var(--border); margin-top: 44px; padding-top: 16px; color: var(--subtle); font: 400 11px/1.7 var(--mono); }
.foot a { color: var(--muted); }

/* ---- the demo gallery: four real receipts, printed ---- */
.gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.gcard {
  display: flex; flex-direction: column; gap: 9px; min-width: 0;
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface); padding: 14px 16px 15px;
}
/* The hostname: mono, and allowed to break rather than push the card wide. */
.gcard .ghost {
  font: 600 11.5px/1.35 var(--mono); letter-spacing: .01em; color: var(--text);
  overflow-wrap: anywhere; word-break: break-word;
}
/* The stamp is receipt.css's, printed at card size. Only the size is overridden
   here so there is one definition of what a stamp looks like. */
.gcard .stamp { align-self: flex-start; font-size: 13px; padding: 6px 8px; letter-spacing: .09em; }
.gcard .gmeta {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  font: 500 11px/1.5 var(--mono); color: var(--muted);
}
.gcard .gmeta b { color: var(--text); font-weight: 700; }
.gcard .gmeta span { color: var(--subtle); white-space: nowrap; }
.gcard .gdesc { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.gcard .glink {
  margin-top: auto; align-self: flex-start; padding-bottom: 3px;
  color: var(--text); text-decoration: none; border-bottom: 1px solid var(--border);
  font: 700 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
}
.gcard .glink:hover { border-bottom-color: var(--text); }
.gnote { color: var(--subtle); font: 400 11px/1.65 var(--mono); margin: 14px 0 0; max-width: 78ch; }

/* ---- notices, and the test-mode checkout ---- */
.notice { border: 1px solid var(--border); border-left: 3px solid var(--warn); background: var(--surface); border-radius: 8px; padding: 14px 16px; margin: 18px 0; color: var(--muted); font-size: 14px; max-width: 68ch; }
.notice b { color: var(--text); }
.notice.bad { border-left-color: var(--bad); }
.notice.good { border-left-color: var(--good); }

.testbanner {
  border: 2px dashed var(--warn); background: color-mix(in srgb, var(--warn) 12%, transparent);
  border-radius: 10px; padding: 16px 18px; margin: 20px 0;
}
.testbanner b { display: block; font: 800 15px/1.2 var(--mono); letter-spacing: .06em; color: var(--warn); text-transform: uppercase; }
.testbanner span { display: block; margin-top: 6px; color: var(--muted); font-size: 13.5px; }

.receiptpage { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; align-items: start; padding-top: 24px; }
/* The roll is 620px wide whatever the column does: it sits in the middle of
   its column rather than clinging to one edge. */
.receiptpage > div:first-child { display: flex; flex-direction: column; align-items: center; }
.side { position: sticky; top: 20px; }
.side .panel + .panel { margin-top: 14px; }
.side .btn { margin-top: 4px; }
.side .meta { font-size: 11.5px; }

.backlink { display: inline-block; margin: 18px 0 0; color: var(--muted); font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; }

/* The side rail gives way before the roll does: 620px of receipt plus a 300px
   rail needs more room than the 900px breakpoint allows, and squeezing the
   roll to fit would undo the reason it was widened. */
@media (max-width: 1000px) {
  .receiptpage { grid-template-columns: minmax(0, 1fr); }
  .receiptpage .side { position: static; }
}

@media (max-width: 900px) {
  .cols, .price, .gallery { grid-template-columns: minmax(0, 1fr); }
  /* The hero stacks: the proof follows the form rather than sitting beside it,
     and it stops pretending to be a margin note. */
  .hero { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .hero h1 { font-size: 29px; max-width: none; }
  .heroright { padding-top: 22px; }
  .side { position: static; }
}
@media (max-width: 470px) {
  .shell { padding: 0 12px 60px; }
  h1 { font-size: 23px; }
  h1.mono { font-size: 19px; }
  .hero h1 { font-size: 24px; }
  .lede { font-size: 15px; }
  .scanform .field { flex: 1 1 100%; }
  .scanform .btn { flex: 1 1 100%; }
  .panel, .price .tier { padding: 14px; }
  .heroproof { padding: 15px 15px 14px; }
  .endcta .btn { flex: 1 1 100%; }
  .bar .in { padding: 10px 12px; }
  /* The wordmark already goes home, so the first nav link is dropped rather
     than allowed to wrap into two lines beside it. */
  .bar nav a:first-child { display: none; }
  .bar nav a, .bar nav .toggle { white-space: nowrap; }
  .bar nav { gap: 10px; }
}

/* ---------------------------------------------------------------------------
   The sign-in block on the scan form. Off until it is ticked, and with it off
   the scan is the scan it always was. It sits inside the form, under the
   address, and never crowds the button.
   --------------------------------------------------------------------------- */
.scanform .signin { grid-column: 1 / -1; border: 1px solid var(--border); border-radius: var(--app-radius);
  background: var(--surface); padding: 12px 14px; text-align: left; }
.scanform .signin .tick { display: flex; gap: 9px; align-items: start; font-size: 14px; line-height: 1.5; }
.scanform .signin .tick input { width: 17px; height: 17px; margin: 2px 0 0; flex: none; }
.scanform .signin .ways { margin: 10px 0 0 26px; display: grid; gap: 9px; }
/* The ways in are inert until the box above is ticked: offering to take a
   password from somebody who has not asked for a signed-in scan invites them to
   type one into a field that would be ignored. The server ignores it either way
   (no tick means no sign-in field is read), and this is the part a person sees.
   :has() is supported everywhere current; without it the fields simply stay
   legible and the behaviour is unchanged. */
.scanform .signin:not(:has(.tick input:checked)) .ways { opacity: .42; pointer-events: none; }
.scanform .signin .way { display: flex; gap: 9px; align-items: start; font-size: 13.5px; line-height: 1.45; }
.scanform .signin .way input[type=radio] { width: 15px; height: 15px; margin: 2px 0 0; flex: none; }
.scanform .signin .way .sub { display: block; color: var(--muted); font-size: 12.5px; margin-top: 3px; }
.scanform .signin .way .in { display: block; width: 100%; max-width: 320px; margin-top: 5px; font: inherit; font-size: 13.5px;
  padding: 8px 9px; border: 1px solid var(--border); border-radius: 5px; background: var(--bg); color: var(--text); }
.scanform .signin .hint { margin: 10px 0 0 26px; font-size: 12px; line-height: 1.6; color: var(--subtle); }
@media (max-width: 520px) {
  .scanform .signin .ways, .scanform .signin .hint { margin-left: 0; }
  .scanform .signin { padding: 11px; }
}

/* The copy button the paid roll's fix paragraphs grow in the browser. It is not
   in the printed HTML at all - see receiptPage() - so the roll itself is
   unchanged and this only styles a button that exists when there is a pointer. */
.fix .copy {
  display: inline-block;
  margin: 8px 0 0 0;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--surface);
  color: var(--text);
  font: 700 10px/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
}
.fix .copy:hover { border-color: var(--text); }

/* ---------------------------------------------------------------------------
   The dashboard: the funnel read as a page rather than parsed as JSON.
   Same paper, same hairline rules, same mono figures as the receipt. The only
   grammar added here is a line with its count on the right and a sentence
   underneath saying what the number is - because a percentage printed alone is
   not a number anybody can quote.
   --------------------------------------------------------------------------- */
.dashhead { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap; margin: 34px 0 0; }
.dashhead > div:first-child { min-width: 0; }
.dashhead h1 { margin: 0 0 10px; max-width: 26ch; }
.daysel { display: flex; gap: 6px; flex-wrap: wrap; font: 700 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.daysel a {
  color: var(--muted); text-decoration: none; white-space: nowrap;
  border: 1px solid var(--border); border-radius: 999px; padding: 7px 11px; background: var(--surface);
}
.daysel a:hover { color: var(--text); border-color: var(--text); }
.daysel a[aria-current="page"] { color: var(--bg); background: var(--text); border-color: var(--text); }
.dashmeta { color: var(--subtle); font: 400 11px/1.7 var(--mono); margin: 14px 0 0; max-width: 90ch; }
.dashmeta b { color: var(--muted); font-weight: 700; }

/* The window with nothing in it. Black border, no colour: this is the state the
   page has to state rather than fill with zeros that look like a result. */
.nodata { border: 1px solid var(--text); border-radius: var(--app-radius); background: var(--surface); padding: 18px 20px; margin: 22px 0 0; }
.nodata .lab { display: block; margin-bottom: 9px; color: var(--text); }
.nodata p { margin: 0; color: var(--muted); font-size: 14px; max-width: 76ch; }
.nodata p + p { margin-top: 9px; }
.nodata b { color: var(--text); }

.dashgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); gap: 14px; align-items: start; }
.dashgrid h2 { margin-top: 30px; }
/* The dashboard's own block: a hairline box with the receipt's corners. It is
   deliberately not .panel, because .panel's paragraphs would restyle the rate
   explanations that sit inside it. */
.dashblock { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); padding: 13px 16px 15px; }
.dline { display: flex; align-items: baseline; gap: 8px; padding: 8px 0 0; }
.dline + .dline { border-top: 1px dotted var(--border); margin-top: 6px; }
.dline .nm { font-size: 13.5px; font-weight: 600; color: var(--text); }
.dline .ld { flex: 1 1 16px; min-width: 8px; border-bottom: 1px dotted var(--border); transform: translateY(-3px); }
.dline .val { font: 700 13px/1.35 var(--mono); letter-spacing: .01em; color: var(--text); white-space: nowrap; }
.dline .val.quiet { color: var(--muted); font-weight: 500; }
.dashsay { color: var(--subtle); font: 400 11px/1.65 var(--mono); margin: 12px 0 0; max-width: 88ch; }
/* The step list is counts, so it is set quieter than the rates: nothing here is
   a verdict on the funnel, it is the raw tally the rates were derived from. */
.dashsteps .dline .val { font-weight: 500; color: var(--muted); white-space: normal; }
.dashhonesty { border-top: 1px solid var(--border); margin-top: 44px; padding-top: 16px; color: var(--subtle); font: 400 11px/1.7 var(--mono); }
.dashhonesty div + div { margin-top: 5px; }
.dashhonesty b { color: var(--muted); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }

@media (max-width: 560px) {
  /* The dotted leader is a luxury at 390px: the figure wraps under the label
     rather than being pushed off the right edge. */
  .dline { flex-wrap: wrap; }
  .dline .ld { display: none; }
  .dline .val { margin-left: auto; }
  .dashhead { gap: 12px; }
  .nodata { padding: 15px 16px; }
}

/* ---- the legal pages ----------------------------------------------------
   Terms, privacy and refunds are prose, and the rest of this site is figures:
   a receipt, a price, a funnel. So they get one thing the other pages do not
   need - a measure that is comfortable to read at 390px and on paper - and
   nothing else is added to the visual language. Same tokens, same font, same
   heading rhythm as every other page: no new colour, no new rule.
   ------------------------------------------------------------------------- */
.legal { max-width: 74ch; }
.legal p { margin: 0 0 14px; max-width: 70ch; }
.legal ul { margin: 0 0 16px; padding-left: 20px; max-width: 70ch; }
.legal li { margin: 0 0 9px; }
.legal b { font-weight: 700; color: var(--text); }
.legal a { color: var(--text); }
.legal h2:first-of-type { margin-top: 26px; }
.legal-facts {
  border: 1px solid var(--border); border-radius: var(--app-radius); background: var(--surface);
  padding: 14px 16px; margin: 20px 0 0; display: grid; gap: 8px; max-width: 70ch;
}
.legal-facts div { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.legal-facts b {
  font: 600 10px/1.6 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--subtle);
  flex: 0 0 140px;
}
.legal-facts span { color: var(--text); overflow-wrap: anywhere; }
.legal-nav {
  border-top: 1px solid var(--border); margin-top: 40px; padding-top: 14px;
  font: 500 11px/1.8 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--subtle);
}
.legal-nav a { color: var(--muted); }
.legal-note { margin-top: 12px; }
.legal-note a { color: var(--muted); }

@media (max-width: 520px) {
  /* 390px: the label sits above its value rather than in a 140px column. */
  .legal-facts b { flex: 0 0 100%; }
  .legal { max-width: none; }
}

@media print {
  /* On paper the controls come off and the text goes to ink on white. A legal
     page is the one thing on this site a reader may want to keep, so it prints
     as prose: no bar, no toggle, no page counter. */
  .bar, .foot { display: none; }
  .shell { max-width: none; padding: 0; }
  .legal, .legal p, .legal ul { max-width: none; }
  .legal a { color: inherit; text-decoration: none; }
  .legal-facts { border: 1px solid #ccc; background: none; break-inside: avoid; }
  .legal h2 { break-after: avoid; }
  .legal li, .legal-facts div { break-inside: avoid; }
}