/* HANS money pages (joinhans.io/stake, /swap and the vote pages): the brand v2 look (HANS/brand/BRAND.md, approved
   15 Oct 2026; the reference is the Earn v2 design) on the class names the page scripts render. Deep space behind (the
   kit's .hv-sky, .hv-stars and .hv-grain), liquid-glass surfaces whose rim catches the pointer, ice-gradient primary
   buttons, glass pills with a sliding lens, big tight Unbounded type and light-blue glow. Blue only: a state is told by
   its tone, its shape (filled, outlined, dashed), an icon and its words, never by green, amber or red. The shared kit
   (/assets/brand/v2/hans.css and hans.js) draws the page shell; /assets/hans-money-v2.js adds the pointer light, tilt and
   count-ups. Only transform and opacity animate (plus the shimmer word); everything is still under
   prefers-reduced-motion. Page scripts own the behaviour; this file is presentation only. */
:root{
  color-scheme:dark;
  /* colour: the kit's blue range (--hv-*), under the names the page scripts and the profile sheet read */
  --bg:#02050D;--ink:#02050D;--ink-2:#071027;--deep:#0C1A3D;--navy:#071027;--navy2:#0C1A3D;
  --royal:#1F4FB8;--azure:#3D7BFF;--blue:#62A0FF;--sky:#94C3FF;--sky-2:#62A0FF;--ice:#CFE3FF;--ice-2:#EAF3FF;
  --paper:#EEF4FF;--signal:#FFFFFF;--muted:#B3C4E2;--dim:#7D90B6;--faint:#5A6C92;--amount:#DCEBFF;--live:#8FC0FF;
  --line:rgba(160,200,255,.14);--line-2:rgba(160,200,255,.28);--line-strong:rgba(160,200,255,.28);--line-hi:rgba(160,200,255,.42);
  --edge:rgba(160,200,255,.32);--edge-hi:rgba(200,225,255,.72);--rise:#0C1A3D;--ink2:rgba(10,22,52,.5);
  /* states, blue only: done is sky with a check, look-here is ice with an outline and "!", irreversible is a strong azure
     outline with "!" and the words in white */
  --ok:#A9D2FF;--warn:#DCEBFF;--danger:#EAF3FF;
  /* glass (the kit's .hv-glass recipe) and the quieter inner tile */
  --glass:rgba(10,22,52,.42);--glass-solid:rgba(10,24,58,.8);--glass-dense:rgba(9,22,54,.84);
  --glass-hi:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.015));
  --glass-blur:blur(16px) saturate(1.7) brightness(1.05);
  --glass-shadow:inset 0 1px 0 rgba(235,244,255,.24),inset 0 -1px 0 rgba(235,244,255,.05),inset 0 0 24px rgba(120,170,255,.07),0 18px 40px -22px rgba(0,0,0,.8);
  --tile:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.008)),rgba(12,26,61,.36);
  --tile-hot:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.015)),rgba(20,42,96,.46);
  --tile-line:inset 0 0 0 1px rgba(160,200,255,.13),inset 0 1px 0 rgba(235,244,255,.1);
  --tile-line-hot:inset 0 0 0 1px rgba(170,210,255,.3),inset 0 1px 0 rgba(235,244,255,.18);
  --well:rgba(3,8,24,.55);
  --glow:0 0 34px rgba(98,160,255,.6);
  /* icons, drawn as masks in the text colour (generated content stays out of the accessible names) */
  --i-alert:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 0a10 10 0 1 1 0 20 10 10 0 0 1 0-20Zm-1.2 4.6h2.4l-.35 7.2H9.15Zm1.2 8.9a1.45 1.45 0 1 0 0 2.9 1.45 1.45 0 0 0 0-2.9Z'/%3E%3C/svg%3E");
  --i-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill-rule='evenodd' d='M10 0a10 10 0 1 1 0 20 10 10 0 0 1 0-20Zm4.5 5.9-5.6 6.2-3.1-2.9-1.4 1.5 4.6 4.3 7-7.7Z'/%3E%3C/svg%3E");
  --shimmer:linear-gradient(100deg,#BFD8FF 0%,#EAF3FF 30%,#FFFFFF 42%,#FFFFFF 46%,#DCEBFF 56%,#9CC4FF 78%,#D6E7FF 100%);
  --ice-btn:linear-gradient(180deg,#F6FAFF 0%,#CFE3FF 48%,#9CC4FF 100%);
  --ice-btn-shadow:inset 0 1px 0 #fff,inset 0 -2px 8px rgba(40,90,200,.35),0 12px 34px -12px rgba(98,160,255,.85),0 0 0 1px rgba(200,225,255,.55);
  /* type, motion, layout */
  --unb:'Unbounded','Unbounded Fallback',sans-serif;--sgk:'Space Grotesk','Space Grotesk Fallback',system-ui,sans-serif;
  --ease:cubic-bezier(.2,.8,.2,1);--out:cubic-bezier(.33,1,.68,1);--spring:cubic-bezier(.34,1.56,.64,1);
  --gutter:clamp(16px,4vw,56px);--maxw:1240px;--radius:28px;
  /* The room under the sticky header (with the testnet rehearsal line): where a sticky column stops and where a jump to
     an anchor lands. One token, so the vote pages' sticky cards and the scroll padding move together when it changes. */
  --stick-top:132px;
}
*{margin:0;padding:0;box-sizing:border-box}
/* The page background is the root's: the kit's fixed sky, stars and grain (z-index below 0) paint above it and below
   the page, so <body> stays transparent. */
html{scroll-behavior:smooth;scroll-padding-top:var(--stick-top);background:var(--bg)}
body{min-width:320px;min-height:100svh;overflow-x:clip;background:transparent;color:var(--paper);font-family:var(--sgk);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
/* The kit's grain overhangs the screen by half (inset:-50%); the noise tiles, so a screen-sized layer looks the same and
   nothing sits outside the viewport (the layout audit counts any box past the edge). */
.hv-grain{inset:0}
::selection{background:rgba(98,160,255,.38);color:#fff}
a{color:var(--paper);text-decoration:none}
:focus-visible{outline:2px solid var(--sky);outline-offset:3px;border-radius:6px}
button{font:inherit;color:inherit}
img{max-width:100%}
.skip-link{position:fixed;top:12px;left:12px;z-index:1000;padding:10px 16px;border-radius:999px;background:var(--ice-btn);color:#06122E;font-weight:700;box-shadow:var(--ice-btn-shadow);transform:translateY(-180%);transition:transform .3s var(--spring)}
.skip-link:focus{transform:translateY(0)}
.wrap{width:min(100% - 2*var(--gutter),var(--maxw));margin-inline:auto}
/* The shimmer word: a slow blue-to-white glass shimmer on one or two words of a headline (BRAND.md §3). */
.grad{background:var(--shimmer);background-size:280% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:app-shimmer 9s linear infinite}
.grad{padding:0 .15em .22em .05em;margin:0 -.15em -.22em -.05em;-webkit-box-decoration-break:clone;box-decoration-break:clone}   /* room for the last glyph and descenders (see the kit's .hv-sh) */

/* Liquid glass: the kit's recipe for the surfaces the page scripts render (they carry no kit class). The rim is a 1 px
   conic ring whose bright side follows the pointer on the smaller surfaces (--spec, set by hans-money-v2.js and the
   kit). Small surfaces blur what is behind them; the large cards take the kit's dense glass instead (BRAND.md §11):
   re-blurring a card-sized area every time the star canvas behind it changes kept the GPU busy enough to stall the page
   (measured on 15 Oct 2026). Nested surfaces use the quieter tile: a second backdrop filter inside a first would blur
   twice. */
.metric,.acct-menu,.wbox{position:relative;isolation:isolate;
  background:radial-gradient(120% 70% at 50% -10%,rgba(255,255,255,.1),rgba(255,255,255,0) 62%),var(--glass-hi),var(--glass);
  -webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);box-shadow:var(--glass-shadow)}
.app-card,.notice{position:relative;isolation:isolate;
  background:radial-gradient(120% 70% at 50% -10%,rgba(255,255,255,.1),rgba(255,255,255,0) 62%),var(--glass-hi),var(--glass-dense);box-shadow:var(--glass-shadow),0 40px 80px -40px rgba(0,0,0,.85)}
.app-card::before,.metric::before,.notice::before,.acct-menu::before,.wbox::before,#toast::before,
.app-nav::before,.pfbtn::before,.chip::before,.acct-more::before,.seg::before{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;padding:1px;pointer-events:none;
  background:conic-gradient(from var(--spec,210deg),rgba(255,255,255,.6),rgba(150,195,255,.14) 22%,rgba(200,225,255,.38) 42%,rgba(255,255,255,.06) 60%,rgba(150,195,255,.45) 84%,rgba(255,255,255,.6));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
/* The pointer light (hans-money-v2.js sets --mx and --my on the tile under the pointer): over the glass, under the
   words (z-index -1 inside the isolated surface). */
.metric::after,.pos::after,.out::after,.why-card::after,.ostat::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .35s ease;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(170,210,255,.13),rgba(98,160,255,.04) 38%,transparent 62%)}
.metric:hover::after,.pos:hover::after,.out:hover::after,.why-card:hover::after,.ostat:hover::after{opacity:1}

/* Header ------------------------------------------------------------------------------------------------------------
   The kit's header (.hv-head: transparent, a dark wash fades in once the page scrolls) kept in the flow (sticky, not
   fixed), so the rehearsal line the page core adds under the bar on testnets pushes the page down instead of covering
   it. These rules also dress the shared header markup without the kit (tests/fixtures/gov-core-page). */
/* Its height never changes on scroll (a sticky header that shrank would move the page under the reader). */
.app-head{position:sticky;top:0;z-index:60;padding:14px 0;view-transition-name:hp-head}
.app-head:not(.hv-head){background:linear-gradient(180deg,rgba(2,5,13,.92),rgba(2,5,13,.72));-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.app-head.hv-head{position:sticky;padding:14px 0}
.app-head .bar{display:flex;align-items:center;gap:20px;min-height:48px}
.brand{display:inline-flex;flex:none;align-items:center;gap:12px;color:var(--paper);white-space:nowrap}
.brand img{width:34px;height:34px;border-radius:9px;filter:drop-shadow(0 0 14px rgba(133,188,251,.3));transition:transform .6s var(--spring),filter .3s ease}
.brand:hover img,.brand:focus-visible img{transform:rotate(-8deg) scale(1.06);filter:drop-shadow(0 0 20px rgba(160,205,255,.65))}
.brand b{font-family:var(--unb);font-size:14px;font-weight:700;letter-spacing:-.04em;transition:letter-spacing .5s var(--ease),margin .5s var(--ease)}
.brand:hover b,.brand:focus-visible b{letter-spacing:.01em;margin-right:-.6em}
/* The app switcher: a glass pill; the kit's lens slides behind the hovered or current app ([data-hv-lens]). */
.app-nav{position:relative;isolation:isolate;display:flex;gap:2px;margin:0 auto;padding:5px;border-radius:999px;
  background:var(--glass-hi),var(--glass);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);box-shadow:var(--glass-shadow)}
.app-nav a{position:relative;z-index:3;display:inline-flex;align-items:center;gap:2px;padding:10px 18px;border-radius:999px;color:var(--muted);font-size:14px;font-weight:500;white-space:nowrap;transition:color .25s ease,transform .45s var(--spring)}
.app-nav a:hover{color:#fff;transform:translateY(-1px)}
.app-nav a[aria-current="page"]{color:#fff}
.app-nav:not([data-hv-lens-on]) a[aria-current="page"],.seg:not([data-hv-lens-on])>.active,.seg:not([data-hv-lens-on])>[aria-pressed="true"],.choice button[aria-pressed="true"]{
  background:radial-gradient(120% 140% at 50% 0%,rgba(220,236,255,.34),rgba(98,160,255,.14) 55%,rgba(98,160,255,.04));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(140,190,255,.25),0 6px 22px -6px rgba(98,160,255,.6)}
.app-nav sup{font-size:9px;opacity:.6;margin-left:2px}
.app-nav .hp-thumb,.seg .hp-thumb{display:none}
.acct-wrap{position:relative;display:flex;flex:none;align-items:center;gap:10px}
.pfbtn{position:relative;isolation:isolate;display:grid;place-items:center;width:48px;height:48px;border:0;border-radius:999px;cursor:pointer;color:var(--paper);
  background:var(--glass-hi),var(--glass);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);box-shadow:var(--glass-shadow)}
.pfbtn svg{position:relative;z-index:3;width:20px;height:20px;transition:transform .5s var(--spring)}
.pfbtn:hover svg{transform:scale(1.15) rotate(-6deg)}
.pfbtn .ring{z-index:1;inset:0}
.btn{border:0;border-radius:999px;padding:0 22px;font-weight:600;cursor:pointer;white-space:nowrap}
.btn[hidden],.chip[hidden],.acct-more[hidden]{display:none}
.btn-solid{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:48px;overflow:hidden;color:#06122E;font-size:14.5px;background:var(--ice-btn);box-shadow:var(--ice-btn-shadow);transition:transform .45s var(--spring),box-shadow .3s ease}
.btn-solid::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(110deg,transparent 32%,rgba(255,255,255,.75) 48%,transparent 62%);background-size:260% 100%;background-position:130% 0;transition:background-position 1s var(--ease)}
.btn-solid:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 #fff,inset 0 -2px 8px rgba(40,90,200,.35),0 18px 44px -12px rgba(98,160,255,1),0 0 0 1px rgba(220,236,255,.8)}
.btn-solid:hover::after{background-position:-50% 0}
.btn-solid:active{transform:scale(.96)}
/* "Connect<span> wallet</span>": a flex item drops its leading space, so the span keeps it. */
.btn-solid .wide{white-space:pre}
/* The signed-in capsule: sHANS balance, address, the Test tag on testnets and the avatar. */
.chip{position:relative;isolation:isolate;display:flex;align-items:center;gap:12px;min-height:48px;padding:0 6px 0 16px;border:0;border-radius:999px;color:var(--paper);white-space:nowrap;cursor:pointer;
  background:var(--glass-hi),var(--glass);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);box-shadow:var(--glass-shadow);transition:transform .45s var(--spring)}
.chip:hover{transform:translateY(-1px)}
.chip .bal{font-family:var(--unb);font-size:13px;font-weight:600;letter-spacing:-.01em;color:var(--amount);font-variant-numeric:tabular-nums}
.chip .addr{color:var(--dim);font-size:12.5px;font-variant-numeric:tabular-nums}
.chip .pfp{display:grid;flex:none;place-items:center;width:36px;height:36px;border-radius:50%;background:radial-gradient(circle at 50% 30%,#1B3A86,var(--navy2) 70%);box-shadow:0 0 0 2px rgba(200,225,255,.55),0 0 16px rgba(98,160,255,.45)}
.chip .pfp svg{width:15px;height:15px}
.acct-more{position:relative;isolation:isolate;display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:50%;color:var(--muted);font-size:13px;line-height:1;cursor:pointer;
  background:var(--glass-hi),var(--glass);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);box-shadow:var(--glass-shadow);transition:color .2s ease,transform .45s var(--spring)}
.acct-more:hover,.acct-more[aria-expanded="true"]{color:#fff;transform:translateY(-1px)}
/* Its ▾ glyph falls back to a tiny system shape: a drawn chevron instead (the name is the button's aria-label). */
.acct-more{font-size:0}
.acct-more::after{content:"";position:absolute;inset:auto;left:50%;top:50%;z-index:3;width:7px;height:7px;margin:-5.5px 0 0 -3.5px;border-radius:0;background:none;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg);transition:transform .4s var(--spring)}
.acct-more[aria-expanded="true"]::after{margin-top:-1.5px;transform:rotate(225deg)}
.acct-menu{position:absolute;top:calc(100% + 10px);right:0;z-index:70;display:none;min-width:228px;padding:6px;border-radius:20px;background:radial-gradient(120% 70% at 50% -10%,rgba(255,255,255,.1),rgba(255,255,255,0) 62%),var(--glass-hi),var(--glass-solid)}
.acct-menu.open{display:block;animation:app-pop .38s var(--spring) both}
.acct-menu button{position:relative;z-index:3;display:block;width:100%;padding:11px 14px;border:0;border-radius:14px;background:none;color:var(--paper);font-size:13.5px;font-weight:500;text-align:left;cursor:pointer;transition:background-color .2s ease}
.acct-menu button:hover{background:rgba(98,160,255,.14)}
.acct-menu #acctSignout{color:var(--muted)}
/* Thumbs: the wallet menu and the chevron that opens it are 44px targets on touch screens. */
@media (pointer:coarse){.acct-menu button{min-height:44px}.acct-more{width:44px;height:44px}}
/* The rehearsal line (testnets; added by the page core under the bar): one quiet glass line, blue like everything else. */
.rehearsal{margin-top:10px;color:var(--ice);font-size:13px;line-height:1.5}
.rehearsal .wrap{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 14px}
.rehearsal .wrap>span{display:inline-block;max-width:100%;padding:6px 14px;border-radius:999px;background:rgba(98,160,255,.08);box-shadow:inset 0 0 0 1px rgba(160,200,255,.22);text-align:center}
.rehearsal .wrap>span:first-child::before{content:"";display:inline-block;width:7px;height:7px;margin:0 9px 1px 0;border-radius:50%;background:var(--live);box-shadow:0 0 10px var(--live);vertical-align:middle;animation:app-blink 2.4s ease-in-out infinite}
.rehearsal b{color:#fff;font-weight:600}

/* Hero -------------------------------------------------------------------------------------------------------------- */
.app-hero{padding:60px 0 54px}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr);align-items:center;gap:48px}
.eyebrow{display:flex;align-items:center;gap:10px;margin-bottom:22px;color:var(--ice);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.live-dot{position:relative;width:8px;height:8px;flex:none;border-radius:50%;background:var(--live);box-shadow:0 0 0 4px rgba(140,190,255,.14),0 0 14px var(--live)}
.live-dot::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--live);opacity:0;animation:app-ring 2.8s ease-out infinite}
.app-hero h1{max-width:15ch;font-family:var(--unb);font-size:clamp(42px,5vw,78px);font-weight:700;line-height:1.02;letter-spacing:-.055em}
/* Headline lines slide up out of a mask on load (BRAND.md §7); no script involved, so a page without its scripts
   still shows them. */
.ln{display:inline-block;vertical-align:top;clip-path:inset(-.15em -.6em -.24em -.2em)}
.ln>span{display:inline-block;animation:app-line 1.1s var(--ease) var(--d,0s) both;padding-right:.15em;margin-right:-.15em}   /* holds its gradient word's paint room (.grad), so nothing spills past the line's box */
/* A coin in the headline (BRAND.md §8), turning HANS into sHANS; it never wraps away from its word. */
.nw{white-space:nowrap}
.hcoin{position:relative;display:inline-block;width:.78em;height:.78em;margin:0 .12em 0 .02em;vertical-align:-.06em;perspective:600px}
.hcoin::before{content:"";position:absolute;inset:-30%;border-radius:50%;pointer-events:none;background:radial-gradient(closest-side,rgba(98,160,255,.38),rgba(98,160,255,.12) 50%,rgba(98,160,255,0) 72%)}
.hcoin .c{position:relative;display:block;width:100%;height:100%;transform-style:preserve-3d;animation:coin-turn 7s cubic-bezier(.6,.05,.3,1) infinite}
.hcoin img{position:absolute;inset:0;width:100%;height:100%;backface-visibility:hidden;filter:drop-shadow(0 0 12px rgba(98,160,255,.55))}
.hcoin img+img{transform:rotateY(180deg)}
.hero-sub{max-width:56ch;margin-top:26px;color:var(--muted);font-size:clamp(16px,1.35vw,19px);line-height:1.55;animation:app-rise .9s var(--ease) .3s both}
.hero-sub strong{color:#fff;font-weight:600}
.hero-visual{position:relative;animation:app-rise 1.1s var(--ease) .35s both}

/* Cards ------------------------------------------------------------------------------------------------------------- */
.app-card{border-radius:var(--radius)}
.card-head{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:26px 28px 0}
.card-icon{display:grid;flex:none;place-items:center;width:46px;height:46px;border-radius:14px;border:1px solid rgba(160,200,255,.22);background:linear-gradient(160deg,rgba(40,80,180,.5),rgba(8,16,40,.8));box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 10px 24px -12px rgba(40,90,200,.8);color:var(--amount)}
.card-icon svg{width:21px;height:21px}
.card-title{flex:1 1 0;min-width:170px}
.card-eyebrow{color:var(--sky);font-size:12.5px;font-weight:600;letter-spacing:.02em}
.card-title h2{margin-top:4px;font-family:var(--unb);font-size:clamp(20px,1.9vw,25px);font-weight:600;letter-spacing:-.03em;line-height:1.15}
.card-lede{max-width:68ch;padding:14px 28px 0;color:var(--muted);font-size:14.5px;line-height:1.6}
.card-lede strong{color:#fff;font-weight:600}
.card-body{padding:24px 28px 28px}
.app-grid{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(300px,1fr);align-items:start;gap:22px}
.side{display:grid;gap:16px}
.section{margin-top:22px}

/* Segmented controls and tabs: a glass pill group; the kit's lens slides behind the current one where the group is in
   the page's markup ([data-hv-lens]); groups the scripts render show the same lens on their current item. */
.seg{position:relative;isolation:isolate;display:inline-flex;flex:none;gap:2px;padding:5px;border-radius:999px;
  background:var(--glass-hi),rgba(10,22,52,.5);box-shadow:inset 0 1px 0 rgba(235,244,255,.18),inset 0 0 18px rgba(120,170,255,.06),0 12px 28px -18px rgba(0,0,0,.8)}
.seg>button,.seg>a{position:relative;z-index:3;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:38px;padding:0 16px;border:0;border-radius:999px;background:transparent;color:var(--muted);font-size:13.5px;font-weight:500;white-space:nowrap;cursor:pointer;transition:color .25s ease,transform .45s var(--spring)}
.seg>button:hover:not(:disabled),.seg>a:hover{color:#fff;transform:translateY(-1px)}
.seg>.active,.seg>[aria-pressed="true"],.seg>[aria-selected="true"]{color:#fff}
.seg>button:disabled{opacity:.45;cursor:not-allowed}
.seg>.hv-lens{z-index:1}

/* Metric tiles: the kit's stat (a glass tile, a big Unbounded number, a small dim label) */
.metrics{display:grid;gap:14px}
.metric,.strip>div{min-width:0;padding:20px 22px;border-radius:22px;transition:transform .5s var(--spring)}
.metric:hover{transform:translateY(-4px)}
.metric .label,.strip b{display:block;color:var(--muted);font-size:13px;font-weight:500;letter-spacing:.01em}
.metric .num,.strip .num{display:block;margin-top:10px;overflow:hidden;font-family:var(--unb);font-size:clamp(21px,1.9vw,26px);font-weight:600;letter-spacing:-.03em;line-height:1.15;font-variant-numeric:tabular-nums;text-overflow:ellipsis;white-space:nowrap;color:#fff}
.metric .sub,.strip .sub{display:block;margin-top:6px;color:var(--dim);font-size:12.5px}
/* A total counting up the first time it is read (hans-money-v2.js): the real figure keeps its place and its width, and
   the counting value is drawn over it. */
[data-hv-counting]{position:relative;color:transparent!important;-webkit-text-fill-color:transparent!important}
[data-hv-counting]::after{content:attr(data-hv-counting);position:absolute;inset:0;white-space:nowrap;color:var(--hv-count-color,#fff);-webkit-text-fill-color:var(--hv-count-color,#fff);pointer-events:none}
.strip{display:grid;gap:14px}

/* Notice ("Read first"): a glass panel with an ice "!" badge; calm, because the words carry it */
.notice{padding:22px 24px;border-radius:22px}
.notice .badge{display:inline-flex;align-items:center;gap:10px;margin-bottom:8px;color:var(--ice);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.notice .badge::before{content:"";flex:none;width:20px;height:20px;border-radius:50%;background:var(--ice-btn);box-shadow:0 0 14px rgba(98,160,255,.6);
  -webkit-mask:var(--i-alert) center/contain no-repeat;
  mask:var(--i-alert) center/contain no-repeat}
.notice ul{list-style:none}
.notice li{position:relative;padding:12px 0 12px 20px;color:var(--muted);font-size:14px;line-height:1.55}
.notice li::before{content:"";position:absolute;left:2px;top:21px;width:6px;height:6px;border-radius:50%;background:var(--sky);box-shadow:0 0 8px rgba(148,195,255,.8)}
.notice li+li{border-top:1px solid var(--line)}
.notice strong{color:#fff;font-weight:600}

/* Form ------------------------------------------------------------------------------------------------------------ */
.field-label{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 14px;margin-bottom:10px;color:var(--muted);font-size:13.5px;font-weight:600;letter-spacing:.01em}
.field-label .bal{color:var(--dim);font-size:13px;font-weight:500}
.field-label .bal b{color:#fff;font-weight:600}
/* An amount field: one glass well holding the number, the token and Max. */
.amount-row{display:flex;gap:8px;align-items:center;min-height:70px;padding:9px 9px 9px 20px;border-radius:22px;background:var(--well);box-shadow:inset 0 0 0 1px var(--line-2),inset 0 2px 12px rgba(0,0,0,.4);transition:box-shadow .25s ease}
.amount-row:focus-within{box-shadow:inset 0 0 0 1px rgba(170,210,255,.75),0 0 0 4px rgba(98,160,255,.16),0 0 38px -8px rgba(98,160,255,.6)}
.amount-input{flex:1;align-self:stretch;width:0;min-width:0;min-height:48px;padding:0;border:0;border-radius:12px;background:none;color:#fff;font-family:var(--unb);font-size:clamp(22px,2.3vw,28px);font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums;outline:none}
.amount-input::placeholder{color:rgba(125,144,182,.55)}
/* Frozen while a transaction is being signed: what is on screen is exactly what gets signed. */
.amount-input:disabled,.weeks-num:disabled{opacity:.55;cursor:not-allowed}
input[type=range]:disabled{opacity:.5;cursor:not-allowed}
.tick:disabled{opacity:.5;cursor:not-allowed}
.tick:disabled:hover b{color:var(--muted)}
.tok-chip{display:inline-flex;flex:none;align-items:center;gap:8px;min-height:44px;padding:0 14px 0 8px;border-radius:999px;background:var(--glass-hi),rgba(14,30,70,.6);box-shadow:var(--tile-line);color:var(--paper);font-size:13.5px;font-weight:600;letter-spacing:.01em}
.tok-chip[hidden]{display:none}
.max-btn{flex:none;min-height:44px;padding:0 18px;border:0;border-radius:999px;background:var(--glass-hi),rgba(14,30,70,.6);box-shadow:var(--tile-line);color:var(--ice);font-size:13px;font-weight:600;cursor:pointer;transition:color .2s ease,box-shadow .2s ease,transform .45s var(--spring)}
.max-btn:hover:not(:disabled){color:#fff;box-shadow:var(--tile-line-hot),0 0 20px -6px rgba(98,160,255,.7);transform:translateY(-1px)}
.max-btn:disabled{opacity:.4;cursor:not-allowed}
/* Token marks: a small coin with a lit rim. */
.ticon{display:inline-grid;flex:none;place-items:center;width:24px;height:24px;overflow:hidden;border-radius:50%;background:var(--navy);box-shadow:0 0 0 1px rgba(200,225,255,.4),0 0 10px rgba(98,160,255,.45);vertical-align:-6px}
.ticon img,.ticon svg{display:block;width:100%;height:100%;object-fit:cover}
.ticon .lb{color:var(--paper);font-size:10.5px;font-weight:700;line-height:1}
.ticon.inline{width:18px;height:18px;vertical-align:-3px;box-shadow:0 0 0 1px rgba(200,225,255,.35),0 0 8px rgba(98,160,255,.35)}
.ticon.inline .lb{font-size:9px}

/* The lock-length slider: a glowing track, an ice orb and the 26 / 52 / 78 / 104 week stops (the range input keeps its
   semantics; the page script sets --p, the filled share). */
.slider-block{margin-top:30px}
.weeks-row{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:14px}
.weeks-row .field-label{margin:0}
.weeks-num-wrap{display:flex;align-items:center;gap:10px;color:var(--dim);font-size:13px;font-weight:600}
.weeks-num{width:86px;min-height:44px;padding:0;border:0;border-radius:999px;background:var(--well);box-shadow:inset 0 0 0 1px var(--line-2),inset 0 2px 8px rgba(0,0,0,.35);color:#fff;font-family:var(--unb);font-size:17px;font-weight:600;text-align:center;-moz-appearance:textfield;appearance:textfield;transition:box-shadow .2s ease}
.weeks-num::-webkit-outer-spin-button,.weeks-num::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.weeks-num:focus{outline:none;box-shadow:inset 0 0 0 1px rgba(170,210,255,.75),0 0 0 4px rgba(98,160,255,.16),0 0 30px -8px rgba(98,160,255,.6)}
.range-wrap{--thumb:28px;position:relative;padding-bottom:48px}
input[type=range]{-webkit-appearance:none;appearance:none;display:block;width:100%;height:36px;background:transparent;cursor:pointer;touch-action:pan-y}
input[type=range]:focus{outline:none}
input[type=range]::-webkit-slider-runnable-track{height:8px;border-radius:8px;
  background:linear-gradient(90deg,#3D7BFF,#CFE3FF var(--p,100%),rgba(160,200,255,.13) var(--p,100%));box-shadow:inset 0 1px 2px rgba(0,0,0,.45),0 0 18px -4px rgba(98,160,255,.55)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;margin-top:-10px;border:0;border-radius:50%;
  background:radial-gradient(circle at 50% 38%,#fff 0 22%,#EAF3FF 40%,#9CC4FF 100%);
  box-shadow:inset 0 -2px 4px rgba(40,90,200,.45),0 0 0 6px rgba(98,160,255,.16),0 0 26px rgba(98,160,255,.9),0 4px 10px rgba(0,0,0,.5);transition:transform .45s var(--spring),box-shadow .3s ease}
input[type=range]:hover::-webkit-slider-thumb{box-shadow:inset 0 -2px 4px rgba(40,90,200,.45),0 0 0 8px rgba(98,160,255,.2),0 0 32px rgba(98,160,255,1),0 4px 10px rgba(0,0,0,.5)}
input[type=range]:active::-webkit-slider-thumb{transform:scale(1.14)}
input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px #02050D,0 0 0 5px var(--sky),0 0 26px rgba(98,160,255,.9)}
input[type=range]::-moz-range-track{height:8px;border-radius:8px;background:rgba(160,200,255,.13);box-shadow:inset 0 1px 2px rgba(0,0,0,.45)}
input[type=range]::-moz-range-progress{height:8px;border-radius:8px;background:linear-gradient(90deg,#3D7BFF,#CFE3FF);box-shadow:0 0 14px rgba(98,160,255,.7)}
input[type=range]::-moz-range-thumb{width:28px;height:28px;border:0;border-radius:50%;background:radial-gradient(circle at 50% 38%,#fff 0 22%,#EAF3FF 40%,#9CC4FF 100%);box-shadow:inset 0 -2px 4px rgba(40,90,200,.45),0 0 0 6px rgba(98,160,255,.16),0 0 26px rgba(98,160,255,.9)}
.ticks{position:absolute;left:0;right:0;bottom:0;height:42px;pointer-events:none}
.tick{position:absolute;top:0;display:flex;flex-direction:column;align-items:center;gap:3px;min-width:44px;padding:0;border:0;background:none;color:var(--dim);cursor:pointer;pointer-events:auto;transform:translateX(-50%)}
.tick::before{content:"";width:2px;height:7px;border-radius:2px;background:rgba(160,200,255,.32);transition:background-color .2s ease,box-shadow .2s ease}
.tick b{color:var(--muted);font-family:var(--unb);font-size:10.5px;font-weight:600;letter-spacing:.02em;transition:color .2s ease}
.tick span{color:var(--dim);font-size:10px;font-weight:600;letter-spacing:.12em}
.tick:hover b{color:#fff}
.tick:hover::before{background:var(--ice);box-shadow:0 0 8px rgba(148,195,255,.9)}
.tick-26{left:calc((100% - var(--thumb)) * .24272 + var(--thumb) / 2)}
.tick-52{left:calc((100% - var(--thumb)) * .49515 + var(--thumb) / 2)}
.tick-78{left:calc((100% - var(--thumb)) * .74757 + var(--thumb) / 2)}
.tick-104{left:calc(100% - var(--thumb) / 2)}

/* Outputs: quiet glass tiles inside the card */
.outputs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:26px}
.out{position:relative;isolation:isolate;min-width:0;padding:16px 18px;border-radius:20px;background:var(--tile);box-shadow:var(--tile-line);transition:box-shadow .3s ease,transform .5s var(--spring)}
.out:hover{box-shadow:var(--tile-line-hot),0 18px 36px -24px rgba(98,160,255,.6);transform:translateY(-2px)}
.out .k{display:block;margin-bottom:8px;color:var(--dim);font-size:12.5px;font-weight:500;letter-spacing:.01em}
.out .v{display:block;overflow:hidden;color:#fff;font-family:var(--unb);font-size:clamp(16px,1.5vw,20px);font-weight:600;letter-spacing:-.025em;font-variant-numeric:tabular-nums;text-overflow:ellipsis;white-space:nowrap}
.out .s{display:block;margin-top:6px;color:var(--dim);font-size:12px}

/* Buttons: the primary is the kit's ice pill, the secondary a glass pill */
.cta{position:relative;display:flex;width:100%;min-height:56px;align-items:center;justify-content:center;gap:10px;margin-top:24px;padding:0 24px;overflow:hidden;border:0;border-radius:999px;
  background:var(--ice-btn);box-shadow:var(--ice-btn-shadow);color:#06122E;font-size:15px;font-weight:600;letter-spacing:.005em;cursor:pointer;text-align:center;
  transition:transform .45s var(--spring),box-shadow .3s ease,opacity .2s ease,color .2s ease}
.cta::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(110deg,transparent 32%,rgba(255,255,255,.75) 48%,transparent 62%);background-size:260% 100%;background-position:130% 0;transition:background-position 1s var(--ease)}
.cta:hover:not(:disabled){transform:translateY(-2px);box-shadow:inset 0 1px 0 #fff,inset 0 -2px 8px rgba(40,90,200,.35),0 18px 44px -12px rgba(98,160,255,1),0 0 0 1px rgba(220,236,255,.8)}
.cta:hover:not(:disabled)::after{background-position:-50% 0}
.cta:active:not(:disabled){transform:scale(.97)}
/* Not ready yet (no amount, updating, signing): a glass pill with quiet words, so it never reads as pressable. */
.cta:disabled{background:var(--glass-hi),rgba(16,34,78,.55);box-shadow:inset 0 0 0 1px rgba(160,200,255,.2),inset 0 1px 0 rgba(235,244,255,.12);color:var(--muted);cursor:not-allowed;transform:none}
.cta:disabled::after{display:none}
.cta.ghost{background:var(--glass-hi),rgba(14,30,70,.5);box-shadow:inset 0 0 0 1px rgba(160,200,255,.3),inset 0 1px 0 rgba(235,244,255,.2),0 14px 30px -20px rgba(0,0,0,.8);color:var(--paper)}
.cta.ghost::after{display:none}
.cta.ghost:hover:not(:disabled){box-shadow:inset 0 0 0 1px rgba(190,220,255,.55),inset 0 1px 0 rgba(235,244,255,.3),0 14px 34px -14px rgba(98,160,255,.7);color:#fff}
.cta.ghost:disabled{color:var(--dim)}
.cta-hint{margin-top:12px;color:var(--dim);font-size:13px;text-align:center}
.cta-hint a{color:var(--sky);text-decoration:underline;text-underline-offset:3px}

/* Guided steps (26 Oct 2026; /stake, /swap's two steps and the vote Trade form; the states are set by
   /assets/hans-guide.js): the next thing to do is lit. A light-blue comet circles the field to fill first (its row
   carries data-gs="active"; the ring is the row's aria-hidden .gs-ring). Once every field holds a valid value the main
   button comes alive (.cta.gs-next): it pops once, then breathes, and a light band crosses it every few seconds. An
   enabled button whose fields aren't done yet (Connect wallet before any amount) is the quiet glass pill (.cta.gs-wait),
   so only one thing is bright at a time. Only transform, scale and opacity animate, on the compositor: measured on a
   real GPU (Apple M1, stars on) at 60 fps with no long task and no paint; Chromium still restyles the one animated
   element each frame (about 0.1 to 0.4 ms), as it does for any running CSS animation. No @property angle and no
   box-shadow pulse: both repaint every frame. A guide that is off screen, in a hidden tab, behind another guide or in
   /swap's inert pane is paused (.gs-quiet). Under reduced motion the rim is a steady light and the button is bright and
   still. */
.amount-row,.offer-trigger{position:relative}
.gs-ring{position:absolute;inset:0;z-index:1;border-radius:inherit;padding:2px;overflow:hidden;pointer-events:none;opacity:0;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
/* The comet: a conic light turning behind the 2 px rim. The square covers the diagonal of any field up to about 129 px
   tall (side = width + 48 px), and stays smaller than a percentage-sized square on wide fields (less GPU memory). Only
   the lit ring has an animation: a paused one kept its own GPU layer (about 2 to 9 MB each at 2x, measured), so an idle
   ring has none. The light leaves a field at once and fades in on the next, so it reads as moving there. */
.gs-ring::before{content:"";position:absolute;left:50%;top:50%;width:calc(100% + 48px);aspect-ratio:1;
  background:conic-gradient(rgba(98,160,255,.16) 0 180deg,rgba(98,160,255,.45) 250deg,#94C3FF 310deg,#EAF3FF 348deg,rgba(98,160,255,.16) 360deg);
  transform:translate(-50%,-50%)}
[data-gs="active"]>.gs-ring{opacity:1;transition:opacity .45s var(--ease)}
[data-gs="active"]>.gs-ring::before{animation:gs-swirl 3.2s linear infinite}
.amount-row[data-gs="active"]:not(:focus-within),.offer-trigger[data-gs="active"]{box-shadow:inset 0 0 0 1px rgba(170,210,255,.35),0 0 0 4px rgba(98,160,255,.1),0 0 34px -10px rgba(98,160,255,.7)}
/* Enabled, but an earlier step isn't done: the glass pill of .cta.ghost. */
.cta.gs-wait{background:var(--glass-hi),rgba(14,30,70,.5);box-shadow:inset 0 0 0 1px rgba(160,200,255,.3),inset 0 1px 0 rgba(235,244,255,.2);color:var(--paper)}
.cta.gs-wait::after{display:none}
.cta.gs-wait:hover:not(:disabled){box-shadow:inset 0 0 0 1px rgba(190,220,255,.55),inset 0 1px 0 rgba(235,244,255,.3),0 14px 34px -14px rgba(98,160,255,.7);color:#fff}
/* The next step: the hover glow, kept, and a breath: a light that swells and fades inside the button, under its words
   (its own stacking context, the light at z-index -1). The breath never moves or resizes the button: a pointer aims at
   a still target, and a box that keeps changing is never "stable" to browser automation, so every scripted click on it
   would wait forever (measured). Only the pop, once, uses the separate scale property; it settles in .6 s. */
.cta.gs-next{isolation:isolate;box-shadow:inset 0 1px 0 #fff,inset 0 -2px 8px rgba(40,90,200,.35),0 18px 44px -12px rgba(98,160,255,1),0 0 0 1px rgba(220,236,255,.8)}
.cta.gs-next::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;
  background:radial-gradient(70% 130% at 50% 100%,rgba(255,255,255,.75),rgba(255,255,255,0) 72%);animation:gs-breathe 2.8s var(--ease) infinite}
/* The light that crosses it: a band a third of the button wide that travels inside the button's own box, fading in and
   out at its ends. A band that slid in from outside made the button's words read as clipped
   (tests/helpers/gov-pages.mjs, layoutAudit). */
.cta.gs-next::after{right:auto;width:34%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.75) 50%,transparent);background-size:100% 100%;opacity:0;transition:none;animation:gs-sweep 3.6s var(--ease) .8s infinite}
.cta.gs-next.gs-pop{animation:gs-pop .6s var(--spring)}
.gs-quiet [data-gs="active"]>.gs-ring::before,.gs-quiet .cta.gs-next::before,.gs-quiet .cta.gs-next::after,
.wcar-pane[inert] [data-gs="active"]>.gs-ring::before,.wcar-pane[inert] .cta.gs-next::before,.wcar-pane[inert] .cta.gs-next::after{animation-play-state:paused}
/* "Step 2 of 2" for screen readers (the field's aria-describedby). */
.gs-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@keyframes gs-swirl{to{transform:translate(-50%,-50%) rotate(1turn)}}
@keyframes gs-breathe{50%{opacity:1}}
@keyframes gs-sweep{0%{transform:translateX(0);opacity:0}8%,42%{opacity:1}50%,100%{transform:translateX(194%);opacity:0}}
@keyframes gs-pop{from{scale:.94}}
/* Phones and tablets: a button scrolled to (Enter in the last field) clears the dock. */
@media(max-width:980px){.cta.gs-next{scroll-margin-bottom:110px}}

/* The lock form (/stake, /swap's lock step): its four outputs compact, one line each (the label left, the value right;
   the value drops under its label when both don't fit), two by two on wide cards (.outputs.four), so the button sits
   right under the slider. Their sub-lines are said again by the chart and the guidance under "Learn more". */
.outputs.compact{gap:8px;margin-top:20px}
.outputs.compact .out{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 12px;padding:12px 16px;border-radius:16px}
.outputs.compact .out .k{margin:0}
.outputs.compact .out .v{margin-left:auto;font-size:15px;text-align:right}
.outputs.compact .out .s{display:none}
/* "Learn more": the swap hero's glass pill whose chevron bobs; .in-card is the quiet one under a lock button, which
   scrolls to the chart and the guidance (.lock-learn). */
.learn-link{display:inline-flex;align-items:center;gap:10px;min-height:48px;margin-top:30px;padding:0 22px;border:0;border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.015)),rgba(10,22,52,.5);box-shadow:inset 0 0 0 1px rgba(160,200,255,.3),inset 0 1px 0 rgba(235,244,255,.2),0 14px 30px -20px rgba(0,0,0,.8);color:var(--paper);font-size:14.5px;font-weight:600;cursor:pointer;transition:transform .45s var(--spring),box-shadow .3s ease;animation:app-rise .9s var(--ease) .4s both}
.learn-link:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px rgba(190,220,255,.55),inset 0 1px 0 rgba(235,244,255,.3),0 14px 34px -14px rgba(98,160,255,.7)}
.learn-link svg{width:15px;height:15px;animation:chev-bob 1.9s var(--ease) infinite}
.learn-link.in-card{display:flex;min-height:44px;margin:14px auto 0;padding:0 18px;background:none;box-shadow:none;color:var(--muted);font-size:13.5px;animation:none}
.learn-link.in-card:hover{color:#fff;box-shadow:inset 0 0 0 1px rgba(160,200,255,.3)}
.lock-learn{margin-top:14px;border-top:1px solid var(--line)}
.lock-learn>.ramp{margin-top:20px}
@keyframes chev-bob{0%,100%{transform:translateY(0);opacity:.7}50%{transform:translateY(4px);opacity:1}}

/* Positions (re-rendered on every refresh, so nothing here animates on insert) ------------------------------------- */
.tab-panel{margin-top:4px}
.empty-card{position:relative;display:block;margin-top:10px;padding:38px 26px;border-radius:24px;background:var(--tile);box-shadow:inset 0 0 0 1px rgba(160,200,255,.16);color:var(--muted);font-size:15px;text-align:center}
.empty-card::before{content:"";display:block;width:44px;height:44px;margin:0 auto 16px;border-radius:50%;background:radial-gradient(circle at 50% 50%,#EAF3FF 0 4px,rgba(98,160,255,.5) 5px,transparent 11px),radial-gradient(circle at 50% 50%,rgba(31,79,184,.55),rgba(7,16,39,.9) 70%);box-shadow:inset 0 0 0 1px rgba(160,200,255,.3),0 0 30px -4px rgba(98,160,255,.55)}
.empty-card[hidden]{display:none}
.empty-card b{color:#fff;font-weight:600}
.empty-card .sub{display:block;max-width:60ch;margin-top:6px;color:var(--dim);font-size:13.5px}
.empty-card a{color:var(--sky)}
.pos{position:relative;isolation:isolate;margin-top:14px;padding:20px 22px;border-radius:24px;background:var(--tile);box-shadow:var(--tile-line);transition:box-shadow .35s ease}
.pos:hover{box-shadow:var(--tile-line-hot),0 24px 50px -32px rgba(98,160,255,.7)}
.pos.closed{opacity:.55}
.pos-head{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.pos-id{color:#fff;font-family:var(--unb);font-size:14px;font-weight:600;letter-spacing:-.01em}
/* State chips: tiny uppercase labels (the one place they belong). Live states glow, done states are filled, waiting
   states dashed, ended states dim. */
.badge-st{display:inline-flex;align-items:center;gap:7px;min-height:26px;padding:0 11px;border:1px solid rgba(160,200,255,.28);border-radius:999px;background:rgba(98,160,255,.06);color:var(--muted);font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.badge-st::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:currentColor}
.badge-st.closed{color:var(--dim);border-color:var(--line)}
.badge-st.ready,.badge-st.unlocked{border-color:rgba(98,160,255,.55);background:linear-gradient(180deg,rgba(98,160,255,.32),rgba(61,123,255,.18));color:#fff;box-shadow:inset 0 1px 0 rgba(235,244,255,.25),0 0 18px -4px rgba(98,160,255,.6)}
.badge-st.joining{border-style:dashed;border-color:rgba(207,227,255,.5);background:transparent;color:var(--ice)}
.badge-st.joining::before{background:transparent;box-shadow:inset 0 0 0 1.5px currentColor}
.badge-st.earning{border-color:rgba(170,210,255,.55);background:rgba(98,160,255,.14);color:var(--ice-2);box-shadow:0 0 18px -2px rgba(98,160,255,.45)}
.badge-st.earning::before{background:var(--live);box-shadow:0 0 10px var(--live);animation:app-blink 2.4s ease-in-out infinite}
.badge-st.ready::before,.badge-st.unlocked::before{background:#fff;box-shadow:0 0 8px #fff}
.pos-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:18px}
.pos-grid .k{display:block;margin-bottom:6px;color:var(--dim);font-size:12.5px;font-weight:500;letter-spacing:.01em}
.pos-grid .v{display:block;overflow:hidden;color:#fff;font-family:var(--unb);font-size:16px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums;text-overflow:ellipsis;white-space:nowrap}
.pos-grid .s{display:block;margin-top:4px;color:var(--dim);font-size:12px;font-variant-numeric:tabular-nums}
.pos-grid.pos-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.pos-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.btn-sm{position:relative;display:inline-flex;min-height:42px;align-items:center;justify-content:center;padding:0 20px;border:0;border-radius:999px;font-size:13.5px;font-weight:600;cursor:pointer;overflow:hidden;transition:transform .45s var(--spring),box-shadow .3s ease,opacity .2s ease,color .2s ease}
.btn-sm:disabled{opacity:.45;cursor:not-allowed;transform:none}
.btn-sm.primary{background:var(--ice-btn);color:#06122E;box-shadow:inset 0 1px 0 #fff,inset 0 -2px 6px rgba(40,90,200,.3),0 10px 26px -12px rgba(98,160,255,.85),0 0 0 1px rgba(200,225,255,.5)}
.btn-sm.primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:inset 0 1px 0 #fff,inset 0 -2px 6px rgba(40,90,200,.3),0 14px 32px -10px rgba(98,160,255,1),0 0 0 1px rgba(220,236,255,.8)}
.btn-sm.ghost{background:var(--glass-hi),rgba(14,30,70,.5);box-shadow:inset 0 0 0 1px rgba(160,200,255,.3),inset 0 1px 0 rgba(235,244,255,.18);color:var(--paper)}
.btn-sm.ghost:hover:not(:disabled){transform:translateY(-2px);box-shadow:inset 0 0 0 1px rgba(190,220,255,.55),inset 0 1px 0 rgba(235,244,255,.3),0 12px 28px -14px rgba(98,160,255,.7);color:#fff}
/* An irreversible action (unlock early): a strong azure outline and a "!" mark; the words say what it costs. */
.btn-sm.danger{gap:8px;background:rgba(31,79,184,.22);box-shadow:inset 0 0 0 1.5px rgba(98,160,255,.85),0 0 22px -8px rgba(61,123,255,.9);color:#fff}
.btn-sm.danger::before{content:"";flex:none;width:15px;height:15px;background:currentColor;
  -webkit-mask:var(--i-alert) center/contain no-repeat;
  mask:var(--i-alert) center/contain no-repeat}
.btn-sm.danger:hover:not(:disabled){transform:translateY(-2px);background:rgba(61,123,255,.3);box-shadow:inset 0 0 0 1.5px #9CC4FF,0 0 30px -6px rgba(61,123,255,1)}
.pos-note{margin-top:12px;color:var(--dim);font-size:13px;line-height:1.55}
.pos-note.alert{color:var(--warn);font-weight:500}
.pos-note b{color:#fff;font-weight:600}
.stream-note{margin-top:14px;padding:13px 16px;border-radius:18px;background:var(--tile);box-shadow:var(--tile-line)}
/* "Look here" lines (the last minutes before Thursday 00:00 UTC, can't reach Base): ice words in an outlined well with
   an "!" mark. */
.lock-warn{position:relative;margin-top:20px;padding:12px 16px 12px 44px;border-radius:18px;background:rgba(98,160,255,.08);box-shadow:inset 0 0 0 1px rgba(207,227,255,.42),0 0 26px -12px rgba(98,160,255,.6);color:var(--warn);font-size:13.5px;line-height:1.5}
.lock-warn::before{content:"";position:absolute;left:16px;top:13px;width:18px;height:18px;background:var(--ice);
  -webkit-mask:var(--i-alert) center/contain no-repeat;
  mask:var(--i-alert) center/contain no-repeat}
.lock-warn[hidden]{display:none}
.lock-warn b{color:#fff}
.lock-warn+.cta{margin-top:14px}
/* The early-unlock confirm (irreversible, typed FORFEIT): a strong azure outline with a glow and an "!" mark; the
   amounts it costs in white. */
.confirm{position:relative;margin-top:18px;padding:20px 22px;border-radius:22px;background:linear-gradient(180deg,rgba(61,123,255,.16),rgba(31,79,184,.08));box-shadow:inset 0 0 0 1.5px rgba(98,160,255,.8),0 0 0 4px rgba(61,123,255,.1),0 24px 50px -24px rgba(61,123,255,.7)}
.confirm h4{display:flex;align-items:center;gap:10px;margin-bottom:14px;color:#fff;font-family:var(--unb);font-size:15px;font-weight:600;letter-spacing:-.01em}
.confirm h4::before{content:"";flex:none;width:20px;height:20px;background:var(--ice-2);
  -webkit-mask:var(--i-alert) center/contain no-repeat;
  mask:var(--i-alert) center/contain no-repeat}
.confirm-rows{display:grid;margin-bottom:14px}
.confirm-rows>div{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid rgba(160,200,255,.18);font-size:14px}
.confirm-rows .ck{color:var(--muted)}
.confirm-rows .cv{font-family:var(--unb);font-size:13.5px;font-weight:600;white-space:nowrap}
.confirm-rows .cv.bad{color:#fff;text-shadow:0 0 14px rgba(98,160,255,.8)}
.confirm p{margin-bottom:14px;color:var(--muted);font-size:14px}
.confirm p strong{color:#fff;font-weight:700}
.confirm-word{width:100%;margin-bottom:14px;min-height:46px;padding:0 16px;border:0;border-radius:14px;background:var(--well);box-shadow:inset 0 0 0 1px rgba(160,200,255,.4);color:#fff;font-size:14px;font-weight:600;letter-spacing:.08em}
.confirm-word:focus{outline:none;box-shadow:inset 0 0 0 1px rgba(190,220,255,.9),0 0 0 4px rgba(98,160,255,.22)}
.confirm-actions{display:flex;gap:10px;flex-wrap:wrap}

/* Portal: HANS in, sHANS out. Two coins in space with a beam of light between them (transforms only). ------------- */
.portal{position:relative;isolation:isolate;padding:8px 0 0}
.portal-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(60px,.85fr) minmax(0,1.25fr);align-items:center;gap:6px}
.portal-grid::before{content:"";position:absolute;inset:-4% 0;border-radius:50%;pointer-events:none;z-index:-1;
  background:radial-gradient(closest-side,rgba(70,130,255,.32),rgba(40,90,220,.1) 55%,transparent 72%)}
.portal-side{display:flex;min-width:0;flex-direction:column;align-items:center;gap:16px;text-align:center}
.coin-wrap{position:relative;width:min(100%,176px);aspect-ratio:1;perspective:700px;animation:coin-float 6s ease-in-out infinite}
.coin-wrap.shans{animation-delay:-3s}
.coin-wrap::before{content:"";position:absolute;inset:6%;z-index:-1;border-radius:50%;box-shadow:0 0 60px 18px rgba(98,160,255,.34),0 0 120px 30px rgba(61,123,255,.14);animation:coin-glow 6s ease-in-out infinite;animation-delay:inherit}
.token-coin{position:relative;display:block;width:100%;height:100%;border-radius:50%;transform-style:preserve-3d;animation:coin-sway 7s ease-in-out infinite;animation-delay:inherit;
  filter:drop-shadow(0 0 26px rgba(98,160,255,.55)) drop-shadow(0 24px 30px rgba(0,0,0,.55))}
.token-coin img{display:block;width:100%;height:100%}   /* no circular crop: the coin art is round already, and sHANS's 's' badge sits on its rim */
.coin-badge{display:none}
.coin-name b{display:block;font-family:var(--unb);font-size:16px;font-weight:600;letter-spacing:-.01em}
.coin-name span{display:block;margin-top:4px;color:var(--dim);font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.portal-flow,.why-flow{position:relative;align-self:center;height:90px;min-width:0;margin-top:-34px}
.flow-line{position:absolute;top:50%;left:0;right:0;height:3px;margin-top:-1.5px;border-radius:3px;background:linear-gradient(90deg,transparent,rgba(148,195,255,.6) 18%,rgba(234,243,255,.95) 50%,rgba(148,195,255,.6) 82%,transparent);box-shadow:0 0 16px rgba(98,160,255,.85),0 0 40px rgba(61,123,255,.45)}
.flow-line::after{content:"";position:absolute;top:-3px;left:0;width:34%;height:8px;border-radius:8px;background:radial-gradient(closest-side,rgba(255,255,255,.95),rgba(148,195,255,.4) 60%,transparent);animation:flow-pulse 2.6s var(--ease) infinite}
.flow-head{position:absolute;top:50%;right:-4px;color:var(--ice-2);transform:translateY(-50%)}
.flow-head svg{display:block;width:14px;height:14px;filter:drop-shadow(0 0 8px rgba(148,195,255,.9))}
.flow-p{position:absolute;top:50%;left:0;right:0;height:0;animation:flow-x var(--d,3.4s) linear infinite var(--delay,0s)}
.flow-p i{position:absolute;left:0;top:calc(var(--y,0px) - var(--s,5px) / 2);width:var(--s,5px);height:var(--s,5px);border-radius:50%;background:#fff;box-shadow:0 0 10px rgba(166,206,255,1),0 0 3px #fff;animation:flow-fade var(--d,3.4s) linear infinite var(--delay,0s)}
.portal-caption{width:fit-content;max-width:100%;margin:26px auto 0;padding:10px 18px;border-radius:999px;background:var(--glass-hi),rgba(10,22,52,.5);box-shadow:inset 0 0 0 1px rgba(160,200,255,.2),inset 0 1px 0 rgba(235,244,255,.14);color:var(--dim);font-size:13px;line-height:1.5;text-align:center}
.portal-caption b{color:var(--ice);font-weight:600}

/* Why sHANS --------------------------------------------------------------------------------------------------------- */
.info{padding-block:96px 30px}
.section-eyebrow{display:flex;align-items:center;gap:10px;margin-bottom:16px;color:var(--ice);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.section-eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--live);box-shadow:0 0 10px var(--live)}
.section-title{max-width:26ch;font-family:var(--unb);font-size:clamp(34px,4.2vw,60px);font-weight:600;line-height:1.05;letter-spacing:-.045em}
.section-lede{max-width:62ch;margin-top:20px;color:var(--muted);font-size:clamp(16px,1.3vw,18.5px);line-height:1.55}
.section-lede strong{color:#fff;font-weight:600}
.why-grid{display:grid;grid-template-columns:minmax(0,1fr) 56px minmax(0,1fr) 56px minmax(0,1fr);align-items:stretch;gap:10px;margin-top:40px}
.why-card{position:relative;isolation:isolate;padding:26px 24px 28px;border-radius:var(--radius);background:radial-gradient(120% 70% at 50% -10%,rgba(255,255,255,.1),rgba(255,255,255,0) 62%),var(--glass-hi),var(--glass-dense);
  box-shadow:var(--glass-shadow);transition:transform .5s var(--spring)}
.why-card:hover{transform:translateY(-6px)}
.why-card .why-n{display:grid;place-items:center;width:46px;height:46px;margin-bottom:20px;border-radius:14px;border:1px solid rgba(160,200,255,.22);background:linear-gradient(160deg,rgba(40,80,180,.5),rgba(8,16,40,.8));box-shadow:inset 0 1px 0 rgba(255,255,255,.15);color:var(--amount);font-family:var(--unb);font-size:15px;font-weight:600}
.why-card h3{margin-bottom:10px;font-family:var(--unb);font-size:19px;font-weight:500;letter-spacing:-.02em;line-height:1.25}
.why-card p{color:var(--muted);font-size:14.5px;line-height:1.6}
.why-flow{height:auto;margin-top:0}

/* Toast and wallet dialog -------------------------------------------------------------------------------------------
   The page core rewrites the toast's class (ok / err), so it is styled by its id: a glass pill that springs up from the
   bottom. An error says so in words and with an "!" mark, not in red. */
#toast{position:fixed;left:50%;bottom:calc(26px + env(safe-area-inset-bottom,0px));z-index:220;display:flex;width:max-content;max-width:min(92vw,620px);align-items:center;gap:12px;padding:12px 12px 12px 20px;border-radius:20px;isolation:isolate;
  background:radial-gradient(120% 70% at 50% -10%,rgba(255,255,255,.12),rgba(255,255,255,0) 62%),var(--glass-hi),var(--glass-solid);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);
  box-shadow:inset 0 1px 0 rgba(235,244,255,.24),0 30px 70px -20px rgba(0,0,0,.85),0 0 40px -14px rgba(98,160,255,.55);
  opacity:0;visibility:hidden;pointer-events:none;transform:translate(-50%,120%);transition:opacity .25s var(--out),transform .5s var(--spring),visibility 0s linear .5s}
#toast.show{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0);transition:opacity .25s var(--out),transform .5s var(--spring),visibility 0s}
#toast>*{position:relative;z-index:3}
#toast .msg{color:var(--paper);font-size:14px;line-height:1.5;overflow-wrap:anywhere}
#toast.err{padding-left:46px}
#toast.err::after{content:"";position:absolute;left:18px;top:50%;z-index:3;width:18px;height:18px;margin-top:-9px;background:var(--ice);
  -webkit-mask:var(--i-alert) center/contain no-repeat;
  mask:var(--i-alert) center/contain no-repeat}
#toast.err .msg{color:var(--warn)}
#toast a{color:var(--sky);font-weight:600;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
#toast .x{flex:none;display:grid;place-items:center;width:32px;height:32px;border:0;border-radius:50%;background:rgba(160,200,255,.08);color:var(--dim);font-size:17px;cursor:pointer;transition:color .2s ease,background-color .2s ease}
#toast .x:hover{color:#fff;background:rgba(160,200,255,.18)}
.spin{flex:none;width:16px;height:16px;border:2px solid rgba(207,227,255,.22);border-top-color:var(--ice);border-radius:50%;animation:app-spin .9s linear infinite}
#wmodal{position:fixed;inset:0;z-index:300;display:none;place-items:center;padding:16px;background:rgba(2,5,13,.66);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
#wmodal.open{display:grid;animation:app-fade .25s ease both}
.wbox{width:min(92vw,420px);padding:28px;border-radius:28px;background:radial-gradient(120% 70% at 50% -10%,rgba(255,255,255,.12),rgba(255,255,255,0) 62%),var(--glass-hi),var(--glass-solid);box-shadow:var(--glass-shadow),0 50px 120px -30px rgba(0,0,0,.9)}
#wmodal.open .wbox{animation:app-dialog .5s var(--spring) both}
.wbox h3{margin-bottom:6px;font-family:var(--unb);font-size:20px;font-weight:600;letter-spacing:-.03em}
.wbox .wsub{margin-bottom:16px;color:var(--dim);font-size:14px}
.wopt{display:flex;width:100%;min-height:56px;align-items:center;gap:14px;margin-top:10px;padding:10px 16px;border:0;border-radius:18px;background:var(--tile);box-shadow:var(--tile-line);color:var(--paper);font-size:15px;font-weight:600;text-align:left;cursor:pointer;transition:box-shadow .25s ease,transform .45s var(--spring)}
.wopt:hover{box-shadow:var(--tile-line-hot),0 14px 30px -16px rgba(98,160,255,.7);transform:translateX(3px)}
.wopt img{width:30px;height:30px;border-radius:9px}
.wopt .fallback-ic{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:rgba(98,160,255,.14);box-shadow:inset 0 0 0 1px var(--line-2);color:var(--ice);font-size:13px}
.wclose{width:100%;min-height:44px;margin-top:16px;padding:10px;border:0;border-radius:999px;background:none;color:var(--dim);font-size:13.5px;font-weight:600;cursor:pointer;transition:color .2s ease,background-color .2s ease}
.wclose:hover{color:#fff;background:rgba(160,200,255,.08)}

/* Footer -------------------------------------------------------------------------------------------------------------
   The pages use the kit's clean footer (.hv-foot: the slogan, then one row). Every link in its row is a 44 px target. */
.hv-foot .hv-fbar a,.hv-foot .hv-fbar .hv-brand{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.hv-foot .hv-fbar span{display:inline-flex;align-items:center;min-height:44px}
/* The older footer markup (test pages): the same quiet row. */
footer:not(.hv-foot){margin-top:120px;padding:56px 0 50px;border-top:1px solid var(--line)}
footer:not(.hv-foot) .wrap{display:flex;justify-content:space-between;align-items:center;gap:28px;flex-wrap:wrap}
footer .big{font-family:var(--unb);font-weight:600;letter-spacing:-.04em;line-height:1.2}
footer .big .quiet{display:block;margin-bottom:8px;color:var(--muted);font-size:clamp(13px,1.7vw,20px);white-space:nowrap}
footer .big .signal-line{display:block;width:fit-content;font-size:clamp(19px,2.6vw,30px);background:var(--shimmer);background-size:280% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.footer-mark{display:block;width:44px;height:44px;margin:0 0 4px auto;opacity:.92}
footer .meta{color:var(--dim);font-size:12px;letter-spacing:.12em;line-height:2;text-align:right}
footer .meta a{display:inline-flex;align-items:center;min-height:44px;color:var(--paper);transition:color .2s ease,text-shadow .2s ease}
footer .meta a:hover{color:#fff;text-shadow:0 0 18px rgba(133,188,251,.6)}

/* The dock (phones and tablets, the kit's .hv-dock). Its Vote link follows the header's (hans-money-v2.js). */
.hv-dock a{transition:color .25s ease,transform .45s var(--spring)}
.hv-dock a:active{transform:scale(.94)}

@keyframes app-in{from{opacity:0;transform:translate3d(0,12px,0)}}
@keyframes app-rise{from{opacity:0;transform:translate3d(0,28px,0)}}
@keyframes app-line{from{transform:translateY(108%)}}
@keyframes app-settle{from{transform:translate3d(0,18px,0)}}
@keyframes app-ring{0%{transform:scale(1);opacity:.55}70%,100%{transform:scale(3.2);opacity:0}}
@keyframes app-blink{50%{opacity:.35}}
@keyframes app-spin{to{transform:rotate(360deg)}}
@keyframes app-fade{from{opacity:0}}
@keyframes app-pop{from{opacity:0;transform:translateY(-8px) scale(.96)}}
@keyframes app-dialog{from{opacity:0;transform:translateY(22px) scale(.96)}}
@keyframes app-shimmer{from{background-position:100% 0}to{background-position:-180% 0}}
@keyframes coin-turn{0%,30%{transform:rotateY(0)}50%,80%{transform:rotateY(180deg)}100%{transform:rotateY(360deg)}}
@keyframes coin-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes coin-sway{0%,100%{transform:rotateY(-16deg) rotateX(4deg)}50%{transform:rotateY(16deg) rotateX(-3deg)}}
@keyframes coin-glow{0%,100%{opacity:.55;transform:scale(.94)}50%{opacity:1;transform:scale(1.06)}}
@keyframes flow-x{from{transform:translateX(-3%)}to{transform:translateX(100%)}}
@keyframes flow-fade{0%{opacity:0}14%,86%{opacity:1}100%{opacity:0}}
@keyframes flow-pulse{0%{transform:translateX(-40%);opacity:0}20%{opacity:1}80%{opacity:1}100%{transform:translateX(300%);opacity:0}}

@media(max-width:1100px){.chip .addr{display:none}}
@media(max-width:1060px){
  .hero-grid{grid-template-columns:minmax(0,1fr) minmax(280px,.8fr);gap:30px}
  .app-grid{grid-template-columns:minmax(0,1fr)}
  .side{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
  .why-grid{grid-template-columns:minmax(0,1fr);gap:14px}
  .why-flow{display:none}
}
@media(max-width:980px){
  /* Phones and tablets: the kit's dock holds the app links at the bottom; the toast springs up above it. */
  .hv-money #toast{bottom:calc(98px + env(safe-area-inset-bottom,0px))}
}
@media(max-width:820px){
  .hero-grid{grid-template-columns:minmax(0,1fr)}
  .pos-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .side{grid-template-columns:minmax(0,1fr)}
  .hero-visual{max-width:460px;margin-inline:auto;width:100%}
}
@media(max-width:660px){
  .app-head .bar{gap:10px}
  .brand b{display:none}
  .app-nav{margin:0 auto 0 4px}
  .app-nav a{padding:7px 11px;font-size:13px}
  .chip{gap:8px;padding:0 5px 0 12px}
  .chip .addr{display:none}
  .btn-solid{padding:0 16px;font-size:13.5px}
  .app-hero{padding:32px 0 30px}
  .app-hero h1{font-size:clamp(34px,10.6vw,46px)}
  .hero-sub{margin-top:18px}
  .card-head{padding:22px 18px 0}
  .card-lede{padding:12px 18px 0}
  .card-body{padding:20px 18px 22px}
  .outputs{grid-template-columns:1fr;gap:8px}
  .out{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:13px 16px;border-radius:18px}
  .out .k{margin:0}
  .out .v{order:0;text-align:right}
  .out .s{display:none}
  .tick b{font-size:10px;letter-spacing:.02em}
  .tick span{display:none}
  .weeks-row{flex-wrap:wrap}
  .pos{padding:18px 16px}
  .pos-actions .btn-sm{padding:0 12px;white-space:nowrap}
  .pos-grid,.pos-grid.pos-grid-3{grid-template-columns:1fr;gap:12px}
  .amount-row{min-height:66px;padding:8px 8px 8px 16px;border-radius:20px}
  .max-btn{padding:0 14px}
  .tok-chip{padding:0 12px 0 7px}
  /* Touch targets of at least 44px on phones. */
  .btn-sm,.confirm-word,.weeks-num,input[type=range]{min-height:44px}
  .seg>button,.seg>a{min-height:44px}
  .range-wrap{padding-bottom:50px}
  .ticks{height:44px}
  .tick{min-width:44px;min-height:44px}
  .info{padding-block:64px 20px}
  .metric,.strip>div{padding:15px 16px;border-radius:20px}
  .notice{padding:18px 18px}
  .portal-caption{border-radius:18px}
  .coin-wrap{width:min(100%,118px)}
  footer:not(.hv-foot) .meta{text-align:left}
  .footer-mark{margin-left:0}
  .outputs.compact{margin-top:18px;gap:6px}
  .outputs.compact .out{padding:11px 14px;border-radius:16px}
  .outputs.compact .out .v{font-size:14px}
}
@media(max-width:430px){
  /* Room for the profile button, which never disappears (spec §11.1): the chip's address and the menu chevron go,
     and a long balance ends in "…" rather than pushing the header wider than the screen. */
  .acct-more,.chip .addr{display:none}
  .acct-wrap{flex:0 1 auto;min-width:0;gap:6px}
  .chip{gap:5px;min-width:0;padding:4px 4px 4px 9px}
  .chip .bal{min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:10.5px}
  .app-head .bar{gap:6px}
  .app-nav{padding:3px}
  .app-nav a{padding:6px 7px;font-size:12px}
  .pfbtn{width:44px;height:44px}
  .btn-solid{padding:0 14px}
  .btn-solid .wide{display:none}
  /* The v2 header keeps its switcher in the dock on phones, so its controls keep their size. */
  .hv-head .chip{padding:0 12px}
  .hv-head .chip .bal{font-size:12px}
}
@media(max-width:370px){
  .chip .bal{display:none}
  .chip{padding:4px}
  .brand img{width:30px;height:30px}
}
@media(max-width:340px){
  .wrap{width:calc(100% - 24px)}
  .app-nav a{padding:6px 7px;font-size:11.5px}
  .app-nav sup{display:none}
}
/* Touch screens: the profile button, the wallet chip and Connect are 44 px targets at every width (spec §11.1). */
@media (pointer:coarse){
  .pfbtn{width:44px;height:44px}
  #walletChip,#connectBtn{min-height:44px}
  #walletChip{min-width:44px;justify-content:center}
  .hv-head .pfbtn{width:48px;height:48px}
  .hv-head #walletChip,.hv-head #connectBtn{min-height:48px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  /* Guided steps, still: the field to fill keeps a steady lit rim, the next button its glow with no light crossing. */
  .gs-ring::before{background:rgba(148,195,255,.9)}
  .cta.gs-next::after{display:none}
  .grad,footer .big .signal-line{background-position:30% 0}
  .flow-p{display:none}
  .ln>span{transform:none}
}