/* ============================================================
   cursusx.app — install landing layout on top of the encirkl
   brand layer (assets/brand/css). Tokens only; no new colours.
   ============================================================ */

/* Topbar: logo + language + theme + one CTA. No outbound nav. */
.topbar--landing .topbar-cta{padding:10px 18px;min-height:auto;font-size:14px}
@media (max-width: 960px){
  /* brand CSS hides the utilities CTA on phones; on this page it IS the nav */
  .topbar--landing .utilities > .btn.topbar-cta{display:inline-flex}
  .topbar--landing .utilities .lang{display:inline-flex}
  .topbar--landing .lang a{padding:5px 9px}
  .topbar--landing .iconbtn#themeToggle{display:none}
}

/* Install block ---------------------------------------------- */
.install{margin:8px 0 0}
.store-row{display:flex;flex-wrap:wrap;gap:18px 22px;align-items:flex-start}
.install--center .store-row{justify-content:center}
.store-option{display:flex;flex-direction:column;gap:8px;position:relative}
.store-option.is-suggested{padding-top:22px}
.store-suggested{
  position:absolute;top:0;left:2px;
  font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--mint-ink);
}
.store-option.is-suggested .app-badge-img{height:64px}
.store-ios{min-height:54px;padding:12px 22px;font-size:17px}
.store-option.is-suggested .store-ios{min-height:64px;padding:16px 28px;font-size:18px}
.store-ios svg{width:20px;height:20px}
.ios-steps{
  margin:6px 0 0;padding:14px 16px 14px 34px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);
  font-size:14px;color:var(--ink-2);max-width:360px;
}
.ios-steps li{margin:2px 0}
.other-device{margin:16px 0 0;font-size:14px;color:var(--ink-muted)}
.other-device a{font-weight:700}
.install--center .other-device{text-align:center}
.install--center .store-option{align-items:center}
.install--center .store-suggested{left:50%;transform:translateX(-50%);white-space:nowrap}
.install--center .ios-steps{text-align:left}

/* Hero visual: QR (desktop) + phone ------------------------- */
.hero-illus{flex-direction:column;gap:22px}
.qr-card[hidden]{display:none}
.qr-card{
  display:flex;align-items:center;gap:18px;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md);padding:16px 20px 16px 16px;max-width:440px;
}
.qr-code{flex:0 0 132px;width:132px;height:132px;background:#fff;border-radius:var(--radius-sm);padding:8px}
.qr-code svg{display:block;width:100%;height:100%}
.qr-title{font-size:18px;margin:0 0 6px;line-height:1.25}
.qr-copy p{margin:0;font-size:14px;color:var(--ink-muted);line-height:1.5}

.phone-card{
  margin:0;width:min(300px,72vw);
  aspect-ratio:9/16;
  border-radius:34px;overflow:hidden;
  background:var(--surface);
  border:8px solid var(--surface);
  outline:1px solid var(--border);
  box-shadow:var(--shadow-lg);
  transform:rotate(2deg);
}
.device-desktop .phone-card{width:min(260px,60vw)}
.phone-video{display:block;width:100%;height:100%;object-fit:cover;border-radius:26px;background:var(--surface-2)}
@media (prefers-reduced-motion: reduce){ .phone-card{transform:none} }

/* Three steps ------------------------------------------------ */
.how-header{margin-bottom:32px}
.shot-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.shot-step{display:flex;flex-direction:column;gap:18px;padding:18px}
.shot-frame{
  background:var(--surface-2);border-radius:var(--radius-md);
  padding:18px 18px 0;overflow:hidden;display:flex;justify-content:center;height:300px;
}
.shot-frame img{width:190px;height:auto;border-radius:18px 18px 0 0;box-shadow:var(--shadow-md);object-fit:cover;object-position:top}
.shot-copy h3{margin:10px 0 6px}
.shot-copy p{margin:0;color:var(--ink-muted)}
.shot-step .step-num .n{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:50%;
  background:var(--mint-soft);color:var(--mint-ink);font-weight:800;font-size:14px;
}

/* FAQ — markup + styles from encirkl.de (.faq in v2-shared.css) --- */
.cx-faq-header{text-align:center;max-width:760px;margin:0 auto 28px}
.cx-faq-q{font:inherit;color:inherit;margin:0;letter-spacing:0;line-height:inherit}

/* Final ------------------------------------------------------ */
.final .install{margin-top:8px}

/* Footer (slim: brand note + legal) -------------------------- */
.footer-landing{display:grid;grid-template-columns:1.6fr 1fr;gap:36px;align-items:start}
.footer--landing .footer-brand .brand-logo{height:64px}
.footer-platform-note{font-size:14px;color:var(--ink-muted);max-width:420px;margin-top:12px}
.footer-legal{flex-direction:row !important;flex-wrap:wrap;gap:8px 20px !important}

/* Store router overlay (mobile ad traffic) ------------------- */
.cx-router[hidden]{display:none}
.cx-router{
  position:fixed;inset:0;z-index:1000;
  background:color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:center;padding:24px;
}
.cx-router-card{
  width:min(380px,100%);text-align:center;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);padding:28px 24px 20px;
  display:flex;flex-direction:column;align-items:center;gap:12px;
}
.cx-router-logo{width:96px;height:96px;object-fit:contain}
.cx-router-title{font-size:22px;margin:4px 0 0}
.cx-router-sub{margin:0;color:var(--ink-muted)}
.cx-router-card .btn{width:100%}
.cx-router-spinner{
  width:28px;height:28px;border-radius:50%;
  border:3px solid var(--mint-soft);border-top-color:var(--mint);
  animation:cxspin .85s linear infinite;
}
@keyframes cxspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){ .cx-router-spinner{animation:none} }

/* Responsive ------------------------------------------------- */
@media (max-width: 960px){
  .shot-steps{grid-template-columns:1fr}
  .shot-frame{height:260px}
  .hero-illus{order:2}
  .footer-landing{grid-template-columns:1fr}
}
@media (max-width: 600px){
  .hero{padding-top:28px}
  .phone-card{width:min(240px,64vw)}
}