/* getkyou.com: resolve the platform, deliver the store path or the installer (Creative Brief §15).
   Builds on home.css (tokens, header, buttons, fonts, day/night). */

/* Device-specific content: get.js sets <html data-device="desktop|ios|android">.
   Without JavaScript every variant stays visible. */
:root[data-device="desktop"] [data-only]:not([data-only~="desktop"]),
:root[data-device="ios"] [data-only]:not([data-only~="ios"]):not([data-only~="mobile"]),
:root[data-device="android"] [data-only]:not([data-only~="android"]):not([data-only~="mobile"]){display:none!important}

.get-main{padding-block:clamp(2rem,5vw,4rem) clamp(3.5rem,8vw,6rem)}
.get-head{max-width:40rem;margin-bottom:clamp(1.8rem,4vw,3rem)}
.get-head h1{font-weight:400;font-size:clamp(2.5rem,5.4vw,4.6rem);line-height:.98;letter-spacing:-.045em}
.get-head h1 b{font-weight:600}
.get-head .beta-mail{margin-top:.7rem;font-size:.95rem;color:var(--muted)}
.get-head .beta-mail a{color:var(--ink);user-select:all}
.get-head .lead{margin-top:1.1rem;font-size:clamp(1.05rem,1.5vw,1.22rem);color:var(--muted);max-width:36ch}

.get-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1rem,2.4vw,1.75rem);align-items:stretch}
.get-card{background:var(--surface);border:1px solid var(--rule);border-radius:24px;padding:clamp(1.4rem,3vw,2.4rem);display:grid;gap:1.5rem;align-content:start;min-width:0}
.card-top{display:flex;align-items:center;gap:1rem}
/* App icon: registered signet without wordmark on its white tile, like on a home screen (both themes) */
.card-top .app-icon{width:56px;height:56px;border-radius:13px;border:1px solid var(--rule);background:#FFFFFF;display:grid;place-items:center}
.card-top .app-icon img{width:40px;height:auto}
.card-top .link-icon{width:56px;height:56px;border-radius:13px;display:grid;place-items:center;background:var(--ink)}
.card-top .link-icon img{width:40px;height:auto;filter:invert(1)}
:root[data-theme="dark"] .card-top .link-icon img{filter:none}
.card-top .where{font:600 .75rem/1 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.card-top h2{font-size:clamp(1.5rem,2.4vw,2rem);line-height:1.05;letter-spacing:-.03em;margin-top:.35rem}
.get-card .note{color:var(--muted);max-width:38ch}

/* Store badges: official artwork, unmodified; sized to the same visual height */
.badges{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1rem}
.badges a{display:block;line-height:0;border-radius:9px}
.badges .apple img{height:48px;width:auto}
.badges .google img{height:71px;width:auto;margin:-11.5px -10px}
.badges.primary .apple img{height:56px}
.badges.primary .google img{height:83px;margin:-13.5px -12px}
.badges .alt{font-size:.9rem;color:var(--muted);line-height:1.4}
.badges .alt a{display:inline;line-height:inherit;color:var(--ink)}

/* Desktop → phone: QR to the stable routing URL /app */
.qr-row{display:flex;align-items:center;gap:1.25rem}
.qr-plate{flex:none;width:132px;padding:12px;background:#FFFFFF;border:1px solid var(--rule);border-radius:16px}
.qr-plate img{display:block;width:100%;height:auto;image-rendering:pixelated}
.qr-row p{color:var(--muted);font-size:.95rem;max-width:22ch}
.qr-row p b{display:block;color:var(--ink);font-weight:600;font-size:1.05rem;margin-bottom:.25rem}

/* KYOU Link download: branded twin of the store badges (black, rounded, signet + two lines) */
.link-badge{display:inline-flex;align-items:center;gap:.85rem;min-height:56px;padding:.55rem 1.3rem .55rem 1rem;border-radius:12px;background:#000000;color:#FFFFFF;border:1px solid #A6A6A6;text-decoration:none;transition:transform var(--t-micro) var(--ease-out)}
.link-badge:active{transform:scale(.97)}
.link-badge img{width:40px;height:auto;filter:invert(1)}
.link-badge span{display:grid;line-height:1.1}
.link-badge small{font-size:.72rem;letter-spacing:.02em;opacity:.85}
.link-badge strong{font:600 1.25rem/1.15 var(--display);letter-spacing:-.01em}
.link-meta{display:flex;flex-wrap:wrap;gap:.35rem 1rem;font-size:.85rem;color:var(--muted)}
.link-meta a{color:var(--emerald-text)}

/* Mobile → computer: send yourself the link */
.send{display:flex;flex-wrap:wrap;gap:.6rem}
.send .btn{flex:1 1 0;min-width:0;justify-content:center;padding-inline:.8rem}
.send svg{width:18px;height:18px}

.get-help{margin-top:clamp(2rem,4vw,3rem);font-size:.95rem;color:var(--muted)}
.get-help a{color:var(--ink)}

@media (max-width:820px){
  .get-grid{grid-template-columns:minmax(0,1fr)}
}

/* Current state (closed beta): store and KYOU Link badges are shown at 30 % and not clickable;
   each card ends with the beta invitation, aligned across both cards. */
.get-card{display:flex;flex-direction:column}
.soon{display:grid;gap:.6rem}
.soon .badges{opacity:.3;pointer-events:none;user-select:none}
.soon-label{font:500 .95rem/1.2 var(--body);color:var(--muted);letter-spacing:.01em}
.get-card .beta{margin-top:auto;align-self:flex-start;white-space:normal;text-align:left;line-height:1.25}
@media (max-width:640px){
  .get-card .beta{align-self:stretch;justify-content:center;text-align:center}
}

/* One badge height for App Store, Google Play and KYOU Link: 56 px visual height.
   Google's PNG carries transparent padding, hence the larger image and negative margins. */
.soon .badges{--bh:56px}
.soon .badges .apple img{height:var(--bh);width:auto}
.soon .badges .google img{height:calc(var(--bh) * 82 / 56);width:auto;margin:calc(var(--bh) * -13 / 56) calc(var(--bh) * -12 / 56)}
/* Phones: both store badges stay side by side and shrink together (min 40 px visual height) */
@media (max-width:640px){
  .soon .badges:has(.apple){flex-wrap:nowrap;gap:.75rem;--bh:clamp(40px,calc((100vw - 120px) / 6.6),56px)}
}
.link-badge{height:56px;min-height:0;padding-block:0;box-sizing:border-box}