/* Caris marketing layer — sits on top of the CARIS design-system tokens.
   Warm brand surfaces (cream/camel/fuchsia), console primitives reused for
   authentic product mockups. All colour/type/spacing comes from styles.css. */

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--slate-25);color:var(--text-body);font:var(--type-body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
h1,h2,h3,h4,p{margin:0}
a{color:var(--text-link)}
a:hover{color:var(--text-link-hover)}
.wrap{max-width:1180px;margin:0 auto;padding:0 32px}
.mono{font-family:var(--font-mono)}

/* eyebrow */
.eyebrow{font:var(--fw-semibold) 12px/1.2 var(--font-sans);letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--brand-pop)}
.eyebrow.teal{color:var(--teal-600)}
.eyebrow.gold{color:var(--gold-500)}
.eyebrow.cream{color:var(--gold-300)}

/* headings */
.h-hero{font:var(--fw-semibold) clamp(38px,5.4vw,68px)/1.02 var(--font-sans);letter-spacing:-0.025em;color:var(--text-strong);text-wrap:balance}
.h-sec{font:var(--fw-semibold) clamp(30px,3.6vw,46px)/1.05 var(--font-sans);letter-spacing:-0.02em;color:var(--text-strong);text-wrap:balance}
.h-sub{font:var(--fw-semibold) clamp(22px,2.4vw,30px)/1.15 var(--font-sans);letter-spacing:-0.015em;color:var(--text-strong)}
.lead{font-size:clamp(17px,1.5vw,21px);line-height:1.55;color:var(--text-muted);max-width:56ch;text-wrap:pretty}
.muted{color:var(--text-muted)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 22px;border-radius:var(--radius-md);border:1px solid transparent;font:var(--fw-medium) 15px/1 var(--font-sans);cursor:pointer;transition:background var(--dur-base) var(--ease-standard),border-color var(--dur-base),color var(--dur-base);text-decoration:none;white-space:nowrap}
.btn:hover{text-decoration:none}
.btn svg{width:18px;height:18px}
.btn-primary{background:var(--primary);color:var(--on-primary);border-color:var(--primary)}
.btn-primary:hover{background:var(--primary-hover);border-color:var(--primary-hover);color:#fff}
.btn-warm{background:var(--warm-action);color:var(--on-warm-action);border-color:var(--warm-action)}
.btn-warm:hover{background:var(--warm-action-hover);border-color:var(--warm-action-hover);color:#fff}
.btn-ghost{background:transparent;color:var(--text-body);border-color:var(--border-default)}
.btn-ghost:hover{background:var(--surface-hover);border-color:var(--border-strong);color:var(--text-body)}
.btn-onDark{background:rgba(255,255,255,0.08);color:#fff;border-color:rgba(255,255,255,0.28)}
.btn-onDark:hover{background:rgba(255,255,255,0.16);color:#fff}
.btn-sm{height:38px;padding:0 15px;font-size:14px}

/* header */
.nav{position:sticky;top:0;z-index:50;background:rgba(251,250,247,0.86);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--border-subtle)}
.nav-in{display:flex;align-items:center;gap:28px;height:66px}
.brand{display:inline-flex;align-items:center;gap:9px;text-decoration:none}
.wm{display:inline-flex;align-items:center;font:var(--fw-bold) 26px/1 var(--font-sans);letter-spacing:-0.015em;color:var(--navy-900);text-transform:lowercase}
.wm img{height:38px;width:auto;border-radius:8px;transform:rotate(90deg);transform-origin:center}
.nav-links{display:flex;gap:26px;margin-left:12px}
.nav-links a{font:var(--fw-medium) 15px/1 var(--font-sans);color:var(--text-body);text-decoration:none}
.nav-links a:hover{color:var(--primary)}
.nav-links a.active{color:var(--primary)}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:14px}
.nav-signin{font:var(--fw-medium) 15px/1 var(--font-sans);color:var(--text-body);text-decoration:none}
.nav-signin:hover{color:var(--primary)}

/* sections */
section{position:relative}
.pad{padding:96px 0}
.pad-sm{padding:64px 0}
.bg-cream{background:var(--cream-50)}
.bg-white{background:#fff}
.bg-slate{background:var(--slate-25)}
.bg-teal{background:var(--teal-800);color:#fff}
.bg-navy{background:var(--navy-900);color:#fff}
.sec-head{max-width:60ch}
.sec-head .lead{margin-top:16px}

/* hero */
.hero{background:var(--cream-50);border-bottom:1px solid var(--border-subtle);overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.02fr 0.98fr;gap:56px;align-items:center;padding:84px 0 92px}
.hero-copy .eyebrow{margin-bottom:20px}
.hero-copy .lead{margin-top:22px}
.hero-cta{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap}
.hero-trust{margin-top:30px;display:flex;flex-wrap:wrap;gap:8px 20px;font-size:13.5px;color:var(--text-muted)}
.hero-trust span{display:inline-flex;align-items:center;gap:7px}
.hero-trust svg{width:15px;height:15px;color:var(--ok-500)}

/* hero art — layered composition */
.hero-art{position:relative}
.hero-photo{border-radius:20px;overflow:hidden;box-shadow:var(--shadow-lg);border:1px solid var(--border-subtle)}
.hero-photo img{width:100%;height:340px;object-fit:cover}
.hero-float{position:absolute;background:#fff;border:1px solid var(--border-subtle);border-radius:14px;box-shadow:var(--shadow-lg)}
.hero-float.tl{left:-26px;top:-30px;width:262px;padding:14px}
.hero-float.br{right:-22px;bottom:-34px;width:300px;padding:14px}

/* generic card */
.card{background:#fff;border:1px solid var(--border-subtle);border-radius:16px;box-shadow:var(--shadow-xs)}
.card-pad{padding:28px}

/* triad / feature cards */
.triad{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:52px}
.fcard{background:#fff;border:1px solid var(--border-subtle);border-radius:16px;padding:30px 26px;box-shadow:var(--shadow-xs);transition:box-shadow var(--dur-base) var(--ease-standard),transform var(--dur-base)}
.fcard:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.ficon{width:46px;height:46px;border-radius:11px;display:grid;place-items:center;margin-bottom:18px}
.ficon svg{width:23px;height:23px}
.ficon.teal{background:var(--teal-50);color:var(--teal-700)}
.ficon.gold{background:var(--gold-50);color:var(--gold-500)}
.ficon.pop{background:var(--fuchsia-100);color:var(--fuchsia-500)}
.ficon.navy{background:#e6eef2;color:var(--navy-700)}
.fcard h3{font:var(--fw-semibold) 20px/1.2 var(--font-sans);letter-spacing:-0.01em;color:var(--text-strong);margin-bottom:10px}
.fcard p{font-size:15px;line-height:1.55;color:var(--text-muted)}
.fcard ul{margin:16px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px}
.fcard li{position:relative;padding-left:24px;font-size:14px;color:var(--text-body);line-height:1.4}
.fcard li svg{position:absolute;left:0;top:1px;width:16px;height:16px;color:var(--teal-600)}

/* split feature row */
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.split.rev .split-copy{order:2}
.split-copy .eyebrow{margin-bottom:16px}
.split-copy h2{margin-bottom:16px}
.split-copy .lead{margin-bottom:24px}
.flist{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px}
.flist li{display:flex;gap:13px}
.flist .fi{flex:0 0 auto;width:34px;height:34px;border-radius:9px;background:var(--teal-50);color:var(--teal-700);display:grid;place-items:center}
.flist .fi svg{width:18px;height:18px}
.flist h4{font:var(--fw-semibold) 16px/1.3 var(--font-sans);color:var(--text-strong);margin-bottom:3px}
.flist p{font-size:14.5px;color:var(--text-muted);line-height:1.5}

/* ---- product mockup primitives (console vocabulary) ---- */
.mock{background:#fff;border:1px solid var(--border-default);border-radius:12px;box-shadow:var(--shadow-lg);overflow:hidden;font-family:var(--font-sans)}
.mock-bar{display:flex;align-items:center;gap:7px;height:38px;padding:0 14px;background:var(--slate-25);border-bottom:1px solid var(--border-subtle)}
.mock-bar i{width:10px;height:10px;border-radius:50%;background:var(--slate-300)}
.mock-bar .mt{margin-left:10px;font-size:12px;color:var(--text-subtle);font-family:var(--font-mono)}
.mock-body{padding:14px;display:flex;flex-direction:column;gap:12px}
.block{border:1px solid var(--border-subtle);border-radius:8px;overflow:hidden;background:#fff}
.block-h{display:flex;align-items:center;gap:8px;height:38px;padding:0 12px;background:var(--slate-25);border-bottom:1px solid var(--border-subtle);font:var(--fw-semibold) 13px/1 var(--font-sans);color:var(--text-strong)}
.block-h svg{width:15px;height:15px;color:var(--text-muted)}
.block-h .cnt{margin-left:auto;font-family:var(--font-mono);font-size:11px;color:var(--text-muted);background:var(--slate-100);border-radius:999px;padding:2px 8px}
.block-b{padding:11px}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.kpi{border:1px solid var(--border-subtle);border-radius:6px;padding:10px 11px;background:#fff;border-top:3px solid var(--slate-400)}
.kpi.ok{border-top-color:var(--ok-500)}.kpi.warn{border-top-color:var(--warn-500)}.kpi.danger{border-top-color:var(--danger-500)}.kpi.info{border-top-color:var(--info-500)}.kpi.teal{border-top-color:var(--teal-600)}
.kpi .v{font:var(--fw-semibold) 24px/1 var(--font-sans);letter-spacing:-0.01em;color:var(--text-strong)}
.kpi .v small{font-size:13px;color:var(--text-muted);font-weight:500}
.kpi .l{font-size:11.5px;color:var(--text-muted);margin-top:4px}
.kpi .d{font-family:var(--font-mono);font-size:10.5px;margin-top:5px}
.kpi .d.up{color:var(--ok-text)}.kpi .d.down{color:var(--danger-text)}

/* status chip */
.chip{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px;border-radius:999px;font:var(--fw-medium) 11.5px/1 var(--font-sans);border:1px solid transparent}
.chip .dot{width:6px;height:6px;border-radius:50%}
.chip.ok{background:var(--ok-tint);color:var(--ok-text);border-color:var(--ok-border)}.chip.ok .dot{background:var(--ok-500)}
.chip.warn{background:var(--warn-tint);color:var(--warn-text);border-color:var(--warn-border)}.chip.warn .dot{background:var(--warn-500)}
.chip.danger{background:var(--danger-tint);color:var(--danger-text);border-color:var(--danger-border)}.chip.danger .dot{background:var(--danger-500)}
.chip.info{background:var(--info-tint);color:var(--info-text);border-color:var(--info-border)}.chip.info .dot{background:var(--info-500)}
.chip.neutral{background:var(--neutral-tint);color:var(--neutral-text);border-color:var(--neutral-border)}.chip.neutral .dot{background:var(--neutral-500)}

/* visit / alert row */
.vrow{display:flex;align-items:center;gap:10px;padding:9px 4px;border-bottom:1px solid var(--border-subtle)}
.vrow:last-child{border-bottom:0}
.vrow .tm{font-family:var(--font-mono);font-size:12.5px;color:var(--text-body);width:44px;flex:0 0 auto}
.vrow .who{flex:1;min-width:0}
.vrow .who b{font-size:13px;font-weight:600;color:var(--text-strong);display:block}
.vrow .who span{font-size:11.5px;color:var(--text-muted)}
.vrow.draft{border:1px dashed var(--draft-border);background:var(--draft-tint);border-radius:6px;padding:8px 10px;margin-bottom:6px}

/* pipeline */
.pipe{display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin-top:12px;border:1px solid var(--border-subtle);border-radius:12px;overflow:hidden;background:#fff}
.pstep{padding:22px 20px;border-right:1px solid var(--border-subtle);position:relative}
.pstep:last-child{border-right:0}
.pstep .pnum{font-family:var(--font-mono);font-size:12px;color:var(--brand-pop);font-weight:600}
.pstep h4{font:var(--fw-semibold) 16px/1.2 var(--font-sans);color:var(--text-strong);margin:8px 0 6px}
.pstep p{font-size:13px;color:var(--text-muted);line-height:1.45}
.pstep .arw{position:absolute;right:-11px;top:26px;z-index:2;width:22px;height:22px;border-radius:50%;background:#fff;border:1px solid var(--border-subtle);display:grid;place-items:center;color:var(--teal-600)}
.pstep .arw svg{width:13px;height:13px}
.pstep:last-child .arw{display:none}

/* integrations */
.intg{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px;margin-top:44px}
.intg .it{display:flex;gap:14px;align-items:flex-start;padding:22px;border:1px solid var(--border-subtle);border-radius:12px;background:#fff}
.intg .it .ic{flex:0 0 auto;width:42px;height:42px;border-radius:10px;background:var(--slate-50);display:grid;place-items:center;color:var(--navy-700)}
.intg .it .ic svg{width:22px;height:22px}
.intg .it h4{font:var(--fw-semibold) 15.5px/1.2 var(--font-sans);color:var(--text-strong);margin-bottom:4px}
.intg .it p{font-size:13.5px;color:var(--text-muted);line-height:1.45}

/* stat band */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.stat .n{font:var(--fw-semibold) clamp(34px,4vw,52px)/1 var(--font-sans);letter-spacing:-0.02em;color:#fff}
.stat .n .u{font-size:0.5em;color:var(--gold-300);margin-left:3px}
.stat .k{font-size:14px;color:rgba(255,255,255,0.72);margin-top:10px;line-height:1.4}

/* quote */
.quote{max-width:900px;margin:0 auto;text-align:center}
.quote p{font:var(--fw-medium) clamp(22px,2.6vw,32px)/1.35 var(--font-sans);letter-spacing:-0.015em;color:var(--text-strong);text-wrap:balance}
.quote .by{margin-top:26px;font-size:15px;color:var(--text-muted)}
.quote .by b{color:var(--text-strong);font-weight:600}

/* CTA band */
.cta-band{background:var(--teal-800);border-radius:22px;padding:56px 56px;color:#fff;display:grid;grid-template-columns:1.3fr 0.7fr;gap:40px;align-items:center;position:relative;overflow:hidden}
.cta-band h2{font:var(--fw-semibold) clamp(28px,3.2vw,40px)/1.08 var(--font-sans);letter-spacing:-0.02em;color:#fff;text-wrap:balance}
.cta-band p{margin-top:16px;font-size:17px;color:rgba(255,255,255,0.8);line-height:1.5}
.cta-actions{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.cta-band .ring{position:absolute;right:-80px;top:-80px;width:320px;height:320px;border-radius:50%;border:44px solid rgba(255,201,61,0.14)}

/* pricing */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:52px;align-items:start}
.plan{background:#fff;border:1px solid var(--border-subtle);border-radius:16px;padding:32px 28px;box-shadow:var(--shadow-xs);display:flex;flex-direction:column}
.plan.feat{border:2px solid var(--primary);box-shadow:var(--shadow-md);position:relative}
.plan .tag{position:absolute;top:-12px;left:28px;background:var(--primary);color:#fff;font:var(--fw-semibold) 11px/1 var(--font-sans);letter-spacing:var(--ls-caps);text-transform:uppercase;padding:6px 12px;border-radius:999px}
.plan h3{font:var(--fw-semibold) 21px/1.1 var(--font-sans);color:var(--text-strong)}
.plan .who{font-size:14px;color:var(--text-muted);margin-top:6px;min-height:42px}
.plan .amt{font:var(--fw-semibold) 40px/1 var(--font-sans);letter-spacing:-0.02em;color:var(--text-strong);margin:20px 0 4px}
.plan .amt small{font-size:15px;color:var(--text-muted);font-weight:500}
.plan .per{font-size:13px;color:var(--text-subtle);margin-bottom:22px}
.plan .btn{width:100%;justify-content:center;margin-bottom:22px}
.plan ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.plan li{display:flex;gap:10px;font-size:14px;color:var(--text-body);line-height:1.4}
.plan li svg{flex:0 0 auto;width:17px;height:17px;color:var(--teal-600);margin-top:1px}
.plan li.off{color:var(--text-subtle)}
.plan li.off svg{color:var(--slate-400)}

/* faq */
.faq{max-width:820px;margin:44px auto 0}
.faq details{border-bottom:1px solid var(--border-subtle);padding:20px 0}
.faq summary{font:var(--fw-semibold) 17px/1.3 var(--font-sans);color:var(--text-strong);cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pl{flex:0 0 auto;color:var(--teal-600);transition:transform var(--dur-base)}
.faq details[open] summary .pl{transform:rotate(45deg)}
.faq p{margin-top:12px;font-size:15px;color:var(--text-muted);line-height:1.6;max-width:70ch}

/* about */
.mission{max-width:820px}
.mission p{font-size:clamp(19px,2vw,25px);line-height:1.5;color:var(--text-body);text-wrap:pretty}
.mission p+p{margin-top:22px}
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:52px}
.value{padding:26px;border:1px solid var(--border-subtle);border-radius:14px;background:#fff}
.value .ficon{margin-bottom:16px}
.value h3{font:var(--fw-semibold) 18px/1.2 var(--font-sans);color:var(--text-strong);margin-bottom:8px}
.value p{font-size:14.5px;color:var(--text-muted);line-height:1.55}

/* footer */
.foot{background:var(--navy-900);color:rgba(255,255,255,0.7);padding:64px 0 40px}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px}
.foot .brand .wm{color:#fff}
.foot p{font-size:14px;line-height:1.6;margin-top:16px;max-width:34ch;color:rgba(255,255,255,0.6)}
.foot h5{font:var(--fw-semibold) 13px/1 var(--font-sans);letter-spacing:var(--ls-caps);text-transform:uppercase;color:rgba(255,255,255,0.5);margin-bottom:16px}
.foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
.foot a{color:rgba(255,255,255,0.75);font-size:14.5px;text-decoration:none}
.foot a:hover{color:#fff}
.foot-bot{margin-top:48px;padding-top:24px;border-top:1px solid rgba(255,255,255,0.12);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:rgba(255,255,255,0.5)}

/* section intro spacing */
.intro{margin-bottom:14px}
.center{text-align:center;margin-left:auto;margin-right:auto}
.center .lead{margin-left:auto;margin-right:auto}

/* persona link cards */
.personas{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:44px}
.pcard{display:flex;flex-direction:column;gap:7px;padding:20px;border:1px solid var(--border-subtle);border-radius:12px;background:#fff;text-decoration:none;box-shadow:var(--shadow-xs);transition:box-shadow var(--dur-base) var(--ease-standard),transform var(--dur-base)}
.pcard:hover{box-shadow:var(--shadow-md);transform:translateY(-2px);text-decoration:none}
.pcard b{font:var(--fw-semibold) 15.5px/1.25 var(--font-sans);color:var(--text-strong)}
.pcard span{font-size:13px;color:var(--text-muted);line-height:1.45}
.pcard .go{margin-top:6px;color:var(--teal-600);font:var(--fw-medium) 13px/1 var(--font-sans);display:inline-flex;gap:5px;align-items:center}
.pcard .go svg{width:14px;height:14px}

/* journeys page persona sections */
.persona{display:grid;grid-template-columns:0.85fr 1.15fr;gap:56px;align-items:start}
.persona .h-sub{margin-top:12px}
.plist{list-style:none;margin:24px 0 0;padding:0;display:flex;flex-direction:column;gap:13px}
.plist li{display:flex;gap:11px;font-size:15px;color:var(--text-body);line-height:1.45;align-items:flex-start}
.plist li svg{flex:0 0 auto;width:17px;height:17px;color:var(--teal-600);margin-top:2px}
.p-note{margin-top:22px;font-size:13.5px;color:var(--text-subtle)}

@media(max-width:960px){
  .hero-grid,.split{grid-template-columns:1fr;gap:40px}
  .split.rev .split-copy{order:0}
  .triad,.price-grid,.values,.stats{grid-template-columns:1fr 1fr}
  .personas{grid-template-columns:1fr 1fr}
  .persona{grid-template-columns:1fr;gap:20px}
  .pipe{grid-template-columns:1fr 1fr}
  .pstep .arw{display:none}
  .cta-band{grid-template-columns:1fr;padding:40px 32px}
  .foot-grid{grid-template-columns:1fr 1fr}
  .hero-float{display:none}
}
@media(max-width:600px){
  .wrap{padding:0 20px}
  .nav-links{display:none}
  .triad,.price-grid,.values,.stats,.kpis,.pipe,.foot-grid,.personas{grid-template-columns:1fr}
  .pad{padding:64px 0}
}