/*
  FOLLOWap — the app surface.

  The palette is landing/index.html's :root, unchanged. The marketing site
  runs it dark; the app runs the same four colors light, which is what the
  screenshots in landing/ show.

  Two things here are identity rather than decoration and are marked where
  they appear: the 3px rail on the left of every contact row, and the bottom
  tab bar. Everything else is hairlines, whitespace and one green.
*/

/* @critical */
@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;src:url("fonts/inter-400.65850a373e25.woff2") format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:Inter;font-style:normal;font-weight:500;font-display:swap;src:url("fonts/inter-500.65850a373e25.woff2") format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;src:url("fonts/inter-600.65850a373e25.woff2") format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:Inter;font-style:normal;font-weight:700;font-display:swap;src:url("fonts/inter-700.65850a373e25.woff2") format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:Inter;font-style:normal;font-weight:800;font-display:swap;src:url("fonts/inter-800.65850a373e25.woff2") format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
:root{
  /* From landing/index.html, verbatim. */
  --ink:#19191B; --paper:#EFEDE8; --white:#FFFFFF;   /* round 3: a shade warmer */
  --green:#38CA5F; --grey:#8A8A8C; --grey-d:#5A5A5C;

  /* The third rail state. The marketing palette has two colors and the
     recency rail needs three, so 'going cold' comes from the prototype's
     --stale rather than being invented here. */
  --amber:#D08B2C;

  --line:rgba(0,0,0,.10);
  --line-soft:rgba(0,0,0,.055);
  --sunken:#F4F4F4;
  --r:18px; --r-sm:18px; --r-ctl:12px;   /* round 3: 18 on cards, lists, sheets; 12 on controls */

  /* docs/09, "Type and color in the commercial": near-black ink on
     off-white, one green, everything else black, white and grey. The type is
     the demo's -- Inter, tight, heavy for headings and regular for body --
     because the demo wins on feel and the frames were filmed from it. */
  --never:#C9C8C2;

  /* Motion (motion-restyle, 2026-09-16): one easing family. Entrances glide out,
     exits ease in, nothing overshoots but the tab bar's circle. */
  --ease-out:cubic-bezier(0.2,0.8,0.2,1); --ease-out-expo:cubic-bezier(0.16,1,0.3,1);
  --ease-in:cubic-bezier(0.6,0,0.8,0.2); --spring:cubic-bezier(0.34,1.3,0.64,1);
  --dur-fast:180ms; --dur-base:300ms; --dur-sheet:600ms; --dur-curtain:380ms; --stagger:60ms;
  /* The two surfaces: the stage (ink) and the sheet (paper). */
  --stage:var(--ink); --sheet:var(--paper);
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
/* An element's own display rule (.two, .wide, .row are flex) would beat the
   browser's [hidden]. It must not: hidden means gone. */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:var(--paper);color:var(--ink);
  font-size:14px;line-height:1.45;letter-spacing:-.011em;
  font-feature-settings:"cv11","ss01";
  -webkit-font-smoothing:antialiased;
  /* round 7 fixes (2026-09-15): the shell is a flex column -- header, a scrolling <main>, the tab
     bar -- and the document itself never scrolls. The bar's box is identical on every tab by
     construction, and iOS has no scrolled document to mis-offset a fixed element against. */
  height:var(--shell-h,100dvh);display:flex;flex-direction:column;overflow:hidden;position:relative;
  /* --shell-h: set by followap.js only from the Home Screen, when iOS lays the page out
     against a viewport shorter than the screen (the layout viewport stays at its
     minimum on a page that never scrolls). The shell is then sized to the screen. */
}
html{height:100%;overflow:hidden}
main.wrap{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;
  padding-bottom:calc(88px + env(safe-area-inset-bottom));width:100%}   /* the floating tab bar: 16 + 56 + 16 */
.demo-banner{flex:0 0 auto}
img,svg{display:block}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
.tnum{font-variant-numeric:tabular-nums}

/* ── shell ─────────────────────────────────────────────────────────── */
.top{position:relative;flex:0 0 auto;z-index:20;background:var(--stage);
  border-bottom:1px solid transparent}   /* motion-restyle step 3: the header is the stage, on every page */   /* round 7 fixes: no backdrop blur -- it re-rasterises on every scrolled frame */
.wrap{max-width:760px;margin:0 auto;padding:0 20px}
/* round 7, item 12: the header owns the status bar. As a Home Screen app the
   status bar is translucent (base.html) and the header pads by the top
   safe-area inset, so the clock sits on the app's own paper and content
   scrolls beneath it, as under a native navigation bar. */
.top .wrap{padding-top:calc(12px + env(safe-area-inset-top));padding-bottom:12px}
.brand{display:flex;align-items:baseline;gap:8px}
.brand .nm{font-size:15px;font-weight:800;letter-spacing:-.03em}
.brand .nm .ap{color:var(--green)}
.brand .dv{color:var(--grey);font-size:13px}
.brand .ct{font-size:13px;color:var(--grey-d)}
.brand .ct b{color:var(--ink);font-weight:700}

main{padding-top:18px}

/* Large, tight. The headings carry the tone more than anything else does. */
h1{font-size:26px;font-weight:800;letter-spacing:-.04em;line-height:1.12}
h2{font-size:19px;font-weight:700;letter-spacing:-.03em}
.lede{font-size:15px;color:var(--grey-d);margin-top:8px;max-width:52ch}
.sect{font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:var(--grey);margin:22px 0 8px;display:flex;justify-content:space-between;align-items:baseline}
.sect .n{letter-spacing:0;text-transform:none;font-weight:500;font-size:12.5px}

/* @endcritical */

/* ── surfaces ──────────────────────────────────────────────────────── */
.card{background:var(--white);border:1px solid var(--line);border-radius:var(--r)}
.card.pad{padding:22px}
.stack{display:grid;gap:14px}
.muted{color:var(--grey)}
.hr{height:1px;background:var(--line);border:0;margin:16px 0}

/* ── controls ──────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:46px;padding:0 22px;border-radius:var(--r-ctl);border:1px solid var(--line);
  background:var(--white);font-size:15px;font-weight:600;letter-spacing:-.018em;
  cursor:pointer;transition:background .12s,border-color .12s}
@media (hover:hover){.btn:hover{background:var(--sunken)}}
.btn.primary{background:var(--ink);color:var(--white);border-color:var(--ink)}
@media (hover:hover){.btn.primary:hover{background:#000}}
.btn.wide{width:100%}
.btn[disabled]{opacity:.4;cursor:not-allowed}
.actions{display:flex;gap:10px;align-items:center;margin-top:22px;flex-wrap:wrap}

select,input[type=text],input[type=email],input[type=password],input[type=date]{height:44px;padding:0 12px;border:1px solid var(--line);
  border-radius:9px;background:var(--white);font-size:16px;outline:none;
  appearance:none;-webkit-appearance:none}
input[type=text]:focus,input[type=email]:focus,input[type=password]:focus,input[type=date]:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(56,202,95,.16)}
input[type=date]{-webkit-appearance:none;appearance:none;width:100%;min-height:44px;background:#fff;font:inherit;color:var(--ink);text-align:left}
input[type=date]::-webkit-date-and-time-value{text-align:left}
.linkish{background:none;border:0;padding:6px 0 0;font:inherit;font-size:13px;font-weight:600;color:var(--grey-d,var(--grey));text-decoration:underline;text-underline-offset:3px;cursor:pointer}
select{padding-right:30px;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='%238A8A8C' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center}
select:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(56,202,95,.16)}

/* ── notices ───────────────────────────────────────────────────────── */
.notice{display:flex;gap:11px;padding:14px 16px;border-radius:var(--r-ctl);
  border:1px solid var(--line);background:var(--white);font-size:14.5px;line-height:1.45}
.notice .dot{width:7px;height:7px;border-radius:50%;background:var(--amber);
  margin-top:8px;flex:0 0 auto}
.notice.blocking .dot{background:#B4462F}
.notice.good .dot{background:var(--green)}
.notice b{font-weight:700}

/* ── stat tiles ────────────────────────────────────────────────────── */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.tile{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:14px 14px 13px}
.tile .v{font-size:22px;font-weight:700;letter-spacing:-.035em;line-height:1;font-variant-numeric:tabular-nums}
.tile .v.green{color:var(--green)}
.tile .k{font-size:12px;color:var(--grey);margin-top:5px}

/* ── the report ────────────────────────────────────────────────────── */
.report{padding:6px 0}
.report .line{display:flex;align-items:baseline;gap:14px;padding:9px 22px}
.report .line .v{font-size:17px;font-weight:700;letter-spacing:-.03em;
  min-width:64px;text-align:right;font-variant-numeric:tabular-nums}
.report .line .l{font-size:14.5px;color:var(--grey-d)}
.report .line.head .v{font-size:20px}
.report .rule{height:1px;background:var(--line);margin:8px 22px}
.report .line.warn .v,.report .line.warn .l{color:var(--amber)}
.report .line.warn .l{font-weight:600}

/* ── choice cards ──────────────────────────────────────────────────── */
.choices{display:grid;gap:10px}
.choice{display:flex;gap:13px;padding:15px 17px;border:1px solid var(--line);
  border-radius:var(--r-ctl);background:var(--white);cursor:pointer;transition:border-color .12s}
@media (hover:hover){.choice:hover{border-color:var(--grey)}}
.choice input{margin-top:4px;accent-color:var(--ink);flex:0 0 auto}
.choice .t{font-weight:700;font-size:15px;letter-spacing:-.02em}
.choice .d{font-size:13.5px;color:var(--grey);margin-top:3px}
.choice .tag{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--green);margin-left:7px}
.choice.destructive .t{color:#B4462F}

/* ── the column mapping table ──────────────────────────────────────── */
.cols{overflow:hidden}
.col{display:grid;grid-template-columns:1fr 190px;gap:14px;align-items:center;
  padding:14px 18px;border-bottom:1px solid var(--line-soft)}
.col:last-child{border-bottom:0}
.col .nm{font-size:14.5px;font-weight:600;letter-spacing:-.02em}
.col .dupe{font-size:11px;font-weight:700;color:var(--grey);margin-left:6px}
.col .samples{font-size:12.5px;color:var(--grey);margin-top:4px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.col.off .nm{color:var(--grey)}

/* ── contact rows ──────────────────────────────────────────────────── */
/*
  IDENTITY. The 3px rail is how a FOLLOWap list is recognised at a glance:
  grey never reached, green reached recently, amber going cold. It is
  full-bleed to the row's height and sits flush to the card's left edge --
  no inset, no radius, no gap. Changing its width or letting it float inside
  padding is the fastest way to make this look like somebody else's product.
*/
.list{background:var(--white);border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden}
.row{display:flex;align-items:center;gap:12px;padding:13px 16px 13px 0;
  border-bottom:1px solid var(--line-soft);cursor:pointer;transition:background .1s}
.row:last-child{border-bottom:0}
@media (hover:hover){.row:hover{background:var(--sunken)}}
.row:active{background:var(--sunken)}
.rail{width:3px;align-self:stretch;flex:0 0 auto;background:var(--never)}
.rail.fresh{background:var(--green)}
.rail.stale{background:var(--amber)}
/* Kept for the pocket and sale rows on Areas, where a ZIP prefix earns its
   place. Contact rows no longer use it -- Gmail's rule, nothing decorative. */
.ini{flex:0 0 auto;width:30px;height:30px;border-radius:7px;background:var(--sunken);
  border:1px solid var(--line);display:grid;place-items:center;
  font-size:10.5px;font-weight:600;color:var(--grey-d);letter-spacing:-.01em;margin-left:9px}
.rmain{flex:1;min-width:0;margin-left:14px}
.ini+.rmain{margin-left:0}
.rname{font-size:14.5px;font-weight:600;letter-spacing:-.018em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rmeta{font-size:12.5px;color:var(--grey);margin-top:1px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rside{flex:0 0 auto;display:flex;align-items:center;gap:8px;color:var(--grey)}
.ago{font-size:12px;font-variant-numeric:tabular-nums;color:var(--grey)}

/* ── filter chips ──────────────────────────────────────────────────── */
.chips{display:flex;gap:6px;overflow-x:auto;padding:2px 0 6px;scrollbar-width:none;
  margin:0 -20px;padding-left:20px;padding-right:20px}
.chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px;
  border-radius:10px;border:1px solid var(--line);background:var(--white);
  font-size:13px;font-weight:500;letter-spacing:-.01em;white-space:nowrap;cursor:pointer;
  color:var(--grey-d);transition:background .15s,color .15s,border-color .15s}
.chip .n{color:var(--grey);font-weight:500;font-size:12px;font-variant-numeric:tabular-nums}
.chip .d{width:6px;height:6px;border-radius:2px;background:var(--never)}
.chip .d.fresh{background:var(--green)}
.chip .d.stale{background:var(--amber)}
.chip.on{background:var(--ink);color:var(--white);border-color:var(--ink);animation:settle .36s cubic-bezier(.22,1.12,.36,1)}
.chip.on .n{color:rgba(255,255,255,.55)}

/* ── the legend ────────────────────────────────────────────────────── */
.legend{display:flex;gap:22px;flex-wrap:wrap;padding:15px 18px;font-size:14px}
.legend .i{display:flex;align-items:center;gap:9px}
.legend .b{width:3px;height:17px;border-radius:1px;background:var(--grey);opacity:.45}
.legend .b.fresh{background:var(--green);opacity:1}
.legend .b.stale{background:var(--amber);opacity:1}
.legend .w{color:var(--grey);font-size:13px}

/* ── drop zone ─────────────────────────────────────────────────────── */
.drop{border:1px solid var(--line);border-radius:var(--r);background:var(--white);
  padding:46px 26px;text-align:center}
.drop .ic{width:44px;height:44px;margin:0 auto 16px;color:var(--grey)}
.drop .t{font-size:17px;font-weight:700;letter-spacing:-.028em}
.drop .s{font-size:14px;color:var(--grey);margin-top:7px}

/* @critical */
/* ── the bottom tab bar ────────────────────────────────────────────── */
/*
  IDENTITY. Five tabs, hairline top, blurred ground, the active one in ink
  and the rest in grey. The center tab's label is the black capsule.
*/
/* The tab bar is the last flex item of the shell: its box is the bar's content plus the
   safe-area inset, once, and it ends where the shell ends -- the bottom of the screen. */
/* The tab bar (motion-restyle step 1): a floating pill in the stage color, 16px
   above the safe area, 12px in from the sides, 56px tall. The active tab is a
   40px circle in the sheet color with the icon in the stage color; the circle
   slides to the tapped tab on --spring. Labels stay on the four other tabs at
   10px; the active tab's label fades out (the crumb names the screen). The
   pill floats over <main>, which pads its foot so the last row clears it. */
.tabs{position:absolute;left:12px;right:12px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:35;height:56px;
  display:flex;border-radius:999px;background:var(--stage);box-shadow:0 8px 24px rgba(0,0,0,.18)}
.tab{position:relative;z-index:1;flex:1;padding:0;background:none;border:0;cursor:pointer;height:56px;
  display:grid;justify-items:center;align-content:center;gap:2px;color:var(--sheet);opacity:.72;
  transition:opacity 120ms,transform 80ms ease-out}
.tab svg{transition:color 120ms,transform var(--dur-base) var(--spring)}
.tab span{font-size:10px;font-weight:500;letter-spacing:0;transition:opacity 120ms}
.tab.on{color:var(--stage);opacity:1}
.tab.on span{opacity:0}
.tab.on svg{transform:translateY(7px)}

/* @endcritical */
@media (max-width:520px){
  .col{grid-template-columns:1fr;gap:9px}
  h1{font-size:26px}
}

/* ── the seven actions ─────────────────────────────────────────────── */
.acts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.act{display:grid;gap:3px;text-align:left;padding:14px 15px;border-radius:var(--r-sm);
  border:1px solid var(--line);background:var(--white);cursor:pointer;
  transition:border-color .12s,background .12s}
@media (hover:hover){.act:hover:not([disabled]){border-color:var(--grey)}}
.act .l{font-size:15px;font-weight:700;letter-spacing:-.024em}
.act .h{font-size:12.5px;color:var(--grey);line-height:1.35}
.act[disabled]{opacity:.45;cursor:not-allowed}


/* ══════════════════════════════════════════════════════════════════════
   The interaction port. docs/08-interaction-port.md.
   Behavior first; the look of each screen is the next pass (docs/09).
   ══════════════════════════════════════════════════════════════════════ */

/* @critical */
/* ── the search field, in the header on Clients ─────────────────────── */
.search{position:relative;margin-top:10px}
.search input{width:100%;height:44px;padding:0 12px 0 34px;border:1px solid var(--line);
  border-radius:12px;background:var(--white);font-size:16px;outline:none;
  -webkit-appearance:none;appearance:none;transition:border-color .12s,box-shadow .12s}
.search input::placeholder{color:var(--grey)}
.search input:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(56,202,95,.16)}
.search input::placeholder{font-size:14px}
.search .mg{position:absolute;left:12px;top:13px;color:var(--grey);pointer-events:none}
.search input::-webkit-search-cancel-button{-webkit-appearance:none}

/* @endcritical */
/* ── the rows are links; hide/show on filter ───────────────────────── */
.row[hidden]{display:none}
.row.still{cursor:default}
@media (hover:hover){.row.still:hover{background:transparent}}
.empty{text-align:center;padding:38px 20px;color:var(--grey);font-size:14px}
.refilter .row{animation:rowIn .38s cubic-bezier(.22,1.12,.36,1) both}
@keyframes rowIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.refilter .row:nth-child(2){animation-delay:.04s}.refilter .row:nth-child(3){animation-delay:.08s}
.refilter .row:nth-child(4){animation-delay:.12s}.refilter .row:nth-child(5){animation-delay:.16s}
.refilter .row:nth-child(6){animation-delay:.2s}.refilter .row:nth-child(7){animation-delay:.24s}
.refilter .row:nth-child(8){animation-delay:.28s}.refilter .row:nth-child(n+9){animation-delay:.3s}
.rail.none{background:transparent;opacity:0}

/* ── the sheet the card slides up in ───────────────────────────────── */
.scrim{position:fixed;inset:0;background:rgba(25,25,27,.34);opacity:0;pointer-events:none;
  transition:opacity .22s;z-index:40}
.scrim.on{opacity:1;pointer-events:auto}
.panel{position:fixed;left:50%;bottom:0;width:100%;max-width:560px;z-index:41;
  /* Round 7 fixes: the card opens and closes with the same 150ms crossfade the tabs use --
     a fade with a short rise, not a slide from the foot. A drag still moves it by hand. */
  transform:translate(-50%,14px);opacity:0;
  transition:opacity .15s ease-out,transform .15s ease-out;
  background:var(--paper);border:1px solid var(--line);border-bottom:0;
  /* Rises to just under the search field, like frame 22s, even when no
     tile is open yet -- the card is the center of gravity, not a drawer. */
  border-radius:16px 16px 0 0;min-height:70dvh;max-height:92dvh;overflow-y:auto;overscroll-behavior:contain;
  box-shadow:0 -18px 44px rgba(25,25,27,.18);-webkit-overflow-scrolling:touch}
.panel.on{transform:translate(-50%,0);opacity:1}
.panel[hidden]{display:none}
body.sheet-open main.wrap{overflow:hidden}   /* the list holds still behind the card; the document never scrolled anyway */
.page-card{overflow:hidden}
.page-card .phead{border-radius:var(--r) var(--r) 0 0}
.page-card .grab{display:none}

.phead{position:sticky;top:0;z-index:2;background:var(--paper);border-bottom:1px solid var(--line);
  padding:14px 16px 13px}
.grab{width:32px;height:3px;border-radius:2px;background:var(--line);margin:0 auto 12px}
.pname{font-size:19px;font-weight:700;letter-spacing:-.03em;line-height:1.15;padding-right:74px}
.pmeta{margin-top:5px;display:flex;flex-wrap:wrap;gap:2px 8px;font-size:12.5px;color:var(--grey-d)}
.pmeta a{color:inherit}
.pmeta b{font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.pmeta span{flex-basis:100%;color:var(--grey)}
.pmeta .nozip{display:flex;align-items:center;gap:6px;font-size:11.5px}
.pmeta .nozip i{font-style:normal}
.pclose,.pedit{position:absolute;top:27px;width:28px;height:28px;border-radius:7px;
  border:1px solid var(--line);background:var(--white);display:grid;place-items:center;color:var(--grey-d)}
.pclose{right:14px}.pedit{right:48px}
.page-card .pclose,.page-card .pedit{top:13px}
.pbody{padding:12px 16px 24px}

/* ── the seven tiles, 4 + 3, icon over label ───────────────────────── */
.pbody .acts{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:6px}
.pbody .acts.b{grid-template-columns:repeat(3,1fr);margin-bottom:14px}
.pbody .act{display:grid;justify-items:center;gap:6px;padding:11px 4px 9px;text-align:center;
  border-radius:var(--r-ctl);border:1px solid var(--line);background:var(--white);cursor:pointer;
  color:inherit;transition:background .12s,border-color .12s,transform .12s;-webkit-user-select:none;user-select:none}
.pbody .act span{font-size:11.5px;font-weight:600;letter-spacing:-.01em}
.pbody .act svg{color:var(--grey-d)}
/* press feedback below handles the dip */
.pbody .act.on{background:var(--ink);border-color:var(--ink);color:var(--white);animation:settle .36s cubic-bezier(.22,1.12,.36,1)}
@keyframes settle{0%{transform:scale(.96)}60%{transform:scale(1.02)}100%{transform:none}}
.pbody .act.on svg{color:var(--white)}
.pbody .act[disabled]{opacity:.36;cursor:default}

/* Panels: all shown without JS (the pre-port page), one at a time with it. */
.mode{padding:13px 14px;margin-bottom:8px}
html.js .mode{display:none}
html.js .mode.open{display:block;animation:panelIn .26s cubic-bezier(.32,.72,0,1)}
@keyframes panelIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.mode h4{font-size:13.5px;font-weight:600;letter-spacing:-.015em}
.mode .sub{font-size:12.5px;color:var(--grey);margin-top:2px;margin-bottom:4px}
.opt{display:flex;align-items:center;gap:10px;padding:10px 0 8px;border-top:1px solid var(--line-soft)}
.opt.first{border-top:0}
.opt .t{flex:1;min-width:0}
.opt .t b{display:block;font-size:13.5px;font-weight:600;letter-spacing:-.015em}
.opt .t span{font-size:12px;color:var(--grey);line-height:1.35;display:block}
.send{flex:0 0 auto;height:28px;padding:0 12px;border:0;border-radius:6px;background:var(--ink);color:var(--white);
  font-size:12.5px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;letter-spacing:-.01em;
  transition:background .2s,transform .12s}

.send.busy{opacity:.6}
.prev{background:var(--sunken);border:1px solid var(--line);border-radius:8px;padding:10px 12px;
  font-size:13px;line-height:1.5;color:var(--grey-d);white-space:pre-wrap;word-break:break-word;
  max-height:210px;overflow-y:auto;margin-bottom:2px}
.prev.tall{max-height:320px}
.fld{width:100%;height:44px;padding:0 12px;border:1px solid var(--line);border-radius:9px;
  background:var(--white);font-size:16px;outline:none;margin:6px 0 8px;-webkit-appearance:none;appearance:none}
.fld:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(56,202,95,.16)}
textarea.fld{height:auto;min-height:74px;padding:9px 12px;resize:vertical;line-height:1.5}
.check{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--grey-d);margin-bottom:8px}
.two{display:flex;gap:8px}
.two>*{flex:1}
.wide{display:flex;align-items:center;justify-content:center;width:100%;min-height:40px;
  border:1px solid var(--line);border-radius:var(--r-ctl);background:var(--white);
  font-size:14px;font-weight:600;letter-spacing:-.012em;cursor:pointer;margin-top:6px;padding:8px 12px;color:inherit}
.wide.dark{background:var(--ink);border-color:var(--ink);color:var(--white)}
form.busy{pointer-events:none}form.busy .fld,form.busy .krow,form.busy .check,form.busy .sub{opacity:.6}   /* the button itself is the loader now */
.lab{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--grey);margin:18px 0 8px}

/* ── reached ───────────────────────────────────────────────────────── */
.reached{position:relative;overflow:hidden;display:flex;align-items:center;gap:10px;margin-top:6px;
  padding:12px 14px;border-radius:var(--r-ctl);background:#EDF7F0;border:1px solid #CFE7D8}
.reached.stale{background:#FDF4E7;border-color:#F0DFC2}
.reached .tick{width:22px;height:22px;border-radius:50%;background:var(--green);color:#fff;
  display:grid;place-items:center;font-size:12px;font-weight:800;flex:0 0 auto}
.reached.stale .tick{background:var(--amber)}
.reached .lbl2{flex:1;font-size:14px;font-weight:700;color:#2F7A50}
.reached.stale .lbl2{color:#8A5A17}

/* The green sweep. One pass, under 400ms, then gone. */
.sweep{position:relative;overflow:hidden}
.sweep::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 30%,rgba(56,202,95,.45) 50%,transparent 70%);
  transform:translateX(-100%);animation:sweep .4s cubic-bezier(.32,.72,0,1) forwards}
@keyframes sweep{to{transform:translateX(100%)}}

/* ── the ask: one question, two answers ────────────────────────────── */
.ask{position:fixed;left:50%;bottom:calc(76px + env(safe-area-inset-bottom));z-index:60;
  width:min(92vw,420px);transform:translate(-50%,24px);opacity:0;border-radius:18px!important;
  transition:transform .42s cubic-bezier(.22,1.12,.36,1),opacity .2s;
  background:var(--white);border:1px solid var(--line);border-radius:14px;padding:16px 16px 14px;
  box-shadow:0 14px 40px rgba(25,25,27,.2)}
.ask.on{transform:translate(-50%,0);opacity:1}
.ask[hidden]{display:none}
.askq{font-size:17px;font-weight:800;letter-spacing:-.03em;margin-bottom:10px}
.askcard{margin-bottom:14px;padding:16px}
.askcard .two{margin-top:2px}

/* ── the toast: dismisses on the animation timeline, never a timer ──── */
.toast{position:fixed;left:50%;bottom:calc(78px + env(safe-area-inset-bottom));
  transform:translateX(-50%) translateY(70px);pointer-events:none;opacity:0;
  background:var(--ink);color:#fff;padding:10px 16px;border-radius:9px;font-size:14px;font-weight:600;z-index:99;
  box-shadow:0 8px 24px rgba(25,25,27,.24);max-width:88vw}
.toast.up{animation:toastLife 2.8s cubic-bezier(.32,.72,0,1) forwards}
@keyframes toastLife{
  0%{opacity:0;transform:translateX(-50%) translateY(70px)}
  10%{opacity:1;transform:translateX(-50%) translateY(0)}
  76%{opacity:1;transform:translateX(-50%) translateY(0)}
  100%{opacity:0;transform:translateX(-50%) translateY(70px)}}

/* @critical */
/* ── skeleton while the card loads ─────────────────────────────────── */
.sk{background:linear-gradient(90deg,var(--sunken) 25%,#e6e6e6 37%,var(--sunken) 63%);
  background-size:400% 100%;animation:shimmer 1.2s ease-in-out infinite;border-radius:8px}
.sk-title{height:24px;width:55%;margin-top:4px}
.sk-line{height:13px;margin-top:10px}
.sk-tile{height:66px}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:0 0}}

/* @endcritical */
/* ── the sale card (scene 5) ───────────────────────────────────────── */
.salecard{display:flex;gap:12px;overflow:hidden;padding:0}
.salecard .rail{width:3px}
.salecard>div:last-child{padding:13px 14px 12px}
.saddr{font-size:15.5px;font-weight:700;letter-spacing:-.022em}
.smeta{font-size:12.5px;color:var(--grey);margin-top:3px;display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.pill{display:inline-flex;align-items:center;height:18px;padding:0 7px;border-radius:5px;
  background:var(--sunken);border:1px solid var(--line);font-size:10.5px;font-weight:700;color:var(--grey-d);margin-right:4px}
.pill.dark{background:var(--ink);border-color:var(--ink);color:#fff}
.pill.g{background:#EDF7F0;border-color:#CFE7D8;color:#2F7A50}
.pill.a{background:#FDF4E7;border-color:#F0DFC2;color:#9A6417}
.row .send{height:26px;padding:0 11px;font-size:12px;transition:background .32s cubic-bezier(.22,1.12,.36,1),transform .32s}
.send.sent{background:var(--green);color:#fff;pointer-events:none}

@media (prefers-reduced-motion:reduce){
  .panel,.scrim,.ask{transition:none}
  .refilter .row,.mode.open,.act.on,.chip.on{animation:none}
  .sk{animation:none}
  .toast.up{animation:toastFade 2.8s linear forwards}
  @keyframes toastFade{0%,76%{opacity:1;transform:translateX(-50%)}100%{opacity:0;transform:translateX(-50%)}}
}


/* ── Setup: the demo's nine sections ───────────────────────────────── */
.setup .sec{padding:13px 14px;margin-bottom:8px}
.setup h4{font-size:13.5px;font-weight:600;letter-spacing:-.015em}
.setup .sub{font-size:12.5px;color:var(--grey);margin-top:2px}
.setup .sec .wide{margin-top:8px}
.setup .sec .fld:first-of-type{margin-top:10px}
.setup .fld{margin:0 0 8px}
.setup .wide.tone{display:block;text-align:left;padding:10px 13px}
.setup .wide.tone b{display:block;font-weight:600;font-size:14px}
.setup .wide.tone span{display:block;font-size:12.5px;color:var(--grey);margin-top:1px}
.setup .wide.tone.dark span{color:rgba(255,255,255,.7)}
.setup .wide.danger{color:#B4462F;border-color:rgba(180,70,47,.35)}
.setup .wide.danger.dark{background:#B4462F;border-color:#B4462F;color:#fff}
.setup .more{margin-top:4px}
.setup .more summary{font-size:13px;font-weight:600;cursor:pointer;padding:8px 0;list-style:none;display:flex;justify-content:space-between}
.setup .more summary::after{content:"+";color:var(--grey);font-weight:500}
.setup .more[open] summary::after{content:"–"}
.setup .more summary::-webkit-details-marker{display:none}
.fldlab{display:block;font-size:12.5px;color:var(--grey-d);margin:6px 0 0}
.fldlab .muted{font-weight:400}
.fldlab .fld{margin-top:4px}
.setup .chips{margin:0;padding:0}
.setup .chips .chip{cursor:pointer}
.note{background:var(--white);border:1px solid var(--line);border-left:2px solid var(--ink);
  border-radius:8px;padding:11px 13px;font-size:13px;color:var(--grey-d);margin:0 0 8px;line-height:1.45}
.note b{color:var(--ink);font-weight:600}
.note.warn{border-left-color:var(--amber)}
.drop.small{display:block;padding:16px 14px;text-align:center;border:1px dashed var(--line);border-radius:var(--r-ctl);
  background:var(--white);cursor:pointer;transition:border-color .15s,background .15s}
@media (hover:hover){.drop.small:hover{border-color:var(--green);background:#EDF7F0}}
.drop.small b{display:block;font-size:13.5px;font-weight:600}
.drop.small span{display:block;font-size:12.5px;color:var(--grey);margin-top:2px}
label.wide{cursor:pointer}


/* ── the digest, and its badge on Today ───────────────────────────── */
.digest-head{font-size:22px;font-weight:800;letter-spacing:-.035em;line-height:1.15;margin-top:2px}
.badgecard{display:flex;align-items:center;gap:12px;padding:0 14px 0 0;margin-bottom:12px;overflow:hidden;
  animation:badgeIn .5s cubic-bezier(.22,1.12,.36,1) both}
.badgecard .rail{width:3px;align-self:stretch}
.badgecard .bmain{flex:1;min-width:0;padding:12px 0 12px 12px}
.badgecard .bhead{font-size:14.5px;font-weight:700;letter-spacing:-.02em}
.badgecard .bsub{font-size:12.5px;color:var(--grey);margin-top:1px}
@keyframes badgeIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.badgecard{animation:none}}


/* ── the reached moment: the Receipt (docs/09 round 2, job 3, C) ─────── */
.rc-scrim{position:fixed;inset:0;z-index:120;background:rgba(25,25,27,0);pointer-events:none}
.rc-scrim.go{animation:rcScrim .9s var(--spring,cubic-bezier(.22,1.12,.36,1)) both}
@keyframes rcScrim{0%{background:rgba(25,25,27,0)}25%{background:rgba(25,25,27,.28)}72%{background:rgba(25,25,27,.28)}100%{background:rgba(25,25,27,0)}}
.rc{position:fixed;left:50%;top:50%;z-index:121;width:250px;pointer-events:none;
  transform:translate(-50%,-50%) scale(.3);opacity:0;background:var(--white);border-radius:16px;
  padding:22px 18px 18px;text-align:center;box-shadow:0 24px 60px rgba(25,25,27,.25)}
.rc.go{animation:rc .9s cubic-bezier(.22,1.12,.36,1) both}
@keyframes rc{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.3)}
  25%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  72%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0;transform:translate(calc(-50% + var(--rc-tx,0px)),calc(-50% + var(--rc-ty,0px))) scale(.3)}}
.rc.rc-still{opacity:1;transform:translate(-50%,-50%)}
.rc-tick{width:44px;height:44px;border-radius:50%;background:var(--green);margin:0 auto 12px;display:grid;place-items:center}
.rc-tick svg{width:26px;height:26px;stroke:#fff;stroke-width:4.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.rc-tick svg path{stroke-dasharray:100;stroke-dashoffset:100}
.rc.go .rc-tick svg path{animation:rcDraw .3s .3s ease-out forwards}
.rc-still .rc-tick svg path{stroke-dashoffset:0}
@keyframes rcDraw{to{stroke-dashoffset:0}}
.rc-name{font-size:17px;font-weight:700;letter-spacing:-.025em}
.rc-state{font-size:13px;color:#2F7A50;font-weight:600;margin-top:2px}
.rc-line{font-size:13px;color:var(--grey-d);margin-top:10px}
/* the row the card lands in */
.rc-land{animation:rcLand .4s cubic-bezier(.22,1.12,.36,1)}
@keyframes rcLand{30%{transform:scale(1.015);background:#EDF7F0}100%{transform:none}}
@media (prefers-reduced-motion:reduce){.rc-scrim.go,.rc.go,.rc-land{animation:none}.rc.go{opacity:1;transform:translate(-50%,-50%)}}


/* ── job 4, applied: nothing on screen is ever still ────────────────── */
/* 1. the green mark breathes while anything loads */
@keyframes breathe{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.94)}}
.brand .nm .ap{display:inline-block;transform-origin:center}
body.loading .brand .nm .ap{animation:breathe 1.6s ease-in-out infinite}
/* empty states carry a breathing green dot: quiet, not dead */
.empty::before,.card.pad.muted::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;
  background:var(--green);margin-right:9px;vertical-align:1px;animation:breathe 1.6s ease-in-out infinite}
/* skeleton rows shimmer AND arrive */
.sk{animation:shimmer 1.2s ease-in-out infinite}
main>.list .row.still{animation:rowIn .38s cubic-bezier(.22,1.12,.36,1) both}
@media (prefers-reduced-motion:reduce){
  body.loading .brand .nm .ap,.empty::before,.card.pad.muted::before,main>.list .row.still{animation:none}
}


/* ── press feedback (docs/09 round 3): every tap has a small jump ────── */
/*
  Press: scale to .96 over 80ms. Release: spring back with a small overshoot,
  220ms. :active for browsers that fire it; .pressed/.unpress from touch and
  mouse handlers for iOS Safari, which fires :active only with a touch
  listener on the element itself.
*/
button,.btn,.wide,.act,.chip,.tab,.send,.row,.tile,.badgecard,.salecard,summary{
  transition:transform 80ms ease-out;transform-origin:center}
button:active,.btn:active,.wide:active,.act:active,.chip:active,.tab:active,.send:active,.row:active,
.tile:active,.badgecard:active,.salecard:active,summary:active,.pressed{transform:scale(.96)}
.tab.pressed,.tab:active{transform:scale(.92)}
.unpress{animation:unpress 220ms cubic-bezier(.22,1.12,.36,1)}
@keyframes unpress{0%{transform:scale(.96)}55%{transform:scale(1.02)}100%{transform:scale(1)}}
button[disabled]:active,.act[disabled]:active,.pressed[disabled]{transform:none}
/* the dip must not fight the row's own arrival or the Receipt landing */
.refilter .row.pressed{animation:none}
.hour{height:44px;padding:0 24px 0 10px;margin-left:6px;border:0;border-left:1px solid rgba(255,255,255,.28);border-radius:0;align-self:stretch;
  background:transparent;color:inherit;font:inherit;font-size:12.5px;appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='%23ffffff' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 5px center}
.chip:not(.on) .hour{border-color:var(--line);color:var(--grey-d);
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='%238A8A8C' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E")}
.alertmode .chip{min-height:44px}
.alertmode .chip:has(select){padding-right:0;overflow:hidden}   /* only the Daily chip carries the hour picker */
@media (prefers-reduced-motion:reduce){.unpress{animation:none}button,.btn,.wide,.act,.chip,.tab,.send,.row,.tile,.badgecard,.salecard,summary{transition:none}}


/* ══ Widget character: B, the Switch (docs/09 round 3, job 4) ════════════
   Everything tactile. The Sold pill flips on; Text is a key that depresses
   and clicks green; a row's rail lights like an LED under the thumb; the
   tone control is a segmented switch whose knob slides; the tab bar has an
   indicator that slides to the tab you tapped. Hims' tiles.               */

/* the Sold pill flips on when the card arrives */
.salecard .pill.dark{transform-origin:center;animation:pillFlip .5s .3s cubic-bezier(.22,1.12,.36,1) both}
@keyframes pillFlip{0%{transform:rotateX(90deg);background:var(--never);border-color:var(--never)}100%{transform:none}}

/* "Text all N": a physical switch on the sale card */
.saleswitch{display:flex;align-items:center;position:relative;height:38px;border-radius:19px;box-sizing:border-box;
  background:var(--sunken);border:1px solid var(--line);padding:3px;cursor:pointer;-webkit-user-select:none;user-select:none;
  transition:background .3s,border-color .3s}
.saleswitch .knob{width:30px;height:30px;border-radius:50%;background:var(--white);box-shadow:0 2px 6px rgba(25,25,27,.2);
  transition:transform .34s cubic-bezier(.22,1.12,.36,1),background .3s;position:relative;z-index:1}
.saleswitch .swl{position:absolute;left:0;right:0;text-align:center;font-size:13px;font-weight:600;color:var(--grey-d);pointer-events:none;transition:color .3s}
.saleswitch.on{background:#EDF7F0;border-color:#CFE7D8}
.saleswitch.on .knob{transform:translateX(var(--sw-travel,280px));background:var(--green)}
.saleswitch.on .swl{color:#2F7A50}
.salecard .saleswitch{margin:12px 0 1px}

/* Text buttons are keys */
.send{box-shadow:0 2px 0 rgba(0,0,0,.85);transition:transform .08s,box-shadow .08s,background .22s,color .22s}
.send.pressed,.send:active{transform:translateY(2px)!important;box-shadow:0 0 0 rgba(0,0,0,.85)}
.send.sent{box-shadow:0 2px 0 #2F7A50}
.send.next{animation:keyNudge 1.6s ease-in-out infinite}
@keyframes keyNudge{50%{transform:translateY(-1px);box-shadow:0 3px 0 rgba(0,0,0,.85)}}

/* a row's rail lights like an LED under the thumb */
.row .rail{transition:background .12s,box-shadow .12s}
.row.pressed .rail,.row:active .rail{background:var(--green);box-shadow:0 0 10px rgba(56,202,95,.7)}

/* the tone control: a segmented switch */
.toneswitch{position:relative;display:grid;grid-template-columns:repeat(3,1fr);height:40px;border-radius:12px;
  background:var(--sunken);border:1px solid var(--line);padding:3px;margin-top:10px}
.toneswitch .knob{position:absolute;top:3px;bottom:3px;left:3px;width:calc((100% - 6px)/3);border-radius:9px;background:var(--ink);
  transition:transform .34s cubic-bezier(.22,1.12,.36,1);z-index:0}
.toneswitch button{position:relative;z-index:1;background:none;border:0;font:inherit;font-size:13px;font-weight:600;color:var(--grey-d);
  cursor:pointer;border-radius:9px;transition:color .2s}
.toneswitch button.on{color:var(--white)}
.tonehint{font-size:12.5px;color:var(--grey);margin-top:8px;min-height:18px;transition:opacity .15s}
.tonehint b{color:var(--ink);font-weight:600}

/* the tab bar's indicator slides to the tab you tapped */
.tabs .ind{position:absolute;top:8px;left:0;width:40px;height:40px;border-radius:50%;background:var(--sheet);z-index:0;
  transform:translateX(var(--ind-x,0px));transition:transform var(--dur-base) var(--spring)}
.tabs .ind.noanim{transition:none}
.tabs:not(:has(a.tab.on)) .ind{visibility:hidden}   /* a page under no tab: no circle without its icon */
.tab.on i{}

@media (prefers-reduced-motion:reduce){
  .salecard .pill.dark,.send.next{animation:none}
  .saleswitch .knob,.toneswitch .knob,.tabs .ind{transition:none}
}


/* @critical */
/* ══ Launch, lock, sign-in (docs/09 round 4) ══════════════════════════════ */
/* the wordmark, floating in the way the hero's words do, with a green bloom */
.wm{position:relative;display:inline-flex;align-items:baseline;font-size:44px;font-weight:800;letter-spacing:-.05em;line-height:1;color:var(--ink)}
.wm .wm-w{display:inline-block;opacity:0;transform:translateY(28px) rotate(1.5deg);animation:wordIn .9s cubic-bezier(.16,1,.3,1) forwards}
.wm .ap{color:var(--green);position:relative}
.wm .wm-glow{position:absolute;left:58%;top:50%;width:190px;height:190px;transform:translate(-50%,-50%) scale(.6);border-radius:50%;
  background:radial-gradient(circle,rgba(56,202,95,.42) 0%,rgba(56,202,95,.18) 35%,transparent 70%);filter:blur(6px);opacity:0;
  animation:bloom 1.4s .25s cubic-bezier(.16,1,.3,1) forwards;pointer-events:none}
@keyframes wordIn{to{opacity:1;transform:none}}
@keyframes bloom{60%{opacity:1;transform:translate(-50%,-50%) scale(1.05)}100%{opacity:.85;transform:translate(-50%,-50%) scale(1)}}
.wm.float .wm-w{animation:wordIn .9s cubic-bezier(.16,1,.3,1) forwards,floaty 4s 1s ease-in-out infinite}
@keyframes floaty{50%{transform:translateY(-3px)}}

/* the launch screen (motion-restyle step 5): the stage, the wordmark and the
   tagline fade in centred (300ms --ease-out), hold, fade out (200ms), hold.
   Opaque in the HTML, so a cold open never shows a white flash. */
.launch{position:fixed;inset:0;z-index:500;background:var(--stage);display:grid;place-items:center;padding:0 32px}
.launch .lc{text-align:center;opacity:0}
.launch .wm{font-size:44px;color:var(--white)}
.launch .wm .wm-w{opacity:1;transform:none;animation:none}
.launch .tag{margin:14px auto 0;max-width:30ch;font-size:14px;line-height:1.45;color:var(--paper);opacity:.7}
.launch.play .lc{animation:launchIn 300ms var(--ease-out) both}
.launch.out .lc{animation:launchOut 200ms var(--ease-in) forwards}
@keyframes launchIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes launchOut{to{opacity:0}}
/* beneath it, the page holds still until the launch is over */
body.launching .tsheet,body.launching .today-shell .t-in,body.launching .today-shell .t-num,body.launching .today-shell .t-card,body.launching .today-shell .t-sheet,body.launching .today-shell .t-row,body.launching nav.tabs,
.signin.launching .sheet,.signin.launching .stagehead .wm,.signin.launching .stagehead .sub,.signin.launching .authform .c{animation-play-state:paused}
html.warm .launch{display:none}
/* the lock screen (Face ID on a cold open) is the same moment, on the stage */
.lockbody{background:var(--stage)}
.lockbody .wm{color:var(--white)}
.lockstate,.lockalt{color:var(--paper);opacity:.75}

/* the lock screen and the sign-in page share one shape */
.lockbody,.authbody{background:var(--paper);min-height:100dvh;display:grid;place-items:center;padding:0 20px}
/* The account pages (sign-up, reset, the plans guide while an account owes, a founding link) are
   an ordinary scrolling page: the shell's document never scrolls, but a form taller than the
   window must reach its button (4 October 2026). Sign-in keeps its own fixed stage. */
html.authdoc{height:auto;overflow:auto}
.authbody:not(.signin){height:auto;overflow:visible}
.lockmain,.authmain{width:100%;max-width:360px;display:grid;justify-items:center;gap:26px;padding:40px 0 60px}
.lockrow{width:100%;display:grid;gap:10px;justify-items:center;min-height:120px}
.lockstate{font-size:14px;color:var(--grey-d);min-height:20px}
.lockalt,.authalt{font-size:13px;color:var(--grey);text-decoration:none;padding:6px}
.authform{width:100%;display:grid;gap:10px;justify-items:center}
.authform .fld{margin:0;height:48px;border-radius:14px;font-size:16px;padding:0 16px;text-align:center}
.authform .wide{margin:4px 0 0;height:50px;border-radius:14px;font-size:15.5px}
.wide.green{background:var(--green);border-color:var(--green);color:#0C2A16;font-weight:700}
.autherr{font-size:14px;color:#B4462F;text-align:center;margin:-10px 0 0}
.faceid{min-width:220px}

/* ══ Sign-in (motion-restyle step 4): the stage, the scooped sheet, the cascade ══ */
.authbody.signin{background:var(--stage);display:block;padding:0;min-height:100dvh;overflow:hidden;position:relative}
.signin .authmain{display:block;max-width:none;padding:0;position:absolute;inset:0}
.signin .stagehead{position:absolute;left:20px;right:20px;top:calc(52px + env(safe-area-inset-top));z-index:2;color:var(--white)}
.signin .stagehead .wm{font-size:26px;color:var(--white)}
.signin .stagehead .wm .wm-w{opacity:1;transform:none;animation:none}
.signin .stagehead .sub{font-size:13px;color:var(--paper);opacity:.75;margin-top:6px}
.signin .stagehead .sub.demo{color:var(--green);opacity:1}
.signin .stagehead .wm,.signin .stagehead .sub{animation:tIn 300ms var(--ease-out) 380ms both}
.signin .stagehead .sub{animation-delay:480ms}
.signin .sheet{position:absolute;inset:0;animation:sheetUp 600ms var(--ease-out-expo) both}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:none}}
.signin .sheet .edge{position:absolute;left:0;right:0;top:0;height:31.2%;background:var(--sheet)}
.signin .sheet .edge .scoop{display:block;width:100%;height:100%}
.signin .sheet .body{position:absolute;left:0;right:0;top:31%;bottom:0;background:var(--sheet)}
.signin .authform{position:absolute;left:20px;right:20px;width:auto;top:36%;bottom:0;overflow-x:hidden;overflow-y:auto;display:block;gap:0;padding-bottom:24px}   /* width:auto: .authform's 100% plus the 20px left ran it off the right edge (5 October 2026) */
.signin .authform .c{animation:tIn 280ms var(--ease-out) calc(740ms + var(--i,0) * 60ms) both}
.signin .authform h1{font-size:26px;font-weight:800;letter-spacing:-.035em;margin:0 0 18px;color:var(--ink)}
.signin .authform .flab{display:block;font-size:12px;font-weight:600;color:var(--grey-d);margin:0 0 6px 2px}
.signin .authform .fld{margin:0 0 14px;text-align:left;width:100%}
.signin .authform .fld.shake{animation:shake 240ms ease-in-out 2}
@keyframes shake{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
.signin .authform .autherr{margin:-8px 0 12px 2px;text-align:left;font-size:13px}
.signin .authform .helper{display:block;text-align:right;margin:-4px 0 16px;padding:0}
.signin .authform .btnwrap{height:50px;display:grid;place-items:center;margin-bottom:16px}
.signin .authform .wide{margin:0;position:relative;overflow:hidden;width:100%;height:50px;border-radius:14px;
  transition:width 250ms ease-in-out,height 250ms ease-in-out,border-radius 250ms ease-in-out}
.signin .authform .wide .lbl{transition:opacity 120ms}
.signin .authform .wide.loading{width:64px;height:40px;border-radius:20px}
.signin .authform .wide.loading .lbl{opacity:0}
/* the two-dot loader: two 8px dots trading places every 320ms, the active one at 1.4x */
.signin .dots{position:absolute;inset:0;display:grid;place-items:center;opacity:0;pointer-events:none;transition:opacity 120ms 120ms}
.signin .wide.loading .dots{opacity:1}
.signin .dots i{position:absolute;width:8px;height:8px;border-radius:50%;background:#0C2A16;left:50%;top:50%;margin:-4px 0 0 -4px}
.signin .dots i:nth-child(1){animation:dotA 640ms cubic-bezier(.45,0,.55,1) infinite}
.signin .dots i:nth-child(2){animation:dotB 640ms cubic-bezier(.45,0,.55,1) infinite}
@keyframes dotA{0%{transform:translateX(-11px) scale(1.4)}50%{transform:translateX(11px) scale(1)}100%{transform:translateX(-11px) scale(1.4)}}
@keyframes dotB{0%{transform:translateX(11px) scale(1)}50%{transform:translateX(-11px) scale(1.4)}100%{transform:translateX(11px) scale(1)}}
.signin .or{display:flex;align-items:center;gap:12px;font-size:12px;color:var(--grey);margin-bottom:16px}
.signin .or::before,.signin .or::after{content:"";flex:1;height:1px;background:var(--line)}
.signin .alts{display:flex;justify-content:center;gap:16px;margin-bottom:22px}
.signin .round{width:48px;height:48px;border-radius:50%;background:var(--white);border:1px solid var(--line);display:grid;place-items:center;color:var(--ink);cursor:pointer;padding:0}
.signin .round svg{width:22px;height:22px}
.signin .foot{text-align:center;font-size:13px;color:var(--grey)}
.signin .foot a{color:var(--ink);font-weight:700;text-decoration:none}
/* the curtain: the stage's curved edge sweeps down over the screen, 380ms --ease-in */
@keyframes sheetDown{from{transform:none}to{transform:translateY(100%)}}
/* inside the shell (step 6): the same sweep over a pushed page. The block
   is the stage with the scoop as its bottom edge, parked above the screen. */
.curtain{position:fixed;left:0;right:0;top:0;height:131vh;z-index:400;transform:translateY(-131vh);pointer-events:none;
  transition:transform 380ms var(--ease-in)}
.curtain .solid{position:absolute;left:0;right:0;top:0;bottom:31vh;background:var(--stage)}
.curtain .edge{position:absolute;left:0;right:0;bottom:0;height:31vh}
.curtain .edge .scoop{display:block;width:100%;height:100%}
.curtain .edge .scoop path{fill:var(--stage)}
.curtain.down{transform:none}   /* parked above (-131vh), it lands with its solid part over the whole screen and the scoop below it */
body.curtained .tsheet{animation-play-state:paused}
/* the pill loader on any primary button that makes a request (step 6) */
.pill-ready{transition:width 250ms ease-in-out,height 250ms ease-in-out,border-radius 250ms ease-in-out,transform 80ms ease-out;position:relative;overflow:hidden}
.pill-ready .lbl{transition:opacity 120ms}
.pill-ready.loading{width:64px!important;height:40px!important;min-height:0;border-radius:20px!important;padding:0!important;margin-left:auto!important;margin-right:auto!important}
.pill-ready.loading .lbl{opacity:0}
.pill-ready .dots{position:absolute;inset:0;display:grid;place-items:center;opacity:0;pointer-events:none;transition:opacity 120ms 120ms}
.pill-ready.loading .dots{opacity:1}
.pill-ready .dots i{position:absolute;width:8px;height:8px;border-radius:50%;background:currentColor;left:50%;top:50%;margin:-4px 0 0 -4px}
.pill-ready .dots i:nth-child(1){animation:dotA 640ms cubic-bezier(.45,0,.55,1) infinite}
.pill-ready .dots i:nth-child(2){animation:dotB 640ms cubic-bezier(.45,0,.55,1) infinite}
@media (prefers-reduced-motion:reduce){.curtain{transition:none}.pill-ready{transition:none}.pill-ready .dots i{animation:none}}
@keyframes fadeOut{to{opacity:0}}
.signin.curtain .sheet{animation:sheetDown 380ms var(--ease-in) forwards}
.signin.curtain .stagehead .wm,.signin.curtain .stagehead .sub{animation:fadeOut 300ms var(--ease-in) forwards}
@media (prefers-reduced-motion:reduce){
  .signin .stagehead .wm,.signin .stagehead .sub,.signin .sheet,.signin .authform .c,.signin .authform .fld.shake{animation:none}
  .signin .authform .wide{transition:none}
  .signin.curtain .sheet{animation-duration:1ms}
}

/* @endcritical */
/* the Face ID offer, once */
.offer{position:fixed;left:50%;bottom:calc(76px + env(safe-area-inset-bottom));z-index:59;width:min(92vw,420px);transform:translate(-50%,24px);opacity:0;
  transition:transform .42s cubic-bezier(.22,1.12,.36,1),opacity .2s;background:var(--white);border:1px solid var(--line);border-radius:18px;padding:16px 16px 14px;box-shadow:0 14px 40px rgba(25,25,27,.2)}
.offer.on{transform:translate(-50%,0);opacity:1}
.offer-t{font-size:17px;font-weight:800;letter-spacing:-.03em}.offer-s{font-size:13px;color:var(--grey);margin:3px 0 10px}

@media (prefers-reduced-motion:reduce){
  .wm .wm-w,.launch .wm-w,.wm.float .wm-w{animation:none;opacity:1;transform:none}
  .wm .wm-glow{animation:none;opacity:.85;transform:translate(-50%,-50%)}
  .launch .lc,.launch.play .lc,.launch.out .lc{animation:none;opacity:1}
}

/* the demo copy says so */
.demo-banner{margin-top:14px;background:var(--ink);color:#fff;border-radius:12px;padding:10px 14px;font-size:13px;line-height:1.4}
.demo-banner b{color:#F5C451;font-weight:700;margin-right:6px}

/* the CRMLS member id's status line */
.crmls-state{font-size:12.5px;color:var(--grey);margin:-2px 0 8px;display:flex;align-items:center;gap:6px}
.crmls-state::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--never)}
.crmls-state.on{color:#2F7A50}.crmls-state.on::before{background:var(--green)}

/* CRMLS: the disclaimer under feed data, and the Listed-by line on on-market events.
   Small and muted; never truncated, never hidden. docs/11 §5. */
/* round 7, item 10: the disclaimer reads as the fine print it is -- 10px, a lighter grey, tighter
   leading -- and keeps every word (CRMLS): it wraps, and is never clipped or truncated. */
.attribution{font-size:10px;line-height:1.4;color:#9A9A9C;margin:12px 2px 0;white-space:normal;overflow:visible;text-overflow:clip;letter-spacing:0}
.listedby{white-space:normal;overflow:visible;text-overflow:clip;font-size:12px;margin-top:2px}

/* ── round 6 polish (docs/08 round 6, part D items 1–5) ─────────────── */
/*
  1. Every control answers to a 44pt thumb without changing size. The ones
     that are visually smaller -- chips, Text buttons, the sheet's close,
     the disclosure summary, the tone buttons, the wide Setup buttons --
     carry an invisible ::before that extends the hit box to 44pt. Inputs
     grew from 42 to 44 outright; the digest hour picker became a full-
     height control inside its chip. tools/audit_ios.py measures the union.
  5. No long-press callout on anything that is a control, not a document.
*/
.chip,.send,.wide,summary,.toneswitch button,.signout{position:relative}   /* .pclose/.pedit are already positioned (absolute); relative here pulled them into the flow and pushed the name down */
.chip::before,.send::before,.wide::before,summary::before,.toneswitch button::before,.pclose::before,.pedit::before,.signout::before{
  content:"";position:absolute;left:-4px;right:-4px;top:-7px;bottom:-7px}
.send::before{top:-9px;bottom:-9px;left:-6px;right:-6px}
.wide::before{top:-2px;bottom:-2px;left:0;right:0}
summary::before{top:-5px;bottom:-5px;left:0;right:0}
.toneswitch button::before{top:-6px;bottom:-6px;left:0;right:0}
.pclose::before,.pedit::before{top:-8px;bottom:-8px;left:-8px;right:-8px}
.signout{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;margin:0 -10px}
.signout::before{top:0;bottom:0;left:0;right:0}
a,button,.row,.act,.chip,.tab,.send,.tile,.wide,summary,.salecard,.badgecard{-webkit-touch-callout:none}
button,.act,.chip,.tab,.send,.tile,.wide,summary{-webkit-user-select:none;user-select:none}
/* 3. While a field has the keyboard, the tab bar leaves rather than ride up
   over the form. body.typing is set on focusin, cleared on focusout. */
nav.tabs{transition:transform .22s var(--ease-in)}
body.typing nav.tabs{transform:translateY(calc(100% + 24px + env(safe-area-inset-bottom)))}
@media (prefers-reduced-motion:reduce){nav.tabs{transition:none}}

/* ── /market, variant C (docs/09 round 6, part B) ───────────────────── */
/*
  A full-width photo card, 4:3, the app's radius, the primary listing photo
  with a dark gradient over the bottom third. Photos off -- what ships now --
  is the same card on an ink-to-green gradient, identical type and layout,
  so nothing moves the day photos are turned on. A manual sale is always the
  gradient. "Listed by" is the quietest thing on an on-market card; nothing
  on a Sold one. The disclaimer is once, at the foot of the page.
*/
.back{font-size:13px;color:var(--grey-d);margin:0 0 6px}.back a{color:inherit;text-decoration:none}
.h1{margin:0 0 12px}
.segs{display:grid;gap:8px;margin:0 0 4px}
.seg{display:grid;grid-template-columns:repeat(var(--n),1fr);height:44px;border-radius:12px;background:var(--sunken);border:1px solid var(--line);padding:3px;position:relative;-webkit-user-select:none;user-select:none}
.seg .knob{position:absolute;top:3px;bottom:3px;width:calc((100% - 6px)/var(--n));left:3px;transform:translateX(calc(var(--i)*100%));border-radius:9px;background:var(--ink);transition:transform .28s cubic-bezier(.22,1.12,.36,1)}
.seg button{position:relative;z-index:1;background:none;border:0;font:inherit;font-size:13px;font-weight:600;color:var(--grey-d);cursor:pointer;border-radius:9px;transition:color .18s}
.seg button.on{color:#fff}
.seg button::before{content:"";position:absolute;left:0;right:0;top:-4px;bottom:-4px}   /* 44pt hit box inside the 44pt control */
.mday .day{font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--grey);margin:16px 0 10px}
.pc{position:relative;display:block;width:100%;aspect-ratio:4/3;border-radius:18px;overflow:hidden;margin-bottom:14px;background:#2A2A2C;color:#fff;text-decoration:none;
  box-shadow:0 1px 0 rgba(0,0,0,.03),0 10px 24px -14px rgba(0,0,0,.35);
  transition:transform .12s ease-out;transform-origin:center}
.pc:active,.pc.pressed{transform:scale(.98)}
.pc .img{position:absolute;inset:0;background-size:cover;background-position:center}
.pc .img.ink{background:linear-gradient(160deg,#19191B 0%,#1E2A22 55%,#1F4D33 100%)}
.pc .shade{position:absolute;left:0;right:0;bottom:0;height:60%;background:linear-gradient(to top,rgba(0,0,0,.78) 0%,rgba(0,0,0,.45) 45%,rgba(0,0,0,0) 100%)}
.pc .shade::before{content:"";position:absolute;left:0;right:0;top:-66%;height:30%;background:linear-gradient(to bottom,rgba(0,0,0,.42),rgba(0,0,0,0))}
.pc .tl{position:absolute;top:12px;left:14px;right:14px;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.pc .pill{height:22px;padding:0 9px;border-radius:7px;font-size:11px;font-weight:700;display:inline-flex;align-items:center;color:#fff;background:var(--ink);border:0;margin:0;box-shadow:0 1px 0 rgba(0,0,0,.25)}
.pc .pill.listed{background:var(--green);color:#0C2A16}.pc .pill.pending{background:var(--amber);color:#fff}
.pc .pill.cut{background:#D9483F;color:#fff}.pc .pill.back{background:#3B6FD8;color:#fff}.pc .pill.off{background:#6E6E73;color:#fff}   /* round 7 fixes: price cut, back on market, off market */
.pc .pill.pocket{background:var(--paper);color:var(--ink)}   /* 0027: for sale quietly */
.offrow{margin-top:10px;border-top:0!important;min-height:44px;padding:4px 0 0}.offrow .kl{font-weight:500}
.pc .by{font-size:11px;color:rgba(255,255,255,.7);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;text-shadow:0 1px 2px rgba(0,0,0,.4)}
.pc .bl{position:absolute;left:14px;right:14px;bottom:12px;display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.pc .txt{min-width:0}
.pc .price{font-size:26px;font-weight:800;letter-spacing:-.035em;line-height:1;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.4)}
/* The address is the largest thing on the card after the price: it wraps to two lines
   rather than truncating ("24950 Aldermo…" read as broken), then clips. */
.pc .addr{font-size:15px;font-weight:600;letter-spacing:-.015em;margin-top:5px;line-height:1.2;text-shadow:0 1px 3px rgba(0,0,0,.4);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* The price and the address run the full width of the card; only the two small
   lines under them leave room for the nearby chip, which sits in the corner. */
.pc .bl{display:block}                      /* stays absolutely placed at the card's foot (rule above); block, not flex */
.pc .txt{padding-right:0}
.pc .facts,.pc .hood{padding-right:206px}
.pc .near{position:absolute;right:0;bottom:0}
.pc .facts{font-size:12px;color:rgba(255,255,255,.82);margin-top:3px;text-shadow:0 1px 2px rgba(0,0,0,.4)}
.pc .hood{font-size:11px;color:rgba(255,255,255,.62);margin-top:3px}
.pc .near{flex:0 0 auto;height:26px;padding:0 10px;border-radius:13px;background:var(--green);color:#0C2A16;font-size:12px;font-weight:700;display:inline-flex;align-items:center;gap:6px;font-variant-numeric:tabular-nums;white-space:nowrap}
.pc .near i{width:6px;height:6px;border-radius:50%;background:#0C2A16;opacity:.75}
.pc.hero{margin-bottom:12px;cursor:default}
.pc.hero:active,.pc.hero.pressed{transform:none;box-shadow:0 1px 0 rgba(0,0,0,.03),0 10px 24px -14px rgba(0,0,0,.35)}
.salecard-actions{padding:12px 14px}
.seeall{position:relative;font-size:12.5px;font-weight:600;color:var(--ink);text-decoration:none;letter-spacing:0;text-transform:none}
.seeall::before{content:"";position:absolute;left:-6px;right:-6px;top:-13px;bottom:-13px}   /* 44pt hit box, same drawn size */
.seeall.under{display:inline-block;margin:-6px 0 14px 2px;font-size:12.5px}
.market-empty{padding-top:56px}
/* the /market skeleton: card-shaped shimmer while the page arrives */
.sk-card{aspect-ratio:4/3;border-radius:18px;margin-bottom:14px}
/* the empty-state glyph: a small green pin instead of a dot (round 6) */
.empty::before,.card.pad.muted::before{width:12px;height:14px;border-radius:0;vertical-align:-2px;background:var(--green);
  -webkit-mask:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 14'%3E%3Cpath d='M6 0a5 5 0 0 0-5 5c0 3.6 5 9 5 9s5-5.4 5-9a5 5 0 0 0-5-5zm0 7.2A2.2 2.2 0 1 1 6 2.8a2.2 2.2 0 0 1 0 4.4z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 14'%3E%3Cpath d='M6 0a5 5 0 0 0-5 5c0 3.6 5 9 5 9s5-5.4 5-9a5 5 0 0 0-5-5zm0 7.2A2.2 2.2 0 1 1 6 2.8a2.2 2.2 0 0 1 0 4.4z'/%3E%3C/svg%3E") center/contain no-repeat}
.market-empty::before{display:block;margin:0 auto 14px;width:16px;height:19px}
@media (prefers-reduced-motion:reduce){.pc,.seg .knob{transition:none}}
/* round 7: Market is a tab; Enter a sale sits with the title */
/* The title may wrap; the button never does and never leaves the screen ("Add a sale or listing" at 390pt). */
.hrow{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:2px 0 10px}.hrow .h1{margin:0;font-size:22px;line-height:1.12;min-width:0}
.hrow .enter{flex:0 0 auto;white-space:nowrap}
.enter{position:relative;height:34px;padding:0 13px;border-radius:10px;background:var(--ink);color:#fff;font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:6px;text-decoration:none;transition:transform 80ms ease-out}
.enter::before{content:"";position:absolute;left:-4px;right:-4px;top:-5px;bottom:-5px}.enter:active,.enter.pressed{transform:scale(.96)}.enter b{font-size:16px;font-weight:600;line-height:1}
.market-empty a{color:var(--ink);font-weight:600}
/* round 7: neighborhood chips. Rounder than the state chips, so the two rows read as two questions. */
.chips.hoods{margin-bottom:0}
.chips.hoods .chip{border-radius:15px}
.chips{position:relative}
.chips .thumb{position:absolute;top:2px;height:30px;border-radius:10px;background:var(--ink);z-index:0;pointer-events:none;opacity:0;
  transition:left .28s cubic-bezier(.22,1.12,.36,1),width .28s cubic-bezier(.22,1.12,.36,1),opacity .15s}
.chips .chip{position:relative;z-index:1}
/* with a thumb under it, the selected chip is drawn by the thumb, not by itself */
.chips.has-thumb .chip.on{background:transparent;border-color:transparent;animation:none}
.chips.has-thumb .chip{transition:color .2s,border-color .2s}
a.row.arrive{animation:rowIn .38s cubic-bezier(.22,1.12,.36,1) backwards}
@media (prefers-reduced-motion:reduce){.chips .thumb{transition:none}a.row.arrive{animation:none}}
.chips.hoods .thumb{border-radius:15px}
/* round 7, item 7: the sheet follows the finger; no transition while it does */
.panel.drag,.scrim.drag{transition:none}
.phead{touch-action:none;cursor:grab}.phead:active{cursor:grabbing}
.phead a,.phead .pclose,.phead .pedit{cursor:pointer}
/* round 7, item 9: pull to refresh -- the pin breathes under the header while the tab refetches */
html{overscroll-behavior-y:none}          /* round 7 fixes, item 6: our own pull to refresh; the page itself never moves */
body{overscroll-behavior-y:none}
.ptr{position:fixed;left:0;right:0;top:var(--top-h,100px);z-index:19;display:flex;align-items:center;justify-content:center;gap:8px;height:44px;
  color:var(--grey);font-size:12px;background:var(--paper);border-bottom:1px solid var(--line);
  transform:translateY(-100%);opacity:0;transition:transform .28s cubic-bezier(.22,1.12,.36,1),opacity .2s;pointer-events:none}
.ptr.arm{transform:translateY(-40%);opacity:.7}
.ptr.on{transform:none;opacity:1}
.ptr.tuck{transform:translateY(-100%);opacity:0;transition:transform .24s cubic-bezier(.4,0,1,1),opacity .18s}
.ptr i{display:block;width:12px;height:14px;background:var(--green);animation:breathe 1.6s ease-in-out infinite;
  -webkit-mask:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 14'%3E%3Cpath d='M6 0a5 5 0 0 0-5 5c0 3.6 5 9 5 9s5-5.4 5-9a5 5 0 0 0-5-5zm0 7.2A2.2 2.2 0 1 1 6 2.8a2.2 2.2 0 0 1 0 4.4z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 14'%3E%3Cpath d='M6 0a5 5 0 0 0-5 5c0 3.6 5 9 5 9s5-5.4 5-9a5 5 0 0 0-5-5zm0 7.2A2.2 2.2 0 1 1 6 2.8a2.2 2.2 0 0 1 0 4.4z'/%3E%3C/svg%3E") center/contain no-repeat}
@media (prefers-reduced-motion:reduce){.ptr{transition:none}}
/* round 7, item 11: pushed pages slide. The ghost is a fixed clone of the page leaving or beneath. */
main{position:relative}
main.ghost{z-index:1;background:var(--paper)}
main.ghost::after{content:"";position:absolute;inset:0;background:var(--ink);opacity:0;pointer-events:none}   /* dims by opacity, never by filter */
main.ghost.under{z-index:1}main.ghost.under::after{opacity:.18}
main.ghost.under.settle{transition:transform .32s cubic-bezier(.32,.72,0,1);transform:translateX(-30%)!important}
main.slide-in{z-index:2;animation:pushIn .32s cubic-bezier(.32,.72,0,1);box-shadow:-12px 0 30px rgba(0,0,0,.18)}
@keyframes pushIn{from{transform:translateX(100%)}to{transform:none}}
main.ghost.slide-under{animation:pushUnder .32s cubic-bezier(.32,.72,0,1) forwards}
@keyframes pushUnder{to{transform:translateX(-30%)}}
main.ghost.slide-under::after{animation:dimIn .32s cubic-bezier(.32,.72,0,1) forwards}@keyframes dimIn{to{opacity:.18}}
main.ghost.leaving{z-index:3;animation:pushOut .32s cubic-bezier(.32,.72,0,1) forwards;box-shadow:-12px 0 30px rgba(0,0,0,.18)}
@keyframes pushOut{to{transform:translateX(100%)}}
main.slide-back{animation:pushBack .32s cubic-bezier(.32,.72,0,1)}
@keyframes pushBack{from{transform:translateX(-30%)}to{transform:none}}
main.dragging{z-index:2;box-shadow:-12px 0 30px rgba(0,0,0,.18);transition:none}
main:not(.dragging){transition:transform .32s cubic-bezier(.32,.72,0,1)}
.back{display:inline-flex;align-items:center;gap:4px;font-size:13px;color:var(--grey-d);text-decoration:none;margin:0 0 8px;position:relative}.back::before{content:"";position:absolute;inset:-12px -8px}
@media (prefers-reduced-motion:reduce){main.slide-in,main.ghost,main.slide-back{animation:none}main:not(.dragging){transition:none}}
/* the import's progress page (round 7 fixes) */
.importing .spin{width:14px;height:17px;margin:2px 0 14px;background:var(--green);animation:breathe 1.6s ease-in-out infinite;
  -webkit-mask:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 14'%3E%3Cpath d='M6 0a5 5 0 0 0-5 5c0 3.6 5 9 5 9s5-5.4 5-9a5 5 0 0 0-5-5zm0 7.2A2.2 2.2 0 1 1 6 2.8a2.2 2.2 0 0 1 0 4.4z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 14'%3E%3Cpath d='M6 0a5 5 0 0 0-5 5c0 3.6 5 9 5 9s5-5.4 5-9a5 5 0 0 0-5-5zm0 7.2A2.2 2.2 0 1 1 6 2.8a2.2 2.2 0 0 1 0 4.4z'/%3E%3C/svg%3E") center/contain no-repeat}
.importing .bar{height:6px;border-radius:3px;background:var(--sunken);border:1px solid var(--line);overflow:hidden;margin-top:16px}
.importing .bar span{display:block;height:100%;background:var(--green);border-radius:3px;transition:width .6s cubic-bezier(.22,1,.36,1);min-width:2%}
/* round 7 fixes, item 7: nothing animates for rows the eye cannot see yet, and the
   load-more sentinel is invisible */
.refilter .row:nth-child(n+25){animation:none}
.list .more{height:1px;margin:0}
.today .stale-more{font-size:12.5px;color:var(--grey);padding:10px 14px}
/* round 7 fixes, item 5: every tab ends the same distance above the tab bar. main's
   padding-bottom (78px + the safe area) is the whole gap; nothing adds its own margin at the foot. */
main > :last-child{margin-bottom:0}
main > .mday:last-of-type .pc:last-child,[data-market-list] > section:last-child .pc:last-child{margin-bottom:0}
main > .attribution:last-child{margin-bottom:0}
main > .list:last-child,main > .card:last-child{margin-bottom:0}

/* ══ Stage over sheet, every page (motion-restyle step 3; Today was step 2) ═════
   The header is ink on every tab, so it never changes color on a tab switch.
   The stage under it holds the page's title (or greeting) and one hero slot:
   a 12px label with a big number, or the page's hero card. The sheet
   (paper, 28px top radius) holds everything else in its existing colors and
   rises 450ms on --ease-out, rows staggering at 60ms. The scoop is only for
   launch, sign-in and Today. */
.top{background:var(--stage);border-bottom-color:transparent}
.brand .nm{color:var(--white)}
.brand .dv,.brand .ct{color:var(--paper);opacity:.75}
.brand .ct b{color:var(--white)}
.demo-banner{outline:1px solid var(--grey-d)}
main.wrap{padding-top:0}
.page-shell,.today-shell{display:flex;flex-direction:column;min-height:100%}
.tstage{background:var(--stage);color:var(--white);margin:0 -20px;padding:10px 20px 42px;flex:0 0 auto}
.tstage .hi{font-size:22px;font-weight:800;letter-spacing:-.03em;color:var(--white);line-height:1.2}
.tstage h1.hi{margin:0}
.tstage .hrow{margin:0}
.tstage .hello{display:flex;align-items:center;justify-content:space-between}
.tstage .circles{display:flex;gap:10px}
/* a 36px disc with a 44pt hit area (the ::before halo, the way .enter does it) */
.tstage .circ{position:relative;width:36px;height:36px;border-radius:50%;background:var(--sheet);display:grid;place-items:center;color:var(--stage);transition:transform 80ms ease-out}
.tstage .circ::before{content:"";position:absolute;left:-4px;right:-4px;top:-4px;bottom:-4px}
.tstage .circ:active{transform:scale(.92)}
.tstage .enter{background:var(--sheet);color:var(--stage)}
.tstage .hero{margin-top:18px}
.tstage .hero .lab{font-size:12px;font-weight:600;color:var(--grey);margin:0;letter-spacing:0;text-transform:none}
.tstage .hero .num{font-size:34px;font-weight:800;letter-spacing:-.04em;line-height:1.15;color:var(--white);margin-top:2px}
.tstage .hero .num.name{font-size:26px;letter-spacing:-.035em}
.tstage .lab{color:var(--grey);margin:0 0 6px}
.tstage .back{color:var(--paper);opacity:.75;margin:0 0 10px}
.tstage .lede{color:var(--paper);opacity:.8;margin-top:6px;font-size:14.5px}
.tstage .badgecard{margin:18px 0 0;border-radius:20px;animation:none;color:var(--ink)}
.tstage .pc.hero{margin:16px 0 0}
.tsheet{flex:1 0 auto;background:var(--sheet);border-radius:28px 28px 0 0;margin:-28px -20px 0;padding:22px 20px 0;
  animation:sheetRise 450ms var(--ease-out) both}
.tsheet .search{margin-top:0;margin-bottom:12px}
.tsheet .sh{display:flex;justify-content:space-between;align-items:baseline}
.tsheet .sh .sect{margin-bottom:8px}
.tsheet .seeall{font-size:12px;font-weight:600;color:var(--grey-d);padding:12px 0 12px 12px;margin:-12px 0}   /* 44pt tall to tap */
.tsheet .tiles{margin-bottom:6px}
.tsheet .sect{margin-top:22px}
.tsheet .sect:first-child,.tsheet > .lab:first-child,.tsheet .setup > .lab:first-child{margin-top:0}
.tsheet .list .t-row .row{border-bottom:1px solid var(--line-soft)}
.tsheet .hoods{margin-top:0}
.tsheet .salecard-actions{margin-top:0}
@keyframes sheetRise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
/* rows stagger in at 60ms as the sheet settles; the first twelve, the rest at once */
.tsheet .list > .row,.tsheet [data-rows] > .row{animation:tRow 260ms var(--ease-out) both}
.tsheet .list > .row:nth-child(1),.tsheet [data-rows] > .row:nth-child(1){animation-delay:120ms}
.tsheet .list > .row:nth-child(2),.tsheet [data-rows] > .row:nth-child(2){animation-delay:180ms}
.tsheet .list > .row:nth-child(3),.tsheet [data-rows] > .row:nth-child(3){animation-delay:240ms}
.tsheet .list > .row:nth-child(4),.tsheet [data-rows] > .row:nth-child(4){animation-delay:300ms}
.tsheet .list > .row:nth-child(5),.tsheet [data-rows] > .row:nth-child(5){animation-delay:360ms}
.tsheet .list > .row:nth-child(6),.tsheet [data-rows] > .row:nth-child(6){animation-delay:420ms}
.tsheet .list > .row:nth-child(7),.tsheet [data-rows] > .row:nth-child(7){animation-delay:480ms}
.tsheet .list > .row:nth-child(8),.tsheet [data-rows] > .row:nth-child(8){animation-delay:540ms}
.tsheet .list > .row:nth-child(9),.tsheet [data-rows] > .row:nth-child(9){animation-delay:600ms}
.tsheet .list > .row:nth-child(10),.tsheet [data-rows] > .row:nth-child(10){animation-delay:660ms}
.tsheet .list > .row:nth-child(11),.tsheet [data-rows] > .row:nth-child(11){animation-delay:720ms}
.tsheet .list > .row:nth-child(12),.tsheet [data-rows] > .row:nth-child(12){animation-delay:780ms}
.tsheet .list > .row:nth-child(n+13),.tsheet [data-rows] > .row:nth-child(n+13){animation-delay:840ms}
.tsheet .refilter .row,.tsheet .list.refilter > .row{animation:rowIn .38s cubic-bezier(.22,1.12,.36,1) both}
/* The Today build-in (step 2): one entrance shape for small things (12px up,
   fade), the card at 16px and 3%, the sheet fading in place, rows 10px at
   70ms apart, the tab bar last. Only while .build is on. */
@keyframes tIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes tCard{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
@keyframes tSheet{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes tRow{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes tNum{from{opacity:0;filter:blur(4px)}40%{opacity:1;filter:blur(4px)}to{opacity:1;filter:blur(0)}}
@keyframes tTabs{from{opacity:.4}to{opacity:1}}
.today-shell .tsheet{animation:none}
.today-shell.build .t-in{animation:tIn 250ms var(--ease-out) var(--t,0ms) both}
.today-shell.build .t-num{animation:tNum 550ms var(--ease-out) 250ms both}
.today-shell.build .t-card{animation:tCard 450ms var(--ease-out) 350ms both}
.today-shell.build .t-sheet{animation:tSheet 400ms var(--ease-out) 350ms both}
.today-shell.build .t-row{animation:tRow 260ms var(--ease-out) calc(750ms + var(--i,0) * 70ms) both}
body.today-build nav.tabs{animation:tTabs 300ms var(--ease-out) 1150ms both}
@media (prefers-reduced-motion:reduce){
  .tsheet,.tsheet .list > .row,.tsheet [data-rows] > .row,
  .today-shell.build .t-in,.today-shell.build .t-num,.today-shell.build .t-card,.today-shell.build .t-sheet,.today-shell.build .t-row,body.today-build nav.tabs{animation:none}
}

/* round 7 fixes: tab to tab is a 150ms crossfade of <main> only; the header and the tab bar never
   move or repaint. With the View Transitions API they are named so they stay put; without it,
   main fades. @view-transition covers a full navigation should one ever happen. */
@view-transition{navigation:auto}
.top{view-transition-name:followap-header}
nav.tabs{view-transition-name:followap-tabs}
::view-transition-old(root),::view-transition-new(root){animation-duration:150ms}
::view-transition-group(followap-header),::view-transition-group(followap-tabs){animation-duration:0s}
main.xfade{animation:xfade 150ms ease-out}
@keyframes xfade{from{opacity:0}to{opacity:1}}
#sheetIn.xfade{animation:xfade 150ms ease-out}
@media (prefers-reduced-motion:reduce){main.xfade,#sheetIn.xfade{animation:none}}
.chips.hoods .chip.dim{opacity:.45}

/* ── round 7 fixes: the Market kind chips, and Setup's "Tell me about" switches ── */
button.chip{font:inherit;appearance:none;-webkit-appearance:none;cursor:pointer}
.chips.kinds{margin-bottom:0}
.krow{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:52px;padding:8px 0;border-top:1px solid var(--line);cursor:pointer}
.kinds .krow:first-of-type{border-top:0}
.krow .kt{display:flex;flex-direction:column;gap:2px;min-width:0}
.krow .kl{font-size:14px;font-weight:600;color:var(--ink)}
.krow .kh{font-size:12px;color:var(--grey);line-height:1.3}
.ksw{position:relative;flex:0 0 auto;width:46px;height:28px;border-radius:14px;background:rgba(0,0,0,.14);transition:background .2s}
.ksw .kk{position:absolute;top:2px;left:2px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.28);transition:transform .2s cubic-bezier(.22,1.12,.36,1)}
.ksw.on{background:var(--green)}
.ksw.on .kk{transform:translateX(18px)}
@media (prefers-reduced-motion:reduce){.ksw,.ksw .kk{transition:none}}

/* the demo copy's one line where a control is not in the demo */
.notice.demo{margin-top:10px}
.notice.demo a{color:var(--ink);font-weight:600;text-decoration:underline}
.demo-banner a{color:#F5C451;font-weight:600;margin-left:6px}
.demo-banner form{display:inline}
.demo-banner .linklike{background:none;border:0;padding:0;margin-left:6px;font:inherit;color:#F5C451;font-weight:600;text-decoration:underline;cursor:pointer}

/* @critical */
/* ══ The desk (docs/09 round 6, step 1): one shell, three widths ══════════════
   Phone (to 760px): exactly what ships -- nothing above this block changes it.
   Between (761 to 1023): the rail collapses to icons, the content is one column.
   Desk (1024 and up): the rail with its labels on the left (the stage), the work
   on paper beside it (the sheet), exactly as 08_Launch/FOLLOWap_Desk.html draws
   it. Titles on the desk are the tab's name and nothing else; the hero number
   becomes the line under the title. Same tokens, same type, same motion. */
.desk{display:none}
.deskpanel{display:none}
@media (min-width:761px){
  body{flex-direction:row;background:var(--stage)}
  .desk{display:flex;flex-direction:column;flex:0 0 auto;width:56px;padding:18px 8px;background:var(--stage);color:var(--paper);-webkit-user-select:none;user-select:none}
  .desk .mark{display:flex;align-items:center;font-size:17px;font-weight:800;letter-spacing:-.035em;color:var(--white);padding:0 6px 20px;white-space:nowrap;line-height:1.2;min-height:40px}
  .desk .mark .mark-w{display:none}
  .desk .mark .mark-pin{display:block;width:16px;height:19px;margin:0 auto;background:var(--green);
    -webkit-mask:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 14'%3E%3Cpath d='M6 0a5 5 0 0 0-5 5c0 3.6 5 9 5 9s5-5.4 5-9a5 5 0 0 0-5-5zm0 7.2A2.2 2.2 0 1 1 6 2.8a2.2 2.2 0 0 1 0 4.4z'/%3E%3C/svg%3E") center/contain no-repeat;
    mask:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 14'%3E%3Cpath d='M6 0a5 5 0 0 0-5 5c0 3.6 5 9 5 9s5-5.4 5-9a5 5 0 0 0-5-5zm0 7.2A2.2 2.2 0 1 1 6 2.8a2.2 2.2 0 0 1 0 4.4z'/%3E%3C/svg%3E") center/contain no-repeat}
  .desk .mark .ap{color:var(--green)}
  .desk .rnav{display:flex;flex-direction:column;gap:2px}
  .desk .rtab{position:relative;display:flex;align-items:center;gap:11px;padding:10px;border-radius:var(--r-ctl);color:var(--grey);font-size:13.5px;font-weight:600;
    transition:color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out),transform 80ms ease-out}
  .desk .rtab svg{flex:0 0 auto;width:18px;height:18px}
  .desk .rtab.on{color:var(--ink);background:var(--paper)}
  .desk .rl{display:none}
  .desk .rn{margin-left:auto;font-size:11px;font-weight:700;background:var(--green);color:#0C2A16;padding:1px 7px;border-radius:9px;line-height:1.5}
  .desk .rtab.on .rn{background:var(--ink);color:var(--paper)}
  .desk .who{margin-top:auto;display:flex;align-items:center;gap:9px;padding:10px 6px;border-top:1px solid rgba(255,255,255,.09);color:var(--grey);font-size:12.5px;min-width:0}
  .desk .who .rl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .desk .av{width:26px;height:26px;border-radius:50%;background:var(--grey-d);color:var(--paper);display:grid;place-items:center;font-size:10.5px;font-weight:700;flex:0 0 auto}
  .top,nav.tabs{display:none}
  /* body is a row here, so the banner (the demo's, or the past-due line) is
     pinned across the top of the sheet and the sheet's content starts under it */
  .demo-banner{position:absolute;top:12px;left:90px;right:34px;z-index:5;margin:0;width:auto;max-width:none}
  body:has(> .demo-banner) main.wrap{padding-top:58px}
  main.wrap{flex:1 1 auto;min-width:0;max-width:none;margin:0;background:var(--sheet);border-radius:18px 0 0 18px;padding:0 34px 40px;position:relative}
  main{padding-top:0}
  /* the stage is the rail now: a page's stage block becomes its title on paper */
  .page-shell,.today-shell{min-height:0}
  .tstage{background:transparent;color:var(--ink);margin:0;padding:28px 0 0}
  .tstage .hi{font-size:34px;color:var(--ink);letter-spacing:-.035em;line-height:1.05}
  .tstage .hero{margin-top:7px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
  .tstage .hero .lab{font-size:14px;color:var(--grey-d);margin:0}
  .tstage .hero .num{font-size:14px;font-weight:700;color:var(--ink);margin:0;letter-spacing:-.01em;line-height:1.45}
  .tstage .hero .num.name{font-size:14px;letter-spacing:-.01em}
  .tstage .lab{color:var(--grey)}
  .tstage .back,.tstage .lede{color:var(--grey-d);opacity:1}
  .tstage .lede{max-width:56ch;font-size:14px;margin-top:7px}
  .tstage .enter{background:var(--ink);color:var(--white)}
  .tstage .circ{background:var(--ink);color:var(--paper)}
  .tstage .hrow{margin:0;align-items:baseline}
  .tstage .badgecard{max-width:640px}
  .tstage .pc.hero{max-width:640px}
  .tsheet{background:transparent;border-radius:0;margin:0;padding:18px 0 0}
  .chips{margin:0;padding-left:0;padding-right:0}
  .tsheet .search{max-width:340px}
  /* the auth pages: the ink stage, one paper card, centred */
  .authbody{background:var(--stage);padding:40px 24px;display:grid;place-items:center;min-height:100dvh}
  .authbody:not(.signin) .authmain{background:var(--sheet);border-radius:28px;padding:36px 32px;max-width:460px;justify-items:stretch;gap:0}
  .authbody:not(.signin) .authmain h1{font-size:26px}
  .authpage{display:grid;gap:0}
  /* sign-in: the same scooped sheet, sized as a card on the stage */
  .authbody.signin{display:grid;place-items:center;overflow:auto;padding:40px 24px;min-height:100dvh}
  .signin .authmain{position:static;inset:auto;width:min(440px,100%);display:block;padding:0}
  .signin .stagehead{position:static;left:auto;right:auto;top:auto;text-align:center;margin:0 auto 6px}
  .signin .stagehead .wm{font-size:34px}
  .signin .sheet{position:relative;inset:auto;display:block;border-radius:0 0 28px 28px;overflow:hidden;min-height:0}
  .signin .sheet .edge{position:relative;top:auto;height:72px}
  .signin .sheet .body{display:none}
  .signin .authform{position:relative;left:auto;right:auto;top:auto;bottom:auto;overflow:visible;padding:0 32px 30px;background:var(--sheet);margin-top:-1px}
  .lockbody{padding:40px 24px}
}
@media (min-width:761px) and (hover:hover){
  .desk .rtab:hover{color:var(--paper);background:rgba(255,255,255,.05)}
  .desk .rtab.on:hover{color:var(--ink);background:var(--paper)}
  .desk .who:hover{color:var(--paper)}
}
@media (min-width:1024px){
  .desk{width:206px;padding:20px 14px}
  .demo-banner{left:240px}
  .desk .mark{padding:0 10px 22px}
  .desk .mark .mark-w{display:inline}
  .desk .mark .mark-pin{display:none}
  .desk .rtab{padding:9px 10px}
  .desk .rl{display:inline}
  .desk .who{padding:10px}
}
/* @endcritical */

/* ── the desk, per page (not inlined: the shell above is what first paint needs) ── */
@media (min-width:761px){
  /* pages that are not stage over sheet -- the import steps, edit, the client's
     full page, compose -- keep a reading width */
  main.wrap > :not(.page-shell):not(.today-shell){max-width:760px}
  main.wrap > h1{margin-top:28px;font-size:34px;letter-spacing:-.035em}
  .page-card{max-width:600px}
  .today-shell{max-width:900px}
  body[data-tab=activity] .page-shell,body[data-tab=setup] .page-shell{max-width:760px}
  .setup{max-width:640px}
  .card.cols{max-width:720px}
  .col{grid-template-columns:1fr 320px}
  /* the market's cards, two across (the whole-market view is step 5) */
  .mday{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px;max-width:1120px}
  .mday .day{grid-column:1/-1;margin-bottom:0}
  .mday .pc{margin-bottom:0}
  [data-market-list]{max-width:1120px}
  .market-empty{max-width:640px}
  .attribution{max-width:1120px}
  body[data-tab=market] .tsheet > .list,.salecard-actions{max-width:640px}
}
@media (min-width:1024px){
  /* Clients: the list, and the card in a panel beside it */
  body[data-tab=clients] .tsheet{display:grid;grid-template-columns:minmax(0,1fr) 412px;gap:16px;align-items:start}
  body[data-tab=clients] .tsheet > .search,body[data-tab=clients] .tsheet > .chips{grid-column:1/-1}
  body[data-tab=clients] .tsheet > .list{margin-top:0!important}
  /* The card beside the list stays in view (sticky under the page's top) and scrolls on its own to its last
     line (8 October 2026: a card taller than the window had its texts, the neighbour's sale and below out of reach). */
  .deskpanel{display:block;position:sticky;top:18px;max-height:calc(100dvh - 36px);overflow-y:auto;overscroll-behavior:contain;
    border-radius:var(--r);scrollbar-width:thin}
  .deskpanel-empty{background:var(--white);border:1px dashed var(--line);border-radius:var(--r);padding:48px 26px;text-align:center;color:var(--grey);font-size:14px}
  .deskpanel-empty b{display:block;color:var(--ink);font-size:16px;font-weight:700;letter-spacing:-.02em;margin-bottom:5px}
  .deskcard{background:var(--white);border:1px solid var(--line-soft);border-radius:var(--r);overflow:hidden}
  .deskcard .phead{position:relative;top:auto;background:var(--white);border-radius:var(--r) var(--r) 0 0;padding:16px 18px 13px}
  .deskcard .grab{display:none}
  .deskcard .pclose,.deskcard .pedit{top:15px}
  .deskcard .pbody{padding:12px 18px 18px}
  .deskcard .mode.card{background:var(--sunken);border-color:transparent}
  .deskcard .prev{background:var(--white)}
  .list .row.on{background:rgba(56,202,95,.055)}
}

/* ── Billing and the paid signup (docs/09 round 6, step 2) ──────────── */
.agree{display:flex;gap:10px;align-items:flex-start;margin-top:16px;font-size:14px;color:var(--grey-d);line-height:1.4}
.agree input{width:18px;height:18px;margin:1px 0 0;accent-color:var(--green);flex:0 0 auto}
.agree a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.fine{font-size:12.5px;margin-top:10px;line-height:1.4}
.plan .plan-price{font-size:15px;font-weight:600;color:var(--grey-d);letter-spacing:-.01em}
.plan .plan-price b{font-size:40px;font-weight:800;color:var(--ink);letter-spacing:-.04em;line-height:1;margin-right:8px}
.plan .samples{margin-top:6px}
.plan-list{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px;font-size:14.5px;color:var(--grey-d)}
.plan-list li{display:flex;gap:10px;align-items:flex-start;line-height:1.4}
.plan-list li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green);margin-top:7px;flex:0 0 auto}
.gate-links{display:flex;gap:14px;justify-content:center;align-items:center;margin-top:22px;font-size:14px}
.gate-links a{text-decoration:underline;text-underline-offset:3px}
.gate-links .linkish{padding:0;font-size:14px;font-weight:400;color:var(--grey)}
.demo-banner.owing{background:var(--amber);color:var(--ink)}
.demo-banner.owing b,.demo-banner.owing a{color:var(--ink)}
/* The auth card's form (signup, the billing gate): one column at every width, the
   card no wider than the page. .col's two columns are the import's mapping rows. */
.authpage{width:100%;min-width:0;justify-self:stretch}
.authpage .lede{max-width:none}
.authpage .card.cols{max-width:none;width:100%}
.authpage .col{grid-template-columns:minmax(0,1fr);gap:8px;align-items:stretch}
.authpage .col input{width:100%;min-width:0}
.authpage .col .samples{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.35}

/* ── The QR install handoff (docs/09 round 6, step 3) ───────────────── */
.install-card{display:grid;grid-template-columns:auto minmax(0,1fr);gap:22px;align-items:start}
.install-card .qr{width:196px;height:196px;padding:10px;background:var(--white);border:1px solid var(--line-soft);border-radius:var(--r);box-sizing:content-box}
.install-card .qr svg{width:100%;height:100%;display:block}
.install-state{display:flex;gap:10px;align-items:center;margin:14px 0 12px;font-size:14px;color:var(--grey-d)}
.install-state .dot{width:8px;height:8px;border-radius:50%;background:var(--amber);flex:0 0 auto;animation:installpulse 1.2s ease-in-out infinite}
.install-state.on{color:var(--ink);font-weight:600}
.install-state.on .dot{background:var(--green);animation:none}
@keyframes installpulse{0%,100%{opacity:.35}50%{opacity:1}}
.install-why{margin-top:14px;max-width:60ch}
.install-phone{display:none}
@media (max-width:760px){.install-desk{display:none}.install-phone{display:block}}
.steps{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:12px}
.steps li{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.4}
.steps .n{width:24px;height:24px;border-radius:50%;background:var(--ink);color:var(--paper);font-size:12.5px;font-weight:700;display:grid;place-items:center;flex:0 0 auto}
.steps .ic{display:inline-block;width:18px;height:18px;vertical-align:-3px;margin:0 2px}
@media (prefers-reduced-motion:reduce){.install-state .dot{animation:none}}

/* ── The send queue (docs/09 round 6, step 4) ───────────────────────── */
.desk-only{display:none}
.ready{background:rgba(0,0,0,.028);border:1px solid var(--line-soft);border-radius:var(--r);padding:14px 15px 15px;margin-bottom:18px}
.ready.qnone{display:none}
.ready .rhead{display:flex;align-items:center;gap:10px;margin-bottom:11px;padding:0 3px;flex-wrap:wrap}
.ready .rhead .k{font-size:10px;font-weight:800;letter-spacing:.09em;color:var(--grey-d)}
.ready .rhead .sp{flex:1}
.ready .rhead .hint{font-size:12px;color:var(--grey)}
.ready .phone{display:flex;align-items:center;gap:12px;padding:4px 3px 12px}
.ready .phone .big{font-size:30px;font-weight:800;letter-spacing:-.04em;line-height:1}
.ready .phone .tx{min-width:0;flex:1}
.ready .phone .tx b{display:block;font-size:14.5px;font-weight:700}
.ready .phone .tx span{display:block;font-size:12.5px;color:var(--grey-d);margin-top:2px}
.ready .phone .go{margin-left:auto;font:inherit;font-size:12.5px;font-weight:700;border:1px solid var(--line);border-radius:999px;padding:8px 12px;background:var(--white);cursor:pointer;color:var(--ink)}
.ready .qlist{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.ready .phone .tx .desk-only{display:none}   /* outranks .ready .phone .tx span above: the desk's line stays off the phone */
.ready .qempty{font-size:13.5px;color:var(--grey-d);padding:6px 3px 2px;line-height:1.5}
.ready .qempty b{color:var(--ink)}
.qcard{display:flex;gap:12px;align-items:flex-start;min-width:0;background:var(--white);border:1px solid var(--line-soft);border-radius:var(--r);padding:12px 13px}
.qcard .in{width:34px;height:34px;border-radius:50%;background:var(--sunken);display:grid;place-items:center;font-size:12px;font-weight:700;color:var(--grey-d);flex:0 0 auto}
.qcard .bd{flex:1;min-width:0}
.qcard .bd b{display:block;font-size:14.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qcard .bd .why2{display:block;font-size:12.5px;color:var(--grey);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qcard .bd p{font-size:13.5px;color:var(--grey-d);margin-top:7px;line-height:1.5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.qcard .st{flex:0 0 auto;font-size:11.5px;font-weight:700;color:var(--green);display:flex;align-items:center;gap:6px;letter-spacing:.06em;margin-top:2px}
.qcard .st .d{width:6px;height:6px;border-radius:50%;background:var(--green)}
.qcard.stale{border-color:rgba(208,139,44,.45);background:rgba(208,139,44,.06)}
.qcard .st.stale{color:var(--amber)}
.qcard .st.stale .d{background:var(--amber)}
.qcard .nudged{font-size:11.5px;color:var(--amber);margin-top:7px;font-weight:600}
.qcard .qgo{display:flex;flex-direction:column;gap:6px;align-items:stretch;flex:0 0 auto}
@media (max-width:760px){
  /* The phone (5 October): the reason keeps one line. The state is the dot, the amber card and
     "Sitting N days"; the word beside them left the reason a column too narrow to read. */
  .qcard .st{font-size:0;gap:0;margin-top:7px}
}
.b2{font:inherit;font-size:12.5px;font-weight:600;color:var(--grey-d);border:1px solid var(--line);border-radius:999px;padding:7px 11px;background:var(--white);cursor:pointer;line-height:1.2}
.qacts{margin:-4px 0 14px;display:grid;gap:8px}
.qacts .btn{height:42px}
.btn.queued{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.qacts .small{display:flex;gap:8px}
.qacts .small .b2{flex:1}
.qacts .small .mac-only{display:none}
html.mac .qacts .small .mac-only{display:block}
.qacts .qr-out{display:grid;place-items:center;padding:10px;background:var(--white);border:1px solid var(--line-soft);border-radius:var(--r)}
.qacts .qr-out svg{width:180px;height:180px}
.prev[data-editable]{outline:none;cursor:text;transition:box-shadow .12s}
.prev[data-editable]:focus{box-shadow:0 0 0 3px rgba(56,202,95,.16)}
.prev[data-editable]::after{content:"click to edit";display:block;font-size:11px;font-weight:600;color:var(--grey);margin-top:6px;letter-spacing:.02em}
.prev[data-editable]:focus::after{content:"editing"}
.ago.queued{color:var(--green);font-weight:700}
@media (min-width:1024px){
  .desk-only{display:block}
  .phone-only{display:none!important}
  .ready.qnone{display:block}
  .ready .phone .tx .desk-only{display:block}
  .ready .phone .tx .phone-only{display:none}
  .qacts .small{display:flex}
}

/* ── The Market on the desk (docs/09 round 6, step 5) ───────────────── */
.tsheet.all{max-width:none}
.mktbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 14px}
.mktbar .msearch{width:300px;max-width:100%;height:38px}
.mktbar .mchips{margin:0;padding:0}
.mktbar .msort{margin-left:auto;font-size:12.5px;color:var(--grey-d);display:flex;align-items:center;gap:6px}
.mktbar .msort select{height:34px;font-size:12.5px;padding:0 28px 0 10px}
.mnote{font-size:13px;color:var(--grey-d);background:var(--sunken);border-radius:var(--r-ctl);padding:10px 14px;margin:0 0 14px;line-height:1.45}
.mkt{display:flex;gap:16px;align-items:flex-start}
.mmap{flex:0 0 46%;position:sticky;top:18px;height:min(612px,calc(100dvh - 36px));border-radius:var(--r);overflow:hidden;background:var(--sunken);border:1px solid var(--line-soft)}
.mmap svg{position:absolute;inset:0;width:100%;height:100%}
.mpin{position:absolute;transform:translate(-50%,-50%);background:var(--grey-d);color:#fff;border:0;border-radius:999px;height:24px;min-width:24px;padding:0 7px;font:inherit;font-size:11px;font-weight:700;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .15s}
.mpin.mine{background:var(--green);color:#0C2A16}
.mpin.sold{background:var(--ink)}
.mpin.on{transform:translate(-50%,-50%) scale(1.22);z-index:5}
@media (hover:hover){.mpin:hover{transform:translate(-50%,-50%) scale(1.22);z-index:5}}
.maptag{position:absolute;left:12px;top:12px;font-size:11px;font-weight:600;color:var(--grey-d);background:rgba(255,255,255,.88);border-radius:999px;padding:5px 9px}
.maplegend{position:absolute;left:12px;bottom:12px;display:flex;gap:12px;font-size:11px;color:var(--grey-d);background:rgba(255,255,255,.88);border-radius:999px;padding:5px 10px}
.maplegend i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px;vertical-align:-1px}
.maplegend i.g{background:var(--green)} .maplegend i.k{background:var(--ink)} .maplegend i.n{background:var(--grey-d)}
.mgrid{flex:1;min-width:0;display:grid;grid-template-columns:1fr 1fr;gap:11px;align-content:start}
.mlst{display:block;background:var(--white);border-radius:var(--r);border:1px solid var(--line-soft);text-decoration:none;color:var(--ink);overflow:hidden;transition:border-color .12s}
@media (hover:hover){.mlst:hover{border-color:rgba(0,0,0,.24)}}
.mlst.on{border-color:var(--green);box-shadow:0 0 0 1px var(--green)}
.mlst .lphoto{aspect-ratio:16/9;background-size:cover;background-position:center}
.mlst .lhead{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:12px 15px 0;font-size:10.5px;font-weight:800;letter-spacing:.08em}
.mlst .st.new{color:var(--green)} .mlst .st.active{color:var(--grey-d)} .mlst .st.sold{color:var(--ink)} .mlst .st.off{color:var(--grey)}
.mlst .when{font-weight:600;letter-spacing:0;color:var(--grey);text-transform:none;white-space:nowrap}
.mlst .pr{font-size:22px;font-weight:800;letter-spacing:-.035em;padding:9px 15px 0}
.mlst .ad{padding:4px 15px 0;font-size:14px;font-weight:600;letter-spacing:-.014em}
.mlst .fx{padding:2px 15px 12px;font-size:12.5px;color:var(--grey)}
.mmine{margin:0 15px;background:rgba(56,202,95,.09);border-radius:10px;padding:9px 11px;font-size:12.5px;font-weight:600}
.mmine .r1{display:flex;align-items:center;gap:8px}
.mmine .n{width:20px;height:20px;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;font-size:11px;flex:0 0 auto}
.mmine.none{background:var(--sunken);color:var(--grey);font-weight:500}
.mmine.none .n{background:rgba(0,0,0,.14);color:var(--grey-d)}
.mmine .go{display:block;color:var(--grey-d);font-size:11.5px;font-weight:500;margin-top:5px;margin-left:28px}
.mlst .attr{padding:10px 15px 14px;font-size:11px;color:var(--grey);min-height:14px}
.mdisc{grid-column:1/-1;font-size:10.5px;color:var(--grey);line-height:1.5;padding:4px 2px 0}
.mlst-empty,.mlst-none{grid-column:1/-1;padding:40px 20px;text-align:center;color:var(--grey-d);font-size:14px;line-height:1.5}
.mlst-empty b{color:var(--ink)}
@media (max-width:1023px){.mmap{display:none}.mgrid{grid-template-columns:1fr}}

/* ── Seats (docs/09 round 6, step 6) ───────────────────────────────── */
.roster{display:grid;gap:8px;margin-top:10px}
.member{display:flex;align-items:center;gap:10px;padding:8px 0}
.member .in{width:32px;height:32px;border-radius:50%;background:var(--sunken);display:grid;place-items:center;font-size:12px;font-weight:700;color:var(--grey-d);flex:0 0 auto}
.member .who{min-width:0;flex:1}
.member .who b{display:block;font-size:14px;font-weight:600}
.member .who span{display:block;font-size:12.5px;color:var(--grey-d);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.member.open .in{background:rgba(56,202,95,.14);color:var(--ink)}
.teamlink{display:block;margin-top:6px;font-size:12px;word-break:break-all;color:var(--ink)}

/* ── Round 2, item 2: every desk page fills the width ───────────────── */
@media (min-width:1024px){
  main.wrap > :not(.page-shell):not(.today-shell){max-width:1240px}
  .page-card{max-width:1240px}
  .today-shell{max-width:1280px}
  body[data-tab=activity] .page-shell,body[data-tab=setup] .page-shell{max-width:1280px}
  body[data-tab=market] .tsheet > .list,.salecard-actions{max-width:none}
  /* Today: the Ready block and the tiles across; the lists left, this week's sales right */
  .today-shell .tsheet{display:grid;grid-template-columns:minmax(0,1fr) 420px;column-gap:24px;align-items:start}
  .today-shell .tsheet > .ready,.today-shell .tsheet > .tiles{grid-column:1/-1}
  .today-shell .tsheet > .tmain{grid-column:1;min-width:0}
  .today-shell .tsheet > .tside{grid-column:2;min-width:0;display:block}
  /* Setup: the cards in two columns */
  .setupgrid{max-width:none;column-count:2;column-gap:24px}
  .setupgrid > .notice,.setupgrid > .sfoot{column-span:all}
  .setupgrid > .sblock{break-inside:avoid;display:block;min-width:0}
  /* Activity: the lists left, the week and the going-cold right */
  body[data-tab=activity] .tsheet{display:grid;grid-template-columns:minmax(0,1fr) 380px;column-gap:24px;align-items:start}
  body[data-tab=activity] .tsheet > .amain{grid-column:1;min-width:0}
  body[data-tab=activity] .tsheet > .aside{grid-column:2;min-width:0;display:block}
  /* Digest: two columns of rows */
  .digestpage .tsheet > .list{display:grid;grid-template-columns:repeat(auto-fit,minmax(420px,1fr));gap:10px;max-width:none}
  /* The sale page: the listing left, the people right */
  .salepage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:32px;align-items:start}
  .salepage > .tstage{grid-column:1}
  .salepage > .tsheet{grid-column:2;padding-top:28px}
  /* Add a sale: the fields in two columns */
  .addsale .card.cols{max-width:none;display:grid;grid-template-columns:1fr 1fr}
  .addsale .card.cols > .col:first-child{grid-column:1/-1}
  .addsale .card.cols > .col{border-bottom:1px solid var(--line-soft);grid-template-columns:minmax(0,1fr) minmax(0,320px)}
  .addsale .card.cols input,.addsale .card.cols select{width:100%;min-width:0;max-width:100%}
  .addsale .col .samples{white-space:normal;overflow:visible;text-overflow:clip}
  /* Import: the work left, the explanation right */
  .ipage{display:grid;grid-template-columns:minmax(0,1fr) 380px;column-gap:28px;grid-auto-flow:dense;align-items:start}
  .ipage > *{grid-column:1;min-width:0}
  .ipage > h1,.ipage > .lede,.ipage > .notice{grid-column:1/-1}
  .ipage > .iside{grid-column:2}
  /* The client's page: the card left, history right */
  .page-card .pbody{display:grid;grid-template-columns:minmax(0,1fr) 380px;column-gap:24px;align-items:start}
  .page-card .pbody > .cmain{grid-column:1;min-width:0}
  .page-card .pbody > .chist{grid-column:2;min-width:0}
  .page-card .pbody > .chist > .lab{margin-top:14px}
  .page-card .pbody > .chist > .reached,.page-card .pbody > .chist > form{margin-top:0}
  /* Billing: the plan left, receipts or the team right */
  .billingpage .setup{max-width:none;display:grid;grid-template-columns:minmax(0,1fr) 420px;column-gap:24px;align-items:start}
  .billingpage .setup > .bmain{grid-column:1;min-width:0}
  .billingpage .setup > .bside{grid-column:2;min-width:0;display:block}
  .billingpage .setup > .sfoot{grid-column:1/-1}
  .receipts{display:grid;gap:6px;margin-top:8px}
  .receipt{display:flex;gap:12px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line-soft);text-decoration:none;color:var(--ink);font-size:13.5px}
  .receipt b{margin-left:auto}
  .receipt .st{font-size:11.5px;color:var(--grey-d);text-transform:capitalize;width:64px;text-align:right}
  /* Install: the QR left, what the phone will show right */
  .installpage .setup{max-width:none;display:grid;grid-template-columns:minmax(0,1fr) 420px;column-gap:24px;align-items:start}
  .installpage .install-desk{grid-column:1;min-width:0}
  .installpage .install-phone{grid-column:2;min-width:0;display:block}
  .installpage .install-phone::before{content:"What your phone shows";display:block;font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--grey);margin:0 0 10px}
  .installpage .install-phone [data-step]{display:block!important}
}

/* ── The desk's map (round 2, item 3): tiles under our pins ─────────── */
.mmap .mapgl{position:absolute;inset:0}
.mmap.live > svg{display:none}
.mmap.live .maptag{z-index:3}
.mmap.live .maplegend{z-index:3}
.mapctl{position:absolute;right:12px;top:12px;z-index:3;display:flex;gap:2px;background:rgba(255,255,255,.94);border-radius:999px;padding:4px;box-shadow:0 1px 3px rgba(0,0,0,.12)}
.mapctl button{font:inherit;font-size:11.5px;font-weight:700;border:0;background:transparent;border-radius:999px;padding:6px 11px;cursor:pointer;color:var(--grey-d)}
.mapctl button.on{background:var(--ink);color:var(--paper)}
.mpin.gl{position:relative;left:auto;top:auto;transform:none}
.mpin.gl.on{box-shadow:0 0 0 3px rgba(56,202,95,.45),0 1px 3px rgba(0,0,0,.25)}
.mapboxgl-popup-content{font:inherit;font-size:12.5px;border-radius:10px;padding:8px 10px;color:var(--ink)}
.mapboxgl-ctrl-bottom-right{z-index:2}

/* This week's sales (the old Today's column) and a sale page's area (8 October 2026, the parity rule):
   the same rows and the same map at every width. On the phone they follow the page's own content. */
.tside .sechead{font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--grey);margin:0 0 10px}
.wsale{display:flex;gap:12px;align-items:center;background:var(--white);border:1px solid var(--line-soft);border-radius:var(--r);padding:12px 14px;margin-bottom:8px;text-decoration:none;color:var(--ink)}
.wsale .px{width:54px;height:54px;border-radius:12px;background:var(--ink);color:var(--paper);font-size:10px;font-weight:800;letter-spacing:.06em;display:grid;place-items:center;flex:0 0 auto;text-align:center;padding:0 4px;line-height:1.1}
.wsale .px.listed{background:var(--green);color:#0C2A16}
.wsale .px.pending{background:var(--amber);color:#fff}
.wsale .bd{flex:1;min-width:0}
.wsale .bd b{display:block;font-size:14.5px;font-weight:700;letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wsale .bd span{display:block;color:var(--grey);font-size:12.5px;margin-top:2px}
.wsale .n{margin-left:auto;text-align:right;flex:0 0 auto}
.wsale .n b{display:block;font-size:24px;font-weight:800;letter-spacing:-.035em;color:var(--green);line-height:1}
.wsale .n span{font-size:11px;color:var(--grey)}
@media (max-width:1023px){
  .today-shell .tside{margin-top:26px}
  .mmap.near-map{display:block;position:relative;top:auto;flex:none;width:auto;height:240px;margin-top:14px}
  .salepage .near .sechead{font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:rgba(255,255,255,.62);margin:16px 0 10px}
  .salepage .wsale{margin-bottom:8px}
}
@media (min-width:761px) and (max-width:1023px){.salepage .near .sechead{color:var(--grey)}}

/* ── The neighborhood page (round 2, item 4) ────────────────────────── */
@media (min-width:1024px){
  .near-map{height:380px;margin-top:16px;position:relative;flex:none;width:auto}
  .salepage .tstage .pc.hero{aspect-ratio:16/9}   /* the area's map shows in the first screen at 900px tall */
  .salepage .near .sechead{font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--grey);margin:16px 0 10px}
  .salepage .wsale{margin-bottom:8px}
  .near-pick{margin-bottom:14px}
  .neardraft-out{margin-top:12px}
  .neardraft{background:var(--white);border:1px solid var(--line-soft);border-radius:var(--r);padding:12px 14px 4px}
  .neardraft .nd-head{display:flex;flex-direction:column;gap:2px;margin-bottom:6px}
  .neardraft .nd-head b{font-size:15px;font-weight:700;letter-spacing:-.02em}
  .neardraft .nd-head span{font-size:12.5px;color:var(--grey-d)}
  .neardraft .qacts{margin-bottom:10px}
}

/* ── The neighborhood chooser (round 3, item 1) ─────────────────────── */
.search.hoodpick{margin-bottom:10px}
.salepage .tsheet > .search.hoodpick{margin-top:0}

/* ── See it on your phone (the demo, wide screens only; not critical) ───── */
@media (min-width:1024px){
  /* See it on your phone (the demo, wide screens only) */
  .demo-banner .demo-qr-btn.desk-only{display:inline-block;float:right;margin:-3px 0 -3px 12px;padding:5px 11px;border:1px solid rgba(255,255,255,.45);border-radius:999px;background:transparent;color:#fff;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer}
  .demo-banner .demo-qr-btn:hover,.demo-banner .demo-qr-btn[aria-expanded=true]{background:#fff;color:var(--ink)}
  .demo-banner .demo-qr.desk-only{display:block;position:absolute;top:calc(100% + 8px);right:0;width:216px;padding:14px 14px 10px;background:var(--white);color:var(--ink);border:1px solid var(--line-soft);border-radius:var(--r);box-shadow:0 12px 32px -12px rgba(0,0,0,.35);text-align:center;animation:tIn var(--dur-base) var(--ease-out) both}
  .demo-banner .demo-qr[hidden]{display:none}
  .demo-banner .demo-qr img{display:block;width:168px;height:168px;margin:0 auto 8px}
  .demo-banner .demo-qr p{margin:0;font-size:12.5px;line-height:1.4;color:var(--grey-d)}
}

/* ── The first-run guide (22 September): the desk only ─────────────────── */
.guide{display:none}
.qhint{margin:6px 0 10px;padding:10px 12px;border-radius:12px;background:var(--sunken);font-size:13px;line-height:1.4;color:var(--grey-d)}
.sfoot .guide-again{display:none}
@media (min-width:1024px){
  .guide{display:block;position:fixed;right:24px;bottom:24px;width:340px;z-index:60;background:var(--white);border:1px solid var(--line-soft);border-radius:var(--r);box-shadow:0 18px 44px -18px rgba(0,0,0,.4);padding:14px 16px 12px;animation:tIn var(--dur-base) var(--ease-out) both}
  .guide[hidden]{display:none}
  .guide .ghead{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
  .guide .gk{font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--green)}
  .guide .gn{font-size:12px;color:var(--grey)}
  .guide h3{margin:0 0 4px;font-size:16px;font-weight:700;letter-spacing:-.02em}
  .guide p{margin:0;font-size:13.5px;line-height:1.45;color:var(--grey-d)}
  .guide .gextra{margin-top:8px}
  .guide .glink{background:none;border:0;padding:0;font:inherit;font-size:13.5px;font-weight:600;color:var(--ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
  .guide .ggo{display:inline-block;margin-top:8px}
  .guide .gfoot{display:flex;justify-content:flex-end;gap:8px;margin-top:12px}
  .guide .gfoot .b2{padding:8px 12px}
  .guide-ring{position:fixed;z-index:59;pointer-events:none;border:2px solid var(--green);border-radius:14px;box-shadow:0 0 0 4px rgba(56,202,95,.18);animation:breathe 1.6s var(--ease-out) infinite;transition:left var(--dur-base) var(--ease-out),top var(--dur-base) var(--ease-out),width var(--dur-base) var(--ease-out),height var(--dur-base) var(--ease-out)}
  .guide-ring[hidden]{display:none}
  .sfoot .guide-again{display:block;margin:10px auto 0;background:none;border:0;padding:0;font:inherit;font-size:13px;color:var(--grey-d);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
}

/* ── The draft's actions (22 September). The desk-only block lost its grid to the
   generic .desk-only{display:block} rule, so Send to my phone sat at its natural
   width, flush against the draft, with the pair jammed beneath -- and on the phone
   .qacts{display:grid} outranked .desk-only{display:none}, so the desk's two dead
   buttons showed under every draft there. Laid out here on the card's own rhythm
   (the stylesheet has radius tokens, no spacing tokens): 12 after the draft, 10
   between the rows, the primary full width, the pair even. ───────────────── */
.qacts.desk-only{display:none}
@media (min-width:1024px){
  .qacts.desk-only{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin:12px 0 16px}
  .qacts > .btn{width:100%;height:44px}
  .qacts .small{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:10px}
  .qacts .small .b2{width:100%;height:38px;padding:0 12px}
  html.mac .qacts .small .mac-only{display:block}
  .neardraft .qacts{margin-bottom:12px}
  /* the first-run guide keeps clear of the desk panel's buttons */
  body:has(#deskPanel [data-card]) .guide{right:auto;left:230px}
  .alerts-schedule{font-weight:600;color:var(--ink)}
  .sub .dev{white-space:nowrap}
  a.quiet{display:inline-block;margin-top:12px;font-size:13px;color:var(--grey-d);text-decoration:underline;text-underline-offset:3px}
}

/* ── Plans and the guided setups (docs/12-full-build, R1; section 2's rule) ──
   One step per screen: the progress bar, the step's title and words, the one
   button. The plan cards, the renewal terms and the tick, the test panel that
   says it worked, Today's reminder card, and Market's line for Alerts.
   The app's own tokens only. */
.gprog{margin:4px 0 20px}
.gprog .gl{display:flex;justify-content:space-between;align-items:baseline;font-size:12.5px;font-weight:600;color:var(--grey-d);margin-bottom:8px}
.gprog .gl b{color:var(--ink)}
.gbars{display:grid;grid-template-columns:repeat(var(--n),1fr);gap:4px}
.gbars i{height:6px;border-radius:3px;background:var(--line)}
.gbars i.done{background:var(--ink)}
.gbars i.on{background:var(--green)}
.gbars.mini{max-width:150px;margin-top:9px;gap:3px}
.gbars.mini i{height:4px}
.gh{font-size:24px;font-weight:800;letter-spacing:-.035em;line-height:1.2}
.gp{font-size:15px;line-height:1.55;margin-top:8px;color:var(--grey-d)}
.gp b{color:var(--ink);font-weight:600}
.gact{display:flex;align-items:center;gap:18px;margin-top:22px}
.glater{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:22px;padding-top:14px;border-top:1px solid var(--line-soft)}
.gact .quiet,.glater .quiet{background:none;border:0;padding:0;font:inherit;font-size:13.5px;font-weight:600;color:var(--grey-d);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.glater .fine{color:var(--grey)}
/* a 44px tap for Skip for now on the phone, its look unchanged (9 October 2026, found by the seats' scenes) */
.glater .quiet{min-height:44px;display:inline-flex;align-items:center}
.mlsform{margin-top:16px}
.mlsform .more{margin-top:10px}
.gtest{display:flex;gap:14px;align-items:flex-start;margin-top:16px;padding:16px;border-radius:14px;background:var(--white);border:1px solid var(--line)}
.gtest .big{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;background:var(--green);color:var(--white);font-size:20px;font-weight:800}
.gtest.bad .big{background:var(--amber)}
.gtest.wait .big{background:var(--sunken);color:var(--grey-d)}
.gtest b{display:block;font-size:17px;letter-spacing:-.02em;line-height:1.3}
.gtest p{font-size:13.5px;color:var(--grey-d);margin-top:4px;line-height:1.5}
.plansguide .tsheet{padding-bottom:40px}
.authpage.plansguide{max-width:1040px}
.plansint{margin-top:18px;max-width:340px}
.plansint a{position:relative;z-index:1;display:grid;place-items:center;font-size:13px;font-weight:600;color:var(--grey-d);border-radius:9px;text-decoration:none;transition:color .18s}
.plansint a.on{color:var(--white)}
.plancards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:16px}
.plancard{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:18px;display:flex;flex-direction:column}
.plancard.rec{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.plancard .pk{display:flex;align-items:center;gap:8px}
.plancard .pk b{font-size:17px;font-weight:800;letter-spacing:-.02em}
.plancard .pprice{display:flex;align-items:baseline;gap:6px;margin-top:10px}
.plancard .pprice b{font-size:30px;font-weight:800;letter-spacing:-.04em}
.plancard .pprice span{font-size:13px;color:var(--grey)}
.plancard .peq{font-size:12.5px;color:var(--grey-d);margin-top:2px}
.plancard ul{list-style:none;margin:14px 0 16px;padding:0;display:grid;gap:7px;font-size:13.5px;color:var(--grey-d);flex:1}
.plancard li{display:flex;gap:9px;line-height:1.4}
.plancard li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green);margin-top:7px;flex:0 0 auto}
.pgterms{margin-top:16px;padding:16px 18px}
.pgterms p{font-size:14px;line-height:1.55;color:var(--grey-d)}
.pgterms p + p{margin-top:8px}
.consent{display:flex;gap:12px;align-items:flex-start;margin-top:16px;padding:14px 16px;border-radius:var(--r-ctl);background:var(--white);border:1px solid var(--line);font-size:14.5px;font-weight:600;cursor:pointer}
.consent input{width:22px;height:22px;flex:0 0 auto;margin:0;accent-color:var(--ink)}
.consent.need{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.setupcard{display:flex;align-items:center;gap:16px;margin-top:22px;padding:16px 18px;border:1px solid var(--line);border-radius:var(--r);background:var(--white);color:var(--ink);text-decoration:none}
.setupcard .sc{display:block;min-width:0}
.setupcard .k{display:block;font-size:10.5px;font-weight:800;letter-spacing:.1em;color:var(--grey-d)}
.setupcard b{display:block;font-size:15px;margin-top:4px}
.setupcard .m{display:block;font-size:12.5px;color:var(--grey);margin-top:2px}
.setupcard .btn{margin-left:auto;flex:0 0 auto;height:36px;padding:0 14px;font-size:13.5px}
.upbar{display:flex;align-items:center;gap:10px;margin:0 0 14px;padding:10px 14px;border-radius:var(--r-ctl);background:var(--white);border:1px solid var(--line);font-size:13px;color:var(--grey-d);line-height:1.4}
.upbar a{margin-left:auto;font-weight:700;color:var(--ink);white-space:nowrap;text-decoration:none}
@media (max-width: 760px){
  .plancards{grid-template-columns:1fr}
  .gh{font-size:22px}
  .gact{flex-direction:column;align-items:stretch;gap:6px}
  .gact .btn{width:100%}
  .gact .quiet{text-align:center;padding:10px 0}
}

/* ── R3, the new navigation and Today (docs/12-full-build), behind nav_v2. App tokens only. ── */
.tstage .tdate{font-size:14px;color:var(--grey);margin-top:6px}
.tstage .tdate b{color:var(--paper);font-weight:700}
.moremenu{position:relative}
.moremenu summary{list-style:none;cursor:pointer;font-size:17px;font-weight:800;line-height:1;letter-spacing:.05em}
.moremenu summary::-webkit-details-marker{display:none}
.moremenu .mm{position:absolute;right:0;top:calc(100% + 8px);z-index:30;min-width:220px;background:var(--white);border:1px solid var(--line);border-radius:14px;padding:6px;box-shadow:0 12px 30px rgba(0,0,0,.14);display:grid}
.moremenu .mm a,.moremenu .mm button{display:block;text-align:left;padding:11px 12px;border-radius:9px;font:inherit;font-size:14px;font-weight:600;color:var(--ink);background:none;border:0;cursor:pointer}
.nextcard{margin-top:18px;background:var(--white);color:var(--ink);border-radius:20px;padding:16px 18px 18px 22px;position:relative;overflow:hidden}
.nextcard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--green)}
.nextcard .nhead{display:flex;align-items:center;gap:10px;min-height:30px}
.nextcard .k{font-size:11px;font-weight:800;letter-spacing:.12em;color:var(--grey-d)}
.nextcard .ncount{margin-left:auto;font-size:12.5px;color:var(--grey)}
.nextcard .ncount b{color:var(--ink)}
.nextcard .nnext{width:30px;height:30px;border-radius:50%;border:1px solid var(--line);background:var(--white);font-size:17px;line-height:1;color:var(--ink);cursor:pointer}
.nextcard .nitem{display:flex;flex-direction:column;gap:16px;margin-top:6px}
.nextcard .nitem[hidden]{display:none}
.nextcard .ntitle{display:block;font-size:22px;font-weight:800;letter-spacing:-.03em;line-height:1.15}
.nextcard .nsub{display:block;font-size:14px;color:var(--grey-d);margin-top:6px;line-height:1.45}
.nextcard .btn{width:100%}
.todaytabs{margin-bottom:14px}
.seg button .c{margin-left:5px;opacity:.6;font-variant-numeric:tabular-nums}
.tpane[hidden]{display:none}
.tpane .tnote{font-size:12.5px;color:var(--grey);margin:10px 2px 0}
.today-shell.v2 .ready .rhead,.today-shell.v2 .ready .phone,.today-shell.v2 .ready .qhint{display:none}
.today-shell.v2 .ready{margin-bottom:0}
.today-shell.v2 .ready.qnone{display:block}
.today-shell.v2 .setupcard{margin-top:22px}
.srlab{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--grey-d);margin:24px 2px 8px}
.setuprows .tsheet > .srlab:first-of-type{margin-top:6px}
.srows{background:var(--white);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.srow{display:flex;align-items:center;gap:12px;min-height:64px;padding:12px 16px;color:var(--ink);text-decoration:none}
.srow + .srow{border-top:1px solid var(--line-soft)}
.srb{flex:1;min-width:0}
.srb b{display:block;font-size:15px;font-weight:700;letter-spacing:-.01em}
.srs{display:block;font-size:13px;color:var(--grey);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.srst{flex:0 0 auto;font-size:12.5px;font-weight:700}
.srst.done{display:inline-flex;align-items:center;gap:6px;color:var(--ink)}
.srst.done i{width:18px;height:18px;border-radius:50%;background:var(--green);color:var(--white);display:grid;place-items:center;font-style:normal;font-size:10.5px}
.srst.saved,.srst.resume,.srst.start{font-size:10.5px;letter-spacing:.08em;padding:3px 8px;border-radius:6px;border:1px solid var(--line);color:var(--grey-d);background:var(--white)}
.srst.saved,.srst.resume{border-color:var(--amber);color:var(--ink)}
.srow .chev{flex:0 0 auto;color:var(--grey);font-size:19px;line-height:1}
.setupone .backlink{display:inline-block;font-size:13px;font-weight:600;color:inherit;opacity:.7;margin-bottom:8px;text-decoration:none}
.setupone .setup .sblock > .lab{display:none}
.atiles{margin-bottom:18px}
/* Today's fixes (4 October): three tabs, Due today's rows, the numbers' one line, This week on a wide desk */
.todaytabs button{line-height:1.15;padding:0 4px}
.row.task{padding-left:14px}
.row.task .tic{flex:0 0 auto;width:30px;height:30px;border-radius:9px;background:var(--sunken);border:1px solid var(--line);display:grid;place-items:center;color:var(--grey-d)}
.row.task .rmain{margin-left:0}
.row.task .ago.alert{color:var(--ink);font-weight:700}
.numsline{display:flex;align-items:center;gap:10px;margin:14px 2px 0;font-size:13px;color:var(--grey-d);text-decoration:none;white-space:nowrap}
.numsline .nl{min-width:0;overflow:hidden;text-overflow:ellipsis}
.numsline b{color:var(--ink);font-weight:700}
.numsline .dot{color:var(--grey);margin:0 2px}
.numsline .go{flex:0 0 auto;margin-left:auto;display:inline-flex;align-items:center;gap:5px;color:var(--grey);font-weight:600}
.numsline .chev{font-size:18px;line-height:1}
.tweek{display:none}
.tweek .sechead{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--grey-d);margin:0 2px 8px}
.tweek .sechead:not(:first-child){margin-top:24px}
.wkcard{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px}
.wknum{display:flex;align-items:baseline;gap:7px}
.wknum b{font-size:34px;font-weight:800;letter-spacing:-.04em;line-height:1}
.wknum span{font-size:14px;color:var(--grey-d)}
.wkbar{height:8px;border-radius:99px;background:var(--sunken);overflow:hidden;margin:12px 0 10px}
.wkbar i{display:block;height:100%;background:var(--green);border-radius:99px}
.wkfine{font-size:12.5px;color:var(--grey)}
.wktasks{background:var(--white);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.wktask{display:block;padding:12px 16px;color:var(--ink);text-decoration:none}
.wktask + .wktask{border-top:1px solid var(--line-soft)}
.wktask b{display:block;font-size:14px;font-weight:600;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wktask span{display:block;font-size:12.5px;color:var(--grey);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wkempty{font-size:13.5px;color:var(--grey);margin:0 2px}
.tweek .wksoon{margin-top:24px}
.wksoon p{font-size:13px;line-height:1.45;color:var(--grey-d);margin:0 2px 8px}
.wksoon b{color:var(--ink);font-weight:700}
@media (max-width:400px){.todaytabs button{font-size:12px;letter-spacing:-.01em}}
.desk .rsubs{display:none}
@media (min-width:761px){
  .tstage .tdate b{color:var(--ink)}
  .today-shell.v2 .tsheet{display:block}
  .today-shell.v2 .tmain,.setuprows .tsheet,.setupone .tsheet{max-width:820px}
  .nextcard{max-width:820px}
  .nextcard .nitem{flex-direction:row;align-items:center;justify-content:space-between}
  .nextcard .ntitle{font-size:20px}
  .nextcard .btn{width:auto;flex:0 0 auto}
}
@media (min-width:1024px){
  .desk .rsubs{display:flex;flex-direction:column;gap:1px;margin:0 0 6px 39px}
  .desk .rsub{font-size:12.5px;font-weight:600;color:var(--grey);padding:6px 8px;border-radius:8px;text-decoration:none}
}
@media (min-width:1200px){
  /* the width used: Today left, This week right, from the top */
  .today-shell.v2{display:grid;grid-template-columns:minmax(0,1fr) 320px;grid-template-rows:auto 1fr;column-gap:32px;align-items:start;max-width:1200px}
  .today-shell.v2 > .tstage{grid-column:1;grid-row:1;min-width:0}
  .today-shell.v2 > .tsheet{grid-column:1;grid-row:2;min-width:0}
  .today-shell.v2 > .tweek{display:block;grid-column:2;grid-row:1 / span 2;padding-top:28px;min-width:0}
  .today-shell.v2 .tmain,.today-shell.v2 .nextcard{max-width:none}
}
@media (hover:hover){
  .moremenu .mm a:hover,.moremenu .mm button:hover{background:var(--sunken)}
  .desk .rsub:hover{color:var(--paper)}
  .wktask:hover{background:var(--sunken)}
  .numsline:hover .go{color:var(--ink)}
}

/* ── R4, Market on the desk and the phone (docs/12-full-build), behind market_v2. App tokens only. ── */
.m2bar{margin:0 0 14px}
.m2q{position:relative;margin:0 0 10px}
.m2q .mg{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:var(--grey);pointer-events:none}
.m2q input{width:100%;height:48px;border-radius:14px;border:1px solid var(--line);background:var(--white);padding:0 14px 0 40px;font:inherit;font-size:15px;color:var(--ink);-webkit-appearance:none;appearance:none}
.m2q input:focus{outline:none;border-color:var(--ink)}
.m2chips{margin:0 -20px;padding:2px 20px 6px}
.m2chips .chip{height:44px;padding:0 16px;font-size:14.5px;font-weight:600;border-radius:999px;background:var(--white)}
.m2chips .chip.on{background:var(--ink);border-color:var(--ink);color:var(--white)}
.m2chips .m2near.on{background:var(--green);border-color:var(--green);color:#0C2A16}
.m2chips .m2near .sep{opacity:.55}
.m2chips .m2drop i{font-style:normal;font-size:10px;opacity:.65}
.m2chips .m2drop.set{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.m2chips .chip .c{margin-left:2px;opacity:.6}
.m2chips .m2d{display:none}
.m2row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:6px}     /* "All homes · 1,240" can wrap rather than push List and Map off a small phone */
.m2n{font-size:17px;font-weight:800;letter-spacing:-.02em;margin-right:auto;white-space:nowrap}
.m2save{display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 12px;border-radius:14px;border:1px solid var(--line);background:var(--white);font:inherit;font-size:14.5px;font-weight:600;color:var(--ink);cursor:pointer}
.m2save.saved{border-color:var(--green)}
.m2save.saved svg{color:var(--green)}
.m2view{width:120px;height:52px;flex:0 0 auto}      /* buttons 44px tall inside the border and padding */
.m2sort{display:none}
.m2{display:block}
.m2map{display:none}
.m2[data-view=map] .m2map{display:block;position:relative;top:auto;flex:none;width:100%;height:min(54dvh,456px);min-height:300px}
.m2[data-view=map] .m2grid{display:none}
.m2mapdisc{display:none}
.m2[data-view=map] + .m2mapdisc{display:block}
.m2grid{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;align-content:start}
.hcard{position:relative;background:var(--white);border:1px solid var(--line-soft);border-radius:var(--r);overflow:hidden;transition:border-color .15s,box-shadow .15s}
.hcard[hidden]{display:none}
.hcard .hlink{position:absolute;inset:0;z-index:1;border-radius:inherit}
.hcard .himg{position:relative;aspect-ratio:16/10;background:var(--sunken) center/cover no-repeat}
.himg.ink,.hphoto.ink{background:linear-gradient(160deg,#19191B 0%,#1E2A22 55%,#1F4D33 100%)}
.hbadge{position:absolute;left:12px;top:12px;z-index:2;font-size:11px;font-weight:800;letter-spacing:.08em;line-height:1;padding:6px 8px;border-radius:7px;background:var(--ink);color:var(--white)}
.hbadge.active{background:var(--green);color:#0C2A16}
.hbadge.pending{background:var(--amber);color:var(--white)}
.hbadge.soon{background:var(--white);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.hbadge.record,.hbadge.pocket,.hbadge.off{background:var(--white);color:var(--ink)}
.hplus{position:absolute;right:12px;top:12px;z-index:2;width:44px;height:44px;border-radius:50%;border:0;background:var(--white);color:var(--ink);display:grid;place-items:center;box-shadow:0 4px 14px rgba(0,0,0,.18);cursor:pointer}
.hplus .k{display:none}
.hplus.on{background:var(--green)}
.hplus.on .p{display:none}
.hplus.on .k{display:block}
.hbody{padding:14px 16px 15px}
.hr1{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.hprice{font-size:24px;font-weight:800;letter-spacing:-.035em;line-height:1.1}
.hwhen{font-size:12.5px;color:var(--grey);white-space:nowrap}
.haddr{font-size:15px;font-weight:600;letter-spacing:-.015em;margin-top:6px}
.hline{font-size:13px;color:var(--grey);margin-top:3px}
.hnear{position:relative;z-index:2;display:flex;align-items:center;gap:10px;margin-top:12px;padding:10px 12px;border-radius:12px;background:rgba(56,202,95,.1);color:var(--ink);text-decoration:none}
.hnear .n{flex:0 0 auto;width:24px;height:24px;border-radius:50%;background:var(--green);color:var(--white);display:grid;place-items:center;font-size:12px;font-weight:800}
.hnear .t{min-width:0}
.hnear .t b{display:block;font-size:13.5px;font-weight:700}
.hnear .t .w{display:block;font-size:12.5px;color:var(--grey-d);margin-top:2px}
.hnear.none{background:var(--sunken);color:var(--grey)}
.hnear.none .n{background:rgba(0,0,0,.14);color:var(--grey-d)}
.hnear.none .t b{font-weight:500}
.hby{font-size:12px;color:var(--grey);margin-top:10px}
/* The CRMLS licence (docs/12-full-build, checklist item 3; RECORE 8.K): an MLS photo is shown whole, never
   cropped or stretched. Its frame takes the photo's own shape (4:3, CRMLS's usual one, until it loads), so
   it fills edge to edge with no bands; object-fit: contain stays as the guard. Nothing sits over it: the badge
   and + move to a slim strip above. Only MLS photos; the gradient, logos and headshots keep their look. */
.hstrip{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px;padding:0 2px 0 12px;background:var(--white);pointer-events:none}
.hstrip > *{pointer-events:auto}
.hstrip .hbadge{position:static}
.hstrip .hplus{position:relative;right:auto;top:auto;box-shadow:none;background:radial-gradient(circle,var(--sunken) 16px,transparent 16.5px)}
.hstrip .hplus.on{background:radial-gradient(circle,var(--green) 16px,transparent 16.5px)}
.hcard .himg.photo,.hphoto.photo{aspect-ratio:auto;height:auto;background:var(--white)}
.himg.photo img,.hphoto.photo img{display:block;width:100%;height:auto;aspect-ratio:auto 4/3;object-fit:contain}
.hgallery.mls{background:var(--white);border:1px solid var(--line-soft);border-radius:var(--r);overflow:hidden}
.hgallery.mls .hphoto.photo{border-radius:0}
.hstrip.page{padding:6px 8px 6px 14px;min-height:56px}
.hstrip.page .hpill{position:static;box-shadow:none;background:var(--sunken)}
.hstrip.page .hpill[aria-pressed=true]{background:var(--green)}
/* Add a sale or listing: the house's facts, three across (0042) */
.facts3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.facts3 label{display:block;min-width:0}
.facts3 span{display:block;font-size:12.5px;color:var(--grey-d);margin:0 0 4px}
.facts3 input{width:100%;min-width:0}
/* a home with nobody of the agent's in its ZIP: the same card, one grey line instead of the green box */
.hfar{font-size:13px;color:var(--grey);margin-top:10px}
.hcard.lit{border-color:var(--green);box-shadow:0 0 0 2px rgba(56,202,95,.35)}
.m2none{background:var(--white);border:1px solid var(--line-soft);border-radius:var(--r);padding:22px 18px;font-size:14px;color:var(--grey-d);line-height:1.5}
.m2none b{color:var(--ink)}
.m2none[hidden]{display:none}
.linklike{font:inherit;color:var(--ink);font-weight:700;background:none;border:0;padding:0;text-decoration:underline;cursor:pointer}
.m2mini{position:absolute;left:10px;right:10px;bottom:10px;z-index:6}
.m2mini[hidden]{display:none}
.m2mini .hcard{display:flex;align-items:stretch;box-shadow:0 10px 30px rgba(0,0,0,.2)}
.m2mini .hcard .himg{position:static;flex:0 0 104px;aspect-ratio:auto;min-height:108px}
.m2mini .hcard .hbadge,.m2mini .hcard .hwhen,.m2mini .hcard .hby,.m2mini .hnear .n,.m2mini .hnear .w{display:none}
.m2mini .hcard .hplus{top:50%;right:10px;transform:translateY(-50%)}
.m2mini .hcard .hbody{flex:1;min-width:0;padding:11px 64px 11px 12px}
.m2mini .hcard .hstrip{display:contents}
.m2mini .hcard .himg.photo{align-self:center;aspect-ratio:auto;min-height:0}
.m2mini .hcard .hstrip .hplus{position:absolute;width:44px;height:44px;background:var(--white);box-shadow:0 4px 14px rgba(0,0,0,.18)}
.m2mini .hcard .hstrip .hplus.on{background:var(--green)}
.m2mini .hprice{font-size:19px}
.m2mini .haddr{margin-top:3px;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m2mini .hline{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m2mini .hnear{margin-top:4px;padding:0;background:none}
.m2mini .hnear .t b{font-size:12.5px}
.mpin{min-height:24px}
/* green numbered pins for homes near the agent's clients, plain grey dots for the rest; the dot keeps a 22px target */
.mpin.dot{width:22px;min-width:22px;height:22px;min-height:22px;padding:0;background:transparent;box-shadow:none}
.mpin.dot::before{content:"";position:absolute;left:5px;top:5px;width:12px;height:12px;box-sizing:border-box;border-radius:50%;background:var(--grey);border:2px solid var(--white);box-shadow:0 1px 3px rgba(0,0,0,.3)}
.mpin.dot.on::before{background:var(--ink)}
.maplegend i.d{background:var(--grey);box-shadow:0 0 0 1.5px var(--white)}
.m2n .sep{opacity:.45;font-weight:600}
.m2map .maplegend,.m2map .maptag{pointer-events:none}     /* labels only: a pin under them still takes the tap */
/* Pressed, a pin keeps its centre: the general button:active scale replaced the translate, so a
   pressed pin jumped half its size and the tap landed on the map instead (R4, both widths). */
.mpin:active,.mpin.pressed{transform:translate(-50%,-50%) scale(.96)}
.mpin.gl:active,.mpin.gl.pressed{transform:scale(.96)}
.m2mini .hcard .hplus:active,.m2mini .hcard .hplus.pressed{transform:translateY(-50%) scale(.96)}
.mpin.unpress,.m2mini .hcard .hplus.unpress{animation:none}     /* the release spring's keyframes would drop the centring too */
/* the sheets: from the bottom on the phone, a card in the middle on the desk */
.m2sheet{position:fixed;inset:0;z-index:45;display:flex;align-items:flex-end;justify-content:center;margin:0}
main.wrap > .m2sheet:not(.page-shell):not(.today-shell){max-width:none}   /* outranks the desk's reading width for main's children */
.m2sheet[hidden]{display:none}
.m2scrim{position:absolute;inset:0;background:rgba(0,0,0,.42);animation:m2fade var(--dur-fast) var(--ease-out) both}
.m2panel:focus{outline:none}
.m2panel{position:relative;width:100%;max-height:92dvh;background:var(--paper);color:var(--ink);border-radius:28px 28px 0 0;display:flex;flex-direction:column;animation:m2up var(--dur-base) var(--ease-out-expo) both}
.m2grab{flex:0 0 auto;width:40px;height:5px;border-radius:99px;background:rgba(0,0,0,.18);margin:10px auto 0}
.m2scroll{overflow-y:auto;-webkit-overflow-scrolling:touch;padding:14px 20px 18px}
.m2panel .k{font-size:11px;font-weight:800;letter-spacing:.12em;color:var(--grey-d)}
.m2panel h2{font-size:24px;font-weight:800;letter-spacing:-.035em;line-height:1.15;margin:8px 0 4px}
.m2panel section{padding:16px 0;border-top:1px solid var(--line)}
.m2panel section:first-of-type{border-top:0}
.m2panel .lab{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--grey-d);margin:0 0 10px}
.m2panel .sub{font-size:13.5px;color:var(--grey-d);margin:14px 0 8px}
.m2panel .sub:first-of-type{margin-top:0}
.m2opts{display:flex;flex-wrap:wrap;gap:8px}
.m2opts .opt{min-height:44px;padding:0 16px;border-radius:12px;border:1px solid var(--line);background:var(--white);font:inherit;font-size:14.5px;font-weight:600;color:var(--ink);cursor:pointer}
.m2opts .opt.on{background:var(--ink);border-color:var(--ink);color:var(--white)}
.m2pair{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:10px;align-items:center}
.m2pair span{color:var(--grey);font-size:13px}
.m2pair .fld,.m2panel .fld{height:48px;width:100%;min-width:0;font-size:15px}
.m2foot{flex:0 0 auto;display:grid;grid-template-columns:1fr 1.4fr;gap:10px;padding:12px 20px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--line)}
.m2foot .btn{height:48px;width:100%}
.m2panel .lab2{display:block;font-size:13.5px;color:var(--grey-d);margin:16px 0 6px}
.m2panel .k2{font-size:11px;font-weight:800;letter-spacing:.12em;color:var(--grey-d);margin:18px 0 10px}
.m2panel .fine{font-size:13px;color:var(--grey);line-height:1.5;margin:12px 0 14px}
.m2panel .wide{width:100%;height:50px}
.m2del{margin-top:8px;background:transparent!important;border-color:transparent!important;color:var(--grey-d)!important}
.m2del[hidden]{display:none}
body.m2open{overflow:hidden}
@keyframes m2up{from{transform:translateY(100%)}to{transform:none}}
@keyframes m2pop{from{transform:translateY(12px) scale(.98);opacity:0}to{transform:none;opacity:1}}
@keyframes m2fade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.m2panel,.m2scrim{animation:none}}
/* the picks: + on a home, then "3 homes · Create list" (mockup screen 26) */
.m2picks{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(env(safe-area-inset-bottom) + 92px);z-index:36;display:flex;align-items:center;gap:14px;width:min(560px,calc(100vw - 32px));background:var(--ink);color:var(--white);border-radius:999px;padding:8px 8px 8px 22px;box-shadow:0 12px 30px rgba(0,0,0,.25)}
.m2picks[hidden]{display:none}
body.m2hasbar .m2grid,body.m2hasbar .hgrid{padding-bottom:76px}
.m2picks .n{font-size:16px;font-weight:700;margin-right:auto}
.m2picks .m2go{height:44px;padding:0 20px;border-radius:999px;background:var(--green);border-color:var(--green);color:var(--ink);font-weight:700}
.m2plist{display:grid;gap:8px;margin:14px 0 4px}
.m2plist .pk{display:flex;align-items:center;gap:10px;background:var(--white);border:1px solid var(--line-soft);border-radius:14px;padding:10px 12px}
.m2plist .pk a{flex:1;min-width:0;color:var(--ink);text-decoration:none}
.m2plist .pk b{display:block;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m2plist .pk span{display:block;font-size:12.5px;color:var(--grey);margin-top:1px}
/* a home's page (mockup screens 23 and 24) */
.homepage .hello{align-items:center;gap:12px}
.homepage .hello .hi{min-width:0;overflow-wrap:anywhere}
.hacts{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.hadd{display:none}
.hadd .k,.hpill .k{display:none}
.hadd[aria-pressed=true] .p,.hpill[aria-pressed=true] .p{display:none}
.hadd[aria-pressed=true] .k,.hpill[aria-pressed=true] .k{display:inline}
.hphoto{position:relative;aspect-ratio:4/3;border-radius:var(--r);background:var(--sunken) center/cover no-repeat;overflow:hidden}
.hphoto .hbadge{left:14px;top:14px}
.hpill{position:absolute;right:12px;top:12px;z-index:2;height:44px;padding:0 16px;border-radius:999px;border:0;background:var(--white);color:var(--ink);font:inherit;font-size:14.5px;font-weight:700;box-shadow:0 6px 18px rgba(0,0,0,.18);cursor:pointer}
.hpill[aria-pressed=true]{background:var(--green)}
.hnophoto{position:absolute;left:14px;bottom:12px;font-size:11.5px;color:rgba(255,255,255,.72)}
.hinfo{margin-top:16px}
.hbig{font-size:34px;font-weight:800;letter-spacing:-.04em;line-height:1.05}
.haddr2{font-size:17px;font-weight:600;letter-spacing:-.015em;margin-top:8px}
.hplace{font-size:14px;color:var(--grey);margin-top:4px}
.hfacts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:16px;background:var(--white);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.hfacts div{padding:14px;border-right:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);min-width:0}
.hfacts div:nth-child(3n){border-right:0}
.hfacts div:nth-last-child(-n+3){border-bottom:0}
.hfacts b{display:block;font-size:16px;font-weight:800;letter-spacing:-.02em;overflow-wrap:anywhere}
.hfacts span{display:block;font-size:12.5px;color:var(--grey);margin-top:3px}
.hnear.big{width:100%;border:0;font:inherit;text-align:left;cursor:pointer;margin-top:14px;padding:14px 16px;border-radius:var(--r)}
.hnear.big .n{width:34px;height:34px;font-size:14px}
.hnear.big .t b{font-size:15.5px}
.hnear.big .chev{margin-left:auto;color:var(--grey-d);font-size:22px;line-height:1}
.habout{font-size:16px;font-weight:700;letter-spacing:-.01em;margin:22px 0 6px}
.hremarks{font-size:15px;line-height:1.6;color:var(--grey-d)}
.hdisc{font-size:11.5px;line-height:1.55;color:var(--grey);margin-top:18px}
.ssrow{gap:10px}
.ssrow .srb{display:block;color:var(--ink);text-decoration:none}
.ssrow form{flex:0 0 auto}
@media (min-width:640px) and (max-width:1023px){
  .m2grid{grid-template-columns:1fr 1fr}
}
@media (min-width:761px){
  .m2chips{margin:0;padding:2px 0 6px}
}
@media (min-width:1024px){
  .m2bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px}
  .m2q{flex:0 0 312px;margin:0}
  .m2q input{height:40px;border-radius:12px;font-size:14px}
  .m2chips{flex:1 1 auto;min-width:0;flex-wrap:wrap;overflow:visible;padding:0}
  .m2chips .chip{height:40px;padding:0 14px;font-size:13.5px}
  .m2chips .m2p{display:none}
  .m2chips .m2d{display:inline-flex}
  .m2row{flex:1 0 100%;margin-top:2px}
  .m2save{height:40px}
  .m2view{display:none}
  .m2sort{display:inline-flex;align-items:center;gap:6px}
  .m2{display:flex;gap:16px;align-items:flex-start}
  .m2map{display:block;flex:0 0 46%;position:sticky;top:18px;height:min(612px,calc(100dvh - 36px))}
  .m2mini{display:none!important}
  .m2grid{flex:1;min-width:0;grid-template-columns:1fr 1fr;gap:12px}
  .m2mapdisc,.m2[data-view=map] + .m2mapdisc{display:none}
  .hcard .himg{aspect-ratio:16/9}
  .hprice{font-size:20px}
  .m2sheet{align-items:center}
  .m2panel{width:min(560px,92vw);border-radius:24px;max-height:86vh;animation-name:m2pop}
  .m2grab{display:none}
  .m2picks{bottom:28px;left:calc(50% + 103px);width:auto}
  .hadd{display:inline-flex}
  .hpill{display:none}
  .hgrid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:28px;align-items:start;max-width:1200px}
  .hinfo{margin-top:0}
  .hphoto{aspect-ratio:3/2}
  .hphoto.photo{aspect-ratio:auto}
  .hfacts b{font-size:18px}
}
@media (hover:hover){
  .hcard:hover{border-color:var(--line)}
  .m2opts .opt:hover{border-color:var(--ink)}
  .m2save:hover,.m2chips .chip:hover{border-color:var(--ink)}
}

/* ── R5, Home lists (docs/12-full-build, item 21), behind home_lists. App tokens only. ── */
/* Homes | Lists at the top of Market on the phone */
.mlseg{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;margin:2px 0 16px;border-radius:14px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12)}
.mlseg a{display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;border-radius:11px;color:rgba(255,255,255,.72);font-size:15px;font-weight:700;text-decoration:none}
.mlseg a.on{background:var(--paper);color:var(--ink)}
.mlseg a span{font-weight:600;opacity:.6}
/* 761px and up: the rail is in and the stage is light, so a segment (Homes | Lists, People | Pipeline |
   Saved filters) reads dark on light, at a reading width on the desk (8 October 2026: the segments show at
   every width). Between 761 and 1023 the "3 homes · Create list" bar sits low beside the 56px rail. */
@media (min-width:761px){
  .mlseg{background:rgba(0,0,0,.05);border-color:var(--line-soft)}
  .mlseg a{color:var(--grey-d)}
  .mlseg a.on{background:var(--white);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.06)}
}
@media (min-width:1024px){.mlseg{max-width:420px}}
@media (min-width:761px) and (max-width:1023px){
  .m2picks{bottom:28px;left:calc(50% + 28px);width:min(560px,calc(100vw - 56px - 32px))}
}
/* Lists */
.lcards{display:grid;gap:12px;max-width:820px}
.lcard{background:var(--white);border:1px solid var(--line-soft);border-radius:var(--r)}
.lmain{display:block;padding:16px 16px 12px;color:var(--ink);text-decoration:none}
.lr1{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.lr1 b{font-size:17px;font-weight:800;letter-spacing:-.02em;min-width:0}
.lwhen{font-size:12.5px;color:var(--grey);white-space:nowrap}
.lfor{display:block;font-size:14px;color:var(--grey-d);margin-top:3px}
.lpills{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.lpill{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:999px;background:var(--sunken);font-size:13px;font-weight:600;color:var(--grey-d)}
.lpill.g{background:rgba(56,202,95,.14);color:#1F6B3A}
.lpill.g i{width:7px;height:7px;border-radius:50%;background:var(--green)}
.lfoot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px 12px;border-top:1px solid var(--line-soft);font-size:13px;color:var(--grey)}
.lfoot form{margin:0}
.lfoot.draft{justify-content:flex-end}      /* a draft's card: Draft above, Finish it here, nothing else */
.lfoot .btn{min-height:40px;height:40px;padding:0 14px;font-size:13.5px}
.lempty{font-size:14px;color:var(--grey-d);line-height:1.5}
.lempty b{color:var(--ink)}
.lhow{margin-top:14px;max-width:820px}
.lhow a{color:var(--ink)}
.lsample{display:grid;gap:14px}
.lpitch h2{font-size:19px;font-weight:800;letter-spacing:-.025em;line-height:1.25;margin:10px 0 0}
.lpitch ul{margin:12px 0 16px;padding-left:18px;font-size:14px;line-height:1.55;color:var(--grey-d)}
.lpitch li{margin:4px 0}
.lpitch .fine{margin-top:10px}
.lpk{display:flex;justify-content:space-between;align-items:center}
.lpk .k{font-size:11px;font-weight:800;letter-spacing:.12em;color:var(--grey-d)}
/* the client's page, framed: the preview, the sample, the profile's foot */
.lframe{background:var(--sunken);border:1px solid var(--line-soft);border-radius:var(--r);padding:14px;display:flex;justify-content:center}
.lframe iframe{display:block;width:390px;max-width:100%;height:720px;border:0;border-radius:12px;background:#FBFAF7;box-shadow:0 10px 30px -14px rgba(0,0,0,.35)}
.lframe.wide iframe{width:100%;height:560px}
/* the page at a desk's width, scaled to the frame (followap.js sets --s) */
.lframe.scaled{display:block;position:relative;overflow:hidden;padding:14px}
.lframe.scaled iframe{width:1120px;max-width:none;height:880px;transform-origin:0 0;transform:scale(var(--s,.5));border-radius:16px}
.pform{margin-top:16px}
.pfootframe iframe{height:640px}
/* one list */
.ltext{margin-bottom:14px}
.ltiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;max-width:820px}
.ltiles div{background:var(--white);border:1px solid var(--line-soft);border-radius:var(--r);padding:14px}
.ltiles b{display:block;font-size:24px;font-weight:800;letter-spacing:-.03em}
.ltiles span{display:block;font-size:12.5px;color:var(--grey);margin-top:2px}
.ltiles .g b{color:#2F9E52}
.ltable{margin-top:12px;max-width:820px;padding:6px 16px}
.ltable table{width:100%;border-collapse:collapse;font-size:14px}
.ltable th{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--grey);text-align:left;padding:10px 0 8px;border-bottom:1px solid var(--line-soft)}
.ltable td{padding:12px 0;border-bottom:1px solid var(--line-soft);vertical-align:top}
.ltable tr:last-child td{border-bottom:0}
.ltable .r{text-align:right;padding-left:12px;white-space:nowrap}
.ltable .li{display:inline-flex;align-items:center;gap:6px;font-weight:700}
.ltable .li i,.llink i{width:8px;height:8px;border-radius:50%;background:var(--green);flex:0 0 auto}
.llink{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 14px;margin-top:12px;max-width:820px;padding:14px 16px}
.llink p{flex:1 1 260px}
.llink p{display:flex;align-items:baseline;gap:10px;margin:0;font-size:14px;line-height:1.5}
.llink i{display:inline-block;transform:translateY(-1px)}
.llink i.off{background:var(--grey)}
.llink form{margin:0;flex:0 0 auto}
.lwhat{max-width:820px;padding:4px 16px}
.lw{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--line-soft)}
.lw:last-child{border-bottom:0}
.lw .ic{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto;background:var(--sunken);color:var(--grey-d)}
.lw.interested .ic{background:rgba(56,202,95,.14);color:#2F9E52}
.lw b{display:block;font-size:14.5px}
.lw span{display:block;font-size:13.5px;color:var(--grey-d);margin-top:2px}
.lw em{display:block;font-style:normal;font-size:12.5px;color:var(--grey);margin-top:3px}
/* the builder */
.lbgrid{display:block}
.lbsteps{min-width:0;max-width:600px}
.lbprev{display:none}
.lsearch{position:relative;margin:16px 0 10px}
.lsearch .mg{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--grey);pointer-events:none}
.lsearch .fld{height:48px;padding-left:38px;border-radius:14px;margin:0;font-size:15px}
.lpick{background:var(--white);border:1px solid var(--line-soft);border-radius:var(--r);overflow:hidden}
.lpr{display:flex;align-items:center;gap:14px;padding:14px 16px;border-bottom:1px solid var(--line-soft);cursor:pointer;min-height:56px}
.lpr:last-child{border-bottom:0}
.lpr input{appearance:none;-webkit-appearance:none;flex:0 0 auto;width:24px;height:24px;margin:0;border-radius:50%;border:2px solid var(--line);background:var(--white)}
.lpr input:checked{border:7px solid var(--ink)}
.lpt{min-width:0}
.lpt b{display:block;font-size:15px;font-weight:700}
.lpt span{display:block;font-size:13px;color:var(--grey);margin-top:1px}
.lnone{padding:14px 16px;margin:0}
.lthumbs{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:13px;font-weight:600;color:var(--grey-d)}
/* The builder's way forward below the desk width (5 October 2026): "3 homes · Next" pinned just above the tab bar on
   every step, as Market's tray is, so the step's button is never under the fold. It takes the homes strip and the
   step's main button with it; Back and the rest stay with the step. On the desk the buttons sit beside the preview. */
.lbbar{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(env(safe-area-inset-bottom) + 92px);z-index:36;display:flex;align-items:center;gap:12px;width:min(560px,calc(100vw - 32px));background:var(--ink);color:var(--white);border-radius:999px;padding:8px 8px 8px 12px;box-shadow:0 12px 30px rgba(0,0,0,.25)}
.lbbar .lbn{display:flex;align-items:center;margin-right:auto;font-size:16px;font-weight:700;white-space:nowrap;min-width:0}
.lbbar .lbn img,.lbbar .lbn i{flex:0 0 auto;width:30px;height:30px;border-radius:8px;object-fit:cover;border:2px solid var(--ink);margin-left:-9px;background:linear-gradient(160deg,#19191B 0%,#1E2A22 55%,#1F4D33 100%)}
.lbbar .lbn img:first-child,.lbbar .lbn i:first-child{margin-left:0}
.lbbar .lbn b{margin-left:10px}
.lbbar .lbgo{flex:0 0 auto;height:44px;min-height:44px;padding:0 20px;border-radius:999px;background:var(--green);border-color:var(--green);color:var(--ink);font-weight:700}
.lbbar .lbgo[disabled]{opacity:.45}
@media (max-width:1023px){
  .lbuild .lbact .lbmain,.lbuild .lthumbs{display:none}
  .lbuild .tsheet{padding-bottom:84px}       /* the last field scrolls clear of the bar */
}
@media (min-width:761px) and (max-width:1023px){
  .lbbar{bottom:28px;left:calc(50% + 28px);width:min(560px,calc(100vw - 56px - 32px))}
}
.lthumbs img,.lthumbs .ink{width:64px;height:46px;border-radius:9px;object-fit:cover;background:var(--sunken)}
.lthumbs .ink,.lhome .ink{background:linear-gradient(160deg,#19191B 0%,#1E2A22 55%,#1F4D33 100%)}
.lhome{display:flex;align-items:center;gap:12px;margin:16px 0 4px;padding:10px;background:var(--white);border:1px solid var(--line-soft);border-radius:var(--r)}
.lhome img,.lhome .ink{width:76px;height:56px;border-radius:10px;object-fit:cover;flex:0 0 auto}
.lht{min-width:0;flex:1}
.lht b{display:block;font-size:15px;font-weight:700}
.lht span{display:block;font-size:13px;color:var(--grey);margin-top:2px}
.lhome .quiet{flex:0 0 auto;background:none;border:0;font:inherit;font-size:13px;font-weight:600;color:var(--grey-d);text-decoration:underline;text-underline-offset:3px}
.lrow2,.lrow3{display:grid;grid-template-columns:minmax(0,1fr);gap:0 12px}
.ldisc{margin-top:12px;padding:12px;border-radius:12px;background:#FDF4E7;color:var(--ink)}
.ldisc .muted{display:block;margin-top:2px;color:var(--grey-d);line-height:1.45}
.lbact{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:22px}
.lbact.desk-only{display:none}
.lbact .quiet,.lsendacts .quiet,.lalready .quiet{background:none;border:0;padding:0;font:inherit;font-size:14px;font-weight:600;color:var(--grey-d);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.lbact .lrm{margin-left:auto;color:var(--grey)}
.lmove{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:14px}
.lmove .quiet{background:none;border:0;padding:0;font:inherit;font-size:14px;font-weight:600;color:var(--grey-d);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.lmove .muted{font-size:13px;color:var(--grey)}
.lsend{margin-top:16px;padding:14px 16px}
.lsend .to{font-size:12.5px;color:var(--grey)}
.lsend p{margin:6px 0 0;font-size:15.5px;line-height:1.5;overflow-wrap:anywhere}
.lsend u{font-weight:600;text-underline-offset:3px}
.lsendacts{display:grid;gap:14px;justify-items:center;margin-top:18px}
.lalready{display:flex;align-items:center;gap:8px;margin-top:18px}
.lnotyet{margin-top:10px}
/* the agent's own listings */
.osec{margin-bottom:12px}
.osec .lab{margin-top:16px}
.ownform .m2opts{gap:8px}
.ownform .m2opts .opt{display:inline-flex;align-items:center}
.ownform .m2opts .opt input{position:absolute;opacity:0;pointer-events:none}
.ocheck{display:flex;gap:10px;align-items:flex-start;margin-top:14px;font-size:13.5px;color:var(--grey-d);line-height:1.45}
.ocheck input{margin-top:2px;width:18px;height:18px;flex:0 0 auto}
.ophotos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.ophotos:empty{display:none}
.oph{position:relative;aspect-ratio:3/2;border-radius:10px;overflow:hidden;background:var(--sunken)}
.oph img{width:100%;height:100%;object-fit:cover;display:block}
.oph.busy{opacity:.55}
.ox{position:absolute;right:4px;top:4px;width:28px;height:28px;border-radius:50%;border:0;background:rgba(0,0,0,.6);color:#fff;font-size:16px;line-height:1;cursor:pointer}
.oadd{margin-top:10px;cursor:pointer}
/* the presentation profile */
.pup{display:flex;align-items:center;gap:14px;padding:12px;margin-bottom:12px;background:var(--white);border:1.5px dashed var(--line);border-radius:var(--r)}
.pth{flex:0 0 auto;width:84px;height:56px;border-radius:10px;background:var(--sunken) center/contain no-repeat;display:grid;place-items:center;overflow:hidden}
.pth img{max-width:100%;max-height:100%;object-fit:contain}
.pth.wide img{width:100%;height:100%;object-fit:cover}
.pth.empty::after{content:"";width:24px;height:24px;border-radius:50%;background:var(--line)}
.pth.empty::before{content:none}      /* not the empty list's pin: an empty picture frame keeps only its dot */
.ptx{flex:1;min-width:0}
.ptx b{display:block;font-size:15px}
.ptx span{display:block;font-size:13px;color:var(--grey);margin-top:2px;line-height:1.4}
.pup .btn{flex:0 0 auto;cursor:pointer}
.pfill{margin:12px 0 4px}
.pbadges{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.pbadge{position:relative;aspect-ratio:1;border-radius:12px;background:var(--white);border:1.5px dashed var(--line);display:grid;place-items:center;overflow:hidden}
.pbadge img{width:86%;height:86%;object-fit:contain}
.pbadge.add{cursor:pointer;font-size:12.5px;font-weight:600;color:var(--grey-d);text-align:center;padding:6px}
.pbadge[hidden]{display:none}
@media (min-width:640px){
  .lrow2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lrow3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ophotos{grid-template-columns:repeat(5,minmax(0,1fr))}
}
@media (max-width:1023px){
  .lbact .btn.primary{flex:1 1 100%;min-height:52px;font-size:16px}
  .lbact{justify-content:center}
  .lbact .lrm{margin-left:0}
  .lbact .quiet,.lmove .quiet{min-height:44px;display:inline-flex;align-items:center}
}
@media (min-width:1024px){
  .lsample{grid-template-columns:minmax(0,440px) minmax(0,1fr);align-items:start}
  .lbgrid.withprev{display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:36px;align-items:start}
  .lbgrid.withprev .lbprev{display:block;position:sticky;top:18px;max-height:calc(100dvh - 36px);overflow-y:auto;overscroll-behavior:contain}
  .owngrid{grid-template-columns:repeat(3,minmax(0,1fr));max-width:1100px}
  .hacts .btn.desk-only{display:inline-flex}      /* a desk button in the header keeps its label centred */
  .lbact.desk-only{display:flex}
  .profileedit .lbgrid.withprev{grid-template-columns:minmax(0,560px) minmax(0,1fr)}
}
@media (hover:hover){
  .lmain:hover b{text-decoration:underline;text-underline-offset:3px}
  .lpr:hover{background:var(--sunken)}
}
/* Home lists, 5 October 2026: New list, homes first; who it is for, just before Send. App tokens only. */
.lnewbtn{margin-bottom:14px;min-height:52px;font-size:16px}
.lempty{display:grid;gap:12px;justify-items:start}
.lempty .btn{min-height:48px}
.lnlede{margin:2px 0 14px}
.lnewopts{background:var(--white);border:1px solid var(--line-soft);border-radius:var(--r);overflow:hidden;max-width:620px}
.lnopt{display:flex;align-items:center;gap:14px;width:100%;min-height:68px;padding:12px 16px;border:0;border-bottom:1px solid var(--line-soft);background:none;font:inherit;color:var(--ink);text-align:left;text-decoration:none;cursor:pointer}
.lnewopts > .lnopt:last-child{border-bottom:0}
.lnopt .ic{flex:0 0 auto;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--sunken);color:var(--ink)}
.lnopt .t,.lnh .t{flex:1;min-width:0}
.lnopt .t b,.lnh .t b{display:block;font-size:15.5px;font-weight:700;letter-spacing:-.01em}
.lnopt .t span,.lnh .t span{display:block;font-size:13px;color:var(--grey);margin-top:2px;line-height:1.35}
.lnopt .chev{flex:0 0 auto;font-size:22px;line-height:1;color:var(--grey)}
.lnopt[aria-expanded=true] .chev{transform:rotate(90deg)}
.lnown{border-bottom:1px solid var(--line-soft);background:var(--paper);padding:4px 0}
.lnown[hidden]{display:none}
.lnh{position:relative;display:flex;align-items:center;gap:12px;padding:10px 16px;min-height:62px;cursor:pointer}
.lnh input{position:absolute;opacity:0;pointer-events:none}
.lnh img,.lnh .ink{flex:0 0 auto;width:58px;height:42px;border-radius:9px;object-fit:cover;background:linear-gradient(160deg,#19191B 0%,#1E2A22 55%,#1F4D33 100%)}
.lnh .tick{flex:0 0 auto;width:26px;height:26px;border-radius:8px;border:2px solid var(--line);background:var(--white)}
.lnh input:checked ~ .tick{background:var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/16px no-repeat;border-color:var(--ink)}
.lnh input:focus-visible ~ .tick{outline:2px solid var(--ink);outline-offset:2px}
.lnnone{padding:10px 16px;margin:0}
.lnnone a{color:var(--ink)}
.lnfoot{display:flex;align-items:center;gap:14px}
.lnfoot .n{flex:1;font-size:16px;font-weight:700}
.lnfoot .btn{width:auto;min-width:132px;height:48px}
.lnewpage .lnfoot{max-width:620px;margin-top:16px}
.m2foot.lnfoot{display:flex}
/* Who is it for: three choices, each opening its own part (no script needed: :has) */
.lwho{margin-top:16px;background:var(--white);border:1px solid var(--line-soft);border-radius:var(--r);overflow:hidden}
.lwopt{display:flex;align-items:center;gap:14px;padding:14px 16px;min-height:64px;border-bottom:1px solid var(--line-soft);cursor:pointer}
.lwho > .lwopt:last-child{border-bottom:0}
.lwopt input{appearance:none;-webkit-appearance:none;flex:0 0 auto;width:24px;height:24px;margin:0;border-radius:50%;border:2px solid var(--line);background:var(--white)}
.lwopt input:checked{border:7px solid var(--ink)}
.lwopt .t{min-width:0}
.lwopt .t b{display:block;font-size:15.5px;font-weight:700}
.lwopt .t span{display:block;font-size:13px;color:var(--grey);margin-top:2px;line-height:1.35}
.lwsec{display:none;padding:2px 16px 16px;border-bottom:1px solid var(--line-soft);background:var(--paper)}
.lwho:has(input[data-who-pick][value=clients]:checked) [data-who-sec=clients],
.lwho:has(input[data-who-pick][value=new]:checked) [data-who-sec=new]{display:block}
.lwsec .lsearch{margin-top:12px}
.lwsec .fine{margin:10px 0 0}
.ldlab{margin-top:18px}
.ldlab .muted{font-weight:600;letter-spacing:0;text-transform:none;color:var(--grey)}
.ldmore{margin-top:18px}
.ldmore .quiet{background:none;border:0;padding:0;font:inherit;font-weight:700;color:var(--ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.oask{margin:4px 0 14px}
.oquickfull{margin:4px 0 0}
.oquickfull a{color:var(--ink)}
.lcopyf{margin:0}
.lcopyf.ltext{margin:0 0 14px}
@media (min-width:1024px){
  .hacts form.lcopyf.desk-only{display:block}
  .lnewpage .lnewopts,.lnewpage .lnfoot{max-width:560px}
}
@media (hover:hover){
  .lnopt:hover,.lnh:hover,.lwopt:hover{background:var(--sunken)}
}
/* A picture of the profile (5 October 2026): the whole row is the control; the file input is there for the
   label, not hidden from it, so every phone opens its own picker (library, camera, files). */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;opacity:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
label.pup,button.pup{position:relative;cursor:pointer;width:100%;font:inherit;color:inherit;text-align:left}
button.pup{-webkit-appearance:none;appearance:none}
label.pup:focus-within{outline:2px solid var(--ink);outline-offset:2px}
.pup .btn{pointer-events:none}
.pstate{display:block;font-size:12.5px;font-weight:600;color:#2F7A50;margin-top:2px}
.pstate:empty{display:none}
.pwait{margin:-4px 0 12px;padding:10px 12px;border-radius:var(--r-ctl);background:#FDF4E7;color:var(--ink);font-size:13.5px;line-height:1.45}
.pwait[hidden]{display:none}
/* Home lists, I'm interested on Today and Activity (5 October 2026) */
.intcards{display:grid;gap:10px;margin:0 0 14px}
.intcard{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 16px;background:var(--white);border:1px solid rgba(56,202,95,.45);border-radius:var(--r);box-shadow:0 1px 0 rgba(0,0,0,.02)}
.intcard .ic{flex:0 0 auto;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:rgba(56,202,95,.14);color:#2F9E52}
.intcard .t{flex:1 1 200px;min-width:0}
.intcard .k{display:block;font-size:11px;font-weight:800;letter-spacing:.12em;color:#2F7A50}
.intcard b{display:block;font-size:15.5px;font-weight:700;letter-spacing:-.01em;margin-top:2px}
.intcard .m{display:block;font-size:13px;color:var(--grey);margin-top:2px}
.intcard .acts{display:flex;gap:8px;flex:0 0 auto;margin-left:auto}
.intcard .btn.sm{min-height:40px;height:40px;padding:0 14px;font-size:13.5px}
.row.task .tic.int{background:rgba(56,202,95,.14);border-color:rgba(56,202,95,.35);color:#2F9E52}
@media (max-width:560px){ .intcard .acts{flex:1 1 100%;margin-left:48px} }
/* Remove, under a picture of the profile: outside the row, so it never opens the picker (5 October 2026) */
.pupw{margin-bottom:12px}
.pupw .pup{margin-bottom:6px}
.premove{display:block;margin:0 0 0 auto;padding:4px 2px;background:none;border:0;font:inherit;font-size:13.5px;font-weight:600;color:var(--grey-d);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.premove[hidden]{display:none}
.pown{margin:2px 0 14px}
/* A sent list's private link, near the top (6 October 2026) */
.lprivate{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 14px;max-width:820px;margin-bottom:12px;padding:12px 16px}
.lprivate .lpk{display:grid;gap:2px;min-width:0;flex:1 1 220px}
.lprivate .k{font-size:11px;font-weight:800;letter-spacing:.12em;color:var(--grey-d)}
.lprivate .lpu{font-size:14px;font-weight:600;overflow-wrap:anywhere}
.lprivate .lpacts{display:flex;gap:8px;flex-wrap:wrap}
.lprivate .btn{min-height:40px;height:40px;padding:0 14px;font-size:13.5px}

/* The owner's watch page (docs/07, Scaling plan, item 9): one dot per number. */
.watchrow{gap:12px;cursor:default}
.wdot{flex:0 0 auto;width:12px;height:12px;border-radius:50%;background:var(--line)}
.wdot.green{background:var(--green)}
.wdot.amber{background:var(--amber)}
.wdot.red{background:#B4462F}     /* the danger red Setup already uses */
.watchrow .rside b{font-size:14px;font-weight:700;white-space:nowrap}

/* ---------- R6: the contact timeline, tasks and reminders ---------- */
.tlcard{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px 6px;margin:16px 0}
.tlhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}
.tlhead .lab{margin:0}
.tlfilter summary{font-size:13px;font-weight:600;letter-spacing:0;color:var(--grey-d);padding:6px 0 6px 10px}
.tlrow{display:flex;gap:12px;align-items:flex-start;padding:13px 0;border-top:1px solid var(--line-soft);color:inherit;text-decoration:none}
.tlhead + .tlrow{border-top:0}
.tlic{flex:0 0 auto;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:var(--sunken);border:1px solid var(--line);color:var(--grey-d)}
.tlic.tl-sale{background:var(--ink);border-color:var(--ink);color:var(--white)}
.tlic.tl-text,.tlic.tl-call,.tlic.tl-interest{background:rgba(56,202,95,.14);border-color:rgba(56,202,95,.35);color:#2F9E52}
.tlbody{display:grid;gap:2px;min-width:0}
.tlt{font-size:14.5px;font-weight:700;letter-spacing:-.015em;line-height:1.3}
.tls{font-size:13.5px;color:var(--grey-d);line-height:1.35;overflow-wrap:anywhere}
.tlm{font-size:12px;color:var(--grey);font-variant-numeric:tabular-nums}
.tlempty{font-size:13.5px;color:var(--grey);margin:6px 0 12px}
.cdates{display:grid;gap:6px;margin:14px 0 0;font-size:13.5px}
.cdline{display:flex;flex-wrap:wrap;gap:6px 16px;color:var(--grey-d)}
.cdline span{display:inline-flex;align-items:center;gap:6px}
.cdtask{display:flex;justify-content:space-between;gap:10px;background:var(--white);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.cdtask span{color:var(--grey);font-size:12.5px;white-space:nowrap}
.cdadd{color:var(--grey-d);font-weight:600;text-decoration:none;padding:4px 0}
.row.task.tk{padding-left:10px;gap:10px}
.row.task.tk .rmain{flex:1 1 auto;min-width:0;color:inherit;text-decoration:none}
.row.task.tk .rname,.row.task.tk .rmeta{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row.task.tk .rside{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.tkdone,.tkskip{margin:0}
.tkc{position:relative;width:26px;height:26px;border-radius:50%;border:1.5px solid var(--never);background:var(--white);cursor:pointer;padding:0;flex:0 0 auto}
.tkc::before{content:"";position:absolute;inset:-9px}                 /* a 44px target */
.tkc.on{background:var(--green);border-color:var(--green)}
.tkc.on::after{content:"";position:absolute;left:8px;top:4px;width:6px;height:11px;border:solid var(--white);border-width:0 2px 2px 0;transform:rotate(45deg)}
.tks{font:inherit;font-size:12px;font-weight:600;color:var(--grey-d);background:none;border:0;padding:4px 0;cursor:pointer;position:relative}
.tks::before{content:"";position:absolute;inset:-10px -8px}
.ago.late{color:var(--amber);font-weight:700}
.row.task.tk.gone .rname{color:var(--grey);text-decoration:line-through}
.tklinks{display:flex;justify-content:space-between;padding:12px 4px 0;font-size:13.5px;font-weight:600}
.tklinks a{color:var(--grey-d);text-decoration:none;padding:6px 0}
.tsub{font-size:15px;color:rgba(255,255,255,.62);margin:10px 0 0;line-height:1.4}
.tkaddbtn{margin-left:auto;margin-right:10px;display:inline-flex;align-items:center;height:44px;padding:0 18px;border-radius:999px;background:var(--paper);color:var(--ink);font-size:15px;font-weight:700;text-decoration:none}
@media (min-width:761px){.tkaddbtn{background:var(--ink);color:var(--white)}}
.tkpage .tksect{display:flex;justify-content:space-between;margin:22px 4px 8px}
.tkpage .tksect:first-child,.tkpage .tkadd + .tksect{margin-top:0}
.tkadd{padding:16px;display:grid;gap:12px;margin-bottom:22px}
.tkf{display:grid;gap:6px;font-size:13px;font-weight:600;color:var(--grey-d)}
.tkf input{font:inherit;font-size:16px;font-weight:500;color:var(--ink);padding:11px 12px;border:1px solid var(--line);border-radius:var(--r-ctl);background:var(--white)}
.tkadd .actions{display:flex;gap:10px;margin:0}
.tkempty{font-size:14px;line-height:1.45}
[data-edit-dates] .hint{font-size:12.5px;color:var(--grey);margin-top:2px}
@media (min-width:761px){
  .tsub{color:var(--grey-d)}
}
@media (hover:hover){
  .tkc:hover{border-color:var(--green)}
}

/* A page or card that did not load (8 October 2026): what happened, and Try again. Never placeholders for good. */
.loaderr{display:grid;gap:8px;justify-items:start;background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:20px;margin:16px 0}
.loaderr b{font-size:17px;font-weight:700;letter-spacing:-.02em}
.loaderr span{font-size:14px;color:var(--grey-d);line-height:1.4}
.loaderr .btn{margin-top:6px}
/* A client's home lists on their record, ended ones included (8 October 2026) */
.clists{display:grid;gap:8px}
.clist{display:grid;gap:3px;background:var(--white);border:1px solid var(--line);border-radius:14px;padding:12px 14px;color:inherit;text-decoration:none}
.cl1{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.cl1 b{font-size:14.5px;font-weight:700;letter-spacing:-.015em}
.clstate{font-size:12px;font-weight:600;color:var(--grey);white-space:nowrap}
.clstate.live{color:#2F9E52}
.cl2{font-size:13px;color:var(--grey-d)}
.cl3{font-size:13px;color:#2F9E52;font-weight:600}
.lpast{font-weight:700;color:var(--grey-d)}
/* Setup → Reminders: the hour on one line with its label, and room before the switches (8 October 2026) */
.remindtime{margin:0 0 22px}
.remindtime .chip{min-height:44px;padding-right:0;overflow:hidden}
.remind h4 + .kinds{margin-top:4px}
/* Spacing audit, 8 October 2026: a description and the field under it never touch; the people-nearby card has its padding */
.setup .sub + .fld,.setup .sub + .remindtime{margin-top:12px}
.near-pick .card.sec{padding:16px}
.near-pick .card.sec h4{font-size:14.5px;font-weight:700;letter-spacing:-.015em;margin:0}
.near-pick .card.sec .sub{font-size:13px;color:var(--grey-d);margin:4px 0 12px}

/* ---------- R7a: the pipeline (mockup screen 10) ---------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.pipepage .hacts .btn.primary,.dealpage .hacts .btn.primary{height:44px;padding:0 18px;border-radius:999px;background:var(--paper);color:var(--ink);font-size:15px}
.pipesum{font-size:14.5px}
.pipenote{display:block;margin:0 0 14px;padding:12px 14px;border-radius:14px;background:var(--white);border:1px solid var(--line);font-size:13.5px;color:var(--grey-d);text-decoration:none;line-height:1.4}
.pipenote b{color:var(--ink);font-weight:700}
.pipeempty{font-size:14px;line-height:1.45}
.board{display:grid;gap:22px}
.pchead{display:flex;justify-content:space-between;align-items:baseline;margin:0 4px 8px;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--grey-d)}
.pchead .n{display:none;font-weight:600;color:var(--grey);margin-left:4px;letter-spacing:0}   /* the phone says "3 · $5M" on the right */
.pchead .pct{font-size:12.5px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--grey)}
.pclist{background:var(--white);border:1px solid var(--line-soft);border-radius:var(--r);overflow:hidden}
.pclist:empty{display:none}
.pcard{position:relative;display:flex;align-items:center;gap:12px;padding:0 16px 0 0;border-bottom:1px solid var(--line-soft);min-height:64px}
.pcard:last-child{border-bottom:0}
.pcard::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:3px;border-radius:0 3px 3px 0;background:var(--never)}
.pcard.warm::before{background:var(--green)}
.pmain{flex:1 1 auto;min-width:0;display:grid;gap:3px;padding:13px 0 13px 18px;color:inherit;text-decoration:none}
.pname{font-size:15.5px;font-weight:700;letter-spacing:-.015em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.psub{font-size:13.5px;color:var(--grey-d);line-height:1.35;overflow-wrap:anywhere}
.pmove{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:68px;padding:0 14px;border:1px solid var(--line);border-radius:var(--r-ctl);background:var(--white);color:var(--ink);font-size:14.5px;font-weight:700;text-decoration:none}
.pcard.lost .pname,.pcard.lost .psub{color:var(--grey)}
.pcard.moved{animation:pmoved 900ms var(--ease-out) both}
@keyframes pmoved{from{box-shadow:inset 0 0 0 2px var(--green)}to{box-shadow:inset 0 0 0 2px transparent}}
@media (prefers-reduced-motion:reduce){.pcard.moved{animation:none}}
/* the Move sheet */
.dmopts{display:grid;gap:8px;margin:16px 0 4px}
.dmopt{display:flex;align-items:center;justify-content:space-between;min-height:52px;padding:0 16px;border-radius:14px;border:1px solid var(--line);background:var(--white);font:inherit;font-size:16px;font-weight:700;color:var(--ink);cursor:pointer;text-align:left}
.dmopt .dmnow{display:none;font-style:normal;font-size:12px;font-weight:700;color:var(--grey-d)}
.dmopt.on{background:var(--ink);border-color:var(--ink);color:var(--white)}
.dmopt.on .dmnow{display:inline;color:rgba(255,255,255,.7)}
.dmpage{padding:16px}
.dmpage .dmopts{margin:0}
/* a deal's page, New deal, the home step */
.dealbody{display:grid;gap:0;max-width:820px}
.dealbody > .lab{margin:22px 4px 8px}
.dealbody > .lab:first-child{margin-top:0}
.dsum{padding:6px 18px}
.dsrow{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:12px 0;border-top:1px solid var(--line-soft);font-size:14.5px}
.dsrow:first-child{border-top:0}
.dsrow span{color:var(--grey-d)}
.dsrow b{font-size:16px;font-weight:700;letter-spacing:-.01em}
.dsmath{font-size:13px;color:var(--grey-d);line-height:1.4;padding:0 0 12px;overflow-wrap:anywhere}
.dsmath:empty{display:none}
.dform{display:grid;gap:14px;padding:16px}
.dform .fldlab{display:grid;gap:6px;margin:0}
.dform .fld{margin:0}
.dform .dsmath{padding:0;margin-top:-4px}
.dform .dsex{font-size:15px;font-weight:700;color:var(--ink);background:var(--sunken);border-radius:12px;padding:12px 14px;margin:0}
.dform .wide{margin-top:4px}
.dpair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
.pctin{position:relative;display:block}
.pctin .fld{padding-right:30px;width:100%;margin:0}
.setup .sec .pctin .fld{margin:0}   /* outranks Setup's first-field margin, so the % sits on the field's middle */
.pctin i{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-style:normal;color:var(--grey);font-size:14px;pointer-events:none}
.dkinds{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border-radius:14px;background:rgba(0,0,0,.05);margin-top:-8px}
.dkind{position:relative;display:block;cursor:pointer}
.dkind input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.dkind span{display:flex;align-items:center;justify-content:center;min-height:44px;border-radius:11px;font-size:15px;font-weight:700;color:var(--grey-d)}
.dkind input:checked + span{background:var(--white);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.06)}
.dkind input:focus-visible + span{outline:2px solid var(--ink);outline-offset:2px}
.ferr{font-weight:600;color:var(--amber)}
.dhome{display:grid;gap:8px;padding:16px;margin-top:14px}
.dhome b{font-size:15.5px;font-weight:700;letter-spacing:-.015em}
.dhome span{font-size:13.5px;color:var(--grey-d);line-height:1.45}
.dhome .btn{justify-self:start;margin-top:4px}
.dhist{padding:4px 18px}
.dhrow{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-top:1px solid var(--line-soft);font-size:14px}
.dhrow:first-child{border-top:0}
.dprivate{margin:14px 4px 24px}
.dwho{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;font-size:15.5px}
.dwho a{color:var(--grey-d);font-weight:600;font-size:14px;text-decoration:none;padding:10px 0 10px 12px}
.dwhopick{padding:0 12px 12px}
.dwhopick .lsearch{margin:12px 0 10px}
.dhwhy{font-size:14.5px;line-height:1.5;color:var(--grey-d);margin:0}
.dform .fine{font-size:13px;line-height:1.45;color:var(--grey-d);margin:0}
.dhacts{display:grid;gap:10px}
.dhacts .wide{margin:0}
@media (min-width:761px){
  .pipepage .hacts .btn.primary,.dealpage .hacts .btn.primary{background:var(--ink);color:var(--white)}
  .dhacts{grid-template-columns:1.4fr 1fr}
}
@media (min-width:1024px){
  .board{grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;align-items:start}
  .pcol{background:rgba(0,0,0,.035);border:1px solid var(--line-soft);border-radius:var(--r);padding:14px 10px 10px;min-height:440px;transition:background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}
  .pchead{margin:0 4px 12px;font-size:14px;letter-spacing:-.01em;text-transform:none;color:var(--ink);font-weight:700}
  .pchead .n{display:inline}
  .pchead .pct{font-size:12.5px;font-weight:700;color:var(--grey-d)}
  .pclist{display:grid;gap:8px;align-content:start;background:none;border:0;border-radius:0;overflow:visible;min-height:380px}
  .pclist:empty{display:grid}
  .pcard{display:block;padding:0;border:1px solid var(--line-soft);border-radius:14px;background:var(--white);min-height:0;cursor:grab}
  .pcard::before{display:none}
  .pcard:last-child{border-bottom:1px solid var(--line-soft)}
  .pcard.lost{background:rgba(255,255,255,.55)}
  .pmain{padding:12px 13px;gap:3px}
  .pname{font-size:14px;white-space:normal;overflow-wrap:anywhere}   /* a long name wraps on a narrow column, never cut */
  .psub{font-size:12.5px;color:var(--grey)}
  .pnums{display:flex!important;justify-content:space-between;gap:8px;margin-top:8px;font-size:13px}
  .pnums b{font-weight:700}
  .pnums span{color:var(--grey-d)}
  .pcard.lost .pnums b{color:var(--grey)}
  .pcard.dragging{opacity:.4}
  .pipesum .desk-only{display:inline}
  .pcol.over{background:rgba(56,202,95,.08);border-color:rgba(56,202,95,.45)}
  .pmain:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:14px}
}

/* ---------- R7b: tags and saved filters (mockup screen 09) ---------- */
.mlseg.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.mlseg.three a{font-size:14px;padding:0 4px;text-align:center;line-height:1.2}
.chips.pinf{margin-bottom:4px}
.chips.pinf .chip{gap:5px}
.chips.pinf .chip svg{color:var(--grey-d)}
/* Saved filters */
.sfpage .hacts .btn.primary,.sfone .hacts .btn.primary{height:44px;padding:0 18px;border-radius:999px;background:var(--paper);color:var(--ink);font-size:15px}
.sflist .row{border-bottom:0}
.sfitem{border-bottom:1px solid var(--line-soft)}
.sfitem:last-child{border-bottom:0}
.sfitem .rmeta{white-space:normal;line-height:1.35}
.sfn{font-size:16px;font-weight:700;color:var(--ink)}
.sfarr{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:0 16px 12px 17px}
.sfmoves{display:flex;gap:8px}
.sfb{min-height:44px;padding:0 14px;border:1px solid var(--line);border-radius:var(--r-ctl);background:var(--white);font:inherit;font-size:14px;font-weight:700;color:var(--ink);cursor:pointer}
.sfarrow{min-width:48px;font-size:17px}
.sfitem.pinned .sfb[data-filter-pin]{background:var(--sunken)}
.sfnote{margin:0 0 4px;padding:12px 14px;border-radius:14px;background:var(--white);border:1px solid var(--line);font-size:13.5px;color:var(--grey-d);line-height:1.4}
.sfnote a{color:var(--ink);text-decoration:none;padding:12px 0 12px 6px}
.sfempty{font-size:14px;line-height:1.45}
.sffine,.ffine{font-size:13px;line-height:1.45;color:var(--grey-d);margin:14px 4px 0}
.sffine{margin:18px 4px 24px}
/* the builder */
.fbuild{display:grid;gap:0;max-width:760px;padding-bottom:24px}
.fgroup{border:0;margin:22px 0 0;padding:0;min-width:0}
.fgroup > .lab{float:left;width:100%;padding:0;margin:0 4px 10px}   /* a legend keeps its margins only floated */
.fgroup > .lab + *{clear:both}
.fchips{display:flex;flex-wrap:wrap;gap:8px}
.fchip{position:relative;display:inline-flex;cursor:pointer}
.fchip input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.fchip > span{position:relative;display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:0 13px;border-radius:19px;border:1px solid var(--line);background:var(--white);font-size:14px;font-weight:600;color:var(--ink);line-height:1.2}
.fchip > span::before{content:"";position:absolute;left:-2px;right:-2px;top:-3px;bottom:-3px}   /* a 44pt thumb */
.fchip i{font-style:normal;font-weight:500;font-size:12.5px;color:var(--grey)}
.fchip .d{width:7px;height:7px;border-radius:2px;background:var(--amber)}
.fchip input:checked + span{background:var(--ink);border-color:var(--ink);color:var(--white)}
.fchip input:checked + span i{color:rgba(255,255,255,.6)}
.fchip input:focus-visible + span{outline:2px solid var(--ink);outline-offset:2px}
.fcount{position:sticky;top:0;z-index:5;margin:0 -20px;padding:12px 20px 14px;background:var(--sheet);border-bottom:1px solid var(--line-soft)}
.fcn{display:flex;align-items:baseline;gap:8px;font-size:15px;font-weight:600;color:var(--grey-d)}
.fcn b{font-size:30px;font-weight:800;letter-spacing:-.04em;color:var(--ink);line-height:1.1}
.fcp{margin-top:3px;font-size:13.5px;color:var(--grey-d);line-height:1.4;overflow-wrap:anywhere}
.fcount.busy .fcn b{opacity:.45}
.fname{display:grid;gap:0;margin:0}
.fname > .lab{margin:24px 4px 10px}
.fname .fld{margin:0}
.fbacts{display:grid;gap:10px;margin-top:18px}
.fbacts .wide{margin:0;min-height:48px}
.fdel{max-width:760px;margin-top:6px}
.fdel .wide{margin:0;min-height:44px;color:var(--grey-d)}
.fdelnote{max-width:760px;margin-bottom:24px}
/* a saved filter's clients, and drafting to them */
.sfone .tstage .hero{margin-top:14px}
.sfhead .wide{margin:0;min-height:48px}
.sfdraftfine{margin-top:10px}
.sfdform{display:grid;max-width:760px;padding-bottom:24px}
.sfdform > .lab{margin:22px 4px 10px}
.sfdform > .lab:first-of-type{margin-top:4px}
.sfdopts{display:grid;gap:10px}
.sfdopt{position:relative;display:grid;gap:8px;padding:14px 16px;border-radius:16px;border:1px solid var(--line);background:var(--white);cursor:pointer}
.sfdopt input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.sfdopt:has(input:checked){border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.sfdopt:has(input:focus-visible){outline:2px solid var(--ink);outline-offset:2px}
.sfdt{display:grid;gap:2px}
.sfdt b{font-size:15.5px;font-weight:700;letter-spacing:-.015em}
.sfdt span{font-size:13px;color:var(--grey-d)}
.sfdbody{display:none;font-size:14px;line-height:1.5;color:var(--ink);white-space:pre-wrap;background:var(--sunken);border-radius:12px;padding:12px 14px;overflow-wrap:anywhere}
.sfdopt:has(input:checked) .sfdbody{display:block}
.sfdwho{padding:6px 18px;margin-bottom:16px}
.sfdnames{font-size:13px;color:var(--grey-d);line-height:1.4;padding:0 0 12px;overflow-wrap:anywhere}
.sfdtotal b{font-size:18px}
.sfdform .wide,.sfdone{margin:0;min-height:48px}
.sfdfine{margin-top:12px}
.sfdraftpage .tsheet > .sfdwho{max-width:760px}
.sfdraftpage .tsheet > .ffine{max-width:760px;margin-bottom:24px}
/* tags on a client's card */
.ctags{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.ctag{display:inline-flex;align-items:center;gap:2px;min-height:34px;padding:0 4px 0 12px;border-radius:17px;background:var(--white);border:1px solid var(--line);font-size:13.5px;font-weight:600;color:var(--ink);margin:0}
.ctagx{position:relative;display:grid;place-items:center;width:28px;height:28px;border:0;border-radius:50%;background:none;color:var(--grey-d);cursor:pointer;padding:0}
.ctagx::before{content:"";position:absolute;inset:-8px -6px}   /* a 44pt thumb */
.ctagadd{display:flex;gap:8px;flex:1 1 100%;margin:2px 0 0}
.ctagadd .fld{flex:1 1 auto;min-width:0;margin:0}
.ctagbtn{flex:0 0 auto;min-height:44px;padding:0 16px;border:1px solid var(--line);border-radius:var(--r-ctl);background:var(--white);font:inherit;font-size:14.5px;font-weight:700;color:var(--ink);cursor:pointer}
.ctags.busy,.ctag.busy,.ctagadd.busy{opacity:.55}
@media (hover:hover){
  .fchip:hover > span{border-color:var(--grey)}
  .sfb:hover,.ctagbtn:hover{background:var(--sunken)}
  .ctagx:hover{color:var(--ink)}
}
@media (min-width:761px){
  .sfpage .hacts .btn.primary,.sfone .hacts .btn.primary{background:var(--ink);color:var(--white)}
}
@media (min-width:1024px){
  /* Saved filters, the builder and the draft step read in one column; a filter's clients keep Clients' card beside them */
  body[data-tab=clients] .sfpage .tsheet,body[data-tab=clients] .fbpage .tsheet,body[data-tab=clients] .sfdraftpage .tsheet{display:block}
  .sfpage .tsheet > *{max-width:760px}
  body[data-tab=clients] .tsheet > .sfhead{grid-column:1/-1}
  .fcount{margin:0;padding:14px 0;border-radius:0}
  .fbacts{grid-template-columns:1.4fr 1fr}
  .mlseg.three{max-width:520px}
}
.sfone .hacts .sfdeskbtn{display:none}
@media (min-width:1024px){
  .sfone .hacts .sfdeskbtn{display:inline-flex}
  .sfone .sfhead .sfdraft{display:none}
  .sfone .sfhead .sfdraftfine{margin:0 4px 14px}
}
@media (min-width:1024px){
  .desk .rsub.on{color:var(--paper);background:rgba(255,255,255,.1)}
}

/* ── R8: the Inbox (leads beside drafts), a lead, To sort, and the lead-address guide ───────────────
   One markup at every width (the parity rule): on the desk a lead opens in the panel beside the list,
   as a client's card does; on the phone it slides up as a sheet. */
.srcb{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.06em;padding:3px 7px;border-radius:6px;background:var(--ink);color:var(--paper);white-space:nowrap;line-height:1.3}
.srcb.quiet{background:transparent;color:var(--grey-d);box-shadow:inset 0 0 0 1px var(--line)}
/* 8 October 2026: one list, newest first. Each lead is a card with Call, Text and Add to clients on it; a forward from
   a mailbox not yet verified asks "Is that you?" in its place; drafts below; To sort one line at the top. */
.leadlist{display:grid;gap:10px}
.leadrow{padding:14px 16px;display:grid;gap:8px}
.leadrow .lrtop{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.leadrow .lrname{font-size:17px;font-weight:700;letter-spacing:-.02em;color:var(--ink);min-width:0;overflow-wrap:anywhere}
.leadrow a.lrname{text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px}
.leadrow .ago{font-size:12.5px;color:var(--grey);flex:0 0 auto}
.leadrow .ago.fresh{color:var(--green);font-weight:700}
.leadrow .lrmeta{min-width:0;line-height:1.45}
.leadrow .lrmeta .srcb{margin-right:8px;vertical-align:1px}
.leadrow .lrask{font-size:14px;color:var(--grey-d);overflow-wrap:anywhere}
.leadrow .lracts{display:flex;gap:8px;margin-top:2px}
.leadrow .lracts form{display:contents}
.leadrow .lracts .btn{min-height:44px;flex:1 1 0;min-width:0;padding:0 8px;white-space:nowrap}
.leadrow .lracts [data-lead-add],.leadrow .lracts [data-lead-client],.leadrow .lracts [data-lead-homes]{flex:1.8 1 0}
.leadrow[data-lead-state=added],.leadrow[data-lead-state=attached]{background:var(--sunken);border-color:transparent}
.leadrow.on{box-shadow:inset 0 0 0 2px var(--ink)}
.askrow{border-color:var(--ink)}
.askrow .askq{font-size:15px;line-height:1.4;color:var(--ink);overflow-wrap:anywhere}
.askrow .fine{margin-top:0;color:var(--grey-d)}
.askone{display:grid;gap:10px;margin-bottom:12px}
.askone .lracts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.askone .lracts .btn{min-height:44px}
.sortline{margin:0 0 12px}
.draftsec{margin-top:22px}
.draftsec .lab{margin-top:0}
.draftsec .wide{margin-top:12px}
.fwdnote{margin-top:26px;padding-top:16px;border-top:1px solid var(--line)}
.fwdnote > b{display:block;font-size:14.5px;letter-spacing:-.015em;margin-bottom:6px}
.fwdnote p{font-size:13.5px;line-height:1.5;color:var(--grey-d);margin:0 0 8px;overflow-wrap:anywhere}
.leadsource .gp{margin:4px 0 0}
.leadsource .wide{margin-top:16px;width:100%;min-height:48px}
.inboxempty{padding:22px 20px}
.inboxempty b{display:block;font-size:16px;letter-spacing:-.02em;margin-bottom:6px}
.inboxempty p{margin:0 0 14px;color:var(--grey-d);font-size:14px;line-height:1.45}
.leadcard .phead{position:relative;top:auto}
.leadcard .lchead{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.leadcard .unconf{font-size:11.5px;font-weight:600;color:#8A5A00;background:rgba(232,163,23,.16);border-radius:6px;padding:2px 7px}
.leadcard .lcago{font-size:12.5px;color:var(--grey)}
.leadcard .pname{font-size:22px;font-weight:800;letter-spacing:-.03em;margin:0;line-height:1.15}
.leadcard .lcreach{margin-top:6px;font-size:14px;color:var(--grey-d);overflow-wrap:anywhere}
.leadcard .lcreach a{color:inherit}
.leadcard .lcreach b{color:var(--ink)}
.leadcard .lcask{background:var(--sunken);border-radius:var(--r-ctl);padding:12px 14px;font-size:15px;line-height:1.45;margin:4px 0 14px;overflow-wrap:anywhere}
.leadcard .lcfacts{margin:0 0 14px;display:grid;gap:8px}
.leadcard .lcfacts div{display:grid;grid-template-columns:110px minmax(0,1fr);gap:10px;font-size:14px}
.leadcard .lcfacts dt{color:var(--grey)}
.leadcard .lcfacts dd{margin:0;color:var(--ink);overflow-wrap:anywhere}
.leadcard .lcacts{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:8px;margin-bottom:12px}
.leadcard .lcacts .btn{min-height:44px;justify-content:center}
.leadcard .lcform{margin:0 0 8px}
.leadcard .wide{margin:0 0 8px;width:100%;min-height:48px}
.leadsolo{padding:0;overflow:hidden}
.sortbody{white-space:normal;font-size:14px;line-height:1.5;color:var(--grey-d);overflow-wrap:anywhere;margin:12px 0}
.sortform{margin:12px 0;display:grid;gap:10px}
.sortform .fl{display:grid;gap:5px;font-size:13px;font-weight:600;color:var(--grey-d)}
.sortform .err{color:#B42318;font-size:14px;margin:0}
.inboxline{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--white);border:1px solid var(--line-soft);border-radius:var(--r);padding:14px 16px;margin:14px 0;color:var(--ink);text-decoration:none;font-size:14.5px;min-height:44px}
.inboxline .chev{color:var(--grey)}
.copyrow{display:flex;align-items:center;gap:10px;background:var(--white);border:1px solid var(--line-soft);border-radius:var(--r);padding:8px 8px 8px 14px;margin:6px 0 10px}
.copyrow .cv{flex:1;min-width:0;font-size:15px;font-weight:600;overflow-wrap:anywhere;user-select:all;-webkit-user-select:all}
.copyrow .btn{flex:0 0 auto;min-height:40px;padding:0 16px}
.lsechead{margin:22px 0 8px}
.inboxpage .tstage .mlseg{margin-top:16px}
.srclist{padding:0;overflow:hidden}
.srcrow{display:flex;align-items:center;gap:12px;padding:14px 16px;color:var(--ink);text-decoration:none;border-top:1px solid var(--line-soft);min-height:56px}
.srcrow:first-child{border-top:0}
.srcrow .sl{flex:1;min-width:0;display:grid;gap:3px}
.srcrow .sl b{font-size:15px;letter-spacing:-.015em}
.srcrow .sl > span{font-size:13px;color:var(--grey);overflow-wrap:anywhere}
.srcrow .sl .gbars{margin-top:6px;max-width:160px}
.srcrow .sr{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.srcrow .okdone{font-size:13.5px;font-weight:700;color:var(--ink)}
.srcrow .chev{color:var(--grey)}
.gway{background:var(--white);border:1px solid var(--line-soft);border-radius:var(--r);padding:14px 16px;margin:10px 0}
.gway > b{display:block;font-size:14.5px;margin-bottom:6px}
.gsteps{margin:0;padding-left:20px;display:grid;gap:7px;font-size:14px;line-height:1.45;color:var(--grey-d)}
.gsteps b{color:var(--ink)}
.undofwd{margin:0 0 14px;align-items:flex-start}
.undofwd .gsteps{margin-top:8px}
@media (min-width:1024px){
  .inboxpage .tsheet{display:grid;grid-template-columns:minmax(0,1fr) 412px;gap:16px;align-items:start}
  .inboxpage .tsheet > :not(.deskpanel){grid-column:1}
  .inboxpage .tsheet > .deskpanel{grid-column:2;grid-row:1 / span 8}
  .inboxpage.sortone .tsheet,.inboxpage.sortpage .tsheet,.leadpage .tsheet,.leadsetup .tsheet,.leadguide .tsheet{display:block;max-width:760px}
  .leadsetup .tsheet,.leadguide .tsheet{max-width:640px}
  .leadpage .leadsolo{max-width:560px}
}

/* ── R9: bring your people over (mockup screens 67 and 68). One markup at every width: the steps show their
   names on the desk and the current one's on the phone; a pair stacks on the phone. ─────────────────── */
.stepper{list-style:none;display:flex;gap:8px;margin:0 0 18px;padding:0;overflow-x:auto;scrollbar-width:none}
.stepper::-webkit-scrollbar{display:none}
.stepper li{display:flex;align-items:center;gap:8px;flex:0 0 auto;height:40px;padding:0 14px 0 8px;border-radius:20px;background:var(--white);border:1px solid var(--line-soft);font-size:13.5px;color:var(--grey-d);white-space:nowrap}
.stepper li .n{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--sunken);font-size:12px;font-weight:700;color:var(--ink)}
.stepper li.done .n{background:var(--green);color:var(--white)}
.stepper li.on{border:2px solid var(--ink);color:var(--ink);font-weight:700}
.stepper li.on .n{background:var(--ink);color:var(--white)}
.srcs{display:grid;gap:10px}
.srcc{display:flex;align-items:center;gap:14px;padding:16px;min-height:72px;color:var(--ink);text-decoration:none}
.srcc .lg{width:48px;height:48px;border-radius:12px;background:var(--sunken);display:grid;place-items:center;font-weight:800;font-size:14px;flex:0 0 auto}
.srcc .st{flex:1;min-width:0;display:grid;gap:3px}
.srcc .st b{font-size:16px;letter-spacing:-.02em}
.srcc .st > span{font-size:13.5px;color:var(--grey-d);line-height:1.4}
.srcc .chev{color:var(--grey)}
.crmimport .gh{font-size:20px;font-weight:800;letter-spacing:-.03em;margin:0 0 10px}
.crmhow{margin:0 0 16px}
.crmfile{display:grid;gap:12px;margin:12px 0}
.crmfile .fl{display:grid;gap:3px}
.crmfile input[type=file]{font-size:14px;max-width:100%}
.crmfile .wide{width:100%;min-height:48px}
.crmimport .wide{display:flex;width:100%;min-height:48px;margin:10px 0 0}
.crmbig{display:grid;gap:12px}
.crmbig .big{font-size:22px;letter-spacing:-.03em;line-height:1.25}
.crmfacts{margin:0;display:grid;gap:8px}
.crmfacts div{display:flex;justify-content:space-between;gap:12px;font-size:14px;border-top:1px solid var(--line-soft);padding-top:8px}
.crmfacts dt{color:var(--grey-d)}
.crmfacts dd{margin:0;font-weight:700;text-align:right}
.crmsrc{display:flex;flex-wrap:wrap;gap:6px}
.crmsrc .pill{height:24px;font-size:12px}
.crmlede{margin:0 0 12px}
.dupe{padding:14px 16px;margin:0 0 10px;display:grid;gap:12px}
.dupe .pair{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:12px;align-items:center}
.dupe .pair b{display:block;font-size:15px;letter-spacing:-.015em;overflow-wrap:anywhere}
.dupe .pair span{font-size:12.5px;color:var(--grey-d);overflow-wrap:anywhere}
.dupe .eq{color:var(--grey);font-weight:700}
.dupe .w3{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dupe .sp{flex:1}
.segopt{position:relative;display:inline-flex}
.segopt input{position:absolute;opacity:0;width:1px;height:1px}
.segopt span{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:var(--r-ctl);border:1px solid var(--line);background:var(--white);font-weight:600;font-size:14px;cursor:pointer}
.segopt input:checked + span{background:var(--ink);color:var(--white);border-color:var(--ink)}
.segopt input:focus-visible + span{outline:2px solid var(--green);outline-offset:2px}
.crmlink{display:flex;margin-bottom:10px}
@media (max-width:760px){
  .stepper li:not(.on) .l{display:none}
  .stepper li:not(.on){padding:0 8px}
  .dupe .w3 .segopt{flex:1}
  .dupe .w3 .segopt span{width:100%;justify-content:center}
  .dupe .w3 .sp{flex-basis:100%;height:0}
}
@media (min-width:1024px){
  .crmimport .tsheet{max-width:760px}
}

/* ── R12a: follow-up plans. A draft in the Inbox, one at a time (mockup screen 6); the plans and their guide. ── */
.plansec{margin-top:22px}
.pdraft{display:grid;gap:12px}
.pdhead{display:flex;align-items:center;gap:12px;min-width:0}
.pdhead .av{width:44px;height:44px;border-radius:50%;background:var(--sunken);display:grid;place-items:center;font-weight:700;color:var(--grey-d);flex:0 0 auto}
.pdwho{flex:1;min-width:0;display:grid;gap:2px}
.pdwho b{font-size:17px;letter-spacing:-.02em;color:var(--ink)}
.pdwho > span{font-size:13px;color:var(--grey-d);overflow-wrap:anywhere}
.pdpos{font-size:13px;color:var(--grey);flex:0 0 auto}
.pdraft .fl{display:grid;gap:5px;font-size:13px;font-weight:600;color:var(--grey-d)}
.pdbody{background:var(--sunken);border-color:transparent;color:var(--ink);font-size:16px;line-height:1.5;min-height:120px;resize:vertical}
.pdacts{display:flex;gap:8px;flex-wrap:wrap}
.pdacts .btn{min-height:44px;padding:0 18px}
.pdacts .btn.quiet{margin-left:auto;background:transparent;border-color:transparent;color:var(--grey-d)}
.pddots{display:flex;justify-content:center;gap:6px;margin:12px 0 0}
.pddots i{width:6px;height:6px;border-radius:50%;background:var(--line)}
.pddots i.on{background:var(--ink)}
.pdplans{display:inline-block;margin-top:10px;text-decoration:underline;text-underline-offset:3px;min-height:24px}
.pplist{list-style:none;margin:14px 0;padding:0;display:grid;gap:10px}
.pplist li{display:grid;gap:6px}
.pplist .ppday{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--grey)}
.pplist p{font-size:15px;line-height:1.5;margin:0;color:var(--ink)}
.pplans{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 6px}
.pplans .pill{height:36px;padding:0 14px;font-size:13.5px;text-decoration:none}
.pclient{display:flex;align-items:flex-end;gap:10px;margin:12px 0}
.pclient .fl{flex:1;display:grid;gap:5px;font-size:13px;font-weight:600;color:var(--grey-d)}
.pclient .btn{min-height:44px}
.pstate{display:grid;gap:6px}
.pstate b{font-size:17px;letter-spacing:-.02em}
.plansetup .srcrow form{margin:0}
.plansetup .wide,.clientplan .wide,.plansguide .wide{display:flex;width:100%;min-height:48px;margin-top:12px}
@media (min-width:1024px){
  .plansetup .tsheet,.plansguide .tsheet{max-width:760px}
}

/* ── R14c: reports. One series per chart, in the app's ink; values written beside each bar in text colour; a readout
   on hover or focus; a table view. Thin bars, 4px rounded ends at the value side, a recessive track. ───────────── */
.rgrid{display:grid;gap:14px}
.rcard{display:grid;gap:10px;min-width:0}
.rh{font-size:17px;font-weight:800;letter-spacing:-.02em;margin:0}
.rhero{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.rhero b{font-size:40px;font-weight:800;letter-spacing:-.04em;line-height:1}
.rhero span{font-size:14px;color:var(--grey-d)}
.rcard .lab{margin:6px 0 0}
.rempty{font-size:14px;color:var(--grey-d);margin:0}
.hbars{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.hbrow{position:relative;display:grid;grid-template-columns:minmax(84px,30%) minmax(0,1fr) auto;align-items:center;gap:10px;min-height:44px;padding:0 6px;border-radius:var(--r-ctl);color:var(--ink);text-decoration:none;outline:none}
.hbl{font-size:13.5px;color:var(--grey-d);overflow-wrap:anywhere;line-height:1.25}
.hbt{height:12px;background:var(--sunken);border-radius:0 4px 4px 0;overflow:hidden}
.hbt i{display:block;height:100%;width:var(--w);background:var(--ink);border-radius:0 4px 4px 0}
.hbv{font-size:13.5px;font-weight:700;color:var(--ink);white-space:nowrap}
.hbtip{position:absolute;right:6px;bottom:calc(100% - 4px);z-index:3;background:var(--ink);color:var(--white);font-size:12.5px;padding:6px 9px;border-radius:8px;max-width:calc(100% - 12px);opacity:0;pointer-events:none;transform:translateY(4px);transition:opacity var(--dur-fast),transform var(--dur-fast)}
.hbrow:focus-visible{box-shadow:0 0 0 2px var(--ink)}
.hbrow:focus .hbtip,.hbrow:focus-visible .hbtip{opacity:1;transform:none}
@media (hover:hover){.hbrow:hover{background:var(--sunken)}.hbrow:hover .hbtip{opacity:1;transform:none}}
.hbtable summary{font-size:13px;color:var(--grey-d);cursor:pointer;min-height:44px;display:flex;align-items:center}
.hbtable table{width:100%;border-collapse:collapse;font-size:13.5px;margin-top:6px}
.hbtable th,.hbtable td{text-align:left;padding:6px 4px;border-top:1px solid var(--line-soft);font-weight:400}
.hbtable thead th{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--grey);border-top:0}
.hbtable .num{text-align:right}
@media (min-width:1024px){
  .rgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ── R14b: the transaction checklist on a deal, and Setup's periods. ─────────────────────────────────────── */
.dcheck{padding:14px 16px;display:grid;gap:10px}
.dcaccept{display:flex;align-items:flex-end;gap:10px}
.dcaccept .fldlab{flex:1;margin:0}
.dcaccept .btn{min-height:44px}
.dclist{list-style:none;margin:0;padding:0;display:grid}
.dcrow{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--line-soft)}
.dcrow:first-child{border-top:0}
.dctick{margin:0}
.dcbox{width:44px;height:44px;border-radius:12px;border:1.5px solid var(--line);background:var(--white);font-weight:800;font-size:18px;color:var(--white);display:grid;place-items:center;cursor:pointer}
.dcrow.done .dcbox{background:var(--ink);border-color:var(--ink)}
.dcl{display:grid;gap:2px;min-width:0}
.dcl b{font-size:15px;letter-spacing:-.015em;overflow-wrap:anywhere}
.dcl > span{font-size:13px;color:var(--grey-d)}
.dcrow.done .dcl b{color:var(--grey-d);text-decoration:line-through;text-decoration-color:var(--line)}
.dcdate{position:relative}
.dcdate summary{list-style:none;min-height:44px;display:flex;align-items:center;padding:0 10px;font-size:13px;color:var(--grey-d);cursor:pointer;border-radius:var(--r-ctl)}
.dcdate summary::-webkit-details-marker{display:none}
.dcdate[open] summary{background:var(--sunken)}
.dcdate form{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px;padding:8px 0}
.dcrow .dcdate[open]{grid-column:2 / -1}
.dcdate form .btn{min-height:44px}
.ckform{display:grid;gap:10px}
.ckrow{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:8px 0;border-top:1px solid var(--line-soft)}
.cklab{display:flex;align-items:center;gap:10px;font-size:14.5px;min-height:44px;flex:1 1 200px}
.cklab input{width:20px;height:20px}
.ckdays{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--grey-d)}
.ckdays .fld{width:76px;text-align:right}
.dform .wide{min-height:48px}            /* the deal page's Save (R7a) was 40px on the phone: a 44px tap at least */

/* ── R15: the team's pool in the Inbox, and the team pages. ───────────────────────────────────────────────── */
.poolsec{margin:0 0 18px}
.poolsec .lab{margin-top:0}
.tmform{display:grid;gap:6px}
.tmopt{display:flex;align-items:center;gap:10px;min-height:44px;font-size:14.5px}
.tmopt input{width:20px;height:20px}
.tmrule{flex-wrap:wrap}
.tmrule .fld{flex:1 1 140px;min-height:44px}
.tmrule .btn{min-height:44px}
.tmtest{display:grid;gap:8px}
.tmtest p{margin:0}
.tmtotals{padding:6px 14px;overflow-x:auto}
.tmtotals table{width:100%;border-collapse:collapse;font-size:14px}
.tmtotals th,.tmtotals td{padding:9px 4px;border-top:1px solid var(--line-soft);text-align:left;font-weight:400}
.tmtotals thead th{border-top:0;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--grey)}
.tmtotals .num{text-align:right}
.tmtotals tr.tot th,.tmtotals tr.tot td{font-weight:700}
.tmlead{flex-wrap:wrap}
.tmlead .sr{gap:8px;flex-wrap:wrap}
.tmlead .fld{min-height:44px;max-width:180px}
.tmlead .btn{min-height:44px}
.teampage .wide{display:flex;width:100%;min-height:48px;margin-top:12px}
@media (min-width:1024px){ .teampage .tsheet{max-width:760px} }
.tmhow p{margin:0 0 8px;font-size:14.5px;line-height:1.5}
.tmhow p:last-child{margin-bottom:0}
.tmleave{display:grid;gap:10px}
.tmleave > b{font-size:16px;letter-spacing:-.02em}
.tmleave .fine{margin:0}
.teampage .quietbtn{background:transparent;border:0;color:var(--grey-d);text-decoration:underline}

/* ── The checklist, your way (9 October 2026): one deal's own items, "not in this contract", your default items. ── */
.dcadd{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:end;padding-top:10px;border-top:1px solid var(--line-soft)}
.dcadd .fldlab{margin:0}
.dcadd .btn{min-height:44px}
.dcgone{display:grid;gap:6px;padding-top:6px}
.dcgone .lab{margin:6px 0 0}
.dcgonerow{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:14px;color:var(--grey-d);min-height:44px}
.dcgonerow .btn{min-height:44px}
.ckaddform{margin-top:12px}
.ckaddrow{display:grid;grid-template-columns:120px minmax(0,1fr);gap:10px}
.ckown{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:14px;border-top:1px solid var(--line-soft);padding-top:8px}
.ckown .btn{min-height:44px}
@media (max-width:760px){ .dcadd{grid-template-columns:minmax(0,1fr)} .dcadd .btn{width:100%} }

/* 0062 (`mls_seats`): each agent's own CRMLS ID, where it stands, on the owner's Team list */
.srcrow .sl > span.tmcrmls{font-size:12px;font-weight:600;color:var(--amber)}
.srcrow .sl > span.tmcrmls.on{color:var(--grey-d)}
/* "see every home" sits in a sentence: a 44px tap without moving the line (9 October 2026) */
button.linklike[data-m2-near-off]{padding:12px 0;margin:-12px 0}
/* 0062: Market's "Add your CRMLS ID" is a 44px tap on the phone, as every link in a bar */
.upbar[data-own-id] a{min-height:44px;display:inline-flex;align-items:center}

/* ── Ask FOLLOWap (R10a; mockup screens 70 to 73) ─────────────────────────
   The green mic in the phone's header, the box at the top of every desk page (and ⌘K), and one box for both:
   a sheet that rises on the phone, a palette in the middle of the desk. */
/* The mic sits in the header's line: a 32px green circle on the crumb's centre line, its right edge on the header's
   20px margin, inside a 44px tap that is clear (the header is 47px; a 44px circle filled it, 10 October 2026). */
.top:has(.askmic) .wrap{padding-right:calc(64px + env(safe-area-inset-right))}
.askmic{position:absolute;right:calc(env(safe-area-inset-right) + 14px);top:calc(env(safe-area-inset-top) + 1px);width:44px;height:44px;
  padding:0;border:0;background:transparent;color:var(--ink);display:grid;place-items:center;cursor:pointer;-webkit-tap-highlight-color:transparent}
.askmic::before{content:"";position:absolute;inset:6px;border-radius:50%;background:var(--green);transition:transform 80ms ease-out}
.askmic svg{position:relative;width:17px;height:17px}
.askmic:active::before{transform:scale(.92)}
.askmic:focus-visible{outline:none}
.askmic:focus-visible::before{outline:2px solid var(--green);outline-offset:2px}
.askband{display:none}
@media (min-width:761px){
  /* On the rail wordmark's centre line (30px down), as the phone's mic is on its crumb's; the page below stays put. */
  .askband{display:flex;justify-content:flex-end;padding:12px 0 0;margin:0 0 4px}
  .askbar{display:flex;align-items:center;gap:10px;width:280px;max-width:100%;height:36px;padding:0 8px 0 4px;border-radius:var(--r-ctl);
    border:1px solid var(--line);background:var(--white);color:var(--grey);font:inherit;font-size:14px;cursor:pointer;text-align:left}
  .askbar .mi{width:28px;height:28px;border-radius:8px;background:var(--ink);color:var(--white);display:grid;place-items:center;flex:0 0 auto}
  .askbar .ph{flex:1}
  .askbar kbd{font:600 11px/1 Inter,sans-serif;color:var(--grey-d);background:var(--sunken);border:1px solid var(--line);border-radius:6px;padding:4px 6px}
}
@media (min-width:761px) and (hover:hover){.askbar:hover{border-color:var(--grey)}}
.askscrim{position:fixed;inset:0;z-index:80;background:rgba(25,25,27,.42)}
.askpal{position:fixed;z-index:81;left:0;right:0;bottom:0;max-height:88vh;overflow-y:auto;overscroll-behavior:contain;background:var(--paper);color:var(--ink);
  border-radius:24px 24px 0 0;padding:10px 20px calc(20px + env(safe-area-inset-bottom));box-shadow:0 -10px 40px rgba(0,0,0,.18);
  transform:translateY(24px);opacity:0;transition:transform var(--dur-base) var(--ease-out),opacity var(--dur-fast) var(--ease-out)}
.askpal.up{transform:none;opacity:1}
.askpal .grab{width:38px;height:5px;border-radius:3px;background:rgba(0,0,0,.16);margin:2px auto 14px}
.askin{display:flex;align-items:center;gap:10px;padding:6px;border-radius:var(--r-ctl);background:var(--white);border:1px solid var(--line)}
.askin input{flex:1;min-width:0;border:0;background:none;font:inherit;font-size:17px;color:var(--ink);padding:8px 4px;outline:none}
.askin .micbtn,.askin .askgo{width:44px;height:44px;border-radius:10px;border:0;background:var(--ink);color:var(--white);display:grid;place-items:center;cursor:pointer;flex:0 0 auto}
.askin .micbtn{background:var(--green);color:var(--ink)}
.askin .askesc{display:none}
.askpal.busy .askin{opacity:.7}
.askpal .plab{font-size:11px;font-weight:700;letter-spacing:.09em;color:var(--grey);margin:18px 2px 8px}
.askres:empty{display:none}
.akrow{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:10px 12px;border:0;border-radius:var(--r-ctl);background:none;color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.akrow.on{background:var(--white);border:1px solid var(--line)}
.akrow .pic{width:34px;height:34px;border-radius:9px;border:1px solid var(--line);display:grid;place-items:center;flex:0 0 auto;color:var(--grey-d);background:var(--white)}
.akrow .pic.dark{background:var(--ink);color:var(--white);border-color:var(--ink)}
.akrow .pt{flex:1;min-width:0;display:grid;gap:6px;font-size:15px;line-height:1.35}
.akrow.try .pt{color:var(--grey-d)}
.akrow .pt .sub{font-size:13px;color:var(--grey)}
.akrow .pn{font-weight:700;font-size:14px;white-space:nowrap}
.akrow .askenter{display:none}
.askchips{display:flex;flex-wrap:wrap;gap:6px}
.askchip{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:13px;background:var(--ink);color:var(--white);font-size:12.5px;font-weight:600}
.askshow{margin-top:10px}
.asknone,.askwait,.askerr{margin:16px 2px 4px;font-size:15px;color:var(--grey-d);line-height:1.45}
.askerr{color:var(--amber)}
.askconfirm .cfield{display:flex;gap:14px;padding:14px 2px;border-top:1px solid var(--line)}
.askconfirm .cfield:first-of-type{border-top:0}
.askconfirm .cl{width:64px;flex:0 0 auto;color:var(--grey);font-size:15px}
.askconfirm .cv{display:grid;gap:3px;font-size:17px}
.askconfirm .cv span{font-size:14px;color:var(--grey)}
.askconfirm .two{margin-top:12px}
/* Ask's list cards (R10d): the search as chips, the homes it found, and who it is for when no one was said */
.askconfirm .cv .askchips{margin-top:4px}
.askconfirm .cv .askchip{font-size:12.5px;color:var(--white)}
.askconfirm .chomes{display:grid;gap:2px;margin-top:6px;font-size:14px;color:var(--grey-d)}
.askconfirm .cchoices{display:grid;gap:2px;margin-top:6px}
.askconfirm .cchoice{display:flex;align-items:flex-start;gap:10px;padding:8px 0;font-size:16px;cursor:pointer}
.askconfirm .cchoice input{width:18px;height:18px;margin:2px 0 0;accent-color:var(--ink);flex:0 0 auto}
.askconfirm .cv .cchoice span{font-size:16px;color:var(--ink)}
.askconfirm .cchoice small{display:block;font-size:13px;color:var(--grey)}
.askpal .lnote{margin-top:12px;text-align:center;font-size:13px;color:var(--grey)}
.asklisten{text-align:center;padding:12px 0 4px}
.asklisten .lk{display:flex;align-items:center;justify-content:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--grey-d)}
.asklisten .live{width:9px;height:9px;border-radius:50%;background:var(--green)}
.asklisten .wave{display:flex;align-items:center;justify-content:center;gap:5px;height:64px;margin:12px 0}
.asklisten .wave i{display:block;width:5px;height:16px;border-radius:3px;background:var(--green);animation:askwave .9s var(--ease-out) infinite alternate;animation-delay:calc(var(--d) * 70ms)}
@keyframes askwave{to{height:46px}}
@media (prefers-reduced-motion: reduce){.asklisten .wave i{animation:none;height:28px}}
.askfoot{display:flex;gap:8px;align-items:flex-start;margin:16px -20px 0;padding:12px 20px 0;border-top:1px solid var(--line);font-size:12.5px;color:var(--grey);line-height:1.45}
.askfoot svg{flex:0 0 auto;margin-top:2px}
.askclose{margin-top:14px}
.hansw .hp{font-size:16px;line-height:1.5;margin:0 2px}
.hansw .hsrc{margin:10px 2px 0;font-size:13px;color:var(--grey-d)}
.hansw .hact{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
@media (min-width:761px){
  .askpal{left:50%;right:auto;bottom:auto;top:84px;width:660px;max-width:calc(100vw - 48px);max-height:calc(100vh - 120px);transform:translate(-50%,-10px);
    border-radius:18px;padding:0 0 0;background:var(--white);box-shadow:0 24px 70px rgba(0,0,0,.28)}
  .askpal.up{transform:translate(-50%,0)}
  .askpal .grab,.askclose{display:none}
  .askin{border:0;border-bottom:1px solid var(--line);border-radius:18px 18px 0 0;padding:14px 16px}
  .askin input{font-size:18px}
  .askin .askesc{display:block;font:600 11px/1 Inter,sans-serif;color:var(--grey-d);background:var(--sunken);border:1px solid var(--line);border-radius:6px;padding:5px 7px}
  .askres,.asktry,.askpal > .plab{margin-left:8px;margin-right:8px}
  .askpal > .plab{margin-left:18px}
  .askres > .plab{margin-left:10px}
  .akrow.on{background:var(--sunken);border:0}
  .akrow .askenter{display:inline-block;font:600 11px/1 Inter,sans-serif;color:var(--grey-d);border:1px solid var(--line);border-radius:6px;padding:4px 6px;background:var(--white)}
  .askshow{display:none}
  .askfoot{margin:12px 0 0;padding:12px 18px;background:var(--sunken);border-radius:0 0 18px 18px}
  .askconfirm{padding:0 10px}
  .asknone,.askwait,.askerr{margin:16px 18px 6px}
  .hansw{padding:0 10px}
}
@media (hover:hover){.akrow.try:hover{background:var(--sunken)}}
/* Setup › Ask by voice: Safari's question, drawn, with Allow marked */
.askshot{margin:14px 0 6px}
.sfprompt{max-width:300px;margin:0 auto;background:var(--sunken);border-radius:14px;padding:16px 16px 0;text-align:center;font-size:14px;line-height:1.35;color:var(--ink);box-shadow:0 6px 24px rgba(0,0,0,.12)}
.sfbtns{display:flex;margin:14px -16px 0;border-top:1px solid var(--line)}
.sfbtns span{flex:1;padding:12px 0;color:var(--grey-d);font-weight:500}
.sfbtns span + span{border-left:1px solid var(--line)}
.sfbtns .mark{font-weight:700;outline:3px solid var(--green);outline-offset:-3px;border-radius:0 0 14px 0}
.askshot figcaption{text-align:center;margin-top:8px}
.askpal .wide{min-height:48px}
.askin input,.askin input:focus,.askin input:focus-visible{border:0;box-shadow:none;outline:none;background:none}
.askin:focus-within{border-color:var(--grey)}

/* ── Help (R10b; mockup screens 74 to 77): a public page, scrolling as a page, the site's top bar ── */
html.helpdoc{height:auto;overflow:auto}
body.helpsite{height:auto;display:block;overflow:visible;background:var(--paper)}
/* the product audit (19 October 2026): Help's secondary text at 4.75:1 on its paper (the shared grey is 2.95:1) */
body.helpsite{--grey:#68686A}
.hnav{background:var(--stage);color:var(--white)}
.hnavin{max-width:1180px;margin:0 auto;display:flex;align-items:center;gap:18px;padding:calc(14px + env(safe-area-inset-top)) 20px 14px}
.hmark{font-size:18px;font-weight:800;letter-spacing:-.035em;color:var(--white)}
.hmark .ap{color:var(--green)}
.hnav .sp{flex:1}
.hnavlink{color:var(--never);font-size:15px;min-height:44px;display:inline-flex;align-items:center}
.hcta{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:1px solid rgba(255,255,255,.25);border-radius:22px;color:var(--white);font-weight:600;font-size:15px}
.hmain{max-width:740px;margin:0 auto;padding:34px 20px 40px}
.hh1{font-size:clamp(36px,7vw,56px);line-height:1.05;letter-spacing:-.045em;font-weight:800;margin:6px 0 12px}
.hlead{font-size:18px;line-height:1.5;color:var(--grey-d);margin-bottom:24px}
.hback{display:inline-flex;min-height:44px;align-items:center;color:var(--grey-d);font-size:15px}
.hask{display:flex;align-items:center;gap:10px;padding:6px 6px 6px 18px;border-radius:30px;background:var(--white);border:1px solid var(--line);color:var(--grey)}
.hask input{flex:1;min-width:0;border:0;background:none;outline:none;font-size:16px;color:var(--ink);height:44px}
.hask .hgo{min-height:44px;padding:0 20px;border-radius:22px;border:0;background:var(--ink);color:var(--white);font-weight:700;cursor:pointer}
.hask:focus-within{border-color:var(--grey)}
.hans{margin-top:12px;padding:18px 20px;border-radius:var(--r);background:var(--white);border:1px solid var(--line)}
.hans .hq{font-size:13px;font-weight:600;color:var(--grey-d);margin-bottom:6px}
.hans .hp{font-size:16px;line-height:1.55}
.hans .hsrcrow{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;align-items:center;margin-top:14px;padding-top:12px;border-top:1px solid var(--line);font-size:14px;color:var(--grey-d)}
.hans .hsrcrow a,.hans .hmail,.hans .hmatch{font-weight:700;color:var(--ink);text-decoration:underline;text-underline-offset:3px;min-height:44px;display:inline-flex;align-items:center}
.hans .hmatch{display:flex}
.hans .hfine,.hnote{font-size:12.5px;color:var(--grey);margin-top:8px;line-height:1.45}
.hans .hwait{color:var(--grey-d)}
.hsec{font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--grey);margin:34px 2px 10px}
.hlist{display:grid;gap:10px}
.hgrow{display:flex;align-items:center;gap:14px;padding:16px 20px;border-radius:var(--r);background:var(--white);border:1px solid var(--line);color:var(--ink)}
.hgrow > span{flex:1;display:grid;gap:4px}
.hgrow b{font-size:17px;letter-spacing:-.015em}
.hgrow > span > span{font-size:14.5px;color:var(--grey-d)}
.hgrow svg{color:var(--grey);flex:0 0 auto}
.hart{font-size:17px;line-height:1.6}
.hart p,.hart ol,.hart ul{margin:0 0 16px}
.hart h3{font-size:22px;letter-spacing:-.025em;margin:30px 0 10px}
.hart ol,.hart ul{padding-left:22px;display:grid;gap:8px}
.hart a{text-decoration:underline;text-underline-offset:3px}
.hfoot{max-width:740px;margin:0 auto;padding:20px 20px calc(30px + env(safe-area-inset-bottom));display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;font-size:13px;color:var(--grey)}
.hfoot a{min-height:44px;display:inline-flex;align-items:center}
@media (hover:hover){.hgrow:hover{border-color:var(--grey)}}

/* R13: Send from Gmail beside each email on the card; the compose page; Google's screen drawn in Setup › Gmail */
.mode .gmsend{display:flex;align-items:center;justify-content:center;min-height:44px;margin:-2px 0 10px;border-radius:var(--r-ctl);border:1px solid var(--line);background:var(--white);font-weight:600;font-size:14px;color:var(--ink)}
.gmform{display:grid;gap:12px}
.gmform .gmbody{min-height:220px;resize:vertical;line-height:1.5;padding:12px 14px}
.gconsent{text-align:left}
.gconsent > b{display:block;text-align:center;margin-bottom:10px}
.gscope{display:flex;gap:10px;align-items:center;padding:8px 4px;border-top:1px solid var(--line);font-size:13.5px}
.gscope .tick{width:20px;height:20px;border-radius:5px;background:var(--ink);color:var(--white);display:grid;place-items:center;font-size:12px;flex:0 0 auto}
.gscope.mark{outline:3px solid var(--green);outline-offset:2px;border-radius:6px}
.gmform .wide{min-height:48px}

/* ── Estimated value on the client card (R11a; agent-only) ─────────────────
   One box at every width: the estimate, its range, what they paid, the source beside it; or the one field. */
.hvbox{display:grid;gap:6px;background:var(--white);border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.hvtop{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.hvnum{font-size:24px;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.hvgain{font-size:13.5px;font-weight:700;color:var(--grey-d)}
.hvrange,.hvpaid{font-size:13.5px;color:var(--grey-d)}
.hvnote,.hvask,.hvnone{margin:0;font-size:12.5px;line-height:1.45;color:var(--grey)}
.hvask{font-size:13.5px;color:var(--grey-d)}
.hvform{display:flex;gap:8px;margin:4px 0 0}
.hvform .fld{flex:1 1 auto;min-width:0;margin:0}
.hvform .hvyear{flex:0 0 92px;width:92px}
.hvform.busy{opacity:.55}
.hvedit>summary{min-height:44px;display:flex;align-items:center;cursor:pointer;color:var(--grey-d);font-weight:600;font-size:13.5px;list-style:none}
.hvedit>summary::-webkit-details-marker{display:none}
.hvedit>summary::after{content:"›";margin-left:6px;transition:transform 120ms ease-out}
.hvedit[open]>summary::after{transform:rotate(90deg)}
.hvedit p{margin:0 0 8px;font-size:12.5px;line-height:1.45;color:var(--grey)}
.hvfhfa{display:block;margin-top:2px;font-size:11.5px}
.hvbox .cdadd{min-height:44px;display:inline-flex;align-items:center}

/* The card's Mark as reached is a 44px tap, as every button the phone shows (R11a's scene measured it at 40). */
form[data-mark] .wide{min-height:44px}

/* ── Sales near you, the monthly client email (R11b) ─────────────────────── */
.cemaddr{display:flex;gap:8px;margin:0 0 6px}
.cemaddr .fld{flex:1 1 auto;min-width:0;margin:0}
.cemaddr .btn{flex:0 0 auto;min-height:44px}
a.cemrow{color:inherit;text-decoration:none;min-height:44px}
.cemhead{display:grid;gap:6px;margin:0 0 12px;font-size:14px}
.cemhead div{display:grid;grid-template-columns:70px 1fr;gap:8px;align-items:baseline}
.cemhead span{color:var(--grey);font-size:12.5px}
.cemhead b{font-weight:600;overflow-wrap:anywhere}
.cemframe{display:block;width:100%;height:1180px;border:1px solid var(--line);border-radius:14px;background:#EDECE7}
@media (min-width:761px){.cemframe{height:1040px}}
.cemswitch{display:flex;align-items:center;gap:10px;margin:14px 0 0;padding:10px 12px;background:var(--white);border:1px solid var(--line);border-radius:14px}
.cemswitch>span{flex:1 1 auto;display:grid;gap:2px;min-width:0;font-size:13.5px}
.cemswitch>span span{color:var(--grey-d);font-size:12.5px}
.cemswitch.busy{opacity:.55}

/* ── Likely to sell (R14a; agent-only) ──────────────────────────────────── */
.ssbox{display:grid;gap:6px;background:var(--white);border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.sstop{display:flex;align-items:baseline;gap:10px}
.ssband{font-size:18px;font-weight:800}
.ssband.high{color:#2F9E52}
.sstop span{font-size:13px;color:var(--grey-d)}
.ssreasons{margin:0;padding-left:18px;font-size:13.5px;line-height:1.5;color:var(--ink)}
.ssbox .cdadd{min-height:44px;display:inline-flex;align-items:center}
.likelypage .backlink,.cempage .backlink{min-height:44px;display:inline-flex;align-items:center}
@media (min-width:1024px){body[data-tab=clients] .likelypage .tsheet{display:block}.likelypage .tsheet > *{max-width:760px}}


/* ── Ask's list of clients (/clients/find): chips over the list, each with ×, and Save as filter ─────────── */
.findchips{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0}
.findchip{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 12px;border-radius:999px;background:rgba(255,255,255,.12);
  color:var(--white);font-size:14px;font-weight:600;text-decoration:none}
.findchip svg{opacity:.8}
.findchip.none{opacity:.7}
.findsave>summary{min-height:44px;display:inline-flex;align-items:center;padding:0 16px;border:1px solid var(--line);border-radius:999px;
  background:var(--white);font-weight:700;font-size:14.5px;cursor:pointer;list-style:none}
.findsave>summary::-webkit-details-marker{display:none}
.findsaveform{display:flex;gap:8px;margin:10px 0 0}
.findsaveform .fld{flex:1 1 auto;min-width:0;margin:0}
.findsaveform .btn{min-height:44px}
.findpage .backlink{min-height:44px;display:inline-flex;align-items:center}
@media (max-width:760px){.findchip{min-height:44px}}
@media (min-width:761px){.findchip{background:var(--white);color:var(--ink);border:1px solid var(--line)}}
@media (min-width:1024px){body[data-tab=clients] .findpage .tsheet > .findsave{grid-column:1/-1}}
.sincechips{margin:0 0 12px}
.sincechips .findchip{background:var(--white);color:var(--ink);border:1px solid var(--line);min-height:44px}


/* ── Setup › Fill in purchase prices: a row each, Enter saves and moves on ─────────────────────────────────── */
.purchlist{display:grid;gap:10px}
.purchrow{display:grid;gap:8px;background:var(--white);border:1px solid var(--line);border-radius:14px;padding:12px 14px}
.purchwho{display:grid;gap:2px;font-size:14.5px}
.purchwho span{font-size:12.5px;color:var(--grey-d)}
.purchfields{display:flex;gap:8px}
.purchfields .fld{flex:1 1 auto;min-width:0;margin:0}
.purchfields .purchyear{flex:0 0 92px;width:92px}
.purchrow.saved{border-color:var(--green)}
.purchrow.saved .purchfields .fld{border-color:var(--green)}
.purchsaid{margin:0;font-size:13px;color:var(--grey-d)}
.purchpage .backlink{min-height:44px;display:inline-flex;align-items:center}
@media (min-width:761px){.purchrow{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);align-items:center}.purchsaid{grid-column:1/-1}}