/* Articulate tokens v1: "Night field" (Andy, October 13, 2026).
   Dark forest carries every page. Cream appears only as a .sheet, for forms and
   long reading. The dotted grid sits in the page margins and fades behind text.
   Rules and examples: review/site-swarm/BRAND-SYSTEM.md. */

/* Fonts: self-hosted latin subsets, 42 KB in two files. The build preloads both. */
@font-face{font-family:"Plus Jakarta Sans";src:url(/assets/fonts/plus-jakarta-sans-600.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap;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:"Instrument Sans";src:url(/assets/fonts/instrument-sans-variable.woff2) format("woff2");font-weight:400 700;font-style:normal;font-display:swap;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}

/* Tokens */
:root{
  /* Ground and ink. Cream on forest is 13.8:1, muted 7.6:1, faint 5.2:1. */
  --forest:#18201c;--forest-raised:#1f2924;--forest-sunk:#131a16;--cream:#efeadc;
  --bg:var(--forest);--surface:var(--forest-raised);--surface-sunk:var(--forest-sunk);
  --text:var(--cream);--text-muted:#a8b2aa;--text-faint:#86928b;
  --rule:#33403a;--rule-strong:#6b7a71;
  --signal:#e8cf73;--focus:var(--signal);--danger:#ffb4a2;
  /* The cream sheet. Forest on sheet is 14.5:1, muted 5.5:1. */
  --sheet:#f3efe3;--sheet-raised:#fbf8ef;--sheet-sunk:#e9e4d6;--sheet-text:#18201c;--sheet-muted:#56635b;--sheet-rule:#d9d4c5;--sheet-rule-strong:#7d877f;--sheet-danger:#8a3f1b;
  /* The dotted grid */
  --dot:rgb(239 234 220 / .1);--dot-gap:18px;
  /* Product marks sit on their own color. Use the -ink colors for product text on dark (7.7:1 or more). */
  --zenhome:#014751;--zenlink:#0f766e;--zendesign:#7860ab;
  --zenhome-ink:#86c6c3;--zenlink-ink:#62c4b2;--zendesign-ink:#baa8e2;
  --zenhome-tint:#e3eeec;--zenlink-tint:#e0efe9;--zendesign-tint:#ece7f4;
  /* Type */
  --font-head:"Plus Jakarta Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-body:"Instrument Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --text-display:clamp(38px,5vw,68px);--text-h1:clamp(36px,4.4vw,60px);--text-h2:clamp(28px,3.1vw,42px);--text-h3:22px;
  --text-lead:clamp(18px,1.6vw,21px);--text-body:17px;--text-small:14px;--text-label:11px;
  /* Layout */
  --page-width:1240px;--gutter:clamp(16px,4vw,32px);--section-space:clamp(56px,8vw,88px);
  --radius:10px;--radius-control:8px;--radius-sheet:12px;--radius-mark:11px;
  /* Motion: 160 ms for hover and focus, 240 ms for reveals, 12 s or slower for ambient loops */
  --ease:cubic-bezier(.2,.7,.2,1);--quick:160ms;--reveal:240ms;
  /* Names pages used before v1. They follow the tokens above. */
  --ink:var(--text);--muted:var(--text-muted);--paper:var(--bg);--white:var(--surface);--line:var(--rule);--green:#26332c;--accent:#d6904f;
  color-scheme:dark;color:var(--text);background:var(--bg);
  font:400 var(--text-body)/1.6 var(--font-body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale
}
/* A cream surface. Tokens swap, so every component works on it unchanged.
   data-theme=light is the same set for a whole page, for pages not yet moved to dark. */
.sheet,[data-theme=light]{
  --bg:var(--sheet);--surface:var(--sheet-raised);--surface-sunk:var(--sheet-sunk);
  --text:var(--sheet-text);--text-muted:var(--sheet-muted);--text-faint:var(--sheet-muted);
  --rule:var(--sheet-rule);--rule-strong:var(--sheet-rule-strong);--focus:var(--sheet-text);--danger:var(--sheet-danger);
  --dot:rgb(24 32 28 / .08);
  --ink:var(--text);--muted:var(--text-muted);--paper:var(--bg);--white:var(--surface);--line:var(--rule);--green:#dbe2d2;--accent:#ad633e;
  color-scheme:light;color:var(--text)
}
.sheet{background:var(--bg);border-radius:var(--radius-sheet);padding:clamp(22px,4vw,40px);box-shadow:0 1px 0 rgb(255 255 255 / .05),0 24px 60px rgb(0 0 0 / .35)}
[data-theme=light]{background:var(--bg)}
main[data-theme=light]{margin-top:clamp(16px,3vw,32px);padding-inline:clamp(16px,3vw,40px);border-radius:var(--radius-sheet)}

/* Base */
*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg)}
/* body paints its own ground and ink, so the page is dark wherever it is shown; isolation keeps the dotted field above that ground */
body{margin:0;min-height:100vh;position:relative;isolation:isolate;background:var(--bg);color:var(--text)}
/* The dotted grid: full strength in the margins, gone behind the text column. Opt out with body.no-field. */
body::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:radial-gradient(circle,var(--dot) 1px,transparent 1.4px);background-size:var(--dot-gap) var(--dot-gap);--fade-in:max(5%,calc(50% - var(--page-width) / 2 - 40px));--fade-out:max(22%,calc(50% - var(--page-width) / 2 + 160px));-webkit-mask-image:linear-gradient(90deg,#000 0,#000 var(--fade-in),transparent var(--fade-out),transparent calc(100% - var(--fade-out)),#000 calc(100% - var(--fade-in)),#000 100%);mask-image:linear-gradient(90deg,#000 0,#000 var(--fade-in),transparent var(--fade-out),transparent calc(100% - var(--fade-out)),#000 calc(100% - var(--fade-in)),#000 100%)}
body.no-field::before{display:none}
img,video{max-width:100%;height:auto}
a{color:inherit;text-decoration-thickness:1px;text-decoration-color:color-mix(in srgb,currentColor 45%,transparent);text-underline-offset:.3em;transition:text-decoration-color var(--quick) var(--ease)}
a:hover{text-decoration-color:currentColor}
button,input,textarea,select{font:inherit;color:inherit}
button,a,input,textarea,select{-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
[hidden]{display:none!important}

/* Type */
h1,h2,h3,p{margin-top:0}
h1,h2,h3,h4{font-family:var(--font-head);font-weight:600;font-synthesis-weight:none;line-height:1.08;letter-spacing:-.035em;text-wrap:balance}
h1{font-size:var(--text-h1);line-height:1.04;letter-spacing:-.04em}
h2{font-size:var(--text-h2)}
h3{font-size:var(--text-h3);line-height:1.2;letter-spacing:-.02em}
.display{font-size:var(--text-display)}
.eyebrow{font:var(--text-label)/1.5 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted)}
.lead{font-size:var(--text-lead);line-height:1.55;color:var(--text-muted)}
.muted{color:var(--text-muted)}
.caption{font-size:13px;line-height:1.6;color:var(--text-muted)}
.footnote{font:11px/1.6 var(--font-mono);color:var(--text-muted)}

/* Controls. Primary is cream on dark and forest on a sheet; focus is yellow on dark and forest on a sheet. */
button{cursor:pointer;background:none;border:1px solid var(--rule-strong);border-radius:var(--radius-control);padding:10px 17px;transition:background-color var(--quick) var(--ease),border-color var(--quick) var(--ease),color var(--quick) var(--ease)}
button:hover{background:color-mix(in srgb,var(--text) 7%,transparent);border-color:var(--text)}
button[aria-pressed=true]{background:var(--text);color:var(--bg);border-color:var(--text)}
.button{display:inline-flex;align-items:center;justify-content:center;gap:.45em;min-height:44px;padding:10px 18px;border:1px solid var(--rule-strong);border-radius:var(--radius-control);background:transparent;color:var(--text);font:600 15px/1.2 var(--font-body);text-align:center;text-decoration:none;cursor:pointer;transition:background-color var(--quick) var(--ease),border-color var(--quick) var(--ease)}
.button:hover{border-color:var(--text);background:color-mix(in srgb,var(--text) 7%,transparent)}
.button.primary{background:var(--text);color:var(--bg);border-color:var(--text)}
.button.primary:hover{background:color-mix(in srgb,var(--text) 86%,#fff);border-color:color-mix(in srgb,var(--text) 86%,#fff)}
button:disabled,.button[aria-disabled=true]{opacity:.45;cursor:not-allowed}
.text-link{text-decoration:underline;text-decoration-color:color-mix(in srgb,currentColor 45%,transparent);text-underline-offset:.3em}
.text-link:hover{text-decoration-color:currentColor;text-decoration-thickness:2px}
.actions{display:flex;gap:12px;flex-wrap:wrap}

/* Product marks: each product has its own mark on its own color (review/storyboards/README.md). */
.product-mark{display:inline-grid;place-items:center;flex:none;width:44px;height:44px;border-radius:var(--radius-mark);background:var(--mark,var(--text));box-shadow:inset 0 0 0 1px rgb(255 255 255 / .09)}
.product-mark img{display:block;width:64%;height:64%;max-width:none;object-fit:contain}
.product-mark.zenhome{--mark:var(--zenhome)}.product-mark.zenlink{--mark:var(--zenlink)}.product-mark.zendesign{--mark:var(--zendesign)}
.product-mark.small{width:18px;height:18px;border-radius:5px}
.product-mark.small img{width:70%;height:70%}
.product-link{display:inline-flex;align-items:center;gap:7px}

/* Page frame */
.wrap{width:min(var(--page-width),100% - 2 * var(--gutter));margin-inline:auto}
.skip-link{position:absolute;left:var(--gutter);top:-100px;z-index:100;padding:12px 16px;border-radius:var(--radius-control);background:var(--text);color:var(--bg);font-weight:600;text-decoration:none}
.skip-link:focus{top:12px}

/* Header. The Articulate mark is inlined by the build so it takes currentColor. */
.site-head{position:relative;z-index:20;border-bottom:1px solid var(--rule)}
.site-head-in{display:flex;align-items:center;gap:clamp(16px,2.4vw,32px);width:min(var(--page-width),100% - 2 * var(--gutter));min-height:76px;margin-inline:auto}
.wordmark{display:inline-flex;align-items:center;gap:10px;color:var(--text);font:600 24px/1 var(--font-head);letter-spacing:-.03em;text-decoration:none;white-space:nowrap}
.wordmark-mark{display:block;flex:none;width:28px;height:28px;margin-top:-2px}
/* The header's roll-out box: the ring at the start, "Articulate." at the end, capitals centred. Its size is fixed, so nothing shifts. */
.wordmark-rollout{display:block;flex:none;height:1.2em;aspect-ratio:5108.4/1200}
.wordmark-rollout>svg{display:block;width:100%;height:100%;overflow:visible}
.site-nav{display:flex;align-items:center;gap:clamp(14px,1.8vw,24px);margin-left:auto;font-size:14px}
.site-nav a{display:inline-flex;align-items:center;gap:7px;padding-block:10px;border-bottom:1px solid transparent;text-decoration:none;white-space:nowrap}
.site-nav a:hover{border-bottom-color:var(--rule-strong)}
.site-nav a[aria-current=page]{border-bottom-color:var(--text)}
.site-head-in>.button{min-height:40px;padding:8px 15px;font-size:14px;white-space:nowrap}
.site-menu{display:none;align-items:center;gap:8px;min-height:44px;padding:0 14px;font-weight:500;font-size:14px}
.site-menu svg{width:16px;height:16px}

/* Footer */
.site-foot{margin-top:var(--section-space);border-top:1px solid var(--rule);font-size:14px}
.site-foot-in{display:grid;grid-template-columns:minmax(0,1fr);gap:28px 40px;width:min(var(--page-width),100% - 2 * var(--gutter));margin-inline:auto;padding-block:52px 40px}
.site-foot-audiences{padding-bottom:24px;border-bottom:1px solid var(--rule)}
.site-foot-audiences>p{margin:0 0 14px;font:11px/1.5 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--text-faint)}
.site-foot-brand p{margin:12px 0 0;max-width:32em;color:var(--text-muted);font-size:15px}
.site-foot nav{display:flex;flex-wrap:wrap;justify-content:flex-start;align-content:start;gap:10px 24px}
.site-foot nav a{display:inline-flex;align-items:center;gap:7px;padding-block:4px;text-decoration:none}
.site-foot nav a:hover{text-decoration:underline}
.site-foot-legal{grid-column:1/-1;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;margin:0;padding-top:18px;border-top:1px solid var(--rule);color:var(--text-muted);font-size:13px}

/* Sections and reading */
.section{padding-block:var(--section-space);border-top:1px solid var(--rule)}
.section h2{max-width:730px}
.intro{max-width:860px;padding:55px 0 32px}
.intro p:not(.eyebrow){font-size:18px;line-height:1.6;max-width:660px;color:var(--text-muted)}
.intro h1{margin:14px 0 23px}
.content-page{max-width:900px;padding-block:65px}
.content-page section{padding:28px 0;border-top:1px solid var(--rule)}
.content-page h1{max-width:850px}
.content-page p{max-width:760px}
.content-page ul{padding-left:23px}
.content-page li{margin:10px 0}
.two-cols{display:grid;grid-template-columns:1fr 1fr;gap:55px}
.deliverables{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.deliverable{padding-top:20px;border-top:1px solid var(--rule)}
.deliverable p{font-size:14px;color:var(--text-muted)}
.deliverable .eyebrow{margin-bottom:17px}
.service-index{padding:24px 0}
.service-index ul{display:flex;flex-wrap:wrap;gap:12px 22px;list-style:none;padding:0}
.service-index a{font-size:14px}

/* Small shared pieces from the first site */
.document{background:var(--surface);padding:26px;border:1px solid var(--rule);border-radius:var(--radius)}
.document header{display:flex;justify-content:space-between;border-bottom:1px solid var(--rule);padding-bottom:16px;margin-bottom:18px}
.document h3{font-size:20px;margin:0 0 9px}
.doc-line{display:flex;justify-content:space-between;gap:18px;padding:14px 0;border-bottom:1px solid var(--rule);font-size:13px}
.doc-line span{color:var(--text-muted)}
.doc-line strong{font-weight:550}
.brief{background:var(--surface);border:1px solid var(--rule);padding:36px;border-radius:var(--radius)}
.brief p{max-width:700px}
.sample-pill{display:inline-block;background:#ebe4d5;border:1px solid #d4c6ad;color:#6b5944;border-radius:20px;padding:4px 11px;font-size:10px;letter-spacing:.04em}
.tag{font:10px var(--font-mono);border:1px solid var(--rule-strong);border-radius:4px;padding:4px 7px;display:inline-block}
.motion-note{display:flex;gap:10px;align-items:center;font-size:11px;color:var(--text-muted);margin:18px 0}
.motion-note::before{content:"";width:6px;height:6px;border:1px solid var(--rule-strong);border-radius:50%}
.stage-visual{overflow:hidden;min-width:0}
.stage-visual svg{display:block;width:100%;height:auto}
.divider{border-top:1px solid var(--rule);margin:25px 0}
.table-scroll{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:14px}
th,td{text-align:left;vertical-align:top;padding:13px;border-bottom:1px solid var(--rule)}
th{font-weight:600;color:var(--text-muted)}
.reveal{animation:reveal var(--reveal) ease-out}
@keyframes reveal{from{opacity:.3;transform:translateY(4px)}to{opacity:1;transform:none}}

/* Small screens: the menu button takes over the nav once the build's script runs; without it the links wrap. */
@media (max-width:1080px){
  .site-head-in{flex-wrap:wrap;column-gap:16px;row-gap:0;min-height:0;padding-block:12px}
  .wordmark{min-height:44px}
  .site-nav{order:3;width:100%;margin:0;flex-wrap:wrap;gap:0 20px;padding-bottom:8px}
  .site-head-in>.button{margin-left:auto}
  .site-head.has-menu .site-menu{display:inline-flex}
  .site-head.has-menu .site-nav{display:none}
  .site-head.has-menu.open .site-nav{display:grid;gap:0;padding:4px 0 16px}
  .site-head.has-menu.open .site-nav a{padding-block:13px;border-bottom:1px solid var(--rule);font-size:16px}
}
@media (max-width:900px){
  .two-cols{grid-template-columns:1fr;gap:25px}
  .deliverables{grid-template-columns:1fr}
  .intro{padding-top:35px}
  .document{padding:20px}
  .site-foot-in{grid-template-columns:1fr}
  .site-foot nav{justify-content:flex-start}
}
@media (max-width:560px){
  .site-head-in{padding-block:10px}
  .wordmark{font-size:21px;gap:9px}
  .wordmark-mark{width:25px;height:25px}
  .site-head.has-menu .site-head-in>.button{display:none}
  .site-head.has-menu .site-menu{margin-left:auto}
  .site-head.has-menu.open .site-head-in>.button{display:inline-flex;order:4;width:100%;margin:0 0 16px;min-height:46px}
  .content-page{padding-block:35px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}