.translation-page { max-width: 1180px; margin: 0 auto; padding: 0 32px 96px; }
.translation-page p { color: var(--text-dim); font-size: 16px; line-height: 1.72; }
.translation-page a { color: var(--accent); }
.translation-page a.btn, .translation-page a.btn:hover { text-decoration: none; }
.translation-page a.btn-primary, .translation-page a.btn-primary:hover { color: #fff; }
.translation-hero { min-height: 720px; padding: 144px 0 64px; display: grid; grid-template-columns: minmax(0, .88fr) minmax(480px, 1.12fr); align-items: center; gap: 58px; }
.translation-hero-copy { position: relative; z-index: 2; }
.translation-hero .kicker, .section-kicker { margin: 0 0 18px; font: 500 11px/1.2 var(--font-mono); letter-spacing: .15em; color: var(--accent); }
.translation-hero h1 { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: clamp(60px, 6vw, 82px); line-height: .96; letter-spacing: -.05em; color: var(--text); text-wrap: balance; }
.translation-hero .lede { max-width: 480px; margin: 26px 0 30px; color: var(--text-dim); font-size: 19px; line-height: 1.6; }
.translation-hero-actions { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 12px; }
.translation-hero-note { margin-top: 18px; font-size: 13px; color: var(--text-faint); }
.translation-hero-visual { position: relative; width: 100%; }
.translation-hero-visual::before { content: ""; position: absolute; inset: 8% -3% -4% 9%; z-index: -1; border-radius: 50%; background: radial-gradient(circle, rgba(20,83,239,.15), transparent 66%); filter: blur(22px); }
.translation-hero-visual img { display: block; width: 100%; height: auto; border-radius: 28px; border: 1px solid rgba(20,83,239,.12); box-shadow: 0 32px 80px -42px rgba(3,50,176,.38); }
.visual-chip { position: absolute; left: -20px; bottom: 26px; display: flex; align-items: center; gap: 9px; padding: 10px 14px; border: 1px solid var(--voice-line); border-radius: 999px; background: rgba(251,252,254,.92); backdrop-filter: blur(14px); box-shadow: 0 14px 32px rgba(14,21,38,.12); color: var(--text); font-size: 13px; font-weight: 500; }
.visual-chip .live-dot { background: var(--voice); box-shadow: 0 0 0 4px var(--voice-dim); }
.translation-section { margin: 0 0 128px; scroll-margin-top: 96px; }
.translation-section h2 {margin: 0; font: 600 clamp(32px, 4vw, 52px)/1.05 var(--font-display); letter-spacing: -.035em; color: var(--text); text-wrap: balance; }
.translation-section h3 { color: var(--text); font-size: 17px; font-weight: 600; }
.answer-layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(420px, 1.1fr); grid-template-areas: "heading ." "body card"; column-gap: 84px; row-gap: 26px; align-items: stretch; }
.answer-heading { grid-area: heading; }
.answer-body { grid-area: body; }
.answer-body p { margin: 0; }
.answer-body p + p { margin-top: 22px; }
.answer-card { grid-area: card; overflow: hidden; display: grid; grid-template-rows: auto 1fr 1fr; height: 100%; border: 1px solid var(--line); border-radius: var(--r-panel); background: #fff; box-shadow: 0 24px 64px -48px rgba(14,21,38,.38); }
.answer-card-head { padding: 18px 22px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); background: #f7f9fc; }
.answer-card-head span:first-child { font-weight: 600; color: var(--text); }
.answer-card-head span:last-child { font: 500 10px/1 var(--font-mono); letter-spacing: .12em; color: var(--voice); }
.answer-route { display: grid; grid-template-columns: 44px 1fr; align-items: center; gap: 15px; padding: 22px; }
.answer-route + .answer-route { border-top: 1px solid var(--line); }
.route-mark { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 13px; background: var(--accent-dim); color: var(--accent); font: 600 14px/1 var(--font-mono); }
.answer-route:last-child .route-mark { background: var(--voice-dim); color: var(--voice); }
.answer-route h3 { margin: 1px 0 5px; }
.answer-route p { margin: 0; font-size: 14px; line-height: 1.6; }
.how-layout { margin-top: 42px; display: grid; grid-template-columns: minmax(0, 1.13fr) minmax(360px, .87fr); gap: 54px; align-items: center; }
.how-visual { overflow: hidden; border: 1px solid rgba(20,83,239,.13); border-radius: 28px; background: #f3f8ff; }
.how-visual img { display: block; width: 100%; height: auto; }
.how-cta { margin-top: 32px; text-align: center; }
.translation-steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.translation-steps li { position: relative; padding: 0 0 32px 58px; counter-increment: step; }
.translation-steps li:not(:last-child)::after { content: ""; position: absolute; left: 20px; top: 42px; bottom: 8px; width: 1px; background: linear-gradient(var(--accent-line), var(--line)); }
.translation-steps li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--accent-line); border-radius: 50%; background: #fff; color: var(--accent); font: 500 12px/1 var(--font-mono); }
.translation-steps h3 { margin: 2px 0 7px; }
.translation-steps p { margin: 0; font-size: 14px; }
.subtitle-showcase { display: grid; grid-template-columns: minmax(0, .72fr) minmax(460px, 1.28fr); gap: 72px; align-items: center; padding: 56px; border-radius: 32px; background: #0e1526; }
.subtitle-showcase h2, .subtitle-showcase h3 { color: #fff; }
.subtitle-showcase p { color: #aab4c8; }
.subtitle-showcase .section-kicker { color: #65e8ae; }
.subtitle-showcase .demo-window { animation: none; box-shadow: 0 24px 60px rgba(0,0,0,.28); }
.subtitle-showcase .demo-body { padding: 28px; }
.subtitle-showcase .sub-original { min-height: auto; }
.subtitle-showcase .sub-translated { opacity: 1; transform: none; }
.use-case-grid { margin-top: 40px; }
.use-case-grid .card { display: flex; flex-direction: column; }
.use-case-grid .card-tag { align-self: flex-start; margin-top: auto; }
.translation-options { margin-top: 40px; }
.translation-options .card { display: flex; flex-direction: column; }
.translation-options .card-tag { align-self: flex-start; margin-top: auto; }
.translation-options .option-link { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 20px; font-size: 14px; font-weight: 500; text-decoration: none; }
.translation-options .option-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.faq-layout { display: block; }
.faq-layout > div:first-child { margin-bottom: 40px; }
.faq-layout .faq-list { max-width: 720px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { list-style: none; cursor: pointer; padding: 22px 42px 22px 0; position: relative; color: var(--text); font-size: 16px; font-weight: 600; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; position: absolute; right: 4px; top: 20px; color: var(--accent); font: 400 22px/1 var(--font-mono); transition: transform .2s ease; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-answer { max-width: 700px; margin: -6px 42px 22px 0; font-size: 14px !important; }
.language-panel { padding: 48px; border: 1px solid var(--line); border-radius: 32px; background: #f4f7fb; }
.language-panel-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 34px; }
.language-panel-head p { max-width: 420px; margin: 0; font-size: 14px; }
.pair-groups { display: grid; grid-template-columns: repeat(2, 1fr); gap: 38px; }
.pair-group h3 { margin: 0 0 12px; }
.pair-index { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.pair-index li { margin: 0; }
.pair-index a { display: flex; align-items: center; gap: 12px; padding: 13px 15px; border: 1px solid var(--line); border-radius: var(--r-ctl); background: #fff; color: var(--text); font-size: 14px; font-weight: 500; text-decoration: none; transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.pair-index a::after { content: "\2192"; margin-left: auto; font-family: var(--font-mono); color: var(--text-faint); }
.pair-index a:hover { border-color: var(--accent-line); transform: translateX(3px); box-shadow: 0 6px 18px rgba(14,21,38,.06); }
.pair-note { margin: 28px 0 0; padding-top: 24px; border-top: 1px solid var(--line); font-size: 13px !important; }
/* The pair pages carry this block in a 780px column (716px of content), so
   the same width keeps it from stretching across the hub's wider layout and
   lines it up with the FAQ list above. */
.translation-page .related { max-width: 716px; margin: 56px auto 0; padding-top: 32px; border-top: 1px solid var(--line); }
.translation-page .related-label { margin: 0 0 16px; color: var(--text); font-family: var(--font-display); font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.translation-page .related ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.translation-page .related li { margin: 0; }
.translation-page .related a { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-ctl); background: linear-gradient(180deg, #fff, #fafbfe); color: var(--text); font-size: 14px; font-weight: 500; text-decoration: none; transition: border-color .2s ease; }
.translation-page .related a::after { content: "\2192"; margin-left: auto; color: var(--text-faint); font-family: var(--font-mono); }
.translation-page .related a:hover { border-color: var(--accent-line); }
@media (max-width: 940px) {
  .translation-hero { grid-template-columns: 1fr; min-height: auto; gap: 42px; }
  .translation-hero-copy { max-width: 700px; }
  .translation-hero-visual { max-width: 720px; }
  .answer-layout { grid-template-columns: 1fr; grid-template-areas: "heading" "body" "card"; gap: 26px; }
  .how-layout, .subtitle-showcase { grid-template-columns: 1fr; gap: 40px; }
  .subtitle-showcase { padding: 44px; }
}
@media (max-width: 720px) {
  .translation-page { padding: 0 20px 64px; }
  .translation-hero { padding: 112px 0 44px; }
  .translation-hero h1 { font-size: clamp(41px, 12vw, 58px); }
  .translation-hero .lede { font-size: 17px; }
  .visual-chip { left: 12px; bottom: 12px; }
  .translation-section { margin-bottom: 92px; }
  .translation-section h2 { font-size: 36px; }
  .answer-layout { grid-template-columns: minmax(0, 1fr); }
  .how-layout { grid-template-columns: minmax(0, 1fr); }
  .how-visual { border-radius: 20px; }
  .subtitle-showcase { padding: 28px 20px; border-radius: 22px; }
  .pair-groups { grid-template-columns: 1fr; }
  .language-panel { padding: 28px 20px; border-radius: 22px; }
  .language-panel-head { display: block; }
  .language-panel-head p { margin-top: 16px; }
  .translation-page .related ul { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .faq-item summary::after, .pair-index a { transition: none; }
}