/* Trim Slimmer landing - the app's tokens, not a parallel palette. */
/* Three values here had drifted from `src/frontend/src/index.css`, and two of them were the
   pre-Slice-0 ones the style lock records as contrast fixes: `--subtle` 0.650 -> 0.545, which the
   lock measured at 3.18:1 as tertiary text, and `--sage` 0.580 -> 0.545, whose white label was
   4.08:1. Measured here before the change, `.hero-note` - the line carrying the price - read
   3.18:1 against a 4.5 requirement, at every width in both languages. `--warm` was the same colour
   written 0.10 rather than 0.1.
   The landing expresses the product's design; it does not re-derive it. If these disagree again,
   the app and `.tastemaker/style-lock.md` are right and this file is wrong. */
/* Self-hosted Inter (same-origin, no Google Fonts): matches the app typeface. */
@font-face{
  font-family:"Inter Variable";
  font-style:normal;
  font-display:swap;
  font-weight:100 900;
  src:url(/assets/fonts/inter-latin-wght-normal.woff2) format("woff2-variations");
}
:root{
--background:oklch(0.995 0.002 90);--foreground:oklch(0.16 0.005 90);--card:oklch(1 0 0);
--muted:oklch(0.97 0.005 90);--muted-foreground:oklch(0.52 0.008 90);--subtle:oklch(0.545 0.008 90);
--accent:oklch(0.965 0.008 130);--primary:oklch(0.18 0.005 90);--primary-foreground:oklch(0.985 0.003 90);
--border:oklch(0.918 0.005 90);--border-strong:oklch(0.86 0.006 90);--ring:oklch(0.62 0.07 130);
--sage:oklch(0.545 0.075 130);--sage-deep:oklch(0.42 0.07 130);--sage-soft:oklch(0.88 0.045 130);--sage-tint:oklch(0.95 0.025 130);
--warm:oklch(0.65 0.1 50);--warm-tint:oklch(0.965 0.02 50);
--ink:oklch(0.17 0.01 130);--ink-2:oklch(0.22 0.012 130);--ink-border:oklch(0.30 0.015 130);--ink-muted:oklch(0.72 0.02 130);
--radius-sm:6px;--radius-md:8px;--radius-lg:10px;--radius-xl:14px;
--shadow-xs:0 1px 2px rgba(15,15,12,.04);--shadow-md:0 4px 12px -3px rgba(15,15,12,.08),0 2px 4px rgba(15,15,12,.04);
--shadow-xl:0 24px 48px -12px rgba(15,15,12,.18);
--font-sans:"Inter Variable",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
--font-mono:ui-monospace,Menlo,"Cascadia Mono","Segoe UI Mono",monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:76px}
body{margin:0;background:var(--background);color:var(--foreground);font-family:var(--font-sans);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block}
a{color:var(--sage-deep);text-decoration:none}
a:hover{color:var(--sage)}
::selection{background:var(--foreground);color:var(--background)}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
h1,h2,h3{margin:0;font-weight:700;text-wrap:balance}
h1{font-size:clamp(38px,5.4vw,58px);line-height:1.06;letter-spacing:-0.025em}
h2{font-size:clamp(28px,3.6vw,38px);line-height:1.15;letter-spacing:-0.018em}
h3{font-size:19px;line-height:1.35;letter-spacing:-0.008em}
p{margin:0}
.lead{font-size:19px;line-height:1.55;color:var(--muted-foreground);text-wrap:pretty}
.eyebrow{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--sage-deep)}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:2px;background:var(--sage)}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:var(--radius-md);border:1px solid var(--border);background:var(--card);color:var(--foreground);font:inherit;font-size:15px;font-weight:500;letter-spacing:-0.005em;padding:10px 20px;cursor:pointer;box-shadow:var(--shadow-xs);transition:background .15s,border-color .15s,color .15s}
.btn:hover{background:var(--accent);border-color:var(--border-strong);color:var(--foreground)}
.btn.primary{background:var(--primary);border-color:var(--primary);color:var(--primary-foreground)}
.btn.primary:hover{background:oklch(0.28 0.008 130);border-color:oklch(0.28 0.008 130);color:var(--primary-foreground)}
.btn.lg{padding:13px 26px;font-size:16px;border-radius:var(--radius-lg)}
.btn:focus-visible{outline:none;box-shadow:0 0 0 3px color-mix(in oklab,var(--ring) 50%,transparent)}
/* nav */
.nav{position:sticky;top:0;z-index:50;background:color-mix(in oklab,var(--background) 88%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
.nav-in{display:flex;align-items:center;gap:28px;height:64px}
/* The wordmark is a 6.195:1 lockup (793x128), so height is what sizes it: 26px of height is
   161px of width, which the flex nav has room for beside the centred links. The mark alone
   sat at 31px here - the difference is 130px, which is why this is a layout number and not
   an attribute swap. Narrow widths drop it further, in the 600px block below. */
.nav-logo img{height:26px;width:auto}
.nav-links{display:flex;gap:4px;flex:1;justify-content:center;align-items:center}
.nav-links>a,.nav-drop>button{display:inline-flex;align-items:center;gap:5px;color:var(--muted-foreground);font:inherit;font-size:14.5px;font-weight:500;padding:7px 13px;border-radius:8px;border:0;background:none;cursor:pointer;transition:background .15s,color .15s}
.nav-links>a:hover,.nav-drop:hover>button,.nav-links>a.active{color:var(--foreground);background:var(--accent)}
.nav-drop{position:relative}
.nav-drop>button svg{width:13px;height:13px;color:var(--subtle);transition:transform .15s}
.nav-drop:hover>button svg{transform:rotate(180deg)}
.nav-menu{position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%) translateY(4px);width:560px;background:var(--card);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-xl);padding:10px;display:grid;grid-template-columns:1fr 1fr;gap:2px;opacity:0;visibility:hidden;transition:opacity .15s,transform .15s,visibility .15s}
.nav-drop:hover .nav-menu,.nav-drop:focus-within .nav-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
@media (max-width:1160px){.nav-menu{left:-120px;right:auto;transform:translateY(4px)}.nav-drop:hover .nav-menu,.nav-drop:focus-within .nav-menu{transform:translateY(0)}}
.nav-menu::before{content:"";position:absolute;top:-10px;left:0;right:0;height:10px}
.nav-menu a{display:flex;gap:12px;align-items:flex-start;padding:10px 12px;border-radius:9px;color:var(--foreground)}
.nav-menu a:hover{background:var(--accent);color:var(--foreground)}
.nav-menu .mi{width:32px;height:32px;flex-shrink:0;border-radius:8px;background:var(--sage-tint);color:var(--sage-deep);display:grid;place-items:center}
.nav-menu .mi svg{width:16px;height:16px}
.nav-menu b{display:block;font-size:14px;font-weight:600;letter-spacing:-0.006em;line-height:1.3}
.nav-menu span{display:block;font-size:12.5px;color:var(--muted-foreground);line-height:1.4;margin-top:2px}
/* `margin-left:auto` unconditionally, not inside the phone query: scoped there it snapped, the
   cluster sitting on the 576px gutter at a 600px viewport and its right edge jumping back to 396
   at 601, where it stayed until 900. Above
   900px `.nav-links{flex:1}` has already eaten the free space, so it is a no-op there. */
.nav-cta{display:flex;gap:10px;align-items:center;margin-left:auto}
.nav-cta .login{color:var(--muted-foreground);font-size:14.5px;font-weight:500}
.nav-cta .login:hover{color:var(--foreground)}
/* `flex:none`, because this box carries `overflow:hidden` for its rounded corners - so when the
   row ran short it did not squeeze, it silently ate the second language. Measured in Dutch at 320
   before the header wrapped: 58px border-box, so 56px of content box holding 75px of content -
   19px with nowhere to go, which `CLIPPED_PROBE` saw as 17.6px past the clipping edge. Either way
   "EN" was cut with nothing on screen to say a second language existed. English was not spared
   either - on `/en/` the switcher held 75px of content in 55px and lost 18.8px of the same "EN"
   chip, which is the active one there. Only the 1px logo below was Dutch-only. */
.lang{display:inline-flex;flex:none;align-items:center;border:1px solid var(--border);border-radius:8px;overflow:hidden;margin-right:4px}
.lang a{padding:5px 10px;font-size:12.5px;font-weight:600;letter-spacing:.02em;color:var(--muted-foreground);line-height:1}
.lang a:hover{color:var(--foreground);background:var(--accent)}
.lang a.on{background:var(--primary);color:var(--primary-foreground);pointer-events:none}
/* hero */
.hero{padding:88px 0 0;text-align:center;background:linear-gradient(to bottom,var(--sage-tint),var(--background) 62%)}
.hero .lead{max-width:640px;margin:22px auto 0}
.hero h1{max-width:820px;margin:18px auto 0}
.hero-cta{display:flex;gap:12px;justify-content:center;margin-top:34px;flex-wrap:wrap}
.hero-note{margin-top:16px;font-size:14px;color:var(--subtle)}
.hero-note strong{color:var(--muted-foreground);font-weight:600}
.hero-shot{margin:64px auto 0;max-width:1020px;padding:0 24px}
.browser{border:1px solid var(--border);border-radius:var(--radius-xl);background:var(--card);box-shadow:var(--shadow-xl);overflow:hidden}
.browser-bar{display:flex;align-items:center;gap:8px;padding:11px 16px;border-bottom:1px solid var(--border);background:var(--muted)}
.browser-bar i{width:11px;height:11px;border-radius:50%;background:var(--border-strong)}
.browser-bar .url{margin:0 auto;font-family:var(--font-mono);font-size:12px;color:var(--subtle);background:var(--card);border:1px solid var(--border);border-radius:6px;padding:3px 14px}
/* sections */
section{padding:96px 0}
.sec-head{max-width:620px;margin-bottom:56px}
.sec-head h2{margin-top:14px}
.sec-head .lead{margin-top:14px;font-size:17.5px}
/* feature grid */
.grid6{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.fcard{border:1px solid var(--border);border-radius:var(--radius-xl);background:var(--card);box-shadow:var(--shadow-xs);padding:26px 24px;display:flex;flex-direction:column;gap:10px}
.fcard .ico{width:38px;height:38px;border-radius:var(--radius-lg);background:var(--sage-tint);color:var(--sage-deep);display:grid;place-items:center;margin-bottom:6px}
.fcard .ico svg{width:19px;height:19px}
.fcard p{font-size:14.5px;color:var(--muted-foreground);line-height:1.55}
/* full-width feature blocks */
.fblock{padding:88px 0}
.fblock.tint{background:var(--muted);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.fblock-head{display:grid;grid-template-columns:5fr 6fr;gap:64px;align-items:start;margin-bottom:52px}
.fblock-head h2{margin-top:14px}
.fblock-head .lead{margin-top:14px;font-size:17px}
.fblock-head .dive-list{margin-top:6px}
.fblock .browser{max-width:960px;margin:0 auto}
.fblock .browser img{width:100%}
/* alternating deep dives */
.dive{display:grid;grid-template-columns:5fr 6fr;gap:64px;align-items:center;padding:72px 0}
.dive.flip .dive-txt{order:2}
.dive-txt h2{margin-top:14px}
.dive-txt .lead{margin-top:14px;font-size:17px}
.dive-list{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-direction:column;gap:14px}
.dive-list li{display:flex;gap:12px;font-size:15px;line-height:1.5;color:var(--foreground)}
.dive-list li svg{width:18px;height:18px;flex-shrink:0;margin-top:3px;color:var(--sage)}
.dive-list li strong{font-weight:600}
.dive-list li span{color:var(--muted-foreground)}
.dive-shot{border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:var(--shadow-md);overflow:hidden;background:var(--card)}
/* dark booking section */
.dark{background:var(--ink);color:oklch(0.97 0.004 90);border-radius:0}
.dark .eyebrow{color:var(--sage-soft)}
.dark .eyebrow::before{background:var(--sage-soft)}
.dark h2{color:#fff}
.dark .lead{color:var(--ink-muted)}
.dark .dive-list li{color:oklch(0.93 0.006 90)}
.dark .dive-list li span{color:var(--ink-muted)}
.dark .dive-list li svg{color:var(--sage-soft)}
.phones{display:flex;gap:24px;justify-content:center;align-items:flex-start}
.phone{width:min(270px,40vw);border-radius:24px;overflow:hidden;background:#fff;border:1px solid var(--ink-border);box-shadow:0 30px 60px -20px rgba(0,0,0,.5)}
.phone img{width:100%}
.phone.lift{margin-top:44px}
.dark .btn{background:transparent;border-color:var(--ink-border);color:#fff;box-shadow:none}
.dark .btn:hover{background:var(--ink-2);border-color:oklch(0.4 0.02 130);color:#fff}
.dark .btn.primary{background:#fff;border-color:#fff;color:var(--ink)}
.dark .btn.primary:hover{background:oklch(0.9 0.01 130);border-color:oklch(0.9 0.01 130);color:var(--ink)}
/* switch band */
.switch-band{border:1px solid var(--border);border-radius:var(--radius-xl);background:var(--card);box-shadow:var(--shadow-xs);padding:40px 44px;display:flex;gap:40px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.switch-band h3{font-size:22px;letter-spacing:-0.012em}
.switch-band p{color:var(--muted-foreground);font-size:15px;max-width:520px;margin-top:8px}
/* pricing */
.price-card{max-width:520px;margin:0 auto;border:1px solid var(--border);border-radius:18px;background:var(--card);box-shadow:var(--shadow-md);overflow:hidden;text-align:center}
.price-head{padding:40px 40px 30px;background:linear-gradient(to top,var(--sage-tint),var(--card))}
.price-amount{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:6px;margin-top:16px}
.price-amount .cur{font-size:26px;font-weight:600;color:var(--muted-foreground)}
.price-amount .num{font-size:64px;font-weight:700;letter-spacing:-0.03em;line-height:1}
.price-amount .per{font-size:15px;color:var(--muted-foreground)}
.price-sub{margin-top:10px;font-size:14.5px;color:var(--muted-foreground)}
.price-body{padding:32px 40px 40px;text-align:left}
.price-list{list-style:none;margin:0 0 30px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:11px 20px}
.price-list li{display:flex;gap:9px;font-size:14px;color:var(--foreground);line-height:1.4}
.price-list li svg{width:16px;height:16px;flex-shrink:0;margin-top:2px;color:var(--sage)}
.price-body .btn{width:100%}
.price-note{text-align:center;margin-top:14px;font-size:13.5px;color:var(--subtle)}
/* faq */
.faq{max-width:720px;margin:0 auto}
.faq details{border-bottom:1px solid var(--border)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 4px;font-size:16.5px;font-weight:600;letter-spacing:-0.006em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:22px;font-weight:400;color:var(--subtle);transition:transform .15s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 4px 22px;color:var(--muted-foreground);font-size:15px;max-width:640px}
/* final cta */
.final{background:var(--ink);text-align:center;padding:110px 0}
.final h2{color:#fff;font-size:clamp(30px,4vw,44px)}
.final .lead{color:var(--ink-muted);max-width:520px;margin:18px auto 0}
.final .hero-cta{margin-top:36px}
.final .hero-note{color:oklch(0.6 0.02 130)}
/* footer */
footer{border-top:1px solid var(--border);padding:56px 0 48px;background:var(--background)}
.foot{display:flex;justify-content:space-between;gap:48px;flex-wrap:wrap}
.foot-brand img{height:32px;width:auto}
.foot-brand p{margin-top:14px;font-size:13.5px;color:var(--subtle);max-width:280px}
.foot-cols{display:flex;gap:64px;flex-wrap:wrap}
.foot-col{display:flex;flex-direction:column;gap:9px}
.foot-col b{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--subtle);margin-bottom:4px}
.foot-col a{font-size:14px;color:var(--muted-foreground)}
.foot-col a:hover{color:var(--foreground)}
.foot-legal{margin-top:44px;padding-top:22px;border-top:1px solid var(--border);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--subtle)}
@media (max-width:900px){
.grid6{grid-template-columns:1fr 1fr}
.dive{grid-template-columns:1fr;gap:36px;padding:56px 0}
.dive.flip .dive-txt{order:0}
.fblock-head{grid-template-columns:1fr;gap:28px;margin-bottom:36px}
.fblock{padding:64px 0}
.nav-links{display:none}
section{padding:72px 0}
}
/* Mirrors `src/frontend/src/index.css`, which has honoured this since Slice 0 while the landing
   did not. `scroll-behavior:smooth` is the one that matters here: every nav link on this page is
   an in-page anchor, so following one animated the whole document past a reader who had asked the
   operating system for exactly that not to happen. The transitions are already 150ms; the clamp is
   the app's rule kept verbatim rather than trimmed to what today's stylesheet happens to need. */
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:150ms !important;animation-iteration-count:1 !important;transition-duration:150ms !important;scroll-behavior:auto !important}
}
@media (max-width:600px){
/* `.nav-in` is also `.wrap`, so the horizontal padding here has to repeat the gutter rather
   than reset it - `padding:10px 0` put the signup button flush against the screen edge. */
.nav-in{flex-wrap:wrap;height:auto;gap:8px 14px;padding:10px 24px}
/* The second row has to fit the 272px content box at 320: the switcher (75) and "Inloggen"
   (60) are fixed, so the gutter comes off the button rather than off the label. That padding is
   also what keeps the button's label on one line here - `.btn` deliberately carries no
   `white-space:nowrap`, because a blanket one put the switch band's "Probeer het met je eigen
   data" 23.7px outside its own card at this width, and measured, removing it leaves this header
   bit-identical. */
.nav-cta{gap:10px}
.nav-cta .btn{padding:9px 14px}
.nav-logo{flex:0 0 auto}
/* 22px of lockup is 136px, which leaves the 272px content box at 320 room for the rest of the row. */
.nav-logo img{height:22px}
.grid6{grid-template-columns:1fr}
.price-list{grid-template-columns:1fr}
.phones{flex-direction:column;align-items:center}
.phone.lift{margin-top:0}
.hero{padding-top:56px}
}