/* Product, phones only (<=899px). draft12, 12 Oct 2026: four frames under the 53px header, one claim plus one
   exhibit each, centred, row lists left. The layer is rebuilt from the artwork tiles with one word per tile, as the
   home "How it works" frame is. Desktop never sees these rules. */
@media (max-width:899px) {
  /* ---- #layer: the title, the lede, then the figure fills the frame ---- */
  #layer.m-screen { justify-content:flex-start; padding:28px var(--m-pad) 24px !important; }
  #layer .layer-copy { flex:0 0 auto; }
  #layer .section-lead { margin:10px 0 0 !important; font-weight:500; font-size:18px !important; line-height:1.35; color:var(--m-ink); text-align:center; text-wrap:balance; }
  .layer-figure { flex:1; display:flex; flex-direction:column; justify-content:space-between; margin:18px 0 0; }
  .layer-figure ul { list-style:none; margin:0; padding:0; }
  .layer-figure p { margin:0; }
  .lf-wires, .lf-heads, .lf-built-d { display:none; }
  .lf-link { display:block; width:2px; height:18px; margin:0 auto; background:var(--m-ink); }
  .lf-label { font-weight:500; font-size:14px; line-height:1.2; color:var(--m-ink); text-align:center; }
  .lf-tile { display:block; width:100%; height:auto; overflow:hidden; mix-blend-mode:multiply; } /* the artwork is on white; multiply lets the grey ground through */
  .lf-inputs { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2px 12px; margin-top:2px; }
  .lf-inputs li, .lf-outcomes li { text-align:center; }
  .lf-inputs .lf-tile { max-width:112px; margin:0 auto; }
  .lf-inputs span { display:block; margin-top:-2px; font-weight:500; font-size:14px; line-height:1.2; color:var(--m-ink); }
  .lf-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; }
  .lf-logo { display:block; height:13px; width:auto; filter:brightness(0) invert(1); }
  .lf-layer-title { margin:0; font-weight:600; font-size:20px; line-height:1.15; letter-spacing:.14em; text-transform:uppercase; color:#fff; }
  .lf-domains { display:flex; flex-wrap:wrap; justify-content:center; gap:4px 14px; max-width:250px; }
  .lf-domains .lf-tile { display:none; }
  .lf-domains span { font-weight:500; font-size:14px; line-height:1.3; color:#8ff5c4; }
  .lf-built-m { display:inline-flex; align-items:center; gap:5px; margin:0; font-size:14px; line-height:1; color:#b8c5bc; }
  .lf-built-m img { height:12px; width:auto; }
  .lf-outcomes { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 12px; margin-top:2px; }
  .lf-outcomes .lf-tile { max-width:120px; margin:0 auto; }
  .lf-outcomes span { display:block; margin-top:-2px; font-weight:600; font-size:18px; line-height:1.2; letter-spacing:-.01em; }
  .lf-ok span { color:var(--m-green); }
  .lf-no span { color:#a8231c; }
  .lf-hold span { color:var(--hold); }
  @media (max-height:700px) { .lf-inputs .lf-tile { max-width:76px; } .lf-outcomes .lf-tile { max-width:88px; } .lf-link { height:10px; } .lf-layer { min-height:150px; padding:14px 16px 12px; } }

  /* ---- #bundle: one claim, two attempts ---- */
  #bundle .pf-example { display:none; }
  /* the last row's padding reads as air below the text, so the frame sits a little lower to keep the air even */
  main #bundle.m-screen { padding:56px var(--m-pad) 28px !important; }
  #bundle .section-lead { margin:12px 0 0 !important; font-weight:500; font-size:18px !important; line-height:1.35; color:var(--m-ink); text-align:center; text-wrap:balance; }
  .m-claim { margin-top:32px; width:100%; }
  .m-claim p { margin:0; }
  .m-claim .m-claim-meta, .m-claim .m-rules-label, .m-claim .m-rules-row { display:none; }
  .m-claim-label { font-size:16px !important; font-weight:500; line-height:1.3; color:var(--m-ink); }
  main .m-claim p.m-claim-title { margin-top:6px !important; font-weight:600; font-size:24px !important; line-height:1.2; letter-spacing:-.015em; }
  .m-attempts { list-style:none; margin:28px 0 0; padding:0; border-top:2px solid var(--m-ink); text-align:left; }
  .m-attempt { display:grid; grid-template-columns:1fr auto; align-items:baseline; column-gap:12px; row-gap:8px; padding:30px 0; border-bottom:1px solid var(--line); }
  .m-att-n { font-size:16px; font-weight:500; line-height:1.3; }
  .m-att-total { justify-self:end; font-size:24px; font-weight:600; letter-spacing:-.01em; font-variant-numeric:tabular-nums; }
  .m-attempt b { grid-column:1 / -1; font-weight:600; font-size:48px; line-height:1; letter-spacing:-.03em; }
  .m-att-why { grid-column:1 / -1; font-size:18px; line-height:1.4; }
  @media (max-height:700px) { main #bundle.m-screen { padding:40px var(--m-pad) 24px !important; } .m-claim { margin-top:20px; } .m-attempts { margin-top:18px; } .m-attempt { padding:16px 0; row-gap:4px; } .m-attempt b { font-size:40px; } }
  .m-refused b { color:#c22a39; }
  .m-approved b { color:var(--m-green); }
}