/* Marketing site and sign-in pages, on top of /shared/base.css. The pages are in the app theme
   (light or dark by OS); header, hero, closing band and footer use the dark stage look. */

html { scroll-padding-top: 88px; }
/* Every text comes from the locale files: the page is shown once site.js has put them in place. */
html:not(.site-ready) body { visibility: hidden; }
/* Links inside a page scroll smoothly, once the page is shown. Before that the browser's own trip
   to the #hash of the address would be such an animation: it is still running when home.js puts
   the page at the section, and leaves it a few pixels off. */
html.site-ready { scroll-behavior: smooth; }
body { display: flex; flex-direction: column; }
main { flex: 1 0 auto; }
h1[tabindex="-1"]:focus { outline: none; } /* headings that receive the focus when a form is answered */

.on-stage {
  --surface: rgba(255, 255, 255, .08); --surface-2: rgba(255, 255, 255, .14);
  --text: #fff; --text-muted: rgba(255, 255, 255, .76); --border: rgba(255, 255, 255, .24);
  --link: #fff; --tint: rgba(255, 255, 255, .12); --focus-color: var(--brand-accent);
  color: var(--text);
}
.on-stage .btn-primary { --btn-bg: var(--brand-accent); --btn-fg: var(--brand-accent-text); box-shadow: 0 4px 0 color-mix(in srgb, var(--brand-accent) 55%, #000); }
.on-stage .btn-primary:hover { box-shadow: 0 5px 0 color-mix(in srgb, var(--brand-accent) 55%, #000), var(--shadow-md); }
.on-stage .btn-primary:active { box-shadow: 0 1px 0 color-mix(in srgb, var(--brand-accent) 55%, #000); }

.skip-link { position: absolute; left: var(--s-3); top: -80px; z-index: 200; padding: 10px var(--s-4); border-radius: var(--r-sm); background: var(--brand-accent); color: var(--brand-accent-text); font-weight: 800; text-decoration: none; }
.skip-link:focus { top: var(--s-3); }

/* Header */
.site-header { position: sticky; top: 0; z-index: 100; background: rgba(22, 14, 58, .95); border-bottom: 1px solid rgba(255, 255, 255, .1); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.site-bar { display: flex; align-items: center; gap: var(--s-3); min-height: 68px; }
.site-brand { display: inline-flex; align-items: center; gap: 10px; margin-right: auto; color: #fff; font-size: 1.25rem; font-weight: 800; letter-spacing: -0.03em; text-decoration: none; white-space: nowrap; }
.site-mark { flex: none; width: 30px; height: 30px; }
.site-mark rect { fill: var(--ans); }
.site-nav { display: flex; align-items: center; gap: var(--s-1); }
.site-nav a:not(.btn) { padding: 10px var(--s-3); border-radius: var(--r-sm); color: rgba(255, 255, 255, .88); font-weight: 700; text-decoration: none; white-space: nowrap; }
.site-nav a:not(.btn):hover { background: rgba(255, 255, 255, .1); color: #fff; }
.site-nav .lang-switcher { margin-inline: var(--s-2); }
.site-nav-cta { display: none; }
.site-menu-btn { display: none; flex: none; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 2px solid var(--border); border-radius: var(--r-md); background: transparent; color: #fff; cursor: pointer; }
.site-menu-btn svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }

@media (min-width: 901px) and (max-width: 1023px) {
  /* Narrow desktops: the links, the language and the start button keep to one row in every language,
     without the button's words breaking onto two lines. */
  .site-bar { gap: var(--s-2); }
  .site-nav a:not(.btn) { padding-inline: var(--s-2); }
  .site-bar > .site-cta { padding-inline: var(--s-4); }
}
@media (max-width: 900px) {
  /* The links move behind the menu button and open as a panel below the bar. */
  .site-menu-btn { display: inline-flex; }
  .site-header-nav .site-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; padding: var(--s-2) var(--s-4) var(--s-4); background: #160e3a; border-bottom: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 18px 30px rgba(0, 0, 0, .35); }
  .site-header-nav.menu-open .site-nav { display: flex; }
  .site-header-nav .site-nav a:not(.btn) { padding: var(--s-3); font-size: 1.0625rem; }
  .site-header-nav .site-nav .lang-switcher { margin: var(--s-2) 0 0; }
  .site-header-nav .site-nav .lang-switcher .select { width: 100%; min-height: 46px; }
}
@media (max-width: 560px) {
  /* No room for the button next to the name: it is the last entry of the menu instead. */
  .site-bar > .site-cta { display: none; }
  .site-nav-cta { display: flex; margin-top: var(--s-3); }
}

/* Hero */
.hero { overflow: hidden; padding-block: clamp(40px, 7vw, 88px) clamp(48px, 8vw, 104px); background: radial-gradient(120% 80% at 50% -10%, #2b1a6e 0%, #1d1147 38%, #0d0a24 100%); background-color: #0d0a24; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--s-7); align-items: center; }
.hero .eyebrow { margin-bottom: var(--s-3); color: var(--brand-accent); }
.hero h1 { font-size: clamp(2.125rem, 5.2vw, 3.6rem); margin-bottom: var(--s-4); }
.hero-sub { max-width: 34em; margin-bottom: 0; font-size: clamp(1.0625rem, 1.6vw, 1.25rem); color: rgba(255, 255, 255, .86); }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); }
.hero-note { margin: var(--s-4) 0 0; font-size: .9375rem; color: var(--text-muted); }

/* Product picture: the big screen and a phone, drawn with boxes only. */
.demo { position: relative; width: 100%; max-width: 560px; margin-inline: auto; padding: 0 9% 13% 0; }
.demo-screen { position: relative; padding: clamp(14px, 3.4vw, 26px); border: 1px solid rgba(255, 255, 255, .2); border-bottom-width: 10px; border-radius: 18px; background: linear-gradient(160deg, #2a1c78, #150e40); box-shadow: 0 30px 70px rgba(0, 0, 0, .5); }
/* the stand of the screen */
.demo-screen::after { content: ''; position: absolute; left: 50%; top: calc(100% + 10px); width: 24%; height: 16px; transform: translateX(-50%); background: linear-gradient(#3d3382, #241a5c); clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%); }
.demo-kind { font-size: .6875rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--brand-accent); }
.demo-timer { height: 8px; margin: var(--s-2) 0 var(--s-3); border-radius: var(--r-pill); background: rgba(255, 255, 255, .16); overflow: hidden; }
.demo-timer span { display: block; width: 64%; height: 100%; border-radius: inherit; background: var(--brand-accent); }
.demo-question { margin: 0 0 var(--s-3); padding-right: 30%; font-size: clamp(.9375rem, 2.3vw, 1.3rem); font-weight: 800; line-height: 1.2; }
.demo-answers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding-right: 30%; }
.demo-ans { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 9px 10px; border-radius: 10px; font-size: clamp(.6875rem, 1.5vw, .875rem); font-weight: 800; line-height: 1.15; box-shadow: 0 3px 0 color-mix(in srgb, var(--ans) 55%, #000); }
.demo-ans .ans-shape { flex: none; width: 14px; height: 14px; }
.demo-ans span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.demo-phone { position: absolute; right: 0; bottom: 0; width: 38%; padding: 16px 9px 12px; border: 3px solid #4a3f8f; border-radius: 24px; background: #0d0a24; box-shadow: 0 22px 50px rgba(0, 0, 0, .6); }
.demo-phone::before { content: ''; position: absolute; left: 50%; top: 6px; width: 30%; height: 4px; border-radius: var(--r-pill); background: #4a3f8f; transform: translateX(-50%); }
.demo-phone-q { margin: 2px 0 8px; font-size: clamp(.625rem, 1.3vw, .75rem); font-weight: 700; line-height: 1.25; color: rgba(255, 255, 255, .9); }
.demo-phone .demo-answers { grid-template-columns: minmax(0, 1fr); gap: 6px; padding-right: 0; }
.demo-phone .demo-ans { padding: 8px; }

/* Sections */
.section { padding-block: clamp(48px, 7vw, 88px); }
.section-alt { background: var(--surface); border-block: 1px solid var(--border); }
.section-alt .card { background: var(--bg); box-shadow: none; }
.section-head { max-width: 720px; margin-bottom: var(--s-6); }
.section-head h2 { margin-bottom: var(--s-2); }
.section-head p { margin: 0; font-size: 1.0625rem; color: var(--text-muted); }

.tiles { display: grid; gap: var(--s-4); grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.game-card { display: flex; flex-direction: column; gap: var(--s-2); }
.game-card h3, .game-card p, .step h3, .step p, .benefit h3, .benefit p { margin: 0; }
.game-card p, .step p, .benefit p { color: var(--text-muted); }
.game-icon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: var(--s-2); border-radius: var(--r-md); box-shadow: 0 4px 0 color-mix(in srgb, var(--ans) 55%, #000); }
.game-icon svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.steps { counter-reset: step; }
.step { counter-increment: step; display: flex; flex-direction: column; gap: var(--s-2); }
.step::before { content: counter(step); display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: var(--s-2); border-radius: 50%; background: var(--brand-primary); color: var(--brand-primary-text); font-size: 1.375rem; font-weight: 800; }

.benefits { gap: var(--s-6) var(--s-5); }
.benefit { position: relative; display: flex; flex-direction: column; gap: var(--s-1); padding-left: 44px; }
.benefit::before { content: ''; position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--tint); }
.benefit::after { content: ''; position: absolute; left: 11px; top: 6px; width: 8px; height: 14px; border: solid var(--link); border-width: 0 3px 3px 0; transform: rotate(45deg); }
.benefit h3 { font-size: 1.125rem; }

/* Pricing */
/* The five parts of a card (name, audience, price, button, limits) share their rows across the three
   cards, so prices and buttons stay level when one text wraps. Without subgrid each card sizes its own rows. */
.plans { display: grid; gap: var(--s-4); grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
.plan { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: var(--s-3); align-content: start; }
/* a ring instead of a thicker border, so the three cards keep the same inner height */
.section-alt .plan-featured { border-color: var(--brand-primary); box-shadow: 0 0 0 1px var(--brand-primary), var(--shadow-md); }
.plan-name { margin: 0; font-size: 1.375rem; }
.plan-for { margin: 0; color: var(--text-muted); }
/* The price (shared/price.js): while a discount lasts, the full price struck through before the price to
   pay, and the badge with the discount's last day under them. */
.plan-price { margin: 0; }
.price { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); }
.price-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s-2); }
.price-old { font-size: 1.375rem; font-weight: 700; color: var(--text-muted); white-space: nowrap; }
.price-now { font-size: 2.5rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; white-space: nowrap; }
.price-period { color: var(--text-muted); }
.price-until { font-size: .8125rem; }
.plan-limits { margin: var(--s-1) 0 0; }
.plan-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: 10px 0; border-top: 1px solid var(--border); }
.plan-row dd { margin: 0; font-weight: 800; text-align: right; white-space: nowrap; }
.plan-mark { display: block; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.plan-row [data-included="true"] { color: var(--success-text); }
.plan-row [data-included="false"] { color: var(--text-muted); }
.plans-state { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: var(--s-3); padding: var(--s-6) 0; text-align: center; }
.plans-state p { margin: 0; }
.pricing-note { max-width: 720px; margin: var(--s-5) 0 0; color: var(--text-muted); }

/* FAQ */
.faq { display: grid; gap: var(--s-3); max-width: 780px; }
.faq-item { border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow-sm); }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-4) var(--s-5); border-radius: var(--r-md); font-size: 1.0625rem; font-weight: 800; cursor: pointer; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: ''; flex: none; width: 10px; height: 10px; margin: 0 4px 4px 0; border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: rotate(45deg); transition: transform .15s ease; }
.faq-item[open] summary::after { margin-bottom: -4px; transform: rotate(-135deg); }
.faq-item p { margin: 0; padding: 0 var(--s-5) var(--s-4); color: var(--text-muted); }

/* Closing band and footer */
.cta-band { padding-block: clamp(48px, 7vw, 80px); text-align: center; background: radial-gradient(120% 140% at 50% 0%, #2b1a6e 0%, #1d1147 45%, #0d0a24 100%); background-color: #0d0a24; }
.cta-band .container { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); }
.cta-band h2, .cta-band p { margin: 0; }
.cta-band p { max-width: 36em; color: rgba(255, 255, 255, .86); }
.cta-band .btn { margin-top: var(--s-3); }

/* Footer: the name, the legal pages and the seller side by side (on a tablet the seller below the other
   two, on a phone everything in one column), then the payment provider with the Klix logo and the
   copyright across the whole width. The seller's column is the widest: the address stays on one line. */
.site-footer { padding-block: var(--s-6); background: #0d0a24; border-top: 1px solid rgba(255, 255, 255, .1); }
.site-footer-grid { display: grid; grid-template-columns: minmax(0, 1fr) max-content minmax(0, 1.6fr); gap: var(--s-5) var(--s-6); align-items: start; }
.site-footer-about { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-3); }
.site-footer .site-brand { margin: 0; }
.site-footer-tagline { margin: 0; color: var(--text-muted); font-size: .9375rem; }
.site-footer-links { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-2); }
.site-footer-links a { color: rgba(255, 255, 255, .88); font-weight: 600; }
.site-footer-seller { display: flex; flex-direction: column; gap: 2px; font-size: .9375rem; font-style: normal; color: var(--text-muted); overflow-wrap: anywhere; }
.site-footer-seller strong { color: #fff; }
.site-footer-seller a { color: rgba(255, 255, 255, .88); }
.site-footer-label { margin-bottom: var(--s-1); font-weight: 700; color: rgba(255, 255, 255, .88); }
.site-footer-pay { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4); padding-top: var(--s-5); border-top: 1px solid rgba(255, 255, 255, .1); }
.site-footer-pay p { margin: 0; font-size: .9375rem; color: var(--text-muted); }
.site-footer-pay img { display: block; width: auto; height: 24px; }
.site-footer-copy { grid-column: 1 / -1; margin: 0; font-size: .875rem; color: var(--text-muted); }
@media (max-width: 900px) {
  .site-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer-seller { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .site-footer-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Sign-in pages */
.auth { display: grid; justify-items: center; align-content: start; padding: clamp(24px, 6vw, 64px) var(--s-4); background: radial-gradient(90% 420px at 50% 0%, var(--tint), transparent 75%); }
.auth-card { width: 100%; max-width: 460px; padding: clamp(20px, 5vw, 36px); }
.auth-card h1 { font-size: clamp(1.625rem, 4vw, 2rem); }
.auth-lead { margin-bottom: var(--s-5); color: var(--text-muted); }
.auth-form { display: flex; flex-direction: column; gap: var(--s-4); }
.auth-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-2) var(--s-4); margin: var(--s-5) 0 0; font-size: .9375rem; }
.auth-links button { padding: 0; border: 0; background: none; color: var(--link); font: inherit; text-align: start; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } /* an action that stands among the links looks like one */
.auth-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); }
.pw-row { display: flex; gap: var(--s-2); }
.pw-row .input { min-width: 0; }
.pw-row .btn { flex: none; min-height: 46px; padding-inline: var(--s-3); }
.field-error:empty, .form-error:empty { display: none; }
.form-error { margin: 0; padding: 10px var(--s-3); border-radius: var(--r-sm); background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger-text); font-weight: 700; }
.agree { align-items: flex-start; font-weight: 500; }
.agree input { margin-top: 1px; }

/* Legal documents */
.legal { max-width: 780px; padding-block: clamp(32px, 6vw, 64px); }
.legal h1 { font-size: clamp(1.75rem, 4.5vw, 2.5rem); }
.legal h2 { margin-top: var(--s-6); font-size: 1.3125rem; }
.legal h3 { margin-top: var(--s-4); font-size: 1.0625rem; }
.legal ul, .legal ol { margin: 0 0 var(--s-3); padding-left: 1.25em; }
.legal li { margin-bottom: var(--s-1); }
.legal-language { margin-bottom: var(--s-4); color: var(--text-muted); }
.legal-version, .legal-note { color: var(--text-muted); }
.legal-note { margin-top: var(--s-6); padding-top: var(--s-4); border-top: 1px solid var(--border); font-size: .9375rem; }
/* The service provider: the seller's details as label and value, side by side (one under the other on a phone). */
.legal-provider { margin: var(--s-4) 0 var(--s-5); padding: var(--s-4) var(--s-5); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); }
.legal-provider-title { margin-bottom: var(--s-1); font-weight: 800; }
.legal-provider dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--s-1) var(--s-4); margin: var(--s-3) 0 0; }
.legal-provider dl > div { display: contents; }
.legal-provider dt { color: var(--text-muted); }
.legal-provider dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 600px) {
  .legal-provider { padding: var(--s-4); }
  .legal-provider dl { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .legal-provider dd { margin-bottom: var(--s-2); }
}

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps, .plans { grid-template-columns: minmax(0, 1fr); }
  .plans { max-width: 520px; margin-inline: auto; }
}
@media (max-width: 600px) {
  .tiles { grid-template-columns: minmax(0, 1fr); }
  .hero-actions .btn { flex: 1 1 100%; }
}