/* The CTA and the FAQ, the page's last two sections.

   Both shapes are chosen against what the page already does rather than from
   taste. The hero splits copy and art, the dashboard centres its heading, the
   cards run a 7:5 grid and the bento carries its heading inside a cell. So the
   CTA is a 5:7 split of one text-and-form column against a 2 by 2 of reasons,
   and the FAQ is a heading column beside a stack of questions. Five sections,
   five vertical rhythms. */

.cta,
.faq {
  display: grid;
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--s-8);
}

.cta {
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--s-8);
  padding-block: var(--s-10) var(--s-10);
}

.cta-lead {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-4);
}

.cta-lead .section-title { max-width: var(--measure-cta); }
.cta-lead .lede { max-width: var(--measure-cta); }

.signup { margin-top: var(--s-4); width: 100%; max-width: var(--measure-cta); }

/* One control, one keyline, the way the header's sign-up button is built and
   the way the newsletter reference measures it (the button takes 25% of 263).
   Here the button takes 128 of a 480 control, 27%. */
.field {
  display: flex;
  align-items: stretch;
  height: var(--control-h);
  border-radius: var(--radius);
  background-color: var(--g-0);
  box-shadow: var(--split-edge);
  transition: box-shadow var(--dur-fast) var(--ease-out);
}

.field:hover { box-shadow: 0 0 0 var(--hairline) var(--g-300), 0 var(--hairline) 0 var(--hairline) var(--g-400); }
.field:focus-within { box-shadow: 0 0 0 var(--focus-ring) var(--m-700); }

.field-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 var(--s-4);
  border: 0;
  border-radius: var(--radius) 0 0 var(--radius);
  background: transparent;
  color: var(--g-900);
  font: inherit;
  font-size: var(--t-ui);
  line-height: var(--lh-ui);
}

.field-input::placeholder { color: var(--g-500); }
.field-input:focus { outline: none; }

/* The field owns the focus ring for the whole control, so the input does not
   draw a second one inside it. */
.field-go {
  flex: none;
  width: var(--field-go);
  padding: 0;
  border: 0;
  border-radius: 0 var(--radius) var(--radius) 0;
  background-color: var(--m-700);
  background-image: linear-gradient(180deg, var(--m-700), var(--m-800));
  box-shadow: inset 0 1px 0 var(--btn-hi);
  color: var(--g-0);
  font: inherit;
  font-size: var(--t-ui);
  line-height: var(--lh-ui);
  cursor: pointer;
  transition: box-shadow var(--dur-press) var(--ease-press), background-image var(--dur-press) var(--ease-press);
}

/* It sits inside the field's keyline, so it carries the highlight but not the
   thickness edge or the contact shadow: those belong to the control around it. */
.field-go:hover { box-shadow: inset 0 1px 0 var(--btn-hi-hover); }
.field-go:active { background-image: none; background-color: var(--m-900); box-shadow: inset 0 1px 0 var(--btn-hi-press); }
.field-go:focus-visible { outline: var(--focus-ring) solid var(--m-900); outline-offset: calc(var(--focus-gap) * -1 - 1px); }

/* The note under the control doubles as the error line, so a message never
   pushes the four reasons beside it down the page. */
.signup-note { margin-top: var(--s-2); color: var(--g-500); }
.signup[data-state="error"] .field { box-shadow: 0 0 0 var(--hairline) var(--c-bad), 0 var(--hairline) 0 var(--hairline) var(--c-bad); }
.signup[data-state="error"] .signup-note { color: var(--c-bad); }
.signup[data-state="sent"] .signup-note { color: var(--m-800); }
.signup[data-state="sent"] .field-go { background-color: var(--m-900); }

.values {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-7) var(--s-6);
  margin: 0;
  padding: 0;
  list-style: none;
  align-content: center;
}

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

/* The dashboard pointers' chip is white with a ring and a drop; this one is
   flat on the mint, because the bento's material rule (no strokes, no shadows)
   arrived after those were built and this section follows it. */
.value-icon {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--pointer-icon);
  height: var(--pointer-icon);
  border-radius: 50%;
  background-color: var(--m-50);
  color: var(--m-700);
}

.value-icon svg { width: var(--icon-glyph); height: var(--icon-glyph); }
.value-text { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.value-text .card-body { max-width: var(--measure-value); }

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

.faq {
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: var(--s-8);
  padding-block: var(--s-8) var(--s-11);
}

/* The stack runs about twice the height of its heading, so the heading follows
   it rather than sitting alone at the top of a very tall column. */
.faq-head {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  align-self: start;
  position: sticky;
  top: var(--s-8);
}
.faq-head .section-title { max-width: var(--measure-faq-head); }
.faq-head .lede { max-width: var(--measure-faq-head); }

/* The stack: rows on their own ground with a gap between them and no dividers,
   which is what the reference measures (gap 9 against a 40 row, 22%). Here the
   row is 64 and the gap 16, 25%. */
.qa-list { display: flex; flex-direction: column; gap: var(--s-4); }

.qa {
  border-radius: var(--radius);
  background-color: var(--g-50);
  transition: background-color var(--dur-base) var(--ease-out);
}

.qa[open] { background-color: var(--m-50); }

.qa-q {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  min-height: var(--qa-row);
  padding: var(--s-4) var(--s-5);
  list-style: none;
  cursor: pointer;
  color: var(--g-900);
  font-size: var(--t-lede);
  line-height: var(--lh-title);
}

.qa-q::-webkit-details-marker { display: none; }
.qa-q:focus-visible { outline: var(--focus-ring) solid var(--m-700); outline-offset: calc(var(--focus-gap) * -1); border-radius: var(--radius); }
@media (hover: hover) and (pointer: fine) {
  .qa:not([open]) .qa-q:hover { background-color: var(--g-100); border-radius: var(--radius); }
}
.qa[open] .qa-q { color: var(--m-900); }

.qa-text { flex: 1 1 auto; min-width: 0; }

.qa-mark {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--icon-glyph);
  height: var(--icon-glyph);
  color: var(--g-500);
  transition: transform var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}

.qa-mark svg { width: var(--icon-glyph); height: var(--icon-glyph); }
.qa[open] .qa-mark { transform: var(--turn-half); color: var(--m-700); }

/* The reveal.

   The previous version transitioned grid-template-rows 0fr to 1fr on a wrapper
   inside the details. Measured, it never ran: a closed <details> does not render
   its content, so there is no value to transition from, and the row snapped to
   its full 144px inside 64ms in both directions. Dead code.

   ::details-content is the element the browser actually reveals, so the reveal
   belongs on it. content-visibility transitions with allow-discrete, which keeps
   the content laid out through the close, so both directions animate. This is a
   block-size animation and it does cost layout; an accordion's whole point is
   that the stack reflows, so there is no composited version of it. What can be
   composited is, and it is one element, six times on the page.

   The text fades over 120 while the box moves over 200. Opening, that puts the
   answer legible at 60% of the way out; closing, the text is gone before the box
   finishes, so nothing is squashed on the way down. One declaration, correct in
   both directions, no delays.

   Transitions, not keyframes: a second click mid-open retargets from wherever
   the box is rather than restarting from zero. */
.qa { interpolate-size: allow-keywords; }   /* so block-size can interpolate to auto */

.qa::details-content {
  block-size: 0;
  overflow: hidden;
  opacity: 0;
  transition:
    content-visibility var(--dur-base) var(--ease-out) allow-discrete,
    block-size var(--dur-base) var(--ease-out),
    opacity var(--dur-fast) var(--ease-out);
}

.qa[open]::details-content {
  block-size: auto;
  opacity: 1;
}

.qa-a {
  margin: 0;
  max-width: var(--measure-qa);
  padding: 0 var(--s-5) var(--s-5);
}

@media (prefers-reduced-motion: reduce) {
  .qa,
  .qa-mark,
  .field,
  .field-go { transition: none; }
  /* The size change and the chevron's turn go; the answer still fades in, which
     is the state change without the movement. */
  .qa[open] .qa-mark { transform: none; }
  .qa::details-content {
    transition: content-visibility var(--dur-fast) allow-discrete, opacity var(--dur-fast) var(--ease-out);
  }
}

@media (max-width: 960px) {
  .cta,
  .faq { padding-inline: var(--s-5); }
  .cta { grid-template-columns: minmax(0, 1fr); gap: var(--s-7); }
  .faq { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  .cta-lead .section-title,
  .cta-lead .lede,
  .signup,
  .faq-head .section-title,
  .faq-head .lede { max-width: var(--measure-lede); }
}

@media (max-width: 560px) {
  .faq-head { position: static; }
  .cta { padding-block: var(--s-9) var(--s-9); }
  .faq { padding-block: var(--s-7) var(--s-10); }
  .values { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  /* Under 400 the joined control cannot hold a 16px placeholder and a 128
     button on one line, so the button takes its own row and the pair keeps
     one radius between them. */
  .field { height: auto; flex-direction: column; align-items: stretch; }
  .field-input { height: var(--control-h); border-radius: var(--radius) var(--radius) 0 0; }
  .field-go { width: 100%; height: var(--control-h); border-radius: 0 0 var(--radius) var(--radius); }
  /* the row keeps its 24 side padding at every width, so the atom spec holds */
  .qa-q { gap: var(--s-3); }
}