@import url('https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:wght@400..800&display=swap');

/* Shared skin for every page except the homepage. October 2026.
   The homepage carries its own styles. This file lays the same quiet look
   over the market pages, the blog, the tools and the privacy notice without
   rewriting each one: Schibsted Grotesk, white and soft grey, ink and acid yellow, and the
   same frosted bar on top. Remove the <link> to this file and the old look
   comes straight back. */

html:root{
  --apple:"Schibsted Grotesk",-apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif;
  --sans:var(--apple);
  --mono:var(--apple);
  --serif:var(--apple);

  /* market pages and privacy */
  --paper:#ffffff;
  --surface:#f5f5f7;
  --ink:#0D0D0C;
  --ink-55:#6e6e73;
  --ink-32:#86868b;
  --rule:#d2d2d7;
  --ghost:#f5f5f7;
  /* --accent is left alone, the market pages already use acid and the blog uses it for grey labels */
  --inv-bg:#000000;
  --inv-fg:#f5f5f7;
  --inv-55:#a1a1a6;
  --inv-32:#86868b;
  --inv-rule:#424245;

  /* blog and tools */
  --bg:#ffffff;
  --bg-card:#f5f5f7;
  --bg-sidebar:#f5f5f7;
  --bg-panel:#f5f5f7;
  --text-1:#0D0D0C;
  --text-2:#6e6e73;
  --text-3:#86868b;
  --border:#d2d2d7;
  --dark:#1d1d1f;
  --dark-card:#000000;
}

html{scroll-padding-top:60px}
body{font-family:var(--apple)!important;-webkit-font-smoothing:antialiased;letter-spacing:-.016em;padding-top:48px}
body *:not(code):not(pre):not(kbd):not(samp){font-family:var(--apple)!important}
::selection{background:#EAFF00;color:#0D0D0C}

/* headings, Apple weights and tracking */
h1,.post-title,.disp{font-weight:700!important;letter-spacing:-.04em!important}
h2,h3{font-weight:700!important;letter-spacing:-.025em!important}

/* the old navs step aside for the shared bar */
body>.nav,div.nav,nav.blog-nav,nav.tool-nav,header.bar{display:none!important}

/* buttons and links turn Apple blue and fully round */
a.btn,.btn,.cta,.sidebar-cta a,.blog-bottom-cta-link,button.primary,.pc-btn{
  border-radius:980px!important}
a.btn,.btn{background:#0D0D0C!important;color:#fff!important;border-color:#0D0D0C!important}
a.btn:hover,.btn:hover{background:#2b2b29!important}
.inv a.btn,.cta-band a.btn,[class*="inv"] a.btn{background:#EAFF00!important;color:#0D0D0C!important;border-color:#EAFF00!important}

/* cards and blocks get the soft Apple radius */
.panel-block img,.blog-sidebar>*,.sidebar-box,.card,.tool-card,.result-card,.panel{border-radius:18px}

/* ================= the shared bar ================= */
.ap-nav{position:fixed;inset:0 0 auto 0;z-index:9000;height:48px;
  background:rgba(250,250,252,.8);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px)}
.ap-nav .in{height:100%;width:min(1024px,100% - 32px);margin:0 auto;display:flex;align-items:center;justify-content:space-between}
.ap-nav .lg{font-size:20px;font-weight:700;letter-spacing:-.045em;color:#0D0D0C!important;text-decoration:none!important;display:inline-flex;align-items:center;gap:9px}
.ap-nav .lm{width:20px;height:20px;overflow:visible}
.ap-nav .lm rect{fill:#0D0D0C;transform-box:fill-box;transform-origin:center}
.ap-nav .lm rect.y{fill:#EAFF00;stroke:#0D0D0C;stroke-width:3}
.ap-nav .lm.play rect{animation:aprip .5s both;animation-delay:calc(var(--n)*70ms)}
@keyframes aprip{0%{transform:scale(1);animation-timing-function:linear}30%{transform:scale(0);animation-timing-function:cubic-bezier(.34,1.7,.64,1)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.ap-nav .lm.play rect{animation:none}}
.ap-nav ul{list-style:none;display:flex;gap:clamp(18px,3vw,38px);align-items:center;margin:0;padding:0}
.ap-nav ul a{font-size:12px!important;letter-spacing:-.01em;color:rgba(0,0,0,.8)!important;text-decoration:none!important;text-transform:none!important;font-weight:400!important}
.ap-nav ul a:hover{color:#000!important}
.ap-nav ul a.nb{background:#0D0D0C;color:#fff!important;padding:4px 12px;border-radius:980px}
.ap-nav ul a.nb:hover{background:#2b2b29}
.ap-nav .bg{display:none;width:44px;height:44px;margin-right:-12px;position:relative;background:none;border:0;cursor:pointer}
.ap-nav .bg i{position:absolute;left:14px;width:17px;height:1.2px;background:#0D0D0C;border-radius:1px;transition:transform .45s cubic-bezier(.32,.72,0,1),top .45s cubic-bezier(.32,.72,0,1)}
.ap-nav .bg i:nth-child(1){top:18px}.ap-nav .bg i:nth-child(2){top:25px}
.ap-open .ap-nav .bg i:nth-child(1){top:21.5px;transform:rotate(45deg)}
.ap-open .ap-nav .bg i:nth-child(2){top:21.5px;transform:rotate(-45deg)}
.ap-sheet{position:fixed;inset:48px 0 0 0;z-index:8999;background:rgba(250,250,252,.97);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  padding:24px 48px;visibility:hidden;opacity:0;transition:opacity .35s cubic-bezier(.28,.11,.32,1),visibility 0s .35s}
.ap-sheet a{display:block;font-size:28px!important;font-weight:700!important;color:#0D0D0C!important;padding:6px 0;text-decoration:none!important;text-transform:none!important;letter-spacing:.007em}
.ap-open .ap-sheet{visibility:visible;opacity:1;transition:opacity .35s cubic-bezier(.28,.11,.32,1)}
@media (max-width:833px){.ap-nav ul{display:none}.ap-nav .bg{display:block}}
@media (min-width:834px){.ap-sheet{display:none}}

/* buttons, same as the homepage. The button lifts, the phone rings */
a.btn,.ap-nav ul a.nb{display:inline-flex!important;align-items:center;gap:10px}
.ap-nav ul a.nb{gap:6px}
.bi{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;overflow:visible;transition:transform .5s cubic-bezier(.32,.72,0,1)}
.ap-nav .nb .bi{width:12px;height:12px;stroke-width:2}
a.btn{transition:transform .4s cubic-bezier(.32,.72,0,1),box-shadow .4s,background .2s!important}
a.btn:hover{transform:translateY(-3px);box-shadow:0 14px 28px -12px rgba(13,13,12,.45)}
a.btn:hover .i-phone,.ap-nav .nb:hover .i-phone{animation:apring .7s ease-in-out}
@keyframes apring{0%,100%{transform:none}15%,45%,75%{transform:rotate(-14deg)}30%,60%,90%{transform:rotate(14deg)}}
@media (prefers-reduced-motion:reduce){a.btn:hover{transform:none}.bi{animation:none!important}}