/* DENDAT public kit, "chart paper" look.

   The DENGOV-style sibling of dendat-public.css: parchment ground, ink type,
   numbered mono labels in chart magenta, square edges, hard offset shadows,
   an ink footer with a scale bar. Linked by each platform's public_base.html
   ONLY when the Public Look switch in the CRM (/platform/public-look/) puts
   that platform on the chart look; with the original look this file is never
   requested. Loaded after dendat-public.css, and every selector starts with
   `html:root body` so it outranks the kit's `html body` rules. */

html:root{
  --bg:#ebe4d2;--surface:#f9f5e8;--surface-2:#f3eddc;--surface-3:#e2dac4;
  --line:rgba(10,38,48,.16);--line-2:rgba(10,38,48,.32);
  --text:#0a2630;--text-2:#27434d;--text-3:#4c636b;--text-4:#5f747b;
  --accent:#0b7a60;--accent-2:#07604b;--accent-dim:rgba(11,122,96,.1);
  --ok:#17703f;--warn:#b85f08;--stop:#c0301d;
  --ck-ink:#0a2630;--ck-ink2:#0f3340;--ck-paper:#f3eddc;--ck-mag:#b4287a;--ck-mint:#7dffd8;
  /* CCD's marketing vocabulary: its indigo and gradient become ink, the
     surfaces become two paper tones so cards sit above the page */
  --indigo:#0b7a60;--indigo-2:#0b7a60;--violet:#0b7a60;--fuchsia:#b4287a;--indigo-soft:rgba(10,38,48,.06);
  --glow:transparent;--grad:linear-gradient(90deg,#0a2630,#0a2630);--grad-soft:none;--border-2:rgba(10,38,48,.42);
  /* DenDrive's own landing vocabulary */
  --bg2:#f3eddc;--bg3:#e2dac4;--border:rgba(10,38,48,.16);--border-soft:rgba(10,38,48,.12);--muted:#556d75;--nav-bg:rgba(235,228,210,.92);
  --r:2px;--r-lg:2px;color-scheme:light;
}
html:root body{
  background-color:#ebe4d2;color:var(--text-2);
  background-image:linear-gradient(180deg,rgba(235,228,210,0) 0,#ebe4d2 760px),
    linear-gradient(rgba(10,38,48,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(10,38,48,.045) 1px,transparent 1px);
  background-size:100% 100%,72px 72px,72px 72px;background-repeat:no-repeat,repeat,repeat;
}
html:root body ::selection{background:var(--ck-ink);color:var(--ck-paper)}

/* the teal sky, video and grain are the original look's; paper has none */
html:root body .dd-sky,html:root body .dd-grain,html:root body .grid-bg,html:root body .grid-fade{display:none !important}

/* ── Nav ── */
html:root body nav,html:root body #nav,html:root body nav.scrolled{background:rgba(235,228,210,.92);border-bottom:1px solid var(--line-2);box-shadow:none}
html:root body .nav-mark{background:var(--ck-ink);border-color:var(--ck-ink);color:var(--ck-paper);border-radius:6px}
html:root body .nav-name{color:var(--ck-ink)}
html:root body .nav-sub{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);border-left-color:var(--line-2)}
html:root body .nav-link,html:root body .nav-trigger{color:var(--text-2);border-radius:2px}
html:root body .nav-link:hover,html:root body .nav-item:hover .nav-trigger{color:var(--ck-paper);background:var(--ck-ink)}
html:root body .nav-link.active::after,html:root body .nav-trigger.active::after{background:var(--ck-mag)}
html:root body .nav-drop{background:#f9f5e8;border:1px solid var(--ck-ink);border-radius:2px;box-shadow:6px 6px 0 var(--ck-ink);backdrop-filter:none;-webkit-backdrop-filter:none}
html:root body .drop-head{color:var(--ck-mag)}
html:root body .drop-tt{color:var(--ck-ink)}
html:root body .drop-ic{background:transparent;border:1px solid var(--ck-ink);border-radius:2px;color:var(--ck-ink)}
html:root body .auth-ghost{color:var(--ck-ink);border-radius:2px}
html:root body .auth-ghost:hover{background:var(--ck-ink);color:var(--ck-paper)}
html:root body .auth-solid,html:root body .nav-cta{background:var(--ck-ink);color:var(--ck-paper);border:1px solid var(--ck-ink);border-radius:2px;box-shadow:none}
html:root body .auth-solid:hover,html:root body .nav-cta:hover{background:var(--accent);border-color:var(--accent);color:#fff}
html:root body .nav-toggle{border-radius:2px;border-color:var(--ck-ink);color:var(--ck-ink)}

/* ── Type ── */
html:root body h1,html:root body h2,html:root body h3,html:root body h4,
html:root body .hero h1,html:root body h1.display,html:root body .page-hero h1,html:root body .sec-head h2{color:var(--ck-ink);text-shadow:none}
html:root body h1 em,html:root body h2 em{color:var(--accent);-webkit-text-fill-color:var(--accent)}
html:root body .sec-head p,html:root body .lede{color:var(--text-2)}
html:root body .eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ck-mag);
  background:none;border:0;border-radius:0;padding:0}
html:root body .eyebrow::after{content:"";display:inline-block;width:56px;height:1px;background:var(--ck-mag);margin-left:12px;vertical-align:middle}
html:root body .eyebrow .tick{display:none}
html:root body .snum,html:root body .a{color:var(--ck-mag)}
html:root body .cursor{background:var(--ck-ink)}

/* ── Buttons: square ink, green with a magenta lift on hover ── */
html:root body .btn{border-radius:2px;transition:transform .2s,background .2s,box-shadow .2s,border-color .2s}
html:root body .btn-solid{background:var(--ck-ink);border:1px solid var(--ck-ink);color:var(--ck-paper);box-shadow:none}
html:root body .btn-solid:hover{background:var(--accent);border-color:var(--accent);color:#fff;transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--ck-mag)}
html:root body .btn-ghost{background:transparent;border:1px solid var(--ck-ink);color:var(--ck-ink)}
html:root body .btn-ghost:hover{background:var(--ck-ink);border-color:var(--ck-ink);color:var(--ck-paper);transform:none}

/* ── Surfaces: the panel becomes a chart sheet with a hard shadow ── */
html:root body section+section,html:root body .hero+section{border-top:1px solid var(--line-2)}
html:root body .panel{border-radius:2px;border:1px solid var(--ck-ink);background:#fffdf6;
  backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:8px 8px 0 var(--ck-ink)}
html:root body .panel-bar{background:var(--ck-paper);border-bottom:1px solid var(--ck-ink)}
html:root body .panel-title{color:var(--ck-ink)}
html:root body .panel-flag{border-radius:0;border:1.5px solid var(--ck-mag);color:var(--ck-mag);transform:rotate(-3deg)}
html:root body .panel-body{color:var(--text-2)}
html:root body .panel-foot{color:var(--text-3);border-top-color:var(--line)}
html:root body .cards>*,html:root body .facts>*,html:root body .who>*,html:root body .grids>*{
  border:1px solid var(--ck-ink);border-radius:2px;background:#fffdf6}
html:root body .cards>*:hover,html:root body .who>*:hover{border-color:var(--ck-ink);transform:translate(-3px,-3px);
  background:#fffdf6;box-shadow:6px 6px 0 var(--ck-ink)}
html:root body .cell .ic{border-radius:2px;background:var(--ck-ink);border-color:var(--ck-ink);color:var(--ck-paper)}
html:root body .cell h3,html:root body .who h3{color:var(--ck-ink)}
html:root body .cell p,html:root body .who p,html:root body .facts .l{color:var(--text-2)}
html:root body .cell p b,html:root body .who p b{color:var(--ck-ink)}
html:root body .facts .n{color:var(--ck-ink)}
html:root body .facts>*:first-child .n{color:var(--ck-mag)}
html:root body .who li::before{background:var(--ck-mag);border-radius:0}
html:root body .grids .t{color:var(--ck-mag)}

/* ── Forms ── */
html:root body .field label{color:var(--text-2)}
html:root body .field input,html:root body .field select,html:root body .field textarea,
html:root body input[type=text],html:root body input[type=email],html:root body input[type=password],html:root body input[type=tel],
html:root body input[type=number],html:root body select,html:root body textarea{
  border-radius:2px;background:#fffdf6;border:1px solid var(--line-2);color:var(--ck-ink)}
html:root body .field input:focus,html:root body .field select:focus,html:root body .field textarea:focus,
html:root body input:focus,html:root body select:focus,html:root body textarea:focus{border-color:var(--ck-ink);box-shadow:0 0 0 3px rgba(10,38,48,.12);outline:none}
html:root body .auth-form,html:root body .auth-card form{border-radius:2px;border:1px solid var(--ck-ink);background:#f9f5e8;
  backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:8px 8px 0 var(--ck-ink)}
html:root body .auth-card h1,html:root body .err h1{color:var(--ck-ink)}
html:root body .sso{border-radius:2px;background:transparent;border:1px solid var(--ck-ink);color:var(--ck-ink)}
html:root body .sso:hover{background:var(--ck-ink);color:var(--ck-paper)}
html:root body .notice{border-radius:2px}
html:root body .or{color:var(--text-3)}

/* ── Footer: ink, with a chart scale bar along the top ── */
html:root body footer{position:relative;background:var(--ck-ink);border-top:0;color:#9db4b8;
  --text:#f3eddc;--text-2:#b9cbcd;--text-3:#8aa3a8;--text-4:#8aa3a8;--line:rgba(243,237,220,.15);--line-2:rgba(243,237,220,.3)}
html:root body footer::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:repeating-linear-gradient(90deg,#f3eddc 0 40px,#0a2630 40px 80px);pointer-events:none}
html:root body footer h1,html:root body footer h2,html:root body footer h3,html:root body footer h4,html:root body .foot-col h5{color:#f3eddc}
html:root body .foot-col a,html:root body .foot-col span,html:root body .foot-brand p{color:#b9cbcd}
html:root body .foot-col a:hover{color:var(--ck-mint)}
html:root body .foot-bar p{color:#8aa3a8}

/* ── The Explore pill and the phone bottom bar ── */
html:root body #pex-fab{background:var(--ck-ink);color:var(--ck-paper);border:1px solid var(--ck-ink);border-radius:2px;box-shadow:4px 4px 0 var(--ck-mag);backdrop-filter:none}
html:root body #pmn{background:var(--ck-ink);border-top:1px solid var(--ck-ink)}
html:root body #pmn a.cta{background:var(--ck-paper);color:var(--ck-ink);border-radius:2px}
html:root body #pmn .pmn-orb{background:var(--ck-paper);color:var(--ck-ink)}

/* ── Depth: two paper tones, ruled cards with layered shadows ────────────
   Cards sit on a lighter sheet than the page, carry an ink rule along the top
   and a soft cast shadow under a faint hard edge; on hover they lift onto the
   chart's full hard shadow. Every second section is a darker band. */
html:root body .card,html:root body .step,html:root body .cells>*,html:root body .cell,
html:root body .feature-card,html:root body .platform-card,html:root body .info-card{
  background:#fffcf3 !important;border:1px solid rgba(10,38,48,.22) !important;border-top:3px solid var(--ck-ink) !important;
  border-radius:2px !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.8),3px 3px 0 rgba(10,38,48,.12),0 22px 34px -26px rgba(10,38,48,.55) !important;
  transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s,border-color .2s !important}
html:root body .card:hover,html:root body .step:hover,html:root body .cell:hover,html:root body .feature-card:hover,html:root body .platform-card:hover{
  transform:translate(-3px,-3px) !important;border-color:var(--ck-ink) !important;box-shadow:6px 6px 0 var(--ck-ink) !important;background:#fffdf7 !important}
html:root body .card::before{display:none !important}
html:root body .cards>*,html:root body .who>*,html:root body .facts>*,html:root body .grids>*{
  background:#fffcf3;border-top:3px solid var(--ck-ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.8),3px 3px 0 rgba(10,38,48,.12),0 22px 34px -26px rgba(10,38,48,.55)}
html:root body section:nth-of-type(even):not(.hero):not(:first-of-type){background-color:#e4dcc5;border-top:1px solid rgba(10,38,48,.28);border-bottom:1px solid rgba(10,38,48,.28)}
html:root body .card-title,html:root body .step-title,html:root body .cell h3{color:var(--ck-ink) !important;font-weight:650;letter-spacing:-.02em}
html:root body .card-desc,html:root body .step-desc{color:#2c4650 !important}
html:root body .sec-title{color:var(--ck-ink) !important;font-weight:700 !important}

/* comparison columns, plans and FAQ rows join the same ruled family */
html:root body .comp-col,html:root body .plan,html:root body .faq-item,html:root body .price-card,html:root body .pricing-card,html:root body .tier{
  background:#fffcf3 !important;border:1px solid rgba(10,38,48,.22) !important;border-radius:2px !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),3px 3px 0 rgba(10,38,48,.10),0 18px 30px -26px rgba(10,38,48,.5) !important}
html:root body .comp-col:not(.comp-old),html:root body .plan.feat,html:root body .plan.featured,html:root body .tier.highlight{
  background:var(--ck-ink) !important;border-color:var(--ck-ink) !important;box-shadow:6px 6px 0 var(--ck-mag) !important;
  --text:#f3eddc;--text-2:#cfe0e0;--text-3:#8fb0b6;--border:rgba(243,237,220,.18);--green:#5ee4a4;color:#cfe0e0}
html:root body .comp-col:not(.comp-old) *,html:root body .plan.feat .plan-name,html:root body .plan.feat .plan-price{color:inherit}
html:root body .comp-col:not(.comp-old) .comp-head,html:root body .plan.feat .plan-name,html:root body .plan.feat .plan-price{color:#f3eddc !important}
html:root body .plan-tag{background:var(--ck-mag) !important;color:#fff !important;border-radius:0 !important;font-family:var(--mono);letter-spacing:.12em}
html:root body .plan .btn,html:root body .plan a[class*="btn"]{border-radius:2px !important}
html:root body .plan.feat .btn,html:root body .plan.feat a[class*="btn"]{background:#f3eddc !important;color:var(--ck-ink) !important;border-color:#f3eddc !important}
html:root body .faq-item{border-top:1px solid rgba(10,38,48,.22) !important}
html:root body .faq-q .material-icons-round{color:var(--ck-mag) !important}

/* closing call to action: an ink sheet with a magenta hard shadow */
html:root body .cta-box,html:root body .cta-card,html:root body .final-cta,html:root body .cta-inner,html:root body .cta-band{
  background:var(--ck-ink) !important;background-image:none !important;border:1px solid var(--ck-ink) !important;border-radius:2px !important;
  box-shadow:8px 8px 0 var(--ck-mag) !important;--text:#f3eddc;--text-2:#cfe0e0;--text-3:#8fb0b6;color:#cfe0e0}
html:root body .cta-box h2,html:root body .cta-card h2,html:root body .final-cta h2,html:root body .cta-band h2{color:#f3eddc !important}
html:root body .cta-box .btn-ghost,html:root body .cta-box a[class*="ghost"],html:root body .cta-box a[class*="secondary"]{
  color:#f3eddc !important;border-color:rgba(243,237,220,.6) !important;background:transparent !important}
html:root body .cta-box .btn-solid,html:root body .cta-box a[class*="primary"],html:root body .cta-box .btn-p{
  background:#f3eddc !important;color:var(--ck-ink) !important;border-color:#f3eddc !important;box-shadow:none !important}

/* ruled grids (ideas, pairs, dials, prices, facts): one paper sheet with an
   ink rule on top, hairline cells, and the same cast shadow as cards */
html:root body .ideas,html:root body .pairs,html:root body .dials,html:root body .prices,html:root body .facts4,
html:root body .grid4,html:root body .grid3,html:root body .grid2{
  background:#fffcf3 !important;border:1px solid rgba(10,38,48,.22) !important;border-top:3px solid var(--ck-ink) !important;
  border-radius:2px !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.8),3px 3px 0 rgba(10,38,48,.10),0 22px 34px -26px rgba(10,38,48,.5) !important}
html:root body .ideas>*,html:root body .pairs>*,html:root body .dials>*,html:root body .prices>*,html:root body .facts4>*{
  border-color:rgba(10,38,48,.16) !important;background:transparent}
html:root body .ideas>* h3,html:root body .pairs>* h3,html:root body .prices>* .amt,html:root body .dials>* b{color:var(--ck-ink) !important}
html:root body .ideas>* p,html:root body .pairs>* p,html:root body .dials>* span,html:root body .prices>* .desc,html:root body .prices li{color:#2c4650 !important}
html:root body .ideas .num,html:root body .dials>* b,html:root body .prices h3{color:var(--ck-mag) !important}
html:root body .pairs .material-icons-outlined,html:root body .pairs .material-icons{color:var(--ck-ink) !important}
html:root body .prices .price.featured{background:var(--ck-ink) !important;--text:#f3eddc;--text-2:#cfe0e0;--text-3:#a9c0c4;--text-4:#8fb0b6;color:#cfe0e0}
html:root body .prices .price.featured .amt,html:root body .prices .price.featured li,html:root body .prices .price.featured .desc{color:#f3eddc !important}
html:root body .prices .price.featured .btn-solid{background:#f3eddc !important;color:var(--ck-ink) !important;border-color:#f3eddc !important}
html:root body .callout{background:#fffcf3 !important;border:1px solid rgba(10,38,48,.22) !important;border-left:4px solid var(--ck-mag) !important;border-radius:2px !important}
html:root body .callout b{color:var(--ck-ink) !important}

/* icon tiles: solid ink with a mint glyph, so the eye lands on them first */
html:root body .card-icon,html:root body .cell .ic,html:root body .feat-icon,html:root body .f-icon,html:root body .icon-tile{
  background:var(--ck-ink) !important;border:1px solid var(--ck-ink) !important;border-radius:2px !important;box-shadow:3px 3px 0 var(--ck-mag) !important}
html:root body .card-icon .material-icons-round,html:root body .card-icon .material-icons,html:root body .card-icon .material-icons-outlined,
html:root body .cell .ic .material-icons-outlined,html:root body .cell .ic .material-icons{color:var(--ck-mint) !important}

/* section labels: numbered-chart mono with a rule, not a lavender pill */
html:root body .sec-label,html:root body .section-label,html:root body .step-n{
  background:none !important;border:0 !important;border-radius:0 !important;padding:0 !important;
  color:var(--ck-mag) !important;font-family:var(--mono);letter-spacing:.16em}
html:root body .sec-label::after,html:root body .section-label::after{content:"";display:inline-block;width:56px;height:1px;background:var(--ck-mag);margin-left:12px;vertical-align:middle}
html:root body .step-n::before{background:var(--ck-mag) !important}

/* figures: the ink stats band, numbers in paper type (no gradient wash) */
html:root body .stats{gap:1px !important;background:var(--ck-ink);border:1px solid var(--ck-ink)}
html:root body .stat{background:var(--ck-ink2) !important;border:0 !important;border-radius:0 !important;box-shadow:none !important}
html:root body .stat-v,html:root body .stat-num,html:root body .stat-value{background:none !important;-webkit-text-fill-color:var(--ck-paper) !important;color:var(--ck-paper) !important}
html:root body .stat-l,html:root body .stat-label{color:#8fb0b6 !important}
html:root body .stat-ic{color:var(--ck-mint) !important}

/* ── Dark mock, terminal and code panels stay DARK: ink with light text ──
   They show the product's own screen, so they keep a screen's contrast
   instead of being washed onto the paper. */
html:root body .vrow,html:root body .term,html:root body .terminal,html:root body .term-body,html:root body .mock,
html:root body .mock-screen,html:root body pre,html:root body .code,html:root body .codeblock,html:root body .shot,
html:root body .card-visual .vrow{
  --text:#f3eddc;--text-2:#cfe0e0;--text-3:#8fb0b6;--green:#5ee4a4;--cyan:#7dffd8;--indigo-2:#9fd8ff;--amber:#f2c277;
  background:var(--ck-ink) !important;border:1px solid var(--ck-ink) !important;color:#cfe0e0 !important;border-radius:2px !important;
  box-shadow:inset 0 0 0 1px rgba(125,255,216,.08)}
html:root body .vrow .url,html:root body .terminal a,html:root body .mock a{color:var(--ck-mint) !important}

/* ── DenDrive: the figures strip becomes the ink stats band ── */
html:root body .lp-strip{gap:1px;background:var(--ck-ink);border:1px solid var(--ck-ink)}
html:root body .lp-strip>div{background:var(--ck-ink2) !important;background-image:none !important;border:0 !important;border-radius:0 !important;box-shadow:none !important}
html:root body .lp-strip strong{color:var(--ck-paper) !important;-webkit-text-fill-color:var(--ck-paper);background:none}
html:root body .lp-strip span{color:#8fb0b6 !important;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase}

/* ── CCD: the product video sits in a framed chart sheet ── */
html:root body .showcase-frame{border:1px solid var(--ck-ink) !important;border-radius:2px !important;box-shadow:8px 8px 0 var(--ck-ink) !important;transform:none !important}
html:root body .sc-bar{background:var(--ck-paper) !important;border-bottom:1px solid var(--ck-ink) !important}
html:root body .sc-title{color:var(--ck-ink) !important;font-family:var(--mono)}
html:root body .sc-live{color:var(--ck-mag) !important}

/* ── Phones ── */
@media (max-width:760px){
  html:root body .nav-links{background:#f3eddc;border-bottom:1px solid var(--ck-ink)}
  html:root body .nav-links a{color:var(--ck-ink)}
}

/* ── Contrast pass, all platforms (Oct 31 2026) ── found by sweeping every platform's public page ── */
/* footer brand name was ink on the ink footer */
html:root body footer .nav-name,html:root body footer .foot-brand .nav-name{color:var(--ck-paper) !important}
/* stat bands that use <b> and <span> instead of .stat-v / .stat-l */
html:root body .stat b,html:root body .stat strong{color:var(--ck-paper) !important;-webkit-text-fill-color:var(--ck-paper) !important}
html:root body .stat span,html:root body .stat small{color:#9fb8bd !important}
/* solid ink buttons that kept dark label text (radar, others) */
html:root body a.btn:not([class*="ghost"]):not([class*="outline"]):not([class*="secondary"]):not(.sec),html:root body button.btn:not([class*="ghost"]):not([class*="outline"]):not([class*="secondary"]):not(.sec){color:var(--ck-paper) !important}
html:root body a.btn:not([class*="ghost"]):not([class*="outline"]):not([class*="secondary"]):not(.sec) :is(.material-icons,.material-icons-outlined,.material-icons-round){color:var(--ck-paper) !important}
html:root body .stat .l{color:#8fb0b6 !important}
html:root body .stat .n{color:#9fb8bd !important}
/* coloured status words inside ink terminal panels (NOUS, others): the paper-tone colours vanished on ink */
html:root body :is(.term,.terminal) .cf{color:#7dffd8 !important}
html:root body :is(.term,.terminal) .g{color:#8fe3a8 !important}
html:root body :is(.term,.terminal) .r{color:#ff9a8c !important}
html:root body :is(.term,.terminal) .a{color:#ff9fd2 !important}
html:root body li > .material-icons-round{color:#17703f !important}