/* =============================================================================
   MyRestaurantDash brand (chosen 6 Nov 2026): Espresso = the brand. Peach = the accent ("look here").
   Mist = the secondary colour (calm: labels on dark, selected filters, "on track", the second series in charts).
   Latte and Foam = neutrals.
   Products are told apart by name and icon, never by colour.
   One file for every public page. Colours, type and shapes live ONLY here.
   Platform colours (Deliveroo teal, Uber Eats green, Glovo yellow, Just Eat
   orange) are kept out of the brand on purpose: they identify platforms in charts.
   ============================================================================= */

@font-face { font-family: "Bricolage Grotesque"; src: url("fonts/BricolageGrotesque-latin.woff2") format("woff2"); font-weight: 500 800; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("fonts/InstrumentSans-latin.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }

:root {
  /* palette */
  --main: #3A2A23;         /* Espresso: the brand. Text, buttons, logo, dark sections */
  --main-hover: #2B1E19;
  --main-soft: #E3D3C8;    /* text on espresso */
  --mist: #AFC0C9;         /* secondary: calm highlights, selected filters, "on track", 2nd chart series */
  --on-mist: #1C2A31;      /* text on mist */
  --mist-on-main: #C7D4DB; /* mist used as text and accents on espresso */
  --mist-ink: #4A6270;     /* mist dark enough for text on light backgrounds */
  --latte: #E7D8CB;        /* neutral: soft panels */
  --peach: #F6A57E;        /* attention: headline highlight, the number to look at, main call to action */
  --on-peach: #3A1A0B;     /* text on peach */
  --herb: #2E7A47;         /* positive numbers, "live" */
  --brick: #B23A22;        /* negative numbers */
  --ground: #F5F1EE;       /* Foam: page background */
  --white: #FFFFFF;        /* cards */
  --deep: #1F1714;         /* main text */
  --body: #4A3E38;         /* long text */
  --soft: #6B5D56;         /* secondary text, labels */
  --line: #E6DED8;         /* hairlines */

  /* type */
  --display: "Bricolage Grotesque", "Avenir Next", system-ui, sans-serif;
  --text: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* shape */
  --r-xl: 28px; --r-lg: 22px; --r-md: 18px; --r-btn: 16px;
  --max: 1200px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ground); color: var(--deep); font: 17px/1.55 var(--text); }
img, svg { max-width: 100%; }
a { color: var(--main); }
:focus-visible { outline: 3px solid var(--main); outline-offset: 3px; border-radius: 6px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

.gut { padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
.wrap { max-width: var(--max); margin: 0 auto; }
.display { font-family: var(--display); font-weight: 800; letter-spacing: -.03em; line-height: .98; text-wrap: balance; }
.eyebrow { font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--soft); }
.lead { font-size: clamp(1.05rem, 1.6vw, 1.2rem); color: var(--body); max-width: 56ch; margin: 0; }
.num { font-family: var(--display); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }

/* logo: a dot and a dash */
.logo { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--main); font-family: var(--display); font-weight: 800; letter-spacing: -.03em; font-size: 1.4rem; line-height: 1; }
.logo svg { flex: none; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: var(--r-btn); font: 700 1rem/1 var(--text); text-decoration: none; white-space: nowrap; border: 2px solid transparent; }
.btn.solid { background: var(--main); color: var(--white); }
.btn.solid:hover { background: var(--main-hover); }
.btn.line { border-color: var(--deep); color: var(--deep); background: transparent; }
.btn.line:hover { background: var(--white); }
.btn.peach { background: var(--peach); color: var(--on-peach); }
.btn.small { min-height: 44px; padding: 0 18px; font-size: .95rem; }

/* header */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10; background: rgba(245,241,238,.92); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid transparent; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 11; background: var(--ground); }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 72px; flex-wrap: wrap; padding-block: 10px; }
.top nav { display: flex; align-items: center; gap: 6px 22px; flex-wrap: wrap; font-weight: 600; font-size: .98rem; }
.top nav a:not(.btn) { color: var(--deep); text-decoration: none; padding: 10px 2px; }
.top nav a:not(.btn):hover { color: var(--main); text-decoration: underline; text-underline-offset: 5px; }
@media (max-width: 640px) { .top nav .hide-sm { display: none; } }

/* sections */
section { padding-block: clamp(48px, 8vw, 96px); }
.sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px 32px; flex-wrap: wrap; margin-bottom: 28px; }
.sec-head h2 { margin: 0; font-size: clamp(2rem, 4.4vw, 3rem); color: var(--deep); }
.sec-head p { margin: 0; max-width: 46ch; color: var(--body); }
.tag { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.tag.live { color: var(--herb); }
.tag.live::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--herb); }
.tag.soon { color: var(--soft); }

/* hero */
.hero { padding-block: clamp(40px, 8vw, 104px) clamp(40px, 6vw, 80px); }
.hero .wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 32px 56px; align-items: end; }
.hero h1 { margin: 0; font-size: clamp(2.7rem, 7vw, 5.2rem); }
.hl { background: var(--peach); color: var(--on-peach); border-radius: 14px; padding: 0 .16em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; }

/* product cards */
.live-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 18px; }
.pcard { border-radius: var(--r-xl); padding: clamp(24px, 4vw, 36px); display: flex; flex-direction: column; gap: 16px; text-decoration: none; min-width: 0; transition: transform .2s ease; }
@media (prefers-reduced-motion: no-preference) { .pcard:hover { transform: translateY(-3px); } }
.pcard h3 { margin: 0; font-size: clamp(2rem, 4vw, 2.7rem); }
.pcard p { margin: 0; line-height: 1.6; }
.pcard ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.pcard li { display: flex; gap: 10px; line-height: 1.45; }
.pcard li::before { content: ""; flex: none; width: 14px; height: 6px; border-radius: 3px; margin-top: .62em; }
.pcard .go { font-weight: 700; margin-top: auto; }
.pcard { background: var(--white); color: var(--deep); border-top: 6px solid var(--main); }
.pcard .ic { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--ground); color: var(--main); }
.pcard h3 { color: var(--main); }
.pcard p, .pcard li { color: var(--body); }
.pcard li::before { background: var(--peach); }
.pcard .go { color: var(--main); }

.soon-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 14px; }
.scard { background: var(--white); border-radius: var(--r-md); padding: 22px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.scard h3 { margin: 0; font: 700 1.12rem/1.25 var(--text); color: var(--main); }
.scard p { margin: 0; font-size: .95rem; color: var(--soft); line-height: 1.5; }
.scard .tag { margin-top: auto; padding-top: 6px; }

/* consulting & steps */
.band-main { background: var(--latte); color: var(--deep); }
.band-main .sec-head h2 { color: var(--deep); }
.band-main .sec-head p { color: var(--body); }
.band-main .eyebrow { color: var(--soft); }
.cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 16px; }
.col { border-radius: var(--r-md); padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.band-main .col { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); }
.col h3 { margin: 0; font: 700 1.15rem/1.3 var(--text); }
.band-main .col h3 { color: var(--mist-on-main); }
.col p { margin: 0; font-size: .97rem; line-height: 1.55; }
.band-main .col p { color: var(--main-soft); }
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px; counter-reset: step; }
.step { background: var(--white); border-radius: var(--r-lg); padding: 26px; display: flex; flex-direction: column; gap: 10px; }
.step .n { font-family: var(--display); font-weight: 800; font-size: 2.4rem; line-height: 1; color: var(--peach); -webkit-text-stroke: 0; }
.step h3 { margin: 0; font: 700 1.15rem/1.3 var(--text); color: var(--main); }
.step p { margin: 0; color: var(--body); font-size: .97rem; }

/* contact */
.contact { background: var(--white); border-radius: var(--r-xl); padding: clamp(28px, 5vw, 56px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 24px 48px; align-items: center; }
.contact h2 { margin: 0; font-size: clamp(2rem, 4.4vw, 3rem); }
.contact .mail { font-family: var(--display); font-weight: 700; font-size: clamp(1.3rem, 3vw, 1.8rem); color: var(--main); word-break: break-word; }

/* footer */
footer { padding-block: 40px 56px; color: var(--soft); font-size: .92rem; }
footer .wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; align-items: center; border-top: 1px solid var(--line); padding-top: 28px; }
footer nav { display: flex; gap: 18px; flex-wrap: wrap; }
footer a { color: var(--soft); }

/* product pages */
.crumb { font-size: .92rem; color: var(--soft); }
.crumb a { color: var(--soft); }
.feat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.feat { background: var(--white); border-radius: var(--r-lg); padding: 26px; display: flex; flex-direction: column; gap: 10px; }
.feat h3 { margin: 0; font: 700 1.18rem/1.3 var(--text); color: var(--main); }
.feat p { margin: 0; color: var(--body); font-size: .98rem; }
.feat .q { font-family: var(--display); font-weight: 700; font-size: 1.05rem; color: var(--deep); }

/* product preview panel (static mock-up, sample data) */
.preview { background: var(--white); border-radius: var(--r-xl); padding: clamp(18px, 3vw, 28px); display: flex; flex-direction: column; gap: 16px; box-shadow: 0 1px 2px rgba(21,33,28,.04), 0 18px 40px rgba(21,33,28,.08); min-width: 0; }
.preview .bar { display: flex; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; align-items: baseline; }
.preview .bar b { font-family: var(--display); font-size: 1.25rem; color: var(--main); letter-spacing: -.02em; }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 10px; }
.kpi { background: var(--ground); border-radius: 16px; padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kpi .num { font-size: 1.55rem; }
.kpi small { font-size: .8rem; font-weight: 600; color: var(--soft); }
.kpi.hi { background: var(--peach); color: var(--on-peach); }
.kpi.hi .eyebrow, .kpi.hi small { color: var(--on-peach); }
.up { color: var(--herb) !important; } .down { color: var(--brick) !important; }
.tbl { overflow-x: auto; }
.tbl table { width: 100%; border-collapse: collapse; font-size: .92rem; font-variant-numeric: tabular-nums; }
.tbl th, .tbl td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl th { font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--soft); font-weight: 700; }
.tbl td.r, .tbl th.r { text-align: right; }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: .78rem; font-weight: 700; }
.pill.ok { background: #DDEFE3; color: #1F5E34; }
.pill.warn { background: #FCE6D9; color: #7A3412; }
.pill.bad { background: #F7DAD3; color: #8E2A17; }
.pdot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; }
.p-deliveroo { background: #00CCBC; } .p-uber { background: #06C167; }
.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 32px 56px; align-items: center; }
.note { font-size: .85rem; color: var(--soft); }

/* ---- positioning: the four ways to work with us (on the espresso band) ---- */
.ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 14px; }
.way { background: var(--white); border: 0; border-radius: var(--r-lg); padding: 24px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.way .n { font-family: var(--display); font-weight: 800; font-size: 2.6rem; line-height: 1; color: var(--peach); }
.way h3 { margin: 0; font-family: var(--display); font-weight: 800; letter-spacing: -.02em; font-size: 1.7rem; line-height: 1; color: var(--main); }
.way .sub { font-weight: 700; color: var(--mist-ink); }
.way p { margin: 0; color: var(--body); font-size: .96rem; line-height: 1.55; }
.way ul { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.way li { display: flex; gap: 9px; color: var(--body); font-size: .93rem; line-height: 1.45; }
.way li::before { content: ""; flex: none; width: 12px; height: 5px; border-radius: 3px; background: var(--mist); margin-top: .6em; }
.ways-note { margin: 18px 0 0; color: var(--body); max-width: 70ch; }

/* ---- positioning: the four areas of the stack ---- */
.areas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 14px; }
.area { background: var(--white); border-radius: var(--r-lg); padding: 24px; display: flex; flex-direction: column; gap: 10px; min-width: 0; text-decoration: none; color: var(--deep); }
a.area { transition: transform .2s ease; }
@media (prefers-reduced-motion: no-preference) { a.area:hover { transform: translateY(-3px); } }
.area .ic { width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; background: var(--ground); color: var(--main); }
.area h3 { margin: 0; font-family: var(--display); font-weight: 800; letter-spacing: -.02em; font-size: 1.5rem; line-height: 1.05; color: var(--main); }
.area p { margin: 0; color: var(--body); font-size: .95rem; line-height: 1.55; }
.area .covers { font-size: .88rem; color: var(--soft); }
.area .go { margin-top: auto; font-weight: 700; color: var(--main); }

/* ---- start-here band (peach = attention) ---- */
.start { background: var(--peach); color: var(--on-peach); border-radius: var(--r-xl); padding: clamp(28px, 5vw, 52px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 20px 40px; align-items: center; }
.start h2 { margin: 0; font-size: clamp(1.9rem, 4.2vw, 2.8rem); }
.start p { margin: 0; color: var(--on-peach); }
.start .eyebrow { color: var(--on-peach); }

/* ---- journey (kiosk page): one row per step ---- */
.journey { display: flex; flex-direction: column; gap: 12px; }
.jrow { background: var(--white); border-radius: var(--r-lg); padding: 22px 24px; display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 10px 28px; align-items: start; }
@media (max-width: 680px) { .jrow { grid-template-columns: minmax(0, 1fr); } }
.jrow .step-name { display: flex; align-items: baseline; gap: 12px; }
.jrow .step-name .n { font-family: var(--display); font-weight: 800; font-size: 2rem; line-height: 1; color: var(--peach); }
.jrow .step-name b { font-family: var(--display); font-weight: 800; letter-spacing: -.02em; font-size: 1.45rem; color: var(--main); }
.jrow ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.jrow li { display: flex; gap: 10px; color: var(--body); line-height: 1.5; }
.jrow li::before { content: ""; flex: none; width: 12px; height: 5px; border-radius: 3px; background: var(--peach); margin-top: .65em; }