/* small.email prototype: app-level styles on top of tokens.css and styles.css. Tokens only, no new colours. */

/* reset a few doc-page rules from styles.css */
main{padding:0;min-width:0}
main:focus{outline:none}
.skip{position:fixed;left:12px;top:-60px;z-index:100;padding:8px 12px;border-radius:var(--radius-md);background:var(--action);color:var(--on-action);border:0;font-weight:500}
.skip:focus{top:12px;outline:2px solid var(--accent);outline-offset:2px}
.hide-sm{} .only-m{display:none!important}
.sp{flex:1}
.block{display:block}
.cap.block{margin-top:2px}
.spin{animation:none}
@media (prefers-reduced-motion:no-preference){.spin{animation:spin 900ms linear infinite}}
a.btn:hover{text-decoration:none}
a.btn.primary,a.btn.primary:hover{color:var(--on-action)}
a.btn.secondary,a.btn.secondary:hover,a.btn.ghost:hover{color:var(--text)}
a.btn.ghost{color:var(--text-2)}

/* page chrome */
.top .topnav{display:flex;gap:2px;margin-left:var(--space-3)}
.top .topnav a{padding:5px 8px;border-radius:var(--radius-md);color:var(--text-2);font-size:13px;line-height:20px}
.top .topnav a:hover{background:var(--surface-2);color:var(--text);text-decoration:none}
.top .topnav a[aria-current="page"]{color:var(--text);font-weight:500;background:var(--surface-2)}
.top .topnav.lnav{margin-left:0}
.top{min-width:0}
.shell,.land{min-height:100dvh;display:flex;flex-direction:column}
.shell>main,.land>main{flex:1}
.wrap{width:100%;max-width:1120px;margin:0 auto;padding-left:var(--space-5);padding-right:var(--space-5)}
.wrap-s{width:100%;max-width:760px;margin:0 auto;padding:var(--space-7) var(--space-5) var(--space-9)}
.wrap-m{width:100%;max-width:960px;margin:0 auto;padding:var(--space-7) var(--space-5) var(--space-9)}
.pfoot{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-4);padding:var(--space-5);border-top:1px solid var(--border);color:var(--text-3)}
.pfoot .cap{color:var(--text-3)}
.t{font-size:clamp(26px,4.4vw,var(--fs-title));line-height:1.18;letter-spacing:var(--ls-title);font-weight:500;overflow-wrap:anywhere}
.lede{color:var(--text-2);font-size:16px;line-height:26px;max-width:56ch}
.banner{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-3);padding:var(--space-3) var(--space-4);border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);color:var(--text)}
.banner svg{margin-top:2px}
.banner b{font-weight:500;display:block}
.banner p{color:var(--text-2);font-size:13px;line-height:20px;margin-top:2px}
.banner.success{background:var(--success-subtle)}.banner.success svg{color:var(--success)}
.banner.error{background:var(--danger-subtle);border-color:var(--danger)}.banner.error svg{color:var(--danger)}
.banner.warning{background:var(--warning-subtle)}.banner.warning svg{color:var(--warning)}
.banner.info svg{color:var(--text-2)}
.actions{display:flex;flex-wrap:wrap;gap:var(--space-2);align-items:center;margin-top:var(--space-5)}
.actions.c{justify-content:center}
.stack>*+*{margin-top:var(--space-4)}
.err a{color:inherit}

/* shared bits */
.tt{--x:0}
.toast{grid-template-columns:auto minmax(0,1fr) auto}
.toast .tact{display:flex;gap:2px;align-items:center;margin:-4px -4px -4px 0}
.badge{max-width:100%}
.badge svg.spin{animation:none}
@media (prefers-reduced-motion:no-preference){.badge svg.spin{animation:spin 900ms linear infinite}}
.dialog.wide{max-width:min(640px,calc(100vw - 24px));padding:var(--space-5)}
.dialog{max-width:min(400px,calc(100vw - 24px))}
dialog.dialog.wide{max-height:calc(100dvh - 24px);overflow:auto}
.dlg-hd{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);margin-bottom:var(--space-3)}
.dlg-hd h4{overflow-wrap:anywhere}
.dialog .foot{flex-wrap:wrap}
dialog.pal{width:calc(100vw - 24px);max-width:560px}
.palette .it .lbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.palette .it{min-width:0}
.palette .it kbd{flex:none}
.textarea{min-height:140px}
dl.keys{display:grid;gap:0}
dl.keys>div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:var(--space-3);padding:7px 0;border-top:1px solid var(--border);align-items:center}
dl.keys>div:first-child{border-top:0}
dl.keys dt{display:flex;gap:4px;flex-wrap:wrap;align-items:center;color:var(--text-3);font-size:12px}
dl.keys dd{color:var(--text-2);font-size:13px}

/* ===== landing ===== */
.land .top{border-bottom-color:transparent}
.l-hero{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:var(--space-8);align-items:end;padding-top:clamp(48px,10vw,128px);padding-bottom:clamp(48px,9vw,112px)}
.l-hero h1{font-size:clamp(34px,6.4vw,64px);line-height:1.04;letter-spacing:-0.04em;font-weight:500;max-width:14ch;overflow-wrap:break-word}
.l-hero .lede{margin-top:var(--space-5);font-size:clamp(16px,2.2vw,19px);line-height:1.55}
.l-form{margin-top:var(--space-6);max-width:460px}
.l-form .fgroup>*{min-width:0}
.l-stage{min-width:0}
.inv{border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--bg);padding:var(--space-5);box-shadow:var(--shadow-float);display:grid;gap:var(--space-3)}
.inv-h{display:flex;gap:var(--space-3);align-items:center;min-width:0}
.inv-h b{display:block;font-weight:500;font-size:14px;line-height:20px}
.inv-h span{display:block;font-size:13px;line-height:20px;color:var(--text-3);overflow-wrap:anywhere}
.inv-s{font-size:20px;line-height:28px;letter-spacing:-0.015em;font-weight:500;padding-top:var(--space-2);border-top:1px solid var(--border)}
.inv p{color:var(--text-2);font-size:15px;line-height:24px}
.inv-f{padding-top:var(--space-1)}
.l-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 var(--space-6);counter-reset:s;list-style:none}
.l-steps li{border-top:1px solid var(--border-strong);padding-top:var(--space-4);display:grid;gap:var(--space-2);align-content:start}
.l-steps .n{font-size:13px;color:var(--accent);font-weight:500}
.l-steps h3{font-size:var(--fs-heading);line-height:var(--lh-heading);letter-spacing:var(--ls-heading);font-weight:500}
.l-steps p{color:var(--text-2);font-size:15px;line-height:24px;max-width:36ch}
.l-steps li:nth-child(2){margin-top:var(--space-6)}
.l-steps li:nth-child(3){margin-top:var(--space-7)}
.l-stage .cap{margin-top:var(--space-3)}
.l-sec{padding-top:clamp(48px,8vw,96px)}
.l-sec:last-of-type{padding-bottom:var(--space-9)}
.l-h{font-size:var(--fs-heading);line-height:var(--lh-heading);letter-spacing:var(--ls-heading);font-weight:500;color:var(--text-2);margin-bottom:var(--space-5)}
.l-feat{display:grid;margin:0}
.l-row{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--space-5);padding:var(--space-4) 0;border-top:1px solid var(--border)}
.l-row:last-child{border-bottom:1px solid var(--border)}
.l-row dt{font-weight:500;font-size:16px;line-height:24px;letter-spacing:-0.01em}
.l-row dd{color:var(--text-2);font-size:15px;line-height:24px;max-width:58ch}
.l-price{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--space-5);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-6)}
.l-price .amt{font-size:clamp(44px,8vw,72px);line-height:1;letter-spacing:-0.06em;font-weight:500}
.l-price .amt .mono{font-weight:500}
.l-price .per{color:var(--text-2);margin:var(--space-2) 0 var(--space-4)}
.l-price-c{display:grid;gap:var(--space-3);align-content:start;justify-items:start}
.faq{border-top:1px solid var(--border)}
.faq details{border-bottom:1px solid var(--border)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);padding:var(--space-4) 0;font-weight:500;font-size:16px;line-height:24px;cursor:pointer;list-style:none;border-radius:var(--radius-sm)}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{color:var(--text-2)}
.faq .mi{display:none}.faq details[open] .mi{display:block}.faq details[open] .pl{display:none}
.faq details p{padding:0 var(--space-7) var(--space-5) 0;color:var(--text-2);font-size:15px;line-height:24px;max-width:62ch}
.l-end{display:grid;gap:var(--space-5);justify-items:start}
.l-end h2{font-size:clamp(26px,4.4vw,var(--fs-title));line-height:1.18;letter-spacing:var(--ls-title);font-weight:500;max-width:20ch}
.l-end-a{display:flex;gap:var(--space-2);flex-wrap:wrap}
@media (prefers-reduced-motion:no-preference){
  .l-hero>*{animation:rise 420ms var(--ease-out) both}
  .l-hero>*:nth-child(2){animation-delay:80ms}
}
@keyframes rise{from{opacity:0;transform:translateY(8px)}}

/* ===== pricing (landing summary and #/pricing) ===== */
.top .topnav.lnav{gap:2px;align-items:center}
.top .topnav.lnav a{display:inline-flex;align-items:center;height:var(--control-h-sm);padding:0 10px;font-weight:500}
.l-plans,.p-plans{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4)}
.l-plan,.plan{border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-6);display:grid;gap:var(--space-2);align-content:start;min-width:0}
.plan.paid{border-color:var(--border-strong)}
.l-plan-h,.plan-h{display:flex;gap:var(--space-2);align-items:center;flex-wrap:wrap}
.l-plan-h b,.plan-h h2{font-weight:500;font-size:var(--fs-subheading);line-height:var(--lh-subheading);letter-spacing:var(--ls-subheading)}
.l-plan .amt,.plan .amt{font-size:clamp(36px,6vw,52px);line-height:1.05;letter-spacing:-0.05em;font-weight:500;margin-top:var(--space-2)}
.l-plan .amt .mono,.plan .amt .mono{font-weight:500}
.l-plan .amt .u,.plan .amt .u{font-size:15px;letter-spacing:0;color:var(--text-2);font-weight:400}
.plan .per{color:var(--text-2);font-size:15px;line-height:24px}
.plan>.btn{justify-self:start;margin:var(--space-3) 0 var(--space-2)}
.feat{list-style:none;padding:0;margin:0;display:grid;gap:var(--space-2);border-top:1px solid var(--border);padding-top:var(--space-4)}
.feat li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-2);align-items:start;font-size:14px;line-height:20px}
.feat li svg{margin-top:2px;color:var(--text-2)}
.feat li.no{color:var(--text-3)}
.feat li.no svg{color:var(--text-3)}
.feat li .sr{grid-column:2}
.p-hero{padding-top:clamp(40px,8vw,96px);padding-bottom:var(--space-6);display:grid;gap:var(--space-4);justify-items:start}
.p-hero h1{font-size:clamp(34px,6vw,var(--fs-display));line-height:1.08;letter-spacing:var(--ls-display);font-weight:500}
.p-cur{display:grid;gap:var(--space-2);justify-items:start}
.p-cur .tabs{border-bottom:1px solid var(--border)}
.p-cur .tab[aria-checked="true"]{color:var(--text);font-weight:500}
.p-cur .tab[aria-checked="true"]::after{content:"";position:absolute;left:8px;right:8px;bottom:-1px;height:2px;background:var(--text)}
.calc{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--space-5);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-6);align-items:start}
.calc .input{max-width:160px}
.calc-o{display:grid;gap:var(--space-2)}
.calc-n{font-size:clamp(28px,4.4vw,40px);line-height:1.1;letter-spacing:-0.04em;font-weight:500}
.calc-n .mono{font-weight:500}
.calc-n .muted{font-size:15px;letter-spacing:0;font-weight:400}
.tbl.vs th[scope="row"]{font-weight:500;font-size:14px;color:var(--text);background:transparent;padding:10px 16px;border-bottom:1px solid var(--border);text-align:left}
.tbl.vs tbody tr:last-child th{border-bottom:0}
.tw+.note{margin-top:var(--space-3)}
@media (max-width:860px){
  .l-plans,.p-plans,.calc{grid-template-columns:minmax(0,1fr)}
  .top .topnav.lnav a.hide-sm{display:none}
  .l-plan,.plan,.calc{padding:var(--space-5)}
}

/* ===== marketing navbar and footer (site.js) ===== */
.mtop{position:sticky;top:0;z-index:var(--z-sticky);background:color-mix(in srgb,var(--bg) 88%,transparent);-webkit-backdrop-filter:saturate(1.2) blur(10px);backdrop-filter:saturate(1.2) blur(10px);border-bottom:1px solid transparent;transition:border-color var(--dur-fast) var(--ease-out)}
.mtop.is-scrolled,.mtop.is-open{border-bottom-color:var(--border)}
.mtop-in{height:60px;display:flex;align-items:center;gap:var(--space-3);padding:0 var(--space-5);max-width:1120px;margin:0 auto;min-width:0}
@media (min-width:1536px){.mtop-in{max-width:1200px}}
.mtop .wm{margin-right:var(--space-4)}
.mlinks ul,.mmenu ul{list-style:none;margin:0;padding:0}
.mlinks ul{display:flex;gap:2px;align-items:center}
.mlinks a,.msignin{display:inline-flex;align-items:center;gap:6px;height:var(--control-h-sm);padding:0 10px;border-radius:var(--radius-md);color:var(--text-2);font-size:14px;line-height:20px;font-weight:500;white-space:nowrap}
.mlinks a:hover,.msignin:hover{background:var(--surface-2);color:var(--text);text-decoration:none}
.mlinks a[aria-current="page"]{color:var(--text);background:var(--surface-2)}
.mlinks a:focus-visible,.msignin:focus-visible,.mmenu a:focus-visible,.mfoot a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mlinks .badge,.mmenu .badge{height:18px;font-size:11px}
.mburger{display:none}
.mburger .ic-close{display:none}
.mtop.is-open .mburger .ic-open{display:none}
.mtop.is-open .mburger .ic-close{display:block}
.mmenu{border-top:1px solid var(--border);padding:var(--space-3) var(--space-4) var(--space-4);background:var(--bg);max-height:calc(100dvh - 60px);overflow-y:auto}
.mmenu ul{display:grid;gap:2px}
.mmenu li a{display:flex;align-items:center;gap:var(--space-2);min-height:44px;padding:0 var(--space-3);border-radius:var(--radius-md);color:var(--text);font-size:16px;font-weight:500}
.mmenu li a:hover{background:var(--surface-2);text-decoration:none}
.mmenu li a[aria-current="page"]{background:var(--surface-2)}
.mmenu-a{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2);margin-top:var(--space-3);padding-top:var(--space-3);border-top:1px solid var(--border)}
.land h2[tabindex="-1"]:focus{outline:none}
.mfoot{border-top:1px solid var(--border)}
.mf-in{display:grid;grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr));gap:var(--space-6);padding-top:var(--space-7);padding-bottom:var(--space-6)}
.mf-brand{display:grid;gap:var(--space-2);align-content:start}
.mf-brand .cap{color:var(--text-2);max-width:32ch}
.mf-eu{display:inline-flex;gap:6px;align-items:center}
.mf-col h2{font-size:13px;line-height:20px;font-weight:500;color:var(--text);margin-bottom:var(--space-2)}
.mf-col ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.mf-col a{color:var(--text-2);font-size:14px;line-height:24px;border-radius:var(--radius-sm)}
.mf-col a:hover{color:var(--text)}
.mf-base{position:relative;display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-3);align-items:center;padding-top:var(--space-4);padding-bottom:var(--space-6)}
.mf-base::before{content:"";position:absolute;top:0;left:var(--space-5);right:var(--space-5);border-top:1px solid var(--border)}
@media (max-width:640px){.mf-base::before{left:var(--space-4);right:var(--space-4)}}
.legal-b .banner p{margin-top:2px}
@media (max-width:960px){
  .mlinks,.msignin,.mstart{display:none}
  .mburger{display:inline-flex}
  .mtop-in{padding:0 var(--space-4)}
}
@media (max-width:760px){
  .mf-in{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mf-brand{grid-column:1/-1}
}

/* ===== onboarding (onboarding.js) ===== */
.steps{display:flex;gap:var(--space-5);flex-wrap:wrap;margin-bottom:var(--space-6);padding:0;list-style:none}
.steps li{display:flex;align-items:center;gap:var(--space-2);color:var(--text-3);font-size:13px}
.steps li a{display:flex;align-items:center;gap:var(--space-2);color:inherit;border-radius:var(--radius-sm)}
.steps li a:hover{color:var(--text);text-decoration:none}
.steps .num{width:22px;height:22px;display:grid;place-items:center;border:1px solid var(--border-strong);border-radius:var(--radius-md);font-size:12px;font-weight:500}
.steps li.now{color:var(--text);font-weight:500}
.steps li.now .num{border-color:var(--accent);color:var(--accent)}
.steps li.done{color:var(--text-2)}
.steps li.done .num{background:var(--surface-2)}
.steps svg{width:12px;height:12px}
.ob-wide{max-width:960px}
.ob-card .lede{margin:var(--space-3) 0 var(--space-5)}
.ob-card .dn,.dn-h{overflow-wrap:anywhere}
.ob-card .dn{font-size:.82em;background:var(--surface-2);border-radius:var(--radius-sm);padding:2px 6px}
.ob-card .t:focus{outline:none}
.ob-card>*+.banner,.ob-card .live{margin-top:var(--space-4)}
.ob-card .note{margin-top:var(--space-6)}
.plan-note{display:flex;gap:var(--space-2);align-items:flex-start;font-size:13px;line-height:20px;color:var(--text-2);margin:calc(var(--space-2) * -1) 0 var(--space-5)}
.plan-note svg{flex:none;margin-top:2px;color:var(--text-3)}
.linkbtn{background:none;border:0;padding:0;color:var(--accent);font-size:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.sh3{font-size:var(--fs-subheading);line-height:var(--lh-subheading);letter-spacing:var(--ls-subheading);font-weight:500;margin:var(--space-7) 0 var(--space-2)}
.sh3 .opt{font-weight:400;color:var(--text-3);font-size:13px;margin-left:var(--space-1)}
.ob-form .sh3{margin-top:var(--space-6)}
.cap.meta{margin-top:var(--space-3);color:var(--text-3)}
.meta+.cap{margin-top:var(--space-1);color:var(--text-3)}
.okline{display:inline-flex;align-items:center;gap:var(--space-2);color:var(--success);font-size:14px;font-weight:500;margin-bottom:var(--space-3)}
.fgrid2{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:var(--space-3);align-items:start}
.ob-form .actions{margin-top:var(--space-3)}
.ob-card .tw{margin-top:var(--space-5);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}
.actions.next{margin-top:var(--space-5)}
.backlink{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--text-2);margin-bottom:var(--space-3)}
.backlink:hover{color:var(--text)}

/* ===== domain setup: records, status, guides (dns.js) ===== */
.dbadges{display:inline-flex;gap:var(--space-1);flex-wrap:wrap}
/* segmented radio group */
.seg{display:inline-flex;flex-wrap:wrap;gap:2px;padding:2px;border:1px solid var(--border-strong);border-radius:var(--radius-md);background:var(--bg);max-width:100%}
.seg [role="radio"]{height:26px;padding:0 9px;border:0;border-radius:var(--radius-sm);background:transparent;color:var(--text-2);font-size:13px;line-height:20px;white-space:nowrap;cursor:pointer}
.seg [role="radio"]:hover{background:var(--surface-2);color:var(--text)}
.seg [role="radio"][aria-checked="true"]{background:var(--surface-3);color:var(--text);font-weight:500}
.seg [role="radio"]:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
/* status summary: one line each for receiving and sending */
.dsum{border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-4);margin-bottom:var(--space-5)}
.dsum .actions{margin-top:var(--space-4)}
.ob-card .dsum .live,.dsum .live{margin-top:0}
.dsum-l{display:grid;gap:var(--space-2)}
.dsum-r{display:grid;grid-template-columns:88px auto minmax(0,1fr);gap:var(--space-2) var(--space-3);align-items:center;font-size:14px;line-height:20px}
.dsum-r b{font-weight:500}
.dsum-r .badge{justify-self:start}
.dsum-t{color:var(--text-2);font-size:13px;min-width:0}
/* Cloudflare box */
.autobox{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:var(--space-3);align-items:center;border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-3) var(--space-4);margin-bottom:var(--space-5)}
.autobox-i{width:36px;height:36px;display:grid;place-items:center;border-radius:var(--radius-md);background:var(--surface-2);color:var(--text-2)}
.autobox b{font-weight:500;display:block}
.autobox p{font-size:13px;line-height:20px;color:var(--text-2)}
/* toolbar above the records */
.rtools{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);flex-wrap:wrap;margin-bottom:var(--space-4)}
.rtools-f{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap;min-width:0}
.rtools .lab{font-size:12px;color:var(--text-3);font-weight:500}
.rtools .seg [role="radio"]{font-family:var(--font-sans)}
/* the record table: every record in one list */
.rtbl-w{border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}
.tbl.rtbl td{vertical-align:top}
.tbl.rtbl th{white-space:nowrap}
.tbl.rtbl .rt{width:1%;white-space:nowrap;font-size:13px;padding-top:12px}
.tbl.rtbl td[data-l="Name"]{width:22%}
.tbl.rtbl.short td[data-l="Name"]{width:1%}
.tbl.rtbl.short td[data-l="Name"] .mono{white-space:nowrap}
.tbl.rtbl .rn{width:19%}
.tbl.rtbl .rs{width:1%;white-space:nowrap}
.tbl.rtbl .rs .badge{display:inline-flex}
.tbl.rtbl .rs .linkbtn{display:block;margin-top:4px;font-size:13px}
.cell-c{display:flex;align-items:flex-start;gap:var(--space-1);min-width:0}
.cell-c .mono{flex:1;min-width:0;font-size:12.5px;line-height:20px;padding-top:3px;overflow-wrap:anywhere}
.cell-c .btn.icon.sm{--h:26px;flex:none}
.prio{display:flex;align-items:center;gap:var(--space-1);font-size:12px;color:var(--text-3);margin-top:2px}
.prio .mono{font-size:12.5px;color:var(--text)}
.prio .btn.icon.sm{--h:24px}
.need-t{display:block;font-size:13px;line-height:20px;font-weight:500;padding-top:3px}
.need-o{font-weight:400;color:var(--text-3)}
.need-p{display:block;font-size:12.5px;line-height:18px;color:var(--text-3)}
.tbl.rtbl tr.st-locked td{color:var(--text-3)}
.tbl.rtbl tr.st-locked .cell-c .mono{color:var(--text-3)}
.tbl.rtbl tr.st-locked .need-t{color:var(--text-2)}
.tbl.rtbl tr.rrow:has(+ tr.rsub) td{border-bottom:0}
.tbl.rtbl tr.rsub td{padding-top:0}
.tbl.rtbl tr.rsub:hover td{background:transparent}
.rnote{display:flex;gap:var(--space-2);align-items:flex-start;font-size:13px;line-height:20px;color:var(--text-2);max-width:86ch}
.rnote svg{flex:none;margin-top:2px;color:var(--text-3)}
.rhint{color:var(--text-3);margin:var(--space-2) 0 var(--space-5)}
.rec-err{border-radius:var(--radius-md);background:var(--danger-subtle);padding:var(--space-3);display:grid;gap:var(--space-2)}
.rec-cmp{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3)}
.rec-cmp>div{display:grid;gap:2px;min-width:0}
.rec-cmp .lab{font-size:12px;line-height:16px;color:var(--text-3);font-weight:500}
.rec-cmp .mono{font-size:12.5px;line-height:20px;overflow-wrap:anywhere;color:var(--text)}
.rec-err p{display:flex;gap:var(--space-2);align-items:flex-start;font-size:13px;line-height:20px;color:var(--danger)}
.rec-err p svg{flex:none;margin-top:3px}
.other-d{margin-top:var(--space-5)}
/* guides and the propagation note */
.guides{display:grid;gap:var(--space-2);margin-top:var(--space-3)}
.guide summary .badge{margin-left:var(--space-2)}
.gsteps{padding-left:20px;display:grid;gap:var(--space-2);font-size:14px;line-height:20px;color:var(--text-2)}
.gsteps li::marker{color:var(--text-3);font-family:var(--font-mono);font-size:12px}
.gtip{display:flex;gap:var(--space-2);align-items:flex-start;font-size:13px;line-height:20px;color:var(--text-2);background:var(--surface);border-radius:var(--radius-md);padding:var(--space-2) var(--space-3)}
.gtip svg{flex:none;margin-top:2px;color:var(--text-3)}
.prop p{font-size:14px;line-height:20px;color:var(--text-2);max-width:72ch}
/* Cloudflare dialog list */
.cf-list{list-style:none;display:grid;gap:4px;margin:var(--space-3) 0;padding:var(--space-3);border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface)}
.cf-list .rec-type{flex:none;font-size:12px;line-height:20px;padding:0 6px;border-radius:var(--radius-sm);background:var(--surface-2);color:var(--text)}
.cf-list li{display:flex;gap:var(--space-2);align-items:center;font-size:13px;overflow-wrap:anywhere}
#dcf-body>p{font-size:14px;line-height:20px;color:var(--text-2)}
#dcf-body .foot{margin-top:var(--space-4)}
/* settings detail */
.rtools-wrap .rtools{margin-bottom:var(--space-3)}
@media (max-width:720px){
  .dsum-r{grid-template-columns:auto minmax(0,1fr)}
  .dsum-t{grid-column:1 / -1}
  .autobox{grid-template-columns:auto minmax(0,1fr)}
  .autobox .btn{grid-column:1 / -1;justify-self:start}
  .rec-cmp{grid-template-columns:minmax(0,1fr)}
  .fgrid2{grid-template-columns:minmax(0,1fr)}
  .tbl.rtbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .tbl.rtbl,.tbl.rtbl tbody,.tbl.rtbl tr,.tbl.rtbl td{display:block;width:100%!important}
  .tbl.rtbl tr{padding:var(--space-2) var(--space-4)}
  .tbl.rtbl tr.rrow{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:var(--space-3);border-top:1px solid var(--border)}
  .tbl.rtbl tbody tr.rrow:first-child{border-top:0}
  .tbl.rtbl tr.rrow td{grid-column:1 / -1}
  .tbl.rtbl tr.rrow td.rt{grid-column:1;grid-row:1;width:auto!important;padding:4px 0}
  .tbl.rtbl tr.rrow td.rs{grid-column:2;grid-row:1;width:auto!important;display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);white-space:normal}
  .tbl.rtbl .rs .linkbtn{display:inline;margin:0}
  .tbl.rtbl tr.rsub{padding-top:0}
  .tbl.rtbl td{padding:4px 0;border:0!important}
  .tbl.rtbl td[data-l]:not(.rt):not(.rs)::before{content:attr(data-l);display:block;font-size:12px;line-height:16px;color:var(--text-3);font-weight:500}
  .tbl.rtbl tbody tr:hover td{background:transparent}
}

/* ===== settings ===== */
.stabs{margin:var(--space-5) 0 var(--space-6)}
.stabs .tab{text-decoration:none}
.stabs .tab[aria-current="page"]{color:var(--text);font-weight:500}
.stabs .tab[aria-current="page"]::after{content:"";position:absolute;left:8px;right:8px;bottom:-1px;height:2px;background:var(--text)}
.stabs .tab:hover{text-decoration:none}
.sh{font-size:var(--fs-heading);line-height:var(--lh-heading);letter-spacing:var(--ls-heading);font-weight:500;display:flex;gap:var(--space-2);align-items:center;flex-wrap:wrap}
.sh2{font-size:var(--fs-subheading);line-height:var(--lh-subheading);letter-spacing:var(--ls-subheading);font-weight:500;margin:var(--space-7) 0 var(--space-3)}
.spanel>.lede{margin:var(--space-2) 0 var(--space-5);font-size:15px;line-height:24px}
.spanel>.sh2:first-of-type{margin-top:var(--space-6)}
.addrow{margin-bottom:var(--space-5)}
.addrow .fgroup{max-width:520px}
.fgrid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr) auto;gap:var(--space-3);align-items:end}
.fgrid .btn{align-self:end}
.addrow .help,.addrow .err,.addrow .cap{display:flex;margin-top:var(--space-2)}
.dlist{list-style:none}
.drow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-2) var(--space-4);padding:var(--space-3) var(--space-4);border-top:1px solid var(--border);align-items:center}
.drow:first-child{border-top:0}
.dmain{display:flex;gap:var(--space-3);align-items:center;flex-wrap:wrap;min-width:0}
.dname{font-size:14px;overflow-wrap:anywhere}
.dmeta{grid-column:1}
.dact{display:flex;gap:var(--space-1);flex-wrap:wrap;grid-row:1 / span 2;grid-column:2;justify-content:flex-end}
.derr{grid-column:1 / -1;margin-top:2px}
.derr.err{display:flex;gap:6px;align-items:flex-start;font-size:13px;line-height:20px;color:var(--danger)}
.derr svg{margin-top:2px}
.tbl .r{text-align:right;white-space:nowrap}
.tbl td{overflow-wrap:anywhere}
.tbl .num{text-align:left}
.bill{display:grid;gap:var(--space-5);margin-top:var(--space-5)}
.bill .lab,.setrow .lab{font-weight:500;font-size:14px;line-height:20px}
.bill .bv{display:flex;gap:var(--space-2);align-items:center;flex-wrap:wrap}
.setrow{display:flex;justify-content:space-between;align-items:center;gap:var(--space-5);padding:var(--space-4) 0;border-top:1px solid var(--border)}
.setrow:first-of-type{border-top:0}
.setrow>div:first-child{min-width:0}
.setrow .help{font-size:13px;color:var(--text-3)}
.setrow .select.narrow{width:200px;flex:none}
.setrow .select.narrow.wide{width:260px}
.setrow .switch{flex:none}
.sh2+.setrow{border-top:0}

/* ===== inbox ===== */
body{overflow-x:clip}
#app[data-view="inbox"]{height:100dvh;overflow:hidden}
.app.full{height:100dvh;border:0;border-radius:0;grid-template-columns:232px minmax(0,1fr);position:relative}
.app.full .side{overflow:hidden;gap:var(--space-3)}
.app.full .side .scroll{overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent;display:grid;gap:var(--space-3);align-content:start}
.app.full .side .brand a.wm{display:inline-flex}
.app.full .dsw{gap:4px}
.app.full .dsw label{font-size:12px;color:var(--text-3);font-weight:500}
.app.full .dsw select{height:var(--field-h-sm);font-size:13px;padding-right:32px}
.app.full .dsw .select>svg{right:10px}
.btn kbd.onbtn{background:transparent;border-color:color-mix(in srgb,var(--on-action) 35%,transparent);color:var(--on-action);height:18px;min-width:18px;margin-left:auto}
.btn.primary:has(kbd.onbtn){justify-content:flex-start}
.nav button.ni{width:100%;border:0;background:transparent;text-align:left;font:inherit}
.nav kbd.cnt{margin-left:auto;height:18px;min-width:18px;background:transparent;font-size:11px}
.nav a,.nav button.ni{color:var(--text-2)}
.mail .main{display:grid;grid-template-rows:auto minmax(0,1fr);min-width:0;min-height:0}
.strip2{display:flex;align-items:center;gap:var(--space-3);padding:10px 16px;border-bottom:1px solid var(--border);min-width:0}
.strip2 .search{position:relative;flex:1;max-width:520px;min-width:0}
.strip2 .search .fbox{height:var(--field-h)}
.strip2 .cap{white-space:nowrap}
.mailbody{display:grid;grid-template-columns:minmax(300px,360px) minmax(0,1fr);min-height:0;min-width:0}
.mlist{min-width:0;min-height:0;display:flex;flex-direction:column}
.mlist .hd{display:flex;align-items:center;gap:var(--space-2);height:auto;min-height:37px;padding:6px 16px;flex:none}
.mlist .hd h1{font-size:14px;line-height:20px;font-weight:500;letter-spacing:0}
.mlist .rl{overflow-y:auto;overflow-x:hidden}
.rl-ul{list-style:none;margin:0;padding:0}
.rl-ul li+li .row{border-top:1px solid var(--border)}
.rl-ul .row{padding:10px 16px;display:grid;text-decoration:none;color:var(--text-2)}
.rl-ul .row:hover{text-decoration:none;color:var(--text-2)}
.row[aria-current="true"]{background:var(--surface-2);box-shadow:inset 2px 0 0 var(--accent)}
.row .meta{display:inline-flex;gap:6px;align-items:center;flex:none}
.row .star{color:var(--text-2);display:inline-flex}
.row .star svg{width:12px;height:12px}
.row .tagf{font:500 11px/16px var(--font-mono);color:var(--text-3);border:1px solid var(--border);border-radius:3px;padding:0 3px;margin-right:4px}
.row.unread .when{color:var(--text-2)}
.row:focus-visible{outline-offset:-2px}
.skrows{padding:0}
.skrow{padding:14px 16px;border-top:1px solid var(--border)}
.skrow:first-child{border-top:0}
.pane{min-width:0;border-left:1px solid var(--border)}
.pane .tb{flex:none;min-width:0}
.pane .msg{overflow-y:auto;overflow-x:hidden;padding:var(--space-5) var(--space-6)}
.pane .msg:focus-visible{outline-offset:-2px}
.pane h2.subject{margin:0 0 var(--space-4);font-size:20px;line-height:28px;letter-spacing:-0.015em;font-weight:500;overflow-wrap:anywhere}
.who2{min-width:0}
.who2 .wtx{min-width:0}
.who2 .wtx span{overflow-wrap:anywhere}
.who2 .when{white-space:nowrap}
.lbls{display:flex;gap:4px;margin:calc(var(--space-2) * -1) 0 var(--space-4);flex-wrap:wrap}
.prose{overflow-wrap:anywhere}
.prose .snip{margin:var(--space-3) 0;white-space:pre-wrap;overflow-wrap:anywhere;font-size:12.5px}
.pane .reply{flex:none}
.pane-empty{flex:1;display:grid;place-items:center;min-height:0}
.pane-empty .cap{margin-top:var(--space-2)}
.mlist .empty{padding:var(--space-7) var(--space-5)}
.tip .tipbox{z-index:var(--z-tooltip)}
.pane .tb .tip:first-of-type .tipbox{left:0;transform:translate(0,2px)}
.pane .tb .tip:first-of-type:hover .tipbox,.pane .tb .tip:first-of-type:focus-within .tipbox{transform:none}
.btn[aria-pressed="true"] svg{color:var(--accent)}
.scrim-m{display:none}

/* compose */
dialog#dlg-compose{max-width:min(600px,calc(100vw - 24px))}
.cmp{display:grid;gap:var(--space-4)}
.cmp .dlg-hd{margin-bottom:0}
.cmp .foot{display:flex;align-items:center;gap:var(--space-2);margin-top:0}
.cmp .foot .cap{color:var(--text-3)}

/* ===== responsive ===== */
@media (max-width:1100px){
  .fgrid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .fgrid .btn{grid-column:1 / -1;justify-self:start}
  .app.full{grid-template-columns:208px minmax(0,1fr)}
  .mailbody{grid-template-columns:minmax(260px,320px) minmax(0,1fr)}
}
@media (max-width:900px){
  .only-m{display:inline-flex!important}
  .hide-s{display:none!important}
  .app.full{grid-template-columns:minmax(0,1fr)}
  .app.full .side{position:fixed;z-index:var(--z-menu);inset:0 auto 0 0;width:min(280px,86vw);transform:translateX(-102%);visibility:hidden;transition:transform var(--dur-base) var(--ease-out),visibility 0s linear var(--dur-base);box-shadow:none}
  .app.menu-open .side{transform:none;visibility:visible;transition:transform var(--dur-base) var(--ease-out);box-shadow:var(--shadow-modal)}
  .app.menu-open .scrim-m{display:block;position:fixed;inset:0;z-index:calc(var(--z-menu) - 1);background:var(--overlay);border:0;padding:0}
  .mailbody{grid-template-columns:minmax(0,1fr)}
  #inbox-root[data-pane="list"] .pane{display:none}
  #inbox-root[data-pane="message"] .mlist{display:none}
  .pane{border-left:0}
  .strip2{padding:8px 12px;gap:var(--space-2)}
  .pane .msg{padding:var(--space-4)}
  .pane .reply{margin:0 var(--space-4) var(--space-4)}
  .strip2 .search{max-width:none}
  .pane .tb{padding:0 6px}
}
@media (max-width:860px){
  .l-steps{grid-template-columns:minmax(0,1fr);gap:var(--space-5)}
  .l-steps li:nth-child(n){margin-top:0}
  .l-hero{grid-template-columns:minmax(0,1fr);gap:var(--space-7);align-items:start}
  .l-row,.l-price{grid-template-columns:minmax(0,1fr);gap:var(--space-2)}
  .l-price{padding:var(--space-5);gap:var(--space-4)}
  .top{padding:0 var(--space-4)}
  .top .topnav{display:none}
  .top .topnav.lnav{display:flex}
}
@media (max-width:640px){
  .wrap,.wrap-s,.wrap-m{padding-left:var(--space-4);padding-right:var(--space-4)}
  .wrap-s,.wrap-m{padding-top:var(--space-6)}
  .drow{grid-template-columns:minmax(0,1fr)}
  .dact{grid-row:auto;grid-column:1;justify-content:flex-start}
  .setrow{flex-wrap:wrap;gap:var(--space-3)}
  .setrow .select.narrow,.setrow .select.narrow.wide{width:100%}
  .fgrid{grid-template-columns:minmax(0,1fr)}
  .faq details p{padding-right:0}
  .pfoot{padding:var(--space-4)}
  .top .btn.sm:not(.icon){padding:0 8px}
  dl.keys>div{grid-template-columns:minmax(0,1fr)}
  .steps{gap:var(--space-3)}
  .steps .tx{display:none}
  .steps li.now .tx{display:inline}
}
@media (max-width:380px){
  .top{gap:var(--space-2);padding:0 var(--space-3)}
  .top .wm b{display:none}
  .top .wm::after{content:""}
  .toast-host{right:var(--space-3);left:var(--space-3);bottom:var(--space-3);justify-items:stretch}
  .toast{max-width:none}
}
.toast-host{max-width:calc(100vw - 24px)}
@media (min-width:1536px){ .wrap{max-width:1200px} }


/* ===== persona: badge, floating panel, sidebar identity ===== */
.pbadge svg{width:12px;height:12px}
.top .pbadge{margin-left:var(--space-1)}
.side-p{display:flex;align-items:center;gap:var(--space-2);min-width:0;padding:0 8px;flex-wrap:wrap}
.side-p .cap{color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.who-side{display:flex;align-items:center;gap:var(--space-2);padding:6px 8px;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg);min-width:0}
.who-side .av{width:28px;height:28px}
.who-side>div{min-width:0}
.who-side b{display:block;font-weight:500;font-size:13px;line-height:18px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.who-side span.mono{display:block;font-size:11.5px;line-height:16px;color:var(--text-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.pp{position:fixed;right:var(--space-3);bottom:var(--space-3);z-index:15;display:flex;flex-direction:column;align-items:flex-end;gap:var(--space-2);max-width:calc(100vw - 24px);pointer-events:none}
.pp>*{pointer-events:auto}
/* the floating Prototype panel: dashed accent edge so it never reads as product UI */
.pp .fbtn{border:1px dashed var(--accent)}
.pp .fbtn b{font-weight:500}
.pp .fpanel{border:1px dashed var(--accent);width:min(380px,calc(100vw - 16px));max-height:calc(100dvh - 64px);overflow-y:auto}
.pp-tt{display:flex;align-items:center;gap:var(--space-2);min-width:0;font-size:13px}
.pp-tt svg{color:var(--accent);flex:none}
.pp-tt b{font-weight:500}
.pp-tt .cap{color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pp-sec{display:grid;gap:var(--space-3);padding:var(--space-3) 14px;border-bottom:1px solid var(--border)}
.pp-sec.pp-persona{padding:var(--space-3) 8px 6px;gap:2px}
.pp-sec.pp-persona .pp-sh{padding:0 6px}
.pp-sec.pp-persona .bd{padding:0}
.pp-sh{font-size:12px;line-height:16px;font-weight:500;color:var(--text-3);min-width:0;overflow-wrap:anywhere}
.pp-sh .mono{color:var(--text-2)}
.pp-row{display:grid;gap:4px;min-width:0}
.pp-lab{font-size:12px;line-height:16px;color:var(--text-2);font-weight:500}
.pp-row .seg{justify-self:start}
.pp-row .select select{height:var(--field-h-sm);font-size:13px}
.pp-btns{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.pp-note{font-size:12px;line-height:18px;color:var(--text-3)}
/* keep primary actions clear of the floating button */
.pfoot{padding-bottom:calc(var(--space-5) + 44px)}
.toast-host{bottom:calc(var(--space-5) + 36px)}
#app[data-view="inbox"] .pane .reply{margin-bottom:56px}
#app[data-view="inbox"] .mlist .rl{padding-bottom:52px}
#app[data-view="inbox"] .pane .msg{padding-bottom:var(--space-4)}
@media (max-width:640px){
  .toast-host{bottom:calc(var(--space-3) + 44px)}
  .pp{right:var(--space-2);bottom:var(--space-2)}
  .pp .fopt .ds,.pp .pp-hint{display:none}
  .pp .fopt{padding:8px 10px}
}
@media (max-width:360px){.fbtn .k{display:none}.fbtn::after{content:none}}

/* ===== people and invite ===== */
.sh2.first{margin-top:var(--space-6)}
.sh2 .badge{vertical-align:middle;margin-left:var(--space-2)}
.invite-form{display:grid;gap:var(--space-4);max-width:560px}
.invite-form .fgroup{max-width:none}
.inv-opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4)}
.plist{list-style:none}
.prow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px var(--space-4);padding:var(--space-3) var(--space-4);border-top:1px solid var(--border);align-items:center}
.prow:first-child{border-top:0}
.pmain{display:flex;gap:var(--space-3);align-items:center;flex-wrap:wrap;min-width:0;grid-column:1}
.pe{font-weight:500;overflow-wrap:anywhere;min-width:0}
.pmeta{grid-column:1;overflow-wrap:anywhere}
.pact{display:flex;gap:var(--space-1);flex-wrap:wrap;justify-content:flex-end;grid-column:2;grid-row:1 / span 3}
.prow .rd{grid-column:1;color:var(--text-2);font-size:14px;line-height:20px;max-width:70ch;margin-top:2px}
.prow .pmeta a,.crumb a{color:var(--accent)}
.plain-empty{border:1px dashed var(--border-strong);border-radius:var(--radius-lg);padding:var(--space-4);color:var(--text-2)}
.plain-empty b{font-weight:500;color:var(--text)}
.plain-empty p{font-size:14px;margin-top:2px}
.tbl .pe{display:inline}
.invite-wrap{padding-top:var(--space-8)}
.invite-card{display:grid;gap:var(--space-4);max-width:520px}
.invite-card .lede{margin:0}
.iv-from{display:flex;align-items:center;gap:var(--space-3);color:var(--text-2);font-size:14px}
.iv-from b{display:block;font-weight:500;color:var(--text)}
.iv-from span{display:block;overflow-wrap:anywhere;font-size:13px;color:var(--text-3)}
.addr-card{display:grid;gap:2px;border:1px solid var(--border);background:var(--surface);border-radius:var(--radius-lg);padding:var(--space-3) var(--space-4)}
.addr-card .ad{font-size:17px;line-height:26px;overflow-wrap:anywhere;color:var(--text)}
.narrow-form{max-width:520px}
.susp{margin-bottom:var(--space-5)}

/* ===== ops console ===== */
.internal{display:flex;gap:var(--space-2);align-items:flex-start;border:1px solid var(--border);background:var(--warning-subtle);border-radius:var(--radius-md);padding:8px 12px;font-size:13px;line-height:20px;color:var(--text);margin-bottom:var(--space-5)}
.internal svg{color:var(--warning);margin-top:2px}
.internal b{font-weight:500}
.shell.ops .t{margin-bottom:0}
.shell.ops .stabs{margin-top:var(--space-4)}
.tab .cnt{margin-left:4px}
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--border);border-radius:var(--radius-lg);margin:var(--space-5) 0}
.kpi{padding:var(--space-4);display:grid;gap:var(--space-2);align-content:start;border-left:1px solid var(--border);min-width:0}
.kpi:first-child{border-left:0}
.kpi .kv{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.kpi .kv .mono{font-size:clamp(24px,3vw,32px);line-height:1.1;letter-spacing:-0.04em;font-weight:500}
.kpi .kv .u{font-size:13px;color:var(--text-3)}
.kpi .kn{display:grid;gap:4px;justify-items:start}
.kpi .kn .cap{color:var(--text-3)}
.hours{border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--space-4);margin-bottom:var(--space-5)}
.bars24{display:flex;align-items:flex-end;gap:3px;height:72px}
.bars24 i{flex:1;background:var(--border-strong);border-radius:2px 2px 0 0;min-width:0}
.bars24 i:last-child{background:var(--accent)}
.hx{display:flex;justify-content:space-between;margin-top:var(--space-2);color:var(--text-3)}
.sample{margin-top:var(--space-5);color:var(--text-3)}
.ops-bar{display:flex;align-items:end;gap:var(--space-4);margin-bottom:var(--space-4);flex-wrap:wrap}
.ops-bar .field{min-width:200px}
.ops-bar .cap{padding-bottom:8px;color:var(--text-3)}
.wslink{color:var(--text)}
.wslink b{font-weight:500}
.wslink:hover{color:var(--accent)}
.nowrap{white-space:nowrap}
.crumb{margin-bottom:var(--space-3)}
.crumb a{display:inline-flex;align-items:center;gap:6px;font-size:14px}
.ws-hd{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-4);flex-wrap:wrap;margin-bottom:var(--space-4)}
.ws-hd .sh .badge{vertical-align:middle}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4) var(--space-5);margin:var(--space-5) 0 0;border-top:1px solid var(--border);padding-top:var(--space-4)}
.facts dt{font-size:12px;line-height:16px;color:var(--text-3);font-weight:500}
.facts dd{font-size:14px;line-height:20px;overflow-wrap:anywhere}
.lk .fgroup{max-width:560px}
.lk{margin-bottom:var(--space-5)}
.tbl td.num,.tbl th.num{text-align:left}
.todo .sh2{margin-top:var(--space-6)}
#lk-res.rows{margin-top:var(--space-4)}

@media (max-width:900px){
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kpi:nth-child(3){border-left:0}
  .kpi:nth-child(n+3){border-top:1px solid var(--border)}
  .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .inv-opts{grid-template-columns:minmax(0,1fr)}
  .prow{grid-template-columns:minmax(0,1fr)}
  .pact{grid-column:1;grid-row:auto;justify-content:flex-start;margin-top:var(--space-2)}
  .facts{grid-template-columns:minmax(0,1fr)}
  .invite-wrap{padding-top:var(--space-6)}
  .ops-bar .field{min-width:0;flex:1}
}
@media (max-width:420px){
  .kpis{grid-template-columns:minmax(0,1fr)}
  .kpi{border-left:0;border-top:1px solid var(--border)}
  .kpi:first-child{border-top:0}
  .top .pbadge{display:none}
}

/* language switch: EN | ID in the navbar and the signup header, text buttons in the footer */
.lsw{display:inline-flex;align-items:center;gap:2px;height:var(--control-h-sm);padding:2px;border:1px solid var(--border);border-radius:var(--radius-md);flex:none}
.lsw button{height:100%;min-width:30px;padding:0 6px;border:0;border-radius:calc(var(--radius-md) - 2px);background:none;color:var(--text-2);font:inherit;font-size:12px;line-height:16px;font-weight:500;letter-spacing:.02em;cursor:pointer}
.lsw button:hover{color:var(--text);background:var(--surface-2)}
.lsw button[aria-pressed="true"]{background:var(--surface-2);color:var(--text)}
.lsw button:focus-visible,.mf-lang button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.mf-lang{display:inline-flex;align-items:center;gap:6px;color:var(--text-2);font-size:13px;line-height:20px}
.mf-lang .i{width:16px;height:16px}
.mf-lang button{border:0;background:none;padding:2px 0;color:var(--text-2);font:inherit;cursor:pointer;border-radius:var(--radius-sm)}
.mf-lang button:hover{color:var(--text);text-decoration:underline}
.mf-lang button[aria-pressed="true"]{color:var(--text);font-weight:500}