/* ============================================================
   MVP Soft 2026 — Design System v2 (Designer Direction)
   Newsreader (serif headlines) + Hanken Grotesk (UI/body)
   Warm paper · deep purple/blue/cyan · accessible · motion
   ============================================================ */

:root{
  --purple:#6a2fb0;
  --purple-bright:#7141b1;
  --purple-deep:#3f1d78;
  --purple-soft:#efe7fa;
  --indigo:#241a4d;
  --indigo-2:#1a1336;
  --blue:#16a1ff;
  --cyan:#00beda;
  --ink:#1b1533;
  --body:#3a3552;
  --muted:#655f7a;
  --line:#e7e2da;
  --paper:#f7f5f0;
  --paper-2:#efece4;
  --tint:#eef3fb;
  --tint2:#d7e6ff;
  --card:#ffffff;
  --maxw:1180px;
  --grad:linear-gradient(120deg,var(--purple),var(--blue));
  --grad-deep:linear-gradient(150deg,#2a1c5c 0%,#3f1d78 55%,#1a1336 100%);
  --shadow-sm:0 1px 3px rgba(27,21,51,.05),0 8px 22px rgba(27,21,51,.07);
  --shadow:0 24px 50px rgba(27,21,51,.12);
  --radius:12px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--paper);color:var(--body);
  font-family:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:16.5px;line-height:1.62;-webkit-font-smoothing:antialiased;font-optical-sizing:auto;}
h1,h2{font-family:'Newsreader',Georgia,serif;color:var(--ink);font-weight:500;line-height:1.1;letter-spacing:-.01em;margin:0 0 .4em;}
h3,h4,h5{font-family:'Hanken Grotesk',sans-serif;color:var(--ink);font-weight:700;letter-spacing:-.01em;margin:0 0 .4em;}
h1{font-size:clamp(38px,5.4vw,60px);}
h2{font-size:clamp(28px,3.8vw,44px);}
h3{font-size:21px;}
h4{font-size:17px;}
p{margin:0 0 1em;}
a{color:var(--purple);text-decoration:none;}
img{max-width:100%;display:block;}
em{font-style:italic;color:var(--purple-bright);}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 26px;}
.center{text-align:center;}
.muted{color:var(--muted);}
.lead{font-size:18px;color:var(--muted);max-width:680px;line-height:1.55;}
.center .lead{margin-left:auto;margin-right:auto;}
.maxw640{max-width:640px;}.mt0{margin-top:0;}.mb0{margin-bottom:0;}

/* eyebrow */
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:'Hanken Grotesk',sans-serif;
  font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--purple);margin-bottom:14px;}
.eyebrow::before{content:"";width:24px;height:2px;background:var(--grad);}
.eyebrow.on-dark{color:#a9c7ff;}.eyebrow.on-dark::before{background:#a9c7ff;}

/* buttons + microinteractions */
.btn{display:inline-block;font-family:'Hanken Grotesk',sans-serif;font-weight:700;font-size:14.5px;
  padding:13px 26px;border-radius:8px;border:none;cursor:pointer;transition:.16s cubic-bezier(.2,.7,.2,1);background:var(--purple);color:#fff;text-align:center;}
.btn:hover{background:var(--purple-deep);transform:translateY(-1px);}
.btn:active{transform:translateY(0) scale(.97);}
.btn.lg{font-size:15.5px;padding:16px 32px;}
.btn.ghost{background:transparent;color:var(--purple);border:1.5px solid var(--purple);}
.btn.ghost:hover{background:#efe7fa;}
.btn.white{background:#fff;color:var(--purple-deep);}
.btn.white:hover{background:#efe7fa;}
.btn.dark{background:var(--purple-bright);}
.btn.dark:hover{background:var(--purple-deep);}
.btn.on-dark.ghost{color:#fff;border-color:rgba(255,255,255,.6);}
.btn.on-dark.ghost:hover{background:rgba(255,255,255,.1);}

/* skip link + focus */
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:#fff;padding:10px 16px;border-radius:8px;font-family:'Hanken Grotesk',sans-serif;font-weight:600;font-size:13px;transition:top .15s;}
.skip:focus{top:12px;}
a:focus-visible,button:focus-visible,.btn:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:6px;}

/* nav */
.nav{position:sticky;top:0;z-index:50;background:rgba(247,245,240,.88);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);}
.nav-inner{max-width:var(--maxw);margin:0 auto;padding:14px 26px;display:flex;align-items:center;justify-content:space-between;gap:18px;}
.logo{font-family:'Hanken Grotesk',sans-serif;font-weight:800;font-size:20px;letter-spacing:-.02em;white-space:nowrap;color:var(--ink);}
.logo .mvp{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
.logo .soft{color:var(--ink);}
.logo .us{color:var(--cyan);}
.logo .llc{font-size:11px;font-weight:600;color:var(--muted);margin-left:1px;}
.navlinks{display:flex;align-items:center;gap:22px;font-family:'Hanken Grotesk',sans-serif;font-size:14px;font-weight:600;}
.navlinks>a,.navlinks .has-drop>a{color:var(--ink);opacity:.84;transition:.15s;}
.navlinks>a:hover,.navlinks .has-drop>a:hover{opacity:1;color:var(--purple);}
.navlinks .has-drop{position:relative;}
.drop{position:absolute;top:150%;left:50%;transform:translateX(-50%) translateY(8px);background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:8px;min-width:300px;opacity:0;visibility:hidden;transition:.18s;}
.navlinks .has-drop:hover .drop{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);}
.drop a{display:block;padding:10px 14px;border-radius:8px;font-size:13.5px;color:var(--body);font-weight:600;}
.drop a:hover{background:#efe7fa;color:var(--purple-deep);}
.drop a small{display:block;color:var(--muted);font-weight:400;font-size:11.5px;}
.ai-badge{display:inline-block;position:relative;top:-2px;margin-left:6px;font-family:'Hanken Grotesk',sans-serif;font-size:9px;font-weight:800;letter-spacing:.07em;line-height:1;padding:2px 5px;border-radius:5px;background:var(--grad);color:#fff;vertical-align:baseline;text-transform:uppercase;}
.free-badge{display:inline-block;position:relative;top:-2px;margin-left:6px;font-family:'Hanken Grotesk',sans-serif;font-size:9px;font-weight:800;letter-spacing:.07em;line-height:1;padding:2px 5px;border-radius:5px;background:var(--cyan);color:#04343a;vertical-align:baseline;text-transform:uppercase;}
/* services mega dropdown */
.mega{position:absolute;top:150%;left:0;transform:translateY(8px);background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:12px;width:660px;max-width:92vw;display:grid;grid-template-columns:1fr 1fr;gap:6px;opacity:0;visibility:hidden;transition:.18s;z-index:60;}
.navlinks .has-drop:hover .mega,.navlinks .has-drop:focus-within .mega{opacity:1;visibility:visible;transform:translateY(0);}
.mega-card{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"ic t" "ic d" "ic more";column-gap:13px;row-gap:1px;padding:13px;border-radius:10px;border:1px solid transparent;align-items:start;transition:.15s;}
.mega-card:hover{background:var(--purple-soft);border-color:rgba(106,47,176,.18);}
.mc-ic{grid-area:ic;width:38px;height:38px;border-radius:9px;background:var(--purple-soft);display:grid;place-items:center;color:var(--purple);}
.mc-ic svg{width:19px;height:19px;}
.mc-t{grid-area:t;font-family:'Hanken Grotesk',sans-serif;font-weight:700;font-size:14px;color:var(--ink);line-height:1.25;}
.mc-d{grid-area:d;font-size:12px;color:var(--muted);line-height:1.4;margin-top:3px;}
.mc-more{grid-area:more;font-size:12px;font-weight:700;color:var(--purple);margin-top:7px;}
.mega-card:hover .mc-more{color:var(--purple-deep);}
.mega-all{grid-column:1 / -1;text-align:center;padding:11px;font-family:'Hanken Grotesk',sans-serif;font-weight:700;font-size:13px;color:var(--purple);border-top:1px solid var(--line);margin-top:4px;border-radius:8px;}
.mega-all:hover{background:var(--purple-soft);color:var(--purple-deep);}
.nav-right{display:flex;align-items:center;gap:12px;}
.navcta-m{display:none;}
.menu-btn{display:none;background:none;border:none;font-size:26px;line-height:1;color:var(--ink);cursor:pointer;padding:4px 8px;}
.login-link{font-family:'Hanken Grotesk',sans-serif;font-size:14.5px;font-weight:700;color:var(--ink);display:inline-flex;align-items:center;gap:7px;padding:13px 26px;border-radius:8px;border:1px solid var(--line);background:#fff;white-space:nowrap;transition:.15s;}
.login-link:hover{border-color:var(--purple);color:var(--purple);}
.login-link svg{width:15px;height:15px;}
/* account dropdown (signed-in, desktop) */
.acct{position:relative;}
.acct-trigger{font-family:'Hanken Grotesk',sans-serif;font-size:14.5px;font-weight:700;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:8px;padding:13px 18px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;transition:.15s;}
.acct-trigger:hover{border-color:var(--purple);color:var(--purple);}
.acct-menu{position:absolute;right:0;top:128%;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:6px;min-width:184px;opacity:0;visibility:hidden;transform:translateY(6px);transition:.16s;z-index:60;}
.acct:hover .acct-menu,.acct:focus-within .acct-menu{opacity:1;visibility:visible;transform:translateY(0);}
.acct-menu a,.acct-menu .linkbtn{display:block;width:100%;text-align:left;font-family:'Hanken Grotesk',sans-serif;font-size:14px;font-weight:600;color:var(--ink);padding:10px 12px;border-radius:8px;text-decoration:none;}
.acct-menu a:hover,.acct-menu .linkbtn:hover{background:var(--purple-soft);color:var(--purple-deep);}
.acct-menu form{margin:0;}
.acct-mobile{display:none;}
/* honeypot anti-spam field — hidden from humans, tempting to bots */
.hp{position:absolute !important;left:-5000px !important;top:auto;width:1px;height:1px;overflow:hidden;}
.login-link-m{display:none;}
@media(max-width:860px){
  .nav-right .login-link{display:none;}
  .login-link-m{display:block;margin:4px 22px 0;padding:13px 18px;text-align:center;border:1px solid var(--line);border-radius:8px;color:var(--ink);font-weight:700;}
}
@media(min-width:861px){
  .navlinks>a,.navlinks .has-drop>a{position:relative;}
  .navlinks>a::after,.navlinks .has-drop>a::after{content:"";position:absolute;left:0;right:100%;bottom:-6px;height:2px;background:var(--grad);transition:right .24s cubic-bezier(.2,.7,.2,1);}
  .navlinks>a:hover::after,.navlinks .has-drop>a:hover::after{right:0;}
}

/* hero — inner pages (.page = dark band); home overrides below */
.hero{position:relative;overflow:hidden;}
.hero .net{position:absolute;inset:0;opacity:.5;pointer-events:none;}
.hero.page{background:var(--grad-deep);color:#fff;}
.hero.page .wrap{position:relative;z-index:2;padding:84px 26px 92px;}
.hero.page h1{color:#fff;max-width:840px;text-shadow:0 2px 20px rgba(0,0,0,.25);}
.hero.page p{color:#d7d2ea;font-size:19px;max-width:620px;}
.crumb{font-size:13px;color:rgba(255,255,255,.8);margin-bottom:14px;font-family:'Hanken Grotesk',sans-serif;font-weight:600;}
.crumb a{color:#fff;text-decoration:underline;text-underline-offset:2px;}
.hero .ctas{display:flex;gap:14px;flex-wrap:wrap;margin-top:24px;}

/* sections */
.section{padding:92px 0;}
.section.alt{background:var(--paper-2);}
.section.tint{background:var(--tint);}
.section-head{max-width:720px;margin:0 auto 54px;text-align:center;}
.section-head.left{margin-left:0;text-align:left;}

/* grids + cards */
.grid{display:grid;gap:22px;}
.g2{grid-template-columns:repeat(2,1fr);}
.g3{grid-template-columns:repeat(3,1fr);}
.g4{grid-template-columns:repeat(4,1fr);}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:26px;box-shadow:var(--shadow-sm);transition:.16s;}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow);}
.card .ico{width:48px;height:48px;border-radius:12px;background:#efe7fa;display:grid;place-items:center;margin-bottom:16px;}
.card .ico svg{width:26px;height:26px;}
.card h4{margin-bottom:8px;}
.card p{font-size:14.5px;color:var(--muted);margin:0;}
.svc-card{border-top:3px solid var(--purple);display:flex;flex-direction:column;}
.svc-card .badge{font-family:'Hanken Grotesk',sans-serif;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);margin-bottom:10px;}
.svc-card h3{font-size:18px;margin-bottom:8px;}
.svc-card p{font-size:14px;color:var(--muted);flex:1;}
.svc-card .price{font-size:13px;font-weight:700;color:var(--purple-deep);margin-top:14px;}
.svc-card .more{margin-top:12px;font-size:13.5px;font-weight:700;color:var(--purple);display:inline-block;transition:transform .18s cubic-bezier(.2,.7,.2,1);}
.svc-card:hover .more,a.svc-card:hover .more{transform:translateX(4px);}
a.svc-card{color:inherit;}

.pcard{background:#fff;border:1px solid var(--line);border-left:3px solid var(--cyan);border-radius:12px;padding:18px 20px;font-size:14.5px;color:var(--body);}

.chips{display:flex;flex-wrap:wrap;gap:9px;}
.chip{font-family:'Hanken Grotesk',sans-serif;font-size:12.5px;background:#fff;border:1px solid rgba(106,47,176,.22);color:var(--purple-deep);border-radius:999px;padding:7px 14px;font-weight:600;transition:background .16s,transform .16s;}
.chip:hover{background:#e6d9fa;transform:translateY(-1px);}
.chip.solid{background:#efe7fa;border-color:rgba(106,47,176,.28);}

/* bands */
.band{background:var(--grad);color:#fff;border-radius:16px;padding:50px;text-align:center;position:relative;overflow:hidden;}
.band h2,.band h3{color:#fff;}
.band p{color:rgba(255,255,255,.92);max-width:100%;margin:0 auto 22px;}
.band .eyebrow{color:#dcd3ff;}.band .eyebrow::before{background:#dcd3ff;}
.band.navy{background:var(--grad-deep);}
.band .net,.band.navy .net{position:absolute;inset:0;opacity:.4;}
.band .inner{position:relative;z-index:2;}

/* full-bleed dark band (home) */
.darkband{background:var(--ink);color:#fff;position:relative;overflow:hidden;padding:92px 0;}
.darkband::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 82% 12%,rgba(113,65,177,.42),transparent 55%);pointer-events:none;}
.darkband .wrap{position:relative;z-index:2;}
.darkband h2{color:#fff;}.darkband p{color:#cfc9e4;}.darkband .stat .lbl{color:#a59fbd;}.darkband .stat .num{background:none;-webkit-background-clip:unset;background-clip:unset;color:#fff;}
.darkband .eyebrow{color:#a9c7ff;}.darkband .eyebrow::before{background:#a9c7ff;}

/* methodology steps */
.steps{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;}
.step{flex:1;min-width:120px;text-align:center;position:relative;}
.step .n{width:88px;height:88px;border-radius:50%;background:transparent;border:1px solid var(--purple);color:var(--purple);display:flex;align-items:center;justify-content:center;margin:0 auto 10px;}
.step .n svg{width:36px;height:36px;stroke:var(--purple);stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.step .lbl{font-family:'Hanken Grotesk',sans-serif;font-weight:700;font-size:14px;color:var(--ink);}
.step .desc{font-size:12px;color:var(--muted);margin-top:3px;}
.step:not(:last-child)::after{content:"";position:absolute;top:44px;left:calc(50% + 44px);right:calc(30px - 50%);height:1px;background:var(--purple);}

/* service journey strip (homepage, under hero) */
.journey-band{background:var(--paper-2);border-bottom:1px solid var(--line);padding:62px 0;}
.journey-head{max-width:760px;margin:0 auto 36px;text-align:center;}
.journey-head h2{font-size:clamp(23px,2.6vw,32px);margin-bottom:.35em;}
.journey-head .lead{color:var(--muted);}
.journey{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
.jstep{position:relative;}
.jstep>a{display:flex;flex-direction:column;height:100%;background:#fff;border:1px solid var(--line);border-top:3px solid var(--purple);border-radius:var(--radius);padding:22px 20px;box-shadow:var(--shadow-sm);color:inherit;transition:.18s cubic-bezier(.2,.7,.2,1);}
.jstep>a:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-top-color:var(--blue);}
.jnum{width:34px;height:34px;border-radius:50%;background:var(--grad);color:#fff;font-family:'Hanken Grotesk',sans-serif;font-weight:700;font-size:15px;display:grid;place-items:center;margin-bottom:14px;}
.jverb{font-family:'Hanken Grotesk',sans-serif;font-weight:800;font-size:18px;color:var(--ink);letter-spacing:-.01em;}
.jname{font-family:'Hanken Grotesk',sans-serif;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--purple);margin-top:5px;}
.jdesc{font-size:13.5px;color:var(--muted);margin-top:11px;line-height:1.5;}
.jstep:not(:last-child)::after{content:"\2192";position:absolute;top:46px;right:-13px;transform:translateY(-50%);color:var(--purple);font-size:19px;font-weight:700;z-index:2;}
@media(max-width:860px){
  .journey{grid-template-columns:1fr 1fr;gap:16px;}
  .jstep::after{content:none!important;}
}
@media(max-width:520px){
  .journey{grid-template-columns:1fr;}
}

/* stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center;}
.stat .num{font-size:40px;font-weight:600;font-family:'Newsreader',serif;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:1;}
.stat .lbl{font-size:13px;color:var(--muted);margin-top:6px;}

/* split + media */
.split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;}
.split img{border-radius:var(--radius);box-shadow:var(--shadow);width:100%;height:100%;object-fit:cover;max-height:440px;}
.media-ph{border-radius:var(--radius);background:var(--grad-deep);min-height:320px;display:grid;place-items:center;color:#fff;font-size:13px;position:relative;overflow:hidden;}

/* checklists */
.checks{list-style:none;padding:0;margin:0;display:grid;gap:12px;}
.checks li{position:relative;padding-left:32px;font-size:14.5px;}
.checks li::before{content:"";position:absolute;left:0;top:3px;width:20px;height:20px;border-radius:6px;background:#efe7fa;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236a2fb0' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size:13px;background-position:center;background-repeat:no-repeat;}
.checks.two{grid-template-columns:repeat(2,1fr);}

.tag{display:inline-block;background:rgba(255,255,255,.2);color:#fff;font-weight:600;font-size:13px;padding:6px 16px;border-radius:999px;margin-top:18px;}

/* transform (light default; dark override under .darkband) */
.transform{display:grid;grid-template-columns:1fr 84px 1fr;gap:18px;align-items:center;}
.tcol{border-radius:12px;padding:30px 28px;}
.tcol.before{background:#f1eee8;border:1px solid var(--line);}
.tcol.after{background:linear-gradient(150deg,#f6f1fc,#eef6ff);border:1px solid var(--tint2);}
.tcol .tlab{display:flex;align-items:center;gap:9px;font-family:'Hanken Grotesk',sans-serif;font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:16px;}
.tcol .tlab .d{width:8px;height:8px;border-radius:50%;}
.tcol.before .tlab{color:var(--muted);}.tcol.before .tlab .d{background:#c08aa8;}
.tcol.after .tlab{color:var(--purple);}.tcol.after .tlab .d{background:var(--purple);}
.titem{display:flex;align-items:center;gap:12px;padding:11px 0;font-size:14.5px;color:var(--body);border-bottom:1px solid rgba(27,21,51,.07);}
.titem:last-child{border-bottom:none;}
.titem .d{width:8px;height:8px;border-radius:50%;flex-shrink:0;background:var(--purple);}
.tarrow{justify-self:center;width:64px;height:64px;border-radius:50%;border:1.5px solid rgba(0,190,218,.6);display:grid;place-items:center;background:rgba(0,190,218,.1);box-shadow:0 0 0 8px rgba(0,190,218,.05);}
.tarrow svg{width:30px;height:30px;color:var(--cyan);}
.tarrow svg path{stroke-dasharray:60;stroke-dashoffset:60;}
.tarrow.in svg path{animation:draw 1s .2s forwards cubic-bezier(.4,.8,.3,1);}
@keyframes draw{to{stroke-dashoffset:0;}}
/* dark context */
.darkband .tcol.before,.darkband .tcol.after{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16);}
.darkband .tcol.after{border-color:rgba(0,190,218,.4);}
.darkband .titem{color:#e9e6f5;border-bottom-color:rgba(255,255,255,.1);}
.darkband .tcol.before .tlab{color:#c8bfe0;}.darkband .tcol.after .tlab{color:#7ff0dd;}
.darkband .tcol.before .tlab .d{background:#c08aa8;}.darkband .tcol.after .tlab .d{background:var(--cyan);}

/* case studies (client stories) */
.case{display:grid;grid-template-columns:1.08fr .92fr;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:var(--shadow-sm);margin-bottom:28px;background:#fff;}
.case .cbody{padding:36px;}
.case .cvisual{background:var(--grad-deep);display:grid;place-items:center;padding:28px;min-height:300px;position:relative;overflow:hidden;}
.case .ctag{display:inline-block;font-family:'Hanken Grotesk',sans-serif;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--purple);background:#efe7fa;padding:6px 14px;border-radius:999px;margin-bottom:16px;}
.case h3{font-size:22px;margin-bottom:18px;}
.cblock{margin-bottom:15px;}
.cblock .lab{display:block;font-family:'Hanken Grotesk',sans-serif;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:4px;}
.cblock p{margin:0;font-size:14.5px;color:var(--body);}
.cblock.outcome{background:var(--tint);border-radius:12px;padding:14px 16px;border-left:3px solid var(--cyan);}
.cblock.outcome .lab{color:var(--purple);}
.metric-note{font-size:11.5px;color:var(--muted);font-style:italic;margin-top:8px;}

/* insights posts */
.post{display:flex;flex-direction:column;overflow:hidden;}
.post .thumb{height:170px;border-radius:12px;margin-bottom:16px;background:var(--grad-deep);position:relative;overflow:hidden;}
.post .cat{font-family:'Hanken Grotesk',sans-serif;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--blue);}
.post h4{margin:6px 0 8px;font-size:16px;line-height:1.35;}
.post p{font-size:13.5px;color:var(--muted);margin:0;}
.post .date{font-size:12px;color:var(--muted);margin-top:12px;}

/* forms */
.form{display:grid;gap:16px;}

/* min-width:0 because a grid item defaults to min-width:auto, which means it cannot
   shrink below its content — and a <select> measures its content as its *longest
   option*. One generated option reading "Email · Step 1 of Keep warm — monthly:
   something that is actually about them, not a check-in (due 7 Nov)" pushed the
   field to 706px inside a 559px form, and every control under it inherited the
   width and hung out of the panel. */
.field{display:flex;flex-direction:column;gap:6px;min-width:0;}
.field label{font-family:'Hanken Grotesk',sans-serif;font-size:13px;font-weight:700;color:var(--ink);}
/* width:100% and border-box so a control fills its field and stops there, whatever
   its longest option happens to say. Without it the control sizes to content and
   takes the form with it. */
.field input,.field textarea,.field select{font-family:inherit;font-size:14px;padding:12px 14px;border:1px solid var(--line);border-radius:10px;color:var(--body);background:#fff;width:100%;min-width:0;max-width:100%;box-sizing:border-box;}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--purple);box-shadow:0 0 0 3px #efe7fa;}

/* credibility strip (home, dark) */
.cred-strip{background:var(--indigo-2);color:#cdc7e0;}
.cred-strip .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px 30px;padding:24px 26px;}
.cred-item{font-family:'Hanken Grotesk',sans-serif;font-size:13.5px;display:flex;align-items:baseline;gap:9px;}
.cred-item b{font-size:20px;font-weight:800;color:#fff;}

/* footer */
.footer{background:var(--indigo-2);color:#a59fbd;padding:58px 0 28px;font-family:'Hanken Grotesk',sans-serif;font-size:14px;}
.footer a{color:#cdc7e0;}
.footer a:hover{color:#fff;}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;margin-bottom:38px;}
.footer .logo .soft{color:#fff;}
.footer h5{color:#fff;font-size:12px;letter-spacing:.1em;text-transform:uppercase;margin:0 0 15px;}
.footer ul{list-style:none;padding:0;margin:0;display:grid;gap:10px;}
.footer .blurb{color:#857fa0;font-size:13.5px;max-width:280px;margin:14px 0 0;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:22px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;color:#857fa0;font-size:12.5px;}

/* ---- HOME-only hero (light + photo) ---- */
.home-hero{position:relative;overflow:hidden;padding:84px 0 90px;}
.home-hero .hero-net{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;}
.home-hero .hnet-tw{animation:twinkle 4.5s ease-in-out infinite;}
.home-hero .hnet-tw.b{animation-delay:1.2s;}.home-hero .hnet-tw.c{animation-delay:2.4s;}
@keyframes twinkle{0%,100%{opacity:.5;}50%{opacity:.18;}}
.home-hero .wrap{position:relative;z-index:1;}
.home-hero .hgrid{display:grid;grid-template-columns:1.05fr .95fr;gap:54px;align-items:center;}
.home-hero h1{margin-bottom:20px;}
.home-hero p{font-size:19px;color:var(--body);max-width:520px;margin-bottom:28px;}
.eyebrow.pill{background:#efe7fa;padding:8px 16px;border-radius:999px;}
.eyebrow.pill::before{display:none;}
.hero-media{position:relative;}
.ph{position:relative;overflow:hidden;background:var(--grad-deep);}
.ph img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(.32) contrast(1.03) brightness(.97);}
.ph::after{content:"";position:absolute;inset:0;background:linear-gradient(150deg,rgba(63,29,120,.5),rgba(22,161,255,.16));mix-blend-mode:multiply;}
.hero-media .ph{border-radius:14px;aspect-ratio:4/3.4;box-shadow:var(--shadow);}
.stat-badge{position:absolute;left:18px;bottom:18px;background:rgba(255,255,255,.95);backdrop-filter:blur(4px);border-radius:12px;padding:14px 18px;display:flex;align-items:center;gap:12px;box-shadow:var(--shadow);}
.stat-badge .big{font-family:'Newsreader',serif;font-size:34px;font-weight:600;color:var(--purple-deep);line-height:1;}
.stat-badge .lbl{font-size:12px;color:var(--muted);line-height:1.3;max-width:130px;}

/* photo hero — rotating real office photos (Option A) */
.home-hero.photo-hero{padding:0;min-height:600px;display:flex;align-items:center;background:var(--ink);}
.photo-hero .hero-bg{position:absolute;inset:0;z-index:0;}
.photo-hero .hero-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.4s ease;}
.photo-hero .hero-slide.is-active{opacity:1;}
.photo-hero .hero-scrim{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(18,12,40,.82) 0%,rgba(18,12,40,.6) 38%,rgba(18,12,40,.26) 72%,rgba(18,12,40,.16) 100%),linear-gradient(0deg,rgba(18,12,40,.38),rgba(18,12,40,0) 50%);}
.photo-hero .wrap{position:relative;z-index:2;width:100%;}
.photo-hero .hero-inner{max-width:640px;padding:96px 0;}
.photo-hero h1{color:#fff;margin-bottom:20px;}
.photo-hero h1 em{color:#c8b3f0;}
.photo-hero p{font-size:19px;color:rgba(255,255,255,.9);max-width:560px;margin-bottom:28px;}
/* The guarantee, under the buttons. Quieter than the sub, because it is reassurance
   rather than argument: it is read by somebody already deciding, not somebody being
   persuaded. It also carries its own margin, since .photo-hero p has a 28px gap meant
   for the space above the buttons. */
.photo-hero .hero-promise{font-size:14px;color:rgba(255,255,255,.72);max-width:560px;margin:16px 0 0;}
.photo-hero .eyebrow.pill.on-dark{background:rgba(255,255,255,.14);color:#fff;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);}
.photo-hero .hero-tag{display:inline-flex;align-items:center;gap:13px;margin-top:28px;background:rgba(255,255,255,.96);border-radius:12px;padding:12px 18px;box-shadow:var(--shadow);}
.photo-hero .hero-tag b{font-family:'Newsreader',serif;font-size:30px;font-weight:600;color:var(--purple-deep);line-height:1;}
.photo-hero .hero-tag span{font-size:12.5px;color:var(--muted);max-width:210px;line-height:1.3;}
@media(max-width:860px){
  .home-hero.photo-hero{min-height:520px;}
  .photo-hero .hero-inner{padding:64px 0;}
  .photo-hero .hero-scrim{background:linear-gradient(90deg,rgba(18,12,40,.8),rgba(18,12,40,.6)),linear-gradient(0deg,rgba(18,12,40,.42),rgba(18,12,40,0) 55%);}
}
@media(max-width:480px){
  .home-hero.photo-hero{min-height:460px;}
  .photo-hero .hero-inner{padding:44px 0;}
}
@media(prefers-reduced-motion:reduce){ .photo-hero .hero-slide{transition:none;} }

/* problem "hooks" — human symptoms, each linked to the story where we fixed it */
.hooks{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.hook{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:24px;color:inherit;transition:.16s cubic-bezier(.2,.7,.2,1);}
.hook:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:rgba(106,47,176,.28);}
.hook-mark{font-family:'Newsreader',serif;font-weight:600;font-size:64px;line-height:.6;color:var(--purple);opacity:.22;display:block;height:30px;margin-bottom:2px;}
.hook-q{font-family:'Newsreader',serif;font-style:italic;font-size:19px;line-height:1.42;color:var(--ink);margin:0;flex:1;}
.hook-fix{margin-top:16px;font-family:'Hanken Grotesk',sans-serif;font-size:13px;font-weight:700;color:var(--purple);opacity:0;transform:translateY(4px);transition:opacity .18s ease,transform .18s ease;}
.hook:hover .hook-fix{opacity:1;transform:none;}
@media(hover:none){.hook-fix{opacity:1;transform:none;}}
@media(max-width:900px){.hooks{grid-template-columns:1fr 1fr;}}
@media(max-width:560px){.hooks{grid-template-columns:1fr;}}

/* framed product screenshots */
.shotfig{margin:0;}
.screenshot{border-radius:12px;border:1px solid var(--line);box-shadow:var(--shadow);overflow:hidden;background:#0f0b23;line-height:0;}
.screenshot img{display:block;width:100%;height:auto;}
.shot-cap{font-size:12.5px;color:var(--muted);margin-top:12px;text-align:center;line-height:1.4;}

/* how-we-work path step number */
.step-badge{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--grad);color:#fff;font-family:'Hanken Grotesk',sans-serif;font-weight:700;font-size:14px;margin-bottom:12px;}

/* methodology cards (methodologies page) */
.card.meth{display:flex;flex-direction:column;color:inherit;transition:.16s cubic-bezier(.2,.7,.2,1);}
.card.meth:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:rgba(106,47,176,.28);}
.card.meth p{font-size:14px;color:var(--muted);}
.card.meth .borrow{color:var(--body);margin-top:2px;}
.card.meth .borrow b{color:var(--ink);}
.card.meth .more{margin-top:auto;font-family:'Hanken Grotesk',sans-serif;font-size:12.5px;font-weight:700;color:var(--purple);padding-top:12px;}

/* operational clarity self-check */
.oc-wizard{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-sm);padding:32px 34px;}
.oc-progress{height:6px;background:var(--paper-2);border-radius:3px;overflow:hidden;margin-bottom:20px;}
.oc-progress span{display:block;height:100%;background:var(--grad);width:0;transition:width .3s ease;}
.oc-meta{display:flex;justify-content:space-between;font-family:'Hanken Grotesk',sans-serif;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--purple);margin-bottom:12px;}
.oc-meta span:last-child{color:var(--muted);}
.oc-q{font-family:'Newsreader',serif;font-size:23px;line-height:1.3;color:var(--ink);margin:0 0 22px;}
.oc-opts{display:grid;gap:10px;}
.oc-opt{text-align:left;font-family:'Hanken Grotesk',sans-serif;font-size:15px;font-weight:600;color:var(--ink);background:#fff;border:1.5px solid var(--line);border-radius:10px;padding:14px 18px;cursor:pointer;transition:.14s;}
.oc-opt:hover,.oc-opt.sel{border-color:var(--purple);background:var(--purple-soft);}
.oc-back{margin-top:18px;background:none;border:none;color:var(--muted);font-family:'Hanken Grotesk',sans-serif;font-size:13px;font-weight:700;cursor:pointer;}
.oc-back:hover{color:var(--purple);}
.oc-scorecard{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-sm);padding:22px 24px;}
.oc-row{display:flex;align-items:center;gap:14px;margin-bottom:12px;}
.oc-row:last-child{margin-bottom:0;}
.oc-row .oc-name{flex:0 0 118px;font-family:'Hanken Grotesk',sans-serif;font-size:13.5px;font-weight:700;color:var(--ink);}
.oc-segs{flex:1;display:flex;gap:5px;}
.oc-seg{height:10px;flex:1;border-radius:3px;background:var(--paper-2);}
.oc-seg.on{background:var(--grad);}
.oc-row .oc-lvl{flex:0 0 104px;text-align:right;font-family:'Hanken Grotesk',sans-serif;font-size:12px;font-weight:700;color:var(--purple-deep);}
.oc-sb{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px;}
.oc-sb-item{background:var(--paper-2);border-radius:10px;padding:14px 16px;font-family:'Hanken Grotesk',sans-serif;}
.oc-sb-item .k{display:block;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:3px;}
.oc-sb-item span:last-child{font-size:16px;font-weight:700;color:var(--ink);}
.oc-pattern{margin-top:16px;}
.oc-pat-in{background:#fff;border:1px solid var(--line);border-left:3px solid var(--purple);border-radius:0 12px 12px 0;padding:18px 20px;}
.oc-pat-in .k{font-family:'Hanken Grotesk',sans-serif;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--purple);}
.oc-pat-in h4{margin:6px 0 4px;}
.oc-pat-in p{margin:0 0 8px;color:var(--muted);font-size:14px;}
.oc-pat-in .more{font-family:'Hanken Grotesk',sans-serif;font-weight:700;font-size:13px;color:var(--purple);}
.oc-emailbox{background:var(--paper-2);border-radius:14px;padding:26px 28px;margin-top:8px;}
.oc-restart{background:none;border:none;color:var(--muted);font-family:'Hanken Grotesk',sans-serif;font-size:13px;font-weight:700;cursor:pointer;}
.oc-restart:hover{color:var(--purple);}
@media(max-width:560px){ .oc-sb{grid-template-columns:1fr;} .oc-row .oc-name{flex-basis:96px;} .oc-row .oc-lvl{flex-basis:86px;} .oc-wizard{padding:24px 20px;} }

/* assessment report preview (sample report card) */
.report{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);overflow:hidden;position:relative;max-width:820px;margin:0 auto;}
.report .ribbon{position:absolute;top:16px;right:-34px;transform:rotate(45deg);background:var(--ink);color:#fff;font-family:'Hanken Grotesk',sans-serif;font-size:11px;font-weight:800;letter-spacing:.12em;padding:5px 44px;z-index:2;}
.report .rhead{background:var(--grad);color:#fff;padding:22px 30px;}
.report .rhead .k{font-family:'Hanken Grotesk',sans-serif;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;opacity:.9;}
.report .rhead h3{color:#fff;font-size:24px;margin:4px 0 0;}
.rbody{padding:28px 30px;display:grid;gap:24px;}
.rlab{font-family:'Hanken Grotesk',sans-serif;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--purple);margin-bottom:10px;}
.exec{font-family:'Newsreader',serif;font-size:17px;color:var(--ink);line-height:1.5;margin:0;}
.rcols{display:grid;grid-template-columns:1.3fr 1fr;gap:20px;}
.rfirst{margin:0;padding-left:18px;}
.rfirst li{font-size:14px;margin-bottom:8px;color:var(--body);}
.notyet{background:var(--paper);border:1px solid var(--line);border-left:3px solid #b3261e;border-radius:0 10px 10px 0;padding:16px 18px;}
.notyet .rlab{color:#b3261e;}
.notyet p{font-size:14px;margin:0;}
@media(max-width:640px){ .rcols{grid-template-columns:1fr;} }

/* Richer full-report sample */
.tag-free,.tag-paid{display:inline-block;font-family:'Hanken Grotesk',sans-serif;font-size:9.5px;font-weight:800;letter-spacing:.06em;padding:3px 8px;border-radius:5px;text-transform:uppercase;vertical-align:middle;margin-left:8px;}
.tag-free{background:var(--cyan);color:#04343a;}
.tag-paid{background:var(--purple);color:#fff;}
.rmap{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:14px;overflow-x:auto;}
.rfr{width:100%;border-collapse:collapse;font-family:'Hanken Grotesk',sans-serif;font-size:14px;}
.rfr th{text-align:left;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:0 10px 8px 0;border-bottom:1px solid var(--line);}
.rfr td{padding:10px 10px 10px 0;border-bottom:1px solid var(--paper-2);color:var(--body);vertical-align:top;}
.rfr tr:last-child td{border-bottom:none;}
.pill{display:inline-block;font-family:'Hanken Grotesk',sans-serif;font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;}
.pill.high{background:#fbe6e6;color:#a32d2d;}
.pill.med{background:#fff1d6;color:#7a5b00;}
.pill.type{background:var(--purple-soft);color:var(--purple-deep);}
.rwave{display:flex;gap:14px;align-items:flex-start;padding:11px 0;border-bottom:1px solid var(--paper-2);}
.rwave:last-child{border-bottom:none;}
.rwave .n{flex:0 0 30px;height:30px;border-radius:50%;background:var(--grad);color:#fff;font-weight:700;font-size:13px;display:grid;place-items:center;}
.rwave h4{font-size:16px;margin:2px 0 3px;}
.rwave p{margin:0;font-size:13.5px;color:var(--muted);}
.rwave .meta{margin-top:6px;display:flex;gap:8px;flex-wrap:wrap;}
.mtag{font-family:'Hanken Grotesk',sans-serif;font-size:10.5px;font-weight:700;padding:2px 9px;border-radius:5px;background:var(--paper-2);color:var(--body);}
.reco{background:var(--purple-soft);border-radius:12px;padding:18px 20px;font-family:'Newsreader',serif;font-size:17px;color:var(--purple-deep);}
.oc-legend{margin-top:14px;font-family:'Hanken Grotesk',sans-serif;font-size:12px;color:var(--muted);display:flex;flex-wrap:wrap;gap:7px;align-items:center;}
.oc-legend span{font-weight:800;text-transform:uppercase;letter-spacing:.06em;font-size:10.5px;color:var(--purple);margin-right:2px;}
.oc-legend i{color:var(--purple);font-style:normal;opacity:.45;}

/* ---- CRM admin + portal ---- */
.crm-table{width:100%;border-collapse:collapse;font-family:'Hanken Grotesk',sans-serif;font-size:14px;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;}
.crm-table th{text-align:left;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:12px 14px;background:var(--paper);border-bottom:1px solid var(--line);}
.crm-table td{padding:12px 14px;border-bottom:1px solid var(--paper-2);color:var(--body);vertical-align:middle;}
.crm-table tr:last-child td{border-bottom:none;}
.crm-table a{color:var(--purple);font-weight:700;}
.stat{display:inline-block;font-family:'Hanken Grotesk',sans-serif;font-size:11px;font-weight:700;padding:3px 10px;border-radius:999px;background:var(--purple-soft);color:var(--purple-deep);}
.stat.s-new{background:#e6f0ff;color:#1c5fb0;}
.stat.s-contacted{background:#fff1d6;color:#7a5b00;}
.stat.s-qualified{background:#e7f7ea;color:#1f7a3d;}
.stat.s-customer{background:var(--purple-soft);color:var(--purple-deep);}
.stat.s-lost{background:#f1eef4;color:#8a8397;}
.crm-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:14px;}
.crm-stat{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 18px;text-align:left;}
.crm-stat .n{font-family:'Newsreader',serif;font-size:30px;color:var(--ink);line-height:1;}
.crm-stat .l{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin-top:6px;}
.crm-toolbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px;}
.crm-toolbar a{font-family:'Hanken Grotesk',sans-serif;font-size:13px;font-weight:700;padding:7px 14px;border-radius:999px;border:1px solid var(--line);color:var(--body);}
.crm-toolbar a.on{background:var(--grad);color:#fff;border-color:transparent;}
.msg-ok{background:var(--purple-soft);color:var(--purple-deep);padding:12px 16px;border-radius:10px;font-weight:600;font-size:14px;margin-bottom:18px;}
.crm-panel{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px 24px;margin-bottom:22px;}
.crm-panel h3{font-size:18px;margin:0 0 14px;}
.linkbtn{background:none;border:none;padding:0;margin:0;font:inherit;color:inherit;cursor:pointer;}

/* ---- Small-business resource pages ---- */
.sb-doc h1{margin-bottom:10px;}
.sb-doc h2{font-size:22px;margin:34px 0 12px;}
.sb-doc .crumb{margin-bottom:14px;font-size:13px;color:var(--muted);}
.sb-doc .crumb a{color:var(--purple);text-decoration:underline;text-underline-offset:2px;}
.sb-print{margin:8px 0 26px;}
.sb-list{margin:0 0 20px;padding-left:0;list-style:none;counter-reset:sb;}
.sb-list>li{position:relative;padding:0 0 16px 46px;counter-increment:sb;font-size:15.5px;line-height:1.6;color:var(--body);}
.sb-list>li::before{content:counter(sb);position:absolute;left:0;top:0;width:30px;height:30px;border-radius:50%;background:var(--grad);color:#fff;font-family:'Hanken Grotesk',sans-serif;font-weight:700;font-size:14px;display:grid;place-items:center;}
.sb-list>li b{color:var(--ink);}
.sb-note{background:var(--purple-soft);border-radius:12px;padding:16px 20px;margin:24px 0;color:var(--purple-deep);font-size:15px;line-height:1.6;}
.sb-note b{color:var(--purple-deep);}
.sb-foot{border-top:1px solid var(--line);margin-top:36px;padding-top:24px;}
.sb-foot .muted{margin-bottom:14px;}
.founder-note{background:#fff;border:1px solid var(--line);border-left:4px solid var(--purple);border-radius:0 14px 14px 0;padding:28px 32px;}
.founder-note p{font-family:'Newsreader',serif;font-size:18px;line-height:1.65;color:var(--ink);margin:0 0 16px;}
.founder-note p:last-of-type{margin-bottom:0;}
.founder-note .sig{font-family:'Hanken Grotesk',sans-serif;font-size:14px;font-weight:700;color:var(--purple-deep);margin-top:18px;}
@media(max-width:560px){ .founder-note{padding:22px 20px;} .founder-note p{font-size:16.5px;} }

/* ---- AI CTO chat ---- */
.cto-chat{border:1px solid var(--line);border-radius:14px;background:#fff;overflow:hidden;box-shadow:var(--shadow-sm);}
.cto-log{padding:20px;min-height:280px;max-height:460px;overflow-y:auto;display:flex;flex-direction:column;gap:12px;}
.cto-msg{display:flex;}
.cto-msg.user{justify-content:flex-end;}
.cto-bubble{max-width:82%;padding:11px 15px;border-radius:14px;font-size:15px;line-height:1.55;white-space:pre-wrap;}
.cto-msg.bot .cto-bubble{background:var(--paper);color:var(--ink);border-bottom-left-radius:4px;}
.cto-msg.user .cto-bubble{background:var(--grad);color:#fff;border-bottom-right-radius:4px;}
.cto-input{display:flex;gap:10px;padding:14px;border-top:1px solid var(--line);background:var(--paper);}
.cto-input input{flex:1;border:1px solid var(--line);border-radius:8px;padding:12px 14px;font-family:'Hanken Grotesk',sans-serif;font-size:15px;}
.cto-input input:focus{outline:3px solid var(--blue);outline-offset:2px;border-color:var(--purple);}
.cto-note{font-size:12.5px;color:var(--muted);margin:12px 2px 0;}
.cto-typing{display:flex;gap:4px;align-items:center;}
.cto-typing span{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:ctoblink 1.2s infinite;}
.cto-typing span:nth-child(2){animation-delay:.2s;}
.cto-typing span:nth-child(3){animation-delay:.4s;}
@keyframes ctoblink{0%,60%,100%{opacity:.25;}30%{opacity:.9;}}
@media print{
  .nav,.footer,.sb-print,.sb-foot,.hero .net,.skip{display:none !important;}
  .sb-doc{max-width:100% !important;}
  .section{padding:0 !important;}
}

/* ---- Identity auth pages (Login / Register / Manage) branded ---- */
.auth h1{font-size:34px;margin-bottom:6px;}
.auth h2{font-size:20px;font-weight:500;color:var(--muted);margin:0 0 22px;}
.auth h3{font-size:16px;margin:0 0 12px;}
.auth hr{border:none;border-top:1px solid var(--line);margin:26px 0;}
/* neutralise Bootstrap grid the default pages ship with */
.auth .row{display:block;margin:0;}
.auth [class*="col-"]{width:100%;max-width:100%;padding:0;flex:none;}
/* floating-label inputs */
.auth .form-floating{position:relative;margin-bottom:14px;}
.auth .form-control{width:100%;border:1px solid var(--line);border-radius:8px;padding:22px 14px 8px;font-family:'Hanken Grotesk',sans-serif;font-size:15px;color:var(--ink);background:#fff;}
.auth .form-control::placeholder{color:transparent;}
.auth .form-control:focus{outline:3px solid var(--blue);outline-offset:2px;border-color:var(--purple);}
.auth .form-floating>label{position:absolute;top:6px;left:15px;font-family:'Hanken Grotesk',sans-serif;font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);pointer-events:none;}
.auth label{font-family:'Hanken Grotesk',sans-serif;}
/* buttons: reuse site .btn; map Bootstrap sizing/width helpers */
.auth .btn-primary{background:var(--purple);color:#fff;}
.auth .btn-lg{font-size:15.5px;padding:16px 32px;}
.auth .w-100{width:100%;}
.auth button[type=submit]:not(.btn),.auth .btn-primary{border:none;border-radius:8px;cursor:pointer;font-weight:700;}
/* checkboxes (Remember me) */
.auth .form-check{display:flex;align-items:center;gap:8px;margin:4px 0 16px;}
.auth .form-check-input{width:16px;height:16px;}
.auth .form-check-label{font-size:14px;color:var(--body);}
/* validation + helper text */
.auth .text-danger{color:#b3261e;font-size:13px;}
.auth [role=alert]{font-size:13px;}
.auth a{color:var(--purple);font-weight:600;}
/* Manage-account side nav, if present */
.auth .nav-pills .nav-link{color:var(--body);padding:8px 12px;border-radius:8px;display:block;}
.auth .nav-pills .nav-link.active{background:var(--purple-soft);color:var(--purple-deep);font-weight:700;}
.auth-alt{text-align:center;margin-top:20px;font-size:14px;color:var(--muted);}
.auth-alt a{color:var(--purple);font-weight:700;}

/* home problem tiles */
.ptile{background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;}
.ptile .head{position:relative;height:180px;}
.ptile .head .ph{position:absolute;inset:0;}
.ptile .ph.psvg{display:grid;place-items:center;}
.ptile .ph.psvg::after{display:none;}
.ptile .ph.psvg svg{width:100%;height:100%;display:block;}
.ptile .num{position:absolute;left:18px;bottom:10px;z-index:2;font-family:'Newsreader',serif;font-size:42px;color:#fff;opacity:.95;}
.ptile .plus{position:absolute;top:14px;right:14px;z-index:2;width:30px;height:30px;border-radius:50%;background:var(--cyan);color:#10202b;display:grid;place-items:center;font-weight:700;font-size:18px;}
.ptile .cap{padding:20px 22px;font-size:15px;color:var(--body);}
/* proof photo cards */
.proof{background:var(--card);border:1px solid var(--line);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;transition:.16s;}
.proof:hover{transform:translateY(-4px);box-shadow:var(--shadow);}
.proof .head{position:relative;height:172px;}
.proof .head .ph{position:absolute;inset:0;}
.proof .head .tag{position:absolute;top:14px;left:14px;z-index:2;margin:0;background:rgba(255,255,255,.92);color:var(--purple-deep);font-family:'Hanken Grotesk',sans-serif;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:6px 12px;border-radius:999px;}
.proof .body{padding:24px;}
.proof h3{margin-bottom:12px;}
.proof .row{font-size:14px;color:var(--body);margin-bottom:8px;}
.proof .row b{color:var(--ink);}
.proof .more{font-family:'Hanken Grotesk',sans-serif;font-size:13.5px;font-weight:700;color:var(--purple);margin-top:6px;display:inline-block;transition:transform .18s;}
.proof:hover .more{transform:translateX(4px);}
.sol{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;}
.sol .s{font-family:'Hanken Grotesk',sans-serif;font-size:13px;font-weight:600;color:var(--purple-deep);background:#efe7fa;border:1px solid rgba(106,47,176,.28);border-radius:999px;padding:8px 18px;}
.final{background:var(--grad-deep);color:#fff;border-radius:16px;padding:68px 52px;text-align:center;position:relative;overflow:hidden;}
.final::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 30%,rgba(0,190,218,.2),transparent 50%);}
.final .inner{position:relative;z-index:2;}
.final h2{color:#fff;max-width:680px;margin:0 auto .4em;}
.final p{color:#d7d2ea;max-width:560px;margin:0 auto 26px;font-size:18px;}

/* live MATE diagram */
@keyframes mateHalo{0%,100%{r:46;opacity:.55;}50%{r:66;opacity:.12;}}
@keyframes mateFlow{to{stroke-dashoffset:-32;}}
@keyframes mateSpin{to{transform:rotate(360deg);}}
@keyframes mateFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-5px);}}
.mate-art .halo{animation:mateHalo 3.2s ease-in-out infinite;}
.mate-art .ring{transform-origin:200px 160px;animation:mateSpin 64s linear infinite;}
.mate-art .conn{stroke-dasharray:5 8;animation:mateFlow 1.5s linear infinite;}
.mate-art .node{animation:mateFloat 4.2s ease-in-out infinite;}
.mate-art .node.n2{animation-delay:.5s;}.mate-art .node.n3{animation-delay:1s;}.mate-art .node.n4{animation-delay:1.5s;}.mate-art .node.n5{animation-delay:2s;}

/* reveal */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1);}
.reveal.in{opacity:1;transform:none;}

@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none;}
  .tarrow svg path{stroke-dashoffset:0;}
  .mate-art .halo,.mate-art .ring,.mate-art .conn,.mate-art .node,.home-hero .hnet-tw{animation:none;}
}

/* ---- responsive ---- */
@media(max-width:920px){.g4{grid-template-columns:repeat(2,1fr);}.stats{grid-template-columns:repeat(2,1fr);}.footer-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:860px){
  .navlinks{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:8px 0 14px;box-shadow:var(--shadow);}
  .nav.open .navlinks{display:flex;}
  .navlinks>a,.navlinks .has-drop>a{padding:13px 28px;display:block;}
  .navlinks .has-drop{position:static;}
  .drop{display:none!important;}

  .mega{display:none!important;}  /* re-shown, flattened, at the end of this file */
  .nav-right .btn{display:none;}
  .menu-btn{display:inline-block;}
  .navcta-m{display:block;margin:10px 22px 4px;padding:14px 18px;background:var(--purple);color:#fff;border-radius:8px;font-weight:700;text-align:center;}
  .acct-desktop{display:none !important;}
  .acct-mobile{display:block;}
  .navcta-m:hover{background:var(--purple-deep);color:#fff;}
}
@media(max-width:760px){
  /* sections */
  .section{padding:54px 0;}
  .darkband{padding:54px 0;}
  .section-head{margin-bottom:32px;}

  /* home hero */
  .home-hero{padding:48px 0 52px;}
  .home-hero .hgrid{grid-template-columns:1fr;}
  .home-hero .hero-media{display:none;}
  .home-hero p{max-width:100%;}
  .hero .ctas{flex-wrap:wrap;}

  /* inner page hero */
  .hero.page .wrap{padding:52px 26px 60px;}
  .hero.page p{font-size:17px;}

  /* grids */
  .g2,.g3{grid-template-columns:1fr;}

  /* split */
  .split{grid-template-columns:1fr;gap:30px;}
  .split .media-ph{min-height:220px;}

  /* steps — hide connectors when wrapped */
  .step:not(:last-child)::after{display:none;}
  .steps{gap:10px;}
  .step{min-width:110px;}

  /* transform */
  .transform{grid-template-columns:1fr;gap:0;}
  .tarrow{transform:rotate(90deg);margin:10px auto;}

  /* case studies */
  .case{grid-template-columns:1fr;}
  .case .cvisual{min-height:180px;}

  /* checks */
  .checks.two{grid-template-columns:1fr;}

  /* band / final CTA */
  .band{padding:36px 24px;}
  .final{padding:44px 26px;}
  .final h2{font-size:clamp(24px,6vw,36px);}

  /* footer */
  .footer-grid{grid-template-columns:1fr;}
  .footer-bottom{flex-direction:column;gap:4px;}

  /* cred strip */
  .cred-strip .wrap{justify-content:center;gap:12px 24px;}
}
@media(max-width:480px){
  .wrap{padding:0 16px;}
  .section{padding:38px 0;}
  .darkband{padding:38px 0;}
  .home-hero{padding:36px 0 40px;}
  .hero.page .wrap{padding:40px 16px 48px;}

  /* buttons */
  .btn.lg{font-size:14px;padding:14px 22px;}
  .hero .ctas{flex-direction:column;align-items:stretch;}
  .hero .ctas .btn{text-align:center;}

  /* stats */
  .stats{grid-template-columns:1fr 1fr;}
  .stat .num{font-size:32px;}

  /* step circles smaller on small phones */
  .step .n{width:64px;height:64px;}
  .step .n svg{width:26px;height:26px;}
  .step:not(:last-child)::after{display:none;}

  /* band */
  .band{padding:28px 16px;}
  .final{padding:36px 16px;}

  /* case studies */
  .case .cbody{padding:22px;}
}

/* mobile polish: single-column service cards + clear vertical step flow */
@media(max-width:600px){
  .g4{grid-template-columns:1fr;}
}
@media(max-width:560px){
  .steps{flex-direction:column;align-items:center;gap:0;}
  .step{min-width:0;width:100%;max-width:300px;padding-bottom:38px;}
  .step:last-child{padding-bottom:0;}
  .step .n{width:60px;height:60px;}
  .step .n svg{width:24px;height:24px;}
  .step:not(:last-child)::after{display:block;content:"\2193";top:auto;bottom:8px;left:50%;right:auto;width:auto;height:auto;background:none;color:var(--purple);font-size:26px;line-height:1;font-weight:700;transform:translateX(-50%);}
}
/* desktop: arrowhead at the end of each step connector line */
@media(min-width:761px){
  .step:not(:last-child)::after{right:calc(44px - 50%);}
  .step:not(:last-child)::before{content:"";position:absolute;top:44px;right:calc(35px - 50%);transform:translateY(-50%);width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:9px solid var(--purple);z-index:3;}
}

/* case-study carousel (homepage proof) — 3-up desktop, 2-up tablet, 1-up mobile */
.cs{position:relative;}
.cs-viewport{overflow:hidden;}
.cs-track{display:flex;gap:24px;will-change:transform;}
.cs-slide{flex:0 0 calc((100% - 48px) / 3);min-width:0;}
.cs-slide>a{height:100%;}
.cs-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:6;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:#fff;box-shadow:var(--shadow-sm);color:var(--purple);display:grid;place-items:center;cursor:pointer;transition:.15s;}
.cs-btn svg{width:20px;height:20px;}
.cs-btn:hover{background:var(--purple-soft);border-color:var(--purple);}
.cs-prev{left:-14px;}
.cs-next{right:-14px;}
@media(max-width:900px){
  .cs-slide{flex-basis:calc((100% - 24px) / 2);}
}
@media(max-width:600px){
  .cs-slide{flex-basis:100%;}
  .cs-prev{left:4px;}
  .cs-next{right:4px;}
}

/* ===== About page — real photos ===== */
.about-figure{margin:0;}
.about-photo{display:block;width:100%;max-height:420px;object-fit:cover;border-radius:14px;box-shadow:var(--shadow);}
.about-figure figcaption{font-family:'Hanken Grotesk',sans-serif;font-size:13px;color:#7a7490;margin-top:10px;text-align:right;}

.collage{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:190px;gap:14px;margin-top:36px;}
.collage img{width:100%;height:100%;object-fit:cover;border-radius:12px;box-shadow:var(--shadow-sm);transition:transform .25s cubic-bezier(.2,.7,.2,1);}
.collage img:hover{transform:scale(1.02);}
.collage .c-wide{grid-column:span 2;grid-row:span 2;}
.collage .c-band{grid-column:1/-1;}

.faces{display:grid;grid-template-columns:repeat(6,1fr);gap:20px 14px;margin-top:14px;}
.face{margin:0;}
.faces img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:12px;box-shadow:var(--shadow-sm);}
.face figcaption{margin-top:9px;font-family:'Hanken Grotesk',sans-serif;line-height:1.3;}
.face .fn{display:block;font-size:13px;font-weight:700;color:var(--ink);}
.face .fr{display:block;font-size:11.5px;color:var(--muted);margin-top:1px;}
.founder-sign{margin-top:16px;font-size:14px;}
.mission-statement{margin-bottom:50px;}

.mission-row{display:flex;gap:22px;align-items:flex-start;margin-bottom:50px}
.about-avatar{margin:0;flex:0 0 auto;text-align:center;}
.about-avatar img{display:block;width:150px;height:150px;object-fit:cover;border-radius:50%;box-shadow:var(--shadow-sm);}
.about-avatar figcaption{font-family:'Hanken Grotesk',sans-serif;font-size:12px;line-height:1.4;color:#7a7490;margin-top:8px;}

@media(max-width:900px){
  .collage{grid-template-columns:repeat(2,1fr);grid-auto-rows:160px;}
  .faces{grid-template-columns:repeat(4,1fr);}
}
@media(max-width:560px){
  .collage{grid-template-columns:1fr;grid-auto-rows:200px;}
  .collage .c-wide,.collage .c-band{grid-column:auto;grid-row:auto;}
  .faces{grid-template-columns:repeat(3,1fr);gap:10px;}
  .mission-row{flex-direction:column;align-items:flex-start;}
}
/* ==== client-story pages (shared) — added by integration Step 1 ==== */
.story-meta{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:34px;}
.story-meta .m{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);border-radius:12px;padding:14px 16px;}
.story-meta .m .k{font-family:'Hanken Grotesk',sans-serif;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#a9c7ff;margin-bottom:4px;}
.story-meta .m .v{font-size:14px;font-weight:600;color:#fff;line-height:1.35;}
.story-meta .m .v a{color:#fff;text-decoration:underline;text-underline-offset:2px;}
@media(max-width:760px){.story-meta{grid-template-columns:1fr 1fr;}}
.diagram-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:28px;margin:34px 0;}
.diagram-card figcaption{font-size:12.5px;color:var(--muted);text-align:center;margin-top:14px;font-style:italic;}
.diagram-card svg{width:100%;height:auto;display:block;}
.pullquote{max-width:760px;margin:0 auto;text-align:center;}
.pullquote blockquote{font-family:'Newsreader',Georgia,serif;font-size:clamp(22px,3vw,30px);font-weight:500;color:var(--ink);line-height:1.35;margin:0 0 14px;}
.pullquote cite{font-style:normal;font-size:13.5px;color:var(--muted);font-family:'Hanken Grotesk',sans-serif;font-weight:600;}
.rel{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
@media(max-width:760px){.rel{grid-template-columns:1fr;}}
.svc-map{margin-top:26px;}
.svc-map .row{display:grid;grid-template-columns:1fr 42px 1fr;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 20px;margin-bottom:12px;box-shadow:var(--shadow-sm);}
.svc-map .row .did{font-size:14px;color:var(--body);}
.svc-map .row .did b{color:var(--ink);}
.svc-map .row .svc{font-family:'Hanken Grotesk',sans-serif;font-weight:700;font-size:13.5px;color:var(--purple);text-align:right;}
.svc-map .row .arr{color:var(--cyan);font-size:18px;text-align:center;font-weight:700;}
@media(max-width:640px){.svc-map .row{grid-template-columns:1fr;gap:6px;}.svc-map .row .arr{display:none;}.svc-map .row .svc{text-align:left;}}
.alt-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow-sm);}
.alt-card .verdict{display:inline-flex;align-items:center;gap:7px;font-family:'Hanken Grotesk',sans-serif;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:5px 12px;border-radius:999px;margin-bottom:14px;}
.alt-card.rej .verdict{background:#f6e9ee;color:#a34a6e;}
.alt-card.acc .verdict{background:#e2f8ef;color:#0c7a54;}
.alt-card.acc{border:2px solid var(--purple);box-shadow:var(--shadow);}
.alt-card h4{font-size:15.5px;margin-bottom:8px;}
.alt-card p{font-size:13.5px;color:var(--muted);margin:0;}
.alt-card .why{margin-top:12px;font-size:13px;color:var(--body);border-top:1px dashed var(--line);padding-top:10px;}
.alt-card .why b{color:var(--ink);}
.shot{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);overflow:hidden;margin:0;}
.shot img{width:100%;display:block;}
.shot figcaption{font-size:12px;color:var(--muted);padding:12px 18px;border-top:1px solid var(--line);font-style:italic;}
.shots2{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:34px;}
@media(max-width:760px){.shots2{grid-template-columns:1fr;}}
/* ==== end client-story shared ==== */

/* ============================================================
   CRM v2 — engagements, timelines, triage
   Extends the .crm-* vocabulary above; reuses .crm-panel/.crm-table/.stat.
   ============================================================ */

.crm-label{font-size:11px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);margin:26px 0 12px;}
.crm-stat .v{font-size:12px;color:var(--muted);margin-top:4px;}
.crm-stat.top-crit{border-top:3px solid #a8201a;}
.crm-stat.top-warn{border-top:3px solid #8a5800;}
.crm-stat.top-ok{border-top:3px solid #1c6340;}
.crm-stat.top-pur{border-top:3px solid var(--purple);}

/* status pills — engagement stages */
.stat.s-discussing{background:#eef3fb;color:#2d4f86;}
.stat.s-proposed{background:#fbf1de;color:#8a5800;}
.stat.s-won{background:#e8f3ec;color:#1c6340;}
.stat.s-delivering{background:#e8f3ec;color:#1c6340;}
.stat.s-completed{background:var(--purple-soft);color:var(--purple-deep);}
.stat.s-lost{background:#f1eef4;color:#8a8397;}
/* person + company state */
.stat.s-review{background:var(--purple-soft);color:var(--purple-deep);}
.stat.s-active{background:#e8f3ec;color:#1c6340;}
.stat.s-snoozed{background:#fbf1de;color:#8a5800;}
.stat.s-dnc{background:#f1eef4;color:#8a8397;}
.stat.s-prospect{background:#eef3fb;color:#2d4f86;}
.stat.s-past{background:var(--purple-soft);color:var(--purple-deep);}
/* urgency */
.stat.s-crit{background:#fbecea;color:#a8201a;}
.stat.s-warn{background:#fbf1de;color:#8a5800;}
.stat.s-ok{background:#e8f3ec;color:#1c6340;}
.stat.s-done{background:#f1eef4;color:#8a8397;}

/* list rows with a severity stripe */
.crm-rows{display:flex;flex-direction:column;gap:1px;background:var(--paper-2);border-radius:10px;overflow:hidden;border:1px solid var(--line);}
.crm-row{background:#fff;display:flex;align-items:center;gap:14px;padding:14px 16px;border-left:3px solid transparent;}
.crm-row .grow{flex:1;min-width:0;}
.crm-row .t{color:var(--ink);font-weight:700;font-size:14.5px;}
.crm-row .m{color:var(--muted);font-size:13px;margin-top:3px;}
.crm-row.s-crit{border-left-color:#a8201a;}
.crm-row.s-warn{border-left-color:#8a5800;}
.crm-row.s-ok{border-left-color:#1c6340;}
.crm-row.s-pur{border-left-color:var(--purple);}
.crm-row.s-none{border-left-color:var(--line);}

/* two-column detail layout */
.crm-split{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:22px;align-items:start;}

/* timeline — interactions, stage changes, documents on one date spine */
/* The timeline scrolls inside itself rather than growing the page.
   A synced mailbox produces hundreds of entries, and a person with two years of
   history pushed "log an interaction" and the next-action form so far down that
   reaching them meant scrolling past everything that had ever happened — which is
   the opposite of what a timeline is for.

   Height is in vh so it tracks the window instead of guessing: roughly a screenful
   on a laptop, more on a big monitor, and min-height keeps it from collapsing to a
   slit on a short window. The gutter stops a scrollbar sitting on top of the text. */
.crm-tl{display:flex;flex-direction:column;
  max-height:min(62vh,760px);min-height:320px;overflow-y:auto;
  padding-right:10px;scrollbar-gutter:stable;overscroll-behavior:contain;}

/* Below the split, the panels are already stacked one per row and the page scrolls
   normally — a scrolling box inside a scrolling page on a phone is two gestures
   fighting over the same drag. */
@media (max-width:980px){
  .crm-tl{max-height:none;min-height:0;overflow-y:visible;padding-right:0;}
}
.crm-tl-item{display:grid;grid-template-columns:26px minmax(0,1fr);gap:14px;padding-bottom:20px;position:relative;}
.crm-tl-item:not(:last-child)::before{content:"";position:absolute;left:12px;top:26px;bottom:0;width:1px;background:var(--line);}
.crm-dot{width:25px;height:25px;border-radius:50%;background:var(--purple-soft);color:var(--purple-deep);
  display:grid;place-items:center;font-size:10px;font-weight:800;z-index:1;}
.crm-dot.stage{border-radius:4px;background:#fff;border:2px solid var(--purple);color:var(--purple);transform:rotate(45deg);}
.crm-dot.stage b{transform:rotate(-45deg);display:block;font-size:12px;}
.crm-dot.doc{border-radius:5px;background:var(--purple-deep);color:#fff;font-size:9.5px;}
.crm-dot.fut{background:#fff;border:2px dashed var(--purple);color:var(--purple);}
.crm-dot.fut.crit{border-color:#a8201a;color:#a8201a;}
.crm-dot.fut.warn{border-color:#8a5800;color:#8a5800;}
.crm-tl-head{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;}
.crm-tl-head .w{color:var(--ink);font-weight:700;font-size:14.5px;}
.crm-tl-head .d{color:var(--muted);font-size:12.5px;margin-left:auto;}
/* overflow-wrap because synced mail carries calendar links several hundred
   characters long with no spaces in them. With nowhere to break, one invitation set
   the page's minimum width: measured at 1743px inside a 1024px viewport, which is
   where the horizontal scrollbar on every CRM screen came from. */
.crm-tl-body{color:var(--body);font-size:14px;margin-top:4px;overflow-wrap:anywhere;}

/* A long machine-generated mail is not worth the height it takes. Collapsed to about
   fourteen lines with the original a click away — the timeline is for scanning what
   happened, not for reading a calendar invitation in full. */
.crm-tl-body.long{max-height:270px;overflow:hidden;position:relative;}
.crm-tl-body.long::after{content:"";position:absolute;left:0;right:0;bottom:0;height:64px;
  background:linear-gradient(to bottom,rgba(255,255,255,0),#fff 85%);pointer-events:none;}
.crm-tl-body.long.open{max-height:none;}
.crm-tl-body.long.open::after{display:none;}
.crm-tl-more{background:none;border:0;padding:4px 0 0;font:inherit;font-size:12.5px;
  font-weight:700;color:var(--purple);cursor:pointer;}
.crm-tl-body.muted{color:var(--muted);}
.crm-today{display:flex;align-items:center;gap:12px;margin:2px 0 20px;}
.crm-today span{font-size:11px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--purple);white-space:nowrap;}
.crm-today i{flex:1;height:2px;background:var(--grad);border-radius:2px;}

.crm-legend{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin-top:14px;}
.crm-legend i{display:inline-block;width:11px;height:11px;margin-right:6px;vertical-align:-1px;}
.crm-legend .lg-int{border-radius:50%;background:var(--purple-soft);border:1px solid var(--purple);}
.crm-legend .lg-stage{background:#fff;border:2px solid var(--purple);transform:rotate(45deg);}
.crm-legend .lg-doc{border-radius:3px;background:var(--purple-deep);}
.crm-legend .lg-fut{border-radius:50%;background:#fff;border:2px dashed var(--purple);}

/* pipeline board */
.crm-board{display:grid;grid-template-columns:repeat(6,minmax(172px,1fr));gap:12px;overflow-x:auto;padding-bottom:6px;}
.crm-col{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:12px;min-width:172px;}
.crm-col-head{display:flex;align-items:baseline;gap:7px;margin-bottom:11px;}
.crm-col-head .n{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);}
.crm-col-head .c{margin-left:auto;font-size:12px;color:var(--muted);}
.crm-ecard{display:block;background:#fff;border:1px solid var(--line);border-left:3px solid var(--purple);
  border-radius:9px;padding:11px 12px;margin-bottom:9px;text-decoration:none;}
.crm-ecard:hover{border-color:var(--purple);}
.crm-ecard .t{display:block;color:var(--ink);font-weight:700;font-size:13.5px;line-height:1.35;}
.crm-ecard .m{display:block;color:var(--muted);font-size:12px;margin-top:5px;}
.crm-ecard.s-won,.crm-ecard.s-delivering{border-left-color:#1c6340;}
.crm-ecard.s-lost{border-left-color:var(--line);}
.crm-ecard.s-proposed{border-left-color:#8a5800;}

/* small stacked fact rows in the right rail */
.crm-pill{display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:10px;
  padding:10px 12px;font-size:13.5px;background:var(--paper);margin-bottom:9px;}
.crm-pill.dim{opacity:.6;}
.crm-pill strong{color:var(--ink);}

/* triage flow strip */
.crm-flow{display:flex;flex-wrap:wrap;}
.crm-flow .fstep{flex:1;min-width:150px;background:var(--paper);border:1px solid var(--line);padding:13px 15px;}
.crm-flow .fstep:first-child{border-radius:10px 0 0 10px;}
.crm-flow .fstep:last-child{border-radius:0 10px 10px 0;}
.crm-flow .fstep + .fstep{border-left:0;}
.crm-flow .fstep .s{font-size:10px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);}
.crm-flow .fstep .v{color:var(--ink);font-weight:600;font-size:14px;margin-top:5px;}
.crm-flow .fstep.stop{background:#fbecea;border-color:#fbecea;}
.crm-flow .fstep.stop .s,.crm-flow .fstep.stop .v{color:#a8201a;}
.crm-flow .fstep.end{background:var(--purple-soft);border-color:var(--purple-soft);}
.crm-flow .fstep.end .s,.crm-flow .fstep.end .v{color:var(--purple-deep);}

/* button sizes used across the CRM */
.btn.sm{font-size:12.5px;padding:8px 14px;}
.btn.danger{color:#a8201a;border-color:#e0a0a0;background:transparent;}
.btn.danger:hover{background:#fbecea;}

@media (max-width:900px){
  .crm-split{grid-template-columns:1fr;}
  .crm-board{grid-template-columns:repeat(6,minmax(160px,1fr));}
}

/* filter row — deliberately subordinate to .crm-toolbar, which is section nav */
.crm-filters{display:flex;gap:20px;flex-wrap:wrap;align-items:flex-end;
  border-bottom:1px solid var(--line);margin:-8px 0 22px;}
.crm-filters a{font-family:'Hanken Grotesk',sans-serif;font-size:13.5px;font-weight:700;color:var(--muted);
  padding:0 0 10px;border-bottom:2px solid transparent;margin-bottom:-1px;}
.crm-filters a:hover{color:var(--ink);}
.crm-filters a.on{color:var(--purple);border-bottom-color:var(--purple);}
.crm-filters a .c{font-weight:400;opacity:.65;margin-left:4px;}

/* "add new" disclosure — a button until you want the form */
.crm-add{margin-top:26px;}
.crm-add > summary{display:inline-flex;align-items:center;gap:8px;list-style:none;cursor:pointer;
  background:var(--purple);color:#fff;border:1px solid transparent;border-radius:8px;
  font-family:'Hanken Grotesk',sans-serif;font-weight:700;font-size:14.5px;padding:12px 24px;
  transition:.16s cubic-bezier(.2,.7,.2,1);}
.crm-add > summary::-webkit-details-marker{display:none;}
.crm-add > summary::marker{content:"";}
.crm-add > summary::before{content:"+";font-size:17px;line-height:1;}
.crm-add > summary:hover{background:var(--purple-deep);}
.crm-add > summary:focus-visible{outline:3px solid var(--blue);outline-offset:2px;}
.crm-add[open] > summary{background:transparent;color:var(--purple);border-color:var(--line);}
.crm-add[open] > summary::before{content:"\00d7";font-size:18px;}
.crm-add[open] > summary:hover{background:var(--purple-soft);}
.crm-add > .crm-panel{margin-top:14px;}

/* discovered-contacts list: paging, bulk select, page-size control */
.crm-listbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13px;
  padding:10px 0 14px;border-bottom:1px solid var(--line);margin-bottom:14px;}
.crm-listbar a{font-weight:700;color:var(--muted);padding:4px 10px;border-radius:999px;border:1px solid transparent;}
.crm-listbar a:hover{color:var(--ink);}
.crm-listbar a.on{background:var(--purple-soft);color:var(--purple-deep);border-color:transparent;}
.crm-listbar .sep{width:1px;height:18px;background:var(--line);}

.crm-bulkbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:var(--paper);
  border:1px solid var(--line);border-radius:10px;padding:11px 14px;margin-bottom:12px;font-size:13.5px;}
.crm-check{display:inline-flex;align-items:center;gap:8px;cursor:pointer;}
.crm-check input{width:16px;height:16px;cursor:pointer;accent-color:var(--purple);}

.crm-pager{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center;
  margin-top:16px;font-size:13.5px;}
.crm-pager a{font-weight:700;color:var(--purple);padding:7px 14px;border:1px solid var(--line);border-radius:8px;}
.crm-pager a:hover{background:var(--purple-soft);}

/* AI-suggested draft: readable, copyable, clearly not a stored record */
.crm-draft{width:100%;font-family:'Hanken Grotesk',sans-serif;font-size:14px;line-height:1.6;
  color:var(--body);background:var(--paper);border:1px solid var(--line);border-radius:10px;
  padding:14px 16px;resize:vertical;white-space:pre-wrap;}

/* The morning review queue.
   Rows stack rather than centre, because each one now carries an editable draft
   and a set of decisions rather than a single Done button. */
.crm-row:has(.crm-queue){align-items:flex-start;}
.crm-queue{margin:0;}
.crm-queue .btnrow{display:flex;gap:8px;flex-wrap:wrap;}
.crm-queue-acts{margin-top:12px;padding-top:12px;border-top:1px solid var(--paper-2);}
.crm-queue .field{margin:0 0 10px;}
.crm-queue .field label{font-size:11px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);display:block;margin-bottom:4px;}
.crm-queue .field input{width:100%;font-family:'Hanken Grotesk',sans-serif;font-size:14px;
  color:var(--body);background:var(--paper);border:1px solid var(--line);
  border-radius:8px;padding:10px 12px;}

.crm-draft-box{margin-top:10px;}
.crm-draft-box > summary{display:inline-flex;align-items:center;gap:7px;list-style:none;
  cursor:pointer;font-family:'Hanken Grotesk',sans-serif;font-size:12.5px;font-weight:700;
  color:var(--purple);}
.crm-draft-box > summary::-webkit-details-marker{display:none;}
.crm-draft-box > summary::marker{content:"";}
.crm-draft-box > summary::before{content:"\25b8";font-size:11px;}
.crm-draft-box[open] > summary::before{content:"\25be";}
.crm-draft-box > summary:hover{color:var(--purple-deep);}

/* ---- CRM pictures: a face on a person, a mark on a company ---- */
.crm-pic{display:inline-flex;align-items:center;justify-content:center;flex:none;object-fit:cover;background:#ece9f3;vertical-align:middle;}
.crm-pic-mono{color:#fff;font-weight:700;letter-spacing:.02em;line-height:1;text-transform:uppercase;font-family:inherit;}
.crm-named{display:inline-flex;align-items:center;gap:8px;min-width:0;}
.crm-named > span.crm-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.crm-head{display:flex;gap:16px;align-items:flex-start;margin-bottom:10px;}
.crm-head-pic{display:flex;flex-direction:column;align-items:center;gap:5px;flex:none;}
.crm-pic-form{margin:0;}
.crm-pic-form label span,.crm-pic-form button{font-size:11px;font-weight:700;color:var(--purple);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;}
.crm-pic-form button{color:#B42318;}
.crm-faces{display:flex;align-items:center;gap:4px;margin-top:2px;}
.crm-faces .crm-pic{box-shadow:0 0 0 2px var(--card,#fff);}
.crm-faces-more{font-size:11px;font-weight:700;color:var(--muted);padding-left:2px;}
.crm-faces-name{font-size:11.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.crm-row > .crm-pic{margin-right:10px;}

/* ───────────────────────────── the demo strip ─────────────────────────────
   Five working demos on a rail, on the home page. Dark on purpose: it separates
   the strip from the cream page so it reads as an event, and it is what makes the
   five gradients carry. The motion inside the cards does the selling, so nothing
   here needs to shout. */
.demostrip{background:var(--grad-deep);padding:76px 0 72px;}
.demostrip .eyebrow{color:rgba(255,255,255,.6);}
.demostrip h2{color:#fff;letter-spacing:-.02em;margin:12px 0 0;}
.demostrip .lead{color:rgba(255,255,255,.78);max-width:640px;margin:14px 0 0;}

.ds-head{display:flex;flex-wrap:wrap;gap:24px 32px;align-items:flex-end;}
.ds-head-words{flex:999 1 520px;min-width:0;}
.ds-paging{flex:1 1 140px;display:flex;gap:10px;justify-content:flex-end;align-items:center;}
.ds-arrow{width:44px;height:44px;display:flex;align-items:center;justify-content:center;background:transparent;border:1px solid rgba(255,255,255,.3);border-radius:50%;cursor:pointer;color:#fff;transition:.15s;}
.ds-arrow svg{width:16px;height:16px;}
.ds-arrow:hover{border-color:#fff;}
.ds-arrow.on{background:#fff;border-color:#fff;color:var(--ink);}
.ds-arrow.on:hover{filter:brightness(.94);}

/* The rail scrolls rather than squashing: on a phone one card fills the width and the
   next peeks, which tells somebody there is more without a label saying so. */
.ds-rail{display:flex;gap:24px;margin-top:40px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:4px;scrollbar-width:none;-ms-overflow-style:none;}
.ds-rail::-webkit-scrollbar{display:none;}
.ds-card{scroll-snap-align:start;flex:0 0 360px;background:#fff;border-radius:14px;overflow:hidden;text-decoration:none;transition:transform .18s,box-shadow .18s;}
.ds-card:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(0,0,0,.28);}
.ds-thumb{position:relative;height:124px;}
.ds-badge{position:absolute;left:16px;top:14px;padding:4px 10px;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.32);border-radius:999px;}
.ds-body{padding:20px 22px 22px;}
.ds-body h3{font-family:'Newsreader',Georgia,serif;font-size:21px;font-weight:600;color:var(--ink);margin:0;}
.ds-cap{display:inline-block;margin-top:7px;padding:3px 10px;font-size:11.5px;font-weight:600;border-radius:999px;}
.ds-body p{margin:12px 0 0;font-size:14px;line-height:1.55;color:var(--body);}
.ds-more{display:inline-block;margin-top:14px;font-size:14px;font-weight:600;}

/* the little moving pieces in each thumbnail */
.ds-art{position:absolute;display:flex;align-items:center;}
.ds-art-dots{right:24px;top:52px;gap:9px;}
.ds-art-dots i{width:9px;height:9px;background:#fff;border-radius:50%;animation:dsBlip 2.2s ease-in-out infinite;}
.ds-art-dots i:nth-child(2){width:13px;height:13px;animation-delay:.3s;}
.ds-art-dots i:nth-child(3){background:rgba(255,255,255,.5);animation-delay:.6s;}
.ds-art-swap{right:18px;top:50px;gap:10px;}
.ds-art-swap b{padding:3px 8px;font-size:10.5px;font-weight:600;color:#134e4a;background:#fff;border-radius:4px;}
.ds-art-swap s{width:1px;height:34px;background:rgba(255,255,255,.5);}
.ds-art-swap em{padding:3px 8px;font-size:10.5px;font-weight:600;font-style:normal;color:#fff;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.4);border-radius:4px;animation:dsBlip 2.2s ease-in-out infinite;}
.ds-art-bars{right:26px;bottom:22px;top:auto;gap:7px;align-items:flex-end;}
.ds-art-bars i{width:14px;background:#fff;border-radius:3px 3px 0 0;transform-origin:bottom;animation:dsRise 3.2s ease-out infinite;}
.ds-art-bars i:nth-child(1){height:48px;}
.ds-art-bars i:nth-child(2){height:34px;background:rgba(255,255,255,.75);animation-delay:.3s;}
.ds-art-bars i:nth-child(3){height:22px;background:rgba(255,255,255,.55);animation-delay:.6s;}
.ds-art-bars i:nth-child(4){height:13px;background:rgba(255,255,255,.4);animation-delay:.9s;}
.ds-art-wave{right:26px;top:52px;gap:5px;}
.ds-art-wave i{width:5px;background:#fff;border-radius:3px;animation:dsBlip 2.2s ease-in-out infinite;}
.ds-art-wave i:nth-child(1){height:16px;}
.ds-art-wave i:nth-child(2){height:30px;animation-delay:.3s;}
.ds-art-wave i:nth-child(3){height:42px;animation-delay:.6s;}
.ds-art-wave i:nth-child(4){height:24px;animation-delay:.9s;}
.ds-art-wave i:nth-child(5){height:34px;animation-delay:.3s;}
.ds-art-docs{right:26px;top:48px;gap:8px;animation:dsBob 3.4s ease-in-out infinite;}
.ds-art-docs i{width:28px;height:38px;border-radius:3px;background:rgba(255,255,255,.35);}
.ds-art-docs i:nth-child(2){background:rgba(255,255,255,.6);}
.ds-art-docs i:nth-child(3){background:#fff;}

@keyframes dsBlip{0%,100%{opacity:.3}50%{opacity:1}}
@keyframes dsBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes dsRise{0%{transform:scaleY(.2)}60%,100%{transform:scaleY(1)}}

.ds-dots{display:flex;gap:6px;justify-content:center;margin-top:18px;}
.ds-dot{padding:10px 4px;background:transparent;border:none;cursor:pointer;line-height:0;}
.ds-dot::after{content:"";display:block;width:8px;height:8px;border-radius:999px;background:rgba(255,255,255,.34);transition:width .35s ease,background .35s ease;}
.ds-dot.on::after{width:26px;background:#fff;}

.ds-foot{display:flex;flex-wrap:wrap;gap:12px 22px;align-items:center;margin-top:26px;}
.ds-cta{background:#fff;color:var(--ink);border:none;padding:15px 34px;}
.ds-cta:hover{filter:brightness(.94);color:var(--ink);}
.ds-second{font-size:14.5px;font-weight:500;color:rgba(255,255,255,.74);text-decoration:none;}
.ds-second:hover{color:#fff;}
.ds-note{flex-basis:100%;font-size:13.5px;color:rgba(255,255,255,.55);}

@media (max-width:760px){
  .demostrip{padding:56px 0 52px;}
  .ds-paging{display:none;}
  .ds-card{flex-basis:84%;}
}
@media (prefers-reduced-motion:reduce){
  .ds-art i,.ds-art em,.ds-art-docs{animation:none;}
  .ds-card:hover{transform:none;}
}

/* ───────────────────────── the utility strip ─────────────────────────
   Above the header, dismissed into localStorage so it stays gone. Shown by
   site.js rather than by default, so it never flashes for somebody who closed
   it last week. */
.utilbar{background:linear-gradient(120deg,#134e4a,#0f766e);color:#fff;}
.utilbar-in{max-width:var(--maxw);margin:0 auto;padding:9px 20px;display:flex;align-items:center;gap:12px;}
.utilbar p{flex:1;margin:0;text-align:center;font-size:13px;line-height:1.45;}
.utilbar a{color:#99f6e4;font-weight:700;text-decoration:none;white-space:nowrap;}
.utilbar a:hover{color:#fff;text-decoration:underline;}
.utilbar button{flex:none;background:transparent;border:none;color:rgba(255,255,255,.6);font-size:18px;line-height:1;cursor:pointer;padding:2px 4px;}
.utilbar button:hover{color:#fff;}
@media (max-width:620px){.utilbar p{text-align:left;font-size:12.5px;}}

/* "New" on Try AI. Comes off after a few months — a badge that never expires
   stops meaning anything. */
.new-badge{display:inline-block;position:relative;top:-2px;margin-left:6px;font-family:'Hanken Grotesk',sans-serif;font-size:9px;font-weight:800;letter-spacing:.07em;line-height:1;padding:2px 5px;border-radius:5px;background:var(--grad);color:#fff;vertical-align:baseline;text-transform:uppercase;}

/* account as an icon */
.acct-icon{width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;padding:0;background:#fff;border:1px solid var(--line);border-radius:50%;color:var(--body);cursor:pointer;transition:.15s;}
.acct-icon svg{width:18px;height:18px;}
.acct-icon:hover{border-color:var(--purple);color:var(--purple);}

/* MATE, as a band at the foot of the services menu */
.mega-mate{grid-column:1 / -1;display:block;padding:16px 18px;margin-top:4px;border-radius:10px;background:var(--grad-deep);text-decoration:none;}
.mega-mate:hover{filter:brightness(1.12);}
.mm-ey{display:block;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.62);}
.mm-t{display:block;margin-top:4px;font-family:'Newsreader',Georgia,serif;font-size:21px;font-weight:600;color:#fff;}
.mm-badge{display:inline-block;margin-left:8px;padding:2px 7px;font-family:'Hanken Grotesk',sans-serif;font-size:9px;font-weight:800;letter-spacing:.07em;vertical-align:middle;color:#fff;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.34);border-radius:5px;}
.mm-d{display:block;margin-top:7px;max-width:470px;font-size:12.5px;line-height:1.5;color:rgba(255,255,255,.8);}
.mm-more{display:block;margin-top:8px;font-size:12.5px;font-weight:700;color:#c4b5fd;}

/* The self-check, above the four service cards. A slim line, not a band: the menu
   already carries one full-width band at its foot, and two would make it a stack. */
.mega-start{grid-column:1 / -1;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;padding:10px 13px;margin-bottom:2px;border-radius:8px;border:1px solid transparent;text-decoration:none;transition:.15s;}
.mega-start:hover{background:var(--purple-soft);border-color:rgba(106,47,176,.18);}
.ms-q{font-size:13px;color:var(--muted);}
.ms-a{font-size:13px;font-weight:700;color:var(--purple);}
.mega-start:hover .ms-a{color:var(--purple-deep);}
.ms-n{margin-left:auto;font-size:12px;color:var(--muted);}
@media (max-width:860px){.ms-n{margin-left:0;flex-basis:100%;}}

/* A value that is settled rather than asked for. Drawn as a fact, not as an empty box:
   a disabled input still looks like something you are meant to fill in. */
.field-fixed{margin:0;padding:11px 0 2px;font-size:15px;color:var(--ink);font-weight:600;word-break:break-all;}
.field-note{display:block;font-size:12.5px;color:var(--muted);}

/* ───────────── the services menu, on a phone ─────────────
   It used to be hidden outright, which was harmless while it held only the four
   services — those are reachable through the Services link anyway. It stopped being
   harmless the moment MATE and the self-check moved into it: MATE had been a top-level
   item, and on a phone it became unreachable from the navigation altogether.

   Flattened into the list rather than reproduced as the desktop grid, and stripped of
   the icons and descriptions that earn their place beside a cursor and only add height
   under a thumb.

   Last in the file on purpose: .mega-start and .mega-mate are defined further up, and a
   media query adds no specificity, so an override written beside the other mobile rules
   silently lost to them. */
@media(max-width:860px){
  .mega{display:block!important;position:static;width:auto;max-width:none;padding:0 0 4px;
        background:transparent;border:0;border-radius:0;box-shadow:none;
        opacity:1;visibility:visible;transform:none;}

  .mega-card,.mega-start,.mega-all{display:block;padding:10px 28px 10px 44px;margin:0;
        border:0;border-radius:0;text-align:left;}
  .mega-card .mc-ic,.mega-card .mc-d,.mega-card .mc-more,
  .mega-start .ms-q,.mega-start .ms-n{display:none;}
  .mega-card .mc-t{font-size:14px;font-weight:600;color:var(--ink);}
  .mega-start .ms-a{font-size:14px;}

  .mega-mate{display:block;margin:6px 28px 6px 44px;padding:12px 15px;}
  .mega-mate .mm-d,.mega-mate .mm-more{display:none;}
  .mega-mate .mm-ey{font-size:9px;}
  .mega-mate .mm-t{font-size:17px;}
}

/* ---------------------------------------------------------------- action type
   What kind of touch a scheduled action is, and which playbook step it belongs
   to. Letters rather than icons: the admin screens have no icon set, and the
   timeline has drawn single letters since the CRM was built, so this reads as
   the same language rather than a second one bolted alongside it.

   InteractionType.Badge supplies the letter and the table is yours to add to, so
   a type inserted by hand falls back to the first letter of its name and still
   draws something. The row is never blank. */
.crm-tmark{display:inline-flex;align-items:center;justify-content:center;
  width:21px;height:21px;border-radius:50%;background:var(--purple-soft);
  color:var(--purple-deep);font-size:10.5px;font-weight:700;line-height:1;
  margin-right:8px;vertical-align:middle;flex:0 0 auto;}

/* The playbook and the position in it, under the description. Muted, because it
   is context for the line above rather than a second thing to read: a pool of
   fifty actions should still scan as a list of jobs. */
.crm-step{display:inline-block;margin-top:3px;font-size:12px;color:var(--ink-soft);}
.crm-step b{font-weight:600;color:var(--purple-deep);}

/* -------------------------------------------------- dashboard: who, today
   The dashboard answers "who am I contacting today" and hands off; the pool is
   where the work happens. Grouped by person rather than by action, because three
   errands for one person is still one conversation. */
.crm-today-h{margin:0 0 10px;font-size:14.5px;}
.crm-today{display:flex;flex-wrap:wrap;gap:8px;}
.crm-today-p{display:inline-flex;align-items:center;gap:8px;padding:5px 11px 5px 5px;
  border:1px solid var(--line);border-radius:999px;background:#fff;
  font-size:13.5px;color:var(--ink);text-decoration:none;}
a.crm-today-p:hover{border-color:var(--purple);color:var(--purple-deep);}

/* The reschedule cluster: a date and the two gaps you reach for most. Wraps as a
   unit so the picker never ends up orphaned from its buttons on a narrow column. */
.crm-resched{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;}
.crm-resched input[type=date]{width:auto;min-width:0;padding:6px 9px;font-size:13px;
  border:1px solid var(--line);border-radius:8px;font-family:inherit;color:var(--body);}

/* In the pool the row sits in a table cell, so the buttons need to wrap rather than
   force the column wide — the lesson from the select that pushed the form 131px
   past its panel. */
.crm-queue-acts{display:flex;flex-wrap:wrap;gap:6px;align-items:center;}

/* The working row, under the line it belongs to. Spanning the table rather than
   squeezed into a last column: six controls in a narrow cell wrapped into three
   ragged lines, and the row above stopped being scannable. */
.crm-actrow > td{padding-top:0;border-top:0;}
.crm-actrow .crm-queue{margin:0;}

/* The staleness warning, on the summary rather than inside the opened box. It is
   the one thing worth knowing before you decide whether to read the draft at all,
   so it has to survive the box being closed. */
.crm-stale{display:inline-block;margin-left:8px;padding:1px 8px;border-radius:999px;
  background:#fdf3e3;color:#8a5800;font-size:11.5px;font-weight:600;white-space:nowrap;}