/* Loon Appliance Rental, Twin Cities washer/dryer rental
   Plain, fast, mobile-first. No framework, no build step.
   This audience skews mobile and low-bandwidth; every choice here favors
   legibility and load speed over decoration.

   The eight custom properties below are the per-tenant brand seam. This file
   is rendered per hostname by functions/_middleware.js, exactly like the
   HTML, and the values come from that tenant's palette in
   tenants.config_json. A palette value is validated against a strict hex
   pattern before it ever gets here (functions/lib/tenant-config.js), because
   HTML escaping does nothing for a CSS context; nothing but a colour can
   reach this file. */

:root {
  --ink: #16202b;
  --ink-soft: #4a5866;
  --line: #dde3ea;
  --bg: #ffffff;
  --bg-alt: #f4f7fa;
  --brand: #14563f;      /* deep green for Loon: trustworthy, not corporate-blue */
  --brand-dark: #0e3f2e;
  --accent: #d9822b;     /* warm, used sparingly for CTAs */
  --radius: 10px;
  --wrap: 1080px;

  /* Deliberately NOT part of the eight-property brand seam above, for the same
     reason account.css keeps its status colours off it: the edge of a control
     has to stay findable whatever palette an operator picks. WCAG 1.4.11 asks
     3:1 for a component boundary against its neighbours; this measures 3.43:1
     against the white field fill and 3.19:1 against --bg-alt. The #c3cfdb it
     replaces measured 1.58:1, so the boundary of every text input on the site
     was a suggestion rather than a boundary. */
  --field-line: #7f8c99;
}

* { box-sizing: border-box; }

/* Smooth scrolling only for somebody who has not asked their system for less
   motion. Unguarded, this hijacks every in-page jump for a reader who set that
   preference precisely to stop pages moving under them. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  font: 17px/1.62 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: clamp(2rem, 5vw, 3.1rem); }
h2 { font-size: clamp(1.5rem, 3.4vw, 2.1rem); margin-bottom: .6em; }
h3 { font-size: 1.12rem; }
p { margin: 0 0 1em; }
a { color: var(--brand); }

.wrap { width: min(var(--wrap), 100% - 2.5rem); margin-inline: auto; }
.narrow { width: min(720px, 100% - 2.5rem); }

.skip {
  position: absolute; left: -9999px;
  background: var(--ink); color: #fff; padding: .7rem 1rem; z-index: 100;
}
.skip:focus { left: .5rem; top: .5rem; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* Honeypot field for the intake form: off-screen for real visitors, still
   present in the DOM for form-filling bots to trip. */
.hp {
  position: absolute; left: -9999px; top: -9999px;
}

/* ---------- nav ----------
   Two rows on small screens (brand + CTA, then the link list wrapping
   underneath), one row from 940px up. No JavaScript, no hamburger: every
   destination stays reachable by tab and by thumb at every width. */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(160%) blur(8px);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .5rem 1.2rem; padding: .7rem 0;
}
.brand {
  font-weight: 800; font-size: clamp(.95rem, 4.2vw, 1.22rem);
  text-decoration: none;
  color: var(--brand-dark); letter-spacing: -.02em; white-space: nowrap;
  margin-right: auto;
}
.brand span { color: var(--accent); }
.brand.small { font-size: 1.05rem; margin: 0 0 .4rem; }
.nav nav {
  order: 3; width: 100%;
  display: flex; flex-wrap: wrap; gap: .1rem 1.15rem;
  padding-top: .2rem;
}
.nav nav a {
  color: var(--ink-soft); text-decoration: none; font-size: .95rem;
  padding: .3rem 0; border-bottom: 2px solid transparent;
}
.nav nav a:hover { color: var(--brand); }
.nav nav a[aria-current="page"] { color: var(--brand-dark); font-weight: 650; border-bottom-color: var(--accent); }
@media (min-width: 940px) {
  .nav nav { order: 0; width: auto; padding-top: 0; gap: 1.3rem; }
  .nav .btn-sm { order: 1; }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-block; background: var(--brand); color: #fff;
  padding: .85rem 1.5rem; border-radius: var(--radius);
  text-decoration: none; font-weight: 650; border: 2px solid var(--brand);
  cursor: pointer; font-size: 1rem;
}
.btn:hover { background: var(--brand-dark); border-color: var(--brand-dark); }
.btn-sm { padding: .5rem .95rem; font-size: .9rem; }
.btn-lg { padding: 1rem 2rem; font-size: 1.08rem; width: 100%; }
.btn-ghost { background: transparent; color: var(--brand); }
.btn-ghost:hover { background: var(--bg-alt); color: var(--brand-dark); }

/* ---------- hero ---------- */
.hero { padding: 3rem 0 2.5rem; background: linear-gradient(180deg, var(--bg-alt), var(--bg)); }
.hero-inner { display: grid; gap: 2.2rem; }
@media (min-width: 900px) {
  .hero { padding: 4.5rem 0 3.5rem; }
  .hero-inner { grid-template-columns: 1.35fr .95fr; align-items: start; gap: 3rem; }
}
.lede { font-size: 1.12rem; color: var(--ink-soft); max-width: 46ch; }
.cta-row { display: flex; flex-wrap: wrap; gap: .8rem; margin: 1.6rem 0 1.4rem; }

.ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; }
.ticks.wide { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.ticks li { padding-left: 1.7rem; position: relative; color: var(--ink-soft); }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .52em;
  width: .72rem; height: .38rem;
  border-left: 2.5px solid var(--brand); border-bottom: 2.5px solid var(--brand);
  transform: rotate(-45deg);
}

/* ---------- cards ---------- */
.card {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.5rem;
}
.price-card { box-shadow: 0 6px 24px rgba(22,32,43,.07); }
.eyebrow {
  text-transform: uppercase; letter-spacing: .08em;
  font-size: .74rem; font-weight: 700; color: var(--ink-soft); margin: 0 0 .3rem;
}
.price { font-size: 3.4rem; font-weight: 800; margin: 0; line-height: 1; color: var(--brand-dark); }
.price span { font-size: 1.6rem; vertical-align: super; }
.price small { font-size: 1rem; font-weight: 500; color: var(--ink-soft); }
.price-sub { color: var(--ink-soft); margin: .35rem 0 0; }
.price-card hr { border: 0; border-top: 1px solid var(--line); margin: 1.1rem 0; }
.mini { margin: 0; display: grid; gap: .45rem; }
.mini > div { display: flex; justify-content: space-between; gap: 1rem; }
.mini dt { color: var(--ink-soft); }
.mini dd { margin: 0; font-weight: 650; }

/* ---------- strip ---------- */
.strip { background: var(--brand-dark); color: #eaf3ee; }
.strip-inner { padding: 1.1rem 0; }
.strip p { margin: 0; font-size: .98rem; }
.strip strong { color: #fff; }

/* ---------- sections ---------- */
.section { padding: 3.4rem 0; }
.section.alt { background: var(--bg-alt); }
.sub { color: var(--ink-soft); max-width: 60ch; }

.steps { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: 1.8rem; }
@media (min-width: 800px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 2.2rem; } }
.steps p { color: var(--ink-soft); margin: 0; }
.num {
  display: inline-grid; place-items: center;
  width: 2.1rem; height: 2.1rem; border-radius: 50%;
  background: var(--brand); color: #fff; font-weight: 700;
  margin-bottom: .7rem;
}

.grid3 { display: grid; gap: 1.2rem; margin-top: 1.8rem; }
@media (min-width: 800px) { .grid3 { grid-template-columns: repeat(3, 1fr); } }
.grid3 p { color: var(--ink-soft); margin: 0; }

/* ---------- table ---------- */
.table-scroll { overflow-x: auto; margin: 1.6rem 0; }
table { width: 100%; border-collapse: collapse; min-width: 480px; }
th, td { text-align: left; padding: .85rem 1rem; border-bottom: 1px solid var(--line); }
thead th { font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); }
tbody th { font-weight: 650; }
tbody td:nth-child(2) { font-weight: 700; color: var(--brand-dark); white-space: nowrap; }

.callout {
  background: #f1f6f3; border: 1px solid #d5e3db;
  border-radius: var(--radius); padding: 1.5rem; margin-top: 1.5rem;
}
.callout h3 { margin-top: 0; }

/* ---------- chips ---------- */
.chips { list-style: none; padding: 0; margin: 1.2rem 0 1.6rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.chips li {
  background: #fff; border: 1px solid var(--line);
  border-radius: 999px; padding: .38rem .95rem; font-size: .93rem; color: var(--ink-soft);
}

/* ---------- faq ---------- */
details {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1rem 1.2rem; margin-bottom: .7rem;
}
details[open] { border-color: #c3cfdb; }
summary { cursor: pointer; font-weight: 650; list-style: none; }
summary::-webkit-details-marker { display: none; }
/* The FAQ's questions are h3 inside the summary, so heading navigation can
   reach all 28 of them instead of stopping at the five category headings.
   Without this rule the h3 is block-level and fills the whole 680px line, so
   the floated +/- marker has no room on that line. Measured: the row does NOT
   grow, it SHRINKS from 27.5px to 21.5px, because a float does not extend its
   container, and the marker escapes the summary box instead. Inline, with size
   and weight inherited, restores the pre-heading rendering exactly. */
summary h3 { display: inline; margin: 0; font-size: inherit; font-weight: inherit; }
summary::after { content: "+"; float: right; color: var(--brand); font-weight: 700; }
details[open] summary::after { content: "\2212"; }
details p { margin: .8rem 0 0; color: var(--ink-soft); }

/* ---------- form ---------- */
.apply { background: var(--bg-alt); }
.form { margin-top: 1.8rem; }
.form label {
  display: block; margin-bottom: 1rem;
  font-weight: 600; font-size: .93rem;
}
.form .row { display: grid; gap: 0 1rem; }
@media (min-width: 620px) { .form .row { grid-template-columns: 1fr 1fr; } }
input[type=text], input[type=tel], input[type=email], textarea {
  display: block; width: 100%; margin-top: .35rem;
  padding: .75rem .85rem; font: inherit; font-weight: 400;
  border: 1px solid var(--field-line); border-radius: 8px; background: #fff;
}

/* ---------- focus ----------
   One ring for everything that takes focus, in two tones, because a single
   colour cannot survive both a white page and a brand-coloured button.

   The inner tone is the page's own background and the outer is the page's own
   text colour, so the two halves contrast with each other by construction for
   any palette an operator sets, and at least one half always contrasts with
   whatever the control is sitting on. Measured against Loon's palette: the
   outer ink ring is 16.46:1 on white and 15.31:1 on --bg-alt, while the inner
   ring is 8.63:1 against the brand submit button, 11.87:1 against the
   brand-dark strip and 16.46:1 against the ink footer. WCAG 1.4.11 asks 3:1.

   What was here before was rgba(20,86,63,.35), one tenant's brand green at 35%
   alpha, hardcoded in the one file whose whole point is that colour arrives as
   a token. It measured 1.84:1 on white and 1.01:1 on the submit button, and
   because setting `outline` replaces the browser's own ring, it left the
   button LESS visible when focused than writing no rule at all. It also never
   named `a`, so every link on the site fell back to the UA default while
   buttons and inputs did not.

   .table-scroll is listed on its own as well as via [tabindex] so that the
   horizontally scrollable pricing table keeps its ring if the attribute that
   makes it keyboard reachable is ever changed. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
.table-scroll:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--bg);
}
textarea { resize: vertical; }
fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.2rem; margin: 0 0 1rem; background: #fff; }
legend { font-weight: 700; font-size: .93rem; padding: 0 .4rem; }
.hint { font-size: .87rem; color: var(--ink-soft); font-weight: 400; margin: 0 0 .6rem; }
.opt { display: flex; align-items: flex-start; gap: .6rem; font-weight: 400; margin-bottom: .45rem; }
.opt input { margin-top: .28rem; flex: none; }
.consent { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: .9rem 1rem; }

.fineprint { font-size: .84rem; color: var(--ink-soft); font-weight: 400; margin-top: .8rem; }

.mt { margin-top: 1.7rem; }

/* ---------- interior page header ----------
   Lighter than the homepage hero: one column, no aside, so an interior page
   gets to its content fast. */
.pagehead { background: linear-gradient(180deg, var(--bg-alt), var(--bg)); padding: 2.6rem 0 2rem; }
@media (min-width: 900px) { .pagehead { padding: 3.6rem 0 2.6rem; } }
.pagehead .lede { max-width: 60ch; }

/* The launch notice itself, rendered once per page from site.launchNotice for
   an operator who is not open yet. A band under the nav rather than a box
   inside the content, so it is the first thing on every page and cannot be
   scrolled past on the way to a price. It disappears entirely when the field
   is cleared, which is the whole of going live. */
.launch-banner { background: #fdf3e6; border-bottom: 1px solid #edd0a6; }
.launch-banner p { margin: 0; padding: .8rem 0; font-size: .95rem; }

/* Standing "we are not open yet" banner. Every page carries one so no page
   can be landed on cold and read as a live offer. */
.notice {
  background: #fdf3e6; border: 1px solid #edd0a6;
  border-radius: var(--radius); padding: 1rem 1.2rem; margin: 1.6rem 0 0;
}
.notice p { margin: 0; font-size: .95rem; }
.notice p + p { margin-top: .5rem; }
.notice strong { color: var(--ink); }

/* Wide-plus-narrow split: main content beside a summary card. Same
   proportions as the homepage hero, reusable on interior pages. */
.split { display: grid; gap: 2.2rem; }
@media (min-width: 900px) { .split { grid-template-columns: 1.35fr .95fr; align-items: start; gap: 3rem; } }

/* ---------- two-column content grid ---------- */
.grid2 { display: grid; gap: 1.4rem; margin-top: 1.8rem; }
@media (min-width: 800px) { .grid2 { grid-template-columns: 1fr 1fr; gap: 2rem; } }
.grid2 p { color: var(--ink-soft); }
.grid2 h3 { margin-bottom: .35rem; }

/* ---------- vertical numbered journey ----------
   The three-across .steps grid works for a three-beat summary. A six-step
   end-to-end journey reads better as a single vertical spine. */
.journey { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: 0; }
.journey > li { position: relative; padding: 0 0 2rem 3.4rem; }
.journey > li::before {
  content: ""; position: absolute; left: 1.04rem; top: 2.1rem; bottom: 0;
  width: 2px; background: var(--line);
}
.journey > li:last-child { padding-bottom: 0; }
.journey > li:last-child::before { display: none; }
.journey .num { position: absolute; left: 0; top: 0; margin: 0; }
.journey h3 { margin: .25rem 0 .35rem; }
.journey p { color: var(--ink-soft); margin: 0 0 .6rem; }
.journey p:last-child { margin-bottom: 0; }

/* ---------- included / not included ---------- */
.crosses { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; }
.crosses li { padding-left: 1.7rem; position: relative; color: var(--ink-soft); }
.crosses li::before {
  content: ""; position: absolute; left: .15rem; top: .68em;
  width: .8rem; height: 2.5px; background: #b0402e;
}

/* ---------- definition rows ---------- */
.terms { margin: 1.6rem 0 0; }
.terms > div {
  display: grid; gap: .1rem .5rem;
  padding: .9rem 0; border-top: 1px solid var(--line);
}
.terms > div:last-child { border-bottom: 1px solid var(--line); }
@media (min-width: 700px) { .terms > div { grid-template-columns: 15rem 1fr; gap: 1.5rem; } }
.terms dt { font-weight: 650; }
.terms dd { margin: 0; color: var(--ink-soft); }

/* ---------- footer ---------- */
.footer { background: var(--ink); color: #b9c6d3; padding: 2.5rem 0; margin-top: 0; }
.footer-inner { display: grid; gap: 1.6rem; }
@media (min-width: 800px) { .footer-inner { grid-template-columns: 1.2fr 1fr 1.3fr; gap: 2.5rem; } }
.footer a { color: #fff; }
.footer .brand { color: #fff; }
.footer p { margin: 0 0 .4rem; }
.footer .fineprint { color: #8a99a8; }
.footer h2 {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .08em;
  color: #8a99a8; margin: 0 0 .6rem;
}
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem; }
.footer ul a { text-decoration: none; }
.footer ul a:hover { text-decoration: underline; }