/* Client portal v1 (#130): the calm product shell from the approved prototype (draft PR #138). Loaded after app.css
   and feedback.css on index.html only. The sidebar, pages and building blocks below are scoped to body.kp (set once a
   client is signed in), so the sign-in and no-account screens keep their own look. Team (team.js), Feedback
   (feedback.js) and the tour still use app.css; the tokens here retune them to the same palette. */
:root{
  --paper:#FBF8F4; --side:#F5F0E9; --card:#FFFFFF; --sunk:#F6F1EA;
  --ink:#17161A; --ink-2:#55525C; --ink-3:#6B6772;
  --line:#E7E0D6; --line-strong:#8C857D;
  --hover:#EFE9E1; --selected:#EAE3D9;
  --clay:#FF8A3D; --clay-soft:#FFE6D4;
  --amb-bg:#FFF1D9; --amb:#7A4E0C; --amb-dot:#E9A43A;
  --ok-bg:#E3F4E7; --ok:#1C6331; --ok-dot:#3DAA5C;
  --info-bg:#EAF1FA; --info:#264A80;
  --org-bg:#FFE8DA; --org:#9A3F14;
  --mute-bg:#EFECEF; --mute:#4A4752;
  --danger:#B4382F;
  --btn:#17161A; --on-btn:#FFFFFF;
  --shadow:0 1px 2px rgba(40,30,60,.05),0 6px 20px -10px rgba(60,50,90,.18);
  --shadow-pop:0 2px 6px rgba(40,30,60,.08),0 24px 48px -16px rgba(50,45,90,.32);
  --r:14px; --side-w:252px; --env:var(--kl-env-h,0px); --vab:0px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#17151A; --side:#1C1A20; --card:#221F26; --sunk:#1B191F;
  --ink:#F3EEE8; --ink-2:#C4BEC8; --ink-3:#ADA7B2;
  --line:#34303A; --line-strong:#8A8490;
  --hover:#2A262F; --selected:#322D38;
  --clay-soft:rgba(255,138,61,.16);
  --amb-bg:rgba(233,164,58,.16); --amb:#F5CB80; --amb-dot:#E9A43A;
  --ok-bg:rgba(61,170,92,.16); --ok:#93DFA9; --ok-dot:#4CC26F;
  --info-bg:rgba(127,166,214,.18); --info:#AFCBEE;
  --org-bg:rgba(255,138,61,.16); --org:#FFB48A;
  --mute-bg:rgba(255,255,255,.08); --mute:#D4CFD9;
  --danger:#FF8A80; --btn:#F3EEE8; --on-btn:#17151A;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px -12px rgba(0,0,0,.5);
  --shadow-pop:0 2px 6px rgba(0,0,0,.4),0 24px 48px -16px rgba(0,0,0,.7)}}
:root[data-theme="dark"]{
  --paper:#17151A; --side:#1C1A20; --card:#221F26; --sunk:#1B191F;
  --ink:#F3EEE8; --ink-2:#C4BEC8; --ink-3:#ADA7B2;
  --line:#34303A; --line-strong:#8A8490;
  --hover:#2A262F; --selected:#322D38;
  --clay-soft:rgba(255,138,61,.16);
  --amb-bg:rgba(233,164,58,.16); --amb:#F5CB80; --amb-dot:#E9A43A;
  --ok-bg:rgba(61,170,92,.16); --ok:#93DFA9; --ok-dot:#4CC26F;
  --info-bg:rgba(127,166,214,.18); --info:#AFCBEE;
  --org-bg:rgba(255,138,61,.16); --org:#FFB48A;
  --mute-bg:rgba(255,255,255,.08); --mute:#D4CFD9;
  --danger:#FF8A80; --btn:#F3EEE8; --on-btn:#17151A;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px -12px rgba(0,0,0,.5);
  --shadow-pop:0 2px 6px rgba(0,0,0,.4),0 24px 48px -16px rgba(0,0,0,.7)}

/* ---------- base, inside the shell ---------- */
body.kp{font-size:15px;line-height:1.5}
body.kp > .nav, body.kp > .pfoot{display:none}
.kp :focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:8px}
.kp h1{font-size:28px;line-height:1.15;font-weight:600;letter-spacing:-.025em}
.kp h2{font-size:17px;line-height:1.3;font-weight:600;letter-spacing:-.01em}
.kp h3{font-size:15px;line-height:1.35;font-weight:600;letter-spacing:0}
.kp h1:focus{outline:none}
.kp .muted{color:var(--ink-2)} .kp .small{font-size:13px}
.skip{position:absolute;left:12px;top:-60px;z-index:200;background:var(--btn);color:var(--on-btn);padding:10px 14px;border-radius:10px;text-decoration:none;font-weight:500}
.skip:focus{top:calc(var(--env) + var(--vab) + 12px)}
body.kp:has(.banner.viewas){--vab:44px}
.kp .link{font-weight:500;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}

/* ---------- shell ---------- */
.kp .shell{display:grid;grid-template-columns:var(--side-w) minmax(0,1fr);min-height:calc(100vh - var(--env) - var(--vab));background:linear-gradient(90deg,var(--side) calc(var(--side-w) - 1px),var(--line) 0 var(--side-w),transparent 0)}
.kp .side{position:sticky;top:calc(var(--env) + var(--vab));height:calc(100vh - var(--env) - var(--vab));background:var(--side);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:18px 14px 14px;overflow-y:auto}
.kp .org{display:flex;align-items:center;gap:11px;padding:6px 8px 18px;min-width:0}
.kp .org>div{min-width:0}
.kp .logo{flex:none;width:38px;height:38px;border-radius:10px;display:grid;place-items:center;font-weight:600;font-size:14px;letter-spacing:.02em;background:var(--ink);color:var(--paper);overflow:hidden}
.kp .logo img{width:100%;height:100%;object-fit:cover}
/* #132: an uploaded logo keeps its shape. #300: 'contain' (a transparent or wide logo) pads it on a token tile so dark
   mode works; 'cover' (a full square picture with its own background) fills the tile edge to edge, no padding or border. */
.kp .logo.has-img{background:var(--logo-tile);border:1px solid var(--line)}
.kp .logo.has-img img{object-fit:contain;padding:3px}
.kp .logo.has-img.fit-cover{background:none;border:0}
.kp .logo.has-img.fit-cover img{object-fit:cover;padding:0}
.kp .org-name{font-weight:600;font-size:15px;line-height:1.2;letter-spacing:-.01em;overflow-wrap:anywhere}
.kp .org-sub{font-size:12.5px;color:var(--ink-3)}
.kp .snav{display:flex;flex-direction:column;gap:2px}
.kp .snav a{position:relative;display:flex;align-items:center;gap:11px;min-height:40px;padding:0 10px;border-radius:10px;text-decoration:none;color:var(--ink-2);font-weight:500}
.kp .snav a svg{flex:none;width:18px;height:18px}
.kp .snav a:hover{background:var(--hover);color:var(--ink)}
.kp .snav a[aria-current="page"]{background:var(--card);color:var(--ink);box-shadow:var(--shadow)}
.kp .snav a[aria-current="page"]::before{content:"";position:absolute;left:-14px;top:10px;bottom:10px;width:3px;border-radius:0 3px 3px 0;background:var(--clay)}
.kp .snav .count{margin-left:auto;min-width:22px;height:22px;padding:0 7px;border-radius:999px;background:var(--ink);color:var(--paper);font-size:12px;font-weight:600;display:grid;place-items:center}
.kp .snav .fb-dot{margin-left:auto}
.kp .snav.lower{margin-top:auto;padding-top:14px}
.kp .snav.lower a{min-height:36px;font-size:14px}
.kp .acct{position:relative;margin-top:10px;border-top:1px solid var(--line);padding-top:10px}
.kp .acct-btn{width:100%;display:flex;align-items:center;gap:10px;padding:8px;border-radius:10px;text-align:left;min-width:0}
.kp .acct-btn:hover{background:var(--hover)}
.kp .acct-btn>span{min-width:0}
.kp .acct-btn .nm{font-weight:500;font-size:14px;line-height:1.2}
.kp .acct-btn .em{font-size:12px;color:var(--ink-3);display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kp .acct-btn svg{margin-left:auto;flex:none}
.kp .menu{position:absolute;left:0;right:0;bottom:calc(100% + 6px);background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-pop);padding:6px;z-index:40}
.kp .menu[hidden]{display:none}
.kp .menu button,.kp .menu a{display:flex;width:100%;align-items:center;gap:10px;min-height:40px;padding:0 10px;border-radius:8px;text-align:left;text-decoration:none;font-weight:500;font-size:14px}
.kp .menu button:hover,.kp .menu a:hover{background:var(--hover)}
.kp .by{display:flex;align-items:center;gap:7px;padding:12px 8px 2px;font-size:12px;color:var(--ink-3);flex-wrap:wrap}
.kp .by .kl-mark{width:30px}   /* #369: the status-pill mark */
.kp .by a{color:var(--ink-3)}
.kp .by.links{gap:4px 12px;padding-top:4px}

.kp .main{min-width:0;padding:40px clamp(20px,4vw,56px) 72px}
.kp .kpage{max-width:1040px;margin:0 auto}
.kp .page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:28px}
.kp .page-head p{margin-top:6px;color:var(--ink-2);max-width:60ch}

/* mobile top and bottom bars (#133: Sign out lives in More on phones) */
.kp .topbar,.kp .tabbar{display:none}
@media (max-width:860px){
  .kp .shell{display:block;background:none}
  .kp .side{display:none}
  .kp .topbar{display:flex;align-items:center;gap:10px;position:sticky;top:calc(var(--env) + var(--vab));z-index:30;height:56px;padding:0 16px;background:color-mix(in srgb,var(--paper) 88%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
  .kp .topbar .logo{width:30px;height:30px;font-size:12px;border-radius:8px}
  .kp .topbar .org-name{font-size:15px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .kp .main{padding:24px 16px calc(96px + env(safe-area-inset-bottom))}
  .kp .tabbar{display:grid;grid-template-columns:repeat(4,1fr);position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--card);border-top:1px solid var(--line);padding:6px 6px calc(6px + env(safe-area-inset-bottom))}
  .kp .tabbar a,.kp .tabbar button{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:52px;border-radius:10px;font-size:12px;font-weight:500;color:var(--ink-2);text-decoration:none;min-width:0}
  .kp .tabbar svg{width:22px;height:22px}
  .kp .tabbar [aria-current="page"]{color:var(--ink)}
  .kp .tabbar [aria-current="page"]::after{content:"";position:absolute;top:0;width:24px;height:3px;border-radius:0 0 3px 3px;background:var(--clay)}
  .kp .tabbar .count{position:absolute;top:4px;left:calc(50% + 6px);min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--ink);color:var(--paper);font-size:11px;font-weight:600;display:grid;place-items:center}
  .kp .tabbar .fb-dot{position:absolute;top:8px;left:calc(50% + 8px);margin:0}
  .kp h1{font-size:24px}
  .kp .page-head{margin-bottom:20px}
  .kp .toast{bottom:calc(84px + env(safe-area-inset-bottom))}
}

/* sheet (mobile More) */
.kp dialog.sheet{margin:auto auto 0;width:100%;max-width:520px;max-height:85vh;border:0;border-radius:18px 18px 0 0;background:var(--card);color:var(--ink);padding:10px 12px calc(16px + env(safe-area-inset-bottom));box-shadow:var(--shadow-pop)}
.kp dialog.sheet::backdrop{background:rgba(23,22,26,.4)}
.kp .sheet-head{display:flex;align-items:center;justify-content:space-between;padding:8px 8px 10px}
.kp .sheet a,.kp .sheet .row-btn{display:flex;align-items:center;gap:12px;width:100%;min-height:50px;padding:0 10px;border-radius:10px;text-decoration:none;font-weight:500;text-align:left}
.kp .sheet a:hover,.kp .sheet .row-btn:hover{background:var(--hover)}
.kp .sheet a[aria-current="page"]{background:var(--selected)}
.kp .sheet svg{width:20px;height:20px;flex:none}
.kp .sheet hr{border:0;border-top:1px solid var(--line);margin:8px 0}
.kp .sheet .by{padding:6px 10px;overflow-wrap:anywhere}

/* ---------- building blocks ---------- */
.kp .card{border-radius:var(--r);box-shadow:var(--shadow);border-color:var(--line)}
.kp .card-pad{padding:22px 24px}
@media (max-width:520px){.kp .card-pad{padding:18px 16px}}
.kp .card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.kp .card-head a{font-size:14px;font-weight:500;color:var(--ink-2)}
.kp .grid{display:grid;gap:20px}
.kp .cols{grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);align-items:start}
@media (max-width:1100px){.kp .cols{grid-template-columns:1fr}}
.kp .stack{display:grid;grid-template-columns:minmax(0,1fr);gap:20px}
.kp .stack>*,.kp .grid>*{margin-top:0}

.kp .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--line-strong);background:var(--card);font-weight:500;font-size:14px;text-decoration:none;white-space:nowrap;box-shadow:none;transform:none}
.kp .btn:hover{background:var(--hover);transform:none}
.kp .btn.primary{background:var(--btn);border-color:var(--btn);color:var(--on-btn)}
.kp .btn.primary:hover{opacity:.9;background:var(--btn)}
.kp .btn.ghost{background:var(--card);border-color:var(--line-strong)}
.kp .btn.ghost:hover{background:var(--hover)}
.kp .btn.sm{min-height:34px;padding:0 13px;font-size:13.5px}
.kp .btn:disabled,.kp .btn[disabled]{opacity:.5;cursor:not-allowed}
/* #206: the shared dialog's red button (app/dialog.js). .kp .btn and .kp .btn:hover above load after app.css and
   reset the background to the card, which left white (light) or near-black (dark) text on a blank button in admin
   and the portal. Restate the fill here, at the same weight as those rules. */
.kp .btn.destructive,.kp .btn.destructive:hover{background:var(--danger);border-color:var(--danger)}
.kp .btn.destructive:hover{filter:brightness(.95)}
.kp .btn.destructive[disabled]{filter:none}

.badge{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:999px;font-size:12.5px;font-weight:500;white-space:nowrap;background:var(--mute-bg);color:var(--mute)}
.badge::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.75}
.badge.turn{background:var(--amb-bg);color:var(--amb)} .badge.turn::before{background:var(--amb-dot);opacity:1}
.badge.wait{background:var(--info-bg);color:var(--info)}
.badge.done{background:var(--ok-bg);color:var(--ok)} .badge.done::before{background:var(--ok-dot);opacity:1}
.badge.prog{background:var(--clay-soft);color:var(--org)} .badge.prog::before{background:var(--clay);opacity:1}
.badge.block{background:var(--org-bg);color:var(--org)}
.badge.none{background:transparent;color:var(--ink-3);padding:0 2px} .badge.none::before{background:transparent;border:1.5px solid currentColor;width:6px;height:6px}

.kp .av{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:11.5px;font-weight:600;background:#FDE3D0;color:#5A3016;overflow:hidden}
.kp .av img{width:100%;height:100%;object-fit:cover}
.kp .av.lg{width:40px;height:40px;font-size:14px}
.kp .av.xs{width:20px;height:20px;font-size:9px}
.kp .av.c2{background:#DCE8F7;color:#1E3D6B} .kp .av.c3{background:#E0F2E5;color:#1C5530} .kp .av.c4{background:#EEE3F6;color:#4A2A66} .kp .av.c5{background:#FCEFCF;color:#5E440B}
.kp .owner{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-2);white-space:nowrap}
.kp .owner .pair{display:inline-flex}
.kp .owner .pair .av+.av{margin-left:-4px;box-shadow:0 0 0 2px var(--card)}

.kp .pbar{height:6px;border-radius:999px;background:var(--sunk);border:1px solid var(--line);overflow:hidden}
.kp .pbar i{display:block;height:100%;border-radius:inherit;background:var(--ink)}
.kp .pbar.clay i{background:var(--clay)}
@media (prefers-reduced-motion:no-preference){.kp .pbar i{transition:width .5s cubic-bezier(.2,.8,.2,1)}}

/* ---------- home ---------- */
.kp .hello{margin-bottom:22px}
.kp .hello p{color:var(--ink-2);margin-top:6px}
.kp .stages{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:24px;list-style:none}
.kp .stages li{display:flex;align-items:center;gap:10px;min-height:52px;padding:8px 14px;border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--ink-3);font-weight:500;min-width:0}
.kp .stages li .dot{flex:none;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--line-strong);display:grid;place-items:center}
.kp .stages li.done .dot{border:0;background:var(--ok-bg);color:var(--ok)}
.kp .stages li .lbl{min-width:0}
.kp .stages li .lbl small{display:block;font-size:12px;font-weight:400;color:var(--ink-3);line-height:1.2}
.kp .stages li[aria-current="step"]{border-color:var(--ink);color:var(--ink);box-shadow:var(--shadow)}
.kp .stages li[aria-current="step"] .dot{border:0;background:var(--clay);box-shadow:0 0 0 4px var(--clay-soft)}
@media (max-width:520px){.kp .stages{gap:6px}.kp .stages li{padding:8px 10px;gap:8px;font-size:14px}.kp .stages li .lbl small{display:none}}
@media (max-width:400px){.kp .stages li{padding:8px;gap:6px;font-size:13px}.kp .stages li .dot{width:16px;height:16px}}

.kp .todo-list{list-style:none;display:grid}
.kp .todo-list li{display:flex;align-items:center;gap:14px;padding:14px 0;border-top:1px solid var(--line)}
.kp .todo-list li:first-child{border-top:0;padding-top:4px}
.kp .todo-list .tx{flex:1;min-width:0}
.kp .todo-list .tx b{display:block;font-weight:500}
.kp .todo-list .tx span{font-size:13.5px;color:var(--ink-2)}
.kp .todo-list .mark{flex:none;width:10px;height:10px;border-radius:50%;background:var(--amb-dot)}
@media (max-width:600px){.kp .todo-list li{flex-wrap:wrap}.kp .todo-list .act{width:100%;padding-left:24px}.kp .todo-list .act .btn{width:100%}}

.kp .kempty{display:flex;align-items:center;gap:18px}
.kp .kempty img{flex:none;width:72px;height:72px;object-fit:contain}
.kp .kempty p{color:var(--ink-2);margin-top:4px}
@media (max-width:420px){.kp .kempty{align-items:flex-start}.kp .kempty img{width:52px;height:52px}}

.kp .stage-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap}
.kp .stage-head .of{font-size:13.5px;color:var(--ink-2);white-space:nowrap}
.kp .stage-next{margin:6px 0 14px;color:var(--ink-2)}
.kp .ksteps{list-style:none;margin-top:18px;display:grid}
.kp .pstart{margin-top:8px}
/* #417: the Audit as three phases; the current one open, the others folded to one line */
.kp .kphases{list-style:none;margin-top:14px;display:grid}
.kp .kphase{border-top:1px solid var(--line)}
.kp .kphase summary{display:flex;align-items:center;gap:12px;padding:14px 0;cursor:pointer;list-style:none;border-radius:12px}
.kp .kphase summary::-webkit-details-marker{display:none}
.kp .kphase summary::after{content:"";flex:none;width:8px;height:8px;border-right:1.8px solid var(--ink-2);border-bottom:1.8px solid var(--ink-2);transform:rotate(45deg) translate(-2px,-2px);margin-left:4px;margin-right:6px}
.kp .kphase details[open] summary::after{transform:rotate(-135deg) translate(-2px,-2px)}
.kp .kphase .pnum{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:12.5px;font-weight:600;border:1.5px solid var(--line-strong);color:var(--ink-2);background:var(--card)}
.kp .kphase.is-done .pnum{border:0;background:var(--ok-bg);color:var(--ok)}
.kp .kphase.is-current .pnum{border:0;background:var(--clay);color:#2A1305}
.kp .kphase .pt{display:grid;min-width:0;flex:1}
.kp .kphase .pt b{font-weight:600}
.kp .kphase .pwhat{margin:-4px 0 0 40px}
.kp .kphase .ksteps{margin-top:6px}
.kp .kphase .ksteps .step:first-child{border-top:0}
.kp .step{display:grid;grid-template-columns:28px minmax(0,1fr);gap:14px;padding:14px 0;border-top:1px solid var(--line)}
.kp .step .num{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:12.5px;font-weight:600;border:1.5px solid var(--line-strong);color:var(--ink-2);background:var(--card)}
.kp .step.is-done .num{border:0;background:var(--ok-bg);color:var(--ok)}
.kp .step.is-current .num{border:0;background:var(--clay);color:#2A1305;box-shadow:0 0 0 4px var(--clay-soft)}
.kp .step.is-future .t{color:var(--ink-2)}
.kp .step .row{display:flex;justify-content:space-between;align-items:flex-start;gap:8px 16px;flex-wrap:wrap}
.kp .step .row>div:first-child{min-width:0}
.kp .step .t{font-weight:500}
.kp .step .d{font-size:13.5px;color:var(--ink-2);margin-top:2px}
.kp .step .d b{font-weight:500;color:var(--ink)}
.kp .step .d.note{color:var(--org)}
.kp .step .meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.kp .step .date{font-size:13px;color:var(--ink-2);white-space:nowrap}
.kp .step .go{margin-top:10px}
.kp .step.is-current{background:linear-gradient(90deg,var(--clay-soft),transparent 60%);margin:0 -24px;padding-left:24px;padding-right:24px}
@media (max-width:520px){.kp .step.is-current{margin:0 -16px;padding-left:16px;padding-right:16px}}

.kp .update .who{display:flex;gap:12px;align-items:center;margin-bottom:12px}
.kp .update .who b{display:block;font-weight:500;line-height:1.2}
.kp .update .who span{font-size:13px;color:var(--ink-2)}
.kp .update p{color:var(--ink);white-space:pre-line}

/* ---------- lists and tables ---------- */
.kp .rows{list-style:none}
.kp .rows>li{display:flex;align-items:center;gap:14px;padding:14px 0;border-top:1px solid var(--line);flex-wrap:wrap}
.kp .rows>li:first-child{border-top:0}
.kp .rows .grow{flex:1;min-width:180px}
.kp .rows .grow b{display:block;font-weight:500}
.kp .rows .grow span{font-size:13.5px;color:var(--ink-2)}
.kp .rows .right{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-left:auto}

.kp .stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.kp .stat{padding:16px 18px}
.kp .stat b{display:block;font-size:24px;font-weight:600;letter-spacing:-.02em;line-height:1.15}
.kp .stat span{font-size:13px;color:var(--ink-2)}
@media (max-width:600px){.kp .stats{grid-template-columns:1fr 1fr}.kp .stats .stat:last-child{grid-column:1/-1}}

.kp .price{font-size:34px;font-weight:600;letter-spacing:-.03em;line-height:1.1}
.kp .price span{font-size:15px;font-weight:400;letter-spacing:0;color:var(--ink-2)}
.kp .save{display:flex;gap:14px;align-items:center;margin-top:18px;padding:14px 16px;border-radius:12px;background:var(--ok-bg);color:var(--ok)}
.kp .save b{font-weight:600}
.kp .save svg{flex:none}
.kp .plan-row{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.kp table.simple{width:100%;border-collapse:collapse;font-size:14px}
.kp table.simple th{text-align:left;font-weight:500;color:var(--ink-2);font-size:13px;padding:0 12px 10px 0;border-bottom:1px solid var(--line)}
.kp table.simple td{padding:13px 12px 13px 0;border-bottom:1px solid var(--line);vertical-align:middle}
.kp table.simple tr:last-child td{border-bottom:0}
.kp table.simple .num{text-align:right;white-space:nowrap}
.kp table.simple b{font-weight:500}
@media (max-width:600px){
  .kp table.simple thead{display:none}
  .kp table.simple,.kp table.simple tbody,.kp table.simple tr,.kp table.simple td{display:block;width:100%}
  .kp table.simple tr{padding:12px 0;border-bottom:1px solid var(--line)}
  .kp table.simple tr:last-child{border-bottom:0}
  .kp table.simple td{border:0;padding:2px 0}
  .kp table.simple td[data-l]::before{content:attr(data-l) ": ";color:var(--ink-2)}
  .kp table.simple .num{text-align:left}
}
.kp .hint{font-size:13px;color:var(--ink-2);margin-top:6px}

.kp .report-hero{display:flex;gap:20px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap}
.kp .report-hero h2{font-size:22px;margin-top:4px}
.kp .rbody{background:var(--sunk);border:1px solid var(--line);border-radius:12px}
.kp .older details{border-top:1px solid var(--line);padding:12px 0}

.kp .cov{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) 96px minmax(0,1fr);gap:12px;align-items:center;padding:12px 0;border-top:1px solid var(--line)}
.kp .cov.head{border-top:0;font-size:13px;color:var(--ink-2);padding-top:0}
.kp .cov .who{display:flex;align-items:center;gap:10px;min-width:0}
.kp .cov .who span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kp .cov .n,.kp .cov .sv{font-size:14px;color:var(--ink-2)}
@media (max-width:640px){
  .kp .cov{grid-template-columns:1fr auto;row-gap:4px}
  .kp .cov.head{display:none}
  .kp .cov .sv{grid-column:1/-1;font-size:13px}
}

/* ---------- pages built from the older modules (Team, Lantern recordings, Feedback, older plans' Home) ---------- */
.kp .kpage .wrap{width:auto;margin:0}
.kp .kpage .team{display:grid;gap:16px}
.kp .kpage .team .card{padding:22px 24px}
.kp .kpage .fb-top{padding-top:0}
.kp .kpage .fb-body{padding-bottom:0}
.kp .kpage .legacy .top{padding-top:0}
.kp .kpage .legacy main{padding-bottom:0}
@media (max-width:520px){.kp .kpage .team .card{padding:18px 16px}}

/* View as client bar sits above the shell; the sticky sidebar and top bar move down by its height */
.kp #banner:has(.viewas){position:sticky;top:var(--env);z-index:60}
/* The older modules hide controls with [hidden]; keep that working under the shell's button styles */
.kp [hidden]{display:none!important}
.kp .tour-body h2:focus-visible{outline:none}

/* ---------- #149: slim stage line, Current step card, teammate's Your part ---------- */
.kp .stage-line{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;margin-top:12px;font-size:13px;color:var(--ink-3)}
.kp .stage-line .sl{display:inline-flex;align-items:center;gap:7px}
.kp .stage-line .sl.now{color:var(--ink);font-weight:500}
.kp .stage-line .sl.next .sico{opacity:.45}
.kp .stage-line .slx{font-weight:400;color:var(--ink-2)}
.kp .stage-line .sep{width:14px;height:1px;background:var(--line-strong);opacity:.6}
.kp .sico{flex:none;width:20px;height:20px;border-radius:6px;display:grid;place-items:center}
/* #425: opened on a phone, but the next step needs Lantern on a computer */
.kp .phone-card{border-color:var(--ember)}
.kp .phone-card p{margin-top:8px} .kp .phone-card .acts{margin-top:14px}
.kp .now-card{position:relative;overflow:hidden;border-color:var(--line);background:linear-gradient(160deg,var(--clay-soft),transparent 46%),var(--card)}
.kp .now-card .eyebrow{font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--org)}
.kp .now-card h2{font-size:22px;letter-spacing:-.02em;margin-top:4px}
.kp .now-card .what{margin-top:6px;color:var(--ink-2);max-width:64ch}
.kp .now-card .chk{margin-top:6px;font-weight:500}
.kp .now-card .chk.note{color:var(--org);font-weight:400}
.kp .now-card .meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:14px}
.kp .now-card .date{font-size:13.5px;color:var(--ink-2)}
.kp .now-card .acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.kp .now-card .calm{margin-top:14px}
.kp .now-card .also{margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
.kp .now-card .also h3{font-size:14px;color:var(--ink-2);margin-bottom:6px}
.kp .ypstats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:16px}
.kp .ypstats>div{padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--card)}
.kp .ypstats b{display:block;font-size:18px;font-weight:600;letter-spacing:-.01em;line-height:1.2}
.kp .ypstats span{font-size:12.5px;color:var(--ink-2)}
@media (max-width:700px){.kp .ypstats{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.kp .now-card h2{font-size:19px}.kp .now-card .acts .btn{flex:1 1 100%}}
.kp .yp .what{margin-top:14px;color:var(--ink)}

/* ---------- #158, #159: two-column top, Lantern lockup and How it works, teammate onboarding ---------- */
.kp .top2{align-items:stretch}
.kp .top2>.update{align-self:start}
.kp .ln-hero{display:flex;align-items:center;gap:14px;margin:-22px -24px 18px;padding:16px 24px;background:linear-gradient(165deg,#A99BE0 0%,#C9ABD9 45%,#EDB9C0 78%,#F3C6AA 100%);color:#17161A}
.kp .ln-hero img{width:52px;height:52px;filter:drop-shadow(0 6px 10px rgba(60,30,60,.25))}
.kp .ln-hero b{display:block;font-size:19px;font-weight:600;letter-spacing:-.02em;line-height:1.15}
.kp .ln-hero span{font-size:13.5px;color:rgba(23,22,26,.78)}
@media (max-width:520px){.kp .ln-hero{margin:-18px -16px 16px;padding:14px 16px}}
.kp .yp-steps{list-style:none;counter-reset:y;display:grid;gap:10px;margin-top:14px}
.kp .yp-steps li{counter-increment:y;display:grid;grid-template-columns:30px 1fr;column-gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--card)}
.kp .yp-steps li::before{content:counter(y);grid-row:span 2;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-weight:600;font-size:13px;border:1.5px solid var(--line-strong);color:var(--ink-2)}
.kp .yp-steps li.now::before{border:0;background:var(--clay);color:#2A1305}
.kp .yp-steps b{font-weight:500}.kp .yp-steps span{font-size:13.5px;color:var(--ink-2)}
.kp .tm-code,.tour .tm-code{display:inline-block;padding:1px 8px;border-radius:8px;border:1px dashed var(--line-strong);background:var(--sunk);letter-spacing:.06em;font-weight:600;color:var(--ink)}
.kp .how-grid{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.kp .how-grid>li{padding:16px;border:1px solid var(--line);border-radius:12px;background:var(--sunk)}
.kp .how-grid b{display:block;font-weight:600;margin-top:10px}
.kp .how-grid p,.kp .how-grid ol{font-size:13.5px;color:var(--ink-2);margin-top:4px}
.kp .how-grid ol{padding-left:18px;display:grid;gap:2px}
.kp .how-grid .hi{display:inline-flex;align-items:center;gap:6px;height:28px;min-width:28px;padding:0 8px;border-radius:999px;background:var(--card);border:1px solid var(--line);font-size:11.5px;font-weight:700;letter-spacing:.08em;color:var(--ink);justify-content:center}
.kp .how-grid .hi i{width:8px;height:8px;border-radius:50%;background:#E5484D}
.kp .how-grid .hi.ok{color:var(--ok);background:var(--ok-bg);border-color:transparent}
.kp .how-grid .hi.no{color:var(--org);background:var(--org-bg);border-color:transparent}
@media (prefers-reduced-motion:no-preference){.kp .how-grid .rec .hi i{animation:recPulse 1.6s ease-in-out infinite}}
@keyframes recPulse{50%{opacity:.35}}
@media (max-width:1100px){.kp .how-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.kp .how-grid{grid-template-columns:1fr}}
.tm-login .tm-mark{width:64px;height:64px;margin:0 auto 14px}
/* onboarding cards in the tour dialog */
.tour .tm-video{margin-top:12px;border-radius:14px;overflow:hidden;background:var(--sunk);border:1px solid var(--line);aspect-ratio:16/9}
.tour .tm-video iframe,.tour .tm-video video{width:100%;height:100%;border:0;display:block}
.tour .tm-video.none{aspect-ratio:auto;display:flex;gap:14px;align-items:center;padding:14px 16px}
.tour .tm-video.none img{width:56px;height:56px;border-radius:50%;flex:none}
.tour .tm-video.none p{margin:0!important;font-size:14.5px!important}
.tour .tm-two{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.tour .tm-two>div{padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--paper);font-size:14px;color:var(--ink-2)}
.tour .tm-two b{color:var(--ink)} .tour .tm-two ul{margin:6px 0 0 16px;display:grid;gap:3px}
@media (max-width:600px){.tour .tm-two{grid-template-columns:1fr}}
/* #419: who sees it, the AI first read and deletion, on the tour card itself */
.tour .tm-facts{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:6px;font-size:14px;color:var(--ink-2)}
.tour .tm-facts b{color:var(--ink);font-weight:600}
.tour .tm-notice{margin-top:12px;border:1px solid var(--line);border-radius:12px;padding:10px 14px;font-size:14px}
.tour .tm-notice summary{font-weight:500;cursor:pointer}
.tour .tm-notice p{font-size:13.5px!important;margin-top:8px!important}
/* #314: the wordmark at the top of the teammate welcome (#369: the status-pill wordmark) */
.tour .tour-brand{position:absolute;top:16px;left:20px;z-index:1;display:flex;font-size:17px}
/* #315: slide 3's labels sit in one wrapping row under the clay, so nothing overlaps at 320px */
.tour .art-records .a1{left:calc(50% - 140px);top:30px;width:70px;rotate:10deg} .tour .art-records .a2{left:calc(50% - 38px);top:22px;width:76px} .tour .art-records .a3{left:calc(50% + 62px);top:36px;width:80px}
.tour .art-records .labs{position:absolute;left:12px;right:12px;bottom:18px;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;z-index:1}
.tour .art-records .labs .lab{position:static;transform:none}
.tour .tour-art.art-records{height:200px}
@media (max-width:380px){.tour .art-records .a1{left:calc(50% - 124px)}.tour .art-records .a3{left:calc(50% + 50px)}}
/* #313: the optional name field on the welcome */
.tour .tm-name{margin-top:14px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--paper)}
.tour .tm-name label{display:block;font-size:14px;font-weight:500;color:var(--ink-2);margin:0 0 6px} .tour .tm-name label span{color:var(--ink-3);font-weight:400}
.tour .tm-name-row{display:flex;gap:8px} .tour .tm-name-row input{flex:1 1 auto;min-width:0;margin:0}
.tour .tm-name .tour-note:empty{display:none}
.tour .tm-steps{margin:12px 0 0 20px;display:grid;gap:8px;color:var(--ink-2);font-size:15px}
/* ---------- #115: trial portal (a booked lead before the call) and the AI audit chat ---------- */
.kp .navlock{margin-left:auto;display:inline-flex;color:var(--ink-3)}
.kp .snav a.is-locked{color:var(--ink-3)}
.kp .sheet a .navlock{margin-left:auto}
.kp .trial-now .pbar{margin-top:14px;max-width:420px}
/* #270: the call time with Reschedule and Cancel call (or Book a new time once cancelled), on Home and What unlocks */
.kp .trial-call{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:12px}
.kp .trial-call p,.kp .hello .trial-call p{margin:0;color:var(--ink-2)}
.kp .trial-call b{color:var(--ink);font-weight:600}
.kp .trial-call .acts,.kp .ul-next .trial-call .acts{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.kp .ul-next .trial-call{margin-top:0}
.kp .ul-next .trial-call+.muted{margin-top:10px}
/* #273: Home's one-line stage strip (the client Home's stage-line) with a link to What unlocks */
.kp .trial-stages{margin-top:14px}
.kp .trial-stages .sl-more{margin-left:4px;font-size:13px;color:var(--ink-2);text-underline-offset:3px}
/* #275, #422: Ask Bryce and Share this with your team, quiet under the main card and at the foot of What unlocks */
.kp .trial-more{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;padding:4px 2px}
.kp .trial-more p{margin:0}
.kp .trial-more .acts{display:flex;flex-wrap:wrap;gap:8px}
.kp .lockchip{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;background:var(--mute-bg);color:var(--mute);font-size:12.5px;font-weight:500;white-space:nowrap}
.kp .lockchip svg,.kp .ul-sh .tag svg{flex:none;width:13px;height:13px}
/* What unlocks (#/unlocks): the journey, one stage per card on a rail, each feature with a small example of its screen */
.kp .ul-journey{list-style:none;margin:0;padding:0;display:grid;gap:20px}
.kp .ul-stage{position:relative;display:grid;grid-template-columns:32px minmax(0,1fr);gap:16px;align-items:start}
.kp .ul-stage:not(:last-child)::before{content:"";position:absolute;left:15px;top:40px;bottom:-20px;width:2px;background:var(--line);border-radius:2px}
.kp .ul-mark{position:relative;z-index:1;width:32px;height:32px;margin-top:22px;display:grid;place-items:center;border-radius:10px;background:var(--paper)}
.kp .ul-mark .sico{width:32px;height:32px;border-radius:10px}
.kp .ul-mark .sico svg{width:18px;height:18px}
.kp .ul-mark.now{border-radius:50%;background:var(--card);border:1px solid var(--line);box-shadow:0 0 0 5px var(--paper)}
.kp .ul-mark.now i{width:10px;height:10px;border-radius:50%;background:var(--clay);box-shadow:0 0 0 4px var(--clay-soft)}
.kp .ul-sh{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:8px 16px}
.kp .ul-st{flex:1 1 16ch;min-width:0}
.kp .ul-sh h2{font-size:20px;letter-spacing:-.015em;text-wrap:balance}
.kp .ul-sub{margin-top:2px;font-size:13.5px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.kp .ul-sh .tag{gap:6px;flex:none;margin-top:2px}
.kp .ul-what{margin-top:10px;color:var(--ink-2);max-width:64ch}
.kp .ul-next{margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.kp .ul-next .muted{margin-top:4px;max-width:64ch}
.kp .ul-next .acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.kp .ul-feats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 28px;margin-top:20px;padding-top:20px;border-top:1px solid var(--line)}
.kp .ul-feats>:only-child{grid-column:1/-1}
@media (max-width:1180px){.kp .ul-feats{grid-template-columns:minmax(0,1fr)}}
.kp .ul-feat{display:flex;flex-direction:column;min-width:0;border-radius:8px}
.kp .ul-feat:focus{outline:none}
.kp .ul-feat:focus-visible{outline:2px solid var(--ink);outline-offset:6px}
.kp .ul-feat h3{display:flex;align-items:center;gap:8px;font-size:15px}
.kp .ul-feat h3 svg{flex:none;color:var(--ink-3)}
.kp .ul-feat>p{margin-top:4px;font-size:14px;color:var(--ink-2)}
/* the example: a recessed tray with the real parts inside, labeled so it never reads as live data */
.kp .ul-prev{margin:12px 0 0;flex:1;padding:30px 12px 12px;border-radius:12px;background:var(--sunk);border:1px solid var(--line);position:relative;font-size:13.5px;pointer-events:none;user-select:none}
.kp .ul-prev figcaption{position:absolute;top:8px;left:12px;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.kp .ul-prev .ul-sum{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-weight:600;margin-bottom:8px}
.kp .ul-prev .ul-sum small{font-weight:400;color:var(--ink-3);font-size:12.5px}
.kp .ul-rows,.kp .ul-steps{list-style:none;margin:0;padding:0;background:var(--card);border:1px solid var(--line);border-radius:10px}
.kp .ul-rows li,.kp .ul-steps li{display:flex;align-items:center;gap:10px;padding:9px 12px;border-top:1px solid var(--line)}
.kp .ul-rows li:first-child,.kp .ul-steps li:first-child{border-top:0}
.kp .ul-rows .who{flex:1;min-width:0;display:flex;flex-direction:column}
.kp .ul-rows .who b{font-weight:500}
.kp .ul-rows .who small{font-size:12.5px;color:var(--ink-3)}
.kp .ul-rows .av{width:26px;height:26px;font-size:10.5px}
.kp .ul-steps .num{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:11.5px;font-weight:600;border:1.5px solid var(--line-strong);color:var(--ink-2)}
.kp .ul-steps .is-done .num{border:0;background:var(--ok-bg);color:var(--ok)}
.kp .ul-steps .is-turn .num{border:0;background:var(--clay);color:#2A1305}
.kp .ul-steps .t{flex:1;min-width:0;font-weight:500}
.kp .ul-steps .m{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex:none}
.kp .ul-steps .d{font-size:12px;color:var(--ink-3);white-space:nowrap}
.kp .ul-more{margin-top:8px;font-size:12.5px;color:var(--ink-3)}
.kp .ul-pay{margin:0;background:var(--card);border:1px solid var(--line);border-radius:10px}
.kp .ul-pay>div{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;border-top:1px solid var(--line)}
.kp .ul-pay>div:first-child{border-top:0}
.kp .ul-pay dt{color:var(--ink-2)}
.kp .ul-pay dd{margin:0;display:flex;align-items:center;gap:8px;font-weight:600;font-variant-numeric:tabular-nums}
.kp .ul-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.kp .ul-stats>div{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px 12px;min-width:0}
.kp .ul-stats b{display:block;font-size:20px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.kp .ul-stats span{font-size:12px;color:var(--ink-2)}
.kp .ul-prev.is-win{padding:30px 16px 16px;background:linear-gradient(165deg,#93B5E2 0%,#BFD0EA 42%,#EBCDB6 82%,#F1C9A9 100%);border-color:transparent}
.kp .ul-prev.is-win figcaption{color:#2A3A55}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .kp .ul-prev.is-win{background:linear-gradient(165deg,#27303F 0%,#262634 48%,#30262A 100%)}:root:not([data-theme="light"]) .kp .ul-prev.is-win figcaption{color:var(--ink-3)}}
:root[data-theme="dark"] .kp .ul-prev.is-win{background:linear-gradient(165deg,#27303F 0%,#262634 48%,#30262A 100%)}
:root[data-theme="dark"] .kp .ul-prev.is-win figcaption{color:var(--ink-3)}
.kp .ul-prev .win{box-shadow:var(--shadow);border-radius:14px}
.kp .ul-prev .arow{padding:10px 14px;font-size:13.5px}
@media (max-width:520px){
  .kp .ul-stage{grid-template-columns:minmax(0,1fr)}
  .kp .ul-stage::before,.kp .ul-mark{display:none}
  .kp .ul-stats{grid-template-columns:1fr 1fr}.kp .ul-stats>div:last-child{grid-column:1/-1}
  .kp .ul-steps .m .d{display:none}
}
.kp .trial-foot{margin-top:18px}
/* #415: Before you decide (who runs Keeplight, the Audit's time, the terms link) and the sample Audit report */
.kp .tr-after{margin-top:20px}
.kp .tr-card h3{font-size:15px;margin-bottom:4px}
.kp .tr-card p{color:var(--ink-2);max-width:64ch}
.kp .tr-card p+p{margin-top:6px}
.kp .tr-card a{color:var(--ink);font-weight:500;text-underline-offset:3px}
.kp .tr-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px 28px;margin-top:14px}
.kp .tr-grid>div{display:flex;flex-direction:column;gap:6px;min-width:0}
.kp .tr-grid>div>a{margin-top:2px}
.kp .tr-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 32px;margin-top:14px}
.kp .tr-cols h3+.tr-who{margin-top:8px}
.kp .tr-cols h3:not(:first-child){margin-top:18px}
.kp .tr-who{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.kp .tr-who img{flex:none;width:48px;height:48px;border-radius:14px;object-fit:cover}
.kp .tr-who b{display:block;font-weight:600}
.kp .tr-who span{font-size:13px;color:var(--ink-3)}
.kp .tr-card blockquote{margin:4px 0 8px;font-size:16px;line-height:1.45;font-weight:500;color:var(--ink)}
.kp .tr-time{margin:6px 0 10px;display:grid;gap:8px}
.kp .tr-time>div{padding-top:8px;border-top:1px solid var(--line)}
.kp .tr-time dt{font-weight:600}
.kp .tr-time dd{margin:2px 0 0;color:var(--ink-2)}
.kp .tr-links{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:4px}
.kp .tr-terms{margin-top:14px}
.kp .sa-wrap{margin-top:12px}
.kp .sa-wrap>summary{cursor:pointer;font-weight:500;padding:8px 0;list-style-position:inside}
.kp .sa{margin-top:4px}
.kp .sa-sec{padding:16px 0;border-top:1px solid var(--line)}
.kp .sa h3{font-size:16px;margin-bottom:8px}
.kp .sa p{color:var(--ink-2);max-width:68ch}
.kp .sa b{color:var(--ink);font-weight:600}
.kp .sa-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:12px}
.kp .sa-stats>div{background:var(--sunk);border:1px solid var(--line);border-radius:10px;padding:10px 12px;min-width:0}
.kp .sa-stats b{display:block;font-size:20px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.kp .sa-stats span{font-size:12.5px;color:var(--ink-2)}
.kp .sa-top,.kp .sa-list{list-style:none;margin:0;padding:0;display:grid;gap:8px;counter-reset:top}
.kp .sa-top li,.kp .sa-list li{border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--card)}
.kp .sa-top li{counter-increment:top}
.kp .sa-top .sa-row b::before{content:counter(top) ". "}
.kp .sa-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px}
.kp .sa-top p,.kp .sa-list p{margin-top:3px;font-size:14px}
.kp .sa-meta{font-size:12.5px!important;color:var(--ink-3)!important;font-variant-numeric:tabular-nums}
.kp .sa-plain{margin:0;padding-left:18px;display:grid;gap:6px;color:var(--ink-2)}
.kp .sa-note{margin-top:14px;font-size:13px;color:var(--ink-3)!important}
@media (max-width:900px){.kp .tr-grid,.kp .tr-cols{grid-template-columns:minmax(0,1fr)}}
@media (max-width:520px){.kp .sa-stats{grid-template-columns:1fr 1fr}}
.kp .trial-chat{max-width:760px}
.kp .ai-notice h2,.kp .chat-off h2{font-size:19px}
.kp .notice-list{margin:12px 0 0;padding-left:20px;display:grid;gap:8px;color:var(--ink-2)}
.kp .notice-list b{color:var(--ink)}
.kp .ai-notice .acts,.kp .chat-off .acts,.kp .chat-done .acts,.kp .chat-locked .acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.kp .chat-card{display:flex;flex-direction:column;overflow:hidden;padding:0}
.kp .chat-top{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--sunk)}
.kp .ai-tag{font-size:13px;font-weight:600;color:var(--info);background:var(--info-bg);padding:3px 10px;border-radius:999px}
.kp .topics{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.kp .topics li{font-size:12.5px;padding:3px 9px;border-radius:999px;border:1px solid var(--line);color:var(--ink-3)}
.kp .topics li.on{background:var(--ok-bg);color:var(--ok);border-color:transparent}
.kp .clog{list-style:none;margin:0;padding:16px;display:flex;flex-direction:column;gap:10px;max-height:min(56vh,560px);min-height:200px;overflow-y:auto}
.kp .cmsg{max-width:min(82%,560px);padding:10px 14px;border-radius:16px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.kp .cmsg.ai{align-self:flex-start;background:var(--sunk);border:1px solid var(--line);border-bottom-left-radius:6px}
.kp .cmsg.me{align-self:flex-end;background:var(--btn);color:var(--on-btn);border-bottom-right-radius:6px}
.kp .cmsg.me.skipped,.kp .cmsg.me.redacted{background:var(--mute-bg);color:var(--mute);font-style:italic}
.kp .cmsg.pending{opacity:.7}
.kp .cmsg.typing{display:flex;gap:5px;padding:14px 16px}
.kp .cmsg.typing i{width:7px;height:7px;border-radius:50%;background:var(--ink-3)}
@media (prefers-reduced-motion:no-preference){.kp .cmsg.typing i{animation:kl-dot 1s infinite ease-in-out}.kp .cmsg.typing i:nth-child(2){animation-delay:.15s}.kp .cmsg.typing i:nth-child(3){animation-delay:.3s}}
@keyframes kl-dot{0%,80%,100%{opacity:.3;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
.kp .cerr{margin:0 16px 10px;padding:10px 12px;border-radius:10px;background:var(--amb-bg);color:var(--amb);font-size:14px}
.kp .composer{padding:12px 16px 14px;border-top:1px solid var(--line)}
.kp .composer textarea{width:100%;min-height:64px;resize:vertical;font:inherit;padding:10px 12px;border-radius:12px;border:1px solid var(--line-strong);background:var(--card);color:var(--ink)}
.kp .composer textarea:focus-visible{outline:2px solid var(--clay);outline-offset:1px}
.kp .cbtns{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 6px}
.kp .chat-done,.kp .chat-locked{padding:14px 16px;border-top:1px solid var(--line)}
.kp .chat-done[hidden],.kp .chat-locked[hidden],.kp .composer[hidden]{display:none}
/* #197: dictation. The mic sits inside the text box; the Listening line says when the microphone is on */
.kp .cfield{position:relative}
.kp .cfield:has(.mic:not([hidden])) textarea{padding-right:56px}
.kp .composer .mic{position:absolute;right:8px;bottom:10px;width:40px;height:40px;min-height:0;padding:0;border-radius:50%;display:inline-grid;place-items:center}
.kp .composer .mic[hidden]{display:none}
.kp .composer .mic.on{background:var(--danger);border-color:var(--danger);color:#fff}
.kp .crec{display:none;align-items:center;gap:8px;margin:8px 0 0;font-size:13.5px;color:var(--ink-2)}
.kp .crec.on{display:flex}
.kp .crec .rdot{width:10px;height:10px;border-radius:50%;background:var(--danger);flex:none}
@media (prefers-reduced-motion:no-preference){.kp .crec .rdot{animation:kl-rec 1.2s infinite ease-in-out}}
@keyframes kl-rec{50%{opacity:.35}}
/* #197 phase 2 slot: Talk it through or Type it out, shown only once a voice module registers */
.kp .chat-mode{margin:16px 0 0;padding:0;border:0;display:flex;flex-wrap:wrap;gap:8px 18px}
.kp .chat-mode legend{width:100%;margin-bottom:6px;font-weight:600;color:var(--ink)}
.kp .chat-mode label{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--ink-2)}
/* #195: the welcome card and the chat as the trial tour's last step (the tour is full screen on phones, app.css) */
.tour .tour-hello{display:flex;gap:14px;align-items:center;margin-top:12px}
.tour .tour-hello img{width:64px;height:64px;border-radius:50%;object-fit:cover;flex:none;background:var(--sunk)}
.tour .tour-hello p{margin:0!important;display:flex;flex-direction:column;font-size:15px!important}
.tour .tour-hello b{color:var(--ink)} .tour .tour-hello span{font-size:13.5px;color:var(--ink-dim)}
.tour .tour-art[hidden]{display:none}
/* #276: the chat step sizes to its content (the AI notice is short) and takes the tall fixed height only once the chat
   itself is showing, so the notice never sits above an empty area on desktop */
.tour .tour-dlg.is-mount{width:min(760px,100%);height:auto;min-height:min(420px,calc(100dvh - 48px));max-height:min(880px,calc(100dvh - 48px))}
.tour .tour-dlg.is-mount:has(.tour-mount .chat-card){height:min(880px,calc(100dvh - 48px))}
.tour .tour-dlg.is-mount .tour-body{display:flex;flex-direction:column;padding-bottom:12px}
.tour .tour-dlg.is-mount #tour-b{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;margin-top:12px}
.tour .tour-mount{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.tour .tour-mount .chat-card{flex:1 1 auto;min-height:0}
.tour .tour-mount .clog{flex:1 1 auto;max-height:none;min-height:140px}
.tour .tour-mount .ai-notice,.tour .tour-mount .chat-off{overflow-y:auto}
@media (max-width:600px){.tour .tour-dlg.is-mount,.tour .tour-dlg.is-mount:has(.tour-mount .chat-card){width:100%;height:100dvh;max-height:none}.tour .tour-dlg.is-mount .tour-body{padding:18px 16px 8px}}
.kp .chat-ro{padding:10px 16px}
@media (max-width:520px){.kp .cbtns .btn{flex:1 1 auto}.kp .cmsg{max-width:92%}.kp .clog{max-height:58vh}}
/* #273: the trial tour's path card, the three stages in one list */
#tour-b .tour-path{margin:12px 0 0;padding-left:20px;display:grid;gap:10px;color:var(--ink-2);font-size:15px;line-height:1.5}
#tour-b .tour-path b{color:var(--ink);font-weight:600}
/* ---------- #422: Share this with your team, in the trial portal (#/share) and the public page (audit-summary.html) ---------- */
.share-acts{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 20px}
.share-acts .share-url{flex:1 1 100%;margin:2px 0 0;overflow-wrap:anywhere}
.share-acts [data-share-url]{color:var(--ink);font-weight:500;user-select:all}
.audit-sum{max-width:760px;background:var(--card);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-soft);padding:clamp(22px,4vw,40px)}
.audit-sum .sum-brand{margin:0 0 14px;font-size:15px}
.audit-sum h1,.audit-sum .sum-head h2{font-size:clamp(26px,4vw,34px);letter-spacing:-.03em;line-height:1.12;text-wrap:balance;outline:none}
.audit-sum .sum-lead{margin-top:8px;color:var(--ink-2);max-width:60ch}
.audit-sum .sum-sec{margin-top:26px;padding-top:20px;border-top:1px solid var(--line)}
.audit-sum .sum-sec h2,.audit-sum .sum-sec h3{font-size:18px;letter-spacing:-.015em}
.audit-sum .sum-sec p{margin-top:8px;color:var(--ink-2);max-width:66ch}
.audit-sum .sum-price{display:flex;flex-wrap:wrap;gap:12px;margin:12px 0 0}
.audit-sum .sum-price div{flex:1 1 160px;padding:12px 16px;border:1px solid var(--line);border-radius:14px;background:var(--paper)}
.audit-sum .sum-price dt{font-size:13px;color:var(--ink-3)}
.audit-sum .sum-price dd{margin:2px 0 0;font-size:22px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.audit-sum .sum-asks{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:10px}
.audit-sum .sum-asks li{display:flex;flex-direction:column;gap:2px;padding:12px 16px;border:1px solid var(--line);border-radius:14px}
.audit-sum .sum-asks span{color:var(--ink-2)}
.audit-sum .sum-note{font-size:14px}
.audit-sum .sum-steps{list-style:none;margin:12px 0 0;padding:0;display:grid}
.audit-sum .sum-steps li{display:flex;align-items:baseline;gap:12px;padding:9px 0;border-top:1px solid var(--line)}
.audit-sum .sum-steps li:first-child{border-top:0}
.audit-sum .sum-steps .n{flex:none;width:22px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.audit-sum .sum-steps .t{flex:1 1 auto;min-width:0}
.audit-sum .sum-steps .w{flex:none;font-size:13px;color:var(--ink-3)}
.audit-sum .sum-foot{margin-top:26px;padding-top:16px;border-top:1px solid var(--line);font-size:14px;color:var(--ink-2)}
.audit-sum a{color:inherit;text-underline-offset:3px}
body.kp-sum{background:var(--paper)}
.sum-page{width:min(760px,100% - 32px);margin:0 auto;padding:clamp(20px,4vw,48px) 0 64px}
.sum-page .share-acts{justify-content:flex-end}
@media (max-width:520px){.audit-sum .sum-steps li{flex-wrap:wrap}.audit-sum .sum-steps .w{flex-basis:100%;padding-left:34px}}
/* Print or save as PDF: only the summary, on white, with nothing interactive */
@media print{
  .kp .topbar,.kp .tabbar,.kp .side,#banner,.nav,.pfoot,.skip,.toast,.share-acts,.kp .page-head,.kl-dlg{display:none!important}
  .kp .shell{display:block;background:none;min-height:0}
  .kp main,.kp #kpage,.sum-page{padding:0!important;margin:0!important;width:auto;max-width:none}
  body,body.kp-sum{background:#fff!important}
  .audit-sum{box-shadow:none;border:0;padding:0;max-width:none;background:#fff;color:#17161A}
  .audit-sum *{color:#17161A!important}
  .audit-sum .sum-sec{break-inside:avoid}
}
/* ---------- end #115 ---------- */
/* ---------- #168 email preferences (portal page and the admin Settings card) ---------- */
.eprefs .ep-list{list-style:none;margin:14px 0 0;padding:0}
.eprefs .ep-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;border-top:1px solid var(--line)}
.eprefs .ep-tx{display:flex;flex-direction:column;gap:2px;min-width:0;margin:0;font-weight:400;cursor:pointer;color:var(--ink)}
.eprefs .ep-tx b{font-weight:600;font-size:15px}
.eprefs .ep-tx>span:last-child{font-size:14px;color:var(--ink-2)}
.eprefs .is-soon .ep-tx,.eprefs .is-locked .ep-tx{cursor:default}
.eprefs .ep-soon{display:inline-block;width:max-content;margin:2px 0;padding:2px 8px;border-radius:999px;background:var(--t-info-bg);color:var(--t-info);font-size:12px;font-weight:600}
.eprefs .ep-lock{display:inline-flex;align-items:center;gap:6px;flex:none;font-size:13px;font-weight:500;color:var(--ink-2)}
.eprefs .ep-sw{appearance:none;-webkit-appearance:none;flex:none;position:relative;width:44px;height:26px;min-height:0;margin:0;padding:0;border-radius:999px;border:1px solid var(--line-strong,var(--line));background:var(--line);cursor:pointer;transition:background .15s var(--ease)}
.eprefs .ep-sw::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:var(--card);box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .15s var(--ease)}
.eprefs .ep-sw:checked{background:var(--signal);border-color:var(--signal)}
.eprefs .ep-sw:checked::after{transform:translateX(18px)}
.eprefs .ep-sw:focus-visible{outline:2px solid var(--ember);outline-offset:2px}
.eprefs .ep-sw:disabled{cursor:not-allowed;opacity:.55}
.eprefs .ep-mkt{display:flex;align-items:flex-start;gap:12px;margin:16px 0 0;font-weight:400;font-size:15px;color:var(--ink);cursor:pointer}
.eprefs .ep-mkt input{flex:none;width:20px;height:20px;min-height:0;margin:2px 0 0;accent-color:var(--ember)}
.eprefs .ep-mstat{margin:10px 0 0 32px;font-size:13px;color:var(--ink-2)}
.eprefs .ep-note{padding:12px 16px;border-radius:12px;background:var(--banner-bg);color:var(--banner-ink);font-size:14px}
.eprefs .ep-saved{min-height:1em}
@media (prefers-reduced-motion:reduce){.eprefs .ep-sw,.eprefs .ep-sw::after{transition:none}}
/* ---------- end #168 ---------- */

/* ---------- #132: logo and photo picker (portal Team, admin Plan and billing and Settings) ---------- */
.lp{display:grid;gap:12px;margin-top:12px}
.lp-row{display:flex;gap:14px;align-items:center;min-width:0}
.lp-prev{flex:none;display:grid;place-items:center;width:72px;height:72px;border-radius:14px;background:var(--sunk);border:1px dashed var(--line-strong)}
.lp-prev.round{border-radius:50%}
.kp .lp-prev .logo,.lp-prev .cbadge.lg{width:64px;height:64px;font-size:20px;border-radius:12px}
.kp .lp-prev .av.lg{width:64px;height:64px;font-size:20px}
.lp-txt{display:grid;gap:2px;min-width:0}
.lp-txt b{font-weight:600}
.lp-acts{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.lp-acts[hidden]{display:none}
.kp .lp .lp-pick{cursor:pointer;position:relative;margin:0;color:var(--ink);font-size:13.5px;font-weight:500}
.kp .lp .lp-pick.primary{color:var(--on-btn)}
.lp-pick:focus-within{outline:2px solid var(--clay);outline-offset:2px}
.lp-msg{color:var(--ink-2);margin:0}
.lp-msg:empty{display:none}
.lp-msg.bad{color:var(--danger)}
.fb-by{display:flex;align-items:center;gap:8px;margin:6px 0 2px;font-size:13px;color:var(--ink-2)}
.fb-by .av{width:22px;height:22px;border-radius:50%;overflow:hidden;flex:none}
.fb-by .av img,.fb-ev .av img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.fb-ev .av{overflow:hidden}

/* #186: Stripe payments on Billing */
.kp .pay-rows>li{align-items:flex-start}
.kp .pay-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.kp .pay-btns .btn{display:inline-flex;align-items:center;gap:8px}
.kp .pay-save{font-size:12px;font-weight:600;padding:2px 8px;border-radius:999px;background:var(--ok-bg);color:var(--ok)}
.kp .pay-btns .btn.primary .pay-save{background:rgba(255,255,255,.22);color:inherit}
.kp .pay-err{margin-top:8px;color:var(--org)}
/* #290: the checkout card. One column (summary, form, what happens next) until the card is about 900px wide, then the
   summary and next steps sit left and Stripe's form sits right in its own surface, capped near 480px. A container query
   on the card, so it follows the card's width, not the window's (the sidebar takes 252px of it). */
.kp .co-card{container:co/inline-size}
.kp .co-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;align-items:start}
.kp .co-sum,.kp .co-more{min-width:0}
.kp .co-back{margin:0 0 14px;padding:0 12px 0 8px;gap:4px}
.kp .co-back svg{transform:rotate(90deg)}
.kp .co-eyebrow{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.kp .co-sum h2{font-size:19px;letter-spacing:-.015em;margin-top:4px;text-wrap:balance}
.kp .co-what{margin-top:6px;max-width:52ch}
.kp .co-total{margin-top:16px;padding:16px 18px;border:1px solid var(--line);border-radius:12px;background:var(--sunk)}
.kp .co-amt{font-size:30px;font-weight:600;letter-spacing:-.03em;line-height:1.1;font-variant-numeric:tabular-nums}
.kp .co-amt span{margin-left:6px;font-size:15px;font-weight:400;letter-spacing:0;color:var(--ink-2)}
.kp .co-how{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:10px}
.kp .co-method{display:inline-flex;align-items:center;gap:7px;font-weight:500;color:var(--ink)}
.kp .co-method svg{color:var(--ink-2)}
.kp .co-how .badge{font-variant-numeric:tabular-nums;white-space:normal;height:auto;min-height:24px}
.kp .co-terms{margin-top:10px}
.kp .co-more h3{font-size:15px}
.kp .co-next{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:8px}
.kp .co-next li{display:flex;gap:9px;align-items:flex-start;color:var(--ink-2)}
.kp .co-next svg{flex:none;margin-top:3px;color:var(--ok)}
.kp .co-trust{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
/* #358: the Test lab's test client: how to pay in test mode, and the tab's own session banner */
.kp .co-testcard{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:14px;padding:10px 12px;border-radius:12px;background:var(--t-info-bg);color:var(--t-info);font-size:14px;font-variant-numeric:tabular-nums}
.banner.testlab{background:var(--t-info-bg);color:var(--t-info);padding:8px 16px}
.kp .co-pay{min-width:0;padding:6px;border:1px solid var(--line);border-radius:14px;background:var(--card)}
.kp .co-pay.is-fake{padding:0;border:0;background:none}
.kp .co-mount{min-height:420px;border-radius:10px}
.kp .co-fake{padding:16px;border:1px dashed var(--line-strong);border-radius:10px;background:var(--sunk)}
.kp .co-sims{display:flex;flex-direction:column;align-items:stretch;gap:10px;margin-top:14px}
.kp .co-sims .btn{white-space:normal;text-align:center;min-height:44px}
@container co (max-width:620px){.kp .co-amt{font-size:26px}.kp .co-total{padding:14px 16px}.kp .co-pay{padding:0;overflow:hidden}}
@container co (min-width:840px){
  .kp .co-grid{grid-template-columns:minmax(0,1fr) minmax(0,480px);grid-template-rows:auto 1fr;column-gap:36px;row-gap:24px}
  .kp .co-sum{grid-column:1;grid-row:1}
  .kp .co-more{grid-column:1;grid-row:2}
  .kp .co-pay{grid-column:2;grid-row:1/span 2}
  .kp .co-amt{font-size:38px}
}
.kp .pay-hist td .muted{margin-left:4px}
@media (max-width:560px){.kp .pay-btns .btn{width:100%;justify-content:center}}
/* #382: the checkout's consent step (the agreement, and for plans the renewal consent), order forms, the late-payment
   pause banner and the minimum-term line. Tokens only, so both themes follow. */
.kp .co-pay.is-consent{padding:18px 20px}
.kp .co-consent{display:grid;gap:14px}
.kp .co-consent h3{font-size:16px;letter-spacing:-.01em}
.kp .chk{display:flex;align-items:flex-start;gap:10px;margin:0;font-size:14px;font-weight:400;line-height:1.5;color:var(--ink);cursor:pointer}
.kp .chk input{flex:none;width:18px;height:18px;min-height:0;padding:0;margin:2px 0 0;accent-color:var(--ink)}
.kp .chk .link,.kp .co-consent .link{text-decoration:underline;text-underline-offset:3px}
.kp .co-renew{display:grid;gap:12px;padding:14px 16px;border:1px solid var(--line);border-radius:12px;background:var(--sunk)}
.kp .co-renew p{color:var(--ink-2);line-height:1.55}
.kp .co-renew p b{color:var(--ink)}
.kp .co-consent .btn{justify-self:start}
.kp .co-consent .pay-err{margin-top:0}
.kp .co-credit{margin-top:8px;color:var(--t-ok)}
.kp .ord-list{gap:14px}
.kp .ord{padding:16px 18px;border:1px solid var(--line);border-radius:14px;background:var(--card)}
.kp .ord .card-head h3{font-size:16px;letter-spacing:-.01em}
.kp .ord-lines{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:6px}
.kp .ord-lines li{position:relative;padding-left:16px;color:var(--ink-2);line-height:1.5}
.kp .ord-lines li::before{content:"";position:absolute;left:2px;top:.68em;width:5px;height:5px;border-radius:50%;background:var(--ink-3)}
.kp .ord-spec{margin-top:12px;padding:12px 14px;border-radius:10px;background:var(--sunk)}
.kp .ord-spec p+p{margin-top:4px}
.kp .ord-terms{margin-top:10px}
.kp .ord-sign{display:grid;gap:12px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.kp .ord-sign .fld{max-width:360px}
.kp .ord-sign .btn{justify-self:start}
.kp .ord-sign .pay-err{margin-top:0}
.kp details.ord summary{cursor:pointer;font-weight:500}
.kp .pause-banner{margin:0 0 16px;padding:12px 16px;border-radius:14px;background:var(--banner-bg);color:var(--banner-ink);font-size:14px;line-height:1.5}
.kp .pause-banner .link{color:inherit;text-decoration:underline;text-underline-offset:3px;font-weight:500}
@media (max-width:560px){.kp .co-pay.is-consent{padding:16px}.kp .co-consent .btn,.kp .ord-sign .btn{justify-self:stretch;justify-content:center}}

/* #426: a message sent from the portal with Bryce's replies under it */
.kp .kthreads{list-style:none;display:grid;margin-top:8px}
.kp .kthreads>li{padding:14px 0;border-top:1px solid var(--line)}
.kp .kthreads>li:first-child{border-top:0}
.kp .kmsg-k{font-weight:500;margin-bottom:8px;overflow-wrap:anywhere}
.kp .kthread{display:grid;gap:10px}
.kp .kmsg{padding:10px 14px;border-radius:14px;background:var(--sunk);overflow-wrap:anywhere}
.kp .kmsg p{margin-top:4px}
.kp .kmsg.bryce{display:grid;grid-template-columns:32px minmax(0,1fr);gap:10px;background:var(--card);border:1px solid var(--line)}
.kp .kmsg.bryce .av{width:32px;height:32px}
.kp .kmeta{display:block;font-size:13px;color:var(--ink-2)}
.kp .kmeta b{font-weight:500;color:var(--ink)}