/* Local faces match the body, heading and expanded display advances.
   Zero uses its own metric so ch-based document measures stay stable. */
@font-face {
  font-family: "Mona Sans Fallback";
  src: local("Arial");
  font-weight: 200 599;
  font-stretch: 100%;
  size-adjust: 102.37725%;
  ascent-override: 106.46897%;
  descent-override: 31.25694%;
  line-gap-override: 0%;
  unicode-range: U+0000-002F, U+0031-10FFFF;
}
@font-face {
  font-family: "Mona Sans Fallback";
  src: local("Arial");
  font-weight: 200 599;
  font-stretch: 100%;
  size-adjust: 114.31322%;
  ascent-override: 95.35205%;
  descent-override: 27.99326%;
  line-gap-override: 0%;
  unicode-range: U+0030;
}
@font-face {
  font-family: "Mona Sans Fallback";
  src: local("Arial Bold");
  font-weight: 600 900;
  font-stretch: 100%;
  size-adjust: 100.43398%;
  ascent-override: 108.52901%;
  descent-override: 31.86173%;
  line-gap-override: 0%;
  unicode-range: U+0000-002F, U+0031-10FFFF;
}
@font-face {
  font-family: "Mona Sans Fallback";
  src: local("Arial Bold");
  font-weight: 600 900;
  font-stretch: 100%;
  size-adjust: 114.83653%;
  ascent-override: 94.91753%;
  descent-override: 27.86570%;
  line-gap-override: 0%;
  unicode-range: U+0030;
}
@font-face {
  font-family: "Mona Sans Fallback";
  src: local("Arial Bold");
  font-weight: 200 900;
  font-stretch: 112%;
  size-adjust: 107.69242%;
  ascent-override: 101.21418%;
  descent-override: 29.71426%;
  line-gap-override: 0%;
  unicode-range: U+0000-002F, U+0031-10FFFF;
}
@font-face {
  font-family: "Mona Sans Fallback";
  src: local("Arial Bold");
  font-weight: 200 900;
  font-stretch: 112%;
  size-adjust: 131.27083%;
  ascent-override: 83.03444%;
  descent-override: 24.37708%;
  line-gap-override: 0%;
  unicode-range: U+0030;
}
@font-face {
  font-family: "Mona Sans Fallback";
  src: local("Arial Bold");
  font-weight: 200 900;
  font-stretch: 125%;
  size-adjust: 117.14842%;
  ascent-override: 93.04437%;
  descent-override: 27.31578%;
  line-gap-override: 0%;
  unicode-range: U+0000-002F, U+0031-10FFFF;
}
@font-face {
  font-family: "Mona Sans Fallback";
  src: local("Arial Bold");
  font-weight: 200 900;
  font-stretch: 125%;
  size-adjust: 144.20270%;
  ascent-override: 75.58804%;
  descent-override: 22.19099%;
  line-gap-override: 0%;
  unicode-range: U+0030;
}
@font-face {
  font-family: "Mona Sans";
  src: url("/fonts/MonaSansVF.875ad1fab0c1.woff2") format("woff2");
  font-style: normal;
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-display: swap;
}
:root { --paper: #E9EAE6;
  --ink: #000000;
  --ink-2: #555753;
  --rule: #C6C8C2;
  --focus: #000000;
  --measure: 62ch;
  --gutter: clamp(20px, 4vw, 56px);
  --edge: max(var(--gutter), calc((100% - 1600px) / 2 + var(--gutter)));
  --num: 54px;                  
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 240ms;
  color-scheme: light; }
@media (max-width: 1000px) {
:root { --num: 40px; }
}
@media (prefers-color-scheme: dark) {
:root { --paper: #000000; --ink: #ECEDE9; --ink-2: #8D8F8B; --rule: #262726; --focus: #ECEDE9;
    color-scheme: dark; }
}
[data-app="rowwise"] { --app-bg: #1B1715; --app-ink: #F3ECE8; --app-ink-2: #AFA29C; --app-accent: #D9A79A; --app-lift: #262120; --app-rule: #463C37;
  --flood-l: #1B1715; --flood-l-ink: #F3ECE8; --flood-l-2: #AFA29C; --flood-d: #D9A79A; --flood-d-ink: #1B1715; --flood-d-2: #5A3D35; }
[data-app="rowwise"] { --no-l: #8E4F41; }
[data-app] { --no: var(--no-l); --flood: var(--flood-l); --flood-ink: var(--flood-l-ink); --flood-2: var(--flood-l-2); }
@media (prefers-color-scheme: dark) {
:root [data-app] { --no: var(--flood-d); --flood: var(--flood-d); --flood-ink: var(--flood-d-ink); --flood-2: var(--flood-d-2); }
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 95.92087%; }
body { margin: 0; background: var(--paper); color: var(--ink);
  font-family: "Mona Sans", "Mona Sans Fallback", ui-sans-serif, -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px; line-height: 1.5; font-stretch: 100%;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
img { max-width: 100%; height: auto; display: block; }
p { margin: 0; text-wrap: pretty; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.caption { text-wrap: balance; }
.masthead { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; padding: 28px var(--edge) 0; }
.wordmark { font-weight: 650; font-stretch: 112%; letter-spacing: -0.01em; font-size: 19px; text-decoration: none; }
.masthead nav { display: flex; gap: 24px; font-size: 16px; }
.masthead nav a { text-decoration: none; color: var(--ink-2); }
.masthead nav a[aria-current="page"] { color:var(--ink); }
@media(hover:hover) and (pointer:fine) {
.masthead nav a:hover { color:var(--ink); }
}
.statement { padding: clamp(64px, 8vw, 104px) var(--edge) clamp(40px, 5vw, 64px) calc(var(--edge) + var(--num) + 16px);
  font-size: clamp(22px, 2.4vw, 30px); line-height: 1.25; font-weight: 450; letter-spacing: -0.01em;
  max-width: 24ch; box-sizing: content-box; text-wrap: balance; }
.index { list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--rule); }
.index > li { border-top: 1px solid var(--rule); }
.row { --name-size: clamp(52px, 10vw, 152px);
  position: relative; overflow: hidden; container-type: inline-size;
  display: grid; align-items: last baseline;
  grid-template-columns: var(--num) minmax(0, 1fr) 10em;
  column-gap: 16px; padding: 16px var(--edge) 20px;
  text-decoration: none; color: var(--ink); }
.row .no { font-size: 15px; color: var(--ink-2); align-self: start; padding-top: 0.6em; }
.index > li[data-app] .row .no { color: var(--no); }
.row .name { margin-left: 0; font-size: min(var(--name-size), 17cqi); line-height: 0.9; font-weight: 800; letter-spacing: -0.022em; font-stretch: 100%; white-space: nowrap; position: relative; z-index: 1; }
.row .what { display: block; font-size: 16px; line-height: 1.35; font-weight: 450; letter-spacing: 0; font-stretch: 100%; color: var(--ink-2); margin-top: calc(var(--name-size) * 0.16); white-space: normal; }
.row .status { font-size: 15px; color: var(--ink-2); text-align: right; }
.row .shot { position: absolute; z-index: 0; right: calc(var(--edge) + 11em); top: 28px; height: 150%; aspect-ratio: 9 / 19.5;
  border-radius: 26px 26px 0 0; overflow: hidden; opacity: 0; transform: translateY(40px);
  pointer-events: none; }
.row .shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
a.row:focus-visible { outline: 2px solid currentColor; outline-offset: -6px; }
@media (hover: hover) and (pointer: fine) {
a.row { transition: background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out); }
a.row .name { transition: font-stretch 360ms var(--ease-out), letter-spacing 360ms var(--ease-out); }
a.row .shot { transition: opacity 200ms ease, transform 360ms var(--ease-out); }
a.row:hover { background: var(--flood); color: var(--flood-ink); }
a.row:hover .name { font-stretch: 125%; letter-spacing: -0.012em; }
.index > li[data-app] a.row:hover .no, .index > li[data-app] a.row:hover .what, .index > li[data-app] a.row:hover .status { color: var(--flood-2); }
a.row:hover .shot { opacity: 1; transform: none; }
.index .next a.row:hover { background: transparent; color: var(--ink); }
.index .next a.row:hover .name { font-weight: 440; }
.index .next a.row:hover .what { color: var(--ink-2); }
}
a.row:focus-visible, a.row:focus-visible .name, a.row:focus-visible .shot { transition: none; }
a.row:focus-visible .name { font-stretch: 125%; letter-spacing: -0.012em; }
a.row:focus-visible .shot { opacity: 1; transform: none; }
.index > li[data-app] a.row:focus-visible { background: var(--flood); color: var(--flood-ink); }
.index > li[data-app] a.row:focus-visible .no, .index > li[data-app] a.row:focus-visible .what, .index > li[data-app] a.row:focus-visible .status { color: var(--flood-2); }
.index .next .row { color: var(--ink-2); }
.index .next .name { font-weight: 300; font-stretch: 100%; transition: font-weight var(--dur) var(--ease-out); }
@media (min-width: 1001px) {
.index.solo > li[data-app] .row { padding-block: clamp(32px, 5vw, 64px); min-height: clamp(240px, 30vw, 380px); align-content: end; }
.index.solo > li[data-app] .row .no { align-self: baseline; }
}
@media (hover: hover) and (pointer: fine) {
.index.solo > li[data-app] .row .shot { opacity: 1; transform: none; }
}
@media (hover:none) {
.index > li[data-app] a.row { background:var(--flood); color:var(--flood-ink); }
.index > li[data-app] a.row .no, .index > li[data-app] a.row .what, .index > li[data-app] a.row .status { color:var(--flood-2); }
}
@media (max-width: 1000px) {
.row { grid-template-columns: var(--num) minmax(0, 1fr); row-gap: 8px; }
.row .status { grid-column: 2; text-align: left; }
.row .shot { display: none; }
}
.colophon { display: grid; grid-template-columns: var(--num) minmax(0, 1fr) minmax(0, 1fr) 16em; column-gap: 16px; row-gap: 28px;
  padding: 56px var(--edge) 56px; margin-top: 120px; border-top: 1px solid var(--rule);
  font-size: 15px; color: var(--ink-2); }
.colophon > div:first-child { grid-column: 2; }
.colophon strong { display: block; color: var(--ink); font-weight: 600; margin-bottom: 6px; }
.colophon a { color: var(--ink); }
.copy-btn { font: inherit; font-size: 13px; min-height: 28px; color: var(--ink-2); background: none; border: 1px solid var(--rule); border-radius: 999px; padding: 1px 9px; margin-left: 8px; cursor: pointer; vertical-align: 1px; }
@media(hover:hover) and (pointer:fine) {
.copy-btn:hover { color:var(--ink); border-color:var(--ink); }
}
@media (max-width: 1000px) {
.colophon { grid-template-columns: 1fr; }
.colophon > div:first-child { grid-column: 1; }
}
.doc { padding: clamp(48px, 8vw, 104px) var(--edge) 0; }
.doc > * { max-width: var(--measure); }
@media (min-width: 641px) {
.doc > :not(h1) { margin-left: calc(var(--num) + 16px); }
}
.doc h1 { font-size: clamp(44px, 7vw, 92px); line-height: 0.95; font-weight: 800; font-stretch: 112%; letter-spacing: -0.02em; margin: 0 0 28px; max-width: none; padding-bottom: 0.08em; }
.doc .lede { font-size: clamp(20px, 2.2vw, 26px); line-height: 1.35; font-weight: 450; margin-bottom: 44px; max-width: 34ch; }
.doc h2 { font-size: 21px; font-weight: 650; font-stretch: 100%; margin-block: 48px 10px; }
.doc p + p { margin-top: 14px; }
.doc ul { padding-left: 1.2em; margin-block: 10px 0; }
.doc li + li { margin-top: 6px; }
.doc .note { color: var(--ink-2); font-size: 15px; }
.mailto + .copy-btn { display: table; margin: 14px 0 0; min-height: 36px; padding: 4px 14px; }
.mailto { white-space: normal; overflow-wrap: anywhere; display: inline-block; font-size: clamp(22px, 3.4vw, 40px); font-weight: 650; font-stretch: 112%; letter-spacing: -0.01em; text-decoration: none; border-bottom: 2px solid currentColor; padding-bottom: 2px; }
.plain-table { border-collapse: collapse; width: 100%; margin-top: 12px; font-size: 16px; }
.plain-table th, .plain-table td { text-align: left; vertical-align: top; padding: 10px 16px 10px 0; border-top: 1px solid var(--rule); }
.plain-table th { font-weight: 600; width: 38%; }
.listing { list-style: none; padding: 0 !important; margin-top: 12px !important; }
.listing li { display: grid; grid-template-columns: 2.6em 1fr; gap: 12px; padding: 12px 0; border-top: 1px solid var(--rule); margin: 0 !important; }
.listing li:last-child { border-bottom: 1px solid var(--rule); }
.listing .no { color: var(--ink-2); }
.listing .links { display: flex; flex-wrap: wrap; gap: 4px 20px; }
body[data-app] { background: var(--app-bg); color: var(--app-ink); --ink: var(--app-ink); --ink-2: var(--app-ink-2); --rule: var(--app-rule); --focus: var(--app-accent); }
body[data-app="rowwise"] { color-scheme: dark; }
.vt { display: inline-block; }
.textlink { color: var(--app-ink); font-weight: 650; }
:root { --step: 260ms cubic-bezier(.23,1,.32,1); }
.app-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:48px; padding:64px var(--edge) 0; }
.app-main { min-width:0; }
.hero h1 { margin:0; font-size:clamp(51px,20cqi,152px); line-height:.82; font-weight:800; font-stretch:125%; letter-spacing:-.025em; padding-bottom:.1em; }
.hero .rule { height:2px; background:var(--app-accent); margin-top:24px; transform-origin:left; }
.hero .lede { margin:28px 0 0 calc(var(--num) + 16px); font-size:clamp(22px,2.3vw,30px); line-height:1.25; max-width:26ch; font-weight:450; text-wrap:balance; }
.lockup, .hero .try, .sketch-note { margin:28px 0 0 calc(var(--num) + 16px); max-width:44ch; }
.lockup .soon { font-size:18px; font-weight:650; }
.lockup p, .hero .try { color:var(--app-ink-2); font-size:15px; }
.lockup p { margin-top:6px; }
.sketch-note { font-size:13px; color:var(--app-ink-2); margin-top:12px; }
.demo-slot { margin-top:28px; }
.demo-slot:empty { display:none; }
.story { padding-top:96px; padding-bottom:18svh; }
.story-title { font-size:17px; margin:0 0 0 calc(var(--num) + 16px); font-weight:650; }
.steps { list-style:none; margin:0; padding:0; }
.step { min-height:64svh; display:grid; grid-template-columns:var(--num) minmax(0,1fr); column-gap:16px; align-content:center; }
.step-no { color:var(--ink-2); font-size:15px; font-weight:450; padding-top:8px; transition:color var(--step); }
.step.is-active .step-no { color:var(--app-ink); }
.step h3 { font-size:clamp(30px,2.8vw,44px); font-weight:650; font-stretch:112%; line-height:1.06; letter-spacing:-.015em; margin:0 0 16px; max-width:22ch; text-wrap:balance; }
.step p { font-size:20px; line-height:1.45; color:var(--app-ink-2); max-width:42ch; }
.inline-shot { display:none; }
.phone-rail { min-width:0; }
.phone-mount { position:sticky; top:100px; display:flex; justify-content:center; }
.device { --pw:min(320px,calc((100svh - 200px)*1206/2622)); width:var(--pw); aspect-ratio:1206/2622; flex:none; border:11px solid #080808; border-radius:46px; outline:1.5px solid #69615d; background:#080808; box-shadow:0 24px 54px -24px #000b; font-family:-apple-system,system-ui,sans-serif; color:#f5f1ef; position:relative; container-type:inline-size; }
.device-screen { position:absolute; inset:0; border-radius:35px; overflow:hidden; background:radial-gradient(ellipse at 50% 0%,#2b2422,#0d0b0a 72%); }
.device .status { position:absolute; z-index:5; top:13px; left:22px; right:16px; display:flex; justify-content:space-between; align-items:center; font-size:12px; font-weight:650; }
.island { position:absolute; top:8px; left:50%; transform:translateX(-50%); width:78px; height:23px; border-radius:20px; background:#000; z-index:6; }
.home-indicator { position:absolute; bottom:7px; left:34%; width:32%; height:4px; border-radius:4px; background:#fff9; z-index:5; }
.layer { position:absolute; inset:44px 10px 22px; transition:opacity var(--step); }
.app-layer { display:flex; flex-direction:column; gap:8px; transition:transform 320ms cubic-bezier(.32,.72,0,1),opacity 320ms cubic-bezier(.32,.72,0,1); }
.device .bar { text-align:center; font-weight:650; font-size:16px; padding:8px 0 12px; }
.done { display:flex; justify-content:space-between; align-items:end; padding:0 2px 6px; }
.big { font-size:70px; font-weight:200; line-height:1; height:70px; font-variant-numeric:tabular-nums; }
.big-label { font-size:12px; color:#b6aba6; }
.device button { font:inherit; color:inherit; cursor:pointer; touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
.device button:disabled { cursor:default; }
.device .lock { font-size:11px; color:#d9a79a; border:0; padding:12px 0; background:none; }
.nextrow { display:grid; grid-template-rows:1fr; transition:grid-template-rows var(--step); flex-shrink:0; }
.nextrow[data-empty] { grid-template-rows:0fr; margin-block:-4px; }
.strip-content { min-height:0; overflow:hidden; font-size:11px; border-radius:13px; }
.strip-items { background:#ffffff08; border-radius:13px; }
.strip-items { padding:9px; border:1px solid #65534b; display:flex; align-items:center; gap:4px 7px; flex-wrap:wrap; }
.nextrow .k { color:#b6aba6; }
.nextrow .t { flex:1; }
.nextrow .more { padding:0; min-height:26px; border:0; background:none; font-size:10px; color:#d9a79a; }
.nextrow .extra { flex-basis:100%; }
.tiles { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.tile { background:linear-gradient(140deg,#ffffff09,#ffffff04); border:1px solid #ffffff19; border-radius:16px; padding:10px; min-height:86px; transition:background-color var(--step),border-color var(--step); }
.tile b { display:block; font-size:13px; font-weight:600; }
.tile .v { font-size:20px; line-height:1.4; font-variant-numeric:tabular-nums; }
.tile .s { font-size:10px; color:#b6aba6; }
.tile.hit { border-color:#d9a79a; }
.decorative { float:right; color:#b6aba6; font-size:18px; }
.device .add, .device .undo, .resume { background:linear-gradient(155deg,#ffffff08,#ffffff0b); border:1px solid #ffffff24; border-radius:20px; }
.device .add { flex:1; min-height:80px; display:grid; align-content:center; justify-items:center; gap:4px; font-size:19px; font-weight:650; }
.add .plus { font-size:38px; font-weight:200; line-height:1; }
.device .undo { font-size:14px; padding:10px; min-height:40px; flex-shrink:0; }
.device .undo:disabled, .activity button:disabled { color:#847b76; }
.device .add, .device .undo { transition:transform 200ms cubic-bezier(.23,1,.32,1),background-color 200ms; }
.device .add:active, .device .undo:active { transform:scale(.97); transition-duration:80ms; }
@media(hover:hover) and (pointer:fine) {
.device button:not(:disabled):hover { background-color:#ffffff0d; }
}
.lock-layer { transition:opacity 320ms cubic-bezier(.32,.72,0,1); inset:0; padding:78px 12px 30px; background:radial-gradient(ellipse at 70% 20%,#64524a,#302b2b 50%,#151212); display:flex; flex-direction:column; align-items:center; }
.lock-date { font-size:15px; font-weight:550; }
.clock { font-size:78px; font-weight:650; line-height:1.05; letter-spacing:-4px; }
.activity { width:100%; margin-top:auto; margin-bottom:18px; padding:16px; background:#211c1aaa; border:1px solid #ffffff25; border-radius:24px; }
.activity-title { display:flex; align-items:center; justify-content:space-between; font-size:13px; }
.activity-title small { font-size:9px; color:#b6aba6; font-weight:700; }
.activity-count { display:flex; align-items:center; justify-content:space-between; margin-top:12px; }
.activity-count [data-roll] { font-size:32px; font-weight:700; }
.activity-count button { border:0; border-radius:30px; background:#ffffff14; font-size:24px; min-width:44px; height:44px; }
.activity-count .increment { width:55px; }
.notice { font-size:12px; line-height:1.4; margin-top:10px; }
.open-app { background:none; border:0; font-size:12px!important; min-height:44px; }
.finished-layer { padding:0 4px; font-size:12px; }
.record-summary { margin-top:12px; }
.record-summary .record-title { font-size:26px; margin:0 0 4px; line-height:1.15; }
.record-summary p { color:#b6aba6; font-size:14px; }
.finished-layer .record-label { color:#b6aba6; font-size:12px; font-weight:500; margin:24px 0 8px; }
.finished-layer dl { display:grid; grid-template-columns:auto minmax(0,1fr); gap:10px; margin:0; }
.finished-layer dd { margin:0; color:#b6aba6; text-align:right; }
.resume { display:block; padding:12px; text-align:center; margin-top:26px; color:#d9a79a; }
.device[data-state=count] .lock-layer, .device[data-state=count] .finished-layer, .device[data-state=lock] .finished-layer, .device[data-state=finished] .lock-layer { opacity:0; pointer-events:none; }
.device:not([data-state=count]) .app-layer { opacity:0; transform:scale(.94); pointer-events:none; }
.spotlight { position:absolute; top:0; left:0; border:1px solid #d9a79a; border-radius:16px; pointer-events:none; opacity:0; z-index:8; transition:transform 360ms cubic-bezier(.32,.72,0,1),width 360ms cubic-bezier(.32,.72,0,1),height 360ms cubic-bezier(.32,.72,0,1),opacity 200ms; }
.device[data-spot] .spotlight { opacity:1; }
[data-roll] { display:inline-flex; overflow:hidden; font-variant-numeric:tabular-nums; }
.digit { display:inline-grid; height:1em; line-height:1; width:.62em; position:relative; }
.digit span { grid-area:1/1; opacity:0; transform:translateY(60%); filter:blur(2px); transition:transform 200ms cubic-bezier(.23,1,.32,1),opacity 200ms cubic-bezier(.23,1,.32,1),filter 200ms cubic-bezier(.23,1,.32,1); }
.digit span.current { opacity:1; transform:translateY(0); filter:blur(0); }
.digit span.past { transform:translateY(-60%); }
[data-roll].instant .digit span { transition:none; }
.spec, .faq, .closing { padding-inline: var(--edge); display: grid; grid-template-columns: var(--num) minmax(0, 1fr); column-gap: 16px; }
.spec { padding-top: clamp(72px, 8vw, 120px); }
.spec h2, .faq h2 { grid-column: 2; font-size: 17px; font-weight: 650; margin: 0 0 16px; }
.spec dl { grid-column: 2; margin: 0; max-width: 900px; display: grid; grid-template-columns: minmax(12em, 16em) minmax(0, 1fr); }
.spec dt, .spec dd { margin: 0; padding: 14px 0; border-top: 1px solid var(--app-rule); }
.spec dt { font-weight: 650; padding-right: 24px; }
.spec dd { color: var(--app-ink-2); }
.faq { padding-top: clamp(72px, 8vw, 120px); }
.faq .qa { grid-column: 2; max-width: 900px; }
.faq .qa > div { display: grid; grid-template-columns: minmax(12em, 16em) minmax(0, 1fr); gap: 8px 0; padding: 18px 0; border-top: 1px solid var(--app-rule); scroll-margin-top: 32px; }
.faq .qa > div:last-child { border-bottom: 1px solid var(--app-rule); }
.faq h3 { margin: 0; font-size: 17px; font-weight: 650; line-height: 1.4; }
.faq .qa p { color: var(--app-ink-2); }
.closing { padding-top: clamp(72px, 8vw, 120px); }
.closing > div { grid-column: 2; display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px 24px; align-items: center; }
.closing .icon { width: 96px; height: 96px; border-radius: 22.37%; grid-row: span 2; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06), 0 0 0 1px var(--app-rule), 0 18px 40px -16px rgb(0 0 0 / 0.7); }
.closing p.name { color: var(--app-ink); font-size: clamp(48px, 7vw, 92px); line-height: 0.85; font-weight: 800; font-stretch: 125%; letter-spacing: -0.025em; margin: 0; }
.closing p { color: var(--app-ink-2); font-size: 16px; }
.closing p b { color: var(--app-ink); font-weight: 650; }
.colophon .legal { grid-column: 2 / -1; font-size: 13px; }
@media (max-width:1000px), (max-height:707px) {
.app-grid { display:block; padding-top:48px; }
.phone-rail:not(:has(.device)) { display:none; }
.hero { display:flex; flex-direction:column; }
.hero .demo-slot { align-self:center; }
.device { --pw:300px; }
.story { padding-top:72px; padding-bottom:0; }
.step { min-height:0; padding-top:24px; }
.step h3 { font-size:30px; margin-bottom:10px; }
.step p { font-size:19px; line-height:1.3; }
.inline-shot { display:block; grid-column:2; margin:12px 0 0; height:auto; max-height:150px; overflow:hidden; border-radius:12px; position:relative; max-width:300px; }
}
html:not(.js) .app-grid { display:block; }
html:not(.js) .hero { display:flex; flex-direction:column; }
html:not(.js) .demo-slot { align-self:center; }
html:not(.js) .phone-rail:not(:has(.device)) { display:none; }
html:not(.js) .story { padding-top:40px; padding-bottom:0; }
html:not(.js) .step { min-height:0; padding-top:16px; }
html:not(.js) .inline-shot { display:block; grid-column:2; margin:12px 0 0; height:auto; max-height:150px; overflow:hidden; position:relative; max-width:300px; border-radius:12px; }
@media(max-width:860px) {
.spec dl, .faq .qa > div { grid-template-columns:1fr; }
.spec dd { border-top:0; padding-top:0; }
}
@media(max-width:640px) {
.masthead { gap:12px; flex-wrap:nowrap; }
.masthead nav { gap:16px; white-space:nowrap; }
.spec, .faq, .closing { grid-template-columns:minmax(0,1fr); }
.spec h2, .spec dl, .faq h2, .faq .qa, .closing > div { grid-column:1; }
.hero .lede, .lockup, .hero .try, .sketch-note, .story-title { margin-left:0; }
.step { grid-template-columns:20px minmax(0,1fr); gap:0 10px; }
.step h3 { font-size:30px; }
.closing > div { grid-template-columns:48px minmax(0,1fr); gap:12px; }
.closing .icon { width:48px; height:48px; }
.closing > div > p:last-child { grid-column:1/-1; }
.device { --pw:min(300px,calc(100vw - 44px)); }
.copy-btn { min-height:44px!important; }
}
@view-transition { navigation:auto; }
.index > li[data-app="rowwise"] .vt, body[data-app="rowwise"] .hero .vt { view-transition-name:rowwise-name; }
::view-transition-group(rowwise-name) { animation-duration:480ms; animation-timing-function:cubic-bezier(.32,.72,0,1); }
::view-transition-old(rowwise-name), ::view-transition-new(rowwise-name) { width:auto; height:100%; object-fit:contain; object-position:left; }
::view-transition-old(rowwise-name) { animation:vt-out 140ms 100ms both; }
::view-transition-new(rowwise-name) { animation:vt-in 120ms both; }
::view-transition-old(root) { animation:vt-out 220ms cubic-bezier(.32,.72,0,1) both; }
::view-transition-new(root) { animation:vt-in 220ms cubic-bezier(.32,.72,0,1) both; }
@keyframes vt-out { to { opacity:0; } }
@keyframes vt-in { from { opacity:0; } }
html.intro .hero h1 { animation:widen 450ms cubic-bezier(.23,1,.32,1) both; }
html.intro .hero .rule { animation:draw 300ms 75ms cubic-bezier(.23,1,.32,1) both; }
@keyframes widen { from { font-stretch:100%; letter-spacing:-.035em; } }
@keyframes draw { from { transform:scaleX(0); } }
@media(prefers-reduced-motion:reduce) {
@view-transition { navigation:none; }
html.intro .hero h1, html.intro .hero .rule { animation:none; }
.device .layer { transition:opacity 200ms; }
.device .app-layer { transform:none!important; }
.device .add:active, .device .undo:active { transform:none; }
.digit span { transform:none!important; filter:none!important; transition:opacity 200ms; }
.spotlight { transition:opacity 200ms; }
.nextrow { transition:none; }
.row .name, .row .shot { transition:opacity 200ms!important; transform:none!important; }
}
.copy-btn[hidden] { display:none; }
@media(min-width:641px) {
.doc > :not(h1) { max-width:min(var(--measure),calc(100% - var(--num) - 16px)); }
}
.plain-table { table-layout:fixed; overflow-wrap:anywhere; }
@media(max-width:1000px) {
.colophon .legal { grid-column:1/-1; }
}
main:has(.index) + .colophon { margin-top:0; border-top:0; }
.missing-links { display:flex; flex-wrap:wrap; gap:12px 24px; padding:24px var(--edge); }
body:has(.missing-links) .index { border-bottom:0; }
::selection { background:var(--ink); color:var(--paper); }
body[data-app] ::selection { background:var(--app-accent); color:var(--app-bg); }
:root { --phone-scale:1; --step:200ms cubic-bezier(.23,1,.32,1); }
.phone-mount { top:40px; flex-direction:column; align-items:center; }
.device { width:320px; height:696px; aspect-ratio:auto; border:8px solid transparent; outline:0; background:linear-gradient(#080808,#080808) padding-box,linear-gradient(145deg,#8c827c,#24201e) border-box; box-shadow:inset 0 0 0 1px #ffffff14,0 24px 54px -24px #000b; border-radius:46px; transform:scale(var(--phone-scale)); transform-origin:top center; }
.phone-mount > .device { margin-bottom:calc(696px * (var(--phone-scale) - 1)); }
.device-screen { box-shadow:inset 0 0 0 1px #ffffff14; }
.side-buttons { position:absolute; left:-11px; top:106px; width:3px; height:24px; border-radius:2px; background:#736b65; box-shadow:0 44px #736b65,0 80px #736b65; }
.device::after { content:""; position:absolute; right:-11px; top:166px; width:3px; height:58px; border-radius:2px; background:#736b65; }
.device .bar { position:relative; display:flex; align-items:center; justify-content:space-between; padding:0; height:40px; flex:none; font-size:16px; }
.nav-glass { width:32px; height:32px; display:grid; place-items:center; background:#ffffff12; border:1px solid #ffffff1f; border-radius:50%; cursor:default; }
.nav-glass svg { width:20px; height:20px; }
.menu-glyph { font-size:18px; letter-spacing:1px; }
.big { font-size:64px; height:64px; font-weight:200; }
.device .lock { min-height:44px; display:flex; align-items:center; gap:5px; font-size:12px; white-space:nowrap; }
.lock svg { width:16px; height:18px; }
.lock.is-on svg { display:none; }
.nextrow { position:relative; display:block; height:auto; interpolate-size:allow-keywords; transition:height var(--step); border:0; border-radius:16px; background:#ffffff0f; }
.nextrow[data-empty] { height:0; margin-block:0; }
.nextrow[data-empty] .strip-content { visibility:hidden; }
.strip-content { font-size:13px; border-radius:16px; }
.strip-items { display:flex; flex-wrap:nowrap; gap:4px; padding:0 9px; min-height:44px; border:0; background:none; border-radius:16px; }
.strip-message { min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.nextrow .more { flex:none; font-size:12px; min-height:44px; color:#d9a79a; }
.message-popover { position:absolute; right:0; top:calc(100% + 7px); width:270px; z-index:10; background:#39312e; border:1px solid #ffffff20; border-radius:18px; box-shadow:0 10px 24px #0007; padding:16px; transform-origin:right top; animation:popover-in 180ms cubic-bezier(.23,1,.32,1) both; }
.message-popover[hidden] { display:none; }
.popover-heading { font-size:12px; color:#c6b9b3; margin-bottom:12px; }
.popover-items p { display:flex; align-items:center; gap:8px; font-size:13px; line-height:1.4; white-space:nowrap; }
.popover-items p+p { margin-top:12px; }
.popover-items svg { width:18px; height:18px; flex:none; stroke:currentColor; stroke-width:1.5; fill:none; }
@keyframes popover-in { from { opacity:0; transform:scale(.97); } }
.tile { padding:9px; min-height:88px; }
.tile .s { font-size:12px; line-height:1.25; text-wrap:balance; }
.tassels .v { display:flex; align-items:center; justify-content:space-between; }
.tassel-controls { display:flex; }
.device .tassel-controls button { width:32px; height:34px; padding:0; border:3px solid transparent; background:#ffffff14; background-clip:padding-box; border-radius:50%; font-size:20px; }
.tassel-minus:disabled { opacity:.4; }
.device .undo { min-height:44px; }
.device[data-state=lock] .status { visibility:hidden; }
.lock-layer { background:linear-gradient(155deg,transparent 25%,#d9a79a25 48%,transparent 64%),linear-gradient(25deg,#171316 10%,#71554c 50%,#292528 80%); padding-bottom:86px; }
.clock { color:white; font-size:96px; font-weight:700; letter-spacing:-6px; }
.activity { position:relative; z-index:2; margin-bottom:16px; padding:14px; }
.activity-title small { font-size:11px; color:#d0c3bd; }
.activity-count .subtract { min-width:48px; width:48px; height:48px; }
.activity-count .increment { width:64px; height:48px; }
.activity-count button { transition:transform 200ms cubic-bezier(.23,1,.32,1),background-color 200ms; }
.activity-count button:active, .device .is-pressed { transform:scale(.94); background-color:#ffffff26; transition-duration:80ms; }
.open-app { position:absolute; inset:0; width:100%; height:100%; z-index:1; border:0; background:none!important; }
.open-app span { position:absolute; bottom:40px; left:50%; transform:translateX(-50%); font-size:12px; color:#dfd5d0; }
.open-app:focus-visible { outline-offset:-6px; }
.lock-date, .clock { pointer-events:none; position:relative; z-index:2; }
.lock-tools { position:absolute; bottom:30px; left:22px; right:22px; display:flex; justify-content:space-between; pointer-events:none; z-index:2; }
.lock-tools span { width:44px; height:44px; background:#ffffff12; border:1px solid #ffffff1f; border-radius:50%; display:grid; place-items:center; }
.lock-tools svg { width:21px; height:21px; }
.finished-layer .record-focus { padding:6px 3px 4px; margin:0; }
.record-summary .record-title { display:flex; gap:8px; align-items:center; }
.record-summary .record-title svg { width:26px; height:26px; }
.resume { color:#f5f1ef; cursor:default; }
.spotlight { transform-origin:top left; transition:opacity 180ms; box-shadow:none; }
[data-roll] { display:inline-block; }
.digits { display:inline-flex; overflow:hidden; vertical-align:top; }
.digit { transition:width 200ms cubic-bezier(.23,1,.32,1); }
@starting-style {
.digit { width:0; }
}
.digit span { filter:none; transition:transform 200ms cubic-bezier(.23,1,.32,1),opacity 200ms cubic-bezier(.23,1,.32,1); }
[data-roll].instant .digit, [data-roll].instant .digit span { transition:none; }
.story-title, .spec h2, .faq h2 { font-size:30px; font-weight:650; font-stretch:112%; }
.step { align-items:baseline; }
.step-no { padding-top:0; }
.step p { max-width:38ch; font-size:19px; }
.phone-caption { text-align:center; font-size:13px; color:var(--app-ink-2); max-width:340px; margin-top:16px; }
.mobile-try { display:none; }
html:not(.js) .try { display:none; }
html.js:not(.intro) body[data-app=rowwise] .hero h1 { font-stretch:100%; }
html.js:not(.intro) body[data-app=rowwise] .hero .rule { transform:scaleX(0); }
html.intro-static .hero h1, html.intro-static .hero .rule { animation:none; }
.email-domain { white-space:nowrap; }
.mailto { overflow-wrap:normal; }
body:has(.missing-links) main { padding-top:64px; }
.missing-links { padding-left:calc(var(--edge) + var(--num) + 16px); }
.index h1.name { margin-block:0; }
.inline-shot { pointer-events:none; }
.inline-shot .snapshot { color:#f5f1ef; font-family:-apple-system,system-ui,sans-serif; font-size:13px; background:linear-gradient(#292320,#171312); padding:10px; border-radius:14px; max-height:172px; overflow:hidden; mask-image:linear-gradient(#000 85%,transparent); }
.inline-shot figcaption { font-size:13px; color:var(--app-ink-2); margin-top:4px; }
.inline-shot .snapshot * { outline:0; }
.crop-count { font-size:30px; font-weight:200; line-height:1.1; margin-bottom:6px; }
.crop-count span { font-size:12px; color:#c6b9b3; }
.crop-add { text-align:center; background:#ffffff0b; border:1px solid #ffffff24; border-radius:12px; font-size:16px; font-weight:600; line-height:1.25; padding:5px; }
.crop-clock { font-size:44px; font-weight:700; height:26px; line-height:1; text-align:center; margin-top:-14px; margin-bottom:6px; }
.inline-shot .activity { margin:0; padding:10px; }
.inline-shot .activity-count { margin-top:4px; }
.crop-minus, .crop-plus { display:grid; place-items:center; background:#ffffff14; border-radius:30px; width:38px; height:36px; font-size:22px; }
.crop-plus { width:52px; }
.inline-shot .activity-title small { font-size:12px; }
.inline-shot .notice { font-size:12px; line-height:1.25; margin-top:6px; }
.inline-shot .tile { width:100%; min-height:76px; }
.inline-shot .record-summary { margin-top:0; }
.inline-shot .record-summary .record-title { font-size:22px; }
.inline-shot .record-summary p { font-size:12px; }
.crop-record { font-size:12px; margin-top:8px; }
.crop-record span { float:right; }
@media(max-width:1000px),(max-height:707px) {
.hero .lockup { order:1; }
.hero .mobile-try { display:block; order:2; margin-top:12px; }
.hero .demo-slot { order:3; height:calc(696px * var(--phone-scale)); width:calc(320px * var(--phone-scale)); position:relative; }
.demo-slot > .device { position:absolute; left:50%; margin-left:-160px; }
.hero noscript { order:4; }
.phone-caption { display:none; }
.inline-shot, html:not(.js) .inline-shot { max-height:none; max-width:320px; overflow:visible; border-radius:0; }
.story { padding-top:40px; }
.step { padding-top:20px; }
.step h3 { font-size:27px; }
.step p { font-size:17px; line-height:1.3; }
}
@media(max-width:640px) {
.closing > div { grid-template-columns:72px minmax(0,1fr); }
.closing .icon { width:72px; height:72px; }
}
@media(prefers-reduced-motion:reduce) {
.message-popover { animation:none; }
.digit, .digit span { transition:none!important; }
.activity-count button:active { transform:none; }
}
html:not(.js) { --phone-scale:min(1,calc((100vw - 44px) / 320px)); }
html:not(.js) .demo-slot { height:calc(696px * var(--phone-scale)); width:calc(320px * var(--phone-scale)); position:relative; }
html:not(.js) .demo-slot > .device { position:absolute; left:50%; margin-left:-160px; }
@media(max-width:640px) {
.step p { font-size:16px; line-height:1.3; }
.step h3 { font-size:26px; }
.step { padding-top:16px; }
.inline-shot { margin-top:8px; }
}
html:not(.js) .inline-shot { max-height:none; overflow:visible; }
.device { border-width:2px; }
.device-screen { inset:6px; }
.side-buttons { left:-5px; }
.device::after { right:-5px; }
@media(max-width:640px) {
.story { padding-top:32px; }
.step { padding-top:14px; }
.inline-shot .snapshot { padding:8px; }
.inline-shot figcaption { margin-top:2px; }
.crop-count { font-size:24px; }
}
.phone-mount:has(.device:not([data-step="0"])) .phone-caption { visibility:hidden; }
.nextrow { transition:none; }
.strip-content { height:100%; }
.snapshot .clock, .snapshot .lock-date { display:none; }
.masthead .wordmark { white-space:nowrap; }
@media(max-width:360px) {
.masthead { gap:10px; }
.masthead nav { gap:12px; font-size:15px; }
}
.device[data-demo=rowwise] { width:402px; height:874px; border-radius:54px; font-size:17px; }
[data-demo=rowwise] .device-screen { border-radius:46px; }
.phone-mount > [data-demo=rowwise] { margin-bottom:calc(874px * (var(--phone-scale) - 1)); }
[data-demo=rowwise] .status { top:17px; left:30px; right:24px; font-size:17px; }
[data-demo=rowwise] .island { top:10px; width:98px; height:29px; }
[data-demo=rowwise] .layer:not(.lock-layer) { inset:54px 16px 30px; padding:0; }
[data-demo=rowwise] .app-layer { gap:8px; }
[data-demo=rowwise] .bar { height:44px; font-size:17px; }
[data-demo=rowwise] .nav-glass { width:40px; height:40px; padding:0; flex:none; }
[data-demo=rowwise] .menu-glyph { font-size:22px; }
[data-demo=rowwise] .done { padding:8px 0 0; gap:8px; }
[data-demo=rowwise] .big { font-size:64px; height:64px; font-weight:300; }
[data-demo=rowwise] .big-label { font-size:13px; }
[data-demo=rowwise] .lock { font-size:15px; gap:6px; flex:none; }
[data-demo=rowwise] .lock svg { width:17px; height:20px; }
[data-demo=rowwise] .nextrow { background:rgb(217 167 154 / .16); border:0; box-shadow:inset 0 0 0 .5px rgb(217 167 154 / .55); border-radius:18px; }
[data-demo=rowwise] .nextrow[data-empty] { box-shadow:none; }
[data-demo=rowwise] .strip-content { font-size:15px; border-radius:18px; }
[data-demo=rowwise] .strip-items { gap:8px; padding:10px 12px; align-items:center; min-height:64px; }
[data-demo=rowwise] .strip-message { white-space:normal; text-overflow:clip; line-height:20px; max-height:40px; }
[data-demo=rowwise] .more { font-size:15px; font-weight:600; }
[data-demo=rowwise] .message-popover { right:0; top:calc(100% + 10px); width:264px; border:0; border-radius:26px; background:rgb(32 29 27); padding:16px; animation:none; }
.message-popover::before { content:""; position:absolute; right:26px; top:-6px; width:14px; height:14px; transform:rotate(45deg); background:rgb(32 29 27); border-radius:3px; }
[data-demo=rowwise] .popover-heading { font-size:13px; }
[data-demo=rowwise] .popover-items p { font-size:17px; white-space:normal; }
[data-demo=rowwise] .tile { padding:12px; min-height:100px; border-radius:18px; min-width:0; }
[data-demo=rowwise] .tile b { font-size:15px; }
[data-demo=rowwise] .tile .v { font-size:22px; min-height:34px; line-height:34px; }
[data-demo=rowwise] .tile .s { font-size:13px; line-height:17px; min-height:34px; white-space:normal; text-wrap:pretty; }
[data-demo=rowwise] .tassel-controls button { width:36px; height:34px; font-size:20px; }
[data-demo=rowwise] .add { font-size:22px; border-radius:26px; }
[data-demo=rowwise] .add .plus { font-size:44px; }
[data-demo=rowwise] .undo { font-size:17px; min-height:54px; border-radius:26px; }
[data-demo=rowwise] .lock-layer { padding:98px 16px 108px; }
[data-demo=rowwise] .lock-date { font-size:17px; }
[data-demo=rowwise] .clock { font-size:120px; }
[data-demo=rowwise] .activity { padding:18px; overflow:hidden; flex:none; }
[data-demo=rowwise] .activity-title { font-size:17px; }
[data-demo=rowwise] .activity-title small { font-size:13px; }
[data-demo=rowwise] .activity-count [data-roll] { font-size:34px; }
[data-demo=rowwise] .notice { font-size:15px; }
[data-demo=rowwise] .open-app span { font-size:13px; }
[data-demo=rowwise] .finished-layer { font-size:17px; }
[data-demo=rowwise] .finished-layer .record-focus { padding:12px 0 0; }
[data-demo=rowwise] .record-summary .record-title { font-size:28px; }
[data-demo=rowwise] .record-summary p { font-size:20px; }
[data-demo=rowwise] .finished-layer .record-label { font-size:13px; margin-top:28px; }
[data-demo=rowwise] .record-notes { font-size:15px; }
[data-demo=rowwise] .finished-layer dl { gap:12px 8px; }
[data-demo=rowwise]:not([data-state=count]) .app-layer { transform:none; }
.spotlight { border:0; box-shadow:inset 0 0 0 calc(1px / var(--phone-scale)) #d9a79a; transition:opacity 120ms; }
.digit { transition:width 200ms cubic-bezier(.23,1,.32,1),opacity 200ms linear; }
.digit.leaving { width:0; opacity:0; }
.counting-menu { position:absolute; top:48px; right:0; z-index:12; width:252px; border-radius:24px; padding:6px; background:rgb(32 29 27 / .96); box-shadow:0 12px 32px #0006,inset 0 0 0 .5px #ffffff30; backdrop-filter:blur(18px); transform-origin:top right; animation:none; }
.counting-menu[hidden] { display:none; }
.device .counting-menu button { display:flex; align-items:center; justify-content:flex-start; gap:12px; width:100%; padding:11px 12px; border:0; border-radius:10px; background:none; font-size:17px; text-align:left; }
.counting-menu button.is-highlighted { background:#ffffff20; }
.counting-menu button.destructive { color:#ffb4ac; }
.counting-menu button:nth-last-child(2) { border-top:1px solid #ffffff20; border-radius:0; margin-top:5px; }
.hero .mobile-try { display:block; margin-top:16px; }
.step { align-items:first baseline; }
.step .step-path { font-size:15px; color:var(--ink-2); margin-top:12px; }
.inline-shot .snapshot { mask-image:none; }
.inline-shot .activity-count > b { font-size:28px; font-weight:700; }
.colophon a, .masthead nav a { display:inline-block; padding-block:10px; margin-block:-10px; }
.masthead { height:57px; flex-shrink:0; }
@media(max-width:360px) {
.masthead { gap:16px; }
.masthead nav { gap:12px; }
}
.row .shot img[src$="rowwise-peek.png"] { height:auto; object-fit:contain; }
@media(max-width:1000px),(max-height:707px) {
.hero .demo-slot:has([data-demo=rowwise]) { height:calc(874px * var(--phone-scale)); width:calc(402px * var(--phone-scale)); margin-bottom:34px; }
.demo-slot > [data-demo=rowwise] { margin-left:-201px; }
.demo-slot:has([data-demo=rowwise])::after { content:"Interactive preview"; position:absolute; top:calc(100% + 12px); left:0; right:0; text-align:center; font-size:13px; color:var(--app-ink-2); }
}
html:not(.js) { --phone-scale:min(1,calc((100vw - 44px) / 402px)); }
html:not(.js) .demo-slot:has([data-demo=rowwise]) { height:calc(874px * var(--phone-scale)); width:calc(402px * var(--phone-scale)); }
html:not(.js) .demo-slot > [data-demo=rowwise] { margin-left:-201px; }
html:not(.js) .hero .try { display:none; }
@media(prefers-reduced-motion:reduce) {
.counting-menu { animation:none; }
}
.row .shot:has(img[src$="rowwise-peek.png"]) { height:calc((100% - 28px) / .45); }
.device .is-pressed { transform:none; }
.counting-menu svg { width:20px; height:20px; flex:none; }
[data-demo=rowwise] .big { font-family:ui-rounded,system-ui,sans-serif; font-weight:300; }
[data-demo=rowwise] .lock { min-width:180px; justify-content:center; }
.counting-menu svg { order:-1; }
[data-demo=rowwise] .message-popover { right:88px; top:50%; translate:0 -50%; transform-origin:right center; }
.message-popover::before { right:-6px; top:calc(50% - 7px); }
[data-demo=rowwise] .finished-layer .record-focus { margin:26px 12px 0; padding:0; }
[data-demo=rowwise] .record-summary { margin-top:0; }
[data-demo=rowwise] .record-title { color:#f5f1ef; font-weight:700; }
[data-demo=rowwise] .resume { width:100%; font-weight:600; cursor:pointer; }
.crop-strip { display:flex; align-items:center; gap:12px; padding:10px; border-radius:14px; background:rgb(217 167 154 / .16); font-size:13px; }
.crop-strip b { flex:none; color:#d9a79a; }
.row .shot:has(img[src$="rowwise-peek.png"]) { border-radius:0; }
body[data-app=rowwise] .closing > div { grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:48px; align-items:center; }
.closing .finished-still { grid-column:2; grid-row:1; width:min(260px,100%); justify-self:center; }
body[data-app=rowwise] .closing .name, body[data-app=rowwise] .closing p { grid-column:1; }
@media(min-width:1001px) and (min-height:708px) {
body[data-app=rowwise] .hero { min-height:calc(100svh - var(--page-top,99px)); }
.step { min-height:60svh; }
}
@media(min-width:1000px) {
.index.solo > li[data-app] .row { grid-template-columns:var(--num) minmax(0,1fr) clamp(240px,26vw,360px) auto; }
.index.solo > li[data-app] .name { grid-column:2; grid-row:1; min-width:0; max-width:100%; }
.index.solo > li[data-app] .status { grid-column:4; grid-row:1; }
.index.solo > li[data-app] .shot { display:block; position:absolute; grid-column:3 / 4; grid-row:auto; width:auto; height:calc((100% - 28px) / .45); aspect-ratio:auto; top:28px; left:0; right:0; margin:0; }
.index.solo > li[data-app] .shot img { width:100%; }
}
@media(min-width:1000px) and (max-width:1399px) {
.index.solo > li[data-app] .row:hover .name, .index.solo > li[data-app] .row:focus-visible .name { font-stretch:100%; letter-spacing:-.022em; }
}
@media(max-width:640px) {
.closing .finished-still { display:none; }
}
.closing-copy { display:grid; gap:16px; grid-column:1; grid-row:1; }
.closing-copy p { margin:0; }
@media(max-width:640px) {
.step + .step { padding-top:28px; }
.inline-shot { margin-bottom:8px; }
}
.hero-title { container-type:inline-size; min-width:0; }
.index .next a.row:is(:hover,:focus-visible) .name { font-stretch:100%; letter-spacing:-.022em; }
a.row { -webkit-tap-highlight-color:transparent; }
@media(hover:none) {
a.row:active .name { opacity:.7; }
}
.theme-switching * { transition:none!important; }
.copy-btn { min-width:5.5em; text-align:center; }
.colophon .app-links a { display:block; width:fit-content; margin:0; padding-block:3px; }
body:has(.missing-links) .colophon { margin-top:96px; border-top:1px solid var(--rule); }
body:has(.missing-links) .row h1 { font-size:clamp(44px,7vw,92px); font-weight:800; }
body[data-app=rowwise] .closing > div { grid-column:1/-1; }
body[data-app=rowwise] .closing-copy { padding-left:calc(var(--num) + 16px); }
@media(min-width:1001px) {
.row .shot { right:calc(var(--edge) + 11em); }
}
@media(max-width:1000px) {
.colophon { padding-left:calc(var(--edge) + var(--num) + 16px); }
.index.solo > li[data-app] .shot { display:block; position:relative; grid-column:2; grid-row:auto; width:148px; height:170px; aspect-ratio:auto; top:auto; right:auto; left:auto; margin-top:12px; opacity:1; transform:none; border-radius:0; }
.index.solo > li[data-app] .shot img { width:148px; height:auto; }
}
@media(max-width:640px) {
.statement, .colophon, .missing-links { padding-left:var(--edge); }
body[data-app=rowwise] .masthead nav { gap:12px; }
body[data-app=rowwise] .masthead nav a[href="/rowwise/#faq"] { display:none; }
body[data-app=rowwise] .closing > div { grid-template-columns:minmax(0,1fr); }
body[data-app=rowwise] .closing-copy { padding-left:0; }
.step p { font-size:17px; line-height:1.45; }
.inline-shot, html:not(.js) .inline-shot { grid-column:1/-1; width:100%; max-width:320px; max-height:none; }
.inline-shot .snapshot { max-height:none; overflow:visible; }
}
body:has(.missing-links) .row h1 { grid-column:1/-1; margin-left:0; }
body:has(.missing-links) .row .what { margin-left:calc(var(--num) + 16px); }
@media(max-width:640px) {
body:has(.missing-links) .row .what { margin-left:0; }
}
@media(min-width:1001px) {
.index > li .row .no { grid-column:1; grid-row:1; width:max-content; transform:translateX(-48px); }
.index > li .row .name, .index.solo > li[data-app] .name { grid-column:1 / 3; grid-row:1; }
.index > li .row .what { margin-left:calc(var(--num) + 16px); }
body:has(.missing-links) .row h1 { grid-column:1/-1; }
}
@media(min-width:1001px) and (max-width:1696px) {
.index > li .row .no { transform:none; }
.index > li .row .name, .index.solo > li[data-app] .name { grid-column:2; }
}
@media(min-width:641px) {
body[data-app=rowwise] .phone-rail { margin-top:-32px; }
}
.hero-invitation { display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 16px; margin:16px 0 0 calc(var(--num) + 16px); }
.hero .hero-invitation .try { margin:0; order:0; flex:1; min-width:0; }
@media(max-width:1000px),(max-height:707px) {
.hero-invitation { order:2; }
}
@media(max-width:640px) {
.hero-invitation { margin-left:0; }
}
.hero-invitation > a { display:none; font-size:15px; color:var(--app-ink-2); }
@media(max-width:640px) {
.hero-invitation > a { display:inline; }
}
@media(max-width:479px) {
.rowwise-privacy-table tr { display:block; border-top:1px solid var(--rule); }
.rowwise-privacy-table th, .rowwise-privacy-table td { display:block; width:100%; border:0; font-size:16px; line-height:1.5; }
.rowwise-privacy-table th { padding:12px 0 4px; }
.rowwise-privacy-table td { padding:0 0 12px; }
}
@media(min-width:1001px) {
.index > li .row .what { margin-left:0; }
}