/* =============================================================================
   Metropolis — design system, faithful to the Steep.standalone reference.
   The visual design lives in INLINE styles on elements (as in the reference); this
   file holds only fonts, the base reset, scrollbar, and the stp-* interaction classes.
   Palette: ink #37352F (warm, with rgba opacities) · togrejsereuropa rust #b06a3a /
   wash #F8ECDF · silvertray blue #487CA5 / wash #E9F3F7 · dark CTA #191919.
   ============================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600&family=Inter:wght@400;500;600&display=swap');

*{box-sizing:border-box;}
html,body{margin:0;height:100%;}
body{
  background:#fff;color:#37352F;
  font-family:'Inter',system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;
}
button,input{font-family:inherit;}
a{color:inherit;text-decoration:none;}
:focus-visible{outline:2px solid #37352F;outline-offset:2px;border-radius:5px;}

/* custom scrollbar (reference) */
.stp-scroll::-webkit-scrollbar{width:10px;height:10px;}
.stp-scroll::-webkit-scrollbar-thumb{background:rgba(55,53,47,0.16);border-radius:8px;border:3px solid transparent;background-clip:content-box;}
.stp-scroll::-webkit-scrollbar-thumb:hover{background:rgba(55,53,47,0.28);background-clip:content-box;}

.stp-lgn::placeholder{color:rgba(255,255,255,0.34);}
.stp-tnum{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1,"cv11" 1;}

/* interaction transitions (reference) */
.stp-row{transition:background .16s cubic-bezier(.2,0,0,1),transform .16s cubic-bezier(.2,0,0,1);}
.stp-row:hover{background:rgba(55,53,47,0.05) !important;transform:translateX(2px);}
.stp-nav{transition:background .12s ease;}
.stp-nav:hover{background:rgba(55,53,47,0.06);}
.stp-pop{transition:background .12s ease;}
.stp-pop:hover{background:rgba(55,53,47,0.05);}
.stp-cmpcard{transition:box-shadow .24s cubic-bezier(.2,0,0,1),transform .24s cubic-bezier(.2,0,0,1);}
.stp-cmpcard:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(15,15,15,.05),0 12px 26px rgba(15,15,15,.07);}
/* content-card hover lift (detail/comparison cards) — !important overrides the inline base shadow */
.stp-card{transition:transform .22s cubic-bezier(.2,0,0,1),box-shadow .22s cubic-bezier(.2,0,0,1);will-change:transform;}
.stp-card:hover{transform:translateY(-3px);box-shadow:0 2px 4px rgba(15,15,15,.05),0 16px 32px rgba(15,15,15,.10) !important;}
.stp-btn{transition:background .16s ease,transform .14s ease,box-shadow .16s ease;}
.stp-btn:hover{background:#000 !important;box-shadow:0 3px 12px rgba(15,15,15,.18);}
.stp-btn:active{transform:translateY(.5px);}
.stp-cta{transition:box-shadow .18s ease,transform .14s ease;}
.stp-cta:hover{box-shadow:0 6px 18px rgba(216,148,106,.4);transform:translateY(-1px);}
.stp-cta:active{transform:translateY(0);}
.stp-link{transition:opacity .15s ease;cursor:pointer;}
.stp-link:hover{opacity:.62;}
/* list controls: bureau filter trigger + density toggle */
.stp-pick{transition:background .15s ease,box-shadow .15s ease;}
.stp-pick:hover{background:rgba(55,53,47,0.04);box-shadow:inset 0 0 0 1px rgba(55,53,47,0.22) !important;}
.stp-seg{transition:background .2s cubic-bezier(.2,0,0,1),color .2s ease,box-shadow .2s ease;}
/* stat cards lift; large content cards stay flat (reference interaction model) */
.stp-statcard{transition:transform .2s cubic-bezier(.2,0,0,1),box-shadow .2s cubic-bezier(.2,0,0,1),border-color .2s ease;}
.stp-statcard:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(15,15,15,.05),0 8px 18px rgba(15,15,15,.06) !important;border-color:rgba(55,53,47,0.16) !important;}
/* row highlight (inclusions, hotels, diff/coverage rows) — bleeds to card edge via negative margin */
.stp-irow{transition:background .14s ease;}
.stp-irow:hover{background:rgba(55,53,47,0.04) !important;}
/* agency chip + meta tags */
.stp-chip{transition:box-shadow .15s ease,filter .15s ease;}
.stp-chip:hover{box-shadow:inset 0 0 0 1px rgba(55,53,47,0.18);filter:brightness(0.975);}
.stp-tag{transition:background .14s ease;cursor:default;}
.stp-tag:hover{background:rgba(55,53,47,0.1) !important;}
/* sync pill spinner */
.stp-spin{display:inline-block;animation:stp-rot 1s linear infinite;}
@keyframes stp-rot{to{transform:rotate(360deg);}}
@keyframes stpPop{from{opacity:0;transform:scale(0.97) translateY(6px);}to{opacity:1;transform:scale(1) translateY(0);}}

/* entrance stagger is applied via WAAPI in JS; reduced-motion users get content immediately */
@media(prefers-reduced-motion:reduce){
  .stp-row,.stp-nav,.stp-pop,.stp-cmpcard,.stp-card,.stp-btn,.stp-cta,.stp-link,
  .stp-pick,.stp-seg,.stp-statcard,.stp-irow,.stp-chip,.stp-tag{transition:none;}
  .stp-card:hover,.stp-cmpcard:hover,.stp-statcard:hover{transform:none;}
  .stp-spin{animation:none;}
}