/* ==========================================================================
   untold-casino-kuwait.com — global stylesheet
   Purple / black / white. Display: Reem Kufi. Text: IBM Plex Sans Arabic.
   ========================================================================== */

:root{
  /* --- surface --------------------------------------------------------- */
  --void:#0b0910;
  --canvas:#100c17;
  --panel:#161020;
  --panel-2:#1e1730;
  --line:#2a2038;
  --line-soft:#221a2e;

  /* --- ink ------------------------------------------------------------- */
  --ink:#f4f1f8;
  --ink-2:#c3bad4;
  --ink-3:#9d92b0;
  --ink-4:#6f6685;

  /* --- brand ----------------------------------------------------------- */
  --violet:#a855f7;
  --violet-2:#c084fc;
  --violet-deep:#5b21b6;
  --violet-wash:rgba(168,85,247,.12);

  /* --- action ---------------------------------------------------------- */
  --act-1:#a855f7;
  --act-2:#7c3aed;
  --act-deep:#4c1d95;

  /* --- signal ---------------------------------------------------------- */
  --good:#34d399;
  --warn:#fbbf24;
  --bad:#f87171;
  --good-bg:rgba(52,211,153,.10);
  --warn-bg:rgba(251,191,36,.10);
  --bad-bg:rgba(248,113,113,.10);

  /* --- type ------------------------------------------------------------ */
  --f-display:"Reem Kufi","Segoe UI",Tahoma,sans-serif;
  --f-text:"IBM Plex Sans Arabic","Segoe UI",Tahoma,sans-serif;
  --f-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --t-xs:.75rem;
  --t-sm:.875rem;
  --t-base:1rem;
  --t-md:1.0625rem;
  --t-lg:1.25rem;
  --t-xl:1.5rem;
  --t-2xl:1.875rem;
  --t-3xl:2.375rem;
  --t-4xl:3rem;

  /* --- space ----------------------------------------------------------- */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px;

  /* --- geometry -------------------------------------------------------- */
  --r-sm:3px; --r-md:8px; --r-lg:14px;
  --wrap:1120px;
  --measure:780px;
  --head-h:64px;
  --bar-h:66px;

  --shadow-sm:0 1px 2px rgba(0,0,0,.5);
  --shadow-lift:0 18px 44px rgba(0,0,0,.6);
  --shadow-btn:0 4px 0 var(--act-deep),0 12px 26px rgba(124,58,237,.42);
  --ease:cubic-bezier(.2,.7,.3,1);
}

/* ==========================================================================
   Reset & base
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box}

html,body{overflow-x:clip}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--head-h) + var(--s-4));
}

body{
  margin:0;
  background:var(--void);
  color:var(--ink);
  font-family:var(--f-text);
  font-size:var(--t-md);
  line-height:1.9;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block}

h1,h2,h3,h4{
  font-family:var(--f-display);
  font-weight:700;
  line-height:1.35;
  margin:0;
  color:var(--ink);
  overflow-wrap:break-word;
}

p,li,td,th,summary,dd,dt{overflow-wrap:break-word}
p{margin:0 0 var(--s-4)}

a{color:var(--violet-2);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}

:focus-visible{outline:3px solid var(--violet);outline-offset:2px;border-radius:2px}

code,.mono{
  font-family:var(--f-mono);
  font-size:.88em;
  direction:ltr;
  display:inline-block;
  unicode-bidi:isolate;
  background:var(--panel-2);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  padding:1px 6px;
  color:var(--violet-2);
}

hr{border:0;border-top:1px solid var(--line);margin:var(--s-6) 0}

.skip{
  position:absolute;
  inset-inline-start:-9999px;
  top:0;
  z-index:1000;
  background:var(--violet);
  color:#fff;
  font-family:var(--f-display);
  font-weight:700;
  padding:var(--s-3) var(--s-5);
  border-radius:0 0 var(--r-md) var(--r-md);
}
.skip:focus{inset-inline-start:var(--s-4)}

/* ==========================================================================
   Layout
   ========================================================================== */

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--s-5)}
.grid,.flex{min-width:0}
.grid>*,.flex>*{min-width:0}

/* ==========================================================================
   Header
   ========================================================================== */

.site-head{
  position:sticky;
  top:0;
  z-index:80;
  background:rgba(11,9,16,.94);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  box-shadow:0 1px 0 var(--violet-deep);
}
.head-in{display:flex;align-items:center;gap:var(--s-4);min-height:var(--head-h)}

.brand{
  display:flex;align-items:center;gap:var(--s-2);
  font-family:var(--f-display);font-weight:700;font-size:var(--t-base);
  color:var(--ink);white-space:nowrap;
}
.brand:hover{text-decoration:none;color:var(--violet-2)}
.brand .mark{
  display:inline-grid;place-items:center;
  width:32px;height:32px;
  background:linear-gradient(140deg,var(--act-1),var(--act-deep));
  color:#fff;border-radius:var(--r-sm);
  font-size:.9rem;font-weight:700;flex:0 0 auto;
}

.nav{margin-inline-start:auto}
.nav ul{display:flex;flex-wrap:wrap;gap:var(--s-1);list-style:none;margin:0;padding:0}
.nav a{
  display:block;padding:var(--s-2) var(--s-3);
  color:var(--ink-3);font-size:var(--t-sm);
  border-radius:var(--r-sm);border:1px solid transparent;
}
.nav a:hover{color:var(--ink);background:var(--panel-2);text-decoration:none}
.nav a[aria-current="page"]{
  color:var(--violet-2);background:var(--violet-wash);
  border-color:var(--violet);font-weight:600;
}

.lang{display:flex;gap:2px;border:1px solid var(--line);border-radius:var(--r-sm);padding:2px;flex:0 0 auto;background:var(--panel)}
.lang a{
  padding:var(--s-1) var(--s-3);
  font-family:var(--f-display);font-size:var(--t-xs);font-weight:700;
  color:var(--ink-4);border-radius:2px;letter-spacing:.06em;
}
.lang a:hover{color:var(--ink);text-decoration:none}
.lang a[aria-current="true"]{background:var(--violet);color:#fff}

.nav-toggle{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
.burger{
  display:none;align-items:center;justify-content:center;
  width:44px;height:44px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--panel);cursor:pointer;flex:0 0 auto;margin-inline-start:auto;
}
.burger span{display:block;width:20px;height:2px;background:var(--ink);position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:20px;height:2px;background:var(--ink)}
.burger span::before{top:-6px}
.burger span::after{top:6px}
.nav-toggle:focus-visible+.burger{outline:3px solid var(--violet);outline-offset:2px}

/* ==========================================================================
   Hero / CTA
   ========================================================================== */

.hero{
  position:relative;
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(760px 340px at 88% -18%,rgba(168,85,247,.28),transparent 62%),
    radial-gradient(620px 280px at 4% 4%,rgba(91,33,182,.22),transparent 60%),
    linear-gradient(180deg,#0d0a13,var(--void));
  padding-block:var(--s-7) var(--s-8);
}

.eyebrow{
  display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-4);
  font-family:var(--f-display);font-size:var(--t-xs);font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-4);
  margin-bottom:var(--s-4);
}
.eyebrow span{display:inline-flex;align-items:center;gap:6px}
.eyebrow .dot{width:8px;height:8px;border-radius:50%;background:var(--violet);flex:0 0 auto}
.eyebrow .restrict{color:var(--bad)}

.hero h1{
  font-size:clamp(1.75rem,5vw,var(--t-4xl));
  font-weight:700;letter-spacing:-.01em;
  margin-bottom:var(--s-4);max-width:24ch;
}

.hero .lede{font-size:var(--t-lg);color:var(--ink-2);max-width:64ch;margin-bottom:var(--s-6)}

.cta-main{
  display:block;background:var(--panel);
  border:1px solid var(--line);border-top:3px solid var(--violet);
  border-radius:var(--r-lg);padding:var(--s-5);color:var(--ink);
  box-shadow:var(--shadow-sm);
  transition:transform .18s var(--ease),border-color .18s var(--ease),box-shadow .18s var(--ease);
}
.cta-main:hover{
  transform:translateY(-3px);border-color:var(--violet);
  box-shadow:var(--shadow-lift);text-decoration:none;
}
.cta-main:focus-visible{outline:3px solid var(--violet);outline-offset:3px}

.cta-kicker{
  display:flex;align-items:center;gap:var(--s-2);
  font-family:var(--f-display);font-size:var(--t-xs);font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--violet-2);
  margin-bottom:var(--s-3);
}
.cta-kicker .ext{
  font-family:var(--f-mono);border:1px solid var(--violet);border-radius:3px;
  padding:0 5px;font-size:.7rem;letter-spacing:0;
}

.cta-main h2{font-size:clamp(1.25rem,3.4vw,var(--t-2xl));font-weight:700;margin-bottom:var(--s-2)}
.cta-note{color:var(--ink-2);font-size:var(--t-base);margin-bottom:var(--s-5)}

.btn{
  display:flex;align-items:center;justify-content:center;gap:var(--s-2);
  width:100%;min-height:56px;padding:var(--s-3) var(--s-5);
  font-family:var(--f-display);font-size:1.15rem;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;
  color:#fff;background:linear-gradient(180deg,var(--act-1),var(--act-2));
  border:0;border-radius:var(--r-md);box-shadow:var(--shadow-btn);
  transition:transform .12s var(--ease),box-shadow .12s var(--ease);
}
.cta-main:active .btn,.cta-tile:active .btn-sm,.cta-bar:active .btn-sm{
  transform:translateY(3px);box-shadow:0 1px 0 var(--act-deep);
}

.cta-facts{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,128px),1fr));
  gap:var(--s-3);margin-top:var(--s-5);padding-top:var(--s-4);border-top:1px solid var(--line);
}
.cta-facts div{min-width:0}
.cta-facts b{
  display:block;font-family:var(--f-display);font-size:var(--t-lg);font-weight:700;
  color:var(--violet-2);line-height:1.25;
}
.cta-facts span{font-size:var(--t-xs);color:var(--ink-4);line-height:1.5;display:block}

.cta-tiles{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));
  gap:var(--s-3);margin-top:var(--s-4);
}
.cta-tile{
  display:flex;flex-direction:column;gap:var(--s-2);
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r-md);
  padding:var(--s-4);color:var(--ink);min-width:0;
  transition:transform .18s var(--ease),border-color .18s var(--ease);
}
.cta-tile:hover{transform:translateY(-2px);border-color:var(--violet);text-decoration:none}
.cta-tile:focus-visible{outline:3px solid var(--violet);outline-offset:3px}
.cta-tile h3{font-size:var(--t-base);font-weight:700}
.cta-tile p{flex:1;margin:0;font-size:var(--t-sm);color:var(--ink-3);line-height:1.7}
.btn-sm{
  display:flex;align-items:center;justify-content:center;
  min-height:44px;padding:var(--s-2) var(--s-4);
  font-family:var(--f-display);font-size:.95rem;font-weight:700;
  letter-spacing:.03em;text-transform:uppercase;
  color:var(--violet-2);background:var(--violet-wash);
  border:1px solid var(--violet);border-radius:var(--r-sm);
}
.cta-tile:hover .btn-sm{background:linear-gradient(180deg,var(--act-1),var(--act-2));color:#fff;border-color:transparent}

.cta-disclosure{margin-top:var(--s-5);font-size:var(--t-xs);color:var(--ink-4);line-height:1.8}
.cta-disclosure a{color:var(--ink-3);text-decoration:underline;text-underline-offset:3px}

.cta-bar{display:none}

/* ==========================================================================
   Breadcrumbs
   ========================================================================== */

.crumbs{
  background:var(--canvas);padding-block:var(--s-4);
  border-bottom:1px solid var(--line);font-size:var(--t-sm);color:var(--ink-4);
}
.crumbs ol{display:flex;flex-wrap:wrap;gap:var(--s-2);list-style:none;margin:0;padding:0}
.crumbs li::after{content:"›";margin-inline-start:var(--s-2);color:var(--line)}
.crumbs li:last-child::after{content:""}
.crumbs a{color:var(--ink-4)}
.crumbs a:hover{color:var(--violet-2)}

/* ==========================================================================
   Article
   ========================================================================== */

.page{padding-block:var(--s-7) var(--s-8);background:var(--canvas)}

.article{
  max-width:var(--measure);margin-inline:auto;
  background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r-lg);padding:var(--s-6) var(--s-5);
}

.article h2{
  font-size:clamp(1.3rem,3.6vw,var(--t-2xl));font-weight:700;
  margin:var(--s-8) 0 var(--s-4);
  padding-inline-start:var(--s-4);border-inline-start:3px solid var(--violet);
}
.article h2:first-of-type{margin-top:var(--s-4)}
.article h3{font-size:var(--t-lg);font-weight:700;margin:var(--s-6) 0 var(--s-3);color:var(--violet-2)}
.article h4{font-size:var(--t-base);margin:var(--s-5) 0 var(--s-2);color:var(--ink-2)}

.article ul,.article ol{margin:0 0 var(--s-5);padding-inline-start:1.4em}
.article li{margin-bottom:var(--s-2)}
.article li::marker{color:var(--violet)}
.article strong{color:var(--ink);font-weight:600}

.meta{font-size:var(--t-sm);color:var(--ink-4);line-height:1.75}

.ok{color:var(--good);font-weight:600}
.no{color:var(--bad);font-weight:600}
.mid{color:var(--warn);font-weight:600}

/* ==========================================================================
   Figure
   ========================================================================== */

figure{
  margin:var(--s-6) 0;border:1px solid var(--line);
  border-radius:var(--r-md);overflow:hidden;background:var(--panel-2);
}
figure img{width:100%;height:auto}
figcaption{
  padding:var(--s-3) var(--s-4);font-size:var(--t-sm);color:var(--ink-4);
  border-top:1px solid var(--line);line-height:1.6;background:var(--panel);
}

/* ==========================================================================
   Tables
   ========================================================================== */

.table-wrap{
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--line);border-radius:var(--r-md);
  margin:var(--s-5) 0;background:var(--panel);
}
table{width:100%;border-collapse:collapse;font-size:var(--t-sm);min-width:0}
th,td{
  padding:var(--s-3) var(--s-4);text-align:start;vertical-align:top;
  border-bottom:1px solid var(--line-soft);line-height:1.75;
}
thead th{
  background:var(--panel-2);color:var(--violet-2);
  font-family:var(--f-display);font-weight:600;font-size:var(--t-xs);
  letter-spacing:.07em;text-transform:uppercase;white-space:nowrap;
}
tbody tr:last-child td,tbody tr:last-child th{border-bottom:0}
tbody tr:nth-child(even){background:rgba(255,255,255,.015)}
tbody tr:hover{background:var(--violet-wash)}
tbody th{font-weight:600;color:var(--ink);background:var(--panel-2)}
caption{
  caption-side:bottom;padding:var(--s-3) var(--s-4);
  font-size:var(--t-xs);color:var(--ink-4);text-align:start;
  border-top:1px solid var(--line-soft);
}

/* ==========================================================================
   Callouts
   ========================================================================== */

.note,.alert,.status,.answer,.calc,.card{
  border-radius:var(--r-md);padding:var(--s-4) var(--s-5);margin:var(--s-5) 0;
}
.note p:last-child,.alert p:last-child,.status p:last-child,
.answer p:last-child,.calc p:last-child,.card p:last-child{margin-bottom:0}

.note{background:var(--panel-2);border:1px solid var(--line);border-inline-start:3px solid var(--ink-4)}
.alert{background:var(--bad-bg);border:1px solid rgba(248,113,113,.34);border-inline-start:3px solid var(--bad)}

.status{
  background:var(--bad-bg);border:2px solid var(--bad);
}
.status b{color:var(--bad);font-family:var(--f-display)}
.status>b:first-child{display:block;font-size:var(--t-xl);margin-bottom:var(--s-2)}
.status .table-wrap{background:transparent;border-color:rgba(248,113,113,.3)}

.answer,.calc{
  background:linear-gradient(180deg,var(--panel-2),var(--panel));
  border:1px solid var(--line);border-top:3px solid var(--violet);
}
.answer b{
  display:block;font-family:var(--f-display);font-size:var(--t-3xl);
  font-weight:700;color:var(--bad);line-height:1.15;margin-bottom:var(--s-2);
}
.calc .table-wrap{background:transparent}

.card{background:var(--panel-2);border:1px solid var(--line);min-width:0}
.card h3,.card h4{margin-top:0}

/* ==========================================================================
   Grids
   ========================================================================== */

.two,.three,.stats,.cards,.hub{display:grid;gap:var(--s-3);margin:var(--s-5) 0}
.two{grid-template-columns:repeat(auto-fit,minmax(min(100%,265px),1fr))}
.three,.cards{grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.hub{grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
.stats{grid-template-columns:repeat(auto-fit,minmax(min(100%,155px),1fr))}

.two>div,.three>div,.stats>div,.cards>article,.hub a{
  background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-md);
  padding:var(--s-4);min-width:0;
}
.two>div>h3,.three>div>h3,.cards>article h3{margin-top:0}
.two>div>p:last-child,.cards>article p:last-child,.three>div>p:last-child{margin-bottom:0}

.stats b,.hub b{
  display:block;font-family:var(--f-display);font-size:var(--t-xl);
  font-weight:700;color:var(--violet-2);line-height:1.25;
}
.stats>div,.hub a{font-size:var(--t-sm);color:var(--ink-3);line-height:1.65}
.hub a{color:var(--ink-3);transition:border-color .18s var(--ease),transform .18s var(--ease)}
.hub a:hover{border-color:var(--violet);transform:translateY(-2px);text-decoration:none}

/* chips & tags */
.chips{display:flex;flex-wrap:wrap;gap:var(--s-2);margin:var(--s-4) 0}
.chips span{
  border:1px solid var(--line);background:var(--panel-2);
  border-radius:var(--r-sm);padding:4px 10px;font-size:var(--t-sm);color:var(--ink-2);
}
.chips span.off{border-color:var(--bad);color:var(--bad);text-decoration:line-through}
.tag{
  display:inline-block;font-family:var(--f-display);font-size:var(--t-xs);font-weight:600;
  border:1px solid var(--line);background:var(--panel-2);color:var(--ink-3);
  border-radius:3px;padding:1px 8px;margin-inline-start:var(--s-1);
}
.domain{
  display:inline-block;font-family:var(--f-mono);font-size:var(--t-lg);font-weight:700;
  color:var(--violet-2);direction:ltr;unicode-bidi:isolate;
  background:var(--violet-wash);border:1px solid var(--violet);
  border-radius:var(--r-sm);padding:var(--s-1) var(--s-3);
}

/* pros / cons */
ul.pros,ul.cons,ul.check,ul.cross{list-style:none;padding-inline-start:0}
ul.pros li,ul.check li,ul.cons li,ul.cross li{padding-inline-start:1.7em;position:relative}
ul.pros li::before,ul.check li::before{content:"✔";position:absolute;inset-inline-start:0;color:var(--good);font-weight:700}
ul.cons li::before,ul.cross li::before{content:"✘";position:absolute;inset-inline-start:0;color:var(--bad);font-weight:700}

/* numbered steps */
ol.steps{list-style:none;padding-inline-start:0;counter-reset:step;margin:var(--s-5) 0}
ol.steps>li{
  counter-increment:step;position:relative;
  padding-inline-start:52px;padding-bottom:var(--s-5);margin-bottom:0;
}
ol.steps>li::before{
  content:counter(step);
  position:absolute;inset-inline-start:0;top:0;
  width:34px;height:34px;display:grid;place-items:center;
  background:linear-gradient(180deg,var(--act-1),var(--act-2));
  color:#fff;border-radius:50%;
  font-family:var(--f-display);font-weight:700;font-size:var(--t-base);
}
ol.steps>li::after{
  content:"";position:absolute;inset-inline-start:17px;
  top:38px;bottom:6px;width:2px;background:var(--line);
}
ol.steps>li:last-child{padding-bottom:0}
ol.steps>li:last-child::after{display:none}
ol.steps b{display:block;font-family:var(--f-display);font-size:var(--t-base);color:var(--violet-2);margin-bottom:var(--s-1)}

/* timeline */
ul.tl{list-style:none;padding:0;margin:var(--s-5) 0;border-inline-end:2px solid var(--line);padding-inline-end:var(--s-5)}
ul.tl li{position:relative;margin-bottom:var(--s-4)}
ul.tl li::before{
  content:"";position:absolute;inset-inline-end:-31px;top:10px;
  width:11px;height:11px;border-radius:50%;background:var(--violet);
  box-shadow:0 0 0 3px var(--void);
}
ul.tl b{display:block;font-family:var(--f-display);color:var(--ink)}

/* flow & ladder */
.flow,.ladder{display:flex;flex-wrap:wrap;gap:var(--s-2);align-items:center;margin:var(--s-5) 0}
.flow span,.ladder span{
  border:1px solid var(--line);border-radius:var(--r-sm);
  padding:var(--s-2) var(--s-3);background:var(--panel-2);
  font-size:var(--t-sm);min-width:0;
}
.flow span.hot{border-color:var(--bad);color:var(--bad);font-weight:600}
.flow i,.ladder i{color:var(--violet);font-style:normal;font-weight:700}

/* details / FAQ */
details{
  background:var(--panel-2);border:1px solid var(--line);
  border-radius:var(--r-md);margin-bottom:var(--s-2);overflow:hidden;
}
details[open]{border-color:var(--violet)}
summary{
  cursor:pointer;list-style:none;padding:var(--s-4) var(--s-5);
  font-family:var(--f-display);font-weight:600;font-size:var(--t-base);
  color:var(--ink);display:flex;align-items:flex-start;gap:var(--s-3);
}
summary::-webkit-details-marker{display:none}
summary::before{content:"+";flex:0 0 auto;font-size:var(--t-lg);line-height:1.2;color:var(--violet)}
details[open] summary::before{content:"–"}
summary:hover{background:var(--panel)}
summary:focus-visible{outline:3px solid var(--violet);outline-offset:-3px}
details>*:not(summary){padding-inline:var(--s-5);margin-block:0 var(--s-4)}
details>p:not(:last-child){margin-bottom:var(--s-3)}

.faq{margin-top:var(--s-7)}

/* ==========================================================================
   Author
   ========================================================================== */

.author-mini{
  display:flex;align-items:center;gap:var(--s-4);
  background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-md);
  padding:var(--s-3) var(--s-4);margin-bottom:var(--s-6);flex-wrap:wrap;
}
.author-mini img,.author-full img{
  border-radius:50%;object-fit:cover;border:3px solid var(--violet);flex:0 0 auto;
}
.author-mini img{width:52px;height:52px}
.author-full img{width:88px;height:88px}
.author-mini .who{min-width:0}
.author-mini .name{
  font-family:var(--f-display);font-weight:700;font-size:var(--t-base);
  color:var(--ink);display:block;line-height:1.4;
}
.author-mini .role{font-size:var(--t-xs);color:var(--ink-4);display:block;line-height:1.5}
.author-mini time{font-size:var(--t-xs);color:var(--ink-4)}

.author-full{
  display:flex;gap:var(--s-5);background:var(--panel-2);
  border:1px solid var(--line);border-top:3px solid var(--violet);
  border-radius:var(--r-md);padding:var(--s-5);margin-top:var(--s-7);flex-wrap:wrap;
}
.author-full .bio{flex:1;min-width:min(100%,240px)}
.author-full .name{font-family:var(--f-display);font-weight:700;font-size:var(--t-lg);color:var(--ink);display:block}
.author-full .role{font-size:var(--t-sm);color:var(--violet-2);display:block;margin-bottom:var(--s-3)}
.author-full p{font-size:var(--t-sm);color:var(--ink-3);line-height:1.85}
.author-full p:last-child{margin-bottom:0}

/* ==========================================================================
   Read next
   ========================================================================== */

.read-next{margin-top:var(--s-7)}
.read-next h2{
  font-size:var(--t-xl);padding-inline-start:var(--s-4);
  border-inline-start:3px solid var(--violet);margin-bottom:var(--s-4);
}
.read-next ul{
  list-style:none;margin:0;padding:0;display:grid;gap:var(--s-3);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));
}
.read-next li{
  background:var(--panel-2);border:1px solid var(--line);border-radius:var(--r-md);
  padding:var(--s-4);margin:0;min-width:0;transition:border-color .18s var(--ease);
}
.read-next li:hover{border-color:var(--violet)}
.read-next a{font-family:var(--f-display);font-weight:700;font-size:var(--t-base);display:block;margin-bottom:var(--s-1)}
.read-next span{font-size:var(--t-sm);color:var(--ink-4);line-height:1.65;display:block}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-foot{
  border-top:3px solid var(--violet);
  background:var(--void);color:var(--ink-3);
  padding-block:var(--s-7) var(--s-6);
}
.foot-cols{display:grid;gap:var(--s-6);grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
.foot-cols h2{
  font-family:var(--f-display);font-size:var(--t-xs);font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--violet-2);margin-bottom:var(--s-3);
}
.foot-cols ul{list-style:none;margin:0;padding:0}
.foot-cols li{margin-bottom:var(--s-2)}
.foot-cols a{color:var(--ink-3);font-size:var(--t-sm)}
.foot-cols a:hover{color:var(--violet-2)}
.foot-cols p{font-size:var(--t-sm);color:var(--ink-4);line-height:1.8}

.disclaimer{
  margin-top:var(--s-6);padding-top:var(--s-5);
  border-top:1px solid var(--line);
  font-size:var(--t-xs);color:var(--ink-4);line-height:1.85;
}
.disclaimer .age{
  display:inline-grid;place-items:center;width:36px;height:36px;
  border:2px solid var(--violet);color:var(--violet-2);border-radius:50%;
  font-family:var(--f-display);font-weight:700;font-size:var(--t-sm);
  margin-inline-end:var(--s-3);float:inline-start;
}
.disclaimer p{margin-bottom:var(--s-3)}
.disclaimer p:last-child{margin-bottom:0}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width:960px){
  .nav{order:10;flex-basis:100%;margin-inline-start:0;display:none}
  .burger{display:flex}
  .nav-toggle:checked~.nav{display:block;padding-bottom:var(--s-3)}
  .nav ul{flex-direction:column;gap:2px}
  .nav a{padding:var(--s-3);font-size:var(--t-base)}
  .head-in{flex-wrap:wrap;padding-block:var(--s-2)}
}

@media (max-width:700px){
  :root{--t-md:1rem}
  body{padding-bottom:calc(var(--bar-h) + var(--s-2))}
  .article{padding:var(--s-5) var(--s-4);border-radius:var(--r-md)}

  .cta-bar{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:70;
    align-items:center;gap:var(--s-3);min-height:var(--bar-h);
    padding:var(--s-2) var(--s-4);
    background:#08060d;border-top:3px solid var(--violet);color:#fff;
  }
  .cta-bar:hover{text-decoration:none}
  .cta-bar .txt{flex:1;min-width:0;line-height:1.35}
  .cta-bar .txt b{display:block;font-family:var(--f-display);font-size:var(--t-sm);font-weight:700;color:#fff}
  .cta-bar .txt span{display:block;font-size:var(--t-xs);color:var(--ink-4)}
  .cta-bar .btn-sm{
    flex:0 0 auto;background:linear-gradient(180deg,var(--act-1),var(--act-2));
    color:#fff;border:0;box-shadow:0 3px 0 var(--act-deep);padding-inline:var(--s-4);
  }

  .hero{padding-block:var(--s-6) var(--s-7)}
  .article h2{margin-top:var(--s-7)}
  ul.tl{padding-inline-end:var(--s-4)}
  ul.tl li::before{inset-inline-end:-27px}

  table.kv thead{display:none}
  table.kv,table.kv tbody,table.kv tr,table.kv td,table.kv th{display:block;width:100%}
  table.kv tr{border-bottom:1px solid var(--line);padding:var(--s-2) 0}
  table.kv td{border:0;padding:var(--s-1) var(--s-4)}
  table.kv td::before{
    content:attr(data-label);display:block;
    font-family:var(--f-display);font-size:var(--t-xs);
    letter-spacing:.07em;text-transform:uppercase;color:var(--ink-4);
  }
}

@media (max-width:400px){
  :root{--bar-h:58px;--s-5:18px}
  .wrap{padding-inline:var(--s-4)}
  .hero h1{font-size:1.5rem}
  .btn{font-size:1.05rem;min-height:56px;padding-inline:var(--s-3)}
  .cta-bar{gap:var(--s-2);padding-inline:var(--s-3)}
  .cta-bar .txt b{font-size:var(--t-xs)}
  .cta-bar .txt span{font-size:.68rem}
  .cta-bar .btn-sm{font-size:.8rem;padding-inline:var(--s-3);min-height:44px}
  .answer b,.status>b:first-child{font-size:var(--t-2xl)}
  .author-full img{width:64px;height:64px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important}
  .cta-main:hover,.cta-tile:hover,.hub a:hover,.read-next li:hover{transform:none}
}