/* How It Works v2 (page-how-it-works-v2.php). Touch-up layer over css/hiw-preview.css + css/hiw-steps.css (both read-only):
   Averta CY everywhere (Semibold headings, Regular body), logo colours, real dashboard screenshot frames,
   spec drawers (hardware-v2 pattern), one screen per section at 1440x800. */
@font-face { font-family:'Averta CY Web'; src:url('../fonts/om/AvertaCY-Regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Averta CY Web'; src:url('../fonts/om/AvertaCY-Semibold.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }
.hiw2 { --ink:#1D1D1B; --body:#3F4250; --muted:#6B7080; --peri:#2F8FD0; --green:#5E8A22; --navy2:#1D1D1B;
  --b:#4DAAE8; --g:#98C355; --y:#F7CA50; --r:#DB4B46; --font:'Averta CY Web','Averta CY',sans-serif; font-family:var(--font); }
.hiw2, .hiw2 * , .hiw2 .hs-card, .hiw2 .hiw-eyebrow, .hiw2 .hiw-btn, .hiw2 .hiw-btn--green, .hiw2 .ux-day * { font-family:var(--font) !important; }
.hiw2 h1, .hiw2 h2, .hiw2 h3, .hiw2 b, .hiw2 strong, .hiw2 .hiw-btn, .hiw2 .hiw-eyebrow, .hiw2 .hiw-pill, .hiw2 .hs-lbl, .hiw2 .hs-lg { font-weight:600 !important; }
.hiw2 h1, .hiw2 h2, .hiw2 h3 { color:var(--ink); }
.hiw2 .hiw-h2, .hiw2 .hiw-h1 { letter-spacing:-.5px; }
/* logo-colour accents (text shades darkened for contrast) */
.hiw2 .hiw-c1 { --c:#2F8FD0; --c50:rgba(77,170,232,.5); --c8:rgba(77,170,232,.12); }
.hiw2 .hiw-c2 { --c:#5E8A22; --c50:rgba(152,195,85,.55); --c8:rgba(152,195,85,.16); }
.hiw2 .hiw-c3 { --c:#B98A00; --c50:rgba(247,202,80,.6); --c8:rgba(247,202,80,.2); }
.hiw2 .hiw-c4 { --c:#C2453F; --c50:rgba(219,75,70,.5); --c8:rgba(219,75,70,.1); }
.hiw2 .hs-s1 { --tint:#EAF5FD; } .hiw2 .hs-s2 { --ac:#98C355; --tint:#F1F8E8; } .hiw2 .hs-s3 { --ac:#F7CA50; --tint:#FEF8E6; }
.hiw2 .hiw-eyebrow { background:rgba(77,170,232,.12); color:#2479B3; }
.hiw2 .hiw-h1 em, .hiw2 .hiw-h2 em { color:var(--peri); font-style:normal; }
.hiw2 .hs-txt .hiw-h2 em, .hiw2 .hiw-story .hiw-h2 em { color:var(--c); }
.hiw2 .hiw-band { background:rgba(77,170,232,.1); border-left-color:var(--b); }
.hiw2 .hiw-band p { color:var(--ink); font-weight:600; }
.hiw2 .hiw-btn--dark { background:#1D1D1B; }
.hiw2 .hiw-btn--green { background:#5E8A22; }
.hiw2 .hiw-steps { background:#F6F8FB; }
.hiw2 .hiw-step h3 { font-size:19px; line-height:1.3; }
.hiw2 .hiw-step p { font-size:15.5px; line-height:1.55; color:var(--body); }
/* hero */
.hiw2 .hiw-lead { font-size:19px; line-height:1.6; color:var(--body); }
.hiw2 .hiw-tile b { font-size:15px; }
.hiw2 .hiw-tile small { font-size:13.5px; line-height:1.45; color:var(--muted); }
.hiw2-t--b { background:rgba(77,170,232,.1); } .hiw2-t--g { background:rgba(152,195,85,.14); }
.hiw2-t--y { background:rgba(247,202,80,.16); } .hiw2-t--r { background:rgba(219,75,70,.08); }
.hiw2-cta { display:flex; align-items:center; gap:24px; margin-top:24px; flex-wrap:wrap; }
.hiw2-link { font-weight:600; color:var(--ink) !important; text-decoration:underline; text-underline-offset:4px; text-decoration-color:var(--b); min-height:44px; display:inline-flex; align-items:center; }
/* step 01 card: names only, no readings */
.hiw2 .hs-sig .hs-lbl { margin-bottom:8px; }
.hiw2 .hs-sig .hs-leg { display:grid; grid-template-columns:1fr 1fr; gap:6px 12px; }
.hiw2 .hs-lg { font-size:11.5px; color:#3F4250; }
.hiw2 .hiw2-on { font-size:10.5px; color:#5E8A22 !important; background:#F1F8E8; border-radius:20px; padding:1px 7px; }
/* spec button + drawers (copied from hardware-v2.css, re-scoped) */
.hiw2-specrow { margin-top:18px !important; } .hiw2-specrow--c { text-align:center; margin-top:24px !important; }
.hiw2 .hv2-specbtn { display:inline-flex; align-items:center; gap:10px; min-height:44px; padding:8px 16px 8px 12px; border:1px dashed #B9C2DA; border-radius:12px; background:#F7F8FC; color:#4A5175 !important; font-size:14.5px; font-weight:600; line-height:1.3; text-decoration:none; transition:background .2s, border-color .2s, color .2s; }
.hiw2 .hv2-specbtn:hover { background:#EEF4FD; border-color:#4DAAE8; color:#1D1D1B !important; }
.hv2-drawer { position:fixed; inset:0; z-index:100000; visibility:hidden; pointer-events:none; }
.hv2-drawer:target, .hv2-drawer.is-open { visibility:visible; pointer-events:auto; }
.hv2-specs.is-js .hv2-drawer:target:not(.is-open) { visibility:hidden; pointer-events:none; }
.hv2-drawer__scrim { position:absolute; inset:0; background:rgba(14,20,36,.5); opacity:0; transition:opacity .3s; }
.hv2-drawer__panel { position:absolute; top:0; right:0; bottom:0; width:min(560px, 100%); display:flex; flex-direction:column; background:#fff; box-shadow:-30px 0 60px -30px rgba(13,23,88,.45); transform:translateX(100%); transition:transform .38s cubic-bezier(.2,.7,.2,1); }
.hv2-drawer:target .hv2-drawer__scrim, .hv2-drawer.is-open .hv2-drawer__scrim { opacity:1; }
.hv2-drawer:target .hv2-drawer__panel, .hv2-drawer.is-open .hv2-drawer__panel { transform:none; }
.hv2-specs.is-js .hv2-drawer:target:not(.is-open) .hv2-drawer__panel { transform:translateX(100%); }
.hv2-drawer__head { position:relative; padding:24px 64px 18px 28px; border-bottom:1px solid #E7EAF2; }
.hiw2 .hv2-drawer__kick { font-size:11.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin:0 0 6px; }
.hiw2 .hv2-drawer__head h2 { font-size:clamp(22px, 2vw, 28px); line-height:1.2; margin:0; }
.hv2-drawer__x { position:absolute; top:18px; right:18px; width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:#F2F4F9; color:#1D1D1B !important; }
.hv2-drawer__body { flex:1; overflow-y:auto; overscroll-behavior:contain; padding:22px 28px 36px; }
.hv2-dl { margin:0; display:grid; border:1px solid #E7EAF2; border-radius:14px; overflow:hidden; }
.hv2-dl > div { display:grid; grid-template-columns:minmax(120px, 2fr) 3fr; gap:12px; padding:11px 14px; font-size:14.5px; line-height:1.45; }
.hv2-dl > div:nth-child(odd) { background:#F9FAFC; }
.hv2-dl dt { color:var(--muted); font-weight:600; } .hv2-dl dd { margin:0; color:var(--ink); }
.hiw2 .hv2-drawer__more { margin-top:18px; font-size:15px; } .hv2-drawer__more a { color:#2479B3 !important; font-weight:600; }
html.hv2-locked { overflow:hidden; }
/* real dashboard screenshot frame (steps 02, 03, 04) */
.hiw2-steps .hs-vis { aspect-ratio:6/5; display:flex; align-items:center; justify-content:center; padding:calc(26 * var(--u)); }
.hiw2-shot { position:relative; margin:0; width:100%; background:#fff; border:1px solid #E3E7F0; border-radius:14px; overflow:visible; box-shadow:0 24px 50px -28px rgba(13,23,88,.45); }
.hiw2-shot > img { display:block; width:100%; height:auto; aspect-ratio:16/10; border-radius:0 0 14px 14px; }
.hiw2-shot__bar { display:flex; align-items:center; gap:6px; height:28px; padding:0 12px; border-bottom:1px solid #EEF0F5; font-size:11.5px; font-weight:600; color:#6B7080; }
.hiw2-shot__bar i { width:8px; height:8px; border-radius:50%; background:#DB4B46; } .hiw2-shot__bar i:nth-child(2) { background:#F7CA50; } .hiw2-shot__bar i:nth-child(3) { background:#98C355; }
.hiw2-shot__bar span { margin-left:10px; }
.hiw2-shot figcaption { position:absolute; left:0; right:0; top:calc(100% + 10px); text-align:center; font-size:12px; line-height:1.3; color:#6B7080; }
.hiw2-tag { position:absolute; display:inline-flex; align-items:center; gap:7px; padding:7px 12px; background:#1D1D1B; color:#fff; border-radius:30px; font-size:12.5px; font-weight:600; line-height:1.2; white-space:nowrap; box-shadow:0 10px 24px -10px rgba(13,23,88,.6); }
.hiw2-tag .hs-live { background:#98C355; }
.hiw2-finds { list-style:none; margin:0; padding:0; position:absolute; right:-4%; bottom:14%; display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
.hiw2-finds .hs-chip { position:relative; left:auto; top:auto; font-size:13px; font-weight:600; padding:7px 12px 7px 8px; gap:8px; color:var(--ink); box-shadow:0 12px 26px -14px rgba(13,23,88,.5); }
.hiw2-finds .hs-chip i { width:22px; height:22px; }
.hiw2 .hs-s2 .hs-parts { z-index:0; } .hiw2 .hs-s2 .hiw2-shot { z-index:1; }
/* step 04: real screenshot + highlight panel */
.hiw2-s4 .hiw2-s4__media { padding:28px 28px 44px; background:#FCF1F0; }
.hiw2-s4 .hiw2-s4__media .hiw2-shot > img { max-height:none; width:100%; }
.hiw2-s4 .hiw-story__text > p { font-size:17px; }
.hiw2 .hiw2-hl { margin:22px 0 0; padding:1.4rem 1.6rem; max-width:none; }
.hiw2 .hiw2-hl .opti-hl__lines li { font-weight:600; font-size:1.08rem; }
.hiw2 .hiw2-hl .opti-hl__punch { font-size:1.05rem; margin-top:1rem; padding-top:.9rem; text-align:left; }
/* day section: fold + spacing to match */
.hiw2-day.hiw-fold { display:flex; align-items:center; }
.hiw2-day .ux-sec-in { width:min(1200px, calc(100% - 48px)); margin-inline:auto; }
.hiw2-day .ux-h2 { font-weight:600 !important; }
/* system: real hardware images keep proportions */
.hiw2 .hiw-sys { background:#F6F8FB; }
.hiw2 .hiw-node img { object-fit:contain; }
.hiw2 .hiw2-hw img { background:#fff; }
.hiw2 .hiw-node i { background:rgba(77,170,232,.14); color:#2479B3; }
.hiw2 .hiw-node:not(:last-child)::after { color:var(--b); }
.hiw2 .hiw-node p { color:var(--body); }
/* CTA */
.hiw2 .hiw-cta__box { background:rgba(152,195,85,.12); }
.hiw2 .hiw-cta .hiw-h2 em { color:#5E8A22; }
.hiw2 .hiw-hc em { color:#C2453F; font-style:normal; font-weight:600; }
@media (max-height:820px) and (min-width:992px) {
  .hiw2 .hiw-steps { padding:40px 0; }
  .hiw2 .hiw-flow { margin-top:24px !important; }
  .hiw2 .hiw-story__media { height:min(460px, calc(100vh - var(--hd) - 80px)); }
}
@media (max-width:991px) {
  .hiw2-steps .hs-vis { aspect-ratio:auto; padding:16px 16px 40px; }
  .hiw2-finds { position:static; align-items:stretch; margin-top:40px; }
  .hiw2-tag { font-size:11px; padding:5px 9px; }
  .hiw2-s4 .hiw2-s4__media { padding:16px 16px 40px; aspect-ratio:auto; height:auto; }
  .hiw2 .hiw-step h3 { font-size:17px; }
}
@media (max-width:640px) { .hiw2-cta .hiw-btn { width:100%; justify-content:center; white-space:normal; } .hiw2 .hiw-btn { white-space:normal; } }
@media (prefers-reduced-motion:reduce) { .hv2-drawer__panel, .hv2-drawer__scrim { transition:none; } }
/* hero tiles: 2 x 2 with the icon beside the text, so nothing wraps word-by-word */
.hiw2 .hiw-tiles { grid-template-columns:1fr 1fr !important; gap:10px !important; }
.hiw2 .hiw-tile { display:grid; grid-template-columns:30px 1fr; column-gap:12px; align-items:start; padding:12px 14px; }
.hiw2 .hiw-tile img { grid-row:span 2; margin:2px 0 0; }
.hiw2 .hiw-tile small { margin-top:2px; }
/* bigger real screenshots in steps 02/03 */
.hiw2-steps .hs-vis { padding:calc(16 * var(--u)) calc(16 * var(--u)) calc(34 * var(--u)); }
@media (max-width:991px) { .hiw2 .hiw2-s4 .hiw-story__media { order:2; } }
.hiw2-day .ux-day__head { grid-template-columns:1fr; align-items:start; } .hiw2-day .ux-day__note { margin-top:4px; }

/* ================= Round 2 (Oct 19 2026): branding pass to match home v10 =================
   Dark navy folds (hero, system, CTA), Hero A visual language, Insiders cards + gradient icon squares, blue pill buttons. */
.hiw2 { --navy:#0E1424; --cta:#1353e9; --line:#E3E7F2; }
.r2-eyebrow { display:flex; align-items:center; gap:5px; margin:0 0 16px; font-size:11.5px; font-weight:600 !important; letter-spacing:.12em; text-transform:uppercase; color:#2f7fb8; }
.r2-eyebrow i { width:6px; height:6px; border-radius:50%; background:var(--b); } .r2-eyebrow i:nth-child(2) { background:var(--g); } .r2-eyebrow i:nth-child(3) { background:var(--y); } .r2-eyebrow i:nth-child(4) { background:var(--r); margin-right:6px; }
.r2-eyebrow--c { justify-content:center; }
.r2-dark .r2-eyebrow { color:#8CC8F0; }
.hiw2 .r2-btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:56px; padding:0 30px; border-radius:999px; background:var(--cta); color:#fff !important; font-weight:600 !important; font-size:16.5px; text-decoration:none; box-shadow:0 10px 28px -10px rgba(19,83,233,.6),0 2px 6px -2px rgba(19,83,233,.3); transition:transform .18s, box-shadow .18s; }
.hiw2 .r2-btn:hover { transform:translateY(-2px); box-shadow:0 16px 34px -12px rgba(19,83,233,.65); }
.hiw2 .r2-btn--ghost { background:transparent; color:var(--ink) !important; border:1.5px solid #C9D2E6; box-shadow:none; }
.r2-dark .r2-btn--ghost, .r2-cta .r2-btn--ghost { color:#fff !important; border-color:rgba(255,255,255,.3); }
.r2-ic { flex:0 0 40px; width:40px; height:40px; border-radius:12px; display:grid; place-items:center; color:#fff; }
.r2-ic svg { width:20px; height:20px; display:block; }
.r2-ic--b { background:linear-gradient(145deg,#6cbcf0,#4DAAE8); box-shadow:0 8px 18px -8px #4DAAE8; }
.r2-ic--g { background:linear-gradient(145deg,#aed173,#98C355); box-shadow:0 8px 18px -8px #98C355; }
.r2-ic--y { background:linear-gradient(145deg,#ffd86f,#F7CA50); box-shadow:0 8px 18px -8px #F7CA50; color:#1D1D1B; }
.r2-ic--r { background:linear-gradient(145deg,#e86d68,#DB4B46); box-shadow:0 8px 18px -8px #DB4B46; }
/* dark sections */
.hiw2 .r2-dark { background:radial-gradient(120% 90% at 70% 40%,#16223d 0,#0a1020 55%,#05080f 100%) !important; color:#c6cfe2; }
.hiw2 .r2-dark h1, .hiw2 .r2-dark h2, .hiw2 .r2-dark h3, .hiw2 .r2-dark b { color:#fff; }
.hiw2 .r2-dark .hiw-lead, .hiw2 .r2-dark p, .hiw2 .r2-dark .hiw-sub { color:#c6cfe2; }
.hiw2 .r2-dark .hiw-h1 em, .hiw2 .r2-dark .hiw-h2 em { color:#4DAAE8; }
.hiw2 .r2-dark .hiw2-link { color:#fff !important; }
.hiw2 .r2-dark .hv2-specbtn { background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.22); color:#c6cfe2 !important; }
.hiw2 .r2-dark .hv2-specbtn:hover { background:rgba(77,170,232,.14); color:#fff !important; }
/* hero */
.hiw2 .r2-hero { overflow:hidden; }
.hiw2 .r2-hero .hiw-hero__grid { grid-template-columns:.85fr 1.15fr; align-items:center; }
.hiw2 .r2-hero .hiw-h1 { font-size:clamp(42px,4.4vw,64px); line-height:1.04; }
.r2-tiles { list-style:none; padding:0; margin:22px 0 0; display:grid !important; grid-template-columns:1fr 1fr; gap:10px; }
.r2-tile { display:flex; gap:12px; align-items:center; padding:11px 12px; border-radius:16px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09); line-height:1.3; }
.hiw2 .r2-tile b { display:block; font-size:15px; color:#fff; } .hiw2 .r2-tile small { display:block; margin-top:2px; font-size:13px; color:#aab6d8; }
.hiw2 .hiw-hero__art { position:relative; }
.r2h { position:relative; width:122%; margin:0 -14% 0 -4%; aspect-ratio:1800/965; }
.r2h__bld { display:block; width:100%; height:auto; filter:drop-shadow(0 30px 60px rgba(0,0,0,.6)) brightness(1.15); }
.r2h__ov { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.r2h__ln { fill:none; stroke-width:2.2; stroke-dasharray:3 9; stroke-linecap:round; opacity:.55; animation:r2Dash 1.4s linear infinite; }
.r2h__pulse { fill:none; stroke-width:4; stroke-linecap:round; stroke-dasharray:9 91; filter:drop-shadow(0 0 6px currentColor); animation:r2Pulse 2.6s cubic-bezier(.45,0,.55,1) infinite; animation-delay:calc(var(--i)*-.55s); }
@keyframes r2Dash { to { stroke-dashoffset:-12; } }
@keyframes r2Pulse { from { stroke-dashoffset:100; opacity:0 } 10% { opacity:1 } 90% { opacity:1 } to { stroke-dashoffset:0; opacity:0 } }
.r2h__eq { position:absolute; left:var(--x); top:var(--y); width:0; height:0; z-index:2; }
.r2h__eq i { position:absolute; left:-15px; top:-15px; width:30px; height:30px; border-radius:50%; background:radial-gradient(circle,rgba(219,75,70,.95) 0,rgba(219,75,70,.35) 45%,transparent 70%); animation:r2Glow 2.4s ease-in-out infinite; animation-delay:calc(var(--i)*.35s); }
.r2h__eq em { position:absolute; top:-15px; white-space:nowrap; font-style:normal; font-size:13px; font-weight:600; color:#fff; background:rgba(10,16,32,.88); border:1px solid rgba(255,255,255,.14); border-left:3px solid var(--c); border-radius:10px; padding:5px 10px; backdrop-filter:blur(4px); box-shadow:0 10px 26px rgba(0,0,0,.45); animation:r2In .7s cubic-bezier(.2,.8,.2,1) both; animation-delay:calc(.3s + var(--i)*.15s); }
.r2h__eq--r em { left:18px; } .r2h__eq--l em { right:18px; }
@keyframes r2Glow { 50% { transform:scale(1.5); opacity:.6; } }
@keyframes r2In { from { opacity:0; transform:translateY(10px); } }
.r2h__panel { position:absolute; left:var(--x); top:var(--y); width:0; height:0; z-index:3; }
.r2h__panel > i { position:absolute; left:-26px; top:-26px; width:52px; height:52px; border-radius:50%; background:radial-gradient(circle,rgba(77,170,232,.95) 0,rgba(77,170,232,.35) 40%,transparent 70%); }
.r2h__panel > i + i { background:none; border:2px solid rgba(77,170,232,.7); animation:r2Ring 2.4s ease-out infinite; }
@keyframes r2Ring { from { transform:scale(.4); opacity:1 } to { transform:scale(2.2); opacity:0 } }
.r2h__panel em { position:absolute; left:-110px; top:30px; width:220px; display:flex; align-items:center; gap:10px; font-style:normal; padding:9px 12px; border-radius:14px; background:rgba(9,14,28,.92); border:1px solid rgba(77,170,232,.6); box-shadow:0 0 0 4px rgba(77,170,232,.12),0 16px 40px rgba(0,0,0,.5); }
.r2h__panel em svg { flex:none; width:30px; height:30px; padding:4px; border-radius:9px; background:linear-gradient(145deg,#6cbcf0,#4DAAE8); fill:none; stroke:#fff; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.r2h__panel em span { display:flex; flex-direction:column; font-size:12px; line-height:1.3; color:#aab6d8; } .r2h__panel strong { color:#fff; font-size:14px; }
.r2h__note { position:absolute; right:14%; bottom:-2%; margin:0; font-size:11.5px; color:#7d88a3 !important; }
/* 4-step cards (Insiders card style) */
.hiw2 .r2-steps { background:#f7f9fc; }
.r2-cards { list-style:none; padding:0; display:grid !important; grid-template-columns:repeat(4,1fr); gap:16px; }
.r2-card { position:relative; background:#fff; border:1px solid #edf0f5; border-radius:24px; padding:24px 22px 22px; box-shadow:0 24px 60px -34px rgba(29,29,27,.35); }
.r2-card .r2-ic { margin-bottom:16px; }
.r2-card__n { position:absolute; top:24px; right:22px; font-size:13px; font-weight:600; color:#8F96B0; letter-spacing:.06em; }
.hiw2 .r2-card h3 { font-size:19px; line-height:1.3; margin:0 0 6px; } .hiw2 .r2-card p { margin:0; font-size:15px; line-height:1.5; color:var(--body); }
.r2-band { margin:28px auto 0; max-width:980px; display:flex; align-items:center; justify-content:space-between; gap:22px; padding:16px 18px 16px 28px; border-radius:22px; background:#0f172a; }
.hiw2 .r2-band p { margin:0; color:#fff; font-weight:600; font-size:17px; }
/* steps 01-03: neutral visual frames instead of pastel tints */
.hiw2 .hs-s1, .hiw2 .hs-s2, .hiw2 .hs-s3 { --tint:#F2F5FA; }
.hiw2 .hs-vis { background:#F2F5FA !important; border:1px solid #E3E7F2; }
.hiw2 .hiw-pill { background:#fff; border:1px solid #E3E7F2; color:var(--ink); }
.hiw2 .hiw-callout { background:#fff; border:1px solid #edf0f5; border-left:3px solid var(--c50); border-radius:14px; box-shadow:0 18px 40px -30px rgba(29,29,27,.35); }
/* step 01: dark hardware card */
.hiw2 .r2-s1 { background:transparent !important; border:0 !important; padding:0 !important; }
.r2-s1__box { width:100%; height:100%; display:flex; flex-direction:column; justify-content:center; gap:20px; padding:28px; border-radius:24px; background:radial-gradient(120% 90% at 70% 30%,#16223d 0,#0a1020 60%,#05080f 100%); box-shadow:0 30px 60px -30px rgba(5,8,15,.8); }
.hiw2 .r2-s1__k { order:0; margin:0; display:flex; align-items:center; gap:8px; font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:#8CC8F0; }
.r2-s1__live { width:8px; height:8px; border-radius:50%; background:#98C355; box-shadow:0 0 0 0 rgba(152,195,85,.6); animation:r2Ping 1.8s infinite; }
@keyframes r2Ping { 70% { box-shadow:0 0 0 10px rgba(152,195,85,0); } }
.hiw2 .r2-s1__tags { order:1; margin:0; display:flex; flex-wrap:wrap; gap:8px; }
.r2-s1__tags span { font-size:13px; font-weight:600; color:#fff; padding:5px 10px; border-radius:10px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-left:3px solid var(--c); }
.r2-s1__path { order:2; list-style:none; margin:0; padding:0; display:flex; align-items:center; gap:8px; }
.r2-s1__path > li:not(.r2-s1__flow) { flex:1; display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; }
.r2-s1__img { display:block; width:100%; aspect-ratio:1; border-radius:18px; background:radial-gradient(circle at 50% 40%,rgba(255,255,255,.16),rgba(255,255,255,.03) 70%); border:1px solid rgba(255,255,255,.1); border-bottom:3px solid var(--c); }
.r2-s1__img img { width:100%; height:100%; object-fit:contain; padding:10%; }
.hiw2 .r2-s1__path b { font-size:14px; color:#fff; }
.r2-s1__flow { flex:0 0 34px; display:flex; gap:5px; justify-content:center; margin-bottom:28px; }
.r2-s1__flow i { width:6px; height:6px; border-radius:50%; background:#4DAAE8; opacity:.25; animation:r2Flow 1.2s linear infinite; }
.r2-s1__flow i:nth-child(2) { animation-delay:.2s; } .r2-s1__flow i:nth-child(3) { animation-delay:.4s; }
@keyframes r2Flow { 40% { opacity:1; transform:scale(1.3); } }
.hiw2 .r2-s1__cap { order:3; margin:0; font-size:12.5px; color:#8f9ab5; }
/* step 04 */
.hiw2 .hiw2-s4 .hiw2-s4__media { background:#F2F5FA; border:1px solid #E3E7F2; }
/* system (dark): glass cards */
.hiw2 .r2-dark .hiw-node { background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); border-radius:20px; box-shadow:none; }
.hiw2 .r2-dark .hiw-node img, .hiw2 .r2-dark .hiw2-hw img { background:transparent; }
.hiw2 .r2-dark .hiw-node p { color:#aab6d8; }
.hiw2 .r2-dark .hiw-node i { background:#4DAAE8; color:#06101f; }
/* CTA: navy box like home */
.hiw2 .r2-cta { background:#fff; }
.hiw2 .r2-cta .hiw-cta__box { background:radial-gradient(700px 400px at 85% 20%,rgba(77,170,232,.22),transparent 70%),#0E1424 !important; border-radius:28px; }
.hiw2 .r2-cta h2, .hiw2 .r2-cta .hiw-feat li { color:#fff; } .hiw2 .r2-cta .hiw-cta__text > p, .hiw2 .r2-cta .hiw-small { color:#c6cfe2 !important; }
.hiw2 .r2-cta .hiw-h2 em { color:#98C355; }
.hiw2 .r2-cta .hiw-feat li { display:flex; align-items:center; gap:10px; }
.hiw2 .r2-cta .hiw-hc { background:#fff; }
@media (prefers-reduced-motion:reduce) {
  .r2h__ln, .r2h__pulse, .r2h__eq i, .r2h__eq em, .r2h__panel > i, .r2-s1__live, .r2-s1__flow i { animation:none !important; }
  .r2h__pulse { display:none; } .r2-s1__flow i { opacity:.8; }
}
@media (max-width:991px) {
  .hiw2 .r2-hero .hiw-hero__grid { grid-template-columns:1fr; }
  .r2h { width:112%; margin:6px -6% 18px; }
  .r2-cards { grid-template-columns:1fr 1fr; }
}
@media (max-width:640px) {
  .r2-tiles { grid-template-columns:1fr; }
  .r2-cards { grid-template-columns:1fr; gap:12px; }
  .r2-card { padding:18px 18px 18px; display:grid; grid-template-columns:40px 1fr; column-gap:14px; border-radius:20px; }
  .r2-card .r2-ic { grid-row:span 2; margin:0; } .hiw2 .r2-card h3 { font-size:17px; padding-right:28px; } .r2-card__n { top:18px; right:18px; }
  .r2-band { flex-direction:column; align-items:stretch; padding:18px; text-align:center; }
  .hiw2 .r2-btn { width:100%; white-space:normal; text-align:center; padding:0 18px; }
  .r2h__eq em { font-size:10.5px; padding:3px 7px; top:-12px; }
  .r2h__panel em { width:178px; left:-89px; top:22px; padding:6px 9px; } .r2h__panel em svg { width:24px; height:24px; }
  .r2h__panel strong { font-size:12.5px; } .r2h__panel em span { font-size:10.5px; }
  .r2h__note { right:8%; bottom:-6%; font-size:10.5px; }
  .r2-s1__box { padding:20px 16px; gap:14px; } .r2-s1__flow { flex-basis:18px; gap:3px; } .r2-s1__flow i { width:4px; height:4px; }
  .hiw2 .r2-s1__path b { font-size:12.5px; }
}
/* round 2 tune-ups */
@media (min-width:992px) { .hiw2 .r2-hero { min-height:calc(100svh - var(--hd, 84px)); display:flex; align-items:center; } .hiw2 .r2-hero .hiw-wrap { width:100%; } }
.hiw2 .r2-hero .hiw2-cta { flex-wrap:nowrap; }
.r2h__ln { stroke-width:2.8; opacity:.85; stroke-dasharray:4 8; filter:drop-shadow(0 0 3px currentColor); }
.r2h__pulse { stroke-width:5; }
.hiw2 .r2-dark .hiw-node img { background:#fff !important; border-radius:14px; padding:6px; }
@media (max-width:1180px) { .hiw2 .r2-hero .hiw2-cta { flex-wrap:wrap; } }
@media (max-width:640px) {
  .hiw2 .hiw-tiles.r2-tiles { grid-template-columns:1fr !important; }
  .hiw2 .r2-btn { font-size:15.5px; min-height:54px; }
}