:root {
  --ie2-ink: #142033;
  --ie2-muted: #59687b;
  --ie2-navy: #071f4f;
  --ie2-blue: #2454a6;
  --ie2-teal: #0f766e;
  --ie2-gold: #d9a441;
  --ie2-coral: #c8463f;
  --ie2-green: #1f8264;
  --ie2-paper: #ffffff;
  --ie2-soft: #f4f7fb;
  --ie2-line: rgba(7, 31, 79, 0.13);
  --ie2-shadow: 0 18px 42px rgba(7, 31, 79, 0.13);
}

.english-intermediate2-page {
  min-width: 0;
  overflow-x: hidden;
  background: var(--ie2-soft);
  color: var(--ie2-ink);
}

.english-intermediate2-page .site-header {
  position: relative;
}

.english-intermediate2-page .navbar {
  align-items: center;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.english-intermediate2-page .nav-links {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin-left: 0;
  margin-right: 0;
}

.english-intermediate2-page *,
.english-intermediate2-page *::before,
.english-intermediate2-page *::after {
  box-sizing: border-box;
}

.intermediate2-hero {
  min-height: min(690px, 76vh);
  display: grid;
  align-items: end;
  padding: 96px max(18px, calc((100% - 1180px) / 2)) 54px;
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(3, 12, 32, 0.9) 0%, rgba(7, 31, 79, 0.72) 42%, rgba(7, 31, 79, 0.16) 100%),
    url("../img/english-intermediate-2/intermediate-2-home-hero-v1.png") center / cover no-repeat;
}

.intermediate2-hero-content {
  width: min(690px, 100%);
  color: var(--ie2-paper);
}

.intermediate2-kicker {
  width: fit-content;
  margin: 0 0 0.7rem;
  padding: 0.38rem 0.62rem;
  border-radius: 999px;
  background: rgba(217, 164, 65, 0.18);
  color: #ffda81;
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.intermediate2-hero h1 {
  max-width: 11ch;
  margin: 0;
  color: var(--ie2-paper);
  font-size: clamp(2.45rem, 7vw, 5.4rem);
  line-height: 1.02;
  text-shadow: 0 3px 24px rgba(0, 0, 0, 0.45);
}

.intermediate2-hero p:not(.intermediate2-kicker) {
  max-width: 640px;
  margin: 1rem 0 0;
  color: rgba(255, 255, 255, 0.93);
  font-size: clamp(1rem, 2vw, 1.18rem);
  line-height: 1.65;
}

.intermediate2-hero-insights {
  max-width: 720px;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 1rem;
}

.intermediate2-hero-insights span {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.38rem 0.58rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.15;
  backdrop-filter: blur(10px);
}

.intermediate2-hero-insights strong {
  color: #ffda81;
  font-weight: 950;
}

.intermediate2-hero .intermediate2-hero-note {
  max-width: 620px;
  margin-top: 0.7rem;
  padding-left: 0.75rem;
  border-left: 3px solid rgba(217, 164, 65, 0.78);
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.92rem;
  line-height: 1.45;
}

.intermediate2-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.35rem;
}

.intermediate2-button,
.intermediate2-card-action {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.72rem 1rem;
  border: 1px solid var(--ie2-line);
  border-radius: 8px;
  background: var(--ie2-paper);
  color: var(--ie2-navy);
  font: inherit;
  font-weight: 900;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.intermediate2-button.primary,
.intermediate2-card-action {
  border-color: transparent;
  background: var(--ie2-teal);
  color: var(--ie2-paper);
}

.intermediate2-button.ghost {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.42);
  color: var(--ie2-paper);
}

.intermediate2-button:hover,
.intermediate2-card-action:hover {
  transform: translateY(-1px);
  text-decoration: none;
}

.intermediate2-card-action:disabled {
  border-color: rgba(7, 31, 79, 0.14);
  background: #e9eef6;
  color: #607086;
  cursor: not-allowed;
  transform: none;
}

.intermediate2-search.course-search-panel {
  position: relative;
  z-index: 2;
  margin-top: -26px;
}

.intermediate2-section-head,
.intermediate2-dashboard,
.intermediate2-unit-band,
.intermediate2-schedule {
  width: min(1180px, calc(100% - 36px));
  margin-inline: auto;
}

.intermediate2-section-card,
.intermediate2-unit-grid article,
.intermediate2-timeline article {
  border: 1px solid var(--ie2-line);
  border-radius: 8px;
  background: var(--ie2-paper);
  box-shadow: 0 12px 30px rgba(7, 31, 79, 0.08);
}

.intermediate2-section-head .intermediate2-kicker {
  background: #fff6dd;
  color: #8a5f09;
}

.intermediate2-section-head h2 {
  margin: 0;
  color: var(--ie2-navy);
  font-size: clamp(1.55rem, 3vw, 2.55rem);
  line-height: 1.08;
}

.intermediate2-section-head p {
  max-width: 760px;
  margin: 0.6rem 0 0;
  color: var(--ie2-muted);
  line-height: 1.65;
}

.intermediate2-section-head {
  padding: 3rem 0 1.1rem;
}

.intermediate2-section-head.compact {
  padding-top: 0;
}

.intermediate2-dashboard {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.intermediate2-section-card {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 0.65rem;
  overflow: hidden;
  padding: 0;
}

.intermediate2-section-card.important {
  border-top: 5px solid var(--ie2-coral);
}

.intermediate2-card-image {
  position: relative;
  aspect-ratio: 4 / 3;
  margin: 0;
  overflow: hidden;
  background: #dfe8f2;
}

.intermediate2-card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(7, 31, 79, 0.02), rgba(7, 31, 79, 0.22)),
    radial-gradient(circle at 88% 12%, rgba(217, 164, 65, 0.16), transparent 28%);
  pointer-events: none;
}

.intermediate2-card-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.intermediate2-section-card > :not(.intermediate2-card-image) {
  margin-left: 1.15rem;
  margin-right: 1.15rem;
}

.intermediate2-section-card > :last-child {
  margin-bottom: 1.15rem;
}

.intermediate2-number {
  width: 38px;
  height: 38px;
  margin-top: 1.15rem;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--ie2-navy);
  color: var(--ie2-paper);
  font-weight: 950;
}

.intermediate2-status {
  width: fit-content;
  padding: 0.26rem 0.5rem;
  border-radius: 999px;
  background: #eaf1ff;
  color: var(--ie2-blue);
  font-size: 0.75rem;
  font-weight: 950;
  text-transform: uppercase;
}

.intermediate2-status.shared {
  background: #e8f6f3;
  color: var(--ie2-teal);
}

.intermediate2-status.available {
  background: #ecfdf5;
  color: var(--ie2-green);
}

.intermediate2-section-card h3 {
  margin: 0;
  color: var(--ie2-navy);
  font-size: clamp(1.18rem, 2vw, 1.45rem);
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.intermediate2-section-card p {
  margin: 0;
  color: var(--ie2-muted);
  line-height: 1.55;
}

.intermediate2-card-action {
  width: fit-content;
  max-width: 100%;
  margin-top: 0.25rem;
}

.intermediate2-unit-band,
.intermediate2-schedule {
  margin-top: 3.2rem;
}

.intermediate2-unit-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
}

.intermediate2-unit-grid article {
  padding: 1rem;
}

.intermediate2-unit-grid b,
.intermediate2-timeline time {
  display: block;
  color: var(--ie2-teal);
  font-weight: 950;
}

.intermediate2-unit-grid span {
  display: block;
  margin-top: 0.35rem;
  color: var(--ie2-ink);
  line-height: 1.45;
}

.intermediate2-timeline {
  display: grid;
  gap: 0.65rem;
  padding-bottom: 4rem;
}

.intermediate2-timeline article {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 0.8rem;
  align-items: center;
  padding: 0.85rem 1rem;
}

.intermediate2-timeline article.exam {
  border-left: 5px solid var(--ie2-coral);
  background: #fff8f2;
}

.intermediate2-timeline p {
  margin: 0;
  color: var(--ie2-ink);
  font-weight: 800;
  line-height: 1.35;
}

.ie2-overview-hero {
  min-height: min(560px, 68vh);
  display: grid;
  align-items: end;
  padding: 92px max(18px, calc((100% - 1180px) / 2)) 44px;
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(3, 12, 32, 0.9) 0%, rgba(7, 31, 79, 0.7) 46%, rgba(7, 31, 79, 0.2) 100%),
    url("../img/english-intermediate-2/units/unit-1-relationships-hero-v1.webp") center / cover no-repeat;
}

.ie2-overview-hero-copy {
  width: min(720px, 100%);
  color: var(--ie2-paper);
}

.ie2-overview-hero h1 {
  max-width: 12ch;
  margin: 0;
  color: var(--ie2-paper);
  font-size: clamp(2.35rem, 6.4vw, 5rem);
  line-height: 1.02;
  text-shadow: 0 3px 24px rgba(0, 0, 0, 0.45);
}

.ie2-overview-hero p:not(.intermediate2-kicker) {
  max-width: 660px;
  margin: 1rem 0 0;
  color: rgba(255, 255, 255, 0.92);
  font-size: clamp(1rem, 2vw, 1.15rem);
  line-height: 1.62;
}

.ie2-overview-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 1rem;
}

.ie2-overview-chips span {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 0.38rem 0.58rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.94);
  font-size: 0.82rem;
  font-weight: 850;
  backdrop-filter: blur(10px);
}

.ie2-overview-shell {
  width: min(1180px, calc(100% - 36px));
  margin: 1.4rem auto 4rem;
}

.ie2-unit-passport,
.ie2-overview-panel,
.ie2-teaching-route,
.ie2-course-map {
  border: 1px solid var(--ie2-line);
  border-radius: 8px;
  background: var(--ie2-paper);
  box-shadow: 0 12px 30px rgba(7, 31, 79, 0.08);
}

.ie2-unit-passport {
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(0, 1.1fr);
  gap: 0;
  overflow: hidden;
}

.ie2-unit-visual {
  min-height: 100%;
  margin: 0;
  background: #dfe8f2;
}

.ie2-unit-visual img {
  width: 100%;
  height: 100%;
  min-height: 330px;
  display: block;
  object-fit: cover;
}

.ie2-unit-main {
  display: grid;
  align-content: center;
  padding: clamp(1.25rem, 4vw, 2.6rem);
}

.ie2-unit-main .intermediate2-kicker,
.ie2-teaching-route .intermediate2-kicker,
.ie2-course-map .intermediate2-kicker {
  background: #fff6dd;
  color: #8a5f09;
}

.ie2-unit-main h2,
.ie2-teaching-route h2,
.ie2-course-map h2 {
  margin: 0;
  color: var(--ie2-navy);
  font-size: clamp(1.65rem, 3.4vw, 3rem);
  line-height: 1.08;
}

.ie2-unit-main p {
  margin: 0.85rem 0 0;
  color: var(--ie2-muted);
  line-height: 1.65;
}

.ie2-unit-main .ie2-unit-big-idea {
  color: var(--ie2-ink);
  font-size: clamp(1.08rem, 2vw, 1.25rem);
  font-weight: 900;
}

.ie2-overview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.9rem;
  margin-top: 0.9rem;
}

.ie2-overview-panel {
  min-width: 0;
  padding: 1.15rem;
}

.ie2-overview-panel h3 {
  margin: 0;
  color: var(--ie2-navy);
  font-size: clamp(1.12rem, 2vw, 1.35rem);
  line-height: 1.15;
}

.ie2-overview-panel p,
.ie2-overview-panel li {
  color: var(--ie2-muted);
  line-height: 1.58;
}

.ie2-overview-panel p {
  margin: 0.65rem 0 0;
}

.ie2-overview-panel ul {
  margin: 0.75rem 0 0;
  padding-left: 1.1rem;
}

.ie2-overview-panel code,
.ie2-route-list code {
  color: var(--ie2-blue);
  font-weight: 900;
}

.ie2-expression-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.75rem;
}

.ie2-expression-list span {
  padding: 0.48rem 0.62rem;
  border-radius: 999px;
  background: #eef7f6;
  color: var(--ie2-teal);
  font-weight: 900;
  line-height: 1.1;
}

.ie2-teaching-route,
.ie2-course-map {
  margin-top: 0.9rem;
  padding: clamp(1.15rem, 3vw, 2rem);
}

.ie2-route-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 1rem;
}

.ie2-route-list article {
  min-width: 0;
  padding: 1rem;
  border: 1px solid rgba(7, 31, 79, 0.1);
  border-radius: 8px;
  background: #fbfdff;
}

.ie2-route-list span {
  display: inline-grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 8px;
  background: var(--ie2-navy);
  color: var(--ie2-paper);
  font-size: 0.86rem;
  font-weight: 950;
}

.ie2-route-list h3 {
  margin: 0.65rem 0 0;
  color: var(--ie2-navy);
  font-size: 1.02rem;
  line-height: 1.18;
}

.ie2-route-list p {
  margin: 0.5rem 0 0;
  color: var(--ie2-muted);
  line-height: 1.55;
}

.ie2-course-map .intermediate2-unit-grid {
  margin-top: 1rem;
}

.ie2-lesson-block {
  margin-top: 0.9rem;
  padding: clamp(1.15rem, 3vw, 2rem);
  border: 1px solid var(--ie2-line);
  border-radius: 8px;
  background: var(--ie2-paper);
  box-shadow: 0 12px 30px rgba(7, 31, 79, 0.08);
}

.ie2-lesson-block:first-child {
  margin-top: 0;
}

.ie2-lesson-block .intermediate2-kicker {
  background: #fff6dd;
  color: #8a5f09;
}

.ie2-lesson-block h2 {
  margin: 0;
  color: var(--ie2-navy);
  font-size: clamp(1.55rem, 3.1vw, 2.65rem);
  line-height: 1.08;
}

.ie2-lesson-block h3 {
  margin: 0;
  color: var(--ie2-navy);
  line-height: 1.18;
}

.ie2-lesson-block p,
.ie2-lesson-block li,
.ie2-lesson-block td {
  color: var(--ie2-muted);
  line-height: 1.58;
}

.ie2-lesson-block code {
  color: var(--ie2-blue);
  font-weight: 900;
}

.ie2-lesson-lead {
  max-width: 880px;
  margin: 0.8rem 0 0;
  font-size: 1.03rem;
}

.ie2-rule-grid,
.ie2-note-grid,
.ie2-practice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
  margin-top: 1rem;
}

.ie2-rule-grid article,
.ie2-note-grid article,
.ie2-practice-grid article,
.ie2-formula-card,
.ie2-production-model {
  min-width: 0;
  padding: 1rem;
  border: 1px solid rgba(7, 31, 79, 0.1);
  border-radius: 8px;
  background: #fbfdff;
}

.ie2-rule-label {
  display: inline-flex;
  margin-bottom: 0.55rem;
  padding: 0.28rem 0.5rem;
  border-radius: 999px;
  background: #eef7f6;
  color: var(--ie2-teal);
  font-size: 0.76rem;
  font-weight: 950;
  text-transform: uppercase;
}

.ie2-model {
  padding: 0.58rem 0.68rem;
  border-left: 4px solid var(--ie2-teal);
  border-radius: 0 8px 8px 0;
  background: #f0fbf8;
  color: var(--ie2-ink) !important;
}

.ie2-error {
  padding: 0.58rem 0.68rem;
  border-left: 4px solid var(--ie2-coral);
  border-radius: 0 8px 8px 0;
  background: #fff5f3;
  color: var(--ie2-ink) !important;
}

.ie2-before-after {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
  margin-top: 1rem;
}

.ie2-before-after div {
  padding: 1rem;
  border-radius: 8px;
  background: #f7faff;
  border: 1px solid rgba(7, 31, 79, 0.1);
}

.ie2-before-after div:first-child {
  background: #fff8f2;
}

.ie2-before-after span {
  color: var(--ie2-navy);
  font-weight: 950;
}

.ie2-before-after p {
  margin: 0.45rem 0 0;
}

.ie2-pattern-stack {
  display: grid;
  gap: 0.65rem;
  margin-top: 1rem;
}

.ie2-pattern-stack article {
  display: grid;
  grid-template-columns: minmax(180px, 0.55fr) minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
  padding: 0.8rem 1rem;
  border: 1px solid rgba(7, 31, 79, 0.1);
  border-radius: 8px;
  background: #fbfdff;
}

.ie2-pattern-stack strong {
  color: var(--ie2-navy);
}

.ie2-pattern-stack p {
  margin: 0;
}

.ie2-vocab-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 1rem;
}

.ie2-vocab-grid article {
  min-width: 0;
  padding: 1rem;
  border: 1px solid rgba(7, 31, 79, 0.1);
  border-radius: 8px;
  background: linear-gradient(180deg, #fbfdff 0%, #f4f8ff 100%);
}

.ie2-vocab-grid strong {
  display: block;
  color: var(--ie2-teal);
  font-size: 1.02rem;
}

.ie2-vocab-grid span {
  display: block;
  margin-top: 0.25rem;
  color: var(--ie2-navy);
  font-size: 0.88rem;
  font-weight: 850;
}

.ie2-vocab-grid p {
  margin: 0.55rem 0 0;
}

.ie2-table-wrap {
  width: 100%;
  overflow-x: auto;
  margin-top: 1rem;
  border: 1px solid var(--ie2-line);
  border-radius: 8px;
}

.ie2-lesson-table {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
  background: #ffffff;
}

.ie2-lesson-table th,
.ie2-lesson-table td {
  padding: 0.85rem;
  border-bottom: 1px solid rgba(7, 31, 79, 0.1);
  text-align: left;
  vertical-align: top;
}

.ie2-lesson-table th {
  background: #eef4ff;
  color: var(--ie2-navy);
  font-weight: 950;
}

.ie2-formula-card,
.ie2-production-model {
  margin-top: 1rem;
}

.ie2-formula-card strong,
.ie2-production-model h3 {
  color: var(--ie2-navy);
}

.ie2-timeline-list {
  display: grid;
  gap: 0.65rem;
  margin: 1rem 0 0;
  padding: 0;
  counter-reset: relationship-step;
}

.ie2-timeline-list li {
  list-style: none;
  display: grid;
  grid-template-columns: minmax(150px, 0.35fr) minmax(0, 0.4fr) minmax(0, 0.8fr);
  gap: 0.75rem;
  align-items: start;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(7, 31, 79, 0.1);
  border-radius: 8px;
  background: #fbfdff;
}

.ie2-timeline-list strong {
  color: var(--ie2-teal);
}

.ie2-timeline-list span {
  color: var(--ie2-navy);
  font-weight: 800;
}

.ie2-timeline-list em {
  color: var(--ie2-muted);
  font-style: normal;
}

.ie2-practice-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ie2-practice-grid details {
  margin-top: 0.75rem;
  padding: 0.72rem;
  border-radius: 8px;
  background: #eef7f6;
}

.ie2-practice-grid summary {
  color: var(--ie2-teal);
  cursor: pointer;
  font-weight: 950;
}

.ie2-practice-grid details p {
  margin-bottom: 0;
  color: var(--ie2-ink);
}

.ie2-speaking-hero {
  width: 100%;
  min-height: clamp(410px, 52vw, 600px);
  display: flex;
  align-items: end;
  margin: 0;
  padding: clamp(4.2rem, 8vw, 7rem) 0 clamp(2rem, 5vw, 3.5rem);
  background:
    linear-gradient(90deg, rgba(3, 12, 32, 0.96) 0%, rgba(3, 12, 32, 0.84) 38%, rgba(3, 12, 32, 0.26) 72%, rgba(3, 12, 32, 0.08) 100%),
    url("../img/english-intermediate-2/unit-1/secret-social-circle/secret-social-circle-hero-v1.webp") center / cover no-repeat;
  color: #ffffff;
}

.ie2-speaking-hero-content {
  width: min(1180px, calc(100% - 36px));
  margin-inline: auto;
}

.ie2-speaking-hero h1 {
  max-width: 12ch;
  margin: 0;
  color: #ffffff;
  font-size: clamp(2.2rem, 6vw, 4.6rem);
  line-height: 0.98;
}

.ie2-speaking-hero p:not(.intermediate2-kicker) {
  max-width: 660px;
  margin: 0.85rem 0 0;
  color: rgba(255, 255, 255, 0.92);
  font-size: clamp(1rem, 2vw, 1.12rem);
  line-height: 1.58;
}

.ie2-speaking-hero p strong {
  color: #ffffff;
}

.ie2-speaking-hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

.ie2-speaking-hero-chips span {
  padding: 0.42rem 0.66rem;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 999px;
  background: rgba(3, 12, 32, 0.34);
  color: #ffffff;
  font-size: 0.86rem;
  font-weight: 900;
  backdrop-filter: blur(8px);
}

.ie2-speaking-shell {
  width: min(1180px, calc(100% - 36px));
  margin: 1.4rem auto 4rem;
}

.ie2-speaking-block {
  margin-top: 0.9rem;
  padding: clamp(1.1rem, 3vw, 1.8rem);
  border: 1px solid var(--ie2-line);
  border-radius: 8px;
  background: var(--ie2-paper);
  box-shadow: 0 12px 30px rgba(7, 31, 79, 0.08);
}

.ie2-speaking-block:first-child {
  margin-top: 0;
}

.ie2-speaking-block .intermediate2-kicker {
  background: #fff6dd;
  color: #8a5f09;
}

.ie2-speaking-block h2 {
  margin: 0;
  color: var(--ie2-navy);
  font-size: clamp(1.45rem, 3vw, 2.35rem);
  line-height: 1.08;
}

.ie2-speaking-block h3 {
  margin: 0;
  color: var(--ie2-navy);
}

.ie2-speaking-block p,
.ie2-speaking-block li {
  color: var(--ie2-muted);
  line-height: 1.58;
}

.ie2-speaking-block code,
.ie2-activity-targets code {
  color: var(--ie2-blue);
  font-weight: 950;
}

.ie2-activity-targets {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.65rem;
  margin-top: 1rem;
}

.ie2-activity-targets article {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.55rem;
  align-items: center;
  min-width: 0;
  padding: 0.72rem;
  border: 1px solid rgba(15, 118, 110, 0.16);
  border-radius: 8px;
  background: #eef8f6;
}

.ie2-activity-targets article > strong {
  color: var(--ie2-teal);
  font-size: 1.4rem;
}

.ie2-activity-targets span {
  color: var(--ie2-ink);
  line-height: 1.35;
}

.ie2-secret-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 1rem;
}

.ie2-secret-card {
  min-width: 0;
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  align-items: center;
  min-height: 116px;
  padding: 0.42rem;
  overflow: hidden;
  border: 1px solid rgba(15, 118, 110, 0.18);
  border-radius: 8px;
  background: linear-gradient(180deg, #fbfffe 0%, #eef8f6 100%);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.ie2-secret-card:hover,
.ie2-secret-card:focus-visible {
  border-color: var(--ie2-teal);
  box-shadow: 0 12px 26px rgba(7, 31, 79, 0.12);
  transform: translateY(-2px);
}

.ie2-secret-card.is-selected {
  border-color: var(--ie2-gold);
  box-shadow: 0 0 0 3px rgba(217, 164, 65, 0.22);
}

.ie2-secret-card img {
  width: 104px;
  height: 104px;
  display: block;
  border-radius: 6px;
  object-fit: cover;
}

.ie2-secret-card-copy {
  display: block;
  min-width: 0;
  padding: 0.35rem 0.5rem 0.35rem 0.65rem;
}

.ie2-secret-card strong {
  display: block;
  color: var(--ie2-teal);
  font-size: 1rem;
  line-height: 1.15;
}

.ie2-secret-card-copy > span {
  display: block;
  margin-top: 0.45rem;
  color: var(--ie2-muted);
  line-height: 1.42;
}

.ie2-secret-card-status {
  margin: 0.75rem 0 0;
  padding: 0.72rem 0.85rem;
  border-left: 4px solid var(--ie2-gold);
  border-radius: 8px;
  background: #fff7df;
  color: var(--ie2-navy) !important;
  font-weight: 900;
}

.ie2-secret-card-privacy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  margin-top: 0.65rem;
  padding: 0.62rem 0.9rem;
  border: 1px solid var(--ie2-teal);
  border-radius: 8px;
  background: #ffffff;
  color: var(--ie2-teal);
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.ie2-secret-card-privacy:hover,
.ie2-secret-card-privacy:focus-visible {
  background: #eef8f6;
  box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.16);
}

.ie2-secret-card-privacy[hidden] {
  display: none;
}

.ie2-clue-builder,
.ie2-question-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 1rem;
}

.ie2-clue-builder article,
.ie2-question-grid article {
  min-width: 0;
  padding: 0.95rem;
  border: 1px solid rgba(7, 31, 79, 0.1);
  border-radius: 8px;
  background: #fbfdff;
}

.ie2-phrase-bank {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

.ie2-phrase-bank span {
  padding: 0.55rem 0.68rem;
  border-radius: 999px;
  background: #eef4ff;
  color: var(--ie2-blue);
  font-weight: 900;
}

.ie2-dialogue-card {
  display: grid;
  gap: 0.55rem;
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid rgba(7, 31, 79, 0.1);
  border-radius: 8px;
  background: #fbfdff;
}

.ie2-dialogue-card p {
  margin: 0;
  padding: 0.62rem 0.72rem;
  border-radius: 8px;
  background: #ffffff;
}

.ie2-dialogue-card strong {
  color: var(--ie2-navy);
}

.ie2-speaking-steps {
  display: grid;
  gap: 0.55rem;
  margin: 1rem 0 0;
  padding: 0;
}

.ie2-speaking-steps li {
  list-style: none;
  padding: 0.72rem 0.85rem;
  border: 1px solid rgba(7, 31, 79, 0.1);
  border-radius: 8px;
  background: #fbfdff;
}

.ie2-round-check {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
  margin-top: 0.75rem;
}

.ie2-round-check span {
  min-width: 0;
  padding: 0.72rem 0.8rem;
  border: 1px solid rgba(15, 118, 110, 0.16);
  border-radius: 8px;
  background: #eef8f6;
  color: var(--ie2-ink);
}

.ie2-round-check span::before {
  content: "✓";
  margin-right: 0.45rem;
  color: var(--ie2-teal);
  font-weight: 950;
}

@media (max-width: 980px) {
  .intermediate2-dashboard,
  .intermediate2-unit-grid,
  .ie2-overview-grid,
  .ie2-route-list,
  .ie2-vocab-grid,
  .ie2-practice-grid,
  .ie2-activity-targets,
  .ie2-secret-card-grid,
  .ie2-clue-builder,
  .ie2-question-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ie2-unit-passport {
    grid-template-columns: 1fr;
  }

}

@media (max-width: 640px) {
  .english-intermediate2-page .site-header {
    position: relative;
  }

  .english-intermediate2-page .navbar {
    display: grid;
    width: 100%;
    max-width: 100%;
    gap: 0.65rem;
    padding: 0.7rem 0.85rem;
    overflow: hidden;
  }

  .english-intermediate2-page .brand {
    justify-content: center;
  }

  .english-intermediate2-page .nav-links {
    width: 100%;
    max-width: 100%;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 0.45rem;
    overflow-x: auto;
    padding: 0.1rem 0 0.35rem;
    scrollbar-width: thin;
  }

  .english-intermediate2-page .nav-links li {
    flex: 0 0 auto;
  }

  .english-intermediate2-page .nav-links a,
  .english-intermediate2-page .jl-course-switcher-button {
    min-height: 38px;
    padding: 0.45rem 0.62rem;
    border-radius: 999px;
    background: #eef4ff;
    white-space: nowrap;
  }

  .intermediate2-hero {
    min-height: auto;
    align-items: end;
    padding: 30px 18px 30px;
    background:
      linear-gradient(180deg, rgba(3, 12, 32, 0.24) 0%, rgba(3, 12, 32, 0.86) 54%, rgba(3, 12, 32, 0.94) 100%),
      url("../img/english-intermediate-2/intermediate-2-home-hero-v1.png") 57% center / cover no-repeat;
  }

  .ie2-overview-hero {
    min-height: auto;
    align-items: end;
    padding: 34px 18px 30px;
    background:
      linear-gradient(180deg, rgba(3, 12, 32, 0.18) 0%, rgba(3, 12, 32, 0.78) 48%, rgba(3, 12, 32, 0.95) 100%),
      url("../img/english-intermediate-2/units/unit-1-relationships-hero-v1.webp") 58% center / cover no-repeat;
  }

  .ie2-overview-hero h1 {
    max-width: 10ch;
    font-size: clamp(2rem, 10.5vw, 3rem);
  }

  .ie2-overview-hero p:not(.intermediate2-kicker) {
    margin-top: 0.75rem;
    font-size: 0.96rem;
    line-height: 1.45;
  }

  .ie2-overview-chips {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.42rem;
  }

  .ie2-overview-chips span {
    justify-content: center;
    min-height: 32px;
    padding: 0.34rem 0.48rem;
    font-size: 0.76rem;
    text-align: center;
  }

  .intermediate2-hero h1 {
    max-width: 9.5ch;
    font-size: clamp(2rem, 11vw, 3rem);
  }

  .intermediate2-hero p:not(.intermediate2-kicker) {
    margin-top: 0.75rem;
    font-size: 0.96rem;
    line-height: 1.45;
  }

  .intermediate2-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
    margin-top: 1rem;
  }

  .intermediate2-button,
  .intermediate2-card-action {
    width: 100%;
    min-height: 42px;
    padding: 0.58rem 0.72rem;
  }

  .intermediate2-hero-insights {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.42rem;
  }

  .intermediate2-hero-insights span {
    min-height: 32px;
    align-items: center;
    padding: 0.34rem 0.48rem;
    font-size: 0.76rem;
  }

  .intermediate2-hero .intermediate2-hero-note {
    margin-top: 0.55rem;
    font-size: 0.84rem;
    line-height: 1.35;
  }

  .intermediate2-search.course-search-panel,
  .intermediate2-section-head,
  .intermediate2-dashboard,
  .intermediate2-unit-band,
  .intermediate2-schedule,
  .ie2-overview-shell,
  .ie2-speaking-shell {
    width: min(100% - 24px, 1180px);
  }

  .intermediate2-dashboard,
  .intermediate2-unit-grid,
  .ie2-overview-grid,
  .ie2-route-list,
  .ie2-rule-grid,
  .ie2-note-grid,
  .ie2-before-after,
  .ie2-vocab-grid,
  .ie2-practice-grid,
  .ie2-activity-targets,
  .ie2-clue-builder,
  .ie2-question-grid,
  .ie2-round-check {
    grid-template-columns: 1fr;
  }

  .ie2-pattern-stack article,
  .ie2-timeline-list li {
    grid-template-columns: 1fr;
  }

  .ie2-lesson-block {
    margin-top: 0.75rem;
    padding: 1rem;
  }

  .ie2-speaking-hero {
    width: 100%;
    min-height: auto;
    margin: 0;
    padding: 5.25rem 0 1.4rem;
    background:
      linear-gradient(180deg, rgba(3, 12, 32, 0.22) 0%, rgba(3, 12, 32, 0.76) 48%, rgba(3, 12, 32, 0.96) 100%),
      url("../img/english-intermediate-2/unit-1/secret-social-circle/secret-social-circle-hero-v1.webp") 61% center / cover no-repeat;
  }

  .ie2-speaking-hero-content {
    width: min(100% - 24px, 1180px);
  }

  .ie2-speaking-hero h1 {
    max-width: 11ch;
    font-size: clamp(2rem, 10vw, 3.15rem);
  }

  .ie2-speaking-hero p:not(.intermediate2-kicker) {
    max-width: 34rem;
    font-size: 0.94rem;
    line-height: 1.45;
  }

  .ie2-speaking-hero-chips {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.42rem;
  }

  .ie2-speaking-hero-chips span {
    padding: 0.36rem 0.5rem;
    font-size: 0.76rem;
    text-align: center;
  }

  .ie2-speaking-block {
    margin-top: 0.75rem;
    padding: 1rem;
  }

  .ie2-secret-card-grid {
    grid-template-columns: 1fr;
    gap: 0.45rem;
  }

  .ie2-secret-card img {
    width: 96px;
    height: 96px;
  }

  .ie2-secret-card {
    grid-template-columns: 96px minmax(0, 1fr);
    min-height: 108px;
    padding: 0.35rem;
  }

  .ie2-secret-card-copy {
    padding: 0.25rem 0.38rem 0.25rem 0.55rem;
  }

  .ie2-secret-card strong {
    font-size: 0.96rem;
  }

  .ie2-secret-card-copy > span {
    font-size: 0.86rem;
    line-height: 1.32;
  }

  .ie2-lesson-lead {
    font-size: 0.98rem;
    line-height: 1.5;
  }

  .ie2-unit-visual img {
    min-height: 235px;
  }

  .ie2-unit-main,
  .ie2-overview-panel,
  .ie2-teaching-route,
  .ie2-course-map {
    padding: 1rem;
  }

  .intermediate2-timeline article {
    grid-template-columns: 1fr;
  }
}

.ie2-reading-hero {
  width: 100%;
  min-height: clamp(440px, 54vw, 610px);
  display: flex;
  align-items: end;
  padding: clamp(4.5rem, 8vw, 7rem) 0 clamp(2rem, 5vw, 3.5rem);
  background:
    linear-gradient(90deg, rgba(3, 12, 32, 0.97) 0%, rgba(3, 12, 32, 0.88) 35%, rgba(3, 12, 32, 0.48) 62%, rgba(3, 12, 32, 0.12) 100%),
    url("../img/english-intermediate-2/unit-1/saturday-table-reading/saturday-table-reading-hero-v1.webp") center / cover no-repeat;
  color: #ffffff;
}

.ie2-midnight-reading-page .ie2-reading-hero {
  background:
    linear-gradient(90deg, rgba(3, 12, 32, 0.98) 0%, rgba(3, 12, 32, 0.9) 37%, rgba(3, 12, 32, 0.34) 68%, rgba(3, 12, 32, 0.05) 100%),
    url("../img/english-intermediate-2/unit-2/answer-before-midnight-reading/answer-before-midnight-reading-hero-v1.webp") center / cover no-repeat;
}

.ie2-session-reading-page .ie2-reading-hero {
  min-height: clamp(400px, 47vw, 560px);
  background:
    linear-gradient(90deg, rgba(3, 12, 32, 0.96) 0%, rgba(3, 12, 32, 0.82) 38%, rgba(3, 12, 32, 0.25) 68%, rgba(3, 12, 32, 0.03) 100%),
    url("../img/english-intermediate-2/unit-3/session-stayed-open-reading/session-stayed-open-reading-hero-v1.png") center / cover no-repeat;
}

.ie2-session-reading-page .ie2-reading-hero h1 {
  max-width: 14ch;
  font-size: clamp(2.35rem, 5.25vw, 4.35rem);
}

.ie2-reading-hero-content {
  width: min(1180px, calc(100% - 36px));
  margin-inline: auto;
}

.ie2-reading-hero h1 {
  max-width: 11ch;
  margin: 0;
  color: #ffffff;
  font-size: clamp(2.35rem, 6vw, 5rem);
  line-height: 0.95;
}

.ie2-reading-subtitle {
  margin: 0.55rem 0 0 !important;
  color: #f5d88f !important;
  font-size: clamp(1.15rem, 2.5vw, 1.65rem) !important;
  font-weight: 950;
}

.ie2-reading-hero p:not(.intermediate2-kicker) {
  max-width: 670px;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.55;
}

.ie2-reading-hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

.ie2-reading-hero-chips span {
  padding: 0.42rem 0.66rem;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 999px;
  background: rgba(3, 12, 32, 0.34);
  color: #ffffff;
  font-size: 0.84rem;
  font-weight: 900;
  backdrop-filter: blur(8px);
}

.ie2-reading-shell {
  width: min(1180px, calc(100% - 36px));
  margin: 1.35rem auto 4rem;
}

.ie2-reading-block,
.ie2-reading-next {
  margin-top: 0.9rem;
  padding: clamp(1.1rem, 3vw, 1.8rem);
  border: 1px solid var(--ie2-line);
  border-radius: 8px;
  background: var(--ie2-paper);
  box-shadow: 0 12px 30px rgba(7, 31, 79, 0.08);
}

.ie2-reading-block:first-child {
  margin-top: 0;
}

.ie2-reading-block .intermediate2-kicker,
.ie2-reading-next .intermediate2-kicker {
  background: #fff6dd;
  color: #8a5f09;
}

.ie2-reading-block h2,
.ie2-reading-next h2 {
  margin: 0;
  color: var(--ie2-navy);
  font-size: clamp(1.5rem, 3vw, 2.45rem);
  line-height: 1.08;
}

.ie2-reading-block h3,
.ie2-reading-next h3 {
  color: var(--ie2-navy);
}

.ie2-reading-block > p,
.ie2-reading-next p {
  color: var(--ie2-muted);
  line-height: 1.6;
}

.ie2-reading-block code {
  color: var(--ie2-blue);
  font-weight: 950;
}

.ie2-reading-focus-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem;
  margin-top: 1rem;
}

.ie2-reading-focus-grid article {
  min-width: 0;
  padding: 0.9rem;
  border: 1px solid rgba(7, 31, 79, 0.1);
  border-radius: 8px;
  background: #fbfdff;
}

.ie2-reading-focus-grid article > span {
  color: var(--ie2-gold);
  font-size: 0.8rem;
  font-weight: 950;
}

.ie2-reading-focus-grid h3,
.ie2-reading-focus-grid p {
  margin: 0.3rem 0 0;
}

.ie2-reading-focus-grid p {
  color: var(--ie2-muted);
  line-height: 1.48;
}

.ie2-reading-character-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
  margin-top: 1rem;
}

.ie2-reading-character-grid article {
  min-width: 0;
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  align-items: center;
  min-height: 88px;
  padding: 0.38rem;
  border: 1px solid rgba(15, 118, 110, 0.18);
  border-radius: 8px;
  background: linear-gradient(180deg, #fbfffe 0%, #eef8f6 100%);
}

.ie2-reading-character-grid img {
  width: 76px;
  height: 76px;
  display: block;
  border-radius: 6px;
  object-fit: cover;
}

.ie2-reading-character-grid h3,
.ie2-reading-character-grid p {
  margin: 0;
}

.ie2-reading-character-grid div {
  min-width: 0;
  padding-inline: 0.65rem 0.4rem;
}

.ie2-reading-character-grid p {
  margin-top: 0.2rem;
  color: var(--ie2-teal);
  font-weight: 900;
}

.ie2-prediction-options,
.ie2-reading-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 0.85rem;
}

.ie2-prediction-options button {
  min-height: 44px;
  padding: 0.6rem 0.82rem;
  border: 1px solid var(--ie2-line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--ie2-navy);
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.ie2-prediction-options button:hover,
.ie2-prediction-options button:focus-visible,
.ie2-prediction-options button.is-selected {
  border-color: var(--ie2-teal);
  background: #eef8f6;
  color: var(--ie2-teal);
}

.ie2-reading-status,
.ie2-reading-result {
  display: none;
  margin: 0.75rem 0 0 !important;
  padding: 0.72rem 0.85rem;
  border-left: 4px solid var(--ie2-gold);
  border-radius: 8px;
  background: #fff7df;
  color: var(--ie2-navy) !important;
  font-weight: 900;
}

.ie2-reading-status {
  display: block;
}

.ie2-reading-vocab-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
  margin-top: 1rem;
}

.ie2-reading-vocab-grid details,
.ie2-language-detective article {
  min-width: 0;
  border: 1px solid rgba(7, 31, 79, 0.1);
  border-radius: 8px;
  background: #fbfdff;
}

.ie2-reading-vocab-grid summary,
.ie2-language-detective summary {
  padding: 0.72rem 0.82rem;
  color: var(--ie2-navy);
  font-weight: 950;
  cursor: pointer;
}

.ie2-reading-vocab-grid details p,
.ie2-language-detective details p {
  margin: 0;
  padding: 0 0.82rem 0.78rem;
  color: var(--ie2-muted);
  line-height: 1.5;
}

.ie2-reading-heading {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: end;
}

.ie2-reading-heading > span {
  flex: 0 0 auto;
  padding: 0.42rem 0.65rem;
  border-radius: 999px;
  background: #eef8f6;
  color: var(--ie2-teal);
  font-weight: 950;
}

.ie2-chapter-nav {
  display: flex;
  gap: 0.45rem;
  margin-top: 1rem;
  padding-bottom: 0.3rem;
  overflow-x: auto;
  scrollbar-width: thin;
}

.ie2-chapter-nav a {
  flex: 0 0 auto;
  padding: 0.46rem 0.62rem;
  border: 1px solid var(--ie2-line);
  border-radius: 999px;
  background: #ffffff;
  color: var(--ie2-blue);
  font-size: 0.82rem;
  font-weight: 900;
  text-decoration: none;
}

.ie2-story-card {
  max-width: 760px;
  margin: 1rem auto 0;
  padding: clamp(1rem, 4vw, 2rem);
  border: 1px solid rgba(7, 31, 79, 0.1);
  border-radius: 8px;
  background: #fffefa;
}

.ie2-story-card section + section {
  margin-top: 2.15rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(7, 31, 79, 0.12);
}

.ie2-story-card h3 {
  margin: 0.2rem 0 0.9rem;
  font-size: clamp(1.35rem, 3vw, 1.85rem);
}

.ie2-story-card p {
  color: #26384e;
  font-size: clamp(1.02rem, 2vw, 1.1rem);
  line-height: 1.78;
}

.ie2-story-card strong {
  color: var(--ie2-blue);
}

.ie2-chapter-number {
  margin: 0 !important;
  color: var(--ie2-teal) !important;
  font-size: 0.78rem !important;
  font-weight: 950;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.ie2-reading-pause {
  padding: 0.75rem 0.85rem;
  border-left: 4px solid var(--ie2-gold);
  border-radius: 8px;
  background: #fff7df;
  color: var(--ie2-navy) !important;
  font-size: 0.96rem !important;
  line-height: 1.5 !important;
}

.ie2-language-detective {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
  margin-top: 1rem;
}

.ie2-language-detective article > p {
  margin: 0;
  padding: 0.82rem;
  color: var(--ie2-ink);
  line-height: 1.52;
}

.ie2-reading-quiz {
  display: grid;
  gap: 0.7rem;
  margin-top: 1rem;
}

.ie2-reading-question {
  padding: 0.9rem;
  border: 1px solid rgba(7, 31, 79, 0.12);
  border-radius: 8px;
  background: #fbfdff;
}

.ie2-reading-question h3 {
  margin: 0 0 0.65rem;
  font-size: 1.02rem;
  line-height: 1.4;
}

.ie2-reading-question label {
  display: block;
  margin-top: 0.4rem;
  padding: 0.62rem 0.68rem;
  border: 1px solid rgba(7, 31, 79, 0.1);
  border-radius: 8px;
  background: #ffffff;
  color: var(--ie2-ink);
  cursor: pointer;
}

.ie2-reading-question label:has(input:checked) {
  border-color: var(--ie2-blue);
  background: #eef4ff;
}

.ie2-reading-question.is-correct {
  border-color: #86efac;
}

.ie2-reading-question.needs-review {
  border-color: #fdba74;
}

.ie2-question-feedback {
  display: none;
  margin: 0.65rem 0 0;
  padding: 0.68rem 0.75rem;
  border-radius: 8px;
  font-weight: 850;
  line-height: 1.45;
}

.ie2-question-feedback.show,
.ie2-reading-result.show {
  display: block;
}

.ie2-question-feedback.correct,
.ie2-reading-result.correct {
  border: 1px solid #86efac;
  background: #dcfce7;
  color: #065f46;
}

.ie2-question-feedback.needs-review,
.ie2-reading-result.needs-review {
  border: 1px solid #fdba74;
  background: #fff7ed;
  color: #7c2d12;
}

.ie2-reading-dialogue {
  display: grid;
  gap: 0.55rem;
  margin-top: 1rem;
  padding: 0.9rem;
  border: 1px solid rgba(7, 31, 79, 0.1);
  border-radius: 8px;
  background: #fbfdff;
}

.ie2-reading-dialogue p {
  margin: 0;
  padding: 0.62rem 0.72rem;
  border-radius: 8px;
  background: #ffffff;
  color: var(--ie2-muted);
  line-height: 1.5;
}

.ie2-reading-dialogue strong {
  color: var(--ie2-navy);
}

.ie2-reading-product-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(260px, 0.75fr);
  gap: 0.75rem;
  margin-top: 1rem;
}

.ie2-response-label {
  display: block;
  margin-bottom: 0.45rem;
  color: var(--ie2-navy);
  font-weight: 950;
}

#saturdayReadingResponse {
  width: 100%;
  min-height: 190px;
  padding: 0.85rem;
  border: 1px solid var(--ie2-line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--ie2-ink);
  font: inherit;
  line-height: 1.55;
  resize: vertical;
}

#saturdayReadingResponse:focus {
  border-color: var(--ie2-blue);
  outline: 3px solid rgba(36, 86, 159, 0.14);
}

.ie2-response-meta {
  display: flex;
  justify-content: space-between;
  gap: 0.6rem;
  margin-top: 0.45rem;
  color: var(--ie2-muted);
  font-size: 0.84rem;
}

.ie2-response-checklist {
  padding: 0.9rem;
  border: 1px solid rgba(15, 118, 110, 0.18);
  border-radius: 8px;
  background: #eef8f6;
}

.ie2-response-checklist h3 {
  margin: 0 0 0.65rem;
}

.ie2-response-checklist > span {
  display: block;
  margin-top: 0.4rem;
  padding: 0.55rem 0.62rem;
  border-radius: 8px;
  background: #ffffff;
  color: var(--ie2-muted);
}

.ie2-response-checklist > span::before {
  content: "○";
  margin-right: 0.45rem;
  color: var(--ie2-gold);
  font-weight: 950;
}

.ie2-response-checklist > span.is-ready {
  color: #065f46;
}

.ie2-response-checklist > span.is-ready::before {
  content: "✓";
  color: #059669;
}

.ie2-response-checklist details {
  margin-top: 0.75rem;
  border-top: 1px solid rgba(15, 118, 110, 0.16);
  padding-top: 0.65rem;
}

.ie2-response-checklist summary {
  color: var(--ie2-teal);
  font-weight: 950;
  cursor: pointer;
}

.ie2-response-checklist details p {
  color: var(--ie2-ink);
  line-height: 1.55;
}

.ie2-reading-next {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  background: linear-gradient(135deg, #ffffff 0%, #eef8f6 100%);
}

@media (max-width: 900px) {
  .ie2-reading-focus-grid,
  .ie2-reading-product-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .ie2-reading-hero {
    min-height: auto;
    padding: 5.25rem 0 1.4rem;
    background:
      linear-gradient(180deg, rgba(3, 12, 32, 0.16) 0%, rgba(3, 12, 32, 0.72) 43%, rgba(3, 12, 32, 0.97) 100%),
      url("../img/english-intermediate-2/unit-1/saturday-table-reading/saturday-table-reading-hero-v1.webp") 58% center / cover no-repeat;
  }

  .ie2-midnight-reading-page .ie2-reading-hero {
    background:
      linear-gradient(180deg, rgba(3, 12, 32, 0.1) 0%, rgba(3, 12, 32, 0.64) 42%, rgba(3, 12, 32, 0.98) 100%),
      url("../img/english-intermediate-2/unit-2/answer-before-midnight-reading/answer-before-midnight-reading-hero-v1.webp") 69% center / cover no-repeat;
  }

  .ie2-session-reading-page .ie2-reading-hero {
    background:
      linear-gradient(180deg, rgba(3, 12, 32, 0.08) 0%, rgba(3, 12, 32, 0.62) 42%, rgba(3, 12, 32, 0.98) 100%),
      url("../img/english-intermediate-2/unit-3/session-stayed-open-reading/session-stayed-open-reading-hero-v1.png") 70% center / cover no-repeat;
  }

  .ie2-session-reading-page .ie2-reading-hero h1 {
    max-width: 13ch;
    font-size: clamp(2rem, 9.2vw, 3rem);
  }

  .ie2-session-reading-page .ie2-chapter-nav {
    display: grid;
    grid-template-columns: 1fr;
    overflow-x: visible;
  }

  .ie2-session-reading-page .ie2-chapter-nav a {
    text-align: center;
  }

  .ie2-reading-hero-content,
  .ie2-reading-shell {
    width: min(100% - 24px, 1180px);
  }

  .ie2-reading-hero h1 {
    max-width: 10ch;
    font-size: clamp(2.1rem, 11vw, 3.25rem);
  }

  .ie2-reading-hero p:not(.intermediate2-kicker) {
    font-size: 0.94rem;
    line-height: 1.45;
  }

  .ie2-reading-hero-chips {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.42rem;
  }

  .ie2-reading-hero-chips span {
    padding: 0.36rem 0.45rem;
    font-size: 0.74rem;
    text-align: center;
  }

  .ie2-reading-block,
  .ie2-reading-next {
    padding: 1rem;
  }

  .ie2-reading-character-grid,
  .ie2-reading-vocab-grid,
  .ie2-language-detective {
    grid-template-columns: 1fr;
  }

  .ie2-reading-character-grid article {
    grid-template-columns: 64px minmax(0, 1fr);
    min-height: 74px;
    padding: 0.3rem;
  }

  .ie2-reading-character-grid img {
    width: 64px;
    height: 64px;
  }

  .ie2-prediction-options,
  .ie2-reading-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .ie2-prediction-options button,
  .ie2-reading-actions .intermediate2-button {
    width: 100%;
  }

  .ie2-reading-heading,
  .ie2-reading-next,
  .ie2-response-meta {
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
  }

  .ie2-reading-heading > span {
    width: fit-content;
  }

  .ie2-story-card {
    padding: 1rem;
  }

  .ie2-story-card p {
    font-size: 1rem;
    line-height: 1.68;
  }
}

.ie2-listening-hero {
  width: 100%;
  min-height: clamp(400px, 47vw, 560px);
  display: flex;
  align-items: end;
  padding: clamp(4.5rem, 8vw, 6.5rem) 0 clamp(1.6rem, 4vw, 2.8rem);
  background:
    linear-gradient(90deg, rgba(3, 12, 32, 0.98) 0%, rgba(3, 12, 32, 0.9) 35%, rgba(3, 12, 32, 0.38) 66%, rgba(3, 12, 32, 0.08) 100%),
    url("../img/english-intermediate-2/unit-1/noras-voice-note-listening/noras-voice-note-listening-hero-v1.png") center / cover no-repeat;
  color: #ffffff;
}

.ie2-midnight-listening-page .ie2-listening-hero {
  background:
    linear-gradient(90deg, rgba(3, 12, 32, 0.98) 0%, rgba(3, 12, 32, 0.91) 37%, rgba(3, 12, 32, 0.34) 68%, rgba(3, 12, 32, 0.06) 100%),
    url("../img/english-intermediate-2/unit-2/call-before-midnight-listening/call-before-midnight-listening-hero-v1.webp") center / cover no-repeat;
}

.ie2-message-listening-page .ie2-listening-hero {
  background:
    linear-gradient(90deg, rgba(3, 12, 32, 0.98) 0%, rgba(3, 12, 32, 0.91) 38%, rgba(3, 12, 32, 0.32) 69%, rgba(3, 12, 32, 0.04) 100%),
    url("../img/english-intermediate-2/unit-3/message-before-workshop-listening/message-before-workshop-listening-hero-v1.png") center / cover no-repeat;
}

.ie2-message-listening-page .ie2-listen-pass-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ie2-message-listening-page .ie2-listening-hero h1 {
  max-width: 14ch;
  font-size: clamp(2.35rem, 5.4vw, 4.35rem);
}

.ie2-midnight-listening-page .ie2-listen-pass-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.intermediate2-button.is-disabled {
  border-color: rgba(89, 104, 123, 0.2);
  background: #eef2f7;
  color: #66758a;
  cursor: not-allowed;
}

.ie2-listening-hero-content {
  width: min(1180px, calc(100% - 36px));
  margin-inline: auto;
}

.ie2-listening-hero h1 {
  max-width: 10ch;
  margin: 0;
  color: #ffffff;
  font-size: clamp(2.35rem, 6vw, 4.8rem);
  line-height: 0.96;
}

.ie2-listening-hero p:not(.intermediate2-kicker) {
  max-width: 610px;
  color: rgba(255, 255, 255, 0.92);
  line-height: 1.52;
}

.ie2-listening-hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.48rem;
  margin-top: 0.9rem;
}

.ie2-listening-hero-chips span {
  padding: 0.4rem 0.64rem;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 999px;
  background: rgba(3, 12, 32, 0.36);
  color: #ffffff;
  font-size: 0.82rem;
  font-weight: 900;
  backdrop-filter: blur(8px);
}

.ie2-listening-shell {
  width: min(1180px, calc(100% - 36px));
  margin: 1.35rem auto 4rem;
}

.ie2-listening-block {
  margin-top: 0.9rem;
  padding: clamp(1.1rem, 3vw, 1.8rem);
  border: 1px solid var(--ie2-line);
  border-radius: 8px;
  background: var(--ie2-paper);
  box-shadow: 0 12px 30px rgba(7, 31, 79, 0.08);
}

.ie2-listening-block:first-child {
  margin-top: 0;
}

.ie2-listening-block .intermediate2-kicker {
  background: #e8f7f5;
  color: var(--ie2-teal);
}

.ie2-listening-block h2 {
  margin: 0;
  color: var(--ie2-navy);
  font-size: clamp(1.5rem, 3vw, 2.45rem);
  line-height: 1.08;
}

.ie2-listening-block h3 {
  color: var(--ie2-navy);
}

.ie2-listening-block > p {
  color: var(--ie2-muted);
  line-height: 1.6;
}

.ie2-listening-block code {
  color: var(--ie2-blue);
  font-weight: 950;
}

.ie2-listening-focus-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem;
  margin-top: 1rem;
}

.ie2-listening-focus-grid article {
  min-width: 0;
  padding: 0.9rem;
  border: 1px solid rgba(15, 118, 110, 0.16);
  border-radius: 8px;
  background: linear-gradient(180deg, #fbfffe 0%, #eef8f6 100%);
}

.ie2-listening-focus-grid article > span {
  color: var(--ie2-teal);
  font-size: 0.8rem;
  font-weight: 950;
}

.ie2-listening-focus-grid h3,
.ie2-listening-focus-grid p {
  margin: 0.3rem 0 0;
}

.ie2-listening-focus-grid p {
  color: var(--ie2-muted);
  line-height: 1.48;
}

.ie2-listening-vocab-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
  margin-top: 1rem;
}

.ie2-listening-vocab-grid details {
  min-width: 0;
  border: 1px solid rgba(7, 31, 79, 0.1);
  border-radius: 8px;
  background: #fbfdff;
}

.ie2-listening-vocab-grid summary {
  padding: 0.72rem 0.82rem;
  color: var(--ie2-navy);
  font-weight: 950;
  cursor: pointer;
}

.ie2-listening-vocab-grid details p {
  margin: 0;
  padding: 0 0.82rem 0.78rem;
  color: var(--ie2-muted);
  line-height: 1.5;
}

.ie2-listening-heading {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: end;
}

.ie2-listening-heading > span {
  flex: 0 0 auto;
  padding: 0.42rem 0.65rem;
  border-radius: 999px;
  background: #eef8f6;
  color: var(--ie2-teal);
  font-weight: 950;
}

.ie2-audio-card {
  margin-top: 1rem;
  padding: 1rem;
  border: 1px solid rgba(36, 84, 166, 0.16);
  border-radius: 8px;
  background: linear-gradient(135deg, #071f4f 0%, #123b79 100%);
  color: #ffffff;
}

.ie2-speaker-row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: center;
  gap: 0.7rem;
}

.ie2-speaker-row img,
.ie2-speaker-avatar {
  width: 64px;
  height: 64px;
  display: block;
  border: 2px solid rgba(255, 255, 255, 0.82);
  border-radius: 8px;
}

.ie2-speaker-row img {
  object-fit: cover;
}

.ie2-speaker-avatar {
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #ffda81, #f59e8b);
  color: var(--ie2-navy);
  font-weight: 950;
  letter-spacing: -0.04em;
}

.ie2-speaker-row strong,
.ie2-speaker-row span {
  display: block;
}

.ie2-speaker-row strong {
  font-size: 1.05rem;
}

.ie2-speaker-row span {
  margin-top: 0.18rem;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.86rem;
}

.ie2-audio-card audio {
  width: 100%;
  display: block;
  margin-top: 0.85rem;
}

.ie2-audio-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.75rem;
}

.ie2-audio-controls > span {
  margin-right: 0.2rem;
  color: rgba(255, 255, 255, 0.76);
  font-size: 0.84rem;
  font-weight: 900;
}

.ie2-audio-controls button {
  min-width: 58px;
  min-height: 42px;
  padding: 0.45rem 0.6rem;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}

.ie2-audio-controls button:hover,
.ie2-audio-controls button:focus-visible,
.ie2-audio-controls button.is-active {
  border-color: #ffda81;
  background: #ffda81;
  color: var(--ie2-navy);
}

.ie2-audio-status {
  margin: 0.7rem 0 0 !important;
  color: rgba(255, 255, 255, 0.86) !important;
  font-size: 0.88rem;
  font-weight: 850;
}

.ie2-listen-pass-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
  margin-top: 0.8rem;
}

.ie2-listen-pass-grid article {
  min-width: 0;
  padding: 0.9rem;
  border: 1px solid rgba(7, 31, 79, 0.11);
  border-radius: 8px;
  background: #fbfdff;
}

.ie2-listen-pass-grid h3,
.ie2-listen-pass-grid p {
  margin: 0;
}

.ie2-listen-pass-grid p {
  margin-top: 0.4rem;
  color: var(--ie2-muted);
  line-height: 1.5;
}

.ie2-listen-pass-grid button {
  margin-top: 0.75rem;
}

.ie2-listen-pass-grid button.is-complete {
  border-color: var(--ie2-teal);
  background: #eef8f6;
  color: var(--ie2-teal);
}

.ie2-listening-progress {
  margin: 0.75rem 0 0 !important;
  padding: 0.7rem 0.8rem;
  border-left: 4px solid var(--ie2-teal);
  border-radius: 8px;
  background: #eef8f6;
  color: var(--ie2-navy) !important;
  font-weight: 900;
}

.ie2-transcript {
  margin-top: 1rem;
  border: 1px solid rgba(7, 31, 79, 0.12);
  border-radius: 8px;
  background: #fffefa;
}

.ie2-transcript summary {
  padding: 0.85rem;
  color: var(--ie2-blue);
  font-weight: 950;
  cursor: pointer;
}

.ie2-transcript > div {
  max-width: 760px;
  margin-inline: auto;
  padding: 0 1rem 1rem;
}

.ie2-transcript p {
  color: #26384e;
  font-size: 1.02rem;
  line-height: 1.7;
}

.ie2-speaking-prompt-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
  margin-top: 1rem;
}

.ie2-speaking-prompt-grid article {
  min-width: 0;
  padding: 0.78rem;
  border: 1px solid rgba(15, 118, 110, 0.16);
  border-radius: 8px;
  background: #eef8f6;
}

.ie2-speaking-prompt-grid strong,
.ie2-speaking-prompt-grid span {
  display: block;
}

.ie2-speaking-prompt-grid strong {
  color: var(--ie2-navy);
}

.ie2-speaking-prompt-grid span {
  margin-top: 0.28rem;
  color: var(--ie2-muted);
  line-height: 1.45;
}

.ie2-listening-dialogue {
  display: grid;
  gap: 0.48rem;
  margin-top: 1rem;
  padding: 0.9rem;
  border: 1px solid rgba(7, 31, 79, 0.1);
  border-radius: 8px;
  background: #fbfdff;
}

.ie2-listening-dialogue h3 {
  margin: 0 0 0.15rem;
}

.ie2-listening-dialogue p {
  margin: 0;
  padding: 0.6rem 0.68rem;
  border-radius: 8px;
  background: #ffffff;
  color: var(--ie2-muted);
  line-height: 1.5;
}

.ie2-listening-dialogue strong {
  color: var(--ie2-navy);
}

.ie2-rehearsal-timer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
  margin-top: 0.8rem;
  padding: 0.82rem;
  border: 1px solid rgba(217, 164, 65, 0.26);
  border-radius: 8px;
  background: #fff7df;
}

.ie2-rehearsal-timer > div {
  min-width: 110px;
  margin-right: auto;
}

.ie2-rehearsal-timer span,
.ie2-rehearsal-timer strong {
  display: block;
}

.ie2-rehearsal-timer span {
  color: #8a5f09;
  font-size: 0.8rem;
  font-weight: 900;
}

.ie2-rehearsal-timer strong {
  margin-top: 0.1rem;
  color: var(--ie2-navy);
  font-size: 1.55rem;
  font-variant-numeric: tabular-nums;
}

.ie2-private-note {
  margin: 0.65rem 0 0 !important;
  color: var(--ie2-muted) !important;
  font-size: 0.86rem;
  font-weight: 850;
}

@media (max-width: 900px) {
  .ie2-listening-focus-grid {
    grid-template-columns: 1fr;
  }

  .ie2-midnight-listening-page .ie2-listen-pass-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .ie2-listening-hero {
    min-height: auto;
    padding: 5rem 0 1.35rem;
    background:
      linear-gradient(180deg, rgba(3, 12, 32, 0.12) 0%, rgba(3, 12, 32, 0.68) 44%, rgba(3, 12, 32, 0.98) 100%),
      url("../img/english-intermediate-2/unit-1/noras-voice-note-listening/noras-voice-note-listening-hero-v1.png") 67% center / cover no-repeat;
  }

  .ie2-midnight-listening-page .ie2-listening-hero {
    background:
      linear-gradient(180deg, rgba(3, 12, 32, 0.1) 0%, rgba(3, 12, 32, 0.62) 42%, rgba(3, 12, 32, 0.98) 100%),
      url("../img/english-intermediate-2/unit-2/call-before-midnight-listening/call-before-midnight-listening-hero-v1.webp") 70% center / cover no-repeat;
  }

  .ie2-message-listening-page .ie2-listening-hero {
    background:
      linear-gradient(180deg, rgba(3, 12, 32, 0.1) 0%, rgba(3, 12, 32, 0.64) 42%, rgba(3, 12, 32, 0.98) 100%),
      url("../img/english-intermediate-2/unit-3/message-before-workshop-listening/message-before-workshop-listening-hero-v1.png") 68% center / cover no-repeat;
  }

  .ie2-message-listening-page .ie2-listening-hero h1 {
    max-width: 13ch;
    font-size: clamp(2rem, 9.5vw, 3rem);
  }

  .ie2-listening-hero-content,
  .ie2-listening-shell {
    width: min(100% - 24px, 1180px);
  }

  .ie2-listening-hero h1 {
    max-width: 9ch;
    font-size: clamp(2.05rem, 11vw, 3.2rem);
  }

  .ie2-listening-hero p:not(.intermediate2-kicker) {
    font-size: 0.94rem;
    line-height: 1.44;
  }

  .ie2-listening-hero-chips {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.4rem;
  }

  .ie2-listening-hero-chips span {
    padding: 0.36rem 0.42rem;
    font-size: 0.73rem;
    text-align: center;
  }

  .ie2-listening-block {
    padding: 1rem;
  }

  .ie2-listening-vocab-grid,
  .ie2-listen-pass-grid,
  .ie2-speaking-prompt-grid {
    grid-template-columns: 1fr;
  }

  .ie2-midnight-listening-page .ie2-listen-pass-grid {
    grid-template-columns: 1fr;
  }

  .ie2-message-listening-page .ie2-listen-pass-grid {
    grid-template-columns: 1fr;
  }

  .ie2-listening-heading {
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
  }

  .ie2-listening-heading > span {
    width: fit-content;
  }

  .ie2-listen-pass-grid .intermediate2-button,
  .ie2-rehearsal-timer .intermediate2-button {
    width: 100%;
  }

  .ie2-rehearsal-timer {
    display: grid;
    grid-template-columns: 1fr;
  }
}

/* Intermediate English Course 2: corrected Course Overview architecture */
.ie2-course-map-page .ie2-overview-hero {
  min-height: min(500px, 62vh);
  background:
    linear-gradient(90deg, rgba(3, 12, 32, 0.94) 0%, rgba(7, 31, 79, 0.78) 46%, rgba(7, 31, 79, 0.2) 100%),
    url("../img/english-intermediate-2/intermediate-2-home-hero-v1.png") center / cover no-repeat;
}

.ie2-course-map-page .ie2-overview-hero h1 {
  max-width: 13ch;
}

.ie2-course-overview-shell {
  width: min(1180px, calc(100% - 36px));
  margin: 1.25rem auto 4rem;
}

.ie2-course-intro,
.ie2-course-evaluations,
.ie2-review-route {
  border: 1px solid var(--ie2-line);
  border-radius: 8px;
  background: var(--ie2-paper);
  box-shadow: 0 12px 30px rgba(7, 31, 79, 0.08);
}

.ie2-course-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 0.32fr);
  gap: 1rem;
  align-items: center;
  padding: clamp(1rem, 2.5vw, 1.5rem);
}

.ie2-course-intro h2,
.ie2-section-heading h2,
.ie2-review-route h2 {
  margin: 0;
  color: var(--ie2-navy);
  font-size: clamp(1.5rem, 3vw, 2.35rem);
  line-height: 1.08;
}

.ie2-course-intro p:not(.intermediate2-kicker),
.ie2-section-heading p:not(.intermediate2-kicker),
.ie2-review-route p:not(.intermediate2-kicker) {
  margin: 0.55rem 0 0;
  color: var(--ie2-muted);
  line-height: 1.58;
}

.ie2-course-intro aside {
  display: grid;
  gap: 0.2rem;
  padding: 0.9rem;
  border-left: 4px solid var(--ie2-teal);
  border-radius: 0 8px 8px 0;
  background: #eef8f6;
}

.ie2-course-intro aside strong {
  color: var(--ie2-teal);
}

.ie2-course-intro aside span {
  color: var(--ie2-ink);
  line-height: 1.4;
}

.ie2-overview-units,
.ie2-course-evaluations,
.ie2-review-route {
  margin-top: 1rem;
}

.ie2-section-heading {
  padding: 1.2rem 1.25rem 0.75rem;
}

.ie2-section-heading .intermediate2-kicker,
.ie2-course-intro .intermediate2-kicker,
.ie2-review-route .intermediate2-kicker {
  background: #fff6dd;
  color: #8a5f09;
}

.ie2-overview-unit {
  margin-top: 0.7rem;
  border: 1px solid var(--ie2-line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--ie2-paper);
  box-shadow: 0 10px 26px rgba(7, 31, 79, 0.07);
}

.ie2-overview-unit > summary {
  min-height: 112px;
  display: grid;
  grid-template-columns: 150px 68px minmax(0, 1fr) auto 38px;
  gap: 0.8rem;
  align-items: center;
  padding: 0.65rem;
  color: var(--ie2-ink);
  cursor: pointer;
  list-style: none;
}

.ie2-overview-unit > summary::-webkit-details-marker,
.ie2-theory-topic > summary::-webkit-details-marker {
  display: none;
}

.ie2-overview-unit > summary:hover,
.ie2-overview-unit > summary:focus-visible {
  background: #f8fbff;
}

.ie2-overview-unit > summary img {
  width: 150px;
  height: 96px;
  display: block;
  border-radius: 7px;
  object-fit: cover;
}

.ie2-overview-unit-number {
  color: var(--ie2-teal);
  font-size: 0.85rem;
  font-weight: 950;
  text-transform: uppercase;
}

.ie2-overview-unit-copy {
  min-width: 0;
  display: grid;
  gap: 0.32rem;
}

.ie2-overview-unit-copy strong {
  color: var(--ie2-navy);
  font-size: clamp(1.05rem, 2vw, 1.35rem);
  line-height: 1.18;
}

.ie2-overview-unit-copy small {
  color: var(--ie2-muted);
  font-size: 0.9rem;
  line-height: 1.4;
}

.ie2-overview-unit-session {
  padding: 0.38rem 0.55rem;
  border-radius: 999px;
  background: #eef4ff;
  color: var(--ie2-blue);
  font-size: 0.78rem;
  font-weight: 900;
  white-space: nowrap;
}

.ie2-overview-unit-toggle,
.ie2-topic-toggle {
  display: grid;
  place-items: center;
  color: var(--ie2-teal);
  font-size: 1.45rem;
  font-weight: 500;
  transition: transform 180ms ease;
}

.ie2-overview-unit[open] .ie2-overview-unit-toggle,
.ie2-theory-topic[open] .ie2-topic-toggle {
  transform: rotate(45deg);
}

.ie2-overview-unit-body {
  padding: 1rem;
  border-top: 1px solid var(--ie2-line);
  background: #fbfdff;
}

.ie2-overview-unit-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.ie2-overview-unit-grid article {
  min-width: 0;
  padding: 0.9rem;
  border: 1px solid rgba(7, 31, 79, 0.1);
  border-radius: 8px;
  background: #ffffff;
}

.ie2-overview-unit-grid h3,
.ie2-overview-unit-grid p,
.ie2-overview-unit-grid ul {
  margin: 0;
}

.ie2-overview-unit-grid h3 {
  color: var(--ie2-navy);
  font-size: 1rem;
}

.ie2-overview-unit-grid p,
.ie2-overview-unit-grid li {
  color: var(--ie2-muted);
  line-height: 1.5;
}

.ie2-overview-unit-grid p + p {
  margin-top: 0.4rem;
}

.ie2-overview-unit-grid ul {
  padding: 0.55rem 0 0 1.05rem;
}

.ie2-overview-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.38rem;
  margin-top: 0.6rem;
}

.ie2-overview-tags span {
  padding: 0.32rem 0.45rem;
  border-radius: 999px;
  background: #eef8f6;
  color: var(--ie2-teal);
  font-size: 0.76rem;
  font-weight: 850;
}

.ie2-evaluation-alert {
  display: grid;
  gap: 0.12rem;
  margin-top: 0.65rem;
  padding: 0.6rem;
  border-left: 4px solid var(--ie2-coral);
  border-radius: 0 7px 7px 0;
  background: #fff5f3;
}

.ie2-evaluation-alert strong {
  color: #9b2925;
}

.ie2-evaluation-alert span {
  color: var(--ie2-ink);
  font-size: 0.82rem;
  font-weight: 800;
}

.ie2-overview-unit-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.85rem;
}

.ie2-coming-soon {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  padding: 0.55rem 0.7rem;
  border-radius: 8px;
  background: #eef1f6;
  color: #607086;
  font-size: 0.85rem;
  font-weight: 900;
}

.ie2-course-evaluations {
  padding-bottom: 1.15rem;
}

.ie2-evaluation-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.6rem;
  padding: 0 1.15rem;
}

.ie2-evaluation-grid article {
  min-width: 0;
  display: grid;
  gap: 0.32rem;
  padding: 0.85rem;
  border-top: 4px solid var(--ie2-coral);
  border-radius: 7px;
  background: #fff8f5;
}

.ie2-evaluation-grid span {
  color: var(--ie2-coral);
  font-size: 0.75rem;
  font-weight: 950;
  text-transform: uppercase;
}

.ie2-evaluation-grid strong {
  color: var(--ie2-navy);
  line-height: 1.25;
}

.ie2-evaluation-grid time {
  color: var(--ie2-muted);
  font-size: 0.83rem;
}

.ie2-evaluation-grid b {
  color: var(--ie2-coral);
}

.ie2-review-route {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 1rem;
  align-items: center;
  padding: clamp(1rem, 2.5vw, 1.5rem);
}

.ie2-review-route ol {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ie2-review-route li {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr);
  gap: 0.6rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid rgba(7, 31, 79, 0.1);
  border-radius: 7px;
  background: #fbfdff;
}

.ie2-review-route li strong {
  color: var(--ie2-teal);
}

.ie2-review-route li span {
  color: var(--ie2-ink);
  line-height: 1.4;
}

/* Intermediate English Course 2: complete unit explanations */
.ie2-unit1-hero,
.ie2-unit2-hero {
  min-height: min(540px, 66vh);
  display: grid;
  align-items: end;
  padding: 92px max(18px, calc((100% - 1180px) / 2)) 44px;
  color: #ffffff;
}

.ie2-unit1-hero {
  background:
    linear-gradient(90deg, rgba(3, 12, 32, 0.95) 0%, rgba(7, 31, 79, 0.8) 48%, rgba(7, 31, 79, 0.2) 100%),
    url("../img/english-intermediate-2/units/unit-1-relationships-hero-v1.webp") center / cover no-repeat;
}

.ie2-unit2-hero {
  background:
    linear-gradient(90deg, rgba(3, 12, 32, 0.97) 0%, rgba(7, 31, 79, 0.84) 48%, rgba(7, 31, 79, 0.12) 100%),
    url("../img/english-intermediate-2/units/unit-2-wishes-dilemmas-hero-v1.webp") center / cover no-repeat;
}

.ie2-unit1-hero-copy,
.ie2-unit2-hero-copy {
  width: min(760px, 100%);
}

.ie2-unit1-hero h1,
.ie2-unit2-hero h1 {
  max-width: 14ch;
  margin: 0;
  color: #ffffff;
  font-size: clamp(2.25rem, 6vw, 4.85rem);
  line-height: 1.01;
  text-shadow: 0 3px 24px rgba(0, 0, 0, 0.45);
}

.ie2-unit2-hero h1 {
  max-width: 21ch;
  font-size: clamp(2.1rem, 5.2vw, 4.2rem);
}

.ie2-unit1-hero p:not(.intermediate2-kicker),
.ie2-unit2-hero p:not(.intermediate2-kicker) {
  max-width: 700px;
  margin: 0.85rem 0 0;
  color: rgba(255, 255, 255, 0.93);
  font-size: clamp(1rem, 2vw, 1.15rem);
  line-height: 1.55;
}

.ie2-unit-theory-shell {
  width: min(1180px, calc(100% - 36px));
  margin: 1.25rem auto 4rem;
}

.ie2-theory-topic,
.ie2-theory-next {
  margin-top: 0.75rem;
  border: 1px solid var(--ie2-line);
  border-radius: 8px;
  overflow: hidden;
  background: var(--ie2-paper);
  box-shadow: 0 10px 28px rgba(7, 31, 79, 0.08);
}

.ie2-theory-topic:first-child {
  margin-top: 0;
}

.ie2-theory-topic > summary {
  min-height: 82px;
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) 38px;
  gap: 0.8rem;
  align-items: center;
  padding: 0.8rem 1rem;
  cursor: pointer;
  list-style: none;
}

.ie2-theory-topic > summary:hover,
.ie2-theory-topic > summary:focus-visible {
  background: #f8fbff;
}

.ie2-topic-index {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--ie2-navy);
  color: #ffffff;
  font-size: 0.84rem;
  font-weight: 950;
}

.ie2-topic-summary {
  min-width: 0;
  display: grid;
  gap: 0.25rem;
}

.ie2-topic-summary strong {
  color: var(--ie2-navy);
  font-size: clamp(1.08rem, 2.2vw, 1.42rem);
  line-height: 1.16;
}

.ie2-topic-summary small {
  color: var(--ie2-muted);
  font-size: 0.9rem;
  line-height: 1.4;
}

.ie2-theory-body {
  padding: clamp(1rem, 3vw, 1.75rem);
  border-top: 1px solid var(--ie2-line);
  background: #fbfdff;
}

.ie2-theory-body p,
.ie2-theory-body li {
  color: var(--ie2-muted);
  line-height: 1.58;
}

.ie2-theory-body code {
  color: var(--ie2-blue);
  font-weight: 900;
}

.ie2-key-answer {
  padding: clamp(1rem, 2.7vw, 1.5rem);
  border-left: 5px solid var(--ie2-teal);
  border-radius: 0 8px 8px 0;
  background: #eef8f6;
}

.ie2-key-answer > span,
.ie2-section-intro > span {
  color: var(--ie2-teal);
  font-size: 0.76rem;
  font-weight: 950;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ie2-key-answer h2,
.ie2-section-intro h2 {
  margin: 0.35rem 0 0;
  color: var(--ie2-navy);
  font-size: clamp(1.45rem, 3vw, 2.35rem);
  line-height: 1.08;
}

.ie2-key-answer p,
.ie2-section-intro p {
  max-width: 930px;
  margin: 0.65rem 0 0;
}

.ie2-concept-grid,
.ie2-choice-grid,
.ie2-contrast-grid,
.ie2-mistake-grid,
.ie2-model-analysis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin-top: 0.85rem;
}

.ie2-concept-grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ie2-concept-card,
.ie2-choice-grid article,
.ie2-contrast-grid article,
.ie2-mistake-grid article,
.ie2-model-analysis article {
  min-width: 0;
  padding: 0.9rem;
  border: 1px solid rgba(7, 31, 79, 0.1);
  border-radius: 8px;
  background: #ffffff;
}

.ie2-concept-card h3,
.ie2-choice-grid h4,
.ie2-mistake-grid h4,
.ie2-model-analysis h3,
.ie2-definition-grid h4,
.ie2-meeting-paths h3,
.ie2-sound-grid h3,
.ie2-expression-card h3 {
  margin: 0;
  color: var(--ie2-navy);
  line-height: 1.18;
}

.ie2-concept-card p,
.ie2-choice-grid p,
.ie2-contrast-grid p,
.ie2-mistake-grid p,
.ie2-model-analysis p {
  margin: 0.5rem 0 0;
}

.ie2-concept-label,
.ie2-choice-badge {
  width: fit-content;
  display: inline-flex;
  margin-bottom: 0.5rem;
  padding: 0.25rem 0.45rem;
  border-radius: 999px;
  background: #eef4ff;
  color: var(--ie2-blue);
  font-size: 0.72rem;
  font-weight: 950;
  text-transform: uppercase;
}

.ie2-choice-badge.recommended {
  background: #eaf8f2;
  color: var(--ie2-teal);
}

.ie2-formula-line {
  padding: 0.58rem 0.68rem;
  border-radius: 7px;
  background: #eef4ff;
  color: var(--ie2-navy) !important;
  font-weight: 850;
}

.ie2-subtopic {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(7, 31, 79, 0.1);
}

.ie2-subtopic-heading {
  display: grid;
  gap: 0.28rem;
}

.ie2-subtopic-heading > span {
  color: var(--ie2-teal);
  font-size: 0.76rem;
  font-weight: 950;
  text-transform: uppercase;
}

.ie2-subtopic-heading h3 {
  margin: 0;
  color: var(--ie2-navy);
  font-size: clamp(1.18rem, 2.4vw, 1.65rem);
  line-height: 1.15;
}

.ie2-teaching-note {
  margin-top: 0.8rem;
  padding: 0.72rem 0.8rem;
  border-left: 4px solid var(--ie2-gold);
  border-radius: 0 7px 7px 0;
  background: #fff7df;
  color: var(--ie2-ink);
  line-height: 1.5;
}

.ie2-mistake-grid small {
  display: block;
  margin-top: 0.45rem;
  color: var(--ie2-muted);
  line-height: 1.4;
}

.ie2-theory-audio {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(280px, 1.2fr);
  gap: 0.8rem;
  align-items: center;
  margin-top: 1rem;
  padding: 0.9rem;
  border-radius: 8px;
  background: var(--ie2-navy);
  color: #ffffff;
}

.ie2-theory-audio > div {
  display: grid;
  gap: 0.25rem;
}

.ie2-theory-audio strong {
  color: #ffda81;
}

.ie2-theory-audio span {
  color: rgba(255, 255, 255, 0.84);
  font-size: 0.88rem;
  line-height: 1.4;
}

.ie2-theory-audio audio {
  width: 100%;
}

.ie2-section-intro {
  padding-bottom: 0.9rem;
}

.ie2-vocabulary-bank {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
}

.ie2-vocabulary-bank article {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(110px, 0.34fr) minmax(120px, 0.3fr) minmax(0, 1fr);
  gap: 0.55rem;
  align-items: start;
  padding: 0.75rem;
  border: 1px solid rgba(7, 31, 79, 0.1);
  border-radius: 8px;
  background: #ffffff;
}

.ie2-vocabulary-bank strong {
  color: var(--ie2-teal);
}

.ie2-vocabulary-bank span {
  color: var(--ie2-blue);
  font-size: 0.82rem;
  font-weight: 800;
}

.ie2-vocabulary-bank p {
  margin: 0;
}

.ie2-vocabulary-bank em {
  grid-column: 1 / -1;
  color: var(--ie2-ink);
  font-style: normal;
  line-height: 1.45;
}

.ie2-definition-grid,
.ie2-meeting-paths,
.ie2-expression-grid,
.ie2-sound-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem;
  margin-top: 0.8rem;
}

.ie2-definition-grid article,
.ie2-meeting-paths article,
.ie2-sound-grid article {
  min-width: 0;
  padding: 0.85rem;
  border: 1px solid rgba(7, 31, 79, 0.1);
  border-radius: 8px;
  background: #ffffff;
}

.ie2-definition-grid p,
.ie2-meeting-paths p,
.ie2-sound-grid p {
  margin: 0.42rem 0 0;
}

.ie2-meeting-paths article > span,
.ie2-sound-grid article > span {
  display: block;
  margin-bottom: 0.4rem;
  color: var(--ie2-teal);
  font-size: 0.76rem;
  font-weight: 950;
  text-transform: uppercase;
}

.ie2-language-sequence {
  display: grid;
  gap: 0.5rem;
  margin: 0.8rem 0 0;
  padding: 0;
  list-style: none;
}

.ie2-language-sequence li {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 0.65rem;
  align-items: start;
  padding: 0.65rem 0.75rem;
  border: 1px solid rgba(7, 31, 79, 0.1);
  border-radius: 8px;
  background: #ffffff;
}

.ie2-language-sequence li > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: var(--ie2-teal);
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 950;
}

.ie2-language-sequence strong {
  color: var(--ie2-navy);
}

.ie2-language-sequence p {
  margin: 0.22rem 0 0;
}

.ie2-expression-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ie2-expression-compare {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
  margin: 1rem 0 1.2rem;
}

.ie2-expression-compare article {
  min-width: 0;
  padding: 0.95rem;
  border: 1px solid rgba(7, 31, 79, 0.12);
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
}

.ie2-expression-compare strong {
  display: block;
  color: var(--ie2-navy);
  font-size: 0.95rem;
}

.ie2-expression-compare p {
  margin: 0.45rem 0;
  color: #42526a;
  line-height: 1.55;
}

.ie2-expression-compare span {
  display: block;
  padding: 0.55rem;
  border-radius: 6px;
  background: #eef8f6;
  color: var(--ie2-teal);
  font-size: 0.88rem;
  font-weight: 850;
  line-height: 1.45;
}

.ie2-expression-card {
  min-width: 0;
  padding: 0.95rem;
  border: 1px solid rgba(7, 31, 79, 0.11);
  border-radius: 8px;
  background: #ffffff;
}

.ie2-expression-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.55rem;
}

.ie2-expression-meta span {
  padding: 0.28rem 0.45rem;
  border-radius: 999px;
  background: #eef8f6;
  color: var(--ie2-teal);
  font-size: 0.72rem;
  font-weight: 950;
  text-transform: uppercase;
}

.ie2-expression-meta span + span {
  background: #fff6dd;
  color: #8a5f09;
  text-transform: none;
}

.ie2-expression-card p {
  margin: 0.45rem 0 0;
}

.ie2-expression-card ul {
  margin: 0.55rem 0 0;
  padding-left: 1.1rem;
}

.ie2-sound-grid article > strong {
  display: block;
  margin-top: 0.55rem;
  padding: 0.45rem;
  border-radius: 6px;
  background: #eef8f6;
  color: var(--ie2-teal);
  line-height: 1.4;
}

.ie2-integrated-model {
  margin: 1rem 0 0;
  padding: clamp(1rem, 3vw, 1.5rem);
  border: 1px solid rgba(7, 31, 79, 0.12);
  border-left: 5px solid var(--ie2-teal);
  border-radius: 0 8px 8px 0;
  background: #ffffff;
}

.ie2-integrated-model p {
  margin: 0;
  color: #25364c;
  font-size: 1.03rem;
  line-height: 1.75;
}

.ie2-integrated-model p + p {
  margin-top: 0.75rem;
}

.ie2-integrated-model mark {
  padding: 0.08rem 0.16rem;
  border-radius: 4px;
  color: inherit;
}

.ie2-mark-relative { background: #dfeaff; }
.ie2-mark-vocab { background: #dff5ee; }
.ie2-mark-tact { background: #fff0d0; }
.ie2-mark-phrasal { background: #efe3ff; }
.ie2-mark-expression { background: #dff4f8; }
.ie2-mark-idiom { background: #ffe2df; }
.ie2-mark-wish { background: #fff0d0; }
.ie2-mark-conditional { background: #dfeaff; }
.ie2-mark-advice { background: #dff5ee; }
.ie2-mark-regret { background: #ffe2df; }

.ie2-language-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.7rem;
}

.ie2-language-legend span {
  padding: 0.3rem 0.48rem;
  border-radius: 999px;
  color: var(--ie2-ink);
  font-size: 0.74rem;
  font-weight: 900;
}

.ie2-language-legend .relative { background: #dfeaff; }
.ie2-language-legend .vocab { background: #dff5ee; }
.ie2-language-legend .tact { background: #fff0d0; }
.ie2-language-legend .phrasal { background: #efe3ff; }
.ie2-language-legend .expression { background: #dff4f8; }
.ie2-language-legend .idiom { background: #ffe2df; }
.ie2-language-legend .wish { background: #fff0d0; }
.ie2-language-legend .conditional { background: #dfeaff; }
.ie2-language-legend .advice { background: #dff5ee; }
.ie2-language-legend .regret { background: #ffe2df; }

.ie2-theory-next {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  padding: clamp(1rem, 3vw, 1.5rem);
}

.ie2-theory-next .intermediate2-kicker {
  background: #fff6dd;
  color: #8a5f09;
}

.ie2-theory-next h2 {
  margin: 0;
  color: var(--ie2-navy);
  font-size: clamp(1.45rem, 3vw, 2.25rem);
}

.ie2-theory-next p:not(.intermediate2-kicker) {
  max-width: 780px;
  margin: 0.55rem 0 0;
  color: var(--ie2-muted);
  line-height: 1.55;
}

.ie2-theory-next .intermediate2-actions {
  max-width: 280px;
  margin-top: 0;
}

@media (max-width: 980px) {
  .ie2-overview-unit-grid,
  .ie2-concept-grid.three,
  .ie2-definition-grid,
  .ie2-meeting-paths,
  .ie2-sound-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ie2-evaluation-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .ie2-course-intro,
  .ie2-review-route,
  .ie2-theory-next {
    grid-template-columns: 1fr;
  }

  .ie2-theory-next .intermediate2-actions {
    max-width: none;
  }
}

@media (max-width: 700px) {
  .ie2-course-map-page .ie2-overview-hero,
  .ie2-unit1-hero,
  .ie2-unit2-hero {
    min-height: auto;
    padding: 34px 18px 28px;
  }

  .ie2-unit1-hero-copy,
  .ie2-unit2-hero-copy {
    width: auto;
    max-width: 100%;
    min-width: 0;
  }

  .ie2-course-map-page .ie2-overview-hero {
    background:
      linear-gradient(180deg, rgba(3, 12, 32, 0.2) 0%, rgba(3, 12, 32, 0.82) 48%, rgba(3, 12, 32, 0.96) 100%),
      url("../img/english-intermediate-2/intermediate-2-home-hero-v1.png") 56% center / cover no-repeat;
  }

  .ie2-unit1-hero {
    background:
      linear-gradient(180deg, rgba(3, 12, 32, 0.18) 0%, rgba(3, 12, 32, 0.78) 46%, rgba(3, 12, 32, 0.97) 100%),
      url("../img/english-intermediate-2/units/unit-1-relationships-hero-v1.webp") 58% center / cover no-repeat;
  }

  .ie2-unit2-hero {
    background:
      linear-gradient(180deg, rgba(3, 12, 32, 0.18) 0%, rgba(3, 12, 32, 0.77) 44%, rgba(3, 12, 32, 0.97) 100%),
      url("../img/english-intermediate-2/units/unit-2-wishes-dilemmas-hero-v1.webp") 70% center / cover no-repeat;
  }

  .ie2-unit1-hero h1,
  .ie2-unit2-hero h1 {
    max-width: 12ch;
    font-size: clamp(2rem, 10vw, 3rem);
  }

  .ie2-unit2-hero h1 {
    max-width: 21ch;
    font-size: clamp(1.8rem, 8vw, 2.55rem);
    line-height: 1.04;
  }

  .ie2-unit1-hero p:not(.intermediate2-kicker),
  .ie2-unit2-hero p:not(.intermediate2-kicker) {
    font-size: 0.94rem;
    line-height: 1.43;
  }

  .ie2-course-overview-shell,
  .ie2-unit-theory-shell {
    width: min(100% - 24px, 1180px);
  }

  .ie2-overview-unit > summary {
    min-height: 116px;
    grid-template-columns: 104px minmax(0, 1fr) 30px;
    gap: 0.62rem;
    padding: 0.55rem;
  }

  .ie2-overview-unit > summary img {
    grid-row: 1 / span 3;
    width: 104px;
    height: 104px;
  }

  .ie2-overview-unit-number {
    align-self: end;
    font-size: 0.72rem;
  }

  .ie2-overview-unit-copy {
    grid-column: 2 / 3;
  }

  .ie2-overview-unit-copy strong {
    font-size: 0.98rem;
  }

  .ie2-overview-unit-copy small {
    display: none;
  }

  .ie2-overview-unit-session {
    grid-column: 2 / 3;
    width: fit-content;
    padding: 0.28rem 0.42rem;
    font-size: 0.7rem;
  }

  .ie2-overview-unit-toggle {
    grid-column: 3;
    grid-row: 1 / span 3;
  }

  .ie2-overview-unit-grid,
  .ie2-evaluation-grid,
  .ie2-concept-grid,
  .ie2-concept-grid.three,
  .ie2-choice-grid,
  .ie2-contrast-grid,
  .ie2-mistake-grid,
  .ie2-model-analysis,
  .ie2-vocabulary-bank,
  .ie2-definition-grid,
  .ie2-meeting-paths,
  .ie2-expression-compare,
  .ie2-expression-grid,
  .ie2-sound-grid {
    grid-template-columns: 1fr;
  }

  .ie2-overview-unit-actions,
  .ie2-theory-next .intermediate2-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .ie2-overview-unit-actions .intermediate2-button,
  .ie2-coming-soon {
    width: 100%;
  }

  .ie2-evaluation-grid {
    padding: 0 1rem;
  }

  .ie2-review-route li {
    grid-template-columns: 1fr;
    gap: 0.2rem;
  }

  .ie2-theory-topic > summary {
    min-height: 74px;
    grid-template-columns: 42px minmax(0, 1fr) 28px;
    gap: 0.55rem;
    padding: 0.7rem;
  }

  .ie2-topic-index {
    width: 40px;
    height: 40px;
  }

  .ie2-topic-summary strong {
    font-size: 1rem;
  }

  .ie2-topic-summary small {
    font-size: 0.8rem;
    line-height: 1.32;
  }

  .ie2-theory-body {
    padding: 0.9rem;
  }

  .ie2-key-answer h2,
  .ie2-section-intro h2 {
    font-size: 1.4rem;
  }

  .ie2-theory-audio {
    grid-template-columns: 1fr;
  }

  .ie2-vocabulary-bank article {
    grid-template-columns: 1fr auto;
    gap: 0.3rem 0.55rem;
  }

  .ie2-vocabulary-bank p,
  .ie2-vocabulary-bank em {
    grid-column: 1 / -1;
  }

  .ie2-integrated-model p {
    font-size: 0.98rem;
    line-height: 1.65;
  }
}

/* Intermediate English Course 2: shared full-width, compact composition. */
.english-intermediate2-page { --ie2-screen-gutter: clamp(1rem, 2vw, 3rem); }

.english-intermediate2-page .navbar {
  width: 100%;
  max-width: none;
  padding-left: max(var(--ie2-screen-gutter), env(safe-area-inset-left));
  padding-right: max(var(--ie2-screen-gutter), env(safe-area-inset-right));
}

.english-intermediate2-page .intermediate2-search.course-search-panel,
.english-intermediate2-page .course-search-empty,
.english-intermediate2-page .intermediate2-section-head,
.english-intermediate2-page .intermediate2-dashboard,
.english-intermediate2-page .intermediate2-unit-band,
.english-intermediate2-page .intermediate2-schedule,
.english-intermediate2-page .ie2-overview-shell,
.english-intermediate2-page .ie2-course-overview-shell,
.english-intermediate2-page .ie2-unit-theory-shell,
.english-intermediate2-page .ie2-speaking-hero-content,
.english-intermediate2-page .ie2-speaking-shell,
.english-intermediate2-page .ie2-reading-hero-content,
.english-intermediate2-page .ie2-reading-shell,
.english-intermediate2-page .ie2-listening-hero-content,
.english-intermediate2-page .ie2-listening-shell {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  margin-left: 0;
  margin-right: 0;
}

.english-intermediate2-page .intermediate2-search.course-search-panel,
.english-intermediate2-page .course-search-empty,
.english-intermediate2-page .intermediate2-section-head,
.english-intermediate2-page .intermediate2-dashboard,
.english-intermediate2-page .intermediate2-unit-band,
.english-intermediate2-page .intermediate2-schedule,
.english-intermediate2-page .ie2-overview-shell,
.english-intermediate2-page .ie2-course-overview-shell,
.english-intermediate2-page .ie2-unit-theory-shell,
.english-intermediate2-page .ie2-speaking-shell,
.english-intermediate2-page .ie2-reading-shell,
.english-intermediate2-page .ie2-listening-shell {
  padding-left: max(var(--ie2-screen-gutter), env(safe-area-inset-left));
  padding-right: max(var(--ie2-screen-gutter), env(safe-area-inset-right));
}

.english-intermediate2-page .ie2-speaking-hero-content,
.english-intermediate2-page .ie2-reading-hero-content,
.english-intermediate2-page .ie2-listening-hero-content {
  padding-left: max(var(--ie2-screen-gutter), env(safe-area-inset-left));
  padding-right: max(var(--ie2-screen-gutter), env(safe-area-inset-right));
}

/* On wide screens, related cards use available space as useful compact grids. */
.english-intermediate2-page .ie2-rule-grid,
.english-intermediate2-page .ie2-note-grid,
.english-intermediate2-page .ie2-practice-grid,
.english-intermediate2-page .ie2-contrast-grid,
.english-intermediate2-page .ie2-vocabulary-bank,
.english-intermediate2-page .ie2-definition-grid,
.english-intermediate2-page .ie2-expression-grid,
.english-intermediate2-page .ie2-sound-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
}

@media (max-width: 700px) {
  .english-intermediate2-page { --ie2-screen-gutter: .75rem; }
  .english-intermediate2-page .intermediate2-search.course-search-panel,
  .english-intermediate2-page .course-search-empty,
  .english-intermediate2-page .intermediate2-section-head,
  .english-intermediate2-page .intermediate2-dashboard,
  .english-intermediate2-page .intermediate2-unit-band,
  .english-intermediate2-page .intermediate2-schedule,
  .english-intermediate2-page .ie2-overview-shell,
  .english-intermediate2-page .ie2-course-overview-shell,
  .english-intermediate2-page .ie2-unit-theory-shell,
  .english-intermediate2-page .ie2-speaking-shell,
  .english-intermediate2-page .ie2-reading-shell,
  .english-intermediate2-page .ie2-listening-shell { padding-left: max(var(--ie2-screen-gutter), env(safe-area-inset-left)); padding-right: max(var(--ie2-screen-gutter), env(safe-area-inset-right)); }
}

/* Unit 2 theory: full-width application layout with compact learning groups. */
.ie2-unit2-theory-page { --ie2-unit2-gutter: clamp(1rem, 2vw, 3rem); }
.ie2-unit2-theory-page .navbar { width: 100%; max-width: none; padding-left: max(var(--ie2-unit2-gutter), env(safe-area-inset-left)); padding-right: max(var(--ie2-unit2-gutter), env(safe-area-inset-right)); }
.ie2-unit2-theory-page .ie2-unit2-hero { width: 100%; max-width: none; padding-left: max(var(--ie2-unit2-gutter), env(safe-area-inset-left)); padding-right: max(var(--ie2-unit2-gutter), env(safe-area-inset-right)); }
.ie2-unit2-theory-page .intermediate2-search.course-search-panel,
.ie2-unit2-theory-page .ie2-unit-theory-shell,
.ie2-unit2-theory-page .course-search-empty { width: 100%; max-width: none; box-sizing: border-box; margin-left: 0; margin-right: 0; }
.ie2-unit2-theory-page .intermediate2-search.course-search-panel { margin-top: 1rem; padding-left: max(var(--ie2-unit2-gutter), env(safe-area-inset-left)); padding-right: max(var(--ie2-unit2-gutter), env(safe-area-inset-right)); }
.ie2-unit2-theory-page .ie2-unit-theory-shell { margin-top: 1rem; padding-left: max(var(--ie2-unit2-gutter), env(safe-area-inset-left)); padding-right: max(var(--ie2-unit2-gutter), env(safe-area-inset-right)); }
.ie2-unit2-theory-page .course-search-empty { padding-left: max(var(--ie2-unit2-gutter), env(safe-area-inset-left)); padding-right: max(var(--ie2-unit2-gutter), env(safe-area-inset-right)); }
.ie2-unit2-theory-page .ie2-theory-body { padding: clamp(1rem, 2vw, 2rem); }
.ie2-unit2-idea-deck { display: grid; grid-template-columns: minmax(300px, .78fr) minmax(0, 1.22fr); gap: 1rem; align-items: stretch; }
.ie2-unit2-idea-deck .ie2-key-answer { height: 100%; }
.ie2-unit2-theory-page .ie2-contrast-grid { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.ie2-unit2-theory-page .ie2-vocabulary-bank { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
@media (max-width: 980px) { .ie2-unit2-idea-deck { grid-template-columns: 1fr; } }
@media (max-width: 700px) {
  .ie2-unit2-theory-page .ie2-unit2-hero { padding-left: max(1rem, env(safe-area-inset-left)); padding-right: max(1rem, env(safe-area-inset-right)); }
  .ie2-unit2-theory-page .intermediate2-search.course-search-panel,
  .ie2-unit2-theory-page .ie2-unit-theory-shell { padding-left: max(.75rem, env(safe-area-inset-left)); padding-right: max(.75rem, env(safe-area-inset-right)); }
}

/* Unit 2 grammar activity: all complete-sentence decisions in a compact responsive grid. */
.ie2-grammar-page { --ie2-grammar-gutter: clamp(1rem, 2vw, 3rem); }
.ie2-grammar-page .navbar { width: 100%; max-width: none; padding-left: max(var(--ie2-grammar-gutter), env(safe-area-inset-left)); padding-right: max(var(--ie2-grammar-gutter), env(safe-area-inset-right)); }
.ie2-grammar-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr); width: 100%; min-height: min(590px, 62vh); overflow: hidden; background: #071f4f; color: #fff; }
.ie2-grammar-hero-copy { display: grid; align-content: center; padding: clamp(2rem, 5vw, 5rem) max(var(--ie2-grammar-gutter), env(safe-area-inset-left)); }
.ie2-grammar-hero .intermediate2-kicker { color: #ffd77f; }.ie2-grammar-hero h1 { max-width: 9ch; margin: .2rem 0 .75rem; color: #fff; font-size: clamp(2.6rem, 6vw, 5.5rem); line-height: .93; }.ie2-grammar-hero-copy > p:not(.intermediate2-kicker) { max-width: 650px; margin: 0; color: rgba(255,255,255,.9); font-size: clamp(1rem, 1.8vw, 1.18rem); line-height: 1.56; }.ie2-grammar-hero figure { min-height: 100%; margin: 0; }.ie2-grammar-hero img { display: block; width: 100%; height: 100%; min-height: 390px; object-fit: cover; object-position: center; }.ie2-grammar-meta { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1rem; }.ie2-grammar-meta span { padding: .4rem .62rem; border: 1px solid rgba(255,255,255,.26); border-radius: 999px; background: rgba(255,255,255,.1); color: #fff; font-size: .8rem; font-weight: 900; }
.ie2-grammar-page .intermediate2-search.course-search-panel, .ie2-grammar-page .course-search-empty, .ie2-grammar-shell { width: 100%; max-width: none; box-sizing: border-box; margin-left: 0; margin-right: 0; }.ie2-grammar-page .intermediate2-search.course-search-panel, .ie2-grammar-page .course-search-empty, .ie2-grammar-shell { padding-left: max(var(--ie2-grammar-gutter), env(safe-area-inset-left)); padding-right: max(var(--ie2-grammar-gutter), env(safe-area-inset-right)); }.ie2-grammar-page .intermediate2-search.course-search-panel { margin-top: 1rem; }
.ie2-grammar-shell { display: grid; gap: 1rem; margin: 1rem 0 4rem; }.ie2-grammar-intro, .ie2-grammar-challenge, .ie2-grammar-pattern-map { border: 1px solid var(--ie2-line); border-radius: 18px; background: #fff; box-shadow: 0 12px 30px rgba(7,31,79,.08); }.ie2-grammar-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, .45fr); gap: 1rem; align-items: center; padding: clamp(1rem, 2vw, 1.7rem); }.ie2-grammar-intro h2, .ie2-grammar-challenge h2, .ie2-grammar-pattern-map h2 { margin: 0; color: var(--ie2-navy); font-size: clamp(1.45rem, 3vw, 2.2rem); line-height: 1.08; }.ie2-grammar-intro p:not(.intermediate2-kicker), .ie2-section-intro p:not(.intermediate2-kicker) { margin: .55rem 0 0; color: var(--ie2-muted); line-height: 1.55; }.ie2-grammar-intro aside { display: grid; gap: .35rem; padding: 1rem; border-left: 4px solid var(--ie2-teal); border-radius: 0 12px 12px 0; background: #edf9f7; color: var(--ie2-ink); }.ie2-grammar-intro aside strong { color: var(--ie2-teal); }.ie2-grammar-challenge { padding: clamp(1rem, 2vw, 1.8rem); }.ie2-grammar-challenge > header { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem; }.ie2-grammar-progress { display: grid; gap: .4rem; min-width: min(100%, 260px); color: var(--ie2-muted); font-size: .85rem; font-weight: 900; }.ie2-grammar-progress i { display: block; height: 9px; overflow: hidden; border-radius: 999px; background: #e4ebf5; }.ie2-grammar-progress b { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--ie2-teal), #2ab6a4); transition: width .2s ease; }
.ie2-grammar-question-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; margin-top: 1rem; }.ie2-grammar-question-card { padding: 1rem; border: 1px solid rgba(7,31,79,.12); border-radius: 15px; background: #f8faff; }.ie2-grammar-question-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }.ie2-grammar-question-head span { color: var(--ie2-teal); font-size: .74rem; font-weight: 950; letter-spacing: .06em; text-transform: uppercase; }.ie2-grammar-question-head strong { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--ie2-navy); color: #fff; }.ie2-grammar-question-card h3 { margin: .65rem 0 .8rem; color: var(--ie2-navy); font-size: clamp(1.08rem, 1.8vw, 1.35rem); line-height: 1.3; }.ie2-grammar-question-card fieldset { display: grid; gap: .5rem; margin: 0; padding: 0; border: 0; }.ie2-grammar-question-card legend { margin-bottom: .5rem; color: var(--ie2-muted); font-size: .8rem; font-weight: 850; }.ie2-grammar-question-card label { display: block; min-width: 0; cursor: pointer; }.ie2-grammar-question-card input { position: absolute; opacity: 0; pointer-events: none; }.ie2-grammar-question-card label span { display: flex; align-items: flex-start; gap: .55rem; min-height: 48px; padding: .62rem; border: 1px solid rgba(7,31,79,.16); border-radius: 12px; background: #fff; color: var(--ie2-ink); font-size: .9rem; font-weight: 750; line-height: 1.35; transition: border-color .16s ease, background .16s ease, transform .16s ease; }.ie2-grammar-question-card label:hover span, .ie2-grammar-question-card input:focus-visible + span { border-color: var(--ie2-teal); background: #eefaf8; }.ie2-grammar-question-card input:checked + span { border-color: var(--ie2-navy); outline: 3px solid rgba(36,84,166,.14); }.ie2-grammar-question-card label b { display: grid; place-items: center; flex: 0 0 25px; height: 25px; border-radius: 50%; background: #e8eef8; color: var(--ie2-navy); font-size: .75rem; }.ie2-grammar-question-card label.is-correct span { border-color: #16815f; background: #eafaf3; }.ie2-grammar-question-card label.is-incorrect span { border-color: #c8463f; background: #fff1f0; }.ie2-grammar-feedback { margin-top: .7rem; padding: .75rem .85rem; border-radius: 12px; line-height: 1.45; font-size: .9rem; }.ie2-grammar-feedback:empty { display: none; }.ie2-grammar-feedback p { margin: .25rem 0 0; }.ie2-grammar-feedback.is-warning { background: #fff5dd; color: #815c09; }.ie2-grammar-feedback.is-correct { background: #eafaf3; color: #146247; }.ie2-grammar-feedback.is-incorrect { background: #fff1f0; color: #9c302d; }.ie2-grammar-actions { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .65rem; margin-top: 1rem; }.ie2-grammar-result { display: grid; grid-template-columns: minmax(0, .7fr) minmax(300px, 1.3fr); gap: 1rem; align-items: start; margin-top: 1rem; padding: 1rem; border: 1px solid rgba(15,118,110,.25); border-radius: 15px; background: #edf9f7; }.ie2-grammar-result span { color: var(--ie2-teal); font-size: .8rem; font-weight: 950; text-transform: uppercase; }.ie2-grammar-result h3 { margin: .15rem 0; color: var(--ie2-navy); font-size: clamp(2rem, 4vw, 3.25rem); }.ie2-grammar-result p { margin: 0; color: var(--ie2-muted); line-height: 1.5; }.ie2-grammar-result ol { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .55rem; margin: 0; padding: 0; list-style: none; }.ie2-grammar-result li { padding: .8rem; border-radius: 12px; background: #fff; }.ie2-grammar-result li strong, .ie2-grammar-result li span { display: block; }.ie2-grammar-result li span { margin-top: .3rem; color: var(--ie2-muted); font-size: .88rem; font-weight: 500; text-transform: none; }
.ie2-grammar-pattern-map { padding: clamp(1rem, 2vw, 1.7rem); }.ie2-grammar-pattern-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: .75rem; margin-top: 1rem; }.ie2-grammar-pattern-grid article { padding: .9rem; border: 1px solid rgba(7,31,79,.12); border-radius: 13px; background: #f8faff; }.ie2-grammar-pattern-grid strong { color: var(--ie2-teal); font-size: 1.05rem; }.ie2-grammar-pattern-grid p { min-height: 48px; margin: .4rem 0; color: var(--ie2-ink); line-height: 1.45; }.ie2-grammar-pattern-grid code { color: var(--ie2-blue); font: inherit; font-weight: 850; }.ie2-grammar-pattern-grid span { color: var(--ie2-muted); font-size: .88rem; line-height: 1.45; }
@media (max-width: 800px) { .ie2-grammar-hero, .ie2-grammar-intro, .ie2-grammar-result, .ie2-grammar-question-list { grid-template-columns: 1fr; }.ie2-grammar-hero figure { min-height: 220px; }.ie2-grammar-hero img { min-height: 220px; max-height: 280px; object-position: center 35%; } }
@media (max-width: 700px) { .ie2-grammar-page { --ie2-grammar-gutter: .75rem; }.ie2-grammar-hero { min-height: 0; }.ie2-grammar-hero-copy { padding-top: 2rem; padding-bottom: 1.4rem; }.ie2-grammar-hero h1 { font-size: clamp(2.4rem, 13vw, 3.4rem); }.ie2-grammar-hero-copy > p:not(.intermediate2-kicker) { font-size: .96rem; }.ie2-grammar-meta span { font-size: .7rem; }.ie2-grammar-hero .intermediate2-actions { display: grid; grid-template-columns: 1fr 1fr; }.ie2-grammar-hero .intermediate2-actions a { padding-inline: .45rem; font-size: .79rem; }.ie2-grammar-challenge > header { align-items: start; }.ie2-grammar-progress { width: 100%; }.ie2-grammar-actions, .ie2-grammar-result-actions { display: grid; grid-template-columns: 1fr; width: 100%; }.ie2-grammar-actions > *, .ie2-grammar-result-actions > * { width: 100%; }.ie2-grammar-question-card label span { min-height: 52px; }.ie2-grammar-pattern-grid { grid-template-columns: 1fr; }.ie2-grammar-pattern-grid p { min-height: 0; } }

/* Unit 2 group speaking: a compact full-width roundtable, not a long instruction column. */
.ie2-roundtable-page { --ie2-roundtable-gutter: clamp(1rem, 2.6vw, 3.2rem); }.ie2-roundtable-page .navbar { width: 100%; max-width: none; padding-left: max(var(--ie2-roundtable-gutter), env(safe-area-inset-left)); padding-right: max(var(--ie2-roundtable-gutter), env(safe-area-inset-right)); }.ie2-roundtable-hero { display: grid; grid-template-columns: minmax(0, 1.03fr) minmax(380px, .97fr); width: 100%; min-height: min(610px, 65vh); overflow: hidden; background: #092453; color: #fff; }.ie2-roundtable-hero-copy { display: grid; align-content: center; padding: clamp(2rem, 5vw, 5rem) max(var(--ie2-roundtable-gutter), env(safe-area-inset-left)); }.ie2-roundtable-hero .intermediate2-kicker { color: #ffd77f; }.ie2-roundtable-hero h1 { max-width: 10ch; margin: .2rem 0 .8rem; color: #fff; font-size: clamp(2.55rem, 6vw, 5.35rem); line-height: .94; }.ie2-roundtable-hero-copy > p:not(.intermediate2-kicker) { max-width: 660px; margin: 0; color: rgba(255,255,255,.9); font-size: clamp(1rem, 1.8vw, 1.18rem); line-height: 1.58; }.ie2-roundtable-hero figure { min-height: 100%; margin: 0; }.ie2-roundtable-hero img { display: block; width: 100%; height: 100%; min-height: 390px; object-fit: cover; object-position: center; }.ie2-roundtable-meta { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1rem; }.ie2-roundtable-meta span { padding: .38rem .62rem; border: 1px solid rgba(255,255,255,.27); border-radius: 999px; background: rgba(255,255,255,.1); color: #fff; font-size: .78rem; font-weight: 900; }.ie2-roundtable-page .intermediate2-search.course-search-panel, .ie2-roundtable-page .course-search-empty, .ie2-roundtable-shell { width: 100%; max-width: none; box-sizing: border-box; margin-left: 0; margin-right: 0; }.ie2-roundtable-page .intermediate2-search.course-search-panel, .ie2-roundtable-page .course-search-empty, .ie2-roundtable-shell { padding-left: max(var(--ie2-roundtable-gutter), env(safe-area-inset-left)); padding-right: max(var(--ie2-roundtable-gutter), env(safe-area-inset-right)); }.ie2-roundtable-page .intermediate2-search.course-search-panel { margin-top: 1rem; }.ie2-roundtable-shell { display: grid; gap: 1rem; margin: 1rem 0 4rem; }.ie2-roundtable-intro, .ie2-roundtable-section, .ie2-roundtable-language, .ie2-roundtable-final { border: 1px solid var(--ie2-line); border-radius: 18px; background: #fff; box-shadow: 0 12px 30px rgba(7,31,79,.08); }.ie2-roundtable-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(270px, .48fr); gap: 1rem; align-items: center; padding: clamp(1rem, 2vw, 1.7rem); }.ie2-roundtable-intro h2, .ie2-roundtable-section h2, .ie2-roundtable-language h2, .ie2-roundtable-final h2 { margin: 0; color: var(--ie2-navy); font-size: clamp(1.45rem, 3vw, 2.2rem); line-height: 1.1; }.ie2-roundtable-intro p:not(.intermediate2-kicker), .ie2-roundtable-section > p:not(.intermediate2-kicker), .ie2-roundtable-final > div > p:not(.intermediate2-kicker) { margin: .55rem 0 0; color: var(--ie2-muted); line-height: 1.55; }.ie2-roundtable-intro aside { display: grid; gap: .35rem; padding: 1rem; border-left: 4px solid var(--ie2-teal); border-radius: 0 12px 12px 0; background: #edf9f7; color: var(--ie2-ink); }.ie2-roundtable-intro aside strong { color: var(--ie2-teal); }.ie2-roundtable-section, .ie2-roundtable-language { padding: clamp(1rem, 2vw, 1.7rem); }.ie2-roundtable-role-grid, .ie2-roundtable-language-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .75rem; margin-top: 1rem; }.ie2-roundtable-role-grid article { padding: 1rem; border: 1px solid rgba(7,31,79,.13); border-radius: 15px; background: #f8faff; }.ie2-roundtable-role-icon { display: grid; place-items: center; width: 39px; height: 39px; border-radius: 12px; background: #e7f6f3; color: var(--ie2-teal); font-size: 1.2rem; }.ie2-roundtable-role-grid h3 { margin: .65rem 0 .3rem; color: var(--ie2-navy); font-size: 1.15rem; }.ie2-roundtable-role-grid p { min-height: 58px; margin: 0; color: var(--ie2-muted); font-size: .91rem; line-height: 1.45; }.ie2-roundtable-role-grid strong { display: block; margin-top: .8rem; color: var(--ie2-teal); font-size: .87rem; line-height: 1.4; }.ie2-roundtable-note, .ie2-roundtable-selection { margin: 1rem 0 0; padding: .75rem .9rem; border-radius: 12px; background: #eef4ff; color: var(--ie2-ink); line-height: 1.48; }.ie2-roundtable-dilemma-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: .75rem; margin-top: 1rem; }.ie2-roundtable-dilemma { display: grid; gap: .45rem; min-height: 154px; padding: 1rem; border: 1px solid rgba(7,31,79,.15); border-radius: 15px; background: linear-gradient(145deg, #fff, #f4f8ff); color: var(--ie2-ink); text-align: left; cursor: pointer; transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; }.ie2-roundtable-dilemma:hover, .ie2-roundtable-dilemma:focus-visible { border-color: var(--ie2-teal); box-shadow: 0 10px 22px rgba(15,118,110,.12); transform: translateY(-2px); outline: 0; }.ie2-roundtable-dilemma[aria-pressed="true"] { border-color: var(--ie2-teal); background: #e8f8f5; box-shadow: inset 0 0 0 2px rgba(15,118,110,.13); }.ie2-roundtable-dilemma strong { color: var(--ie2-navy); font-size: 1.1rem; }.ie2-roundtable-dilemma span { color: var(--ie2-muted); line-height: 1.48; }.ie2-roundtable-flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7rem; margin-top: 1rem; }.ie2-roundtable-flow article { display: grid; grid-template-columns: auto 1fr; gap: .6rem; padding: .9rem; border-top: 4px solid var(--ie2-teal); border-radius: 0 0 13px 13px; background: #f8faff; }.ie2-roundtable-flow b { color: var(--ie2-teal); font-size: .9rem; }.ie2-roundtable-flow h3 { margin: 0; color: var(--ie2-navy); font-size: 1.02rem; }.ie2-roundtable-flow p { margin: .35rem 0 0; color: var(--ie2-muted); font-size: .88rem; line-height: 1.48; }.ie2-roundtable-language { background: #092453; color: #fff; }.ie2-roundtable-language .intermediate2-kicker { color: #ffd77f; }.ie2-roundtable-language h2 { color: #fff; }.ie2-roundtable-language-grid article { padding: .85rem; border: 1px solid rgba(255,255,255,.17); border-radius: 13px; background: rgba(255,255,255,.07); }.ie2-roundtable-language-grid strong, .ie2-roundtable-language-grid span { display: block; }.ie2-roundtable-language-grid strong { color: #ffd77f; font-size: .9rem; }.ie2-roundtable-language-grid span { margin-top: .38rem; color: rgba(255,255,255,.9); font-size: .91rem; line-height: 1.48; }.ie2-roundtable-final { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, .9fr); gap: clamp(1rem, 3vw, 2.5rem); align-items: center; padding: clamp(1rem, 3vw, 2.2rem); }.ie2-roundtable-final ol { display: grid; gap: .5rem; margin: 1rem 0 0; padding: 0; list-style: none; counter-reset: roundtable; }.ie2-roundtable-final li { padding: .62rem .75rem .62rem 2.35rem; border-radius: 11px; background: #f2f6fc; color: var(--ie2-muted); line-height: 1.46; position: relative; }.ie2-roundtable-final li::before { counter-increment: roundtable; content: counter(roundtable); display: grid; place-items: center; width: 22px; height: 22px; position: absolute; top: .6rem; left: .65rem; border-radius: 50%; background: var(--ie2-teal); color: #fff; font-size: .72rem; font-weight: 900; }.ie2-roundtable-final li strong { color: var(--ie2-navy); }.ie2-roundtable-final aside { padding: .9rem; border-radius: 16px; background: #eaf8f5; }.ie2-roundtable-table-label { display: block; color: var(--ie2-teal); font-size: .78rem; font-weight: 950; letter-spacing: .06em; text-align: center; text-transform: uppercase; }.ie2-roundtable-table { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; align-items: center; margin-top: .65rem; }.ie2-roundtable-table article, .ie2-roundtable-table > div { display: grid; gap: .18rem; min-height: 76px; padding: .7rem; border-radius: 13px; text-align: center; }.ie2-roundtable-table article { border: 1px solid rgba(7,31,79,.12); background: #fff; }.ie2-roundtable-table > div { grid-column: 1 / -1; background: var(--ie2-navy); color: #fff; }.ie2-roundtable-table strong, .ie2-roundtable-table b { color: var(--ie2-navy); font-size: .9rem; }.ie2-roundtable-table > div b { color: #ffd77f; }.ie2-roundtable-table span { color: var(--ie2-muted); font-size: .8rem; line-height: 1.35; }.ie2-roundtable-table > div span { color: rgba(255,255,255,.88); }
@media (max-width: 900px) { .ie2-roundtable-hero, .ie2-roundtable-intro, .ie2-roundtable-final { grid-template-columns: 1fr; }.ie2-roundtable-hero figure { min-height: 250px; }.ie2-roundtable-hero img { min-height: 250px; max-height: 360px; object-position: center 40%; }.ie2-roundtable-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .ie2-roundtable-page { --ie2-roundtable-gutter: .75rem; }.ie2-roundtable-hero { min-height: 0; }.ie2-roundtable-hero-copy { padding-top: 2rem; padding-bottom: 1.4rem; }.ie2-roundtable-hero h1 { font-size: clamp(2.35rem, 13vw, 3.45rem); }.ie2-roundtable-hero-copy > p:not(.intermediate2-kicker) { font-size: .96rem; }.ie2-roundtable-meta span { font-size: .69rem; }.ie2-roundtable-hero .intermediate2-actions { display: grid; grid-template-columns: 1fr 1fr; }.ie2-roundtable-hero .intermediate2-actions a { padding-inline: .45rem; font-size: .78rem; }.ie2-roundtable-role-grid, .ie2-roundtable-language-grid, .ie2-roundtable-flow { grid-template-columns: 1fr; }.ie2-roundtable-role-grid p { min-height: 0; }.ie2-roundtable-dilemma-grid { grid-template-columns: 1fr; }.ie2-roundtable-dilemma { min-height: 0; }.ie2-roundtable-final { padding: 1rem; }.ie2-roundtable-table { gap: .45rem; } }
.ie2-roundtable-case { display: grid; grid-template-columns: minmax(0, 1fr) minmax(270px, .8fr); gap: .8rem; margin-top: 1rem; padding: clamp(1rem, 2vw, 1.35rem); border: 2px solid rgba(15,118,110,.35); border-radius: 16px; background: linear-gradient(135deg, #f7fffd, #eef5ff); box-shadow: 0 12px 26px rgba(7,31,79,.08); }.ie2-roundtable-case > header { grid-column: 1 / -1; }.ie2-roundtable-case > header > span { color: var(--ie2-teal); font-size: .75rem; font-weight: 950; letter-spacing: .07em; text-transform: uppercase; }.ie2-roundtable-case h3 { margin: .2rem 0; color: var(--ie2-navy); font-size: clamp(1.45rem, 2.8vw, 2rem); }.ie2-roundtable-case header p { margin: 0; color: var(--ie2-muted); }.ie2-roundtable-case h4 { margin: 0 0 .5rem; color: var(--ie2-navy); font-size: .95rem; }.ie2-roundtable-case-context, .ie2-roundtable-case-options, .ie2-roundtable-case-prompts { padding: .95rem; border: 1px solid rgba(7,31,79,.12); border-radius: 13px; background: rgba(255,255,255,.78); }.ie2-roundtable-case-context { grid-row: span 2; }.ie2-roundtable-case-context p { margin: 0; color: var(--ie2-muted); line-height: 1.55; }.ie2-roundtable-case-options > div, .ie2-roundtable-case-prompts > div { display: grid; gap: .5rem; }.ie2-roundtable-case-options article, .ie2-roundtable-case-prompts article { display: grid; grid-template-columns: minmax(90px, .35fr) 1fr; gap: .45rem; padding: .55rem .6rem; border-radius: 9px; background: #fff; color: var(--ie2-muted); font-size: .88rem; line-height: 1.42; }.ie2-roundtable-case-options strong, .ie2-roundtable-case-prompts strong { color: var(--ie2-teal); }.ie2-roundtable-case aside, .ie2-roundtable-case footer { grid-column: 1 / -1; display: grid; gap: .25rem; padding: .85rem .95rem; border-radius: 12px; }.ie2-roundtable-case aside { background: #fff5dd; color: #72520b; }.ie2-roundtable-case footer { background: var(--ie2-navy); color: #fff; }.ie2-roundtable-case footer strong { color: #ffd77f; }.ie2-roundtable-case aside span, .ie2-roundtable-case footer span { line-height: 1.48; }
@media (max-width: 800px) { .ie2-roundtable-case { grid-template-columns: 1fr; }.ie2-roundtable-case-context { grid-row: auto; } }
@media (max-width: 520px) { .ie2-roundtable-case-options article, .ie2-roundtable-case-prompts article { grid-template-columns: 1fr; } }

/* Unit 3 theory: technology support and digital-safety learning route. */
.ie2-unit3-theory-page { --ie2-unit3-gutter: clamp(1rem, 2vw, 3rem); }
.ie2-unit3-theory-page .navbar { width: 100%; max-width: none; padding-left: max(var(--ie2-unit3-gutter), env(safe-area-inset-left)); padding-right: max(var(--ie2-unit3-gutter), env(safe-area-inset-right)); }
.ie2-unit3-hero { min-height: min(560px, 68vh); display: grid; align-items: center; padding: clamp(2.2rem, 5vw, 5.2rem) max(var(--ie2-unit3-gutter), env(safe-area-inset-left)); color: #fff; background: linear-gradient(90deg, rgba(3, 12, 32, .97) 0%, rgba(7, 31, 79, .87) 48%, rgba(7, 31, 79, .12) 100%), url('../img/english-intermediate-2/units/unit-3-technology-safety-v1.webp') center / cover no-repeat; }
.ie2-unit3-hero-copy { width: min(780px, 100%); }.ie2-unit3-hero h1 { max-width: 15ch; margin: 0; color: #fff; font-size: clamp(2.2rem, 5.3vw, 4.35rem); line-height: .98; }.ie2-unit3-hero p:not(.intermediate2-kicker) { max-width: 710px; margin: .9rem 0 0; color: rgba(255,255,255,.91); font-size: clamp(1rem, 1.8vw, 1.16rem); line-height: 1.58; }
.ie2-unit3-theory-page .intermediate2-search.course-search-panel, .ie2-unit3-theory-page .ie2-unit-theory-shell, .ie2-unit3-theory-page .course-search-empty, .ie2-unit3-learning-route { width: 100%; max-width: none; box-sizing: border-box; margin-left: 0; margin-right: 0; padding-left: max(var(--ie2-unit3-gutter), env(safe-area-inset-left)); padding-right: max(var(--ie2-unit3-gutter), env(safe-area-inset-right)); }.ie2-unit3-theory-page .intermediate2-search.course-search-panel { margin-top: 1rem; }.ie2-unit3-theory-page .ie2-unit-theory-shell { display: grid; gap: 0; margin-top: 1rem; }.ie2-unit3-theory-page .ie2-theory-body { padding: clamp(1rem, 2vw, 2rem); }
.ie2-unit3-learning-route { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7rem; margin-top: 1rem; }.ie2-unit3-learning-route > div { display: grid; grid-template-columns: auto 1fr; column-gap: .62rem; padding: .85rem; border: 1px solid rgba(7,31,79,.13); border-radius: 13px; background: #fff; box-shadow: 0 8px 20px rgba(7,31,79,.06); }.ie2-unit3-learning-route span { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 9px; background: #e8f7f4; color: var(--ie2-teal); font-size: .78rem; font-weight: 950; }.ie2-unit3-learning-route strong { align-self: center; color: var(--ie2-navy); font-size: .95rem; }.ie2-unit3-learning-route p { grid-column: 1 / -1; margin: .55rem 0 0; color: var(--ie2-muted); font-size: .84rem; line-height: 1.42; }
.ie2-unit3-check { margin-top: 1rem; padding: 1rem; border: 1px solid rgba(15,118,110,.25); border-radius: 15px; background: #f4fbfa; }.ie2-unit3-check fieldset { display: grid; gap: .5rem; margin: 0; padding: 0; border: 0; }.ie2-unit3-check legend { margin-bottom: .6rem; color: var(--ie2-navy); font-weight: 900; line-height: 1.35; }.ie2-unit3-check label { display: block; cursor: pointer; }.ie2-unit3-check input { position: absolute; opacity: 0; pointer-events: none; }.ie2-unit3-check label span { display: flex; align-items: flex-start; gap: .6rem; padding: .68rem; border: 1px solid rgba(7,31,79,.16); border-radius: 11px; background: #fff; color: var(--ie2-ink); line-height: 1.42; transition: border-color .16s ease, background .16s ease; }.ie2-unit3-check label:hover span, .ie2-unit3-check input:focus-visible + span { border-color: var(--ie2-teal); background: #eaf8f5; }.ie2-unit3-check input:checked + span { border-color: var(--ie2-navy); outline: 3px solid rgba(36,84,166,.13); }.ie2-unit3-check label b { display: grid; place-items: center; flex: 0 0 24px; height: 24px; border-radius: 50%; background: #e9eef8; color: var(--ie2-navy); font-size: .75rem; }.ie2-unit3-check label.is-correct span { border-color: #16815f; background: #eafaf3; }.ie2-unit3-check label.is-incorrect span { border-color: #c8463f; background: #fff1f0; }.ie2-unit3-check .intermediate2-button { margin-top: .8rem; }.ie2-unit3-feedback { margin-top: .7rem; padding: .72rem .82rem; border-radius: 10px; font-size: .9rem; line-height: 1.45; }.ie2-unit3-feedback:empty { display: none; }.ie2-unit3-feedback.is-warning { background: #fff5dd; color: #74530a; }.ie2-unit3-feedback.is-correct { background: #eafaf3; color: #146247; }.ie2-unit3-feedback.is-incorrect { background: #fff1f0; color: #9c302d; }
.ie2-unit3-transfer { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }.ie2-unit3-transfer article { padding: .95rem; border-top: 4px solid var(--ie2-teal); border-radius: 0 0 13px 13px; background: #f4f8ff; }.ie2-unit3-transfer span, .ie2-unit3-transfer strong { display: block; }.ie2-unit3-transfer span { color: var(--ie2-teal); font-size: .77rem; font-weight: 950; letter-spacing: .05em; text-transform: uppercase; }.ie2-unit3-transfer strong { margin-top: .35rem; color: var(--ie2-navy); line-height: 1.45; }.ie2-unit3-can-do { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: .55rem; margin: 1rem 0 0; padding: 0; list-style: none; }.ie2-unit3-can-do li { position: relative; padding: .75rem .8rem .75rem 2.25rem; border-radius: 11px; background: #eef8f6; color: var(--ie2-ink); line-height: 1.43; }.ie2-unit3-can-do li::before { content: '✓'; position: absolute; top: .72rem; left: .75rem; color: var(--ie2-teal); font-weight: 950; }
.ie2-unit3-theory-page .ie2-vocabulary-bank { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
@media (max-width: 980px) { .ie2-unit3-learning-route { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .ie2-unit3-theory-page { --ie2-unit3-gutter: .75rem; }.ie2-unit3-hero { min-height: auto; padding-top: 2.4rem; padding-bottom: 2rem; background: linear-gradient(180deg, rgba(3,12,32,.16) 0%, rgba(3,12,32,.78) 44%, rgba(3,12,32,.97) 100%), url('../img/english-intermediate-2/units/unit-3-technology-safety-v1.webp') center / cover no-repeat; }.ie2-unit3-hero h1 { font-size: clamp(2rem, 10vw, 3.1rem); }.ie2-unit3-hero p:not(.intermediate2-kicker) { font-size: .95rem; line-height: 1.46; }.ie2-unit3-learning-route { grid-template-columns: 1fr; }.ie2-unit3-transfer { grid-template-columns: 1fr; }.ie2-unit3-theory-page .intermediate2-search.course-search-panel, .ie2-unit3-theory-page .ie2-unit-theory-shell { padding-left: max(.75rem, env(safe-area-inset-left)); padding-right: max(.75rem, env(safe-area-inset-right)); } }

/* Unit 3 expressions: Level 1's context-rich pattern, with room for grammar and sound. */
.ie2-unit3-expression-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);
  gap: 1rem;
  align-items: stretch;
}
.ie2-unit3-expression-intro .ie2-section-intro { margin: 0; }
.ie2-unit3-expression-intro .ie2-section-intro p { max-width: 76ch; }
.ie2-unit3-expression-visual {
  position: relative;
  min-height: 280px;
  margin: 0;
  overflow: hidden;
  border-radius: 16px;
  background: var(--ie2-navy);
}
.ie2-unit3-expression-visual img { width: 100%; height: 100%; min-height: 280px; object-fit: cover; }
.ie2-unit3-expression-visual figcaption {
  position: absolute;
  inset: auto .75rem .75rem;
  display: grid;
  gap: .18rem;
  padding: .75rem;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 12px;
  background: rgba(5,24,57,.88);
  color: #fff;
  backdrop-filter: blur(8px);
}
.ie2-unit3-expression-visual figcaption strong { color: #fff; }
.ie2-unit3-expression-visual figcaption span { color: rgba(255,255,255,.84); font-size: .86rem; line-height: 1.4; }
.ie2-unit3-expression-compare { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 1rem; }
.ie2-unit3-expression-compare article { min-height: 0; }
.ie2-unit3-pronunciation-map {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
  gap: 1rem;
  margin-top: 1rem;
  padding: clamp(1rem, 2vw, 1.45rem);
  border: 1px solid rgba(15,118,110,.22);
  border-radius: 16px;
  background: linear-gradient(135deg, #edf9f7, #f7fbff);
}
.ie2-unit3-pronunciation-map span { color: var(--ie2-teal); font-size: .76rem; font-weight: 950; letter-spacing: .05em; text-transform: uppercase; }
.ie2-unit3-pronunciation-map h3 { margin: .25rem 0 .45rem; color: var(--ie2-navy); font-size: clamp(1.2rem, 2vw, 1.6rem); }
.ie2-unit3-pronunciation-map p { margin: 0; color: var(--ie2-muted); line-height: 1.58; }
.ie2-unit3-pronunciation-map ul { display: grid; gap: .55rem; align-content: center; margin: 0; padding: 0; list-style: none; }
.ie2-unit3-pronunciation-map li { padding: .62rem .72rem; border-radius: 10px; background: #fff; color: var(--ie2-ink); line-height: 1.4; }
.ie2-unit3-expression-grid,
.ie2-unit3-idiom-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
.ie2-unit3-idiom-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }
.ie2-unit3-expression-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: clamp(1rem, 1.8vw, 1.3rem);
  border: 1px solid rgba(7,31,79,.13);
  border-top: 4px solid var(--ie2-blue);
  border-radius: 0 0 15px 15px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(7,31,79,.06);
}
.ie2-unit3-expression-card.is-idiom { border-top-color: #a85b12; background: #fffaf4; }
.ie2-unit3-expression-card h3 { margin: .55rem 0 .45rem; color: var(--ie2-navy); font-size: clamp(1.35rem, 2.2vw, 1.75rem); }
.ie2-unit3-expression-card p { margin: .25rem 0; overflow-wrap: anywhere; color: var(--ie2-ink); line-height: 1.55; }
.ie2-unit3-sound-cue { margin-top: auto !important; padding-top: .65rem; }
.ie2-unit3-sound-cue mark { padding: .15rem .35rem; border-radius: 6px; background: #e9f3ff; color: var(--ie2-navy); font-weight: 900; }
.ie2-unit3-audio-model { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin-top: .7rem; }
.ie2-unit3-audio-model audio { display: none; }
.ie2-unit3-audio-model button {
  min-height: 42px;
  padding: .55rem .65rem;
  border: 1px solid rgba(36,84,166,.25);
  border-radius: 10px;
  background: #eef4ff;
  color: var(--ie2-navy);
  font: inherit;
  font-size: .82rem;
  font-weight: 900;
  cursor: pointer;
}
.ie2-unit3-audio-model button:hover,
.ie2-unit3-audio-model button:focus-visible,
.ie2-unit3-audio-model button.is-playing { border-color: var(--ie2-teal); outline: none; background: var(--ie2-teal); color: #fff; }
.ie2-unit3-category-note { max-width: 82ch; margin: 0 0 .8rem; padding: .72rem .8rem; border-left: 4px solid #a85b12; background: #fff7ed; color: var(--ie2-ink); line-height: 1.5; }
@media (max-width: 900px) {
  .ie2-unit3-expression-intro,
  .ie2-unit3-pronunciation-map { grid-template-columns: 1fr; }
  .ie2-unit3-expression-visual,
  .ie2-unit3-expression-visual img { min-height: 230px; max-height: 330px; }
  .ie2-unit3-expression-compare { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .ie2-unit3-expression-grid,
  .ie2-unit3-idiom-grid { grid-template-columns: minmax(0, 1fr); }
  .ie2-unit3-idiom-grid > :last-child:nth-child(odd) { grid-column: auto; }
  .ie2-unit3-expression-card { padding: .9rem; }
  .ie2-unit3-expression-visual,
  .ie2-unit3-expression-visual img { min-height: 210px; }
}

/* Unit 4 explanation: cinematic entry, generous teaching panels and comparisons. */
.ie2-unit4-theory-page {font-size:1rem}
.ie2-unit4-theory-page *, .ie2-unit4-theory-page *::before,.ie2-unit4-theory-page *::after {box-sizing:border-box}
.ie2-unit4-theory-page [hidden] {display:none!important}
.ie2-unit4-theory-page :focus-visible {outline:3px solid var(--ie2-teal);outline-offset:4px}
.u4-skip {position:fixed;top:-100px;left:12px;z-index:9999;padding:12px;background:white;color:var(--ie2-navy)}
.u4-skip:focus {top:12px}
.u4-hero {position:relative;isolation:isolate;color:white;overflow:hidden}
.u4-hero-image {position:absolute;z-index:-2;width:100%;height:100%;inset:0;object-fit:cover;object-position:center 44%}
.u4-hero::before {content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(3,12,32,.95),rgba(7,31,79,.85) 44%,rgba(7,31,79,.16))}
.u4-hero-inner {width:min(1180px,calc(100% - 36px));margin:auto;padding:2.6rem 0}
.ie2-unit4-hero-copy {width:100%;min-height:270px}
.u4-hero h1 {max-width:22ch;margin:.55rem 0;color:white;font-size:clamp(2rem,3.6vw,3.25rem);line-height:1.08;letter-spacing:-.035em}
.u4-hero p {max-width:55ch;color:white;line-height:1.55}
.u4-hero .intermediate2-kicker {color:#f1cb77}
.u4-hero .intermediate2-actions {margin-top:1.25rem}
.u4-shell {width:min(1180px,calc(100% - 36px));margin:0 auto}
.ie2-unit4-theory-page .ie2-unit-theory-shell {width:min(1180px,calc(100% - 36px));max-width:1180px;margin:1rem auto 4rem}
.u4-opening {display:grid;grid-template-columns:1fr 1fr;gap:2rem;padding:2rem 0 1rem;align-items:center}
.u4-opening h2 {margin:.4rem 0;font-size:clamp(1.45rem,2.5vw,2rem);color:var(--ie2-navy);line-height:1.2}
.u4-opening p {line-height:1.6;color:var(--ie2-muted)}
.u4-route {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;list-style:none;padding:0;margin:0}
.u4-route li {display:grid;gap:.4rem;padding-left:.8rem;border-left:3px solid var(--ie2-teal);color:var(--ie2-muted);line-height:1.45}
.u4-route b {color:var(--ie2-navy)}
.u4-topic-nav {display:flex;flex-wrap:wrap;gap:.5rem;padding:.7rem 0}
.u4-topic-nav a {padding:.65rem .9rem;min-height:44px;border:1px solid var(--ie2-line);background:white;border-radius:8px;font-weight:750;color:var(--ie2-navy);text-decoration:none}
.ie2-unit4-theory-page .course-search-panel {width:100%;max-width:none;margin:1rem 0}
.ie2-unit4-theory-page .ie2-theory-body {padding:clamp(1rem,2.7vw,2rem);font-size:1rem}
.ie2-unit4-theory-page .ie2-theory-topic {scroll-margin-top:1rem}
.ie2-unit4-theory-page .ie2-theory-body h3 {color:var(--ie2-navy);font-size:1.25rem;line-height:1.3;margin:1.4rem 0 .75rem}
.ie2-unit4-theory-page .ie2-key-answer h2 {font-size:clamp(1.45rem,2.4vw,2rem);line-height:1.2}
.u4-grid,.u4-storyboard {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem;margin:1.4rem 0}
.u4-card {min-width:0;background:white;border:1px solid var(--ie2-line);border-radius:8px;padding:1.2rem;overflow-wrap:anywhere}
.ie2-unit4-theory-page .u4-card h3 {margin-top:0}
.u4-card > :last-child {margin-bottom:0}
.u4-genre-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem;margin:1.4rem 0}
.u4-genre-grid .u4-card,.u4-media-grid .u4-card {padding:0;overflow:hidden}
.u4-card-copy {padding:1.2rem}
.u4-crop {position:relative;overflow:hidden;aspect-ratio:16/10;width:100%;background:var(--ie2-soft)}
.u4-crop img {position:absolute;max-width:none;width:calc(var(--cols) * 100%);height:auto;left:calc(var(--col) * -100%);top:50%;transform:translateY(calc((var(--row) + .5) * -100% / var(--rows)))}
.u4-storyboard figure {min-width:0;margin:0;overflow:hidden;border:1px solid var(--ie2-line);border-radius:8px;background:white}
.u4-storyboard figcaption {padding:1.2rem}
.u4-step {display:inline-grid;place-items:center;width:2rem;height:2rem;background:var(--ie2-navy);color:white;border-radius:50%;font-weight:800}
.ie2-unit4-theory-page .u4-storyboard h3 {margin-top:.6rem}
.u4-note {padding:1rem 1.2rem;border-left:4px solid var(--ie2-gold);background:#fff8e8;margin:1.4rem 0;border-radius:0 8px 8px 0}
.u4-note p {margin:.45rem 0 0}
.u4-note strong {color:var(--ie2-navy)}
.ie2-unit4-theory-page .u4-model {padding:1rem;background:var(--ie2-soft);border-left:3px solid var(--ie2-blue);color:var(--ie2-ink);line-height:1.65;margin:1rem 0}
.u4-table {width:100%;overflow:auto;margin:1.4rem 0;border:1px solid var(--ie2-line);border-radius:8px}
.u4-table table {width:100%;border-collapse:collapse;background:white;table-layout:fixed}
.u4-table th,.u4-table td {padding:1rem;text-align:left;vertical-align:top;line-height:1.6;overflow-wrap:anywhere;border-bottom:1px solid var(--ie2-line)}
.u4-table th {background:var(--ie2-navy);color:white;font-size:.95rem}
.u4-table tr:last-child td {border:0}
.u4-formula {display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;padding:1.2rem 0}
.u4-formula span:not([aria-hidden]) {display:grid;padding:.8rem 1rem;gap:.3rem;border-radius:8px;border:1px solid var(--ie2-line);background:white}
.u4-formula .u4-aux {background:#e6f3ef!important;border-bottom:3px solid var(--ie2-teal)!important}
.u4-formula .u4-part {background:#edf2fc!important;border-bottom:3px solid var(--ie2-blue)!important}
.u4-timeline {display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;padding:1rem;background:#edf3fc;color:var(--ie2-navy);border-radius:8px}
.u4-timeline span[aria-hidden] {flex:1;text-align:center;color:var(--ie2-teal);white-space:nowrap}
.u4-flow {display:flex;gap:1.5rem;margin:1.5rem 0;padding:0;list-style:none}
.u4-flow li {min-width:0;flex:1;position:relative;display:grid;align-content:start;gap:.5rem;padding:1rem;background:#edf6f4;border-top:3px solid var(--ie2-teal)}
.u4-flow li + li::before {content:'→';position:absolute;left:-1.25rem;top:.9rem;color:var(--ie2-teal);font-weight:900}
.u4-flow strong {color:var(--ie2-navy)}
.u4-audio {padding-top:.9rem;margin-top:1rem;border-top:1px solid var(--ie2-line);min-width:0}
.u4-audio > strong {display:block;font-size:1rem;margin-bottom:.5rem;color:var(--ie2-navy)}
.u4-audio audio {display:block;width:100%;min-width:0;height:42px}
.u4-audio-actions {display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.6rem}
.u4-audio-actions button,.u4-check > button {font:inherit;font-weight:750;padding:.65rem 1rem;min-height:44px;border-radius:8px;border:1px solid var(--ie2-teal);color:var(--ie2-teal);background:white;cursor:pointer;white-space:normal;line-height:1.3}
.u4-audio-actions button[aria-pressed=true],.u4-check > button {background:var(--ie2-teal);color:white}
.u4-audio-status:empty {display:none}
.u4-support {margin:.8rem 0;border:1px solid var(--ie2-line);border-radius:8px;padding:.7rem .9rem;background:white}
.u4-support summary {cursor:pointer;color:var(--ie2-navy);font-weight:750;line-height:1.5;min-height:28px}
.u4-check {margin:1.5rem 0;padding:1.2rem;border:1px solid var(--ie2-line);background:white;border-radius:8px}
.u4-check fieldset {min-width:0;margin:0 0 1rem;padding:0;border:0}
.u4-check legend {padding:0 0 .8rem;font-weight:800;font-size:1.1rem;color:var(--ie2-navy);line-height:1.45}
.u4-check label,.u4-can-do label {display:flex;align-items:flex-start;gap:.7rem;padding:.8rem;line-height:1.6;cursor:pointer;border:1px solid var(--ie2-line);border-radius:8px;margin:.5rem 0;min-width:0}
.u4-check input,.u4-can-do input {flex-shrink:0;width:18px;height:18px;margin-top:.25rem;accent-color:var(--ie2-teal)}
.u4-check .is-correct {background:#e8f5ef;color:#145437}
.u4-check .is-incorrect {background:#fff0ec;color:#8b342a}
.u4-feedback:not(:empty) {padding:1rem;border-radius:8px;margin-bottom:0}
.u4-feedback:empty {display:none}
.u4-use {margin:1.2rem 0;padding:1.2rem;border-left:4px solid var(--ie2-teal);background:#edf7f4;border-radius:0 8px 8px 0}
.u4-use > strong {color:var(--ie2-teal)}
.u4-use p {margin:.45rem 0 0}
.u4-review {margin:1.5rem 0;padding:clamp(1rem,3vw,2rem);background:white;border:1px solid var(--ie2-line);border-top:5px solid var(--ie2-coral);border-radius:8px}
.u4-review-paragraph {display:grid;grid-template-columns:135px minmax(0,1fr);gap:1rem;padding:.9rem 0;border-bottom:1px solid var(--ie2-line)}
.u4-review-paragraph:last-child {border:0}
.u4-review-paragraph > span {font-weight:800;color:var(--ie2-teal);padding-top:.15rem}
.u4-review-paragraph p {margin:0}
.u4-media-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin:1.4rem 0}
.u4-era {display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between;background:var(--ie2-navy);color:white;padding:1rem;margin-top:1rem;border-radius:8px}
.u4-era span {color:var(--ie2-gold)}
.u4-label {display:block;color:var(--ie2-teal);font-size:.9rem;font-weight:750;margin-bottom:.5rem}
.u4-sound {padding:.8rem;background:#fff8e8;border-radius:8px}
.u4-dialogue {margin:1rem 0}
.u4-dialogue p {display:flex;align-items:flex-start;gap:1rem;padding:1rem;margin:0;background:white;border-bottom:1px solid var(--ie2-line)}
.u4-dialogue p:nth-child(even) {background:#edf5f3}
.u4-dialogue strong {flex:0 0 3rem;color:var(--ie2-navy)}
.u4-dialogue span {min-width:0}
.ie2-unit4-theory-page .u4-caption {font-size:.9rem;color:var(--ie2-muted);line-height:1.6}
@media(max-width: 980px) {.u4-opening{grid-template-columns:1fr;gap:1rem}.u4-hero-inner{padding:2rem 0}.u4-flow{flex-wrap:wrap}.u4-flow li{flex-basis:calc(50% - 1.5rem)}}
@media(max-width: 700px) {
.u4-grid,.u4-genre-grid,.u4-storyboard,.u4-media-grid{grid-template-columns:minmax(0,1fr)}
.u4-hero::before{background:linear-gradient(90deg,rgba(3,12,32,.95),rgba(7,31,79,.78))}
.u4-hero h1{font-size:clamp(1.6rem,5.5vw,2.3rem);letter-spacing:-.025em}
.u4-hero .ie2-overview-chips{gap:.4rem}.u4-hero .ie2-overview-chips span{font-size:.85rem}
.u4-hero .intermediate2-actions{display:grid;grid-template-columns:1fr}
.u4-hero .intermediate2-button{width:100%;white-space:normal;text-align:center}
.u4-shell,.u4-hero-inner,.ie2-unit4-theory-page .ie2-unit-theory-shell{width:calc(100% - 24px)}
.ie2-unit4-hero-copy{min-height:0}.u4-review-paragraph{grid-template-columns:1fr;gap:.4rem}
.u4-flow{flex-direction:column;gap:1.4rem}.u4-flow li + li::before{content:'↓';left:1rem;top:-1.55rem}
.u4-table th,.u4-table td{padding:.7rem}.u4-table table:has(th:nth-child(3)){min-width:520px}.u4-table table:has(th:nth-child(3)) th:first-child{width:25%}
.u4-dialogue p{gap:.6rem;padding:.8rem}.u4-route{gap:.8rem}
}
@media(max-width: 390px) {.u4-route{grid-template-columns:1fr}.u4-card,.u4-card-copy,.u4-check{padding:.9rem}.u4-audio-actions{display:grid;grid-template-columns:1fr}.u4-hero h1{font-size:1.55rem}.u4-hero p{font-size:.95rem}.u4-hero .intermediate2-button{padding:.65rem .5rem;font-size:.9rem}}


/* Keep mobile hero controls readable below the compact QR reservation. */
.u4-hero .ie2-overview-chips {display:flex;flex-wrap:wrap}
.u4-hero .ie2-overview-chips span {flex:0 1 auto;width:auto;min-height:0;padding:.4rem .65rem;line-height:1.3}
@media(max-width:620px) {
 .ie2-unit4-hero-copy > p:not(.intermediate2-kicker),.ie2-unit4-hero-copy > .ie2-overview-chips,.ie2-unit4-hero-copy > .intermediate2-actions {width:calc(100% + 100px);max-width:none}
 .u4-hero .intermediate2-actions {grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
 .u4-hero .intermediate2-button {font-size:.9rem;padding:.65rem .6rem}
 .u4-hero-inner {padding:1.5rem 0}
 .u4-hero .ie2-overview-chips span {font-size:.82rem}
}

/* Unit 4: full-width teaching layout with compact, regrouped cards. */
.u4-shell,.u4-hero-inner,.ie2-unit4-theory-page .ie2-unit-theory-shell{width:calc(100% - clamp(24px,4vw,72px));max-width:none}
.u4-vocab-grid,.u4-adverb-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.2rem;margin:1.4rem 0}
.u4-vocab-card{padding:0;overflow:hidden}
.u4-vocab-card>div:not(.u4-crop){padding:1rem}
.u4-vocab-card .u4-crop{height:140px;aspect-ratio:auto}
.u4-inline-audio{display:inline-block;padding:0;margin:0;border:0;max-width:100%;vertical-align:middle}
.u4-inline-audio audio{display:none}
.u4-inline-audio button{font:inherit;color:var(--ie2-navy);background:transparent;border:0;border-bottom:2px dotted var(--ie2-teal);padding:.35rem .15rem;min-height:44px;cursor:pointer;line-height:1.5;text-align:left;max-width:100%}
.u4-inline-audio button:hover,.u4-inline-audio button[aria-pressed=true]{background:#e1f2ec;color:#145437}
.u4-listen-mark{color:var(--ie2-teal);font-size:.8em;white-space:nowrap}
.u4-inline-audio .u4-audio-status{display:block;font-size:.85rem}
.u4-inline-audio .u4-audio-status:empty{display:none}
@media(min-width:1100px){
.u4-genre-grid,.u4-vocab-grid,.u4-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(min-width:1400px){
.u4-vocab-grid,.u4-adverb-grid,.u4-grid-4,.u4-storyboard{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:700px){
.u4-vocab-grid,.u4-adverb-grid{grid-template-columns:minmax(0,1fr)}
.u4-vocab-card .u4-crop{height:150px}
}

/* Expression cards keep their content and grow vertically across four desktop columns. */
@media(min-width:1100px){.u4-expressions{grid-template-columns:repeat(4,minmax(0,1fr))}}