/* Inter — self-hosted SF-Pro-equivalent for non-Apple devices. Apple keeps
   SF Pro via -apple-system (first in every stack); Windows/PC gets Inter
   instead of falling through to heavy Arial (which has no light weight, so the
   ultra-light headings rendered bold). A web @font-face is only downloaded when
   actually used, so Macs never fetch it. Variable font, weights 100-900. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-var.woff2') format('woff2');
}

/* Official Microsoft Store badge (static SVG: white for dark surfaces,
   black for light). A clean image link like the Mac App Store badge — no pill
   or border framing around the official art. */
.ms-badge { display: inline-flex; }
.ms-badge img { display: block; height: 36px; width: auto; }
footer .ms-badge { display: block; opacity: 0.5; transition: opacity 0.18s ease; }
footer .ms-badge:hover { opacity: 0.8; }
/* Platform-conditional atoms. Both variants ship in the HTML; one is hidden.
   Added for the Windows launch — used by /get, /faq, / and the press kit. */
[data-os='win'] .os-mac { display: none; }
[data-os='mac'] .os-win { display: none; }

/* ═══════════════════════════════════════════════════════════════════
   TANSEI EDITORIAL — shared base for secondary pages (FAQ, Privacy,
   Terms; more as the reskin proceeds). The homepage carries its own
   inline copy of these tokens — change both in lockstep.
   Old pages keep base.css until they are reskinned; this file replaces
   it page-by-page.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --accent: #d92e76;
  --accent-fill: #d92e76;
  --bg: #ffffff;
  --ink: #10141c;
  --ink2: #4a4a52;
  --ink3: #66666e;
  --idx: #6c6c75;
  --cell: rgba(0, 0, 0, 0.1);
  --chip-border: rgba(0, 0, 0, 0.14);
  --chip-ink: #4a4a52;
  --pill-bg: #10141c;
  --pill-ink: #ffffff;
  --field: rgba(0, 0, 0, 0.18);
  --footwrap: #0e0e10;
  --navbar-bg: rgba(255, 255, 255, 0.82);
  --navbar-border: rgba(0, 0, 0, 0.06);
  --outline: rgba(16, 20, 28, 0.22);
  --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
}
[data-theme='dark'] {
  --accent: #f4629f;
  --accent-fill: #d92e76;
  --bg: #0e0e10;
  --ink: #f5f5f7;
  --ink2: #a1a1a6;
  --ink3: #8d8d93;
  --idx: #85858d;
  --cell: rgba(255, 255, 255, 0.14);
  --chip-border: rgba(255, 255, 255, 0.2);
  --chip-ink: #a1a1a6;
  --pill-bg: #f5f5f7;
  --pill-ink: #0e0e10;
  --field: rgba(255, 255, 255, 0.24);
  --footwrap: #08080a;
  --navbar-bg: rgba(14, 14, 16, 0.82);
  --navbar-border: rgba(255, 255, 255, 0.1);
  --outline: rgba(255, 255, 255, 0.28);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  /* Full-bleed at every width and zoom: the page fills the window edge to edge,
     so it never shrinks to a centered block with empty side margins. Readable
     columns cap themselves (.wrap / .page-inner at 1440px), so nothing sprawls
     on wide screens. */
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
a { color: var(--accent); text-decoration: none; transition: opacity 0.18s ease; }
a:hover { opacity: 0.7; }
::selection { background: #d92e76; color: #fff; }
img { max-width: 100%; }
h1, h2, h3 { margin: 0; }

.wrap { max-width: 1440px; margin: 0 auto; padding: 0 40px; }
.eyebrow, .page-eyebrow {
  display: block;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--ink3);
}
.skip-link {
  position: absolute; left: 8px; top: 8px; z-index: 200;
  background: var(--ink); color: var(--bg);
  padding: 10px 18px; border-radius: 99px; font-size: 14px;
  transform: translateY(-64px); opacity: 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.skip-link:focus { transform: none; opacity: 1; }

/* ── Nav (homepage pattern) ───────────────────────────────────────── */
nav {
  position: sticky; top: 0; z-index: 100;
  background: var(--navbar-bg);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--navbar-border);
}
.nav-inner { height: 78px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.brand-wordmark { display: flex; align-items: center; gap: 10px; color: var(--ink); font-size: 18px; font-weight: 500; letter-spacing: -0.02em; }
.brand-wordmark img { border-radius: 7px; display: block; }
.nav-links { display: flex; align-items: center; justify-content: center; gap: 38px; }
.nav-links a { font-size: 15px; font-weight: 400; letter-spacing: -0.012em; color: var(--ink); }
.nav-right { display: flex; align-items: center; justify-content: flex-end; gap: 14px; }
.theme-toggle {
  appearance: none; cursor: pointer;
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--outline); background: transparent; color: var(--ink);
  display: grid; place-items: center; padding: 0;
  transition: opacity 0.18s ease;
}
.theme-toggle:hover { opacity: 0.7; }
.theme-toggle .sun, .theme-toggle .moon { grid-area: 1 / 1; display: grid; place-items: center; }
.theme-toggle .moon { display: none; }
[data-theme='dark'] .theme-toggle .sun { display: none; }
[data-theme='dark'] .theme-toggle .moon { display: grid; }
.nav-dl { display: inline-flex; align-items: center; height: 40px; font-size: 15px; font-weight: 400; letter-spacing: -0.012em; color: var(--ink); }
.nav-menu-btn {
  display: none;
  appearance: none; cursor: pointer;
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--outline); background: transparent; color: var(--ink);
  place-items: center; padding: 0;
}
.nav-menu-btn .nm-x { display: none; }
.nav-menu-btn .nm-x, .nav-menu-btn .nm-bars { grid-area: 1 / 1; }
.nav-open .nav-menu-btn .nm-bars { display: none; }
.nav-open .nav-menu-btn .nm-x { display: block; }
.nav-sheet {
  display: none;
  overflow: hidden; max-height: 0;
  transition: max-height 0.36s cubic-bezier(0.2, 0.7, 0.25, 1);
  background: var(--bg);
  border-bottom: 1px solid transparent;
}
.nav-open .nav-sheet { max-height: 320px; border-bottom-color: var(--navbar-border); }
.nav-sheet a {
  display: block; padding: 15px 0;
  font-size: 19px; font-weight: 400; letter-spacing: -0.02em; color: var(--ink);
  border-bottom: 1px solid var(--cell);
}
.nav-sheet a:last-child { border-bottom: 0; }

/* ── Page scaffold ────────────────────────────────────────────────── */
.page { padding: 96px 40px 0; }
.page-inner { max-width: 1440px; margin: 0 auto; }
.masthead { display: flex; align-items: flex-end; justify-content: space-between; gap: 48px; flex-wrap: wrap; }
.masthead h1 {
  margin: 24px 0 0;
  font-size: clamp(52px, 6.6vw, 96px); font-weight: 200; letter-spacing: -0.048em; line-height: 0.94;
  color: var(--ink);
}
.masthead .stand { max-width: 32ch; padding-bottom: 12px; }
.masthead .stand p { margin: 0; font-size: 19px; font-weight: 300; letter-spacing: -0.012em; line-height: 1.5; color: var(--ink3); text-wrap: pretty; }
.masthead .updated {
  margin: 14px 0 0;
  font-family: var(--mono); font-size: 10.5px; font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--idx);
}

/* ── Numbered ruled table (Privacy / Terms) ───────────────────────── */
.pv-panel { margin-top: 90px; }
.pv-row {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px 56px;
  padding: 34px 0;
  align-items: start;
  border-top: 1px solid var(--cell);
}
.pv-row:last-child { border-bottom: 1px solid var(--cell); }
.pv-rail { display: contents; }
.pv-num {
  display: block;
  font-family: var(--mono); font-size: 10.5px; font-weight: 400; letter-spacing: 0.2em;
  color: var(--accent);
  padding-top: 10px;
}
.pv-row h2 {
  margin: 0; max-width: 16ch;
  font-size: clamp(26px, 2.4vw, 34px); font-weight: 200; letter-spacing: -0.032em; line-height: 1.08;
  color: var(--ink);
}
.pv-body { max-width: 52ch; }
.pv-body p { margin: 0 0 14px; font-size: 17px; font-weight: 300; line-height: 1.6; color: var(--ink3); }
.pv-body p:first-child { font-size: 19px; line-height: 1.55; color: var(--ink); }
.pv-body p:last-child { margin-bottom: 0; }
.pv-body a { color: var(--accent); }

/* ── FAQ ──────────────────────────────────────────────────────────── */
.faq-section {
  display: grid; grid-template-columns: 300px 1fr; gap: 80px;
  align-items: start;
  margin-top: 90px;
}
.faq-aside { position: sticky; top: 170px; }
.faq-aside .faq-idx {
  display: block;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.2em;
  color: var(--accent);
}
.faq-aside h2 {
  margin: 16px 0 0; max-width: 12ch;
  font-size: clamp(34px, 3vw, 44px); font-weight: 200; letter-spacing: -0.036em; line-height: 1.02;
  color: var(--ink);
}
.faq-aside p { margin: 16px 0 0; max-width: 26ch; font-size: 16.5px; font-weight: 300; line-height: 1.55; color: var(--ink3); }
.faq-item { padding: 26px 0; border-top: 1px solid var(--cell); }
.faq-item:last-child { border-bottom: 1px solid var(--cell); }
.faq-item h3 {
  margin: 0; max-width: 34ch;
  font-size: clamp(21px, 1.9vw, 26px); font-weight: 200; letter-spacing: -0.028em; line-height: 1.16;
  color: var(--ink);
}
.faq-item p { margin: 14px 0 0; max-width: 60ch; font-size: 17px; font-weight: 300; line-height: 1.6; color: var(--ink3); }
.faq-item a { color: var(--accent); }
/* Closing band: full-bleed brand grey sitting flush on the footer, so the
   page ends on a block rather than a hairline and a gap. It lives OUTSIDE
   .page-inner in the markup — a `100vw` breakout would overflow by the
   scrollbar's width. Its copy re-aligns to the site's 1440px measure. */
.faq-close { padding: 96px 40px 104px; background: #eef1f6; }
.faq-close-inner { max-width: 1440px; margin: 0 auto; }
[data-theme='dark'] .faq-close { background: #17171a; }
.faq-close + footer { margin-top: 0; }
.faq-close h2 {
  margin: 0;
  font-size: clamp(44px, 5vw, 72px); font-weight: 200; letter-spacing: -0.046em; line-height: 0.98;
  color: var(--ink);
}
.faq-close p { margin: 18px 0 0; max-width: 44ch; font-size: 19px; font-weight: 300; line-height: 1.5; color: var(--ink3); }
.btn-pill {
  display: inline-flex; align-items: center; gap: 10px;
  height: 56px; padding: 0 32px; border-radius: 99px; margin-top: 30px;
  background: var(--pill-bg); color: var(--pill-ink);
  font-size: 17px; font-weight: 500; letter-spacing: -0.012em;
}
.btn-pill:hover { opacity: 0.86; }

.page-end { padding-bottom: 140px; }
/* A page that ends on a filled band (FAQ): the band is a sibling below <main>,
   so this padding is the air BETWEEN the last answer and the band. */
.page-end-band { padding-bottom: 96px; }

/* ── Footer (canonical, drop 10) ─────────────────────────────────── */
footer { background: var(--footwrap); padding: 96px 40px 48px; margin-top: 120px; }
.foot-inner { max-width: 1440px; margin: 0 auto; }
.foot-top {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 80px; align-items: end;
  padding-bottom: 56px; border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
footer .brand-wordmark { color: #f5f5f7; }
.foot-sign { margin: 22px 0 0; max-width: 15ch; font-size: 38px; font-weight: 200; letter-spacing: -0.034em; line-height: 1.06; color: #f5f5f7; }
.foot-dl {
  /* Fixed-height pill in an auto grid column: a wrap both clips the label and
     shrinks the column it sits in. The label lost "for Mac" this launch, and the
     Windows fallback font stack is wider than the metrics it was set against.
     A grid item is blockified, so without justify-self it stretches to fill the
     single-column footer at <=900px into a full-width pill — start keeps it
     hugging its label at every width. */
  white-space: nowrap; justify-self: start;
  display: inline-flex; align-items: center; gap: 12px;
  height: 58px; padding: 0 28px 0 32px; border-radius: 99px;
  border: 1px solid rgba(255, 255, 255, 0.34); color: #ffffff;
  font-size: 17px; font-weight: 400; letter-spacing: -0.012em;
  transition: background 0.18s ease, transform 0.18s ease;
}
.foot-dl:hover { background: rgba(255, 255, 255, 0.08); transform: translateY(-1px); opacity: 1; }
.foot-cols { margin-top: 56px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 60px; }
.foot-col { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.foot-col h2 { margin: 0; font-family: var(--mono); font-size: 11px; font-weight: 400; letter-spacing: 0.24em; text-transform: uppercase; color: #7b7b85; }
.foot-col a { font-size: 15.5px; font-weight: 300; color: #e8e8ee; }
.foot-fine {
  margin-top: 72px; padding-top: 30px; border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap;
}
.foot-legal { font-size: 14px; font-weight: 300; color: #7b7b85; }
/* Three groups, not five loose items: links / socials / store. The design
   pack flags 24px-outer against 10px-inner as too close to read as groups. */
.foot-fine-right { display: flex; align-items: center; gap: 34px; }
.foot-socials { display: flex; align-items: center; gap: 10px; }
.foot-fine-right > a { font-size: 14px; font-weight: 300; color: #8d8d93; }
.foot-ig { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.16); color: #8d8d93; }
footer .mas-badge { display: block; opacity: 0.5; transition: opacity 0.18s ease; }
footer .mas-badge:hover { opacity: 0.8; }
footer .mas-badge img { display: block; height: 36px; width: auto; }

/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .wrap, .page { padding-left: 28px; padding-right: 28px; }
  .faq-section { grid-template-columns: 260px 1fr; gap: 44px; }
  .pv-row { grid-template-columns: 72px minmax(0, 1fr) minmax(0, 1.2fr); gap: 18px 32px; }
}
@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-menu-btn { display: grid; }
  .nav-sheet { display: block; }
  .nav-inner { grid-template-columns: auto 1fr auto; gap: 12px; height: 64px; }
  .nav-right { gap: 10px; }
  .nav-dl { height: 36px; padding: 0 16px; border-radius: 99px; background: var(--pill-bg); color: var(--pill-ink); font-size: 13.5px; font-weight: 500; }

  .page { padding: 56px 22px 0; }
  .masthead { display: block; }
  .masthead .stand { padding-bottom: 0; margin-top: 18px; max-width: none; }
  .pv-panel { margin-top: 56px; }
  .pv-row { display: block; padding: 28px 0; }
  .pv-row h2 { margin-top: 10px; max-width: none; }
  .pv-body { margin-top: 12px; max-width: none; }
  .faq-section { display: block; margin-top: 56px; }
  .faq-aside { position: static; }
  .faq-aside h2, .faq-aside p { max-width: none; }
  .faq-item { padding: 22px 0; }
  .faq-item h3, .faq-item p { max-width: none; }
  .faq-aside + .faq-list { margin-top: 26px; }
  .faq-close { padding: 56px 22px 64px; }
  .btn-pill { width: 100%; justify-content: center; }
  .page-end { padding-bottom: 64px; }

  footer { padding: 64px 22px 34px; margin-top: 64px; }
  .foot-top { grid-template-columns: 1fr; gap: 28px; align-items: start; padding-bottom: 40px; }
  .foot-sign { font-size: 30px; }
  .foot-cols { grid-template-columns: 1fr 1fr; gap: 36px 24px; margin-top: 40px; }
  .foot-fine { margin-top: 48px; padding-top: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

@media (max-width: 560px) {
  .foot-cols { grid-template-columns: 1fr; }
}

/* ── Back to top ──────────────────────────────────────────────────────
   Only on pages long enough to need it (measured: press 14.3 screens,
   faq 6.3, creators 5.1). Short pages don't get a floating control.
   visibility, not just pointer-events: an opacity-0 button is still in
   the tab order, so a keyboard user would land on an invisible control. */
.back-to-top {
  position: fixed; right: 26px; bottom: 26px; z-index: 120;
  appearance: none; cursor: pointer;
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid var(--outline);
  background: var(--navbar-bg);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  color: var(--ink);
  display: grid; place-items: center; padding: 0;
  opacity: 0; transform: translateY(8px); pointer-events: none; visibility: hidden;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}
.back-to-top svg { width: 17px; height: 17px; }
.back-to-top.show { opacity: 1; transform: none; pointer-events: auto; visibility: visible; }
@media (max-width: 900px) { .back-to-top { right: 18px; bottom: 18px; } }
@media (prefers-reduced-motion: reduce) { .back-to-top { transition: none; } }

/* Narrow phones: the baseline row's three groups (links / socials / store)
   cannot sit on one line at 320px — with a 34px outer gap they pushed the
   page 18px wide. Stack them deliberately rather than letting flex-wrap
   drop the right group under the copyright, which reads as an accident. */
@media (max-width: 560px) {
  .foot-fine { flex-direction: column; align-items: flex-start; gap: 22px; }
  .foot-fine-right { flex-wrap: wrap; gap: 20px; }
}
@media (max-width: 380px) {
  .foot-fine-right { gap: 16px; }
  .foot-socials { gap: 8px; }
}

/* Overscroll: rubber-banding past the footer on iOS exposed the page
   background as a white band under the dark footer. Paint the root the
   footer's colour so an overscroll shows more footer, and stop the bounce
   from chaining to the page behind. */
html { background: var(--bg); overscroll-behavior-y: none; }
body { overscroll-behavior-y: none; }

/* Sticky nav + anchor jumps: without this the target lands at y=0, behind the
   nav — #product lost its entire heading (66px mobile, 79px desktop). Offset
   every in-page jump by the nav's height plus a little air. */
html { scroll-padding-top: 96px; }
@media (max-width: 900px) { html { scroll-padding-top: 80px; } }