/* Plomus Estate — plomus.estate. Tokens: see PLAN.md (plomus.ro structure, dragan.me register). */
:root{
  --bg:#FAFAF8; --card:#FFFFFF; --soft:#F0EFEA; --ink:#1A1A18; --muted:#5F5D57;
  --line:#E2E0DA; --edge:#B9B6AE; --accent:#FF5E3A; --accent-ink:#B8401F;
  --band:#1A1A18; --band-ink:#FAFAF8; --band-muted:#A6A39A;
  --vs-bg:linear-gradient(160deg,#EFEDE5,#E2E0D6); --vs-edge:#00000038; --vs-fill:#00000018; --vs-lit:#0000005e; --vs-grid:#0000000e;
  --display:"Cormorant Garamond",Georgia,serif;
  --sans:"Jost",-apple-system,system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --maxw:1280px;
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#121210; --card:#1A1A17; --soft:#1F1E1B; --ink:#EDEBE5; --muted:#A6A39A;
    --line:#2A2925; --edge:#4A4842; --accent-ink:#FF8A6B;
    --band:#EDEBE5; --band-ink:#121210; --band-muted:#5F5D57;
    --vs-bg:linear-gradient(160deg,#1C1B18,#151513); --vs-edge:#ffffff38; --vs-fill:#ffffff12; --vs-lit:#ffffff55; --vs-grid:#ffffff0c;
  }
  .brand img{outline:1px solid var(--edge);border-radius:7px}
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:clip}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-weight:300;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip}
::selection{background:var(--ink);color:var(--bg)}
a{color:inherit}
img,svg{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--accent-ink);outline-offset:3px}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--ink);color:var(--bg);padding:10px 16px;font-family:var(--mono);font-size:12px}
.skip:focus{left:8px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,5vw,80px)}

/* type */
h1,h2,h3{font-family:var(--display);font-weight:300;letter-spacing:-.015em;line-height:1.04}
h1{font-size:clamp(46px,7vw,96px)}
h2{font-size:clamp(36px,5vw,64px);max-width:18ch;text-wrap:balance}
h3{font-size:clamp(22px,2vw,28px);font-weight:400;letter-spacing:-.005em;line-height:1.15}
.soft{color:var(--muted)}
.eyebrow{display:block;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:20px}
.eyebrow::before{content:"";display:inline-block;width:6px;height:6px;background:var(--accent);margin-right:12px;vertical-align:1px}
.lead{font-size:18px;color:var(--muted);max-width:60ch;margin-top:22px}
.prose p{color:var(--muted);max-width:64ch;margin-top:14px}
.prose strong{color:var(--ink);font-weight:500}
code{font-family:var(--mono);font-size:.86em;background:var(--soft);padding:1px 6px;border-radius:3px}

/* buttons (plomus.ro: black + accent corner; dragan.me: pill ghost) */
.btn{position:relative;display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;padding:15px 24px;border:1px solid transparent;white-space:nowrap;transition:background .15s,color .15s,border-color .15s}
.btn-primary{background:var(--ink);color:var(--bg)}
.btn-primary::after{content:"";position:absolute;top:5px;right:5px;width:5px;height:5px;background:var(--accent)}
.btn-primary:hover{opacity:.88}
.btn-ghost{border-color:var(--edge);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink)}
.acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:36px}

/* header (dragan.me) */
header.site{position:sticky;top:0;z-index:50;backdrop-filter:blur(10px);background:color-mix(in srgb,var(--bg) 88%,transparent);border-bottom:1px solid transparent;transition:border-color .4s}
header.site.scrolled{border-bottom-color:var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:70px;gap:20px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none}
.brand .wm{font-family:var(--display);font-size:25px;font-weight:500;letter-spacing:.01em;line-height:1}
.brand .wm span{color:var(--muted);font-weight:400}
nav.top{display:flex;align-items:center;gap:26px}
nav.top a{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-decoration:none}
nav.top a:hover,nav.top a[aria-current]{color:var(--ink)}
nav.top .btn{padding:11px 16px;font-size:11px;color:var(--bg)}
@media(max-width:900px){nav.top a:not(.btn){display:none}}

/* sections */
section{padding:clamp(72px,12vh,128px) 0;border-top:1px solid var(--line)}
.hero{border-top:0;padding-top:clamp(48px,8vh,96px)}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,6vw,80px);align-items:center}
.hero h1{text-wrap:balance}
.hero-meta{margin-top:34px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.page-hero{border-top:0;padding-bottom:clamp(40px,6vh,64px)}
.page-hero h1{font-size:clamp(42px,6vw,80px);max-width:16ch}

/* scene (dragan.me facade) */
.stage{border:1px solid var(--line);border-radius:18px;overflow:hidden}
.visual{position:relative;min-height:clamp(320px,52vh,540px);background:var(--vs-bg);overflow:hidden}
.grid-lines{position:absolute;inset:0;background-image:linear-gradient(var(--vs-grid) 1px,transparent 1px),linear-gradient(90deg,var(--vs-grid) 1px,transparent 1px);background-size:38px 38px}
.facade{position:absolute;width:46%;height:68%;left:50%;top:54%;transform:translate(-50%,-50%);display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(7,1fr);gap:7px;padding:12px;border:1px solid var(--vs-edge);border-radius:3px}
.win{background:var(--vs-fill);border-radius:1px;animation:sell 6s ease-in-out infinite}
.win:nth-child(4n+2){animation-delay:.25s}.win:nth-child(4n+3){animation-delay:.5s}.win:nth-child(4n+4){animation-delay:.75s}
.win:nth-child(-n+4){animation-delay:2.2s}.win:nth-child(n+5):nth-child(-n+8){animation-delay:1.9s}
.win:nth-child(n+9):nth-child(-n+12){animation-delay:1.6s}.win:nth-child(n+13):nth-child(-n+16){animation-delay:1.3s}
.win:nth-child(n+17):nth-child(-n+20){animation-delay:1s}.win:nth-child(n+21):nth-child(-n+24){animation-delay:.7s}
.win.key{background:var(--accent);animation:none}
.crane{position:absolute;top:13%;left:50%;width:40%;height:1px;background:var(--vs-edge);transform-origin:left center;animation:crane 8s ease-in-out infinite}
.crane::after{content:"";position:absolute;right:0;top:-3px;width:1px;height:26px;background:var(--vs-edge)}
.sublabel{position:absolute;bottom:18px;left:0;right:0;text-align:center;font-family:var(--mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
@keyframes sell{0%,100%{background:var(--vs-fill)}45%,60%{background:var(--vs-lit)}}
@keyframes crane{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}

/* two columns */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,90px);margin-top:56px}
.split.flush{margin-top:0}
.grid + .lead{margin-top:40px}
.split h3{margin-bottom:14px}
.split .col{border-top:1px solid var(--line);padding-top:26px}
ul.ticks{list-style:none;margin-top:8px}
ul.ticks li{position:relative;padding:10px 0 10px 26px;border-bottom:1px solid var(--line);color:var(--muted)}
ul.ticks li::before{content:"—";position:absolute;left:0;color:var(--accent-ink)}
ul.ticks li strong{color:var(--ink);font-weight:500}

/* 1px grid (plomus.ro) */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:56px}
.grid.two{grid-template-columns:repeat(2,1fr)}
.cell{background:var(--card);padding:34px 30px 36px}
.cell .tag{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-ink)}
.cell h3{margin-top:14px}
.cell p{color:var(--muted);margin-top:12px;font-size:15px}
.cell ul{list-style:none;margin-top:16px;font-size:14.5px;color:var(--muted)}
.cell ul li{padding:5px 0;border-top:1px solid var(--line)}
.cell a.more{display:inline-block;margin-top:18px;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid var(--ink);padding-bottom:2px}
.cell a.more:hover{color:var(--accent-ink);border-color:var(--accent-ink)}

/* steps */
ol.steps{list-style:none;counter-reset:s;margin-top:56px;border-top:1px solid var(--line)}
ol.steps li{counter-increment:s;display:grid;grid-template-columns:80px 1fr 1.4fr;gap:24px;padding:26px 0;border-bottom:1px solid var(--line);align-items:baseline}
ol.steps li::before{content:counter(s,decimal-leading-zero);font-family:var(--mono);font-size:12px;color:var(--accent-ink);letter-spacing:.1em}
ol.steps h3{font-size:24px}
ol.steps p{color:var(--muted)}

/* table */
.table-wrap{overflow-x:auto;margin-top:40px}
table{width:100%;border-collapse:collapse;font-size:15px}
th,td{text-align:left;padding:14px 16px 14px 0;border-bottom:1px solid var(--line);vertical-align:top}
th{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
td{color:var(--muted)} td:first-child{color:var(--ink);font-weight:400}

/* FAQ (plomus.ro) */
.faq{display:grid;grid-template-columns:1fr 1fr;gap:0 56px;margin-top:48px}
.faq details{border-top:1px solid var(--line);padding:22px 0}
.faq summary{font-family:var(--display);font-size:22px;font-weight:500;line-height:1.25;list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:18px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);font-size:22px;color:var(--accent-ink);line-height:1;flex:none;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{margin-top:12px;color:var(--muted);font-size:15px;max-width:58ch}

/* CTA band */
.cta{background:var(--band);color:var(--band-ink);border:0}
.cta h2{color:var(--band-ink);max-width:20ch}
.cta .eyebrow,.cta .lead{color:var(--band-muted)}
.cta .btn-primary{background:var(--band-ink);color:var(--band)}
.cta a.mail{font-family:var(--display);font-size:clamp(26px,3vw,40px);text-decoration:none;border-bottom:1px solid var(--band-muted);display:inline-block;margin-top:34px}
.cta a.mail:hover{border-color:var(--band-ink)}

/* footer */
footer.site{padding:72px 0 48px;border-top:1px solid var(--line)}
.f-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px}
.f-grid p{color:var(--muted);font-size:14px;margin-top:16px;max-width:34ch}
.f-grid h4{font-family:var(--mono);font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.f-grid a:not(.brand){display:block;font-size:14px;text-decoration:none;padding:4px 0}
.f-grid a:not(.brand):hover{color:var(--accent-ink)}
.f-bottom{margin-top:56px;padding-top:22px;border-top:1px solid var(--line);font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--muted);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* reveal (dragan.me) — only hidden once JS has run */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .8s ease,transform .8s ease}
.js .reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .reveal{opacity:1;transform:none;transition:none}
  .win,.crane{animation:none!important}
}

@media(max-width:960px){
  .hero-grid,.split,.faq{grid-template-columns:1fr}
  .grid,.grid.two{grid-template-columns:1fr}
  .f-grid{grid-template-columns:1fr 1fr}
  ol.steps li{grid-template-columns:48px 1fr}
  ol.steps li p{grid-column:2}
}
@media(max-width:540px){
  .f-grid{grid-template-columns:1fr}
  .cell{padding:28px 22px}
  .visual{min-height:300px}
}

/* ================= showcase =================
   Mockups, not screenshots: colors are deriveTheme() output from @plomus/tokens
   for two demo brands; labels, columns and statuses are the real ones. Data is fictional. */
.t-nord{--t-canvas:#f8f6f6;--t-surface:#fff;--t-raised:#fff;--t-text:#322c2b;--t-muted:#776e6c;--t-border:#ddd8d7;--t-primary:#8a3b2e;--t-on:#fff;--t-sec:#8a3b2e;--t-tint:#f4e9e7;--t-link:#8a3b2e;--t-head:"Cormorant Garamond",Georgia,serif;--t-hw:500}
.t-lumen{--t-canvas:#f5f7f7;--t-surface:#fff;--t-raised:#fff;--t-text:#292f2f;--t-muted:#697272;--t-border:#d5dada;--t-primary:#1f6f6b;--t-on:#fff;--t-sec:#ae8900;--t-tint:#ddf2f0;--t-link:#1f6f6b;--t-head:"Jost",system-ui,sans-serif;--t-hw:500}
.t-lumen.t-dark{--t-canvas:#121717;--t-surface:#292f2f;--t-raised:#3e4645;--t-text:#f5f7f7;--t-muted:#b9c1c0;--t-border:#3e4645;--t-primary:#36827e;--t-on:#000;--t-sec:#c9a227;--t-tint:#003634;--t-link:#56a19c}
.t-console{--t-canvas:#f5f6f8;--t-surface:#fff;--t-raised:#fff;--t-text:#1f2328;--t-muted:#5b6170;--t-border:#dfe2e8;--t-primary:#2e50d8;--t-on:#fff;--t-sec:#2e50d8;--t-tint:#e8edfc;--t-link:#2e50d8;--t-head:system-ui,-apple-system,sans-serif;--t-hw:700}
.mock{background:var(--t-canvas);color:var(--t-text);font:400 12px/1.4 system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
.mock .h{font-family:var(--t-head);font-weight:var(--t-hw);letter-spacing:-.01em;line-height:1.15}
.mock .mu{color:var(--t-muted)}
.mock .card{background:var(--t-surface);border:1px solid var(--t-border);border-radius:12px}
.mock .b{display:inline-flex;align-items:center;justify-content:center;border-radius:8px;padding:8px 12px;font-weight:600;font-size:11.5px;border:1px solid var(--t-primary);color:var(--t-link);white-space:nowrap}
.mock .b.fill{background:var(--t-primary);color:var(--t-on)}
/* unit/viewing statuses: status.unit tokens */
.st{display:inline-block;border-radius:999px;padding:2px 8px;font-size:10.5px;font-weight:600;border:1px solid;white-space:nowrap}
.st.av{background:#d6f7db;border-color:#81d692;color:#005320}
.st.re{background:#ffe9d0;border-color:#f2b160;color:#5f3a00}
.st.so{background:#ffe6e3;border-color:#ffa398;color:#840008}
.st.in{background:#e4edff;border-color:#9ebfff;color:#0435a3}
.st.na{background:#ececef;border-color:#bebec6;color:#43434a}
.t-dark .st.av{background:#001d07;border-color:#006c2c;color:#b2e9bb}
.t-dark .st.re{background:#221200;border-color:#7d4e00;color:#fdd09e}
.t-dark .st.so{background:#320001;border-color:#ab000e;color:#ffcbc3}
.t-dark .st.in{background:#000e43;border-color:#114ac9;color:#c6daff}

/* showcase layout */
.sc-brands{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:56px}
.sc-brand{background:var(--card);padding:30px clamp(16px,3vw,40px) 36px;min-width:0}
.sc-brand header{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:24px}
.sc-brand header .tag{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-ink)}
.sc-brand header h3{font-size:26px}
.sc-brand .chips{display:flex;gap:6px;align-items:center;font-family:var(--mono);font-size:10px;color:var(--muted)}
.sc-brand .chips i{width:14px;height:14px;border-radius:50%;border:1px solid var(--line)}
.phones{display:flex;gap:14px;justify-content:center}
.sc-note{margin-top:22px;font-size:14px;color:var(--muted);max-width:70ch}

/* phone */
.phone{flex:0 0 auto;width:min(31%,236px);aspect-ratio:9/19;border-radius:30px;background:#0d0d0c;padding:6px;box-shadow:0 18px 40px -18px #0006}
.phone .scr{position:relative;height:100%;border-radius:25px;overflow:hidden;display:flex;flex-direction:column;font-size:10.5px}
.phone .sb{display:flex;justify-content:space-between;padding:8px 16px 4px;font-size:9.5px;font-weight:600}
.phone .sb::after{content:"";width:22px;height:9px;border:1px solid currentColor;border-radius:3px;opacity:.7}
.phone .body{flex:1;overflow:hidden;padding:6px 10px 0;display:flex;flex-direction:column;gap:8px}
.phone .body > *{flex:none}
.phone .tabs{display:flex;justify-content:space-around;padding:7px 4px 12px;border-top:1px solid var(--t-border);background:var(--t-surface);font-size:9px;color:var(--t-muted)}
.phone .tabs span{display:flex;flex-direction:column;align-items:center;gap:3px}
.phone .tabs span::before{content:"";width:16px;height:16px;border-radius:5px;border:1.5px solid currentColor}
.phone .tabs .on{color:var(--t-link);font-weight:600}
.phone .tabs .on::before{background:var(--t-primary);border-color:var(--t-primary)}
.phone .top{display:flex;align-items:center;gap:7px}
.logo{width:22px;height:22px;border-radius:6px;background:var(--t-primary);color:var(--t-on);display:grid;place-items:center;font:700 11px/1 var(--t-head);flex:none}
.t-lumen .logo{border-radius:50%;background:radial-gradient(circle at 50% 60%,var(--t-sec) 0 32%,var(--t-primary) 34%)}
.phone .search{border:1px solid var(--t-border);background:var(--t-surface);border-radius:999px;padding:6px 10px;color:var(--t-muted)}
.pic{border-radius:10px;height:72px;position:relative;overflow:hidden;background:linear-gradient(160deg,var(--t-tint),var(--t-primary))}
.pic::before{content:"";position:absolute;left:18%;right:18%;bottom:0;height:70%;background:repeating-linear-gradient(90deg,#ffffff55 0 8px,transparent 8px 13px),repeating-linear-gradient(#ffffff00 0 6px,#00000022 6px 8px);border:1px solid #ffffff66;border-bottom:0}
.prog{height:4px;border-radius:2px;background:var(--t-border);overflow:hidden;margin-top:3px}
.prog i{display:block;height:100%;background:var(--t-primary)}
.row{display:flex;justify-content:space-between;align-items:center;gap:6px;padding:7px 9px}
.row + .row{border-top:1px solid var(--t-border)}
.plan{height:96px;border-radius:10px;background:var(--t-surface);border:1px solid var(--t-border);position:relative}
.plan::before{content:"";position:absolute;inset:12px 14px;border:2px solid var(--t-muted);background:linear-gradient(var(--t-muted),var(--t-muted)) 55% 0/2px 60% no-repeat,linear-gradient(var(--t-muted),var(--t-muted)) 0 62%/55% 2px no-repeat,linear-gradient(var(--t-muted),var(--t-muted)) 100% 45%/45% 2px no-repeat;opacity:.55}
.specs{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.specs div{background:var(--t-surface);border:1px solid var(--t-border);border-radius:8px;padding:5px 7px}
.specs b{display:block;font-size:11px}
.notice{border-radius:10px;padding:8px 9px;background:var(--t-tint);border-left:3px solid var(--t-sec)}
.row.doc{display:flex;justify-content:flex-start;gap:7px;align-items:center}
.doc::before{content:"";width:16px;height:20px;border-radius:3px;border:1.5px solid var(--t-primary);flex:none}

/* browser frame + tabs */
.sc-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-top:56px}
.sc-tabs button{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:9px 14px;background:transparent;color:var(--muted);border:1px solid var(--line);cursor:pointer}
.sc-tabs button[aria-selected=true]{color:var(--bg);background:var(--ink);border-color:var(--ink)}
.browser{border:1px solid var(--edge);border-radius:12px;overflow:hidden;margin-top:14px;background:var(--card)}
.browser .bar{display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid var(--line);background:var(--soft)}
.browser .bar i{width:9px;height:9px;border-radius:50%;background:var(--edge);box-shadow:14px 0 var(--edge),28px 0 var(--edge);margin-right:28px}
.browser .url{flex:1;font-family:var(--mono);font-size:11px;color:var(--muted);background:var(--card);border:1px solid var(--line);border-radius:6px;padding:4px 10px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.panel{overflow-x:auto}
.panel + .panel{border-top:1px solid var(--line)}
.js .panel + .panel{border-top:0}
.js .panel[hidden]{display:none}
.panel .cap{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:10px 16px;border-bottom:1px solid var(--line);background:var(--soft)}
.js .panel .cap{display:none}
.app{display:grid;grid-template-columns:190px 1fr;min-width:780px;min-height:430px;font-size:12px}
.side{background:var(--t-surface);border-right:1px solid var(--t-border);padding:14px 10px}
.side .sec{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--t-muted);margin:12px 8px 4px}
.side a{display:block;padding:5px 8px;border-radius:7px;color:var(--t-text);text-decoration:none}
.side a.on{background:var(--t-tint);color:var(--t-primary);font-weight:600}
.main{padding:18px 20px;display:flex;flex-direction:column;gap:12px;min-width:0}
.main .hd{display:flex;justify-content:space-between;align-items:center;gap:10px}
.main .hd .h{font-size:20px}
.fchips{display:flex;gap:6px;flex-wrap:wrap}
.fchips span{border:1px solid var(--t-border);background:var(--t-surface);border-radius:999px;padding:4px 10px;color:var(--t-muted)}
.fchips span.on{border-color:var(--t-primary);color:var(--t-primary);background:var(--t-tint);font-weight:600}
.mt{width:100%;border-collapse:collapse;background:var(--t-surface);border:1px solid var(--t-border);border-radius:10px;overflow:hidden;font-size:12px}
.mt th,.mt td{padding:8px 10px;border-bottom:1px solid var(--t-border);text-align:left;color:var(--t-text);font-family:inherit;letter-spacing:0;text-transform:none;font-size:12px}
.mt th{font-weight:600;color:var(--t-muted);background:var(--t-canvas)}
.mt td:first-child{font-weight:600}
.mt .cf{background:var(--t-tint)}
.board{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.board .col{background:var(--t-surface);border:1px solid var(--t-border);border-radius:10px;padding:10px;display:flex;flex-direction:column;gap:7px}
.board .col > .h{font-size:13px;display:flex;justify-content:space-between}
.board .it{border:1px solid var(--t-border);border-radius:8px;padding:7px 9px;background:var(--t-canvas)}
.portal{min-width:780px;font-size:12.5px}
.portal .nav{display:flex;justify-content:space-between;align-items:center;padding:12px 22px;background:var(--t-surface);border-bottom:1px solid var(--t-border);height:auto}
.portal .heroimg{height:150px;background:linear-gradient(170deg,var(--t-tint),var(--t-primary));position:relative;overflow:hidden}
.portal .heroimg::before{content:"";position:absolute;left:10%;width:34%;bottom:0;height:78%;background:repeating-linear-gradient(90deg,#ffffff55 0 14px,transparent 14px 22px),repeating-linear-gradient(#ffffff00 0 10px,#00000022 10px 13px);border:1px solid #ffffff66}
.portal .heroimg::after{content:"";position:absolute;left:52%;width:26%;bottom:0;height:58%;background:repeating-linear-gradient(90deg,#ffffff44 0 14px,transparent 14px 22px);border:1px solid #ffffff55}
.portal .wrapc{padding:18px 22px;display:grid;grid-template-columns:1.3fr 1fr;gap:18px}
.units{display:grid;grid-template-columns:repeat(6,1fr);gap:5px}
.units span{border-radius:6px;padding:7px 0;text-align:center;font-weight:600;font-size:11px}
.sw{display:flex;gap:0;border-radius:8px;overflow:hidden;border:1px solid var(--t-border)}
.sw i{flex:1;height:26px}
.aa{display:flex;justify-content:space-between;gap:8px;padding:6px 0;border-top:1px solid var(--t-border)}
.steps-h{display:flex;gap:4px;flex-wrap:wrap}
.steps-h span{padding:5px 9px;border-radius:999px;border:1px solid var(--t-border);color:var(--t-muted);font-size:11px}
.steps-h span.done{color:var(--t-text)}
.steps-h span.done::before{content:"✓ ";color:#008739}
.steps-h span.on{background:var(--t-primary);border-color:var(--t-primary);color:var(--t-on);font-weight:600}
.dns{font-family:ui-monospace,Menlo,monospace;font-size:11px;background:var(--t-canvas);border:1px solid var(--t-border);border-radius:8px;padding:8px 10px;line-height:1.7}

@media(max-width:540px){
  .phones{justify-content:flex-start;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px}
  .phone{width:228px;scroll-snap-align:start}
}