/* ==========================================================================
   7reels-casino-kuwait.com — global stylesheet
   Green / yellow / white. Display: Readex Pro. Text: Tajawal. Mono: system.
   ========================================================================== */

:root{
  /* --- surface --------------------------------------------------------- */
  --paper:#ffffff;
  --canvas:#f4f7f4;
  --panel:#fbfdfb;
  --panel-2:#eef4f0;
  --line:#d9e4dd;
  --line-soft:#e8efe9;

  /* --- ink ------------------------------------------------------------- */
  --ink:#12201a;
  --ink-2:#3d5147;
  --ink-3:#6b8177;
  --ink-invert:#ffffff;

  /* --- brand ----------------------------------------------------------- */
  --green:#0a5c45;
  --green-2:#0d7a5a;
  --green-deep:#074433;
  --green-wash:rgba(13,122,90,.08);

  /* --- action ---------------------------------------------------------- */
  --yellow:#ffc21f;
  --yellow-2:#f5a800;
  --yellow-deep:#c98800;
  --yellow-wash:rgba(255,194,31,.16);

  /* --- signal ---------------------------------------------------------- */
  --good:#0a7d4f;
  --warn:#b57300;
  --bad:#c62d42;
  --good-bg:rgba(10,125,79,.08);
  --warn-bg:rgba(181,115,0,.09);
  --bad-bg:rgba(198,45,66,.07);

  /* --- type ------------------------------------------------------------ */
  --f-display:"Readex Pro","Segoe UI",Tahoma,sans-serif;
  --f-text:"Tajawal","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:4px; --r-md:10px; --r-lg:16px;
  --wrap:1120px;
  --measure:780px;
  --head-h:64px;
  --bar-h:66px;

  --shadow-sm:0 1px 2px rgba(10,92,69,.06);
  --shadow-lift:0 14px 34px rgba(10,92,69,.16);
  --shadow-btn:0 4px 0 var(--yellow-deep),0 10px 20px rgba(255,194,31,.34);
  --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(--canvas);
  color:var(--ink);
  font-family:var(--f-text);
  font-size:var(--t-md);
  line-height:1.9;
  font-weight:400;
  -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.3;
  margin:0;
  color:var(--green-deep);
  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(--green-2);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}

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

code,.mono{
  font-family:var(--f-mono);
  font-size:.9em;
  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(--green-deep);
}

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(--yellow);
  color:var(--green-deep);
  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(255,255,255,.95);
  backdrop-filter:blur(10px);
  border-bottom:2px solid var(--green);
}

.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(--green-deep);
  white-space:nowrap;
}
.brand:hover{text-decoration:none;color:var(--green-2)}
.brand .mark{
  display:inline-grid;
  place-items:center;
  width:32px;height:32px;
  background:var(--green);
  color:var(--yellow);
  border-radius:var(--r-sm);
  font-size:.95rem;
  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-2);
  font-size:var(--t-sm);
  font-weight:500;
  border-radius:var(--r-sm);
  border:1px solid transparent;
}
.nav a:hover{color:var(--green-deep);background:var(--panel-2);text-decoration:none}
.nav a[aria-current="page"]{
  color:var(--green-deep);
  background:var(--yellow-wash);
  border-color:var(--yellow);
  font-weight:700;
}

.lang{
  display:flex;
  gap:2px;
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  padding:2px;
  flex:0 0 auto;
  background:var(--paper);
}
.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-3);
  border-radius:2px;
  letter-spacing:.06em;
}
.lang a:hover{color:var(--green-deep);text-decoration:none}
.lang a[aria-current="true"]{background:var(--green);color:var(--paper)}

.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(--paper);
  cursor:pointer;
  flex:0 0 auto;
  margin-inline-start:auto;
}
.burger span{display:block;width:20px;height:2px;background:var(--green-deep);position:relative}
.burger span::before,.burger span::after{
  content:"";position:absolute;left:0;width:20px;height:2px;background:var(--green-deep);
}
.burger span::before{top:-6px}
.burger span::after{top:6px}
.nav-toggle:focus-visible+.burger{outline:3px solid var(--green-2);outline-offset:2px}

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

.hero{
  position:relative;
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(760px 340px at 88% -18%,rgba(255,194,31,.34),transparent 62%),
    linear-gradient(200deg,#e9f3ed 0%,#f4f9f5 60%,#ffffff 100%);
  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:.1em;
  text-transform:uppercase;
  color:var(--ink-3);
  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(--yellow);flex:0 0 auto;border:1px solid var(--yellow-deep)}
.eyebrow .restrict{color:var(--bad)}

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

.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(--paper);
  border:1px solid var(--line);
  border-top:3px solid var(--yellow);
  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(--green-2);
  border-top-color:var(--yellow);
  box-shadow:var(--shadow-lift);
  text-decoration:none;
}
.cta-main:focus-visible{outline:3px solid var(--green-2);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:.08em;
  text-transform:uppercase;
  color:var(--green-2);
  margin-bottom:var(--s-3);
}
.cta-kicker .ext{
  font-family:var(--f-mono);
  border:1px solid var(--green-2);
  border-radius:3px;
  padding:0 5px;
  font-size:.7rem;
  letter-spacing:0;
}

.cta-main h2{
  font-size:clamp(1.3rem,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:.03em;
  text-transform:uppercase;
  color:var(--green-deep);
  background:linear-gradient(180deg,var(--yellow),var(--yellow-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(--yellow-deep);
}

.cta-facts{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,124px),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(--green);
  line-height:1.25;
}
.cta-facts span{font-size:var(--t-xs);color:var(--ink-3);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(--paper);
  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(--green-2);text-decoration:none}
.cta-tile:focus-visible{outline:3px solid var(--green-2);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:.02em;
  text-transform:uppercase;
  color:var(--green-deep);
  background:var(--yellow-wash);
  border:1px solid var(--yellow);
  border-radius:var(--r-sm);
}
.cta-tile:hover .btn-sm{background:linear-gradient(180deg,var(--yellow),var(--yellow-2))}

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

.cta-bar{display:none}

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

.crumbs{
  background:var(--paper);
  padding-block:var(--s-4);
  border-bottom:1px solid var(--line);
  font-size:var(--t-sm);
  color:var(--ink-3);
}
.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-3)}
.crumbs a:hover{color:var(--green-2)}

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

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

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

.article h2{
  font-size:clamp(1.35rem,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(--green-2);
}
.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)}
.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(--green-2)}
.article strong{color:var(--green-deep);font-weight:700}

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

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

/* ==========================================================================
   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-3);
  border-top:1px solid var(--line);
  line-height:1.6;
  background:var(--paper);
}

/* ==========================================================================
   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(--paper);
}
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(--green);
  color:var(--paper);
  font-family:var(--f-display);
  font-weight:600;
  font-size:var(--t-xs);
  letter-spacing:.05em;
  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:var(--panel)}
tbody tr:hover{background:var(--green-wash)}
tbody th{font-weight:700;color:var(--green-deep);background:var(--panel-2)}
caption{
  caption-side:bottom;
  padding:var(--s-3) var(--s-4);
  font-size:var(--t-xs);
  color:var(--ink-3);
  text-align:start;
  border-top:1px solid var(--line-soft);
}

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

.note,.alert,.disamb,.answer,.verdict,.calc,.quote{
  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,.disamb p:last-child,
.answer p:last-child,.verdict p:last-child,.calc p:last-child,.quote p:last-child{margin-bottom:0}

.note{background:var(--panel);border:1px solid var(--line);border-inline-start:3px solid var(--ink-3)}
.alert{background:var(--bad-bg);border:1px solid rgba(198,45,66,.32);border-inline-start:3px solid var(--bad)}
.disamb{
  background:var(--yellow-wash);
  border:1px solid var(--yellow);
  border-inline-start:4px solid var(--yellow-2);
  font-size:var(--t-sm);
}
.quote{background:var(--panel-2);border-inline-start:3px solid var(--warn);font-size:var(--t-sm)}

.answer,.verdict,.calc{
  background:linear-gradient(180deg,var(--panel),var(--paper));
  border:1px solid var(--line);
  border-top:3px solid var(--yellow);
}
.score{
  font-family:var(--f-display);
  font-size:var(--t-4xl);
  font-weight:700;
  color:var(--green);
  line-height:1;
}
.verdict .table-wrap,.calc .table-wrap{background:transparent}

/* ==========================================================================
   Cards, stats, grids
   ========================================================================== */

.card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:var(--s-4);
  min-width:0;
  box-shadow:var(--shadow-sm);
}
.card h3,.card h4{margin-top:0}
.card p:last-child,.card ul:last-child{margin-bottom:0}
.card b.big{
  display:block;
  font-family:var(--f-display);
  font-size:var(--t-3xl);
  font-weight:700;
  color:var(--green);
  line-height:1.2;
  margin-bottom:var(--s-2);
}

.two,.three,.stats,.summary,.cards,.hub,.grid10{
  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,.summary{grid-template-columns:repeat(auto-fit,minmax(min(100%,158px),1fr))}
.grid10{grid-template-columns:repeat(auto-fit,minmax(min(100%,140px),1fr))}

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

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

/* yes / no answer block */
.yesno{display:flex;gap:var(--s-3);flex-wrap:wrap;margin:var(--s-4) 0}
.yesno div{flex:1;min-width:min(100%,200px);border-radius:var(--r-md);padding:var(--s-4);text-align:center;font-size:var(--t-sm)}
.yesno .y{border:2px solid var(--good);background:var(--good-bg)}
.yesno .n{border:2px solid var(--bad);background:var(--bad-bg)}
.yesno b{display:block;font-family:var(--f-display);font-size:var(--t-2xl);line-height:1.3}
.yesno .y b{color:var(--good)}
.yesno .n b{color:var(--bad)}

/* 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 / timeline */
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:var(--yellow);
  color:var(--green-deep);
  border:1px solid var(--yellow-deep);
  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(--green-deep);margin-bottom:var(--s-1)}

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

/* tags & plates */
.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-2);
  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-xl);
  font-weight:700;
  color:var(--green-deep);
  direction:ltr;
  unicode-bidi:isolate;
  background:var(--yellow-wash);
  border:1px solid var(--yellow);
  border-radius:var(--r-sm);
  padding:var(--s-1) var(--s-3);
}

/* details / FAQ */
details{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  margin-bottom:var(--s-2);
  overflow:hidden;
}
details[open]{border-color:var(--yellow)}
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(--green-deep);
  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(--yellow-deep)}
details[open] summary::before{content:"–"}
summary:hover{background:var(--panel-2)}
summary:focus-visible{outline:3px solid var(--green-2);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);
  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(--yellow);
  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(--green-deep);
  display:block;
  line-height:1.4;
}
.author-mini .role{font-size:var(--t-xs);color:var(--ink-3);display:block;line-height:1.5}
.author-mini time{font-size:var(--t-xs);color:var(--ink-3)}

.author-full{
  display:flex;
  gap:var(--s-5);
  background:var(--panel);
  border:1px solid var(--line);
  border-top:3px solid var(--green);
  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(--green-deep);
  display:block;
}
.author-full .role{font-size:var(--t-sm);color:var(--green-2);display:block;margin-bottom:var(--s-3)}
.author-full p{font-size:var(--t-sm);color:var(--ink-2);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(--green-2);
  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(--paper);
  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(--yellow)}
.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-3);line-height:1.65;display:block}

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

.site-foot{
  border-top:3px solid var(--yellow);
  background:var(--green-deep);
  color:#d7e6df;
  padding-block:var(--s-7) var(--s-6);
  margin-top:var(--s-8);
}
.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:.12em;
  text-transform:uppercase;
  color:var(--yellow);
  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:#d7e6df;font-size:var(--t-sm)}
.foot-cols a:hover{color:var(--yellow)}
.foot-cols p{font-size:var(--t-sm);color:#b9cfc6;line-height:1.8}

.disclaimer{
  margin-top:var(--s-6);
  padding-top:var(--s-5);
  border-top:1px solid rgba(255,255,255,.14);
  font-size:var(--t-xs);
  color:#b9cfc6;
  line-height:1.85;
}
.disclaimer .age{
  display:inline-grid;
  place-items:center;
  width:36px;height:36px;
  border:2px solid var(--yellow);
  color:var(--yellow);
  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:var(--green-deep);
    border-top:3px solid var(--yellow);
    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:#b9cfc6}
  .cta-bar .btn-sm{
    flex:0 0 auto;
    background:linear-gradient(180deg,var(--yellow),var(--yellow-2));
    color:var(--green-deep);
    border:0;
    box-shadow:0 3px 0 var(--yellow-deep);
    padding-inline:var(--s-4);
  }

  .hero{padding-block:var(--s-6) var(--s-7)}
  .article h2{margin-top:var(--s-7)}

  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:.06em;
    text-transform:uppercase;
    color:var(--ink-3);
  }
}

@media (max-width:400px){
  :root{--bar-h:58px;--s-5:18px}
  .wrap{padding-inline:var(--s-4)}
  .hero h1{font-size:1.55rem}
  .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}
  .score,.yesno b{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{transform:none}
}