@font-face {
  font-family:DM Sans;
  src:url(fonts/dm-sans-400.ttf) format('truetype');
  font-weight:400;
  font-display:swap}

@font-face {
  font-family:DM Sans;
  src:url(fonts/dm-sans-500.ttf) format('truetype');
  font-weight:500;
  font-display:swap}

@font-face {
  font-family:DM Sans;
  src:url(fonts/dm-sans-600.ttf) format('truetype');
  font-weight:600;
  font-display:swap}

@font-face {
  font-family:DM Sans;
  src:url(fonts/dm-sans-700.ttf) format('truetype');
  font-weight:700;
  font-display:swap}

:root {
  --paper:#ffffff;
  --white:#fff;
  --ink:#202124;
  --muted:#61646c;
  --line:#e2e4e8;
  --orange-soft:#ffd7c2;
  --surface-muted:#f3f4f6;
  --accent:#bd410e;
  --radius:14px;
  --charcoal-scrim:#17181b;
  --ease:cubic-bezier(.16,1,.3,1)}

* {
  box-sizing:border-box}
html {
  scroll-behavior:smooth;
  scroll-padding-top:110px;
  scrollbar-gutter:stable}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'DM Sans',sans-serif;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased}
::selection {
  background:var(--orange-soft);
  color:var(--ink)}
a {
  color:inherit;
  text-decoration-thickness:1px;
  text-underline-offset:5px}
button,input,select {
  font:inherit}
button,a {
  -webkit-tap-highlight-color:transparent}
button {
  cursor:pointer}
a,button {
  touch-action:manipulation}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible {
  outline:3px solid var(--accent);
  outline-offset:5px}
button:disabled {
  opacity:.55;
  cursor:wait}
h1,h2,h3,p,figure {
  margin:0}
h1,h2,h3 {
  font-weight:500;
  line-height:1.07;
  letter-spacing:-.035em;
  text-wrap:balance}
.ln {
  display:block}
h1 {
  font-size:clamp(3rem,5.8vw,5.5rem)}
h2 {
  font-size:clamp(2.3rem,4vw,3.9rem)}
h3 {
  font-size:1.6rem;
  letter-spacing:-.025em}
p {
  max-width:68ch}
img,svg,video {
  max-width:100%;
  display:block}
button svg,a svg {
  width:20px;
  height:20px;
  flex-shrink:0}
button {
  color:inherit}
[hidden] {
  display:none!important}
.wrap {
  width:min(1248px,calc(100% - 96px));
  margin-inline:auto}
.skip {
  position:fixed;
  left:16px;
  top:-100px;
  z-index:100;
  background:var(--orange-soft);
  padding:12px}
.skip:focus {
  top:12px}
.header {
  position:relative;
  z-index:6;
  height:94px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  border-bottom:1px solid var(--line)}
.brand {
  display:inline-flex;
  align-items:center;
  gap:11px;
  text-decoration:none;
  font-weight:600;
  font-size:22px;
  white-space:nowrap;
  letter-spacing:-.04em}
.brand svg {
  width:33px;
  height:33px}
.header .brand-reverse {
  display:none}
.nav {
  display:flex;
  gap:28px;
  align-items:center}
.nav a {
  font-size:14px;
  font-weight:500;
  text-decoration:none;
  color:var(--muted);
  position:relative}
.nav a:hover,.nav a[aria-current] {
  color:var(--ink)}
.nav a[aria-current]:after {
  content:'';
  height:3px;
  background:var(--ink);
  position:absolute;
  bottom:-34px;
  left:0;
  right:0}
.header-actions {
  display:flex;
  gap:22px;
  align-items:center}
.github-link {
  display:flex;
  align-items:center;
  gap:7px;
  font-size:14px;
  text-decoration:none}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  min-height:52px;
  padding:13px 23px;
  border:1px solid transparent;
  border-radius:7px;
  background:var(--ink);
  color:var(--white);
  font-size:15px;
  font-weight:500;
  text-decoration:none;
  transition:background-color var(--dur-feedback) var(--ease-standard)}
.button:hover {
  background:#96330b}
.button.small {
  min-height:42px;
  padding:9px 16px;
  font-size:14px}
.button.light {
  background:var(--orange-soft);
  color:var(--ink)}
.button.light:hover {
  background:#ffbb92}
.button.secondary {
  background:transparent;
  border-color:var(--line);
  color:var(--ink)}
.button.secondary:hover {
  background:var(--surface-muted)}
.text-link {
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight:500;
  text-decoration:none;
  font-size:15px}
.text-link:hover {
  text-decoration:underline}
.menu-toggle {
  position:relative;
  display:none;
  background:none;
  border:1px solid var(--line);
  border-radius:6px;
  min-width:44px;
  min-height:44px;
  padding:8px}
.hero {
  display:grid;
  grid-template-columns:1fr 1.08fr;
  align-items:center;
  gap:20px;
  padding:86px 0 58px;
  min-height:690px}
.hero h1 {
  max-width:620px}
.hero h1 span {
  color:var(--accent)}
.hero-copy>p {
  color:var(--muted);
  font-size:19px;
  max-width:430px;
  margin-top:27px;
  line-height:1.65}
.actions {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:24px;
  margin-top:30px}
.smallprint {
  font-size:12px;
  color:var(--muted);
  line-height:1.7;
  margin-top:16px}
.hero-visual {
  position:relative;
  min-width:0;
  padding-top:5px}
.memory-scene {
  height:478px;
  position:relative;
  isolation:isolate}
.thread-map {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:visible;
  z-index:-1}
.thread-base {
  fill:none;
  stroke:#cdd0d7;
  stroke-width:1.2}
.thread-sep {
  display:flex;
  margin:-16px 0 40px}
.thread-sep svg {
  overflow:visible}
.thread-sep circle {
  fill:var(--orange)}
.thread-moving {
  fill:none;
  stroke:#f05a22;
  stroke-width:2.5}
.ring {
  fill:none;
  stroke:#d8dbe1;
  stroke-width:1;
  transform-origin:310px 239px}
.ring.secondary {
  stroke:#e8eaee;
  stroke-dasharray:3 7}
.app-note {
  position:absolute;
  background:var(--white);
  padding:17px 20px;
  border-radius:12px;
  box-shadow:0 12px 32px #2021240b;
  width:215px}
.app-note.first {
  left:4%;
  top:12px;
  transform:rotate(-3deg)}
.app-note.second {
  right:1%;
  top:54px;
  transform:rotate(3deg);
  width:179px;
  background:#f3f4f6}
.app-note .app-name {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  font-weight:600}
.app-name img {
  width:18px;
  height:18px;
  object-fit:contain}
.app-note p {
  font-size:14px;
  line-height:1.5;
  margin-top:10px}
.app-note .note-time {
  font-size:12px;
  color:var(--muted);
  margin-top:12px;
  display:block}
.brain-core {
  position:absolute;
  left:50%;
  top:48%;
  transform:translate(-50%,-50%);
  display:flex;
  align-items:center;
  gap:11px;
  background:var(--ink);
  color:var(--white);
  padding:18px 23px;
  border-radius:12px;
  white-space:nowrap;
  font-size:18px;
  box-shadow:0 15px 28px #20212410}
.brain-core svg {
  width:31px;
  height:31px;
  color:var(--orange-soft)}
.memory-label {
  position:absolute;
  top:58%;
  left:50%;
  transform:translateX(-50%);
  font-size:12px;
  color:var(--muted);
  white-space:nowrap}
.answer-note {
  position:absolute;
  bottom:10px;
  left:13%;
  right:0;
  background:white;
  box-shadow:0 15px 35px #2021240c;
  border-radius:12px;
  padding:22px 24px}
.answer-note header {
  display:flex;
  gap:9px;
  align-items:center;
  font-size:12px}
.answer-note img {
  width:20px;
  height:20px}
.answer-note .question {
  font-size:12px;
  color:var(--muted);
  margin:12px 0 6px}
.answer-note .answer {
  font-size:17px;
  line-height:1.5}
.source-chip {
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  background:var(--surface-muted);
  padding:3px 8px;
  border-radius:4px;
  margin-top:12px}
.source-chip:before {
  content:'';
  height:5px;
  width:5px;
  background:var(--accent);
  border-radius:50%}
.demo-bottom {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin:24px 0 0 12%;
  font-size:12px;
  color:var(--muted)}
.demo-buttons {
  display:flex;
  gap:6px}
.demo-buttons button {
  background:none;
  border:1px solid var(--line);
  border-radius:5px;
  padding:5px 9px;
  font-size:12px;
  min-height:32px}
.demo-buttons button[aria-pressed=true] {
  background:var(--ink);
  color:white;
  border-color:var(--ink)}
.demo-buttons button:hover {
  border-color:var(--accent)}
.motion-toggle {
  background:none;
  border:0;
  text-decoration:underline;
  text-underline-offset:3px;
  font-size:12px;
  color:var(--muted);
  padding:8px}
.scene-changing .app-note,.scene-changing .answer-note {
  animation:memory-arrive .7s var(--ease)}
.client-strip {
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  gap:30px;
  align-items:center;
  padding:26px 0}
.client-strip>p {
  font-size:12px;
  max-width:138px;
  color:var(--muted)}
.client-list {
  display:flex;
  align-items:center;
  gap:34px;
  flex-wrap:wrap}
.client-list span {
  display:flex;
  align-items:center;
  gap:8px;
  font-weight:500;
  font-size:16px}
.client-list img {
  width:23px;
  height:23px;
  object-fit:contain}
.client-list .mcp-client {
  font-size:12px;
  color:var(--muted)}
.section {
  padding-block:110px}
.section-heading {
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:40px;
  margin-bottom:42px}
.section-heading h2 {
  max-width:680px}
.section-heading>p {
  font-size:16px;
  color:var(--muted);
  max-width:330px}
.story-teaser {
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:82px;
  align-items:center}
.story-teaser h2 {
  max-width:480px}
.story-teaser .lead {
  color:var(--muted);
  margin:24px 0}
.quote-canvas {
  background:var(--surface-muted);
  border-radius:var(--radius);
  padding:38px 40px;
  position:relative}
.quote-canvas .chat-question {
  padding:13px 19px;
  border-radius:12px 12px 0 12px;
  background:white;
  font-size:16px;
  margin:0 0 32px auto;
  max-width:360px}
.quote-canvas blockquote {
  font-size:24px;
  line-height:1.5;
  letter-spacing:-.02em;
  margin:0}
.quote-canvas blockquote em {
  font-style:normal;
  background:var(--orange-soft);
  padding:1px 3px}
.quote-canvas figcaption {
  margin-top:30px;
  color:var(--muted);
  font-size:12px}
.source-row {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:25px}
.source-row span {
  font-size:12px;
  padding:5px 10px;
  border:1px solid #d5d8de;
  border-radius:5px}
.benefit-band {
  background:var(--ink);
  color:var(--paper);
  padding:90px 0 94px}
.benefit-band h2 {
  max-width:650px}
.benefit-band h2 span {
  color:var(--orange-soft)}
.benefit-rows {
  margin-top:44px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 64px}
.benefit-row {
  border-top:1px solid #51535a;
  padding:28px 0;
  display:grid;
  grid-template-columns:34px 1fr;
  gap:18px}
.benefit-row svg {
  width:25px;
  height:25px;
  color:var(--orange-soft)}
.benefit-row h3 {
  font-size:21px;
  line-height:1.3;
  letter-spacing:-.02em}
.benefit-row p {
  font-size:15px;
  color:#c9cbd1;
  margin-top:12px;
  max-width:430px}
.route-links {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px}
.route-link {
  border-top:1px solid var(--line);
  text-decoration:none;
  padding-top:26px;
  display:grid;
  grid-template-columns:1fr 24px;
  gap:14px}
.route-link h3 {
  font-size:27px}
.route-link p {
  font-size:15px;
  color:var(--muted);
  margin-top:14px;
  max-width:440px}
.route-link svg {
  transition:transform var(--dur-feedback) var(--ease-standard)}
.route-link:hover svg,
.route-link:focus-visible svg {
  transform:translateX(5px)}
.closing {
  background:var(--orange-soft);
  padding:62px 64px;
  border-radius:var(--radius);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:38px;
  margin-bottom:90px}
.closing h2 {
  font-size:clamp(2.2rem,3.5vw,3.2rem);
  max-width:660px}
.closing p {
  font-size:15px;
  color:#4d3530;
  margin-top:16px}
.closing .button {
  white-space:nowrap}
.footer {
  border-top:1px solid var(--line);
  padding:42px 0 26px}
.footer-top {
  display:flex;
  justify-content:space-between;
  gap:36px}
.footer-brand p {
  color:var(--muted);
  font-size:13px;
  margin-top:14px;
  max-width:260px}
.footer-links {
  display:flex;
  gap:64px}
.footer-links div {
  display:flex;
  flex-direction:column;
  gap:11px}
.footer-links strong {
  font-size:12px;
  margin-bottom:4px}
.footer-links a {
  font-size:13px;
  text-decoration:none;
  color:var(--muted)}
.footer-links a:hover {
  text-decoration:underline}
.footer-bottom {
  display:flex;
  justify-content:space-between;
  gap:20px;
  margin-top:50px;
  color:var(--muted);
  font-size:12px}
.page-intro {
  padding:76px 0 56px;
  max-width:910px}
.page-intro h1 {
  font-size:clamp(3rem,5.5vw,5rem)}
.page-intro p {
  font-size:20px;
  color:var(--muted);
  margin-top:28px;
  max-width:690px}
.breadcrumb {
  font-size:12px;
  margin-bottom:26px;
  display:flex;
  gap:10px;
  color:var(--muted)}
.breadcrumb a {
  text-decoration:none}
.article-layout {
  display:grid;
  grid-template-columns:220px 1fr;
  gap:72px;
  padding-bottom:90px}
.article-aside {
  align-self:start;
  position:sticky;
  top:30px;
  font-size:13px}
.article-aside a {
  display:block;
  text-decoration:none;
  padding:8px 0;
  color:var(--muted)}
.article-aside a:hover {
  color:var(--ink);
  text-decoration:underline}
.article-aside strong {
  font-weight:500;
  display:block;
  margin-bottom:12px}
.article-layout.no-aside .article-content {
  grid-column:2}
.article-content {
  min-width:0}
.article-content section {
  border-top:1px solid var(--line);
  padding:38px 0 55px;
  scroll-margin-top:40px}
.article-content h2 {
  font-size:37px;
  margin-bottom:22px}
.article-content h3 {
  font-size:23px;
  margin-top:26px;
  margin-bottom:12px}
.article-content p {
  color:var(--muted);
  margin:16px 0}
.article-content li {
  margin:10px 0;
  color:var(--muted)}
.article-content code {
  font-size:14px;
  background:var(--surface-muted);
  padding:2px 6px;
  border-radius:3px}
.process-diagram {
  display:flex;
  align-items:center;
  gap:16px;
  padding:28px 0 48px}
.process-node {
  flex:1;
  border:1px solid var(--line);
  border-radius:12px;
  padding:24px;
  text-align:center}
.process-node strong {
  display:block;
  font-size:19px}
.process-node span {
  display:block;
  font-size:12px;
  color:var(--muted);
  margin-top:8px}
.process-node.primary {
  background:var(--ink);
  color:white;
  border:0}
.process-node.primary span {
  color:#c9cbd1}
.process-diagram>svg {
  width:22px;
  flex-shrink:0}
.note {
  background:var(--surface-muted);
  border-radius:12px;
  padding:24px 28px;
  margin:24px 0;
  font-size:14px}
.note p {
  margin:0;
  color:var(--muted)}
.note strong {
  color:var(--ink)}
.code-block {
  position:relative;
  background:var(--ink);
  color:var(--paper);
  padding:28px;
  border-radius:12px;
  overflow:auto;
  margin-top:24px}
.code-block pre {
  font-size:13px;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  margin:0}
.code-block code {
  background:transparent;
  padding:0;
  font-size:inherit}
.code-block button {
  margin-top:18px;
  border:1px solid #9699a3;
  background:none;
  color:white;
  padding:6px 12px;
  border-radius:5px;
  font-size:12px}
.story-intro {
  max-width:1030px}
.story-intro h1 {
  max-width:950px}
.story-layout {
  display:grid;
  grid-template-columns:.72fr 1.28fr;
  gap:70px;
  padding:10px 0 90px;
  align-items:start}
.story-context {
  padding-top:30px;
  position:sticky;
  top:30px}
.story-context h2 {
  font-size:32px}
.story-context p {
  color:var(--muted);
  font-size:15px;
  margin-top:20px}
.story-context .source-row {
  margin-top:24px}
.conversation {
  background:white;
  border-radius:var(--radius);
  padding:40px}
.conversation-label {
  font-size:12px;
  color:var(--muted);
  padding-bottom:22px;
  border-bottom:1px solid var(--line);
  display:flex;
  gap:10px;
  align-items:center}
.conversation-label img {
  width:21px}
.message {
  padding-top:30px}
.message.user {
  margin-left:50px;
  text-align:right}
.message.user p {
  display:inline-block;
  padding:13px 20px;
  background:var(--surface-muted);
  border-radius:12px 12px 0 12px;
  text-align:left;
  font-size:17px}
.message.assistant p {
  font-size:19px;
  line-height:1.7;
  margin-bottom:19px}
.message.assistant strong {
  font-weight:500;
  background:var(--orange-soft)}
.story-step {
  background:none;
  border:0;
  padding:16px 0;
  display:flex;
  width:100%;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  text-align:left;
  font-size:14px;
  color:var(--accent);
  border-top:1px solid var(--line);
  cursor:pointer;
  list-style:none}
.story-step::-webkit-details-marker {
  display:none}
.originals {
  margin-top:24px}
.originals summary {
  cursor:pointer;
  font-size:13px;
  padding:14px 0}
.original-images {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px}
.original-images img {
  border:1px solid var(--line);
  border-radius:8px;
  width:100%;
  height:auto}
.filter-bar {
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  padding-bottom:30px;
  border-bottom:1px solid var(--line)}
.filter-bar button {
  padding:10px 18px;
  border:1px solid var(--line);
  border-radius:6px;
  background:transparent;
  font-size:14px;
  min-height:44px}
.filter-bar button[aria-pressed=true] {
  background:var(--ink);
  border-color:var(--ink);
  color:white}
.filter-bar input {
  margin-left:auto;
  min-height:44px;
  padding:8px 14px;
  background:white;
  border:1px solid var(--line);
  border-radius:6px;
  width:245px;
  caret-color:var(--accent)}
.integration-list {
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:64px;
  padding-bottom:60px}
.integration {
  padding:30px 0;
  border-bottom:1px solid var(--line);
  display:grid;
  grid-template-columns:38px 1fr;
  gap:20px}
.integration>img,.integration>.icon {
  width:34px;
  height:34px;
  object-fit:contain}
.integration h2 {
  font-size:24px;
  letter-spacing:-.02em}
.integration p {
  font-size:15px;
  color:var(--muted);
  margin:10px 0 13px}
.integration .text-link {
  font-size:12px}
.integration-status {
  display:block;
  font-size:12px;
  color:var(--muted);
  margin-bottom:14px}
.empty-state {
  padding:50px 0}
.ownership-banner {
  background:var(--surface-muted);
  padding:45px;
  border-radius:14px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  margin:0 0 70px;
  align-items:center}
.ownership-banner h2 {
  font-size:33px}
.ownership-banner p {
  font-size:15px;
  color:var(--muted);
  margin-top:18px}
.account-box {
  border:1px solid #cbd0d8;
  padding:26px;
  border-radius:12px;
  background:var(--paper)}
.account-box>strong {
  font-size:14px;
  display:flex;
  align-items:center;
  gap:10px}
.account-box svg {
  width:20px}
.account-items {
  display:grid;
  grid-template-columns:1fr 1fr;
  margin-top:22px;
  gap:10px}
.account-items span {
  background:white;
  padding:15px;
  font-size:12px;
  border-radius:6px}
.account-box small {
  display:block;
  margin-top:18px;
  color:var(--muted)}
.download-layout {
  display:grid;
  grid-template-columns:1.07fr .93fr;
  gap:64px;
  padding-bottom:80px;
  align-items:start}
.download-choices {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px}
.download-choice {
  padding:28px 24px;
  background:white;
  border:1px solid var(--line);
  border-radius:12px;
  position:relative;
  display:flex;
  flex-direction:column}
.download-choice>svg {
  width:31px;
  height:31px;
  margin-bottom:30px}
.download-choice h2 {
  font-size:25px}
.download-choice p {
  font-size:12px;
  color:var(--muted);
  margin:12px 0 25px}
.download-choice .button {
  font-size:13px;
  padding:12px;
  gap:9px;
  width:100%;
  margin-top:auto}
.download-choice.recommended {
  border-color:var(--accent)}
.recommended-label {
  position:absolute;
  right:14px;
  top:16px;
  font-size:12px;
  background:var(--surface-muted);
  padding:3px 7px;
  border-radius:4px}
.setup-preview {
  background:var(--surface-muted);
  border-radius:14px;
  padding:26px}
.setup-preview video {
  width:100%;
  border-radius:9px;
  max-height:420px;
  background:#f3f4f6}
.setup-preview figcaption {
  font-size:12px;
  color:var(--muted);
  margin-top:15px;
  display:flex;
  justify-content:space-between;
  gap:12px}
.setup-steps {
  margin:38px 0 0;
  padding:0;
  list-style:none;
  counter-reset:setup}
.setup-steps li {
  counter-increment:setup;
  display:grid;
  grid-template-columns:30px 1fr;
  gap:16px;
  padding:20px 0;
  border-top:1px solid var(--line)}
.setup-steps li:before {
  content:counter(setup);
  font-size:13px;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  border-radius:50%;
  width:28px;
  height:28px}
.setup-steps strong {
  font-size:16px;
  font-weight:500}
.setup-steps p {
  font-size:14px;
  color:var(--muted);
  margin-top:6px}
.faq {
  max-width:900px;
  padding-bottom:90px}
.faq>h2 {
  margin-bottom:28px}
.faq details {
  border-bottom:1px solid var(--line);
  padding:0}
.faq summary {
  padding:23px 30px 23px 0;
  font-weight:500;
  cursor:pointer;
  font-size:17px}
.faq details p {
  color:var(--muted);
  font-size:15px;
  padding-bottom:25px}
.table-wrap {
  overflow:auto}
table {
  border-collapse:collapse;
  width:100%;
  font-size:14px;
  margin-top:25px}
th,td {
  text-align:left;
  padding:18px 16px;
  border-bottom:1px solid var(--line);
  vertical-align:top}
th {
  font-weight:500;
  background:var(--surface-muted)}
td {
  color:var(--muted)}
.reading-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:45px;
  padding-bottom:80px}
.reading-grid article {
  border-top:1px solid var(--line);
  padding-top:24px}
.reading-grid h2,.reading-grid h3 {
  font-size:29px;
  letter-spacing:-.035em}
.reading-grid p {
  font-size:15px;
  color:var(--muted);
  margin-top:18px}
.reading-grid a {
  margin-top:20px}
.release-status {
  font-size:12px;
  color:var(--muted);
  margin:18px 0}
.visually-hidden {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap}
.no-js-note {
  font-size:12px;
  color:var(--muted)}
.privacy-list dt {
  font-weight:500;
  margin-top:25px}
.privacy-list dd {
  margin:7px 0 0;
  color:var(--muted)}

@keyframes memory-arrive {
  from {
  opacity:.5;
  filter:blur(3px)}
to {
  opacity:1;
  filter:blur(0)}
}

/* Page transitions (docs/design/motion.md section 6): the header persists (its own named group,
   frozen, excluded from the root crossfade below); <main>+footer crossfade under it at the shared
   --dur-layout token. Browsers without View Transitions support get a plain instant navigation;
   prefers-reduced-motion disables the crossfade entirely, further down this file. */
@view-transition {
  navigation:auto}
.header {
  view-transition-name:site-header}
::view-transition-old(site-header),
::view-transition-new(site-header),
::view-transition-image-pair(site-header) {
  animation:none;
  mix-blend-mode:normal}
::view-transition-old(root) {
  animation:page-out calc(var(--dur-layout) * .6) var(--ease-exit) both}
::view-transition-new(root) {
  animation:page-in var(--dur-layout) var(--ease) both}
@keyframes page-out {
  to {
  opacity:0}
}
@keyframes page-in {
  from {
  opacity:0;
  transform:translateY(7px)}
to {
  opacity:1;
  transform:translateY(0)}
}

@media(min-width:1600px) {
  .hero {
  min-height:760px;
  gap:42px}
.hero h1 {
  font-size:88px}
.memory-scene {
  height:500px}
}

@media(max-width:1120px) {
  .wrap {
  width:calc(100% - 64px)}
.nav {
  gap:16px}
.header-actions {
  gap:12px}
.hero {
  gap:0;
  padding-top:64px;
  min-height:620px}
.hero h1 {
  font-size:66px}
.hero-copy>p {
  font-size:17px;
  max-width:365px}
.app-note.first {
  width:190px;
  left:1%}
.app-note.second {
  width:150px;
  right:0}
.brain-core {
  font-size:16px;
  padding:15px}
.answer-note {
  left:6%;
  padding:20px}
.client-list {
  gap:22px}
.story-teaser {
  gap:45px}
.quote-canvas {
  padding:30px}
.article-layout {
  gap:45px;
  grid-template-columns:170px 1fr}
.download-layout {
  gap:30px}
.download-choices {
  gap:12px}
.download-choice {
  padding:24px 16px}
.nav a {
  font-size:13px}
}

@media(max-width:900px) {
  .header {
  height:80px}
.nav {
  gap:14px}
.nav a {
  font-size:12px}
.brand {
  font-size:19px}
.header-actions .github-link {
  display:none}
.header-actions .button {
  font-size:12px}
.hero h1 {
  font-size:55px}
.hero {
  grid-template-columns:1fr 1fr}
.hero-copy>p {
  font-size:16px}
.hero .actions {
  gap:16px}
.hero .button {
  padding:12px 16px}
.hero .text-link {
  font-size:13px}
.app-note.second {
  display:none}
.memory-scene {
  height:440px}
.app-note.first {
  left:13%;
  top:0;
  transform:rotate(-3deg)}
.brain-core {
  top:45%}
.memory-label {
  top:55%}
.answer-note {
  left:4%;
  font-size:15px}
.answer-note .answer {
  font-size:15px}
.client-strip {
  align-items:start}
.client-list {
  gap:18px 25px}
.client-list span {
  font-size:14px}
.client-list img {
  width:20px;
  height:20px}
.story-teaser {
  gap:32px}
.quote-canvas blockquote {
  font-size:21px}
.section {
  padding-block:80px}
.section-heading {
  align-items:start;
  flex-direction:column;
  gap:20px}
.section-heading>p {
  max-width:540px}
.story-layout {
  gap:32px;
  grid-template-columns:.65fr 1fr}
.conversation {
  padding:28px}
.message.assistant p {
  font-size:17px}
.download-layout {
  grid-template-columns:1fr}
.setup-preview {
  max-width:640px}
.download-choice {
  padding:28px}
.download-choice>svg {
  margin-bottom:22px}
.closing {
  padding:42px}
.footer-links {
  gap:34px}
.integration-list {
  column-gap:35px}
.nav a[aria-current]:after {
  bottom:-29px}
}

@media(max-width:700px) {
  .wrap {
  width:calc(100% - 40px)}
.header {
  height:76px;
  gap:12px;
  position:relative}
.brand {
  font-size:20px}
.brand svg {
  width:29px;
  height:29px}
.header-actions {
  margin-left:auto;
  gap:10px}
.header-actions>.button {
  display:none}
.menu-toggle {
  display:flex;
  align-items:center;
  justify-content:center}
.nav {
  display:flex;
  flex-wrap:wrap;
  gap:10px 18px;
  padding:15px 0}
.header {
  flex-wrap:wrap;
  height:auto;
  min-height:76px}
.header .nav {
  width:100%;
  order:3}
.js .header .nav {
  display:none}
.nav a {
  font-size:14px;
  padding:6px 0}
.nav a[aria-current]:after {
  bottom:0;
  height:2px}
.hero {
  grid-template-columns:1fr;
  padding:52px 0 30px;
  gap:38px;
  min-height:0}
.hero h1 {
  font-size:clamp(46px,10vw,66px);
  max-width:550px}
.hero-copy>p {
  font-size:17px;
  max-width:450px;
  margin-top:22px}
.hero .actions {
  gap:22px;
  margin-top:26px}
.hero .button {
  padding:14px 20px}
.hero .text-link {
  font-size:14px}
.smallprint {
  font-size:12px}
.hero-visual {
  max-width:520px;
  width:100%;
  margin:auto}
.memory-scene {
  height:450px}
.app-note.first {
  left:4%;
  top:0;
  width:195px}
.app-note.second {
  display:block;
  right:0;
  top:30px;
  width:138px}
.app-note.second p {
  font-size:12px}
.brain-core {
  top:45%;
  padding:16px 20px;
  font-size:16px}
.memory-label {
  top:56%}
.answer-note {
  left:4%;
  right:1%;
  bottom:0}
.answer-note .answer {
  font-size:16px}
.demo-bottom {
  margin:20px 0 0;
  flex-wrap:wrap}
.demo-buttons button {
  min-height:38px}
.client-strip {
  flex-direction:column;
  gap:20px;
  padding:26px 0}
.client-strip>p {
  max-width:none;
  font-size:12px}
.client-list {
  gap:20px 26px}
.client-list span {
  font-size:14px}
.section {
  padding-block:70px}
.story-teaser {
  grid-template-columns:1fr;
  gap:35px}
.story-teaser h2 {
  font-size:38px}
.story-teaser .lead {
  font-size:16px}
.quote-canvas {
  padding:27px}
.quote-canvas .chat-question {
  font-size:14px}
.quote-canvas blockquote {
  font-size:23px}
.benefit-band {
  padding:65px 0}
.benefit-band h2 {
  font-size:38px}
.benefit-rows {
  grid-template-columns:1fr;
  gap:0;
  margin-top:32px}
.benefit-row {
  padding:25px 0;
  gap:14px}
.benefit-row:last-child {
  padding-bottom:0}
.route-links {
  grid-template-columns:1fr;
  gap:34px}
.route-link h3 {
  font-size:26px}
.closing {
  padding:32px 27px;
  margin-bottom:65px;
  align-items:start;
  flex-direction:column;
  gap:26px}
.closing h2 {
  font-size:34px}
.closing p {
  font-size:14px}
.footer-top {
  flex-direction:column;
  gap:35px}
.footer-links {
  flex-wrap:wrap;
  gap:24px 40px}
.footer-bottom {
  flex-direction:column;
  gap:8px;
  margin-top:36px}
.page-intro {
  padding:44px 0 38px}
.page-intro h1 {
  font-size:46px}
.page-intro p {
  font-size:18px;
  margin-top:24px}
.breadcrumb {
  margin-bottom:20px;
  font-size:12px}
.article-layout {
  display:block;
  padding-bottom:35px}
.article-aside {
  position:static;
  margin-bottom:26px;
  display:flex;
  gap:6px 18px;
  flex-wrap:wrap}
.article-aside strong {
  width:100%;
  margin:0}
.article-aside a {
  font-size:12px}
.article-content section {
  padding:30px 0 35px}
.article-content h2 {
  font-size:31px}
.article-content p {
  font-size:16px}
.process-diagram {
  gap:8px;
  padding-bottom:32px}
.process-node {
  padding:19px 7px}
.process-node strong {
  font-size:15px}
.process-node span {
  font-size:12px}
.process-diagram>svg {
  width:15px}
.story-layout {
  grid-template-columns:1fr;
  gap:30px;
  padding-bottom:60px}
.story-context {
  position:static;
  padding:0}
.story-context h2 {
  font-size:29px}
.conversation {
  padding:25px 22px}
.message.user {
  margin-left:25px}
.message.user p {
  font-size:15px}
.message.assistant p {
  font-size:17px}
.story-step {
  font-size:13px}
.original-images {
  grid-template-columns:1fr}
.filter-bar {
  gap:8px}
.filter-bar button {
  font-size:12px;
  padding:8px 13px}
.filter-bar input {
  width:100%;
  margin:8px 0 0;
  font-size:16px}
.integration-list {
  grid-template-columns:1fr;
  padding-bottom:35px}
.integration {
  padding:27px 0;
  gap:16px}
.ownership-banner {
  grid-template-columns:1fr;
  gap:30px;
  padding:28px 23px;
  margin-bottom:42px}
.ownership-banner h2 {
  font-size:29px}
.account-box {
  padding:20px}
.account-items span {
  padding:12px 8px}
.download-layout {
  gap:35px;
  padding-bottom:50px}
.download-choices {
  gap:12px}
.download-choice {
  padding:21px 16px}
.download-choice h2 {
  font-size:23px}
.download-choice .button {
  font-size:12px;
  padding:12px 8px;
  gap:6px}
.download-choice p {
  font-size:12px}
.recommended-label {
  font-size:12px;
  right:9px;
  top:14px}
.setup-preview {
  padding:18px}
.setup-preview figcaption {
  font-size:12px;
  flex-wrap:wrap}
.faq {
  padding-bottom:60px}
.faq h2 {
  font-size:34px}
.faq summary {
  font-size:16px}
.reading-grid {
  grid-template-columns:1fr;
  gap:32px}
.reading-grid h2,.reading-grid h3 {
  font-size:27px}
th,td {
  padding:14px 12px;
  font-size:12px}
.table-wrap {
  margin-inline:-5px}
.note {
  padding:22px}
.section-heading {
  margin-bottom:30px}
h2 {
  font-size:37px}
}

@media(max-width:370px) {
  .wrap {
  width:calc(100% - 32px)}
.app-note.second {
  width:125px;
  padding:13px}
.app-note.first {
  width:175px;
  padding:14px}
.hero h1 {
  font-size:44px}
.demo-bottom {
  gap:5px}
.download-choices {
  grid-template-columns:1fr}
.download-choice>svg {
  margin-bottom:15px}
}

@media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto}
*,*:before,*:after {
  animation:none!important;
  transition:none!important}
::view-transition-old(root),::view-transition-new(root) {
  animation:none!important}
}


/* The orange identity is supplied by the product owner. */
:root {
  --orange:#fd540a;
  --cta:#bd410e}
.button {
  background:var(--cta)}
.button:hover {
  background:#96330b}
.button.secondary {
  background:transparent}
.button.light {
  background:var(--orange);
  color:#211b16}
.button.light:hover {
  background:#ff783d}
.closing .button {
  background:var(--ink)}
.brand {
  width:174px}
.brand img {
  width:174px;
  height:auto}
.brain-core img {
  width:36px;
  height:auto}
.brain-core {
  background:#202124}
.benefit-band h2 span {
  color:#ff9a61}
.thread-moving {
  stroke:var(--orange)}
.footer .brand {
  width:174px}
.hero h1 span {
  color:var(--cta)}


.closing {
  background:#f3f4f6}
.closing p {
  color:var(--muted)}
.hero h1 span {
  color:#d3440b}
.button {
  background:#cc4109}
.button:hover {
  background:#a63508}
.quote-canvas blockquote em {
  background:#ffe3d5}
.brand {
  width:174px}
.header {
  min-height:94px}


.hero-copy>p.smallprint {
  font-size:13px;
  line-height:1.7;
  margin-top:18px}
.demo-buttons button {
  min-height:40px}
.motion-toggle {
  min-height:40px}
.app-note .note-time {
  font-size:12px}
.memory-label {
  font-size:12px}
.source-chip {
  font-size:12px}
.benefit-band {
  padding-inline:1px}
.brand img {
  image-rendering:auto}
.download-choice .recommended-label {
  position:static;
  align-self:start;
  margin-bottom:12px}
.download-choice>svg {
  margin-bottom:18px}
@media(max-width:700px) {
.app-note.first {
  left:8%;
  width:215px}
.memory-scene {
  height:455px}
.demo-bottom {
  justify-content:flex-start;
  gap:4px}
.hero-copy>p.smallprint {
  font-size:12px}
.hero {
  gap:30px}
}


@font-face {
  font-family:'Sora';
  src:url(fonts/sora.ttf) format('truetype');
  font-weight:100 800;
  font-display:swap}

h1,h2,h3,.quote-canvas blockquote {
  font-family:'Sora','DM Sans',sans-serif;
  font-weight:500;
  letter-spacing:-.035em}

.hero h1 {
  font-weight:550;
  letter-spacing:-.04em;
  line-height:1.08;
  font-size:clamp(46px,5.3vw,80px)}

.quote-canvas blockquote {
  font-weight:400;
  letter-spacing:-.02em}

.setup-preview iframe {
  width:100%;
  aspect-ratio:16/9;
  border:0;
  border-radius:9px;
  display:block;
  background:#202124}

@media(max-width:700px) {
  .hero h1 {
  font-size:clamp(42px,9.8vw,64px)}
}


.process-node>.icon {
  width:29px;
  height:29px;
  margin:0 auto 17px;
  color:var(--accent)}

.process-node.primary>.icon {
  color:#ff9a61}

.account-items span {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:12px}

.account-items .icon {
  width:22px;
  height:22px;
  color:var(--accent)}

.step-title,.video-caption {
  display:flex;
  align-items:center;
  gap:10px}

.step-title>.icon,.video-caption>.icon {
  width:18px;
  height:18px;
  color:var(--accent);
  flex-shrink:0}

@media(max-width:700px) {
  .process-node>.icon {
  width:23px;
  height:23px;
  margin-bottom:13px}
}


.video-frame{aspect-ratio:16/9;overflow:hidden;border-radius:9px;background:#202124}
.video-launch{position:relative;display:grid;width:100%;height:100%;text-decoration:none}
.video-launch>img{width:100%;height:100%;object-fit:cover}
.video-launch>span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:9px;white-space:nowrap;background:#202124;color:white;padding:13px 18px;border-radius:7px;font-size:14px;box-shadow:0 8px 24px #0003}
.video-launch:hover>span{background:#cc4109}
.video-launch:focus-visible{outline-offset:-5px}
.video-frame iframe{height:100%;width:100%}


/* Round two: lifestyle photography, the photo-led hero, and the mark at graphic scale. */
:root {
  --shade:#17181b}
.photo {
  display:block}
.photo img {
  width:100%;
  height:100%;
  object-fit:cover}
.photo-hero .header {
  position:absolute;
  top:0;
  left:0;
  right:0;
  z-index:6;
  color:#fff;
  background:linear-gradient(180deg,rgba(23,24,27,.82) 0,rgba(23,24,27,.82) 75%,rgba(23,24,27,0) 100%);
  border-bottom-color:transparent}
.photo-hero .header .brand-ink {
  display:none}
.photo-hero .header .brand-reverse {
  display:block}
@media(min-width:701px) {
  .photo-hero .header {
  background:linear-gradient(180deg,rgba(23,24,27,.6) 0,rgba(23,24,27,0) 100%)}
}
.photo-hero .nav a {
  color:rgba(255,255,255,.78)}
.photo-hero .nav a:hover,.photo-hero .nav a[aria-current] {
  color:#fff}
.photo-hero .nav a[aria-current]:after {
  background:#fff}
.photo-hero .github-link {
  color:#fff}
.photo-hero .menu-toggle {
  color:#fff;
  border-color:rgba(255,255,255,.4)}
.photo-hero .header a:focus-visible,.photo-hero .header button:focus-visible,.hero-photo a:focus-visible {
  outline-color:#ff9a61}
.hero-photo {
  position:relative;
  isolation:isolate;
  display:flex;
  align-items:center;
  min-height:clamp(640px,92vh,880px);
  background:var(--shade);
  color:#fff;
  overflow:hidden}
.hero-photo .photo {
  position:absolute;
  inset:0;
  z-index:-2}
.hero-photo .photo img {
  object-position:64% 50%}
.hero-shade {
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(90deg,rgba(23,24,27,.84) 0,rgba(23,24,27,.66) 30%,rgba(23,24,27,.22) 56%,rgba(23,24,27,0) 76%),linear-gradient(180deg,rgba(23,24,27,.5) 0,rgba(23,24,27,0) 24%,rgba(23,24,27,0) 72%,rgba(23,24,27,.5) 100%)}
.hero-photo-inner {
  position:relative;
  padding:172px 0 96px}
.hero-photo h1 {
  max-width:640px;
  color:#fff}
.hero-photo h1 span {
  color:var(--orange)}
.hero-photo .hero-copy>p {
  color:rgba(255,255,255,.86);
  font-size:19px;
  max-width:480px;
  margin-top:27px;
  line-height:1.65}
.hero-photo .hero-copy>p.smallprint {
  color:rgba(255,255,255,.7)}
.hero-photo .text-link {
  color:#fff}
.hero-memory {
  position:absolute;
  right:0;
  bottom:8px;
  width:min(320px,32%);
  background:#fff;
  color:var(--ink);
  border-radius:12px;
  padding:20px 22px;
  box-shadow:0 24px 50px rgba(0,0,0,.38);
  transform:rotate(-2deg)}
.hero-memory header {
  display:flex;
  align-items:center;
  gap:9px;
  font-size:12px;
  font-weight:600}
.hero-memory header img {
  width:20px;
  height:20px}
.hero-memory .question {
  font-size:12px;
  color:var(--muted);
  margin:12px 0 6px}
.hero-memory .answer {
  font-size:17px;
  line-height:1.5}
.memory-demo {
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:64px;
  align-items:center}
.memory-demo-copy h2 {
  max-width:460px}
.memory-demo-copy .lead {
  color:var(--muted);
  margin:24px 0 28px;
  max-width:400px}
.memory-demo .hero-visual {
  padding-top:0}
.story-photo-head {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:64px;
  align-items:end;
  margin-bottom:54px}
.story-photo-head h2 {
  max-width:520px}
.story-photo-head .lead {
  color:var(--muted);
  margin-bottom:18px;
  max-width:460px}
.story-photo-head .text-link {
  margin-top:6px}
.photo-band {
  position:relative;
  height:clamp(480px,46vw,680px);
  overflow:hidden;
  background:var(--surface-muted)}
.photo-band .photo {
  position:absolute;
  inset:0}
.photo-band .photo img {
  object-position:var(--focal,60% 34%)}
.photo-band-inner {
  position:relative;
  height:100%;
  display:flex;
  align-items:center}
.quote-canvas.floating {
  background:#fff;
  width:min(520px,46%);
  box-shadow:0 30px 70px rgba(0,0,0,.3)}
.benefit-band {
  position:relative;
  overflow:hidden;
  padding-top:160px}
.benefit-band .wrap {
  position:relative}
.benefit-band h2 {
  position:relative}
.band-mark {
  position:absolute;
  right:-24px;
  top:-98px;
  width:520px;
  height:auto;
  transform:rotate(-9deg);
  pointer-events:none}

/* Between the wrap's max-width cap (1344px) and the tablet breakpoint, the heading
   sits closer to the right edge, so the mark is scaled down to keep 24px clear of it. */
@media(max-width:1343px) and (min-width:1121px) {
  .band-mark {
  width:300px;
  top:-114px;
  right:-13px}
}

@media(max-width:1120px) {
  .hero-photo-inner {
  padding:150px 0 90px}
.hero-memory {
  width:min(290px,34%);
  bottom:-32px}
.memory-demo {
  gap:36px}
.band-mark {
  width:190px;
  top:-121px;
  right:0}
}

@media(max-width:900px) {
  .hero-memory {
  display:none}
.hero-photo .photo img {
  object-position:58% 50%}
.story-photo-head {
  gap:36px}
.quote-canvas.floating {
  width:min(460px,56%)}
}

@media(max-width:700px) {
  .hero-photo {
  min-height:0;
  display:flex;
  flex-direction:column;
  align-items:stretch}
.hero-photo .photo {
  position:relative;
  inset:auto;
  order:2;
  aspect-ratio:4/5;
  z-index:0}
.hero-photo .photo:after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,var(--shade) 0,rgba(23,24,27,0) 34%)}
.hero-photo .photo img {
  object-position:42% 50%}
.hero-shade {
  display:none}
.hero-photo-inner {
  order:1;
  padding:118px 0 40px}
.hero-photo h1 {
  max-width:550px}
.hero-photo .hero-copy>p {
  font-size:17px;
  max-width:450px;
  margin-top:22px}
.memory-demo {
  grid-template-columns:1fr;
  gap:34px}
.story-photo-head {
  grid-template-columns:1fr;
  gap:18px;
  margin-bottom:28px}
.photo-band {
  height:auto;
  overflow:visible;
  background:none}
.photo-band .photo {
  position:relative;
  inset:auto;
  aspect-ratio:4/5;
  overflow:hidden}
.photo-band .photo img {
  object-position:var(--focal,50% 40%)}
.photo-band-inner {
  display:block;
  height:auto;
  margin-top:-64px;
  margin-bottom:70px}
.quote-canvas.floating {
  width:auto}
.benefit-band {
  padding-top:65px}
.band-mark {
  position:static;
  width:120px;
  transform:none;
  margin-bottom:26px}
}


/* Full-screen mobile menu: a modern takeover in place of the old inline link row. */
.menu-toggle-bars {
  position:relative;
  display:block;
  width:20px;
  height:14px}
.menu-toggle-bars span {
  position:absolute;
  left:0;
  width:100%;
  height:2px;
  border-radius:1px;
  background:currentColor;
  transition:top .3s var(--ease),transform .3s var(--ease)}
.menu-toggle-bars span:first-child {
  top:0}
.menu-toggle-bars span:last-child {
  top:12px}
.menu-toggle[aria-expanded="true"] .menu-toggle-bars span:first-child {
  top:6px;
  transform:rotate(45deg)}
.menu-toggle[aria-expanded="true"] .menu-toggle-bars span:last-child {
  top:6px;
  transform:rotate(-45deg)}
.mobile-menu {
  position:fixed;
  inset:0;
  z-index:5;
  display:flex;
  background:var(--shade);
  color:#fff;
  opacity:0;
  visibility:hidden;
  transform:translateY(24px);
  transition:opacity .32s var(--ease),transform .32s var(--ease),visibility 0s linear .32s}
.mobile-menu[aria-hidden="false"] {
  opacity:1;
  visibility:visible;
  transform:translateY(0);
  transition:opacity .32s var(--ease),transform .32s var(--ease)}
.mobile-menu {
  flex-direction:column}
.mobile-menu-scroll {
  display:flex;
  flex-direction:column;
  width:100%;
  flex:1;
  min-height:0;
  padding:96px 24px 12px;
  overflow-y:auto;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.28) transparent}
.mobile-menu-links {
  display:flex;
  flex-direction:column;
  flex:1}
.mobile-menu-links a {
  display:flex;
  flex-direction:column;
  gap:5px;
  padding:13px 0;
  text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.14);
  opacity:0;
  transform:translateY(10px);
  transition:opacity .3s var(--ease),transform .3s var(--ease)}
.mobile-menu[aria-hidden="false"] .mobile-menu-links a {
  opacity:1;
  transform:translateY(0)}
.mobile-menu-links a:nth-child(1) {
  transition-delay:.06s}
.mobile-menu-links a:nth-child(2) {
  transition-delay:.1s}
.mobile-menu-links a:nth-child(3) {
  transition-delay:.14s}
.mobile-menu-links a:nth-child(4) {
  transition-delay:.18s}
.mobile-menu-links a:nth-child(5) {
  transition-delay:.22s}
.mobile-menu-label {
  font-family:'Sora','DM Sans',sans-serif;
  font-size:34px;
  font-weight:500;
  letter-spacing:-.03em;
  color:#fff}
.mobile-menu-links a[aria-current] .mobile-menu-label {
  color:var(--orange)}
.mobile-menu-desc {
  font-size:14px;
  color:rgba(255,255,255,.6)}
.mobile-menu-bottom {
  display:flex;
  flex-direction:column;
  flex-shrink:0;
  gap:16px;
  padding:16px 24px 28px;
  border-top:1px solid rgba(255,255,255,.14)}
.mobile-menu-bottom .button {
  width:100%;
  justify-content:center}
.mobile-menu-github {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  color:#fff;
  text-decoration:none;
  font-size:14px}
body.menu-open {
  overflow:hidden}
body.menu-open .header .brand-ink {
  display:none}
body.menu-open .header .brand-reverse {
  display:block}
body.menu-open .menu-toggle {
  color:#fff;
  border-color:rgba(255,255,255,.4)}

@media(min-width:701px) {
  .mobile-menu {
  display:none}
}

/* Photo slots: reserved space for the eleven planned lifestyle photographs from
   docs/research/photo-shot-list.md. Until the owner supplies each photograph, photoSlot()
   renders this instead of a <picture>, so the final layout is reserved with aspect-ratio and
   nothing shifts later. Both the slot and the real picture carry --slot-aspect and
   --slot-aspect-portrait, and below 700px (where picture() serves the portrait crop) the
   portrait ratio takes over, so the box is the same before and after the photograph lands.
   A faint orange thread motif echoes the hero's living thread: the SVG stretches to fill any
   box, but vector-effect keeps the stroke at 1.5px and the round-capped dot at 7px. The group
   opacity keeps the dot and the path end at a single 22% where they overlap. */
.photo {
  aspect-ratio:var(--slot-aspect)}
.photo-slot {
  position:relative;
  display:block;
  aspect-ratio:var(--slot-aspect);
  background:var(--surface-muted);
  overflow:hidden}
.photo-slot .slot-thread {
  position:absolute;
  inset:0;
  width:100%;
  height:100%}
.photo-slot .slot-thread path {
  fill:none;
  stroke:var(--orange);
  stroke-width:1.5;
  stroke-linecap:round;
  vector-effect:non-scaling-stroke}
.photo-slot .slot-thread .slot-dot {
  stroke-width:7}
@media (max-width:700px) {
  .photo,
  .photo-slot {
  aspect-ratio:var(--slot-aspect-portrait,var(--slot-aspect))}
}
.photo-slot .slot-caption {
  position:absolute;
  left:0;
  bottom:0;
  padding:16px;
  font-size:13px;
  color:var(--muted)}

/* Photographic language: shared frame variants, type-meets-photo utilities, caption grammar and
   layout patterns from docs/design/photo-language.md. tools/site/lib.mjs's picture() and
   photoSlot() add the photo-frame-<variant> class named here via their variant option; page CSS
   supplies section-specific spacing and grid placement, scoped under its own page class, using
   the .frame-* layout classes below as the shared starting point rather than re-deriving them.
   No photograph or caption here ever animates beyond the site's existing reduced-motion-respecting
   entrance fades, so nothing in this block needs a prefers-reduced-motion override. */

/* Frame families. Exactly two exist (bleed, inset); split/filmstrip/offset/diptych are structural
   variants of inset (or, for diptych, of bleed) sharing its treatment, not new families - see the
   crop and framing grammar. Bleed is close to the site's base .photo already; the rule still names
   the contract explicitly so a variant always resolves correctly regardless of what else is scoped
   to that element. */
.photo-frame-bleed {
  border-radius:0;
  box-shadow:none}
.photo-frame-inset,
.photo-frame-split,
.photo-frame-filmstrip,
.photo-frame-offset {
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:none}
.photo-frame-diptych {
  border-radius:0;
  box-shadow:none}

/* Layout patterns. Each pairs with the matching variant above on its child photo(s); a page wraps
   its photoSlot()/picture() call(s) in one of these containers instead of hand-writing the grid.
   .frame-split's gap/ratio step at 1440px and its single-column collapse are the split variant's
   mandatory baseline-lock (align-items:end) and near-miss clearance from "Type meets photograph".
   The single-column breakpoint below is the shared default (900px); a page pairing this with a
   tighter stack point (the story split stacks at 700px) narrows it with its own scoped selector. */
.frame-split {
  display:grid;
  grid-template-columns:1.1fr 1fr;
  align-items:end;
  gap:56px}
@media(min-width:1440px) {
  .frame-split {
  grid-template-columns:1.15fr 1fr;
  gap:40px}
}
@media(max-width:900px) {
  .frame-split {
  grid-template-columns:1fr;
  align-items:start;
  gap:24px}
}
/* Equal, contained frames narrating one continuous sequence. Snap-scrolls as a row below 700px
   rather than stacking, since the sequence itself is the point (user-driven via swipe, so it
   needs no reduced-motion guard). */
.frame-filmstrip {
  position:relative;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px}
.frame-filmstrip .photo,
.frame-filmstrip .photo-slot {
  aspect-ratio:4/5}
@media(max-width:700px) {
  .frame-filmstrip {
  display:flex;
  gap:16px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch}
  .frame-filmstrip>* {
  flex:0 0 78vw;
  scroll-snap-align:start}
  /* A horizontal draw under snap-scroll content the viewport doesn't fully show isn't legible
     motion, per docs/design/motion.md section 3.2 - omitted below 700px rather than adapted. */
  .filmstrip-thread {
  display:none}
}
/* A duo of contained frames where the second is nudged off the first's baseline for rhythm. This
   is the offset device's one site-wide use (the features mosaic); don't reapply it elsewhere, or
   the drop reads as wallpaper instead of a deliberate move. */
.frame-offset {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  max-width:820px}
.frame-offset>:last-child {
  margin-top:32px}
@media(max-width:700px) {
  .frame-offset {
  grid-template-columns:1fr 1fr}
  .frame-offset>:last-child {
  margin-top:0}
}
/* The diptych's seam-pair: two bleed-style frames sharing one hairline white seam, the site's one
   deliberate before/after grammar (save/recall). Don't reuse this construction anywhere else. */
.frame-diptych {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2px;
  background:#fff}
.frame-diptych .photo,
.frame-diptych .photo-slot {
  aspect-ratio:3/2}
@media(max-width:700px) {
  .frame-diptych {
  grid-template-columns:1fr}
}

/* Caption grammar, outside position: the finished-photo caption style, printed below-left in both
   the placeholder and the real photograph so nothing moves once the photograph lands. The inside
   position (.photo-slot .slot-caption, above) stays the placeholder's own style and never carries
   over to a shipped photograph. */
.photo-figure {
  margin:0}
.photo-caption-outside {
  display:flex;
  align-items:baseline;
  gap:8px;
  margin-top:14px;
  font-size:14px}
.photo-caption-primary {
  font-weight:600;
  color:var(--ink)}
.photo-caption-secondary {
  color:var(--muted)}

/* The Teams pulled line: the one instance of text set over a photograph outside the hero. A
   containing element needs position:relative (the page's own hero-photo wrapper); this positions
   itself to that box's edges. The scrim reuses the hero's legibility gradient at a fixed strength
   rather than the full hero treatment. Singular by design - if a second page grows a pulled line,
   retire this rule rather than reuse it a second place. */
.photo-pulled-line {
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:32px;
  background:linear-gradient(to top,rgba(23,24,27,.84),rgba(23,24,27,0))}
.photo-pulled-line .pulled-dot {
  flex-shrink:0;
  width:6px;
  height:6px;
  margin-top:10px;
  border-radius:50%;
  background:var(--orange)}
.photo-pulled-line p {
  margin:0;
  font-family:'Sora','DM Sans',sans-serif;
  font-size:1.6rem;
  font-weight:500;
  line-height:1.07;
  letter-spacing:-.035em;
  color:#fff}

/* Photo treatments (docs/design/photo-treatments.md, binding addendum to photo-language.md).
   Two shared devices: a text-on-photo scrim (photo-overlay, generalising .photo-pulled-line
   above), and a floating memory card (photo-card, generalising .hero-memory above). Photo
   clipping (a mask over a photograph) was removed on 7 September 2026 at the owner's request; see
   docs/design/photo-treatments.md. photoOverlay()/photoCard() render the two remaining devices.
   Page CSS supplies only position:relative on its containing element and, where the addendum
   names it, a position choice - never a parallel copy of the rules below. */

/* Text on photos: photoOverlay()'s markup. One recipe, bottom-anchored, reused verbatim by both
   sanctioned non-hero instances (docs/design/photo-treatments.md section 2). flat swaps the fading
   gradient for the solid --charcoal-scrim ground the Teams lattice placement sits on once its
   photograph is behind shapes rather than raw pixels - strictly higher contrast, per the
   addendum's contrast math (rendered alpha >=.82 clears 4.5:1 for the body-weight case; the flat
   ground clears it outright). Contrast at the exact pixels behind shipped copy is verified at
   build time per scene (see the addendum's "Verification method"), not by a rule here. */
.photo-overlay {
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:32px;
  background:linear-gradient(to top,rgba(23,24,27,.84),rgba(23,24,27,0))}
.photo-overlay-flat {
  background:var(--charcoal-scrim)}
.photo-overlay .overlay-dot {
  flex-shrink:0;
  width:6px;
  height:6px;
  margin-top:10px;
  border-radius:50%;
  background:var(--orange)}
.photo-overlay p {
  margin:0;
  font-family:'Sora','DM Sans',sans-serif;
  font-size:1.6rem;
  font-weight:500;
  line-height:1.07;
  letter-spacing:-.035em;
  color:#fff}

/* Floating cards: photoCard()'s anatomy, generalised from .hero-memory above. Every variant is
   flat (0deg) and placed by a position class - the hero's own -2deg rotation and exclusive
   bottom-right position stay unique to its own hardcoded markup and are never reproduced here (see
   the addendum's do-not list). header/.question/.answer/.source-chip mirror .hero-memory's own
   type exactly, so a recalled-answer card rendered through this component would be indistinguishable
   from the hero's, if a page ever needed a second one. */
.photo-card {
  position:absolute;
  background:#fff;
  color:var(--ink);
  border-radius:12px;
  padding:20px 22px;
  width:min(300px,34%);
  box-shadow:0 24px 50px rgba(0,0,0,.38)}
.photo-card-bottom-left {
  left:24px;
  bottom:24px}
.photo-card-bottom-right {
  right:24px;
  bottom:24px}
.photo-card-top-left {
  left:24px;
  top:24px}
.photo-card-top-right {
  right:24px;
  top:24px}
.photo-card header {
  display:flex;
  align-items:center;
  gap:9px;
  font-size:12px;
  font-weight:600}
.photo-card header img {
  width:20px;
  height:20px}
.photo-card .question {
  font-size:12px;
  color:var(--muted);
  margin:12px 0 6px}
.photo-card .answer {
  font-size:17px;
  line-height:1.5}
.photo-card .source-chip {
  margin-top:12px}
/* release has no header row: the version string leads (as .answer, promoted a step) and the
   change line follows (as .question, restyled to sit under it rather than above). */
.photo-card-release .answer {
  font-size:20px;
  font-weight:600;
  margin:0}
.photo-card-release .question {
  margin:6px 0 0}

@media(max-width:900px) {
  .photo-card-recalled-answer {
  display:none}
  .photo-card:not(.photo-card-recalled-answer) {
  position:static;
  width:100%;
  margin-top:24px;
  box-shadow:0 12px 32px #2021240b}
}

/* Focus and motion. No photo-card variant here nests an interactive child, so none needs its own
   focus-visible rule; a future call site adding a link inherits the site's global rule (see
   a:focus-visible near the top of this file) plus this offset, tuned for sitting on a card rather
   than the page canvas. photo-card / photo-overlay use only the generic entrance fade their
   containing section already provides, so neither needs a prefers-reduced-motion override of its
   own. */
.photo-card a:focus-visible {
  outline-offset:2px}

/* Motion system (docs/design/motion.md, binding). One shared reveal, thread, photo/card and
   interface-state system. Tokens first, then the reveal mechanism (assets/experience.js owns the
   one shared IntersectionObserver), the four named thread instances and no others, the photo/card
   choreography (reusing the reveal-group mechanism below, nothing bespoke), interface states, and
   the page-transition rule above. prefers-reduced-motion's blanket
   *,*:before,*:after{transition:none!important;animation:none!important} rule further up this
   file already turns every rule below into an instant, fully visible, fully static page; nothing
   here needs its own reduced-motion override beyond that. */

:root {
  --ease-exit:cubic-bezier(.4,0,1,1);
  --ease-standard:cubic-bezier(.2,0,0,1);
  --dur-feedback:150ms;
  --dur-state:260ms;
  --dur-layout:420ms;
  --dur-focal:700ms;
  --stagger-step:70ms;
  --stagger-cap:5;
  --travel-sm:10px;
  --travel-md:16px}

/* 1. The reveal system (docs/design/motion.md section 2). Heading blocks (data-reveal) and
   row/card/list groups (data-reveal-group, each direct child carrying an --i index) fade and
   settle once, opacity/transform only. No JS: the .js flag page() sets never applies, so these
   rules never engage and content renders at full opacity from first paint - the real default. */
.js [data-reveal],
.js [data-reveal-group] > * {
  opacity:0;
  transform:translateY(var(--travel-md));
  transition:opacity var(--dur-layout) var(--ease),transform var(--dur-layout) var(--ease)}
.js [data-reveal-group] > * {
  transform:translateY(var(--travel-sm));
  transition-delay:calc(var(--stagger-step) * min(var(--i,0),var(--stagger-cap)))}
.js [data-reveal].reveal-in,
.js [data-reveal-group].reveal-in > * {
  opacity:1;
  transform:none}
/* Photo/card choreography (section 4) reuses this same group mechanism - image, then card, then
   caption, as --i 0/1/2 - with the caption's own beat shortened to --dur-state. */
.js [data-reveal-group] .photo-figure > figcaption {
  transition-duration:var(--dur-state);
  transition-delay:calc(var(--stagger-step) + var(--stagger-step) * min(var(--i,0),var(--stagger-cap)))}

/* 2. Thread choreography (section 3): a closed list of exactly four instances, one mechanism
   (pathLength=100, stroke-dashoffset 100 to 0) everywhere. Nothing else on the site draws. */

/* 2a. Home memory demo: draws once on first scroll-in via data-thread-arm="memory-scene", holds
   drawn, then redraws as a hand-off cue on sample switch (.thread-handoff). The old infinite
   thread-flow loop and the orbit ring are removed outright - a second ambient loop would compete
   with the one protagonist this system is built around. */
.thread-moving {
  stroke-dasharray:100;
  stroke-dashoffset:0}
.memory-scene-armed .thread-moving {
  stroke-dashoffset:100;
  transition:stroke-dashoffset var(--dur-focal) var(--ease)}
.memory-scene-in-view.memory-scene-armed .thread-moving {
  stroke-dashoffset:0}
@keyframes thread-handoff {
  from {
  stroke-dashoffset:40}
to {
  stroke-dashoffset:0}
}
.thread-handoff .thread-moving {
  animation:thread-handoff var(--dur-state) var(--ease)}

/* 2b. Story filmstrip: one connecting path (story.mjs) spanning the row, arming the same way. */
.filmstrip-thread {
  position:absolute;
  left:0;
  right:0;
  bottom:18px;
  height:14px;
  pointer-events:none}
.filmstrip-thread svg {
  display:block;
  width:100%;
  height:100%;
  overflow:visible}
.filmstrip-thread path {
  fill:none;
  stroke:var(--orange);
  stroke-width:1.5;
  stroke-dasharray:100;
  stroke-dashoffset:0}
.filmstrip-thread circle {
  fill:var(--orange)}
.filmstrip-thread.filmstrip-armed path {
  stroke-dashoffset:100;
  transition:stroke-dashoffset var(--dur-focal) var(--ease)}
.filmstrip-thread.filmstrip-armed.filmstrip-in-view path {
  stroke-dashoffset:0}

/* 2c. Split headers aiming at a photo: thread()'s optional aim segment, a short second path
   drawing from the dot toward the photograph, triggered by the same reveal observer as the
   section it precedes (data-thread-aim, queried alongside data-reveal above). */
.thread-aim {
  fill:none;
  stroke:var(--orange);
  stroke-width:2;
  stroke-dasharray:100;
  stroke-dashoffset:0}
.js [data-thread-aim] .thread-aim {
  stroke-dashoffset:100;
  transition:stroke-dashoffset var(--dur-state) var(--ease)}
.js [data-thread-aim].thread-aim-in .thread-aim {
  stroke-dashoffset:0}

/* 2d. The record-page pair (how-this-was-built.html) keeps its exact built behavior verbatim -
   see assets/css/how-this-was-built.css. Only its arming script moved into the shared observer,
   keyed off data-thread-arm="memory-pair" (same mechanism as 2a/2b), for one shared observer
   instead of a second bespoke one. No visual or timing change. */

/* Manual/ambient pause (the demo's "Pause motion" control) is the same end-state as reduced
   motion, not a separate code path: the thread simply holds fully drawn. Placed after the armed
   rules above so it wins the specificity tie while a thread is still mid-arm. */
.paused .thread-moving {
  stroke-dashoffset:0}

/* 3. Interface states (section 5): hover/focus feedback the visitor causes, at --dur-feedback,
   never a transform on primary/secondary buttons - the existing background swap is restraint
   enough. Row backgrounds use the same feedback timing; a linked row's trailing arrow nudges. */
.text-link,.article-aside a,.breadcrumb a {
  transition:color var(--dur-feedback) var(--ease-standard),text-decoration-color var(--dur-feedback) var(--ease-standard)}
.integration,.guide-row {
  transition:background-color var(--dur-feedback) var(--ease-standard)}
.integration:hover,.integration:focus-within,
.guide-row:hover,.guide-row:focus-visible {
  background:var(--surface-muted)}
.guide-row svg {
  transition:transform var(--dur-feedback) var(--ease-standard)}
.guide-row:hover svg,.guide-row:focus-visible svg {
  transform:translateX(2px)}
.table-wrap tbody tr {
  transition:background-color var(--dur-feedback) var(--ease-standard)}
.table-wrap tbody tr:hover,.table-wrap tbody tr:focus-within {
  background:var(--surface-muted)}
.download-choice {
  transition:border-color var(--dur-feedback) var(--ease-standard)}
.download-choice:hover,.download-choice:focus-within {
  border-color:var(--accent)}
.demo-buttons button {
  transition:background-color var(--dur-feedback) var(--ease-standard),color var(--dur-feedback) var(--ease-standard),border-color var(--dur-feedback) var(--ease-standard)}
[data-filter] {
  transition:background-color var(--dur-state) var(--ease-standard),color var(--dur-state) var(--ease-standard)}

/* Memory-moment device (docs/design/astra-recommendations.md section C; documented in
   docs/design/photo-treatments.md's "Memory-moment device" section). memoryMark() in
   tools/site/lib.mjs renders this markup around the unchanged assets/brand-mark.png at a
   fixed 36px width. Static - no pulse, spin or draw-in of its own; it enters only with
   whichever parent reveal it's placed inside. */
.memory-mark {
  display:flex;
  flex-direction:column;
  gap:4px}
.memory-mark-head {
  display:flex;
  align-items:center;
  gap:8px;
  min-height:44px}
.memory-mark-icon {
  flex-shrink:0;
  width:36px;
  height:auto}
.memory-mark-label {
  font-size:15px;
  font-weight:500;
  line-height:1.3;
  color:var(--ink)}
.memory-mark-meta {
  font-size:13px;
  color:var(--muted)}
/* Compact keeps the identical 36px mark and only tightens the surrounding space, never a
   second brand scale (used inline in a guide's expected-result line - see whatYouSeeMemory
   in tools/site/pages/guide-lib.mjs). */
.memory-mark-compact {
  gap:2px}
.memory-mark-compact .memory-mark-head {
  min-height:0}

/* Role-and-tool list (docs/design/astra-recommendations.md section B.11): a role label
   against its named tool(s), two columns on desktop, stacked below 700px. Built for the
   record page's "Built with" section (roleToolList() in tools/site/lib.mjs); reusable
   anywhere else a page lists roles against named tools. */
.role-tool-list {
  display:flex;
  flex-direction:column;
  gap:0;
  margin:0}
.role-tool-row {
  display:grid;
  grid-template-columns:200px 1fr;
  gap:16px;
  padding:14px 0;
  border-top:1px solid var(--line)}
.role-tool-row dt {
  margin:0;
  font-weight:600;
  color:var(--ink)}
.role-tool-row dd {
  margin:0;
  color:var(--muted)}
@media (max-width:700px) {
  .role-tool-row {
    grid-template-columns:1fr;
    gap:4px}
}