/* =========================================================
   DinnTro – pre-launch landing pages (/host/, /join/, /partner/)
   Loaded after site.css; only adds what those pages need.
   ========================================================= */

/* ---------- Canada / India switch in the page banner ---------- */
.market { display: flex; width: max-content; max-width: 100%; align-items: center; gap: 0.25rem; margin-bottom: 1.4rem; padding: 0.25rem; border: 1px solid var(--on-dark-line); border-radius: 8px; font-size: 0.88rem; }
.market .label { padding: 0 0.55rem; color: var(--on-dark-muted); }
.market button { padding: 0.4rem 0.85rem; border-radius: 6px; font-weight: 600; color: var(--on-dark-muted); transition: background 150ms, color 150ms; }
.market button:hover { color: #fff; }
.market button[aria-pressed="true"] { background: #fff; color: var(--ink); }

.trust-line { margin-top: 1.5rem; font-size: 0.88rem; color: var(--on-dark-muted); max-width: 38rem; }

/* app screenshot in a split */
/* the screenshot's top half is empty dark UI, so show the bottom sheet */
.split-media.shot { aspect-ratio: 4 / 5; max-width: 460px; justify-self: center; width: 100%; background: #000; }
.split-media.shot img { object-position: center bottom; }

/* ---------- D Coins reward row ---------- */
.reward { display: grid; grid-template-columns: 88px 1fr; gap: 1.5rem; align-items: center; padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.reward img { width: 88px; height: 88px; }
.reward h3 { font-size: 1.3rem; font-weight: 700; margin-bottom: 0.4rem; }
.reward p { color: var(--ink-soft); }
.reward a { color: var(--primary); font-weight: 600; }
.reward a:hover { text-decoration: underline; }
@media (max-width: 520px) { .reward { grid-template-columns: 1fr; gap: 1rem; } .reward img { width: 64px; height: 64px; } }

/* ---------- Application form ---------- */
.apply-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.apply-grid h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
.apply-grid .lead { margin-top: 0.9rem; color: var(--ink-soft); }
@media (max-width: 860px) { .apply-grid { grid-template-columns: 1fr; } }

.form fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.form legend { padding: 0; margin-bottom: 0.45rem; font-size: 0.85rem; font-weight: 600; color: var(--ink-soft); }
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.form .chip { position: relative; display: inline-flex; }
.chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.chip span { padding: 0.55rem 0.95rem; border: 1px solid #d6d1ca; border-radius: 6px; font-size: 0.92rem; font-weight: 600; color: var(--ink-soft); transition: border-color 150ms, background 150ms, color 150ms; }
.chip input:hover + span { border-color: var(--ink-soft); }
.chip input:checked + span { border-color: var(--primary); background: var(--surface-2); color: var(--primary-600); }
.chip input:focus-visible + span { outline: 3px solid var(--primary); outline-offset: 2px; }
.honeypot { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); opacity: 0; pointer-events: none; }
.microcopy { font-size: 0.85rem; color: var(--muted); }
.microcopy a, .form-error a { color: var(--primary); text-decoration: underline; }
.form-error { padding: 0.8rem 1rem; border-radius: 8px; background: #fdecec; color: #a12622; font-size: 0.92rem; font-weight: 600; }
.form button[disabled] { opacity: 0.7; cursor: progress; transform: none; }