/* ==========================================================================
   HowClaude public site — landing, static pages, consent banner, ads.
   Builds on app.css tokens (CONTRACT.md §1). Phone first.
   ========================================================================== */

/* ---------------------------------------------------------------- header / nav */
.site-nav { display: none; }
.site-nav ul { display: flex; gap: 2px; list-style: none; margin: 0; padding: 0; }
.site-nav-link { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: var(--radius-pill); color: var(--text-muted); font-weight: 560; font-size: .94rem; text-decoration: none; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); }
.site-nav-link:hover { color: var(--text); background: var(--surface-2); }
.site-nav-link.is-active { color: var(--text); background: var(--surface-2); }
.header-cta { margin-left: var(--space-1); }
.header-cta .icon { order: 2; }
@media (min-width: 820px) {
  .site-nav { display: block; flex: 1; margin-left: var(--space-6); }
}
@media (max-width: 420px) {
  .brand-name { display: none; }
}

/* ---------------------------------------------------------------- footer */
.site-footer { margin-top: 0; padding-block: var(--space-12) var(--space-8); background: var(--surface); }
.footer-grid { display: grid; gap: var(--space-8); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.footer-about { grid-column: 1 / -1; }
.footer-tagline { margin: var(--space-3) 0 0; max-width: 34ch; }
.footer-title { font-family: var(--font-sans); font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text); margin: 0 0 var(--space-3); }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.footer-col a, .footer-link-btn { color: var(--text-muted); text-decoration: none; font-size: .92rem; }
.footer-col a:hover, .footer-link-btn:hover { color: var(--text); text-decoration: underline; }
.footer-link-btn, .link-btn { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; }
.link-btn { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 3px; }
.footer-bottom { margin-top: var(--space-10); padding-top: var(--space-6); border-top: 1px solid var(--border); display: grid; gap: var(--space-2); font-size: .85rem; }
.footer-disclaimer { display: flex; gap: var(--space-2); align-items: flex-start; margin: 0; }
.footer-disclaimer .icon { margin-top: 3px; flex: none; }
.footer-copy { margin: 0; }
@media (min-width: 820px) {
  .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
  .footer-about { grid-column: auto; }
  .footer-bottom { grid-template-columns: 1fr auto; align-items: center; }
}

/* ---------------------------------------------------------------- sections */
.section-head { max-width: 680px; margin-bottom: var(--space-10); }
.section-head h2 { margin-bottom: var(--space-3); }
.section-head .lead { margin: 0; }
.section-head-center { margin-inline: auto; text-align: center; }
.section-cta { margin: var(--space-10) 0 0; text-align: center; }
.section-cta .btn .icon, .final-btn .icon, .hero-actions .btn-primary .icon { order: 2; }
.section-tight { padding-block: var(--space-8) var(--space-16); }
.section-how { background: var(--surface); border-block: 1px solid var(--border); }
.section-progress { background: linear-gradient(180deg, var(--bg), color-mix(in srgb, var(--surface-2) 55%, var(--bg))); }

/* ---------------------------------------------------------------- story icon (shared with game) */
.story-icon { --icon-color: var(--accent); display: inline-grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 16px; color: var(--icon-color); background: color-mix(in srgb, var(--icon-color) 14%, var(--surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--icon-color) 22%, transparent); }
.story-icon .icon { width: 24px; height: 24px; }
.story-icon-sm { width: 38px; height: 38px; border-radius: 12px; }
.story-icon-sm .icon { width: 20px; height: 20px; }
.story-icon-lg { width: 64px; height: 64px; border-radius: 20px; }
.story-icon-lg .icon { width: 32px; height: 32px; }

/* ---------------------------------------------------------------- hero */
.hero-home { position: relative; overflow: hidden; padding-block: clamp(var(--space-10), 7vw, 104px) clamp(var(--space-12), 8vw, 112px); }
.hero-glow { position: absolute; inset: -20% -10% auto -10%; height: 760px; pointer-events: none; background:
  radial-gradient(520px 340px at 18% 30%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%),
  radial-gradient(460px 320px at 82% 20%, color-mix(in srgb, var(--gold) 18%, transparent), transparent 70%); filter: blur(10px); opacity: .9; }
.hero-grid { position: relative; display: grid; gap: var(--space-12); align-items: center; }
.hero-title { margin: 0 0 var(--space-5); max-width: 13ch; }
.hero-lead { margin-bottom: var(--space-8); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.hero-meta { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-6) 0 0; color: var(--text-muted); font-size: .9rem; }
@media (min-width: 960px) {
  .hero-grid { grid-template-columns: 1.05fr .95fr; gap: var(--space-16); }
}

/* chat preview (animated by site.js; fully visible without JS / with reduced motion) */
.chat-preview { position: relative; margin: 0; max-width: 460px; margin-inline: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; }
.chat-preview-bar { display: flex; align-items: center; gap: var(--space-3); padding: 14px 18px; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--surface-2) 60%, var(--surface)); }
.chat-preview-dots { display: inline-flex; gap: 6px; }
.chat-preview-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--border); }
.chat-preview-dots i:first-child { background: color-mix(in srgb, var(--accent) 70%, var(--border)); }
.chat-preview-title { font-size: .8rem; font-weight: 600; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-preview-log { list-style: none; margin: 0; padding: var(--space-5) var(--space-4) var(--space-6); display: grid; gap: var(--space-3); min-height: 470px; align-content: start; }
.cp-msg { display: flex; gap: var(--space-2); align-items: flex-end; max-width: 92%; }
.cp-msg .avatar { width: 30px; height: 30px; font-size: .8rem; }
.cp-name { display: block; font-size: .72rem; font-weight: 650; color: var(--text-muted); margin: 0 0 3px 4px; }
.cp-bubble { margin: 0; padding: 10px 14px; border-radius: 18px 18px 18px 6px; background: var(--surface-2); font-size: .92rem; line-height: 1.45; }
.cp-claude .cp-bubble { background: var(--gold-soft); }
.cp-user { justify-self: end; flex-direction: row-reverse; }
.cp-user .cp-bubble { background: var(--accent-strong); color: var(--accent-contrast); border-radius: 18px 18px 6px 18px; }
.cp-card { position: relative; margin-top: var(--space-2); padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); }
.cp-question { margin: 0 0 var(--space-3); font-weight: 650; font-size: .95rem; }
.cp-options { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.cp-option { display: flex; align-items: center; gap: var(--space-3); padding: 9px 12px; border: 1px solid var(--border); border-radius: 12px; font-size: .88rem; transition: background 300ms var(--ease), border-color 300ms var(--ease); }
.cp-key { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: var(--surface-2); font-size: .72rem; font-weight: 700; color: var(--text-muted); flex: none; }
.cp-check { margin-left: auto; color: var(--success); opacity: 0; transition: opacity 300ms var(--ease); }
.cp-feedback { display: flex; gap: var(--space-2); align-items: flex-start; margin: var(--space-3) 0 0; padding: 10px 12px; border-radius: 12px; background: var(--success-soft); font-size: .85rem; color: var(--text); transition: opacity 300ms var(--ease), transform 300ms var(--ease); }
.cp-feedback .icon { color: var(--success); margin-top: 2px; }
.cp-xp { position: absolute; right: 16px; top: 12px; font-weight: 750; font-size: .9rem; color: var(--gold); opacity: 0; }
.chat-preview.is-static .cp-option.is-correct, .chat-preview.is-picked .cp-option.is-correct,
.chat-preview:not(.is-js) .cp-option.is-correct { background: var(--success-soft); border-color: color-mix(in srgb, var(--success) 45%, transparent); }
.chat-preview.is-static .cp-check, .chat-preview.is-picked .cp-check, .chat-preview:not(.is-js) .cp-check { opacity: 1; }
.chat-preview.is-static .cp-xp, .chat-preview:not(.is-js) .cp-xp { opacity: 1; }
.chat-preview.is-js [data-cp-step] { opacity: 0; transform: translateY(10px); transition: opacity 380ms var(--ease), transform 380ms var(--ease); }
.chat-preview.is-js [data-cp-step].is-in { opacity: 1; transform: none; }
.chat-preview.is-js .cp-feedback { opacity: 0; transform: translateY(6px); }
.chat-preview.is-js.is-done .cp-feedback { opacity: 1; transform: none; }
.chat-preview.is-js.is-done .cp-xp { animation: xp-float 1.6s var(--ease) both; }
.cp-typing { position: absolute; left: 18px; bottom: 18px; display: none; gap: 4px; padding: 10px 14px; border-radius: 16px; background: var(--surface-2); }
.cp-typing.is-on { display: inline-flex; }
.cp-typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--text-muted); opacity: .5; animation: typing-dot 1.1s infinite ease-in-out; }
.cp-typing span:nth-child(2) { animation-delay: .15s; }
.cp-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes typing-dot { 0%, 60%, 100% { transform: translateY(0); opacity: .35; } 30% { transform: translateY(-4px); opacity: .9; } }
@keyframes xp-float { 0% { opacity: 0; transform: translateY(8px) scale(.9); } 20% { opacity: 1; transform: translateY(0) scale(1.05); } 70% { opacity: 1; } 100% { opacity: 0; transform: translateY(-18px); } }

/* ---------------------------------------------------------------- how it works */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-5); }
.step { position: relative; padding: var(--space-8) var(--space-6) var(--space-6); }
.step h3 { margin: var(--space-5) 0 var(--space-2); font-size: 1.2rem; }
.step p { margin: 0; color: var(--text-muted); }
.step-num { position: absolute; top: var(--space-5); right: var(--space-6); font-family: var(--font-display); font-size: 2.6rem; line-height: 1; color: color-mix(in srgb, var(--text-muted) 25%, transparent); }
@media (min-width: 820px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------------------------------------------------------------- chapters */
.chapter-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.chapter-grid > li { display: flex; }
.chapter-card { --chapter-color: var(--accent); width: 100%; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5); position: relative; overflow: hidden; }
.chapter-card::after { content: ""; position: absolute; inset: auto 0 0 0; height: 3px; background: var(--chapter-color); opacity: .75; }
.chapter-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-2); }
.chapter-card-num { font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.chapter-card-title { margin: 0; font-size: 1.15rem; }
.chapter-card-sub { margin: 0; color: var(--text-muted); font-size: .93rem; flex: 1; }
.chapter-card-meta { display: inline-flex; align-items: center; gap: 6px; margin: var(--space-2) 0 0; font-size: .82rem; font-weight: 600; color: var(--text-muted); }
@media (min-width: 640px) { .chapter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .chapter-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------------------------------------------------------------- ranks & badges */
.progress-grid { display: grid; gap: var(--space-5); }
.progress-grid h3 { margin-bottom: var(--space-5); }
.rank-ladder { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.rank-step { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-3); padding: 10px 12px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--gold) calc(var(--step) * 16%), var(--surface-2)); }
.rank-dot { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--surface); color: var(--gold); font-weight: 750; font-size: .85rem; box-shadow: var(--shadow-sm); }
.rank-name { font-weight: 650; }
.rank-xp { font-size: .82rem; color: var(--text-muted); font-variant-numeric: tabular-nums; font-weight: 600; }
.badge-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.badge-tile { display: flex; align-items: center; gap: var(--space-3); }
.badge-tile-text { display: grid; gap: 1px; min-width: 0; }
.badge-tile-text strong { font-size: .95rem; }
.badge-tile-text span { font-size: .84rem; color: var(--text-muted); }
@media (min-width: 640px) { .badge-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 960px) { .progress-grid { grid-template-columns: .8fr 1.2fr; align-items: start; } }

/* ---------------------------------------------------------------- personas */
.persona-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.persona-card { padding: var(--space-5); }
.persona-card h3 { margin: var(--space-4) 0 var(--space-2); }
.persona-card p { margin: 0; color: var(--text-muted); font-size: .93rem; }
@media (min-width: 640px) { .persona-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .persona-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* ---------------------------------------------------------------- apps */
.apps-card { display: grid; gap: var(--space-6); align-items: center; background: linear-gradient(135deg, var(--accent-soft), var(--surface) 60%); }
.apps-card h2 { margin-bottom: var(--space-2); }
.apps-card .lead { margin: 0; }
.store-buttons { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.store-btn { display: inline-flex; align-items: center; gap: var(--space-3); min-width: 188px; padding: 10px 18px; border-radius: var(--radius-sm); background: var(--text); color: var(--bg); text-decoration: none; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.store-btn:hover { color: var(--bg); transform: translateY(-1px); box-shadow: var(--shadow); }
.store-btn span { display: grid; line-height: 1.15; }
.store-btn small { font-size: .7rem; opacity: .8; }
.store-btn strong { font-size: 1.1rem; }
@media (min-width: 900px) { .apps-card { grid-template-columns: 1fr auto; } }

/* ---------------------------------------------------------------- FAQ */
.faq-list { display: grid; gap: var(--space-3); }
.faq-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); transition: box-shadow var(--dur) var(--ease); }
.faq-item[open] { box-shadow: var(--shadow-sm); }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) var(--space-5); cursor: pointer; list-style: none; font-weight: 640; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-icon { transition: transform var(--dur) var(--ease); color: var(--text-muted); }
.faq-item[open] .faq-icon { transform: rotate(45deg); }
.faq-answer { padding: 0 var(--space-5) var(--space-4); color: var(--text-muted); }
.faq-answer p { margin: 0; }

/* ---------------------------------------------------------------- final CTA */
.section-final { padding-bottom: var(--space-20); }
.final-card { text-align: center; padding: clamp(var(--space-10), 6vw, var(--space-16)) var(--space-6); border-radius: var(--radius-lg); background: radial-gradient(600px 300px at 50% 0%, color-mix(in srgb, var(--gold) 30%, transparent), transparent 70%), var(--accent-strong); color: #fff; box-shadow: var(--shadow-lg); }
.final-card h2 { color: #fff; margin-bottom: var(--space-3); }
.final-card .lead { color: rgba(255, 255, 255, .86); margin: 0 auto var(--space-8); }
.final-btn { --btn-bg: #fff; --btn-fg: #7A3A26; --btn-border: #fff; }
.final-btn:hover { --btn-fg: #5E2C1C; }
:root[data-theme="dark"] .final-card { color: #1A1110; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .final-card h2 { color: #1A1110; } :root:not([data-theme="light"]) .final-card .lead { color: rgba(26, 17, 16, .82); } :root:not([data-theme="light"]) .final-card { color: #1A1110; } :root:not([data-theme="light"]) .final-btn { --btn-bg: #1A1110; --btn-fg: #F4F1EC; --btn-border: #1A1110; } }
:root[data-theme="dark"] .final-card h2 { color: #1A1110; }
:root[data-theme="dark"] .final-card .lead { color: rgba(26, 17, 16, .82); }
:root[data-theme="dark"] .final-btn { --btn-bg: #1A1110; --btn-fg: #F4F1EC; --btn-border: #1A1110; }

/* ---------------------------------------------------------------- page hero / about / prose */
.page-hero { padding-block: clamp(var(--space-10), 6vw, var(--space-20)) var(--space-8); background: radial-gradient(900px 360px at 0% 0%, var(--accent-soft), transparent 70%); }
.page-hero-compact { padding-bottom: var(--space-6); }
.page-title { font-size: clamp(2rem, 3.4vw + 1rem, 3.2rem); letter-spacing: -.02em; margin-bottom: var(--space-4); }
.page-hero .lead { max-width: 60ch; }
.fact-row { list-style: none; padding: 0; margin: var(--space-6) 0 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.fact-row li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--radius-pill); background: var(--surface); border: 1px solid var(--border); font-size: .85rem; font-weight: 600; }
.prose-stack { display: grid; gap: var(--space-8); }
.about-block { display: grid; grid-template-columns: auto 1fr; gap: var(--space-5); align-items: start; }
.about-block h2 { margin: 6px 0 var(--space-2); }
.about-block p { margin: 0; color: var(--text-muted); }
.disclaimer-card { padding: var(--space-6); border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--border); }
.disclaimer-card h2 { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); }
.disclaimer-card p { margin: 0; color: var(--text-muted); font-size: .95rem; }
.about-cta .btn .icon:last-child { order: 2; }
.cluster-center { justify-content: center; }

.prose { padding-bottom: var(--space-16); font-size: 1.02rem; }
.prose h2 { font-size: 1.45rem; margin: var(--space-10) 0 var(--space-3); scroll-margin-top: calc(var(--header-h) + 16px); }
.prose h3 { font-size: 1.1rem; font-family: var(--font-sans); font-weight: 680; margin: var(--space-6) 0 var(--space-2); }
.prose p, .prose li { color: color-mix(in srgb, var(--text) 88%, var(--text-muted)); }
.prose ul { margin-bottom: var(--space-4); }
.prose li { margin-bottom: var(--space-2); }
.prose .table { font-size: .86rem; }
.prose .table td { vertical-align: top; }
.prose .table-wrap { margin: var(--space-4) 0; }
.prose-lead { font-size: 1.1rem; color: var(--text) !important; }
.toc { margin: var(--space-6) 0 var(--space-8); padding: var(--space-5) var(--space-6); border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--border); }
.toc-title { margin: 0 0 var(--space-2); font-weight: 700; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.toc ol { margin: 0; columns: 2 220px; column-gap: var(--space-8); }
.toc li { margin-bottom: 4px; break-inside: avoid; }
.toc a { text-decoration: none; }
.toc a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- contact */
.contact-grid { display: grid; gap: var(--space-8); align-items: start; }
.contact-card { position: relative; }
.contact-row { gap: var(--space-4); }
.hp-field { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.contact-success { text-align: center; padding: var(--space-8) var(--space-2); outline: none; }
.contact-success h2 { margin: var(--space-5) 0 var(--space-2); }
.success-mark { display: inline-grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: var(--success-soft); color: var(--success); animation: pop-in 520ms cubic-bezier(.2, 1.4, .4, 1) both; }
.contact-aside { padding: var(--space-2) var(--space-2); }
.contact-list li { align-items: flex-start; font-size: .95rem; color: var(--text-muted); }
.contact-list .icon { margin-top: 3px; }
.contact-direct { margin-top: var(--space-6); }
.btn .icon + span, .btn span + .icon { flex: none; }
#contact-form .btn-primary .icon { order: 2; }
@keyframes pop-in { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 1.6fr 1fr; } .contact-aside { padding-top: var(--space-8); } }

/* ---------------------------------------------------------------- ads (space reserved => no layout shift) */
.ad-container { padding-block: var(--space-4); }
.ad-box { position: relative; display: block; margin: 0 auto; max-width: 970px; padding: 26px var(--space-3) var(--space-3); border-radius: var(--radius-sm); border: 1px solid var(--border); background: color-mix(in srgb, var(--surface-2) 45%, var(--surface)); }
.ad-box .ad-label { top: 7px; left: 14px; font-weight: 650; }
.ad-box.is-adsense .ad-fill { min-height: 250px; }
.ad-box-landing.is-adsense .ad-fill { min-height: 280px; }
.ad-box-tall.is-adsense .ad-fill { min-height: 600px; }
.ad-box.is-empty .ad-fill { display: grid; place-items: center; }
.ad-fill { display: block; width: 100%; overflow: hidden; }
.house-card { display: grid; grid-template-columns: auto 1fr; gap: var(--space-4); align-items: center; padding: var(--space-3); border-radius: 12px; color: var(--text); text-decoration: none; background: var(--surface); border: 1px solid var(--border); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); }
.house-card:hover { color: var(--text); border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); box-shadow: var(--shadow); transform: translateY(-1px); }
.house-card-img { width: 72px; height: 72px; border-radius: 12px; object-fit: cover; background: var(--surface-2); }
.house-card-img-fallback { display: grid; place-items: center; color: var(--accent-strong); background: var(--accent-soft); }
.house-card-body { display: grid; gap: 3px; min-width: 0; }
.house-card-tag { font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.house-card-title { font-size: 1rem; line-height: 1.3; }
.house-card-text { font-size: .88rem; color: var(--text-muted); line-height: 1.4; }
.house-card-cta { grid-column: 1 / -1; justify-self: start; }
.house-card-cta .icon { order: 2; }
@media (min-width: 640px) { .house-card { grid-template-columns: auto 1fr auto; } .house-card-cta { grid-column: auto; justify-self: end; } }

/* ---------------------------------------------------------------- consent banner */
.consent { position: fixed; z-index: 150; left: var(--space-3); right: var(--space-3); bottom: var(--space-3); display: flex; justify-content: center; pointer-events: none; }
.consent-card { pointer-events: auto; width: 100%; max-width: 640px; padding: var(--space-5); border-radius: var(--radius); background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-lg); transform: translateY(16px); opacity: 0; transition: transform 320ms var(--ease), opacity 320ms var(--ease); max-height: calc(100vh - 24px); overflow-y: auto; }
.consent.is-visible .consent-card { transform: none; opacity: 1; }
.consent-head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2); }
.consent-icon { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-strong); flex: none; }
.consent-title { font-family: var(--font-sans); font-size: 1.05rem; font-weight: 700; margin: 0; }
.consent-text { font-size: .9rem; color: var(--text-muted); margin-bottom: var(--space-4); }
.consent-settings { display: grid; gap: var(--space-3); margin-bottom: var(--space-4); }
.consent-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); }
.consent-row-title { margin: 0; font-weight: 650; font-size: .92rem; }
.consent-row-desc { margin: 2px 0 0; font-size: .82rem; color: var(--text-muted); }
.consent-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.consent-actions .btn { flex: 1 1 auto; }
@media (min-width: 640px) { .consent { left: var(--space-5); right: var(--space-5); bottom: var(--space-5); } .consent-actions .btn { flex: 0 0 auto; } }

@media (prefers-reduced-motion: reduce) {
  .consent-card, .chat-preview.is-js [data-cp-step], .house-card, .store-btn { transition: none; }
  .success-mark, .chat-preview.is-js.is-done .cp-xp { animation: none; }
}

/* narrow sidebar ad (game aside, 300px): stack the CTA under the text */
.ad-box-tall .house-card { grid-template-columns: auto 1fr; }
.ad-box-tall .house-card-cta { grid-column: 1 / -1; justify-self: stretch; }