/* Shared page-level styles (everything the kit does not cover). */
@font-face{font-family:'Schibsted Grotesk';font-style:normal;font-weight:400 800;font-display:swap;src:url(/fonts/sg-latin.woff2) format('woff2')}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.skip{position:absolute;left:-10000px;top:0;background:var(--ink);color:#fff;padding:10px 16px;z-index:100}
.skip:focus{left:8px;top:8px}

/* ---------- visible placeholder for a missing fact (must stay visible on the canvas) ---------- */

/* ---------- accessibility helper ---------- */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* ===== Clivi site layer: shared additions ===== */
:root{--wave-h:64px}
@media (max-width:899px){:root{--wave-h:48px}}
@media (max-width:599px){:root{--wave-h:32px}}

/* wave divider: one peak, one trough, filled with the NEXT section's colour */
.wave{position:relative;z-index:1;display:block;height:var(--wave-h);margin:-1px 0;background:var(--wave-from,var(--ground));line-height:0;pointer-events:none}
.wave svg{display:block;width:100%;height:100%;overflow:visible}
.wave path{fill:var(--wave-to,var(--primary))}
.wave.flip svg{transform:scaleX(-1)}
.wave.from-ground{--wave-from:var(--ground)}
.wave.from-cobalt{--wave-from:var(--primary)}
.wave.from-night{--wave-from:var(--dark)}
.wave.to-ground{--wave-to:var(--ground)}
.wave.to-cobalt{--wave-to:var(--primary)}
.wave.to-night{--wave-to:var(--dark)}

/* cobalt sections: white type and pupils outside cards, light-ground rules restored inside cards */
.g-cobalt .cap{color:rgba(255,255,255,.8)}
.g-cobalt .link{color:#FFFFFF}
.g-cobalt .steps-strip{color:#FFFFFF}
.g-cobalt .steps-strip b{border-color:#FFFFFF}
.g-cobalt .card{background:var(--panel);color:var(--ink);--wm-ink:var(--ink);--pupil:var(--primary)}
.g-cobalt .card .small,.g-cobalt .card .cap,.g-cobalt .card .label{color:var(--muted)}
.g-cobalt .card .link{color:var(--ink)}
.g-cobalt .card .btn-primary{background:var(--primary);color:#FFFFFF}
.g-cobalt .card :focus-visible{outline-color:var(--primary)}

/* main tagline, under the Home H1 */
.tagline{display:block;margin:var(--s4) 0 0;font:650 26px/1.25 var(--font-display);letter-spacing:-.015em;color:var(--primary)}
.g-cobalt .tagline,.g-night .tagline{color:#FFFFFF}
@media (max-width:599px){.tagline{font-size:21px}}

/* footer tagline (identical on every page with the full footer) */
.foot .brand .tl{display:block;margin:0 0 var(--s1);font:650 17px/1.35 var(--font-display);letter-spacing:-.01em;color:var(--ink)}


/* the eyes blink once on load; off for anyone who has turned motion off */
@keyframes clivi-blink{0%,100%{transform:scaleY(1)}45%,55%{transform:scaleY(.08)}}
@media (prefers-reduced-motion:no-preference){
  .blink .eye{transform-origin:50% 50%;animation:clivi-blink 200ms ease-in-out 400ms 1}
}

/* mobile menu sheet (hidden until the Menu button opens it, phone width only) */
.sheet{display:none;padding:var(--s6) var(--gutter);background:var(--ground);border-bottom:1px solid var(--hair)}
.sheet ul{list-style:none;margin:0 0 var(--s6);padding:0}
.sheet li a{display:flex;align-items:center;min-height:64px;font:650 24px/1.2 var(--font-display);text-decoration:none;border-bottom:1px solid var(--hair)}
.sheet .btn{margin-bottom:var(--s5)}
.sheet .insign{display:block;text-align:center;min-height:44px;line-height:44px}
@media (max-width:899px){.sheet.open{display:block}}
.nav .end .btn-primary{white-space:nowrap}

/* ===== LEGAL-AUTH pages (privacy, terms, signup, signin, welcome). ===== */
.legal-page{padding:var(--s9) 0 var(--s10)}
.legal-grid{display:grid;grid-template-columns:220px minmax(0,760px);column-gap:var(--s9);align-items:start}
.legal-index{position:sticky;top:96px}
.legal-index .label{margin-bottom:var(--s3)}
.legal-index ol{list-style:none;margin:0;padding:0}
.legal-index a{display:flex;align-items:center;min-height:44px;text-decoration:none;color:var(--ink-2);font-size:15px;line-height:1.3}
.legal-index a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.legal-main h1{font-size:48px;line-height:1.04}
.legal-main .meta{margin:var(--s4) 0 var(--s6)}
.banner{display:block;padding:var(--s4) var(--s5);border-radius:var(--r-ctl);margin:0 0 var(--s8);line-height:1.5}
.legal-sec{margin:0 0 var(--s7);scroll-margin-top:96px}
.legal-sec h2{margin:0 0 var(--s4)}
.legal-sec p{max-width:65ch}
.legal-sec .stack{display:flex;flex-wrap:wrap;gap:var(--s2);margin:0 0 var(--s4)}
@media (max-width:899px){
  .legal-page{padding:var(--s8) 0 var(--s9)}
  .legal-grid{display:block}
  .legal-index{display:none}
}
@media (max-width:599px){
  .legal-page{padding:var(--s7) 0 var(--s8)}
  .legal-main h1{font-size:42px;line-height:1.04}
  .legal-sec{margin-bottom:var(--s6)}
  .banner{margin-bottom:var(--s7)}
  
}

/* slim header, forms, steps (signup, signin, welcome) */
.slim{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);height:72px;padding:0 max(var(--gutter), calc((100% - var(--max)) / 2));border-bottom:1px solid var(--hair);background:var(--ground)}
.slim .home{display:inline-flex;align-items:center;min-height:44px;font-size:30px;color:var(--ink);text-decoration:none}
.slim .home .wm{align-self:center}
.slim .aside{display:flex;align-items:center;gap:6px;font-size:15px;line-height:1.3;color:var(--ink-2);text-align:right}
.slim .aside a{display:inline-flex;align-items:center;min-height:44px;font-weight:600;color:var(--ink)}
.slim .aside .em{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sz-40{font-size:40px}.sz-48{font-size:48px}.sz-56{font-size:56px}.sz-64{font-size:64px}.sz-140{font-size:140px}
.t48{font-size:48px;line-height:1.04}
.fgroup{margin:0 0 var(--s5)}
.fgroup>label{display:block;font:600 14px/1.3 var(--font-body);margin:0 0 var(--s2)}
.fgroup .small{margin:var(--s2) 0 0}
.agree{display:flex;align-items:flex-start;gap:var(--s3);min-height:44px;margin:0 0 var(--s5)}
.agree input{flex:none;width:22px;height:22px;margin:2px 0 0;accent-color:var(--primary)}
.agree label{font-size:15px;line-height:1.5;color:var(--ink-2)}
.agree label a{color:var(--ink);font-weight:600}
.foot.min{padding:var(--s6) 0}
.foot.min .wrap{max-width:none;padding:0 var(--s6)}
.foot.min .legal{margin-top:0;padding-top:0;border-top:0}
ol.steps{list-style:none;counter-reset:s;margin:0;padding:0;display:grid;gap:var(--s5)}
ol.steps li{counter-increment:s;display:flex;gap:var(--s4);align-items:flex-start;font-size:19px;line-height:1.4}
ol.steps li::before{content:counter(s);flex:none;display:grid;place-items:center;width:28px;height:28px;border:1.5px solid currentColor;border-radius:50%;font:650 14px/1 var(--font-body)}
@media (max-width:599px){
  .slim{height:60px;padding:0 var(--gutter)}
  .foot.min .wrap{padding:0 var(--gutter)}
  .slim .home{font-size:26px}
  .slim .aside{font-size:14px}
  .t48{font-size:42px}
  .fgroup .field{height:52px}
}
/* signup */
.su{display:grid;grid-template-columns:7fr 5fr;gap:var(--s6);padding:var(--s6) var(--s6) var(--s6) 0;min-height:828px}
.su-form{display:flex;justify-content:center;padding:var(--s9) var(--s6) var(--s8)}
.su-in{width:100%;max-width:480px}
.su-in form{max-width:440px}
.su-in h1{margin:0 0 var(--s7)}
.su-in .mk-top{display:none}
.su .next-phone{display:none}
.su-panel{display:flex;flex-direction:column;justify-content:center;gap:var(--s8);padding:var(--s8) var(--s8) var(--s8);border-radius:var(--r-card)}
.su-panel .mkwrap{display:block;line-height:0}
.su-panel .label{margin-bottom:var(--s5)}
@media (max-width:899px){
  .su{grid-template-columns:1fr;padding:0;gap:0}
  .su-form{padding:var(--s7) var(--gutter) var(--s8)}
  .su-panel{display:none}
  .su .next-phone{display:block;margin-top:var(--s8)}
  .su-in .mk-top{display:block;margin:0 0 var(--s5);line-height:0}
  .su-in h1{margin-bottom:var(--s6)}
  .su .next-phone ol.steps li{font-size:17px}
}
/* signin */
.si{display:flex;justify-content:center;padding:var(--s9) var(--gutter) var(--s9);min-height:664px}
.si-in{width:100%;max-width:440px}
.si-in .mkwrap{display:block;line-height:0;margin:0 0 var(--s5)}
.si-in h1{margin:0 0 var(--s3)}
.si-in .lede{font-size:17px;margin:0 0 var(--s7)}
.si .forgot{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3);margin:calc(-1 * var(--s2)) 0 var(--s6)}
.si .forgot a{display:inline-flex;align-items:center;min-height:44px;font-size:15px;font-weight:600}
.si .alert{color:var(--error);border:1px solid var(--error);border-radius:var(--r2,8px);padding:var(--s3) var(--s4);margin:0 0 var(--s5);font-size:15px;line-height:1.5}
.si .alert[hidden]{display:none}
.si .after{margin:var(--s4) 0 0}
.si .after a{color:var(--ink);font-weight:600}
@media (max-width:599px){.si{padding:var(--s7) var(--gutter) var(--s8);min-height:0}}
/* welcome */
.wel-note{padding:var(--s3) var(--s6);background:var(--light);border-bottom:1px solid var(--hair)}
.wel-note .cap{margin:0;font-size:13px;color:var(--ink-2)}
.wel{padding:var(--s9) 0 var(--s10)}
.wel .wrap{max-width:calc(var(--max) + 2*var(--gutter))}
.wel-head{display:flex;align-items:center;gap:var(--s5)}
.wel-head .mkwrap{display:block;line-height:0;flex:none}
.wel-head .lede{margin:var(--s3) 0 0;max-width:42em}
.wel-head h1{margin:0}
.thumbwrap{margin-top:var(--s7)}
.thumbs{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--s4);list-style:none;margin:0;padding:var(--s2) 0 var(--s5)}
.thumbs li{min-width:0}
.lock{aspect-ratio:4/5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s2);padding:var(--s3);text-align:center;background:var(--light);border:1px solid var(--line-strong);border-radius:var(--r-img);font:600 14px/1.3 var(--font-body);color:var(--ink-2)}
.acts{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s3);margin-top:var(--s5)}
.wel .price-note{margin:var(--s4) 0 0}
.others{margin-top:var(--s10)}
.states{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5);align-items:start}
.states .card{display:flex;flex-direction:column;padding:var(--s7)}
.states .mkwrap{display:block;line-height:0;margin:0 0 var(--s5)}
.states h3{margin:0 0 var(--s3)}
.states .card p{color:var(--ink-2)}
.chk{list-style:none;margin:var(--s5) 0 var(--s4);padding:0;display:grid;gap:var(--s3)}
.chk li{display:flex;align-items:center;gap:var(--s3);font-size:16px;line-height:1.3;color:var(--ink)}
.chk li svg{flex:none}
.chk li.todo{color:var(--muted)}
.bar{height:6px;border-radius:3px;background:var(--light);overflow:hidden}
.bar i{display:block;height:100%;width:45%;background:var(--primary);border-radius:3px}
.finish{margin-top:var(--s6);padding-top:var(--s5);border-top:1px solid var(--hair)}
.finish .fh{font:650 17px/1.3 var(--font-body);margin:0 0 var(--s4)}
.finish .fgroup{margin-bottom:var(--s4)}
.tester .btn{align-self:flex-start;margin-top:var(--s3)}
.capped .spacer{flex:1}
@media (max-width:1023px){.thumbs{grid-template-columns:repeat(4,1fr)}.states{grid-template-columns:1fr}}
@media (max-width:599px){
  .wel-note{padding:var(--s3) var(--gutter)}
  .wel{padding:var(--s7) 0 var(--s8)}
  .wel-head{flex-direction:column;align-items:flex-start;gap:var(--s4)}
  .wel-head .mkwrap .sz-64{font-size:48px}
  .thumbwrap{margin:var(--s6) calc(-1 * var(--gutter)) 0;padding:0 var(--gutter);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-left:var(--gutter);scrollbar-width:none}
  .thumbwrap::-webkit-scrollbar{display:none}
  .thumbwrap{margin-bottom:calc(-1 * var(--s5))}
  .thumbs{display:flex;gap:var(--s3);width:max-content;padding:var(--s2) var(--gutter) var(--s8) 0}
  .thumbs li{flex:none;width:136px;scroll-snap-align:start}
  .acts .btn{width:100%}
  .others{margin-top:var(--s9)}
  .states .card{padding:var(--s5)}
  .tester .btn{align-self:stretch}
}

/* ===== Examples page (how-examples lane): filtered figures are hidden with the hidden attribute ===== */
.grid > li[hidden]{display:none}

[data-state][hidden]{display:none}
.states[data-state]{grid-template-columns:minmax(0,560px)}