/* Fire Suite — marketing site.
 *
 * Audience: takeaway and restaurant owners, not software buyers. Every number
 * on these pages is real, every screenshot is the product, and there are no
 * invented testimonials or customer logos. The honest angle IS the angle:
 * this was built in a working takeaway and runs three shops every day.
 *
 * No build step, matching the rest of the repo. One stylesheet, one request,
 * cached across pages. Inter, the same face the app uses.
 */

:root {
  --ink:        #171009;   /* warm near-black, from the logo tile */
  --ink-2:      #2a1d12;
  --flame:      #ef5f0a;   /* the triangle */
  --flame-dark: #d4530a;
  --cream:      #fff8f2;
  --sand:       #ffe9d6;
  --paper:      #ffffff;
  --text:       #1c1613;
  --muted:      #6b5f57;
  --line:       #ece2d9;
  --ok:         #1c6b33;

  --wrap: 1120px;
  --r:    14px;
  --r-lg: 22px;
  --shadow:    0 1px 2px rgba(23,16,9,.06), 0 8px 24px rgba(23,16,9,.06);
  --shadow-lg: 0 2px 4px rgba(23,16,9,.06), 0 24px 60px rgba(23,16,9,.12);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--text);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* `height: auto` globally, and it matters. Every <img> here carries width and
   height attributes so the browser reserves the right space before the file
   arrives — but those attributes also act as `height: 940px`, so any rule that
   sets only a width leaves the picture squashed. One default stops that for
   every image on the site; the few that want a fixed height set one AND an
   object-fit, so they crop instead of distorting. */
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }

/* Display type. clamp() so it reads well on a phone in a shop without a
   separate mobile stylesheet. */
h1, h2, h3 { line-height: 1.1; letter-spacing: -0.025em; margin: 0 0 .5em; font-weight: 800; }
h1 { font-size: clamp(2.2rem, 6vw, 3.9rem); }
h2 { font-size: clamp(1.75rem, 4vw, 2.7rem); }
h3 { font-size: clamp(1.1rem, 2vw, 1.35rem); letter-spacing: -0.015em; }
p  { margin: 0 0 1rem; }
.lede { font-size: clamp(1.05rem, 2vw, 1.3rem); color: var(--muted); max-width: 46ch; }
.muted { color: var(--muted); }
.nowrap { white-space: nowrap; }

/* ----------------------------- nav ----------------------------- */

.nav {
  position: sticky; top: 0; z-index: 50;
  /* Nearly solid on purpose. At .88 the blurred content behind the bar read
     as a smudge next to the wordmark rather than as glass. */
  background: rgba(255,255,255,.95);
  backdrop-filter: saturate(150%) blur(8px);
  border-bottom: 1px solid var(--line);
}
.nav-in { display: flex; align-items: center; gap: 1.6rem; height: 66px; }
.nav-logo { display: flex; align-items: center; gap: .55rem; font-weight: 800; letter-spacing: -.02em; text-decoration: none; font-size: 1.08rem; }
.nav-logo img { width: 30px; height: 30px; border-radius: 7px; }
.nav-links { display: flex; gap: 1.4rem; margin-left: auto; align-items: center; }
/* :not(.btn) matters. `.nav-links a` is more specific than `.btn-primary`, so
   without it the orange button's label inherits the muted grey meant for the
   plain links — which is exactly what it did until somebody looked at a
   phone. */
.nav-links a:not(.btn) { text-decoration: none; color: var(--muted); font-weight: 600; font-size: .95rem; }
.nav-links a:not(.btn):hover, .nav-links a[aria-current]:not(.btn) { color: var(--text); }

/* The burger is desktop-hidden and has no JavaScript behind it: a checkbox
   holds the open state. A menu that needs a script is a menu that is missing
   when the script fails, and this one is the only way to move around the site
   on a phone. */
.nav-burger { display: none; margin-left: auto; cursor: pointer; padding: .35rem .6rem; border-radius: 10px; border: 1px solid var(--line); line-height: 1; font-size: 1.25rem; }
.nav-burger:hover { border-color: var(--flame); }
.nav-toggle { position: absolute; opacity: 0; pointer-events: none; }

@media (max-width: 860px) {
  .nav-burger { display: block; }
  .nav-in { gap: .6rem; }
  .nav-links {
    position: absolute; left: 0; right: 0; top: 66px;
    display: none; flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper); border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow); padding: .4rem 20px 1rem;
  }
  .nav-toggle:checked ~ .nav-links { display: flex; }
  .nav-links a:not(.btn) { padding: .85rem .2rem; border-bottom: 1px solid var(--line); font-size: 1.02rem; }
  .nav-links .btn { margin-top: .9rem; }
  /* `hide-sm` means "not in the top bar on a phone" — inside the open menu
     these are exactly what the reader came for. */
  .nav-links .hide-sm { display: block; }
}

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

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .82rem 1.4rem; border-radius: 999px; border: 1.5px solid transparent;
  font-weight: 700; font-size: 1rem; text-decoration: none; cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--flame); color: #fff; box-shadow: 0 6px 18px rgba(239,95,10,.32); }
.btn-primary:hover { background: var(--flame-dark); }
.btn-ghost { border-color: rgba(255,255,255,.28); color: #fff; }
.btn-ghost:hover { background: rgba(255,255,255,.1); }
.btn-line { border-color: var(--line); background: var(--paper); color: var(--text); }
.btn-line:hover { border-color: var(--flame); color: var(--flame); }
.btn-sm { padding: .55rem 1rem; font-size: .92rem; }

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

.hero {
  background:
    radial-gradient(1000px 500px at 78% -12%, rgba(239,95,10,.30), transparent 62%),
    linear-gradient(170deg, #1d1409 0%, var(--ink) 55%, #0c0906 100%);
  color: #fff; padding: clamp(3.5rem, 9vw, 6.5rem) 0 clamp(3rem, 7vw, 5rem);
}
.hero h1 { color: #fff; max-width: 17ch; }
.hero .lede { color: #e4d8cd; max-width: 50ch; font-size: clamp(1.08rem, 2vw, 1.32rem); }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } }
.hero-cta { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 1.8rem; }
.hero-note { margin-top: 1.1rem; font-size: .92rem; color: #b9a99b; }
.eyebrow {
  display: inline-block; font-size: .76rem; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--flame); margin-bottom: 1rem;
}

/* The price, as the hero's object. A takeaway owner compares this against the
   other weekly bills they already pay, so it is shown weekly and large. */
.pricecard {
  background: rgba(255,255,255,.055); border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r-lg); padding: 1.6rem 1.7rem; backdrop-filter: blur(8px);
}
.pricecard h3 { color: #fff; font-size: 1rem; letter-spacing: .02em; text-transform: uppercase; font-weight: 700; color: #b9a99b; }
.price-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .72rem 0; border-bottom: 1px solid rgba(255,255,255,.1); }
.price-row:last-of-type { border-bottom: 0; }
.price-row .nm { color: #efe5db; font-weight: 600; }
.price-row .pr { font-weight: 800; font-size: 1.35rem; color: #fff; letter-spacing: -.02em; }
.price-row .pr small { font-weight: 600; font-size: .78rem; color: #b9a99b; letter-spacing: 0; }
.price-row.feature .pr { color: var(--flame); }
.pricecard .price-note { margin: 1rem 0 0; font-size: .88rem; color: #b9a99b; }

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

.sec { padding: clamp(3.2rem, 8vw, 5.6rem) 0; }
.sec-cream { background: var(--cream); }
.sec-ink { background: var(--ink); color: #fff; }
.sec-ink h2, .sec-ink h3 { color: #fff; }
.sec-ink .lede, .sec-ink .muted { color: #b9a99b; }
.sec-head { max-width: 58ch; margin-bottom: 2.6rem; }
.sec-head.center { margin-left: auto; margin-right: auto; text-align: center; }

.grid { display: grid; gap: 1.2rem; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 860px) { .g2, .g3 { grid-template-columns: 1fr; } }

.card {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 1.5rem 1.55rem; box-shadow: var(--shadow);
}
.card h3 { margin-bottom: .4rem; }
.card p:last-child { margin-bottom: 0; }
.card-ink { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); box-shadow: none; }

/* A product card — the two things we actually sell. */
.prod { display: flex; flex-direction: column; gap: .2rem; }
.prod .tag { font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--flame); }
.prod .cost { font-size: 2.1rem; font-weight: 800; letter-spacing: -.03em; margin: .4rem 0 .1rem; }
.prod .cost small { font-size: .95rem; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.prod ul { list-style: none; padding: 0; margin: 1rem 0 1.3rem; }
.prod li { padding: .34rem 0 .34rem 1.6rem; position: relative; color: var(--muted); }
.prod li::before { content: "✓"; position: absolute; left: 0; color: var(--ok); font-weight: 800; }
.prod .btn { margin-top: auto; }
.prod.featured { border-color: var(--flame); box-shadow: 0 2px 4px rgba(239,95,10,.08), 0 20px 48px rgba(239,95,10,.14); }

/* Numbered steps — how it actually works, in order. */
.steps { counter-reset: s; }
.step { display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; padding: 1.1rem 0; align-items: start; }
.step::before {
  counter-increment: s; content: counter(s);
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-weight: 800;
  background: var(--flame); color: #fff;
}
.step h3 { margin-bottom: .25rem; }
.step p { margin: 0; color: var(--muted); }
.sec-ink .step p { color: #b9a99b; }

/* The honest proof block. No invented logos, no fake quotes — real numbers. */
.proof { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; text-align: center; }
@media (max-width: 760px) { .proof { grid-template-columns: repeat(2, 1fr); } }
.proof .n { font-size: clamp(1.9rem, 4vw, 2.6rem); font-weight: 800; letter-spacing: -.03em; color: var(--flame); }
.proof .l { font-size: .92rem; color: #b9a99b; }

.shot { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-lg); border: 1px solid var(--line); }
.shot img { width: 100%; }

/* FAQ, as plain disclosure — no JS needed. */
.faq { max-width: 760px; margin: 0 auto; }
.faq details { border-bottom: 1px solid var(--line); padding: 1.05rem 0; }
.faq summary { cursor: pointer; font-weight: 700; font-size: 1.05rem; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--flame); font-weight: 800; font-size: 1.4rem; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: .7rem 0 0; color: var(--muted); }

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

.foot { background: var(--ink); color: #b9a99b; padding: 3.2rem 0 2.2rem; font-size: .94rem; }
.foot a { color: #e4d8cd; text-decoration: none; }
.foot a:hover { color: #fff; text-decoration: underline; }
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2rem; margin-bottom: 2.4rem; }
@media (max-width: 860px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
.foot h4 { color: #fff; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; margin: 0 0 .9rem; }
.foot ul { list-style: none; padding: 0; margin: 0; }
.foot li { padding: .22rem 0; }
.foot-bar { border-top: 1px solid rgba(255,255,255,.1); padding-top: 1.4rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: .88rem; }

/* A final call to action, used at the bottom of every page. */
.cta-band { background: linear-gradient(135deg, var(--flame) 0%, #c9490a 100%); color: #fff; padding: clamp(3rem, 7vw, 4.6rem) 0; text-align: center; }
.cta-band h2 { color: #fff; margin-bottom: .6rem; }
.cta-band p { color: rgba(255,255,255,.9); max-width: 52ch; margin: 0 auto 1.8rem; font-size: 1.1rem; }
.cta-band .btn-primary { background: #fff; color: var(--ink); box-shadow: 0 8px 24px rgba(0,0,0,.18); }
.cta-band .btn-primary:hover { background: var(--cream); }
.cta-band .btn-ghost { border-color: rgba(255,255,255,.55); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn { transition: none; }
}

/* --------------------------- product imagery -------------------------- */

/* A screenshot needs a frame or it reads as a stray rectangle on the page.
   Light chrome with a title bar, so it is obviously "the app" without
   pretending to be a browser window it is not. */
.frame {
  border-radius: var(--r-lg); overflow: hidden; background: var(--paper);
  border: 1px solid var(--line); box-shadow: var(--shadow-lg);
}
.frame-bar {
  display: flex; align-items: center; gap: .4rem;
  padding: .6rem .9rem; background: #f6f1ec; border-bottom: 1px solid var(--line);
}
.frame-bar i { width: 10px; height: 10px; border-radius: 50%; background: #d9cec4; display: block; }
.frame-bar span { margin-left: .5rem; font-size: .78rem; color: var(--muted); font-style: normal; }
/* height:auto is LOAD-BEARING. The width/height attributes on the <img> are a
   presentational hint equal to `height: 940px`, so setting only `width: 100%`
   in CSS leaves that height in force and the picture is squashed horizontally
   — 1500x940 rendering as 828x940. The attributes stay, because they are what
   reserves the right space before the image loads. */
.frame img { width: 100%; height: auto; display: block; }

/* On a phone the frame becomes a HANDSET, because that is what <picture>
   hands it: a portrait screenshot of the app at phone width. A tall phone
   screen inside desktop window chrome looks like a mistake.
   <picture> is doing the real work here — the browser fetches only the source
   that matches, so a phone never downloads the 1500px desktop file. */
@media (max-width: 880px) {
  .frame:has(source) {
    max-width: 300px; margin-inline: auto;
    border: 0; border-radius: 26px; padding: 7px; background: #0b0b0d;
    box-shadow: 0 2px 4px rgba(0,0,0,.2), 0 20px 44px rgba(23,16,9,.26);
  }
  .frame:has(source) .frame-bar { display: none; }
  .frame:has(source) img { border-radius: 20px; }
}

/* Showcase band — the product, full width, straight after the hero. Pulled up
   so it overlaps the dark hero and the two read as one composition. */
.showcase { background: linear-gradient(180deg, var(--ink) 0%, var(--ink) 38%, var(--cream) 38%, var(--cream) 100%); padding: 0 0 clamp(3rem,7vw,5rem); }
.showcase .frame { margin-top: -1px; }
.showcase-cap { text-align: center; padding: 2rem 0 0; }
.showcase-cap p { color: var(--muted); margin: 0 auto; max-width: 54ch; }

/* A television. The bezel and the stand are what make a 16:9 rectangle read as
   a screen on a wall rather than a photo of a poster. */
.tv { width: 100%; }
.tv-set {
  background: #0b0b0d; border-radius: 12px; padding: 10px 10px 10px;
  box-shadow: 0 2px 4px rgba(0,0,0,.2), 0 30px 60px rgba(23,16,9,.3);
}
.tv-screen { border-radius: 4px; overflow: hidden; aspect-ratio: 16/9; background: #000; }
.tv-screen img { width: 100%; height: 100%; object-fit: cover; }
.tv-stand { width: 26%; height: 10px; background: #14141a; margin: 0 auto; border-radius: 0 0 6px 6px; }
.tv-foot { width: 42%; height: 7px; background: #1b1b22; margin: 0 auto; border-radius: 6px; }
.tv-cap { text-align: center; font-size: .86rem; color: var(--muted); margin-top: 1rem; }

/* A shot inside a product card. Bleeds to the card's edges at the top. */
.prod-shot {
  margin: -1.5rem -1.55rem 1.2rem; border-bottom: 1px solid var(--line);
  background: #f6f1ec; overflow: hidden;
}
/* Cropped to the TOP rather than scaled whole: a full dashboard shrunk into a
   card is unreadable grey noise, while its first few rows still read as the
   real thing. */
.prod-shot img { width: 100%; display: block; height: 190px; object-fit: cover; object-position: top left; }

/* A photograph used as atmosphere rather than information. Always behind type,
   always dimmed — the content has to stay readable. */
.photo-band { position: relative; overflow: hidden; }
.photo-band > img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.75); opacity: .22;
}
.photo-band::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(23,16,9,.86), rgba(23,16,9,.94));
}
.photo-band > .wrap { position: relative; z-index: 1; }

/* ------------------------- feature rows ------------------------- */

/* A screenshot with its explanation beside it, alternating sides so the eye
   zig-zags down instead of running in one column. Each row is ONE feature,
   because a gallery of unlabelled screens tells a reader nothing. */
.feat { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(1.6rem, 4vw, 3.4rem); align-items: center; padding: clamp(2rem, 4vw, 3rem) 0; }
.feat + .feat { border-top: 1px solid var(--line); }
.feat:nth-child(even) .feat-copy { order: 2; }
@media (max-width: 880px) {
  .feat { grid-template-columns: 1fr; gap: 1.4rem; }
  .feat:nth-child(even) .feat-copy { order: 0; }
}
.feat-copy h3 { font-size: clamp(1.3rem, 2.4vw, 1.75rem); margin-bottom: .5rem; }
.feat-copy p { color: var(--muted); }
.feat-copy p:last-child { margin-bottom: 0; }
.feat-tag { font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--flame); display: block; margin-bottom: .5rem; }
.sec-ink .feat + .feat { border-top-color: rgba(255,255,255,.12); }
.sec-ink .feat-copy p { color: #b9a99b; }

/* ---------------------------- a phone ---------------------------- */

/* The staff app is only ever used on a phone, so it is shown in one. A
   portrait screenshot floating in a page reads as a mistake; the same image
   in a handset reads as "this is what your staff will be holding". */
.phone { width: 100%; max-width: 230px; margin: 0 auto; }
.phone-body {
  background: #0b0b0d; border-radius: 30px; padding: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,.2), 0 20px 44px rgba(23,16,9,.26);
}
.phone-screen { border-radius: 23px; overflow: hidden; background: #fff; aspect-ratio: 390/844; }
.phone-screen img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.phone-cap { text-align: center; font-size: .86rem; color: var(--muted); margin: .9rem 0 0; }
.sec-ink .phone-cap { color: #b9a99b; }

/* A row of handsets — the staff app's tabs, side by side. Scrolls rather than
   shrinking on a phone, because five handsets at 60px each are illegible. */
.phones { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.2rem; }
@media (max-width: 1000px) { .phones { grid-template-columns: repeat(3, 1fr); } }
/* On a phone they SCROLL instead of shrinking. Five handsets squeezed into a
   375px screen are ~150px each, which is a picture of an app rather than a
   readable one — so swipe through them at a size you can actually see. */
@media (max-width: 760px) {
  .phones {
    display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; padding-bottom: .6rem;
    margin-inline: -20px; padding-inline: 20px;   /* bleed to the screen edge */
    scrollbar-width: thin;
  }
  .phones .phone { flex: 0 0 62%; max-width: 62%; scroll-snap-align: center; }
}
.phones .phone { max-width: 100%; }
.phones .phone-body { border-radius: 20px; padding: 5px; }
.phones .phone-screen { border-radius: 16px; }
.phones .phone-cap { font-size: .8rem; margin-top: .6rem; }