/* ==========================================================================
   NuEraX — shared stylesheet
   Used by every page. index.html adds its own panel CSS inline.
   ========================================================================== */

/* --- Fonts: self-hosted, latin subset, swap ------------------------------ */
@font-face{
  font-family:'Outfit';
  font-style:normal;
  font-weight:800;
  font-display:swap;
  src:url(fonts/outfit-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;
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400 700;          /* one variable file covers 400–700 */
  font-display:swap;
  src:url(fonts/inter-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;
}

/* --- Tokens -------------------------------------------------------------- */
:root{
  /* brand — the only five colours on this site */
  --orange:#FF7901;           /* brand + the single primary action.
                                 Sampled from the Figma prototype
                                 (NueraX App Working, node 2002-51).
                                 7.2:1 against --black.                     */
  --teal:#0E9B8A;             /* SOLD, won, delivered, verified             */
  --live:#E53935;             /* LIVE pill + final two seconds only         */
  --amber:#E8930C;            /* outbid only                                */
  --black:#141210;            /* warm black, never navy                     */

  /* neutrals derived from the warm black */
  --paper:#FFFFFF;
  --tint:#FBF9F6;
  --ink:#1A1206;
  --body:#3B372F;
  --muted:#6E6960;            /* 5.3:1 on paper                             */
  --rule:#E4E0D8;

  /* on-dark neutrals */
  --on-dark:#FFFFFF;
  --on-dark-muted:#A8A29B;    /* 7.5:1 on --black                           */
  --dark-rule:rgba(255,255,255,.14);

  /* on-orange neutrals — everything on orange is the warm black */
  --on-orange:#141210;        /* 6.1:1 on --orange                          */
  --on-orange-muted:rgba(20,18,16,.85);   /* 5.0:1 on --orange              */
  --orange-rule:rgba(20,18,16,.22);

  /* motion */
  --ease:cubic-bezier(.2,.7,.2,1);
  --dur:420ms;

  /* 8px spacing scale */
  --s1:8px;  --s2:16px; --s3:24px; --s4:32px;
  --s5:40px; --s6:56px; --s7:72px; --s8:96px; --s9:128px;

  --header-h:68px;
}

/* --- Reset --------------------------------------------------------------- */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  font-feature-settings:'tnum' 1,'cv05' 1;   /* tabular figures everywhere */
  font-variant-numeric:tabular-nums;
  background:var(--paper);
  color:var(--body);
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto}
svg{display:block}
::selection{background:var(--orange);color:var(--black)}

.wrap{max-width:720px;margin:0 auto;padding:0 var(--s3)}

/* Skip link — first tab stop on every page */
.skip{
  position:absolute;left:var(--s2);top:-64px;z-index:200;
  background:var(--black);color:#fff;font-size:15px;font-weight:600;
  padding:12px 18px;border-radius:10px;text-decoration:none;
  transition:top 200ms var(--ease);
}
.skip:focus{top:var(--s2);color:#fff}

/* ==========================================================================
   Header — shared shell.
   Default (legal pages): warm black on paper.
   index.html overrides the palette per panel via [data-theme].
   ========================================================================== */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:100;
  height:var(--header-h);
  display:flex;align-items:center;
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  backdrop-filter:saturate(180%) blur(14px);   /* the only blur on the site */
  border-bottom:1px solid var(--rule);
  transition:background var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.site-header > .bar{
  width:100%;max-width:1360px;margin:0 auto;padding:0 var(--s3);
  display:flex;align-items:center;gap:var(--s3);
}

/* logo */
.logo{
  display:inline-flex;align-items:center;gap:10px;
  text-decoration:none;color:var(--ink);
  font-family:'Outfit',system-ui,sans-serif;font-weight:800;
  font-size:21px;letter-spacing:-.03em;line-height:1;
  flex:none;
}
.logo .mark{width:26px;height:26px;flex:none}
.logo .mark path{fill:var(--orange)}
.logo .mark circle{fill:#fff}

/* text nav */
.site-nav{display:flex;align-items:center;gap:var(--s3);margin-left:auto}
.site-nav a{
  font-size:14px;font-weight:500;color:var(--muted);text-decoration:none;
  white-space:nowrap;transition:color 200ms var(--ease);
}
.site-nav a:hover,.site-nav a:focus-visible{color:var(--ink)}
.site-nav a[aria-current="page"]{color:var(--ink);font-weight:600}

/* header pills */
.hdr-actions{display:flex;align-items:center;gap:10px;flex:none}
.pill{
  display:inline-flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:600;line-height:1;
  padding:11px 18px;border-radius:999px;text-decoration:none;
  border:1px solid transparent;white-space:nowrap;
  transition:background 200ms var(--ease),color 200ms var(--ease),
             border-color 200ms var(--ease),transform 200ms var(--ease);
}
.pill:active{transform:translateY(1px)}
.pill--ghost{border-color:var(--rule);color:var(--ink);background:transparent}
.pill--ghost:hover{border-color:var(--ink);color:var(--ink)}
.pill--solid{background:var(--orange);color:var(--black)}
.pill--solid:hover{background:#E66C01;color:var(--black)}

@media (max-width:1240px){
  .site-nav{gap:var(--s2)}
}
@media (max-width:1040px){
  .site-nav{display:none}          /* links stay in the footer on every page */
  .hdr-actions{margin-left:auto}
}
@media (max-width:520px){
  .pill--ghost{display:none}
  .site-header > .bar{padding:0 var(--s2)}
}

/* ==========================================================================
   Legal / content pages — boring on purpose
   ========================================================================== */
main{padding:calc(var(--header-h) + var(--s7)) 0 var(--s2)}

h1{
  font-family:'Outfit',system-ui,sans-serif;font-weight:800;
  font-size:clamp(30px,5vw,40px);line-height:1.08;letter-spacing:-.035em;
  color:var(--ink);margin-bottom:var(--s2);
  text-wrap:balance;
}
h2{
  font-family:'Outfit',system-ui,sans-serif;font-weight:800;
  font-size:21px;line-height:1.25;letter-spacing:-.02em;
  color:var(--ink);margin:var(--s5) 0 10px;
  text-wrap:balance;
}
h3{
  font-size:16.5px;font-weight:700;color:var(--ink);
  margin:var(--s3) 0 6px;letter-spacing:-.01em;
}
p{margin-bottom:var(--s2)}
ul,ol{margin:0 0 var(--s2) 21px}
li{margin-bottom:7px}
a{color:var(--ink);text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{color:var(--orange)}
strong{color:var(--ink);font-weight:600}

.lede{font-size:19px;line-height:1.55;color:var(--body);margin-bottom:var(--s4)}

/* the single hairline under the date line */
.stamp{
  font-size:14.5px;color:var(--muted);
  margin-bottom:var(--s5);padding-bottom:var(--s3);
  border-bottom:1px solid var(--rule);
}

.panel{
  background:var(--tint);border:1px solid var(--rule);border-radius:14px;
  padding:var(--s3) var(--s3) var(--s1);margin:var(--s4) 0;
}
.panel h2,.panel h3{margin-top:0}
.panel p:last-child,.panel ul:last-child,.panel dl:last-child{margin-bottom:0}

.flag{
  border-left:3px solid var(--orange);background:#FFF4E6;
  padding:var(--s2) var(--s3);border-radius:0 10px 10px 0;
  margin:var(--s4) 0;font-size:16px;
}
.flag p:last-child{margin-bottom:0}

.btn{
  display:inline-block;background:var(--orange);color:var(--black);text-decoration:none;
  font-weight:600;font-size:16px;padding:13px 24px;border-radius:10px;margin:4px 0;
  transition:background 200ms var(--ease),transform 200ms var(--ease);
}
.btn:hover{background:#E66C01;color:var(--black)}
.btn:active{transform:translateY(1px)}

dl{margin-bottom:var(--s2)}
dt{color:var(--ink);font-weight:600;margin-top:var(--s2)}
dd{margin:2px 0 0}

table{border-collapse:collapse;width:100%;margin-bottom:var(--s3);font-size:15px}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--rule);vertical-align:top}
th{color:var(--ink);font-weight:600;font-size:14px;letter-spacing:.01em}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{
  border-top:1px solid var(--rule);margin-top:var(--s8);
  padding:var(--s5) 0 var(--s7);font-size:14.5px;color:var(--muted);
}
.site-footer a{color:var(--muted)}
.site-footer a:hover{color:var(--orange)}
.site-footer .links{display:flex;flex-wrap:wrap;gap:10px var(--s3);margin-bottom:var(--s3)}
.site-footer p{margin-bottom:var(--s1)}

/* ==========================================================================
   Focus + motion
   ========================================================================== */
:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:4px}
.site-header[data-theme="orange"] :focus-visible{outline-color:var(--black)}
.site-header[data-theme="dark"]   :focus-visible{outline-color:var(--orange)}

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

/* ==========================================================================
   Small screens
   ========================================================================== */
@media (max-width:600px){
  /* tables scroll inside themselves rather than breaking the column */
  main table{display:block;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  main table tbody{display:table;width:100%;min-width:520px}
}
@media (max-width:520px){
  body{font-size:16px}
  .wrap{padding:0 var(--s2)}
  main{padding-top:calc(var(--header-h) + var(--s5))}
  .lede{font-size:17.5px}
  th,td{padding:9px 10px;font-size:14.5px}
}