/* Fonts, design tokens, reset and shared utilities. */

@font-face{font-family:"Aileron";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/aileron-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Aileron";font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/aileron-latin-400-italic.woff2) format("woff2")}
@font-face{font-family:"Aileron";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/aileron-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Aileron";font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/aileron-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Aileron";font-style:normal;font-weight:800;font-display:swap;src:url(../fonts/aileron-latin-800-normal.woff2) format("woff2")}

:root{
  /* colour */
  --paper:#ffffff;
  --ink:#0d0d0d;
  --ink-soft:#6b6f76;                   /* the one grey: secondary text, words not yet lit */
  --rule:var(--ink-soft);
  --tile-bg:var(--card);
  --blue:#1f4fa8;
  --veil:rgba(13,13,13,.42);
  --card:#f6f7f9;                       /* card ground, one step off the paper */
  --line:var(--ink-soft);               /* the writing line under a blank */
  --unlit:var(--ink-soft);              /* statement words not yet scrolled to */
  --on-blue:#ffffff;                    /* text on a blue ground, in both themes */

  /* type: one family, six sizes, nothing in between */
  --face:"Aileron","Helvetica Neue",Arial,sans-serif;
  --fs-1:13px;                         /* labels, nav, captions, meta */
  --fs-2:17px;                         /* body */
  --fs-3:clamp(20px,2.1vw,26px);       /* lead: card text, case steps, results */
  --fs-4:clamp(24px,3vw,36px);         /* statements, list titles */
  --fs-5:clamp(34px,5vw,64px);         /* headlines */
  --fs-6:clamp(40px,8.6vw,124px);      /* section titles in caps */

  /* motion: strong curves, short UI durations */
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  --press:160ms;

  /* layout */
  --gutter:clamp(16px,5vw,96px);
  --measure:clamp(1040px,72vw,1600px);  /* content width; grows on wide screens so big monitors don't get a narrow column */
  --rail-h:46px;
  color-scheme:light dark;
}

/* dark: follows the phone or computer setting. White grounds go black, ink goes white; blue lifts a step so it reads on black */
@media (prefers-color-scheme:dark){
  :root{
    --paper:#0b0b0c;
    --ink:#f2f2f0;
    --ink-soft:#9ea2a9;
    --blue:#4a7be0;
    --veil:rgba(0,0,0,.6);
    --card:#141517;
  }
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0}
body{background:var(--paper);color:var(--ink);font-family:var(--face);font-size:var(--fs-2);line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.locked{overflow:hidden}
img{display:block;max-width:100%}
a{color:inherit}
button{font-family:inherit}
::selection{background:var(--blue);color:var(--on-blue)}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

/* utilities */
.wrap{max-width:calc(var(--measure) + 2*var(--gutter));margin:0 auto;padding-inline:var(--gutter)}
.u{text-decoration:underline;text-decoration-thickness:.06em;text-underline-offset:.12em}
.big{font-weight:800;text-transform:uppercase;letter-spacing:0;line-height:.92;font-size:var(--fs-6);margin:0;text-wrap:balance}
.label{font-weight:700;font-size:var(--fs-1);color:var(--ink-soft);margin:0 0 22px}
.label b{color:var(--blue);font-weight:700}

/* client logos (js/brand.js): one-colour marks that take the surrounding text colour; --logo-h sets the size */
.brand{display:inline-flex;align-items:center;gap:.45em;vertical-align:middle;line-height:1}
.logo{flex:none;display:inline-block;height:calc(var(--logo-h,1em) * var(--h,1));width:calc(var(--logo-h,1em) * var(--h,1) * var(--r,1));background:currentColor;-webkit-mask:var(--src) center/contain no-repeat;mask:var(--src) center/contain no-repeat}
.brand-name{font-weight:800;text-transform:uppercase;letter-spacing:.03em;white-space:nowrap}
.brand-x{font-weight:400;color:var(--ink-soft)}

/* primary button: one style, fully round */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 26px;border-radius:999px;background:var(--ink);color:var(--paper);font-weight:700;font-size:var(--fs-2);text-decoration:none;border:0;cursor:pointer;transition:background-color .2s ease,transform var(--press) var(--ease-out)}
.btn:hover{background:var(--blue);color:var(--on-blue)}

/* press feedback on everything you can tap */
.btn:active,.copy:active,.x:active,.nav-btn:active,.rail button:active,.ws-item:active{transform:scale(.97)}
.row:active .row-head{transform:scale(.99)}

/* section entrances: parts rise in, staggered, once (js/reveal.js turns this on) */
.reveal-ready [data-reveal]{opacity:0;transform:translate3d(0,16px,0)}
.reveal-ready [data-reveal].in{opacity:1;transform:none;transition:opacity .7s var(--ease-out),transform .8s var(--ease-out);transition-delay:calc(var(--d,0) * 70ms)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
}