/* Poppins is the only family, weights 400 to 800. Self-hosted woff2 copied from the AFW hero bundle (Google Fonts build), latin + latin-ext. */
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/poppins-400-latin-ext.woff2") format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/poppins-400-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:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url("/assets/fonts/poppins-500-latin-ext.woff2") format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url("/assets/fonts/poppins-500-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:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url("/assets/fonts/poppins-600-latin-ext.woff2") format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url("/assets/fonts/poppins-600-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:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url("/assets/fonts/poppins-700-latin-ext.woff2") format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url("/assets/fonts/poppins-700-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:'Poppins';font-style:normal;font-weight:800;font-display:swap;src:url("/assets/fonts/poppins-800-latin-ext.woff2") format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:800;font-display:swap;src:url("/assets/fonts/poppins-800-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}
/* Decorative quote marks only (customer quotes scene). Never for text. */
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:800;font-display:swap;src:url("/assets/fonts/playfair-800-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}

/* Agents for Work colour. AFW is blue only (ruled 20 Oct 2026).
   Millwater green #14876B/#45DBA4 and lilac #C3A1F8/#7050AC belong to other offers: never use them here. */
:root{
/* core */
--ink:#05080d;            /* text on light, ground for dark bands */
--paper:#f7f7f5;          /* light ground */
--white:#ffffff;          /* cards */
--blue-deep:#1e46b4;      /* accent on light: buttons, active tabs, ticks, eyebrows, headline lead/tail */
--blue:#4d7fff;           /* accent on dark grounds; arrow glyphs on light */

/* light ground literals */
--light-tx:#05080d;
--light-tx2:rgba(5,8,13,0.65);
--light-ln:rgba(5,8,13,0.14);
--light-card:#ffffff;
/* dark ground literals */
--dark-tx:#ffffff;
--dark-tx2:rgba(255,255,255,0.72);
--dark-ln:rgba(255,255,255,0.16);
--dark-card:rgba(255,255,255,0.04);

/* semantic (default = light ground). .dark re-points these; see base/grounds.css */
--bg:var(--paper);
--tx:var(--light-tx);
--tx2:var(--light-tx2);
--ln:var(--light-ln);
--cardbg:var(--light-card);
--acc:var(--blue-deep);
--on-acc:#ffffff;         /* text/glyph on a solid accent fill */
--arrow:var(--blue);      /* arrow glyph in secondary links */

/* price matrix (hero slide 07) */
--price-head-ind:#4466d4;
--price-head-team:#1e3a96;
--price-col:#f6f8fc;

/* inside product mockups only: they imitate real software */
--ui-screen:#f7f8fa;
--ui-sidebar:#eef0f4;
--ui-sidebar-rule:#dfe1e5;
--ui-row-active:#e2e4e8;
--ui-text:#1d1f22;
--ui-meta:#6d6f73;
--ui-icon:#37393d;
--ui-placeholder:#888a8e;
--ui-border:#d7d9dd;
--ui-input-border:#dddfe3;
--ui-bubble-me:#e6e8ec;
--ui-titlebar:#e7e9ec;
--ui-online:#2fbf8a;
--ui-idle:#c2c4c8;
--ui-device:#0d0f12;
--ui-device-edge:#3a3d42;
--avatar-lead:#1e46b4;
--avatar-2:#2b2f36;
--avatar-3:#4a4f57;
--avatar-4:#5b6170;
--chip-done-bg:rgba(20,135,107,0.12);
--chip-done-fg:#0d6b52;
--file-doc:#4285f4;
--file-sheet:#0f9d58;
--traffic-red:#ff5f57;
--traffic-amber:#febc2e;
--traffic-green:#28c840;
--ui-hold-border:#d2d4d8;
--ui-doc-bg:#eceef1;
--ui-doc-bar:#f6f7f9;
--ui-doc-rule:#dcdee2;
--ui-doc-title:#55585e;
--ui-browser-bg:#f4f5f7;
--ui-note-meta:#5b6170;
}

/* Poppins only. Headlines 800 with tight tracking; eyebrows 600 uppercase 0.18em. */
:root{
--font-sans:'Poppins',system-ui,sans-serif; /* @kind font */
--font-display:'Poppins',system-ui,sans-serif; /* @kind font */
--font-quote:'Playfair Display',Georgia,serif; /* @kind font */  /* decorative quote marks only */

--fs-hero:clamp(44px,4.2vw,60px); /* @kind font */       /* hero headline */
--fs-hero-long:clamp(36px,3.3vw,48px); /* @kind font */  /* long hero headline */
--fs-h1:64px; /* @kind font */          /* page h1 */
--fs-cta:44px; /* @kind font */         /* CTA band */
--fs-h2:38px; /* @kind font */          /* section h2 */
--fs-h3:22px; /* @kind font */
--fs-stat:52px; /* @kind font */        /* stat figures */
--fs-lede:19px; /* @kind font */        /* lede / hero description */
--fs-body-lg:16px; /* @kind font */
--fs-body:14px; /* @kind font */
--fs-button:16px; /* @kind font */
--fs-tab:16px; /* @kind font */
--fs-sm:12px; /* @kind font */
--fs-eyebrow-lg:15px; /* @kind font */  /* hero eyebrow */
--fs-eyebrow:13px; /* @kind font */
--fs-micro:10px; /* @kind font */

--fw-regular:400; /* @kind font */
--fw-medium:500; /* @kind font */
--fw-semi:600; /* @kind font */
--fw-bold:700; /* @kind font */
--fw-black:800; /* @kind font */

--lh-tight:1; /* @kind other */
--lh-head:1.1; /* @kind other */
--lh-lede:1.6; /* @kind other */
--lh-body:1.55; /* @kind other */

--track-hero:-0.035em; /* @kind other */
--track-tight:-0.02em; /* @kind other */
--track-tab-num:0.12em; /* @kind other */
--track-micro:0.16em; /* @kind other */
--track-eyebrow:0.18em; /* @kind other */
}
@media (max-width:810px){:root{--fs-h1:48px; /* @kind font */--fs-cta:36px; /* @kind font */--fs-h2:30px; /* @kind font */--fs-stat:44px; /* @kind font */--fs-lede:17px}}
@media (max-width:390px){:root{--fs-h1:34px; /* @kind font */--fs-cta:30px; /* @kind font */--fs-h2:24px; /* @kind font */--fs-stat:36px; /* @kind font */--fs-lede:16px}}

/* Zero radius everywhere (house rule 1). Device mockups are the only exception. */
:root{
--sp-1:4px; /* @kind spacing */--sp-2:8px; /* @kind spacing */--sp-3:12px; /* @kind spacing */--sp-4:16px; /* @kind spacing */--sp-5:20px; /* @kind spacing */--sp-6:26px; /* @kind spacing */--sp-7:34px; /* @kind spacing */--sp-8:44px; /* @kind spacing */--sp-9:56px; /* @kind spacing */--sp-10:80px; /* @kind spacing */
--gutter:18px; /* @kind spacing */
--section-pad-x:56px; /* @kind spacing */
--section-pad-y:40px; /* @kind spacing */
--hero-pad-x:120px; /* @kind spacing */
--hero-gap:80px; /* @kind spacing */
--hero-graphic-w:650px; /* @kind spacing */
--nav-h:104px; /* @kind spacing */
--maxw:1440px; /* @kind spacing */
--bp-tablet:810px; /* @kind other */
--bp-phone:390px; /* @kind other */

--radius:0; /* @kind radius */
--radius-device:44px; /* @kind radius */   /* phone body */
--radius-screen:40px; /* @kind radius */   /* phone screen */
--radius-window:10px; /* @kind radius */   /* desktop window */
--radius-bubble:14px; /* @kind radius */   /* chat bubble, desktop composer */
--radius-control:8px; /* @kind radius */   /* in-app buttons and chips */

--bracket:44px; /* @kind spacing */
--bracket-inset:10px; /* @kind spacing */
--bracket-stroke:2px; /* @kind spacing */
--bevel:3px; /* @kind spacing */

--btn-h:56px; /* @kind spacing */
--btn-pad-x:30px; /* @kind spacing */
--tab-h:96px; /* @kind spacing */
--row-h:44px; /* @kind spacing */
}
@media (max-width:810px){:root{--section-pad-x:28px; /* @kind spacing */--section-pad-y:28px; /* @kind spacing */--hero-pad-x:28px; /* @kind spacing */--hero-gap:40px; /* @kind spacing */--nav-h:84px;--tab-h:76px}}
@media (max-width:390px){:root{--section-pad-x:16px; /* @kind spacing */--section-pad-y:22px; /* @kind spacing */--hero-pad-x:16px; /* @kind spacing */--nav-h:64px}}

/* Motion tells the story of a crew at work. Err slower. */
:root{
--t-fast:120ms; /* @kind other */
--t-base:200ms; /* @kind other */
--t-msg:300ms; /* @kind other */          /* chat message in */
--t-fade:450ms; /* @kind other */         /* slide and scene fades */
--t-slow:700ms; /* @kind other */
--ease:cubic-bezier(.4,0,.2,1); /* @kind other */
--ease-drop:cubic-bezier(.2,.9,.3,1.15); /* @kind other */  /* quote cards dropping in */

--step:2100ms; /* @kind other */          /* one scene step */
--hold:3000ms; /* @kind other */          /* side graphic appears after this hold */
--cta-delay:1000ms; /* @kind other */     /* CTA follows the graphic */
--tail-delay:1200ms; /* @kind other */    /* blue tail phrase types in */
--hover-brightness:1.12; /* @kind other */

/* shadows: product mockups and dropped notes only. Site chrome is flat. */
--shadow-card:0 12px 32px rgba(0,0,0,0.18); /* @kind shadow */
--shadow-window:0 14px 34px -18px rgba(5,8,13,0.3); /* @kind shadow */
--shadow-window-soft:0 12px 32px -18px rgba(5,8,13,0.25); /* @kind shadow */
--shadow-device:0 0 0 1px #3a3d42,0 24px 48px -18px rgba(5,8,13,0.4); /* @kind shadow */
--shadow-page:0 0 0 1px rgba(5,8,13,0.06),0 6px 18px -8px rgba(5,8,13,0.2); /* @kind shadow */
--shadow-note:0 10px 24px -14px rgba(5,8,13,0.35); /* @kind shadow */
--inset-hi:inset 0 1px 0 rgba(255,255,255,0.18); /* @kind shadow */

/* blue cloud: dark grounds only */
--cloud-blue:radial-gradient(920px 520px at 40% 45%,rgba(40,80,190,0.85) 0%,rgba(22,50,130,0.6) 34%,transparent 74%); /* @kind other */
--cloud-stage:radial-gradient(60% 55% at 70% 30%,rgba(77,127,255,0.28),rgba(77,127,255,0) 70%); /* @kind other */
--cloud:none; /* @kind other */ /* @kind other */
}

/* Two grounds. Put .light or .dark on a section; everything inside reads --tx/--tx2/--ln/--cardbg/--acc. */
.light{--bg:var(--paper);--tx:var(--light-tx);--tx2:var(--light-tx2);--ln:var(--light-ln);--cardbg:var(--light-card);--acc:var(--blue-deep);--on-acc:#ffffff;--arrow:var(--blue);--cloud:none;color:var(--tx)}
.dark{--bg:var(--ink);--tx:var(--dark-tx);--tx2:var(--dark-tx2);--ln:var(--dark-ln);--cardbg:var(--dark-card);--acc:var(--blue);--on-acc:var(--ink);--arrow:var(--blue);--cloud:var(--cloud-blue);color:var(--tx)}

*,*::before,*::after{box-sizing:border-box}
*{border-radius:0}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-sans);-webkit-font-smoothing:antialiased}
a{color:var(--acc);text-decoration:none}
a:hover{opacity:.85}
button{font-family:inherit}
img{max-width:100%}

/* Shared keyframes. Components reference these by name. */
@keyframes afwBar{from{width:0}to{width:100%}}
@keyframes afwFade{from{opacity:0}to{opacity:1}}
@keyframes afwRise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes afwIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes afwWave{0%{transform:scaleY(.25)}100%{transform:scaleY(1)}}
@keyframes afwDot{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes afwPulse{0%{transform:scale(1);opacity:.5}100%{transform:scale(2);opacity:0}}
@keyframes afwDrop{0%{opacity:0;transform:translateY(-260px) rotate(var(--r0,0deg))}70%{opacity:1;transform:translateY(8px) rotate(var(--r,0deg))}100%{opacity:1;transform:translateY(0) rotate(var(--r,0deg))}}
/* Reduced motion: every animation lands on its final frame. Components also stop their step clocks. */
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:1ms!important;animation-delay:0ms!important;animation-iteration-count:1!important;transition-duration:1ms!important}}


body{margin:0;background:var(--paper)}a{color:var(--acc)}a:hover{opacity:.85}