@charset "utf-8";
/* ==========================================================
   moviru 모비루 — 공통 스타일
   색: 슬레이트 잉크 바탕 + 언어별 강조색(잉크블루/자두/황토)
   글꼴: Pretendard(본문·UI) + 시스템 명조(다국어 인사말 표시용)
   ========================================================== */

:root{
  --ink:#1E2833;
  --ink-2:#4C5A68;
  --ink-3:#8794A1;
  --paper:#FCFBF9;
  --mist:#EEF0EC;
  --mist-2:#F6F7F4;
  --line:#DEE1DB;
  --line-2:#EAECE7;
  --brand:#22364B;

  --en:#2C4E86;
  --jp:#9E3255;
  --cn:#B06A22;

  --acc:var(--brand);
  --acc-soft:#E8ECF2;

  --wrap:1080px;
  --r:14px;
  --shadow:0 1px 0 var(--line), 0 12px 28px -22px rgba(30,40,51,.5);
}
body.t-en{ --acc:var(--en); --acc-soft:#E7EDF7; }
body.t-jp{ --acc:var(--jp); --acc-soft:#F6E7EC; }
body.t-cn{ --acc:var(--cn); --acc-soft:#F7EDE0; }

*,*::before,*::after{ box-sizing:border-box }
html{ scroll-behavior:smooth; scroll-padding-top:74px }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:Pretendard,-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  font-size:16px; line-height:1.7; letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit }
h1,h2,h3,h4{ margin:0; letter-spacing:-.035em; line-height:1.22; font-weight:800 }
p{ margin:0 }
:focus-visible{ outline:2.5px solid var(--acc); outline-offset:3px; border-radius:4px }

.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 22px }
.serif{ font-family:Georgia,'Nanum Myeongjo','Times New Roman',serif; letter-spacing:0 }

/* ── 상단바 ─────────────────────────────── */
.topbar{
  position:sticky; top:0; z-index:60;
  background:rgba(252,251,249,.93); backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--line-2);
}
.topbar .wrap{ display:flex; align-items:center; gap:18px; height:64px }
.brand{ display:flex; align-items:baseline; gap:8px; font-weight:800; font-size:21px; letter-spacing:-.05em }
.brand em{ font-style:normal; color:var(--acc) }
.brand small{ font-size:11.5px; font-weight:600; color:var(--ink-3); letter-spacing:.02em }

.nav{ display:flex; align-items:center; gap:2px; margin-left:auto }
.nav > a,.nav > .drop > button{
  display:block; padding:9px 12px; border-radius:9px; border:0; background:none;
  font-size:14.5px; font-weight:600; color:var(--ink-2); cursor:pointer; white-space:nowrap;
}
.nav > a:hover,.nav > .drop > button:hover{ background:var(--mist); color:var(--ink) }
.drop{ position:relative }
.drop > button::after{ content:''; display:inline-block; width:5px; height:5px; margin-left:6px; vertical-align:2px;
  border-right:1.6px solid currentColor; border-bottom:1.6px solid currentColor; transform:rotate(45deg) }
.drop-panel{
  position:absolute; top:calc(100% + 8px); left:50%; transform:translateX(-50%);
  min-width:212px; padding:8px; background:#fff; border:1px solid var(--line);
  border-radius:12px; box-shadow:0 20px 44px -26px rgba(30,40,51,.6);
  display:none;
}
.drop[data-open="1"] .drop-panel{ display:block }
.drop-panel a{ display:block; padding:9px 11px; border-radius:8px; font-size:14.5px; font-weight:600; color:var(--ink-2) }
.drop-panel a:hover{ background:var(--mist-2); color:var(--ink) }
.drop-panel span{ display:block; padding:6px 11px 4px; font-size:11.5px; font-weight:700; color:var(--ink-3) }

.nav-cta{
  margin-left:8px; padding:9px 16px; border-radius:999px; background:var(--ink); color:#fff;
  font-size:14.5px; font-weight:700;
}
.nav-cta:hover{ background:var(--acc) }
.menu-btn{
  display:none; margin-left:auto; width:42px; height:42px; border:1px solid var(--line);
  border-radius:11px; background:#fff; cursor:pointer;
}
.menu-btn i{ display:block; width:17px; height:1.8px; margin:3.5px auto; background:var(--ink); border-radius:2px }

.drawer{
  position:fixed; inset:64px 0 0; z-index:59; background:var(--paper);
  padding:18px 22px 120px; overflow:auto; display:none;
}
.drawer[data-open="1"]{ display:block }
.drawer h4{ font-size:12.5px; color:var(--ink-3); font-weight:700; margin:20px 0 8px; letter-spacing:0 }
.drawer a{ display:block; padding:12px 2px; border-bottom:1px solid var(--line-2); font-weight:600 }

/* ── 버튼 ───────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 24px; border-radius:999px; font-weight:700; font-size:15.5px;
  border:1.6px solid transparent; cursor:pointer; transition:background .16s, color .16s, border-color .16s;
}
.btn-solid{ background:var(--acc); color:#fff }
.btn-solid:hover{ background:var(--ink) }
.btn-line{ border-color:var(--line); background:#fff; color:var(--ink) }
.btn-line:hover{ border-color:var(--ink); }
.btn-ink{ background:var(--ink); color:#fff }
.btn-ink:hover{ background:var(--acc) }
.btn-sm{ padding:10px 18px; font-size:14px }

/* ── 히어로 ─────────────────────────────── */
.hero{ padding:74px 0 64px; border-bottom:1px solid var(--line-2) }
.hero-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:center }
.kicker{ display:flex; align-items:center; gap:10px; font-size:13px; font-weight:700; color:var(--acc); margin-bottom:20px }
.kicker::before{ content:''; width:26px; height:2px; background:var(--acc) }
.hero h1{ font-size:clamp(34px,5vw,54px); line-height:1.14 }
.hero p.lead{ margin-top:20px; font-size:17.5px; color:var(--ink-2); max-width:34em }
.hero-btns{ display:flex; gap:10px; margin-top:30px; flex-wrap:wrap }
.hero-facts{ display:flex; gap:26px; margin-top:34px; flex-wrap:wrap; color:var(--ink-2); font-size:13.5px }
.hero-facts b{ display:block; font-size:23px; color:var(--ink); letter-spacing:-.03em; line-height:1.3 }

/* 인사말 회전판 */
.greeter{
  position:relative; aspect-ratio:1/1; border-radius:24px; background:var(--brand);
  color:#fff; overflow:hidden; display:grid; place-items:center; padding:28px;
}
.greeter::after{
  content:''; position:absolute; inset:auto -30% -45% -30%; height:70%;
  background:var(--acc); opacity:.5; border-radius:50%; transition:background .7s ease;
  filter:blur(6px);
}
.greeter-in{ position:relative; z-index:1; text-align:center }
.greeter .hi{ font-size:clamp(38px,6vw,60px); line-height:1.2; font-weight:400; min-height:1.25em }
.greeter .lang{ margin-top:14px; font-size:14px; font-weight:700; opacity:.82; letter-spacing:.02em }
.greeter .dots{ display:flex; gap:7px; justify-content:center; margin-top:24px }
.greeter .dots i{ width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.35) }
.greeter .dots i.on{ background:#fff }
.greeter.static .hi{ min-height:0 }
.greeter.static .stack{ display:grid; gap:6px }

/* ── 섹션 공통 ──────────────────────────── */
.sec{ padding:76px 0; border-bottom:1px solid var(--line-2) }
.sec.tint{ background:var(--mist-2) }
.sec-head{ max-width:44em; margin-bottom:38px }
.tag{ display:inline-flex; align-items:center; gap:9px; font-size:12.5px; font-weight:700; color:var(--acc); margin-bottom:13px }
.tag::before{ content:''; width:18px; height:2px; background:var(--acc) }
.sec h2{ font-size:clamp(25px,3.4vw,35px) }
.sec-head p{ margin-top:13px; font-size:16.5px; color:var(--ink-2) }

/* ── 통계 띠 ────────────────────────────── */
.strip{ background:var(--ink); color:#fff; padding:30px 0 }
.strip .wrap{ display:flex; gap:14px; flex-wrap:wrap; justify-content:space-between }
.strip div{ flex:1 1 150px }
.strip b{ display:block; font-size:29px; letter-spacing:-.04em; font-weight:800 }
.strip span{ font-size:13.5px; color:rgba(255,255,255,.68) }

/* ── 언어 카드 ──────────────────────────── */
.langs{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px }
.langcard{
  position:relative; display:flex; flex-direction:column; justify-content:space-between;
  min-height:290px; padding:26px; border-radius:20px; background:#fff;
  border:1px solid var(--line); overflow:hidden; transition:border-color .18s, transform .18s;
}
.langcard:hover{ border-color:var(--lc); transform:translateY(-3px) }
.langcard .glyph{ font-size:clamp(34px,3.6vw,48px); line-height:1.1; color:var(--lc) }
.langcard h3{ font-size:23px; margin-top:auto }
.langcard .meta{ font-size:12.5px; font-weight:700; color:var(--lc); margin-bottom:9px }
.langcard p{ margin-top:10px; font-size:14.5px; color:var(--ink-2) }
.langcard .go{ margin-top:18px; font-size:14.5px; font-weight:700; color:var(--lc) }
.langcard::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:4px; background:var(--lc) }

/* ── 고민 선택(셀프체크) ────────────────── */
.picks{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px }
.pick{
  display:flex; gap:16px; align-items:flex-start; text-align:left; padding:20px 22px;
  border:1px solid var(--line); border-radius:16px; background:#fff; cursor:pointer;
  transition:border-color .16s, background .16s;
}
.pick:hover{ border-color:var(--acc); background:var(--acc-soft) }
.pick .n{ font-size:13px; font-weight:800; color:var(--acc); padding-top:3px }
.pick strong{ display:block; font-size:16.5px; font-weight:700; letter-spacing:-.02em; color:var(--ink) }
.pick span{ font-size:13.5px; color:var(--ink-3) }
.pick-out{
  margin-top:16px; padding:20px 22px; border-radius:16px; background:var(--acc-soft);
  border:1px solid var(--acc); display:none;
}
.pick-out[data-on="1"]{ display:block }
.pick-out b{ display:block; font-size:16.5px; margin-bottom:6px }
.pick-out p{ font-size:14.5px; color:var(--ink-2) }
.pick-out .btn{ margin-top:14px }

/* ── 3원리 (순서 있음 → 번호 사용) ──────── */
.rules{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:2px solid var(--ink) }
.rules > div{ padding:28px 26px 30px; border-right:1px solid var(--line) }
.rules > div:last-child{ border-right:0 }
.rules .n{ font-size:12.5px; font-weight:800; color:var(--acc); letter-spacing:.06em }
.rules h3{ font-size:20px; margin:10px 0 12px }
.rules .say{ font-size:15px; font-weight:700; color:var(--ink); margin-bottom:8px }
.rules p{ font-size:14.5px; color:var(--ink-2) }

/* ── 후기 ───────────────────────────────── */
.reviews{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px }
.rev{ padding:24px; border:1px solid var(--line); border-radius:16px; background:#fff; display:flex; flex-direction:column }
.rev .who{ font-size:12.5px; font-weight:700; color:var(--acc); margin-bottom:12px }
.rev blockquote{ margin:0; font-size:15px; color:var(--ink); line-height:1.75 }
.rev cite{ margin-top:auto; padding-top:16px; font-style:normal; font-size:13px; color:var(--ink-3) }

/* ── 강사 유형 / 강사진 ─────────────────── */
.tutors{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px }
.tutor{ padding:24px; border:1px solid var(--line); border-radius:16px; background:#fff }
.tutor .badge{ display:inline-block; padding:4px 10px; border-radius:999px; background:var(--acc-soft);
  color:var(--acc); font-size:12px; font-weight:700; margin-bottom:13px }
.tutor h3{ font-size:18.5px; margin-bottom:9px }
.tutor p{ font-size:14.5px; color:var(--ink-2) }

.pron{ margin-top:18px; padding:26px 28px; border-radius:16px; background:var(--acc-soft);
  border:1px solid var(--acc); border-left-width:5px }
.pron h3{ font-size:19px; margin-bottom:9px }
.pron p{ font-size:15px; color:var(--ink-2); max-width:56em }
.pron .chips span{ background:#fff }

.people{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px }
.person{ display:flex; gap:16px; padding:20px; border:1px solid var(--line); border-radius:16px; background:#fff }
.person .ava{
  flex:0 0 46px; width:46px; height:46px; border-radius:50%; background:var(--acc-soft);
  color:var(--acc); display:grid; place-items:center; font-weight:800; font-size:17px;
}
.person h3{ font-size:17px }
.person .where{ font-size:12.5px; font-weight:700; color:var(--acc); margin-top:3px }
.person p{ font-size:13.5px; color:var(--ink-2); margin-top:7px }
.chips{ display:flex; flex-wrap:wrap; gap:5px; margin-top:10px }
.chips span{ font-size:11.5px; font-weight:600; color:var(--ink-2); background:var(--mist);
  padding:3px 9px; border-radius:999px }

/* ── 단계 (순서 있음) ───────────────────── */
.steps{ display:grid; grid-template-columns:repeat(5,1fr); gap:0 }
.steps > li{ list-style:none; padding:24px 20px 24px 0; border-top:2px solid var(--ink); margin-right:18px }
.steps > li:last-child{ margin-right:0 }
.steps .n{ font-size:12.5px; font-weight:800; color:var(--acc) }
.steps h3{ font-size:17px; margin:9px 0 8px }
.steps p{ font-size:14px; color:var(--ink-2) }

/* ── 레벨(커리큘럼) ─────────────────────── */
.levels{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px }
.level{ padding:24px; border-radius:16px; background:#fff; border:1px solid var(--line); position:relative }
.level .lv{ font-size:12.5px; font-weight:800; color:var(--acc) }
.level h3{ font-size:19px; margin:9px 0 6px }
.level .goal{ font-size:14.5px; font-weight:700; color:var(--ink) }
.level p{ margin-top:8px; font-size:14px; color:var(--ink-2) }
.level .bar{ height:4px; border-radius:4px; background:var(--mist); margin-top:16px; overflow:hidden }
.level .bar i{ display:block; height:100%; background:var(--acc) }

/* ── 표 ─────────────────────────────────── */
.tablewrap{ overflow-x:auto; border:1px solid var(--line); border-radius:16px; background:#fff }
table{ width:100%; border-collapse:collapse; min-width:560px }
th,td{ padding:15px 18px; text-align:left; font-size:14.5px; border-bottom:1px solid var(--line-2) }
thead th{ font-size:13px; font-weight:700; color:var(--ink-3); background:var(--mist-2) }
thead th:last-child{ color:var(--acc) }
tbody th{ font-weight:700; color:var(--ink) }
td:last-child{ font-weight:700 }
tr:last-child td,tr:last-child th{ border-bottom:0 }
.note{ margin-top:14px; font-size:13.5px; color:var(--ink-3) }

/* ── 수업료 ─────────────────────────────── */
.toggle{ display:inline-flex; padding:4px; background:var(--mist); border-radius:999px; margin-bottom:22px }
.toggle button{ padding:9px 20px; border:0; background:none; border-radius:999px; font-size:14px; font-weight:700;
  color:var(--ink-2); cursor:pointer }
.toggle button[aria-pressed="true"]{ background:#fff; color:var(--ink); box-shadow:0 1px 3px rgba(30,40,51,.16) }
.plan{ display:none }
.plan[data-on="1"]{ display:block }
.plan td b{ font-size:16px }
.plan td s{ color:var(--ink-3); font-weight:400; margin-left:6px; font-size:13px }
.plan td em{ display:block; font-style:normal; font-size:12.5px; color:var(--ink-3); font-weight:400 }

/* ── 레벨 테스트 ────────────────────────── */
.test{ border:1px solid var(--line); border-radius:20px; background:#fff; padding:30px; max-width:720px }
.test .prog{ height:4px; background:var(--mist); border-radius:4px; overflow:hidden; margin-bottom:22px }
.test .prog i{ display:block; height:100%; background:var(--acc); width:0; transition:width .3s ease }
.test .qn{ font-size:12.5px; font-weight:700; color:var(--acc) }
.test h3{ font-size:20px; margin:9px 0 18px }
.test .opts{ display:grid; gap:9px }
.test .opts button{
  text-align:left; padding:14px 17px; border:1px solid var(--line); border-radius:12px; background:#fff;
  font-size:15px; cursor:pointer; transition:border-color .15s, background .15s;
}
.test .opts button:hover{ border-color:var(--acc); background:var(--acc-soft) }
.test .result{ display:none }
.test .result[data-on="1"]{ display:block }
.test .result .lvl{ font-size:13px; font-weight:700; color:var(--acc) }
.test .result h3{ font-size:26px; margin:8px 0 12px }
.test .result p{ font-size:15.5px; color:var(--ink-2) }
.test .result .row{ display:flex; gap:10px; margin-top:22px; flex-wrap:wrap }
.test .start{ display:flex; gap:12px; align-items:center; flex-wrap:wrap }

/* ── FAQ ────────────────────────────────── */
.faq{ max-width:800px; border-top:1px solid var(--line) }
.faq details{ border-bottom:1px solid var(--line) }
.faq summary{
  list-style:none; cursor:pointer; padding:19px 40px 19px 0; position:relative;
  font-size:16.5px; font-weight:700; letter-spacing:-.02em;
}
.faq summary::-webkit-details-marker{ display:none }
.faq summary::after{
  content:''; position:absolute; right:8px; top:26px; width:9px; height:9px;
  border-right:2px solid var(--ink-3); border-bottom:2px solid var(--ink-3);
  transform:rotate(45deg); transition:transform .2s;
}
.faq details[open] summary::after{ transform:rotate(-135deg); border-color:var(--acc) }
.faq p{ padding:0 0 20px; font-size:15px; color:var(--ink-2); max-width:60em }

/* ── 신청 폼 ────────────────────────────── */
.applywrap{ display:grid; grid-template-columns:.9fr 1.1fr; gap:48px; align-items:start }
.form{ background:#fff; border:1px solid var(--line); border-radius:20px; padding:28px }
.field{ margin-bottom:16px }
.field label{ display:block; font-size:13.5px; font-weight:700; margin-bottom:7px }
.field label i{ color:var(--acc); font-style:normal }
.field input,.field select,.field textarea{
  width:100%; padding:13px 15px; border:1px solid var(--line); border-radius:11px;
  background:var(--mist-2); font-family:inherit; font-size:15px; color:var(--ink);
}
.field textarea{ min-height:96px; resize:vertical }
.field input:focus,.field select:focus,.field textarea:focus{ background:#fff; border-color:var(--acc); outline:none }
.field .err{ display:none; margin-top:6px; font-size:13px; color:#B3261E; font-weight:600 }
.field[data-bad="1"] input{ border-color:#B3261E }
.field[data-bad="1"] .err{ display:block }
.radios{ display:flex; gap:8px; flex-wrap:wrap }
.radios label{
  display:inline-flex; align-items:center; gap:7px; padding:10px 15px; border:1px solid var(--line);
  border-radius:999px; background:#fff; font-size:14.5px; font-weight:600; cursor:pointer; margin:0;
}
.radios input{ width:auto; accent-color:var(--acc) }
.radios label:has(input:checked){ border-color:var(--acc); background:var(--acc-soft); color:var(--acc) }
.form .btn{ width:100%; margin-top:6px }
.form .fine{ margin-top:14px; font-size:13px; color:var(--ink-3); text-align:center }
.form .fine a{ color:var(--acc); font-weight:700 }
.sent{ display:none; text-align:center; padding:26px 4px }
.sent[data-on="1"]{ display:block }
.sent b{ display:block; font-size:20px; margin-bottom:8px }
.sent p{ font-size:15px; color:var(--ink-2) }
.applyside li{ margin-bottom:16px; font-size:15px; color:var(--ink-2); list-style:none;
  padding-left:26px; position:relative }
.applyside li::before{ content:''; position:absolute; left:2px; top:9px; width:9px; height:9px;
  border-radius:50%; border:2.5px solid var(--acc) }
.applyside ul{ margin:22px 0 0; padding:0 }
.applyside b{ color:var(--ink) }

/* ── 마무리 CTA ─────────────────────────── */
.endcta{ background:var(--ink); color:#fff; padding:74px 0; text-align:center }
.endcta h2{ font-size:clamp(26px,3.6vw,38px) }
.endcta p{ margin-top:14px; color:rgba(255,255,255,.72); font-size:16.5px }
.endcta .row{ display:flex; gap:10px; justify-content:center; margin-top:28px; flex-wrap:wrap }
.endcta .btn-line{ background:transparent; border-color:rgba(255,255,255,.35); color:#fff }
.endcta .btn-line:hover{ border-color:#fff; background:rgba(255,255,255,.1) }
.endcta .btn-solid{ background:#fff; color:var(--ink) }
.endcta .btn-solid:hover{ background:var(--acc); color:#fff }

/* ── 푸터 ───────────────────────────────── */
footer{ background:var(--mist-2); padding:56px 0 110px; font-size:14px; color:var(--ink-2) }
.foot-top{ display:grid; grid-template-columns:1.3fr 1fr 1fr 1fr; gap:32px }
.foot-top h4{ font-size:13px; font-weight:700; color:var(--ink); margin-bottom:12px; letter-spacing:0 }
.foot-top a{ display:block; padding:4px 0; color:var(--ink-2) }
.foot-top a:hover{ color:var(--acc) }
.foot-brand p{ margin-top:10px; max-width:24em; font-size:14px }
.foot-links{ display:flex; flex-wrap:wrap; gap:7px }
.foot-links a{ padding:5px 11px; background:#fff; border:1px solid var(--line); border-radius:999px; font-size:13px }
.foot-bot{ margin-top:40px; padding-top:22px; border-top:1px solid var(--line); font-size:13px; color:var(--ink-3);
  display:flex; gap:14px; flex-wrap:wrap; justify-content:space-between }
.foot-bot a{ color:var(--ink-2); font-weight:600 }
.crumb{ margin-top:20px; font-size:13px; color:var(--ink-3) }
.crumb a{ color:var(--ink-2) }

/* ── 모바일 하단 고정 바 ────────────────── */
.dock{
  position:fixed; left:0; right:0; bottom:0; z-index:70; display:none; gap:8px; padding:10px 14px
    calc(10px + env(safe-area-inset-bottom));
  background:rgba(252,251,249,.96); border-top:1px solid var(--line); backdrop-filter:blur(8px);
}
.dock a{ flex:1; text-align:center; padding:13px 8px; border-radius:12px; font-weight:700; font-size:15px }
.dock .k{ background:#FAE100; color:#3B1E1E }
.dock .c{ background:var(--ink); color:#fff }

/* ── 반응형 ─────────────────────────────── */
@media (max-width:960px){
  .hero-grid{ grid-template-columns:1fr; gap:36px }
  .greeter{ max-width:400px; aspect-ratio:4/3 }
  .langs,.reviews,.tutors,.people,.rules{ grid-template-columns:1fr 1fr }
  .rules > div{ border-bottom:1px solid var(--line) }
  .rules > div:nth-child(2n){ border-right:0 }
  .levels{ grid-template-columns:1fr 1fr }
  .steps{ grid-template-columns:1fr 1fr 1fr }
  .applywrap{ grid-template-columns:1fr; gap:30px }
  .foot-top{ grid-template-columns:1fr 1fr }
}
@media (max-width:760px){
  html{ scroll-padding-top:66px }
  .nav{ display:none }
  .menu-btn{ display:block }
  .dock{ display:flex }
  body{ padding-bottom:0 }
  footer{ padding-bottom:120px }
  .sec{ padding:56px 0 }
  .hero{ padding:52px 0 48px }
  .langs,.reviews,.tutors,.people,.picks,.rules,.levels,.steps{ grid-template-columns:1fr }
  .rules > div{ border-right:0 }
  .steps > li{ margin-right:0 }
  .foot-top{ grid-template-columns:1fr }
  .test{ padding:22px }
  .form{ padding:22px }
}
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{ animation:none !important; transition:none !important }
}