/* Local design proposal. Brand serif and paper palette are intentional.
   Screenshots always retain their original ratio; no background-image crops. */
@font-face { font-family:Alegreya; src:url('assets/fonts/Alegreya-Variable.ttf') format('truetype'); font-weight:400 900; font-display:swap; }
@font-face { font-family:Nunito; src:url('assets/fonts/Nunito-Variable.ttf') format('truetype'); font-weight:200 1000; font-display:swap; }
:root {
  --paper:#e6d6b3; --light:#f6f1e4; --ink:#2c2113; --muted:#635a49;
  --moss:#56633f; --line:#d2c7af; --max:1200px;
  --gutter:clamp(22px,5vw,72px); --section:clamp(64px,8vw,112px);
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:24px; }
body { margin:0; background:var(--light); color:var(--ink); font:400 17px/1.65 Nunito,Arial,sans-serif; }
a { color:inherit; text-underline-offset:4px; }
img { display:block; max-width:100%; height:auto; }
figure, h1, h2, h3, p { margin:0; }
h1,h2,h3 { font-family:Alegreya,Georgia,serif; font-weight:650; letter-spacing:-.035em; text-wrap:balance; }
h2 { font-size:clamp(34px,4vw,54px); line-height:1.08; }
h3 { font-size:32px; line-height:1.15; }
p { text-wrap:pretty; }
:focus-visible { outline:3px solid var(--moss); outline-offset:5px; }
[hidden] { display:none!important; }
.skip-link { position:absolute; top:-80px; left:24px; background:var(--ink); color:var(--light); padding:12px 20px; z-index:5; }
.skip-link:focus { top:12px; }
.site-header { width:min(var(--max),calc(100% - var(--gutter)*2)); margin:auto; min-height:80px; display:flex; align-items:center; justify-content:space-between; gap:24px; border-bottom:1px solid var(--line); }
.wordmark,.footer-wordmark { font:700 25px/1.1 Alegreya,Georgia,serif; text-decoration:none; letter-spacing:-.035em; white-space:nowrap; }
.wordmark span,.footer-wordmark span { font-weight:500; }
.site-header nav { display:flex; gap:28px; font-size:14px; }
.site-header nav a { text-decoration:none; }
.site-header nav a:hover { text-decoration:underline; }
.header-cta { font-size:13px; font-weight:750; text-decoration:none; border-bottom:1px solid var(--moss); padding:7px 0; white-space:nowrap; }
.hero { width:min(var(--max),calc(100% - var(--gutter)*2)); margin:auto; padding:78px 0 92px; display:grid; grid-template-columns:.9fr 1.1fr; gap:48px; align-items:center; }
.hero-kicker,.section-label { font-size:12px; font-weight:750; letter-spacing:.075em; color:var(--moss); margin-bottom:22px; }
.hero h1 { font-size:clamp(54px,6.4vw,88px); line-height:1.04; letter-spacing:-.045em; margin-bottom:24px; }
.hero h1 span { color:var(--moss); }
.hero-title>p:not(.hero-kicker) { max-width:34ch; color:var(--muted); font-size:18px; }
.hero-link { display:inline-flex; align-items:center; gap:24px; margin-top:28px; padding:14px 22px; background:var(--moss); color:var(--light); font-weight:750; font-size:15px; text-decoration:none; border-radius:4px; transition:background .18s,transform .18s; }
.hero-link:hover { background:#414e2e; transform:translateY(-2px); }
.hero-link:active { transform:translateY(0); }
.hero-game { position:relative; margin:16px 0 52px; }
.hero-game>img:first-child { width:100%; border-radius:5px; box-shadow:0 16px 40px -24px #5e502f80; }
.hero-game figcaption { padding-top:14px; padding-right:120px; font-size:12px; color:var(--muted); }
.hero-game .hero-mascot { position:absolute; width:144px; right:6px; bottom:-72px; pointer-events:none; }
.store-actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:28px; }
.store-badge img { width:auto; height:46px; }
.opening { padding:var(--section) var(--gutter); background:var(--paper); text-align:center; }
.opening-copy { max-width:70ch; margin:0 auto 32px; }
.opening .eyebrow { margin-bottom:14px; }
.opening h2 { font-size:clamp(32px,3.4vw,46px); margin-bottom:16px; }
.opening-copy>p:not(.eyebrow) { max-width:64ch; margin:auto; color:var(--muted); font-size:16px; }
.opening .video-device { width:min(100%,984px); margin:0 auto; }
.opening .video-device .video-frame { width:100%; margin:0; border:0; border-radius:12px; box-shadow:none; }
.gestures { max-width:calc(var(--max) + var(--gutter)*2); margin:auto; padding:var(--section) var(--gutter); }
.gestures-heading { margin-bottom:44px; }
.gestures-heading p { margin-top:16px; color:var(--muted); }
.gesture-list { display:grid; grid-template-columns:1fr 1fr; gap:48px 36px; margin:0; padding:0; list-style:none; }
.gesture { display:flex; flex-direction:column; gap:22px; min-width:0; }
.gesture:first-child { grid-column:1/-1; display:grid; grid-template-columns:.7fr 1.3fr; gap:56px; align-items:center; padding-bottom:14px; }
.gesture:not(:first-child) figure { order:-1; }
.gesture figure img { width:100%; border-radius:4px; }
.gesture-text { max-width:45ch; }
.gesture-text>span { display:block; font-size:12px; color:var(--moss); font-weight:800; margin-bottom:12px; }
.gesture-text h3 { margin-bottom:12px; }
.gesture-text p { font-size:16px; color:var(--muted); }
.territory { background:#ebe6d7; padding:var(--section) max(var(--gutter),calc((100% - var(--max))/2)); display:grid; grid-template-columns:.85fr 1.15fr; gap:40px 64px; align-items:center; }
.territory-intro h2 { margin-bottom:24px; }
.territory-intro p { max-width:40ch; font-size:16px; color:var(--muted); }
.territory-map img { width:100%; border-radius:4px; }
.territory-facts { grid-column:1/-1; display:grid; grid-template-columns:repeat(3,1fr); gap:24px; border-top:1px solid #c6bda9; padding-top:32px; margin:8px 0 0; }
.territory-facts>div { display:flex; align-items:center; gap:20px; }
.territory-facts dt { font:500 58px/1 Alegreya,Georgia,serif; color:var(--moss); }
.territory-facts dd { margin:0; font-size:14px; color:var(--muted); line-height:1.5; }
.zen { max-width:calc(var(--max) + var(--gutter)*2); margin:auto; padding:var(--section) var(--gutter); display:grid; grid-template-columns:1.1fr .9fr; align-items:center; gap:64px; }
.zen figure img { width:100%; border-radius:4px; }
.zen-copy h2 { margin-bottom:24px; }
.zen-copy>p:not(.section-label) { font-size:16px; color:var(--muted); }
.zen-note { margin-top:26px; border-top:1px solid var(--line); padding-top:18px; font-size:13px!important; }
.gallery { padding:0 var(--gutter) var(--section); max-width:calc(var(--max) + var(--gutter)*2); margin:auto; }
.gallery header { border-top:1px solid var(--line); padding-top:56px; margin-bottom:30px; }
.gallery header h2 { font-size:clamp(30px,3vw,40px); }
.gallery header p { margin-top:12px; color:var(--muted); font-size:16px; }
.gallery-track { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.gallery img { width:100%; border-radius:4px; }
.signup { background:var(--paper); padding:var(--section) max(var(--gutter),calc((100% - var(--max))/2)); display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(40px,7vw,100px); align-items:start; }
.signup-intro { position:relative; }
.signup-intro .section-label { color:#414e2e; }
.signup-intro>img { width:114px; margin-bottom:20px; }
.signup h2 { margin-bottom:24px; }
.signup-intro>p:not(.section-label) { font-size:16px; color:var(--muted); }
.signup-note { margin-top:24px; font-size:13px!important; }
.signup-form { padding:32px; background:var(--light); border-radius:6px; }
.signup-form form { display:grid; gap:22px; }
.field { margin:0; padding:0; border:0; min-width:0; }
/* Do not apply display:block to checkbox labels: it cancels their grid and gap. */
.field>label:not(.check),.field legend { display:block; padding:0; margin:0 0 8px; font-size:14px; font-weight:750; }
.field input[type=email] { width:100%; padding:13px 15px; border:1px solid #9c9687; border-radius:4px; background:#fff; color:var(--ink); font:inherit; font-size:16px; }
.field input[type=email]::placeholder { color:#726b5e; opacity:1; }
.hint,.privacy { font-size:12px; color:var(--muted); line-height:1.6; }
.hint { margin:0 0 10px; }
.checks { display:flex; flex-wrap:wrap; gap:14px 24px; }
.field .check { display:grid; grid-template-columns:18px minmax(0,1fr); align-items:start; column-gap:10px; margin:0; font-size:14px; font-weight:400; line-height:1.6; cursor:pointer; }
.check input { appearance:auto; width:18px; height:18px; margin:2px 0 0; accent-color:var(--moss); cursor:pointer; }
.check strong { font-weight:750; }
.check a,.privacy a { color:#414e2e; }
.signup-form button { border:0; border-radius:4px; padding:15px 22px; background:var(--moss); color:var(--light); font:750 15px/1.4 Nunito,Arial,sans-serif; cursor:pointer; transition:background .18s; }
.signup-form button:hover { background:#414e2e; }
.signup-form button:active { transform:translateY(1px); }
.website-field { display:none; }
.error-text { margin:8px 0 0; color:#8d2d20; font-size:13px; }
.flash { padding:12px 16px; margin-bottom:20px; border-left:3px solid var(--moss); background:#e6eadc; font-size:14px; }
.flash.error { border-color:#8d2d20; background:#f6e4db; }
footer { max-width:calc(var(--max) + var(--gutter)*2); margin:auto; padding:48px var(--gutter); display:grid; grid-template-columns:1fr auto; gap:20px 32px; font-size:12px; color:var(--muted); }
footer>div>p { margin-top:12px; }
.footer-wordmark { color:var(--ink); }
.footer-navigation { justify-self:end; display:grid; justify-items:end; gap:14px; }
.footer-links { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:20px; align-items:start; }
.footer-social { width:100%; padding-top:14px; text-align:right; }
.instagram-link { display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; color:var(--ink); border:1px solid var(--line); border-radius:50%; transition:border-color .18s,background .18s,color .18s; }
.instagram-link img { width:18px; height:18px; opacity:.8; }
.instagram-link:hover { color:var(--light); background:var(--moss); border-color:var(--moss); }
.instagram-link:hover img { filter:brightness(0) invert(1); opacity:1; }
.instagram-link:active { transform:translateY(1px); }
.safety-note-footer,.trademark-note { grid-column:1/-1; max-width:90ch; font-size:11px; line-height:1.6; }
@media (max-width:1023px) {
  .hero { gap:30px; padding:56px 0 72px; }
  .hero h1 { font-size:clamp(48px,6.5vw,68px); }
  .hero-title>p:not(.hero-kicker) { font-size:16px; }
  .site-header nav { gap:18px; }
  .territory,.zen { gap:36px; }
  .signup { gap:36px; }
  .signup-form { padding:26px; }
}
@media (max-width:767px) {
  .site-header { min-height:72px; gap:12px; }
  .site-header nav { display:none; }
  .wordmark { font-size:21px; }
  .header-cta { font-size:12px; }
  .hero { grid-template-columns:1fr; gap:36px; padding:48px 0 66px; }
  .hero h1 { font-size:clamp(52px,10vw,72px); }
  .hero-title>p:not(.hero-kicker) { max-width:38ch; font-size:17px; }
  .hero-kicker { margin-bottom:16px; }
  .hero-game { margin:0 0 40px; }
  .hero-game .hero-mascot { width:118px; bottom:-60px; }
  .hero-game figcaption { font-size:11px; padding-right:110px; }
  .opening { text-align:left; padding:34px var(--gutter); }
  .opening h2 { font-size:30px; }
  .opening>p { font-size:15px; }
  .gesture-list { grid-template-columns:1fr; gap:38px; }
  .gesture:first-child { display:flex; gap:22px; padding:0; }
  .gesture:first-child figure { order:-1; }
  .gesture-text>span { float:left; margin:7px 12px 0 0; }
  .gesture h3 { font-size:28px; }
  .gestures-heading { margin-bottom:28px; }
  .territory { grid-template-columns:1fr; gap:28px; }
  .territory-facts { gap:18px; padding-top:24px; }
  .territory-facts>div { display:block; }
  .territory-facts dt { font-size:44px; margin-bottom:10px; }
  .territory-facts dd { font-size:12px; }
  .zen { grid-template-columns:1fr; gap:30px; }
  .zen-copy { order:-1; }
  .gallery-track { grid-template-columns:1fr; gap:16px; }
  .gallery header { padding-top:36px; }
  .signup { grid-template-columns:1fr; gap:30px; }
  .signup-intro>img { width:88px; }
  .signup-form { padding:24px 20px; }
  .signup h2 { max-width:20ch; }
  footer { grid-template-columns:1fr; gap:22px; }
  .footer-navigation { justify-self:start; justify-items:start; }
  .footer-links { justify-content:flex-start; gap:12px 20px; }
}
@media (max-width:380px) {
  .wordmark { font-size:18px; }
  .header-cta { font-size:11px; }
  .signup-form { padding:22px 16px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { transition:none!important; }
}

/* Refinements: equal steps, illustrated facts, expandable gallery and FAQ. */
.site-header nav { gap:22px; }
.gesture-list { grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; }
.gesture,.gesture:first-child {
  display:flex; flex-direction:column; grid-column:auto; gap:24px; padding:0;
}
.gesture figure,.gesture:first-child figure { order:-1; }
.gesture-text { display:grid; grid-template-columns:36px 1fr; gap:10px 12px; }
.gesture-text>span {
  display:grid; place-items:center; width:36px; height:36px; float:none;
  margin:0; border:1px solid #b8c1a4; border-radius:50%;
  background:#e7ebde; color:#414e2e; font:700 16px/1 Nunito,Arial,sans-serif;
}
.gesture-text h3 { margin:0; align-self:center; font-size:29px; }
.gesture-text p { grid-column:2; font-size:15px; }
.territory-facts { border:0; gap:18px; padding:0; margin-top:12px; }
.territory-facts>div {
  display:block; padding:26px; border:1px solid #c8c6b3; border-radius:6px;
  background:var(--light); border-top:3px solid #889372;
}
.territory-facts dt { display:flex; align-items:center; gap:18px; font-size:58px; }
.territory-facts dt span { font:750 15px/1.4 Nunito,Arial,sans-serif; color:var(--ink); max-width:13ch; }
.territory-facts dd { margin-top:20px; border-top:1px solid var(--line); padding-top:16px; font-size:14px; }
.gallery-link { position:relative; display:block; border-radius:4px; }
.enlarge-label { position:absolute; bottom:12px; right:12px; padding:5px 10px; background:var(--light); color:var(--ink); border-radius:3px; font-size:12px; font-weight:750; box-shadow:0 2px 8px #2c21131a; }
.gallery-link:hover .enlarge-label,.gallery-link:focus-visible .enlarge-label { background:var(--moss); color:var(--light); }
.faq { max-width:calc(var(--max) + var(--gutter)*2); margin:auto; padding:0 var(--gutter) var(--section); display:grid; grid-template-columns:.8fr 1.2fr; gap:64px; }
.faq-intro h2 { font-size:clamp(32px,3.4vw,46px); }
.faq-intro p { margin-top:18px; font-size:16px; color:var(--muted); }
.faq-list { border-top:1px solid var(--line); }
.faq details { border-bottom:1px solid var(--line); }
.faq summary { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:21px 0; cursor:pointer; list-style:none; font-size:16px; font-weight:750; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:'+'; font-size:24px; line-height:1; font-weight:400; color:var(--moss); }
.faq details[open] summary::after { content:'−'; }
.faq details p { padding:0 28px 24px 0; color:var(--muted); font-size:15px; }
.faq a { color:#414e2e; }
.lightbox { width:100vw; max-width:none; height:100dvh; max-height:none; margin:0; padding:22px clamp(16px,4vw,60px); border:0; background:#1c211bf5; color:var(--light); }
.lightbox[open] { display:grid; grid-template-rows:auto minmax(0,1fr) auto; gap:18px; }
.lightbox::backdrop { background:#1c211b; }
.lightbox-toolbar,.lightbox-controls { width:100%; max-width:1400px; margin:auto; display:flex; justify-content:space-between; align-items:center; gap:16px; }
.lightbox button { min-height:44px; padding:8px 16px; color:var(--light); background:transparent; border:1px solid #828678; border-radius:4px; font:600 14px/1.5 Nunito,Arial,sans-serif; cursor:pointer; }
.lightbox button:hover { background:#414e2e; }
.lightbox :focus-visible { outline-color:var(--paper); }
.lightbox-close span { margin-left:12px; font-size:20px; }
.lightbox-counter { font-size:14px; font-variant-numeric:tabular-nums; }
.lightbox figure { display:flex; flex-direction:column; justify-content:center; align-items:center; min-height:0; gap:14px; pointer-events:none; }
.lightbox-image { min-height:0; width:auto; max-width:100%; max-height:calc(100% - 64px); object-fit:contain; }
.lightbox-caption { font-size:14px; text-align:center; }
@media(max-width:1023px) {
  .site-header nav { gap:14px; font-size:12px; }
  .wordmark { font-size:22px; }
  .gesture-list { gap:20px; }
  .gesture-text { grid-template-columns:30px 1fr; gap:10px; }
  .gesture-text>span { width:30px; height:30px; font-size:14px; }
  .gesture-text h3 { font-size:25px; }
  .gesture-text p { grid-column:1/-1; }
  .territory-facts>div { padding:20px; }
  .territory-facts dt { font-size:48px; gap:12px; }
  .territory-facts dt span { font-size:13px; }
  .faq { gap:36px; }
}
@media(max-width:767px) {
  .site-header { flex-wrap:wrap; padding:18px 0 12px; }
  .site-header nav { display:flex; order:3; width:100%; justify-content:space-between; gap:12px; padding-top:6px; font-size:12px; }
  .wordmark { font-size:21px; }
  .gesture-list { grid-template-columns:1fr; gap:38px; }
  .gesture-text { grid-template-columns:36px 1fr; gap:10px 12px; }
  .gesture-text>span { width:36px; height:36px; font-size:16px; }
  .gesture-text h3 { font-size:29px; }
  .gesture-text p { grid-column:2; }
  .territory-facts { grid-template-columns:1fr; gap:12px; }
  .territory-facts>div { padding:22px; }
  .territory-facts dt { font-size:48px; }
  .territory-facts dt span { font-size:16px; max-width:none; }
  .territory-facts dd { margin-top:14px; padding-top:12px; }
  .faq { grid-template-columns:1fr; gap:28px; }
  .lightbox { padding:16px; }
  .lightbox-caption { font-size:12px; }
}

/* The app icon uses its opaque, square master, not the floating mascot. */
.wordmark { display:inline-flex; align-items:center; gap:12px; }
.brand-icon { width:44px; height:44px; flex-shrink:0; border-radius:10px; box-shadow:0 3px 7px #2c211324,0 0 0 1px #2c211314; }
.wordmark .brand-name { font-weight:700; }
.wordmark .brand-name>span { font-weight:500; }
/* El contenidor conserva el 4:3 del muntatge d'iPad en tots els viewports. */
.video-frame { width:min(100%,960px); aspect-ratio:4 / 3; margin:auto; overflow:hidden; border:1px solid #c6bda9; border-radius:4px; background:#1c211b; box-shadow:0 18px 38px -28px #2c21138a; }
.video-frame iframe { display:block; width:100%; height:100%; border:0; }
@media(max-width:1023px) {
  .opening .video-device .video-frame { border-radius:9px; }
  .site-header { gap:18px; }
  .site-header nav { gap:12px; }
  .wordmark { gap:9px; font-size:20px; }
  .brand-icon { width:38px; height:38px; border-radius:9px; }
}
@media(max-width:767px) {
  .wordmark { font-size:20px; }
  .brand-icon { width:38px; height:38px; }
}
@media(max-width:380px) {
  .wordmark { gap:7px; font-size:18px; }
  .brand-icon { width:32px; height:32px; border-radius:7px; }
}

/* Device shells are illustrative CSS frames around unmodified screenshots.
   2752x2064 iPad capture = 4:3; iPhone capture retains its 2868:1320 ratio. */
.device { position:relative; background:#252627; border:2px solid #777976; padding:12px; border-radius:24px; box-shadow:0 18px 28px -20px #2c211380, inset 0 0 0 2px #121413; }
.device img { width:100%; height:auto; border-radius:12px; }
.device::before { content:""; position:absolute; width:4px; height:4px; border-radius:50%; background:#101310; box-shadow:inset 0 0 0 1px #444a43; top:4px; left:50%; }
.device--ipad { padding:12px; }
.hero-game>.device { margin:0; }
.hero-game .hero-mascot { right:-8px; bottom:-72px; }
.devices-section { width:min(var(--max),calc(100% - var(--gutter)*2)); margin:0 auto var(--section); padding:64px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); display:grid; grid-template-columns:.85fr 1.15fr; gap:64px; align-items:center; }
.devices-copy>p:not(.section-label) { color:var(--muted); font-size:16px; margin-top:24px; max-width:42ch; }
.devices-copy .devices-note { font-size:14px!important; }
.devices-still-life { display:grid; grid-template-columns:1fr; padding-bottom:8px; }
.android-preview { width:86%; justify-self:end; }
.device--android { border-color:#999d9a; background:#303637; padding:12px 16px; border-radius:20px; }
.device--android img { border-radius:6px; }
.phone-preview { width:65%; margin-top:-28px; justify-self:start; z-index:1; }
.device--phone { border-radius:24px; padding:7px; border-color:#8b8b83; }
.device--phone img { border-radius:16px; }
.device--phone::before { display:none; }
.devices-still-life figcaption { font-size:11px; line-height:1.5; color:var(--muted); padding-top:12px; }
.android-preview figcaption { text-align:right; padding-left:35%; }
.phone-preview figcaption { padding-left:8px; }
@media(max-width:1023px) {
  .devices-section { gap:32px; }
  .device { border-radius:18px; padding:9px; }
  .device img { border-radius:9px; }
  .device--android { padding:9px 13px; }
  .phone-preview { margin-top:-12px; }
}
@media(max-width:767px) {
  .devices-section { grid-template-columns:1fr; gap:32px; padding:44px 0; }
  .devices-copy h2 br { display:none; }
  .devices-still-life { padding-bottom:0; }
  .android-preview { width:92%; }
  .phone-preview { width:74%; margin-top:10px; }
  .android-preview figcaption { padding-left:0; }
  .hero-game .hero-mascot { width:110px; right:-8px; bottom:-66px; }
}
.device-disclosure { margin:20px 0 0; font-size:11px; line-height:1.55; color:var(--muted); max-width:65ch; }
.phone-preview { margin-top:-24px; }
@media(max-width:767px) { .phone-preview { margin-top:16px; } }

/* Stacked mockups share a centre axis instead of the desktop stagger. */
@media(max-width:767px) {
  .android-preview,.phone-preview { justify-self:center; }
}

/* Anchor mascot to the screen, not to the figure including its caption.
   Proportional positioning keeps the same composition at every breakpoint. */
.hero-device-composition { position:relative; }
.hero-game .hero-device-composition .hero-mascot {
  width:30%; right:0; bottom:-12%; max-width:none; z-index:2;
}
.hero-game figcaption { padding-right:32%; }
.header-cta {
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--moss); border-radius:4px; padding:10px 14px;
  color:var(--moss); line-height:1.4; text-decoration:none;
  transition:background .18s,color .18s;
}
.header-cta:hover { background:var(--moss); color:var(--light); }
.header-cta:active { transform:translateY(1px); }
@media(max-width:1023px) { .header-cta { padding:9px 10px; font-size:12px; } }
@media(max-width:380px) { .header-cta { padding:8px; font-size:11px; } }

/* Longer, approved emotional headline: preserve readable lines at every width. */
.hero h1 { font-size:clamp(38px,4vw,56px); line-height:1.1; }
@media(max-width:767px) { .hero h1 { font-size:clamp(32px,5.5vw,44px); } }

/* Only platform choices belong to this legend; other consents stay flush left. */
.platform-field > .hint,
.platform-field > .checks,
.platform-field > .error-text { margin-left:18px; }
.platform-field { padding-bottom:8px; }

/* The device composition prioritises silhouettes, with deliberate screen overlap. */
@media(min-width:768px) { .phone-preview { margin-top:-18%; } }

/* Presentació del joc llegible, subordinada al titular emocional. */
.hero-title .hero-kicker {
  max-width:38ch;
  font-size:clamp(18px,1.5vw,21px);
  line-height:1.45;
  letter-spacing:0;
  font-weight:500;
  margin-bottom:24px;
  text-wrap:pretty;
}
.hero-kicker strong { font-weight:800; }
.hero-title > p:not(.hero-kicker) {
  font-size:clamp(19px,1.55vw,22px);
  line-height:1.55;
  max-width:38ch;
}

/* Botigues independents: el bloc Android anuncia disponibilitat futura, no simula un badge oficial. */
.store-actions { align-items:flex-start; gap:24px; }
.store-option { display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
.store-option > span,.store-option > a:not(.store-badge) { font-size:13px; line-height:1.5; color:var(--muted); }
.store-coming { min-height:46px; display:flex; flex-direction:column; justify-content:center; padding:0 16px; border-left:2px solid var(--line); }
.store-coming strong { font-size:18px; line-height:1.3; }
.store-coming span { font-size:13px; color:var(--muted); }
/* No dependre de la mida intrínseca d'una imatge lazy per calcular l'amplada del flex. */
.gesture figure { width:100%; }

/* Segona oportunitat de visitar la botiga, un cop descobert el joc. */
.store-strip { padding:64px var(--gutter); background:#e7ebde; text-align:center; border-block:1px solid #cbd2bc; }
.store-strip h2 { font-size:clamp(32px,4vw,46px); line-height:1.15; margin-bottom:16px; }
.store-strip > p { max-width:52ch; margin:0 auto; color:var(--muted); font-size:18px; }
.store-strip .store-actions { justify-content:center; gap:40px; margin-top:28px; }
.store-strip .store-option { align-items:center; }
.store-strip .store-coming { border:0; padding:0; }
@media(max-width:480px) {
  .store-strip { padding:48px 20px; }
  .store-strip .store-actions { flex-wrap:nowrap; gap:20px; }
  .store-strip .store-option { min-width:0; max-width:50%; }
  .store-strip .store-option > span { max-width:145px; font-size:12px; }
}


/* Icons are CSS masks, not Unicode arrows: iOS must never substitute a coloured emoji. */
.icon-arrow {
  display:inline-block; width:.9em; height:.9em; flex:0 0 auto;
  background:currentColor; vertical-align:-.07em;
  -webkit-mask:url("assets/icons/arrow-right.svg") center / contain no-repeat;
  mask:url("assets/icons/arrow-right.svg") center / contain no-repeat;
}
.icon-arrow--up-right { transform:rotate(-45deg); }
.icon-arrow--left { transform:rotate(180deg); }
.hero-link .icon-arrow { width:14px; height:14px; }
.enlarge-label { display:inline-flex; align-items:center; gap:5px; }
.lightbox-controls button { display:inline-flex; align-items:center; gap:7px; }


/* Header actions distinguish the store already available from Android notifications. */
.header-actions { display:flex; align-items:center; gap:10px; margin-left:auto; }
.header-store-link { display:block; flex:0 0 auto; line-height:0; }
.header-store-link img { width:auto; height:40px; }
.header-store-link:hover { transform:translateY(-1px); }
@media(max-width:1023px) {
  .header-actions { gap:8px; }
  .header-store-link img { height:36px; }
}
@media(max-width:767px) {
  .header-actions { order:2; width:100%; justify-content:flex-end; padding-top:2px; }
  .site-header nav { order:3; }
}
@media(max-width:380px) {
  .header-actions { justify-content:space-between; }
  .header-store-link img { height:32px; }
  .header-cta { font-size:11px; }
}


/* The Android notification is deliberately secondary and belongs to Google Play. */
.store-coming { gap:2px; }
.store-notify {
  display:inline-flex; align-items:center; width:fit-content; margin-top:7px; padding:5px 8px;
  border:1px solid var(--moss); border-radius:3px; color:var(--moss)!important;
  font-size:12px!important; font-weight:800; line-height:1.25!important; text-decoration:none;
  transition:background .18s,color .18s;
}
.store-notify:hover { background:var(--moss); color:var(--light)!important; }
.store-strip .store-notify { margin-top:8px; }