/* ════════════════════════════════════════════════════════════════════════
   FloorLogik marketing site — shared stylesheet.

   Single source of truth for every page (index, stock, selling, pricing,
   integrations). The header and footer markup is duplicated per page since
   the site is plain static HTML with no build step, but all styling lives
   here — edit once.

   Palette matches the app (resources/css/app.css): petrol primary, brass as
   the single accent, neutrals hue-shifted toward petrol so they read as
   chosen rather than inherited.
   ════════════════════════════════════════════════════════════════════════ */

:root {
  --petrol:      #0d5c63;
  --petrol-up:   #12868f;
  --petrol-deep: #094a50;
  --brass:       #a8762e;
  --good:        #2f6b45;
  --warn:        #a8762e;
  --crit:        #a8322c;

  --paper:  #f4f6f4;
  --surface:#ffffff;
  --ink:    #0e1a1c;
  --text:   #12211f;
  --text-2: #5f7371;
  --rule:   #d8e2e0;
  --rule-2: #eaf0ef;

  --shell:   var(--paper);
  --card:    var(--surface);
  --fg:      var(--text);
  --fg-2:    var(--text-2);
  --line:    var(--rule);
  --line-2:  var(--rule-2);
  --accent:  var(--petrol);
  --accent-up: var(--petrol-up);

  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  --s0: 1rem;
  --s1: 1.125rem;
  --s2: 1.375rem;
  --s4: 2.5rem;
  /* Capped lower than it wants to be: at 4rem the home headline broke to
     five lines with a single orphaned word on the last. */
  --s5: clamp(2.1rem, 4.4vw, 3.25rem);

  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  --maxw: 76rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --shell:  #0b1416;
    --card:   #122023;
    --fg:     #e8efec;
    --fg-2:   #8ea3a2;
    --line:   #24393c;
    --line-2: #1b2d30;
    --accent: #3fb2ba;
    --accent-up: #6fd3d9;
    --brass:  #d6a45c;
    --good:   #6cbf8e;
    --crit:   #e0736c;
    --warn:   #d6a45c;
  }
}
:root[data-theme="dark"] {
  --shell:#0b1416; --card:#122023; --fg:#e8efec; --fg-2:#8ea3a2;
  --line:#24393c; --line-2:#1b2d30; --accent:#3fb2ba; --accent-up:#6fd3d9;
  --brass:#d6a45c; --good:#6cbf8e; --crit:#e0736c; --warn:#d6a45c;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--shell);
  color: var(--fg);
  font-family: var(--sans);
  font-size: var(--s0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.measure { max-width: 40rem; }

h1, h2, h3, h4 { margin: 0; font-weight: 800; letter-spacing: -.033em; line-height: 1.08; text-wrap: balance; }
h1 { font-size: var(--s5); }
h2 { font-size: var(--s4); }
h3 { font-size: var(--s2); letter-spacing: -.022em; }
h4 { font-size: var(--s1); letter-spacing: -.016em; font-weight: 700; }
p { margin: 0; }
a { color: var(--accent); }

.eyebrow {
  font-family: var(--mono); font-size: .6875rem; text-transform: uppercase;
  letter-spacing: .14em; color: var(--fg-2);
}
.lede { font-size: var(--s1); color: var(--fg-2); line-height: 1.55; }

/* Calibrated rule — a tape-measure tick strip. This is a measure-and-cut
   trade; the device encodes that rather than decorating. */
.ticks {
  height: 13px; max-width: 15rem;
  background-image:
    repeating-linear-gradient(to right, var(--accent) 0 1px, transparent 1px 60px),
    repeating-linear-gradient(to right, var(--accent) 0 1px, transparent 1px 12px);
  background-size: 100% 13px, 100% 6px;
  background-repeat: no-repeat;
  background-position: 0 0, 0 bottom;
  opacity: .5;
}

.skip { position: absolute; left: -9999px; top: 0; }
.skip:focus { left: 1rem; top: 1rem; z-index: 50; }

/* ── Header ──────────────────────────────────────────────────────────── */
header {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--shell) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-2);
}
.bar { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: .875rem 0; }
.brand { display: inline-flex; align-items: center; gap: .5625rem; text-decoration: none; color: inherit; }
.mark { width: 30px; height: 30px; color: var(--accent); flex-shrink: 0; }
.wordmark { font-size: 1.1875rem; font-weight: 800; letter-spacing: -.035em; }
.wordmark i { font-style: normal; color: var(--accent); }
nav { display: flex; align-items: center; gap: .25rem; }
nav .lnk {
  color: var(--fg-2); text-decoration: none; font-weight: 500; font-size: .9375rem;
  padding: .5rem .75rem; border-radius: 3px;
}
nav .lnk:hover { color: var(--fg); }
/* Current page, so people know where they are across five pages. */
nav .lnk[aria-current="page"] { color: var(--fg); box-shadow: inset 0 -2px 0 var(--accent); border-radius: 0; }
.nav-hide { display: none; }
@media (min-width: 54rem) { .nav-hide { display: inline-flex; } }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  text-decoration: none; font-weight: 600; font-size: .9375rem;
  padding: .6875rem 1.25rem; border-radius: 3px; border: 1px solid transparent;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
  white-space: nowrap;
}
.btn-primary { background: var(--petrol); color: #fff; }
.btn-primary:hover { background: var(--petrol-deep); }
@media (prefers-color-scheme: dark) {
  .btn-primary { background: var(--accent); color: #06181a; }
  .btn-primary:hover { background: var(--accent-up); }
}
.btn-ghost { border-color: var(--line); color: var(--fg); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn-sm { padding: .5rem 1rem; font-size: .875rem; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent-up); outline-offset: 2px; }

/* ── Mobile nav ──────────────────────────────────────────────────────
   Below 54rem the nav links are hidden, so without this there's no route
   to the other pages on a phone. The panel sits in flow inside the sticky
   header rather than being absolutely positioned, so it extends the header
   and can't overlap content or trap scroll. */
.burger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.375rem; height: 2.375rem; margin-left: .25rem;
  background: none; border: 1px solid var(--line); border-radius: 3px;
  color: var(--fg); cursor: pointer; padding: 0;
}
.burger:hover { border-color: var(--accent); color: var(--accent); }
.burger svg { width: 1.125rem; height: 1.125rem; }
.burger .ic-close { display: none; }
.burger.is-open .ic-open { display: none; }
.burger.is-open .ic-close { display: block; }
@media (min-width: 54rem) { .burger { display: none; } }

.mnav {
  display: flex; flex-direction: column;
  /* This is a <nav>, so the header's `nav { align-items: center; gap: .25rem }`
     lands on it too — which in a column centres and spaces out every link.
     Reset both rather than fight it further down. */
  align-items: stretch; gap: 0;
  text-align: left;
  border-top: 1px solid var(--line-2);
  padding: .5rem 0 .875rem;
}
.mnav[hidden] { display: none; }
.mnav a {
  color: var(--fg); text-decoration: none; font-weight: 500; font-size: 1rem;
  padding: .8125rem var(--gutter);
}
.mnav a:hover, .mnav a:focus-visible { background: color-mix(in srgb, var(--accent) 9%, transparent); color: var(--accent); }
.mnav a[aria-current="page"] { color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.mnav .sep { border-top: 1px solid var(--line-2); margin: .5rem 0; }
/* Never leave it hanging open if the viewport grows past the breakpoint. */
@media (min-width: 54rem) { .mnav { display: none !important; } }

/* ── Sections ────────────────────────────────────────────────────────── */
section { padding: clamp(3.25rem, 6.5vw, 5.5rem) 0; }
.sec-hd { display: flex; flex-direction: column; gap: .625rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.band { background: var(--card); border-block: 1px solid var(--line-2); }
.band-ink { background: var(--ink); color: #e8efec; }
.band-ink .eyebrow, .band-ink .lede { color: #93a9a8; }
.band-ink .ticks { background-image:
    repeating-linear-gradient(to right, #3fb2ba 0 1px, transparent 1px 60px),
    repeating-linear-gradient(to right, #3fb2ba 0 1px, transparent 1px 12px); }
.band-ink h2 em { font-style: normal; color: #3fb2ba; }

/* ── Home hero ───────────────────────────────────────────────────────── */
.hero { padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(3rem, 6vw, 4.5rem); }
.hero-grid { display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: center; }
@media (min-width: 62rem) { .hero-grid { grid-template-columns: 1.05fr .95fr; } }
.hero h1 { margin: 1.5rem 0 1.25rem; }
.hero h1 em { font-style: normal; color: var(--accent); }
.cta-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.cta-note { font-size: .8125rem; color: var(--fg-2); margin-top: .875rem; }

/* ── Subpage hero ────────────────────────────────────────────────────
   Deliberately quieter than the home hero — these pages are arrived at
   with intent, so they need a title, not a pitch. */
.phero { padding: clamp(2.5rem, 5vw, 3.75rem) 0 clamp(1.5rem, 3vw, 2.25rem); }
.phero h1 { margin: 1.25rem 0 1rem; }
.phero h1 em { font-style: normal; color: var(--accent); }

/* Product panel — roll stock, the most characteristic screen in the app */
.panel {
  background: var(--card); border: 1px solid var(--line); border-radius: 4px;
  overflow: hidden; box-shadow: 0 1px 2px rgb(14 26 28 / .04), 0 12px 32px -12px rgb(14 26 28 / .14);
}
.panel-hd {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: .8125rem 1rem; border-bottom: 1px solid var(--line-2);
}
.panel-hd .t { font-weight: 700; font-size: .9375rem; letter-spacing: -.015em; }
.panel-hd .n { font-family: var(--mono); font-size: .6875rem; color: var(--fg-2); font-variant-numeric: tabular-nums; }
.rolls { display: flex; flex-direction: column; }
.roll { display: grid; grid-template-columns: 3.25rem 1fr auto; gap: .875rem; align-items: center;
        padding: .8125rem 1rem; border-bottom: 1px solid var(--line-2); }
.roll:last-child { border-bottom: 0; }
.sw { height: 2.5rem; border-radius: 2px; overflow: hidden; }
.sw-a { background:
    repeating-linear-gradient(90deg, rgb(0 0 0 / .07) 0 1px, transparent 1px 3px),
    linear-gradient(150deg, #7d6a86, #5f5068); }
.sw-b { background:
    repeating-linear-gradient(90deg, rgb(0 0 0 / .07) 0 1px, transparent 1px 3px),
    linear-gradient(150deg, #8b7290, #6b5874); }
.sw-c { background:
    repeating-linear-gradient(88deg, rgb(90 55 20 / .16) 0 2px, transparent 2px 9px),
    linear-gradient(120deg, #c79a63, #a87a45); }
.roll .nm { font-size: .875rem; font-weight: 600; letter-spacing: -.008em; }
.roll .sub { font-family: var(--mono); font-size: .6875rem; color: var(--fg-2); letter-spacing: .04em; text-transform: uppercase; margin-top: .1875rem; }
.roll .qty { font-family: var(--mono); font-size: .8125rem; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.roll .qty small { display: block; font-weight: 400; font-size: .625rem; color: var(--fg-2); letter-spacing: .05em; text-transform: uppercase; margin-top: .125rem; }
.flag {
  display: flex; align-items: flex-start; gap: .5rem;
  padding: .6875rem 1rem; background: color-mix(in srgb, var(--warn) 10%, transparent);
  border-top: 1px solid color-mix(in srgb, var(--warn) 30%, transparent);
  font-size: .8125rem; line-height: 1.45;
}
.flag b { color: var(--warn); }
.flag svg { width: 15px; height: 15px; color: var(--warn); flex-shrink: 0; margin-top: .1875rem; }

/* Problem cards */
.probs { display: grid; gap: 1px; background: var(--line-2); border: 1px solid var(--line-2); border-radius: 4px; overflow: hidden; }
@media (min-width: 54rem) { .probs { grid-template-columns: repeat(3, 1fr); } }
.prob { background: var(--shell); padding: 1.625rem 1.5rem; display: flex; flex-direction: column; gap: .625rem; }
.prob .fig { font-family: var(--mono); font-size: 1.375rem; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.prob p { font-size: .9375rem; color: var(--fg-2); line-height: 1.5; }

/* Split feature rows */
.split { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 62rem) { .split { grid-template-columns: 1fr 1fr; } }
.bullets { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.75rem; }
.bullet { display: grid; grid-template-columns: 1.125rem 1fr; gap: .75rem; align-items: start; }
.bullet svg { width: 1.125rem; height: 1.125rem; color: var(--accent); margin-top: .1875rem; }
.bullet .b-t { font-weight: 650; font-size: .9375rem; }
.bullet .b-d { font-size: .9375rem; color: var(--fg-2); line-height: 1.5; }
.band-ink .bullet .b-d { color: #93a9a8; }
.band-ink .bullet svg { color: #3fb2ba; }

/* Two ways of selling */
.ways { display: grid; gap: 1.25rem; }
@media (min-width: 50rem) { .ways { grid-template-columns: 1fr 1fr; } }
.way { border: 1px solid var(--line); border-radius: 4px; padding: 1.75rem 1.625rem; background: var(--card); display: flex; flex-direction: column; gap: 1rem; }
.way .tag { font-family: var(--mono); font-size: .625rem; text-transform: uppercase; letter-spacing: .12em; color: var(--accent); }
.way ol { margin: 0; padding-left: 1.125rem; display: flex; flex-direction: column; gap: .4375rem; font-size: .9375rem; color: var(--fg-2); }
.way ol strong { color: var(--fg); font-weight: 600; }

/* Module grid */
.mods { display: grid; gap: 1px; background: var(--line-2); border: 1px solid var(--line-2); border-radius: 4px; overflow: hidden; }
@media (min-width: 40rem) { .mods { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .mods { grid-template-columns: repeat(3, 1fr); } }
.mod { background: var(--card); padding: 1.5rem 1.375rem; display: flex; flex-direction: column; gap: .5rem; }
.mod .ico { width: 1.375rem; height: 1.375rem; color: var(--accent); margin-bottom: .25rem; }
.mod h4 { font-size: .9375rem; }
.mod p { font-size: .875rem; color: var(--fg-2); line-height: 1.5; }

/* Steps */
.steps { display: grid; gap: 1.25rem; }
@media (min-width: 54rem) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step { display: flex; flex-direction: column; gap: .625rem; padding-top: 1.125rem; border-top: 2px solid var(--accent); }
.step .num { font-family: var(--mono); font-size: .6875rem; letter-spacing: .12em; color: var(--accent); text-transform: uppercase; }
.step p { font-size: .9375rem; color: var(--fg-2); line-height: 1.5; }

/* ── Roadmap labelling ───────────────────────────────────────────────
   Everything in the integrations and pricing pages is planned, not
   shipped. One shared badge and notice so nothing implies otherwise. */
.soon {
  display: inline-flex; align-items: center; gap: .3125rem;
  font-family: var(--mono); font-size: .5625rem; text-transform: uppercase;
  letter-spacing: .1em; color: var(--brass);
  border: 1px solid color-mix(in srgb, var(--brass) 45%, transparent);
  background: color-mix(in srgb, var(--brass) 9%, transparent);
  padding: .1875rem .4375rem; border-radius: 2px; white-space: nowrap;
}
.notice {
  display: flex; align-items: flex-start; gap: .625rem;
  border: 1px solid color-mix(in srgb, var(--brass) 32%, transparent);
  background: color-mix(in srgb, var(--brass) 8%, transparent);
  border-radius: 4px; padding: .875rem 1rem; font-size: .875rem; line-height: 1.5;
  color: var(--fg); max-width: 44rem;
}
.notice b { color: var(--brass); }
.notice svg { width: 16px; height: 16px; color: var(--brass); flex-shrink: 0; margin-top: .1875rem; }

/* Integrations */
.ints { display: grid; gap: 1px; background: var(--line-2); border: 1px solid var(--line-2); border-radius: 4px; overflow: hidden; }
@media (min-width: 40rem) { .ints { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .ints { grid-template-columns: repeat(3, 1fr); } }
.int { background: var(--card); padding: 1.375rem 1.25rem; display: flex; flex-direction: column; gap: .625rem; }
.int-hd { display: flex; align-items: center; gap: .625rem; }
.int-logo {
  width: 2.125rem; height: 2.125rem; border-radius: 3px; flex-shrink: 0;
  display: grid; place-items: center; color: #fff;
  font-weight: 700; font-size: .75rem; letter-spacing: -.02em;
}
.int-nm { font-weight: 700; font-size: .9375rem; letter-spacing: -.012em; }
.int-cat { font-family: var(--mono); font-size: .5625rem; text-transform: uppercase; letter-spacing: .1em; color: var(--fg-2); margin-top: .0625rem; }
.int p { font-size: .8125rem; color: var(--fg-2); line-height: 1.5; }

/* Pricing */
.tiers { display: grid; gap: 1.25rem; align-items: start; }
@media (min-width: 56rem) { .tiers { grid-template-columns: repeat(3, 1fr); } }
.tier {
  border: 1px solid var(--line); border-radius: 4px; background: var(--card);
  padding: 1.75rem 1.625rem; display: flex; flex-direction: column; gap: 1.125rem;
}
.tier.feature { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.tier-top { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; }
.tier-nm { font-weight: 800; font-size: 1.0625rem; letter-spacing: -.022em; }
.tier-pop { font-family: var(--mono); font-size: .5625rem; text-transform: uppercase; letter-spacing: .1em; color: var(--accent); }
.tier-price { display: flex; align-items: baseline; gap: .375rem; }
.tier-price .amt { font-family: var(--mono); font-size: 2rem; font-weight: 700; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.tier-price .per { font-size: .8125rem; color: var(--fg-2); }
.tier-sub { font-size: .8125rem; color: var(--fg-2); margin-top: -.5rem; }
.tier ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.tier li { display: grid; grid-template-columns: 1rem 1fr; gap: .5rem; font-size: .875rem; line-height: 1.45; }
.tier li svg { width: 1rem; height: 1rem; color: var(--accent); margin-top: .1875rem; }
.tier .btn { margin-top: auto; }

/* Close CTA */
.close .box {
  border: 1px solid var(--line); border-radius: 4px; background: var(--card);
  padding: clamp(2rem, 4.5vw, 3.25rem); display: flex; flex-direction: column; gap: 1.25rem;
}

/* Cross-links to the other pages, so no page is a dead end */
.more { display: grid; gap: 1px; background: var(--line-2); border: 1px solid var(--line-2); border-radius: 4px; overflow: hidden; }
@media (min-width: 44rem) { .more { grid-template-columns: repeat(3, 1fr); } }
.more a {
  background: var(--card); padding: 1.25rem 1.25rem; text-decoration: none;
  display: flex; flex-direction: column; gap: .25rem;
}
.more a:hover { background: color-mix(in srgb, var(--accent) 6%, var(--card)); }
.more .k { font-family: var(--mono); font-size: .5625rem; text-transform: uppercase; letter-spacing: .1em; color: var(--fg-2); }
.more .v { font-weight: 700; font-size: .9375rem; color: var(--fg); letter-spacing: -.014em; }

footer { border-top: 1px solid var(--line-2); padding: 2.5rem 0 3rem; }
.f-grid { display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: space-between; align-items: center; }
.f-links { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.f-links a { color: var(--fg-2); text-decoration: none; font-size: .875rem; }
.f-links a:hover { color: var(--fg); }
.f-note { color: var(--fg-2); font-size: .8125rem; }