/* ============================================================
   CLARITYDO — shared site styles (nav · buttons · sections · footer)
   White & active · app-derived palette · airy, floaty spacing
   ============================================================ */

/* ---------- tokens ---------- */
:root{
  --bg:#ffffff;
  --bg-2:#fbfbff;
  --wash-lilac:#f3f2ff;
  --wash-sky:#eef4ff;
  --wash-pink:#fdeff7;
  --wash-mint:#ecfaf3;

  --ink:#1a2140;
  --ink-2:#454d6b;
  --ink-soft:#6b7290;
  --ink-mute:#9aa0b8;
  --line:#ecebf5;

  --indigo:#4f46d6;
  --indigo-deep:#3a32b0;
  --indigo-bright:#5b53e6;
  --peri:#8b86f0;
  --peri-soft:#c7c4f7;

  --magenta:#e5398e;
  --green:#28a766;
  --teal:#16a0b0;
  --amber:#f0a04b;

  --display:"Schibsted Grotesk",system-ui,sans-serif;
  --body:"Hanken Grotesk",system-ui,sans-serif;
  --serif:"Newsreader",Georgia,serif;

  --r-sm:14px;
  --r:20px;
  --r-lg:28px;
  --r-xl:36px;

  --sh-1:0 1px 2px rgba(26,33,64,.04), 0 8px 24px -12px rgba(26,33,64,.10);
  --sh-2:0 2px 6px rgba(26,33,64,.05), 0 24px 50px -24px rgba(60,54,180,.22);
  --sh-3:0 30px 80px -30px rgba(60,54,180,.40), 0 6px 18px rgba(26,33,64,.06);

  --maxw:1180px;
}

/* ---------- reset / base ---------- */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink-2);
  font-family:var(--body);
  font-size:18px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
::selection{background:var(--peri-soft);color:var(--ink);}

.wrap{width:min(var(--maxw),92vw);margin-inline:auto;}

h1,h2,h3{font-family:var(--display);color:var(--ink);margin:0;letter-spacing:-.025em;line-height:1.04;font-weight:700;}
.ital{font-family:var(--serif);font-style:italic;font-weight:500;letter-spacing:-.01em;}
em{font-style:normal;}

/* eyebrow */
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--display);font-weight:600;
  font-size:13px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--indigo);
}
.eyebrow::before{
  content:"";width:7px;height:7px;border-radius:50%;
  background:var(--indigo);box-shadow:0 0 0 4px color-mix(in oklab,var(--indigo) 18%,transparent);
}
.eyebrow.center{justify-content:center;}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--display);font-weight:600;font-size:16px;letter-spacing:-.01em;
  padding:15px 26px;border-radius:999px;cursor:pointer;border:1px solid transparent;
  transition:transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s, background .2s;
  white-space:nowrap;
}
.btn .arr{transition:transform .25s cubic-bezier(.22,1,.36,1);}
.btn:hover .arr{transform:translateX(4px);}
.btn-primary{
  background:linear-gradient(180deg,var(--indigo-bright),var(--indigo));
  color:#fff;box-shadow:0 1px 0 rgba(255,255,255,.4) inset, 0 12px 28px -10px rgba(79,70,214,.6);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 18px 38px -10px rgba(79,70,214,.7);}
.btn-ghost{
  background:#fff;color:var(--ink);border-color:var(--line);box-shadow:var(--sh-1);
}
.btn-ghost:hover{transform:translateY(-2px);border-color:var(--peri-soft);box-shadow:var(--sh-2);}
.btn-light{background:#fff;color:var(--indigo);box-shadow:var(--sh-2);}
.btn-light:hover{transform:translateY(-2px);}
.btn-lg{font-size:17px;padding:17px 32px;}

/* ---------- inline link ---------- */
.tlink{color:var(--indigo);font-weight:600;text-decoration:underline;text-decoration-color:var(--peri-soft);text-underline-offset:3px;text-decoration-thickness:1.5px;transition:text-decoration-color .2s,color .2s;cursor:pointer;}
.tlink:hover{color:var(--indigo-deep);text-decoration-color:var(--indigo);}

/* ---------- nav ---------- */
.nav{
  position:sticky;top:0;z-index:60;
  background:color-mix(in oklab,#fff 78%,transparent);
  backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid transparent;
  transition:background .3s;
}
.nav.is-stuck{background:color-mix(in oklab,#fff 88%,transparent);}
.nav__in{display:flex;align-items:center;gap:28px;height:84px;}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--display);font-weight:700;font-size:22px;color:var(--ink);letter-spacing:-.02em;}
.brand img{width:34px;height:34px;border-radius:9px;box-shadow:0 4px 12px -4px rgba(79,70,214,.5);}
.brand b{color:var(--indigo);font-weight:700;}
.nav__links{display:flex;gap:30px;margin:0 auto;align-items:center;}
.nav__links a{font-size:15.5px;color:var(--ink-soft);font-weight:500;transition:color .2s;cursor:pointer;white-space:nowrap;}
.nav__links a:hover{color:var(--ink);}
.nav__links a.is-active{color:var(--indigo);font-weight:600;}
/* ---------- nav: Compare dropdown ---------- */
.nav__dd{position:relative;display:flex;align-items:center;align-self:stretch;}
.nav__dd > a{display:inline-flex;align-items:center;gap:6px;}
.nav__dd-caret{width:9px;height:6px;flex:none;opacity:.55;transition:transform .2s;}
.nav__dd:hover .nav__dd-caret,.nav__dd:focus-within .nav__dd-caret{transform:rotate(180deg);}
.nav__dd-menu{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(8px);min-width:210px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 44px -18px rgba(15,18,40,.28);padding:8px;display:flex;flex-direction:column;gap:2px;opacity:0;visibility:hidden;transition:opacity .18s ease,transform .18s ease,visibility 0s .18s;z-index:80;}
.nav__dd:hover .nav__dd-menu,.nav__dd:focus-within .nav__dd-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(2px);transition:opacity .18s ease,transform .18s ease,visibility 0s;}
.nav__dd-menu a{display:block;padding:9px 12px;border-radius:9px;font-size:14.5px;white-space:nowrap;}
.nav__dd-menu a:hover{background:color-mix(in oklab,var(--indigo) 7%,#fff);color:var(--ink);}
.nav__dd-menu a[aria-current]{color:var(--indigo);font-weight:600;}
.nav__dd-menu hr{border:0;border-top:1px solid var(--line);margin:5px 6px;}
.nav__right{display:flex;align-items:center;gap:18px;}

/* ---------- section rhythm ---------- */
.section{padding:clamp(80px,11vw,150px) 0;position:relative;}
.section--tint{background:var(--bg-2);}
.sec-head{max-width:780px;}
.sec-head.center{margin-inline:auto;text-align:center;}
.sec-title{font-size:clamp(32px,5vw,56px);margin:18px 0 0;text-wrap:balance;}
.sec-sub{font-size:clamp(17px,1.6vw,20px);color:var(--ink-soft);margin:22px 0 0;max-width:60ch;text-wrap:pretty;}
.center .sec-sub{margin-inline:auto;}

/* ---------- footer ---------- */
.footer{background:var(--ink);color:#cdd1e6;padding:72px 0 40px;}
.footer__top{display:grid;grid-template-columns:1.4fr 1fr;gap:40px;align-items:start;}
.footer .brand{color:#fff;}
.footer .brand b{color:var(--peri);}
.footer__tag{margin:16px 0 0;color:#9aa0c4;max-width:34ch;font-size:16px;}
.footer__links{display:flex;flex-wrap:wrap;gap:14px 26px;justify-content:flex-end;}
.footer__links a{color:#b9bedd;font-size:15px;font-weight:500;transition:color .2s;cursor:pointer;}
.footer__links a:hover{color:#fff;}
.footer__legal{margin-top:40px;padding-top:24px;border-top:1px solid rgba(255,255,255,.1);color:#858cb2;font-size:13.5px;line-height:1.7;max-width:none;}
.footer__legal a{color:#9aa0c4;text-decoration:underline;text-underline-offset:2px;text-decoration-color:rgba(154,160,196,.4);}
.footer__legal a:hover{color:#cdd1e6;}
.footer__bar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;margin-top:24px;padding-top:24px;border-top:1px solid rgba(255,255,255,.1);color:#858cb2;font-size:14px;}

/* ---------- reveal-on-scroll ---------- */
.rv{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1);}
.rv.is-in{opacity:1;transform:none;}
.rv[data-d="1"]{transition-delay:.08s;}
.rv[data-d="2"]{transition-delay:.16s;}
.rv[data-d="3"]{transition-delay:.24s;}
.rv[data-d="4"]{transition-delay:.32s;}
.rv[data-d="5"]{transition-delay:.40s;}

@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none;}
  .float,.float-2{animation:none;}
  html{scroll-behavior:auto;}
}

/* ---------- shared responsive ---------- */
@media (max-width:980px){
  .nav__links{display:none;}
  .footer__top{grid-template-columns:1fr;}
  .footer__links{justify-content:flex-start;}
}
@media (max-width:680px){
  body{font-size:16.5px;}
  .footer__bar{flex-direction:column;align-items:flex-start;}
}