/* MySchool.hk Kindergarten canonical shared design system
   Version: 1.0 | 2026-10-31
   Scope: kg_admission.php, kg_interview.php, kg_curriculum.php */
:root{
  --kg-bg:#FFFCF6;--kg-surface-soft:#F1F8F2;--kg-card:#FFFFFF;--kg-dark:#12483F;
  --kg-text-main:#213B34;--kg-text-body:#5A6B62;--kg-text-muted:#66766D;
  --kg-primary:#167D73;--kg-primary-hover:#125E56;--kg-border:#E1E8DF;
  --kg-mint:#E3F3E9;--kg-sky:#E7F3FD;--kg-peach:#FFEDE3;--kg-lav:#F0E9FA;--kg-yellow:#FFF3D0;
  --kg-radius-card:24px;--kg-radius-control:13px;--kg-shadow:0 4px 24px #183b2808;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:24px}
body{margin:0;background:var(--kg-bg);color:var(--kg-text-main);font:16px/1.75 system-ui,-apple-system,"PingFang TC","Noto Sans TC","Microsoft JhengHei",sans-serif}
h1,h2,h3,h4,p{margin:0}h1,h2,h3,h4{line-height:1.4;color:var(--kg-text-main)}
h1{font-size:clamp(30px,3.6vw,44px);line-height:1.3;letter-spacing:-1px;font-weight:800}
h2{font-size:28px}h3{font-size:19px;margin:10px 0}p,li{color:var(--kg-text-body)}p{margin-top:10px}
a{color:inherit;text-decoration:none}button,input,select,summary{font:inherit}button,select,summary{cursor:pointer}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid var(--kg-primary);outline-offset:4px}
.wrap{max-width:1280px;margin:auto;padding:0 32px}.skip{position:absolute;top:-80px;left:16px;background:white;padding:10px;z-index:999}.skip:focus{top:10px}
section{margin-bottom:42px}.small{font-size:12px}.extlink{color:var(--kg-primary);font-weight:750;text-decoration:underline;text-underline-offset:3px}
ul{padding-left:20px;margin-bottom:0}li{margin:8px 0}
/* Shared header */
header{background:var(--kg-bg)}.brandrow{display:flex;justify-content:space-between;align-items:center;min-height:76px;gap:18px}
.brand{display:flex;gap:12px;align-items:center}.logo{width:44px;height:44px;border-radius:16px;background:linear-gradient(140deg,#167D73,#7CB795);color:#fff;display:grid;place-items:center;font-size:23px;font-weight:800}
.brandname,.brandtitle{font-size:21px;font-weight:850;line-height:1.25}.brandname span{color:#167D73}.brand small,.brandsub{font-size:12px;color:#627469;display:block}
.headeractions{display:flex;align-items:center;gap:10px}.districtbtn,.rankbtn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border-radius:12px;padding:9px 12px;font-size:12px;font-weight:800;white-space:nowrap}
.districtbtn{background:#E5F3E9;color:#167D73;border:1px solid #B9DDCD}.districtbtn>span{font-size:17px}.districtbtn small{display:none}
.rankbtn{background:var(--kg-primary);color:#fff;border:1px solid var(--kg-primary);box-shadow:0 5px 15px #00000012}.headrank{background:#131126;border-color:#131126;padding:10px 15px;font-size:13px}.rankbtn>span{font-size:20px;color:#FFDC63}.rankbtn:hover,.districtbtn:hover{filter:brightness(.97)}
.navouter{background:#EEF6F0;border-block:1px solid #DCE9DE}.nav{display:flex;flex-wrap:wrap;gap:8px;padding-block:10px;overflow-x:auto}.nav>a,.nav>span{font-size:13px;padding:8px 12px;border:1px solid #D5E3D9;background:#fff;border-radius:10px;white-space:nowrap}.nav>a{color:#315F50}.nav>a[aria-current=page]{background:var(--kg-primary);color:#fff;font-weight:750}.nav small{color:#748276;font-size:10px}
.anchorouter{background:#FFFCF6;border-bottom:1px solid #E5ECE7}.anchornav{display:flex;align-items:center;gap:8px;padding-block:8px;overflow-x:auto;white-space:nowrap}.anchornav a{display:inline-flex;align-items:center;padding:6px 11px;border-radius:999px;background:#fff;color:#315F50;border:1px solid #DCE8DF;font-size:12px;font-weight:750}.anchornav a:hover{background:#E3F3E9;color:#167D73}.kg-page-disclaimer{background:#FFF8E6;border-bottom:1px solid #ECDFB8;color:#6E5C37;font-size:12px}.kg-page-disclaimer>.wrap{padding-top:8px;padding-bottom:8px}
/* Shared components */
.pill{font-size:12px;font-weight:750;border-radius:30px;padding:6px 12px;background:#E1F1E7;color:#286C56;display:inline-flex;align-items:center;gap:6px}
.eyebrow{display:block;font-size:12px;font-weight:800;letter-spacing:1px;color:#247561;margin-bottom:8px}
.hero{display:grid;grid-template-columns:1.45fr 1fr;gap:24px;align-items:center;padding:28px 34px;border-radius:26px;background:linear-gradient(120deg,#E3F2E8,#FFF4D9);border:1px solid #D8E7D8;overflow:hidden;margin-top:32px;margin-bottom:24px}
.hero h1{margin:12px 0}.hero p{margin-top:8px}.actions,.heroactions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 18px;border-radius:13px;border:1px solid #C7DCD0;background:#fff;color:#246453;font-size:14px;font-weight:750;min-height:46px}.btn.primary,.primary{background:var(--kg-primary);color:#fff;border-color:var(--kg-primary)}.btn.secondary{background:#fff;color:var(--kg-primary);border-color:#B9DDCD}.btn:hover{filter:brightness(.96)}
.art{font-size:82px;display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0;line-height:1.15}.art span{display:grid;place-items:center;border-radius:20px;background:#FFFFFF88;padding:10px 8px;min-height:108px}.art span:first-child{grid-column:span 2;font-size:118px;min-height:145px}
.head,.section-header{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:18px}.head p{font-size:14px;margin-top:6px}.section-header h2{font-size:28px}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.card{background:var(--kg-card);border:1px solid var(--kg-border);border-radius:var(--kg-radius-card);padding:22px;min-width:0;box-shadow:var(--kg-shadow)}
.mint{background:var(--kg-mint);border-color:#C7DCD0}.sky{background:var(--kg-sky);border-color:#C5DDF2}.peach{background:var(--kg-peach);border-color:#F5D0BD}.lav{background:var(--kg-lav);border-color:#DECFF5}.yellow{background:var(--kg-yellow);border-color:#ECDFB8}
.icon{display:inline-grid;place-items:center;font-size:46px;line-height:1;width:62px;height:62px;border-radius:17px;background:#FFFFFF80;margin-bottom:2px}.quick .icon{font-size:44px;width:58px;height:58px}.quick h3{font-size:17px;margin:9px 0 3px}.quick p{font-size:13px;margin-top:3px}.quick:hover{border-color:#89B7A0}
.switch{display:flex;padding:5px;background:#E3F1E8;border:1px solid #D6E3D8;border-radius:14px;gap:5px}.switch button{border:0;background:none;color:#35624F;padding:12px 24px;border-radius:10px;font-weight:800;white-space:nowrap}.switch button[aria-pressed=true]{background:var(--kg-primary);color:#fff;box-shadow:none}
.pathgrid{display:grid;grid-template-columns:1fr 1.1fr;gap:22px}.pathbadge{font-size:44px;color:var(--kg-primary);font-weight:850;line-height:1.2}.note{background:#FFF4D8;border:1px solid #ECDFB8;border-radius:16px;padding:16px 20px;font-size:14px;margin-top:14px;color:#6E5C37}
.flow{padding:22px;background:var(--kg-surface-soft);border:1px solid #D9E7DC;border-radius:24px;margin-bottom:20px}.flowrow{display:flex;gap:10px;align-items:stretch}.flowrow button,.flowstep{flex:1;min-width:0;padding:18px 10px;background:#fff;border:1px solid #BCD7C9;border-radius:16px;color:#285F4E;font-size:14px;font-weight:750}.flowrow button[aria-pressed=true],.flowstep[aria-pressed=true]{background:var(--kg-primary);color:#fff;border-color:var(--kg-primary)}.arrow{align-self:center;color:#68927A}
.branch{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px}.branch>div,.branch-col{padding:18px;background:#FFF3D4;border-radius:16px;font-size:14px}.branch p{font-size:13px}.timeline{display:grid;grid-template-columns:.85fr 1.4fr;gap:24px}.steps{display:flex;flex-direction:column;gap:10px}
.step,.stepbtn{display:flex;align-items:center;gap:14px;text-align:left;padding:18px;border:1px solid #DCE8DF;border-radius:16px;background:#fff;color:#294C3B;font-weight:750}.step[aria-pressed=true],.stepbtn[aria-pressed=true]{background:var(--kg-primary);color:#fff;border-color:var(--kg-primary)}.num{font-size:14px;background:#E3F2E9;color:#28624E;padding:7px 10px;border-radius:10px}.detail{padding:14px;border-radius:16px;margin-top:10px}.detail strong{font-size:14px}.detail p{font-size:15px}
.check{display:flex;align-items:flex-start;gap:12px;padding:10px 0;border-bottom:1px solid #E2E9E0;font-size:15px;cursor:pointer}.check input{width:19px;height:19px;flex-shrink:0;margin-top:4px;accent-color:var(--kg-primary)}.check:has(input:checked) span{text-decoration:line-through;color:#718176}
.faq{padding:0;margin-bottom:12px}.faq summary{padding:21px 26px;font-weight:750}.faq p{padding:0 26px 24px;font-size:15px}
.next{background:var(--kg-dark);color:#fff;padding:30px 34px;border:1px solid #2A6259;border-radius:26px}.next h2{color:#fff}.next .eyebrow{color:#F2D181}.next .head{border-bottom:1px solid #FFFFFF22;padding-bottom:20px}.nextcard{background:#FFFFFF06;border:1px solid #FFFFFF24;border-radius:19px;padding:20px;display:flex;flex-direction:column;min-width:0}.nextcard .icon{background:#FFFFFF12}.nextcard h3{color:#fff}.nextcard p{color:#C9DED1;font-size:14px;margin-bottom:16px}.nextcard small,.nextcard .action{color:#F2D181;margin-top:auto}.nextcard.live{background:#3D806D;border-color:#E3BC62}.nextcard[href]:hover{border-color:#7FB6A1}
/* Shared footer */
.schoolfooter{background:var(--kg-dark);border:1px solid #2A6259;border-radius:26px;padding:36px 40px;margin:44px 0 28px;color:#fff}.schoolfooter .footerupper{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-bottom:28px;border-bottom:1px solid #FFFFFF1A}.footerbrand{flex:1;min-width:0}.footerkicker{font-size:12px;font-weight:800;color:#fff}.schoolfooter h3{font-size:24px;font-weight:850;margin:5px 0;color:#fff}.schoolfooter p{font-size:12px;color:#C9DED1;margin-top:5px}.footeractions{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:12px;max-width:470px}.footerplanned{display:inline-flex;align-items:center;gap:7px;background:#FFFFFF10;color:#FFDC63;padding:13px 16px;border-radius:12px;font-size:13px;font-weight:800}.schoolfooter .footerbottom{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:22px 0 0;font-size:11px;color:#C9DED1}.footerlinks{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:10px}.footerlinks .switchprimary{color:#FFDC63;font-weight:800}.schoolfooter .footerdisclaimer{margin-top:16px;font-size:11px}.footerlinks a:hover{text-decoration:underline}
@media(max-width:1000px){.grid4{grid-template-columns:repeat(2,minmax(0,1fr))}.brandrow>.pill{display:none}.schoolfooter .footerupper{align-items:flex-start;flex-direction:column}.footeractions{justify-content:flex-start;max-width:none}.schoolfooter .footerbottom{align-items:flex-start;flex-direction:column}.footerlinks{justify-content:flex-start}.hero{grid-template-columns:1.3fr 1fr}.art{font-size:68px}.art span:first-child{font-size:105px}}
@media(max-width:700px){.wrap{padding:0 24px}.hero{grid-template-columns:1fr;padding:24px;gap:18px}.art{width:100%;grid-template-columns:1.2fr 1fr 1fr;font-size:48px;gap:8px}.art span,.art span:first-child{grid-column:auto;min-height:110px;padding:8px 4px}.art span:first-child{font-size:74px}.art span:not(:first-child){font-size:42px}.pathgrid,.timeline,.grid2,.grid3{grid-template-columns:1fr}.head,.section-header{flex-direction:column;align-items:flex-start}.flowrow{flex-direction:column}.arrow{transform:rotate(90deg)}.branch{grid-template-columns:1fr}.card,.flow{padding:22px}.faq{padding:0}.grid4{gap:12px}.brandrow{flex-wrap:wrap;padding-block:12px;gap:10px}.headeractions{width:100%;justify-content:flex-end}.switch{width:100%}.switch button{flex:1;padding:11px 10px;font-size:13px}.schoolfooter{padding:26px 24px}.next{padding:26px 24px}.hero h1{font-size:32px}}
@media(max-width:430px){.headeractions{justify-content:stretch}.districtbtn,.headrank{flex:1;white-space:normal;text-align:center}.switch button{font-size:12px;padding-inline:7px}}
@media(max-width:380px){.wrap{padding:0 16px}.grid4{grid-template-columns:1fr}.hero h1{font-size:28px}.art{font-size:36px}.art span:first-child{font-size:60px}.art span:not(:first-child){font-size:32px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}