/* The portal's look (Oct 27), one copy: the "stepping into 2027" style first built for Snapshot (Landon, Oct 26), lifted
   out so every page wears the same one. build.py puts it where a template says LOOKCSS (in a comment), at the top of its
   <style>, before the page's own layout rules. Warm stone background, big soft cards (28px), one deep green hero in the
   family office's own green with brass for "a year before", smooth lines, capsule bars, gradient rings, numbers in Geist
   (Archivo stays for the frame), a glowing glass Dark. A page that uses it loads Geist with its fonts. The drawing
   helpers that go with it are look.js. */
:root{
  --bg:#ebe9e4; --paper:#ffffff; --ink:#12201b; --muted:#68726d; --line:#e6e2db; --soft:#f4f2ee;
  --accent:#1d5c4d; --accent-soft:#e1efea;
  --crit:#c2412f; --crit-soft:#fbe6e1; --warn:#8a5a00; --warn-soft:#fdf3dc;
  --jade:#17946c; --jade2:#4fd29b; --sky:#3f72e8; --sky2:#86adff; --brass:#b98f4c; --brass2:#e2c48c; --coral:#e2563f; --coral2:#f08a6c;
  --up:#0f7a55; --up-soft:#dcf2e8; --track:#ece9e3; --cap:#e1ddd5; --capt:#cfc9be;
  --hero-a:#0b3a2e; --hero-b:#135d4a; --hero-c:#2a9670; --hero-glow:rgba(226,196,140,.55);
  --card-bg:var(--paper); --card-edge:transparent;
  --shadow:0 1px 2px rgba(18,32,27,.04),0 22px 44px -26px rgba(18,32,27,.30);
  --glow:none;
  --f-display:'Archivo',ui-sans-serif,system-ui,sans-serif; --f-label:'Archivo Narrow','Arial Narrow',ui-sans-serif,sans-serif;
  --f-ui:'Geist','Archivo',ui-sans-serif,system-ui,sans-serif; --f-num:'Geist','Archivo',ui-sans-serif,system-ui,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#060d0b; --paper:#0d1815; --ink:#e8f1ed; --muted:#8ea29a; --line:#1b2a26; --soft:#12201c;
  --accent:#6cc3a8; --accent-soft:#1d3a32; --crit:#ff7b66; --crit-soft:#3a1712; --warn:#f0c060; --warn-soft:#3a2e14;
  --jade:#25c98d; --jade2:#7cf5c3; --sky:#5a8bff; --sky2:#a3c4ff; --brass:#d8b06a; --brass2:#f0d39b; --coral:#ff6f58; --coral2:#ff9a7d;
  --up:#5ce3aa; --up-soft:#0e3527; --track:#16251f; --cap:#1a2b26; --capt:#25403a;
  --hero-a:#082a21; --hero-b:#0c4636; --hero-c:#17795a; --hero-glow:rgba(240,211,155,.32);
  --card-bg:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012)) var(--paper); --card-edge:rgba(124,245,195,.09);
  --shadow:0 30px 60px -36px rgba(0,0,0,.9); --glow:drop-shadow(0 0 6px rgba(124,245,195,.55));
  color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#060d0b; --paper:#0d1815; --ink:#e8f1ed; --muted:#8ea29a; --line:#1b2a26; --soft:#12201c;
  --accent:#6cc3a8; --accent-soft:#1d3a32; --crit:#ff7b66; --crit-soft:#3a1712; --warn:#f0c060; --warn-soft:#3a2e14;
  --jade:#25c98d; --jade2:#7cf5c3; --sky:#5a8bff; --sky2:#a3c4ff; --brass:#d8b06a; --brass2:#f0d39b; --coral:#ff6f58; --coral2:#ff9a7d;
  --up:#5ce3aa; --up-soft:#0e3527; --track:#16251f; --cap:#1a2b26; --capt:#25403a;
  --hero-a:#082a21; --hero-b:#0c4636; --hero-c:#17795a; --hero-glow:rgba(240,211,155,.32);
  --card-bg:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012)) var(--paper); --card-edge:rgba(124,245,195,.09);
  --shadow:0 30px 60px -36px rgba(0,0,0,.9); --glow:drop-shadow(0 0 6px rgba(124,245,195,.55));
  color-scheme:dark}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-display);font-size:15px;line-height:1.45}
.wrap{max-width:1240px;margin:0 auto;padding-inline:16px;padding-block:20px 64px}
.controls{position:sticky;top:var(--shelltop,0px);z-index:5;background:var(--bg);padding-block:12px;margin-top:14px;display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center}
.chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.empty{color:var(--muted);padding:12px 4px;font-size:14px}
#main{font-family:var(--f-ui);font-feature-settings:"tnum" 1,"ss01" 1}
.stale{margin:10px 0 0;color:var(--warn);font-size:14px}

/* cards */
.card{background:var(--card-bg);border-radius:28px;box-shadow:var(--shadow),inset 0 0 0 1px var(--card-edge);padding:24px 26px;min-width:0;position:relative}
.card h2{margin:0;font:600 17px/1.25 var(--f-ui);letter-spacing:-.01em;display:flex;align-items:center;gap:10px}
.card h2 .go{margin-left:auto;font:500 13px var(--f-ui);color:var(--muted);text-decoration:none;padding:6px 12px;border-radius:999px;background:var(--soft)}
.card h2 .go:hover{color:var(--ink)}
.card .sub{margin:4px 0 0;color:var(--muted);font-size:13.5px;line-height:1.4}
.card .big{font:600 46px/1 var(--f-num);letter-spacing:-.035em;margin:0}
.card .big.neg,.mid.neg{color:var(--coral)}
.mid{font:600 30px/1.05 var(--f-num);letter-spacing:-.03em;margin:12px 0 0}

/* change chips */
.chg{display:inline-flex;align-items:center;gap:3px;font:600 12.5px var(--f-num);padding:3px 9px 3px 7px;border-radius:999px;white-space:nowrap;background:var(--soft);color:var(--muted)}
.chg.up{background:var(--up-soft);color:var(--up)}
.chg.dn{background:var(--crit-soft);color:var(--crit)}
.chg svg{width:12px;height:12px}
.chg i{font-style:normal;font-weight:500;opacity:.8;margin-left:3px}

/* the hero: one deep green card a page leads with */
.hero{display:flex;flex-direction:column;border-radius:32px;padding:26px 26px 22px;color:#f3fbf7;overflow:hidden;isolation:isolate;
  background:radial-gradient(120% 90% at 100% 0%,var(--hero-glow),transparent 55%),linear-gradient(150deg,var(--hero-a),var(--hero-b) 52%,var(--hero-c));
  box-shadow:0 30px 50px -28px var(--hero-shadow,rgba(11,58,46,.65)),inset 0 0 0 1px rgba(255,255,255,.08)}
.hero::after{content:"";position:absolute;inset:auto -30% -55% auto;width:80%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,var(--hero-orb,rgba(79,210,155,.35)),transparent 65%);z-index:-1}
.hero .hl{display:flex;align-items:center;gap:10px;font:500 14.5px var(--f-ui);color:rgba(243,251,247,.82)}
.hero .big{margin-top:12px;font-size:52px;color:#fff}
.hero .hc{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.hero .chg{background:rgba(255,255,255,.14);color:#fff;backdrop-filter:blur(6px)}
.hero .chg.dn{background:rgba(255,140,120,.22);color:#ffd9d0}
.wavebox{flex:1 1 auto;min-height:150px;margin-top:14px;display:flex;flex-direction:column;justify-content:flex-end}
.wave{display:block;width:100%;height:auto;overflow:visible}
.wave .ty{fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;filter:drop-shadow(0 0 5px rgba(255,255,255,.55))}
.wave .ta{fill:url(#heroFill)}
.wave .ly{fill:none;stroke:var(--brass2);stroke-width:2;stroke-dasharray:1 5;stroke-linecap:round;opacity:.95}
.wave .dot{fill:#fff}
.wave .halo{fill:rgba(255,255,255,.22)}
.wlabs{display:flex;justify-content:space-between;font:500 11px var(--f-ui);color:rgba(243,251,247,.55);margin-top:4px;letter-spacing:.02em}
.hkey{display:flex;gap:14px;margin:10px 0 18px;font-size:12px;color:rgba(243,251,247,.7)}
.hkey i{display:inline-block;width:14px;height:0;border-top:2.5px solid #fff;margin-right:6px;vertical-align:3px;border-radius:2px}
.hkey i.l{border-top:2px dotted var(--brass2)}
.hmix{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:auto;padding-top:14px;border-top:1px solid rgba(255,255,255,.14)}
.hmix div{display:flex;flex-direction:column;gap:3px;padding-left:12px;border-left:1px dashed rgba(255,255,255,.22);min-width:0}
.hmix div:first-child{padding-left:0;border-left:0}
.hmix span{font-size:12px;color:rgba(243,251,247,.7);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hmix b{font:600 21px var(--f-num);letter-spacing:-.02em;color:#fff}

/* one gradient ring with its legend */
.ringbig{width:100%;max-width:200px;height:auto;display:block;margin:18px auto 6px;overflow:visible}
.ringbig .tr{fill:none;stroke:var(--track);stroke-width:16}
.ringbig .sg{fill:none;stroke-width:16;stroke-linecap:round;filter:var(--glow)}
.ringbig .pc{font:600 34px var(--f-num);fill:var(--ink);text-anchor:middle;letter-spacing:-.03em}
.ringbig .pl{font:500 13px var(--f-ui);fill:var(--muted);text-anchor:middle}
.lgd{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:9px}
.lgd li{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:10px;font-size:14px}
.lgd i{width:10px;height:10px;border-radius:50%}
.lgd .lv{font:600 14px var(--f-num)}
.lgd .lp{font:500 13px var(--f-num);color:var(--muted);min-width:38px;text-align:right}
.note{margin:14px 0 0;font-size:12.5px;color:var(--muted);line-height:1.45}

/* small stat cards with a badge and a capsule bar */
.stat{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 18px;align-items:center;padding:18px 20px 18px 18px}
.badge{grid-row:1/4;display:grid;place-items:center;align-content:center;gap:2px;width:96px;height:96px;border-radius:24px;font:600 26px var(--f-num);letter-spacing:-.03em}
.badge small{font:500 11.5px var(--f-ui);letter-spacing:0;opacity:.8}
.badge.sky{background:linear-gradient(160deg,color-mix(in srgb,var(--sky) 16%,var(--paper)),color-mix(in srgb,var(--sky2) 26%,var(--paper)));color:var(--sky)}
.badge.coral{background:linear-gradient(160deg,color-mix(in srgb,var(--coral) 14%,var(--paper)),color-mix(in srgb,var(--coral2) 24%,var(--paper)));color:var(--coral)}
.badge.jade{background:linear-gradient(160deg,color-mix(in srgb,var(--jade) 14%,var(--paper)),color-mix(in srgb,var(--jade2) 26%,var(--paper)));color:var(--jade)}
.badge.brass{background:linear-gradient(160deg,color-mix(in srgb,var(--brass) 14%,var(--paper)),color-mix(in srgb,var(--brass2) 28%,var(--paper)));color:var(--brass)}
.badge.sm{font-size:21px}
.stat h2{font-size:16px}
.cap{height:10px;border-radius:999px;background:var(--track);overflow:hidden;margin-top:6px}
.cap span{display:block;height:100%;border-radius:999px}
.cap .sky{background:linear-gradient(90deg,var(--sky),var(--sky2))}
.cap .coral{background:linear-gradient(90deg,var(--coral),var(--coral2))}
.cap .jade{background:linear-gradient(90deg,var(--jade),var(--jade2))}
.cap .brass{background:linear-gradient(90deg,var(--brass),var(--brass2))}
.stat .sub{font-size:13px}
.stat .sub b{color:var(--ink);font-weight:600}
.mini{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:3px;align-items:end;height:34px;margin-top:8px}
.mini span{display:block;border-radius:999px;background:var(--cap);min-height:3px}
.mini span.on{background:linear-gradient(180deg,var(--jade2),var(--jade))}

/* the one line that says something needs handling now; the details are on Position */
.attn{display:flex;align-items:center;gap:12px;margin-top:8px;padding:12px 16px 12px 14px;border-radius:999px;background:var(--card-bg);box-shadow:var(--shadow),inset 0 0 0 1px var(--card-edge);text-decoration:none;color:var(--ink);font:500 14px var(--f-ui);min-width:0}
.attn i{flex:none;width:10px;height:10px;border-radius:50%;background:var(--brass);box-shadow:0 0 0 4px color-mix(in srgb,var(--brass) 22%,transparent)}
.attn.crit i{background:var(--coral);box-shadow:0 0 0 4px color-mix(in srgb,var(--coral) 22%,transparent)}
.attn b{font-weight:600;white-space:nowrap}
.attn span{color:var(--muted);min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.attn em{margin-left:auto;flex:none;font-style:normal;font-weight:600;color:var(--accent)}
.attn:hover{box-shadow:var(--shadow),inset 0 0 0 1px var(--line)}
.attn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (max-width:680px){.attn{border-radius:20px;flex-wrap:wrap}.attn span{flex-basis:100%;order:3;white-space:normal}}

/* capsule bars: one a period, the latest lit; a year before as brass dots on a dotted line */
.caps{position:relative;display:grid;gap:0;height:200px;margin-top:20px;align-items:end}
.caps .c{position:relative;height:100%;padding:0 4px;display:flex;align-items:flex-end;justify-content:center}
.caps .c span{display:block;width:100%;max-width:22px;border-radius:999px;background:var(--cap);min-height:6px}
.caps .c.on span{background:linear-gradient(180deg,var(--jade2),var(--jade));box-shadow:0 10px 22px -10px var(--jade)}
.caps .c.on::before{content:"";position:absolute;left:50%;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:var(--paper);border:3px solid var(--jade);bottom:calc(var(--h) + 4px);box-sizing:border-box;z-index:2}
.caps .c em{position:absolute;left:50%;width:7px;height:7px;margin-left:-3.5px;border-radius:50%;background:var(--brass);bottom:calc(var(--l) - 3.5px);z-index:3;box-shadow:0 0 0 2px var(--paper)}
.caps .c.none span{background:repeating-linear-gradient(180deg,var(--cap) 0 3px,transparent 3px 7px);min-height:14px}
.caps svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.caps .lyl{fill:none;stroke:var(--brass);stroke-width:2;stroke-dasharray:2 4;stroke-linecap:round;vector-effect:non-scaling-stroke}
.clabs{display:grid;gap:0;margin-top:8px;font:500 11.5px var(--f-ui);color:var(--muted);text-align:center}
.mkey{display:flex;gap:14px;margin-top:12px;font-size:12px;color:var(--muted)}
.mkey i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:-1px;background:var(--jade)}
.mkey i.l{width:14px;height:0;border-radius:0;border-top:2px dotted var(--brass);vertical-align:3px;background:none}

/* a line that adds up (or moves) day by day, against a brass line for then */
.area{display:block;width:100%;height:auto;margin-top:12px;overflow:visible}
.area .ax{stroke:var(--line);stroke-dasharray:2 5}
.area .axl{font:500 10.5px var(--f-ui);fill:var(--muted)}
.area .nl{fill:none;stroke:var(--jade);stroke-width:3;stroke-linecap:round;filter:var(--glow)}
.area .na{fill:url(#mtdFill)}
.area .tl{fill:none;stroke:var(--brass);stroke-width:2;stroke-dasharray:2 5;stroke-linecap:round}
.area .lab{font:600 12.5px var(--f-num)}

/* a row's avatar and name; a bar split into parts (.splitbar: the frame's Account panel has its own .seg) */
.who{display:flex;align-items:center;gap:12px;min-width:0}
.av2{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:15px;font:600 14px var(--f-ui);letter-spacing:.02em}
.who .nm{display:flex;flex-direction:column;min-width:0}
.who b{font:600 15px var(--f-ui);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.who small{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.splitbar{display:flex;gap:3px;height:8px}
.splitbar span{display:block;height:100%;border-radius:999px;min-width:3px}
.splitbar .lb{background:linear-gradient(90deg,var(--sky),var(--sky2))}
.splitbar .rn{background:linear-gradient(90deg,var(--brass),var(--brass2))}
.splitbar .ea{background:linear-gradient(90deg,var(--jade),var(--jade2))}
.splitbar .sh{background:repeating-linear-gradient(45deg,var(--coral) 0 3px,transparent 3px 6px)}
.lkey{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:14px;font-size:12px;color:var(--muted)}
.lkey i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:-1px}

/* a small line for a row */
.spark{display:block;overflow:visible;--sp:var(--sky)}
.spark.jade{--sp:var(--jade)}.spark.brass{--sp:var(--brass)}.spark.coral{--sp:var(--coral)}
.spark path{fill:none;stroke:var(--sp);stroke-width:2.2;stroke-linecap:round;filter:var(--glow)}
.spark circle{fill:var(--paper);stroke:var(--sp);stroke-width:2.2}

/* one orchestrated moment on first load: the rings sweep and the lines draw */
@media (prefers-reduced-motion:no-preference){
  .intro .ringbig .sg{animation:sweep 1.1s cubic-bezier(.2,.8,.2,1) both}
  .intro .wave .ty,.intro .area .nl{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);animation:draw 1.3s .15s cubic-bezier(.3,.7,.2,1) forwards}
  .intro .caps .c span{animation:rise .8s cubic-bezier(.2,.8,.2,1) both;transform-origin:bottom}
}
@keyframes sweep{from{stroke-dasharray:0 999}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes rise{from{transform:scaleY(.2);opacity:.3}}

@media (max-width:680px){
  .card{padding:20px;border-radius:24px}
  .hero{padding:22px 20px 18px}
  .card .big{font-size:38px}
  .hero .big{font-size:42px}
  .hmix b{font-size:18px}
  .badge{width:80px;height:80px;font-size:22px;border-radius:20px}
  .caps{height:160px}.caps .c{padding:0 2px}
}

/* Oct 27: the pieces Budget, a franchisor's Snapshot and payroll from the books use: a month booked with another
   (hatched), the cash chart's floor, the hero line's zero and the months below it, the folded table, a folded card */
.months .sub b{color:var(--ink);font-weight:600}
.caps .c.odd span{background:repeating-linear-gradient(135deg,var(--capt) 0 4px,var(--cap) 4px 8px)}
.mkey i.od{background:repeating-linear-gradient(135deg,var(--capt) 0 3px,var(--cap) 3px 6px)}
.mkey i.sky{background:var(--sky)}.mkey i.coral{background:var(--coral)}.mkey i.brass{background:var(--brass)}
.area .fl{stroke:var(--brass);stroke-width:1.6;stroke-dasharray:5 5}
.area .fll{font:500 11px var(--f-ui);fill:var(--brass)}
.wave .ng{fill:#ffb4a4;stroke:rgba(0,0,0,.15)}
.ltwrap{overflow-x:auto;margin-top:14px;border-radius:18px;box-shadow:inset 0 0 0 1px var(--line)}
.ltable{border-collapse:separate;border-spacing:0;font:500 13px var(--f-num);min-width:100%}
.ltable th,.ltable td{padding:9px 12px;white-space:nowrap;text-align:right;border-bottom:1px solid var(--line)}
.ltable th:first-child,.ltable td:first-child{position:sticky;left:0;z-index:1;text-align:left;background:var(--paper);font:500 13.5px var(--f-ui);min-width:200px;max-width:300px;white-space:normal}
.ltable thead th{font:500 12px var(--f-ui);color:var(--muted);background:var(--paper)}
.ltable tr:last-child td{border-bottom:0}
.ltable tr.grp td{background:var(--soft);font:600 12.5px var(--f-ui);color:var(--muted)}
.ltable tr.tot td{font-weight:600}
.ltable tr.key td{font-weight:600;background:color-mix(in srgb,var(--jade) 9%,var(--paper))}
.ltable td.neg{color:var(--coral)}
.ltable .yr{background:var(--soft)}
.ltable th.act{color:var(--up)}
details.card.fold>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px}
details.card.fold>summary::-webkit-details-marker{display:none}
details.card.fold>summary h2{flex:1}
details.card.fold>summary .fo{flex:none;font:500 13px var(--f-ui);color:var(--muted);padding:6px 12px;border-radius:999px;background:var(--soft)}
details.card.fold[open]>summary .fo .c{display:none}details.card.fold:not([open])>summary .fo .o{display:none}
details.card.fold>summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:12px}
@media (max-width:680px){.ltable th:first-child,.ltable td:first-child{min-width:150px;max-width:180px}}

/* Four-wall costs (Oct 27): the split bar's cost of sales and supplies & utilities parts */
.splitbar .co{background:linear-gradient(90deg,#7c5cf0,#a996ff)}
.splitbar .su{background:linear-gradient(90deg,#0e8fa3,#5ed3e3)}

/* Position (Oct 27) */
/* the hero's cash line: a dashed zero line when cash goes below it, the lowest day marked */
.wave .zl{stroke:rgba(255,255,255,.55);stroke-width:1.2;stroke-dasharray:4 5}
.wave .zt{font:500 10.5px var(--f-ui);fill:rgba(243,251,247,.7)}
.wave .lo{fill:#ffb4a6;stroke:#fff;stroke-width:2}
.wave .lol{font:600 12px var(--f-num);fill:#fff;paint-order:stroke;stroke:rgba(8,42,33,.75);stroke-width:4px;stroke-linejoin:round}
/* a soft round tag (status words in a list; .ptag: the frame owns .tag) */
.ptag{display:inline-flex;align-items:center;font:600 11.5px var(--f-ui);padding:3px 9px;border-radius:999px;background:var(--soft);color:var(--muted);white-space:nowrap}
.ptag.ok{background:var(--up-soft);color:var(--up)}
.ptag.crit{background:var(--crit-soft);color:var(--crit)}
.ptag.warn{background:var(--warn-soft);color:var(--warn)}

/* a company whose books aren't connected (notConnectedHTML) */
.card.nc{max-width:680px}
.card.nc h2 .chg{margin-left:auto}
.nclist{list-style:none;margin:14px 0 0;padding:0}
.nclist li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:12px 2px;border-top:1px solid var(--line);font-size:14.5px}
.nclist li b{font:600 18px var(--f-num);color:var(--muted)}

/* a list of amounts, each with its share and a bar (Budget's and Snapshot's "Where each dollar goes"; Oct 27, one copy) */
.dl{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:11px}
.dl li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:5px 10px;align-items:baseline;font-size:13.5px}
.dl .t{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dl .lv{font:600 13.5px var(--f-num)}
.dl .lp{font:500 12.5px var(--f-num);color:var(--muted);min-width:34px;text-align:right}
.dl .bar{grid-column:1/-1;height:8px;border-radius:999px;background:var(--track);overflow:hidden}
.dl .bar span{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--sky),var(--sky2))}
.dl li.own .bar span{background:linear-gradient(90deg,var(--brass),var(--brass2))}
.dl li.left .bar span{background:linear-gradient(90deg,var(--jade),var(--jade2))}
.dl li.short .bar span{background:linear-gradient(90deg,var(--coral),var(--coral2))}
.dl li.short .lv{color:var(--coral)}
.dl li.sep{margin-top:6px;padding-top:12px;border-top:1px solid var(--line)}

/* The working pages' parts (Oct 27, the look sweep: Cash flow, Bills, Cards, Activity, HQ's lists). The buttons
   (.pbtn main, .sbtn second, .iconbtn, .morebtn), the ⋯ menu, notices and the four-number row (.pstats) are the frame's
   (shell.css, on every page); these are what a list page builds with. */
/* a filter: a pill that's pressed or not (the company chips are picker.js's own) */
.fchip{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 14px;border:0;border-radius:999px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink);font:600 13px var(--f-ui);white-space:nowrap;cursor:pointer}
.fchip:hover{background:var(--soft)}
.fchip[aria-pressed="true"]{background:var(--ink);color:var(--paper);box-shadow:none}
.fchip:focus-visible,.fseg button:focus-visible,.fld:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* a switch between a few choices (Next 30 · 60 · 90 days) */
.fseg{display:inline-flex;gap:2px;padding:3px;border-radius:999px;background:var(--soft);box-shadow:inset 0 0 0 1px var(--line)}
.fseg button{height:30px;padding:0 12px;border:0;border-radius:999px;background:none;color:var(--muted);font:600 13px var(--f-ui);cursor:pointer;white-space:nowrap}
.fseg button[aria-pressed="true"]{background:var(--paper);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08),0 4px 10px -4px rgba(0,0,0,.18)}
/* a list card: a card whose rows are divided by hairlines (avatar, what it is, amount right, pill actions) */
.card.lst{padding:20px 22px 8px}
.card.lst>h2{margin-bottom:6px}
.lr{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding:14px 0;border-top:1px solid var(--line)}
.lr .lm{flex:1 1 220px;min-width:0;display:flex;flex-direction:column;gap:2px}
.lr .lm b{font:600 15px var(--f-ui);overflow-wrap:anywhere}
.lr .lm span{font-size:13px;color:var(--muted)}
.lr .amt{font:600 18px var(--f-num);letter-spacing:-.02em;font-feature-settings:"tnum" 1;white-space:nowrap}
.lr .amt.neg{color:var(--coral)}
.lr .la{display:flex;flex-wrap:wrap;gap:8px}
.lr.done .lm b{color:var(--muted);text-decoration:line-through}
.cntag{display:inline-flex;align-items:center;font:600 12px var(--f-num);padding:3px 9px;border-radius:999px;background:var(--soft);color:var(--muted)}
.cntag.warn{background:var(--warn-soft);color:var(--warn)}.cntag.ok{background:var(--up-soft);color:var(--up)}.cntag.crit{background:var(--crit-soft);color:var(--crit)}
/* a form's fields: pills on one line, a soft card for longer text */
.flbl{display:flex;flex-direction:column;gap:6px;font:600 13px var(--f-ui);color:var(--ink)}
.flbl small{font-weight:400;color:var(--muted);font-size:12.5px}
.fld{box-sizing:border-box;width:100%;height:44px;padding:0 16px;border:0;border-radius:999px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink);font:500 14.5px var(--f-ui);font-feature-settings:"tnum" 1}
.fld::placeholder{color:var(--muted)}
textarea.fld{height:auto;min-height:92px;padding:12px 16px;border-radius:20px;line-height:1.45;resize:vertical}
select.fld{appearance:none;padding-right:40px;background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center/16px}
.fld.sm{height:36px;padding:0 14px;font-size:13.5px}
select.fld.sm{padding-right:34px;background-position:right 11px center}
.fld[aria-invalid="true"]{box-shadow:inset 0 0 0 1.5px var(--crit)}
/* a pop-up sheet (a form or a question over the page): a soft card lifted by its shadow, from the bottom on a phone */
.lscrim{position:fixed;inset:0;z-index:46;background:rgba(0,0,0,.32)}
.lsheet{position:fixed;z-index:47;left:50%;top:50%;transform:translate(-50%,-50%);width:min(520px,calc(100vw - 32px));max-height:calc(100vh - 48px);overflow:auto;box-sizing:border-box;padding:22px 24px 24px;border-radius:28px;background:var(--paper);color:var(--ink);box-shadow:var(--pop-shadow);display:flex;flex-direction:column;gap:14px}
.lsheet h2{margin:0;font:600 19px var(--f-ui);letter-spacing:-.01em}
.lsheet .acts{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;margin-top:4px}
.lscrim[hidden],.lsheet[hidden]{display:none}
@media (max-width:680px){.lsheet{left:0;right:0;top:auto;bottom:0;transform:none;width:auto;max-height:88vh;border-radius:28px 28px 0 0;padding-bottom:calc(24px + env(safe-area-inset-bottom))}}


/* this client's own hero color (page_data.json brand.accent) */
:root{--hero-a:color-mix(in oklab,#1e4170 70%,#000);--hero-b:#1e4170;--hero-c:color-mix(in oklab,#1e4170 78%,#fff);--hero-orb:color-mix(in srgb,var(--brass2) 30%,transparent);--hero-shadow:color-mix(in srgb,#1e4170 70%,transparent)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--hero-a:color-mix(in oklab,#1e4170 55%,#000);--hero-b:color-mix(in oklab,#1e4170 85%,#000);--hero-c:color-mix(in oklab,#1e4170 88%,#fff);--hero-orb:color-mix(in srgb,var(--brass2) 20%,transparent)}}
:root[data-theme="dark"]{--hero-a:color-mix(in oklab,#1e4170 55%,#000);--hero-b:color-mix(in oklab,#1e4170 85%,#000);--hero-c:color-mix(in oklab,#1e4170 88%,#fff);--hero-orb:color-mix(in srgb,var(--brass2) 20%,transparent)}

/* this client's highlight (page_data.json brand.highlight) */
:root{--hero-glow:color-mix(in srgb,#ef5b25 22%,transparent);--hero-orb:color-mix(in srgb,#ef5b25 12%,transparent)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--hero-orb:color-mix(in srgb,#ef5b25 12%,transparent)}}
:root[data-theme="dark"]{--hero-orb:color-mix(in srgb,#ef5b25 12%,transparent)}
.hero{--brass2:#ef5b25}

/* bookdetailing.com on the Book Detailing look (Oct 27, the look sweep step 5; reworked the same night after Landon's
   review: clearer sections, the portal as the hero, fewer sections). The structure is the portals' one copy,
   client-pages/_portal/look.css (cards, corners, type, charts, motion), which build.py puts first; then Book Detailing's
   skin (the portals' build.py: brand_css and the "harbor" tone). This file holds only what a public site needs on top.
   Sections are full-width bands that take turns: the navy brand band (header, hero, the demo, footer), white, and the
   cool blue-gray ground, so one section never runs into the next. Classes the look already owns (.hero, .card, .stat,
   .badge, .who, .wave, .caps) mean the same thing here. */

:root{
  --navy-a:#0c1d38; --navy-b:#173865; --navy-c:#2a5288; --on-navy:#ffffff; --on-navy-2:rgba(232,240,250,.80); --on-navy-3:rgba(232,240,250,.58);
  --hot:#c8430f; --hot-ink:#ffffff; --band:#ffffff;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--navy-a:#060e1c;--navy-b:#0d1f3b;--navy-c:#1a3762;--band:#121d31}}
:root[data-theme="dark"]{--navy-a:#060e1c;--navy-b:#0d1f3b;--navy-c:#1a3762;--band:#121d31}

body{font-family:var(--f-ui);font-size:16.5px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;background:var(--bg)}
a{color:inherit}
img{max-width:100%;height:auto;display:block}
.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}
.skip{position:absolute;left:12px;top:-60px;z-index:60;padding:10px 18px;border-radius:999px;background:var(--paper);color:var(--ink);font:600 14px var(--f-ui);text-decoration:none}
.skip:focus{top:12px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* layout: a band spans the width; .in is its column */
.in{max-width:1180px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.band{padding-block:112px}
.band.white{background:var(--band);box-shadow:inset 0 1px 0 var(--line),inset 0 -1px 0 var(--line)}
.band.ground{background:var(--bg)}
.band.navy{background:radial-gradient(90% 70% at 85% 0%,rgba(239,91,37,.20),transparent 60%),linear-gradient(160deg,var(--navy-a),var(--navy-b) 58%,var(--navy-c));color:var(--on-navy)}
.band.tight{padding-top:40px}
/* the close of every page: a tint of its own, so it never runs into the band before it */
.band.close{background:linear-gradient(180deg,color-mix(in srgb,var(--accent-soft) 85%,var(--bg)),var(--bg))}
@media (max-width:760px){.band{padding-block:72px}.in{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}}

/* type: Archivo for headings, Geist for reading, Archivo Narrow for the small labels */
h1,h2{font-family:var(--f-display);font-weight:800;letter-spacing:-.03em;margin:0;text-wrap:balance}
h1{font-size:clamp(40px,5.2vw,64px);line-height:1.02}
h2{font-size:clamp(32px,3.8vw,48px);line-height:1.05}
h3{font:600 18px/1.3 var(--f-ui);letter-spacing:-.01em;margin:0}
.eyebrow{display:block;margin:0 0 16px;font:600 13px/1.2 var(--f-label);letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.navy .eyebrow,.hero-band .eyebrow{color:#ffb08f}
.lede{font-size:clamp(18px,1.55vw,20px);line-height:1.55;color:var(--muted);margin:22px 0 0;max-width:36em}
.navy .lede{color:var(--on-navy-2)}
.prose{max-width:40em;color:var(--muted)}
.prose p{margin:0 0 1em}
.prose strong,.prose b{color:var(--ink);font-weight:600}
.head{max-width:780px;margin:0 auto 56px;text-align:center}
.head .lede{margin-left:auto;margin-right:auto}

/* buttons: everything you press is a pill */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:52px;padding:0 26px;border:0;border-radius:999px;
  background:var(--accent);color:#fff;font:600 16px var(--f-ui);text-decoration:none;white-space:nowrap;cursor:pointer;
  box-shadow:0 12px 24px -14px var(--accent);transition:transform .15s ease,box-shadow .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn.hot{background:var(--hot);color:var(--hot-ink);box-shadow:0 14px 30px -12px rgba(200,67,15,.6)}
.btn.soft{background:var(--paper);color:var(--ink);box-shadow:var(--shadow),inset 0 0 0 1px var(--line)}
.btn.glass{background:rgba(255,255,255,.10);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.30)}
.btn.glass:hover{background:rgba(255,255,255,.16)}
.btn svg{width:18px;height:18px}
.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.more{display:inline-flex;align-items:center;gap:6px;margin-top:18px;font:600 15.5px var(--f-ui);color:var(--accent);text-decoration:none}
.more svg{width:18px;height:18px}
.more:hover{text-decoration:underline;text-underline-offset:4px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .btn:not(.soft):not(.hot):not(.glass){color:#0b1220}}
:root[data-theme="dark"] .btn:not(.soft):not(.hot):not(.glass){color:#0b1220}

/* the logo: three stencil layers; on navy it's white with the orange shine */
.logo{display:block;position:relative;width:132px;aspect-ratio:1500/607;flex:none}
.logo span{position:absolute;left:0;width:100%;-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.logo-main{top:0;height:81.55%;background:#f6f4ef}
.logo-shine{top:0;height:81.55%;background:#ef5b25}
.logo-sub{bottom:0;height:18.45%;background:#c9d3e0}
.logo-small{width:92px}

/* the header: navy on every page, sticky */
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:41;background:var(--navy-a)}
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:color-mix(in srgb,var(--navy-a) 94%,transparent);-webkit-backdrop-filter:saturate(1.3) blur(12px);backdrop-filter:saturate(1.3) blur(12px);color:#fff}
.top .in{display:flex;align-items:center;gap:18px;height:74px}
.top nav{display:flex;align-items:center;gap:4px;margin-left:auto}
.top nav a{padding:9px 14px;border-radius:999px;font:600 15px var(--f-display);text-decoration:none;color:var(--on-navy-2)}
.top nav a:hover{color:#fff;background:rgba(255,255,255,.08)}
.top nav a[aria-current="page"]{color:#fff;background:rgba(255,255,255,.12)}
.top nav a.signin{margin-left:8px;background:#fff;color:#14233a;display:inline-flex;align-items:center;gap:7px}
.top nav a.signin svg{width:16px;height:16px}
@media (max-width:820px){
  .top .in{height:62px;gap:8px}
  .top .logo{width:100px}
  .top nav{gap:0}
  .top nav a{padding:8px 9px;font-size:14px}
  .top nav a.signin{padding:8px 11px;margin-left:4px}
  .top nav a.signin span,.top nav a.nav-faq{display:none}
}
@media (max-width:420px){.top nav a.nav-contact{display:none}}

/* ---------------------------------------------------------------- the homepage hero: the portal, hanging off the edge */
.hero-band{position:relative;overflow:hidden;padding:76px 0 0;color:var(--on-navy);
  background:radial-gradient(70% 60% at 92% 8%,rgba(239,91,37,.26),transparent 62%),radial-gradient(60% 60% at 10% 100%,rgba(90,140,220,.22),transparent 60%),linear-gradient(165deg,var(--navy-a),var(--navy-b) 60%,var(--navy-c))}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:24px 64px;align-items:center}
.hero-copy h1{color:#fff;font-size:clamp(42px,5.4vw,72px)}
.hero-side .lede{margin:0;color:var(--on-navy-2)}
.hero-side .btns{margin-top:28px}
/* Landon and Kara, on every page that sells: their faces beside the words */
.faces{display:inline-flex;flex:none}
.av{display:block;width:40px;height:40px;border-radius:50%;object-fit:cover}
.av.ini{display:grid;place-items:center;font:600 16px/1 var(--f-ui);letter-spacing:0;color:#fff;background:#3b6aa8}
.av.ini.kara{background:var(--hot)}
.faces .av{box-shadow:0 0 0 3px var(--navy-b);background:#fff}
.faces .av+.av{margin-left:-12px}
.faces.lg .av{width:56px;height:56px;font-size:21px;box-shadow:0 0 0 3px var(--paper)}
.faces.lg .av+.av{margin-left:-16px}
.byline{display:flex;align-items:center;gap:14px;margin:28px 0 0;font:500 15px var(--f-ui);color:var(--on-navy-2)}
.byline b{color:#fff;font-weight:600}
/* a note from Kara, floating on the hero's screen: the portal has a person in it */
.kara-note{position:absolute;z-index:3;right:max(20px,calc((100vw - 1180px)/2 + 10px));top:190px;width:330px;display:flex;gap:12px;padding:16px 18px;border-radius:24px;background:var(--paper);color:var(--ink);box-shadow:0 30px 60px -20px rgba(6,14,28,.55),inset 0 0 0 1px var(--line)}
.kara-note .av{flex:none;width:44px;height:44px;font-size:17px}
.kara-note b{display:block;font:600 14.5px var(--f-ui)}
.kara-note b span{font-weight:400;color:var(--muted)}
.kara-note p{margin:4px 0 10px;font-size:14px;line-height:1.45;color:var(--ink)}
@media (prefers-reduced-motion:no-preference){.kara-note{animation:pop .6s 1.2s cubic-bezier(.2,.8,.2,1) both}}
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.96)}}
@media (max-width:960px){.kara-note{top:auto;bottom:24px;right:16px;width:min(300px,calc(100% - 32px))}}
@media (max-width:520px){.kara-note{left:16px;right:auto;bottom:20px;padding:12px 14px;border-radius:20px}.kara-note p{font-size:13px;margin-bottom:8px}}
.hero-shot{position:relative;margin-top:104px}
/* the screen is drawn at its own size (1200 wide) and scaled (site.js fit): it runs off the right edge, and the band
   cuts its bottom, so about three quarters of it shows */
.fit{position:relative;width:1200px;overflow:hidden;border-radius:26px 26px 0 0;box-shadow:0 -10px 60px -20px rgba(0,0,0,.45)}
.fit .app{transform-origin:0 0}
.hero-note{position:absolute;right:max(20px,calc((100vw - 1180px)/2));top:-36px;z-index:2;margin:0;font:500 13px var(--f-ui);color:var(--on-navy-3)}
@media (max-width:960px){.hero-grid{grid-template-columns:1fr;gap:24px}.hero-shot{margin-top:72px}}
@media (max-width:760px){.hero-band{padding-top:40px}.fit{border-radius:18px 18px 0 0}.hero-note{right:16px;top:-32px}}

/* a portal screen: an app window, drawn with the portal's own parts at a fixed design size */
.app{width:1200px;display:grid;grid-template-columns:232px minmax(0,1fr);background:var(--bg);color:var(--ink);font-family:var(--f-ui);box-shadow:0 40px 90px -30px rgba(0,0,0,.6);border-radius:26px 26px 0 0;overflow:hidden}
.app-side{display:flex;flex-direction:column;gap:2px;padding:22px 14px;background:var(--paper);border-right:1px solid var(--line);min-height:100%}
.app-side .nm{font:800 19px var(--f-display);letter-spacing:-.02em;padding:2px 10px 16px}
.app-side .g{font:600 11px var(--f-label);letter-spacing:.09em;text-transform:uppercase;color:var(--muted);padding:14px 10px 6px}
.app-side .it{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:12px;font:500 14.5px var(--f-display);color:var(--ink)}
.app-side .it svg{width:18px;height:18px;color:var(--muted)}
.app-side .it.on{background:var(--accent-soft);font-weight:600}
.app-side .it.on svg{color:var(--accent)}
.app-side .it i{margin-left:auto;font:600 11.5px var(--f-num);font-style:normal;color:#fff;background:#ef5b25;border-radius:999px;min-width:20px;height:20px;display:grid;place-items:center;padding:0 6px}
.app-side .me{margin-top:auto;display:flex;align-items:center;gap:10px;padding:12px 10px 0;border-top:1px solid var(--line);font:600 13.5px var(--f-ui)}
.app-side .me span{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:var(--accent-soft);color:var(--accent);font-size:12px}
.app-side .me small{display:block;font-weight:400;color:var(--muted);font-size:12px}
.app-main{padding:26px 28px 30px;min-width:0}
.app-main .pt{font:800 30px var(--f-display);letter-spacing:-.03em;margin:0}
.app-main .ps{margin:4px 0 0;color:var(--muted);font-size:14px}
.app-main .chips{display:flex;gap:8px;margin:16px 0 14px}
.app-main .chips span{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 14px;border-radius:999px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);font:600 13px var(--f-ui)}
.app-main .chips span.on{background:var(--ink);color:var(--paper);box-shadow:none}
.app-main .attn{margin:0 0 14px}
.snapgrid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) minmax(0,.95fr);gap:14px;align-items:start}
.snapgrid .col{display:flex;flex-direction:column;gap:14px;min-width:0}
.snapgrid .card{padding:20px 22px}
.snapgrid .card.hero{padding:22px 22px 18px;min-height:470px}
.snapgrid .card.hero .big{font-size:46px}
.snapgrid .hero .wavebox{min-height:180px}
.snapgrid .stat{padding:14px 16px}
.snapgrid .badge{width:78px;height:78px;border-radius:20px;font-size:22px}
.snapgrid .ringbig{max-width:170px;margin:12px auto 4px}
.snapgrid .lgd{gap:7px}
.snapgrid .lgd li{font-size:13px}
.snapgrid .caps{height:130px;margin-top:14px}

/* the tour's screens (and the small ones elsewhere): a framed stack of the portal's cards */
.screen{position:relative;padding:14px;border-radius:36px;background:color-mix(in srgb,var(--paper) 55%,var(--bg));box-shadow:var(--shadow),inset 0 0 0 1px var(--line)}
.screen-bar{display:flex;align-items:center;gap:10px;padding:4px 10px 12px;font:600 13px var(--f-display);color:var(--muted)}
.screen-bar .mk{display:grid;place-items:center;width:26px;height:26px;border-radius:9px;background:var(--accent);color:var(--paper);font:700 12px var(--f-display)}
.screen-bar .pg{color:var(--ink)}
.screen-bar .live{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font:500 12px var(--f-ui)}
.screen-bar .live i{width:7px;height:7px;border-radius:50%;background:var(--jade);box-shadow:0 0 0 4px color-mix(in srgb,var(--jade) 22%,transparent)}
.screen .stack{display:flex;flex-direction:column;gap:12px}
.screen .card.hero .big{font-size:46px}
.screen .hero .wavebox{min-height:130px}
.screen .hkey{margin:8px 0 12px}
.mb{display:inline-flex;align-items:center;height:32px;padding:0 14px;border-radius:999px;font:600 13px var(--f-ui);background:var(--soft);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.mb.go{background:var(--accent);color:#fff;box-shadow:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .mb.go{color:#0b1220}}
:root[data-theme="dark"] .mb.go{color:#0b1220}
.mrow{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 14px;padding:12px 0;border-top:1px solid var(--line)}
.mrow .amt{font:600 17px var(--f-num);letter-spacing:-.02em;font-feature-settings:"tnum" 1}
.mrow .la{grid-column:1/-1;display:flex;gap:8px}
.mrow .bar{grid-column:1/-1}
.mrow .who small b{color:var(--ink);font-weight:600}
.mrow .rt{display:flex;align-items:center;gap:10px}
.screen .who b,.screen .who small{white-space:normal}
.screen .av2,.app .av2{width:38px;height:38px;border-radius:13px;font-size:13px}
.av2.sky{background:color-mix(in srgb,var(--sky) 16%,var(--paper));color:color-mix(in srgb,var(--sky) 62%,var(--ink))}
.av2.jade{background:color-mix(in srgb,var(--jade) 16%,var(--paper));color:color-mix(in srgb,var(--jade) 55%,var(--ink))}
.av2.brass{background:color-mix(in srgb,var(--brass) 18%,var(--paper));color:color-mix(in srgb,var(--brass) 55%,var(--ink))}
.av2.coral{background:color-mix(in srgb,var(--coral) 16%,var(--paper));color:color-mix(in srgb,var(--coral) 62%,var(--ink))}
.av2.violet{background:color-mix(in srgb,#7c5cf0 16%,var(--paper));color:color-mix(in srgb,#7c5cf0 62%,var(--ink))}
.mtag{display:inline-flex;font:600 11.5px var(--f-ui);padding:3px 9px;border-radius:999px;background:var(--soft);color:var(--muted)}
.mtag.ok{background:var(--up-soft);color:var(--up)}
.mtag.crit{background:var(--crit-soft);color:var(--crit)}
.mpct{font:600 15px var(--f-num);min-width:46px;text-align:right}
.mpct.neg{color:var(--coral)}
.screen .chg i{opacity:1}
.screen .chg.dn{color:color-mix(in srgb,var(--crit) 82%,var(--ink))}
.screen .chg.up{color:color-mix(in srgb,var(--up) 85%,var(--ink))}
.screen .card.hero .chg,.app .card.hero .chg{color:#fff}
@media (max-width:520px){.screen .mrow .spark{display:none}.screen .mrow .rt{gap:6px}}

/* the screens draw in: lines run left to right (look.css), bars grow from the left */
@media (prefers-reduced-motion:no-preference){.intro .splitbar span,.intro .cap span{animation:grow .9s .1s cubic-bezier(.2,.8,.2,1) both;transform-origin:left}}
@keyframes grow{from{transform:scaleX(0)}}

/* ---------------------------------------------------------------- one login: everything the business logs into */
.one{display:grid;grid-template-columns:minmax(0,.8fr) 140px minmax(0,1fr);gap:0;align-items:stretch}
.srcs{display:grid;grid-template-columns:1fr;grid-auto-rows:1fr;gap:10px}
.src{display:flex;align-items:center;gap:12px;padding:11px 16px;border-radius:20px;background:var(--paper);box-shadow:var(--shadow)}
.src .ic{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:13px;background:var(--accent-soft);color:var(--accent)}
.src .ic svg{width:20px;height:20px}
.src b{display:block;font:600 15px var(--f-ui)}
.src small{display:block;font-size:12.5px;color:var(--muted);line-height:1.35}
.flow{position:relative}
.flow svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.flow path{fill:none;stroke:var(--line);stroke-width:2;vector-effect:non-scaling-stroke}
.one .portal{align-self:center}
.flow path.run{stroke:var(--accent);stroke-width:2.2;stroke-dasharray:4 14;animation:flow 1.6s linear infinite}
@keyframes flow{to{stroke-dashoffset:-36}}
.portal{padding:28px;border-radius:32px;background:var(--card-bg);box-shadow:var(--shadow),inset 0 0 0 1px var(--card-edge)}
.portal .url{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;background:var(--soft);font:500 13px var(--f-ui);color:var(--muted)}
.portal .url svg{width:14px;height:14px}
.portal .logins{display:flex;align-items:baseline;gap:14px;margin:18px 0 4px;font-family:var(--f-num)}
.portal .logins s{font:600 30px var(--f-num);letter-spacing:-.02em;color:var(--muted);text-decoration-thickness:3px;text-decoration-color:var(--coral)}
.portal .logins b{font:600 54px/1 var(--f-num);letter-spacing:-.04em;color:var(--ink)}
.portal .logins span{font:500 15px var(--f-ui);color:var(--muted)}
.portal ul{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column}
.portal li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start;padding:13px 0;border-top:1px solid var(--line);font-size:15px}
.portal li svg{width:20px;height:20px;color:var(--jade);margin-top:1px}
.portal li b{display:block;font-weight:600}
.portal li span{color:var(--muted);font-size:13.5px}
@media (max-width:960px){.one{grid-template-columns:1fr;gap:0}.srcs{grid-template-columns:repeat(2,minmax(0,1fr))}.srcs{grid-auto-rows:auto}.flow{height:90px;display:flex;justify-content:center;align-items:center}.flow svg{position:static;height:90px;transform:rotate(90deg);width:90px}}
@media (max-width:520px){.srcs{grid-template-columns:1fr}}

/* ---------------------------------------------------------------- the tour: the screen holds still while the questions pass */
.tour{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:64px;align-items:start}
.steps{display:flex;flex-direction:column}
.step{min-height:74vh;display:flex;flex-direction:column;justify-content:center;padding-block:24px}
.step:first-child{min-height:56vh;justify-content:flex-start;padding-top:56px}
.step:last-child{min-height:64vh}
.step .num{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:999px;background:var(--paper);box-shadow:var(--shadow);font:700 14px var(--f-num);color:var(--accent);margin-bottom:18px;transition:background .35s ease,color .35s ease}
.step h3{font:800 clamp(28px,2.7vw,36px)/1.08 var(--f-display);letter-spacing:-.025em;color:var(--muted);transition:color .35s ease}
.step.on h3{color:var(--ink)}
.step.on .num{background:var(--accent);color:var(--paper)}
.step p{margin:14px 0 0;color:var(--muted);max-width:30em;font-size:17px}
.step .scene-inline{display:none}
.stage{position:sticky;top:110px;display:grid}
.stage .scene{grid-area:1/1;opacity:0;transform:translateY(16px) scale(.985);transition:opacity .45s ease,transform .6s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.stage .scene.on{opacity:1;transform:none}
.stage .mrow{padding:10px 0}
.stage .card.lst{padding:16px 20px 4px}
.stage .card.hero{padding:22px 22px 18px}
@media (max-height:900px) and (min-width:961px){.stage .screen{max-height:calc(100vh - 130px);overflow:hidden;-webkit-mask-image:linear-gradient(#000 86%,transparent);mask-image:linear-gradient(#000 86%,transparent)}}
@media (max-width:960px){
  .tour{grid-template-columns:1fr;gap:0}
  .stage{display:none}
  .step,.step:first-child,.step:last-child{min-height:0;padding-block:28px}
  .step h3{color:var(--ink)}
  .step .scene-inline{display:block;margin-top:22px}
}
@media (prefers-reduced-motion:reduce){.stage .scene,.step h3,.step .num{transition:none}.flow path.run{animation:none}}

/* ---------------------------------------------------------------- give it a spin */
.spin{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.spin>div>h2{color:#fff}
.spin .tries{list-style:none;margin:30px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.spin .tries li{display:flex;align-items:center;gap:12px;font:500 16px var(--f-ui);color:var(--on-navy-2)}
.spin .tries li i{display:grid;place-items:center;width:30px;height:30px;border-radius:999px;background:rgba(255,255,255,.12);font:700 13px var(--f-num);font-style:normal;color:#fff}
.spin .small{margin:18px 0 0;font-size:14px;color:var(--on-navy-3)}
.spin .peek{position:relative;border-radius:28px;overflow:hidden;box-shadow:0 40px 80px -30px rgba(0,0,0,.6);transform:rotate(1.5deg)}
.spin .peek .screen{border-radius:28px;color:var(--ink)}
@media (max-width:960px){.spin{grid-template-columns:1fr;gap:40px}.spin .peek{transform:none}}

/* ---------------------------------------------------------------- who you'll work with */
.band#who{padding-block:clamp(48px,6vw,72px)}
.humans{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:56px;align-items:center}
.photo{margin:0;border-radius:32px;overflow:hidden;box-shadow:var(--shadow);background:var(--soft)}
.photo img{width:100%;height:100%;object-fit:cover}
.humans .photo{aspect-ratio:4/3;border-radius:28px}
.humans .photo img{object-position:50% 45%}
.humans h2{font-size:clamp(26px,2.5vw,34px)}
.humans .lede{margin-top:12px;font-size:17px;max-width:none}
.humans .lede strong{color:var(--ink);font-weight:600}
.humans .vows{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:20px}
.humans .vows li{padding:12px 0 0 22px;gap:1px;align-content:start}
.humans .vows li::before{left:0;top:17px;width:10px;height:10px;box-shadow:0 0 0 4px color-mix(in srgb,var(--hot) 18%,transparent)}
.humans .vows b{font-size:15.5px}
.humans .vows span{font-size:14px;line-height:1.4}
.proof{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:22px 0 0;padding:0}
.proof li{display:inline-flex;align-items:baseline;gap:6px;padding:8px 13px;border-radius:999px;background:var(--bg);box-shadow:inset 0 0 0 1px var(--line);font-size:13px;color:var(--muted);white-space:nowrap}
.proof b{font:600 16px var(--f-num);letter-spacing:-.02em;color:var(--ink)}
.humans .more{margin-top:16px}
.vows{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-direction:column}
.vows li{display:grid;gap:2px;padding:14px 0 14px 34px;border-top:1px solid var(--line);position:relative}
.vows li::before{content:"";position:absolute;left:4px;top:19px;width:14px;height:14px;border-radius:50%;background:var(--hot);box-shadow:0 0 0 5px color-mix(in srgb,var(--hot) 18%,transparent)}
.vows b{font:600 17px var(--f-ui)}
.vows span{color:var(--muted);font-size:15px}
.nums{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:22px}
.nums div{padding:16px 18px;border-radius:22px;background:var(--bg)}
.nums b{display:block;font:600 30px/1 var(--f-num);letter-spacing:-.035em}
.nums span{display:block;margin-top:8px;font-size:13px;color:var(--muted);line-height:1.4}
@media (max-width:960px){.humans{grid-template-columns:1fr;gap:28px}.humans .vows{grid-template-columns:1fr;gap:0}.humans .vows li{padding:10px 0 10px 22px}}
@media (max-width:480px){.nums{grid-template-columns:1fr}.nums div{display:flex;align-items:baseline;gap:12px}.nums span{margin:0}}

/* the close: talk it through */
.talk{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:28px 48px}
.talk h2{font-size:clamp(28px,3vw,40px)}
.talk p{margin:12px 0 0;color:var(--muted);max-width:34em}
.talk .btns{margin:0}
.talk .lines{display:flex;flex-direction:column;gap:4px;margin-top:16px;font:500 15.5px var(--f-ui)}
.talk .lines a{text-decoration:none;color:var(--ink);font-feature-settings:"tnum" 1}
.talk .lines a:hover{text-decoration:underline;text-underline-offset:4px}
.talk .faces{margin-bottom:16px}

/* ---------------------------------------------------------------- inner pages */
.s-top{padding-block:84px 72px}
.s-top h1{color:#fff}
.s-top .lede{max-width:40em}
@media (max-width:760px){.s-top{padding-block:52px 48px}}
.about-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center}
.about-top .photo{aspect-ratio:1400/1165}
@media (max-width:900px){.about-top{grid-template-columns:1fr;gap:32px}}
.story{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.story .card{padding:30px}
.story .card .yr{display:inline-flex;font:600 12.5px var(--f-num);padding:4px 11px;border-radius:999px;background:var(--accent-soft);color:var(--accent);margin-bottom:14px}
.story .card h3{font:700 22px/1.2 var(--f-display);letter-spacing:-.02em}
.story .card p{margin:12px 0 0;color:var(--muted)}
@media (max-width:760px){.story{grid-template-columns:1fr}.story .card{padding:24px}}
.home-life{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center}
.home-life .photo{aspect-ratio:4/3}
@media (max-width:900px){.home-life{grid-template-columns:1fr;gap:28px}}
.jump{display:flex;flex-wrap:wrap;gap:8px;margin:30px 0 0;font-size:0}
.jump a{display:inline-flex;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.10);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);color:#fff;font:600 14px var(--f-ui);text-decoration:none}
.jump a:hover{background:rgba(255,255,255,.18)}
.svc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.svc{padding:28px 26px 24px;scroll-margin-top:100px}
.svc .ic{display:grid;place-items:center;width:48px;height:48px;border-radius:16px;background:var(--accent-soft);color:var(--accent)}
.svc .ic svg{width:24px;height:24px}
.svc h2{display:block;margin:18px 0 0;font:800 26px/1.1 var(--f-display);letter-spacing:-.025em}
.svc .line{margin:8px 0 0;font-size:16.5px;color:var(--ink)}
.svc ul{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.svc li{position:relative;padding-left:24px;font-size:14.5px;line-height:1.45;color:var(--muted)}
.svc li::before{content:"";position:absolute;left:2px;top:4px;width:12px;height:7px;border-left:2px solid var(--jade);border-bottom:2px solid var(--jade);transform:rotate(-45deg)}
@media (max-width:1000px){.svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.svc-grid{grid-template-columns:1fr}.svc{padding:22px}}
.steps3{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;counter-reset:s}
.steps3 li{counter-increment:s;padding:28px;border-radius:28px;background:var(--bg);display:flex;flex-direction:column;gap:8px}
.steps3 li::before{content:counter(s);display:grid;place-items:center;width:40px;height:40px;margin-bottom:8px;border-radius:999px;background:var(--accent);color:var(--paper);font:700 15px var(--f-num)}
.steps3 b{font:700 20px/1.2 var(--f-display);letter-spacing:-.015em}
.steps3 span{color:var(--muted);font-size:15px}
@media (max-width:860px){.steps3{grid-template-columns:1fr}}
.included{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
@media (max-width:900px){.included{grid-template-columns:1fr;gap:32px}}
.entities{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.entities .card{padding:22px}
.entities p{margin:6px 0 0;color:var(--muted);font-size:14.5px}
@media (max-width:900px){.entities{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.entities{grid-template-columns:1fr}}
.contact-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.contact-card{display:flex;flex-direction:column;gap:10px;padding:32px;text-decoration:none;color:var(--ink);transition:transform .15s ease}
.contact-card:hover{transform:translateY(-2px)}
.contact-card .q{display:grid;place-items:center;width:52px;height:52px;border-radius:17px;background:var(--accent-soft);color:var(--accent)}
.contact-card .q svg{width:24px;height:24px}
.contact-card .k{font:600 13px var(--f-label);letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-top:6px}
.contact-card .v{font:600 clamp(22px,2.4vw,30px)/1.15 var(--f-num);letter-spacing:-.02em;overflow-wrap:anywhere}
.contact-card .n{color:var(--muted);font-size:15px}
@media (max-width:760px){.contact-grid{grid-template-columns:1fr}.contact-card{padding:24px}}
.doc{padding:40px 44px;max-width:860px;margin:0 auto}
.doc h2{font-size:24px;letter-spacing:-.02em;margin:34px 0 10px}
.doc h2:first-child{margin-top:0}
.doc p,.doc li{color:var(--muted)}
.doc b{color:var(--ink);font-weight:600}
.doc a{color:var(--accent);font-weight:600}
.doc ul{padding-left:20px}
.doc li{margin-bottom:6px}
@media (max-width:760px){.doc{padding:24px}}
.linklist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.linklist a{display:flex;flex-direction:column;gap:2px;padding:20px 24px;text-decoration:none}
.linklist b{font:600 17px var(--f-ui)}
.linklist span{color:var(--muted);font-size:14.5px}
@media (max-width:600px){.linklist{grid-template-columns:1fr}}

/* questions (the FAQ page) */
.faq-list{display:flex;flex-direction:column;gap:10px;max-width:860px;margin:0 auto}
.faq-item{border-radius:24px;background:var(--card-bg);box-shadow:var(--shadow),inset 0 0 0 1px var(--card-edge)}
.faq-item summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 24px;font:600 17px/1.35 var(--f-ui)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:24px}
.faq-mark{flex:none;position:relative;width:30px;height:30px;border-radius:999px;background:var(--soft);transition:background .2s ease}
.faq-mark::before,.faq-mark::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;border-radius:2px;background:var(--ink);transform:translate(-50%,-50%)}
.faq-mark::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .2s ease}
.faq-item[open] .faq-mark{background:var(--accent)}
.faq-item[open] .faq-mark::before,.faq-item[open] .faq-mark::after{background:var(--paper)}
.faq-item[open] .faq-mark::after{transform:translate(-50%,-50%) rotate(0)}
.faq-item p{margin:0;padding:0 24px 22px;color:var(--muted);max-width:46em}
.faq-item p a{color:var(--ink);font-weight:600}
.faq-group{max-width:860px;margin:0 auto 14px;font:600 13px var(--f-label);letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.faq-group:not(:first-child){margin-top:44px}

/* footer: navy, like the header */
.foot{background:var(--navy-a);color:var(--on-navy-3);font-size:14px;padding-block:44px 52px}
.foot .in{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:22px}
.foot .brand{display:flex;align-items:center;gap:14px;color:var(--on-navy-2)}
.foot .brand small{display:block;font-size:13px;color:var(--on-navy-3)}
.foot nav{display:flex;flex-wrap:wrap;gap:6px 18px}
.foot a{text-decoration:none;color:var(--on-navy-2)}
.foot a:hover{color:#fff}

.logo-main { -webkit-mask-image: url(/assets/img/logo_main.png); mask-image: url(/assets/img/logo_main.png); }
.logo-shine { -webkit-mask-image: url(/assets/img/logo_shine.png); mask-image: url(/assets/img/logo_shine.png); }
.logo-sub { -webkit-mask-image: url(/assets/img/logo_sub.png); mask-image: url(/assets/img/logo_sub.png); }

/* this client's tone (page_data.json brand.tone "harbor") */
:root{--bg:#ebeef2;--paper:#ffffff;--ink:#14233a;--muted:#5a6a80;--line:#dfe5ee;--soft:#f2f4f8;--accent:#1e4170;--accent-soft:#e3ebf6;--track:#e6eaf0;--cap:#dde3eb;--capt:#c7d1de;--count:#ef5b25;--shadow:0 1px 2px rgba(20,35,58,.04),0 22px 44px -26px rgba(20,35,58,.30)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--bg:#0b1220;--paper:#121b2b;--ink:#e8eef6;--muted:#9aa9bd;--line:#223047;--soft:#17223a;--accent:#8fb6ea;--accent-soft:#1b2d45;--track:#1a2537;--cap:#1e2a3e;--capt:#2c3c56;--count:#ef5b25;--card-edge:rgba(143,182,234,.09)}}
:root[data-theme="dark"]{--bg:#0b1220;--paper:#121b2b;--ink:#e8eef6;--muted:#9aa9bd;--line:#223047;--soft:#17223a;--accent:#8fb6ea;--accent-soft:#1b2d45;--track:#1a2537;--cap:#1e2a3e;--capt:#2c3c56;--count:#ef5b25;--card-edge:rgba(143,182,234,.09)}