:root {
  color-scheme: light;
  --page: #fff;
  --sunset-background: linear-gradient(180deg, #fff 0%, #ffffffa3 14%, #ffffff00 46%, #ffffff20 70%, #fff 100%), linear-gradient(180deg, #d0e8fd 0%, #dcebf9 33%, #eee2e5 53%, #f6d7c6 74%, #f7cfae 100%);
  --ink: #253344;
  --muted: #4d5c6d;
  --accent: #356687;
  --action: #b9ddf6;
  --action-ink: #213f56;
  --chart: #7eafd1;
  --accent-hover: #a3cfea;
  --tint: #eaf4fb;
  --soft: #f4f7fa;
  --line: #dfe6ec;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
  font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--page); color: var(--ink); font-size: 17px; line-height: 1.65; }
h1,h2,p,figure { margin: 0; }
h1,h2 { text-wrap: balance; }
p { text-wrap: pretty; }
p+p { margin-top: 16px; }
a { color: inherit; text-underline-offset: 5px; touch-action: manipulation; -webkit-tap-highlight-color: #d9eefa; }
a:hover { color: var(--accent); }
a:focus-visible { outline: 3px solid var(--accent); outline-offset: 5px; border-radius: 3px; }
.wrap { width: min(1104px, calc(100% - 80px)); margin-inline: auto; }
.skip-link { position: absolute; top: -100px; left: 20px; z-index: 3; padding: 12px; background: var(--page); }
.skip-link:focus { top: 12px; }
.site-header { min-height: 108px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; width: 105px; min-height: 44px; }
.brand img { width: 100%; height: auto; }
nav { display: flex; align-items: center; gap: 28px; font-size: 14px; font-weight: 500; }
nav a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
nav a:hover { text-decoration: underline; }
.hero { position: relative; display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; gap: 72px; padding-block: 58px 90px; }
h1 { font-size: clamp(44px, 4.8vw, 66px); letter-spacing: -.055em; line-height: 1.09; font-weight: 650; }
.hero-copy > p { margin-top: 26px; max-width: 430px; color: var(--muted); font-size: 20px; line-height: 1.65; }
.download { margin-top: 32px; }
.button { min-height: 50px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 22px; background: var(--action); color: var(--action-ink); border-radius: 8px; font-size: 15px; font-weight: 600; text-decoration: none; }
.button:hover,.button:active { color: var(--action-ink); background: var(--accent-hover); }
.small { font-size: 13px; color: var(--muted); margin-top: 14px; }
.release-note { font-size: 12px; color: var(--muted); margin-top: 5px; max-width: 350px; }
.app-demo { min-width: 0; padding-top: 4px; }
.menu-glimpse { display: flex; align-items: center; justify-content: flex-end; gap: 15px; font-size: 11px; color: var(--muted); padding: 0 20px 14px; }
.menu-mark { display: grid; place-items: center; width: 27px; height: 24px; background: var(--soft); color: var(--ink); font-size: 23px; font-weight: 750; border-radius: 5px; }
.popover { background: #ffffffd9; border: 1px solid #ffffff; border-radius: 20px; padding: 22px 12px 0; box-shadow: 0 24px 64px #4e587a1c, 0 3px 10px #4e587a0a; }
.today-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding-inline: 10px; }
.today-heading strong { font-size: 19px; font-weight: 650; }
.today-heading > span { color: var(--muted); font-size: 12px; }
.activity { height: 49px; display: flex; align-items: end; gap: 5px; margin: 17px 10px 4px; }
.activity i { flex: 1; height: 4px; background: var(--line); border-radius: 3px; }
.activity i:nth-child(1) { height: 15px; background: #adcce2; }
.activity i:nth-child(2) { height: 46px; background: var(--chart); }
.activity i:nth-child(3) { height: 32px; background: #adcce2; }
.activity-labels { display: flex; justify-content: space-between; padding: 0 10px 18px; color: var(--muted); font-size: 10px; }
.demo-file { padding: 13px 11px; }
.demo-file.selected { background: var(--page); border: 1px solid var(--line); border-radius: 12px; }
.file-heading { display: flex; align-items: center; gap: 11px; }
.file-heading > div { min-width: 0; }
.file-heading strong { display: block; font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.file-heading div > span { display: block; color: var(--muted); font-size: 11px; margin-top: 2px; }
.file-heading time { margin-left: auto; color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.file-icon { display: grid; place-items: center; width: 29px; height: 36px; flex-shrink: 0; background: var(--page); border: 1px solid #ccd8e3; border-radius: 4px; color: var(--muted); font-size: 11px; font-weight: 650; box-shadow: 0 2px 3px #233b5406; }
.save-line { display: flex; align-items: center; justify-content: space-between; position: relative; margin: 20px 3px 10px; height: 14px; }
.save-line::before { content: ""; height: 2px; position: absolute; inset-inline: 0; top: 6px; background: var(--line); }
.save-line i { z-index: 1; width: 11px; height: 11px; border-radius: 50%; border: 2px solid #8b9bac; background: var(--page); }
.save-line .attached { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 3px var(--tint); }
.mail-label { color: var(--accent); font-size: 11px; font-weight: 500; }
.selected .mail-label { text-align: right; }
.folder-status { display: flex; align-items: center; gap: 7px; font-size: 10px; color: var(--muted); padding: 13px 10px; border-top: 1px solid var(--line); margin-top: 2px; }
.status-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
figcaption { color: var(--muted); font-size: 12px; text-align: center; line-height: 1.6; margin-top: 22px; }
h2 { font-size: clamp(30px, 3vw, 40px); line-height: 1.16; letter-spacing: -.04em; font-weight: 600; }
.intro { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; padding-block: 58px 72px; border-top: 1px solid var(--line); scroll-margin-top: 32px; }
.intro-copy { max-width: 450px; color: var(--muted); }
.history { padding-top: 42px; }
.section-heading { display: flex; justify-content: space-between; align-items: center; gap: 70px; margin-bottom: 36px; }
.section-heading p { max-width: 385px; color: var(--muted); }
.history-image img { display: block; width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--line); }
.recognize { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 100px; padding-block: 110px 84px; }
.recognize-copy > p { max-width: 385px; color: var(--muted); margin-top: 22px; }
.recognize-copy > p+p { margin-top: 14px; }
.match-example { min-width: 0; padding: 24px 0; }
.returned-file { display: flex; flex-direction: column; align-items: center; gap: 14px; font-size: 13px; color: var(--muted); }
.file-icon.large { width: 46px; height: 58px; font-size: 18px; border-radius: 6px; }
.connection { height: 44px; width: 1px; border-left: 1px dashed #bdcedc; margin: 14px auto; }
.match-result { padding: 21px 20px; display: flex; align-items: start; gap: 12px; border: 1px solid #d4e3ef; border-radius: 12px; background: #f7fbfe; }
.result-check { color: var(--accent); background: var(--tint); border-radius: 50%; width: 24px; height: 24px; flex-shrink: 0; text-align: center; font-size: 14px; }
.match-result > div { min-width: 0; }
.match-result strong { font-size: 14px; font-weight: 600; }
.match-result p { font-size: 12px; color: var(--muted); margin: 4px 0 9px; overflow-wrap: anywhere; }
.sharing { display: flex; align-items: start; gap: 24px; padding-block: 40px 68px; border-top: 1px solid var(--line); }
.sharing-symbol { width: 52px; height: 52px; background: var(--soft); border-radius: 12px; display: grid; place-items: center; color: var(--accent); flex-shrink: 0; }
.sharing h2 { font-size: 25px; letter-spacing: -.025em; }
.sharing p { max-width: 690px; color: var(--muted); margin-top: 12px; }
.privacy { border-top: 1px solid var(--line); text-align: center; padding-block: 72px 80px; }
.privacy svg { color: var(--accent); margin-bottom: 20px; }
.privacy p { color: var(--muted); margin-top: 24px; }
.text-link { color: var(--accent); font-size: 14px; min-height: 44px; display: inline-flex; align-items: center; margin-top: 20px; }
.site-footer { border-top: 1px solid var(--line); padding-block: 24px; display: flex; align-items: center; gap: 24px; }
.site-footer .brand { width: 78px; }
.site-footer p { color: var(--muted); font-size: 12px; }
.site-footer nav { margin-left: auto; font-size: 12px; gap: 24px; }
.privacy-inner { padding-block: 80px; }
@media (max-width: 1000px) {
  .hero { gap: 36px; }
  h1 { font-size: 49px; }
  .recognize { gap: 56px; }
}
@media (max-width: 760px) {
  .wrap { width: calc(100% - 40px); }
  .site-header { min-height: 84px; }
  nav { font-size: 12px; gap: 20px; }
  .brand { width: 94px; }
  .hero { grid-template-columns: 1fr; gap: 44px; padding-block: 38px 52px; }
  h1 { font-size: clamp(40px, 8.1vw, 57px); }
  .hero-copy > p { font-size: 18px; max-width: 480px; margin-top: 22px; }
  .app-demo { max-width: 420px; width: 100%; margin-inline: auto; }
  .intro { grid-template-columns: 1fr; gap: 24px; padding-block: 44px; }
  .history { padding-top: 30px; }
  .section-heading { flex-direction: column; align-items: start; gap: 22px; margin-bottom: 28px; }
  .section-heading p { max-width: 480px; }
  .history-image img { border-radius: 8px; }
  .recognize { grid-template-columns: 1fr; gap: 26px; padding-block: 72px 44px; }
  .recognize-copy > p { max-width: 480px; }
  .match-example { max-width: 430px; width: 100%; margin-inline: auto; }
  .sharing { gap: 16px; padding-block: 32px 48px; }
  .sharing-symbol { width: 40px; height: 40px; border-radius: 9px; }
  .sharing-symbol svg { width: 23px; }
  .sharing h2 { font-size: 23px; }
  .privacy { padding-block: 52px; }
  .privacy p { font-size: 16px; }
  .site-footer { flex-wrap: wrap; gap: 12px 20px; }
  .site-footer nav { flex-basis: 100%; margin-left: 0; }
}
@media (max-width: 360px) {
  .wrap { width: calc(100% - 32px); }
  nav { gap: 14px; }
  h1 { font-size: 38px; }
  .popover { padding-inline: 8px; }
  .file-heading { gap: 8px; }
  .file-heading strong { font-size: 12px; }
  .match-result { padding: 18px 14px; gap: 9px; }
}
figcaption a { display: inline-flex; align-items: center; min-height: 44px; color: var(--accent); }

/* A wide wash of evening light; no moving or isolated gradient shapes. */
body { position: relative; isolation: isolate; }
body::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 0 auto;
  height: 790px;
  pointer-events: none;
  background: var(--sunset-background);
}
.brand img { filter: none; }
.popover { backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }
.button { box-shadow: inset 0 0 0 1px #78b1db55, 0 3px 8px #5376930c; }
.history-image img { box-shadow: 0 16px 48px #38465b10; }
@media (max-width: 760px) {
  :root { --sunset-background: linear-gradient(180deg, #fff 0%, #ffffffa6 17%, #ffffff00 51%, #fff 100%), linear-gradient(180deg, #d0e8fd 0%, #dcebf9 33%, #eee2e5 53%, #f6d7c6 74%, #f7cfae 100%); }
  body::before { height: 1120px; background: var(--sunset-background); }
}
/* Product story: setup, a working day, choices and answers. */
h3 { font-size: 17px; line-height: 1.4; font-weight: 600; letter-spacing: -.015em; margin: 0; text-wrap: balance; }
.getting-started { padding-block: 36px 72px; }
.setup-steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 44px; list-style: none; padding: 0; margin: 40px 0 0; }
.step-number { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--tint); color: var(--accent); font-size: 13px; font-weight: 600; margin-bottom: 20px; }
.setup-steps p { color: var(--muted); font-size: 15px; margin-top: 12px; }
.everyday { display: grid; grid-template-columns: 1.15fr 1fr; gap: 90px; align-items: center; padding: 64px 0 84px; border-top: 1px solid var(--line); }
.everyday-copy > p { color: var(--muted); margin-top: 22px; max-width: 465px; }
.everyday-copy .quiet-line { color: var(--ink); font-size: 15px; }
.day-events { list-style: none; padding: 0 0 0 24px; margin: 0; border-left: 1px solid var(--line); }
.day-events li { position: relative; padding: 0 0 30px 12px; }
.day-events li:last-child { padding-bottom: 0; }
.day-events li::before { content: ""; position: absolute; left: -30px; top: 7px; width: 9px; height: 9px; border-radius: 50%; background: var(--page); border: 2px solid var(--chart); }
.day-events li:nth-child(2)::before { background: var(--chart); box-shadow: 0 0 0 4px var(--tint); }
.day-events time { display: block; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.day-events strong { display: block; font-size: 16px; font-weight: 600; margin-top: 6px; }
.day-events span { display: block; color: var(--muted); font-size: 13px; margin-top: 4px; }
.day-events li:nth-child(2) span { color: var(--accent); }
.day-story figcaption { text-align: left; padding-left: 37px; }
.history-choices { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 44px; padding-top: 32px; }
.history-choices p { color: var(--muted); font-size: 15px; margin-top: 12px; }
.sharing .sharing-detail { font-size: 13px; max-width: 650px; margin-top: 14px; }
.who-for { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; padding-block: 20px 72px; }
.work-examples { margin: 0; }
.work-examples > div { padding: 22px 0; border-top: 1px solid var(--line); }
.work-examples > div:first-child { padding-top: 0; border: 0; }
.work-examples dt { font-size: 17px; font-weight: 600; }
.work-examples dd { margin: 10px 0 0; color: var(--muted); font-size: 15px; }
.questions { display: grid; grid-template-columns: .85fr 1.15fr; gap: 80px; padding-block: 72px 88px; border-top: 1px solid var(--line); scroll-margin-top: 32px; }
.questions > div > p { font-size: 15px; color: var(--muted); margin-top: 20px; }
.answers details { border-bottom: 1px solid var(--line); }
.answers details:first-child { border-top: 1px solid var(--line); }
.answers summary { cursor: pointer; padding: 21px 30px 21px 0; font-size: 15px; font-weight: 550; list-style: none; position: relative; }
.answers summary::-webkit-details-marker { display: none; }
.answers summary::after { content: "+"; position: absolute; right: 3px; top: 19px; font-size: 20px; color: var(--accent); font-weight: 400; }
.answers details[open] summary::after { content: "−"; }
.answers summary:hover { color: var(--accent); }
.answers summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 3px; }
.answers details p { font-size: 15px; color: var(--muted); padding: 0 20px 22px 0; }
.closing { text-align: center; padding: 64px 20px 80px; border-radius: 24px; margin-bottom: 64px; background: linear-gradient(180deg,#eaf5ff 0%,#f0eaf0 48%,#f9ddc8 100%); }
.closing > p { color: var(--muted); margin-top: 18px; }
.closing .button { margin-top: 28px; }
@media (max-width: 760px) {
  .site-header nav { gap: 14px; font-size: 12px; }
  .setup-steps { grid-template-columns: 1fr; gap: 28px; margin-top: 28px; }
  .setup-steps li { display: grid; grid-template-columns: 32px 1fr; gap: 0 16px; }
  .step-number { grid-row: span 2; margin: 0; }
  .setup-steps p { grid-column: 2; margin-top: 8px; }
  .getting-started { padding-block: 20px 52px; }
  .everyday,.who-for,.questions { grid-template-columns: 1fr; gap: 36px; }
  .everyday { padding-block: 44px 52px; }
  .day-story { padding: 0 8px; }
  .history-choices { grid-template-columns: 1fr; gap: 24px; }
  .history-choices p { margin-top: 7px; }
  .who-for { padding-block: 8px 48px; }
  .questions { padding-block: 48px 56px; }
  .closing { margin-bottom: 40px; padding-block: 48px; border-radius: 18px; }
}
@media (max-width: 360px) { .site-header nav { gap: 10px; font-size: 11px; } .site-header .brand { width: 80px; } }

.brand { width: 118px; }
.site-footer .brand { width: 96px; }
.menu-mark img { display: block; width: 18px; height: 18px; }
@media (max-width: 360px) { .site-header .brand { width: 88px; } }
/* First screen: promise, dominant animation and the original app view. */
.site-header { min-height: 88px; }
.hero { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(300px,.8fr); grid-template-areas: "copy app" "animation app" "action app"; column-gap: 64px; row-gap: 12px; padding-block: 20px 40px; align-items: center; }
.hero-copy { grid-area: copy; }
.hero h1 { font-size: clamp(40px,4.3vw,60px); }
.hero-copy > p { font-size: 18px; line-height: 1.55; margin-top: 16px; }
.hero > .download { grid-area: action; margin-top: 0; }
.hero .small { margin-top: 10px; }
.hero .app-demo { grid-area: app; width: 100%; min-width: 0; }
.hero .app-demo figcaption { font-size: 11px; margin-top: 14px; }
.naming-hero { grid-area: animation; min-width: 0; }
.filename-stage { position: relative; min-height: 170px; display: flex; flex-direction: column; align-items: center; justify-content: end; padding-top: 58px; }
.filename-board { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; min-height: 72px; padding: 16px 14px; background: #ffffffec; border: 1px solid #d9e5ed; border-radius: 14px; box-shadow: 0 8px 28px #3c55710c; }
.naming-document { width: 27px; height: 34px; flex-shrink: 0; }
.animated-filename { display: flex; align-items: baseline; font-family: ui-monospace,"SFMono-Regular",Menlo,monospace; font-size: clamp(15px,1.8vw,23px); font-weight: 500; letter-spacing: -.055em; white-space: nowrap; }
.filename-suffix { color: #b76e4d; border-radius: 3px; }
.filename-extension { color: #7a8794; }
.naming-demo[data-phase="selected"] .filename-suffix { background: #d9eafa; color: #74472f; box-shadow: 0 0 0 3px #d9eafa; }
.typing-caret { display: none; width: 1px; height: 1.05em; align-self: center; background: #c78e70; margin-inline: 1px; }
.naming-demo[data-phase="typing"] .typing-caret { display: block; }
.naming-logo { position: absolute; width: 42px; height: 42px; top: -8px; left: calc(50% + 68px); opacity: 0; z-index: 1; pointer-events: none; }
.naming-logo img { display: block; width: 100%; height: auto; filter: drop-shadow(0 4px 6px #61515a16); }
.kept-history { min-height: 26px; margin-top: 12px; display: flex; align-items: center; gap: 6px; }
.kept-dot { width: 7px; height: 7px; background: var(--chart); border-radius: 50%; }
.kept-line { width: 24px; height: 1px; background: #c4d8e8; }
.kept-label { margin-left: 8px; color: var(--accent); font-size: 11px; }
.kept-history[data-count="1"] > :nth-child(n+2):not(.kept-label),.kept-history[data-count="2"] > :nth-child(n+4):not(.kept-label) { opacity: .2; }
.naming-demo[data-phase="typing"] .kept-label,.naming-demo[data-phase="selected"] .kept-label { visibility: hidden; }
.naming-bottom { min-height: 36px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.naming-caption { color: var(--muted); font-size: 11px; margin: 0; }
.naming-control { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 52px; padding: 8px; border: 0; border-radius: 7px; background: transparent; color: var(--accent); font: inherit; font-size: 11px; cursor: pointer; touch-action: manipulation; }
.naming-control[hidden] { display: none; }
.naming-control:hover { background: var(--tint); }
.naming-control:active { background: #dcecf8; }
.naming-control:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
@media (max-width: 1000px) and (min-width: 761px) {
  .hero { column-gap: 32px; }
  .animated-filename { font-size: 16px; }
  .filename-board { padding-inline: 10px; gap: 8px; }
}
@media (max-width: 760px) {
  .site-header { min-height: 70px; }
  .hero { grid-template-columns: minmax(0,1fr); grid-template-areas: "copy" "animation" "app" "action"; row-gap: 14px; padding-block: 10px 32px; }
  .hero-copy { display: block; }
  .hero h1 { font-size: clamp(34px,7.6vw,47px); }
  .hero-copy > p { font-size: 16px; line-height: 1.45; margin-top: 12px; }
  .filename-stage { min-height: 148px; padding-top: 48px; }
  .filename-board { min-height: 62px; padding: 14px 10px; gap: 9px; }
  .animated-filename { font-size: clamp(13px,3.55vw,20px); }
  .naming-document { width: 23px; height: 29px; }
  .naming-caption { font-size: 10px; }
  .hero .app-demo { max-width: 400px; margin-inline: auto; padding-top: 0; }
  .hero .menu-glimpse,.hero .app-demo figcaption,.hero .activity-labels { display: none; }
  .hero .popover { padding-top: 12px; border-radius: 16px; }
  .hero .today-heading strong { font-size: 15px; }
  .hero .today-heading > span { font-size: 11px; }
  .hero .activity { height: 28px; margin-top: 8px; margin-bottom: 8px; }
  .hero .activity i:nth-child(1) { height: 9px; }
  .hero .activity i:nth-child(2) { height: 27px; }
  .hero .activity i:nth-child(3) { height: 19px; }
  .hero .demo-file:not(.selected) { display: none; }
  .hero .demo-file { padding: 9px 10px; }
  .hero .save-line { margin-top: 12px; margin-bottom: 6px; }
  .hero .folder-status { padding-block: 9px; }
  .hero > .download { margin-top: 4px; }
}
@media (prefers-reduced-motion: reduce) { .naming-logo { display: none; } }
/* The file is still being kept after its naming clutter disappears. */
.filename-board { position: relative; transition: opacity 400ms ease, transform 400ms ease; }
.kept-history { transition: opacity 400ms ease, transform 400ms ease; }
.file-watch { position: absolute; right: 12px; top: 50%; display: inline-flex; align-items: center; gap: 5px; color: var(--accent); font-size: 10px; font-weight: 600; opacity: 0; transform: translateY(-50%) scale(.85); transition: opacity 240ms ease, transform 300ms cubic-bezier(.2,.8,.2,1); }
.file-watch > span { display: none; }
.naming-demo[data-phase="watched"] .file-watch { opacity: 1; transform: translateY(-50%) scale(1); }
.naming-demo[data-phase="leaving"] .filename-board,.naming-demo[data-phase="leaving"] .kept-history { opacity: 0; transform: translateY(-8px); }
@media (min-width: 1200px) { .file-watch > span { display: inline; } }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
/* Interactive saved-file sample, adapted from the app's page pile. */
.version-demo { margin-top: 36px; }
.version-window { background: #f1f3f6; border: 1px solid #dbe3eb; border-radius: 20px; overflow: hidden; box-shadow: 0 20px 64px #31445c12; }
.version-window-head { display: flex; align-items: center; gap: 20px; min-height: 80px; padding: 18px 24px; border-bottom: 1px solid #e3e7ec; }
.window-dots { display: flex; gap: 7px; flex-shrink: 0; }
.window-dots i { width: 10px; height: 10px; background: #c8d0d9; border-radius: 50%; }
.version-window-head strong { display: block; font-size: 14px; font-weight: 600; }
.version-window-head p { font-size: 12px; color: var(--muted); margin-top: 3px; }
.sample-label { margin-left: auto; font-size: 11px; color: var(--muted); padding: 5px 10px; border: 1px solid #dce4eb; border-radius: 14px; white-space: nowrap; }
.version-window-body { display: grid; grid-template-columns: minmax(0,1fr) 242px; }
.version-main { min-width: 0; padding: 8px 20px 20px; overflow: hidden; }
.document-pile { position: relative; height: 490px; touch-action: pan-y; cursor: grab; border-radius: 10px; -webkit-user-select: none; user-select: none; }
.document-pile.is-dragging { cursor: grabbing; }
.document-pile:focus-visible { outline: 3px solid var(--accent); outline-offset: -2px; }
.document-paper,.document-back { position: absolute; left: 50%; top: 26px; width: min(330px,calc(100% - 64px)); aspect-ratio: 8.5/11; border-radius: 3px; background: white; transform: translateX(-50%); }
.document-back { box-shadow: 0 10px 26px #2439510b; pointer-events: none; }
.back-one { transform: translateX(-50%) translate(8px,6px) rotate(1deg); opacity: .85; }
.back-two { transform: translateX(-50%) translate(16px,12px) rotate(2.2deg); opacity: .5; }
.document-paper { color: #30363d; padding: 30px 28px; font-family: Georgia,"Times New Roman",serif; box-shadow: 0 1px 2px #26394f0c,0 18px 44px #26394f21; will-change: transform; }
.paper-exit { z-index: 3; pointer-events: none; }
.document-paper p { font-size: 11px; line-height: 1.55; text-wrap: pretty; }
.document-paper .paper-company,.document-paper .paper-date { font-family: -apple-system,BlinkMacSystemFont,sans-serif; font-size: 8px; color: #69727c; line-height: 1.5; margin: 0; }
.document-paper h3 { font-family: Georgia,"Times New Roman",serif; font-size: 22px; line-height: 1.1; font-weight: 700; margin: 14px 0 16px; letter-spacing: -.02em; text-wrap: balance; }
.document-paper .paper-intro { min-height: 52px; margin: 0; }
.paper-costs { width: 100%; border-collapse: collapse; font-family: -apple-system,BlinkMacSystemFont,sans-serif; font-size: 9px; margin-top: 16px; }
.paper-costs th,.paper-costs td { padding: 6px 0; border-top: 1px solid #e4e8ec; }
.paper-costs th { text-align: left; font-weight: 400; }
.paper-costs td { text-align: right; font-variant-numeric: tabular-nums; }
.paper-costs .paper-total th,.paper-costs .paper-total td { font-weight: 650; }
.document-paper [data-changed="true"] { background: #fce8da; box-shadow: 0 0 0 3px #fce8da; border-radius: 1px; }
.document-paper .paper-closing { min-height: 36px; margin-top: 16px; }
.document-paper .paper-signature { position: absolute; left: 28px; bottom: 26px; font-size: 10px; color: #666d74; }
.version-step-controls { display: flex; align-items: center; justify-content: center; gap: 20px; min-height: 44px; }
.version-step-controls button { display: grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0; border: 1px solid #dce4eb; border-radius: 50%; background: #ffffffd9; color: var(--ink); cursor: pointer; touch-action: manipulation; }
.version-step-controls button:hover:enabled { background: var(--tint); border-color: #b4cadb; }
.version-step-controls button:disabled { opacity: .35; cursor: default; }
.version-step-controls span { font-size: 12px; color: var(--muted); min-width: 145px; text-align: center; font-variant-numeric: tabular-nums; }
.version-step-controls button:focus-visible,.version-time:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.version-timeline { display: block; background: #fafbfd; border-left: 1px solid #e0e6ed; padding: 28px 14px 24px; }
.version-day + .version-day { margin-top: 20px; }
.version-day h3 { font-size: 11px; color: var(--muted); font-weight: 600; padding-left: 30px; margin: 0 0 7px; }
.version-time { position: relative; width: 100%; display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 8px 10px; border: 0; border-radius: 9px; background: transparent; color: var(--ink); font: inherit; font-size: 13px; text-align: left; cursor: pointer; touch-action: manipulation; font-variant-numeric: tabular-nums; }
.version-time::before { content: ""; position: absolute; left: 14px; top: 0; bottom: 0; width: 1px; background: #dce3eb; }
.version-dot { position: relative; z-index: 1; width: 9px; height: 9px; flex-shrink: 0; border: 2px solid #8996a4; background: #fafbfd; border-radius: 50%; }
.version-time:hover:enabled { background: #eef4f9; }
.version-time[aria-pressed="true"] { background: var(--action); color: var(--action-ink); }
.version-time[aria-pressed="true"] .version-dot { background: var(--accent); border-color: var(--accent); }
.version-time[aria-pressed="true"]::before { opacity: .3; }
.version-time:disabled { cursor: default; }
.version-note { margin-left: auto; font-size: 10px; white-space: nowrap; }
.version-demo-caption { text-align: center; padding-top: 20px; min-height: 84px; }
.version-change { font-size: 14px; color: var(--ink); }
.version-instruction { font-size: 12px; color: var(--muted); margin-top: 5px; }
@media (max-width: 760px) {
  .version-window { border-radius: 14px; }
  .version-window-head { padding: 14px 16px; gap: 12px; min-height: 76px; }
  .window-dots { gap: 4px; }
  .window-dots i { width: 7px; height: 7px; }
  .sample-label { display: none; }
  .version-window-head strong { font-size: 12px; }
  .version-window-head p { font-size: 10px; }
  .version-window-body { grid-template-columns: minmax(0,1fr); }
  .version-main { padding: 8px 6px 16px; }
  .document-pile { height: 420px; }
  .document-paper,.document-back { width: min(285px,calc(100% - 32px)); top: 18px; }
  .document-paper { padding: 24px 22px; }
  .document-paper h3 { font-size: 19px; margin: 12px 0 14px; }
  .document-paper p { font-size: 10px; }
  .document-paper .paper-intro { min-height: 49px; }
  .paper-costs { font-size: 8px; margin-top: 10px; }
  .paper-costs th,.paper-costs td { padding-block: 5px; }
  .document-paper .paper-signature { left: 22px; bottom: 20px; font-size: 9px; }
  .version-timeline { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; border-left: 0; border-top: 1px solid #e0e6ed; padding: 16px 8px; }
  .version-day + .version-day { margin-top: 0; }
  .version-day h3 { padding-left: 7px; font-size: 10px; }
  .version-time { font-size: 11px; gap: 7px; padding-inline: 6px; }
  .version-time::before { left: 10px; }
  .version-note { font-size: 9px; }
  .version-note:not(:last-child) { display: none; }
  .version-day:nth-child(2) .version-note { display: none; }
  .version-change { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .filename-board,.kept-history,.file-watch { transition: none; }
}
.document-paper,.document-back { aspect-ratio: 210/297; }
.document-pile { height: 520px; }
@media (max-width: 760px) { .document-pile { height: 445px; } }
/* A sunset desktop behind the glass, with solid paper on top. */
.version-desktop {
  position: relative;
  isolation: isolate;
  padding: 38px;
  overflow: visible;
  border-radius: 28px;
  border: 1px solid #e0e7ef;
  background: var(--sunset-background);
}
.version-desktop::before {
  content: "";
  position: absolute;
  inset: -12%;
  z-index: -1;
  pointer-events: none;
  background: none;
}
.version-window {
  position: relative;
  border: 1px solid #ffffffb8;
  border-radius: 22px;
  background: #f7f9fc69;
  -webkit-backdrop-filter: blur(28px) saturate(1.35);
  backdrop-filter: blur(28px) saturate(1.35);
  box-shadow: inset 0 1px 0 #ffffffd9,inset 0 -1px 0 #53677912,0 26px 56px #38455930,0 4px 12px #38455912;
}
.version-window::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 1px 0 0 #ffffff66,inset -1px 0 0 #ffffff33;
}
.version-window-head {
  background: #ffffff26;
  border-bottom: 1px solid #ffffff66;
}
.window-dots i { box-shadow: inset 0 0 0 .5px #00000012; }
.window-dots i:nth-child(1) { background: #e9a59a; }
.window-dots i:nth-child(2) { background: #eac78b; }
.window-dots i:nth-child(3) { background: #9dbed2; }
.sample-label { background: #ffffff52; border-color: #ffffff94; box-shadow: inset 0 1px 0 #ffffff80; }
.version-main { background: #f5f8fc33; padding-bottom: 24px; }
.version-timeline {
  background: #ffffff4a;
  border-left-color: #ffffff73;
  -webkit-backdrop-filter: blur(22px) saturate(1.2);
  backdrop-filter: blur(22px) saturate(1.2);
  box-shadow: inset 1px 0 0 #ffffff52;
}
.version-time::before { background: #7e91a226; }
.version-dot { background: #f4f6fa; }
.version-time:hover:enabled { background: #ffffff66; }
.version-time[aria-pressed="true"] {
  background: #b9ddf6d9;
  box-shadow: inset 0 1px 0 #ffffffa6,inset 0 0 0 .5px #87b1cc33,0 3px 10px #4c6c890b;
}
.version-step-controls {
  width: max-content;
  max-width: 100%;
  gap: 12px;
  padding: 5px;
  margin-inline: auto;
  border: 1px solid #ffffffa6;
  border-radius: 999px;
  background: #ffffff5c;
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  backdrop-filter: blur(20px) saturate(1.4);
  box-shadow: inset 0 1px 0 #ffffffb3,0 6px 18px #3a536315;
}
.version-step-controls button { border-color: #ffffff80; background: #ffffff70; }
.version-step-controls button:hover:enabled { background: #ffffffb3; border-color: #ffffffcc; }
.version-step-controls span { min-width: 130px; }
.document-paper { box-shadow: 0 1px 2px #26394f0d,0 20px 42px #34435a26; }
@media (max-width: 760px) {
  .version-desktop { padding: 12px; border-radius: 22px; }
  .version-window { border-radius: 15px; }
  .version-timeline { border-top-color: #ffffff8c; box-shadow: inset 0 1px 0 #ffffff66; }
  .version-main { padding-bottom: 18px; }
  .version-step-controls { gap: 6px; }
  .version-step-controls span { min-width: 122px; font-size: 11px; }
  .document-paper,.document-back { width: min(285px,calc(100% - 24px)); }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .version-window { background: #f2f4f8; }
  .version-timeline { background: #f7f9fc; }
  .version-step-controls { background: #f9fbfd; }
}
@media (prefers-reduced-transparency: reduce) {
  .version-window,.version-timeline,.version-step-controls { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .version-window { background: #f2f4f8; }
  .version-timeline { background: #f7f9fc; }
  .version-step-controls { background: #f9fbfd; }
}
@media (forced-colors: active) {
  .version-desktop { background: Canvas; border-color: CanvasText; }
  .version-desktop::before { display: none; }
  .version-window,.version-timeline,.version-step-controls { background: Canvas; border-color: CanvasText; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .version-time[aria-pressed="true"] { background: Highlight; color: HighlightText; outline: 1px solid Highlight; }
}
/* Edge-to-edge desktop; native app structure: opaque stage, glass sidebar. */
.history { display: grid; grid-template-columns: minmax(40px,1fr) minmax(0,1104px) minmax(40px,1fr); width: 100%; margin-inline: 0; }
.history > .section-heading,.history > .history-choices { grid-column: 2; }
.history > .version-demo { grid-column: 1 / -1; min-width: 0; margin-top: 0; }
.version-demo { --paper-width: clamp(210px,30svh,270px); --paper-font: clamp(7px,1svh,9px); }
.version-desktop { width: 100%; border: 0; border-radius: 0; padding-block: clamp(80px,13svh,112px); padding-inline: max(40px,calc((100% - 1104px)/2)); }
.version-desktop::before { inset: 0; }
.version-window {
  display: grid;
  grid-template-columns: minmax(0,1fr) 232px;
  grid-template-rows: auto 1fr;
  max-width: 1104px;
  margin-inline: auto;
  background: #f8f9fc38;
  border-color: #ffffffa6;
  -webkit-backdrop-filter: blur(30px) saturate(1.45);
  backdrop-filter: blur(30px) saturate(1.45);
  box-shadow: inset 0 1px 0 #ffffff99,0 18px 48px #27374924,0 3px 10px #2737490d;
}
.version-window-body { display: contents; }
.version-window-head { grid-column: 1; grid-row: 1; min-height: 64px; padding: 12px 20px; gap: 16px; background: #f2f2f5; border-bottom: 0; }
.version-main { grid-column: 1; grid-row: 2; background: #f2f2f5; padding: 0 16px 20px; }
.version-timeline { grid-column: 2; grid-row: 1 / 3; padding-top: 36px; background: #ffffff0f; -webkit-backdrop-filter: none; backdrop-filter: none; border-left: 0; box-shadow: inset .5px 0 0 #00000014; }
.version-window-head .sample-label { background: #00000006; border-color: #0000000c; box-shadow: none; }
.document-pile { height: calc(var(--paper-width) * 1.414286 + 28px); }
.version-demo .document-paper,.version-demo .document-back { width: var(--paper-width); top: 12px; aspect-ratio: 210/297; }
.version-demo .document-paper { font-size: var(--paper-font); padding: 2.727em 2.545em; }
.version-demo .document-paper p { font-size: 1em; line-height: 1.55; }
.version-demo .document-paper .paper-company,.version-demo .document-paper .paper-date { font-size: .727em; line-height: 1.5; }
.version-demo .document-paper h3 { font-size: 2em; line-height: 1.1; margin: .636em 0 .727em; }
.version-demo .document-paper .paper-intro { min-height: 4.727em; }
.version-demo .paper-costs { font-size: .818em; margin-top: 1.777em; }
.version-demo .paper-costs th,.version-demo .paper-costs td { padding: .666em 0; }
.version-demo .document-paper .paper-closing { min-height: 3.272em; margin-top: 1.454em; }
.version-demo .document-paper .paper-signature { left: 2.8em; bottom: 2.6em; font-size: .909em; }
.version-step-controls { min-height: 44px; padding: 4px; }
.version-step-controls button { min-height: 38px; min-width: 38px; }
.version-demo-caption { width: min(1104px,calc(100% - 80px)); margin-inline: auto; min-height: 70px; padding-top: 16px; }
.version-day + .version-day { margin-top: 14px; }
.version-time { min-height: 40px; }
@media (max-width: 760px) {
  .history { grid-template-columns: 20px minmax(0,1fr) 20px; }
  .version-desktop { padding: clamp(64px,11svh,90px) 12px; }
  .version-window { grid-template-columns: minmax(0,1fr); }
  .version-window-head { grid-column: 1; grid-row: 1; padding: 12px 14px; min-height: 64px; }
  .version-main { grid-column: 1; grid-row: 2; padding: 0 6px 16px; }
  .version-timeline { grid-column: 1; grid-row: 3; padding: 14px 8px; box-shadow: inset 0 .5px 0 #00000014; }
  .version-day + .version-day { margin-top: 0; }
  .version-demo { --paper-width: clamp(210px,64vw,270px); --paper-font: clamp(7px,2.1333vw,9px); }
  .version-time { min-height: 44px; }
  .version-demo-caption { width: calc(100% - 40px); min-height: 86px; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .version-window { background: #f2f4f8; }
  .version-timeline { background: #f7f9fc; }
}
@media (prefers-reduced-transparency: reduce) {
  .version-window { background: #f2f4f8; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .version-timeline { background: #f7f9fc; }
}
@media (forced-colors: active) {
  .version-window,.version-window-head,.version-main,.version-timeline { background: Canvas; }
}

.site-footer { flex-wrap: wrap; }
.site-footer .production-credit { flex-basis: 100%; margin: 0; padding-top: 8px; text-align: center; font-size: 11px; color: var(--muted); font-weight: 400; letter-spacing: .01em; }