/* DENDAT public kit: the one look for every DENDAT platform's public pages.

   Served by every platform at /brand/kit/dendat-public.css straight from this
   file (each platform's dendat_brand.py reads the CRM's brand directory on
   disk), so editing THIS file restyles every extension at once. Nothing here is
   copied into a platform.

   It is loaded AFTER each page's own <style> blocks and wins on purpose
   (selectors are prefixed with `html body`), so the older flat "terminal" shell
   that every platform still carries is restyled without touching its markup.
   Layout stays with the page; this file owns the look: type, colour, surfaces,
   buttons, and the DENCRM hero backdrop.

   Fonts and media are relative to this file, so the same stylesheet works at
   /brand/kit/ on a platform and at /static/brand/kit/ inside the CRM. */

@font-face{font-family:'Geist';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(fonts/Geist-var-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Geist';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(fonts/Geist-var-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20C0,U+2C60-2C7F}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(fonts/GeistMono-var-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(fonts/GeistMono-var-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20C0}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;
  src:url(fonts/InstrumentSerif-italic-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;
  src:url(fonts/InstrumentSerif-italic-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+20A0-20C0}

/* ── Tokens: DENCRM's dark teal identity ─────────────────────────────── */
html:root{
  --bg:#040807;--surface:#0a1110;--surface-2:#0f1817;--surface-3:#152120;
  --line:rgba(160,255,225,.08);--line-2:rgba(160,255,225,.15);
  --text:#ffffff;--text-2:#b4c2be;--text-3:#7d8f8a;--text-4:#55655f;
  --accent:#12c99b;--accent-2:#7dffd8;--accent-dim:rgba(18,201,155,.12);
  --ok:#4ade80;--warn:#f5b13d;--stop:#f4677e;
  --sans:'Inter',system-ui,-apple-system,sans-serif;
  --display:'Geist','Inter',system-ui,-apple-system,sans-serif;
  --mono:'Geist Mono','JetBrains Mono',ui-monospace,monospace;
  --serif:'Instrument Serif','Times New Roman',serif;
  --r:14px;--r-lg:22px;--ease:cubic-bezier(.16,1,.3,1);
  color-scheme:dark;
}
html body{background:var(--bg);color:var(--text-2);font-family:var(--sans);font-size:1rem;
  text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;font-feature-settings:'calt' 1,'kern' 1}
html body ::selection{background:rgba(18,201,155,.3);color:#fff}
html body h1,html body h2,html body h3{text-wrap:balance}
html body p,html body li{text-wrap:pretty}

/* The old measured grid goes; the backdrop is the hero sky below. */
html body .grid-bg,html body .grid-fade{display:none}

/* ── Hero sky: DENCRM's teal aurora + looping orbit video ────────────── */
/* Works without JS: the aurora is pure CSS. dendat-public.js adds the poster
   and video on wide screens with motion allowed. */
.dd-sky{position:absolute;top:0;left:0;right:0;height:min(112vh,1040px);z-index:0;overflow:hidden;pointer-events:none}
.dd-sky::before{content:"";position:absolute;inset:0;
  background:
    radial-gradient(60% 55% at 50% 30%,rgba(18,201,155,.26),transparent 70%),
    radial-gradient(40% 40% at 18% 12%,rgba(34,211,238,.14),transparent 70%),
    radial-gradient(38% 42% at 85% 22%,rgba(125,255,216,.12),transparent 70%),
    linear-gradient(180deg,#03100d 0%,#040807 100%)}
.dd-sky .dd-poster,.dd-sky video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  background:center/cover no-repeat;opacity:0;transition:opacity 1.4s ease}
.dd-sky .dd-poster.on{opacity:.55}
.dd-sky video.on{opacity:.6}
.dd-sky::after{content:"";position:absolute;inset:0;
  background:
    radial-gradient(ellipse 80% 70% at 50% 40%,transparent 40%,rgba(4,8,7,.6) 100%),
    linear-gradient(180deg,rgba(4,8,7,.35) 0%,rgba(4,8,7,0) 18%,rgba(4,8,7,0) 62%,#040807 100%)}
.dd-grain{position:absolute;inset:0;opacity:.08;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
@media (prefers-reduced-motion:reduce){.dd-sky video{display:none}}

/* ── Nav ─────────────────────────────────────────────────────────────── */
html body nav,html body #nav{height:68px;background:rgba(4,8,7,.38);border-bottom:1px solid rgba(160,255,225,.07);
  backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%)}
html body nav.scrolled{background:rgba(4,8,7,.86);border-bottom-color:var(--line-2);box-shadow:0 10px 34px rgba(0,0,0,.35)}
html body .nav-mark{width:34px;height:34px;border-radius:10px;border:1px solid var(--line-2);background:rgba(18,201,155,.08);color:var(--accent-2);font-family:var(--display)}
html body .nav-name{font-family:var(--display);font-size:18px;font-weight:650;letter-spacing:-.02em;color:#fff}
html body .nav-sub{font-family:var(--sans);font-size:12.5px;letter-spacing:0;text-transform:none;color:var(--text-3);border-left-color:var(--line-2)}
html body .nav-link,html body .nav-trigger{font-family:var(--sans);font-size:14px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--text-2);border-radius:10px;padding:9px 14px}
html body .nav-link:hover,html body .nav-item:hover .nav-trigger{color:#fff;background:rgba(255,255,255,.06)}
html body .nav-link.active::after,html body .nav-trigger.active::after{background:var(--accent)}
html body .nav-drop{background:rgba(8,16,14,.96);border-color:var(--line-2);border-radius:16px}
html body .drop-head{font-family:var(--mono);letter-spacing:.14em}
html body .drop-tt{font-family:var(--display);font-size:14px;font-weight:600;letter-spacing:-.01em;text-transform:none}
html body .drop-ds{font-size:12.5px;color:var(--text-3)}
html body .drop-ic{border-radius:10px;background:var(--accent-dim);border-color:rgba(18,201,155,.25);color:var(--accent-2)}
html body .drop-foot{font-family:var(--sans);letter-spacing:0;text-transform:none;font-size:13px}
html body .nav-auth{border:none;background:none;padding:0;gap:8px}
html body .nav-auth a,html body .nav-cta{font-family:var(--display);font-size:14.5px;font-weight:600;letter-spacing:-.01em;text-transform:none;border-radius:11px}
html body .auth-ghost{color:var(--text);padding:10px 14px}
html body .auth-ghost:hover{background:rgba(255,255,255,.07)}
html body .auth-solid,html body .nav-cta{background:#0e1f1b;color:#fff;border:1px solid rgba(160,255,225,.18);padding:10px 18px;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
html body .auth-solid:hover,html body .nav-cta:hover{background:#13302a;border-color:rgba(125,255,216,.4)}
html body .nav-toggle{border-radius:10px;border-color:var(--line-2)}

/* ── Type ────────────────────────────────────────────────────────────── */
html body .hero{position:relative;z-index:2}
html body .hero h1,html body h1.display,html body .page-hero h1{font-family:var(--display);font-weight:600;
  font-size:clamp(2.6rem,5.8vw,4.9rem);line-height:1.02;letter-spacing:-.045em;color:#fff;
  text-shadow:0 2px 30px rgba(0,0,0,.35)}
html body h1 em{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.015em;
  color:var(--accent-2);font-size:1.07em;padding-right:.04em;background:none;-webkit-text-fill-color:var(--accent-2)}
html body h2,html body .sec-head h2{font-family:var(--display);font-weight:600;letter-spacing:-.035em;color:#fff}
html body .sec-head h2{font-size:clamp(1.8rem,3.4vw,2.7rem);line-height:1.08}
html body .sec-head p{font-size:1.02rem;color:var(--text-3);line-height:1.65}
html body h2 em{font-family:var(--serif);font-style:italic;font-weight:400;color:var(--accent-2)}
html body .lede{font-size:1.14rem;line-height:1.7;color:var(--text-2)}
html body .eyebrow{font-family:var(--sans);font-size:13.5px;font-weight:500;letter-spacing:0;text-transform:none;
  color:#d6fff2;border:1px solid rgba(125,255,216,.22);background:rgba(18,201,155,.1);border-radius:999px;padding:6px 14px 6px 10px}
html body .eyebrow .tick{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(18,201,155,.18)}
html body .snum{font-family:var(--mono);color:var(--accent-2)}

/* ── Buttons ─────────────────────────────────────────────────────────── */
html body .btn{font-family:var(--display);font-size:15.5px;font-weight:600;letter-spacing:-.01em;text-transform:none;
  border-radius:12px;padding:15px 26px;transition:transform .2s var(--ease),background .2s,box-shadow .2s,border-color .2s}
html body .btn:hover{transform:translateY(-1px)}
html body .btn-solid{background:var(--accent);border-color:var(--accent);color:#02140f;
  box-shadow:0 10px 30px rgba(18,201,155,.28),inset 0 1px 0 rgba(255,255,255,.25)}
html body .btn-solid:hover{background:#2ee0b2;border-color:#2ee0b2;color:#02140f}
html body .btn-ghost{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.22);color:#fff}
html body .btn-ghost:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.4);color:#fff}

/* ── Surfaces ────────────────────────────────────────────────────────── */
html body section{border-top:none}
html body section+section,html body .hero+section{border-top:1px solid var(--line)}
html body .panel{border-radius:var(--r-lg);border:1px solid rgba(125,255,216,.16);
  background:linear-gradient(180deg,rgba(14,28,25,.78),rgba(8,15,14,.78));
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:0 30px 80px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.05)}
html body .panel-bar{background:rgba(255,255,255,.02);border-bottom-color:var(--line);padding:12px 18px}
html body .panel-title{font-family:var(--display);font-size:13.5px;font-weight:600;letter-spacing:-.01em;text-transform:none;color:#fff}
html body .panel-flag{border-radius:999px;border-color:var(--line-2);font-family:var(--mono);letter-spacing:.06em;color:var(--text-3)}
html body .panel-body{font-family:var(--mono);font-size:12.5px;padding:20px 18px}
html body .panel-foot{font-family:var(--sans);font-size:12.5px;letter-spacing:0;color:var(--text-3)}
html body .a{color:var(--accent-2)}
html body .cursor{background:var(--accent)}

/* Card grids: separate rounded tiles instead of one ruled table. */
html body .cards,html body .facts,html body .who,html body .grids{gap:16px;background:none;border:none}
html body .cards>*,html body .facts>*,html body .who>*,html body .grids>*{
  border:1px solid var(--line);border-radius:var(--r-lg);
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.012));
  transition:border-color .25s,transform .3s var(--ease),background .25s}
html body .cards>*:hover,html body .who>*:hover{border-color:rgba(125,255,216,.28);transform:translateY(-2px);
  background:linear-gradient(180deg,rgba(18,201,155,.07),rgba(255,255,255,.015))}
html body .cell .ic{width:40px;height:40px;border-radius:12px;background:var(--accent-dim);border-color:rgba(18,201,155,.28);color:var(--accent-2)}
html body .cell .ic .material-icons-outlined{font-size:20px}
html body .cell h3{font-family:var(--display);font-size:1.12rem;font-weight:600;letter-spacing:-.02em;text-transform:none;color:#fff;margin-bottom:10px}
html body .cell p{font-size:.95rem;line-height:1.7;color:var(--text-3)}
html body .cell p b,html body .who p b{color:#e6fff7}
/* Pages style `.facts div` for the old ruled table; inner divs must not
   become a second box inside the tile. */
html body .facts>* div,html body .grids>* div{background:none;border:none;padding:0;border-radius:0}
html body .facts>*{padding:24px 24px 22px}
html body .facts .n{font-family:var(--display);font-weight:600;font-size:2.1rem;letter-spacing:-.04em;color:#fff}
html body .facts>*:first-child .n{color:var(--accent-2)}
html body .facts .l{font-size:.9rem;line-height:1.6;color:var(--text-3)}
html body .who h3{font-family:var(--display);font-size:1.3rem;letter-spacing:-.02em;color:#fff}
html body .who p{font-size:.97rem;color:var(--text-3)}
html body .who li{font-size:.95rem;color:var(--text-2)}
html body .who li::before{background:var(--accent);width:6px;height:6px;border-radius:50%;top:.65em}
html body .grids .t{font-family:var(--mono);letter-spacing:.1em;color:var(--text-3)}

/* ── Forms and notices ───────────────────────────────────────────────── */
html body .field label{font-family:var(--sans);font-size:13px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--text-2)}
html body .field input,html body .field select,html body .field textarea{border-radius:12px;background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.12);padding:13px 15px;font-size:.95rem}
html body .field input:focus,html body .field select:focus,html body .field textarea:focus{border-color:var(--accent);box-shadow:0 0 0 4px rgba(18,201,155,.16)}
html body .auth-form,html body .auth-card form{border-radius:var(--r-lg);border:1px solid var(--line-2);
  background:linear-gradient(180deg,rgba(14,28,25,.72),rgba(8,15,14,.72));backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:0 30px 80px rgba(0,0,0,.4)}
html body .auth-card h1,html body .err h1{font-family:var(--display);font-weight:600;letter-spacing:-.035em;color:#fff;font-size:2rem}
html body .sso{border-radius:12px;font-family:var(--display);font-weight:600}
html body .notice{border-radius:12px}
html body .or{font-family:var(--sans);letter-spacing:.08em}

/* ── Footer ──────────────────────────────────────────────────────────── */
html body footer{background:linear-gradient(180deg,#050a09,#030605);border-top:1px solid var(--line)}
html body .foot-brand p{font-size:.9rem;color:var(--text-3)}
html body .foot-col h5{font-family:var(--display);font-size:13px;font-weight:600;letter-spacing:0;text-transform:none;color:#fff}
html body .foot-col a,html body .foot-col span{font-size:.9rem;color:var(--text-3)}
html body .foot-col a:hover{color:var(--accent-2)}
html body .foot-bar p{font-family:var(--sans);font-size:.82rem;letter-spacing:0;text-transform:none;color:var(--text-4)}

/* ── Phones ──────────────────────────────────────────────────────────── */
@media (max-width:760px){
  html body .nav-links{background:rgba(4,8,7,.98);top:68px}
  html body .hero h1{font-size:clamp(2.3rem,10vw,3rem)}
  html body .btn{width:100%}
  html body .actions{width:100%}
  .dd-sky{height:min(100vh,760px)}
}

/* Supporting copy sits over the hero video on sign-in and error pages, so it
   needs more contrast than the old flat background did. */
html body .auth-card .sub,html body .err p{color:var(--text-2)}
html body .foot-note{color:var(--text-3)}

/* Accent words some platforms mark up differently: <b> (CHIP), .grad
   (DenDrive), .rotator (CCD). All become DENCRM's serif-italic mint, never a
   purple gradient. */
html body h1 b,html body h1 .grad,html body h1 .rotator,html body h1 .rotator *{
  font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:-.015em;
  background:none;-webkit-background-clip:border-box;background-clip:border-box;
  color:var(--accent-2);-webkit-text-fill-color:var(--accent-2)}

/* Platforms with their own button names. */
html body .btn-primary{background:var(--accent);border:1px solid var(--accent);color:#02140f;border-radius:12px;
  font-family:var(--display);font-weight:600;letter-spacing:-.01em;text-transform:none;
  box-shadow:0 10px 30px rgba(18,201,155,.28)}
html body .btn-primary:hover{background:#2ee0b2;border-color:#2ee0b2;color:#02140f}
html body .btn-ghost.btn-lg,html body .btn-secondary{border-radius:12px;font-family:var(--display);font-weight:600;
  letter-spacing:-.01em;text-transform:none;color:#fff;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.22)}

/* Heroes that paint their own solid background would hide the sky. */
html body .hero,html body section.hero,html body .hero-section{background:transparent}