/* ============================================================================
   ATI Design System  (ds.css)
   The single shared interaction + token layer for every web surface
   (marketing, SEO, sign-in, dashboard). Built on Open Props (MIT,
   https://open-props.style) for its professional easing + animation tokens.

   Loaded on every page AFTER the page's own inline <style>. Everything here is
   wrapped in @layer, and unlayered CSS always beats layered CSS, so the pages'
   existing bespoke styles keep winning the base look. This file only ADDS the
   missing layer: consistent hovers, motion, focus, elevation, and tokens. It is
   additive by construction and cannot override a page's static appearance.
   ============================================================================ */
/* self-hosted brand fonts (centralized here) */
@font-face{font-family:"Newsreader";src:url(/fonts/newsreader-400.woff2) format("woff2");font-weight:400;font-display:swap}@font-face{font-family:"Newsreader";src:url(/fonts/newsreader-500.woff2) format("woff2");font-weight:500;font-display:swap}@font-face{font-family:"Newsreader";src:url(/fonts/newsreader-600.woff2) format("woff2");font-weight:600;font-display:swap}@font-face{font-family:"IBM Plex Sans";src:url(/fonts/ibm-plex-sans-400.woff2) format("woff2");font-weight:400;font-display:swap}@font-face{font-family:"IBM Plex Sans";src:url(/fonts/ibm-plex-sans-500.woff2) format("woff2");font-weight:500;font-display:swap}@font-face{font-family:"IBM Plex Sans";src:url(/fonts/ibm-plex-sans-600.woff2) format("woff2");font-weight:600;font-display:swap}@font-face{font-family:"IBM Plex Mono";src:url(/fonts/ibm-plex-mono-400.woff2) format("woff2");font-weight:400;font-display:swap}

@layer op, ati.tokens, ati.base, ati.components, ati.motion;

/* ---- Open Props easings (MIT) — the curves used across the system ---- */
@layer op {
  :root {
    --ease-1: cubic-bezier(.25,0,.5,1);
    --ease-2: cubic-bezier(.25,0,.4,1);
    --ease-3: cubic-bezier(.25,0,.3,1);
    --ease-4: cubic-bezier(.25,0,.2,1);
    --ease-out-2: cubic-bezier(0,0,.50,1);
    --ease-out-3: cubic-bezier(0,0,.3,1);
    --ease-out-4: cubic-bezier(0,0,.1,1);
    --ease-in-out-3: cubic-bezier(.5,0,.5,1);
  }
}

/* ---- Canonical Record-of-Authority tokens + a shared elevation/motion scale ---- */
@layer ati.tokens {
  :root {
    /* canonical page tokens (exact names + values the site renders with) */
    --bg:#F4F5F2; --bg2:#FBFBF9; --card:#FFFFFF; --card2:#F1F2EE;
  --line:rgba(23,25,28,.07); --line2:rgba(23,25,28,.12);
  --ink:#17191C; --ink2:#565C63; --ink3:#60666E;
  --orange:#C8501C; --orange-ink:#B4470F; --orange-soft:rgba(200,80,28,.13);
  --teal:#2E6B4F; --teal-soft:rgba(46,107,79,.13);
  --slate:#4A5568; --slate-soft:rgba(74,85,104,.14);
   
  --serif:"Newsreader","Iowan Old Style",Palatino,Georgia,serif;
  --sans:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --gut:clamp(20px,4vw,60px);
    /* functional additions used by the system */
    --radius: 0; --maxw: 1180px;
    --shadow-1: 0 1px 2px rgba(23,25,28,.06);
    --shadow-2: 0 2px 8px rgba(23,25,28,.09);
    --shadow-3: 0 14px 34px rgba(0,0,0,.07);
    --t-fast: .14s; --t: .22s; --t-slow: .5s;
    --ease: var(--ease-3);
    --red: #B23A2E; --red-soft: rgba(178,58,46,.12);
    /* semantic aliases so either vocabulary resolves */
    --paper: var(--bg); --paper2: var(--bg2); --surface: var(--card); --inset: var(--card2);
  }
}

/* ---- base polish: focus, selection, media, reduced-motion ---- */
@layer ati.base {
  :where(img, svg, video, canvas) { max-width: 100%; }
  ::selection { background: var(--orange-soft); color: var(--ink); }
  :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--orange); outline-offset: 2px; border-radius: 0;
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: .001ms !important; animation-iteration-count: 1 !important;
      transition-duration: .001ms !important; scroll-behavior: auto !important;
    }
  }
}

/* ---- consistent hover + interaction layer on the shared component vocabulary.
        :where() keeps specificity 0 so a page's own base rules always win the
        resting state; these only add transitions + :hover, which pages don't define. */
@layer ati.components {
  :where(.card, .rec, .find, .howcard, .surf, .acc, .cmp, .mdetail, .feat-art, .price, .wz-price, .kpi) {
    transition: transform var(--t) var(--ease-3), box-shadow var(--t) var(--ease-3), border-color var(--t) var(--ease-3);
  }
  @media (hover: hover) {
    :where(.card, .rec, .find, .howcard, .surf, .mdetail, .feat-art):hover {
      transform: translateY(-3px); box-shadow: var(--shadow-3); border-color: var(--line2);
    }
  }
  /* buttons: subtle lift + press, no colored glow */
  :where(.btn, .cta a, button.btn, .btn.primary) {
    transition: transform var(--t-fast) var(--ease-3), box-shadow var(--t-fast) var(--ease-3),
                background var(--t-fast) var(--ease-3), filter var(--t-fast) var(--ease-3);
  }
  @media (hover: hover) {
    :where(.btn, .cta a, .btn.primary):hover { transform: translateY(-1px); box-shadow: var(--shadow-2); filter: saturate(1.05); }
  }
  :where(.btn, .cta a, .btn.primary):active { transform: translateY(0); box-shadow: var(--shadow-1); }
  /* arrow links: reveal an underline on hover */
  @media (hover: hover) {
    :where(.lnk, a.go):hover { text-decoration: underline; text-underline-offset: 3px; }
  }
  /* nav links: quiet ink shift */
  :where(.nav a, header a):not(.btn) { transition: color var(--t-fast) var(--ease-3); }
  /* table rows: readable hover wash */
  @media (hover: hover) {
    :where(tbody tr, table tr):hover :where(td) { background: rgba(23,25,28,.022); }
  }
  :where(td, th, tr) { transition: background var(--t-fast) var(--ease-3); }
  /* chips / small badges: firm the border on hover */
  @media (hover: hover) {
    :where(.chip, .evchip, .verb, .tag):hover { border-color: var(--line2); }
  }
  :where(.chip, .evchip, .verb, .tag) { transition: border-color var(--t-fast) var(--ease-3), background var(--t-fast) var(--ease-3); }
  /* inputs: brand focus ring already handled by :focus-visible; add a smooth border */
  :where(input, textarea, select) { transition: border-color var(--t-fast) var(--ease-3), box-shadow var(--t-fast) var(--ease-3); }
}

/* ---- motion: on-scroll reveal via native scroll-driven animation (no JS).
        Guarded by reduced-motion and @supports; an opacity FLOOR (.4) means a
        not-yet-revealed block is only slightly faint, never blank, so content is
        always present even mid-scroll or in unsupported engines. ---- */
@layer ati.motion {
  /* translate-only: content is always full opacity (never faded/blank), it just settles
     up into place as it scrolls in. Restrained, and impossible to look broken. */
  @keyframes ati-rise { from { transform: translateY(15px); } to { transform: none; } }
  @media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
      :where(.card, .rec, .find, .howcard, .surf, .step, .feat-art, .cmp, .mdetail, .acc) {
        animation: ati-rise linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 32%;
      }
    }
  }
}


/* ===== MIGRATED CHROME (nav, footer, buttons, base, logo) — moved here from the
   individual pages so they are defined ONCE. Byte-identical to the originals. ===== */
@layer ati.components {
  

*{box-sizing:border-box}
  

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

body{margin:0;background:var(--bg);color:var(--ink);font:16.5px/1.6 var(--sans);
  font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased;overflow-x:hidden}
  

p{margin:0}
  

a{color:inherit;text-decoration:none}
  

.pad{padding-left:var(--gut);padding-right:var(--gut)}
  

.wrap{max-width:1300px;margin:0 auto}
  


.btn{display:inline-flex;align-items:center;gap:10px;background:var(--orange);color:#fff;
  font:600 15px/1 var(--sans);padding:15px 26px;border-radius:0;border:0;cursor:pointer;
  box-shadow:0 2px 8px rgba(23,25,28,.13);transition:transform .15s,box-shadow .15s}
  

.btn:hover{transform:translateY(-1px);box-shadow:0 1px 2px rgba(23,25,28,.16)}
  

.btn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2}
  

.btn.sm{padding:11px 20px;font-size:14px;border-radius:0}
  

.nav-in{display:flex;align-items:center;justify-content:space-between;height:88px;gap:24px}


.lock{display:flex;align-items:center;gap:16px}


.lock svg{flex:none;width:46px;height:46px}


.lock .wm{font:700 15.5px/1.2 var(--sans);letter-spacing:.15em}


.lock .wm s{display:block;font:400 11.5px/1 var(--sans);letter-spacing:.02em;color:var(--ink3);text-decoration:none;margin-top:6px}
  

.nav-r{display:flex;align-items:center;gap:8px}
  

.nav-r a.t{color:var(--ink2);font:500 14.5px/1 var(--sans);padding:10px 16px;border-radius:0}
  

.nav-r a.t:hover{color:var(--ink);background:rgba(23,25,28,.05)}
  

.blk.alt{background:var(--bg2)}
  

.foot{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:34px}
  

.foot .about .flock{display:flex;align-items:center;gap:16px}
  

.foot .about .flock .fwm{font:700 13px/1.3 var(--sans);letter-spacing:.14em}
  

.foot .about p{color:var(--ink3);font-size:14px;max-width:38ch;margin-top:18px;line-height:1.6}
  

.foot .col h5{font:600 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);margin:0 0 16px}
  

.foot .col a{display:block;color:var(--ink2);font-size:14px;padding:9px 0}
  
.foot .col a:hover{color:var(--ink)}
  

.legal{max-width:1300px;margin:44px auto 0;padding:22px var(--gut) 0;border-top:1px solid var(--line);
  color:var(--ink3);font:12px/1.6 var(--mono);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
}

.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:10px 16px;z-index:100;text-decoration:none;font:600 14px/1 var(--sans)}
.skip:focus{left:8px;top:8px;outline:2px solid var(--orange)}