:root {
    --bg:#F6F5FC;
    --ink:#0B1030;
    --mute:#5B6079;
    --line:#E0DEF0;
    --v:#6D3BEF;
    --display:'Bricolage Grotesque','Segoe UI',sans-serif;
    --body:'DM Sans','Segoe UI',sans-serif;
    box-sizing:border-box;
    padding-top:env(safe-area-inset-top,0px);
    padding-bottom:env(safe-area-inset-bottom,0px)
}
*,*::before,*::after {
    box-sizing:inherit
}
html {
    color-scheme:light
}
body {
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:var(--body);
    line-height:1.5
}
a {
    color:inherit;
    text-decoration:none
}
:focus-visible {
    outline:3px solid var(--v);
    outline-offset:3px;
    border-radius:8px
}

/* ---------- Intro ---------- */
#intro {
    position:fixed;
    inset:0;
    z-index:50;
    display:grid;
    place-items:center;
    padding:24px;
    color:#fff;
    overflow:hidden
}
.tri {
    position:absolute;
    inset:0;
    background:#6D3BEF;
    transition:transform 1.2s cubic-bezier(.77,0,.18,1)
}
.tri.a {
    clip-path:polygon(0 0,100% 0,0 100%);
    z-index:1
}
.tri.b {
    clip-path:polygon(100% 0,100% 100%,0 100%,0 calc(100% - 3px))
}
#intro.done .tri.a {
    transform:translate(-102%,-102%)
}
#intro.done .tri.b {
    transform:translate(102%,102%)
}
#fx {
    position:absolute;
    inset:0;
    z-index:2;
    overflow:hidden;
    pointer-events:none
}
.bl {
    position:absolute;
    left:0;
    top:0;
    will-change:transform
}
#cv {
    position:absolute;
    inset:0;
    z-index:4;
    width:100%;
    height:100%;
    pointer-events:none
}
#intro.done #fx,#intro.done #cv {
    opacity:0;
    transition:opacity .35s
}
.sent {
    opacity:0
}
.sent {
    position:relative;
    z-index:4;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:.08em .3em;
    max-width:980px;
    font:800 clamp(34px,6.4vw,92px)/1.12 var(--display);
    letter-spacing:-.035em;
    text-align:center
}
.sent .br {
    flex-basis:100%;
    height:0
}
.w {
    display:inline-block;
    opacity:0;
    will-change:transform
}
.w.v {
    color:#0B1030
}

/* ---------- Main ---------- */
main {
    max-width:1240px;
    margin:0 auto;
    padding:0 20px 80px
}
nav {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:22px 0
}
.logo {
    font:800 22px var(--display);
    letter-spacing:-.03em
}
.logo b {
    color:var(--v)
}
.nav-cta {
    font-weight:500;
    font-size:15px;
    padding:10px 18px;
    border-radius:99px;
    background:var(--ink);
    color:#fff
}
.head {
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:20px;
    padding:clamp(36px,7vw,80px) 0 24px
}
h1 {
    font:800 clamp(38px,6.5vw,72px)/1.03 var(--display);
    letter-spacing:-.035em;
    margin:0;
    max-width:12ch
}
.sub {
    color:var(--mute);
    margin:14px 0 0;
    max-width:46ch;
    font-size:18px
}
.arrows {
    display:flex;
    gap:10px
}
.arrows button {
    width:48px;
    height:48px;
    border-radius:50%;
    border:1px solid var(--line);
    background:#fff;
    color:var(--ink);
    cursor:pointer;
    display:grid;
    place-items:center;
    transition:.2s
}
.arrows button:hover {
    background:var(--ink);
    color:#fff;
    border-color:var(--ink)
}
.chips {
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin:6px 0 22px
}
.chip {
    border:1px solid var(--line);
    background:#fff;
    color:var(--ink);
    font:500 15px var(--body);
    padding:9px 18px;
    border-radius:99px;
    cursor:pointer;
    transition:.2s
}
.chip:hover {
    border-color:var(--ink)
}
.chip[aria-pressed="true"] {
    background:var(--ink);
    border-color:var(--ink);
    color:#fff
}
.rail {
    --w:min(74vw,360px);
    position:relative;
    height:calc(var(--w) + 6px);
    margin-top:6px;
    touch-action:pan-y;
    cursor:grab;
    user-select:none;
    -webkit-user-select:none;
    overflow:hidden
}
.rail.drag {
    cursor:grabbing
}
.slot {
    position:absolute;
    left:calc(50% - var(--w)/2);
    top:0;
    width:var(--w);
    height:var(--w);
    transform-origin:50% 100%;
    transition:transform .6s cubic-bezier(.22,.8,.2,1),opacity .6s,filter .6s;
    will-change:transform
}
.card {
    display:block;
    position:relative;
    width:100%;
    height:100%;
    border-radius:24px;
    overflow:hidden;
    color:#fff;
    background:linear-gradient(160deg,var(--c1),var(--c2))
}
.art {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    transition:transform .7s cubic-bezier(.2,.8,.2,1)
}
.card:hover .art {
    transform:scale(1.05)
}
.card i {
    position:absolute;
    background:var(--c3);
    clip-path:polygon(50% 0,100% 100%,0 100%);
    transition:transform .7s cubic-bezier(.2,.8,.2,1)
}
.t1 {
    width:95%;
    aspect-ratio:1;
    right:-28%;
    top:-6%;
    opacity:.85
}
.t2 {
    width:55%;
    aspect-ratio:1;
    left:-10%;
    top:34%;
    opacity:.45;
    transform:rotate(18deg)
}
.card:hover .t1 {
    transform:translate(-18px,16px) rotate(6deg)
}
.card:hover .t2 {
    transform:translate(16px,-14px) rotate(30deg)
}
.tag {
    position:absolute;
    left:16px;
    top:16px;
    z-index:2;
    background:rgba(255,255,255,.22);
    -webkit-backdrop-filter:blur(6px);
    backdrop-filter:blur(6px);
    padding:6px 12px;
    border-radius:8px;
    font-size:14px
}
.info {
    position:absolute;
    inset:auto 0 0 0;
    padding:90px 20px 18px;
    background:linear-gradient(to top,rgba(11,16,48,.88),rgba(11,16,48,0))
}
.info h3 {
    font:500 clamp(26px,5.5vw,34px)/1.1 var(--display);
    letter-spacing:-.02em;
    margin:0 0 4px;
    color:#EFE9FF
}
.info p {
    margin:0;
    font-size:14px;
    opacity:.9
}
.info p b {
    font-weight:700
}
.dots {
    display:flex;
    justify-content:center;
    gap:8px;
    margin-top:22px
}
.dots button {
    width:8px;
    height:8px;
    border-radius:99px;
    border:0;
    padding:0;
    background:rgba(255,255,255,.28);
    cursor:pointer;
    transition:.35s
}
.dots button.on {
    width:28px;
    background:#A78BFA
}
#courses {
    background:#0B1030;
    color:#fff;
    border-radius:32px;
    padding:clamp(28px,5vw,60px) 0 34px;
    overflow:hidden;
    margin-top:8px
}
#courses .head {
    padding:0 clamp(20px,4vw,48px) 22px
}
#courses h1 {
    color:#fff;
    font-size:clamp(32px,5.5vw,60px)
}
#courses .sub {
    color:rgba(255,255,255,.7)
}
#courses .chips {
    padding:0 clamp(20px,4vw,48px)
}
#courses .chip {
    background:transparent;
    color:#fff;
    border-color:rgba(255,255,255,.28)
}
#courses .chip:hover {
    border-color:#fff
}
#courses .chip[aria-pressed="true"] {
    background:#6D3BEF;
    border-color:#6D3BEF
}
#courses .arrows button {
    background:transparent;
    color:#fff;
    border-color:rgba(255,255,255,.28)
}
#courses .arrows button:hover {
    background:#fff;
    color:#0B1030
}

/* ---------- Detail placeholder ---------- */
#detail {
    position:fixed;
    inset:0;
    z-index:40;
    background:var(--bg);
    overflow:auto;
    padding:calc(24px + env(safe-area-inset-top,0px)) 20px 40px;
    transform:translateY(100%);
    transition:transform .6s cubic-bezier(.77,0,.18,1);
    visibility:hidden
}
#detail.open {
    transform:none;
    visibility:visible
}
.d-in {
    max-width:760px;
    margin:0 auto
}

.d-tag {
    display:inline-block;
    background:rgba(255,255,255,.18);
    padding:6px 14px;
    border-radius:99px;
    font-size:14px;
    margin:0 0 14px
}
#back {
    border:1px solid var(--line);
    background:#fff;
    border-radius:99px;
    padding:9px 18px;
    font:500 15px var(--body);
    cursor:pointer;
    margin-bottom:28px
}
#detail h2 {
    font:800 clamp(36px,7vw,64px)/1.03 var(--display);
    letter-spacing:-.035em;
    margin:0 0 16px
}
#detail p {
    color:var(--mute);
    font-size:18px
}
.note {
    margin-top:30px;
    padding:18px 20px;
    border:1px dashed var(--line);
    border-radius:16px;
    background:#fff;
    font-size:15px
}

@media (max-width:640px) {
    .arrows {
        display:none
    }
}
@media (prefers-reduced-motion:reduce) {
    #detail,.slot,.card i,.tri {
        transition:none
    }
}

/* ---------- Full page on violet ---------- */
:root {
    --bg:#5B32D9
}
html,body {
    overflow-x:hidden
}
body {
    background:#5B32D9;
    color:#fff
}
.logo b {
    color:#C4B5FD
}
nav {
    gap:20px
}
.nav-cta {
    background:#fff;
    color:#0B1030
}
.hero {
    padding: 0 clamp(36px,6vw,70px) clamp(36px,6vw,70px) 0;
    max-width:860px
}
.hero h1 {
    font-size:clamp(42px,8vw,92px);
    max-width:11ch
}
.hero p {
    color:rgba(255,255,255,.82);
    font-size:clamp(17px,2.2vw,21px);
    margin:20px 0 0;
    max-width:50ch
}
.cta {
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    margin-top:30px
}
.btn {
    padding:14px 26px;
    border-radius:99px;
    background:#fff;
    color:#0B1030;
    font-weight:500;
    transition:transform .25s
}
.btn:hover {
    transform:translateY(-2px)
}
#courses {
    background:none;
    border-radius:0;
    padding:0;
    overflow:visible;
    margin-top:0
}
#courses .rail {
    margin-top:0
}
#courses .head,#courses .chips {
    padding-left:0;
    padding-right:0
}
#courses h2 {
    font:800 clamp(30px,4.6vw,52px)/1.05 var(--display);
    letter-spacing:-.03em;
    margin:0;
    max-width:16ch;
    color:#fff
}
#courses .sub {
    color:rgba(255,255,255,.78)
}
#courses .chip[aria-pressed="true"] {
    background:#fff;
    border-color:#fff;
    color:#0B1030
}
#courses .arrows button:hover {
    background:#fff;
    color:#0B1030
}
.rail {
    width:100vw;
    margin-left:calc(50% - 50vw)
}
.card {
    box-shadow:0 26px 40px -22px rgba(11,16,48,.7);
    border:1px solid rgba(255,255,255,.16)
}
.dots button.on {
    background:#fff
}
body {
    min-height:100vh;
    min-height:100dvh;
    display:flex;
    flex-direction:column
}
main {
    width:100%;
    flex:1 0 auto
}
.foot {
    flex-shrink:0;
    margin-top:auto;
    background:#0B1030;
    padding:34px 20px calc(30px + env(safe-area-inset-bottom,0px));
    color:#fff;
    text-align:center
}
.f-title {
    font:800 clamp(24px,4vw,34px)/1.1 var(--display);
    letter-spacing:-.03em;
    margin:0 0 18px
}
.f-links {
    display:flex;
    justify-content:center;
    align-items:center;
    gap:12px;
    flex-wrap:wrap
}
.f-links a,.f-wa {
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:11px 20px;
    border-radius:99px;
    border:1px solid rgba(255,255,255,.3);
    color:#fff;
    font:500 15px var(--body);
    background:transparent;
    cursor:pointer;
    transition:.2s
}
.f-links a:hover {
    background:#fff;
    color:#0B1030
}
.f-wa {
    background:#25D366;
    border-color:#25D366;
    color:#06260F;
    font-weight:600
}
.f-wa:hover {
    filter:brightness(1.08)
}
#detail {
    color:#fff
}
#detail p {
    color:rgba(255,255,255,.82)
}
#back {
    background:transparent;
    color:#fff;
    border-color:rgba(255,255,255,.4)
}
.note {
    background:rgba(255,255,255,.1)!important;
    border-color:rgba(255,255,255,.3)!important;
    color:#fff
}
@media (max-width:760px) {
    .links {
        display:none
    }
    nav {
        justify-content:space-between
    }
}

/* ---------- WhatsApp: floating button + form ---------- */
#wa-fab {
    position:fixed;
    z-index:45;
    right:20px;
    bottom:calc(20px + env(safe-area-inset-bottom,0px));
    width:60px;
    height:60px;
    border-radius:50%;
    border:0;
    background:#25D366;
    color:#fff;
    display:grid;
    place-items:center;
    cursor:pointer;
    box-shadow:0 10px 26px -6px rgba(0,0,0,.45);
    transform:scale(0);
    opacity:0;
    pointer-events:none;
    transition:transform .35s cubic-bezier(.22,.8,.2,1),opacity .25s
}
#wa-fab.show {
    transform:none;
    opacity:1;
    pointer-events:auto
}
#wa-fab:hover {
    filter:brightness(1.08)
}
#wa-modal {
    position:fixed;
    inset:0;
    z-index:70;
    display:none;
    align-items:center;
    justify-content:center;
    padding:20px;
    background:rgba(11,16,48,.62);
    -webkit-backdrop-filter:blur(4px);
    backdrop-filter:blur(4px)
}
#wa-modal.open {
    display:flex
}
.wa-card {
    position:relative;
    width:100%;
    max-width:420px;
    max-height:100%;
    overflow:auto;
    background:#fff;
    color:#0B1030;
    border-radius:24px;
    padding:28px 24px 24px;
    box-shadow:0 30px 60px -20px rgba(0,0,0,.5)
}
.wa-card h3 {
    font:800 26px/1.1 var(--display);
    letter-spacing:-.03em;
    margin:0 0 6px
}
.wa-card p {
    margin:0 0 18px;
    color:var(--mute);
    font-size:15px
}
.wa-x {
    position:absolute;
    top:14px;
    right:14px;
    width:36px;
    height:36px;
    border-radius:50%;
    border:1px solid var(--line);
    background:#fff;
    color:#0B1030;
    font-size:20px;
    line-height:1;
    cursor:pointer
}
.wa-card label {
    display:block;
    font:500 14px var(--body);
    margin:0 0 6px
}
.wa-card input,.wa-card select {
    width:100%;
    padding:12px 14px;
    border:1px solid var(--line);
    border-radius:12px;
    background:#fff;
    color:#0B1030;
    font:400 16px var(--body);
    margin-bottom:14px
}
.wa-card input:focus-visible,.wa-card select:focus-visible {
    outline:3px solid var(--v);
    outline-offset:1px
}
.wa-send {
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    padding:14px;
    border:0;
    border-radius:99px;
    background:#25D366;
    color:#06260F;
    font:600 16px var(--body);
    cursor:pointer
}
.wa-send:hover {
    filter:brightness(1.06)
}
.wa-err {
    color:#C0262D;
    font-size:14px;
    min-height:20px;
    margin:-4px 0 8px
}

/* ---------- Intro 1: the winding road ---------- */
#i1 {
    position:fixed;
    inset:0;
    z-index:60;
    background:#F5F2FF;
    overflow:hidden
}
#road {
    position:absolute;
    inset:0;
    width:100%;
    height:100%
}
.wd {
    font-family:Fredoka,'Segoe UI',sans-serif;
    font-weight:600;
    fill:#5B32D9;
    opacity:0;
    transition:opacity .6s
}
.wd.on {
    opacity:1
}
#rv {
    stroke-dasharray:1;
    stroke-dashoffset:1
}
#sub1 {
    opacity:0;
    transition:opacity .5s
}
#sub1.on {
    opacity:1
}

/* ================= Lucentoz — coming soon card ================= */
.luc{
    position:relative;
    margin:40px 0 0;
    padding:28px 22px 26px;
    border-radius:28px;
    overflow:hidden;
    color:#fff;
    background:linear-gradient(160deg,#0B1030 0%,#1A1456 100%);
    border:1px solid rgba(255,255,255,.16);
    box-shadow:0 26px 40px -22px rgba(11,16,48,.7)
}
.luc i{
    position:absolute;
    clip-path:polygon(50% 0,100% 100%,0 100%);
    pointer-events:none
}
.luc .l1{width:70%;aspect-ratio:1;right:-30%;top:-38%;background:#6D3BEF;opacity:.45}
.luc .l2{width:42%;aspect-ratio:1;left:-12%;bottom:-18%;background:#A78BFA;opacity:.22;transform:rotate(18deg)}
.luc>*:not(i){position:relative;z-index:1}
.luc-pill{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:6px 14px;
    border-radius:99px;
    background:rgba(255,255,255,.14);
    -webkit-backdrop-filter:blur(6px);
    backdrop-filter:blur(6px);
    font:500 13px var(--body);
    letter-spacing:.02em
}
.luc-pill::before{
    content:"";
    width:8px;
    height:8px;
    border-radius:50%;
    background:#C4B5FD;
    animation:luc-pulse 1.8s ease-in-out infinite
}
@keyframes luc-pulse{50%{opacity:.3;transform:scale(.7)}}
.luc-name{
    margin:22px 0 6px;
    font:700 30px var(--body);
    letter-spacing:.14em;
    text-transform:uppercase;
    color:#f8f7fc
}
.luc h2{
    margin:0;
    font:800 clamp(34px,9vw,52px)/1.05 var(--display);
    letter-spacing:-.035em;
    color:#294769
}
.luc h2 span{display:block;color:#C4B5FD}
.luc-lead{
    margin:16px 0 0;
    font-size:17px;
    line-height:1.5;
    color:rgba(255,255,255,.92);
    max-width:34ch
}
.luc-about{
    margin:18px 0 0;
    padding-top:16px;
    border-top:1px solid rgba(255,255,255,.18);
    font-size:14px;
    line-height:1.6;
    color:rgba(255,255,255,.7);
    max-width:44ch
}
@media (min-width:760px){
    .luc{padding:44px 48px 40px}
}
@media (prefers-reduced-motion:reduce){.luc-pill::before{animation:none}}

/* ================= Course pages (Arabic · mobile-first) =================
   One shared system: each page only sets its colour theme (t-*).        */
#course-content{margin-top:22px}
#detail .cc{
    --ar:'IBM Plex Sans Arabic','Segoe UI',Tahoma,sans-serif;
    --p:#1E1B3A;        /* headings */
    --a:#6D3BEF;        /* accent */
    --soft:#F5F2FF;     /* tinted panels */
    --line:#E7E3F4;     /* borders */
    --g1:#0B1030;       /* hero / cta gradient start */
    --g2:#5B32D9;       /* hero gradient end */
    --txt:#33304A;
    --mute:#5F5B77;
    direction:rtl;
    text-align:right;
    font:400 15px/1.85 var(--ar);
    color:var(--txt);
    background:#fff;
    border-radius:24px;
    padding:12px;
    display:flex;
    flex-direction:column;
    gap:26px;
    overflow:hidden;
    -webkit-text-size-adjust:100%
}
#detail .cc *{box-sizing:border-box}

/* themes: same colours as each course card */
#detail .cc.t-lingo  {--p:#3D0B36;--a:#C2255C;--soft:#FFF3F8;--line:#F2DDE8;--g1:#3D0B36;--g2:#92205F}
#detail .cc.t-german {--p:#1A1213;--a:#B3121B;--soft:#FFF4F3;--line:#F0DADA;--g1:#141010;--g2:#B3121B}
#detail .cc.t-english{--p:#06304F;--a:#0A7DB5;--soft:#EFF9FF;--line:#D8EAF5;--g1:#06304F;--g2:#0A86C2}
#detail .cc.t-british{--p:#0B1A4D;--a:#C8102E;--soft:#FFF2F4;--line:#F1D9DE;--g1:#0B1A4D;--g2:#B3102B}

/* text */
#detail .cc h1,#detail .cc h2,#detail .cc h3{font-family:var(--ar);letter-spacing:0;margin:0;max-width:none}
#detail .cc h1{font-size:1.4rem;line-height:1.6;font-weight:700;color:#fff}
#detail .cc h1 span{display:block;margin-top:6px;font-size:1.02rem;font-weight:500;color:rgba(255,255,255,.82)}
#detail .cc h2{font-size:1.2rem;line-height:1.55;font-weight:700;color:var(--p)}
#detail .cc h3{font-size:1rem;line-height:1.65;font-weight:700;color:var(--p)}
#detail .cc p{margin:0;font-size:.95rem;line-height:1.85;color:var(--txt)}
#detail .cc strong{font-weight:700;color:var(--p)}
#detail .cc ul{list-style:none;margin:0;padding:0}

/* hero */
#detail .cc .cc-hero{
    position:relative;
    padding:22px 18px 20px;
    border-radius:18px;
    color:#fff;
    background:linear-gradient(150deg,var(--g1),var(--g2));
    overflow:hidden
}
#detail .cc .cc-hero::after,#detail .cc .cc-cta::after{
    content:"";
    position:absolute;
    left:-36px;
    top:-36px;
    width:140px;
    height:140px;
    background:rgba(255,255,255,.08);
    clip-path:polygon(50% 0,100% 100%,0 100%);
    pointer-events:none
}
#detail .cc .cc-hero>*,#detail .cc .cc-cta>*{position:relative;z-index:1}
#detail .cc .cc-label{
    display:inline-block;
    margin-bottom:12px;
    padding:3px 12px;
    border-radius:99px;
    background:rgba(255,255,255,.16);
    color:#fff;
    font-size:.74rem;
    font-weight:600;
    line-height:1.8
}
#detail .cc .cc-hero .cc-lead{margin-top:14px;color:rgba(255,255,255,.9);font-size:.93rem}
#detail .cc .cc-hero .cc-lead strong{color:#fff}
#detail .cc .cc-hero .cc-btn{margin-top:18px}
#detail .cc .cc-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
#detail .cc .cc-chips span{
    padding:3px 12px;
    border:1px solid rgba(255,255,255,.35);
    border-radius:99px;
    color:#fff;
    font-size:.78rem;
    line-height:1.8
}

/* buttons */
#detail .cc .cc-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    width:100%;
    min-height:48px;
    padding:10px 18px;
    border:0;
    border-radius:14px;
    background:#fff;
    color:var(--p);
    font:700 .95rem/1.4 var(--ar);
    cursor:pointer;
    transition:transform .2s
}
#detail .cc .cc-btn:active{transform:scale(.98)}

/* sections */
#detail .cc .cc-sec>*+*{margin-top:12px}
#detail .cc .cc-sec>h2{padding-right:12px;border-right:4px solid var(--a)}
#detail .cc .cc-sec>h3{margin-top:22px}
#detail .cc .cc-intro{color:var(--mute)}
#detail .cc .cc-eyebrow{
    display:inline-block;
    padding:1px 12px;
    border:1px solid var(--line);
    border-radius:99px;
    background:#fff;
    color:var(--a);
    font-size:.74rem;
    font-weight:700;
    line-height:1.9
}

/* lists */
#detail .cc li{position:relative;margin:0 0 10px;padding-right:22px;font-size:.95rem;line-height:1.8}
#detail .cc li:last-child{margin-bottom:0}
#detail .cc li::before{
    content:"";
    position:absolute;
    right:2px;
    top:.68em;
    width:7px;
    height:7px;
    border-radius:2px;
    background:var(--a);
    transform:rotate(45deg)
}

/* panels */
#detail .cc .cc-note{padding:16px;border-right:4px solid var(--a);border-radius:14px;background:var(--soft)}
#detail .cc .cc-note h3{margin-bottom:6px}
#detail .cc .cc-note p{color:var(--mute)}
#detail .cc .cc-solution{padding:18px 16px;border:1px solid var(--line);border-radius:18px;background:var(--soft)}
#detail .cc .cc-good{margin-top:12px;padding:16px;border:1px solid #CBEBD8;border-radius:14px;background:#ECF8F1}
#detail .cc .cc-good h3{margin-bottom:6px;color:#17633A}
#detail .cc .cc-good p{color:#2D5A42}

/* cards */
#detail .cc .cc-grid{display:grid;grid-template-columns:1fr;gap:10px;margin-top:14px}
#detail .cc .cc-card{
    display:grid;
    grid-template-columns:auto 1fr;
    column-gap:12px;
    row-gap:8px;
    align-items:center;
    padding:16px;
    border:1px solid var(--line);
    border-radius:16px;
    background:#fff
}
#detail .cc .cc-card>*{grid-column:1/-1}
#detail .cc .cc-card>.cc-num{grid-column:1}
#detail .cc .cc-card>.cc-num+h3{grid-column:2}
#detail .cc .cc-card h3{font-size:.98rem}
#detail .cc .cc-card p,#detail .cc .cc-card li{font-size:.9rem;color:var(--mute)}
#detail .cc .cc-card li strong{color:var(--p)}
#detail .cc .cc-num{
    display:grid;
    place-items:center;
    min-width:34px;
    height:34px;
    padding:0 6px;
    border-radius:10px;
    background:var(--soft);
    color:var(--a);
    font:800 .8rem/1 var(--ar);
    direction:ltr
}

/* before / after table (2 columns, no side scrolling) */
#detail .cc .cc-table-wrap{border:1px solid var(--line);border-radius:14px;overflow:hidden}
#detail .cc .cc-table{width:100%;border-collapse:collapse;table-layout:fixed;text-align:right;font-size:.86rem;line-height:1.7}
#detail .cc .cc-table th{padding:10px 12px;background:var(--a);color:#fff;font-weight:700;text-align:right}
#detail .cc .cc-table th:first-child{background:#6B6880}
#detail .cc .cc-table td{padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:top;overflow-wrap:anywhere}
#detail .cc .cc-table td:first-child{background:#F8F7FB;color:var(--mute)}
#detail .cc .cc-table td:last-child{background:var(--soft);color:var(--p);font-weight:500}
#detail .cc .cc-table tr:last-child td{border-bottom:0}

/* FAQ */
#detail .cc .cc-faq details{margin:0;border:1px solid var(--line);border-radius:14px;background:#fff;overflow:hidden}
#detail .cc .cc-faq>details+details{margin-top:8px}
#detail .cc .cc-faq summary{
    position:relative;
    display:block;
    min-height:48px;
    padding:12px 16px 12px 44px;
    color:var(--p);
    font-size:.95rem;
    font-weight:700;
    line-height:1.7;
    cursor:pointer;
    list-style:none
}
#detail .cc .cc-faq summary::-webkit-details-marker{display:none}
#detail .cc .cc-faq summary::after{
    content:"+";
    position:absolute;
    left:16px;
    top:50%;
    transform:translateY(-50%);
    color:var(--a);
    font-size:1.4rem;
    font-weight:500;
    line-height:1
}
#detail .cc .cc-faq details[open] summary{background:var(--soft)}
#detail .cc .cc-faq details[open] summary::after{content:"\2212"}
#detail .cc .cc-faq details p{margin:0;padding:12px 16px 14px;font-size:.9rem;color:var(--mute)}

/* closing call to action */
#detail .cc .cc-cta{
    position:relative;
    padding:26px 18px 22px;
    border-radius:18px;
    background:linear-gradient(160deg,var(--g1),var(--g1) 55%,var(--g2) 180%);
    text-align:center;
    overflow:hidden
}
#detail .cc .cc-cta>*+*{margin-top:12px}
#detail .cc .cc-cta h2{padding:0;border:0;color:#fff;font-size:1.25rem}
#detail .cc .cc-cta p,#detail .cc .cc-cta strong{color:rgba(255,255,255,.9)}
#detail .cc .cc-cta strong{color:#fff}
#detail .cc .cc-cta .cc-eyebrow{border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.12);color:#fff}
#detail .cc .cc-cta .cc-btn{margin-top:18px}
#detail .cc .cc-cta .cc-fine{font-size:.8rem;color:rgba(255,255,255,.7)}

/* larger screens */
@media (min-width:700px){
    #detail .cc{padding:20px;gap:34px}
    #detail .cc h1{font-size:1.85rem}
    #detail .cc h1 span{font-size:1.2rem}
    #detail .cc h2{font-size:1.4rem}
    #detail .cc .cc-hero{padding:38px 34px 34px}
    #detail .cc .cc-lead{max-width:60ch}
    #detail .cc .cc-btn{display:inline-flex;width:auto;padding:10px 28px}
    #detail .cc .cc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    #detail .cc .cc-cta{padding:40px 34px 34px}
}