/* mws-site-kit v0.1.0 | base.css
   ==========================================================================
   Reset, layout container, typography and buttons.
   Depends on tokens.css. Load tokens.css FIRST.

   Nothing in here is per-client. If you are editing this file for one site,
   the change probably belongs in that site's own stylesheet instead.
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink-900);
  font:400 var(--step-0)/1.6 var(--font-body);
  overflow-x:hidden;              /* torn edges and entrance animations
                                     briefly overhang; without this they
                                     produce a horizontal scrollbar on
                                     mobile that nothing explains. */
}

img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}

/* Visible focus, on the accent colour so it is impossible to miss.
   :focus-visible rather than :focus so mouse users do not see rings on
   click, but keyboard users always do. Do not remove this. */
:focus-visible{
  outline:3px solid var(--accent);
  outline-offset:3px;
  border-radius:2px;
}

/* Skip link. Present on every page, visible only when focused. */
.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--ink-950);color:var(--white);
  padding:.75rem 1.1rem;font:700 var(--step-0)/1 var(--font-body);
}
.skip:focus{left:0}

/* ---------- layout container ---------- */
.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:clamp(1.1rem,4vw,2.5rem);
}

/* ---------- typography ---------- */
h1,h2,h3{
  font-family:var(--font-display);
  font-weight:400;                /* display faces ship at one weight;
                                     asking for 700 triggers ugly synthetic
                                     bolding in some browsers. */
  letter-spacing:-.02em;
  line-height:.98;
  margin:0;
  text-transform:uppercase;
}
h1{font-size:var(--step-4)}
h2{font-size:var(--step-3)}
h3{font-size:var(--step-1);letter-spacing:-.01em}

p{margin:0 0 1em;max-width:62ch}   /* 62ch is a readable measure. Long
                                      lines are the most common failure on
                                      a wide desktop marketing page. */

.lede{font-size:var(--step-1);line-height:1.45;color:var(--ink-700)}

/* Eyebrow: the small letterspaced label above a heading, with a rule.
   Used on nearly every section. */
.eyebrow{
  display:flex;align-items:center;gap:.85rem;
  margin:0 0 var(--sp-3);
  font:600 var(--step--1)/1 var(--font-util);
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--brand-500);
}
.eyebrow::before{
  content:'';
  width:clamp(26px,5vw,58px);height:2px;
  background:currentColor;opacity:.6;flex:none;
}

/* Dark sections. Add .on-dark to any band with a dark background and the
   text colours below adjust without per-section overrides. */
.on-dark{color:var(--brand-050)}
.on-dark .eyebrow{color:var(--brand-300)}
.on-dark .lede{color:var(--brand-200)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.95em 1.5em;
  border-radius:3px;
  font:700 var(--step-0)/1 var(--font-body);
  letter-spacing:.01em;
  transition:transform .18s var(--ease-out),
             background .18s,
             box-shadow .18s var(--ease-out);
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}

/* Primary. The hard shadow is what makes it read as a physical button
   rather than a coloured rectangle - it deepens on hover. */
.btn--go{
  background:var(--accent);
  color:var(--ink-950);
  box-shadow:0 4px 0 var(--accent-dk);
}
.btn--go:hover{box-shadow:0 6px 0 var(--accent-dk)}

.btn--line{border:2px solid currentColor;padding:.85em 1.4em}
.btn--sm{padding:.65em 1.05em;font-size:var(--step--1)}

/* ==========================================================================
   REDUCED MOTION

   Global and non-negotiable. This ships in the kit as a default, not as a
   per-site decision. Every animation in patterns.js also checks the same
   media query in JS - CSS alone cannot stop a rAF loop.
   ========================================================================== */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
  html{scroll-behavior:auto}
}