/* Landing page. Builds on tokens in app.css (design-system §3). Logical properties only. */
.lp { background: var(--c-canvas); }
.lp-wrap { max-inline-size: 1120px; margin-inline: auto; padding-inline: var(--s-6); }
.lp h1, .lp h2, .lp h3 { letter-spacing: 0; }
.lp h2 { font-size: clamp(22px, 3vw, 32px); line-height: 1.3; font-weight: 600; max-inline-size: 22ch; text-wrap: balance; }
.lp h3 { font-size: var(--fs-md); font-weight: 600; }
.lp p { margin: 0; }
.lp-intro { color: var(--c-text-2); font-size: var(--fs-md); margin-block-start: var(--s-3); max-inline-size: 56ch; line-height: 1.7; }
.lp-sec { padding-block: clamp(40px, 7vw, 88px); }
.lp-sunken { background: var(--c-sunken); }
.lp-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 5vw, 72px); align-items: start; }

/* bar */
.lp-bar { background: var(--c-surface); border-block-end: 1px solid var(--c-line-subtle); position: sticky; inset-block-start: 0; z-index: 10; }
.lp-bar-in { display: flex; align-items: center; gap: var(--s-4); min-block-size: 56px; }
.lp-brand { display: inline-flex; align-items: center; gap: var(--s-2); text-decoration: none; color: var(--c-primary-600); font-weight: 600; font-size: var(--fs-md); }
.lp-mark { inline-size: 14px; block-size: 14px; border: 2px solid var(--c-primary-600); background: var(--pencil-hatch); border-radius: 1px; }
.lp-nav { display: flex; gap: var(--s-5); flex: 1; padding-inline-start: var(--s-6); }
.lp-nav a { color: var(--c-text-2); text-decoration: none; }
.lp-nav a:hover { color: var(--c-primary-600); text-decoration: underline; text-underline-offset: 4px; }

/* hero */
.lp-hero { padding-block: clamp(40px, 8vw, 96px); background: var(--c-surface); border-block-end: 1px solid var(--c-line-subtle); }
.lp-hero-in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 80px); align-items: center; }
.lp-note { color: var(--c-text-3); font-size: var(--fs-sm); margin-block-end: var(--s-4); }
.lp-hero h1 { font-size: clamp(30px, 4.6vw, 52px); line-height: 1.3; font-weight: 600; color: var(--c-text); text-wrap: balance; max-inline-size: 18ch; }
:lang(en) .lp-hero h1 { line-height: 1.15; max-inline-size: 16ch; }
.lp-lede { margin-block-start: var(--s-5); font-size: var(--fs-md); line-height: 1.75; color: var(--c-text-2); max-inline-size: 52ch; }
.lp-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-block-start: var(--s-8); }
.lp-btn { min-block-size: 44px; padding-inline: var(--s-6); font-size: var(--fs-md); }

/* tags: pencil / ink / rules */
.tag { display: inline-block; padding: 2px var(--s-3); font-size: var(--fs-sm); font-weight: 500; border-radius: var(--r-2); white-space: nowrap; }
.tag-pencil { border: 1px dashed var(--c-pencil-line); background: var(--pencil-hatch); color: var(--c-pencil-text); }
.tag-pencil::before { content: "✎ "; }
.tag-ink { border: 1px solid var(--c-text); color: var(--c-text); background: var(--c-surface); }
.tag-rules { border: 1px solid var(--c-primary-600); background: var(--c-primary-50); color: var(--c-primary-700); }
.legend { display: flex; gap: var(--s-2); margin-block-start: var(--s-5); }

/* hero illustration: a voucher with a highlighted source region */
.lp-fig { margin: 0; display: flex; flex-direction: column; align-items: stretch; max-inline-size: 420px; justify-self: center; inline-size: 100%; }
.lp-fig figcaption { margin-block-start: var(--s-3); color: var(--c-text-3); font-size: var(--fs-sm); }
.voucher { background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-3); padding: var(--s-5) var(--s-6) var(--s-6);
  box-shadow: 0 1px 0 var(--c-line), 0 12px 28px -14px rgba(23, 33, 43, .35); }
.voucher-head { display: flex; justify-content: space-between; align-items: baseline; padding-block-end: var(--s-3); border-block-end: 2px solid var(--c-text); font-size: var(--fs-lg); }
.voucher-no { color: var(--c-text-3); font-size: var(--fs-sm); }
.voucher-rows { margin: 0; }
.voucher-rows > div { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); padding-block: var(--s-3); border-block-end: 1px solid var(--c-line-subtle); }
.voucher-rows dt { color: var(--c-text-3); font-size: var(--fs-sm); }
.voucher-rows dd { margin: 0; font-weight: 500; }
.src-hl { display: inline-block; padding: 2px var(--s-3); background: var(--c-primary-100); outline: 2px solid var(--c-primary-600); outline-offset: 1px; border-radius: var(--r-1); font-weight: 600; }
.voucher-lines { display: grid; gap: 10px; margin-block-start: var(--s-5); }
.voucher-lines i { display: block; block-size: 6px; background: var(--c-sunken); border-radius: 3px; }
.voucher-lines i:nth-child(2) { inline-size: 70%; }
.voucher-lines i:nth-child(3) { inline-size: 45%; }
.trail { inline-size: 2px; block-size: 18px; background: var(--c-primary-600); margin-inline-start: var(--s-8); }
.note-pencil, .note-ink { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-radius: var(--r-3); font-size: var(--fs-sm); }
.note-pencil { border: 1px dashed var(--c-pencil-line); background: var(--pencil-hatch); color: var(--c-pencil-text); }
.note-ink { border: 1px solid var(--c-text); background: var(--c-surface); }
.note-pencil .tag, .note-ink .tag { flex: none; }

/* ruled lists (problem, trust) */
.lp-rules { list-style: none; margin: 0; padding: 0; border-block-start: 2px solid var(--c-text); }
.lp-rules li { padding-block: var(--s-5); border-block-end: 1px solid var(--c-line); display: grid; gap: var(--s-1); }
.lp-rules p { color: var(--c-text-2); line-height: 1.7; max-inline-size: 58ch; }

/* steps */
.steps { list-style: none; margin: var(--s-8) 0 0; padding: 0; border-block-start: 2px solid var(--c-text); }
.steps li { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: var(--s-5); align-items: start; padding-block: var(--s-5); border-block-end: 1px solid var(--c-line); }
.steps p { color: var(--c-text-2); line-height: 1.7; max-inline-size: 64ch; margin-block-start: var(--s-1); }
.step-n { font-size: 28px; font-weight: 600; color: var(--c-primary-600); line-height: 1.2; text-align: start; direction: ltr; }

/* Jordan */
.jo-grid { list-style: none; margin: var(--s-8) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(24px, 5vw, 72px); border-block-start: 2px solid var(--c-text); }
.jo-grid > li { padding-block: var(--s-5); border-block-end: 1px solid var(--c-line); }
.jo-grid p { color: var(--c-text-2); line-height: 1.7; margin-block-start: var(--s-1); }
.vouchers { display: flex; gap: var(--s-2); margin-block-start: var(--s-3) !important; }
.vouchers span { padding: 2px var(--s-3); border: 1px solid var(--c-text); background: var(--c-surface); border-radius: var(--r-2); font-weight: 600; color: var(--c-text) !important; }
.week { list-style: none; display: flex; gap: 4px; margin: var(--s-4) 0 0; padding: 0; }
.week li { flex: 1; min-inline-size: 0; text-align: center; padding-block: var(--s-2); font-size: var(--fs-sm); background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-2); color: var(--c-text-2); }
.week li.off { background: var(--c-primary-600); border-color: var(--c-primary-600); color: var(--c-text-inverse); font-weight: 600; }

/* closing */
.lp-close { background: var(--c-primary-700); color: var(--c-text-inverse); padding-block: clamp(40px, 7vw, 80px); }
.lp-close-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-8); }
.lp-close h2 { color: inherit; max-inline-size: 24ch; }
.lp-close p { margin-block-start: var(--s-3); max-inline-size: 52ch; line-height: 1.7; color: var(--c-primary-100); }
.lp-close .lp-actions { margin-block-start: 0; }
.btn-inverse { background: var(--c-surface); color: var(--c-primary-700); }
.btn-inverse:hover { background: var(--c-primary-50); }
.btn-ghost { background: transparent; color: var(--c-text-inverse); border-color: var(--c-primary-100); }
.btn-ghost:hover { background: rgba(255, 255, 255, .1); }
.lp-close :focus-visible { outline-color: #fff; }

.lp-foot { padding-block: var(--s-6); color: var(--c-text-3); font-size: var(--fs-sm); background: var(--c-canvas); }

@media (max-width: 860px) {
  .lp-nav { display: none; }
  .lp-bar-in { gap: var(--s-2); }
  .lp-bar-in .lang-toggle { margin-inline-start: auto; }
  .lp-hero-in, .lp-split, .jo-grid { grid-template-columns: minmax(0, 1fr); }
  .lp-fig { max-inline-size: 440px; }
}
@media (max-width: 560px) {
  .lp-wrap { padding-inline: var(--s-4); }
  .lp-bar-cta { display: none; } /* the hero repeats the same call to action */
  .lp-brand { min-inline-size: 0; }
  .steps li { grid-template-columns: 36px minmax(0, 1fr); gap: var(--s-3); }
  .steps li > .tag { grid-column: 2; justify-self: start; }
  .lp-actions .lp-btn { flex: 1 1 100%; }
  .week li { font-size: var(--fs-xs); padding-inline: 0; }
}
@media (prefers-reduced-motion: no-preference) {
  .src-hl { animation: hl 900ms ease-out 400ms both; }
  @keyframes hl { from { background: transparent; outline-color: transparent; } }
}

/* Name story (Zimam) */
.lp-name-in { display: grid; grid-template-columns: auto 1fr; gap: var(--s-8); align-items: start; }
.lp-name-mark { font-size: clamp(56px, 9vw, 112px); line-height: 1; color: var(--c-primary-600); font-weight: 600; margin: 0; }
.lp-name-in p { max-inline-size: 64ch; line-height: 1.8; margin-block-start: var(--s-3); }
.lp-name-tag { font-weight: 600; color: var(--c-primary-700); }
@media (max-width: 860px) { .lp-name-in { grid-template-columns: 1fr; gap: var(--s-4); } }