/* The guides (lib/guides.js): the landing's colors and letters, set for reading. */
@font-face{font-family:'Schibsted Grotesk';font-weight:400 700;font-display:swap;src:url(/brand/schibsted-grotesk-1.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Schibsted Grotesk';font-weight:400 700;font-display:swap;src:url(/brand/schibsted-grotesk-0.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1EFF}
@font-face{font-family:'Popseed Title';src:url(/brand/anton-regular.ttf) format('truetype');font-display:swap}
:root{--bg:#f1eafa;--ink:#34224f;--soft:#6b5a82;--accent:#7452dc;--cream:#fffdf8;--lime:#d9eb9c;--link:#6440d2;--line:#34224f24;--read:640px;--pad:20.5px;--box:14px;--lift:4px 5px 0 var(--ink);--press:2px 2px 0 var(--ink)}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.65 'Schibsted Grotesk',Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit}
img{display:block;max-width:100%}
h1,h2,h3,p,ul,ol{margin:0}
.wrap{width:min(1120px,100% - 48px);margin-inline:auto}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px}

.g-head{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:92px}
.g-brand{display:flex;align-items:center;min-height:44px;gap:9px;font:400 26px/1 'Popseed Title',Impact,sans-serif;text-transform:uppercase;text-decoration:none}
.g-head nav{display:flex;gap:30px;font-size:14px}
.g-head nav a,.g-login{text-decoration:none;padding-block:12px}
.g-head nav a:hover,.g-login:hover,.g-foot a:hover,.g-crumbs a:hover{text-decoration:underline;text-underline-offset:5px}
.g-actions{display:flex;align-items:center;gap:22px}
.g-login{font-size:14px;font-weight:600;white-space:nowrap}
.g-cta{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:12px 22px;background:var(--accent);color:#fff;font-size:14px;font-weight:600;text-decoration:none;white-space:nowrap;border:1.5px solid var(--ink);border-radius:30px;box-shadow:var(--press);transition:transform .12s}
.g-cta:hover{transform:translate(-1px,-1px)}
.g-cta:active{transform:translate(1px,1px)}
.g-cta.big{min-height:58px;padding:16px 34px;font-size:18px}

.g-badge{display:inline-block;padding:8px 14px;background:var(--lime);border:1.4px solid var(--ink);border-radius:8px;box-shadow:var(--press);font-size:12px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;transform:rotate(-2deg)}
h1{font:400 clamp(36px,5.4vw,60px)/1.04 'Popseed Title',Impact,sans-serif;text-transform:uppercase;letter-spacing:.2px;margin:22px 0 18px;text-wrap:balance}
h1 em,.g-band h2 em{font-style:normal;color:var(--accent)}
.g-hero{text-align:center;padding:38px 0 46px}
.g-lede{max-width:620px;margin-inline:auto;font-size:18px;color:var(--soft);text-wrap:pretty}

.g-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:22px}
/* the hub: its guides two by two, so no card is left alone on a row */
@media(min-width:760px){.g-pairs{grid-template-columns:repeat(2,1fr)}.g-pairs .g-card:first-child:nth-last-child(odd){grid-column:1/-1}}
.g-card{display:flex;flex-direction:column;gap:10px;padding:26px var(--pad) 22px;background:var(--cream);border:1.5px solid var(--ink);border-radius:var(--box);box-shadow:var(--lift);text-decoration:none;transition:transform .12s}
.g-card:hover{transform:translate(-2px,-2px)}
.g-kicker{font-size:12px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--link)}
.g-card h3{font:400 26px/1.12 'Popseed Title',Impact,sans-serif;text-transform:uppercase;text-wrap:balance}
.g-card p{font-size:16px;line-height:1.55;color:var(--soft)}
.g-go{margin-top:auto;padding-top:8px;font-size:14px;font-weight:600}

.g-article{max-width:calc(var(--read) + 48px);padding:26px 0 30px}
.g-crumbs{font-size:14px;color:var(--soft);margin-bottom:26px}
.g-crumbs a{text-decoration:none}
.g-meta{font-size:14px;color:var(--soft);margin-bottom:28px}
/* --pad: what is inside a box starts on the line of the text of the lists (22px in, less the border) */
.g-answer{padding:22px var(--pad);background:var(--cream);border:1.5px solid var(--ink);border-radius:var(--box);box-shadow:var(--lift);font-size:18px;line-height:1.6;margin-bottom:14px}
.g-body h2,.g-faq h2,.g-more h2{font:400 clamp(26px,3.6vw,34px)/1.12 'Popseed Title',Impact,sans-serif;text-transform:uppercase;margin:46px 0 14px;text-wrap:balance}
.g-body h3{font-size:18px;line-height:1.35;font-weight:700;margin:28px 0 8px}
.g-body p,.g-body ul,.g-body ol{margin-bottom:16px;text-wrap:pretty}
.g-body ul,.g-body ol{padding-left:22px}
.g-body li{margin-bottom:8px}
.g-body li::marker{color:var(--accent);font-weight:700}
.g-body a,.g-faq a,.g-sources a{color:var(--link);font-weight:600;text-underline-offset:3px}
.g-body strong{font-weight:700}
.g-note{padding:16px 18px;background:#e9dff7;border-left:4px solid var(--accent);border-radius:0 8px 8px 0;font-size:16px}
.g-table{overflow-x:auto;margin:6px 0 22px;border:1.5px solid var(--ink);border-radius:var(--box);background:var(--cream);box-shadow:var(--lift)}
.g-table table{width:100%;min-width:560px;border-collapse:collapse;font-size:16px;line-height:1.5}
.g-table th,.g-table td{padding:13px var(--pad);text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.g-table tr:last-child th,.g-table tr:last-child td{border-bottom:0}
.g-table thead th{background:var(--ink);color:var(--cream);font-size:14px;letter-spacing:.4px;text-transform:uppercase}
.g-table tbody th{width:24%;font-weight:700}

.g-faq details{background:var(--cream);border:1.5px solid var(--ink);border-radius:var(--box);margin-bottom:12px}
.g-faq summary{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:16px var(--pad);font-weight:700;cursor:pointer;list-style:none}
.g-faq summary::-webkit-details-marker{display:none}
.g-faq summary span{flex:none;font-size:22px;font-weight:400;line-height:1;transition:transform .15s}
.g-faq details[open] summary span{transform:rotate(45deg)}
.g-faq details div{padding:0 var(--pad) 18px}
.g-sources{margin-top:30px;font-size:14px;color:var(--soft)}
.g-more{padding:10px 0 20px}
.g-more h2{margin-top:30px}

.g-band{margin-top:56px;margin-bottom:64px;padding:54px 28px 46px;background:var(--ink);color:var(--cream);border-radius:var(--box);text-align:center}
.g-band h2{font:400 clamp(36px,5.4vw,60px)/1.06 'Popseed Title',Impact,sans-serif;text-transform:uppercase;margin-bottom:28px;text-wrap:balance}
.g-band h2 em{color:var(--lime)}
.g-band .g-cta{background:var(--lime);color:var(--ink);border-color:var(--cream);box-shadow:none}
.g-band p{margin-top:20px;font-size:14px;opacity:.8}

.g-foot{padding:26px 0 30px;font-size:14px;color:var(--soft)}
.g-foot>div:first-child{display:flex;align-items:center;gap:22px;padding-bottom:24px;border-bottom:1px solid var(--line)}
.g-foot .g-brand{color:var(--ink)}
.g-foot-row{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 28px;padding-top:20px}
.g-foot a{text-decoration:none}

@media(max-width:820px){
  .wrap{width:calc(100% - 36px)}
  .g-head{min-height:74px;gap:10px}
  .g-head nav{display:none}
  .g-brand img{width:29px;height:29px}
  .g-actions{gap:14px}
  .g-cta{min-height:44px;padding:10px 14px;font-size:12px}
  .g-cta.big{min-height:54px;padding:14px 26px;font-size:16px}
  .g-hero{padding:22px 0 34px}
  .g-answer{padding:18px var(--pad);font-size:17px}
  .g-band{padding:42px 22px 36px;margin-bottom:44px}
  /* small links stay easy to tap */
  .g-crumbs a,.g-foot-row a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px}
  .g-crumbs{margin-bottom:8px}
  .g-foot>div:first-child{flex-direction:column;align-items:flex-start;gap:10px}
}
/* on a phone a table row is a small card: its first cell as the title, then each cell under the name of its column */
@media(max-width:640px){
  .g-table{overflow:visible}
  .g-table table{display:block;min-width:0}
  .g-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .g-table tbody,.g-table tr,.g-table tbody th,.g-table td{display:block;width:auto}
  .g-table tbody tr{padding:16px 0 18px;border-bottom:1px solid var(--line)}
  .g-table tbody tr:last-child{border-bottom:0}
  .g-table tbody th,.g-table td{padding:0 var(--pad);border:0}
  .g-table tbody th{font-size:17px}
  .g-table td::before{content:attr(data-label);display:block;margin-top:12px;font-size:12px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--link)}
}
@media(max-width:430px){.g-login{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
