/* ==========================================================================
   BusinessOS - the page at the front door.

   `/pos/pos.css` is loaded first and carries the design system: colour tokens,
   buttons, panels, tables and the `[hidden]` rule. This file adds only what a
   page of prose needs on top of it.

   Built to be read rather than operated, so: one column, generous measure, and
   nothing that moves. The counter is designed for a shop under a tube light;
   this is designed for somebody deciding whether any of it is true.
   ========================================================================== */

.home {
  /* The counter is a fixed-height app; this page scrolls like a document. */
  height: auto;
  min-height: 100%;
  padding-bottom: 60px;
}

.wrap {
  width: min(1080px, calc(100% - 40px));
  margin: 0 auto;
}

section.wrap { margin-top: 56px; }

.section__title {
  margin: 0 0 8px;
  font-size: 22px;
  letter-spacing: -0.01em;
}

.section__lead {
  margin: 0 0 22px;
  max-width: 74ch;
  color: var(--muted);
  line-height: 1.6;
}
.section__subtitle { margin: 34px 0 8px; font-size: 19px; }
.section__lead--small { max-width: 78ch; font-size: 14px; }

/* --- hero -----------------------------------------------------------------
   The product is the hero image.

   An abstract mark asks a visitor to decode something before they know what
   they are looking at. A bill they recognise does the opposite - it says what
   this is in the half second before anybody reads a word. So the picture is a
   real till receipt, built in markup rather than a screenshot: it follows the
   theme, stays sharp on any display, and can never show an older build than
   the one running.
   -------------------------------------------------------------------------- */

.hero {
  /* Elevation as a token, because a shadow tuned for a dark page reads as a
     dirty smudge on a light one. Declared for all three theme states, the
     same way every colour in this product is. */
  --hero-lift:  0 26px 60px -18px rgba(0, 0, 0, 0.46);
  --hero-lift-2: 0 14px 34px -12px rgba(0, 0, 0, 0.48);
  position: relative;
  overflow: hidden;
  padding: 72px 0 78px;
  border-bottom: 1px solid var(--line);
}

/* A wash rather than a hard band. Two offset radials so the colour has a
   direction to it and the fold does not read as a flat rectangle. */
.hero__glow {
  position: absolute;
  inset: -30% -10% auto -10%;
  height: 620px;
  pointer-events: none;
  background:
    radial-gradient(560px 320px at 22% 34%,
      color-mix(in srgb, var(--accent) 20%, transparent), transparent 70%),
    radial-gradient(680px 380px at 82% 12%,
      color-mix(in srgb, var(--info) 14%, transparent), transparent 72%);
  filter: blur(6px);
}

.hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 54px;
  align-items: center;
}

/* --- left: the words ------------------------------------------------------ */

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 6px 14px 6px 11px;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  font-size: 13px;
  font-weight: 560;
  letter-spacing: 0.01em;
}

.hero__pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 70%, transparent);
  animation: hero-pulse 2.4s ease-out infinite;
}
@keyframes hero-pulse {
  70%  { box-shadow: 0 0 0 9px color-mix(in srgb, var(--accent) 0%, transparent); }
  100% { box-shadow: 0 0 0 0  color-mix(in srgb, var(--accent) 0%, transparent); }
}

.hero h1 {
  margin: 20px 0 0;
  font-size: clamp(34px, 5.4vw, 60px);
  /* Display leading, explicitly. Without it this inherits the body's 1.6 and
     a two-line headline opens up like a paragraph. */
  line-height: 1.04;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

/* The second line carries the colour, so the emphasis lands on the promise
   rather than on the subject. */
.hero__accent {
  background: linear-gradient(96deg,
    var(--accent),
    color-mix(in srgb, var(--info) 55%, var(--accent)));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
/* If a browser cannot paint clipped text it falls back to a solid accent
   rather than to transparent - an invisible headline is not an option. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .hero__accent { color: var(--accent); -webkit-text-fill-color: currentColor; background: none; }
}

.hero__line {
  margin: 18px 0 0;
  font-size: clamp(16px, 1.6vw, 18.5px);
  max-width: 52ch;
  line-height: 1.6;
  color: var(--text-2);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 11px;
  margin: 30px 0 0;
}

.hero__points {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  gap: 11px;
}
.hero__points li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
  color: var(--text-2);
}
.hero__points .icon {
  width: 17px;
  height: 17px;
  flex: none;
  padding: 3px;
  border-radius: 50%;
  color: var(--accent);
  background: var(--accent-sf);
}

/* --- right: the till ------------------------------------------------------ */

.hero__stage {
  position: relative;
  display: flex;
  justify-content: center;
  padding: 26px 0;
}

.hero__till {
  width: min(100%, 380px);
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  /* Layered rather than one big blur: a tight shadow gives the card an edge,
     the wide one lifts it off the page. A single shadow does one or the other. */
  box-shadow:
    var(--shadow-1),
    var(--hero-lift),
    0 0 0 1px color-mix(in srgb, var(--accent) 9%, transparent);
  overflow: hidden;
  animation: hero-rise .7s cubic-bezier(.2, .7, .3, 1) both;
}
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

.hero__till-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}
.hero__till-bar > span {
  width: 9px; height: 9px; border-radius: 50%;
  background: color-mix(in srgb, var(--muted) 40%, transparent);
}
.hero__till-bar em {
  margin-left: auto;
  font-style: normal;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.hero__till-body { padding: 8px 16px 16px; }

.hero__till-line {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px dashed color-mix(in srgb, var(--line) 80%, transparent);
  font-size: 13.5px;
  color: var(--muted);
}
.hero__till-line span:last-child {
  font-family: var(--mono);
  color: var(--text);
  white-space: nowrap;
}

.hero__till-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 15px 0 4px;
  font-weight: 640;
}
.hero__till-total span:last-child {
  font-family: var(--mono);
  font-size: 23px;
  letter-spacing: -0.02em;
  color: var(--accent);
}

.hero__till-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid var(--line);
}
.hero__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 7px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 560;
  color: var(--accent);
  background: var(--accent-sf);
}
.hero__chip .icon { width: 13px; height: 13px; }
.hero__kbd { font-size: 12px; color: var(--muted); }
.hero__kbd kbd {
  font-family: var(--mono);
  font-size: 11px;
  padding: 2px 6px;
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: var(--surface-2);
  color: var(--text);
}

/* The two floating notes. Absolute so they overlap the card corners - that
   overlap is what makes the stack read as depth instead of as three boxes. */
.hero__float {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 13px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(8px);
  box-shadow: var(--hero-lift-2);
  animation: hero-float 6s ease-in-out infinite;
}
.hero__float strong { display: block; font-size: 13px; letter-spacing: -0.01em; }
.hero__float span   { display: block; font-size: 11.5px; color: var(--muted); }
.hero__float .icon  { width: 19px; height: 19px; flex: none; }

.hero__float--offline { top: 4px; left: -6px; }
.hero__float--offline .icon { color: var(--warn); }

.hero__float--books {
  bottom: 6px; right: -6px;
  animation-delay: 1.6s;
}
.hero__float--books strong { color: var(--accent); }

@keyframes hero-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}

.hero__by {
  position: relative;
  margin: 52px auto 0;
  max-width: 1080px;
  padding: 0 22px;
  font-size: 12.5px;
  letter-spacing: 0.02em;
  color: var(--muted);
}
.hero__by strong { color: var(--text); font-weight: 580; }

/* One column below the point where the two would start fighting for width.
   The till stays - it is the reason the page looks like something, and a
   phone is exactly where a shopkeeper first sees this. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .hero {
    --hero-lift:   0 24px 50px -20px rgba(16, 32, 48, 0.20);
    --hero-lift-2: 0 12px 28px -10px rgba(16, 32, 48, 0.16);
  }
}
:root[data-theme="light"] .hero {
  --hero-lift:   0 24px 50px -20px rgba(16, 32, 48, 0.20);
  --hero-lift-2: 0 12px 28px -10px rgba(16, 32, 48, 0.16);
}

@media (max-width: 900px) {
  .hero { padding: 52px 0 60px; }
  .hero__grid { grid-template-columns: 1fr; gap: 40px; }
  .hero__stage { padding: 8px 0 4px; }
  .hero__float--offline { left: 0; }
  .hero__float--books { right: 0; }
  .hero__by { margin-top: 38px; }
}
@media (max-width: 520px) {
  .hero__float { display: none; }  /* overlapping a narrow card, they cover it */
}

code {
  font-family: var(--mono);
  font-size: 0.92em;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 1px 6px;
}

/* --- cards --------------------------------------------------------------- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 12px;
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px;
}

.card h3 { margin: 10px 0 6px; font-size: 16px; }
.card p { margin: 0; color: var(--muted); line-height: 1.6; font-size: 14px; }
.card p + p { margin-top: 10px; }
.card .icon { color: var(--accent); }

.card--link {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: border-color .12s ease, transform .12s ease;
}
.card--link:hover { border-color: var(--accent); transform: translateY(-1px); }

.cards--tight .card h3 { margin-top: 0; }

/* The line that says how the claim above it was checked. */
.evidence {
  margin-top: 12px !important;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-size: 12.5px !important;
  color: var(--accent) !important;
}

/* --- the one idea -------------------------------------------------------- */

.idea__claim {
  margin: 0 0 24px;
  padding: 20px 22px;
  background: var(--surface);
  border: 1px solid var(--accent);
  border-left-width: 4px;
  border-radius: 12px;
  font-size: clamp(17px, 2.6vw, 22px);
  line-height: 1.45;
}

.idea__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 26px;
}
.idea__grid h3 { margin: 0 0 8px; font-size: 15px; }
.idea__grid p { margin: 0; color: var(--muted); line-height: 1.7; }

/* --- the comparison ------------------------------------------------------ */

/*
 * The comparison is nine rows of three columns and does not usefully reflow, so
 * it keeps a minimum width and scrolls inside its own box. Without this the
 * table widens the whole document and every other section on the page acquires
 * a sideways scroll it had no reason to have.
 *
 * Defined here rather than borrowed: `.table-wrap` belongs to the office
 * screen's stylesheet, which this page does not load.
 */
.table-wrap {
  overflow-x: auto;
  max-width: 100%;
}

.compare {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  min-width: 640px;
}

.compare th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  font-weight: 600;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
}

.compare td {
  padding: 13px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  line-height: 1.55;
}

/* The left column is what is being moved away from, so it recedes. */
.compare td:first-child { color: var(--muted); width: 30%; }
.compare td:nth-child(2) { width: 34%; }
.compare td:nth-child(2) { border-left: 2px solid var(--accent); font-weight: 500; }
.compare--coverage .coverage--yes { color: var(--accent); }
.compare--coverage .coverage--gap { color: var(--warn); }
.compare td:last-child { color: var(--muted); }
.compare tbody tr:hover td { background: var(--surface); }

/* --- what it is not ------------------------------------------------------ */

.honest__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.honest__list li {
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--warn);
  border-radius: 10px;
  padding: 14px 16px;
  color: var(--muted);
  line-height: 1.65;
  font-size: 14px;
}
.honest__list strong { color: var(--text); }

/* --- footer -------------------------------------------------------------- */

.foot {
  margin-top: 56px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
}

.foot__tests {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
}
.foot__tests div { display: flex; align-items: baseline; gap: 8px; }
.foot__tests strong {
  font-family: var(--mono);
  font-size: 24px;
  color: var(--accent);
}
.foot__tests span { color: var(--muted); font-size: 13px; }

.foot__note { margin: 16px 0 0; color: var(--muted); font-size: 13px; }

.foot__links {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 18px;
}
.foot__links a { color: var(--muted); font-size: 13px; }
.foot__links a:hover { color: var(--accent); }

/* --- narrow screens ------------------------------------------------------ */

@media (max-width: 700px) {
  .hero { padding-top: 44px; }
  .hero__actions .btn { flex: 1 1 100%; }
  .foot__tests { gap: 18px; }
}

/* --- the named comparison ------------------------------------------------ */

.compare--products { min-width: 900px; }

/* The row header is the dimension being compared, so it anchors the row. */
.compare--products th[scope="row"] {
  text-align: left;
  vertical-align: top;
  padding: 13px 14px;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  white-space: nowrap;
}

.compare--products td {
  width: auto;
  color: var(--muted);
  font-size: 13px;
}
/* Undo the two-column table's rules, which do not apply to six columns. */
.compare--products td:first-child,
.compare--products td:nth-child(2),
.compare--products td:last-child { width: auto; border-left: 0; font-weight: 400; }

/* Our column is the one being argued for, so it is marked - and marked the
   same way in the rows where we come off worse, which is the point. */
.compare--products .mine {
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  border-left: 2px solid var(--accent);
  border-right: 2px solid var(--accent);
  color: var(--text);
}
.compare--products thead .mine { color: var(--accent); font-size: 12px; }
.compare--products tbody tr:last-child .mine { border-bottom: 2px solid var(--accent); }

/* Rows where the other products are ahead. Kept visually equal, not hidden. */
.compare--products tr.theyre-ahead .mine {
  background: color-mix(in srgb, var(--warn) 10%, transparent);
  border-left-color: var(--warn);
  border-right-color: var(--warn);
}
.compare--products tr.theyre-ahead th[scope="row"] { color: var(--warn); }

.caveat {
  margin: 14px 0 0;
  max-width: 80ch;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--muted);
  border-left: 2px solid var(--line);
  padding-left: 14px;
}

/* --- worth it / not worth it --------------------------------------------- */

.verdict {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 12px;
  margin-top: 26px;
}

.verdict > div {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 20px;
}
.verdict h3 { margin: 0 0 10px; font-size: 15px; }
.verdict__yes { border-top: 3px solid var(--accent); }
.verdict__yes h3 { color: var(--accent); }
.verdict__no { border-top: 3px solid var(--warn); }
.verdict__no h3 { color: var(--warn); }
.verdict ul { margin: 0; padding-left: 18px; }
.verdict li { color: var(--muted); line-height: 1.6; font-size: 14px; margin-bottom: 8px; }
.verdict li:last-child { margin-bottom: 0; }

/* --- the gap list -------------------------------------------------------- */

.gaps { display: grid; gap: 10px; margin-top: 4px; }

.gap {
  display: grid;
  grid-template-columns: 200px 1fr auto;
  gap: 16px;
  align-items: baseline;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
}
.gap__name { font-weight: 600; font-size: 14px; }
.gap__what { color: var(--muted); font-size: 13.5px; line-height: 1.6; }

/* Why it is missing matters as much as that it is missing. */
.gap__tag {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 3px 9px;
  border-radius: 20px;
  border: 1px solid var(--line);
  color: var(--muted);
  white-space: nowrap;
}
.gap__tag--build { color: var(--accent); border-color: var(--accent); }
.gap__tag--account { color: var(--warn); border-color: var(--warn); }
.gap__tag--choice { color: var(--muted); }

@media (max-width: 760px) {
  .gap { grid-template-columns: 1fr; gap: 6px; }
}

/* A gap that has since been closed stays on the list rather than quietly
   disappearing: the honest thing is to show what was missing and what was done
   about it, not to rewrite the page as though it was never missing. */
.gap--closed .gap__name { text-decoration: none; }
.gap--closed { opacity: 1; }
.gap__tag--closed {
  color: var(--ok, #57b894);
  border-color: var(--ok, #57b894);
}

/* =========================================================================
   Animated explanations
   =========================================================================
   Every animation here is CSS on inline SVG. No JavaScript, for three
   reasons that all matter:

     - the page needs no script to explain itself, so a strict CSP costs it
       nothing;
     - nothing waits for an IntersectionObserver, so the diagrams are already
       running whether or not the reader has scrolled to them;
     - a diagram that cannot fail to load cannot half-load.

   They loop for ever rather than playing once. This is a page somebody reads
   in the middle of, and an animation that already finished explains nothing.

   `prefers-reduced-motion` is honoured at the bottom, and it is not a token
   gesture: the diagrams are built so the *final* frame is the informative one,
   so freezing them still leaves the argument on screen. */

.anim {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
}
.anim svg { display: block; width: 100%; height: auto; }
.anim__caption {
  margin: 12px 0 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
}
.anim__caption strong { color: var(--text); font-weight: 600; }

/* Shared SVG vocabulary, so the diagrams read as one system. */
.d-line   { fill: none; stroke: var(--line); stroke-width: 1.5; }
.d-edge   { fill: none; stroke: var(--muted); stroke-width: 1.5; }
.d-accent { fill: none; stroke: var(--accent); stroke-width: 2; }
.d-bad    { fill: none; stroke: var(--danger); stroke-width: 2; }
.d-fill   { fill: var(--surface-2); stroke: var(--line); stroke-width: 1.5; }
.d-label  { fill: var(--muted); font: 500 11px var(--sans); }
.d-value  { fill: var(--text); font: 600 13px var(--mono); }
.d-good   { fill: var(--accent); font: 600 13px var(--mono); }
.d-wrong  { fill: var(--danger); font: 600 13px var(--mono); }
.d-title  { fill: var(--text); font: 600 12px var(--sans); }

/* --- the two-tills diagram ------------------------------------------------
   The flagship. Left column stores a balance and loses a sale; right column
   appends movements and does not. Both run off one 8s timeline so the two
   halves stay in step - the whole point is the comparison at each beat. */

.tills { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 720px) { .tills { grid-template-columns: 1fr; } }

.till-pane {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: var(--bg);
}
.till-pane--bad  { border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); }
.till-pane--good { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.till-pane h4 {
  margin: 0 0 10px; font-size: 13px; letter-spacing: .02em;
  display: flex; align-items: center; gap: 7px;
}
.till-pane--bad h4  { color: var(--danger); }
.till-pane--good h4 { color: var(--accent); }
.till-pane h4 .icon { width: 15px; height: 15px; }

/* Two sales leave two tills at the same moment. */
@keyframes sale-a { 0%,4% { opacity: 0; transform: translateY(-6px); } 10%,100% { opacity: 1; transform: none; } }
@keyframes sale-b { 0%,14% { opacity: 0; transform: translateY(-6px); } 20%,100% { opacity: 1; transform: none; } }
@keyframes fade-in-late { 0%,58% { opacity: 0; } 66%,100% { opacity: 1; } }
@keyframes strike { 0%,30% { stroke-dashoffset: 60; } 42%,100% { stroke-dashoffset: 0; } }

.till-sale-a { animation: sale-a 8s infinite; }
.till-sale-b { animation: sale-b 8s infinite; }
.till-verdict { animation: fade-in-late 8s infinite; }
.till-strike {
  stroke-dasharray: 60; stroke-dashoffset: 60;
  animation: strike 8s infinite;
}

/* --- the offline queue ---------------------------------------------------- */

@keyframes cable-cut { 0%,20% { opacity: 1; } 26%,74% { opacity: .12; } 80%,100% { opacity: 1; } }
@keyframes queue-1 { 0%,28% { opacity: 0; } 34%,78% { opacity: 1; } 88%,100% { opacity: 0; } }
@keyframes queue-2 { 0%,42% { opacity: 0; } 48%,78% { opacity: 1; } 88%,100% { opacity: 0; } }
@keyframes queue-3 { 0%,56% { opacity: 0; } 62%,78% { opacity: 1; } 88%,100% { opacity: 0; } }
@keyframes flush   { 0%,78% { opacity: 0; transform: translateX(-14px); } 90%,100% { opacity: 1; transform: none; } }

.cable   { animation: cable-cut 9s infinite; }
.queue-1 { animation: queue-1 9s infinite; }
.queue-2 { animation: queue-2 9s infinite; }
.queue-3 { animation: queue-3 9s infinite; }
.flushed { animation: flush 9s infinite; }

/* --- exact money ---------------------------------------------------------- */

@keyframes drift { 0%,25% { opacity: 0; } 35%,100% { opacity: 1; } }
.drift { animation: drift 6s infinite; }

/* -------------------------------------------------------------------------
   Motion is a preference, not a decision this page gets to make.
   Everything freezes on its last frame, which is the frame that carries the
   argument - so the diagrams still say what they were saying. */
@media (prefers-reduced-motion: reduce) {
  .anim *,
  .hero__till, .hero__float, .hero__pulse {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    stroke-dashoffset: 0 !important;
  }
}

.hero__theme { display: flex; justify-content: center; margin-bottom: 14px; }

/* --- the comparison ------------------------------------------------------ */

/* The rows this product loses. Marked rather than hidden: a comparison that
   only lists wins is an advertisement, and the three honest "no" rows are the
   reason a reader believes the rest of the table. */
.compare__loses {
  color: var(--danger) !important;
  background: var(--danger-sf);
}

.verdict {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-top: 28px;
}
.verdict > div {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
}
.verdict__yes { border-left: 3px solid var(--accent); }
.verdict__no { border-left: 3px solid var(--muted); }
.verdict h3 { margin: 0 0 10px; font-size: 15px; }
.verdict ul { margin: 0; padding-left: 18px; color: var(--muted); line-height: 1.7; font-size: 14px; }
.verdict li { margin: 4px 0; }

@media (max-width: 720px) {
  .verdict { grid-template-columns: 1fr; }
}

/* Clicking "Compare" in the sticky masthead used to land with the heading
   underneath it. The anchor keeps its own clearance rather than the header
   guessing a scroll offset in script. */
#compare { scroll-margin-top: 96px; }

/* --- the till, second on the page ---------------------------------------- */

.hero__line--second { margin-top: 12px; font-size: 15px; color: var(--muted); }

.till-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
}
.till-hero__copy h2 { margin: 0 0 14px; }
.till-hero__cta { display: flex; gap: 10px; margin-top: 24px; flex-wrap: wrap; }

/* A real bill, not a rendering of one. Kept as markup rather than an image so
   it follows the theme, scales without going soft, and cannot go stale in the
   way a screenshot of an older build does. */
.till-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-2);
  overflow: hidden;
}
.till-card__bar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 13px;
  background: var(--surface-3);
  border-bottom: 1px solid var(--line);
}
.till-card__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.till-card__where { margin-left: 6px; font-size: 12px; color: var(--muted); }
.till-card__body { padding: 16px 18px 18px; }
.till-card__row {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 8px 0; font-size: 13.5px;
  border-bottom: 1px dashed var(--line-soft);
}
.till-card__row span:last-child { font-family: var(--mono); color: var(--text-2); }
.till-card__total {
  display: flex; justify-content: space-between;
  padding: 14px 0 4px; font-weight: 700; font-size: 18px;
}
.till-card__total span:last-child { font-family: var(--mono); color: var(--accent); }
.till-card__pill {
  margin-top: 12px;
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; color: var(--accent);
  background: var(--accent-sf);
  border-radius: 20px; padding: 5px 11px;
}

@media (max-width: 860px) {
  .till-hero { grid-template-columns: 1fr; gap: 28px; }
}

/* The theme control sits in the masthead on the public site: it belongs beside
   the navigation, not in the middle of a headline block. */
.masthead__theme { margin-left: auto; margin-right: 10px; }
@media (max-width: 720px) { .masthead__theme { margin-right: 6px; } }