/* Letters, offers and policies (careers/letter.html). Same tokens and type as
   techwaveacademy.com (careers.css :root), printed on A4. */
body.lt { background: #EDE8E3 }
.lt-bar { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 12px; max-width: 210mm; margin: 0 auto; padding: 12px 16px; font-family: var(--sans) }
.lt-bar a { color: var(--ink); text-decoration: none; font-weight: 500 }
#lt { padding: 0 12px 48px }
.letter { position: relative; background: #fff; max-width: 210mm; min-height: 297mm; margin: 0 auto; padding: 22mm 20mm 28mm; box-shadow: 0 10px 40px rgba(32, 32, 42, .12); border-radius: 4px; font-family: var(--sans); font-size: 10.5pt; line-height: 1.6; color: var(--ink) }
.letter::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: linear-gradient(90deg, var(--purple), var(--accent) 60%, var(--orange)); border-radius: 4px 4px 0 0 }
.lh { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding-bottom: 14px; border-bottom: 1px solid var(--rule); margin-bottom: 18px }
.lh-brand { display: flex; align-items: center; gap: 12px }
.lh-mark svg { width: 40px; height: 40px; display: block; border-radius: 11px }
.lh-word { display: block; font-family: var(--serif); font-size: 19pt; font-weight: 500; line-height: 1.1 }
.lh-sub { display: block; font-size: 7.5pt; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-top: 4px }
.lh-meta { text-align: right; font-size: 9pt; color: var(--muted) } .lh-meta b { color: var(--ink) }
.to { margin: 0 0 14px; font-size: 10pt }
.letter h1 { font-family: var(--serif); font-weight: 600; font-size: 20pt; line-height: 1.2; margin: 6px 0 14px; color: var(--accent-dark) }
.letter h2 { font-family: var(--serif); font-weight: 600; font-size: 13pt; margin: 18px 0 6px; color: var(--ink); break-after: avoid }
.letter h3 { font-family: var(--sans); font-weight: 600; font-size: 10.5pt; margin: 12px 0 4px; break-after: avoid }
.letter p { margin: 0 0 8px } .letter ul { margin: 0 0 10px; padding-left: 18px } .letter li { margin: 2px 0 }
.letter .kv { font-size: 10pt } .letter .kv th { width: 30% }
.letter table.grid { width: 100%; border-collapse: collapse; margin: 6px 0 12px; font-size: 9.5pt }
.letter table.grid th { text-align: left; background: var(--panel); color: var(--purple); padding: 6px 8px; font-weight: 600 }
.letter table.grid td { padding: 6px 8px; border-bottom: 1px solid var(--rule); vertical-align: top }
.letter table.grid td ul { padding-left: 14px; margin: 0 }
.note { background: #FFF4EC; border: 1px solid #F8E3D3; border-radius: 10px; padding: 10px 12px; margin: 12px 0; font-size: 9.5pt }
.sigs { display: flex; justify-content: space-between; gap: 24px; margin-top: 24px; break-inside: avoid }
.sig { flex: 1; max-width: 48% }
.sig-ink { height: 58px; display: flex; align-items: flex-end; border-bottom: 1px solid var(--rule); padding-bottom: 4px; margin-bottom: 6px }
.sig-ink svg { max-width: 100%; height: 54px }
.sig-name { font-family: var(--serif); font-size: 12pt; font-weight: 600; color: var(--ink) }
.sig-title { font-size: 8.5pt; color: var(--muted) }
.sig-stamp { font-size: 8.5pt; color: var(--muted); margin-top: 6px }
.certificate .sigs { text-align: left }
.accept { margin-top: 18px; border: 1px dashed var(--rule); border-radius: 10px; padding: 10px 12px; font-size: 9.5pt; color: var(--muted); break-inside: avoid }
.accept.ok { border-style: solid; border-color: #bcdcc6; background: #F1F8F2; color: var(--ink) }
.accept .small { font-size: 8pt; color: var(--muted) }
.lf { position: absolute; left: 20mm; right: 20mm; bottom: 10mm; font-size: 7.5pt; line-height: 1.5; color: var(--muted); border-top: 1px solid var(--rule); padding-top: 6px; text-align: center }
.idcard { display: flex; gap: 18px; align-items: flex-start; border: 1px solid var(--rule); border-radius: 14px; padding: 14px; margin: 0 0 16px; background: linear-gradient(135deg, #fff, var(--panel)) }
.id-photo { width: 30mm; height: 38mm; object-fit: cover; border-radius: 8px; border: 1px solid var(--rule) }
.id-photo.empty { display: grid; place-items: center; color: var(--muted); background: #fff }
.id-name { font-family: var(--serif); font-size: 16pt; font-weight: 600 } .id-role { color: var(--accent); font-weight: 600; margin-bottom: 6px }
.certificate .cert { text-align: center } .certificate .lh { text-align: left }
.cert-lead { font-size: 12pt; margin: 10px 0 } .cert-name { font-family: var(--serif); font-size: 28pt; font-weight: 600; color: var(--accent-dark); margin: 6px 0 10px }
@media (max-width: 760px) { .letter { padding: 16mm 6mm 26mm; min-height: 0 } .lf { left: 6mm; right: 6mm } .lh { flex-direction: column } .lh-meta { text-align: left } }
@page { size: A4; margin: 0 }
@media print {
  body.lt { background: #fff } .lt-bar { display: none } #lt { padding: 0 }
  .letter { box-shadow: none; border-radius: 0; max-width: none; min-height: 297mm; margin: 0 }
  .letter::before { border-radius: 0 }
  .letter { -webkit-print-color-adjust: exact; print-color-adjust: exact }
}