/* ==== landing ==================================================================================== */

/* ---- hero: headline, lede, one primary; the console tucks behind the record on a paper edge ---- */
/* the hero frame keeps its natural app height; the record covers the bottom third, cutting on a row boundary
   (measured: the cut lands 0.7px under the second waiting row; visible ÷ frame ≈ 0.67) */
main { --tuck: 271px; }
.hero { position: relative; isolation: isolate; padding-top: 128px; }
.hero .eyebrow { margin-bottom: 20px; }
.hero .h1 { font-size: 72px; line-height: 1; letter-spacing: -.036em; }
.hero .h1 em { text-decoration: underline; text-decoration-thickness: .05em; text-underline-offset: .13em; text-decoration-color: rgba(54,49,57,.8); text-decoration-skip-ink: auto; }
.hero .h1 .seal { color: var(--accent); text-decoration: none; }
.hero-lede { margin-top: 26px; max-width: 60ch; font-size: 20px; line-height: 1.5; }
.hero .actions { margin-top: 36px; gap: 12px 26px; }
.hero-stage { margin-top: 60px; padding-inline: calc(var(--gut) - var(--inset)); }

.hs-frame { position: relative; }
.hs-win { height: 798px; }
.hs-inner, .hs-inner > .ui-app { height: 100%; }
/* the arrivals land one by one on load (JS); the end state is the static markup */
.js .hs-arr.pre { opacity: 0; }
.hs-arr.land { animation: hs-land .75s var(--ease-fig) both; }
@keyframes hs-land { from { opacity: 0; transform: translateY(-5px); background-color: rgba(69,60,102,.10); } 55% { opacity: 1; transform: none; background-color: rgba(69,60,102,.06); } to { background-color: rgba(69,60,102,0); } }
/* the aurora: three light tints drifting behind the headline, within three L* of the paper */
.aurora { position: absolute; left: 0; right: 0; top: calc(var(--head) * -1); height: 860px; z-index: -1; pointer-events: none; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 42%, transparent 92%); mask-image: linear-gradient(180deg, #000 0%, #000 42%, transparent 92%); }
.aurora i { position: absolute; display: block; border-radius: 50%; filter: blur(64px); will-change: transform; }
.aurora i:nth-child(1) { left: -8%; top: -14%; width: 62%; height: 72%; background: radial-gradient(closest-side, #EEEAFB, rgba(238,234,251,0)); animation: au1 26s ease-in-out infinite alternate; }
.aurora i:nth-child(2) { right: -10%; top: -8%; width: 58%; height: 66%; background: radial-gradient(closest-side, #FCF3E3, rgba(252,243,227,0)); animation: au2 31s ease-in-out infinite alternate; }
.aurora i:nth-child(3) { left: 30%; top: 16%; width: 42%; height: 52%; background: radial-gradient(closest-side, rgba(245,236,247,.9), rgba(245,236,247,0)); animation: au3 36s ease-in-out infinite alternate; }
@keyframes au1 { from { transform: translate(0, 0) scale(1) rotate(0); } to { transform: translate(7%, 5%) scale(1.08) rotate(4deg); } }
@keyframes au2 { from { transform: translate(0, 0) scale(1.04); } to { transform: translate(-9%, 7%) scale(.94) rotate(-3deg); } }
@keyframes au3 { from { transform: translate(0, 0) scale(.96); } to { transform: translate(6%, -5%) scale(1.1) rotate(3deg); } }

/* ---- the record: the page in front of the console; a ledger without leaders ---- */
.record { position: relative; z-index: 2; margin-top: calc(var(--tuck) * -1); padding: 112px 0 104px; background: var(--bg);
  border-top: 1px solid rgba(255,255,255,.9); box-shadow: 0 -1px 0 rgba(33,30,38,.07); }
/* the record's edge casts a short soft shadow onto the hero's console (no fade) */
.record::before { content: ""; position: absolute; left: 0; right: 0; bottom: calc(100% + 1px); height: 12px; pointer-events: none;
  background: linear-gradient(0deg, rgba(33,30,38,.11), rgba(33,30,38,.04) 45%, rgba(33,30,38,0)); }
.rec-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 40px 72px; align-items: start; }
.rec-h { margin-top: 18px; font-size: 54px; line-height: 1.04; letter-spacing: -.034em; max-width: 11ch; }
/* four identical rows, one rule weight: year, category, a chip. Three invoices, then Marlow sends a matter. */
.ledger { border-top: 1px solid var(--ls); }
.lg-r { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; align-items: center; column-gap: 16px; height: 64px; padding: 0 12px; border-bottom: 1px solid var(--ls);
  transition: opacity .5s var(--ease), transform .6s var(--ease-fig); }
.lg-r:nth-child(2) { transition-delay: .08s; } .lg-r:nth-child(3) { transition-delay: .16s; } .lg-r:nth-child(4) { transition-delay: .24s; }
.lg-y { font: 400 14px/1 var(--mono); color: var(--t4); }
.lg-i { min-width: 0; font-size: 17px; line-height: 1.3; letter-spacing: -.008em; color: var(--t3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lg-c { position: relative; isolation: isolate; display: inline-grid; place-items: center; width: 84px; height: 28px; border-radius: 9999px; border: 1px solid var(--rule); font-size: 13px; font-weight: 500; color: var(--t3);
  transition: border-color .45s var(--ease) .78s, color .45s var(--ease) .78s, box-shadow .45s var(--ease) .78s; }
/* the violet ground is its own layer, so it fades in step with the label (a gradient can't transition) */
.lg-c::before { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; background: linear-gradient(180deg, #5B5088, #453C66); opacity: 0; transition: opacity .45s var(--ease) .78s; }
.lg-c > span { grid-area: 1 / 1; transition: opacity .35s var(--ease) .8s; }
/* the last row: an ink-silk violet chip, the category in the text colour, a whisper of violet on the row */
.lg-m { background: rgba(69,60,102,.035); }
.lg-m .lg-y { color: var(--t3); }
.lg-m .lg-i { color: var(--t1); }
.lg-m .lg-c { border-color: #453C66; color: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 1px 2px rgba(69,60,102,.22); }
.lg-m .lg-c::before { opacity: 1; }
.lg-was { opacity: 0; }
/* the reveal (JS adds .wait off screen): rows rise in sequence, then the last chip settles into Matter */
.rec-ledger.wait .lg-r { opacity: 0; transform: translateY(8px); transition: none; }
.rec-ledger.wait .lg-m .lg-c { border-color: var(--rule); color: var(--t3); box-shadow: none; transition: none; }
.rec-ledger.wait .lg-m .lg-c::before { opacity: 0; transition: none; }
.rec-ledger.wait .lg-was { opacity: 1; transition: none; }
.rec-ledger.wait .lg-now { opacity: 0; transition: none; }

/* ---- the turn: two animated product figures in framed panels ---- */
.tfigs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.tfig { margin: 0; }
.tf-panel { display: flex; flex-direction: column; height: 540px; padding: 24px 32px 30px; }
.tf-label { position: absolute; top: 22px; left: 32px; }
.tf-stage { flex: 1; min-height: 0; display: grid; place-items: center; padding: 44px 0 26px; }
.tf-cap { display: grid; gap: 6px; }
.tf-title { font-size: 18px; line-height: 1.4; font-weight: 600; letter-spacing: -.014em; color: var(--t1); white-space: nowrap; }
.tf-desc { font-size: 16px; line-height: 1.55; color: var(--t3); max-width: 25em; text-wrap: pretty; }
.tf-bound { margin-top: 26px; text-align: center; }
.tf-card { width: min(380px, 100%); overflow: hidden; border-radius: 12px; background: #fff; border: 1px solid #DDDAD2;
  box-shadow: 0 1px 1px rgba(29,29,34,.04), 0 20px 44px -26px rgba(29,29,34,.32); transition: opacity .5s var(--ease), transform .6s var(--ease-fig), filter .5s var(--ease); }
.tf-card.out { opacity: 0; transform: translateY(-10px); filter: blur(4px); }
.tf-card.pre { opacity: 0; transform: translateY(12px); filter: blur(6px); transition: none; }
.tf-bar { display: flex; align-items: center; gap: 9px; height: 38px; padding: 0 16px; border-bottom: 1px solid var(--ui-line); font-size: 12px; font-weight: 500; color: var(--ui-ink-2); }
.tf-id { margin-left: auto; font-size: 12px; color: var(--ui-mute); }
.tf-bar .ui-num.tf-id { font-size: 12.5px; color: var(--ui-ink); font-weight: 500; }
.tf-body { padding: 14px 16px 12px; }
.tf-t { font-size: 15px; font-weight: 600; letter-spacing: -.012em; color: var(--ui-ink); }
.tf-s { margin-top: 3px; font-size: 12.5px; color: var(--ui-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tf-rows { margin-top: 12px; border-top: 1px solid var(--ui-line); }
.tf-row { display: flex; align-items: center; gap: 10px; height: 36px; border-bottom: 1px solid var(--ui-line); font-size: 12.5px; color: var(--ui-mute); }
.tf-row .ui-g { opacity: .35; transition: opacity .35s var(--ease); }
.tf-row.on .ui-g { opacity: 1; }
.tf-row > span:nth-child(2) { white-space: nowrap; }
.tf-row.on > span:nth-child(2) { color: var(--ui-ink-2); }
.tf-v { position: relative; display: inline-flex; justify-content: flex-end; min-width: 120px; margin-left: auto; }
.tf-wait { font-style: normal; font-size: 12px; color: var(--ui-mute); transition: opacity .18s var(--ease); }
.tf-v b { position: absolute; right: 0; top: 50%; transform: translateY(-50%); opacity: 0; font-weight: 500; color: var(--ui-ink); white-space: nowrap; transition: opacity .1s var(--ease); }
.tf-row.on .tf-wait { opacity: 0; }
.tf-row.on .tf-v b { opacity: 1; transition: opacity .35s var(--ease) .16s; }
.tf-routed .ui-av { width: 18px; height: 18px; font-size: 8px; }
.tf-routed .tf-v { min-width: 0; }
.tf-routed .tf-v b { position: static; transform: none; opacity: 1; }
.tf-outs { display: grid; grid-template-columns: 1fr 1fr 1.55fr; gap: 6px; padding-top: 12px; }
.tf-out { display: inline-flex; align-items: center; justify-content: center; height: 30px; padding: 0 8px; border-radius: 7px; border: 1px solid var(--ui-line-2); font-size: 12px; font-weight: 500; color: var(--ui-ink-2); background: #fff; white-space: nowrap; transition: background-color .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease); }
.tf-out.on { color: #fff; background: var(--ui-ink); border-color: var(--ui-ink); }
.tf-end { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 16px; border-top: 1px solid var(--ui-line); background: var(--ui-sub); font-size: 12.5px; font-weight: 500; color: var(--ui-mute); transition: background-color .45s var(--ease), color .45s var(--ease), box-shadow .45s var(--ease); }
.tf-to { margin-left: auto; font-size: 12px; font-weight: 400; color: inherit; }
.tf-end.on { background: var(--ui-violet-bg); color: var(--ui-violet); box-shadow: inset 2px 0 0 var(--ui-violet); }

/* ---- the console (ink section): five short labels over one full-size stage ---- */
.cs-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 24px; margin-bottom: 28px; }
.cs-tab { position: relative; display: grid; gap: 4px; align-content: start; padding: 18px 0 2px; margin: 0; border: 0; background: none; text-align: left; cursor: pointer; color: var(--t3); font: inherit; border-radius: 0; }
.cs-tab:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 4px; border-radius: 4px; }
.cs-rule { position: absolute; top: 0; left: 0; right: 0; height: 2px; border-radius: 2px; overflow: hidden; background: var(--ls); }
.cs-rule i { position: absolute; inset: 0; background: var(--accent-text); transform-origin: 0 50%; transform: scaleX(0); }
.cs-tab[aria-selected="true"] .cs-rule i { transform: scaleX(1); }
.cs.playing .cs-tab[aria-selected="true"] .cs-rule i { transform: scaleX(0); }
.cs-title { font-size: 17px; line-height: 1.4; font-weight: 600; letter-spacing: -.014em; color: var(--t3); white-space: nowrap; transition: color .2s var(--ease); }
.cs-desc { font-size: 14.5px; line-height: 1.5; color: var(--t4); white-space: nowrap; }
.cs-tab[aria-selected="true"] .cs-title { color: var(--t1); }
.cs-tab[aria-selected="true"] .cs-desc { color: var(--t3); }
.cs-tab:hover .cs-title { color: var(--t1); }
/* the stage: a real app window. It tucks under the fees section on one crisp edge; that edge casts a
   short soft shadow onto the mock. Every view fills the stage down to the tuck line. */
.cs-stage { position: relative; height: 740px; }
main { --cs-tuck: 64px; }
.console { padding-bottom: 0; isolation: isolate; overflow: hidden; }
.cs-frame { position: relative; }
.money { z-index: 2; margin-top: calc(var(--cs-tuck) * -1); background: var(--bg); border-top: 1px solid rgba(255,255,255,.92); box-shadow: 0 -1px 0 rgba(0,0,0,.25); }
.money::before { content: ""; position: absolute; left: 0; right: 0; bottom: calc(100% + 1px); height: 12px; pointer-events: none;
  background: linear-gradient(0deg, rgba(12,10,18,.2), rgba(12,10,18,.07) 45%, rgba(12,10,18,0)); }
/* the console's aurora: three slow ink-violet tints under a fine grain, brightest behind the stage, kept in the section */
.cs-aurora { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, rgba(0,0,0,.35) 22%, #000 48%); mask-image: linear-gradient(180deg, transparent 0, rgba(0,0,0,.35) 22%, #000 48%); }
.cs-aurora i { position: absolute; display: block; border-radius: 50%; filter: blur(70px); mix-blend-mode: screen; will-change: transform; }
.cs-aurora i:nth-child(1) { left: -6%; top: 34%; width: 56%; height: 60%; background: radial-gradient(closest-side, var(--ca-1), transparent); animation: ca1 27s ease-in-out infinite alternate; }
.cs-aurora i:nth-child(2) { right: -8%; top: 40%; width: 56%; height: 58%; background: radial-gradient(closest-side, var(--ca-2), transparent); animation: ca2 32s ease-in-out infinite alternate; }
.cs-aurora i:nth-child(3) { left: 26%; top: 46%; width: 48%; height: 40%; background: radial-gradient(closest-side, var(--ca-3), transparent); animation: ca3 37s ease-in-out infinite alternate; }
.cs-aurora::after { content: ""; position: absolute; inset: 0; background: url("/_d/noise.png?v=d2365797") repeat; background-size: 160px; opacity: .07; mix-blend-mode: overlay; }
.console { --ca-1: rgba(108,92,176,.9); --ca-2: rgba(56,46,132,.85); --ca-3: rgba(150,86,140,.5); }
.console.ca-b { --ca-1: rgba(108,92,176,.9); --ca-2: rgba(42,58,124,.85); --ca-3: rgba(80,108,178,.5); }
.console .sec-head, .console .cs-tabs { position: relative; }
.paused i { animation-play-state: paused !important; }
@keyframes ca1 { from { transform: translate(0, 0) scale(1); } to { transform: translate(8%, -6%) scale(1.1) rotate(4deg); } }
@keyframes ca2 { from { transform: translate(0, 0) scale(1.05); } to { transform: translate(-9%, -4%) scale(.94) rotate(-3deg); } }
@keyframes ca3 { from { transform: translate(0, 0) scale(.95); } to { transform: translate(6%, -8%) scale(1.12) rotate(3deg); } }
.cs-panel { position: absolute; inset: 0; opacity: 1; transition: opacity .5s var(--ease); }
.cs-panel:not(.on) { opacity: 0; pointer-events: none; }
.cs-panel:focus-visible { outline: none; }
.cs-panel:focus-visible::after { content: ""; position: absolute; inset: 0; border-radius: 12px; box-shadow: inset 0 0 0 2px #6556A3, 0 0 0 2px #C9C0F0; pointer-events: none; z-index: 5; }
.cs-win { height: 100%; }
.cs-inner, .cs-inner > .ui-app { height: 100%; }

/* step 4: the phone is a pure overlay between the window and the next section, out of the flow: the window
   lays out exactly as it does on every other step, and the phone covers part of its right side. It overhangs
   the frame's right edge by 48px (less where the gutter is narrower, never closer than 16px to the viewport),
   and its lowest fifth tucks behind the fees section's edge exactly as the window does (that edge casts the
   same shadow onto it). True 402/874 proportions, scaled only uniformly. It rises out from behind the edge
   when the step opens and sinks back behind it when the step closes; reduced motion just shows it. */
.cs-phone { position: absolute; right: -56px; bottom: calc(var(--cs-tuck) - 8px); z-index: 4; pointer-events: none; transform-origin: 100% 100%; scale: var(--ph-k, 1);
  translate: 0 calc(78% + 32px); transition: translate .36s cubic-bezier(.55, 0, .75, .4); }
.cs-phone .ph { translate: 0 calc(22% - var(--ph-up, 8px)); }
.cs-panel.on .cs-phone { translate: 0 0; transition: translate .52s cubic-bezier(.22, 1, .36, 1) .1s; }
.cs-phone .ph { box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), inset 0 0 0 2px rgba(0,0,0,.6), 0 2px 4px rgba(10,8,16,.16), 0 18px 32px -14px rgba(10,8,16,.38), 0 44px 80px -28px rgba(10,8,16,.5); }
/* the phone scales down below 1281px; its small type steps up so nothing renders under 12px */
.cs-phone :is(.ph-status, .ak-id, .ak-s, .ak-due, .ak-dl b, .ak-day, .ak-h, .ak-tx i) { font-size: max(12px, calc(12px / var(--ph-k, 1))); }
.cs-phone :is(.ph-back, .ak-tx b) { font-size: max(13px, calc(12px / var(--ph-k, 1))); }
.cs-phone .ak-btn { font-size: max(14px, calc(12px / var(--ph-k, 1))); }
/* the stage is phone-sized (600px or less) below 689px: the frame itself becomes the acknowledgment screen */
@media (max-width: 688px) { .cs-phone { display: none; } }

/* ---- console views: the parts the shared ui kit doesn't carry ---- */
/* docket pane; the phone-only "N more" rows under a cut group */
.ui-row.ui-more { display: none; }
.dk-pane .ui-acts { margin-top: 12px; }
.dk-pane .dp-body { padding-top: 4px; }
.dk-pane .ui-ps { margin-top: 2px; }
.ui-chip-v { border-color: rgba(69,60,102,.25); background: var(--ui-violet-bg); color: var(--ui-violet); }
/* documents: a wider pane with a header on the tab row, a letter-proportioned page, properties, versions */
.ui-duo-docs { grid-template-columns: minmax(0, 1fr) 344px; }
.dp { padding: 0; }
.dp-head { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 calc(var(--ui-x) - 6px) 0 var(--ui-x); white-space: nowrap; }
.dp-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 13px; font-weight: 600; color: var(--ui-ink); }
.dp-ver { font: 400 12px/1 var(--mono); color: var(--ui-mute); }
.dp-more { margin-left: auto; }
.dp-well { display: grid; place-items: center; height: 229px; margin: 0 var(--ui-x); border-radius: 8px; background: #EEEDE9; }
/* the page is laid out at a readable size and drawn smaller, as a thumbnail is */
.dp-thumb { width: 152px; height: 197px; overflow: hidden; border-radius: 2px; background: #fff; box-shadow: 0 1px 2px rgba(29,29,34,.1), 0 10px 22px -12px rgba(29,29,34,.32); }
.dp-page { display: flex; flex-direction: column; gap: 10px; width: 352px; height: 456px; padding: 40px 40px 0; transform: scale(.432); transform-origin: 0 0; }
.dp-h { margin-bottom: 2px; font: 600 18px/1.25 var(--serif); color: var(--ui-ink); }
.dp-m { font-size: 13px; line-height: 1.35; color: var(--ui-mute); }
.dp-page i { display: block; flex: none; height: 6px; border-radius: 3px; background: #E3E2DE; }
.dp-page i:nth-of-type(3n) { width: 94%; } .dp-page i:nth-of-type(4n+1) { width: 97%; } .dp-page i:nth-of-type(5n) { width: 62%; } .dp-page i:nth-of-type(11) { width: 48%; }
.dp-page i.gap { height: 0; margin-top: 2px; }
.dp-page .dp-h + .dp-m { margin-top: -6px; }
.dp-m + i { margin-top: 10px; }
.dp-s { margin-top: 14px; font: 500 17px/1 var(--serif); color: var(--ui-ink-2); }
.dp-body { padding: 0 var(--ui-x); }
.dp-body .ui-sub { margin-top: 20px; }
.dp-vers li { display: grid; grid-template-columns: 24px 60px minmax(0, 1fr) auto; align-items: center; column-gap: 8px; height: 32px; font-size: 13px; color: var(--ui-ink-2); white-space: nowrap; }
.dp-vers .ui-mono { font-size: 12px; color: var(--ui-mute); }
.dp-k { font-size: 12px; color: var(--ui-mute); }
.dp-k.on { color: var(--ui-violet); font-weight: 500; }
.dp-who { overflow: hidden; text-overflow: ellipsis; }
/* the final week: the same full-width content area as every other view (the phone only overlays it) */
.wk-props { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-top: 10px; font-size: 13px; color: var(--ui-ink); }
.wk-props i { margin-right: 8px; font-style: normal; color: var(--ui-mute); }
.wk-days { margin-top: 20px; }
.wk-days .wk-t { font: 400 12px/1.3 var(--mono); font-style: normal; color: var(--ui-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wk-days li.now .wk-t { color: var(--ui-violet); font-family: var(--font); font-weight: 500; }
.wk-today { display: grid; grid-template-columns: 14px auto minmax(0, 1fr) 20px auto; align-items: center; column-gap: 12px; height: 52px; margin-top: 12px; padding: 0 10px 0 14px; border-radius: 8px; border: 1px solid rgba(69,60,102,.22); background: var(--ui-violet-bg); white-space: nowrap; }
.wk-tt { font-size: 13px; font-weight: 600; color: var(--ui-ink); }
.wk-ts { font-size: 12px; color: var(--ui-violet); overflow: hidden; text-overflow: ellipsis; }
.wk .ui-sub { margin-top: 24px; }
.wk .ui-log { margin: 0; }
/* fixed columns, so the actor and the time sit right after the event and end clear of the phone overlay */
.wk .ui-log .ui-row { padding: 0; grid-template-columns: 14px 236px 20px 104px 120px; }
.ui-mini .ui-word { justify-self: end; }
.wk-m { display: none; }
/* money */
.mn-body { padding: 24px var(--ui-x); }
.mn-body .ui-metrics { margin: 0 0 8px; }
.mn-total { margin: 0 calc(var(--ui-x) * -1); padding: 0 var(--ui-x) !important; height: 40px; }
.mn-total .ui-t { grid-column: 2 / -2; font-weight: 600; }
.mn-total .ui-r { grid-column: -2 / -1; font-weight: 600; color: var(--ui-violet); }
.ui-grid-acts .ui-id { font-family: var(--mono); }
@container (max-width: 1060px) { .dp-well { height: 172px; } .dp-thumb { width: 112px; height: 145px; } .dp-page { transform: scale(.318); } .dp-body .ui-sub { margin-top: 16px; } }
@container (max-width: 1000px) { .ui-duo-docs { grid-template-columns: minmax(0, 1fr) 296px; } .dp-ver, .dp-more { display: none; } .dp-head .ui-chip { margin-left: auto; } }
@container (max-width: 600px) { .ui-act li.ui-ph-hide { display: none; } .dp-well { height: 229px; } .dp-thumb { width: 152px; height: 197px; } .dp-page { transform: scale(.432); } }
@container (max-width: 860px) { .ui-duo-mt { grid-template-columns: minmax(0, 1fr); } .ui-duo-mt > .ui-pane { display: none; } .wk-days .wk-t { display: none; } .ui-days li { padding: 8px 6px 10px; } .wk .ui-log .ui-row { grid-template-columns: 14px minmax(0, 216px) 20px 120px; } }
@container (max-width: 680px) { .wk .ui-log .ui-row { grid-template-columns: 14px minmax(0, 168px) 20px 120px; } }
/* the narrowest phones: money names and acts wrap rather than truncate, on tighter columns */
@container (max-width: 340px) {
  .ui-grid-pay .ui-row { grid-template-columns: 20px minmax(0, 1fr) 28px 64px; column-gap: 8px; }
  .ui-grid-acts .ui-row { grid-template-columns: 44px minmax(0, 1fr) 48px; column-gap: 8px; height: auto; min-height: 36px; padding-block: 8px; }
  :is(.ui-grid-pay, .ui-grid-acts) .ui-t { white-space: normal; line-height: 1.35; }
  .mn-total { height: auto; min-height: 40px; padding-block: 8px !important; }
}
/* the docket's columns follow the list's real width (stage less rail and pane), title first: it never drops
   below its longest (170px). The kind column gives way first (up to 132px), then the serial goes, then the kind.
   List width: stage - 520 with the rail (above 1000px), stage - 272 without it. */
@container (min-width: 601px) { .ui-grid-docket .ui-row { grid-template-columns: 14px 96px minmax(170px, 1fr) minmax(0, 132px) 64px 84px; column-gap: 10px; } }
@container (min-width: 861px) and (max-width: 1177px) { .ui-grid-docket .ui-row { grid-template-columns: 14px minmax(170px, 1fr) minmax(0, 132px) 64px 84px; } .ui-grid-docket .ui-id { display: none; } }
@container (min-width: 1001px) and (max-width: 1071px) { .ui-grid-docket .ui-row { grid-template-columns: 14px minmax(0, 1fr) 64px 84px; } .ui-grid-docket .ui-m { display: none; } }
@container (min-width: 601px) and (max-width: 860px) { .ui-grid-docket .ui-row { grid-template-columns: 14px minmax(0, 1fr) 64px 84px; column-gap: 8px; } }
/* the narrowest tablet stages (601 to 680px) are too tight for one-line rows beside the pane: rows go to two
   lines (title and date, then kind and owner), so every title stays whole */
@container (min-width: 601px) and (max-width: 680px) {
  .ui-grid-docket .ui-row { height: auto; min-height: 52px; padding: 8px 16px; row-gap: 2px; column-gap: 12px; grid-template-columns: 14px minmax(0, 1fr) auto; grid-template-areas: "g t r" "g m o"; }
  .ui-grid-docket .ui-row > .ui-g { grid-area: g; align-self: start; margin-top: 2px; }
  .ui-grid-docket .ui-row > .ui-t { grid-area: t; }
  .ui-grid-docket .ui-row > .ui-m { grid-area: m; display: block; font-size: 12px; }
  .ui-grid-docket .ui-row > .ui-r { grid-area: r; }
  .ui-grid-docket .ui-row > .ui-own { grid-area: o; justify-self: end; }
  .ui-grid-docket .ui-row > .ui-id { display: none; }
}
/* phones: the docket pane keeps today and the statutory date (the list above now shows every group), so its
   action stays clear of the tuck; on the narrowest, the pane drops its title row, which repeats the selected row */
@container (max-width: 600px) { .dk-pane .ui-rungs li.done { display: none; } .dk-pane .ui-rungs li.now::before { top: 12px; } }
@container (max-width: 280px) { .dk-pane .dp-head { display: none; } .dk-pane .ui-rungs { margin-top: 4px; } .ui-grid-docket .ui-row.ui-more { height: 28px; } .ui-grid-docket .ui-group { height: 30px; } }
@container (max-width: 600px) {
  .wk-app { display: none; }
  .wk-m { display: block; position: relative; height: 100%; overflow: hidden; background: #000; color: #EBEBF0; }
  .wk-m .ak { padding-top: 10px; }
  .dk-pane .ui-ps, .ui-grid-docket .ui-bar { display: none; }
  .dk-pane .ui-rungs li:not(.now) .ui-rw { display: none; }
  .dk-pane .ui-acts { padding-bottom: 16px; }
  .ui-grid-acts .ui-row { grid-template-columns: 48px minmax(0, 1fr) 52px; }
  .ui-grid-acts :is(.mn-cl, .ui-av, .mn-avh, .mn-out) { display: none; }
  .dk-pane .ui-sub, .dk-pane .ui-pk { display: none; }
  .ui-grid-docket .ui-row.ui-more { display: flex; align-items: center; height: 30px; min-height: 0; padding: 0 16px 0 42px; font-size: 12px; color: var(--ui-mute); }
  .dk-pane .dp-body { padding-top: 0; }
  .dk-pane .ui-rungs li { padding: 6px 0; }
  .ui-act li.ui-ph-hide { display: none; }
  /* documents on a phone: the selected document's own screen (page, properties, every version) */
  .ui-duo-docs > .ui-scroll { display: none; }
  .ui-duo-docs > .dp { border-top: 0; }
  .dp-head { padding-left: 16px; }
  .dk-pane .ui-rungs { margin-top: 12px; }

  .mn-body { padding: 20px 16px; }
  .mn-body .ui-metrics { margin: 0 0 8px; }
}

/* ---- fees: the flat line. One composition at every width, scaling like a drawing: three frosted slabs rise
   with the fee, centred in the panel with equal margins and gaps; the flat fee runs straight in front of them
   from the first slab's left edge to the last slab's right edge, a ringed node at each slab; one legend,
   centred, names both. Over a quiet ink-silk glow and the grain, inside the page's double frame. ---- */
.fl { margin: 0; }
.fl-panel { position: relative; isolation: isolate; overflow: hidden; padding: clamp(16px, 3.1vw, 44px) clamp(16px, 3.4vw, 48px) clamp(16px, 2vw, 28px);
  background: linear-gradient(180deg, #FDFAF2, #FAF4E8); }
/* the glow: orchid and rose, rising from the line upward and kept light; masked off below the slabs so the
   legend band stays clean paper (violet fading over ivory would grey it); the grain over the whole panel */
.fl-glow { position: absolute; inset: 0; z-index: -1; pointer-events: none; transition: opacity 1.4s var(--ease) .8s;
  -webkit-mask-image: linear-gradient(to top, transparent 14%, #000 33%); mask-image: linear-gradient(to top, transparent 14%, #000 33%); }
.fl-glow i { position: absolute; display: block; border-radius: 50%; filter: blur(clamp(30px, 3.2vw, 46px)); }
.fl-glow i:nth-child(1) { left: -4%; right: 40%; bottom: 4%; height: 60%; background: radial-gradient(closest-side, rgba(246,224,252,.82), rgba(246,224,252,0)); }
.fl-glow i:nth-child(2) { left: 34%; right: -6%; bottom: 0; height: 58%; background: radial-gradient(closest-side, rgba(255,224,234,.82), rgba(255,224,234,0)); }
.fl-panel::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: url("/_d/noise.png?v=d2365797") repeat; background-size: 160px; opacity: .045; mix-blend-mode: overlay; }
/* the plot: 3.6:1 (the approved desktop proportion), with a height floor on phones (about 1.6:1 at 320 to
   400, 200px from there) so it always reads as a chart. The slab group spans the middle 72%: three 21%
   slabs, 4.5% gaps, 14% margins each side. */
.fl-plot { position: relative; width: 100%; aspect-ratio: 3.6 / 1; min-height: min(200px, calc(62.5vw - 54px)); }
.fl-cols, .fl-shades { position: absolute; left: 14%; right: 14%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 6.25%; }
.fl-cols { top: 0; bottom: 0; align-items: end; }
/* slabs grow out of the floor: each column clips at the baseline */
.fl-col { position: relative; display: flex; justify-content: center; align-items: flex-end; height: 100%; clip-path: inset(-40px -24px 0 -24px); }
.fl-slab { position: relative; display: block; width: 100%; border-radius: clamp(6px, .7vw, 10px) clamp(6px, .7vw, 10px) 0 0;
  background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(248,244,236,.8) 60%, rgba(241,235,224,.84));
  border: 1px solid rgba(33,30,38,.10); border-bottom: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95);
  transition: transform .9s var(--ease-fig); }
/* the floor: a hairline under exactly the slab group, soft at both ends, under the line */
.fl-plot::before { content: ""; position: absolute; left: calc(14% - 14px); right: calc(14% - 14px); bottom: 0; height: 1px; z-index: 1;
  background: linear-gradient(90deg, rgba(33,30,38,0), rgba(33,30,38,.14) 14px, rgba(33,30,38,.14) calc(100% - 14px), rgba(33,30,38,0)); }
.fl-c1 .fl-slab { height: 32%; } .fl-c2 .fl-slab { height: 58%; } .fl-c3 .fl-slab { height: 100%; }
.fl-c2 .fl-slab { transition-delay: .12s; } .fl-c3 .fl-slab { transition-delay: .24s; }
.fl-amt { position: absolute; left: 0; right: 0; top: .6em; text-align: center; font-size: clamp(13px, calc(1.5vw + 8.4px), 24px); line-height: 1.1; font-weight: 600;
  letter-spacing: -.025em; color: var(--t1); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* each slab's contact shade, just under the floor, settling in after the rise */
.fl-shades { top: 100%; height: 10px; }
.fl-shades i { display: block; height: 8px; margin: 1px 7% 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(33,30,38,.11), rgba(33,30,38,0)); transition: opacity .5s var(--ease) .55s; }
/* the flat line: straight, in front of the slabs, exactly the slab group's width */
.fl-line { position: absolute; left: 14%; right: 14%; bottom: 9%; z-index: 2; height: 2px; border-radius: 1px; background: var(--accent);
  box-shadow: 0 3px 12px rgba(101,86,163,.35); transform-origin: 0 50%; transition: transform 1.2s linear .95s; }
.fl-node { position: absolute; bottom: calc(9% - 4px); z-index: 3; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--bg-1);
  box-shadow: 0 0 0 2px var(--accent), 0 0 0 clamp(4px, .45vw, 6px) rgba(101,86,163,.14); transition: opacity .35s var(--ease), transform .45s var(--ease-fig); }
/* nodes at the slab centres; each lights as the line reaches it (the line draws 14% to 86% in 1.2s from .95s) */
.fl-n1 { left: 24.5%; transition-delay: 1.13s; } .fl-n2 { left: 50%; transition-delay: 1.55s; } .fl-n3 { left: 75.5%; transition-delay: 1.98s; }
/* one legend, once, centred under the plot: a frosted slab swatch for your fee, a line with its node for the
   flat fee. It arrives when the line has finished drawing. */
.fl-legend { display: flex; justify-content: center; align-items: center; gap: 28px; margin-top: clamp(18px, 2vw, 26px); font-size: 13px; line-height: 1; color: var(--t4); white-space: nowrap;
  transition: opacity .5s var(--ease) 2.15s; }
.fl-key { display: inline-flex; align-items: center; gap: 8px; }
.fl-sw-slab { display: block; width: 10px; height: 14px; border-radius: 3px 3px 0 0; border: 1px solid rgba(33,30,38,.3); border-bottom-color: rgba(33,30,38,.38);
  background: linear-gradient(180deg, #FFFFFF, #E8E1D3); box-shadow: inset 0 1px 0 #fff; }
.fl-sw-line { position: relative; display: block; width: 22px; height: 2px; border-radius: 1px; background: var(--accent); }
.fl-sw-line b { position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: var(--bg-1); box-shadow: 0 0 0 1.5px var(--accent); }
/* the reveal: slabs rise, then the line draws left to right, each node lights as it arrives, the legend last */
.fl.wait .fl-slab { transform: translateY(calc(100% + 2px)); transition: none; }
.fl.wait .fl-shades i { opacity: 0; transition: none; }
.fl.wait .fl-line { transform: scaleX(0); transition: none; }
.fl.wait .fl-node { opacity: 0; transform: scale(.4); transition: none; }
.fl.wait .fl-legend, .fl.wait .fl-glow { opacity: 0; transition: none; }
/* phones (owner: there's room): the slab group takes the panel's inner width less an even 8px each side, so the
   slabs widen with the same gap ratio; the line still runs slab 1 left to slab 3 right, the nodes stay on the
   slab centres (slab = 29.17% of the group), and the amounts step up a little */
@media (max-width: 640px) {
  .fl-cols, .fl-shades { left: 8px; right: 8px; }
  .fl-line { left: 8px; right: 8px; }
  .fl-plot::before { left: -6px; right: -6px; }
  .fl-n1 { left: calc(8px + (100% - 16px) * .14583); } .fl-n3 { left: calc(100% - 8px - (100% - 16px) * .14583); }
  .fl-amt { font-size: clamp(14px, calc(2.2vw + 7px), 20px); }
}
/* the section head carries the way to the full fees, under the lead */
.money .sec-head > .mn-more { grid-column: 2; grid-row: 3; justify-self: start; }
@media (max-width: 1024px) { .money .sec-head > .mn-more { grid-column: 1; grid-row: auto; } }
@media (prefers-reduced-motion: reduce) { .fl-slab, .fl-line, .fl-node, .fl-legend, .fl-glow, .fl-shades i { transition: none; } }

/* ---- the closer (ink): round 1's closer carried onto the console's ground. Fine ivory dots in a soft
   ellipse around the words; violet (left) and rose (right) dawn bands rising from the bottom edge; a crisp
   luminous violet horizon on that edge, brightest at the centre. Nothing passes the horizon: the footer
   begins clean. ---- */
.cta-ink { background: var(--bg); }
.cta-ink .h2 { color: var(--t1); }
.cta-ink .cta-body { color: var(--t2); }
.cta-ink .cta-dots { background-image: radial-gradient(rgba(245,242,236,.2) 1px, transparent 1.5px); background-size: 22px 22px; background-position: center;
  -webkit-mask-image: radial-gradient(52% 64% at 50% 52%, #000, rgba(0,0,0,.42) 46%, transparent 74%); mask-image: radial-gradient(52% 64% at 50% 52%, #000, rgba(0,0,0,.42) 46%, transparent 74%); }
.cta-ink .cta-dawn { height: 58%; -webkit-mask-image: linear-gradient(0deg, #000 0, #000 22%, transparent 100%); mask-image: linear-gradient(0deg, #000 0, #000 22%, transparent 100%); }
.cta-ink .cta-dawn i { filter: blur(64px); mix-blend-mode: screen; }
.cta-ink .cta-dawn i:nth-child(1) { left: 2%; bottom: -46%; width: 58%; height: 92%; background: radial-gradient(closest-side, rgba(104,88,178,.5), transparent); }
.cta-ink .cta-dawn i:nth-child(2) { right: 0; bottom: -44%; width: 56%; height: 88%; background: radial-gradient(closest-side, rgba(178,112,132,.34), transparent); }
.cta-ink .cta-dawn i:nth-child(3) { left: 30%; bottom: -58%; width: 42%; height: 84%; background: radial-gradient(closest-side, rgba(150,120,196,.26), transparent); }
.cta-horizon { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(150,136,220,0), rgba(150,136,220,.35) 22%, rgba(196,186,246,.95) 50%, rgba(150,136,220,.35) 78%, rgba(150,136,220,0)); }
main:has(> .cta-ink:last-child) + .foot::before { display: none; }

/* ---- responsive ---- */
@media (max-width: 1280px) { .cs-desc { font-size: 14px; } .cs-phone { --ph-k: .92; right: -32px; } }
@media (max-width: 1100px) {
  .rec-h { font-size: 46px; }
  .cs-stage { height: 660px; }
  .cs-phone { --ph-k: .84; --ph-up: 12px; }
}
/* below 1024 the five labels keep their row as titles only; phones get a strip with both lines */
@media (max-width: 1023px) { .cs-desc { display: none; } .cs-tabs { gap: 0 16px; } }
@media (max-width: 1024px) {
  main { --cs-tuck: 64px; }
  .hero .h1 { font-size: 60px; }
  .rec-grid { grid-template-columns: minmax(0, 1fr); }
  .rec-h { max-width: 16ch; }
  .tf-panel { height: 520px; padding: 22px 24px 26px; }
  .tf-label { left: 24px; }
  .cs-phone { --ph-k: .76; right: -26px; }
}
@media (max-width: 860px) {
  .tfigs { grid-template-columns: minmax(0, 1fr); }
  .tf-panel { height: 500px; }
}
@media (max-width: 768px) {
  .hero { padding-top: 80px; }
  .hero-stage { margin-top: 48px; }
  .record { padding: 96px 0 100px; }
}
@media (max-width: 640px) {
  main { --tuck: 294px; --cs-tuck: 52px; }
  .cs-tabs { display: flex; gap: 0 24px; margin-inline: calc(var(--gut) * -1); padding: 0 var(--gut) 4px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; scroll-padding-inline: var(--gut);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--gut), #000 calc(100% - var(--gut)), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 var(--gut), #000 calc(100% - var(--gut)), transparent 100%); }
  .cs-tabs::-webkit-scrollbar { display: none; }
  .cs-desc { display: block; font-size: 14px; }
  .cs-phone { display: none; }
  .cs-aurora i { filter: blur(48px); }
  .cta-ink .cta-dawn i { filter: blur(44px); }
  .hero { padding-top: 56px; }
  .hero .h1 { font-size: 44px; line-height: 1.02; letter-spacing: -.032em; }
  .hero .eyebrow { margin-bottom: 16px; }
  .hero-lede { margin-top: 18px; font-size: 17px; }
  .hero .actions { margin-top: 28px; }
  .hero-stage { margin-top: 40px; padding-inline: 12px; }
  .hs-win { height: 873px; }
  .record { padding: 72px 0 80px; }
  .rec-h { font-size: 34px; letter-spacing: -.028em; }
  .lg-r { grid-template-columns: 44px minmax(0, 1fr) auto; column-gap: 12px; height: 56px; padding: 0 10px; }
  .lg-y { font-size: 13px; }
  .lg-i { font-size: 15px; }
  .lg-c { width: 72px; height: 26px; font-size: 12px; }
  .tf-panel { height: 476px; padding: 20px 18px 22px; }
  .tf-label { left: 18px; top: 18px; }
  .tf-stage { padding: 36px 0 20px; }
  .tf-title { font-size: 17px; }
  .tf-desc { font-size: 15px; }
  .tf-outs { grid-template-columns: 1fr 1fr; }
  .tf-out:nth-child(3) { grid-column: 1 / -1; }
  .cs-tab { flex: 0 0 auto; }
  .cs-stage { height: 700px; }
  .cs-frame { padding: 6px; }
}
@media (max-width: 420px) { .tf-to { display: none; } }
/* the narrowest phones wrap the metric labels, so the hero's cut moves to the next row boundary */
@media (max-width: 340px) { main { --tuck: 318px; } }
@media (max-width: 400px) {
  .hero .h1 { font-size: 40px; }
  .tf-v { min-width: 104px; }
  .tf-desc { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .lg-r, .lg-c, .lg-c::before, .lg-c > span { transition: none; }
  .aurora i, .aurora i:nth-child(n), .cs-aurora i, .cs-aurora i:nth-child(n) { animation: none; }
  .hs-arr.land { animation: none; }
  .tf-card, .tf-v b, .tf-out, .tf-end, .cs-panel, .tf-row .ui-g { transition: none; }
  .cs-phone, .cs-panel.on .cs-phone { transition: none; }
}