:root {
  color-scheme: dark;
  --bg: #080d16;
  --surface: #111a29;
  --ink: #f1f4f8;
  --muted: #a8b6c9;
  --cyan: #89e0e2;
  --purple: #aaa3ef;
  --gold: #e7c488;
  --line: #2b3545;
  --max: 1280px;
  font-family: "Inter", "Segoe UI", Arial, sans-serif;
  font-synthesis: none;
}
* { box-sizing: border-box }
html { scroll-behavior: smooth; scroll-padding-top: 24px }
body { margin: 0; background: var(--bg); color: var(--ink); font-size: 1rem; line-height: 1.65 }
p, h3, .button, .product-name strong { overflow-wrap: anywhere }
a { color: inherit; text-decoration: none }
button { font: inherit; cursor: pointer }
a, button { -webkit-tap-highlight-color: transparent }
a:focus-visible, button:focus-visible, video:focus-visible { outline: 3px solid var(--cyan); outline-offset: 5px }
img { display: block; max-width: 100%; height: auto }
::selection { background: var(--cyan); color: var(--bg) }
.wrap { width: min(var(--max), calc(100% - 112px)); margin-inline: auto }
[hidden] { display: none !important }
.skip { position: fixed; z-index: 200; top: 12px; left: 12px; transform: translateY(-180%); padding: 12px 20px; background: var(--cyan); color: var(--bg) }
.skip:focus { transform: none }
.header { min-height: 100px; display: flex; align-items: center; justify-content: space-between; gap: 32px; border-bottom: 1px solid var(--line) }
.brand { display: inline-flex; align-items: center; gap: 9px; flex-shrink: 0 }
.brand-logo { width: 54px; height: 54px; object-fit: contain; border-radius: 10px }
.brand-word { font-size: 1.55rem; font-weight: 600; letter-spacing: -.055em }
.nav { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 12px 32px; font-size: .9375rem }
.nav > a { padding-block: 12px; color: #bcc7d7; min-height: 44px }
.nav a:hover, .footer a:hover { color: var(--cyan) }
.nav a[aria-current=page] { color: var(--ink) }
.nav > a[aria-current=page] { box-shadow: 0 1px var(--cyan) }
.languages { display: flex; border: 1px solid var(--line); border-radius: 7px; padding: 3px }
.languages a { display: grid; place-items: center; min-width: 2.625rem; min-height: 2.25rem; font-size: .875rem; color: var(--muted); border-radius: 4px }
.languages a[aria-current=page] { color: var(--ink); background: #263243 }
.eyebrow { margin: 0 0 24px; font-size: .875rem; font-weight: 500; letter-spacing: .16em; line-height: 1.6; color: var(--cyan); text-transform: uppercase }
h1, h2, .legal-word { overflow-wrap: anywhere }
h1, h2, p { text-wrap: pretty }
h1 { font-weight: 500; letter-spacing: -.052em }
h1 em { font-style: normal; color: var(--cyan) }
.discover, .hero > *, .discovery-heading > *, .showcase-stage > *, .legal-feature > *, .legal-intro > *, .legal-notice > *, .pdf-panel > *, .app-row > * { min-width: 0 }
.discovery { padding-top: 48px }
.discovery-heading { display: grid; grid-template-columns: 1.5fr 1fr; gap: 60px; align-items: end; margin-bottom: 44px }
.discovery h1 { margin: 0; font-size: clamp(3.25rem, 5.4vw, 5rem); line-height: 1.04; letter-spacing: -.058em }
.discovery-intro { padding-bottom: 3px; max-width: 370px; justify-self: end }
.discovery-intro p { font-size: 1.0625rem; color: var(--muted); margin: 0 0 15px; line-height: 1.75 }
.text-link { display: inline-flex; align-items: center; justify-content: space-between; gap: 28px; padding: 10px 0; min-height: 44px; font-size: .9375rem; border-bottom: 1px solid #65788d }
.text-link:hover { border-color: var(--cyan); color: var(--cyan) }
.arrow { font-size: 1.2rem; line-height: 1; font-weight: 400 }
.actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 24px; padding: 15px 22px; min-height: 52px; max-width: 100%; border: 1px solid #415064; border-radius: 6px; font-size: .9375rem; font-weight: 500; line-height: 1.5; transition: background .18s ease, border-color .18s ease, transform .18s ease }
.button.primary { background: var(--cyan); color: #092023; border-color: var(--cyan) }
.button.primary:hover { background: #b4f5ee; border-color: #b4f5ee; transform: translateY(-2px) }
.button.secondary { background: transparent; color: var(--ink) }
.button.secondary:hover { background: #1a2739; border-color: #8aa7be }
.showcase-stage { position: relative; display: grid; grid-template-columns: .95fr 1.2fr; gap: 34px; align-items: center; padding: 40px 54px 64px; border: 1px solid #35465b; border-radius: 14px; background: radial-gradient(ellipse at 84% 20%, #45407725, transparent 52%), radial-gradient(ellipse at 52% 110%, #2387891c, transparent 54%), linear-gradient(115deg,#111c2a,#101925 64%,#131b2d); overflow: hidden }
.stage-index { display: block; color: #a9b8c8; font-size: .75rem; letter-spacing: .2em; margin-bottom: 32px }
.product-name { display: flex; flex-wrap: wrap; align-items: center; gap: 15px; margin-bottom: 24px }
.product-name > div { flex: 1 1 10rem; min-width: 0; max-width: 100% }
.product-name img { flex-shrink: 0 }
.product-name img { width: 55px; height: 55px; border-radius: 12px }
.product-name strong { font-size: 1.85rem; font-weight: 500; line-height: 1.15; letter-spacing: -.045em; display: block }
.product-name small { display: block; font-size: .875rem; color: var(--muted); letter-spacing: .04em; margin-top: 5px; line-height: 1.6 }
.stage-copy h2 { font-size: clamp(1.85rem, 2.55vw, 2.5rem); font-weight: 400; line-height: 1.22; letter-spacing: -.045em; margin: 0 0 17px }
.stage-copy > p { color: var(--muted); max-width: 330px; margin: 0 0 26px; font-size: 1rem }
.stage-copy .button.primary { background: #e4c990; border-color: #e4c990; color: #221c12 }
.stage-copy .button.primary:hover { background: #f4dfb5; border-color: #f4dfb5 }
.stage-screens { display: flex; align-items: center; justify-content: flex-end; gap: 20px; padding-right: 4px }
.stage-screens a { display: block; border: 1px solid #415264; box-shadow: 0 20px 34px #0005; transition: transform .2s }
.stage-screens a:hover { transform: translateY(-5px) }
.stage-main { width: 244px; flex: 1 1 244px; max-width: 244px }
.stage-secondary { width: 208px; flex: 1 1 208px; max-width: 208px; margin-top: 60px }
.stage-caption { position: absolute; bottom: 15px; right: 54px; color: #9cacc0; font-size: .75rem; margin: 0 }
.section { padding-block: 96px }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 40px; margin-bottom: 40px }
.section-heading .eyebrow { margin-bottom: 14px }
.section-heading h2, .pdf-copy h2 { font-size: clamp(2.2rem, 3.7vw, 3.4rem); font-weight: 400; letter-spacing: -.045em; line-height: 1.12; margin: 0 }
.small-intro { color: var(--muted); max-width: 340px; margin: 0; font-size: 1rem }
.app-row { display: grid; grid-template-columns: 1fr 1.2fr auto; gap: 40px; align-items: center; padding: 36px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 22px }
.app-row .product-name { margin: 0 }
.app-row p { color: var(--muted); margin: 0 }
.app-row h2 { font-weight: 400; font-size: 2rem; margin: 0 }
.legal-feature { display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: 70px; padding: 48px 54px; border: 1px solid #45435a; border-radius: 12px; background: radial-gradient(ellipse at 5% 100%,#4c3d6a30,transparent 70%),#111624 }
.legal-feature .eyebrow, .legal-page .eyebrow { color: var(--purple) }
.legal-word { font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-size: clamp(4rem, 6.6vw, 6rem); line-height: 1.1; letter-spacing: -.055em; color: #e0def3; margin: 0 0 16px }
.legal-feature .description { padding-left: 35px; border-left: 1px solid #49455b }
.legal-feature .description p { color: #bdc0d3; font-size: 1.125rem; max-width: 300px; margin: 0 0 20px }
.status { display: inline-block; color: #beb9dc; font-size: .875rem; line-height: 1.6; margin-top: 16px; padding: 9px 12px; background: #221f34; border: 1px solid #444056; border-radius: 5px }
.footer { border-top: 1px solid var(--line); padding-top: 44px; padding-bottom: 26px }
.footer-top { display: flex; align-items: start; justify-content: space-between; gap: 40px }
.footer .brand-logo { width: 56px; height: 56px }
.footer p { color: var(--muted); font-size: .9375rem; max-width: 300px }
.footer-links { display: flex; flex-wrap: wrap; gap: 25px 72px; max-width: 60%; font-size: .9375rem }
.footer-links strong { display: block; margin-bottom: 10px; font-weight: 500; color: var(--ink) }
.footer-links a { display: block; padding: 7px 0; color: var(--muted); overflow-wrap: anywhere }
.footer-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 15px 30px; font-size: .8125rem; color: #8797ad; border-top: 1px solid var(--line); padding-top: 24px; margin-top: 40px }
.discovery-links { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 26px; }
.social-jump { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); font-size: .9375rem; text-decoration: underline; text-underline-offset: 6px; text-decoration-color: #536578; }
.social-jump:hover { color: var(--cyan); text-decoration-color: var(--cyan); }
.social-hub { padding-block: 8px 40px; margin-bottom: 40px; border-bottom: 1px solid var(--line); scroll-margin-top: 28px; }
.social-heading { display: flex; align-items: end; justify-content: space-between; gap: 28px 64px; margin-bottom: 28px; }
.social-heading > * { min-width: 0; }
.footer .social-heading .eyebrow { margin: 0 0 12px; color: var(--cyan); font-size: .875rem; }
.social-heading h2 { font-size: clamp(2rem,3.2vw,3rem); line-height: 1.15; letter-spacing: -.045em; font-weight: 400; margin: 0; }
.footer .social-intro { max-width: 450px; font-size: 1rem; line-height: 1.75; margin: 0; }
.social-list { list-style: none; display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 12px; padding: 0; margin: 0; }
.social-list li { min-width: 0; }
.social-link { --social-icon-cutout: #131f2e; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding: 22px 20px; height: 100%; min-height: 164px; border: 1px solid #36485e; border-radius: 10px; background: #0f1825; transition: border-color .18s ease, background .18s ease; }
.social-symbol { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 9px; color: #dce8f2; background: var(--social-icon-cutout); flex-shrink: 0; }
.social-symbol svg { display: block; }
.social-copy { display: block; min-width: 0; }
.social-copy strong { display: block; font-size: 1.0625rem; line-height: 1.4; font-weight: 500; color: var(--ink); }
.social-copy > span { display: block; color: var(--muted); font-size: .875rem; line-height: 1.6; margin-top: 5px; overflow-wrap: anywhere; }
.social-link:hover { border-color: var(--cyan); background: #132230; }
.social-link:hover .social-symbol { color: var(--cyan); }
.social-link:focus-visible { outline-offset: 3px; }
.footer .social-note { font-size: .875rem; max-width: none; color: var(--muted); margin: 16px 0 0; }
@media (max-width: 1050px) {
  .social-heading { align-items: start; gap: 28px; }
  .social-list { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .social-link { min-height: 156px; }
}
@media (max-width: 600px) {
  .social-heading { display: block; }
  .social-heading h2 { font-size: clamp(1.5rem,8.5vw,2.125rem); }
  .footer .social-intro { margin-top: 18px; }
  .social-hub { padding-top: 4px; margin-bottom: 30px; padding-bottom: 30px; }
  .social-list { grid-template-columns: repeat(auto-fit,minmax(min(100%,9rem),1fr)); gap: 12px; }
  .social-link { padding: 20px 16px; min-height: 160px; gap: 16px; }
  .social-list li:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .social-list li:last-child:nth-child(odd) .social-link { flex-direction: row; align-items: center; min-height: 90px; }
}
@media (prefers-reduced-motion: reduce) { .social-link { transition: none; } }
.breadcrumb { display: inline-flex; gap: 12px; align-items: center; min-height: 44px; color: #a9b8ca; font-size: .875rem; margin-top: 26px }
.breadcrumb:hover { color: var(--cyan) }
.hero { display: grid; grid-template-columns: 1.15fr 1fr; gap: 72px; align-items: center }
.product-hero { padding-top: 35px; padding-bottom: 64px; min-height: 650px }
.product-hero h1 { font-size: clamp(3rem,5vw,4.65rem); line-height: 1.06; margin: 0 0 28px }
.product-hero .product-name { margin-bottom: 36px }
.intro { color: var(--muted); font-size: 1.125rem; line-height: 1.75; max-width: 490px; margin: 0 0 30px }
.hero-art { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center; padding: 24px 26px; border: 1px solid #324459; background: radial-gradient(ellipse at center,#334c6140,transparent 70%),#101825; border-radius: 12px }
.hero-board { display: block; width: 268px; justify-self: center; border: 1px solid #405064; box-shadow: 0 18px 30px #0005; transition: transform .2s }
.hero-board:hover { transform: translateY(-4px) }
.art-aside { writing-mode: vertical-rl; color: #a2b2c5; font-size: .75rem; letter-spacing: .13em }
.hero-caption { display: flex; justify-content: space-between; gap: 20px; color: var(--muted); font-size: .75rem; line-height: 1.5; margin-top: 16px }
.hero-caption span:last-child { flex-shrink: 0 }
.facts { display: grid; grid-template-columns: repeat(3,1fr); gap: 35px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding-block: 33px }
.fact { position: relative; padding-left: 36px }
.fact-number { position: absolute; top: 2px; left: 0; font-size: .8125rem; color: var(--cyan) }
.fact h2 { font-size: 1.125rem; font-weight: 500; margin: 0 0 8px }
.fact p { font-size: 1rem; color: var(--muted); margin: 0 }
.gallery-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px }
.screen-card { margin: 0; padding: 38px 34px 24px; background: linear-gradient(150deg,#132131,#111723); border: 1px solid #304155; border-radius: 10px }
.screen-link { display: block; width: min(100%,330px); margin-inline: auto; cursor: zoom-in; transition: transform .2s }
.screen-link:hover { transform: translateY(-4px) }
.screen-link img { width: 100% }
.screen-card figcaption { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-top: 26px; font-size: .9375rem }
.screen-card figcaption span { color: var(--muted); font-size: .8125rem; text-align: right }
.gallery-note, .note { color: var(--muted); font-size: .875rem; line-height: 1.7 }
.gallery-note { margin: 24px 0 0 }
.pdf-section { padding-bottom: 90px }
.pdf-panel { display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; gap: 70px; padding: 58px; background: #122030; border: 1px solid #314a60; border-radius: 12px }
.pdf-copy p { color: var(--muted); margin: 24px 0 }
.pdf-copy .eyebrow { color: var(--cyan); margin-top: 0 }
.pdf-copy .note { margin-bottom: 0 }
.pdf-preview { display: block; max-width: 290px; justify-self: center; transform: rotate(3deg); box-shadow: 0 20px 35px #0005; transition: transform .2s }
.pdf-preview:hover { transform: rotate(0) }
.legal-bg { background: radial-gradient(ellipse at 85% 40%,#453a7129,transparent 60%) }
.legal-page { padding-top: 60px; padding-bottom: 100px }
.legal-title-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 20px; padding-bottom: 44px; border-bottom: 1px solid #45435b }
.legal-title-row .legal-word { font-size: clamp(5rem,12.2vw,11rem); margin: 0 }
.legal-index { color: var(--purple); font-size: .9375rem; letter-spacing: .18em }
.legal-intro { display: grid; grid-template-columns: 1.2fr 1fr; gap: 70px; margin-top: 56px }
.legal-intro h1 { font-size: clamp(2.65rem,4.4vw,4.15rem); line-height: 1.1; margin: 0; max-width: 560px }
.legal-intro p { color: #b9bed0; font-size: 1.125rem; margin: 0 0 24px }
.legal-notice { margin-top: 62px; padding: 28px 32px; background: #161a2b; border-left: 2px solid #aaa3ef; display: grid; grid-template-columns: 1fr 1fr; gap: 50px }
.legal-notice h2 { color: #d5d0ef; font-size: 1.25rem; font-weight: 400; margin: 0 }
.legal-notice p { color: #b4bbce; margin: 0 }
.generic-product h1 { font-size: clamp(2.5rem,5vw,4.6rem); line-height: 1.12 }
.error { min-height: 64vh; padding-block: 100px }
.error h1 { font-size: clamp(2.8rem,6vw,5rem); line-height: 1.08; margin: 0 0 24px }
.error p { max-width: 490px; color: var(--muted); margin-bottom: 26px }
dialog { width: min(92vw,850px); max-height: 93dvh; padding: 18px; border: 1px solid #45627b; border-radius: 10px; background: #0c1420; color: var(--ink) }
dialog::backdrop { background: #03060def; backdrop-filter: blur(5px) }
.dialog-top { position: sticky; top: -18px; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 8px 0 18px; background: #0c1420 }
.dialog-top p { margin: 0; font-size: .9375rem }
.dialog-top button { border: 1px solid #55748e; background: #1c3042; color: var(--ink); border-radius: 5px; min-height: 44px; padding: 8px 16px }
.dialog-image { width: min(100%,640px); margin-inline: auto }
.dialog-open { overflow: hidden }
.leave-dialog { width: min(92vw,520px); padding: 28px; }
.leave-dialog h2 { margin: 0 0 16px; font-weight: 500; font-size: 1.5rem; line-height: 1.3; }
.leave-dialog p { color: var(--muted); margin: 0 0 24px; }
.leave-dialog .actions { align-items: stretch; }
.page-nav { display: flex; flex-wrap: wrap; gap: 6px 24px; align-items: center; padding-block: 18px; margin-top: 18px; border-block: 1px solid var(--line); }
.page-nav > span { color: var(--muted); font-size: .875rem; }
.page-nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); font-size: .9375rem; text-decoration: underline; text-underline-offset: 6px; text-decoration-color: #536578; }
.page-nav a:hover { color: var(--cyan); text-decoration-color: var(--cyan); }
.store-links { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 }
.store-links a { max-width: 100%; white-space: normal; text-align: left }
.video-block { padding-bottom: 80px }
.video-block h2 { font-size: 2rem; font-weight: 400; letter-spacing: -.035em }
.video-block video { display: block; width: 100%; max-height: 700px; background: #000; border-radius: 8px }
.youtube-player { width: 100%; background: #111c2b; border: 1px solid #374d64; border-radius: 8px; overflow: hidden }
.youtube-surface { position: relative; width: 100%; min-width: 0; aspect-ratio: 16/9; display: grid; place-items: center; overflow: hidden }
.video-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 1 }
.youtube-load { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; width: 100%; height: 100%; padding: 16px; border: 0; background: transparent; color: #092023; }
.youtube-load:focus-visible { outline-offset: -6px; }
.video-play { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 52px; max-width: 100%; padding: 12px 22px; border: 1px solid #c2faf2; border-radius: 999px; background: var(--cyan); color: #092023; font-size: 1rem; line-height: 1.5; font-weight: 600; box-shadow: 0 6px 28px #000a; }
.youtube-load:hover .video-play { background: #b4f5ee; }
.youtube-player iframe { display: block; width: 100%; aspect-ratio: 16/9; min-height: 240px; border: 0 }
.video-fallback { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; color: var(--muted); font-size: 1rem }
.video-fallback a { color: var(--cyan) }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0 }

/* A single 3s envelope includes entry (0–.45s) and exit (2.35–3s).
   Keep pointer-events constant while visible: discrete animation would release
   hit testing halfway through the fade. Terminal visibility:hidden releases it. */
.brand-intro { --intro-ready: 1; position: fixed; z-index: 150; inset: 0; display: grid; place-items: center; background: radial-gradient(ellipse at 40% 38%,#152a3933,transparent 50%),radial-gradient(ellipse at 65% 68%,#3e32672b,transparent 45%),#070b12; visibility: hidden; opacity: 0; pointer-events: none }
.brand-intro.is-active { visibility: visible; pointer-events: auto; animation: intro-envelope 3s linear both }
.intro-center { text-align: center; width: min(320px,65vw) }
.intro-seal { position: relative; width: min(248px,52vw); margin: auto; overflow: hidden; border-radius: 15px; animation: intro-logo 3s cubic-bezier(.2,.65,.3,1) both }
.intro-seal img { width: 100%; height: auto; object-fit: contain }
.intro-seal::after { content: ""; position: absolute; inset: -20% -80%; background: linear-gradient(110deg,transparent 43%,#bcf8ff16 49%,#e1d7ff24 50%,transparent 57%); transform: translateX(-55%); animation: intro-light 3s ease-in-out both; pointer-events: none }
.intro-center p { font-size: 2rem; letter-spacing: -.055em; font-weight: 500; margin: 12px 0 5px }
.intro-center > span { color: #99adbf; font-size: .75rem; letter-spacing: .22em }
.intro-skip { position: absolute; bottom: max(32px,env(safe-area-inset-bottom)); right: max(36px,env(safe-area-inset-right)); display: inline-flex; align-items: center; gap: 20px; background: transparent; color: #b1c3d4; border: 1px solid #3c4d5f; border-radius: 6px; padding: 10px 16px; min-height: 44px; font-size: .875rem }
.intro-skip:hover { border-color: var(--cyan); color: var(--cyan) }
@keyframes intro-envelope {
  0% { opacity: 0; visibility: visible }
  15%,78.333% { opacity: 1; visibility: visible }
  100% { opacity: 0; visibility: hidden }
}
@keyframes intro-logo { 0% { opacity: 0; transform: scale(.975) } 20% { opacity: 1 } 78% { opacity: 1; transform: scale(1.012) } 100% { opacity: 0; transform: scale(1.018) } }
@keyframes intro-light { 0%,24% { transform: translateX(-55%); opacity: 0 } 32% { opacity: 1 } 62% { transform: translateX(55%); opacity: .8 } 75%,100% { transform: translateX(55%); opacity: 0 } }

@media (max-width: 1100px) {
  .wrap { width: calc(100% - 64px) }
  .discovery-heading { gap: 40px; grid-template-columns: 1.45fr 1fr }
  .discovery h1 { font-size: 4rem }
  .showcase-stage { padding: 34px 38px 60px; gap: 32px; grid-template-columns: 1fr 1.1fr }
  .stage-screens { gap: 15px }
  .stage-caption { right: 38px }
  .hero { gap: 40px; grid-template-columns: 1.1fr 1fr }
  .hero-art { padding: 24px; gap: 15px }
  .product-hero h1 { font-size: 3.6rem }
  .app-row { gap: 28px; grid-template-columns: 1fr 1fr }
  .app-row > .text-link { grid-column: 2; justify-self: start }
  .legal-feature { padding: 38px; gap: 40px }
  .pdf-panel { padding: 40px; gap: 40px }
}
@media (max-width: 800px) {
  .wrap { width: calc(100% - 48px) }
  .header { min-height: 90px; gap: 20px }
  .nav { gap: 12px 22px }
  .discovery { padding-top: 38px }
  .discovery-heading { display: block; margin-bottom: 32px }
  .discovery h1 { font-size: clamp(3.1rem,7vw,4.2rem) }
  .discovery-intro { max-width: 550px; margin-top: 26px }
  .discovery-intro p { max-width: 550px; margin-bottom: 10px }
  .showcase-stage { grid-template-columns: 1fr 1fr; padding: 32px 28px 60px; gap: 22px }
  .stage-index { margin-bottom: 22px }
  .stage-copy h2 { font-size: 1.85rem }
  .stage-secondary { display: none !important }
  .stage-main { max-width: 220px }
  .stage-caption { left: 28px; right: 28px; font-size: .75rem }
  .stage-screens { justify-content: center; padding: 0 }
  .section { padding-block: 70px }
  .section-heading { align-items: start; flex-direction: column; gap: 22px }
  .small-intro { max-width: 580px }
  .legal-feature { gap: 30px; padding: 32px }
  .legal-feature .description { padding-left: 25px }
  .legal-word { font-size: 4.4rem }
  .hero { gap: 32px }
  .product-hero { min-height: 590px }
  .product-hero h1 { font-size: 3rem }
  .intro { font-size: 1rem }
  .art-aside { display: none }
  .hero-art { display: block; padding: 22px }
  .hero-board { max-width: 100%; margin-inline: auto }
  .facts { gap: 25px }
  .fact { padding-left: 28px }
  .screen-card { padding: 26px 22px 20px }
  .screen-card figcaption { display: block }
  .screen-card figcaption span { display: block; text-align: left; margin-top: 5px }
  .pdf-panel { padding: 32px; gap: 30px }
  .pdf-copy h2 { font-size: 2.4rem }
  .legal-intro, .legal-notice { gap: 35px; grid-template-columns: 1fr 1fr }
  .footer-links { gap: 25px 34px }
}
@media (max-width: 600px) {
  .wrap { width: calc(100% - 40px) }
  .header { min-height: 118px; display: block; padding-block: 15px 9px }
  .brand-logo { width: 42px; height: 42px; border-radius: 8px }
  .brand-word { font-size: 1.4rem }
  .nav { justify-content: start; gap: 8px 24px; margin-top: 7px; font-size: .875rem }
  .nav > a { padding-block: 7px; min-height: 38px }
  .languages { margin-left: auto; padding: 2px }
  .languages a { min-width: 2.125rem; min-height: 1.875rem; font-size: .8125rem }
  .eyebrow { font-size: .75rem; letter-spacing: .12em; margin-bottom: 20px }
  .discovery { padding-top: 35px }
  .discovery h1 { font-size: clamp(2.5rem,10.8vw,3.6rem); line-height: 1.1; letter-spacing: -.056em }
  .discovery-heading { margin-bottom: 30px }
  .discovery-intro { margin-top: 22px }
  .discovery-intro p { font-size: 1rem; line-height: 1.7 }
  .text-link { font-size: .9375rem }
  .showcase-stage { display: block; padding: 25px 23px 22px; border-radius: 10px }
  .stage-index { margin-bottom: 24px }
  .product-name { gap: 13px; margin-bottom: 25px }
  .product-name strong { font-size: 1.7rem }
  .product-name small { font-size: .75rem; letter-spacing: .035em }
  .product-name img { width: 49px; height: 49px }
  .stage-copy h2 { font-size: 1.9rem; line-height: 1.22 }
  .stage-copy > p { max-width: 100% }
  .stage-copy > .stage-index, .stage-copy > h2 { display: none }
  .stage-copy > p { display: block; margin-bottom: 22px; }
  .stage-copy .button { width: 100%; justify-content: space-between }
  .stage-screens { margin-top: 30px; gap: 12px; align-items: center }
  .stage-main { max-width: 59%; width: 59%; flex: 1.16 }
  .stage-secondary { display: block !important; max-width: 41%; width: 41%; flex: .84; margin-top: 30px }
  .stage-caption { position: static; line-height: 1.6; margin-top: 20px; font-size: .75rem }
  .section { padding-block: 58px }
  .section-heading { margin-bottom: 29px; gap: 18px }
  .section-heading h2 { font-size: 2.2rem }
  .app-row { display: block; padding-block: 27px; margin-bottom: 22px }
  .app-row > p { margin-block: 22px 14px }
  .legal-feature { display: block; padding: 29px 24px; border-radius: 9px }
  .legal-word { font-size: clamp(3.5rem,15vw,5rem); margin-bottom: 18px }
  .legal-feature .description { padding: 24px 0 0; border-left: 0; border-top: 1px solid #49455b; margin-top: 26px }
  .legal-feature .description p { font-size: 1rem }
  .status { font-size: .875rem; margin-top: 10px; padding: 9px 10px }
  .footer { padding-top: 30px }
  .footer-top { display: block }
  .footer .brand-logo { width: 46px; height: 46px }
  .footer-links { max-width: 100%; margin-top: 28px; gap: 24px 40px }
  .footer-bottom { margin-top: 28px; font-size: .8125rem }
  .breadcrumb { margin-top: 17px }
  .product-hero { display: block; min-height: 0; padding-top: 27px; padding-bottom: 40px }
  .product-hero .product-name { margin-bottom: 27px }
  .product-hero h1 { font-size: clamp(2.65rem,11.6vw,3.8rem); line-height: 1.08 }
  .intro { font-size: 1rem; margin-bottom: 25px }
  .button { font-size: .875rem; padding: 14px 17px; gap: 20px }
  .actions { gap: 12px }
  .product-hero .hero-art { margin-top: 34px; padding: 26px; }
  .hero-board { width: min(100%,268px) }
  .hero-caption { font-size: .75rem; gap: 15px }
  .facts { display: block; padding-block: 28px }
  .fact { padding-left: 34px }
  .fact + .fact { margin-top: 28px }
  .fact p { font-size: 1rem }
  .gallery-grid { display: block }
  .screen-card { padding: 24px 20px 20px; margin-bottom: 22px }
  .screen-card figcaption { font-size: .9375rem }
  .gallery-note { margin-top: 0 }
  .pdf-section { padding-bottom: 60px }
  .pdf-panel { display: flex; flex-direction: column; gap: 34px; padding: 29px 23px }
  .pdf-copy h2 { font-size: 2.65rem }
  .pdf-preview { max-width: 220px; margin: 10px auto }
  .pdf-copy p { font-size: 1rem }
  .pdf-copy .note { font-size: .875rem }
  .legal-page { padding-top: 34px; padding-bottom: 65px }
  .legal-title-row { padding-bottom: 28px; gap: 15px }
  .legal-title-row .legal-word { font-size: clamp(4rem,17vw,6rem) }
  .legal-index { font-size: .875rem }
  .legal-intro { display: block; margin-top: 35px }
  .legal-intro h1 { font-size: clamp(2.45rem,10.8vw,3.3rem); margin-bottom: 26px }
  .legal-intro p { font-size: 1rem }
  .legal-notice { display: block; margin-top: 36px; padding: 22px }
  .legal-notice h2 { margin-bottom: 15px; font-size: 1.2rem }
  .error { padding-block: 65px }
  .error h1 { font-size: 2.8rem }
  .dialog-top p { font-size: .875rem }
  .dialog-top button { font-size: .875rem }
  .video-block { padding-bottom: 60px }
  .video-block h2 { font-size: 1.8rem }
  .youtube-player iframe { min-height: 220px }
  .video-fallback { display: block }
  .intro-skip { right: 24px; bottom: 28px }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  *, *::before, *::after { animation: none !important; transition: none !important }
  .brand-intro, .brand-intro.is-active { display: none !important; visibility: hidden !important; pointer-events: none !important }
  .hero-board:hover, .screen-link:hover, .stage-screens a:hover, .button:hover { transform: none }
}
@media (forced-colors: active) {
  .button, .screen-card, .showcase-stage, .legal-feature, .intro-skip { border: 1px solid CanvasText }
}


/* Tavemir usage, plans and support: extend the existing portal rhythm. */
.tavemir-detail{border-top:1px solid var(--line)}
.tavemir-detail h3{font-size:1.125rem;line-height:1.4;font-weight:500;margin:0 0 14px}
.tavemir-detail p{color:var(--muted);margin:0 0 20px;font-size:1rem}
.guide-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px;list-style:none;counter-reset:step;margin:0;padding:0}
.guide-steps li{counter-increment:step;min-width:0}
.guide-steps li::before{content:counter(step,decimal-leading-zero);display:block;color:var(--cyan);font-size:.875rem;margin-bottom:18px}
.tavemir-detail .detail-note{font-size:.875rem;line-height:1.7;margin:24px 0}
.backup-guide{border-left:2px solid var(--cyan);padding:8px 0 8px 28px;margin-top:36px;max-width:900px}
.detail-link{display:inline-block;color:var(--cyan);font-size:1rem;text-decoration:underline;text-underline-offset:.3em;padding:8px 0}
.plan-grid,.help-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px}
.plan-grid article{padding:32px;background:var(--surface);border:1px solid var(--line);border-radius:10px;min-width:0}
.plan-grid h3{color:var(--cyan);font-size:1.5rem}
.plan-grid ul{padding-left:21px;color:var(--muted);margin:0}
.plan-grid li{padding:4px 0}
.support-email{color:var(--ink);text-decoration:underline;text-underline-offset:.3em;overflow-wrap:anywhere}
.availability-note{border-top:1px solid var(--line);padding-top:30px;margin-top:36px}
.availability-note p{max-width:850px}
@media(max-width:800px){.guide-steps{grid-template-columns:1fr;gap:18px}.guide-steps li{padding-left:45px;position:relative}.guide-steps li::before{position:absolute;left:0;top:0}.plan-grid,.help-grid{gap:24px}.plan-grid article{padding:24px}}
@media(max-width:600px){.plan-grid,.help-grid{grid-template-columns:1fr}.backup-guide{padding-left:20px}.tavemir-detail .detail-note{font-size:.875rem}.tavemir-detail .section-heading h2{font-size:2.125rem}.support-section{padding-bottom:56px}}

/* Google Play access and official profiles match the existing brand. */
.download-panel { margin-top: 26px; max-width: 520px; padding: 23px 25px; border: 1px solid #45616c; border-radius: 10px; background: #0d1925; }
.download-title { margin: 0 0 16px; color: var(--ink); font-size: 1.125rem; line-height: 1.4; font-weight: 600; }
.download-panel .store-links { margin: 0 0 16px; }
.download-panel .button { width: 100%; }
.download-note { margin: 0; color: var(--muted); font-size: .9375rem; line-height: 1.7; }
.download-details { margin-top: 12px; border-top: 1px solid #344b59; }
.download-details summary { padding: 12px 0; min-height: 44px; color: var(--cyan); font-size: .9375rem; cursor: pointer; }
.download-details summary:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }
.download-details[open] summary { margin-bottom: 2px; }
.download-options { display: flex; flex-wrap: wrap; gap: 4px 26px; margin-top: 13px; }
.download-options a { color: var(--cyan); display: inline-flex; align-items: center; min-height: 44px; font-size: .9375rem; text-decoration: underline; text-underline-offset: 5px; }
.stage-copy .download-panel { padding: 20px; }
.stage-copy .download-panel .button.primary { background: var(--cyan); border-color: var(--cyan); color: #092023; }
.official-accounts { margin-top: 25px; max-width: 350px; }
.official-accounts p { margin: 0 0 8px; font-size: .875rem; color: var(--ink); }
.official-accounts ul { list-style: none; display: flex; flex-wrap: wrap; gap: 3px 20px; padding: 0; margin: 0; }
.official-accounts a { display: inline-flex; align-items: center; min-height: 44px; font-size: .9375rem; color: var(--muted); }
@media (max-width: 700px) { .download-panel { padding: 20px; width: 100%; max-width: none; } .download-options { column-gap: 22px; } }

/* Shared brand and support: generous typography, a focused working surface. */
.header { flex-wrap: wrap; gap: 16px 32px; }
.nav > a, .languages a { min-height: 44px; }
.nav { font-size: .9375rem; }
.footer-links { max-width: 66%; gap: 28px 42px; }
.footer-links > div { min-width: 0; }
.footer-links strong a { color: var(--ink); padding-top: 0; }
.brand-hero { padding-block: 64px 52px; }
.brand-heading { display: grid; grid-template-columns: 1.4fr 1fr; gap: 64px; align-items: end; }
.brand-heading > *, .support-workspace > *, .brand-story > *, .brand-bridge > * { min-width: 0; }
.brand-heading h1 { font-size: clamp(2.8rem,5.3vw,4.8rem); line-height: 1.09; margin: 0; }
.brand-lead p, .support-lead { color: var(--muted); font-size: 1.125rem; max-width: 580px; margin: 0 0 26px; }
.support-lead { margin: 26px 0 0; }
.brand-story { display: grid; grid-template-columns: .75fr 1.25fr; gap: 88px; padding-block: 48px 76px; border-top: 1px solid var(--line); }
.brand-story h2, .brand-contact h2, .brand-bridge h2, .support-context h2 { font-size: clamp(1.9rem,3.2vw,3rem); font-weight: 400; letter-spacing: -.04em; line-height: 1.2; margin: 0 0 24px; }
.brand-story p, .brand-contact p, .brand-bridge p { color: var(--muted); max-width: 650px; }
.brand-signature { padding: 36px; border: 1px solid var(--line); border-radius: 12px; background: linear-gradient(140deg,#101e2d,#121725); align-self: start; text-align: center; }
.brand-signature img { width: 144px; margin: auto; }
.brand-signature span { display: block; font-size: 2.4rem; letter-spacing: -.05em; margin-top: 20px; }
.brand-signature p { font-size: 1rem; margin: 12px 0 0; }
.brand-principles { border-top: 1px solid var(--line); }
.principle-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 40px; }
.principle-grid article { min-width: 0; border-top: 1px solid #52647b; padding-top: 24px; }
.principle-index { color: var(--cyan); font-size: .875rem; }
.principle-grid h3 { font-size: 1.35rem; line-height: 1.4; font-weight: 500; margin: 20px 0 14px; }
.principle-grid p { color: var(--muted); margin: 0; }
.brand-portfolio { padding-top: 16px; }
.resource-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
.resource-card { padding: 32px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); min-width: 0; }
.resource-card .eyebrow { margin-bottom: 14px; font-size: .875rem; }
.resource-card h3 { font-size: 1.75rem; font-weight: 500; line-height: 1.3; letter-spacing: -.04em; margin: 0 0 14px; }
.resource-card p { color: var(--muted); }
.resource-links { display: flex; flex-wrap: wrap; gap: 4px 24px; margin-top: 24px; }
.resource-links a { color: var(--cyan); font-size: .9375rem; text-decoration: underline; text-underline-offset: 5px; padding-block: 8px; min-height: 44px; }
.brand-contact { display: flex; align-items: center; justify-content: space-between; gap: 40px; border-top: 1px solid var(--line); padding-block: 48px 76px; }
.brand-contact h2 { margin-bottom: 18px; }
.brand-contact p { margin-bottom: 0; }
.brand-contact > .button { flex-shrink: 0; }
.brand-bridge { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; border-top: 1px solid var(--line); padding-block: 58px 76px; }
.brand-bridge h2 { font-size: 2rem; margin-bottom: 20px; }
.bridge-contact { border-left: 1px solid var(--line); padding-left: 64px; }
.contact-card { background: #122030; border: 1px solid #3b5266; padding: 26px 30px; border-radius: 10px; }
.contact-card > span { color: var(--cyan); font-size: .875rem; letter-spacing: .06em; }
.contact-address { display: block; font-size: clamp(1.05rem,1.7vw,1.4rem); line-height: 1.6; overflow-wrap: anywhere; margin-top: 14px; text-decoration: underline; text-underline-offset: 5px; }
.contact-card p { color: var(--muted); margin: 16px 0 0; }
.support-workspace { display: grid; grid-template-columns: .78fr 1.22fr; gap: 64px; border-top: 1px solid var(--line); padding-block: 52px 16px; }
.support-context > p { color: var(--muted); }
.support-context .eyebrow { color: var(--cyan); }
.request-steps { list-style: none; margin: 30px 0 0; padding: 0; counter-reset: request; }
.request-steps li { counter-increment: request; position: relative; padding-left: 40px; margin-bottom: 24px; }
.request-steps li::before { content: counter(request,decimal-leading-zero); position: absolute; left: 0; color: var(--cyan); font-size: .875rem; }
.request-steps strong { display: block; font-size: 1rem; font-weight: 500; }
.request-steps span { display: block; color: var(--muted); margin-top: 6px; }
.support-safety { margin-top: 32px; border-left: 2px solid var(--gold); padding: 2px 0 2px 20px; }
.support-safety h3 { font-size: 1.0625rem; font-weight: 500; margin: 0 0 10px; }
.support-safety p { color: var(--muted); margin: 0; font-size: .9375rem; }
.composer-panel { padding: 32px; border: 1px solid #3a4b60; border-radius: 12px; background: #101a28; }
.form-row { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
.field { min-width: 0; margin-bottom: 22px; }
.field label, .draft-panel label { display: block; font-size: .9375rem; font-weight: 500; margin-bottom: 9px; }
.field label span { color: var(--muted); font-weight: 400; margin-left: 6px; }
.field input, .field select, .field textarea, .draft-panel textarea { display: block; width: 100%; min-width: 0; border: 1px solid #647b94; border-radius: 6px; background: #080f1a; color: var(--ink); font: inherit; font-size: 1rem; line-height: 1.5; padding: 13px 14px; min-height: 50px; }
.field select { appearance: auto; }
.field textarea, .draft-panel textarea { resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: #9baabe; opacity: 1; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible, .draft-panel textarea:focus-visible, summary:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; }
.field-hint, .composer-notice { font-size: .9375rem; line-height: 1.7; color: var(--muted); margin: 10px 0 0; }
.composer-notice { margin-bottom: 22px; }
.form-instructions { color: var(--muted); font-size: .9375rem; margin: 0 0 24px; }
.draft-transfer-note { padding: 14px 16px; border-left: 3px solid var(--gold); background: #221f19; color: var(--ink); }
.composer-panel .button { font-size: .9375rem; }
.composer-panel .actions { gap: 12px; }
.draft-panel { margin-top: 30px; padding-top: 28px; border-top: 1px solid #465970; }
.draft-panel h3 { font-size: 1.25rem; font-weight: 500; margin: 0 0 12px; }
.draft-panel > p { color: var(--muted); font-size: .9375rem; }
.draft-panel .actions { margin-top: 20px; }
.composer-status { font-size: .9375rem; color: var(--cyan); margin: 20px 0 0; }
.composer-status:empty { margin: 0; }
.composer-fallback { border-top: 1px solid var(--line); margin-top: 26px; padding-top: 18px; }
.composer-fallback p { color: var(--muted); font-size: .9375rem; margin: 0 0 8px; }
.composer-fallback .support-email { font-size: .9375rem; }
.support-resources { padding-top: 68px; }
.support-faq { padding-top: 8px; }
.faq-list { border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { padding: 24px 4px; font-size: 1.125rem; line-height: 1.6; cursor: pointer; }
.faq-list details[open] summary { color: var(--cyan); }
.faq-list p { max-width: 850px; color: var(--muted); font-size: 1rem; margin: 0 24px 26px; }
@media (max-width: 1000px) {
  .brand-heading, .support-workspace, .brand-story { gap: 36px; }
  .brand-heading { grid-template-columns: 1.2fr 1fr; }
  .support-workspace { grid-template-columns: .8fr 1.2fr; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .composer-panel { padding: 26px; }
  .brand-bridge { gap: 40px; }
  .bridge-contact { padding-left: 40px; }
}
@media (max-width: 800px) {
  .brand-heading, .support-workspace { grid-template-columns: 1fr; }
  .brand-hero { padding-block: 42px 40px; }
  .brand-heading { gap: 30px; }
  .brand-lead p { font-size: 1.0625rem; }
  .support-workspace { padding-top: 36px; }
  .support-context > p { max-width: 600px; }
  .request-steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; }
  .request-steps li { padding-left: 0; padding-top: 30px; margin-bottom: 0; }
  .request-steps li::before { top: 0; }
  .form-row { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
  .brand-story { grid-template-columns: .7fr 1fr; gap: 32px; }
  .brand-signature { padding: 28px 20px; }
  .brand-signature img { width: 120px; }
  .principle-grid { gap: 24px; }
  .brand-contact { flex-wrap: wrap; }
  .footer-links { max-width: 100%; }
}
@media (max-width: 600px) {
  .nav { gap: 6px 20px; }
  .nav > a, .languages a { min-height: 44px; }
  .brand-heading h1 { font-size: clamp(2.5rem,10vw,3.5rem); }
  .brand-story, .principle-grid, .resource-grid, .brand-bridge { grid-template-columns: 1fr; }
  .brand-story { padding-block: 30px 44px; }
  .brand-signature { padding: 28px; }
  .brand-signature img { width: 112px; }
  .brand-signature span { font-size: clamp(1.5rem,8vw,2rem); overflow-wrap: anywhere; }
  .brand-contact { padding-block: 36px 52px; gap: 24px; }
  .brand-bridge { padding-block: 40px 54px; gap: 36px; }
  .bridge-contact { padding: 32px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .contact-card, .composer-panel, .resource-card { padding: 24px; }
  .contact-address { font-size: 1.0625rem; }
  .support-lead { font-size: 1rem; }
  .request-steps { display: block; }
  .request-steps li { padding: 0 0 0 40px; margin-bottom: 20px; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .composer-panel .actions { align-items: stretch; flex-direction: column; }
  .composer-panel .button { width: 100%; }
  .support-resources { padding-top: 50px; }
  .faq-list summary { font-size: 1rem; padding-block: 20px; }
  .faq-list p { margin-inline: 4px; }
  .footer-links { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; }
  .footer-links > div:first-child { grid-column: 1 / -1; }
}