@charset "UTF-8";
:root{--ink:#18334d;--muted:#53697b;--blue:#1469b6;--deep:#124c7f;--sky:#eaf5fc;--line:#dce7ef;--white:#fff;--soft:#f7fafc}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:118px}body{margin:0;color:var(--ink);background:#fff;font-family:"Noto Sans JP","Yu Gothic",Meiryo,sans-serif;font-size:15px;line-height:1.9;letter-spacing:.025em}a{color:inherit;text-decoration:none}button{font:inherit}a,button,summary{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #f3b846;outline-offset:5px}p,h1,h2,h3{margin:0}p+p{margin-top:16px}h1,h2,h3{line-height:1.55;font-weight:700;letter-spacing:.055em}h2{font-size:30px}h3{font-size:20px}p{color:var(--muted)}.wrap{width:min(1120px,calc(100% - 64px));margin:auto}.skip{position:fixed;left:20px;top:-100px;background:white;padding:12px;z-index:100}.skip:focus{top:10px}.draft{background:#eaf3f9;color:#486a84;font-size:11px;text-align:center;padding:5px 16px;letter-spacing:.08em}.header{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.97);border-bottom:1px solid var(--line)}.header-inner{min-height:86px;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{display:flex;flex-direction:column;line-height:1.4;flex-shrink:0}.brand strong{font-size:23px;letter-spacing:.08em}.brand span{font-size:11px;color:var(--blue);letter-spacing:.2em;margin-top:5px}.nav{display:flex;align-items:center;gap:26px;font-size:13px;font-weight:700}.nav a{padding:29px 0;border-bottom:3px solid transparent}.nav a[aria-current=page]{color:var(--blue);border-color:var(--blue)}.nav a:hover,.text-link:hover{color:var(--blue)}.menu-toggle{display:none}.eyebrow{color:var(--blue);font-size:11px;font-weight:700;letter-spacing:.18em;margin-bottom:14px}.hero{background:linear-gradient(110deg,#f7fbfe 0%,#f7fbfe 55%,#eaf5fc 55%,#eaf5fc 100%);overflow:hidden}.hero-inner{display:grid;grid-template-columns:1.25fr 1fr;gap:60px;align-items:center;padding:76px 0 70px}.hero h1{font-size:clamp(30px,3.1vw,43px);line-height:1.65;letter-spacing:.06em;margin-bottom:24px}.hero h1 em{font-style:normal;color:var(--blue);position:relative}.hero-copy>p{font-size:14px;line-height:2.15}.hero-school{font-weight:700;color:var(--deep)!important;margin-bottom:15px}.tags{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}.tag{display:inline-block;padding:3px 12px;font-size:11px;border-radius:4px;background:#fff;color:var(--blue);border:1px solid #d6e7f3;font-weight:700}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}.button{display:inline-flex;justify-content:center;align-items:center;gap:25px;background:var(--blue);color:white;border:1px solid var(--blue);border-radius:6px;padding:13px 22px;font-size:13px;font-weight:700;line-height:1.6;transition:background .15s}.button:hover{background:#0f528e}.button.secondary{background:white;color:var(--blue)}.button.secondary:hover{background:#eff7fc}.arrow{font-size:19px;font-weight:400}.learning-map{position:relative;padding:30px 25px;background:#fff;border:1px solid #d6e6f2;box-shadow:0 14px 45px #28648b0d;border-radius:14px}.map-label{font-size:12px;text-align:center;font-weight:700;margin-bottom:22px;color:var(--muted)}.map-row{display:grid;grid-template-columns:42px 1fr 30px;align-items:center;gap:14px;padding:17px 16px;background:var(--soft);border-radius:7px}.map-row:nth-of-type(3){background:#e7f3fc}.map-row+.map-row{margin-top:14px}.map-no{font-size:22px;font-weight:600;color:#76a2c4;font-family:Arial,sans-serif}.map-row strong{display:block;font-size:20px}.map-row small{font-size:11px;color:var(--muted);display:block}.map-row svg{width:26px;stroke:var(--blue);fill:none;stroke-width:1.6}.map-footer{margin-top:23px;border-top:1px dashed #c9dce9;padding-top:18px;text-align:center;font-size:13px;color:var(--deep);font-weight:700}.quick-strip{border-bottom:1px solid var(--line)}.quick-inner{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:19px 0;font-size:12px}.quick-inner span{color:var(--muted)}.quick-inner a{font-weight:700;color:var(--blue)}section.section{padding:76px 0}.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:32px}.section-head p{font-size:13px}.text-link{font-size:13px;font-weight:700;border-bottom:1px solid #bed2e2;padding-bottom:4px;white-space:nowrap}.purpose-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.purpose{border-top:2px solid #84bbde;padding:23px 19px 22px;background:var(--soft);display:flex;flex-direction:column;min-height:204px;border-radius:0 0 7px 7px}.purpose small{font-size:11px;color:var(--blue)}.purpose h3{font-size:19px;margin:12px 0 6px}.purpose p{font-size:12px;flex:1}.purpose b{align-self:flex-end;color:var(--blue);font-size:22px;font-weight:400}.purpose:hover{background:var(--sky)}.tint{background:var(--soft)}.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:34px}.pillar{border-left:1px solid #c4dbea;padding-left:24px}.pillar-number{font:15px Arial,sans-serif;color:var(--blue);margin-bottom:14px}.pillar h3{font-size:24px;margin-bottom:10px}.pillar p{font-size:13px}.pillar strong{font-size:15px;display:block;margin-bottom:10px}.center-note{text-align:center;font-size:12px;margin-top:30px}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.feature{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:white;display:flex;flex-direction:column}.feature-top{padding:27px;background:#ecf5fb;min-height:126px;position:relative;display:flex;flex-direction:column;justify-content:center}.feature:nth-child(2) .feature-top{background:#e7f2f7}.feature:nth-child(3) .feature-top{background:#eff2fa}.feature-top small{font-size:11px;color:var(--blue);margin-bottom:7px}.feature-top h3{font-size:23px}.feature-body{padding:23px;display:flex;flex-direction:column;flex:1}.feature-body p{font-size:13px;flex:1}.feature-body .text-link{margin-top:22px;align-self:flex-start}.welcome{background:var(--sky);border-radius:12px;padding:38px 42px;display:flex;justify-content:space-between;align-items:center;gap:28px}.welcome h2{font-size:25px;margin-bottom:9px}.welcome p{font-size:13px}.footer{border-top:1px solid var(--line);padding:45px 0 24px}.footer-top{display:flex;justify-content:space-between;gap:30px;margin-bottom:30px}.footer-links{display:flex;flex-wrap:wrap;gap:24px;font-size:12px;align-items:flex-start}.footer-note{font-size:11px;border-top:1px solid var(--line);padding-top:20px;display:flex;justify-content:space-between;gap:20px;color:var(--muted)}.page-head{background:var(--sky);padding:27px 0 45px}.breadcrumb{font-size:11px;color:var(--muted);margin-bottom:28px}.breadcrumb a{text-decoration:underline;text-underline-offset:3px}.page-head h1{font-size:35px;margin-bottom:12px}.page-head p{font-size:14px}.catalog-layout{display:grid;grid-template-columns:200px minmax(0,1fr);gap:44px;padding-top:48px;padding-bottom:72px}.catalog-nav{position:sticky;top:110px;align-self:start}.catalog-nav p{font-size:11px;font-weight:700;margin-bottom:12px}.catalog-nav a{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--line);font-size:13px}.catalog-nav a:hover{color:var(--blue)}.catalog-section{margin-bottom:55px;scroll-margin-top:110px}.catalog-section h2{font-size:25px}.catalog-section>.section-intro{font-size:13px;margin-top:10px;margin-bottom:24px}.group-number{font:12px Arial;color:var(--blue);display:block;margin-bottom:8px}.course-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.course-card{border:1px solid var(--line);border-radius:8px;padding:24px;display:flex;flex-direction:column;background:white;scroll-margin-top:120px}.course-card h3{font-size:19px;margin:12px 0}.audience{font-size:10px;color:var(--blue);font-weight:700}.course-card p{font-size:12px}.course-card .course-note{font-size:11px;color:#536575;margin-top:10px}.price{margin-top:20px;padding-top:17px;border-top:1px solid var(--line);color:var(--deep);font-size:21px;font-weight:700;line-height:1.6}.price small{font-size:11px;font-weight:400;display:block;color:var(--muted)}.course-card .external{font-size:12px;color:var(--blue);font-weight:700;margin-top:17px;display:flex;justify-content:space-between;align-items:center;gap:10px}.course-description{flex:1}.course-card.wide{grid-column:1/-1}.course-card.wide .price{font-size:19px}.notice{background:var(--soft);border-left:3px solid #84bbde;padding:18px 22px;font-size:12px;color:var(--muted);margin-top:24px}.notice strong{color:var(--ink)}.narrow{width:min(900px,calc(100% - 64px));margin:auto}.intro-large{font-size:25px;color:var(--ink);line-height:1.9;margin-bottom:22px}.method-row{display:grid;grid-template-columns:100px 1fr;gap:26px;padding:32px 0;border-bottom:1px solid var(--line)}.method-row .big-no{font:46px Arial,sans-serif;color:#a7cee7}.method-row h2{font-size:25px;margin-bottom:10px}.method-row h3{font-size:17px;margin-bottom:14px}.method-row p{font-size:14px}.learning-example{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-top:28px;background:white}.example-copy{padding:35px}.example-copy h3{font-size:24px;margin:10px 0 18px}.example-copy p{font-size:13px}.example-steps{background:#eef6fb;padding:32px;display:flex;flex-direction:column;justify-content:center;gap:15px}.example-step{background:white;padding:15px 18px;border-radius:5px;font-size:13px;display:flex;gap:16px;align-items:center}.example-step b{font:16px Arial;color:var(--blue)}.repeat{text-align:center;font-size:13px;font-weight:700;color:var(--blue)}.choose-list{margin-top:28px;border-top:1px solid var(--line)}.choose-row{display:grid;grid-template-columns:1fr 1fr;gap:24px;border-bottom:1px solid var(--line);padding:21px 0;align-items:center}.choose-row p{font-size:14px}.choose-row a{color:var(--blue);font-size:14px;font-weight:700}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:30px}.step{background:#fff;border:1px solid var(--line);padding:27px;border-radius:8px}.step .number{font:30px Arial;color:#86b7d7;margin-bottom:15px}.step h3{font-size:19px;margin-bottom:12px}.step p{font-size:13px}.faq{margin-top:28px;border-top:1px solid var(--line)}.faq details{border-bottom:1px solid var(--line)}.faq summary{list-style:none;cursor:pointer;padding:21px 36px 21px 0;position:relative;font-size:15px;font-weight:700}.faq summary::-webkit-details-marker{display:none}.faq summary:after{content:'＋';position:absolute;right:0;color:var(--blue)}.faq details[open] summary:after{content:'−'}.faq summary span{color:var(--blue);font:17px Arial;margin-right:15px}.faq details p{font-size:13px;padding:0 30px 23px}.faq details a{color:var(--blue);text-decoration:underline}.consult{margin-top:42px;text-align:center;padding:35px;background:var(--sky);border-radius:10px}.consult h3{margin-bottom:10px}.consult p{font-size:13px}.consult .actions{justify-content:center}.below{padding-bottom:70px}.mobile-only{display:none}
@media(min-width:1450px){.hero-inner{padding-top:90px;padding-bottom:85px}}
@media(max-width:1000px){.nav{gap:16px;font-size:12px}.brand strong{font-size:20px}.hero-inner{gap:30px}.hero h1{font-size:33px}.purpose-grid{gap:12px}.purpose{padding:20px 14px}.purpose h3{font-size:17px}.catalog-layout{grid-template-columns:160px minmax(0,1fr);gap:28px}.course-card{padding:20px}}
@media(max-width:760px){body{font-size:14px}.wrap,.narrow{width:calc(100% - 40px)}.draft{font-size:10px}.header-inner{min-height:72px}.brand strong{font-size:20px}.brand span{font-size:10px}.menu-toggle{display:block;background:#edf5fa;border:1px solid #cddfea;border-radius:5px;color:var(--deep);font-size:11px;padding:8px 12px}.nav{display:none;position:absolute;left:0;right:0;top:72px;background:white;flex-direction:column;align-items:stretch;gap:0;padding:10px 22px 18px;box-shadow:0 12px 16px #18334d10}.nav.open{display:flex}.nav a{padding:14px 7px;border-bottom:1px solid var(--line);font-size:13px}.nav a[aria-current=page]{border-bottom:1px solid var(--blue)}.hero{background:linear-gradient(150deg,#f7fbfe 0%,#eaf5fc 100%)}.hero-inner{grid-template-columns:1fr;padding:40px 0;gap:34px}.hero h1{font-size:31px;line-height:1.7}.hero-copy>p{font-size:13px}.tags{margin-bottom:17px}.hero-school{font-size:12px!important}.actions{gap:10px}.button{padding:12px 16px;font-size:12px;gap:14px}.hero .actions .button{flex:1;padding:12px 10px;gap:8px;white-space:nowrap}.learning-map{padding:22px}.map-label{margin-bottom:14px}.map-row{padding:12px 14px}.map-row strong{font-size:18px}.map-footer{margin-top:17px;padding-top:13px}.quick-inner{align-items:flex-start;flex-direction:column;gap:4px;padding:16px 0}.section-head{align-items:flex-start;flex-direction:column;gap:12px;margin-bottom:25px}h2{font-size:25px}section.section{padding:48px 0}.purpose-grid{grid-template-columns:repeat(2,1fr);gap:13px}.purpose{min-height:188px}.purpose small{font-size:10px}.purpose h3{font-size:17px}.purpose p{font-size:11px}.pillars{grid-template-columns:1fr;gap:26px}.pillar{padding-left:21px}.pillar-number{margin-bottom:6px}.pillar h3{font-size:22px}.feature-grid{grid-template-columns:1fr;gap:18px}.feature-top{min-height:105px;padding:23px}.welcome{padding:28px;flex-direction:column;align-items:flex-start;gap:20px}.welcome h2{font-size:23px}.footer-top,.footer-note{flex-direction:column;gap:20px}.footer-links{gap:13px 20px}.footer{padding:34px 0 25px}.page-head{padding:22px 0 34px}.page-head h1{font-size:28px}.page-head p{font-size:13px}.breadcrumb{margin-bottom:20px;font-size:10px}.catalog-layout{display:block;padding-top:26px;padding-bottom:25px}.catalog-nav{position:static;display:flex;flex-wrap:wrap;gap:8px;margin-bottom:35px}.catalog-nav p{width:100%;margin-bottom:0}.catalog-nav a{background:var(--soft);padding:8px 12px;border:1px solid var(--line);border-radius:5px;font-size:11px;gap:10px}.catalog-section{margin-bottom:40px;scroll-margin-top:95px}.course-grid{grid-template-columns:1fr}.course-card{padding:23px}.course-card h3{font-size:20px}.course-card p{font-size:13px}.price{font-size:23px}.course-card.wide .price{font-size:17px}.course-card .external{font-size:13px}.intro-large{font-size:22px}.method-row{grid-template-columns:44px 1fr;gap:18px;padding:28px 0}.method-row .big-no{font-size:32px}.method-row h2{font-size:23px}.method-row h3{font-size:15px}.method-row p{font-size:13px}.learning-example{grid-template-columns:1fr}.example-copy,.example-steps{padding:25px}.steps{grid-template-columns:1fr;gap:15px}.step{padding:25px}.choose-row{grid-template-columns:1fr;gap:8px;padding:20px 0}.faq summary{font-size:14px}.faq details p{padding-right:4px}.consult{padding:25px 20px}.below{padding-bottom:45px}.center-note{text-align:left}.mobile-only{display:block}}
@media(max-width:360px){.wrap,.narrow{width:calc(100% - 32px)}.hero h1{font-size:27px}.hero .actions{flex-direction:column}.purpose-grid{gap:10px}.purpose{padding:17px 12px}.purpose h3{font-size:15px}.brand strong{font-size:18px}.menu-toggle{padding:7px 9px}.page-head h1{font-size:25px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

.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}

/* ===== STOACA GREEN / DESIGN V2: 2026-11-01 ===== */
:root{
 --ink:#173B36;
 --muted:#526E66;
 --blue:#0A7968;
 --deep:#0A6659;
 --sky:#E7F7F0;
 --line:#D7EAE1;
 --soft:#F6FBF8;
 --street-green:#13B39A;
 --street-gold:#F7CA5F;
 --street-coral:#E8786A;
}
body{background:#fff;color:var(--ink)}
p{color:var(--muted)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--street-gold)}
.draft{background:#DFF4EA;color:#276357;border-bottom:1px solid #D3E9DE}
.header{background:rgba(255,255,255,.985);border-color:#DBEEE5;box-shadow:0 4px 20px rgba(9,62,52,.04)}
.brand{position:relative;padding-left:15px}
.brand:before{content:"";position:absolute;left:0;top:5px;bottom:4px;width:5px;border-radius:8px;background:linear-gradient(to bottom,var(--street-green) 0 60%,var(--street-gold) 60% 100%)}
.brand strong{color:#174A3F}
.brand span{color:#0A846F}
.nav a:hover,.nav a[aria-current=page]{color:var(--blue)}
.nav a[aria-current=page]{border-color:#17AE91}
.eyebrow,.pillar-number,.group-number{color:#0A8670}
/* Strong, distinct STOACA-inspired first view. This remains the Kirinji school's site, not a Street Academy official product. */
.hero{position:relative;isolation:isolate;background:linear-gradient(112deg,#065D51 0%,#087A68 56%,#0DA78C 100%)}
.hero:before{content:"";position:absolute;z-index:-1;right:-120px;top:-270px;width:730px;height:730px;border:105px solid rgba(255,255,255,.08);border-radius:50%;pointer-events:none}
.hero:after{content:"";position:absolute;z-index:-1;right:24%;bottom:-250px;width:370px;height:370px;background:radial-gradient(circle,rgba(245,216,115,.18),transparent 70%);pointer-events:none}
.hero-inner{position:relative;padding-top:86px;padding-bottom:86px;gap:64px}
.hero h1{color:#fff;font-weight:800;font-size:clamp(33px,3.2vw,46px);line-height:1.6}
.hero h1 em{color:#FFE6A1}
.hero .hero-copy>p{color:#F0FFF9}
.hero .hero-school{color:#D9FFF0!important;letter-spacing:.08em}
.hero .tag{background:#F5FFFA;color:#0B6859;border:1px solid #E9FFF5;border-radius:100px;font-weight:800;padding:5px 14px}
.hero .actions{margin-top:32px}
.hero .button{background:#fff;color:#085F50;border:1px solid #fff;box-shadow:0 5px 18px rgba(0,39,29,.11);border-radius:8px}
.hero .button:hover{background:#E8FFF5;color:#064B40}
.hero .button.secondary{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.85);box-shadow:none}
.hero .button.secondary:hover{background:rgba(255,255,255,.12);color:#fff}
.learning-map{background:#fff;border:1px solid #C4E8D7;border-radius:18px;box-shadow:0 24px 58px rgba(3,58,46,.2);padding:30px 27px}
.map-label{color:#335E52}
.map-row{background:#F0FBF6;border-left:4px solid #18B69A;border-radius:8px}
.map-row:nth-of-type(3){background:#E4F7ED}
.map-no{color:#0C947D;font-weight:800}
.map-row strong{color:#174E41}
.map-row svg{stroke:#0D9078}
.map-footer{border-top-color:#BCE2D2;color:#116B5C}
/* Quick path for current students */
.quick-strip{background:#E7F7ED;border-bottom:1px solid #CCE7D9}
.quick-inner{padding-top:20px;padding-bottom:20px}
.quick-inner span{color:#2A6456;font-weight:700}
.quick-inner a{color:#096B59;text-decoration:underline;text-decoration-color:#8BCDB8;text-underline-offset:4px}
/* Content rhythm and friendly discoverability */
section.section{padding-top:78px;padding-bottom:78px}
.section-head h2{position:relative}
.purpose-grid{gap:19px}
.purpose{background:#fff;border:1px solid #D5E9DF;border-top:4px solid #16AE94;border-radius:10px;box-shadow:0 8px 20px rgba(22,93,77,.045);transition:transform .17s ease,box-shadow .17s ease,background .17s ease}
.purpose:nth-child(2){border-top-color:#F0BD56}
.purpose:nth-child(3){border-top-color:#3BBBA3}
.purpose:nth-child(4){border-top-color:#E58E7E}
.purpose:hover{background:#F5FCF8;transform:translateY(-2px);box-shadow:0 14px 30px rgba(7,93,77,.09)}
.purpose small{color:#117F6C;font-weight:700}
.purpose h3{color:#173E37}
.purpose b{color:#0A806B}
.tint{background:#F3FAF6}
.pillars{gap:27px}
.pillar{border-left:3px solid #78CEB6}
.pillar:nth-child(2){border-left-color:#F0C778}
.pillar:nth-child(3){border-left-color:#92C9BA}
.pillar-number{font-weight:700}
.feature{border:1px solid #D3E7DC;border-radius:11px;box-shadow:0 8px 24px rgba(30,94,71,.035)}
.feature-top{background:linear-gradient(115deg,#E8F8EF,#F5FBF6);border-bottom:1px solid #D4ECE0}
.feature:nth-child(2) .feature-top{background:linear-gradient(115deg,#FFF8E8,#F5FBF6)}
.feature:nth-child(3) .feature-top{background:linear-gradient(115deg,#F1F8F5,#E8F7F0)}
.feature-top small{color:#0B7967}
.text-link{border-color:#A1D3C2;color:#096C5D}
.text-link:hover{color:#045C4C}
.welcome{background:linear-gradient(115deg,#E4F7EF,#F3FBF7);border:1px solid #CEEBDB}
.button{background:#0B7968;border-color:#0B7968;border-radius:8px}
.button:hover{background:#075B4E}
.button.secondary{color:#0B7968;border-color:#88CDB8}
.button.secondary:hover{background:#F4FBF7}
/* Catalog */
.page-head{background:linear-gradient(110deg,#E6F7EE,#F3FBF7);border-bottom:1px solid #D1E9DC}
.page-head h1{color:#174B40}
.catalog-nav a:hover{color:#075C4E}
.course-card{border:1px solid #D2E7DC;border-top:3px solid #2CB59A;border-radius:10px;box-shadow:0 5px 20px rgba(16,87,70,.04);transition:box-shadow .17s ease}
.course-card:hover{box-shadow:0 12px 28px rgba(12,102,83,.09)}
.course-card h3{color:#1A4B40}
.course-card .audience{color:#0B7462}
.price{color:#086856;border-top-color:#D9E9DF}
.course-card .external{color:#087D6B;text-decoration:underline;text-underline-offset:4px;text-decoration-color:#A8D8C8}
.notice{background:#F0F9F4;border-left:4px solid #28B99D;color:#385E54}
.notice strong{color:#155548}
.catalog-nav a{border-color:#D9E9DF}
.catalog-section h2{color:#174B40}
/* Learning page and FAQ */
.method-row{border-color:#D4E8DC}
.method-row .big-no{color:#52BDA0}
.learning-example{border-color:#CCE9DB;box-shadow:0 8px 30px rgba(4,80,55,.035)}
.example-steps{background:#E7F6EE}
.example-step{border:1px solid #D6EDE0}
.example-step b,.repeat{color:#087F6A}
.choose-row{border-color:#DCEBE2}
.choose-row a{color:#087B67}
.step{border-color:#D5E9DE;border-top:4px solid #26B59C;box-shadow:0 8px 20px rgba(13,99,76,.04)}
.step:nth-child(2){border-top-color:#EDC26B}
.step:nth-child(3){border-top-color:#54BBA5}
.step .number{color:#3DB79C}
.faq{border-top-color:#D2E7DD}
.faq details{border-bottom-color:#D9E8DE}
.faq summary:after,.faq summary span{color:#0C8D76}
.consult{background:#E4F7EC;border:1px solid #D0EADB}
/* Contrast footer that closes the guide clearly */
.footer{background:#103E35;color:#fff;border-top:4px solid #16AC92}
.footer .brand strong{color:#fff}
.footer .brand span{color:#A6E3CE}
.footer-links a{color:#E7FAF2}
.footer-links a:hover{color:#FFE4A0}
.footer-note{border-color:#39685D;color:#CBE5DB}
.footer-note span{color:#CBE5DB}
@media(max-width:760px){
 .hero{background:linear-gradient(150deg,#055B4F 0%,#087661 55%,#0B8C76 100%)}
 .hero-inner{padding-top:47px;padding-bottom:47px;gap:32px}
 .hero h1{font-size:30px;line-height:1.65}
 .hero:before{width:470px;height:470px;right:-290px;top:-170px;border-width:65px}
 .hero .button{border-radius:8px}
 .menu-toggle{color:#075C4E;background:#E8F6EF;border:1px solid #B8DECD}
 .nav{background:#fff;box-shadow:0 16px 22px rgba(8,69,55,.12)}
 .nav a{border-color:#D7EADC}
 .nav a[aria-current=page]{border-color:#2EB89D}
 section.section{padding-top:49px;padding-bottom:49px}
 .purpose{min-height:193px}
 .catalog-nav a{background:#F1F9F4;border-color:#D1E9DC}
 .learning-map{padding:24px}
 .welcome{padding:26px}
}
@media(max-width:360px){.hero h1{font-size:27px}.purpose{padding:18px 13px}}
@media(prefers-reduced-motion:reduce){.purpose{transform:none!important}}
/* ===== END GREEN V2 ===== */

/* ===== V3: existing Kirinji identity integrated with STOACA-green theme ===== */
.brand{padding-left:0;gap:3px;align-items:flex-start;justify-content:center}
.brand:before{display:none}
.brand-logo{display:block;width:228px;max-width:100%;height:auto;object-fit:contain}
.brand span{padding-left:2px;color:#0C7968;font-size:11px;letter-spacing:.17em;line-height:1.3;margin-top:0}
.header-inner{min-height:90px}
.map-identity{display:flex;align-items:center;gap:17px;border-bottom:1px solid #C5E7DA;padding:0 0 18px;margin-bottom:18px}
.map-identity img{width:96px;height:96px;object-fit:cover;border-radius:50%;border:3px solid #E5F5EE;box-shadow:0 5px 14px rgba(15,107,81,.10);flex-shrink:0}
.map-identity .map-kicker{font-size:11px;letter-spacing:.08em;display:block;color:#0C806C;font-weight:800;margin-bottom:7px}
.map-identity .map-label{margin:0;text-align:left;font-size:15px;line-height:1.6;color:#184C40;font-weight:800}
.learning-map{padding:25px 26px}
.hero-inner{gap:44px}
.map-row{padding:14px 16px}
.map-row+.map-row{margin-top:10px}
.map-footer{margin-top:15px;padding-top:13px}
.course-image{display:block;width:calc(100% + 48px);margin:-24px -24px 20px;aspect-ratio:4/3;object-fit:cover;border-radius:7px 7px 0 0;border-bottom:1px solid var(--line)}
.feature-image{display:block;width:calc(100% + 54px);max-width:none;aspect-ratio:4/3;object-fit:cover;margin:-27px -27px 20px}
.method-illustration{margin:0 0 32px;background:#fff;border:1px solid #CFE8DD;border-radius:12px;overflow:hidden;box-shadow:0 10px 26px rgba(0,75,45,.05)}
.method-illustration img{display:block;width:100%;height:auto}
.method-illustration figcaption{padding:7px 18px 10px;text-align:center;color:#547266;font-size:11px}
.consult-mascot{width:93px;height:93px;object-fit:cover;border-radius:50%;display:block;margin:0 auto 13px;border:3px solid #DAF0E6}
.footer .brand-logo{width:216px}
@media(max-width:760px){
 .header-inner{min-height:74px}
 .brand-logo{width:194px}
 .brand span{font-size:10px}
 .map-identity{gap:14px}
 .map-identity img{width:82px;height:82px}
 .map-identity .map-label{font-size:14px}
 .learning-map{padding:22px}
 .course-image{width:calc(100% + 46px);margin:-23px -23px 18px}
 .feature-image{width:calc(100% + 46px);margin:-23px -23px 18px}
}
@media(max-width:360px){
 .brand-logo{width:166px}
 .map-identity img{width:72px;height:72px}
 .map-identity .map-label{font-size:12px}
}

/* Footer logo on an intentionally white field so the original blue brand mark
   remains legible against the deep STOACA-inspired green footer. */
.footer .brand-logo{
  background-color:#fff;
  border-radius:8px;
  padding:10px 14px;
  width:216px;
  max-width:calc(100% - 28px);
  height:auto;
  box-sizing:content-box;
}
.footer .brand span{
  margin-top:10px;
}
@media(max-width:760px){
  .footer .brand-logo{width:194px;}
}
@media(max-width:360px){
  .footer .brand-logo{width:166px;}
}

/* ===== V4: 15-product discovery (accessible keyboard/mobile filters) ===== */
.catalog-filters{margin-top:35px;margin-bottom:0;border:1px solid #D3E9DE;border-radius:12px;background:linear-gradient(110deg,#F7FCF9,#EDF9F2);padding:23px 26px;box-shadow:0 6px 22px rgba(14,85,57,.04)}
.catalog-search-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:19px}
.catalog-search-head strong{display:block;font-size:19px;color:#164A3F}
.catalog-search-head p{font-size:12px;margin-top:3px}
.result-count{font-size:13px;white-space:nowrap;font-weight:700;color:#0A7461;background:#fff;border:1px solid #CBE9DB;border-radius:100px;padding:4px 13px}
.catalog-search-controls{display:flex;flex-wrap:wrap;align-items:end;gap:16px 20px}
.search-field{flex:2 1 255px;min-width:160px}
.search-field label,.audience-field-label{display:block;font-weight:700;font-size:12px;color:#20564A;margin-bottom:7px}
#course-keyword{font:inherit;font-size:15px;line-height:1.4;background:#fff;color:#1E443C;width:100%;min-height:45px;border:1px solid #A8D1C0;border-radius:8px;padding:10px 12px}
#course-keyword:focus-visible,.audience-options button:focus-visible,.reset-search:focus-visible{outline:3px solid #F7CA5F;outline-offset:3px}
.audience-field{flex:1 1 245px}
.audience-options{display:flex;gap:7px;flex-wrap:wrap}
.audience-options button{background:#fff;color:#1A5C4B;border:1px solid #A8D1C0;border-radius:7px;padding:10px 14px;min-height:45px;cursor:pointer;font-size:12px;font-weight:700;white-space:nowrap}
.audience-options button[aria-pressed=true]{background:#0A7D6C;border-color:#0A7D6C;color:#fff}
.reset-search{background:none;border:0;cursor:pointer;min-height:45px;font-size:12px;text-decoration:underline;text-underline-offset:4px;color:#135F52;padding:8px}
.catalog-search-help{font-size:11px;margin-top:14px}
.catalog-filters+.catalog-layout{padding-top:32px}
.catalog-no-results{padding:28px 20px;margin-bottom:26px;text-align:center;border-radius:10px;background:#FFF8EA;color:#6B5737}
.course-card[hidden],.catalog-section[hidden],.catalog-no-results[hidden]{display:none!important}
@media(max-width:760px){.catalog-filters{padding:19px 16px;margin-top:22px}.catalog-search-head{align-items:flex-start}.catalog-search-head strong{font-size:17px}.result-count{font-size:11px}.catalog-search-controls{gap:13px}.search-field,.audience-field{flex:1 1 100%}.audience-options{gap:6px}.audience-options button{padding:9px 12px;flex:1 1 0}.reset-search{min-height:34px;text-align:left;padding:4px 0}}
/* ===== END V4 ===== */
/* If scripts are unavailable, the complete product catalog remains visible with no inert controls. */
.catalog-filters{display:none}
.catalog-search-enabled .catalog-filters{display:block}

/* ===== V5: verified, user-supplied course images ===== */
.feature-cover{width:100%;aspect-ratio:4/3;overflow:hidden;background:#F1F9F4;display:flex;align-items:stretch}
.feature-cover img{display:block;width:100%;height:100%;object-fit:contain;object-position:center}
.feature-cover-fallback{width:100%;height:100%;background:radial-gradient(circle at 95% 5%,#D6F5E9 0%,transparent 48%),linear-gradient(135deg,#F0FBF5,#E3F4EA);padding:20px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:14px}
.feature-cover-fallback span{font-size:12px;color:#237A68;font-weight:700}
.feature-cover-fallback strong{font-size:clamp(25px,2.5vw,38px);color:#0F584C;letter-spacing:.1em}
.feature-cover-fallback small{font-size:11px;color:#2D7B6B;letter-spacing:.2em}
.feature-body{padding-top:18px}
.feature-body .feature-caption{display:block;font-weight:700;color:#0B7967;font-size:11px;margin-bottom:4px}
.feature-body h3{font-size:21px;color:#164E42;margin-bottom:8px}
.feature-body p{flex:1}
.course-image{object-fit:contain;background:#F7FAF8}
.course-image-fallback{width:calc(100% + 48px);margin:-24px -24px 20px;aspect-ratio:4/3;border-radius:7px 7px 0 0;border-bottom:1px solid #D1E9DB;background:radial-gradient(circle at 100% 0%,#D4F7E9,transparent 55%),linear-gradient(120deg,#F2FBF7,#E1F4EB);display:flex;flex-direction:column;gap:12px;align-items:center;justify-content:center;text-align:center;padding:22px}
.course-image-fallback span{font-size:11px;color:#227C68;font-weight:700}
.course-image-fallback strong{font-size:clamp(22px,2.2vw,34px);color:#0D6655}
.course-image-fallback small{font-size:12px;color:#2F806E}
@media (min-width:761px){
 .course-card.wide.with-art{display:grid;grid-template-columns:minmax(215px,320px) minmax(0,1fr);grid-template-rows:repeat(5,auto);column-gap:26px;align-content:start}
 .course-card.wide.with-art>.course-image,.course-card.wide.with-art>.course-image-fallback{grid-column:1;grid-row:1 / span 5;width:100%;margin:0;align-self:start;max-width:320px;aspect-ratio:4/3;border-radius:8px;border:1px solid #D3E9DE}
 .course-card.wide.with-art>:not(.course-image):not(.course-image-fallback){grid-column:2}
 .course-card.wide.with-art .course-description{flex:unset}
 .course-card.wide.with-art .price{margin-top:14px}
}
@media(max-width:760px){.course-image-fallback{width:calc(100% + 46px);margin:-23px -23px 18px}.feature-cover-fallback strong{font-size:28px}.course-card.wide.with-art{display:flex}}
/* Keep image intrinsic 4:3 ratio; HTML height hints must not stretch card thumbnails. */
.course-image{height:auto;}
.course-card.wide.with-art > .course-image{height:auto;}

/* ===== V7: Expert editorial entry ===== */
.expert-section{background:#F3FBF7}
.expert-panel{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(260px,1fr);gap:34px;align-items:center;padding:34px;border-radius:15px;background:#fff;border:1px solid #CBE4D6}
.expert-panel-copy h2{font-size:26px;line-height:1.5;margin-bottom:12px;color:#143E35}
.expert-panel-copy p{font-size:13px;line-height:2;color:#506961}
.expert-panel-copy .actions{margin-top:22px}
.expert-featured{background:#E8F7EE;border-radius:12px;padding:22px}
.expert-featured-label{font-size:11px;font-weight:700;color:#18755F;letter-spacing:.05em;margin-bottom:14px}
.expert-featured a{display:block;position:relative;padding:6px 30px 12px 0;font-size:17px;font-weight:700;line-height:1.6;color:#154839}
.expert-featured a span:not(.expert-arrow){font-size:13px;display:block;font-weight:500}
.expert-featured a .expert-arrow{position:absolute;right:3px;top:12px;color:#0F765F;font-size:23px}
.expert-featured small{display:block;font-size:11px;color:#5A776A;border-top:1px solid #CEE7D6;padding-top:13px}
@media(max-width:1080px){.header .nav{gap:12px;font-size:12px}}
@media(max-width:900px) and (min-width:761px){.header-inner{gap:12px}.header .nav{gap:10px;font-size:11px}.header .brand-logo{max-width:180px}}
@media(max-width:760px){.expert-panel{grid-template-columns:1fr;padding:24px;gap:24px}.expert-panel-copy h2{font-size:23px}.expert-featured a{font-size:16px}}
