/*
 * Components. Colors and sizes come from tokens.css only.
 */

/* Buttons. A flat call to action is <a role="button" class="button">. */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--button-height);
  min-width: var(--tap-min);
  padding: 0 var(--space-6);
  border: 1px solid transparent;
  border-radius: var(--radius-input);
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: 700;
  font-synthesis: none;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 120ms ease, transform 120ms ease;
}

.button:active {
  background: var(--accent-pressed);
  transform: translateY(1px);
}

/* Busy: Turbo disables the submit and swaps its label (data-turbo-submits-with) while the request runs. The label is
   the page's only progress feedback, so it stays readable: --bg on --text-muted is 8.48:1 dark and 7.56:1 light. */
.button[disabled] {
  background: var(--text-muted);
  color: var(--bg);
  cursor: default;
  transform: none;
}

.button-secondary {
  background: transparent;
  border-color: var(--text-muted);
  color: var(--text);
}

.button-secondary:active {
  background: var(--surface);
}

/* Hover only where a pointer can hover (a tap on a touch screen would leave it stuck after the click), and never on
   a disabled button, so the busy state looks the same under the pointer as from the keyboard. */
@media (hover: hover) {
  .button:hover:not([disabled]) {
    background: var(--accent-pressed);
  }

  .button-secondary:hover:not([disabled]) {
    background: var(--surface);
  }
}

/* .button-block: opt-in full-width button on phones (hero and wizard action bars). */
@media (max-width: 599px) {
  .button-block {
    display: flex;
    width: 100%;
  }
}

/* Icons: <svg class="icon"><use href="#icon-..."/></svg>, symbols in app/views/shared/_icons.html.erb. */
.icon {
  flex: none;
  width: var(--space-6);
  height: var(--space-6);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* The sprite holds symbols only. The hidden attribute does not hide an SVG element, so it takes no box here. */
.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Skip link: the first focusable element, off screen until it has focus. */
.skip-link {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 10;
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  padding: 0 var(--space-4);
  border-radius: var(--radius-input);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-200%);
}

/* Shown in flow, so it pushes the header down instead of covering the brand link. */
.skip-link:focus {
  position: static;
  align-self: flex-start;
  margin: var(--space-2);
  transform: none;
}

/* Public layout: header, hero, map, how it works, footer. */
body.public {
  display: flex;
  flex-direction: column;
}

body.public > main {
  flex: 1 0 auto;
}

/* The header is the positioning box of the phone menu panel; its row is .header-inner. */
.site-header {
  position: relative;
  background: var(--bg);
  color: var(--text);
  padding: var(--space-4);
  padding-top: max(var(--space-4), env(safe-area-inset-top));
  padding-left: max(var(--space-4), env(safe-area-inset-left));
  padding-right: max(var(--space-4), env(safe-area-inset-right));
}

/* The logo artwork was drawn on a light ground, so it sits on a plate of that
   same color (--logo-plate) in the dark header. The link is the whole plate:
   --logo-height tall plus --space-1 above and below (the brand row). */
.brand {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-input);
  background: var(--logo-plate);
  text-decoration: none;
  min-width: 0;
}

.brand-logo {
  display: block;
  width: calc(var(--logo-height) * 336 / 120);
  max-width: 100%;
  height: auto;
}

/* The header row: the brand, the main navigation, then the actions, in the footer's 1120px container. */
.header-inner {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--space-2);
}

/* The main navigation (shared/_site_nav): under 900px a Menu disclosure whose panel opens under the
   header; from 900px the same four links inline (see the 900px block below). */
.site-nav {
  margin-left: auto;
  flex-shrink: 0;
}

.site-nav-links {
  display: none;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav-toggle {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  padding: 0 var(--space-4);
  border: 1px solid var(--text-muted);
  border-radius: var(--radius-input);
  color: var(--text);
  font-weight: 700;
  list-style: none;
  cursor: pointer;
}

.site-nav-toggle::-webkit-details-marker {
  display: none;
}

.site-nav-menu[open] .site-nav-toggle {
  background: var(--surface);
}

.site-nav-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 5;
  margin: 0;
  padding: var(--space-2) var(--space-4) var(--space-4);
  list-style: none;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}

.site-nav-link {
  display: flex;
  align-items: center;
  min-height: var(--tap-min);
  padding: 0 var(--space-3);
  color: var(--text);
  text-decoration: none;
}

.site-nav-link:hover {
  text-decoration: underline;
}

/* The current page is underlined, so it is marked by more than colour. */
.site-nav-link[aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

/* Under 900px the row is the brand, Menu and Log in, and it never wraps. At 375px the row is 343px (375 minus 2 x 16
   padding) = brand + 8 + Menu + 8 + Log in. Menu and Log in keep their text width (49.6 and 55.1px in DejaVu Sans Bold,
   the Linux runner's font, measured 2026-10-14) and the brand gives way (its logo shrinks, ratio kept), so the row holds
   at any font and down to 320px. Log in's padding stays narrowed so the logo keeps as much width as it can. */
@media (max-width: 599px) {
  .header-actions .button {
    padding: 0 var(--space-3);
  }
}

.hero {
  background: var(--bg);
  color: var(--text);
  padding: var(--space-8) var(--space-4) var(--space-12);
  padding-left: max(var(--space-4), env(safe-area-inset-left));
  padding-right: max(var(--space-4), env(safe-area-inset-right));
}

.hero-inner {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  gap: var(--space-8);
}

.hero-title {
  font-size: var(--text-2xl);
  font-weight: 800;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.hero-subhead {
  margin-top: var(--space-3);
  max-width: 34rem;
  color: var(--text-muted);
  font-size: var(--text-lg);
  text-wrap: pretty;
}

/* Action slots (hero and header): the Log in link. */
.hero-actions,
.header-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.header-actions {
  flex-shrink: 0;
}

.hero-actions {
  margin-top: var(--space-6);
}

.us-map {
  display: block;
  width: 100%;
  height: auto;
}

.us-map-land {
  fill: var(--surface);
  stroke: var(--text-muted);
  stroke-width: 2;
  stroke-linejoin: round;
}

.us-map-route {
  fill: none;
  stroke: var(--accent);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 2 16;
  animation: route-drift 8s linear infinite;
}

/* The dots drift from Los Angeles toward New York: 8 dash periods (2 + 16) per loop, so it never jumps.
   base.css stops it under prefers-reduced-motion. */
@keyframes route-drift {
  to { stroke-dashoffset: -144; }
}

.us-map-pin circle { fill: var(--accent); }
.us-map-pin .us-map-pin-core { fill: var(--bg); }

/* How it works: three numbered steps under the hero. */
.how {
  border-top: 1px solid var(--border);
  padding: var(--space-12) var(--space-4);
  padding-left: max(var(--space-4), env(safe-area-inset-left));
  padding-right: max(var(--space-4), env(safe-area-inset-right));
}

.how-inner {
  max-width: 1120px;
  margin: 0 auto;
}

.section-label {
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
}

.how-steps {
  display: grid;
  gap: var(--space-4);
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
}

.how-step {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-6);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
}

.how-step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-8);
  height: var(--space-8);
  border: 2px solid var(--accent);
  border-radius: 50%;
  color: var(--accent);
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1;
}

.how-step-icon {
  width: var(--space-8);
  height: var(--space-8);
  color: var(--accent);
}

.how-step-title,
.how-step-text {
  flex-basis: 100%;
}

.how-step-title {
  margin-top: var(--space-2);
}

.how-step-text {
  color: var(--text-muted);
}

/* Sign in and password reset: one centered card on the dark page. */
/* LOCKED (Pattern 4): pinned by test/guards/authentication_guard_test.rb; see docs/ai/patterns/PATTERN_4_AUTHENTICATION_LOCK.md */
.auth {
  padding: var(--space-8) var(--space-4) var(--space-12);
  padding-left: max(var(--space-4), env(safe-area-inset-left));
  padding-right: max(var(--space-4), env(safe-area-inset-right));
}

.auth-card {
  max-width: 26rem;
  margin: 0 auto;
  padding: var(--space-6);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
  color: var(--text);
}

.auth-title {
  font-size: var(--text-xl);
  font-weight: 800;
  text-wrap: balance;
}

.auth-lead {
  margin-top: var(--space-2);
  color: var(--text-muted);
}

.auth-form {
  margin-top: var(--space-6);
}

.field + .field {
  margin-top: var(--space-4);
}

.field-label {
  display: block;
  margin-bottom: var(--space-1);
  color: var(--text);
  font-size: var(--text-sm);
  font-weight: 700;
}

/* A label with a link on the same row (Password and Forgot password?). The link follows the
   input in the DOM, so Tab reaches the field first; the grid draws it on the label's row. */
.field-with-link {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: var(--space-3);
  row-gap: var(--space-1);
  align-items: baseline;
}

.field-with-link .field-label {
  grid-row: 1;
  grid-column: 1;
  margin-bottom: 0;
}

.field-with-link .field-link {
  grid-row: 1;
  grid-column: 2;
  justify-self: end;
}

.field-with-link .field-input-wrap {
  grid-row: 2;
  grid-column: 1 / -1;
}

.field-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  color: var(--accent);
  font-size: var(--text-sm);
}

.field-hint {
  margin-bottom: var(--space-1);
  color: var(--text-muted);
  font-size: var(--text-sm);
  text-wrap: pretty;
}

.field-error {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-top: var(--space-1);
  color: var(--danger);
  font-size: var(--text-sm);
}

/* A circled "!" before the error text, so the error never rests on color alone. The alt text "" keeps it out of
   the accessible name (the text already says the error); the first content line is the fallback. */
.field-error::before {
  content: "!";
  content: "!" / "";
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--space-4);
  height: var(--space-4);
  border: 2px solid currentColor;
  border-radius: 50%;
  font-size: var(--text-xs);
  font-weight: 800;
  line-height: 1;
}

/* base.css gives every input its border, padding, colors and the --focus-ring outline on :focus-visible. */
.field-input {
  display: block;
  width: 100%;
  min-height: var(--button-height);
  border-radius: var(--radius-input);
}

/* A refused field is marked by its border as well as by its error line. */
.field-input[aria-invalid="true"] {
  border-color: var(--danger);
}

/* Show/Hide password: the control sits inside the field, at its right edge. */
.field-input-wrap {
  position: relative;
}

.field-input-wrap .field-input {
  padding-right: calc(var(--tap-min) + var(--space-6));
}

.field-toggle {
  position: absolute;
  top: 50%;
  right: var(--space-1);
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-min);
  min-width: var(--tap-min);
  padding: 0 var(--space-2);
  border: none;
  border-radius: var(--radius-input);
  background: transparent;
  color: var(--text-muted);
  font-size: var(--text-sm);
  font-weight: 700;
  cursor: pointer;
}

/* A display rule beats the hidden attribute, so hidden is restated until the controller connects. */
.field-toggle[hidden] {
  display: none;
}

/* Read by screen readers, not shown. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* The auth pages are the login destination, so the header's Log in button is not shown there. */
body.public:has(.auth) .header-actions {
  display: none;
}

.form-actions {
  margin-top: var(--space-6);
}

/* The auth card's submit spans the card at every width (the home page's .button-block stays phone-only). */
.auth-form .button-block {
  display: flex;
  width: 100%;
}

.flash {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-left-width: var(--space-1);
  border-radius: var(--radius-input);
  background: var(--bg);
  color: var(--text);
}

.flash-alert {
  border-color: var(--danger);
}

.flash-notice {
  border-color: var(--success);
}

.auth-footnote {
  margin-top: var(--space-4);
  color: var(--text-muted);
  font-size: var(--text-sm);
  text-align: center;
}

.auth-footnote a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  padding: 0 var(--space-2);
  color: var(--text-muted);
}

/* From 900px the card sits centered between header and footer: main fills the page (body.public > main) and
   .auth fills main. On a phone it stays at the top, so the keyboard never covers the fields. */
@media (min-width: 900px) {
  body.public:has(.auth) > main {
    display: grid;
  }

  .auth {
    display: grid;
    align-content: center;
    padding-top: var(--space-12);
  }

  /* A grid item with auto margins shrinks to its content; the card keeps its full 26rem. */
  .auth-card {
    width: 100%;
    padding: var(--space-8);
  }
}

/* The public footer (shared/_footer): the company block, then the Resources and Company columns.
   The company block over the two link columns (side by side at every width), three columns from 900px. */
.site-footer {
  padding: var(--space-8) var(--space-4);
  padding-bottom: max(var(--space-6), env(safe-area-inset-bottom));
  padding-left: max(var(--space-4), env(safe-area-inset-left));
  padding-right: max(var(--space-4), env(safe-area-inset-right));
  border-top: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.footer-inner {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}

.footer-company {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.footer-brand {
  color: var(--text);
  font-weight: 700;
}

.footer-address {
  margin-top: var(--space-2);
  font-style: normal;
}

.footer-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
}

.footer-heading {
  margin: 0 0 var(--space-2);
  color: var(--text);
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.footer-links {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  color: var(--text-muted);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--text);
  text-decoration: underline;
}

.footer-legal {
  max-width: 1120px;
  margin: var(--space-8) auto 0;
  padding-top: var(--space-6);
  border-top: 1px solid var(--border);
  text-align: center;
}

@media (min-width: 900px) {
  .site-footer {
    padding-left: var(--space-8);
    padding-right: var(--space-8);
  }

  .footer-inner {
    grid-template-columns: 1.4fr 2fr;
  }
}

@media (min-width: 900px) {
  .site-header {
    padding-left: var(--space-8);
    padding-right: var(--space-8);
  }

  /* The four links inline beside the logo, the Menu disclosure gone, Log in at the right. */
  .header-inner {
    flex-wrap: wrap;
    gap: var(--space-4);
  }

  /* The row wraps here, so the logo never shrinks and its height leads again: sized by width, 201.6px snaps to
     201.59375 and the height to 71.984375 (measured 2026-10-14), so the desktop header kept its 72px only this way. */
  .brand-logo {
    width: auto;
    height: var(--logo-height);
  }

  .site-nav {
    margin-left: var(--space-4);
  }

  .site-nav-links {
    display: flex;
    gap: var(--space-1);
  }

  .site-nav-menu {
    display: none;
  }

  .header-actions {
    margin-left: auto;
  }

  /* The hero fills the first screen under the header (its brand row, --logo-height plus --space-1 above
     and below, plus --space-4 above and below), content centered, so the fold is clean and the strip starts below it. */
  .hero {
    display: grid;
    align-items: center;
    min-height: calc(100vh - (var(--logo-height) + 2 * var(--space-1) + 2 * var(--space-4)));
    min-height: calc(100dvh - (var(--logo-height) + 2 * var(--space-1) + 2 * var(--space-4)));
    padding: var(--space-12) var(--space-8);
  }

  .hero-inner {
    width: 100%;
    grid-template-columns: 5fr 6fr;
    align-items: center;
  }

  .hero-title {
    font-size: calc(var(--text-2xl) * 1.5);
  }

  .how {
    padding-left: var(--space-8);
    padding-right: var(--space-8);
  }

  .how-steps {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Company pages (about, partners, retail distribution, press, brand, support): one reading column. */
.page {
  padding: var(--space-8) var(--space-4) var(--space-12);
  padding-left: max(var(--space-4), env(safe-area-inset-left));
  padding-right: max(var(--space-4), env(safe-area-inset-right));
}

.page-inner {
  max-width: 960px;
  margin: 0 auto;
}

.page-title {
  font-size: var(--text-2xl);
  font-weight: 800;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.page-lead {
  margin-top: var(--space-3);
  max-width: 40rem;
  color: var(--text-muted);
  font-size: var(--text-lg);
  text-wrap: pretty;
}

.page-section {
  margin-top: var(--space-8);
  padding-top: var(--space-8);
  border-top: 1px solid var(--border);
}

.page-section > p {
  max-width: 40rem;
  margin-top: var(--space-3);
}

.page-note {
  margin-top: var(--space-3);
  color: var(--text-muted);
  font-size: var(--text-sm);
}

/* Legal pages: the contents list under "Last updated", one jump link per numbered section. */
.toc-list {
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
  max-width: 40rem;
}

.toc-list a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
}

.contact-block {
  margin-top: var(--space-3);
  font-style: normal;
  line-height: 1.75;
}

/* Legal pages (privacy, terms, cookies): numbered subsections and plain lists in the reading column. */
.page-subhead {
  margin-top: var(--space-6);
  font-size: var(--text-lg);
}

.page-list {
  max-width: 40rem;
  margin: var(--space-3) 0 0;
  padding-left: var(--space-6);
}

.page-list > li + li {
  margin-top: var(--space-2);
}

.card-grid,
.step-list {
  display: grid;
  gap: var(--space-4);
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
}

.card {
  padding: var(--space-6);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
}

.card-text {
  margin-top: var(--space-2);
  color: var(--text-muted);
}

/* A numbered step card: the title sits under the step's number circle. */
.step-list .card-title {
  margin-top: var(--space-3);
}

/* Lead forms: the fields on one card; two name fields share a row on wider screens. */
.lead-form {
  max-width: 40rem;
  margin-top: var(--space-4);
  padding: var(--space-6);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
}

.field-row {
  display: grid;
  gap: var(--space-4);
}

.field-row + .field,
.field + .field-row {
  margin-top: var(--space-4);
}

/* Inside a row the grid gap spaces the fields, so the stacked-field margin would push the second one down. */
.field-row > .field + .field {
  margin-top: 0;
}

.field-textarea {
  min-height: calc(var(--button-height) * 3);
  resize: vertical;
}

/* Rails wraps an errored label and control in div.field_with_errors; display: contents keeps them in the field's own layout. */
.field_with_errors {
  display: contents;
}

.field-optional {
  color: var(--text-muted);
  font-weight: 400;
}

/* A lead form's alert sits at the form's width, not the reading column's. */
.page-section .flash {
  max-width: 40rem;
}

/* After a send the thank-you card stands in the form's place. */
.lead-sent .flash {
  margin-top: 0;
}

.lead-sent-again a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
}

/* The honeypot: people never see it, so only bots fill it in. */
.form-trap {
  display: none;
}

/* Brand Kit: downloads, palette, boilerplate. */
.table-wrap {
  margin-top: var(--space-4);
  overflow-x: auto;
}

.brand-table {
  width: 100%;
  border-collapse: collapse;
}

.brand-table th,
.brand-table td {
  padding: var(--space-3);
  border-bottom: 1px solid var(--border);
  text-align: left;
}

.brand-table thead th {
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.brand-download {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
}

.palette {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
}

.palette-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
}

.palette-text {
  display: grid;
  flex: 1 1 12rem;
}

.palette-name {
  font-weight: 700;
}

.palette-use,
.palette-token {
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.swatch {
  flex: none;
  width: var(--space-12);
  height: var(--space-12);
  border: 1px solid var(--text-muted);
  border-radius: var(--radius-input);
}

.swatch-bg { background: var(--bg); }
.swatch-surface { background: var(--surface); }
.swatch-text { background: var(--text); }
.swatch-text-muted { background: var(--text-muted); }
.swatch-accent { background: var(--accent); }

.boilerplate {
  margin-top: var(--space-4);
  padding: var(--space-6);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
}

.boilerplate p {
  margin: var(--space-2) 0 var(--space-4);
  max-width: 40rem;
}

/* The copy buttons ship hidden until the clipboard controller connects; .button's display would beat the attribute. */
.copy-button[hidden] {
  display: none;
}

.copy-status {
  color: var(--text-muted);
  font-size: var(--text-sm);
}

@media (min-width: 600px) {
  .field-row {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 900px) {
  .page {
    padding: var(--space-12) var(--space-8);
  }

  .page-title {
    font-size: calc(var(--text-2xl) * 1.25);
  }

  .card-grid,
  .step-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Resources pages (found a tag, integrations, ROI calculator, white paper, tour). */
.found-text {
  max-width: 40rem;
  margin-top: var(--space-2);
}

.status-badge {
  display: inline-block;
  margin-top: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border: 1px solid currentColor;
  border-radius: var(--radius-input);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.status-available {
  color: var(--success);
}

.status-planned {
  color: var(--text-muted);
}

.tour-steps {
  display: grid;
  gap: var(--space-4);
  margin: var(--space-4) 0 0;
  padding: 0;
  list-style: none;
}

/* The calculator: a display rule (.button, .field-row) beats the hidden attribute, so hidden is restated inside it. */
.roi [hidden] {
  display: none;
}

.roi-step {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.roi-step + .roi-step {
  margin-top: var(--space-6);
}

.roi-legend {
  margin-bottom: var(--space-3);
  padding: 0;
  font-size: var(--text-lg);
  font-weight: 700;
}

.roi-choices {
  display: grid;
  gap: var(--space-2);
}

.roi-choice {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--tap-min);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-input);
  background: var(--bg);
  cursor: pointer;
}

.roi-choice input {
  min-height: 0;
  margin: 0;
  accent-color: var(--accent);
}

.roi-choice:has(input:checked) {
  border-color: var(--accent);
}

.roi-other {
  margin-top: var(--space-4);
}

.roi-results {
  max-width: 40rem;
  margin-top: var(--space-6);
  padding: var(--space-6);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
}

.roi-headline {
  margin-top: var(--space-3);
  font-size: var(--text-2xl);
  font-weight: 800;
  line-height: 1.15;
}

.roi-monthly {
  margin-top: var(--space-2);
  color: var(--text-muted);
}

.roi-gate,
.roi-report {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border);
}

.roi-gate .page-subhead,
.roi-report .page-subhead {
  margin-top: 0;
}

.roi-gate p,
.roi-report p {
  margin-top: var(--space-2);
}

.roi-gate-form {
  margin-top: var(--space-4);
}

.roi-status {
  min-height: 1.5em;
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.roi-table {
  width: 100%;
  border-collapse: collapse;
}

.roi-table th,
.roi-table td {
  padding: var(--space-3);
  border-bottom: 1px solid var(--border);
  text-align: left;
}

.roi-table thead th {
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.roi-table td {
  font-variant-numeric: tabular-nums;
}

.roi-assumptions {
  margin-top: var(--space-6);
}

/* A long row header ("Where-is-my-order tickets") may wrap anywhere, so the three columns fit a phone. */
.roi-table th[scope="row"] {
  overflow-wrap: anywhere;
}

/* Phone width: tighter report padding and smaller table cells, so the report and brand tables fit without scrolling. */
@media (max-width: 599px) {
  .roi-results {
    padding: var(--space-4);
  }

  .roi-table th,
  .roi-table td,
  .brand-table th,
  .brand-table td {
    padding: var(--space-2);
    font-size: var(--text-sm);
  }
}

@media (min-width: 600px) {
  .tour-steps {
    grid-template-columns: 1fr 1fr;
  }

  .roi-choices {
    grid-template-columns: 1fr 1fr;
  }
}