/* StudyCore landingspagina v3 (spec docs/superpowers/specs/2026-10-04-landingspagina-v3-design.md).
   Warm papier, kobalt als accent, Bricolage Grotesque + Manrope. Geen blur in overgangen. */
:root{
  --paper:#F6F4EF;--paper-deep:#ECE8DE;--surface:#FFFFFF;--ink:#171A1F;--ink-soft:#4E535C;--muted:#60656E;--line:#DED9CF;
  --cobalt:#2E5BFF;--cobalt-deep:#1F44CC;--cobalt-soft:#E9EEFF;--green:#279A64;--amber:#C47F11;--red:#D45146;
  --font-display:"Bricolage Grotesque",sans-serif;--font-body:"Manrope",sans-serif;--font-b:var(--font-body);--font-d:var(--font-display);
  --radius-lg:32px;--radius-md:22px;--radius-sm:16px;
  --shadow-soft:0 2px 3px rgba(23,26,31,.04),0 24px 70px -34px rgba(23,26,31,.28);
  --shadow-float:0 3px 8px rgba(23,26,31,.08),0 40px 100px -44px rgba(23,26,31,.46);
  --ease-out:cubic-bezier(.23,1,.32,1);--ease-in-out:cubic-bezier(.77,0,.175,1);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:88px;background:var(--paper)}
/* Vloeiend scrollen pas na het laden (landing.js), zodat een directe link naar #prijzen meteen springt. */
html.smooth-scroll{scroll-behavior:smooth}
/* Focus en ankers landen nooit onder de toestemmingsvraag. */
html:has(> body.sc-consent-open){scroll-padding-bottom:var(--sc-consent-inset,300px)}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
body.menu-open{overflow:hidden}
a{color:inherit}
img{display:block;max-width:100%;height:auto}
button{font:inherit;color:inherit}
::selection{background:var(--cobalt);color:#fff}
:focus-visible{outline:3px solid var(--cobalt);outline-offset:4px}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link{position:fixed;z-index:999;left:16px;top:14px;padding:10px 15px;border-radius:999px;background:var(--ink);color:#fff;font-weight:700;text-decoration:none;transform:translateY(-160%)}
.skip-link:focus{transform:none}
.container{width:min(100% - 32px,1200px);margin-inline:auto}
.narrow{width:min(100% - 32px,860px);margin-inline:auto}
/* Telt op bij scroll-padding-top (88px): ankers landen zoals voorheen op 96px. */
section[id]{scroll-margin-top:8px}
.section-title{margin:0;font-family:var(--font-display);font-weight:650;font-size:clamp(2rem,4.4vw,3.4rem);line-height:1.02;letter-spacing:-.045em;text-wrap:balance}
.section-copy{margin:14px 0 0;max-width:560px;color:var(--ink-soft);font-size:clamp(1rem,1.5vw,1.12rem);line-height:1.7}
.text-link{display:inline-block;margin-top:18px;color:var(--cobalt-deep);font-weight:750;text-underline-offset:4px}

/* Knoppen */
.button{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:52px;padding:0 20px;border:0;border-radius:999px;background:var(--cobalt);color:#fff;text-decoration:none;font-weight:800;font-size:.95rem;line-height:1;white-space:nowrap;box-shadow:0 12px 30px -14px rgba(46,91,255,.65);cursor:pointer;transition:background-color .16s var(--ease-out),transform .16s var(--ease-out)}
.button:hover{background:var(--cobalt-deep)}
.button:active{transform:scale(.97)}
.button[hidden]{display:none}
.button-icon{display:grid;place-items:center;width:30px;height:30px;margin-right:-8px;border-radius:50%;background:rgba(255,255,255,.18)}
.button-icon svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.button-quiet{background:var(--surface);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.button-quiet:hover{background:var(--paper-deep)}
.icon-apple{width:17px;height:17px;fill:currentColor;margin-top:-2px}
.button-large{min-height:60px;padding:0 26px;font-size:1.02rem}

/* Kop */
.site-header{position:fixed;z-index:100;top:0;left:0;right:0;padding:14px 0;transition:background-color .2s var(--ease-out),box-shadow .2s var(--ease-out)}
.site-header.is-scrolled{background:var(--paper);box-shadow:0 1px 0 rgba(23,26,31,.07)}
.nav-inner{display:flex;align-items:center;gap:20px}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--font-display);font-weight:700;font-size:1.18rem;letter-spacing:-.03em}
.brand img{width:34px;height:34px;border-radius:10px}
.desktop-nav{display:flex;gap:26px;margin-left:auto}
.desktop-nav a{color:var(--ink-soft);text-decoration:none;font-size:.88rem;font-weight:700}
.desktop-nav a:hover{color:var(--ink)}
.desktop-nav a[hidden]{display:none}
.nav-login{font-size:.88rem;font-weight:750;text-decoration:none;text-underline-offset:5px}
.nav-login:hover{text-decoration:underline}
.menu-button{position:relative;display:none;width:44px;height:44px;border:0;border-radius:50%;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);cursor:pointer}
.menu-button span,.menu-button span::before,.menu-button span::after{position:absolute;left:13px;right:13px;height:2px;border-radius:2px;background:var(--ink)}
.menu-button span{top:21px}
.menu-button span::before,.menu-button span::after{content:"";left:0;right:0;transition:transform .2s var(--ease-out)}
.menu-button span::before{top:-6px}
.menu-button span::after{top:6px}
.menu-button[aria-expanded="true"] span{background:transparent}
.menu-button[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.menu-button[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}
.mobile-menu{position:fixed;z-index:99;top:72px;left:16px;right:16px;padding:10px;border-radius:var(--radius-md);background:var(--surface);box-shadow:var(--shadow-float)}
.mobile-menu nav{display:grid}
.mobile-menu a{padding:14px 16px;border-radius:14px;text-decoration:none;font-weight:750}
.mobile-menu a:hover{background:var(--paper)}
@media (max-width:860px){
  .desktop-nav,.nav-login{display:none}
  .menu-button{display:inline-block}
}
@media (max-width:400px){
  .nav-inner{gap:10px}
  .brand{gap:8px;font-size:1.06rem}
  .brand img{width:30px;height:30px}
}
@media (max-width:350px){
  .nav-inner{gap:6px}
  .brand{font-size:1rem}
}

/* Kleine regel onder de slotknop */
.hero-note{margin:14px 0 0;color:var(--muted);font-size:.86rem;font-weight:600}

/* Onthullen onder de vouw: alleen als landing.js het aanzet (html.reveal-ready). */
/* Verbergen gaat direct (geen tientallen animaties bij het laden); alleen het verschijnen beweegt.
   Krijgt iets binnenin focus, dan verschijnt het meteen. */
.reveal-ready .reveal{opacity:0;transform:translateY(18px);transition:none}
.reveal-ready .reveal.is-in{opacity:1;transform:none;transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.reveal-ready .reveal.is-in:focus-within{transition:none}

/* Slot */
.final{padding:clamp(90px,12vw,170px) 0;text-align:center}
.final-inner{display:flex;flex-direction:column;align-items:center}
.final-title{margin:0;max-width:13ch;font-family:var(--font-display);font-weight:650;font-size:clamp(2.4rem,6vw,4.6rem);line-height:1;letter-spacing:-.05em;text-wrap:balance}
.final .button{margin-top:34px}


/* Footer met groot woordmerk */
.site-footer{padding:56px 0 0;overflow:hidden;border-top:1px solid rgba(23,26,31,.07)}
.footer-grid{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 28px}
.footer-links{display:flex;flex-wrap:wrap;gap:10px 22px}
.footer-links a,.footer-legal a{color:var(--ink-soft);font-size:.88rem;font-weight:700;text-underline-offset:4px}
.footer-links a{display:inline-block;padding-block:4px;text-decoration:none}
.footer-links a:hover{color:var(--ink);text-decoration:underline}
.footer-legal{margin:0;color:var(--muted);font-size:.84rem}
.footer-wordmark{width:min(100% - 16px,1200px);margin:36px auto 0;color:var(--paper-deep);user-select:none;-webkit-mask-image:linear-gradient(#000 70%,transparent);mask-image:linear-gradient(#000 70%,transparent)}
.footer-wordmark svg{display:block;width:100%;height:auto}

/* Vier zinnen van studenten */
.lines{padding:clamp(16px,3vw,40px) 0 clamp(48px,8vw,110px)}
.line{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:clamp(28px,6vw,96px);align-items:center;padding:clamp(40px,6vw,80px) 0}
.line.is-flipped{grid-template-columns:minmax(0,.8fr) minmax(0,1fr)}
.line:first-of-type{padding-top:0}
.line + .line{border-top:1px solid rgba(23,26,31,.07)}
.line.is-flipped .line-visual{order:-1}
.line-quote{margin:0;font-family:var(--font-display);font-weight:650;font-size:clamp(1.9rem,4vw,3.1rem);line-height:1.05;letter-spacing:-.04em;text-wrap:balance;text-indent:-.32em}
@media (max-width:1264px){
  .line-quote{text-indent:-.2em}
}
@supports (hanging-punctuation:first){
  .line-quote{text-indent:0;hanging-punctuation:first}
}
.line-copy p:not(.swap,.line-tag){margin:18px 0 0;max-width:500px;color:var(--ink-soft);font-size:1.08rem;line-height:1.7;text-wrap:pretty}
.nowrap{white-space:nowrap}
.line-tag{display:inline-block;margin:0 0 16px;padding:5px 12px;border-radius:999px;background:var(--cobalt-soft);color:var(--cobalt-deep);font-size:.78rem;font-weight:800;line-height:1.3;letter-spacing:.01em}
.line-visual{margin:0;justify-self:end}
.line.is-flipped .line-visual{justify-self:start}
.swap{display:flex;gap:12px;align-items:baseline;margin:0 0 16px;font-family:var(--font-display);font-weight:650;font-size:1.3rem;letter-spacing:-.02em}
.swap s{color:var(--muted);text-decoration-thickness:2px}
.swap span[aria-hidden]{color:var(--cobalt-deep)}
/* Kopiëren levert alleen de verborgen volle zin op, niet de zichtbare losse woorden. */
.swap [aria-hidden]{-webkit-user-select:none;user-select:none}
@media (min-width:901px){
  /* Het beeld staat tegen de buitenrand; de ring van 10px valt buiten het raster. */
  .line-visual{margin-right:10px}
  .line.is-flipped .line-visual{margin:0 0 0 10px}
}
@media (max-width:900px){
  .line,.line.is-flipped{grid-template-columns:1fr}
  .line.is-flipped .line-visual{order:0}
  .line-visual,.line.is-flipped .line-visual{justify-self:center}
}

/* Prijzen. Op smal scherm staan de kaarten onder elkaar en zit de betaalperiode tussen Free en Pro;
   op desktop liggen de rijen (kop, prijs, voordelen, notitie, knop, kleine letters) via subgrid op één lijn. */
.pricing{padding:clamp(80px,11vw,150px) 0;background:var(--paper-deep)}
.pricing-grid{display:flex;flex-direction:column;gap:16px;margin-top:36px}
.billing-toggle{order:2;align-self:center;display:inline-flex;gap:4px;margin:4px 0;padding:4px;border:0;border-radius:999px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.billing-option{position:relative;display:inline-flex}
.billing-option input{position:absolute;inset:0;margin:0;opacity:0;cursor:pointer}
.billing-option span{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:0 16px;border-radius:999px;font-weight:750;font-size:.86rem}
.billing-option input:checked + span{background:var(--ink);color:#fff}
.billing-option input:focus-visible + span{outline:3px solid var(--cobalt);outline-offset:2px}
.billing-option small{color:#1F7A4F;font-size:.78rem;font-weight:800}
.billing-option input:checked + span small{color:#9BE3BE}
.price-card{order:1;position:relative;display:flex;flex-direction:column;padding:28px;border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow-soft)}
.price-card-pro{order:3;background:linear-gradient(160deg,#2E5BFF 0%,#1F2E8A 100%);color:#fff}
.price-card-max{order:4;background:linear-gradient(160deg,#2A2F3A 0%,#171A1F 100%);color:#fff}
.plan-recommendation{margin:0 0 10px;color:#fff;font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.plan-name{margin:0;font-family:var(--font-display);font-size:1.8rem;letter-spacing:-.03em}
.plan-lead{margin:8px 0 0;font-weight:750}
.plan-price{display:flex;align-items:baseline;gap:8px;margin:22px 0 4px}
.plan-price strong{font-family:var(--font-display);font-size:2.6rem;letter-spacing:-.04em}
.billing-detail,.plan-daily,.plan-note,.plan-spec{margin:0;color:var(--ink-soft)}
.billing-detail,.plan-daily{font-size:.84rem}
.plan-features{display:grid;align-content:start;gap:10px;margin:22px 0 26px;padding:0;list-style:none}
.plan-features li{display:flex;gap:10px;font-size:.92rem}
.plan-features svg{flex:none;width:18px;height:18px;margin-top:3px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.plan-action{display:flex;flex-direction:column;margin-top:auto}
.plan-note{margin-bottom:12px;font-size:.84rem;line-height:1.5}
.plan-spec{margin-top:14px;font-size:.78rem;line-height:1.55}
.plan-spec a{color:inherit;text-underline-offset:3px}
.price-card-pro :is(.billing-detail,.plan-daily,.plan-note,.plan-spec),
.price-card-max :is(.billing-detail,.plan-daily,.plan-note,.plan-spec){color:rgba(255,255,255,.88)}
.price-card-pro .button,.price-card-max .button{background:#fff;color:var(--ink);box-shadow:none}
.price-card-pro .button:hover,.price-card-max .button:hover{background:var(--cobalt-soft)}
.price-card-pro .button .button-icon,.price-card-max .button .button-icon{background:var(--ink);color:#fff}
.faq-item p a:focus-visible,.price-card-pro :focus-visible,.price-card-max :focus-visible{outline-color:#fff}
@media (min-width:981px){
  .pricing-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  .billing-toggle{order:0;grid-column:1/-1;justify-self:start;margin-bottom:12px}
  .price-card,.price-card-pro,.price-card-max{order:0}
  .price-card{padding-top:52px}
  .plan-recommendation{position:absolute;top:24px;left:28px;right:28px;margin:0}
  /* Zonder subgrid (oudere browsers) blijft het drie kaarten naast elkaar, met de knop onderaan. */
  @supports (grid-template-rows:subgrid){
    .pricing-grid{grid-template-rows:auto repeat(6,auto);row-gap:0}
    .billing-toggle{margin-bottom:28px}
    .price-card{display:grid;grid-row:span 6;grid-template-columns:minmax(0,1fr);grid-template-rows:subgrid;row-gap:0}
    .plan-action{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0;margin-top:0}
    .plan-note{align-self:end}
    .plan-spec{align-self:start}
  }
}
@media (min-width:981px) and (max-width:1100px){
  .rec-long{display:none}
}

/* Vragen als chatbubbels: vraag van de student, antwoord van StudyCore */
.faq{padding:clamp(80px,11vw,150px) 0}
.faq-thread{display:grid;gap:16px;margin-top:36px}
.faq-item{max-width:min(620px,92%)}
.faq-item:nth-child(even){justify-self:end;text-align:right}
.faq-item summary{display:inline-flex;align-items:center;gap:12px;padding:14px 18px;border-radius:22px 22px 22px 6px;background:var(--surface);box-shadow:var(--shadow-soft);font-weight:750;text-align:left;cursor:pointer;list-style:none;transition:background-color .15s var(--ease-out),transform .15s var(--ease-out)}
.faq-item:nth-child(even) summary{border-radius:22px 22px 6px 22px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"";flex:none;width:24px;height:24px;border-radius:50%;background:linear-gradient(currentColor,currentColor) center/12px 2px no-repeat,linear-gradient(currentColor,currentColor) center/2px 12px no-repeat,var(--paper);transition:transform .2s var(--ease-out)}
.faq-item[open] summary::after{transform:rotate(45deg)}
@media (hover:hover){
  .faq-item summary:hover{background:var(--cobalt-soft)}
}
.faq-item summary:active{transform:scale(.98);transform-origin:left center}
.faq-item:nth-child(even) summary:active{transform-origin:right center}
.faq-item p{width:fit-content;max-width:100%;margin:6px 0 0;padding:14px 18px;border-radius:6px 22px 22px 22px;background:var(--cobalt);color:#fff;text-align:left;line-height:1.6;text-wrap:pretty;animation:faq-in .28s var(--ease-out) both}
.faq-item:nth-child(even) p{margin-left:auto;border-radius:22px 6px 22px 22px}
.faq-item p a{color:#fff;text-underline-offset:3px}
@keyframes faq-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  html,html.smooth-scroll{scroll-behavior:auto}
  .faq-item p{animation:none}
  .reveal-ready .reveal,.reveal-ready .reveal.is-in{opacity:1;transform:none;transition:none}
  .button,.site-header{transition:none}
  .faq-item summary,.faq-item summary::after{transition:none}
}