@font-face {
  font-family: Manrope;
  src: url("assets/fonts/manrope-regular.ttf") format("truetype");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: Manrope;
  src: url("assets/fonts/manrope-semibold.ttf") format("truetype");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: Manrope;
  src: url("assets/fonts/manrope-extrabold.ttf") format("truetype");
  font-weight: 800;
  font-display: swap;
}
:root {
  --paper: #f8f5ee;
  --ink: #282133;
  --muted: #635968;
  --violet: #6947bd;
  --lavender: #eae0f8;
  --line: #ded5e4;
  --lime: #e5eeac;
  --plum: #2e243a;
  --curve: 32px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 102px; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 16px/1.65 Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
body.modal-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, figure { margin: 0; }
h1, h2, h3 { line-height: 1.08; font-weight: 800; }
h1, h2 { letter-spacing: -.055em; }
h2 { font-size: clamp(36px, 4.35vw, 62px); }
h2 span { color: var(--violet); }
[hidden] { display: none !important; }
::selection { background: #ded0f6; }
:focus-visible { outline: 3px solid #936bdd; outline-offset: 4px; }
.shell { width: min(1232px, calc(100% - 88px)); margin-inline: auto; }
.section { padding-block: clamp(72px, 8vw, 116px); }
.eyebrow {
  margin-bottom: 18px;
  color: var(--violet);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .11em;
}
.cutout { object-fit: contain; filter: drop-shadow(0 16px 21px #45305213); }
.skip-link {
  position: fixed;
  z-index: 100;
  top: 10px;
  left: 15px;
  padding: 12px;
  background: #fff;
  transform: translateY(-150%);
}
.skip-link:focus { transform: translateY(0); }
.button, .text-link, .inline-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 800;
}
.button {
  min-height: 52px;
  padding: 12px 20px;
  border: 1px solid transparent;
  border-radius: 999px;
  transition: background .2s, transform .2s;
}
.button:hover { transform: translateY(-2px); }
.button > span { font-size: 19px; line-height: 1; }
.primary { background: var(--ink); color: #fff; }
.primary:hover { background: var(--violet); }
.light-button { background: var(--lime); color: var(--ink); }
.light-button:hover { background: #f5f6cc; }
.text-link { min-height: 44px; }
.inline-link { color: var(--violet); }
.text-link:hover, .inline-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.site-header {
  position: sticky;
  z-index: 30;
  top: 0;
  padding-block: 12px;
  background: #f8f5eef1;
  backdrop-filter: blur(14px);
}
.reading-progress { position: absolute; inset: 0 0 auto; height: 3px; pointer-events: none; }
.reading-progress span {
  display: block;
  height: 100%;
  background: var(--violet);
  transform: scaleX(0);
  transform-origin: left;
}
.nav {
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 8px 10px 8px 15px;
  background: #fffdf9;
  border: 1px solid var(--line);
  border-radius: 999px;
}
.brand { display: inline-flex; align-items: center; gap: 9px; flex-shrink: 0; }
.brand > span:last-child { font-size: 20px; line-height: 1.05; font-weight: 800; letter-spacing: -.05em; }
.brand-mark {
  display: grid;
  place-items: center;
  width: 39px;
  height: 39px;
  border-radius: 50%;
  background: var(--violet);
  color: #fff;
  font-size: 23px;
}
.brand small { display: block; margin-top: 4px; color: var(--muted); font-size: 9px; font-weight: 600; letter-spacing: .01em; }
.nav-links { display: flex; align-items: center; gap: clamp(14px, 2vw, 28px); font-size: 12px; font-weight: 800; }
.nav-links a:hover { color: var(--violet); }
.button-small { min-height: 42px; padding: 8px 15px; font-size: 12px; }

.hero { overflow: clip; }
.hero-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; align-items: center; min-height: 613px; }
.hero-copy { position: relative; z-index: 3; padding-block: 39px; }
.hero .eyebrow { display: flex; align-items: center; gap: 8px; }
.status-dot, .hero-notes i { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--violet); }
h1 { margin-bottom: 23px; font-size: clamp(58px, 6.4vw, 91px); line-height: .99; }
h1 span { color: var(--violet); }
h1 em {
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  letter-spacing: -.085em;
}
.hero-lead { max-width: 465px; color: var(--muted); font-size: clamp(15px, 1.38vw, 18px); }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 21px; margin-top: 25px; }
.hero-notes { display: flex; flex-wrap: wrap; gap: 7px 16px; margin-top: 15px; color: var(--muted); font-size: 11px; font-weight: 600; }
.hero-notes > span { display: inline-flex; align-items: center; gap: 6px; }
.hero-notes i { width: 6px; height: 6px; background: #628668; }
.hero-visual { position: relative; height: 600px; isolation: isolate; }
.hero-backdrop {
  position: absolute;
  inset: 46px 0 27px 9%;
  overflow: hidden;
  border: 1px solid #d3c2ee;
  border-radius: 48% 48% 32px 32px;
  background: radial-gradient(ellipse at 50% 40%, #eee4ff, #d8c4f4);
}
.hero-backdrop span {
  position: absolute;
  top: 8%;
  right: -5%;
  color: #9871ce29;
  font-size: clamp(190px, 26vw, 410px);
  line-height: 1;
  transform: rotate(10deg);
}
.hero-top-note {
  position: absolute;
  z-index: 2;
  top: 29px;
  left: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border: 1px solid var(--line);
  border-radius: 99px;
  background: #fffdf9;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
}
.hero-top-note span { color: var(--violet); font-size: 17px; }
.hero-product {
  position: absolute;
  z-index: 1;
  top: 31%;
  left: -2%;
  width: 84%;
  padding: 0;
  overflow: hidden;
  border: 1px solid #a896bb;
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 20px 48px #30203d38;
  transform: rotate(-8deg);
  transition: transform .25s;
}
.hero-product:hover { transform: rotate(-5deg) translateY(-3px); }
.product-window-bar, .browser-chrome {
  display: flex;
  align-items: center;
  gap: 5px;
  min-height: 29px;
  padding: 5px 10px;
  border-bottom: 1px solid #e9e2ef;
  background: #fcfafc;
  color: #685b73;
  font-size: 9px;
}
.product-window-bar i, .browser-chrome i { width: 6px; height: 6px; flex: none; border-radius: 50%; background: #c7b8d5; }
.product-window-bar span, .browser-chrome > span { flex: 1; text-align: center; }
.hero-student { position: absolute; z-index: 2; right: -3%; bottom: 12px; width: 65%; height: 94%; max-width: none; pointer-events: none; }
.hero-word {
  position: absolute;
  z-index: 3;
  bottom: 45px;
  left: 4%;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 13px;
  border: 1px solid #dccdea;
  border-radius: 14px;
  background: #fffdfa;
  box-shadow: 0 9px 24px #3f28552a;
  transform: rotate(-3deg);
}
.hero-word > span[lang] { font-size: 25px; color: var(--violet); }
.hero-word b, .hero-word small { display: block; line-height: 1.4; }
.hero-word b { font-size: 12px; }
.hero-word small { color: var(--muted); font-size: 10px; }
.word-star { color: var(--violet); font-size: 17px; }
.hero-sticker {
  position: absolute;
  z-index: 3;
  right: -6px;
  bottom: 45px;
  padding: 9px 13px;
  border-radius: 9px;
  background: var(--lime);
  box-shadow: 0 8px 14px #33254419;
  transform: rotate(8deg);
}
.hero-sticker span, .hero-sticker small { display: block; }
.hero-sticker span { font-size: 20px; }
.hero-sticker small { font-size: 9px; font-weight: 800; }
.hero-bottom { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px; margin-bottom: 38px; }
.hero-bottom a {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 76px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: #fffdfa;
  transition: background .2s, border-color .2s;
}
.hero-bottom a:hover { background: #f0e7fb; border-color: #ba9fdc; }
.hero-bottom a > span {
  display: grid;
  place-items: center;
  width: 43px;
  height: 43px;
  flex: none;
  border-radius: 13px;
  background: #eae0f7;
  color: #6947a2;
  font-size: 24px;
}
.hero-bottom a:nth-child(2) > span { background: #f6e1d5; color: #8f4c3e; }
.hero-bottom a:nth-child(3) > span { background: #e3ebce; color: #536935; }
.hero-bottom a:nth-child(4) > span { background: #f6e7b9; color: #745727; }
.hero-bottom b, .hero-bottom small { display: block; }
.hero-bottom b { font-size: 13px; font-weight: 800; }
.hero-bottom small { color: var(--muted); font-size: 11px; }
.hero-bottom i { margin-left: auto; color: var(--violet); font-size: 16px; font-style: normal; }

.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 28px; margin-bottom: 36px; }
.section-intro { max-width: 430px; color: var(--muted); font-size: 15px; }
.screens-section, .teacher-section, .mobile-section {
  margin-inline: 20px;
  overflow: clip;
  border-radius: var(--curve);
}
.screens-section { background: var(--lavender); }
.gallery-heading { align-items: center; }
.gallery-heading .section-intro { margin-top: 15px; max-width: 590px; }
.gallery-art { width: clamp(180px, 27vw, 345px); }
.gallery-layout { display: grid; grid-template-columns: minmax(160px, .28fr) minmax(0, 1fr); gap: 17px; }
.screen-tabs { display: grid; align-content: start; gap: 8px; counter-reset: sections; }
.screen-tabs button {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 54px;
  padding: 9px 13px;
  border: 1px solid #d2c2e5;
  border-radius: 13px;
  background: #f8f2ff;
  text-align: left;
  font-size: 13px;
  font-weight: 800;
  counter-increment: sections;
}
.screen-tabs button::before { content: counter(sections, decimal-leading-zero); color: #74569b; font-size: 10px; }
.screen-tabs button:hover { background: #fff; }
.screen-tabs button[aria-selected="true"] { border-color: var(--plum); background: var(--plum); color: #fff; }
.screen-tabs button[aria-selected="true"]::before { color: #d2baf5; }
.screen-panel { min-width: 0; padding: 14px; border-radius: 19px; background: #fffdfa; border: 1px solid #d6c6e5; }
.screen-description { display: flex; align-items: start; gap: 12px; padding: 7px 4px 15px; }
.screen-description h3 { margin-bottom: 6px; font-size: 17px; }
.screen-description p { color: var(--muted); font-size: 13px; }
.screen-counter, .demo-label {
  flex: none;
  padding: 4px 7px;
  border-radius: 6px;
  background: #ece2f8;
  color: #62438b;
  font-size: 10px;
  font-weight: 800;
}
.demo-label { margin-left: auto; }
.browser-frame {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  padding: 0;
  border: 1px solid #d9d0e0;
  border-radius: 11px;
  background: #fff;
  text-align: left;
}
.browser-frame img { width: 100%; }
.gallery-image img { aspect-ratio: 16 / 9; object-fit: contain; background: #f5f1f8; }
.browser-chrome .chrome-symbol { flex: none; font-size: 13px; }
.screenshot-trigger { cursor: zoom-in; }
.screenshot-trigger:hover { border-color: #9170ba; }
.zoom-label {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 10px;
  border: 1px solid #d1bddf;
  border-radius: 9px;
  background: #fffdfa;
  color: #573778;
  font-size: 11px;
  font-weight: 800;
}
.zoom-label svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.screens-note { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 15px; color: #584a69; font-size: 12px; }
.screens-note a { margin-left: auto; color: #52377c; font-weight: 800; }
.screens-note a:hover { text-decoration: underline; }

.conversation { overflow: clip; }
.conversation-layout { display: grid; grid-template-columns: .88fr 1.12fr; align-items: center; gap: clamp(30px, 6vw, 92px); }
.conversation-art { position: relative; display: grid; place-items: center; min-height: 560px; padding-bottom: 20px; isolation: isolate; }
.conversation-art img { width: min(380px, 86%); height: auto; }
.art-orbit {
  position: absolute;
  z-index: -1;
  inset: 9% 1%;
  border-radius: 46% 44% 32% 42%;
  border: 1px solid #c9d6ba;
  background: #e4ebd6;
  transform: rotate(-7deg);
}
.art-caption { position: absolute; bottom: 2px; left: 4%; color: #4f6445; font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.story-copy h2 { font-size: clamp(38px, 4.5vw, 61px); }
.story-copy > p:not(.eyebrow) { max-width: 580px; margin-top: 12px; color: var(--muted); font-size: 15px; }
.story-copy > p.story-lead { margin-top: 19px; color: var(--ink); font-weight: 600; }
.phrase-example {
  margin-top: 22px;
  padding: 15px;
  border: 1px solid #baa9cb;
  border-radius: 20px;
  background: #fffdfa;
  box-shadow: 5px 5px 0 #e8ddf3;
}
.example-top { display: flex; align-items: center; gap: 10px; }
.example-avatar { display: grid; place-items: center; width: 35px; height: 35px; border-radius: 11px; background: #e9dcfa; color: var(--violet); font-size: 19px; }
.example-top b, .example-top div span { display: block; }
.example-top b { font-size: 13px; font-weight: 800; }
.example-top div span { color: var(--muted); font-size: 11px; }
.example-spark { margin-left: auto; color: var(--violet); font-size: 20px; }
.example-message {
  display: grid;
  align-content: start;
  gap: 3px;
  min-height: 111px;
  margin: 12px 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: #efe5fb;
  color: #483854;
  font-size: 13px;
}
.example-message strong { color: #503181; font-size: clamp(18px, 2.2vw, 26px); font-weight: 600; }
.example-message .pinyin { color: #66468b; font-size: 13px; }
.hint-toggles, .phrase-options { display: flex; flex-wrap: wrap; gap: 6px; }
.hint-toggles button, .phrase-options button {
  min-height: 36px;
  padding: 6px 11px;
  border: 1px solid #d9cce4;
  border-radius: 999px;
  background: transparent;
  font-size: 11px;
  font-weight: 800;
}
.hint-toggles button[aria-pressed="true"] { border-color: var(--violet); background: var(--violet); color: #fff; }
.hint-toggles button[aria-pressed="false"] span { visibility: hidden; }
.phrase-options { margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--line); }
.phrase-options button { border-color: transparent; border-radius: 8px; }
.phrase-options button[aria-pressed="true"] { background: #e9edcf; color: #465631; }
.story-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-block: 16px 10px; }
.story-tags span { padding: 4px 9px; border: 1px solid var(--line); border-radius: 99px; color: var(--muted); font-size: 11px; }

.practice-section { padding-top: 38px; }
.practice-cards { display: grid; grid-template-columns: 1.07fr .93fr; align-items: start; gap: 21px; }
.practice-card { overflow: hidden; border: 1px solid #d9c6ea; border-radius: var(--curve); background: #e9def6; }
.writing-card { margin-top: 55px; border-color: #e8cbbd; background: #f6e2d8; }
.practice-art { display: grid; place-items: center; height: 330px; background: radial-gradient(ellipse, #fff8 0%, transparent 66%); }
.practice-art img { width: 93%; height: 100%; }
.writing-card .practice-art { height: 293px; }
.practice-card-copy { padding: 3px clamp(22px, 4vw, 48px) 36px; }
.card-kicker { display: block; margin-bottom: 13px; color: #5c3e81; font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.writing-card .card-kicker { color: #853e30; }
.practice-card h3 { margin-bottom: 13px; font-size: clamp(26px, 3.3vw, 45px); letter-spacing: -.055em; }
.practice-card p { color: #554961; font-size: 15px; }
.writing-card p { color: #684b45; }
.clean-list { display: grid; gap: 6px; margin: 17px 0 20px; padding-left: 19px; color: #4c4057; font-size: 13px; }
.clean-list li::marker { color: #7954b4; }

.teacher-section { background: var(--plum); color: #fff9f4; }
.teacher-layout { display: grid; grid-template-columns: 1fr .92fr; gap: 20px; align-items: center; }
.teacher-copy { padding-block: clamp(60px, 8vw, 103px); }
.teacher-copy .eyebrow { color: #d6bff7; }
.teacher-copy h2 { font-size: clamp(40px, 5.15vw, 70px); }
.teacher-copy h2 span { color: #e3edaf; }
.teacher-lead { max-width: 520px; margin-top: 19px; color: #e0d4e7; font-size: 16px; }
.teacher-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-block: 23px; }
.teacher-tools > div { padding: 12px 10px 9px 0; border-top: 1px solid #695577; }
.teacher-tools > div > span { float: left; margin-right: 8px; color: #e0c1f9; line-height: 1; }
.teacher-tools h3 { font-size: 14px; }
.teacher-tools p { margin-top: 6px; color: #d7c6df; font-size: 13px; }
.teacher-art { position: relative; align-self: stretch; display: grid; place-items: end center; min-height: 570px; isolation: isolate; }
.teacher-art img { width: min(440px, 96%); max-height: 680px; }
.teacher-orbit { position: absolute; z-index: -1; inset: 12% 1% 9% 8%; border: 1px solid #644c7a; border-radius: 47% 47% 35% 35%; background: #493454; }
.teacher-note {
  position: absolute;
  left: 0;
  bottom: 12%;
  padding: 10px 13px;
  border-radius: 11px;
  background: var(--lime);
  color: var(--ink);
  box-shadow: 0 8px 22px #1d132547;
  transform: rotate(-6deg);
}
.teacher-note span, .teacher-note small { display: block; }
.teacher-note span { font-size: 22px; }
.teacher-note small { font-size: 10px; font-weight: 800; }

.workflow-layout { display: grid; grid-template-columns: .86fr 1.14fr; gap: clamp(30px, 6vw, 85px); align-items: center; }
.workflow-intro { margin-top: 17px; color: var(--muted); font-size: 15px; }
.workflow-steps { display: grid; gap: 0; list-style: none; padding: 0; margin: 16px 0 0; }
.workflow-steps li { display: flex; gap: 12px; align-items: start; padding-block: 12px; border-top: 1px solid var(--line); }
.workflow-steps li > span { display: grid; place-items: center; width: 30px; height: 30px; flex: none; border-radius: 50%; background: var(--lavender); color: var(--violet); font-size: 11px; font-weight: 800; }
.workflow-steps h3 { margin: 3px 0 5px; font-size: 14px; }
.workflow-steps p { color: var(--muted); font-size: 13px; }
.workflow-visual { padding: 16px; border: 1px solid #d9c7ea; border-radius: 22px; background: #eaddf3; }
.lesson-caption { display: flex; justify-content: space-between; gap: 10px; align-items: center; margin-bottom: 12px; color: #59446b; font-size: 12px; }
.lesson-tag { padding: 5px 8px; border-radius: 6px; background: #fffdfa; color: #604280; font-size: 10px; font-weight: 800; }
.lesson-result { display: flex; align-items: center; gap: 8px; margin-top: 12px; color: #4f3c61; font-size: 12px; }
.lesson-result > span { display: grid; place-items: center; width: 29px; height: 29px; flex: none; border-radius: 50%; background: #fffdfa; color: var(--violet); }
.mobile-section { background: #e5ebd3; }
.mobile-layout { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 26px; }
.mobile-copy { padding-block: 70px; }
.mobile-copy h2 span, .mobile-copy .eyebrow { color: #4f6838; }
.mobile-copy > p:not(.eyebrow) { max-width: 480px; margin-top: 17px; color: #45513e; }
.access-points { display: grid; gap: 10px; margin: 19px 0; }
.access-points > div { padding-left: 11px; border-left: 2px solid #92a87e; }
.access-points strong, .access-points span { display: block; }
.access-points strong { font-size: 13px; }
.access-points span { color: #45513e; font-size: 13px; }
.mobile-visual { position: relative; align-self: stretch; min-height: 480px; }
.mobile-visual::before { position: absolute; inset: 13% -4% 10% 4%; border: 1px solid #b7c7a6; border-radius: 46% 47% 25% 28%; background: #d5e0be; content: ""; }
.group-art { position: absolute; right: -5%; bottom: 2%; width: 102%; max-width: none; }
.mobile-device {
  position: absolute;
  top: 8%;
  left: -4%;
  width: 25%;
  padding: 4px;
  border: 1px solid #b9c3a7;
  border-radius: 17px;
  background: #fff;
  box-shadow: 0 9px 25px #35452934;
  transform: rotate(-8deg);
}
.mobile-device img { border-radius: 13px; }
.mobile-device > span { position: absolute; left: -10%; bottom: -23px; width: 120%; color: #344a2c; font-size: 10px; font-weight: 800; }

.questions-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(30px, 7vw, 100px); }
.questions-intro { max-width: 400px; margin-block: 16px; color: var(--muted); font-size: 15px; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 15px; padding-block: 16px; list-style: none; font-weight: 800; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary > span { color: var(--violet); font-size: 22px; transition: transform .18s; }
.faq details[open] summary > span { transform: rotate(45deg); }
.faq p { padding: 0 22px 15px 0; color: var(--muted); font-size: 14px; }
.final-section { padding-bottom: 55px; }
.final-card {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  overflow: hidden;
  min-height: 480px;
  border-radius: var(--curve);
  background: #623eac;
  color: #fff;
}
.final-copy { z-index: 2; padding: clamp(26px, 4vw, 53px); }
.final-copy .eyebrow { color: #eee1fc; }
.final-copy h2 { font-size: clamp(39px, 5.2vw, 72px); }
.final-copy h2 span { color: var(--lime); }
.final-copy > p:not(.eyebrow) { max-width: 430px; margin-top: 16px; color: #f0e6fa; font-size: 15px; }
.final-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 9px 16px; margin-top: 19px; }
.final-actions .primary { background: var(--lime); color: var(--ink); }
.final-actions .primary:hover { background: #f5f8cd; }
.final-actions .text-link:hover { color: #fff; }
.final-note { display: block; margin-top: 10px; color: #e7d7f8; font-size: 11px; }
.final-art { align-self: end; width: 109%; max-width: none; margin: 0 0 0 -8%; }
.footer-top { display: flex; align-items: center; gap: 28px; padding-bottom: 17px; }
.footer-top p { color: var(--muted); font-size: 12px; }
.footer-top .inline-link { margin-left: auto; }
.footer-bottom { display: flex; justify-content: space-between; gap: 18px; padding-block: 13px 21px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }
.footer-bottom > span:first-child { max-width: 700px; }
.footer-bottom > span:last-child { white-space: nowrap; }

.screenshot-dialog {
  width: min(1400px, 95vw);
  max-width: 95vw;
  max-height: 92dvh;
  padding: 0;
  border: 1px solid #cebbdd;
  border-radius: 15px;
  background: #fcf7ff;
  color: var(--ink);
  box-shadow: 0 20px 80px #0005;
}
.screenshot-dialog::backdrop { background: #201529be; backdrop-filter: blur(5px); }
.dialog-toolbar { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; background: #fcf7ff; }
.dialog-toolbar p { font-size: 13px; font-weight: 800; }
.dialog-close { flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 8px; background: #fff; font-size: 12px; }
.dialog-close span { font-size: 20px; line-height: 1; }
.dialog-image-wrap { overflow: auto; background: #e9e0ef; }
.dialog-image-wrap img { width: 100%; min-width: 780px; max-width: none; }
.dialog-hint { padding: 8px 14px; color: var(--muted); font-size: 11px; }

@media (max-width: 1050px) {
  .shell { width: calc(100% - 56px); }
  .hero-layout { min-height: 535px; }
  .hero-visual { height: 515px; }
  h1 { font-size: clamp(49px, 6.2vw, 69px); }
  .hero-bottom a { padding-inline: 9px; }
  .hero-bottom a > span { width: 35px; height: 35px; }
  .demo-label { display: none; }
  .practice-art { height: 290px; }
  .writing-card .practice-art { height: 265px; }
}
@media (max-width: 820px) {
  h1 { font-size: clamp(42px, 6vw, 49px); }
  .nav-links { display: none; }
  .hero-layout { gap: 11px; }
  .hero-visual { height: 466px; }
  .hero-top-note { left: 0; top: 35px; font-size: 9px; }
  .hero-sticker { right: 0; bottom: 26px; }
  .hero-word { bottom: 37px; left: 0; padding: 8px; }
  .hero-word > span[lang] { font-size: 18px; }
  .hero-word small { font-size: 9px; }
  .hero-bottom { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .section-heading { align-items: center; }
  .section-heading .section-intro { max-width: 260px; }
  .gallery-heading .section-intro { max-width: 465px; }
  .gallery-art { width: 28%; }
  .gallery-layout { grid-template-columns: 1fr; gap: 10px; }
  .screen-tabs { display: flex; overflow: auto; padding: 4px; margin: -4px; }
  .screen-tabs button { min-height: 43px; flex: none; white-space: nowrap; font-size: 12px; }
  .conversation-art { min-height: 450px; }
  .teacher-layout { grid-template-columns: 1fr .8fr; }
  .teacher-art { min-height: 510px; }
  .teacher-note { bottom: 8%; }
  .workflow-layout { grid-template-columns: 1fr 1fr; }
  .practice-art, .writing-card .practice-art { height: 235px; }
  .mobile-visual { min-height: 430px; }
  .final-card { min-height: 405px; }
}
@media (max-width: 650px) {
  html { scroll-padding-top: 83px; }
  .shell { width: calc(100% - 34px); }
  .site-header { padding-block: 8px; }
  .nav { min-height: 54px; padding: 5px 6px 5px 9px; }
  .brand-mark { width: 34px; height: 34px; font-size: 21px; }
  .brand > span:last-child { font-size: 17px; }
  .button-small { min-height: 38px; padding-inline: 11px; font-size: 11px; }
  .hero-layout { display: block; min-height: 0; }
  .hero-copy { padding-block: 27px 0; }
  .eyebrow { margin-bottom: 13px; font-size: 10px; }
  h1 { margin-bottom: 16px; font-size: clamp(43px, 12vw, 63px); }
  .hero-lead { font-size: 15px; }
  .hero-actions { gap: 6px 13px; margin-top: 15px; }
  .hero-actions .button { min-height: 46px; padding-inline: 13px; font-size: 12px; }
  .hero-actions .text-link { font-size: 12px; }
  .hero-notes { margin-top: 8px; font-size: 10px; }
  .hero-visual { width: min(100%, 450px); height: clamp(350px, 111vw, 458px); margin-inline: auto; }
  .hero-backdrop { inset: 31px 0 16px 8%; }
  .hero-top-note { top: 16px; }
  .hero-sticker { top: 21px; bottom: auto; padding: 6px 8px; }
  .hero-sticker span { font-size: 16px; }
  .hero-sticker small { font-size: 8px; }
  .hero-product { left: 2%; top: 31%; width: 79%; }
  .hero-student { right: -5%; bottom: 7px; width: 71%; height: 91%; }
  .hero-word { bottom: 25px; left: 2%; }
  .hero-bottom { gap: 7px; margin-top: 4px; margin-bottom: 20px; }
  .hero-bottom a { gap: 7px; min-height: 61px; padding: 7px; border-radius: 12px; }
  .hero-bottom a > span { width: 32px; height: 32px; font-size: 20px; border-radius: 8px; }
  .hero-bottom b { font-size: 11px; }
  .hero-bottom small { font-size: 9px; }
  .hero-bottom i { display: none; }
  .section { padding-block: 54px; }
  .screens-section, .teacher-section, .mobile-section { margin-inline: 7px; border-radius: 22px; }
  .screens-section .shell, .teacher-section .shell, .mobile-section .shell { width: calc(100% - 30px); }
  .section-heading { display: block; margin-bottom: 21px; }
  .section-heading .section-intro { max-width: none; margin-top: 12px; font-size: 14px; }
  .gallery-art { width: min(215px, 64%); margin: 6px 0 -5px auto; }
  .screen-panel { padding: 7px; border-radius: 13px; }
  .screen-description { padding: 6px 4px 10px; }
  .screen-description h3 { font-size: 15px; }
  .screen-description p { font-size: 12px; }
  .screen-counter { display: none; }
  .zoom-label { padding: 4px 6px; right: 6px; bottom: 6px; font-size: 9px; }
  .screens-note { font-size: 11px; }
  .screens-note a { margin-left: 0; }
  .conversation-layout, .workflow-layout, .questions-layout, .teacher-layout, .mobile-layout { grid-template-columns: 1fr; gap: 18px; }
  .conversation-art { order: 1; min-height: 340px; }
  .conversation-art img { width: min(245px, 70%); }
  .story-copy h2 { font-size: 36px; }
  .story-copy h2 br:nth-of-type(2) { display: none; }
  .phrase-example { padding: 10px; }
  .example-message { min-height: 106px; }
  .practice-section { padding-top: 8px; }
  .practice-cards { grid-template-columns: 1fr; gap: 14px; }
  .practice-card { border-radius: 22px; }
  .writing-card { margin: 0; }
  .practice-card-copy { padding-bottom: 24px; }
  .teacher-copy, .mobile-copy { padding-block: 40px 0; }
  .teacher-copy h2 { font-size: 41px; }
  .teacher-tools { gap: 8px; }
  .teacher-tools h3 { font-size: 13px; }
  .teacher-art { min-height: 0; }
  .teacher-art img { width: min(330px, 88%); max-height: 470px; }
  .teacher-note { bottom: 9%; }
  .workflow-visual { padding: 10px; }
  .mobile-visual { min-height: 350px; }
  .mobile-device { left: 2%; }
  .group-art { right: -4%; }
  .faq summary { font-size: 14px; }
  .final-card { grid-template-columns: 1fr; min-height: 0; }
  .final-copy { padding-bottom: 0; }
  .final-art { width: 100%; margin: 0; }
  .footer-top { flex-wrap: wrap; gap: 10px; }
  .footer-top .inline-link { margin-left: 0; }
  .footer-bottom { flex-direction: column; gap: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}