/* ============================================================
   home.css — Terawatt v5 homepage page sheet
   ------------------------------------------------------------
   Rides on the common v5 stylesheet: v5-base.css (tokens / shell /
   spine / bar / foot / chrome) + v5-kit.css (token-driven components).
   Only homepage-specific compositions live here — same pattern as
   sol.css / pk.css / ec.css. Everything is driven by the palette
   tokens (--tw-bg / -fg / -mark / -line / -slogan-fg / -data-bg).
   ============================================================ */

/* ---- HERO product router (right aside) -------------------- */
.home-router a{ display:flex; align-items:center; gap:14px; }
.home-router .m{ width:26px; height:26px; flex:none; color:var(--node,#E8B92E); }
.home-router .rt{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.home-router .k{ font-family:var(--tw-font-mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--node,#E8B92E); }
.home-router .v{ font-family:var(--tw-font-display); font-weight:700; font-size:1rem; letter-spacing:-.02em; color:#F4F1EC; line-height:1.18; }
.home-router .arr{ margin-left:auto; opacity:.45; color:#F4F1EC; width:16px; height:16px; flex:none; transition:transform .2s var(--v5-ease,ease), opacity .2s; }
.home-router a:hover .arr{ opacity:1; transform:translateX(3px); }

/* ---- THE LOOP — 3 steps with connectors ------------------- */
.home-loop{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:clamp(36px,4vw,52px); }
@media(max-width:860px){ .home-loop{ grid-template-columns:1fr; gap:30px; } }
.home-step{ position:relative; border:1px solid var(--tw-line); background:var(--tw-data-bg); border-radius:var(--v5-radius,8px); padding:26px 24px; display:flex; flex-direction:column; gap:14px; }
.home-step__n{ font-family:var(--tw-font-mono); font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--tw-mark); font-weight:600; }
.home-step__verb{ font-family:var(--tw-font-display); font-weight:800; letter-spacing:-.035em; font-size:2rem; line-height:.98; color:var(--tw-fg); }
.home-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.home-chip{ display:inline-flex; align-items:center; gap:7px; font-family:var(--tw-font-mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--tw-slogan-fg); border:1px solid var(--tw-line); border-radius:99px; padding:5px 11px 5px 9px; }
.home-chip .m{ width:14px; height:14px; flex:none; color:var(--chip,var(--tw-mark)); }
.home-step p{ font-size:.9375rem; line-height:1.55; color:var(--tw-slogan-fg); margin:0; }
.home-step p strong{ color:var(--tw-fg); font-weight:600; }
.home-step__arrow{ position:absolute; right:-19px; top:42px; width:30px; height:30px; border-radius:50%; background:var(--tw-mark); color:#1A1D21; display:flex; align-items:center; justify-content:center; z-index:2; }
.home-step__arrow svg{ width:15px; height:15px; }
.home-step:last-child .home-step__arrow{ display:none; }
@media(max-width:860px){ .home-step__arrow{ right:50%; top:auto; bottom:-22px; transform:translateX(50%) rotate(90deg); } }

/* ---- PRODUCT ROUTE CARDS — meta "for" + feats ------------- */
.v5-card .v5-card__for{ font-family:var(--tw-font-mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:rgba(244,241,236,.74); display:flex; align-items:center; gap:7px; }
.v5-card .v5-card__for::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--card-accent); flex:none; }

/* ---- COMPOSITE BILL — before / after bars ----------------- */
.home-bill{ border:1px solid var(--tw-line); background:var(--tw-data-bg); border-radius:var(--v5-radius,8px); padding:clamp(20px,3vw,28px); }
.home-bill__head{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding-bottom:14px; margin-bottom:10px; border-bottom:1px solid var(--tw-line); }
.home-bill__head .ttl{ font-family:var(--tw-font-mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--tw-slogan-fg); }
.home-bill__legend{ display:flex; gap:16px; font-family:var(--tw-font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--tw-slogan-fg); }
.home-bill__legend span{ display:inline-flex; align-items:center; gap:7px; }
.home-bill__legend i{ width:14px; height:8px; border-radius:2px; display:inline-block; }
.home-bline{ display:grid; grid-template-columns:148px 1fr 58px; gap:14px; align-items:center; padding:8px 0; }
@media(max-width:560px){ .home-bline{ grid-template-columns:104px 1fr 46px; gap:9px; } }
.home-bline__name{ font-size:.875rem; color:var(--tw-fg); }
.home-bline__track{ position:relative; height:24px; }
.home-bline__bar{ position:absolute; top:0; left:0; height:24px; border-radius:3px; }
.home-bline__bar.before{ background:color-mix(in srgb, var(--tw-slogan-fg) 42%, transparent); }
.home-bline__bar.after{ background:var(--tw-mark); }
.home-bline__delta{ font-family:var(--tw-font-display); font-weight:800; font-size:.9rem; color:var(--tw-mark); text-align:right; white-space:nowrap; }
.home-bline__delta.flat{ color:var(--tw-slogan-fg); font-weight:600; }
.home-bill__total{ display:flex; justify-content:space-between; align-items:baseline; margin-top:14px; padding-top:16px; border-top:1px solid var(--tw-line); }
.home-bill__total .t{ font-family:var(--tw-font-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--tw-slogan-fg); }
.home-bill__total .was{ color:var(--tw-slogan-fg); text-decoration:line-through; margin-right:12px; font-family:var(--tw-font-display); font-weight:600; font-size:1rem; }
.home-bill__total .now{ color:var(--tw-mark); font-family:var(--tw-font-display); font-weight:800; font-size:1.4rem; letter-spacing:-.02em; }

/* ---- report figure (image-slot frame) --------------------- */
.home-figframe{ border:1px solid var(--tw-line); border-radius:var(--v5-radius,8px); overflow:hidden; background:var(--tw-data-bg); }
.home-figframe__bar{ display:flex; align-items:center; gap:10px; padding:11px 14px; border-bottom:1px solid var(--tw-line); }
.home-figframe__dots{ display:inline-flex; gap:6px; }
.home-figframe__dots i{ width:9px; height:9px; border-radius:50%; background:color-mix(in srgb, var(--tw-slogan-fg) 40%, transparent); }
.home-figframe__addr{ font-family:var(--tw-font-mono); font-size:10px; letter-spacing:.1em; color:var(--tw-slogan-fg); }
.home-figframe image-slot, .home-figframe img{ display:block; width:100%; aspect-ratio:16/10; object-fit:cover; }

/* small reassurance badge under the report */
.home-badge{ display:flex; align-items:center; gap:14px; margin-top:18px; padding:16px 18px; border:1px solid var(--tw-line); background:var(--tw-data-bg); border-radius:var(--v5-radius,8px); }
.home-badge .g{ font-family:var(--tw-font-display); font-weight:800; font-size:1.6rem; letter-spacing:-.03em; color:var(--tw-mark); line-height:1; }
.home-badge .gl{ font-size:.875rem; line-height:1.45; color:var(--tw-slogan-fg); }
.home-badge .gl strong{ color:var(--tw-fg); font-weight:600; }