/* ============================================================
   Inergy — waitlist site
   Plain CSS. No build step, no framework.
   Sections in this file:
     1. Tokens        — colours, type, spacing
     2. Reset & base
     3. Layout        — the .wrap container
     4. Hero
     5. Sections
     6. Image slots   — .shot (see README.md to swap in a real image)
     7. Signup form
     8. Footer
     9. Motion        — scroll reveal, wordmark tilt
   ============================================================ */


/* ------------------------------------------------------------
   1. TOKENS
   ------------------------------------------------------------ */
:root {
  /* Palette — taken from the Inergy app so the two read as one product.
     Source: the app's tailwind.config.ts and src/app/globals.css.
       --ink   = ink-950,  the app's page background
       --panel = ink-800,  the app's raised surface
       --bone  = bone-100, the app's body text
       --muted = bone-400, the app's secondary text
       --accent= pink-400, the app's identity colour
     Four roles and one accent. Nothing else gets a colour. */
  --ink:    #0A0A0C;  /* page background — near-black, faint violet cast */
  --panel:  #16161B;  /* raised surfaces, image placeholder blocks */
  --bone:   #E8E6DF;  /* primary text — warm, not white */
  --muted:  #8A8790;  /* secondary text, captions */

  /* --accent is settled at pink-400 and is not to be lowered again.
     Dropping to pink-600 (#C71C66) was tried and rejected: it fails AA
     at every pairing on this page — 3.57:1 against --ink and 3.25:1
     against --panel, where normal text needs 4.5:1. Making the button
     an outline instead was also rejected. The waitlist button is this
     page's only conversion point, and a filled button reads as primary
     in a way an outlined one does not; trading signups for a calmer
     accent is a bad trade on a page whose single job is collecting
     email addresses.
     The "too loud" concern is answered by RESTRAINT IN PLACEMENT, not
     by lower chroma. The accent appears in four places and must not
     spread beyond them:
       1. the skip link          (keyboard users only)
       2. the hero button
       3. the signup button
       4. the failed-submit error border
     Focus rings use it too, but only while something is focused.
     The same principle governs the button's states: it lights UP on
     hover, it does not hollow out. Filled is what reads as primary,
     so the page's only conversion point stays primary through the
     entire interaction — rest, hover and focus alike. */
  --accent:    #FF2E88;  /* the single accent — pink-400, do not lower */
  --accent-hi: #FF5BA3;  /* hover only — pink-300, one step up the app's ramp */

  /* Hairlines */
  --rule:        rgba(138, 135, 144, 0.22);
  --rule-accent: rgba(255, 46, 136, 0.45);

  /* Type */
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --body:    "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --size-h1:  clamp(3rem, 8.8vw, 5.5rem);
  --size-h2:  clamp(1.7rem, 3.4vw, 2.6rem);
  --size-body: 1.0625rem;   /* ~17px */
  --size-lede: clamp(1.125rem, 1.6vw, 1.3rem);
  --size-fine: 0.9rem;

  /* Rhythm */
  --gutter:  clamp(1.25rem, 5vw, 3rem);
  --stack:   clamp(4.5rem, 11vw, 9rem);   /* space between sections */
  --measure: 62ch;                        /* max line length for body copy */
}

@media (min-width: 700px) {
  :root { --size-body: 1.125rem; }
}


/* ------------------------------------------------------------
   2. RESET & BASE
   ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

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

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

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

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

h1, h2 {
  font-family: var(--display);
  font-weight: 500;
  font-variation-settings: "SOFT" 40, "WONK" 1, "opsz" 96;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}

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

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

/* Every interactive thing gets a visible, accent-coloured focus ring. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10;
  background: var(--accent);
  color: var(--ink);
  padding: 0.7rem 1rem;
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus {
  left: 0;
}


/* ------------------------------------------------------------
   3. LAYOUT
   ------------------------------------------------------------ */
.wrap {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.site-header {
  padding-block: clamp(1.5rem, 3vw, 2.25rem);
}

/* The perspective lives on the parent so the wordmark itself only
   ever carries a transform — nothing here can move the layout. */
.site-header .wrap { perspective: 620px; }

/* Wordmark left, menu right. On a phone the menu collapses behind the
   hamburger and drops below the row when opened; from 760px up it is
   inline and the hamburger is gone. */
.site-header__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
}

.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.4rem;
}

/* Navigation is bone, not accent: it is a way around the site, not a call
   to do anything, and the accent stays reserved for the places listed in
   the tokens. The current page is marked with a rule under it. */
.site-nav a {
  color: var(--bone);
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 500;
  padding-block: 0.35rem;
  display: inline-block;
}
.site-nav a:hover { text-decoration: underline; text-underline-offset: 0.3em; }
/* The invite link in the nav, drawn as a small outlined button. Bone, not the
   accent: the accent stays in the four places listed in the tokens, and the
   hero and signup buttons are where the page asks. */
.site-nav a.nav-cta {
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--muted);
  border-radius: 3px;
}
.site-nav a.nav-cta:hover { border-color: var(--bone); text-decoration: none; }

.site-nav a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-color: var(--muted);
  text-underline-offset: 0.3em;
}

/* THE HAMBURGER. Three bars drawn with a border, a background and a
   shadow — no icon file, no SVG. 44px square so it is a real thumb
   target. Only ever shown below 760px, and only when JS is running:
   without JS there is nothing to toggle, so the menu is simply shown. */
.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  margin: -0.5rem -0.6rem -0.5rem 0;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--bone);
  align-items: center;
  justify-content: center;
}
.nav-toggle__bars {
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  box-shadow: 0 -7px 0 currentColor, 0 7px 0 currentColor;
  border-radius: 1px;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars {
  background: transparent;
  box-shadow: none;
  position: relative;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before,
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
  border-radius: 1px;
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after  { transform: rotate(-45deg); }

@media (max-width: 759.98px) {
  .js .nav-toggle { display: flex; }

  /* Closed: gone from layout and from the tab order. Open: a full-width
     column under the wordmark row, one link per line, in the same bone
     type. */
  .js .site-nav {
    display: none;
    flex-basis: 100%;
    padding-top: 0.75rem;
  }
  .js .site-nav.is-open { display: block; }

  .js .site-nav ul {
    flex-direction: column;
    gap: 0;
  }
  .js .site-nav a {
    display: block;
    padding-block: 0.6rem;
    font-size: 1.05rem;
  }
}

/* Live text, and it stays live text. The drawn lockup is not used here —
   index.html carries the measurements that settled it. */
.wordmark {
  /* inline-block so the transform applies to a box that hugs the
     word, not a full-width block. A tilted full-width box would
     swing past the viewport edge and raise a scrollbar. */
  display: inline-block;
  margin: 0;
  font-family: var(--display);
  font-variation-settings: "SOFT" 40, "WONK" 0, "opsz" 24;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--bone);
  text-decoration: none;   /* it is a link home now, but it stays a wordmark */
  transform-origin: 50% 50%;
  backface-visibility: hidden;
}

/* Available to a screen reader, invisible on screen. Nothing in the header
   needs it now the wordmark is type again, but the hero mark is decorative
   and this is the utility any future icon-only control should reach for. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Only promoted to its own layer while the tilt is actually live,
   so the browser is not holding a layer open for nothing. */
.wordmark.is-tilting { will-change: transform; }

/* The illuminated I, standing in for the typed one.

   SIZED IN em, NOT px, so it tracks the wordmark's font-size instead of
   needing a second edit every time that moves. Fraunces at these settings has
   a cap height of 0.7em — the 12.88px the header comment cites, over the
   1.15rem the wordmark is set at — and the artwork is 0.523:1, so the box is
   0.7em tall and 0.366em wide. That is the glyph's own cap box: an
   inline-block sits its bottom margin edge on the baseline, which is exactly
   where a cap sits.

   currentColor, so the mark inherits --bone and every state the link already
   has. Painting it a fixed bone would leave it dead on hover and focus while
   the rest of the word moved.

   The mask resolves to the SILHOUETTE, not the drawing, and that is a
   property of mask-image rather than an accident: an SVG used as a mask is
   read for ALPHA, so the .detail bars — opaque, and inside the letter — are
   union'd into the shape rather than cut out of it. The same file therefore
   renders panelled when it is inlined and solid when it is masked, which is
   what each size wants. */
.wordmark__i {
  display: inline-block;
  width: 0.366em;
  height: 0.7em;
  background: currentColor;
  -webkit-mask: url("/logo/inergy-illuminated-I-small.svg") center / contain no-repeat;
          mask: url("/logo/inergy-illuminated-I-small.svg") center / contain no-repeat;
}


/* ------------------------------------------------------------
   4. HERO
   ------------------------------------------------------------ */
.hero {
  padding-top: clamp(2.5rem, 7vw, 5rem);
  padding-bottom: var(--stack);
}

/* One printed sentence, one colour, no fragments. It wraps on its
   own; the max-width sets where. Two non-breaking spaces in the
   HTML keep "game you" and "made up." from splitting, so the
   wrap can only land in a place that reads well. */
.headline {
  font-size: var(--size-h1);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 clamp(1.75rem, 3vw, 2.5rem);
  max-width: 15ch;
  text-wrap: pretty;
}

.lede {
  font-size: var(--size-lede);
  line-height: 1.6;
  max-width: 54ch;
  color: var(--bone);
  margin-bottom: clamp(1.75rem, 3vw, 2.25rem);
}

.hero__cta { margin-bottom: 0.9rem; }

/* Two sentences, each kept whole where it fits (see index.html): the column
   sets the measure, not a max-width in ch. */
.hero .headline { max-width: none; }
.headline__line { display: inline-block; }

/* The note under the button. */
.hero__note { margin-top: 0; }

/* The canon board, on a solid near-black panel with a thin border and a soft
   shadow. The panel is opaque on purpose: whatever sits behind the hero never
   shows through the screenshot. On a phone it sits under the sub-line, in the
   DOM's own order; on a wide screen the grid moves it beside the words. */
.hero__shot {
  margin: 0 0 clamp(1.75rem, 3vw, 2.25rem);
  padding: clamp(0.5rem, 1.2vw, 0.9rem);
  background: var(--ink);
  border: 1px solid var(--rule);
  border-radius: 6px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.4);
}
.hero__shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 3px;
  background: var(--panel);   /* holds the space while the file loads */
}
.hero__shot .shot__caption { margin-top: 0.75rem; }

/* THE WORDS-ONLY HERO. The canon board moved into "During the session", so
   there is no second column to place and no grid: the hero is one column at
   every width.

   The measure is held deliberately narrow — narrower than the page's --measure
   — and that is a readability decision, not a typographic one. The background
   keeps the planet in the open sky to the RIGHT of this column on a wide
   screen, so every character the hero adds to a line pushes the text further
   under the brightest thing on the page. Holding the column short is what lets
   the desktop shade come off (see bg/infinite-worlds.js). */
.hero__words > .headline { max-width: 18ch; }
.hero__words > .lede     { max-width: 46ch; }
.hero__words > .hero__note { max-width: 46ch; }

@media (min-width: 960px) {
  .hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    grid-template-areas:
      "head shot"
      "lede shot"
      "cta  shot"
      "note shot";
    grid-template-rows: auto auto auto 1fr;
    column-gap: clamp(2rem, 4vw, 3.5rem);
    align-items: start;
  }
  .hero__grid > .headline { grid-area: head; }
  .hero__grid > .lede     { grid-area: lede; }
  .hero__grid > .hero__cta { grid-area: cta; }
  .hero__grid > .hero__note { grid-area: note; }
  .hero__grid > .hero__shot { grid-area: shot; margin: 0; align-self: center; }
  .hero .headline { font-size: clamp(2.6rem, 4.2vw, 4rem); }
}


.fine {
  font-size: var(--size-fine);
  line-height: 1.55;
  color: var(--muted);
  max-width: 48ch;
}

.btn {
  display: inline-block;
  background: var(--accent);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1;
  padding: 1rem 1.6rem;
  border: 1px solid var(--accent);
  border-radius: 3px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease;
}

/* Lights up. Does not hollow out. An outline-on-hover would drop the
   button out of "primary" at the exact moment someone signals intent
   to click it. */
.btn:hover {
  background: var(--accent-hi);
  border-color: var(--accent-hi);
  color: var(--ink);
}

/* Focus keeps the fill too, and takes a bone ring rather than the
   inherited accent one — an accent ring around an accent button reads
   as a halo of the button's own colour, not as a focus indicator.
   Bone is 15.84:1 against the page and is instantly distinguishable
   from the hover state, which changes the fill and not the ring. */
.btn:focus-visible {
  outline-color: var(--bone);
}

/* Only while the form is mid-send. A disabled control is meant to
   read as inert, so this one drops emphasis on purpose. */
.btn[disabled] {
  opacity: 0.6;
  cursor: default;
}


/* ------------------------------------------------------------
   5. SECTIONS
   ------------------------------------------------------------ */
/* Every section is a single column: the text at a readable measure,
   and the screenshot — if that section has one — full width beneath
   it. The old two-column alternating layout is gone. It existed to
   pair each block of copy with an image, and only two sections have
   images now, so there is nothing left to alternate. These are wide
   desktop screenshots; a half-column would shrink them past reading. */
.section { padding-bottom: var(--stack); }

.section__text { max-width: var(--measure); }
.section__text--wide { max-width: 68ch; }

.section__text h2 {
  font-size: var(--size-h2);
  line-height: 1.14;
  margin-bottom: clamp(1.1rem, 2vw, 1.5rem);
  max-width: 22ch;
}

.section__text p { color: var(--bone); }
.section__text p + p { color: var(--muted); }

/* A paragraph's opening phrase, lifted to bone against the muted line. Same three
   declarations the captions use (`.shot__caption strong`) and .confirm__list before
   them — the emphasis this page already has, not a new one.
   ⚠️ THESE STAY <strong> INSIDE <p>. The four lead-ins in "What isn't finished." are
   paragraphs that begin with a phrase, not headings and not list items. An <h3> would
   introduce a heading level the page does not use anywhere, and bullets would turn four
   pieces of prose into a spec sheet — which is the opposite of what that section is for. */
.section__text p strong {
  color: var(--bone);
  font-weight: 600;
}

/* There are deliberately NO section numbers here.
   Numbering encodes sequence. These sections are independent
   claims, not steps in a process, so numbering would
   imply an order that does not exist — a reader who sees "01" looks
   for the thing that must come first. It is also one of the most
   common visual tells of a templated landing page.
   The sections are separated by spacing alone. */

/* A sentence that answers a question the reader is having right
   then. Set apart by indent and spacing alone — no rule, no box, no
   tint. It carried an accent left rule at first; that made it a
   fourth place the accent appeared, and a rule used as emphasis is
   the same class of templated-landing-page tell as the section
   numbers that were pulled. It is still body copy, so it stays at
   body colour and lets the extra air do the work. */
.section__text .aside {
  margin-top: clamp(1.4rem, 2.6vw, 1.9rem);
  padding-left: clamp(0.9rem, 1.6vw, 1.15rem);
  color: var(--bone);
}

/* The imageless sections breathe wider. */
.section--plain .section__text h2 { max-width: 26ch; }

/* A quotation lifted out of the copy — a real session, printed as it came
   back, so the reader sees the output rather than a description of it.

   It carries NO rule, NO box and NO tint, for exactly the reason .aside
   above carries none: a rule used as emphasis is the same templated-
   landing-page tell as the section numbers that were pulled. What makes
   this read as a quotation instead of body copy is the DISPLAY face —
   already the page's second type role, at the lede size already in the
   tokens — plus the indent and the air. Nothing new is introduced; the
   accent is not touched and stays in its four places. */
.pull {
  margin: clamp(1.8rem, 3.4vw, 2.6rem) 0;   /* also clears the UA blockquote margin */
  padding-left: clamp(0.9rem, 1.6vw, 1.15rem);
  font-family: var(--display);
  font-variation-settings: "SOFT" 40, "WONK" 0, "opsz" 36;
  font-size: var(--size-lede);
  line-height: 1.5;
  max-width: 54ch;
}

/* Both paragraphs of a quotation stay at body colour. `.section__text p + p`
   would otherwise grey the second one and split the quote down the middle. */
.section__text .pull p { color: var(--bone); }


/* ------------------------------------------------------------
   5a. PAGES — every page that is not the home page
   ------------------------------------------------------------
   A page is one heading and its copy, at the same measure and the
   same type the home-page sections use. The page title is an <h1>
   for the document outline but SET LIKE A SECTION H2: the big
   headline size belongs to the home page's one sentence and nowhere
   else. A second-level heading inside a page (page__sub) takes the
   same size, one step down in weight, and more air above it.
   ------------------------------------------------------------ */
.page {
  padding-top: clamp(1.5rem, 4vw, 3rem);
  padding-bottom: clamp(4rem, 9vw, 7rem);
}

.page__title {
  font-size: var(--size-h2);
  line-height: 1.14;
  margin-bottom: clamp(1.1rem, 2vw, 1.5rem);
  max-width: 26ch;
}

.page__sub {
  font-size: clamp(1.35rem, 2.4vw, 1.8rem);
  line-height: 1.2;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  margin-bottom: clamp(0.9rem, 1.6vw, 1.2rem);
  max-width: 26ch;
}

/* The features index: one paragraph per feature, the name lifted to bone
   with <strong> and the line after it muted — the treatment "What's
   coming" already used. Every line is a sibling of the lead-in, so the
   colour is set here rather than left to `p + p`. */
.feature-list { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.feature-list p { color: var(--muted); }

.link-line { margin-top: 1.5rem; }

/* Questions (home page and /help/faq). The question is a real heading, for
   anyone navigating by headings, but set at body size in bone so it reads as
   the lead-in to its answer rather than as a new section. The answer stays at
   body colour — `.section__text p + p` would otherwise grey every answer after
   the first. */
.faq__q {
  font-family: var(--body);
  font-size: var(--size-body);
  font-weight: 600;
  line-height: 1.5;
  color: var(--bone);
  margin: clamp(1.6rem, 3vw, 2.1rem) 0 0.4rem;
}
.faq h2 + .faq__q { margin-top: 0; }
.section__text.faq p { color: var(--bone); }

/* "← All features", under the copy and the picture, above the button. */
.backlink {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  font-size: var(--size-fine);
}
.backlink a { color: var(--muted); }
.backlink a:hover { color: var(--bone); }

.page__cta { margin-top: 1.5rem; }

/* Contact details, one per line. */
.contact-lines { line-height: 1.9; }


/* ------------------------------------------------------------
   6. IMAGE SLOTS
   ------------------------------------------------------------
   .shot is the box every screenshot lives in. A placeholder and a
   real <img> share the class, so swapping one for the other never
   changes the surrounding layout. See README.md.
   ------------------------------------------------------------ */
/* Note there is deliberately no `width: 100%` here. With only
   max-width, an image renders at its own size and is capped by the
   column — so it can be scaled DOWN to fit but never stretched up
   past its native resolution and turned soft. The screenshots are
   1198-1905px wide and the column tops out at 1084px, so in practice
   they are always scaled down.

   The 1px border matters: these are dark screenshots of a dark UI on
   a dark page. Without an edge they bleed into the background and
   read as a rendering fault rather than a picture. */
.shot {
  display: block;
  height: auto;
  max-width: 100%;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--panel);   /* holds the space while the file loads */
}

/* Each image is wrapped in <picture> so a browser that understands
   WebP takes that and everything else falls back to the PNG. The
   wrapper is the box the layout sees, so it has to be a block. */
picture { display: block; }

/* A shot wrapped in a link to its own file, so a phone can tap it open
   at full size. Block, so the link is the picture and nothing more. */
.shot-link {
  display: block;
  max-width: max-content;
}
.shot-link:focus-visible { outline-offset: 4px; }

/* The recorded demo. The recording is of a whole browser window, and
   there is no video encoder on the machine that made it, so the tab
   strip and address bar across the top are cropped off HERE rather than
   in the file: the frame is the box the reader sees (border, radius,
   panel while loading — the same box every screenshot gets), and the
   video inside it is pulled up by the height of that chrome. Both
   numbers are fractions of the width, so the crop holds at every size.
     source frame     1920 x 1080
     browser chrome   132px tall   = 6.875% of the width
     what is left     1920 x 948
   The video keeps its own 16:9 shape; nothing is squashed. */
.demo-frame {
  overflow: hidden;
  aspect-ratio: 1920 / 948;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--panel);
}
.demo {
  display: block;
  width: 100%;
  height: auto;
  margin-top: -6.875%;
}

.section__media { margin-top: clamp(2.5rem, 5vw, 4rem); }

/* A fine-print line straight after a picture (the canon board's browser
   note) needs air between it and the caption above. */
.section__media + .fine { margin-top: 1.5rem; }

/* Same box, but as a <figure> so a single screenshot can carry a caption.
   A figure only needs its user-agent margins cleared — the same reset
   .shot-pair already does one rule down. */
figure.section__media {
  margin: clamp(2.5rem, 5vw, 4rem) 0 0;
  padding: 0;
}

/* A TALL PORTRAIT capture — the phone. Every other screenshot on this page
   is a wide desktop shot that is WIDER than the column, so max-width alone
   scales it down and no height rule is needed. A 651x768 phone shot is
   already narrower than the 1084px column, so max-width never bites: it
   would render at its native 768px and push the section open.

   So the cap moves to the other axis. This is the same "scale down, never
   up" rule .shot states, applied to height instead of width, and it is
   still max-* rather than a fixed size. On a narrow screen the inherited
   max-width: 100% is the smaller constraint and takes over, so a phone
   shrinks this by width exactly like every other image and the height cap
   never applies there. Centred because a narrow image left-aligned in a
   wide column leaves its caption stranded. */
.shot--tall {
  max-height: 620px;
  width: auto;
  margin-inline: auto;
}

/* Two screenshots that make one point. Side by side on desktop,
   stacked on narrow screens, one caption under the pair. */
.shot-pair {
  margin: clamp(2.5rem, 5vw, 4rem) 0 0;
  padding: 0;
  display: grid;
  gap: clamp(1rem, 2.4vw, 1.75rem);
}

@media (min-width: 760px) {
  .shot-pair { grid-template-columns: 1fr 1fr; align-items: start; }
  .shot-pair__caption { grid-column: 1 / -1; }
}

/* One caption style, whether it sits under a pair or under a single shot. */
.shot-pair__caption,
.shot__caption {
  margin-top: 0.35rem;
  text-align: center;
  font-size: 0.85rem;   /* ~13.6px */
  line-height: 1.5;
  color: var(--muted);
}

/* The caption's opening phrase, lifted to bone against the muted line —
   the same emphasis .confirm__list strong already uses further down. */
.shot-pair__caption strong,
.shot__caption strong {
  color: var(--bone);
  font-weight: 600;
}


/* ------------------------------------------------------------
   7. SIGNUP
   ------------------------------------------------------------ */
.signup {
  padding-bottom: clamp(4rem, 9vw, 7rem);
  scroll-margin-top: 2rem;
}

.signup__inner {
  border-top: 1px solid var(--rule);
  padding-top: clamp(2.5rem, 6vw, 4rem);
  display: grid;
  gap: clamp(2.25rem, 5vw, 4rem);
}

@media (min-width: 900px) {
  .signup__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: clamp(3rem, 6vw, 5.5rem);
  }
}

.form { max-width: 30rem; }

.field { margin-bottom: 1.35rem; }

.label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--muted);
}

.input {
  display: block;
  width: 100%;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 3px;
  color: var(--bone);
  font-family: var(--body);
  font-size: 1rem;
  line-height: 1.4;
  padding: 0.85rem 0.9rem;
}

/* A <select> carrying .input. Without these three it takes the platform's own
   control instead: a light-grey box with black text on a near-black panel,
   which is the one place on the site where the OS, not the stylesheet, picks
   the colours. appearance:none hands it back, and then the arrow has to be
   drawn, because removing the appearance removes that too.

   The arrow is a background image rather than a pseudo-element: a replaced
   element has no ::after to hang one on. It is --muted at the same size as
   the label text, and padding-right keeps the chosen option clear of it. */
select.input {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 2.4rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%238A8790' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
}
/* The dropdown list itself is drawn by the OS, not by this stylesheet. Naming
   the colours on the options is the only way to stop a dark-theme browser
   rendering bone-on-bone once the list is open. */
select.input option { background: var(--panel); color: var(--bone); }
.input::placeholder { color: var(--muted); opacity: 1; }
.input:hover { border-color: rgba(139, 146, 156, 0.38); }
.input:focus {
  border-color: var(--accent);
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.form__actions { margin: 1.6rem 0 1.1rem; }

.form__error {
  margin: 0 0 1.1rem;
  padding: 0.8rem 0.95rem;
  border: 1px solid var(--rule-accent);
  border-left: 2px solid var(--accent);
  border-radius: 3px;
  background: var(--panel);
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--bone);
}
.form__error[hidden] { display: none; }

/* Spam trap: off-screen, unfocusable, still a real labelled input. */
.honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --- Confirmation state (built by script.js after a successful send) --- */
.confirm { max-width: 34rem; }

.confirm h2 {
  font-size: var(--size-h2);
  line-height: 1.14;
  margin-bottom: 0.9rem;
}
.confirm h2:focus { outline: none; }
.confirm h2:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

.confirm__list {
  list-style: none;
  margin: 1.5rem 0;
  padding: 0;
}
.confirm__list li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: 1rem;
  color: var(--muted);
  line-height: 1.6;
}
.confirm__list li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--accent);
}
.confirm__list strong {
  color: var(--bone);
  font-weight: 600;
}


/* ------------------------------------------------------------
   7a. THE FEEDBACK FORM — /users only
   ------------------------------------------------------------
   The waitlist form is two text boxes; this one is checkboxes,
   radios and textareas, which the stylesheet had never needed.
   Everything below is the smallest set of rules that makes those
   three look like the rest of the site. No new colours: --panel,
   --rule, --bone, --muted and the one accent, exactly as .input
   already uses them.
   ------------------------------------------------------------ */

/* The DM / player switch. Hidden unless JS is running, the same
   contract .nav-toggle already has — with JS off the DM panel is
   simply the one on show, and a dead pair of buttons would be a
   lie. Not radios, because these SWITCH the form rather than
   answer a question, and the answer they imply is sent in a
   hidden field. */
.switch { display: none; }

.js .switch {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.8rem;
}

.switch__btn {
  flex: 1 1 auto;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 3px;
  color: var(--muted);
  font-family: var(--body);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.4;
  padding: 0.7rem 1rem;
  cursor: pointer;
}
.switch__btn:hover { border-color: rgba(139, 146, 156, 0.38); color: var(--bone); }
.switch__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* The chosen one. A hairline and body colour — no fill, because a
   filled button on this page would read as the conversion point,
   and that is the waitlist button's job. */
.switch__btn.is-on {
  border-color: rgba(139, 146, 156, 0.55);
  color: var(--bone);
}

/* A role's block of questions. A <fieldset> only so the inactive
   one can be `disabled` and drop out of the submission; it carries
   no border of its own. */
.panel {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;   /* a fieldset will not shrink below its content without this */
}
.panel[hidden] { display: none; }

/* One question made of checkboxes or radios. */
.choices {
  border: 0;
  margin: 0 0 1.6rem;
  padding: 0;
  min-width: 0;
}

/* Set like .label, which is what it is — the question above its
   answers. A <legend> needs the explicit padding reset. */
.choices__legend {
  display: block;
  margin-bottom: 0.6rem;
  padding: 0;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--muted);
}

/* One option. The whole row is the <label>, so the text is part of
   the hit area — on a phone that is the difference between usable
   and not. */
.choice {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
  color: var(--bone);
  font-size: 1rem;
  line-height: 1.45;
  cursor: pointer;
}

.choice input {
  flex: 0 0 auto;
  width: 1.05rem;
  height: 1.05rem;
  margin: 0.2rem 0 0;
  accent-color: var(--accent);
  cursor: pointer;
}
.choice input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Textareas borrow .input wholesale and add only the two things a
   single-line box has no opinion about. */
textarea.input {
  min-height: 5.5rem;
  resize: vertical;
}


/* ------------------------------------------------------------
   8. FOOTER
   ------------------------------------------------------------ */
.site-footer {
  border-top: 1px solid var(--rule);
  padding-block: clamp(2rem, 4vw, 3rem) clamp(2.5rem, 5vw, 4rem);
}

/* One line, muted, with the site's other pages in it. The links take the
   muted colour too and lift to bone on hover — the footer is a way around,
   not a call to anything, so it gets no accent. */
.footer__line {
  margin: 0;
  font-size: var(--size-fine);
  line-height: 1.8;
  color: var(--muted);
}
.footer__line a {
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.footer__line a:hover { color: var(--bone); }


/* ------------------------------------------------------------
   9. MOTION — a single gentle fade-and-rise per section.
   Only ever applied when JS is on AND the visitor has not asked
   for reduced motion. Everything is fully visible otherwise.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal > .wrap > *:not(.signup__inner),
  .js .reveal > .wrap > .signup__inner > * {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 700ms ease, transform 700ms cubic-bezier(0.2, 0.7, 0.3, 1);
  }

  .js .reveal.is-visible > .wrap > *:not(.signup__inner),
  .js .reveal.is-visible > .wrap > .signup__inner > * {
    opacity: 1;
    transform: none;
  }

  /* Slight stagger down the section. */
  .js .reveal > .wrap > *:nth-child(2):not(.signup__inner),
  .js .reveal > .wrap > .signup__inner > *:nth-child(2) { transition-delay: 90ms; }
  .js .reveal > .wrap > *:nth-child(3):not(.signup__inner) { transition-delay: 180ms; }
  .js .reveal > .wrap > *:nth-child(4):not(.signup__inner) { transition-delay: 260ms; }
  .js .reveal > .wrap > *:nth-child(5):not(.signup__inner) { transition-delay: 340ms; }
}


/* ------------------------------------------------------------
   10. COMPARE (/compare)
   Laid out after the reference the owner chose: a hero, a strip of
   the four-part story, one chart panel, three cards, where Inergy is
   stronger than each of three tools, and a closing band.

   ⚠️ THIS PAGE HAS COLOURS THE REST OF THE SITE DOESN'T, ON PURPOSE.
   The chart reads by colour at a glance, which is its whole job:
   green for yes, amber for partly, red for not listed, violet for
   founders' testing. And the accent marks Inergy's column and the
   page's icons. Both were the owner's call for this page; the
   restraint in the tokens above still holds everywhere else.

   Every panel is a solid surface, so the background's shade leaves
   the text on it alone (it only darkens behind text on the sky).
   ------------------------------------------------------------ */
.cmp {
  --yes:  #34D399;
  --part: #FBBF24;
  --no:   #F87171;
  --test: #B69CFF;
  --surface: #121216;
  --radius: 10px;
}

.cmp .ico {
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── Hero ── */
.cmp-hero { padding-top: clamp(1.5rem, 4vw, 3rem); }
.eyebrow {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1rem;
}
.cmp-hero h1 {
  font-size: clamp(2.5rem, 6vw, 4.6rem);
  line-height: 1.02;
  max-width: 21ch;
  letter-spacing: -0.01em;
}
.cmp-hero h1 em { font-style: normal; color: var(--accent); }
.cmp-hero__sub {
  font-size: clamp(1.15rem, 1.9vw, 1.4rem);
  color: var(--bone);
  margin: clamp(1rem, 2vw, 1.4rem) 0 0;
  max-width: 44ch;
}
.cmp-hero__lede {
  color: var(--muted);
  margin-top: 0.6rem;
  max-width: 58ch;
}
.cmp-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: clamp(1.5rem, 3vw, 2rem);
}
.btn--ghost {
  background: transparent;
  color: var(--bone);
  border-color: rgba(232, 230, 223, 0.55);
}
.btn--ghost:hover { background: rgba(232, 230, 223, 0.08); border-color: var(--bone); color: var(--bone); }

/* ── The story, as a strip ── */
.strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
  padding: 0;
  list-style: none;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
.strip li {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  padding: 1.1rem 1.25rem;
  border-top: 1px solid var(--rule);
}
.strip li:first-child { border-top: 0; }
@media (min-width: 900px) {
  .strip li { border-top: 0; border-left: 1px solid var(--rule); }
  .strip li:first-child { border-left: 0; }
}
.strip b { display: block; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.strip span { display: block; color: var(--bone); font-size: 1.02rem; line-height: 1.35; margin-top: 0.15rem; }

/* ── The chart panel ── */
.panel {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
.chart-panel { margin-top: clamp(2rem, 4vw, 3rem); scroll-margin-top: 1.5rem; }
.chart-panel__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding: clamp(1.1rem, 2.4vw, 1.6rem) clamp(1.1rem, 2.4vw, 1.75rem);
}
.chart-panel__head h2 {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  line-height: 1.1;
}
.chart-panel__head h2 .ico { width: 1.9rem; height: 1.9rem; stroke-width: 2.2; }
.chart-panel__key { display: grid; gap: 0.55rem; justify-items: start; }
@media (min-width: 900px) { .chart-panel__key { justify-items: end; } }
.chart-panel__key p { font-size: 0.85rem; color: var(--muted); margin: 0; }
.key {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem 0.9rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.85rem;
  color: var(--muted);
}
.key li { display: inline-flex; align-items: center; gap: 0.35rem; }

.chart-scroll {
  position: relative;   /* keeps the cells' screen-reader labels inside the scroller */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-top: 1px solid var(--rule);
}
.chart-scroll:focus-visible { outline: 2px solid var(--bone); outline-offset: -2px; }

table.chart {
  width: 100%;
  min-width: 860px;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.95rem;
  line-height: 1.35;
}
.chart th, .chart td {
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--rule);
  text-align: center;
  vertical-align: middle;
}
.chart thead th {
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--bone);
  white-space: nowrap;
  padding-block: 0.9rem;
}
.chart tbody th { text-align: left; font-weight: 400; color: var(--bone); min-width: 15rem; max-width: 20rem; }
.chart sup { font-size: 0.7em; color: var(--muted); margin-left: 0.1em; }
/* The feature column stays put while the rest scrolls sideways on a phone. */
.chart th:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--surface);
  text-align: left;
}
/* A row naming the part of the night the rows under it belong to. */
.chart .group th {
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--bone);
  padding-top: 1.1rem;
  padding-bottom: 0.6rem;
}
.chart .group th span { font-family: var(--body); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); margin-right: 0.6rem; }
/* Inergy's column: outlined in the accent, top to bottom. */
.chart .us {
  background: rgba(255, 46, 136, 0.05);
  border-left: 2px solid var(--accent);
  border-right: 2px solid var(--accent);
}
.chart thead .us { color: var(--accent); border-top: 2px solid var(--accent); border-radius: 6px 6px 0 0; }
.chart tbody tr:last-child .us { border-bottom: 2px solid var(--accent); border-radius: 0 0 6px 6px; }
.chart tbody tr:last-child th, .chart tbody tr:last-child td:not(.us) { border-bottom: 0; }

.us__cell { display: inline-flex; align-items: center; gap: 0.45rem; white-space: nowrap; }

/* Marks. Each carries its meaning in text for screen readers. */
.m { width: 1.3rem; height: 1.3rem; vertical-align: middle; fill: none; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.m--yes  { stroke: var(--yes); }
.m--part { stroke: var(--part); }
.m--no   { stroke: var(--no); }
.m--test { stroke: var(--test); stroke-width: 2; width: 1.15rem; height: 1.15rem; }
.key .m { width: 1.05rem; height: 1.05rem; }

.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1;
  padding: 0.32rem 0.55rem;
  border-radius: 999px;
  white-space: nowrap;
}
.chip--live { color: var(--yes); background: rgba(52, 211, 153, 0.13); }
.chip--live::before { content: ""; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--yes); }
.chip--test { color: var(--test); background: rgba(182, 156, 255, 0.14); }
.chip__early { color: var(--muted); font-weight: 500; padding-left: 0.35rem; border-left: 1px solid rgba(182, 156, 255, 0.4); }
.chip--muted { color: var(--muted); background: rgba(138, 135, 144, 0.14); }

.chart-notes {
  margin: 0;
  padding: 1rem clamp(1.1rem, 2.4vw, 1.75rem) 1.25rem;
  list-style: none;
  border-top: 1px solid var(--rule);
  display: grid;
  gap: 0.3rem;
  font-size: 0.85rem;
  color: var(--muted);
}
.chart-notes sup { color: var(--bone); margin-right: 0.35rem; }

/* ── Three cards ── */
.cards {
  display: grid;
  gap: 1rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}
@media (min-width: 900px) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.card { padding: clamp(1.25rem, 2.4vw, 1.6rem); }
.card__head { display: flex; gap: 0.9rem; align-items: flex-start; margin-bottom: 1.2rem; }
.card__head .ico { width: 2.2rem; height: 2.2rem; stroke-width: 1.6; }
.card__head h2 { font-size: clamp(1.3rem, 2vw, 1.55rem); line-height: 1.15; }
.card__head p { color: var(--muted); font-size: 0.95rem; margin-top: 0.2rem; }
.ticks { margin: 0; padding: 0; list-style: none; display: grid; gap: 1rem; }
.ticks li { display: flex; gap: 0.75rem; align-items: flex-start; }
.ticks .ico { width: 1.25rem; height: 1.25rem; stroke-width: 2.6; margin-top: 0.15rem; }
.ticks .ico--tool { width: 1.6rem; height: 1.6rem; stroke-width: 1.6; margin-top: 0; }
.ticks b { display: block; color: var(--bone); font-weight: 600; font-size: 1rem; }
.ticks span { display: block; color: var(--muted); font-size: 0.93rem; line-height: 1.45; margin-top: 0.1rem; }

/* ── Where Inergy is stronger ── */
.stronger { margin-top: clamp(2.25rem, 4.5vw, 3.25rem); }
.stronger__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  margin-bottom: 1rem;
}
.stronger__head h2 { display: flex; align-items: center; gap: 0.6rem; font-size: clamp(1.35rem, 2.4vw, 1.75rem); }
.stronger__head p { color: var(--muted); font-size: 0.9rem; }
.stronger__grid { display: grid; gap: 1rem; }
@media (min-width: 900px) { .stronger__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.rival { display: flex; gap: 1rem; align-items: flex-start; padding: 1.2rem 1.35rem; }
.rival .ico { width: 2.4rem; height: 2.4rem; stroke-width: 1.5; }
.rival h3 { font-family: var(--display); font-size: 1.25rem; font-weight: 600; line-height: 1.2; color: var(--bone); margin: 0; }
.rival b { display: block; color: var(--bone); font-weight: 500; font-size: 0.95rem; line-height: 1.4; margin: 0.25rem 0 0; }
.rival p { color: var(--muted); font-size: 0.88rem; line-height: 1.45; margin: 0.3rem 0 0; }

/* ── How it was checked ── */
.sources { margin-top: clamp(2.25rem, 4.5vw, 3.25rem); max-width: 76ch; }
.sources h2 { font-family: var(--body); font-size: 1rem; font-weight: 600; margin-bottom: 0.5rem; }
.sources p, .sources li { font-size: var(--size-fine); color: var(--muted); line-height: 1.6; }
.sources ul { margin: 0.5rem 0 0; padding-left: 1.1rem; }
.sources a { color: var(--muted); }
.sources a:hover { color: var(--bone); }

/* ── The closing band ── */
.band {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding: clamp(2rem, 4.5vw, 3rem) clamp(1.25rem, 3vw, 2rem);
  text-align: center;
  border-top: 1px solid var(--rule-accent);
  background: linear-gradient(180deg, rgba(255, 46, 136, 0.07), rgba(18, 18, 22, 0.96) 70%);
  background-color: var(--surface);
}
.band h2 { font-size: clamp(1.6rem, 3.4vw, 2.5rem); line-height: 1.1; }
.band p { color: var(--muted); margin: 0.7rem auto 0; max-width: 46ch; }
.band .btn { margin-top: 1.4rem; }

@media (max-width: 559.98px) {
  table.chart { min-width: 720px; font-size: 0.9rem; }
  .chart tbody th { min-width: 10.5rem; max-width: 10.5rem; }
  .chart th, .chart td { padding: 0.65rem 0.6rem; }
  .chart .group th span { display: block; margin: 0 0 0.15rem; }
  .us__cell > .m { display: none; }   /* the chip says it; the column stays narrow */
}


/* ------------------------------------------------------------
   11. FAQ (the home page's Questions and /help/faq)
   Grouped questions that open in place: <details>, so it works with
   no script and a keyboard or screen reader gets a real disclosure.
   Each group is one solid panel, so the background's shade leaves its
   text alone; the answers are muted under the bone question, the way
   the compare page's cards read.
   ------------------------------------------------------------ */
.faq--list h2 + .faq-group,
.faq--list h1 + .faq-group { margin-top: clamp(1.25rem, 2.4vw, 1.75rem); }
.faq-group + .faq-group { margin-top: clamp(1.75rem, 3.4vw, 2.5rem); }
.section__text .faq-group__title {
  font-family: var(--body);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.75rem;
  max-width: none;
}
.qa-list {
  background: #121216;
  border: 1px solid var(--rule);
  border-radius: 10px;
}
.qa + .qa { border-top: 1px solid var(--rule); }
.qa summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  line-height: 1.4;
  color: var(--bone);
}
.qa summary::-webkit-details-marker { display: none; }
/* A plus that turns into a cross when the answer is open. */
.qa summary::after {
  content: "";
  flex: none;
  width: 0.85rem;
  height: 0.85rem;
  background:
    linear-gradient(var(--accent), var(--accent)) center / 100% 2px no-repeat,
    linear-gradient(var(--accent), var(--accent)) center / 2px 100% no-repeat;
  transition: transform 180ms ease;
}
.qa[open] summary::after { transform: rotate(45deg); }
.qa summary:hover { color: #fff; }
.qa summary:focus-visible { outline: 2px solid var(--bone); outline-offset: -2px; border-radius: 10px; }
.qa__a { padding: 0 1.25rem 1.15rem; }
.section__text.faq .qa__a p { color: var(--muted); margin: 0; }
.section__text.faq .qa__a a { color: var(--accent); }
@media (prefers-reduced-motion: reduce) {
  .qa summary::after { transition: none; }
}
.section__text .faq__intro { color: var(--muted); margin-bottom: 0; }
.faq__intro + .faq-group { margin-top: clamp(1.5rem, 3vw, 2rem); }