/* Page styles for product.html.
   Extracted from the inline <style> blocks on 2026-09-11, byte for byte and in
   the same order, and linked from the same position in the head. The cascade is
   unchanged; what changed is that the CSS is now a file the browser can cache
   and a person can read. */

:root{ --cf-page:#F5EFE2; }
  /* step motifs, centred, crafted to feel intentional rather than placeholder */
  .mf{ display:flex; }
  .mf-list{ flex-direction:column; gap:13px; width:300px; }
  .mf-list .row{ display:flex; align-items:center; gap:13px; }
  .mf-list .row i{ flex:1; height:14px; border-radius:7px; background:color-mix(in srgb,var(--ink) 10%,transparent); }
  .mf-list .row:nth-child(1){ margin-left:26px; } .mf-list .row:nth-child(3){ margin-left:14px; }  /* slight misalignment = the mess */
  .mf-list .row::before{ content:""; width:11px;height:11px;border-radius:50%; background:var(--journey-red,#c8533f); flex:0 0 auto; }
  .mf-list .row:nth-child(2)::before{ background:#3f8d5a; }
  .mf-list .row:nth-child(3)::before{ background:#caa94e; }
  .mf-people{ align-items:center; justify-content:center; gap:0; }
  .mf-people .av{ width:62px;height:62px;border-radius:50%; border:1px solid var(--rule); background:#FCFAF4; display:flex;align-items:center;justify-content:center; font-family:"JetBrains Mono",monospace; font-size:13px; color:var(--ink); margin-left:-12px; box-shadow:0 8px 20px -14px rgba(22,22,19,.5); }
  .mf-people .av:first-child{ margin-left:0; }
  .mf-people .lk{ width:60px; height:2px; margin:0 9px; background-image:repeating-linear-gradient(90deg, color-mix(in srgb,var(--ink) 46%,transparent) 0 7px, transparent 7px 15px); }
  @media (prefers-reduced-motion:no-preference){ .mf-people .lk{ animation:mfflow .9s linear infinite; } }
  @keyframes mfflow{ from{ background-position:0 0; } to{ background-position:15px 0; } }
  .mf-funnel{ flex-direction:column; gap:13px; align-items:center; width:320px; }
  .mf-funnel i{ display:block; height:21px; border-radius:8px; background:color-mix(in srgb,var(--ink) 12%,transparent); }
  .mf-funnel i:nth-child(1){ width:100%; } .mf-funnel i:nth-child(2){ width:70%; } .mf-funnel i:nth-child(3){ width:46%; }
  .mf-funnel i:nth-child(4){ width:28%; background:var(--journey-red,#c8533f); box-shadow:0 10px 22px -12px color-mix(in srgb,var(--journey-red,#c8533f) 80%,transparent); }
  .mf-board{ gap:15px; width:360px; justify-content:center; }
  .mf-board .col{ flex:1; border:1px solid var(--rule); border-radius:14px; background:#FCFAF4; padding:12px; display:flex; flex-direction:column; gap:9px; box-shadow:0 12px 26px -20px rgba(22,22,19,.5); }
  .mf-board .col b{ display:block; height:6px; width:58%; border-radius:3px; background:color-mix(in srgb,var(--ink) 22%,transparent); margin-bottom:3px; }
  .mf-board .col i{ display:block; height:20px; border-radius:7px; background:color-mix(in srgb,var(--ink) 7%,transparent); border:1px solid color-mix(in srgb,var(--ink) 8%,transparent); }
  .mf-board .col i.ac{ background:var(--journey-red-soft,#f5ddd6); border-color:color-mix(in srgb,var(--journey-red,#c8533f) 30%,transparent); }
  .mf-hand{ align-items:center; justify-content:center; gap:16px; width:360px; }
  .mf-hand .frame{ flex:1; height:76px; border-radius:14px; border:1px solid var(--rule); background:#FCFAF4; display:flex; align-items:center; justify-content:center; font-family:"JetBrains Mono",monospace; font-size:14px; color:var(--muted); }
  .mf-hand .frame.code{ background:#1b1a17; color:#9FE0AF; border-color:#2a2823; box-shadow:0 14px 30px -18px rgba(27,26,23,.7); }
  .mf-hand .arr{ color:var(--ink4); flex:0 0 auto; }
  .mf-hand .arr svg{ width:30px;height:30px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round; display:block; }

  /* bespoke line-art graphics (draw themselves on scroll) */
  .cfg{ width:clamp(280px,33vw,380px); height:auto; overflow:visible; }
  .cfg .ln{ fill:none; stroke:color-mix(in srgb,var(--ink) 27%,transparent); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
  .cfg .ln-soft{ stroke:color-mix(in srgb,var(--ink) 15%,transparent); }
  .cfg .ln-accent{ stroke:#3f8d5a; stroke-width:2.1; }
  .cfg .nd{ stroke:var(--cf-page); stroke-width:2.5; }
  .cfg .nd-r{ fill:var(--journey-red,#c8533f); } .cfg .nd-g{ fill:#3f8d5a; } .cfg .nd-y{ fill:#caa94e; }
  .cfg .nd-b{ fill:#1F4F8C; } .cfg .nd-k{ fill:var(--ink); }
  .cfg .nd-o{ fill:var(--cf-page); stroke:color-mix(in srgb,var(--ink) 38%,transparent); }
  .cfg .bar{ fill:color-mix(in srgb,var(--ink) 6%,transparent); stroke:color-mix(in srgb,var(--ink) 13%,transparent); stroke-width:1; }
  .cfg .bar-top{ fill:color-mix(in srgb,#3f8d5a 13%,transparent); stroke:color-mix(in srgb,#3f8d5a 46%,transparent); }
  .cfg .ln-check{ fill:none; stroke:#fff; stroke-width:3.2; stroke-linecap:round; stroke-linejoin:round; }
  .cfg [data-a]{ transform-box:fill-box; transform-origin:center; }
  .js .cf-viz svg.cfg [data-a]{ opacity:0; }

  /* ── CONCEPT D: one centred thread, every step builds on scroll ── */
  .cf-wrap{ padding-top:clamp(18px,3vw,32px); padding-bottom:clamp(40px,6vw,80px); }
  /* the flow lives in a .section; cut its wrapper padding + pull the next block up so
     the content after the scroll isn't stranded far below the last beat */
  .section:has(.cf-wrap){ padding-top:clamp(24px,3.5vw,52px); padding-bottom:clamp(20px,3vw,40px); }
  .section:has(.cf-wrap) + .section, .section:has(.cf-wrap) + .cta-strip{ padding-top:clamp(32px,4.5vw,64px); }
  .cf-head{ text-align:center; margin-bottom:clamp(8px,3vw,28px); }
  .cf-head .eyebrow{ justify-content:center; }
  .cf-track{ position:relative; }
  /* the thread WINDS down the centre, BEHIND the steps; an ink stroke draws on with scroll */
  .cf-thread{ position:absolute; left:0; top:0; width:100%; height:100%; z-index:0; overflow:visible; pointer-events:none; }
  .cf-thread .cf-rail{ fill:none; stroke:var(--rule); stroke-width:2; vector-effect:non-scaling-stroke; }
  .cf-thread .cf-fill{ fill:none; stroke:var(--ink); stroke-width:2; stroke-linecap:round; vector-effect:non-scaling-stroke; }
  .cf-tip{ display:none; }

  .cf-steps{ list-style:none; margin:0; padding:0; position:relative; z-index:1; }
  .cf-step{ position:relative; display:flex; flex-direction:column; align-items:center; text-align:center;
            padding-block:clamp(22px,3.6vh,42px); }
  /* the node sits on the thread, in the breathing space above each step */
  /* node markers removed (just a curvy line); keep the spacing they provided */
  .cf-node{ width:1px; height:1px; visibility:hidden; margin-bottom:clamp(16px,3vh,32px); }
  /* content sits ON TOP of the thread; the line runs continuously behind it (no masking) */
  .cf-inner{ position:relative; z-index:1; padding:clamp(16px,3vw,30px) clamp(20px,4vw,44px); max-width:34rem; }
  .cf-name{ font-family:"JetBrains Mono",monospace; font-size:12px; letter-spacing: 0.02em; color:#3f8d5a; margin:0 0 18px; will-change:opacity,transform; }
  .cf-h{ font-family:var(--font); font-size:clamp(1.3rem,2.4vw,1.85rem); font-weight:600; letter-spacing:-.022em; line-height:1.06; color:var(--ink); margin:0 auto 1.05rem; max-width:18ch; }
  .cf-h .w{ display:inline-block; will-change:opacity, transform; }
  .cf-d{ font-size:clamp(1.05rem,1.35vw,1.2rem); line-height:1.62; color:var(--muted); margin:0 auto; max-width:40ch; }
  .cf-viz{ display:flex; justify-content:center; margin-top:clamp(20px,3vw,36px); }
  .cf-viz .mf-funnel i{ transform-origin:center; }
  .cf-viz .mf-board .col{ transform-origin:bottom center; }
  .cf-viz .mf > *, .cf-viz .mf-people .lk{ will-change:opacity, transform; }
  /* JS drives the build; hide buildable parts up front (only when JS is active) */
  .js .cf-name, .js .cf-h .w, .js .cf-d, .js .cf-viz .mf > *, .js .cf-viz .mf-people .lk{ opacity:0; }

  @media (max-width: 720px){
    .cf-inner{ padding-inline:clamp(14px,5vw,24px); }
    .cf-step{ padding-block:clamp(22px,5.5vw,40px); }
    .cf-viz .mf{ max-width:86vw; }
  }
  @media (prefers-reduced-motion:reduce){ .cf-name, .cf-h .w, .cf-d, .cf-viz .mf > *, .cf-viz .mf-people .lk{ opacity:1 !important; transform:none !important; } .cf-thread__fill{ display:none; } .cf-step .cf-node{ border-color:var(--ink); } }

/* ---------- Selected work: each case's teaser, drawn in the case figures' hand ---------- */
.tu--fig { font-family: var(--font); color: #1f1e1b; letter-spacing: 0; }
.tu--fig .fig-k { font-size: calc(var(--u) * 8); font-weight: 500; color: #8a857c; white-space: nowrap; }
.tu--fig .tu__base { inset: 0; }
.tu--fig .tu__hi { background: #fff; border-radius: calc(var(--u) * 12); }

/* ZKB: routing table, the development load lifted */
.zk-k { position: absolute; left: calc(var(--u) * 26); top: calc(var(--u) * 22); }
.zk-table { position: absolute; left: calc(var(--u) * 26); top: calc(var(--u) * 40); width: calc(var(--u) * 262); height: calc(var(--u) * 190); padding: calc(var(--u) * 42) calc(var(--u) * 12) 0;
  background: #fff; border-radius: calc(var(--u) * 10); box-shadow: 0 0 0 calc(var(--u) * .5) rgba(207,203,195,.6), 0 calc(var(--u) * 6) calc(var(--u) * 18) rgba(61,56,46,.06); box-sizing: border-box; }
.zk-row { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * 8); height: calc(var(--u) * 32); border-top: calc(var(--u) * .5) solid #ebe7df; }
.zk-row:first-child { border-top: 0; }
.zk-n { font-size: calc(var(--u) * 8); line-height: 1.2; color: #8a857c; font-weight: 500; max-width: calc(var(--u) * 96); }
.zk-seg { display: flex; flex: none; padding: calc(var(--u) * 2); border-radius: calc(var(--u) * 6); background: #F2EFE9; font-size: calc(var(--u) * 7.5); color: #a29d93; white-space: nowrap; }
.zk-seg span { padding: calc(var(--u) * 4) calc(var(--u) * 7); border-radius: calc(var(--u) * 4.5); }
.zk-seg .is-on { background: #fff; color: #6b665e; box-shadow: 0 0 0 calc(var(--u) * .5) #e3dfd6; }
.zk-load { left: calc(var(--u) * 210); top: calc(var(--u) * 24); width: calc(var(--u) * 156); padding: calc(var(--u) * 11) calc(var(--u) * 12) calc(var(--u) * 12); }
.zk-load__top { display: flex; align-items: baseline; justify-content: space-between; font-size: calc(var(--u) * 8.5); color: #5f5a51; white-space: nowrap; }
.zk-load__top b { font-size: calc(var(--u) * 15); font-weight: 600; color: #4A8055; letter-spacing: -.01em; }
.zk-meter { display: flex; gap: calc(var(--u) * 1.6); margin-top: calc(var(--u) * 8); }
.zk-meter i { flex: 1; height: calc(var(--u) * 10); border-radius: calc(var(--u) * 2); background: #F2EFE9; box-shadow: inset 0 0 0 calc(var(--u) * .5) #e3dfd6; }
.zk-meter i.on { background: #4A8055; box-shadow: none; }

/* obseed: three tracks in one phase, the reading lifted */
.op-tog { position: absolute; left: calc(var(--u) * 26); top: calc(var(--u) * 22); display: flex; padding: calc(var(--u) * 2.5); border-radius: calc(var(--u) * 8); background: rgba(255,255,255,.55); font-size: calc(var(--u) * 8); color: #8a857c; white-space: nowrap; }
.op-tog span { display: flex; align-items: center; gap: calc(var(--u) * 5); padding: calc(var(--u) * 5) calc(var(--u) * 9); border-radius: calc(var(--u) * 6); }
.op-tog .is-on { background: #fff; color: #5f5a51; box-shadow: 0 0 0 calc(var(--u) * .5) #e3dfd6; }
.op-tog .is-on::before { content: ""; width: calc(var(--u) * 4); height: calc(var(--u) * 4); border-radius: 50%; background: #c9b78f; }
.op-tracks { position: absolute; left: calc(var(--u) * 26); top: calc(var(--u) * 64); width: calc(var(--u) * 300); height: calc(var(--u) * 160); padding: calc(var(--u) * 40) calc(var(--u) * 14) 0; box-sizing: border-box;
  background: #fff; border-radius: calc(var(--u) * 10); box-shadow: 0 0 0 calc(var(--u) * .5) rgba(207,203,195,.6), 0 calc(var(--u) * 6) calc(var(--u) * 18) rgba(61,56,46,.06); }
.op-tr { display: flex; align-items: center; gap: calc(var(--u) * 10); height: calc(var(--u) * 28); border-top: calc(var(--u) * .5) solid #ebe7df; font-size: calc(var(--u) * 8.5); color: #8a857c; font-weight: 500; }
.op-tr:first-child { border-top: 0; }
.op-tr > span { flex: 0 0 calc(var(--u) * 62); }
.op-lane { position: relative; flex: 1; height: calc(var(--u) * 14); border-radius: calc(var(--u) * 4); background:
  linear-gradient(90deg, transparent calc(33.3% - .5px), #e3dfd6 calc(33.3% - .5px) calc(33.3% + .5px), transparent calc(33.3% + .5px) calc(66.6% - .5px), #e3dfd6 calc(66.6% - .5px) calc(66.6% + .5px), transparent calc(66.6% + .5px)), #F2EFE9; }
.op-lane b { position: absolute; left: 1%; width: 48%; top: calc(var(--u) * 2.5); bottom: calc(var(--u) * 2.5); border-radius: calc(var(--u) * 3); opacity: .55; }
.op-read { left: calc(var(--u) * 196); top: calc(var(--u) * 44); width: calc(var(--u) * 168); display: flex; gap: calc(var(--u) * 8); align-items: flex-start; padding: calc(var(--u) * 11) calc(var(--u) * 13) calc(var(--u) * 12);
  font-size: calc(var(--u) * 11); line-height: 1.3; font-weight: 500; letter-spacing: -.01em; }
.op-dot { flex: none; width: calc(var(--u) * 6); height: calc(var(--u) * 6); margin-top: calc(var(--u) * 4); border-radius: 50%; background: #4A8055; box-shadow: 0 0 0 calc(var(--u) * 3) color-mix(in srgb, #4A8055 16%, transparent); }

/* Scout24: requests coming in, the prioritised queue lifted */
.sc-k { position: absolute; left: calc(var(--u) * 24); top: calc(var(--u) * 22); }
.sc-in { position: absolute; left: calc(var(--u) * 22); top: calc(var(--u) * 38); display: grid; gap: calc(var(--u) * 4); }
.sc-in span { display: flex; align-items: center; gap: calc(var(--u) * 5); width: calc(var(--u) * 118); height: calc(var(--u) * 20); padding: 0 calc(var(--u) * 8); box-sizing: border-box; border-radius: calc(var(--u) * 6);
  background: #fff; box-shadow: 0 0 0 calc(var(--u) * .5) rgba(207,203,195,.6), 0 calc(var(--u) * 2) calc(var(--u) * 6) rgba(61,56,46,.05);
  font-size: calc(var(--u) * 8); color: #8a857c; white-space: nowrap; transform: translateX(calc(var(--u) * var(--x, 0))) rotate(var(--r, 0deg)); }
.sc-in span::before { content: ""; flex: none; width: calc(var(--u) * 3.5); height: calc(var(--u) * 3.5); border-radius: 50%; background: #b3ac9f; }
.sc-line { position: absolute; height: calc(var(--u) * .6); background: #c9c3b8; }
.sc-line--a { left: calc(var(--u) * 148); top: calc(var(--u) * 87); width: calc(var(--u) * 12); }
.sc-line--b { left: calc(var(--u) * 186); top: calc(var(--u) * 87); width: calc(var(--u) * 14); }
.sc-node { position: absolute; left: calc(var(--u) * 160); top: calc(var(--u) * 74); width: calc(var(--u) * 26); display: grid; justify-items: center; text-align: center; }
.sc-node i { width: calc(var(--u) * 26); height: calc(var(--u) * 26); border-radius: 50%; background: #fff; box-shadow: 0 0 0 calc(var(--u) * .5) rgba(207,203,195,.7); }
.sc-node i { position: relative; }
.sc-node i::before, .sc-node i::after { content: ""; position: absolute; left: 30%; height: calc(var(--u) * .9); border-radius: 1px; background: #8a857c; }
.sc-node i::before { top: 40%; width: 40%; }
.sc-node i::after { top: 56%; width: 26%; }
.sc-node b { margin-top: calc(var(--u) * 5); font-size: calc(var(--u) * 8); font-weight: 500; color: #6b665e; }
.sc-node span { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: calc(var(--u) * 7); color: #8a857c; white-space: nowrap; }
.sc-park { position: absolute; left: calc(var(--u) * 214); top: calc(var(--u) * 112); width: calc(var(--u) * 146); padding: calc(var(--u) * 24) calc(var(--u) * 10) calc(var(--u) * 9); box-sizing: border-box; border-radius: calc(var(--u) * 9); background: #F2EFE9;
  box-shadow: 0 0 0 calc(var(--u) * .5) rgba(207,203,195,.7); display: grid; gap: calc(var(--u) * 3); }
.sc-park__r { display: flex; justify-content: space-between; align-items: baseline; gap: calc(var(--u) * 6); font-size: calc(var(--u) * 8); white-space: nowrap; }
.sc-park__r b { font-weight: 500; color: #8a857c; }
.sc-park__r em { font-style: normal; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: calc(var(--u) * 7); color: #8a857c; }
.sc-pri { left: calc(var(--u) * 206); top: calc(var(--u) * 36); width: calc(var(--u) * 162); padding: calc(var(--u) * 11) calc(var(--u) * 12) calc(var(--u) * 12); display: grid; gap: calc(var(--u) * 7); }
.sc-pri .fig-k { color: #5f5a51; }
.sc-pri__r { display: flex; align-items: center; gap: calc(var(--u) * 7); font-size: calc(var(--u) * 11); font-weight: 500; letter-spacing: -.01em; white-space: nowrap; }
.sc-pri__r i { display: grid; place-items: center; flex: none; width: calc(var(--u) * 13); height: calc(var(--u) * 13); border-radius: 50%; background: #0B7A78; color: #fff; font-size: calc(var(--u) * 7.5); font-weight: 600; }

/* Finanzcheck: the dense form behind, the conversational funnel lifted */
.fp-card { position: absolute; left: calc(var(--u) * 26); top: calc(var(--u) * 30); width: calc(var(--u) * 170); height: calc(var(--u) * 190); padding: calc(var(--u) * 12); box-sizing: border-box;
  background: #fff; border-radius: calc(var(--u) * 10); box-shadow: 0 0 0 calc(var(--u) * .5) rgba(207,203,195,.6), 0 calc(var(--u) * 6) calc(var(--u) * 18) rgba(61,56,46,.06); }
.fp-top { display: flex; align-items: center; gap: calc(var(--u) * 7); font-size: calc(var(--u) * 7.5); white-space: nowrap; }
.fp-tag { padding: calc(var(--u) * 2.5) calc(var(--u) * 6); border-radius: calc(var(--u) * 5); background: #F2EFE9; color: #8a857c; font-weight: 500; }
.fp-tag--win { background: color-mix(in srgb, #1F50B5 10%, #fff); color: #1F50B5; }
.fp-v { display: flex; align-items: center; gap: calc(var(--u) * 4); font-weight: 500; }
.fp-v::before { content: ""; width: calc(var(--u) * 5); height: calc(var(--u) * 5); border-radius: 50%; }
.fp-v--lose { color: #c99a8c; }
.fp-v--lose::before { box-shadow: inset 0 0 0 calc(var(--u) * 1) #c99a8c; }
.fp-v--win { color: #1F50B5; }
.fp-v--win::before { background: #1F50B5; box-shadow: 0 0 0 calc(var(--u) * 2.5) color-mix(in srgb, #1F50B5 16%, transparent); }
.fp-dense { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 4); margin: calc(var(--u) * 12) 0 calc(var(--u) * 10); }
.fp-dense b { height: calc(var(--u) * 7); border-radius: calc(var(--u) * 2); background: #F2EFE9; }
.fp-name { font-size: calc(var(--u) * 10.5); font-weight: 600; color: #8a857c; letter-spacing: -.01em; margin-bottom: calc(var(--u) * 6); }
.fp-pt { display: flex; align-items: center; gap: calc(var(--u) * 5); font-size: calc(var(--u) * 8); color: #a29d93; line-height: 1.9; white-space: nowrap; }
.fp-pt::before { content: ""; width: calc(var(--u) * 3.5); height: calc(var(--u) * 3.5); border-radius: 50%; background: #c9c3b8; }
.fp-win { left: calc(var(--u) * 168); top: calc(var(--u) * 20); width: calc(var(--u) * 194); padding: calc(var(--u) * 12) calc(var(--u) * 14) calc(var(--u) * 13); }
.fp-win .fp-name { font-size: calc(var(--u) * 12.5); color: #1f1e1b; margin-bottom: calc(var(--u) * 5); }
.fp-pt--win { color: #5f5a51; font-size: calc(var(--u) * 8.5); }
.fp-pt--win::before { background: #1F50B5; }
.fp-conv { display: grid; gap: calc(var(--u) * 6); margin: calc(var(--u) * 12) 0 calc(var(--u) * 11); }
.fp-conv span { display: block; height: calc(var(--u) * 4); border-radius: calc(var(--u) * 2); background: #F2EFE9; overflow: hidden; }
.fp-conv em { display: block; width: 34%; height: 100%; border-radius: inherit; background: #1F50B5; }
.fp-conv b { width: 62%; height: calc(var(--u) * 6); border-radius: calc(var(--u) * 3); background: #d6d2cb; }
.fp-conv u { height: calc(var(--u) * 16); border-radius: calc(var(--u) * 5); box-shadow: inset 0 0 0 calc(var(--u) * .6) #d6d2cb; }

/* IBMiX, Heineken: fragmented countries behind, the shared core lifted */
.hp-k { position: absolute; left: calc(var(--u) * 22); top: calc(var(--u) * 24); }
.hp-c { position: absolute; width: calc(var(--u) * 88); padding: calc(var(--u) * 8) calc(var(--u) * 8) calc(var(--u) * 9); box-sizing: border-box; border-radius: calc(var(--u) * 8); background: #fff;
  box-shadow: 0 0 0 calc(var(--u) * .5) rgba(207,203,195,.6), 0 calc(var(--u) * 3) calc(var(--u) * 10) rgba(61,56,46,.06); transform: rotate(var(--r, 0deg)); }
.hp-c b { display: block; font-size: calc(var(--u) * 8.5); font-weight: 600; color: #8a857c; }
.hp-c span { display: block; margin-top: calc(var(--u) * 3); font-family: "JetBrains Mono", ui-monospace, monospace; font-size: calc(var(--u) * 7); line-height: 1.35; color: #a29d93; }
.hp-arrow { position: absolute; left: calc(var(--u) * 206); top: calc(var(--u) * 104); width: calc(var(--u) * 14); height: calc(var(--u) * .6); background: #b3ac9f; }
.hp-arrow::after { content: ""; position: absolute; right: 0; top: 50%; width: calc(var(--u) * 4); height: calc(var(--u) * 4); border-top: calc(var(--u) * .6) solid #b3ac9f; border-right: calc(var(--u) * .6) solid #b3ac9f; transform: translate(0, -50%) rotate(45deg); }
.tu--fig .hp-core { left: calc(var(--u) * 226); top: calc(var(--u) * 46); width: calc(var(--u) * 142); background: none; box-shadow: none; border-radius: 0; }
.hp-lay { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 5); padding: 0 calc(var(--u) * 6); margin-bottom: calc(var(--u) * -5); }
.hp-lay span { display: grid; gap: calc(var(--u) * 2); padding: calc(var(--u) * 6) calc(var(--u) * 7) calc(var(--u) * 10); border-radius: calc(var(--u) * 7) calc(var(--u) * 7) 0 0; background: #fff; box-shadow: 0 0 0 calc(var(--u) * .5) rgba(207,203,195,.8); }
.hp-lay .hp-lay--next { background: #F2EFE9; }
.hp-lay b { font-size: calc(var(--u) * 8.5); font-weight: 600; }
.hp-lay em { font-style: normal; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: calc(var(--u) * 6.5); color: #5f5a51; white-space: nowrap; }
.hp-core__c { position: relative; padding: calc(var(--u) * 11) calc(var(--u) * 12) calc(var(--u) * 12); border-radius: calc(var(--u) * 12); background: #fff;
  box-shadow: 0 0 0 calc(var(--u) * .5) rgba(26,26,26,.08), 0 calc(var(--u) * 2) calc(var(--u) * 4) rgba(26,26,26,.06), 0 calc(var(--u) * 10) calc(var(--u) * 22) rgba(26,26,26,.13); }
.hp-core__c b { display: block; font-size: calc(var(--u) * 13); font-weight: 600; letter-spacing: -.015em; white-space: nowrap; }
.hp-core__c span { display: flex; gap: calc(var(--u) * 5); margin-top: calc(var(--u) * 6); font-family: "JetBrains Mono", ui-monospace, monospace; font-size: calc(var(--u) * 7.5); line-height: 1.35; color: #097E3A; }
.hp-dot { flex: none; width: calc(var(--u) * 5); height: calc(var(--u) * 5); margin-top: calc(var(--u) * 2.5); border-radius: 50%; background: #097E3A; box-shadow: 0 0 0 calc(var(--u) * 2.5) color-mix(in srgb, #097E3A 16%, transparent); }
.tu--fig .hp-core { box-shadow: none; }