/* =====================================================================
   Public site styles
   Concept: "airmail slip" — the address card carries the striped edge of
   an airmail envelope and an ink line that drains as the address expires.
   Everything else stays quiet and typographic.
   Fonts: IBM Plex Sans Arabic (Latin + Arabic, OFL) · IBM Plex Mono (address)
   ===================================================================== */

@font-face{font-family:"Plex";src:url(../fonts/ibm-plex-sans-arabic-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Plex";src:url(../fonts/ibm-plex-sans-arabic-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Plex";src:url(../fonts/ibm-plex-sans-arabic-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Plex";src:url(../fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Plex";src:url(../fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2) format("woff2");font-weight:600;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Plex";src:url(../fonts/ibm-plex-sans-arabic-arabic-700-normal.woff2) format("woff2");font-weight:700;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Plex Mono";src:url(../fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}

/* ---------- tokens ---------- */
:root{
  --ink:#0e1424;          /* page */
  --ink-2:#141c30;        /* raised surface */
  --ink-3:#1b2540;        /* inputs / hover */
  --rule:#273352;
  --text:#e9edf5;
  --muted:#93a0ba;
  --faint:#66728c;
  --post:#5d86ff;         /* postal blue */
  --post-strong:#7c9dff;
  --air:#f0605d;          /* airmail red */
  --ok:#35c9a8;
  --warn:#f2b54b;
  --accent:var(--post);
  --on-accent:#ffffff;
  --shadow:0 18px 40px -24px rgba(0,0,0,.65);
  --r-lg:18px; --r-md:12px; --r-sm:8px;
  --font:"Plex",system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif;
  --mono:"Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --container:1120px;
  color-scheme:dark;
}
[data-theme="light"]{
  --ink:#eef2f8; --ink-2:#ffffff; --ink-3:#e5ebf4; --rule:#d3dbe8;
  --text:#121a2b; --muted:#536079; --faint:#7d889d;
  --post:#2f5fe0; --post-strong:#1f49bd; --air:#d8413e; --ok:#13977b; --warn:#b97a0b;
  --shadow:0 16px 36px -26px rgba(22,36,70,.45);
  color-scheme:light;
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--text);font:400 16px/1.6 var(--font);min-height:100vh;display:flex;flex-direction:column}
[lang="ar"] body,[dir="rtl"] body{line-height:1.75}
main{flex:1;outline:none}
img,svg{max-width:100%}
a{color:var(--post-strong);text-underline-offset:3px}
[data-theme="light"] a{color:var(--post)}
h1,h2,h3{line-height:1.2;margin:0 0 .5em;font-weight:700;letter-spacing:-.01em}
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3{letter-spacing:0;line-height:1.35}
h1{font-size:clamp(2rem,4.4vw,3.1rem)}
h2{font-size:clamp(1.45rem,2.6vw,1.9rem)}
h3{font-size:1.125rem}
p{margin:0 0 1em}
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:16px}
.narrow{max-width:780px}
.muted{color:var(--muted)}
.small{font-size:.875rem}
.center{text-align:center}
.hp{position:absolute!important;inset-inline-start:-9999px;width:1px;height:1px;opacity:0}
.skip-link{position:absolute;inset-inline-start:12px;top:-60px;background:var(--accent);color:#fff;padding:8px 14px;border-radius:var(--r-sm);z-index:100}
.skip-link:focus{top:12px}
:focus-visible{outline:2px solid var(--post-strong);outline-offset:2px;border-radius:4px}
[hidden]{display:none!important}
.flip-rtl{transform:none}
[dir="rtl"] .flip-rtl{transform:scaleX(-1)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:0 16px;border-radius:var(--r-md);border:1px solid transparent;background:var(--ink-3);color:var(--text);font:600 .9375rem/1 var(--font);cursor:pointer;text-decoration:none;white-space:nowrap;transition:background-color .15s,border-color .15s,color .15s}
.btn:hover{background:color-mix(in srgb,var(--ink-3) 70%,var(--text) 10%)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-primary{background:var(--accent);color:var(--on-accent)}
.btn-primary:hover{background:var(--post-strong)}
.btn-soft{background:transparent;border-color:var(--rule)}
.btn-soft:hover{border-color:var(--muted);background:var(--ink-3)}
.btn-ghost{background:transparent}
.btn-ghost:hover{background:var(--ink-3)}
.btn-danger-soft{color:var(--air)}
.btn-danger-soft:hover{border-color:var(--air);background:color-mix(in srgb,var(--air) 10%,transparent)}
.btn-sm{min-height:34px;padding:0 12px;font-size:.875rem}
.icon-btn{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:var(--r-md);border:1px solid var(--rule);background:transparent;color:var(--text);cursor:pointer}
.icon-btn:hover{background:var(--ink-3)}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--ink) 88%,transparent);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--rule)}
.header-inner{display:flex;align-items:center;gap:20px;min-height:64px}
.site-header .brand{color:var(--text)}
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--text);text-decoration:none;font-weight:700;font-size:1.125rem}
.brand-logo{height:32px;width:auto}
.main-nav{margin-inline-start:auto}
.main-nav ul{display:flex;gap:4px;list-style:none;margin:0;padding:0}
.main-nav a{display:block;padding:8px 12px;border-radius:var(--r-sm);color:var(--muted);text-decoration:none;font-weight:600;font-size:.9375rem}
.main-nav a:hover{color:var(--text);background:var(--ink-3)}
.main-nav a[aria-current="page"]{color:var(--text);box-shadow:inset 0 -2px 0 var(--accent);border-radius:0}
.header-actions{display:flex;align-items:center;gap:8px}
.lang-switch{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 12px;border:1px solid var(--rule);border-radius:var(--r-md);color:var(--text);text-decoration:none;font-weight:600;font-size:.875rem}
.lang-switch:hover{background:var(--ink-3)}
.theme-toggle .i-sun{display:none}
[data-theme="light"] .theme-toggle .i-sun{display:block}
[data-theme="light"] .theme-toggle .i-moon{display:none}
.menu-toggle{display:none}
@media (max-width:860px){
  .menu-toggle{display:inline-grid}
  .main-nav{position:absolute;inset-inline:0;top:64px;background:var(--ink-2);border-bottom:1px solid var(--rule);display:none;margin:0}
  .main-nav.open{display:block}
  .main-nav ul{flex-direction:column;padding:8px 16px 16px}
  .main-nav a{padding:12px}
  .main-nav a[aria-current="page"]{box-shadow:inset 3px 0 0 var(--accent)}
  [dir="rtl"] .main-nav a[aria-current="page"]{box-shadow:inset -3px 0 0 var(--accent)}
  .header-actions{margin-inline-start:auto}
  .lang-switch span{display:none}
}

/* ---------- hero ---------- */
.hero{position:relative;padding:44px 0 28px}
.hero-compact{padding-top:24px}
.hero-glow{display:none}
.hero-head{max-width:720px;margin-bottom:24px}
.hero-head h1{margin-bottom:.35em}
.lead{font-size:1.125rem;color:var(--muted);max-width:62ch}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;align-items:start}
.hero-grid.has-side{grid-template-columns:minmax(0,1fr) 300px}
.sticky-side{position:sticky;top:88px}
@media (max-width:1020px){.hero-grid.has-side{grid-template-columns:minmax(0,1fr)}.hero-side{display:none}}

/* ---------- the airmail slip (signature element) ---------- */
.mail-card{position:relative;background:var(--ink-2);border-radius:var(--r-lg);padding:28px 24px 22px;box-shadow:var(--shadow);border:1px solid var(--rule);overflow:hidden}
.mail-card::before{content:"";position:absolute;inset:0 0 auto 0;height:8px;background:repeating-linear-gradient(-45deg,var(--air) 0 14px,transparent 14px 22px,var(--post) 22px 36px,transparent 36px 44px)}
.eyebrow{display:block;font-weight:600;color:var(--muted);font-size:.9375rem;margin-bottom:10px}
.address-row{display:flex;gap:10px;align-items:stretch}
.address-box{position:relative;flex:1;min-width:0}
.address-input{width:100%;height:60px;padding:0 18px;border-radius:var(--r-md);border:1px dashed color-mix(in srgb,var(--muted) 55%,transparent);background:var(--ink);color:var(--text);font:500 clamp(1.05rem,2.6vw,1.5rem)/1 var(--mono);text-align:left;direction:ltr;text-overflow:ellipsis}
.address-input:focus{outline:none;border-style:solid;border-color:var(--post)}
.address-skeleton{position:absolute;inset:18px auto 18px 18px;width:60%;border-radius:6px;background:linear-gradient(90deg,var(--ink-3),var(--rule),var(--ink-3));background-size:200% 100%;animation:shimmer 1.4s linear infinite;pointer-events:none}
[data-state="ready"] .address-skeleton,[data-state="expired"] .address-skeleton{display:none}
@keyframes shimmer{to{background-position:-200% 0}}
.btn-copy{min-height:60px;padding:0 22px;font-size:1rem}
.btn-copy.copied{background:var(--ok)}
.timer-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-top:16px}
.timer{display:inline-flex;align-items:center;gap:8px;color:var(--muted)}
.timer-value{font:500 1.0625rem/1 var(--mono);color:var(--text);font-variant-numeric:tabular-nums;min-width:5.5ch;direction:ltr;unicode-bidi:isolate}
[data-urgency="low"] .timer-value{color:var(--warn)}
[data-urgency="critical"] .timer-value{color:var(--air)}
.lifetime-picker{display:inline-flex;align-items:center;gap:8px;color:var(--muted);font-size:.9375rem}
.select-sm,.input{background:var(--ink);color:var(--text);border:1px solid var(--rule);border-radius:var(--r-sm);font:inherit}
.select-sm{height:36px;padding:0 10px}
.progress{height:3px;background:var(--rule);border-radius:3px;margin:12px 0 18px;overflow:hidden}
.progress span{display:block;height:100%;width:100%;background:var(--post);transform-origin:left;transition:transform 1s linear,background-color .3s}
[dir="rtl"] .progress span{transform-origin:right}
[data-urgency="low"] .progress span{background:var(--warn)}
[data-urgency="critical"] .progress span{background:var(--air)}
.actions{display:flex;flex-wrap:wrap;gap:8px}
.actions .btn{flex:1 1 auto}
@media (max-width:560px){
  .mail-card{padding:24px 14px 16px}
  .address-row{flex-direction:column}
  .address-input{height:54px;padding:0 10px;font-size:clamp(.82rem,4vw,1.05rem);text-align:center}
  .btn-copy{min-height:48px}
  .actions .btn{flex:1 1 calc(50% - 8px)}
  .actions .btn:last-child{flex-basis:100%}
}
.change-form{margin-top:18px;padding-top:18px;border-top:1px dashed var(--rule)}
.change-title{font-weight:600;margin-bottom:10px}
.change-row{display:flex;align-items:center;gap:8px}
.change-row .input{height:44px;padding:0 12px;min-width:0}
.change-row input{flex:1.3}
.change-row select{flex:1}
.at{color:var(--muted);font:500 1.1rem var(--mono)}
.hint{color:var(--faint);font-size:.875rem;margin:8px 0}
.form-error{color:var(--air);font-size:.9rem;margin:6px 0}
.change-actions{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:8px;margin-top:10px}
.turnstile-box{margin-top:14px}
.expired-box{margin-top:16px;padding:14px;border-radius:var(--r-md);background:color-mix(in srgb,var(--air) 10%,transparent);border:1px solid color-mix(in srgb,var(--air) 35%,transparent);display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
.expired-box p{margin:0}
[data-state="expired"] .address-input{text-decoration:line-through;color:var(--muted)}

/* ---------- inbox ---------- */
.inbox-card{margin-top:20px;background:var(--ink-2);border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden}
.inbox-head{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--rule)}
.inbox-head h2{font-size:1.125rem;margin:0;display:flex;align-items:center;gap:10px}
.count-badge{display:inline-grid;place-items:center;min-width:26px;height:24px;padding:0 8px;border-radius:12px;background:var(--ink-3);font-size:.8125rem;font-variant-numeric:tabular-nums}
.count-badge.has-unread{background:var(--accent);color:#fff}
.live-dot{display:inline-flex;align-items:center;gap:8px;color:var(--muted);font-size:.8125rem}
.live-dot span{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 60%,transparent);animation:live 2.4s ease-out infinite}
.live-dot.paused span{background:var(--faint);animation:none}
@keyframes live{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 55%,transparent)}70%,100%{box-shadow:0 0 0 8px transparent}}
.inbox-cols{display:grid;grid-template-columns:minmax(140px,1.1fr) 2.4fr 110px;gap:16px;padding:8px 20px;color:var(--faint);font-size:.8125rem;border-bottom:1px solid var(--rule)}
.inbox-cols span:last-child{text-align:end}
.message-list{list-style:none;margin:0;padding:0}
.message-list li+li{border-top:1px solid var(--rule)}
.msg-row{display:grid;grid-template-columns:minmax(140px,1.1fr) 2.4fr 110px;gap:16px;align-items:center;width:100%;padding:14px 20px;background:none;border:0;color:inherit;font:inherit;text-align:start;cursor:pointer;text-decoration:none}
.msg-row:hover{background:var(--ink-3)}
.message-list a.msg-row{color:var(--text)}
.msg-from{display:flex;align-items:center;gap:10px;min-width:0}
.msg-from strong,.msg-subject strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msg-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--accent)}
.msg-row.read .msg-dot{background:transparent;box-shadow:inset 0 0 0 1px var(--rule)}
.msg-row.read strong{font-weight:400}
.msg-subject{min-width:0;display:flex;flex-direction:column}
.msg-preview{color:var(--muted);font-size:.875rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msg-time{color:var(--muted);font-size:.8125rem;text-align:end;white-space:nowrap;font-variant-numeric:tabular-nums}
.msg-att{display:inline-flex;align-items:center;gap:4px;color:var(--muted);font-size:.75rem}
.msg-row.fresh{animation:arrive .9s ease-out}
@keyframes arrive{from{background:color-mix(in srgb,var(--post) 22%,transparent)}to{background:transparent}}
@media (max-width:640px){
  .inbox-cols{display:none}
  .msg-row{grid-template-columns:1fr auto;grid-template-areas:"from time" "subj subj";gap:4px 12px;padding:14px 16px}
  .msg-from{grid-area:from}.msg-time{grid-area:time}.msg-subject{grid-area:subj;padding-inline-start:18px}
}
.empty-state{padding:44px 20px 48px;text-align:center;color:var(--muted)}
.empty-state h3{color:var(--text);margin-top:10px}
.empty-state p{max-width:44ch;margin-inline:auto}
.empty-anim{color:var(--muted);display:inline-block}
.empty-anim .pulse{transform-origin:58px 22px;animation:ping 2.2s ease-in-out infinite}
@keyframes ping{0%,100%{transform:scale(.7);opacity:.6}50%{transform:scale(1);opacity:1}}

/* ---------- message viewer ---------- */
.viewer{margin-top:20px;background:var(--ink-2);border:1px solid var(--rule);border-radius:var(--r-lg);overflow:hidden}
.viewer-bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;padding:10px 12px;border-bottom:1px solid var(--rule)}
.viewer-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.seg{display:inline-flex;border:1px solid var(--rule);border-radius:var(--r-sm);overflow:hidden}
.seg-btn{border:0;background:transparent;color:var(--muted);font:600 .8125rem var(--font);padding:7px 12px;cursor:pointer}
.seg-btn[aria-pressed="true"]{background:var(--ink-3);color:var(--text)}
.seg-btn:disabled{opacity:.4;cursor:not-allowed}
.viewer-loading{display:flex;align-items:center;gap:10px;padding:40px 20px;color:var(--muted);justify-content:center}
.spinner{width:18px;height:18px;border-radius:50%;border:2px solid var(--rule);border-top-color:var(--post);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.viewer-head{padding:20px 20px 12px}
.viewer-subject{font-size:1.375rem;overflow-wrap:anywhere}
.viewer-meta{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap}
.avatar{flex:none;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-weight:700;background:var(--ink-3);color:var(--post-strong);text-transform:uppercase}
.meta-list{margin:0;flex:1;min-width:220px;font-size:.9375rem}
.meta-list div{display:flex;gap:10px}
.meta-list dt{color:var(--muted);min-width:52px}
.meta-list dd{margin:0;overflow-wrap:anywhere}
.auth-badges{display:flex;gap:6px;flex-wrap:wrap}
.auth-badge{font-size:.75rem;padding:3px 8px;border-radius:999px;border:1px solid var(--rule);color:var(--muted)}
.auth-badge.pass{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 45%,transparent)}
.auth-badge.fail{color:var(--air);border-color:color-mix(in srgb,var(--air) 45%,transparent)}
.images-note{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 20px 12px;padding:10px 12px;border-radius:var(--r-sm);background:color-mix(in srgb,var(--warn) 12%,transparent);color:var(--text);font-size:.9rem}
.frame-wrap{margin:0 12px 12px;border-radius:var(--r-md);overflow:hidden;background:#fff;border:1px solid var(--rule)}
.frame-wrap iframe{display:block;width:100%;height:420px;border:0;background:#fff}
.attachments{padding:4px 20px 18px}
.attachments h3{font-size:1rem}
.attachments ul{list-style:none;margin:0 0 8px;padding:0;display:flex;flex-direction:column;gap:6px}
.att{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid var(--rule);border-radius:var(--r-sm)}
.att-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.att-meta{color:var(--muted);font-size:.8125rem;white-space:nowrap}
.report-form{padding:16px 20px 20px;border-top:1px solid var(--rule)}
.field{display:block;margin-bottom:14px}
.field>span{display:block;font-weight:600;font-size:.9rem;margin-bottom:6px}
.field .input,.field textarea{width:100%;padding:10px 12px}
.field input.input{height:46px}
.field-error{display:block;color:var(--air);min-height:1em;font-size:.8125rem;margin-top:4px}
.input:focus{outline:none;border-color:var(--post)}
.hide-sm{display:inline}
@media (max-width:520px){.hide-sm{display:none}}

/* ---------- content sections ---------- */
.section{padding:56px 0}
.section-alt{background:var(--ink-2);border-block:1px solid var(--rule)}
.section-head{max-width:640px;margin-bottom:28px}
.section-head p{color:var(--muted)}
.row-between{display:flex;justify-content:space-between;align-items:end;gap:16px;max-width:none}
.features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 32px}
.feature{padding-top:14px;border-top:1px solid var(--rule)}
.feature-icon{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:10px;color:var(--post-strong);background:color-mix(in srgb,var(--post) 14%,transparent);margin-bottom:12px}
.feature p{color:var(--muted);margin:0}
@media (max-width:860px){.features{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.features{grid-template-columns:1fr}}
.steps{list-style:none;padding:0;margin:0 0 24px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;counter-reset:s}
.step{position:relative;padding:22px 20px;background:var(--ink);border:1px solid var(--rule);border-radius:var(--r-md)}
.step-num{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1.5px solid var(--post);color:var(--post-strong);font-weight:700;margin-bottom:12px;font-variant-numeric:tabular-nums}
.step p{color:var(--muted);margin:0}
@media (max-width:760px){.steps{grid-template-columns:1fr}}
.link-arrow{font-weight:600;text-decoration:none}
.link-arrow:hover{text-decoration:underline}
.split{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:start}
@media (max-width:860px){.split{grid-template-columns:1fr}}
.check-list,.dot-list{list-style:none;padding:0;margin:0 0 16px}
.check-list li{position:relative;padding-inline-start:30px;margin-bottom:10px}
.check-list li::before{content:"";position:absolute;inset-inline-start:2px;top:.45em;width:14px;height:8px;border-inline-start:2px solid var(--ok);border-bottom:2px solid var(--ok);transform:rotate(-45deg)}
[dir="rtl"] .check-list li::before{transform:rotate(45deg) scaleX(-1)}
.dot-list li{position:relative;padding-inline-start:18px;margin-bottom:8px;color:var(--muted)}
.dot-list li::before{content:"";position:absolute;inset-inline-start:0;top:.7em;width:6px;height:6px;border-radius:50%;background:var(--post)}
.privacy-card{padding:26px;border-radius:var(--r-lg);border:1px solid var(--rule);background:var(--ink-2)}
.privacy-card p{color:var(--muted)}

/* FAQ */
.faq-list{display:flex;flex-direction:column;margin-bottom:24px;border-top:1px solid var(--rule)}
.faq-item{border-bottom:1px solid var(--rule)}
.faq-item summary{list-style:none;cursor:pointer;padding:18px 36px 18px 0;font-weight:600;font-size:1.0625rem;position:relative}
[dir="rtl"] .faq-item summary{padding:18px 0 18px 36px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"";position:absolute;inset-inline-end:6px;top:50%;width:10px;height:10px;border-inline-end:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:translateY(-70%) rotate(45deg);transition:transform .2s}
.faq-item[open] summary::after{transform:translateY(-20%) rotate(-135deg)}
.faq-answer{padding:0 0 18px;color:var(--muted)}

/* Blog */
.post-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
@media (max-width:900px){.post-grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.post-grid{grid-template-columns:1fr}}
.post-card{display:flex;flex-direction:column;padding:22px;border:1px solid var(--rule);border-radius:var(--r-md);background:var(--ink-2)}
.post-card h3{font-size:1.125rem;margin:10px 0 8px}
.post-card h3 a{color:var(--text);text-decoration:none}
.post-card h3 a:hover{text-decoration:underline}
.post-card p{color:var(--muted);flex:1}
.post-meta{display:flex;gap:8px;color:var(--faint);font-size:.8125rem;flex-wrap:wrap}
.chip{display:inline-block;align-self:flex-start;padding:4px 10px;border-radius:999px;border:1px solid var(--rule);color:var(--muted);text-decoration:none;font-size:.8125rem;font-weight:600}
.chip:hover,.chip.active{border-color:var(--post);color:var(--text)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.pager{display:flex;justify-content:center;align-items:center;gap:16px;margin:32px 0}
.empty-note{padding:48px 0;color:var(--muted);text-align:center}
.related{margin:40px 0 20px}

/* Pages */
.page-hero{padding:40px 0 20px}
.page-hero h1{font-size:clamp(1.8rem,3.6vw,2.6rem)}
.breadcrumb{display:flex;flex-wrap:wrap;gap:8px;color:var(--faint);font-size:.875rem;margin-bottom:14px}
.breadcrumb a{color:var(--muted);text-decoration:none}
.breadcrumb a:hover{color:var(--text)}
.prose{font-size:1.0625rem;max-width:72ch}
.prose h2{margin-top:1.8em;font-size:1.5rem}
.prose h3{margin-top:1.4em}
.prose ul,.prose ol{padding-inline-start:1.3em;margin:0 0 1.1em}
.prose li{margin-bottom:.4em}
.prose table{width:100%;border-collapse:collapse;margin:1.2em 0;font-size:.9375rem;display:block;overflow-x:auto}
.prose th,.prose td{text-align:start;padding:10px 12px;border-bottom:1px solid var(--rule);vertical-align:top}
.prose th{color:var(--muted);font-weight:600}
.prose code{font-family:var(--mono);font-size:.9em;background:var(--ink-3);padding:2px 6px;border-radius:5px}
.prose img{height:auto;border-radius:var(--r-sm)}
.notice{padding:10px 14px;border-radius:var(--r-sm);background:var(--ink-3);color:var(--muted);font-size:.9rem}
.cta-card{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin:44px 0;padding:24px;border-radius:var(--r-lg);background:var(--ink-2);border:1px solid var(--rule);position:relative;overflow:hidden}
.cta-card::before{content:"";position:absolute;inset:0 auto 0 0;width:6px;background:repeating-linear-gradient(-45deg,var(--air) 0 10px,transparent 10px 16px,var(--post) 16px 26px,transparent 26px 32px)}
[dir="rtl"] .cta-card::before{inset:0 0 0 auto}
.cta-card h2{font-size:1.25rem;margin-bottom:4px}
.cta-card p{margin:0;color:var(--muted)}

/* Contact */
.contact-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:24px;align-items:start;margin-bottom:48px}
@media (max-width:820px){.contact-grid{grid-template-columns:1fr}}
.card{padding:24px;border-radius:var(--r-lg);background:var(--ink-2);border:1px solid var(--rule)}
.card h2{font-size:1.125rem}
.form-status{min-height:1.4em;font-weight:600}
.form-status.ok{color:var(--ok)}.form-status.err{color:var(--air)}

/* Ads — reserved space prevents layout shift; clearly labelled */
.ad-wrap{margin-block:20px}
.ad-slot{display:block;position:relative;width:100%;overflow:hidden;text-align:center;border-radius:var(--r-sm);background:color-mix(in srgb,var(--ink-3) 45%,transparent)}
.ad-label{display:block;font-size:.6875rem;color:var(--faint);padding:2px 0;letter-spacing:.02em}
.ad-inline{margin:2em 0}
@media (max-width:767px){.ad-dev-desktop{display:none}}
@media (min-width:768px){.ad-dev-mobile{display:none}}

/* While a private message is open on the homepage, ad slots are hidden. */
body.viewing-message .ad-slot{display:none!important}

/* Footer */
.site-footer{margin-top:40px;border-top:1px solid var(--rule);padding:40px 0 24px;background:var(--ink)}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:32px}
@media (max-width:760px){.footer-grid{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1/-1}}
.footer-brand p{color:var(--muted);max-width:42ch}
.footer-h{font-size:.9375rem;color:var(--muted);margin-bottom:10px}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin-bottom:8px}
.site-footer li a{color:var(--text);text-decoration:none;font-size:.9375rem}
.site-footer li a:hover{color:var(--post-strong)}
.footer-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:32px;padding-top:18px;border-top:1px solid var(--rule);color:var(--faint);font-size:.875rem}

/* Consent */
.consent{position:fixed;inset-inline:16px;bottom:16px;z-index:60;max-width:560px;margin-inline:auto;padding:16px 18px;border-radius:var(--r-md);background:var(--ink-2);border:1px solid var(--rule);box-shadow:var(--shadow);display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.consent p{margin:0;flex:1 1 280px;font-size:.9rem;color:var(--muted)}
.consent-actions{display:flex;gap:8px}

/* Toasts */
.toast-host{position:fixed;inset-inline-end:16px;bottom:16px;z-index:70;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.toast{pointer-events:auto;min-width:220px;max-width:360px;padding:12px 16px;border-radius:var(--r-md);background:var(--text);color:var(--ink);font-weight:600;font-size:.9375rem;box-shadow:var(--shadow);animation:toast-in .25s ease-out}
.toast.err{background:var(--air);color:#fff}
@keyframes toast-in{from{opacity:0;transform:translateY(8px)}}

/* Error page */
.error-page{justify-content:center}
.error-wrap{max-width:560px;margin:10vh auto;padding:0 16px;text-align:center}
.error-code{font:500 clamp(4rem,14vw,7rem)/1 var(--mono);color:var(--post);opacity:.85}
.debug{text-align:start;white-space:pre-wrap;font-size:12px;background:var(--ink-2);padding:12px;border-radius:8px;overflow:auto}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
@media print{.site-header,.site-footer,.ad-slot,.consent,.actions{display:none!important}}

/* Real cumulative mailbox counter on the public homepage. */
.created-counter{display:flex;align-items:center;justify-content:center;gap:10px;width:max-content;max-width:100%;margin:0 auto 24px;padding:9px 18px;border:1px solid var(--border,#29364e);border-radius:999px;background:var(--surface,#141d30);color:var(--text,#e8eefb);font-size:13px;line-height:1.5}
.created-counter strong{font-size:18px;font-variant-numeric:tabular-nums;color:var(--accent,#648cff)}
.created-counter-icon{font-size:18px;color:var(--accent,#648cff)}
@media(max-width:480px){.created-counter{font-size:12px;padding:8px 12px;gap:7px;margin-bottom:18px}.created-counter strong{font-size:16px}}