:root{

  --green:#0B2440; --green-dark:#071A30; --gold:#C9A227; --gold-soft:#F4EAD0;
  --bg:#F3EFE6; --card:#FFFDF8; --ink:#1D2A38; --muted:#6E7C8B;
  --ok:#1E7A46; --bad:#B3261E; --radius:16px;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
body{
  margin:0; padding:0; background:linear-gradient(180deg,#FAF7EF 0%,var(--bg) 45%,#EAE3D0 100%); background-attachment:fixed; color:var(--ink);
  font-family:Tahoma, "Segoe UI", "Noto Sans", "IRANSans", sans-serif;
  line-height:1.9;
}
.wrap{max-width:480px; margin:0 auto; padding:16px 16px 48px;}
header.hero{
  background:linear-gradient(135deg, var(--green-dark), var(--green) 55%, #12365E);
  color:#fff; border-radius:var(--radius); padding:18px 18px 16px; text-align:center;
  box-shadow:0 4px 14px rgba(7,26,48,.25); margin-bottom:16px;
  border-bottom:3px solid var(--gold);
}
header.hero h1{margin:0 0 6px; font-size:24px;}
header.hero h1 .gold{color:var(--gold);}
header.hero p{margin:0; font-size:14px; opacity:.92;}
.card{
  background:var(--card); border-radius:var(--radius); padding:20px;
  border:1px solid #E9E1CC; box-shadow:0 2px 10px rgba(11,36,64,.07); margin-bottom:16px;
}
.screen{display:none;}
.screen.active{display:block;}
.progress-outer{background:#E3DCC8; border-radius:99px; height:14px; overflow:hidden; margin:10px 0 6px;}
.progress-inner{background:linear-gradient(90deg, var(--gold), #9A7B1E); height:100%; width:0%; transition:width .4s;}
.progress-label{font-size:13px; color:var(--muted); text-align:center;}
.btn{
  display:block; width:100%; border:none; border-radius:14px;
  padding:15px; font-size:18px; font-family:inherit; cursor:pointer;
  margin:8px 0; transition:transform .08s;
}
.btn:active{transform:scale(.98);}
.btn-primary{background:var(--green); color:#fff; font-weight:bold;}
.btn-gold{background:var(--gold); color:#0B2440; font-weight:bold;}
.btn-ghost{background:#EAE3D0; color:var(--ink);}
.btn:disabled{opacity:.55; cursor:default;}
.btn-row{display:flex; gap:10px;}
.btn-row .btn{margin:4px 0;}
.word-big{
  font-size:44px; font-weight:bold; text-align:center; margin:8px 0 2px;
  letter-spacing:1px; color:var(--green-dark);
}
.sentence-big{
  font-size:25px; font-weight:bold; text-align:center; margin:10px 0 4px;
  line-height:1.7; color:var(--green-dark);
}
.word-fa{text-align:center; color:var(--muted); font-size:17px; margin-bottom:8px;}
.group-tag{
  display:inline-block; background:var(--gold-soft); color:#0B2440;
  border-radius:99px; padding:2px 14px; font-size:13px; font-weight:bold; margin-bottom:6px;
}
.tip{
  background:#F6F2E7; border-right:4px solid var(--gold); border-radius:8px;
  padding:10px 12px; font-size:14.5px; margin:12px 0;
}
.tip b{color:var(--green-dark);}
.status{
  min-height:52px; text-align:center; font-size:16px; margin:10px 0; padding:8px;
  border-radius:10px;
}
.status.listening{background:#EEF2F7; color:#0B2440; animation:pulse 1.2s infinite;}
.status.ok{background:#EAF4EE; color:var(--ok); font-weight:bold;}
.status.no{background:#fdeceb; color:var(--bad);}
.status.info{background:#EEF1F5; color:#445;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.55;}}
.heard{font-size:14px; color:var(--muted);}
.heard span{direction:ltr; unicode-bidi:embed; font-weight:bold; color:var(--ink);}
.group-item{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:var(--card); border-radius:14px; padding:14px 16px; margin-bottom:10px; min-height:76px;
  border:1px solid #E9E1CC; box-shadow:0 2px 8px rgba(11,36,64,.06); cursor:pointer;
}
.group-item:active{border-color:var(--gold);}
.group-item .t{font-weight:bold; font-size:16px; line-height:1.6;}
.group-item .s{font-size:13px; color:var(--muted); line-height:1.7;}
.group-item .n{
  background:var(--green); color:#fff; border-radius:99px; min-width:72px; flex-shrink:0;
  text-align:center; font-size:13px; padding:4px 10px;
}
.group-item.done-all .n{background:var(--gold); color:#0B2440;}
.back{background:none; border:none; color:var(--green-dark); font-size:16px;
  font-family:inherit; cursor:pointer; padding:6px 0; margin-bottom:8px; font-weight:bold;}
.streak{text-align:center; font-size:15px; margin:6px 0;}
.honest{
  font-size:12.5px; color:var(--muted); text-align:center; margin-top:14px;
  background:#fff; border-radius:10px; padding:8px 12px;
}
.skip{display:block; text-align:center; color:var(--muted); font-size:14px;
  background:none; border:none; font-family:inherit; cursor:pointer; margin:10px auto 0; text-decoration:underline;}
.next-wrap{margin-top:6px;}
.hidden{display:none !important;}
.btn-shadow-on{background:#F6F2E7 !important; border:2px solid var(--green); color:var(--green-dark);}
.diff-title{font-size:15px; font-weight:bold; margin-bottom:6px;}
.diff-sent{background:#F8F6F0; border-radius:10px; padding:10px 12px; font-size:20px; line-height:2.1; margin-bottom:10px;}
.dw-ok{color:var(--ok);}
.dw-wrong{color:var(--bad); font-weight:bold; background:#fdeceb; border-radius:6px; padding:0 6px;}
.dw-miss{color:#8E9CA9; border-bottom:2px dotted #8E9CA9;}
.prob-box{background:#FDFBF5; border:2px solid var(--gold); border-radius:12px; padding:12px; margin:10px 0; text-align:right;}
.prob-title{font-weight:bold; font-size:16px; margin-bottom:8px; color:#0B2440;}
.prob-row{display:flex; align-items:center; gap:8px; background:#fff; border-radius:10px; padding:12px 14px; margin-bottom:8px; box-shadow:0 1px 4px rgba(11,36,64,.06);}
.prob-word{font-size:22px; font-weight:bold; color:var(--bad);}
.prob-heard{font-size:13px; color:var(--muted); flex:1;}
.mini-listen{border:none; border-radius:10px; background:var(--gold); color:#0B2440; font-family:inherit; font-size:14px; font-weight:bold; padding:8px 12px; cursor:pointer; white-space:nowrap;}
.prof-sec{margin:16px 0;}
.prof-sec h3{font-size:16px; margin:0 0 8px;}
.prof-row{display:flex; justify-content:space-between; padding:7px 0; border-bottom:1px dashed #E3DCC8; font-size:15px;}
.gbar-outer{height:8px; background:#eee; border-radius:6px; overflow:hidden; margin-top:4px;}
.gbar-inner{height:100%; background:linear-gradient(90deg,var(--green),var(--green-dark)); border-radius:6px;}
.hist-row{display:flex; gap:8px; justify-content:center; margin-top:8px;}
.hist-day{display:flex; flex-direction:column; align-items:center; gap:4px; font-size:11px; color:var(--muted);}
.dot{width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:bold;}
.dot-full{background:#F6F2E7; border:2px solid var(--green); color:var(--green-dark);}
.dot-part{background:#FDFBF5; border:2px solid var(--gold); color:#0B2440;}
.dot-none{background:#f1f1f1; border:2px solid #ddd; color:#bbb;}
.vv-pair{background:var(--card); border-radius:var(--radius); padding:14px; border:1px solid #E9E1CC; box-shadow:0 2px 10px rgba(11,36,64,.07); margin-bottom:14px;}
.vv-pair-title{text-align:center; font-weight:bold; font-size:16px; margin-bottom:10px; color:var(--green-dark);}
.vv-two{display:flex; gap:10px;}
.vv-cell{flex:1; text-align:center; cursor:pointer; border-radius:12px; padding:6px; border:3px solid transparent; transition:border-color .15s, background .15s;}
.vv-cell img{width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:10px; display:block;}
.vv-cell.speaking{border-color:var(--gold); background:#FBF3DA;}
.vv-word{font-size:26px; font-weight:bold; color:var(--green-dark); direction:ltr; margin-top:6px;}
.vv-fa{font-size:15px; color:var(--muted);}
.vv-spk{margin-top:2px; font-size:18px;}
.sec-card{padding:24px 18px; text-align:center;}
.sec-big{
  display:block; width:100%; border:none; border-radius:16px; cursor:pointer;
  padding:24px 18px; font-size:22px; font-family:inherit; font-weight:bold;
  margin:6px 0 4px; transition:transform .08s; line-height:1.6;
}
.sec-big:active{transform:scale(.98);}
.sec-sub{font-size:14.5px; color:var(--muted); text-align:center; margin-top:6px; line-height:1.9;}
.hero-stats{margin-top:10px; background:rgba(255,255,255,.14); border-radius:12px; padding:8px 12px;}
.hero-stats .streak{color:#fff; margin:2px 0; font-size:14px;}
.hero-stats .progress-outer{background:rgba(255,255,255,.35);}
.hero-stats .progress-label{color:#F4EAD0;}
.step-num{
  background:var(--gold); color:#0B2440; border-radius:99px; width:38px; height:38px;
  display:flex; align-items:center; justify-content:center; font-weight:bold; font-size:16px; margin-left:10px; flex-shrink:0;
}
.step-item{display:flex; align-items:center;}

.today-card{
  background:linear-gradient(135deg, var(--green-dark), var(--green) 55%, #12365E);
  color:#fff; border-radius:var(--radius); padding:18px; margin-bottom:16px;
  border-bottom:3px solid var(--gold); box-shadow:0 4px 14px rgba(7,26,48,.25); text-align:center;
}
.today-who{font-size:18px; font-weight:bold;}
.today-who b{color:var(--gold);}
.today-line{font-size:16.5px; margin:6px 0 8px;}
.today-btn{font-size:20px; padding:16px; margin:6px 0 0;}
.iw-row{
  background:#fff; border-radius:12px; padding:12px 14px; margin-bottom:10px;
  box-shadow:0 1px 5px rgba(0,0,0,.06); border:2px solid transparent;
}
.iw-row.speaking{border-color:var(--gold); background:#FBF3DA;}
.iw-word{font-size:26px; font-weight:bold; color:var(--green-dark); direction:ltr; text-align:left; cursor:pointer;}
.iw-fa{font-size:15px; color:var(--muted); cursor:pointer;}
.iw-ex{font-size:16.5px; direction:ltr; text-align:left; color:var(--ink); margin-top:6px; cursor:pointer; line-height:1.6;}
.iw-ex:active{color:var(--green-dark);}
.hw-text{
  width:100%; min-height:96px; padding:12px; font-size:16.5px; font-family:inherit;
  border:2px solid var(--gold); border-radius:12px; background:#fff; line-height:1.9; resize:vertical;
}
.hw-state{font-size:14.5px; text-align:center; margin-top:6px; color:var(--muted);}
.hw-state.done{color:var(--ok); font-weight:bold;}
.hw-model{
  direction:ltr; text-align:center; font-size:20px; font-weight:bold; color:var(--green-dark);
  background:#F8F6F0; border-radius:10px; padding:12px; margin:8px 0; line-height:1.6;
}
.hw-heard{font-size:14.5px; color:var(--muted); text-align:center; min-height:24px;}
.hw-heard span{direction:ltr; unicode-bidi:embed; font-weight:bold; color:var(--ink);}
.hw-sec-title{font-size:18px; font-weight:bold; color:var(--green-dark); margin:4px 0 8px;}
.hw-task{font-size:15.5px; margin-bottom:8px;}

.lesson-card{border-top:4px solid var(--gold);}
#hw-lesson{border-top:4px solid var(--green);}
.lesson-head{margin-bottom:12px;}
.lh-top{display:flex; align-items:center; justify-content:space-between; gap:10px;}
.lh-top .group-tag{margin-bottom:0;}
.lh-step{font-size:13.5px; font-weight:bold; color:var(--muted); white-space:nowrap;}
.lh-bar{background:#E7E0CC; border-radius:99px; height:6px; overflow:hidden; margin-top:10px;}
.lh-bar-fill{background:linear-gradient(90deg, var(--gold), #9A7B1E); height:100%; width:0%; border-radius:99px; transition:width .4s;}
.next-lesson-wrap{margin:2px 0 14px;}
.next-lesson-wrap .btn{box-shadow:0 3px 10px rgba(11,36,64,.18);}
footer.note{text-align:center; font-size:12px; color:var(--muted); margin-top:18px;}

/* Diagnostic mini-test (diag.js) */
.diag-sec-head{font-weight:bold; font-size:17px; color:var(--navy,#0B2440); margin:6px 0 10px;}
.diag-fa{font-size:15px; margin-bottom:12px;}
.diag-fa-sm{font-size:13.5px; color:var(--muted);}
.diag-q{margin:14px 0;}
.diag-qt{font-size:16px; font-weight:bold; text-align:left; margin-bottom:8px;}
.diag-opt{display:block; width:100%; text-align:left; margin:6px 0; padding:12px 14px; border-radius:12px; border:2px solid #D8D2BE; background:#F6F2E7; color:var(--ink); font-size:15.5px; cursor:pointer;}
.diag-opt.sel{border-color:var(--gold,#C9A227); background:#FBF3D9; font-weight:bold;}
.diag-fill{width:100%; box-sizing:border-box; padding:12px 14px; border-radius:12px; border:2px solid #D8D2BE; font-size:16px; text-align:left;}
.diag-pass-title{font-size:17px; font-weight:bold; text-align:left; margin:8px 0;}
.diag-passage{font-size:16px; line-height:1.75; text-align:left; background:#F6F2E7; border-radius:12px; padding:14px; margin-bottom:8px;}
.diag-bigq{font-size:19px; font-weight:bold; text-align:left; margin:10px 0 14px;}
.diag-write{min-height:110px;}
.diag-play,.diag-next,.diag-again,.diag-ava,.diag-spoke{width:100%; margin:8px 0;}
.diag-spoke.sel{border:2px solid var(--gold,#C9A227); background:#FBF3D9; font-weight:bold;}
.diag-line{font-size:16px; margin:7px 0;}
.diag-strong{font-size:16.5px; margin:12px 0 6px;}
.diag-rev-t{font-weight:bold; margin:10px 0 4px;}
.diag-rev{font-size:14.5px; margin:8px 0; padding:9px 11px; background:#F6F2E7; border-radius:10px;}
#diag-done-note{font-size:15px; margin:10px 0; padding:10px 12px; background:#EDF5E9; border-radius:12px;}
/* Diagnostic improvement pass (diag2): match rows, self-check, evidence, routing */
.diag-sub{margin:10px 0;}
.diag-sub-t{font-size:15px; font-weight:bold; text-align:left; margin-bottom:4px;}
.diag-mopt{display:block; width:100%; text-align:left; margin:5px 0; padding:10px 12px; border-radius:12px; border:2px solid #D8D2BE; background:#FFFDF6; color:var(--ink); font-size:15px; cursor:pointer;}
.diag-mopt.sel{border-color:var(--gold,#C9A227); background:#FBF3D9; font-weight:bold;}
.diag-ev{display:block; margin-top:5px; font-size:13.5px; color:var(--muted);}
.diag-checks{margin:12px 0 4px;}
.diag-check{display:flex; align-items:center; gap:9px; font-size:15px; margin:10px 0; cursor:pointer;}
.diag-check input{width:20px; height:20px; accent-color:var(--gold,#C9A227); flex:none;}
.diag-plan{font-size:15px; margin:12px 0 4px;}
.diag-route{width:100%; margin:10px 0;}
.hw-state.done{color:var(--green-dark,#1E6B3A); font-weight:bold;}

/* Declutter pass (tidy 2026-10-26): IELTS step-path chips, quieter intro + secondaries */
.step-chip{
  display:inline-block; background:var(--gold-soft); color:var(--green-dark);
  border-radius:99px; padding:2px 12px; font-size:12.5px; font-weight:bold; margin-bottom:10px;
}
.intro-card{background:#FBF8EF;}
.intro-card .hw-sec-title{font-size:16px;}
.intro-card .tip{margin:10px 0 2px;}
#diag-start{font-size:19px; padding:16px; margin-top:12px;}
/* IELTS ladder step 2 (listen pack): exercise blocks inside the listen card */
#listen-done-note{font-size:15px; margin:10px 0; padding:10px 12px; background:#EDF5E9; border-radius:12px;}
#listen3-done-note{font-size:15px; margin:10px 0; padding:10px 12px; background:#EDF5E9; border-radius:12px;}
#read3-done-note{font-size:15px; margin:10px 0; padding:10px 12px; background:#EDF5E9; border-radius:12px;}
#write3-done-note{font-size:15px; margin:10px 0; padding:10px 12px; background:#EDF5E9; border-radius:12px;}
.lp-ex{margin-top:18px; padding-top:14px; border-top:1px solid #E7E0CC;}
.lp-ex-head{font-weight:bold; font-size:17px; color:var(--navy,#0B2440); margin:6px 0 10px;}
.lp-check{width:100%; margin:10px 0;}
.lp-score{font-size:16.5px; margin:12px 0 6px;}
/* Listening level 2 (l2listen 2026-10-26): band-target labels + section head */
.lp-band{display:inline-block; background:var(--gold-soft,#F3E9C8); color:var(--green-dark,#1E6B3A); border-radius:99px; padding:3px 12px; font-size:13.5px; font-weight:bold; margin:12px 0 2px;}
.lp-l2-head{font-weight:bold; font-size:19px; color:var(--navy,#0B2440); margin:30px 0 4px; padding-top:16px; border-top:2px solid var(--gold,#C9A227);}
/* Plan card motto (Cyrus 2026-10-26) */
.plan-motto{margin-top:12px; padding:10px 12px; background:#EDF5E9; border-radius:12px; font-size:14.5px; text-align:center;}
#btn-listen{font-size:16px;}
.btn-row .btn{padding:13px;}
/* IELTS ladder step 4 (write pack): HTML/CSS bar chart, guide, model, phrases */
#write-done-note{font-size:15px; margin:10px 0; padding:10px 12px; background:#EDF5E9; border-radius:12px;}
.wp-chart{background:#F6F2E7; border-radius:12px; padding:14px; margin:10px 0;}
.wp-chart-title{font-weight:bold; font-size:15.5px; text-align:left; margin-bottom:12px;}
.wp-bars{display:flex; align-items:stretch; gap:16px; height:180px; border-bottom:2px solid #D8D2BE; padding:0 4px;}
.wp-group{flex:1; display:flex; flex-direction:column; min-width:0;}
.wp-group-bars{flex:1; display:flex; align-items:flex-end; justify-content:center; gap:8px;}
.wp-bar-col{display:flex; flex-direction:column; justify-content:flex-end; align-items:center; height:100%; width:42px;}
.wp-bar-v{font-size:12px; font-weight:bold; margin-bottom:3px; white-space:nowrap;}
.wp-bar{width:34px; border-radius:6px 6px 0 0;}
.wp-bar.s0{background:#9FB4C7;}
.wp-bar.s1{background:var(--gold,#C9A227);}
.wp-group-label{text-align:center; font-size:13.5px; font-weight:bold; padding-top:7px;}
.wp-legend{font-size:13px; margin-top:9px; text-align:left;}
.wp-key{display:inline-block; width:12px; height:12px; border-radius:3px; margin:0 4px 0 10px; vertical-align:-1px;}
.wp-key.s0{background:#9FB4C7;}
.wp-key.s1{background:var(--gold,#C9A227);}
.wp-guide{background:#FBF8EF; border-radius:12px; padding:12px 14px; margin:12px 0;}
.wp-guide-t{font-weight:bold; margin-bottom:6px; font-size:15px;}
.wp-guide-line{font-size:14.5px; margin:5px 0;}
.wp-model{margin:10px 0;}
.wp-model-text p{text-align:left; line-height:1.8; font-size:16px;}
.wp-ph{background:#FBEFC4; border-radius:4px; padding:0 3px; font-weight:bold;}
.wp-phrases{margin-top:8px;}
.wp-phrase-row{font-size:14.5px; margin:6px 0;}
.wp-phrase-row b{color:var(--green-dark);}
.wp-write-hint{font-size:15px; font-weight:bold; margin:14px 0 8px;}
.wp-text{min-height:130px; text-align:left;}
/* IELTS ladder step 5 (speaking pack): cue card, model label, said button */
.sp-label{font-weight:bold; font-size:15px; margin:12px 0 6px;}
.sp-play{width:100%; margin:8px 0;}
.sp-cue{background:#FFFDF4; border:2px solid var(--gold,#C9A227); border-radius:12px; padding:14px 16px; margin:8px 0 10px; text-align:left;}
.sp-cue-title{font-size:17px; font-weight:bold; margin-bottom:8px;}
.sp-cue-say{font-size:14px; color:#555; margin-bottom:4px;}
.sp-cue-list{margin:0; padding-left:20px; font-size:15.5px; line-height:1.7;}
.sp-said-row{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:6px;}
.sp-said.done{background:#2E7D32; border-color:#2E7D32; color:#fff;}
.sp-ava{margin-top:20px; padding-top:14px; border-top:1px solid #E7E0CC;}
.sp-ava-btn{display:block; text-align:center; text-decoration:none; margin-top:10px;}

/* timed mini-mock (ladder step 6) */
.mock-timer{font-size:26px; font-weight:bold; color:var(--gold); text-align:center; margin:10px 0 4px; direction:ltr;}
.mock-timeup{background:#F6F2E7; border-right:4px solid var(--gold); border-radius:8px; padding:9px 11px; font-size:14.5px; margin:8px 0;}
.mock-mist-line{font-size:15px; margin:6px 0;}
.mock-mist-list{font-size:14.5px; color:var(--muted); margin:4px 0 2px 0; line-height:1.9;}

/* Bands home + level pages (bands 2026-10-26): slim hero, zone labels,
   gold-on-navy level bands stacked 3 -> 8, level-page section heads,
   honest "coming soon" cards and ready-now link cards. */
.hero-slim{padding:14px 16px 12px; margin-bottom:14px;}
.zone-label{font-weight:bold; font-size:16.5px; color:var(--green-dark); margin:22px 2px 10px;}
.lvl-band{
  display:block; text-decoration:none; color:#fff; border-radius:var(--radius);
  padding:24px 18px; margin-bottom:14px;
  background:linear-gradient(135deg, var(--green-dark), var(--green) 55%, #12365E);
  border-bottom:3px solid var(--gold); box-shadow:0 4px 14px rgba(7,26,48,.25);
  transition:transform .08s;
}
.lvl-band:active{transform:scale(.99);}
.lvl-band .lb-title{font-size:23px; font-weight:bold; color:var(--gold); line-height:1.5;}
.lvl-band .lb-title .fa{color:#fff;}
.lvl-band .lb-en{font-size:15px; margin-top:8px; text-align:left; line-height:1.6; opacity:.95;}
.lvl-band .lb-fa{font-size:15px; margin-top:3px; line-height:1.8; opacity:.95;}
.lvl-band .lb-go{margin-top:10px; font-size:14.5px; color:var(--gold); font-weight:bold;}
.lvl-sec-head{font-weight:bold; font-size:17.5px; color:var(--green-dark); margin:24px 2px 10px;}
.lvl-sec-head span{color:var(--green);}
a.back{display:inline-block; text-decoration:none;}
.soon-pill{
  display:inline-block; background:var(--gold-soft); color:var(--green-dark);
  border-radius:99px; padding:4px 14px; font-size:14.5px; font-weight:bold; margin-bottom:10px;
}
.lvl-links .btn{text-decoration:none;}

/* Words & Slang section (words.html, 2026-10-27) */
#words-done-note{margin-top:10px; font-size:14.5px; color:var(--green-dark); background:#F3EDD8; border-radius:10px; padding:10px 12px;}
.ws-en{font-size:15px; direction:ltr; text-align:left; color:var(--ink); margin-top:2px;}
.ws-line{font-size:13.5px; color:var(--muted); margin-top:6px; line-height:1.7;}
.ws-line span{direction:ltr; unicode-bidi:embed;}
.ws-said{margin-top:8px; font-size:14px; padding:8px 16px;}
.iw-row.said{border-color:var(--gold); background:#FBF3DA;}
.ws-note{font-size:13.5px; color:var(--muted); margin:8px 0;}
.ws-note a{color:var(--green-dark);}
.ws-video{position:relative; padding-top:56.25%; border-radius:12px; overflow:hidden; background:#000;}
.ws-video iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}

/* Homepage redesign (2026-10-27): professional reskin of #screen-home ONLY.
   Every rule is scoped to #screen-home or to new .hm-* classes that exist
   only on the home screen, so the course screens and the level/words
   pages (same style.css) are untouched. The hero keeps the shared navy
   gradient and the level bands keep their gold-on-navy colours. */
.hm-hero{padding:26px 20px 20px; text-align:center;}
.hm-hero-top{display:flex; align-items:center; justify-content:center; gap:12px;}
.hm-logo{width:62px; height:62px; object-fit:cover; border-radius:16px; flex:none;
  border:2px solid rgba(201,162,39,.65); box-shadow:0 6px 16px rgba(0,0,0,.30);}
.hm-brand{text-align:right;}
.hm-brand-en{font-size:19px; font-weight:bold; letter-spacing:.3px; line-height:1.45;}
.hm-brand-en .gold{color:var(--gold);}
.hm-brand-fa{font-size:13px; opacity:.85; line-height:1.6;}
#screen-home .hm-promise{font-size:27px; font-weight:bold; line-height:1.6; margin:18px 0 4px;}
#screen-home .hm-promise-en{font-size:14.5px; opacity:.92; margin:0;}
#screen-home #home-hello{margin-top:10px; font-size:16px; font-weight:bold;}
.hm-hero-cta{display:flex; gap:10px; margin:16px 0 6px;}
.hm-cta{
  flex:1; display:block; text-align:center; text-decoration:none; cursor:pointer;
  border-radius:14px; padding:13px 8px; font-size:16px; font-weight:bold; line-height:1.6;
  transition:transform .08s;
}
.hm-cta:active{transform:scale(.98);}
.hm-cta-gold{background:var(--gold); color:#0B2440; box-shadow:0 6px 16px rgba(0,0,0,.25);}
.hm-cta-ghost{background:rgba(255,255,255,.13); color:#fff; border:1px solid rgba(255,255,255,.45);}
#screen-home .hero-stats{margin-top:14px; border-radius:14px; padding:10px 14px;}
.hm-sec-head{
  display:flex; align-items:center; gap:10px; margin:28px 2px 12px;
  border-bottom:2px solid var(--gold-soft); padding-bottom:9px;
}
.hm-sec-head::before{content:""; width:5px; height:22px; border-radius:99px; background:var(--gold); flex:none;}
.hm-sec-head h2{font-size:20px; margin:0; color:var(--green-dark); line-height:1.5;}
.hm-sec-head span{font-size:11.5px; color:#9A7B1E; font-weight:bold; letter-spacing:1.6px; margin-right:auto;}
.hm-steps{display:grid; gap:10px;}
.hm-step{
  display:flex; gap:13px; align-items:flex-start; text-decoration:none; color:var(--ink);
  background:#fff; border:1px solid #E9E1CC; border-radius:16px; padding:15px 16px;
  box-shadow:0 2px 8px rgba(11,36,64,.05); transition:transform .08s;
}
.hm-step:active{transform:scale(.99);}
.hm-step-num{
  flex:none; width:38px; height:38px; border-radius:50%; background:var(--gold);
  color:#0B2440; font-weight:bold; font-size:18px; line-height:1;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 3px 8px rgba(154,123,30,.35);
}
.hm-step-t{font-weight:bold; font-size:16.5px; color:var(--green-dark); line-height:1.6;}
.hm-step-s{font-size:14px; color:var(--muted); line-height:1.85;}
#screen-home .hm-card{
  background:#fff; border:1px solid #E7DFC9; border-radius:20px;
  box-shadow:0 6px 20px rgba(11,36,64,.07); padding:22px 20px;
}
.hm-feature{text-align:center;}
.hm-art{margin:-4px 0 12px;}
.hm-art svg{width:100%; height:auto; display:block; border-radius:14px;}
#screen-home .lvl-band{border-radius:20px; padding:26px 20px;}
#screen-home footer.note{margin-top:28px;}

/* ===== V2 FRONT DOOR (2026-10-27, mockup-v2 applied) — every rule scoped to
   #screen-home so the app screens, cards and bands keep their own styles.
   Class names carry a z prefix to avoid collisions with app classes. ===== */
body:has(#screen-home.active) .wrap{max-width:1140px;}
#screen-home{--znavy:#081c30;--znavy2:#0d2a47;--znavy3:#123a5f;--zgold:#c9a227;--zgold2:#e7c65a;--zgold-soft:#f3e5bd;--zpaper:#fffdf8;--zmuted:#5d6b7a;--zline:#e7ddc6;--zshadow:0 18px 44px rgba(8,28,48,.12);--zshadow-lg:0 30px 70px rgba(8,28,48,.22);--zr:20px;font-size:16.5px;line-height:1.8;}
#screen-home .zwrap{max-width:1060px;margin:0 auto;padding:0 20px;}
#screen-home .zen{font-family:"Segoe UI",system-ui,sans-serif;letter-spacing:.14em;}
#screen-home a{text-decoration:none;color:inherit;}
#screen-home .zsec{padding:56px 0;}
#screen-home .zband-white{background:var(--zpaper);margin:0 -16px;padding-inline:16px;border-radius:22px;}
#screen-home .zband-navy{background:linear-gradient(160deg,var(--znavy2),var(--znavy) 70%);color:#eef3f9;margin:0 -16px;padding-inline:16px;border-radius:22px;}
/* nav */
#screen-home .znav{position:sticky;top:0;z-index:60;background:rgba(255,253,248,.94);backdrop-filter:blur(14px);border:1px solid var(--zline);border-radius:18px;padding:10px 16px;margin-bottom:18px;}
#screen-home .znav-in{display:flex;align-items:center;gap:18px;}
#screen-home .zbrand{display:flex;align-items:center;gap:12px;min-width:0;}
#screen-home .zlogo{width:46px;height:46px;flex:0 0 46px;border-radius:12px;object-fit:cover;border:1px solid rgba(201,162,39,.55);box-shadow:0 8px 20px rgba(8,28,48,.25);}
#screen-home .zbrand b{font-size:17.5px;color:var(--znavy);display:block;line-height:1.35;white-space:nowrap;}
#screen-home .zbrand span{font-size:10px;color:var(--zgold);letter-spacing:.26em;font-weight:700;display:block;}
#screen-home .znav-links{display:flex;gap:22px;margin-inline-start:auto;font-size:15px;font-weight:600;color:var(--znavy2);}
#screen-home .znav-links a{padding:6px 2px;border-bottom:2px solid transparent;}
#screen-home .znav-links a:hover{border-color:var(--zgold);color:var(--znavy);}
#screen-home .zbtn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border-radius:999px;font-weight:800;font-size:16px;padding:14px 30px;transition:transform .18s ease,box-shadow .18s ease;cursor:pointer;border:0;font-family:inherit;}
#screen-home .zbtn-gold{background:linear-gradient(135deg,var(--zgold2),var(--zgold));color:var(--znavy);box-shadow:0 14px 30px rgba(201,162,39,.38);}
#screen-home .zbtn-gold:hover{transform:translateY(-2px);}
#screen-home .zbtn-ghost{border:1.6px solid rgba(255,255,255,.75);color:#fff;background:rgba(255,255,255,.06);}
#screen-home .zbtn-ghost:hover{background:rgba(255,255,255,.14);}
#screen-home .zbtn-navy{background:var(--znavy);color:#fff;}
#screen-home .zbtn-sm{padding:10px 22px;font-size:14.5px;}
#screen-home .znav .zbtn{margin-inline-start:6px;}
/* hero */
#screen-home header.hero.zhero{position:relative;text-align:start;padding:0;border-radius:22px;overflow:hidden;border-bottom:none;margin-bottom:0;background:var(--znavy);box-shadow:var(--zshadow-lg);color:#fff;}
#screen-home .zhero-bg{position:absolute;inset:0;}
#screen-home .zhero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 38%;}
#screen-home .zhero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(to left,rgba(6,20,36,.90) 26%,rgba(6,20,36,.70) 55%,rgba(6,20,36,.45) 100%);}
/* Full-bleed hero (2026-10-28, owner): the hero photo spans the FULL
   viewport width, edge to edge — no cream side bands, no boxed column —
   at full hero height, cover-cropped (.zhero-bg already fills the hero).
   The text column (.zwrap) stays centred and readable; the rest of the
   page keeps its layout. Browser form only — the app-form reset follows
   in the same block so the app hero keeps its rounded card look. */
body:has(#screen-home.active){overflow-x:clip;}
#screen-home header.hero.zhero{width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);border-radius:0;}
html.app-mode #screen-home header.hero.zhero{width:auto;margin-left:0;margin-right:0;border-radius:22px;}
#screen-home .zhero-in{position:relative;z-index:2;padding:58px 0 44px;max-width:660px;}
#screen-home .zchip{display:inline-flex;align-items:center;gap:8px;border:1px solid rgba(231,198,90,.65);color:var(--zgold2);border-radius:999px;padding:6px 16px;font-size:12px;font-weight:700;letter-spacing:.16em;background:rgba(8,28,48,.5);}
#screen-home .zhero h1{font-size:clamp(34px,5vw,54px);line-height:1.35;font-weight:900;margin:22px 0 8px;text-shadow:0 4px 30px rgba(0,0,0,.35);color:#fff;}
#screen-home .zhero h1 .zg{color:var(--zgold2);}
#screen-home .zhero .zsub-en{font-size:16.5px;color:#dfe9f4;letter-spacing:.04em;line-height:1.65;font-weight:600;}
#screen-home .zhero p.zlead{margin-top:18px;font-size:17px;color:#eef3f9;max-width:620px;}
#screen-home #home-hello{margin-top:14px;font-size:17px;font-weight:700;color:var(--zgold2);}
#screen-home .zhero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px;}
#screen-home .zhero .hero-stats{margin-top:26px;max-width:520px;}
#screen-home .zdoors{position:relative;z-index:2;border-top:1px solid rgba(255,255,255,.16);background:rgba(5,17,29,.55);backdrop-filter:blur(6px);}
#screen-home .zdoors .zwrap{display:grid;grid-template-columns:repeat(4,1fr);}
#screen-home .zhdoor{padding:16px 10px;text-align:center;color:#eaf1f8;font-weight:700;font-size:15.5px;border-inline-start:1px solid rgba(255,255,255,.12);}
#screen-home .zhdoor:first-child{border-inline-start:0;}
#screen-home .zhdoor small{display:block;color:var(--zgold2);font-size:10.5px;letter-spacing:.24em;font-weight:700;margin-top:2px;}
#screen-home .zhdoor:hover{background:rgba(255,255,255,.07);}
/* section heads */
#screen-home .zhead{max-width:780px;margin-bottom:38px;}
#screen-home .zhead.center{margin-inline:auto;text-align:center;}
#screen-home .zlabel{color:var(--zgold);font-weight:800;font-size:12px;letter-spacing:.28em;margin-bottom:10px;}
#screen-home .zhead h2{font-size:clamp(27px,3vw,38px);line-height:1.4;color:var(--znavy);font-weight:900;margin:0;}
#screen-home .zhead p{margin-top:12px;color:var(--zmuted);font-size:16.5px;}
#screen-home .zband-navy .zhead h2{color:#fff;}
#screen-home .zband-navy .zhead p{color:#c9d6e4;}
/* pillar cards */
#screen-home .zpillars{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
#screen-home .zpcard{background:#fff;border-radius:var(--zr);overflow:hidden;box-shadow:var(--zshadow);display:flex;flex-direction:column;transition:transform .2s ease,box-shadow .2s ease;}
#screen-home .zpcard:hover{transform:translateY(-6px);box-shadow:var(--zshadow-lg);}
#screen-home .zpcard .zph{height:180px;overflow:hidden;}
#screen-home .zpcard .zph img{width:100%;height:100%;object-fit:cover;}
#screen-home .zpcard .zpb{padding:24px 22px 22px;display:flex;flex-direction:column;gap:8px;flex:1;}
#screen-home .zpcard h3{font-size:22px;color:var(--znavy);font-weight:900;margin:0;}
#screen-home .zpcard h3 .zen{display:block;font-size:11px;color:var(--zgold);letter-spacing:.26em;font-weight:800;margin-top:2px;}
#screen-home .zpcard p{color:var(--zmuted);font-size:14.8px;flex:1;margin:0;}
#screen-home .zmore{font-weight:800;color:var(--znavy);font-size:15px;}
#screen-home .zmore i{font-style:normal;color:var(--zgold);}
/* feature */
#screen-home .zfeature{display:grid;grid-template-columns:1.05fr 1fr;border-radius:26px;overflow:hidden;background:var(--znavy);color:#fff;box-shadow:var(--zshadow-lg);margin-bottom:22px;}
#screen-home .zfeature .zfimg{min-height:340px;}
#screen-home .zfeature .zfimg img{width:100%;height:100%;object-fit:cover;}
#screen-home .zfeature .zfb{padding:44px 40px;display:flex;flex-direction:column;justify-content:center;gap:13px;}
#screen-home .zfeature .ztag{align-self:flex-start;background:rgba(231,198,90,.16);color:var(--zgold2);border:1px solid rgba(231,198,90,.5);padding:5px 15px;border-radius:999px;font-size:12px;font-weight:800;letter-spacing:.1em;}
#screen-home .zfeature h3{font-size:29px;font-weight:900;line-height:1.45;margin:0;}
#screen-home .zfeature p{color:#d7e2ee;font-size:16px;margin:0;}
#screen-home .zflist{list-style:none;display:grid;gap:9px;margin:4px 0 0;padding:0;}
#screen-home .zflist li{padding-inline-start:28px;position:relative;color:#eef3f9;font-size:15.5px;}
#screen-home .zflist li::before{content:"✓";position:absolute;inset-inline-start:0;color:var(--zgold2);font-weight:900;}
#screen-home .zfeature .btn{align-self:flex-start;width:auto;margin:10px 0 0;padding:14px 34px;}
/* duo cards (diag/plan hosts + words/ava) */
#screen-home .zduo{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:22px;}
#screen-home .zduo .card{margin-bottom:0;height:100%;}
#screen-home .zdcard{background:#fff;border:1px solid var(--zline);border-radius:var(--zr);padding:30px 28px;box-shadow:var(--zshadow);display:flex;flex-direction:column;gap:10px;}
#screen-home .zdcard .zic{width:56px;height:56px;border-radius:16px;background:linear-gradient(145deg,var(--znavy2),var(--znavy));display:flex;align-items:center;justify-content:center;}
#screen-home .zdcard .zic svg{width:29px;height:29px;stroke:var(--zgold2);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;}
#screen-home .zdcard h3{font-size:21px;color:var(--znavy);font-weight:900;margin:0;}
#screen-home .zdcard p{color:var(--zmuted);font-size:15.3px;flex:1;margin:0;}
/* steps */
#screen-home .zsteps{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
#screen-home .zstep{background:#fff;border:1px solid var(--zline);border-radius:var(--zr);padding:32px 26px;box-shadow:var(--zshadow);display:block;}
#screen-home .zstep .znum{width:54px;height:54px;border-radius:50%;background:linear-gradient(135deg,var(--zgold2),var(--zgold));color:var(--znavy);font-size:23px;font-weight:900;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 24px rgba(201,162,39,.35);margin-bottom:15px;font-family:Georgia,serif;}
#screen-home .zstep h3{font-size:20px;color:var(--znavy);font-weight:900;margin:0 0 8px;}
#screen-home .zstep p{color:var(--zmuted);font-size:15.3px;margin:0;}
/* teacher */
#screen-home .zteacher{display:grid;grid-template-columns:400px 1fr;gap:48px;align-items:center;}
#screen-home .ztart{border-radius:26px;padding:40px 28px 34px;text-align:center;position:relative;overflow:hidden;background:radial-gradient(120% 120% at 50% 0%,var(--znavy3),var(--znavy) 75%);border:1px solid rgba(201,162,39,.45);box-shadow:var(--zshadow-lg);color:#fff;}
#screen-home .ztart .zava-ring{width:140px;height:140px;margin:0 auto 16px;border-radius:50%;border:2px solid var(--zgold);display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 32%,#1d4e79,var(--znavy) 78%);}
#screen-home .ztart .zava-ring span{font-family:Georgia,serif;font-size:41px;color:var(--zgold2);font-style:italic;}
#screen-home .zwave{display:flex;gap:5px;justify-content:center;align-items:flex-end;height:34px;margin:6px 0 15px;}
#screen-home .zwave i{width:6px;border-radius:4px;background:linear-gradient(var(--zgold2),var(--zgold));display:block;}
#screen-home .ztart b{font-size:23px;display:block;}
#screen-home .ztart small{color:var(--zgold2);letter-spacing:.22em;font-weight:700;font-size:11px;}
#screen-home .zteacher h2{font-size:clamp(27px,2.8vw,36px);font-weight:900;line-height:1.45;color:#fff;margin:0;}
#screen-home .zteacher .ztp{margin-top:15px;color:#cfdce9;font-size:16.5px;}
#screen-home .ztlist{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:11px;}
#screen-home .ztlist li{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:13px 17px;font-size:15.5px;color:#eef3f9;}
#screen-home .ztlist li b{color:var(--zgold2);}
/* travel */
#screen-home .zdest{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;}
#screen-home .zdest a{position:relative;border-radius:18px;overflow:hidden;height:250px;box-shadow:var(--zshadow);display:block;}
#screen-home .zdest a.zwide{grid-column:span 3;}
#screen-home .zdest a.znar{grid-column:span 2;}
#screen-home .zdest img{width:100%;height:100%;object-fit:cover;}
#screen-home .zdest .zcap{position:absolute;inset-inline:0;bottom:0;padding:36px 18px 14px;color:#fff;background:linear-gradient(transparent,rgba(4,14,25,.88));}
#screen-home .zdest .zcap b{font-size:18.5px;display:block;line-height:1.4;}
#screen-home .zdest .zcap span{font-size:10.5px;letter-spacing:.24em;color:var(--zgold2);font-weight:800;}
#screen-home .zprices{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:24px;}
#screen-home .zprice{background:linear-gradient(160deg,var(--znavy2),var(--znavy));color:#fff;border-radius:var(--zr);padding:32px;display:flex;align-items:center;gap:24px;box-shadow:var(--zshadow-lg);flex-wrap:wrap;}
#screen-home .zprice .zamt{font-size:42px;font-weight:900;color:var(--zgold2);line-height:1.1;white-space:nowrap;}
#screen-home .zprice .zamt small{display:block;font-size:13px;color:#cfe0f0;font-weight:700;letter-spacing:.03em;}
#screen-home .zprice h3{font-size:19.5px;font-weight:900;margin:0;}
#screen-home .zprice p{color:#ccd9e7;font-size:14.8px;max-width:400px;margin:0;}
/* visa band */
#screen-home .zvisaband{display:grid;grid-template-columns:380px 1fr;gap:46px;align-items:center;}
#screen-home .zvisaband .zvart{border-radius:24px;overflow:hidden;border:1px solid rgba(201,162,39,.5);box-shadow:var(--zshadow-lg);}
#screen-home .zvisaband .zvart img{width:100%;height:100%;object-fit:cover;}
#screen-home .zvisaband h2{font-size:clamp(26px,2.8vw,36px);font-weight:900;line-height:1.45;color:#fff;margin:0;}
#screen-home .zquote{border-inline-start:4px solid var(--zgold);background:rgba(255,255,255,.05);padding:20px 24px;border-radius:14px;font-size:20px;font-weight:800;line-height:2;color:#fff;margin:20px 0;}
#screen-home .zcats{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px;}
#screen-home .zcats a{flex:1;min-width:160px;text-align:center;border:1px solid rgba(231,198,90,.55);border-radius:16px;padding:16px 12px;font-weight:900;font-size:17.5px;color:#fff;background:rgba(255,255,255,.04);}
#screen-home .zcats a small{display:block;color:var(--zgold2);font-size:10.5px;letter-spacing:.22em;margin-top:4px;font-weight:800;}
#screen-home .zcats a:hover{background:rgba(255,255,255,.1);}
#screen-home .zsoon{display:inline-block;margin-top:16px;background:rgba(231,198,90,.14);color:var(--zgold2);border:1px dashed rgba(231,198,90,.6);border-radius:999px;padding:6px 16px;font-size:13.5px;font-weight:700;}
/* faq */
#screen-home .zfaq{max-width:920px;margin:0 auto;display:grid;gap:13px;}
#screen-home .zfaq details{background:#fff;border:1px solid var(--zline);border-radius:16px;box-shadow:0 8px 22px rgba(8,28,48,.06);}
#screen-home .zfaq summary{cursor:pointer;list-style:none;padding:20px 24px;font-weight:900;font-size:17px;color:var(--znavy);display:flex;justify-content:space-between;align-items:center;gap:14px;}
#screen-home .zfaq summary::-webkit-details-marker{display:none;}
#screen-home .zfaq summary::after{content:"+";color:var(--zgold);font-size:25px;font-weight:900;line-height:1;}
#screen-home .zfaq details[open ] summary::after{content:"−";}
#screen-home .zfaq .za{padding:0 24px 22px;color:var(--zmuted);font-size:15.5px;}
/* contact */
#screen-home .zcontact{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:980px;margin:0 auto;}
#screen-home .zccard{background:#fff;border:1px solid var(--zline);border-radius:var(--zr);box-shadow:var(--zshadow);padding:34px 28px;text-align:center;display:block;}
#screen-home .zccard .zic{width:62px;height:62px;margin:0 auto 13px;border-radius:50%;background:var(--zgold-soft);display:flex;align-items:center;justify-content:center;}
#screen-home .zccard .zic svg{width:29px;height:29px;stroke:var(--znavy);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
#screen-home .zccard .zv{font-size:22px;font-weight:900;color:var(--znavy);direction:ltr;overflow-wrap:anywhere;}
#screen-home .zccard small{color:var(--zmuted);font-weight:700;letter-spacing:.08em;}
/* footer */
#screen-home .zfooter{background:var(--znavy);color:#b9c9da;border-radius:22px;padding:46px 34px 0;margin-bottom:8px;}
#screen-home .zfgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:34px;padding-bottom:38px;}
#screen-home .zfgrid h4{color:#fff;font-size:16.5px;margin:0 0 14px;font-weight:900;}
#screen-home .zfgrid a{display:block;padding:4px 0;font-size:14.8px;}
#screen-home .zfgrid a:hover{color:var(--zgold2);}
#screen-home .zfgrid p{font-size:14.5px;line-height:1.9;margin:0;}
#screen-home .zfbrand{display:flex;gap:12px;align-items:center;margin-bottom:15px;}
#screen-home .zfbrand b{color:#fff;font-size:17.5px;display:block;line-height:1.4;}
#screen-home .zfbrand span{font-size:10px;color:var(--zgold2);letter-spacing:.26em;font-weight:700;display:block;}
#screen-home .zfbot{border-top:1px solid rgba(255,255,255,.12);padding:20px 0 24px;font-size:12.5px;color:#8498ad;line-height:2;}
/* responsive */
@media (max-width:1080px){
  #screen-home .zpillars{grid-template-columns:repeat(2,1fr);}
  #screen-home .zteacher{grid-template-columns:1fr;gap:32px;}
  #screen-home .ztart{max-width:460px;margin:0 auto;width:100%;}
  #screen-home .zvisaband{grid-template-columns:1fr;gap:30px;}
  #screen-home .zvisaband .zvart{max-width:520px;}
  #screen-home .zfgrid{grid-template-columns:1fr 1fr;}
}
@media (max-width:860px){
  #screen-home .znav-links{display:none;}
  #screen-home .znav .zbtn{margin-inline-start:auto;}
  #screen-home .zsec{padding:44px 0;}
  #screen-home .zhero-in{padding:44px 0 36px;}
  #screen-home .zdoors .zwrap{grid-template-columns:repeat(2,1fr);padding:0 8px;}
  #screen-home .zhdoor{border-top:1px solid rgba(255,255,255,.1);}
  #screen-home .zfeature{grid-template-columns:1fr;}
  #screen-home .zfeature .zfimg{min-height:220px;max-height:280px;}
  #screen-home .zfeature .zfb{padding:32px 24px;}
  #screen-home .zduo,#screen-home .zsteps,#screen-home .zprices,#screen-home .zcontact{grid-template-columns:1fr;}
  #screen-home .zdest a.zwide,#screen-home .zdest a.znar{grid-column:span 6;}
  #screen-home .zdest a{height:210px;}
}
@media (max-width:560px){
  #screen-home .zwrap{padding:0 14px;}
  #screen-home .zpillars{grid-template-columns:1fr;}
  #screen-home .zbrand b{font-size:15.5px;}
  #screen-home .zhero h1{font-size:33px;}
  #screen-home .zprice .zamt{font-size:35px;}
  #screen-home .zccard .zv{font-size:19px;}
  #screen-home .zfgrid{grid-template-columns:1fr;}
  #screen-home .zfooter{padding:38px 22px 0;}
}

/* ===== English-FIRST bilingual pass + top icon + WhatsApp (2026-10-28) ===== */
#screen-home .znav-in{direction:ltr;}
#screen-home .zlogo{width:52px;height:52px;flex:0 0 52px;}
#screen-home .zbrand b{font-family:"Segoe UI",system-ui,sans-serif;font-size:15px;letter-spacing:.13em;}
#screen-home .zbrand .zfa{display:block;font-size:12.5px;color:var(--zmuted);letter-spacing:0;font-weight:700;}
#screen-home .zfbrand .zfa{display:block;font-size:12.5px;color:#9fb6cc;letter-spacing:0;font-weight:700;}
#screen-home .znav-links{margin-inline-start:0;margin-left:auto;}
#screen-home .znav-links a{text-align:center;line-height:1.25;}
#screen-home .znav-links .nl-fa{display:block;font-size:10.5px;color:var(--zgold);font-weight:700;}
#screen-home .zbtn{flex-direction:column;gap:1px;line-height:1.3;}
#screen-home .zbtn .bt-fa{display:block;font-size:11px;font-weight:700;opacity:.85;}
#screen-home .zhero-bg::after{background:linear-gradient(to right,rgba(6,20,36,.90) 26%,rgba(6,20,36,.70) 55%,rgba(6,20,36,.45) 100%);}
#screen-home .zhero-in{margin-right:auto;}
#screen-home .zhero .zfa-sub{font-size:clamp(19px,2.4vw,25px);font-weight:800;color:#f3e5bd;line-height:1.75;margin-top:12px;}
#screen-home .zfa-sub{font-size:19px;font-weight:800;color:var(--znavy2);line-height:1.6;margin-top:3px;}
#screen-home .zband-navy .zfa-sub{color:var(--zgold2);}
#screen-home .zhead h2[dir="ltr"]{text-align:left;}
#screen-home .zhead.center h2[dir="ltr"]{text-align:center;}
#screen-home .zen-p{margin-top:12px;font-size:16.5px;font-weight:600;color:#33475e;}
#screen-home .zen-p2{font-size:15px;font-weight:600;color:#33475e;line-height:1.65;}
#screen-home .zfeature .zen-p2,#screen-home .zprice .zen-p2{color:#d7e2ee;}
#screen-home .h3-en{display:block;}
#screen-home .h3-fa{display:block;font-size:14px;color:var(--zmuted);font-weight:800;margin-top:2px;}
#screen-home .zfeature .h3-fa,#screen-home .zprice .h3-fa{color:#b9c9da;}
#screen-home .zm-fa{font-size:12.5px;color:var(--zmuted);font-weight:700;margin-inline-start:7px;}
#screen-home .zhdoor .zd-en{display:block;font-size:15px;font-weight:800;letter-spacing:.14em;}
#screen-home .zhdoor small.zd-fa{display:block;color:var(--zgold2);font-size:12px;letter-spacing:0;font-weight:700;margin-top:2px;}
#screen-home .zdest .zcap span{letter-spacing:0;font-size:13px;}
#screen-home .zamt small.zam-en{display:block;font-size:13px;color:#cfe0f0;font-weight:700;letter-spacing:.03em;}
#screen-home .zamt small.zam-fa{display:block;font-size:11.5px;color:#9fb6cc;font-weight:700;margin-top:1px;}
#screen-home .zquote .zq-en{font-size:14.5px;color:var(--zgold2);font-weight:700;line-height:1.65;margin-top:9px;letter-spacing:.02em;}
#screen-home .zcats a .zc-en{display:block;}
#screen-home .zcats a small.zc-fa{color:#cfdce9;letter-spacing:0;font-size:13.5px;margin-top:3px;}
#screen-home .zsoon .zsn-en{display:block;font-weight:800;}
#screen-home .ztp-en{font-size:16.5px;color:#eef3f9;line-height:1.75;margin:14px 0 0;font-weight:600;}
#screen-home .ztlist .zen-li{display:block;color:#fff;font-weight:600;margin-bottom:5px;}
#screen-home .zfaq summary .qwrap{display:grid;gap:2px;}
#screen-home .zfaq summary .q-en{font-size:16.5px;font-weight:800;color:var(--znavy);}
#screen-home .zfaq summary .q-fa{font-size:13.5px;color:var(--zmuted);font-weight:700;}
#screen-home .zfaq .za-en{display:block;color:#1c2733;font-weight:600;margin-bottom:6px;}
#screen-home .zfooter h4 .h4-fa{display:block;font-size:12px;color:#8498ad;font-weight:700;margin-top:2px;}
#screen-home .zfooter .fl-fa{font-size:12px;color:#8498ad;margin-inline-start:7px;}
#screen-home .zfooter .zen-fl{display:block;color:#d7e2ee;font-weight:600;margin-bottom:6px;}
#screen-home .zfbot{padding-bottom:88px;}
.zwa{display:none;}
body:has(#screen-home.active) .zwa{display:flex;position:fixed;right:18px;bottom:18px;z-index:80;width:56px;height:56px;border-radius:50%;background:#25d366;align-items:center;justify-content:center;box-shadow:0 12px 28px rgba(7,80,40,.38);transition:transform .18s ease;}
body:has(#screen-home.active) .zwa:hover{transform:translateY(-2px);}
.zwa svg{width:30px;height:30px;fill:#fff;display:block;}

@media (max-width:640px){
#screen-home .zbrand b{font-size:12px;letter-spacing:.04em;white-space:nowrap;}
#screen-home .zbrand>span{min-width:0;}
#screen-home .zbrand .zfa{font-size:11px;}
#screen-home .zbtn-sm{padding:9px 12px;font-size:13px;}
}

/* ===== APP FORM (2026-10-28) — html.app-mode is set by the head script in
   index.html when the site runs inside the Cyrus IELTS Academy app (the
   same Capacitor signal the Ava page uses). The app home is lesson-focused:
   slim brand header, hello + learning stats, the foundation course, the
   diagnostic + plan cards, Words & Slang + Ava, the six level bands and
   today's homework. Umbrella/marketing sections stay in the DOM — they are
   only display:none here — and the website form is untouched. ===== */
html.app-mode body:has(#screen-home.active) .wrap{max-width:480px;}
html.app-mode #screen-home .znav-links,
html.app-mode #screen-home .znav .zbtn-sm{display:none;}
html.app-mode #screen-home .zhero-bg,
html.app-mode #screen-home .zhero .zchip,
html.app-mode #screen-home .zhero h1,
html.app-mode #screen-home .zhero .zfa-sub,
html.app-mode #screen-home .zhero .zsub-en,
html.app-mode #screen-home .zhero .zlead,
html.app-mode #screen-home .zhero-cta,
html.app-mode #screen-home .zdoors{display:none;}
html.app-mode #screen-home .zhero-in{padding:26px 0 22px;}
html.app-mode #screen-home>section:first-of-type,
html.app-mode #screen-home>section#how,
html.app-mode #screen-home>section#teacher,
html.app-mode #screen-home>section#travel,
html.app-mode #screen-home>section.zband-navy:not(#teacher),
html.app-mode #screen-home>section#faq,
html.app-mode #screen-home>section#contact,
html.app-mode #screen-home .zfooter{display:none;}
html.app-mode .zwa{display:none!important;}

/* Fully-English app (2026-10-28): in app-mode the Persian companion lines
   from the bilingual pass are hidden; the English line stays. Browser
   (no html.app-mode) is untouched. */
html.en-mode .bt-fa, html.en-mode .fl-fa, html.en-mode .h3-fa,
html.en-mode .h4-fa, html.en-mode .nl-fa, html.en-mode .q-fa,
html.en-mode .zd-fa, html.en-mode .zc-fa, html.en-mode .zam-fa,
html.en-mode .zm-fa, html.en-mode .zfa-sub{display:none!important;}
html.en-mode .zfa{display:none!important;}

/* Arabic front-door button (same pill as the homepage .ar-link) */
.ar-link{display:inline-block;font-size:15px;font-weight:700;color:#0B2440;text-decoration:none;
  border:1px solid var(--gold);border-radius:999px;padding:7px 18px;background:var(--gold);
  margin-inline-start:12px}
.ar-link:hover{background:var(--gold2,#f0cd7e)}