/* How it works and Features (phase 9 spec 9). The site header is sticky, so a section reached by
   its anchor stops below it. */

[id] { scroll-margin-block-start: var(--header-height); }
/* A reference page: its parts follow one another closer than the home page's bands. */
.section[id] { padding-block: var(--space-8); }

/* At a glance: three facts under the How it works hero. */
.glance { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); gap: var(--space-4); margin: 0; }
.glance > div { padding: var(--space-5); background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.glance dd { font-size: var(--text-lg); font-weight: 600; }

/* The six steps, one wide card each, the number beside the text. */
.steps--wide { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
.steps--wide > li { grid-template-columns: 40px minmax(0, 1fr); column-gap: var(--space-5); padding: var(--space-6); }
.steps--wide h2 { font-size: var(--text-xl); }
.facets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-6); margin: 0; }
.facets dt { margin-block-end: var(--space-2); }
.facets p + p { margin-block-start: var(--space-2); }
@media (max-width: 720px) {
  .steps--wide > li { grid-template-columns: minmax(0, 1fr); padding: var(--space-5); }
  .facets { grid-template-columns: minmax(0, 1fr); }
}

/* The message to forward, beside what it is for. One click selects all of it. */
.forward { display: grid; gap: var(--space-5); align-items: start; }
.forward .head { margin: 0; }
.forward__text { user-select: all; }
@media (min-width: 960px) { .forward { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); } }

/* The band's second action: outlined in white, so it reads apart from Start free. */
.band .btn:not(.btn--primary) { background: transparent; border-color: var(--on-blue); color: var(--on-blue); }
.band .btn:not(.btn--primary):hover { background: var(--blue-2); }

/* Features: the jump list, each part's icon, and the rows. */
.jump { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.jump a { padding: var(--space-1) var(--space-4); border: 1px solid var(--edge); border-radius: var(--radius-pill); background: var(--card); font-weight: 500; text-decoration: none; }
.part { display: flex; align-items: center; gap: var(--space-3); }
.part img { inline-size: 32px; block-size: 32px; }
.specs { list-style: none; margin: 0; padding: 0 var(--space-6); background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.specs > li { display: grid; grid-template-columns: minmax(0, 16rem) minmax(0, 1fr); gap: var(--space-2) var(--space-6); padding-block: var(--space-5); }
.specs > li + li { border-block-start: 1px solid var(--line); }
.specs h3 { margin-block-end: var(--space-2); }
.specs p { margin: 0; color: var(--ink-2); }
.tag--pro { background: var(--env-1); color: var(--blue); }

/* The raw report under the aggregate reports rows, closed (stage 3 spec 8): the record beside
   the sentence the product writes about it, the record on the left from 768px. */
.raw { margin-block-start: var(--space-5); padding: var(--space-4) var(--space-5); background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.raw summary { cursor: pointer; font-weight: 600; color: var(--blue); }
.raw > p { margin: var(--space-4) 0 0; }
.evidence { display: grid; gap: var(--space-4); align-items: start; margin-block-start: var(--space-4); }
.evidence__record { margin: 0; overflow-x: auto; }
.evidence .card { background: var(--paper-2); box-shadow: none; }
@media (min-width: 768px) {
  .evidence { grid-template-columns: 1fr 1fr; }
  .evidence__record { order: -1; }
}
@media (max-width: 720px) {
  .specs { padding-inline: var(--space-5); }
  .specs > li { grid-template-columns: minmax(0, 1fr); }
}