/* ------------------------------------------------------------------
   Tutoring page (/tutoring)
   Extends the landing design language. Design tokens (--ink, --paper,
   --sun, --coral, --teal, --teal-deep, --line and the app fonts) are
   defined in /assets/index-ByJumzjg.css, which must load first.
   No JavaScript: every interaction uses the same hidden-input +
   :checked pattern as the home page.
   ------------------------------------------------------------------ */

/* --- Hero ------------------------------------------------------- */
.tut-hero {
  width: min(1180px, 100% - 32px);
  margin: 0 auto;
  padding: 46px 0 40px;
  display: grid;
  gap: 34px;
  position: relative;
}
.tut-hero h1 {
  max-width: 640px;
  font-family: var(--app-font-serif);
  letter-spacing: -.07em;
  margin: 16px 0 18px;
  font-size: clamp(38px, 9.5vw, 68px);
  font-weight: 700;
  line-height: .95;
}
.tut-hero h1 em {
  color: var(--teal);
  font-style: normal;
}
.tut-lede {
  color: #536273;
  max-width: 480px;
  font-size: 15px;
  line-height: 1.7;
}
.tut-actions {
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
  display: flex;
}
.tut-actions .button {
  min-height: 50px;
}

/* Trust row under the hero copy */
.trust-row {
  border-top: 1px solid var(--line);
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  margin-top: 30px;
  display: grid;
}
.trust-item {
  border-bottom: 1px solid var(--line);
  padding: 15px 0;
}
.trust-item:nth-child(odd) {
  border-right: 1px solid var(--line);
  padding-right: 14px;
}
.trust-item:nth-child(2n) {
  padding-left: 14px;
}
.trust-item strong {
  color: var(--teal-deep);
  font-family: var(--app-font-serif);
  letter-spacing: -.05em;
  font-size: 23px;
  display: block;
}
.trust-item span {
  color: #73808a;
  font-family: var(--app-font-mono);
  text-transform: uppercase;
  margin-top: 4px;
  font-size: 9px;
  line-height: 1.4;
  display: block;
}

/* --- Portrait / asset slots ------------------------------------- */
.portrait-stack {
  position: relative;
}
.portrait-frame {
  border: 2px solid var(--ink);
  background: #e8d9c5;
  box-shadow: 10px 11px 0 var(--ink);
  border-radius: 18px;
  max-width: 360px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}
.portrait-frame img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
  width: 100%;
  display: block;
}
.portrait-caption {
  border-top: 2px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--app-font-mono);
  padding: 11px 14px;
  font-size: 10px;
  line-height: 1.5;
}
.portrait-caption b {
  font-family: var(--app-font-serif);
  letter-spacing: -.04em;
  font-size: 15px;
  font-weight: 700;
  display: block;
}

/* Placeholder shown until a real image path is supplied */
.asset-slot {
  border: 2px dashed var(--teal);
  background: repeating-linear-gradient(45deg, #e9dfd0, #e9dfd0 9px, #e2d6c3 9px, #e2d6c3 18px);
  color: var(--teal-deep);
  font-family: var(--app-font-mono);
  text-align: center;
  place-content: center;
  gap: 6px;
  padding: 20px;
  font-size: 10px;
  line-height: 1.6;
  display: grid;
}
.asset-slot span {
  font-size: 22px;
}
.asset-slot b {
  font-size: 10px;
  font-weight: 500;
}
.asset-slot.slot-portrait {
  aspect-ratio: 4 / 5;
}
.asset-slot.slot-wide {
  aspect-ratio: 16 / 10;
  border-radius: 12px;
}
.asset-slot.slot-badge {
  aspect-ratio: 1;
  border-radius: 10px;
  padding: 10px;
  font-size: 9px;
}

/* --- Credential badges ------------------------------------------ */
.cert-row {
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 22px;
  display: flex;
}
.cert-badge {
  border: 1px solid var(--ink);
  background: var(--paper);
  box-shadow: 3px 3px 0 var(--ink);
  border-radius: 9px;
  align-items: center;
  gap: 9px;
  padding: 9px 13px;
  display: flex;
}
.cert-badge img {
  width: 26px;
  height: 26px;
  object-fit: contain;
  display: block;
}
.cert-mark {
  border: 1px solid var(--ink);
  background: var(--sun);
  width: 26px;
  height: 26px;
  font-family: var(--app-font-mono);
  border-radius: 50%;
  flex: none;
  place-items: center;
  font-size: 10px;
  display: grid;
}
.cert-badge b {
  font-family: var(--app-font-serif);
  letter-spacing: -.03em;
  font-size: 13px;
  display: block;
}
.cert-badge small {
  color: #73808a;
  font-family: var(--app-font-mono);
  font-size: 9px;
  display: block;
}

/* --- Format switcher (online / in-person) ----------------------- */
.format-shell {
  border: 1px solid var(--ink);
  background: #f4ead9;
  border-radius: 15px;
  margin-top: 31px;
  padding: 14px;
}
.switch-tabs {
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  display: grid;
}
.switch-tabs label {
  border: 1px solid var(--line);
  color: #536273;
  font-family: var(--app-font-mono);
  text-align: center;
  cursor: pointer;
  background: var(--paper);
  border-radius: 8px;
  min-height: 44px;
  place-content: center;
  padding: 10px 6px;
  font-size: 10px;
  line-height: 1.4;
  transition: background-color .18s, color .18s, border-color .18s;
  display: grid;
}
.switch-tabs label:hover {
  border-color: var(--ink);
}
.format-panel {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  gap: 20px;
  margin-top: 12px;
  padding: 22px 18px;
  display: none;
}
.format-panel h3 {
  font-family: var(--app-font-serif);
  letter-spacing: -.05em;
  margin: 8px 0 8px;
  font-size: 26px;
  line-height: 1;
}
.format-panel p {
  color: #697784;
  max-width: 420px;
  font-size: 13px;
  line-height: 1.65;
}
.format-facts {
  border-top: 1px solid var(--line);
  gap: 0;
  margin-top: 16px;
  display: grid;
}
.format-fact {
  border-bottom: 1px solid var(--line);
  grid-template-columns: 96px 1fr;
  gap: 12px;
  padding: 11px 0;
  font-size: 13px;
  display: grid;
}
.format-fact dt {
  color: var(--teal-deep);
  font-family: var(--app-font-mono);
  text-transform: uppercase;
  margin: 0;
  font-size: 9px;
  line-height: 1.7;
}
.format-fact dd {
  color: #4b5966;
  margin: 0;
  line-height: 1.55;
}
.schedule-grid {
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 8px;
  margin-top: 16px;
  display: grid;
}
.schedule-slot {
  border: 1px solid var(--line);
  background: #fffaf2;
  border-radius: 8px;
  padding: 11px;
}
.schedule-slot strong {
  font-family: var(--app-font-mono);
  font-size: 10px;
  display: block;
}
.schedule-slot span {
  color: #73808a;
  margin-top: 5px;
  font-size: 11px;
  line-height: 1.4;
  display: block;
}
.format-visual {
  align-self: start;
}
.format-visual img {
  border: 1px solid var(--ink);
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 12px;
  width: 100%;
  display: block;
}

/* --- Pricing matrix -------------------------------------------- */
.price-grid {
  gap: 14px;
  margin-top: 31px;
  display: grid;
}
.price-card {
  border: 1px solid var(--ink);
  background: var(--paper);
  border-radius: 14px;
  flex-direction: column;
  padding: 24px 20px;
  display: flex;
  position: relative;
}
.price-card.featured {
  background: var(--teal);
  color: var(--paper);
  border-color: var(--teal-deep);
  box-shadow: 6px 6px 0 var(--ink);
}
.price-card.exam {
  background: #e9dfd0;
}
.price-flag {
  border: 1px solid var(--ink);
  background: var(--sun);
  color: var(--ink);
  font-family: var(--app-font-mono);
  text-transform: uppercase;
  border-radius: 20px;
  padding: 5px 11px;
  font-size: 9px;
  position: absolute;
  top: -11px;
  left: 20px;
}
.price-kicker {
  font-family: var(--app-font-mono);
  text-transform: uppercase;
  font-size: 10px;
}
.price-card h3 {
  font-family: var(--app-font-serif);
  letter-spacing: -.05em;
  margin: 10px 0 12px;
  font-size: 25px;
  line-height: 1;
}
.price-tag {
  border-bottom: 1px solid var(--line);
  align-items: baseline;
  gap: 7px;
  padding-bottom: 16px;
  display: flex;
}
.price-card.featured .price-tag {
  border-color: #fbf5e94d;
}
.price-tag strong {
  font-family: var(--app-font-serif);
  letter-spacing: -.05em;
  font-size: 38px;
  line-height: .9;
}
.price-tag span {
  color: #73808a;
  font-family: var(--app-font-mono);
  font-size: 10px;
}
.price-card.featured .price-tag span {
  color: #cfe6df;
}
.price-tag .price-tbc {
  letter-spacing: -.04em;
  font-size: 24px;
}
.price-blurb {
  color: #697784;
  margin: 14px 0 0;
  font-size: 12px;
  line-height: 1.6;
}
.price-card.featured .price-blurb {
  color: #d6ebe4;
}
.price-list {
  margin: 16px 0 22px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 9px;
}
.price-list li {
  grid-template-columns: 16px 1fr;
  gap: 9px;
  font-size: 12px;
  line-height: 1.5;
  display: grid;
}
.price-list li:before {
  color: var(--teal);
  content: "✓";
  font-size: 12px;
}
.price-card.featured .price-list li:before {
  color: var(--sun);
}
.price-card .button {
  margin-top: auto;
  width: 100%;
}
.price-card.featured .button {
  background: var(--sun);
  border-color: var(--ink);
  color: var(--ink);
}
.price-footnote {
  color: #73808a;
  font-family: var(--app-font-mono);
  margin-top: 16px;
  font-size: 10px;
  line-height: 1.7;
}

/* --- Who this is for (accordion) -------------------------------- */
.fit-layout {
  gap: 22px;
  margin-top: 31px;
  display: grid;
}
.fit-list {
  border-top: 1px solid var(--line);
}
.fit-item {
  border-bottom: 1px solid var(--line);
}
.fit-q {
  color: var(--ink);
  cursor: pointer;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 19px 0;
  display: flex;
}
.fit-q b {
  font-family: var(--app-font-serif);
  letter-spacing: -.04em;
  font-size: 19px;
  font-weight: 700;
}
.fit-sign {
  border: 1px solid var(--ink);
  background: var(--sun);
  width: 26px;
  height: 26px;
  font-family: var(--app-font-mono);
  border-radius: 50%;
  flex: none;
  place-items: center;
  font-size: 13px;
  transition: transform .2s;
  display: grid;
}
.fit-a {
  color: #667482;
  padding: 0 0 20px;
  font-size: 13px;
  line-height: 1.7;
  display: none;
}
.fit-a ul {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 7px;
}
.fit-a li {
  grid-template-columns: 15px 1fr;
  gap: 8px;
  font-size: 12px;
  display: grid;
}
.fit-a li:before {
  color: var(--coral);
  content: "✦";
}
.results-panel {
  border: 1px solid var(--ink);
  background: #e9dfd0;
  border-radius: 14px;
  align-self: start;
  padding: 20px;
}
.results-panel h3 {
  font-family: var(--app-font-serif);
  letter-spacing: -.05em;
  margin: 9px 0 14px;
  font-size: 22px;
  line-height: 1;
}
.results-grid {
  grid-template-columns: repeat(2, 1fr);
  gap: 9px;
  display: grid;
}
.results-grid img {
  border: 1px solid var(--ink);
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 8px;
  width: 100%;
  display: block;
}
.results-note {
  color: #6b7a86;
  font-family: var(--app-font-mono);
  margin-top: 13px;
  font-size: 9px;
  line-height: 1.6;
}

/* --- Curriculum ------------------------------------------------- */
.curriculum {
  border-top: 1px solid var(--line);
  margin-top: 31px;
  display: grid;
}
.curriculum-row {
  border-bottom: 1px solid var(--line);
  grid-template-columns: 54px 1fr;
  gap: 15px;
  padding: 24px 0;
  display: grid;
}
.curriculum-row .step-num {
  border: 1px solid var(--ink);
  background: var(--sun);
  width: 42px;
  height: 42px;
  font-family: var(--app-font-mono);
  border-radius: 50%;
  place-items: center;
  font-size: 12px;
  display: grid;
}
.curriculum-row h3 {
  font-family: var(--app-font-serif);
  letter-spacing: -.05em;
  margin: 0 0 7px;
  font-size: 21px;
}
.curriculum-row p {
  color: #697784;
  margin: 0;
  font-size: 13px;
  line-height: 1.65;
}
.curriculum-row .row-meta {
  color: var(--teal-deep);
  font-family: var(--app-font-mono);
  text-transform: uppercase;
  margin-top: 9px;
  font-size: 9px;
  display: block;
}

/* --- Booking ---------------------------------------------------- */
.booking-section {
  background: var(--teal-deep);
  color: var(--paper);
}
.booking-section .eyebrow {
  color: var(--sun);
}
.booking-section .section-heading p {
  color: #b9d4cc;
}
.booking-grid {
  gap: 14px;
  margin-top: 31px;
  display: grid;
}
.booking-card {
  background: var(--paper);
  color: var(--ink);
  border-radius: 14px;
  padding: 22px 18px;
}
.booking-card h3 {
  font-family: var(--app-font-serif);
  letter-spacing: -.05em;
  margin: 9px 0 8px;
  font-size: 24px;
  line-height: 1;
}
.booking-card > p {
  color: #697784;
  font-size: 13px;
  line-height: 1.65;
}
.calendly-frame {
  border: 1px solid var(--line);
  border-radius: 10px;
  min-height: 620px;
  margin-top: 16px;
  overflow: hidden;
}
.calendly-frame iframe {
  border: 0;
  width: 100%;
  height: 620px;
  display: block;
}
.booking-form {
  gap: 12px;
  margin-top: 18px;
  display: grid;
}
.field {
  gap: 6px;
  display: grid;
}
.field label {
  color: var(--teal-deep);
  font-family: var(--app-font-mono);
  text-transform: uppercase;
  font-size: 9px;
}
.field input,
.field select,
.field textarea {
  border: 1px solid var(--line);
  width: 100%;
  min-height: 46px;
  color: var(--ink);
  font: 13px var(--app-font-sans);
  background: #fffaf2;
  border-radius: 8px;
  padding: 12px;
}
.field textarea {
  resize: vertical;
  min-height: 96px;
  line-height: 1.6;
}
.field-row {
  gap: 12px;
  display: grid;
}
.form-note {
  color: #73808a;
  font-family: var(--app-font-mono);
  font-size: 9px;
  line-height: 1.7;
}
.booking-form .button {
  min-height: 50px;
  width: 100%;
}
.notice {
  border: 1px solid var(--teal);
  background: #e4f0ec;
  color: var(--teal-deep);
  border-radius: 9px;
  margin-bottom: 16px;
  padding: 13px 14px;
  font-size: 12px;
  line-height: 1.6;
}
.notice.notice-error {
  border-color: var(--coral);
  background: #fbe6e2;
  color: #9c3c2f;
}
.notice ul {
  margin: 7px 0 0;
  padding-left: 17px;
}
.direct-contact {
  border-top: 1px solid #fbf5e940;
  color: #b9d4cc;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-top: 20px;
  padding-top: 18px;
  font-size: 11px;
  line-height: 1.6;
  display: flex;
}
.direct-contact a {
  color: var(--sun);
  text-underline-offset: 3px;
}

/* --- Free app included banner ---------------------------------- */
.app-included {
  border: 1px solid var(--ink);
  background: var(--sun);
  box-shadow: 8px 8px 0 var(--ink);
  border-radius: 15px;
  align-items: center;
  gap: 22px;
  padding: 25px;
  display: grid;
}
.app-included h2 {
  font-family: var(--app-font-serif);
  letter-spacing: -.06em;
  margin: 11px 0 0;
  font-size: 32px;
  line-height: .97;
}
.app-included p {
  color: #4b5966;
  max-width: 460px;
  margin: 11px 0 0;
  font-size: 13px;
  line-height: 1.6;
}
.app-included .eyebrow {
  color: var(--teal-deep);
}
.included-list {
  margin: 15px 0 0;
  padding: 0;
  list-style: none;
  gap: 8px;
  display: grid;
}
.included-list li {
  grid-template-columns: 16px 1fr;
  gap: 9px;
  font-size: 12px;
  line-height: 1.5;
  display: grid;
}
.included-list li:before {
  color: var(--teal-deep);
  content: "✓";
}
.app-included-actions {
  flex-wrap: wrap;
  gap: 8px;
  display: flex;
}

/* --- CSS-only interaction (no JS, matches the home page) -------- */
#format-online:checked ~ .format-panel.panel-online,
#format-inperson:checked ~ .format-panel.panel-inperson {
  display: grid;
}
#format-online:checked ~ .switch-tabs label[for="format-online"],
#format-inperson:checked ~ .switch-tabs label[for="format-inperson"] {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}
.fit-item input:checked ~ .fit-a {
  display: block;
}
.fit-item input:checked ~ .fit-q .fit-sign {
  background: var(--coral);
  transform: rotate(45deg);
}

/* --- Breakpoints ------------------------------------------------ */
@media (min-width: 700px) {
  .tut-hero {
    grid-template-columns: 1.05fr .95fr;
    align-items: center;
    gap: 44px;
    padding: 62px 0 66px;
  }
  .trust-row {
    grid-template-columns: repeat(4, 1fr);
  }
  .trust-item {
    border-bottom: 0;
    padding: 15px 14px 0 0;
  }
  .trust-item:nth-child(odd) {
    border-right: 0;
    padding-right: 14px;
  }
  .trust-item:nth-child(2n) {
    padding-left: 0;
  }
  .price-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .fit-layout {
    grid-template-columns: 1.15fr .85fr;
    gap: 34px;
  }
  .format-panel {
    grid-template-columns: 1.1fr .9fr;
    padding: 26px;
  }
  .field-row {
    grid-template-columns: 1fr 1fr;
  }
  .app-included {
    grid-template-columns: 1fr auto;
    padding: 34px;
  }
  .app-included h2 {
    font-size: 38px;
  }
  .curriculum {
    grid-template-columns: repeat(2, 1fr);
    column-gap: 34px;
  }
}

@media (min-width: 1000px) {
  .tut-hero h1 {
    font-size: 68px;
  }
  .booking-grid {
    grid-template-columns: 1fr;
  }
  .booking-card {
    padding: 30px;
  }
  .curriculum {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ==================================================================
   Bilingual (KO / EN) support
   Mirrors /assets/landing-tryapp.css so both landing pages behave the
   same way when the language switcher flips the page to Korean.
   ================================================================== */

/* --- Korean typography -------------------------------------------
   Space Grotesk / Plus Jakarta Sans / DM Mono carry no Hangul, so in
   Korean the Hangul would drop to an arbitrary fallback. Naming the
   Korean faces after the Latin ones keeps Latin glyphs on brand while
   Hangul lands on a proper Korean face. The tight display tracking is
   relaxed too, since negative letter-spacing collides Hangul blocks.
   ---------------------------------------------------------------- */
:root {
  --app-font-kr: "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}
html[lang="ko"] body {
  font-family: "Plus Jakarta Sans", var(--app-font-kr);
  word-break: keep-all;
  overflow-wrap: break-word;
}
html[lang="ko"] .tut-hero h1,
html[lang="ko"] .section-heading h2,
html[lang="ko"] .app-included h2,
html[lang="ko"] .format-panel h3,
html[lang="ko"] .price-card h3,
html[lang="ko"] .booking-card h3,
html[lang="ko"] .curriculum-row h3,
html[lang="ko"] .results-panel h3,
html[lang="ko"] .fit-q b,
html[lang="ko"] .portrait-caption b,
html[lang="ko"] .cert-badge b,
html[lang="ko"] .brand {
  font-family: "Space Grotesk", var(--app-font-kr);
  letter-spacing: -.015em;
}
html[lang="ko"] .tut-hero h1 {
  font-size: clamp(32px, 8.2vw, 60px);
  line-height: 1.12;
}
html[lang="ko"] .section-heading h2,
html[lang="ko"] .app-included h2 {
  line-height: 1.14;
}
html[lang="ko"] .eyebrow,
html[lang="ko"] .price-kicker,
html[lang="ko"] .price-flag,
html[lang="ko"] .trust-item span,
html[lang="ko"] .schedule-slot strong,
html[lang="ko"] .format-fact dt,
html[lang="ko"] .curriculum-row .row-meta,
html[lang="ko"] .switch-tabs label,
html[lang="ko"] .field label,
html[lang="ko"] .cert-badge small {
  font-family: "DM Mono", var(--app-font-kr);
  letter-spacing: .04em;
}
/* "Rate on request" is a sentence in Korean, not a number — give it room. */
html[lang="ko"] .price-tag .price-tbc {
  font-size: 20px;
  line-height: 1.25;
}

/* --- Header: language toggle -------------------------------------
   The header now carries one more group than before (nav links +
   language toggle + CTA), so the horizontal row needs more room than
   the shared 700px breakpoint allows. Keep the hamburger until 1000px
   and tighten the row above that.
   ---------------------------------------------------------------- */
.header-tools {
  align-items: center;
  gap: 12px;
  display: flex;
  flex: none;
}
@media (min-width: 700px) and (max-width: 999px) {
  .desktop-nav {
    display: none;
  }
  .menu-button {
    display: grid;
  }
  /* The shared stylesheet hides .mobile-menu with !important above 700px,
     so re-showing it here has to match that specificity. */
  #menu-toggle:checked ~ .mobile-menu {
    display: grid !important;
  }
}
@media (min-width: 1000px) {
  .desktop-nav {
    gap: 20px;
  }
  .desktop-nav .nav-link {
    white-space: nowrap;
  }
}
.lang-toggle {
  border: 1px solid var(--line);
  background: var(--paper);
  border-radius: 20px;
  align-items: center;
  gap: 2px;
  padding: 3px;
  display: inline-flex;
}
.lang-toggle a {
  color: #6b7a86;
  font-family: var(--app-font-mono);
  border-radius: 16px;
  padding: 6px 11px;
  font-size: 10px;
  text-decoration: none;
  transition: background-color .18s, color .18s;
}
.lang-toggle a:hover {
  color: var(--ink);
}
.lang-toggle a[aria-current="true"] {
  background: var(--ink);
  color: var(--paper);
}
.lang-toggle i {
  color: var(--line);
  font-style: normal;
}
.mobile-menu .lang-toggle {
  justify-content: center;
  margin-top: 4px;
}

/* --- Bottom nav: five items instead of four ---------------------- */
.bottom-nav.bottom-nav-5 {
  grid-template-columns: repeat(5, 1fr);
}