/* ------------------------------------------------------------------
   App landing page (/tryapp)
   Extends the landing design language. Tokens (--ink, --paper, --sun,
   --coral, --teal, --teal-deep, --line, app fonts) come from
   /assets/index-ByJumzjg.css, which must load first.

   The page ships no JavaScript: the mobile menu uses the same hidden
   checkbox pattern as the home page, and the FAQ uses native <details>.
   ------------------------------------------------------------------ */

/* --- Bilingual typography ---------------------------------------
   Space Grotesk / Plus Jakarta Sans / DM Mono carry no Hangul, so when
   the page renders 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 also relaxed, since negative letter-spacing makes
   Hangul syllable blocks collide.
   ---------------------------------------------------------------- */
: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"] .hero h1,
html[lang="ko"] .section-heading h2,
html[lang="ko"] .feature-card h3,
html[lang="ko"] .step h3,
html[lang="ko"] .download-panel h2,
html[lang="ko"] .tile h3,
html[lang="ko"] .plan-card h3,
html[lang="ko"] .faq-block summary,
html[lang="ko"] .brand {
  font-family: "Space Grotesk", var(--app-font-kr);
  letter-spacing: -.015em;
}
html[lang="ko"] .hero h1 {
  font-size: clamp(34px, 8.5vw, 66px);
  line-height: 1.08;
}
html[lang="ko"] .section-heading h2 {
  line-height: 1.12;
}
html[lang="ko"] .eyebrow,
html[lang="ko"] .feature-number,
html[lang="ko"] .tile-note,
html[lang="ko"] .plan-kicker,
html[lang="ko"] .metric span {
  font-family: "DM Mono", var(--app-font-kr);
  letter-spacing: .04em;
}

/* --- Header: language toggle ------------------------------------
   This header carries one more group than the home page (nav links +
   language toggle + CTA), so the horizontal row needs more room than the
   shared 700px breakpoint allows. The hamburger is kept until 1000px,
   and the row is tightened 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;
}

/* --- Hero: real app screenshot in the phone frame ----------------
   Both the sun disc and the screenshot are absolutely positioned inside
   .hero-visual, so paint order would otherwise depend on source order
   alone. The layering is stated explicitly: disc behind, phone in front.
   ---------------------------------------------------------------- */
.hero-visual .sun-disc {
  z-index: 0;
}
.app-shot {
  border: 2px solid var(--ink);
  background: #172d36;
  box-shadow: 10px 11px 0 var(--ink);
  border-radius: 28px;
  width: 200px;
  padding: 8px;
  position: absolute;
  top: 8px;
  left: 22%;
  transform: rotate(4deg);
  z-index: 1;
}
/* aspect-ratio keeps the frame phone-shaped even before the screenshot
   loads (or if it 404s), so the disc can never show through a collapsed
   frame. 272x588 matches the source image. */
.app-shot img {
  aspect-ratio: 272 / 588;
  object-fit: cover;
  background: #0f2129;
  border-radius: 20px;
  width: 100%;
  height: auto;
  display: block;
}
.badge-strip.metric-strip {
  grid-template-columns: repeat(2, 1fr);
}

/* --- Tile grids (practice modules, writing modes) ---------------- */
.group + .group {
  margin-top: 46px;
}
.group-title {
  border-bottom: 1px solid var(--line);
  max-width: 620px;
  margin: 0 0 24px;
  padding-bottom: 16px;
}
.group-title b {
  font-family: var(--app-font-serif);
  letter-spacing: -.05em;
  font-size: 25px;
  font-weight: 700;
  line-height: 1.05;
  display: block;
}
.group-title span {
  color: #697784;
  margin-top: 9px;
  font-size: 13px;
  line-height: 1.6;
  display: block;
}
.tile-grid {
  gap: 13px;
  display: grid;
}
.tile {
  border: 1px solid var(--ink);
  background: var(--paper);
  border-radius: 12px;
  padding: 20px;
  transition: transform .2s, box-shadow .2s;
}
.tile:hover {
  box-shadow: 5px 5px 0 var(--ink);
  transform: translateY(-3px);
}
.tile h3 {
  font-family: var(--app-font-serif);
  letter-spacing: -.05em;
  margin: 0 0 8px;
  font-size: 21px;
  line-height: 1.05;
}
.tile p {
  color: #697784;
  margin: 0;
  font-size: 12.5px;
  line-height: 1.65;
}
.tile-note {
  border: 1px solid var(--line);
  color: var(--teal-deep);
  font-family: var(--app-font-mono);
  text-transform: uppercase;
  border-radius: 20px;
  margin-top: 13px;
  padding: 4px 10px;
  font-size: 9px;
  display: inline-block;
}

/* Extend the home page's 3-colour card rail to five cards */
.feature-rail .feature-card:nth-child(4) {
  background: var(--coral);
}
.feature-rail .feature-card:nth-child(5) {
  background: #e8d9c5;
}

/* --- Plans ------------------------------------------------------ */
.plan-grid {
  gap: 14px;
  margin-top: 31px;
  display: grid;
}
.plan-card {
  border: 1px solid var(--ink);
  background: var(--paper);
  border-radius: 14px;
  flex-direction: column;
  padding: 24px 20px;
  display: flex;
  position: relative;
}
.plan-card.plan-accent {
  background: var(--teal);
  color: var(--paper);
  border-color: var(--teal-deep);
  box-shadow: 6px 6px 0 var(--ink);
}
.plan-card.plan-credits {
  background: #e9dfd0;
}
.plan-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;
}
.plan-kicker {
  font-family: var(--app-font-mono);
  text-transform: uppercase;
  font-size: 10px;
}
.plan-card h3 {
  border-bottom: 1px solid var(--line);
  font-family: var(--app-font-serif);
  letter-spacing: -.05em;
  margin: 10px 0 0;
  padding-bottom: 16px;
  font-size: 30px;
  line-height: 1;
}
.plan-card.plan-accent h3 {
  border-color: #fbf5e94d;
}
.plan-list {
  flex: 1;
  margin: 16px 0 22px;
  padding: 0;
  list-style: none;
  gap: 9px;
  display: grid;
}
.plan-list li {
  grid-template-columns: 16px 1fr;
  gap: 9px;
  font-size: 12px;
  line-height: 1.5;
  display: grid;
}
.plan-list li:before {
  color: var(--teal);
  content: "✓";
}
.plan-card.plan-accent .plan-list li:before {
  color: var(--sun);
}
.plan-card .button {
  margin-top: auto;
  width: 100%;
}
.plan-card.plan-accent .button {
  background: var(--sun);
  border-color: var(--ink);
  color: var(--ink);
}

/* --- FAQ (native <details>, no JS) ------------------------------ */
.faq-block {
  border-top: 1px solid var(--line);
  max-width: 780px;
  margin-top: 31px;
}
.faq-block details {
  border-bottom: 1px solid var(--line);
}
.faq-block summary {
  cursor: pointer;
  font-family: var(--app-font-serif);
  letter-spacing: -.04em;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 19px 0;
  font-size: 18px;
  font-weight: 700;
  list-style: none;
  display: flex;
}
.faq-block summary::-webkit-details-marker {
  display: none;
}
.faq-block summary:after {
  border: 1px solid var(--ink);
  background: var(--sun);
  width: 26px;
  height: 26px;
  font-family: var(--app-font-mono);
  content: "+";
  border-radius: 50%;
  flex: none;
  place-items: center;
  font-size: 13px;
  font-weight: 400;
  display: grid;
}
.faq-block details[open] summary:after {
  background: var(--coral);
  content: "–";
}
.faq-block details p {
  color: #667482;
  max-width: 64ch;
  margin: 0;
  padding: 0 0 22px;
  font-size: 13px;
  line-height: 1.75;
}

/* --- Closing panel --------------------------------------------- */
.closing-panel {
  text-align: center;
  place-items: center;
}
.closing-panel .download-actions {
  justify-content: center;
}

/* --- Breakpoints ----------------------------------------------- */
@media (min-width: 700px) {
  .tile-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .plan-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .badge-strip.metric-strip {
    grid-template-columns: repeat(3, 1fr);
  }
  .app-shot {
    width: 272px;
    left: 25%;
  }
  .group-title b {
    font-size: 29px;
  }
}

@media (min-width: 1000px) {
  .tile-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .app-shot {
    left: 28%;
  }
}