/* Kondaro marketing — 2026-10 refresh layer.
   Loaded LAST on every page that adopts it, so it restyles the existing
   markup without changing the layout. One face (Inter, per the brand
   guide), neutral gray panels instead of mint tints, no pill labels or dot
   eyebrows, single-color headlines, quieter shadows. Delete the <link> to
   roll a page back. */

:root{
  --rf-gray:#f5f5f7;
  --rf-ink:#0b1322;
  --rf-text:#1d2433;
  --rf-muted:#5b6474;
  --rf-line:#e3e5ea;
  --rf-shadow:0 1px 2px rgba(11,19,34,.05),0 18px 40px -24px rgba(11,19,34,.22);
  --rf-ease:cubic-bezier(.25,.1,.25,1);
  --panel:var(--rf-gray);
  --soft:var(--rf-gray);
  --soft2:var(--rf-gray);
  --font-mono:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:var(--rf-text)}
[class*="num"],.wc-num,.kpi .val,.daro-res{font-variant-numeric:tabular-nums}

/* ---------- Type: one weight family, tighter, calmer ---------- */
h1,h2,h3,.hero h1,.subhero h1,.sec-head h2,.cta h2,.connect h2,.frow-copy h3,.card h3,.fcard h3{font-weight:700;letter-spacing:-.032em}
.hero h1,.subhero h1{letter-spacing:-.04em;line-height:1.02}
.sec-head h2,.connect h2{color:var(--rf-ink);line-height:1.06}
.sec-lede,.frow-copy p,.connect .lede,.connect .keep-note{color:var(--rf-muted)}
.connect .lede,.connect .keep-note{opacity:1}

/* Labels above headings: gone. Pills, dots, and icon eyebrows were the
   most repeated pattern on the site. */
.sec-eyebrow,.sec-pill,.pill-label,.eyebrow,.frow-eyebrow{display:none!important}

/* Single-color headlines. */
.hero h1 .ghost,.subhero h1 .ghost{color:inherit}
.hero-tagline{color:var(--slate-200);font-weight:600;letter-spacing:-.02em}
.connect-line{color:var(--rf-ink)}

/* ---------- Backgrounds ---------- */
.hero,.subhero{background:var(--rf-ink)}
.connect{background:var(--rf-gray)}
.connect h2{color:var(--rf-ink)}
.daro-sec,.section--dark{background:var(--rf-ink)}

/* ---------- Buttons ---------- */
.btn{letter-spacing:-.01em;transition:background .2s var(--rf-ease),color .2s,opacity .2s}
.btn-primary,.btn-primary:hover{transform:none}
.btn-primary{padding:12px 22px}
.btn-primary .arw{display:none}
/* Secondary action reads as a link with a chevron, not a second outlined pill. */
.btn-ghost{border:0!important;background:transparent!important;padding:12px 6px!important}
.btn-ghost::after{content:"\203A";font-size:1.25em;line-height:0;margin-left:2px;transition:transform .2s var(--rf-ease)}
.btn-ghost:hover::after{transform:translateX(3px)}
.btn-ghost:hover{text-decoration:underline;text-underline-offset:4px}
.hero-cta .btn-ghost,.subhero-cta .btn-ghost{color:#fff!important}

/* ---------- Cards and panels ---------- */
.card,.card.c1,.card.c2,.card.c3{background:var(--rf-gray)}
.card,.fcard{border-radius:24px}
.card:hover,.fcard:hover{transform:none!important;box-shadow:none}
.card h3{color:var(--rf-ink)}
.card p{color:var(--rf-muted);opacity:1}
.fcard{border-color:var(--rf-line)}
.section--soft .fcard{box-shadow:none;border-color:transparent}
.section--soft .fcard,.section--soft2 .fcard{background:#fff}
.mock-card,.wcard,.surface,.daro,.contact-card,.vidframe,.setup-card{box-shadow:var(--rf-shadow)!important;border-color:var(--rf-line)}
.setup-card{background:#fff}
.setup .viz-step,.viz-step{color:var(--rf-text)}

/* Bars and fills: one solid brand color, no gradients. */
.par .pb i,.gau-fill{background:var(--kon-green)}
.mock-delta{background:none;padding:0}

/* Connect diagram: plain nodes, no tinted icon squares, no glow. */
.orbit-node{box-shadow:0 1px 2px rgba(11,19,34,.06);border-color:var(--rf-line)}
.orbit-node .ni{background:none!important;width:18px}
.orbit-node b{color:var(--rf-ink)}
.orbit-hub-core{box-shadow:0 1px 2px rgba(11,19,34,.06),0 0 0 1px var(--rf-line)}
.orbit-ring{display:none}
.oline{stroke:var(--slate-400)}

/* ---------- Daro ---------- */
.daro-feat .fi{background:none!important;width:22px;color:var(--slate-400)}
.daro-feat b{font-weight:600}
.daro-av,.daro-a .av{background:var(--kon-green)}
.daro-res .rh{background:#fff;border-bottom:1px solid var(--rf-line)}
.daro-bar{background:#fff}

/* ---------- Closing CTA: white, not a green glow band ---------- */
.cta{background:#fff;border-top:1px solid var(--rf-line)}
.cta::before{display:none}
.cta h2{color:var(--rf-ink)}
.cta p{color:var(--rf-muted);opacity:1}
.cta .btn-primary{background:var(--kon-green)!important;color:#fff!important;padding:14px 26px!important;font-size:var(--text-base)!important}
.cta .btn-primary:hover{background:var(--green-600)!important}
.cta .btn-ghost{color:var(--kon-green)!important;font-size:var(--text-base)!important}

/* ---------- Contact form ---------- */
.contact-card{border-radius:28px}
.cfield label{color:var(--rf-text);font-weight:500}
.cfield input,.cfield textarea{background:#fff;border:1px solid var(--slate-300);border-radius:12px}
.cfield input:focus,.cfield textarea:focus{border-color:var(--kon-green);box-shadow:0 0 0 3px color-mix(in srgb,var(--kon-green) 14%,transparent)}
.cform .btn-primary{border-radius:12px}

/* ---------- Footer ---------- */
.foot-bar .tag{color:var(--slate-400);font-weight:500}
.foot-actions .fa-demo{color:#fff}

/* ---------- Motion: shorter travel, softer curve ---------- */
.reveal{transform:translateY(24px);transition:opacity 1s var(--rf-ease),transform 1s var(--rf-ease)}

/* Daro chat playback (driven by the page script; static if it never runs). */
.daro.play .daro-q,.daro.play .daro-a,.daro.play .daro-chips{opacity:0;transform:translateY(8px);transition:opacity .5s var(--rf-ease),transform .5s var(--rf-ease)}
.daro.play .daro-res .rr{opacity:0;transform:translateY(6px);transition:opacity .45s var(--rf-ease),transform .45s var(--rf-ease)}
.daro.play.s-ask .daro-q,.daro.play.s-think .daro-a,.daro.play.s-done .daro-chips{opacity:1;transform:none}
.daro.play.s-rows .daro-res .rr{opacity:1;transform:none}
.daro.play.s-rows .daro-res .rr:nth-child(3){transition-delay:.18s}
.daro.play.s-rows .daro-res .rr:nth-child(4){transition-delay:.36s}
.daro.play .daro-steps .st svg{display:none}
.daro.play .daro-steps .st::before{content:"";width:11px;height:11px;border-radius:50%;border:1.5px solid var(--slate-300);border-top-color:var(--kon-green);animation:rf-spin .8s linear infinite;flex:none}
.daro.play.s-rows .daro-steps .st svg{display:block}
.daro.play.s-rows .daro-steps .st::before{display:none}
.daro.play .daro-bar .ph.typing{color:var(--rf-text)}
.daro.play .daro-bar .ph.typing::after{content:"";display:inline-block;width:1px;height:14px;background:var(--rf-text);margin-left:1px;vertical-align:-2px;animation:rf-blink 1s steps(1) infinite}
.daro .send{transition:transform .2s var(--rf-ease),background .2s}
.daro .send.hit{transform:scale(.86)}
@keyframes rf-spin{to{transform:rotate(360deg)}}
@keyframes rf-blink{50%{opacity:0}}

@media (prefers-reduced-motion:reduce){
  .reveal{transform:none;transition:none}
}

/* ---------- Page-specific mockup cleanup ----------
   Classes below exist on one page each; scoped by their own names. */

/* /crm calendar: no colored left stripes, no tinted "new" row. */
.cal-ev,.cal-ev.new{border-left:1px solid var(--slate-200)!important;background:#fff}
/* /crm cards and toasts: white with a hairline, not mint gradients. */
.dupe{background:#fff;border-color:var(--rf-line)}
.auto-mail,.sync-toast{background:#fff;border-color:var(--rf-line)}
.health-h .ic,.dfeat .fi{background:none!important}
.kfoot .av,.dupe-av,.dmark{background:var(--kon-green)}
.acct-hero{background:var(--rf-ink)}
.acct-tag{background:none;padding-left:0}

/* /platform: solid footer strips and plain highlight rows. */
.src-foot{background:var(--kon-green)}
.recon-row.hi,.is-r.tot{background:var(--rf-gray)}

/* /why-kondaro before/after: two plain panels, the "after" one in ink. */
.cbox--after{background:var(--rf-ink)}
.cbox--after .lab,.cbox--after li svg{color:#fff}
.cbox .lab{text-transform:none;letter-spacing:-.01em;font-size:var(--text-base)}
.cbox--before .lab{color:var(--rf-muted)}

/* ---------- Phones ---------- */
@media (max-width:560px){
  /* Footer bottom line stacks instead of squeezing two columns. */
  .foot-bar{flex-direction:column;align-items:flex-start;gap:14px}
  /* Brief watch-list rows: the note collided with the OVER tag; the tag
     already says it. */
  .bd-row .det{display:none}
}