/* assets/fonts/fonts.css */
/* perf_v4 (docs/v4, §9.3): our own copies of Instrument Sans and Outfit (SIL OFL, see OFL-*.txt),
   one variable file each, Latin + Latin Extended (every site language). Built from app/fonts with
   fontTools: instancer (wdth 100) + pyftsubset --flavor=woff2.
   The "Fallback" faces are Arial scaled to the same width and line metrics, so text does not
   jump when the real font arrives. */
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(/assets/fonts/instrument-sans-var.woff2) format('woff2')}
@font-face{font-family:'Outfit';font-style:normal;font-weight:400 600;font-display:swap;
  src:url(/assets/fonts/outfit-var.woff2) format('woff2')}
@font-face{font-family:'Instrument Sans Fallback';src:local('Arial'),local('ArialMT'),local('Helvetica');
  size-adjust:102.2%;ascent-override:94.9%;descent-override:24.5%;line-gap-override:0%}
@font-face{font-family:'Outfit Fallback';src:local('Arial'),local('ArialMT'),local('Helvetica');
  size-adjust:99.1%;ascent-override:100.9%;descent-override:26.2%;line-gap-override:0%}
:root:root{
  --display:'Outfit','Outfit Fallback',system-ui,sans-serif;
  --text:'Instrument Sans','Instrument Sans Fallback',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-display:'Outfit','Outfit Fallback','Instrument Sans',system-ui,sans-serif;
  --font-text:'Instrument Sans','Instrument Sans Fallback',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --ff-display:'Outfit','Outfit Fallback','Instrument Sans',sans-serif;
  --ff-body:'Instrument Sans','Instrument Sans Fallback',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}

/* assets/v3/v3.css */
/* ==========================================================================
   Private area v3 (private_v3): the look of docs/private-area-v3/reference/html/bf.css,
   as real CSS. Loaded only on v3 pages (app/v3.php v3_top()), never with app.css.
   Values come from bf.css (the source of truth) and docs/motion.md.
   Five materials: field (grainy image, never tinted), clear liquid glass (controls),
   one tinted glass sheet per screen, white cards, paper.
   ========================================================================== */
:root{
  --paper:#F7F8FA; --card:#FFFFFF; --paper-3:#F1F3F5; --line:#E6EAEE; --line-2:#D5DCE1;
  --ink:#0E1417; --ink-2:#3B4750; --sub:#5B6A74;
  --amber:#B86E10; --amber-ink:#8A5208; --amber-soft:#FBEFD9; --teal:#0B7A6A; --teal-soft:#DDF2EC; --coral:#C2412A;
  --r-field:24px; --r-card:24px; --r-inner:14px;
  --display:'Outfit',system-ui,sans-serif; --text:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ease-out:cubic-bezier(.2,.7,.2,1); --ease-in:cubic-bezier(.4,0,1,1); --ease-move:cubic-bezier(.3,.7,.2,1);
  --t-fast:120ms; --t-base:200ms; --t-slow:300ms;
  --glass-clear:rgba(255,255,255,.16);
  --glass-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 0 0 1px rgba(255,255,255,.12),0 10px 28px -14px rgba(15,21,25,.28);
  --sheet-bg:rgba(18,14,14,.46);
  --hdr-top:10px; --hdr-rest:12px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body.v3{margin:0;min-height:100vh;background:var(--paper);color:var(--ink);font-family:var(--text);font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased}
:where(.v3) a{color:inherit;text-decoration:none}
:where(.v3) button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;padding:0}
:where(.v3) img{max-width:100%}
:where(.v3) :where(h1,h2,h3,p){margin:0}
:where(.v3) :where(ul,ol){margin:0;padding:0;list-style:none}
.v3 .o{font-family:var(--display);font-weight:400;letter-spacing:-.035em}
.v3 .num{font-variant-numeric:tabular-nums}
.v3 .sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.v3 .skip-link{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:#fff;padding:10px 16px;border-radius:999px;font-weight:600}
.v3 .skip-link:focus{top:12px}
/* focus: a 2 px ink ring (white on a field) */
.v3 :focus{outline:none}
.v3 :focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.v3 .field :focus-visible,.v3 .sheet :focus-visible,.v3 .v3-hdr.is-top :focus-visible,.v3 .v3-pop :focus-visible,.v3 .v3-sheetpanel :focus-visible{outline-color:#fff}

/* ---------- page shells ---------- */
.v3 .wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.v3 .v3-main{display:block;padding-bottom:64px}
.v3 .v3-below{margin-top:32px}
.v3 .v3-gap{display:grid;gap:16px}
.v3 .v3-sec{margin-top:48px}

/* ---------- the field (grainy colour image, never tinted) ---------- */
.v3 .field{position:relative;overflow:hidden;border-radius:var(--r-field);isolation:isolate;color:#fff;
  -webkit-clip-path:inset(0 round var(--r-field));clip-path:inset(0 round var(--r-field))}
.v3 .field>img.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-3}
.v3 .field>picture.bg{position:absolute;inset:0;z-index:-3;display:block}
.v3 .field>picture.bg img{display:block;width:100%;height:100%;object-fit:cover}
.v3 .field>.grain{position:absolute;inset:0;z-index:-2;pointer-events:none;background:var(--grain-src,url(/assets/grain/grain-256.png)) repeat;
  background-size:var(--grain-size,128px) var(--grain-size,128px);mix-blend-mode:soft-light;opacity:1}
.v3 .field>.scrim-b{position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(14,20,23,0) 45%,rgba(14,20,23,.34) 100%)}
.v3 .field>.scrim-b.strong{background:linear-gradient(180deg,rgba(14,20,23,0) 35%,rgba(14,20,23,.45) 100%)}
.v3 .stage{margin:10px 10px 0;padding-top:82px;padding-bottom:40px}
.v3 .stage.v3-paperhead{padding-top:82px}
.v3 .field .lead,.v3 .field .small{color:rgba(255,255,255,.88)}
.v3 .field .cap{color:rgba(255,255,255,.78)}

/* ---------- glass: three recipes ---------- */
.v3 .glass{background:var(--glass-clear);-webkit-backdrop-filter:blur(20px) saturate(1.7);backdrop-filter:blur(20px) saturate(1.7);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 0 0 1px rgba(255,255,255,.14),0 10px 28px -14px rgba(15,21,25,.32);color:#fff}
.v3 .frost{background:var(--glass-clear);-webkit-backdrop-filter:blur(20px) saturate(1.7);backdrop-filter:blur(20px) saturate(1.7);
  box-shadow:var(--glass-shadow);color:var(--ink)}
.v3 .sheet{background:var(--sheet-bg);-webkit-backdrop-filter:blur(20px) saturate(1.3);backdrop-filter:blur(20px) saturate(1.3);
  border:1px solid rgba(255,255,255,.16);border-radius:var(--r-card);box-shadow:0 30px 60px -24px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.14);color:#fff}
.v3 .sheet .row-d{border-top:1px solid rgba(255,255,255,.12)}
.v3 .sheet .muted,.v3 .muted{color:rgba(255,255,255,.72)}
.v3 .sheet .cap{color:rgba(255,255,255,.72)}

/* ---------- the header: stationary (on a field, no pill, white logo) / pill (clear glass, black logo) ---------- */
.v3 .v3-sentinel{position:absolute;top:24px;left:0;width:1px;height:1px;pointer-events:none}
.v3 .v3-hdr{position:fixed;top:var(--hdr-top);left:0;right:0;z-index:60;pointer-events:none;
  transition:transform var(--t-base) var(--ease-out)}
.v3 .v3-hdr.is-top{transform:translateY(var(--hdr-rest))}
.v3 .v3-hdr .nav,.v3 .v3-hdr .v3-mtop{pointer-events:auto}
.v3 .nav{position:relative;height:60px;border-radius:999px;display:flex;align-items:center;gap:8px;padding:0 10px 0 24px;max-width:1200px;margin:0 auto;
  color:var(--ink);transition:color var(--t-base) var(--ease-out)}
.v3 .nav::before,.v3 .v3-mtop::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;
  background:var(--glass-clear);-webkit-backdrop-filter:blur(20px) saturate(1.7);backdrop-filter:blur(20px) saturate(1.7);box-shadow:var(--glass-shadow);
  opacity:1;transition:opacity var(--t-base) var(--ease-out)}
.v3 .v3-hdr.is-top .nav::before,.v3 .v3-hdr.is-top .v3-mtop::before{opacity:0;transition-duration:160ms;transition-timing-function:var(--ease-in)}
.v3 .v3-hdr.is-top .nav,.v3 .v3-hdr.is-top .v3-mtop{color:#fff}
.v3 .nav .logo{position:relative;display:flex;align-items:center;height:50px;flex:none}
.v3 .nav .logo img{height:50px;width:auto;display:block;margin:0 0 0 -6px;transition:opacity var(--t-base) var(--ease-out)}
.v3 .nav .logo img.li,.v3 .v3-mtop .mlogo-wrap img.li{position:absolute;left:0;top:0}
.v3 .v3-hdr .logo img.lw,.v3 .v3-hdr .mlogo-wrap img.lw{opacity:0}
.v3 .v3-hdr.is-top .logo img.lw,.v3 .v3-hdr.is-top .mlogo-wrap img.lw{opacity:1}
.v3 .v3-hdr.is-top .logo img.li,.v3 .v3-hdr.is-top .mlogo-wrap img.li{opacity:0}
.v3 .nav .links{flex:1;display:flex;justify-content:center;gap:4px;min-width:0}
.v3 .nav .links a{height:40px;display:inline-flex;align-items:center;padding:0 16px;border-radius:999px;font-size:14px;font-weight:500;white-space:nowrap;transition:background-color var(--t-fast)}
.v3 .nav .links a[aria-current="page"]{background:rgba(14,20,23,.06)}
.v3 .v3-hdr.is-top .nav .links a[aria-current="page"]{background:rgba(255,255,255,.22)}
.v3 .nav .links a:hover{background:rgba(14,20,23,.04)}
.v3 .v3-hdr.is-top .nav .links a:hover{background:rgba(255,255,255,.14)}
.v3 .iconbtn{width:40px;height:40px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;position:relative;flex:none}
.v3 .iconbtn .dot{position:absolute;top:9px;right:10px;width:6px;height:6px;border-radius:50%;background:currentColor}
.v3 .iconbtn[aria-current="page"]{background:rgba(14,20,23,.06)}
.v3 .v3-hdr.is-top .iconbtn[aria-current="page"]{background:rgba(255,255,255,.22)}
.v3 .acct{height:40px;border-radius:999px;display:inline-flex;align-items:center;gap:8px;padding:0 12px 0 4px;font-size:14px;font-weight:500;white-space:nowrap;
  background:rgba(14,20,23,.05);transition:background-color var(--t-base)}
.v3 .acct .ini{width:32px;height:32px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-family:var(--display);font-size:13px;
  background:var(--ink);color:#fff;transition:background-color var(--t-base),color var(--t-base)}
.v3 .v3-hdr.is-top .acct{background:rgba(255,255,255,.16)}
.v3 .v3-hdr.is-top .acct .ini{background:rgba(255,255,255,.9);color:var(--ink)}
.v3 .acct .chev{transition:transform var(--t-base) var(--ease-out)}
.v3 [aria-expanded="true"] .chev{transform:rotate(180deg)}
.v3 .nav .v3-lang{height:40px;padding:0 12px;border-radius:999px;font-size:14px;font-weight:500;display:inline-flex;align-items:center;gap:6px}
.v3 .nav .v3-login{height:40px;padding:0 14px;border-radius:999px;font-size:14px;font-weight:500;display:inline-flex;align-items:center}
/* phone top bar */
.v3 .v3-mtop{display:none;position:relative;height:56px;margin:0 10px;border-radius:999px;align-items:center;justify-content:space-between;padding:0 8px 0 14px;color:var(--ink);
  transition:color var(--t-base) var(--ease-out)}
.v3 .mlogo-wrap{position:relative;display:block;height:42px}
.v3 .mlogo-wrap img{height:42px;width:auto;display:block;margin-left:-4px;transition:opacity var(--t-base) var(--ease-out)}
.v3 .v3-mtop .mright{display:flex;align-items:center;gap:6px}
.v3 .v3-mtop .ini{width:40px;height:40px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-family:var(--display);font-size:15px;
  background:var(--ink);color:#fff}
.v3 .v3-hdr.is-top .v3-mtop .ini{background:rgba(255,255,255,.18);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 0 0 1px rgba(255,255,255,.22)}
.v3 .v3-hdr.is-top .v3-mtop .iconbtn{background:rgba(255,255,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 0 0 1px rgba(255,255,255,.18)}

/* ---------- menus (desktop): tinted glass, anchored under their button ---------- */
.v3 .v3-menuwrap{position:relative;flex:none}
.v3 .v3-pop{position:absolute;right:0;top:calc(100% + 10px);z-index:70;min-width:280px;padding:8px;border-radius:var(--r-inner);color:#fff;
  background:rgba(18,14,14,.5);-webkit-backdrop-filter:blur(20px) saturate(1.3);backdrop-filter:blur(20px) saturate(1.3);
  border:1px solid rgba(255,255,255,.16);box-shadow:0 30px 60px -24px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.14);
  transform-origin:top right;opacity:0;transform:translateY(-4px) scale(.98);visibility:hidden;
  transition:opacity var(--t-fast) var(--ease-in),transform var(--t-fast) var(--ease-in),visibility 0s linear var(--t-fast)}
.v3 .v3-pop.is-open{opacity:1;transform:none;visibility:visible;transition:opacity 180ms var(--ease-out),transform 180ms var(--ease-out),visibility 0s}
.v3 .v3-pop .mi{display:flex;align-items:center;gap:12px;width:100%;min-height:44px;padding:10px 12px;border-radius:10px;text-align:left;font-size:15px;font-weight:500;color:#fff}
.v3 .v3-pop .mi:hover,.v3 .v3-pop .mi:focus-visible{background:rgba(255,255,255,.1);outline:none}
.v3 .v3-pop .mi svg{flex:none;opacity:.9}
.v3 .v3-pop .mi .mt{display:flex;flex-direction:column;gap:2px;min-width:0}
.v3 .v3-pop .mi .ms{font-size:13px;font-weight:400;color:rgba(255,255,255,.72)}
.v3 .v3-pop .mi .mr{margin-left:auto;font-size:13px;font-weight:400;color:rgba(255,255,255,.72);white-space:nowrap}
.v3 .v3-pop .mhr{height:1px;background:rgba(255,255,255,.12);margin:6px 8px}
.v3 .v3-pop .mhead{display:flex;align-items:center;gap:12px;padding:10px 12px 12px}
.v3 .v3-pop .mhead .av{width:44px;height:44px;font-size:15px}
.v3 .v3-pop .meye{padding:8px 12px 2px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.v3 .v3-pop .madmin{display:flex;flex-wrap:wrap;gap:4px 0;padding:4px 12px 8px;font-size:15px;font-weight:500}
.v3 .v3-pop .madmin a{padding:4px 0}
.v3 .v3-pop .madmin span{padding:4px 6px;color:rgba(255,255,255,.6)}
.v3 .v3-pop .mcode{display:flex;gap:8px;padding:6px 12px 10px}
.v3 .v3-pop .mcode input{flex:1;min-width:0;height:44px;border-radius:999px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08);color:#fff;padding:0 14px;font:inherit;font-size:16px;letter-spacing:.06em;text-transform:uppercase}
.v3 .v3-pop .mcode input::placeholder{color:rgba(255,255,255,.55)}
.v3 .v3-pop-nt{min-width:300px}
.v3 .v3-pop-acct{min-width:300px}

/* ---------- bottom sheets (phone) and the confirm dialog ---------- */
.v3 .v3-scrim{position:fixed;inset:0;z-index:80;background:rgba(14,20,23,.32);opacity:0;visibility:hidden;transition:opacity var(--t-base) var(--ease-out),visibility 0s linear var(--t-base)}
.v3 .v3-scrim.is-open{opacity:1;visibility:visible;transition:opacity var(--t-base) var(--ease-out),visibility 0s}
.v3 .v3-sheetpanel{position:fixed;left:8px;right:8px;bottom:8px;z-index:81;max-height:86vh;overflow:auto;padding:10px 12px calc(16px + env(safe-area-inset-bottom));
  border-radius:24px;color:#fff;background:rgba(18,14,14,.5);-webkit-backdrop-filter:blur(20px) saturate(1.3);backdrop-filter:blur(20px) saturate(1.3);
  border:1px solid rgba(255,255,255,.16);box-shadow:0 30px 60px -24px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.14);
  transform:translateY(110%);visibility:hidden;transition:transform var(--t-base) var(--ease-in),visibility 0s linear var(--t-base)}
.v3 .v3-sheetpanel.is-open{transform:none;visibility:visible;transition:transform var(--t-slow) var(--ease-out),visibility 0s}
.v3 .v3-sheetpanel .grab{display:block;width:40px;height:5px;border-radius:999px;background:rgba(255,255,255,.4);margin:2px auto 12px}
.v3 .v3-sheetpanel .mi{display:flex;align-items:center;gap:12px;width:100%;min-height:52px;padding:10px 12px;border-radius:12px;text-align:left;font-size:16px;font-weight:500;color:#fff}
.v3 .v3-sheetpanel .mi:active{background:rgba(255,255,255,.1)}
.v3 .v3-sheetpanel .mi .ms{display:block;font-size:13px;font-weight:400;color:rgba(255,255,255,.72)}
.v3 .v3-sheetpanel .mhr{height:1px;background:rgba(255,255,255,.12);margin:6px 8px}
.v3 .v3-sheetpanel h2{font-family:var(--display);font-weight:400;font-size:24px;letter-spacing:-.03em;padding:4px 12px 12px}
.v3 dialog.v3-dialog{border:0;padding:0;background:transparent;color:#fff;max-width:min(460px,calc(100vw - 32px));width:100%}
.v3 dialog.v3-dialog::backdrop{background:rgba(14,20,23,.32)}
.v3 dialog.v3-dialog .sheet{padding:26px}
.v3 dialog.v3-dialog[open] .sheet{animation:v3dlg var(--t-base) var(--ease-out)}
@keyframes v3dlg{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
.v3 .v3-dialog .acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}

/* ---------- the phone tab bar and the sticky action bar (clear glass) ---------- */
.v3 .tabbar{display:none;position:fixed;left:12px;right:12px;bottom:calc(14px + env(safe-area-inset-bottom));height:66px;border-radius:999px;align-items:center;justify-content:space-around;padding:0 8px;z-index:55}
.v3 .tabbar a{width:62px;height:54px;border-radius:999px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:11px;font-weight:600;color:var(--sub);transition:transform 80ms}
.v3 .tabbar a:active{transform:scale(.92)}
.v3 .tabbar a[aria-current="page"]{color:var(--ink);background:rgba(14,20,23,.06)}
.v3 .tabbar .plus{width:52px;height:52px;border-radius:50%;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;transition:transform 80ms}
.v3 .tabbar .plus:active{transform:scale(.92)}
.v3 .actbar{position:fixed;left:12px;right:12px;bottom:calc(14px + env(safe-area-inset-bottom));z-index:55;min-height:74px;border-radius:999px;display:none;align-items:center;gap:12px;padding:10px 10px 10px 22px}
.v3 .actbar .grow{flex:1;min-width:0}
.v3 .actbar .t1{font-weight:600;font-size:15px;line-height:1.25}
.v3 .actbar .t2{font-size:12.5px;color:var(--sub)}
.v3 .actbar .eye{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--sub)}

/* ---------- buttons, links, chips, status pills ---------- */
.v3 .btn{height:48px;padding:0 22px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:15px;font-weight:600;white-space:nowrap;
  transition:background-color var(--t-fast),transform 80ms}
.v3 .btn:active{transform:scale(.98)}
.v3 .btn.sm{height:40px;padding:0 16px;font-size:14px}
.v3 .btn.ink{background:var(--ink);color:#fff}
.v3 .btn.ink:hover{background:#1C252A}
.v3 .btn.white{background:#fff;color:var(--ink)}
.v3 .btn.white:hover{background:#F1F3F5}
.v3 .btn.line{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-2)}
.v3 .btn.line:hover{box-shadow:inset 0 0 0 1px var(--ink)}
.v3 .btn.glassy{background:rgba(255,255,255,.16);-webkit-backdrop-filter:blur(20px) saturate(1.7);backdrop-filter:blur(20px) saturate(1.7);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 0 0 1px rgba(255,255,255,.18);color:#fff}
.v3 .sheet .btn.glassy{-webkit-backdrop-filter:none;backdrop-filter:none}
.v3 .btn.glassy:hover{background:rgba(255,255,255,.24)}
.v3 .btn.block{width:100%}
.v3 .btn[disabled],.v3 .btn[aria-disabled="true"]{opacity:.45;pointer-events:none}
.v3 .link{font-weight:600;font-size:14px;text-decoration:underline;text-underline-offset:3px}
.v3 .link.coral{color:var(--coral)}
.v3 .chip{height:34px;padding:0 14px;border-radius:999px;display:inline-flex;align-items:center;gap:8px;font-size:14px;white-space:nowrap}
.v3 .chip.w{background:#fff;color:var(--ink)}
.v3 .chip.g{background:rgba(20,24,28,.38);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.26);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.v3 .sheet .chip.g{-webkit-backdrop-filter:none;backdrop-filter:none}
.v3 .chip.line{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-2)}
.v3 .chip.sm{height:30px;font-size:13px;padding:0 12px}
.v3 .st{height:26px;padding:0 10px;border-radius:999px;display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;white-space:nowrap}
.v3 .st::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.v3 .st.wait{background:var(--amber-soft);color:var(--amber-ink)}
.v3 .st.done{background:var(--teal-soft);color:var(--teal)}
.v3 .st.off{background:var(--paper-3);color:var(--ink-2)}

/* ---------- type, cards, rows ---------- */
.v3 .card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);padding:28px;min-width:0}
.v3 .card.flush{padding:8px 24px}
.v3 .eyebrow{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--sub)}
.v3 .sheet .eyebrow,.v3 .field .eyebrow,.v3 .v3-pop .eyebrow{color:rgba(255,255,255,.78)}
.v3 .h1{font-family:var(--display);font-weight:400;letter-spacing:-.035em;font-size:44px;line-height:1.05;text-wrap:balance}
.v3 .h1.xl{font-size:64px}
.v3 .h2{font-family:var(--display);font-weight:400;letter-spacing:-.03em;font-size:28px;line-height:1.15;text-wrap:balance}
.v3 .h3{font-family:var(--display);font-weight:400;letter-spacing:-.02em;font-size:21px;line-height:1.2}
.v3 .lead{font-size:16px;line-height:1.5;color:var(--ink-2)}
.v3 .small{font-size:14px;line-height:1.45;color:var(--ink-2)}
.v3 .cap{font-size:13px;line-height:1.4;color:var(--sub)}
.v3 .row{display:flex;align-items:center;gap:14px;min-height:68px;padding:12px 4px;border-top:1px solid var(--line)}
.v3 .row:first-child{border-top:0}
.v3 a.row,.v3 button.row{width:100%;text-align:left;transition:background-color var(--t-fast);border-radius:12px}
.v3 a.row:hover,.v3 button.row:hover{background:var(--paper-3)}
.v3 .row .grow{flex:1;min-width:0}
.v3 .row .t1{font-size:16px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v3 .row .t2{font-size:13.5px;color:var(--sub);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:2px}
.v3 .row .amt{text-align:right;flex:none}
.v3 .row .amt b{display:block;font-size:16px;font-weight:600;font-variant-numeric:tabular-nums}
.v3 .row .amt span{font-size:13px;color:var(--sub)}
.v3 .kv{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:12px 0;border-top:1px solid var(--line);font-size:15px}
.v3 .kv:first-child{border-top:0}
.v3 .kv>span:first-child{color:var(--ink-2)}
.v3 .kv b,.v3 .kv .r{font-variant-numeric:tabular-nums;text-align:right}
.v3 .kv.strong>span:first-child{color:var(--ink);font-weight:600}
.v3 .kv.strong b{font-weight:600}
.v3 .sheet .kv{border-top-color:rgba(255,255,255,.12)}
.v3 .sheet .kv>span:first-child{color:rgba(255,255,255,.72)}
.v3 .cardhead{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:14px}

/* ---------- people: initials in discs, never faces ---------- */
.v3 .av{border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-family:var(--display);letter-spacing:0;flex:none;line-height:1}
.v3 .av.s{width:40px;height:40px;font-size:15px;background:var(--paper-3);color:var(--ink)}
.v3 .av.xs{width:28px;height:28px;font-size:11px;background:var(--paper-3);color:var(--ink)}
.v3 .av.b{background:var(--ink);color:#fff}
.v3 .av.g{background:rgba(255,255,255,.18);-webkit-backdrop-filter:blur(20px) saturate(1.6);backdrop-filter:blur(20px) saturate(1.6);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 0 0 1px rgba(255,255,255,.22);color:#fff}
.v3 .sheet .av.g,.v3 .v3-pop .av.g{-webkit-backdrop-filter:none;backdrop-filter:none}
.v3 .av.empty{background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 2px rgba(255,255,255,.55);color:rgba(255,255,255,.9)}
.v3 .av.s.empty,.v3 .av.xs.empty{background:#fff;box-shadow:inset 0 0 0 1.5px var(--line-2);color:var(--sub)}
.v3 .sheet .av.s.empty,.v3 .sheet .av.xs.empty{background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55);color:#fff}
.v3 .sheet .av.s:not(.empty):not(.g){background:rgba(255,255,255,.18);color:#fff}
.v3 .pair{display:inline-flex;flex:none}
.v3 .pair .av{position:relative}
.v3 .pair .av:first-child{z-index:1}
.v3 .pair .av+.av{margin-left:-8px}
/* the turn glow: on whoever must act, never on both */
.v3 .turn{position:relative}
.v3 .turn::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
  box-shadow:0 0 0 6px rgba(255,214,150,.22),0 0 0 14px rgba(255,214,150,.10);animation:v3breathe 2.4s ease-in-out 3}
.v3 .turn.is-idle::after{animation:none}
@keyframes v3breathe{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.04)}}

/* ---------- segmented switchers (links with aria-current; they change the URL) ---------- */
.v3 .seg{position:relative;display:inline-flex;gap:4px;padding:4px;border-radius:999px;max-width:100%;overflow-x:auto;scrollbar-width:none}
.v3 .seg::-webkit-scrollbar{display:none}
.v3 .seg a,.v3 .seg button{position:relative;z-index:1;height:36px;padding:0 16px;border-radius:999px;display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:500;white-space:nowrap;transition:color 220ms var(--ease-move)}
.v3 .seg .n{opacity:.7;font-weight:400}
.v3 .seg.on-field{background:var(--glass-clear);-webkit-backdrop-filter:blur(20px) saturate(1.7);backdrop-filter:blur(20px) saturate(1.7);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 0 0 1px rgba(255,255,255,.18);color:#fff}
.v3 .seg.on-field [aria-current="page"],.v3 .seg.on-field [aria-pressed="true"]{background:#fff;color:var(--ink)}
.v3 .seg.on-paper{background:var(--paper-3);color:var(--ink-2)}
.v3 .seg.on-paper [aria-current="page"],.v3 .seg.on-paper [aria-pressed="true"]{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(14,20,23,.08)}
.v3 .seg.full{display:flex;width:100%}
.v3 .seg.full>*{flex:1;justify-content:center}
.v3 .seg .slider{position:absolute;z-index:0;top:4px;height:36px;border-radius:999px;background:#fff;transition:transform 220ms var(--ease-move),width 220ms var(--ease-move)}
.v3 .seg.on-paper .slider{box-shadow:0 1px 2px rgba(14,20,23,.08)}
.v3 .seg.has-slider [aria-current="page"],.v3 .seg.has-slider [aria-pressed="true"]{background:transparent;box-shadow:none}

/* ---------- the 5-step line ---------- */
.v3 .track{position:relative;display:flex;justify-content:space-between;align-items:flex-start}
.v3 .track::before{content:"";position:absolute;left:12px;right:12px;top:11px;height:2px;background:rgba(255,255,255,.35)}
.v3 .track .fill{position:absolute;left:12px;top:11px;height:2px;background:#fff;transform-origin:left center;width:calc((100% - 24px) * var(--p,0));
  transform:scaleX(1);transition:transform 600ms var(--ease-out)}
.v3 .track.is-pre .fill{transform:scaleX(0)}
.v3 .node{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;width:24px;font-size:12.5px;color:rgba(255,255,255,.85);white-space:nowrap}
.v3 .node i{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-style:normal;background:rgba(18,14,14,.35);box-shadow:inset 0 0 0 2px rgba(255,255,255,.55)}
.v3 .node.done i{background:#fff;color:var(--ink);box-shadow:none}
.v3 .node.now i{background:rgba(255,255,255,.2);box-shadow:inset 0 0 0 2px #fff,0 0 0 6px rgba(255,255,255,.18)}
.v3 .node.now{color:#fff;font-weight:600}

/* ---------- inputs ---------- */
.v3 .lbl{display:block;font-size:14px;font-weight:600;margin:0 0 8px}
.v3 .lbl .opt{font-weight:400;color:var(--sub)}
.v3 .field-in,.v3 input.field-in,.v3 select.field-in,.v3 textarea.field-in{width:100%;height:52px;border-radius:var(--r-inner);background:var(--paper-3);border:1px solid transparent;padding:0 16px;
  font:inherit;font-size:16px;color:var(--ink);transition:background-color var(--t-fast),border-color var(--t-fast)}
.v3 textarea.field-in{height:auto;min-height:96px;padding:14px 16px;resize:vertical}
.v3 .field-in:focus,.v3 .field-in:focus-within{background:#fff;border-color:var(--ink);box-shadow:0 0 0 4px rgba(14,20,23,.08);outline:none}
.v3 .field-in::placeholder{color:var(--sub)}
.v3 .field-in.pre{display:flex;align-items:center;gap:2px;padding:0 16px}
.v3 .field-in.pre span{color:var(--sub);white-space:nowrap}
.v3 .field-in.pre input{flex:1;min-width:0;height:50px;border:0;background:transparent;font:inherit;font-size:16px;color:var(--ink);padding:0 0 0 2px;outline:none}
.v3 select.field-in{-webkit-appearance:none;appearance:none;padding-right:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230E1417' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center}
.v3 .fgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px 16px}
.v3 .fgrid .span{grid-column:1/-1}
.v3 .toggle{-webkit-appearance:none;appearance:none;width:44px;height:26px;border-radius:999px;background:var(--line-2);position:relative;flex:none;margin:0;cursor:pointer;transition:background-color 180ms var(--ease-move)}
.v3 .toggle::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:transform 180ms var(--ease-move)}
.v3 .toggle:checked{background:var(--ink)}
.v3 .toggle:checked::after{transform:translateX(18px)}
.v3 .toggle:disabled{opacity:.5;cursor:default}
.v3 .err{color:var(--coral);font-size:13.5px;margin-top:6px}

/* ---------- toast: a clear glass pill, bottom centre ---------- */
.v3 .v3-toast{position:fixed;left:50%;bottom:calc(28px + env(safe-area-inset-bottom));z-index:90;transform:translate(-50%,8px);opacity:0;pointer-events:none;
  height:44px;padding:0 20px;border-radius:999px;display:inline-flex;align-items:center;font-size:14px;font-weight:600;
  background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(20px) saturate(1.7);backdrop-filter:blur(20px) saturate(1.7);box-shadow:var(--glass-shadow),0 10px 30px rgba(14,20,23,.12);color:var(--ink);
  transition:opacity 160ms var(--ease-in),transform 160ms var(--ease-in)}
.v3 .v3-toast.is-on{opacity:1;transform:translate(-50%,0);transition:opacity var(--t-base) var(--ease-out),transform var(--t-base) var(--ease-out)}
.v3 .v3-flash{max-width:1200px;margin:16px auto 0;padding:0 24px}
.v3 .v3-flash div{background:var(--card);border:1px solid var(--line);border-radius:var(--r-inner);padding:14px 18px;font-size:14.5px}

/* ---------- accordion (Help, FAQ) ---------- */
.v3 .acc details{border-top:1px solid var(--line)}
.v3 .acc details:first-child{border-top:0}
.v3 .acc summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:60px;padding:14px 4px;cursor:pointer;font-size:16px;font-weight:600}
.v3 .acc summary::-webkit-details-marker{display:none}
.v3 .acc summary::after{content:"+";font-weight:400;font-size:22px;line-height:1;color:var(--ink-2);transition:transform 220ms var(--ease-out)}
.v3 .acc details[open] summary::after{transform:rotate(45deg)}
.v3 .acc .ans{padding:0 4px 18px;font-size:15px;line-height:1.55;color:var(--ink-2)}

/* ---------- skeleton ---------- */
.v3 .skel{background:var(--paper-3);border-radius:10px;animation:v3pulse 1.2s ease-in-out infinite}
@keyframes v3pulse{50%{opacity:.55}}

/* ---------- the footer card (footer_v2) sits 64 after the last card ---------- */
.v3 .bf-foot2{margin-top:64px}
.v3 .bh-grain{position:absolute;inset:0;z-index:2;pointer-events:none;background-image:var(--grain-src,url(/assets/grain/grain-256.png));background-repeat:repeat;
  background-size:var(--grain-size,128px) var(--grain-size,128px);mix-blend-mode:soft-light;opacity:1}

/* ---------- phones ---------- */
@media (max-width:760px){
  body.v3{font-size:15px}
  .v3 .wrap{padding:0 10px}
  .v3 .wrap.text{padding:0 16px}
  .v3 .nav{display:none}
  .v3 .v3-mtop{display:flex}
  .v3 .stage{padding-top:76px;padding-bottom:24px}
  .v3 .stage .wrap{padding:0 16px}
  .v3 .card{padding:20px}
  .v3 .card.flush{padding:4px 16px}
  .v3 .h1{font-size:32px;line-height:1.08}
  .v3 .h1.xl{font-size:38px}
  .v3 .h2{font-size:24px}
  .v3 .fgrid{grid-template-columns:1fr}
  .v3 .v3-below{margin-top:16px}
  .v3 .v3-sec{margin-top:32px}
  body.v3.has-tabbar .tabbar{display:flex}
  body.v3.has-tabbar .v3-main,body.v3.has-actbar .v3-main{padding-bottom:110px}
  body.v3.has-actbar .actbar{display:flex}
  .v3 .bf-foot2{margin-top:48px}
  body.v3.has-tabbar .bf-foot2,body.v3.has-actbar .bf-foot2{margin-bottom:96px}
  .v3 .v3-hdr.is-top{transform:translateY(4px)}
  .v3 .seg.m-full{display:flex;width:100%}
  .v3 .seg.m-full>*{flex:1;justify-content:center;padding:0 10px}
  .v3 .v3-toast{bottom:calc(96px + env(safe-area-inset-bottom))}
  .v3 .hide-m{display:none!important}
}
@media (min-width:761px){
  .v3 .hide-d{display:none!important}
  /* on desktop a sheet is a centred dialog (the language list) */
  .v3 .v3-sheetpanel{left:50%;right:auto;top:50%;bottom:auto;width:420px;max-height:80vh;padding:16px;opacity:0;transform:translate(-50%,-46%) scale(.98);
    transition:opacity var(--t-fast) var(--ease-in),transform var(--t-fast) var(--ease-in),visibility 0s linear var(--t-fast)}
  .v3 .v3-sheetpanel.is-open{opacity:1;transform:translate(-50%,-50%);transition:opacity var(--t-base) var(--ease-out),transform var(--t-base) var(--ease-out),visibility 0s}
  .v3 .v3-sheetpanel .grab{display:none}
}

/* ---------- reduced motion, reduced transparency, no backdrop-filter, low-end devices ---------- */
@media (prefers-reduced-motion:reduce){
  .v3 *,.v3 *::before,.v3 *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .v3 .turn::after{animation:none;opacity:1}
}
@media (prefers-reduced-transparency:reduce){
  .v3 .glass,.v3 .frost,.v3 .nav::before,.v3 .v3-mtop::before,.v3 .tabbar,.v3 .actbar,.v3 .seg.on-field,.v3 .btn.glassy,.v3 .chip.g,.v3 .av.g,.v3 .v3-toast{background:rgba(255,255,255,.92)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;color:var(--ink)!important}
  .v3 .sheet,.v3 .v3-pop,.v3 .v3-sheetpanel{background:rgba(18,14,14,.9)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .v3 .glass,.v3 .frost,.v3 .nav::before,.v3 .v3-mtop::before,.v3 .tabbar,.v3 .actbar,.v3 .seg.on-field,.v3 .btn.glassy,.v3 .chip.g,.v3 .av.g,.v3 .v3-toast{background:rgba(255,255,255,.92)!important;color:var(--ink)!important}
  .v3 .sheet,.v3 .v3-pop,.v3 .v3-sheetpanel{background:rgba(18,14,14,.9)!important}
}
html.v3-lite .v3 .glass,html.v3-lite .v3 .frost,html.v3-lite .v3 .nav::before,html.v3-lite .v3 .v3-mtop::before,html.v3-lite .v3 .tabbar,html.v3-lite .v3 .actbar,html.v3-lite .v3 .seg.on-field,html.v3-lite .v3 .btn.glassy,html.v3-lite .v3 .chip.g,html.v3-lite .v3 .av.g{background:rgba(255,255,255,.92)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;color:var(--ink)!important}
html.v3-lite .v3 .sheet,html.v3-lite .v3 .v3-pop,html.v3-lite .v3 .v3-sheetpanel{background:rgba(18,14,14,.9)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}

/* ==========================================================================
   Pages
   ========================================================================== */
/* mini progress on trade rows: five dashes, done ink, the current one amber */
.v3 .v3-mini{display:inline-flex;gap:4px;align-items:center}
.v3 .v3-mini i{width:18px;height:3px;border-radius:2px;background:var(--line)}
.v3 .v3-mini i.d{background:var(--ink)}
.v3 .v3-mini i.n{background:var(--amber)}

/* Trades */
.v3 .v3-trades-stage{min-height:500px;display:flex;flex-direction:column}
.v3 .v3-trades-top{flex:1;width:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,560px);gap:48px;align-items:center;padding-top:40px;padding-bottom:40px}
.v3 .v3-trades-hello .lead{color:rgba(255,255,255,.88)}
.v3 .v3-trades-hello .h1{margin-top:6px}
.v3 .v3-figs{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.v3 .v3-needs{padding:24px}
.v3 .v3-needs .eyebrow{margin-bottom:8px}
.v3 .v3-need{display:flex;align-items:center;gap:14px;padding:12px 0}
.v3 .v3-need.row-d{border-top:1px solid rgba(255,255,255,.12)}
.v3 .v3-need-main{display:flex;align-items:center;gap:14px;flex:1;min-width:0}
.v3 .v3-need-main .grow{display:flex;flex-direction:column;min-width:0}
.v3 .v3-need-main b{font-size:16px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v3 .v3-need-main .muted{font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v3 .v3-need .chip.w{height:40px;padding:0 16px;font-weight:600;flex:none}
.v3 .v3-empty-sheet{padding:28px}
.v3 .v3-listhead{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}
.v3 .v3-search{position:relative}
.v3 .v3-search summary{list-style:none;cursor:pointer;background:#fff;box-shadow:inset 0 0 0 1px var(--line-2);width:40px;height:40px}
.v3 .v3-search summary::-webkit-details-marker{display:none}
.v3 .v3-search form{position:absolute;right:48px;top:-6px;width:280px}
.v3 .v3-trow .v3-stcol{width:200px;display:flex;justify-content:flex-end}
.v3 .v3-trow .v3-mini{margin-right:8px}
.v3 .v3-trow .amt{width:120px}
.v3 .v3-chev{color:var(--sub);display:inline-flex}
.v3 .v3-listfoot{display:flex;justify-content:space-between;align-items:center;margin-top:14px;padding:0 4px}
@media (max-width:1100px){.v3 .v3-trow .v3-mini{display:none}.v3 .v3-trades-top{grid-template-columns:minmax(0,1fr) minmax(0,480px)}}
@media (max-width:900px){.v3 .v3-trades-top{grid-template-columns:minmax(0,1fr);gap:24px}}
@media (max-width:760px){
  .v3 .v3-trades-stage{min-height:0}
  .v3 .v3-trades-top{padding-top:8px;padding-bottom:0;gap:20px}
  .v3 .v3-figs{margin-top:14px}
  .v3 .v3-needs{padding:18px 16px}
  .v3 .v3-need{padding:10px 0;gap:10px}
  .v3 .v3-need .chip.w{height:36px;padding:0 14px}
  .v3 .v3-listhead .v3-search{display:none}
  .v3 .v3-trow .amt{width:auto}
  .v3 .v3-list{padding:4px 16px}
}

/* a short field header: H1 + lead left, the switcher right */
.v3 .v3-short{padding-bottom:40px}
.v3 .v3-headrow{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;padding-top:60px}
.v3 .v3-headrow-r{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end}
.v3 .v3-narrow{max-width:860px}
.v3 .v3-group{margin:28px 4px 10px}
.v3 .v3-group:first-child{margin-top:0}
.v3 .v3-aline{display:block;font-size:15px;line-height:1.4}
.v3 .v3-aitem{color:var(--sub)}
.v3 .v3-unread{width:8px;height:8px;border-radius:50%;background:var(--ink);flex:none;margin-right:8px}
@media (max-width:760px){
  .v3 .v3-headrow{flex-direction:column;align-items:stretch;padding-top:24px;gap:16px}
  .v3 .v3-headrow-r{justify-content:flex-start}
  .v3 .v3-headrow-r .seg{flex:1}
}

/* New trade: choose a side */
.v3 .v3-center{text-align:center;padding-top:48px}
.v3 .v3-center .lead{color:rgba(255,255,255,.88)}
.v3 .v3-nt-pick{max-width:948px;display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:40px}
.v3 .v3-pickcard{display:flex;flex-direction:column;justify-content:space-between;gap:56px;min-height:230px;padding:28px 30px;border-radius:var(--r-card);transition:background-color var(--t-fast)}
.v3 .v3-pickcard:hover{background:rgba(255,255,255,.22)}
.v3 .v3-pickcard .chip{align-self:flex-start}
.v3 .v3-pickcard-b{display:flex;flex-direction:column;gap:8px}
.v3 .v3-pick-t{font-size:30px;line-height:1.1}
.v3 .v3-pick-s{font-size:15px;color:rgba(255,255,255,.88)}
.v3 .v3-codebar{grid-column:1/-1;display:flex;align-items:center;gap:12px;padding:10px 10px 10px 24px;border-radius:999px}
.v3 .v3-codebar label{flex:1;font-size:15px}
.v3 .v3-codebar input{width:240px;height:44px;border-radius:999px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08);color:#fff;padding:0 16px;font:inherit;font-size:16px;letter-spacing:.06em;text-transform:uppercase}
.v3 .v3-codebar input::placeholder{color:rgba(255,255,255,.55)}
.v3 .v3-steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.v3 .v3-steps3 li{display:flex;flex-direction:column;gap:6px}
.v3 .v3-steps3 b{font-size:16px;font-weight:600;margin-top:10px}
.v3 .v3-stepn{font-size:30px;line-height:1}
@media (max-width:760px){
  .v3 .v3-center{padding-top:20px;text-align:left}
  .v3 .v3-nt-pick{grid-template-columns:1fr;margin-top:24px}
  .v3 .v3-pickcard{min-height:0;gap:28px;padding:22px}
  .v3 .v3-pick-t{font-size:24px}
  .v3 .v3-codebar{flex-wrap:wrap;border-radius:var(--r-card);padding:16px}
  .v3 .v3-codebar label{flex-basis:100%}
  .v3 .v3-codebar input{flex:1;width:auto;min-width:0}
  .v3 .v3-steps3{grid-template-columns:1fr}
}

/* radio-style switchers (role=radio) */
.v3 .seg.on-paper [aria-checked="true"]{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(14,20,23,.08)}
.v3 .seg.on-field [aria-checked="true"]{background:#fff;color:var(--ink)}
.v3 .seg button[disabled]{opacity:.45;cursor:default}
.v3 .seg[hidden]{display:none}

/* Selling / buying form */
.v3 .v3-sellhead{padding-top:28px}
.v3 .v3-sellhead .chip.line{height:34px}
.v3 .v3-sellhead-row{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-top:18px}
.v3 .v3-stepper{list-style:none}
.v3 .v3-stepper li{height:36px;padding:0 16px;border-radius:999px;display:inline-flex;align-items:center;font-size:14px;font-weight:500}
.v3 .v3-stepper li[aria-current="step"]{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(14,20,23,.08)}
.v3 .v3-sellgrid{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:24px;margin-top:28px;align-items:start}
.v3 .v3-sellform{padding:32px}
.v3 .v3-fl{margin-bottom:22px}
.v3 .v3-fl[hidden],.v3 [data-nt-more][hidden],.v3 .v3-dpanel[hidden],.v3 [data-nt-tiles][hidden],.v3 [data-nt-welcome][hidden]{display:none}
.v3 .v3-sellform .err{margin-top:6px}
.v3 .v3-sellform .err[hidden]{display:none}
.v3 .v3-payer{margin-top:0}
.v3 .v3-payer button{height:40px;font-size:14px}
.v3 .v3-adds{display:flex;flex-wrap:wrap;gap:18px;margin:-4px 0 22px}
.v3 .v3-deliv{display:flex;flex-wrap:wrap;gap:10px}
.v3 .v3-dpanel{margin-top:14px}
.v3 .v3-drop{display:flex;flex-direction:column;gap:4px;align-items:flex-start;padding:18px;border-radius:var(--r-inner);border:1.5px dashed var(--line-2);background:var(--paper-3);cursor:pointer}
.v3 .v3-drop.over{border-color:var(--ink);background:#fff}
.v3 .v3-photogrid,.v3 .photogrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px;margin-top:10px}
.v3 .phototile{position:relative;aspect-ratio:1;border-radius:12px;overflow:hidden;background:var(--paper-3)}
.v3 .phototile img{width:100%;height:100%;object-fit:cover;display:block}
.v3 .phototile.is-uploading{opacity:.6}
.v3 .phototile.bad{box-shadow:inset 0 0 0 2px var(--coral)}
.v3 .phototile-x{position:absolute;top:4px;right:4px;width:28px;height:28px;border-radius:50%;background:rgba(14,20,23,.6)!important;color:#fff!important;font-size:16px;line-height:1}
.v3 .phototile-warn{position:absolute;left:4px;right:4px;bottom:4px;font-size:11px;font-style:normal;color:#fff;background:rgba(194,65,42,.9);border-radius:6px;padding:2px 4px}
.v3 .phototile-spin{position:absolute;inset:0;margin:auto;width:22px;height:22px;border-radius:50%;border:2px solid rgba(14,20,23,.2);border-top-color:var(--ink);animation:v3spin .8s linear infinite}
@keyframes v3spin{to{transform:rotate(360deg)}}
.v3 .filelist{margin-top:10px;font-size:14px}
.v3 .filelist li{padding:6px 0;border-top:1px solid var(--line)}
.v3 .filelist li.bad{color:var(--coral)}
.v3 .v3-check{display:flex;gap:10px;align-items:flex-start;margin-top:14px;font-size:14px}
.v3 .v3-check input{width:20px;height:20px;margin-top:1px;accent-color:var(--ink)}
.v3 .v3-sellfoot{display:flex;justify-content:space-between;align-items:center;gap:20px;border-top:1px solid var(--line);padding-top:24px;margin-top:10px}
.v3 .v3-banner{background:var(--amber-soft);color:var(--amber-ink);border-radius:var(--r-inner);padding:12px 16px;font-size:14.5px;margin-bottom:20px}
.v3 .v3-forseller{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--ink-2);margin-bottom:18px}
.v3 .v3-sellside{position:sticky;top:92px}
.v3 .v3-sellside .eyebrow{margin-bottom:10px}
.v3 .v3-sellside>.small{margin-top:14px}
.v3 .v3-prev{min-height:420px;padding:22px;display:flex;flex-direction:column;justify-content:space-between;gap:24px}
.v3 .v3-prev-who{display:flex;align-items:center;gap:10px}
.v3 .v3-prev-who .av{width:40px;height:40px;font-size:14px}
.v3 .v3-prev-who b{display:block;font-size:16px;font-weight:600}
.v3 .v3-prev-who span span{font-size:13px;color:rgba(255,255,255,.82)}
.v3 .v3-prev-sheet{padding:22px 20px 20px}
.v3 .v3-prev-item{font-size:26px;line-height:1.15;overflow-wrap:anywhere}
.v3 .v3-prev-total{font-size:40px;margin-top:10px;line-height:1}
.v3 .v3-prev-pay{margin-top:18px;pointer-events:none}
.v3 .v3-prev .pv-ph{opacity:.7}
.v3 .v3-ntrules{margin-top:14px;display:grid;gap:8px}
.v3 .v3-ntrules li{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--ink-2)}
.v3 .v3-ntrules svg{flex:none;margin-top:1px;color:var(--sub)}
.v3 .v3-sellhead-m{margin:10px 10px 0;padding:72px 16px 16px}
.v3 .v3-sellhead-top{display:flex;justify-content:space-between;margin-bottom:14px}
.v3 .v3-sellhead-m .h1{margin-bottom:14px}
.v3 .v3-sellsum{display:flex;align-items:center;gap:10px;padding:12px 12px 12px 14px;border-radius:18px}
.v3 .v3-sellsum .grow{flex:1;min-width:0;display:flex;flex-direction:column}
.v3 .v3-sellsum b{font-size:15px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v3 .v3-sellsum .chip.w{height:36px;font-weight:600}
.v3 .v3-sheetpanel .v3-prev{min-height:380px}
@media (max-width:1100px){.v3 .v3-sellgrid{grid-template-columns:minmax(0,1fr) 360px}}
@media (max-width:900px){.v3 .v3-sellgrid{grid-template-columns:minmax(0,1fr)}.v3 .v3-sellside{position:static}}
@media (max-width:760px){
  body.v3.v3-sellpage .v3-paper-top{display:none}
  .v3 .v3-sellgrid{margin-top:10px}
  .v3 .v3-sellform{padding:20px}
  .v3 .v3-payer button{font-size:14px;padding:0 8px}
}
@media (max-width:760px){
  body.v3.v3-sellpage .v3-mtop{display:none}
  .v3 .v3-sellhead-m{padding-top:16px}
}

/* ===== The room ===== */
.v3 .v3-room-stage{padding-bottom:34px}
.v3 .v3-room-top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-top:22px}
.v3 .v3-room-chips{display:flex;gap:8px;min-width:0}
.v3 .v3-room-chips .chip{max-width:100%;overflow:hidden;text-overflow:ellipsis}
.v3 .v3-room-people{display:grid;grid-template-columns:240px minmax(0,1fr) 240px;gap:40px;align-items:center;margin-top:44px}
.v3 .v3-seat{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;min-width:0}
.v3 .v3-seat-av.lg{width:112px;height:112px;font-size:36px}
.v3 .v3-seat-name{font-size:26px;margin-top:6px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v3 .v3-seat-role{font-size:14px;color:rgba(255,255,255,.86)}
.v3 .v3-seat .chip.sm{height:30px;font-size:13px}
.v3 .v3-turnchip{font-weight:500}
.v3 .v3-room-mid{display:flex;flex-direction:column;gap:30px;min-width:0}
.v3 .v3-between{padding:26px 30px;text-align:center}
.v3 .v3-between-item{font-size:44px;line-height:1.08;margin-top:8px;overflow-wrap:anywhere;text-wrap:balance}
.v3 .v3-between-money{display:flex;justify-content:center;align-items:baseline;flex-wrap:wrap;gap:4px 12px;margin-top:8px}
.v3 .v3-between-money .o{font-size:30px}
.v3 .v3-between-money .muted{font-size:14px}
.v3 .track.big{margin:0 6px}
.v3 .track.big::before{left:12px;right:12px}
.v3 .track.is-off .node{opacity:.6}
.v3 .v3-move{width:min(900px,100% - 48px);margin:56px auto 0;padding:24px 28px;display:flex;align-items:center;gap:28px}
.v3 .v3-move-b{flex:1;min-width:0}
.v3 .v3-move-t{font-size:26px;line-height:1.15;margin-top:6px;letter-spacing:-.03em}
.v3 .v3-move-p{font-size:14px;line-height:1.45;margin-top:6px}
.v3 .v3-move-big{font-size:36px;letter-spacing:.04em;white-space:nowrap}
.v3 .v3-move-acts{display:flex;flex-direction:column;gap:8px;flex:none;align-items:stretch}
.v3 .v3-move-acts form{display:flex}
.v3 .v3-move-acts form .btn{flex:1}
.v3 .v3-move-acts .btn{min-width:200px}
.v3 .v3-ring{position:relative;width:96px;height:96px;flex:none}
.v3 .v3-ring svg{display:block}
.v3 .v3-ring [data-v3-due-ring]{transition:stroke-dashoffset 300ms var(--ease-out)}
.v3 .v3-ring-t{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1}
.v3 .v3-ring-t b{font-size:24px;font-weight:400}
.v3 .v3-ring-t span{font-size:11px;color:rgba(255,255,255,.78);margin-top:4px}
.v3 .v3-ring.sm{width:48px;height:48px}
.v3 .v3-ring.sm .v3-ring-t b{font-size:12.5px;font-family:var(--text);font-weight:600}
.v3 .actbar .v3-ring [data-v3-due-ring]{stroke:var(--ink)}
.v3 .actbar .v3-ring circle:first-child{stroke:rgba(14,20,23,.12)}
.v3 .actbar .v3-ring-t b{color:var(--ink)}
.v3 .actbar .v3-bar-ic{width:48px;height:48px;box-shadow:inset 0 0 0 1px var(--line-2);background:#fff}
.v3 .actbar form{display:flex}
.v3 .v3-roomgrid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:16px;align-items:start}
.v3 .v3-roomleft,.v3 .v3-roomright{display:grid;gap:16px;min-width:0}
.v3 .v3-timeline ul{margin-top:4px}
.v3 .v3-ev{display:flex;gap:14px;padding:14px 0;border-top:1px solid var(--line)}
.v3 .v3-ev:first-child{border-top:0}
.v3 .v3-ev[hidden]{display:none}
.v3 .v3-ev-l{font-size:15px;line-height:1.4}
.v3 .v3-ev-next{border-top-style:dashed}
.v3 .v3-ev-next .v3-ev-l{color:var(--sub)}
.v3 .v3-ev-next .cap{color:#8A97A0}
.v3 .v3-ev .av.xs.empty{background:#fff;box-shadow:inset 0 0 0 1.5px var(--line-2);color:var(--sub)}
.v3 .v3-small{padding:24px}
.v3 .v3-small .h3{margin-bottom:8px}
.v3 .v3-help{padding:8px 24px}
.v3 .v3-hrow{display:flex;align-items:center;gap:14px;width:100%;min-height:54px;font-size:16px;border-top:1px solid var(--line)}
.v3 .v3-hrow:first-child{border-top:0}
.v3 .v3-hrow.coral{color:var(--coral)}
.v3 .v3-hrow .link.coral{text-decoration:none;font-size:16px;font-weight:400}
.v3 .v3-amber{background:var(--card)}
.v3 .v3-dside{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:6px}
.v3 .v3-ph{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 10px}
.v3 .v3-ph img{width:72px;height:72px;object-fit:cover;border-radius:10px;display:block}
.v3 .v3-sform{display:flex;flex-direction:column;gap:8px;padding:0 4px 4px}
.v3 .v3-sform .lbl{color:#fff;margin-top:8px;margin-bottom:0}
.v3 .v3-sform .field-in{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.18)}
.v3 .v3-sform .field-in:focus{background:rgba(255,255,255,.14);border-color:#fff;box-shadow:none}
.v3 .v3-sform select.field-in option{color:var(--ink)}
.v3 .v3-sform .btn{margin-top:12px}
.v3 .v3-sform input[type=file]{color:rgba(255,255,255,.85);font-size:14px}
.v3 .v3-sp{color:rgba(255,255,255,.75);font-size:14px;padding:0 4px 8px}
.v3 .v3-more-row{display:flex;flex-direction:column;gap:8px;padding:4px}
.v3 .v3-more-row .btn{width:100%}
.v3 .v3-legacy .v3-domain{margin-top:12px}
@media (max-width:1100px){.v3 .v3-room-people{grid-template-columns:180px minmax(0,1fr) 180px;gap:24px}.v3 .v3-between-item{font-size:36px}}
@media (max-width:900px){
  .v3 .v3-roomgrid{grid-template-columns:minmax(0,1fr)}
  .v3 .v3-move{flex-wrap:wrap}
  .v3 .v3-move-acts{flex-direction:row;flex-wrap:wrap;width:100%}
}
@media (max-width:760px){
  .v3 .v3-room-stage{padding-bottom:20px}
  body.v3.v3-roompage .v3-mtop{display:none}
  .v3 .v3-room-stage.stage{padding-top:14px}
  .v3 .v3-room-top{padding-top:0}
  .v3 .v3-room-people{grid-template-columns:1fr 1fr;gap:14px 10px;margin-top:22px}
  .v3 .v3-seat-them{grid-column:2;grid-row:1}
  .v3 .v3-room-mid{grid-column:1/-1;gap:22px}
  .v3 .v3-seat{gap:6px}
  .v3 .v3-seat-av.lg{width:76px;height:76px;font-size:26px}
  .v3 .v3-seat-name{font-size:19px;margin-top:2px}
  .v3 .v3-seat-role{font-size:12.5px}
  .v3 .v3-seat .chip.sm{height:26px;font-size:12px;padding:0 10px}
  .v3 .v3-between{padding:18px 16px}
  .v3 .v3-between-item{font-size:28px}
  .v3 .v3-between-money{flex-direction:column;align-items:center;gap:2px}
  .v3 .v3-between-money .o{font-size:24px}
  .v3 .v3-between-money .muted{font-size:13px}
  .v3 .node{font-size:12px}
  body.v3.has-actbar .v3-move{display:none}
  .v3 .v3-move{width:auto;margin:22px 16px 0;padding:18px;gap:16px}
  .v3 .v3-move-t{font-size:22px}
  .v3 .v3-move-big{font-size:26px}
  .v3 .v3-move-acts .btn{min-width:0;flex:1}
  .v3 .v3-ring{width:72px;height:72px}
  .v3 .v3-ring svg{width:72px;height:72px}
  .v3 .actbar{padding:8px 8px 8px 12px;gap:8px}
  .v3 .actbar .btn.ink{padding:0 18px}
}

/* Rewards */
.v3 .v3-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:48px;align-items:center;margin-top:44px;padding-bottom:16px}
.v3 .v3-codesheet{padding:28px}
.v3 .v3-codeline{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:10px}
.v3 .v3-bigcode{font-size:48px;letter-spacing:.06em;line-height:1}
.v3 .v3-linkline{margin-top:10px;font-size:14px;color:rgba(255,255,255,.78);text-align:left}
.v3 .v3-share{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.v3 .v3-3col{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.v3 .v3-2col{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:16px;align-items:start}
.v3 .v3-figs3{display:flex;gap:28px;margin-top:14px}
.v3 .v3-figs3 div{display:flex;flex-direction:column}
.v3 .v3-figs3 b{font-size:32px;line-height:1.1}
.v3 .v3-bar{height:6px;border-radius:999px;background:var(--line);overflow:hidden;margin-top:18px}
.v3 .v3-bar i{display:block;height:100%;background:var(--ink);border-radius:inherit}
.v3 .v3-bullets{margin-top:10px;display:grid;gap:6px}
.v3 .v3-bullets li{position:relative;padding-left:16px;font-size:14.5px;color:var(--ink-2);line-height:1.45}
.v3 .v3-bullets li::before{content:"";position:absolute;left:2px;top:.6em;width:5px;height:5px;border-radius:50%;background:var(--ink-2)}
.v3 .v3-ladder{margin-top:36px;padding:28px 34px 24px}
.v3 .v3-ladder .track::before{top:21px;left:22px;right:22px}
.v3 .v3-ladder .track .fill{top:21px;left:22px;width:calc((100% - 44px) * var(--p,0))}
.v3 .v3-rung{width:44px}
.v3 .v3-rung i{width:44px;height:44px}
.v3 .v3-rung-l{font-family:var(--display);font-size:15px}
.v3 .node.done .v3-rung-l{color:var(--ink)}
.v3 .v3-rung-t{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center}
.v3 .v3-rung-t b{font-size:15px;font-weight:600;color:#fff}
.v3 .v3-rung-t span{font-size:13px;color:rgba(255,255,255,.78)}
.v3 .node:not(.now) .v3-rung-t b{font-weight:500}
.v3 .v3-medals{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-top:8px}
.v3 .v3-medals li{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px}
.v3 .v3-medal-ic{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--paper-3);color:var(--sub);margin-bottom:6px}
.v3 .v3-medals li.is-got .v3-medal-ic{background:var(--ink);color:#fff}
.v3 .v3-medals b{font-size:14.5px;font-weight:600}
@media (max-width:1100px){.v3 .v3-medals{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:900px){.v3 .v3-split,.v3 .v3-2col{grid-template-columns:minmax(0,1fr);gap:24px}.v3 .v3-3col{grid-template-columns:minmax(0,1fr)}}
@media (max-width:760px){
  .v3 .v3-split{margin-top:24px}
  .v3 .v3-codesheet{padding:20px}
  .v3 .v3-bigcode{font-size:34px}
  .v3 .v3-ladder{padding:20px 12px;overflow-x:auto}
  .v3 .v3-ladder .track{min-width:560px;margin:0 52px}
  .v3 .v3-medals{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Money */
.v3 .v3-money3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:32px;padding:0}
.v3 .v3-money3>div{padding:30px 30px 28px;border-left:1px solid rgba(255,255,255,.12);min-width:0}
.v3 .v3-money3>div:first-child{border-left:0}
.v3 .v3-mfig{font-size:48px;line-height:1;margin-top:14px}
.v3 .v3-mcap{font-size:14px;margin-top:10px}
.v3 .v3-moneygrid{display:grid;grid-template-columns:420px minmax(0,1fr);gap:16px;align-items:start}
.v3 .v3-psteps{display:flex;align-items:center;gap:14px;margin:6px 0 18px}
.v3 .v3-psteps li{display:flex;align-items:center;gap:12px;font-size:16px;font-weight:500;flex:none}
.v3 .v3-psteps li+li::before{content:"";width:120px;height:1px;background:var(--line);margin-right:2px}
.v3 .v3-psteps i{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-style:normal;font-size:12px;background:var(--paper-3);color:var(--ink-2)}
.v3 .v3-psteps li.done i{background:var(--teal-soft);color:var(--teal)}
.v3 .v3-psteps li.now i{background:var(--ink);color:#fff}
.v3 .v3-btnrow{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:18px}
.v3 .v3-formfoot{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:22px}
.v3 .v3-chiprow{display:flex;gap:8px;margin-bottom:14px}
.v3 .chip.is-on{box-shadow:inset 0 0 0 1px var(--ink)}
@media (max-width:900px){.v3 .v3-moneygrid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:760px){
  .v3 .v3-money3{grid-template-columns:minmax(0,1fr);margin-top:20px}
  .v3 .v3-money3>div{padding:18px 20px;border-left:0;border-top:1px solid rgba(255,255,255,.12)}
  .v3 .v3-money3>div:first-child{border-top:0}
  .v3 .v3-mfig{font-size:34px;margin-top:8px}
  .v3 .v3-psteps{flex-direction:column;align-items:flex-start}
  .v3 .v3-psteps li+li::before{display:none}
  .v3 .row .st{display:none}
}

/* Account */
.v3 .v3-me{display:flex;align-items:center;gap:28px;margin-top:44px}
.v3 .v3-me-av{width:128px;height:128px;font-size:42px;flex:none}
.v3 .v3-me-b{min-width:0}
.v3 .v3-me-sub{margin-top:6px}
.v3 .v3-me-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.v3 .v3-othersee{display:flex;align-items:center;gap:14px;margin-top:14px;padding:16px;border-radius:var(--r-inner);background:var(--paper-3)}
.v3 .v3-othersee .av.s{background:#fff}
.v3 .v3-othersee b{font-size:16px;font-weight:600}
.v3 .v3-togline{display:flex;align-items:center;gap:12px;font-size:16px;cursor:pointer}
.v3 .v3-setrow{min-height:84px;padding:14px 4px}
.v3 .v3-setrow b{font-size:16px;font-weight:600}
.v3 .v3-setrow form{margin:0}
.v3 .v3-toglink{display:inline-flex;padding:9px 0}
.v3 .toggle-look{width:44px;height:26px;border-radius:999px;background:var(--line-2);position:relative;display:inline-block}
.v3 .toggle-look::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.v3 .toggle-look.on{background:var(--ink)}
.v3 .toggle-look.on::after{transform:translateX(18px)}
.v3 .v3-lrow{min-height:56px;font-size:16px;font-weight:500;color:var(--ink)}
.v3 .v3-lrow svg{color:var(--sub)}
.v3 nav.card form{margin:0}
@media (max-width:760px){
  .v3 .v3-me{gap:16px;margin-top:16px}
  .v3 .v3-me-av{width:64px;height:64px;font-size:22px}
  .v3 .v3-me .h1.xl{font-size:30px}
  .v3 .v3-me-chips{margin-top:12px}
  .v3 .v3-me-chips .chip{height:30px;font-size:13px}
}

/* Help */
.v3 .v3-helpsearch{display:flex;align-items:center;gap:12px;max-width:640px;height:60px;margin:30px auto 0;padding:0 24px;border-radius:999px;
  background:var(--glass-clear);-webkit-backdrop-filter:blur(20px) saturate(1.7);backdrop-filter:blur(20px) saturate(1.7);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 0 0 1px rgba(255,255,255,.2);color:#fff}
.v3 .v3-helpsearch input{flex:1;min-width:0;border:0;background:transparent;color:#fff;font:inherit;font-size:16px;outline:none}
.v3 .v3-helpsearch input::placeholder{color:rgba(255,255,255,.8)}
.v3 .v3-helpsearch:focus-within{box-shadow:inset 0 0 0 2px #fff}
.v3 .v3-topics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:40px}
.v3 .v3-topic{display:flex;flex-direction:column;gap:4px;min-height:140px;justify-content:flex-end;padding:22px;border-radius:var(--r-card);position:relative;transition:background-color var(--t-fast)}
.v3 .v3-topic:hover{background:rgba(255,255,255,.24)}
.v3 .v3-topic svg{position:absolute;top:22px;left:22px}
.v3 .v3-topic .o{font-size:22px;line-height:1.15;letter-spacing:-.02em}
.v3 .v3-topic-s{font-size:13px;color:rgba(255,255,255,.85)}
.v3 .v3-topic[hidden],.v3 details[hidden]{display:none}
@media (max-width:900px){.v3 .v3-topics{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.v3 .v3-helpsearch{height:52px;padding:0 18px;margin-top:20px}.v3 .v3-topic{min-height:112px;padding:16px}.v3 .v3-topic svg{top:16px;left:16px}.v3 .v3-topic .o{font-size:18px}}

/* ---------- Join a room /join (public) ---------- */
.v3 .v3-join-top{justify-content:center}
.v3 .v3-join-top .chip{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v3 .v3-join-move .v3-move-acts{min-width:240px}
.v3 .v3-join-cap{flex-basis:100%;color:rgba(255,255,255,.78);font-size:12.5px;text-align:right;margin-top:-14px}
.v3 .v3-join-foot{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:22px;font-size:13px;color:rgba(255,255,255,.86);text-align:center}
.v3 .v3-join-foot svg{flex:none}
.v3 .v3-join-move{flex-wrap:wrap}
.v3 .v3-join-photos{display:flex;gap:10px;overflow-x:auto;margin-top:12px}
.v3 .v3-join-photos img{height:140px;width:auto;border-radius:14px;flex:none}
@media (max-width:760px){
  body.v3.v3-joinpage .v3-mtop{display:flex}
  body.v3.v3-joinpage .v3-join-stage.stage{padding-top:76px}
  .v3 .v3-joinpage .v3-seat-them,body.v3-joinpage .v3-seat-them{grid-column:1;grid-row:1}
  body.v3-joinpage .v3-seat-me{grid-column:2;grid-row:1}
  body.v3.has-actbar .v3-join-move{display:flex}
  body.v3.has-actbar .v3-join-move .v3-move-acts > form:first-child{display:none}
  .v3 .v3-join-move .v3-move-acts{min-width:0}
  .v3 .v3-join-cap{text-align:left;margin-top:-6px}
  .v3 .v3-join-foot{margin:16px 16px 0;font-size:12.5px}
}

/* ---------- Trade rules /app/trade-rules ---------- */
.v3 .v3-pagehead{max-width:960px;padding-top:60px;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.v3 .v3-pagehead .lead{max-width:620px}
.v3 .v3-pagehead .seg{margin-top:10px}
.v3 .v3-rules{max-width:960px;display:grid;gap:16px}
.v3 .v3-panel{display:grid;gap:16px;scroll-margin-top:96px}
.v3 .v3-panel[hidden]{display:none}
.v3 .v3-rules .card{display:grid;gap:14px;scroll-margin-top:96px}
.v3 .v3-rules .h3{margin-top:8px}
.v3 .v3-rp{color:var(--ink-2);max-width:68ch}
.v3 .v3-promises{list-style:none;counter-reset:v3p;display:grid;gap:12px;margin:0;padding:0}
.v3 .v3-promises li{counter-increment:v3p;position:relative;padding-left:44px;font-size:15px;line-height:1.5;min-height:30px}
.v3 .v3-promises li::before{content:counter(v3p);position:absolute;left:0;top:-2px;width:30px;height:30px;border-radius:50%;background:var(--paper-3);color:var(--ink);font-size:13px;font-weight:600;display:flex;align-items:center;justify-content:center;font-variant-numeric:tabular-nums}
.v3 .v3-rl{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.v3 .v3-rl li{position:relative;padding-left:20px;font-size:15px;line-height:1.5;color:var(--ink-2)}
.v3 .v3-rl li::before{content:"";position:absolute;left:4px;top:.66em;width:6px;height:6px;border-radius:50%;background:var(--ink);opacity:.45}
.v3 .v3-rl li b{color:var(--ink);font-weight:600}
.v3 .v3-rcols{display:grid;grid-template-columns:1fr 1fr;gap:16px 32px;align-items:start}
.v3 .v3-rcols-list{grid-template-columns:1fr 1fr;column-gap:32px}
.v3 .v3-tip{background:var(--paper-3);border-radius:14px;padding:16px 18px;font-size:14.5px;line-height:1.5;color:var(--ink-2)}
.v3 .v3-tip b{display:block;color:var(--ink);font-weight:600;margin-bottom:4px}
.v3 .v3-tablewrap{overflow-x:auto;min-width:0}
.v3 .v3-table{width:100%;border-collapse:collapse;font-size:15px}
.v3 .v3-table th{text-align:left;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--sub);padding:0 12px 10px 0;border-bottom:1px solid var(--line)}
.v3 .v3-table td{padding:13px 12px 13px 0;border-bottom:1px solid var(--line);vertical-align:top;line-height:1.45}
.v3 .v3-table tr:last-child td{border-bottom:0}
.v3 .v3-table .r{text-align:right;padding-right:0}
.v3 .v3-table .nw{white-space:nowrap}
.v3 .v3-table .num{font-variant-numeric:tabular-nums}
.v3 .v3-table-3 td:nth-child(3){font-size:14px}
.v3 .v3-rules-help{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:24px}
.v3 .v3-rules-upd{padding:0 4px}
@media (max-width:760px){
  .v3 .v3-pagehead{padding-top:24px;align-items:stretch}
  .v3 .v3-pagehead .seg{display:flex;width:100%}
  .v3 .v3-pagehead .seg a{flex:1;justify-content:center;padding:0 10px}
  .v3 .v3-rcols,.v3 .v3-rcols-list{grid-template-columns:1fr}
  .v3 .v3-rules .card{padding:22px 18px}
  .v3 .v3-rules-help{grid-template-columns:1fr}
  .v3 .v3-table-3 thead{display:none}
  .v3 .v3-table-3 tr{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:12px 0;border-bottom:1px solid var(--line)}
  .v3 .v3-table-3 tr:last-child{border-bottom:0}
  .v3 .v3-table-3 td{border:0;padding:0}
  .v3 .v3-table-3 td:nth-child(3){grid-column:1/-1}
}

/* ---------- Partners /app/partners (public) ---------- */
.v3 .v3-pp-stage{padding-bottom:56px}
.v3 .v3-pp-hero{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:48px;align-items:center;padding-top:72px}
.v3 .v3-pp-copy{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.v3 .v3-pp-copy .h1{text-wrap:balance;max-width:640px}
.v3 .v3-pp-copy .lead{color:rgba(255,255,255,.88);max-width:540px}
.v3 .v3-pp-acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.v3 .v3-pp-month{padding:26px 28px}
.v3 .v3-pp-big{font-size:56px;line-height:1;margin-top:10px;letter-spacing:-.03em}
.v3 .v3-pp-sub{font-size:14px;color:rgba(255,255,255,.78);margin-top:8px}
.v3 .v3-pp-rates{margin-top:16px}
.v3 .v3-pp-rates .kv b{color:#fff;font-weight:500}
.v3 .v3-pp-note{font-size:12.5px;color:rgba(255,255,255,.66);margin-top:6px}
.v3 .v3-pp-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.v3 .v3-pp-steps .card{display:flex;flex-direction:column;gap:8px}
.v3 .v3-pp-n{width:32px;height:32px;border-radius:50%;background:var(--paper-3);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:14px;margin-bottom:10px}
.v3 .v3-pp-fine{margin-top:16px}
.v3 .v3-pp-fine .h2{margin-bottom:8px}
.v3 .v3-pp-fine .ans p+p{margin-top:8px}
.v3 .v3-pp-admins,.v3 .v3-pp-close{margin-top:16px}
.v3 .v3-pp-admins{display:grid;gap:10px}
.v3 .v3-pp-langs{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.v3 .v3-pp-close{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.v3 .v3-pp-close .small{margin-top:6px}
.v3 a.u{text-decoration:underline;text-underline-offset:2px;color:var(--ink)}
@media (max-width:1000px){.v3 .v3-pp-hero{grid-template-columns:minmax(0,1fr);gap:28px;padding-top:40px}.v3 .v3-pp-month{max-width:520px}}
@media (max-width:760px){
  .v3 .v3-pp-stage{padding-bottom:20px}
  .v3 .v3-pp-hero{padding-top:20px;gap:22px}
  .v3 .v3-pp-month{padding:20px 18px}
  .v3 .v3-pp-big{font-size:44px}
  .v3 .v3-pp-steps{grid-template-columns:1fr;gap:10px}
  .v3 .v3-pp-acts{width:100%}
  .v3 .v3-pp-acts .btn{flex:1}
}
/* the action bar: its title stays on one line however long the button or language */
.v3 .actbar .grow .eye,.v3 .actbar .grow .t1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v3 .v3-morebtn svg{display:none}
@media (max-width:440px){.v3 .v3-morebtn{width:44px;padding:0;justify-content:center}.v3 .v3-morebtn-l{display:none}.v3 .v3-morebtn svg{display:block}}

/* ---------- tabs that switch in the page (v3_tabs / v3_pnl, v3.js) ---------- */
.v3 [data-v3-panel][hidden]{display:none!important}
.v3 .field>.v3-fieldset{display:contents}
.v3 .field>.v3-fieldset>picture.bg{position:absolute;inset:0;z-index:-3;display:block}
.v3 .field>.v3-fieldset>picture.bg img{display:block;width:100%;height:100%;object-fit:cover}
.v3 .field>.v3-fieldset>.grain{position:absolute;inset:0;z-index:-2;pointer-events:none;background:var(--grain-src,url(/assets/grain/grain-256.png)) repeat;
  background-size:var(--grain-size,128px) var(--grain-size,128px);mix-blend-mode:soft-light;opacity:1}
.v3 .field>.v3-fieldset>.scrim-b{position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(14,20,23,0) 45%,rgba(14,20,23,.34) 100%)}
/* filter chips: the current one is white (aria-current, so the switcher can move it) */
.v3 .v3-chiprow .chip[aria-current="page"]{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}

/* ---------- glass on fields: each pane on its own layer, so scrolling and hovering move it
   instead of re-blurring the field under it every frame (the stale strips and lag on
   Safari). Same look; no transitions on blurred panes. ---------- */
.v3 .glass,.v3 .sheet,.v3 .seg.on-field,.v3 .btn.glassy,.v3 .chip.g,.v3 .av.g{-webkit-transform:translateZ(0);transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}
.v3 .field{-webkit-transform:translateZ(0);transform:translateZ(0)}
.v3 .v3-topic{transition:none}
.v3 .btn.glassy:active{transform:translateZ(0) scale(.98)}

/* ---------- pages without a field (the sell/buy form): stationary at the top like a field page,
   ink on paper, no pill; the pill comes once you scroll (v3.js: is-rest) ---------- */
.v3 .v3-hdr.is-rest{transform:translateY(var(--hdr-rest))}
.v3 .v3-hdr.is-rest .nav::before,.v3 .v3-hdr.is-rest .v3-mtop::before{opacity:0;transition-duration:160ms;transition-timing-function:var(--ease-in)}

/* assets/pay3.css */
/* Buyer payment page v3 (payment_card_v3). Markup: pay_view_render() in app/pay-view.php
   (class .pv--v3). Loaded only when the switch is on. Selectors start with .pv.pv--v3 so
   they win over wom.css, which loads later.
   B1: one rounded field card with the home hero card's real values (10 px from the screen
   edges, 24 px radius), the site header inside its top, one logo. */
body:has(.pv--v3){overflow-x:clip}
body:has(.pv--v3) main{margin-top:0}
body:has(.pv--v3) .bf-nav-shell:not(.bf-nav-scrolled):not(.bf-drawer-open){padding:10px 0 0}
.pv.pv--v3 .pv-hero{margin:-68px calc(50% - 50vw + 10px) 0;border-radius:24px;clip-path:inset(0 round 24px)}
.pv.pv--v3 .pv-hero-in{max-width:1296px;margin:0 auto;padding:116px 48px 48px;box-sizing:border-box}
@media (max-width:860px){.pv.pv--v3 .pv-hero{margin-top:-60px}}

/* The chip is a small eyebrow above the title; "{Seller} is selling you", then the item alone as the H1. */
.pv.pv--v3 .pv-chip--d{display:inline-flex;border-color:rgba(255,255,255,.7);font:600 13px/1 var(--ff-body)}
.pv.pv--v3 .pv-sellerline{margin:18px 0 0;font-size:20px;line-height:1.35;color:rgba(255,255,255,.85)}
.pv.pv--v3 .pv-h1{margin:6px 0 0;font:400 56px/1.02 var(--ff-display);letter-spacing:-.04em;overflow-wrap:normal;word-break:normal;hyphens:auto}

/* B2: fewer boxes. The seller row has no box; the total is plain text, no tile. */
.pv.pv--v3 .pv-snap{background:none;border:0;-webkit-backdrop-filter:none;backdrop-filter:none;padding:0;margin-top:22px;max-width:none}
.pv.pv--v3 .pv-av{width:40px;height:40px;font-size:16px}
.pv.pv--v3 .pv-snap-t b{font:600 16px/1.3 var(--ff-body);color:#fff}
.pv.pv--v3 .pv-snap-t span{font-size:13px}
.pv.pv--v3 .pv-card{border-radius:24px}
.pv.pv--v3 .pv-item{font-size:26px}
.pv.pv--v3 .pv-amount{margin-top:12px;padding:0;background:none;text-align:left;border-radius:0}
.pv.pv--v3 .pv-amount b{font:400 48px/1 var(--ff-display);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.pv.pv--v3 .pv-amount span{margin-top:6px;font-size:13px}

@media (max-width:1023px){
  .pv.pv--v3 .pv-hero-in{padding:100px 32px 32px}
}
@media (max-width:760px){
  .pv.pv--v3 .pv-hero{margin:-60px calc(50% - 50vw + 10px) 0;border-radius:24px;clip-path:inset(0 round 24px)}
  .pv.pv--v3 .pv-hero-in{padding:84px 0 10px}
  .pv.pv--v3 .pv-left{padding:0 20px}
  .pv.pv--v3 .pv-sellerline{margin-top:14px;font-size:17px}
  .pv.pv--v3 .pv-h1{font-size:40px;margin-top:4px}
  .pv.pv--v3 .pv-lead{font-size:15px}
  .pv.pv--v3 .pv-snap{margin-top:18px}
  .pv.pv--v3 .pv-card{margin:20px 10px 0;padding:20px}
  .pv.pv--v3 .pv-amount b{font-size:48px}
  body.has-pay-dock{padding-bottom:calc(var(--pay-dock-h,72px) + 24px + env(safe-area-inset-bottom))}
}

/* B3: the floating pay dock (phones only). */
.pv-dock{display:none}
@media (max-width:760px){
  .pv-dock{display:flex;align-items:center;gap:12px;position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:60;
    padding:10px 10px 10px 18px;border-radius:24px;background:#fff;border:1px solid rgba(14,20,23,.08);
    box-shadow:0 10px 30px rgba(14,20,23,.12);opacity:0;transform:translateY(16px);
    transition:opacity .18s cubic-bezier(.2,.7,.2,1),transform .18s cubic-bezier(.2,.7,.2,1)}
  @supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
    .pv-dock{background:rgba(255,255,255,.78);-webkit-backdrop-filter:blur(20px) saturate(140%);backdrop-filter:blur(20px) saturate(140%)}
  }
  .pv-dock.is-on{opacity:1;transform:none}
  .pv-dock[hidden]{display:none}
  .pv-dock-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
  .pv-dock-t span{font-size:13px;line-height:1.3;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pv-dock-t b{font:400 22px/1.1 var(--ff-display);letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--ink)}
  .pv-dock-pay{flex:none;display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 26px;border:0;border-radius:999px;
    background:var(--ink);color:#fff;font:600 16px/1 var(--ff-body);cursor:pointer}
  .pv-dock-pay:focus-visible{outline:3px solid rgba(14,20,23,.25);outline-offset:2px}
  .pv-dock-pay.is-busy{opacity:.6;pointer-events:none}
}
@media (prefers-reduced-motion:reduce){.pv-dock{transition:none;transform:none}}

/* assets/footer2.css */
/* Footer v2 (footer_v2): the rounded ink card that closes every page.
   Markup: render_site_footer_v2() in app/navigation.php. Loaded only when the switch is on.
   Same inset and radius as the home hero card (10 px, 24 px). */
.bf-foot2{margin:clamp(48px,7vw,96px) 10px 10px;color:#fff}
.bf-foot2-card{position:relative;isolation:isolate;overflow:hidden;border-radius:24px;clip-path:inset(0 round 24px);
  background:#0E1417;padding:64px 64px 0}
.bf-foot2-card>.bh-grain{z-index:0}
.bf-foot2-in{position:relative;z-index:1;max-width:1200px;margin:0 auto}
.bf-foot2-top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:48px;align-items:start}
.bf-foot2-logo{display:inline-flex;margin:-12px 0 8px -4px}
.bf-foot2-logo img{display:block;width:124px;height:auto}
.bf-foot2-h{margin:0;font-family:var(--ff-display);font-weight:400;font-size:48px;line-height:1.05;letter-spacing:-.04em;color:#fff;text-wrap:balance}
.bf-foot2-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.bf-foot2-pill{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;border-radius:999px;
  font:600 16px/1 var(--ff-body);text-decoration:none;border:1px solid transparent;transition:background .15s,border-color .15s}
.bf-foot2-pill--white{background:#fff;color:#0E1417}
.bf-foot2-pill--white:hover{background:#E8ECEF}
.bf-foot2-pill--outline{color:#fff;border-color:rgba(255,255,255,.32)}
.bf-foot2-pill--outline:hover{border-color:rgba(255,255,255,.64)}
.bf-foot2-pill:focus-visible,.bf-foot2-links a:focus-visible,.bf-foot2-logo:focus-visible{outline:3px solid rgba(255,255,255,.6);outline-offset:2px}
.bf-foot2-links{display:flex;gap:48px}
.bf-foot2-col{display:flex;flex-direction:column;gap:12px;min-width:120px}
.bf-foot2-col h2{margin:0 0 4px;font:600 12px/1.2 var(--ff-body);letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.56)}
.bf-foot2-links a{font-size:15px;line-height:1.4;color:rgba(255,255,255,.8);text-decoration:none}
.bf-foot2-links a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.bf-foot2-rule{height:1px;background:rgba(255,255,255,.12);margin:48px 0 28px}
.bf-foot2-bottom{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;flex-wrap:wrap}
.bf-foot2-safe{display:flex;align-items:flex-start;gap:8px;margin:0;font-size:14px;line-height:1.45;color:rgba(255,255,255,.8)}
.bf-foot2-safe svg{flex:none;margin-top:3px}
.bf-foot2-safe b{color:#fff;font-weight:600}
.bf-foot2-legal{margin:0;max-width:560px;font-size:13px;line-height:1.45;color:rgba(255,255,255,.56);text-align:right}
/* The big wordmark: the logo at the card's inner width, 6% white, its lower quarter
   cut off by the card's edge (the wordmark is 91/458 of its width tall). */
.bf-foot2-mark{display:block;width:100%;height:auto;margin:40px 0 -5%;opacity:.06;pointer-events:none;user-select:none}

/* Tablet: the desktop layout, with the link columns wrapping under the headline. */
@media (max-width:1023px){
  .bf-foot2-card{padding:48px 40px 0}
  .bf-foot2-top{grid-template-columns:1fr;gap:40px}
  .bf-foot2-links{flex-wrap:wrap}
}
/* Phone: designed on its own. */
@media (max-width:760px){
  .bf-foot2{margin-top:48px}
  .bf-foot2-card{padding:32px 24px 0}
  .bf-foot2-logo{margin-bottom:12px}
  .bf-foot2-logo img{width:102px}
  .bf-foot2-h{font-size:34px}
  .bf-foot2-cta{flex-direction:column;gap:10px;margin-top:24px}
  .bf-foot2-pill{min-height:52px;width:100%}
  .bf-foot2-top{gap:36px}
  .bf-foot2-links{display:grid;grid-template-columns:1fr 1fr;gap:28px 16px}
  .bf-foot2-col{gap:0;min-width:0}
  .bf-foot2-col h2{margin-bottom:6px}
  .bf-foot2-links a{display:flex;align-items:center;min-height:44px;font-size:16px}
  .bf-foot2-col--company{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;column-gap:20px}
  .bf-foot2-col--company h2{flex-basis:100%}
  .bf-foot2-rule{margin:32px 0 24px}
  .bf-foot2-bottom{flex-direction:column;gap:16px}
  .bf-foot2-legal{font-size:12px;text-align:left}
  .bf-foot2-mark{margin-top:32px}
}
@media (prefers-reduced-motion:reduce){.bf-foot2-pill{transition:none}}

/* assets/auth2.css */
/* auth_mobile_v2 (mobile-fixes Part D + the 16 px input fix). Loaded on every page only
   when the switch is on (mfix_head()). Desktop auth (>= 1024 px) keeps its layout: the layout
   rules sit inside the 1023 px query; only the password label row, eye and hint apply at every width. Selectors start with "html body" so they win
   over app.css and wom.css (which load in a different order), and !important appears only
   where the rule being replaced uses it. */

/* ---- Every input on every page gets 16 px text, so iPhones never zoom in. ---- */
html body input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),html body select,html body textarea,
html body .dispute-side input[type=file],html body .rfx-link input,html body .quick-sharebox input,html body .bld-domain-input,
html body .nt-more textarea,html body .nt-codeline select,html body .nt-codeline input,html body .dispute-side textarea,
html body .rfx-kit-item textarea,html body .rfx-apply textarea{font-size:16px}
/* Inputs that are meant to be big keep their own size. They repeat the :not() chain above so
   they are more specific than it: without it, the rule above won and the new-trade price was
   16 px next to a 44 px euro sign, and the home calculator 16 px instead of 24 px. */
html body .nt-money input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]){font-size:72px}
@media (max-width:760px){html body .nt-money input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]){font-size:54px}}
html body .price-amount input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]){font-size:24px}

/* Every width (5 Oct hotfix): the password label row, the eye and the rule hint used to be phone-only,
   so on desktop the Password label and the gap above it disappeared. The short label ("Password")
   shows everywhere now, since the hint under the field states the rule. */
.auth-lab-d{display:none}
.auth-pw{display:block;position:relative}
/* Password: the eye inside the input, the rule hint under it. */
html body .auth-pw input{padding-right:52px}
html body .auth-eye{display:grid;place-items:center;position:absolute;right:4px;top:50%;width:44px;height:44px;margin-top:-22px;
  padding:0;border:0;border-radius:12px;background:none;color:var(--sub);cursor:pointer}
html body .auth-eye.is-on{color:var(--ink)}
html body .auth-eye:focus-visible{outline:3px solid rgba(14,20,23,.25);outline-offset:0}
html body .auth-hint{display:flex;align-items:center;gap:6px;margin:8px 0 0;font-size:13px;line-height:1.4;color:var(--sub)}
html body .auth-hint svg{display:none}
html body .auth-hint.is-met{color:var(--teal-ink)}
html body .auth-hint.is-met svg{display:block}
/* Login: "Forgot password?" sits right-aligned on the password label's row. */
html body .auth-labrow{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:20px 0 8px}
html body .auth-labrow label,html body .auth-split-form-in .auth-labrow label{margin:0}
html body .auth-forgot-m{font-size:14px;font-weight:600;color:var(--ink);text-decoration:underline;text-underline-offset:3px}
/* Consent boxes on desktop: the site-wide 44 px input height drew the tick box in the middle of a
   44 px element, below the first line of text. Sized to that line instead; phones have their own rule below. */
html body .auth-consent{align-items:flex-start}
html body .auth-consent input[type=checkbox]{flex:none;width:18px;height:18px;min-height:0;margin:1px 0 0;padding:0}

@media (max-width:1023px){
  /* ---- Layout: the field card on top, the form on paper below. ---- */
  html body.bare{background:var(--paper-2,#FAFBFC)}
  html body.bare main{display:block}
  html body .auth-split{display:flex;flex-direction:column;position:relative;width:auto;min-height:0;margin:0;padding:0;
    border-radius:0;overflow:visible;clip-path:none;-webkit-transform:none;transform:none;background:none;box-shadow:none}
  html body .auth-split>.bh-grain-split{display:none}

  /* The card: 10 px from the edges (plus the top safe area), the home card's 24 px radius. */
  html body .auth-split-visual{order:-1;flex:none;display:flex;align-items:flex-end;justify-content:flex-start;
    margin:calc(10px + env(safe-area-inset-top)) 10px 0;padding:78px 12px 12px;height:auto;min-height:220px;max-height:none;
    border-radius:24px;overflow:hidden;isolation:isolate;clip-path:inset(0 round 24px);
    background:#5b4a43 url('/assets/bonfihero/auth-flat.webp') center/cover no-repeat!important}
  /* Desktop's light scrim: the quote sits on its own tinted glass, as on desktop. */
  html body .auth-split-visual::after{display:block;content:'';position:absolute;inset:0;z-index:1;
    background:linear-gradient(180deg,rgba(20,10,10,.08) 0%,rgba(20,10,10,.22) 100%)}
  html body .auth-split-visual .bh-grain{display:block;z-index:2}
  /* The whole quote and the name in the tinted liquid-glass sheet, exactly as on desktop. */
  html body .auth-quote{position:relative;z-index:3;width:100%;max-width:none;margin:0;padding:22px 22px 20px;border-radius:20px;
    background:rgba(18,14,14,.5);border:1px solid rgba(255,255,255,.16);
    -webkit-backdrop-filter:blur(20px) saturate(1.3);backdrop-filter:blur(20px) saturate(1.3);
    box-shadow:0 30px 60px -24px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.14)}
  html body .auth-quote p{margin:0;font-weight:500;font-size:19px;line-height:1.42;letter-spacing:-.02em;color:#fff;display:block;overflow:visible}
  html body .auth-quote .aq-rest{display:inline}
  html body .auth-quote cite{display:block;margin-top:16px;font-style:normal;font-size:13px;font-weight:600;letter-spacing:.02em;text-transform:none;color:rgba(255,255,255,.72)}

  /* The logo: small, white, top-left on the card, where the home header puts it. */
  html body .auth-split-form,html body .auth-split-form-in{position:static}
  html body .auth-split-form-in a.auth-split-logo,html body .auth-split-logo{position:absolute;z-index:4;top:calc(17px + env(safe-area-inset-top));left:-4px;width:auto;margin:0;color:#fff!important}
  html body .auth-split-logo svg{width:156px;height:auto}

  /* The form on paper. */
  html body .auth-split-form{flex:none;display:block;max-width:none;min-height:0;padding:28px 20px calc(32px + env(safe-area-inset-bottom));background:none}
  html body .auth-split-form-in{max-width:520px;width:auto;margin:0 auto;padding:0;background:none;border-radius:0;box-shadow:none;z-index:auto}
  html body .auth-split-form-in h1{margin:0;font-family:var(--ff-display);font-weight:400;font-size:30px;line-height:1.1;letter-spacing:-.04em;color:var(--ink)}
  html body .auth-split-form-in>.sub,html body .auth-split-form-in .sub{color:var(--sub)}
  html body .auth-split-form-in>p.sub:first-of-type{margin:8px 0 24px;font-size:15px;line-height:1.5}
  html body .auth-split-form-in a{color:var(--ink)!important}
  html body .auth-split-form-in label{display:block;margin:20px 0 8px;font-size:14px;font-weight:600;color:var(--ink);text-transform:none;letter-spacing:0}
  html body .auth-split-form-in form>label:first-of-type,html body .auth-split-form-in form>.auth-labrow:first-child{margin-top:0}

  /* Inputs: 52 px, a soft fill, no black border. */
  html body .auth-split-form-in input:not([type=checkbox]):not([type=radio]),html body .auth-split-form-in select{
    height:52px;min-height:52px;padding:0 16px;background:#F4F6F8;border:1px solid transparent;border-radius:14px;
    font-size:16px;color:var(--ink);box-shadow:none;transition:background .15s,border-color .15s,box-shadow .15s}
  html body .auth-split-form-in input::placeholder{color:var(--sub)}
  html body .auth-split-form-in input:hover{border-color:transparent}
  html body .auth-split-form-in input:focus,html body .auth-split-form-in select:focus{outline:0;background:#fff;border-color:var(--ink);box-shadow:0 0 0 4px rgba(14,20,23,.08)}
  html body .auth-split-form-in input:user-invalid{border-color:var(--coral-ink)}
  html body .auth-split-form-in input:disabled{opacity:.5}
  html body .auth-split-form-in input:-webkit-autofill{-webkit-box-shadow:0 0 0 100px #F4F6F8 inset;-webkit-text-fill-color:var(--ink);caret-color:var(--ink)}
  html body .auth-split-form-in input:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 100px #fff inset,0 0 0 4px rgba(14,20,23,.08)}
  /* The phone code keeps its big spaced digits, in the new box. */
  html body #pl-code,html body #pv-code{height:56px}


  /* Referral: a text link, not a box; open (and filled) when a code came with the visit. */
  html body .reg-ref{margin-top:16px;padding:0;border:0;border-radius:0;background:none}
  html body .reg-ref summary{display:flex;align-items:center;min-height:44px;font-size:14px;font-weight:600;color:var(--ink)}
  html body .reg-ref summary::before{content:'+\00a0';color:var(--ink);font-weight:600}
  html body .reg-ref[open] summary::before{content:'\2013\00a0'}
  html body .reg-ref input{margin-top:4px}
  html body .reg-ref .sub{margin-top:8px;font-size:13px}

  /* Terms: a 22 px box with a 44 px tap area. */
  html body .auth-split-form-in .auth-consent{display:flex;align-items:flex-start;gap:12px;min-height:44px;margin-top:16px;padding:10px 0;
    font-size:14px;line-height:1.45;color:var(--ink-2)}
  html body .auth-split-form-in .auth-consent input{appearance:none;-webkit-appearance:none;flex:none;width:22px;height:22px;min-height:0;margin:0;padding:0;
    border:1.5px solid var(--line-2);border-radius:6px;background:#fff center/14px no-repeat;cursor:pointer}
  html body .auth-split-form-in .auth-consent input:checked{background-color:var(--ink);border-color:var(--ink);
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5 6.5 11.5 12.5 4.5'/%3E%3C/svg%3E")}
  html body .auth-split-form-in .auth-consent input:focus-visible{outline:3px solid rgba(14,20,23,.25);outline-offset:2px}
  html body .auth-split-form-in .auth-consent a{text-decoration:underline;font-weight:600}

  /* The main button: an ink pill, full width; a spinner while it submits. */
  html body .auth-split-form-in .btn.dark{width:100%;min-height:52px;height:52px;margin-top:24px!important;background:var(--ink);color:#fff;border:0;box-shadow:none;font-size:16px;font-weight:600}
  html body .auth-split-form-in .btn.dark:hover{background:#000}
  html body .auth-split-form-in .btn.dark:focus-visible{outline:3px solid rgba(14,20,23,.25);outline-offset:2px;box-shadow:none}
  html body .auth-split-form-in .btn.dark.is-busy{position:relative;color:transparent;pointer-events:none}
  html body .auth-split-form-in .btn.dark.is-busy::after{content:'';position:absolute;left:50%;top:50%;width:20px;height:20px;margin:-10px 0 0 -10px;
    border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:auth2-spin .8s linear infinite}
  @keyframes auth2-spin{to{transform:rotate(360deg)}}

  /* "or", the other ways in as outline pills, then the switch link. */
  html body .auth-split-form-in .alt-or{margin:24px 0 16px;font-size:13px;color:var(--sub)}
  html body .auth-split-form-in .alt-or::before,html body .auth-split-form-in .alt-or::after{background:var(--line)}
  html body .auth-split-form-in .alt-btn{min-height:52px;margin-top:10px;background:#fff;color:var(--ink)!important;border:1px solid var(--line-2);border-radius:999px;
    -webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;font-size:16px;font-weight:600}
  html body .auth-split-form-in .alt-btn:hover{background:var(--paper-3,#F4F6F8)}
  html body .auth-split-form-in .alt-in+p.sub{margin-top:24px!important;text-align:center;font-size:14px;color:var(--ink-2)}
  html body .auth-split-form-in .alt-in+p.sub a{border-bottom:0!important;font-weight:600!important;color:var(--ink)!important;text-decoration:underline;text-underline-offset:3px}

  /* The saved-trade note: one 14 px line under the subline, no box. */
  html body .auth-split-form-in .draft-note{margin:-12px 0 20px;padding:0;background:none;border:0;font-size:14px;line-height:1.45;color:var(--ink-2)}
  html body .auth-split-form-in .draft-note svg{display:none}
  html body .auth-split-form-in .draft-note b,html body .auth-split-form-in .draft-note span{display:inline;color:var(--ink-2);font-size:14px}
  html body .auth-split-form-in .draft-note b{font-weight:600;color:var(--ink)}
  html body .auth-split-form-in .draft-note b::after{content:' · '}
  /* The page-level error (the server's message) reads as an error, not a gold notice. */
  html body .auth-split-form-in .mode{margin:0 0 16px;padding:12px 14px;border-radius:14px;background:#fff;border:1px solid var(--coral-ink);color:var(--coral-ink)!important;font-size:14px}
  html body .auth-split-form-in .link-btn{min-height:44px}
}
/* Narrow phones: the quote a size down so it stays within three lines. */
@media (max-width:380px){html body .auth-quote p{font-size:17px}}
/* Short screens (an iPhone with Safari's bars showing is under 680 px tall) keep the quote and the
   name too: the card stays at its normal size and the form scrolls under it. */
@media (prefers-reduced-motion:reduce){html body .auth-split-form-in .btn.dark.is-busy::after{animation-duration:2s}}

/* assets/v4/v4.css */
/* ==========================================================================
   Bonfium v4 (ui_v4, docs/v4/PROMPT-v4.md). Loaded after v3.css on v3 pages and after
   the site styles on the home page and older pages (app/v4.php v4_head).
   Values come from docs/v4/reference/html/bf4.css ("v4 additions").
   ========================================================================== */

/* ---------- the header, lowered at rest (§1.1, §4): desktop 26 px inside the stage, phone 22 ---------- */
body.v3.v4{--hdr-rest:26px}
body.v3.v4 .stage{padding-top:112px}
body.v3.v4 .v3-paper-top{padding-top:112px!important}
body.v3.v4 .v3-main{padding-bottom:0}   /* the footer card sits 48 px after the last card (§3) */
@media (max-width:760px){
  body.v3.v4 .v3-hdr.is-top,body.v3.v4 .v3-hdr.is-rest{transform:translateY(16px)}
  body.v3.v4 .stage{padding-top:96px}
  body.v3.v4 .v3-paper-top{padding-top:92px!important}
  /* nothing at the bottom of the screen: no tab bar, no 110 px padding (§1.1) */
  body.v3.v4 .tabbar{display:none!important}
  body.v3.v4.has-actbar .v4-foot{margin-bottom:calc(100px + env(safe-area-inset-bottom))}
  /* the bar can sit over the dark footer card on short pages: denser glass keeps its ink text readable */
  body.v3.v4 .actbar.frost{background:rgba(255,255,255,.74)}
  body.v3.v4 .v3-toast{bottom:calc(24px + env(safe-area-inset-bottom))}
  body.v3.v4.has-actbar .v3-toast{bottom:calc(104px + env(safe-area-inset-bottom))}
  /* pages that hid the phone bar for their own top line show it again: the back chip lives here now */
  body.v3.v4.v3-sellpage .v3-mtop,body.v3.v4.v3-roompage .v3-mtop{display:flex}
}

/* phone top bar: a bare bell in a 44 px target, the VM glass disc, the back chip */
.v4-hdr .v3-mtop{padding:0 6px 0 14px}
.v4-hdr .v3-mtop .mright{gap:4px}
.v4-hdr .v3-mtop .v4-bell{width:44px;height:44px;background:none!important;box-shadow:none!important}
.v4-hdr .v3-mtop .v4-bell .dot{top:11px;right:12px}
.v4-me{width:40px;height:40px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex:none;font-family:var(--display,'Outfit',system-ui,sans-serif);
  font-size:14px;letter-spacing:0;background:var(--ink,#0E1417);color:#fff;cursor:pointer;border:0;padding:0;transition:background-color .2s,color .2s}
.v4-hdr.is-top .v4-me,.bf-v4.is-over-hero .v4-me{background:rgba(255,255,255,.18);-webkit-backdrop-filter:blur(20px) saturate(1.6);backdrop-filter:blur(20px) saturate(1.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 0 0 1px rgba(255,255,255,.26);color:#fff}
.v4-me[aria-expanded="true"]{background:#fff!important;color:var(--ink,#0E1417)!important}
.v4-burger{width:44px;height:44px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex:none;border:0;padding:0;cursor:pointer;color:inherit;
  background:rgba(14,20,23,.05)}
.v4-hdr.is-top .v4-burger,.bf-v4.is-over-hero .v4-burger{background:rgba(255,255,255,.16);-webkit-backdrop-filter:blur(20px) saturate(1.7);backdrop-filter:blur(20px) saturate(1.7);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 0 0 1px rgba(255,255,255,.18);color:#fff}
.v4-back{height:40px;display:inline-flex;align-items:center;gap:4px;padding:0 14px 0 8px;border-radius:999px;font-size:15px;font-weight:500;background:rgba(14,20,23,.05)}
.v4-hdr.is-top .v4-back{background:rgba(255,255,255,.16);-webkit-backdrop-filter:blur(20px) saturate(1.7);backdrop-filter:blur(20px) saturate(1.7);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 0 0 1px rgba(255,255,255,.18)}
.v4-codechip{height:34px;display:inline-flex;align-items:center;padding:0 12px;border-radius:999px;font-size:14px;font-weight:600;letter-spacing:.04em;
  margin-left:6px;margin-right:auto;background:rgba(14,20,23,.05)}
.v4-hdr.is-top .v4-codechip{background:rgba(20,24,28,.38);box-shadow:inset 0 0 0 1px rgba(255,255,255,.26)}

/* desktop: "+ New trade" is a plain white button on a field, ink on paper and in the pill */
.v4-hdr .v4-newbtn{display:inline-flex;align-items:center;gap:6px;background:var(--ink);color:#fff;font-weight:600}
.v4-hdr.is-top .v4-newbtn{background:#fff;color:var(--ink)}
.v4-popwrap{position:relative;flex:none}

/* ---------- the menu: tinted glass, drops from under VM (§1.2) ---------- */
.v4-scrim{position:fixed;inset:0;z-index:80;background:rgba(14,20,23,.28);opacity:0;transition:opacity .18s ease}
.v4-scrim.is-open{opacity:1}
.v4-drawer,.v4-pop{color:#fff;background:rgba(18,16,16,.8);-webkit-backdrop-filter:blur(28px) saturate(1.3);backdrop-filter:blur(28px) saturate(1.3);
  border:1px solid rgba(255,255,255,.14);box-shadow:0 30px 60px -24px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.12);
  font-family:var(--text,'Instrument Sans',system-ui,sans-serif);font-size:16px;line-height:1.35;text-align:left}
.v4-drawer{position:fixed;left:10px;right:10px;top:76px;z-index:81;border-radius:24px;padding:8px;max-height:calc(100dvh - 92px);overflow:auto;overscroll-behavior:contain;
  opacity:0;transform:translateY(-8px) scale(.985);transform-origin:top right;transition:opacity .16s ease-in,transform .16s ease-in}
.v4-drawer.is-open{opacity:1;transform:none;transition:opacity .22s cubic-bezier(.2,.7,.2,1),transform .22s cubic-bezier(.2,.7,.2,1)}
.v4-pop{position:absolute;right:0;top:calc(100% + 10px);z-index:81;width:340px;border-radius:24px;padding:8px;
  opacity:0;transform:translateY(-4px) scale(.98);transform-origin:top right;transition:opacity .12s ease-in,transform .12s ease-in}
.v4-pop.is-open{opacity:1;transform:none;transition:opacity .18s cubic-bezier(.2,.7,.2,1),transform .18s cubic-bezier(.2,.7,.2,1)}
.v4-drawer[hidden],.v4-pop[hidden],.v4-scrim[hidden],.v4-view[hidden]{display:none!important}
.v4-drawer a,.v4-pop a{color:#fff;text-decoration:none}
.v4-drawer button,.v4-pop button{font:inherit;color:#fff;background:none;border:0;cursor:pointer;text-align:left}
.v4-drawer :focus-visible,.v4-pop :focus-visible{outline:2px solid #fff;outline-offset:2px}
.v4-drawer .who,.v4-pop .who{display:flex;align-items:center;gap:12px;padding:12px 12px 14px}
.v4-drawer .who .av,.v4-pop .who .av{width:40px;height:40px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex:none;
  font-family:var(--display,'Outfit',system-ui,sans-serif);font-size:14px;background:#fff;color:var(--ink,#0E1417)}
.v4-drawer .who>span,.v4-pop .who>span{min-width:0}
.v4-drawer .who b,.v4-pop .who b{display:block;font-weight:600;font-size:16px}
.v4-drawer .who span span,.v4-pop .who span span{display:block;font-size:14px;color:rgba(255,255,255,.66);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v4-drawer .go{display:flex;align-items:center;height:56px;padding:0 14px;border-radius:16px;font-family:var(--display,'Outfit',system-ui,sans-serif);font-size:22px;letter-spacing:-.02em}
.v4-drawer .go.on{background:rgba(255,255,255,.1)}
.v4-drawer .go:active,.v4-drawer .sub:active,.v4-pop .sub:active{background:rgba(255,255,255,.08)}
.v4-drawer .cta1{padding:6px 6px 10px}
.v4-drawer .cta1 .btn{width:100%;height:48px;border-radius:999px;display:flex;align-items:center;justify-content:center;gap:8px;font-size:15px;font-weight:600;background:#fff;color:var(--ink,#0E1417)}
.v4-drawer .cta{display:flex;gap:8px;padding:6px 6px 10px}
.v4-drawer .cta .btn{flex:1;height:48px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;font-size:15px;font-weight:600;white-space:nowrap}
.v4-drawer .cta .btn.white{background:#fff;color:var(--ink,#0E1417)}
.v4-drawer .cta .btn.glassy{background:rgba(255,255,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 0 0 1px rgba(255,255,255,.18);color:#fff}
.v4-drawer .hr,.v4-pop .hr{height:1px;background:rgba(255,255,255,.12);margin:8px 12px}
.v4-drawer .sub,.v4-pop .sub{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;height:48px;padding:0 14px;border-radius:14px;font-size:16px}
.v4-drawer .sub .l,.v4-pop .sub .l{display:inline-flex;align-items:center;gap:10px}
.v4-drawer .sub .v,.v4-pop .sub .v{color:rgba(255,255,255,.66);display:inline-flex;align-items:center;gap:6px;font-size:15px}
.v4-pop .sub[aria-current="page"],.v4-drawer .sub[aria-current="page"]{background:rgba(255,255,255,.1)}
.v4-out{margin:0}
.adot{width:8px;height:8px;border-radius:50%;background:var(--amber,#B86E10);display:inline-block;flex:none}
.v4-dhead{display:flex!important;align-items:center;gap:8px;width:100%;height:52px;padding:0 8px;font-weight:600;font-size:16px;border-radius:14px}
.v4-poph{height:44px;display:flex;align-items:center;padding:0 12px;font-weight:600;font-size:15px;color:rgba(255,255,255,.72)}
.v4-langgrid{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px 6px 8px}
.v4-langgrid button{height:48px;border-radius:14px;display:flex;align-items:center;justify-content:space-between;gap:6px;padding:0 14px;font-size:16px;min-width:0}
.v4-langgrid button span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v4-langgrid button:hover{background:rgba(255,255,255,.08)}
.v4-langgrid button.on{background:#fff;color:var(--ink,#0E1417);font-weight:600}
@media (min-width:761px){
  .v4-drawer,.v4-scrim{display:none!important}
}
@media (max-width:760px){
  .v4-pop{display:none!important}
}
@media (prefers-reduced-motion:reduce){
  .v4-drawer,.v4-pop,.v4-scrim{transition:none!important}
}
@media (prefers-reduced-transparency:reduce){
  .v4-drawer,.v4-pop{background:rgba(18,16,16,.96);-webkit-backdrop-filter:none;backdrop-filter:none}
}

/* ---------- the home page and the older pages (§2): VM or the glass menu button on phones ---------- */
.bf-v4 .v4-site-me{display:none}
.bf-v4 .v4-popwrap .bf-nav-icon{display:inline-flex;align-items:center;gap:6px}
.bf-v4 .bf-account-button{display:inline-flex;align-items:center;gap:8px}
@media (max-width:760px){
  .bf-v4 .v4-site-me{display:inline-flex}
  .bf-v4 .v4-sitecta,.bf-v4 .v4-sitelogin,.bf-v4 .v4-siteacct,.bf-v4 .v4-sitelang,.bf-v4 .bf-nav-burger{display:none!important}
}
/* the old account v2 tab bar never shows with v4 */
.v4-site .a2-tabbar{display:none!important}

/* ---------- the footer: one small dark card everywhere (§3) ---------- */
.v4-foot{margin:48px 10px 10px;border-radius:24px;background:#0E1417;color:rgba(255,255,255,.86);position:relative;overflow:hidden;isolation:isolate;
  font-family:var(--text,'Instrument Sans',system-ui,sans-serif);line-height:1.4}
.v4-foot a{color:inherit;text-decoration:none}
.v4-foot a:hover{color:#fff}
.v4-foot .grain{position:absolute;inset:0;z-index:-1;background:var(--grain-src,url(/assets/grain/grain-256.png)) repeat;background-size:var(--grain-size,128px);
  mix-blend-mode:soft-light;opacity:.5;pointer-events:none}
.v4-foot .in{max-width:1200px;margin:0 auto;padding:22px 24px;display:flex;align-items:center;gap:28px}
.v4-foot .lgw{display:block;flex:none}
.v4-foot .lg{height:34px;width:auto;display:block;margin-left:-4px}
.v4-foot nav{flex:1;display:flex;flex-wrap:wrap;gap:6px 22px;font-size:14px}
.v4-foot .legal{display:flex;gap:16px;font-size:13px;color:rgba(255,255,255,.55)}
.v4-foot .bl{border-top:1px solid rgba(255,255,255,.1);max-width:1152px;margin:0 auto;padding:12px 0 16px;display:flex;justify-content:space-between;gap:16px;font-size:13px;color:rgba(255,255,255,.5)}
@media (max-width:1240px){.v4-foot .bl{margin:0 24px}}
@media (max-width:760px){
  .v4-foot{margin:32px 10px 10px}
  .v4-foot .in{flex-direction:column;align-items:flex-start;gap:14px;padding:20px 20px 14px}
  .v4-foot nav{gap:8px 18px;font-size:15px}
  .v4-foot .in .legal,.v4-foot .bl .only{display:none}
  .v4-foot .bl .legal{display:flex;gap:0}
  .v4-foot .bl .legal a+a::before{content:"·";padding:0 6px}
  .v4-foot .bl{flex-direction:column;gap:4px;margin:0 20px;padding:12px 0 16px}
}
@media (min-width:761px){.v4-foot .bl .legal{display:none}}
/* the old footers never show under v4 */
body.v4 .bf-foot2,body.v4 .bf-foot,.v4-site .bf-foot2,.v4-site .bf-foot{display:none}

/* ---------- fields (§6): the stage's bottom scrim rises to .42 ---------- */
body.v3.v4 .field>.scrim-b{background:linear-gradient(180deg,rgba(14,20,23,0) 50%,rgba(14,20,23,.42) 100%)}

/* ---------- minimal by rule: shared pieces (§5) ---------- */
.v4 .v4-sub{font-size:16px;color:rgba(255,255,255,.88);margin-top:10px}
.v4 .v4-sub.ink{color:var(--sub)}
.v4 .v4-tabs{display:flex;gap:24px;border-bottom:1px solid var(--line);padding:0 4px;margin-bottom:16px}
.v4 .v4-tabs a{height:44px;display:inline-flex;align-items:center;font-size:15px;font-weight:600;color:var(--sub);position:relative}
.v4 .v4-tabs a[aria-current="page"]{color:var(--ink)}
.v4 .v4-tabs a[aria-current="page"]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--ink);border-radius:2px}
.v4 .v4-tabs a .d{width:6px;height:6px;border-radius:50%;background:var(--ink);margin-left:6px}
.v4 .v4-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);padding:4px 24px}
.v4 .lrow{display:flex;align-items:center;gap:12px;min-height:60px;padding:0 4px;border-top:1px solid var(--line);font-size:16px;color:var(--ink)}
.v4 .lrow:first-child{border-top:0}
.v4 .lrow .t{flex:1;min-width:0}
.v4 .lrow .v{color:var(--sub);font-size:15px;display:inline-flex;align-items:center;gap:8px}
.v4 .lrow .chev{color:var(--sub);flex:none}
.v4 .lrow.x{color:var(--coral)}
.v4 button.lrow{width:100%;background:none;border-left:0;border-right:0;border-bottom:0;text-align:left;font:inherit;cursor:pointer}
.v4 .trow{display:flex;align-items:center;gap:14px;min-height:72px;padding:0 2px;border-top:1px solid var(--line);color:var(--ink)}
.v4 .trow:first-child{border-top:0}
.v4 .trow .av{width:40px;height:40px;font-size:15px;background:var(--paper-3);color:var(--ink)}
.v4 .trow .t{flex:1;min-width:0}
.v4 .trow .t b{display:block;font-weight:600;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v4 .trow .t span{display:block;font-size:14px;color:var(--sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v4 .trow .a{text-align:right;font-family:var(--display);font-size:18px;font-variant-numeric:tabular-nums;white-space:nowrap}
.v4 .v4-needs{padding:4px 20px}
.v4 .v4-needs .nrow{display:flex;align-items:center;gap:12px;min-height:64px;padding:10px 0;border-top:1px solid rgba(255,255,255,.12)}
.v4 .v4-needs .nrow:first-child{border-top:0}
.v4 .v4-needs .nrow .t{flex:1;min-width:0}
.v4 .v4-needs .nrow .t b{display:block;font-weight:600;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v4 .v4-needs .nrow .t>span{display:block;font-size:14px;color:rgba(255,255,255,.75);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v4 .v4-needs .nrow .btn{flex:none}
.v4 .v4-figs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.v4 .v4-figs .big{font-size:28px;line-height:1.1}
.v4 .v4-figs .cap{margin-top:4px}
.v4 .big{font-family:var(--display);font-weight:400;letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.v4 .v4-sec{margin-top:24px}
.v4 .v4-wrap{max-width:760px;margin:0 auto;padding:0 24px}
.v4 .v4-wrap.wide{max-width:1200px}
@media (max-width:760px){
  .v4 .v4-wrap{padding:0 10px}
  .v4 .v4-card{padding:4px 16px}
  .v4 .v4-figs .big{font-size:24px}
}

/* ---------- §9.6 press feedback in the same frame ---------- */
.v4 a,.v4 button,.v4-site a,.v4-site button,.bf-v4 a,.bf-v4 button{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.v4 .btn:active,.v4 .lrow:active,.v4 .trow:active,.v4 .chip:active,.v4-me:active,.v4-burger:active,.v4-back:active{transform:scale(.98)}
.v4 .lrow:active,.v4 .trow:active{background:rgba(14,20,23,.03)}
.v4 .btn.is-busy{position:relative;color:transparent!important}
.v4 .btn.is-busy::after{content:"";position:absolute;left:50%;top:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;border:2px solid currentColor;
  border-color:var(--sub) transparent var(--sub) var(--sub);animation:v4spin .7s linear infinite}
.v4 .btn.ink.is-busy::after,.v4 .field .btn.glassy.is-busy::after{border-color:#fff transparent #fff #fff}
@keyframes v4spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.v4 .btn:active,.v4 .lrow:active,.v4 .trow:active{transform:none}}

/* assets/v4/parts/acct.css */
/* Rewards, Rank, Medals, Account (+ Profile, Sign-in, Notifications, Identity), Help
   (app/v4-acct-*.php, §5.5–5.7, boards V4RewardsM, V4RankM, V4AccountM, V4ProfileM, V4HelpM) */

/* ---------- the field: H1 + one line, or the code sheet / the search ---------- */
.v4 .v4-acct-stage{padding-bottom:36px}
.v4 .v4-acct-head .h1{font-size:56px;line-height:1.02}
.v4 .v4-acct-head .v4-sub{margin-top:10px}

/* Rewards: the code sheet */
.v4 .v4-acct-code{padding:24px;margin-top:22px;max-width:520px}
.v4 .v4-acct-code .k{font-size:15px;color:rgba(255,255,255,.72);margin:0}
.v4 .v4-acct-code .c{font-size:44px;line-height:1.1;letter-spacing:.02em;margin:4px 0 0;word-break:break-all}
.v4 .v4-acct-code .b{display:flex;gap:8px;margin-top:18px}
.v4 .v4-acct-code .b .btn{flex:1;min-width:0}

/* Help: the search on the field */
.v4 .v4-acct-search{margin-top:20px;height:52px;border-radius:999px;display:flex;align-items:center;gap:10px;padding:0 18px;color:rgba(255,255,255,.85);max-width:520px}
.v4 .v4-acct-search svg{flex:none}
.v4 .v4-acct-search input{flex:1;min-width:0;height:50px;border:0;background:transparent;font:inherit;font-size:16px;color:#fff;outline:none;padding:0;-webkit-appearance:none;appearance:none}
.v4 .v4-acct-search input::placeholder{color:rgba(255,255,255,.85)}
.v4 .v4-acct-search input::-webkit-search-cancel-button{filter:invert(1)}
.v4 .v4-acct-search:focus-within{box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 0 0 1.5px rgba(255,255,255,.7)}

/* Account: disc, name, email */
.v4 .v4-acct-me{display:flex;align-items:center;gap:18px}
.v4 .v4-acct-me .av{width:88px;height:88px;font-size:30px}
.v4 .v4-acct-me .who{min-width:0}
.v4 .v4-acct-me h1{font-size:44px;line-height:1.05;margin:0;color:#fff;overflow-wrap:anywhere}
.v4 .v4-acct-me p{font-size:16px;color:rgba(255,255,255,.85);margin:4px 0 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- below the field: cards of rows ---------- */
.v4 .v4-acct-body{margin-top:14px;display:flex;flex-direction:column;gap:10px}
.v4 .v4-acct-body .v4-card{margin:0;list-style:none}
.v4 .v4-acct-body .v4-card.v4-acct-pad,.v4 .v4-acct-body .v4-acct-form{padding:24px}
.v4 .v4-acct-body .lrow{text-decoration:none}
.v4 .v4-acct-body .lrow .adot{margin-right:-2px}

/* Rewards: joined · traded · earned */
.v4 .v4-acct-figs{display:flex;justify-content:space-between;gap:12px;padding:18px 24px}
.v4 .v4-acct-figs>div{min-width:0}
.v4 .v4-acct-figs>div:last-child{text-align:right}
.v4 .v4-acct-figs .big{display:block;font-size:30px;line-height:1.1;color:var(--ink)}
.v4 .v4-acct-figs span{display:block;font-size:14px;color:var(--sub);margin-top:2px}

/* Rank: the ladder */
.v4 .v4-acct-ladder{padding-top:4px;padding-bottom:4px}
.v4 .v4-acct-ladder .lrow{min-height:58px}
.v4 .v4-acct-ladder .av.xs{width:28px;height:28px;font-size:11px;background:var(--paper-3);color:var(--ink)}
.v4 .v4-acct-ladder .is-now .av.xs{background:var(--ink);color:#fff}
.v4 .v4-acct-ladder .is-now .t{font-weight:600}
.v4 .v4-acct-ladder .v{white-space:nowrap}

/* Medals: one calm row each */
.v4 .v4-acct-medals .lrow{min-height:72px;padding-top:10px;padding-bottom:10px}
.v4 .v4-acct-medals .mi{width:40px;height:40px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;flex:none;background:var(--paper-3);color:var(--sub)}
.v4 .v4-acct-medals .is-got .mi{background:var(--ink);color:#fff}
.v4 .v4-acct-medals .t b{display:block;font-weight:600;font-size:16px}
.v4 .v4-acct-medals .t>span{display:block;font-size:14px;color:var(--sub);margin-top:2px}
.v4 .v4-acct-medals .v{color:var(--ink)}

/* settings rows: title + one meta line + the control */
.v4 .v4-acct-set{min-height:72px;padding-top:12px;padding-bottom:12px;gap:16px}
.v4 .v4-acct-set .t b{display:block;font-weight:600;font-size:16px}
.v4 .v4-acct-set .t>span{display:block;font-size:14px;line-height:1.4;color:var(--sub);margin-top:2px;overflow-wrap:anywhere}
.v4 .v4-acct-set form{margin:0;flex:none}
.v4 .v4-acct-set label{flex:none;display:inline-flex}

/* Log out sits in a form: keep the hairline above it */
.v4 .v4-acct-out{margin:0}
.v4 .v4-acct-out .lrow{border-top:1px solid var(--line)}
.v4 .v4-acct-out:first-child .lrow{border-top:0}

/* Profile: the form */
.v4 .v4-acct-form .fl+.fl{margin-top:16px}
.v4 .v4-acct-form .err{font-size:14px;color:var(--coral);margin:6px 0 0}
.v4 .v4-acct-hint{font-size:14px;color:var(--sub);margin:0 0 16px}
.v4 .v4-acct-tog{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;margin-top:12px;font-size:16px;cursor:pointer}
.v4 .v4-acct-more{margin-top:4px;border-top:1px solid var(--line)}
.v4 .v4-acct-more summary{list-style:none;display:flex;align-items:center;justify-content:space-between;min-height:52px;font-size:16px;cursor:pointer}
.v4 .v4-acct-more summary::-webkit-details-marker{display:none}
.v4 .v4-acct-more summary::after{content:"+";font-size:20px;line-height:1;color:var(--sub);transition:transform .2s}
.v4 .v4-acct-more[open] summary::after{transform:rotate(45deg)}
.v4 .v4-acct-more .fl{padding-bottom:8px}
.v4 .v4-acct-form .btn.block{width:100%;margin-top:14px}

/* Identity */
.v4 .v4-acct-p{font-size:16px;line-height:1.5;color:var(--ink-2);margin:0}
.v4 .v4-acct-p.m{margin-top:12px;font-size:15px;color:var(--sub)}
.v4 .v4-acct-btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.v4 .v4-acct-btns form{margin:0}

/* one quiet line under a card */
.v4 .v4-acct-note{font-size:14px;line-height:1.45;color:var(--sub);margin:4px 0 0;padding:0 8px}
.v4 .v4-acct-none{font-size:15px;color:var(--sub);margin:0;padding:8px}
.v4 .v4-acct-links{display:flex;justify-content:center;gap:20px;margin:8px 0 0;font-size:14px;font-weight:600}
.v4 .v4-acct-links a{color:var(--ink-2);text-decoration:none;padding:10px 4px}
.v4 .v4-acct-links a:hover{text-decoration:underline;text-underline-offset:3px}

/* Help: FAQ rows open in place */
.v4 .v4-acct-faq details{border-top:1px solid var(--line)}
/* while searching: no hairline above the first row still showing */
.v4 .v4-acct-faq details:not(:not([hidden])~details),.v4 [data-v4-hgroup] .lrow:not(:not([hidden])~.lrow){border-top:0}
.v4 .v4-acct-faq summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:60px;padding:10px 4px;cursor:pointer;font-size:16px;color:var(--ink)}
.v4 .v4-acct-faq summary::-webkit-details-marker{display:none}
.v4 .v4-acct-faq summary::after{content:"+";flex:none;font-size:18px;line-height:1;color:var(--sub);transition:transform .2s}
.v4 .v4-acct-faq details[open] summary::after{transform:rotate(45deg)}
.v4 .v4-acct-faq .ans{margin:0;padding:0 4px 18px;font-size:15px;line-height:1.55;color:var(--ink-2)}
.v4 [data-v4-hgroup][hidden],.v4 [data-v4-h][hidden]{display:none}

@media (max-width:760px){
  .v4 .v4-acct-stage{padding-bottom:20px}
  .v4 .v4-acct-head{padding:0 16px}
  .v4 .v4-acct-head .h1{font-size:34px}
  .v4 .v4-acct-head .v4-sub{font-size:15px;margin-top:6px}
  .v4 .v4-acct-code{padding:20px;margin-top:18px}
  .v4 .v4-acct-code .c{font-size:40px}
  .v4 .v4-acct-search{margin-top:16px}
  .v4 .v4-acct-me{gap:14px}
  .v4 .v4-acct-me .av{width:64px;height:64px;font-size:22px}
  .v4 .v4-acct-me h1{font-size:28px}
  .v4 .v4-acct-me p{font-size:14px;margin-top:2px}
  .v4 .v4-acct-figs{padding:18px 20px}
  .v4 .v4-acct-figs .big{font-size:26px}
  .v4 .v4-acct-body .v4-card.v4-acct-pad,.v4 .v4-acct-body .v4-acct-form{padding:20px}
}

/* assets/v4/parts/badge.css */
/* v4 badge (docs/v4/PROMPT-v4.md §8.1-8.4): the chip as HTML on /@handle, and the badge tool's
   extra controls (Auto corner, Seal). Every rule is under .bdg4-* (pages built with page_top). */

/* ---- the chip: clear liquid glass, the wordmark over "Name · N protected trades" ---- */
.bdg4-chip{--h:52px;position:relative;isolation:isolate;display:inline-flex;flex-direction:column;justify-content:center;align-items:flex-start;
  gap:calc(var(--h)*.02);height:var(--h);padding:0 calc(var(--h)*.42) 0 calc(var(--h)*.36);border-radius:999px;color:#fff;white-space:nowrap;
  background:rgba(255,255,255,.16);-webkit-backdrop-filter:blur(20px) saturate(1.7);backdrop-filter:blur(20px) saturate(1.7);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 0 0 1px rgba(255,255,255,.2),inset 0 -1px 1px rgba(255,255,255,.12),0 10px 28px -14px rgba(15,21,25,.3)}
.bdg4-chip::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0) 45%),linear-gradient(180deg,rgba(255,255,255,0) 60%,rgba(255,255,255,.12))}
/* the light top of the harbour field needs more than the 20% ink tint for 4.5:1 (measured: .36), as the tool does on photos */
.bdg4-chip--white{background:linear-gradient(rgba(15,21,25,.36),rgba(15,21,25,.36)),rgba(255,255,255,.16)}
.bdg4-chip .bdg4-wm{display:block;height:calc(var(--h)*.364);width:calc(var(--h)*2.412);overflow:visible;flex:none}
.bdg4-chip .bdg4-l2{font:500 calc(var(--h)*.25)/1.14 var(--ff-body,'Instrument Sans',system-ui,sans-serif);color:rgba(255,255,255,.88);letter-spacing:0}
.bdg4-chip--ink{color:#0F1519;background:rgba(255,255,255,.28)}
.bdg4-chip--ink .bdg4-l2{color:#3B4750}

/* on the public profile: top-left of the header field */
.bdg4-pfchip{position:absolute;z-index:4;top:28px;left:32px}
.bdg4-pay{margin:14px 0 0;font:400 15px/1.45 var(--ff-body);color:var(--ink-2,#3B4750)}
@media (max-width:760px){
  .bdg4-pfchip{top:14px;left:14px}
  .bdg4-pfchip .bdg4-chip{--h:46px}
  .bdg4-pay{margin:16px 20px 0;font-size:15px}
}

/* ---- the badge tool ---- */
.bdg4-tool .bdg4-corners{grid-template-columns:auto repeat(4,44px)}
.bdg4-tool .bdg4-auto{height:44px;padding:0 14px;border-radius:10px;border:1px solid var(--line-2);background:#fff;cursor:pointer;
  font:600 14px/1 var(--ff-body);color:var(--ink)}
.bdg4-tool .bdg4-auto[aria-checked="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.bdg4-tool .bdg4-auto:focus-visible{outline:3px solid rgba(14,20,23,.25);outline-offset:3px}
/* the corner Auto picked: marked, but dashed, so it reads as a suggestion */
.bdg4-tool .bt-corner.is-auto{border-style:dashed;box-shadow:none}

/* assets/v4/parts/badge2.css */
/* Badge tool v2 (/app/badge while badge_tool_v2 is on; docs/badge-v2/PROMPT.md §6). Every rule is under
   .bd2 / .bd2-pg / .bdg2-*, which only the v2 pages print, so nothing here touches another page. Paper page,
   clear liquid glass only (the sticky bar is the floating-menu glass: white .26, blur 36, saturate 1.8). */

.v4 .bd2{max-width:1200px;margin:0 auto;padding:0 24px 64px;color:var(--ink)}
.v4 .bd2 [hidden]{display:none!important}
.v4 .bd2-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.v4 .bd2-head{margin:8px 0 28px}
.v4 .bd2-h1{margin:0;font:400 48px/1.05 var(--display);letter-spacing:-.035em;color:var(--ink)}
.v4 .bd2-one{margin:12px 0 0;font:400 16px/1.45 var(--text);color:var(--ink-2)}
.v4 .bd2-lab{margin:0 0 10px;font:600 14px/1.3 var(--text);color:var(--ink)}
.v4 .bd2-h2{margin:0 0 8px;font:500 20px/1.25 var(--display);letter-spacing:-.02em}

/* desktop: left the controls (flex 1 1 520px), right the live preview (0 1 480px, sticky at 24 px) */
.v4 .bd2-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,480px);column-gap:56px;align-items:start}
.v4 .bd2-grid>*{grid-column:1;min-width:0}
.v4 .bd2-side{grid-column:2;grid-row:1/span 6;position:sticky;top:24px;display:flex;flex-direction:column;gap:14px}
.v4 .bd2.is-vinted .bd2-grid{grid-template-columns:minmax(0,760px)}
.v4 .bd2-grid>.bd2-sites,.v4 .bd2-grid>.bd2-vinted,.v4 .bd2-grid>.bd2-seg,.v4 .bd2-grid>.bd2-ctl{margin:0 0 24px}

/* chips: a real radiogroup, the input stays a focusable radio */
.v4 .bd2-chips{display:flex;flex-wrap:wrap;gap:8px}
.v4 .bd2-chip{position:relative;display:inline-flex;cursor:pointer}
.v4 .bd2-chip input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.v4 .bd2-chip span{display:inline-flex;align-items:center;height:40px;padding:0 16px;border-radius:999px;background:#fff;
  box-shadow:inset 0 0 0 1px var(--line-2);font:500 15px/1 var(--text);color:var(--ink);white-space:nowrap;transition:background var(--t-fast),color var(--t-fast)}
.v4 .bd2-chip input:checked+span{background:var(--ink);color:#fff;box-shadow:none}
.v4 .bd2-chip input:focus-visible+span{outline:3px solid rgba(14,20,23,.3);outline-offset:2px}

/* the segmented control: real radio inputs in a paper track */
.v4 .bd2-seg{display:flex;gap:4px;padding:4px;margin:0;border:0;border-radius:999px;background:var(--paper-3);min-inline-size:0}
.v4 .bd2-seg label{position:relative;flex:1;display:flex}
.v4 .bd2-seg input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.v4 .bd2-seg label>span{flex:1;display:flex;align-items:center;justify-content:center;height:40px;padding:0 14px;border-radius:999px;
  font:500 15px/1 var(--text);color:var(--ink-2);white-space:nowrap;transition:background var(--t-fast),color var(--t-fast)}
.v4 .bd2-seg input:checked+span{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(14,20,23,.08)}
.v4 .bd2-seg input:focus-visible+span{outline:3px solid rgba(14,20,23,.3);outline-offset:1px}
.v4 .bd2-short{display:none}

/* the preview */
.v4 .bd2-prev{border-radius:20px;overflow:hidden}
.v4 .bd2-slides{display:flex;align-items:center;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;border-radius:20px;background:var(--paper-3);transition:opacity var(--t-base)}
.v4 .bd2-slides::-webkit-scrollbar{display:none}
.v4 .bd2-slides.is-stale{opacity:.6}
.v4 .bd2-slides:focus-visible{outline:3px solid rgba(14,20,23,.3);outline-offset:2px}
.v4 .bd2-slide{flex:none;width:100%;height:auto;max-height:70vh;object-fit:contain;scroll-snap-align:center;display:block}
.v4 .bd2-empty{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:4/3;padding:24px;border:1.5px dashed var(--line-2);border-radius:20px;
  background:#fff;font:400 15px/1.45 var(--text);color:var(--sub);text-align:center;cursor:pointer}
.v4 .bd2-empty:focus-visible{outline:3px solid rgba(14,20,23,.3);outline-offset:2px}
.v4 .bd2-card{display:block;width:100%;height:auto;aspect-ratio:1;border-radius:20px;background:var(--paper-3)}
.v4 .bd2-linebox{margin:0;padding:20px 22px;border-radius:20px;background:var(--paper-3);font:400 16px/1.5 var(--text);color:var(--ink)}

/* the main action: ink, a small spinner while the copies are being made */
.v4 .bd2-go{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:50px;padding:0 22px;border:0;border-radius:999px;
  background:var(--ink);color:#fff;font:600 16px/1 var(--text);cursor:pointer}
.v4 .bd2-go:hover{background:#1C252A}
.v4 .bd2-go:focus-visible{outline:3px solid rgba(14,20,23,.35);outline-offset:3px}
.v4 .bd2-go[disabled]{cursor:default;opacity:.5}
.v4 .bd2-go.is-busy[disabled]{opacity:.75}
.v4 .bd2-spin{display:none;width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:bd2-spin .8s linear infinite;flex:none}
.v4 .bd2-go.is-busy .bd2-spin{display:inline-block}
@keyframes bd2-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.v4 .bd2-spin{animation-duration:2.4s}}
.v4 .bd2-saved{margin:0;font:400 14px/1.45 var(--text);color:var(--ink-2)}
.v4 .bd2-tolink{padding:0;border:0;background:none;font:600 14px/1.45 var(--text);color:var(--ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* in-app browsers */
.v4 .bd2-inapp{padding:18px 20px}
.v4 .bd2-inapp-t{margin:0 0 12px;font:500 16px/1.4 var(--text);color:var(--ink)}
.v4 .bd2-inapp-s{margin:12px 0 0;font:400 14px/1.45 var(--text);color:var(--sub)}
.v4 .bd2-pill{height:40px;padding:0 18px;border:0;border-radius:999px;background:var(--ink);color:#fff;font:600 14px/1 var(--text);cursor:pointer}
.v4 .bd2-pill:focus-visible{outline:3px solid rgba(14,20,23,.35);outline-offset:3px}

/* the controls */
.v4 .bd2-ctl{display:flex;flex-direction:column;gap:22px}
.v4 .bd2-photoctl{display:flex;flex-direction:column;gap:22px}
.v4 .bd2-photoctl[hidden]{display:none}
.v4 .bd2-choose{align-self:flex-start}
.v4 .bd2-strip{display:flex;flex-wrap:wrap;gap:8px;margin:-8px 0 0;padding:0;list-style:none}
.v4 .bd2-strip[hidden]{display:none}
.v4 .bd2-th{display:block;width:64px;height:64px;padding:0;border:0;border-radius:12px;background:var(--paper-3) center/cover no-repeat;cursor:pointer;
  box-shadow:inset 0 0 0 1px rgba(14,20,23,.08)}
.v4 .bd2-th[aria-pressed="true"]{box-shadow:0 0 0 2px var(--ink)}
.v4 .bd2-th:focus-visible{outline:3px solid rgba(14,20,23,.3);outline-offset:4px}
.v4 .bd2-tip,.v4 .bd2-note{margin:-8px 0 0;font:400 14px/1.45 var(--text);color:var(--sub)}
.v4 .bd2-note{margin:0}
.v4 .bd2-err{margin:-8px 0 0;padding:0;list-style:none;font:500 14px/1.45 var(--text);color:var(--coral)}
.v4 .bd2-err:empty{display:none}
.v4 .bd2-corners{display:flex;flex-wrap:wrap;gap:8px}
.v4 .bd2-auto{height:44px;padding:0 16px;border-radius:12px;border:0;background:#fff;box-shadow:inset 0 0 0 1px var(--line-2);font:500 15px/1 var(--text);color:var(--ink);cursor:pointer}
.v4 .bd2-corner{position:relative;width:44px;height:44px;padding:0;border:0;border-radius:12px;background:#fff;box-shadow:inset 0 0 0 1px var(--line-2);cursor:pointer}
.v4 .bd2-corner i{position:absolute;width:16px;height:8px;border-radius:3px;background:var(--line-2)}
.v4 .bd2-corner--tl i{top:7px;left:7px}.v4 .bd2-corner--tr i{top:7px;right:7px}
.v4 .bd2-corner--bl i{bottom:7px;left:7px}.v4 .bd2-corner--br i{bottom:7px;right:7px}
.v4 .bd2-auto[aria-checked="true"],.v4 .bd2-corner[aria-checked="true"]{box-shadow:inset 0 0 0 2px var(--ink)}
.v4 .bd2-corner[aria-checked="true"] i,.v4 .bd2-corner.is-auto i{background:var(--ink)}
.v4 .bd2-corner.is-auto{box-shadow:inset 0 0 0 1px var(--ink-2)}
.v4 :is(.bd2-auto,.bd2-corner):focus-visible{outline:3px solid rgba(14,20,23,.3);outline-offset:2px}
.v4 .bd2-rules{margin:4px 0 0;font:400 13px/1.45 var(--text);color:var(--sub)}
.v4 .bd2-vinted{padding:22px 24px}
.v4 .bd2-vinted p{margin:0 0 8px;font:400 15px/1.5 var(--text);color:var(--ink-2)}
.v4 .bd2-vinted p:last-child{margin:0}

/* not public: one card */
.v4 .bd2--off{max-width:560px;padding-top:24px}
.v4 .bd2-offcard{padding:28px;display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.v4 .bd2-offh{margin:0;font:400 28px/1.15 var(--display);letter-spacing:-.03em}

/* ---- phone (390): one column; the preview after the segmented control; the sticky bottom bar ---- */
@media (max-width:899px){
  .v4 .bd2{padding:0 16px calc(50px + 32px + env(safe-area-inset-bottom))}
  .v4 .bd2-head{margin:0 0 20px}
  .v4 .bd2-h1{font-size:30px;line-height:1.1}
  .v4 .bd2-one{font-size:15px;margin-top:8px}
  .v4 .bd2-grid{display:flex;flex-direction:column;align-items:stretch}
  .v4 .bd2-side{position:static;margin:0 0 24px}
  .v4 .bd2-grid>.bd2-sites,.v4 .bd2-grid>.bd2-vinted,.v4 .bd2-grid>.bd2-seg{margin:0 0 20px}
  .v4 .bd2-sites{order:1}.v4 .bd2-vinted{order:2}.v4 .bd2-seg{order:3}.v4 .bd2-side{order:4}.v4 .bd2-ctl{order:5}.v4 .bd2-rules{order:6}
  .v4 .bd2-long{display:none}.v4 .bd2-short{display:inline}
  .v4 .bd2-prev,.v4 .bd2-slides,.v4 .bd2-empty,.v4 .bd2-card,.v4 .bd2-linebox{border-radius:16px}
  .v4 .bd2-bar{position:fixed;z-index:30;left:0;right:0;bottom:0;padding:10px 16px calc(10px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.26);-webkit-backdrop-filter:blur(36px) saturate(1.8);backdrop-filter:blur(36px) saturate(1.8);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 -10px 28px -18px rgba(15,21,25,.22);color:var(--ink);transition:transform var(--t-base)}
  .v4 .bd2-bar.is-kb{transform:translateY(110%)}
  .v4 .bd2.is-vinted .bd2-bar{display:none}
}
@media (max-width:899px) and (prefers-reduced-transparency:reduce){
  .v4 .bd2-bar{background:rgba(255,255,255,.94);-webkit-backdrop-filter:none;backdrop-filter:none}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  @media (max-width:899px){.v4 .bd2-bar{background:rgba(255,255,255,.94)}}
}

/* ---- /@handle under v2: the chip stays clear glass, never above .3 (glass.css would lift it to .36) ---- */
html body .bdg4-chip.bdg2-chip.bdg4-chip--ink{background:rgba(255,255,255,.28)!important}
.bdg4-chip.bdg2-chip .bdg4-l2{color:inherit}
.bdg2-pay{margin:14px 0 0}
.pf-cols.bdg2-cols{display:block}
.pf-cols.bdg2-cols .pf-main{display:none}
.pf-cols.bdg2-cols .pf-aside{max-width:480px}
.v4 .bd2-acctrow{margin:16px 0 0;padding:4px 20px}
/* one photo, one badge (9 Oct): the big preview is enough, no thumbnail strip */
.v4 .bd2 [data-bd2-strip]{display:none!important}

/* assets/v4/parts/home.css */
/* Bonfium v4, home page (docs/v4/PROMPT-v4.md §8.5, §3; motion: docs/v4/docs/motion-v4.md).
   "Put Bonfium on your listing.": five listing pages that stick and pile up like a book, and the
   home page's own "Nobody has to go first." section. Markup: app/v4-home.php. Everything is scoped
   to .v4h* (the home body carries no .v4 class). Only transform and opacity move. */

.v4h,.v4h-cta{--v4h-ink:#0E1417;--v4h-ink2:#3B4750;--v4h-sub:#5B6A74;
  --v4h-display:var(--display,'Outfit','Instrument Sans',system-ui,sans-serif);
  --v4h-text:var(--text,'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif);
  font-family:var(--v4h-text);color:var(--v4h-ink);-webkit-font-smoothing:antialiased}
/* full bleed: the home page's sections sit in a narrower centred column */
.v4h{--v4h-top:96px;--v4h-step:46px;position:relative;padding:0 0 8px;margin-inline:calc(50% - 50vw)}
.v4h *,.v4h-cta *{box-sizing:border-box}

/* ---------- intro, on paper ---------- */
.v4h-intro{text-align:center;padding:72px 24px 40px;max-width:900px;margin:0 auto}
.v4h-eyebrow{margin:0;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--v4h-sub)}
.v4h-h2{margin:10px 0 0;font-family:var(--v4h-display);font-weight:400;font-size:56px;line-height:1.05;letter-spacing:-.035em;color:var(--v4h-ink)}
.v4h-lead{margin:14px auto 0;max-width:560px;font-size:18px;line-height:1.5;color:var(--v4h-ink2)}

/* ---------- the pages ---------- */
.v4h-pages{display:flex;flex-direction:column;align-items:center;position:relative}
.v4h-sn{display:block;width:100%;height:0;flex:none}
.v4h-end{display:block;flex:none;height:18vh}
.v4h-pg{position:sticky;top:calc(var(--v4h-top) + var(--i) * var(--v4h-step));flex:none;
  width:min(1360px,calc(100vw - 40px));min-height:var(--v4h-h,600px);
  /* every page's bottom edge lines up, so the stack leaves as one book instead of folding shut */
  margin:0 auto calc(64px + (4 - var(--i)) * var(--v4h-step));
  border-radius:32px;overflow:hidden;isolation:isolate;color:#fff;transform-origin:50% 0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 -10px 30px -14px rgba(14,20,23,.28),0 30px 60px -30px rgba(14,20,23,.45)}
.v4h-pg>picture.bg{position:absolute;inset:0;z-index:-3;display:block}
.v4h-pg>picture.bg img{display:block;width:100%;height:100%;object-fit:cover}
.v4h-pg>.grain,.v4h-cta>.grain{position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:var(--grain-src,url(/assets/grain/grain-256.png)) repeat;background-size:var(--grain-size,128px) var(--grain-size,128px);mix-blend-mode:soft-light}

/* the strip that stays visible once the next page covers this one */
.v4h-tab{height:46px;display:flex;align-items:center;padding:0 32px;font-size:15px;line-height:1.2;color:rgba(255,255,255,.86)}
.v4h-tab span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v4h-tab b{font-weight:600;color:#fff;margin-right:10px;font-variant-numeric:tabular-nums}

.v4h-body{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:56px;align-items:center;padding:28px 72px 56px;min-height:554px}
.v4h-copy h3{margin:0;font-family:var(--v4h-display);font-weight:400;font-size:56px;line-height:1.02;letter-spacing:-.035em;color:#fff;text-wrap:balance}
.v4h-copy p{margin:18px 0 0;max-width:520px;font-size:18px;line-height:1.5;color:rgba(255,255,255,.9)}
.v4h-btn{display:inline-flex;align-items:center;justify-content:center;height:48px;padding:0 22px;border-radius:999px;background:#fff;color:var(--v4h-ink);
  font:600 15px/1 var(--v4h-text);text-decoration:none;white-space:nowrap;transition:transform 80ms ease;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.v4h-btn:active{transform:scale(.98)}
.v4h-btn:focus-visible{outline:2px solid #fff;outline-offset:3px}
.v4h-copy .v4h-btn{margin-top:26px}

/* ---------- the generic listing card ---------- */
.v4h-lst{width:380px;justify-self:end;background:#fff;color:var(--v4h-ink);border-radius:18px;overflow:hidden;
  box-shadow:0 1px 0 rgba(14,20,23,.04),0 18px 40px -18px rgba(14,20,23,.35)}
.v4h-ph{position:relative;aspect-ratio:1/1;overflow:hidden;isolation:isolate}
.v4h-ph.bd-light{background:linear-gradient(160deg,#F2EFE9,#DAD3C8)}
.v4h-ph.bd-warm{background:linear-gradient(160deg,#ECDFCB,#C8B092)}
.v4h-ph.bd-stone{background:linear-gradient(160deg,#DDE1E2,#AAB2B6)}
.v4h-ph.bd-dark{background:linear-gradient(160deg,#4A4743,#1E1D1B)}
.v4h-ph.bd-night{background:linear-gradient(160deg,#33414A,#12191D)}
.v4h-ph>.grain{position:absolute;inset:0;z-index:-1;pointer-events:none;background:url(/assets/grain/grain-256.png) repeat;background-size:128px;mix-blend-mode:soft-light}
.v4h-ph .it{position:absolute;left:50%;top:46%;width:58%;height:auto;transform:translate(-50%,-50%);color:rgba(255,255,255,.92)}
.v4h-ph.bd-light .it,.v4h-ph.bd-warm .it,.v4h-ph.bd-stone .it{color:rgba(14,20,23,.82)}
.v4h-meta{padding:12px 14px 14px}
.v4h-meta .pr{font-family:var(--v4h-display);font-size:22px;line-height:1.2;letter-spacing:-.02em}
.v4h-meta .ti{margin-top:2px;font-size:15px;line-height:1.35}
.v4h-meta .pl{margin-top:4px;font-size:13px;line-height:1.35;color:var(--v4h-sub)}

/* the chip (§8.1): clear liquid glass, the wordmark over its glow + the seller's own record */
.v4h-chip{--h:40px;position:absolute;left:4%;bottom:4%;height:var(--h);display:inline-flex;flex-direction:column;justify-content:center;gap:calc(var(--h)*.02);
  padding:0 calc(var(--h)*.42) 0 calc(var(--h)*.36);border-radius:999px;isolation:isolate;overflow:hidden;white-space:nowrap;color:#fff;
  background:rgba(255,255,255,.16);outline:1px solid rgba(14,20,23,.06);outline-offset:-1px;
  -webkit-backdrop-filter:blur(20px) saturate(1.7);backdrop-filter:blur(20px) saturate(1.7);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 0 0 1px rgba(255,255,255,.2),inset 0 -1px 1px rgba(255,255,255,.12),0 10px 28px -14px rgba(15,21,25,.3)}
.v4h-chip::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0) 45%),radial-gradient(120% 90% at 50% 120%,rgba(255,255,255,.12),rgba(255,255,255,0) 60%)}
.v4h-chip.ink{color:#0F1519;background:rgba(255,255,255,.2)}
.v4h-chip .wm{display:block;width:calc(var(--h)*2.83);height:calc(var(--h)*.425);overflow:visible}
.v4h-chip .l2{display:block;font-weight:500;font-size:calc(var(--h)*.25);line-height:1.14;color:rgba(255,255,255,.88)}
.v4h-chip.ink .l2{color:var(--v4h-ink2)}
.v4h-chip .sweep{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none}
.v4h-chip .sweep::after{content:"";position:absolute;top:-20%;bottom:-20%;left:0;width:30%;
  background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,255,255,.6),rgba(255,255,255,0));transform:translateX(-160%) skewX(-14deg)}
.v4h-pg.on .v4h-chip .sweep::after{animation:v4h-sweep .6s cubic-bezier(.2,.7,.2,1) both}
@keyframes v4h-sweep{to{transform:translateX(460%) skewX(-14deg)}}

/* ---------- covered pages sink a little: scale(1 − 0.02 × depth) from the top centre ----------
   Each page j > 0 has a zero-height marker at its own place in the flow (.v4h-sn, a view timeline
   that scrolls normally while the pages stick). As page j rises from the bottom of the window to its
   sticky top, every page under it shrinks one step; the steps add up (animation-composition:add).
   Without scroll-driven animations, home.js writes the same transform from one rAF scroll handler. */
@supports (animation-timeline:view()) {
  .v4h-pages{timeline-scope:--v4h-p1,--v4h-p2,--v4h-p3,--v4h-p4}
  .v4h-pg.v4h-p0,.v4h-pg.v4h-p1,.v4h-pg.v4h-p2,.v4h-pg.v4h-p3{animation-name:v4h-sink;animation-timing-function:linear;animation-fill-mode:both;animation-duration:auto;animation-composition:add}
  .v4h-pg.v4h-p0{animation-name:v4h-sink,v4h-sink,v4h-sink,v4h-sink;animation-timeline:--v4h-p1,--v4h-p2,--v4h-p3,--v4h-p4;
    animation-range:cover 0% cover calc(100vh - 142px),cover 0% cover calc(100vh - 188px),cover 0% cover calc(100vh - 234px),cover 0% cover calc(100vh - 280px)}
  .v4h-pg.v4h-p1{animation-name:v4h-sink,v4h-sink,v4h-sink;animation-timeline:--v4h-p2,--v4h-p3,--v4h-p4;
    animation-range:cover 0% cover calc(100vh - 188px),cover 0% cover calc(100vh - 234px),cover 0% cover calc(100vh - 280px)}
  .v4h-pg.v4h-p2{animation-name:v4h-sink,v4h-sink;animation-timeline:--v4h-p3,--v4h-p4;
    animation-range:cover 0% cover calc(100vh - 234px),cover 0% cover calc(100vh - 280px)}
  .v4h-pg.v4h-p3{animation-timeline:--v4h-p4;animation-range:cover 0% cover calc(100vh - 280px)}
  @keyframes v4h-sink{from{transform:scale(1)}to{transform:scale(.98)}}
  @keyframes v4h-sink-m{from{transform:scale(1)}to{transform:scale(.97)}}
}

/* ---------- tablet ---------- */
@media (max-width:1180px) and (min-width:761px){
  .v4h-body{grid-template-columns:minmax(0,1fr) 340px;gap:40px;padding:28px 48px 48px}
  .v4h-copy h3{font-size:44px}
  .v4h-lst{width:340px}
}

/* ---------- phone: 100vw − 20 px, a 40 px strip, the listing under the text ---------- */
@media (max-width:760px){
  .v4h{--v4h-top:72px;--v4h-step:40px}
  .v4h-intro{text-align:left;padding:44px 20px 22px}
  .v4h-h2{margin-top:8px;font-size:36px;line-height:1.08}
  .v4h-lead{margin:12px 0 0;font-size:16px}
  .v4h-pg{width:calc(100vw - 20px);border-radius:28px}
  .v4h-tab{height:40px;padding:0 20px;font-size:14px}
  .v4h-body{display:block;min-height:0;padding:14px 22px 26px}
  .v4h-copy h3{font-size:34px;line-height:1.05}
  .v4h-copy p{margin-top:10px;font-size:16px}
  .v4h-copy .v4h-btn{margin-top:18px}
  .v4h-lst{width:min(300px,100%);margin:20px auto 0}
  .v4h-end{height:12vh}
  @supports (animation-timeline:view()) {
    .v4h-pg.v4h-p0{animation-name:v4h-sink-m,v4h-sink-m,v4h-sink-m,v4h-sink-m}
    .v4h-pg.v4h-p1{animation-name:v4h-sink-m,v4h-sink-m,v4h-sink-m}
    .v4h-pg.v4h-p2{animation-name:v4h-sink-m,v4h-sink-m}
    .v4h-pg.v4h-p3{animation-name:v4h-sink-m}
    .v4h-pg.v4h-p0{animation-range:cover 0% cover calc(100vh - 112px),cover 0% cover calc(100vh - 152px),cover 0% cover calc(100vh - 192px),cover 0% cover calc(100vh - 232px)}
    .v4h-pg.v4h-p1{animation-range:cover 0% cover calc(100vh - 152px),cover 0% cover calc(100vh - 192px),cover 0% cover calc(100vh - 232px)}
    .v4h-pg.v4h-p2{animation-range:cover 0% cover calc(100vh - 192px),cover 0% cover calc(100vh - 232px)}
    .v4h-pg.v4h-p3{animation-range:cover 0% cover calc(100vh - 232px)}
  }
}

/* ---------- reduced motion: no sticking, no scaling, normal cards 24 px apart ---------- */
@media (prefers-reduced-motion:reduce){
  .v4h-pg{position:relative;top:auto;margin-bottom:24px;animation:none!important;transform:none!important}
  .v4h-end{display:none}
  .v4h-chip .sweep::after{animation:none!important}
}

/* ---------- "Nobody has to go first." (§3: the home page's last section, above the footer) ---------- */
.v4h-cta{position:relative;isolation:isolate;overflow:hidden;width:min(1360px,calc(100vw - 40px));margin:72px 0 0 calc(50% - min(680px,50vw - 20px));padding:64px 32px;
  border-radius:32px;background:#0E1417;color:#fff;text-align:center}
.v4h-cta>.grain{opacity:.5}
.v4h-cta h2{margin:0;font-family:var(--v4h-display);font-weight:400;font-size:44px;line-height:1.08;letter-spacing:-.035em;color:#fff}
.v4h-cta .acts{margin-top:28px;display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.v4h-cta .v4h-btn.line{background:transparent;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)}
.v4h-cta .v4h-btn.line:hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.7)}
@media (max-width:760px){
  .v4h-cta{width:calc(100vw - 20px);margin:48px 0 0 calc(50% - 50vw + 10px);padding:44px 20px;border-radius:28px;text-align:left}
  .v4h-cta h2{font-size:32px}
  .v4h-cta .acts{flex-direction:column;align-items:stretch;margin-top:24px}
}
/* the CTA is the home page's last section: the footer card follows 48 px (phone 32 px) after it, not after the shell's own padding */
main.shell:has(>#v-home .v4h-cta){padding-bottom:0}

/* assets/v4/parts/listing.css */
/* The badge without logging in: /badge, the listing page bonfium.com/K7Q4MX and the "Have a code?" field
   in the home hero (badge_listing_code; docs/listing-code/PROMPT.md). Every rule is under .lc-* (printed
   only by those pages and by switched-on entry points), so nothing here touches another page.
   Clear liquid glass only (white .16-.26, never a dark tint), white cards on the page's field. */

.lc-pg [hidden]{display:none!important}

/* ---------- /badge: the field stage with the title and, when done, the one white card ---------- */
.v4 .lc-bstage{padding-bottom:44px}
.v4 .lc-btop{max-width:1200px;margin:0 auto;padding:0 24px}
.v4 .lc-bh1{color:#fff;max-width:14ch}
.v4 .lc-bsub{color:rgba(255,255,255,.88);margin-top:12px;max-width:52ch}
.v4 .lc-done{max-width:600px;margin:28px 0 0;padding:28px 28px 24px;color:var(--ink);outline:none}
.v4 .lc-done-l{margin:0 0 8px;font:600 14px/1.3 var(--text);color:var(--ink-2)}
.v4 .lc-coderow{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:0 0 24px}
.v4 .lc-codebig{font:400 44px/1 var(--display);letter-spacing:.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.v4 .lc-linebox{margin:0 0 12px;padding:16px 18px;border-radius:16px;background:var(--paper-3);font:400 16px/1.5 var(--text);color:var(--ink)}
.v4 .lc-linerow{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.v4 .lc-rules{margin:10px 0 0;font:400 13px/1.45 var(--text);color:var(--sub)}
.v4 .lc-saveblock{margin:24px 0 0;padding:20px 0 0;border-top:1px solid var(--line)}
.v4 .lc-saved{margin:10px 0 0;font:500 15px/1.4 var(--text);color:var(--ink)}
.v4 .lc-inapp{margin:14px 0 0}
.v4 .lc-inapp p{margin:0 0 10px;font:500 15px/1.4 var(--text)}
.v4 .lc-inapp .lc-sub{margin:10px 0 0;font-weight:400;font-size:14px;color:var(--sub)}
.v4 .lc-acct{margin:24px 0 0;padding:20px 0 0;border-top:1px solid var(--line)}
.v4 .lc-acct-h{margin:0 0 6px;font:500 20px/1.25 var(--display);letter-spacing:-.02em}
.v4 .lc-acct p{margin:0 0 14px;font:400 15px/1.5 var(--text);color:var(--ink-2)}
.v4 .lc-pill{height:40px;padding:0 18px;border:0;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px var(--line-2);
  font:600 14px/1 var(--text);color:var(--ink);cursor:pointer}
.v4 .lc-pill.ink{background:var(--ink);color:#fff;box-shadow:none}
.v4 .lc-pill:focus-visible,.v4 .lc-textlink:focus-visible{outline:3px solid rgba(14,20,23,.3);outline-offset:2px}
.v4 .lc-textlink{padding:0;border:0;background:none;font:600 14px/1.45 var(--text);color:var(--ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.v4 .lc-textlink[disabled]{color:var(--sub);text-decoration:none;cursor:default}

/* ---------- /badge: the steps (left) and the live preview (right, sticky) ---------- */
.v4 .lc-b{max-width:1200px;margin:0 auto;padding:28px 24px 64px;color:var(--ink)}
.v4 .lc-bgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,480px);column-gap:48px;align-items:start}
.v4 .lc-steps{display:flex;flex-direction:column;gap:16px;min-width:0}
.v4 .lc-side{position:sticky;top:24px;display:flex;flex-direction:column;gap:14px;min-width:0}
.v4 .lc-b.is-vinted .lc-bgrid{grid-template-columns:minmax(0,760px)}
.v4 .lc-b.is-done .lc-bgrid{grid-template-columns:minmax(0,600px)}
.v4 .lc-step{padding:24px 28px;display:flex;flex-direction:column;gap:16px}
.v4 .lc-sh{margin:0;font:400 24px/1.2 var(--display);letter-spacing:-.025em;color:var(--ink)}
.v4 .lc-step .fl{margin:0}
.v4 .lc-two{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.v4 .lc-step .bd2-lab{margin:4px 0 -6px}
.v4 .lc-vinted{padding:18px 20px;border-radius:16px;background:var(--paper-3)}
.v4 .lc-vh{margin:0 0 8px;font:500 20px/1.25 var(--display);letter-spacing:-.02em}
.v4 .lc-vinted p{margin:0 0 8px;font:400 15px/1.5 var(--text);color:var(--ink-2)}
.v4 .lc-vinted p:last-child{margin:0}
.v4 .lc-choose{align-self:flex-start}
.v4 .lc-step .bd2-strip{margin:0}
.v4 .lc-step .bd2-tip{margin:-6px 0 0}
.v4 .lc-step .bd2-err{margin:0}
.v4 .lc-row{display:flex;flex-direction:column;gap:16px}
.v4 .lc-check{display:flex;gap:10px;align-items:flex-start;font:400 15px/1.45 var(--text);color:var(--ink);cursor:pointer}
.v4 .lc-check input{width:20px;height:20px;margin:1px 0 0;flex:none;accent-color:var(--ink)}
.v4 .lc-step .bd2-note{margin:0}
.v4 .lc-inrow{display:flex;gap:8px;align-items:stretch}
.v4 .lc-inrow .field-in{flex:1;min-width:0}
.v4 .lc-inrow .btn{flex:none}
.v4 .lc-cc{flex:0 0 112px!important}
.v4 .lc-otp{letter-spacing:.3em;font-variant-numeric:tabular-nums;max-width:180px}
.v4 .lc-contact{display:flex;flex-direction:column;gap:14px;margin:0}
.v4 .lc-coderowin .lc-textlink{margin-top:10px}
.v4 .lc-contact>.lc-textlink{align-self:flex-start}
.v4 .lc-msgline{margin:0;font:400 14px/1.45 var(--text);color:var(--ink-2)}
.v4 .lc-msgline:empty{display:none}
.v4 .lc-msgline.is-bad,.v4 .lc-need.is-bad{color:var(--coral)}
.v4 .lc-confirmed{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:10px;row-gap:4px;font:500 15px/1.45 var(--text);color:var(--ink);overflow-wrap:anywhere}
.v4 .lc-confirmed .lc-textlink{grid-column:2;justify-self:start}
.v4 .lc-tick{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:var(--ink);color:#fff;flex:none}
.v4 .lc-note{margin:0;font:400 14px/1.45 var(--text);color:var(--sub)}
.v4 .lc-need{margin:10px 0 0;font:400 14px/1.4 var(--text);color:var(--sub);text-align:center}
.v4 .lc-need:empty{display:none}
.v4 .lc-side .bd2-rules{margin:0}

/* ---------- the listing page: one card on the field ---------- */
.v4 .lc-stage{padding-bottom:48px}
.v4 .lc-wrap{max-width:520px;margin:0 auto;padding:8px 16px 0;color:#fff}
.v4 .lc-card{padding:0;overflow:hidden;color:var(--ink)}
.v4 .lc-photo{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;background:var(--paper-3)}
.v4 .lc-body{padding:20px 24px 22px}
.v4 .lc-item{margin:0;font:400 28px/1.15 var(--display);letter-spacing:-.03em;color:var(--ink);overflow-wrap:anywhere}
.v4 .lc-price{margin:10px 0 0;font:400 40px/1 var(--display);letter-spacing:-.02em;color:var(--ink)}
.v4 .lc-fee{margin:10px 0 0;font:400 15px/1.4 var(--text);color:var(--ink-2)}
.v4 .lc-initial{display:flex;justify-content:center;margin:0 0 20px}
.v4 .lc-initial span{display:flex;align-items:center;justify-content:center;width:132px;height:132px;border-radius:50%;
  background:rgba(255,255,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 0 0 1px rgba(255,255,255,.3),0 10px 28px -14px rgba(15,21,25,.3);
  -webkit-backdrop-filter:blur(20px) saturate(1.6);backdrop-filter:blur(20px) saturate(1.6);font:400 64px/1 var(--display);color:#fff}
.v4 .lc-under{margin:20px 0 0}
.v4 .lc-site{margin:0 0 6px;font:500 16px/1.45 var(--text);color:#fff}
.v4 .lc-check{color:inherit}
.v4 .lc-under .lc-check{display:block;margin:0 0 20px;font:400 16px/1.5 var(--text);color:rgba(255,255,255,.9);cursor:auto}
.v4 .lc-state{margin:0;padding:16px 18px;border-radius:16px;background:rgba(255,255,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 0 0 1px rgba(255,255,255,.24);
  -webkit-backdrop-filter:blur(20px) saturate(1.6);backdrop-filter:blur(20px) saturate(1.6);font:500 16px/1.5 var(--text);color:#fff}
.v4 .lc-acts{display:flex;gap:10px;flex-wrap:wrap}
.v4 .lc-payform{margin:0}
.v4 .lc-cap{margin:10px 0 0;font:400 13px/1.45 var(--text);color:rgba(255,255,255,.82)}
.v4 .lc-report{margin:22px 0 0}
.v4 .lc-report summary{display:inline-block;cursor:pointer;list-style:none;font:500 14px/1.45 var(--text);color:rgba(255,255,255,.9);text-decoration:underline;text-underline-offset:3px}
.v4 .lc-report summary::-webkit-details-marker{display:none}
.v4 .lc-reportform{margin:12px 0 0;padding:18px 20px;display:flex;flex-direction:column;gap:14px;align-items:flex-start;color:var(--ink)}
.v4 .lc-reportform fieldset{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.v4 .lc-reportform legend{margin:0 0 6px;padding:0;font:600 15px/1.3 var(--text)}
.v4 .lc-reportform label{display:flex;gap:10px;align-items:center;font:400 15px/1.4 var(--text);cursor:pointer}
.v4 .lc-reportform input{width:18px;height:18px;accent-color:var(--ink)}
.v4 .lc-foot{display:flex;gap:8px;align-items:center;margin:28px 0 0;font:400 14px/1.45 var(--text);color:rgba(255,255,255,.85)}
.v4 .lc-card--msg{padding:28px;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.v4 .lc-msg{margin:0;font:400 28px/1.15 var(--display);letter-spacing:-.03em;color:var(--ink)}
.v4 .lc-msgsub{margin:0;font:400 16px/1.5 var(--text);color:var(--ink-2)}

/* ---------- the home hero: "Have a code?" (the same field as "Got a code from a seller?"), clear glass ---------- */
.lc-herocode{display:flex;align-items:center;gap:8px;max-width:440px;min-height:56px;margin:0 0 24px;padding:6px 6px 6px 22px;border-radius:999px;
  background:rgba(255,255,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 0 0 1px rgba(255,255,255,.28),0 10px 28px -14px rgba(15,21,25,.3);
  -webkit-backdrop-filter:blur(24px) saturate(1.7);backdrop-filter:blur(24px) saturate(1.7)}
.lc-herocode label{flex:1;font:500 15px/1.2 var(--ff-body,'Instrument Sans',system-ui,sans-serif);color:#fff;white-space:nowrap}
.lc-herocode input{width:118px;min-width:0;border:0;background:none;font:500 16px/1 var(--ff-body,'Instrument Sans',system-ui,sans-serif);letter-spacing:.08em;
  color:#fff;text-align:right;text-transform:uppercase;outline:none;padding:10px 6px}
.lc-herocode input::placeholder{color:rgba(255,255,255,.7);text-transform:none}
.lc-herocode input:focus-visible{background:rgba(255,255,255,.14);border-radius:10px}
.lc-herocode button{flex:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:0;border-radius:50%;background:#fff;color:#0F1519;cursor:pointer}
.lc-herocode button[disabled]{opacity:.55;cursor:default}
.lc-herocode button:focus-visible{outline:3px solid rgba(255,255,255,.7);outline-offset:2px}
.lc-herocode+.bf-ferr,.lc-herocode .bf-ferr{color:#fff}
.lc-ntlink{margin:0}

/* ---------- phone (390) ---------- */
@media (max-width:899px){
  .v4 .lc-btop{padding:0 16px}
  .v4 .lc-done{padding:22px 20px 20px;margin-top:20px}
  .v4 .lc-codebig{font-size:44px}
  .v4 .lc-b{padding:16px 16px calc(50px + 64px + env(safe-area-inset-bottom))}
  .v4 .lc-bgrid{display:flex;flex-direction:column;align-items:stretch;gap:16px}
  /* the steps and the preview interleave: what, photos, the preview, the contact */
  .v4 .lc-steps{display:contents}
  .v4 .lc-steps>:nth-child(1){order:1}.v4 .lc-steps>:nth-child(2){order:2}.v4 .lc-steps>:nth-child(3){order:4}
  .v4 .lc-side{position:static;order:3}
  .v4 .lc-step{padding:20px}
  .v4 .lc-sh{font-size:22px}
  .v4 .lc-two{grid-template-columns:1fr;gap:16px}
  .v4 .lc-bar .lc-need{margin:6px 0 0;font-size:13px}
  .v4 .bd2-prev,.v4 .lc-side .bd2-slides,.v4 .lc-side .bd2-empty{border-radius:16px}
  .v4 .lc-b.is-vinted .lc-bar{display:none}
  .v4 .lc-wrap{padding:0 16px}
  .v4 .lc-item{font-size:26px}
  .v4 .lc-price{font-size:36px}
  .lc-herocode{max-width:none;margin:0 0 18px;min-height:52px}
  .lc-herocode label{font-size:14px}
  .lc-herocode input{width:100px;font-size:15px}
}
@media (prefers-reduced-transparency:reduce){
  .v4 .lc-state,.v4 .lc-initial span{background:rgba(255,255,255,.26)}
}
/* one photo, one badge (9 Oct): the big preview is enough, no thumbnail strip */
.lc-pg [data-lc-strip]{display:none!important}

/* assets/v4/parts/money.css */
/* ==========================================================================
   v4 Activity (§5.3, V4ActivityM) and Money · Payout details · History (§5.4, V4MoneyM, V4Money, V4PayoutsM).
   Pages: app/v4-activity.php, app/v4-money.php (body class money-pg).
   ========================================================================== */

.v4.money-pg .h1.xl{font-size:56px}
.v4.money-pg .money-below{margin-top:24px}
.v4.money-pg .money-emptyline{padding:20px 4px}
.v4.money-pg .money-empty{padding:20px 24px}

/* ---------- Activity: one line per event ---------- */
.v4.money-pg .money-group{margin:22px 8px 8px}
.v4.money-pg .money-group:first-child{margin-top:6px}
.v4.money-pg .money-evs{padding:4px 22px}
.v4.money-pg .money-ev{display:flex;align-items:center;gap:12px;min-height:46px;padding:11px 0;border-top:1px solid var(--line);font-size:15px;color:var(--ink)}
.v4.money-pg .money-ev:first-child{border-top:0}
.v4.money-pg .money-ev .t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v4.money-pg .money-ev time{font-size:13px;color:var(--sub);white-space:nowrap;font-variant-numeric:tabular-nums}
.v4.money-pg .money-dot{width:6px;height:6px;border-radius:50%;background:var(--ink);flex:none}
.v4.money-pg .money-ev:active{background:rgba(14,20,23,.03)}

/* ---------- Money: the sheet on the field ---------- */
.v4.money-pg .money-top{display:grid;grid-template-columns:minmax(0,1fr) 560px;gap:48px;align-items:end;padding-top:20px}
.v4.money-pg .money-sheet{padding:24px 28px;display:grid;grid-template-columns:1.4fr 2fr;gap:20px;align-items:end;color:#fff}
.v4.money-pg .money-sheet .muted{font-size:14px}
.v4.money-pg .money-held .big{font-size:44px;line-height:1.1}
.v4.money-pg .money-two{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.v4.money-pg .money-two .big{font-size:26px;line-height:1.15}
.v4.money-pg .money-grid{display:grid;grid-template-columns:380px minmax(0,1fr);gap:16px;align-items:start}
.v4.money-pg .money-links{padding:4px 22px}
.v4.money-pg .money-links .chev{display:inline-flex}
.v4.money-pg .money-last{padding:4px 24px}
.v4.money-pg .trow .a.money-unpaid{color:var(--sub)}
.v4.money-pg .trow .av.empty{background:#fff;box-shadow:inset 0 0 0 1.5px var(--line-2);color:var(--sub)}

/* ---------- Payout details ---------- */
.v4.money-pg .money-stack{display:flex;flex-direction:column;gap:16px}
.v4.money-pg .money-pcard{padding:24px 28px}
.v4.money-pg .money-phead{display:flex;justify-content:space-between;align-items:center;gap:12px}
.v4.money-pg .money-steps{list-style:none;margin:8px 0 0;padding:0}
.v4.money-pg .money-steps .lrow{min-height:56px}
.v4.money-pg .money-ok{color:var(--teal);display:inline-flex;width:18px;flex:none}
.v4.money-pg .money-mk{display:inline-flex;justify-content:center;width:18px;flex:none}
.v4.money-pg .money-note{font-size:15px;line-height:1.45;color:var(--ink-2);margin:10px 0 0}
.v4.money-pg .money-act{margin-top:16px}
.v4.money-pg .money-steps + .money-act{margin-top:10px}
.v4.money-pg .money-capline{margin-top:8px}
.v4.money-pg .money-also{margin-top:14px;text-align:center}
.v4.money-pg .money-form{display:grid;gap:16px;margin-top:18px}
.v4.money-pg .money-form .lbl{margin-bottom:8px}
.v4.money-pg .money-form .btn{margin-top:2px}
.v4.money-pg .money-form .v3-check{display:flex;align-items:center;gap:8px;min-height:36px;font-size:15px}

@media (max-width:760px){
  .v4.money-pg .h1.xl{font-size:34px}
  .v4.money-pg .money-below{margin-top:14px}
  .v4.money-pg .money-group{margin:20px 8px 8px}
  .v4.money-pg .money-evs{padding:4px 18px}
  .v4.money-pg .money-top{display:block;padding-top:14px}
  .v4.money-pg .money-sheet{display:block;padding:20px;margin-top:18px}
  .v4.money-pg .money-two{display:flex;gap:24px;margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.12)}
  .v4.money-pg .money-two .big{font-size:22px}
  .v4.money-pg .money-held .big{margin-top:4px}
  .v4.money-pg .money-grid{display:flex;flex-direction:column;align-items:stretch;gap:10px;padding:0 10px}
  .v4.money-pg .money-links,.v4.money-pg .money-last{padding:4px 16px}
  .v4.money-pg .money-stack{gap:10px}
  .v4.money-pg .money-pcard{padding:20px}
}
@media (max-width:760px){
  .v4.money-pg .stage .money-head{padding:0 16px}
}

/* assets/v4/parts/new.css */
/* Start a trade, one page (app/v4-new.php, §7.2; boards V4New, V4NewM, V4NewBuyM) */
.v4 .v4-new-stage{padding-bottom:40px}
.v4 .v4-new-top{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:40px;align-items:end;min-height:150px}
.v4 .v4-new-top .h1{font-size:56px;line-height:1.02}
.v4 .v4-sides{display:inline-flex;gap:4px;padding:4px;border-radius:999px;margin-top:22px}
.v4 .v4-sides button{height:44px;padding:0 22px;border-radius:999px;font-size:15px;font-weight:500;color:#fff;transition:background-color .15s,color .15s}
.v4 .v4-sides button[aria-checked="true"]{background:#fff;color:var(--ink)}
.v4 .v4-totals{padding:8px 24px}
.v4 .v4-totals[hidden]{display:none}
.v4 .v4-totals .r{display:flex;align-items:baseline;justify-content:space-between;gap:16px;min-height:60px;padding:12px 0}
.v4 .v4-totals .r+.r{border-top:1px solid rgba(255,255,255,.14)}
.v4 .v4-totals .r span{font-size:15px;color:rgba(255,255,255,.78)}
.v4 .v4-totals .big{font-size:34px;line-height:1}
.v4 .v4-totals .big.s{font-size:22px}

.v4 .v4-new{margin-top:24px}
.v4 .v4-newgrid{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:16px;align-items:start;max-width:1152px;margin:0 auto}
.v4 .v4-newform{padding:24px 28px 8px}
.v4 .v4-newform .fl{margin-bottom:18px}
.v4 .v4-newform .fl.two{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.v4 .v4-newform .err{color:var(--coral);font-size:14px;margin-top:6px}
.v4 .v4-banner{background:#FBE9E5;color:#8E2C1B;border-radius:var(--r-inner);padding:12px 16px;font-size:15px;margin-bottom:16px}
.v4 .v4-forseller{font-size:15px;color:var(--ink-2);margin-bottom:16px}
.v4 .v4-welcome{font-size:14px;color:var(--teal);margin:-6px 0 14px}
.v4 .v4-welcome[hidden]{display:none}
.v4 .v4-price input{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:16px;color:var(--ink);outline:none;height:100%}
.v4 .v4-price .nt-cur{color:var(--ink);margin-right:4px}
.v4 .v4-payer{display:flex;gap:4px;padding:4px;border-radius:999px;background:var(--paper-3);height:52px}
.v4 .v4-payer button{flex:1;border-radius:999px;font-size:15px;font-weight:500;color:var(--ink-2);min-width:0;padding:0 8px;white-space:nowrap}
.v4 .v4-payer button[aria-checked="true"]{background:#fff;color:var(--ink);box-shadow:0 1px 2px rgba(14,20,23,.1)}
.v4 .v4-payer button:disabled{opacity:.45;cursor:not-allowed}
.v4 .v4-payer[hidden],.v4 .v4-dpanel[hidden],.v4 [data-v4-sellonly][hidden]{display:none}
.v4 .v4-kinds{margin-top:10px}
.v4 .v4-dpanel{margin-top:14px}
.v4 .v4-moredet{border-top:1px solid var(--line);margin:4px 0 0}
.v4 .v4-moredet>summary{list-style:none;cursor:pointer;border-top:0;min-height:64px}
.v4 .v4-moredet>summary::-webkit-details-marker{display:none}
.v4 .v4-moredet>summary .v svg{transition:transform .2s}
.v4 .v4-moredet[open]>summary .v svg{transform:rotate(90deg)}
.v4 .v4-moredet[open]>summary{margin-bottom:6px}
.v4 .v4-newside{display:grid;gap:16px}
.v4 .v4-createcard{padding:22px 24px;text-align:center}
.v4 .v4-createcard .btn{width:100%;height:52px;font-size:16px}
.v4 .v4-createcard .cap{margin-top:14px}
.v4 .v4-coderow{display:flex;align-items:center;gap:8px;padding:6px 10px 6px 24px;min-height:64px}
.v4 .v4-coderow .t{font-size:16px;flex:1}
.v4 .v4-coderow input{width:110px;border:0;background:none;font:inherit;font-size:15px;letter-spacing:.06em;color:var(--ink);text-align:right;outline:none;text-transform:uppercase}
.v4 .v4-coderow input::placeholder{color:var(--sub);text-transform:none}
.v4 .v4-coderow input:focus{background:var(--paper-3);border-radius:10px;padding:8px}
.v4 .v4-acctbtns{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.v4 .v4-acctbtns .btn{width:100%}
.v4.v4-newpage .actbar .t1{display:block;font-weight:600;font-size:16px;font-variant-numeric:tabular-nums}
.v4.v4-newpage .actbar .t2{display:block;font-size:14px;color:var(--sub)}
@media (max-width:1100px){.v4 .v4-newgrid,.v4 .v4-new-top{grid-template-columns:minmax(0,1fr) 360px}}
@media (max-width:900px){.v4 .v4-newgrid{grid-template-columns:minmax(0,1fr)}.v4 .v4-new-top{grid-template-columns:minmax(0,1fr)}}
@media (max-width:760px){
  .v4 .v4-new-stage{padding-bottom:12px}
  .v4 .v4-new-top{min-height:0}
  .v4 .v4-new-top .h1{font-size:34px}
  .v4 .v4-sides{display:flex;width:100%;margin-top:16px}
  .v4 .v4-sides button{flex:1;padding:0 8px}
  .v4 .v4-new{margin-top:10px}
  .v4 .v4-newform{padding:20px 20px 4px}
  .v4 .v4-newform .fl.two{grid-template-columns:1fr;gap:18px}
  .v4 .v4-coderow{background:none;border:0;padding:4px 16px 4px 16px}
  .v4 .v4-coderow input{width:96px}
  .v4.v4-newpage .actbar{border-radius:22px;left:10px;right:10px}
}

/* assets/v4/parts/room.css */
/* ==========================================================================
   v4 room (app/v4-room.php, PROMPT-v4 §5.2): boards V4RoomM, V4RoomCheckM, V4Room, V4RoomCheck.
   Values from docs/v4/reference/html/bf4.css ("the room, compact").
   ========================================================================== */

/* ---------- the stage ---------- */
.v4 .v4r-stage{padding-bottom:36px}
.v4 .v4r-top{padding-top:18px}
.v4 .v4r-head{display:grid;grid-template-columns:160px minmax(0,1fr) 160px;align-items:center;gap:24px;margin-top:20px;color:#fff}
.v4 .v4r-mid{text-align:center;min-width:0}
.v4 .v4r-item{font-size:40px;line-height:1.1;font-weight:400;margin:0;overflow-wrap:anywhere}
.v4 .v4r-amt{font-size:64px;line-height:1.05;margin-top:4px}
.v4 .v4r-status{margin:14px 0 0;font-size:16px;font-weight:600;line-height:1.35}
.v4 .v4r-seat{display:flex;flex-direction:column;align-items:center;gap:8px;font-size:17px;min-width:0;text-align:center}
.v4 .v4r-seat>span:last-child,.v4 .v4r-seat>a{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#fff}
.v4 .v4r-seat>a:hover{text-decoration:underline;text-underline-offset:3px}
.v4 .v4r-seat .av{width:96px;height:96px;font-size:30px}

/* 5 dots on a line, no labels: done = white, now = white + halo, next = outline */
.v4 .v4r-dots{display:flex;align-items:center;max-width:420px;margin:26px auto 0}
.v4 .v4r-dots i{width:10px;height:10px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.7)}
.v4 .v4r-dots i.d{background:#fff;box-shadow:none}
.v4 .v4r-dots i.n{background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.25)}
.v4 .v4r-dots s{flex:1;height:1.5px;background:rgba(255,255,255,.4);text-decoration:none}
.v4 .v4r-dots s.d{background:#fff}
.v4 .v4r-dots.is-off{opacity:.6}

/* your move, desktop: one tinted sheet, one row */
.v4 .v4r-move{max-width:760px;margin:30px auto 0;padding:16px 16px 16px 24px;display:flex;align-items:center;gap:16px}
.v4 .v4r-move-b{flex:1;min-width:0}
.v4 .v4r-move-t{font-family:var(--text);font-size:17px;font-weight:600;line-height:1.3;margin:0;letter-spacing:0}
.v4 .v4r-move-p{font-size:15px;margin:2px 0 0;line-height:1.35}
.v4 .v4r-move-big{font-size:32px;letter-spacing:.04em;line-height:1;white-space:nowrap}
.v4 .v4r-move-acts{display:flex;gap:16px;flex:none}
.v4 .v4r-move-acts form{display:flex}
.v4 .v4r-err{max-width:760px;margin:24px auto 0}

/* ---------- below the stage ---------- */
.v4 .v4r-below{margin-top:24px;display:flex;flex-direction:column;gap:16px}
.v4 .v4r-grid{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:16px;align-items:start}
.v4 .v4r-tl{padding:12px 28px}
.v4 .v4r-ev{display:flex;gap:12px;align-items:baseline;padding:12px 0;border-top:1px solid var(--line);font-size:15px;line-height:1.4}
.v4 .v4r-ev:first-child{border-top:0}
.v4 .v4r-ev .t{flex:1;min-width:0;color:var(--ink)}
.v4 .v4r-ev .t b{font-weight:inherit}
.v4 .v4r-ev time{font-size:13px;color:var(--sub);white-space:nowrap}
.v4 .v4r-more{margin:4px 0 10px;font-size:14px}
.v4 .v4r-deal{padding:8px 24px}
.v4 .v4r-kv{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:12px 0;border-top:1px solid var(--line);font-size:15px}
.v4 .v4r-kv:first-child{border-top:0}
.v4 .v4r-kv span{color:var(--sub)}
.v4 .v4r-kv b{font-weight:400;color:var(--ink)}
.v4 .v4r-kv.strong span,.v4 .v4r-kv.strong b{font-weight:600;color:var(--ink)}
.v4 .v4r-links{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px 20px;padding:2px 0 0;font-size:14px;font-weight:600}
.v4 .v4r-links a,.v4 .v4r-links button{color:var(--ink-2);background:none;border:0;padding:0;font:inherit;cursor:pointer}
.v4 .v4r-links a:hover,.v4 .v4r-links button:hover{color:var(--ink)}
.v4 .v4r-links .x{color:var(--coral)}
.v4 .v4r-links .x:hover{color:#9E3420}

/* the cards that only some rooms have */
.v4 .v4r-card{padding:24px 28px}
.v4 .v4r-files{padding:4px 24px}
.v4 .v4r-files .lrow .btn{flex:none}
.v4 .v4r-files-cap{padding:14px 4px 4px}
.v4 .v4r-secret{display:flex;align-items:center;gap:16px;padding:16px 24px}
.v4 .v4r-secret .t{color:var(--sub);font-size:15px}
.v4 .v4r-secret b{flex:1;min-width:0;font-size:24px;overflow-wrap:anywhere}
.v4 .v4r-next{padding:4px 24px}
.v4 .v4r-next .lrow[hidden]{display:none}

/* §7.2 after Create: a small white glass badge, one line, one button */
.v4 .v4r-badgecard{display:flex;align-items:center;gap:16px;padding:14px 14px 14px 16px}
.v4 .v4r-badgecard[hidden]{display:none}
.v4 .v4r-badge{flex:none;width:96px;height:56px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#8A6A4A,#3E5866);position:relative;overflow:hidden}
.v4 .v4r-badge img{width:62px;height:auto;padding:5px 9px;box-sizing:content-box;border-radius:999px;background:rgba(255,255,255,.86);
  box-shadow:inset 0 1px 0 #fff,0 4px 12px -4px rgba(0,0,0,.35)}
.v4 .v4r-badgecard-b{flex:1;min-width:0;display:flex;align-items:center;gap:16px}
.v4 .v4r-badgecard-t{flex:1;min-width:0;font-weight:600;font-size:16px;line-height:1.3}
.v4 .v4r-x{width:40px;height:40px;border-radius:50%;border:0;background:none;color:var(--sub);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;flex:none}
.v4 .v4r-x:hover{background:var(--paper-3);color:var(--ink)}

/* ---------- phones ---------- */
@media (max-width:760px){
  .v4 .v4r-stage{padding-bottom:22px}
  .v4 .v4r-head{display:flex;flex-wrap:wrap;align-items:center;gap:0 10px;margin-top:0;padding:4px 20px 0}
  .v4 .v4r-mid{display:contents}
  .v4 .v4r-item{order:1;width:100%;font-size:30px}
  .v4 .v4r-amt{order:2;width:100%;font-size:44px;margin-top:6px}
  .v4 .v4r-me{order:3;margin-top:26px}
  .v4 .v4r-dots{order:4;flex:1;margin:0;max-width:none;align-self:center;transform:translateY(-14px);margin-top:26px}
  .v4 .v4r-them{order:5;margin-top:26px}
  .v4 .v4r-status{order:6;width:100%;text-align:center;margin-top:14px;font-size:15px}
  .v4 .v4r-seat{font-size:15px;gap:8px;width:72px}
  .v4 .v4r-seat .av{width:56px;height:56px;font-size:18px}
  .v4 .v4r-below{margin-top:14px;gap:10px;padding:0 10px}
  .v4 .v4r-grid{grid-template-columns:minmax(0,1fr);gap:10px}
  .v4 .v4r-tl{padding:8px 18px}
  .v4 .v4r-deal{padding:6px 18px}
  .v4 .v4r-links{justify-content:center;padding-top:8px}
  .v4 .v4r-card{padding:20px}
  .v4 .v4r-files,.v4 .v4r-next{padding:4px 16px}
  .v4 .v4r-secret{padding:14px 16px;flex-wrap:wrap}
  .v4 .v4r-badgecard{gap:12px;padding:12px 6px 12px 12px;align-items:flex-start}
  .v4 .v4r-badgecard-b{flex-direction:column;align-items:flex-start;gap:8px}
  .v4 .v4r-badgecard-t{font-size:15px}
  .v4 .v4r-badge{width:72px;height:48px;border-radius:12px}
  .v4 .v4r-badge img{width:50px;padding:4px 7px}
  /* a move without a button (e.g. "Payment is not available yet"): one quiet card, no bar */
  .v4 .v4r-mmove{display:flex;flex-direction:column;gap:2px;padding:14px 18px}
  .v4 .v4r-mmove b{font-weight:600;font-size:16px}
  .v4 .v4r-mmove span{font-size:14px;color:var(--sub)}

  /* the sticky glass bar: title + one line, share as an icon, at most 2 buttons */
  body.v4r-page .actbar{left:10px;right:10px;bottom:calc(14px + env(safe-area-inset-bottom));min-height:0;border-radius:22px;gap:10px;padding:10px 10px 10px 18px}
  body.v4r-page .actbar .v4r-bar-t{flex:1;min-width:0}
  body.v4r-page .actbar .v4r-bar-t b{display:block;font-size:16px;font-weight:600;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  body.v4r-page .actbar .v4r-bar-t span{display:block;font-size:14px;color:var(--sub);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  body.v4r-page .actbar .btn{height:46px;padding:0 18px;flex:none}
  body.v4r-page .actbar .btn.line{padding:0 14px}
  body.v4r-page .actbar form{display:flex;flex:none}
  body.v4r-page .actbar .v4r-ic{width:44px;height:44px;background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
  body.v4r-page.has-actbar .v3-main{padding-bottom:96px}
}
@media (min-width:761px) and (max-width:1000px){
  .v4 .v4r-head{grid-template-columns:120px minmax(0,1fr) 120px;gap:16px}
  .v4 .v4r-seat .av{width:80px;height:80px;font-size:26px}
  .v4 .v4r-grid{grid-template-columns:minmax(0,1fr)}
  .v4 .v4r-move{flex-wrap:wrap}
  .v4 .v4r-links{justify-content:center}
}

/* assets/v4/parts/site.css */
/* ui_v4 §6 on the older pages (ui.php, body.v4-site): Founders and the error page get their own field */
.v4-site .p2-hero--sand{background-color:#6A4E34;
  background-image:-webkit-image-set(url('/assets/fields/umber-pine-16x9-sm.webp') 1x,url('/assets/fields/umber-pine-16x9.webp') 2x);
  background-image:image-set(url('/assets/fields/umber-pine-16x9-sm.webp') 1x,url('/assets/fields/umber-pine-16x9.webp') 2x)}
.v4-site .bf-errpage{position:relative;isolation:isolate;overflow:hidden;max-width:none;margin:10px 10px 0;border-radius:24px;color:#fff;
  padding:160px max(24px,calc((100% - 1152px)/2)) 56px;background:#84562E center/cover no-repeat;
  background-image:-webkit-image-set(url('/assets/fields/tobacco-slate-16x9-sm.webp') 1x,url('/assets/fields/tobacco-slate-16x9.webp') 2x);
  background-image:image-set(url('/assets/fields/tobacco-slate-16x9-sm.webp') 1x,url('/assets/fields/tobacco-slate-16x9.webp') 2x)}
.v4-site .bf-errpage::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(14,20,23,0) 50%,rgba(14,20,23,.42) 100%)}
.v4-site .bf-errpage h1{color:#fff}
.v4-site .bf-errpage p{color:rgba(255,255,255,.88)!important}
.v4-site .bf-errpage .btn.dark{background:#fff!important;color:#0E1417!important}
.v4-site .bf-errpage .btn.ghost{background:rgba(255,255,255,.16)!important;color:#fff!important;border-color:rgba(255,255,255,.4)!important;-webkit-backdrop-filter:blur(20px) saturate(1.7);backdrop-filter:blur(20px) saturate(1.7)}
@media (max-width:760px){
  .v4-site .p2-hero--sand{background-image:-webkit-image-set(url('/assets/fields/umber-pine-4x5-sm.webp') 1x,url('/assets/fields/umber-pine-4x5.webp') 2x);
    background-image:image-set(url('/assets/fields/umber-pine-4x5-sm.webp') 1x,url('/assets/fields/umber-pine-4x5.webp') 2x)}
  .v4-site .bf-errpage{padding:120px 20px 40px;
    background-image:-webkit-image-set(url('/assets/fields/tobacco-slate-4x5-sm.webp') 1x,url('/assets/fields/tobacco-slate-4x5.webp') 2x);
    background-image:image-set(url('/assets/fields/tobacco-slate-4x5-sm.webp') 1x,url('/assets/fields/tobacco-slate-4x5.webp') 2x)}
}

/* assets/v4/parts/trades.css */
/* Trades /app/ (app/v4-trades.php, §5.1) */
.v4 .v4-trades-stage{padding-bottom:28px}
.v4 .v4-trades-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:40px;align-items:end;min-height:200px}
.v4 .v4-trades-hello .h1{font-size:64px;line-height:1}
.v4 .v4-trades-top .v4-needs{align-self:end}
.v4 .v4-more{display:inline-block;margin:6px 0 12px;color:#fff;font-size:14px;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.v4 .v4-empty .nrow{border-top:0}
.v4 .v4-empty-cta{padding:0 0 16px}
.v4 .v4-below{margin-top:40px;max-width:1200px}
.v4 .v4-below .v4-tabs,.v4 .v4-below .v4-card{max-width:1152px;margin-left:auto;margin-right:auto}
.v4 .v4-tabs a .d{display:inline-block}
.v4 .trow .t>span{display:block}
.v4 .trow .t>span>span{display:inline}
.v4 .v4-none{padding:22px 4px}
.v4 .trow[hidden],.v4 .v4-none[hidden]{display:none}
@media (max-width:900px){.v4 .v4-trades-top{grid-template-columns:minmax(0,1fr);gap:20px;min-height:0}}
@media (max-width:760px){
  .v4 .v4-trades-hello .h1{font-size:34px}
  .v4 .v4-trades-stage{padding-bottom:10px}
  .v4 .v4-trades-top{gap:18px}
  .v4 .v4-needs{padding:2px 16px;margin:0 -6px}
  .v4 .v4-below{margin-top:24px}
  .v4 .v4-tabs{margin:0 6px 12px}
}

/* assets/glass/glass.css */
/* ==========================================================================
   Clear liquid glass only (switch glass_clear_only; docs/glass/PHASE0.md, decided 9 Oct 2026).
   Loaded last, only while the switch is on. Nothing here changes layout or sizes:
   only materials and text colours.
     A  panels on a field: clear glass at .36 white, ink text (Vilius, 9 Oct: the recommended option; .22 left Trades, the room, Money and Join under 4.5:1)
     B  things that float (menus, the phone menu, language, sheets, dialogs, the cookie banner):
        .26 white, blur 36, ink text, a light wash behind instead of a dark scrim
     fields: the stage scrim drops to .14 from 60 %
   Never a dark fill, not even as a fallback.
   ========================================================================== */
:root{
  --gc-bg:rgba(255,255,255,.16);
  --gc-filter:blur(36px) saturate(1.8);   /* the menus' stronger blur on every glass surface (Vilius, 9 Oct: "add that blur, it fixes everything") */
  --gc-edge:inset 0 1px 0 rgba(255,255,255,.55),inset 0 0 0 1px rgba(255,255,255,.18),inset 0 -1px 1px rgba(255,255,255,.1);
  --gc-shadow:0 10px 28px -14px rgba(15,21,25,.28);
  --gc-ink:#0E1417; --gc-ink2:rgba(14,20,23,.72); --gc-line:rgba(14,20,23,.12);
  --gc-float:rgba(255,255,255,.26);
  --gc-float-filter:blur(36px) saturate(1.8);
  --gc-float-edge:inset 0 1px 0 rgba(255,255,255,.75),inset 0 0 0 1px rgba(255,255,255,.4),0 24px 48px -20px rgba(15,21,25,.28);
  --gc-wash:rgba(247,248,250,.62);
}

/* ---------- A. panels on a field: clear glass .36, ink text ---------- */
html body .sheet,html body .sheet-glass,html body .pit-sheet,html body .pf-glass,html body .held2-msg--out,
html body .ask-mini,html body .p2-ex,html body .pv-card,html body .pv-snap,html body .a2-me-stats,html body .auth-quote{
  background:rgba(255,255,255,.36)!important;border-color:transparent!important;
  -webkit-backdrop-filter:var(--gc-filter)!important;backdrop-filter:var(--gc-filter)!important;
  box-shadow:var(--gc-edge),var(--gc-shadow)!important;color:var(--gc-ink)!important;text-shadow:none!important}
html body :is(.sheet,.sheet-glass,.pit-sheet,.pf-glass,.ask-mini,.p2-ex,.pv-card,.auth-quote) :is(h1,h2,h3,h4,p,b,strong,span,li,dt,dd,label,time,small,div,blockquote,cite,figcaption,em,i,a:not(.btn)){color:inherit;text-shadow:none}
html body :is(.sheet,.sheet-glass,.pit-sheet,.pf-glass,.ask-mini,.p2-ex,.pv-card,.auth-quote) :is(.muted,.cap,.eyebrow,.small,.lead,small,time,cite,.k,.ms,.sub){color:var(--gc-ink2)!important}
html body .v4 .v4-needs .nrow .t>span,html body .v4 .v4-totals .r span,html body .v4 .v4-acct-code .k,html body .v4.money-pg .money-sheet .muted{color:var(--gc-ink2)!important}
html body .v4.money-pg .money-sheet,html body .v4 .v4-more{color:var(--gc-ink)!important}
html body :is(.sheet,.sheet-glass,.pit-sheet) :is(.row-d,.nrow,.r+.r,hr){border-color:var(--gc-line)!important}
html body .v4 .v4-needs .nrow{border-top-color:var(--gc-line)}
html body .v4 .v4-totals .r+.r{border-top-color:var(--gc-line)}
/* buttons inside an ink panel: ink primary, light secondary */
html body :is(.sheet,.sheet-glass,.pit-sheet,.auth-quote) .btn.white{background:var(--gc-ink)!important;color:#fff!important}
html body :is(.sheet,.sheet-glass,.pit-sheet,.auth-quote) .btn.glassy,html body :is(.sheet,.sheet-glass,.pit-sheet) .chip.g{background:rgba(14,20,23,.06)!important;color:var(--gc-ink)!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html body :is(.sheet,.sheet-glass,.pit-sheet) .chip.w{background:var(--gc-ink)!important;color:#fff!important}
html body :is(.sheet,.sheet-glass,.pit-sheet) :focus-visible{outline-color:var(--gc-ink)!important}
/* chips on a field (the room's code, older chips): the same clear glass, ink text */
html body .chip.g,html body .v4-hdr.is-top .v4-codechip{background:rgba(255,255,255,.36)!important;color:var(--gc-ink)!important;
  -webkit-backdrop-filter:var(--gc-filter)!important;backdrop-filter:var(--gc-filter)!important;box-shadow:var(--gc-edge)!important}
html body .v3 .node i{background:rgba(255,255,255,.16)}

/* ---------- B. floating: menus, the phone menu, language, sheets, dialogs, the cookie banner ---------- */
html body :is(.v4-drawer,.v4-pop,.v3-pop,.v3-sheetpanel,.bf-language-popover,.bf-drawer-langlist,.bf-cc-card),
html body .v3 dialog.v3-dialog,html body .v3 dialog .sheet{
  background:var(--gc-float)!important;border-color:transparent!important;
  -webkit-backdrop-filter:var(--gc-float-filter)!important;backdrop-filter:var(--gc-float-filter)!important;
  box-shadow:var(--gc-float-edge)!important;color:var(--gc-ink)!important}
html body :is(.v4-drawer,.v4-pop,.v3-pop,.v3-sheetpanel,.bf-language-popover,.bf-drawer-langlist,.bf-cc-card) :is(a,button:not(.btn):not(.bf-cc-b),b,span,p,h2,h3,label,div){color:inherit}
html body :is(.v4-drawer,.v4-pop,.v3-pop,.v3-sheetpanel,.bf-cc-card) :is(.v,.ms,.mr,.meye,.cap,.muted,.bf-cc-txt span,.who span span,.v4-poph,.bf-lang-h){color:var(--sub,#5B6A74)!important}
html body :is(.v4-drawer,.v4-pop,.v3-pop,.v3-sheetpanel) :is(.hr,.mhr){background:rgba(14,20,23,.1)!important}
html body :is(.v4-drawer .go.on,.v4-pop .sub[aria-current="page"],.v4-drawer .sub[aria-current="page"],.v3-pop .mi[aria-current="page"],.v3-sheetpanel .mi[aria-current]){background:rgba(14,20,23,.06)!important}
html body :is(.v4-drawer,.v4-pop) :is(.go,.sub,.v4-dhead,.v4-langgrid button):hover{background:rgba(14,20,23,.05)}
html body :is(.v4-drawer,.v4-pop,.v3-pop,.v3-sheetpanel) :focus-visible{outline-color:var(--gc-ink)!important}
html body :is(.v4-drawer,.v4-pop) .who .av{background:var(--gc-ink)!important;color:#fff!important}
/* the selected language: an ink pill, white text */
html body .v4-langgrid button.on,html body .bf-language-popover [aria-current="true"],html body .bf-drawer-langlist [aria-current="true"],html body .v3-sheetpanel .mi[data-bf-language][aria-current]{background:var(--gc-ink)!important;color:#fff!important}
html body .v4-langgrid button.on *{color:#fff!important}
/* the buttons inside: ink primary (+ New trade, Start a trade), light secondary (Log in) */
html body :is(.v4-drawer,.v4-pop,.v3-pop,.v3-sheetpanel) .btn.white,html body .v4-drawer .cta1 .btn{background:var(--gc-ink)!important;color:#fff!important}
html body :is(.v4-drawer,.v4-pop,.v3-pop,.v3-sheetpanel) .btn.glassy{background:rgba(14,20,23,.06)!important;color:var(--gc-ink)!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html body .v3-sheetpanel .grab{background:rgba(14,20,23,.2)!important}
/* the cookie banner's buttons */
html body .bf-cc-card .bf-cc-b{color:var(--gc-ink)!important;background:rgba(14,20,23,.06)!important;border-color:transparent!important}
html body .bf-cc-card .bf-cc-b--fill{background:var(--gc-ink)!important;color:#fff!important}
html body .bf-cc-card a{color:var(--gc-ink)!important}
/* behind them: a light wash, never a dark scrim, and no blur (never glass on glass) */
html body :is(.v4-scrim,.v3-scrim,.bf-nav-drawer,.wom-sheet-backdrop,.bf-sheet-backdrop){background:var(--gc-wash)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
html body .v3 dialog.v3-dialog::backdrop{background:var(--gc-wash)!important}
/* the VM disc while its menu is open: ink on the light wash */
html body .v4-me[aria-expanded="true"]{background:var(--gc-ink)!important;color:#fff!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:none!important}

/* ---------- C. the badge chip on /@handle: clear glass, ink text, never an ink tint ---------- */
html body .bdg4-chip--ink{background:rgba(255,255,255,.36)!important}

/* ---------- fields: the colour and grain as they are ---------- */
html body .v3 .field>.scrim-b,html body .v3 .field>.scrim-b.strong,html body .v3 .field>.v3-fieldset>.scrim-b,html body.v3.v4 .field>.scrim-b{
  background:linear-gradient(180deg,rgba(14,20,23,0) 60%,rgba(14,20,23,.14) 100%)!important}
html body .v4-site .bf-errpage::before{background:linear-gradient(180deg,rgba(14,20,23,0) 60%,rgba(14,20,23,.14) 100%)!important}
/* the home hero keeps its gradient: without it the headline falls under 3:1 (docs/glass/PHASE0.md §3) */

/* ---------- reduced transparency, no backdrop-filter, low-end devices: solid white, ink text ---------- */
@media (prefers-reduced-transparency:reduce){
  html body :is(.sheet,.sheet-glass,.pit-sheet,.pf-glass,.auth-quote,.chip.g,.v4-drawer,.v4-pop,.v3-pop,.v3-sheetpanel,.bf-language-popover,.bf-drawer-langlist,.bf-cc-card,.glass,.frost,.actbar,.btn.glassy),
  html body .v3 dialog.v3-dialog{background:rgba(255,255,255,.94)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;color:var(--gc-ink)!important}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  html body :is(.sheet,.sheet-glass,.pit-sheet,.pf-glass,.auth-quote,.chip.g,.v4-drawer,.v4-pop,.v3-pop,.v3-sheetpanel,.bf-language-popover,.bf-drawer-langlist,.bf-cc-card){background:rgba(255,255,255,.94)!important;color:var(--gc-ink)!important}
}
html.v3-lite body :is(.sheet,.v3-pop,.v3-sheetpanel,.v4-drawer,.v4-pop){background:rgba(255,255,255,.94)!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;color:var(--gc-ink)!important}

/* assets/v4/layout.css */
/* ==========================================================================
   Layout fixes (switch layout_fixes_v4; docs/layout-fixes/PHASE0.md, decided 9 Oct 2026).
   Loaded after v4.css and glass.css only while the switch is on. Layout and CSS only.
   ========================================================================== */

/* ---------- 1. the footer stays at the bottom, with air above it ---------- */
html,body:has(> footer.v4-foot){height:auto}
body:has(> footer.v4-foot){min-height:100dvh;display:flex;flex-direction:column}
body:has(> footer.v4-foot) > main{flex:1 0 auto;padding-bottom:clamp(64px,8vh,120px)}
body:has(> footer.v4-foot) > footer.v4-foot{margin:0 10px 10px;flex:none}
/* the home page's own bottom padding gave way to the footer gap before; the same air applies now */
body:has(> footer.v4-foot) > main.shell{padding-bottom:clamp(64px,8vh,120px)!important}
/* v3 pages: v4.css zeroes .v3-main's bottom padding (body.v3.v4 .v3-main, 0,3,1), which beat the rule above and left
   the footer flush against the last card on long pages; this one is stronger */
body.v3.v4:has(> footer.v4-foot) > main.v3-main{padding-bottom:clamp(64px,8vh,120px)}
@media (max-width:760px){
  /* phones with the sticky action bar keep room for it under the footer */
  body.v3.v4.has-actbar:has(> footer.v4-foot) > footer.v4-foot{margin-bottom:calc(100px + env(safe-area-inset-bottom))}
  body.v4-newpage:has(> footer.v4-foot) > footer.v4-foot{margin-bottom:10px}
}

/* ---------- 2. the footer's content uses the width ---------- */
.v4-foot .in,.v4-foot .bl{max-width:1760px;width:100%;box-sizing:border-box;padding-inline:clamp(24px,4vw,72px)}
.v4-foot .in{margin:0 auto}
.v4-foot .bl{margin:0 auto;border-top:0;position:relative}
.v4-foot .bl::before{content:"";position:absolute;top:0;left:clamp(24px,4vw,72px);right:clamp(24px,4vw,72px);height:1px;background:rgba(255,255,255,.1)}
.v4-foot .legal{margin-left:auto}
@media (max-width:760px){
  .v4-foot .in{padding-inline:20px}
  .v4-foot .bl{padding-inline:20px;margin:0}
  .v4-foot .bl::before{left:20px;right:20px}
}

/* ---------- 3. one account pill, never glass on glass ---------- */
/* at rest on a field: one clear-glass pill (the header pill recipe), the disc 4 px inside */
.v3 .v3-hdr.is-top .acct,.bf-nav-shell.bf-v4.header--on-field:not(.bf-nav-scrolled) .bf-account-button{
  background:rgba(255,255,255,.16);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 0 0 1px rgba(255,255,255,.18);border:0}
.v3 .acct,.bf-v4 .bf-account-button{padding:4px 12px 4px 4px;height:40px}
/* inside the glass bar (scrolled) and on paper: no second pill */
.v3 .v3-hdr:not(.is-top) .acct,.bf-nav-shell.bf-v4.bf-nav-scrolled .bf-account-button,.bf-nav-shell.bf-v4:not(.header--on-field) .bf-account-button{
  background:transparent!important;box-shadow:none!important}
.v3 .v3-hdr:not(.is-top) .acct:hover,.v3 .v3-hdr:not(.is-top) .acct[aria-expanded="true"],
.bf-nav-shell.bf-v4.bf-nav-scrolled .bf-account-button:hover,.bf-nav-shell.bf-v4:not(.header--on-field) .bf-account-button:hover{background:rgba(14,20,23,.06)!important}
.v3 .v3-hdr.is-top .acct:hover,.v3 .v3-hdr.is-top .acct[aria-expanded="true"]{background:rgba(255,255,255,.12)}
/* the phone VM disc: in the scrolled bar it is the disc only, no blur of its own */
.v4-hdr:not(.is-top) .v4-me{-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}

/* ---------- 4. our own form messages (assets/v4/forms.js) ---------- */
.bf-ferr{display:block;margin-top:6px;font-size:13px;line-height:1.35;color:var(--coral,#C2412A);font-weight:500}
[aria-invalid="true"]:not([type=checkbox]):not([type=radio]){box-shadow:0 0 0 1px var(--coral,#C2412A)!important;border-color:var(--coral,#C2412A)!important}
.field-in.pre:has([aria-invalid="true"]){box-shadow:0 0 0 1px var(--coral,#C2412A)!important}
/* the trade code field reads as empty until something is typed */
input[name="trade_code"]::placeholder{color:var(--sub,#5B6A74);opacity:.55}
form[data-bf-code] button[type="submit"]:disabled,form[data-bf-code] .iconbtn:disabled{opacity:.4;cursor:not-allowed}

/* ---------- 5.3 New trade, phone: the bar sits in the form column and stops above "Got a code" ---------- */
.v4 .v4-newbar{display:none}
@media (max-width:760px){
  .v4 .v4-newform{position:relative}
  .v4 .v4-newbar{position:sticky;bottom:10px;z-index:5;display:flex;align-items:center;gap:10px;margin:8px -8px 12px;padding:10px 10px 10px 16px;border-radius:22px;
    background:rgba(255,255,255,.26);-webkit-backdrop-filter:blur(36px) saturate(1.8);backdrop-filter:blur(36px) saturate(1.8);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.75),inset 0 0 0 1px rgba(14,20,23,.06),0 12px 28px -14px rgba(15,21,25,.3);color:var(--ink)}
  .v4 .v4-newbar .grow{flex:1;min-width:0}
  .v4 .v4-newbar .t1{display:block;font-weight:600;font-size:16px;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .v4 .v4-newbar .t2{display:block;font-size:14px;color:var(--sub)}
  .v4 .v4-newbar .btn{flex:none}
}
@media (prefers-reduced-transparency:reduce){.v4 .v4-newbar{background:rgba(255,255,255,.94);-webkit-backdrop-filter:none;backdrop-filter:none}}

/* ---------- 5.4 Money, desktop: the two cards line up ---------- */
.v4.money-pg .money-grid{align-items:stretch}
.v4.money-pg .money-grid>*{align-self:stretch}

/* ---------- 5.1 trade rows: the item's photo or its first letter, not a "?" ---------- */
.v4 .trow .av.ph{background:var(--paper-3) center/cover no-repeat;border-radius:12px;color:transparent}
.v4 .trow .av.lt{background:var(--paper-3);color:var(--ink);font-family:var(--display);font-size:17px}

/* assets/v4/hero5.css */
/* home_hero_v5 (docs/home-hero-v5/PHASE0.md): a calmer home hero, the code entry in the header,
   and the home price panel as ink on light glass with one segmented control.
   Only loaded while the switch is on; every rule is scoped to a class that only exists then. */

/* ---------- the hero row: one white pill that leads, a quiet text link beside it ---------- */
body .hero-cta.h5-cta{flex-wrap:wrap;gap:24px;align-items:center}
body .hero-photo-mode .hero-cta.h5-cta .btn.dark.h5-go{background:#fff;color:#0F1519;border-color:#fff}
body .hero-cta.h5-cta .btn.h5-go::after{content:none!important;display:none!important}   /* never the shimmer */
body .hero-cta .h5-link{font:400 16px/1.4 var(--ff-body,'Instrument Sans',system-ui,sans-serif);color:#fff;text-decoration:none;
  text-underline-offset:4px;text-decoration-thickness:1px;border-radius:4px}
body .hero-cta .h5-link:hover,body .hero-cta .h5-link:focus-visible{text-decoration:underline}
body .hero-cta .h5-link:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media (max-width:700px){
  body .hero-cta.h5-cta{flex-direction:column;align-items:stretch;flex-wrap:nowrap;gap:14px}
  body .hero-cta.h5-cta .btn.h5-go{height:50px;padding:0 24px;justify-content:center;font-size:16px}
  body .hero-cta.h5-cta .btn.h5-go svg{width:16px;height:16px}
  body .hero-cta .h5-link{align-self:center;text-align:center}
}

/* ---------- "Have a code?" in the header ---------- */
.h5-codewrap{position:relative;display:inline-flex}
button.h5-codebtn{border:0;background:none;cursor:pointer;font-family:inherit}
.v3 .nav button.h5-codebtn{color:inherit}   /* the v3 header colours its row; the site header colours .bf-nav-login itself */
@media (max-width:760px){.h5-codewrap{display:none!important}}
.v4-pop.v4-pop-code{width:320px;padding:18px}
.h5-code{display:flex;flex-direction:column;gap:10px;margin:0}
.h5-code-l{font:500 14px/1.3 var(--ff-body,'Instrument Sans',system-ui,sans-serif)}
.h5-code-row{display:flex;align-items:center;gap:8px;padding:4px 4px 4px 16px;border-radius:999px;background:rgba(255,255,255,.55)}
.h5-code-row:focus-within{box-shadow:0 0 0 2px var(--gc-ink,#0E1417)}
.h5-code-row input{flex:1;min-width:0;height:40px;border:0;background:none;outline:none!important;padding:0;
  font:500 16px/1 var(--ff-body,'Instrument Sans',system-ui,sans-serif);letter-spacing:.08em;text-transform:uppercase;color:var(--gc-ink,#0E1417)}
.h5-code-row input::placeholder{color:rgba(14,20,23,.4);text-transform:none}
.h5-code-row button{flex:none;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:0;border-radius:50%;
  background:var(--gc-ink,#0E1417);color:#fff!important;cursor:pointer}
.h5-code-row button[disabled]{opacity:.4;cursor:default}
.h5-code-row button:focus-visible{outline:2px solid var(--gc-ink,#0E1417)!important;outline-offset:2px}
.h5-code+.bf-ferr{display:block;margin:8px 2px 0;font:400 13px/1.4 var(--ff-body,'Instrument Sans',system-ui,sans-serif);color:#B42318!important}
/* the phone menu: the same field, first thing in it */
.v4-drawer .h5-dcode{padding:8px 14px 16px;margin:0 0 6px;border-bottom:1px solid rgba(14,20,23,.1)}
.v4-drawer .h5-code-row{background:rgba(255,255,255,.7)}

/* ---------- the home price panel: ink on light glass ----------
   Measured on the amber field (docs/home-hero-v5/HANDOVER.md): the asked-for .22 panel, 72% label, 70% options
   and an ink track gave 2.9–4.3:1, so the panel is .30, the track a light well, the label and options 80% ink
   and every other line full ink; the glass whitens toward the bottom, where the field turns night-blue.
   4.5:1 or more everywhere (10th percentile of the ground). */
html body .price-sheet.sheet-glass.h5-ink{background:linear-gradient(180deg,rgba(255,255,255,.30) 0%,rgba(255,255,255,.30) 55%,rgba(255,255,255,.46) 100%)!important;color:var(--gc-ink,#0E1417)!important}
html body .price-sheet.h5-ink :is(p,span,b,div,small,.muted,.cap){color:var(--gc-ink,#0E1417)!important}
html body .price-sheet.h5-ink .price-in label{color:rgba(14,20,23,.8)!important}
html body .price-sheet.h5-ink .price-amount{gap:8px}
html body .price-sheet.h5-ink .price-amount span{color:var(--gc-ink,#0E1417)!important}
html body .price-sheet.h5-ink .price-amount input{height:52px;padding:0 16px;border:0!important;border-radius:16px;background:rgba(255,255,255,.55);box-shadow:none;
  font:500 24px/1 'Outfit','Outfit Fallback',var(--font-display,system-ui),sans-serif;font-variant-numeric:tabular-nums;color:var(--gc-ink,#0E1417)}
html body .price-sheet.h5-ink .price-amount input::placeholder{color:rgba(14,20,23,.35)}
html body .price-sheet.h5-ink .price-amount input:focus{outline:none!important;box-shadow:0 0 0 2px var(--gc-ink,#0E1417)}
/* one segmented control: a light track, the choice a white pill, no rings */
html body .price-sheet.h5-ink .price-split{gap:0;padding:4px;border-radius:999px;background:rgba(255,255,255,.3)}
html body .price-sheet.h5-ink .price-pill{flex:1 1 0;min-width:0;min-height:42px;padding:6px 8px;border:0!important;border-radius:999px;background:transparent!important;box-shadow:none;
  font:500 15px/1.15 var(--ff-body,'Instrument Sans',system-ui,sans-serif);white-space:normal;text-wrap:balance;color:rgba(14,20,23,.8)!important;
  outline:none;transition:background-color .15s,color .15s,box-shadow .15s}
html body .price-sheet.h5-ink .price-pill.on{background:#fff!important;color:var(--gc-ink,#0E1417)!important;font-weight:600;box-shadow:0 1px 2px rgba(14,20,23,.12)}
html body .price-sheet.h5-ink .price-pill:focus{outline:none!important}
html body .price-sheet.h5-ink .price-pill:focus-visible{outline:2px solid var(--gc-ink,#0E1417)!important;outline-offset:2px}

/* the same panel on a dark field (hero5.js measured it): white text, the same shapes */
html body .price-sheet.h5-ink.h5-light{color:#fff!important}
html body .price-sheet.h5-ink.h5-light :is(h1,h2,h3,p,b,span,label,div){color:#fff!important}
html body .price-sheet.h5-ink.h5-light .price-in label{color:rgba(255,255,255,.78)!important}
html body .price-sheet.h5-ink.h5-light .price-amount input{background:rgba(255,255,255,.14);color:#fff}
html body .price-sheet.h5-ink.h5-light .price-amount input::placeholder{color:rgba(255,255,255,.5)}
html body .price-sheet.h5-ink.h5-light .price-amount input:focus{box-shadow:0 0 0 2px #fff}
html body .price-sheet.h5-ink.h5-light .price-split{background:rgba(255,255,255,.14)}
html body .price-sheet.h5-ink.h5-light .price-pill{color:rgba(255,255,255,.82)!important}
html body .price-sheet.h5-ink.h5-light .price-pill.on{background:#fff!important;color:var(--gc-ink,#0E1417)!important}
html body .price-sheet.h5-ink.h5-light .price-pill:focus-visible{outline-color:#fff!important}
@media (prefers-reduced-motion:reduce){html body .price-sheet.h5-ink .price-pill{transition:none}}

/* New trade: the sell side's longer words ("Pirkėjas moka") fit a 375 phone, and wrap rather than clip on a narrower one */
.v4-payer[data-h5-order] button{padding:4px 4px;height:auto;min-height:44px;white-space:normal;line-height:1.15;text-wrap:balance}

/* assets/v4/nt5.css */
/* new_trade_v5 (docs/new-trade-v5/PHASE0.md): New trade, one form + one summary card + one button.
   Only loaded while the switch is on; every rule is scoped to .nt5-* (only printed then). */

/* the hero: the title and Selling | Buying, nothing else */
.v4 .v4-new-top:not(:has(.v4-totals)){grid-template-columns:minmax(0,1fr)}

/* desktop: the form 1fr, the summary 400 px */
.v4 .v4-newgrid:has(> .nt5-side){grid-template-columns:minmax(0,1fr) 400px;gap:24px}
.v4 .nt5-side{position:sticky;top:112px;align-self:start;display:flex;flex-direction:column;gap:14px}
@media (max-width:1100px){.v4 .v4-newgrid:has(> .nt5-side){grid-template-columns:minmax(0,1fr) 360px}}
@media (max-width:900px){.v4 .v4-newgrid:has(> .nt5-side){grid-template-columns:minmax(0,1fr)}.v4 .nt5-side{position:static}}

/* the side's words follow Selling | Buying */
.v4 [data-mode="buy"] .nt5-side .s,.v4 [data-mode="sale"] .nt5-side .b{display:none}
.v4 [data-mode="buy"] .nt5-badge,.v4 [data-mode="sale"] .nt5-code{display:none}

/* the summary card */
.v4 .nt5-sum{border-radius:24px;padding:24px}
.v4 .nt5-src{display:none!important}
.v4 .nt5-empty{margin:0 0 20px;font-size:15px;line-height:1.45;color:var(--sub)}
.v4 .nt5-empty[hidden],.v4 .nt5-rows[hidden]{display:none}
.v4 .nt5-rows{margin:0 0 20px;padding:0}
.v4 .nt5-rows .r{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:7px 0;font-size:16px;color:var(--ink)}
.v4 .nt5-rows dt{min-width:0}
.v4 .nt5-rows dd{margin:0;flex:none;font-family:'Outfit','Outfit Fallback',var(--display),sans-serif;font-weight:500;font-variant-numeric:tabular-nums}
.v4 .nt5-rows .note{font-size:14px;color:var(--sub)}
.v4 .nt5-rows .tot{margin-top:8px;padding-top:15px;border-top:1px solid var(--line)}
.v4 .nt5-rows .tot dt{font-weight:600}
.v4 .nt5-rows .tot dd{font-weight:600;font-size:22px;line-height:1}
.v4 .nt5-sum .nt5-go{width:100%;height:54px;font-size:16px}
.v4 .nt5-sum .cap{margin:12px 0 0;font-size:13px;line-height:1.4;color:var(--sub);text-align:center}

/* one quiet link under it: no card, no border */
.v4 .nt5-link{display:block;align-self:flex-start;padding:6px 4px;margin:0 0 0 20px;border:0;background:none;
  font:500 15px/1.35 var(--text,'Instrument Sans',system-ui,sans-serif);color:var(--ink);text-decoration:none;text-align:left;cursor:pointer;border-radius:6px}
.v4 .nt5-link:hover,.v4 .nt5-link:focus-visible{text-decoration:underline;text-underline-offset:3px}
.v4 .nt5-code{display:flex;flex-direction:column;gap:10px}
.v4 .nt5-codeform{display:flex;align-items:center;gap:8px;padding:4px 4px 4px 18px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.v4 .nt5-codeform[hidden]{display:none}
.v4 .nt5-codeform:focus-within{box-shadow:inset 0 0 0 2px var(--ink)}
.v4 .nt5-codeform input{flex:1;min-width:0;height:44px;border:0;background:none;outline:none;padding:0;font:500 16px/1 var(--text,'Instrument Sans',system-ui,sans-serif);
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.v4 .nt5-codeform input::placeholder{color:var(--sub);text-transform:none}
.v4 .nt5-codeform button{flex:none;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:0;border-radius:50%;background:var(--ink);color:#fff;cursor:pointer}
.v4 .nt5-codeform button[disabled]{opacity:.4;cursor:default}
.v4 .nt5-code .bf-ferr{margin:0 0 0 20px}
.v4 .nt5-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* phone: the summary is the sticky bar (layout.css §5.3 places it); one line + Create */
@media (max-width:760px){
  .v4 .nt5-side{gap:10px;padding:4px 0 0}
  .v4 .nt5-link{margin-left:16px}
  .v4 .v4-newbar .nt5-bar{font-size:17px;font-weight:600}
  .v4 .v4-newbar .nt5-bar.is-empty{font-size:15px;font-weight:500;color:var(--sub)}
}

/* assets/v4/band2.css */
/* closing_band_v2 (docs/closing-band-v2/PHASE0.md): the home page's "Nobody has to go first." band on the
   dusk-ember field instead of ink, with the grain at 1:1 and the 15 000 badge above the line.
   Same size, margins and radius as before (home.css); only loaded while the switch is on.
   The field is anchored to its dark lower edge so the white text sits on rust and brown, not on the sky. */
.v4h-cta.cb2{background:#6b3a22 url(/assets/fields/dusk-ember-16x9.webp) 50% 100%/cover no-repeat;padding-top:44px}
/* stacking inside the card (isolation:isolate, overflow:hidden in home.css): field < scrim < grain < content */
.v4h-cta.cb2::before{content:"";position:absolute;inset:0;z-index:-3;pointer-events:none;
  background:linear-gradient(180deg,rgba(14,20,23,0) 60%,rgba(14,20,23,.14) 100%)}
.v4h-cta.cb2>.grain{opacity:1;border-radius:inherit}
.v4h-cta.cb2 .cb2-badge{display:block;width:200px;height:auto;margin:0 auto 18px}
@media (max-width:760px){
  .v4h-cta.cb2{background-image:url(/assets/fields/dusk-ember-4x5.webp);background-size:170% auto;background-position:85% 100%;padding-top:32px}
  .v4h-cta.cb2 .cb2-badge{width:160px;margin:0 0 16px}
}