/* tokens.css */
/* ROS website — design tokens. The ONLY file with raw colour, size and font values.
   Taken from the approved canvas (design/canvas, NiVi Tech family look). Every other
   stylesheet uses these variables; test/unit/css-guard.test.mjs enforces it. */

@font-face { font-family: 'Geist'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url('/assets/fonts/geist-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Geist'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url('/assets/fonts/geist-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Geist Mono'; font-style: normal; font-weight: 400 500; font-display: swap;
  src: url('/assets/fonts/geist-mono-latin.woff2') format('woff2'); }

:root {
  /* brand + neutrals */
  --navy: #0A1021; --navy-2: #121A30; --navy-3: #1C2640;
  --blue: #1A73E8; --blue-deep: #1558B0; --sky: #64B5FF;
  --mist: #E6EAF0; --paper: #F5F7FA; --white: #FFFFFF; --chip: #F1F3F6;
  --ink: #0A1021; --ink-2: #3A4356; --ink-3: #5A6377; --ink-4: #6E7689; --line: #D5DBE5; --dot-off: #C9D1DE;
  --plum: #8E1B4A; --plum-hi: #A8285F; --plum-deep: #5E1031; --plum-ink: #6E1439; --plum-tint: #F6E9EF; --plum-line: #E7CAD7;
  --tomato: #D2402A;
  --on-dark: rgba(255,255,255,.72); --on-dark-2: rgba(255,255,255,.6); --on-dark-3: rgba(255,255,255,.56); --on-dark-line: rgba(255,255,255,.12);
  --on-dark-strong: rgba(255,255,255,.8); --on-dark-edge: rgba(255,255,255,.28); --on-dark-soft: rgba(255,255,255,.64); --on-dark-hi: rgba(255,255,255,.76);
  --scrim: rgba(10,16,33,.72); --shadow-deep: rgba(10,16,33,.6); --shadow-mid: rgba(10,16,33,.45); --plum-glow: rgba(94,16,49,.18);

  /* state colours (tables, orders, badges) */
  --ok-bg: #E6F3EC; --ok-fg: #17603B; --ok-line: #C6E3D2;
  --warn-bg: #FBF0DA; --warn-fg: #7A4E00; --warn-line: #F0DDB2;
  --bad-bg: #FDECE8; --bad-fg: #9A2B17; --bad-line: #F3C9BF;
  --info-bg: #E8F0FD; --info-fg: #1558B0;
  --free-line: #E3E3DF;

  /* status badges on dark (family cards) — checked 4.5:1 */
  --st-avail-bg: #173A2A; --st-avail-fg: #7EE0A8;
  --st-beta-bg: #3A2F12;  --st-beta-fg: #F2C46D;
  --st-soon-bg: #1C2640;  --st-soon-fg: #E6EAF0;
  --st-plan-bg: #1C2640;  --st-plan-fg: #E6EAF0;
  /* status badges on light */
  --stl-avail-bg: #E6F3EC; --stl-avail-fg: #17603B;
  --stl-beta-bg: #FBF0DA;  --stl-beta-fg: #7A4E00;
  --stl-soon-bg: #F1F3F6;  --stl-soon-fg: #3A4356;
  --stl-plan-bg: #F1F3F6;  --stl-plan-fg: #3A4356;

  /* product dots */
  --dot-r: #B4466F; --dot-q: #F5455F; --dot-e: #3D7BE0; --dot-d: #E8634C; --dot-p: #7B5EA7;

  /* illustration line art */
  --art-bg: #F2F6FC; --art-fill: #DCE8F9; --art-line: #6C9BDC; --art-floor: #EEF3FB;

  /* type */
  --font: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --fs-display: 64px; --fs-h2: 54px; --fs-h2s: 44px; --fs-h3: 28px; --fs-h4: 22px; --fs-h5: 20px; --fs-h6: 18px;
  --fs-lead: 20px; --fs-lead-s: 18px; --fs-body: 16px; --fs-base: 15px; --fs-small: 14px; --fs-xs: 13px; --fs-mono: 12px; --fs-tiny: 11px; --fs-micro: 10px; --fs-nano: 9px;
  --fs-display-m: 40px; --fs-h2-m: 32px; --fs-h3-m: 24px; --fs-lead-m: 17px;
  --lh-tight: 1.06; --lh-head: 1.08; --lh-h2s: 1.1; --lh-lead: 1.55; --lh-body: 1.6; --lh-snug: 1.5;
  --track-head: -0.025em; --track-tight: -0.03em; --track-mono: 0.14em; --track-wide: 0.32em; --track-mono-s: 0.1em; --track-mono-m: 0.12em; --track-band: 0.3em;

  /* space */
  --s-1: 2px; --s-2: 4px; --s-3: 6px; --s-4: 8px; --s-5: 10px; --s-6: 12px; --s-7: 14px; --s-8: 16px; --s-9: 18px; --s-10: 20px;
  --s-11: 22px; --s-12: 24px; --s-13: 28px; --s-14: 32px; --s-15: 40px; --s-16: 48px; --s-17: 56px; --s-18: 64px; --s-19: 72px;
  --s-20: 80px; --s-21: 88px; --s-22: 96px; --s-23: 120px;
  --wrap: 1240px; --wrap-pad: 32px; --wrap-pad-m: 16px; --measure: 720px; --measure-w: 960px; --measure-n: 560px; --measure-h: 680px; --measure-s: 620px; --measure-m: 760px;
  --nav-h: 76px; --tap: 44px; --btn-h: 48px;

  /* radius */
  --r-xs: 3px; --r-s: 8px; --r-m: 10px; --r-l: 12px; --r-xl: 14px; --r-card: 16px; --r-card-l: 18px; --r-panel: 20px; --r-big: 24px; --r-band: 28px; --r-pill: 999px;

  /* shadow */
  --shadow-device: 0 30px 60px -30px var(--shadow-deep);
  --shadow-card: 0 30px 60px -30px var(--shadow-mid);

  /* breakpoints (documented; media queries use these values by convention): tablet 1024px, phone 760px */
}

/* tokens-pages.css */
/* Colours used only by the Solutions / Capabilities / About / Contact / Demo / Legal / Cookies /
   404 pages (blocks/pages.css). Values from the approved canvases. */
:root {
  --pg-soft: #8A93A6;            /* light grey lines under headings */
  --pg-req: #B3261E;             /* required mark and field errors (Demo) */
  --pg-alert-bg: #FCEEEE; --pg-alert-line: #F2C9C6; --pg-alert-fg: #8C1D18;
  --pg-chip-on: #EAF2FE;         /* picked product chip; missing table on the 404 plan */
  --pg-dot-e-deep: #003883;      /* ROS'E dot on the Demo page */
  --pg-dot-plan: #9AA3B2;        /* Planned mark dot (Capabilities) */
  --pg-sheet: #FAFAF8;           /* 404 floor-plan screen */
  --pg-on-dark-half: rgba(255,255,255,.5);
  --pg-on-dark-7: rgba(255,255,255,.7);
  --pg-shadow-panel: 0 30px 60px -40px rgba(10,16,33,.35);
  --pg-shadow-tip: 0 12px 30px -12px rgba(10,16,33,.5);
  --pg-shadow-knob: 0 1px 3px rgba(10,16,33,.3);
  --pg-shadow-banner: 0 30px 60px -20px rgba(10,16,33,.6);
}

/* tokens-products.css */
/* Product pages — colours used only by the product-page blocks and illustrations
   (design/canvas/RosR-N, RosQ, RosE, RosD, RosP). Raw values live here and nowhere else. */
:root {
  --pd-screen: #FAFAF8;            /* device screen background */
  --pd-e-deep: #003883;            /* ROS'E console rail and board badge */
  --pd-q-tint: #FDE8EB; --pd-q-ink: #9B1C33;   /* ROS'Q takeaway tag */
  --pd-red: #B3261E;               /* offline screen, non-veg mark */
  --pd-veg: #17803B;               /* veg mark */
  --pd-ink-5: #8A93A6;             /* quiet sub-lines (ROS'P) */
  --pd-scrim: rgba(10,16,33,.78);  /* photo caption */
  --pd-shadow: rgba(10,16,33,.5);  /* phone and kiosk shadow */
  --pd-on-dark-74: rgba(255,255,255,.74);
  --pd-on-dark-50: rgba(255,255,255,.5);
  --pd-rail-on: rgba(255,255,255,.24);
  --pd-rail-off: rgba(255,255,255,.1);
  --pd-thumb: rgba(255,255,255,.85);
}

/* base.css */
/* ROS website — base layer: reset, type, layout, buttons, badges, nav, footer, CTA band,
   form fields, info tips. Tokens only (see tokens.css). Media queries use the documented
   breakpoints 1024px (tablet) and 760px (phone). */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--white); color: var(--ink); font-family: var(--font); font-size: var(--fs-base); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; }
img, svg, video { display: block; max-width: 100%; }
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-deep); }
h1, h2, h3, h4, p, figure, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.dark :focus-visible, .band :focus-visible { outline-color: var(--white); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: var(--s-8); top: calc(-1 * var(--nav-h)); z-index: 20; background: var(--navy); color: var(--white); padding: var(--s-5) var(--s-8); border-radius: var(--r-s); }
.skip:focus { top: var(--s-8); color: var(--white); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }

/* ---------- layout ---------- */
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--wrap-pad); }
.sec { padding: var(--s-23) 0; }
.sec-paper { background: var(--paper); }
.sec-line { border-top: 1px solid var(--mist); }
.sec-lines { border-top: 1px solid var(--mist); border-bottom: 1px solid var(--mist); }
.dark { background: var(--navy); color: var(--white); }
.hero { padding: var(--s-22) 0 var(--s-19); }
.stack { display: flex; flex-direction: column; }
.gap-2 { gap: var(--s-2); } .gap-3 { gap: var(--s-3); } .gap-4 { gap: var(--s-4); } .gap-5 { gap: var(--s-5); } .gap-6 { gap: var(--s-6); } .gap-7 { gap: var(--s-7); } .gap-8 { gap: var(--s-8); }
.gap-9 { gap: var(--s-9); } .gap-10 { gap: var(--s-10); } .gap-12 { gap: var(--s-12); } .gap-13 { gap: var(--s-13); } .gap-14 { gap: var(--s-14); }
.gap-15 { gap: var(--s-15); } .gap-16 { gap: var(--s-16); } .gap-17 { gap: var(--s-17); }
.center { align-items: center; text-align: center; }
.start { align-items: flex-start; }
.row { display: flex; gap: var(--s-6); align-items: center; flex-wrap: wrap; }
.grid { display: grid; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.g5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.g6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.split { display: grid; gap: var(--s-16); }
.split-11 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.split-12-10 { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.split-10-11 { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
.split-11-10 { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.split-10-125 { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
.split-09-16 { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.6fr); }
.split-13-30 { grid-template-columns: minmax(0, 1.3fr) minmax(0, 3fr); }
.split.end { align-items: end; }
.split.mid { align-items: center; }
.split.wide-gap { gap: var(--s-17); }
.split.xwide-gap { gap: var(--s-18); }
.measure { max-width: var(--measure); }
.measure-w { max-width: var(--measure-w); }
.measure-m { max-width: var(--measure-m); }
.measure-h { max-width: var(--measure-h); }
.measure-s { max-width: var(--measure-s); }
.measure-n { max-width: var(--measure-n); }
.hide-d { display: none !important; }

/* ---------- type ---------- */
.h1 { font-size: var(--fs-display); line-height: var(--lh-tight); font-weight: 700; letter-spacing: var(--track-head); }
.h2 { font-size: var(--fs-h2); line-height: var(--lh-head); font-weight: 700; letter-spacing: var(--track-head); }
.h2s { font-size: var(--fs-h2s); line-height: var(--lh-h2s); font-weight: 700; letter-spacing: var(--track-head); }
.h3 { font-size: var(--fs-h3); line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; }
.h4 { font-size: var(--fs-h4); font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
.h5 { font-size: var(--fs-h5); font-weight: 600; line-height: 1.35; }
.h6 { font-size: var(--fs-h6); font-weight: 600; line-height: 1.4; }
.t-strong { font-size: var(--fs-body); font-weight: 600; }
.lead { font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--ink-2); }
.lead-s { font-size: var(--fs-lead-s); line-height: var(--lh-body); color: var(--ink-2); }
.body { font-size: var(--fs-base); line-height: var(--lh-body); color: var(--ink-2); }
.small { font-size: var(--fs-small); line-height: var(--lh-body); color: var(--ink-2); }
.muted { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--ink-4); }
.tag { font-size: var(--fs-small); font-weight: 500; color: var(--ink-4); margin-top: calc(-1 * var(--s-5)); }
.eyebrow { font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: var(--track-mono); color: var(--ink-3); text-transform: uppercase; }
.accent { color: var(--blue); }
.dark .lead, .dark .lead-s { color: var(--on-dark-hi); }
.dark .body, .dark .small { color: var(--on-dark); }
.dark .tag { color: var(--on-dark-2); }
.dark .eyebrow { color: var(--on-dark-2); }
.mono { font-family: var(--mono); }
.nowrap { white-space: nowrap; }

/* ---------- buttons and links ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-4); min-height: var(--btn-h); padding: 0 var(--s-11); border-radius: var(--r-pill); font-size: var(--fs-base); font-weight: 600; letter-spacing: -0.005em; transition: background .15s, color .15s, border-color .15s; border: 0; cursor: pointer; font-family: inherit; text-align: center; }
.btn-p { background: var(--blue); color: var(--white); }
.btn-p:hover { background: var(--blue-deep); color: var(--white); }
.btn-d { background: var(--navy); color: var(--white); }
.btn-d:hover { background: var(--navy-3); color: var(--white); }
.btn-g { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.btn-g:hover { border-color: var(--ink); color: var(--ink); }
.btn-w { background: var(--white); color: var(--ink); }
.btn-w:hover { background: var(--mist); color: var(--ink); }
.btn-gd { background: transparent; color: var(--white); border: 1px solid var(--on-dark-edge); }
.btn-gd:hover { border-color: var(--white); color: var(--white); }
.btn-s { min-height: var(--tap); padding: 0 var(--s-10); font-size: var(--fs-small); }
.btn[disabled] { opacity: .6; cursor: progress; }
.more { font-weight: 600; font-size: var(--fs-base); display: inline-flex; align-items: center; gap: var(--s-3); }
.more svg { width: var(--s-8); height: var(--s-8); }
.ico { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- pills and status badges ---------- */
.pill { font-size: var(--fs-mono); font-weight: 600; padding: var(--s-2) var(--s-5); border-radius: var(--r-pill); display: inline-flex; align-items: center; gap: var(--s-3); line-height: 1.5; white-space: nowrap; }
.dot { width: var(--s-5); height: var(--s-5); border-radius: var(--r-xs); display: inline-block; flex-shrink: 0; }
.dot-r { background: var(--dot-r); } .dot-q { background: var(--dot-q); } .dot-e { background: var(--dot-e); } .dot-d { background: var(--dot-d); } .dot-p { background: var(--dot-p); }
.st-available { background: var(--stl-avail-bg); color: var(--stl-avail-fg); }
.st-beta { background: var(--stl-beta-bg); color: var(--stl-beta-fg); }
.st-comingsoon { background: var(--stl-soon-bg); color: var(--stl-soon-fg); }
.st-planned { background: var(--stl-plan-bg); color: var(--stl-plan-fg); }
.dark .st-available, .on-dark .st-available { background: var(--st-avail-bg); color: var(--st-avail-fg); }
.dark .st-beta, .on-dark .st-beta { background: var(--st-beta-bg); color: var(--st-beta-fg); }
.dark .st-comingsoon, .on-dark .st-comingsoon { background: var(--st-soon-bg); color: var(--st-soon-fg); }
.dark .st-planned, .on-dark .st-planned { background: var(--st-plan-bg); color: var(--st-plan-fg); }
.pill-out { background: var(--white); border: 1px solid var(--line); color: var(--ink); font-size: var(--fs-small); padding: var(--s-3) var(--s-6); }
.pill-out .pill-st { color: var(--ink-3); font-weight: 500; }

/* ---------- navigation ---------- */
.nav { position: relative; width: 100%; background: var(--white); border-bottom: 1px solid var(--mist); z-index: 5; }
.nav-bar { height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; gap: var(--s-12); }
.nav-home { display: flex; align-items: center; gap: var(--s-6); min-height: var(--tap); flex-shrink: 0; color: var(--ink); }
.nav-logo { width: 204px; height: 46px; }
.nav-tile { width: 40px; height: 40px; filter: drop-shadow(0 3px 5px var(--plum-glow)); }
.nav-links { display: flex; align-items: center; gap: var(--s-1); }
.nav-act { display: flex; align-items: center; gap: var(--s-5); }
.nv-link { color: var(--ink-2); font-size: var(--fs-base); font-weight: 500; padding: var(--s-5) var(--s-6); border-radius: var(--r-s); display: inline-flex; align-items: center; min-height: var(--tap); }
.nv-link:hover { color: var(--ink); background: var(--paper); }
.nv-link[aria-current="page"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--blue); border-radius: 0; }
.nav-cta { min-height: var(--tap); padding: 0 var(--s-10); font-size: var(--fs-small); }
.nav-toggle { display: none; width: var(--tap); height: var(--tap); align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--white); color: var(--ink); cursor: pointer; }
.nav-toggle svg { width: var(--s-10); height: var(--s-10); }
.nav-menu { display: none; flex-direction: column; padding: var(--s-4) var(--s-8) var(--s-10); border-top: 1px solid var(--mist); background: var(--white); }
.nav-menu .nv-link { font-size: 17px; padding: var(--s-6) var(--s-2); }
.nav-menu .btn { margin-top: var(--s-6); }
.nav.open .nav-menu { display: flex; }

/* logo strokes (inline SVG, coloured by class — no fill/stroke attributes in markup) */
.lg-stroke { fill: none; stroke-linejoin: round; }
.lg-cap { stroke-linecap: round; }
.lg-plum { stroke: url(#ros-plum); }
.lg-plum-fill { fill: url(#ros-plum); }
.lg-white { stroke: var(--white); }
.lg-white-fill { fill: var(--white); }
.lg-blue { stroke: var(--blue); }
.lg-blue-fill { fill: var(--blue); }
.lg-deep { stroke: var(--plum-deep); }
.lg-deep-fill { fill: var(--plum-deep); }
.lg-bar { fill: var(--plum); }
.lg-text { font-family: var(--font); font-weight: 300; }
.lg-text-band { font-family: var(--font); font-weight: 400; }
.grad-a { stop-color: var(--plum-hi); }
.grad-b { stop-color: var(--plum-deep); }
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- footer ---------- */
.foot { background: var(--navy); color: var(--white); }
.foot-in { padding: var(--s-20) var(--wrap-pad) var(--s-14); }
.foot-brand { display: flex; flex-direction: column; gap: var(--s-10); align-items: flex-start; }
.foot-home { display: flex; flex-direction: column; gap: var(--s-3); min-height: var(--tap); color: var(--white); }
.foot-logo { width: 124px; height: 37px; }
.foot-by { font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: var(--track-wide); color: var(--sky); line-height: 1; }
.foot-line { font-size: var(--fs-base); line-height: var(--lh-body); color: var(--on-dark); max-width: 300px; }
.foot-tag { font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: var(--track-mono); color: var(--sky); }
.foot-cols { gap: var(--s-14); }
.foot-h { margin: 0 0 var(--s-6); font-family: var(--mono); font-size: var(--fs-mono); font-weight: 500; letter-spacing: var(--track-mono-m); color: var(--on-dark-3); }
.ft-link { color: var(--on-dark); font-size: var(--fs-small); line-height: 2; }
.ft-link:hover { color: var(--white); }
.foot-base { margin-top: var(--s-17); padding-top: var(--s-12); border-top: 1px solid var(--on-dark-line); display: flex; justify-content: space-between; align-items: center; gap: var(--s-8); }
.foot-copy { font-size: var(--fs-xs); color: var(--on-dark-3); }
.foot-band { font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: var(--track-band); color: var(--on-dark-3); }

/* ---------- CTA band ---------- */
.band { background: var(--blue); border-radius: var(--r-band); padding: var(--s-19) var(--s-18); color: var(--white); display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-12); position: relative; }
.band .lead-s { color: var(--white); }
.band-mark { position: absolute; right: var(--s-17); bottom: -33px; width: 330px; height: 98px; }
.band-mark.tall { bottom: -40px; height: 108px; }

/* ---------- cards ---------- */
.card { background: var(--white); border: 1px solid var(--mist); border-radius: var(--r-card-l); padding: var(--s-13); display: flex; flex-direction: column; gap: var(--s-6); }
.card-l { transition: border-color .15s, transform .15s; }
.card-l:hover { border-color: var(--blue); }
.rule-item { display: flex; flex-direction: column; gap: var(--s-4); padding-top: var(--s-9); border-top: 1px solid var(--line); }
.rule-item.tight { gap: var(--s-3); padding-top: var(--s-7); }
.tiles { gap: 1px; background: var(--navy-3); border: 1px solid var(--navy-3); border-radius: var(--r-panel); overflow: hidden; }
.tile { background: var(--navy); padding: var(--s-14) var(--s-13); display: flex; flex-direction: column; gap: var(--s-6); }
.tiles-light { gap: 1px; background: var(--mist); border: 1px solid var(--mist); border-radius: var(--r-panel); overflow: hidden; }
.tiles-light .tile { background: var(--white); }
.photo { width: 100%; object-fit: cover; border-radius: var(--r-panel); }

/* ---------- icons (line art on a hexagon) ---------- */
.hex { width: 64px; height: 64px; flex-shrink: 0; }
.hex-bg { fill: var(--art-bg); }
.hex-fill { fill: var(--art-fill); }
.hex-line { fill: none; stroke: var(--art-line); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.hex-solid { fill: var(--art-line); }
.feat { display: flex; align-items: flex-start; gap: var(--s-8); }
.feat-text { display: flex; flex-direction: column; gap: var(--s-3); padding-top: var(--s-3); }

/* ---------- forms ---------- */
.field { width: 100%; min-height: var(--btn-h); border: 1px solid var(--line); border-radius: var(--r-m); padding: var(--s-6) var(--s-7); font: inherit; font-size: var(--fs-base); color: var(--ink); background: var(--white); }
.field:focus { outline: 2px solid var(--blue); outline-offset: 1px; border-color: var(--blue); }
.field[aria-invalid="true"] { border-color: var(--bad-fg); }
textarea.field { min-height: 120px; resize: vertical; }
.lbl { display: flex; flex-direction: column; gap: var(--s-3); font-size: var(--fs-xs); font-weight: 600; color: var(--ink-2); }
.lbl .opt { font-weight: 500; color: var(--ink-3); }
.err { font-size: var(--fs-xs); font-weight: 500; color: var(--bad-fg); }
.err:empty { display: none; }
.form-alert { padding: var(--s-6) var(--s-8); border-radius: var(--r-m); background: var(--bad-bg); color: var(--bad-fg); font-size: var(--fs-small); }
.form-alert:empty { display: none; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- info tip (help text behind an icon: hover, focus or tap) ---------- */
.tip { position: relative; display: inline-flex; vertical-align: middle; }
.tip-btn { width: 22px; height: 22px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--white); color: var(--ink-3); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; font-size: var(--fs-mono); font-weight: 600; font-family: var(--font); }
.tip-body { position: absolute; left: 50%; top: calc(100% + var(--s-4)); transform: translateX(-50%); width: 260px; background: var(--navy); color: var(--white); font-size: var(--fs-xs); font-weight: 400; line-height: var(--lh-snug); padding: var(--s-5) var(--s-6); border-radius: var(--r-m); z-index: 10; display: none; text-align: left; letter-spacing: 0; text-transform: none; }
.tip:hover .tip-body, .tip:focus-within .tip-body, .tip.open .tip-body { display: block; }

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .g6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hide-t { display: none !important; }
  .nav-links .nv-link { padding: var(--s-5) var(--s-4); }
}
@media (max-width: 760px) {
  .wrap, .foot-in { padding-left: var(--wrap-pad-m); padding-right: var(--wrap-pad-m); }
  .g2, .g3, .g4, .g5, .split { grid-template-columns: minmax(0, 1fr); }
  .g6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .row-m { flex-direction: column; align-items: flex-start; }
  .row-m.stretch { align-items: stretch; }
  .hide-m { display: none !important; }
  .hide-d { display: flex !important; }
  .h1 { font-size: var(--fs-display-m); line-height: var(--lh-head); }
  .h2, .h2s { font-size: var(--fs-h2-m); line-height: 1.12; }
  .h3 { font-size: var(--fs-h3-m); }
  .lead { font-size: var(--fs-lead-m); }
  .sec { padding: var(--s-18) 0; }
  .hero { padding: var(--s-16) 0 var(--s-17); }
  .band { padding: var(--s-12); }
  .nav-links, .nav-act { display: none; }
  .nav-toggle { display: inline-flex; }
  .foot-base { flex-direction: column; align-items: flex-start; }
}
@media (min-width: 761px) { .nav.open .nav-menu { display: none; } }

/* art.css */
/* ROS website — illustration colours, applied by class (scripts/svg-classes.mjs writes them). */
.f-bg { fill: var(--art-bg); } .f-fill { fill: var(--art-fill); } .f-line { fill: var(--art-line); } .f-white { fill: var(--white); }
.f-floor { fill: var(--art-floor); } .f-none { fill: none; } .f-navy { fill: var(--navy); } .f-navy2 { fill: var(--navy-2); } .f-navy3 { fill: var(--navy-3); }
.f-blue { fill: var(--blue); } .f-sky { fill: var(--sky); } .f-mist { fill: var(--mist); } .f-paper { fill: var(--paper); } .f-plum { fill: var(--plum); }
.f-plumdeep { fill: var(--plum-deep); } .f-plumtint { fill: var(--plum-tint); } .f-rule { fill: var(--line); } .f-ink3 { fill: var(--ink-3); } .f-ink2 { fill: var(--ink-2); }
.s-line { stroke: var(--art-line); } .s-fill { stroke: var(--art-fill); } .s-white { stroke: var(--white); } .s-navy { stroke: var(--navy); } .s-blue { stroke: var(--blue); }
.s-plum { stroke: var(--plum); } .s-rule { stroke: var(--line); } .s-mist { stroke: var(--mist); } .s-none { stroke: none; }
.o-f16 { fill-opacity: .16; } .o-s22 { stroke-opacity: .22; } .o-o50 { opacity: .5; }

/* blocks/home.css */
/* Home page blocks: hero with product panel, product family, photo strip, capability slider,
   counter illustration, statement grid. */
.hero:has(+ .fam-sec) { padding-bottom: 0; }
.fam-sec { padding: var(--s-22) 0 var(--s-19); }
.hero-btns { justify-content: center; }
.hero-media { margin-top: var(--s-17); }
.hero-frame { position: relative; max-width: 1176px; margin: 0 auto; }
.hero-img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-big); background: var(--navy); }
.hero-cap { position: absolute; left: var(--s-10); bottom: var(--s-10); font-family: var(--mono); font-size: var(--fs-mono); letter-spacing: var(--track-mono); color: var(--white); background: var(--scrim); padding: var(--s-4) var(--s-7); border-radius: var(--r-pill); }

/* device panel (product screen drawn in HTML) */
.dev-panel { position: absolute; right: var(--s-13); top: var(--s-13); bottom: var(--s-13); width: 360px; background: var(--navy); border-radius: var(--r-panel); padding: var(--s-7); box-shadow: var(--shadow-device); display: flex; flex-direction: column; gap: var(--s-5); text-align: left; }
.dev-screen { background: var(--white); border-radius: var(--r-l); overflow: hidden; color: var(--ink); flex: 1; display: flex; flex-direction: column; }
.dev-head { background: var(--plum); color: var(--white); padding: var(--s-6) var(--s-7); display: flex; justify-content: space-between; align-items: center; }
.dev-title { font-size: var(--fs-xs); font-weight: 600; }
.dev-meta { font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: var(--track-mono-s); }
.floor { flex: 1; padding: var(--s-5); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: 7px; }
.tbl { border-radius: 9px; border: 1px solid var(--free-line); background: var(--white); padding: var(--s-3) var(--s-4); display: flex; flex-direction: column; justify-content: space-between; font-size: var(--fs-micro); }
.tbl-top { display: flex; justify-content: space-between; align-items: baseline; }
.tbl-n { font-weight: 700; font-size: var(--fs-xs); }
.tbl-meta { font-family: var(--mono); font-size: var(--fs-nano); color: var(--ink-3); }
.tbl-st { font-weight: 600; color: var(--ink-3); }
.tbl-seated { border-color: var(--plum-line); background: var(--plum-tint); }
.tbl-seated .tbl-st { color: var(--plum-ink); }
.tbl-kot { border-color: var(--warn-line); background: var(--warn-bg); }
.tbl-kot .tbl-st { color: var(--warn-fg); }
.tbl-billed { border-color: var(--ok-line); background: var(--ok-bg); }
.tbl-billed .tbl-st { color: var(--ok-fg); }
.tbl-sel { border: 2px solid var(--plum); }
.dev-foot { border-top: 1px solid var(--mist); padding: var(--s-5) var(--s-6); display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); font-size: var(--fs-xs); }
.dev-sel { font-weight: 700; }
.dev-sub { font-family: var(--mono); font-size: var(--fs-micro); color: var(--ink-3); }
.dev-btn { font-weight: 600; background: var(--plum); color: var(--white); border-radius: var(--r-s); padding: 9px var(--s-7); font-size: var(--fs-mono); }
.dev-chips { gap: var(--s-4); }
.dev-chip { background: var(--navy-2); border-radius: var(--r-m); padding: 9px var(--s-5); color: var(--white); font-size: var(--fs-tiny); line-height: var(--lh-snug); }
.dev-k { color: var(--sky); font-family: var(--mono); }

/* product family */
.fam { background: var(--navy); border-radius: var(--r-big); padding: var(--s-15); color: var(--white); display: flex; flex-direction: column; gap: var(--s-12); }
.fam-card { background: var(--navy-2); border: 1px solid var(--navy-3); border-radius: var(--r-card); padding: var(--s-11); display: flex; flex-direction: column; gap: var(--s-7); color: var(--white); }
.fam-card:hover { color: var(--white); }
.fam-top { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); }
.fam-logo { width: 124px; height: 27px; flex-shrink: 0; }
.fam-kind { font-family: var(--mono); font-size: var(--fs-tiny); letter-spacing: var(--track-mono); color: var(--on-dark-2); }
.fam-chips { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.fam-chip-t { font-size: var(--fs-mono); padding: 5px var(--s-5); border-radius: var(--r-pill); background: var(--navy-3); color: var(--mist); line-height: 1.4; }
.fam-line { font-size: var(--fs-xs); line-height: var(--lh-snug); color: var(--on-dark-soft); }
.fam-extra { display: flex; align-items: center; gap: var(--s-7); padding: var(--s-8) var(--s-10); border: 1px dashed var(--navy-3); border-radius: var(--r-xl); color: var(--white); }
.fam-extra:hover { color: var(--white); border-color: var(--on-dark-edge); }
.fam-chip { width: 32px; height: 32px; flex-shrink: 0; }
.fam-extra-t { font-size: var(--fs-small); line-height: var(--lh-snug); color: var(--on-dark-strong); }
.fam-extra-t strong { color: var(--white); font-weight: 600; }
.fam-extra-b { margin: 0 var(--s-3); }

/* built-for strip */
.bf-wrap { padding-top: var(--s-15); padding-bottom: var(--s-15); }
.bf-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-6); }
.bf-item { position: relative; border-radius: var(--r-card); overflow: hidden; }
.bf-img { width: 100%; height: 200px; object-fit: cover; border-radius: var(--r-card); }
.bf-cap { position: absolute; left: var(--s-6); bottom: var(--s-6); font-size: var(--fs-small); font-weight: 600; color: var(--ink); background: var(--white); padding: var(--s-3) var(--s-6); border-radius: var(--r-pill); }

/* capability slider: two rows, three columns visible, scroll sideways */
.cap-slider { display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, auto); grid-auto-columns: calc((100% - 64px) / 3); gap: var(--s-15) var(--s-14); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.cap-slider::-webkit-scrollbar { display: none; }
.cap-item { scroll-snap-align: start; }
.dots { display: flex; justify-content: center; gap: var(--s-4); }
.dot-btn { width: var(--s-4); height: var(--s-4); padding: 0; border: 0; border-radius: var(--r-pill); background: var(--dot-off); cursor: pointer; }
.dot-btn[aria-selected="true"] { width: var(--s-13); background: var(--blue); }

/* illustrations */
.art-frame { width: 100%; height: 460px; display: flex; align-items: center; justify-content: center; }
.art-svg { width: 100%; height: 100%; }

/* statement + cards */
.why-st { font-size: var(--fs-h2); line-height: var(--lh-head); letter-spacing: var(--track-tight); white-space: nowrap; }
.why-card { background: var(--white); border: 1px solid var(--mist); border-radius: var(--r-card-l); padding: var(--s-12) var(--s-13); gap: var(--s-9); }

@media (max-width: 1024px) {
  .cap-slider { grid-auto-columns: calc((100% - 32px) / 2); }
}
@media (max-width: 760px) {
  .fam { padding: var(--s-12); }
  .bf-row { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--wrap-pad-m)); padding: 0 var(--wrap-pad-m) var(--s-2); scroll-padding: 0 var(--wrap-pad-m); scrollbar-width: none; }
  .bf-row::-webkit-scrollbar { display: none; }
  .bf-item { flex: 0 0 78%; scroll-snap-align: start; }
  .bf-img { height: 220px; }
  .cap-slider { grid-auto-columns: 85%; }
  .art-frame { height: auto; }
  .why-st { font-size: var(--fs-display-m); white-space: normal; }
}
.sec-tail { padding-bottom: 160px; }
@media (max-width: 760px) { .sec-tail { padding-bottom: var(--s-18); } }

/* blocks/pages.css */
/* Solutions, Capabilities, About, Contact, Demo, Legal, Cookies and 404 (pg-* blocks).
   Colours from tokens.css + tokens-pages.css only. Breakpoints 1024px / 760px. */

/* ---------- shared bits ---------- */
.pg-soft-l { font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--pg-soft); }
.pg-soft-18 { font-size: var(--fs-lead-s); line-height: var(--lh-body); color: var(--pg-soft); max-width: 640px; }
.pg-soft-m { font-size: var(--fs-base); line-height: var(--lh-snug); color: var(--pg-soft); }
.pg-soft-s { font-size: var(--fs-small); line-height: var(--lh-snug); color: var(--pg-soft); }
.pg-soft-d { font-size: var(--fs-lead-s); line-height: var(--lh-body); color: var(--on-dark-3); max-width: 640px; }
.pg-num { font-family: var(--mono); font-size: var(--fs-xs); letter-spacing: var(--track-mono); color: var(--blue); }
.pg-rule { display: flex; flex-direction: column; gap: var(--s-3); padding-top: var(--s-7); border-top: 1px solid var(--line); }
.pg-jump { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-4); max-width: 900px; }
.pg-jump-a { min-height: var(--tap); font-size: var(--fs-small); }
.pg-jump-s { justify-content: flex-start; max-width: none; }
.pg-jump-s .pg-jump-a { min-height: 40px; padding: 0 var(--s-8); }
.pg-panel { background: var(--white); border: 1px solid var(--mist); border-radius: var(--r-big); padding: var(--s-15); box-shadow: var(--pg-shadow-panel); }
.pg-btn-w { background: var(--white); }
.dot.pg-dot-plan { background: var(--pg-dot-plan); }
.pg-ddot-r { background: var(--plum); } .pg-ddot-q { background: var(--dot-q); } .pg-ddot-e { background: var(--pg-dot-e-deep); } .pg-ddot-d { background: var(--tomato); } .pg-ddot-p { background: var(--dot-p); }

/* info tip as drawn on these pages: a bare (i) that opens above */
.pg-tip-i { width: 28px; height: 28px; border: 0; background: transparent; color: var(--ink-3); }
.pg-tip-i:hover { background: var(--mist); }
.pg-tip-i svg { width: var(--s-8); height: var(--s-8); }
.pg-tip-c { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.pg-tip .tip-body { font-size: var(--fs-xs); line-height: var(--lh-snug); padding: var(--s-5) var(--s-6); box-shadow: var(--pg-shadow-tip); z-index: 20; font-weight: 400; }
.pg-tip-up .tip-body { top: auto; bottom: calc(100% + var(--s-4)); }

/* ---------- centred hero ---------- */
.pg-hc-in { gap: var(--s-10); }
.pg-hc-links { padding: var(--s-22) 0 var(--s-17); }
.pg-hc-links .pg-hc-in { gap: var(--s-13); }
.pg-hc-links .pg-hc-h { max-width: 900px; }
.pg-hc-links .pg-hc-l { max-width: var(--measure); }
.pg-hc-page { padding: 104px 0 var(--s-22); }
.pg-hc-page .pg-hc-h { max-width: 920px; }
.pg-hc-page .pg-hc-l { max-width: 640px; }
.pg-hc-done { padding: 112px 0 var(--s-23); }
.pg-hc-done .pg-hc-h { max-width: 820px; }
.pg-hc-done .pg-hc-l { max-width: var(--measure-n); }
.pg-hc-btns { justify-content: center; margin-top: var(--s-4); }
.pg-hc-icon { width: 96px; height: 96px; }

/* ---------- solutions: restaurant types ---------- */
.pg-seg { padding: var(--s-22) 0; }
.pg-seg-in { gap: var(--s-18); }
.pg-seg-img { width: 100%; height: 440px; object-fit: cover; border-radius: var(--r-panel); }
.pg-seg-text { order: 1; }
.pg-seg-flip .pg-seg-img { order: 2; }
@media (max-width: 760px) { .pg-seg-flip .pg-seg-img { order: 0; } .pg-seg-img { height: 220px; } }
.pg-seg-pills { gap: var(--s-4); }
.pg-seg-pill { padding: 7px var(--s-6); }
.pg-seg-caps { gap: var(--s-10) var(--s-12); width: 100%; }

/* ---------- capabilities ---------- */
.pg-cap-hero { padding: 88px 0 var(--s-17); border-bottom: 1px solid var(--mist); }
.pg-cap-bar { display: flex; justify-content: space-between; align-items: center; gap: var(--s-10); flex-wrap: wrap; }
.pg-legend { display: flex; flex-wrap: wrap; gap: var(--s-7); font-size: var(--fs-xs); color: var(--ink-2); }
.pg-leg { display: inline-flex; align-items: center; gap: var(--s-3); }
.pg-capg-sec { padding: var(--s-17) 0 var(--s-22); }
.pg-capg { display: flex; gap: var(--s-12); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--s-2); scrollbar-width: none; }
.pg-capg::-webkit-scrollbar { display: none; }
.pg-capg-card { flex: 0 0 calc((100% - 48px) / 3); scroll-snap-align: start; background: var(--white); border: 1px solid var(--mist); border-radius: var(--r-panel); padding: var(--s-13); display: flex; flex-direction: column; gap: var(--s-3); scroll-margin-top: var(--s-12); }
.pg-capg-h { font-size: var(--fs-h3-m); }
.pg-capg-n { font-size: var(--fs-small); color: var(--ink-4); margin-bottom: var(--s-5); }
.pg-capg-it { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-7) 0; border-top: 1px solid var(--mist); }
.pg-capg-l { font-size: var(--fs-small); line-height: var(--lh-snug); color: var(--ink-2); }
.pg-chips { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-1); }
.pg-chip { background: var(--white); color: var(--ink); border: 1px solid var(--line); }
.pg-chip-plan { background: var(--chip); color: var(--ink-2); border-color: var(--chip); }

/* ---------- line-icon tiles ---------- */
.pg-lt-head { max-width: 1100px; }
.pg-li { width: 26px; height: 26px; }
.pg-li-path { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.pg-li-sky { color: var(--sky); }
.pg-li-blue { color: var(--blue); width: 28px; height: 28px; }
.dark .pg-lt .body { color: var(--pg-on-dark-7); }
.pg-lt-sec { padding: var(--s-22) 0; }
.pg-lt-grid { gap: var(--s-8); }
.pg-lt-card { background: var(--white); border: 1px solid var(--mist); border-radius: var(--r-card-l); padding: var(--s-13); display: flex; flex-direction: column; gap: var(--s-6); }

/* ---------- about: family, rules, people ---------- */
.pg-pf { background: var(--navy-2); border: 1px solid var(--navy-3); border-radius: var(--r-card); padding: var(--s-12); display: flex; flex-direction: column; gap: var(--s-7); color: var(--white); }
.pg-pf:hover { color: var(--white); }
.pg-pf-top { display: flex; justify-content: space-between; align-items: center; }
.pg-pf-tile { width: 44px; height: 44px; flex-shrink: 0; }
.pg-pf-kind { font-size: var(--fs-small); font-weight: 500; color: var(--pg-on-dark-half); margin-top: calc(-1 * var(--s-4)); }
.pg-ig-rules { gap: var(--s-15) var(--s-16); }
.pg-ig-cards { padding: 0 0 var(--s-23); }
.pg-ig-grid { width: 100%; }
.pg-ig-card { background: var(--paper); border: 1px solid var(--mist); border-radius: var(--r-card-l); padding: var(--s-13); text-align: left; }
.pg-ig-cards .row { justify-content: center; }
.pg-people { max-width: 880px; }
.pg-person { background: var(--white); border: 1px solid var(--mist); border-radius: var(--r-card-l); padding: var(--s-13); display: flex; align-items: center; gap: var(--s-10); }
.pg-ini { width: 64px; height: 64px; border-radius: var(--r-pill); background: var(--art-fill); color: var(--blue); font-size: var(--fs-h4); font-weight: 600; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pg-people-sec + .sec { padding-bottom: 160px; }
.pg-seg + .sec:not(.pg-seg) { border-top: 1px solid var(--mist); }

/* ---------- forms (contact + demo) ---------- */
.pg-form { display: flex; flex-direction: column; gap: var(--s-10); }
.pg-fgrid { gap: var(--s-8); }
.pg-f { display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
.pg-lbl { font-size: var(--fs-small); font-weight: 600; color: var(--ink); }
.pg-lbl-row { display: flex; align-items: center; gap: var(--s-1); }
.pg-req { color: var(--pg-req); }
.pg-opt { font-weight: 400; color: var(--ink-3); }
.pg-form .err { color: var(--pg-req); font-weight: 400; }
.pg-form .field[aria-invalid="true"] { border-color: var(--pg-req); }
.pg-consent { display: flex; align-items: flex-start; gap: var(--s-6); font-size: var(--fs-small); line-height: var(--lh-snug); color: var(--ink-2); }
.pg-consent input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--blue); flex-shrink: 0; }
.pg-consent label { cursor: pointer; }
.pg-cform { gap: var(--s-9); }
.pg-cform .pg-f { gap: var(--s-4); }
.pg-cform .pg-consent { gap: var(--s-5); }
textarea.pg-msg { min-height: 140px; }
.pg-csend { align-self: flex-start; min-width: 180px; }
.pg-dform-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-6); flex-wrap: wrap; }
.pg-dform-t { font-size: var(--fs-h3-m); font-weight: 700; letter-spacing: -0.015em; line-height: 1.3; }
.pg-dform-req { font-size: var(--fs-xs); color: var(--ink-3); }
.pg-alert { background: var(--pg-alert-bg); border: 1px solid var(--pg-alert-line); color: var(--pg-alert-fg); border-radius: var(--r-l); padding: var(--s-6) var(--s-7); font-weight: 500; }
.pg-hr { height: 1px; background: var(--mist); }
.pg-fs { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: var(--s-3); min-width: 0; }
.pg-legend-t { padding: 0; margin-bottom: var(--s-3); }
.pg-methods { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.pg-pchips { display: flex; gap: var(--s-4); flex-wrap: wrap; }
.pg-mchip, .pg-pchip { position: relative; min-height: var(--tap); display: inline-flex; align-items: center; border: 1px solid var(--line); background: var(--white); color: var(--ink); font-size: var(--fs-small); font-weight: 600; cursor: pointer; }
.pg-mchip { padding: 0 var(--s-7); border-radius: var(--r-m); }
.pg-pchip { gap: var(--s-4); padding: 0 var(--s-8); border-radius: var(--r-pill); }
.pg-mchip input, .pg-pchip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pg-mchip:has(input:checked) { background: var(--navy); border-color: var(--navy); color: var(--white); }
.pg-pchip:has(input:checked) { background: var(--pg-chip-on); border-color: var(--blue); }
.pg-mchip:has(input:focus-visible), .pg-pchip:has(input:focus-visible) { outline: 2px solid var(--blue); outline-offset: 2px; }
.pg-pchip-k { font-weight: 400; color: var(--ink-3); }
.pg-dform .pg-consent { gap: var(--s-6); }
.pg-dsend { min-height: 52px; font-size: var(--fs-body); }
.pg-sent { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-8); padding: var(--s-12) 0; }
.pg-sent[hidden] { display: none; }
.pg-sent-icon { width: 72px; height: 72px; }
.pg-sent-h { font-size: var(--fs-h2-m); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.pg-sent-l { margin-top: calc(-1 * var(--s-4)); font-size: 17px; color: var(--pg-soft); }

/* ---------- contact ---------- */
.pg-contact { padding: var(--s-22) 0 var(--s-23); }
.pg-contact-in { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--s-18); align-items: start; }
.pg-contact-lead { margin-top: calc(-1 * var(--s-6)); max-width: 440px; }
.pg-contact-links { width: 100%; max-width: 440px; margin-top: var(--s-6); }
.pg-clink { background: var(--white); border: 1px solid var(--mist); border-radius: var(--r-card); padding: var(--s-10); display: flex; align-items: center; gap: var(--s-8); color: var(--ink); }
.pg-clink:hover { color: var(--ink); }
.pg-clink-icon { width: 56px; height: 56px; }
.pg-clink-t { font-size: 17px; font-weight: 600; }

/* ---------- demo ---------- */
.pg-demo { padding: var(--s-20) 0 var(--s-23); border-bottom: 1px solid var(--mist); }
.pg-demo-in { gap: var(--s-18); align-items: start; }
.pg-demo-h { font-size: 56px; }
.pg-demo-l { font-size: 19px; }
.pg-eb { margin-bottom: var(--s-7); }
.pg-dstep { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-9) 0; border-top: 1px solid var(--line); }
.pg-dstep:last-child { border-bottom: 1px solid var(--line); }
.pg-show { gap: var(--s-4); }
.pg-show-chip { display: inline-flex; align-items: center; gap: var(--s-4); background: var(--white); border: 1px solid var(--mist); border-radius: var(--r-pill); padding: var(--s-4) var(--s-7); font-size: var(--fs-small); font-weight: 600; }
.pg-show-st { padding: var(--s-1) var(--s-4); font-size: var(--fs-tiny); }
.pg-show-st.st-comingsoon { background: var(--mist); }

/* ---------- legal ---------- */
.pg-lh { padding: var(--s-20) 0 var(--s-17); border-bottom: 1px solid var(--mist); }
.pg-lh-h { font-size: 56px; }
.pg-lh-row { gap: var(--s-6); }
.pg-lh-pill { font-size: var(--fs-xs); padding: var(--s-3) var(--s-6); }
.pg-doc { padding: var(--s-19) 0 var(--s-23); }
.pg-doc-in { grid-template-columns: 260px minmax(0, 1fr); gap: var(--s-19); align-items: start; }
.pg-toc { position: sticky; top: var(--s-12); display: flex; flex-direction: column; gap: var(--s-2); }
.pg-toc-l { margin-bottom: var(--s-5); }
.pg-toc-doc { display: flex; align-items: center; min-height: var(--tap); padding: 0 var(--s-7); border-radius: var(--r-m); font-size: var(--fs-base); font-weight: 600; color: var(--ink); border-left: 2px solid transparent; }
.pg-toc-doc.on { border-left-color: var(--blue); background: var(--paper); }
.pg-toc-doc:hover { color: var(--ink); background: var(--paper); }
.pg-toc-sec { display: block; padding: var(--s-3) var(--s-7) var(--s-3) var(--s-13); font-size: var(--fs-small); color: var(--ink-3); }
.pg-toc-sec:hover { color: var(--ink); }
.pg-doc-body { gap: var(--s-19); max-width: var(--measure-m); min-width: 0; }
.pg-doc-head { padding-bottom: var(--s-10); border-bottom: 2px solid var(--navy); }
.pg-doc-t { font-size: var(--fs-display-m); line-height: var(--lh-h2s); font-weight: 700; letter-spacing: -0.02em; }
.pg-doc-i { font-size: 17px; line-height: 1.65; color: var(--ink-2); }
.pg-doc-sec { scroll-margin-top: var(--s-12); }
.pg-doc-p { font-size: var(--fs-body); line-height: 1.75; color: var(--ink-2); }
.pg-doc-ul { padding-left: var(--s-11); display: flex; flex-direction: column; gap: var(--s-4); list-style: disc; }
.pg-doc-ul li { font-size: var(--fs-body); line-height: 1.65; color: var(--ink-2); }
.pg-doc-note { background: var(--paper); border: 1px solid var(--mist); border-radius: var(--r-card); padding: var(--s-12) var(--s-13); display: flex; flex-direction: column; gap: var(--s-4); }
.pg-doc-note .pg-doc-p { line-height: var(--lh-body); }

/* ---------- cookies ---------- */
.pg-ck { padding: var(--s-22) 0 140px; }
.pg-ck-in { max-width: 880px; }
.pg-ck-list { border: 1px solid var(--mist); border-radius: var(--r-panel); overflow: visible; }
.pg-ck-row { display: flex; align-items: center; gap: var(--s-10); padding: var(--s-12) var(--s-13); border-bottom: 1px solid var(--mist); background: var(--white); }
.pg-ck-row:first-child { border-radius: var(--r-panel) var(--r-panel) 0 0; }
.pg-ck-row:last-child { border-radius: 0 0 var(--r-panel) var(--r-panel); }
.pg-ck-text { flex: 1; display: flex; flex-direction: column; gap: var(--s-2); }
.pg-ck-t { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-h6); font-weight: 600; }
.pg-switch { width: 52px; height: 30px; border-radius: var(--r-pill); border: 0; padding: 3px; background: var(--dot-off); cursor: pointer; display: inline-flex; justify-content: flex-start; flex-shrink: 0; }
.pg-switch[aria-checked="true"] { background: var(--blue); justify-content: flex-end; }
.pg-switch[disabled], .pg-switch.locked { opacity: .6; cursor: not-allowed; }
.pg-knob { width: 24px; height: 24px; border-radius: var(--r-pill); background: var(--white); box-shadow: var(--pg-shadow-knob); }
.pg-ck .btn[disabled] { cursor: not-allowed; }
.pg-banner { position: fixed; left: var(--s-12); right: var(--s-12); bottom: var(--s-12); z-index: 30; display: flex; justify-content: center; }
.pg-banner[hidden] { display: none; }
.pg-banner-in { width: 100%; max-width: var(--measure-w); background: var(--navy); color: var(--white); border-radius: var(--r-panel); padding: var(--s-10) var(--s-12); display: flex; align-items: center; gap: var(--s-10); box-shadow: var(--pg-shadow-banner); }
.pg-banner-t { flex: 1; display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-body); font-weight: 500; }
.pg-banner .pg-tip-i { color: var(--on-dark-2); }
.pg-banner .pg-tip-i:hover { background: var(--navy-3); }
.pg-banner-btns { gap: var(--s-5); }

/* ---------- 404 ---------- */
.pg-nf { padding: var(--s-23) 0; }
.pg-fp { background: var(--navy); border-radius: var(--r-big); padding: var(--s-10); }
.pg-fp-screen { background: var(--pg-sheet); border-radius: var(--r-xl); padding: var(--s-8); display: flex; flex-direction: column; gap: var(--s-6); }
.pg-fp-head { display: flex; justify-content: space-between; align-items: center; font-size: var(--fs-xs); }
.pg-fp-title { font-weight: 600; }
.pg-fp-id { font-family: var(--mono); font-size: var(--fs-tiny); color: var(--ink-3); }
.pg-fp-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 64px; gap: var(--s-4); }
.pg-fp-t { border-radius: var(--r-m); border: 1px solid var(--free-line); background: var(--white); padding: 7px 9px; display: flex; flex-direction: column; justify-content: space-between; font-size: var(--fs-tiny); }
.pg-fp-n { font-weight: 700; font-size: var(--fs-xs); }
.pg-fp-st { font-weight: 600; color: var(--ink-3); }
.pg-fp-seated { background: var(--plum-tint); border-color: var(--plum-line); }
.pg-fp-seated .pg-fp-st { color: var(--plum-ink); }
.pg-fp-missing { background: var(--pg-chip-on); border: 1.5px dashed var(--blue); }
.pg-fp-missing .pg-fp-st { color: var(--blue-deep); }
.pg-nf-links { padding: 0 0 var(--s-23); }
.pg-nf-card { display: flex; flex-direction: column; gap: var(--s-5); padding: var(--s-13); border: 1px solid var(--mist); border-radius: var(--r-card-l); color: var(--ink); background: var(--white); }
.pg-nf-card:hover { color: var(--ink); }

/* ---------- tablet ---------- */
@media (max-width: 1024px) {
  .pg-capg-card { flex-basis: calc((100% - 24px) / 2); }
  .pg-pf { min-width: 0; }
}

/* ---------- phone ---------- */
@media (max-width: 760px) {
  .pg-hc-links, .pg-hc-page, .pg-hc-done, .pg-cap-hero, .pg-contact, .pg-demo, .pg-lh, .pg-ck, .pg-nf { padding: var(--s-16) 0 var(--s-17); }
  .pg-seg, .pg-capg-sec, .pg-lt-sec, .pg-doc { padding: var(--s-18) 0; }
  .pg-ig-cards { padding: var(--s-18) 0; }
  .pg-people-sec + .sec { padding-bottom: var(--s-18); }
  .pg-demo-h, .pg-lh-h { font-size: var(--fs-display-m); }
  .pg-doc-t { font-size: var(--fs-h2-m); }
  .pg-panel, .pg-fp { padding: var(--s-12); }
  .pg-capg-card { flex-basis: 85%; }
  .pg-contact-in, .pg-doc-in { grid-template-columns: minmax(0, 1fr); }
  .pg-cap-bar { flex-direction: column; align-items: flex-start; }
  .pg-hc-btns { align-items: center; }
  .pg-demo-l, .pg-cap-hero .lead-s, .pg-seg .lead-s, .pg-lt-head .lead-s { font-size: var(--fs-lead-m); }
  .pg-banner { left: var(--s-8); right: var(--s-8); bottom: var(--s-8); }
  .pg-banner-in { align-items: stretch; }
}

/* the design leaves these at the browser's normal line height */
.pg-lbl, .pg-form .field, .pg-mchip, .pg-pchip, .pg-show-chip, .pg-dstep .h6, .pg-demo .eyebrow, .pg-dform-req,
.pg-seg-pill, .pg-chip, .pg-leg, .pg-capg-n, .pg-capg-it .t-strong, .pg-seg-caps .t-strong, .pg-num,
.pg-pf .h5, .pg-pf-kind, .pg-ig .h6, .pg-person .h5, .pg-clink-t, .pg-ck-t, .pg-lt .h5, .pg-lt .h6,
.pg-fp-head, .pg-fp-t, .pg-nf-card .h4, .pg-nf-card .more, .pg-toc-l, .pg-doc-note .eyebrow, .pg-doc-sec .h4, .pg-sent-h,
.pg-lh-pill, .pg-ck .eyebrow, .pg-banner-t { line-height: normal; }
.pg-ck .btn, .pg-csend { font-size: var(--fs-body); }
.pg-nf-card .more { color: var(--blue); }
.pg-toc-sec { line-height: normal; }
.pg-soft-m, .pg-lh-row .body, .pg-seg .more, .pg-soft-s, .pg-show-st { line-height: normal; }

/* blocks/products.css */
/* Product pages (ROS'R, ROS'Q, ROS'E, ROS'D, ROS'P): hero with device, step cards, feature
   list + panels, guest-screen showcase, related products, labelled tiles, capability grid,
   and the device / phone / kiosk / board illustrations. Tokens only. */

/* ---------- hero ---------- */
.pd-hero { padding: var(--s-21) 0 var(--s-22); }
.pd-hero-115 { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: var(--s-17); }
.pd-hero-110 { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--s-17); }
.pd-status { display: flex; align-items: center; gap: var(--s-2); }
.pd-hero .st-planned { background: var(--navy-3); color: var(--mist); }
.pd-tip-btn { width: 24px; height: 24px; border: 0; background: transparent; color: var(--ink-3); }
.pd-tip-btn:hover { color: var(--ink); }
.pd-tip-i { width: var(--s-8); height: var(--s-8); }
.pd-tip-i .ico { stroke-width: 1.8; }
.pd-quiet { margin-top: calc(-1 * var(--s-6)); font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--pd-ink-5); max-width: 520px; }
.pd-quiet-s { font-size: var(--fs-lead-s); line-height: var(--lh-body); color: var(--pd-ink-5); max-width: 640px; }

/* early-access form (ROS'D hero) */
.pd-form { width: 100%; max-width: var(--measure-n); display: flex; flex-direction: column; gap: var(--s-4); }
.pd-form-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; grid-template-areas: "le lo ." "ie io b" "ee eo ."; column-gap: var(--s-5); row-gap: var(--s-3); }
.pd-l { font-size: var(--fs-xs); font-weight: 600; color: var(--ink-2); line-height: normal; }
.pd-l-e { grid-area: le; } .pd-l-o { grid-area: lo; }
.pd-i-e { grid-area: ie; } .pd-i-o { grid-area: io; }
.pd-i-e, .pd-i-o { font-weight: 600; }
.pd-r-e { grid-area: ee; } .pd-r-o { grid-area: eo; }
.pd-sub-btn { grid-area: b; }
.pd-consent { display: flex; align-items: flex-start; gap: var(--s-4); font-size: var(--fs-xs); font-weight: 500; line-height: var(--lh-snug); color: var(--ink-3); cursor: pointer; }
.pd-consent input { width: var(--s-8); height: var(--s-8); margin: var(--s-1) 0 0; flex-shrink: 0; accent-color: var(--blue); }
.pd-aside { display: flex; align-items: center; gap: var(--s-7); font-size: var(--fs-base); color: var(--ink-2); flex-wrap: wrap; }

/* ---------- device panel ---------- */
.pd-dev, .pd-phone, .pd-kiosk, .pd-board { line-height: normal; }
.pd-dev { background: var(--navy); border-radius: var(--r-big); padding: var(--s-10); box-shadow: var(--shadow-card); }
.pd-scr { background: var(--pd-screen); border-radius: var(--r-xl); overflow: hidden; height: 380px; color: var(--ink); display: flex; text-align: left; }
.pd-scr-auto { height: auto; display: block; }
.pd-scr-w { background: var(--white); }
.pd-col { flex-direction: column; }
.pd-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.pd-body { flex: 1; display: flex; min-height: 0; }
.pd-rail { width: 52px; display: flex; flex-direction: column; align-items: center; padding-top: var(--s-7); gap: var(--s-6); flex-shrink: 0; }
.pd-rail-r { background: var(--plum); }
.pd-rail-e { background: var(--pd-e-deep); }
.pd-rail-l, .pd-rail-b { width: 28px; height: 28px; border-radius: var(--r-s); }
.pd-rail-l { background: var(--white); font-weight: 700; font-size: var(--fs-mono); display: flex; align-items: center; justify-content: center; }
.pd-rail-r .pd-rail-l { color: var(--plum); }
.pd-rail-e .pd-rail-l { color: var(--pd-e-deep); }
.pd-rail-b { background: var(--pd-rail-off); }
.pd-rail-b.pd-rail-on { background: var(--pd-rail-on); }
.pd-top { height: 44px; flex-shrink: 0; border-bottom: 1px solid var(--mist); display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: 0 var(--s-7); font-size: var(--fs-xs); }
.pd-top-w { background: var(--white); }
.pd-top-t { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pd-top-mk { display: flex; align-items: center; gap: var(--s-4); }
.pd-mk { width: 22px; height: 22px; border-radius: var(--s-3); flex-shrink: 0; }
.pd-mk-q { background: var(--dot-q); color: var(--white); font-size: var(--fs-tiny); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.pd-mono-s { font-family: var(--mono); font-size: var(--fs-tiny); white-space: nowrap; }
.pd-ok { color: var(--ok-fg); }
.pd-warn { color: var(--warn-fg); }
.pd-bad { color: var(--pd-red); }
.pd-dim { color: var(--ink-3); }
.pd-strong { font-weight: 600; }

/* ROS'R tables */
.pd-tables { flex: 1; padding: var(--s-7); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 62px; gap: var(--s-4); align-content: start; }
.pd-tbl { border-radius: var(--r-m); border: 1px solid var(--free-line); background: var(--white); padding: 7px 9px; display: flex; flex-direction: column; justify-content: space-between; font-size: var(--fs-tiny); line-height: normal; }
.pd-tbl-n { font-weight: 700; font-size: var(--fs-xs); }
.pd-tbl-st { font-weight: 600; color: var(--ink-3); }
.pd-tbl-seated { background: var(--plum-tint); border-color: var(--plum-line); }
.pd-tbl-seated .pd-tbl-st { color: var(--plum-ink); }
.pd-tbl-kot { background: var(--warn-bg); border-color: var(--warn-line); }
.pd-tbl-kot .pd-tbl-st { color: var(--warn-fg); }
.pd-tbl-bill { background: var(--ok-bg); border-color: var(--ok-line); }
.pd-tbl-bill .pd-tbl-st { color: var(--ok-fg); }

/* order side panel (R, Q, P) */
.pd-side { width: 200px; border-left: 1px solid var(--mist); background: var(--white); padding: var(--s-7); display: flex; flex-direction: column; gap: var(--s-4); font-size: var(--fs-mono); line-height: normal; flex-shrink: 0; }
.pd-side-h { font-weight: 700; font-size: var(--fs-small); }
.pd-side-top { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); }
.pd-tag { font-size: var(--fs-micro); font-weight: 600; padding: var(--r-xs) var(--s-4); border-radius: var(--r-pill); }
.pd-tag-q { background: var(--pd-q-tint); color: var(--pd-q-ink); }
.pd-tag-p { background: var(--plum-tint); color: var(--plum-ink); }
.pd-ln { display: flex; justify-content: space-between; gap: var(--s-3); }
.pd-ln-m { color: var(--ink-3); }
.pd-total { border-top: 1px dashed var(--line); padding-top: var(--s-4); display: flex; justify-content: space-between; font-weight: 700; font-size: var(--fs-small); }
.pd-grow { flex: 1; }
.pd-pay { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--s-3); font-size: var(--fs-tiny); font-weight: 600; text-align: center; }
.pd-pay span { border: 1px solid var(--mist); border-radius: var(--r-s); padding: 7px 0; }
.pd-cta { color: var(--white); font-weight: 600; border-radius: var(--r-s); height: 36px; display: flex; align-items: center; justify-content: center; }
.pd-cta-r { background: var(--plum); }
.pd-cta-q { background: var(--dot-q); }

/* item grid (Q, P) */
.pd-left { flex: 1; padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-5); min-width: 0; }
.pd-cats { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.pd-cat { font-size: var(--fs-tiny); padding: 5px var(--s-5); border-radius: var(--r-pill); background: var(--white); border: 1px solid var(--mist); line-height: normal; }
.pd-cat-on { background: var(--dot-q); border-color: var(--dot-q); color: var(--white); font-weight: 600; }
.pd-items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 66px; gap: var(--s-4); }
.pd-item { border-radius: var(--r-m); border: 1px solid var(--mist); background: var(--white); padding: var(--s-4) var(--s-5); display: flex; flex-direction: column; justify-content: space-between; font-size: var(--fs-mono); line-height: normal; }
.pd-item-n { font-weight: 600; }
.pd-item-p { color: var(--ink-3); }
.pd-item-row { display: flex; justify-content: space-between; }
.pd-item-s { font-family: var(--mono); font-size: var(--fs-micro); }
.pd-out { opacity: .45; }
.pd-search { height: 38px; flex-shrink: 0; border: 1px solid var(--mist); border-radius: var(--r-m); background: var(--white); display: flex; align-items: center; gap: var(--s-4); padding: 0 var(--s-6); font-size: var(--fs-mono); color: var(--ink-3); }
.pd-search-i { width: var(--s-7); height: var(--s-7); }

/* ROS'E screens */
.pd-screens { flex: 1; padding: var(--s-7); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); align-content: start; }
.pd-sc { background: var(--white); border: 1px solid var(--mist); border-radius: var(--r-m); overflow: hidden; display: flex; flex-direction: column; }
.pd-sc-t { height: 62px; display: flex; align-items: center; justify-content: center; }
.pd-sc-deep { background: var(--pd-e-deep); } .pd-sc-mid { background: var(--dot-e); } .pd-sc-grey { background: var(--ink-3); }
.pd-sc-land, .pd-sc-port { border-radius: var(--r-xs); background: var(--pd-thumb); }
.pd-sc-land { width: 46px; height: 26px; }
.pd-sc-port { width: 18px; height: 32px; }
.pd-sc-c { padding: 7px 9px; display: flex; flex-direction: column; gap: 3px; font-size: var(--fs-tiny); line-height: normal; }
.pd-sc-n { font-weight: 600; }
.pd-sc-s { font-weight: 600; }

/* ROS'D orders */
.pd-d-head { background: var(--tomato); color: var(--white); padding: var(--s-6) var(--s-8); display: flex; justify-content: space-between; align-items: center; }
.pd-d-t { font-size: var(--fs-xs); font-weight: 600; }
.pd-d-m { font-family: var(--mono); font-size: var(--fs-tiny); letter-spacing: var(--track-mono-s); }
.pd-orders { padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-4); }
.pd-ord { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: var(--s-6); align-items: center; border: 1px solid var(--mist); border-radius: var(--r-l); padding: var(--s-6) var(--s-7); font-size: var(--fs-xs); line-height: normal; }
.pd-ord-id { font-family: var(--mono); font-size: var(--fs-mono); color: var(--ink-3); }
.pd-ord-x { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.pd-ord-i { font-weight: 600; }
.pd-ord-a { color: var(--ink-3); font-size: var(--fs-mono); }
.pd-st-new { background: var(--bad-bg); color: var(--bad-fg); }
.pd-st-cook { background: var(--warn-bg); color: var(--warn-fg); }
.pd-st-courier { background: var(--info-bg); color: var(--info-fg); }
.pd-st-out { background: var(--ok-bg); color: var(--ok-fg); }

/* chips under the device */
.pd-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); margin-top: var(--s-5); }
.pd-chip { background: var(--navy-2); border-radius: var(--r-m); padding: var(--s-5) var(--s-6); color: var(--white); font-size: var(--fs-tiny); line-height: normal; }
.pd-k { color: var(--sky); font-family: var(--mono); }

/* ---------- step cards ---------- */
.pd-step { background: var(--white); border: 1px solid var(--mist); border-radius: var(--r-card-l); padding: var(--s-12); display: flex; flex-direction: column; gap: var(--s-6); }
.pd-step-n { padding: var(--s-13); }
.pd-num { font-family: var(--mono); font-size: var(--fs-mono); color: var(--blue); line-height: normal; }

/* ---------- features + panels ---------- */
.pd-feats { gap: var(--s-14) var(--s-12); }
.pd-fig { position: relative; border-radius: var(--r-panel); overflow: hidden; min-height: 300px; }
.pd-fig-img { width: 100%; height: 100%; min-height: 300px; object-fit: cover; }
.pd-fig-cap { position: absolute; left: var(--s-7); right: var(--s-7); bottom: var(--s-7); font-size: var(--fs-small); font-weight: 600; line-height: normal; color: var(--white); background: var(--pd-scrim); padding: var(--s-5) var(--s-7); border-radius: var(--r-l); }
.pd-panel { border-radius: var(--r-panel); padding: 36px; display: flex; flex-direction: column; gap: var(--s-8); }
.pd-panel-d { background: var(--navy); color: var(--white); }
.pd-panel-d .body { color: var(--pd-on-dark-74); }
.pd-panel-l { background: var(--paper); border: 1px solid var(--mist); }
.pd-panel-t { font-size: 26px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.25; }
.pd-chain { display: flex; align-items: center; gap: var(--s-5); flex-wrap: wrap; }
.pd-link { font-size: var(--fs-small); padding: var(--s-4) var(--s-7); border-radius: var(--r-m); background: var(--navy-3); line-height: normal; }
.pd-link-on { background: var(--blue); }
.pd-arrow { color: var(--sky); }
.pd-side-photo { width: 100%; height: 340px; object-fit: cover; border-radius: var(--r-panel); }

/* ---------- showcase ---------- */
.pd-pills { display: flex; flex-wrap: wrap; gap: var(--s-4); }
.pd-pill { background: var(--white); border: 1px solid var(--mist); color: var(--ink); font-size: var(--fs-small); padding: var(--s-4) var(--s-7); }
.pd-art-c { display: flex; justify-content: center; }

/* guest menu on a phone (ROS'R) */
.pd-phone { width: 290px; background: var(--navy); border-radius: 40px; padding: var(--s-5); box-shadow: 0 30px 60px -30px var(--pd-shadow); }
.pd-phone-s { background: var(--white); border-radius: var(--s-14); overflow: hidden; }
.pd-phone-img { width: 100%; height: 190px; object-fit: cover; }
.pd-phone-b { padding: var(--s-8) var(--s-9) var(--s-10); display: flex; flex-direction: column; gap: var(--s-6); font-size: var(--fs-xs); line-height: normal; }
.pd-phone-h { display: flex; justify-content: space-between; align-items: center; }
.pd-phone-t { font-weight: 700; font-size: var(--fs-body); }
.pd-phone-m { font-family: var(--mono); font-size: var(--fs-micro); color: var(--ink-3); }
.pd-mrow { display: flex; justify-content: space-between; align-items: center; gap: var(--s-5); padding-bottom: var(--s-5); border-bottom: 1px solid var(--mist); }
.pd-mrow-n { display: flex; align-items: center; gap: var(--s-4); }
.pd-mrow-p { color: var(--ink-2); }
.pd-veg { width: var(--s-5); height: var(--s-5); border: 1.5px solid; border-radius: var(--s-1); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pd-veg span { width: var(--s-2); height: var(--s-2); border-radius: var(--r-pill); background: currentColor; }
.pd-veg-veg { color: var(--pd-veg); }
.pd-veg-nonveg { color: var(--pd-red); }
.pd-phone-cta { background: var(--plum); color: var(--white); border-radius: var(--r-pill); height: 42px; display: flex; align-items: center; justify-content: center; font-weight: 600; }

/* self-order terminal (ROS'Q) */
.pd-kiosk { width: 300px; background: var(--navy); border-radius: var(--r-band); padding: var(--s-6); box-shadow: 0 30px 60px -30px var(--pd-shadow); }
.pd-kiosk-s { background: var(--white); border-radius: var(--r-card-l); overflow: hidden; }
.pd-kiosk-h { background: var(--dot-q); color: var(--white); padding: var(--s-8) var(--s-9); line-height: normal; }
.pd-kiosk-o { font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: var(--track-mono); opacity: .85; }
.pd-kiosk-t { font-weight: 700; font-size: var(--fs-h5); }
.pd-kiosk-img { width: 100%; height: 150px; object-fit: cover; }
.pd-kiosk-b { padding: var(--s-7) var(--s-9) var(--s-9); display: flex; flex-direction: column; gap: var(--s-5); font-size: var(--fs-xs); line-height: normal; }
.pd-kiosk-cta { background: var(--dot-q); color: var(--white); border-radius: var(--r-l); height: 46px; display: flex; align-items: center; justify-content: center; font-weight: 600; }

/* menu board on a screen (ROS'E) */
.pd-board { background: var(--navy); border-radius: 22px; padding: var(--s-7); box-shadow: 0 30px 60px -30px var(--pd-shadow); }
.pd-board-s { background: var(--navy-2); border-radius: var(--r-l); overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); color: var(--white); aspect-ratio: 16 / 9; }
.pd-board-p { position: relative; min-height: 0; }
.pd-board-img { width: 100%; height: 100%; object-fit: cover; }
.pd-board-tag { position: absolute; left: var(--s-6); top: var(--s-6); font-family: var(--mono); font-size: var(--fs-micro); letter-spacing: var(--track-mono); background: var(--pd-e-deep); padding: var(--s-3) var(--s-5); border-radius: var(--r-pill); line-height: 1.2; }
.pd-board-b { padding: var(--s-9); display: flex; flex-direction: column; gap: var(--s-5); }
.pd-board-t { font-weight: 700; font-size: var(--fs-h6); }
.pd-board-r { display: flex; justify-content: space-between; gap: var(--s-4); font-size: var(--fs-xs); line-height: normal; padding-bottom: var(--s-4); border-bottom: 1px solid var(--navy-3); }

/* ---------- related products ---------- */
.pd-fam { background: var(--navy-2); border: 1px solid var(--navy-3); border-radius: var(--r-card); padding: var(--s-13); display: flex; flex-direction: column; gap: var(--s-6); color: var(--white); }
.pd-fam:hover { color: var(--white); }
.pd-fam-t { gap: var(--s-7); }
.pd-fam-top { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); }
.pd-fam-tile { width: 44px; height: 44px; flex-shrink: 0; }
.pd-fam-pill { background: var(--navy-3); color: var(--mist); }
.pd-fam-name { font-size: var(--fs-small); font-weight: 500; color: var(--pd-on-dark-50); margin-top: calc(-1 * var(--s-4)); }
.pd-dim-lead { font-size: var(--fs-lead-s); line-height: var(--lh-body); color: var(--on-dark-3); max-width: 640px; }

/* ---------- labelled tiles, capability grid ---------- */
.pd-tile-k { font-family: var(--mono); font-size: var(--fs-mono); color: var(--sky); }
.pd-caps { gap: var(--s-15) var(--s-16); }

/* ---------- responsive ---------- */
@media (max-width: 760px) {
  .pd-hero { padding: var(--s-16) 0 var(--s-17); }
  .pd-hero-115, .pd-hero-110 { grid-template-columns: minmax(0, 1fr); }
  .pd-dev, .pd-panel { padding: var(--s-12); }
  .pd-form-row { grid-template-columns: minmax(0, 1fr); grid-template-areas: "le" "ie" "ee" "lo" "io" "eo" "b"; }
  .pd-i-e, .pd-i-o { justify-self: start; width: auto; max-width: 100%; }
  .pd-sub-btn { justify-self: end; margin-top: var(--s-5); }
  .pd-side-photo { height: 240px; }
}

/* canvas headings in these blocks sit at the browser's normal line height */
.pd-step .h5, .pd-step .tag, .pd-feats .h6, .pd-fam .h5, .pd-caps .h6, .pd-tiles .h4, .pd-panel-t, .pd-link, .pd-pill, .pd-fam-name { line-height: normal; }
.pd-status .pill, .pd-fam-pill, .pd-ord .pill { line-height: normal; }