/* ==========================================================================
   Site chrome - the navigation, footer and page furniture shared by every
   public page.
   ==========================================================================
   The colour tokens, buttons and panels all come from /pos/pos.css, which is
   the design system for every screen in this product. Nothing here redefines
   a colour: a landing page that invents its own palette is a landing page that
   stops matching the software it is selling the first time either changes.

   Two rules this file keeps:

   1. No emoji, anywhere. Every mark is an inline stroke SVG that inherits
      `currentColor`, so it takes the theme with it and prints. An emoji is a
      font the user may not have, at a size nobody chose, in a colour nobody
      picked.

   2. Motion explains something or it does not run. Every animation on this
      site is a diagram of a mechanism the product actually implements - stock
      summing from movements, a device billing offline and syncing, a voucher
      balancing. None of it is decoration, and all of it stops for
      `prefers-reduced-motion`.
   ========================================================================== */

/* --- page shell ----------------------------------------------------------- */
body.site {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  margin: 0;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 22px; }
.wrap--narrow { max-width: 760px; }

/* --- masthead ------------------------------------------------------------- */
.masthead {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.masthead__inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 12px 22px;
  display: flex;
  align-items: center;
  gap: 18px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text);
  font-weight: 650;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.brand__mark { color: var(--accent); flex: none; }
.brand__name { font-size: 16px; }
.brand__by {
  font-size: 11px;
  color: var(--muted);
  font-weight: 500;
  letter-spacing: 0.02em;
  display: block;
  margin-top: -2px;
}

.nav { display: flex; gap: 4px; margin-left: auto; align-items: center; flex-wrap: wrap; }
.masthead__cta { flex: none; }
.nav a {
  color: var(--muted);
  text-decoration: none;
  font-size: 14px;
  padding: 7px 11px;
  border-radius: 7px;
  transition: color .15s, background .15s;
}
.nav a:hover { color: var(--text); background: var(--surface-2); }
.nav a[aria-current='page'] { color: var(--text); background: var(--surface-2); }
.nav .btn { margin-left: 6px; }

/* Every button on this site is a link, and a link is underlined by default.
   pos.css styles .btn for real <button> elements, where the question does not
   arise. */
a.btn { text-decoration: none; }

/* --- section rhythm ------------------------------------------------------- */
.band { padding: 74px 0; border-top: 1px solid var(--line); }
.band--flush { border-top: 0; }
.band--tint { background: var(--surface); }

.eyebrow {
  font-size: 12px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 650;
  margin: 0 0 10px;
}
/* The first heading of a page is its h1, the rest are h2. They are the
   same size on purpose: the level is the document structure, not the
   type scale. */
.band h1,
.band h2 { font-size: clamp(23px, 3.4vw, 34px); line-height: 1.18; margin: 0 0 14px; letter-spacing: -0.02em; }
.band h3 { font-size: 18px; margin: 0 0 8px; letter-spacing: -0.01em; }
.lead { font-size: 17px; color: var(--muted); max-width: 66ch; margin: 0 0 26px; }
.lead--tight { margin-bottom: 14px; }
.fineprint { font-size: 13px; color: var(--muted); }

/* --- the explainer: a figure beside its argument -------------------------- */
.explain {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  align-items: center;
}
.explain + .explain { margin-top: 64px; }
.explain--flip .explain__figure { order: -1; }
.explain__figure {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px;
  min-height: 220px;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.explain__figure svg { width: 100%; height: auto; max-width: 420px; display: block; }
.explain__body p { color: var(--muted); margin: 0 0 12px; }
.explain__body p strong { color: var(--text); font-weight: 600; }

@media (max-width: 820px) {
  .explain { grid-template-columns: 1fr; gap: 24px; }
  .explain--flip .explain__figure { order: 0; }
}

/* --- claim strip ---------------------------------------------------------- */
.claims { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.claim { background: var(--surface); padding: 20px 18px; }
.claim__n { font-size: 26px; font-weight: 680; letter-spacing: -0.02em; font-family: var(--mono); color: var(--accent); }
.claim__l { font-size: 13px; color: var(--muted); margin-top: 4px; }

/* --- the family of companies --------------------------------------------- */
.lineage { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.lineage__item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 20px;
}
.lineage__item .icon { color: var(--accent); }
.lineage__role { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 10px 0 4px; }
.lineage__name { font-size: 17px; font-weight: 650; margin: 0 0 8px; letter-spacing: -0.01em; }
.lineage__item p { margin: 0; font-size: 14px; color: var(--muted); }

/* --- steps ---------------------------------------------------------------- */
.steps { counter-reset: step; display: grid; gap: 14px; }
.step {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px 20px;
}
.step::before {
  counter-increment: step;
  content: counter(step);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 650;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 8px;
  width: 30px; height: 30px;
  display: grid; place-items: center;
}
.step h3 { margin: 4px 0 6px; font-size: 16px; }
.step p { margin: 0; color: var(--muted); font-size: 14px; }

/* --- footer --------------------------------------------------------------- */
.foot { border-top: 1px solid var(--line); padding: 40px 0 52px; color: var(--muted); font-size: 13px; }
.foot__grid { display: grid; grid-template-columns: 2fr repeat(2, 1fr); gap: 30px; }
.foot h4 { color: var(--text); font-size: 13px; margin: 0 0 10px; letter-spacing: 0.02em; }
.foot a { color: var(--muted); text-decoration: none; display: block; padding: 3px 0; }
.foot a:hover { color: var(--accent); }
.foot__legal { margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--line); }
@media (max-width: 700px) { .foot__grid { grid-template-columns: 1fr; gap: 22px; } }

/* ==========================================================================
   Diagram parts, shared by every animated figure.
   ==========================================================================
   Colours come from the tokens so a diagram reads correctly in both themes
   and when printed. Nothing here is a literal hex.
   ========================================================================== */
.d-line   { stroke: var(--line);    stroke-width: 1.5; fill: none; }
.d-edge   { stroke: var(--muted);   stroke-width: 1.5; fill: none; }
.d-accent { stroke: var(--accent);  stroke-width: 1.8; fill: none; }
.d-warn   { stroke: var(--warn);    stroke-width: 1.8; fill: none; }
.d-bad    { stroke: var(--danger);  stroke-width: 1.8; fill: none; }
.d-fill   { fill: var(--surface-2); stroke: var(--line); stroke-width: 1; }
.d-solid  { fill: var(--accent);    stroke: none; }
.d-text   { fill: var(--text);   font: 500 11px var(--sans); }
.d-mono   { fill: var(--text);   font: 600 12px var(--mono); }
.d-label  { fill: var(--muted);  font: 500 10px var(--sans); letter-spacing: .04em; }
.d-good   { fill: var(--accent); font: 650 13px var(--mono); }
.d-alert  { fill: var(--danger); font: 600 11px var(--mono); }

/* A stroke that draws itself. The length is set per shape with
   --len, because a single number cannot fit every path. */
.draw {
  stroke-dasharray: var(--len, 240);
  stroke-dashoffset: var(--len, 240);
  animation: draw 1.1s var(--delay, 0s) cubic-bezier(.4, 0, .2, 1) forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }

.fade { opacity: 0; animation: fade .5s var(--delay, 0s) ease forwards; }
@keyframes fade { to { opacity: 1; } }

.rise { opacity: 0; transform: translateY(6px); animation: rise .5s var(--delay, 0s) ease forwards; }
@keyframes rise { to { opacity: 1; transform: translateY(0); } }

.pulse { animation: pulse 2.4s var(--delay, 0s) ease-in-out infinite; transform-origin: center; }
@keyframes pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

/* A packet travelling along a path, for the sync figures. */
.travel { offset-path: var(--path); animation: travel 2.6s var(--delay, 0s) linear infinite; }
@keyframes travel { from { offset-distance: 0%; } to { offset-distance: 100%; } }

/* Figures start when they scroll into view rather than all at once on load,
   so a reader meets each animation at the moment they meet its argument.
   
   The gating is keyed on `.js-motion`, which site.js puts on <html> the moment
   it runs - and that ordering is the whole point. Several of these figures
   begin at `opacity: 0`, so if the pause were the default, a reader whose
   JavaScript failed, was blocked, or whose IntersectionObserver never fired
   would be left looking at empty boxes. Without the class nothing is paused,
   the animations simply play, and the diagrams are readable. The script can
   only ever make the experience better, never subtract the content. */
.js-motion .explain__figure:not(.in-view) svg * { animation-play-state: paused; }
.explain__figure.in-view svg * { animation-play-state: running; }

/* ==========================================================================
   Motion is an enhancement. Everything above must read as a still diagram
   when the reader has asked for less of it - so the end state is what is
   shown, immediately, rather than the animation being merely faster.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .draw, .fade, .rise, .pulse, .travel {
    animation: none !important;
    opacity: 1 !important;
    stroke-dashoffset: 0 !important;
    transform: none !important;
  }
  .explain__figure:not(.in-view) svg * { animation-play-state: running; }
  * { scroll-behavior: auto !important; }
}

/* ==========================================================================
   Narrow screens.
   ==========================================================================
   The masthead is the part that actually breaks. `flex-wrap` plus
   `margin-left: auto` sends every nav item onto its own line, which on a
   375px screen made a *sticky* header 184px tall - 23% of the viewport,
   following the reader down the whole page.

   So below 760px it becomes two rows: the brand, then the links as a single
   strip that scrolls sideways if it has to. Nothing is hidden behind a menu
   button - four links do not need one, and a link a reader cannot see is a
   link they will not follow.
   ========================================================================== */
@media (max-width: 760px) {
  .masthead__inner {
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 16px;
  }
  /* The button leaves the strip and sits on the brand row, so the one thing a
     reader is most likely to want is never the thing scrolled out of sight.
     The links go underneath, in a single row that slides sideways. */
  .masthead__cta { order: 1; margin-left: auto; padding: 8px 14px; font-size: 14px; }
  .nav {
    order: 2;
    width: 100%;
    margin-left: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 2px;
    /* The strip scrolls; the scrollbar itself would be furniture. */
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 2px;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { white-space: nowrap; padding: 7px 10px; font-size: 13.5px; }

  .wrap { padding: 0 16px; }
  .band { padding: 52px 0; }
  .explain + .explain { margin-top: 44px; }
  .explain__figure { padding: 14px; min-height: 0; }
  .lead { font-size: 16px; }

  /* Two across rather than one: these are short numbers, and a single column
     of four turns a glanceable strip into a scroll. */
  .claims { grid-template-columns: repeat(2, 1fr); }
  .claim { padding: 16px 14px; }
  .claim__n { font-size: 22px; }

  .step { grid-template-columns: 28px minmax(0, 1fr); gap: 12px; padding: 15px 16px; }
  .step::before { width: 26px; height: 26px; font-size: 12px; }
}

@media (max-width: 420px) {
  /* At this width the brand's second line and the nav strip are competing for
     the same glance, so the strapline steps out. The masthead still says who
     this is; every page still says it again in the footer. */
  .brand__by { display: none; }
  .claims { grid-template-columns: 1fr; }
}

/* A pointer-less screen gets targets a thumb can hit. 44px is the figure
   both platform guidelines settle on, and the nav strip is the place it
   matters most - the items sit shoulder to shoulder. */
@media (hover: none) and (max-width: 760px) {
  .nav a { min-height: 40px; display: inline-flex; align-items: center; }
  .foot a { padding: 7px 0; }
}

/* --- links ---------------------------------------------------------------
   There was no rule for a link in body copy anywhere on this site, so every
   one rendered in the browser's default blue - which on a dark page is the
   unreadable purple a visited link turns. A public site cannot leave this to
   the user agent. */

.band a:not(.btn):not(.nav a),
.hero a:not(.btn),
.lead a,
.fineprint a,
p a:not(.btn) {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent);
}
.band a:not(.btn):hover,
.lead a:hover,
.fineprint a:hover,
p a:not(.btn):hover { text-decoration-color: var(--accent); }

/* A visited link must not become a different colour: on this site every link
   goes to a page the reader may well come back to, and purple reads as broken
   rather than as informative. */
a:visited:not(.btn) { color: var(--accent); }

/* --- the note under a figure ---------------------------------------------
   These used to be `<text>` inside the SVG, and that is why they were cut off
   mid-sentence: SVG text does not wrap, so a line longer than the viewBox is
   simply clipped, and it clips differently at every zoom and in every
   translation. As HTML it wraps, it can be selected and read aloud, it scales
   with the reader's font size, and it cannot be truncated by geometry.

   The rule this follows: **the SVG draws the shapes, the HTML carries the
   prose.** Short labels inside a box are fine in SVG; a sentence never is. */

.figure-note {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 16px 0 0;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--muted);
  border-radius: var(--radius);
  background: var(--surface-2);
}
.figure-note__icon { flex: none; margin-top: 1px; color: var(--muted); }
.figure-note__icon .icon { width: 17px; height: 17px; }
.figure-note strong { display: block; font-size: 14.5px; margin-bottom: 3px; color: var(--text); }
.figure-note span { display: block; font-size: 13px; line-height: 1.6; color: var(--muted); }

/* A refusal is the strongest thing this product does, so it is coloured like
   one - the database saying no, not the page warning you. */
.figure-note--refuses { border-left-color: var(--danger); background: var(--danger-sf); }
.figure-note--refuses .figure-note__icon,
.figure-note--refuses strong { color: var(--danger); }
.figure-note--refuses span { color: var(--text-2); }

.figure-note--keeps { border-left-color: var(--accent); background: var(--accent-sf); }
.figure-note--keeps .figure-note__icon,
.figure-note--keeps strong { color: var(--accent); }
.figure-note--keeps span { color: var(--text-2); }