/* Phone composition, not a scaled desktop canvas. Desktop pointers stay unchanged above 760px. */
.mobile-problem-stage { display: contents; }
@media (max-width: 760px), (max-width: 980px) and (pointer: coarse) {
  .site { --phone-gutter: 20px; }
  .site .wrap, .site .wide { width: calc(100% - var(--phone-gutter) * 2); }
  .site section, .site footer { scroll-margin-top: 122px; }
  .site :is(h1,h2,h3,p,dd,li) { overflow-wrap: break-word; }
  .site .h2 { font-size: clamp(30px, 8.3vw, 48px); line-height: 1.05; }
  .site .lead { font-size: 16px; line-height: 1.55; }
  .site :is(.btn,.key,.rt,.hs,.fs,.sx,.fq2-q) { min-height: 44px; }
  .site :is(.hero-form,.c3-cta,.e-out .keys) { gap: 14px; }
  .site :is(.hero-form,.c3-cta) .btn { width: 100%; height: auto; min-height: 52px; }
  .site .btn .face { min-height: inherit; padding-block: 14px; white-space: normal; text-align: center; }
  /* Header was already approved. Its layout and dimensions are intentionally untouched. */
  .site .nav .btn .face { padding-block: 0; white-space: nowrap; }
  .site .nav .btn, .site .nav .btn .face { min-height: 0; height: 38px; }
  .site [data-leave] { position: sticky; top: min(0px, calc(100svh - var(--h, 100svh))); }
  .site [data-leave][data-gone] { visibility: hidden; }
  .site [data-leave="iso"] > .pin { transform-origin: 50% 80%; transform: perspective(1200px) translateY(calc(var(--x,0) * -32px)) rotateX(calc(var(--x,0) * 18deg)) rotateZ(calc(var(--x,0) * -3deg)) scale(calc(1 - var(--x,0) * .1)); box-shadow: 0 calc(var(--x,0) * 5px) 0 var(--lime), 0 calc(var(--x,0) * 10px) 0 var(--coral); }
  .site [data-leave="fall"] { transform-origin: 50% 100%; transform: perspective(1200px) rotateX(calc(var(--x,0) * -6deg)) scale(calc(1 - var(--x,0) * .04)); }
  .site .board > :is(.wrap,.wide) { transform: scale(calc(1 - var(--x,0) * .04)); }
  .site .board::after { display: block; }
  /* Keep the W arrival moving, entirely inside the existing 72px top padding.
     The desktop's 58vh cut would cross phone text; removing it killed motion. */
  .site[data-js] .seam { --dp: calc((1 - var(--e, 1)) * 36px); }
  .site[data-js] .seam > .seam-edge { display: block; height: calc(var(--dp) + 4px); clip-path: polygon(0 0, 22% var(--dp), 50% calc(var(--dp) * .38), 78% var(--dp), 100% 0, 100% 4px, 78% calc(var(--dp) + 4px), 50% calc(var(--dp) * .38 + 4px), 22% calc(var(--dp) + 4px), 0 4px); }
  .site :is(.rule,.cases,.proof,.fail,.ptz,.cta,.who2,.rules3,.wont2,.errs2,.use2,.cx,.ledger,.faq2,.cta3,.e-out) { padding-block: 72px; }
  .site :is(.rl-wrap,.pf-grid,.fl-grid,.ptz-grid,.cs-head,.bd-head,.u2g,.cx-g,.fq2-g,.c3-g) { display: grid; grid-template-columns: minmax(0,1fr); gap: 32px; }
  .site :is(.rl-wrap,.pf-grid,.fl-grid,.ptz-grid,.u2g,.cx-g) > * { min-width: 0; }
  /* Scenes retain their artwork/timeline; the phone gives copy and artwork their own rows. */
  .site [data-mobile-autoplay] { height: auto !important; }
  .site [data-mobile-autoplay] > .pin { position: relative; top: auto; height: auto; min-height: 0; overflow: clip; padding: 72px 20px; display: grid; grid-template-columns: minmax(0,1fr); align-content: start; align-items: start; gap: 28px; }
  .site [data-mobile-autoplay]:first-of-type > .pin { padding-top: 142px; }
  /* Hero: copy remains in flow on short phones and large text settings. */
  .site .hero { height: auto; }
  .site .hero > .pin { position: relative; height: auto; min-height: 100svh; padding: 132px 20px 115px; display: block; overflow: clip; --out: clamp(0,calc(var(--p,0) / .18),1); --a: clamp(0,calc((var(--p,0) - .05) / .38),1); }
  .site .hero[data-phone-hero] { height: var(--phone-track-height,auto); }
  .site .hero[data-phone-hero] > .pin { position: sticky; top: var(--phone-pin-top,0px); }
  .site .hero-stage { position: absolute; left: 50%; top: calc(132px + var(--a) * (24svh - var(--phone-pin-top,0px))); width: calc(clamp(110px,31vw,155px) * (1 + var(--a))); transform: translateX(-50%); }
  .site .hero-copy { position: relative; left: auto; top: auto; width: 100%; padding-top: calc(clamp(110px,31vw,155px) * 1.0625 + 28px); transform: translateY(calc(var(--out) * 60px)); opacity: calc(1 - var(--out)); }
  .site .hero-question { font-size: clamp(30px,10vw,60px); }
  .site .hero-subject { font-size: .76em; }
  .site .hero-change { height: 3.3em; margin-block: .2em; }
  .site .hero-phrase { font-size: .95em; }
  .site .hero-question-fixed { font-size: .85em; }
  .site .hero-sub { margin-top: 16px; font-size: 15px; }
  .site .hero-form { margin-top: 24px; }
  .site .hero-flood { display: block; }
  /* Tabs collapse inside a bounded stage below the copy. */
  .site .prob > .pin { padding-bottom: 72px; overflow: clip; }
  .site .pb-copy { position: relative; left: auto; top: auto; transform: none; width: 100%; height: auto; display: grid; }
  .site :is(.pb-a,.pb-b) { position: relative; grid-area: 1 / 1; top: auto; transform: none; }
  .site .pb-copy .h2 { margin-top: 0; font-size: clamp(30px,8.4vw,44px); }
  .site .pb-copy .lead { margin-top: 18px; }
  .site .mobile-problem-stage { display: block; position: relative; width: 100%; height: 390px; overflow: clip; }
  .site .wall { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); --cw: calc((100vw - 40px) / 8); }
  .site .deck { left: 50%; top: 50%; bottom: auto; }
  .site .dk-flip { width: calc(100vw - 40px); left: calc((100vw - 40px) * -.5); top: -150px; height: 310px; }
  .site .pb-count { position: absolute; right: 0; bottom: 0; }
  /* The demo is a readable phone app view. No .405 scale, no miniature desktop sidebar. */
  .site .how[data-autoplay] > .pin { position: relative; height: auto; min-height: 0; padding: 72px 20px; gap: 28px; display: grid; grid-template-columns: minmax(0,1fr); }
  .site .hw-copy { width: 100%; }
  .site .hw-steps { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); margin-top: 24px; min-height: 145px; position: relative; }
  .site .hs { position: static; padding: 10px 0 95px; text-align: center; align-self: start; border-top: 3px solid color-mix(in srgb, var(--blue) calc(var(--on) * 100%), var(--line)); }
  .site .hs :is(.hn) { font-size: 12px; }
  .site .hs::before, .site .hs::after { display: none; }
  .site .hs .hb { position: absolute; left: 0; top: 46px; width: 100%; max-height: none; margin: 0; text-align: left; font-size: 15px; pointer-events: none; }
  /* The app follows the height of its visible motion frame. A 760px fixed
     window left most of the first and last frames empty on real phones. */
  .site .hw-stage { width: 100%; height: var(--phone-app-height, 290px); transition: height .32s ease; }
  .site .app { width: 100%; height: 100%; transform: none; border-radius: 18px; font-size: 14px; }
  .site :is(.app-side,.app-search,.app .cur) { display: none; }
  .site .app-top { justify-content: space-between; }
  .site .vw { left: 0; padding: 18px 14px; }
  .site .pv-t { font-size: 18px; }
  .site .pv-h { flex-wrap: wrap; gap: 8px; }
  .site .wz-url .u { overflow: hidden; font-size: 11px; }
  .site .wz-rule .rt { height: auto; min-height: 40px; }
  .site .wz-rule .ty { white-space: normal; }
  .site .wz-rule .rcs { flex-wrap: wrap; }
  .site .wz-opts { grid-template-columns: minmax(0,1fr); }
  .site .wz-q { margin-top: 14px; }
  .site .wz-rule { margin-top: 12px; }
  .site .wz-go { flex-wrap: wrap; margin-top: 12px; }
  .site .wd-meta { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .site .wd-meta > div:last-child { grid-column: 1 / -1; }
  .site .wd-grid { grid-template-columns: minmax(0,1fr); gap: 18px; }
  .site .hr { grid-template-columns: 68px minmax(0,1fr) auto; padding-inline: 7px; gap: 5px; }
  .site .hr.h2 { font-size: 11.5px; font-weight: inherit; letter-spacing: normal; line-height: normal; font-variation-settings: normal; }
  .site .hr .d { height: auto; background: transparent; }
  .site .exl { width: 100%; }
  .site .cc { padding: 18px 16px; }
  .site .ev-side { grid-template-columns: minmax(0,1fr); }
  .site .el { white-space: normal; }
  /* Filter machine: one bounded column. Tokens still follow the original mobile paths. */
  .site .noise > .pin { --msw: 1; --msh: 1; --ms: 1; }
  .site .nz-copy .lead { display: block; }
  .site .nz-counts { gap: 12px; justify-content: space-between; }
  .site .nz-counts .k { font-size: 9px; letter-spacing: .08em; }
  .site .nz-mach { width: 360px; max-width: 100%; height: calc(820px * var(--phone-noise-scale, .9)); justify-self: center; }
  .site .nm-in { width: 360px; height: 670px; left: 50%; transform: translateX(-50%) scale(var(--phone-noise-scale, .9)); transform-origin: 50% 0; }
  .site .nz-card { top: 550px; }
  /* Falling rules remain Matter bodies, confined to their own tray. */
  .site .rl-in textarea { width: 100%; min-width: 0; font-size: 16px; min-height: 80px; }
  .site .rl-pile { height: 540px; margin-top: 40px; overflow: clip; }
  .site .rl-try { left: 20px; top: 16px; }
  .site .sgb { height: auto; min-height: 48px; width: auto; max-width: calc(100% - 40px); padding: 10px 16px; white-space: normal; text-align: left; font-size: 14px; line-height: 1.4; touch-action: pan-y; }
  /* Tiles reveal locally instead of flying across neighbouring tiles. */
  .site .bento { grid-template-columns: minmax(0,1fr); grid-auto-rows: auto; gap: 18px; }
  .site .tile, .site .tile.w2, .site .tile.h2 { grid-column: auto; grid-row: auto; min-height: 240px; padding: 22px; transform: none; font-size: inherit; }
  .site .tile.h2 { font-weight: inherit; letter-spacing: normal; line-height: normal; font-variation-settings: normal; }
  .site .tile.h2 .tl-n, .site .tl-n { font-size: 27px; margin-top: 16px; }
  .site .tl-top { flex-wrap: wrap; gap: 8px; }
  .site .tl-v { margin-top: 26px; }
  .site .tile.h2 .tl-v .flap, .site .tl-v .flap { font-size: 32px; }
  .site .tile .tl-q { display: block; font-size: 15px; max-width: calc(100% - 40px); margin-top: 16px; letter-spacing: normal; line-height: 1.5; font-weight: 400; font-variation-settings: "wdth" 100; }
  .site .tl-go { width: 36px; height: 36px; right: 18px; bottom: 18px; }
  .site .bgrid { display: none; }
  .site .tile:not([data-in]) { opacity: 0; translate: 0 22px; transform: perspective(900px) rotateX(12deg) rotateZ(-2deg); }
  .site .tile[data-in] { opacity: 1; translate: 0 0; transform: none; transition: opacity .45s ease, translate .6s var(--ease), transform .7s var(--ease); }
  /* Draft stamps live in reserved rows, never over the sentence. */
  .site .fx-lab { width: 100%; grid-template-columns: minmax(0,1fr); gap: 18px; }
  .site .fx-facts { grid-column: 1; padding: 18px 14px; }
  .site .fx-page { display: none; }
  .site .fx-drafts { grid-column: 1; min-width: 0; }
  .site .fx-draft { padding: 18px; }
  .site .fx-draft p { font-size: 17px; line-height: 1.5; }
  .site .fx-draft .vd { flex-wrap: wrap; }
  .site .fx-draft .vd .vdk:nth-child(n) { display: inline-flex; white-space: normal; }
  .site .fx-draft .stamp { position: relative; inset: auto; display: inline-flex; margin-top: 18px; font-size: 12px; }
  .site .facts[data-step="0"] .d1 { opacity: 1; transform: none; }
  .site .fx-drafts .vdk { height: auto; min-height: 30px; padding-block: 6px; }
  .site .fx-wires { display: none; }
  .site .fx-fb { grid-column: 1; font-size: 14px; }
  .site .receipt { margin: 0; min-width: 0; }
  .site .receipt .rc-stamp { position: relative; inset: auto; display: table; max-width: 100%; margin-top: 20px; font-size: 12px; }
  .site .receipt:is(.pa,.pb)[data-in] .rc-stamp { animation: phoneReceiptStamp .45s ease 1.55s both; }
  .site .fl-grid { gap: 24px; }
  .site .fl-keys .keys { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .site .ptz-con .keys { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
  .site .ptz-con .key { min-width: 0; padding: 8px; }
  .site .ptz-con .key .k1 { font-size: 9px; }
  .site .ptz-con .key .k2 { font-size: 14px; }
  .site .cb-stage { height: auto; min-height: 180px; }
  .site .cb-full { top: 0; }
  .site .cb-full .stamp { position: relative; inset: auto; margin-top: 14px; }
  /* How it works: readable copy above a contained isometric illustration. */
  .site .ef-copy .lead { display: block; margin-top: 18px; font-size: 16px; }
  .site .ef > .pin { --esw: var(--phone-world-scale,.4); --esh: 1; }
  .site .ef-stage { width: 100%; height: 430px; overflow: clip; }
  .site .ef .cam { left: 50%; top: 55%; }
  .site .ef-stage .lab span { width: max-content; max-width: min(240px,calc(100vw - 64px)); white-space: normal; font-size: 11px; line-height: 1.25; translate: var(--label-shift, 0px) 0; }
  .site .eh-stage { width: 100%; height: 280px; overflow: clip; }
  /* Desktop sends the completed stack upward into its next pinned scene.
     A phone has no pinned handoff, so keep the assembled stack in its stage. */
  .site .eh > .pin { --go: 0; }
  /* A projection probe selects screen-space depth only on touch engines that
     flatten the original 3D stack. Original timing and desktop remain. */
  .site[data-flat-pipeline] .eh { --flat-x: -38px; --flat-y: 60px; }
  .site[data-flat-pipeline] .eh .pipeline-tilt { top: 25%; }
  .site[data-flat-pipeline] .eh .pipeline-layer {
    --order: calc(var(--from) + (var(--k) - var(--from)) * var(--rs));
    transform: translate3d(calc((4 - var(--order)) * var(--a) * var(--flat-x)), calc((4 - var(--order)) * var(--a) * var(--flat-y)), 0);
    z-index: var(--k);
  }
  .site[data-js][data-flat-pipeline] .eh .pipeline-layer { animation-name: phonePipelineDrop; }
  .site .eh-copy { transform: none; opacity: 1; }
  .site .eh-t { font-size: clamp(44px,12vw,78px); }
  .site .pipeline-tilt { left: 50%; top: 50%; }
  /* The plates themselves already carry these labels. The flying desktop labels
     became faint, disconnected duplicates around the phone-sized illustration. */
  .site .eh .flab { display: none; }
  .site .ef-copy .chips { display: flex; flex-wrap: wrap; }
  .site .e-out .display { font-size: clamp(36px,10vw,64px); }
  /* Phone template selector retains all ten examples, with legible flat cards. */
  .site .ring-l { width: 100%; }
  .site .ring-n { margin-top: 0; }
  .site .rtabs { display: flex; gap: 8px; margin-top: 24px; }
  .site .rt { padding: 12px; font-size: 14px; }
  .site .ri-wrap { min-height: 255px; }
  .site .ri-dl div:not(:last-child) { display: grid; }
  .site .ri-dl div { font-size: 15px; }
  .site .ring-stage { height: auto; width: 100%; mask-image: none; -webkit-mask-image: none; perspective: none; }
  .site .ring { position: relative; inset: auto; width: 100%; height: auto; display: block; transform: none; transform-style: flat; --cw: 100%; }
  .site .rc { position: absolute; inset: 0; width: 100%; height: auto; min-height: 0; min-width: 0; transform: none; opacity: 0; visibility: hidden; filter: none; transition: opacity .45s ease; }
  /* Only the selected example sizes the phone card; the other nine stay
     layered for their original reveal/fade animations. */
  .site :is(.ring-s[data-step="0"] .rc.k0,.ring-s[data-step="1"] .rc.k1,.ring-s[data-step="2"] .rc.k2,.ring-s[data-step="3"] .rc.k3,.ring-s[data-step="4"] .rc.k4,.ring-s[data-step="5"] .rc.k5,.ring-s[data-step="6"] .rc.k6,.ring-s[data-step="7"] .rc.k7,.ring-s[data-step="8"] .rc.k8,.ring-s[data-step="9"] .rc.k9) { position: relative; }
  .site .rc-page, .site .rc-v { flex: none; height: auto; }
  .site .pp-prod { height: auto; }
  .site .ring-s .rc-v { zoom: 1; padding: 16px 12px; overflow: visible; }
  .site .ring-s .rc-al { min-height: 60px; flex-wrap: wrap; }
  .site .ring-s .rc-al b { font-size: 14px; }
  .site .pp-h { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 18px; }
  .site .pp-prod { grid-template-columns: 66px minmax(0,1fr); gap: 14px; }
  .site .pp-img { align-self: start; height: 140px; }
  .site .pp-img svg { width: 42px; height: 42px; }
  .site .pp-meta b { font-size: 23px; }
  .site .pp-var, .site .pp-stock, .site .pp-price { flex-wrap: wrap; }
  .site .pp-plans { grid-template-columns: minmax(0,1fr); gap: 12px; }
  .site .pp-plans .pl { padding: 14px; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 4px 12px; }
  .site .pp-plans b { grid-column: 2; grid-row: 1 / 3; align-self: center; flex-wrap: wrap; margin: 0; font-size: 25px; }
  .site .pp-plans em { grid-column: 1; grid-row: 2; margin: 0; }
  .site .pp-plans ul { grid-column: 1 / -1; margin-top: 8px; font-size: 13px; }
  .site .pp-list .li { grid-template-columns: minmax(0,1fr) auto; gap: 7px; padding: 12px; }
  .site .pp-list .id { grid-column: 1; }
  .site .pp-list .li b { grid-column: 1 / -1; grid-row: 2; }
  .site .pp-list .loc { grid-column: 1; grid-row: 3; }
  .site .pp-list .tg { grid-column: 2; grid-row: 1; }
  .site .pp-tbl .tr0 { grid-template-columns: minmax(0,1fr); gap: 6px; padding: 12px; }
  .site .pp-tbl .tr0.hd { display: none; }
  .site .pp-tbl .tr0 > span:last-child::before { content: "Deadline: "; font-family: var(--sans); color: var(--ink-3); }
  .site .pp-grants .gm, .site .ps-nav { flex-wrap: wrap; }
  .site .pp-code { padding: 16px 14px; font-size: 12px; overflow-wrap: anywhere; }
  .site .ring-s[data-step="0"] .rc.k0, .site .ring-s[data-step="1"] .rc.k1, .site .ring-s[data-step="2"] .rc.k2, .site .ring-s[data-step="3"] .rc.k3, .site .ring-s[data-step="4"] .rc.k4, .site .ring-s[data-step="5"] .rc.k5, .site .ring-s[data-step="6"] .rc.k6, .site .ring-s[data-step="7"] .rc.k7, .site .ring-s[data-step="8"] .rc.k8, .site .ring-s[data-step="9"] .rc.k9 { opacity: 1; visibility: visible; }
  .site .bd-t { font-size: clamp(42px,12vw,68px); }
  .site .bt .flap { font-size: clamp(13px,4.5vw,20px); }
  .site .brow { padding: 16px 10px; }
  .site .bs .flap { font-size: 13px; }
  .site .rr { grid-template-columns: minmax(0,1fr); gap: 14px; }
  .site .rr .stamp { justify-self: start; }
  .site .rr p { font-size: 24px; }
  /* Reliability: no pinning a tall sheet under the header. */
  .site .cz-in { width: 100%; padding: 0; grid-template-columns: minmax(0,1fr); gap: 28px; }
  .site .cz-t { font-size: 38px; }
  .site .cz-sheet { min-height: 430px; margin-right: 10px; padding: 18px 18px 22px 38px; rotate: 0deg; }
  .site .cl-a { font-size: 32px; }
  .site .cl-b { font-size: 18px; }
  .site .vault > .pin { grid-template-rows: auto auto auto; }
  .site .vl { grid-row: 1; }
  .site .sxl { min-height: 480px; }
  .site .sx { min-height: 50px; }
  .site .sx em { font-size: 15px; }
  .site .vstage { grid-row: 2; height: 390px; overflow: clip; }
  .site .vault .cam { top: 58%; --vs: var(--phone-vault-scale,.5); }
  /* Only engines that fail the measured 3D projection get this equal-depth
     screen-space vector. It retains the six original layer/drop timings. */
  .site[data-flat-vault] .vault .vs { --flat-depth: calc(var(--z) + var(--dz) + var(--lift)); translate: calc(var(--flat-depth) * .92) calc(var(--flat-depth) * -1.17); transition: transform 1s var(--ease-drop), translate 1s var(--ease-drop); }
  .site .elist .err { min-width: 0; }
  .site .e2k .keys { flex-wrap: wrap; }
  .site .fgrid2 { grid-template-columns: minmax(0,1fr); }
  /* Pricing cards have real document height; no collapsing stack or oversized stamp. */
  .site .pz2 { height: auto; }
  .site .pz2 > .pin { position: relative; height: auto; min-height: 0; overflow: clip; }
  .site .pz2-in { width: calc(100% - 40px); padding: 142px 0 72px; height: auto; margin-inline: auto; }
  .site .pz2-head { grid-template-columns: minmax(0,1fr); gap: 24px; }
  .site .pz2-t { font-size: clamp(36px,10.8vw,60px); }
  .site .pz2-deck { display: grid; grid-template-columns: minmax(0,1fr); gap: 24px; perspective: none; scale: 1; margin-top: 32px; }
  .site .pc2 { position: relative; inset: auto; width: 100%; margin: 0; padding: 18px; transform: none; rotate: 0deg; animation: none; opacity: 1; }
  .site[data-js] .pc2:not([data-in]) { opacity: 0; transform: perspective(1000px) translateY(32px) rotateX(16deg); }
  .site[data-js] .pc2[data-in] { opacity: 1; transform: none; transition: opacity .45s ease, transform .7s var(--ease-drop); }
  .site .pc2-top { flex-wrap: wrap; gap: 12px; }
  .site .pc2-pop { animation: none; opacity: 1; scale: 1; rotate: 0deg; }
  .site .pc2-p { margin-top: 8px; }
  .site .pc2-p .flap { font-size: 48px; }
  .site .pc2:first-child .pc2-p .flap .fc:first-child { display: none; }
  .site .pc2-b { min-height: 0; margin-top: 7px; }
  .site .pc2-l { margin: 9px 0 12px; }
  .site .pc2-l li { min-height: 0; max-height: none; padding: 6px 0; font-size: 13px; line-height: 1.3; }
  .site .pz2-deck:not(.ex) .pc2-l li.x { min-height: 0; max-height: 0; }
  .site .pz2-hint { display: none; }
  .site .cx-keys { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .site .cx-out, .site .dial-read { flex-wrap: wrap; }
  .site .lim2[data-autoplay] > .pin { height: auto; min-height: 0; }
  .site .lim2[data-autoplay] .lm2-in { grid-template-columns: minmax(0,1fr); height: auto; min-height: 0; padding: 72px 20px; gap: 28px; }
  .site .lm2-vis { grid-template-columns: minmax(0,1fr); gap: 24px; }
  .site .lm2-watch { display: flex; }
  .site .cal-h { flex-wrap: wrap; }
  .site .cal-used { flex-wrap: wrap; gap: 8px; }
  .site .cal-w { font-size: 9px; letter-spacing: 0; }
  .site .cal-w span { padding-left: 0; text-align: center; }
  .site .lm2-end { gap: 20px; padding: 8px; }
  .site .lg-r { grid-template-columns: minmax(0,1fr); gap: 18px; }
  .site .lg-v { justify-content: flex-start; max-width: none; }
  .site .lg-u { flex-basis: auto; text-align: left; }
  .site .lg-l b { font-size: 24px; }
  .site .c3-copy { grid-column: 1; grid-row: 1; }
  .site .c3-w { grid-column: 1; grid-row: 2; height: 220px; min-width: 0; }
  .site .brand-display { white-space: nowrap; font-size: clamp(31px,8vw,56px); gap: 10px; }
  .site .brand-display img { width: clamp(75px,22vw,120px); }
  .site .c3-t { font-size: clamp(36px,10vw,64px); }
  .site .c3-flap { gap: 14px; }
  .site .foot { padding-top: 64px; }
  .site .foot .flegal a { display: inline-flex; align-items: center; min-height: 44px; }
  .site .foot .giant .gw { font-size: 14.5vw; }
}
@media (max-width: 640px) {
  /* Give all five assembled check layers their own visible place in the
     phone stage; keep their original falling and reordering keyframes. */
  .site .eh .pipeline-tilt { top: 70%; }
  .site .eh .pipeline-stack { --gap: calc(var(--s) * (.12 + var(--a) * .16)); }
}
@media (min-width: 641px) and (max-width: 760px), (min-width: 641px) and (max-width: 980px) and (pointer: coarse) {
  /* The wider touch layout keeps the larger original stack, with enough
     stage depth for every layer to remain visible after autoplay ends. */
  .site .eh-stage { height: 420px; }
  .site .eh .pipeline-tilt { top: 70%; }
  .site .eh .pipeline-stack { --gap: calc(var(--s) * (.12 + var(--a) * .14)); }
  .site[data-flat-pipeline] .eh { --flat-x: -58px; --flat-y: 92px; }
}
@media (max-height: 500px) and (orientation: landscape) and (max-width: 980px) and (pointer: coarse) {
  .site .eh-stage { height: 220px; }
  .site .eh .pipeline-tilt { top: 65%; }
  .site[data-flat-pipeline] .eh { --flat-x: -30px; --flat-y: 48px; }
  .site[data-flat-pipeline] .eh .pipeline-layer b { font-size: 15px; }
}
@keyframes phoneReceiptStamp {
  from { opacity: 0; scale: 1; transform: translateY(8px) rotate(-4deg); }
  to { opacity: 1; scale: 1; transform: translateY(0) rotate(-4deg); }
}
@keyframes phonePipelineDrop {
  0% { translate: 0 -210px 0; opacity: 0; }
  18% { opacity: 1; }
  100% { translate: 0 0 0; opacity: 1; }
}
@media (max-width: 350px) {
  .site { --phone-gutter: 16px; }
  .site .hero > .pin { padding-inline: 16px; }
  .site .hero-question { font-size: 32px; }
  .site .hero-change { height: 4.1em; }
  .site .pc2 { padding: 16px; }
  .site .ri-wrap { min-height: 310px; }
  .site .cal { padding: 16px 10px; }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce), (max-width: 980px) and (pointer: coarse) and (prefers-reduced-motion: reduce) {
  .site [data-leave] { position: relative; top: auto; }
  .site [data-leave="iso"] > .pin, .site [data-leave="fall"], .site .board > :is(.wrap,.wide) { transform: none; box-shadow: none; }
  .site[data-js] .seam { clip-path: none; }
  .site[data-js] .seam > .seam-edge { display: none; }
  .site .tile:not([data-in]) { opacity: 1; translate: none; }
  .site[data-js] .pc2:not([data-in]), .site .tile:not([data-in]) { opacity: 1; transform: none; }
  .site .sx em { max-height: none; opacity: 1; margin-top: 8px; }
  .site .sxl { min-height: 0; }
}