/* JPX Resolve · shared foundation: tokens, reset, type, buttons.
   Studio pages follow the visitor's light/dark preference (html[data-st]).
   +ve pages (html.pv) commit to their own day-to-night look. */
:root{
  --cream:#FAF5EC; --ink:#181410; --coral:#FF4D2E; --amber:#FFAE1A; --peach:#FFE8D6;
  --line:#E2D8C6; --soft:#6B6052; --faint:#9A8E7C; --paper:#FFFDF8;
  --grad:linear-gradient(135deg,#FF4D2E 0%,#FFAE1A 100%);
  --f-display:"Archivo Black","Arial Black",system-ui,sans-serif;
  --f-wide:"Archivo","Helvetica Neue",Arial,sans-serif;
  --f-ui:"IBM Plex Sans",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --f-serif:"IBM Plex Serif",Georgia,"Times New Roman",serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --ease:cubic-bezier(.22,.8,.2,1);
  --r:16px;
  /* studio theme · dark */
  --bg:#0F0D0B; --fg:#EDE6DA; --mute:#9A9082; --sub:#C9C0B2;
  --hair:rgba(237,230,218,.13); --line-a:rgba(237,230,218,.24);
  --mk-tile:#1B1815; --mk-ink:#EDE6DA; --strand:237,230,218;
  --coral-ink:#B8300D; /* coral for small text on light grounds (4.5:1) */
  --coral-t:var(--coral);
  color-scheme:dark;
}
:root[data-st="light"]{
  --bg:#F3EEE5; --fg:#181410; --mute:#6B6052; --sub:#463D33;
  --hair:rgba(24,20,16,.12); --line-a:rgba(24,20,16,.22);
  --mk-tile:#FFFDF8; --mk-ink:#181410; --strand:24,20,16;
  --coral-t:var(--coral-ink);
  color-scheme:light;
}
html.pv{color-scheme:light}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--f-ui);font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;
  transition:background-color .6s var(--ease),color .6s var(--ease)}
html.pv body{background:var(--cream);color:var(--ink)}
img,svg,canvas{max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
a{color:inherit}
h1,h2,h3,p,figure,blockquote,dl,dd{margin:0}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:6px}
::selection{background:var(--amber);color:var(--ink)}

.wrap{max-width:1240px;margin-inline:auto;padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}
.eyebrow{font:500 12px/1.2 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;display:flex;gap:10px;align-items:center}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:100;padding:10px 16px;border-radius:999px;background:var(--amber);color:var(--ink);font-weight:600;text-decoration:none;transition:top .3s}
.skip:focus{top:12px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;border-radius:999px;
  font:600 15px var(--f-ui);text-decoration:none;white-space:nowrap;
  transition:transform .45s var(--ease),background .3s,border-color .3s,box-shadow .45s var(--ease),color .3s}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn svg{width:16px;height:16px;flex:none}
.btn-sm{min-height:44px;padding:0 18px;font-size:14px}
.btn-fg{background:var(--fg);color:var(--bg)}
.btn-line{border:1px solid var(--line-a);color:var(--fg)}
.btn-line:hover{border-color:var(--fg)}
.btn-ink{background:var(--ink);color:var(--cream)}
.btn-grad{background:var(--grad);color:var(--ink);box-shadow:0 14px 30px -12px rgba(255,77,46,.55)}
.btn-grad:hover{box-shadow:0 20px 40px -14px rgba(255,77,46,.7)}
.btn-ghost{border:1px solid rgba(24,20,16,.2);color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink)}

/* The brand mark. Colours come from the theme tokens. */
.mark{width:30px;height:30px;flex:none;border-radius:7px;box-shadow:inset 0 0 0 1px var(--hair)}
.mark .t{fill:var(--mk-tile)}
.mark .i{stroke:var(--mk-ink)}

/* Analytics notice (EEA, UK, Switzerland only): a light card in every theme. */
.cbar{position:fixed;z-index:95;left:16px;right:16px;bottom:max(16px,env(safe-area-inset-bottom,0px));max-width:620px;margin-inline:auto;
  display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;padding:16px 18px;border-radius:var(--r);
  background:#FFFDF8;color:#181410;border:1px solid #E2D8C6;box-shadow:0 24px 60px -24px rgba(24,20,16,.45);
  font-size:14.5px;line-height:1.5;animation:cbin .5s var(--ease) both}
.cbar p{flex:1 1 280px;margin:0}
.cbar a{color:#181410;text-underline-offset:3px}
.cbar-acts{display:flex;gap:8px}
.cbar .btn-line{border-color:rgba(24,20,16,.25);color:#181410}
.cbar .cbar-yes{background:#181410;color:#FAF5EC}
.cbar.out{opacity:0;transform:translateY(12px);transition:opacity .35s,transform .35s}
@keyframes cbin{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0ms!important;transition-duration:.01ms!important;transition-delay:0ms!important}
}
