/* ==========================================================================
   NNP RAISINS — HOME, v4 THE LOWER HALF (2026-09-22). Loaded by index-v4.html
   only, after site.css and home.css.

   His brief: "home page also needs some touches: first build your version,
   we can use your new version or upgrade some sections of current version."

   WHAT v4 IS. Sections 01–05 (hero, globe, descent, products, gallery) are
   the live page's own, untouched. The three below them are new, built in
   the dark family the seven inner pages got this week, and each one is a
   miniature of the page it leads to:

     06 THE PROOF   #certs   the desk: four sheets fanned, the seal, the labs
     07 THE LIGHT TABLE #news the three newest stands as slides on a light table
     08 THE STAND   #meet    the badge hanging over the real stand, the ask

   ⚠ NOTHING HERE PINS OR SCRUBS. His call of 2026-09-07 (the page asked for
   too much scrolling) stands: after the gallery the page sits still and
   moves only on reveal and under the pointer.
   ⚠ THE GALLERY HANDS OVER TO #certs ON #02040a → violet-dp, exactly as the
   live home.css ramp does; the ramp is repeated here because #certs is no
   longer `.dark`.
   ⚠ HIS LAPTOP IS 1270×680 and reports hover:none.
   ========================================================================== */

/* ------------------------------------------------------- shared type ---- */
.v4p-kick, .hl-kick, .hs-kick { font-family: var(--mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--violet-lt); margin: 0 0 14px; }
.v4p-h2, .hl-h2, .hs-h2 { font-family: var(--display); font-weight: 800; color: #fff; font-size: clamp(34px, 5vw, 60px); line-height: .94; letter-spacing: -.04em; margin: 0 0 14px; text-shadow: 0 12px 50px rgba(0,0,0,.5); }
.v4p-h2 .accent, .hl-h2 .accent, .hs-h2 .accent { color: var(--violet-lt); }
.v4p-lead, .hl-lead, .hs-lead { margin: 0; font-size: clamp(14.5px, 1.2vw, 17px); line-height: 1.55; color: var(--chalk-dim); max-width: 52ch; }
.v4-glass { background: rgba(14,10,22,.55); border: 1px solid rgba(242,237,248,.14); border-radius: 16px;
  box-shadow: 0 1px 0 rgba(242,237,248,.06) inset, 0 40px 80px -30px rgba(0,0,0,.9);
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); }
.btn-ghost-light { background: transparent; color: var(--chalk); border: 1px solid rgba(242,237,248,.38); }
.btn-ghost-light:hover { border-color: var(--chalk); background: rgba(242,237,248,.08); }

/* ============================================================ 06 PROOF ====
   The desk from /certification/, at rest: four sheets fanned on the table,
   the seal on the front one, each sheet a link to its row. */
#certs.v4p { position: relative; overflow: clip; color: var(--chalk); padding: clamp(84px, 13vh, 140px) 0 clamp(72px, 10vh, 110px);
  background: linear-gradient(180deg, #02040a 0%, #100c1c 12%, #1d1330 26%, var(--violet-dp) 52%, var(--violet-dp) 100%); }
.v4p > .wrap { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(28px, 4vw, 72px); align-items: center; }
.v4p-labs { margin-top: clamp(22px, 3vh, 32px); display: grid; gap: 12px; }
.v4p-labs p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--chalk-dim); max-width: 52ch; }
.v4p-labs p b { color: #fff; font-weight: 600; }
.v4p-marks { display: flex; flex-wrap: wrap; gap: 10px; }
.v4p-mark { height: 46px; padding: 9px 14px; background: #fff; border-radius: 8px; display: grid; place-items: center; box-shadow: 0 10px 30px -12px rgba(0,0,0,.8); }
.v4p-mark img { display: block; height: 28px; width: auto; max-width: 120px; object-fit: contain; }
.v4p-after { display: flex; align-items: center; gap: 12px 18px; flex-wrap: wrap; margin-top: clamp(22px, 3vh, 32px); }
.v4p-after small { font-size: 13.5px; color: var(--chalk-dim); }

/* the desk */
.v4p-desk { position: relative; width: 100%; max-width: 600px; aspect-ratio: 1 / 1; margin-inline: auto; }
.v4p-desk::before { content: ''; position: absolute; left: 50%; top: 58%; width: 90%; height: 60%; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(ellipse, rgba(226,183,255,.16) 0%, rgba(226,183,255,0) 66%); filter: blur(14px); pointer-events: none; }
.v4p-sheet { position: absolute; left: 50%; top: 50%; width: 46%; aspect-ratio: 1 / 1.3; margin-left: -23%; container-type: inline-size; text-decoration: none; color: var(--ink);
  transform: translate(0, -50%) rotate(0deg); transform-origin: 50% 85%; z-index: var(--z, 1);
  transition: transform .9s var(--ease-out), filter .4s ease; }
/* ⚠ FRONT SHEET ON THE LEFT (z 4 → 1), so the three behind it each show
   their top-right corner, which is where the issuer's mark sits, and each
   has a strip of its own to point at. It was the other way round and only
   INC's mark showed (his note, 2026-09-22). The fan opens wider while the
   pointer is over the desk (--spread). */
.v4p-desk { --spread: 1; }
.v4p-desk:hover { --spread: 1.28; }
.v4p-sheet:nth-of-type(1) { --x: -42%; --r: -12deg; --z: 4; }
.v4p-sheet:nth-of-type(2) { --x: -14%; --r: -4deg; --z: 3; }
.v4p-sheet:nth-of-type(3) { --x: 14%; --r: 4deg; --z: 2; }
.v4p-sheet:nth-of-type(4) { --x: 42%; --r: 12deg; --z: 1; }
.v4p-desk.is-in .v4p-sheet { transform: translate(calc(var(--x) * var(--spread)), -50%) rotate(var(--r)); }
.v4p-sheet:nth-of-type(2) { transition-delay: .06s; } .v4p-sheet:nth-of-type(3) { transition-delay: .12s; } .v4p-sheet:nth-of-type(4) { transition-delay: .18s; }
.v4p-desk.is-in .v4p-sheet:hover, .v4p-desk.is-in .v4p-sheet:focus-visible { transform: translate(calc(var(--x) * var(--spread)), calc(-50% - 22px)) rotate(var(--r)) scale(1.04); z-index: 10; transition-delay: 0s; }
.v4p-sheet:focus-visible { outline: 2px solid var(--violet-lt); outline-offset: 4px; }
.v4p-paper { position: absolute; inset: 0; background: linear-gradient(160deg, #f7f4ec 0%, #f3f0e7 55%, #ebe6d9 100%); border-radius: 3px; overflow: hidden;
  box-shadow: 0 50px 90px -24px rgba(0,0,0,.85), 0 8px 20px -8px rgba(0,0,0,.5), 0 0 0 1px rgba(0,0,0,.08) inset; }
.v4p-paper::before { content: ''; position: absolute; inset: 3.2cqw; border: 1px solid rgba(201,164,92,.85); border-radius: 1px; pointer-events: none; }
.v4p-paper::after { content: ''; position: absolute; inset: 4.4cqw; border: 1px solid rgba(201,164,92,.45); pointer-events: none; }
.v4p-sheen { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(120deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 45%, rgba(0,0,0,.05) 100%); }
.v4p-body { position: absolute; inset: 0; padding: 8cqw 8cqw 7.5cqw; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr auto; gap: 4cqw; z-index: 1; }
.v4p-top { display: flex; align-items: center; justify-content: space-between; gap: 4cqw; }
.v4p-top .v4p-nnp { display: block; width: 8cqw; height: 8.9cqw; color: var(--ink); opacity: .85; }
.v4p-issuer { display: block; width: auto; height: auto; max-width: 30cqw; max-height: 9cqw; object-fit: contain; }
.v4p-doc { display: grid; gap: 1.6cqw; }
.v4p-doc-kind { font-family: var(--mono); font-size: 2.6cqw; letter-spacing: .18em; text-transform: uppercase; color: var(--violet); margin: 0; }
.v4p-doc-holder { font-family: var(--display); font-weight: 800; font-size: 5.6cqw; line-height: 1.02; letter-spacing: -.03em; color: var(--ink); margin: 0; }
.v4p-doc-place { font-family: var(--mono); font-size: 2.5cqw; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); margin: 0; }
.v4p-rules { position: relative; display: grid; align-content: start; gap: 2.6cqw; padding-top: 1cqw; }
.v4p-rules i { display: block; height: 1.15cqw; border-radius: 1cqw; background: rgba(22,20,28,.13); }
.v4p-rules i:nth-child(1) { width: 92%; } .v4p-rules i:nth-child(2) { width: 84%; } .v4p-rules i:nth-child(3) { width: 96%; }
.v4p-rules i:nth-child(4) { width: 70%; } .v4p-rules i:nth-child(5) { width: 88%; } .v4p-rules i:nth-child(6) { width: 52%; }
.v4p-rules i:nth-child(7) { width: 78%; margin-top: 2cqw; } .v4p-rules i:nth-child(8) { width: 60%; }
.v4p-ref { display: grid; gap: 1.2cqw; align-self: end; }
.v4p-ref span { font-family: var(--mono); font-size: 2.4cqw; letter-spacing: .18em; text-transform: uppercase; color: var(--dim); }
.v4p-ref b { font-family: var(--mono); font-weight: 500; font-size: 4.3cqw; letter-spacing: .02em; color: var(--violet-dp); white-space: nowrap; overflow: hidden; line-height: 1.3; }
.v4p-ref b.is-long { font-size: 3.4cqw; letter-spacing: 0; }
/* the seal, on the front sheet */
.v4p-seal { position: absolute; right: 5cqw; bottom: 17cqw; width: 30cqw; height: 30cqw; z-index: 4; transform: rotate(-8deg); filter: drop-shadow(0 6cqw 6cqw rgba(20,6,40,.45)); pointer-events: none; }
.v4p-seal > svg { display: block; width: 100%; height: 100%; overflow: visible; }
.v4p-seal-wax { fill: url(#v4p-wax); }
.v4p-seal-rim { fill: none; stroke: rgba(230,201,135,.55); stroke-width: 1.2; }
.v4p-seal-ring { fill: none; stroke: rgba(230,201,135,.9); stroke-width: 1.6; }
.v4p-seal-text { font-family: var(--mono); font-size: 13px; letter-spacing: .22em; font-weight: 500; fill: #efdfb0; }
.v4p-seal-mark { overflow: hidden; color: #efdfb0; }
/* the go line on each sheet */
.v4p-go { position: absolute; left: 8cqw; bottom: 3.6cqw; font-family: var(--mono); font-size: 2.3cqw; letter-spacing: .14em; text-transform: uppercase; color: var(--violet); z-index: 1; }

/* ====================================================== 07 LIGHT TABLE ====
   Three of the newest stand photographs as slides on a light table: a
   glowing surface, each photograph in a dark mount with its label, each a
   link. The light follows the pointer; a slide lifts under it. Not the map:
   his call, "using map is news page's feature" (2026-09-22). */
#news.hl { position: relative; overflow: clip; color: var(--chalk); padding: clamp(84px, 13vh, 140px) 0 clamp(72px, 10vh, 110px);
  background: linear-gradient(180deg, var(--violet-dp) 0%, #1d1330 28%, #0b0814 68%, #08060e 100%); }
.hl-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 24px; margin-bottom: clamp(26px, 4vh, 44px); }
.hl-side { display: grid; gap: 12px; justify-items: end; align-self: end; }
.hl-next { display: grid; gap: 4px; padding: 14px 18px; border-radius: 12px; text-decoration: none; color: var(--chalk); white-space: nowrap; transition: background-color var(--t-hover) ease, border-color var(--t-hover) ease; }
.hl-next:hover { background: rgba(242,237,248,.1); border-color: rgba(242,237,248,.3); }
.hl-next span { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--violet-lt); }
.hl-next b { font-family: var(--display); font-weight: 800; font-size: 17px; letter-spacing: -.02em; color: #fff; }
.hl-next em { font-style: normal; font-size: 12.5px; color: var(--chalk-dim); }
.hl-next em i { font-style: normal; display: inline-block; transition: transform .3s var(--ease-out); }
.hl-next:hover em i { transform: translateX(4px); }
/* the table */
.hl-table { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 3vw, 40px); padding: clamp(26px, 4vh, 44px) clamp(22px, 3vw, 44px) clamp(22px, 3.4vh, 36px); border-radius: 22px; perspective: 1400px;
  background: linear-gradient(180deg, rgba(242,237,248,.06), rgba(242,237,248,.02)); border: 1px solid rgba(242,237,248,.12);
  box-shadow: 0 60px 100px -50px rgba(0,0,0,.9), 0 1px 0 rgba(242,237,248,.08) inset, 0 -30px 60px -40px rgba(226,183,255,.25) inset; }
.hl-light { position: absolute; inset: 8px; border-radius: 16px; pointer-events: none; opacity: 0; transition: opacity 1.2s ease;
  background: radial-gradient(ellipse at var(--lx, 50%) var(--ly, 60%), rgba(226,183,255,.3) 0%, rgba(226,183,255,.1) 38%, rgba(226,183,255,0) 72%); filter: blur(18px); }
.hl-table.is-in .hl-light { opacity: 1; }
/* the slides */
.hl-slide { position: relative; display: grid; gap: 12px; align-content: start; text-decoration: none; color: inherit; opacity: 0; will-change: transform;
  transform: translateY(40px) rotate(0deg); transition: transform .9s var(--ease-out), opacity .8s ease; transition-delay: var(--d, 0s); }
.hl-table.is-in .hl-slide { opacity: 1; transform: translateY(0) rotate(var(--r, 0deg)); }
.hl-table.is-in .hl-slide:hover, .hl-table.is-in .hl-slide:focus-visible { transform: translateY(-10px) rotate(0deg) scale(1.03); z-index: 3; transition-delay: 0s; }
.hl-slide:focus-visible { outline: 2px solid var(--violet-lt); outline-offset: 6px; border-radius: 8px; }
/* the mount: a dark card with a window, the photograph lit from behind */
.hl-frame { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 8px; background: linear-gradient(160deg, #221c2e, #14101c);
  box-shadow: 0 40px 70px -24px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.08) inset, 0 1px 0 rgba(255,255,255,.12) inset; }
.hl-frame::before { content: attr(data-n); position: absolute; left: 7%; top: 2.2%; font-family: var(--mono); font-size: 9px; letter-spacing: .22em; color: rgba(242,237,248,.45); }
.hl-frame::after { content: 'NNP RAISINS'; position: absolute; right: 7%; top: 2.2%; font-family: var(--mono); font-size: 9px; letter-spacing: .22em; color: rgba(242,237,248,.3); }
.hl-frame img { position: absolute; left: 7%; top: 9%; width: 86%; height: 82%; object-fit: cover; border-radius: 3px; display: block;
  box-shadow: 0 0 0 1px rgba(0,0,0,.6), 0 0 34px rgba(226,183,255,.28); filter: saturate(1.05) contrast(1.04); }
.hl-glass { position: absolute; left: 7%; top: 9%; width: 86%; height: 82%; border-radius: 3px; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(115deg, rgba(255,255,255,0) 40%, rgba(255,255,255,.16) 50%, rgba(255,255,255,0) 60%); }
.hl-label { display: grid; gap: 3px; padding: 0 2px; }
.hl-label b { font-family: var(--display); font-weight: 800; font-size: clamp(18px, 1.6vw, 22px); letter-spacing: -.025em; line-height: 1.05; color: #fff; }
.hl-label span { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--chalk-dim); }
.hl-dek { display: block; padding: 0 2px; font-size: 13.5px; line-height: 1.45; color: var(--chalk-dim); }

/* ============================================================ 08 STAND ====
   The badge from /meet/, hanging over the real stand. The whole badge is
   the booking link; the words and the two buttons sit on the right. */
#meet.hs { position: relative; overflow: clip; color: var(--chalk); padding: clamp(72px, 11vh, 120px) 0 clamp(84px, 13vh, 140px);
  background: radial-gradient(ellipse at 18% 40%, #1a1230 0%, #0c0816 45%, #08060e 100%); }
.hs-photo { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.hs-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; opacity: .3; filter: saturate(.8) blur(3px); }
.hs-photo::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(8,6,14,.55) 0%, rgba(8,6,14,.72) 40%, rgba(8,6,14,.9) 100%), linear-gradient(180deg, rgba(8,6,14,.85) 0%, rgba(8,6,14,0) 30%, rgba(8,6,14,.92) 100%); }
.hs > .wrap { position: relative; z-index: 1; display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: clamp(28px, 4vw, 72px); align-items: center; }
.hs-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: clamp(22px, 3vh, 32px); }
.hs-facts { margin: 18px 0 0; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--chalk-dim); display: flex; flex-wrap: wrap; gap: 6px 18px; }
.hs-facts i { font-style: normal; color: var(--violet-lt); }
/* the badge: the meet page's, still, tilting under the pointer */
.hs-hangcol { position: relative; height: 640px; perspective: 1400px; }
.hs-hang { position: absolute; left: 50%; top: -80px; width: 300px; margin-left: -150px; transform-origin: 50% 0; display: block; text-decoration: none; color: inherit;
  transform: rotate(var(--sw, 0deg)) rotateY(var(--ty, 0deg)); transition: transform .7s var(--ease-out); }
.hs-hang:focus-visible { outline: none; }
.hs-hang:focus-visible .hs-card { outline: 2px solid var(--violet-lt); outline-offset: 4px; }
.hs-strap { position: absolute; top: 0; left: 50%; width: 22px; height: 236px; margin-left: -11px; transform-origin: 50% 0;
  background: linear-gradient(90deg, #3a1560, #5b2794 50%, #3a1560); box-shadow: 0 6px 18px rgba(0,0,0,.45), 1px 0 0 rgba(255,255,255,.08) inset; }
.hs-strap-l { transform: rotate(7deg); } .hs-strap-r { transform: rotate(-7deg); }
.hs-strap span { position: absolute; left: 0; top: 14px; width: 100%; height: calc(100% - 22px); overflow: hidden; writing-mode: vertical-rl; font-family: var(--mono); font-size: 7.5px; letter-spacing: .3em; text-transform: uppercase; color: rgba(255,255,255,.55); line-height: 22px; white-space: nowrap; }
.hs-clip { position: absolute; top: 224px; left: 50%; width: 46px; height: 22px; margin-left: -23px; border-radius: 4px; background: linear-gradient(180deg, #d9d6dd, #8d8896 55%, #b9b5c1); box-shadow: 0 4px 10px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.6) inset; z-index: 2; }
.hs-clip::after { content: ''; position: absolute; left: 50%; top: 100%; width: 10px; height: 16px; margin-left: -5px; background: linear-gradient(180deg, #b9b5c1, #8d8896); border-radius: 0 0 3px 3px; }
.hs-card { position: absolute; top: 254px; left: 0; width: 300px; height: 412px; border-radius: 14px; overflow: hidden; background: #f6f4ee; color: #1b1622;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.08), 0 2px 0 rgba(255,255,255,.5) inset; transition: box-shadow .4s ease; }
.hs-hang:hover .hs-card { box-shadow: 0 40px 70px -20px rgba(0,0,0,.95), 0 0 0 2px rgba(226,183,255,.6), 0 2px 0 rgba(255,255,255,.5) inset; }
.hs-card::before { content: ''; position: absolute; top: 11px; left: 50%; width: 46px; height: 9px; margin-left: -23px; border-radius: 5px; background: #0f0b16; box-shadow: 0 1px 0 rgba(255,255,255,.7), 0 -1px 2px rgba(0,0,0,.35) inset; z-index: 3; }
.hs-sheen { position: absolute; inset: 0; z-index: 4; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(115deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.28) 44%, rgba(226,183,255,.22) 50%, rgba(255,255,255,0) 64%); background-size: 220% 100%; background-position: var(--sx, 60%) 0; transition: background-position .7s var(--ease-out); }
.hs-head { height: 84px; padding: 30px 20px 0; background: linear-gradient(160deg, #5a2590 0%, var(--violet) 50%, var(--violet-dp) 100%); color: #fff; display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.hs-head svg { width: 78px; height: auto; display: block; color: #fff; }
.hs-head span { font-family: var(--mono); font-size: 8.5px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.75); text-align: right; line-height: 1.6; margin-top: 2px; }
.hs-body { padding: 18px 20px 0; display: grid; gap: 12px; }
.hs-row { display: grid; gap: 2px; margin: 0; }
.hs-row span { font-family: var(--mono); font-size: 8.5px; letter-spacing: .18em; text-transform: uppercase; color: #6b6478; }
.hs-row b { display: block; min-height: 26px; font-family: var(--display); font-weight: 800; font-size: 19px; line-height: 1.15; letter-spacing: -.02em; color: rgba(27,22,34,.28); border-bottom: 1px dotted rgba(27,22,34,.35); }
.hs-row.is-co b { font-size: 15px; font-family: var(--body); font-weight: 600; min-height: 22px; }
.hs-stamp { margin: 4px 0 0; border: 1.5px dashed rgba(75,30,120,.45); border-radius: 8px; padding: 10px 12px 11px; display: grid; gap: 3px; min-height: 74px; }
.hs-stamp span { font-family: var(--mono); font-size: 8.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--violet); }
.hs-stamp b { font-family: var(--display); font-weight: 800; font-size: 22px; line-height: 1.05; letter-spacing: -.03em; color: var(--violet-dp); display: block; }
.hs-stamp em { font-style: normal; font-size: 12px; color: #6b6478; }
.hs-foot { position: absolute; left: 0; right: 0; bottom: 0; height: 58px; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid rgba(27,22,34,.12); background: #efece4; }
.hs-foot span { font-family: var(--mono); font-size: 8.5px; letter-spacing: .16em; text-transform: uppercase; color: #6b6478; line-height: 1.6; }
.hs-bars { width: 92px; height: 26px; background: repeating-linear-gradient(90deg, #1b1622 0 2px, transparent 2px 4px, #1b1622 4px 5px, transparent 5px 8px, #1b1622 8px 11px, transparent 11px 13px); opacity: .8; }
.hs-hangcol::after { content: ''; position: absolute; left: 50%; top: 640px; width: 240px; height: 30px; margin-left: -120px; border-radius: 50%; background: rgba(0,0,0,.7); filter: blur(14px); }

/* ------------------------------------------------------------- short ----
   His laptop: 1270×680. */
@media (min-width: 901px) and (max-height: 760px) {
  .v4p-h2, .hl-h2, .hs-h2 { font-size: clamp(32px, 4.4vw, 48px); }
  .hs-hangcol { height: 560px; }
  .hs-hang { transform: rotate(var(--sw, 0deg)) rotateY(var(--ty, 0deg)) scale(.86); }
  .hs-hangcol::after { top: 560px; }
}
/* ------------------------------------------------------------- phone ---- */
@media (max-width: 900px) {
  .v4p > .wrap, .hs > .wrap { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .v4p-desk { max-width: 440px; }
  .v4p-sheet { width: 54%; margin-left: -27%; }
  .v4p-sheet:nth-of-type(1) { --x: -36%; } .v4p-sheet:nth-of-type(4) { --x: 36%; }
  .hl-head { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .hl-side { justify-items: start; }
  .hl-next { white-space: normal; }
  .hl-table { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .hl-slide { --r: 0deg; }
  .hs-hangcol { height: 300px; order: 2; overflow: clip; margin-top: 8px; }   /* the lanyard is cut at the column top, not run over the words above */
  .hs-hang { top: -120px; transform: rotate(var(--sw, 0deg)) rotateY(var(--ty, 0deg)) scale(.62); }
  .hs-hangcol::after { display: none; }
  .hs-cta { flex-direction: column; }
  .hs-cta .btn { text-align: center; }
  .v4p-kick, .hl-kick, .hs-kick, .hs-facts, .hl-label span { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .v4p-sheet, .hl-slide, .hl-light, .hs-hang, .hs-sheen { transition: none; }
}