/* PHONE VIEW (20 Oct 2026). Max + Alex picked from the phone gauntlet:
   hero A, Try a Pit Stop B, theory course A, pricing C, comparison B, FAQ B, About B.
   Everything here sits inside max-width: 700px (or is .ph-only), so desktop is untouched.
   Source: Waypoint Website/[C] Phone Gauntlet (2026-10-20)/options/css/ */

/* ==========================================================================
   Waypoint v8 · shared PHONE type scale + spacing baseline (20 Oct 2026)
   Load after demo.css. Everything is inside max-width: 700px, so desktop
   is untouched. Every section option sits on top of this file.

   Five sizes on phone (Plus Jakarta Sans, 400/500/600/800 only):
     40px  display  hero h1 only
     28px  heading  every h2, prices, big figures
     17px  lead     section leads, hero subline, card titles
     16px  body     body copy, buttons, list items, FAQ questions
     13px  small    kickers, badges, small print, meta, labels
   Spacing: section padding 56px top and bottom, 24px from heading block
   to content, 12px from h2 to lead, 20px gutter (unchanged).
   ========================================================================== */

/* helper for phone-only markup added by option snippets */
.ph-only { display: none; }

@media (max-width: 700px) {
  :root {
    --ph-display: 40px;
    --ph-h: 28px;
    --ph-lead: 17px;
    --ph-body: 16px;
    --ph-small: 13px;
    --ph-pad: 56px;
    --ph-gap: 24px;
    --join: 72px;
    --sc-section: var(--ph-pad);
    --sc-t-xs: var(--ph-small);
    --sc-t-sm: var(--ph-small);
    --sc-t-base: var(--ph-body);
    --sc-t-lg: var(--ph-lead);
  }
  .ph-only { display: block; }

  /* roles */
  .h2, .close__title { font-size: var(--ph-h); line-height: 1.1; letter-spacing: -0.03em; }
  .lead, .close__lead, .h9__sub { font-size: var(--ph-lead); line-height: 1.45; }
  .small, .v8-cmp__note, .notice__cmp { font-size: var(--ph-small); line-height: 1.5; }
  .v7-kick, .h9__pill, .v8-post__meta, .price__badge, .foot h3, .foot__base { font-size: var(--ph-small); }
  .v7-kick + .h2 { margin-top: 8px; }
  .v8-head .lead, .v7-pricing__head .lead, .v7-inside__head .lead, .v8-pit .lead { margin-top: 12px; }
  .v7-pricing__head, .v7-inside__head { gap: 0; }
  .btn { font-size: var(--ph-body); }
  .brand { font-size: var(--ph-lead); }

  /* section padding: one rhythm */
  .v8-film, .v8-pit, .v7-inside, .v7-pricing, .v8-why, .v8-blog, .faq { padding-block: var(--ph-pad); }
  /* dark-to-light joins: keep text clear of the colour fade */
  .v8-pit { padding-bottom: calc(var(--ph-pad) + var(--join) * .6); }
  .notice { padding-block: 0 calc(var(--ph-pad) + var(--join) * .5); }
  .close { padding-block: var(--ph-pad) 128px; }
  .foot { padding-top: 40px; }

  /* hero: display size + subline on the lead size */
  .h9__title { font-size: var(--ph-display); }

  /* film: button text on the body size */
  .v8-film__play { font-size: var(--ph-body); }
  .v8-film__play em { font-size: inherit; }

  /* blog: card title on lead, excerpt on small */
  .v8-post b { font-size: var(--ph-lead); }
  .v8-post--all b { font-size: var(--ph-lead); }
  .v8-post__sum { font-size: var(--ph-small); }
  .v8-post__go { font-size: var(--ph-body); }
  .v8-post__allicon { font-size: var(--ph-lead); width: 44px; height: 44px; }
  .v8-blog__row { margin-top: var(--ph-gap); }

  /* FAQ: questions on body size, semibold, tighter rows; 44px+ tap rows */
  .qa summary { font-size: var(--ph-body); font-weight: 600; padding-block: 14px; min-height: 52px; box-sizing: border-box; display: flex; align-items: center; }
  .qa__a { font-size: var(--ph-body); }
  .faq__head { gap: 0; margin-bottom: var(--ph-gap); }
  .faq__head > p:last-child { margin-top: 12px; }
  .faq__head .link { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--ph-body); }

  /* notice + footer small print on the small size */
  .notice__box h2 { font-size: var(--ph-body); }
  .notice__box, .notice__box p { font-size: var(--ph-small); line-height: 1.55; }
  .notice__box .link { display: inline-flex; align-items: center; min-height: 44px; }
  .foot nav a { display: flex; align-items: center; min-height: 44px; font-size: var(--ph-body); }
  .foot nav { gap: 0; }
  .foot__blurb { font-size: var(--ph-body); }

  /* hero chip asterisk: 28px box, and its hit area grows to the whole chip (44px tall) */
  .h9__chips li:first-child { position: relative; }
  .h9__ast { display: inline-grid; place-items: center start; min-width: 16px; min-height: 28px; margin: -6px -4px -6px 1px; }
  .h9__ast::after { content: ""; position: absolute; inset: -7px 0; }

  /* sim format switch: 44px buttons */
  .wp-simformat button { min-height: 44px; font-size: var(--ph-small); }

  /* sticky bar text on the scale */
  .getbar__txt b { font-size: var(--ph-body); }
  .getbar__btn { font-size: var(--ph-body); }
}

/* HERO A · chips smaller so they sit 2 per row, phones pulled up so they show on the
   first screen. Three phones kept. CSS only. */
@media (max-width: 700px) {
  .h9 { min-height: 0; padding-top: calc(var(--bar-h) + 20px); padding-bottom: 0; }
  .h9__pill { font-size: 13px; padding: 4px 10px; }
  .h9__title { margin-top: 12px; }
  .h9__sub { margin-top: 12px; }
  .h9__cta { margin-top: 20px; gap: 12px; flex-wrap: nowrap; }
  .h9__cta .btn--sun { min-height: 48px; flex: 1 1 auto; }
  .h9__cta .appbadge img { height: 48px; }
  .h9__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
  .h9__chips li { font-size: 13px; padding: 6px 10px; line-height: 1.25; white-space: nowrap; }
  .h9__chips li::before { width: 5px; height: 5px; margin-right: 6px; }
  .trio { --w: 150px; margin-top: 8px; }
}

/* TRY A PIT STOP B · the 3 steps become a stepper right above the phone and
   light up as you use the demo (needs pit-B.js). Style switch under the phone. */
@media (max-width: 700px) {
  .v8-pit__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 8px; align-items: stretch; }
  .v8-pit__copy, .v8-bento { display: contents; }
  .v8-pit__copy > :not(.v8-bento), .v8-pit__phone, .v8-bento__fmt { grid-column: 1 / -1; }
  .v8-bento__step { order: 1; margin-top: 24px; display: grid; gap: 6px; justify-items: start; padding: 10px !important; border-radius: 14px !important;
    background: rgba(255,255,255,.06) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1) !important; transition: background-color .2s, box-shadow .2s; }
  .v8-bento__step b { width: 26px; height: 26px; font-size: 13px; background: rgba(255,255,255,.18); color: #fff; }
  .v8-bento__step span { font-size: 13px; font-weight: 600; line-height: 1.3; color: rgba(245,245,247,.7); }
  .v8-bento__step.is-done b { background: var(--teal-400); color: #062722; }
  .v8-bento__step.is-now { background: rgba(255,196,77,.12) !important; box-shadow: inset 0 0 0 1.5px var(--sun) !important; }
  .v8-bento__step.is-now b { background: var(--sun); color: #3A2A00; }
  .v8-bento__step.is-now span { color: #fff; }
  .v8-pit__phone { order: 2; margin-top: 16px; }
  .v8-bento__fmt { order: 3; display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 20px; padding: 0 !important; background: none !important; box-shadow: none !important; }
  .v8-bento__fmt > span { font-size: 13px; }
  .v8-bento .wp-simformat { width: 200px; margin: 0; }
  .v8-pit__foot { order: 4; margin-top: 16px; font-size: 13px; color: rgba(245,245,247,.55); }
}

/* A FULL THEORY COURSE A · 2-column icon + label grid; the one-line details
   fold behind "Show details" (needs inside-A.js). */
@media (max-width: 700px) {
  .v8-tiles { grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 24px; }
  .v8-tiles li { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; column-gap: 10px; row-gap: 2px; padding: 10px; border-radius: 14px; min-height: 60px; }
  .v8-tile__i { grid-row: 1 / span 2; width: 36px; height: 36px; margin: 0; border-radius: 10px; }
  .v8-tile__i svg { width: 20px; height: 20px; }
  .v8-tiles b { font-size: 16px; line-height: 1.2; }
  .v8-tiles small { display: none; font-size: 13px; line-height: 1.3; }
  .v7-inside.is-detail .v8-tiles small { display: block; }
  .v7-inside:not(.is-detail) .v8-tile__i { grid-row: auto; }
  .ins-more { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: 8px; padding: 0; border: 0; background: none; font-family: inherit; font-size: 16px; font-weight: 800; color: var(--teal-800); cursor: pointer; }
  .ins-more::after { content: "+"; }
  .ins-more[aria-expanded="true"]::after { content: "\2212"; }
  .v7-inside .v7-mt { margin-top: 8px; }
}

/* PRICING C · compact stacked rows, no picker. Needs pricing-C.html (one
   shared trial line, phone only). Best value row stays dark green. */
@media (max-width: 700px) {
  .v7-plans { gap: 10px; margin-top: 24px; }
  .v7-plan { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "top amt" "per amt"; column-gap: 12px; row-gap: 4px; align-items: center; padding: 16px 18px; border-radius: 16px; }
  .v7-plan__top { grid-area: top; justify-content: flex-start; gap: 8px; }
  .v7-plan__top b { font-size: 17px; }
  .v7-plan__top .price__badge { font-size: 13px; padding: 2px 8px; border-radius: 6px; }
  .v7-plan__amt { grid-area: amt; margin: 0; font-size: 28px; letter-spacing: -0.03em; text-align: right; }
  .v7-plan__per { grid-area: per; margin: 0; font-size: 13px; line-height: 1.35; }
  .v7-plan__terms { display: none; }
  .pp-trial { margin-top: 12px; font-size: 13px; line-height: 1.5; font-weight: 600; color: var(--ink-soft); }

  .v7-pricing__foot { margin-top: 24px; gap: 20px; }
  .v7-includes { padding: 0; gap: 8px; }
  .v7-includes li { font-size: 16px; font-weight: 600; line-height: 1.35; }
  .v7-pricing__cta { gap: 12px; justify-items: stretch; }
  .v7-pricing__cta .btn { width: 100%; }
  .price__legal { color: #7A8783; }
  .price__legal a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* COMPARISON B · the 5 key rows, then "See all 9 rows" (Apple One pattern).
   Needs compare-B.js. Three columns kept, headers on one baseline. */
@media (max-width: 700px) {
  .v8-cmp { margin-top: 24px; }
  .v8-cmp thead td:first-child { width: 40%; }
  .v8-cmp thead th { width: 20%; }
  .v8-cmp thead th, .v8-cmp thead .v8-cmp__us { vertical-align: bottom; padding: 12px 2px 10px; font-size: 13px; line-height: 1.2; letter-spacing: 0; }
  .v8-cmp__logo { width: 26px; height: 26px; margin-bottom: 6px; }
  .v8-cmp tbody th { font-size: 13px; font-weight: 600; line-height: 1.3; padding: 8px 6px 8px 0; height: 56px; }
  .v8-cmp tbody .v8-cmp__key th { font-weight: 800; }
  .v8-cmp tbody td { padding: 8px 2px; }
  .v8-y, .v8-n, .v8-cmp__us .v8-y, .v8-cmp td:not(.v8-cmp__us) .v8-y { width: 24px; height: 24px; }
  .v8-cmp__us .v8-y svg { width: 14px; height: 14px; }
  .v8-s, td > .v8-s:only-child { font-size: 13px; font-weight: 600; line-height: 1.25; }
  /* rows with a status under a tick: every cell starts at the same line */
  .v8-cmp tbody tr:has(.v8-y + .v8-s) td { vertical-align: top; padding-top: 12px; }
  .v8-cmp tbody tr:last-child .v8-cmp__us, .v8-cmp tbody tr.cmp-last .v8-cmp__us { padding-bottom: 8px; border-radius: 0 0 20px 20px; }
  /* fold rows 6 to 9 */
  .v8-cmp:not(.is-all) tbody tr:nth-child(n+6) { display: none; }
  .v8-cmp:not(.is-all) tbody tr:nth-child(5) th, .v8-cmp:not(.is-all) tbody tr:nth-child(5) td { border-bottom: 0; }
  .v8-cmp:not(.is-all) tbody tr:nth-child(5) .v8-cmp__us { border-radius: 0 0 20px 20px; }
  .cmp-more { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px; margin-top: 12px; border: 0; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font-family: inherit; font-size: 16px; font-weight: 800; color: var(--teal-800); cursor: pointer; }
  .cmp-more::after { content: "+"; font-size: 17px; }
  .cmp-more[aria-expanded="true"]::after { content: "\2212"; }
  /* cost cards: side by side, figures on the 28px heading size */
  .v8-why .v8-fail { position: relative; grid-template-columns: 1fr 1fr; align-items: stretch; gap: 10px; margin-top: 28px; }
  .v8-why .v8-fail__card { display: grid; align-content: start; gap: 6px; padding: 16px 14px; border-radius: 16px; }
  .v8-why .v8-fail__amt { font-size: 28px; letter-spacing: -0.03em; }
  .v8-why .v8-fail__card p:last-child { font-size: 13px; line-height: 1.4; }
  .v8-why .v8-fail__label { font-size: 13px; letter-spacing: .04em; line-height: 1.3; margin-bottom: 2px; }
  .v8-why .v8-fail__vs { position: absolute; left: 50%; top: 22px; translate: -50% 0; z-index: 1; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); font-size: 13px; }
}

/* FAQ B · first 4 questions, then "Show all 8 questions" (needs faq-B.js). */
@media (max-width: 700px) {
  .faq__grid { gap: 0; }
  .qa summary { padding-right: 36px; line-height: 1.3; }
  .qa:not(.is-all) details:nth-of-type(n+5) { display: none; }
  .faq-more { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px; margin-top: 16px; border: 0; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font-family: inherit; font-size: 16px; font-weight: 800; color: var(--teal-800); cursor: pointer; }
  .faq-more::after { content: "+"; }
  .faq-more[aria-expanded="true"]::after { content: "\2212"; }
}

/* ABOUT OUR QUESTIONS B · tap to expand. The heading and the start of the
   first paragraph show; "Read the full notice" opens the rest in place
   (needs about-B.js). Wording untouched, nothing removed from the page. */
@media (max-width: 700px) {
  .notice__box { padding: 18px 18px 8px; gap: 10px; border-radius: 18px; }
  .notice__box p, .notice__ogl { font-size: 13px; line-height: 1.5; }
  .notice:not(.is-open) .notice__box > p:first-of-type { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
  .notice:not(.is-open) .notice__box > p:not(:first-of-type), .notice:not(.is-open) .notice__cmp { display: none; }
  .ntc-more { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0; border: 0; background: none; font-family: inherit; font-size: 16px; font-weight: 800; color: var(--teal-800); cursor: pointer; }
  .ntc-more::after { content: "+"; }
  .ntc-more[aria-expanded="true"]::after { content: "\2212"; }
  .notice__cmp { font-size: 13px; }
}