/* EZWash POS - marketing site.

   One stylesheet, no framework, no external fonts, no images. Everything in the
   hero is drawn with borders and gradients.

   Every colour is sampled out of logo.png, so the page and the mark are the
   same object. The logo is chrome lettering and an electric-blue splash over a
   deep navy outline: navy becomes the ground, the logo's chrome becomes text and
   the one light band, and the logo's blue is reserved for anything that asks the
   visitor to act. Sampled with:
       convert logo.png -alpha off -resize 200x -colors 14 -format %c histogram:info:-

   Blue does two jobs, so it is split: --blue (#0566DD, the POS badge) drives
   buttons and filled surfaces, --sky (#169CF1, the bubbles) carries marks and
   small type, which #0566DD is too dark to do on navy.

   Section rhythm is tonal, not decorative: dark bands for the pitch, one light
   chrome band for the hardware spec, one blue band for the close. */

:root {
  --navy-900: #04101f;      /* deepest band - the logo's outline */
  --navy: #0a1c33;          /* page ground */
  --navy-700: #112b48;      /* raised surfaces on dark */
  --navy-600: #1d3b5f;      /* hairlines on dark */

  --blue: #0566dd;          /* the POS badge - filled buttons */
  --blue-lift: #2a86f0;     /* its hover */
  --blue-deep: #0a4fa8;
  --sky: #169cf1;           /* the bubbles - marks and small type on navy */
  --sky-light: #62cbfa;     /* bubble highlights - the terminal readout */

  --steel: #93a6bd;         /* secondary text on dark */
  --chrome: #dfe4e9;        /* the logo's chrome - light band ground */
  --chrome-deep: #b8c2cc;   /* hairlines on light */

  --ink: #eaf2fb;           /* primary text on dark */
  --ink-dark: #04101f;      /* primary text on light/blue */
  --paper: #f6f4ef;         /* receipt stock only - never a page ground */

  --wrap: 1140px;
  --gap: clamp(28px, 5vw, 64px);

  /* Signage grotesque. No webfont request: this resolves to Helvetica Neue on
     Mac, Segoe on Windows, Roboto on Android. Display sizes carry the
     personality through weight and tight tracking rather than a novelty face. */
  --sans: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

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

html { scroll-behavior: smooth; scroll-padding-top: 104px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--navy);
  color: var(--ink);
  font: 400 17px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; }
p { margin: 0 0 1em; }
a { color: inherit; }
dl, dd { margin: 0; }
img { max-width: 100%; height: auto; display: block; }
ol { margin: 0; padding: 0; list-style: none; }

.wrap { width: min(100% - 40px, var(--wrap)); margin-inline: auto; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--blue); color: #fff;
  padding: 12px 18px; font-weight: 700; border-radius: 0 0 8px 0;
}
.skip:focus { left: 0; }

:where(a, button, summary):focus-visible {
  outline: 3px solid var(--sky);
  outline-offset: 3px;
}

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

.btn {
  display: inline-block;
  padding: 12px 22px;
  border: 2px solid transparent;
  border-radius: 4px;            /* squared off - this is equipment, not an app */
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn--lg { padding: 15px 30px; font-size: 1.02rem; }

.btn--solid { background: var(--blue); color: #fff; }
.btn--solid:hover { background: var(--blue-lift); }

.btn--line { border-color: var(--navy-600); color: var(--ink); }
.btn--line:hover { border-color: var(--blue); color: var(--blue); }

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

.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgb(4 16 31 / 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--navy-600);
}
.nav__inner {
  display: flex; align-items: center; gap: 20px;
  min-height: 88px;
}

/* min-width:0 lets this shrink below the logo's intrinsic width. Without it a
   flex item refuses to go under its content size and the nav overflows the
   screen instead of fitting. */
.brand { display: flex; align-items: center; text-decoration: none; margin-right: auto; min-width: 0; }
/* Sized by WIDTH, not height. The logo is 3.48:1, and an <img> carrying
   width/height attributes takes its 480px intrinsic width as its flex basis -
   so sizing it by height leaves the brand asking for 480px and getting cut off
   on a phone. Width-first, height auto, and the row height follows. */
.brand__logo { width: clamp(165px, 37vw, 235px); height: auto; }

.nav__menu { display: flex; align-items: center; gap: 28px; }
.nav__links { display: flex; gap: 26px; }
.nav__links a {
  text-decoration: none; font-size: 0.95rem; font-weight: 500;
  color: var(--steel);
  transition: color .15s ease;
}
.nav__links a:hover { color: var(--ink); }

.nav__toggle-input, .nav__toggle { display: none; }

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

.hero { padding: clamp(56px, 9vw, 104px) 0 clamp(60px, 9vw, 110px); }
.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: var(--gap);
  align-items: center;
}

.hero__title {
  font-size: clamp(2.4rem, 5.2vw, 4rem);
  letter-spacing: -0.045em;
  line-height: 0.95;
}
.hero__sub {
  margin-top: 26px;
  max-width: 34em;
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  color: var(--steel);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.hero__note {
  margin-top: 26px; padding-top: 20px;
  border-top: 1px solid var(--navy-600);
  font-size: 0.92rem; color: var(--steel);
  max-width: 30em;
}

/* ---------- hero artwork: terminal + receipt ---------- */

.hero__art { display: flex; flex-direction: column; align-items: center; }
.rig { position: relative; width: min(100%, 340px); }

.terminal {
  position: relative; z-index: 2;
  background: linear-gradient(170deg, #46596e, #23374d 58%, #16263a);
  border: 1px solid #55697f;
  border-radius: 10px 10px 4px 4px;
  padding: 16px 16px 20px;
  box-shadow: 0 22px 44px rgb(0 0 0 / 0.5);
}
.terminal__screen {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: #02101d;
  border: 1px solid #08202f;
  border-radius: 5px;
  padding: 20px 14px 18px;
}
.terminal__amount {
  font: 800 2.5rem/1 var(--sans);
  letter-spacing: -0.04em;
  color: var(--sky-light);              /* the logo's brightest bubble */
  text-shadow: 0 0 22px rgb(98 203 250 / 0.38);
}
.terminal__prompt {
  font: 600 0.82rem/1 var(--sans);
  letter-spacing: 0.06em;
  color: #4d7ea6;
}
/* The card reader: a dark slot with the amber lamp burning above it. */
.terminal__reader {
  margin-top: 14px; height: 16px;
  display: flex; align-items: center; justify-content: center;
  border-top: 1px solid #55697f;
  padding-top: 12px;
}
.terminal__slot {
  width: 64%; height: 6px; border-radius: 3px;
  background: #04101f;
  box-shadow: 0 -8px 16px -4px rgb(22 156 241 / 0.65), inset 0 1px 1px rgb(0 0 0 / 0.8);
}

.receipt {
  position: relative; z-index: 1;
  margin: -8px auto 0;
  width: 84%;
  background: var(--paper);
  padding: 22px 14px 26px;
  box-shadow: 0 18px 34px rgb(0 0 0 / 0.42);
  /* Torn-off bottom edge, so it reads as paper coming out of the printer
     rather than a white card. The mask cuts the zigzag out of the element. */
  -webkit-mask: linear-gradient(#000 calc(100% - 9px), transparent 0),
                repeating-linear-gradient(135deg, #000 0 7px, transparent 7px 14px) bottom / 14px 9px repeat-x;
  mask: linear-gradient(#000 calc(100% - 9px), transparent 0),
        repeating-linear-gradient(135deg, #000 0 7px, transparent 7px 14px) bottom / 14px 9px repeat-x;
}
.receipt__paper {
  margin: 0;
  font: 400 clamp(0.62rem, 1.5vw, 0.76rem)/1.5 var(--mono);
  color: #2b2f33;
  text-align: left;
  width: fit-content;
  margin-inline: auto;
  white-space: pre;
}

.hero__caption {
  margin: 26px 0 0;
  max-width: 24em; text-align: center;
  font-size: 0.9rem; color: var(--steel);
}

/* ---------- shared section shell ----------
   Padding lives here and nowhere else. Section-specific rules below set colour
   and layout only, so nothing has to fight this for vertical rhythm. */

.section { padding: clamp(60px, 8vw, 100px) 0; }
.section__title {
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  max-width: 16em;
  margin-bottom: 14px;
}

/* ---------- how it works ---------- */

.how { background: var(--navy-900); border-block: 1px solid var(--navy-600); }
.steps {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(26px, 4vw, 48px);
  margin-top: 48px;
}
.step__n {
  display: block;
  font: 800 2.6rem/1 var(--sans);
  letter-spacing: -0.05em;
  color: var(--sky);
  margin-bottom: 14px;
}
.step__h { font-size: 1.2rem; margin-bottom: 10px; }
.step p { color: var(--steel); font-size: 0.97rem; margin: 0; }

/* ---------- the system grid ---------- */

/* The 1px gap IS the hairline - the container colour shows through it. That
   trick only works if the cells tile the grid exactly: any leftover track shows
   the container colour as a solid block instead of a line. So the columns are
   pinned rather than auto-fit, and the counts are chosen to divide evenly -
   one double-width cell plus four single ones fills 3 columns in two rows, and
   2 columns in three rows. */
.grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--navy-600);
  border: 1px solid var(--navy-600);
  margin-top: 46px;
}
.cell { background: var(--navy); padding: clamp(26px, 3vw, 38px); }
.cell--wide { grid-column: span 2; }
.cell h3 { font-size: 1.15rem; margin-bottom: 10px; }
.cell p { color: var(--steel); font-size: 0.97rem; margin: 0; }

@media (max-width: 880px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .grid { grid-template-columns: 1fr; }
  .cell--wide { grid-column: span 1; }
}

/* ---------- hardware: the one light band ---------- */

.hardware { background: var(--chrome); color: var(--ink-dark); }
.hardware__inner {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: var(--gap);
  align-items: start;
}
.hardware .lede { font-size: 1.12rem; margin-top: 18px; }
.hardware p { color: #3d4d60; }
.hardware .lede { color: var(--ink-dark); }
.hardware .btn--solid { background: var(--ink-dark); color: var(--chrome); }
.hardware .btn--solid:hover { background: #173352; }

.spec { border-top: 2px solid var(--ink-dark); }
.spec__row {
  display: grid; grid-template-columns: minmax(96px, 0.5fr) 1fr;
  gap: 18px;
  padding: 15px 0;
  border-bottom: 1px solid var(--chrome-deep);
}
.spec dt { font-weight: 700; font-size: 0.9rem; }
.spec dd { font-size: 0.95rem; color: #3d4d60; }

/* ---------- questions ---------- */

.questions { background: var(--navy-900); }
.questions__inner { max-width: 760px; }
.qa {
  border-bottom: 1px solid var(--navy-600);
  padding: 4px 0;
}
.qa:first-of-type { border-top: 1px solid var(--navy-600); margin-top: 40px; }
.qa summary {
  cursor: pointer; list-style: none;
  padding: 20px 40px 20px 0;
  position: relative;
  font-weight: 700; font-size: 1.06rem; letter-spacing: -0.02em;
}
.qa summary::-webkit-details-marker { display: none; }
/* Plus that becomes a minus - the state of the row, not an ornament. */
.qa summary::after {
  content: ""; position: absolute; right: 6px; top: 50%;
  width: 14px; height: 2px; background: var(--sky);
  transform: translateY(-50%);
}
.qa summary::before {
  content: ""; position: absolute; right: 12px; top: 50%;
  width: 2px; height: 14px; background: var(--sky);
  transform: translateY(-50%);
  transition: opacity .15s ease;
}
.qa[open] summary::before { opacity: 0; }
.qa p { color: var(--steel); font-size: 0.98rem; margin: 0 0 20px; max-width: 58ch; }

/* ---------- close ---------- */

/* The one saturated block on the page, in the logo's own blue. White type, so
   the band reads as the mark enlarged rather than as a warning notice. */
.cta { background: var(--blue); color: #fff; padding: clamp(58px, 7vw, 88px) 0; }
.cta__inner { text-align: center; }
.cta__title { font-size: clamp(1.9rem, 3.6vw, 2.8rem); }
.cta__sub {
  margin: 18px auto 0; max-width: 46ch;
  font-size: 1.05rem; color: #cfe4ff;
}
.cta__actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 32px; }
.cta .btn--solid { background: #fff; color: var(--blue-deep); }
.cta .btn--solid:hover { background: #e3efff; }
.cta .btn--line { border-color: rgb(255 255 255 / 0.5); color: #fff; }
.cta .btn--line:hover { border-color: #fff; background: rgb(255 255 255 / 0.12); color: #fff; }

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

.foot { background: var(--navy-900); border-top: 1px solid var(--navy-600); padding: 42px 0; }
.foot__inner p { margin: 0; }
.foot__brand { font-weight: 800; letter-spacing: -0.03em; font-size: 1.05rem; }
.foot__inner .foot__line { color: var(--steel); font-size: 0.94rem; margin-top: 6px; }
.foot__inner .foot__legal { color: #7d90a8; font-size: 0.85rem; margin-top: 18px; }

/* ---------- narrow ---------- */

@media (max-width: 900px) {
  .hero__inner { grid-template-columns: 1fr; }
  .rig { width: min(100%, 300px); }

  .nav__toggle {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 42px; height: 42px; padding: 0 9px;
    border: 1px solid var(--navy-600); border-radius: 4px;
    cursor: pointer;
  }
  .nav__toggle span { display: block; height: 2px; background: var(--ink); }

  .nav__inner { flex-wrap: wrap; }
  .nav__menu {
    display: none;
    flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 16px;
    padding: 6px 0 22px;
  }
  .nav__toggle-input:checked ~ .nav__menu { display: flex; }
  .nav__links { flex-direction: column; gap: 14px; }
  .nav__links a { font-size: 1.02rem; }
  .nav__menu .btn { text-align: center; }
}