/* Home: hero copy + the real editor to try, then the download count. Nothing loops. */

.wrap { width: min(1440px, 100% - 2 * var(--space-lg)); }
.nav-inner { justify-content: space-between; }
.nav .lang { margin-left: auto; }

/* Hero */
/* Copy as a band (title and words left, download right), then the editor at full width:
   it needs about 1100 px to show its tabs in one row. */
.hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); padding-block: var(--space-xl) var(--space-2xl); }
.hero-copy { position: relative; display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title actions" "lede meta" "chips chips" "try try" "panel panel"; column-gap: var(--space-2xl); row-gap: var(--space-md); align-items: end; }
.hero-copy h1 { grid-area: title; }
.hero-copy .lede { grid-area: lede; align-self: start; max-width: 40rem; }
.hero-copy .hero-actions { grid-area: actions; justify-content: flex-end; }
.hero-copy .hero-meta { grid-area: meta; align-self: start; text-align: right; display: grid; gap: var(--space-2xs); font-size: var(--text-sm); }
.hero-copy .panel { grid-area: panel; }
.chips { grid-area: chips; list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-xs); justify-content: flex-start; }
.chip { display: inline-flex; align-items: center; gap: 0.4rem; height: 34px; padding: 0 0.85rem; border-radius: var(--radius-pill); background: var(--color-glass); border: 1px solid var(--color-glass-edge); color: var(--color-ink-2); font-size: var(--text-sm); white-space: nowrap; }
.chip svg { width: 16px; height: 16px; fill: none; stroke: var(--color-ok); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.chip-count { height: 40px; padding: 0 1rem 0 0.8rem; border: 1px solid transparent; background: linear-gradient(var(--color-panel), var(--color-panel)) padding-box, linear-gradient(135deg, var(--color-accent), var(--color-accent-2)) border-box; color: var(--color-ink); }
.chip-count svg { width: 18px; height: 18px; stroke: var(--color-accent); }
.chip-count strong { font: 800 1.35rem/1 var(--font-display); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; background: linear-gradient(135deg, var(--color-accent), var(--color-accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-copy .try { grid-area: try; justify-self: start; display: inline-flex; align-items: center; gap: var(--space-sm); padding: 0.45rem 0.6rem 0.45rem 0.45rem; border-radius: var(--radius-pill); border: 1px solid transparent; background: linear-gradient(var(--color-panel), var(--color-panel)) padding-box, linear-gradient(135deg, var(--color-accent), var(--color-accent-2)) border-box; box-shadow: 0 8px 24px var(--color-shadow); margin-top: var(--space-xs); }
.live-dot { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.65rem; border-radius: var(--radius-pill); background: linear-gradient(135deg, var(--color-accent), var(--color-accent-2)); color: var(--color-accent-ink); font: 800 var(--text-xs)/1 var(--font-display); letter-spacing: 0.04em; text-transform: uppercase; }
.live-dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: blink 1.6s var(--ease-in-out) infinite; }
.try-text { font-weight: 600; color: var(--color-ink); font-size: var(--text-sm); }
.try-arrow { width: 20px; height: 20px; fill: none; stroke: var(--color-accent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; animation: nudge 1.2s var(--ease-in-out) 3; }
@keyframes blink { 50% { opacity: 0.25; } }
@keyframes nudge { 50% { transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .live-dot::before, .try-arrow { animation: none; } }
@media (max-width: 900px) {
  .hero-copy { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "lede" "actions" "meta" "chips" "try" "panel"; }
  .hero-copy .hero-actions { justify-content: flex-start; }
  .hero-copy .hero-meta { text-align: left; }
}
.hero h1 { font-size: clamp(2.2rem, 1.4rem + 2.4vw, 3.75rem); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; }
.hero-meta { font-size: var(--text-sm); }

/* The live editor */
.live { margin: 0; padding: 0; display: grid; grid-template-rows: minmax(0, 1fr); min-width: 0; height: clamp(600px, 78vh, 800px); }
#editor { display: block; width: 100%; height: 100%; border: 0; border-radius: var(--radius-lg); background: transparent; }
.phone-note { display: none; padding: var(--space-lg); }
.editor-missing { display: grid; place-items: center; padding: var(--space-xl); text-align: center; color: var(--color-ink-2); }

/* Download / coffee panel, under the buttons; the editor stays usable */
.panel { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-lg); padding: var(--space-lg); position: relative; }
.panel[hidden] { display: none; }
.panel h2 { font-size: var(--text-lg); letter-spacing: -0.01em; padding-right: var(--space-xl); }
.panel-text { display: grid; gap: var(--space-sm); align-content: start; font-size: var(--text-sm); }
.steps { margin: 0; padding-left: 1.2rem; display: grid; gap: var(--space-2xs); color: var(--color-ink-2); }
.steps[hidden] { display: none; }
.steps strong { color: var(--color-ink); }
.qr { margin: 0; display: grid; justify-items: center; gap: var(--space-2xs); }
.qr img { width: 150px; height: 150px; border-radius: var(--radius-sm); background: var(--color-qr-paper); padding: 6px; }
.close { position: absolute; top: var(--space-xs); right: var(--space-xs); width: 32px; height: 32px; border-radius: 50%; border: 0; background: transparent; color: var(--color-ink-3); font-size: 1.3rem; line-height: 1; cursor: pointer; }
.close:hover { color: var(--color-ink); background: var(--color-line); }

/* Footer */
.foot-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs) var(--space-lg); padding-block: var(--space-md) var(--space-lg); border-top: 1px solid var(--color-line); font-size: var(--text-xs); color: var(--color-ink-3); }
.foot-bar nav { display: flex; flex-wrap: wrap; gap: var(--space-md); }
.foot-bar a { color: var(--color-ink-2); text-decoration: none; white-space: nowrap; }
.foot-bar a:hover { color: var(--color-ink); text-decoration: underline; }
.foot-bar .tm { margin-left: auto; }

@media (max-width: 760px) {
  .wrap { width: calc(100% - 2 * var(--space-md)); }
  .panel { grid-template-columns: minmax(0, 1fr); }
  .foot-bar .tm { margin-left: 0; }
}
/* Phones: no keyboard to try it with */
@media (max-width: 760px), (pointer: coarse) and (max-width: 1024px) {
  .live { height: auto; padding-bottom: 0; }
  #editor, .editor-missing, .try { display: none; }
  .phone-note { display: block; }
}