/* ==========================================================================
   The home page below the hero: fix 12 (app/f7/home.php; bonfium-fix12-1-pages/PROMPT.md §5, §6; home10/SPEC.md
   "Rounds 14-17", shots v17 / v16 / v15 / v14). The fix 8 sheet is assets/fix7/home-f8.css (fix12_on() off).
   Loaded lazily (preload + onload, like every below-the-hero sheet of the home page): it never blocks the first paint.
   The glass, the tints, .seg, .textlink, the type scale, the column and the rhythm are the shared layer's
   (assets/fix7/system.css: .glass-*, .tint, .seg, .textlink, .f12-pair, .f8-h2, .f8-tone2, .f7-wrap, --f8-*): this sheet
   only places things. It writes no glass recipe of its own, except the calculator's masked blur (§6.3: the etalon's
   filter inside the block's silhouette).
   Never glass on glass: inside .glass-* only tints. No glass sits under an ancestor with opacity < 1, a filter, a mask or
   will-change (the settle-in fades only plain text and whole tiles, whose field is inside them).
   Grain: on the fields only (the bottom layer). Nothing pins or scrubs (the stack keeps its own sheet).
   Breakpoints: ≥1280; 1024-1279; 760-1023 tablet; ≤759 phones.
   ========================================================================== */
.f12h{font-family:var(--f7-text);color:var(--f7-ink)}
:where(.f12h) :where(h2,h3,p,ul,li){margin:0;padding:0;text-transform:none}
/* the sections sit in the old 1136 home column: break out to the full width, then the one column (.f7-wrap) */
.f12h-sec,#v-home #pricing{margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
.f12h-sec{position:relative;padding-top:var(--f8-sec)}
#v-home #pricing{padding:var(--f8-sec) 0 0;border:0;background:none}
.f12h-anchor{position:absolute;top:0;left:0;width:1px;height:1px}
.f12h-h2{color:var(--f7-ink)}
.f12h-2l .f8-tone2{display:block}
.num{font-variant-numeric:tabular-nums}
/* a plain text link inside a sentence: ink 600, the arrow moves 3 px */
.f12h-rl{display:inline-block;color:var(--f7-ink);font-weight:600;text-decoration:none;white-space:nowrap;margin-left:2px;transition:transform .25s cubic-bezier(.22,.7,.18,1);will-change:transform}   /* fix 13: outside glass, a permanent layer of its own: its hover moves the layer and never repaints near the code card */
.f12h-rl:hover{transform:translateX(3px)}
.f12h-rl:focus-visible{outline:2px solid var(--f7-ink);outline-offset:4px;border-radius:6px}

/* a field: the picture, the grain over it (the bottom layers), everything else above */
.f12h-fld{position:absolute;inset:0;z-index:-2;display:block}
.f12h-fld img{display:block;width:100%;height:100%;object-fit:cover}
.f12h-grain{position:absolute;inset:0;z-index:-1;pointer-events:none;background:var(--grain-src,url(/assets/grain/grain-256.png)) repeat;
  background-size:var(--grain-size,128px) var(--grain-size,128px);mix-blend-mode:soft-light}
/* Bonfi: the wrapper's bottom is his floor (data-feet), his feet 0.375 x the clip's height from its left edge;
   --S his height, --fx the feet x, --fl the floor, --bs a scale from the feet */
.f12h-bf{position:absolute;z-index:1;line-height:0;pointer-events:none;left:calc(var(--fx) - var(--S) * .375);bottom:var(--fl,0px);
  transform:scale(var(--bs,1));transform-origin:calc(var(--S) * .375) 100%}
.f12h-lg{display:block;height:26px;width:auto;margin:-6px 0 0 -10px}

/* settle in, once (§1.7): opacity + a 28 px rise on plain text only; tiles from .9 (their field is inside them) */
.f12h-armed .f12h-rise:not(.in){opacity:0;transform:translateY(28px)}
.f12h-rise{transition:opacity .8s ease,transform 1s cubic-bezier(.22,.7,.18,1)}

/* ---------------------------------------------------------------- 1 · Already talking to someone? */
.f12h-talk-stage{position:relative;isolation:isolate;overflow:hidden;height:500px;margin-top:var(--f8-sec-title);border-radius:var(--f8-r-stage);color:#fff;background:#2E6A73}
.f12h-thread{position:absolute;left:64px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:flex-start;gap:10px;width:470px}
.f12h-thread .f8-msg{align-self:flex-start;max-width:360px;margin:0}
.f12h-thread .f8-msg.is-out{margin-left:120px}
.f12h-m{transition:opacity .8s ease,transform .9s cubic-bezier(.22,.7,.18,1)}
.f12h-slot{display:grid;align-items:start}
.f12h-slot>*{grid-area:1/1}
.f12h-typing{margin:11px 0 0 135px!important;font:500 14px/1.4 var(--f7-text);color:rgba(255,255,255,.88);opacity:0;transition:opacity .4s ease}
.f12h-typing.is-on{opacity:1}
.f12h-typing.is-on span{display:inline-block;animation:f12h-breathe 1.6s ease-in-out infinite}
@keyframes f12h-breathe{0%,100%{opacity:.45}50%{opacity:1}}
.f12h-talk-stage.is-armed .f12h-m:not(.is-on){opacity:0;transform:translateY(24px)}
.f12h-talk-bf{--S:230px;--fx:568px;--fl:40px}   /* feet between the thread and the card; he watches the chat */
.f12h-codecard{position:absolute;right:64px;top:50%;transform:translateY(-50%);width:480px;padding:28px}
.f12h-ct{font:400 28px/1.15 var(--f7-display);letter-spacing:-.02em;color:#fff}
.f12h-code{display:flex;gap:8px;margin-top:20px}
.f12h-code .glass-input{flex:1}
.f12h-code .glass-btn{height:50px;padding:0 24px;flex:none;color:#fff}
.f12h-code .glass-input.is-code::placeholder{color:rgba(255,255,255,.72)}
.f12h-codecard .bf-ferr{display:block;margin:8px 4px 0;font:500 13px/1.35 var(--f7-text);color:#fff}
/* the trade in words, both sides, once (no steps, circles or lines) */
.f12h-roles{display:grid;grid-template-columns:1fr 1fr;column-gap:40px;row-gap:20px;margin-top:28px;max-width:1040px}
.f12h-roles p{font:400 17px/1.55 var(--f7-text);color:#3B4750;text-wrap:pretty}
.f12h-roles b{color:var(--f7-ink);font-weight:600}
.f12h-swap{grid-column:1/-1;display:flex;gap:12px;align-items:flex-start}
.f12h-si{flex:none;width:22px;height:22px;margin-top:2px;color:var(--f7-ink)}

/* ---------------------------------------------------------------- 2 · the listing stack (its own sheet; the button only) */
.f12h-stack .v4h-copy .v4h-btn.glass-btn{background:var(--f8-glass-bg);-webkit-backdrop-filter:var(--f8-glass-filter);backdrop-filter:var(--f8-glass-filter);
  box-shadow:var(--f8-glass-shadow);color:#fff;height:48px;padding:0 26px;font:600 16px/1 var(--f7-text)}
.f12h-stack .v4h-copy .v4h-btn.glass-btn:hover{background:var(--f8-glass-hover)}
.f12h-stack .v4h-copy .v4h-btn.glass-btn:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* ---------------------------------------------------------------- 3 · What it costs (§5.5, §6) */
/* one field stage, column wide: the stage draws the field (grain.png 1:1 over field.png, placed by the frame), the
   frames sit on it, the panel beside (≥1024) or under (≤1023) the block. Geometry on the stage (container queries):
   pl / pw / pg / pr = panel left, panel width, gap to the block, room on the right. */
.f12h-cstage{--sh:620px;--pl:48px;--pw:432px;--pg:44px;--pr:56px;
  --fw:calc((100cqw - var(--pl) - var(--pw) - var(--pg) - var(--pr)) / .885);
  --fx:calc(var(--pl) + var(--pw) + var(--pg) - .055 * var(--fw));
  --fy:calc(var(--sh) * .55 - .5355 * var(--fw));
  position:relative;isolation:isolate;overflow:hidden;height:var(--sh);margin-top:var(--f8-sec-title);border-radius:var(--f8-r-stage);
  container-type:inline-size;background:var(--f13-cbg,#7c9190);color:#fff}
.f12h-cfield{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url(/assets/fields/glacier-gold-16x9.webp) center/cover no-repeat,var(--f13-cbg)}
/* the signature grain, exactly as on every other field (.f12h-grain, .f7-grain): the one tile, one tile pixel per device
   pixel (--grain-src / --grain-size from the head script), soft-light, on the field only (the frames sit above it) */
.f12h-cfield::before{content:"";position:absolute;inset:0;pointer-events:none;background:var(--grain-src,url(/assets/grain/grain-256.png)) repeat;
  background-size:var(--grain-size,128px) var(--grain-size,128px);mix-blend-mode:soft-light}
/* fix 13: the stage field is glacier-gold (Vilius, 16 Oct: "glacier gold maybe"; it was field.png, amber to night). The block
   is a transparent picture and takes its colour from this field through the glass, so it turns blue-gold with it.
   Phones and tablets get the portrait crop. */
.f12h-cstage{--f13-cbg:#7c9190}
@media (max-width:1023px){.f12h-cfield{background-image:url(/assets/fields/glacier-gold-3x4.webp)}}
/* each frame: the etalon's blur masked to the silhouette (.bl), under the picture; one frame on at a time */
.f12h-cframes{position:absolute;left:var(--fx);top:var(--fy);width:var(--fw);aspect-ratio:800/680;pointer-events:none}
.f12h-cframes .fr{position:absolute;inset:0;display:none}
.f12h-cframes .fr.on{display:block}
.f12h-cframes .bl{position:absolute;inset:0;-webkit-backdrop-filter:blur(20px) saturate(1.7);backdrop-filter:blur(20px) saturate(1.7);
  -webkit-mask:var(--m) 0 0/100% 100% no-repeat;mask:var(--m) 0 0/100% 100% no-repeat}
.f12h-cframes picture,.f12h-cframes img{position:absolute;inset:0;width:100%;height:100%;display:block}
.f12h-cside{position:absolute;z-index:2;left:var(--pl);top:0;bottom:0;width:var(--pw);display:flex;flex-direction:column;justify-content:center}
.f12h-cpanel{padding:32px 32px 30px;border-radius:var(--f8-r-card);color:#fff}
.f12h-clab{display:block;font:500 15px/1.3 var(--f7-text);color:rgba(255,255,255,.78)}
.f12h-cprice{display:flex;align-items:center;height:76px;margin-top:10px;padding:0 28px;border-radius:999px;cursor:text;transition:background-color .2s ease}
.f12h-cprice:focus-within{background:rgba(255,255,255,.32)}
.f12h-cprice .f12h-cur,.f12h-cprice input{font:400 var(--pf,44px)/1 var(--f7-display);letter-spacing:-.04em;color:#fff}
.f12h-cprice .f12h-cur{margin-right:-.05em;flex:none}
.f12h-cprice.is-after .f12h-cur{order:2;margin:0 0 0 .2em}
.f12h .f12h-cprice.is-after input,#v-home .f12h .f12h-cprice.is-after input{flex:0 1 auto;field-sizing:content;min-width:1ch}   /* "600,00 €": the sign right after the number (home.js sizes it where field-sizing is missing) */
.f12h .f12h-cprice input,#v-home .f12h .f12h-cprice input{flex:1;min-width:0;width:auto;height:100%;margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;outline:none;
  font:400 var(--pf,44px)/1 var(--f7-display);letter-spacing:-.04em;color:#fff;font-variant-numeric:tabular-nums;caret-color:#fff;-webkit-appearance:none;appearance:none}
.f12h-cprice input::selection{background:rgba(255,255,255,.34);color:#fff}
.f12h-cpanel .seg{margin-top:12px}
.f12h-cres{display:block;margin-top:36px}
.f12h-cfee{display:block;margin-top:8px;font:400 72px/1 var(--f7-display);letter-spacing:-.045em;color:#fff}
.f12h-cpct{display:block;margin-top:10px;font:500 15px/1.3 var(--f7-text);color:rgba(255,255,255,.78)}
.f12h-cfirst{margin:20px 0 0 32px!important;font:500 15px/1.6 var(--f7-text);color:rgba(255,255,255,.78);text-wrap:pretty}
.f12h-pro{margin-top:22px!important;max-width:760px;font:400 15px/1.55 var(--f7-text);color:#3B4750}
.f12h-pro b{color:var(--f7-ink);font-weight:600}

/* ---------------------------------------------------------------- 4 · Less chasing. More trading. (the gallery) */
/*   [ BIG 7 x 2 rows ][ hold 5     ]
     [                ][ TALL 5 x 2 ]
     [ pay 7          ][            ]
     [ WIDE 12                      ]   all visible at once; a one-time settle from 90 % opacity */
.f12h-gal{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:340px 290px 300px 224px;gap:var(--f8-card-gap);margin-top:var(--f8-sec-title)}
.f12h-tile{position:relative;isolation:isolate;overflow:hidden;min-width:0;margin:0;border-radius:var(--f8-r-card);color:#fff;background:#59707A;
  transition:opacity .9s ease,transform 1.1s cubic-bezier(.22,.7,.18,1)}
.f12h-armed .f12h-tile:not(.in){opacity:.9;transform:translateY(12px)}
.f12h-t-lock{grid-column:1/8;grid-row:1/3}
.f12h-t-hold{grid-column:8/13;grid-row:1;transition-delay:.06s}
.f12h-t-st{grid-column:8/13;grid-row:2/4;transition-delay:.12s}
.f12h-t-pay{grid-column:1/8;grid-row:3;transition-delay:.12s}
.f12h-t-dig{grid-column:1/13;grid-row:4;transition-delay:.18s}
.f12h-tt{position:absolute;left:36px;top:34px;right:36px}
.f12h-h3{font:400 36px/1.06 var(--f7-display);letter-spacing:-.04em;color:#fff;max-width:9.5em;text-wrap:balance}
.f12h-tt p{margin-top:10px!important;font:400 16px/1.45 var(--f7-text);color:rgba(255,255,255,.86);text-wrap:balance}
.f12h-t-lock .f12h-h3{font-size:52px;line-height:1.02;max-width:7em}
.f12h-t-lock .f12h-tt p{font-size:18px;margin-top:14px!important}
.f12h-t-hold .f12h-tt p{max-width:30em}
.f12h-t-pay .f12h-fld img{transform:scale(1.9);transform-origin:70% 100%}   /* only the field's darker lower edge (rust to brown) under the white words and the slip */
/* the slips: the one glass, white text, labels .78 / 500, no hairlines */
.f12h-obj{position:absolute;border-radius:var(--f8-r-card);color:#fff}
.f12h-row{display:flex;justify-content:space-between;gap:12px;font-size:14px;line-height:1.35;padding:5px 0}
.f12h-row>span{font-weight:500}
.f12h-row b{font-weight:600;white-space:nowrap}
.f12h-amt{font:400 34px/1 var(--f7-display);letter-spacing:-.04em;margin:12px 0 10px}
.f12h-k{font-size:13px;font-weight:500}
/* (BIG) the parcel label bottom left, Bonfi large on the floor right: the locker reaches +0.505 S right of his feet */
.f12h-t-lock{--S:520px;--fl:40px;--fx:calc(100% - 44px - var(--S) * .505 * var(--bs,1))}
.f12h-plabel{left:36px;bottom:44px;width:256px;padding:22px 24px;transform:rotate(-1.5deg);transform-origin:0 100%}
.f12h-to{font-size:20px;font-weight:600;margin-top:3px}
.f12h-at{font-size:14px;font-weight:500;margin-top:2px}
.f12h-k2{margin-top:18px}
.f12h-pcode{font:400 48px/1 var(--f7-display);letter-spacing:-.02em;margin-top:6px}
/* (hold) the slip on the floor */
.f12h-hold{left:36px;right:36px;bottom:32px;padding:20px 24px 16px}
/* (TALL) the statement sheet under the words, Bonfi counting on the floor below right (reach -0.32 S / +0.3 S) */
.f12h-t-st{--S:340px;--fl:36px;--fx:calc(100% - 26px - var(--S) * .3 * var(--bs,1))}
.f12h-sheet{left:36px;top:160px;width:min(280px,calc(100% - 72px));padding:20px 22px 18px}
.f12h-sh-h{display:flex;justify-content:space-between;margin-bottom:6px;font-size:13px;font-weight:500}
.f12h-sh-r{display:flex;justify-content:space-between;gap:10px;padding:6px 0;font-size:15px}
.f12h-sh-r>span{font-weight:500}
.f12h-sh-r b{font-weight:600}
.f12h-ms{display:none}
.f12h-sh-x{display:flex;gap:18px;margin-top:10px;font-size:14px;font-weight:600}
/* (pay) the address slip: "bonfium.com" types itself once in a tint bar, then the caret blinks; not a form */
.f12h-payc{right:36px;bottom:32px;width:min(440px,calc(100% - 72px));padding:22px 24px}
.f12h-addr{display:flex;align-items:center;height:50px;padding:0 18px;border-radius:999px;font:500 16px/1 var(--f7-text);letter-spacing:.02em;color:#fff;white-space:pre}
.f12h-addr i{display:inline-block;width:1.5px;height:20px;margin-left:1px;background:#fff;border-radius:1px;opacity:0}
.f12h-addr.is-typing i,.f12h-addr.is-blink i{opacity:1}
.f12h-addr.is-blink i{animation:f12h-caret 1.1s steps(1,end) infinite}
@keyframes f12h-caret{0%{opacity:1}50%{opacity:0}}
/* (WIDE) digital items: words left, the slip right, both vertically centred */
.f12h-t-dig .f12h-tt{top:50%;right:auto;max-width:min(440px,46%);transform:translateY(-50%)}
.f12h-dig{right:36px;top:50%;transform:translateY(-50%);width:648px;padding:24px 28px;display:grid;grid-template-columns:290px 1fr;column-gap:44px;align-items:end}
.f12h-dig .f12h-k{margin-bottom:10px}
.f12h-fn{font:400 30px/1.15 var(--f7-display);letter-spacing:-.03em;color:#fff;overflow-wrap:anywhere}
.f12h-wr{display:flex;justify-content:space-between;align-items:baseline;gap:16px}
.f12h-wr+.f12h-wr{margin-top:4px}
.f12h-wr span{font-size:15px;font-weight:500}
.f12h-wr b{font:400 30px/1.2 var(--f7-display);letter-spacing:-.03em}

/* ---------------------------------------------------------------- 5 · Before your first trade. (on paper) */
.f12h-ql{list-style:none;margin-top:var(--f8-sec-title)!important;display:grid;grid-template-columns:1fr 1fr;column-gap:40px;max-width:1040px}
.f12h-ql a{display:block;padding:12px 0;font:500 19px/1.4 var(--f7-text);color:var(--f7-ink);text-decoration:none;text-wrap:pretty}
.f12h-ql a:hover{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.f12h-ql a:focus-visible{outline:2px solid var(--f7-ink);outline-offset:4px;border-radius:6px}
.f12h-ql .is-all a{font-size:16px;font-weight:600;color:var(--f7-sub,#5C6B75)}

/* ---------------------------------------------------------------- 6 · Partners: "You already do this job." */
.f12h-part{position:relative;isolation:isolate;overflow:hidden;margin:var(--f8-sec) calc(50% - 50vw + var(--f8-inset)) 0;border-radius:var(--f8-r-stage);color:#fff;background:#59707A;
  --S:340px;--bs:1;--bgap:28px;--floor:72px}
.f12h-pin{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) 230px 440px;grid-template-areas:"a . x" "b f x";row-gap:32px;padding-top:88px;padding-bottom:var(--floor)}
.f7-wrap.f12h-pin{padding-left:max(calc(var(--f8-gut-min) - var(--f8-inset)),calc((100% - var(--f8-col)) / 2));padding-right:max(calc(var(--f8-gut-min) - var(--f8-inset)),calc((100% - var(--f8-col)) / 2))}
.f12h-pa{grid-area:a}
.f12h-pb{grid-area:b;align-self:end}
.f12h-pf{grid-area:f;align-self:end;position:relative;height:calc(var(--S) * .7)}
.f12h-pexw{grid-area:x;align-self:end}
#v-home .f12h-part .f12h-h2{color:#fff}
.f12h-pt1,.f12h-pt2{display:block}
.f12h-pt1{max-width:6.4em}
.f12h-pt2{color:rgba(255,255,255,.55)}
.f12h-rate{margin-top:var(--f8-sec-title)!important;font:400 120px/1 var(--f7-display);letter-spacing:-.05em}
.f12h-pl{max-width:13em;text-wrap:balance;margin-top:12px!important;font:400 17px/1.45 var(--f7-text);color:rgba(255,255,255,.86)}
.f12h-facts{list-style:none;display:grid;gap:6px}
.f12h-facts li{font:500 18px/1.45 var(--f7-text);color:#fff}
.f12h-pcta{margin-top:30px}
.f12h-pcta .glass-btn{padding:0 26px;color:#fff}
.f12h-pcta .textlink{color:#fff;white-space:normal}
.f12h-inv{margin-top:10px!important;max-width:420px;font:500 14px/1.5 var(--f7-text);color:rgba(255,255,255,.78)}
.f12h-pex{padding:30px 32px;border-radius:var(--f8-r-card);color:#fff}
.f12h-lab{display:block;margin-top:20px;font:500 15px/1.3 var(--f7-text)}
.f12h-k+.f12h-lab{margin-top:16px}
.f12h-pex .seg{margin-top:10px}
.f12h-pres{margin-top:32px}
.f12h-pres .f12h-lab{margin-top:0}
.f12h-big{margin-top:8px;font:400 64px/1 var(--f7-display);letter-spacing:-.045em;color:#fff}
.f12h-sm{margin-top:10px;font:500 15px/1.3 var(--f7-text)}
/* Bonfi: 340 tall, scaled by --bs from his feet; his feet --bgap plus his right reach (0.285 S, present) left of the panel */
.f12h-part-bf{--fx:calc(100% - var(--bgap) - var(--S) * .285);--fl:0px;left:calc(var(--fx) - 127.5px);transform-origin:127.5px 100%}

/* ---------------------------------------------------------------- the closing band (app/v4-home.php v4h_cta_f12()) */
.v4h-cta.f12h-band{padding:72px 32px;display:flex;flex-direction:column;align-items:center}
.v4h-cta.f12h-band h2{text-wrap:balance}
.v4h-cta.f12h-band .acts{justify-content:center;column-gap:26px;margin-top:28px}
.v4h-cta.f12h-band .glass-btn{padding:0 26px;color:#fff;font:600 16px/1 var(--f7-text)}
.v4h-cta.f12h-band .textlink{color:#fff}

/* ---------------------------------------------------------------- ≤1279 */
@media (max-width:1279px){
  .f12h-talk-stage{height:600px}
  .f12h-thread{top:56px;transform:none;width:auto}
  .f12h-codecard{top:auto;bottom:48px;transform:none;width:400px;right:48px}
  .f12h-talk-bf{--fx:210px}
  .f12h-cstage{--sh:540px;--pl:32px;--pw:392px;--pg:36px;--pr:44px}
  .f12h-cpanel{padding:28px 28px 26px}
  .f12h-cprice{height:70px;padding:0 24px;--pf:40px}
  .f12h-cfee{font-size:64px}
  .f12h-cfirst{margin-left:28px!important}
  .f12h-gal{grid-template-rows:360px 250px 300px 210px}
  .f12h-tt{left:30px;top:30px;right:30px}
  .f12h-h3{font-size:32px}
  .f12h-t-lock .f12h-h3{font-size:42px}
  .f12h-t-lock{--bs:.62;--fx:calc(100% - 32px - var(--S) * .505 * var(--bs))}
  .f12h-plabel{left:30px;bottom:34px;scale:.86}
  .f12h-t-st{--bs:.75;--fx:calc(100% - 30px - var(--S) * .3 * var(--bs))}
  .f12h-sheet{left:30px;top:150px;width:min(280px,calc(100% - 60px))}
  .f12h-hold{left:30px;right:30px;bottom:28px;padding:16px 20px 12px}
  .f12h-hold .f12h-amt{font-size:28px;margin:8px 0 6px}
  .f12h-hold .f12h-row{padding:3px 0}
  .f12h-t-hold .f12h-tt p{font-size:15px}
  .f12h-payc{right:30px;bottom:28px;padding:20px 22px}
  .f12h-dig{right:30px;width:540px;grid-template-columns:240px 1fr;column-gap:32px;padding:22px 24px}
  .f12h-pin{grid-template-columns:minmax(0,1fr) 170px 400px}
  .f12h-part{--S:280px;--bs:.8235}
}
/* ---------------------------------------------------------------- tablet */
@media (max-width:1023px){
  /* the calculator stacked: the block on top, the panel under it in the same field (never overlapping) */
  .f12h-cstage{height:auto;--bt:44px;--fw:calc(100cqw + 16px);--fx:-8px;--fy:calc(var(--bt) - .375 * var(--fw))}
  .f12h-cside{position:relative;left:auto;top:auto;bottom:auto;width:auto;max-width:520px;padding:calc(var(--bt) + .325 * var(--fw) + 28px) 0 30px 28px}
  .f12h-gal{grid-template-columns:1fr 1fr;grid-template-rows:520px 390px 320px 300px}
  .f12h-t-lock{grid-column:1/3;grid-row:1;--bs:.74}
  .f12h-t-hold{grid-column:1;grid-row:2}
  .f12h-t-st{grid-column:2;grid-row:2/4;--bs:.7}
  .f12h-t-pay{grid-column:1;grid-row:3}
  .f12h-t-dig{grid-column:1/3;grid-row:4}
  .f12h-sheet{top:160px}
  .f12h-payc{left:30px;width:auto}
  .f12h-t-dig .f12h-tt{top:30px;transform:none;max-width:none}
  .f12h-dig{left:30px;right:30px;top:auto;bottom:28px;transform:none;width:auto;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .f12h-part{--S:280px;--bs:.8235;--floor:44px;--bgap:6px}
  .f12h-pin{grid-template-columns:minmax(0,1fr) 170px;grid-template-areas:"a a" "x x" "b f";row-gap:44px;padding-top:64px}
  .f12h-pexw{max-width:520px}
  .f12h-pb{padding-bottom:4px}
  .f12h-rate{font-size:96px}
}
@media (max-width:899px){
  .f12h-talk-stage{height:auto;padding:28px}
  .f12h-thread{position:static;transform:none;width:auto}
  .f12h-talk-bf{display:none}
  .f12h-codecard{position:relative;inset:auto;transform:none;width:auto;max-width:480px;margin-top:32px}
}
/* ---------------------------------------------------------------- phones */
@media (max-width:759px){
  .f12h-talk-stage{margin-left:calc(8px - var(--f8-gut-min));margin-right:calc(8px - var(--f8-gut-min));padding:24px 18px 18px}
  .f12h-thread .f8-msg{max-width:86%}
  .f12h-thread .f8-msg.is-out{margin-left:44px}
  .f12h-typing{margin-left:58px!important}
  .f12h-codecard{margin-top:28px;padding:22px}
  .f12h-ct{font-size:22px}
  .f12h-code .glass-btn{padding:0 18px}
  .f12h-roles{grid-template-columns:1fr;row-gap:16px;margin-top:22px}
  .f12h-roles p{font-size:16px}

  .f12h-cstage{--bt:30px;margin-left:calc(8px - var(--f8-gut-min));margin-right:calc(8px - var(--f8-gut-min))}
  .f12h-cside{max-width:none;padding:calc(var(--bt) + .325 * var(--fw) + 22px) 12px 24px 12px}
  .f12h-cpanel{padding:22px}
  .f12h-clab{font-size:14px}
  .f12h-cprice{height:64px;padding:0 22px;--pf:38px}
  .f12h-cpanel .seg>button{font-size:14px;padding:0 6px}
  .f12h-cres{margin-top:28px}
  .f12h-cfee{font-size:56px}
  .f12h-cpct{font-size:14px}
  .f12h-cfirst{margin:16px 10px 0 22px!important;font-size:14px}

  .f12h-gal{grid-template-columns:minmax(0,1fr);grid-template-rows:none;gap:12px}
  .f12h-t-lock,.f12h-t-hold,.f12h-t-st,.f12h-t-pay,.f12h-t-dig{grid-column:1;grid-row:auto}
  .f12h-t-lock{height:520px}.f12h-t-hold{height:340px}.f12h-t-st{height:440px}.f12h-t-pay{height:330px}.f12h-t-dig{height:400px}
  .f12h-tt{left:24px;top:24px;right:24px}
  .f12h-h3{font-size:30px}
  .f12h-t-lock .f12h-h3{font-size:36px}
  .f12h-t-lock .f12h-tt p{font-size:16px;margin-top:10px!important}
  .f12h-t-lock{--bs:.46;--fl:24px;--fx:calc(100% - 22px - var(--S) * .505 * var(--bs))}
  .f12h-plabel{left:20px;bottom:auto;top:150px;width:214px;padding:16px 18px;transform-origin:0 0;scale:1}
  .f12h-to{font-size:18px}.f12h-at{font-size:13px}.f12h-k2{margin-top:12px}.f12h-pcode{font-size:38px}
  .f12h-t-st{--bs:.54;--fl:22px;--fx:calc(100% - 22px - var(--S) * .3 * var(--bs))}
  .f12h-sheet{left:20px;top:142px;width:184px;padding:14px 16px 12px}
  .f12h-sh-r{font-size:14px;padding:7px 0}
  .f12h-mf{display:none}
  .f12h-ms{display:inline}
  .f12h-sh-x{gap:14px}
  .f12h-hold{left:20px;right:20px;bottom:20px}
  .f12h-payc{left:20px;right:20px;bottom:20px;width:auto;padding:18px}
  .f12h-t-dig .f12h-tt{top:24px}
  .f12h-t-dig .f12h-fld img{transform:scale(1.6);transform-origin:20% 100%}   /* the night end of the field under the white words */
  .f12h-dig{left:20px;right:20px;bottom:20px;padding:20px 20px 18px;grid-template-columns:1fr;row-gap:18px}
  .f12h-fn{font-size:24px}
  .f12h-wr b{font-size:28px}

  .f12h-ql{grid-template-columns:1fr}
  .f12h-ql a{font-size:17px;padding:11px 0}

  .f12h-part{--S:240px;--bs:.7059;--floor:32px;--bgap:2px}
  .f12h-pin{grid-template-columns:minmax(0,1fr) 118px;row-gap:36px;padding-top:44px}
  .f12h-rate{font-size:72px}
  .f12h-pl{font-size:16px}
  .f12h-pex{padding:24px 22px}
  .f12h-big{font-size:56px}
  .f12h-sm{font-size:14px}
  .f12h-facts li{font-size:16px}
  .f12h-pcta{margin-top:24px;flex-direction:column;align-items:flex-start;row-gap:6px}
  .f12h-pcta .textlink{display:inline-block;line-height:1.4;padding:6px 0}
  .f12h-pcta .textlink::after{display:inline-block;vertical-align:-3px;margin-left:8px}

  .v4h-cta.f12h-band{padding:52px 20px;text-align:center}
  .v4h-cta.f12h-band h2{font-size:36px}
  .v4h-cta.f12h-band .acts{flex-direction:column;align-items:center;row-gap:14px}
}

/* ---------------------------------------------------------------- reduced motion: the end states, still */
@media (prefers-reduced-motion:reduce){
  .f12h *,.f12h *::before,.f12h *::after{transition-duration:0s!important;transition-delay:0s!important;animation:none!important}
  .f12h-armed .f12h-rise,.f12h-armed .f12h-tile,.f12h-m{opacity:1!important;transform:none!important}
  .f12h-typing{display:none!important}
}

/* fix 13 (smoothness): each stack page is its own GPU layer, painted once and only scaled while it sinks
   (scale(1) → .98 under the next page). Without it the page (photo, grain, badge glass, button glass) was repainted on
   every scroll frame and its side edges resampled, which read as a flicker along the card edges. The look and the
   sticky mechanism are unchanged. */
.f12h-stack .v4h-pg{will-change:transform;backface-visibility:hidden;-webkit-backface-visibility:hidden;contain:paint}
@media (prefers-reduced-motion:reduce){.f12h-stack .v4h-pg{will-change:auto}}

/* fix 13 (seams): a Bonfi clip is a video whose box is much wider than he is (a 600 x 800 stage, locker 750 x 800). Where
   that invisible box overlaps a glass slip, Chrome draws the slip's blur differently inside the overlap: the thin seam
   Vilius saw on the parcel label, the statement sheet, the partners Example panel and the code card. Each wrapper is
   clipped to the area his clip set ever paints (measured over every frame of every clip it plays, plus a margin), and the
   slips are placed so that area never touches them (checked at every width by .claude/dev/fix13/overlap.mjs). */
.f12h-bf{clip-path:inset(var(--ct,0%) var(--cr,0%) -30% var(--cl,0%))}   /* the bottom stays open: his feet and shadow hang below the wrapper (data-feet) */
.f12h-lock-bf{--cl:14%;--cr:0%;--ct:9%}       /* locker-drop, locker-idle drawn at x .152–.989, y .105– (every frame, alpha > 1 %) */
.f12h-st-bf{--cl:2%;--cr:0%;--ct:7%}          /* the idle shuffle (look-around swings x .03–.99) + count-papers: y .085– */
.f12h-part-bf{--cl:2%;--cr:0%;--ct:8%}        /* the idle shuffle + present: x .03–.99, y .092– */
.f12h-talk-bf{--cl:2%;--cr:0%;--ct:8%}        /* look-around + the idle shuffle: x .03–.99, y .092– */
/* the slips and Bonfi never meet (the tiles are size containers, so the numbers follow the tile, not the window) */
.f12h-t-lock,.f12h-t-st{container-type:inline-size}
/* talk: his feet follow the column, so his box stays left of the code card at every desktop width */
.f12h-talk-bf{--fx:calc(50% - 160px)}
/* locker tile: Bonfi + locker shrink until their painted area clears the label (its right edge + 14) */
.f12h-t-lock{--S:min(520px,calc((100cqw - 352px) / .7675))}
/* statement tile: the sheet 220 wide, Bonfi as big as fits beside it */
.f12h-t-st .f12h-sheet{width:220px}
.f12h-t-st{--S:min(340px,calc((100cqw - 300px) / .6225))}
@media (max-width:1279px){
  .f12h-t-lock{--S:min(520px,calc((100cqw - 296px) / (.7675 * .62)))}
  .f12h-t-st{--S:max(calc(181px / .75),min(340px,calc((100cqw - 294px) / (.6225 * .75))))}
  .f12h-talk-bf{--fx:210px}
}
@media (max-width:1023px){
  .f12h-t-lock{--S:min(520px,calc((100cqw - 296px) / (.7675 * .74)))}
  .f12h-t-st{--S:340px}
  .f12h-t-st .f12h-sheet{width:min(280px,calc(100% - 60px))}
  .f12h-part{--bgap:16px}
}
@media (max-width:759px){
  /* phones: the label sits above him, so the tile is taller and he stands below it */
  .f12h-t-lock{--S:520px;height:620px}
  .f12h-t-st .f12h-sheet{width:min(184px,calc(100cqw - 22px - 340px * .54 * .6225 - 34px))}
}
/* the size attribute fixes the clip's height (inline --bh); here the tile's --S drives it, so he really shrinks */
.f12h-t-lock bonfi-clip,.f12h-t-st bonfi-clip{--bh:var(--S)!important}
/* phones: the pair (and its long lt / pl labels) gets the full width; Bonfi has his own row under it, on the floor, right */
@media (max-width:759px){.f12h-pin{grid-template-columns:minmax(0,1fr);grid-template-areas:"a" "x" "b" "f";row-gap:28px}.f12h-part{--bgap:16px}}
/* fix 13 (seams, Vilius's photos 16 Oct): the code card, the slips and the panels sit inside stages that clip with rounded
   corners (overflow hidden + radius). There Chrome can blur the backdrop of a glass element in tiles, which showed as
   straight lines splitting the code card into rectangles. Each glass object is its own GPU layer, so its blur is taken
   from one whole backdrop. No visible change otherwise. */
.f12h-codecard,.f12h-obj,.f12h-pex,.f12h-cpanel,.f12h-stack .v4h-btn.glass-btn{will-change:transform;backface-visibility:hidden;-webkit-backface-visibility:hidden}
/* fix 13: the calculator's block is drawn on one canvas (assets/fix7/home.js), placed on the band every frame occupies
   (x 11-799, y 308-596 of 800 x 680); the server's DOM frame shows until the canvas has its first composite */
.f12h-cframes .f13-cv{position:absolute;left:1.375%;top:45.2941%;width:98.5%;height:42.3529%;display:none;pointer-events:none}
.f12h-cframes.is-cv .f13-cv{display:block}
.f12h-cframes.is-cv .fr{display:none!important}