/*
 * The organisation's billing pages at id (plan TB, slice TB2), carried from the approved mockups (reji/ui/html/tb/build-mockups.py: plans.html,
 * pay.html, since TB3 subscription.html, since TB4 invoice.html) by a script that scoped each rule under .tb-id, so the console's pieces of the same name (billing.css) stay as they are. The tokens
 * below map the mockups' names onto the app's, as console.css does; --pc is a product's colour, --pcd its lighter companion.
 */
@property --tb-a { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
.tb-id {
    --bg: var(--background);
    --surface: var(--card);
    --surface-2: var(--muted);
    --text-1: var(--foreground);
    --text-2: var(--muted-foreground);
    --text-3: var(--quiet);
    --accent: var(--primary);
    --on-accent: var(--primary-foreground);
    --border-accent: var(--accent-foreground);
    --emerald: var(--success);
    --amber: var(--warning);
    --rose: var(--destructive);
    --slate: var(--muted-foreground);
    --violet: #7c3aed;
    --accent-dim: color-mix(in srgb, var(--primary) 12%, transparent);
    --emerald-dim: color-mix(in srgb, var(--success) 12%, transparent);
    --amber-dim: color-mix(in srgb, var(--warning) 14%, transparent);
    --rose-dim: color-mix(in srgb, var(--destructive) 12%, transparent);
    --pc: var(--primary);
}
.tb-id, .tb-id [style*='--pc'] { --pcd: color-mix(in srgb, var(--pc) 55%, #fff); }
.tb-id .tb-eb { font: 600 10.5px var(--font-mono); letter-spacing: .09em; text-transform: uppercase; color: var(--text-3); }
.tb-id .tb-pic { width: 40px; height: 40px; border-radius: 11px; flex: none; }
.tb-id .cn-btn { justify-content: center; }
.tb-id .cn-btn[disabled] { opacity: .6; cursor: default; }
.tb-id .tb-band {position:relative; overflow:clip; display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:24px; align-items:end; padding:28px 28px 26px; border-radius:22px;
    color:#fff; background:radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--pcd) 70%, transparent), transparent 55%),
    linear-gradient(135deg, var(--pc), color-mix(in srgb, var(--pc) 45%, #050816)); margin-bottom:22px; box-shadow:0 24px 50px -30px var(--pc); }
.tb-id .tb-band::before {content:''; position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.14) 1px, transparent 1.4px); background-size:18px 18px;
    -webkit-mask-image:linear-gradient(110deg, transparent 35%, #000 80%); mask-image:linear-gradient(110deg, transparent 35%, #000 80%); pointer-events:none; }
.tb-id .tb-band::after {content:''; position:absolute; right:-80px; bottom:-120px; width:340px; height:340px; border-radius:50%; border:44px solid rgba(255,255,255,.06); pointer-events:none; }
.tb-id .tb-band > * {position:relative; z-index:1; }
.tb-id .tb-band .id {display:flex; gap:16px; align-items:center; }
.tb-id .tb-band .id .tb-pic {width:58px; height:58px; border-radius:16px; box-shadow:0 0 0 4px rgba(255,255,255,.16), 0 14px 30px -12px rgba(0,0,0,.5); }
.tb-id .tb-band .tb-eb {color:rgba(255,255,255,.7); }
.tb-id .tb-band h1 {margin:4px 0 2px; font-size:30px; line-height:1.08; font-weight:900; letter-spacing:-.03em; }
.tb-id .tb-band h1 em {font-style:normal; color:color-mix(in srgb, var(--pcd) 55%, #fff); }
.tb-id .tb-band p {margin:12px 0 0; color:rgba(255,255,255,.82); font-size:14px; max-width:540px; }
.tb-id .tb-band .side {display:grid; gap:12px; justify-items:end; }
@media (max-width:760px) {
  .tb-id .tb-band {grid-template-columns:minmax(0, 1fr); padding:22px 20px; }
  .tb-id .tb-band .side {justify-items:start; }
  .tb-id .tb-band h1 {font-size:24px; }
 }
.tb-id .tb-period {position:relative; display:inline-grid; grid-template-columns:1fr 1fr; padding:4px; border-radius:999px; background:rgba(255,255,255,.14);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.2); }
.tb-id .tb-period button {position:relative; z-index:1; min-width:92px; padding:8px 16px; border:0; background:none; color:rgba(255,255,255,.85); font:700 13px var(--font-sans); cursor:pointer; border-radius:999px; transition:color .25s; }
.tb-id .tb-period button.on {color:#0b1230; }
.tb-id .tb-period .thumb {position:absolute; top:4px; bottom:4px; left:4px; width:calc(50% - 4px); border-radius:999px; background:#fff; box-shadow:0 6px 16px -6px rgba(0,0,0,.4);
    transition:transform .35s cubic-bezier(.3,1.4,.5,1); }
.tb-id .tb-period[data-on="y"] .thumb {transform:translateX(100%); }
.tb-id .tb-period.plain {background:var(--surface-2); box-shadow:inset 0 0 0 1px var(--border); }
.tb-id .tb-period.plain button {color:var(--text-2); }
.tb-id .tb-period.plain button.on {color:var(--text-1); }
.tb-id .tb-period.plain .thumb {background:var(--surface); box-shadow:0 4px 12px -6px rgba(0,0,0,.35), 0 0 0 1px var(--border); }
.tb-id .tb-sticker {display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:999px; font:800 12px var(--font-sans); color:#3a2a00;
    background:linear-gradient(135deg, #ffe08a, #f5b83d); transform:rotate(-4deg); box-shadow:0 8px 18px -8px rgba(245,184,61,.8); }
.tb-id .tb-stairs {position:relative; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px; align-items:end; padding-top:40px; }
.tb-id .tb-stepwrap {position:relative; }
.tb-id .tb-cap {position:absolute; top:6px; left:0; width:calc((100% - 32px) / 3); font-size:21px; font-weight:900; line-height:1.15; letter-spacing:-.025em; color:var(--text-1); }
.tb-id .tb-cap span {display:block; margin-top:6px; font-size:13px; font-weight:500; letter-spacing:0; color:var(--text-2); }
@media (max-width:980px) {
  .tb-id .tb-cap {position:static; width:auto; margin-bottom:8px; }
 }
.tb-id .tb-step {position:relative; display:flex; flex-direction:column; gap:12px; padding:22px 20px 20px; border:1px solid var(--border); border-radius:20px; background:var(--surface);
    overflow:clip; isolation:isolate; }
.tb-id .tb-step::after {content:''; position:absolute; left:0; right:0; bottom:0; height:var(--fill, 20%); z-index:-1;
    background:linear-gradient(to top, color-mix(in srgb, var(--pc) 16%, transparent), transparent); }
.tb-id .tb-step.s1 {min-height:380px; --fill:18%; }
.tb-id .tb-step.s2 {min-height:430px; --fill:34%; }
.tb-id .tb-step.s3 {min-height:480px; --fill:50%; }
.tb-id .tb-step.rec {border:2px solid transparent; background:linear-gradient(var(--surface), var(--surface)) padding-box,
    conic-gradient(from var(--tb-a), var(--pc), var(--pcd), color-mix(in srgb, var(--pc) 10%, transparent) 45%, var(--pcd) 75%, var(--pc)) border-box; animation:tb-spin 7s linear infinite; }
@keyframes tb-spin { to { --tb-a:360deg; } }
.tb-id .tb-step .lv {display:flex; gap:4px; }
.tb-id .tb-step .lv i {width:20px; height:5px; border-radius:9px; background:var(--surface-2); }
.tb-id .tb-step .lv i.on {background:var(--pc); }
.tb-id .tb-step h3 {margin:0; font-size:20px; font-weight:900; letter-spacing:-.025em; color:var(--text-1); }
.tb-id .tb-step .for {margin-top:-8px; font-size:13px; color:var(--text-2); }
.tb-id .tb-price {display:flex; align-items:baseline; flex-wrap:wrap; gap:2px 8px; }
.tb-id .tb-price b {font-size:32px; font-weight:900; letter-spacing:-.035em; color:var(--text-1); white-space:nowrap; font-variant-numeric:tabular-nums; }
.tb-id .tb-price span {font-size:13px; color:var(--text-2); }
.tb-id .tb-price s {flex-basis:100%; color:var(--text-3); font-size:12.5px; }
.tb-id .tb-price .off {padding:2px 8px; border-radius:99px; font:800 11px var(--font-sans); color:#fff; background:var(--emerald); }
.tb-id .tb-tax {margin-top:-8px; font-size:11.5px; color:var(--text-3); }
.tb-id .tb-feat {list-style:none; margin:2px 0 0; padding:0; display:grid; gap:8px; font-size:13px; color:var(--text-1); }
.tb-id .tb-feat li {display:flex; gap:9px; align-items:flex-start; }
.tb-id .tb-feat i {width:16px; margin-top:2px; text-align:center; color:color-mix(in srgb, var(--pc) 80%, var(--text-1)); }
.tb-id .tb-feat li.new b {font-weight:800; }
.tb-id .tb-feat li.new::after {content:attr(data-new); margin-left:auto; padding:1px 7px; border-radius:99px; font:700 10px var(--font-mono);
    color:color-mix(in srgb, var(--pc) 80%, var(--text-1)); background:color-mix(in srgb, var(--pc) 13%, transparent); }
.tb-id .tb-step .go {margin-top:auto; }
.tb-id .tb-step .go .cn-btn {width:100%; justify-content:center; }
.tb-id .tb-here {position:absolute; top:-34px; left:50%; transform:translateX(-50%); z-index:2; display:inline-flex; align-items:center; gap:7px; padding:4px 12px 4px 4px;
    border-radius:999px; background:var(--text-1); color:var(--bg); font:700 12px var(--font-sans); white-space:nowrap; box-shadow:0 10px 24px -10px rgba(0,0,0,.5); }
.tb-id .tb-here::after {content:''; position:absolute; left:50%; bottom:-5px; width:10px; height:10px; background:var(--text-1); transform:translateX(-50%) rotate(45deg); z-index:-1; }
.tb-id .tb-flag {position:absolute; top:16px; right:-36px; transform:rotate(35deg); padding:4px 42px; font:800 10px var(--font-sans); letter-spacing:.06em; text-transform:uppercase; color:#fff; background:var(--pc); }
@media (max-width:980px) {
  .tb-id .tb-stairs {grid-template-columns:minmax(0, 1fr); gap:46px; }
  .tb-id .tb-step.s1, .tb-id .tb-step.s2, .tb-id .tb-step.s3 {min-height:0; }
 }
.tb-id .tb-delta {display:grid; grid-template-columns:minmax(0, 1.25fr) minmax(0, 1fr); gap:24px; align-items:center; margin-top:26px; padding:24px; border-radius:22px;
    border:1px solid var(--border); background:linear-gradient(135deg, color-mix(in srgb, var(--pc) 8%, var(--surface)), var(--surface)); }
.tb-id .tb-delta h3 {margin:4px 0 14px; font-size:19px; font-weight:900; letter-spacing:-.02em; color:var(--text-1); }
.tb-id .tb-gains {display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
.tb-id .tb-gain {display:flex; gap:11px; align-items:flex-start; padding:12px; border-radius:14px; background:var(--surface); border:1px solid var(--border); }
.tb-id .tb-gain i {flex:none; width:34px; height:34px; border-radius:10px; display:grid; place-items:center; color:#fff; background:linear-gradient(135deg, var(--pc), var(--pcd)); }
.tb-id .tb-gain b {display:block; font-size:13.5px; color:var(--text-1); }
.tb-id .tb-gain span {font-size:12px; color:var(--text-2); }
@media (max-width:860px) {
  .tb-id .tb-delta {grid-template-columns:minmax(0, 1fr); }
  .tb-id .tb-gains {grid-template-columns:minmax(0, 1fr); }
 }
.tb-id .tb-gift {display:grid; grid-template-columns:auto minmax(0, 1fr); gap:30px; align-items:center; padding:32px; border-radius:22px; border:1px dashed color-mix(in srgb, var(--pc) 45%, var(--border));
    background:radial-gradient(80% 120% at 0% 0%, color-mix(in srgb, var(--pc) 11%, transparent), transparent 60%), var(--surface); }
.tb-id .tb-gift .orb {width:120px; height:120px; border-radius:50%; display:grid; place-items:center; font-size:46px; color:#fff;
    background:conic-gradient(from 200deg, var(--pc), var(--pcd), var(--pc)); box-shadow:0 0 0 12px color-mix(in srgb, var(--pc) 10%, transparent), 0 0 0 26px color-mix(in srgb, var(--pc) 5%, transparent); }
.tb-id .tb-gift h2 {margin:0 0 6px; font-size:24px; font-weight:900; letter-spacing:-.025em; color:var(--text-1); }
.tb-id .tb-gift p {margin:0 0 16px; color:var(--text-2); max-width:560px; }
.tb-id .tb-facts {display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; }
.tb-id .tb-facts div {padding:12px 14px; border-radius:14px; background:var(--surface-2); font-size:12.5px; color:var(--text-2); }
.tb-id .tb-facts b {display:block; font-size:14px; color:var(--text-1); margin-bottom:2px; }
.tb-id .tb-facts i {color:color-mix(in srgb, var(--pc) 80%, var(--text-1)); margin-bottom:8px; display:block; }
@media (max-width:760px) {
  .tb-id .tb-gift {grid-template-columns:minmax(0, 1fr); padding:22px; }
  .tb-id .tb-gift .orb {width:84px; height:84px; font-size:32px; }
  .tb-id .tb-facts {grid-template-columns:minmax(0, 1fr); }
 }
.tb-id .tb-pay {display:grid; grid-template-columns:minmax(0, 1fr) 390px; gap:28px; align-items:start; }
@media (max-width:1060px) {
  .tb-id .tb-pay {grid-template-columns:minmax(0, 1fr); }
 }
.tb-id .tb-ticket {position:relative; border-radius:22px; background:var(--surface); box-shadow:0 30px 60px -36px rgba(10, 20, 50, .55), 0 0 0 1px var(--border); }
.tb-id .tb-ticket .top {position:relative; overflow:clip; padding:20px 22px 18px; border-radius:22px 22px 0 0; color:#fff; background:linear-gradient(135deg, var(--pc), color-mix(in srgb, var(--pc) 50%, #050816)); }
.tb-id .tb-ticket .top::after {content:''; position:absolute; right:-40px; top:-60px; width:180px; height:180px; border-radius:50%; border:30px solid rgba(255,255,255,.07); }
.tb-id .tb-ticket .top .id {display:flex; gap:12px; align-items:center; position:relative; z-index:1; }
.tb-id .tb-ticket .top .tb-pic {width:42px; height:42px; border-radius:12px; box-shadow:0 0 0 3px rgba(255,255,255,.18); }
.tb-id .tb-ticket .top b {display:block; font-size:17px; font-weight:900; letter-spacing:-.02em; }
.tb-id .tb-ticket .top span {font-size:12.5px; color:rgba(255,255,255,.8); }
.tb-id .tb-span {position:relative; z-index:1; margin-top:16px; }
.tb-id .tb-span .bar {position:relative; height:8px; border-radius:9px; background:rgba(255,255,255,.18); }
.tb-id .tb-span .bar i {position:absolute; inset:0 auto 0 0; border-radius:9px; background:#fff; }
.tb-id .tb-span .ends {display:flex; justify-content:space-between; margin-top:7px; font:600 11px var(--font-mono); color:rgba(255,255,255,.85); }
.tb-id .tb-ticket .body {padding:18px 22px 4px; }
.tb-id .tb-lines {width:100%; border-collapse:collapse; font-size:13.5px; }
.tb-id .tb-lines td {padding:6px 0; color:var(--text-2); }
.tb-id .tb-lines td:last-child {text-align:end; color:var(--text-1); font-variant-numeric:tabular-nums; white-space:nowrap; }
.tb-id .tb-lines tr.sub td {padding:2px 0; font-size:12px; color:var(--text-3); }
.tb-id .tb-lines tr.sub td:last-child {color:var(--text-2); }
.tb-id .tb-lines tr.credit td, .tb-id .tb-lines tr.credit td:last-child {color:var(--emerald); font-weight:700; }
.tb-id .tb-perf {position:relative; height:26px; margin:6px 0; }
.tb-id .tb-perf::before {content:''; position:absolute; left:22px; right:22px; top:50%; border-top:2px dashed var(--border); }
.tb-id .tb-perf i {position:absolute; top:50%; width:26px; height:26px; margin-top:-13px; border-radius:50%; background:var(--bg); }
.tb-id .tb-perf i {box-shadow:inset 0 0 0 1px var(--border); }
.tb-id .tb-perf i:first-child {left:-13px; clip-path:inset(-2px -2px -2px 50%); }
.tb-id .tb-perf i:last-child {right:-13px; clip-path:inset(-2px 50% -2px -2px); }
.tb-id .tb-ticket .stub {padding:4px 22px 22px; }
.tb-id .tb-total {display:flex; justify-content:space-between; align-items:baseline; gap:12px; }
.tb-id .tb-total span {font-size:13px; color:var(--text-2); }
.tb-id .tb-total b {font-size:30px; font-weight:900; letter-spacing:-.035em; color:var(--text-1); font-variant-numeric:tabular-nums; }
.tb-id .tb-ticket .stub .cn-btn {width:100%; justify-content:center; margin-top:14px; padding-top:12px; padding-bottom:12px; font-size:14px; }
.tb-id .tb-ticket .fine {margin-top:10px; font-size:11.5px; color:var(--text-3); text-align:center; }
.tb-id .tb-ticket.dim .top {filter:saturate(.2) brightness(.92); }
.tb-id .tb-ticket.dim .tb-lines, .tb-id .tb-ticket.dim .tb-total {opacity:.55; }
.tb-id .tb-ticket .body {position:relative; }
.tb-id .tb-ticket .body.stamped {padding-bottom:74px; }
.tb-id .tb-stamp {position:absolute; z-index:3; left:26px; bottom:12px; padding:7px 14px; border:3px solid currentColor; border-radius:10px; font:900 19px var(--font-mono);
    letter-spacing:.14em; text-transform:uppercase; transform:rotate(-12deg); box-shadow:inset 0 0 0 2px var(--surface), inset 0 0 0 4px currentColor;
    background:color-mix(in srgb, currentColor 8%, var(--surface)); animation:tb-stamp .45s cubic-bezier(.2,1.6,.4,1) both .25s; }
.tb-id .tb-stamp small {display:block; font-size:9.5px; letter-spacing:.1em; text-align:center; }
.tb-id .tb-stamp.paid {color:var(--emerald); }
.tb-id .tb-stamp.no {color:var(--rose); }
.tb-id .tb-stamp.wait {color:var(--amber); border-style:dashed; animation:none; }
@keyframes tb-stamp { from { opacity:0; transform:rotate(-12deg) scale(1.8); } to { opacity:1; transform:rotate(-12deg) scale(1); } }
.tb-id .tb-howto h2 {margin:0 0 4px; font-size:24px; font-weight:900; letter-spacing:-.03em; color:var(--text-1); }
.tb-id .tb-howto .lead {margin:0 0 20px; color:var(--text-2); }
.tb-id .tb-q {margin-bottom:22px; }
.tb-id .tb-q > .tb-eb {display:block; margin-bottom:10px; }
.tb-id .tb-methods {display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px; }
.tb-id .tb-method {position:relative; display:grid; gap:12px; padding:16px; border-radius:18px; border:1.5px solid var(--border); background:var(--surface); text-align:start; cursor:pointer; color:inherit; font:inherit; }
.tb-id .tb-method.on {border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-dim); }
.tb-id .tb-method .tick {position:absolute; top:12px; right:12px; z-index:2; width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font-size:11px; color:#fff; background:var(--accent); }
.tb-id .tb-method:not(.on) .tick {background:var(--surface); box-shadow:inset 0 0 0 1.5px var(--border); color:transparent; }
.tb-id .tb-method b {font-size:15px; color:var(--text-1); }
.tb-id .tb-method span {font-size:12.5px; color:var(--text-2); }
.tb-id .tb-momo-art {display:flex; gap:12px; align-items:center; min-height:113px; }
.tb-id .tb-momo-art .ph {width:56px; height:56px; border-radius:16px; display:grid; place-items:center; font-size:26px; color:#fff; background:linear-gradient(135deg, #f5b83d, #d1782a); }
.tb-id .tb-nets {display:flex; gap:6px; flex-wrap:wrap; }
.tb-id .tb-nets i {font-style:normal; padding:3px 8px; border-radius:7px; font:700 10.5px var(--font-sans); color:#fff; }
@media (max-width:620px) {
  .tb-id .tb-methods {grid-template-columns:minmax(0, 1fr); }
 }
.tb-id .tb-card {position:relative; flex:none; width:260px; max-width:100%; aspect-ratio:1.586; border-radius:14px; color:#fff; overflow:clip;
    background:radial-gradient(120% 100% at 100% 0%, #5b6fd6 0%, transparent 55%), linear-gradient(135deg, #1b2347, #2c3a78 60%, #12183a); box-shadow:0 18px 30px -18px rgba(18, 24, 58, .9); }
.tb-id .tb-card::after {content:''; position:absolute; inset:0; background:linear-gradient(115deg, transparent 40%, rgba(255,255,255,.14) 50%, transparent 60%); }
.tb-id .tb-card .chip {position:absolute; left:16px; top:16px; width:34px; height:25px; border-radius:6px; background:linear-gradient(135deg, #f7e1a1, #c79b3b); box-shadow:inset 0 0 0 1px rgba(0,0,0,.15); }
.tb-id .tb-card .wave {position:absolute; top:18px; right:16px; font-size:15px; opacity:.8; transform:rotate(90deg); }
.tb-id .tb-card .no {position:absolute; left:16px; bottom:36px; font:600 14px var(--font-mono); letter-spacing:.12em; white-space:nowrap; }
.tb-id .tb-card .nm {position:absolute; left:16px; bottom:14px; font:600 9px var(--font-mono); letter-spacing:.1em; opacity:.85; text-transform:uppercase; }
.tb-id .tb-card .ex {position:absolute; right:64px; bottom:14px; font:600 9.5px var(--font-mono); opacity:.85; }
.tb-id .tb-card .br {position:absolute; right:14px; bottom:9px; font:italic 900 17px var(--font-sans); letter-spacing:-.02em; }
.tb-id .tb-card.sm {width:170px; border-radius:11px; }
.tb-id .tb-card.sm .chip {left:12px; top:12px; width:24px; height:18px; }
.tb-id .tb-card.sm .no {font-size:10px; bottom:26px; left:12px; }
.tb-id .tb-card.sm .nm {display:none; }
.tb-id .tb-card.sm .ex {bottom:9px; left:12px; right:auto; font-size:8.5px; }
.tb-id .tb-card.sm .br {font-size:13px; bottom:5px; }
.tb-id .tb-card.sm .wave {top:12px; right:12px; font-size:12px; }
.tb-id .tb-handset {position:relative; width:220px; margin:0 auto 6px; padding:11px; border-radius:36px; background:#0d1222; box-shadow:0 30px 60px -30px rgba(0,0,0,.7), inset 0 0 0 2px #2a3150; }
.tb-id .tb-handset .scr {position:relative; overflow:clip; height:380px; border-radius:26px; background:linear-gradient(180deg, #1f2a52, #0f1530); display:grid; place-items:center; }
.tb-id .tb-handset .notch {position:absolute; top:8px; left:50%; width:70px; height:18px; transform:translateX(-50%); border-radius:12px; background:#0d1222; }
.tb-id .tb-handset .ring {position:absolute; width:150px; height:150px; border-radius:50%; border:2px solid rgba(255,255,255,.25); animation:tb-pulse 2.4s ease-out infinite; }
.tb-id .tb-handset .ring.b {animation-delay:1.2s; }
@keyframes tb-pulse { from { transform:scale(.6); opacity:1; } to { transform:scale(1.9); opacity:0; } }
.tb-id .tb-handset .ask {position:relative; z-index:1; width:86%; padding:16px 14px; border-radius:16px; background:rgba(255,255,255,.97); color:#111827; text-align:center; font-size:12px; box-shadow:0 20px 40px -20px #000; }
.tb-id .tb-handset .ask b {display:block; font-size:19px; font-weight:900; margin:4px 0; }
.tb-id .tb-handset .pin {display:flex; justify-content:center; gap:8px; margin:12px 0 8px; }
.tb-id .tb-handset .pin i {width:10px; height:10px; border-radius:50%; background:#cbd5e1; }
.tb-id .tb-handset .pin i.f {background:#111827; }
.tb-id .tb-handset .keys {display:grid; grid-template-columns:repeat(3, 1fr); gap:6px; margin-top:8px; }
.tb-id .tb-handset .keys span {padding:6px 0; border-radius:8px; background:#eef2f7; font-weight:700; }
.tb-id .tb-relay {max-width:760px; margin:34px auto 0; text-align:center; }
.tb-id .tb-relay h2 {margin:0 0 6px; font-size:26px; font-weight:900; letter-spacing:-.03em; color:var(--text-1); }
.tb-id .tb-relay p {margin:0 auto; color:var(--text-2); max-width:480px; }
.tb-id .tb-nodes {display:grid; grid-template-columns:auto minmax(0, 1fr) auto minmax(0, 1fr) auto; align-items:center; gap:14px; margin:38px 0 28px; }
.tb-id .tb-node {display:grid; justify-items:center; gap:7px; font-size:12px; color:var(--text-2); }
.tb-id .tb-node .dot {width:76px; height:76px; border-radius:24px; display:grid; place-items:center; font-size:27px; background:var(--surface); box-shadow:0 0 0 1px var(--border), 0 18px 34px -22px rgba(0,0,0,.5); color:var(--text-1); }
.tb-id .tb-node.lit .dot {color:#fff; background:linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 50%, #050816)); box-shadow:0 0 0 7px var(--accent-dim), 0 18px 34px -18px var(--accent); }
.tb-id .tb-node b {color:var(--text-1); font-size:13px; }
.tb-id .tb-node .mono {font:600 10.5px var(--font-mono); color:var(--text-3); }
.tb-id .tb-wire {position:relative; height:4px; border-radius:9px; background:var(--surface-2); overflow:clip; }
.tb-id .tb-wire i {position:absolute; top:0; width:35%; height:100%; border-radius:9px; background:linear-gradient(90deg, transparent, var(--accent), transparent); animation:tb-flow 1.3s linear infinite; }
.tb-id .tb-wire.idle i {display:none; }
@keyframes tb-flow { from { left:-35%; } to { left:100%; } }
@media (max-width:620px) {
  .tb-id .tb-nodes {grid-template-columns:minmax(0, 1fr); justify-items:center; }
  .tb-id .tb-wire {width:4px; height:28px; }
  .tb-id .tb-wire i {width:100%; height:35%; animation:none; }
 }
.tb-id .tb-joy {position:relative; display:grid; grid-template-columns:minmax(0, 1fr) 390px; gap:28px; align-items:start; }
@media (max-width:1060px) {
  .tb-id .tb-joy {grid-template-columns:minmax(0, 1fr); }
 }
.tb-id .tb-hooray {position:relative; overflow:clip; padding:34px 30px 30px; border-radius:22px; text-align:center; border:1px solid var(--border);
    background:radial-gradient(70% 90% at 50% 0%, color-mix(in srgb, var(--emerald) 15%, transparent), transparent 70%), var(--surface); }
.tb-id .tb-hooray h1 {margin:14px 0 6px; font-size:28px; font-weight:900; letter-spacing:-.03em; color:var(--text-1); }
.tb-id .tb-hooray p {margin:0 auto; max-width:460px; color:var(--text-2); }
.tb-id .tb-check {width:92px; height:92px; }
.tb-id .tb-check circle {fill:color-mix(in srgb, var(--emerald) 14%, transparent); stroke:var(--emerald); stroke-width:3; }
.tb-id .tb-check path {fill:none; stroke:var(--emerald); stroke-width:6; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:60; stroke-dashoffset:60; animation:tb-draw .6s ease-out .3s forwards; }
@keyframes tb-draw { to { stroke-dashoffset:0; } }
.tb-id .tb-confetti {position:absolute; inset:0; pointer-events:none; overflow:clip; }
.tb-id .tb-confetti i {position:absolute; top:-14px; width:8px; height:13px; border-radius:2px; opacity:0; animation:tb-fall 2.8s ease-in forwards; }
@keyframes tb-fall { 0% { opacity:1; transform:translateY(0) rotate(0); } 100% { opacity:0; transform:translateY(360px) rotate(560deg); } }
.tb-id .tb-unlocked {display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; margin-top:24px; text-align:start; }
.tb-id .tb-unlocked div {padding:14px; border-radius:14px; background:var(--surface-2); font-size:12.5px; color:var(--text-2); opacity:0; animation:tb-in .5s ease-out forwards .5s; }
.tb-id .tb-unlocked div:nth-child(2) {animation-delay:.65s; }
.tb-id .tb-unlocked div:nth-child(3) {animation-delay:.8s; }
.tb-id .tb-unlocked i {display:block; margin-bottom:8px; color:var(--emerald); font-size:16px; }
.tb-id .tb-unlocked b {display:block; color:var(--text-1); font-size:13px; }
@keyframes tb-in { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
@media (max-width:620px) {
  .tb-id .tb-unlocked {grid-template-columns:minmax(0, 1fr); }
 }
.tb-id .tb-outcome {padding:30px; border-radius:22px; border:1px solid var(--border); background:var(--surface); }
.tb-id .tb-outcome .ic {width:62px; height:62px; border-radius:18px; display:grid; place-items:center; font-size:25px; color:var(--c); background:color-mix(in srgb, var(--c) 13%, transparent); }
.tb-id .tb-outcome h1 {margin:16px 0 6px; font-size:26px; font-weight:900; letter-spacing:-.03em; color:var(--text-1); }
.tb-id .tb-outcome p {margin:0; color:var(--text-2); max-width:480px; }
.tb-id .tb-said {margin:18px 0 0; padding:14px 16px; border-left:3px solid var(--c); border-radius:0 12px 12px 0; background:var(--surface-2); font-size:13px; color:var(--text-2); }
.tb-id .tb-said b {color:var(--text-1); }
.tb-id .tb-acts {display:flex; gap:10px; flex-wrap:wrap; margin-top:22px; }
.tb-id .tb-keep {display:flex; align-items:center; gap:14px; margin-top:18px; padding:14px 16px; border-radius:14px; background:var(--surface-2); font-size:13px; color:var(--text-2); }
.tb-id .tb-keep b {display:block; color:var(--text-1); }
.tb-id .tb-keep .cn-btn {margin-left:auto; }
@media (max-width:620px) {
  .tb-id .tb-keep {flex-wrap:wrap; }
  .tb-id .tb-keep .cn-btn {margin-left:0; }
 }
.tb-id .tb-ring {position:relative; flex:none; display:grid; place-items:center; }
.tb-id .tb-ring svg {transform:rotate(-90deg); }
.tb-id .tb-ring circle {fill:none; stroke-width:6; }
.tb-id .tb-ring .bg {stroke:color-mix(in srgb, var(--c) 18%, transparent); }
.tb-id .tb-ring .fg {stroke:var(--c); stroke-linecap:round; }
.tb-id .tb-ring b {position:absolute; text-align:center; font-size:19px; font-weight:900; line-height:1; color:var(--text-1); }
.tb-id .tb-ring b small {display:block; font:600 8.5px var(--font-mono); letter-spacing:.05em; color:var(--text-3); margin-top:3px; text-transform:uppercase; }
.tb-id .tb-box {padding:20px; border-radius:20px; border:1px solid var(--border); background:var(--surface); }
.tb-id .tb-box h3 {margin:0 0 14px; font-size:15px; font-weight:800; color:var(--text-1); display:flex; justify-content:space-between; align-items:center; gap:10px; }
.tb-id .tb-box p {margin:0; font-size:13px; color:var(--text-2); }
.tb-id .tb-bar {display:flex; height:16px; border-radius:9px; overflow:clip; gap:2px; }
.tb-id .tb-bar i {display:block; height:100%; background:var(--kc); }
.tb-id .tb-bar i.hatch {background:repeating-linear-gradient(135deg, var(--kc) 0 5px, color-mix(in srgb, var(--kc) 35%, transparent) 5px 10px); }
.tb-id .tb-barkey {display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:10px; font-size:12px; color:var(--text-2); }
.tb-id .tb-barkey span {display:inline-flex; align-items:center; gap:7px; }
.tb-id .tb-barkey span::before {content:''; width:9px; height:9px; border-radius:3px; background:var(--kc); }
.tb-id .tb-barkey b {color:var(--text-1); font-variant-numeric:tabular-nums; }
.tb-id .tb-rail {list-style:none; margin:0; padding:0; display:grid; }
.tb-id .tb-rail li {position:relative; display:grid; grid-template-columns:30px minmax(0, 1fr); gap:12px; padding-bottom:18px; font-size:12.5px; color:var(--text-2); }
.tb-id .tb-rail li:last-child {padding-bottom:0; }
.tb-id .tb-rail li:not(:last-child)::before {content:''; position:absolute; left:14px; top:32px; bottom:2px; width:2px; background:var(--border); }
.tb-id .tb-rail .d {width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-size:12px; color:var(--text-3); background:var(--surface-2); box-shadow:0 0 0 1px var(--border); }
.tb-id .tb-rail .ok .d {color:#fff; background:var(--emerald); box-shadow:none; }
.tb-id .tb-rail .now .d {color:#fff; background:var(--accent); box-shadow:0 0 0 5px var(--accent-dim); }
.tb-id .tb-rail .no .d {color:#fff; background:var(--rose); box-shadow:none; }
.tb-id .tb-rail .no b {color:var(--rose); }

/* Beyond the mockup: the products an organisation holds, to move between their plans; more than three steps; the picture beside what changes. */
.tb-id .tb-switch { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.tb-id .tb-switch a { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface);
    color: var(--text-2); font: 700 13px var(--font-sans); text-decoration: none; transition: border-color .15s, color .15s; }
.tb-id .tb-switch a img { width: 24px; height: 24px; border-radius: 7px; }
.tb-id .tb-switch a.on { color: var(--text-1); border-color: var(--pc); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pc) 16%, transparent); }
/* Room above the steps for the caption and the pin, however few steps rise beside it (the mockup's third step made that room). */
.tb-id .tb-stairs { grid-template-columns: repeat(var(--steps, 3), minmax(0, 1fr)); padding-top: 104px; }
.tb-id .tb-cap { top: 0; }
.tb-id .tb-cap { width: calc((100% - (var(--steps, 3) - 1) * 16px) / var(--steps, 3)); }
@media (max-width: 980px) { .tb-id .tb-stairs { grid-template-columns: minmax(0, 1fr); padding-top: 40px; } .tb-id .tb-cap { width: auto; } }
.tb-id .tb-delta-pic { display: grid; place-items: center; min-height: 180px; border-radius: 18px;
    background: radial-gradient(circle at 70% 20%, color-mix(in srgb, var(--pcd) 45%, transparent), transparent 60%), linear-gradient(135deg, color-mix(in srgb, var(--pc) 22%, var(--surface)), color-mix(in srgb, var(--pc) 6%, var(--surface))); }
.tb-id .tb-delta-pic img { width: 96px; height: 96px; border-radius: 26px; box-shadow: 0 24px 40px -20px var(--pc), 0 0 0 10px color-mix(in srgb, var(--pc) 12%, transparent); }
@media (max-width: 860px) { .tb-id .tb-delta-pic { display: none; } }
.tb-id .tb-leaving { max-width: 460px; margin: 0 auto; text-align: start; } .tb-id .tb-leaving > i { font-size: 20px; color: var(--emerald); }
.tb-id .tb-check { display: block; margin: 0 auto; }   /* Tailwind makes an svg a block; the mockup's was inline, so centred by its text */

/* Billing: what Jaeda pays, and when */
.tb-id .tb-bhero { display:grid; grid-template-columns:minmax(0, 1.2fr) minmax(0, 1fr); gap:18px; margin-bottom:20px; }
@media (max-width:980px) { .tb-id .tb-bhero { grid-template-columns:minmax(0, 1fr); } }
.tb-id .tb-sum { position:relative; overflow:clip; padding:24px; border-radius:22px; color:#fff;
  background:radial-gradient(90% 120% at 100% 0%, rgba(124, 155, 242, .35), transparent 60%), linear-gradient(135deg, #18224a, #0c1230); box-shadow:0 26px 50px -32px #0c1230; }
.tb-id .tb-sum::before { content:''; position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.1) 1px, transparent 1.3px); background-size:16px 16px;
  -webkit-mask-image:linear-gradient(100deg, transparent 40%, #000); mask-image:linear-gradient(100deg, transparent 40%, #000); }
.tb-id .tb-sum > * { position:relative; }
.tb-id .tb-sum .tb-eb { color:rgba(255,255,255,.65); }
.tb-id .tb-sum .big { display:block; margin:6px 0 2px; font-size:40px; font-weight:900; letter-spacing:-.04em; font-variant-numeric:tabular-nums; }
.tb-id .tb-sum .big small { font-size:17px; font-weight:700; color:rgba(255,255,255,.7); letter-spacing:0; }
.tb-id .tb-sum .s { font-size:13px; color:rgba(255,255,255,.75); }
@media (max-width:520px) { .tb-id .tb-sum .big { font-size:30px; } .tb-id .tb-sum .big small { font-size:14px; } .tb-id .tb-next .when { font-size:22px; } }
.tb-id .tb-split { display:flex; gap:4px; height:12px; margin:20px 0 10px; }
.tb-id .tb-split i { display:block; height:100%; border-radius:6px; background:linear-gradient(90deg, var(--pc), var(--pcd)); }
.tb-id .tb-split i.free { flex:0 0 28px; background:repeating-linear-gradient(135deg, rgba(255,255,255,.4) 0 3px, transparent 3px 7px); }
.tb-id .tb-legend { display:flex; flex-wrap:wrap; gap:6px 18px; font-size:12px; color:rgba(255,255,255,.8); }
.tb-id .tb-legend span { display:inline-flex; align-items:center; gap:7px; } .tb-id .tb-legend span::before { content:''; width:9px; height:9px; border-radius:3px; background:var(--pcd); }
.tb-id .tb-legend b { color:#fff; font-variant-numeric:tabular-nums; }
.tb-id .tb-next { position:relative; display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:14px; align-items:center; padding:22px; border-radius:22px; border:1px solid var(--border); background:var(--surface); }
.tb-id .tb-next .when { display:block; margin:6px 0 4px; font-size:26px; font-weight:900; letter-spacing:-.03em; color:var(--text-1); }
.tb-id .tb-next .s { font-size:13px; color:var(--text-2); }
.tb-id .tb-next.warn { border-color:color-mix(in srgb, var(--amber) 45%, var(--border)); background:linear-gradient(135deg, color-mix(in srgb, var(--amber) 10%, var(--surface)), var(--surface)); }
.tb-id .tb-next.bad { border-color:color-mix(in srgb, var(--rose) 45%, var(--border)); background:linear-gradient(135deg, color-mix(in srgb, var(--rose) 9%, var(--surface)), var(--surface)); }
.tb-id .tb-next.bad .when { color:var(--rose); }
.tb-id .tb-next .tb-acts { grid-column:1 / -1; margin-top:2px; }
@media (max-width:520px) { .tb-id .tb-next { grid-template-columns:minmax(0, 1fr); } }

/* the year as a ribbon */
.tb-id .tb-ribbon { padding:20px 22px 10px; border-radius:22px; border:1px solid var(--border); background:var(--surface); }
.tb-id .tb-ribbon-h { display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:4px; }
.tb-id .tb-ribbon-h h2 { margin:0; font-size:17px; font-weight:900; letter-spacing:-.02em; color:var(--text-1); }
.tb-id .tb-keyset { display:flex; gap:14px; flex-wrap:wrap; font-size:11.5px; color:var(--text-3); }
.tb-id .tb-keyset span { display:inline-flex; align-items:center; gap:6px; } .tb-id .tb-keyset span::before { content:''; width:16px; height:8px; border-radius:9px; }
.tb-id .tb-keyset .k-paid::before { background:linear-gradient(90deg, var(--primary), color-mix(in srgb, var(--primary) 50%, #fff)); }
.tb-id .tb-keyset .k-next::before { outline:1.5px dashed var(--text-3); outline-offset:-1.5px; }
.tb-id .tb-keyset .k-grace::before { background:repeating-linear-gradient(135deg, var(--amber) 0 3px, color-mix(in srgb, var(--amber) 25%, transparent) 3px 6px); }
.tb-id .tb-keyset .k-free::before { height:0; border-top:2px dotted var(--text-3); border-radius:0; }
.tb-id .tb-keyset .k-comp::before { background:repeating-linear-gradient(135deg, color-mix(in srgb, var(--primary) 35%, transparent) 0 3px, color-mix(in srgb, var(--primary) 12%, transparent) 3px 6px); }
.tb-id .tb-axis { position:relative; height:46px; }
.tb-id .tb-axis .tk { position:absolute; bottom:2px; padding-left:5px; border-left:1px solid var(--border); font:600 10.5px var(--font-mono); color:var(--text-3); white-space:nowrap; }
.tb-id .tb-nowflag { position:absolute; top:4px; transform:translateX(-50%); padding:3px 9px; border-radius:99px; font:700 10.5px var(--font-mono); color:var(--bg); background:var(--text-1); white-space:nowrap; z-index:2; }
.tb-id .tb-nowflag::after { content:''; position:absolute; left:50%; bottom:-4px; width:8px; height:8px; background:var(--text-1); transform:translateX(-50%) rotate(45deg); z-index:-1; }
.tb-id .tb-lane { padding:12px 0 14px; border-top:1px solid var(--border); }
.tb-id .tb-lane-head { display:grid; grid-template-columns:auto minmax(0, 1fr) auto; gap:12px; align-items:center; margin-bottom:10px; }
.tb-id .tb-lane-head .tb-pic { width:38px; height:38px; border-radius:11px; }
.tb-id .tb-lane-head b { display:block; font-size:14.5px; font-weight:800; color:var(--text-1); } .tb-id .tb-lane-head span { font-size:12.5px; color:var(--text-2); }
.tb-id .tb-lane-head .hot { display:inline-block; margin-left:8px; padding:2px 8px; border-radius:99px; font:700 10.5px var(--font-sans); vertical-align:2px; color:var(--hc, var(--amber));
  background:color-mix(in srgb, var(--hc, var(--amber)) 14%, transparent); }
.tb-id .tb-lane-head .acts { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.tb-id .tb-track { position:relative; height:42px; border-radius:12px; background:var(--surface-2); }
.tb-id .tb-track .gl { position:absolute; top:6px; bottom:6px; width:1px; background:color-mix(in srgb, var(--border) 80%, transparent); }
.tb-id .tb-track .now { position:absolute; top:-6px; bottom:-6px; width:2px; margin-left:-1px; border-radius:2px; background:var(--text-1); z-index:3; }
.tb-id .tb-track .now::after { content:''; position:absolute; left:50%; top:50%; width:10px; height:10px; transform:translate(-50%, -50%); border-radius:50%; background:var(--text-1); box-shadow:0 0 0 3px var(--surface-2); }
.tb-id .sg { position:absolute; top:50%; height:18px; transform:translateY(-50%); border-radius:99px; display:flex; align-items:center; overflow:clip; z-index:1; }
.tb-id .sg em { font-style:normal; font:700 10.5px var(--font-sans); padding:0 10px; white-space:nowrap; overflow:clip; text-overflow:ellipsis; }
.tb-id .sg.paid { color:#fff; background:linear-gradient(90deg, var(--pc), var(--pcd)); box-shadow:0 6px 16px -8px var(--pc); }
.tb-id .sg.next { color:color-mix(in srgb, var(--pc) 70%, var(--text-1)); background:color-mix(in srgb, var(--pc) 9%, transparent); outline:1.5px dashed color-mix(in srgb, var(--pc) 75%, transparent); outline-offset:-1.5px; }
.tb-id .sg.due { color:var(--text-2); outline:1.5px dashed var(--text-3); outline-offset:-1.5px; }
.tb-id .sg.grace { color:var(--text-1); background:repeating-linear-gradient(135deg, color-mix(in srgb, var(--amber) 62%, transparent) 0 5px, color-mix(in srgb, var(--amber) 22%, transparent) 5px 10px); }
.tb-id .sg.free { height:0; border-radius:0; overflow:visible; border-top:2px dotted var(--text-3); }
.tb-id .sg.free em { position:absolute; top:-19px; left:0; padding:0 0 0 4px; color:var(--text-3); font-weight:600; }
.tb-id .sg.comp { color:color-mix(in srgb, var(--pc) 70%, var(--text-1)); background:repeating-linear-gradient(135deg, color-mix(in srgb, var(--pc) 16%, transparent) 0 8px, color-mix(in srgb, var(--pc) 8%, transparent) 8px 16px);
  outline:1.5px solid color-mix(in srgb, var(--pc) 35%, transparent); outline-offset:-1.5px; }
.tb-id .sg.past { opacity:.42; }
.tb-id .mk { position:absolute; top:50%; z-index:2; width:24px; height:24px; margin:-12px 0 0 -12px; border-radius:50%; display:grid; place-items:center; font-size:10.5px;
  color:#fff; background:var(--pc); box-shadow:0 0 0 3px var(--surface-2); }
.tb-id .mk.fail { background:var(--rose); } .tb-id .mk.paid { background:var(--emerald); }
.tb-id .mk.bell { top:0; width:20px; height:20px; margin:-10px 0 0 -10px; font-size:9.5px; background:var(--amber); }
.tb-id .mk.later { background:var(--surface); color:var(--amber); box-shadow:0 0 0 1.5px var(--amber), 0 0 0 4px var(--surface-2); }
.tb-id .tb-lane-foot { display:flex; justify-content:space-between; gap:10px; margin-top:7px; font:600 10.5px var(--font-mono); color:var(--text-3); }
@media (max-width:620px) { .tb-id .tb-ribbon { padding:16px 14px 8px; } .tb-id .tb-axis .tk:not(.q) { display:none; } .tb-id .tb-lane-head { grid-template-columns:auto minmax(0, 1fr); }
  .tb-id .tb-lane-head .acts { grid-column:1 / -1; justify-content:flex-start; } .tb-id .tb-keyset { display:none; }
  .tb-id .mk { width:18px; height:18px; margin:-9px 0 0 -9px; font-size:8px; } .tb-id .sg em { font-size:9.5px; padding:0 7px; } }

.tb-id .tb-grid2 { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:18px; margin-top:18px; }
@media (max-width:980px) { .tb-id .tb-grid2 { grid-template-columns:minmax(0, 1fr); } }
.tb-id .tb-box { padding:20px; border-radius:20px; border:1px solid var(--border); background:var(--surface); }
.tb-id .tb-box h3 { margin:0 0 14px; font-size:15px; font-weight:800; color:var(--text-1); display:flex; justify-content:space-between; align-items:center; gap:10px; }
.tb-id .tb-box p { margin:0; font-size:13px; color:var(--text-2); }
.tb-id .tb-wallet { display:flex; gap:16px; align-items:center; flex-wrap:wrap; }
.tb-id .tb-wallet .momo { display:grid; gap:4px; padding:14px; border-radius:14px; background:var(--surface-2); font-size:12.5px; color:var(--text-2); }
.tb-id .tb-wallet .momo b { color:var(--text-1); font-size:14px; }
.tb-id .tb-people { display:flex; gap:18px; flex-wrap:wrap; margin-bottom:14px; } .tb-id .tb-person { display:flex; gap:10px; align-items:center; font-size:12.5px; color:var(--text-2); }
.tb-id .tb-person .av { width:36px; height:36px; border-radius:50%; display:grid; place-items:center; font:800 12px var(--font-sans); color:#fff; background:var(--c); }
.tb-id .tb-person b { display:block; color:var(--text-1); font-size:13px; }

/* The organisation's Billing (TB3): pieces the app adds to the mockup's. */
.tb-id .tb-lead { margin: -6px 0 18px; font-size: 14px; color: var(--text-2); }
.tb-id .tb-next-pic { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 20px; font-size: 32px; color: var(--emerald); background: var(--emerald-dim); }
.tb-id .tb-next .tb-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.tb-id .tb-box p.tb-help { margin-top: 12px; }
.tb-id .tb-ribbon .cn-btn.sm i { margin-right: 6px; }

/* Invoices and receipts (TB4), from invoice.html */
.tb-id .tb-year { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 300px); gap:28px; align-items:end; margin-bottom:20px; padding:22px; border-radius:22px; border:1px solid var(--border); background:var(--surface); }
.tb-id .tb-year .fig { display:flex; gap:28px; flex-wrap:wrap; margin-top:8px; }
.tb-id .tb-year .fig b { display:block; font-size:24px; font-weight:900; letter-spacing:-.03em; color:var(--text-1); font-variant-numeric:tabular-nums; }
.tb-id .tb-year .fig span { font-size:12px; color:var(--text-2); }
.tb-id .tb-months { display:grid; grid-template-columns:repeat(12, 1fr); gap:5px; align-items:end; height:76px; margin-top:18px; }
.tb-id .tb-months div { display:grid; gap:4px; justify-items:center; align-content:end; height:100%; }
.tb-id .tb-months i { display:block; width:100%; max-width:26px; border-radius:6px 6px 3px 3px; background:var(--surface-2); }
.tb-id .tb-months i.on { background:linear-gradient(to top, var(--accent), color-mix(in srgb, var(--accent) 40%, var(--surface))); }
.tb-id .tb-months span { font:600 9.5px var(--font-mono); color:var(--text-3); }
.tb-id .tb-slips { display:grid; gap:12px; }
.tb-id .tb-slip { position:relative; display:grid; grid-template-columns:auto minmax(0, 1fr) auto auto 18px; gap:16px; align-items:center; width:100%; padding:16px 18px 16px 22px; border:1px solid var(--border);
  border-radius:16px; background:var(--surface); color:inherit; font:inherit; text-align:start; cursor:pointer; overflow:clip; transition:transform .15s, box-shadow .15s; }
.tb-id .tb-slip:hover { transform:translateY(-1px); box-shadow:0 14px 30px -20px rgba(0,0,0,.45); }
.tb-id .tb-slip::before { content:''; position:absolute; left:0; top:0; bottom:0; width:5px; background:linear-gradient(var(--pc), var(--pcd)); }
.tb-id .tb-slip .ck-pic { width:40px; height:40px; border-radius:11px; }
.tb-id .tb-slip b { display:block; font-size:14px; color:var(--text-1); } .tb-id .tb-slip .mono { font:600 11px var(--font-mono); color:var(--text-3); }
.tb-id .tb-slip .sub { display:block; font-size:12px; color:var(--text-2); margin-top:2px; }
.tb-id .tb-slip .amt { font-size:17px; font-weight:900; letter-spacing:-.02em; color:var(--text-1); font-variant-numeric:tabular-nums; white-space:nowrap; }
.tb-id .tb-slip .st { display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; } .tb-id .tb-slip > i { color:var(--text-3); }
@media (max-width:760px) { .tb-id .tb-slip { grid-template-columns:auto minmax(0, 1fr) auto; } .tb-id .tb-slip .st { grid-column:2 / -1; justify-content:flex-start; } .tb-id .tb-slip > i { display:none; }
  .tb-id .tb-year { grid-template-columns:minmax(0, 1fr); } }

/* the paper */
.tb-id .tb-paperwrap { display:grid; grid-template-columns:minmax(0, 1fr) 300px; gap:26px; align-items:start; }
@media (max-width:1100px) { .tb-id .tb-paperwrap { grid-template-columns:minmax(0, 1fr); } }
.tb-id .tb-paper { position:relative; overflow:clip; padding:34px 36px; border-radius:8px; background:var(--surface);
  box-shadow:0 0 0 1px var(--border), 6px 6px 0 -1px var(--surface), 6px 6px 0 0 var(--border), 0 40px 60px -40px rgba(10, 20, 50, .55); }
.tb-id .tb-paper::before { content:''; position:absolute; left:0; right:0; top:0; height:5px; background:linear-gradient(90deg, var(--pc), var(--pcd)); }
.tb-id .tb-paper .hd { display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; padding-bottom:20px; border-bottom:1px solid var(--border); }
.tb-id .tb-paper h2 { margin:14px 0 0; font-size:24px; font-weight:900; letter-spacing:-.025em; color:var(--text-1); }
.tb-id .tb-paper .meta { font:600 12px var(--font-mono); line-height:1.8; color:var(--text-2); text-align:end; }
.tb-id .tb-paper .parties { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:20px; padding:20px 0; font-size:12.5px; line-height:1.6; color:var(--text-2); }
.tb-id .tb-paper .parties b { display:block; font-size:14px; color:var(--text-1); }
.tb-id .tb-items { width:100%; border-collapse:collapse; font-size:13px; }
.tb-id .tb-items th { padding:9px 0; border-bottom:1.5px solid var(--text-1); text-align:start; font:700 10.5px var(--font-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--text-2); }
.tb-id .tb-items td { padding:11px 0; border-bottom:1px solid var(--border); color:var(--text-1); }
.tb-id .tb-items th:last-child, .tb-id .tb-items td:last-child { text-align:end; font-variant-numeric:tabular-nums; white-space:nowrap; padding-left:12px; }
.tb-id .tb-items tr.t td { border-bottom:0; padding-top:14px; font-size:16px; font-weight:900; }
.tb-id .tb-items tr.w td { color:var(--violet); } .tb-id .tb-items tr.p td { font-weight:800; }
.tb-id .tb-items .k { display:inline-block; width:9px; height:9px; margin-right:9px; border-radius:3px; background:var(--kc); }
.tb-id .tb-clear { display:flex; gap:18px; align-items:center; margin-top:22px; padding-top:20px; border-top:1px dashed var(--border); font-size:12px; color:var(--text-2); }
.tb-id .tb-clear .qr { flex:none; width:86px; height:86px; padding:5px; border-radius:8px; background:#fff; box-shadow:0 0 0 1px var(--border); }
.tb-id .tb-clear b { display:block; color:var(--text-1); font-size:13px; } .tb-id .tb-clear .mono { font:500 10.5px var(--font-mono); color:var(--text-3); word-break:break-all; }
.tb-id .tb-seal { position:absolute; right:30px; bottom:22px; width:130px; height:130px; color:var(--emerald); transform:rotate(-14deg); opacity:.88; pointer-events:none;
  animation:tb-seal .5s cubic-bezier(.2,1.6,.4,1) both .2s; }
@keyframes tb-seal { from { opacity:0; transform:rotate(-14deg) scale(1.7); } to { opacity:.88; transform:rotate(-14deg) scale(1); } }
.tb-id .tb-seal.wait { color:var(--amber); animation:tb-turn 18s linear infinite; }
@keyframes tb-turn { .tb-id from { transform:rotate(0); } to { transform:rotate(360deg); } }
.tb-id .tb-seal text { fill:currentColor; font-family:var(--font-mono); font-weight:700; }
@media (max-width:620px) { .tb-id .tb-paper { padding:24px 18px; } .tb-id .tb-paper .parties { grid-template-columns:minmax(0, 1fr); } .tb-id .tb-seal { width:76px; height:76px; right:10px; bottom:14px; } .tb-id .tb-clear { padding-right:70px; } }

/* money split into parts */
.tb-id .tb-bar { display:flex; height:16px; border-radius:9px; overflow:clip; gap:2px; }
.tb-id .tb-bar i { display:block; height:100%; background:var(--kc); }
.tb-id .tb-bar i.hatch { background:repeating-linear-gradient(135deg, var(--kc) 0 5px, color-mix(in srgb, var(--kc) 35%, transparent) 5px 10px); }
.tb-id .tb-barkey { display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:10px; font-size:12px; color:var(--text-2); }
.tb-id .tb-barkey span { display:inline-flex; align-items:center; gap:7px; } .tb-id .tb-barkey span::before { content:''; width:9px; height:9px; border-radius:3px; background:var(--kc); }
.tb-id .tb-barkey b { color:var(--text-1); font-variant-numeric:tabular-nums; }
.tb-id .tb-side { display:grid; gap:16px; }
.tb-id .tb-big-split { padding:24px; border-radius:22px; border:1px solid var(--border); background:var(--surface); margin-bottom:22px; }
.tb-id .tb-big-split .row3 { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px; margin:14px 0 16px; }
.tb-id .tb-big-split .row3 div { display:grid; gap:2px; } .tb-id .tb-big-split .row3 b { font-size:26px; font-weight:900; letter-spacing:-.03em; color:var(--text-1); font-variant-numeric:tabular-nums; }
.tb-id .tb-big-split .row3 .w b { color:var(--violet); } .tb-id .tb-big-split .row3 .n b { color:var(--accent); }
.tb-id .tb-big-split .tb-bar { height:28px; border-radius:12px; }
@media (max-width:620px) { .tb-id .tb-big-split .row3 { grid-template-columns:minmax(0, 1fr); } }
.tb-id .tb-kinds { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; }
.tb-id .tb-kind { position:relative; display:grid; gap:4px; padding:16px; border-radius:16px; border:1.5px solid var(--border); background:var(--surface); text-align:start; color:inherit; font:inherit; cursor:pointer; }
.tb-id .tb-kind.on { border-color:var(--violet); box-shadow:0 0 0 4px var(--violet-dim); }
.tb-id .tb-kind .pc { font-size:28px; font-weight:900; letter-spacing:-.03em; color:var(--text-1); } .tb-id .tb-kind.on .pc { color:var(--violet); }
.tb-id .tb-kind b { font-size:13.5px; color:var(--text-1); } .tb-id .tb-kind span { font-size:12px; color:var(--text-2); }
@media (max-width:760px) { .tb-id .tb-kinds { grid-template-columns:minmax(0, 1fr); } }
.tb-id .tb-rail { list-style:none; margin:0; padding:0; display:grid; }
.tb-id .tb-rail li { position:relative; display:grid; grid-template-columns:30px minmax(0, 1fr); gap:12px; padding-bottom:18px; font-size:12.5px; color:var(--text-2); }
.tb-id .tb-rail li:last-child { padding-bottom:0; }
.tb-id .tb-rail li:not(:last-child)::before { content:''; position:absolute; left:14px; top:32px; bottom:2px; width:2px; background:var(--border); }
.tb-id .tb-rail .d { width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-size:12px; color:var(--text-3); background:var(--surface-2); box-shadow:0 0 0 1px var(--border); }
.tb-id .tb-rail .ok .d { color:#fff; background:var(--emerald); box-shadow:none; } .tb-id .tb-rail .now .d { color:#fff; background:var(--accent); box-shadow:0 0 0 5px var(--accent-dim); }
.tb-id .tb-rail .no .d { color:#fff; background:var(--rose); box-shadow:none; } .tb-id .tb-rail .no b { color:var(--rose); }
.tb-id .tb-rail b { display:block; color:var(--text-1); font-size:13.5px; }
.tb-id .tb-drop { display:grid; justify-items:center; gap:8px; padding:28px 18px; border-radius:18px; border:2px dashed color-mix(in srgb, var(--violet) 45%, var(--border));
  background:color-mix(in srgb, var(--violet) 5%, var(--surface)); text-align:center; font-size:12.5px; color:var(--text-2); }
.tb-id .tb-drop .env { font-size:34px; color:var(--violet); } .tb-id .tb-drop b { color:var(--text-1); font-size:14px; }
.tb-id .tb-due { display:flex; gap:18px; align-items:center; padding:18px 20px; border-radius:20px; margin-bottom:20px; border:1px solid color-mix(in srgb, var(--violet) 35%, var(--border));
  background:linear-gradient(135deg, color-mix(in srgb, var(--violet) 9%, var(--surface)), var(--surface)); }
.tb-id .tb-due h2 { margin:0 0 4px; font-size:18px; font-weight:900; letter-spacing:-.02em; color:var(--text-1); } .tb-id .tb-due p { margin:0; font-size:13px; color:var(--text-2); }

/* Invoices (TB4): pieces the app adds to the mockup's. */
.tb-id .tb-paper .qr { width: 84px; height: 84px; flex: none; background: #fff; padding: 4px; border-radius: 6px; }
.tb-id .tb-paper .qr svg { width: 100%; height: 100%; display: block; }
.tb-id .tb-send { display: grid; gap: 8px; margin-top: 8px; }
.tb-id .tb-send input { width: 100%; }
.tb-id .tb-drop input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.tb-id .tb-yearpick { display: flex; gap: 6px; }
.tb-id .tone-violet { color: var(--violet); background: color-mix(in srgb, var(--violet) 12%, transparent); border-color: color-mix(in srgb, var(--violet) 30%, transparent); }
.tb-id .tb-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.tb-id .tb-head .tb-lead { margin: 0; }
.tb-id .tb-seal text { fill: currentColor; }
.tb-id .tb-lines tr.credit.held td, .tb-id .tb-lines tr.credit.held td:last-child { color: var(--violet); }
.tb-id .tb-lines tr.sum td { color: var(--text-1); font-weight: 700; border-top: 1px solid var(--border); }
.tb-id .tb-paper .tb-seal { width: 104px; height: 104px; right: 22px; bottom: 14px; }
.tb-id .tb-paper .tb-clear { padding-inline-end: 124px; }
@media (max-width: 620px) { .tb-id .tb-paper .tb-seal { width: 84px; height: 84px; right: 12px; } .tb-id .tb-paper .tb-clear { padding-inline-end: 92px; } }

/* Money back at id (plan TB §7, TB7 and TB8; mockup tb/moneyback.html, states "At id: refunded" and "A credit note"): the refund on its way back
   as a banner with its track, the paper stamped, its credit notes beneath, and a credit note's lines going back. */
.tb-id .mb-onway { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: center; padding: 18px 20px; border-radius: 20px; margin-bottom: 20px;
  border: 1px solid color-mix(in srgb, var(--emerald) 40%, var(--border)); background: linear-gradient(110deg, color-mix(in srgb, var(--emerald) 10%, var(--surface)), var(--surface) 65%); }
.tb-id .mb-onway .coin { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-size: 24px; color: #fff; background: var(--emerald);
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--emerald) 16%, transparent); }
.tb-id .mb-onway h2 { margin: 0 0 4px; font-size: 19px; font-weight: 900; letter-spacing: -.02em; color: var(--text-1); }
.tb-id .mb-onway p { margin: 0; font-size: 13px; color: var(--text-2); }
.tb-id .mb-onway .mb-track { margin-top: 14px; max-width: 600px; }
.tb-id .mb-refunded { position: absolute; z-index: 2; inset-inline-start: 50%; top: 64px; transform: translateX(-50%) rotate(-9deg); padding: 8px 16px; border: 3px solid var(--rose);
  border-radius: 10px; color: var(--rose); font: 900 20px var(--font-mono); letter-spacing: .06em; text-align: center; opacity: .85; pointer-events: none;
  background: color-mix(in srgb, var(--surface) 70%, transparent); }
.tb-id .mb-refunded small { display: block; font-size: 9.5px; letter-spacing: .1em; }
.tb-id .tb-items tr.cr td { color: var(--rose); }
.tb-id .mb-cn { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 14px; align-items: center; margin-top: -4px; padding: 16px 20px;
  border-radius: 0 0 12px 12px; border: 1px solid var(--border); border-top: 2px dashed var(--border); background: var(--surface); color: inherit; text-decoration: none; }
.tb-id .mb-cn + .mb-cn { margin-top: 0; border-radius: 0 0 12px 12px; }
.tb-id .mb-cn .ic { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; color: var(--rose); background: var(--rose-dim); }
.tb-id .mb-cn b { display: block; font-size: 14px; color: var(--text-1); }
.tb-id .mb-cn div > span { font: 600 11px var(--font-mono); color: var(--text-3); }
.tb-id .mb-cn .amt { font-size: 17px; font-weight: 900; color: var(--rose); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tb-id .mb-against { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: center; padding: 12px; border-radius: 14px; border: 1px solid var(--border);
  background: var(--surface-2); color: inherit; text-decoration: none; }
.tb-id .mb-against b { display: block; font-size: 13.5px; color: var(--text-1); }
.tb-id .mb-against .mono { font: 600 11px var(--font-mono); color: var(--text-3); }
.tb-id .tb-slip .amt.back { color: var(--rose); }
.tb-id .tb-paper .tb-clear { min-height: 118px; padding-inline-end: 140px; }
@media (max-width: 900px) { .tb-id .mb-cn { grid-template-columns: auto minmax(0, 1fr); } .tb-id .mb-cn .amt, .tb-id .mb-cn .hd-chip { grid-column: 2; justify-self: start; } }
@media (max-width: 620px) {
  .tb-id .mb-onway { grid-template-columns: minmax(0, 1fr); } .tb-id .mb-onway .coin { width: 48px; height: 48px; font-size: 18px; }
  .tb-id .mb-refunded { position: static; display: inline-block; transform: rotate(-4deg); margin: 0 0 14px; }
  .tb-id .tb-paper .tb-clear { padding-inline-end: 70px; }
}

/* What was withheld, owed or settled, at id (plan TB §8, TB10). */
.tb-id .wh-owed { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 18px 20px; border-radius: 20px; margin-bottom: 20px;
  border: 1px solid color-mix(in srgb, var(--rose) 40%, var(--border)); background: linear-gradient(110deg, color-mix(in srgb, var(--rose) 9%, var(--surface)), var(--surface) 65%); }
.tb-id .wh-owed.ok { border-color: color-mix(in srgb, var(--emerald) 40%, var(--border)); background: linear-gradient(110deg, color-mix(in srgb, var(--emerald) 10%, var(--surface)), var(--surface) 65%); }
.tb-id .wh-owed.wait { border-color: color-mix(in srgb, var(--violet) 35%, var(--border)); background: linear-gradient(110deg, color-mix(in srgb, var(--violet) 8%, var(--surface)), var(--surface) 65%); }
.tb-id .wh-owed .coin { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; color: #fff; background: var(--rose); }
.tb-id .wh-owed.ok .coin { background: var(--emerald); } .tb-id .wh-owed.wait .coin { background: var(--violet); }
.tb-id .wh-owed h2 { margin: 0 0 4px; font-size: 18px; font-weight: 900; letter-spacing: -.02em; color: var(--text-1); }
.tb-id .wh-owed p { margin: 0; font-size: 13px; color: var(--text-2); }
.tb-id .wh-owed .acts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
.tb-id .wh-owed .acts input[type=file] { display: none; }
@media (max-width: 760px) { .tb-id .wh-owed { grid-template-columns: auto minmax(0, 1fr); } .tb-id .wh-owed .acts { grid-column: 1 / -1; justify-content: flex-start; } }

/* ── Texts (plan NU, NU1; mockup nu/texts.html): the plans' texts draining into the credit behind them ── */
.tb-id .nu-tanks { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 2.2fr); gap:10px; }
.tb-id .nu-tank { position:relative; border-radius:16px; padding:16px 18px 14px; background:var(--surface-2); overflow:hidden; min-height:132px; }
.tb-id .nu-tank .fill { position:absolute; inset:auto 0 0 0; background:color-mix(in srgb, var(--c) 28%, transparent); border-top:2px solid var(--c); transition:height .6s ease; }
.tb-id .nu-tank .in { position:relative; display:flex; flex-direction:column; height:100%; gap:4px; }
.tb-id .nu-tank .k { font:600 10.5px var(--font-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--text-2); }
.tb-id .nu-tank .v { font-size:30px; font-weight:900; letter-spacing:-.03em; color:var(--text-1); line-height:1.05; }
.tb-id .nu-tank .v small { font-size:13px; font-weight:600; color:var(--text-2); letter-spacing:0; margin-left:4px; }
.tb-id .nu-tank .s { font-size:12.5px; color:var(--text-2); margin-top:auto; }
.tb-id .nu-pipe { display:flex; align-items:center; gap:8px; margin:10px 2px 0; font-size:12.5px; color:var(--text-2); }
.tb-id .nu-pace { display:flex; gap:14px; align-items:center; margin-top:14px; padding:12px 14px; border-radius:12px; border:1px solid var(--border); background:var(--surface); }
.tb-id .nu-pace b { font-size:22px; font-weight:900; letter-spacing:-.02em; color:var(--c); white-space:nowrap; }
.tb-id .nu-pace span { font-size:13px; color:var(--text-2); line-height:1.45; }
.tb-id .nu-days { display:grid; gap:3px; align-items:end; height:64px; }
.tb-id .nu-days i { display:block; border-radius:3px 3px 0 0; background:color-mix(in srgb, var(--accent) 35%, transparent); min-height:3px; }
.tb-id .nu-days i.big { background:var(--accent); }
.tb-id .nu-days i.fut { background:var(--surface-2); }
.tb-id .nu-days-lab { display:flex; justify-content:space-between; font:500 11px var(--font-mono); color:var(--text-3); margin-top:6px; }
.tb-id .nu-alert { display:flex; gap:12px; align-items:center; padding:13px 16px; border-radius:14px; margin-bottom:14px; }
.tb-id .nu-alert .ic { width:34px; height:34px; border-radius:10px; display:grid; place-items:center; flex:none; background:var(--surface); }
.tb-id .nu-alert b { color:var(--text-1); } .tb-id .nu-alert span { font-size:13px; color:var(--text-2); }
.tb-id .nu-alert.low { background:var(--amber-dim); } .tb-id .nu-alert.low .ic { color:var(--amber); }
.tb-id .nu-alert.out { background:var(--rose-dim); } .tb-id .nu-alert.out .ic { color:var(--rose); }
.tb-id .nu-alert.free { background:var(--surface-2); } .tb-id .nu-alert.free .ic { color:var(--text-2); }
.tb-id .nu-hist { list-style:none; margin:0; padding:0; }
.tb-id .nu-hist li { display:grid; grid-template-columns:30px minmax(0, 1fr) auto; gap:10px; align-items:center; padding:10px 0; border-top:1px solid var(--border); font-size:13px; color:var(--text-2); }
.tb-id .nu-hist li:first-child { border-top:0; }
.tb-id .nu-hist .d { width:30px; height:30px; border-radius:9px; display:grid; place-items:center; background:var(--surface-2); color:var(--text-2); font-size:12px; }
.tb-id .nu-hist .d.g { background:var(--emerald-dim); color:var(--emerald); }
.tb-id .nu-hist b { display:block; color:var(--text-1); font-weight:700; }
.tb-id .nu-hist .n { font:600 13px var(--font-mono); color:var(--text-1); white-space:nowrap; }
.tb-id .nu-hist .n.p { color:var(--emerald); }
.tb-id .nu-cols { display:grid; grid-template-columns:minmax(0, 1.6fr) minmax(0, 1fr); gap:16px; align-items:start; }
.tb-id .nu-stack { display:grid; gap:16px; }
@media (max-width: 900px) { .tb-id .nu-cols, .tb-id .nu-tanks { grid-template-columns:minmax(0, 1fr); } }
/* Buying credit (NU2): the price a text falls as the pack grows. */
.tb-id .nu-packs { display:grid; grid-template-columns:repeat(auto-fit, minmax(130px, 1fr)); gap:10px; }
.tb-id .nu-pack { display:flex; flex-direction:column; text-align:left; border:1.5px solid var(--border); border-radius:16px; padding:14px 14px 12px; background:var(--surface); cursor:pointer; font:inherit; color:inherit; }
.tb-id .nu-pack.on { border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-dim); }
.tb-id .nu-pack .q { font-size:22px; font-weight:900; letter-spacing:-.02em; color:var(--text-1); }
.tb-id .nu-pack .q small { font-size:12px; font-weight:600; color:var(--text-2); margin-left:4px; }
.tb-id .nu-pack .bar { height:46px; display:flex; align-items:flex-end; margin:10px 0 4px; }
.tb-id .nu-pack .bar i { display:block; width:100%; border-radius:6px 6px 2px 2px; background:linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 55%, transparent)); }
.tb-id .nu-pack .per { font:600 11.5px var(--font-mono); color:var(--emerald); }
.tb-id .nu-pack .cost { font-weight:800; color:var(--text-1); margin-top:4px; }
.tb-id .nu-means { margin-top:12px; padding:12px 14px; border-radius:12px; background:var(--surface-2); font-size:13.5px; color:var(--text-1); }
.tb-id .nu-note { display:flex; gap:9px; margin-top:10px; font-size:12.5px; color:var(--text-2); line-height:1.45; }
.tb-id .nu-note i { margin-top:2px; color:var(--text-3); }
.tb-id .nu-ways { display:flex; gap:8px; margin-top:8px; flex-wrap:wrap; }
.tb-id .nu-way { display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border:1.5px solid var(--border); border-radius:12px; background:var(--surface); font:600 13.5px var(--font-sans); color:var(--text-1); cursor:pointer; }
.tb-id .nu-way.on { border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-dim); }
.tb-id .nu-way i { color:var(--text-2); }
.tb-id .nu-bought { display:flex; gap:12px; align-items:center; padding:13px 16px; border-radius:14px; margin-bottom:14px; background:var(--emerald-dim); }
.tb-id .nu-bought i { color:var(--emerald); font-size:18px; }
.tb-id .nu-bought.wait { background:var(--surface-2); } .tb-id .nu-bought.wait i { color:var(--text-2); }
.tb-id .nu-bought span { font-size:13.5px; color:var(--text-1); }
.tb-id .tb-head .cn-btn { margin-left:auto; }

/* The sender name (plan NU, NU4; mockup nu/texts.html): a phone as it shows the text, and the name with each provider */
.tb-id .nu-sender { display:grid; grid-template-columns:240px minmax(0, 1fr); gap:20px; align-items:center; }
.tb-id .nu-phone { width:230px; border-radius:30px; padding:10px; background:#0d1117; box-shadow:0 18px 40px rgba(0,0,0,.25); margin:0 auto; }
.tb-id .nu-phone .scr { border-radius:22px; background:#f2f2f7; padding:14px 12px 18px; min-height:210px; color:#111; }
.tb-id .nu-phone .from { text-align:center; font:700 13px var(--font-sans); margin:6px 0 2px; }
.tb-id .nu-phone .from small { display:block; font-weight:500; font-size:10.5px; color:#6e6e73; }
.tb-id .nu-phone .bub { margin-top:14px; background:#e5e5ea; border-radius:16px 16px 16px 4px; padding:9px 11px; font-size:12.5px; line-height:1.4; }
.tb-id .nu-sender-k { font-size:12px; color:var(--text-2); margin-bottom:6px; }
.tb-id .nu-sender-v { font:800 22px var(--font-mono); color:var(--text-1); margin-bottom:12px; letter-spacing:.02em; }
.tb-id .nu-reg { display:grid; gap:8px; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); }
.tb-id .nu-reg > div { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:10px 12px; border-radius:11px; background:var(--surface-2); font-size:13px; color:var(--text-2); }
.tb-id .nu-reg > div > b { color:var(--text-1); }
.tb-id .nu-name-in { font-family:var(--font-mono); max-width:260px; letter-spacing:.04em; }
.tb-id .tb-box h3 .cn-btn { margin-left:auto; }
@media (max-width: 760px) { .tb-id .nu-sender { grid-template-columns:minmax(0, 1fr); } }
.tb-id .nu-sender-box { margin-top:16px; }