/* DisplayFleet marketing site.
   Light and dark are both first-class, driven by prefers-color-scheme only,
   because a toggle would need script and the layout carries none. This file
   used to open by saying there is no JavaScript anywhere and that `script-src`
   is 'none'; both stopped being true when the analytics tag and vid.js were
   added, so the claim is corrected rather than left standing. The NAV still
   uses no script, deliberately: a disclosure widget is not worth a CSP change.

   Color rule for this file: every value below was measured, not chosen by eye.
   Body text clears 4.5:1 on every surface it can land on (--bg, --band,
   --surface, --accent-quiet), and anything that carries meaning as a boundary
   clears 3:1. --border is decorative hairline only; --border-strong is the one
   to use when the line itself has to be seen. */

:root {
  /* surfaces, lightest to most tinted */
  --bg: #ffffff;
  --band: #eef4fd;          /* tinted section band, gives the page its rhythm */
  --surface: #f4f8fe;
  --card: #ffffff;

  /* ink: Display navy from the brand package */
  --text: #0b1b36;          /* 17.15:1 on --bg, 15.51:1 on --band */
  --muted: #46566f;         /* 7.44:1 on --bg, 6.73:1 on --band */

  /* lines */
  --border: #d8e3f2;        /* decorative only */
  --border-strong: #6f8099; /* 4.02:1 on --bg, 3.64:1 on --band */

  /* accent. THE LOGO BLUE IS #1672F3 AND IT IS 4.43:1 ON WHITE, measured, which
     is under AA for normal-size text and under it for white-on-blue too. So the
     logo keeps its own blue (--brand-blue, used for the mark and gradients) and
     anything carrying text uses the deeper members of the same family. */
  --brand-navy: #0b1b36;
  --brand-blue: #1672f3;    /* logo blue: marks and gradients, never text */
  --accent: #1257c9;        /* 6.50:1 on --bg, 5.88:1 on --band */
  --accent-bright: #1672f3; /* fills and bullets; label text on it must be bold >=18.66px */
  --accent-strong: #0f47a1; /* hover, 8.62:1 on --bg */
  --accent-text: #ffffff;   /* 6.50:1 on --accent */
  --accent-quiet: #e6efff;  /* --accent on it is 5.62:1 */
  --teal: #0e7490;          /* 5.36:1 on --bg, 4.88:1 on --band */
  --ok: #15803d;            /* 5.02:1 on --bg, 4.57:1 on --band */

  --shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 10px 24px rgba(15, 23, 42, .07);
  --shadow-lg: 0 2px 4px rgba(15, 23, 42, .06), 0 18px 40px rgba(15, 23, 42, .10);
  --shadow-accent: 0 8px 20px rgba(22, 114, 243, .25);
  --radius: 16px;
  --radius-sm: 12px;
  --measure: 70rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* the dark background IS Display navy, #0B1B36 from the brand package */
    --bg: #0b1b36;
    --band: #12274a;
    --surface: #12274a;
    --card: #152c52;

    --text: #e9eff9;          /* 14.85:1 on --bg, 12.85:1 on --band */
    --muted: #a9bcd6;         /* 8.86:1 on --bg, 7.67:1 on --band */

    --border: #24406b;
    --border-strong: #7e91ad; /* 5.34:1 on --bg, 4.62:1 on --band */

    --brand-navy: #0b1b36;
    --brand-blue: #1672f3;
    --accent: #7cb2ff;        /* 7.90:1 on --bg, 6.83:1 on --band */
    --accent-bright: #7cb2ff;
    --accent-strong: #9cc5ff; /* hover */
    --accent-text: #08132a;   /* 8.50:1 on --accent */
    --accent-quiet: #17305a;
    --teal: #5fd4e4;          /* 10.78:1 on --bg, 9.75:1 on --band */
    --ok: #4ade80;            /* 10.81:1 on --bg */

    --shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 10px 24px rgba(0, 0, 0, .45);
    --shadow-lg: 0 2px 4px rgba(0, 0, 0, .5), 0 18px 40px rgba(0, 0, 0, .55);
    --shadow-accent: 0 8px 20px rgba(0, 0, 0, .5);
  }
}

*, *::before, *::after { box-sizing: border-box; }

/* WITHOUT THIS THE UA PAINTS LIGHT SCROLLBARS AND CONTROLS OVER THE DARK
   PAGE. Measured before adding it: getComputedStyle(document.documentElement)
   .colorScheme was `normal` in both schemes. */
html { -webkit-text-size-adjust: 100%; color-scheme: light dark; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 clamp(1.0625rem, 1.02rem + 0.22vw, 1.1875rem)/1.65 system-ui, -apple-system,
        "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  text-rendering: optimizeLegibility;
}

/* Headings carry the energy: heavy weights against a regular body. */
h1, h2, h3 { line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 .5em; }
/* The floor is 2.125rem, not 2.375rem: at 390px the old floor rendered 39.64px
   and took the hero heading to three lines. */
/* MEASURED, NOT CHOSEN. At 360px the hero heading takes a third line above
   32px, and the old floor of 2.375rem rendered 39.64px there: three lines, the
   heading alone ending 405px down an 844px screen. The floor is 1.9375rem,
   which renders 31px at 360px and 59px at 1440px. An earlier version of this
   comment named a 2.125rem floor that the rule had already moved past. */
h1 { font-size: clamp(1.9375rem, 1.35rem + 2.6vw, 4rem); font-weight: 800; letter-spacing: -0.03em; text-wrap: balance; }
h2 { font-size: clamp(1.75rem, 1.35rem + 1.5vw, 2.625rem); font-weight: 750; }
h3 { font-size: 1.1875rem; font-weight: 700; letter-spacing: -0.01em; }
p { margin: 0 0 1rem; }
ul { margin: 0 0 1rem; padding-left: 1.25rem; }
li { margin-bottom: .35rem; }
strong { font-weight: 700; }

a { color: inherit; }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Every interactive target clears the 24px minimum (WCAG 2.2, 2.5.8). */
a, summary { min-height: 24px; }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--accent);
  color: var(--accent-text);
  padding: .75rem 1rem;
  z-index: 10;
  font-weight: 700;
}
.skip:focus { left: 0; }

.wrap { width: min(100% - 2.5rem, var(--measure)); margin-inline: auto; }

/* ---------- header ---------- */

.site-header {
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 5;
}
/* NEVER WRAP. Measured on a 390px phone before this changed: the nav wrapped
   onto its own row, the header stood 187px tall, and with the hero heading the
   first 405px of an 844px screen was chrome. The section links are the part
   that goes; the two ACTIONS stay, because they are what a visitor came for and
   the sections are a scroll away on a single-column page. */
.site-header .wrap {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-height: 58px;
  flex-wrap: nowrap;
}
@media (min-width: 760px) {
  .site-header .wrap { gap: 1.5rem; min-height: 74px; }
}
.header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: .25rem;
  flex: none;
}
.brand {
  font-weight: 800;
  font-size: 1.1875rem;
  letter-spacing: -0.025em;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .5rem 0;
}
.brand-logo { height: 22px; width: auto; display: block; }
@media (min-width: 760px) { .brand-logo { height: 30px; } }
/* the dark logo file is the one with white ink, so each is hidden in the other
   scheme rather than recolored: the package forbids recoloring the parts. */
.brand-logo.for-dark { display: none; }
@media (prefers-color-scheme: dark) {
  .brand-logo.for-light { display: none; }
  .brand-logo.for-dark { display: block; }
}
.brand .mark {
  width: 26px; height: 26px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--accent-bright), var(--teal));
  display: inline-block;
  position: relative;
  flex: none;
}
.brand .mark::after {
  content: "";
  position: absolute;
  inset: 7px 6px auto 6px;
  height: 3px;
  border-radius: 2px;
  background: var(--accent-text);
  box-shadow: 0 6px 0 var(--accent-text);
}
.site-nav { display: none; }
@media (min-width: 760px) {
  .site-nav { margin-left: auto; display: flex; align-items: center; gap: .35rem; flex-wrap: nowrap; }
}
/* :not(.btn) on the BASE rule, not only on :hover. `.site-nav a` is (0,1,1) and
   `.btn-primary` is (0,1,0), so without it this paints --muted onto the blue
   header CTA: measured at 1.04:1, which is invisible. Every other primary button
   on the page rendered correctly white, which is why a palette audit of token
   pairs did not catch it and rendering the page did. */
.site-nav a:not(.btn) {
  text-decoration: none;
  color: var(--muted);
  padding: .6rem .8rem;
  border-radius: 8px;
  font-weight: 600;
}
.site-nav a.btn { text-decoration: none; }
/* :not(.btn) matters: without it this rule outranks .btn-primary:hover and paints
   white button text onto a pale tint. */
.site-nav a:not(.btn):hover { color: var(--accent); background: var(--accent-quiet); }
.site-nav a[aria-current="page"] { color: var(--text); font-weight: 700; }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .9rem 1.5rem;
  border-radius: var(--radius-sm);
  font-weight: 700;
  text-decoration: none;
  border: 2px solid transparent;
  min-height: 48px;
  transition: background-color .15s ease, border-color .15s ease,
              box-shadow .15s ease, transform .15s ease;
}
.btn-primary {
  background: var(--accent);
  color: var(--accent-text);
  box-shadow: var(--shadow-accent);
}
.btn-primary:hover { background: var(--accent-strong); transform: translateY(-1px); }
/* Secondary is the outline treatment: the accent carries it, not a gray hairline,
   so the boundary itself is 6.50:1 on --bg and 5.88:1 on --band rather than an
   invisible 1.4:1. Re-measured when --accent moved to the brand family; it said
   6.70, which was the old accent's number. */
.btn-secondary {
  background: transparent;
  color: var(--accent);
  border-color: var(--accent);
}
.btn-secondary:hover { background: var(--accent-quiet); color: var(--accent-strong); }

/* ---------- sections ---------- */

section { padding: clamp(3.5rem, 2.4rem + 4.6vw, 6.5rem) 0; }
/* Rhythm comes from alternating tinted bands, not from hairlines across the page. */
.band { background: var(--band); }
/* A section that continues the hero rather than starting a new idea, so it
   neither restates the top padding nor draws a rule across the join. */
.section-tight { padding-top: 0; }
.prose { max-width: 46rem; }
.stacked { margin-top: 1.5rem; }
.grid.stacked { margin-top: 2.25rem; }
.after-plans { margin-top: 2rem; }
.after-plans a { color: var(--accent); font-weight: 600; }
.section-head { max-width: 48rem; margin-bottom: 3rem; }
.section-head p { color: var(--muted); font-size: 1.125rem; margin-bottom: 0; }
.section-head a { color: var(--accent); font-weight: 600; }
.eyebrow {
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .8125rem;
  font-weight: 800;
  color: var(--teal);
  margin-bottom: .75rem;
}

/* ---------- hero ---------- */

.hero {
  padding-top: clamp(3rem, 2rem + 4vw, 5.5rem);
  background: linear-gradient(180deg, var(--band) 0%, var(--bg) 85%);
}
.hero .lede {
  font-size: clamp(1.1875rem, 1.05rem + .7vw, 1.5rem);
  color: var(--muted);
  max-width: 42rem;
  margin-bottom: 2rem;
  line-height: 1.55;
}
.hero h1 { max-width: 20ch; }
.cta-row { display: flex; flex-wrap: wrap; gap: .85rem; align-items: center; }
.cta-note { color: var(--muted); font-size: .9375rem; margin: 1.25rem 0 0; }

/* ---------- media / screenshots ---------- */

figure { margin: 0; }
.shot {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--card);
  box-shadow: var(--shadow-lg);
}
.shot img { display: block; width: 100%; height: auto; }
figcaption { color: var(--muted); font-size: .9375rem; margin-top: .75rem; }

.hero-figure { margin-top: 3.5rem; }
.figure-wide { margin-top: 3rem; }

/* Visually hidden, still announced. Nothing uses it since the pricing
   comparison table was deleted; kept because an accessibility utility is
   cheaper to keep than to reinvent badly. */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- grids ---------- */

.grid { display: grid; gap: 1.5rem; }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr)); }

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.75rem;
  box-shadow: var(--shadow);
  transition: box-shadow .15s ease, transform .15s ease;
}
.card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.card h3 { margin-bottom: .5rem; }
.card p:last-child { margin-bottom: 0; }
.card p { color: var(--muted); }

/* ---------- steps ---------- */

.steps { counter-reset: step; list-style: none; padding: 0; }
.steps li {
  counter-increment: step;
  padding-left: 3.75rem;
  position: relative;
  margin-bottom: 2.25rem;
}
.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: -2px;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-text);
  font-weight: 800;
  font-size: 1.0625rem;
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-accent);
}
.steps h3 { margin-bottom: .3rem; }
.steps p { color: var(--muted); margin-bottom: 0; }

/* ---------- feature list ---------- */

.feature-list { list-style: none; padding: 0; display: grid; gap: 1.75rem 2.5rem; }
.feature-list > li { padding-left: 2rem; position: relative; margin: 0; }
.feature-list > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .5em;
  width: .85rem;
  height: .85rem;
  border-radius: 4px;
  background: linear-gradient(135deg, var(--accent-bright), var(--teal));
}
.feature-list h3 { margin-bottom: .25rem; }
.feature-list p { color: var(--muted); margin-bottom: 0; }

/* ---------- pricing ---------- */

.plans { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); align-items: start; }

/* ONE PLAN. auto-fit stretches a lone card across the whole grid, which reads as
   a layout that broke rather than as a price, so the single-plan pages pin the
   column width and center it. Written `.plans.plans-one` rather than
   `.plans-one`: both pages carry BOTH classes, the two selectors have equal
   specificity, and a bare class would win only by source order, which is one
   reordering away from silently reverting. */
.plans.plans-one { grid-template-columns: minmax(0, 24rem); justify-content: center; }

/* The included list replaces the three-column comparison table. Two columns
   where there is room, one on a phone, and no min-width, so unlike the table it
   never forces a horizontal scroller. */
.included { list-style: none; padding: 0; margin: 0; display: grid; gap: .85rem 2rem;
            grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); }
.included li { padding-left: 1.6rem; position: relative; color: var(--muted); }
.included li::before {
  content: "";
  position: absolute;
  left: .1rem;
  top: .5em;
  width: .6rem;
  height: .6rem;
  border-radius: 50%;
  background: var(--ok);
}
.plan {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem;
  background: var(--card);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  height: 100%;
}
.plan.featured {
  border-color: var(--accent);
  border-width: 2px;
  box-shadow: var(--shadow-lg);
}
.plan ul { list-style: none; padding: 0; margin: 0 0 1.75rem; }
.plan li { padding-left: 1.6rem; position: relative; color: var(--muted); }
.plan li::before {
  content: "";
  position: absolute;
  left: .1rem;
  top: .5em;
  width: .6rem;
  height: .6rem;
  border-radius: 50%;
  background: var(--ok);
}
.plan .btn { margin-top: auto; width: 100%; }

/* ---------- FAQ ---------- */

.faq { max-width: 48rem; }
.faq details {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  padding: .1rem 1.25rem;
  margin-bottom: .85rem;
}
.faq summary {
  cursor: pointer;
  font-weight: 700;
  padding: .95rem 2rem .95rem 0;
  position: relative;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute;
  right: .35rem;
  top: 1.45rem;
  width: .55rem;
  height: .55rem;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(45deg);
}
.faq details[open] summary::after { transform: rotate(-135deg); top: 1.65rem; }
.faq details[open] summary { color: var(--accent); }
.faq details p { color: var(--muted); margin: 0 0 1rem; }

/* ---------- callout ---------- */

.callout {
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 5px solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 1.6rem;
  box-shadow: var(--shadow);
}
.callout h3 { margin-bottom: .4rem; }
.callout p:last-child { margin-bottom: 0; color: var(--muted); }

.cta-band {
  background: linear-gradient(135deg, var(--accent-quiet), var(--surface));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: clamp(2.5rem, 1.5rem + 3vw, 4rem);
  text-align: center;
  box-shadow: var(--shadow);
}
.cta-band h2 { margin-bottom: .5rem; }
.cta-band p { color: var(--muted); max-width: 36rem; margin-inline: auto; font-size: 1.125rem; }
.cta-band .cta-row { justify-content: center; margin-top: 1.75rem; }
.cta-band .btn-secondary { background: var(--bg); }
.cta-band .btn-secondary:hover { background: var(--accent-quiet); }

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

.site-footer {
  border-top: 1px solid var(--border);
  background: var(--band);
  padding: 3.5rem 0;
  color: var(--muted);
  font-size: .9375rem;
}
.footer-grid { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.site-footer h2 { font-size: .8125rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text); margin-bottom: .85rem; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: .45rem; }
.site-footer a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; padding: .2rem 0; display: inline-block; }
.site-footer a:hover { color: var(--accent); }
.legal-line { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border); }
.legal-line p { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .card:hover, .btn-primary:hover { transform: none; }
}

/* ===========================================================================
   Board examples, header actions and the price block.
   Added 2026-09-21 with the rebuild around the editor, the three steps and the
   per-location price.
   =========================================================================== */

/* The two header actions never leave the bar, at any width. The section links
   are what goes on a phone; see the .site-header .wrap note above. */
.nav-signin {
  text-decoration: none;
  color: var(--muted);
  font-weight: 600;
  padding: .5rem .45rem;
  border-radius: 8px;
  white-space: nowrap;
  font-size: .9375rem;
}
.nav-signin:hover { color: var(--text); background: var(--accent-quiet); }
.btn-sm {
  padding: .55rem .85rem;
  min-height: 40px;
  font-size: .875rem;
  white-space: nowrap;
}
@media (min-width: 760px) {
  .btn-sm { padding: .75rem 1.25rem; min-height: 44px; font-size: 1rem; }
}

.boards {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
  margin-top: 2.5rem;
}
@media (min-width: 52rem) {
  .boards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem; }
}
.board-card { margin: 0; }
/* The portrait board is 9:16. Left at the column width it would stand roughly
   twice the height of its neighbors and drag the whole grid with it, so it is
   capped and centered instead. */
.board-card.portrait .shot {
  max-width: 20rem;
  margin-inline: auto;
}
.board-card figcaption { text-align: center; }

.price-block { text-align: center; }
.price-big {
  font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.75rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 1.25rem;
}
.price-big strong {
  font-weight: 900;
  color: var(--accent);
}
.price-points {
  list-style: none;
  padding: 0;
  margin: 0 0 2rem;
  color: var(--muted);
  font-size: 1.0625rem;
}
.price-points li { margin-bottom: .4rem; }
.price-block .cta-row { justify-content: center; }

/* The three steps read as a column of near-empty rows on a wide screen, so they
   become columns once there is room. The numbered ::before markers are absolute
   inside each li, so the grid does not disturb them. */
@media (min-width: 60rem) {
  .steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2.5rem;
  }
  .steps li { margin-bottom: 0; }
}

/* The price section is centered; its heading was not, which read as a mistake. */
#pricing .section-head { text-align: center; }
#pricing .section-head p { margin-inline: auto; }

/* ===========================================================================
   Fixes from a measured design review, 2026-09-21. Every number below came
   from pixels in a render, not from judgement.
   =========================================================================== */

/* D1/D2. THE PRICE SECTION CENTERED TWO THINGS ON TWO DIFFERENT AXES.
   `.section-head` is max-width 48rem and left-anchored, so its heading centered
   on x=517.5 while the price line and the button centered on the container at
   x=719: the heading sat 203px left of everything beneath it, in the section
   that asks for money. One axis now. */
#pricing .section-head,
.price-block { max-width: 48rem; margin-inline: auto; }
#pricing .section-head { text-align: center; }
.price-block { text-align: center; }
.price-block .cta-row { justify-content: center; }

/* D3. IN DARK MODE THE BOARDS MEASURED 1.08:1 AGAINST THE PAGE and stopped
   reading as screens at all; in light they are 14.12:1. The page's whole
   argument is "this is what your screen looks like", so they need an edge.
   A ring and a drop shadow read as a bezel, which is what they are. */
@media (prefers-color-scheme: dark) {
  .shot {
    border-color: rgba(255, 255, 255, .18);
    box-shadow: 0 0 0 6px rgba(255, 255, 255, .035),
                0 28px 56px -12px rgba(0, 0, 0, .65);
  }
}

/* D4/D5. THE TWO HERO BUTTONS WERE 241.0 AND 248.0 CSS WIDE, with left edges
   0.5px apart and right edges 6.5px apart: near enough to read as a rendering
   fault rather than a choice. The outline button's 2px border was outside its
   box, and the labels differ in length. Equal boxes, and they stop being
   shrink-to-fit on a phone, which also removes a 123px dead column. */
.btn { box-sizing: border-box; }
@media (max-width: 47.999rem) {
  .cta-row { display: grid; grid-template-columns: 1fr; gap: 1rem; max-width: 22rem; }
  .cta-row .btn { width: 100%; }
  .price-block .cta-row { margin-inline: auto; }
}

/* D6/D7/D8. The portrait board was CENTERED IN ITS CELL, so it started 110px
   inside the page's left rail on desktop and 14px on mobile, breaking the one
   vertical line every other element sits on; and the row it shared left a
   542x260px hole. It spans two rows now and sits on the rail.
   THE CELL ARITHMETIC MOVED WHEN THE SIXTH BOARD ARRIVED. This note used to end
   "and five boards fill six cells exactly", which was true of five. The portrait
   card costs two cells, so six boards cost seven, and seven in a two-column grid
   is four rows with one cell spare: a hole in the bottom right. The video board
   spans both columns to take the count back to eight. */
@media (min-width: 52rem) {
  .boards { grid-auto-flow: row dense; align-items: start; }
  .board-card.portrait { grid-row: span 2; }
  .board-card.wide { grid-column: 1 / -1; }
}
.board-card.portrait .shot { max-width: 22rem; margin-inline: 0; }

/* D16. Captions were left-aligned under the hero and centered under the grid. */
.board-card figcaption,
.hero-figure figcaption { text-align: center; }

/* ---------------------------------------------------------------------------
   Pause control for the two animated boards.

   WCAG 2.2.2 wants a mechanism to pause, stop or HIDE content that moves for
   more than five seconds. Both animations here loop forever. An animated WebP
   exposes no playback API to CSS, so the mechanism is a checkbox that swaps
   which of two images is displayed: the animation, or a still of its first
   frame. That is the "hide" branch of the criterion, and it needs no script, so
   it adds nothing to `script-src` and no file to the publish allowlist.

   THE DEFAULT IS PLAYING, INCLUDING UNDER prefers-reduced-motion, and that is
   deliberate rather than an oversight: serving a still to those visitors is
   what made one of them report the slideshow as broken. The setting is offered,
   not assumed.
   --------------------------------------------------------------------------- */
/* `.shot .motion-still`, NOT `.motion-still`, AND THAT IS THE WHOLE BUG.
   `.shot img { display: block }` a few hundred lines up is (0,1,1); a bare
   `.motion-still { display: none }` is (0,1,0) and loses to it, so BOTH images
   rendered and every visitor saw each animated board twice, stacked. Robert
   caught it on the live site. Two classes is (0,2,0) and wins; the :checked
   rules are (0,4,0) and still win over this. */
.shot .motion-still { display: none; }
.motion-input:checked ~ .shot .motion-anim { display: none; }
.motion-input:checked ~ .shot .motion-still { display: block; }

/* Under the picture, not over it: every corner of these two boards carries
   board content, so an overlaid chip covered the thing it was controlling. */
/* 44x44 IS THE TAP TARGET, AND IT WAS 66x27. Measured in Chromium under touch
   emulation: the control toggled correctly on a tap, so the defect was reach
   rather than function. 27 CSS pixels clears WCAG 2.5.8 Target Size (Minimum,
   AA, 24x24) and misses 2.5.5 (Enhanced, 44x44), which is also the number both
   platform guidelines give for a finger. The chip is set in a small type size
   on purpose, so the height comes from a min-height and centring rather than
   from padding, which would have grown the text box with it. */
.motion-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-width: 2.75rem;
  min-height: 2.75rem;
  margin: .375rem 0 0 auto;
  padding: .375rem .875rem;
  border: 1px solid var(--border);
  border-radius: .5rem;
  background: var(--card);
  color: var(--text);
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}
.motion-btn:hover { border-color: var(--accent); color: var(--accent); }

/* THE STOPPED STATE IS VISIBLE WITHOUT READING THE WORD. "Pause" and "Paused"
   differ by one letter, so a sighted visitor who has just pressed it needs
   something other than the text to see that it took. The frozen board is the
   real feedback; this is the control saying so about itself. */
.motion-input:checked ~ .motion-btn {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-quiet);   /* --accent on it: 5.62:1 light, 6.02:1 dark, both measured */
}
/* The caption follows the control, so it keeps its own top margin off it. */
.motion-btn + figcaption { margin-top: .375rem; }

/* The input carries .visually-hidden, so it is still focusable and still
   announced; the ring has to be drawn on the label the visitor can see. */
.motion-input:focus-visible ~ .motion-btn {
  outline: 2px solid var(--accent-bright);
  outline-offset: 2px;
}

.when-paused { display: none; }
.motion-input:checked ~ .motion-btn .when-playing { display: none; }
.motion-input:checked ~ .motion-btn .when-paused { display: inline; }

/* D10. THE HEADER'S BOTTOM HAIRLINE CHANGED COLOR FOR 45% OF ITS WIDTH,
   measured #D8E3F2 either side and #BFD4F1 for 177px under the CTA: the
   button's own drop shadow bleeding through the 1px border. The header clips
   it and paints the line itself. */
/* The shadow removal is the actual fix; `overflow: hidden` here would also have
   CLIPPED the actions at 320px instead of letting the overflow be seen, which
   is how the narrow-width problem below stayed invisible. */
.header-actions .btn-primary { box-shadow: none; }

/* Below 360px the logo, Sign in and the button cannot share the bar: measured,
   the action group ran to 351px inside a 320px viewport. Sign in is the one to
   go, because the footer carries it and the app's own login is one tap from the
   trial button. */
@media (max-width: 22.5rem) {
  .nav-signin { display: none; }
  .brand-logo { height: 20px; }
}

/* D14. Every footer link carried a full underline, which read as unstyled. */
.site-footer a { text-decoration: none; }
.site-footer a:hover, .site-footer a:focus-visible { text-decoration: underline; }

/* D15. "Three steps to a / screen" and "What a board can look / like" each
   orphaned a single word on a phone. */
h2 { text-wrap: balance; }

/* Taste, from the same review: the subhead measured 19-20px against a 32px
   heading, a ratio of 1.68, and needed three lines; the hero caption was body
   size and read as a second paragraph. */
@media (max-width: 47.999rem) {
  .lede { font-size: 1.0625rem; }
  .hero-figure figcaption, .board-card figcaption { font-size: .8125rem; opacity: .85; }
}

/* D2, continued. On /pricing the price block sat centered under a LEFT-aligned
   h1 and lede, so the page centered on four different axes (h1 570.7, lede 496,
   price 720, button 578.6). The block follows its heading there; on the home
   page the whole section is centered and stays that way. */
.hero .price-block { text-align: left; margin-inline: 0; max-width: none; }
.hero .price-block .cta-row { justify-content: flex-start; }
@media (max-width: 47.999rem) {
  .hero .price-block .cta-row { margin-inline: 0; }
}

/* Editorial marketing, November 2026. Scoped so existing pricing and restaurant pages retain their layouts. */
body.editorial { --bg:#131c2e; --text:#e8eef8; --muted:#a6b6cc; --border:#2b3a53; --accent:#7cb2ff; --accent-text:#08132a; --accent-strong:#9cc5ff; --accent-quiet:#182742; --measure:80rem; background:var(--bg); color:var(--text); font-size:17px; }
.editorial .wrap { width:min(100% - 6rem,80rem); }
.editorial .site-header { background:#131c2e; border-color:#2b3a53; }
.editorial .site-header .wrap { min-height:88px; }
.editorial .brand-logo.for-light { display:none; }
.editorial .brand-logo.for-dark { display:block; }
.editorial .brand-logo { height:25px; }
.editorial .site-nav a { font-size:14px; }
.editorial .header-actions { gap:20px; }
.editorial .btn { border-radius:4px; box-shadow:none; font-size:15px; padding:15px 23px; min-height:52px; font-weight:650; gap:28px; }
.editorial .btn-primary { background:#d6f375; color:#17251f; border:1px solid #d6f375; }
.editorial .btn-primary:hover { background:#c7e368; border-color:#c7e368; color:#17251f; }
.editorial .header-actions .btn { background:#17251f; color:#f4f3ec; border-color:#17251f; min-height:44px; padding:10px 18px; }
.editorial section { padding:0; }
.editorial h1,.editorial h2 { font-weight:550; letter-spacing:-.065em; line-height:1.02; text-wrap:initial; }
.editorial h1 { font-size:clamp(64px,7.7vw,112px); }
.editorial h1 em { font-family:Georgia,serif; font-weight:400; letter-spacing:-.075em; }
.editorial h2 { font-size:clamp(40px,4.4vw,66px); }
.editorial h3 { font-size:24px; letter-spacing:-.035em; font-weight:600; }
.editorial p { margin:0 0 20px; }
.editorial .eyebrow { font-size:11px; font-weight:650; letter-spacing:.13em; line-height:1.5; margin:0 0 28px; }
.status-dot { display:inline-block; height:7px; width:7px; background:#42783e; border-radius:50%; margin:0 9px 1px 0; }
.editorial .new-hero { padding-top:65px; }
.hero-heading { display:grid; grid-template-columns:1.35fr 1fr; align-items:end; gap:70px; margin-bottom:48px; }
.hero-heading h1 { margin:0; }
.hero-copy { max-width:390px; padding-bottom:8px; }
.hero-copy>p:first-child { font-size:25px; line-height:1.35; letter-spacing:-.04em; max-width:310px; }
.hero-copy .hero-description { font-size:16px; color:var(--muted); line-height:1.75; margin-bottom:27px; }
.editorial .small-note { font-size:12px; color:var(--muted); margin-top:13px; }
.space-hero { margin:0; position:relative; overflow:hidden; border-radius:7px; background:#d4d7c9; }
.space-hero>img { width:100%; height:560px; object-fit:cover; display:block; }
.space-hero figcaption { position:absolute; top:24px; left:28px; right:28px; display:flex; justify-content:space-between; color:#fff; font-size:11px; letter-spacing:.08em; text-shadow:0 1px 8px #000; }
.hero-image-note { position:absolute; bottom:28px; left:28px; padding:19px 24px; background:#f4f3ec; font-size:20px; letter-spacing:-.035em; }
.hero-image-note small { display:block; font-size:10px; margin-top:5px; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); }
.usecase-strip { padding:30px 0 40px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--border); gap:30px; }
.usecase-strip>span { font-size:12px; color:var(--muted); }
.editorial .usecase-strip p { font-size:14px; margin:0; }
.usecase-strip i { font-style:normal; color:#738166; margin:0 14px; }
.editorial .showcase { background:#17251f; color:#f4f3ec; padding:95px 0 75px; margin-top:70px; --muted:#bdc7bc; --accent:#d6f375; --border:#455449; }
.section-intro { display:flex; justify-content:space-between; align-items:end; gap:60px; margin-bottom:48px; }
.section-intro h2 { margin-bottom:0; }
.section-intro>p { max-width:360px; color:var(--muted); font-size:16px; }
.example-grid { display:grid; grid-template-columns:1fr 1fr; gap:40px 28px; }
.example-card { margin:0; position:relative; }
.example-screen { border:6px solid #0c1510; border-radius:5px; overflow:hidden; background:#0c1510; aspect-ratio:16/9; }
.example-screen img { width:100%; height:100%; object-fit:cover; display:block; }
.example-card figcaption { text-align:left; padding-top:18px; }
.example-card figcaption>span { font-size:10px; letter-spacing:.09em; color:#bdc7bc; }
.example-card h3 { font-size:23px; margin-top:8px; }
.rotating-preview { position:relative; }
.rotating-preview .next-frame { position:absolute; inset:0; animation:board-switch 6s steps(1,end) infinite; }
@keyframes board-switch { 0%,49.99% { opacity:0; } 50%,100% { opacity:1; } }
.motion-input:checked ~ .rotating-preview .next-frame { animation:none; opacity:0; }
.editorial .example-card .motion-btn { position:absolute; right:12px; top:12px; z-index:1; padding:7px 11px; min-height:36px; font-size:11px; background:#f4f3ec; color:#17251f; border:1px solid #17251f; border-radius:3px; }
.editorial .example-card .motion-btn .when-paused { display:none; }
.editorial .example-card .motion-input:checked ~ .motion-btn .when-paused { display:inline; }
.showcase-bottom { display:flex; justify-content:space-between; align-items:center; gap:40px; border-top:1px solid #455449; margin-top:32px; padding-top:30px; }
.showcase-bottom p { font-size:14px; color:#bdc7bc; }
.showcase-bottom strong { color:#f4f3ec; font-weight:500; }
.editorial .text-link { text-decoration:none; border-bottom:1px solid currentColor; padding:6px 0; font-size:14px; font-weight:600; white-space:normal; color:inherit; }
.editorial .spaces-section { padding-top:100px; padding-bottom:90px; }
.space-grid { display:grid; grid-template-columns:1fr 1fr; gap:30px; }
.space-photo { position:relative; margin-bottom:25px; }
.space-photo img { width:100%; height:360px; display:block; object-fit:cover; border-radius:5px; }
.space-photo span { position:absolute; left:20px; bottom:20px; background:#f4f3ec; color:#17251f; padding:8px 12px; font-size:10px; letter-spacing:.08em; }
.space-grid article>p { max-width:500px; color:var(--muted); font-size:15px; }
.editorial .image-disclosure { font-size:11px; color:var(--muted); line-height:1.6; }
.more-spaces { border-top:1px solid var(--border); margin-top:35px; padding-top:30px; display:flex; gap:60px; }
.more-spaces span { flex:0 0 245px; font-size:15px; font-weight:600; }
.more-spaces p { font-size:16px; color:var(--muted); }
.editorial .workflow { background:#151f33; padding:85px 0 50px; }
.workflow-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:60px; }
.step-number { display:block; font-family:Georgia,serif; font-size:60px; font-style:italic; color:#58654b; padding-bottom:18px; border-bottom:1px solid #bac3af; margin-bottom:24px; }
.workflow-grid p { color:var(--muted); font-size:15px; }
.workflow-foot { margin-top:40px; border-top:1px solid #bac3af; padding-top:25px; display:flex; justify-content:space-between; gap:25px; font-size:13px; }
.workflow-foot p { color:var(--muted); }
.editorial .pricing-finale { padding-top:105px; padding-bottom:105px; display:grid; grid-template-columns:1fr 1fr; gap:100px; align-items:center; }
.pricing-finale>div>p:not(.eyebrow):not(.small-note):not(.ticket-price) { font-size:16px; }
.price-ticket { --accent:#17251f; background:#d6f375; padding:35px 40px; border-radius:5px; color:#17251f; }
.price-ticket>span { font-size:10px; letter-spacing:.09em; }
.editorial .ticket-price { font-size:96px; line-height:1; letter-spacing:-.08em; margin:28px 0 12px; }
.ticket-price small { font-size:20px; letter-spacing:-.02em; margin-left:8px; }
.price-ticket ul { border-top:1px solid #9bb554; padding:24px 0 0 18px; margin-top:25px; font-size:14px; }
.price-ticket li { margin-bottom:8px; }
.editorial .site-footer { background:#17251f; color:#f4f3ec; border:0; padding-top:50px; --muted:#bdc7bc; --accent:#f4f3ec; --border:#455449; }
.editorial .site-footer .brand { color:#f4f3ec; font-size:27px; gap:0; }
.footer-intro { display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid #455449; padding-bottom:28px; margin-bottom:40px; }
.footer-intro .brand span { color:#d6f375; }
.footer-intro p { font-size:14px; color:#bdc7bc; }
.editorial .site-footer h2 { font-size:12px; letter-spacing:.05em; text-transform:uppercase; }
.editorial .site-footer a { color:#f4f3ec; }
.editorial .site-footer li { font-size:13px; }
.editorial .legal-line { display:flex; justify-content:space-between; font-size:11px; }
.editorial .features-hero { padding:85px 0 65px; }
.features-hero h1 { max-width:900px; }
.feature-lede { max-width:510px; font-size:22px; }
.editorial .feature-detail { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; padding-top:60px; padding-bottom:60px; }
.feature-detail p,.feature-detail li { color:var(--muted); font-size:16px; }
.feature-art img { display:block; width:100%; border:5px solid #101c15; border-radius:5px; }
.feature-art span { display:block; margin-top:15px; font-size:12px; color:var(--muted); }
.editorial .showcase .feature-detail { padding-top:0; padding-bottom:0; }
.editorial .feature-cta { text-align:center; padding:80px 0; background:#151f33; }
.feature-cta p:last-child { font-size:13px; margin-top:18px; }
@media(max-width:1000px) { .editorial .wrap{width:calc(100% - 48px)} .hero-heading{gap:35px} .editorial .site-nav{gap:0} .editorial .site-nav a{padding-inline:8px} .editorial .header-actions{gap:5px} .editorial .pricing-finale{gap:40px} .usecase-strip{align-items:start;flex-direction:column;gap:12px} .space-hero>img{height:460px} .workflow-grid{gap:30px} }
@media(max-width:700px) { .editorial .wrap{width:calc(100% - 36px)} .editorial .site-header .wrap{min-height:70px} .editorial .brand-logo{height:20px} .editorial .header-actions{gap:8px} .editorial .header-actions .btn{font-size:11px;padding:8px 10px} .editorial .nav-signin{font-size:12px;padding:4px} .editorial .new-hero{padding-top:40px} .hero-heading{grid-template-columns:1fr;gap:26px;margin-bottom:28px} .editorial h1{font-size:66px} .editorial .eyebrow{font-size:9px;margin-bottom:20px} .hero-copy{max-width:100%} .hero-copy>p:first-child{font-size:23px;max-width:100%} .hero-copy .hero-description{font-size:15px} .space-hero>img{height:350px} .space-hero figcaption{left:16px;top:16px;font-size:8px} .space-hero figcaption span:last-child{display:none} .hero-image-note{left:16px;bottom:16px;padding:12px 15px;font-size:17px} .hero-image-note small{font-size:8px} .usecase-strip{padding:25px 0} .editorial .usecase-strip p{font-size:13px;line-height:2} .usecase-strip i{margin:0 5px} .editorial .showcase{padding:55px 0;margin-top:35px} .section-intro{display:block;margin-bottom:30px} .section-intro>p{margin-top:25px;font-size:15px} .editorial h2{font-size:44px} .example-grid,.space-grid,.workflow-grid{grid-template-columns:1fr;gap:30px} .example-card h3{font-size:22px} .example-card figcaption{padding-top:12px} .showcase-bottom{display:block}.showcase-bottom p{font-size:13px} .editorial .spaces-section{padding:55px 0}.space-photo img{height:280px}.more-spaces{display:block;margin-top:24px}.more-spaces p{margin-top:14px;font-size:14px}.editorial .workflow{padding:55px 0 30px}.workflow .section-intro .text-link{display:inline-block;margin-top:24px}.step-number{font-size:45px;padding-bottom:12px;margin-bottom:18px}.workflow-grid{gap:20px}.workflow-foot{display:block}.workflow-foot p{margin-top:8px}.editorial .pricing-finale{padding:60px 0;grid-template-columns:1fr;gap:30px}.price-ticket{padding:28px}.editorial .ticket-price{font-size:80px}.footer-intro{display:block}.editorial .footer-grid{grid-template-columns:1fr 1fr;gap:28px}.editorial .legal-line{display:block}.editorial .features-hero{padding:50px 0 30px}.feature-lede{font-size:19px}.editorial .feature-detail{grid-template-columns:1fr;gap:25px;padding:35px 0}.editorial .showcase .feature-detail>div:first-child{order:2}.editorial .feature-cta{padding:55px 0} }
.editorial.companion-page .hero { padding:75px 0; text-align:left; }
.editorial.companion-page .hero .lede { margin-inline:0; }
.editorial.companion-page .hero h1 { max-width:1000px; }
.editorial.companion-page .price-block { margin-top:45px; text-align:left; background:#151f33; padding:35px; border-radius:5px; }
.editorial.companion-page .price-block .cta-row { justify-content:flex-start; }
.editorial.companion-page .band { padding:65px 0; background:#151f33; }
.editorial.companion-page .faq { max-width:800px; margin:0; }
.editorial.companion-page .faq h3 { padding-top:20px; }
.editorial.companion-page .hero-figure { margin-top:35px; }
@media(max-width:700px) { .editorial.companion-page .hero{padding:45px 0}.editorial.companion-page h1{font-size:54px}.editorial.companion-page .price-block{padding:24px} }
/* Final visual QA: preserve clear navigation and respect reduced motion. */
.editorial .eyebrow { color:#a6b6cc; }
.editorial .showcase .eyebrow { color:#d6f375; }
.editorial .site-footer { --text:#f4f3ec; }
.editorial.companion-page .hero { background:#131c2e; }
.reduced-motion-note { display:none; }
@media(max-width:759px) {
  .editorial .site-header .wrap { flex-wrap:wrap; gap:0; padding-top:10px; }
  .editorial .site-header .site-nav { display:flex; order:3; width:100%; justify-content:space-between; margin:5px 0 0; border-top:1px solid #d4d8cc; }
  .editorial .site-nav a:not(.btn) { font-size:12px; padding:10px 6px; }
  .editorial .space-hero>img { height:auto; aspect-ratio:1672/941; object-fit:contain; }
  .editorial .space-hero figcaption { display:none; }
  .editorial .hero-image-note { position:static; font-size:16px; padding:14px 16px; }
}
@media(prefers-reduced-motion:reduce) {
  .editorial .rotating-preview .next-frame { animation:none !important; opacity:0; }
  .editorial .example-card .motion-input, .editorial .example-card .motion-btn { display:none; }
  .editorial .reduced-motion-note { display:block; position:absolute; right:12px; top:12px; padding:7px 11px; background:#f4f3ec; color:#17251f; border-radius:3px; font-size:10px; }
}
/* Keep captured boards in their native landscape proportions. */
.editorial .feature-art img { height:auto; }

/* A restaurant story: one editor, three locations, fifteen screens. */
.editorial .restaurant-focus { padding-top:80px; }
.restaurant-intro { display:grid;grid-template-columns:.8fr 1.2fr;gap:65px;align-items:center;margin-bottom:55px; }
.restaurant-intro h2 em { font-family:Georgia,serif;font-weight:400; }
.restaurant-intro>div>p:not(.eyebrow) { font-size:16px;color:var(--muted);max-width:390px; }
.restaurant-menu-example { margin:0;transform:rotate(-1deg); }
.restaurant-menu-example img { display:block;width:100%;height:auto;border:8px solid #17251f;border-radius:8px;box-shadow:0 15px 30px #17251f18; }
.restaurant-menu-example figcaption { margin-top:20px;font-size:10px;letter-spacing:.12em;text-align:left; }
.restaurant-benefits { display:flex;flex-wrap:wrap;gap:8px;margin-top:15px; }
.restaurant-benefits span { background:#e4e8d9;border:1px solid #cdd4be;border-radius:30px;font-size:11px;padding:6px 12px; }
.fleet-story { border-radius:8px;background:#17251f;color:#f4f3ec;padding:35px; }
.story-top { display:flex;justify-content:space-between;align-items:flex-start;gap:20px; }
.editorial .story-top .eyebrow { color:#d6f375;font-size:10px;margin-bottom:15px; }
.editorial .story-top h3 { font-size:36px;letter-spacing:-.05em;line-height:1.08;margin:0; }
.story-toggle { color:#f4f3ec;background:transparent;border:1px solid #6e7f70;border-radius:4px;padding:11px 14px;font:inherit;font-size:12px;cursor:pointer; }
.story-toggle:hover { background:#314336; }
.story-toggle:focus-visible { outline:3px solid #d6f375;outline-offset:4px; }
.story-toggle[hidden] { display:none; }
.story-scene { display:grid;grid-template-columns:1fr 95px 1.25fr;align-items:center;gap:15px;padding-top:20px; }
.fleet-manager { max-width:360px;width:100%;margin:auto; }
.manager-portrait { display:block;width:210px;height:118px;margin:0 auto -10px; }
.mock-editor { background:#f4f3ec;border:7px solid #0b1710;border-radius:10px;color:#17251f;box-shadow:0 12px 0 -7px #84937a; }
.mock-editor-bar { display:flex;justify-content:space-between;align-items:center;padding:10px 13px;border-bottom:1px solid #cdd4be;font-size:10px; }
.mock-editor-bar strong { font-size:13px; }
.mock-editor-body { padding:20px; }
.mock-editor-body>span { font-size:8px;letter-spacing:.12em; }
.editor-title { font-size:24px;letter-spacing:-.04em;line-height:1.2;position:relative;padding:10px 0 16px;font-weight:650; }
.editor-before { display:none; }
.editor-item { display:flex;justify-content:space-between;font-size:11px;padding:8px 0;border-top:1px solid #d4d8cc; }
.editor-item b { font-weight:500; }
.editor-save { display:flex;justify-content:space-between;margin-top:15px;padding:9px 12px;background:#d6f375;color:#17251f;border-radius:3px;font-size:11px; }
.editorial .manager-caption { font-size:11px;color:#bdc7bc;text-align:center;margin:16px 0 0; }
.internet-path { align-self:center;text-align:center;color:#bdc7bc;font-size:8px;letter-spacing:.12em;position:relative; }
.packet-track { position:relative;height:24px;margin-top:8px;overflow:hidden; }
.packet-track:before { content:'';position:absolute;top:10px;left:0;right:0;border-top:1px dashed #829278; }
.packet-track i { width:6px;height:6px;background:#d6f375;position:absolute;left:-10px;top:7px;opacity:0; }
.path-arrow { position:absolute;right:-7px;bottom:0;font-size:30px;line-height:25px; }
.fleet-locations { display:grid;gap:16px; }
.fleet-location { background:#25382b;border:1px solid #55684d;border-radius:5px;overflow:hidden; }
.location-heading { display:flex;align-items:center;gap:9px;padding:10px 12px;font-size:11px; }
.location-heading strong { font-weight:550; }
.location-heading>span:not(.building-mark) { color:#bdc7bc;font-size:9px; }
.location-status { margin-left:auto;color:#d6f375;font-size:9px; }
.building-mark { font-size:20px;line-height:1; }
.restaurant-awning { height:10px;background:repeating-linear-gradient(90deg,#879c72 0,#879c72 15px,#d3dcc5 15px,#d3dcc5 30px);border-bottom:3px solid #15251a; }
.restaurant-windows { display:grid;grid-template-columns:repeat(5,1fr);gap:8px;padding:12px; }
.fleet-screen { background:#d6f375;color:#17251f;border:3px solid #0c1910;border-radius:2px;padding:7px 4px;position:relative;min-width:0;transition:background .5s; }
.fleet-screen>span { font-size:7px;display:block;font-weight:700;letter-spacing:.04em; }
.fleet-screen .screen-old { display:none; }
.fleet-screen i { display:block;width:80%;height:2px;margin-top:6px;background:currentColor;opacity:.45; }
.fleet-screen i:nth-of-type(2) { width:55%; }
.fleet-screen b { display:block;font-size:6px;text-align:right;margin-top:4px;opacity:.6; }
.story-bottom { border-top:1px solid #455449;margin-top:30px;padding-top:22px; }
.story-steps { display:flex;justify-content:space-between;gap:20px;list-style:none;padding:0;margin:0 0 16px;font-size:12px;color:#b6c1b1; }
.story-steps span { display:inline-flex;align-items:center;justify-content:center;width:23px;height:23px;border:1px solid #61715a;border-radius:50%;font-size:9px;margin-right:8px; }
.editorial .story-status { color:#d6f375;font-size:12px;margin-bottom:12px; }
.editorial .story-disclosure { font-size:10px;color:#b6c1b1;line-height:1.6;margin:0;max-width:730px; }
[data-phase="edit"] .editor-before { display:inline; }
[data-phase="edit"] .editor-after { display:none; }
[data-phase="edit"] .editor-title { outline:1px dashed #8d9d69;outline-offset:4px; }
[data-phase="send"] .editor-save { background:#17251f;color:#d6f375; }
.fleet-story:not([data-phase="complete"]) .fleet-location:not(.is-updated) .fleet-screen { background:#e7d0aa; }
.fleet-story:not([data-phase="complete"]) .fleet-location:not(.is-updated) .screen-old { display:block; }
.fleet-story:not([data-phase="complete"]) .fleet-location:not(.is-updated) .screen-new { display:none; }
[data-phase="edit"] [data-step="edit"], [data-phase="send"] [data-step="send"], [data-phase="deliver"] [data-step="send"], [data-phase="complete"] [data-step="complete"] { color:#d6f375; }
[data-phase="send"] .packet-track i,[data-phase="deliver"] .packet-track i { animation:send-packet 1.4s linear infinite; }
.packet-track i:nth-child(2) { animation-delay:.45s; }
.packet-track i:nth-child(3) { animation-delay:.9s; }
@keyframes send-packet { 0%{left:-8px;opacity:0} 10%,90%{opacity:1} 100%{left:110%;opacity:0} }
.fleet-story:not(.story-running) .packet-track i { animation-play-state:paused; }
.editorial .restaurant-story-page { padding-bottom:70px; }
.editorial .restaurant-features { display:grid;grid-template-columns:repeat(3,1fr);gap:40px;padding-bottom:75px; }
.restaurant-features p { font-size:15px;color:var(--muted); }
@media(max-width:900px) { .restaurant-intro{gap:30px}.fleet-story{padding:25px}.story-scene{grid-template-columns:1fr 55px 1.2fr;gap:10px}.restaurant-windows{gap:4px;padding:8px}.location-heading{gap:5px;padding:8px}.location-heading strong{font-size:10px}.location-status{font-size:8px}.mock-editor-body{padding:15px}.story-steps{font-size:10px;gap:10px}.story-steps span{margin-right:5px} }
@media(max-width:700px) { .editorial .restaurant-focus{padding-top:50px}.restaurant-intro{grid-template-columns:1fr;gap:30px;margin-bottom:30px}.restaurant-intro h2 br:nth-of-type(1){display:none}.fleet-story{padding:22px 16px}.story-top{display:block}.editorial .story-top h3{font-size:32px}.story-toggle{margin-top:18px}.story-scene{grid-template-columns:1fr;padding-top:10px;gap:16px}.fleet-manager{max-width:295px}.manager-portrait{width:180px;height:101px}.internet-path{width:140px;margin:5px auto 0}.packet-track{height:20px}.path-arrow{transform:rotate(90deg);right:62px;bottom:-18px}.fleet-locations{gap:14px;padding-top:10px}.restaurant-windows{padding:12px;gap:7px}.fleet-screen{padding:8px 4px}.location-heading{padding:10px 12px;gap:8px}.location-heading strong{font-size:12px}.location-status{font-size:10px}.story-steps{display:grid;gap:8px;font-size:11px}.story-bottom{margin-top:22px}.editorial .story-status{font-size:11px}.editorial .restaurant-features{grid-template-columns:1fr;gap:20px}.editorial .restaurant-story-page{padding-bottom:40px} }
@media(prefers-reduced-motion:reduce) { .fleet-story .packet-track i{animation:none!important;display:none}.fleet-story .fleet-screen{transition:none} }
/* One update branches visibly to each of the three restaurant locations. */
.internet-branches { align-self:stretch; min-height:310px; }
.internet-branches>span { position:absolute; top:calc(50% - 34px); left:0; right:0; font-size:8px; letter-spacing:.08em; }
.branch-network { display:block; width:100%; height:100%; position:absolute; inset:0; overflow:visible; }
.branch-line { fill:none; stroke:#829278; stroke-width:1; vector-effect:non-scaling-stroke; }
.branch-arrows { fill:none; stroke:#bdc7bc; stroke-width:1.5; vector-effect:non-scaling-stroke; }
.branch-packet { fill:none; stroke:#d6f375; stroke-width:3; stroke-linecap:round; stroke-dasharray:5 190; opacity:0; }
[data-phase="send"] .branch-packet, [data-phase="deliver"] .branch-packet { opacity:1; animation:branch-delivery 2.4s linear infinite; }
.branch-packet:nth-of-type(5) { animation-delay:-.6s; }
.branch-packet:nth-of-type(6) { animation-delay:-1.2s; }
@keyframes branch-delivery { to { stroke-dashoffset:-195; } }
.fleet-story:not(.story-running) .branch-packet { animation-play-state:paused; }
.mobile-packet-flow { display:none; }
@media(max-width:700px) {
  .internet-branches { min-height:45px; height:45px; width:100%; margin:0; }
  .internet-branches>span { top:0; text-align:center; }
  .branch-network { display:none; }
  .mobile-packet-flow { display:block; position:absolute; top:20px; left:9px; right:50%; height:26px; border-top:1px solid #829278; border-left:1px solid #829278; border-radius:8px 0 0; }
  .fleet-locations { position:relative; padding-left:28px; }
  .fleet-locations::before { content:''; position:absolute; top:-16px; bottom:60px; left:9px; border-left:1px solid #829278; }
  .fleet-location { position:relative; overflow:visible; }
  .fleet-location::before { content:''; position:absolute; width:20px; height:3px; left:-20px; top:50%; background:#829278; }
  .fleet-location::after { content:''; position:absolute; left:-7px; top:calc(50% - 3px); width:6px; height:6px; border-top:1px solid #bdc7bc; border-right:1px solid #bdc7bc; transform:rotate(45deg); }
  [data-phase="send"] .fleet-location::before,[data-phase="deliver"] .fleet-location::before { background:repeating-linear-gradient(90deg,#829278 0,#829278 14px,#d6f375 14px,#d6f375 20px); animation:mobile-branch-delivery 1.2s linear infinite; }
  .fleet-story:not(.story-running) .fleet-location::before { animation-play-state:paused; }
  @keyframes mobile-branch-delivery { to { background-position:20px 0; } }
  .restaurant-windows { gap:5px; padding:10px 8px; }
}
@media(prefers-reduced-motion:reduce) {
  .fleet-story .branch-packet { animation:none!important; opacity:0; }
  .fleet-story .fleet-location::before { animation:none!important; }
}

/* Navy marketing surfaces match the app; artwork keeps its own palette. */
.editorial .showcase, .editorial .site-footer { background:#0b1120; --muted:#a6b6cc; --border:#2b3a53; }
.editorial .header-actions .btn { background:#7cb2ff; color:#08132a; border-color:#7cb2ff; }
.editorial .header-actions .btn:hover { background:#9cc5ff; border-color:#9cc5ff; }
.editorial .site-nav { border-color:#2b3a53 !important; }
.editorial .btn-secondary { color:#e8eef8; border-color:#7d8da3; background:transparent; }
.editorial .btn-secondary:hover { background:#182742; }
.editorial .step-number { color:#7cb2ff; border-color:#2b3a53; }
.editorial .workflow-foot, .editorial .showcase-bottom, .editorial .footer-intro { border-color:#2b3a53; }
.editorial .usecase-strip i { color:#7cb2ff; }
.editorial .restaurant-benefits span { background:#182742; border-color:#2b3a53; color:#e8eef8; }
.editorial .space-photo span { color:#17251f; }
.editorial .fleet-story { background:#0b1120; }
.editorial .space-hero-triptych { background:transparent; }
.editorial .space-hero-triptych>img { width:100%; height:auto; aspect-ratio:1942/809; object-fit:contain; }
.editorial .space-hero-triptych figcaption { position:static; display:grid; grid-template-columns:repeat(3,1fr); gap:8px; padding:15px 0 0; color:#e8eef8; text-shadow:none; text-align:center; font-size:12px; letter-spacing:.08em; text-transform:uppercase; }
.editorial .space-hero-triptych figcaption span { display:block; }
.editorial .space-hero-triptych .image-disclosure { margin:12px 0 0; text-align:center; }
@media(max-width:700px) { .editorial .space-hero-triptych figcaption { font-size:9px; padding-top:12px; letter-spacing:.04em; } }

/* Real product views, with readable full-size originals. */
.product-tour { padding-top:90px; padding-bottom:90px; }
.product-tour .section-intro>p { color:var(--muted); line-height:1.65; }
.product-tour-row { display:grid; grid-template-columns:minmax(0, .85fr) minmax(0, 1.65fr); gap:48px; align-items:center; margin-top:48px; }
.product-tour-copy h3 { font-size:clamp(26px,3vw,40px); line-height:1.12; letter-spacing:-.035em; margin:16px 0; }
.product-tour-copy>p:not(.eyebrow),.product-tour-copy li { color:var(--muted); line-height:1.7; }
.product-tour-copy ul { padding-left:19px; margin-top:20px; }
.product-tour-copy li { margin:8px 0; }
.product-shot { min-width:0; margin:0; border:1px solid #35465f; border-radius:12px; background:#0b1120; overflow:hidden; box-shadow:0 20px 55px #060c1955; }
.product-shot>a { display:block; }
.product-shot img { display:block; width:100%; height:auto; }
.product-shot figcaption { display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; padding:16px 18px; border-top:1px solid #2b3a53; font-size:12px; color:#a6b6cc; }
.product-shot figcaption a { color:#7cb2ff; text-underline-offset:4px; }
.product-tour-row-reverse { grid-template-columns:minmax(0,1.65fr) minmax(0,.85fr); }
.product-tour-row-reverse .product-tour-copy { grid-column:2; grid-row:1; }
.product-tour-row-reverse .product-shot { grid-column:1; grid-row:1; }
@media(max-width:800px) {
 .product-tour { padding-top:56px; padding-bottom:56px; }
 .product-tour-row,.product-tour-row-reverse { grid-template-columns:1fr; gap:22px; margin-top:36px; }
 .product-tour-row-reverse .product-tour-copy,.product-tour-row-reverse .product-shot { grid-column:auto; grid-row:auto; }
 .product-shot figcaption { padding:14px; }
 .product-shot figcaption a { display:inline-flex; align-items:center; min-height:32px; }
}