/* ==========================================================================
   The home page below the hero, fix 14 (app/f7/home-f14.php; bonfium-fix14-1-pages/PROMPT.md §5, §8.4-§8.6;
   home13/SPEC.md "Round 18" / "Round 19"). Lazy, like every below-the-hero sheet of the home page; everything under
   html.f14 (the switch). It only places things: the glass, the tints, .seg, .textlink, the type scale and the rhythm are
   the shared layer's (assets/fix7/system.css), and the fix 12 sheet (assets/fix7/home.css) still styles the chat, the
   slips' insides, the stack, the questions and the band.
   Bonfi: the v2.5 player anchors each one (his invisible surface exactly on the container's top edge or the floor line);
   assets/fix14/home14.js sets the sizes and anchor-x from the reach table (assets/fix14/bonfi-reach.js).
   Breakpoints: >= 1280; 1024-1279; 760-1023; <= 759 phones.
   ========================================================================== */

/* ---------------------------------------------------------------- shared */
html.f14 .f14h-bf{position:absolute;left:0;top:0;z-index:2;pointer-events:none}
html.f14 .f14h-fl{position:absolute;left:0;right:0;bottom:0;height:0;pointer-events:none}

/* ---------------------------------------------------------------- 1 · How it works. (§5.3) */
html.f14 .f14h-hw{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:var(--f8-sec-title)}
html.f14 .f14h-ht{height:460px;--pad:32px;margin:0}
html.f14 .f14h-t2{transition-delay:.06s}
html.f14 .f14h-t3{transition-delay:.12s}
html.f14 .f14h-t4{transition-delay:.18s}
html.f14 .f14h-htx{position:absolute;left:var(--pad);top:30px;right:var(--pad)}
html.f14 .f14h-hs{font:500 13px/1.3 var(--f7-text);color:rgba(255,255,255,.78)}
html.f14 .f14h-ht .f14h-h3{margin-top:10px;max-width:none;text-wrap:balance}
html.f14 .f14h-hl{margin-top:10px!important;max-width:440px;font:400 16px/1.45 var(--f7-text);color:rgba(255,255,255,.78);text-wrap:pretty}
/* the slip: the one glass (baked by system.js: .f12h-obj), bottom-left on the inner padding */
html.f14 .f14h-slip{left:var(--pad);bottom:var(--pad);z-index:1;width:260px;padding:18px 22px 16px;font-family:var(--f7-text)}
html.f14 .f14h-k{font-size:13px;font-weight:500;line-height:1.3;color:rgba(255,255,255,.78)}
html.f14 .f14h-hi{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;column-gap:12px;margin:6px 0;font:400 24px/1.2 var(--f7-display);letter-spacing:-.03em;white-space:nowrap}
html.f14 .f14h-hi>.num{margin-left:auto}   /* one line; a long item name in another language puts the price under it, right */
html.f14 .f14h-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:4px 0;font-size:15px;line-height:1.35}
html.f14 .f14h-row>span{font-weight:500;color:rgba(255,255,255,.78)}
html.f14 .f14h-row>b{font-weight:600;white-space:nowrap;color:#fff}
/* a receipt keeps one line, above its total (§1.4) */
html.f14 .f14h-tot{margin-top:8px;padding-top:10px;box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
html.f14 .f14h-tot .f14h-row{padding:0}
html.f14 .f14h-big{margin:6px 0 8px;font:400 36px/1 var(--f7-display);letter-spacing:-.04em;color:#fff}
/* the example "All good": a flat tint, not a control (aria-hidden, not focusable, no pointer) */
html.f14 .f14h-ok{display:flex;align-items:center;justify-content:center;height:40px;margin-top:12px;font:600 15px/1 var(--f7-text);color:#fff;pointer-events:none;cursor:default;user-select:none}
/* the states: plain coloured words (§1.11) */
html.f14 .f14h-row>b.f14h-st-held{color:#FFD27A}
html.f14 .f14h-row>b.f14h-st-way{color:#C4E4FF}
html.f14 .f14h-row>b.f14h-st-arr{color:#BDF3E2}
html.f14 .f14h-row>b.f14h-st-paid{color:#B8F5C4}
/* tile 1 (open-sky, a pale field): only its deeper upper blue under the white words and the slip */
html.f14 .f14h-t1 .f12h-fld img{transform:scale(1.55);transform-origin:50% 0}
/* tile 2: the floor line (the slip's bottom line) he stands on; the room under the slip on phones */
html.f14 .f14h-t2 .f14h-fl{bottom:var(--pad)}
html.f14 .f14h-room{display:none}
/* under the grid, on the paper */
html.f14 .f14h-note{margin-top:36px}
html.f14 .f14h-note>p{font:400 17px/1.5 var(--f7-text);color:#3B4750}
html.f14 .f14h-pair{margin-top:14px}
html.f14 .f14h-pair .glass-btn{padding:0 26px}
html.f14 .f14h-pair .textlink{color:var(--f7-ink)}
html.f14 .f14h-pair .textlink:focus-visible{outline:2px solid var(--f7-ink);outline-offset:4px;border-radius:6px}

/* ---------------------------------------------------------------- 2 · Already talking: the code card low right, Bonfi sitting on it */
html.f14 .f14h-talk .f12h-codecard{top:auto;bottom:56px;right:64px;transform:none;width:480px}
html.f14 .f14h-seat{position:absolute;top:0;right:22px;width:0;height:0;pointer-events:none}
html.f14 .f14h-talk #bfSit{z-index:3}

/* ---------------------------------------------------------------- 4 · When something's off. (§5.6): four tiles */
/*   [ hold 4 ][ pay 4 ][ statement 4 ]   400
     [ WIDE 12                        ]   350 */
html.f14 .f14h-gal{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:400px 350px;gap:var(--f8-card-gap);margin-top:var(--f8-sec-title)}
html.f14 .f14h-g-hold{grid-column:1/5;grid-row:1}
html.f14 .f14h-g-pay{grid-column:5/9;grid-row:1;transition-delay:.06s}
html.f14 .f14h-g-st{grid-column:9/13;grid-row:1;transition-delay:.12s}
html.f14 .f14h-g-dig{grid-column:1/13;grid-row:2;transition-delay:.18s}
html.f14 .f14h-gal .f12h-tt p{color:rgba(255,255,255,.86)}
/* the pay tile: only the field's darker lower edge under the white words (as fix 12) */
html.f14 .f14h-g-pay .f12h-fld img{transform:scale(1.6);transform-origin:70% 100%}
/* the statement sheet on the tile floor */
html.f14 .f14h-gal .f14h-sheet{top:auto;left:36px;bottom:32px;width:min(280px,calc(100% - 72px))}
/* the wide tile: words left (vertically centred), the Design-pack.zip slip on the floor, Bonfi asleep on it.
   padding-top 34 keeps the lantern's light under his surface off the words */
html.f14 .f14h-g-dig .f12h-tt{top:50%;right:auto;max-width:min(440px,46%);transform:translateY(-50%)}
html.f14 .f14h-dig{right:36px;bottom:36px;width:648px;padding:34px 28px 24px;display:grid;grid-template-columns:290px 1fr;column-gap:44px;align-items:end}
html.f14 .f14h-dig .f12h-k{margin-bottom:10px}

/* ---------------------------------------------------------------- 5 · the stack, now after the gallery: the section rhythm (§4) above its title
   (it followed paper text before; after a field tile its own 72 px read as cramped). Its mechanism is untouched. */
html.f14 #gallery + .f12h-stack .v4h-intro{padding-top:calc(var(--f8-sec) - 10px)}

/* ---------------------------------------------------------------- 6 · Partners: Bonfi on the floor by surface_y (§5.9) */
html.f14 .f14h-part{--S:340px}
html.f14 .f14h-pf{position:relative;height:calc(var(--S) * .7)}
/* the text link may wrap beside the pill (home14.js keeps the pair clear of Bonfi) */
html.f14 .f14h-part .f12h-pcta .textlink{flex:0 1 auto;min-width:0}

/* ---------------------------------------------------------------- <= 1279 */
@media (max-width:1279px){
  html.f14 .f14h-ht{height:440px;--pad:28px}
  html.f14 .f14h-ht .f14h-h3{font-size:32px}
  html.f14 .f14h-slip{width:218px;padding:16px 18px 14px}
  html.f14 .f14h-hi{font-size:20px}
  html.f14 .f14h-row{font-size:14px}
  html.f14 .f14h-big{font-size:32px}

  html.f14 .f14h-talk .f12h-codecard{bottom:48px;right:48px;width:400px}

  html.f14 .f14h-gal{grid-template-rows:410px 340px}
  html.f14 .f14h-gal .f14h-sheet{left:30px;bottom:28px;width:min(280px,calc(100% - 60px))}
  html.f14 .f14h-dig{right:30px;bottom:30px;width:540px;grid-template-columns:240px 1fr;column-gap:32px;padding:32px 24px 22px}

  html.f14 .f14h-part{--S:240px}
  html.f14 .f14h-part .f12h-inv{max-width:250px}
}
/* ---------------------------------------------------------------- 760-1023 */
@media (max-width:1023px){
  html.f14 .f14h-hw{grid-template-columns:minmax(0,1fr);gap:16px}
  html.f14 .f14h-ht{height:400px}
  html.f14 .f14h-slip{width:260px;padding:18px 22px 16px}
  html.f14 .f14h-hi{font-size:24px}
  html.f14 .f14h-row{font-size:15px}
  html.f14 .f14h-big{font-size:36px}

  html.f14 .f14h-gal{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:400px 280px 370px;gap:16px}
  html.f14 .f14h-g-hold{grid-column:1;grid-row:1}
  html.f14 .f14h-g-pay{grid-column:2;grid-row:1}
  html.f14 .f14h-g-st{grid-column:1/3;grid-row:2}
  html.f14 .f14h-g-dig{grid-column:1/3;grid-row:3}
  html.f14 .f14h-g-st .f12h-tt{right:auto;max-width:46%}
  html.f14 .f14h-gal .f14h-sheet{left:auto;right:30px;bottom:28px}
  html.f14 .f14h-g-dig .f12h-tt{top:30px;transform:none}
  html.f14 .f14h-dig{left:30px;right:30px;bottom:28px;width:auto;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}
@media (max-width:899px){
  html.f14 .f14h-talk .f12h-codecard{position:relative;inset:auto;transform:none;width:auto;max-width:480px;margin-top:132px}
}
/* ---------------------------------------------------------------- phones */
@media (max-width:759px){
  /* fix 15: the partners text link under its pill (6 apart): the same text position, its hit area from 8 px under the pill */
  html.f14 .f14h-part .f12h-pcta .textlink{margin-top:3px;padding:3px 0 6px;z-index:1}
  html.f14 .f14h-hw{gap:12px}
  html.f14 .f14h-ht{height:auto;--pad:20px;padding:24px 20px 20px}
  html.f14 .f14h-htx{position:static}
  html.f14 .f14h-ht .f14h-h3{font-size:30px}
  html.f14 .f14h-hl{font-size:15px}
  html.f14 .f14h-slip{position:relative;left:auto;bottom:auto;width:auto;margin-top:24px}
  html.f14 .f14h-room{display:block;height:var(--room,257px)}
  html.f14 .f14h-note{margin-top:28px}
  html.f14 .f14h-pair{flex-direction:column;align-items:stretch;row-gap:6px}
  html.f14 .f14h-pair .glass-btn{width:100%;height:50px}
  html.f14 .f14h-pair .textlink{justify-content:center;padding:11px 0 13px;margin-top:2px}   /* fix 15: the same place, its box (the hit area) 8 px under the pill */

  html.f14 .f14h-talk .f12h-codecard{margin:130px 12px 0 0;padding:22px}   /* 118 in the prototype; +12 so his hat (sit-look) clears a wrapped last bubble at 360 */

  html.f14 .f14h-gal{grid-template-columns:minmax(0,1fr);grid-template-rows:none;gap:12px}
  html.f14 .f14h-g-hold,html.f14 .f14h-g-pay,html.f14 .f14h-g-st,html.f14 .f14h-g-dig{grid-column:1;grid-row:auto}
  html.f14 .f14h-g-hold{height:340px}
  html.f14 .f14h-g-pay{height:330px}
  html.f14 .f14h-g-st{height:370px}
  html.f14 .f14h-g-dig{height:530px}
  html.f14 .f14h-g-st .f12h-tt{max-width:none;right:24px}
  html.f14 .f14h-gal .f14h-sheet{left:20px;right:20px;bottom:20px;width:auto;padding:16px 18px 14px}
  html.f14 .f14h-g-dig .f12h-tt{top:24px;max-width:none;right:24px}
  html.f14 .f14h-g-dig .f12h-fld img{transform:scale(1.6);transform-origin:20% 100%}
  html.f14 .f14h-dig{left:20px;right:20px;bottom:20px;padding:30px 20px 18px;grid-template-columns:minmax(0,1fr);row-gap:18px}
}

/* ---------------------------------------------------------------- tap targets (§12.4): 44 px hit areas, the look unchanged */
html.f14 .f14h-talk .f12h-rl,html.f14 .f14h-part .f12h-pcta .textlink{position:relative}
html.f14 .f14h-talk .f12h-rl::before{content:"";position:absolute;left:-4px;right:-4px;top:50%;height:44px;transform:translateY(-50%)}
html.f14 .f14h-part .f12h-pcta .textlink::before{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}

/* ---------------------------------------------------------------- fix 15 (PROMPT-fix15-phones.md §3, home13/SPEC.md "Round 20"): phones
   and tablets only. Every tap target gets a hit area of at least 44 x 44; the look and the layout don't move. */
@media (max-width:1023px){
  /* the hero's text link (its hit area only; the hero's look is untouched): 24 -> 44, 9 px clear of the pill above */
  html.f14 .hero-cta .h5-link{position:relative}
  html.f14 .hero-cta .h5-link::after{content:"";position:absolute;inset:-5px -4px -15px}
  /* the partners example's segments: 36 + the track's 4 + 4 = 44 (the calculator's own .seg: assets/fix14/calc.css) */
  html.f14 .f14h-part .seg>button::after{content:"";position:absolute;inset:-4px 0}   /* 36 + the track's 4 + 4 = 44 */
  html.f14 .f14h-part .seg{column-gap:2px}   /* neighbouring segments 2 px apart: their hit areas never touch */
  /* the pair under the How it works grid: the text link's hit area starts 8 px under the pill (they are 6 apart) */
  html.f14 .f14h-pair .textlink,html.f14 .f12h-band .textlink{position:relative;z-index:1}
  /* the closing band's text link: 22 -> 44, 10 px clear of the pill above */
  html.f14 .f12h-band .textlink::before{content:"";position:absolute;inset:-4px -4px -18px}
  /* the Pro line's link under the calculator (inside running text, as the roles' links) */
  html.f14 .f12h-pro .f12h-rl{position:relative;z-index:1}   /* above the next section's box, which starts under the line */
  html.f14 .f12h-pro .f12h-rl::before{content:"";position:absolute;left:-4px;right:-4px;top:50%;height:44px;transform:translateY(-50%)}
}
@media (max-width:759px){
  html.f14 .f14h-part .f12h-pcta .textlink::before{top:0;height:44px;transform:none}   /* from 8 px under the pill */
}
/* (Before your first trade: its rows are already 46 tall on phones, 17 px x 1.4 + 2 x 11: unchanged) */

/* ---------------------------------------------------------------- reduced motion: the end states (the player shows posters) */
@media (prefers-reduced-motion:reduce){
  html.f14 .f14h-ht{transition:none!important;opacity:1!important;transform:none!important}
}