/* The Educator landing (rewrite-public-pages task 4.3): the faces Google
   served it, from our own origin (intended difference 6; fontsource 5.3.0's
   files and unicode ranges), then the style block of Laravel's
   landing-templates/educator view, moved here as it was, with the FAQ as
   <details> and classes for its inline style attributes. The academy's
   colour and the gradient (`--accent`, `--color-primary` for the cards, `--g1`
   to `--g3`) are the
   page's own style block, admitted by its hash. */
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-display:swap;font-weight:300;src:url(plex-arabic-arabic-300.441410df.woff2) format('woff2');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,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-display:swap;font-weight:300;src:url(plex-arabic-latin-ext-300.dd27720f.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-display:swap;font-weight:300;src:url(plex-arabic-latin-300.dde6d3b2.woff2) format('woff2');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:'IBM Plex Sans Arabic';font-style:normal;font-display:swap;font-weight:400;src:url(plex-arabic-arabic-400.6010e7fd.woff2) format('woff2');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,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-display:swap;font-weight:400;src:url(plex-arabic-latin-ext-400.1935fa1a.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-display:swap;font-weight:400;src:url(plex-arabic-latin-400.9ed8dcb0.woff2) format('woff2');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:'IBM Plex Sans Arabic';font-style:normal;font-display:swap;font-weight:500;src:url(plex-arabic-arabic-500.90aef64f.woff2) format('woff2');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,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-display:swap;font-weight:500;src:url(plex-arabic-latin-ext-500.ae5c1a58.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-display:swap;font-weight:500;src:url(plex-arabic-latin-500.be6a3b2e.woff2) format('woff2');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:'IBM Plex Sans Arabic';font-style:normal;font-display:swap;font-weight:600;src:url(plex-arabic-arabic-600.16734a5a.woff2) format('woff2');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,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-display:swap;font-weight:600;src:url(plex-arabic-latin-ext-600.0f7c03bb.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-display:swap;font-weight:600;src:url(plex-arabic-latin-600.63f47572.woff2) format('woff2');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:'IBM Plex Sans Arabic';font-style:normal;font-display:swap;font-weight:700;src:url(plex-arabic-arabic-700.04c730b4.woff2) format('woff2');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,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-display:swap;font-weight:700;src:url(plex-arabic-latin-ext-700.ab0b9584.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-display:swap;font-weight:700;src:url(plex-arabic-latin-700.ae2d59f9.woff2) format('woff2');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:'Inter';font-style:normal;font-display:swap;font-weight:400;src:url(inter-latin-ext-400.6744a7f5.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-display:swap;font-weight:400;src:url(inter-latin-400.8909904a.woff2) format('woff2');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:'Inter';font-style:normal;font-display:swap;font-weight:500;src:url(inter-latin-ext-500.2c6fbc42.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-display:swap;font-weight:500;src:url(inter-latin-500.f3779f1e.woff2) format('woff2');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:'Inter';font-style:normal;font-display:swap;font-weight:600;src:url(inter-latin-ext-600.e4bdf67b.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-display:swap;font-weight:600;src:url(inter-latin-600.f9a06e79.woff2) format('woff2');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:'Inter';font-style:normal;font-display:swap;font-weight:700;src:url(inter-latin-ext-700.143f9504.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-display:swap;font-weight:700;src:url(inter-latin-700.6f56409f.woff2) format('woff2');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}
/* Laravel's page also loads app.css, whose instructor-panel faces for IBM
   Plex Sans Arabic 400 to 700 (these same Arabic files, with no unicode range)
   follow Google's: they are the first faces for those weights, Latin text
   falls through to the subsets above, and `ch` is half an em, as the files
   have no "0". The faces are mirrored, so every `ch` width below matches. */
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-display:swap;font-weight:400;src:url(plex-arabic-arabic-400.6010e7fd.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-display:swap;font-weight:500;src:url(plex-arabic-arabic-500.90aef64f.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-display:swap;font-weight:600;src:url(plex-arabic-arabic-600.16734a5a.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans Arabic';font-style:normal;font-display:swap;font-weight:700;src:url(plex-arabic-arabic-700.04c730b4.woff2) format('woff2')}

.educator-template{
    --bg: oklch(0.985 0.005 80);
    --surface: #ffffff;
    --ink: oklch(0.22 0.01 60);
    --ink-2: oklch(0.42 0.012 60);
    --ink-3: oklch(0.62 0.012 60);
    --line: oklch(0.92 0.008 70);
    --line-2: oklch(0.96 0.006 70);
    --accent-ink: #ffffff;
    --accent-soft: oklch(0.94 0.03 140);
    --radius: 14px;
    --radius-lg: 22px;
    --shadow-sm: 0 1px 0 rgba(0,0,0,.02), 0 2px 4px rgba(20,15,5,.04);
    --shadow-md: 0 1px 0 rgba(0,0,0,.02), 0 8px 24px rgba(20,15,5,.06);
    --shadow-lg: 0 1px 0 rgba(0,0,0,.02), 0 18px 48px rgba(20,15,5,.10);
    font-family: "IBM Plex Sans Arabic", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    background: var(--bg);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    font-feature-settings: "ss01","cv11";
    /* Contain the .ed-stats-band pseudo-mask elements that extend
       width:100vw to either side. Without this they push the document
       wider than the viewport and trigger a horizontal scrollbar. */
    overflow-x: clip;
}
/* Resets — wrapped in :where() so they have ZERO contribution to
   specificity. Otherwise `.educator-template button` (0,1,1) would
   outrank class rules like `.ed-btn-ghost` (0,1,0) and silently
   strip backgrounds, borders, and colors set on individual buttons. */
:where(.educator-template) *{box-sizing:border-box}
:where(.educator-template) .num, :where(.educator-template) .lat{
    font-family: "Inter", "IBM Plex Sans Arabic", sans-serif;
    font-feature-settings:"tnum","ss01";
}
:where(.educator-template) a{color:inherit;text-decoration:none}
:where(.educator-template) button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}

/* Nav */
.ed-nav{
    position: sticky; top: 0; z-index: 30;
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    background: color-mix(in oklab, var(--bg) 78%, transparent);
    border-bottom: 1px solid color-mix(in oklab, var(--line) 70%, transparent);
}
.ed-nav-inner{
    max-width: 1180px; margin: 0 auto;
    display:flex; align-items:center; justify-content:space-between;
    padding: 14px 28px;
}
.ed-nav-brand{display:flex;align-items:center;gap:10px;font-weight:600;letter-spacing:-.005em}
.ed-nav-brand .brand-logo{width:32px;height:32px;object-fit:contain;display:block}
.ed-nav-links{display:flex;gap:40px;align-items:center;color:var(--ink-2);font-size:14px}
.ed-nav-links a{padding:6px 4px;border-bottom:2px solid transparent;white-space:nowrap}
.ed-nav-links a.active{color:var(--ink); border-color: var(--accent)}
.ed-nav-cta{
    display:inline-flex;align-items:center;gap:8px;
    height:36px;padding:0 14px;border-radius:10px;
    background:var(--ink); color:#fff; font-size:13.5px; font-weight:500; white-space:nowrap;
}

/* Hero */
.ed-hero{position:relative; isolation:isolate; padding: 56px 28px 0; overflow:hidden}
.ed-hero-bg{
    position:absolute; inset:0; z-index:-1;
    border-radius: 0 0 36px 36px;
    background:
        radial-gradient(60% 80% at 18% 20%, var(--g1) 0%, transparent 60%),
        radial-gradient(70% 90% at 82% 30%, var(--g2) 0%, transparent 55%),
        radial-gradient(120% 110% at 50% 110%, var(--g3) 0%, transparent 60%),
        linear-gradient(160deg, var(--g1) 0%, var(--g2) 50%, var(--g3) 100%);
}
.ed-hero-bg::after{
    content:""; position:absolute; inset:0;
    background: radial-gradient(1200px 200px at 50% 100%, rgba(255,255,255,.6), transparent 60%);
    mix-blend-mode: screen;
}
.ed-hero-curve{
    position:absolute; left:0; right:0; bottom:-1px; z-index:-1;
    height: 120px;
    background: var(--bg);
    -webkit-mask: radial-gradient(120% 100% at 50% 100%, transparent 60%, #000 60.5%);
            mask: radial-gradient(120% 100% at 50% 100%, transparent 60%, #000 60.5%);
}
.ed-hero-inner{
    max-width: 1180px; margin: 0 auto;
    display:grid; grid-template-columns: 1.2fr .9fr; gap: 48px;
    align-items: center;
    padding: 32px 0 120px;
    color: #fff;
    min-height: 520px;
}
.ed-hero h1{
    font-size: clamp(40px, 5.6vw, 72px);
    line-height: 1.05; margin: 0 0 18px;
    font-weight: 700; letter-spacing: -.015em;
    text-wrap: balance;
}
.ed-hero-sub{
    font-size: clamp(16px, 1.4vw, 19px); line-height: 1.6;
    color: rgba(255,255,255,.92); max-width: 56ch;
    margin: 0 0 28px; font-weight: 300;
}
.ed-hero-ctas{display:flex;gap:12px;flex-wrap:wrap}
.ed-btn{
    display:inline-flex;align-items:center;gap:10px;
    height:48px;padding:0 22px;border-radius:12px;
    font-size:15px; font-weight:500;
    transition: transform .15s ease, background .2s ease;
}
.ed-btn:hover{transform: translateY(-1px)}
.ed-btn-primary{background:#fff;color:var(--ink)}
.ed-btn-ghost{background:rgba(255,255,255,.14); color:#fff; border:1px solid rgba(255,255,255,.32)}
.ed-btn svg{width:16px;height:16px}

.ed-hero-portrait{position:relative; width: 100%; aspect-ratio: 4/5; max-width: 380px; margin-inline-start:auto; overflow:hidden; background: transparent}
.ed-big-logo{
    position:absolute; inset:0;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap: 14px; padding: 32px;
}
.ed-big-logo-img{
    width: 260px; height: 260px;
    object-fit: contain;
    filter: drop-shadow(0 30px 60px rgba(0,0,0,.28));
}
.ed-hero-logo{
    display:inline-flex;align-items:center;gap:12px;
    padding: 8px 14px 8px 8px;
    background: rgba(255,255,255,.16);
    border:1px solid rgba(255,255,255,.32);
    border-radius: 14px; margin-bottom: 24px;
    backdrop-filter: blur(8px);
}
/* Tighter padding for the "below" pill — design's compact variant. */
.ed-hero-logo.compact{padding: 6px 12px 6px 6px}
.ed-hero-logo .mark-img{width:42px;height:42px;object-fit:contain;display:block;filter:drop-shadow(0 2px 6px rgba(0,0,0,.15))}
.ed-hero-logo .lt{font-size:13px;line-height:1.2;color:#fff}
.ed-hero-logo .lt b{display:block;font-weight:600}
.ed-hero-logo .lt span{color:rgba(255,255,255,.78);font-size:11.5px}

/* Stats band */
.ed-stats-band{
    max-width: 1180px; margin: -64px auto 0;
    position: relative; z-index: 5;
    background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg);
    padding: 28px 12px; box-shadow: var(--shadow-lg);
    display:grid;
}
/* Side-mask the hero gradient on the LEFT and RIGHT of the stats card
   inside the overlap zone — so the only "peek" of color visible above
   the stats card is the small portion in the stats card's horizontal
   extent. The hero itself stays full-width above this zone. */
.ed-stats-band::before, .ed-stats-band::after{
    content:"";
    position:absolute;
    top: -8px;       /* a touch above the stats card to cover its rounded top corners */
    height: calc(64px + 8px);
    width: 100vw;
    /* Horizontal gradient: solid page-bg at the OUTER end (away from
       the stats card) fading to transparent at the INNER end (toward
       the stats card). This dissolves the "sharp 90° edge" where the
       mask meets the gradient, blending the colored peek smoothly
       into the page bg on the sides. */
    z-index: -1;
}
.ed-stats-band::before{
    right: 100%;
    background: linear-gradient(to left, transparent 0, var(--bg) 80px, var(--bg) 100%);
}
.ed-stats-band::after{
    left: 100%;
    background: linear-gradient(to right, transparent 0, var(--bg) 80px, var(--bg) 100%);
}
.ed-stat{padding: 8px 24px; border-inline-start: 1px solid var(--line-2); text-align: start}
.ed-stat:first-child{border-inline-start:none}
.ed-stat .v{font-family:"Inter", sans-serif; font-size: 34px; font-weight: 600; letter-spacing:-.02em; color: var(--ink); line-height:1; display:flex; align-items:baseline; gap:4px}
.ed-stat .v sub{font-size: 18px; font-weight:500; color: var(--accent); vertical-align: baseline; bottom: 0}
.ed-stat .l{margin-top:8px; font-size: 13.5px; color:var(--ink-3)}

/* Sections */
.ed-section{max-width: 1180px; margin: 96px auto; padding: 0 28px; scroll-margin-top: 88px}
.ed-section-head{display:flex; align-items:end; justify-content: space-between; margin-bottom: 32px; gap: 24px}
.ed-eyebrow{font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); font-family:"Inter", sans-serif; margin-bottom: 10px}
.ed-section h2{font-size: clamp(28px, 3vw, 40px); margin: 0; line-height: 1.15; font-weight: 600; letter-spacing: -.015em; text-wrap: balance}

/* About */
.ed-about{display:grid; grid-template-columns: minmax(0, 760px); gap: 64px; justify-content: center; align-items: start}
.ed-about p{font-size: 16.5px; line-height: 1.8; color: var(--ink-2); margin: 0 0 16px; text-wrap: pretty; max-width: 60ch}
.ed-about h2{max-width: 22ch}

/* Filters */
.ed-filters{display:flex; gap:8px; flex-wrap:wrap; margin-bottom: 28px}
.ed-chip{
    height: 38px; padding: 0 16px; border-radius: 999px;
    border: 1px solid var(--line); background: #fff;
    font-size: 13.5px; color: var(--ink-2);
    display:inline-flex;align-items:center;gap:8px;
    transition: all .15s ease;
}
.ed-chip:hover{border-color: var(--ink-3)}
.ed-chip.active{background: var(--ink); color:#fff; border-color: var(--ink)}
.ed-chip .count{
    font-family: "Inter", sans-serif;
    font-size: 11.5px;
    color: var(--ink-3);
    background: var(--line-2);
    padding: 2px 7px; border-radius: 8px;
}
.ed-chip.active .count{background: rgba(255,255,255,.16); color: rgba(255,255,255,.85)}

/* Course grid — uses the platform's standard course card */
.ed-courses{display:grid; grid-template-columns: repeat(3, 1fr); gap: 22px}

/* Values */
.ed-values{display:grid; grid-template-columns: repeat(3, 1fr); gap: 22px}
.ed-value{background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px}
.ed-value .ic{
    width: 44px; height: 44px; border-radius: 12px;
    background: var(--accent-soft); color: var(--accent);
    display:grid; place-items:center; margin-bottom: 18px;
}
.ed-value .ic svg{width: 20px; height: 20px}
.ed-value h3{margin: 0 0 8px; font-size: 17px; font-weight: 600}
.ed-value p{margin: 0; font-size: 14px; color: var(--ink-2); line-height: 1.6}

/* Testimonials */
.ed-testimonials{display: grid; grid-template-columns: 1.1fr .9fr .9fr; gap: 20px}
.ed-quote{background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; display: flex; flex-direction: column; gap: 18px}
.ed-quote.feat{background: var(--ink); color: #fff; border-color: var(--ink)}
.ed-quote.feat .name{color: #fff}
.ed-quote.feat .role{color: rgba(255,255,255,.7)}
.ed-quote .stars{display:flex; gap:2px; color: #f5a623}
.ed-quote .stars svg{width: 16px; height: 16px}
.ed-quote p{font-size: 16px; line-height: 1.65; margin: 0; color: inherit; font-weight: 400; text-wrap: pretty}
.ed-quote .who{display:flex; align-items:center; gap: 12px; margin-top: auto}
.ed-quote .name{font-weight: 500; font-size: 14px; line-height: 1.2}
.ed-quote .role{font-size: 12.5px; color: var(--ink-3); margin-top: 2px}

/* FAQ */
.ed-faq-grid{display: grid; grid-template-columns: 1fr 1.4fr; gap: 64px; align-items: start}
.ed-faq-list{border-top: 1px solid var(--line)}
.ed-faq-item{border-bottom: 1px solid var(--line)}
.ed-faq-q{
    width:100%; text-align: start;
    padding: 22px 4px;
    font-size: 16.5px; font-weight: 500; color: var(--ink);
    display:flex; align-items:center; justify-content:space-between; gap: 16px;
    cursor: pointer; list-style: none;
}
.ed-faq-q::-webkit-details-marker{display:none}
.ed-faq-q .ic{
    width:28px;height:28px;border-radius:50%; border: 1px solid var(--line);
    display:grid;place-items:center; color: var(--ink-2); flex-shrink:0;
    transition: transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
}
.ed-faq-item[open] .ed-faq-q .ic{transform: rotate(45deg); background: var(--accent); color:#fff; border-color: var(--accent)}
/* Laravel animated the answer's height (grid rows 0fr to 1fr); a closed
   <details> renders no answer, so it opens at once. */
.ed-faq-a-inner{
    padding: 0 4px 22px;
    color: var(--ink-2); font-size: 15px; line-height: 1.7;
    white-space: pre-line;
}

/* WhatsApp CTA */
.ed-wa-cta{max-width: 1180px; margin: 96px auto 80px; padding: 0 28px}
.ed-wa-inner{
    position: relative; overflow: hidden; border-radius: 28px;
    padding: 64px 56px;
    background:
        radial-gradient(70% 110% at 85% 15%, rgba(255,255,255,.18), transparent 55%),
        radial-gradient(60% 90% at 10% 95%, rgba(255,255,255,.10), transparent 60%),
        linear-gradient(135deg, #1FA855 0%, #128C45 55%, #0E6E37 100%);
    color: #fff;
    display: grid; grid-template-columns: 1.2fr auto;
    align-items: center; gap: 48px;
    box-shadow: 0 30px 80px rgba(15, 70, 40, .28);
}
.ed-wa-inner::before{
    content:""; position:absolute; inset-inline-end: -60px; inset-block-start: -60px;
    width: 320px; height: 320px;
    background: radial-gradient(circle, rgba(255,255,255,.10), transparent 70%);
    border-radius: 50%; pointer-events: none;
}
.ed-wa-eyebrow{
    display: inline-flex; align-items: center; gap: 10px;
    font-family: "Inter", sans-serif;
    font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
    color: rgba(255,255,255,.85); font-weight: 500; margin-bottom: 16px;
}
.ed-wa-eyebrow::before{content:""; width: 24px; height: 1px; background: rgba(255,255,255,.6)}
.ed-wa-cta h3{margin: 0 0 14px; font-size: clamp(28px, 3.4vw, 44px); font-weight: 600; letter-spacing: -.015em; line-height: 1.15; color: #fff}
.ed-wa-lede{margin: 0; max-width: 52ch; font-size: 16px; line-height: 1.65; color: rgba(255,255,255,.86)}
.ed-wa-side{display: flex; flex-direction: column; align-items: flex-start; gap: 16px}
.ed-wa-btn{
    display: inline-flex; align-items: center; gap: 12px;
    padding: 16px 28px; background: #fff; color: #0E6E37;
    border-radius: 999px; font-size: 16px; font-weight: 600;
    box-shadow: 0 18px 40px rgba(0,0,0,.18);
    transition: transform .15s ease, box-shadow .15s ease;
}
.ed-wa-btn:hover{transform: translateY(-2px); box-shadow: 0 22px 48px rgba(0,0,0,.22)}
.ed-wa-btn svg{width: 22px; height: 22px; flex-shrink: 0}

/* Footer */
.ed-footer{
    border-top: 1px solid var(--line); background: var(--surface);
    padding: 48px 28px 28px; color: var(--ink-2); font-size: 14px;
}
.ed-foot-inner{max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px}
.ed-foot-inner h4{margin: 0 0 14px; font-size: 13px; font-weight: 600; color: var(--ink); letter-spacing:.02em}
.ed-foot-inner ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap: 8px; font-size: 14px; color: var(--ink-2)}
.ed-foot-inner ul a{color: var(--ink-2); transition: color .15s ease}
.ed-foot-inner ul a:hover{color: var(--accent)}
.ed-foot-brand{display:flex; align-items:center; gap: 10px; font-size:18px; font-weight: 600; color: var(--ink); margin-bottom: 8px}
.ed-foot-brand img{width:32px; height:32px; object-fit:contain; display:block}
.ed-socials{display:flex; gap: 8px; margin-top: 18px}
.ed-social{
    width: 36px; height: 36px; border-radius: 10px;
    border: 1px solid var(--line); background: #fff;
    display:grid; place-items:center; color: var(--ink-2);
    transition: all .15s ease;
}
.ed-social:hover{color: var(--accent); border-color: var(--accent); transform: translateY(-1px)}
.ed-social svg{width: 16px; height: 16px}
.ed-foot-bottom{
    max-width: 1180px; margin: 32px auto 0; padding-top: 22px;
    border-top: 1px solid var(--line);
    display:flex; justify-content: space-between; align-items: center;
    font-size: 12.5px; color: var(--ink-3);
}

/* Responsive */
@media (max-width: 820px){
    .ed-nav-links{display:none}
    .ed-hero-inner{grid-template-columns: 1fr; padding-bottom: 80px}
    .ed-hero-portrait{margin-inline:auto; max-width: 320px}
    .ed-stats-band{grid-template-columns: repeat(2, 1fr); gap: 8px 0}
    .ed-stat{padding: 12px 18px}
    .ed-courses, .ed-values, .ed-testimonials{grid-template-columns: 1fr 1fr}
    .ed-about, .ed-faq-grid{grid-template-columns: 1fr; gap: 32px}
    .ed-wa-inner{grid-template-columns: 1fr; padding: 44px 32px; gap: 32px}
    .ed-foot-inner{grid-template-columns: 1fr 1fr}
}
@media (max-width: 640px){
    .ed-courses, .ed-values, .ed-testimonials, .ed-foot-inner{grid-template-columns: 1fr}
    .ed-stats-band{grid-template-columns: 1fr; gap: 8px 0}
    .ed-section{margin: 64px auto}
    .ed-wa-cta{margin: 64px auto}
    .ed-wa-inner{padding: 36px 24px}
    .ed-wa-cta h3{font-size: 26px}
}
    

/* What were inline style attributes in Laravel's view (design D8). The stats
   band's and the testimonials' column counts are the page's own style block,
   as specific as the attribute was, so they hold at every width, as there. */
.ed-pill-below{margin-top: 28px}
.ed-about p.ed-about-first{margin-top: 24px}
.ed-faq-caption{color:var(--ink-2); margin-top: 18px; font-size: 15px; line-height: 1.7}
.ed-foot-about{margin: 0; font-size: 14px; color: var(--ink-2); line-height: 1.6; max-width: 32ch}