/* Slate — light, tool-first theme. The address box IS the hero. */

/* The keys Admin -> Themes -> Appearance rewrites, in the order and spelling that screen writes them.
   The theme reads its own palette from these, so editing a colour there changes this theme. */
:root {
    --primary_color: #4326c8;
    --primary_opacity: #2c1691;
    --secondary_color: #ff6b35;
    --text_color: #0d1020;
    --text_muted: #6b7290;
    --background_color: #f6f7fb;
    --footer_background_color: #ffffff;
    --primary_gradient: radial-gradient(circle, rgba(67, 38, 200, 1) 0%, rgba(42, 13, 175, 1) 30%, rgba(17, 0, 150, 1) 100%);
    --secondary_text_color: #ffffff;
}

:root{
  --bg:var(--background_color); --bg-2:#eef0f8; --surface:#fff; --surface-2:#fafbff;
  --line:#e6e8f2; --line-2:#d5d9e8;
  --text:var(--text_color); --text-2:#3d4463; --muted:var(--text_muted); --dim:#9aa1bd;
  --brand:var(--primary_color); --brand-2:#6d4bff; --brand-ink:var(--primary_opacity); --brand-wash:#f0edff;
  --accent:var(--secondary_color); --ok:#0f9d58; --ok-wash:#e7f6ee;
  --warn:#b45309; --warn-wash:#fdf3e2; --bad:#c0263f; --bad-wash:#fdeaee;
  --on-brand:var(--secondary_text_color);
  --r-xs:8px; --r-sm:10px; --r:14px; --r-lg:20px; --r-pill:999px;
  --sh-xs:0 1px 2px rgba(16,20,48,.06);
  --sh-sm:0 1px 2px rgba(16,20,48,.05),0 3px 10px -4px rgba(16,20,48,.08);
  --sh:0 12px 32px -12px rgba(16,20,48,.18),0 2px 6px rgba(16,20,48,.05);
  --sh-lg:0 32px 70px -24px rgba(16,20,48,.28);
  --maxw:1180px;
  --sans:Inter,"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --mono:"JetBrains Mono","SFMono-Regular",Consolas,"Liberation Mono",monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);
  font-size:15px;line-height:1.6;font-feature-settings:"cv11","ss01";-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-weight:800;letter-spacing:-.025em;line-height:1.14;color:var(--text)}
h1{font-size:clamp(30px,4.6vw,46px)}
h2{font-size:clamp(22px,3vw,30px)}
h3{font-size:17px;letter-spacing:-.015em}
p{margin:0}
button{font:inherit;color:inherit}
.wrap{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 22px}
.mono{font-family:var(--mono)}
/* Wide tables scroll inside their own box instead of stretching the page. */
.scroll-x{overflow:auto;-webkit-overflow-scrolling:touch}
/* Flex/grid components must still obey the hidden attribute. */
[hidden]{display:none!important}
.sub{color:var(--muted);font-size:15.5px}
.eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:800;
  letter-spacing:.09em;text-transform:uppercase;color:var(--brand);background:var(--brand-wash);
  border:1px solid #e0d9ff;border-radius:var(--r-pill);padding:5px 12px}

/* ---------- header ---------- */
.mast{position:sticky;top:0;z-index:60;background:var(--brand);color:#fff;box-shadow:0 1px 0 rgba(0,0,0,.14)}
.mast-in{display:flex;align-items:center;gap:26px;height:64px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:18.5px;letter-spacing:-.03em;color:#fff}
.logo .mk{width:30px;height:30px;border-radius:9px;background:#fff;display:grid;place-items:center;color:var(--brand);flex:0 0 auto}
.logo .mk svg{width:17px;height:17px}
.mnav{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:rgba(255,255,255,.82)}
.mnav a{padding:7px 11px;border-radius:9px}
.mnav a:hover{color:#fff;background:rgba(255,255,255,.1)}
.mnav a.on{color:#fff;background:rgba(255,255,255,.16)}
.mnav .cta{display:none}
.mast-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.mast .ghost{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);color:#fff}
.mast .ghost:hover{background:rgba(255,255,255,.2)}
.burger{display:none;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.24);
  color:#fff;width:38px;height:38px;border-radius:10px;cursor:pointer}
/* On the brand-coloured bar the filled button inverts: the theme's own brand fill would sit on
   itself. The site logo is the owner's upload, so it is boxed rather than trusted to be light. */
.mast-right .btn:not(.ghost){background:#fff;border-color:#fff;color:var(--brand-ink)}
.mast-right .btn:not(.ghost):hover{background:var(--brand-wash);border-color:#fff;color:var(--brand-ink)}
.logo .mk img{width:19px;height:19px;object-fit:contain;display:block}
/* Menu items with children, and the language picker, both open on the [dropdown] + .active pair
   that main.js writes. */
.ndrop{position:relative;display:flex}
.ndrop-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border:0;border-radius:9px;
  background:transparent;color:inherit;font:inherit;font-size:14px;font-weight:600;cursor:pointer}
.ndrop-btn:hover{color:#fff;background:rgba(255,255,255,.1)}
.ndrop-btn svg{width:13px;height:13px;opacity:.7}
.ndrop-menu{display:none;position:absolute;top:100%;left:0;z-index:70;min-width:190px;padding:7px;
  background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--sh-lg)}
.ndrop.active .ndrop-menu{display:block}
.ndrop.active>.ndrop-btn{color:var(--brand-ink);background:rgba(255,255,255,.18)}
.ndrop-menu a{display:block;padding:8px 11px;border-radius:8px;font-size:14px;font-weight:600;
  color:var(--text-2);white-space:nowrap}
.ndrop-menu a:hover{background:var(--brand-wash);color:var(--brand-ink)}
.language{position:relative}
.language-btn{width:38px;height:38px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.24);
  border-radius:10px;background:rgba(255,255,255,.12);color:#fff;cursor:pointer}
.language-btn svg{width:18px;height:18px}
.language-menu{display:none;position:absolute;top:calc(100% + 8px);right:0;z-index:80;min-width:180px;
  max-height:320px;overflow:auto;padding:7px;background:var(--surface);border:1px solid var(--line);
  border-radius:12px;box-shadow:var(--sh-lg);text-align:left}
.language.active .language-menu{display:block}
.language-menu a{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:8px;
  font-size:14px;font-weight:600;color:var(--text-2)}
.language-menu a:hover{background:var(--brand-wash);color:var(--brand-ink)}
.language-menu a.active{background:var(--brand-wash);color:var(--brand-ink);font-weight:750}
.language-menu img{width:20px;height:15px;border-radius:3px;object-fit:cover;flex:0 0 auto}
.language-menu .lang-code-badge{flex:0 0 auto}
.mnav a i,.ndrop-btn i{margin-right:6px;font-size:13px;opacity:.8}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 16px;
  border-radius:var(--r-sm);border:1px solid var(--line-2);background:var(--surface);color:var(--text);
  font-size:14px;font-weight:700;cursor:pointer;transition:background .16s,border-color .16s,box-shadow .16s,transform .16s;
  white-space:nowrap}
.btn svg{width:15px;height:15px}
.btn:hover{background:var(--surface-2);border-color:var(--dim)}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:0 6px 16px -8px rgba(67,38,200,.7)}
.btn-primary:hover{background:var(--brand-ink);border-color:var(--brand-ink)}
.btn-pill{border-radius:var(--r-pill)}
.btn-lg{height:48px;padding:0 24px;font-size:15.5px}
.btn-sm{height:33px;padding:0 12px;font-size:13px;border-radius:9px}
.btn-block{width:100%}
.btn-quiet{background:transparent;border-color:transparent;color:var(--muted)}
.btn-quiet:hover{background:var(--bg-2);color:var(--text)}
/* Variants the shipped markup names. They override bootstrap's own colour tokens because this file
   is loaded after it, and a page that mixes a slate button with a bootstrap one looks unfinished. */
.btn-secondary{background:var(--bg-2);border-color:var(--line-2);color:var(--text-2)}
.btn-secondary:hover{background:var(--surface-2);border-color:var(--dim);color:var(--text)}
.btn-danger{background:var(--bad);border-color:var(--bad);color:#fff}
.btn-danger:hover{background:#a3162c;border-color:#a3162c;color:#fff}
.btn-light{background:var(--surface);border-color:var(--line);color:var(--text-2)}
.btn-light:hover{background:var(--surface-2);border-color:var(--dim);color:var(--text)}
.btn-md{height:44px;padding:0 18px;font-size:14.5px}

/* text action row — the signature control cluster */
.acts{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.act{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 13px;border-radius:var(--r-sm);
  border:1px solid transparent;background:transparent;color:var(--text-2);font-size:14px;font-weight:700;
  cursor:pointer;transition:background .16s,color .16s,border-color .16s}
.act svg{width:16px;height:16px;opacity:.75}
.act:hover{background:var(--surface);border-color:var(--line);color:var(--brand);box-shadow:var(--sh-xs)}
.act:hover svg{opacity:1}
.act.on{background:var(--brand-wash);border-color:#ded5ff;color:var(--brand-ink)}

/* ---------- cards ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-sm)}
.card-pad{padding:22px}

/* ---------- tool ---------- */
.tool{padding:38px 0 26px;text-align:center}
.tool h1{margin-bottom:9px}
.tool .sub{max-width:52ch;margin:0 auto 26px}
.addr-box{position:relative;max-width:600px;margin:0 auto;display:flex;align-items:center;gap:12px;
  background:var(--surface);border:1.5px solid var(--line-2);border-radius:var(--r);
  padding:16px 18px;box-shadow:var(--sh);transition:border-color .18s,box-shadow .18s}
.addr-box:hover{border-color:var(--brand-2)}
.addr-box:focus-within{border-color:var(--brand);box-shadow:0 0 0 4px rgba(67,38,200,.12),var(--sh)}
#addr{flex:1;min-width:0;border:0;background:transparent;font-family:var(--mono);font-size:clamp(15px,2.6vw,19px);
  font-weight:600;letter-spacing:-.02em;color:var(--text);text-align:left;outline:none}
.addr-copy{flex:0 0 auto;width:38px;height:38px;border-radius:9px;border:1px solid var(--line);
  background:var(--surface-2);display:grid;place-items:center;cursor:pointer;transition:.16s}
.addr-copy:hover{background:var(--brand);border-color:var(--brand);color:#fff}
.addr-copy svg{width:16px;height:16px}
.lifetime{display:inline-flex;align-items:center;gap:9px;margin:16px auto 20px;font-size:13px;font-weight:700;
  color:var(--text-2);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-pill);padding:6px 14px}
.lifetime .ring{width:16px;height:16px;border-radius:50%;border:2px solid var(--brand-wash);
  border-top-color:var(--brand);animation:spin 1.1s linear infinite}
.lifetime b{font-family:var(--mono);font-size:13.5px;color:var(--brand-ink)}
.lifetime.low{color:var(--warn);border-color:#f3ddb4;background:var(--warn-wash)}
.lifetime.low b{color:var(--warn)}
.lifetime.low .ring{border-top-color:var(--warn);animation:none;border-radius:4px;width:3px;height:14px;border:0;background:var(--warn)}
@keyframes spin{to{transform:rotate(360deg)}}
.tool .hint{max-width:52ch;margin:-10px auto 18px}
/* The two counters the sections.mail composer supplies, printed as one quiet line rather than two
   big cards -- they are site totals, not the visitor's own numbers. */
.counters{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;margin:26px 0 4px}
.counter{display:flex;align-items:baseline;gap:8px;font-size:13px;color:var(--muted)}
.counter b{font-family:var(--mono);font-size:17px;font-weight:700;letter-spacing:-.03em;color:var(--text)}
.sub.second{max-width:62ch;margin:18px auto 0}
.mx-auto{margin-left:auto;margin-right:auto}
.ad-250x250{width:250px;max-width:100%}

/* ---------- inbox ---------- */
.tool-grid{display:grid;grid-template-columns:214px minmax(0,1fr) 214px;gap:20px;align-items:start;text-align:left}
.rail{position:sticky;top:84px;display:flex;flex-direction:column;gap:8px}
.rail h4{font-size:12px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);
  padding:0 4px 4px}
.rail a{display:flex;align-items:center;justify-content:space-between;gap:8px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 12px;font-size:13.5px;font-weight:600;
  color:var(--text-2);transition:.16s}
.rail a:hover{border-color:var(--brand-2);color:var(--brand);box-shadow:var(--sh-xs);transform:translateX(2px)}
.rail a svg{width:13px;height:13px;opacity:.5;flex:0 0 auto}

.inbox{overflow:hidden;display:flex;flex-direction:column;min-height:420px}
.inbox-sect{padding:8px 0 40px}
/* Ads sit beside the list when the owner has placed them there, and the list takes what is left.
   Flex rather than a three-column grid: the columns have to collapse on their own when a slot is
   empty, which is most of the time. */
.mailbox-grid{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-start;justify-content:center}
.mailbox-grid>.inbox{flex:1 1 640px;max-width:920px;min-width:0}
.mailbox-grid>.ad{flex:0 0 auto}
.inbox-top{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line);
  background:var(--surface-2)}
.inbox-top h3{font-size:14px;font-weight:800;letter-spacing:-.01em;margin:0}
.inbox-top .chip{margin-left:auto}
.tab{border:0;background:transparent;padding:7px 13px;border-radius:8px;font-size:13.5px;font-weight:700;
  color:var(--muted);cursor:pointer;display:inline-flex;align-items:center;gap:7px;transition:.16s}
.tab:hover{color:var(--text)}
.tab.on{background:var(--surface);color:var(--text);box-shadow:var(--sh-xs);border:1px solid var(--line)}
.tab .n{font-size:11px;font-weight:800;background:var(--brand);color:#fff;border-radius:var(--r-pill);
  min-width:18px;height:18px;display:grid;place-items:center;padding:0 5px}
.inbox-top .sp{margin-left:auto}
.msgs{list-style:none;margin:0;padding:0;flex:1}
.msg{display:flex;gap:13px;align-items:flex-start;padding:15px 18px;border-bottom:1px solid var(--line);
  cursor:pointer;transition:background .16s;position:relative}
.msg:last-child{border-bottom:0}
.msg:hover{background:var(--brand-wash)}
.msg.unread::before{content:"";position:absolute;left:6px;top:22px;width:6px;height:6px;border-radius:50%;background:var(--brand)}
.ava{flex:0 0 auto;width:38px;height:38px;border-radius:10px;display:grid;place-items:center;
  font-size:14px;font-weight:800;color:#fff;background:var(--brand)}
.ava.g{background:#0f9d58}.ava.r{background:#c0263f}.ava.o{background:#b45309}.ava.p{background:#7c3aed}
.msg-body{min-width:0;flex:1}
.msg-l1{display:flex;align-items:baseline;gap:8px}
.msg-from{font-size:14px;font-weight:750;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tag{flex:0 0 auto;font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  border-radius:6px;padding:2px 7px;background:var(--bg-2);color:var(--muted)}
.tag.otp{background:var(--brand-wash);color:var(--brand-ink)}
.tag.scan{background:var(--bad-wash);color:var(--bad)}
.msg-sub{font-size:13.5px;color:var(--text-2);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msg-time{flex:0 0 auto;font-size:12px;color:var(--dim);font-weight:600;padding-top:2px}
.empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  padding:56px 20px;text-align:center}
/* The shipped empty state marks up as .empty-icon + h2 + p, so these are the names that need the
   slate shape rather than the ones this mockup drew by hand. */
.empty-icon{width:52px;height:52px;border-radius:16px;background:var(--bg-2);display:grid;place-items:center;
  color:var(--dim);margin-bottom:8px}
.empty-icon svg{width:30px;height:30px}
.empty h2{font-size:15px;font-weight:750;margin:0}
.empty p{font-size:13.5px;color:var(--muted);margin:0}
.spin{width:26px;height:26px;border-radius:50%;border:2.5px solid var(--line-2);border-top-color:var(--brand);
  animation:spin .8s linear infinite;margin-bottom:10px}

/* premium strip */
.strip{display:flex;align-items:center;gap:14px;margin-top:16px;padding:14px 18px;border-radius:var(--r);
  background:linear-gradient(90deg,#efeaff,#f4f0ff 60%,#fdf3ec);border:1px solid #e2d9ff}
.strip .mk{width:30px;height:30px;border-radius:9px;background:var(--brand);color:#fff;display:grid;
  place-items:center;flex:0 0 auto;font-weight:800;font-size:15px}
.strip p{font-size:14px;color:var(--text-2)}
.strip b{color:var(--text)}
.strip .sp{margin-left:auto;display:flex;gap:8px}

/* ---------- generic sections ---------- */
.sect{padding:64px 0}
.sect-h{text-align:center;max-width:62ch;margin:0 auto 34px}
.sect-h h2{margin-bottom:10px}
.sect-h .sub{margin:0 auto}
.grid{display:grid;gap:16px}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-side{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}
.tile{padding:22px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-xs)}
.tile .ic{width:36px;height:36px;border-radius:10px;background:var(--brand-wash);color:var(--brand);
  display:grid;place-items:center;margin-bottom:13px}
.tile .ic svg{width:18px;height:18px}
.tile h3{margin-bottom:6px}
.tile p{font-size:14px;color:var(--muted)}
.app-tile{display:flex;flex-direction:column;align-items:center;gap:11px;padding:22px 16px;text-align:center}
.app-tile .ic{width:44px;height:44px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line);margin:0}
.app-tile .ic svg{width:22px;height:22px}
.app-tile b{font-size:13.5px;font-weight:700}
.app-tile span{font-size:12px;color:var(--dim)}

.split{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:40px;align-items:center}
.split h2{margin-bottom:14px}
.split p{color:var(--text-2);font-size:15px}
.ticks{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:10px}
.ticks li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:var(--text-2)}
.ticks svg{width:17px;height:17px;flex:0 0 auto;color:var(--ok);margin-top:2px}
.video{aspect-ratio:16/10;border-radius:var(--r-lg);background:
  radial-gradient(120% 90% at 50% 0%,#5b3fd6 0%,#2c1691 55%,#150a45 100%);
  display:grid;place-items:center;box-shadow:var(--sh);position:relative;overflow:hidden}
.video::after{content:"";position:absolute;inset:0;background:
  repeating-linear-gradient(115deg,rgba(255,255,255,.06) 0 2px,transparent 2px 26px)}
.video .play{position:relative;z-index:2;width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.95);
  display:grid;place-items:center;color:var(--brand);box-shadow:0 12px 30px rgba(0,0,0,.35)}
.video .play svg{width:24px;height:24px;margin-left:3px}
.video .cap{position:absolute;top:18px;left:0;right:0;text-align:center;color:rgba(255,255,255,.9);
  font-size:13px;font-weight:700;z-index:2}

/* code */
.code{background:#0d1020;border-radius:var(--r);padding:16px 18px;overflow:auto;box-shadow:var(--sh-sm)}
.code pre{margin:0;font-family:var(--mono);font-size:12.8px;line-height:1.75;color:#c9d1e8;white-space:pre}
.code .k{color:#a5b4fc}.code .s{color:#7dd3a8}.code .c{color:#6b7392}.code .f{color:#f0a868}

/* FAQ */
.faq{max-width:760px;margin:0 auto;display:grid;gap:10px}
.q{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden}
.q>button{width:100%;display:flex;align-items:center;gap:14px;padding:15px 18px;border:0;background:transparent;
  cursor:pointer;text-align:left;font-size:15px;font-weight:700;color:var(--text)}
.q>button .chev{margin-left:auto;width:16px;height:16px;color:var(--dim);transition:transform .22s}
.q.open{border-color:#ded5ff;box-shadow:var(--sh-sm)}
.q.open>button .chev{transform:rotate(180deg);color:var(--brand)}
.q .a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .26s ease}
.q.open .a{grid-template-rows:1fr}
.q .a>div{overflow:hidden}
.q .a p{padding:0 18px 17px;font-size:14.5px;color:var(--muted);max-width:70ch}

/* blog */
.post{display:flex;flex-direction:column;overflow:hidden;padding:0}
.post .ph{height:112px;background:linear-gradient(135deg,#e9e3ff,#f7eee6);position:relative}
.post .ph::after{content:"";position:absolute;inset:0;background:
  radial-gradient(70% 90% at 20% 10%,rgba(109,75,255,.28),transparent 60%),
  radial-gradient(60% 80% at 90% 90%,rgba(255,107,53,.22),transparent 60%)}
.post .in{padding:16px 18px 18px}
.post .k{font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--brand)}
.post h3{font-size:15.5px;margin:7px 0 6px;line-height:1.35}
.post p{font-size:13.5px;color:var(--muted)}

/* ---------- pricing ---------- */
.bill-sw{display:inline-flex;gap:4px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-pill);padding:4px;box-shadow:var(--sh-xs)}
.bill-sw button{border:0;background:transparent;padding:8px 18px;border-radius:var(--r-pill);font-size:13.5px;
  font-weight:700;color:var(--muted);cursor:pointer;display:inline-flex;align-items:center;gap:8px}
.bill-sw button.on{background:var(--brand);color:#fff;box-shadow:0 4px 12px -4px rgba(67,38,200,.6)}
.save{font-size:10.5px;font-weight:800;background:var(--ok-wash);color:var(--ok);border-radius:6px;padding:2px 6px}
.bill-sw button.on .save{background:rgba(255,255,255,.22);color:#fff}
/* auto-fit rather than four columns: the owner publishes two plans or six, and a fixed count leaves
   the row with a stranded empty track. */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;align-items:stretch}
.plan{position:relative;padding:24px;display:flex;flex-direction:column;gap:0}
.plan.feat{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand),var(--sh)}
.plan .badge{position:absolute;top:-11px;left:22px;background:var(--brand);color:#fff;font-size:11px;
  font-weight:800;letter-spacing:.05em;text-transform:uppercase;border-radius:var(--r-pill);padding:4px 11px}
.plan .nm{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.plan .pr{display:flex;align-items:baseline;gap:3px;margin:12px 0 4px}
.plan .pr .c{font-size:20px;font-weight:700;color:var(--text-2)}
.plan .pr .v{font-size:42px;font-weight:800;letter-spacing:-.045em;line-height:1}
.plan .pr .p{font-size:14px;color:var(--muted);font-weight:600}
.plan .ds{font-size:13.5px;color:var(--muted);min-height:40px}
.flist{list-style:none;margin:18px 0 22px;padding:18px 0 0;border-top:1px solid var(--line);display:grid;gap:11px}
.flist li{display:flex;gap:9px;align-items:flex-start;font-size:13.8px;color:var(--text-2)}
.flist svg{width:15px;height:15px;flex:0 0 auto;margin-top:3px;color:var(--ok)}
.flist li.no{color:var(--dim)}
.flist li.no svg{color:var(--dim)}
.flist b{font-weight:750;color:var(--text)}
.plan .btn{margin-top:auto}
.cmp{width:100%;border-collapse:collapse;font-size:14px}
.cmp th,.cmp td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line)}
.cmp thead th{font-size:11.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);
  background:var(--surface-2);position:sticky;top:64px}
.cmp td:not(:first-child),.cmp thead th:not(:first-child){text-align:center;width:15%}
.cmp .grp td{background:var(--bg-2);font-size:11.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--text-2)}
.cmp tbody tr:hover td{background:#fbfcff}
.cmp .yes{color:var(--ok);font-weight:800}
.cmp .no{color:var(--dim)}
.cmp td b{font-weight:750}
.tbl-wrap{overflow:auto;border-radius:var(--r);border:1px solid var(--line);background:var(--surface);box-shadow:var(--sh-sm)}

/* ---------- auth ---------- */
.auth{min-height:calc(100vh - 64px);display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1fr)}
.auth-pitch{padding:52px;background:linear-gradient(160deg,#efeaff,#f7f5ff 55%,#fdf1e9);
  border-right:1px solid var(--line);display:flex;flex-direction:column;justify-content:center}
.auth-pitch .eyebrow{align-self:flex-start}
.auth-pitch h1{font-size:clamp(26px,3.2vw,38px);margin:18px 0 12px}
.auth-pitch p{color:var(--text-2);max-width:40ch}
.auth-form{display:flex;align-items:center;justify-content:center;padding:52px 26px}
.auth-card{width:100%;max-width:404px}
.tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;background:var(--bg-2);border:1px solid var(--line);
  border-radius:12px;padding:4px;margin-bottom:22px}
.tabs button{border:0;background:transparent;padding:10px;border-radius:9px;font-size:14px;font-weight:750;
  color:var(--muted);cursor:pointer;transition:.16s;font-family:inherit}
.tabs button.on{background:var(--surface);color:var(--text);box-shadow:var(--sh-xs)}
.fld{margin-bottom:15px}
.fld label{display:block;font-size:13px;font-weight:700;color:var(--text-2);margin-bottom:6px}
.inp{position:relative;display:flex;align-items:center}
.inp input{width:100%;height:44px;padding:0 13px;border:1.5px solid var(--line-2);border-radius:var(--r-sm);
  background:var(--surface);font:inherit;font-size:14.5px;color:var(--text);outline:none;transition:.16s}
.inp input::placeholder{color:var(--dim)}
.inp input:focus{border-color:var(--brand);box-shadow:0 0 0 4px rgba(67,38,200,.11)}
.inp .eye{position:absolute;right:6px;width:32px;height:32px;border:0;background:transparent;border-radius:8px;
  display:grid;place-items:center;color:var(--dim);cursor:pointer}
.inp .eye:hover{background:var(--bg-2);color:var(--text)}
.inp .eye svg{width:16px;height:16px}
.row{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13.5px;margin-bottom:18px}
.check{display:flex;align-items:flex-start;gap:9px;font-size:13.5px;color:var(--text-2);cursor:pointer}
.check input{width:16px;height:16px;accent-color:var(--brand);margin:2px 0 0;flex:0 0 auto}
.link{color:var(--brand);font-weight:700}
.link:hover{text-decoration:underline}
.meter{display:flex;gap:4px;margin-top:8px}
.meter i{height:4px;flex:1;border-radius:2px;background:var(--line-2);transition:background .2s}
.hint{font-size:12.5px;color:var(--muted);margin-top:7px}
.sep{display:flex;align-items:center;gap:14px;margin:22px 0;color:var(--dim);font-size:12.5px;font-weight:600}
.sep::before,.sep::after{content:"";flex:1;height:1px;background:var(--line)}
.soc{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.soc .btn svg{width:17px;height:17px}
.pane{display:none}
.pane.on{display:block}

/* ---------- account / dashboard ---------- */
.shell{display:grid;grid-template-columns:236px minmax(0,1fr);gap:26px;padding:26px 0 64px;align-items:start}
.side{position:sticky;top:90px;display:flex;flex-direction:column;gap:2px}
.side .grp{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);
  padding:16px 12px 6px}
.side a{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:9px;font-size:14px;
  font-weight:600;color:var(--text-2);transition:.16s}
.side a svg{width:16px;height:16px;opacity:.65}
.side a:hover{background:var(--surface);color:var(--text);box-shadow:var(--sh-xs)}
.side a.on{background:var(--brand-wash);color:var(--brand-ink);font-weight:750}
.side a.on svg{opacity:1}
.side .n{margin-left:auto;font-size:11px;font-weight:800;background:var(--brand);color:#fff;border-radius:var(--r-pill);
  min-width:19px;height:19px;display:grid;place-items:center;padding:0 5px}
.topbar{display:flex;align-items:center;gap:12px;margin-bottom:20px}
.search{flex:1;max-width:420px;display:flex;align-items:center;gap:9px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-sm);padding:0 12px;height:40px;box-shadow:var(--sh-xs)}
.search svg{width:15px;height:15px;color:var(--dim);flex:0 0 auto}
.search input{border:0;outline:none;background:transparent;font:inherit;font-size:14px;width:100%;color:var(--text)}
.chip{display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 11px;border-radius:var(--r-pill);
  font-size:12px;font-weight:800;letter-spacing:.01em;background:var(--bg-2);color:var(--text-2)}
.chip.brand{background:var(--brand-wash);color:var(--brand-ink)}
.chip.ok{background:var(--ok-wash);color:var(--ok)}
.chip.warn{background:var(--warn-wash);color:var(--warn)}
.chip.bad{background:var(--bad-wash);color:var(--bad)}
.chip .dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.card-h{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line)}
.card-h h3{font-size:15.5px}
.card-h .sp{margin-left:auto;display:flex;gap:8px}
.bar{height:6px;border-radius:3px;background:var(--bg-2);overflow:hidden}
.bar i{display:block;height:100%;border-radius:3px;background:var(--brand)}
.bar i.w{background:var(--accent)}
.use{display:grid;gap:5px;margin-bottom:15px}
.use .l{display:flex;justify-content:space-between;font-size:13px}
.use .l span{color:var(--muted)}
.use .l b{font-weight:750;color:var(--text);font-family:var(--mono);font-size:12.5px}
.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{text-align:left;font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);padding:11px 18px;border-bottom:1px solid var(--line);background:var(--surface-2)}
.tbl td{padding:13px 18px;border-bottom:1px solid var(--line);color:var(--text-2)}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr:hover td{background:#fbfcff}
.tbl td b{color:var(--text);font-weight:700}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.pick{border:1px solid var(--line-2);background:var(--surface);border-radius:var(--r-pill);padding:6px 14px;
  font-size:13px;font-weight:700;color:var(--text-2);cursor:pointer;transition:.16s;font-family:inherit}
.pick:hover{border-color:var(--brand-2);color:var(--brand)}
.pick.on{background:var(--brand);border-color:var(--brand);color:#fff}

/* popover */
.pop{position:absolute;z-index:80;background:var(--surface);border:1px solid var(--line);border-radius:12px;
  box-shadow:var(--sh-lg);padding:8px;min-width:230px;text-align:left}
.pop[hidden]{display:none}
.pop h5{margin:0;padding:8px 10px 6px;font-size:11px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--dim)}
.pop button,.pop label{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border:0;
  border-radius:8px;background:transparent;font-size:14px;font-weight:600;color:var(--text-2);cursor:pointer;
  text-align:left;transition:.14s;font-family:inherit}
.pop button:hover,.pop label:hover{background:var(--brand-wash);color:var(--brand-ink)}
.pop button svg{width:15px;height:15px;opacity:.7}
.pop .sep-l{height:1px;background:var(--line);margin:6px 4px}
.pop .d{margin-left:auto;font-size:11.5px;color:var(--dim);font-family:var(--mono)}

/* toast */
.toasts{position:fixed;right:20px;bottom:20px;z-index:200;display:flex;flex-direction:column;gap:10px;
  align-items:flex-end}
.toast{display:flex;align-items:center;gap:11px;background:#12162a;color:#fff;border-radius:12px;
  padding:12px 16px;font-size:14px;font-weight:600;box-shadow:var(--sh-lg);
  animation:tin .28s cubic-bezier(.2,.9,.3,1.2);max-width:340px}
.toast svg{width:17px;height:17px;flex:0 0 auto;color:#7dd3a8}
.toast.out{animation:tout .22s ease forwards}
@keyframes tin{from{opacity:0;transform:translateY(14px) scale(.96)}}
@keyframes tout{to{opacity:0;transform:translateY(8px) scale(.97)}}

/* footer */
/* The approved design is a light footer, so the shipped default for the Appearance screen's footer
   colour is white and every text token below is the dark one. An owner who paints it dark gets the
   .dark variant, which slate.js applies by measuring the colour it actually resolved to -- the same
   trick cannot be done in CSS, and the alternative (hard-coded light text, as the other theme does)
   breaks the moment someone picks a pale colour. */
.foot{background:var(--footer_background_color);border-top:1px solid var(--line);margin-top:64px;padding:52px 0 26px}
.foot-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:34px}
.foot h5{margin:0 0 13px;font-size:12px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.foot a{font-size:14px;color:var(--text-2)}
.foot a:hover{color:var(--brand)}
.foot .blurb{font-size:14px;color:var(--muted);max-width:38ch;margin-top:12px}
.foot-logo{display:inline-flex;align-items:center;gap:10px;font-weight:800;font-size:17px;
  letter-spacing:-.03em;color:var(--text)}
.foot-logo img,.foot-logo svg{width:26px;height:26px;object-fit:contain;border-radius:8px}
.foot-bot{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:38px;padding-top:20px;
  border-top:1px solid var(--line);font-size:13px;color:var(--dim)}
.foot-bot .sp{margin-left:auto;display:flex;gap:18px}
.foot.dark{--text:#fff;--text-2:rgba(255,255,255,.82);--muted:rgba(255,255,255,.62);--dim:rgba(255,255,255,.5)}
.foot.dark h5,.foot.dark .blurb{color:var(--muted)}
.foot.dark a:hover{color:#fff}
.foot.dark .foot-logo{color:#fff}
.foot.dark .nl-form .form-control{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.24);color:#fff}
.foot.dark .nl-form .form-control::placeholder{color:rgba(255,255,255,.6)}
.foot.dark .foot-bot,.foot.dark .nl-sub{border-color:rgba(255,255,255,.18)}

/* newsletter block, printed inside the footer */
.nl{margin-top:34px;padding-top:28px;border-top:1px solid var(--line);max-width:560px}
.nl h5{margin-bottom:5px}
.nl-sub{font-size:13.5px;color:var(--muted);margin-bottom:14px}
.nl-form{display:flex;flex-wrap:wrap;gap:9px;align-items:flex-start}
.nl-field{flex:1 1 240px;min-width:0}
.nl-form .btn{height:44px}
.nl-note{border-radius:var(--r-sm);padding:11px 14px;font-size:13.5px;font-weight:600;margin:0 0 12px}
.nl-note.ok{background:var(--ok-wash);color:#0d5c34;border:1px solid #bfe6cf}
.nl-note.bad{background:var(--bad-wash);color:#8f1b30;border:1px solid #f2c4cd}
.foot.dark .nl-note.ok{background:rgba(15,157,88,.22);color:#a8ecc6;border-color:rgba(168,236,198,.3)}
.foot.dark .nl-note.bad{background:rgba(192,38,63,.22);color:#ffc3cf;border-color:rgba(255,195,207,.3)}

/* reader slide-over */
body.lock{overflow:hidden}
#reader{position:fixed;inset:0;z-index:150;display:none}
#reader.on{display:block}
.reader-mask{position:absolute;inset:0;background:rgba(13,16,32,.42);backdrop-filter:blur(2px);animation:fade .2s ease}
.reader{position:absolute;top:0;right:0;bottom:0;width:min(620px,100%);background:var(--surface);
  display:flex;flex-direction:column;box-shadow:var(--sh-lg);animation:slidein .28s cubic-bezier(.2,.8,.3,1)}
@keyframes fade{from{opacity:0}}
@keyframes slidein{from{transform:translateX(34px);opacity:.4}}
.reader-h{display:flex;align-items:flex-start;gap:14px;padding:18px 22px;border-bottom:1px solid var(--line)}
.reader-h>div{min-width:0;flex:1}
.reader-meta{font-size:12.5px;color:var(--muted);margin-top:3px}
.reader-b{flex:1;overflow:auto;padding:22px}
.reader-sub{font-size:19px;line-height:1.3;margin-bottom:14px}
.reader-b p{font-size:14.5px;color:var(--text-2);margin-bottom:13px}
.reader-code{display:inline-block;font-family:var(--mono);font-size:15px;font-weight:700;letter-spacing:.06em;
  background:var(--brand-wash);color:var(--brand-ink);border:1px dashed #cfc2ff;border-radius:10px;
  padding:9px 15px;margin:2px 0 13px}
.reader-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.btn.busy svg{animation:spin .8s linear infinite}

/* reveal — armed only when JS runs, so content is never stuck invisible */
.js .rv{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s ease}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none;transition:none}}

/* ---------- page hero (sub pages) ---------- */
.phero{padding:46px 0 30px;text-align:center;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,#fff, var(--bg))}
.phero h1{margin:14px 0 10px}
.phero .sub{max-width:60ch;margin:0 auto}
.phero .acts{margin-top:22px}

/* ---------- docs layout ---------- */
.doc{display:grid;grid-template-columns:224px minmax(0,1fr);gap:38px;padding:38px 0 64px;align-items:start}
.doc .side{top:88px}
.doc-body{min-width:0;max-width:820px}
.doc-body h2{font-size:23px;margin:44px 0 12px;scroll-margin-top:90px}
.doc-body h2:first-child{margin-top:0}
.doc-body h3{font-size:16px;margin:26px 0 8px}
.doc-body p{color:var(--text-2);font-size:14.8px;margin-bottom:13px}
.doc-body p.lead{font-size:16.5px;color:var(--text-2)}
.doc-body ul{margin:0 0 14px;padding-left:20px;color:var(--text-2);font-size:14.6px}
.doc-body li{margin-bottom:7px}
.doc-body code{font-family:var(--mono);font-size:12.8px;background:var(--bg-2);border:1px solid var(--line);
  border-radius:6px;padding:1.5px 6px;color:var(--brand-ink)}
.doc-nav{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
.doc-nav a{font-size:12.5px;font-weight:700;color:var(--muted);border:1px solid var(--line);
  background:var(--surface);border-radius:var(--r-pill);padding:5px 12px}
.doc-nav a:hover{color:var(--brand);border-color:var(--brand-2)}

/* endpoint rows */
.eps{display:grid;gap:8px;margin:4px 0 18px}
.ep{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:11px 14px;box-shadow:var(--sh-xs);transition:.16s}
.ep:hover{border-color:var(--brand-2);box-shadow:var(--sh-sm)}
.m{flex:0 0 auto;font-family:var(--mono);font-size:10.5px;font-weight:800;letter-spacing:.05em;
  border-radius:6px;padding:3px 8px;min-width:52px;text-align:center}
.m.get{background:var(--ok-wash);color:var(--ok)}
.m.post{background:var(--brand-wash);color:var(--brand-ink)}
.m.del{background:var(--bad-wash);color:var(--bad)}
.m.patch{background:var(--warn-wash);color:var(--warn)}
.ep .p{font-family:var(--mono);font-size:13px;font-weight:600;color:var(--text);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.ep .d{margin-left:auto;font-size:12.8px;color:var(--muted);white-space:nowrap}
.ep .plan{flex:0 0 auto}

/* numbered steps */
.steps{list-style:none;counter-reset:s;margin:6px 0 20px;padding:0;display:grid;gap:16px}
.steps>li{counter-increment:s;display:grid;grid-template-columns:34px minmax(0,1fr);gap:14px;align-items:start}
.steps>li::before{content:counter(s);width:34px;height:34px;border-radius:11px;background:var(--brand);
  color:#fff;display:grid;place-items:center;font-size:14px;font-weight:800;box-shadow:0 6px 14px -7px rgba(67,38,200,.8)}
.steps b{display:block;font-size:15px;margin-bottom:3px}
.steps p{font-size:14px;color:var(--muted);margin:0}

/* domain cards */
.dom-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.dom{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);padding:15px 16px;box-shadow:var(--sh-xs);transition:.16s}
.dom:hover{border-color:var(--brand-2);box-shadow:var(--sh-sm);transform:translateY(-1px)}
.dom .nm{font-family:var(--mono);font-size:14px;font-weight:650;color:var(--text);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dom .meta{margin-left:auto;display:flex;align-items:center;gap:8px;flex:0 0 auto}
.dom .lat{font-size:11.5px;color:var(--dim);font-family:var(--mono)}
.dom.locked{background:var(--surface-2);border-style:dashed}
.dom.locked .nm{color:var(--muted)}

/* callouts */
.note{display:flex;gap:13px;border-radius:var(--r);padding:15px 17px;border:1px solid;font-size:14px;margin:0 0 18px}
.note svg{width:18px;height:18px;flex:0 0 auto;margin-top:1px}
.note b{font-weight:800}
.note.info{background:var(--brand-wash);border-color:#ded5ff;color:var(--text-2)}
.note.info svg{color:var(--brand)}
.note.warn{background:var(--warn-wash);border-color:#f3ddb4;color:#6b3d06}
.note.warn svg{color:var(--warn)}
.note.ok{background:var(--ok-wash);border-color:#bfe6cf;color:#0d5c34}
.note.ok svg{color:var(--ok)}

/* big search + help categories */
.search-lg{display:flex;align-items:center;gap:12px;max-width:560px;margin:24px auto 0;background:var(--surface);
  border:1.5px solid var(--line-2);border-radius:var(--r);padding:14px 17px;box-shadow:var(--sh)}
.search-lg:focus-within{border-color:var(--brand);box-shadow:0 0 0 4px rgba(67,38,200,.11),var(--sh)}
.search-lg svg{width:18px;height:18px;color:var(--dim);flex:0 0 auto}
.search-lg input{flex:1;min-width:0;border:0;outline:none;background:transparent;font:inherit;font-size:16px;color:var(--text)}
.cat{display:flex;flex-direction:column;gap:11px;padding:20px;cursor:pointer;transition:.16s}
.cat:hover{border-color:var(--brand-2);box-shadow:var(--sh-sm);transform:translateY(-2px)}
.cat .ic{width:36px;height:36px;border-radius:10px;background:var(--brand-wash);color:var(--brand);
  display:grid;place-items:center}
.cat .ic svg{width:18px;height:18px}
.cat b{font-size:15.5px;font-weight:800}
.cat p{font-size:13.5px;color:var(--muted);flex:1}
.cat .cnt{font-size:12px;font-weight:700;color:var(--dim)}
.art{display:flex;align-items:center;gap:11px;padding:12px 16px;border-bottom:1px solid var(--line);font-size:14.5px}
.art:last-child{border-bottom:0}
.art:hover{background:var(--brand-wash);color:var(--brand-ink);cursor:pointer}
.art svg{width:15px;height:15px;color:var(--dim);flex:0 0 auto}
.art .go{margin-left:auto;color:var(--dim)}
.status-row{display:flex;align-items:center;gap:12px;padding:13px 18px;border-bottom:1px solid var(--line);font-size:14px}
.status-row:last-child{border-bottom:0}
.status-row .nm{font-family:var(--mono);font-size:13px}
.status-row .sp{margin-left:auto}
.qk{cursor:pointer;border:1px solid var(--line-2);background:var(--surface);font-weight:700;color:var(--muted)}
.qk:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-wash)}
.help-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:14px;font-size:12.5px;color:var(--muted)}

/* ============================================================
   The shipped mailbox engine.
   public/assets/themes/slate/js/app.js writes this markup itself, so these rules style the
   classes the script produces, not classes a blade file controls. Renaming them here would
   mean editing the script, and the script is shared with the other theme.
   ============================================================ */

/* The address field the script fills in. */
#mainEmail{flex:1;min-width:0;border:0;background:transparent;
  font-family:var(--mono);font-size:clamp(15px,2.6vw,19px);font-weight:600;letter-spacing:-.02em;
  color:var(--text);text-align:left;outline:none;padding:0}
.mail-select{cursor:pointer}
.addr-copy i{font-size:15px;line-height:1}
.addr-copy:disabled{cursor:default}
.act:disabled,.btn:disabled,.addr-copy:disabled{opacity:.42;pointer-events:none;box-shadow:none}
#email_token{display:none}

/* Message rows: .mailbox-item > .mailbox-item-col, newest first. The script appends an optional
   fourth child (.is_seen_message) after the three columns, so the track list has four slots and an
   absent badge simply costs nothing. */
.mailbox{display:flex;flex-direction:column;min-height:420px}
.mailbox-body{flex:1;display:flex;flex-direction:column;min-width:0}
.mailbox-header{display:grid;grid-template-columns:minmax(150px,190px) minmax(0,1fr) auto auto;gap:14px;
  align-items:center;padding:10px 18px;background:var(--surface-2);border-bottom:1px solid var(--line);
  font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.mailbox-header p{margin:0}
#mailbox{list-style:none;margin:0;padding:0;flex:1}
.mailbox-item{display:grid;grid-template-columns:minmax(150px,190px) minmax(0,1fr) auto auto;gap:14px;
  align-items:center;padding:15px 18px;border-bottom:1px solid var(--line);cursor:pointer;
  transition:background .16s;position:relative;min-width:0}
.mailbox-item:last-child{border-bottom:0}
.mailbox-item:hover{background:var(--brand-wash)}
.mailbox-item-col{min-width:0}
.mailbox-item-col p{margin:0;font-size:14px;font-weight:750;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mailbox-item-col p.small{font-size:12px;font-weight:600;color:var(--muted);margin-top:1px}
.mailbox-item-col a{color:inherit;text-decoration:none}
.mailbox-item-col small,.mailbox-item-col time{font-size:12px;color:var(--dim);font-weight:600;
  display:block;white-space:nowrap}
.is_seen_message{justify-self:end;align-self:center;font-size:10px;
  font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--brand-ink);
  background:var(--brand-wash);border-radius:6px;padding:2px 6px;white-space:nowrap}

/* The empty state is a sibling of #mailbox inside .mailbox-body, and the script moves the .empty
   class on/off the .mailbox wrapper as mail arrives, so visibility has to follow that class. */
.mailbox .empty{display:none}
.mailbox.empty .empty{display:flex}
.mailbox.empty #mailbox{display:none}

/* History modal list: .mail-history-day / .mail-history-item. */
.mail-history{text-align:left;max-height:52vh;overflow:auto;border:1px solid var(--line);
  border-radius:var(--r-sm);background:var(--surface)}
.mail-history-day+.mail-history-day{border-top:1px solid var(--line)}
.mail-history-day-header{display:flex;align-items:center;gap:12px;padding:10px 14px;background:var(--surface-2);
  font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.mail-history-day-body{padding:2px 0}
.mail-history-item{display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid var(--line);
  font-size:13.5px}
.mail-history-item:last-child{border-bottom:0}
.mail-history-item span{font-family:var(--mono);font-size:11.5px;color:var(--dim);flex:0 0 auto}
.mail-history-item label.email{font-family:var(--mono);font-size:13px;color:var(--text-2);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mail-history-item .btn,.mail-history-item .label_bluer{margin-left:auto;flex:0 0 auto}
.mail-history-item .label_bluer{font-size:11.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  color:var(--brand-ink)}
.mail-history-empty{padding:34px 18px;text-align:center;color:var(--muted);font-size:14px}
.mail-results-info{margin-top:14px;font-size:13px;color:var(--muted)}
.mail-results-info span{font-weight:800;color:var(--text-2);font-family:var(--mono)}

/* Form controls the shipped markup and scripts reach for. */
.form-control,.form-select{width:100%;min-height:44px;padding:10px 13px;border:1.5px solid var(--line-2);
  border-radius:var(--r-sm);background:var(--surface);font:inherit;font-size:14.5px;color:var(--text);
  transition:border-color .16s,box-shadow .16s}
textarea.form-control{min-height:120px}
.form-control:focus,.form-select:focus{border-color:var(--brand);box-shadow:0 0 0 4px rgba(67,38,200,.11);outline:0}
.form-control::placeholder{color:var(--dim)}
.form-label{display:block;font-size:13px;font-weight:700;color:var(--text-2);margin-bottom:6px}
.form-check-input{width:17px;height:17px;margin:0;border:1.5px solid var(--line-2);border-radius:5px;
  background:var(--surface);accent-color:var(--brand);cursor:pointer;flex:0 0 auto}
.form-check-input:checked{background:var(--brand);border-color:var(--brand)}
.input-group{display:flex;align-items:stretch;gap:8px}
.input-group>.form-control{flex:1 1 auto;min-width:0;border-radius:var(--r-sm)}
.input-group>.btn{flex:0 0 auto}
.invalid-feedback,.text-danger{font-size:12.5px;color:var(--bad);margin-top:5px;display:block}
.alert{border-radius:var(--r-sm);border:1px solid;padding:12px 15px;font-size:14px}
.alert-success{background:var(--ok-wash);border-color:#bfe6cf;color:#0d5c34}
.alert-danger{background:var(--bad-wash);border-color:#f2c4cd;color:#8f1b30}

/* Modals keep the shipped ids but take the slate shape. */
.field{margin-bottom:16px}
.hist-tools{display:flex;gap:9px;margin:14px 0}
.hist-tools .form-control{flex:1 1 auto;min-width:0}
.qr-box{display:inline-block;padding:14px;margin:4px 0 18px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--sh-xs)}
.qr-box img,.qr-box canvas{display:block}
.modal-content{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);
  box-shadow:var(--sh-lg);color:var(--text)}
.modal-header{border-bottom:0;padding:20px 22px 6px}
.modal-title,.modal-header .modal-title{font-size:17px;font-weight:800;letter-spacing:-.02em;color:var(--text)}
.modal-body{padding:14px 22px 22px}
.modal-backdrop.show{opacity:.42}
.btn-close{border:0;background:transparent;width:32px;height:32px;border-radius:8px;color:var(--dim);cursor:pointer}
.btn-close:hover{background:var(--bg-2);color:var(--text)}
.btn-close:focus{outline:2px solid var(--brand);outline-offset:1px;box-shadow:none}

/* Select2, used by the domain picker in the change dialog. */
.select2-container--default .select2-selection--single{height:44px;border:1.5px solid var(--line-2);
  border-radius:var(--r-sm);background:var(--surface)}
.select2-container--default .select2-selection--single .select2-selection__rendered{line-height:42px;
  padding-left:13px;color:var(--text);font-size:14.5px}
.select2-container--default .select2-selection--single .select2-selection__arrow{height:42px}
.select2-container--default .select2-selection--single .select2-selection__placeholder{color:var(--dim)}
.select2-dropdown{border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--surface);
  box-shadow:var(--sh)}
.select2-results__option{padding:9px 13px;font-size:14px;color:var(--text-2)}
.select2-results__option--highlighted[aria-selected]{background:var(--brand-wash);color:var(--brand-ink)}
.select2-container--default .select2-results__option[aria-selected=true]{background:var(--bg-2);color:var(--text)}
.select2-container-custom-span i{color:var(--brand);margin-right:4px}

/* Notifications: the shipped script uses the Flasher + Toastr pair, not slate's own toast. */
#toast-container>div{background:var(--text);color:#fff;border-radius:12px;
  box-shadow:var(--sh-lg);opacity:.97;padding:13px 17px 13px 50px;font-size:14px;font-weight:600;
  max-width:340px;margin:0 0 10px}
#toast-container>div:hover{box-shadow:var(--sh-lg);opacity:1}
#toast-container>.toast-success .toast-type,.toast-message a{color:inherit}
.toast-message{font-weight:600}
.toast-progress{background:var(--brand-2);opacity:.6}
.toast-type{color:#fff !important}

/* Ads, preloader and the floating helpers the layouts print. */
.ad{display:block;text-align:center;line-height:0}
.ad-h{max-width:728px}
.ad-v{width:250px}
.ad img{max-width:100%}
.sticky-adlobage{position:fixed;bottom:0;left:0;right:0;z-index:120;background:var(--surface);
  border-top:1px solid var(--line);box-shadow:0 -10px 30px rgba(16,20,48,.14);padding:8px 14px;
  display:flex;align-items:center;justify-content:center;gap:14px}
.sticky-adlobage-close{width:30px;height:30px;border-radius:8px;background:var(--bg-2);cursor:pointer;flex:0 0 auto}
.sticky-adlobage-close svg{width:15px;height:15px;color:var(--text-2)}
.preloader{position:fixed;inset:0;z-index:300;background:var(--bg);display:grid;place-items:center}
.preloader .spinner{width:34px;height:34px;border-radius:50%;border:3px solid var(--line-2);
  border-top-color:var(--brand);animation:spin .8s linear infinite}
.go-up{position:fixed;right:20px;bottom:86px;width:40px;height:40px;border-radius:12px;background:var(--surface);
  border:1px solid var(--line-2);color:var(--text-2);display:grid;place-items:center;cursor:pointer;
  box-shadow:var(--sh-sm);opacity:0;pointer-events:none;transition:.2s;z-index:110}
.go-up.show{opacity:1;pointer-events:auto}
.go-up:hover{border-color:var(--brand);color:var(--brand)}
.cookies{position:fixed;left:20px;bottom:20px;z-index:210;max-width:420px;background:var(--surface);
  border:1px solid var(--line-2);border-radius:var(--r);box-shadow:var(--sh-lg);padding:18px 20px;
  transform:translateY(16px);opacity:0;pointer-events:none;transition:.24s;text-align:left}
.cookies.show{transform:none;opacity:1;pointer-events:auto}
.cookies h5{font-size:15.5px;margin-bottom:4px}
.cookies p{font-size:13.5px;color:var(--muted)}

/* Sub-page furniture every theme must carry. */
.sect.tight{padding:34px 0}
.body-copy{max-width:820px;margin:0 auto}
.body-copy h2{font-size:21px;margin:30px 0 10px}
.body-copy h3{font-size:17px;margin:24px 0 8px}
.body-copy p{font-size:15px;color:var(--text-2);margin-bottom:13px}
.body-copy ul,.body-copy ol{margin:0 0 14px;padding-left:22px;color:var(--text-2);font-size:14.8px}
.body-copy li{margin-bottom:7px}
.body-copy img{max-width:100%;border-radius:var(--r)}
.body-copy table{width:100%;border-collapse:collapse;font-size:14px;margin-bottom:16px}
.body-copy th,.body-copy td{border:1px solid var(--line);padding:9px 12px;text-align:left}
.body-copy iframe{max-width:100%}
.pagination{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:26px 0 0;padding:0}
.pagination .page-item .page-link{display:block;min-width:38px;padding:9px 12px;text-align:center;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);color:var(--text-2);
  font-size:13.5px;font-weight:700;text-decoration:none}
.pagination .page-item .page-link:hover{border-color:var(--brand-2);color:var(--brand)}
.pagination .page-item.active .page-link{background:var(--brand);border-color:var(--brand);color:#fff}
.pagination .page-item.disabled .page-link{color:var(--dim);pointer-events:none}
.tooltip-inner{background:var(--text);color:#fff;border-radius:8px;font-size:12.5px}
.tooltip .bs-tooltip-top .arrow::before,.bs-tooltip-auto[data-popper-placement^=top] .arrow::before{border-top-color:var(--text)}
.tooltip .bs-tooltip-bottom .arrow::before,.bs-tooltip-auto[data-popper-placement^=bottom] .arrow::before{border-bottom-color:var(--text)}
.tooltip .bs-tooltip-start .arrow::before,.bs-tooltip-auto[data-popper-placement^=left] .arrow::before{border-left-color:var(--text)}
.tooltip .bs-tooltip-end .arrow::before,.bs-tooltip-auto[data-popper-placement^=right] .arrow::before{border-right-color:var(--text)}

/* ---------- home section furniture ---------- */
/* Two .sect blocks in a row read as one wall, so the tinted band is what keeps the home page in
   bands the way the approved mockup does. */
.sect.alt{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.more{text-align:center;margin:28px 0 0}
.cta-box{text-align:center;padding:40px 26px;border-radius:var(--r-lg);background:var(--brand-ink);
  color:var(--on-brand);box-shadow:var(--sh)}
.cta-box h2{color:var(--on-brand)}
.cta-box p{color:rgba(255,255,255,.82);max-width:56ch;margin:10px auto 22px;font-size:15px}
/* Feature icons come from the database as FontAwesome class names, not inline SVG. */
.tile .ic i{font-size:17px}
.cookies-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}

/* ---------- blog ---------- */
.post .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.post .when{font-size:12.5px;color:var(--dim);margin:12px 0 0}
.cover{display:block;background:var(--bg-2)}
.cover img{display:block;width:100%;height:min(360px,42vw);object-fit:cover}
.post-title{font-size:clamp(22px,3.2vw,30px);margin-bottom:14px}
.chips.meta{margin-bottom:22px}
.chips.meta .chip svg{width:13px;height:13px}
.tagline{margin:26px 0 0}
.cmt{margin-top:20px}
.cmt h3{font-size:16px;margin-bottom:14px}

/* ---------- pricing ---------- */
.coupon{max-width:460px;margin:0 auto 12px}
.coupon .form-label{text-align:center}
.was{font-size:13px;color:var(--dim);text-decoration:line-through;margin:-8px 0 2px}
/* The card is a flex column whose last row has to sit on the bottom edge whatever the feature list
   above it grew to. */
.foot-cta{margin-top:auto}
.foot-cta form{margin:0}
.foot-cta .chip{height:40px;padding:0 14px;font-size:13.5px}

/* ---------- message reader ---------- */
.page-grid{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-start;justify-content:center}
.page-grid>.pg-main{flex:1 1 620px;max-width:920px;min-width:0}
.page-grid>.ad{flex:0 0 auto}
.read-head{flex-wrap:wrap}
.read-head .who{min-width:0;display:flex;flex-direction:column;line-height:1.35}
.read-head .who b{font-size:15px;overflow-wrap:anywhere}
.read-head .who .mono{font-size:12.5px;color:var(--muted);overflow-wrap:anywhere}
.read-head .when{font-size:12.5px;color:var(--muted);white-space:nowrap}
.read-head .when em{font-style:normal;color:var(--dim)}
.btn-icon{width:38px;height:38px;border-radius:10px;border:1px solid var(--line-2);background:var(--surface);
  color:var(--text-2);display:inline-grid;place-items:center;cursor:pointer;font-size:15px;transition:.16s;
  padding:0}
.btn-icon:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-wash)}
.btn-icon:disabled{opacity:.6;cursor:default}
.star-icon-color{color:var(--accent)}
.att{padding:16px 20px;border-bottom:1px solid var(--line)}
.att .note{margin-bottom:12px}
.att .card{overflow:hidden}
.art>span:not(.go){min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.art small{color:var(--muted);font-size:12.5px;flex:0 0 auto}
/* app.js sets the height from the iframe document, so only the floor is theme-owned here. */
#myContent{display:block;width:100%;min-height:420px;border:0;background:#fff}
.embed iframe{width:100%;min-height:520px;border:0}
.form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}
.form-row .field{margin-bottom:16px}

@media (max-width:820px){
  /* Four grid slots cannot be re-flowed sensibly when one of them is optional, so the row becomes a
     wrapping flex line: sender with the badge and time beside it, subject on its own line. */
  .mailbox-item{display:flex;flex-wrap:wrap;align-items:center;gap:3px 12px;padding:14px 16px}
  .mailbox-header{display:none}
  .mailbox-item .mailbox-item-col:nth-child(1){flex:1 1 60%;min-width:0}
  .mailbox-item .mailbox-item-col:nth-child(2){flex:1 1 100%;order:5}
  .mailbox-item .mailbox-item-col:nth-child(3){flex:0 0 auto;order:4}
  .mailbox-item .is_seen_message{order:3}
}

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .tool-grid{grid-template-columns:minmax(0,1fr)}
  .rail{position:static;flex-direction:row;flex-wrap:wrap;gap:8px}
  .rail h4{width:100%}
  .rail a{flex:1 1 150px}
  .plans{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .split{grid-template-columns:minmax(0,1fr);gap:26px}
  .foot-grid{grid-template-columns:repeat(3,1fr)}
  .doc{grid-template-columns:minmax(0,1fr);gap:20px}
  .doc .side{position:static;flex-direction:row;overflow:auto;padding-bottom:6px;top:auto}
  .doc .side .grp{display:none}
  .doc .side a{white-space:nowrap}
  .dom-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:820px){
  .mnav{display:none}
  .mast-right .btn{display:none}
  .burger{display:grid;place-items:center}
  .mast.open .mnav{display:flex;position:absolute;top:64px;left:0;right:0;background:var(--brand-ink);
    flex-direction:column;align-items:flex-start;padding:14px 22px 20px;gap:2px;box-shadow:var(--sh)}
  .mast.open .mnav a{padding:9px 11px;font-size:15px}
  .mast.open .mnav .cta{display:block;width:100%;border-top:1px solid rgba(255,255,255,.18);margin-top:10px;padding-top:14px;font-weight:700}
  /* A submenu that opens on top of the dark panel would be unreadable, so on mobile it unfolds
     in place, inside the panel, in the panel's own colours. */
  .mast.open .mnav .ndrop{width:100%;flex-direction:column;align-items:flex-start}
  .mast.open .mnav .ndrop-menu{position:static;display:none;min-width:0;padding:0 0 6px 12px;border:0;
    background:transparent;box-shadow:none}
  .mast.open .mnav .ndrop.active .ndrop-menu{display:block}
  .mast.open .mnav .ndrop-menu a{color:rgba(255,255,255,.78);font-size:14px}
  .mast.open .mnav .ndrop-menu a:hover{background:rgba(255,255,255,.1);color:#fff}
  .mast.open .mnav .ndrop-btn{color:inherit}
  .auth{grid-template-columns:minmax(0,1fr)}
  .auth-pitch{display:none}
  .shell{grid-template-columns:minmax(0,1fr)}
  .side{position:static;flex-direction:row;overflow:auto;padding-bottom:6px}
  .side .grp{display:none}
  .side a{white-space:nowrap}
  .cmp thead th{position:static}
  .form-row{grid-template-columns:minmax(0,1fr)}
  /* The sender line needs the whole width on a phone; the timestamp goes under it rather than
     truncating to three words. */
  .read-head .when{flex:1 1 100%;order:5;white-space:normal}
  .read-head .sp{margin-left:auto}
  .cover img{height:200px}
}
@media (max-width:600px){
  .plans,.g2,.g3,.g4,.dom-grid,.g-side{grid-template-columns:minmax(0,1fr)}
  .ep{flex-wrap:wrap;gap:8px}
  .ep .p{white-space:normal;overflow-wrap:anywhere;flex:1 1 130px;min-width:0}
  .ep .d{display:none}
  .foot-grid{grid-template-columns:repeat(2,1fr)}
  .strip{flex-wrap:wrap}
  .strip .sp{margin-left:0;width:100%;flex-wrap:wrap}
  .addr-box{padding:13px 14px}
  .soc{grid-template-columns:1fr}
}