/* ══════════════════════════════════════════════════════════════════════════ KELBIN iOS — ROUND 1 · the core loop The token map from the marketing site (marketing.css) to the app theme. Rule carried over from the web: semantic hues (green/terra/amber) are FILLS ONLY — they never carry text, because none of them clears 4.5:1. ══════════════════════════════════════════════════════════════════════════ */ :root{ /* ground + ink */ --sand:#FBFAF6; --white:#FFFEFB; --soft:#F4F2EC; --grey:#E5DED4; --ink:#152033; --slate:#697386; /* the one accent */ --indigo:#5B5CEB; --indigo-deep:#4848D4; --indigo-soft:#ECEBFF; /* semantic — fills, never text */ --green:#5E8C68; --terra:#C97855; --amber:#D5A249; --sans:'Figtree',-apple-system,BlinkMacSystemFont,'SF Pro Text',system-ui,sans-serif; --serif:'Newsreader',Georgia,'Times New Roman',serif; /* native surfaces: the app is one shade cooler than the marketing page, because a screen in the hand sits under changing light */ --bg:#FBFAF6; --card:#FFFEFB; --line:#E9E3DA; --raise:0 1px 2px rgba(21,32,51,.05); /* the INVERSE surface. --ink is a TEXT colour; anything that FILLS with it needs its own pair, or dark mode flips the fill white and the text vanishes. */ --strong:#152033; --on-strong:#FFFEFB; --on-accent:#FFFFFF; } /* dark is a real design, not an inversion: ground goes ink-blue, the accent lifts so it still reads on a dark ground, the sand warmth survives in text */ .dark{ --bg:#101725; --card:#18202F; --soft:#1F2839; --line:#28324399; --ink:#F3F1EC; --slate:#9AA4B8; --grey:#2A3345; --indigo:#8B8CFF; --indigo-deep:#A5A6FF; --indigo-soft:#242B4A; --raise:0 1px 2px rgba(0,0,0,.3); /* in dark the strong surface stays dark and RAISES instead of inverting, and the lifted accent needs dark text on it, not white */ --strong:#2B3550; --on-strong:#F5F3EE; --on-accent:#101725; } *{box-sizing:border-box} body{margin:0;background:var(--soft);font-family:var(--sans);color:var(--ink); -webkit-font-smoothing:antialiased} /* ── the review page around the phone ───────────────────────────────────── */ .page{display:grid;grid-template-columns:230px 1fr;gap:26px; max-width:1180px;margin:0 auto;padding:26px 22px 60px} .rail h1{font-family:var(--serif);font-size:24px;font-weight:500;margin:0 0 4px} .rail .sub{font-size:12.5px;color:var(--slate);line-height:1.5;margin:0 0 16px} .rail b.grouplabel{display:block;font-size:10.5px;letter-spacing:.10em; text-transform:uppercase;color:var(--slate);margin:16px 0 6px} .screenbtn{display:block;width:100%;text-align:left;font:inherit;font-size:13.5px; font-weight:600;background:none;border:0;border-radius:9px;padding:7px 10px; color:var(--ink);cursor:pointer} .screenbtn:hover{background:var(--white)} .screenbtn.on{background:#152033;color:#FFFEFB} .stage{display:flex;gap:26px;align-items:flex-start} /* ── the device ─────────────────────────────────────────────────────────── */ .device{width:390px;flex:none;border-radius:44px;padding:11px;background:#0E1626; box-shadow:0 30px 70px -30px rgba(21,32,51,.5)} .screen{position:relative;width:368px;height:800px;border-radius:34px;overflow:hidden; background:var(--bg);display:flex;flex-direction:column; /* colour is re-declared HERE: `color` inherits a COMPUTED value, so without this the dark tokens never reach text that only inherits from . */ color:var(--ink)} .statusbar{display:flex;align-items:center;justify-content:space-between; padding:12px 20px 2px;font-size:12.5px;font-weight:700;color:var(--ink);flex:none} .statusbar .rightbits{display:flex;gap:5px;align-items:center;font-size:11px} /* ── app chrome ─────────────────────────────────────────────────────────── */ .appbar{display:flex;align-items:center;gap:9px;padding:6px 16px 10px;flex:none} .bizchip{display:flex;align-items:center;gap:7px;background:var(--card); border:1px solid var(--line);border-radius:99px;padding:5px 11px 5px 6px; font-size:13px;font-weight:700;cursor:pointer;box-shadow:var(--raise)} .bizchip .mark{width:20px;height:20px;border-radius:6px;background:var(--indigo-soft); display:grid;place-items:center;font-size:10px;font-weight:800;color:var(--indigo-deep)} .bizchip .caret{color:var(--slate);font-size:10px} .grow{flex:1} .iconbtn{width:32px;height:32px;border-radius:50%;border:1px solid var(--line); background:var(--card);display:grid;place-items:center;font-size:14px;cursor:pointer; color:var(--ink)} .scroll{flex:1;overflow-y:auto;padding:0 16px 106px;scrollbar-width:none} .scroll::-webkit-scrollbar{display:none} /* ── type ───────────────────────────────────────────────────────────────── */ h2.greet{font-family:var(--serif);font-weight:500;font-size:27px;line-height:1.15; margin:6px 0 3px;letter-spacing:-.01em} .greetsub{font-size:13.5px;color:var(--slate);margin:0 0 15px} .sectlabel{display:flex;align-items:center;gap:8px;font-size:11px;letter-spacing:.10em; text-transform:uppercase;font-weight:800;color:var(--slate);margin:20px 0 9px} .count{background:var(--strong);color:var(--on-strong);border-radius:99px; padding:1px 7px;font-size:10.5px;letter-spacing:0} .screentitle{font-family:var(--serif);font-weight:500;font-size:25px;margin:2px 0 12px} /* ── the ask: Kelbin's one job ──────────────────────────────────────────── */ .askbar{position:absolute;left:14px;right:14px;bottom:74px;display:flex; align-items:center;gap:10px;background:var(--strong);color:var(--on-strong); border-radius:16px;padding:12px 14px;cursor:pointer; box-shadow:0 12px 30px -12px rgba(21,32,51,.6);z-index:6} .askbar .ktag{width:26px;height:26px;border-radius:50%;flex:none;object-fit:cover; background:var(--indigo-soft)} .askbar span{font-size:14px;font-weight:650} .askbar .go{margin-left:auto;font-size:15px;opacity:.7} /* ── cards ──────────────────────────────────────────────────────────────── */ .card{background:var(--card);border:1px solid var(--line);border-radius:15px; padding:13px 14px;box-shadow:var(--raise);margin-bottom:9px} .needs{border-left:3px solid var(--amber)} .needs .what{font-size:14.5px;font-weight:650;line-height:1.4;margin:0 0 3px} .needs .why{font-size:12.5px;color:var(--slate);line-height:1.45;margin:0 0 11px} .acts{display:flex;gap:8px} .btn{font:inherit;font-size:13.5px;font-weight:700;border-radius:11px;padding:13px 15px; min-height:44px; /* iOS minimum tap target — 36px was too small to hit walking */ border:1px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer} .btn.primary{background:var(--indigo);border-color:var(--indigo);color:var(--on-accent)} .btn.sm{font-size:12.5px;padding:7px 11px;border-radius:9px} .btn.wide{width:100%;text-align:center} /* receipts — Kelbin speaks in what he DID, with the time he did it */ .receipt{display:flex;align-items:center;gap:10px;padding:9px 2px; border-bottom:1px solid var(--line);font-size:13.5px} .receipt:last-child{border-bottom:0} .receipt .tick{width:19px;height:19px;border-radius:50%;flex:none;display:grid; place-items:center;font-size:10px;color:#fff;background:var(--green)} .receipt .when{margin-left:auto;font-size:11.5px;color:var(--slate); font-variant-numeric:tabular-nums} .receipt.pending .tick{background:var(--amber)} .receipt.pending{color:var(--slate)} /* ── bookings ───────────────────────────────────────────────────────────── */ .daynav{display:flex;align-items:center;gap:8px;margin:2px 0 12px} .daynav .arrow{width:30px;height:30px;border-radius:9px;border:1px solid var(--line); background:var(--card);display:grid;place-items:center;cursor:pointer;font-size:13px} .daynav .day{font-size:14.5px;font-weight:750} .daynav .dsub{font-size:12px;color:var(--slate)} .slot{display:flex;gap:12px;align-items:flex-start;background:var(--card); border:1px solid var(--line);border-radius:14px;padding:11px 13px;margin-bottom:8px; cursor:pointer;box-shadow:var(--raise)} .slot .time{font-size:13px;font-weight:800;width:52px;flex:none; font-variant-numeric:tabular-nums} .slot .who{display:block;font-size:14px;font-weight:650;margin-bottom:2px} .slot .svc{display:block;font-size:12.5px;color:var(--slate)} .pill{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.04em; text-transform:uppercase;border-radius:99px;padding:3px 8px;border:1px solid var(--line); color:var(--ink);background:var(--soft)} .pill.new{background:#EAF1EB;border-color:#CFE0D2} .pill.moved{background:#FBF0E9;border-color:#EFD9C9} .dark .pill.new{background:#1D3326;border-color:#2C4A36} .dark .pill.moved{background:#3A2A20;border-color:#57402F} .gap{font-size:11.5px;color:var(--slate);text-align:center;padding:4px 0 10px} /* ── conversations ──────────────────────────────────────────────────────── */ .convo{display:flex;gap:11px;align-items:flex-start;padding:12px 2px; border-bottom:1px solid var(--line);cursor:pointer} .convo .av{width:36px;height:36px;border-radius:50%;flex:none;background:var(--soft); display:grid;place-items:center;font-size:13px;font-weight:800;color:var(--slate)} .convo .nm{display:block;font-size:14px;font-weight:700} .convo .last{font-size:12.5px;color:var(--slate);line-height:1.4;margin-top:2px; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .convo .meta{margin-left:auto;text-align:right;flex:none} .convo .ago{font-size:11px;color:var(--slate)} .livedot{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:800; color:var(--ink);margin-top:5px} .livedot i{width:7px;height:7px;border-radius:50%;background:var(--terra); display:inline-block;animation:pulse 1.6s ease-in-out infinite} @keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}} /* ── thread ─────────────────────────────────────────────────────────────── */ .threadhead{display:flex;align-items:center;gap:10px;padding:4px 16px 10px;flex:none; border-bottom:1px solid var(--line)} .threadhead .nm{font-size:15px;font-weight:750} .threadhead .sub{font-size:11.5px;color:var(--slate)} .msgs{flex:1;overflow-y:auto;padding:14px 16px 120px;scrollbar-width:none} .msgs::-webkit-scrollbar{display:none} .msg{max-width:78%;font-size:14px;line-height:1.45;border-radius:16px;padding:10px 13px; margin-bottom:9px} .msg.them{background:var(--card);border:1px solid var(--line);border-bottom-left-radius:5px} .msg.kelbin{background:var(--indigo-soft);border:1px solid #D9D7FA;margin-left:auto; border-bottom-right-radius:5px} .dark .msg.kelbin{border-color:#343C63} .msg.you{background:var(--strong);color:var(--on-strong);margin-left:auto; border-bottom-right-radius:5px} .byline{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase; color:var(--slate);margin:0 0 4px} .byline.r{text-align:right} .takeover{position:absolute;left:14px;right:14px;bottom:16px;z-index:6} .takeover .btn{box-shadow:0 12px 30px -12px rgba(21,32,51,.5)} .youbanner{display:flex;align-items:center;gap:8px;background:var(--strong);color:var(--on-strong); border-radius:12px;padding:9px 12px;font-size:12.5px;font-weight:600;margin-bottom:9px} .composer{position:absolute;left:14px;right:14px;bottom:16px;display:flex;gap:8px; align-items:center;background:var(--card);border:1px solid var(--line); border-radius:15px;padding:9px 10px 9px 14px;z-index:6;box-shadow:var(--raise)} .composer input{flex:1;border:0;background:none;font:inherit;font-size:14px; color:var(--ink);outline:none} .composer input::placeholder{color:var(--slate)} .send{width:32px;height:32px;border-radius:50%;border:0;background:var(--indigo); color:var(--on-accent);font-size:14px;cursor:pointer} /* ── tab bar ────────────────────────────────────────────────────────────── */ /* a pushed screen (thread, booking detail) hides the tab bar, as iOS does — it also frees the bottom edge for the one action that screen is for */ .screen.detail .tabbar{display:none} .tabbar{position:absolute;left:0;right:0;bottom:0;height:66px;display:flex; background:color-mix(in srgb,var(--card) 92%,transparent); backdrop-filter:blur(14px);border-top:1px solid var(--line);z-index:7} .tab{flex:1;border:0;background:none;font:inherit;display:flex;flex-direction:column; align-items:center;justify-content:center;gap:3px;padding-bottom:9px;cursor:pointer; color:var(--slate);font-size:10.5px;font-weight:700} .tab .ic{font-size:17px;line-height:1} .tab.on{color:var(--indigo-deep)} .dark .tab.on{color:var(--indigo)} /* ── sheets ─────────────────────────────────────────────────────────────── */ .sheet{position:absolute;inset:0;background:rgba(21,32,51,.34);z-index:9; display:flex;align-items:flex-end} .sheet[hidden]{display:none} .sheetbody{width:100%;background:var(--card);border-radius:22px 22px 0 0;padding:16px 16px 22px; max-height:88%;overflow-y:auto;scrollbar-width:none} .sheetbody::-webkit-scrollbar{display:none} .grabber{width:38px;height:4px;border-radius:99px;background:var(--grey); margin:0 auto 13px} .sheettitle{font-family:var(--serif);font-weight:500;font-size:21px;margin:0 0 3px} .sheetsub{font-size:12.5px;color:var(--slate);margin:0 0 14px} .suggest{display:block;width:100%;text-align:left;font:inherit;font-size:13.5px; font-weight:600;background:var(--soft);border:1px solid var(--line);border-radius:12px; padding:11px 13px;margin-bottom:8px;cursor:pointer;color:var(--ink)} .askfield{display:flex;gap:8px;align-items:center;border:1px solid var(--line); background:var(--bg);border-radius:14px;padding:11px 12px;margin-bottom:12px} .askfield input{flex:1;border:0;background:none;font:inherit;font-size:14.5px; color:var(--ink);outline:none} .kreply{display:flex;gap:10px;align-items:flex-start;margin-top:12px} .kreply img{width:30px;height:30px;border-radius:50%;flex:none;object-fit:cover; background:var(--indigo-soft)} .kreply .body{background:var(--indigo-soft);border:1px solid #D9D7FA;border-radius:14px; border-bottom-left-radius:5px;padding:11px 13px;font-size:13.5px;line-height:1.5} .dark .kreply .body{border-color:#343C63} /* business switcher rows */ .bizrow{display:flex;align-items:center;gap:11px;padding:12px 2px; border-bottom:1px solid var(--line);cursor:pointer;font-size:14px;font-weight:650} .bizrow .mark{width:30px;height:30px;border-radius:9px;background:var(--indigo-soft); display:grid;place-items:center;font-size:12px;font-weight:800;color:var(--indigo-deep)} .bizrow .on{margin-left:auto;color:var(--indigo-deep);font-size:14px} /* ── the notes column ───────────────────────────────────────────────────── */ .notes{flex:1;min-width:0;max-width:420px;padding-top:6px} .notes h3{font-family:var(--serif);font-weight:500;font-size:20px;margin:0 0 6px} .notes p{font-size:13.5px;line-height:1.6;color:var(--ink);margin:0 0 11px} .notes .why{font-size:12.5px;color:var(--slate);line-height:1.6} .notes ul{margin:0 0 12px;padding-left:17px;font-size:13px;line-height:1.6} .notes li{margin-bottom:5px} .notes .kv{display:flex;gap:8px;font-size:12.5px;padding:5px 0; border-bottom:1px solid var(--line)} .notes .kv b{width:104px;flex:none;color:var(--slate);font-weight:700} .tag{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.05em; text-transform:uppercase;background:var(--indigo-soft);color:var(--indigo-deep); border-radius:99px;padding:3px 9px;margin-bottom:10px} .toolbar{display:flex;gap:8px;margin-bottom:14px} @media (max-width:1000px){ .page{grid-template-columns:1fr} .stage{flex-direction:column} .rail{display:flex;flex-wrap:wrap;gap:6px} .rail h1,.rail .sub,.rail b.grouplabel{width:100%} .screenbtn{width:auto} } /* On a phone-sized viewport the device is EXACTLY the viewport: 390px of device plus 22px of page padding each side is 434px, which scrolls sideways. The page gutter moves onto the text columns so the phone still renders at true size. */ @media (max-width:460px){ .page{padding:14px 0 40px;gap:16px} .rail,.notes{padding:0 14px;max-width:100%} .toolbar{padding:0 14px} .stage{gap:18px;align-items:center} .device{margin:0 auto} } /* Below the device's own width the frame itself goes fluid. It is no longer a true 390px render — but nothing is clipped and the page never scrolls sideways. (A transform:scale(calc(100vw / 390)) does NOT work here: calc() on lengths yields a length, scale() needs a number, so the declaration is dropped and an overflow:hidden quietly CLIPS the phone instead of fitting it.) */ @media (max-width:389px){ .device{width:100%;padding:8px;border-radius:34px} .screen{width:100%;border-radius:26px} } @media (prefers-reduced-motion:reduce){ .livedot i{animation:none} } /* ══════════════════════════════════════════════════════════════════════════ ROUND 2 — the rest of the app, and the states that decide whether an owner trusts it. Nothing here invents a new component: every screen is built from the round-1 vocabulary (card, receipt, slot, pill, sheet). ══════════════════════════════════════════════════════════════════════════ */ /* search — Customers is meant to feel like a reliable spreadsheet */ .search{display:flex;align-items:center;gap:9px;background:var(--card); border:1px solid var(--line);border-radius:13px;padding:11px 13px;margin-bottom:12px} .search input{flex:1;border:0;background:none;font:inherit;font-size:14px; color:var(--ink);outline:none} .search input::placeholder{color:var(--slate)} .crow{display:flex;align-items:center;gap:11px;padding:12px 2px; border-bottom:1px solid var(--line);cursor:pointer} .crow .av{width:34px;height:34px;border-radius:50%;flex:none;background:var(--soft); display:grid;place-items:center;font-size:12px;font-weight:800;color:var(--slate)} .crow .nm{display:block;font-size:14px;font-weight:700} .crow .sub{display:block;font-size:12px;color:var(--slate);margin-top:1px} .crow .rt{margin-left:auto;text-align:right;font-size:11.5px;color:var(--slate); font-variant-numeric:tabular-nums} /* settings — rows that go somewhere, grouped by what they govern */ .setgroup{background:var(--card);border:1px solid var(--line);border-radius:15px; overflow:hidden;margin-bottom:14px;box-shadow:var(--raise)} .setrow{display:flex;align-items:center;gap:11px;padding:13px 14px; border-bottom:1px solid var(--line);cursor:pointer;font-size:14px;font-weight:600; min-height:48px} .setrow:last-child{border-bottom:0} .setrow .val{margin-left:auto;font-size:12.5px;color:var(--slate);font-weight:600} .setrow .chev{color:var(--slate);font-size:13px} .setrow .ic{width:26px;height:26px;border-radius:8px;flex:none;background:var(--soft); display:grid;place-items:center;font-size:13px} /* a switch that reads as on/off without relying on colour alone */ .sw{margin-left:auto;width:44px;height:26px;border-radius:99px;background:var(--grey); position:relative;flex:none;cursor:pointer;border:0} .sw::after{content:'';position:absolute;top:3px;left:3px;width:20px;height:20px; border-radius:50%;background:var(--white);transition:left .16s ease} .sw.on{background:var(--green)} .sw.on::after{left:21px} .dark .sw::after{background:#0E1626} /* banners: offline, conflict, permission */ .banner{display:flex;gap:10px;align-items:flex-start;border-radius:14px;padding:12px 13px; font-size:13px;line-height:1.45;margin-bottom:12px;border:1px solid var(--line)} .banner b{display:block;font-size:13.5px;margin-bottom:2px} .banner.warn{background:#FBF0E9;border-color:#EFD9C9} .banner.stale{background:var(--soft)} .dark .banner.warn{background:#3A2A20;border-color:#57402F} .banner .dot{width:9px;height:9px;border-radius:50%;flex:none;margin-top:5px} .banner.warn .dot{background:var(--terra)} .banner.stale .dot{background:var(--slate)} /* skeletons — loading shows the SHAPE of what is coming, never a spinner alone */ .sk{background:var(--soft);border-radius:8px;height:12px;margin-bottom:8px; animation:shimmer 1.4s ease-in-out infinite} .sk.w70{width:70%} .sk.w45{width:45%} .sk.w90{width:90%} .sk.tall{height:56px;border-radius:14px} @keyframes shimmer{0%,100%{opacity:.55}50%{opacity:.9}} /* empty — day one is a real screen, not a shrug */ .empty{text-align:center;padding:26px 10px} .empty img{width:104px;height:104px;border-radius:50%;object-fit:cover; background:var(--indigo-soft);margin-bottom:14px} .empty h3{font-family:var(--serif);font-weight:500;font-size:21px;margin:0 0 6px} .empty p{font-size:13.5px;color:var(--slate);line-height:1.55;margin:0 auto 16px;max-width:30ch} /* grouped Needs You, for the day there are a dozen */ .groupcard{background:var(--card);border:1px solid var(--line);border-radius:15px; padding:12px 13px;margin-bottom:9px;box-shadow:var(--raise);border-left:3px solid var(--amber)} .groupcard .gh{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700; margin-bottom:3px} .groupcard .gh .n{background:var(--strong);color:var(--on-strong);border-radius:99px; padding:1px 7px;font-size:10.5px} .groupcard .gs{font-size:12.5px;color:var(--slate);line-height:1.45;margin-bottom:10px} /* thread day dividers + jump control for long histories */ .divider{display:flex;align-items:center;gap:10px;margin:14px 0 12px; font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase; color:var(--slate)} .divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--line)} .collapsed{text-align:center;font-size:12.5px;color:var(--slate);background:var(--soft); border:1px solid var(--line);border-radius:12px;padding:10px;margin-bottom:10px; cursor:pointer;font-weight:600} .jump{position:absolute;left:50%;transform:translateX(-50%);bottom:82px; background:var(--strong);color:var(--on-strong);border:0;border-radius:99px; padding:9px 15px;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;z-index:6; box-shadow:0 10px 24px -10px rgba(21,32,51,.5)} /* the site glance — the ONLY builder presence on the phone */ .sitecard{background:var(--card);border:1px solid var(--line);border-radius:15px; overflow:hidden;margin-bottom:12px;box-shadow:var(--raise)} .sitecard .shot{height:132px;background:linear-gradient(160deg,#EFF5EF,#D8E8DA); display:flex;flex-direction:column;justify-content:center;padding:16px} .dark .sitecard .shot{background:linear-gradient(160deg,#1F3328,#16241C)} .sitecard .shot b{font-family:var(--serif);font-weight:500;font-size:17px;color:#152033} .sitecard .shot span{font-size:11.5px;color:#3E5A48;margin-top:4px} .sitecard .meta{padding:12px 13px;font-size:12.5px;color:var(--slate)} .desktopnote{font-size:12.5px;color:var(--slate);line-height:1.55; border:1px dashed var(--line);border-radius:12px;padding:11px 12px;margin-top:4px} /* sign-in / first run */ .signwrap{padding:22px 6px 0;text-align:center} .signwrap img{width:118px;height:118px;border-radius:50%;object-fit:cover; background:var(--indigo-soft);margin-bottom:16px} .signwrap h2{font-family:var(--serif);font-weight:500;font-size:26px;margin:0 0 6px} .signwrap p{font-size:13.5px;color:var(--slate);margin:0 0 20px;line-height:1.5} .field{display:flex;align-items:center;gap:9px;background:var(--card); border:1px solid var(--line);border-radius:13px;padding:13px;margin-bottom:9px; text-align:left} .field input{flex:1;border:0;background:none;font:inherit;font-size:15px; color:var(--ink);outline:none} .step{display:flex;gap:12px;align-items:flex-start;margin-bottom:14px;text-align:left} .step .n{width:24px;height:24px;border-radius:50%;flex:none;background:var(--indigo-soft); color:var(--indigo-deep);display:grid;place-items:center;font-size:12px;font-weight:800} .step b{display:block;font-size:14px;margin-bottom:2px} .step span{font-size:12.5px;color:var(--slate);line-height:1.45}