/* ============================================================
   Spanish Course Reviews — approved bright editorial system
   White masthead, navy nav, pale-blue canvas, white cards with
   coloured top-borders and category accents. No decorative
   panel shorthand. Manrope (display) + Source Sans 3 (body).
   ============================================================ */
:root{
  --navy:#172a55;--navy2:#233d73;--navy3:#0e1e3d;
  --coral:#e64c62;--yellow:#ffd34a;--aqua:#36b9ba;--purple:#7258bd;--green:#329966;--blue:#377fc0;--orange:#df713f;
  --canvas:#eaf1f9;--ink:#182944;--muted:#5d6e82;--line:#cedbe8;--soft:#f7fafd;--white:#fff;
  --coral-ink:#a62f43;--aqua-ink:#126f6d;--green-ink:#25734d;--purple-ink:#524092;--yellow-ink:#745c00;
  --shadow:0 4px 13px rgba(23,42,85,0.09);
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
@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{font-family:'Source Sans 3',system-ui,sans-serif;color:var(--ink);background:var(--canvas);line-height:1.6;-webkit-font-smoothing:antialiased;}
img{max-width:100%;display:block;}
h1,h2,h3,h4{font-family:'Manrope',sans-serif;letter-spacing:-.4px;line-height:1.15;color:var(--ink);}
a{color:var(--navy);}
.skip-link{position:fixed;left:16px;top:-80px;z-index:1000;background:var(--navy);color:#fff;padding:10px 16px;border-radius:8px;font-weight:800;text-decoration:none;}
.skip-link:focus{top:12px;}
a:focus-visible,button:focus-visible{outline:3px solid var(--yellow);outline-offset:3px;}
.container{max-width:1180px;margin:0 auto;padding:0 22px;}
.container.narrow{max-width:860px;}
svg{display:block;}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* ---------- Header + Nav ---------- */
.site-top{position:sticky;top:0;z-index:50;}
.navwrap{position:relative;background:rgba(255,255,255,0.98);border-bottom:1px solid var(--line);}
.nav{display:flex;align-items:center;justify-content:space-between;padding:15px 0;gap:24px;}
.brand{display:flex;align-items:center;gap:13px;font-family:'Manrope',sans-serif;font-weight:600;font-size:25px;letter-spacing:-1.1px;color:var(--navy);text-decoration:none;}
.brand:hover{color:var(--navy);}
.brand .mark{width:52px;height:52px;border:1.6px solid var(--navy);background:#fbfaf6;display:flex;align-items:center;padding:5px;flex:none;gap:0;}
.brand .mark .brand-s{font-size:38px;line-height:.8;font-family:Georgia,serif;font-weight:600;}
.brand .mark .brand-cr{font:800 9px/1.1 'Manrope',sans-serif;border-left:1px solid var(--coral);padding-left:5px;}
.brand .brand-name{display:flex;flex-direction:column;line-height:1;}
.brand .brand-domain{margin-top:7px;color:#647184;font:700 8px/1 'Manrope',sans-serif;letter-spacing:1.8px;text-transform:uppercase;}
.navlinks{display:flex;align-items:center;gap:20px;}
.navlinks a{font:700 13px/1.2 'Manrope',sans-serif;color:var(--navy);text-decoration:none;padding:6px 2px;border-bottom:3px solid transparent;}
.navlinks a:hover{color:var(--coral);border-bottom-color:var(--yellow);}
.navlinks a.nav-cta{background:var(--coral);color:#fff;padding:9px 16px;border-radius:6px;border-bottom:none;}
.navtoggle{display:none;background:none;border:none;cursor:pointer;padding:8px;margin-left:auto;}
.navtoggle svg{width:27px;height:27px;stroke:var(--navy);}
.sticky-disclosure{background:#fff4c2;border-bottom:1px solid #e0c661;color:#5f604f;font-size:12.5px;font-weight:600;}
.sticky-disclosure .container{display:flex;justify-content:space-between;gap:16px;padding-top:9px;padding-bottom:9px;}
.sticky-disclosure a{font-weight:800;color:#745c00;white-space:nowrap;}
.sticky-disclosure strong{color:#4c4700;}

/* ---------- Hero / page lead ---------- */
.hero{padding:16px 0 30px;}
.hero-inner{position:relative;max-width:1180px;margin:0 auto;padding:0 22px;}
.hero.hero-small{padding:26px 0 14px;}
.pill{display:inline-flex;align-items:center;gap:9px;background:var(--white);border:1px solid var(--line);border-radius:6px;padding:7px 13px;font:700 11px 'Manrope',sans-serif;letter-spacing:.5px;text-transform:uppercase;color:var(--coral-ink);box-shadow:var(--shadow);margin-bottom:20px;}
.pill svg{width:15px;height:15px;stroke:var(--coral);}
.hero h1{font-weight:800;font-size:clamp(32px,4.6vw,48px);line-height:1.05;letter-spacing:-1.6px;margin-bottom:14px;max-width:820px;}
.hero.hero-small h1{font-size:clamp(28px,4vw,40px);}
.hero p{font-size:18px;color:var(--muted);max-width:720px;margin-bottom:0;}
.cta-row{display:flex;gap:12px;justify-content:flex-start;flex-wrap:wrap;margin-top:24px;}
.hero-art{display:none;}
.btn{border-radius:6px;padding:13px 19px;font-family:'Manrope',sans-serif;font-weight:800;font-size:14px;display:inline-flex;align-items:center;gap:8px;text-decoration:none;transition:transform .12s,box-shadow .12s;border:none;cursor:pointer;box-shadow:0 3px 0 rgba(14,30,61,0.35);}
.btn svg{width:18px;height:18px;stroke:currentColor;}
.btn:hover{transform:translateY(-2px);}
.btn-primary{background:var(--navy);color:#fff;}
.btn-outline{background:#fff;color:var(--navy);border:2px solid var(--navy);box-shadow:none;}
.btn-light{background:var(--aqua);color:#0d4646;}
.btn-ghostw{background:rgba(255,255,255,0.14);color:#fff;border:2px solid rgba(255,255,255,0.35);}
.btn-sm{padding:9px 14px;font-size:12px;box-shadow:none;}

/* ---------- Section ---------- */
section{padding:52px 0;}
section.alt{background:var(--white);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.sec-head{max-width:700px;margin:0 auto 36px;}
.sec-head.left{margin:0 0 32px;}
.eyebrow{display:inline-block;font:700 11px 'Manrope',sans-serif;letter-spacing:.5px;text-transform:uppercase;color:var(--navy);background:var(--soft);border:1px solid var(--line);border-left:4px solid var(--coral);padding:6px 13px;margin-bottom:14px;}
.sec-head h2{font-weight:800;font-size:clamp(28px,4vw,38px);letter-spacing:-1px;margin-bottom:10px;}
.sec-head p{color:var(--muted);font-size:17px;}

/* ---------- Cards / steps ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.step{background:var(--white);border:1px solid var(--line);border-top:7px solid var(--coral);padding:26px;box-shadow:var(--shadow);}
.step.s2{border-top-color:var(--aqua);} .step.s3{border-top-color:var(--yellow);}
.step .top{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
.step .sg{width:50px;height:50px;border-radius:12px;display:grid;place-items:center;background:#fde6ea;color:var(--coral-ink);}
.s2 .sg{background:#def4f3;color:var(--aqua-ink);} .s3 .sg{background:#fff4c4;color:var(--yellow-ink);}
.step .sg svg{width:25px;height:25px;}
.step .num{font-family:'Manrope',sans-serif;font-weight:800;font-size:27px;color:#c3cee0;}
.step h3{font-weight:800;font-size:19px;margin-bottom:8px;}
.step p{color:var(--muted);font-weight:600;font-size:15px;}

/* ---------- Table ---------- */
.table-card{background:#fff;border:2px solid var(--navy);border-radius:8px;box-shadow:var(--shadow);overflow:hidden;}
.table-scroll{overflow-x:auto;}
table{width:100%;border-collapse:collapse;font-size:14.5px;}
thead th{background:var(--navy);color:#fff;text-align:left;padding:13px 16px;font-family:'Manrope',sans-serif;font-weight:700;font-size:11px;letter-spacing:.4px;text-transform:uppercase;white-space:nowrap;}
tbody td{padding:13px 16px;border-bottom:1px solid var(--line);vertical-align:middle;}
tbody tr:last-child td{border-bottom:none;}
tbody tr:hover{background:var(--soft);}
.progcell{display:flex;align-items:center;gap:11px;font-weight:700;font-family:'Manrope',sans-serif;font-size:15px;}
.brandmark{display:inline-flex;align-items:center;gap:9px;font-family:'Manrope',sans-serif;font-weight:700;font-size:15px;}
.brandmark .bm-ic{display:none;}
.bm1{color:var(--coral);} .bm2{color:var(--blue);} .bm3{color:var(--aqua);} .bm4{color:var(--purple);}
.bm5{color:var(--green);} .bm6{color:var(--orange);} .bm7{color:#9a4fb0;}
.chip{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;flex:none;}
.chip.ch1{background:var(--coral);color:#fff;} .chip.ch2{background:var(--blue);color:#fff;} .chip.ch3{background:var(--aqua);color:#fff;}
.chip.ch4{background:var(--purple);color:#fff;} .chip.ch5{background:var(--green);color:#fff;} .chip.ch6{background:var(--orange);color:#fff;} .chip.ch7{background:#9a4fb0;color:#fff;}
.method{font-size:13px;color:var(--muted);font-weight:700;}
.price{font-weight:800;}
.badge{display:inline-flex;align-items:center;gap:6px;background:#fff4c4;color:#745c00;border-radius:5px;padding:5px 11px;font:700 11px 'Manrope',sans-serif;white-space:nowrap;}
.badge svg{width:13px;height:13px;}
.badge.gray{background:#e9edf4;color:var(--muted);}
.badge.amber{background:#fff4c4;color:#745c00;}
.link{color:#116a9f;font-weight:700;font-size:14px;text-decoration:none;}
.link:hover{text-decoration:underline;}
.source-note{color:var(--muted);font-size:13px;font-weight:600;margin-top:14px;}

/* ---------- Guides grid ---------- */
.guides{display:grid;grid-template-columns:repeat(auto-fit,minmax(235px,1fr));gap:16px;}
.guide{background:var(--white);border:1px solid var(--line);border-top:7px solid var(--coral);box-shadow:var(--shadow);text-decoration:none;color:var(--ink);display:block;}
.guide:hover{transform:translateY(-3px);box-shadow:0 8px 20px rgba(23,42,85,0.12);}
.guide .ghead{height:0;}
.guide .gbody{padding:22px 20px;}
.guide .gic{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;margin-bottom:12px;background:#fde6ea;color:var(--coral-ink);}
.guide .gg2{background:#def4f3;color:var(--aqua-ink);} .guide .gg3{background:#e5f0fa;color:#2a649b;} .guide .gg4{background:#ede8fa;color:var(--purple-ink);}
.guide .gg5{background:#fff4c4;color:var(--yellow-ink);} .guide .gg6{background:#e3f3e9;color:var(--green-ink);}
.guide .gic svg{width:23px;height:23px;}
.guide h3{font-weight:800;font-size:17px;margin-bottom:6px;}
.guide p{color:var(--muted);font-weight:600;font-size:14px;}

/* ---------- Article / prose ---------- */
.article{background:var(--white);border:1px solid var(--line);border-top:7px solid var(--coral);box-shadow:var(--shadow);padding:42px 46px;margin-top:8px;}
.article h2{font-weight:800;font-size:27px;margin:34px 0 12px;padding-top:8px;}
.article h3{font-weight:800;font-size:20px;margin:26px 0 10px;}
.article p{margin-bottom:16px;font-size:16.5px;}
.article-hero{margin:4px 0 28px;}
.article-hero picture,.article-hero img{display:block;width:100%;}
.article-hero img{aspect-ratio:3/2;height:auto;object-fit:cover;object-position:center;border-radius:7px;}
.article-hero figcaption{color:var(--muted);font-size:13.5px;line-height:1.45;margin-top:9px;}
.article-inline{margin:36px 0 40px;}
.article-inline picture,.article-inline img{display:block;width:100%;}
.article-inline img{aspect-ratio:16/9;height:auto;object-fit:cover;object-position:center;border-radius:7px;}
.article-inline figcaption{color:var(--muted);font-size:13.5px;line-height:1.45;margin-top:9px;}
.article ul,.article ol{margin:0 0 18px 22px;font-size:16.5px;}
.article li{margin-bottom:9px;}
.article blockquote{border-left:5px solid var(--aqua);background:var(--soft);padding:16px 20px;border-radius:0 8px 8px 0;margin:0 0 18px;font-weight:600;}
.article .muted{color:var(--muted);}
.article a{color:#116a9f;}
.dateline{color:var(--muted);font-weight:700;font-size:14px;margin-bottom:22px;display:flex;gap:14px;flex-wrap:wrap;}
.prose-table{margin:18px 0;}
.table-note{display:none;color:var(--muted);font-size:14px;margin:10px 0 -6px;}
.plain-list li::marker{color:var(--coral);font-weight:800;}

/* ---------- compare tool ---------- */
.compare-select{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-bottom:8px;}
.select-card{background:#fff;border:1px solid var(--line);border-radius:9px;box-shadow:var(--shadow);padding:20px;border-top:6px solid var(--aqua);cursor:pointer;transition:all .12s;}
.select-card:hover{border-top-color:var(--coral);}
.select-card.selected{border-top-color:var(--green);background:var(--soft);}
.select-card .ptop{display:flex;align-items:center;gap:10px;font-family:'Manrope',sans-serif;font-weight:700;font-size:16px;margin-bottom:14px;}
.select-card .minus,.select-card .plus{background:#eef1f6;border:none;min-width:44px;min-height:44px;width:44px;height:44px;border-radius:10px;cursor:pointer;font-weight:800;color:var(--ink);font-size:20px;display:grid;place-items:center;}
.select-card .minus:hover{background:#fde6ea;color:var(--coral-ink);}
.select-card .plus:hover{background:#e3f3e9;color:var(--green-ink);}
.compare-output{display:none;margin-top:24px;}
.compare-output.active{display:block;}
.compare-fields{display:grid;grid-template-columns:1fr 1fr;gap:0;border:2px solid var(--navy);border-radius:9px;overflow:hidden;}
.compare-fields .cf-col{padding:20px;}
.compare-fields .cf-col:first-child{background:#fdf6fb;}
.compare-fields .cf-col:last-child{background:#eefaf6;}
.cf-row{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px dashed rgba(23,42,85,0.14);font-size:14.5px;}
.cf-row:last-child{border-bottom:none;}
.cf-row .k{color:var(--muted);font-weight:800;flex:none;}
.cf-row .v{text-align:right;font-weight:700;}
.cf-hdr{font-family:'Manrope',sans-serif;font-weight:800;font-size:18px;margin-bottom:6px;display:flex;align-items:center;gap:10px;}

/* ---------- status / notice ---------- */
.notice{background:#fff4c2;border:1px solid #e3cb69;border-left:7px solid var(--yellow);border-radius:6px;padding:16px 20px;display:flex;gap:12px;align-items:flex-start;margin-bottom:22px;}
.notice svg{width:20px;height:20px;color:#745c00;flex:none;margin-top:2px;}
.notice strong{display:block;margin-bottom:4px;}
.notice.info{background:#eef3ff;border-color:#c9d6ff;border-left-color:#377fc0;}
.notice.info svg{color:var(--blue);}
.notice.ok{background:#e7fbf0;border-color:#aee7cd;border-left-color:var(--green);}
.notice.ok svg{color:var(--green-ink);}

/* ---------- spec grid ---------- */
.spec-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:20px 0;}
.spec{background:var(--white);border:1px solid var(--line);border-left:4px solid var(--aqua);border-radius:6px;padding:15px 17px;box-shadow:var(--shadow);}
.spec .k{font:700 11px 'Manrope',sans-serif;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);margin-bottom:5px;}
.spec .v{font-weight:700;font-size:15px;}

/* ---------- CTA band ---------- */
.cta-band{background:var(--navy);color:#fff;border-radius:10px;text-align:center;padding:46px 28px;position:relative;overflow:hidden;}
.cta-band::after{content:"";position:absolute;right:-50px;top:-50px;width:200px;height:200px;background:radial-gradient(circle,rgba(255,211,74,0.28),transparent 70%);}
.cta-band h2{font-weight:800;font-size:clamp(28px,4vw,38px);margin-bottom:12px;color:#fff;}
.cta-band p{color:#d4deec;font-size:17px;font-weight:600;margin:0 auto 26px;max-width:580px;position:relative;}
.cta-band .btn-primary{background:var(--yellow);color:var(--navy);box-shadow:0 3px 0 #b9911b;}
.cta-band .btn-outline{background:transparent;color:#fff;border:2px solid rgba(255,255,255,0.5);}

/* ---------- Footer ---------- */
footer{background:#0e1e3d;color:#d0d9ea;padding:38px 0 44px;font-size:14px;margin-top:10px;}
.foot-flex{display:flex;justify-content:space-between;gap:26px;flex-wrap:wrap;align-items:flex-start;}
.foot-flex .col a{display:block;color:#b9c6dc;text-decoration:none;margin-bottom:8px;font-weight:600;}
.foot-flex .col a:hover{color:#fff;}
.foot-cols{display:grid;grid-template-columns:repeat(3,minmax(130px,1fr));gap:34px;}
.foot-flex .col strong{display:block;color:#fff;margin-bottom:10px;font-family:'Manrope',sans-serif;font-size:15px;}
.foot-flex>div:first-child strong{color:#fff;font-family:'Manrope',sans-serif;font-size:17px;}
.foot-flex>div:first-child a{color:#9ed0ff;font-weight:700;}
.foot-disclosure{max-width:760px;font-size:12.5px;color:#aebad1;line-height:1.55;margin-top:26px;border-top:1px solid rgba(255,255,255,0.12);padding-top:20px;}
.copyright{font-size:12px;color:#8d99b3;margin-top:18px;}

/* ---------- Responsive ---------- */
@media(max-width:900px){
  .steps{grid-template-columns:1fr;}
  .article{padding:30px 24px;}
}
@media(max-width:720px){
  .navlinks{position:absolute;top:100%;left:0;right:0;background:var(--white);border-bottom:1px solid var(--line);flex-direction:column;align-items:flex-start;padding:16px 22px;gap:14px;display:none;box-shadow:0 20px 30px -18px rgba(0,0,0,0.25);}
  .navlinks.open{display:flex;}
  .navtoggle{display:block;}
  .compare-fields{grid-template-columns:1fr;}
  .nav .nav-cta{display:inline-flex;}
  .sticky-disclosure .container{display:block;}
  .sticky-disclosure .container span{display:block;margin-bottom:3px;}
  .table-note{display:block;}
  .foot-cols{grid-template-columns:1fr 1fr;gap:22px;}
  .brand{font-size:19px;}
  .brand .brand-domain{letter-spacing:1.2px;}
}
@media(max-width:480px){
  .foot-cols{grid-template-columns:1fr;}
  .brand .mark{width:42px;height:42px;}
  .article{padding:25px 18px;}
}