/* =====================================================================
   DART WEB DESIGN SYSTEM, applied to every page of dartmarketing.ai
   Loaded last on each page so it wins over the page's own CSS.
   Source of truth: DESIGN-SYSTEM.md and dart-tokens.css (same folder).
   Purple and pink only: no orange anywhere on the site.
   ===================================================================== */
:root{
  --font:'Satoshi',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
  --t-display:clamp(40px,6.4vw,100px);--t-h1:clamp(38px,5vw,66px);--t-h2:clamp(32px,3.6vw,52px);--t-h3:clamp(24px,2.2vw,32px);--t-h4:clamp(18px,1.4vw,21px);
  --t-lead:clamp(17px,1.75vw,25px);--t-body:clamp(16px,1.2vw,19px);--t-small:15px;--t-caption:14px;--t-micro:11px;
  --lh-display:1.1;--lh-h:1.08;--lh-h3:1.2;--lh-lead:1.4;--lh-body:1.5;--lh-small:1.45;
  --ls-h:-.05em;--ls-h3:-.03em;--ls-lead:-.02em;--ls-body:-.01em;--ls-micro:.32em;
  --c-bg:#000;--c-bg2:#050508;--c-field:#0e0e11;--c-text:#fff;--c-text2:rgba(255,255,255,.55);--c-text3:rgba(255,255,255,.38);--c-text4:rgba(255,255,255,.22);
  --c-line:rgba(255,255,255,.14);--c-line2:rgba(255,255,255,.25);
  --p:#B71CED;--m:#E0449C;--v:#8B5CF6;--red:#EF4335;
  --gtext:linear-gradient(95deg,#8B5CF6 0%,#B71CED 45%,#E0449C 100%);
  --gmono:linear-gradient(180deg,#fff 50%,#2d2d2d 113.5%);
  /* heading fills, exactly the homepage: the hero gradient for page titles, the section gradient for h2 */
  --hfill:linear-gradient(180deg,#fff 48%,#3a3a3a 115%);
  --hfill-sh:linear-gradient(180deg,#fff 50%,#2d2d2d 113.5%);
  --hfill-light:linear-gradient(180deg,#0B0B0F 48%,#9a9aa2 115%);
  --hfill-img:linear-gradient(180deg,#fff 48%,#8e8e96 115%);
  --glow:rgba(183,28,237,.35);
  /* the pages' own variables, mapped onto the system */
  --void:#000;--bg:#000;--ink:#fff;--line:rgba(255,255,255,.14);
  --grad:linear-gradient(90deg,#8B5CF6 0%,#B71CED 45%,#E0449C 100%);
  --grad135:linear-gradient(135deg,#8B5CF6 0%,#B71CED 45%,#E0449C 100%);
}
html{background:#000;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
body{font-family:var(--font);font-weight:500;font-synthesis:none}
button,input,select,textarea,optgroup{font-family:inherit}

/* ---- every heading: the homepage hero style ----
   Satoshi Medium, tight tracking, white fading to grey. Size stays with each page (it depends on the length). */
:is(h1,h2,h3,h4,h5,h6):not(#gn *,#mm *,#fly *,#footer *){font-family:var(--font);font-weight:500}
/* the page title (h1, the big display line) gets exactly the homepage hero look: Satoshi Medium, -.05em, line-height 1.22, white fading to grey over the whole heading */
:is(h1,.dsp,.crmvd):not(#gn *,#mm *,#fly *,#footer *){font-weight:500;letter-spacing:var(--ls-h);line-height:1.22;text-wrap:balance;text-shadow:none;
  background:var(--hfill);background-size:100% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  padding-right:.2em;padding-bottom:.18em}
/* section headings: the homepage section-heading look */
h2:not(#gn *,#mm *,#fly *,#footer *){letter-spacing:var(--ls-h);line-height:1.12;text-wrap:balance;
  background:var(--hfill-sh);background-size:100% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;padding-bottom:.1em}
:is(h3,h4,h5,h6):not(#gn *,#mm *,#fly *,#footer *){letter-spacing:var(--ls-h3);line-height:var(--lh-h3)}
/* a heading that sits on one of the light sections: the same look in dark ink */
:is(h1,h2,.dsp).ds-light:not(#gn *,#mm *,#fly *,#footer *){background:var(--hfill-light);background-size:100% 100%;-webkit-background-clip:text;background-clip:text}
/* a heading over a photo or video: the same fade, kept bright enough to read on the picture */
:is(h1,h2,.dsp,.crmvd).ds-img:not(#gn *,#mm *,#fly *,#footer *){background:var(--hfill-img);background-size:100% 100%;-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 2px 14px rgba(0,0,0,.55))}
/* a word inside a heading that has its own colour keeps it */
:is(h1,h2,.dsp,.crmvd):not(#gn *,#mm *,#fly *,#footer *) *{-webkit-text-fill-color:currentColor}

/* ---- headings: never more than two lines, the white to grey fade drawn on each line ----
   Each h1 and h2 wraps its text in an inline <ds-fit>. --fit is measured per heading at build time: the largest size at which the
   text breaks into two lines inside the heading's own width. The page's size stays the upper limit, so short headings are unchanged.
   The fade is painted on every line fragment separately (box-decoration-break: clone), over the font's full height, so ascenders,
   dots and descenders always sit inside it and nothing is cut. Small headings (data-plain) are solid, without the fade. */
:is(h1,h2,.dsp,.crmvd):has(>ds-fit):not(#gn *,#mm *,#fly *,#footer *){container-type:inline-size;background:none!important;line-height:0;text-wrap:balance}
:is(h1,h2,.dsp,.crmvd):has(>ds-fit[data-nc]):not(#gn *,#mm *,#fly *,#footer *){container-type:normal}
h1:has(>ds-fit:not([data-nc])):not(#gn *,#mm *,#fly *,#footer *){max-width:none}
ds-fit{display:inline;letter-spacing:var(--ls-h);font-size:max(var(--fmin),min(1em,calc(100cqi * var(--fit,1))));
  --lfill:linear-gradient(180deg,#fff 38%,#8e8e95 100%);background:var(--lfill);
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
ds-fit[data-nc]{font-size:1em}
h1>ds-fit{--fmin:.45em;line-height:1.22}
h2>ds-fit{--fmin:.62em;line-height:1.12}
.ds-light>ds-fit{--lfill:linear-gradient(180deg,#0B0B0F 38%,#6b6b74 100%)}
.ds-img>ds-fit{--lfill:linear-gradient(180deg,#fff 38%,#cfcfd5 100%)}
ds-fit[data-plain]{background:none;color:#fff;-webkit-text-fill-color:#fff}
.ds-light>ds-fit[data-plain]{color:#0B0B0F;-webkit-text-fill-color:#0B0B0F}
/* small numbered headings laid out as a row (legal pages): solid, no fade */
:is(h1,h2).ds-plain:not(#gn *,#mm *,#fly *,#footer *){background:none;color:#fff;-webkit-text-fill-color:#fff}

/* ---- one standard on every page: the page title, section headings and the line under the title ----
   The same sizes everywhere; a page only chooses whether its title block is left-aligned or centered.
   (The :is(x,#ds_) doubling only raises specificity so these win over each page's own sizes.) */
:root{--ds-title:clamp(40px,5.2vw,76px);--ds-h2:clamp(32px,3.6vw,52px);--ds-h2a:clamp(26px,2.4vw,34px);--ds-lead:clamp(17px,1.35vw,20px)}
:is(h1,#ds_):is(h1,#ds_):not(#gn *,#mm *,#fly *,#footer *){font-size:var(--ds-title);font-weight:500}
:is(h2,#ds_):is(h2,#ds_):has(>ds-fit:not([data-plain])):not(#gn *,#mm *,#fly *,#footer *){font-size:var(--ds-h2);font-weight:500}
/* headings inside an article or a playbook chapter are one step smaller, as in any long read */
:is(.art,.pbs) :is(h2,#ds_):is(h2,#ds_):has(>ds-fit:not([data-plain])):not(#gn *,#mm *,#fly *,#footer *){font-size:var(--ds-h2a)}
/* the line under the page title */
:is(.dl,.ardek,.pbdek,.crmvl,.cshlead,.xst,#ds_):is(.dl,.ardek,.pbdek,.crmvl,.cshlead,.xst,#ds_):not(#gn *,#mm *,#fly *,#footer *){font-size:var(--ds-lead);line-height:1.5;font-weight:500}
/* titles inside cards and links: the same Medium weight as every other heading */
main :is(a,figcaption)>:is(b,strong):not(p *,li p *){font-weight:500}

/* a two-column hero: the title spans both columns, the text and the picture sit side by side under it */
:is(h1,#ds_)[data-span]:not(#gn *,#mm *,#fly *,#footer *){grid-column:1/-1;max-width:none;width:auto}
h1[data-span]+*>:first-child{margin-top:0!important}
:has(>h1[data-span]){align-items:start!important}
/* article titles use the full page width so long titles still fit on two lines at the standard size */
.arhw>:is(h1,#ds_){width:min(1180px,calc(100vw - 48px));max-width:none}

/* ---- main paragraphs, the homepage way: one weight, grey text, the line that matters in white.
   people read the white and move on; search engines and AI read all of it ---- */
main p.hl.hl.hl,main p.dl.dl.dl{color:rgba(255,255,255,.55)!important;font-weight:500!important}
main p.hl.hl.hl em,main p.dl.dl.dl em,main p.dl.dl.dl b,main p.dl.dl.dl strong{font-style:normal!important;font-weight:500!important;color:#fff!important}
/* lightlead: leads inside light sections read dark */
main :is(.enh,.paper,.cxpaper,.zk-light,.cov,.ixtl,[data-light]) p.hl.hl.hl,main :is(.enh,.paper,.cxpaper,.zk-light,.cov,.ixtl,[data-light]) p.dl.dl.dl{color:rgba(11,11,15,.55)!important}
main :is(.enh,.paper,.cxpaper,.zk-light,.cov,.ixtl,[data-light]) p.hl.hl.hl em,main :is(.enh,.paper,.cxpaper,.zk-light,.cov,.ixtl,[data-light]) p.dl.dl.dl em,main :is(.enh,.paper,.cxpaper,.zk-light,.cov,.ixtl,[data-light]) p.dl.dl.dl b,main :is(.enh,.paper,.cxpaper,.zk-light,.cov,.ixtl,[data-light]) p.dl.dl.dl strong{color:#0B0B0F!important}
main p.hl-l.hl-l.hl-l{color:rgba(11,11,15,.5)!important}
main p.hl-l.hl-l.hl-l em{color:#0B0B0F!important}
/* ---- menus: everything Bold; size and colour alone tell the levels apart ----
   menu bar 14px, column titles 13px grey, links 15px light, the big links 25px white */
#gn .gl{font-size:14px;font-weight:700;color:#A9A9B4}
#gn .gl:hover,#gn .gl[aria-expanded="true"]{color:#fff}
#gn .gl:after{background:#fff;opacity:.35}
#gn .gl:hover:after,#gn .gl[aria-expanded="true"]:after{transform:scaleX(1);opacity:.35}
/* the section you are in: white, with the brand line under it at full strength, whatever else is hovered */
#gn .gl[data-current],#gn .gl[aria-current]{color:#fff}
#gn .gl[data-current]:after,#gn .gl[aria-current]:after{transform:scaleX(1);opacity:1;background:var(--grad)}
#gn .talk{font-weight:700}
#fly .fcl h2,#mm .mp2 h2{font-size:13px;font-weight:700;color:#8E8E99}
#fly .fcl:not(.feat) a,#mm .mp2 div:not(.big):not(.mfeat)>a{font-size:15px;font-weight:700;color:#D2D2DA}
#fly .fcl:not(.feat) a:hover,#mm .mp2 div:not(.big):not(.mfeat)>a:hover{color:#fff}
#fly .fcl.big a,#mm .mp2 .big a,#mm .mp1 li a,#mm .mp1 li button{font-weight:700;color:#fff}
#fly .fcl.big a{font-size:25px;line-height:1.2}
/* the page you are on, inside an open menu */
#fly .fcl a[aria-current="page"]{color:#fff}
#fly .fcl a[aria-current="page"]:before{content:"";display:inline-block;width:6px;height:6px;margin:0 8px 0 0;vertical-align:.2em;background:var(--grad)}

/* phone menu: the section and the page you are on */
#mm .mp1 [aria-current]{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent!important}
#mm .mp2 a[aria-current="page"]:before{content:"";display:inline-block;width:6px;height:6px;margin:0 8px 0 0;vertical-align:.2em;background:var(--grad)}
#mm .mtalk{font-weight:700}