/* ==========================================================================
   SiteMura.ph — Components
   Every rule is a single class. No element selectors that could collide
   with .band / .stack spacing.
   ========================================================================== */

/* --- Icon masks (shape only — colour comes from the consuming rule) -------- */

:root {
  --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.5 6.5 9.5 17.5l-6-6' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --icon-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 1.5 21h21z' fill='none' stroke='%23000' stroke-width='2.4' stroke-linejoin='round'/%3E%3Cpath d='M12 9.5v4.2' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='17.4' r='1.3' fill='%23000'/%3E%3C/svg%3E");
  --icon-dash:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* --- Site header ---------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              background var(--dur) var(--ease);
}
/* Set by initHeaderScroll() past 8px. Over the hero the header should feel like
   part of the page; once content runs under it, it needs an edge. */
.site-header.is-stuck {
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  border-bottom-color: var(--line);
  box-shadow: var(--shadow-sm);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  min-height: var(--header-h);
}

.brand { display: flex; align-items: center; gap: var(--s-3); text-decoration: none; }
.brand__mark { width: 32px; height: 32px; flex: none; }
.brand__word {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  line-height: 1;
}
.brand__word em { font-style: normal; color: var(--accent); }

.nav { margin-left: auto; }
.nav__list {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  list-style: none;
  margin: 0; padding: 0;
}
.nav__link {
  position: relative;
  color: var(--ink-body);
  text-decoration: none;
  font-size: var(--step--1);
  font-weight: 500;
  padding-block: var(--s-2);
  transition: color var(--dur-fast) var(--ease);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--dur) var(--ease);
}
.nav__link:hover { color: var(--ink); }
.nav__link:hover::after { transform: scaleX(.55); }
.nav__link[aria-current="page"] { color: var(--ink); }
.nav__link[aria-current="page"]::after { transform: scaleX(1); }

.header__actions { display: flex; align-items: center; gap: var(--s-3); }

.theme-toggle,
.nav-toggle {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--ink-body);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.theme-toggle:hover,
.nav-toggle:hover { background: var(--surface-sunken); border-color: var(--accent); color: var(--ink); }
.theme-toggle__sun { display: none; }
:root[data-theme="dark"] .theme-toggle__sun { display: block; }
:root[data-theme="dark"] .theme-toggle__moon { display: none; }

.nav-toggle { display: none; }

/* Narrow phones: the wordmark alone is enough branding, and dropping it keeps
   the CTA on one line instead of squeezing four controls into 360px. */
@media (max-width: 420px) {
  .brand__mark { display: none; }
  .site-header__inner { gap: var(--s-3); }
  .btn { padding-inline: 1em; }
}

@media (max-width: 960px) {
  .nav-toggle { display: grid; }
  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    margin: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    display: none;
  }
  .nav[data-open="true"] { display: block; }
  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--s-3) var(--s-5) var(--s-5);
  }
  .nav__link {
    display: block;
    padding: var(--s-4) 0;
    border-bottom: 1px solid var(--line);
    font-size: var(--step-0);
  }
  /* The drawer uses a full-width divider, so the sliding underline would
     double up on it. Row separator only here. */
  .nav__link::after { display: none; }
  .nav__link[aria-current="page"] { border-bottom-color: var(--accent); color: var(--accent); }
}

/* --- Buttons -------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  padding: 0.7em 1.35em;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, .22);
}
.btn--primary:hover {
  background: var(--accent-hover);
  color: var(--accent-ink);
  box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, .22);
}
.btn--primary:active { box-shadow: var(--shadow-sm), inset 0 1px 2px rgba(0, 0, 0, .18); }

.btn--ghost {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-sm), var(--edge);
}
.btn--ghost:hover {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--accent);
  box-shadow: var(--shadow-md), var(--edge);
}

.btn--invert { background: var(--surface); color: var(--ink); }
.btn--invert:hover { background: var(--accent-soft); color: var(--ink); }

/* Outline button for a permanently dark band — .cta-band and .band--invert.

   .btn--ghost CANNOT serve here. Its background is var(--surface), which is
   #ffffff in light mode, so white text placed on it disappears completely. That
   was a live bug on seven pages, and it hid in plain sight because --surface
   goes dark in dark mode, where the same markup looks perfectly fine.

   The white-alpha values are deliberate, not a lapse in the no-hard-coded-colour
   rule: --brand-navy is defined once and never redefined per theme, so what sits
   behind this button is the same in light and dark. Border is .45 alpha, which
   composites to 4.17:1 against the navy — clearing the 3:1 WCAG minimum for a
   non-text control that has nothing but an outline to make it findable. */
.btn--ghost-invert {
  background: transparent;
  color: var(--ink-invert);
  border-color: rgba(255, 255, 255, 0.45);
  box-shadow: none;
}
.btn--ghost-invert:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.75);
  box-shadow: none;
}

.btn--lg { padding: 0.85em 1.7em; font-size: var(--step-0); }
.btn--block { width: 100%; }

/* --- Badges & pills ------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: 0.28em 0.7em;
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  /* Badges are flex children of .stack columns — without this they stretch. */
  align-self: flex-start;
}
.badge--popular { background: var(--warn-soft); color: var(--warn); }
.badge--ok      { background: var(--ok-soft);   color: var(--ok); }
.badge--accent  { background: var(--accent-soft); color: var(--accent); }
.badge--alert   { background: var(--alert-soft); color: var(--alert); }

/* --- Card ----------------------------------------------------------------- */

.card {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm), var(--edge);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.card:hover { border-color: var(--line-strong); }
.card--flat { box-shadow: var(--edge); }
.card--link {
  text-decoration: none;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.card--link:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md), var(--edge);
  border-color: var(--accent-line);
}
.card__title { font-size: var(--step-2); }
.card__body { color: var(--ink-body); font-size: var(--step--1); }

/* --- Browser window motif -------------------------------------------------
   The logo is a browser window. This motif is reserved for content that
   genuinely IS a website — hero mockup and demo cards. Nowhere else.
   -------------------------------------------------------------------------- */

.window {
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg), var(--edge);
}

.window__bar {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--brand-navy);
  border-bottom: 1px solid var(--line);
}

.window__dots { display: flex; gap: 6px; flex: none; }
.window__dots i { width: 10px; height: 10px; border-radius: 50%; display: block; }
.window__dots i:nth-child(1) { background: var(--dot-red); }
.window__dots i:nth-child(2) { background: var(--dot-amber); }
.window__dots i:nth-child(3) { background: var(--dot-green); }

.window__url {
  flex: 1;
  padding: 0.25em 0.7em;
  background: rgba(255, 255, 255, .1);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: #cfdcf2;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.window__body { padding: 0; background: var(--surface-sunken); }

/* --- Image slot (structure phase — no photos yet) -------------------------
   A labelled placeholder that states exactly which asset belongs here.
   Replace each .slot with a real <img> before launch. See assets/img/README.md
   -------------------------------------------------------------------------- */

.slot {
  display: grid;
  place-content: center;
  gap: var(--s-1);
  padding: var(--s-5);
  min-height: var(--slot-h, 200px);
  background:
    repeating-linear-gradient(
      -45deg,
      transparent 0 10px,
      color-mix(in srgb, var(--ink-muted) 8%, transparent) 10px 11px
    ),
    var(--surface-sunken);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  color: var(--ink-muted);
  text-align: center;
}
.slot__label {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.slot__hint { font-size: var(--step--1); max-width: 34ch; margin-inline: auto; }
.slot--tall { --slot-h: 340px; }
.slot--short { --slot-h: 130px; }
.slot--flush { border-radius: 0; border-inline: 0; border-block-start: 0; }

/* --- Tables --------------------------------------------------------------- */

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--step--1);
  font-variant-numeric: tabular-nums;
}
.table th, .table td {
  padding: var(--s-3) var(--s-4);
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.table thead th {
  position: sticky;
  top: 0;
  background: var(--brand-navy);
  color: #fff;
  font-family: var(--font-body);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.table tbody th {
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}
.table tbody tr:last-child th,
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:nth-child(even) { background: var(--surface-sunken); }
.table tbody tr { transition: background var(--dur-fast) var(--ease); }
/* Deliberately weaker than the highlighted "most popular" column, which is a
   full --accent-soft. If row hover matched it, hovering would erase the column
   emphasis on that row. */
.table tbody tr:hover { background: color-mix(in srgb, var(--accent-soft) 50%, var(--surface)); }
.table td[data-yes]  { color: var(--ok); font-weight: 600; }
.table td[data-no]   { color: var(--ink-muted); }
.table__col-hi { background: var(--accent-soft); }

/* --- Prices --------------------------------------------------------------- */

.price {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  flex-wrap: wrap;
}
.price__amount {
  font-family: var(--font-mono);
  font-size: var(--step-3);
  font-weight: 600;
  color: var(--ink);
  /* Mono is generously spaced by design; a price is a single object and wants
     to read tighter than a column of code. */
  letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
}
.price__alt { font-family: var(--font-mono); font-size: var(--step--1); color: var(--ink-muted); }
.price__term { font-size: var(--step--1); color: var(--ink-muted); }

.currency-switch {
  display: inline-flex;
  padding: 3px;
  background: var(--surface-sunken);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
}
.currency-switch__btn {
  padding: 0.4em 1em;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.06em;
  cursor: pointer;
}
.currency-switch__btn[aria-pressed="true"] {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}

/* --- Feature list --------------------------------------------------------- */

.checklist { list-style: none; padding: 0; display: grid; gap: var(--s-2); }

/* Hanging indent, NOT grid or flex on the li. Both of those promote every
   inline child (<code>, <a>, <strong>) to its own item, which snaps mid-
   sentence markup onto its own line. Absolute positioning keeps text inline. */
.checklist li {
  position: relative;
  padding-left: 1.85em;
  font-size: var(--step--1);
  margin: 0;
}
/* Icon is a CSS mask, not a background-image, so it inherits the themed
   fill colour below instead of baking a hex into a data URI. */
.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.34em;
  width: 1.05em; height: 1.05em;
  background: var(--ok);
  -webkit-mask: var(--icon-check) center / 100% 100% no-repeat;
          mask: var(--icon-check) center / 100% 100% no-repeat;
}

/* Label / value rows in a tier's spec panel. */
.spec-list {
  display: grid;
  gap: var(--s-2);
  padding-block: var(--s-3);
  border-block: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--ink-muted);
}
.spec-list > div {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-4);
  align-items: baseline;
}
.spec-list dd { margin: 0; text-align: right; color: var(--ink-body); }
.checklist--excluded li::before {
  background: var(--ink-muted);
  -webkit-mask: var(--icon-dash) center / 100% 100% no-repeat;
          mask: var(--icon-dash) center / 100% 100% no-repeat;
}

/* --- Steps (used ONLY where content is a real sequence) -------------------- */

.steps { list-style: none; padding: 0; display: grid; gap: 0; counter-reset: step; }
.step {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: var(--s-4);
  padding-block: var(--s-5);
  border-bottom: 1px solid var(--line);
  margin: 0;
}
.step:last-child { border-bottom: 0; }
.step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--accent);
  padding-top: 0.2em;
}
.step__title { font-size: var(--step-1); font-family: var(--font-display); font-weight: 700; color: var(--ink); }
.step__when {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* --- Accordion (FAQ) ------------------------------------------------------- */

.faq { display: grid; gap: var(--s-2); }
.faq__item {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  width: 100%;
  padding: var(--s-4) var(--s-5);
  background: transparent;
  border: 0;
  font-family: var(--font-body);
  font-size: var(--step-0);
  font-weight: 600;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.faq__q::after {
  content: "";
  flex: none;
  width: 0.6em; height: 0.6em;
  border-right: 2px solid var(--ink-muted);
  border-bottom: 2px solid var(--ink-muted);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform var(--dur) var(--ease);
}
.faq__q[aria-expanded="true"]::after { transform: rotate(225deg) translate(-2px, -2px); }
.faq__a { padding: 0 var(--s-5) var(--s-5); font-size: var(--step--1); }
.faq__a[hidden] { display: none; }
/* Opening animates; closing stays instant. A collapse animation would have to
   fight [hidden], and a panel that lingers on the way out reads as lag. */
.faq__a:not([hidden]) { animation: faq-open var(--dur) var(--ease); }
@keyframes faq-open {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
.faq__item { transition: border-color var(--dur-fast) var(--ease); }
.faq__item:hover { border-color: var(--line-strong); }

/* --- Forms ---------------------------------------------------------------- */

.form { display: grid; gap: var(--s-5); }
.field { display: grid; gap: var(--s-2); }
.field__label { font-size: var(--step--1); font-weight: 600; color: var(--ink); }
.field__hint { font-size: var(--step--2); color: var(--ink-muted); }
.field__req { color: var(--alert); }

.input, .select, .textarea {
  width: 100%;
  padding: 0.7em 0.9em;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--ink-body);
  font-family: var(--font-body);
  font-size: var(--step-0);
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.input:hover, .select:hover, .textarea:hover { border-color: var(--ink-muted); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--ring);
}

/* Validation, wired up by initFormValidation() in main.js. */
.input[aria-invalid="true"],
.select[aria-invalid="true"],
.textarea[aria-invalid="true"] { border-color: var(--alert); }
.input[aria-invalid="true"]:focus,
.select[aria-invalid="true"]:focus,
.textarea[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px var(--alert-soft);
}
.field__error {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--step--2);
  font-weight: 500;
  color: var(--alert);
}
.field__error::before {
  content: "";
  flex: none;
  width: 0.95em; height: 0.95em;
  background: var(--alert);
  -webkit-mask: var(--icon-alert) center / 100% 100% no-repeat;
          mask: var(--icon-alert) center / 100% 100% no-repeat;
}
.textarea { min-height: 8rem; resize: vertical; }
.field-row { display: grid; gap: var(--s-5); }
@media (min-width: 700px) { .field-row { grid-template-columns: 1fr 1fr; } }

/* --- Callout -------------------------------------------------------------- */

.callout {
  display: grid;
  gap: var(--s-2);
  padding: var(--s-5);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
  border-left: 3px solid var(--accent);
  font-size: var(--step--1);
}
.callout--ok    { border-left-color: var(--ok); background: var(--ok-soft); }
.callout--warn  { border-left-color: var(--warn); background: var(--warn-soft); }
.callout__title { font-weight: 700; color: var(--ink); font-size: var(--step-0); }

/* --- Stat ----------------------------------------------------------------- */

.stat { display: grid; gap: var(--s-1); }
.stat__value {
  font-family: var(--font-mono);
  font-size: var(--step-4);
  font-weight: 600;
  color: var(--ink);
  line-height: 1;
  letter-spacing: -0.03em;
}
.band--invert .stat__value { color: var(--ink-invert); }
.stat__label { font-size: var(--step--1); color: var(--ink-muted); }
.band--invert .stat__label { color: var(--ink-invert-muted); }

/* --- Footer --------------------------------------------------------------- */

.site-footer {
  background: var(--brand-navy);
  color: #b9c6dd;
  padding-block: var(--s-8) var(--s-6);
  font-size: var(--step--1);
}
.site-footer a { color: #dbe6f8; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer .brand__word { color: #fff; }
.site-footer .brand__word em { color: #6ba3ff; }

.footer__grid {
  display: grid;
  gap: var(--s-6);
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
}
.footer__heading {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #7d90ae;
}
.footer__list { list-style: none; padding: 0; display: grid; gap: var(--s-2); }
.footer__list li { margin: 0; }
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  justify-content: space-between;
  align-items: center;
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: var(--step--2);
  color: #7d90ae;
}