/* The front page of www.samenshop.net (index.html) in the design of 12-11-2026 (docs/LANDING.md, "Premium ontwerp").
   Bennie asked for a page that looks more professional and premium, with the same logo and colours: his photo of the
   phone and the bag large at the top, cards with pictures, a dark green part for the Android app, one green block to
   sign up. Only index.html uses this file; the other pages keep styles.css. Phone first, always light. The tokens are
   the Samen house style (docs/HUISSTIJL.md). No fonts, scripts or trackers from elsewhere; the CSP allows no inline
   styles, so every style lives here. */
:root {
  color-scheme: only light;
  --paper: #ffffff;
  --ink: #1d1d1f;
  --soft: #4a5350;
  --muted: #5f6368;
  --line: #e3e8e5;
  --brand: #1d6847;
  --brand-hover: #17573b;
  --tint: #eaf4ee;
  --glow: #dcefe4;
  --mist: #f1f7f3;
  --deep: #0f2a1f;
  --on-deep: #eef6f1;
  --deep-muted: #b9d0c4;
  --leaf: #7fd1a3;
  --gold-soft: #fff3d9;
  --pad: clamp(20px, 5vw, 64px);
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --display: ui-sans-serif, system-ui, -apple-system, "Segoe UI Variable Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 17px/1.55 var(--font); -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
img { max-width: 100%; height: auto; display: block; }
svg { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
a { color: var(--brand); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { font-family: var(--display); margin: 0; font-weight: 780; color: inherit; text-wrap: balance; }
h2 { font-size: clamp(30px, 3.8vw, 48px); line-height: 1.08; letter-spacing: -0.035em; }
h3 { font-size: 21px; line-height: 1.25; letter-spacing: -0.02em; font-weight: 750; }
p { margin: 0; text-wrap: pretty; }
.wrap { width: min(1120px, 100% - 2 * var(--pad)); margin-inline: auto; }
.skip { position: absolute; left: -9999px; top: 12px; z-index: 50; background: var(--paper); color: var(--ink); padding: 10px 16px; border-radius: 12px; }
.skip:focus { left: 16px; }
.center { text-align: center; }
/* A part that is switched off stays away, also when a class gives it a display of its own (the question about the phone). */
[hidden] { display: none !important; }
.eyebrow { margin: 0 0 12px; font-size: 13px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--brand); }
.small { font-size: 14px; line-height: 1.5; color: var(--muted); }

/* Buttons */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: inherit; font-weight: 700; font-size: 16px;
  text-decoration: none; border: 0; border-radius: 16px; padding: 0 22px; min-height: 54px; cursor: pointer; color: #fff; background: var(--brand);
  box-shadow: 0 10px 22px -10px rgb(29 104 71 / 70%), inset 0 1px 0 rgb(255 255 255 / 18%);
  transition: transform .18s ease, background-color .25s ease; }
.button svg { width: 18px; height: 18px; stroke-width: 2.2; transition: transform .18s ease; }
.button:hover { background: var(--brand-hover); transform: translateY(-1px); }
.button:hover svg { transform: translateX(3px); }
.button:active { transform: none; }
.button.small { min-height: 44px; padding: 0 20px; border-radius: 22px; font-size: 15px; color: #fff; white-space: nowrap; }
.button.dark { background: var(--deep); box-shadow: none; }
.button.dark:hover { background: #07170f; }
.button.wide { width: 100%; }

/* Top bar */
.top { position: sticky; top: 0; z-index: 20; background: rgb(255 255 255 / 88%); border-bottom: 1px solid rgb(227 232 229 / 80%);
  -webkit-backdrop-filter: saturate(1.4) blur(16px); backdrop-filter: saturate(1.4) blur(16px); }
.top-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; }
.brand { display: inline-flex; align-items: center; }
.brand img { height: 30px; width: auto; }
.top-end { display: flex; align-items: center; gap: clamp(14px, 3vw, 32px); }
.nav-link { padding: 12px 0; font-size: 15px; font-weight: 600; color: var(--ink); text-decoration: none; }
.nav-link:hover { color: var(--brand); }

/* Hero: the promise and the field on the left, the phone with the bag on the right */
.hero { padding: clamp(28px, 4.5vw, 64px) 0 clamp(36px, 5vw, 72px); overflow: hidden; overflow: clip;
  background: radial-gradient(64vw 44vw at 82% 44%, var(--glow) 0%, rgb(220 239 228 / 0%) 64%), linear-gradient(180deg, var(--mist) 0%, #fff 82%); }
.hero-grid { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(20px, 4vw, 56px); }
.hero-copy { flex: 1.2 1 460px; min-width: 0; }
.hero-art { flex: 1 1 420px; min-width: 0; margin: 0; }
.badge { display: inline-flex; align-items: center; gap: 9px; height: 34px; margin: 0 0 22px; padding: 0 14px; border-radius: 17px; background: #fff;
  box-shadow: 0 1px 2px rgb(0 0 0 / 5%), 0 10px 22px -14px rgb(0 0 0 / 25%); font-size: 14px; font-weight: 650; }
.dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); }
.hero h1 { font-size: clamp(38px, 5.2vw, 66px); line-height: 1.04; letter-spacing: -0.04em; }
.accent { color: var(--brand); }
.lead { margin-top: 20px; max-width: 28em; font-size: clamp(18px, 1.9vw, 21px); line-height: 1.5; color: var(--soft); }
.stage { position: relative; width: min(100%, 580px); margin: 0 auto; }
.hero-photo { width: 100%; }
.ai-note { margin: 4px 0 0; font-size: 12px; line-height: 1.4; color: var(--muted); text-align: center; }
/* A piece of a real screen, cut out of the screenshot: the box is the window, the picture is moved behind it. */
.crop, .float { position: absolute; overflow: hidden; }
.crop img, .float img { position: absolute; max-width: none; height: auto; }
/* On a wide screen two pieces of the Android app lie over the photo: the chains with offers for the list (x 24 to 604,
   y 362 to 446 of the 720 wide screenshot) and a suggestion with its offer (x 34 to 686, y 331 to 604). */
.float { display: none; box-shadow: 0 30px 50px -24px rgb(15 42 31 / 55%); }
.float.chips { right: -1%; top: 4%; width: 236px; aspect-ratio: 580 / 84; border-radius: 14px; background: #f3f5f1; rotate: 3deg; }
.float.chips img { left: -4.14%; top: -430.95%; width: 124.14%; }
.float.suggest { right: -3%; bottom: 7%; width: 256px; aspect-ratio: 652 / 273; border-radius: 18px; background: #fff; rotate: -3deg; }
.float.suggest img { left: -5.215%; top: -121.25%; width: 110.43%; }
@media (min-width: 760px) { .float { display: block; } }

/* The e-mail address and the button as one white bar; the name of the field stands inside it */
.join-form { margin: 30px 0 0; max-width: 480px; }
.bar { display: flex; align-items: center; gap: 6px; padding: 6px; background: #fff; border: 1.5px solid #d3ded7; border-radius: 22px;
  box-shadow: 0 1px 2px rgb(0 0 0 / 4%), 0 24px 48px -24px rgb(15 42 31 / 35%); transition: border-color .2s, box-shadow .2s; }
.bar:focus-within { border-color: var(--brand); box-shadow: 0 0 0 4px rgb(29 104 71 / 12%), 0 24px 48px -24px rgb(15 42 31 / 35%); }
.bar .field { flex: 1; min-width: 0; }
/* 17px: above 16px, so an iPhone does not zoom in when the field gets the focus */
.bar input[type=email] { width: 100%; height: 54px; padding: 0 0 0 16px; border: 0; outline: none; background: transparent; font: inherit; font-size: 17px; color: var(--ink); }
.bar input[type=email]::placeholder { color: var(--muted); }
.bar .button { flex: none; padding: 0 18px 0 22px; }
.bar:has(.missing) { border-color: #b3261e; box-shadow: 0 0 0 4px rgb(179 38 30 / 12%); }
.join-form .small { margin-top: 14px; }
/* The message says what is still missing, right under the bar. The red is only for this. */
.status { margin: 0; font-weight: 650; line-height: 1.45; font-size: 15px; }
.status:not(:empty) { margin-top: 10px; padding: 10px 14px; border-radius: 12px; background: #fdecea; color: #8c1d18; }

/* The fourteen chains: names only say whose offers you see (no logos, no tie suggested, and the box says so) */
.chains-box { padding: clamp(22px, 3vw, 34px) clamp(16px, 3vw, 40px); border-radius: 28px; background: #f5f8f6; text-align: center; }
.chains h2 { font: 650 14px/1.4 var(--font); letter-spacing: .01em; color: var(--soft); }
.chains ul { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; }
.chains li { display: flex; align-items: center; height: 34px; padding: 0 13px; border-radius: 17px; background: #fff; border: 1px solid var(--line);
  font-size: 14px; font-weight: 650; }
.chains p { margin-top: 14px; font-size: 13px; line-height: 1.5; color: var(--muted); }

/* What works in the browser: three cards, each with a picture */
.section { padding: clamp(56px, 8vw, 112px) 0 0; }
.cards { margin-top: clamp(26px, 3.6vw, 48px); display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(16px, 2vw, 24px); }
.card { border-radius: 28px; background: #fff; border: 1px solid #e6ebe8; overflow: hidden; box-shadow: 0 1px 2px rgb(0 0 0 / 3%), 0 30px 60px -40px rgb(15 42 31 / 35%); }
.visual { position: relative; height: 220px; overflow: hidden; }
.visual.mint { background: #e7f2ec; }
.visual.amber { background: var(--gold-soft); }
.visual.sage { background: #eef3ef; }
.card-text { padding: 24px 26px 28px; }
.card-text p { margin-top: 8px; font-size: 16px; color: var(--muted); }
/* the top of the list: the whole width of the screenshot, 76 to 312 */
.crop.head { left: 7%; top: 54px; width: 86%; aspect-ratio: 720 / 236; border-radius: 18px; background: #f3f5f1; rotate: -2deg; box-shadow: 0 26px 44px -24px rgb(15 42 31 / 50%); }
.crop.head img { left: 0; top: -32.2%; width: 100%; }
/* the chains with offers for the list, and one product with its offer */
.crop.chips { left: 8%; top: 40px; width: 76%; aspect-ratio: 580 / 84; border-radius: 14px; background: #f3f5f1; rotate: -2deg; box-shadow: 0 20px 36px -22px rgb(138 83 0 / 50%); }
.crop.chips img { left: -4.14%; top: -430.95%; width: 124.14%; }
.crop.row { right: 6%; top: 104px; width: 84%; aspect-ratio: 652 / 144; border-radius: 16px; background: #fff; rotate: 1.5deg; box-shadow: 0 26px 44px -24px rgb(138 83 0 / 55%); }
.crop.row img { left: -5.215%; top: -372.92%; width: 110.43%; }
.bag { position: absolute; left: 50%; top: 22px; height: 268px; width: auto; max-width: none; translate: -50% 0; }

/* The Android app, apart: one dark part with three phones and the map */
.app { margin-top: clamp(56px, 8vw, 112px); padding: clamp(56px, 8vw, 104px) 0 clamp(48px, 7vw, 96px); color: var(--on-deep);
  background: radial-gradient(70vw 40vw at 50% 0%, #1b4a36 0%, rgb(27 74 54 / 0%) 70%), var(--deep); }
.app .eyebrow { color: var(--leaf); }
.app h2, .app h3 { color: #fff; }
.app .sub { margin-top: 10px; color: var(--deep-muted); }
/* on a phone the three stand in one row to swipe through, with the next one in sight */
.phones { margin-top: clamp(26px, 3.6vw, 48px); padding-bottom: 8px; display: flex; gap: clamp(14px, 2vw, 24px); overflow-x: auto; scroll-snap-type: x mandatory; }
.phone-card, .wide-card { border-radius: 28px; border: 1px solid rgb(255 255 255 / 10%); overflow: hidden;
  background: linear-gradient(180deg, rgb(255 255 255 / 8%) 0%, rgb(255 255 255 / 3%) 100%); }
.phone-card { flex: 1 0 min(300px, 78vw); min-width: 0; scroll-snap-align: start; display: flex; flex-direction: column; }
.phone-text { padding: 28px 28px 0; }
.phone-text h3, .wide-text h3 { font-size: 22px; line-height: 1.2; font-weight: 760; }
.phone-text p, .wide-text p { margin-top: 8px; font-size: 16px; line-height: 1.5; color: var(--deep-muted); }
.phone-stage { height: 320px; margin-top: auto; padding: 30px 28px 0; overflow: hidden;
  background: radial-gradient(70% 60% at 50% 78%, rgb(123 225 156 / 22%) 0%, rgb(123 225 156 / 0%) 72%); }
/* a real screenshot in a drawn dark phone (6:13) */
.phone { display: block; width: min(100%, 236px); margin: 0 auto; padding: 7px; border-radius: 34px; background: #0a100d;
  box-shadow: inset 0 0 0 1.5px #4a5650, 0 40px 70px -30px rgb(0 0 0 / 80%); }
.phone img { width: 100%; aspect-ratio: 6 / 13; border-radius: 27px; }
.phone.left { rotate: -3deg; }
.phone.right { rotate: 3deg; }
.wide-card { margin-top: clamp(14px, 2vw, 24px); display: flex; flex-wrap: wrap; align-items: center; }
.wide-card img { flex: 1.3 1 320px; min-width: 0; width: 100%; height: clamp(190px, 22vw, 270px); object-fit: cover; }
.wide-text { flex: 1 1 280px; min-width: 0; padding: clamp(24px, 3.4vw, 44px); }
.app-note { margin-top: 20px; font-size: 14px; color: #9fb9ab; }

/* Who makes it */
.maker { padding: clamp(64px, 9vw, 128px) 0; text-align: center; }
.maker .wrap { max-width: 760px; }
.maker-mark { display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto 22px; border-radius: 50%; background: var(--tint); color: var(--brand); }
.maker-mark svg { width: 24px; height: 24px; }
.maker h2 { font-size: clamp(26px, 3.2vw, 40px); line-height: 1.15; }
.maker p { margin: 16px auto 0; max-width: 34em; color: var(--muted); }

/* Sign-up: the one green block, with the field on it and the steps beside it */
.signup .wrap { width: min(1120px, 100% - 2 * clamp(12px, 4vw, 64px)); }
/* clip, not hidden: the two circles reach outside the block, and a hidden box can still be moved sideways when the
   browser brings a field into view; then the form stood half out of the block on a phone */
.panel { position: relative; isolation: isolate; overflow: hidden; overflow: clip; display: flex; flex-wrap: wrap; align-items: center; gap: clamp(32px, 5vw, 72px);
  padding: clamp(32px, 6vw, 72px) clamp(18px, 6vw, 72px); border-radius: clamp(28px, 3.4vw, 40px); color: #fff;
  background: linear-gradient(135deg, var(--brand) 0%, #27744f 55%, #2f7f58 100%); box-shadow: 0 40px 80px -40px rgb(15 42 31 / 60%); }
.panel::before, .panel::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; }
.panel::before { right: -110px; top: -150px; width: 420px; height: 420px; background: rgb(255 255 255 / 7%); }
.panel::after { right: 120px; bottom: -220px; width: 360px; height: 360px; background: rgb(255 255 255 / 5%); }
.panel-main { flex: 1.2 1 420px; min-width: 0; }
.panel h2 { font-size: clamp(30px, 3.8vw, 46px); }
.panel-lead { margin-top: 12px; color: #e0f1e7; }
.panel .join-form { margin-top: 28px; }
.panel .bar { border-color: #fff; box-shadow: 0 24px 48px -24px rgb(0 0 0 / 50%); }
.panel .bar:focus-within { border-color: #7be19c; box-shadow: 0 0 0 4px rgb(123 225 156 / 30%), 0 24px 48px -24px rgb(0 0 0 / 50%); }
.panel :focus-visible { outline-color: #bde9d2; }
.panel .bar:has(.missing) { border-color: #b3261e; box-shadow: 0 0 0 4px rgb(179 38 30 / 30%), 0 24px 48px -24px rgb(0 0 0 / 50%); }
.panel .join-form .small { color: #e0f1e7; }
.panel .join-form a { color: #fff; }
.steps { flex: 1 1 300px; min-width: 0; margin: 0; padding: 0; list-style: none; display: grid; gap: 22px; }
.steps li { display: flex; align-items: flex-start; gap: 16px; font-size: 15px; line-height: 1.5; color: #e0f1e7; }
.steps strong { display: block; margin-top: 5px; font-size: 18px; line-height: 1.3; font-weight: 700; color: #fff; }
.num { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: rgb(255 255 255 / 14%); color: #fff;
  font-size: 15px; font-weight: 750; }

/* "Welke telefoon gebruiken jullie?": only where the page cannot tell (a computer), and without JavaScript (app.js) */
.phone-ask { margin: 14px 0 0; padding: 0; border: 0; min-width: 0; }
.label { padding: 0; font-weight: 650; font-size: 15px; }
legend.label { margin-bottom: 8px; }
.seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.seg label { position: relative; }
.seg input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.seg span { display: flex; align-items: center; justify-content: center; padding: 11px 2px; border-radius: 14px; font-size: 15px; font-weight: 650;
  color: var(--ink); background: #fff; border: 1px solid #c5d2ca; transition: background-color .2s, border-color .2s, color .2s; }
.seg input:checked + span { background: var(--brand); border-color: var(--brand); color: #fff; }
.seg input:focus-visible + span { outline: 3px solid var(--brand); outline-offset: 2px; }
.phone-ask.missing .seg span { border-color: #b3261e; }
.panel .label { color: #fff; }
.panel .seg span { border-color: #fff; }
.panel .seg input:checked + span { background: var(--deep); border-color: var(--deep); }
.panel .seg input:focus-visible + span { outline-color: #bde9d2; }
/* The honeypot of Brevo: display none, as in Brevo's own form (docs/LANDING.md, "Formulier"). */
.trap { display: none !important; }

/* Questions */
.questions { padding: clamp(64px, 9vw, 120px) 0; }
.split { display: flex; flex-wrap: wrap; gap: 24px clamp(32px, 6vw, 96px); }
.split header { flex: 1 1 260px; min-width: 0; }
.questions h2 { font-size: clamp(30px, 3.8vw, 44px); }
.sub { margin-top: 12px; color: var(--muted); }
.faq { flex: 2.2 1 480px; min-width: 0; border-bottom: 1px solid var(--line); }
.faq details { border-top: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px;
  font-size: 18px; font-weight: 650; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 18px; height: 18px; transition: rotate .25s ease;
  background: linear-gradient(var(--brand), var(--brand)) center / 14px 2px no-repeat, linear-gradient(var(--brand), var(--brand)) center / 2px 14px no-repeat; }
.faq details[open] summary::after { rotate: 45deg; }
.faq details p { padding: 0 0 20px; max-width: 40em; font-size: 16px; color: var(--muted); }

/* Footer: the one dark band, an anchor at the bottom */
.foot { padding: clamp(36px, 5vw, 56px) 0; background: var(--deep); color: #a9c2b5; font-size: 14px; }
.foot :focus-visible { outline-color: #bde9d2; }
.foot-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 40px; }
.foot .brand img { height: 28px; }
.foot-note { flex: 1 1 320px; min-width: 0; }
.foot-links { display: flex; flex-wrap: wrap; gap: 4px 24px; font-size: 15px; font-weight: 600; }
.foot-links a { padding: 10px 0; color: var(--on-deep); }
.foot-count { margin-top: 22px; padding-top: 20px; border-top: 1px solid rgb(255 255 255 / 10%); font-size: 13px; }

/* Motion: gentle, and only for those who did not ask for less */
@media (prefers-reduced-motion: no-preference) {
  .hero-copy > * { animation: rise .9s cubic-bezier(.2, .7, .2, 1) both; }
  .hero-copy > :nth-child(2) { animation-delay: .06s; }
  .hero-copy > :nth-child(3) { animation-delay: .12s; }
  .hero-copy > :nth-child(4) { animation-delay: .18s; }
  .hero-photo { animation: arrive 1.1s cubic-bezier(.2, .7, .2, 1) .1s both; }
  .float { animation: arrive 1s cubic-bezier(.2, .7, .2, 1) .7s both; }
  .float.suggest { animation-delay: .9s; }
}
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes arrive { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: none; } }