/* EdgeRift — Support pages: the hub, each game's Support page, the FAQ library, categories, articles and search
   (concept/css/page-support.css; DESIGN-BRIEF §3.6–3.7). Linked after the shared kit.
   Tokens only, no colour literals, no case changes (uppercase only through the shared classes). */

@layer pages {

  /* ---------- Support hero: short, so "Choose your game" follows it directly (Apple Support): the first row of
     game cards, names included, is in view at 1280 × 800 and 1024 × 768 (review, 2026-10-07) ---------- */
  .support-hero { padding-top: clamp(36px, 1.9vw + 32px, 64px); padding-bottom: clamp(40px, .76vw + 38px, 52px); }
  .support-hero .search-field { margin-top: clamp(20px, .76vw + 18px, 28px); }
  .support-hero__soft { color: var(--c-on-midnight-soft); }   /* "SUPPORT & HELP": the second half in the band's soft grey (owner, 2026-10-07) */

  /* ---------- Plain page heads (FAQ library, category, search): white, centred, short ---------- */
  .page-head { padding-top: calc(var(--section-y) * .55); padding-bottom: calc(var(--section-y) * .5); }
  .page-head .headline { max-width: 16em; margin-inline: auto; }
  .page-head .sub { max-width: 30em; margin-inline: auto; }
  .page-head .search-field { margin-top: clamp(24px, 1.14vw + 20px, 36px); }

  /* ---------- Hub: "Choose your game" (owner, 2026-10-07: "dont show any FAQs until you click on a product") ----------
     The hub's only content between the search hero and "Still need help?": white cards on the grey band, grouped by
     where you play (the labels show only with two or more groups). From 768 every card is exactly a quarter of the
     1140 px row (a group's basis is --n cards and their gaps), so the groups line up as one grid: 4, then 1 + 2
     centred (7 games); 4, then 1 + 1 (6); 4 + 1 (TV only); 4 + 2 (Retro only); 4 in one unlabelled group (flags off).
     Phones: one inset grouped list per group (iOS Settings), icon left, chevron right. Each card is a plain link to
     the game's own Support page (support/game.twig). The card shadows are as light as Apple's tiles. The band
     follows the hero with a short top and no lede, so the first row of cards is in the first screen. */
  .picker { padding-block: clamp(32px, 1.14vw + 30px, 48px) clamp(56px, 3.05vw + 44px, 96px); }
  .picker > .headline { font-size: var(--t-tile); }   /* "CHOOSE YOUR GAME" a step down from a section headline: 28–40 px, not 32–56 (owner, 2026-10-07) */
  .picker__groups {
    --gap: clamp(12px, .76vw + 9px, 20px);
    display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(24px, 1.52vw + 18px, 40px) var(--gap);
    max-width: 1140px; margin: clamp(24px, .76vw + 22px, 32px) auto 0; padding: 0; list-style: none; text-align: left;
  }
  /* A group fills its flex line's height and its list fills the group, so every card in a row is as tall as the
     tallest (a name that wraps at 768 px, "Real Solitaire Retro / for PC", lines up with "Real Solitaire / for TV") */
  .picker__group { display: flex; flex-direction: column; flex: 0 0 100%; min-width: 0; }
  .picker__label { padding: 0 4px 10px; }
  .picker__list { flex: 1 0 auto; display: grid; gap: var(--gap); margin: 0; padding: 0; list-style: none; }
  @media (min-width: 768px) {
    .picker__group { flex-basis: min(100%, calc(var(--n) * (100% - 3 * var(--gap)) / 4 + (var(--n) - 1) * var(--gap))); }
    .picker__list { grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
  }

  .picker__app {
    --icon: clamp(80px, 2.29vw + 66px, 100px);
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%;
    padding: clamp(24px, .76vw + 18px, 30px) 16px clamp(20px, .38vw + 18px, 24px);
    border-radius: 24px; background: var(--c-bg); color: var(--c-ink); text-align: center;
    box-shadow: var(--shadow-tile);
    transition: transform var(--d-base) var(--ease), box-shadow var(--d-base) var(--ease);
  }
  .picker__app:hover { text-decoration: none; transform: translateY(-4px); box-shadow: var(--shadow-tile-lift); }
  /* A game coming soon (owner, 2026-10-13): the same card, no link, so no lift */
  .picker__app--soon { cursor: default; }
  .picker__app--soon:hover { transform: none; box-shadow: var(--shadow-tile); }
  /* Every icon stands on the same line, in a box as tall as the square icons, so the names line up */
  .picker__icon { display: flex; align-items: flex-end; justify-content: center; height: var(--icon); }
  .picker__icon picture { display: contents; }
  .picker__icon img { display: block; width: var(--icon); height: var(--icon); border-radius: 22.37%; }
  /* The tvOS icon is 5:3: 4/3 of the square's width makes it 0.8 of its height; tvOS-style rounded corners */
  .picker__app--tv .picker__icon img { width: calc(var(--icon) * 4 / 3); height: auto; aspect-ratio: 5 / 3; border-radius: 12% / 20%; }
  .picker__app--pixel .picker__icon img { border-radius: 0; image-rendering: pixelated; }   /* Retro pixel art (48 px drawn at 4×) */
  .picker__text { display: flex; flex-direction: column; align-items: center; }
  .picker__name { margin-top: 16px; font-size: clamp(19px, .38vw + 16.5px, 22px); line-height: 1.15; transition: color var(--d-fast) var(--ease); }
  .picker__name > span { display: block; color: var(--c-muted); font-weight: 600; text-wrap: balance; }   /* "for Classic / Mac OS", never "… Mac / OS" */
  .picker__app:hover .picker__name, .picker__app:hover .picker__name > span { color: var(--c-red-text); }
  /* A game not out yet: "Coming soon" under its name, as the Games page's eyebrow says it */
  .picker__status { margin-top: 10px; font-size: var(--t-fine); }
  /* 768–1023: four cards of ~170 px. The names step down to 17 px and balance as a whole ("Real Solitaire / Pro for
     iPad", never "Pro" alone), and the cards top-align so a row's icons stay on one line */
  @media (min-width: 768px) and (max-width: 1023px) {
    .picker__list .picker__app { justify-content: flex-start; padding-inline: 10px; }
    .picker__list .picker__name { font-size: 17px; text-wrap: balance; }
    .picker__list .picker__name > span { display: inline; }
  }

  @media (max-width: 767px) {
    .picker__list { gap: 0; overflow: hidden; border-radius: 18px; background: var(--c-bg); box-shadow: var(--shadow-tile); }
    .picker__list > li + li .picker__app::before { content: ""; position: absolute; top: 0; left: 92px; right: 0; border-top: 1px solid var(--c-hairline); }
    .picker__app {
      --icon: 56px;
      display: grid; grid-template-columns: 60px minmax(0, 1fr) auto; align-items: center; column-gap: 16px;
      min-height: 0; padding: 12px 14px 12px 16px; border-radius: 0; box-shadow: none; text-align: left;
    }
    .picker__app:hover { transform: none; box-shadow: none; }
    .picker__app:focus-visible { outline-offset: -3px; border-radius: 14px; }   /* inside the list, which clips */
    .picker__icon { width: 60px; height: 60px; align-items: center; }
    .picker__app--tv .picker__icon img { width: 60px; }
    .picker__text { align-items: flex-start; }
    .picker__name { margin-top: 0; font-size: 19px; }
    .picker__status { margin-top: 5px; font-size: 12px; }
    .picker__app::after { content: "›"; content: "›" / ""; font-family: var(--f-symbol); font-size: 26px; line-height: 1; color: var(--c-muted); }
    .picker__app:hover::after { color: var(--c-red-text); }
  }

  /* Compact (support.picker(…, {compact: true})): every game in one flat, centred row of 132 px tiles, small icons,
     no cards and no group labels: the search page's fallback, a category page's games, and a game page's "Not your
     game?" switcher, where this page's game is selected (aria-current: a white tile with an ink ring, its whole
     name in ink). Phones: one inset list, the selected row with a check mark instead of the chevron. */
  .picker--compact {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
    max-width: 1140px; margin: 24px auto 0; padding: 0; list-style: none; text-align: center;
  }
  .picker--compact > li { flex: 0 0 132px; }
  .picker--compact .picker__app { --icon: 56px; justify-content: flex-start; padding: 14px 8px 12px; border-radius: 18px; background: none; box-shadow: none; }
  .picker--compact .picker__app:hover { transform: none; box-shadow: none; }
  .picker--compact .picker__app--tv .picker__icon img { width: 75px; height: 45px; }
  .picker--compact .picker__name { margin-top: 10px; font-size: 14px; line-height: 18px; }
  .picker--compact .picker__status { margin-top: 6px; }
  .picker--compact [aria-current="page"] { background: var(--c-bg); box-shadow: inset 0 0 0 2px var(--c-ink); }
  .picker--compact [aria-current="page"] .picker__name > span { color: var(--c-ink); }
  @media (max-width: 767px) {
    .picker--compact { display: block; overflow: hidden; border-radius: 18px; background: var(--c-bg); box-shadow: var(--shadow-tile); text-align: left; }
    .picker--compact > li + li .picker__app::before { content: ""; position: absolute; top: 0; left: 78px; right: 0; border-top: 1px solid var(--c-hairline); }
    .picker--compact .picker__app { --icon: 44px; grid-template-columns: 48px minmax(0, 1fr) auto; padding: 10px 14px 10px 16px; border-radius: 0; }
    .picker--compact .picker__icon { width: 48px; height: 48px; }
    .picker--compact .picker__app--tv .picker__icon img { width: 48px; height: auto; }
    .picker--compact .picker__name { margin-top: 0; font-size: 17px; line-height: 1.2; }
    .picker--compact .picker__status { margin-top: 4px; }
    .picker--compact [aria-current="page"] { background: none; box-shadow: none; }
    .picker--compact [aria-current="page"]::after { content: "✓"; content: "✓" / ""; font-size: 20px; color: var(--c-ink); }
  }
  /* The search page: under the "nothing found" line; a category page: under its head, on white */
  .results__none + .picker--compact { margin-top: clamp(20px, .76vw + 18px, 28px); }
  .results__status a { color: var(--c-red-text); text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }   /* as .prose links */
  .results__status a:hover { text-decoration-thickness: 2px; }
  .category-games .picker--compact { margin-top: clamp(28px, 1.14vw + 24px, 40px); }
  @media (max-width: 767px) { .category-games .picker--compact { background: var(--c-band); box-shadow: none; } }
  @media (min-width: 768px) { .category-games .picker--compact [aria-current="page"] { background: var(--c-band); } }

  /* A game page's switcher, at the foot of "All answers": a hairline, "Not your game?", every game */
  .switcher { max-width: 1140px; margin: clamp(40px, 1.52vw + 34px, 56px) auto 0; padding-top: clamp(32px, 1.52vw + 26px, 48px); border-top: 1px solid var(--c-hairline); }
  .switcher__title { font-size: clamp(21px, .38vw + 19.5px, 24px); }
  .switcher .picker--compact { margin-top: 20px; }

  /* ---------- Question lists (the library's topics, categories, search, article "Related", a game's "All answers") ---------- */
  .faq { max-width: 760px; margin: var(--gap-cta-media) auto 0; text-align: left; }
  .qlist { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--c-hairline); }
  .qlist a {
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
    min-height: 56px; padding: 14px 0; border-bottom: 1px solid var(--c-hairline);
    font-size: clamp(17px, .19vw + 16.3px, 19px); line-height: 1.4; color: var(--c-ink);
    transition: color var(--d-fast) var(--ease);
  }
  .qlist a::after {      /* the trailing chevron: decorative, silent for screen readers */
    content: "›"; content: "›" / ""; flex: none; font-family: var(--f-symbol);
    font-size: 24px; line-height: 1; color: var(--c-muted); transition: transform var(--d-fast) var(--ease);
  }
  .qlist a:hover { text-decoration: none; color: var(--c-red-text); }
  .qlist a:hover::after { transform: translateX(2px); color: var(--c-red-text); }
  .faq + .cta-row { margin-top: clamp(28px, 1.14vw + 24px, 40px); }

  /* One muted line under each question (categories) or the matched text (search) */
  .qlist__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
  .qlist__summary { font-size: var(--t-small); line-height: 1.45; color: var(--c-muted); }
  .qlist--summary a { padding-block: 16px; }
  .qlist__meta { order: -1; font-size: var(--t-fine); }   /* .eyebrow: the category, above the question */
  .qlist__summary mark { background: none; color: var(--c-ink); font-weight: 500; }   /* matched words: ink + medium, like Apple's search */

  .faq--flush { margin-top: 0; }   /* a list band without its own headline */
  /* A category's questions as one inset panel (support/faq-category.twig): white on the grey band, as a game page's
     "All answers", with separators only between the rows */
  .faq--panel { padding: 4px clamp(18px, 1.14vw + 14px, 32px); border-radius: 24px; background: var(--c-bg); }
  .faq--panel > .qlist { border-top: 0; }
  .faq--panel .qlist li:last-child a { border-bottom: 0; }
  .faq--panel .qlist--summary a { padding-block: 18px; }
  @media (max-width: 767px) { .faq--panel { padding-inline: 16px; border-radius: 18px; } }

  /* Search: the result count, and the "nothing found" line */
  .results__status { max-width: 760px; margin: 0 auto; font-size: var(--t-body); line-height: 1.5; color: var(--c-muted); }
  .results__status strong { font-weight: 500; color: var(--c-ink); }
  .results__status + .faq { margin-top: 24px; }

  /* ---------- FAQ library (/support/faq: support/faq-library.twig) ----------
     The white head with the search box and example searches (plain underlined links, as the Company page's), the
     hub's chooser on grey ("Browse by game"), every topic as a card on white (as the game pages' answers), then
     "Contact us". */
  .lib-topics > .headline { font-size: var(--t-tile); }   /* as "Browse by game" (.picker > .headline) */
  .lib-topics + .help { padding-top: calc(var(--section-y) * .5); }   /* white on white: the centred heading marks it */
  /* The hub: "Browse all FAQs ›" under the chooser */
  .picker__more { margin-top: clamp(28px, 1.14vw + 24px, 40px); }

  /* ---------- Search results (/support/faq/search: support/faq-search.twig) ----------
     The count line, "No answer mentions …" for a typed word no answer has, the game filter (.seg, components.css:
     plain links, the current one the white thumb), then the question rows with an icon column: the game's icon (the
     5:3 tvOS icon wider, Retro's pixel icon crisp) or, for an answer every game shares, its red line icon on a white
     tile. The grey band starts closer to the search box than a plain band would, so the count line reads as its
     answer; nothing found: the games, then the example searches. */
  .page-head + .results-band { padding-top: calc(var(--section-y) * .4); }
  html:not(.js) .results__js-only { display: none; }   /* the static demo without JavaScript: its no-script line instead */
  .results__note { max-width: 760px; margin: 6px auto 0; font-size: var(--t-body); line-height: 1.5; color: var(--c-muted); }
  .results__note strong { font-weight: 500; color: var(--c-ink); }
  .result-filter { margin-top: 24px; text-align: center; }
  .results__status + .result-filter, .results__note + .result-filter { margin-top: 20px; }
  .result-filter + .faq { margin-top: 28px; }
  .results__none + .result-filter { margin-top: 24px; }
  .picker--compact + .cta-row { margin-top: clamp(24px, 1.14vw + 20px, 32px); }
  .result-list a { justify-content: flex-start; gap: 16px; }
  .result-list .qlist__text { flex: 1 1 auto; }
  /* Like Apple's support search (owner, 2026-10-13: "polished and release quality"): each result leads with the
     question, then the matched text, then its game in a quiet sentence-case line under it, not a caps eyebrow above */
  .result-list .qlist__q { font-weight: 500; }
  .result-list .qlist__summary { order: 1; }
  .result-list .qlist__meta {
    order: 2; margin-top: 2px; font-family: var(--f-text); font-weight: 400; font-size: var(--t-fine);
    letter-spacing: normal; text-transform: none; color: var(--c-muted);
  }
  .result__icon { flex: none; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; align-self: flex-start; margin-top: 2px; }
  .result__icon picture { display: contents; }
  .result__icon img { display: block; width: 40px; height: 40px; border-radius: 22.37%; }
  .result__icon--tv { width: 60px; }
  /* With a 5:3 TV icon in the list, every icon sits in a 60 px column, so every question starts on one line */
  .result-list:has(.result__icon--tv) .result__icon { width: 60px; }
  .result-list:has(.result__icon--tv) .result__icon--line { width: 40px; margin-inline: 10px; }
  .result__icon--tv img { width: 60px; height: 36px; border-radius: 12% / 20%; }
  .result__icon--pixel img { border-radius: 0; image-rendering: pixelated; }
  .result__icon--line { border-radius: 10px; background: var(--c-bg); color: var(--c-red); }   /* white: the rows sit on the grey band */
  .result__icon--line .icon { display: block; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .result__icon--line .icon .icon__gap { fill: var(--c-bg); stroke: var(--c-bg); stroke-width: 3.5; }
  @media (max-width: 767px) { .result-list a { gap: 14px; } }

  /* ---------- A game's Support page (/support/{the game's page path}: support/game.twig) ----------
     One regular design for every game (owner, 2026-10-07: no custom pages like Retro's): the light hero with the
     game's icon, its popular answers as cards, every answer in groups, then its contact routes. Bands: grey hero,
     white, grey, white, then the grey footer. */
  .game-hero { --game-icon: clamp(104px, 2.29vw + 95px, 136px); background: var(--c-band);
    padding-top: clamp(44px, 2.67vw + 34px, 72px); padding-bottom: clamp(56px, 3.81vw + 41px, 96px); }
  .game-hero__icon { display: block; width: var(--game-icon); margin: 0 auto clamp(24px, 1.14vw + 20px, 36px); }
  .game-hero__icon picture { display: block; }
  .game-hero__icon img { display: block; width: 100%; height: auto; border-radius: 22.37%; box-shadow: var(--shadow-device); }
  /* The 5:3 tvOS icon a third wider, so it stands as tall as the square icons (as on the hub's cards); tvOS corners */
  .game-hero__icon--tv { width: calc(var(--game-icon) * 4 / 3); }
  .game-hero__icon--tv img { aspect-ratio: 5 / 3; border-radius: 12% / 20%; }
  /* Retro's pixel icon at the app-icon size, crisp, without the app icons' corners and shadow */
  .game-hero__icon--pixel img { border-radius: 0; box-shadow: none; image-rendering: pixelated; }
  .game-hero .headline { max-width: 18em; margin-inline: auto; }
  .game-hero__platforms { margin: 12px 0 0; font-size: var(--t-body); color: var(--c-muted); }   /* Retro: its editions, a plain line */
  .game-hero .search-field { margin-top: clamp(28px, 1.14vw + 24px, 40px); }
  .game-hero .search-field__input { background: var(--c-bg); border-color: var(--c-field-border); }
  .game-hero .search-field__input:focus-visible { outline-color: var(--c-red); }
  .game-hero .cta-row { margin-top: var(--gap-sub-cta); }

  /* The answers' line icons (macros/product.twig pm.icon): product.css's rules, scoped (this page doesn't load it).
     A "no" mark's .icon__gap is cut in the colour of the card it sits on. */
  :is(.topic, .answers__head) .icon { display: block; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .topic .icon .icon__gap { fill: var(--c-band); stroke: var(--c-band); stroke-width: 3.5; }
  .answers__head .icon .icon__gap { fill: var(--c-bg); stroke: var(--c-bg); stroke-width: 3.5; }

  /* Popular answers: three grey cards on white (a red line icon, the question, its one-liner, the round chevron).
     Up to 1023 px (three cards would be ~190 px wide at 768): one inset grouped list, 760 px at most. Its
     separators are inset on both sides, as in "All answers". */
  .topics { --gap: clamp(12px, .76vw + 9px, 20px); display: grid; gap: var(--gap); max-width: 1140px; margin: var(--gap-cta-media) auto 0; padding: 0; list-style: none; text-align: left; }
  @media (min-width: 1024px) { .topics { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .topic {
    position: relative; display: flex; flex-direction: column; height: 100%; min-height: 236px;
    padding: 30px 30px 76px; border-radius: 24px; background: var(--c-band); color: var(--c-ink);
    transition: transform var(--d-base) var(--ease), box-shadow var(--d-base) var(--ease);
  }
  .topic:hover { text-decoration: none; transform: translateY(-3px); box-shadow: var(--shadow-tile-lift); }
  .topic .icon { width: 40px; height: 40px; margin-bottom: 22px; color: var(--c-red); }
  .topic__q { font-size: clamp(21px, .38vw + 19.5px, 25px); line-height: 1.12; text-wrap: balance; transition: color var(--d-fast) var(--ease); }
  .topic__summary { margin-top: 10px; font-size: 15px; line-height: 1.45; color: var(--c-muted); text-wrap: pretty; }
  .topic__go {      /* the round chevron, bottom right; a CSS chevron, so no glyph to announce */
    position: absolute; right: 22px; bottom: 22px; width: 36px; height: 36px; border-radius: 50%;
    background: var(--c-bg); transition: background-color var(--d-fast) var(--ease);
  }
  .topic__go::after { content: ""; position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; margin: -4px 0 0 -6px; border: solid var(--c-ink); border-width: 2px 2px 0 0; transform: rotate(45deg); }
  .topic:hover .topic__go { background: var(--c-red); }
  .topic:hover .topic__go::after { border-color: var(--c-on-red); }
  /* The library's topics (owner, 2026-10-13): two across, each with its answer count bottom left, level with the
     chevron's centre */
  @media (min-width: 1024px) { .topics--categories { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 920px; } }
  .topic__count { position: absolute; left: 30px; bottom: 30px; font-size: var(--t-small); line-height: 20px; color: var(--c-muted); }
  .topic:hover .topic__count { color: var(--c-ink); }
  @media (max-width: 1023px) {
    .topics { max-width: 760px; gap: 0; overflow: hidden; border-radius: 18px; background: var(--c-band); }
    .topics > li + li .topic::before { content: ""; position: absolute; top: 0; left: 58px; right: 16px; border-top: 1px solid var(--c-hairline); }
    .topic { display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 16px; min-height: 0; padding: 16px 52px 16px 16px; border-radius: 0; }
    .topic:hover { transform: none; box-shadow: none; }
    .topic:focus-visible { outline-offset: -3px; border-radius: 14px; }   /* inside the list, which clips */
    .topic .icon { grid-row: span 2; width: 26px; height: 26px; margin: 0; align-self: start; }
    .topic__q { font-size: 20px; }
    .topic__summary { margin-top: 4px; font-size: var(--t-small); }
    .topic__go { top: 50%; bottom: auto; right: 12px; margin-top: -14px; width: 28px; height: 28px; background: none; }
    .topic__go::after { border-color: var(--c-muted); }
    .topic:hover .topic__go { background: none; }
    .topic:hover .topic__go::after { border-color: var(--c-red-text); }
    .topic__count { position: static; grid-column: 2; margin-top: 4px; font-size: var(--t-fine); line-height: 1.4; }
  }

  /* All answers: white group panels on the grey band, two balanced columns from 1024 */
  .answers { --gap: clamp(12px, .76vw + 9px, 20px); max-width: 1140px; margin: var(--gap-cta-media) auto 0; text-align: left; }
  @media (min-width: 1024px) { .answers { columns: 2; column-gap: var(--gap); } }
  .answers__group { break-inside: avoid; margin: 0 0 var(--gap); padding: clamp(20px, .76vw + 17px, 28px) clamp(18px, 1.14vw + 14px, 32px) 6px; border-radius: 24px; background: var(--c-bg); }
  .answers__head { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; }
  .answers__head .icon { flex: none; width: 28px; height: 28px; color: var(--c-red); }
  .answers__title { font-size: clamp(21px, .38vw + 19.5px, 24px); }
  .answers__group > .qlist:first-child { border-top: 0; }   /* a category without groups: no head */
  .answers .qlist a { min-height: 54px; padding-block: 13px; font-size: 17px; }
  .answers .qlist li:last-child a { border-bottom: 0; }
  .answers-band + .help { padding-top: var(--section-y); }
  /* On the hub the chooser leads: "Still need help?" sits closer under it */
  .picker + .help { padding-top: clamp(56px, 3.05vw + 44px, 96px); }

  /* ---------- "Still need help?" (_help.twig; owner, 2026-10-07, "like Apple or EA") ----------
     Grey cards on the white band (the band stays white: a grey band would merge with the grey footer).
     Send Feedback is the feature card: its line, then the three phones with each step under its phone.
     E-mail is a slim card under it: an envelope, the line, the address (one row from 768). On games
     without Send Feedback (Apple TV, Retro) the e-mail card stands alone, centred. */
  .routes { display: grid; gap: clamp(12px, .76vw + 9px, 20px); max-width: 1080px; margin: var(--gap-cta-media) auto 0; }
  .routes--single { max-width: 760px; }   /* the width of the answer column and the question lists */
  .route { border-radius: 28px; background: var(--c-band); }
  .route__copy p { max-width: 30em; margin: 10px auto 0; font-size: var(--t-body); line-height: 1.5; color: var(--c-muted); text-wrap: pretty; }
  /* The links, as on the Company page (owner, 2026-10-07: no rounded box): the address is ink text with a hairline
     underline that darkens on hover; "Step-by-step for your app ›" is the site's red EA text link (.cta). */
  .route__email {
    font-size: var(--t-body); color: var(--c-ink);
    text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; text-decoration-color: var(--c-field-border);
    transition: text-decoration-color var(--d-fast) var(--ease);
  }
  .route__email:hover, .route__email:focus-visible { text-decoration-color: currentColor; }
  /* The hub's tip under both cards (owner, 2026-10-07): what to put in a message. A white box with a hairline (the
     cards are grey), a red line bulb, "TIP", the line, the four things one per line with red dots, then the last line. */
  .route-tip {
    grid-column: 1 / -1; display: flex; align-items: flex-start; gap: clamp(16px, .76vw + 13px, 24px);
    padding: clamp(22px, .76vw + 19px, 30px) clamp(24px, 1.14vw + 20px, 40px);
    border: 1px solid var(--c-hairline); border-radius: 20px; background: var(--c-bg); text-align: left;
  }
  .route-tip__icon { flex: none; width: 36px; height: 36px; fill: none; stroke: var(--c-red); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
  .route-tip__body { min-width: 0; }
  .route-tip__body p { margin: 6px 0 0; font-size: var(--t-body); line-height: 1.5; color: var(--c-muted); text-wrap: pretty; }
  .route-tip__list { display: grid; gap: 6px; margin: 14px 0; padding: 0; list-style: none; font-size: var(--t-body); font-weight: 500; color: var(--c-ink); }   /* one item per line (owner) */
  .route-tip__list li { position: relative; padding-left: 16px; }
  .route-tip__list li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--c-red); }
  @media (max-width: 767px) { .route-tip { flex-direction: column; gap: 12px; } }

  .route--feedback { padding: clamp(32px, 2.29vw + 23px, 56px) clamp(18px, 2.29vw + 9px, 40px) clamp(28px, 1.52vw + 22px, 44px); }
  .route--feedback > .cta-row { margin-top: clamp(24px, 1.14vw + 20px, 36px); }   /* the drawing's card: the link centred under the steps */

  .route--email { display: grid; justify-items: center; gap: 14px; padding: 32px 24px; }
  .route__icon { width: 44px; height: 44px; fill: none; stroke: var(--c-red); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
  .route--email .cta-row { margin-top: 0; }
  @media (min-width: 768px) {
    .route--email { grid-template-columns: auto 1fr auto; align-items: center; justify-items: start; gap: 24px; padding: 28px 40px; text-align: left; }
    .route--email .route__copy p { margin-inline: 0; }
  }

  /* Compact (.routes--pair: the hub): two cards side by side from 768, left-aligned, each with its icon, title and
     line; Send Feedback's then its three steps (the list only, no drawing) and the link to its step-by-step page,
     e-mail's the address, right under its line. From 768 to 1023 the titles keep two lines' height, so the two
     lines start level ("Send feedback from the app" wraps there, "Email support" doesn't). */
  @media (min-width: 768px) { .routes--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .routes--pair .route,
  .routes--pair .route--email { display: flex; flex-direction: column; align-items: flex-start; gap: 0; padding: clamp(28px, 1.14vw + 24px, 40px) clamp(24px, 1.14vw + 20px, 40px); text-align: left; }
  .routes--pair .route__icon { margin-bottom: 18px; }
  .routes--pair .route__copy p { margin-inline: 0; }
  .routes--pair .route .cta-row { justify-content: flex-start; margin-top: 0; padding-top: var(--gap-sub-cta); }   /* each link right under its line */
  @media (min-width: 768px) and (max-width: 1023px) { .routes--pair .route__title { min-height: 2.3em; } }
  .routes--pair .steps__list { width: auto; max-width: none; margin: 22px 0 0; padding: 0; grid-template-columns: none; gap: 14px; text-align: left; }
  .routes--pair .steps__list > li { padding: 0 0 0 38px; text-wrap: pretty; }
  .routes--pair .steps__list > li::before { position: absolute; margin: 0; }

  /* Send Feedback, step by step: the numbered list and the drawing, whose red 1 2 3 match it.
     Phones: the list left-aligned, then the stacked drawing at its own 360 px width. From 768 the drawing
     runs the card's width and each step sits under its phone: the phones are centred at 17.5 %, 50 % and
     82.5 % of the drawing, 32.5 % apart. */
  .steps { display: flex; flex-direction: column; gap: 24px; margin: clamp(24px, 1.14vw + 20px, 36px) 0 0; }
  .steps picture { order: 1; }
  .steps__art { display: block; width: 100%; max-width: 360px; height: auto; margin-inline: auto; }
  .steps__list {
    counter-reset: step; display: grid; gap: 14px; max-width: 26em; margin: 0 auto; padding: 0; list-style: none;
    text-align: left; font-size: var(--t-body); line-height: 1.45; color: var(--c-muted);
  }
  .steps__list > li { counter-increment: step; position: relative; min-height: 26px; padding-left: 38px; }
  .steps__list > li::before {
    content: counter(step); position: absolute; top: 0; left: 0; display: grid; place-items: center; width: 26px; height: 26px;
    border-radius: 50%; background: var(--c-red); color: var(--c-on-red); font-family: var(--f-display); font-weight: 700; font-size: 16px; line-height: 1;
  }
  .steps__list strong { font-weight: 500; color: var(--c-ink); }
  .steps__note { display: block; margin-top: 4px; font-size: var(--t-small); line-height: 1.45; }
  @media (min-width: 768px) {
    .steps { gap: 12px; }
    .steps picture { order: 0; }
    .steps__art { max-width: 1000px; }
    .steps__list { grid-template-columns: repeat(3, 1fr); gap: 0; max-width: 1000px; width: 100%; padding-inline: 1.25%; text-align: center; }
    .steps__list > li { padding-inline: 12px; text-wrap: balance; }
    .steps__list > li::before { position: static; margin: 0 auto 10px; }
  }

  /* ---------- Send feedback from the app (/support/send-feedback: support/send-feedback.twig) ----------
     The white hero (eyebrow, H1, the line, the app chooser), then one band per app: its name, a card with the drawing
     and each step under its device, then what happens next, three notes, e-mail, and the app's Support page.
     Without JavaScript the chooser is four separate tiles (links, nothing "selected") and the four guides follow one
     another, grey and white in turn (their cards the other colour), the last white over the grey footer.
     assets/js/pages/send-feedback.js (.is-tabbed): the tiles sit in the segmented control's track, the chosen app is
     the white thumb, and only its guide shows, white with grey cards (as "Contact us"), so the page still ends on
     white; a hairline parts it from the hero. While TV or Retro is on, one small line under the chooser sends their
     players to e-mail. */
  .fb-hero { padding-top: clamp(44px, 2.67vw + 34px, 72px); padding-bottom: clamp(44px, 1.9vw + 37px, 64px); }   /* as a game page's hero */
  .fb-apps { max-width: 960px; margin: clamp(28px, 1.14vw + 24px, 40px) auto 0; }
  .fb-apps__list {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px;
    margin: 0; padding: 4px; border-radius: 24px; background: var(--c-seg-track); list-style: none;
  }
  @media (min-width: 768px) { .fb-apps__list { grid-template-columns: repeat(4, minmax(0, 1fr)); border-radius: 28px; } }
  /* Without JavaScript: jump links, not a control with nothing chosen */
  .fb-apps:not(.is-tabbed) .fb-apps__list { gap: 10px; padding: 0; background: none; }
  .fb-apps:not(.is-tabbed) .fb-app { background: var(--c-bg); box-shadow: inset 0 0 0 1px var(--c-hairline); }
  .fb-apps:not(.is-tabbed) .fb-app:focus-visible { outline-offset: 2px; }
  .fb-app {
    --icon: clamp(40px, .76vw + 37px, 48px);
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 10px; height: 100%;
    padding: 14px 6px 12px; border-radius: 20px; color: var(--c-ink); text-align: center;
    transition: background-color var(--d-fast) var(--ease), box-shadow var(--d-fast) var(--ease);
  }
  @media (min-width: 768px) { .fb-app { border-radius: 24px; } }
  .fb-app:hover { text-decoration: none; }
  .fb-app:focus-visible { outline-offset: -2px; }   /* inside the track */
  .fb-app__icon { display: block; flex: none; width: var(--icon); height: var(--icon); }
  .fb-app__icon picture { display: contents; }
  .fb-app__icon img { display: block; width: 100%; height: 100%; border-radius: 22.37%; }
  .fb-app__name { font-size: clamp(15px, .38vw + 13.5px, 18px); line-height: 1.15; text-wrap: balance; transition: color var(--d-fast) var(--ease); }
  .fb-app__name > span { display: block; color: var(--c-muted); font-weight: 600; transition: color var(--d-fast) var(--ease); }
  .fb-app:hover .fb-app__name, .fb-app:hover .fb-app__name > span { color: var(--c-red-text); }
  .fb-app[aria-selected="true"] { background: var(--c-bg); box-shadow: var(--shadow-seg); }
  .fb-app[aria-selected="true"] .fb-app__name { color: var(--c-ink); }
  .fb-app[aria-selected="true"] .fb-app__name > span { color: var(--c-muted); }
  @media (max-width: 359px) { .fb-app__name { font-size: 14px; } }

  .fb-guide {
    --fb-bg: var(--c-band); --fb-card: var(--c-bg); background: var(--fb-bg);
    padding-top: clamp(48px, 3.05vw + 36px, 88px); padding-bottom: clamp(56px, 3.05vw + 44px, 96px);   /* as the top, not a whole band's */
  }
  .fb-guides:not(.is-tabbed) .fb-guide--alt,
  .fb-guides.is-tabbed .fb-guide { --fb-bg: var(--c-bg); --fb-card: var(--c-band); }
  .fb-guides.is-tabbed .fb-guide { box-shadow: inset 0 1px 0 var(--c-hairline); }   /* white under the white hero */
  .fb-guide:focus-visible { outline-offset: -6px; }   /* a tab panel takes focus after the tabs */
  .fb-guide > .headline { font-size: var(--t-tile); }   /* a step under the page's H1 */
  .fb-card {
    max-width: 1080px; margin: var(--gap-cta-media) auto 0; border-radius: 28px; background: var(--fb-card);
    padding: clamp(28px, 1.9vw + 21px, 48px) clamp(18px, 2.29vw + 9px, 40px) clamp(24px, 1.52vw + 18px, 40px);
  }
  .fb-card .steps { margin-top: 0; }
  .fb-next {
    max-width: 38em; margin: clamp(24px, 1.14vw + 20px, 36px) auto 0; padding-top: clamp(20px, .76vw + 17px, 28px); border-top: 1px solid var(--c-hairline);
    font-size: var(--t-body); line-height: 1.5; color: var(--c-muted); text-align: left; text-wrap: pretty;
  }
  .fb-next strong { font-weight: 500; color: var(--c-ink); }
  @media (min-width: 768px) { .fb-next { text-align: center; } }

  /* Three notes, as plain columns on the band (a red line icon, the title, the text): one column up to 1023 px */
  .fb-notes { display: grid; gap: 32px clamp(24px, 2.29vw + 15px, 48px); max-width: 1080px; margin: clamp(40px, 1.52vw + 34px, 56px) auto 0; text-align: left; }
  @media (max-width: 1023px) { .fb-notes { max-width: 640px; } }
  @media (min-width: 1024px) { .fb-notes { grid-template-columns: repeat(3, minmax(0, 1fr)); padding-inline: 20px; } }
  .fb-note .icon { display: block; width: 32px; height: 32px; margin-bottom: 14px; fill: none; stroke: var(--c-red); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .fb-note .icon .icon__gap { stroke: var(--fb-bg); stroke-width: 4.5; }   /* the strike's gap, in the band's colour */
  .fb-note__title { font-size: clamp(21px, .38vw + 19.5px, 24px); }
  .fb-note :is(p, ul) { margin: 10px 0 0; font-size: var(--t-body); line-height: 1.5; color: var(--c-muted); text-wrap: pretty; }
  .fb-note ul { padding: 0; list-style: none; }
  .fb-note li { position: relative; padding-left: 18px; }
  .fb-note li + li { margin-top: 4px; }
  .fb-note li::before { content: ""; position: absolute; top: .66em; left: 2px; width: 6px; height: 6px; border-radius: 50%; background: var(--c-hairline); }
  .fb-note strong { font-weight: 500; color: var(--c-ink); }

  /* E-mail: the row card, as under every game's steps; then the app's own Support page */
  .fb-guide .routes { margin-top: clamp(40px, 1.52vw + 34px, 56px); }
  .fb-guide .route { background: var(--fb-card); }
  .fb-guide .route__copy p { max-width: 36em; }
  .fb-guide .route__copy strong { font-weight: 500; color: var(--c-ink); }
  @media (max-width: 767px) {   /* left-aligned, as the notes above it */
    .fb-guide .route--email { justify-items: start; text-align: left; }
    .fb-guide .route--email .route__copy p { margin-inline: 0; }
  }
  @media (min-width: 768px) and (max-width: 1023px) {   /* its longer line keeps the row's width; the address goes under it */
    .fb-guide .route--email { grid-template-columns: auto 1fr; row-gap: 16px; }
    .fb-guide .route--email .cta-row { grid-column: 2; }
  }
  .fb-guide__more { margin-top: clamp(24px, 1.14vw + 20px, 36px); }

  /* While TV or Retro is on: one small line under the chooser, their players to e-mail (only the address a link) */
  .fb-others { max-width: 40em; margin: clamp(20px, .76vw + 17px, 28px) auto 0; font-size: var(--t-small); line-height: 1.45; color: var(--c-muted); text-wrap: pretty; }
  .fb-others a { color: var(--c-red-text); text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }   /* as .prose links */
  .fb-others a:hover { text-decoration-thickness: 2px; }

  /* The chosen guide fades in (none with reduced motion: base.css and below) */
  .fb-guides.is-tabbed .fb-guide { animation: fb-in var(--d-theme) var(--ease); }
  @keyframes fb-in { from { opacity: 0; } to { opacity: 1; } }

  /* ---------- FAQ article: one reading column ---------- */
  .article { padding-top: calc(var(--section-y) * .6); padding-bottom: calc(var(--section-y) * .5); }
  .article__title {
    font-family: var(--f-display); font-weight: 700; font-size: clamp(32px, .76vw + 29px, 40px);
    line-height: 1.1; letter-spacing: -.25px; text-wrap: balance;
  }
  .nobr { white-space: nowrap; }
  .article .eyebrow + .article__title { margin-top: 12px; }
  .article__body { margin-top: 28px; }
  .article__body > :first-child, .article__body h2:first-child, .article__body h3:first-child { margin-top: 0; }
  /* Answers with a scoring table (faq.json "scoring"), footnotes and a formula */
  .article__body table { width: 100%; border-collapse: collapse; font-size: var(--t-body); line-height: 1.4; font-variant-numeric: tabular-nums; }
  .article__body th { padding: 0 0 10px; border-bottom: 1px solid var(--c-ink); font-family: var(--f-text); font-size: var(--t-small); font-weight: 500; text-align: left; color: var(--c-muted); }
  .article__body td { padding: 12px 0; border-bottom: 1px solid var(--c-hairline); vertical-align: top; }
  .article__body :is(th, td):last-child { padding-left: 16px; text-align: right; white-space: nowrap; }
  /* The controller answer's button map (faq.json "game-controller"): actions down, controller families across.
     Every cell left-aligned and short; the action column wraps, the button names never do. Fits 358 px. */
  .article__body .btn-map { font-size: var(--t-small); }
  .article__body .btn-map :is(th, td) { padding: 10px 0 10px 10px; text-align: left; white-space: nowrap; vertical-align: top; }
  .article__body .btn-map :is(th, td):first-child { padding-left: 0; white-space: normal; }
  .article__body .btn-map :is(th, td):last-child { text-align: left; white-space: nowrap; }
  .article__body .btn-map thead th { padding-top: 0; }
  .article__body .btn-map tbody th { font-size: inherit; font-weight: 500; color: var(--c-ink); border-bottom: 1px solid var(--c-hairline); }
  @media (min-width: 768px) { .article__body .btn-map { font-size: var(--t-body); } .article__body .btn-map :is(th, td) { padding-left: 16px; } }
  .article__body .btn-map + ul { margin-top: 20px; }
  .article__body sup { font-size: .65em; }
  .article__body small { display: block; font-size: var(--t-small); line-height: 1.7; color: var(--c-muted); }
  .article__body code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .88em; overflow-wrap: anywhere; }
  .article__body { overflow-wrap: break-word; }   /* long file names (RealSolitaireForClassicMacOS-7.0.0.dmg) wrap on phones */
  /* "Applies to": the games the answer is for, each a plain link (its icon and its underlined name, as the Company
     page's links: no box around a link) that opens the game's page */
  .applies { margin-top: clamp(40px, 1.52vw + 34px, 56px); padding-top: 24px; border-top: 1px solid var(--c-hairline); }
  .applies__list { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 14px 0 0; padding: 0; list-style: none; }
  .applies__game {
    display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0;
    background: none; color: var(--c-ink); font-size: var(--t-small); font-weight: 500; line-height: 1.25;
  }
  .applies__game:hover { text-decoration: none; }
  .applies__name {
    text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; text-decoration-color: var(--c-field-border);
    transition: text-decoration-color var(--d-fast) var(--ease);
  }
  .applies__game:hover .applies__name, .applies__game:focus-visible .applies__name { text-decoration-color: currentColor; }
  .applies__icon { display: block; flex: none; }
  .applies__icon picture { display: contents; }
  .applies__icon img { display: block; width: 28px; height: 28px; border-radius: 22.37%; }
  .applies__game--tv .applies__icon img { width: 40px; height: 24px; border-radius: 12% / 20%; }
  .applies__game--pixel .applies__icon img { border-radius: 0; image-rendering: pixelated; }
  .related { margin-top: clamp(48px, 1.52vw + 42px, 64px); }
  .related .qlist { margin-top: 16px; }
  .related .cta-row { justify-content: flex-start; margin-top: var(--gap-sub-cta); }
  /* The help band stays white: a grey band would merge with the grey footer. After a white answer or
     list, the change from a left-aligned column to a centred stack marks the new section. */
  :is(.article, .page-head) + .help { padding-top: calc(var(--section-y) * .5); }
  .article + .help .headline { font-size: var(--t-tile); }   /* never bigger than the article's H1 */

  /* Reduced motion: the cards don't lift */
  @media (prefers-reduced-motion: reduce) {
    .picker__app:hover, .topic:hover { transform: none; }
    .fb-guides.is-tabbed .fb-guide { animation: none; }
  }

  @media print {
    .support-hero .search-field, .page-head .search-field, .game-hero .search-field, .help .cta-row, .topic__go,
    .switcher, .fb-apps { display: none; }
  }
}