/* Automateagile brand layer (from the pitch decks: Baloo 2 + Ubuntu, indigo + golden yellow,
   warm orange-to-magenta wordmark, mountain-journey motif). Loaded AFTER each page's inline
   :root + body, so it overrides the old token values and fonts site-wide. Light is the default. */
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Ubuntu:wght@400;500;700&display=swap');

:root{
  --canvas:#FBFBFE; --ink:#1B1F4A; --muted:#585F8C; --faint:#9398BA;
  --accent:#3A40A0;            /* royal indigo, the primary brand colour */
  --accent-2:#6E78C6;
  --accent-soft:rgba(58,64,160,.07); --accent-line:rgba(58,64,160,.20);
  --pop:#F0B53C; --pop-soft:rgba(240,181,60,.16); --pop-ink:#6E5210;   /* the deck golden yellow */
  --warm-1:#E07A45; --warm-2:#C0306E;                                  /* the shift wordmark gradient */
  --terra:#E07A45; --terra-soft:rgba(224,122,69,.10);
  --gold:#F0B53C; --gold-soft:rgba(240,181,60,.16);
  --card:#FFFFFF; --line:#E4E6F2; --line-soft:#EFF0F8;
  --radius:22px; --radius-sm:14px;
  --shadow:0 1px 2px rgba(40,48,120,.06), 0 12px 30px -12px rgba(40,48,120,.18);
  --shadow-lift:0 2px 6px rgba(40,48,120,.08), 0 20px 46px -16px rgba(40,48,120,.26);
}
body{ font-family:'Ubuntu','Plus Jakarta Sans',system-ui,sans-serif; }
h1,h2,h3,h4,.djs-brand{ font-family:'Baloo 2',system-ui,sans-serif; letter-spacing:-.005em; }
h1{ font-weight:800; } h2,h3,h4{ font-weight:700; }
body::before{
  background:
    radial-gradient(46rem 46rem at 8% -4%, rgba(58,64,160,.07), transparent 60%),
    radial-gradient(40rem 40rem at 98% 4%, rgba(240,181,60,.09), transparent 58%),
    radial-gradient(52rem 52rem at 80% 96%, rgba(58,64,160,.06), transparent 60%) !important;
}

html[data-theme="dark"]{
  --canvas:#1B1F4E;        /* deep indigo, the infographic background, darkish not black */
  --ink:#EEEFF9;
  --muted:#A7ACD6;
  --faint:#6F74A6;
  --accent:#F0C45A;        /* golden yellow on indigo, exactly the deck infographic accent */
  --accent-2:#F6D584;
  --accent-soft:rgba(240,196,90,.12);
  --accent-line:rgba(240,196,90,.26);
  --pop:#F0C45A; --pop-soft:rgba(240,196,90,.16); --pop-ink:#3A2E08;
  --terra:#E89A6A;
  --terra-soft:rgba(232,154,106,.14);
  --gold:#F0C45A; --gold-soft:rgba(240,196,90,.18);
  --card:#262B66;          /* indigo panel, a touch lighter than canvas */
  --line:#39407F;
  --line-soft:#2A2F63;
  --shadow:0 1px 2px rgba(0,0,0,.40), 0 12px 32px -14px rgba(0,0,0,.55);
  --shadow-lift:0 2px 6px rgba(0,0,0,.46), 0 20px 46px -16px rgba(0,0,0,.66);
}
html[data-theme="dark"] body::before{
  background:
    radial-gradient(46rem 46rem at 8% -4%, rgba(240,196,90,.08), transparent 60%),
    radial-gradient(40rem 40rem at 98% 4%, rgba(110,120,210,.16), transparent 58%),
    radial-gradient(52rem 52rem at 80% 96%, rgba(110,120,210,.13), transparent 60%),
    radial-gradient(34rem 34rem at 16% 82%, rgba(240,196,90,.05), transparent 58%) !important;
}
html[data-theme="dark"] img,
html[data-theme="dark"] iframe{ color-scheme: dark; }

/* shared top nav (injected by chrome.js on the app surfaces) */
.djs-nav{ position:sticky; top:0; z-index:50; display:flex; align-items:center; gap:6px;
  padding:11px clamp(16px,4vw,34px); background:color-mix(in srgb, var(--canvas) 82%, transparent);
  backdrop-filter:saturate(1.4) blur(10px); -webkit-backdrop-filter:saturate(1.4) blur(10px);
  border-bottom:1px solid var(--line); }
.djs-nav .djs-brand{ font-weight:800; font-size:14px; letter-spacing:-.02em; color:var(--ink); margin-right:6px; white-space:nowrap; }
.djs-nav .djs-brand b{ color:var(--accent); }
.djs-nav a.djs-link{ font-size:13px; font-weight:600; color:var(--muted); padding:7px 12px; border-radius:9px; transition:all .16s; white-space:nowrap; }
.djs-nav a.djs-link:hover{ background:var(--accent-soft); color:var(--ink); }
.djs-nav a.djs-link.active{ background:var(--accent-soft); color:var(--accent-2); }
.djs-nav .djs-spacer{ flex:1 1 auto; }
.djs-nav .djs-chip{ font-size:12px; font-weight:600; color:var(--muted); padding:6px 11px; border:1px solid var(--line); border-radius:20px; white-space:nowrap; }
.djs-toggle{ display:inline-flex; align-items:center; gap:7px; cursor:pointer; border:1px solid var(--line);
  background:var(--card); color:var(--muted); border-radius:20px; padding:6px 12px; font:inherit; font-size:12px; font-weight:600; transition:all .16s; }
.djs-toggle:hover{ color:var(--ink); border-color:var(--accent-line); }
.djs-toggle .djs-dot{ width:12px; height:12px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
@media(max-width:620px){
  .djs-nav{ gap:2px; padding:9px 12px; overflow-x:auto; }
  .djs-nav a.djs-link{ padding:6px 9px; font-size:12px; }
  .djs-nav .djs-chip{ display:none; }
}

/* free-entry gate overlay (injected by chrome.js when no coach name) */
.djs-gate{ position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:24px;
  background:color-mix(in srgb, var(--canvas) 86%, transparent); backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px); }
.djs-gate .djs-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius,20px);
  box-shadow:var(--shadow); padding:30px 32px; max-width:440px; width:100%; }
.djs-gate .djs-k{ font-size:11px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); margin-bottom:10px; }
.djs-gate h2{ margin:0 0 8px; font-size:23px; font-weight:800; letter-spacing:-.025em; color:var(--ink); }
.djs-gate p{ margin:0 0 18px; font-size:14px; color:var(--muted); line-height:1.55; }
.djs-gate input{ width:100%; box-sizing:border-box; font:inherit; font-size:15px; padding:13px 15px; border:1px solid var(--line);
  border-radius:11px; background:var(--canvas); color:var(--ink); margin-bottom:13px; }
.djs-gate input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
.djs-gate .djs-go{ width:100%; cursor:pointer; border:0; font:inherit; font-weight:700; font-size:15px; color:#fff;
  background:var(--accent); border-radius:11px; padding:13px; transition:all .16s; }
html[data-theme="dark"] .djs-gate .djs-go{ color:#14110a; }
.djs-gate .djs-go:hover{ background:var(--accent-2); }
.djs-gate .djs-skip{ display:block; text-align:center; margin-top:13px; font-size:12.5px; color:var(--faint); cursor:pointer; }
.djs-gate .djs-note{ font-size:11.5px; color:var(--faint); margin-top:14px; line-height:1.5; }

/* marketing nav CTA */
.djs-cta{ display:inline-flex; align-items:center; background:var(--accent); color:#fff; font-weight:700; font-size:13px; padding:8px 15px; border-radius:10px; margin-left:8px; white-space:nowrap; transition:all .16s }
html[data-theme="dark"] .djs-cta{ color:#14110a }
.djs-cta:hover{ background:var(--accent-2) }
@media(max-width:620px){ .djs-mkt .djs-link{ display:none } .djs-mkt .djs-brand{ margin-right:auto } }

/* site-wide footer (injected by chrome.js on every page that loads chrome.js) */
.djs-foot{ margin-top:64px; padding:42px clamp(18px,4vw,40px) 50px; border-top:1px solid var(--line);
  display:grid; grid-template-columns:1.4fr 2fr; gap:32px; background:color-mix(in srgb, var(--canvas) 55%, var(--card)) }
.djs-foot .djs-fbrand .djs-brand{ font-size:16px; font-weight:800; letter-spacing:-.02em; color:var(--ink) }
.djs-foot .djs-fbrand .djs-brand b{ color:var(--accent) }
.djs-foot .djs-fbrand p{ margin:9px 0 0; font-size:12.5px; color:var(--muted); max-width:38ch; line-height:1.55 }
.djs-fgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px }
.djs-ft{ font-size:10.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); margin-bottom:11px }
.djs-fcol a{ display:block; font-size:13px; color:var(--muted); padding:4px 0; transition:color .15s }
.djs-fcol a:hover{ color:var(--accent) }
@media(max-width:680px){ .djs-foot{ grid-template-columns:1fr; gap:26px } }

/* the Automateagile wordmark: orange-to-magenta gradient, the shift logo treatment (placed last so it wins) */
.djs-brand{ font-weight:800; background-image:linear-gradient(95deg, var(--warm-1), var(--warm-2)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.djs-nav .djs-brand b, .djs-foot .djs-fbrand .djs-brand b, .djs-brand b{ -webkit-text-fill-color:transparent; color:transparent; }

@media (prefers-reduced-motion: reduce){ *{ scroll-behavior:auto !important; } }