/* ==========================================================================
   Landing pages (de/<slug>.html) — built on tokens.css + base.css
   ========================================================================== */
.lp-hero { position: relative; isolation: isolate; padding: clamp(140px, 14vw, 200px) 0 clamp(56px, 7vw, 96px); overflow: clip; }
.lp-hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(to right, var(--line) 1px, transparent 1px), linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse 70% 60% at 30% 30%, #000 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 30% 30%, #000 20%, transparent 75%);
}
.lp-hero .container { display: grid; gap: 24px; justify-items: start; }
.lp-hero .h1 { max-width: 18ch; }
.lp-crumbs { font-size: 13px; color: var(--ink-4); }
.lp-crumbs a { color: var(--ink-3); } .lp-crumbs a:hover { color: var(--ink); }
.lp-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }

.lp-section { padding-block: clamp(56px, 7vw, 104px); border-top: 1px solid var(--line); }
.lp-section .h2 { margin-bottom: clamp(28px, 4vw, 48px); max-width: 22ch; }
.lp-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.lp-card { padding: 28px; border-radius: var(--r-lg); background: var(--bg-elev); box-shadow: 0 0 0 1px var(--line), var(--shadow-1); }
.lp-card h3 { font-family: var(--font-sans); font-size: 19px; letter-spacing: -0.02em; font-weight: 600; }
.lp-card p { color: var(--ink-3); margin-top: 8px; font-size: 15.5px; }
@media (max-width: 900px) { .lp-cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .lp-cards { grid-template-columns: 1fr; } }

.lp-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.lp-steps li { display: grid; gap: 10px; padding-top: 20px; border-top: 2px solid var(--ink); }
.lp-steps .mono { font-size: 12px; color: var(--accent); }
.lp-steps b { font-size: 18px; letter-spacing: -0.01em; }
.lp-steps p { color: var(--ink-3); margin-top: 4px; }
@media (max-width: 760px) { .lp-steps { grid-template-columns: 1fr; } }

.lp-faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 40px; }
.lp-faq details { border-top: 1px solid var(--line-2); }
.lp-faq details:last-child { border-bottom: 1px solid var(--line-2); }
.lp-faq summary { cursor: pointer; list-style: none; padding: 20px 0; font-weight: 600; font-size: 17px; display: flex; justify-content: space-between; gap: 16px; }
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after { content: "+"; color: var(--ink-3); font-weight: 400; transition: transform var(--t-base) var(--ease-out); }
.lp-faq details[open] summary::after { transform: rotate(45deg); }
.lp-faq details p { color: var(--ink-3); padding-bottom: 20px; max-width: 60ch; }
@media (max-width: 760px) { .lp-faq { grid-template-columns: 1fr; } }

.lp-cta { background: var(--night); color: var(--ink-inv); padding-block: clamp(80px, 10vw, 140px); text-align: center; }
.lp-cta .container { display: grid; justify-items: center; gap: 22px; }
.lp-cta .h1 { color: var(--ink-inv); max-width: 16ch; }
.lp-cta .lead { color: var(--ink-inv-2); text-align: center; }

.lp-more ul { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.lp-more a { display: inline-flex; gap: 8px; padding: 10px 16px; border-radius: var(--r-pill); background: var(--bg-elev); box-shadow: inset 0 0 0 1px var(--line-2); font-size: 15px; }
.lp-more a:hover { box-shadow: inset 0 0 0 1px var(--line-3); }