/* =====================================================================
   HealthForward · How it works  (hiw-)
   Drop-in component. Every selector is scoped to .hiw or prefixed hiw-.
   Themes: light (default), dark via [data-theme="dark"] on any ancestor
   or on .hiw itself, and prefers-color-scheme when no theme is forced.
   ===================================================================== */

.hiw{
  /* page tokens (match the concept page) */
  --hiw-canvas:#ffffff;
  --hiw-sunken:#f4f6f8;
  --hiw-surface:#ffffff;
  --hiw-ink:#0f1c2a;
  --hiw-muted:#4f5b67;
  --hiw-subtle:#65717d;
  --hiw-border:#e3e7eb;
  --hiw-border-strong:#cfd6dc;
  --hiw-accent:#0a7b84;
  --hiw-accent-ink:#086a72;
  --hiw-accent-soft:#e6f3f4;
  --hiw-green-ink:#3f7a1c;
  --hiw-green-soft:#eef7e6;
  --hiw-you-bg:#eef1f4;
  --hiw-you-ink:#2b3846;
  --hiw-soon-bg:#fff4e0;
  --hiw-soon-ink:#8a4f00;
  --hiw-teal:#2AAFB5;
  --hiw-green:#7AC943;
  --hiw-grad:linear-gradient(135deg,#2AAFB5 0%,#7AC943 100%);
  --hiw-sh:15,28,42;
  --hiw-shadow-sm:0 0 0 1px rgba(var(--hiw-sh),.05),0 1px 2px rgba(var(--hiw-sh),.05),0 2px 6px -2px rgba(var(--hiw-sh),.06);
  --hiw-shadow-md:0 0 0 1px rgba(var(--hiw-sh),.05),0 1px 1px rgba(var(--hiw-sh),.03),0 6px 12px -4px rgba(var(--hiw-sh),.07),0 18px 36px -12px rgba(var(--hiw-sh),.12);
  --hiw-shadow-lg:0 0 0 1px rgba(var(--hiw-sh),.05),0 1px 1px rgba(var(--hiw-sh),.03),0 4px 8px -2px rgba(var(--hiw-sh),.04),0 16px 32px -8px rgba(var(--hiw-sh),.08),0 40px 80px -24px rgba(var(--hiw-sh),.16);
  --hiw-glass:rgba(255,255,255,.74);
  --hiw-glass-border:rgba(255,255,255,.9);
  --hiw-panel:radial-gradient(120% 90% at 85% 0%,rgba(42,175,181,.11),transparent 55%),radial-gradient(90% 70% at 0% 100%,rgba(122,201,67,.09),transparent 60%),linear-gradient(180deg,#fbfcfd,#f3f6f8);
  --hiw-panel-border:#e6eaee;
  /* Mac window */
  --hiw-mac-bg:#ffffff;
  --hiw-mac-bar:#f3f5f7;
  --hiw-mac-side:#f8f9fb;
  --hiw-mac-line:#e8ecef;
  --hiw-mac-ink:#0f1c2a;
  --hiw-mac-muted:#65717d;
  --hiw-field-bg:#ffffff;
  --hiw-row-alt:#fafbfc;
  /* motion */
  --hiw-ease:cubic-bezier(.22,1,.36,1);
  --hiw-header:72px;   /* height of the site's sticky header */
  --hiw-radius-card:16px;
  --hiw-radius-panel:24px;

  position:relative;
  padding:112px 0 120px;
  background:linear-gradient(180deg,var(--hiw-canvas) 0%,var(--hiw-sunken) 100%);
  color:var(--hiw-ink);
  font-family:Figtree,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:17px;
  line-height:1.6;
  scroll-margin-top:var(--hiw-header);
  overflow-x:clip;
}

/* ---------- dark theme ---------- */
.hiw[data-theme="dark"],
[data-theme="dark"] .hiw:not([data-theme="light"]){
  --hiw-canvas:#070B0F;--hiw-sunken:#0B1116;--hiw-surface:#0E1317;
  --hiw-ink:#E9EEF2;--hiw-muted:#A6AFB7;--hiw-subtle:#7F8991;
  --hiw-border:#1C2329;--hiw-border-strong:#2B343B;
  --hiw-accent:#4ECDC4;--hiw-accent-ink:#4ECDC4;--hiw-accent-soft:rgba(42,175,181,.14);
  --hiw-green-ink:#9BD96A;--hiw-green-soft:rgba(122,201,67,.13);
  --hiw-you-bg:rgba(255,255,255,.07);--hiw-you-ink:#D5DCE2;
  --hiw-soon-bg:rgba(245,166,35,.14);--hiw-soon-ink:#F5C26B;
  --hiw-sh:0,0,0;
  --hiw-shadow-sm:0 0 0 1px rgba(255,255,255,.06),0 2px 6px -2px rgba(0,0,0,.5);
  --hiw-shadow-md:0 0 0 1px rgba(255,255,255,.07),0 6px 12px -4px rgba(0,0,0,.45),0 18px 36px -12px rgba(0,0,0,.55);
  --hiw-shadow-lg:0 0 0 1px rgba(255,255,255,.06),inset 0 1px 0 rgba(255,255,255,.04),0 16px 32px -8px rgba(0,0,0,.5),0 40px 80px -24px rgba(0,0,0,.7);
  --hiw-glass:rgba(17,23,28,.66);--hiw-glass-border:rgba(255,255,255,.09);
  --hiw-panel:radial-gradient(120% 90% at 85% 0%,rgba(42,175,181,.16),transparent 55%),radial-gradient(90% 70% at 0% 100%,rgba(122,201,67,.10),transparent 60%),linear-gradient(180deg,#0E1418,#0A0F13);
  --hiw-panel-border:#1C2329;
  --hiw-mac-bg:#0E1317;--hiw-mac-bar:#151B20;--hiw-mac-side:#0B1014;--hiw-mac-line:#1C2329;
  --hiw-mac-ink:#E9EEF2;--hiw-mac-muted:#8C969E;--hiw-field-bg:#11171C;--hiw-row-alt:#10161A;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .hiw:not([data-theme="light"]){
    --hiw-canvas:#070B0F;--hiw-sunken:#0B1116;--hiw-surface:#0E1317;
    --hiw-ink:#E9EEF2;--hiw-muted:#A6AFB7;--hiw-subtle:#7F8991;
    --hiw-border:#1C2329;--hiw-border-strong:#2B343B;
    --hiw-accent:#4ECDC4;--hiw-accent-ink:#4ECDC4;--hiw-accent-soft:rgba(42,175,181,.14);
    --hiw-green-ink:#9BD96A;--hiw-green-soft:rgba(122,201,67,.13);
    --hiw-you-bg:rgba(255,255,255,.07);--hiw-you-ink:#D5DCE2;
    --hiw-soon-bg:rgba(245,166,35,.14);--hiw-soon-ink:#F5C26B;
    --hiw-sh:0,0,0;
    --hiw-shadow-sm:0 0 0 1px rgba(255,255,255,.06),0 2px 6px -2px rgba(0,0,0,.5);
    --hiw-shadow-md:0 0 0 1px rgba(255,255,255,.07),0 6px 12px -4px rgba(0,0,0,.45),0 18px 36px -12px rgba(0,0,0,.55);
    --hiw-shadow-lg:0 0 0 1px rgba(255,255,255,.06),inset 0 1px 0 rgba(255,255,255,.04),0 16px 32px -8px rgba(0,0,0,.5),0 40px 80px -24px rgba(0,0,0,.7);
    --hiw-glass:rgba(17,23,28,.66);--hiw-glass-border:rgba(255,255,255,.09);
    --hiw-panel:radial-gradient(120% 90% at 85% 0%,rgba(42,175,181,.16),transparent 55%),radial-gradient(90% 70% at 0% 100%,rgba(122,201,67,.10),transparent 60%),linear-gradient(180deg,#0E1418,#0A0F13);
    --hiw-panel-border:#1C2329;
    --hiw-mac-bg:#0E1317;--hiw-mac-bar:#151B20;--hiw-mac-side:#0B1014;--hiw-mac-line:#1C2329;
    --hiw-mac-ink:#E9EEF2;--hiw-mac-muted:#8C969E;--hiw-field-bg:#11171C;--hiw-row-alt:#10161A;
  }
}

.hiw *,.hiw *::before,.hiw *::after{box-sizing:border-box}
:where(.hiw) :where(h2,h3,p,ol,ul,figure){margin:0}
:where(.hiw) :where(ol,ul){padding:0;list-style:none}
.hiw svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none}
.hiw img{display:block}
.hiw-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.hiw-wrap{max-width:1200px;margin:0 auto;padding:0 24px}

/* ---------- header ---------- */
.hiw-head{max-width:720px;margin:0 auto 72px;text-align:center}
.hiw-eyebrow{font:600 14px/20px Figtree,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--hiw-accent-ink);margin-bottom:16px}
.hiw-h2{font:700 46px/52px Figtree,sans-serif;letter-spacing:-.025em;text-wrap:balance}
.hiw-intro{color:var(--hiw-muted);margin-top:20px;font-size:18px;line-height:1.6;text-wrap:balance}
.hiw-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:28px}

/* ---------- ownership chips ---------- */
.hiw-chip{display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 11px 0 9px;border-radius:999px;font:600 13px/1 Figtree,sans-serif;letter-spacing:.005em;white-space:nowrap;box-shadow:inset 0 0 0 1px rgba(var(--hiw-sh),.04)}
.hiw-chip svg{width:15px;height:15px}
.hiw-chip img{width:18px;height:12px}
.hiw-chip--hf{background:var(--hiw-accent-soft);color:var(--hiw-accent-ink)}
.hiw-chip--you{background:var(--hiw-you-bg);color:var(--hiw-you-ink)}
.hiw-chip--emp{background:var(--hiw-green-soft);color:var(--hiw-green-ink)}
.hiw-soon{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;background:var(--hiw-soon-bg);color:var(--hiw-soon-ink);font:600 12px/1 Figtree,sans-serif;white-space:nowrap}
.hiw-arrow{color:var(--hiw-subtle);font-size:14px}

/* ---------- layout: stacked (default, no-JS, reduced motion, < 1024) ---------- */
.hiw-body{position:relative}
.hiw-track{position:relative;max-width:680px;margin:0 auto}
.hiw-steps{position:relative;display:grid;gap:72px}
.hiw-step{position:relative;display:grid;grid-template-columns:36px minmax(0,1fr);column-gap:24px;row-gap:24px}
.hiw-dot{grid-column:1;grid-row:1;position:relative;z-index:1;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--hiw-surface);color:var(--hiw-subtle);font:700 13px/1 Figtree,sans-serif;font-variant-numeric:tabular-nums;box-shadow:0 0 0 1px var(--hiw-border-strong),0 0 0 6px var(--hiw-sunken);transition:color .4s var(--hiw-ease),background .4s var(--hiw-ease),box-shadow .4s var(--hiw-ease)}
.hiw-copy{grid-column:2;grid-row:1;padding-top:2px}
.hiw-figure{grid-column:1 / -1;grid-row:2}
.hiw-who{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:14px}
.hiw-h3{font:600 24px/32px Figtree,sans-serif;letter-spacing:-.012em;text-wrap:balance}
.hiw-text{color:var(--hiw-muted);margin-top:10px;max-width:46ch}
.hiw-aside{display:flex;gap:8px;align-items:flex-start;margin-top:16px;font-size:15px;line-height:1.5;color:var(--hiw-subtle)}
.hiw-aside svg{margin-top:3px;color:var(--hiw-accent)}

/* the connected line */
.hiw-rail{position:absolute;left:17px;top:var(--hiw-rail-top,18px);height:var(--hiw-rail-h,calc(100% - 36px));width:2px;border-radius:2px;background:var(--hiw-border);pointer-events:none}
.hiw-rail-fill{position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,#2AAFB5,#7AC943);transform-origin:top;transform:scaleY(var(--hiw-p,0))}
.hiw-step.is-done .hiw-dot{background:var(--hiw-accent);color:#fff;box-shadow:0 0 0 1px transparent,0 0 0 6px var(--hiw-sunken)}
.hiw-step.is-active .hiw-dot{background:var(--hiw-grad);color:#05070A;box-shadow:0 0 0 1px transparent,0 0 0 6px var(--hiw-sunken),0 0 0 7px rgba(42,175,181,.35),0 8px 24px rgba(42,175,181,.45)}
/* without JS the rail is fully drawn */
.hiw:not(.hiw--js) .hiw-rail-fill{transform:none;opacity:.35}

/* stacked figure panel */
.hiw-figure{position:relative;display:grid;place-items:center;padding:44px 20px;border-radius:var(--hiw-radius-panel);background:var(--hiw-panel);border:1px solid var(--hiw-panel-border);box-shadow:var(--hiw-shadow-md);overflow:hidden;min-width:0}
.hiw-stage{display:none}

/* ---------- layout: pinned (JS + >= 1024 + motion OK) ---------- */
.hiw--pinned .hiw-body{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:56px;align-items:start}
.hiw--pinned .hiw-track{max-width:none;margin:0}
.hiw--pinned .hiw-steps{gap:0}
.hiw--pinned .hiw-step{min-height:max(420px,calc((100vh - var(--hiw-header)) * .78));align-content:center}
.hiw--pinned .hiw-step:first-child{min-height:max(380px,calc((100vh - var(--hiw-header)) * .62));align-content:start;padding-top:max(80px,calc((100vh - var(--hiw-header)) * .26))}
.hiw--pinned .hiw-step:last-child{min-height:max(620px,calc(100vh - var(--hiw-header)))}
.hiw--pinned .hiw-copy{opacity:.38;transform:translateX(0);transition:opacity .5s var(--hiw-ease)}
.hiw--pinned .hiw-step.is-active .hiw-copy{opacity:1}
.hiw--pinned .hiw-h3{font-size:28px;line-height:36px}
.hiw--pinned .hiw-text{font-size:18px}

.hiw--pinned .hiw-stage{display:block;position:sticky;top:var(--hiw-header);height:calc(100vh - var(--hiw-header));min-height:620px;padding:24px 0}
.hiw-stage-card{position:relative;height:100%;max-height:720px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;border-radius:var(--hiw-radius-panel);background:var(--hiw-panel);border:1px solid var(--hiw-panel-border);box-shadow:var(--hiw-shadow-lg);overflow:hidden;isolation:isolate}
.hiw-stage-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.7)}
[data-theme="dark"] .hiw-stage-card::after{box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .hiw-stage-card::after{box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}}
.hiw-stage-head{display:flex;align-items:center;gap:14px;padding:18px 24px;font:600 13px/1 Figtree,sans-serif;color:var(--hiw-subtle);border-bottom:1px solid var(--hiw-panel-border)}
.hiw-stage-count{font-variant-numeric:tabular-nums;letter-spacing:.02em}
.hiw-stage-count b{color:var(--hiw-ink)}
.hiw-stage-label{color:var(--hiw-ink);transition:opacity .3s var(--hiw-ease)}
.hiw-stage-bars{display:flex;gap:6px;margin-left:auto}
.hiw-stage-bars i{width:22px;height:4px;border-radius:4px;background:var(--hiw-border-strong);transition:background .5s var(--hiw-ease),width .5s var(--hiw-ease)}
.hiw-stage-bars i.is-done{background:var(--hiw-accent)}
.hiw-stage-bars i.is-on{width:36px;background:var(--hiw-grad)}
.hiw-scenes{position:relative;flex:1;min-height:0}
.hiw-stage-cap{position:absolute;right:20px;bottom:16px;font:500 12px/1 Figtree,sans-serif;color:var(--hiw-subtle);padding:6px 10px;border-radius:999px;background:var(--hiw-glass);box-shadow:var(--hiw-shadow-sm)}

/* scenes inside the stage: only one is ever visible */
.hiw-scenes .hiw-figure{position:absolute;inset:0;padding:24px;border:0;border-radius:0;background:none;box-shadow:none;overflow:visible;
  opacity:0;visibility:hidden;transform:translateY(16px) scale(.98);
  transition:opacity .22s ease-in,transform .22s ease-in,visibility 0s linear .22s}
.hiw-scenes .hiw-figure.is-active{opacity:1;visibility:visible;transform:none;
  transition:opacity .6s var(--hiw-ease) .2s,transform .7s var(--hiw-ease) .2s,visibility 0s linear .2s}

/* ---------- jewel glow behind devices ---------- */
.hiw-jewel{position:relative;display:grid;place-items:center;width:100%;isolation:isolate}
.hiw-jewel::before{content:"";position:absolute;z-index:-1;left:50%;top:50%;width:min(420px,90%);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(closest-side,rgba(42,175,181,.30),transparent 70%),radial-gradient(closest-side at 70% 70%,rgba(122,201,67,.24),transparent 70%);filter:blur(40px);pointer-events:none}
.hiw-jewel--wide::before{width:min(560px,100%);aspect-ratio:1.5}

/* ---------- Mac window ---------- */
.hiw-mac{width:100%;max-width:540px;border-radius:14px;background:var(--hiw-mac-bg);color:var(--hiw-mac-ink);font:400 13px/1.45 Inter,system-ui,sans-serif;text-align:left;overflow:hidden;
  box-shadow:0 0 0 1px rgba(var(--hiw-sh),.08),0 1px 1px rgba(var(--hiw-sh),.04),0 8px 16px -6px rgba(var(--hiw-sh),.08),0 24px 48px -12px rgba(var(--hiw-sh),.16),0 56px 96px -32px rgba(var(--hiw-sh),.22)}
[data-theme="dark"] .hiw-mac{box-shadow:0 0 0 1px #2B343B,0 24px 48px -12px rgba(0,0,0,.6),0 56px 96px -32px rgba(0,0,0,.7)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .hiw-mac{box-shadow:0 0 0 1px #2B343B,0 24px 48px -12px rgba(0,0,0,.6),0 56px 96px -32px rgba(0,0,0,.7)}}
.hiw-mac-bar{display:flex;align-items:center;height:38px;padding:0 14px;background:var(--hiw-mac-bar);border-bottom:1px solid var(--hiw-mac-line)}
.hiw-mac-lights{display:flex;gap:7px;width:60px}
.hiw-mac-lights i{width:11px;height:11px;border-radius:50%;background:#ff5f57;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.12)}
.hiw-mac-lights i:nth-child(2){background:#febc2e}
.hiw-mac-lights i:nth-child(3){background:#28c840}
.hiw-mac-url{margin:0 auto;display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 12px;border-radius:7px;background:var(--hiw-mac-bg);color:var(--hiw-mac-muted);font-size:12px;box-shadow:inset 0 0 0 1px var(--hiw-mac-line)}
.hiw-mac-url svg{width:11px;height:11px}
.hiw-mac-sp{width:60px}
.hiw-mac-body{display:grid;grid-template-columns:128px minmax(0,1fr)}
.hiw-mac-side{display:flex;flex-direction:column;gap:2px;padding:14px 10px;background:var(--hiw-mac-side);border-right:1px solid var(--hiw-mac-line)}
.hiw-mac-side span{display:flex;align-items:center;gap:8px;height:30px;padding:0 9px;border-radius:8px;color:var(--hiw-mac-muted);font-size:12.5px;font-weight:500}
.hiw-mac-side span svg{width:14px;height:14px}
.hiw-mac-side span.is-on{background:var(--hiw-accent-soft);color:var(--hiw-accent-ink)}
.hiw-mac-main{padding:18px 20px 16px;min-width:0}
.hiw-crumb{font-size:11.5px;color:var(--hiw-mac-muted)}
.hiw-mac-title{font:600 18px/1.3 Figtree,sans-serif;letter-spacing:-.01em;margin-top:2px}
.hiw-file{display:flex;align-items:center;gap:10px;margin-top:14px;padding:10px 12px;border-radius:10px;background:var(--hiw-row-alt);box-shadow:inset 0 0 0 1px var(--hiw-mac-line)}
.hiw-file>span:nth-child(2){display:flex;flex-direction:column;min-width:0;flex:1}
.hiw-file b{font-weight:600;font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hiw-file small{font-size:11.5px;color:var(--hiw-mac-muted)}
.hiw-file-ic{display:grid;place-items:center;width:32px;height:32px;border-radius:8px;background:var(--hiw-accent-soft);color:var(--hiw-accent-ink)}
.hiw-pill{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 8px;border-radius:999px;font-size:11.5px;font-weight:600}
.hiw-pill svg{width:12px;height:12px;stroke-width:2.2}
.hiw-pill--ok{background:var(--hiw-green-soft);color:var(--hiw-green-ink)}
.hiw-table{width:100%;border-collapse:collapse;margin-top:12px;font-size:12.5px;font-variant-numeric:tabular-nums}
.hiw-table th{text-align:left;font-weight:500;font-size:11.5px;color:var(--hiw-mac-muted);padding:6px 8px;border-bottom:1px solid var(--hiw-mac-line)}
.hiw-table td{padding:7px 8px;border-bottom:1px solid var(--hiw-mac-line);white-space:nowrap}
.hiw-table td:first-child{display:flex;align-items:center;gap:8px;font-weight:500}
.hiw-table td:nth-child(2){color:var(--hiw-mac-muted)}
.hiw-av{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--hiw-accent-soft);color:var(--hiw-accent-ink);font:600 9.5px/1 Inter,sans-serif;flex:none}
.hiw-dot-ok{display:inline-block;width:7px;height:7px;border-radius:50%;background:#3f9a2a;margin-right:6px;box-shadow:0 0 0 3px rgba(63,154,42,.15)}
.hiw-mac-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px;padding-top:12px;border-top:1px solid var(--hiw-mac-line)}
.hiw-note{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--hiw-mac-muted);min-width:0}
.hiw-note svg{width:13px;height:13px}
.hiw-btn{display:inline-flex;align-items:center;height:30px;padding:0 12px;border-radius:8px;background:#0a7b84;color:#fff;font-weight:600;font-size:12px;white-space:nowrap;box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 1px 2px rgba(10,123,132,.4),0 4px 10px -2px rgba(10,123,132,.35)}
.hiw-form{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px;margin-top:14px}
.hiw-field{display:flex;flex-direction:column;gap:5px;min-width:0}
.hiw-field>span:first-child{font-size:11.5px;font-weight:500;color:var(--hiw-mac-muted)}
.hiw-field--full{grid-column:1 / -1}
.hiw-input{display:flex;align-items:center;height:34px;padding:0 10px;border-radius:8px;background:var(--hiw-field-bg);box-shadow:inset 0 0 0 1px var(--hiw-mac-line),0 1px 2px rgba(var(--hiw-sh),.04);font-size:12.5px;white-space:nowrap;overflow:hidden}
.hiw-input b{font-weight:600}
.hiw-input-ic{margin-left:auto;width:14px!important;height:14px!important;color:var(--hiw-mac-muted)}
.hiw-seg{display:grid;grid-template-columns:1fr 1fr;padding:3px;border-radius:9px;background:var(--hiw-row-alt);box-shadow:inset 0 0 0 1px var(--hiw-mac-line)}
.hiw-seg span{display:grid;place-items:center;height:28px;border-radius:6px;font-size:12.5px;font-weight:500;color:var(--hiw-mac-muted)}
.hiw-seg span.is-on{background:var(--hiw-mac-bg);color:var(--hiw-mac-ink);font-weight:600;box-shadow:0 0 0 1px var(--hiw-mac-line),0 1px 2px rgba(var(--hiw-sh),.08),0 2px 6px -2px rgba(var(--hiw-sh),.1)}

/* ---------- dark iPhone (screen drawn at 390x844, then scaled) ---------- */
.hiw-phone{--pw:260;--w:calc(var(--pw) * 1px);--s:calc(var(--pw) * .932 / 390);position:relative;width:var(--w);flex:none;padding:calc(var(--w) * .034);border-radius:calc(var(--w) * .16);background:#151B20;
  box-shadow:0 0 0 1px #2B343B,inset 0 0 0 1px rgba(255,255,255,.08),0 2px 4px rgba(var(--hiw-sh),.1),0 18px 36px -12px rgba(var(--hiw-sh),.28),0 48px 90px -28px rgba(var(--hiw-sh),.42)}
.hiw-phone-screen{position:relative;width:100%;aspect-ratio:390 / 844;border-radius:calc(var(--w) * .13);overflow:hidden;background:#05070A}
.hiw-scr{position:absolute;left:0;top:0;width:390px;height:844px;transform:scale(var(--s));transform-origin:0 0;background:radial-gradient(120% 50% at 50% 0%,rgba(42,175,181,.14),transparent 60%),#05070A;color:#fff;font:400 16px/1.4 Inter,system-ui,sans-serif;font-variant-numeric:tabular-nums;overflow:hidden;letter-spacing:0}
.hiw-island{position:absolute;left:50%;top:12px;width:122px;height:36px;margin-left:-61px;border-radius:20px;background:#000}
.hiw-status{position:absolute;left:0;right:0;top:0;height:58px;display:flex;align-items:center;justify-content:space-between;padding:4px 34px 0 40px;font:600 16px/1 Inter,sans-serif}
.hiw-status-r{display:flex;align-items:flex-end;gap:2px;height:12px}
.hiw-status-r i{width:3.5px;border-radius:1px;background:#fff}
.hiw-status-r i:nth-child(1){height:5px}.hiw-status-r i:nth-child(2){height:7px}.hiw-status-r i:nth-child(3){height:9.5px}.hiw-status-r i:nth-child(4){height:12px}
.hiw-pad{position:absolute;inset:72px 22px 0}
.hiw-back{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid #2B343B;color:#A6AFB7;font-size:26px;line-height:1}
.hiw-applogo{width:62px;height:auto;margin:40px 0 22px}
.hiw-a-title{font:600 32px/1.15 Outfit,sans-serif;letter-spacing:-.01em}
.hiw-a-sub{margin-top:10px;color:#A6AFB7;font-size:16px;line-height:1.45}
.hiw-a-label{margin-top:36px;color:#7F8991;font:600 12px/1 Inter,sans-serif;letter-spacing:.09em;text-transform:uppercase}
.hiw-code{display:grid;grid-template-columns:repeat(6,1fr);gap:9px;margin-top:12px}
.hiw-code span{display:grid;place-items:center;height:60px;border-radius:14px;background:#0E1317;box-shadow:inset 0 0 0 1px #2B343B;font:600 26px/1 Outfit,sans-serif}
.hiw-code span.is-caret{box-shadow:inset 0 0 0 1.5px #2AAFB5,0 0 0 4px rgba(42,175,181,.18)}
.hiw-code span.is-caret::after{content:"";width:2px;height:26px;border-radius:2px;background:#4ECDC4;animation:hiw-blink 1.1s steps(1) infinite}
@keyframes hiw-blink{50%{opacity:0}}
.hiw-a-btn{display:grid;place-items:center;height:56px;margin-top:30px;border-radius:16px;background:linear-gradient(90deg,#2AAFB5,#7AC943);color:#05070A;font:600 17px/1 Inter,sans-serif;box-shadow:0 8px 24px -8px rgba(42,175,181,.6)}
.hiw-a-link{margin-top:18px;text-align:center;color:#A6AFB7;font-size:15px}
.hiw-today{display:flex;align-items:center;justify-content:space-between;margin-top:4px}
.hiw-today small{display:block;color:#7F8991;font:600 12px/1 Inter,sans-serif;letter-spacing:.09em;text-transform:uppercase}
.hiw-today b{display:block;margin-top:6px;font:600 26px/1.1 Outfit,sans-serif}
.hiw-a-av{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,#1d5e63,#2f5a22);font:600 15px/1 Inter,sans-serif}
.hiw-a-card{margin-top:16px;border-radius:24px;background:#0E1317;box-shadow:inset 0 0 0 1px #1C2329}
.hiw-ringcard{padding:24px 18px 18px}
.hiw-ring{position:relative;width:216px;height:216px;margin:0 auto}
.hiw-ring svg{width:100%;height:100%;stroke:none;fill:none}
.hiw-ring-arc{transition:stroke-dasharray .12s linear}
.hiw-ring-c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.hiw-ring-c b{font:600 46px/1 Outfit,sans-serif;letter-spacing:-.01em}
.hiw-ring-c small{margin-top:8px;color:#A6AFB7;font-size:14px}
.hiw-convert{display:grid;grid-template-columns:repeat(3,1fr);margin-top:20px;padding-top:16px;border-top:1px solid #1C2329;text-align:center}
.hiw-convert span+span{border-left:1px solid #1C2329}
.hiw-convert b{display:block;font:600 24px/1 Outfit,sans-serif}
.hiw-convert span:first-child b{background:linear-gradient(90deg,#4ECDC4,#7AC943);-webkit-background-clip:text;background-clip:text;color:transparent}
.hiw-convert small{display:block;margin-top:7px;color:#7F8991;font-size:12.5px}
.hiw-sync{display:flex;align-items:center;gap:14px;padding:16px}
.hiw-sync>span:nth-child(2){flex:1}
.hiw-sync b{display:block;font-weight:600;font-size:15px}
.hiw-sync small{display:block;color:#7F8991;font-size:13px;margin-top:2px}
.hiw-sync-ic{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:rgba(42,175,181,.14);color:#4ECDC4}
.hiw-sync-ic svg{width:22px;height:22px}
.hiw-sync-ok{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:rgba(122,201,67,.16);color:#7AC943}
.hiw-sync-ok svg{width:15px;height:15px;stroke-width:2.4}
.hiw-tabbar{position:absolute;left:18px;right:18px;bottom:26px;height:70px;display:grid;grid-template-columns:repeat(4,1fr);align-items:center;border-radius:36px;background:rgba(14,19,23,.92);box-shadow:inset 0 0 0 1px #1C2329}
.hiw-tabbar span{display:flex;flex-direction:column;align-items:center;gap:5px;color:#7F8991;font-size:11.5px}
.hiw-tabbar svg{width:22px;height:22px}
.hiw-tabbar span.is-on{color:#4ECDC4}

/* ---------- glass floats ---------- */
.hiw-float{position:absolute;z-index:2;display:flex;gap:12px;padding:14px 16px;border-radius:var(--hiw-radius-card);background:var(--hiw-glass);-webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);box-shadow:var(--hiw-shadow-md),inset 0 0 0 1px var(--hiw-glass-border);color:var(--hiw-ink);text-align:left;font-size:13.5px;line-height:1.45}
.hiw-float b{font-weight:600}
.hiw-float small{display:block;color:var(--hiw-muted);font-size:12.5px;line-height:1.45;margin-top:2px}
.hiw-float-k{color:var(--hiw-subtle)!important;font:600 12px/1 Figtree,sans-serif!important;letter-spacing:.08em;text-transform:uppercase;margin:0!important}
.hiw-float-ic{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--hiw-accent-soft);color:var(--hiw-accent-ink);flex:none}
.hiw-float--invite{width:250px;right:max(16px,calc(50% - 300px));top:20%}
.hiw-float--employer{flex-direction:column;gap:9px;width:236px;left:max(16px,calc(50% - 300px));bottom:16%}
.hiw-emp-row{display:flex;align-items:center;gap:8px}
.hiw-emp-row b{flex:1}
.hiw-emp-row em{font-style:normal;font-weight:600;color:var(--hiw-accent-ink);font-variant-numeric:tabular-nums}
.hiw-emp-hidden{display:inline-flex;align-items:center;gap:6px;color:var(--hiw-subtle);font-size:12px}
.hiw-emp-hidden svg{width:14px;height:14px}

/* ---------- gift cards: wallet stack ---------- */
.hiw-jewel--wide:has(.hiw-fan){display:flex;flex-direction:column;align-items:center}
.hiw-fan{--cw:300px;--ch:189px;--off:46px;position:relative;width:var(--cw);max-width:100%;height:calc(var(--ch) + var(--off) * 3)}
.hiw-card{--i:0;position:absolute;left:0;right:0;top:calc(var(--off) * var(--i));height:var(--ch);padding:16px 18px;border-radius:16px;color:#fff;overflow:hidden;
  display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto 1fr;grid-template-areas:"name logo" "k k" "ic .";
  transform:scale(calc(1 - (3 - var(--i)) * .035));transform-origin:50% 0;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),inset 0 1px 0 rgba(255,255,255,.25),0 -1px 2px rgba(var(--hiw-sh),.06),0 10px 20px -8px rgba(var(--hiw-sh),.24),0 26px 44px -18px rgba(var(--hiw-sh),.3);
  transition:top .8s var(--hiw-ease),transform .8s var(--hiw-ease)}
.hiw-card::before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.2) 0%,rgba(255,255,255,0) 40%),radial-gradient(120% 90% at 100% 100%,rgba(255,255,255,.12),transparent 60%);pointer-events:none}
.hiw-card::after{content:"";position:absolute;right:-40px;bottom:-60px;width:200px;height:200px;border-radius:50%;border:22px solid rgba(255,255,255,.08);pointer-events:none}
.hiw-card--1{--i:0;background:linear-gradient(135deg,#0f1c2a,#24394d)}
.hiw-card--2{--i:1;background:linear-gradient(135deg,#0a7b84,#2AAFB5)}
.hiw-card--3{--i:2;background:linear-gradient(135deg,#3f7a1c,#7AC943)}
.hiw-card--4{--i:3;background:linear-gradient(135deg,#137d84 0%,#2AAFB5 45%,#7AC943 100%)}
.hiw-card-top{display:contents}
.hiw-card-name{grid-area:name;position:relative;z-index:1;font:600 17px/1.2 Figtree,sans-serif;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hiw-card-top img{grid-area:logo;position:relative;z-index:1;width:28px;height:19px;filter:brightness(0) invert(1);opacity:.85}
.hiw-card-k{grid-area:k;position:relative;z-index:1;margin-top:2px;font-size:12px;opacity:.75;letter-spacing:.02em}
.hiw-card-ic{grid-area:ic;align-self:end;position:relative;z-index:1;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.18);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.hiw-card-ic svg{width:18px;height:18px}
/* in the pinned stage the stack closes when hidden and fans open when shown */
.hiw-scenes .hiw-figure:not(.is-active) .hiw-card{top:calc(var(--off) * 1.5)}
.hiw-scenes .hiw-figure.is-active .hiw-card{transition-delay:.22s}
.hiw-float--balance{margin-top:-28px}
.hiw--pinned .hiw-fan{--cw:300px;--ch:189px;--off:44px}
@media (max-height:820px){.hiw--pinned .hiw-fan{--cw:270px;--ch:170px;--off:38px}}
@media (max-width:640px){.hiw-fan{--cw:260px;--ch:164px;--off:38px}.hiw-card-name{font-size:15.5px}.hiw-card{padding:13px 15px;border-radius:14px}}
@media (max-width:360px){.hiw-fan{--cw:232px;--ch:146px;--off:34px}}

.hiw-float--balance{position:relative;flex-direction:column;gap:8px;width:min(320px,100%)}
.hiw-bal-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.hiw-bal{font-size:14px;color:var(--hiw-muted)}
.hiw-bal b{font:700 28px/1 Figtree,sans-serif;color:var(--hiw-ink);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.hiw-bal-eq{display:block;margin-top:4px;color:var(--hiw-accent-ink);font-weight:600}
.hiw-bal-foot{display:flex;align-items:center;gap:6px;padding-top:8px;border-top:1px solid var(--hiw-border);color:var(--hiw-subtle);font-size:12px}
.hiw-bal-foot svg{width:13px;height:13px}

/* ---------- pinned sizing ---------- */
@media (max-width:1199px){
  .hiw--pinned .hiw-mac-body{grid-template-columns:minmax(0,1fr)}
  .hiw--pinned .hiw-mac-side{display:none}
}
.hiw--pinned .hiw-phone{--pw:244}
@media (max-height:820px){.hiw--pinned .hiw-phone{--pw:218}}
@media (max-height:700px){.hiw--pinned .hiw-phone{--pw:196}}

/* ---------- tablet / mobile ---------- */
@media (max-width:1023px){
  .hiw{padding:88px 0 96px}
  .hiw-head{margin-bottom:56px}
}
@media (max-width:640px){
  .hiw{padding:72px 0 80px;font-size:16px}
  .hiw-wrap{padding:0 20px}
  .hiw-head{text-align:left;margin-bottom:44px}
  .hiw-h2{font-size:32px;line-height:38px}
  .hiw-intro{font-size:17px}
  .hiw-legend{justify-content:flex-start}
  .hiw-steps{gap:56px}
  .hiw-step{grid-template-columns:32px minmax(0,1fr);column-gap:16px;row-gap:20px}
  .hiw-dot{width:32px;height:32px;font-size:12px}
  .hiw-rail{left:15px}
  .hiw-h3{font-size:21px;line-height:28px}
  .hiw-figure{grid-column:2;padding:32px 14px 20px;border-radius:20px}
  .hiw-phone{--pw:212}
  .hiw-mac-body{grid-template-columns:minmax(0,1fr)}
  .hiw-mac-side{display:none}
  .hiw-mac-main{padding:14px 14px 12px}
  .hiw-mac-url{font-size:11px;padding:0 8px}
  .hiw-mac-lights{width:44px;gap:5px}.hiw-mac-sp{width:44px}
  .hiw-mac-lights i{width:9px;height:9px}
  .hiw-form{grid-template-columns:1fr}
  .hiw-mac-foot{flex-wrap:wrap}
  /* floats sit under the device instead of beside it */
  .hiw-jewel{display:flex;flex-direction:column;align-items:center}
  .hiw-float--invite,.hiw-float--employer{position:relative;left:auto;right:auto;top:auto;bottom:auto;width:100%;max-width:300px;margin-top:-36px}
}
@media (max-width:420px){
  .hiw-hide-xs{display:none}
  .hiw-figure{grid-column:1 / -1}
  .hiw-mac-foot .hiw-btn{margin-left:auto}
}
@media (max-width:360px){
  .hiw-wrap{padding:0 16px}
  .hiw-phone{--pw:196}
}

/* ---------- focus + reduced motion ---------- */
.hiw :focus-visible{outline:2px solid var(--hiw-accent);outline-offset:3px;border-radius:4px}
@media (prefers-reduced-motion:reduce){
  .hiw *,.hiw *::before,.hiw *::after{transition:none!important;animation:none!important}
  .hiw-rail-fill{transform:none!important;opacity:.35}
}

/* QA polish: only the front card shows its label; invite banner sits over the phone's empty lower screen */
.hiw-card:not(.hiw-card--4) .hiw-card-k{visibility:hidden}
.hiw-bal-foot{white-space:nowrap}
.hiw--pinned .hiw-float--invite{top:auto;bottom:12%}
@media (max-width:360px){.hiw-bal-foot{white-space:normal}}
@media (min-width:641px) and (max-width:1023px){.hiw-float--invite{top:auto;bottom:8%}.hiw-float--employer{bottom:4%}}