@font-face { font-family: Manrope; src: url('/assets/fonts/manrope-latin.woff2') format('woff2'); font-style: normal; font-weight: 400 800; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url('/assets/fonts/dm-sans-latin.woff2') format('woff2'); font-style: normal; font-weight: 400 700; font-display: swap; }
:root { color-scheme: dark; --bg:#080c12; --surface:#161617; --ink:#f5f5f7; --muted:#b1b1b6; --line:#424245; --cyan:#74d5e2; --green:#8dd8b0; --orange:#ffc08d; --violet:#cbb6ff; --coral:#ffafa5; --link:#69b5ff; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:var(--site-header-height, 5rem); }
body { margin:0; background:var(--bg); color:var(--ink); font-family:'DM Sans',system-ui,sans-serif; line-height:1.55; }
a { color:inherit; text-decoration-thickness:1px; text-underline-offset:.22em; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline:3px solid var(--focus, #147bd1); outline-offset:4px; }
img { display:block; max-width:100%; height:auto; }
h1,h2,h3 { font-family:Manrope,system-ui,sans-serif; font-weight:600; line-height:1.09; letter-spacing:-.045em; margin:0 0 1rem; }
h1 { font-size:clamp(3rem,6.5vw,6rem); }
h2 { font-size:clamp(2.4rem,4.5vw,4.4rem); }
h3 { font-size:clamp(1.4rem,2vw,2rem); }
p { color:var(--muted); margin:0 0 1.3rem; }
.wrap { width:min(100% - 3rem,1200px); margin-inline:auto; }
.skip { position:absolute; top:-5rem; left:1rem; z-index:30; background:var(--bg); padding:1rem; }
.skip:focus { top:1rem; }
.site-header { position:sticky; top:0; z-index:20; border-bottom:1px solid var(--line); background:rgba(8,12,18,.94); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); }
.nav { min-height:76px; display:flex; align-items:center; justify-content:space-between; gap:2rem; }
.brand { display:inline-flex; align-items:center; gap:.65rem; min-height:24px; font-family:Manrope,sans-serif; font-weight:700; text-decoration:none; letter-spacing:-.03em; }
.brand img { width:36px; border-radius:8px; }
.nav-links { display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap; font-size:.87rem; font-weight:600; }
.nav-links a,.footer nav a,.support-email,.back { display:inline-flex; align-items:center; min-height:24px; }
.lead { font-size:clamp(1.12rem,1.7vw,1.35rem); line-height:1.5; max-width:45rem; }
.buttons { display:flex; align-items:center; flex-wrap:wrap; gap:1.4rem; margin:2rem 0; }
.app-store-badge-link { display:inline-flex; width:fit-content; }
.app-store-badge-link img { width:auto; height:48px; }
.hero { background:var(--surface); text-align:center; }
.hero h1 { max-width:14ch; margin:0 auto 1.5rem; }
.hero .lead { margin-inline:auto; }
.hero .buttons { justify-content:center; }
.hero-art { width:min(100%,400px); margin:3.5rem auto 1rem; }
.hero-art img,.feature-layout figure img { width:100%; }
.hero .fine { padding-bottom:3rem; }
.section { padding-block:clamp(5rem,9vw,9rem); }
.section-head { max-width:800px; margin-bottom:3.5rem; }
.section-head p:last-child { max-width:44rem; font-size:1.1rem; }
figcaption { margin-top:.8rem; color:var(--muted); font-size:.8rem; line-height:1.4; }
.privacy-section,.end,.feature-section { background:var(--surface); }
.split { display:grid; grid-template-columns:1fr 1fr; gap:clamp(3rem,8vw,8rem); }
.split h2 { max-width:12ch; }
.stack p { font-size:1.1rem; }
.stack h3 { margin-top:3rem; }
.article-list { border-top:1px solid var(--line); }
.article-card { display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:2rem; align-items:center; padding:1.8rem 0; border-bottom:1px solid var(--line); text-decoration:none; }
.article-card h3 { margin:0; }
.article-card h3 { font-size:clamp(1.3rem,2vw,1.8rem); }
.article-card:hover h3 { text-decoration:underline; }
.article-arrow { font-size:1.4rem; }
.faq details { border-top:1px solid var(--line); padding:1.4rem 0; }
.faq summary { cursor:pointer; font-weight:600; }
.faq p { margin:1rem 0 0; }
.support-links { display:flex; flex-wrap:wrap; gap:1.5rem; }
.footer { border-top:1px solid var(--line); padding:3rem 0; }
.footer .wrap { display:flex; justify-content:space-between; gap:2rem; flex-wrap:wrap; }
.footer nav { display:flex; flex-wrap:wrap; gap:1.5rem; }
.fine { font-size:.85rem; }
.page-hero { padding:clamp(5rem,9vw,9rem) 0 4rem; }
.page-hero h1 { font-size:clamp(3rem,5.5vw,5.2rem); max-width:16ch; }
.feature-layout { display:grid; grid-template-columns:1fr minmax(240px,380px); gap:clamp(3rem,8vw,8rem); align-items:center; }
.feature-layout figure { width:100%; }
.prose { max-width:720px; font-size:1.08rem; }
.prose h2 { font-size:clamp(1.9rem,3vw,2.8rem); margin:3.5rem 0 1rem; }
.prose p { line-height:1.78; }
.feature-index { display:flex; gap:.75rem 1.3rem; flex-wrap:wrap; margin-top:2rem; }
.feature-index a { min-height:44px; display:inline-flex; align-items:center; }
@media (max-width:700px) {
  html { scroll-padding-top:var(--site-header-height, 12rem); }
  .wrap { width:min(100% - 2rem,1200px); }
  .nav { padding:1rem 0; align-items:flex-start; flex-direction:column; gap:.7rem; }
  .nav-links { gap:.8rem; font-size:.8rem; }
  .split,.feature-layout { grid-template-columns:1fr; }
  .feature-layout figure { max-width:320px; }
  .article-card { grid-template-columns:1fr auto; gap:.6rem 1rem; }
  .support-email { overflow-wrap:anywhere; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }
/* Navigation and content links */
.nav { min-height: 60px; }
.brand img { width: 28px; }
.nav-links { font-weight: 500; }
.nav-links a { text-decoration: none; }
.nav-links a:hover { text-decoration: underline; }
.hero .buttons > a:not(.app-store-badge-link),
.story-copy > a,
.stack > a,
.section .buttons > a:not(.app-store-badge-link),
.support-links a,
.prose a,
.back,
.support-email { color: var(--link); text-decoration: none; }
.hero .buttons > a:not(.app-store-badge-link):hover,
.story-copy > a:hover,
.stack > a:hover,
.section .buttons > a:not(.app-store-badge-link):hover,
.support-links a:hover,
.prose a:hover,
.back:hover,
.support-email:hover { text-decoration: underline; }

/* The stage and its image have the same vertical bounds. Each gradient extends
   the measured edges of the approved composition without changing its pixels. */
.tone-teal {
  --stage-top: #112d35;
  --stage-bottom: #031218;
  --stage-gradient: linear-gradient(to bottom, #112d35 0%, #0f272f 25%, #0f252c 50%, #07181e 75%, #031218 100%);
}
.tone-amber {
  --stage-top: #49310e;
  --stage-bottom: #160c02;
  --stage-gradient: linear-gradient(to bottom, #49310e 0%, #3e2a0c 25%, #36250d 50%, #241704 75%, #160c02 100%);
}
.tone-plum {
  --stage-top: #2e183d;
  --stage-bottom: #0e0617;
  --stage-gradient: linear-gradient(to bottom, #2e183d 0%, #261634 25%, #241630 50%, #160c22 75%, #0e0617 100%);
}
.tone-blue-teal {
  --stage-top: #15313a;
  --stage-bottom: #031218;
  --stage-gradient: linear-gradient(to bottom, #15313a 0%, #132a32 25%, #12282e 50%, #081a1f 75%, #031218 100%);
}
.tone-rust {
  --stage-top: #3a1c12;
  --stage-bottom: #160905;
  --stage-gradient: linear-gradient(to bottom, #3a1c12 0%, #311a0f 25%, #2e1812 50%, #1f0e09 75%, #160905 100%);
}
.media-stage {
  display: flex;
  justify-content: center;
  background: var(--stage-gradient);
}
.media-stage img {
  display: block;
  width: min(100%, 340px);
  height: auto;
  border-radius: 0;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.hero {
  --focus: #a5d8ff;
  background: var(--stage-top);
  color: #f5f5f7;
}
.hero .lead { color: #d1e0e2; }
.hero .buttons > a:not(.app-store-badge-link) { color: #a5d8ff; }
.feature-layout figure { max-width: none; }
.feature-layout figure img { border-radius: 0; }
.feature-story { --focus: #a5d8ff; color: #f5f5f7; }
.story-copy h2 { font-size: clamp(2.2rem, 4vw, 4rem); }
.story-copy p { color: #e0e0e4; font-size: 1.12rem; }
.story-copy > a { color: #a5d8ff; }

/* Guide text sits above and below the image-matched stage, never over it. */
.guide-article { --focus: #a5d8ff; color: #f5f5f7; background: var(--stage-top); }
.guide-reading { width: min(100% - 3rem, 45rem); margin-inline: auto; }
.guide-intro { padding: clamp(3.5rem, 6vw, 5rem) 0 3rem; }
.guide-intro h1 { font-size: clamp(2.5rem, 5vw, 3.5rem); max-width: 24ch; margin-bottom: 1.4rem; }
.guide-lead, .guide-copy p { color: #e0e0e4; font-size: 1.125rem; line-height: 1.65; }
.guide-lead { font-weight: 600; }
.guide-copy p:last-child { margin-bottom: 0; }
.guide-figure { margin: 0; }
.guide-figure .media-stage img { width: min(100%, 340px); border-radius: 0; }
.guide-figure figcaption { margin: 0; padding: 1rem 1.5rem 0; text-align: center; background: var(--stage-bottom); color: #d2d2d7; }
.guide-footer { background: var(--stage-bottom); padding: 2rem 0 4rem; }
.guide-footer p, .guide-footer li { color: #e0e0e4; font-size: 1rem; line-height: 1.65; }
.guide-footer h2 { font-size: 1.25rem; letter-spacing: -.02em; margin: 2rem 0 .75rem; }
.guide-footer ul { padding-left: 1.2rem; margin-bottom: 2rem; }
.guide-footer a:not(.app-store-badge-link), .guide-intro .back { color: #a5d8ff; }
.guide-footer .app-store-badge-link { margin-top: 1rem; }
@media (max-width: 700px) { .guide-reading { width: min(100% - 2rem, 45rem); } }

/* Copy and full-width media share a grid row; the row grows for long copy. */
.hero, .feature-story {
  --pair-gap: clamp(2rem, 4vw, 4rem);
  --media-width: clamp(260px, 34vw, 340px);
  --content-width: min(1200px, calc(100% - 4rem));
  --column-width: calc(var(--content-width) / 2);
  --media-gutter: calc(50% - var(--content-width) / 4 - var(--media-width) / 2);
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--column-width) var(--column-width) minmax(0, 1fr);
  background: var(--stage-bottom);
  color: #f5f5f7;
}
.hero { --media-width: clamp(260px, 36vw, 400px); --hero-media-width: var(--media-width); text-align: left; }
.hero-art, .story-media { grid-column: 1 / -1; grid-row: 1; align-self: start; width: 100%; margin: 0; }
.hero-art { background: var(--stage-bottom); }
.hero-copy, .story-copy { grid-row: 1; align-self: center; position: relative; z-index: 2; margin-block: 2rem; }
.hero-copy { width: min(calc(100% - var(--pair-gap) / 2), 30rem); }
.story-copy { width: min(calc(100% - var(--pair-gap) / 2), 28rem); }
.media-left .hero-copy, .media-left .story-copy { grid-column: 3; justify-self: start; margin-left: calc(var(--pair-gap) / 2); margin-right: 0; }
.media-right .hero-copy, .media-right .story-copy { grid-column: 2; justify-self: end; margin-left: 0; margin-right: calc(var(--pair-gap) / 2); }
.hero-copy h1 { font-size: clamp(2.2rem, 5vw, 4.7rem); margin-inline: 0; }
.hero-copy .lead { margin-inline: 0; }
.hero-copy .buttons { justify-content: flex-start; }
.hero-art .media-stage img { width: var(--hero-media-width); }
.story-media .media-stage img { width: var(--media-width); }
.media-left .media-stage { justify-content: flex-start; padding-left: var(--media-gutter); }
.media-right .media-stage { justify-content: flex-end; padding-right: var(--media-gutter); }
.worldwide-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(1rem, 3vw, 3rem);
  padding-block: clamp(4rem, 7vw, 7rem);
}
.worldwide-copy { position: relative; z-index: 1; max-width: 32rem; }
.worldwide-copy p { font-size: 1.12rem; }
.worldwide-copy .app-store-badge-link { margin-top: .75rem; }
.flask-visual { min-width: 0; margin: 0; }
.flask-caption { margin: 12px 0 0; color: var(--muted); font-size: 12px; line-height: 1.35; letter-spacing: .02em; text-align: center; }
.flask-scene { position: relative; width: 100%; aspect-ratio: 1; isolation: isolate; }
.flask-anchor { position: absolute; inset: 0; }
.flask-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 0; }
.footer { position: relative; z-index: 2; background: var(--bg); }
.hero-art, main > :not(.hero):not(.worldwide) { position: relative; z-index: 1; }
.flask-canvas[hidden] { display: none; }
.flask-fallback { position: absolute; left: 50%; top: 50%; width: 36%; transform: translate(-50%, -50%); border-radius: 22%; }
.flask-motion-control {
  position: absolute;
  bottom: 0;
  left: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: rgba(209, 224, 226, .45);
  font: inherit;
  font-size: .8rem;
  cursor: pointer;
}
.flask-motion-control::before {
  content: "";
  box-sizing: border-box;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 22px;
  height: 22px;
  transform: translate(-50%, -50%);
  border: 1px solid currentColor;
  border-radius: 50%;
  pointer-events: none;
}
.flask-motion-control[hidden] { display: none; }
.flask-motion-control svg { display: block; width: 10px; height: 10px; }
.flask-motion-control .motion-icon-play,
.flask-motion-control[aria-pressed="true"] .motion-icon-pause { display: none; }
.flask-motion-control[aria-pressed="true"] .motion-icon-play { display: block; }
@media (max-width: 700px) {
  .hero, .feature-story { grid-template-columns: minmax(0, 1fr); }
  .hero-art, .story-media, .hero-copy, .story-copy,
  .media-left .hero-copy, .media-left .story-copy, .media-right .hero-copy, .media-right .story-copy {
    grid-column: 1;
    grid-row: auto;
    width: auto;
    margin: 0;
    justify-self: stretch;
  }
  .hero-copy, .story-copy { max-width: none; padding: 2.5rem 2rem; }
  .media-left .hero-copy, .media-left .story-copy { background: var(--stage-bottom); }
  .media-right .hero-copy, .media-right .story-copy { background: var(--stage-top); }
  .hero-art .media-stage, .story-media .media-stage { justify-content: center; padding: 0; }
  .hero-art .media-stage img { width: min(100%, 340px); }
  .story-media .media-stage img { width: min(100%, 300px); }
  .worldwide-grid { grid-template-columns: 1fr; gap: 1rem; }
  .flask-visual { width: 100%; max-width: 440px; justify-self: center; }
}
@media (min-width: 701px) and (max-width: 900px) { html { scroll-padding-top:var(--site-header-height, 8.5rem); } }
@media (prefers-reduced-motion: reduce) { .flask-motion-control { display: none; } }
/* Studio navigation is shared across the product and its legal pages. */
.nav-links a, .footer nav a, .support-email { min-height: 44px; }
.footer-links { display: flex; flex-direction: column; gap: .5rem; }
.footer .social-links { gap: 1.5rem; }


/* Desktop and tablet stories fill the viewport below the measured header. */
:root { --viewport-height: 100vh; }
@supports (height: 100dvh) {
  :root { --viewport-height: 100dvh; }
}
@media (min-width: 701px) {
  .hero, .feature-story, .worldwide {
    --slide-height: calc(var(--viewport-height) - var(--site-header-height, 61px));
    min-height: var(--slide-height);
  }
  .feature-story {
    --media-width: min(420px, calc(var(--slide-height) * 1320 / 2868), calc(50vw - var(--pair-gap) / 2 - 2rem));
  }
  .hero {
    --media-width: min(440px, calc(var(--slide-height) * 1320 / 2868), calc(50vw - var(--pair-gap) / 2 - 2rem));
    --hero-media-width: var(--media-width);
  }
  .worldwide-grid {
    min-height: var(--slide-height);
    padding-block: 1.5rem;
  }
  .worldwide-grid .flask-visual {
    width: min(100%, calc(var(--slide-height) - 3rem - 3.5rem));
    justify-self: center;
  }
}

.page-hero .back, .guide-intro .back { margin-bottom: 1.5rem; }