/* ============================================================================
   JoAI Academy — joai.academy
   LIGHT THEME ONLY. There is no dark variant and there must not be one:
   the client asked for "not dark". Every colour below is painted explicitly,
   there is no @media (prefers-color-scheme) block anywhere in this file, and
   body/surfaces carry their own background so nothing borrows a host theme.

   Design system: ui-ux-pro-max education palette — primary #2563EB,
   CTA orange, ground #F8FAFC, ink #1E293B — with two deliberate overrides:
     1. Comic Neue and claymorphism rejected. Headings Outfit, body Public Sans,
        Arabic Cairo. The page has to read to a university dean as well as to
        a twelve-year-old.
     2. CTA fill darkened from #F97316 to #C2410C. #F97316 with white text is
        2.8:1 and fails WCAG AA at any size. #F97316 is kept as a decorative
        accent (rules, marks) where it never carries text.
   ========================================================================= */

:root{
  /* blues */
  --blue:#2563EB;          /* 5.1:1 with white — safe for white text */
  --blue-dark:#1D4ED8;     /* 6.3:1 — links, hovers */
  --blue-deep:#1E3A8A;
  --blue-soft:#EFF6FF;
  --blue-line:#BFDBFE;

  /* orange: accent vs. text-bearing fill */
  --orange:#F97316;        /* decorative only — never behind text */
  --cta:#C2410C;           /* 5.1:1 with white */
  --cta-hover:#9A3412;
  --orange-soft:#FFF7ED;
  --orange-line:#FED7AA;

  /* ink */
  --ink:#1E293B;
  --ink-2:#475569;         /* 7.5:1 on white */
  --muted:#64748B;         /* 4.8:1 on white — nothing below 14px */

  /* ground */
  --bg:#F8FAFC;
  --surface:#FFFFFF;
  --panel:#F1F5F9;
  --rule:#E2E8F0;
  --rule-strong:#CBD5E1;

  --ok:#15803D;
  --err:#B91C1C;

  --r:16px;
  --r-sm:10px;
  --r-pill:100px;

  --shadow:0 1px 2px rgba(15,23,42,.04), 0 8px 24px -14px rgba(15,23,42,.14);
  --shadow-lift:0 2px 6px rgba(15,23,42,.06), 0 18px 40px -18px rgba(37,99,235,.30);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Public Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
html[lang="ar"] body{font-family:"Cairo","Public Sans",system-ui,sans-serif;line-height:1.9}

img,video{max-width:100%}
[hidden]{display:none!important}

/* ---- type ---------------------------------------------------------------- */
h1,h2,h3,h4{
  font-family:"Outfit","Public Sans",system-ui,sans-serif;
  margin:0;color:var(--ink);letter-spacing:-.02em;text-wrap:balance;font-weight:700}
html[lang="ar"] h1,html[lang="ar"] h2,html[lang="ar"] h3,html[lang="ar"] h4{
  font-family:"Cairo",sans-serif;letter-spacing:0;font-weight:700}
h1{font-size:clamp(33px,5.1vw,58px);line-height:1.06}
h2{font-size:clamp(27px,3.4vw,40px);line-height:1.16}
h3{font-size:21px;line-height:1.3;font-weight:600}
h4{font-size:17px;line-height:1.35;font-weight:600;letter-spacing:-.01em}
p{margin:14px 0;color:var(--ink-2);max-width:66ch}
strong{color:var(--ink);font-weight:700}
a{color:var(--blue-dark)}
a:hover{color:var(--blue-deep)}

/* ---- layout -------------------------------------------------------------- */
.wrap{max-width:1140px;margin:0 auto;padding:0 24px}
.narrow{max-width:880px}
section{padding:88px 0}
section + section{border-top:1px solid var(--rule)}
.alt{background:var(--surface)}

.label{
  display:inline-block;margin:0 0 14px;font-size:13px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--blue-dark);
  background:var(--blue-soft);border:1px solid var(--blue-line);
  border-radius:var(--r-pill);padding:6px 15px;max-width:none}
html[lang="ar"] .label{letter-spacing:0;text-transform:none}
.sub{font-size:19px;color:var(--ink-2);max-width:68ch;margin-top:14px}

/* ---- focus --------------------------------------------------------------- */
a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible,video:focus-visible{
  outline:3px solid var(--blue-dark);outline-offset:2px;border-radius:4px}
.news a:focus-visible,.news button:focus-visible,.news input:focus-visible{
  outline-color:#FFFFFF}

/* ---- header -------------------------------------------------------------- */
header{
  position:sticky;top:0;z-index:60;
  background:rgba(248,250,252,.94);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rule)}
.bar{display:flex;align-items:center;gap:18px;min-height:72px;flex-wrap:wrap;padding-top:8px;padding-bottom:8px}
.brand{
  font-family:"Outfit",sans-serif;font-weight:700;font-size:22px;letter-spacing:-.025em;
  color:var(--ink);text-decoration:none;white-space:nowrap;display:inline-flex;align-items:center;gap:9px}
.brand:hover{color:var(--ink)}
.brand em{font-style:normal;color:var(--blue)}
.brand .mark{width:30px;height:30px;flex:none;color:var(--blue)}

.navlinks{display:flex;gap:4px;align-items:center;margin-inline-start:auto;overflow-x:auto;scrollbar-width:none}
.navlinks::-webkit-scrollbar{display:none}
.navlinks a{
  color:var(--ink-2);text-decoration:none;font-size:15px;font-weight:600;
  padding:11px 12px;border-radius:var(--r-sm);white-space:nowrap;
  min-height:44px;display:inline-flex;align-items:center;transition:background .18s,color .18s}
.navlinks a:hover{color:var(--blue-dark);background:var(--blue-soft)}
.actions{display:flex;gap:10px;align-items:center;margin-inline-start:auto}
.navlinks + .actions{margin-inline-start:14px}

.langbtn{
  border:1px solid var(--rule-strong);background:var(--surface);color:var(--ink);
  border-radius:var(--r-pill);padding:0 18px;min-height:44px;
  font:inherit;font-size:15px;font-weight:700;cursor:pointer;white-space:nowrap;
  transition:border-color .18s,color .18s,background .18s}
.langbtn:hover{border-color:var(--blue);color:var(--blue-dark);background:var(--blue-soft)}

@media(max-width:880px){
  .bar{min-height:auto}
  .navlinks{order:3;width:100%;margin:0 -4px;padding:2px 4px 6px;border-top:1px solid var(--rule)}
  .actions{margin-inline-start:auto}
  .navlinks + .actions{margin-inline-start:auto}
}
/* Phones: one compact sticky row. The in-page nav is dropped here rather than
   stacked — a 145px sticky header eats a fifth of the screen on every scroll,
   and the footer carries the same six links on a page this short. */
@media(max-width:640px){
  .navlinks{display:none}
  .bar{gap:8px;min-height:62px;padding-top:0;padding-bottom:0;flex-wrap:nowrap}
  .brand{font-size:17px;gap:7px;letter-spacing:-.03em}
  .brand .mark{width:24px;height:24px}
  .actions{gap:7px;flex:none}
  .btn.sm{min-height:42px;padding:0 13px;font-size:14px;width:auto}
  .langbtn{min-height:42px;padding:0 12px;font-size:14px}
}
@media(max-width:400px){ .wrap{padding:0 18px} }

/* ---- buttons ------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  background:var(--cta);color:#FFFFFF;border:1px solid var(--cta);
  min-height:52px;padding:14px 26px;border-radius:var(--r-sm);
  font-family:inherit;font-size:17px;font-weight:700;line-height:1.2;
  text-decoration:none;cursor:pointer;text-align:center;
  box-shadow:var(--shadow);transition:background .18s,border-color .18s,box-shadow .18s,transform .18s}
.btn:hover{background:var(--cta-hover);border-color:var(--cta-hover);color:#FFFFFF;box-shadow:var(--shadow-lift)}
.btn:active{transform:translateY(1px)}
.btn svg{width:19px;height:19px;flex:none}

.btn.blue{background:var(--blue);border-color:var(--blue)}
.btn.blue:hover{background:var(--blue-dark);border-color:var(--blue-dark)}

.btn.ghost{background:var(--surface);color:var(--ink);border-color:var(--rule-strong);box-shadow:none}
.btn.ghost:hover{background:var(--blue-soft);border-color:var(--blue);color:var(--blue-dark)}

.btn.sm{min-height:44px;padding:10px 18px;font-size:15px}

.cta-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px;align-items:center}

.textlink{
  display:inline-flex;align-items:center;gap:7px;min-height:44px;
  color:var(--blue-dark);font-weight:700;font-size:15.5px;text-decoration:none}
.textlink:hover{color:var(--blue-deep);text-decoration:underline}
.textlink svg{width:16px;height:16px;flex:none}
html[dir="rtl"] .textlink svg{transform:scaleX(-1)}

/* ---- hero ---------------------------------------------------------------- */
.hero{
  padding:84px 0 76px;
  background:
    radial-gradient(1200px 500px at 82% -12%, #E4EEFF 0%, rgba(228,238,255,0) 64%),
    radial-gradient(760px 380px at 2% 8%, #FFF4EA 0%, rgba(255,244,234,0) 60%),
    var(--bg);
  border-bottom:1px solid var(--rule)}
.hero .lede{font-size:20.5px;color:var(--ink-2);max-width:62ch;margin-top:20px}

.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.chip{
  display:inline-flex;align-items:center;gap:8px;background:var(--surface);
  border:1px solid var(--rule);border-radius:var(--r-pill);padding:8px 15px;
  font-size:14.5px;font-weight:600;color:var(--ink-2)}
.chip svg{width:16px;height:16px;flex:none;color:var(--blue)}

.strip{
  display:flex;gap:16px;align-items:flex-start;
  background:var(--surface);border:1px solid var(--rule);
  border-inline-start:5px solid var(--orange);
  border-radius:var(--r-sm);padding:20px 24px;margin-top:38px;
  box-shadow:var(--shadow);max-width:76ch}
.strip svg{width:24px;height:24px;flex:none;color:var(--cta);margin-top:2px}
.strip p{margin:0;color:var(--ink-2);font-size:16px;max-width:none}

/* ---- grids & cards ------------------------------------------------------- */
.grid{display:grid;gap:22px;margin-top:36px}
/* two up, always — the four stages read as a 2x2 ladder, never 3 + an orphan */
.g2{grid-template-columns:1fr}
@media(min-width:860px){.g2{grid-template-columns:1fr 1fr}}
.g3{grid-template-columns:1fr}
@media(min-width:700px){.g3{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.g3{grid-template-columns:repeat(3,1fr)}}

.card{
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);
  padding:30px;box-shadow:var(--shadow);
  display:flex;flex-direction:column;
  transition:box-shadow .18s,border-color .18s}
.card:hover{box-shadow:var(--shadow-lift);border-color:var(--blue-line)}
.card h3{margin-bottom:6px}
.card p{font-size:16px;margin:10px 0}
.card .spacer{flex:1}

.icon{
  width:46px;height:46px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;
  background:var(--blue-soft);color:var(--blue-dark);border:1px solid var(--blue-line);margin-bottom:16px}
.icon svg{width:23px;height:23px}
.icon.warm{background:var(--orange-soft);color:var(--cta);border-color:var(--orange-line)}

.stage{
  display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--blue-dark);background:var(--blue-soft);border:1px solid var(--blue-line);
  border-radius:6px;padding:5px 11px;margin-bottom:14px;align-self:flex-start}
html[lang="ar"] .stage{letter-spacing:0;text-transform:none}

.meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.tag{
  font-size:13.5px;font-weight:600;background:var(--panel);color:var(--ink-2);
  border-radius:var(--r-pill);padding:6px 13px}

.price{
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  margin-top:22px;padding-top:20px;border-top:1px solid var(--rule)}
.price b{
  font-family:"Outfit",sans-serif;font-size:34px;font-weight:700;color:var(--ink);
  letter-spacing:-.025em;font-variant-numeric:tabular-nums}
html[lang="ar"] .price b{font-family:"Cairo",sans-serif}
.price span{font-size:14.5px;font-weight:500;color:var(--muted)}
.price s{font-size:15px;color:var(--muted);text-decoration-thickness:1.5px}

/* ---- table --------------------------------------------------------------- */
.tablewrap{
  overflow-x:auto;margin-top:26px;border:1px solid var(--rule);
  border-radius:var(--r);background:var(--surface);box-shadow:var(--shadow)}
table{border-collapse:collapse;width:100%;min-width:560px;font-size:16px}
caption{text-align:start;padding:18px 22px 0;font-weight:700;color:var(--ink);font-family:"Outfit",sans-serif}
html[lang="ar"] caption{font-family:"Cairo",sans-serif}
th,td{text-align:start;padding:16px 22px;border-bottom:1px solid var(--rule);vertical-align:top}
tbody tr:last-child td{border-bottom:0}
thead th{
  font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-2);font-weight:700;background:var(--panel)}
html[lang="ar"] thead th{letter-spacing:0;text-transform:none}
td b{color:var(--ink)}

/* ---- video --------------------------------------------------------------- */
.videos{display:flex;flex-wrap:wrap;gap:28px;justify-content:center;margin-top:34px}
.vcard{
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);
  padding:18px;box-shadow:var(--shadow);width:330px;max-width:100%;text-align:center}
.vcard video{
  width:290px;max-width:100%;aspect-ratio:9/16;height:auto;display:block;margin:0 auto;
  border-radius:12px;background:#0F172A;border:1px solid var(--rule)}
.vcard h4{margin-top:16px}
.vcard .meta{justify-content:center;margin-top:12px}

/* ---- partner slots ------------------------------------------------------- */
.slots{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin-top:22px}
.slot{
  border:2px dashed var(--rule-strong);border-radius:var(--r);
  padding:34px 16px;text-align:center;background:var(--surface);
  color:var(--muted);font-size:14px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
html[lang="ar"] .slot{letter-spacing:0;text-transform:none}

.disclaim{
  display:flex;gap:14px;align-items:flex-start;
  background:var(--orange-soft);border:1px solid var(--orange-line);
  border-radius:var(--r-sm);padding:18px 22px;margin-top:22px;max-width:82ch}
.disclaim svg{width:22px;height:22px;flex:none;color:var(--cta);margin-top:3px}
.disclaim p{margin:0;font-size:15.5px;color:var(--ink-2);max-width:none}

/* ---- free tier ----------------------------------------------------------- */
.freecard{border-color:var(--blue-line);background:var(--surface)}
.nocard{
  display:inline-flex;align-items:center;gap:10px;margin-top:26px;
  background:#F0FDF4;border:1px solid #BBF7D0;border-radius:var(--r-sm);
  padding:14px 20px;font-weight:700;color:#14532D;font-size:16px}
.nocard svg{width:20px;height:20px;flex:none;color:var(--ok)}

/* ---- newsletter (deliberately unlike the lead forms) --------------------- */
.news{
  background:linear-gradient(135deg,#2563EB 0%,#1D4ED8 55%,#1E3A8A 100%);
  border-radius:var(--r);padding:46px;color:#FFFFFF;box-shadow:var(--shadow-lift)}
.news h2{color:#FFFFFF}
.news p{color:#EAF2FF;max-width:56ch}
.news .label{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.34);color:#FFFFFF}
.newsform{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap;align-items:flex-end}
.newsform .field{margin:0;flex:1 1 300px}
.newsform label{color:#FFFFFF}
.newsform input[type=email]{
  border-color:transparent;background:#FFFFFF;color:var(--ink);min-height:52px}
.newsform .btn{background:var(--orange);border-color:var(--orange);color:#1F1300;flex:none}
.newsform .btn:hover{background:#FDBA74;border-color:#FDBA74;color:#1F1300}
.newsform .status{flex:1 1 100%;margin-top:4px}
.news .fine{font-size:14px;color:#EAF2FF;margin-top:16px;max-width:60ch}
.news .status{color:#FFFFFF}
.news .status.ok{color:#BBF7D0}
.news .status.err{color:#FECACA}
@media(max-width:620px){.news{padding:28px}}

/* ---- forms --------------------------------------------------------------- */
.formcard{
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--r);
  padding:34px;box-shadow:var(--shadow);margin-top:30px}
@media(max-width:620px){.formcard{padding:22px}}

.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:28px}
.tab{
  border:1px solid var(--rule-strong);background:var(--surface);color:var(--ink-2);
  border-radius:var(--r-pill);min-height:46px;padding:10px 20px;
  font:inherit;font-size:15.5px;font-weight:700;cursor:pointer;
  transition:background .18s,color .18s,border-color .18s}
.tab:hover{border-color:var(--blue);color:var(--blue-dark);background:var(--blue-soft)}
.tab[aria-selected="true"]{background:var(--blue);border-color:var(--blue);color:#FFFFFF}

.field{margin-bottom:20px}
label{display:block;font-size:15px;font-weight:600;color:var(--ink);margin-bottom:8px}
/* The required marker is drawn in CSS, not in the label's text: app.js replaces
   label text wholesale on a language switch and would otherwise delete it. */
label[data-req]::after{content:"\00a0*";color:var(--cta);font-weight:700}
.hint{display:block;font-size:13.5px;font-weight:400;color:var(--ink-2);margin-top:7px}
.reqnote{font-size:14px;color:var(--ink-2);margin:0 0 20px}
.reqnote b{color:var(--cta)}

input,select,textarea{
  width:100%;min-height:50px;padding:13px 15px;
  border:1px solid var(--rule-strong);border-radius:var(--r-sm);
  background:var(--surface);color:var(--ink);font:inherit;font-size:16px}
input::placeholder,textarea::placeholder{color:#667793}
/* Email and phone are Latin strings even in Arabic: keep their character order
   LTR, but align them to the reading edge so the field still looks Arabic. */
input[type=email],input[type=tel]{direction:ltr}
html[dir="rtl"] input[type=email],html[dir="rtl"] input[type=tel]{text-align:right}
input:hover,select:hover,textarea:hover{border-color:var(--blue-line)}
textarea{min-height:110px;resize:vertical}
select{appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M5 7.5 10 12.5 15 7.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-size:20px;background-position:right 14px center;padding-inline-end:44px}
html[dir="rtl"] select{background-position:left 14px center}

.row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:640px){.row{grid-template-columns:1fr;gap:0}}

.consent{display:flex;gap:13px;align-items:flex-start;margin:22px 0 8px;min-height:44px}
.consent input{width:22px;height:22px;min-height:22px;flex:none;margin:4px 0 0;cursor:pointer;accent-color:var(--blue)}
.consent label{font-weight:400;font-size:15px;color:var(--ink-2);margin:0;cursor:pointer;padding:3px 0}

.formnote{font-size:14.5px;color:var(--ink-2);margin-top:20px}
.status{margin-top:16px;font-size:15.5px;font-weight:700;min-height:24px}
.status.ok{color:var(--ok)}
.status.err{color:var(--err)}

.hp{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---- faq ----------------------------------------------------------------- */
.faq{margin-top:28px;border-top:1px solid var(--rule)}
details{border-bottom:1px solid var(--rule);background:var(--surface)}
details:first-of-type{border-top:0}
summary{
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:18px;
  padding:20px 22px;min-height:44px;
  font-family:"Outfit",sans-serif;font-size:17.5px;font-weight:600;color:var(--ink)}
html[lang="ar"] summary{font-family:"Cairo",sans-serif}
summary::-webkit-details-marker{display:none}
summary:hover{background:var(--blue-soft)}
summary .plus{
  flex:none;width:28px;height:28px;border-radius:50%;background:var(--blue-soft);
  border:1px solid var(--blue-line);color:var(--blue-dark);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:19px;font-weight:700;line-height:1}
summary .plus::before{content:"+"}
details[open] summary .plus::before{content:"\2013"}
details > p{margin:0;padding:0 22px 22px;font-size:16px;max-width:76ch}

/* ---- footer -------------------------------------------------------------- */
footer{background:var(--surface);border-top:1px solid var(--rule);padding:54px 0 64px}
footer p{font-size:15px;color:var(--ink-2)}
.foot-top{display:flex;flex-wrap:wrap;gap:34px;justify-content:space-between;align-items:flex-start}
.foot-links{display:flex;flex-wrap:wrap;gap:8px 22px}
.foot-links a{color:var(--ink-2);text-decoration:none;font-size:15px;font-weight:600;
  min-height:44px;display:inline-flex;align-items:center}
.foot-links a:hover{color:var(--blue-dark);text-decoration:underline}

.tools{margin-top:40px;padding-top:30px;border-top:1px solid var(--rule)}
.tools h4{font-size:15px;font-weight:700;color:var(--ink);margin-bottom:16px}
.toolrow{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.tool{
  display:inline-flex;align-items:center;gap:10px;
  border:1px solid var(--rule);background:var(--panel);border-radius:var(--r-sm);
  padding:11px 16px;color:#59687D;
  font-family:"Outfit",sans-serif;font-size:15px;font-weight:600;letter-spacing:-.01em}
.tool svg{width:19px;height:19px;flex:none;color:var(--muted)}
.toolnote{margin-top:18px;font-size:14px;color:var(--muted);max-width:80ch;line-height:1.6}

.copy{margin-top:34px;padding-top:24px;border-top:1px solid var(--rule);
  font-size:14px;color:var(--muted)}
.copy p{font-size:14px;color:var(--muted);margin:6px 0}

/* ---- small screens ------------------------------------------------------- */
@media(max-width:640px){
  body{font-size:16.5px}
  section{padding:60px 0}
  .hero{padding:56px 0 54px}
  .hero .lede{font-size:18.5px}
  .sub{font-size:17.5px}
  .card{padding:24px}
  .btn{width:100%}
  .cta-row{gap:12px}
  .cta-row .btn{flex:1 1 100%}
  .newsform .btn{width:100%}
  .price b{font-size:30px}
}

/* published syllabus inside a stage card */
.syl{border-top:1px solid var(--rule);margin-top:18px;padding-top:14px}
.syl summary{font-size:15px;font-weight:700;color:var(--blue-dark);cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:12px}
.syl summary::-webkit-details-marker{display:none}
.syl summary::after{content:"+";font-weight:700;font-size:19px;line-height:1;color:var(--blue)}
.syl[open] summary::after{content:"–"}
.syl p{font-size:15px;margin:12px 0 2px;color:var(--ink-2)}