/* Home on phones (12 Oct 2026, redesign): How it works is one full frame, the desktop figure rebuilt from its own
   tiles with one word per tile. Nothing green but the proceed state. */
@media (max-width:899px) {
  #how.platform-overview { min-height:var(--m-full); box-sizing:border-box; display:flex; flex-direction:column; padding:28px var(--m-pad) 28px !important; }
  #how .scroll-story, #how .story-options { display:none !important; }
  #how .m-gov { flex:1; display:flex; flex-direction:column; }
  #how .m-gov-title { margin:0 0 6px; font-weight:600; font-size:30px; line-height:1.05; letter-spacing:-.03em; color:var(--m-ink); text-align:center; }
  .m-fig { flex:1; display:flex; flex-direction:column; justify-content:space-between; }
  .m-fig ul { list-style:none; margin:0; padding:0; }
  .m-fig-label { margin:0; font-weight:500; font-size:14px; line-height:1.2; color:var(--m-ink); text-align:center; }
  .m-piece { display:block; width:100%; height:auto; overflow:hidden; }
  .m-fig-inputs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2px 12px; margin-top:2px; }
  .m-fig-inputs li { text-align:center; }
  .m-fig-inputs span, .m-fig-domains span { display:block; margin-top:-2px; font-weight:500; font-size:14px; line-height:1.2; color:var(--m-ink); }
  .m-fig-link { width:2px; height:18px; margin:0 auto; background:var(--m-ink); }
  .m-fig-layer { min-height:196px; box-sizing:border-box; display:flex; flex-direction:column; align-items:center; justify-content:space-between; gap:10px; padding:18px 16px 14px; background:#18231e; color:#fff; text-align:center; }
  .m-fig-logo { display:block; height:13px; width:auto; filter:brightness(0) invert(1); }
  .m-fig-layer-title { margin:0; font-weight:600; font-size:20px; line-height:1.15; letter-spacing:.14em; text-transform:uppercase; color:#fff; }
  .m-fig-domains { display:flex; flex-wrap:wrap; justify-content:center; gap:4px 14px; max-width:250px; }
  .m-fig-domains li { font-weight:500; font-size:14px; line-height:1.3; color:#8ff5c4; }
  .m-fig-powered { display:inline-flex; align-items:center; gap:5px; margin:0; font-size:11px; line-height:1; color:#b8c5bc; }
  .m-fig-powered img { height:11px; width:auto; }
  .m-fig-outcomes { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 12px; margin-top:2px; }
  .m-fig-outcomes li { text-align:center; }
  .m-fig-outcomes span { display:block; margin-top:-2px; font-weight:600; font-size:18px; line-height:1.2; letter-spacing:-.01em; }
  .m-fig-outcomes .m-ok span { color:var(--m-green); }
  .m-fig-outcomes .m-no span { color:#a8231c; }
  .m-fig-outcomes .m-hold span { color:var(--hold); }
  .m-fig-inputs .m-piece { max-width:112px; margin:0 auto; }
  .m-fig-outcomes .m-piece { max-width:120px; margin:0 auto; }
  @media (max-height:700px) { .m-fig-inputs .m-piece { max-width:84px; } .m-fig-outcomes .m-piece { max-width:96px; } .m-fig-link { height:12px; } }
}

/* Film replay: 44px tap area; finder ranking scrolls into view on phones. */
@media (max-width:899px) {
  #film .film-replay::after { content:""; position:absolute; inset:-12px -12px; }
  #finder-company { scroll-margin-top:72px; }
}


/* The open verifier on phones: the same dark frame, centred, the wordmark at 60vw max. */
@media (max-width:899px) {
  #open.open-verifier { background:#0c0f0e !important; box-shadow:0 0 0 100vmax #0c0f0e; clip-path:inset(0 -100vmax); min-height:50svh; box-sizing:border-box; justify-content:center; text-align:center; }
  #open.open-verifier h2, #open.open-verifier .ov-line, #open.open-verifier .open-links a, #open.open-verifier .open-links a span { color:#e4ebe7 !important; }
  /* the wordmark is the exhibit: full measure, then the title, the line and two equal 56px bars (12 Oct, air under 40%) */
  #open .ov-mark { width:170px; margin:0 auto; }
  #open.open-verifier h2 { margin-top:24px; font-size:30px !important; }
  #open.open-verifier .ov-line { margin:16px auto 0; max-width:none; font-size:16px !important; line-height:1.5; text-wrap:balance; }
  #open.open-verifier .ov-line .m-nb { white-space:nowrap; } /* phones only: balance kept splitting re-checked at the hyphen */
  main #open.open-verifier .open-links { display:flex; flex-direction:column; align-items:stretch; width:100% !important; max-width:none !important; align-self:stretch; gap:12px; margin-top:28px; }
  #open.open-verifier .open-links a { display:flex !important; width:100% !important; max-width:none; margin:0 !important; padding:0 16px !important; justify-content:center !important; align-items:center; gap:10px; min-height:56px; box-sizing:border-box; border:1px solid rgba(228,235,231,.55); font-size:17px; font-weight:600; text-decoration:none; background-image:none; }
  @media (max-height:700px) { #open.open-verifier h2 { margin-top:32px; } main #open.open-verifier .open-links { margin-top:32px; } }
}

/* The autonomy ladder: one 24px gutter on phones (the .wrap inside the section doubled it to 48px and broke the title). */
@media (max-width:899px) { .l13 .l13-pin { padding-inline:0; } }

/* The autonomy ladder on short phones (12 Oct, Tab 8): six tiers fit one frame. Below 820px of height the lede
   goes (the title and the ink base carry the claim) and the tiers tighten; below 700px the marks and padding tighten again.
   Type stays at the floor: tier names 20px, lines 14px. */
@media (max-width:899px) and (max-height:820px) {
  .l13 { padding:20px var(--m-pad) 20px !important; }
  .l13-lede { display:none; }
  .pz { margin-top:14px; gap:2px; }
  .pz-tier { padding:5px 10px; gap:2px; }
  .pz .mk { height:22px; width:22px; } .pz .mk-wide { height:16px; max-width:58px; }
}
@media (max-width:899px) and (max-height:700px) {
  .l13 { padding:12px var(--m-pad) 12px !important; }
  .pz { margin-top:10px; }
  .pz-tier { padding:3px 10px; gap:1px; }
  .pz-tier b { font-size:20px; }
  .pz .mk { height:20px; width:20px; } .pz .mk-wide { height:16px; max-width:58px; }
  .pz-power, .pz-diff { line-height:1.15; }
  .pz-mark { width:130px; margin:0; }
}

/* frame 3, Max's "Who checks the work?" table (13 Oct 2026). Phones get one frame: the two bands and five levels, each
   with what checks the work. The examples and the question labels stay on desktop. */
@media (max-width:899px) {
  #platform.ladder-frame { min-height:var(--m-full); box-sizing:border-box; display:flex; flex-direction:column; justify-content:center; padding:40px var(--m-pad) 16px !important; margin:0; } /* +24px on top: the Governed cell's own padding sits under the last line */
  #platform .check-story { width:100%; }
  #platform .sae .check-title { text-align:left; font-size:30px; line-height:1.05; letter-spacing:-.03em; }
  #platform .sae .tbl-lead { margin-top:8px; font-size:16px; line-height:1.35; }
  #platform .sae .tbl-m { margin-top:14px; }
  #platform .sae .tbl-m .m-q, #platform .sae .tbl-m li .m-q ~ .m-q, #platform .sae .tbl-m li p:last-child, #platform .sae .tbl-m .wm-row { display:none; }
  #platform .sae .m-bandhead { padding:10px 14px; margin-top:8px; border-radius:4px; }
  #platform .sae .m-bandhead p { margin:2px 0 0; font-size:15px; line-height:1.3; }
  #platform .sae .tbl-m li { display:grid; grid-template-columns:112px 1fr; gap:10px; align-items:baseline; padding:9px 14px; margin-top:4px; }
  #platform .sae .tbl-m b { margin:0; font-size:18px; line-height:1.2; }
  #platform .sae .tbl-m li p { margin:0; font-size:15px; line-height:1.3; }
}
@media (max-width:899px) and (max-height:700px) {
  #platform.ladder-frame { padding:14px var(--m-pad) !important; }
  #platform .sae .m-bandhead p { display:none; }
  #platform .sae .tbl-m li { padding:7px 14px; }
}

/* draft15 (13 Oct 2026): the expense frame carries the allowance beside the miss, the fine line as one sentence
   and the five rule checks behind one tap. Verdict and total share a row so the frame still fits one screen. */
@media (max-width:899px) {
  main #check.m-screen { padding:40px var(--m-pad) 40px !important; }
  #check .m-claim { margin-top:24px; }
  #check .m-attempts { margin-top:16px; }
  #check .m-attempt { grid-template-columns:1fr auto; grid-template-areas:"n n" "v t" "w w"; row-gap:2px; padding:14px 0; }
  #check .m-att-n { grid-area:n; }
  #check .m-attempt b { grid-area:v; font-size:40px; }
  #check .m-att-total { grid-area:t; align-self:baseline; }
  #check .m-att-why { grid-area:w; margin-top:4px; font-size:17px; line-height:1.35; text-wrap:balance; }
  #check .m-fine-line { width:100%; max-width:none; margin:14px 0 0; font-size:14px; line-height:1.4; color:var(--m-ink); text-align:left; }
  #check .m-checks { width:100%; margin-top:12px; border-top:2px solid var(--m-ink); border-bottom:1px solid var(--line); text-align:left; }
  #check .m-checks summary { display:flex; align-items:center; justify-content:space-between; min-height:48px; cursor:pointer; list-style:none; font-weight:600; font-size:17px; line-height:1.3; color:var(--m-ink); }
  #check .m-checks summary::-webkit-details-marker { display:none; }
  #check .m-checks summary::after { content:"+"; font-size:19px; line-height:1; }
  #check .m-checks[open] summary::after { content:"\2212"; }
  #check .m-checks table { width:100%; margin:0 0 10px; border-collapse:collapse; font-size:16px; line-height:1.3; color:var(--m-ink); }
  #check .m-checks th, #check .m-checks td { padding:8px 0; border-top:1px solid var(--line); text-align:left; font-weight:400; }
  #check .m-checks thead th { padding-top:0; border-top:0; font-size:14px; font-weight:500; }
  #check .m-checks td, #check .m-checks thead th + th { width:84px; text-align:right; }
  #check .m-checks .m-pass { color:var(--m-green); font-weight:600; }
  #check .m-checks .m-fail { color:#c22a39; font-weight:600; }
  @media (max-height:700px) {
    main #check.m-screen { padding:24px var(--m-pad) 24px !important; }
    #check .section-lead .m-cut { display:none; }
    #check .m-claim { margin-top:16px; }
    #check .m-attempts { margin-top:12px; }
    #check .m-attempt { padding:10px 0; }
    #check .m-attempt b { font-size:36px; }
  }
}

/* draft15: the open verifier states what runs today; one bar, then two text links on one line */
@media (max-width:899px) {
  #open .ov-status { display:block; }
  main #open.open-verifier .open-links { flex-direction:row; flex-wrap:wrap; justify-content:center; gap:4px 28px; }
  #open.open-verifier .open-links a + a { width:auto !important; min-height:44px; padding:0 !important; border:0; font-size:16px; font-weight:500; text-decoration:underline; text-underline-offset:4px; gap:6px; }
}