/* =====================================================================================================================
   pages-war-v4.css: /warranty/ only. Plan 4 design run, family D (2026-10-06). Linked last, after site.css, group-c.css and
   pages-g6.css. group-c.css is shared with /schools/ (family B) and pages-g6.css with /live/ and /gaming/ (family E), so
   this page's design-run rules live here instead. DESIGN.md is the system; TOM-TASTE.md the corrections. No words changed.
   ===================================================================================================================== */

/* one lime button per view: the hero's "Start a claim or a return" is the filled one, so the header's pickup button takes
   the outline treatment on this page */
@media (min-width: 64rem) {
}

/* hero: the five text blocks stay in order on the 8px scale with less air between the lead, the care line and the date,
   so the on-page list beside them stays level with the column */
.g6-war-hero .answer { margin-top: var(--s4); }
.g6-war-care { margin-top: var(--s3); }
.g6-war-date { margin-top: var(--s3); }

/* finish review 10-07: the hero grid centred the on-page list against the text column, so its top sat ~50px under the H1
   at 1920. Both columns start together; the 12px offset lines the card's edge up with the H1's cap height. */
@media (min-width: 64rem) {
  .hero--inner.g6-war-hero .hero__grid { align-items: start; }
  .g6-war-hero .g6-toc { margin-top: var(--s3); }
}
/* the two return cards: their titles ran one line and two lines, so the lists started at different heights. One shared
   title row (subgrid) puts both lists on one line. */
@media (min-width: 48rem) {
  .g6-ret { grid-template-rows: auto 1fr; }
  .g6-ret .card { display: grid; grid-template-rows: subgrid; grid-row: span 2; align-content: start; height: auto; }
  .g6-ret .card > * { align-self: start; align-content: start; }
}

/* the arrow is an icon, not a typed glyph: the cross links under the claim card draw the 24-grid arrow; the outbound
   store link turns it 45 degrees. Links flow inline (padding keeps the 44px tap height). */
body:has(.g6-war-hero) .link-arrow { display: inline-block; min-height: 0; padding-block: 10px; line-height: 24px; }
body:has(.g6-war-hero) .link-arrow::after { display: inline-block; width: 18px; height: 18px; margin-left: 8px; vertical-align: -3px; }
.g6-cross [aria-hidden="true"] {
  display: inline-block; width: 16px; height: 16px; overflow: hidden; color: transparent; vertical-align: -2px; background: var(--ink);
  -webkit-mask: var(--ico-arrow) center / contain no-repeat; mask: var(--ico-arrow) center / contain no-repeat;
  transform: rotate(-45deg);
}

/* Tom 10-09: /warranty/ is the live page's content (intro + Register Warranty, the live Wufoo form, wired as today) in the
   new design. The form itself renders inside Wufoo's iframe, styled by the Wufoo account's theme. */
.war-reg__h { margin-bottom: var(--s6); }
.war-reg__form { max-width: 52rem; padding: clamp(16px, 3vw, 32px); background: var(--surface, #fff); border: 1px solid rgb(18 19 17 / 0.12);
  border-radius: 16px; }
.war-reg__form iframe { display: block; width: 100%%; border: 0; }