/* ─────────────────────────────────────────────────────────────────────
   Noti platform prototype · noti.css
   The design system. Tokens first, then the shell, the
   dashboard and the phone. Nothing here knows about a business.
   ───────────────────────────────────────────────────────────────────── */

/* ══════════════════════════════════════════════════════════════════════════
   NOTI — product prototype 03
   Fun and quirky, still professional. Warm cream ground, pastel tinted
   blocks, big display type, chunky radii, a dark floating pill nav with an
   orange FAB. Orange and cream are Noti's own brand, so the playful
   direction and the brand land in the same place.
   The discipline underneath: money and counts stay mono and exact, nothing
   decorative sits on top of data, and the density stays workable for
   somebody actually running a business.
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  --cream:#F7F3ED; --cream-2:#FBF9F5; --white:#fff;
  --ink:#1A1613; --mid:#5C534B; --grey:#857A70; --faint:#A99E93;
  --line:#EAE3D9; --line-2:#F2ECE3;
  --orange:#F0611C; --orange-d:#D14E10; --orange-l:#FDE8DC;
  --mint:#D6EEDD;  --mint-d:#1F7A4C;
  --lav:#E3DEF8;   --lav-d:#4B3CA8;
  --butter:#FBEBC0;--butter-d:#8A6410;
  --peach:#FBDDD0; --peach-d:#B03E14;
  --sky:#D8E8F7;   --sky-d:#1E5A99;
  --f:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
  --m:'JetBrains Mono',ui-monospace,Menlo,monospace;
  --r:22px; --r2:16px; --r3:12px;

  /* One gap between cards, everywhere. Before this there were two — 12px
     across a grid and 14px down a stack — which is close enough to look like
     a mistake rather than a choice, and it was. */
  --gap:12px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--f);background:var(--cream);color:var(--ink);
  -webkit-font-smoothing:antialiased;font-size:14px;line-height:1.5}
svg{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
.mono{font-family:var(--m);font-variant-numeric:tabular-nums;letter-spacing:-.02em}

/* ══ APP SHELL ════════════════════════════════════════════════════════════ */
.app{display:flex;min-height:100vh;padding:14px;gap:14px}

/* ── rail: a floating dark slab, not a wall ───────────────────────────── */
.rail{width:216px;flex:none;background:var(--ink);border-radius:var(--r);
  padding:22px 13px 18px;position:sticky;top:14px;height:calc(100vh - 28px);
  display:flex;flex-direction:column;overflow:hidden}
.logo{display:flex;align-items:baseline;gap:3px;padding:0 11px 24px}
.logo b{color:#fff;font-size:25px;font-weight:800;letter-spacing:-.04em}
.logo i{width:7px;height:7px;border-radius:50%;background:var(--orange);display:block;
  align-self:flex-end;margin-bottom:6px}
.rnav{display:flex;flex-direction:column;gap:2px;flex:none;overflow-y:auto}
.rnav::-webkit-scrollbar{display:none}
.ri{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:13px;
  color:#A69C92;font-size:14px;font-weight:600;text-align:left;width:100%;transition:.14s}
.ri svg{width:19px;height:19px;flex:none}
.ri:hover{background:rgba(255,255,255,.06);color:#EDE7E0}
.ri.on{background:var(--orange);color:#fff}

/* A module the plan does not include. Dimmed, with a padlock, still there —
   hiding it makes Noti look smaller than it is and makes the upgrade
   invisible. It still opens; what it opens is a page saying which plan it is
   on and what it does. */
.ri.locked{opacity:.45}
.ri.locked:hover{opacity:.7}
.ri.locked svg:last-child{width:13px;height:13px;margin-left:auto;flex:none}
/* Standing on a locked one. It must not wear the orange selected state —
   that says "you are in it" about a screen nobody is in. Quietly marked
   instead, so the rail still shows where you are. */
.ri.locked.here{opacity:.8;background:rgba(255,255,255,.06)}
.ri .bd{margin-left:auto;background:rgba(255,255,255,.9);color:var(--ink);font-size:11px;
  font-weight:700;min-width:20px;height:20px;border-radius:10px;display:flex;align-items:center;
  justify-content:center;padding:0 6px}
.ri:not(.on) .bd{background:var(--orange);color:#fff}
.railfoot{margin-top:18px;flex:none}
.railfoot .tip{background:rgba(255,255,255,.06);border-radius:15px;padding:13px}
.railfoot .tip b{color:#fff;font-size:13px;font-weight:700;display:block}
.railfoot .tip span{color:#A69C92;font-size:12px;display:block;margin-top:3px;line-height:1.45}

/* ── body ─────────────────────────────────────────────────────────────── */
.body{flex:1;min-width:0;display:flex;flex-direction:column;gap:14px}
.top{display:flex;align-items:center;gap:12px}
.search{flex:1;max-width:440px;position:relative}
.search svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:17px;height:17px;
  color:var(--faint)}
.search input{width:100%;border:1.5px solid transparent;background:var(--white);border-radius:99px;
  padding:13px 18px 13px 42px;font-size:14px;font-family:inherit;color:var(--ink);outline:none;
  font-weight:500}
.search input::placeholder{color:var(--faint);font-weight:500}
.search input:focus{border-color:var(--orange)}
.top .sp{flex:1}
.rnd{width:46px;height:46px;border-radius:50%;background:var(--white);display:flex;
  align-items:center;justify-content:center;color:var(--ink);position:relative;flex:none}
.rnd:hover{background:var(--ink);color:#fff}
.rnd svg{width:20px;height:20px}
.rnd .ct{position:absolute;top:-1px;right:-1px;background:var(--orange);color:#fff;font-size:10px;
  font-weight:700;min-width:19px;height:19px;border-radius:10px;display:flex;align-items:center;
  justify-content:center;padding:0 5px;border:2.5px solid var(--cream)}
.who{display:flex;align-items:center;gap:10px;padding:5px 15px 5px 5px;border-radius:99px;
  background:var(--white);position:relative;flex:none}
.who:hover{background:var(--ink);color:#fff}
.who:hover .nm span{color:#A69C92}
.av{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;flex:none;background:var(--lav);color:var(--lav-d)}
.who .nm{text-align:left;line-height:1.25}
.who .nm b{display:block;font-size:13.5px;font-weight:700}
.who .nm span{display:block;font-size:11.5px;color:var(--grey);font-weight:500}
.who .cv{width:16px;height:16px;opacity:.5;margin-left:1px}

.menu{position:absolute;top:calc(100% + 9px);right:0;background:#fff;border-radius:20px;
  box-shadow:0 18px 44px -10px rgba(26,22,19,.24);width:296px;padding:8px;z-index:60;
  display:none;text-align:left;color:var(--ink)}
.menu.on{display:block}
.menu .lb{font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--faint);padding:10px 12px 7px}
.mi{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:14px;width:100%;text-align:left}
.mi:hover{background:var(--cream)}
.mi .av{width:34px;height:34px;font-size:12px}
.mi .t{flex:1;min-width:0;line-height:1.3}
.mi .t b{display:block;font-size:13.5px;font-weight:700}
.mi .t span{display:block;font-size:11.5px;color:var(--grey);font-weight:500}
.mi .tk{width:18px;height:18px;color:var(--orange);flex:none;stroke-width:2.8}
.menu hr{border:0;border-top:1px solid var(--line);margin:7px 0}

/* Every pane is a flow. A screen that returns two cards one after another is
   spaced correctly without either card knowing about the other, and a new pane
   cannot forget — which is what went wrong: the chart card carried no margin,
   so it sat flush against the row beneath it while everything else had 12px.

   Grid children are excluded because .stats and .cols already space
   themselves, and a margin on top of a gap is the same bug pointing the other
   way. */
.page{flex:1;display:flex;flex-direction:column;gap:var(--gap)}
.page > .hello{margin-bottom:calc(var(--gap) * -1)}

/* ── the greeting: big, bold, quirky ──────────────────────────────────── */
.hello{display:flex;justify-content:space-between;align-items:center;gap:22px;
  padding:2px 4px 18px;flex-wrap:wrap}
.hello .l h1{font-size:26px;font-weight:800;letter-spacing:-.028em;line-height:1.15}
.hello .l .say{font-size:15px;color:var(--mid);font-weight:600;margin-top:5px;max-width:58ch}
.hello .l .say em{font-style:normal;color:var(--orange);font-weight:700}
.hello .r{display:flex;align-items:center;gap:9px}
.chip{display:inline-flex;align-items:center;gap:7px;background:var(--white);border-radius:99px;
  padding:10px 17px;font-size:13px;font-weight:600;color:var(--mid)}
.chip svg{width:15px;height:15px;color:var(--faint)}
.chip.dark{background:var(--ink);color:#fff}
.chip.dark svg{color:#fff}

/* ── tinted stat blocks ───────────────────────────────────────────────── */
/* A run of cards down the page, evenly. Every block in a pane is a child of
   this, so nothing has to carry its own margin and nothing can forget to —
   which is how the chart ended up sitting flush against the row beneath it. */
.flow{display:flex;flex-direction:column;gap:var(--gap)}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
.stat{border-radius:var(--r);padding:18px 20px;background:var(--white);position:relative;
  display:flex;justify-content:space-between;gap:12px;align-items:flex-start}
.stat .k{font-size:13px;font-weight:700;color:var(--grey)}
.stat .v{font-size:27px;font-weight:800;letter-spacing:-.035em;line-height:1;margin-top:10px}
.stat .s{font-size:12.5px;font-weight:600;color:var(--grey);margin-top:7px;display:flex;
  align-items:center;gap:4px}
.stat .s.up{color:var(--mint-d)}
.stat .s.bad{color:var(--peach-d)}
.stat .s svg{width:13px;height:13px;stroke-width:2.6}
.stat .ic{width:40px;height:40px;border-radius:14px;flex:none;display:flex;align-items:center;
  justify-content:center}
.stat .ic svg{width:19px;height:19px}
.t-mint{background:var(--mint);color:var(--mint-d)}
.t-lav{background:var(--lav);color:var(--lav-d)}
.t-butter{background:var(--butter);color:var(--butter-d)}
.t-peach{background:var(--peach);color:var(--peach-d)}
.t-sky{background:var(--sky);color:var(--sky-d)}
.t-ink{background:var(--ink);color:#fff}
.t-ink .ic{background:rgba(255,255,255,.14)}
.t-orange{background:var(--orange);color:#fff}
.t-orange .ic{background:rgba(255,255,255,.22)}

/* ── cards ────────────────────────────────────────────────────────────── */
/* The same four columns and the same gap as .stats, so the cards below a stat
   row line up with it instead of landing a few pixels off. A card spans two by
   default; .w3/.w1 make a three-and-one row that still meets the grid. */
.cols{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);align-items:start}
.cols>*{grid-column:span 2;min-width:0}
.cols>.w3{grid-column:span 3}
.cols>.w1{grid-column:span 1}
.card{background:var(--white);border-radius:var(--r);overflow:hidden}
.ch{display:flex;align-items:center;justify-content:space-between;padding:20px 22px 15px}
.ch h2{font-size:17px;font-weight:800;letter-spacing:-.022em;display:flex;align-items:center;gap:9px}
.ch .all{font-size:12.5px;font-weight:700;color:var(--orange);display:flex;align-items:center;gap:4px}
.ch .all svg{width:14px;height:14px;stroke-width:2.4}
.count{background:var(--cream);color:var(--mid);font-size:11.5px;font-weight:700;padding:3px 9px;
  border-radius:99px}

/* schedule as soft blocks, tinted by state */
.sched{padding:0 14px 14px;display:flex;flex-direction:column;gap:7px}
.srow{display:flex;align-items:center;gap:14px;padding:13px 15px 13px 16px;border-radius:var(--r2);
  background:var(--cream-2);cursor:pointer;transition:.14s;position:relative;overflow:hidden}
.srow:before{content:'';position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:3px;
  background:var(--line)}
.srow:hover{background:var(--cream)}
.srow.hot{background:#FEF8E8}
.srow.hot:before{background:var(--butter-d)}
.srow.done:before{background:var(--mint-d)}
.srow.warn:before{background:var(--peach-d)}
.srow .tm{font-size:12.5px;font-weight:700;width:64px;flex:none;color:var(--grey)}
.srow .bd{flex:1;min-width:0}
.srow .bd b{display:block;font-size:14.5px;font-weight:700;letter-spacing:-.012em}
.srow .bd span{display:block;font-size:12.5px;color:var(--grey);margin-top:1px;font-weight:500}
.srow .as{display:flex;align-items:center;gap:7px;flex:none}
.srow .as .av{width:29px;height:29px;font-size:10.5px;background:var(--white);color:var(--mid)}
.srow .as span{font-size:12.5px;font-weight:600;color:var(--mid)}
.srow .amt{font-size:14.5px;font-weight:700;flex:none}


.pill{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;
  padding:4px 10px;border-radius:99px;white-space:nowrap;letter-spacing:.01em}
.pill.g{background:var(--mint);color:var(--mint-d)}
.pill.b{background:var(--sky);color:var(--sky-d)}
.pill.s{background:var(--cream);color:var(--grey)}
.pill.a{background:var(--butter);color:var(--butter-d)}
.pill.r{background:var(--peach);color:var(--peach-d)}
.pill.o{background:var(--orange);color:#fff}
.pill .dt{width:6px;height:6px;border-radius:50%;background:currentColor}

/* things to do */
.filters{display:flex;gap:6px;padding:0 22px 14px;flex-wrap:wrap}
.fil{font-size:12px;font-weight:700;padding:7px 14px;border-radius:99px;background:var(--cream);
  color:var(--grey)}
.fil.on{background:var(--orange);color:#fff}
.todo{padding:0 14px 14px;display:flex;flex-direction:column;gap:7px}
.trow{display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:var(--r2);
  background:var(--cream-2)}
.trow .ic{width:38px;height:38px;border-radius:13px;flex:none;display:flex;align-items:center;
  justify-content:center}
.trow .ic svg{width:18px;height:18px}
.trow .bd{flex:1;min-width:0}
.trow .bd b{display:block;font-size:13.5px;font-weight:700}
.trow .bd span{display:block;font-size:12.5px;color:var(--grey);margin-top:1px;font-weight:500}
.trow .bd .mt{font-size:11.5px;margin-top:3px;font-weight:700;color:var(--faint)}
.trow .bd .mt.bad{color:var(--peach-d)}
.btn{font-size:12.5px;font-weight:700;padding:9px 15px;border-radius:99px;background:var(--ink);
  color:#fff;white-space:nowrap;flex:none}
.btn:hover{background:var(--orange)}
.btn.o{background:var(--orange)}
.btn.q{background:var(--cream);color:var(--ink)}

/* Noti handled */
.did .ch h2 .sp{width:9px;height:9px;border-radius:50%;background:var(--mint-d);flex:none}
.dlist{padding:0 14px 16px;display:flex;flex-direction:column;gap:5px}
.drow{display:flex;gap:11px;padding:11px 14px;align-items:flex-start;border-radius:var(--r3);
  background:var(--cream-2)}
.drow .tk{width:21px;height:21px;border-radius:50%;background:var(--mint);color:var(--mint-d);
  flex:none;display:flex;align-items:center;justify-content:center;margin-top:1px}
.drow .tk svg{width:12px;height:12px;stroke-width:3.2}
.drow .bd{flex:1;min-width:0}
.drow .bd b{font-size:13.5px;font-weight:700;display:block}
.drow .bd span{font-size:11.5px;color:var(--faint);display:block;margin-top:2px;line-height:1.5;font-weight:500}
.drow .tm{font-size:11px;color:var(--faint);flex:none;font-weight:700}

/* ══ PHONES ═══════════════════════════════════════════════════════════════ */
.pstrip{background:var(--ink);border-radius:var(--r);padding:34px 26px 36px;margin-top:14px}
.pstrip .sh{margin-bottom:24px;display:flex;justify-content:space-between;align-items:flex-end;
  gap:18px;flex-wrap:wrap}
.pstrip .sh b{color:#fff;font-size:25px;font-weight:800;letter-spacing:-.032em;display:block}
.pstrip .sh span{color:#A69C92;font-size:14px;display:block;margin-top:5px;font-weight:500}
.phones{display:flex;gap:20px;overflow-x:auto;padding-bottom:14px}
.phones::-webkit-scrollbar{height:8px}
.phones::-webkit-scrollbar-thumb{background:#3D362F;border-radius:5px}
.pcol{flex:none;width:290px}
.phone{width:290px;height:624px;background:var(--cream);border-radius:42px;position:relative;
  overflow:hidden;box-shadow:0 0 0 9px #2E2823,0 0 0 10px #4A423A,0 24px 46px -14px rgba(0,0,0,.6)}
.pcap{margin-top:15px}
.pcap b{color:#fff;font-size:14px;font-weight:700;display:block}
.pcap span{color:#A69C92;font-size:12.5px;display:block;margin-top:3px;line-height:1.5;font-weight:500}

.notch{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:82px;height:24px;
  background:#000;border-radius:14px;z-index:8}
.sb{height:46px;display:flex;align-items:flex-end;justify-content:space-between;padding:0 22px 6px;
  font-size:12px;font-weight:700;flex:none;position:relative;z-index:6}
.sb .rr{display:flex;gap:5px;align-items:center}
.sb .rr svg{width:13px;height:13px;stroke-width:2.2}
.pin{position:absolute;inset:0;display:flex;flex-direction:column}
.pbody{flex:1;overflow-y:auto;padding-bottom:112px}
.pbody::-webkit-scrollbar{display:none}

.pbar{display:flex;align-items:center;gap:11px;padding:4px 17px 14px;flex:none}
.pbar .rnd2{width:36px;height:36px;border-radius:50%;background:var(--white);display:flex;
  align-items:center;justify-content:center;flex:none}
.pbar .rnd2 svg{width:17px;height:17px}
.pbar .ti{flex:1;font-size:16px;font-weight:800;letter-spacing:-.02em;text-align:center}
.pbar .sp{width:36px;flex:none}

.phead{padding:4px 17px 16px}
.phead .hi{font-size:13px;font-weight:600;color:var(--grey);display:flex;align-items:center;
  justify-content:space-between;gap:10px}
.phead h2{font-size:28px;font-weight:800;letter-spacing:-.038em;line-height:1.08;margin-top:8px}
.phead h2 em{font-style:normal;color:var(--orange)}
.phead .dt{font-size:12.5px;color:var(--grey);font-weight:600;margin-top:8px;display:flex;
  align-items:center;gap:6px}
.phead .dt svg{width:14px;height:14px}
.pav{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;background:var(--lav);color:var(--lav-d);flex:none}

.ptabs{display:flex;gap:6px;padding:0 17px 14px;overflow-x:auto}
.ptabs::-webkit-scrollbar{display:none}
.ptab{font-size:12px;font-weight:700;padding:8px 14px;border-radius:99px;background:var(--white);
  color:var(--grey);white-space:nowrap;display:flex;align-items:center;gap:7px}
.ptab.on{background:var(--orange);color:#fff}
.ptab .n{font-size:11px;opacity:.7}

.pcards{padding:0 17px;display:flex;flex-direction:column;gap:9px}
.pcard{border-radius:var(--r2);padding:15px 16px;background:var(--white)}
.pcard.mint{background:var(--mint);color:var(--mint-d)}
.pcard.lav{background:var(--lav);color:var(--lav-d)}
.pcard.butter{background:var(--butter);color:var(--butter-d)}
.pcard.peach{background:var(--peach);color:var(--peach-d)}
.pcard.sky{background:var(--sky);color:var(--sky-d)}
.pcard .tp{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.pcard b{font-size:15px;font-weight:800;letter-spacing:-.015em;display:block;line-height:1.25}
.pcard .sub{font-size:12.5px;opacity:.72;margin-top:3px;font-weight:500;line-height:1.4}
.pcard .mt{display:flex;align-items:center;gap:8px;margin-top:12px;flex-wrap:wrap}
.pcard .tag{display:inline-flex;align-items:center;gap:5px;background:rgba(255,255,255,.6);
  border-radius:99px;padding:4px 10px;font-size:11px;font-weight:700}
.pcard .tag svg{width:11px;height:11px;stroke-width:2.6}
.pcard .arw{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.6);display:flex;
  align-items:center;justify-content:center;flex:none}
.pcard .arw svg{width:14px;height:14px;stroke-width:2.4}
.stack{display:flex;align-items:center}
.stack .a{width:25px;height:25px;border-radius:50%;border:2px solid rgba(255,255,255,.9);
  margin-left:-8px;display:flex;align-items:center;justify-content:center;font-size:9.5px;
  font-weight:700;background:var(--white);color:var(--mid)}
.stack .a:first-child{margin-left:0}

.plab{font-size:12.5px;font-weight:800;letter-spacing:-.01em;padding:20px 17px 10px;
  display:flex;justify-content:space-between;align-items:center}
.plab .all{font-size:11.5px;font-weight:700;color:var(--orange)}

/* quick circle actions */
.quick{display:flex;justify-content:space-between;gap:8px;padding:4px 17px 6px}
.qa{flex:1;display:flex;flex-direction:column;align-items:center;gap:7px;font-size:11px;
  font-weight:700;color:var(--mid)}
.qa .c{width:100%;height:54px;border-radius:var(--r2);background:var(--white);display:flex;
  align-items:center;justify-content:center}
.qa .c svg{width:20px;height:20px}
.qa.on .c{background:var(--orange);color:#fff}

/* rows */
.prow{display:flex;align-items:center;gap:12px;padding:13px 15px;border-radius:var(--r2);
  background:var(--white);margin:0 17px 8px}
.prow .ic{width:38px;height:38px;border-radius:13px;flex:none;display:flex;align-items:center;
  justify-content:center}
.prow .ic svg{width:18px;height:18px}
.prow .bd{flex:1;min-width:0}
.prow .bd b{display:block;font-size:14px;font-weight:700}
.prow .bd span{display:block;font-size:12px;color:var(--grey);margin-top:1px;font-weight:500}
.prow .amt{font-size:14.5px;font-weight:700;flex:none}
.prow .amt.neg{color:var(--peach-d)}

/* the big money statement */
.money{margin:0 17px 14px;background:var(--ink);color:#fff;border-radius:var(--r);padding:20px}
.money .k{font-size:12.5px;font-weight:600;opacity:.62}
.money .v{font-size:38px;font-weight:800;letter-spacing:-.04em;margin-top:7px;line-height:1}
.money .m{font-size:12.5px;opacity:.62;margin-top:8px;font-weight:500;line-height:1.45}
.money .sh{position:absolute}

/* payment options */
.pay{display:flex;align-items:center;gap:13px;padding:14px 15px;border-radius:var(--r2);
  background:var(--white);margin:0 17px 8px;border:2px solid transparent;width:calc(100% - 34px)}
.pay.on{background:var(--orange);color:#fff;border-color:var(--orange)}
.pay .ic{width:40px;height:40px;border-radius:13px;background:var(--cream);color:var(--ink);
  display:flex;align-items:center;justify-content:center;flex:none}
.pay.on .ic{background:rgba(255,255,255,.22);color:#fff}
.pay .ic svg{width:19px;height:19px}
.pay .t{flex:1;min-width:0;text-align:left}
.pay .t b{display:block;font-size:14.5px;font-weight:700}
.pay .t span{display:block;font-size:12px;opacity:.68;margin-top:1px;font-weight:500}
.pay .cv{width:16px;height:16px;opacity:.4;flex:none}

.big{width:calc(100% - 34px);margin:0 17px;padding:16px;border-radius:99px;background:var(--orange);
  color:#fff;font-size:15.5px;font-weight:800;display:flex;align-items:center;justify-content:center;
  gap:8px;letter-spacing:-.01em}
.big:hover{background:var(--orange-d)}
.big svg{width:18px;height:18px;stroke-width:2.4}
.big.dark{background:var(--ink)}
.big.ghost{background:var(--white);color:var(--ink)}
.big+.big{margin-top:9px}

.secure{display:flex;align-items:center;justify-content:center;gap:7px;padding:16px 17px 6px;
  font-size:11.5px;color:var(--faint);font-weight:600}
.secure svg{width:13px;height:13px}

/* success */
.ok{text-align:center;padding:14px 22px 0}
.ok .ring{width:84px;height:84px;border-radius:50%;background:var(--mint);margin:0 auto 20px;
  display:flex;align-items:center;justify-content:center;position:relative}
.ok .ring:after{content:'';position:absolute;inset:-9px;border-radius:50%;
  border:2px dashed rgba(31,122,76,.32)}
.ok .ring svg{width:38px;height:38px;stroke:var(--mint-d);stroke-width:3.4}
.ok h3{font-size:23px;font-weight:800;letter-spacing:-.03em}
.ok .a{font-size:36px;font-weight:800;letter-spacing:-.042em;margin:12px 0 5px}
.ok .c{font-size:13px;color:var(--grey);font-weight:600}
.ok .meta{font-size:12.5px;color:var(--faint);margin-top:16px;line-height:1.65;font-weight:500}

/* customer */
.cust{text-align:center;padding:4px 17px 16px}
.cust .av{width:76px;height:76px;border-radius:50%;margin:0 auto 13px;font-size:25px;font-weight:800}
.cust h3{font-size:22px;font-weight:800;letter-spacing:-.03em}
.cust .badge{display:inline-flex;align-items:center;gap:5px;margin-top:9px;font-size:11.5px;
  font-weight:700;padding:6px 13px;border-radius:99px;background:var(--butter);color:var(--butter-d)}
.cust .badge svg{width:12px;height:12px;stroke-width:2.6}
.note{margin:10px 17px 0;padding:15px;background:var(--white);border-radius:var(--r2);
  font-size:13px;line-height:1.6;color:var(--mid);font-weight:500}
.note b{color:var(--ink);font-weight:700}

/* till */
.till{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 17px}
.prod{border-radius:var(--r2);padding:14px;text-align:left;background:var(--white)}
.prod.lo{background:var(--butter);color:var(--butter-d)}
.prod b{display:block;font-size:13.5px;font-weight:700;line-height:1.25}
.prod .p{font-size:17px;font-weight:800;margin-top:8px;letter-spacing:-.025em}
.prod .s{font-size:11px;margin-top:3px;font-weight:600;opacity:.65}

/* bottom nav: dark floating pill + orange FAB */
.pnav{position:absolute;left:50%;transform:translateX(-50%);bottom:18px;background:var(--ink);
  border-radius:99px;padding:6px 10px;display:flex;align-items:center;z-index:12;
  box-shadow:0 14px 32px -10px rgba(0,0,0,.55)}
.pni{width:47px;height:46px;border-radius:99px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:2px;color:#8B8177;font-size:8.5px;font-weight:700;letter-spacing:.01em}
.pni svg{width:20px;height:20px}
.pni.on{color:#fff}
.pni span{display:none}
.pni.on span{display:block}
.navgap{width:60px;flex:none}
/* the orange + sits in the middle of the pill and lifts out of it */
.fab{position:absolute;left:50%;transform:translateX(-50%);bottom:29px;width:56px;height:56px;
  border-radius:50%;background:var(--orange);color:#fff;display:flex;align-items:center;
  justify-content:center;z-index:14;box-shadow:0 8px 20px -4px rgba(240,97,28,.6),
  0 0 0 5px var(--cream)}
.fab svg{width:25px;height:25px;stroke-width:2.8}

/* ── the schedule: a column per person, time down the side ──────────── */
.cal{background:var(--white);border-radius:var(--r);overflow:hidden}
.caltop{display:flex;gap:9px;padding:15px 18px;align-items:center;flex-wrap:wrap;
  border-bottom:1px solid var(--line-2)}
.sel{display:inline-flex;align-items:center;gap:10px;background:var(--cream);border-radius:13px;
  padding:10px 14px;font-size:13.5px;font-weight:700;color:var(--ink)}
.sel svg{width:15px;height:15px;color:var(--faint)}
.datenav{display:flex;align-items:center;margin-left:auto;background:var(--cream);border-radius:13px;
  padding:3px;gap:2px}
.datenav button{padding:8px 13px;border-radius:11px;font-size:13px;font-weight:700;color:var(--mid)}
.datenav button:hover{color:var(--ink)}
.datenav .today{background:var(--white);color:var(--ink)}
.datenav .arw{padding:8px 9px}
.datenav .arw svg{width:15px;height:15px;display:block}

.calwrap{overflow-x:auto}
.calwrap::-webkit-scrollbar{height:8px}
.calwrap::-webkit-scrollbar-thumb{background:var(--line);border-radius:5px}
.calhead{display:flex;border-bottom:1px solid var(--line-2);min-width:760px;
  position:sticky;top:0;background:var(--white);z-index:4}
.calhead .gut{width:62px;flex:none}
.person{flex:1;min-width:150px;padding:14px 10px 13px;text-align:center;
  border-left:1px solid var(--line-2)}
.person .av{margin:0 auto 8px;width:42px;height:42px;font-size:14px}
.person b{font-size:13.5px;font-weight:700;display:block;letter-spacing:-.01em}
.person span{font-size:11.5px;color:var(--grey);font-weight:600;display:block;margin-top:2px}
.person.open .av{background:var(--cream);color:var(--faint);border:2px dashed var(--rule,#D8CFC2)}

.calbody{display:flex;min-width:760px;position:relative}
.gutter{width:62px;flex:none;position:relative}
.gutter .hr{position:absolute;right:9px;font-size:11px;font-weight:700;color:var(--faint);
  transform:translateY(-6px);white-space:nowrap}
.col{flex:1;min-width:150px;position:relative;border-left:1px solid var(--line-2);
  background:repeating-linear-gradient(to bottom,transparent 0,transparent 67px,
    var(--line-2) 67px,var(--line-2) 68px)}
.col.dim{background-color:#FCFAF7}
.block{position:absolute;left:4px;right:4px;border-radius:11px;padding:8px 10px;overflow:hidden;
  cursor:pointer}
.block .t{font-size:11.5px;font-weight:700;opacity:.72}
.block b{display:block;font-size:13.5px;font-weight:700;letter-spacing:-.012em;margin-top:2px;
  line-height:1.2}
.block span{display:block;font-size:12px;opacity:.72;margin-top:1px;font-weight:500}
.block.b-sky{background:var(--sky);color:var(--sky-d)}
.block.b-mint{background:var(--mint);color:var(--mint-d)}
.block.b-lav{background:var(--lav);color:var(--lav-d)}
.block.b-peach{background:var(--peach);color:var(--peach-d)}
.block.b-butter{background:var(--butter);color:var(--butter-d)}
/* an empty slot Noti is actively filling: dashed, not a solid booking */
.block.b-open{background:#FFF4EC;color:var(--orange);border:1.5px dashed var(--orange)}
.block .live{display:inline-flex;align-items:center;gap:4px;margin-top:6px;font-size:10.5px;
  font-weight:700;background:rgba(255,255,255,.62);border-radius:99px;padding:3px 8px}
.block .live .dt{width:5px;height:5px;border-radius:50%;background:currentColor}
.callegend{display:flex;gap:16px;padding:14px 18px;border-top:1px solid var(--line-2);
  flex-wrap:wrap;font-size:12px;color:var(--grey);font-weight:600}
.callegend b{display:inline-flex;align-items:center;gap:6px;font-weight:600}
.callegend b i{width:10px;height:10px;border-radius:3px;display:block}

.pane{display:none} .pane.on{display:block}
.soon{background:var(--white);border-radius:var(--r);padding:44px 30px;text-align:center}
.soon h3{font-size:20px;font-weight:800;letter-spacing:-.025em}
.soon p{font-size:14.5px;color:var(--grey);font-weight:500;margin-top:8px;max-width:52ch;
  margin-left:auto;margin-right:auto;line-height:1.6}

/* what the + opens: one sheet, options built from the tenant's config */
.sheet{position:absolute;inset:0;z-index:30;display:none;align-items:flex-end}
.sheet.on{display:flex}
.sheet .bg{position:absolute;inset:0;background:rgba(26,22,19,.48);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.sheetbody{position:relative;width:100%;background:var(--cream);border-radius:28px 28px 0 0;
  padding:11px 0 22px;animation:up .22s cubic-bezier(.22,1,.36,1)}
@keyframes up{from{transform:translateY(24px);opacity:.4}to{transform:none;opacity:1}}
.grab{width:38px;height:4px;border-radius:3px;background:var(--line);margin:0 auto 15px}
.sheetbody h4{font-size:20px;font-weight:800;letter-spacing:-.028em;padding:0 19px 4px}
.sheetbody .sd{font-size:13px;color:var(--grey);font-weight:500;padding:0 19px 15px}
.sheetbody .prow{cursor:pointer}
.sheetbody .prow:hover{background:#fff;outline:2px solid var(--orange);outline-offset:-2px}
.sheetbody .cancel{width:calc(100% - 34px);margin:7px 17px 0;padding:15px;border-radius:99px;
  background:var(--white);font-size:15px;font-weight:800;color:var(--ink)}
.foot{padding:22px 8px 6px;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  font-size:13px;color:var(--grey);font-weight:500}
.foot b{color:var(--ink);font-weight:800}

@media (max-width:1240px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .cols{grid-template-columns:repeat(2,1fr)}
  .cols>*,.cols>.w3,.cols>.w1{grid-column:span 2}
}
@media (max-width:720px){
  .stats{grid-template-columns:1fr}
}
/* ── the bottom bar ───────────────────────────────────────────────────────
   The rail disappears under 860px, and for a long time nothing replaced it —
   which made the app unusable on the device it is most used on: a phone, at a
   counter, in a van, on somebody's roof.

   A bar rather than a hamburger, because one-handed reach is the requirement
   and a menu behind a button is two taps and a decision before anybody gets
   anywhere. Square, ServiceM8 and Fresha all landed here for the same reason.

   This is also the native app's navigation. Getting it right here makes that
   an implementation job rather than a second design job. */
.tabs{display:none}

@media (max-width:860px){
  .rail{display:none}
  .app{padding:10px}
  .hello .l h1{font-size:30px}

  /* Room for the bar, plus whatever the phone's own chin takes. */
  .body{padding-bottom:calc(72px + env(safe-area-inset-bottom))}

  .tabs{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;
    background:var(--ink);
    padding:6px 6px calc(6px + env(safe-area-inset-bottom));
    box-shadow:0 -1px 0 rgba(255,255,255,.06)}
  .tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
    padding:8px 2px 6px;border:0;background:none;border-radius:14px;
    color:#A69C92;font-size:10.5px;font-weight:700;letter-spacing:-.01em;
    cursor:pointer;min-width:0}
  .tab svg{width:21px;height:21px;flex:none}
  .tab span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .tab.on{color:#fff}
  .tab.on svg{color:var(--orange)}
  .tab.locked{opacity:.45}

  /* Everything that did not fit, in a sheet that comes up under the thumb
     that opened it. */
  .sheet-wrap{position:fixed;inset:0;z-index:60;background:rgba(26,22,19,.4);
    display:flex;align-items:flex-end;opacity:0;transition:opacity .18s}
  .sheet-wrap.in{opacity:1}
  .sheet{width:100%;background:var(--white);border-radius:22px 22px 0 0;
    padding:10px 12px calc(14px + env(safe-area-inset-bottom));
    transform:translateY(14px);transition:transform .2s}
  .sheet-wrap.in .sheet{transform:translateY(0)}
  .sheet-grab{width:38px;height:4px;border-radius:2px;background:var(--line);
    margin:2px auto 10px}
  .sheet-row{display:flex;align-items:center;gap:13px;width:100%;
    padding:14px 12px;border:0;background:none;border-radius:15px;
    font-size:15px;font-weight:600;color:var(--ink);text-align:left;cursor:pointer}
  .sheet-row svg{width:20px;height:20px;flex:none;color:var(--mid)}
  .sheet-row.on{background:var(--cream-2)}
  .sheet-row.locked{opacity:.5}
  .sheet-row.locked svg:last-child{width:14px;height:14px;margin-left:auto}
}