/* GYMNASTECHS LLC — the whole site's styling, hand-written, no framework and no build step.
 *
 * PALETTE. The accent stays violet. The old site's #7c3aed is on the owner's existing pages, in the
 * mail this site sends and in whatever print he has already paid for, so replacing it would be a
 * rebrand nobody asked for. What changes is how it is used. #7c3aed is only 5.7:1 on white, which is a
 * pass for body text but a thin one for the small labels and links this site is full of, so the
 * working accent is violet-700 #6d28d9 (7.1:1 on white) with #a78bfa in dark mode (7.0:1 on #0f1015);
 * the original #7c3aed survives as the mid-tone in the hero glow, which is decorative and carries no
 * text. The second accent is gone from everything but that glow: the old page ran violet against cyan
 * #22d3ee on every icon, and two saturated hues competing at small sizes is most of why it read as
 * dated. One hue plus a lot of quiet neutral is what makes a small business site look expensive.
 *
 * Neutrals are very slightly violet-cool rather than pure grey, so the accent looks native to them.
 *
 * TYPE. System fonts only: a web font means either a CDN (which this site must not depend on -- the
 * old one broke its own icons that way) or a binary in the repo and a FOUT on a phone on gym wifi.
 * Character comes from the scale, the tracking and the spacing instead.
 *
 * Conventions: tokens on :root, redefined once under prefers-color-scheme: dark. Blocks are roughly
 * in document order. Every interactive thing has a visible :focus-visible ring. Nothing animates for
 * a visitor who has asked for less motion.
 */

/* --- tokens ------------------------------------------------------------------------------------- */

:root {
  color-scheme: light dark;

  --bg: #ffffff;
  --surface: #f7f6fb;
  --card: #ffffff;
  --line: #e5e3ee;
  --line-strong: #d3d0e0;
  --ink: #14151b;
  --ink-2: #565a6b;

  --accent: #6d28d9;
  --accent-strong: #5b21b6;
  --accent-soft: #f2edff;
  --accent-ring: rgb(109 40 217 / 28%);
  --on-accent: #ffffff;

  /* The hero and the footer are the same dark panel in both schemes; they get their own tokens so
     the light-mode text tokens never have to be overridden locally. */
  --panel: #0d0e14;
  --panel-ink: #f2f3f8;
  --panel-ink-2: #b9bdcc;
  --panel-line: rgb(255 255 255 / 12%);
  /* Two accents for the dark panel, because one cannot do both jobs there: the lighter is for text and
     icons, the mid tone is the only violet that is a filled button on near-black and still clears 3:1
     against it -- the site's own #6d28d9 is 1.9:1 on this panel and reads as a smudge. */
  --panel-accent: #c4b5fd;
  --panel-accent-fill: #a78bfa;
  --panel-on-accent: #1a1030;

  --focus: var(--accent);

  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;

  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 18px;

  --shell: 72rem;
  --measure: 62ch;

  --shadow-sm: 0 1px 2px rgb(20 21 27 / 6%), 0 1px 3px rgb(20 21 27 / 4%);
  --shadow: 0 4px 6px -2px rgb(20 21 27 / 6%), 0 12px 24px -8px rgb(20 21 27 / 10%);
  --shadow-lg: 0 8px 12px -4px rgb(20 21 27 / 8%), 0 24px 48px -12px rgb(20 21 27 / 14%);

  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    "Noto Sans", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1015;
    --surface: #16171e;
    --card: #181a22;
    --line: #272935;
    --line-strong: #363a4a;
    --ink: #eceef5;
    --ink-2: #a9aebd;

    --accent: #a78bfa;
    --accent-strong: #c4b5fd;
    --accent-soft: rgb(167 139 250 / 13%);
    --accent-ring: rgb(167 139 250 / 32%);
    --on-accent: #1a1030;

    --shadow-sm: 0 1px 2px rgb(0 0 0 / 40%);
    --shadow: 0 8px 24px -8px rgb(0 0 0 / 60%);
    --shadow-lg: 0 16px 48px -12px rgb(0 0 0 / 70%);
  }
}

/* --- reset -------------------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  line-height: 1.15;
  letter-spacing: -0.021em;
  font-weight: 680;
  text-wrap: balance;
}

p {
  margin: 0;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--accent-strong);
}

img,
svg {
  max-width: 100%;
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 4px;
}

.sprite {
  display: none;
}

.icon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  vertical-align: -0.25em;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: var(--sp-2);
  z-index: 20;
  transform: translateY(-200%);
  padding: 0.6rem 1rem;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 620;
  text-decoration: none;
}

.skip-link:focus {
  transform: translateY(0);
}

/* --- layout ------------------------------------------------------------------------------------- */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--sp-5);
}

.section {
  padding-block: clamp(3rem, 8vw, 5.5rem);
  /* The masthead is sticky, so an anchor jump has to stop short of it. */
  scroll-margin-top: 4.5rem;
}

.section--surface {
  background: var(--surface);
  border-block: 1px solid var(--line);
}

.section__head {
  max-width: var(--measure);
  margin-bottom: clamp(2rem, 5vw, 3rem);
}

.section__head h2 {
  font-size: clamp(1.6rem, 1.15rem + 1.6vw, 2.25rem);
}

.section__head p {
  margin-top: var(--sp-3);
  color: var(--ink-2);
  font-size: 1.0625rem;
}

.section__head--center {
  max-width: 46rem;
  margin-inline: auto;
  text-align: center;
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.8rem 1.35rem;
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  background: var(--accent);
  color: var(--on-accent);
  font: inherit;
  font-weight: 640;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease,
    transform 0.16s ease;
}

.btn:hover {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
  color: var(--on-accent);
  transform: translateY(-1px);
}

/* The secondary action on the dark panel. Its border has to clear 3:1 against that panel on its own:
   at the panel-line 12% white it was invisible and the button did not read as one. */
.btn--ghost {
  background: transparent;
  border-color: rgb(255 255 255 / 32%);
  color: var(--panel-ink);
}

.btn--ghost:hover {
  background: rgb(255 255 255 / 10%);
  border-color: rgb(255 255 255 / 55%);
  color: var(--panel-ink);
}

.btn--sm {
  padding: 0.5rem 0.9rem;
  font-size: 0.9375rem;
}

/* --- masthead ----------------------------------------------------------------------------------- */

.masthead {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.masthead__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3) var(--sp-5);
  min-height: 3.75rem;
  padding-block: 0.6rem;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 760;
  letter-spacing: 0.06em;
  text-decoration: none;
}

.wordmark__logo {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--accent);
  flex: none;
}

.masthead__nav {
  display: flex;
  gap: var(--sp-5);
  margin-inline-start: auto;
  font-size: 0.9375rem;
  font-weight: 560;
}

.masthead__nav a {
  color: var(--ink-2);
  text-decoration: none;
}

.masthead__nav a:hover {
  color: var(--accent);
}

@media (width < 34em) {
  /* Below this the three jump links and the call to action cannot share a line without wrapping into
     something that looks broken. The links are anchors to sections of this same page and every one of
     them is repeated in the footer, so dropping them here costs a small-screen visitor nothing. */
  .masthead__nav {
    display: none;
  }

  .masthead__cta {
    margin-inline-start: auto;
  }
}

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

.hero {
  position: relative;
  overflow: hidden;
  background: var(--panel);
  color: var(--panel-ink);
  /* Re-point the accent tokens rather than writing hero-specific button rules: everything inside the
     hero that fills itself with the accent then lands on the light-on-dark pairing automatically, in
     both colour schemes. */
  --accent: var(--panel-accent-fill);
  --accent-strong: var(--panel-accent);
  --on-accent: var(--panel-on-accent);
  --focus: var(--panel-accent);
}

.hero::before {
  /* The old site's violet-and-cyan wash, kept: it is the one piece of the previous look that people
     recognise. Behind text, not under it -- all the type sits on the flat panel colour. */
  content: "";
  position: absolute;
  inset: -40% -10% auto -10%;
  height: 130%;
  background:
    radial-gradient(48rem 24rem at 12% 8%, rgb(124 58 237 / 32%), transparent 62%),
    radial-gradient(42rem 22rem at 88% 0%, rgb(34 211 238 / 14%), transparent 60%);
  pointer-events: none;
}

.hero__inner {
  position: relative;
  padding-block: clamp(3.25rem, 9vw, 6rem);
}

.hero__where {
  display: flex;
  gap: 0.55rem;
  max-width: 46ch;
  margin-bottom: var(--sp-5);
  color: var(--panel-ink-2);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.hero__where .icon {
  color: var(--panel-accent);
  margin-top: 0.15rem;
}

.hero h1 {
  max-width: 24ch;
  font-size: clamp(2.15rem, 1.3rem + 3.4vw, 3.6rem);
  letter-spacing: -0.03em;
  font-weight: 720;
}

.hero__lead {
  max-width: 58ch;
  margin-top: var(--sp-5);
  color: var(--panel-ink-2);
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}

.hero__contact {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: var(--sp-5);
  color: var(--panel-ink-2);
  font-size: 0.9375rem;
}

.hero__contact a {
  color: var(--panel-ink);
  text-decoration-color: rgb(255 255 255 / 40%);
}

.hero__contact a:hover {
  color: var(--panel-accent);
}

/* The three value props, on the dark panel directly under the hero copy: they were in the hero of the
   old site and they are the reassurance a gym owner is looking for before anything else. */
.props {
  position: relative;
  display: grid;
  gap: var(--sp-4);
  margin-top: clamp(2.5rem, 6vw, 3.75rem);
  padding-top: clamp(2rem, 5vw, 2.75rem);
  border-top: 1px solid var(--panel-line);
}

@media (width >= 48em) {
  .props {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-6);
  }
}

.prop {
  display: flex;
  gap: var(--sp-4);
}

.prop__icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  border: 1px solid var(--panel-line);
  border-radius: var(--radius);
  background: rgb(255 255 255 / 5%);
  color: var(--panel-accent);
}

.prop__icon .icon {
  width: 1.375rem;
  height: 1.375rem;
}

.prop h3 {
  font-size: 1rem;
  font-weight: 660;
}

.prop p {
  margin-top: 0.3rem;
  color: var(--panel-ink-2);
  font-size: 0.9375rem;
  line-height: 1.5;
}

/* --- cards and the services grid ---------------------------------------------------------------- */

.grid {
  display: grid;
  gap: var(--sp-4);
}

@media (width >= 40em) {
  .grid--services {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-5);
  }
}

@media (width >= 64em) {
  .grid--services {
    grid-template-columns: repeat(3, 1fr);
  }
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--card);
  box-shadow: var(--shadow-sm);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.card:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

.card:has(.card__link:focus-visible) {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

.card__icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: var(--sp-4);
  border-radius: var(--radius);
  background: var(--accent-soft);
  color: var(--accent);
}

.card__icon .icon {
  width: 1.5rem;
  height: 1.5rem;
}

.card h3 {
  font-size: 1.0625rem;
  font-weight: 660;
}

.card__blurb {
  margin-top: var(--sp-2);
  color: var(--ink-2);
  font-size: 0.9375rem;
  line-height: 1.55;
}

.ticks {
  display: grid;
  gap: 0.4rem;
  margin-top: var(--sp-4);
  font-size: 0.9375rem;
  color: var(--ink-2);
}

.ticks li {
  position: relative;
  padding-inline-start: 1.5rem;
  line-height: 1.5;
}

.ticks li::before {
  /* Drawn rather than an icon element: 27 of these on the home page is 27 fewer DOM nodes. */
  content: "";
  position: absolute;
  left: 0.2rem;
  top: 0.45rem;
  width: 0.5rem;
  height: 0.28rem;
  border-inline-start: 2px solid var(--accent);
  border-block-end: 2px solid var(--accent);
  transform: rotate(-45deg);
}

.card .ticks {
  flex: 1;
}

.card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
  font-size: 0.9375rem;
  font-weight: 620;
  text-decoration: none;
}

.card__link::after {
  /* Stretches the one link over the whole card, so the card is a big tap target on a phone without
     nesting anything clickable inside anything else clickable. */
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.card__link .icon {
  width: 1.1rem;
  height: 1.1rem;
  transition: transform 0.16s ease;
}

.card:hover .card__link .icon {
  transform: translateX(3px);
}

/* --- process ------------------------------------------------------------------------------------ */

.steps {
  display: grid;
  gap: var(--sp-5);
  counter-reset: step;
}

@media (width >= 40em) {
  .steps {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (width >= 64em) {
  .steps {
    grid-template-columns: repeat(4, 1fr);
  }
}

.step {
  padding-top: var(--sp-4);
  border-top: 2px solid var(--accent);
}

.step__num {
  display: block;
  color: var(--accent);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.step h3 {
  margin-top: var(--sp-2);
  font-size: 1.125rem;
}

.step p {
  margin-top: var(--sp-2);
  color: var(--ink-2);
  font-size: 0.9375rem;
}

.panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3) var(--sp-5);
  margin-top: clamp(2rem, 5vw, 3rem);
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--card);
}

.panel__label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--accent);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.panel p {
  color: var(--ink-2);
  font-size: 0.9375rem;
}

/* --- FAQ ---------------------------------------------------------------------------------------- */

.faq {
  max-width: 52rem;
  border-top: 1px solid var(--line);
}

.faq__item {
  border-bottom: 1px solid var(--line);
}

.faq__q {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding-block: var(--sp-4);
  cursor: pointer;
  list-style: none;
}

.faq__q::-webkit-details-marker {
  display: none;
}

.faq__q h3 {
  flex: 1;
  font-size: 1.0625rem;
  font-weight: 620;
}

.faq__q:hover h3 {
  color: var(--accent);
}

.faq__sign {
  position: relative;
  width: 1.1rem;
  height: 1.1rem;
  flex: none;
  color: var(--accent);
}

.faq__sign::before,
.faq__sign::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: currentcolor;
  transition: transform 0.18s ease;
}

.faq__sign::after {
  transform: rotate(90deg);
}

.faq__item[open] .faq__sign::after {
  transform: rotate(0deg);
}

.faq__a {
  max-width: var(--measure);
  padding-bottom: var(--sp-5);
  color: var(--ink-2);
}

/* --- quote form ---------------------------------------------------------------------------------- */
/* The form itself is the inquiries app's: {% quote_form %} renders it, because the fields, the CSRF
 * token, the honeypot and the anti-spam challenge only work as a set and a hand-copy that loses one of
 * them looks fine and rejects every real visitor. What it hands over is plain markup with class hooks
 * on it -- quote-form, quote-field, quote-field-wide, quote-services, quote-note, form-label,
 * form-control, form-check, req, errorlist -- and this block is where those become this site's design.
 * Its own comment expects Bootstrap to be defining form-control and form-check; nothing here loads
 * Bootstrap, so they are defined below instead. Selectors reach for the element where they can, so a
 * widget that arrives without its class is still styled.
 */

.quote {
  max-width: 54rem;
  margin-inline: auto;
  padding: clamp(1.25rem, 4vw, 2.5rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--card);
  box-shadow: var(--shadow-lg);
}

.quote-form {
  display: grid;
  gap: var(--sp-4);
}

@media (width >= 40em) {
  .quote-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-4) var(--sp-5);
  }

  .quote-field-wide,
  .quote-form > .errorlist {
    grid-column: 1 / -1;
  }
}

.quote-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}

.form-label {
  color: var(--ink);
  font-size: 0.8125rem;
  font-weight: 660;
  letter-spacing: 0.01em;
}

.req {
  color: var(--accent);
  margin-inline-start: 0.15rem;
}

input[type="text"],
input[type="email"],
input[type="tel"],
select,
textarea {
  width: 100%;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  /* 1rem, not smaller: iOS zooms the whole page in when a focused input is under 16px. */
  font-size: 1rem;
  line-height: 1.4;
  transition: border-color 0.14s ease, box-shadow 0.14s ease;
}

textarea {
  min-height: 8.5rem;
  resize: vertical;
}

select {
  appearance: none;
  /* The chevron is drawn in the background, so it needs no script and no extra element. */
  background-image: linear-gradient(45deg, transparent 50%, currentcolor 50%),
    linear-gradient(135deg, currentcolor 50%, transparent 50%);
  background-position: calc(100% - 1.15rem) calc(50% - 0.08rem),
    calc(100% - 0.8rem) calc(50% - 0.08rem);
  background-size: 0.36rem 0.36rem, 0.36rem 0.36rem;
  background-repeat: no-repeat;
  padding-inline-end: 2.4rem;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

input::placeholder,
textarea::placeholder {
  color: var(--ink-2);
  opacity: 0.75;
}

/* The nine service checkboxes, as selectable chips rather than a column of ticks: nine stacked rows
   is most of the height of a phone screen, and this is the one field everybody has to answer. */
.quote-services {
  display: grid;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

@media (width >= 30em) {
  .quote-services {
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  }
}

.form-check {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--bg);
  transition: border-color 0.14s ease, background-color 0.14s ease;
}

.form-check:hover {
  border-color: var(--accent);
}

.form-check input[type="checkbox"] {
  width: 1.05rem;
  height: 1.05rem;
  flex: none;
  margin: 0;
  accent-color: var(--accent);
}

.form-check-label {
  flex: 1;
  color: var(--ink-2);
  font-size: 0.9375rem;
  line-height: 1.35;
  cursor: pointer;
}

.form-check:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.form-check:has(input:checked) .form-check-label {
  color: var(--ink);
  font-weight: 560;
}

.form-check:has(input:focus-visible) {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* Django's own error markup, from {{ form.field.errors }} and {{ form.non_field_errors }}. */
.errorlist {
  display: grid;
  gap: 0.2rem;
  padding: var(--sp-3) var(--sp-4);
  border-inline-start: 3px solid #dc2626;
  border-radius: var(--radius-sm);
  background: var(--surface);
  background: color-mix(in srgb, #dc2626 9%, var(--card));
  color: #9f1239;
  font-size: 0.875rem;
  font-weight: 560;
}

@media (prefers-color-scheme: dark) {
  .errorlist {
    color: #fca5a5;
  }
}

/* The submit row: the last wide field is the only one holding a button, and it also carries the
   challenge's status line and the note explaining the confirmation email. */
.quote-field:has(> .btn) {
  margin-top: var(--sp-2);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
}

.quote-note {
  margin: 0;
  color: var(--ink-2);
  font-size: 0.8125rem;
  line-height: 1.45;
  max-width: 46ch;
}

@media (width >= 40em) {
  .quote-field:has(> .btn) {
    flex-flow: row wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4) var(--sp-5);
  }

  .quote-field:has(> .btn) .quote-note {
    /* Reads left of the button, though the markup puts it after: the reassurance belongs next to the
       thing it reassures about, and re-ordering here costs nothing that source order was carrying. */
    order: -1;
    flex: 1 1 18rem;
  }

  .quote-field:has(> .btn) .btn {
    flex: none;
  }
}

/* core/challenge_fields.html's status line. Empty unless the proof of work is slow or has failed, so
   it must not reserve space while it is empty. */
[data-challenge-status] {
  margin: 0;
  color: var(--ink-2);
  font-size: 0.8125rem;
}

[data-challenge-status]:empty {
  display: none;
}

/* --- service detail page ------------------------------------------------------------------------ */

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  color: var(--panel-ink-2);
}

.crumbs a {
  color: var(--panel-ink-2);
}

.crumbs a:hover {
  color: var(--panel-accent);
}

.detail__icon {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  margin-bottom: var(--sp-5);
  border: 1px solid var(--panel-line);
  border-radius: var(--radius);
  background: rgb(255 255 255 / 5%);
  color: var(--panel-accent);
}

.detail__icon .icon {
  width: 1.75rem;
  height: 1.75rem;
}

.detail__body {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
}

@media (width >= 60em) {
  .detail__body {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    align-items: start;
  }
}

.detail__aside {
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--card);
  box-shadow: var(--shadow-sm);
}

.detail__aside h2 {
  font-size: 1.0625rem;
}

.detail__contact {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: var(--sp-4);
  font-size: 0.9375rem;
}

.detail__contact .icon {
  color: var(--accent);
}

.detail__aside .btn {
  margin-top: var(--sp-5);
}

.links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: var(--sp-5);
}

.links a {
  padding: 0.45rem 0.8rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink-2);
  font-size: 0.875rem;
  text-decoration: none;
}

.links a:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* --- message pages (404, verification results) -------------------------------------------------- */

.notice {
  max-width: 34rem;
  margin-inline: auto;
  padding: clamp(1.5rem, 5vw, 2.75rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--card);
  box-shadow: var(--shadow);
  text-align: center;
}

.notice h1 {
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
}

.notice p {
  margin-top: var(--sp-4);
  color: var(--ink-2);
}

.notice .btn {
  margin-top: var(--sp-6);
}

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

.footer {
  background: var(--panel);
  color: var(--panel-ink);
  --focus: var(--panel-accent);
}

.footer__grid {
  display: grid;
  gap: clamp(2rem, 5vw, 3rem);
  padding-block: clamp(2.5rem, 7vw, 4rem);
}

@media (width >= 52em) {
  .footer__grid {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr);
  }
}

.footer__brand .wordmark__logo {
  color: var(--panel-accent);
}

.footer__name {
  margin-top: var(--sp-3);
  font-weight: 720;
  letter-spacing: 0.06em;
}

.footer__tagline {
  margin-top: 0.2rem;
  color: var(--panel-ink-2);
  font-size: 0.9375rem;
}

.footer__area {
  display: flex;
  gap: 0.5rem;
  margin-top: var(--sp-4);
  max-width: 34ch;
  color: var(--panel-ink-2);
  font-size: 0.875rem;
  line-height: 1.5;
}

.footer__area .icon {
  color: var(--panel-accent);
  margin-top: 0.15rem;
}

.footer__heading {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--panel-ink-2);
}

.footer__links {
  display: grid;
  gap: 0.55rem;
  margin-top: var(--sp-4);
  font-size: 0.9375rem;
}

.footer__links a {
  color: var(--panel-ink);
  text-decoration: none;
}

.footer__links a:hover {
  color: var(--panel-accent);
  text-decoration: underline;
}

.footer__legal {
  padding-block: var(--sp-5);
  border-top: 1px solid var(--panel-line);
  color: var(--panel-ink-2);
  font-size: 0.8125rem;
}

/* --- reduced motion ----------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .card:hover,
  .btn:hover {
    transform: none;
  }

  .card:hover .card__link .icon {
    transform: none;
  }
}