@font-face {
  font-family: 'DM Sans'; src: url('/assets/fonts/dm-sans.woff2') format('woff2');
  font-style: normal; font-weight: 100 1000; font-display: swap;
}
@font-face {
  font-family: 'DM Mono'; src: url('/assets/fonts/dm-mono.woff2') format('woff2');
  font-style: normal; font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'Instrument Serif'; src: url('/assets/fonts/instrument-italic.woff2') format('woff2');
  font-style: italic; font-weight: 400; font-display: swap;
}
:root {
  --ink: #262344; --paper: #faf7f0; --accent: #ffa66c; --lavender: #c5b6e6;
  --night: #201d34; --text-soft: #5d596c; --sans: 'DM Sans', system-ui, sans-serif;
  --mono: 'DM Mono', ui-monospace, monospace;
  --measure: min(1240px, calc(100% - clamp(40px, 10vw, 152px)));
  background: var(--paper); color: var(--ink); font: 16px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
}
*, *::before, *::after {box-sizing: border-box}
html {scroll-behavior: smooth; scroll-padding-top: 18px}
body {margin: 0}
h1, h2, h3, p, figure {margin: 0}
img {display: block; max-width: 100%}
a {color: inherit; text-underline-offset: .2em}
button {font: inherit; cursor: pointer}
a, button, summary {-webkit-tap-highlight-color: transparent}
a:focus-visible, button:focus-visible, summary:focus-visible {outline: 3px solid #9b60d9; outline-offset: 5px}
::selection {color: #211930; background: #ffc4a0}
.wrap, .wrapper {width: var(--measure); margin-inline: auto}
.skip {position: fixed; left: 12px; top: 12px; z-index: 20; padding: 12px 18px; background: var(--paper); color: var(--ink); transform: translateY(-160%); border-radius: 6px}
.skip:focus {transform: translateY(0)}
.site-top, .site-header {background: var(--night); color: var(--paper)}
.nav-inner, .header-inner {display: flex; align-items: center; justify-content: space-between; gap: 28px; min-height: 80px; border-bottom: 1px solid #ffffff22}
.wordmark, .brand {display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-size: 30px; font-weight: 680; line-height: 1; letter-spacing: -.075em}
.wordmark img, .brand img {border-radius: 9px}
.wordmark img {width: 35px; height: 35px}
.nav-links, .header-inner nav {display: flex; gap: 33px; align-items: center}
.nav-links a, .header-inner nav a {color: #e1dce9; font-size: 14px; font-weight: 500; text-decoration: none}
.nav-links a:hover, .header-inner nav a:hover {color: var(--accent)}
.nav-access, .header-inner .header-cta {display: inline-flex; align-items: center; gap: 14px; padding: 9px 16px; min-height: 40px; border: 1px solid #ffffff5a; border-radius: 100px; font-size: 13px; color: var(--paper); text-decoration: none; font-weight: 650; transition: background .2s, color .2s}
.nav-access:hover, .header-inner .header-cta:hover {color: var(--ink); background: var(--paper)}
.north-arrow {font-size: 17px; line-height: 1}
.masthead {background: var(--night); color: var(--paper); overflow: clip; isolation: isolate; position: relative}
.mast-layout {position: relative; display: grid; grid-template-columns: .96fr 1.04fr; align-items: center; min-height: clamp(575px, 43vw, 662px)}
.mast-copy {position: relative; z-index: 2; padding: 66px 0 68px; pointer-events: none}
.mast-copy a {pointer-events: auto}
.mast-kicker {display: flex; align-items: center; gap: 11px; font: 400 10px/1.5 var(--mono); color: #d5ccdc; text-transform: uppercase; letter-spacing: .16em}
.mast-kicker span {width: 21px; height: 2px; background: var(--accent); display: block}
.mast-copy h1 {font-size: clamp(72px, 6.8vw, 107px); line-height: .995; font-weight: 530; letter-spacing: -.084em; margin: 28px 0 24px; width: max-content; max-width: 100%}
.mast-copy h1 em {display: inline-block; color: #ffb382; font-family: 'Instrument Serif', Georgia, serif; font-size: 1.12em; font-weight: 400; line-height: .86; letter-spacing: -.047em}
.mast-intro {max-width: 425px; color: #d6d0dc; font-size: clamp(17px, 1.39vw, 20px); line-height: 1.52; letter-spacing: -.02em; text-wrap: pretty}
.mast-actions {display: flex; align-items: center; gap: 27px; margin-top: 29px}
.action-main, .action-quiet {display: inline-flex; align-items: center; gap: 16px; white-space: nowrap; font-size: 14px; line-height: 1.2; font-weight: 650; text-decoration: none}
.action-main {background: var(--accent); color: #2b2031; min-height: 50px; padding: 0 21px; border-radius: 100px; transition: background .2s, transform .2s}
.action-main span {font-size: 19px}
.action-main:hover {background: #ffc19a; transform: translateY(-2px)}
.action-quiet {gap: 9px; color: #f3edf5; padding: 12px 0}
.action-quiet span {color: #c4adce; transition: transform .2s}
.action-quiet:hover span {transform: translateY(3px)}
.platform-note {display: flex; align-items: center; gap: 8px; color: #c2bacc; font-size: 12px; margin-top: 25px}
.phone-glyph {width: 9px; height: 14px; border: 1.4px solid currentColor; border-radius: 2.5px; position: relative}
.phone-glyph::after {content: ''; width: 3px; height: 1px; background: currentColor; position: absolute; bottom: 1px; left: 1.5px}
.showcase {position: relative; min-width: 0; align-self: stretch; isolation: isolate; display: grid; place-items: center; perspective: 950px}
.paper-art {position: absolute; z-index: -1; inset: -4% -24% 0 -20%; pointer-events: none; mask-image: linear-gradient(90deg,transparent,black 21%,black 87%,transparent),linear-gradient(0deg,transparent 0%,black 17%,black 83%,transparent 100%); mask-composite: intersect}
.paper-art img {height: 100%; width: 100%; object-fit: cover; object-position: 47% center}
.device-space {width: clamp(194px, 16.6vw, 252px); margin: -28px 0 0 4%; transform-style: preserve-3d; animation: arrive-device 1s cubic-bezier(.18,.74,.2,1) both}
.device {position: relative; padding: 5px; border: 1.5px solid #aeabbd; border-radius: 16% / 7.35%; background: linear-gradient(130deg,#514a62,#151222 46%,#595367 79%,#191627);
  box-shadow: inset -1px -1px 0 1px #272236, inset 1px 1px 2px 1px #978da5, 3px 3px 0 1px #292136, 13px 20px 28px #0b05178c;
  transform: rotate(-8deg) rotateY(calc(-9deg + var(--look-x,0deg))) rotateX(calc(3deg + var(--look-y,0deg))); transition: transform .35s ease-out}
.device::before, .device::after {position: absolute; content: ''; background: #756d83; width: 2px; border-radius: 2px; left: -3px; top: 24%; height: 5%}
.device::after {top: 30%}
.device-glass {overflow: hidden; border-radius: 14.5% / 6.67%; background: #faf7ef; aspect-ratio: 660/1435}
.device-glass img {width: 100%; height: 100%; object-fit: cover}
.screen-bar {position: absolute; left: 7%; right: 0; bottom: 21px; display: flex; align-items: center; justify-content: space-between; gap: 8px; color: #f4eef8}
.studio-name {display: grid; grid-template-columns: auto auto; column-gap: 9px; font-size: 13px; font-weight: 600; line-height: 1.2}
.studio-name small {grid-column: 2; color: #c6bed1; font: 400 10px/1.5 var(--mono); letter-spacing: .015em}
.mini-star {grid-row: span 2; align-self: center; font: normal 26px/1 Georgia,serif; color: #ffa66c}
.screen-controls {display: flex; gap: 2px; background: #211b30eb; border: 1px solid #8c7e975c; padding: 3px; border-radius: 40px}
.screen-controls button {color: #d6ccdf; font-size: 11px; font-weight: 600; border: 0; background: transparent; border-radius: 25px; padding: 7px 12px; min-height: 30px; transition: color .2s, background .2s}
.screen-controls button[aria-pressed="true"] {color: white; background: #58485f}
.screen-controls button:hover {color: #ffc9a8}
@keyframes arrive-copy {from {opacity: 0; transform: translateY(15px)} to {opacity: 1; transform: none}}
@keyframes arrive-device {from {opacity: 0; transform: translate(15px, 23px) rotate(3deg)} to {opacity: 1; transform: none}}
.mast-kicker, .mast-copy h1, .mast-intro, .mast-actions, .platform-note {animation: arrive-copy .6s cubic-bezier(.2,.7,.25,1) both}
.mast-copy h1 {animation-delay: .055s}.mast-intro {animation-delay: .11s}.mast-actions {animation-delay: .15s}.platform-note {animation-delay: .18s}

@media (max-width: 920px) and (min-width: 701px) {
  :root {--measure: calc(100% - 56px)}
  .mast-layout {grid-template-columns: 1.06fr 1fr; min-height: 545px}
  .mast-copy h1 {font-size: clamp(56px,7vw,69px)}
  .mast-intro {max-width: 345px}
  .screen-bar {left: 0; justify-content: center}.studio-name {display: none}
  .nav-links {gap: 21px}
}
@media (max-width: 700px) {
  :root {--measure: calc(100% - 40px)}
  .nav-inner, .header-inner {min-height: 65px; gap: 12px}
  .wordmark, .brand {font-size: 25px; gap: 6px}
  .wordmark img, .brand img {width: 30px; height: 30px}
  .nav-links {display: none}
  .nav-access, .header-inner .header-cta {padding: 8px 13px; font-size: 12px; min-height: 36px}
  .mast-layout {display: block; min-height: 0}
  .mast-copy {padding: 47px 0 5px}
  .mast-kicker {font-size: 9px}
  .mast-copy h1 {font-size: clamp(56px, 12.8vw, 83px); line-height: .98; margin: 20px 0}
  .mast-copy h1 em {font-size: 1.14em}
  .mast-intro {font-size: 17px; max-width: 430px}
  .mast-actions {margin-top: 22px; gap: 20px}
  .action-main {min-height: 45px; padding: 0 17px}
  .action-main, .action-quiet {font-size: 13px}
  .platform-note {font-size: 11px; margin-top: 15px}
  .showcase {height: clamp(395px, 91vw, 515px); margin-inline: -20px}
  .paper-art {inset: -3% -4% 0; mask-image: linear-gradient(0deg, transparent 0, black 20%,black 78%,transparent);mask-composite: add}
  .device-space {width: clamp(153px, 36vw, 203px); margin: -19px 0 0 5%}
  .device {padding: 4px}
  .screen-bar {left: 20px; right: 20px; bottom: 12px}
  .studio-name {font-size: 12px}.studio-name small {font-size: 9px}
  .screen-controls button {padding-inline: 10px}
  .header-inner nav {gap: 14px}.header-inner nav a[href$="#studio"] {display: none}
}
@media (max-width: 359px) {
  :root {--measure: calc(100% - 32px)}
  .mast-copy h1 {font-size: 52px}
  .screen-bar {left: 16px; right: 16px}.screen-controls button {padding-inline: 8px}
  .showcase {margin-inline: -16px}.studio-name {column-gap: 5px}
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {scroll-behavior: auto !important; animation-duration: .001ms !important; animation-delay: 0s !important; transition-duration: .001ms !important}
  .device {transform: rotate(-8deg)}
}

/* Help and privacy keep their reading layout and share the site's typography. */
.doc {padding-block: clamp(44px, 6vw, 90px) 90px}
.doc-intro {max-width: 850px}
.eyebrow {font: 400 11px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .12em}
.doc-intro h1 {font-weight: 540; letter-spacing: -.08em; line-height: .98; font-size: clamp(49px, 6.4vw, 88px); margin-block: 18px}
.doc-lead {color: var(--text-soft); max-width: 690px; font-size: clamp(18px, 1.8vw, 22px); text-wrap: pretty}
.doc-layout {border-top: 1px solid #d9d2d6; padding-top: 32px; margin-top: 44px; display: grid; grid-template-columns: minmax(150px,.5fr) minmax(0,1.3fr); gap: clamp(34px,7vw,95px)}
.doc-index {align-self: start; position: sticky; top: 25px; display: grid; gap: 12px}
.doc-index a {color: #4d465c; font-size: 14px; text-decoration: none}
.doc-index a:hover {text-decoration: underline}
.doc-index .eyebrow {margin-bottom: 5px}
.prose {max-width: 720px}
.prose section + section {border-top: 1px solid #ded7d6; margin-top: 30px; padding-top: 28px}
.prose h2, .support-card h2 {font-size: clamp(28px, 3vw, 41px); line-height: 1.08; font-weight: 550; letter-spacing: -.06em; margin-bottom: 14px}
.prose h3 {font-size: 19px; letter-spacing: -.03em; margin: 18px 0 8px}
.prose p, .prose li, .support-card p {color: var(--text-soft); line-height: 1.72}
.prose p + p {margin-top: 12px}
.support-card {display: flex; align-items: center; justify-content: space-between; gap: 25px; margin-top: 40px; padding: clamp(25px,4vw,46px); background: #eee5f4; border-radius: 18px}
.support-card p {max-width: 540px}
.support-card .button {display: inline-flex; flex: none; align-items: center; gap: 15px; padding: 12px 20px; border-radius: 30px; background: var(--ink); color: #fff; text-decoration: none}
.footer-inner {display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding-block: 30px; border-top: 1px solid #dad1d3}
.footer-inner .brand {font-size: 23px}.footer-inner .publisher {font-size: 13px}.footer-inner nav {margin-left: auto; display: flex; gap: 20px; font-size: 14px}
@media (max-width: 700px) {
  .doc-layout {grid-template-columns: 1fr; gap: 28px}
  .doc-index {position: static; grid-template-columns: 1fr 1fr; border-bottom: 1px solid #d9d2d6; padding-bottom: 24px}
  .doc-index .eyebrow {grid-column: 1 / -1}
  .support-card {align-items: start; flex-direction: column}
  .footer-inner {gap: 9px}.footer-inner nav {gap: 11px}
}

.gf-income-rule, .gf-cost-rule {transform-origin: left center}
@media (prefers-reduced-motion: no-preference) {
  .paper-art img {animation: paper-settle 3.8s cubic-bezier(.16,.76,.25,1) both}
  @keyframes paper-settle {
    from {transform: translate(1.2%, 2%) scale(1.1) rotate(-3deg)}
    to {transform: none}
  }
}