/* clarke.sg v5. muse.ai's layout for Clarke, light only (the site never follows prefers-color-scheme).
   Measured from muse.ai: page #FCFCFC, bands #F3F4F5, a 60 px bar, a 62 px H1 at weight 500, 40 px section headings,
   18/26 grey lines, 744 px feature rows in two 632 px columns, a 408 px form with a 54 px field (radius 20), a 44 px pill,
   and soft shadows on floating parts. Clarke's identity in place of Muse's: Geist, Ink capsule buttons, and Clarke Blue
   only on Clarke's face. Pricing follows claude.com/pricing's cards and questions. */
@font-face { font-family: "Geist"; src: url("/assets/fonts/Geist-Latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  color-scheme: light only;
  --bg: #FCFCFC; --band: #F3F4F5; --white: #FFFFFF;
  --ink: #0B0B0C; --ink-press: #2A2A2E; --ink-2: #3C3C40; --grey: #6E6E73;
  --fill: rgba(11, 11, 12, .05); --fill-2: rgba(11, 11, 12, .09); --field: rgba(11, 11, 12, .04);
  --hair: rgba(11, 11, 12, .09); --blue: #0E5FD8;
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --m: clamp(20px, 3.9vw, 56px);
  --shadow-card: 0 0 0 1px rgba(17, 17, 18, .05), 0 2px 6px rgba(17, 17, 18, .04), 0 18px 44px rgba(17, 17, 18, .08);
  --shadow-pop: 0 0 0 1px rgba(17, 17, 18, .06), 0 8px 24px rgba(17, 17, 18, .10), 0 28px 64px rgba(17, 17, 18, .12);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 76px; background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.5 "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; font-variant-numeric: tabular-nums; }
h1, h2, h3, p, ul, figure { margin: 0; }
h1, h2, h3 { font-weight: 500; text-wrap: balance; }
p { text-wrap: pretty; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
::selection { background: var(--ink); color: var(--white); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 8px; }
main:focus { outline: none; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: var(--m); }
.ic { width: 20px; height: 20px; flex: none; }
.skip { position: absolute; left: 16px; top: -100px; z-index: 60; padding: 12px 18px; border-radius: 999px; background: var(--ink); color: var(--white); font-weight: 500; text-decoration: none; }
.skip:focus { top: 8px; }

/* ------------------------------------------------------------------ buttons (capsules, as in Clarke's identity) */
.pill { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 16px; border-radius: 999px;
  font-size: 14px; line-height: 20px; font-weight: 500; white-space: nowrap; text-decoration: none; letter-spacing: -.005em;
  transition: transform 160ms var(--ease), background-color 160ms var(--ease), box-shadow 160ms var(--ease); }
.pill:active { transform: scale(.97); }
.pill-ink { background: var(--ink); color: var(--white); }
.pill-grey { background: var(--fill); color: var(--ink); }
.pill-line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px rgba(11, 11, 12, .28); }
@media (hover: hover) and (pointer: fine) {
  .pill-ink:hover { background: var(--ink-press); }
  .pill-grey:hover { background: var(--fill-2); }
  .pill-line:hover { box-shadow: inset 0 0 0 1px var(--ink); }
}
.pill-wide { width: 100%; height: 44px; font-size: 16px; }
.pill-lg { height: 48px; padding: 0 32px; font-size: 15px; }
.ic-dl { width: 16px; height: 16px; }
.ic-out { width: 15px; height: 15px; }

/* ------------------------------------------------------------------ the top bar (sticky, solid, like Muse's) */
.bar { position: sticky; top: 0; z-index: 40; background: var(--bg); }
.bar-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 60px; }
.logo { display: inline-flex; align-items: center; min-height: 44px; border-radius: 8px; }
.lockup { display: block; height: 26px; }
.lockup .lk { height: 100%; width: auto; }
.bar-nav { display: flex; align-items: center; gap: 8px; }
.bar-link { display: inline-flex; align-items: center; height: 36px; padding: 0 12px; border-radius: 999px; font-size: 14px; font-weight: 500; text-decoration: none; color: var(--ink);
  transition: background-color 160ms var(--ease); }
@media (hover: hover) and (pointer: fine) { .bar-link:hover { background: var(--fill); } }
.bar-link[aria-current="page"] { background: var(--fill); }
.bar-dl { padding: 0 16px 0 12px; }
.bar-menu { display: none; }

/* ------------------------------------------------------------------ Home, the first screen (Muse's: it fills the screen,
   with the agencies and Muse's 'Learn more' cue at its foot, so nothing of the next band shows) */
.hero { background: var(--bg); text-align: center; }
.hero-in { display: flex; flex-direction: column; align-items: center; min-height: calc(100vh - 60px); min-height: calc(100svh - 60px);
  padding-top: 24px; padding-bottom: 20px; container-type: inline-size; }
.hero-c { flex: 1 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; padding-bottom: 16px; }
/* The H1's size is set by its longest phrase ('sends new listings to buyers first', 14.66 em of Geist 500 at -0.02 em,
   plus a little room for WebKit's rounding), so a phrase never wraps from 768 px up. */
.h1 { font-size: min(62px, 100cqi / 15.1); line-height: 1.1; letter-spacing: -.02em; font-weight: 500; }
.h1-v { display: block; }
.h1-l { display: block; white-space: nowrap; }
.h1-r { white-space: normal; }
/* Clarke's face, the only face on the first screen: it glances, blinks, and eases into each job's expression (site.js) */
.h1-face { display: inline-block; width: 1.06em; height: 1.06em; margin: 0 .04em 0 .16em; vertical-align: -.2em; }
.mf { display: block; width: 100%; height: 100%; overflow: visible; }
.mf-e { transform-box: fill-box; transform-origin: center; }
.rot { display: inline-grid; justify-items: center; }
.rot-i { grid-area: 1 / 1; }
/* the resting line (no script, reduced motion) is Teddy's whole sentence; on narrow screens it may take two even lines */
.rot-rest { text-wrap: balance; }
html:not(.rotating) .rot-i:not(.rot-rest) { display: none; }
html.rotating .rot-rest { display: none; }
/* the next phrase rises in as the last one leaves quickly upwards (exit faster than entry), with a light blur to bridge them */
html.rotating .rot-i { white-space: nowrap; opacity: 0; transform: translateY(.32em); filter: blur(4px);
  transition: opacity 200ms var(--ease), transform 260ms var(--ease), filter 200ms var(--ease); }
html.rotating .rot-i.is-on { opacity: 1; transform: none; filter: none;
  transition: opacity 420ms var(--ease) 140ms, transform 620ms var(--ease) 140ms, filter 420ms var(--ease) 140ms; }
html.rotating .rot-i.is-out { opacity: 0; transform: translateY(-.32em); filter: blur(4px); }
.sub { margin-top: 16px; font-size: 18px; line-height: 26px; color: var(--grey); }
.hero-cta { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 32px; }
.hero-try { min-width: 200px; }
.hero-n { font-size: 14px; line-height: 20px; color: var(--grey); }
/* 'Trusted by agents from': the agencies' own logos in one grey, each at its optical size (equal ink, about 28 px), evenly
   spaced, not links. The strip sits in the hero's centred group, under the trial line, not pinned to the foot. */
.trust { display: grid; justify-items: center; gap: 18px; width: 100%; margin-top: 96px; }
.trust-h { font-size: 13px; line-height: 18px; color: var(--grey); }
.trust-l { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 20px 56px; margin: 0; padding: 0; list-style: none; }
.trust-l li { display: block; }
.trust-br { display: none !important; }
.lg { display: block; width: auto; height: var(--h, 28px); opacity: .45; }
/* Muse's cue: a small white capsule with a soft shadow, at the foot of the first screen; it scrolls to the trailer */
.cue { display: inline-flex; align-items: center; gap: 6px; height: 44px; margin-top: 28px; padding: 0 16px 0 18px; border-radius: 999px;
  background: var(--white); color: var(--ink); font-size: 14px; line-height: 20px; font-weight: 500; text-decoration: none;
  box-shadow: 0 0 0 1px rgba(17, 17, 18, .05), 0 6px 18px rgba(17, 17, 18, .08); transition: transform 160ms var(--ease); }
.cue:active { transform: scale(.97); }
.ic-cue { width: 16px; height: 16px; transition: transform 200ms var(--ease); }
@media (hover: hover) and (pointer: fine) { .cue:hover .ic-cue { transform: translateY(2px); } }


.band { background: var(--band); }

/* ------------------------------------------------------------------ the four functions (Muse's feature rows) */
.plain { background: var(--bg); }
/* the gap is Muse's 64 px at 1440 and closes to 40 px at 1280, so each of Teddy's headers keeps to two lines beside
   its 620 px tile (the longest, 'Finds homes for your clients and sends them new listings', needs 511 px a line) */
.row-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 620px); column-gap: clamp(40px, calc(15vw - 152px), 64px); align-items: center; min-height: 744px; padding-block: 56px; }
.pic-left .row-in { grid-template-columns: minmax(0, 620px) minmax(0, 1fr); }
.row-t { grid-column: 1; grid-row: 1; }
.row-p { grid-column: 2; grid-row: 1; display: flex; justify-content: center; align-items: center; }
.pic-left .row-t { grid-column: 2; }
.pic-left .row-p { grid-column: 1; }
.row-t h2 { font-size: 40px; line-height: 46px; letter-spacing: -.02em; max-width: 13.5em; }
/* Teddy's lines run 34 to 51 words (18/26 grey, like Muse). 472 px a line keeps them easy to read: it is the widest under
   480 where every row's line ends on three words or more (at 480 the paperwork line ends on 'held up.'). From 768 px up,
   text-wrap: pretty evens the last lines further where the browser can (Safari ends it 'so your deal isn't held up.').
   checks.py fails a line that ends on a lone word, so re-check this width when Teddy changes a word. */
.row-t p { margin-top: 12px; max-width: 472px; font-size: 18px; line-height: 26px; color: var(--grey); }
@media (min-width: 768px) { .row-t p { text-wrap: pretty; } }

/* ------------------------------------------------------------------ the row pictures (Muse's composed visuals, for Clarke)
   One large rounded tile per function, a step in tone from its band (white on the grey band, #F1F2F4 on the light one), with
   the function's main piece in the middle and one or two pieces layered over its top and bottom edges. Pieces are real Clarke
   parts (src/tiles.py) at the app's own size, so their text is never scaled: where the tile is narrower, the layered
   pieces lean out less and overlap more. --mw is the main piece's width, --up and --down how far 'a' and 'b' stand above
   and below it, --w each layered piece's width. */
.tile { --mw: 352px; --k: .5; --up: 0px; --down: 0px; --gap: 32px;
  position: relative; width: 100%; max-width: 620px; margin: 0 auto; padding: calc(var(--up) + var(--gap)) 28px calc(var(--down) + var(--gap));
  border-radius: 32px; background: #F1F2F4; container-type: inline-size; -webkit-user-select: none; user-select: none;
  overflow: hidden; isolation: isolate; /* the pieces' shadows stay inside the tile, never on the next band */ }
.band .tile { background: var(--white); }
/* short lines inside the pieces wrap evenly (no lone '5' under 'Listing agent for 324 Clementi Ave') */
.tile .c-row__l2, .tile .c-row__l3, .tile .c-row__sub, .tile .c-banner__t, .tile .c-banner__l { text-wrap: balance; }
/* from 768 px every tile is Muse's near-square, 620 x 632 at least, with its pieces in the middle */
.tile:not(.t-lap) { min-height: 632px; display: flex; flex-direction: column; justify-content: center; }
/* the stage is the tile's inner width and as tall as the main piece; --k places the main piece across it (0 left, .5
   middle, 1 right). The layered pieces hang from its top or bottom edge and sit at the tile's left or right edge. */
.stage { position: relative; }
.pc-main { position: relative; z-index: 1; width: min(var(--mw), 100%); margin-left: calc((100% - min(var(--mw), 100%)) * var(--k)); }
.pc { position: absolute; z-index: 2; width: min(var(--w, 320px), 100%); }
.pc-a { top: calc(-1 * var(--up)); }
.pc-b { bottom: calc(-1 * var(--down)); }
.pc.to-r { right: var(--in, 0px); }
.pc.to-l { left: var(--in, 0px); }
.pc.behind { z-index: 0; }
/* the pieces: the kit's card colour and corner, with Muse's soft shadow; the layered ones float a little higher */
.kp { background: #FFFFFF; border-radius: 24px; box-shadow: var(--shadow-card); }
.tile .wa { max-width: none; border-radius: 24px; box-shadow: var(--shadow-card); font-family: var(--font-app); }
.pc .kp { box-shadow: var(--shadow-pop); }
.pc.behind .kp { box-shadow: var(--shadow-card); }
.kp-pad { padding: 16px 20px 4px; }
.kp .c-list > :last-child { border-bottom: 0; }
.kp-nb .c-banner { border-radius: 24px; }
.kp-home { padding: 12px 12px 16px; border-radius: 30px; }
.kp-home .c-pcard__price, .kp-home .c-pcard__addr, .kp-home .c-facts, .kp-home .c-pcard__fit { margin-inline: 4px; }
.kp-home .c-pcard__ph img { aspect-ratio: 4 / 3; height: auto; }
.kp-ask .c-card { border: 0; }
.kp-brief { display: grid; grid-template-columns: 40px 1fr; column-gap: 12px; align-items: center; padding: 16px 20px 18px; }
.kp-brief__n { font: var(--app-headline); letter-spacing: var(--app-headline-tracking); }
.kp-brief .c-sub { margin-top: 0; }
.kp-brief .c-lead { grid-column: 1 / -1; margin-top: 12px; }
.kp-clients__t, .kp-month__t { font: var(--app-headline); letter-spacing: var(--app-headline-tracking); }
.kp-clients .c-list { border-top: 0; }
.kp-month__t { font: var(--app-title2); letter-spacing: var(--app-title2-tracking); }
.kp-sheet .c-sheet__title { padding-top: 2px; padding-bottom: 12px; }
.kp-sheet .c-sheet__h:first-of-type { margin-top: 18px; }
.kp-deal .c-dgroup__h { background: none; }
.kp-row { padding: 0 20px 0 16px; }
.kp-dealc [data-deals="a"] .c-row--deal { border: 0; background: none; }
.kp-dealc .c-row__chev { display: none; }

/* each function's picture. Layered pieces cover only chrome: a chat's header or its message bar, a card's padding, the
   calendar's first columns, the app's rail. Never a message, a name, an amount or an address. */
/* Replies to every lead and remembers every client: Jason's chat, what Rachel is looking for over the right of its header
   (the call icons) and the empty top of the chat to the right of 'Today', and Mrs Lee's MOP card over its message bar */
.t-leads { --mw: 360px; --k: .2; --up: 32px; --down: 60px; --gap: 34px; }
.t-leads .pc-a { --w: 316px; }
.t-leads .pc-b { --w: 316px; }
/* on phones only (from 768 px the next three show the desktop app): the main piece and its one smaller piece */
.t-homes { --mw: 360px; --up: 48px; }
.t-homes .pc-a { --w: 316px; }
.t-appointments { --mw: 360px; --up: 48px; }
.t-appointments .pc-a { --w: 320px; }
.t-paperwork { --mw: 360px; --k: .1; --down: 128px; }
.t-paperwork .pc-b { --w: 316px; }

/* from 768 px up, the desktop app (src/shoot_rows.py) at its own size, the window's piece set in the tile and one or two
   of the kit's parts over it. The tile is Muse's near-square (620 x 632). Nothing that names a person, an amount, an
   address, a time or the picked day is covered (checks.py measures it). */
.tile.t-lap { height: 632px; padding: 0; overflow: hidden; isolation: isolate; }
.t-lap .stage { display: none; }
.lap { position: absolute; inset: 0; }
.scr { position: absolute; border-radius: 22px; overflow: hidden; background: #FFFFFF; box-shadow: var(--shadow-card); }
.scr img { display: block; width: 100%; height: auto; }
.lp { position: absolute; z-index: 2; }
.lp .kp, .lp .wa { box-shadow: var(--shadow-pop); }
/* Finds homes: Properties on the right, with the home that fits Rachel (1 buyer fits); Rachel's WhatsApp with that
   listing on the left, over the window's rail only, so its right edge stays clear of every line in the pane */
.t-homes .scr { right: 24px; top: 24px; width: 387px; }
.t-homes .lp-a { left: 24px; top: 42px; width: 274px; }   /* centred on the window, so as much of it shows above as below */
.wa-nobar .wa-body { padding-bottom: 16px; }
/* Sets your appointments: the calendar on 6 November on the right; Rachel's viewing (who's coming), then Clarke's 8am
   notification, on the left over the rail and the month's first three columns. Each part's edges fall in the gaps
   between the weeks, so no date is cut in half, and the picked Friday and the day's list stay clear. */
.t-appointments .scr { right: 28px; top: 36px; width: 496px; }
.t-appointments .lp-a { left: 28px; top: 112px; width: 326px; }
.t-appointments .lp-b { left: 28px; top: 372px; width: 326px; }
/* Prepares your paperwork: the Clarke tab with the offer, Done today over the gap under it */
.t-paperwork .scr { left: 32px; top: 40px; width: 556px; }
.t-paperwork .lp-b { right: 28px; bottom: 28px; width: 316px; }

/* app pictures and chats: unframed UI cards with Muse's soft shadow */
.ui-card { border-radius: 24px; background: var(--white); box-shadow: var(--shadow-card); }
.ui-app { display: block; width: min(var(--w), 100%); }
.ui-app img { width: 100%; height: auto; }

/* WhatsApp, as seen on Clarke's own phone (WhatsApp's light colours), as tall as its messages */
.wa { width: 100%; max-width: 380px; display: flex; flex-direction: column; overflow: hidden; background: #EFEAE2; color: #111B21; font-size: 15px; line-height: 20px; letter-spacing: -.005em; text-align: left; }
.wa-head { display: flex; align-items: center; gap: 10px; height: 60px; padding: 0 14px 0 8px; background: #F7F8FA; border-bottom: 1px solid #E9EDEF; flex: none; }
.wa-head b { flex: 1; font-size: 16px; font-weight: 600; }
.wa-back { width: 22px; height: 22px; color: #111B21; }
.wa-av { width: 36px; height: 36px; border-radius: 50%; background: #DFE5E7; color: #54656F; display: grid; place-items: center; font-size: 13px; font-weight: 600; }
.wa-icons { display: flex; gap: 20px; color: #111B21; }
.wa-icons .ic { width: 21px; height: 21px; }
.wa-body { display: flex; flex-direction: column; gap: 6px; padding: 14px 12px; }
.wa-day { align-self: center; margin: 4px 0; padding: 4px 10px; border-radius: 8px; background: #FFFFFF; color: #54656F; font-size: 12.5px; box-shadow: 0 1px .5px rgba(11, 20, 26, .13); }
.wa-msg { position: relative; max-width: 84%; padding: 7px 9px 6px 10px; border-radius: 9px; box-shadow: 0 1px .5px rgba(11, 20, 26, .13); }
.wa-msg.in { align-self: flex-start; background: #FFFFFF; border-top-left-radius: 2px; }
.wa-msg.out { align-self: flex-end; background: #D9FDD3; border-top-right-radius: 2px; }
.wa-msg p { display: inline; }
/* no lone word on a message's last line ("for." under "listing fits what you asked") */
.wa-msg { text-wrap: pretty; }
.wa-meta { float: right; display: inline-flex; align-items: center; gap: 3px; margin: 6px 0 -4px 10px; font-size: 12px; line-height: 15px; color: #4F5F69; }
.wa-ticks { width: 16px; height: 11px; fill: #53BDEB; }
.wa-pg { margin: -4px -6px 4px -7px; border-radius: 6px; overflow: hidden; background: #CFF3C9; }
.wa-pg img { width: 100%; height: auto; aspect-ratio: 1.91; object-fit: cover; }
.wa-pg__t { display: grid; gap: 1px; padding: 8px 10px 9px; }
.wa-pg__t b { font-size: 14.5px; font-weight: 600; }
.wa-pg__t span { font-size: 13.5px; color: #3B4A54; }
.wa-pg__t small { font-size: 12.5px; color: #54656F; }
.wa-bar { display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 14px; background: #F7F8FA; color: #54656F; flex: none; }
.wa-field { flex: 1; height: 36px; padding: 0 14px; border-radius: 18px; background: #FFFFFF; display: flex; align-items: center; color: #667781; font-size: 15px; }

/* job 4: Clarke's notification to Matt, then Rachel's reminder */
.stack { width: 100%; max-width: 380px; display: grid; gap: 14px; }
.stack .wa { max-width: none; }
.nb { display: grid; grid-template-columns: 38px 1fr auto; column-gap: 12px; align-items: baseline; padding: 13px 16px 14px 14px; text-align: left; }
.nb-icon { grid-row: 1 / span 3; align-self: start; width: 38px; height: 38px; margin-top: 1px; border-radius: 9px; background: var(--blue); display: grid; place-items: center; }
.nb-icon svg { width: 30px; height: 30px; }
.nb-app, .nb-time { font-size: 13px; line-height: 18px; color: var(--grey); }
.nb-time { justify-self: end; }
.nb-t { grid-column: 2 / -1; margin-top: 2px; font-size: 15px; line-height: 20px; font-weight: 600; letter-spacing: -.01em; }
.nb-l { grid-column: 2 / -1; font-size: 15px; line-height: 20px; letter-spacing: -.01em; }

/* ------------------------------------------------------------------ the trailer, right after the first screen (Muse's video
   section): a 16:9 poster, Clarke's title card, on its own grey band */
.video { padding: 104px 0 112px; text-align: center; scroll-margin-top: 60px; }
.video h2 { font-size: 40px; line-height: 46px; letter-spacing: -.02em; }
.video h2:focus { outline: none; }
.video-p { margin: 12px auto 0; max-width: 680px; font-size: 18px; line-height: 26px; color: var(--grey); text-wrap: balance; }   /* two lines from 768 px up (Teddy, 7 Nov) */
.poster { position: relative; width: 100%; max-width: 1120px; margin: 48px auto 0; aspect-ratio: 16 / 9; border-radius: 32px; overflow: hidden;
  background: var(--white); display: grid; place-items: center; box-shadow: 0 0 0 1px rgba(17, 17, 18, .04); container-type: inline-size; }
.poster-in { display: grid; justify-items: center; gap: clamp(14px, 3cqi, 28px); }
.poster-face { width: clamp(72px, 12.5cqi, 140px); height: auto; aspect-ratio: 1; overflow: visible; }
.poster-face .eye { transform-box: fill-box; transform-origin: center; }
.poster-t { font-size: clamp(22px, 3.4cqi, 38px); line-height: 1.15; letter-spacing: -.02em; font-weight: 500; }
.poster-soon { margin-top: 20px; font-size: 15px; line-height: 22px; color: var(--grey); }
.poster-play { position: absolute; inset: 0; display: grid; place-items: end center; padding-bottom: 8%; cursor: pointer; }
.poster-play .ic-play { box-sizing: content-box; width: 22px; height: 22px; padding: 21px 21px 21px 23px; border-radius: 999px; background: var(--ink); color: var(--white);
  transition: transform 160ms var(--ease); }
.poster-play:active .ic-play { transform: scale(.96); }
.poster video, .poster iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.ic-play { width: 18px; height: 18px; fill: currentColor; stroke: none; }

/* ------------------------------------------------------------------ what agents say (layout only until agents agree) */
.quotes { padding: 112px 0; background: var(--bg); }
.quotes h2 { text-align: center; font-size: 40px; line-height: 46px; letter-spacing: -.02em; }
.q-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; max-width: 1120px; margin: 56px auto 0; }
.q { display: flex; flex-direction: column; justify-content: space-between; gap: 32px; min-height: 260px; padding: 32px; border-radius: 28px; background: #F1F2F4; }
.q blockquote { margin: 0; font-size: 20px; line-height: 29px; letter-spacing: -.01em; }
.q figcaption { display: flex; align-items: center; gap: 12px; font-size: 15px; line-height: 20px; color: var(--ink-2); }
.q-photo { width: 48px; height: 48px; flex: none; border-radius: 999px; background: #E2E4E8; object-fit: cover; }
/* a placeholder must look like one: dashed edge, grey words */
.q.is-ph { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(11, 11, 12, .16); }
.q.is-ph blockquote, .q.is-ph figcaption { color: var(--grey); }
.q.is-ph { background-image: repeating-linear-gradient(135deg, rgba(11, 11, 12, .025) 0 10px, transparent 10px 20px); }

/* ------------------------------------------------------------------ closing (Muse's 'Ready to try') and footer */
.close { background: var(--bg); }
/* the bands alternate: after the testimonials (plain) the closing is a band; without them (a live build with none yet)
   it follows the last row's band, so it stays plain */
.quotes + .close { background: var(--band); }
.close-in { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: 560px; padding-block: 56px; }
.close h2 { font-size: 40px; line-height: 46px; letter-spacing: -.02em; }
.close p { margin-top: 12px; font-size: 18px; line-height: 26px; color: var(--grey); }
.close-btns { display: grid; gap: 12px; width: 256px; margin-top: 32px; }
.close-n { margin-top: 14px; font-size: 14px !important; line-height: 20px !important; color: var(--grey); }
.foot { background: var(--bg); }
.foot-in { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; padding-block: 32px; }
.foot-c { font-size: 14px; line-height: 20px; color: var(--grey); }
.foot-n { display: flex; gap: 24px; }
.foot-n a, .foot-m { font-size: 14px; line-height: 20px; color: var(--grey); text-decoration: none; border-radius: 6px; }
.foot-m { justify-self: end; }
@media (hover: hover) and (pointer: fine) { .foot-n a:hover, .foot-m:hover { color: var(--ink); } }

/* ------------------------------------------------------------------ the Download panel (Muse's: a small panel under the button) */
.dl { position: fixed; inset: auto; top: 64px; right: var(--m); margin: 0; width: 360px; max-width: calc(100vw - 16px); padding: 24px 20px 20px; border: 0; border-radius: 28px;
  background: var(--white); color: var(--ink); box-shadow: var(--shadow-pop); overflow: visible; }
.dl:popover-open { display: grid; gap: 20px; }
.dl-s { display: grid; justify-items: center; gap: 12px; text-align: center; }
.dl-s + .dl-s { padding-top: 20px; border-top: 1px solid var(--hair); }
.dl-h { font-size: 15px; line-height: 20px; font-weight: 500; letter-spacing: -.005em; }
.dl-qr { padding: 10px; border-radius: 16px; background: var(--white); box-shadow: 0 0 0 1px var(--hair); }
.qr { width: 132px; height: 132px; }
.dl-p { max-width: 250px; font-size: 13px; line-height: 18px; color: var(--grey); }
.dl-store { padding: 0 14px 0 16px; }
.dl-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
.dl-2 .pill { width: 100%; }
.dl-off { font-size: 13px; line-height: 18px; text-align: center; }
.dl-off[hidden] { display: none; }
.menu { position: fixed; inset: auto; top: 58px; right: 12px; margin: 0; width: 220px; padding: 8px; border: 0; border-radius: 20px; background: var(--white); color: var(--ink); box-shadow: var(--shadow-pop); }
.menu:popover-open { display: grid; gap: 2px; }
.menu-a { display: flex; align-items: center; gap: 10px; width: 100%; height: 48px; padding: 0 14px; border-radius: 14px; font-size: 16px; font-weight: 500; text-align: left; text-decoration: none; color: var(--ink); }
.menu-a .ic-dl { width: 18px; height: 18px; }
@media (hover: hover) and (pointer: fine) { .menu-a:hover { background: var(--fill); } }
@media (prefers-reduced-motion: no-preference) {
  .dl, .menu { transform-origin: top right; transition: opacity 180ms var(--ease), transform 180ms var(--ease), overlay 180ms allow-discrete, display 180ms allow-discrete; }
  .dl:popover-open, .menu:popover-open { opacity: 1; transform: none; }
  @starting-style { .dl:popover-open, .menu:popover-open { opacity: 0; transform: scale(.97) translateY(-4px); } }
  .dl:not(:popover-open), .menu:not(:popover-open) { opacity: 0; transform: scale(.98); }
}

/* the trailer when it plays in a dialog-free page: nothing else */

/* ------------------------------------------------------------------ Pricing (claude.com/pricing's cards) */
.ptop { padding: 88px 0 120px; }
.p-h1 { margin: 0 auto; max-width: 15.5em; text-align: center; font-size: clamp(34px, 4.31vw, 62px); line-height: 1.1; letter-spacing: -.02em; }
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 380px)); justify-content: center; gap: 24px; margin-top: 64px; }
.plan { display: flex; flex-direction: column; padding: 32px; border-radius: 24px; background: var(--white); box-shadow: 0 0 0 1px rgba(17, 17, 18, .07), 0 2px 6px rgba(17, 17, 18, .03); }
.plan-ic { display: flex; align-items: center; height: 56px; }
.plan-face { width: 56px; height: 56px; }
.team { display: flex; gap: 6px; }
.team .tf { width: 40px; height: 40px; }
.plan-n { margin-top: 28px; font-size: 32px; line-height: 36px; letter-spacing: -.02em; }
.plan-l { margin-top: 8px; font-size: 17px; line-height: 26px; color: var(--ink-2); }
.plan-p { display: flex; align-items: baseline; gap: 8px; margin-top: 24px; }
.plan-p b { font-size: 30px; line-height: 36px; font-weight: 600; letter-spacing: -.02em; }
.plan-p span { font-size: 15px; color: var(--grey); }
.plan-note { margin-top: 6px; min-height: 40px; font-size: 13px; line-height: 20px; color: var(--grey); }
.plan .pill-wide { margin-top: 20px; }
.ticks { display: grid; gap: 16px; margin-top: 28px; padding: 28px 0 0; border-top: 1px solid var(--hair); list-style: none; }
.ticks li { display: flex; gap: 12px; font-size: 15px; line-height: 24px; color: var(--ink-2); }
.tick { width: 20px; height: 20px; margin-top: 2px; }
.pfaq { padding: 120px 0; }
.pfaq h2 { text-align: center; font-size: 40px; line-height: 46px; letter-spacing: -.02em; }
.faq { max-width: 680px; margin: 56px auto 0; border-bottom: 1px solid rgba(11, 11, 12, .10); }
.qa { border-top: 1px solid rgba(11, 11, 12, .10); }
.qa summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 84px; padding: 22px 0; cursor: pointer; list-style: none;
  font-size: 19px; line-height: 26px; font-weight: 500; letter-spacing: -.01em; border-radius: 6px; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary i { display: grid; place-items: center; width: 24px; height: 24px; flex: none; }
.qa summary .ic { width: 20px; height: 20px; transition: transform 200ms var(--ease); }
.qa[open] summary .ic { transform: rotate(45deg); }
.qa p { padding: 0 48px 26px 0; font-size: 17px; line-height: 27px; color: #4A4A4F; }

/* ------------------------------------------------------------------ Privacy, Terms and 404 */
.prose { padding: 88px 0 120px; }
.prose-in { max-width: calc(720px + 2 * var(--m)); }
.prose h1 { font-size: clamp(36px, 3.4vw, 48px); line-height: 1.1; letter-spacing: -.02em; }
.draft { margin-top: 12px; color: var(--grey); }
.prose h2 { margin-top: 36px; font-size: 21px; line-height: 28px; letter-spacing: -.01em; }
.prose p:not(.draft) { margin-top: 6px; font-size: 17px; line-height: 27px; color: var(--ink-2); }
.nf { padding: 120px 0 160px; }
.nf-in { display: flex; flex-direction: column; align-items: center; text-align: center; }
.nf-face { width: 88px; height: 88px; margin-bottom: 28px; }
.nf h1 { font-size: clamp(34px, 3.4vw, 48px); line-height: 1.1; letter-spacing: -.02em; }
.nf p { margin-top: 12px; font-size: 18px; line-height: 26px; color: var(--grey); }
.nf .pill { margin-top: 32px; }

/* ------------------------------------------------------------------ Try Clarke's own page: /start/ (only the logo on top,
   the sign-up form and the number for WhatsApp, the plan beside it; founder, 8 Nov) */
.bar-flow .bar-in { justify-content: flex-start; }
.flow { padding: 72px 0 120px; }
.flow-in { display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 380px); justify-content: center; align-items: start; gap: 72px; }
.flow-h { font-size: clamp(34px, 3.4vw, 46px); line-height: 1.1; letter-spacing: -.02em; }
.flow-p { margin-top: 14px; font-size: 18px; line-height: 27px; color: var(--grey); }
.start { margin-top: 36px; }
/* the form (website v5's field: 54 px high, radius 20). Without script it stays hidden: the number below is the way in. */
html:not(.js) .signup { display: none; }
.signup[hidden], .thanks[hidden] { display: none; }
.fld + .fld { margin-top: 18px; }
.field-l { display: block; margin-bottom: 8px; font-size: 15px; line-height: 20px; font-weight: 500; }
.field { display: block; width: 100%; height: 54px; padding: 0 18px; border: 0; border-radius: 20px; background: var(--field); color: var(--ink);
  font: inherit; font-size: 16px; line-height: 22px; -webkit-appearance: none; appearance: none;
  transition: box-shadow 160ms var(--ease), background-color 160ms var(--ease); }
.field::placeholder { color: var(--grey); opacity: 1; }
.field:focus { outline: none; background: var(--white); box-shadow: inset 0 0 0 1.5px var(--ink); }
.field[aria-invalid="true"] { background: var(--white); box-shadow: inset 0 0 0 2px var(--ink); }
.err { display: flex; gap: 6px; margin-top: 10px; font-size: 14px; line-height: 20px; color: var(--ink); text-align: left; }
.err[hidden] { display: none; }
.err .ic { width: 18px; height: 18px; margin-top: 1px; }
.err a { color: var(--ink); }
.ts > * { margin-top: 16px; }   /* Turnstile's box: nothing shows for an invisible widget */
.start-go { margin-top: 28px; height: 52px; }
.start-go:disabled { opacity: .72; cursor: progress; }
.form-msg .err { justify-content: center; text-align: center; margin-top: 14px; }
.thanks { display: flex; gap: 12px; align-items: flex-start; padding: 20px 22px; border-radius: 20px; background: var(--fill); }
.thanks:focus { outline: none; }
.thanks p { font-size: 17px; line-height: 25px; }
.thanks-ic { width: 22px; height: 22px; margin-top: 2px; }
.start-or { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--hair); font-size: 15px; line-height: 22px; color: var(--ink-2); text-align: center; }
.start-num { display: inline-block; padding: 12px 4px; margin: -12px -4px; font-weight: 500; color: var(--ink); white-space: nowrap; }
.try-n { margin-top: 14px; padding: 0 6px; font-size: 12px; line-height: 16px; color: var(--grey); text-align: center; }
.try-n a { color: var(--ink); display: inline-block; padding: 14px 4px; margin: -14px -4px; }
.sum { padding: 32px; border-radius: 28px; background: var(--white); box-shadow: 0 0 0 1px rgba(17, 17, 18, .07), 0 2px 6px rgba(17, 17, 18, .03); }
.sum-n { font-size: 24px; line-height: 30px; letter-spacing: -.02em; font-weight: 500; }
.sum-p { display: grid; gap: 4px; margin-top: 16px; }
.sum-p b { font-size: 30px; line-height: 36px; font-weight: 600; letter-spacing: -.02em; }
.sum-p span { font-size: 15px; line-height: 22px; color: var(--grey); }
.sum .ticks { margin-top: 24px; padding-top: 24px; }

/* ------------------------------------------------------------------ motion */
.js .rv { opacity: 0; transform: translateY(18px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); transition-delay: var(--d, 0ms); }
.js .rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  /* Clarke's face glances and blinks (identity v4.5: the eyes move about 10% of the face and back over 600 ms; a blink
     squashes them to 14% over 120 ms). Closed eyes (Done) don't blink. */
  .mf-look { animation: glance 7.2s var(--ease) infinite 1.2s; }
  .mf:not([data-k="arc"]) .mf-e { animation: blink 5.4s var(--ease) infinite 2.2s; }
  .poster-face .eye { animation: blink 6.2s var(--ease) infinite 1.6s; }
  html { scroll-behavior: smooth; }
}
@keyframes glance { 0%, 22% { transform: translateX(0); } 26%, 30% { transform: translateX(-9px); } 34%, 64% { transform: translateX(0); } 68%, 72% { transform: translateX(9px); } 76%, 100% { transform: translateX(0); } }
@keyframes blink { 0%, 96% { transform: scaleY(1); } 97.1% { transform: scaleY(.14); } 98.2%, 100% { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
  .js .rv { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------------ below 1280: the rows stack, text then picture, so every
   picture keeps Muse's full 620 px tile and the app's own type size, and every header keeps to two lines */
@media (max-width: 1279px) {
  .row-in, .pic-left .row-in { grid-template-columns: minmax(0, 1fr); row-gap: 40px; min-height: 0; padding-block: 88px; }
  .row-t, .pic-left .row-t { grid-column: 1; grid-row: 1; }
  .row-p, .pic-left .row-p { grid-column: 1; grid-row: 2; }
  .row-t { text-align: center; }
  .row-t h2 { max-width: 18em; margin-inline: auto; }
  .row-t p { margin-inline: auto; }
}
@media (max-width: 1023px) {
  .plans { grid-template-columns: repeat(2, minmax(0, 360px)); gap: 16px; }
  .plan { padding: 28px; }
  .close-in { min-height: 0; padding-block: 120px; }
  .q-list { grid-template-columns: minmax(0, 560px); justify-content: center; }
  .q { min-height: 0; }
  .flow-in { grid-template-columns: minmax(0, 480px); gap: 40px; }
}
/* phones */
@media (max-width: 767px) {
  /* the H1 at Muse's phone size: 'Clarke [face], AI that' on its own line, and room for each job on up to two lines,
     so nothing below it moves as the jobs change */
  /* about 40 px at 390: sized so the longest two-line split ('does all your admin', 8.74 em) fits the line */
  .h1 { font-size: clamp(36px, 100cqi / 8.9, 44px); line-height: 1.1; }
  html.rotating .rot { display: grid; min-height: 2.2em; align-items: start; }
  html.rotating .rot-i { white-space: normal; text-wrap: balance; }
  /* the row pictures on a phone, Muse's way (Teddy, 7 Nov: 'the images are way too big'): the desktop picture itself,
     scaled to the screen's width, so a whole row fits on one screen (Muse's phone rows are 628 to 744 px). site.js sets
     --ts to the box's width / 620; the steps below give its value at each common phone width before the script runs.
     The box keeps the picture's shape, so nothing moves when the script runs. */
  .row-p { display: block; position: relative; width: 100%; max-width: 620px; margin-inline: auto; aspect-ratio: 620 / 632; --ts: .451; }
  .row-p > .tile { position: absolute; left: 0; top: 0; width: 620px; max-width: none; height: 632px; min-height: 0;
    margin: 0; transform: scale(var(--ts)); transform-origin: 0 0; }
}
/* --ts before site.js runs: (the narrowest width in each step - 40 px of margins) / 620, so the picture never overflows */
@media (min-width: 360px) and (max-width: 767px) { .row-p { --ts: .516; } }
@media (min-width: 375px) and (max-width: 767px) { .row-p { --ts: .540; } }
@media (min-width: 390px) and (max-width: 767px) { .row-p { --ts: .564; } }
@media (min-width: 393px) and (max-width: 767px) { .row-p { --ts: .569; } }
@media (min-width: 402px) and (max-width: 767px) { .row-p { --ts: .583; } }
@media (min-width: 414px) and (max-width: 767px) { .row-p { --ts: .603; } }
@media (min-width: 428px) and (max-width: 767px) { .row-p { --ts: .625; } }
@media (min-width: 430px) and (max-width: 767px) { .row-p { --ts: .629; } }
@media (min-width: 440px) and (max-width: 767px) { .row-p { --ts: .645; } }
@media (min-width: 480px) and (max-width: 767px) { .row-p { --ts: .709; } }
@media (min-width: 560px) and (max-width: 767px) { .row-p { --ts: .838; } }
@media (min-width: 660px) and (max-width: 767px) { .row-p { --ts: 1; } }
@media (max-width: 639px) {
  .bar-link, .bar-dl { display: none; }
  .bar-menu { display: inline-grid; place-items: center; width: 44px; height: 44px; margin-right: -10px; border-radius: 999px; }
  .bar-menu .ic { width: 22px; height: 22px; }
  /* a light 36 px pill, as in Muse's bar, inside a 44 px tap area */
  .bar-try { height: 44px; padding: 0 16px; border: 4px solid transparent; border-inline-width: 0; background-clip: padding-box; font-size: 14px; }
  .menu::backdrop { background: rgba(11, 11, 12, .12); }
  .lockup { height: 24px; }
  .hero-in { padding-top: 20px; padding-bottom: 16px; }
  .sub { margin-top: 14px; font-size: 16px; line-height: 24px; }
  .hero-cta { width: 100%; margin-top: 28px; }
  .hero-try { width: 100%; max-width: 350px; height: 52px; font-size: 16px; }
  .hero-c { flex: 0 0 auto; margin-top: auto; padding-bottom: 0; }
  .trust { gap: 14px; margin-top: 56px; margin-bottom: 0; }
  .trust-l { gap: 16px 28px; }
  .trust-br { display: block !important; flex-basis: 100%; height: 0; }
  .lg { height: calc(var(--h, 28px) * .75); }
  .cue { margin-top: auto; }
  /* Muse's phone rows: the heading and its line centred over the picture */
  .row-in, .pic-left .row-in { row-gap: 16px; padding-block: 56px; }   /* .pic-left too: the 1279 px rule above is more specific */
  .row-t h2 { font-size: 22px; line-height: 28px; }
  .row-t p { font-size: 16px; line-height: 22px; }
  .video { padding: 56px 0; }
  .video h2 { font-size: 22px; line-height: 28px; }
  .video-p { font-size: 16px; line-height: 24px; }
  .poster { margin-top: 24px; border-radius: 24px; }
  .quotes { padding: 56px 0; }
  .quotes h2 { font-size: 22px; line-height: 28px; }
  .q-list { margin-top: 24px; gap: 16px; }
  .q { padding: 24px; gap: 24px; border-radius: 24px; }
  .q blockquote { font-size: 18px; line-height: 26px; }
  .close-in { padding-block: 96px; }
  .close h2 { font-size: 22px; line-height: 28px; }
  .close p { font-size: 16px; line-height: 24px; }
  /* Muse's phone footer: centred, the name first, then the links */
  .foot-in { display: flex; flex-direction: column; align-items: center; gap: 8px; padding-block: 24px 32px; text-align: center; }
  .foot-n { gap: 4px; }
  .foot-n a, .foot-m { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; }
  .foot-m { justify-self: auto; margin-top: -8px; }
  /* the Download panel is a sheet at the bottom; no QR code, because a phone can't scan its own screen */
  .dl { top: auto; left: 0; right: 0; bottom: 0; width: 100%; max-width: none; border-radius: 28px 28px 0 0; padding: 28px 20px calc(24px + env(safe-area-inset-bottom)); transform-origin: bottom center; }
  .dl::backdrop { background: rgba(11, 11, 12, .28); }
  .dl-qr, .dl-p { display: none; }
  .dl .pill { height: 48px; font-size: 15px; }
  .dl-store { width: 100%; }
  .ptop { padding: 48px 0 72px; }
  .plans { grid-template-columns: minmax(0, 1fr); margin-top: 40px; }
  .plan { padding: 24px; border-radius: 20px; }
  .plan-n { font-size: 28px; line-height: 32px; }
  .pfaq { padding: 72px 0; }
  .pfaq h2 { font-size: 30px; line-height: 36px; }
  .faq { margin-top: 32px; }
  .qa summary { font-size: 17px; line-height: 24px; min-height: 72px; padding: 18px 0; }
  .qa p { padding-right: 0; font-size: 16px; line-height: 25px; }
  .prose { padding: 48px 0 72px; }
  .flow { padding: 40px 0 72px; }
  .flow-p { font-size: 16px; line-height: 24px; }
  .sum { padding: 24px; border-radius: 24px; }
}


/* UI Kit 4.0 (light), only the parts the row pictures use; written by src/tiles.py */
@font-face{font-family:"Geist Mono";src:url("/assets/fonts/GeistMono-Latin.woff2") format("woff2");font-weight:400 600;font-display:swap}
.kit{--color-white: #FFFFFF; --color-ink: #0B0B0C; --color-grey: #6E6E73; --color-hairline: #E5E5EA; --color-fill: #F2F2F4; --color-clarke-blue: #0E5FD8; --color-night: #060A14; --color-surface: #121826; --color-fill-dark: #1C2433; --color-text-dark: #F3F5F9; --color-grey-dark: #8B93A5; --color-sky: #7DB7FF; --font-app: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif; --font-mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --app-large-title: 700 34px/41px var(--font-app); --app-large-title-tracking: 0.37px; --app-amount: 700 34px/38px var(--font-app); --app-amount-tracking: -0.4px; --app-title2: 700 22px/28px var(--font-app); --app-title2-tracking: -0.26px; --app-title3: 600 20px/25px var(--font-app); --app-title3-tracking: -0.45px; --app-headline: 600 17px/22px var(--font-app); --app-headline-tracking: -0.43px; --app-body: 400 17px/22px var(--font-app); --app-body-tracking: -0.43px; --app-letter: 400 17px/24px var(--font-app); --app-letter-tracking: -0.43px; --app-subheadline: 400 15px/20px var(--font-app); --app-subheadline-tracking: -0.23px; --app-status: 600 15px/20px var(--font-app); --app-status-tracking: -0.23px; --app-footnote: 400 13px/18px var(--font-app); --app-footnote-tracking: -0.08px; --app-tab-label: 500 10px/12px var(--font-app); --app-tab-label-tracking: 0px; --app-badge: 600 12px/16px var(--font-app); --app-badge-tracking: 0px; --mono-status: 400 15px/20px var(--font-mono); --mono-status-tracking: -0.01em; --mono-time: 400 13px/18px var(--font-mono); --mono-time-tracking: -0.01em; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px; --app-margin: 16px; --bar-inset: 22px; --tab-bar-height: 66px; --tab-item-height: 58px; --chat-height: 48px; --chat-gap: 10px; --face-header: 48px; --face-header-top: 64px; --face-tab: 34px; --content-top: 140px; --fade-top: 136px; --edge-top: 108px; --button-height: 50px; --field-height: 52px; --row-min: 56px; --tap-min: 44px; --icon: 24px; --sheet-gap-top: 116px; --radius-field: 12px; --radius-letter: 14px; --radius-card: 24px; --radius-phone-screen: 55px; --radius-tab-bar: 33px; --radius-tab-platter: 29px; --radius-capsule: 999px; --radius-sheet: 33px; --radius-bubble: 20px; --radius-banner: 24px; --radius-photo: 20px; --radius-badge: 999px; --radius-button: 999px; --glass-blur: blur(20px) saturate(1.6) contrast(0.5) brightness(1.5); --glass-shadow: 0 6px 20px rgba(11, 11, 12, 0.08); --fade-blur: blur(3px); --edge-blur-1: blur(0.6px); --edge-blur-2: blur(0.6px); --edge-blur-3: blur(0.6px); --edge-blur-4: blur(0.6px); --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --dur-press: 160ms; --dur-label: 240ms; --dur-expression: 240ms; --dur-status: 240ms; --dur-blink: 120ms; --dur-glance: 600ms; --dur-rise: 320ms; --dur-undo-window: 10000ms; --dur-segment: 250ms; --dur-state: 200ms; --dur-exit: 220ms; --dur-sent-hold: 1600ms; --dur-done-hold: 3000ms; --dur-spin: 700ms; --press-scale: 0.97; --z-content: 0; --z-edge-fade: 5; --z-glass: 6; --z-face: 7; --z-status-bar: 8; --z-scrim: 20; --z-sheet: 21; --z-banner: 30; --z-review: 40; --page: #FFFFFF; --card: #FFFFFF; --card-edge: #E5E5EA; --sheet: #FFFFFF; --text: #0B0B0C; --text-second: #6E6E73; --edge: #E5E5EA; --fill: #F2F2F4; --button: #0B0B0C; --button-text: #FFFFFF; --button-second: #F2F2F4; --button-second-text: #0B0B0C; --disabled: #F2F2F4; --disabled-text: #6E6E73; --focus: #0B0B0C; --field: #FFFFFF; --field-edge: #C7C7CC; --clarke-face: #0E5FD8; --clarke-words: #0E5FD8; --progress-track: #E5E5EA; --glass: rgba(255, 255, 255, 0.86); --glass-edge: rgba(11, 11, 12, 0.08); --platter: rgba(11, 11, 12, 0.1); --segment-on: #FFFFFF; --scrim: rgba(11, 11, 12, 0.32); --badge: #FF3B30; --badge-text: #FFFFFF; --switch-on: #0B0B0C; --switch-off: #E5E5EA; --knob-on: #FFFFFF; --knob-off: #FFFFFF; --bubble-me: #F2F2F4;}
.c,.c *{box-sizing: border-box;}
.c{font: var(--app-body); letter-spacing: var(--app-body-tracking); color: var(--text); -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; -webkit-tap-highlight-color: transparent;}
.c :where(p, h1, h2, h3, ol, ul, figure){margin: 0; padding: 0;}
.c :where(ol, ul){list-style: none;}
.c :where(button){font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: inherit;}
.c :where(a){color: inherit; text-decoration: none;}
.c svg{display: block; flex: none; overflow: visible;}
.c [hidden]{display: none !important;}
.c-btn{position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--button-height); min-width: 88px; padding: 0 22px; border-radius: var(--radius-button); font: var(--app-headline); letter-spacing: var(--app-headline-tracking); white-space: nowrap; transition: transform var(--dur-press) var(--ease-out), background-color var(--dur-press) var(--ease-out), opacity var(--dur-press) var(--ease-out); -webkit-user-select: none; user-select: none;}
.c-btn svg{width: 20px; height: 20px;}
.c-btn--primary{background: var(--button); color: var(--button-text);}
.c-btn--secondary{background: var(--button-second); color: var(--button-second-text);}
.c-spin{width: 18px; height: 18px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: c-spin var(--dur-spin) linear infinite; flex: none;}
.c-round{position: relative; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; flex: none; transition: transform var(--dur-press) var(--ease-out);}
.c-round > i{width: 30px; height: 30px; border-radius: 50%; background: var(--fill); color: var(--text-second); display: grid; place-items: center;}
.c-round > i svg{width: 16px; height: 16px;}
.c-round--big > i{width: 44px; height: 44px; color: var(--text);}
.c-round--big > i svg{width: 20px; height: 20px;}
.c-card{background: var(--card); border: 1px solid var(--card-edge); border-radius: var(--radius-card);}
.c-ask{padding: 16px 20px 20px;}
.c-ask__top{display: flex; align-items: center; justify-content: space-between; min-height: 32px; margin-right: -12px;}
.c-ask__to{font: var(--app-headline); letter-spacing: var(--app-headline-tracking);}
.c-ask__to span{font-weight: 400; color: var(--text-second);}
.c-ask__amt{margin-top: 8px; font: var(--app-amount); letter-spacing: var(--app-amount-tracking);}
.c-ask__addr{margin-top: 2px; font: var(--app-subheadline); letter-spacing: var(--app-subheadline-tracking); color: var(--text-second);}
.c-ask__msg{margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--edge); font: var(--app-letter); letter-spacing: var(--app-letter-tracking); border-radius: 0; transition: background-color var(--dur-state) var(--ease-out); white-space: pre-wrap; overflow-wrap: break-word;}
.c-ask__note,.c-ask__fail,.c-ask__sent,.c-ask__sending{display: none;}
.c-ask__note{margin-top: 12px; align-items: center; gap: 6px; font: var(--app-footnote); color: var(--text-second);}
.c-ask__note svg{width: 14px; height: 14px;}
.c-ask__acts{margin-top: 18px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px;}
.c-ask__acts .c-btn{width: 100%; min-width: 0;}
.c-ask .l-done,.c-ask .l-retry,.c-ask .l-loading{display: none;}
.c-ask__sending{margin-top: 18px; grid-template-columns: 1fr auto; align-items: center; gap: 12px; position: relative;}
.c-ask__count{font: var(--app-headline); letter-spacing: var(--app-headline-tracking);}
.c-ask__count b{font-family: var(--font-mono); font-weight: 500; letter-spacing: -0.01em;}
.c-ask__sending .c-btn{min-width: 112px;}
.c-progress{display: block; height: 2px; border-radius: 1px; background: var(--progress-track); overflow: hidden;}
.c-progress > i{display: block; height: 100%; width: 100%; background: var(--clarke-words); transform-origin: left center;}
.c-ask__sending .c-progress{grid-column: 1 / -1; margin-top: 2px;}
.c-ask__sent{margin-top: 18px; min-height: 50px; align-items: center; gap: 8px; font: var(--app-headline); letter-spacing: var(--app-headline-tracking);}
.c-ask__sent svg{width: 22px; height: 22px;}
.c-ask__fail{margin-top: 16px; gap: 10px; align-items: flex-start; font: var(--app-body); letter-spacing: var(--app-body-tracking);}
.c-ask__fail svg{width: 22px; height: 22px; margin-top: 0;}
.c-section-h{font: var(--app-subheadline); letter-spacing: var(--app-subheadline-tracking); font-weight: 600; color: var(--text-second); padding: 0 0 6px;}
.c-done__row{display: grid; grid-template-columns: 72px 1fr; gap: 8px; width: 100%; padding: 12px 0; border-top: 1px solid var(--edge); font: var(--app-subheadline); letter-spacing: var(--app-subheadline-tracking); text-align: left;}
.c-done__row time{font: var(--mono-time); letter-spacing: var(--mono-time-tracking); color: var(--text-second); padding-top: 1px;}
.c-done__row small{display: block; margin-top: 2px; font: var(--app-subheadline); color: var(--text); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: currentColor; text-decoration-thickness: 1px;}
button.c-done__row{min-height: 64px; transition: transform var(--dur-press) var(--ease-out);}
.c-list{border-top: 1px solid var(--edge);}
.c-row{position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: var(--row-min); padding: 12px 0; border-bottom: 1px solid var(--edge); text-align: left; color: var(--text);}
.c-row::before{content: ""; position: absolute; inset: 0 calc(-1 * var(--app-margin)); background: var(--fill); opacity: 0; transition: opacity var(--dur-press) var(--ease-out); z-index: -1;}
.c-row{isolation: isolate;}
.c-row__main{flex: 1; min-width: 0; display: grid; gap: 2px;}
.c-row__l1{display: flex; justify-content: space-between; gap: 12px; font: var(--app-headline); letter-spacing: var(--app-headline-tracking);}
.c-row__l1 b{font-weight: 600;}
.c-row__amt{font-weight: 400; white-space: nowrap;}
.c-row__l2{font: var(--app-subheadline); letter-spacing: var(--app-subheadline-tracking); color: var(--text-second);}
.c-row__chev{color: var(--text-second); opacity: 0.7;}
.c-row__chev svg{width: 18px; height: 18px;}
.c-row__time{width: 64px; flex: none; align-self: flex-start; padding-top: 2px; font: var(--mono-status); letter-spacing: var(--mono-status-tracking); color: var(--text);}
.c-row--person .c-row__acts{display: flex; gap: 4px;}
.c-month__head{display: flex; align-items: center; justify-content: space-between;}
.c-month__nav{display: flex; margin-right: -10px;}
.c-month__wk,.c-month__grid{display: grid; grid-template-columns: repeat(7, 1fr);}
.c-month__wk{margin-top: 10px; font: var(--app-footnote); font-weight: 600; color: var(--text-second); text-align: center;}
.c-month__wk span{padding: 4px 0;}
.c-day{position: relative; height: 48px; display: grid; justify-items: center; align-content: start; padding-top: 3px; border-top: 1px solid var(--edge); font: var(--app-body); letter-spacing: 0;}
.c-day b{width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 400; transition: transform var(--dur-press) var(--ease-out);}
.c-day.is-today b{font-weight: 700; box-shadow: inset 0 0 0 1.5px var(--text);}
.c-day.is-picked b{background: var(--button); color: var(--button-text); font-weight: 600; box-shadow: none;}
.c-day.has-event::after{content: ""; position: absolute; top: 35.5px; left: calc(50% - 2.5px); width: 5px; height: 5px; border-radius: 50%; background: var(--text-second);}
.c-day.is-picked.has-event::after{background: var(--text);}
.c-dayhead{margin-top: 18px; font: var(--app-headline); letter-spacing: var(--app-headline-tracking); padding-bottom: 6px;}
.c-sheet__title{padding-top: 6px; font: var(--app-title2); letter-spacing: var(--app-title2-tracking);}
.c-banner{display: grid; grid-template-columns: 38px 1fr auto; gap: 4px 10px; align-items: start; padding: 14px 16px 14px 14px; border-radius: var(--radius-banner);}
.c-banner__icon{grid-row: span 2; width: 38px; height: 38px; border-radius: 9px; background: var(--color-clarke-blue); display: grid; place-items: center;}
.c-banner__icon svg{width: 30px; height: 30px;}
.c-banner__t{font: var(--app-headline); font-size: 15px; letter-spacing: var(--app-subheadline-tracking);}
.c-banner__time{font: var(--app-footnote); color: var(--text-second);}
.c-banner__l{grid-column: 2 / -1; font: var(--app-subheadline); letter-spacing: var(--app-subheadline-tracking);}
.c-face{display: block; width: 100%; height: 100%;}
.c-sub{margin-top: 4px; font: var(--app-subheadline); letter-spacing: var(--app-subheadline-tracking); color: var(--text-second);}
.c-lead{margin-top: 14px; font: var(--app-body); letter-spacing: var(--app-body-tracking);}
.c-row--deal{align-items: flex-start; gap: 14px; padding: 16px 0;}
.c-row--deal .c-row__main{gap: 2px;}
.c-row--deal .c-row__l1{align-items: baseline;}
.c-row--deal .c-row__l1 b{min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.c-row--deal .c-row__amt{font-weight: 600; font-variant-numeric: tabular-nums;}
.c-row--deal .c-row__chev{align-self: center;}
.c-deal__anchor{flex: none; display: none;}
.c-avatar{width: 40px; height: 40px; border-radius: 50%; background: var(--fill); color: var(--text); display: grid; place-items: center; font: var(--app-subheadline); font-weight: 600; letter-spacing: 0;}
.c-deal__next{margin-top: 8px; display: flex; align-items: flex-start; gap: 10px; font: var(--app-subheadline); letter-spacing: var(--app-subheadline-tracking); color: var(--text);}
.c-deal__when{flex: none; width: 84px; padding-top: 1px; font: var(--mono-time); letter-spacing: var(--mono-time-tracking); color: var(--text-second);}
.c-deal__step{display: flex; align-items: flex-start; gap: 6px; min-width: 0;}
.c-deal__ic{flex: none; display: none; padding-top: 2px; color: var(--text-second);}
.c-deal__ic svg{width: 16px; height: 16px;}
[data-deals="a"] .c-deal__anchor{display: block; width: 48px;}
[data-deals="a"] .c-deal__anchor .c-avatar{display: none;}
[data-deals="a"] .c-deal__when{display: none;}
[data-deals="a"] .c-deal__ic{display: block;}
[data-deals="a"] .c-dgroup__list{border-top: 0; display: grid; gap: 10px;}
[data-deals="a"] .c-row--deal{border: 1px solid var(--card-edge); border-radius: var(--radius-card); background: var(--card); padding: 16px 14px; gap: 12px;}
[data-deals="a"] .c-row--deal::before{inset: 0; border-radius: inherit;}
.c-dblock{display: grid; justify-items: center; text-align: center; padding-top: 1px;}
.c-dblock__w{font: var(--app-footnote); letter-spacing: var(--app-footnote-tracking); color: var(--text-second); white-space: nowrap;}
.c-dblock__n{font: 500 24px/28px var(--font-mono); letter-spacing: -0.02em; color: var(--text); font-variant-numeric: tabular-nums;}
.c-dblock__m{font: var(--app-footnote); letter-spacing: var(--app-footnote-tracking); color: var(--text-second);}
.c-pcard[hidden]{display: none;}
.c-pcard__hit{display: grid; gap: 0; width: 100%; text-align: left; transition: transform var(--dur-press) var(--ease-out);}
.c-pcard__ph{display: block; aspect-ratio: 4 / 3; border-radius: var(--radius-photo); overflow: hidden; background: var(--fill);}
.c-pcard__ph img{display: block; width: 100%; height: 100%; object-fit: cover;}
.c-pcard__price{margin-top: 12px; display: flex; align-items: baseline; gap: 8px;}
.c-pcard__price b{font: var(--app-title2); letter-spacing: var(--app-title2-tracking);}
.c-pcard__price span{font: var(--app-subheadline); letter-spacing: var(--app-subheadline-tracking); color: var(--text-second);}
.c-pcard__addr{margin-top: 2px; font: var(--app-headline); letter-spacing: var(--app-headline-tracking);}
.c-pcard__fit{margin-top: 6px; font: var(--app-subheadline); letter-spacing: var(--app-subheadline-tracking); font-weight: 600; color: var(--text);}
.c-facts{margin-top: 4px; display: flex; flex-wrap: wrap; row-gap: 2px; align-items: center; gap: 2px 12px; white-space: nowrap; overflow: hidden; font: var(--app-subheadline); letter-spacing: var(--app-subheadline-tracking); color: var(--text-second);}
.c-facts > span{display: inline-flex; align-items: center; gap: 4px;}
.c-facts svg{width: 16px; height: 16px;}
.c-pcard__ph{position: relative;}
.c-pcard__fits{position: absolute; top: 12px; right: 12px; display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; border-radius: 14px; background: var(--card); color: var(--text); font: var(--app-footnote); font-weight: 600; box-shadow: 0 1px 3px rgba(11, 11, 12, 0.16);}
.c-pcard__fits svg{width: 14px; height: 14px;}