/* Unline: design aligned with the actual November 2026 iOS daily page.
   Cream background, Outfit, subtle bullets, and understated pencil lines. */
:root {color-scheme:light; --cream:#F8F4EA; --ink:#29241F; --ink-soft:#514941; --taupe:#8A8279; --muted:#A69F94; --line:#DDD7CD; --pill:#EBE6DC; --sans:'Outfit',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;}
* {box-sizing:border-box;}
html {scroll-behavior:smooth; background:var(--cream);}
body {margin:0;background:var(--cream);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased;}
a {color:inherit;}
a:focus-visible,button:focus-visible {outline:2px solid #78685A;outline-offset:4px;}
.skip-link {position:absolute;top:-80px;left:20px;z-index:100;background:var(--ink);color:var(--cream);padding:12px 17px;}
.skip-link:focus {top:20px;}
.container {width:min(1150px,calc(100% - 90px));margin-inline:auto;}
.site-header {border-bottom:1px solid rgba(130,117,103,.14);}
.header-content {display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:88px;}
.brand {display:inline-flex;align-items:center;gap:11px;text-decoration:none;}
.brand-icon {width:35px;height:35px;display:block;border-radius:7px;}
.brand-name {font-size:23px;font-weight:500;letter-spacing:-.055em;}
.site-nav {display:flex;align-items:center;gap:37px;}
.site-nav a {font-size:13px;font-weight:400;text-decoration:none;color:#817A71;transition:color .2s ease;padding:13px 0;}
.site-nav a:hover,.site-nav a[aria-current='page'] {color:var(--ink);}
.site-nav a[aria-current='page'] {box-shadow:inset 0 -1px 0 #8C8074;}
.eyebrow {margin:0;font-size:11px;font-weight:500;letter-spacing:.055em;color:#9C958A;}
.home-hero {display:grid;grid-template-columns: minmax(0,1fr) minmax(350px,.84fr);align-items:center;gap:clamp(55px,7vw,118px);padding:90px 0 110px;min-height:828px;}
.hero-text {padding:0 0 10px;}
.hero-text h1 {font-size:clamp(60px,6.5vw,90px);line-height:1.07;font-weight:500;letter-spacing:-.065em;margin:26px 0 34px;}
.period {color:#A79C8F;}
.hero-text .subhead {max-width:420px;color:#726A60;font-size:16px;font-weight:400;line-height:1.85;margin:0;}
.hero-mantra {margin-top:39px;color:#8D857A;font-size:13px;font-weight:400;letter-spacing:.01em;}
.soft-intro {border-top:1px solid var(--line);}
.intro-layout {display:grid;grid-template-columns:1fr .87fr;gap:15%;padding:104px 0 112px;}
.intro-heading h2 {font-size:clamp(37px,4vw,56px);line-height:1.25;letter-spacing:-.055em;font-weight:400;margin:21px 0 0;}
.intro-copy {padding-top:14px;}
.intro-copy p {font-size:16px;line-height:1.9;color:#726A60;margin:0;}
.intro-copy a {display:inline-block;font-size:13px;text-decoration:none;margin-top:30px;padding-bottom:6px;border-bottom:1px solid #BEB6AA;}
.intro-copy a:hover {border-bottom-color:#635B51;}
.quiet-values {border-top:1px solid var(--line);}
.value-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:52px;padding:72px 0 85px;}
.value {display:flex;align-items:flex-start;gap:18px;}
.value-bullet {flex:none;width:9px;height:9px;border-radius:50%;background:#A69F94;margin-top:9px;}
.value h3 {font-weight:500;font-size:19px;letter-spacing:-.03em;margin:0 0 13px;}
.value p {font-weight:400;color:#8A8176;font-size:14px;line-height:1.75;margin:0;}
.site-footer {border-top:1px solid var(--line);}
.footer-content {display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;padding:31px 0 36px;}
.footer-copy {font-size:12px;color:#948B80;}
.footer-links {display:flex;gap:25px;flex-wrap:wrap;align-items:center;}
.footer-links a {font-size:12px;color:#776E63;text-decoration:none;}
.footer-links a:hover {text-decoration:underline;text-underline-offset:4px;}
/* Support/privacy/account deletion use the same restrained design language. */
.article-wrap {max-width:835px;margin-inline:auto;padding:96px 0 123px;}
.article-head {padding-bottom:47px;border-bottom:1px solid var(--line);}
.article-head h1 {font-size:clamp(50px,6vw,70px);line-height:1.12;letter-spacing:-.055em;font-weight:500;margin:21px 0 23px;}
.article-lead {color:#756C61;line-height:1.85;font-size:16px;max-width:600px;margin:0;}
.article-date {font-size:12px;color:#9B9388;margin:22px 0 0;}
.article-layout {display:grid;grid-template-columns:155px minmax(0,1fr);gap:47px;padding-top:52px;}
.article-toc {display:grid;gap:16px;align-self:start;position:sticky;top:25px;}
.article-toc strong {font-size:11px;font-weight:500;color:#A0998D;margin-bottom:6px;}
.article-toc a {font-size:12px;color:#8C8378;text-decoration:none;}
.article-toc a:hover {color:var(--ink);}
.article-body {font-size:14px;line-height:1.94;color:#72695F;}
.article-body section + section {margin-top:45px;}
.article-body h2 {font-size:27px;font-weight:500;letter-spacing:-.035em;line-height:1.35;color:var(--ink);margin:0 0 18px;scroll-margin-top:25px;}
.article-body h3 {font-size:15px;font-weight:500;color:var(--ink);margin:22px 0 8px;}
.article-body p {margin:0 0 17px;}
.article-body ul,.article-body ol {padding-left:23px;margin:5px 0 20px;}
.article-body li {padding-left:3px;margin:8px 0;}
.article-body a {color:#51463D;text-underline-offset:4px;overflow-wrap:anywhere;}
.soft-box {border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:26px 0 25px;margin:24px 0 26px;}
.soft-box h3 {font-size:23px;font-weight:500;letter-spacing:-.035em;margin:0 0 13px;}
.soft-box p:last-child {margin-bottom:0;}
.contact-link {font-size:17px;}
.mini-note {font-size:12px;color:#938A7E;line-height:1.7;}
.faq {padding:23px 0;border-top:1px solid var(--line);}
.faq h3 {margin-top:0;}
.faq:last-child {border-bottom:1px solid var(--line);}
.button-link {display:inline-flex;padding:13px 20px;align-items:center;background:var(--ink);border-radius:100px;color:var(--cream)!important;font-size:13px;text-decoration:none;margin:8px 0 14px;}
.button-link:hover {background:#51473E;}
/* Animated splash: intentionally separate from the static icon and from the product preview. */
#unline-splash {position:fixed;inset:0;background:var(--cream);z-index:50;display:flex;align-items:center;justify-content:center;animation:splash-away 260ms ease-in-out 1280ms both;pointer-events:none;}
.splash-lockup {display:flex;flex-direction:column;align-items:flex-start;gap:16px;width:max-content;transform:translateY(-6px);}
.splash-row {height:16px;display:flex;gap:16px;align-items:center;opacity:0;transform:translateY(4px);animation:row-enter 320ms cubic-bezier(.22,1,.36,1) both;}
.splash-row:nth-child(1) {animation-delay:0ms;}
.splash-row:nth-child(2) {animation-delay:90ms;}
.splash-row:nth-child(3) {animation-delay:180ms;}
.splash-row:nth-child(4) {animation-delay:270ms;}
.splash-row:nth-child(5) {animation-delay:360ms;}
.splash-dot {width:9px;height:9px;background:#D5CABA;border-radius:100%;flex:none;}
.splash-bar {height:7px;border-radius:99px;background:#D5CABA;display:block;}
.splash-row:nth-child(1) .splash-bar {width:114px;}
.splash-row:nth-child(2) .splash-bar {width:73px;}
.splash-row:nth-child(4) .splash-bar {width:92px;}
.splash-row:nth-child(5) .splash-bar {width:56px;}
.splash-row.hero-row {height:62px;gap:13px;}
.splash-row.hero-row .splash-dot {width:12px;height:12px;background:#9F8871;}
.splash-wordmark {position:relative;font-family:var(--sans);font-weight:500;letter-spacing:-1.2px;font-size:48px;line-height:1.1;white-space:nowrap;color:#3A342E;}
.splash-line-word {display:inline-block;position:relative;color:#3A342E;animation:line-quiet 520ms ease-in-out 620ms both;}
.splash-strike {position:absolute;left:0;width:calc(100% + 5px);top:51%;height:1.8px;transform-origin:0 50%;background:rgba(64,55,46,.62);border-radius:99px;opacity:0;transform:rotate(-1.5deg) scaleX(0);animation:strike-draw 520ms cubic-bezier(.65,0,.35,1) 620ms both;}
@keyframes row-enter {from {opacity:0;transform:translateY(4px);} to {opacity:1;transform:translateY(0);}}
@keyframes line-quiet {0%,20% {color:#3A342E;} 100% {color:#9A9188;}}
@keyframes strike-draw {0% {opacity:0;transform:rotate(-1.5deg) scaleX(0);} 35% {opacity:1;} 100% {opacity:1;transform:rotate(-1.5deg) scaleX(1);}}
@keyframes splash-away {0% {opacity:1;visibility:visible;} 99% {visibility:visible;} 100% {opacity:0;visibility:hidden;}}
@media(max-width:940px) {.home-hero{gap:32px;grid-template-columns:minmax(0,1fr) minmax(315px,.9fr)}.hero-text h1{font-size:65px}.app-preview{height:655px;padding-inline:26px}.entry{font-size:20px}.intro-layout{gap:9%}.value-grid{gap:25px}}
@media(max-width:700px) {
.container{width:min(100% - 42px,540px)}.header-content{min-height:74px}.brand-icon{width:31px;height:31px}.brand-name{font-size:21px}.site-nav{gap:20px}.site-nav a{font-size:12px}
.home-hero{display:flex;flex-direction:column;align-items:stretch;min-height:auto;padding:70px 0 93px;gap:51px}.hero-text h1{font-size:clamp(59px,12vw,77px);margin:22px 0 25px}.hero-text .subhead{font-size:15px}.hero-mantra{margin-top:23px}
.app-preview{align-self:center;width:100%;max-width:410px;height:min(690px,calc((100vw - 42px)*1.74));min-height:575px;padding:44px 27px 29px;border-radius:25px}.preview-top{height:66px}.entry{font-size:clamp(17px,5.2vw,22px);column-gap:12px}.preview-entries{gap:26px}.entry-progress{font-size:14px;margin-top:12px;gap:9px}.entry.long{margin-top:4px}.preview-bottom{height:57px;width:250px;bottom:25px}.mind-label{font-size:16px}.mind-plus{font-size:34px}.mind-divider{margin-inline:22px}
.intro-layout{display:block;padding:74px 0 83px}.intro-heading h2{font-size:clamp(36px,8.5vw,44px)}.intro-copy{padding-top:26px}.intro-copy p{font-size:15px}
.value-grid{display:block;padding:52px 0 60px}.value{margin-bottom:35px}.value:last-child{margin-bottom:0}.article-wrap{padding:74px 0 97px}.article-head h1{font-size:53px}.article-lead{font-size:15px}.article-layout{display:block;padding-top:36px}.article-toc{display:none}.article-body h2{font-size:25px}.footer-content{gap:15px}.footer-links{gap:18px}.splash-lockup{transform:translateY(-8px)}
}
@media(max-width:390px) {.container{width:calc(100% - 34px)}.site-nav{gap:15px}.site-nav a{font-size:11px}.home-hero{padding-top:60px}.app-preview{min-height:550px;padding-inline:21px}.entry{font-size:17px}.preview-bottom{width:242px}.article-wrap{padding-top:65px}}
@media(prefers-reduced-motion:reduce) {html{scroll-behavior:auto}*,*::before,*::after{transition:none!important}.splash-row{animation:none!important;opacity:1;transform:none}.splash-line-word{animation:none!important;color:#9A9188}.splash-strike{animation:none!important;opacity:1;transform:rotate(-1.5deg) scaleX(1)}#unline-splash{animation:splash-away 180ms linear 120ms both}}

/* v6 marketing phones: typography + actual app-inspired surfaces.
   All three loops are declarative. Text-width strike geometries share the same containing span. */
:root {--paper:#F8F4EA;--graphite:rgba(64,55,46,.58);--settled:#918A81;--soft-dot:rgba(130,121,110,.72);}
.refined-hero {display:flex;justify-content:space-between;align-items:end;gap:65px;min-height:0;padding:100px 0 79px;}
.refined-hero .hero-text {max-width:660px;padding:0;}
.refined-hero .hero-text h1 {font-size:clamp(68px,7vw,105px);line-height:1.02;margin:22px 0 28px;}
.refined-hero .hero-text .subhead {font-size:16px;max-width:500px;line-height:1.8;}
.refined-hero .hero-mantra {margin-top:24px;}
.hero-aside {align-self:end;flex:none;width:180px;margin-bottom:22px;color:#948C81;font-size:13px;line-height:1.75;}
.hero-aside p {margin:12px 0 0;}
.aside-rule {display:block;width:29px;height:1px;background:#B5A99A;}
.demo-gallery {padding:35px 0 112px;border-top:1px solid rgba(130,117,103,.14);}
.gallery-heading {margin-bottom:33px;}
.gallery-heading h2 {font-size:clamp(29px,3.7vw,46px);font-weight:400;letter-spacing:-.045em;line-height:1.2;margin:12px 0 0;}
.demo-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;align-items:start;}
.demo-card {min-width:0;display:flex;flex-direction:column;align-items:center;}
.demo-identifier {width:min(100%,328px);display:flex;justify-content:space-between;margin-bottom:13px;color:#91887C;font-size:11px;letter-spacing:.02em;}
.demo-identifier span:first-child {color:#ABA196;font-variant-numeric:tabular-nums;}
.demo-phone {width:min(100%,328px);height:694px;background:#F6F2EA;border:1px solid rgba(132,119,104,.105);border-radius:42px;padding:6px;box-shadow:0 15px 32px rgba(76,64,53,.025),0 2px 6px rgba(76,64,53,.012),inset 0 1px 0 rgba(255,255,255,.42);position:relative;overflow:hidden;isolation:isolate;}
.phone-bezel {width:100%;height:100%;background:#F8F4EA;border-radius:35px;overflow:hidden;position:relative;border:1px solid rgba(140,126,109,.055);}
.phone-display {position:relative;height:100%;width:100%;background:var(--paper);overflow:hidden;}
.device-status {height:39px;position:relative;z-index:3;display:flex;justify-content:space-between;align-items:center;padding:10px 22px 0;color:#29241F;}
.device-clock {font-size:12px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums;}
.device-signals {display:flex;gap:5px;align-items:center;color:#29241F;}
.device-signals .signal-icon {width:23px;height:11px;}
.device-signals .wifi-icon {width:13px;height:12px;}
.battery-icon {height:10px;width:18px;border:1.3px solid currentColor;border-radius:3px;display:flex;align-items:center;padding:1px;position:relative;}
.battery-icon:after {content:'';position:absolute;right:-3px;top:2px;width:2px;height:4px;background:#29241F;border-radius:0 2px 2px 0;}
.battery-icon span {display:block;height:100%;width:11px;background:currentColor;border-radius:1px;}
.device-date {height:80px;display:flex;justify-content:flex-end;align-items:center;padding:8px 25px 0;color:#AAA397;font-size:14px;font-weight:400;}
.device-date span {display:block;border-bottom:1px solid #DED9CF;padding-bottom:7px;}
.paper-window {position:absolute;top:124px;bottom:87px;left:0;right:0;perspective:1050px;pointer-events:none;}
.paper-content {position:absolute;inset:0;background:var(--paper);padding:27px 22px 0;display:flex;flex-direction:column;gap:55px;transform-origin:left center;}
.ink-item {display:grid;grid-template-columns:10px minmax(0,1fr);align-items:baseline;column-gap:15px;min-height:27px;font-size:21px;line-height:1.35;letter-spacing:-.026em;color:var(--ink);font-weight:400;white-space:nowrap;}
.pencil-dot {width:9px;height:9px;border-radius:50%;background:var(--soft-dot);display:block;margin-top:9px;align-self:start;}
.item-label {display:inline-block;width:max-content;max-width:100%;position:relative;line-height:1.35;}
.ink-target {display:block;position:relative;padding-left:25px;padding-right:12px;}
.label-with-stroke {display:inline-block;position:relative;width:max-content;max-width:100%;white-space:nowrap;}
.signature-stroke,.note-strike,.fixed-strike {position:absolute;left:0;top:50%;width:calc(100% + 3px);height:1.6px;border-radius:99px;background:var(--graphite);transform-origin:left center;transform:rotate(.2deg) scaleX(0);opacity:0;pointer-events:none;}
/* One moving mark: transform-only positioning avoids layout interpolation and midpoint jumps. */
.moving-pencil {display:block;position:absolute;z-index:1;top:calc(50% - 4.5px);left:0;width:9px;height:9px;border-radius:50%;background:var(--soft-dot);transform-origin:center center;transform:translate3d(var(--pencil-offset,0px),0,0) scale(var(--pencil-scale,1));opacity:var(--pencil-opacity,1);will-change:transform,opacity;pointer-events:none;}
/* The graphite line and its tip share one measured position, updated by the same timeline. */
.signature-demo .signature-stroke {transform:rotate(.2deg) scaleX(var(--ink-progress,0));opacity:var(--ink-opacity,0);will-change:transform,opacity;}
/* The drawn tip stops where the text ends. A separate right-aligned mark appears when finished. */
.settled-completion-dot {position:absolute;right:0;top:calc(50% - 4px);width:8px;height:8px;border-radius:50%;background:rgba(130,121,110,.17);opacity:0;pointer-events:none;}
.mind-pill {position:absolute;z-index:4;bottom:37px;left:50%;transform:translateX(-50%);height:49px;padding:0 19px;border-radius:99px;background:#EBE6DC;color:#756F66;display:flex;align-items:center;justify-content:center;white-space:nowrap;font-size:14px;gap:19px;}
.mind-pill b {font-weight:400;color:#AEA69B;padding-left:3px;}
.mind-pill i {width:1px;height:26px;background:#D6CFC4;}
.mind-pill strong {font-size:28px;line-height:1;font-weight:300;color:#29241F;transform:translateY(-1px);}
.home-indicator {position:absolute;z-index:4;bottom:10px;left:50%;width:81px;height:3px;background:#59534C;border-radius:99px;transform:translateX(-50%);opacity:.7;}
.demo-caption {width:min(100%,328px);font-size:16px;font-weight:400;color:#514941;letter-spacing:-.02em;margin:20px 0 0;text-align:center;}
.demo-endnote {margin:40px 0 0;font-size:12px;color:#A29A8F;text-align:center;}
/* Progress notes: a note's strike is sized to the text, never the entire row. */
.progress-demo .paper-content {gap:17px;}
.margin-notes {padding-left:25px;display:flex;flex-direction:column;gap:18px;}
.margin-note {display:flex;gap:12px;align-items:center;min-height:24px;white-space:nowrap;color:#514940;font-size:15.5px;letter-spacing:-.015em;line-height:1.5;}
.note-ring {height:8px;width:8px;border:1.2px solid rgba(130,121,110,.58);border-radius:100%;display:block;flex:none;align-self:center;}
.note-inline {display:inline-flex;gap:10px;align-items:center;min-width:0;}
.note-words {display:inline-block;position:relative;width:max-content;white-space:nowrap;}
.note-date {display:inline-flex;align-items:center;justify-content:center;align-self:center;height:24px;line-height:1;color:#AAA296;font-size:11px;white-space:nowrap;opacity:0;position:relative;top:3px;}
/* Page turn: underlay is already complete, finished item does not travel. */
.paper-stack {perspective:1000px;}
.next-paper {z-index:1;gap:17px;}
.yesterday-paper {z-index:2;gap:34px;transform-origin:left center;backface-visibility:hidden;}
.page-demo .paper-content {padding-top:27px;}
.done-item {padding-left:25px;padding-right:12px;display:block;position:relative;}
.quiet-placeholder {display:none;}
.done-label {display:inline-block;position:relative;width:max-content;max-width:100%;}
.done-label .item-label {color:var(--settled);}
.fixed-strike {opacity:1;transform:rotate(.2deg) scaleX(1);}
.right-mark {position:absolute;right:0;top:calc(50% - 4px);width:8px;height:8px;border-radius:50%;background:rgba(130,121,110,.17);}

/* v8: immediate-on-view, independently replayable demos with short visual offsets.
   A single pencil mark travels from bullet to text end to right margin; no swap. */
:root {--demo-duration:6.2s;}
.demo-replay {font:400 12px var(--sans);color:#958B7F;border:0;background:transparent;margin:10px 0 0;padding:7px 12px;border-radius:5px;display:inline-flex;align-items:center;gap:6px;cursor:pointer;transition:color .15s;}
.demo-replay span {font-size:17px;line-height:1;}
.demo-replay:hover,.demo-replay:focus-visible {color:#38312B;}
.demo-card .demo-caption {margin-top:16px;}
.demo-endnote {margin-top:25px;}

.demo-phone.is-playing .reset-signature,.demo-phone.is-playing .reset-progress,.demo-phone.is-playing .reset-turn {animation:demo-paper-reset var(--demo-duration) linear var(--motion-delay,0ms) infinite both;}
.signature-demo.is-playing .signature-stroke {animation:demo-signature-pressure var(--demo-duration) linear var(--motion-delay,0ms) infinite both;}
.signature-demo.is-playing .ink-target .item-label {animation:demo-title-quiet var(--demo-duration) linear var(--motion-delay,0ms) infinite both;}
.progress-demo.is-playing .is-progress-target .note-ring {animation:demo-progress-ring var(--demo-duration) linear var(--motion-delay,0ms) infinite both;}
.progress-demo.is-playing .is-progress-target .note-strike {animation:demo-progress-ink var(--demo-duration) linear var(--motion-delay,0ms) infinite both;}
.progress-demo.is-playing .is-progress-target .note-words>span:first-child {animation:demo-progress-quiet var(--demo-duration) linear var(--motion-delay,0ms) infinite both;}
.progress-demo.is-playing .is-progress-target .note-date {animation:demo-progress-date var(--demo-duration) linear var(--motion-delay,0ms) infinite both;}
.page-demo.is-playing .yesterday-paper {animation:demo-page-turn var(--demo-duration) linear var(--motion-delay,0ms) infinite both;}
.page-demo.is-playing .fixed-strike {animation:demo-page-pressure var(--demo-duration) linear var(--motion-delay,0ms) infinite both;}
.page-demo .device-date {position:relative;}
.page-demo .device-date span {position:absolute;right:25px;top:34px;}
.page-demo .device-date .date-before {opacity:1;}
.page-demo .device-date .date-after {opacity:0;}
.page-demo.is-playing .device-date .date-before {animation:demo-date-before var(--demo-duration) linear var(--motion-delay,0ms) infinite both;}
.page-demo.is-playing .device-date .date-after {animation:demo-date-after var(--demo-duration) linear var(--motion-delay,0ms) infinite both;}

@keyframes demo-paper-reset {
  0%,83% {opacity:1;}
  91%,98% {opacity:0;}
  100% {opacity:1;}
}
/* Timing is intentionally front-loaded. The first gesture begins within 250ms of entering view. */
@keyframes demo-signature-pressure {
  0%,19% {height:1.6px;background:var(--graphite);}
  21.5% {height:2px;background:rgba(64,55,46,.68);}
  24%,100% {height:1.6px;background:var(--graphite);}
}
@keyframes demo-title-quiet {
  0%,21% {color:#29241F;}
  33%,100% {color:var(--settled);}
}
@keyframes demo-progress-ring {
  0%,5% {background:transparent;transform:scale(1);}
  8% {transform:scale(.92);}
  12%,100% {background:rgba(130,121,110,.63);transform:scale(1);}
}
@keyframes demo-progress-ink {
  0%,8% {opacity:0;transform:rotate(.2deg) scaleX(0);}
  8.3% {opacity:1;transform:rotate(.2deg) scaleX(.01);animation-timing-function:cubic-bezier(.42,0,.28,1);}
  23%,100% {opacity:1;transform:rotate(.2deg) scaleX(1);}
}
@keyframes demo-progress-quiet {
  0%,20% {color:#514940;}
  30%,100% {color:var(--settled);}
}
@keyframes demo-progress-date {
  0%,25% {opacity:0;}
  33%,100% {opacity:1;}
}
@keyframes demo-page-pressure {
  0%,7% {height:1.6px;background:var(--graphite);}
  10% {height:2px;background:rgba(64,55,46,.68);}
  14%,100% {height:1.6px;background:var(--graphite);}
}
@keyframes demo-page-turn {
  0%,12% {transform:translateX(0) rotateY(0deg);opacity:1;box-shadow:0 0 0 rgba(61,53,45,0);}
  12.1% {animation-timing-function:cubic-bezier(.32,.02,.32,1);}
  30%,100% {transform:translateX(-14px) rotateY(-24deg);opacity:0;box-shadow:12px 0 22px rgba(61,53,45,.06);}
}
@keyframes demo-date-before {0%,18% {opacity:1;} 29%,98% {opacity:0;} 100% {opacity:1;}}
@keyframes demo-date-after {0%,18% {opacity:0;} 29%,85% {opacity:1;} 92%,100% {opacity:0;}}
@media(max-width:980px) {
  .demo-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:44px 22px;justify-content:center;}
  .demo-card:last-child {grid-column:1/-1;}
}
@media(max-width:700px) {
  .refined-hero {display:block;padding:69px 0 64px;min-height:0;}
  .refined-hero .hero-text h1 {font-size:clamp(62px,12vw,83px);margin:19px 0 23px;}
  .hero-aside {display:none;}
  .demo-gallery {padding:43px 0 82px;}
  .gallery-heading h2 {font-size:34px;}
  .demo-grid {grid-template-columns:1fr;gap:47px;}
  .demo-card:last-child {grid-column:auto;}
  .demo-phone {width:min(100%,328px);height:694px;}
  .demo-identifier {width:min(100%,328px);}
}
@media(max-width:365px) {
  .demo-phone {height:660px;}
  .ink-item {font-size:19px;column-gap:11px;}
  .paper-content {padding-inline:20px;}
  .margin-note {font-size:14px;gap:9px;}
  .margin-notes {padding-left:21px;}
}
/* Instant, fully settled product frames for visitors who prefer less motion. */
@media(prefers-reduced-motion:reduce) {
  .demo-phone.is-playing .reset-signature,.demo-phone.is-playing .reset-progress,.demo-phone.is-playing .reset-turn,
  .signature-demo.is-playing .signature-stroke,.signature-demo.is-playing .moving-pencil,.signature-demo.is-playing .ink-target .item-label,
  .progress-demo.is-playing .is-progress-target .note-ring,.progress-demo.is-playing .is-progress-target .note-strike,
  .progress-demo.is-playing .is-progress-target .note-words>span:first-child,.progress-demo.is-playing .is-progress-target .note-date,
  .page-demo.is-playing .yesterday-paper,.page-demo.is-playing .fixed-strike,
  .page-demo.is-playing .device-date .date-before,.page-demo.is-playing .device-date .date-after {animation:none!important;}
  .signature-demo .signature-stroke,.progress-demo .is-progress-target .note-strike {opacity:1;transform:rotate(.2deg) scaleX(1);height:1.6px;}
  .signature-demo .moving-pencil {transform:translate3d(var(--pencil-rest-offset,0px),0,0) scale(.88);opacity:.24;}
  .signature-demo .ink-target .item-label,.progress-demo .is-progress-target .note-words>span:first-child {color:var(--settled);}
  .progress-demo .is-progress-target .note-ring {background:rgba(130,121,110,.63);}
  .progress-demo .is-progress-target .note-date {opacity:1;}
  .page-demo .yesterday-paper {opacity:0;transform:translateX(-14px) rotateY(-24deg);}
  .page-demo .device-date .date-before {opacity:0;}
  .page-demo .device-date .date-after {opacity:1;}
}


/* v11 — fourth demo: the On my mind idea parking lot -> today's page.
   The on-device list stays quiet; only one selected thought travels. */
.demo-grid {grid-template-columns:repeat(2,minmax(0,1fr));max-width:776px;margin-inline:auto;gap:46px 44px;}
.demo-card:last-child {grid-column:auto;}
.parking-stage {position:absolute;z-index:2;top:39px;bottom:0;left:0;right:0;overflow:hidden;--park-left:47px;--park-top:225px;--park-dx:0px;--park-dy:-50px;}
.parking-view,.parking-daily-view {position:absolute;inset:0;background:var(--paper);}
.parking-heading {position:absolute;top:75px;left:24px;right:24px;display:flex;align-items:center;gap:15px;font-size:23px;font-weight:400;letter-spacing:-.032em;color:var(--ink);}
.parking-back-icon {font-size:34px;font-weight:300;line-height:0.75;color:#A79F94;transform:translateY(-1px);}
.parking-ideas {position:absolute;top:206px;left:22px;right:22px;display:flex;flex-direction:column;gap:39px;}
.parking-row {display:grid;grid-template-columns:10px minmax(0,1fr);align-items:start;column-gap:15px;color:var(--ink);font-size:21px;letter-spacing:-.027em;line-height:1.35;white-space:nowrap;min-height:28px;}
.parking-row .pencil-dot {margin-top:10px;}
.parking-words {display:inline-block;width:max-content;max-width:100%;}
.parking-bottom-label {position:absolute;bottom:103px;left:0;right:0;text-align:center;color:#B9B1A6;font-size:11px;letter-spacing:.01em;}
.parking-daily-view {opacity:0;}
.parking-daily-date {position:absolute;top:37px;right:25px;font-size:14px;color:#AAA397;}
.parking-daily-date span {border-bottom:1px solid #DED9CF;padding-bottom:7px;}
.parking-day-items {position:absolute;top:143px;left:22px;right:22px;display:flex;flex-direction:column;gap:54px;}
.parking-destination {opacity:0;}
.parking-traveler {position:absolute;z-index:3;top:var(--park-top);left:var(--park-left);transform:translate3d(0,0,0);display:flex;align-items:baseline;gap:15px;font-size:21px;white-space:nowrap;line-height:1.35;letter-spacing:-.027em;color:var(--ink);opacity:0;will-change:transform,opacity;pointer-events:none;}
.parking-traveler .pencil-dot {flex:none;align-self:start;margin-top:10px;}
.parking-footer {position:absolute;z-index:4;left:0;right:0;bottom:0;height:102px;}
.parking-footer .mind-pill {opacity:0;}
.parking-back-pill {position:absolute;bottom:37px;left:50%;transform:translateX(-50%);height:49px;display:flex;align-items:center;justify-content:center;gap:24px;padding:0 23px;border-radius:99px;background:#EBE6DC;color:#7C746B;font-size:14px;white-space:nowrap;}
.parking-pill-arrow {font-size:17px;color:#91877C;}
.parking-demo.is-playing .reset-parking {animation:demo-paper-reset var(--demo-duration) linear var(--motion-delay,0ms) infinite both;}
.parking-demo.is-playing .parking-view {animation:parking-out var(--demo-duration) linear var(--motion-delay,0ms) infinite both;}
.parking-demo.is-playing .parking-daily-view {animation:parking-in var(--demo-duration) linear var(--motion-delay,0ms) infinite both;}
.parking-demo.is-playing .parking-source {animation:parking-source-hide var(--demo-duration) linear var(--motion-delay,0ms) infinite both;}
.parking-demo.is-playing .parking-destination {animation:parking-destination-show var(--demo-duration) linear var(--motion-delay,0ms) infinite both;}
.parking-demo.is-playing .parking-traveler {animation:parking-travel var(--demo-duration) linear var(--motion-delay,0ms) infinite both;}
.parking-demo.is-playing .parking-back-pill {animation:parking-out var(--demo-duration) linear var(--motion-delay,0ms) infinite both;}
.parking-demo.is-playing .parking-footer .mind-pill {animation:parking-in var(--demo-duration) linear var(--motion-delay,0ms) infinite both;}
/* The source leaves only as its own traveling copy appears. Fade the view while
   the traveler glides toward its destination; preserve the two unselected ideas. */
@keyframes parking-out {0%,23% {opacity:1;} 41%,100% {opacity:0;}}
@keyframes parking-in {0%,26% {opacity:0;} 41%,100% {opacity:1;}}
@keyframes parking-source-hide {0%,17% {opacity:1;} 18%,100% {opacity:0;}}
@keyframes parking-destination-show {0%,49% {opacity:0;} 54%,100% {opacity:1;}}
@keyframes parking-travel {
  0%,16% {opacity:0;transform:translate3d(0,0,0);}
  18% {opacity:1;transform:translate3d(0,0,0);animation-timing-function:cubic-bezier(.34,.01,.25,1);}
  48% {opacity:1;transform:translate3d(var(--park-dx),var(--park-dy),0);}
  54%,100% {opacity:0;transform:translate3d(var(--park-dx),var(--park-dy),0);}
}
@media(max-width:700px) {
  .demo-grid {grid-template-columns:1fr;gap:47px;}
  .demo-card:last-child {grid-column:auto;}
}
@media(max-width:365px) {
  .parking-ideas,.parking-day-items {left:20px;right:20px;}
  .parking-row,.parking-traveler {font-size:19px;}
}
@media(prefers-reduced-motion:reduce) {
  .parking-demo.is-playing .reset-parking,.parking-demo.is-playing .parking-view,.parking-demo.is-playing .parking-daily-view,
  .parking-demo.is-playing .parking-source,.parking-demo.is-playing .parking-destination,.parking-demo.is-playing .parking-traveler,
  .parking-demo.is-playing .parking-back-pill,.parking-demo.is-playing .parking-footer .mind-pill {animation:none!important;}
  .parking-view,.parking-back-pill,.parking-traveler {opacity:0!important;}
  .parking-daily-view,.parking-destination,.parking-footer .mind-pill {opacity:1!important;}
}


/* v12 — closer match to actual app proportions and typography */
.demo-phone {height:706px; background:#F7F3EA; border-color:rgba(132,119,104,.085); box-shadow:0 10px 24px rgba(76,64,53,.02),0 1px 3px rgba(76,64,53,.01), inset 0 1px 0 rgba(255,255,255,.4);}
.phone-bezel {border-radius:37px; border-color:rgba(140,126,109,.04);}
.device-status {padding:13px 22px 0;}
.device-clock {font-size:11px; font-weight:600;}
.device-date {height:76px; font-size:13px; color:#B0A89D;}
.device-date span {border-bottom-color:#E2DCD2; padding-bottom:6px;}
.paper-window {top:126px; bottom:88px;}
.paper-content {padding:27px 24px 0; gap:52px;}
.ink-item {grid-template-columns:9px minmax(0,1fr); column-gap:14px; min-height:25px; font-size:18.5px; line-height:1.42; letter-spacing:-.022em; font-weight:400; color:#2C2722;}
.pencil-dot {width:8px; height:8px; margin-top:9px; background:rgba(130,121,110,.58);}
.item-label {line-height:1.42;}
.ink-target {padding-left:23px; padding-right:10px;}
.mind-pill {height:47px; padding:0 18px; bottom:36px; font-size:13px; color:#7F766C; background:#ECE7DD;}
.mind-pill strong {font-size:27px;}
.home-indicator {bottom:11px; width:78px; opacity:.62;}
.demo-caption {font-size:15px; color:#595149;}
.progress-demo .paper-content,.next-paper {gap:16px;}
.margin-notes {padding-left:23px; gap:16px;}
.margin-note {gap:11px; min-height:22px; font-size:14px; line-height:1.5; color:#595149;}
.note-ring {width:7px; height:7px; border-width:1.15px; border-color:rgba(130,121,110,.48);}
.note-date {font-size:10.5px; color:#B0A89D; top:4px;}
.done-label .item-label {color:#958D83;}
.right-mark,.settled-completion-dot {width:7px; height:7px; background:rgba(130,121,110,.13); top:calc(50% - 3.5px);}
.signature-stroke,.note-strike,.fixed-strike {height:1.55px; background:rgba(64,55,46,.52);}
.demo-grid {grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px 30px; justify-items:center;}
.demo-endnote {max-width:580px; margin-inline:auto;}

/* On my mind demo — close to actual app screen */
.parking-display {background:#D7D1C8;}
.parking-stage {position:absolute; inset:39px 0 0; overflow:hidden; --park-left:64px; --park-top:190px;}
.parking-view,.parking-daily-view {position:absolute; inset:0;}
.parking-sheet {position:absolute; inset:24px 0 0; background:#F8F4EA; border-radius:34px 34px 0 0;}
.parking-sheet-head {position:absolute; top:24px; left:22px; right:22px; display:flex; justify-content:space-between; align-items:center; color:#433C35; font-size:18px; font-weight:500; letter-spacing:-.02em;}
.parking-ideas {position:absolute; top:142px; left:24px; right:24px; display:flex; flex-direction:column; gap:34px;}
.parking-row {display:grid; grid-template-columns:8px minmax(0,1fr) auto; align-items:center; column-gap:14px; color:#2C2722; font-size:18px; font-weight:400; letter-spacing:-.02em; line-height:1.42; min-height:24px; white-space:nowrap;}
.parking-row .pencil-dot {margin-top:0; align-self:center;}
.parking-move-icon {color:#A69E92; font-size:14px; padding-left:8px;}
.parking-plus {position:absolute; left:50%; bottom:49px; transform:translateX(-50%); width:70px; height:70px; border-radius:50%; background:#E7E1D8; color:#403932; display:flex; align-items:center; justify-content:center; font-size:42px; font-weight:300; line-height:1;}
.parking-daily-view {opacity:0; background:#F8F4EA;}
.parking-daily-date {position:absolute; top:34px; right:24px; font-size:13px; color:#B0A89D;}
.parking-daily-date span {border-bottom:1px solid #E2DCD2; padding-bottom:6px;}
.parking-day-items {position:absolute; top:126px; left:24px; right:24px; display:flex; flex-direction:column; gap:48px;}
.parking-destination {opacity:0;}
.parking-daily-view .mind-pill {position:absolute; opacity:1; bottom:36px;}
.parking-traveler {position:absolute; z-index:3; top:var(--park-top); left:var(--park-left); display:flex; align-items:center; gap:14px; font-size:18px; font-weight:400; line-height:1.42; letter-spacing:-.02em; color:#2C2722; opacity:0; white-space:nowrap; transform:translate3d(0,0,0);}
.parking-traveler .pencil-dot {margin-top:0;}
.parking-demo.is-playing .reset-parking {animation:demo-paper-reset var(--demo-duration) linear var(--motion-delay,0ms) infinite both;}
.parking-demo.is-playing .parking-view {animation:parking-sheet-out var(--demo-duration) linear var(--motion-delay,0ms) infinite both;}
.parking-demo.is-playing .parking-daily-view {animation:parking-sheet-in var(--demo-duration) linear var(--motion-delay,0ms) infinite both;}
.parking-demo.is-playing .parking-source {animation:parking-source-hide var(--demo-duration) linear var(--motion-delay,0ms) infinite both;}
.parking-demo.is-playing .parking-destination {animation:parking-destination-show var(--demo-duration) linear var(--motion-delay,0ms) infinite both;}
.parking-demo.is-playing .parking-traveler {animation:parking-travel-v12 var(--demo-duration) linear var(--motion-delay,0ms) infinite both;}
@keyframes parking-sheet-out {0%,26% {opacity:1;} 42%,100% {opacity:0;}}
@keyframes parking-sheet-in {0%,28% {opacity:0;} 45%,100% {opacity:1;}}
@keyframes parking-travel-v12 {
  0%,14% {opacity:0; transform:translate3d(0,0,0);}
  16% {opacity:1; transform:translate3d(0,0,0);}
  44%,58% {opacity:1; transform:translate3d(0,182px,0);}
  62%,100% {opacity:0; transform:translate3d(0,182px,0);}
}
@media (max-width: 980px) {
  .demo-grid {grid-template-columns:1fr; gap:34px;}
}
@media (max-width: 700px) {
  .demo-phone {width:min(100%,336px); height:min(706px, calc((100vw - 70px) * 2.08)); min-height:690px;}
  .ink-item {font-size:17.5px;}
  .parking-row,.parking-traveler {font-size:17px;}
  .parking-sheet-head {font-size:17px;}
}
@media (prefers-reduced-motion: reduce) {
  .parking-demo.is-playing .reset-parking,.parking-demo.is-playing .parking-view,.parking-demo.is-playing .parking-daily-view,.parking-demo.is-playing .parking-source,.parking-demo.is-playing .parking-destination,.parking-demo.is-playing .parking-traveler {animation:none !important;}
  .parking-view {opacity:0!important;}
  .parking-daily-view,.parking-destination {opacity:1!important;}
  .parking-traveler {opacity:0!important;}
}


/* v13: size the *grid item* explicitly. Previous min(100%, 328px) width on a
   shrink-to-fit grid child formed a circular percentage, so the phone
   collapsed to its intrinsic minimum content width (145–203px). */
.demo-grid {
  width: 100%;
  max-width: 776px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 36px 28px;
  justify-items: center;
  align-items: start;
}
.demo-card {
  width: 100%;
  max-width: 336px;
  min-width: 0;
  justify-self: center;
  align-items: center;
}
.demo-identifier,
.demo-caption { width: 100%; max-width: 328px; }
.demo-phone {
  width: 328px;
  max-width: 100%;
  min-width: 0;
  flex: 0 0 auto;
}
@media (max-width: 820px) {
  .demo-grid { grid-template-columns: 1fr; gap: 42px; }
  .demo-card { width: min(100%, 336px); }
  .demo-phone { width: min(328px, 100%); }
}
@media (max-width: 390px) {
  .demo-phone { height: 686px; min-height: 0; }
}

/* Align parking sheet spacing with the real On my mind screen. */
.parking-sheet-head { top: 14px; }
.parking-ideas { top: 66px; }
.parking-row .pencil-dot { background: rgba(130,121,110,.26); }
.parking-move-icon { display:inline-flex; align-items:center; justify-content:center; padding-left:2px; color:#A9A096; }
.parking-move-icon svg { width:24px; height:23px; display:block; }
@keyframes parking-travel-v12 {
  0%,14% {opacity:0; transform:translate3d(0,0,0);}
  16% {opacity:1; transform:translate3d(0,0,0);animation-timing-function:cubic-bezier(.31,.03,.22,1);}
  48%,58% {opacity:1; transform:translate3d(var(--park-dx),var(--park-dy),0);}
  62%,100% {opacity:0; transform:translate3d(var(--park-dx),var(--park-dy),0);}
}
@media (max-width: 365px) {
  .parking-row { white-space:normal; }
  .parking-words { white-space:normal; }
  .parking-traveler { font-size:16px; }
}

/* v15 · On my mind is a choice, not a flying text animation.
   Day → open modal → choose move → tap Done → today's page. */
:root {--lot-cycle:8.7s;}
.parking-demo .lot-display {background:#F8F4EA;}
.parking-demo .device-status {z-index:8;}
.lot-today {position:absolute;inset:39px 0 0;background:var(--paper);}
.lot-day-date {position:absolute;top:38px;right:24px;font-size:13px;color:#ADA69A;}
.lot-day-date span {border-bottom:1px solid #DFD9CF;padding-bottom:7px;}
.lot-day-list {position:absolute;top:140px;left:24px;right:24px;display:flex;flex-direction:column;gap:48px;}
.lot-item {display:grid;grid-template-columns:8px minmax(0,1fr);align-items:baseline;column-gap:15px;font:400 18px/1.42 var(--sans);letter-spacing:-.02em;color:#29241F;white-space:nowrap;}
.lot-dot {display:block;width:8px;height:8px;border-radius:50%;background:rgba(130,121,110,.35);margin-top:9px;align-self:start;}
.lot-added {opacity:0;transform:translateY(6px);}
.lot-main-pill {bottom:36px;transform:translateX(-50%) scale(1);}
.lot-count {position:relative;display:inline-block;min-width:9px;height:1em;vertical-align:baseline;font-weight:400;color:#AEA69B;}
.lot-count span {position:absolute;inset:0;}
.lot-count-after {opacity:0;}
.lot-scrim {position:absolute;z-index:3;inset:0;background:#CCC8C1;opacity:0;pointer-events:none;}
.lot-sheet {position:absolute;z-index:4;top:51px;left:0;right:0;bottom:0;border-radius:38px 38px 0 0;background:var(--paper);overflow:hidden;transform:translate3d(0,110%,0);will-change:transform;}
.lot-header {position:absolute;top:29px;left:23px;right:23px;display:flex;justify-content:space-between;align-items:center;font:500 18px/1.4 var(--sans);letter-spacing:-.02em;color:#352F2A;}
.lot-done {font-weight:400;color:#756F66;border-radius:5px;transform:scale(1);transform-origin:right center;}
.lot-list {position:absolute;left:24px;right:24px;top:117px;display:flex;flex-direction:column;gap:31px;}
.lot-idea {position:relative;display:grid;grid-template-columns:8px minmax(0,1fr) 26px;align-items:start;column-gap:14px;font:400 18px/1.42 var(--sans);letter-spacing:-.02em;color:#29241F;min-height:25px;}
.lot-words {min-width:0;white-space:nowrap;}
.lot-idea .lot-dot {margin-top:9px;}
.lot-move {height:28px;width:28px;display:flex;justify-content:center;align-items:center;color:#9E958A;border-radius:50%;transform:scale(1);transform-origin:center;position:relative;right:1px;top:-2px;}
.lot-move svg {display:block;}
.lot-add {position:absolute;bottom:54px;left:50%;transform:translateX(-50%);width:68px;height:68px;display:grid;place-items:center;background:#ECE7DE;border-radius:50%;color:#3D3731;font:300 40px/1 var(--sans);padding-bottom:5px;}
.lot-reset-veil {position:absolute;inset:39px 0 0;z-index:6;background:var(--paper);opacity:0;pointer-events:none;}
.parking-demo.is-playing .lot-main-pill {animation:lot-open-press var(--lot-cycle) linear infinite both;}
.parking-demo.is-playing .lot-scrim {animation:lot-scrim-inout var(--lot-cycle) linear infinite both;}
.parking-demo.is-playing .lot-sheet {animation:lot-visit-sheet var(--lot-cycle) linear infinite both;}
.parking-demo.is-playing .lot-move {animation:lot-move-press var(--lot-cycle) linear infinite both;}
.parking-demo.is-playing .lot-selected {animation:lot-remove-idea var(--lot-cycle) linear infinite both;}
.parking-demo.is-playing .lot-remains {animation:lot-remain-relax var(--lot-cycle) linear infinite both;}
.parking-demo.is-playing .lot-done {animation:lot-done-press var(--lot-cycle) linear infinite both;}
.parking-demo.is-playing .lot-added {animation:lot-new-on-day var(--lot-cycle) linear infinite both;}
.parking-demo.is-playing .lot-count-before {animation:lot-count-old var(--lot-cycle) linear infinite both;}
.parking-demo.is-playing .lot-count-after {animation:lot-count-new var(--lot-cycle) linear infinite both;}
.parking-demo.is-playing .lot-reset-veil {animation:lot-cycle-veil var(--lot-cycle) linear infinite both;}
@keyframes lot-open-press {
  0%,9% {filter:none;transform:translateX(-50%) scale(1);}
  11% {filter:brightness(.96);transform:translateX(-50%) scale(.97);}
  14%,100% {filter:none;transform:translateX(-50%) scale(1);}
}
@keyframes lot-scrim-inout {
  0%,10% {opacity:0;}
  13% {opacity:.04;}
  23%,65% {opacity:1;}
  76%,100% {opacity:0;}
}
@keyframes lot-visit-sheet {
  0%,11% {transform:translate3d(0,110%,0);}
  22%,65% {transform:translate3d(0,0,0);}
  76%,100% {transform:translate3d(0,110%,0);}
}
@keyframes lot-move-press {
  0%,36% {background:transparent;transform:scale(1);color:#9E958A;}
  38% {background:rgba(130,121,110,.13);transform:scale(.94);color:#5A5249;}
  42%,100% {background:transparent;transform:scale(1);color:#9E958A;}
}
@keyframes lot-remove-idea {
  0%,40% {opacity:1;transform:translateX(0);}
  46%,100% {opacity:0;transform:translateX(8px);}
}
@keyframes lot-remain-relax {
  0%,42% {transform:translateY(0);}
  51%,100% {transform:translateY(-56px);}
}
@keyframes lot-done-press {
  0%,59% {color:#756F66;transform:scale(1);}
  62% {color:#403A33;transform:scale(.96);}
  65%,100% {color:#756F66;transform:scale(1);}
}
@keyframes lot-new-on-day {
  0%,72% {opacity:0;transform:translateY(6px);}
  80%,93% {opacity:1;transform:translateY(0);}
  98%,100% {opacity:0;transform:translateY(6px);}
}
@keyframes lot-count-old {0%,44% {opacity:1;} 49%,97% {opacity:0;} 100% {opacity:1;}}
@keyframes lot-count-new {0%,44% {opacity:0;} 49%,97% {opacity:1;} 100% {opacity:0;}}
@keyframes lot-cycle-veil {
  0% {opacity:1;} 3%,93% {opacity:0;} 98%,100% {opacity:1;}
}
@media (max-width:390px) {
 .lot-item,.lot-idea {font-size:17px;}
 .lot-header {font-size:17px;}
 .lot-list,.lot-day-list {left:20px;right:20px;}
}
@media (prefers-reduced-motion:reduce) {
 .parking-demo.is-playing .lot-main-pill,.parking-demo.is-playing .lot-move,.parking-demo.is-playing .lot-selected,
 .parking-demo.is-playing .lot-remains,.parking-demo.is-playing .lot-sheet,.parking-demo.is-playing .lot-scrim,
 .parking-demo.is-playing .lot-done,.parking-demo.is-playing .lot-added,.parking-demo.is-playing .lot-count-before,
 .parking-demo.is-playing .lot-count-after,.parking-demo.is-playing .lot-reset-veil {animation:none!important;}
 .lot-sheet {transform:translate3d(0,110%,0)!important;}
 .lot-scrim,.lot-reset-veil {opacity:0!important;}
 .lot-added {opacity:1!important;transform:none!important;}
 .lot-count-before {opacity:0!important;}
 .lot-count-after {opacity:1!important;}
}

/* Get Unline — store-ready area, with no fake App Store destination. */
.hero-get-link {display:inline-flex;margin-top:30px;gap:16px;align-items:center;font-size:13px;font-weight:500;text-decoration:none;color:#4F463E;border-bottom:1px solid #C3B9AB;padding-bottom:8px;}
.hero-get-link:hover {border-color:#594C40;}
.release-section {border-top:1px solid var(--line);padding:97px 0 104px;scroll-margin-top:30px;}
.release-section-head {margin-bottom:36px;}
.release-section-head h2 {font-size:clamp(39px,4.4vw,58px);font-weight:400;letter-spacing:-.052em;line-height:1.1;margin:17px 0;}
.release-section-head>p:last-child {font-size:15px;color:#82786E;line-height:1.8;margin:0;}
.release-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;}
.release-card {min-height:306px;padding:37px 39px;border:1px solid rgba(130,117,103,.17);background:#F7F3EB;border-radius:16px;}
.release-card-inner {height:100%;display:flex;flex-direction:column;align-items:flex-start;}
.release-icon {margin-bottom:15px;}
.release-icon img {width:52px;height:52px;border-radius:10px;display:block;}
.release-platform {font-size:10px;font-weight:500;letter-spacing:.13em;color:#8C8176;display:flex;align-items:center;gap:9px;}
.platform-dot {width:6px;height:6px;border-radius:50%;background:#B6AA9B;}
.release-card h3 {font-size:27px;font-weight:400;letter-spacing:-.035em;line-height:1.2;margin:18px 0 11px;}
.release-card p {font-size:14px;line-height:1.75;color:#776E63;margin:0 0 27px;max-width:340px;}
.release-card-bottom {margin-top:auto;width:100%;display:flex;align-items:center;justify-content:space-between;gap:18px;}
.release-status {font-size:13px;color:#91887E;border-bottom:1px solid #D8CFC1;padding:0 0 8px;}
.release-action {display:inline-flex;align-items:center;justify-content:space-between;gap:18px;margin-top:auto;border-radius:999px;background:#302B26;color:#F8F4EA;text-decoration:none;font-weight:400;font-size:13px;min-height:46px;padding:0 19px;transition:background .18s;}
.release-action:hover {background:#50453C;}
.release-action-outline {background:transparent;border:1px solid #AAA093;color:#3F3831;}
.release-action-outline:hover {background:#ECE6DC;color:#29241F;}
.release-small {font-size:11px;line-height:1.5;color:#9A9085;margin-top:12px;}
.release-qr {width:88px;height:88px;background:#fff;border-radius:8px;padding:5px;}
[hidden] {display:none!important;}

/* Android closed-test invitation page */
.android-page {padding:103px 0 135px;}
.android-intro {max-width:840px;margin-bottom:70px;}
.android-intro h1 {font-size:clamp(48px,6.7vw,84px);line-height:1.1;letter-spacing:-.056em;font-weight:400;margin:22px 0 28px;}
.android-intro h1 span {color:#9A9186;}
.android-intro>p:last-child {font-size:16px;line-height:1.9;max-width:610px;color:#766C62;}
.android-apply-grid {border-top:1px solid var(--line);display:grid;grid-template-columns:1fr .8fr;gap:12%;padding-top:49px;}
.android-apply h2 {font-size:39px;line-height:1.2;letter-spacing:-.04em;font-weight:400;margin:16px 0 15px;}
.android-apply>p:not(.eyebrow),.android-process li p {line-height:1.85;font-size:15px;color:#746C61;}
.android-email-action {display:inline-flex;align-items:center;justify-content:space-between;gap:26px;background:var(--ink);color:#F8F4EA;text-decoration:none;border-radius:100px;padding:14px 21px;margin-top:19px;font-size:13px;}
.android-email-action:hover {background:#51463D;}
.android-note {font-size:12px!important;color:#9B9083!important;max-width:410px;margin-top:17px;}
.android-process ol {list-style:none;margin:25px 0 0;padding:0;}
.android-process li {display:grid;grid-template-columns:31px 1fr;gap:13px;border-top:1px solid var(--line);padding:20px 0;}
.android-process li>span {font-size:11px;color:#AD9F90;}
.android-process li strong {font-size:15px;font-weight:500;color:#332D28;}
.android-process li p {margin:6px 0 0;}
.android-process-footer {font-size:12px;color:#8E8379;margin-top:15px;}
.android-process-footer a {text-underline-offset:4px;}
@media (max-width:820px) {
 .release-grid {grid-template-columns:1fr;}
 .release-card {min-height:275px;}
 .android-apply-grid {grid-template-columns:1fr;gap:54px;}
}
@media (max-width:700px) {
 .release-section {padding:69px 0 79px;}
 .release-card {padding:27px 25px;border-radius:13px;}
 .release-card h3 {font-size:24px;}
 .android-page {padding:72px 0 90px;}
 .android-intro {margin-bottom:47px;}
 .android-intro h1 {font-size:clamp(43px,11vw,60px);}
 .android-intro>p:last-child {font-size:15px;}
}


/* v16: a quiet, persistent place to find the iOS and Android options. */
.site-nav {gap:clamp(18px,2.5vw,35px);}
.site-nav a.header-download {
  display:inline-flex;align-items:center;gap:13px;justify-content:center;
  padding:10px 16px;min-height:38px;border:1px solid rgba(130,117,103,.23);
  border-radius:100px;background:rgba(235,230,220,.47);color:#403831;
  font-size:12.5px;font-weight:500;box-shadow:none;white-space:nowrap;
  transition:background .2s ease,border-color .2s ease;
}
.site-nav a.header-download:hover {background:#ECE6DB;border-color:rgba(130,117,103,.39);color:#29241F;}
.site-nav a.header-download span {font-size:13px;color:#8C8175;font-weight:400;}
@media (max-width:780px) {
 .site-nav {gap:18px;}
 .site-nav a[href="index.html"] {display:none;}
}
@media (max-width:490px) {
 .site-nav a:not(.header-download) {display:none;}
 .header-content {gap:10px;}
 .site-nav {gap:0;}
 .site-nav a.header-download {min-height:36px;padding:9px 14px;font-size:12px;}
}


/* v17 — screen-accurate quiet ink; visually matched to the real app screenshots.
   Phones and motion logic intentionally untouched. All values scoped to phone demos. */
.demo-phone { --settled:#978E84; --graphite:rgba(64,55,46,.56); --soft-dot:rgba(130,121,110,.52); }
.demo-phone .ink-item {
  font-family:var(--sans);font-size:16.5px;font-weight:400;
  line-height:1.54;letter-spacing:-.005em;color:#453D36;
  min-height:25px;column-gap:13px;
}
.demo-phone .item-label {line-height:inherit;}
.demo-phone .ink-target {padding-left:22px;}
.demo-phone .pencil-dot {width:7px;height:7px;margin-top:9px;background:rgba(130,121,110,.47);}
.demo-phone .margin-note {
  font-size:12.8px;font-weight:400;line-height:1.55;letter-spacing:0;
  color:#62594F;min-height:22px;
}
.demo-phone .margin-notes {gap:17px;padding-left:22px;}
.demo-phone .note-ring {width:7px;height:7px;border-color:rgba(130,121,110,.46);}
.demo-phone .note-date {font-size:10px;top:3px;color:#A9A095;}
.demo-phone .device-date {font-size:11.8px;color:#AEA69B;}
.demo-phone .device-date span {border-bottom-color:#E4DED4;}
.demo-phone .mind-pill {
  font-size:12px;font-weight:400;color:#82796F;
  background:#EBE6DD;height:46px;gap:16px;
}
.demo-phone .mind-pill b {color:#B5ACA0;}
.demo-phone .mind-pill i {height:25px;}
.demo-phone .mind-pill strong {font-size:26px;font-weight:300;}
.demo-phone .done-label .item-label {color:#9B9389;}
.demo-phone .fixed-strike, .demo-phone .signature-stroke, .demo-phone .note-strike {
  background:var(--graphite);
}
.demo-phone .right-mark, .demo-phone .settled-completion-dot {background:rgba(130,121,110,.14);}
/* On my mind uses the same calm text weight as the main app; not a separate promo card. */
.demo-phone .lot-header {
  font:400 15.6px/1.45 var(--sans);letter-spacing:-.008em;
  color:#494139;
}
.demo-phone .lot-idea, .demo-phone .lot-item {
  font:400 16px/1.52 var(--sans);letter-spacing:-.002em;color:#453D36;
  white-space:normal;min-height:26px;
}
.demo-phone .lot-idea .lot-dot, .demo-phone .lot-item .lot-dot {
  width:7px;height:7px;margin-top:8px;
  background:rgba(130,121,110,.29);
}
.demo-phone .lot-move {color:#ABA296;}
.demo-phone .lot-day-date {font-size:11.8px;color:#AEA69B;}
.demo-phone .lot-add {color:#453E37;}
.demo-phone .lot-count {font-weight:400;}
@media (max-width:365px) {
 .demo-phone .ink-item {font-size:15.8px;}
 .demo-phone .lot-idea,.demo-phone .lot-item {font-size:15.5px;}
 .demo-phone .lot-header {font-size:15px;}
 .demo-phone .margin-note {font-size:12.5px;}
}

/* v18 — matched Apple and Android platform marks in the download cards. */
.release-icon {width:52px;height:52px;display:flex;align-items:center;justify-content:center;margin-bottom:15px;flex:none;}
.release-icon img {display:block;width:36px;height:36px;object-fit:contain;border-radius:0;}
.release-card-inner {min-height:100%;}
/* Both actions occupy matching bottom space despite iOS being pre-release. */
.release-card .release-card-bottom {min-height:46px;}
.release-card .release-status {display:inline-flex;align-items:center;min-height:46px;padding-bottom:0;}
@media (max-width:700px) { .release-icon {width:48px;height:48px;} .release-icon img {width:33px;height:33px;} }