/* GoTo Player inner pages: Download, Support, Terms of Use, Privacy Policy and "Page not found" (11 Nov 2026).
   Loaded after /assets/home-b.css. That file gives the tokens, the header and footer, buttons, cards, the ticket,
   the FAQ boxes, the device frames and the notice. This file adds only what the inner pages need on top:
   the page title block, the jump list, numbered steps, reading text, picture strips, the legal layout,
   the "About GoTo Player" card, the 404 page.
   Phone first: the base rules are for 360 px, then 600 px and 900 px. No fixed heights around text.
   When this file changes, raise the number in /assets/pages-b.css?v=N on all five inner pages at once. */

:root {
  --measure: 37rem;     /* reading column: about 70 characters a line at 17 px */
  --read: #cfd7d3;      /* long legal text: a little brighter than --muted */
  --gutter: 18px;       /* the page gutter of .wrap */
}

/* ---------- Page title block (Download, Support, 404) ---------- */
.page-hero { padding: 24px 0 32px; background:
  radial-gradient(92% 62% at 50% 0%, rgba(200, 245, 106, .15), transparent 72%),
  linear-gradient(180deg, var(--deep), var(--bg) 78%); }
.page-head { display: flex; flex-direction: column; align-items: center; width: 100%; min-width: 0; text-align: center; }
.page-head .lead a { overflow-wrap: anywhere; }

/* Small grey label in capitals: "On this page" */
.label { color: var(--muted); font-size: .8125rem; font-weight: 600; letter-spacing: .08em; line-height: 1.4; text-transform: uppercase; }

/* ---------- Jump list: round links to the parts of the page ---------- */
.jump { width: 100%; min-width: 0; margin-top: 24px; text-align: center; }
.jump ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 44rem; margin: 8px auto 0; }
.jump li { min-width: 0; }
.jump a { display: inline-flex; align-items: center; min-height: 44px; padding: 4px 16px; border: 1px solid var(--border-strong); border-radius: 999px; background: rgba(255, 255, 255, .03); color: var(--text); font-size: .9375rem; font-weight: 600; line-height: 1.25; text-align: center; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.jump a:active { border-color: var(--accent); background: rgba(200, 245, 106, .1); }

/* ---------- Download page: the top block (title, ticket, Android button) ---------- */
.dl-hero { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 24px; }
.dl-hero .jump { order: 3; margin-top: 0; }   /* on phones the ticket comes before the jump list */
.get-stack { display: flex; flex-direction: column; align-items: center; gap: 24px; width: 100%; max-width: 440px; min-width: 0; }
.get-stack .ticket { margin-top: 0; }
.apk { width: 100%; min-width: 0; }
.apk-box { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; min-width: 0; text-align: center; }
.apk-label { color: var(--muted); font-size: .9375rem; }
/* The script of the home page marks this visitor's device with the words "For this device". The ticket stays first. */
.apk-box.is-mine { position: relative; padding: 24px 16px 16px; border: 1px solid var(--lime-edge); border-radius: var(--radius); background: rgba(200, 245, 106, .06); }

/* ---------- Two columns from 900 px: heading and notes on one side, steps or pictures on the other ---------- */
.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.split-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; min-width: 0; }
.split-main, .split-foot { min-width: 0; }
.split .section-head { margin-bottom: 0; }
.check-note { margin-top: 12px; color: var(--muted); font-size: 1rem; line-height: 1.5; }

/* ---------- Numbered steps: one card per step, the number in a lime circle ---------- */
.howto { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; width: 100%; max-width: 44rem; margin: 0 auto; counter-reset: howto; }
.howto > li { position: relative; padding: 16px 16px 16px 60px; color: var(--muted); overflow-wrap: anywhere; counter-increment: howto; }
.howto > li::before { content: counter(howto); position: absolute; top: 13px; left: 16px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font: 700 1rem/1 var(--display); }
.howto-sub { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 12px 0 0 -44px; padding-left: 12px; border-left: 2px solid var(--border); font-size: 1rem; line-height: 1.5; }
.after { width: 100%; max-width: 44rem; margin: 0 auto; color: var(--muted); }
.after a { overflow-wrap: anywhere; }
.split-main > .after { margin-top: 16px; }

/* ---------- Pictures: phone screens in a thin frame ---------- */
.shots-fig { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 12px; min-width: 0; }
.shots { display: flex; align-items: flex-start; justify-content: center; gap: 12px; width: 100%; min-width: 0; }
.shot { flex: 0 1 200px; min-width: 0; padding: 3px; border-radius: 20px; background: #1c2327; box-shadow: 0 0 0 1px #3a454b, 0 14px 28px rgba(0, 0, 0, .55); }
.shot img { display: block; width: 100%; border-radius: 17px; }
.shots-fig figcaption { text-align: center; }
/* A strip of screens: swipe sideways on phones, one centred row from 600 px */
.strip { display: flex; align-items: flex-start; gap: 12px; min-width: 0; margin: 24px calc(-1 * var(--gutter)) 0; padding: 4px var(--gutter) 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding: 0 var(--gutter); -webkit-overflow-scrolling: touch; }
.strip .shot { flex: 0 0 44%; max-width: 200px; box-shadow: 0 0 0 1px #3a454b; scroll-snap-align: start; }

/* ---------- Download page: iPhone and Windows cards ---------- */
.devices { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.devices .app { scroll-margin-top: 16px; }
.devices .store-badge { align-self: center; margin-top: auto; }   /* buttons are centred on phones */
.devices .app p a { overflow-wrap: anywhere; }

/* ---------- Reading text: 17 px, line height 1.6, about 70 characters a line ---------- */
.prose { width: 100%; max-width: var(--measure); margin-left: auto; margin-right: auto; color: var(--muted); font-size: 1.0625rem; line-height: 1.6; }
.prose p + p { margin-top: 12px; }
.prose a { overflow-wrap: anywhere; }
.prose-gap { margin-top: 24px; }
.center-line { margin-top: 16px; color: var(--muted); text-align: center; text-wrap: balance; }

/* ---------- Support page: groups of answers ---------- */
.help { scroll-margin-top: 8px; }
.help + .help { margin-top: 40px; }
.help-head { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; margin-bottom: 16px; text-align: center; }
.help-head h2 { font-size: 1.5rem; line-height: 1.2; }
.kicker { display: block; margin-bottom: 4px; color: var(--accent); font: 600 .8125rem/1.4 var(--body); letter-spacing: .08em; text-transform: uppercase; }
.help-text { max-width: 42rem; margin: 0 auto; padding: 16px; color: var(--muted); }
.help-text a { overflow-wrap: anywhere; }

/* ---------- Terms and Privacy: a narrow reading column ---------- */
.legal-bg { background:
  radial-gradient(92% 300px at 50% 0, rgba(200, 245, 106, .14), transparent 72%),
  linear-gradient(180deg, var(--deep), var(--bg) 420px); }
/* <main class="wrap legal"> holds, in this order: the title block, the jump list (a closed box for phones and a side list
   for laptops), the legal text, the "About GoTo Player" card. Below 900 px they stand in one centred column. */
.legal { display: grid; grid-template-columns: minmax(0, var(--measure)); justify-content: center; padding-bottom: 64px; }
.legal > * { min-width: 0; }
.doc-head { padding: 24px 0; text-align: center; }
.doc-head h1 { margin-left: auto; margin-right: auto; }
.doc-head .date { margin-top: 8px; color: var(--muted); font-size: .9375rem; line-height: 1.45; text-wrap: balance; }   /* centred on phones: no last line of one word */
.doc-head .notice { margin: 16px auto 0; }
.doc-body { color: var(--read); font-size: 1.0625rem; line-height: 1.6; overflow-wrap: break-word; }
.doc-body h2 { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--border); color: var(--text); font-size: 1.3125rem; line-height: 1.25; letter-spacing: -.01em; }
.doc-body h2:first-child { margin-top: 24px; padding-top: 0; border-top: 0; }
.doc-body h2 + p, .doc-body h2 + ul, .doc-body p + p, .doc-body p + ul, .doc-body ul + p { margin-top: 12px; }
.doc-body ul { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; padding-left: 1.25rem; list-style: disc; }
.doc-body li { padding-left: 4px; }
.doc-body li::marker { color: var(--accent); }
.doc-body a { overflow-wrap: anywhere; }
.doc-body em { color: var(--text); }
.doc-body code { padding: 1px 6px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-2); color: var(--text); font: .875em/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow-wrap: anywhere; }
.doc-body .doc-foot { margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--border); color: var(--muted); font-size: .875rem; line-height: 1.5; }

/* The jump list of a legal page stands inside <main>, between the title block and the text. It is made only from
   the headings of the text. Below 900 px it is one closed box; from 900 px it is a list at the side.
   It is in the page twice; one of the two is always display: none. */
.toc-fold .more { margin-top: 0; }
.toc-side { display: none; }
.toc-list { display: grid; grid-template-columns: minmax(0, 1fr); padding: 0 8px 8px; }
.toc-list a { display: flex; align-items: center; min-height: 44px; padding: 8px; border-radius: 8px; color: var(--read); font-size: 1rem; line-height: 1.35; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.toc-list li + li { border-top: 1px solid var(--border); }
.toc-list a:active { background: rgba(200, 245, 106, .1); color: var(--text); }
.toc-list a:focus-visible { outline-offset: -2px; }

/* ---------- "About GoTo Player" card: who makes the app, where else to find it, how to ask (Support, Terms, Privacy) ---------- */
.about { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 16px; color: var(--muted); font-size: 1rem; line-height: 1.55; text-align: left; }
.about h2 { color: var(--text); font-size: 1.25rem; line-height: 1.25; letter-spacing: -.01em; }
.about a { overflow-wrap: anywhere; }
/* Support: the card stands between the contact band and the notice, as wide as the notice */
.about-wrap { background: var(--deep); }
.about-wrap .about { max-width: 36rem; margin: 0 auto; }
/* Terms and Privacy: the card closes the page, in its own frame, clearly apart from the legal text */
.legal > .about { margin-top: 48px; }
/* Four small app pictures in one row, all the same height: each frame grows by its picture's width divided by its height */
.about-shots { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.about-shot { flex: 1.7778 1 0%; min-width: 0; overflow: hidden; border-radius: 6px; box-shadow: 0 0 0 1px #3a454b; }   /* 640 x 360 */
.about-shot.is-iphone { flex-grow: .4615; }    /* 480 x 1040 */
.about-shot.is-android { flex-grow: .5627; }   /* 480 x 853 */
.about-shot img { display: block; width: 100%; }
.about-get { display: inline-flex; align-items: center; min-height: 44px; margin: -6px 0; font-weight: 600; }

/* ---------- Page not found ---------- */
/* Phones: tight spacing, so the title, the four buttons, the TV code and the email fit one screen (at most about 630 px tall at 393 px wide). */
.lost { padding: 24px 0 48px; }
.lost h1 { margin-top: 0; }   /* no pill above the title on this page */
.lost-btns { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; width: 100%; max-width: 420px; margin-top: 24px; }
.lost-btns .btn { width: 100%; }
.lost-code { width: 100%; max-width: 420px; margin-top: 16px; padding: 8px 16px; border: 2px dashed rgba(169, 179, 184, .5); border-radius: var(--radius-sm); color: var(--muted); text-wrap: balance; }
.lost-code .code { font: 700 1.25rem/1.2 var(--display); letter-spacing: .04em; white-space: nowrap; }
.lost-mail { display: inline-flex; align-items: center; min-height: 44px; margin-top: 4px; overflow-wrap: anywhere; }

/* ---------- From 600 px ---------- */
@media (min-width: 600px) {
  .page-hero { padding: 48px 0; }
  .jump { margin-top: 32px; }
  .dl-hero { gap: 32px; }
  .split, .split-head { gap: 32px; }
  .howto > li { padding: 20px 20px 20px 68px; }
  .howto > li::before { top: 17px; left: 20px; }
  .howto-sub { margin-left: 0; }
  .shots { gap: 16px; }
  .strip { justify-content: center; gap: 16px; margin-left: 0; margin-right: 0; padding: 4px 0 0; overflow: visible; }
  .strip .shot { flex: 0 1 180px; box-shadow: 0 0 0 1px #3a454b, 0 14px 28px rgba(0, 0, 0, .55); }
  .devices { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .devices .store-badge { align-self: flex-start; }
  .help + .help { margin-top: 48px; }
  .help-text { padding: 24px; }
  .doc-head { padding: 40px 0 32px; }
  .doc-body h2 { font-size: 1.5rem; }
  .legal { padding-bottom: 80px; }
  .about { padding: 24px; }
  .about-shots { gap: 12px; }
  .lost { padding: 64px 0 80px; }
  .lost-btns { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 560px; }
  .lost-code { max-width: 560px; margin-top: 24px; padding: 12px 16px; }
  .lost-mail { margin-top: 8px; }
}

/* ---------- From 900 px ---------- */
@media (min-width: 900px) {
  .page-hero { padding: 64px 0; }

  /* Download: title and jump list on the left, ticket and Android button on the right */
  .dl-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); column-gap: 64px; row-gap: 32px; justify-items: stretch; }
  .dl-hero .page-head { grid-column: 1; grid-row: 1; align-self: end; align-items: flex-start; text-align: left; }
  .dl-hero .jump { grid-column: 1; grid-row: 2; align-self: start; order: 0; text-align: left; }
  .dl-hero .jump ul { justify-content: flex-start; margin-left: 0; }
  .dl-hero .get-stack { grid-column: 2; grid-row: 1 / span 2; align-self: center; }

  .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto 1fr; column-gap: 64px; row-gap: 24px; align-items: start; }
  .split-head { grid-column: 1; grid-row: 1; gap: 24px; }
  .split-main { grid-column: 2; grid-row: 1 / span 2; }
  .split-foot { grid-column: 1; grid-row: 2; }
  .split .section-head { max-width: none; margin-left: 0; text-align: left; }
  .split .check-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .split .howto, .split .after { max-width: none; }
  /* the other way round: steps on the left, pictures on the right */
  .split-flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .split-flip .split-main { grid-column: 1; grid-row: 2; }
  .split-flip .split-foot { grid-column: 2; grid-row: 1 / span 2; align-self: center; }

  .devices { max-width: 56rem; margin: 0 auto; }

  /* Support: the group title on the left, its answers on the right */
  .help { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 64px; align-items: start; }   /* answers at most 616 px wide: about 70 characters a line */
  .help-head { align-items: flex-start; margin-bottom: 0; text-align: left; }
  .help-head h2 { font-size: 1.75rem; }
  .help .faq { grid-template-columns: minmax(0, 1fr); gap: 8px; max-width: none; margin: 0; }
  .help-text { max-width: none; margin: 0; }
  .help + .help { margin-top: 56px; padding-top: 56px; border-top: 1px solid var(--border); }

  /* Terms and Privacy: jump list at the side, reading column beside it, title on the left */
  .legal { grid-template-columns: 232px minmax(0, var(--measure)); column-gap: 64px; align-items: start; padding-bottom: 96px; }
  .legal > * { grid-column: 2; }
  .toc-fold { display: none; }
  /* the side list covers all three rows of the text column (title, text, card), so it stays in view down to the end */
  .legal > .toc-side { display: block; grid-column: 1; grid-row: 1 / span 3; position: sticky; top: calc(var(--header) + 24px); max-height: calc(100vh - var(--header) - 48px); margin-top: 56px; overflow-y: auto; }
  .toc-side .toc-list { margin-top: 8px; padding: 0; border-left: 1px solid var(--border); }
  .toc-side .toc-list li + li { border-top: 0; }
  .toc-side .toc-list a { padding: 8px 12px; border-radius: 0 8px 8px 0; color: var(--muted); font-size: .9375rem; }
  .doc-head { padding: 40px 0 8px; text-align: left; }
  .doc-head h1 { margin-left: 0; }
  .doc-head .notice { margin-left: 0; text-align: left; }
  .doc-body h2:first-child { margin-top: 32px; }
}

/* ---------- Hover (mouse only) ---------- */
@media (hover: hover) {
  .jump a:hover { border-color: var(--accent); background: rgba(200, 245, 106, .07); }
  .toc-list a:hover { background: rgba(200, 245, 106, .07); color: var(--text); }
}

/* ---------- Motion: the same small rise as the home page, only for people who have not asked for less ---------- */
@media (prefers-reduced-motion: no-preference) {
  .jump a, .toc-list a { transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
  .page-head, .doc-head { animation: rise .5s cubic-bezier(.2, .7, .2, 1) both; }
  .get-stack { animation: rise .6s cubic-bezier(.2, .7, .2, 1) .08s both; }
}