/* Tīrama consumer site · Design Skill v2.4 layer
   Grounds alternate petrol and bone. Teal is type on petrol only; on bone it is a shape.
   Amber is never type. One teal, #14C3A8. Every module has a static equivalent under
   prefers-reduced-motion. All selectors are scoped under #main.v24 so the older page
   layers cannot reach in, and these rules cannot reach out. */
:root{ --v-petrol:#0A2530; --v-petrol-2:#0D2E3B; --v-bone:#FBF9F4; --v-white:#FFFFFF; --v-band:#E8F3F0; --v-band-line:#CFE3DE; --v-band-amber:#FCF1D8; --v-band-amber-line:#EFE0BC; --v-line:#E6E1D6; --v-field-line:#D6D0C2; --v-ink:#0A2530; --v-ink-2:#4C5A61; --v-ink-hover:#06323F; --v-amber:#FFC01F; --v-amber-2:#F0AC00; --v-teal:#14C3A8; --v-on-dk:rgba(251,249,244,.80); --v-on-dk-soft:rgba(251,249,244,.60); --v-on-dk-line:rgba(251,249,244,.16); --v-on-dk-fill:rgba(251,249,244,.08); --v-display:'Barlow Condensed','Inter',sans-serif; --v-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif; --v-ease-out:cubic-bezier(.23,1,.32,1); --v-ease-both:cubic-bezier(.77,0,.175,1); --v-shadow-button:0 14px 30px -16px rgba(10,37,48,.5); --v-shadow-card-hover:0 22px 44px -26px rgba(10,37,48,.42); --v-shadow-float:0 40px 80px -40px rgba(0,0,0,.6); --v-pad:clamp(3.5rem,7vw,8rem); --v-wrap:min(1180px,90vw); }
/* ---------- frame ---------- */
#main.v24{ display:block; font-family:var(--v-body); color:var(--v-ink-2); }
#main.v24 *{ box-sizing:border-box; }
#main.v24 .v-wrap{ width:var(--v-wrap); margin:0 auto; }
#main.v24 .v-sec{ padding:var(--v-pad) 0; position:relative; }
#main.v24 .v-lt{ background:var(--v-bone) !important; color:var(--v-ink-2); }
#main.v24 .v-tb{ background:var(--v-band) !important; border-top:1px solid var(--v-band-line); border-bottom:1px solid var(--v-band-line); }
#main.v24 .v-ab{ background:var(--v-band-amber) !important; border-top:1px solid var(--v-band-amber-line); border-bottom:1px solid var(--v-band-amber-line); }
#main.v24 .v-dk{ background:var(--v-petrol) !important; color:var(--v-on-dk); }
#main.v24 p{ max-width:none; margin:0; }
html[data-palette] #main.v24 p, html[data-palette] #main.v24 li{ color:inherit; }
/* type: beats the older h1/h2/h3 !important layer on specificity */
html[data-palette] #main.v24 h1, html[data-palette] #main.v24 h2, html[data-palette] #main.v24 h3{ font-family:var(--v-display) !important; font-weight:800 !important; color:var(--v-ink) !important; letter-spacing:-.01em; text-wrap:balance; }
#main.v24 h1, #main.v24 h2, #main.v24 h3{ margin:0; }
html[data-palette] #main.v24 .v-dk h1, html[data-palette] #main.v24 .v-dk h2, html[data-palette] #main.v24 .v-dk h3, html[data-palette] #main.v24 .v-ans h3{ color:var(--v-bone) !important; }
html[data-palette] #main.v24 h1{ font-size:clamp(3rem,6.6vw,6rem); line-height:.92 !important; letter-spacing:-.03em; }
html[data-palette] #main.v24 h2{ font-size:clamp(2.2rem,4vw,3.4rem); line-height:1 !important; }
html[data-palette] #main.v24 h3{ line-height:1.05 !important; }
#main.v24 .v-dk h1 .t{ color:var(--v-teal); }
/* eyebrow: amber dash, petrol label on bone; teal label on petrol */
#main.v24 .v-eye{ display:inline-flex; align-items:center; gap:.7rem; font-size:.74rem !important; font-weight:800; letter-spacing:.24em !important; line-height:1.4; text-transform:uppercase; color:var(--v-ink-2); margin:0 0 .9rem; }
#main.v24 .v-eye::before{ content:''; width:28px; height:4px; border-radius:99px; background:var(--v-amber); flex:0 0 auto; }
#main.v24 .v-dk .v-eye{ color:var(--v-teal); }
#main.v24 .v-dk .v-eye::before{ background:var(--v-teal); }
#main.v24 .v-lede{ font-size:clamp(1.05rem,1.45vw,1.3rem); line-height:1.55; max-width:42ch; }
/* pills */
#main.v24 .v-pill{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; border-radius:999px; font-family:var(--v-body); font-weight:800; line-height:1; text-decoration:none; cursor:pointer; border:0; padding:1rem 1.75rem; font-size:1rem; white-space:nowrap; transition:transform .2s var(--v-ease-out),background-color .16s,border-color .16s; }
#main.v24 .v-pill:active{ transform:scale(.975); }
#main.v24 .v-pill:focus-visible{ outline:3px solid var(--v-teal); outline-offset:3px; }
#main.v24 .v-amber{ background:var(--v-amber); color:var(--v-ink); box-shadow:var(--v-shadow-button); }
#main.v24 .v-amber:hover{ background:var(--v-amber-2); }
#main.v24 .v-ghost{ background:transparent; color:var(--v-ink); border:1.5px solid rgba(10,37,48,.28); }
#main.v24 .v-ghost:hover{ border-color:var(--v-ink); }
#main.v24 .v-dk .v-ghost, #main.v24 .v-ghost.on-dk{ color:var(--v-bone); border-color:var(--v-on-dk-line); }
#main.v24 .v-dk .v-ghost:hover, #main.v24 .v-ghost.on-dk:hover{ border-color:var(--v-bone); }
#main.v24 .v-line{ color:var(--v-ink) !important; font-weight:700; text-decoration:none; box-shadow:inset 0 -2px 0 var(--v-teal); padding-bottom:1px; }
#main.v24 .v-line:hover{ box-shadow:inset 0 -3px 0 var(--v-teal); }
#main.v24 .v-dk .v-line{ color:var(--v-teal) !important; box-shadow:inset 0 -2px 0 var(--v-teal); }
/* ---------- hero: the day at your place ---------- */
#main.v24 .v-contours{ position:absolute; inset:-10% -5%; width:110%; height:120%; z-index:0; opacity:.55; pointer-events:none; will-change:transform; transition:transform .6s var(--v-ease-out); }
#main.v24 .v-contours path{ fill:none; stroke:var(--v-on-dk-fill); stroke-width:1.2; }
#main.v24 .v-addr{ display:flex; gap:.6rem; max-width:36rem; margin-top:1.75rem; }
#main.v24 .v-addr input{ flex:1; min-width:0; border-radius:14px; border:1.5px solid var(--v-on-dk-line) !important; background:rgba(251,249,244,.06) !important; color:var(--v-bone) !important; font:inherit; font-size:1rem; padding:.95rem 1.1rem; outline:none; }
#main.v24 .v-addr input::placeholder{ color:var(--v-on-dk-soft); }
#main.v24 .v-addr input:focus-visible{ outline:3px solid var(--v-teal); outline-offset:1px; border-color:transparent !important; }
/* legal strip: real, never leading */
/* ---------- the offer ---------- */
/* ---------- the story ---------- */
#main.v24 .v-story{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(2rem,6vw,7rem); }
#main.v24 .v-story .vis{ position:sticky; top:calc(var(--v-nav-h,110px) + 1.5rem); height:min(70dvh,560px); display:flex; align-items:center; }
#main.v24 .v-story .vis svg{ width:100%; height:auto; }
#main.v24 .v-story .vis g[data-s]{ opacity:.16; transition:opacity .6s var(--v-ease-out); }
#main.v24 .v-story .vis[data-step="1"] g[data-s="1"], #main.v24 .v-story .vis[data-step="2"] g[data-s="2"], #main.v24 .v-story .vis[data-step="3"] g[data-s="3"], #main.v24 .v-story .vis[data-step="4"] g[data-s="4"], #main.v24 .v-story .vis[data-step="5"] g[data-s="5"]{ opacity:1; }
#main.v24 .v-story .vis .fill{ transition:height 1s var(--v-ease-out),y 1s var(--v-ease-out); }
#main.v24 .v-steps{ display:grid; gap:28vh; padding:18vh 0; }
#main.v24 .v-step{ opacity:.25; transition:opacity .5s var(--v-ease-out); }
#main.v24 .v-step.on{ opacity:1; }
#main.v24 .v-step .n{ font-family:var(--v-display); font-weight:800; font-size:clamp(3.5rem,7vw,6rem); line-height:.9; color:var(--v-ink); margin-bottom:.6rem; display:inline-block; box-shadow:inset 0 -.18em 0 var(--v-amber); }
#main.v24 .v-step h3{ font-size:clamp(1.9rem,3.4vw,2.8rem); margin-bottom:.8rem; }
#main.v24 .v-step p{ font-size:1.1rem; line-height:1.6; max-width:36ch; }
#main.v24 .v-story-head{ max-width:40rem; margin-bottom:1rem; }
/* ---------- the power cut ---------- */
/* ---------- the share ladder ---------- */
/* ---------- the journey ---------- */
/* ---------- the questions ---------- */
#main.v24 .v-pal{ max-width:820px; margin:0 auto; }
#main.v24 .v-pal .head{ text-align:center; margin-bottom:1.6rem; }
#main.v24 .v-pal input{ width:100%; border-radius:999px !important; border:1.5px solid var(--v-field-line) !important; background:var(--v-white) !important; color:var(--v-ink) !important; font:inherit; font-size:1.15rem; padding:1.1rem 1.5rem; outline:none; }
#main.v24 .v-pal input:focus-visible{ outline:3px solid var(--v-teal); outline-offset:1px; }
#main.v24 .v-pal .list{ margin-top:1rem; display:grid; gap:.45rem; }
#main.v24 .v-pal .list button{ text-align:left; background:var(--v-white); border:1px solid var(--v-line); border-radius:14px; padding:1rem 1.2rem; font-family:var(--v-display); font-weight:800; font-size:1.35rem; color:var(--v-ink); cursor:pointer; transition:transform .2s var(--v-ease-out),box-shadow .2s var(--v-ease-out),border-color .2s; }
#main.v24 .v-pal .list button:hover, #main.v24 .v-pal .list button[aria-selected="true"]{ transform:translateY(-2px); box-shadow:var(--v-shadow-card-hover); border-color:var(--v-teal); }
#main.v24 .v-pal .list button:focus-visible{ outline:3px solid var(--v-teal); outline-offset:2px; }
#main.v24 .v-pal .none{ padding:1rem; color:var(--v-ink-2); }
#main.v24 .v-ans{ margin-top:1.2rem; background:var(--v-petrol); color:var(--v-on-dk); border-radius:22px; padding:2rem; display:none; }
#main.v24 .v-ans.on{ display:block; animation:v-pop .4s var(--v-ease-out); }
#main.v24 .v-ans .q{ font-size:.74rem; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:var(--v-teal); }
#main.v24 .v-ans h3{ font-size:clamp(1.6rem,3vw,2.3rem); margin:.5rem 0 1rem; }
#main.v24 .v-ans p{ font-size:1.08rem; line-height:1.65; margin-bottom:1.2rem; }
#main.v24 .v-ans a{ color:var(--v-teal); font-weight:700; text-decoration:none; box-shadow:inset 0 -2px 0 var(--v-teal); margin-right:1.2rem; font-size:.92rem; display:inline-block; margin-bottom:.4rem; }
/* ---------- the bill ---------- */
#main.v24 .v-billg{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(2rem,5vw,5rem); align-items:start; }
#main.v24 .v-expl{ position:sticky; top:calc(var(--v-nav-h,110px) + 1.5rem); }
#main.v24 .v-expl h3{ font-size:clamp(1.6rem,3vw,2.3rem); margin:.2rem 0 .9rem; min-height:2.2em; }
#main.v24 .v-expl p{ font-size:1.08rem; line-height:1.65; min-height:5em; }
#main.v24 .v-bill{ background:var(--v-bone); color:var(--v-ink); border-radius:22px; padding:1.6rem; font-size:.95rem; }
#main.v24 .v-bill .bh{ display:flex; justify-content:space-between; align-items:center; padding-bottom:1rem; margin-bottom:.4rem; border-bottom:2px solid var(--v-ink); }
#main.v24 .v-bill .bh img{ height:30px; width:auto; }
#main.v24 .v-bill .bh span{ font-size:.72rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:var(--v-ink-2); }
#main.v24 .v-bill button{ display:flex; width:100%; justify-content:space-between; align-items:center; gap:1rem; padding:.9rem .6rem; margin:0; border:0; border-bottom:1px solid var(--v-line); background:transparent; font:inherit; color:var(--v-ink); text-align:left; cursor:pointer; border-radius:10px; transition:background-color .2s,box-shadow .2s; }
#main.v24 .v-bill button:last-child{ border-bottom:0; font-weight:800; }
#main.v24 .v-bill button:hover, #main.v24 .v-bill button.on{ background:var(--v-band); box-shadow:inset 3px 0 0 var(--v-teal); }
#main.v24 .v-bill button:focus-visible{ outline:3px solid var(--v-teal); outline-offset:1px; }
#main.v24 .v-bill .amt{ flex:0 0 auto; width:4.5rem; height:.7rem; border-radius:99px; background:var(--v-line); }
/* ---------- the dock ---------- */
.v-dock{ position:fixed; right:18px; bottom:18px; z-index:90; background:var(--v-petrol); color:var(--v-bone); border:1px solid var(--v-on-dk-line); border-radius:999px; padding:.55rem .55rem .55rem 1rem; display:flex; align-items:center; gap:.8rem; font-family:var(--v-body); font-size:.82rem; font-weight:700; box-shadow:0 20px 50px -20px rgba(0,0,0,.7); transform:translateY(calc(100% + 40px)); visibility:hidden; transition:transform .5s var(--v-ease-both),visibility 0s linear .5s; cursor:pointer; }
.v-dock.on{ transform:none; visibility:visible; transition:transform .5s var(--v-ease-both),visibility 0s; }
.v-dock .c{ color:var(--v-teal); font-variant-numeric:tabular-nums; min-width:5.5ch; }
.v-dock .s{ min-width:14ch; }
.v-dock svg{ width:64px; height:22px; }
.v-dock .p{ display:inline-flex; align-items:center; border-radius:999px; background:var(--v-amber); color:var(--v-ink); padding:.6rem 1rem; font-weight:800; font-size:.8rem; }
.v-dock:focus-visible{ outline:3px solid var(--v-teal); outline-offset:3px; }
/* ---------- what you get ---------- */
#main.v24 .v-ohead{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(2rem,5vw,5rem); align-items:end; }
#main.v24 .v-ohead h2{ font-size:clamp(2.5rem,5.4vw,4.4rem); letter-spacing:-.028em; }
#main.v24 .v-ohead .acts{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.6rem; }
#main.v24 .v-gets{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1.25rem; margin-top:clamp(2.5rem,5vw,4rem); }
#main.v24 .v-get{ background:var(--v-white); border:1px solid var(--v-line); border-radius:22px; padding:1.4rem 1.4rem 1.5rem; display:flex; flex-direction:column; }
#main.v24 .v-get .vis{ display:block; width:100%; height:auto; aspect-ratio:240/130; margin:0 0 1.3rem; overflow:visible; }
#main.v24 .v-get h3{ font-size:clamp(1.45rem,2vw,1.75rem); }
#main.v24 .v-get p{ margin-top:.45rem; line-height:1.5; }
#main.v24 .v-get:nth-child(2){ transition-delay:.08s; }
#main.v24 .v-get:nth-child(3){ transition-delay:.16s; }
#main.v24 .v-get:nth-child(4){ transition-delay:.24s; }
#main.v24 .v-get svg text{ font-family:var(--v-body); }
#main.v24 .v-get .cap{ font-size:13px; fill:var(--v-ink-2); }
/* battery */
/* rate */
#main.v24 .g-rate .ghost{ fill:none; stroke:var(--v-field-line); stroke-width:2; stroke-dasharray:4 4; }
/* backup */
#main.v24 .g-back .pole{ fill:none; stroke:var(--v-ink); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
#main.v24 .g-back .cut circle{ fill:var(--v-white); stroke:var(--v-ink); stroke-width:2; }
#main.v24 .g-back .cut path{ stroke:var(--v-ink); stroke-width:2.5; stroke-linecap:round; }
/* care */
#main.v24 .v-get .chips{ list-style:none; padding:0; display:flex; flex-direction:column; justify-content:center; gap:.4rem; }
#main.v24 .v-get .chips li{ display:flex; align-items:center; gap:.7rem; background:var(--v-band); border:1px solid var(--v-band-line); border-radius:999px; padding:.36rem .9rem .36rem .45rem; font-weight:700; color:var(--v-ink); font-size:.95rem; }
#main.v24 .v-get .chips svg{ width:24px; height:24px; flex:0 0 auto; }
#main.v24 .v-get .chips circle{ fill:var(--v-teal); }
#main.v24 .v-get .chips path{ fill:none; stroke:var(--v-ink); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
/* share strip */
#main.v24 .v-getshare{ margin-top:1.25rem; background:var(--v-petrol); color:var(--v-on-dk); border-radius:22px; padding:1.6rem clamp(1.4rem,3vw,2.4rem); display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:2rem; align-items:center; }
#main.v24 .v-getshare .lead{ display:flex; gap:1.1rem; align-items:flex-start; }
#main.v24 .v-getshare .plus{ flex:0 0 auto; width:44px; height:44px; border-radius:50%; background:var(--v-amber); color:var(--v-ink); display:grid; place-items:center; font-family:var(--v-display); font-weight:800; font-size:1.9rem; line-height:1; }
html[data-palette] #main.v24 .v-getshare h3{ color:var(--v-bone) !important; font-size:clamp(1.45rem,2vw,1.75rem); }
#main.v24 .v-getshare p{ margin-top:.4rem; line-height:1.5; }
#main.v24 .v-getshare .steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; align-items:end; --base:64px; }
#main.v24 .v-getshare .st{ display:flex; flex-direction:column; }
#main.v24 .v-getshare .b{ display:block; height:calc(var(--base) * var(--f)); background:var(--v-teal); border-radius:10px 10px 4px 4px; transform-origin:50% 100%; transform:scaleY(0); transition:transform 1.1s var(--v-ease-out) .3s; }
#main.v24 .v-getshare.in .b{ transform:scaleY(1); }
#main.v24 .v-getshare .st b{ font-family:var(--v-display); font-weight:800; font-size:1.9rem; line-height:1; color:var(--v-bone); margin-top:.55rem; }
#main.v24 .v-getshare .st small{ font-size:.85rem; color:var(--v-on-dk-soft); margin-top:.2rem; }
@media (max-width:1060px){
  #main.v24 .v-gets{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:900px){
  #main.v24 .v-ohead, #main.v24 .v-getshare{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  #main.v24 .v-gets{ grid-template-columns:1fr; }
  #main.v24 .v-get .vis{ max-width:230px; margin-bottom:1rem; }
  #main.v24 .v-get .chips{ max-width:none; aspect-ratio:auto; }
  #main.v24 .v-getshare{ gap:1.4rem; }
}
@media (prefers-reduced-motion:reduce){
  #main.v24 .v-getshare .b{ transform:none; transition:none; }
  #main.v24 .v-get{ transition-delay:0s; }
}
/* ---------- reveal ---------- */
#main.v24 .v-rev{ opacity:0; transform:translateY(16px); transition:opacity .7s var(--v-ease-out),transform .7s var(--v-ease-out); }
#main.v24 .v-rev.in{ opacity:1; transform:none; }
@keyframes v-pop{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
/* ---------- small screens ---------- */
@media (max-width:900px){
  #main.v24 .v-story, #main.v24 .v-billg{ grid-template-columns:1fr; }
  #main.v24 .v-story .vis{ position:sticky; top:calc(var(--v-nav-h,72px) + .5rem); height:auto; z-index:2; background:var(--v-band); padding:.5rem 0; margin:0 -5vw; padding-left:5vw; padding-right:5vw; border-bottom:1px solid var(--v-band-line); }
  #main.v24 .v-story .vis svg{ max-height:34vh; }
  #main.v24 .v-steps{ gap:22vh; padding:6vh 0 10vh; }
  #main.v24 .v-expl{ position:static; }
  #main.v24 .v-pal input{ font-size:1rem; }
  #main.v24 .v-pal .list button{ font-size:1.15rem; }
  .v-dock{ left:10px; right:10px; bottom:10px; justify-content:space-between; }
  .v-dock svg{ display:none; }
}
@media (max-width:560px){
  #main.v24 .v-addr{ flex-direction:column; }
  #main.v24 .v-addr .v-pill{ width:100%; }
  .v-dock .s{ display:none; }
}
/* ---------- reduced motion: a complete static page ---------- */
@media (prefers-reduced-motion:reduce){
  #main.v24 .v-rev{ opacity:1; transform:none; transition:none; }
  #main.v24 .v-step{ opacity:1; }
  #main.v24 .v-steps{ gap:3rem; padding:2rem 0; }
  #main.v24 .v-story .vis{ position:relative; top:0; }
  #main.v24 .v-story .vis g[data-s]{ opacity:1; }
  #main.v24 .v-contours{ transform:none !important; }
  #main.v24 *, .v-dock{ animation:none !important; transition:none !important; }
}
/* =====================================================================
   How it works (6 Oct 2026): page hero, the loop, chapters, the set-up
   timeline, inline glossary, the after-that cards, the closing address.
   ===================================================================== */
#main.v24 .v-phero{ position:relative; overflow:hidden; padding:clamp(3rem,6vw,5.5rem) 0 clamp(3rem,6vw,5rem); }
#main.v24 .v-phero-in{ position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(2rem,5vw,5rem); align-items:center; }
#main.v24 .v-phero h1{ margin:.2rem 0 1.9rem; }
#main.v24 .v-phero .v-lede{ color:var(--v-on-dk); }
#main.v24 .v-chapters{ list-style:none; margin:2.2rem 0 0; padding:0; display:grid; gap:.6rem; max-width:34rem; }
#main.v24 .v-chapters a{ display:flex; align-items:center; gap:1.1rem; text-decoration:none; background:var(--v-petrol-2); border:1px solid var(--v-on-dk-line); border-radius:14px; padding:.95rem 1.1rem; color:var(--v-bone) !important; font-weight:700; transition:border-color .2s,transform .2s var(--v-ease-out); }
#main.v24 .v-chapters a::after{ content:'\2192'; margin-left:auto; color:var(--v-teal); font-weight:800; transition:transform .2s var(--v-ease-out); }
#main.v24 .v-chapters .n{ font-family:var(--v-display); font-weight:800; font-size:1.35rem; color:var(--v-teal); min-width:2ch; font-variant-numeric:tabular-nums; }
#main.v24 .v-chapters a:focus-visible{ outline:3px solid var(--v-teal); outline-offset:3px; }
@media (hover:hover){
  #main.v24 .v-chapters a:hover{ border-color:var(--v-teal); transform:translateX(4px); }
  #main.v24 .v-chapters a:hover::after{ transform:translateX(3px); }
}
#main.v24 .v-step .more{ margin-top:1rem; }
/* set-up timeline */
#main.v24 .v-setup-head{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:1rem 2rem; margin-bottom:clamp(2rem,4vw,3.5rem); }
#main.v24 .v-legend{ display:flex; gap:.5rem; margin:0; }
#main.v24 .v-who{ display:inline-flex; align-items:center; border-radius:999px; padding:.38rem .8rem; font-size:.68rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; line-height:1; color:var(--v-ink); }
#main.v24 .v-who.you{ background:var(--v-amber); }
#main.v24 .v-who.us{ background:var(--v-teal); }
#main.v24 .v-time{ list-style:none; margin:0; padding:0; position:relative; --p:0%; }
#main.v24 .v-time::before, #main.v24 .v-time::after{ content:''; position:absolute; left:calc(3rem - 1px); top:.6rem; width:3px; border-radius:3px; }
#main.v24 .v-time::before{ bottom:.6rem; background:var(--v-line); }
#main.v24 .v-time::after{ height:calc(var(--p) - 1.2rem); max-height:calc(100% - 1.2rem); background:var(--v-teal); transition:height .15s linear; }
#main.v24 .v-tstep{ position:relative; display:grid; grid-template-columns:6rem minmax(0,1fr); gap:0 clamp(1.5rem,4vw,3.5rem); padding:0 0 clamp(2.5rem,5vw,4rem); }
#main.v24 .v-tstep:last-child{ padding-bottom:0; }
#main.v24 .v-tstep.wide{ grid-template-columns:6rem minmax(0,1.15fr) minmax(0,.85fr); }
#main.v24 .v-tstep .no{ position:relative; z-index:1; justify-self:center; width:4.4rem; height:4.4rem; border-radius:999px; display:grid; place-items:center; background:var(--v-bone); border:3px solid var(--v-line); font-family:var(--v-display); font-weight:800; font-size:1.7rem; color:var(--v-ink); font-variant-numeric:tabular-nums; transition:background-color .4s var(--v-ease-out),border-color .4s var(--v-ease-out); }
#main.v24 .v-tstep.on .no{ background:var(--v-teal); border-color:var(--v-teal); }
#main.v24 .v-tstep .body{ max-width:40rem; padding-top:.5rem; }
#main.v24 .v-tstep h3{ font-size:clamp(1.8rem,3vw,2.5rem); margin:.8rem 0 .8rem; }
#main.v24 .v-tstep p{ font-size:1.06rem; line-height:1.65; margin-top:.8rem; }
#main.v24 .v-tstep h3+p{ margin-top:0; }
#main.v24 .v-tstep .act{ margin-top:1.3rem; }
#main.v24 .v-tstep .media{ margin:0; align-self:start; padding-top:.5rem; }
#main.v24 .v-tstep .media img{ display:block; width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:20px; border:5px solid var(--v-teal); box-shadow:0 26px 56px -30px rgba(10,37,48,.32); }
#main.v24 .v-rent{ margin-top:1.4rem; background:var(--v-band-amber); border:1px solid var(--v-band-amber-line); border-left:4px solid var(--v-amber); border-radius:14px; padding:1rem 1.2rem; }
#main.v24 .v-rent .k{ margin:0 0 .25rem; font-size:.72rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:var(--v-ink); }
#main.v24 .v-rent p{ margin-top:0; font-size:1rem; }
/* inline glossary */
#main.v24 .v-gl{ display:inline; background:none; border:0; padding:0; margin:0; font:inherit; color:var(--v-ink); font-weight:600; cursor:help; box-shadow:inset 0 -2px 0 var(--v-teal); border-radius:0; }
#main.v24 .v-gl:hover, #main.v24 .v-gl[aria-expanded="true"]{ background:var(--v-band); box-shadow:inset 0 -3px 0 var(--v-teal); }
#main.v24 .v-gl:focus-visible{ outline:3px solid var(--v-teal); outline-offset:2px; }
.v-pop{ position:absolute; z-index:120; background:#FFFFFF; color:#4C5A61; border:1px solid #E6E1D6; border-top:4px solid #14C3A8; border-radius:14px; padding:1rem 1.1rem; box-shadow:0 26px 54px -26px rgba(10,37,48,.38); font-family:'Inter',system-ui,sans-serif; font-size:.95rem; line-height:1.55; animation:v-pop .25s cubic-bezier(.23,1,.32,1); }
.v-pop[hidden]{ display:none; }
.v-pop p{ margin:0; max-width:none; color:#4C5A61; }
.v-pop .t{ font-family:'Barlow Condensed','Inter',sans-serif; font-weight:800; font-size:1.3rem; color:#0A2530; margin-bottom:.3rem; }
.v-pop a{ display:inline-block; margin-top:.7rem; font-weight:700; color:#0A2530; text-decoration:none; box-shadow:inset 0 -2px 0 #14C3A8; }
/* after-that cards */
#main.v24 .v-cards3{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.25rem; }
#main.v24 .v-card{ display:flex; flex-direction:column; background:var(--v-white); border:1px solid var(--v-band-amber-line); border-top:4px solid var(--v-teal); border-radius:22px; padding:1.6rem 1.5rem 1.4rem; text-decoration:none; color:var(--v-ink-2); transition:transform .2s var(--v-ease-out),box-shadow .2s var(--v-ease-out); }
#main.v24 .v-card small{ display:block; font-size:.72rem; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:var(--v-ink-2); margin-bottom:.6rem; }
#main.v24 .v-card h3{ font-size:clamp(1.5rem,2.6vw,1.95rem); }
#main.v24 .v-card p{ margin:.7rem 0 1.2rem; line-height:1.55; }
#main.v24 .v-card .go-l{ margin-top:auto; font-weight:800; color:var(--v-ink); box-shadow:inset 0 -2px 0 var(--v-teal); align-self:flex-start; }
#main.v24 .v-card:focus-visible{ outline:3px solid var(--v-teal); outline-offset:3px; }
@media (hover:hover){
  #main.v24 .v-card:hover{ transform:translateY(-3px); box-shadow:var(--v-shadow-card-hover); }
}
/* closing address */
#main.v24 .v-close-in{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(2rem,5vw,5rem); align-items:center; }
#main.v24 .v-addr.lt input{ border:1.5px solid var(--v-field-line) !important; background:var(--v-white) !important; color:var(--v-ink) !important; }
#main.v24 .v-addr.lt input::placeholder{ color:#7B868C; }
#main.v24 .v-close .v-addr{ margin-top:0; max-width:none; }
@media (max-width:900px){
  #main.v24 .v-phero-in, #main.v24 .v-close-in{ grid-template-columns:1fr; }
  #main.v24 .v-cards3{ grid-template-columns:1fr; }
  #main.v24 .v-tstep, #main.v24 .v-tstep.wide{ grid-template-columns:3.4rem minmax(0,1fr); gap:0 1.1rem; }
  #main.v24 .v-tstep .media{ grid-column:2; padding-top:1.2rem; }
  #main.v24 .v-tstep .media img{ aspect-ratio:4/3; }
  #main.v24 .v-tstep .no{ width:3rem; height:3rem; font-size:1.2rem; border-width:2px; }
  #main.v24 .v-time::before, #main.v24 .v-time::after{ left:calc(1.7rem - 1px); }
}
@media (prefers-reduced-motion:reduce){
  #main.v24 .v-time::after{ height:calc(100% - 1.2rem); }
  .v-pop{ animation:none; }
}
/* =====================================================================
   Home hero, 15 Oct 2026: moments in your day.
   A tap-a-moment house scene replaces the 24-hour graph. State lives on
   #vMoments[data-m]: night, breakfast, dinner, share, cut.
   ===================================================================== */
#main.v24 .v-mhero{ position:relative; overflow:hidden; padding:clamp(2.5rem,5vw,4.5rem) 0 clamp(3rem,6vw,5rem); }
#main.v24 .v-mhero-in{ position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(2rem,4.5vw,4.5rem); align-items:center; }
#main.v24 .v-mhero h1{ margin:.2rem 0 1.4rem; }
#main.v24 .v-mhero-in>*{ min-width:0; }
#main.v24 .v-mhero .v-lede{ color:var(--v-on-dk); max-width:30ch; }
#main.v24 .v-moments{ background:var(--v-petrol-2); border:1px solid var(--v-on-dk-line); border-radius:22px; padding:1.2rem 1.2rem 1.4rem; box-shadow:var(--v-shadow-float); }
#main.v24 .v-mlabel{ font-size:.7rem; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:var(--v-on-dk-soft); margin:0 0 .7rem .2rem; }
#main.v24 .v-mtabs{ display:flex; gap:.4rem; flex-wrap:wrap; margin-bottom:1rem; }
#main.v24 .v-mtabs button{ font:inherit; font-size:.86rem; font-weight:700; color:var(--v-bone); background:var(--v-on-dk-fill); border:1px solid var(--v-on-dk-line); border-radius:999px; padding:.55rem .95rem; cursor:pointer; transition:background-color .2s,border-color .2s,color .2s; }
#main.v24 .v-mtabs button:hover{ border-color:var(--v-bone); }
#main.v24 .v-mtabs button[aria-selected="true"]{ background:var(--v-teal); border-color:var(--v-teal); color:var(--v-ink); }
#main.v24 .v-mtabs button:focus-visible{ outline:3px solid var(--v-teal); outline-offset:2px; }
@keyframes v-flow{to{stroke-dashoffset:-34}}
/* night: buying while it costs less */
/* breakfast */
/* dinner */
/* winter evening: selling unused power back */
#main.v24 .v-moments[data-m="share"] .credit{ opacity:1; }
/* power cut */
#main.v24 .v-moments[data-m="cut"] .pole{ opacity:.3; }
#main.v24 .v-mcap{ margin-top:.9rem; padding:1rem .3rem 0; border-top:1px solid var(--v-on-dk-line); min-height:9.5rem; }
#main.v24 .v-mcap .m-when{ font-family:var(--v-display); font-weight:800; font-size:clamp(1.5rem,2.4vw,1.9rem); line-height:1; color:var(--v-bone); margin-bottom:.5rem; }
#main.v24 .v-mcap .m-what{ font-size:1.05rem; line-height:1.55; color:var(--v-on-dk); }
#main.v24 .v-mcap .m-you{ margin-top:.6rem; font-size:.98rem; line-height:1.5; font-weight:700; color:var(--v-teal); display:flex; gap:.6rem; align-items:baseline; }
#main.v24 .v-mcap .m-you::before{ content:''; flex:0 0 auto; width:9px; height:9px; border-radius:2px; background:var(--v-teal); transform:translateY(-1px); }
#main.v24 .v-mcap.swap .m-what, #main.v24 .v-mcap.swap .m-you, #main.v24 .v-mcap.swap .m-when{ animation:v-pop .45s var(--v-ease-out); }
/* simple dock: no clock */
.v-dock.simple{ padding:.55rem .55rem .55rem 1.1rem; }
.v-dock.simple .s{ min-width:0; }
@media (max-width:900px){
  #main.v24 .v-mhero-in{ grid-template-columns:1fr; }
  #main.v24 .v-mtabs{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin-left:-.2rem; margin-right:-.2rem; padding:0 .2rem .2rem; }
  #main.v24 .v-mtabs::-webkit-scrollbar{ display:none; }
  #main.v24 .v-mtabs button{ flex:0 0 auto; }
  #main.v24 .v-mcap{ min-height:11rem; }
}
#main.v24 .v-bill button span small{ display:block; font-size:.8rem; color:var(--v-ink-2); font-weight:500; margin-top:.15rem; }
#main.v24 .v-bill .amt-v{ flex:0 0 auto; font-variant-numeric:tabular-nums; font-weight:800; color:var(--v-ink); }
#main.v24 .v-bill .note{ font-size:.8rem; line-height:1.5; color:var(--v-ink-2); margin-top:.9rem; padding:0 .6rem; }
#main.v24 .v-bill-note{ font-size:.84rem; line-height:1.55; color:var(--v-on-dk-soft); margin-top:.9rem; max-width:40rem; }
/* journey: the card steps through the stages; one way out, below it */
#main.v24 .v-jfoot{ display:flex; flex-wrap:wrap; align-items:center; gap:1rem 1.8rem; margin-top:1.8rem; }