/** Shopify CDN: Minification failed

Line 1533:0 Unexpected "}"

**/
/* Motion — shared site styles */

:root {
  --bg: #FAFAF8;
  --ink: #16181D;
  --card-dark: #21242B;
  --blue: #2F5BE0;
  --blue-deep: #2647B8;
  --muted: #5b616b;
  --muted-cool: #8d939b;
  --body-soft: #3a3d40;
  --line: #E6E4DE;
  --red: #E5484D;
  --amber: #E0922E;
  --green: #22B07D;
  --badge-bg: #EEF2FD;
  --badge-line: #D6E0FA;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-display: 'General Sans', 'Inter', sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
a { color: var(--blue-deep); text-decoration: none; }
a:hover { color: var(--blue); }
img { display: block; max-width: 100%; }
button { font-family: inherit; }
input, textarea, select { font-family: inherit; }
::selection { background: var(--blue); color: #fff; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(18px, 4vw, 32px);
}

/* Buttons */
.btn {
  display: inline-block;
  background: var(--blue);
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .24px;
  padding: 11px 22px;
  border-radius: 9999px;
}
.btn:hover { background: var(--blue-deep); color: #fff; }
.btn-hero { font-size: 16px; padding: 15px 32px; }
.btn-cta { font-size: 17px; padding: 16px 34px; }

/* Announcement bar */
.announcement {
  background: var(--blue);
  color: #fff;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .3px;
  line-height: 1.35;
  padding: 9px 20px;
}

/* Nav */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--ink);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
/* Grid rather than space-between: the logo (95px) and the cart button (44px)
   are different widths, so flex pushed the nav links 26px off-centre and they
   no longer lined up with the centred announcement bar above. Equal 1fr side
   columns put the links dead centre whatever sits beside them. */
.nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(18px, 4vw, 32px);
  height: 70px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
}
/* Placed explicitly: under 768px .nav-links is display:none, and without a
   column assignment the actions would auto-place into the empty middle
   column and land mid-bar instead of hard right. */
.nav-inner > .nav-logo { grid-column: 1; justify-self: start; }
.nav-inner > .nav-links { grid-column: 2; }
.nav-inner > .nav-actions { grid-column: 3; justify-self: end; }
.nav-logo { display: flex; align-items: center; flex: none; }
.nav-logo img { height: 28px; width: auto; }
.nav-links { display: flex; align-items: center; gap: 30px; }
.nav-links a { color: rgba(255, 255, 255, .82); font-size: 15px; font-weight: 500; letter-spacing: .2px; }
.nav-links a:hover { color: #fff; }
.nav-links a.is-active { color: #fff; font-weight: 600; }
.nav-actions { display: flex; align-items: center; gap: 10px; flex: none; }
.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.nav-toggle span { width: 22px; height: 2px; background: #fff; border-radius: 2px; }

/* Mobile menu */
.mobile-menu {
  display: none;
  background: var(--ink);
  border-top: 1px solid rgba(255, 255, 255, .1);
  padding: 8px clamp(18px, 4vw, 32px) 22px;
  flex-direction: column;
}
.mobile-menu a {
  color: #fff;
  font-size: 17px;
  font-weight: 500;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.mobile-menu a:hover { color: #fff; }
.mobile-menu a:nth-last-child(2) { border-bottom: none; }
.mobile-menu .mobile-buy {
  margin-top: 16px;
  text-align: center;
  background: var(--blue);
  color: #fff;
  font-weight: 600;
  font-size: 16px;
  padding: 15px;
  border-radius: 9999px;
  border-bottom: none;
}
.mobile-menu .mobile-buy:hover { background: var(--blue-deep); }

@media (max-width: 768px) {
  .nav-links { display: none; }
  .nav-cta { display: none; }
  .nav-toggle { display: flex; }
  .site-nav.is-open .mobile-menu { display: flex; }
}

/* Hero */
.hero {
  background: var(--bg);
  padding: clamp(52px, 8vw, 92px) 0 clamp(40px, 5vw, 56px);
}
.hero-inner {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 clamp(18px, 4vw, 32px);
  text-align: center;
}
.badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--badge-bg);
  border: 1px solid var(--badge-line);
  border-radius: 9999px;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .3px;
  color: var(--blue-deep);
  margin-bottom: 24px;
}
.badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--blue);
  display: inline-block;
}
.hero h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(40px, 7vw, 80px);
  line-height: 1.0;
  letter-spacing: -.03em;
  margin: 0 0 22px;
}
.hero p {
  font-size: clamp(16px, 1.6vw, 20px);
  line-height: 1.55;
  color: var(--muted);
  margin: 0 auto 34px;
  max-width: 560px;
}

/* Sections */
.section { padding: clamp(56px, 8vw, 96px) 0; }
.section-dark { background: var(--ink); color: #fff; }
.section h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(30px, 4.6vw, 50px);
  line-height: 1.03;
  letter-spacing: -.02em;
}
.section-head { max-width: 720px; margin-bottom: 44px; }
.section-head p { font-size: 18px; line-height: 1.6; color: var(--muted); margin: 0; }
.eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 16px;
}
.section-dark .eyebrow { color: var(--blue); }

/* Three taps */
.taps h2 {
  font-size: clamp(28px, 4.4vw, 46px);
  line-height: 1.04;
  margin: 0 0 12px;
  max-width: 760px;
}
.taps .section-sub {
  font-size: 18px;
  line-height: 1.55;
  color: rgba(255, 255, 255, .72);
  margin: 0 0 48px;
  max-width: 600px;
}
.tap-cards { display: flex; flex-direction: column; gap: 20px; }
.tap-card {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
  background: var(--card-dark);
  border-radius: 24px;
  overflow: hidden;
}
.tap-card-text { padding: clamp(28px, 4vw, 48px); }
.tap-card-alt .tap-card-text { order: 1; }
.tap-card-alt .tap-card-media { order: 2; }
.tap-num {
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.02em;
}
.tap-num-blue { color: var(--blue); }
.tap-num-red { color: var(--red); }
.tap-num-green { color: var(--green); }
.tap-card h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 26px;
  letter-spacing: -.01em;
  margin: 18px 0 12px;
}
.tap-card-text p { font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, .72); margin: 0; }
.tap-card-media { aspect-ratio: 4 / 3; min-height: 240px; overflow: hidden; }
.tap-card-media img { width: 100%; height: 100%; object-fit: cover; }

/* Why a tap beats an app */
.compare h2 { font-size: clamp(28px, 4.6vw, 48px); line-height: 1.03; margin: 0 0 16px; }
.compare-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 20px;
}
.compare-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 30px;
}
.compare-label { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.compare-label span:last-child {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--muted-cool);
}
.dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.dot-red { background: var(--red); }
.dot-amber { background: var(--amber); }
.dot-white { background: #fff; }
.compare-card p { font-size: 16px; line-height: 1.55; color: var(--body-soft); margin: 0; }
.compare-card-motion { background: var(--blue); border: none; }
.compare-card-motion .compare-label span:last-child { color: #fff; }
.compare-card-motion p { color: #fff; }

/* Setup */
.setup .section-head { max-width: 680px; }
.setup h2 { font-size: clamp(28px, 4.6vw, 48px); line-height: 1.03; margin: 0; }
.setup-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 24px;
}
.setup-card { background: var(--card-dark); border-radius: 20px; padding: 30px; }
.setup-step {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  color: var(--blue);
  margin-bottom: 14px;
}
.setup-card h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  margin: 0 0 8px;
}
.setup-card p { font-size: 15px; line-height: 1.55; color: rgba(255, 255, 255, .72); margin: 0; }

/* CTA */
.cta-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 clamp(18px, 4vw, 32px);
  text-align: center;
}
.cta h2 { font-size: clamp(30px, 4.6vw, 48px); line-height: 1.03; margin: 0 0 16px; }
.cta p {
  font-size: 18px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0 auto 32px;
  max-width: 540px;
}

/* Footer */
.site-footer { background: var(--ink); color: #fff; padding: 72px 0 40px; }
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
  gap: 40px;
  padding-bottom: 48px;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.footer-brand { grid-column: 1 / -1; max-width: 320px; }
.footer-brand img { height: 22px; width: auto; margin-bottom: 18px; }
.footer-brand p { font-size: 14.5px; line-height: 1.55; color: rgba(255, 255, 255, .6); margin: 0; }
.footer-head {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
  margin-bottom: 16px;
}
.footer-links { display: flex; flex-direction: column; gap: 11px; }
.footer-links a { color: rgba(255, 255, 255, .82); font-size: 14.5px; }
.footer-links a:hover { color: #fff; }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding-top: 26px;
  color: rgba(255, 255, 255, .45);
  font-size: 13px;
}
.footer-legal { display: flex; gap: 22px; flex-wrap: wrap; }
.footer-legal a { color: rgba(255, 255, 255, .45); }
.footer-legal a:hover { color: rgba(255, 255, 255, .75); }
.site-footer--divided { border-top: 1px solid rgba(255, 255, 255, .12); }

/* Button variants */
.btn-bright:hover { background: #3B6AE8; }
.btn-outline-light {
  display: inline-block;
  border: 1px solid rgba(255, 255, 255, .55);
  color: #fff;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: .24px;
  padding: 14px 28px;
  border-radius: 9999px;
}
.btn-outline-light:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.btn-outline-ink {
  display: inline-block;
  background: #fff;
  color: var(--ink);
  font-weight: 600;
  font-size: 15px;
  padding: 12px 22px;
  border-radius: 9999px;
  border: 1px solid var(--ink);
}
.btn-outline-ink:hover { background: var(--ink); color: #fff; }

/* Page hero (FAQ / Support) */
.page-hero { background: var(--bg); padding: clamp(52px, 8vw, 88px) 0 clamp(32px, 4vw, 44px); }
.page-hero--tight { padding-bottom: clamp(20px, 3vw, 32px); }
.page-hero-inner {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 clamp(18px, 4vw, 32px);
  text-align: center;
}
.page-hero h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(38px, 6vw, 68px);
  line-height: 1.0;
  letter-spacing: -.03em;
  margin: 0 0 20px;
}
.page-hero p {
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.55;
  color: var(--muted);
  margin: 0 auto;
  max-width: 520px;
}
.page-hero p a { font-weight: 600; }

/* FAQ */
.faq-body { background: var(--bg); padding: clamp(24px, 4vw, 40px) 0 clamp(64px, 9vw, 104px); }
.faq-inner { max-width: 820px; margin: 0 auto; padding: 0 clamp(18px, 4vw, 32px); }
.faq-cat { margin-bottom: 40px; }
.faq-cat h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(20px, 2.4vw, 26px);
  letter-spacing: -.01em;
  margin: 0 0 8px;
}
.faq-list { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 22px 0;
  text-align: left;
}
.faq-q .faq-question {
  font-family: var(--font-display);
  font-size: clamp(16px, 1.9vw, 19px);
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--ink);
}
.faq-q .faq-sign {
  font-size: 26px;
  font-weight: 400;
  color: var(--blue);
  flex: none;
  line-height: 1;
}
.faq-a {
  display: none;
  padding: 0 0 24px;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 680px;
}
.faq-item.is-open .faq-a { display: block; }

/* Dark contact CTA (FAQ) */
.contact-cta { background: var(--ink); color: #fff; padding: clamp(48px, 7vw, 80px) 0; }
.contact-cta-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 clamp(18px, 4vw, 32px);
  text-align: center;
}
.contact-cta h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(26px, 4vw, 40px);
  line-height: 1.05;
  letter-spacing: -.02em;
  margin: 0 0 14px;
}
.contact-cta p {
  font-size: 17px;
  line-height: 1.55;
  color: rgba(255, 255, 255, .72);
  margin: 0 auto 28px;
  max-width: 500px;
}
.contact-cta .cta-row { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.contact-cta .btn { font-size: 16px; padding: 15px 30px; }

/* Support cards */
.support-cards { background: var(--bg); padding: clamp(32px, 5vw, 56px) 0 clamp(40px, 6vw, 64px); }
.support-cards-inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 clamp(18px, 4vw, 32px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 20px;
}
.support-card {
  border-radius: 20px;
  padding: 32px;
  display: flex;
  flex-direction: column;
}
.support-card--dark { background: var(--ink); color: #fff; }
.support-card--light { background: #fff; border: 1px solid var(--line); }
.support-card .card-eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 14px;
}
.support-card h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -.01em;
  margin: 0 0 10px;
}
.support-card p { font-size: 15px; line-height: 1.55; margin: 0 0 20px; }
.support-card--dark p { color: rgba(255, 255, 255, .72); }
.support-card--light p { color: var(--muted); }
.support-card .card-btn { margin-top: auto; align-self: flex-start; }
.support-card .btn { font-size: 15px; padding: 12px 22px; }
.quick-links { max-width: 1000px; margin: 24px auto 0; padding: 0 clamp(18px, 4vw, 32px); }
.quick-links-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 14px;
}
.quick-link {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px;
  color: var(--ink);
}
.quick-link:hover { border-color: var(--blue); color: var(--ink); }
.quick-link .ql-title { font-weight: 600; font-size: 16px; margin-bottom: 4px; }
.quick-link .ql-sub { font-size: 14px; color: var(--muted-cool); }

/* Support contact form */
.contact-form-section { background: var(--ink); color: #fff; padding: clamp(56px, 8vw, 96px) 0; }
.contact-form-inner { max-width: 760px; margin: 0 auto; padding: 0 clamp(18px, 4vw, 32px); }
.contact-form-head { text-align: center; margin-bottom: 40px; }
.contact-form-head h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(28px, 4.4vw, 44px);
  line-height: 1.03;
  letter-spacing: -.02em;
  margin: 0;
}
.support-form { display: flex; flex-direction: column; gap: 16px; }
.support-form .form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 16px;
}
.support-form label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, .72);
  margin-bottom: 8px;
}
.support-form input,
.support-form select {
  width: 100%;
  height: 52px;
  background: var(--card-dark);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 12px;
  padding: 0 16px;
  font-size: 16px;
  color: #fff;
}
.support-form textarea {
  width: 100%;
  background: var(--card-dark);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 16px;
  color: #fff;
  line-height: 1.5;
  resize: vertical;
}
.support-form button[type="submit"] {
  align-self: flex-start;
  background: var(--blue);
  color: #fff;
  border: none;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: .24px;
  padding: 15px 32px;
  border-radius: 9999px;
  cursor: pointer;
}
.support-form button[type="submit"]:hover { background: #3B6AE8; }
.form-success {
  background: var(--card-dark);
  border: 1px solid rgba(34, 176, 125, .4);
  border-radius: 20px;
  padding: 40px;
  text-align: center;
}
.form-success[hidden] { display: none; }
.form-success .success-check {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  font-size: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}
.form-success h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 24px;
  margin: 0 0 10px;
}
.form-success p { font-size: 16px; line-height: 1.55; color: rgba(255, 255, 255, .72); margin: 0; }

/* Legal pages */
.legal-header { background: var(--bg); padding: clamp(46px, 7vw, 80px) 0 clamp(20px, 3vw, 28px); }
.legal-header-inner { max-width: 820px; margin: 0 auto; padding: 0 clamp(18px, 4vw, 32px); }
.legal-header h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(34px, 5.4vw, 58px);
  line-height: 1.02;
  letter-spacing: -.03em;
  margin: 0 0 14px;
}
.legal-updated { font-size: 15px; color: var(--muted-cool); margin: 0; }
.legal-tabs { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 26px; }
.legal-tab {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--muted);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 9999px;
  padding: 7px 15px;
}
.legal-tab:hover { color: var(--blue); }
.legal-tab.is-active {
  color: var(--blue);
  background: var(--badge-bg);
  border-color: var(--badge-line);
}
.legal-body { background: var(--bg); padding: clamp(24px, 4vw, 40px) 0 clamp(64px, 9vw, 104px); }
.legal-inner { max-width: 820px; margin: 0 auto; padding: 0 clamp(18px, 4vw, 32px); }
.legal-lead { margin: 0 0 20px; font-size: 17px; line-height: 1.68; color: var(--body-soft); }
.legal-lead a { font-weight: 600; }
.legal-section { margin: 0 0 34px; }
.legal-section h2 {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(19px, 2.4vw, 25px);
  letter-spacing: -.01em;
  color: var(--ink);
  scroll-margin-top: 90px;
}
.legal-section h3 {
  margin: 20px 0 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  color: var(--ink);
}
.legal-section p { margin: 0 0 15px; font-size: 16px; line-height: 1.68; color: var(--body-soft); }
.legal-section p a { font-weight: 600; }
.legal-section ul { margin: 6px 0 18px; padding-left: 22px; }
.legal-section li { margin: 0 0 9px; font-size: 16px; line-height: 1.6; color: var(--body-soft); }
.legal-section li a { font-weight: 600; }
.legal-section strong { font-weight: 600; color: var(--ink); }
.legal-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px 24px;
  margin: 0 0 20px;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--body-soft);
}
.legal-card strong { font-weight: 600; color: var(--ink); }
.legal-card a { font-weight: 600; }
.legal-note {
  margin-top: 40px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
}
.legal-note a { font-weight: 600; }
.legal-table { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; margin: 6px 0 18px; }
.lt-head {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  background: var(--ink);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .3px;
}
.lt-head > div { padding: 12px 16px; }
.lt-head > div + div { border-left: 1px solid rgba(255, 255, 255, .15); }
.lt-row {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  background: #fff;
  border-top: 1px solid var(--line);
}
.lt-row.lt-alt { background: #F4F3EE; }
.lt-row > div { padding: 13px 16px; font-size: 14.5px; line-height: 1.5; color: var(--body-soft); }
.lt-row > div + div { border-left: 1px solid var(--line); color: var(--ink); font-weight: 500; }

/* ---------- Home ---------- */

@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}
@keyframes ripple {
  0% { transform: scale(.55); opacity: .5; }
  100% { transform: scale(2.6); opacity: 0; }
}

.container-32 { max-width: 1200px; margin: 0 auto; padding: 0 32px; }

/* Home hero */
.home-hero { background: var(--bg); color: var(--ink); padding: clamp(48px, 7vw, 88px) 0 clamp(52px, 7vw, 88px); }
.home-hero-grid {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(18px, 4vw, 32px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  gap: clamp(36px, 4vw, 64px);
  align-items: center;
}
.home-hero .badge { margin-bottom: 26px; }
.home-hero h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(42px, 7.4vw, 92px);
  line-height: .98;
  letter-spacing: -.03em;
  margin: 0 0 24px;
}
.home-hero .hero-sub {
  /* Ondergrens 17.5px: op telefoon stond dit op 16px (bodytekst-formaat) onder een
     kop van 42px. Boven ~1266px blijft het 19px, dus desktop verandert niet. */
  font-size: clamp(17.5px, 1.5vw, 19px);
  line-height: 1.5;
  color: var(--muted);
  max-width: 500px;
  margin: 0 0 34px;
}
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.btn-outline-hero {
  display: inline-block;
  border: 1px solid var(--ink);
  color: var(--ink);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: .24px;
  padding: 14px 28px;
  border-radius: 9999px;
}
.btn-outline-hero:hover { background: var(--ink); color: #fff; }
.hero-notes {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  margin-top: 28px;
  color: var(--muted-cool);
  font-size: 13.5px;
  font-weight: 500;
}
.hero-visual {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: #EDECE6;
  box-shadow: 0 30px 60px rgba(22, 24, 29, .14);
}
.hero-visual img { width: 100%; height: 100%; object-fit: cover; }
.glass-chip {
  position: absolute;
  left: 20px;
  bottom: 20px;
  background: rgba(22, 24, 29, .72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 14px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 11px;
}
.glass-chip .chip-dot-green { width: 10px; height: 10px; border-radius: 50%; background: var(--green); flex: none; }
.glass-chip span:last-child { color: #fff; font-size: 14px; font-weight: 500; }

/* Stat strip */
.stat-strip { background: var(--ink); color: #fff; padding: clamp(28px, 4vw, 40px) 0; }
.stat-strip-grid {
  /* auto-fit, so the strip re-balances if the number of figures ever changes.
     Numbers never wrap (see .stat-num) — a wrapped one would push its label
     out of line with the others. */
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 140px), 1fr));
  gap: 24px;
  text-align: center;
}
.stat-num { font-family: var(--font-display); font-size: clamp(30px, 4vw, 42px); font-weight: 600; letter-spacing: -.02em; white-space: nowrap; }
.stat-label { font-size: 14px; color: rgba(255, 255, 255, .6); margin-top: 4px; }

/* Who it's for */
.who { background: var(--bg); padding: clamp(64px, 9vw, 104px) 0; }
.who-head { max-width: 720px; margin-bottom: 52px; }
.who h2 { font-size: clamp(32px, 5vw, 54px); line-height: 1.03; margin: 0 0 16px; }
.who-head p { font-size: 18px; line-height: 1.55; color: var(--muted); margin: 0; }
.persona-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 24px; }
.persona-card { border-radius: 24px; padding: 40px; display: flex; flex-direction: column; color: #fff; }
.persona-card--dark { background: var(--ink); }
.persona-card--blue { background: var(--blue); }
.persona-card .pc-eyebrow { font-size: 13px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 20px; }
.persona-card--dark .pc-eyebrow { color: var(--red); }
.persona-card--blue .pc-eyebrow { color: rgba(255, 255, 255, .85); }
.persona-card h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(24px, 3vw, 30px);
  line-height: 1.1;
  letter-spacing: -.01em;
  margin: 0 0 14px;
}
.persona-card p { font-size: 16px; line-height: 1.6; margin: 0 0 26px; }
.persona-card--dark p { color: rgba(255, 255, 255, .72); }
.persona-card--blue p { color: rgba(255, 255, 255, .86); }
.pc-link { margin-top: auto; color: #fff; font-weight: 600; font-size: 15px; padding-bottom: 3px; align-self: flex-start; }
.persona-card--dark .pc-link { border-bottom: 1px solid rgba(255, 255, 255, .4); }
.persona-card--blue .pc-link { border-bottom: 1px solid rgba(255, 255, 255, .55); }
.pc-link:hover { color: #fff; border-color: #fff; }

/* Feature bands */
.feature { padding: clamp(64px, 9vw, 104px) 0; }
.feature--dark { background: var(--ink); color: #fff; }
.feature--blue { background: var(--blue); color: #fff; }
.feature-grid {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  gap: clamp(40px, 5vw, 72px);
  align-items: center;
}
.eyebrow--red { color: var(--red); }
.feature--blue .eyebrow { color: rgba(255, 255, 255, .85); }
.feature h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(30px, 4.4vw, 50px);
  line-height: 1.02;
  letter-spacing: -.02em;
  margin: 0 0 20px;
}
.feature .feature-sub { font-size: 18px; line-height: 1.6; margin: 0 0 30px; max-width: 520px; }
.feature--dark .feature-sub { color: rgba(255, 255, 255, .72); }
.feature--blue .feature-sub { color: rgba(255, 255, 255, .88); }
.chip-list { display: flex; flex-direction: column; gap: 14px; max-width: 460px; }
.chip { display: flex; align-items: center; gap: 14px; border-radius: 14px; padding: 16px 18px; }
.feature--dark .chip { background: var(--card-dark); }
.feature--blue .chip { background: rgba(255, 255, 255, .14); }
.chip-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.chip-dot--red { background: var(--red); }
.chip-dot--green { background: var(--green); }
.chip-dot--steel { background: #5B8A9A; }
.chip-dot--white { background: #fff; }
.chip span:last-child { font-size: 15.5px; }
.feature--dark .chip span:last-child { color: rgba(255, 255, 255, .9); }
.feature--blue .chip span:last-child { color: #fff; }
.chip strong { font-weight: 600; }
.feature-media { border-radius: 28px; overflow: hidden; aspect-ratio: 4 / 5; }
.feature--dark .feature-media { background: var(--card-dark); }
.feature--blue .feature-media { background: rgba(0, 0, 0, .15); }
.feature-media img { width: 100%; height: 100%; object-fit: cover; }
.feature--blue .feature-text { order: 2; }
.feature--blue .feature-media { order: 1; }

/* How it works (home) */
.hiw { background: var(--bg); padding: clamp(64px, 9vw, 104px) 0; }
.hiw-head { max-width: 680px; margin-bottom: 56px; }
.hiw h2 { font-size: clamp(32px, 5vw, 56px); line-height: 1.04; margin: 0 0 18px; }
.hiw-head p { font-size: 18px; line-height: 1.55; color: var(--muted); margin: 0; }
.hiw-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 24px; }
.hiw-card { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 34px; }
.hiw-num { font-family: var(--font-display); font-size: 52px; font-weight: 600; color: var(--blue); line-height: 1; letter-spacing: -.02em; }
.hiw-card h3 { font-family: var(--font-display); font-weight: 600; font-size: 23px; letter-spacing: -.01em; margin: 22px 0 10px; }
.hiw-card p { font-size: 15.5px; line-height: 1.55; color: var(--muted); margin: 0; }

/* Why a device (dark) */
.why-dark { background: var(--ink); color: #fff; padding: clamp(64px, 9vw, 104px) 0; }
.why-head { max-width: 720px; margin-bottom: 52px; }
.why-dark h2 { font-size: clamp(30px, 4.6vw, 52px); line-height: 1.02; margin: 0 0 18px; }
.why-head p { font-size: 18px; line-height: 1.6; color: rgba(255, 255, 255, .72); margin: 0; }
.why-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 20px; }
.why-card { background: var(--card-dark); border-radius: 20px; padding: 30px; }
.why-card .compare-label span:last-child { color: rgba(255, 255, 255, .7); }
.why-card p { font-size: 16px; line-height: 1.55; color: rgba(255, 255, 255, .82); margin: 0; }
.why-card--motion { background: var(--blue); }
.why-card--motion .compare-label span:last-child { color: #fff; }
.why-card--motion p { color: #fff; }

/* What you get back — persona rail */
.life { background: var(--bg); padding: clamp(64px, 9vw, 104px) 0; }
.life-head { max-width: 1200px; margin: 0 auto; padding: 0 clamp(18px, 4vw, 32px); }
.life-head-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 44px;
}
.life-head-copy { max-width: 660px; }
.life h2 { font-size: clamp(32px, 5vw, 54px); line-height: 1.03; margin: 0 0 16px; }
.life-head-copy p { font-size: 18px; line-height: 1.55; color: var(--muted); margin: 0; }
.rail-btns { display: flex; gap: 10px; }
.rail-btn {
  width: 48px;
  height: 48px;
  border-radius: 9999px;
  border: 1px solid #D8D6CF;
  background: #fff;
  color: var(--ink);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rail {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 4px clamp(18px, 4vw, 32px) 10px;
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.rail-card { flex: none; width: 320px; max-width: 82vw; scroll-snap-align: start; }
.rail-media { position: relative; border-radius: 20px; overflow: hidden; aspect-ratio: 4 / 5; background: #EDECE6; }
.rail-media img { width: 100%; height: 100%; object-fit: cover; }
.rail-tag {
  position: absolute;
  left: 14px;
  bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(250, 250, 248, .94);
  border-radius: 9999px;
  padding: 7px 13px;
}
.rail-tag span:first-child { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.rail-check {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--blue);
  color: #fff;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rail-badge {
  position: absolute;
  right: 14px;
  top: 14px;
  background: rgba(22, 24, 29, .6);
  border-radius: 9999px;
  padding: 6px 11px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
}
.rail-card > p { font-size: 15px; line-height: 1.55; color: var(--body-soft); margin: 16px 4px 0; }

/* Pricing */
.pricing { background: var(--bg); padding: clamp(64px, 9vw, 110px) 0; }
.pricing-inner { max-width: 1100px; margin: 0 auto; padding: 0 32px; }
.pricing-head { text-align: center; max-width: 640px; margin: 0 auto 52px; }
.pricing h2 { font-size: clamp(32px, 5vw, 56px); line-height: 1.02; margin: 0 0 16px; }
.pricing-head p { font-size: 18px; line-height: 1.55; color: var(--muted); margin: 0; }
.price-card-wrap { max-width: 460px; margin: 0 auto; }
.price-card {
  background: var(--ink);
  color: #fff;
  border-radius: 24px;
  padding: 40px 34px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
.price-flag {
  position: absolute;
  top: 20px;
  right: 20px;
  background: var(--blue);
  border-radius: 9999px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .3px;
}
.price-name { font-family: var(--font-display); font-weight: 600; font-size: 26px; letter-spacing: -.01em; }
.price-amount { display: flex; align-items: baseline; gap: 8px; margin: 14px 0 4px; }
.price-amount span { font-family: var(--font-display); font-size: 56px; font-weight: 600; letter-spacing: -.02em; }
.price-sub { font-size: 14px; color: rgba(255, 255, 255, .6); margin-bottom: 26px; }
.price-feats { display: flex; flex-direction: column; gap: 13px; margin-bottom: 30px; }
.price-feats span { font-size: 15px; color: rgba(255, 255, 255, .88); }
.price-card .btn { text-align: center; font-size: 16px; padding: 16px 28px; }
.price-ship { text-align: center; font-size: 13px; color: rgba(255, 255, 255, .5); margin-top: 14px; }

/* Specs / device tile */
.specs { background: var(--ink); color: #fff; padding: clamp(64px, 9vw, 104px) 0; }
.specs-grid {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  gap: clamp(40px, 5vw, 64px);
  align-items: center;
}
.device-tile {
  position: relative;
  background: var(--blue);
  border-radius: 28px;
  aspect-ratio: 1 / 1;
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  order: 1;
}
.device-tile .tile-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 45%, rgba(255, 255, 255, .26), rgba(255, 255, 255, 0) 60%);
}
.device-tile .tile-ring {
  position: absolute;
  width: 200px;
  height: 200px;
  border: 2px solid rgba(255, 255, 255, .4);
  border-radius: 50%;
  animation: ripple 3.4s ease-out infinite;
}
.device-tile img {
  position: relative;
  width: 60%;
  max-width: 340px;
  filter: drop-shadow(0 30px 56px rgba(0, 0, 0, .45));
  animation: floaty 6.5s ease-in-out infinite;
}
.specs-text { order: 2; }
.specs h2 { font-size: clamp(30px, 4.4vw, 50px); line-height: 1.02; margin: 0 0 30px; }
.spec-rows { border-top: 1px solid rgba(255, 255, 255, .14); }
.spec-row {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}
.spec-row span:first-child { font-size: 15px; color: rgba(255, 255, 255, .55); font-weight: 500; }
.spec-row span:last-child { font-size: 15px; color: #fff; font-weight: 600; text-align: right; }
@media (prefers-reduced-motion: reduce) {
  .device-tile img, .device-tile .tile-ring { animation: none; }
}

/* Home FAQ */
.faq-home { background: var(--bg); padding: clamp(56px, 8vw, 96px) 0 clamp(64px, 8vw, 96px); }
.faq-home-inner { max-width: 820px; margin: 0 auto; padding: 0 32px; }
.faq-home .faq-head { margin-bottom: 44px; }
.faq-home h2 { font-size: clamp(30px, 4.6vw, 48px); line-height: 1.03; margin: 0; }
.faq-lg .faq-q { padding: 24px 0; }
.faq-lg .faq-q .faq-question { font-size: clamp(17px, 2vw, 20px); }
.faq-lg .faq-a { padding: 0 0 26px; max-width: 660px; }

/* Email capture */
.email-capture { background: var(--blue); color: #fff; padding: clamp(56px, 7vw, 88px) 0; }
.email-inner { max-width: 820px; margin: 0 auto; padding: 0 32px; text-align: center; }
.email-capture h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.05;
  letter-spacing: -.02em;
  margin: 0 0 14px;
}
.email-capture p { font-size: 17px; line-height: 1.55; color: rgba(255, 255, 255, .86); margin: 0 auto 30px; max-width: 520px; }
.newsletter-form { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; max-width: 480px; margin: 0 auto; }
.newsletter-form input {
  flex: 1;
  min-width: 200px;
  height: 54px;
  border: none;
  border-radius: 12px;
  padding: 0 18px;
  font-size: 16px;
  color: var(--ink);
  background: #fff;
}
.newsletter-form button {
  height: 54px;
  background: var(--ink);
  color: #fff;
  border: none;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: .24px;
  padding: 0 26px;
  border-radius: 12px;
  cursor: pointer;
}
.newsletter-form button:hover { background: #000; }
.newsletter-success {
  display: inline-block;
  background: rgba(255, 255, 255, .16);
  border-radius: 14px;
  padding: 16px 28px;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
}
.newsletter-success[hidden] { display: none; }

/* ---------- Product ---------- */

.pdp-desire { background: var(--ink); color: #fff; padding: clamp(48px, 7vw, 84px) 0; }
.pdp-desire-grid {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(18px, 4vw, 32px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: clamp(36px, 5vw, 64px);
  align-items: center;
}
.pdp-desire .eyebrow { margin-bottom: 18px; }
/* The product listing now opens the page, so this section is the elaboration
   below it — its heading is an h2 and .pdp-title carries the h1. */
.pdp-desire h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(32px, 5.2vw, 58px);
  line-height: 1.02;
  letter-spacing: -.02em;
  margin: 0 0 20px;
}
.pdp-desire .desire-sub {
  font-size: clamp(16px, 1.6vw, 19px);
  line-height: 1.6;
  color: rgba(255, 255, 255, .72);
  margin: 0 0 30px;
  max-width: 520px;
}
.pdp-desire-media { border-radius: 24px; overflow: hidden; aspect-ratio: 4 / 5; background: var(--card-dark); }
.pdp-desire-media img { width: 100%; height: 100%; object-fit: cover; }

.pdp-buy { background: var(--bg); padding: clamp(24px, 4vw, 40px) 0 clamp(56px, 8vw, 88px); }
.breadcrumb { font-size: 13px; color: var(--muted-cool); font-weight: 500; margin-bottom: 22px; }
.breadcrumb a { color: var(--muted-cool); }
.breadcrumb a:hover { color: var(--blue); }
.breadcrumb .crumb-here { color: var(--ink); }
.pdp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
.gallery-main { position: relative; border-radius: 24px; overflow: hidden; aspect-ratio: 1 / 1; background: #EDECE6; border: 1px solid var(--line); }
/* Arrows are the only way to step through images with a mouse, and on touch
   they signal there is more to the side. main.js hides the one you cannot
   use, so the first image shows only "next". */
.gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 40px;
  height: 40px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Frosted glass over the photo rather than a solid chip: the dark tint
     plus blur keeps the white arrow readable on a light or dark image while
     the product stays visible through it. */
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 50%;
  background: rgba(22, 24, 29, .28);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  box-shadow: 0 2px 8px rgba(22, 24, 29, .16);
  cursor: pointer;
  transition: background .2s ease;
}
.gallery-nav:hover { background: rgba(22, 24, 29, .5); }
.gallery-nav[hidden] { display: none; }
.gallery-nav--prev { left: 12px; }
.gallery-nav--next { right: 12px; }
.gallery-nav svg { width: 17px; height: 17px; display: block; }
.gallery-main img { width: 100%; height: 100%; object-fit: cover; }
/* main.js wraps the images in this track. On desktop it stays a plain stack —
   only the thumbnail-selected image is shown. Under 768px the media query at
   the bottom of this block turns it into a swipeable carousel. */
.gallery-track { width: 100%; height: 100%; }
.gallery-track img { display: none; }
.gallery-track img.is-active { display: block; }
/* One row that scrolls, never two that wrap: between roughly 900px and
   1150px the gallery column is narrower than six 72px thumbnails, and more
   product photos would break it at any width. */
.gallery-thumbs {
  display: flex;
  gap: 12px;
  margin-top: 14px;
  overflow-x: auto;
  /* Without an explicit y-axis the browser makes the vertical axis
     scrollable too, which traps the page scroll inside the strip. */
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.gallery-thumbs::-webkit-scrollbar { display: none; }
.gallery-thumb {
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  border-radius: 14px;
  overflow: hidden;
  padding: 0;
  cursor: pointer;
  background: #EDECE6;
  border: 2px solid transparent;
}
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumb.is-active { border-color: var(--blue); }

/* Sticky buy bar — slides up once the main Add-to-cart scrolls out of view,
   so the price and the button are always one tap away. Built by main.js from
   the existing buy block, so it inherits the language and the live price.
   z-index 60 sits above the nav (50) and below the cart overlay (100). */
.sticky-buy {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
  box-shadow: 0 -8px 30px rgba(0, 0, 0, .08);
  transform: translateY(100%);
  transition: transform .28s cubic-bezier(.16, .8, .24, 1);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.sticky-buy.is-visible { transform: translateY(0); }
.sticky-buy-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px clamp(14px, 4vw, 32px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.sticky-buy-info { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; }
.sticky-buy-thumb {
  width: 44px;
  height: 44px;
  border-radius: 11px;
  background: #F1F0EC;
  flex: none;
  overflow: hidden;
}
.sticky-buy-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sticky-buy-text { min-width: 0; }
.sticky-buy-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15.5px;
  letter-spacing: -.01em;
  line-height: 1.15;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sticky-buy-sub {
  display: block;
  font-size: 13px;
  color: var(--muted-cool);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sticky-buy-save { color: #1F8A5B; font-weight: 600; }
.sticky-buy-btn {
  flex: none;
  background: var(--blue);
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .015em;
  padding: 13px clamp(18px, 5vw, 28px);
  border: 0;
  border-radius: 9999px;
  white-space: nowrap;
  cursor: pointer;
  transition: background .18s ease;
}
.sticky-buy-btn:hover { background: var(--blue-deep); }
.sticky-buy-btn[disabled] { opacity: .5; cursor: default; }

@media (prefers-reduced-motion: reduce) {
  .sticky-buy { transition: none; }
}

/* Mobile gallery: swipe the image, dots for position. Six 72px thumbnails
   cannot fit 375px, so they wrapped into stacked rows and the main image had
   no swipe at all — the two things every other shop gets right. */
@media (max-width: 768px) {
  .gallery-track {
    display: flex;
    overflow-x: auto;
    /* Without an explicit y-axis the browser makes the vertical axis
       scrollable too, which traps the page scroll inside the gallery. */
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .gallery-track::-webkit-scrollbar { display: none; }
  .gallery-track img { display: block; flex: 0 0 100%; scroll-snap-align: center; }
  /* Thumbnails stay, at 56px: five fit across 375px with the sixth peeking,
     which is its own cue that the strip scrolls. Costs 49px of height and
     buys direct access to any photo — dots would only show position. */
  .gallery-thumb { width: 56px; height: 56px; border-radius: 12px; }
  .gallery-thumbs { gap: 8px; }
  /* Smaller and tighter to the edge — the image is only ~318px wide here. */
  .gallery-nav { width: 34px; height: 34px; }
  .gallery-nav svg { width: 15px; height: 15px; }
  .gallery-nav--prev { left: 8px; }
  .gallery-nav--next { right: 8px; }
}
.badge--sm { padding: 6px 13px; font-size: 12.5px; margin-bottom: 18px; }
.pdp-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(34px, 5vw, 52px);
  line-height: 1.02;
  letter-spacing: -.02em;
  margin: 0 0 12px;
}
/* text-wrap: pretty laat de browser de laatste regels herverdelen zodat er geen
   losse weesregel van een paar woorden overblijft. Browsers die het niet kennen
   negeren het gewoon, dus het kan alleen maar helpen. */
.pdp-lede {
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted);
  margin: 0 0 18px;
  max-width: 460px;
  text-wrap: pretty;
}
/* The headline price follows the pack selection, so picking two Keys shows
   the pack total with the list price struck through beside it. */
.pdp-price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; }
.pdp-price-now { font-family: var(--font-display); font-size: 44px; font-weight: 600; letter-spacing: -.02em; line-height: 1; }
.pdp-price-extra { display: inline-flex; align-items: baseline; gap: 8px; }
.pdp-price-extra[hidden] { display: none; }
.pdp-price-was { font-size: 19px; color: var(--muted-cool); text-decoration: line-through; }
.pdp-price-save {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  color: #fff;
  background: #22B07D;
  border-radius: 6px;
  padding: 3px 8px;
  position: relative;
  top: -3px;
}
.pdp-points { display: flex; flex-direction: column; gap: 12px; margin-bottom: 26px; max-width: 460px; }
.pdp-point { display: flex; align-items: flex-start; gap: 11px; }
.pt-check {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--badge-bg);
  color: var(--blue);
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  margin-top: 1px;
}
.pdp-point > span:last-child { font-size: 15.5px; color: #2B2E35; }
.pdp-point strong { font-weight: 600; }
.buy-row { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.qty { display: flex; align-items: center; border: 1px solid #D8D6CF; border-radius: 9999px; overflow: hidden; background: #fff; }
.qty button { width: 44px; height: 48px; border: none; background: none; font-size: 20px; color: var(--ink); cursor: pointer; }
.qty .qty-val { min-width: 32px; text-align: center; font-size: 16px; font-weight: 600; }
.buy-now {
  flex: 1;
  min-width: 200px;
  text-align: center;
  background: var(--blue);
  color: #fff;
  font-weight: 600;
  font-size: 17px;
  letter-spacing: .24px;
  padding: 16px 28px;
  border-radius: 9999px;
}
.buy-now:hover { background: var(--blue-deep); color: #fff; }
.add-cart {
  display: block;
  text-align: center;
  background: #fff;
  color: var(--ink);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: .24px;
  padding: 14px 28px;
  border-radius: 9999px;
  border: 1px solid var(--ink);
  max-width: 460px;
  margin-bottom: 24px;
}
.add-cart:hover { background: var(--ink); color: #fff; }
/* One centred line under the buy buttons: a single shield-check carries the
   whole promise, so there is room for the full wording at one size on every
   width — no per-breakpoint shrinking. */
.pdp-assurances {
  max-width: 460px;
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Twee losse items: zonder gap plakken de garantie en de verzending aan
     elkaar, en zonder wrap duwen ze elkaar op smalle schermen weg. */
  gap: 18px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
}
.assurance-line { display: inline-flex; align-items: center; gap: 7px; text-align: center; }
.assurance-icon { flex: none; }
/* The Dutch line needs 329px at 13px while the column is 320px on a 375px
   phone and 305px on a 360px one. Scaling with the viewport keeps it on one
   line all the way down instead of picking one size that only fits some. */
@media (max-width: 768px) {
  /* De twee items horen op mobiel op één regel te blijven. De Nederlandse tekst
     is het langst ("30 dagen geld-terug-garantie" + "Gratis verzending"): bij een
     tussenruimte van 18px komt die op 375px precies 4px tekort. Vandaar hier een
     kleinere gap en iets meer rek in de lettergrootte. */
  .pdp-assurances { font-size: clamp(10.5px, 3.2vw, 13px); gap: 10px; }
  .assurance-line { white-space: nowrap; }
  /* Met de landnaam erbij past de bezorgregel op een telefoon niet op een regel
     (zeker niet bij "Verenigd Koninkrijk"). Op mobiel valt het land weg; het staat
     daar nog steeds onderin de footer. */
  .pdp-delivery-to { display: none; }
  .assurance-line { gap: 5px; }}
}

/* Trust rows on phones: three items side by side instead of stacked. The
   column is only ~320px, so a flex row cannot hold the full wording — an
   equal-width grid keeps them on one row and lets each label wrap inside
   its own column, which reads as deliberate rather than as an overflow. */
@media (max-width: 768px) {
  /* Half a pixel smaller keeps the Dutch bar ("30 dagen geld-terug-garantie")
     on one line without touching the wording. */
  .announcement { font-size: 12.5px; }

  /* Two items rather than three (the warranty is a spec, not a reason to
     buy), which leaves room to keep both on one line at a comfortable size
     instead of shrinking to 11px and wrapping. */
  .hero-notes { gap: 14px; font-size: 12.5px; flex-wrap: nowrap; }
}
/* Neutrale kaart in plaats van de groene: de groene trok de aandacht weg van de
   koopknop erboven, en de comp zet hem nu gelijk aan de andere kaders. */
.guarantee {
  margin-top: 18px;
  max-width: 460px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 18px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--muted);
}
.guarantee strong { font-weight: 600; color: var(--ink); }

/* What actually changes — day timeline */
.day-band { background: var(--blue); color: #fff; padding: clamp(56px, 8vw, 96px) 0; }
.day-head { max-width: 740px; margin-bottom: 44px; }
.day-band .eyebrow { color: rgba(255, 255, 255, .8); }
.day-band h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(28px, 4.6vw, 48px);
  line-height: 1.03;
  letter-spacing: -.02em;
  margin: 0;
}
.day-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 1px;
  background: rgba(255, 255, 255, .2);
  border-radius: 20px;
  overflow: hidden;
}
.day-cell { background: var(--blue); padding: clamp(26px, 3vw, 36px); }
.day-time { font-family: var(--font-display); font-size: 38px; font-weight: 600; letter-spacing: -.02em; margin-bottom: 16px; }
.day-label {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .7);
  margin-bottom: 10px;
}
.day-cell p { font-size: 16px; line-height: 1.55; color: #fff; margin: 0; }

/* Lifestyle tiles */
.lifestyle { background: var(--bg); padding: clamp(56px, 8vw, 96px) 0; }
.lifestyle-head { max-width: 720px; margin-bottom: 44px; }
.lifestyle h2 { font-size: clamp(28px, 4.6vw, 48px); line-height: 1.03; margin: 0 0 16px; }
.lifestyle-head p { font-size: 18px; line-height: 1.6; color: var(--muted); margin: 0; }
/* De rail loopt nu op elke breedte, met pijlen vanaf desktop. Op mobiel blijft
   het gedrag hetzelfde als voorheen (swipen), alleen zijn de tegels daar smaller. */
.lifestyle-rail { position: relative; }
.lifestyle-grid {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  overflow-x: auto;
  /* Zonder dit maakt de browser ook de verticale as scrollbaar, waardoor de
     paginascroll op touch in de rail blijft hangen. */
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  padding-bottom: 6px;
}
.lifestyle-grid::-webkit-scrollbar { display: none; }
.life-arrow {
  position: absolute;
  top: 38%;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  padding: 0;
}
.life-arrow[hidden] { display: none; }
.life-arrow-prev { left: -18px; }
.life-arrow-next { right: -18px; }
/* Onder deze breedte raken de pijlen de tegels; daar swipe je gewoon. */
@media (max-width: 1240px) { .life-arrow { display: none; } }
.life-tile { position: relative; border-radius: 20px; overflow: hidden; aspect-ratio: 4 / 5; background: #EDECE6; flex: none; width: 300px; max-width: 78vw; scroll-snap-align: start; }
.life-tile img { width: 100%; height: 100%; object-fit: cover; }
.tile-fade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(22, 24, 29, 0) 32%, rgba(22, 24, 29, .55) 62%, rgba(22, 24, 29, .9) 100%); }
.tile-cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 22px 22px 24px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* Vaste ondergrens houdt de korte namen op dezelfde hoogte als de lange, zodat
     de rail geen zaagtand krijgt bij het scrollen. */
  min-height: 132px;
}
/* De hiërarchie is omgedraaid: de korte naam is nu de displayregel en de zin
   staat er klein onder. De klassenamen zijn hetzelfde gebleven zodat de markup
   op vier bestanden niet hoefde te verschuiven. */
.tile-tag {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 21px;
  line-height: 1.15;
  letter-spacing: -.02em;
  text-transform: none;
  color: #fff;
  margin-bottom: 7px;
  text-wrap: balance;
  text-shadow: 0 1px 12px rgba(0, 0, 0, .35);
}
.tile-title {
  font-family: inherit;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: 0;
  color: rgba(255, 255, 255, .86);
  text-wrap: pretty;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .3);
}

/* One device, both jobs */
.jobs { background: var(--ink); color: #fff; padding: clamp(56px, 8vw, 96px) 0; }
.jobs-head { max-width: 820px; margin-bottom: 44px; }
.jobs h2 { font-size: clamp(28px, 4.4vw, 46px); line-height: 1.05; margin: 0 0 16px; }
.jobs-head p { font-size: 18px; line-height: 1.6; color: rgba(255, 255, 255, .72); margin: 0; }
.jobs-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 24px; }
.job-card { background: var(--card-dark); border-radius: 20px; overflow: hidden; }
.job-media { aspect-ratio: 16 / 10; overflow: hidden; }
.job-media img { width: 100%; height: 100%; object-fit: cover; }
.job-body { padding: 28px; }
.job-label { font-size: 13px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 12px; }
.job-label--red { color: var(--red); }
.job-label--blue { color: var(--blue); }
.job-card h3 { font-family: var(--font-display); font-weight: 600; font-size: 22px; letter-spacing: -.01em; margin: 0 0 10px; }
.job-body p { font-size: 15.5px; line-height: 1.6; color: rgba(255, 255, 255, .72); margin: 0; }

/* One tap — animated scan scene */
.tap-scene { background: var(--bg); color: var(--ink); padding: clamp(56px, 8vw, 96px) 0; }
.tap-scene .container { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: clamp(36px, 5vw, 64px); align-items: center; }
.tap-scene h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(28px, 4.4vw, 48px); line-height: 1.04; letter-spacing: -.02em; margin: 0 0 18px; }
.tap-copy > p { font-size: 18px; line-height: 1.6; color: var(--muted); margin: 0 0 24px; max-width: 500px; }
.tap-steps { display: flex; flex-direction: column; gap: 12px; max-width: 460px; }
.tap-step { display: flex; align-items: center; gap: 12px; }
.tap-step > span:last-child { font-size: 15.5px; color: #2B2E35; }
.tap-step-num { width: 26px; height: 26px; border-radius: 50%; background: var(--badge-bg); color: var(--blue); font-size: 13px; display: flex; align-items: center; justify-content: center; flex: none; }
.tap-anim { display: flex; justify-content: center; }
/* The stage is a query container; every element inside is sized in cqw
   (1cqw = 1% of the stage width) so the whole scene scales as one unit and
   stays fully visible at any width — desktop 460px down to a phone. */
.tap-stage { container-type: inline-size; position: relative; width: 460px; max-width: 100%; aspect-ratio: 1 / 1; border-radius: 28px; overflow: hidden; background: radial-gradient(120% 100% at 50% 30%, #FCFCFA 0%, #F1F0EA 55%, #E7E5DD 100%); }
.tap-ring { position: absolute; left: 50%; top: 23%; width: 39.13cqw; height: 39.13cqw; border: 2px solid var(--blue); border-radius: 9.13cqw; transform: translate(-50%, -50%) scale(.35); opacity: 0; animation: mk-ring2 6.5s cubic-bezier(.4, 0, .2, 1) infinite; }
.tap-glow { position: absolute; left: 50%; top: 23%; width: 54.35cqw; height: 54.35cqw; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(47, 91, 224, .3), rgba(47, 91, 224, 0) 68%); animation: mk-glow 6.5s ease-in-out infinite; pointer-events: none; }
.tap-device { position: absolute; left: 50%; top: 23%; width: 44.35cqw; height: auto; aspect-ratio: 1 / 1; transform: translate(-50%, -50%); filter: drop-shadow(0 14px 24px rgba(0, 0, 0, .3)); animation: mk-dev 6.5s ease-in-out infinite; z-index: 2; }
.tap-phone { position: absolute; left: 50%; top: 34%; width: 32.17cqw; aspect-ratio: 1179 / 2556; transform: translate(-50%, 13.1%); animation: mk-rise 6.5s cubic-bezier(.45, 0, .25, 1) infinite; z-index: 3; }
.tap-phone-glow { position: absolute; top: -1.09cqw; left: 50%; transform: translateX(-50%); width: 6.52cqw; height: 6.52cqw; border-radius: 50%; background: radial-gradient(circle, rgba(47, 91, 224, .6), rgba(47, 91, 224, 0) 70%); z-index: 4; }
.tap-phone-shell { width: 100%; height: 100%; background: #0B0C0F; border-radius: 6.52cqw; padding: 1.09cqw; box-shadow: 0 26px 48px rgba(0, 0, 0, .42), inset 0 0 0 1.4px rgba(255, 255, 255, .09); }
.tap-phone-screen { position: relative; width: 100%; height: 100%; border-radius: 5.65cqw; overflow: hidden; background: #000; }
.tap-fr { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tap-fr-ap { animation: mk-ap 6.5s ease-in-out infinite; }
.tap-fr-ad { opacity: 0; animation: mk-ad 6.5s ease-in-out infinite; }
.tap-fr-bp { opacity: 0; animation: mk-bp 6.5s ease-in-out infinite; }
.tap-fr-bd { opacity: 0; animation: mk-bd 6.5s ease-in-out infinite; }
@keyframes mk-dev { 0%, 6% { transform: translate(-50%, -50%) scale(1); } 11% { transform: translate(-50%, -50%) scale(1.05); } 16%, 55% { transform: translate(-50%, -50%) scale(1); } 61% { transform: translate(-50%, -50%) scale(1.05); } 66%, 100% { transform: translate(-50%, -50%) scale(1); } }
@keyframes mk-glow { 0%, 6% { opacity: 0; } 11%, 18% { opacity: 1; } 26%, 55% { opacity: 0; } 61%, 68% { opacity: 1; } 76%, 100% { opacity: 0; } }
@keyframes mk-ring2 { 0%, 6% { transform: translate(-50%, -50%) scale(.35); opacity: 0; } 10% { opacity: .7; } 30% { transform: translate(-50%, -50%) scale(1.9); opacity: 0; } 55%, 56% { transform: translate(-50%, -50%) scale(.35); opacity: 0; } 60% { opacity: .7; } 80% { transform: translate(-50%, -50%) scale(1.9); opacity: 0; } 100% { opacity: 0; } }
@keyframes mk-rise { 0% { transform: translate(-50%, 13.1%); } 9% { transform: translate(-50%, -8.1%); } 13% { transform: translate(-50%, -7.17%); } 16% { transform: translate(-50%, -7.48%); } 30% { transform: translate(-50%, -7.48%); } 42% { transform: translate(-50%, 13.1%); } 50% { transform: translate(-50%, 13.1%); } 59% { transform: translate(-50%, -8.1%); } 63% { transform: translate(-50%, -7.17%); } 66% { transform: translate(-50%, -7.48%); } 80% { transform: translate(-50%, -7.48%); } 92% { transform: translate(-50%, 13.1%); } 100% { transform: translate(-50%, 13.1%); } }
@keyframes mk-ap { 0%, 11% { opacity: 1; } 16%, 87% { opacity: 0; } 93%, 100% { opacity: 1; } }
@keyframes mk-ad { 0%, 11% { opacity: 0; } 17%, 35% { opacity: 1; } 41%, 100% { opacity: 0; } }
@keyframes mk-bp { 0%, 37% { opacity: 0; } 43%, 59% { opacity: 1; } 65%, 100% { opacity: 0; } }
@keyframes mk-bd { 0%, 59% { opacity: 0; } 65%, 85% { opacity: 1; } 91%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .tap-ring { display: none; }
  .tap-glow { opacity: 0; }
  .tap-device, .tap-phone, .tap-fr { animation: none; }
  .tap-phone { transform: translate(-50%, -7.48%); }
  .tap-fr-ad, .tap-fr-bp, .tap-fr-bd { opacity: 0; }
  .tap-fr-ap { opacity: 1; }
}

/* What sets Motion Key apart — vergelijkingstabel */
.cmp { background: var(--bg); padding: clamp(56px, 8vw, 96px) 0; }
.cmp-inner { max-width: 880px; margin: 0 auto; padding: 0 clamp(18px, 4vw, 32px); }
.cmp-head { text-align: center; max-width: 620px; margin: 0 auto 40px; }
.cmp-head h2 { font-size: clamp(28px, 4.6vw, 46px); line-height: 1.04; margin: 0 0 16px; }
.cmp-head p { font-size: 17.5px; line-height: 1.6; color: var(--muted); margin: 0; }
.cmp-table {
  background: #fff;
  border: 1px solid #F0EEE9;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(22, 24, 29, .06);
  display: grid;
  /* De drie kolommen krimpen mee, maar niet verder dan 64px: daaronder wordt het
     wordmerk onleesbaar en passen Nederlandse koppen als "Telefoonalarm" niet meer.
     De tabel past zo nog steeds op een telefoon zonder horizontaal scrollen. */
  grid-template-columns: minmax(0, 1fr) repeat(3, clamp(64px, 15vw, 164px));
}
.cmp-table > * { border-bottom: 1px solid #F0EEE9; }
/* De laatste rij (labelcel + drie kolommen) krijgt geen lijn onder zich. */
.cmp-table > *:nth-last-child(-n+4) { border-bottom: none; }
.cmp-corner { padding: 20px; }
.cmp-col { padding: 18px 6px; text-align: center; font-size: 12.5px; font-weight: 500; color: var(--muted-cool); line-height: 1.2; }
.cmp-col-mk { padding: 18px 8px; display: flex; align-items: center; justify-content: center; }
.cmp-col-mk img { width: 100%; max-width: 112px; height: auto; display: block; }
.cmp-row { padding: 17px 20px; font-size: 14.5px; line-height: 1.4; color: var(--ink); font-weight: 500; text-wrap: pretty; hyphens: none; }
.cmp-mark { padding: 17px 6px; display: flex; align-items: center; justify-content: center; }
/* De Motion Key-kolom houdt over de hele hoogte een lichte tint. */
.cmp-mk { background: #F4F7FE; }
.cmp-yes, .cmp-no { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: none; }
.cmp-yes { background: var(--blue); box-shadow: 0 2px 6px rgba(47, 91, 224, .28); }
.cmp-no { background: #F4F3F0; }
@media (max-width: 560px) {
  .cmp-row { padding: 15px 12px; font-size: 13.5px; }
  .cmp-col { font-size: 11px; padding: 14px 4px; }
  .cmp-corner { padding: 14px 12px; }
  .cmp-yes, .cmp-no { width: 22px; height: 22px; }
}

/* Specs strip */
.specs-strip { background: var(--bg); padding: clamp(40px, 6vw, 72px) 0; }
.specs-strip-inner { max-width: 1100px; margin: 0 auto; padding: 0 clamp(18px, 4vw, 32px); }
/* De kaart heeft geen kop meer: het is een compacte strook met vier feiten,
   elk met een icoon, de waarde boven en het label eronder. */
.specs-card {
  background: #fff;
  border: 1px solid #EFEDE8;
  border-radius: 20px;
  padding: clamp(14px, 2.5vw, 22px);
  box-shadow: 0 2px 14px rgba(22, 24, 29, .04);
}
/* Twee vaste stappen in plaats van auto-fit. Met auto-fit valt het er rond de
   800px tussenin op 3+1, met een eenzame vierde onder de rij. */
.specs-facts { display: grid; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .specs-facts { grid-template-columns: repeat(4, 1fr); } }
.specs-fact { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 22px 12px; }
.fact-icon { width: 46px; height: 46px; border-radius: 14px; background: #F1F0EC; display: flex; align-items: center; justify-content: center; flex: none; }
.fact-value { font-family: var(--font-display); font-size: 15px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.fact-label { font-size: 12.5px; color: var(--muted-cool); line-height: 1.3; font-weight: 400; }

/* See how it works — steps */
.how-steps { background: var(--bg); padding: clamp(56px, 8vw, 96px) 0; }
.how-steps-head { max-width: 680px; margin-bottom: 32px; }
.how-steps h2 { font-size: clamp(28px, 4.4vw, 46px); line-height: 1.04; margin: 0; }
.how-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(28px, 3.5vw, 48px);
  /* De stappenlijst staat links en het beeld rechts; boven uitlijnen zodat het
     beeld niet meeschuift als een stap opengaat. */
  align-items: start;
}
.how-media { position: relative; border-radius: 24px; overflow: hidden; aspect-ratio: 4 / 5; background: #EDECE6; }
.how-media img { width: 100%; height: 100%; object-fit: cover; display: none; }
.how-media img.is-active { display: block; }
.step-list { display: flex; flex-direction: column; gap: 12px; }
.step-btn {
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 16px;
  padding: 20px 22px;
  cursor: pointer;
  font-family: inherit;
  transition: background .2s, border-color .2s;
}
.step-btn.is-active { background: #fff; border-color: var(--line); }
.step-head { display: flex; align-items: center; gap: 16px; }
.step-num {
  width: 34px;
  height: 34px;
  border-radius: 9999px;
  background: #EDEBE4;
  color: var(--muted-cool);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  transition: background .2s, color .2s;
}
.step-btn.is-active .step-num { background: var(--blue); color: #fff; }
.step-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -.01em;
  color: var(--ink);
}
.step-desc {
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--muted);
  margin: 8px 0 0;
  /* 34px badge + 16px tussenruimte, zodat de tekst onder de titel begint. */
  padding-left: 50px;
  display: none;
}
.step-btn.is-active .step-desc { display: block; }

/* App explorer */
.app-explorer { background: var(--ink); color: #fff; padding: clamp(56px, 8vw, 96px) 0; }
.app-explorer-head { max-width: 680px; margin-bottom: 40px; }
.app-explorer h2 { font-size: clamp(28px, 4.4vw, 46px); line-height: 1.04; margin: 0 0 16px; }
.app-explorer-head p { font-size: 18px; line-height: 1.6; color: rgba(255, 255, 255, .72); margin: 0; }
.explorer { position: relative; border-radius: 28px; overflow: hidden; min-height: clamp(500px, 64vw, 580px); background: #0B0C0F; }
.explorer-tabs { position: absolute; top: 20px; left: 0; right: 0; z-index: 4; display: flex; justify-content: center; padding: 0 14px; }
.explorer-tabs-pill {
  display: inline-flex;
  gap: 3px;
  background: rgba(11, 12, 15, .55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 9999px;
  padding: 5px;
  flex-wrap: wrap;
  justify-content: center;
}
.explorer-tab {
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .2px;
  padding: 9px 18px;
  border-radius: 9999px;
  background: transparent;
  color: rgba(255, 255, 255, .82);
  transition: background .2s, color .2s;
}
.explorer-tab.is-active { background: #ffffff; color: var(--ink); }
.explorer-panel { position: relative; width: 100%; min-height: clamp(500px, 64vw, 580px); display: none; }
.explorer-panel.is-active { display: block; }
.panel-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.panel-fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 12, 15, .5) 0%, rgba(11, 12, 15, .32) 38%, rgba(11, 12, 15, .82) 100%);
}
.panel-content {
  position: relative;
  z-index: 2;
  min-height: clamp(500px, 64vw, 580px);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 28px;
  padding: 92px clamp(26px, 4vw, 48px) clamp(26px, 4vw, 48px);
}
.panel-copy { max-width: 420px; }
.panel-copy h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.08;
  letter-spacing: -.02em;
  margin: 0 0 12px;
  color: #fff;
}
.panel-copy p { font-size: 16.5px; line-height: 1.55; color: rgba(255, 255, 255, .82); margin: 0; }
.phone-frame {
  width: clamp(232px, 30vw, 300px);
  max-width: 100%;
  aspect-ratio: 1179 / 2556;
  background: #0B0C0F;
  border-radius: 40px;
  padding: 7px;
  box-shadow: 0 34px 70px rgba(0, 0, 0, .55);
  border: 1px solid rgba(255, 255, 255, .14);
  flex: none;
}
.phone-frame img { width: 100%; height: 100%; object-fit: cover; border-radius: 33px; display: block; }
.store-badges { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  background: #000;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 13px;
  padding: 10px 18px;
  text-decoration: none;
}
.store-badge .sb-text { display: flex; flex-direction: column; line-height: 1.05; text-align: left; }
.sb-top { font-size: 10px; font-weight: 500; letter-spacing: .3px; color: rgba(255, 255, 255, .85); }
.sb-top--caps { letter-spacing: .6px; text-transform: uppercase; }
.sb-name { font-size: 18px; font-weight: 600; letter-spacing: .2px; color: #fff; font-family: var(--font-display); }
.store-note { font-size: 12.5px; color: rgba(255, 255, 255, .4); width: 100%; text-align: center; margin-top: 4px; }

/* While you sleep */
.sleep { background: var(--bg); padding: clamp(56px, 8vw, 96px) 0; }
.sleep-grid {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 clamp(18px, 4vw, 32px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(36px, 5vw, 64px);
  align-items: center;
}
.sleep h2 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -.02em;
  font-size: clamp(28px, 4.4vw, 46px);
  line-height: 1.04;
  margin: 0 0 18px;
}
.sleep-sub { font-size: 18px; line-height: 1.6; color: var(--muted); margin: 0 0 24px; max-width: 520px; }
.sleep-points { display: flex; flex-direction: column; gap: 14px; max-width: 520px; }
.sleep-point { display: flex; align-items: flex-start; gap: 13px; }
.sleep-point .pt-check { width: 24px; height: 24px; font-size: 13px; }
.sleep-point > span:last-child { font-size: 15.5px; line-height: 1.5; color: #2B2E35; }
.sleep-point strong { font-weight: 600; }
.sleep-note {
  margin-top: 24px;
  max-width: 520px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 15px 17px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--muted);
}
.sleep-note strong { color: var(--ink); font-weight: 600; }
.sleep-phone { display: flex; justify-content: center; }
.sleep-phone .phone-frame {
  width: clamp(240px, 30vw, 296px);
  max-width: 80vw;
  box-shadow: 0 40px 80px rgba(0, 0, 0, .22);
  border: 1px solid rgba(0, 0, 0, .08);
}

/* Mobile: companion-app explorer — tabs in one swipeable row, clear of the copy */
@media (max-width: 768px) {
  .explorer-tabs { padding: 0 10px; }
  .explorer-tabs-pill {
    flex-wrap: nowrap;
    overflow-x: auto;
    max-width: 100%;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .explorer-tabs-pill::-webkit-scrollbar { display: none; }
  .explorer-tab { padding: 8px 12px; font-size: 13px; flex: none; }
  .panel-content { padding-top: 96px; justify-content: center; }
  .panel-content .phone-frame { margin: 0 auto; }
}

/* Mobile: lifestyle tiles become a horizontal snap rail instead of a long stack */
@media (max-width: 768px) {
  .lifestyle-grid { gap: 14px; padding-bottom: 8px; }
  .lifestyle-grid .life-tile { width: 240px; }
  .life-tile .tile-cap { padding: 18px; min-height: 112px; }
  .life-tile .tile-tag { font-size: 19px; }
}

/* Swipe indicator for the mobile lifestyle rail (built by main.js) */
.rail-ind { display: none; }
@media (max-width: 768px) {
  .rail-ind { display: flex; justify-content: center; margin-top: 18px; }
  .rail-ind-track {
    position: relative;
    width: 104px;
    height: 4px;
    background: rgba(22, 24, 29, .12);
    border-radius: 9999px;
    overflow: hidden;
  }
  .rail-ind-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: var(--blue);
    border-radius: 9999px;
    transition: transform .18s cubic-bezier(.16, .8, .24, 1);
    will-change: transform;
  }
}
@media (prefers-reduced-motion: reduce) {
  .rail-ind-bar { transition: none; }
}

/* Mobile: privacy legal-basis table stacks per row */
@media (max-width: 560px) {
  .lt-head { display: none; }
  .lt-row { grid-template-columns: 1fr; }
  .lt-row > div + div { border-left: none; border-top: 1px solid var(--line); padding-top: 10px; }
  .lt-row > div + div::before { content: 'Legal basis: '; font-weight: 600; color: var(--muted-cool); }
}

/* Product final CTA */
/* FAQ teaser on the product page — reuses the .faq-* accordion from the FAQ page */
.pdp-faq { background: var(--bg); padding: clamp(56px, 8vw, 96px) 0 0; }
.pdp-faq-inner { max-width: 760px; margin: 0 auto; padding: 0 clamp(18px, 4vw, 32px); }
.pdp-faq h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(26px, 3.8vw, 40px); line-height: 1.05; letter-spacing: -.02em; margin: 0 0 28px; text-align: center; }
.faq-more { text-align: center; margin-top: 26px; }
.pdp-cta { background: var(--bg); padding: clamp(56px, 8vw, 96px) 0; }
.pdp-cta-inner { max-width: 900px; margin: 0 auto; padding: 0 clamp(18px, 4vw, 32px); text-align: center; }
.pdp-cta h2 { font-size: clamp(30px, 4.6vw, 48px); line-height: 1.03; margin: 0 0 16px; }
.pdp-cta p { font-size: 18px; line-height: 1.55; color: var(--muted); margin: 0 auto 32px; max-width: 560px; }
.pdp-cta .cta-row { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.btn-outline-ink--cta { font-size: 17px; padding: 15px 32px; letter-spacing: .24px; }

/* ---------- Cart icon, drawer & pack selector ---------- */

.cart-btn {
  position: relative;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .22);
  cursor: pointer;
  flex: none;
  padding: 0;
}
.cart-btn:hover { background: rgba(255, 255, 255, .18); }
.cart-btn-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 9999px;
  background: var(--blue);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--ink);
}
.cart-btn-badge[hidden] { display: none; }

/* Drawer */
.cart-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  justify-content: flex-end;
  font-family: var(--font-body);
}
.cart-overlay[hidden] { display: none; }
.cart-scrim { position: absolute; inset: 0; background: rgba(11, 12, 15, .45); }
.cart-panel {
  position: relative;
  width: min(420px, 94vw);
  height: 100%;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  box-shadow: -24px 0 70px rgba(0, 0, 0, .28);
}
.cart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 24px;
  border-bottom: 1px solid var(--line);
}
.cart-head-title { font-family: var(--font-display); font-weight: 600; font-size: 20px; letter-spacing: -.01em; color: var(--ink); }
.cart-close {
  width: 36px;
  height: 36px;
  border: none;
  background: #F1F0EC;
  border-radius: 9999px;
  cursor: pointer;
  font-size: 19px;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cart-body { flex: 1; overflow-y: auto; padding: 8px 24px; }
.cart-empty-state { text-align: center; padding: 56px 12px; color: var(--muted-cool); }
.cart-empty-state p { font-size: 15px; line-height: 1.5; margin: 0; }
.cart-empty-state button {
  margin-top: 16px;
  background: var(--blue);
  color: #fff;
  border: none;
  font-weight: 600;
  font-size: 15px;
  padding: 12px 22px;
  border-radius: 9999px;
  cursor: pointer;
}
.cart-empty-state button:hover { background: var(--blue-deep); }
.drawer-line { display: flex; gap: 14px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.dl-thumb {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  background: #EDECE6;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.dl-thumb img { width: 78%; height: 78%; object-fit: contain; }
.dl-thumb img.dl-photo { width: 100%; height: 100%; object-fit: cover; }
.dl-main { flex: 1; min-width: 0; }
.dl-top { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.dl-top span { font-size: 15px; font-weight: 600; color: var(--ink); }
.dl-top span:last-child { flex: none; }
.dl-sub { font-size: 13px; color: var(--muted-cool); margin: 2px 0 10px; }
.dl-subrow { display: flex; align-items: center; gap: 8px; margin: 3px 0 12px; flex-wrap: wrap; }
.dl-subrow .dl-sub-text { font-size: 13px; color: var(--muted-cool); }
.dl-list { font-size: 12.5px; color: var(--muted-cool); text-decoration: line-through; }
.save-pill {
  font-size: 11px;
  font-weight: 600;
  color: #1F8A5B;
  background: #E7F6EF;
  border-radius: 9999px;
  padding: 2px 8px;
}
.dl-controls { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dl-qty { display: flex; align-items: center; border: 1px solid #D8D6CF; border-radius: 9999px; overflow: hidden; background: #fff; }
.dl-qty button { width: 34px; height: 34px; border: none; background: none; font-size: 17px; color: var(--ink); cursor: pointer; }
.dl-qty span { min-width: 26px; text-align: center; font-size: 14px; font-weight: 600; }
.dl-remove { background: none; border: none; color: var(--muted-cool); font-size: 13px; cursor: pointer; text-decoration: underline; padding: 0; }
.cart-foot { padding: 20px 24px; border-top: 1px solid var(--line); background: #fff; }
.cart-saving-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
  font-size: 14px;
  color: #1F8A5B;
  font-weight: 600;
}
.cart-saving-row[hidden] { display: none; }
.cart-foot-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.cart-foot-row .cf-label { font-size: 15px; color: var(--muted); }
.cart-foot-row .cf-total { font-family: var(--font-display); font-size: 22px; font-weight: 600; color: var(--ink); }
.price-was {
  color: var(--muted-cool);
  font-weight: 500;
  font-size: .82em;
  text-decoration: line-through;
  margin-right: 7px;
}
.cart-foot-ship { font-size: 12.5px; color: var(--muted-cool); margin-bottom: 16px; }
.cart-checkout {
  display: block;
  width: 100%;
  text-align: center;
  background: var(--blue);
  color: #fff;
  border: none;
  font-weight: 600;
  font-size: 16px;
  padding: 15px;
  border-radius: 9999px;
  cursor: pointer;
}
.cart-checkout:hover { background: var(--blue-deep); color: #fff; }
.cart-trust { display: flex; flex-direction: column; align-items: center; gap: 9px; margin-top: 14px; }
.cart-trust-row { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; }
.cart-trust span { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; }
.cart-trust svg { flex: none; }
body.cart-locked { overflow: hidden; }

/* Pack selector */
.pack-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; max-width: 460px; }
.pack-card {
  position: relative;
  width: 100%;
  text-align: left;
  background: #fff;
  border: 1px solid #D8D6CF;
  border-radius: 16px;
  cursor: pointer;
  font-family: inherit;
  padding: 0;
}
.pack-card--single { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; }
.pack-card--double { display: flex; flex-direction: column; overflow: hidden; }
.pack-ring { position: absolute; inset: 0; border: 2px solid var(--blue); border-radius: 16px; pointer-events: none; z-index: 1; display: none; }
.pack-card.is-selected .pack-ring { display: block; }
.pack-left { display: flex; align-items: center; gap: 12px; }
.pack-radio {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid #C9C6BE;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.pack-radio-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--blue); display: none; }
.pack-card.is-selected .pack-radio-dot { display: block; }
.pack-name { font-size: 16px; font-weight: 600; color: var(--ink); }
.pack-sub { display: block; font-size: 13px; color: var(--muted); margin-top: 1px; }
.pack-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 16px 18px; }
.pack-pricing { text-align: right; flex: none; }
.save-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .4px;
  color: #fff;
  background: var(--green);
  border-radius: 6px;
  padding: 2px 7px;
  margin-bottom: 4px;
}
.pack-price { display: block; font-size: 16px; font-weight: 600; color: var(--ink); }
.pack-compare { display: block; font-size: 12.5px; color: var(--muted-cool); text-decoration: line-through; }
.pack-perks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  width: 100%;
  padding: 15px 16px;
  border-top: 1px solid var(--line);
}
.perk { display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center; }
/* Kale iconen zonder tegeltje erachter -- zo staat het in de comp. De vaste
   hoogte houdt de drie op één lijn, ook al zijn de svg's 20 en 21px. */
.perk-icon {
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.perk > span:last-child { font-size: 11.5px; line-height: 1.3; color: var(--body-soft); }
.atc-btn {
  display: block;
  width: 100%;
  text-align: center;
  background: var(--blue);
  color: #fff;
  border: none;
  font-weight: 600;
  font-size: 17px;
  letter-spacing: .24px;
  padding: 16px 28px;
  border-radius: 9999px;
  max-width: 460px;
  margin-bottom: 12px;
  cursor: pointer;
  font-family: inherit;
}
.atc-btn:hover { background: var(--blue-deep); }
.atc-btn .atc-compare {
  color: rgba(255, 255, 255, .65);
  font-weight: 500;
  font-size: 15px;
  margin-left: 6px;
  text-decoration: line-through;
}
.buy-now-btn { width: 100%; margin-bottom: 14px; cursor: pointer; font-family: inherit; }

/* No orphan words at the end of paragraphs; headings wrap naturally, like the design. */
p, .guarantee, .sleep-note, .pdp-point span:last-child, .sleep-point span:last-child { text-wrap: pretty; }

/* ---- Partners page ---- */
.partner-hero { background: var(--ink); color: #fff; padding: clamp(56px,9vw,104px) 0 clamp(60px,9vw,100px); }
.partner-hero-grid {
  max-width: 1200px; margin: 0 auto; padding: 0 clamp(18px,4vw,32px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,340px), 1fr));
  gap: clamp(40px,5vw,72px); align-items: center;
}
.partner-badge {
  display: inline-flex; align-items: center; gap: 9px;
  border: 1px solid rgba(255,255,255,.2); border-radius: 9999px; padding: 7px 14px;
  font-size: 13px; font-weight: 600; letter-spacing: .3px; color: rgba(255,255,255,.82); margin-bottom: 26px;
}
.partner-badge .badge-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); display: inline-block; }
.partner-hero h1 {
  font-family: var(--font-display); font-weight: 600; font-size: clamp(38px,5.6vw,68px);
  line-height: 1.02; letter-spacing: -.025em; margin: 0 0 22px; max-width: 15ch;
}
.partner-hero-sub { font-size: clamp(16px,1.6vw,19px); line-height: 1.55; color: rgba(255,255,255,.72); max-width: 520px; margin: 0 0 32px; }
.partner-ctas { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.partner-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pstat { background: var(--card-dark); border-radius: 20px; padding: 24px; }
.pstat-title { font-family: var(--font-display); font-size: 22px; font-weight: 600; letter-spacing: -.01em; line-height: 1.1; color: #fff; }
.pstat-sub { font-size: 14px; color: rgba(255,255,255,.6); margin-top: 5px; }
.pstat--wide { grid-column: 1 / -1; background: var(--blue); padding: 28px; }
.pstat--wide .pstat-title { font-size: clamp(26px,3.4vw,36px); letter-spacing: -.02em; line-height: 1.05; }
.pstat--wide .pstat-sub { font-size: 15px; color: rgba(255,255,255,.85); margin-top: 8px; }
.who-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,240px), 1fr)); gap: 20px; }
.who-card { background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 30px; }
.who-card h3 { font-family: var(--font-display); font-weight: 600; font-size: 20px; letter-spacing: -.01em; margin: 0 0 10px; }
.who-card p { font-size: 15px; line-height: 1.55; color: var(--muted); margin: 0; }
.pstep-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,260px), 1fr)); gap: 20px; }
.pstep-card { background: var(--card-dark); border-radius: 20px; padding: 32px; }
.pstep-num { font-family: var(--font-display); font-size: 44px; font-weight: 600; color: var(--blue); line-height: 1; letter-spacing: -.02em; }
.pstep-card h3 { font-family: var(--font-display); font-weight: 600; font-size: 21px; letter-spacing: -.01em; margin: 18px 0 10px; }
.pstep-card p { font-size: 15px; line-height: 1.55; color: rgba(255,255,255,.72); margin: 0; }
.apply-section { background: var(--blue); color: #fff; padding: clamp(56px,8vw,96px) 0; position: relative; overflow: hidden; }
.apply-section::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 80% 20%, rgba(255,255,255,.12), rgba(255,255,255,0) 55%); }
.apply-inner { position: relative; max-width: 760px; margin: 0 auto; padding: 0 clamp(18px,4vw,32px); }
.apply-head { text-align: center; margin-bottom: 40px; }
.apply-head .eyebrow { color: rgba(255,255,255,.85); }
.apply-head h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(28px,4.4vw,44px); line-height: 1.03; letter-spacing: -.02em; margin: 0 0 12px; }
.apply-head p { font-size: 16px; line-height: 1.55; color: rgba(255,255,255,.88); margin: 0 auto; max-width: 480px; }
.apply-form { display: flex; flex-direction: column; gap: 16px; }
.apply-form .form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%,220px), 1fr)); gap: 16px; }
.apply-form label { display: block; font-size: 14px; font-weight: 500; color: rgba(255,255,255,.92); margin-bottom: 8px; }
/* Darker wells inside the blue panel: white text/placeholders need the contrast
   (white-on-light-blue only reached 2.9:1 — below the 4.5:1 minimum). */
.apply-form input, .apply-form select, .apply-form textarea {
  width: 100%; background: rgba(0,0,0,.18); border: 1px solid rgba(255,255,255,.38);
  border-radius: 12px; font-size: 16px; color: #fff;
}
.apply-form input, .apply-form select { height: 52px; padding: 0 16px; }
.apply-form textarea { padding: 14px 16px; line-height: 1.5; resize: vertical; }
.apply-form option { background: #fff; color: var(--ink); }
.apply-form input::placeholder, .apply-form textarea::placeholder { color: rgba(255,255,255,.8); }
.apply-form input:focus, .apply-form select:focus, .apply-form textarea:focus { outline: 2px solid #fff; outline-offset: 1px; }
.apply-form button[type="submit"] {
  align-self: flex-start; background: #fff; color: var(--blue); border: 0; font-weight: 600;
  font-size: 16px; letter-spacing: .24px; padding: 15px 32px; border-radius: 9999px; cursor: pointer;
}
.apply-form button[type="submit"]:hover { background: #EBEFFB; }
.apply-legal { font-size: 13px; color: rgba(255,255,255,.88); margin: 2px 0 0; }
.apply-legal a { color: #fff; text-decoration: underline; }
.apply-success { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3); border-radius: 20px; padding: 40px; text-align: center; }
.apply-success .success-check { width: 56px; height: 56px; border-radius: 50%; background: #fff; color: var(--blue); font-size: 28px; display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; }
.apply-success h3 { font-family: var(--font-display); font-weight: 600; font-size: 24px; margin: 0 0 10px; }
.apply-success p { font-size: 16px; line-height: 1.55; color: rgba(255,255,255,.86); margin: 0; }
.apply-form .form-error { background: rgba(0,0,0,.18); border-radius: 12px; padding: 12px 14px; font-size: 14px; }
@media (max-width: 560px) { .partner-stats { grid-template-columns: 1fr; } }

/* QR-landingspagina (/pages/app) -- het adres dat op de verpakking staat.
   Donkere sectie, want de store-badges en het e-mailformulier zijn al voor een
   donkere ondergrond gemaakt; zo hoeft er niets opnieuw gestyled te worden. */
.app-gate {
  background: var(--ink);
  color: #fff;
  padding: clamp(56px, 10vw, 100px) 0 clamp(64px, 10vw, 108px);
  min-height: 58vh;
  display: flex;
  align-items: center;
}
.app-gate-inner { max-width: 620px; margin: 0 auto; padding: 0 clamp(18px, 5vw, 32px); text-align: center; }
.app-gate .badge {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .22);
  color: rgba(255, 255, 255, .9);
  margin-bottom: 24px;
}
.app-gate h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(30px, 6vw, 46px);
  line-height: 1.04;
  letter-spacing: -.02em;
  margin: 0 0 16px;
}
.app-gate-lead { font-size: clamp(16px, 2vw, 18px); line-height: 1.55; color: rgba(255, 255, 255, .72); margin: 0 0 30px; }
.app-gate .store-badges { margin-top: 0; }
.app-gate-fine { font-size: 13.5px; line-height: 1.5; color: rgba(255, 255, 255, .45); margin: 30px 0 0; }
.app-gate-back { display: inline-block; margin-top: 16px; font-size: 14.5px; font-weight: 600; color: rgba(255, 255, 255, .75); }
.app-gate-back:hover { color: #fff; }
/* Badge zonder ingevulde store-URL: ziet er hetzelfde uit, maar is geen dode link. */
.store-badge--inert { cursor: default; }

/* Uitklapblok onder de garantieregel in het koopblok. Hergebruikt .faq-item, dat
   al globaal in main.js aan een klik-handler hangt -- daarom is hier geen nieuwe
   JavaScript nodig, alleen andere maatvoering dan de FAQ-pagina. */
.buy-acc { margin-top: 18px; border-top: 1px solid var(--line); }
.buy-acc .buy-acc-item { border-bottom: 1px solid var(--line); }
.buy-acc .faq-q { padding: 13px 0; }
.buy-acc .faq-question { font-size: 15px; font-weight: 600; letter-spacing: 0; }
.buy-acc .faq-sign { font-size: 20px; }
.buy-acc .faq-a { padding: 0 0 15px; font-size: 14.5px; line-height: 1.6; max-width: none; }

/* ============================================================
   Nieuwe onderdelen uit de comp van 6 augustus
   ============================================================ */

/* Drie gebruiksregels onder de productbeschrijving */
.pdp-uses {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0 0 22px;
  max-width: 460px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.pdp-use { display: flex; align-items: center; gap: 10px; }
.pdp-use-icon { width: 34px; height: 34px; border-radius: 10px; background: #F1F0EC; display: flex; align-items: center; justify-content: center; flex: none; }
.pdp-use > span:last-child { font-size: 15px; line-height: 1.4; color: #2B2E35; }

/* Bezorgschatting onder de garantieregels */
.pdp-delivery {
  max-width: 460px;
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-size: 13.5px;
  color: var(--muted);
}
.pdp-delivery strong { font-weight: 600; color: var(--ink); }
.pdp-delivery svg { flex: none; }
.pdp-delivery-land { color: var(--blue); font-weight: 400; }
.pdp-delivery-land:hover { color: #2647B8; text-decoration: underline; }

/* Opsommingen in de dagbanden */
.day-points { display: flex; flex-direction: column; gap: 9px; }
.day-point { display: flex; align-items: flex-start; gap: 9px; }
.day-check { width: 17px; height: 17px; border-radius: 50%; background: rgba(255, 255, 255, .22); display: flex; align-items: center; justify-content: center; flex: none; margin-top: 2px; }
.day-point > span:last-child { font-size: 15px; line-height: 1.45; color: #fff; }

/* Opsommingen in de twee jobs-kaarten */
.job-points { display: flex; flex-direction: column; gap: 10px; }
.job-point { display: flex; align-items: flex-start; gap: 10px; }
.job-check { width: 18px; height: 18px; border-radius: 50%; background: rgba(47, 91, 224, .22); display: flex; align-items: center; justify-content: center; flex: none; margin-top: 2px; }
.job-point > span:last-child { font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, .82); }

/* ============================================================
   Landkiezer (Locations) + landregel in de footer
   ============================================================ */

.footer-copy { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.footer-loc { display: inline-flex; align-items: center; gap: 7px; color: rgba(255, 255, 255, .45); transition: color .18s ease; }
.footer-loc:hover { color: rgba(255, 255, 255, .78); }
/* Moet display:inline-flex overrulen, anders blijft de link zichtbaar zolang
   het land nog niet bekend is. */
.footer-loc[hidden] { display: none; }

.loc-page { padding: clamp(48px, 7vw, 80px) 0 clamp(56px, 8vw, 96px); }
.loc-inner { max-width: 1000px; margin: 0 auto; padding: 0 clamp(18px, 4vw, 32px); }
.loc-head { text-align: center; margin-bottom: clamp(36px, 5vw, 52px); }
.loc-head h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(28px, 4.4vw, 42px);
  line-height: 1.05;
  letter-spacing: -.02em;
  margin: 0 0 12px;
}
.loc-head p { font-size: 16px; line-height: 1.6; color: var(--muted); margin: 0; }
.loc-region { margin: 0 0 clamp(32px, 4vw, 44px); }
.loc-region h2 {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--muted-cool);
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.loc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 12px; }
.loc-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 15px 16px;
  transition: border-color .18s ease, background .18s ease;
}
.loc-card:hover { border-color: var(--ink); }
.loc-card svg { flex: none; color: var(--muted-cool); }
.loc-card > span { font-size: 15px; font-weight: 500; color: var(--ink); line-height: 1.3; }
/* Het land dat nu geldt, zodat de bezoeker ziet waar de levertijden op slaan. */
.loc-card.is-current { border-color: var(--blue); background: #F4F7FE; }
.loc-card.is-current svg { color: var(--blue); }
.loc-note {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 clamp(18px, 4vw, 32px);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--muted);
  text-align: center;
}