/* ============================================================
   Rivilo marketing site — page-level additions on top of legacy.css.
   Rule: every colour, radius, shadow and typeface comes from the legacy
   token set (:root in legacy.css). Nothing new is introduced here.
   ============================================================ */

body { overflow: visible; }
.skip-link { position: absolute; left: -999px; top: 8px; background: var(--primary); color: #fff; padding: 10px 16px; border-radius: var(--radius-pill); z-index: 100; }
.skip-link:focus { left: 16px; }
:focus-visible { outline: 2px solid var(--secondary-dark); outline-offset: 3px; }
.mono { font-size: 13px; font-weight: 500; letter-spacing: 0; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.container.narrow { max-width: 760px; }
.container.mid { max-width: 960px; }
.center { text-align: center; }

/* Bands: alternate off-white / cream, never pure white */
.band { padding: 120px 24px; position: relative; }
.band-cream { background: var(--neutral-warm); }
.band-deep { background: linear-gradient(180deg, var(--neutral) 0%, var(--neutral-deep) 100%); }
.band-tight { padding: 88px 24px; }
.band + .band { border-top: 1px solid var(--line-soft); }

/* Section headline pattern: roman clause + italic green clause (legacy .section-headline) */
.section-headline.left { text-align: left; margin-left: 0; }
.section-sub { font-size: 17.5px; line-height: 1.55; color: var(--text-muted); max-width: 620px; margin: 0 auto; text-align: center; }
.section-sub.left { margin-left: 0; text-align: left; }
.eyebrow-center { display: flex; justify-content: center; }

/* Page hero for subpages (nav is fixed, so give it room) */
.page-hero { padding: 180px 24px 72px; text-align: center; position: relative; isolation: isolate; overflow: hidden;
  background:
    radial-gradient(ellipse 70% 50% at 70% 0%, rgba(255, 226, 180, 0.45) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 15% 20%, rgba(220, 230, 240, 0.55) 0%, transparent 65%),
    linear-gradient(180deg, #E5E5D7 0%, var(--neutral-warm) 55%, var(--neutral) 100%); }
.page-hero-compact { padding-bottom: 48px; }
.page-hero .section-headline { font-size: clamp(40px, 5.6vw, 72px); }
.page-lede { font-size: 18.5px; line-height: 1.55; color: var(--text-muted); max-width: 620px; margin: 0 auto 36px; }
.page-meta { color: var(--text-light); }
.hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.hero-note { margin-top: 18px; color: var(--text-light); font-size: 13.5px; }

/* Home hero: legacy .hero gradient without the fixed 100vh */
.home-hero { min-height: auto; padding: 190px 24px 96px; text-align: center; }
.home-hero .hero-headline { font-family: 'Newsreader', Georgia, serif; font-weight: 400; font-size: clamp(42px, 6.4vw, 84px); line-height: 1.0; letter-spacing: -0.03em; max-width: 980px; margin: 0 auto 24px; }
.home-hero .hero-headline em { font-style: italic; font-weight: 300; color: var(--secondary-dark); }
.hero-runs { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 40px; }
.hero-runs span { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: var(--radius-pill); background: rgba(255,255,255,0.7); box-shadow: 0 0 0 1px rgba(26,26,26,0.06); font-size: 13.5px; color: var(--text); }
.hero-runs img { width: 16px; height: 16px; object-fit: contain; }

/* Illustrative label — once per screen, visible, not apologetic */
.shot { position: relative; margin: 48px auto 0; max-width: 960px; }
.shot-label { position: absolute; top: -14px; left: 24px; z-index: 2; background: var(--primary); color: #fff; padding: 6px 14px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 500; }
.shot-label.ghost { background: var(--neutral-deep); color: var(--text-muted); }
.shot-slot { min-height: 320px; border: 1px dashed var(--line-strong); border-radius: var(--radius-card); display: flex; align-items: center; justify-content: center; color: var(--text-light); font-size: 13px; background: rgba(255,255,255,0.4); }
.shot .mailbox, .shot .watch-card, .shot .founder-card { margin: 0 auto; }

/* Steps: numbered ONLY for real sequences */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 64px; }
.step-num { font-size: 13px; font-weight: 500; color: var(--secondary-dark); margin-bottom: 14px; }
.step h3 { font-family: 'Newsreader', Georgia, serif; font-weight: 400; font-size: 26px; line-height: 1.15; letter-spacing: -0.015em; margin: 0 0 10px; }
.step p { color: var(--text-muted); font-size: 15px; line-height: 1.55; margin: 0; }

/* Where it lives */
.where-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 56px; }
.where { background: rgba(255,255,255,0.75); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: 30px 30px 26px; }
.where-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.where-head img { width: 28px; height: 28px; object-fit: contain; }
.where h3 { font-family: 'Newsreader', Georgia, serif; font-weight: 400; font-size: 24px; margin: 0; letter-spacing: -0.015em; }
.where p { color: var(--text-muted); font-size: 15px; line-height: 1.55; margin: 0 0 12px; }
.where ul { margin: 0 0 16px; padding-left: 18px; color: var(--text-muted); font-size: 14.5px; line-height: 1.6; }
.where a.more { font-size: 14px; color: var(--secondary-dark); font-weight: 500; }
.beta { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: var(--radius-pill); background: var(--secondary-pale); color: var(--secondary-dark); font-size: 12px; font-weight: 500; vertical-align: middle; }
.beta.soon { background: var(--neutral-deep); color: var(--text-muted); }

/* Plain lists of claims (not-list, kv) */
.plain-list { list-style: none; padding: 0; margin: 48px auto 0; max-width: 720px; }
.plain-list li { padding: 22px 0; border-top: 1px solid var(--line); font-family: 'Newsreader', Georgia, serif; font-size: 24px; line-height: 1.3; letter-spacing: -0.015em; }
.plain-list li:last-child { border-bottom: 1px solid var(--line); }
.plain-list li small { display: block; font-family: 'Inter', sans-serif; font-size: 15px; color: var(--text-muted); margin-top: 6px; letter-spacing: 0; }
.kv { display: grid; grid-template-columns: 220px 1fr; gap: 16px 32px; margin-top: 40px; }
.kv dt { font-size: 14px; font-weight: 600; color: var(--secondary-dark); padding-top: 2px; }
.kv dd { margin: 0; color: var(--text); font-size: 15.5px; line-height: 1.6; }
.kv dd + dt, .kv dd + dt + dd { border-top: 1px solid var(--line-soft); padding-top: 16px; }

/* Path: request in -> artefact out */
.path { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 20px; align-items: stretch; margin-top: 56px; }
.path-node { background: rgba(255,255,255,0.8); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: 26px; }
.path-node .mono { color: var(--secondary-dark); display: block; margin-bottom: 10px; }
.path-node h3 { font-family: 'Newsreader', Georgia, serif; font-weight: 400; font-size: 22px; margin: 0 0 8px; letter-spacing: -0.015em; }
.path-node p { color: var(--text-muted); font-size: 14.5px; line-height: 1.55; margin: 0; }
.path-arrow { align-self: center; color: var(--text-light); font-size: 22px; }

/* Comparison table: prose cells, Rivilo column distinguished, scrolls on mobile */
.cmp-wrap { margin-top: 48px; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 24px; box-shadow: var(--shadow-card); background: #fff; }
.cmp { border-collapse: collapse; min-width: 900px; width: 100%; font-size: 13.5px; line-height: 1.45; }
.cmp th, .cmp td { padding: 18px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line-soft); border-right: 1px solid var(--line-soft); color: var(--text-muted); }
.cmp th { background: var(--neutral); color: var(--text); font-weight: 600; font-size: 13px; }
.cmp td:first-child { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; }
.cmp .rv { background: var(--secondary-pale); color: var(--text); }
.cmp th.rv { background: var(--secondary-light); }
.cmp tr:last-child td { border-bottom: none; }
.cmp td:last-child, .cmp th:last-child { border-right: none; }
.cmp-note { margin-top: 14px; font-size: 13px; color: var(--text-light); text-align: center; }

/* Boundaries statement (legacy .human) reused as-is */

/* Proof */
.proof-card { max-width: 760px; margin: 48px auto 0; background: rgba(255,255,255,0.85); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: 36px 40px; }
.proof-card .mono { color: var(--secondary-dark); }
.proof-num { font-family: 'Newsreader', Georgia, serif; font-size: clamp(40px, 6vw, 64px); line-height: 1; letter-spacing: -0.03em; margin: 10px 0 6px; }
.proof-card p { color: var(--text-muted); font-size: 15px; line-height: 1.6; margin: 8px 0 0; }

/* Price anchor */
.price-card { max-width: 520px; margin: 48px auto 0; background: rgba(255,255,255,0.9); border-radius: var(--radius-card); box-shadow: var(--shadow-soft); padding: 40px; text-align: center; }
.price-num { font-family: 'Newsreader', Georgia, serif; font-size: clamp(48px, 7vw, 76px); line-height: 1; letter-spacing: -0.03em; }
.price-num small { font-family: 'Inter', sans-serif; font-size: 16px; color: var(--text-muted); letter-spacing: 0; }
.price-card ul { list-style: none; padding: 0; margin: 24px 0; text-align: left; }
.price-card li { padding: 10px 0; border-top: 1px solid var(--line-soft); font-size: 15px; color: var(--text); display: flex; gap: 10px; }
.price-card li::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--secondary); margin-top: 7px; flex-shrink: 0; }
.price-flag { display: inline-block; margin-bottom: 14px; }

/* FAQ with <details> (no JS), styled like legacy .faq */
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list details:first-child { border-top: 1px solid var(--line); }
.faq-list summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 26px 4px; font-family: 'Newsreader', Georgia, serif; font-size: 22px; letter-spacing: -0.015em; color: var(--primary); }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: '+'; font-family: 'Inter', sans-serif; color: var(--text-light); font-size: 22px; }
.faq-list details[open] summary::after { content: '–'; }
.faq-list summary:hover { color: var(--secondary-dark); }
.faq-list .faq-a { padding: 0 4px 26px; color: var(--text-muted); font-size: 15.5px; line-height: 1.6; max-width: 680px; }

/* Prose (legal, product explanations) */
.prose-section { padding: 24px 24px 120px; }
.prose { font-size: 16px; line-height: 1.7; color: var(--text); }
.prose h2 { font-family: 'Newsreader', Georgia, serif; font-weight: 400; font-size: 30px; letter-spacing: -0.02em; margin: 48px 0 12px; }
.prose h3 { font-family: 'Newsreader', Georgia, serif; font-weight: 400; font-size: 22px; margin: 32px 0 8px; }
.prose p, .prose li { color: var(--text); }
.prose li { margin: 6px 0; }
.prose a { color: var(--secondary-dark); text-decoration: underline; text-underline-offset: 3px; }
.prose table { border-collapse: collapse; width: 100%; font-size: 14.5px; margin: 20px 0; display: block; overflow-x: auto; }
.prose th, .prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose th { font-weight: 600; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 40px 0; }
.prose blockquote { margin: 20px 0; padding: 12px 20px; border-left: 2px solid var(--secondary-light); color: var(--text-muted); }
.prose code { font-size: 14px; font-weight: 500; background: var(--neutral-warm); padding: 2px 6px; border-radius: 6px; }

/* People */
.people { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; margin-top: 56px; }
.person { display: flex; gap: 20px; align-items: flex-start; }
.person img { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; flex-shrink: 0; box-shadow: var(--shadow-low); }
.person h3 { font-family: 'Newsreader', Georgia, serif; font-weight: 400; font-size: 24px; margin: 0 0 4px; }
.person .role { font-size: 13px; font-weight: 500; color: var(--secondary-dark); margin: 0 0 10px; }
.person p { color: var(--text-muted); font-size: 15px; line-height: 1.55; margin: 0; }

/* Forms */
.form { max-width: 560px; margin: 40px auto 0; text-align: left; }
.form label { display: block; font-size: 13.5px; font-weight: 500; margin: 18px 0 6px; }
.form input, .form textarea { width: 100%; font: inherit; font-size: 15px; padding: 13px 16px; border-radius: var(--radius-soft); border: 1px solid var(--line-strong); background: rgba(255,255,255,0.9); color: var(--text); }
.form input:focus, .form textarea:focus { outline: 2px solid var(--secondary-dark); outline-offset: 1px; border-color: transparent; }
.form textarea { min-height: 140px; resize: vertical; }
.form .btn { margin-top: 24px; width: 100%; padding: 16px 28px; font-size: 15px; }
.form-hint { font-size: 13px; color: var(--text-light); margin-top: 12px; text-align: center; }
.form-success { display: none; max-width: 560px; margin: 40px auto 0; padding: 32px; background: var(--secondary-pale); border-radius: var(--radius-card); text-align: center; }
.form-success h3 { font-family: 'Newsreader', Georgia, serif; font-weight: 400; font-size: 26px; margin: 0 0 8px; }
.form-success p { color: var(--text-muted); margin: 0; }
.hp { display: none; }
.form-success:focus { outline: none; }

/* Integration hub cards */
.hub { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 56px; }
.hub a { display: block; background: rgba(255,255,255,0.8); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: 28px; color: var(--text); }
.hub .hub-card { display: block; background: rgba(255,255,255,0.8); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: 28px; color: var(--text); }
.hub .hub-card p:last-child { margin-bottom: 0; }
.hub a:hover { text-decoration: none; box-shadow: var(--shadow-soft); }
/* Announced integrations: the same card, not a link (there is no page yet), and
   quieter than the live ones so a scanning reader does not mistake them. */
.hub .hub-soon { display: block; background: rgba(255,255,255,0.45); border-radius: var(--radius-card); box-shadow: 0 0 0 1px rgba(26,26,26,0.06); padding: 28px; color: var(--text); }
.hub .hub-soon .logos img { opacity: 0.85; }
.hub .hub-soon { position: relative; }
.hub .hub-soon > .beta.soon { position: absolute; top: 24px; right: 24px; }
.hub .logos { display: flex; gap: 10px; margin-bottom: 16px; }
.hub .logos img { width: 26px; height: 26px; object-fit: contain; }
.hub h3 { font-family: 'Newsreader', Georgia, serif; font-weight: 400; font-size: 24px; margin: 0 0 8px; letter-spacing: -0.015em; }
.hub p { color: var(--text-muted); font-size: 14.5px; line-height: 1.55; margin: 0 0 12px; }

/* Closing CTA band */
.closing { text-align: center; padding: 160px 24px; }
.closing .section-headline { margin-bottom: 28px; }

/* Footer additions */
.footer-cols { display: flex; gap: 56px; flex-wrap: wrap; }
.footer-col { display: flex; flex-direction: column; gap: 10px; min-width: 150px; }
.footer-col a { color: var(--text-muted); font-size: 14px; }
.footer-col a:hover { color: var(--primary); text-decoration: none; }
.footer-col-title { color: var(--text-light); margin: 0 0 6px; font-weight: 500; }
.footer-entity { color: var(--text-light); margin-top: 14px; line-height: 1.6; }
/* Made in Europe: the ring of stars from the Future Ready site, turning very slowly. */
.footer-europe { display: inline-flex; align-items: center; gap: 9px; color: var(--text-muted); transition: color 0.2s var(--ease); }
.footer-europe:hover { color: var(--primary); text-decoration: none; }
.footer-europe-stars { display: inline-flex; color: #3c5fb8; }
.footer-europe-stars svg { display: block; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) { .footer-europe-stars svg { animation: footer-europe-turn 28s linear infinite; } }
@keyframes footer-europe-turn { to { transform: rotate(360deg); } }
.footer-bottom { max-width: 1200px; margin: 56px auto 0; padding-top: 24px; border-top: 1px solid var(--line-soft); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--text-light); }

/* Mobile nav */
.nav-mobile { display: none; position: relative; }
.nav-mobile summary { list-style: none; cursor: pointer; padding: 10px 18px; }
.nav-mobile summary::-webkit-details-marker { display: none; }
.nav-mobile-panel { position: absolute; right: 0; top: 52px; min-width: 220px; background: rgba(255,255,255,0.96); backdrop-filter: blur(20px); border-radius: var(--radius-card); box-shadow: var(--shadow-soft); padding: 12px; display: flex; flex-direction: column; gap: 2px; }
.nav-mobile-panel a { padding: 12px 14px; border-radius: var(--radius-soft); font-size: 15px; font-weight: 500; color: var(--primary); }
.nav-mobile-panel a[aria-current] { background: var(--neutral-warm); }
.nav-mobile-panel .btn { margin-top: 8px; justify-content: center; }
.nav-link[aria-current] { background: rgba(26,26,26,0.06); }

@media (max-width: 880px) {
  .nav-cta { display: none; }
  .nav-mobile { display: block; }
  .steps, .where-grid, .people, .hub { grid-template-columns: 1fr; }
  .path { grid-template-columns: 1fr; }
  .path-arrow { transform: rotate(90deg); justify-self: center; }
  .kv { grid-template-columns: 1fr; gap: 6px 0; }
  .kv dd { margin-bottom: 14px; }
  .kv dd + dt, .kv dd + dt + dd { border-top: none; padding-top: 0; }
  .band { padding: 88px 20px; }
  .page-hero { padding: 140px 20px 56px; }
  .home-hero { padding: 150px 20px 72px; }
  .closing { padding: 110px 20px; }
  .plain-list li { font-size: 20px; }
  .proof-card, .price-card { padding: 28px 24px; }
}
/* Telefoon: het vaste logo en Menu schoven zonder grond over de tekst.
   Zodra je scrolt krijgt de balk een lichte, wazige grond over de volle breedte. */
@media (max-width: 880px) {
  .nav { transition: top 0.25s var(--ease), padding 0.25s var(--ease), background-color 0.25s var(--ease), box-shadow 0.25s var(--ease); }
  .nav.is-scrolled { top: 0; padding-top: 10px; padding-bottom: 10px; background: rgba(249, 248, 245, 0.88); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); box-shadow: 0 1px 0 rgba(26, 26, 26, 0.06); }
}
@media (max-width: 400px) {
  .nav { padding: 0 14px; }
  .nav-mobile summary { padding: 9px 14px; font-size: 13px; }
  .home-hero .hero-headline { font-size: 38px; }
  .page-hero .section-headline { font-size: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Illustrative label: static above the screen on narrow viewports so it never covers UI */
@media (max-width: 880px) {
  .shot-label { position: static; display: inline-block; margin: 0 0 12px 8px; }
  .shot { margin-top: 36px; }
}
.nav-mobile-panel a.btn { color: #fff; }

/* Home hero keeps the landscape and the character from the original landing */
.home-hero { padding-bottom: clamp(300px, 30vw, 420px); }
.home-hero .hero-landscape { height: clamp(260px, 30vw, 440px); }
.home-hero .hero-character { top: 150px; }
@media (max-width: 880px) { .home-hero { padding-bottom: 240px; } .home-hero .hero-landscape { height: 240px; } .home-hero .hero-character { top: 120px; right: 12px; width: 90px; } }
@media (prefers-reduced-motion: reduce) { .hero-character { animation: none; } }
.hero-landscape { background-image: url('/assets/backgroundlandscape.webp'); }

/* Founder avatar inside the CTA: bigger, no ring, lifts and tilts on hover */
.btn { overflow: visible; }
.cta-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; margin: -10px 6px -10px -14px; flex-shrink: 0; transform-origin: 50% 60%; transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease); }
.btn:hover .cta-avatar, .btn:focus-visible .cta-avatar { transform: translateY(-5px) scale(1.28) rotate(-8deg); box-shadow: 0 10px 22px -6px rgba(26,26,26,0.45); }
/* Two black buttons in one view compete. While the hero button is on screen, the one in the
   navigation steps back to an outline; it fills again once the hero button has scrolled away
   (the script in the layout adds .is-solid). Without :has() or without JavaScript it stays filled. */
.nav-cta { transition: background-color 220ms ease, color 220ms ease, box-shadow 220ms ease, transform 160ms ease; }
body:has(.hero-actions .btn-primary) .nav-cta:not(.is-solid) { background: transparent; color: var(--primary); box-shadow: inset 0 0 0 1.5px rgba(26,26,26,0.82); }
body:has(.hero-actions .btn-primary) .nav-cta:not(.is-solid):hover { background: var(--primary); color: #fff; box-shadow: inset 0 0 0 1.5px var(--primary); }
@media (prefers-reduced-motion: reduce) { .nav-cta { transition: none; } }
.nav-cta .cta-avatar { width: 30px; height: 30px; margin: -8px 6px -8px -12px; }
.nav-mobile-panel .btn .cta-avatar { width: 30px; height: 30px; }
@media (prefers-reduced-motion: reduce) { .btn:hover .cta-avatar { transform: none; } }
.hero-runs-label { margin: 44px 0 0; color: var(--text-light); font-size: 13.5px; }
.hero-runs { margin-top: 14px; }

/* Client memory card */
.memory-card { max-width: 960px; margin: 0 auto; background: #fff; border-radius: 24px; box-shadow: var(--shadow-soft); overflow: hidden; text-align: left; }
.memory-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 22px 28px; background: var(--neutral); border-bottom: 1px solid var(--line-soft); flex-wrap: wrap; }
.memory-client { font-family: 'Newsreader', Georgia, serif; font-size: 24px; margin: 0 0 2px; letter-spacing: -0.015em; }
.memory-meta { margin: 0; font-size: 13px; color: var(--text-muted); }
.memory-sources { font-size: 12.5px; color: var(--secondary-dark); background: var(--secondary-pale); padding: 6px 12px; border-radius: var(--radius-pill); white-space: nowrap; }
.memory-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.memory-col { padding: 22px 28px; border-right: 1px solid var(--line-soft); }
.memory-col:last-child { border-right: none; }
.memory-label { margin: 0 0 12px; font-size: 13px; font-weight: 600; color: var(--secondary-dark); }
.memory-col ul { list-style: none; margin: 0; padding: 0; }
.memory-col li { font-size: 14px; line-height: 1.5; color: var(--text); padding: 8px 0; border-top: 1px solid var(--line-soft); }
.memory-col li:first-child { border-top: none; padding-top: 0; }
.memory-foot { display: flex; align-items: center; gap: 10px; margin: 0; padding: 16px 28px; border-top: 1px solid var(--line-soft); font-size: 13px; color: var(--text-muted); background: var(--neutral); }
.memory-avatar { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
@media (max-width: 880px) { .memory-grid { grid-template-columns: 1fr; } .memory-col { border-right: none; border-bottom: 1px solid var(--line-soft); } .memory-col:last-child { border-bottom: none; } }
.cmp-brand { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
.cmp-brand img { width: 22px; height: 22px; object-fit: contain; border-radius: 5px; }

/* Pricing bands and worked example */

/* ===== Home v3: one big headline, real screens, small section titles ===== */
.home-hero.v3 { padding-bottom: clamp(80px, 9vw, 140px); }
.home-hero.v3 .hero-headline { font-size: clamp(40px, 6vw, 80px); }
.home-hero.v3 .hero-runs-label { margin-top: 36px; }
.hero-shot { position: relative; z-index: 2; margin: 56px auto 0; max-width: 1200px; }
.hero-scrub { --hero-video-rotate-x: 0deg; --hero-video-rotate-y: 0deg; transform: perspective(1400px) rotateX(var(--hero-video-rotate-x)) rotateY(var(--hero-video-rotate-y)); transform-origin: center center; will-change: transform; }
.hero-shot img { display: block; width: 100%; height: auto; border-radius: 16px; box-shadow: var(--shadow-soft); background: #fff; }
.hero-shot figcaption { margin-top: 14px; font-size: 13.5px; color: var(--text-muted); }
.home-hero.v3 .hero-landscape { height: clamp(220px, 26vw, 400px); }
.home-hero.v3 .hero-character {
  --hero-character-x: 0px;
  --hero-character-y: 0px;
  --hero-character-rotation: -6deg;
  top: clamp(120px, 10.5vw, 150px);
  translate: var(--hero-character-x) var(--hero-character-y);
  transform: rotate(var(--hero-character-rotation));
  animation: none;
  will-change: translate, transform;
}
.home-hero.v3.hero-character-landed .hero-character { animation: hero-character-land 520ms cubic-bezier(0.22, 0.78, 0.32, 1) both; }
@keyframes hero-character-land {
  0% { transform: rotate(var(--hero-character-rotation)) scale(1); }
  34% { transform: rotate(5deg) translateY(5px) scale(0.93, 1.07); }
  68% { transform: rotate(1deg) translateY(-3px) scale(1.02, 0.98); }
  100% { transform: rotate(2deg) scale(1); }
}
.features { padding: 96px 24px 40px; }
.feature { display: grid; grid-template-columns: 1fr 1.6fr; gap: 56px; align-items: center; padding: 56px 0; border-top: 1px solid var(--line-soft); }
.feature:first-child { border-top: none; padding-top: 0; }
.feature.flip .feature-text { order: 2; }
.feature h2 { font-family: 'Newsreader', Georgia, serif; font-weight: 400; font-size: clamp(26px, 2.6vw, 34px); line-height: 1.12; letter-spacing: -0.02em; margin: 0 0 14px; text-align: left; }
.feature p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--text-muted); max-width: 420px; }
.screen { margin: 0; }
.screen img { display: block; width: 100%; height: auto; border-radius: 14px; box-shadow: var(--shadow-card); background: #fff; }
.feature.tall .screen { max-width: 420px; justify-self: center; }
.feature.tall { grid-template-columns: 1fr 1fr; }
.h2-plain { font-family: 'Newsreader', Georgia, serif; font-weight: 400; font-size: clamp(28px, 3vw, 38px); line-height: 1.12; letter-spacing: -0.02em; margin: 0 0 8px; }
.h2-plain.center { text-align: center; margin-bottom: 8px; }
.price-line { padding: 80px 24px; }
.price-big { font-family: 'Newsreader', Georgia, serif; font-size: clamp(44px, 6vw, 72px); line-height: 1; letter-spacing: -0.03em; margin: 0 0 16px; }
.price-big span { font-size: clamp(22px, 2.4vw, 30px); letter-spacing: -0.015em; color: var(--text); }
.proof-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; }
/* Homepage "Built for our own studio first": short text, a button to About, the studio photo. */
.origin-lede { margin: 14px 0 0; max-width: 480px; font-size: 16px; line-height: 1.6; color: var(--text-muted); }
.origin-note { margin: 18px 0 0; max-width: 480px; font-size: 12.5px; line-height: 1.55; color: var(--text-light); }
.origin-action { margin: 26px 0 0; }

.screen.note img { box-shadow: none; background: transparent; border-radius: 12px; }
.screen.note figcaption { margin-top: 10px; font-size: 13.5px; color: var(--text-muted); }
.screen figcaption { margin-top: 10px; font-size: 13.5px; color: var(--text-muted); }
.cmp-wrap { margin-top: 32px; }
@media (max-width: 880px) {
  .feature, .feature.tall, .proof-grid { grid-template-columns: 1fr; gap: 24px; padding: 40px 0; }
  .feature.flip .feature-text { order: 0; }
  .feature p { max-width: none; }
  .features { padding: 56px 20px 24px; }
  .hero-shot { margin-top: 40px; }
}
.price-big span { display: block; margin-top: 10px; }
.feature-list { list-style: none; margin: 16px 0 0; padding: 0; max-width: 460px; }
.feature-list li { font-size: 14.5px; line-height: 1.55; color: var(--text); padding: 9px 0; border-top: 1px solid var(--line-soft); }
.screen.duo { display: grid; gap: 14px; }
.screen.duo .screen:last-child { width: 88%; justify-self: end; margin-top: -6px; }
.screen.video video { display: block; width: 100%; height: auto; border-radius: 14px; box-shadow: var(--shadow-card); background: #fff; }
.screen.video figcaption { margin-top: 10px; font-size: 13px; color: var(--text-light); }
.feature.flip { grid-template-columns: 1.6fr 1fr; }
@media (max-width: 880px) { .feature.flip { grid-template-columns: 1fr; } }
/* Build-mode recording bleeds off the left edge so the chat side reads large */
.features { overflow: hidden; }
.feature.bleed { grid-template-columns: 1.15fr 1fr; align-items: center; gap: 48px; }
.feature.bleed .screen.video { width: 150%; margin-left: -50%; }
.feature.bleed .screen.video video { border-radius: 0 14px 14px 0; }
.feature.bleed .screen.video figcaption { margin-left: 50%; }
@media (max-width: 880px) { .feature.bleed { grid-template-columns: 1fr; } .feature.bleed .screen.video { width: 118%; margin-left: -18%; } .feature.bleed .screen.video figcaption { margin-left: 18%; } }
.h2-mascot { display: block; width: 56px; height: 56px; margin: 0 0 14px; filter: drop-shadow(0 8px 14px rgba(95,136,95,0.22)); }

/* Build-mode row: the same subtle grid canvas as the agent chat in Build mode */
.feature.bleed { position: relative; }
.feature.bleed::before { content: ''; position: absolute; inset: 0 -100vw 0 -100vw; z-index: -1; pointer-events: none;
  background-color: color-mix(in oklab, var(--secondary-pale) 20%, var(--neutral));
  background-image: linear-gradient(rgba(74, 107, 74, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(74, 107, 74, 0.045) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent); }
.features { position: relative; z-index: 0; }

/* ===== Notification preview (Slack / Teams), adapts to what you ask ===== */
.notify-band { padding: 0 24px 96px; }
.notify-intro { max-width: 720px; margin: 0 auto 36px; }
.np { display: grid; grid-template-columns: 1.25fr 1fr; background: #fff; border-radius: 22px; box-shadow: var(--shadow-soft); overflow: hidden; max-width: 1200px; margin: 0 auto; }
.np-left { padding: 26px 28px 22px; background: var(--neutral); border-right: 1px solid var(--line-soft); }
.np-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 18px; }
.np-head-l { display: flex; align-items: center; gap: 12px; }
.np-logo { width: 26px; height: 26px; object-fit: contain; }
.np-title { font-family: 'Newsreader', Georgia, serif; font-size: 22px; margin: 0; letter-spacing: -0.015em; }
.np-sub { margin: 0; font-size: 13px; color: var(--text-muted); }
.np-toggle { display: inline-flex; background: rgba(255,255,255,0.8); border-radius: var(--radius-pill); padding: 4px; box-shadow: 0 0 0 1px rgba(26,26,26,0.06); }
.np-tab { font: inherit; font-size: 13px; font-weight: 500; padding: 6px 14px; border-radius: var(--radius-pill); color: var(--text-muted); cursor: pointer; }
.np-tab.is-on { background: var(--primary); color: #fff; }
.np-msg { border-radius: 16px; padding: 18px 20px; transition: background 0.3s var(--ease), color 0.3s var(--ease); }
.np-msg.slack { background: var(--primary); color: #fff; }
.np-msg.teams { background: #fff; color: var(--text); box-shadow: 0 0 0 1px var(--line), var(--shadow-low); }
.np-msg-top { display: flex; gap: 12px; align-items: flex-start; }
.np-avatar { width: 34px; height: 34px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.np-avatar.sm { width: 24px; height: 24px; border-radius: 50%; }
.np-msg-body { min-width: 0; flex: 1; font-size: 14px; line-height: 1.5; }
.np-from { margin: 0 0 6px; font-size: 14px; }
.np-app { font-size: 10px; font-weight: 600; padding: 1px 5px; border-radius: 4px; background: rgba(255,255,255,0.18); margin-left: 4px; vertical-align: middle; }
.np-msg.teams .np-app { background: var(--neutral-deep); color: var(--text-muted); }
.np-time { font-size: 12px; opacity: 0.55; margin-left: 6px; }
.np-h { margin: 0 0 4px; font-weight: 600; font-size: 15px; }
.np-meta { margin: 0 0 10px; font-size: 13px; opacity: 0.85; }
.np-meta a { color: #9CBE98; text-decoration: underline; text-underline-offset: 2px; }
.np-msg.teams .np-meta a { color: var(--secondary-dark); }
.np-p { margin: 0 0 8px; }
.np-q { margin: 0 0 10px; padding: 2px 0 2px 12px; border-left: 3px solid rgba(255,255,255,0.35); opacity: 0.9; font-size: 13.5px; }
.np-msg.teams .np-q { border-left-color: var(--secondary-light); color: var(--text-muted); }
.np-new { animation: np-in 0.45s var(--ease) both; }
@keyframes np-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.np-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 10px; }
.np-btn { font: inherit; font-size: 13px; font-weight: 500; padding: 7px 12px; border-radius: 6px; background: rgba(255,255,255,0.10); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.22); cursor: default; }
.np-btn-ok { background: #4E7152; box-shadow: none; }
.np-msg.teams .np-btn { background: #fff; color: var(--text); box-shadow: inset 0 0 0 1px var(--line-strong); border-radius: 4px; }
.np-msg.teams .np-btn-ok { background: var(--secondary-dark); color: #fff; box-shadow: none; }
.np-foot { margin: 0; font-size: 12px; opacity: 0.6; }
.np-caption { margin: 14px 0 0; font-size: 12.5px; color: var(--text-light); }
.np-right { display: flex; flex-direction: column; background: #fff; }
.np-chat-head { display: flex; align-items: center; gap: 10px; padding: 16px 22px; border-bottom: 1px solid var(--line-soft); font-weight: 600; font-size: 14px; }
.np-chat { flex: 1; padding: 18px 22px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; max-height: 420px; min-height: 260px; }
.np-bubble { max-width: 92%; padding: 11px 14px; border-radius: 14px; font-size: 14px; line-height: 1.5; }
.np-bubble.rv { background: var(--neutral-warm); color: var(--text); align-self: flex-start; border-bottom-left-radius: 6px; }
.np-bubble.user { background: var(--primary); color: #fff; align-self: flex-end; border-bottom-right-radius: 6px; }
.np-thinking { opacity: 0.6; }
.np-receipt { font-size: 12.5px; color: var(--secondary-dark); display: flex; align-items: center; gap: 6px; padding-left: 4px; }
.np-receipt::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--secondary); }
.np-pills { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 22px 12px; }
.np-pill { font: inherit; font-size: 13px; padding: 7px 12px; border-radius: var(--radius-pill); background: #fff; color: var(--text); box-shadow: 0 0 0 1px var(--line-strong); cursor: pointer; }
.np-pill:hover { background: var(--secondary-pale); }
.np-input { margin: 0 22px 20px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 10px 10px 16px; border-radius: 14px; box-shadow: 0 0 0 1px var(--line-strong); color: var(--text-light); font-size: 14px; }
.np-send { font: inherit; font-size: 13px; padding: 7px 14px; border-radius: var(--radius-pill); background: var(--neutral-deep); color: var(--text-muted); }
@media (max-width: 880px) { .np { grid-template-columns: minmax(0, 1fr); } .np-left { border-right: none; border-bottom: 1px solid var(--line-soft); padding: 20px; } .np-chat { max-height: 320px; } }
/* Telefoon: de preview mag de volle containerbreedte nemen (de band zette er
   24px extra opzij bovenop de container), en niets in de kolommen mag hem
   breder duwen dan het scherm. */
@media (max-width: 640px) {
  .notify-band { padding-left: 0; padding-right: 0; }
  .np > * { min-width: 0; }
  .np-left { padding: 16px; }
  .np-head { flex-wrap: wrap; gap: 12px; }
  .np-msg { padding: 14px 14px; }
  .np-msg-body, .np-caption, .np-chat { overflow-wrap: anywhere; }
}
/* Table with 7 columns */
.cmp { min-width: 1180px; font-size: 13px; }
.cmp th, .cmp td { padding: 16px 13px; }
/* Slack/Teams toggle: logos + sliding pill */
.np-toggle { position: relative; isolation: isolate; }
.np-slide { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: var(--radius-pill); background: var(--primary); z-index: -1; transition: transform 0.35s var(--ease); }
.np-toggle.is-teams .np-slide { transform: translateX(100%); }
.np-tab { display: inline-flex; align-items: center; gap: 7px; width: 96px; justify-content: center; background: transparent; transition: color 0.25s var(--ease); }
.np-tab.is-on { background: transparent; color: #fff; }
.np-tab img { width: 16px; height: 16px; object-fit: contain; }
@media (prefers-reduced-motion: reduce) { .np-slide { transition: none; } }
/* 7-column table: let it run wider than the text column so Rivilo stays in view */
.cmp-wrap { width: min(1400px, calc(100vw - 48px)); margin-left: 50%; transform: translateX(-50%); }
.cmp { min-width: 1120px; }
@media (max-width: 880px) { .cmp-wrap { width: auto; margin-left: 0; transform: none; } }
.hero-scrub video { display: block; width: 100%; height: auto; aspect-ratio: 1440 / 900; border-radius: 16px; box-shadow: var(--shadow-soft); background: #fff url('/assets/video/hero-board-poster.webp') center / cover no-repeat; }

/* ===== Mac desktop with the dock: Rivilo as an installed app =====
   One fixed "screen" stage in points (1152 wide on desktop), scaled with --s by the
   partial's script. Inside the mock the macOS system font is allowed (it is what macOS shows). */
.dock-band { padding: 8px 24px 104px; }
.dock-intro { max-width: 720px; margin: 0 auto 40px; }
.dock-intro em { font-style: italic; font-weight: 300; color: var(--secondary-dark); }
.dock-intro .h2-plain { text-wrap: balance; }
.dock-intro .section-sub { text-wrap: pretty; }
.mac { --s: 1; --sw: 1152; --sh: 736; --ww: 968; position: relative; width: 100%; max-width: 1152px; aspect-ratio: 1152 / 736; margin: 0 auto; border-radius: var(--radius-card); overflow: hidden; isolation: isolate; background: #C9D7DE; box-shadow: 0 0 0 1px var(--line), var(--shadow-soft); -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
.mac-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.mac-stage { position: absolute; left: 0; top: 0; width: calc(var(--sw) * 1px); height: calc(var(--sh) * 1px); transform: scale(var(--s)); transform-origin: 0 0; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, sans-serif; -webkit-font-smoothing: antialiased; color: #000; cursor: default; }
.mac-wall { position: absolute; inset: 0; overflow: hidden;
  background:
    radial-gradient(ellipse 70% 55% at 72% 6%, rgba(255, 226, 180, 0.5) 0%, transparent 62%),
    radial-gradient(ellipse 60% 50% at 18% 20%, rgba(220, 230, 240, 0.6) 0%, transparent 66%),
    linear-gradient(180deg, #B9CDD8 0%, #CEDADC 24%, #E1E3D7 48%, #ECE6D2 64%, #E6E0CC 100%); }
.mac-wall img { position: absolute; left: -12%; bottom: -2%; width: 124%; max-width: none; height: auto; filter: saturate(0.9) contrast(0.92) brightness(1.05); }

/* Menu bar */
.mb { position: absolute; left: 0; right: 0; top: 0; z-index: 3; height: 25px; display: flex; align-items: center; justify-content: space-between; padding: 0 11px 0 15px; font-size: 13px; line-height: 1; letter-spacing: -0.08px; color: rgba(0, 0, 0, 0.86); background: rgba(246, 246, 246, 0.42); -webkit-backdrop-filter: blur(40px) saturate(1.8); backdrop-filter: blur(40px) saturate(1.8); box-shadow: 0 0.5px 0 rgba(0, 0, 0, 0.07); white-space: nowrap; }
.mb-l, .mb-r, .mb-menus { display: flex; align-items: center; }
.mb-apple { width: 14px; height: 17px; margin: -2px 19px 0 0; fill: currentColor; }
.mb-app { font-weight: 700; margin-right: 19px; }
.mb-menus { gap: 19px; }
.mb-r { gap: 16px; }
.mb-r svg { display: block; }
.mb-clock { margin-left: 2px; }

/* The Rivilo PWA window: standalone, title bar only */
.mw { position: absolute; z-index: 1; top: 46px; left: calc((var(--sw) - var(--ww)) / 2 * 1px); width: calc(var(--ww) * 1px); border-radius: 10px; overflow: hidden; background: var(--neutral); transform-origin: 50% 70%; box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.26), 0 30px 70px -12px rgba(0, 0, 0, 0.42), 0 12px 26px -10px rgba(0, 0, 0, 0.2); transition: box-shadow 0.25s ease; }
.mw-bar { position: relative; height: 30px; display: flex; align-items: center; justify-content: center; background: #F9F9F7; box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.9), 0 0.5px 0 rgba(0, 0, 0, 0.08); }
.mw-lights { position: absolute; left: 12px; top: 9px; display: flex; gap: 8px; }
.mw-l { position: relative; display: block; width: 12px; height: 12px; border-radius: 50%; }
.mw-close { background: #FF5F57; box-shadow: inset 0 0 0 0.5px #E0443E; }
.mw-min { background: #FEBC2E; box-shadow: inset 0 0 0 0.5px #DEA123; }
.mw-max { background: #28C840; box-shadow: inset 0 0 0 0.5px #1AAB29; }
.mw-l svg { position: absolute; inset: 0; width: 12px; height: 12px; opacity: 0; }
.mw-lights:hover svg { opacity: 1; }
.mw-title { font-size: 13px; font-weight: 600; color: rgba(0, 0, 0, 0.8); }
.mw-more { position: absolute; right: 14px; top: 8px; width: 4px; height: 14px; fill: rgba(0, 0, 0, 0.5); }
.mw-shot { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; }
.mac.is-pre .mw { opacity: 0; visibility: hidden; }
.mac.is-finder .mw { box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.2), 0 18px 46px -14px rgba(0, 0, 0, 0.26), 0 6px 14px -8px rgba(0, 0, 0, 0.12); }
.mac.is-finder .mw-l { background: #DDDDDC; box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.13); }
.mac.is-finder .mw-l svg { display: none; }
.mac.is-finder .mw-title { color: rgba(0, 0, 0, 0.34); }
.mac.is-finder .mw-more { fill: rgba(0, 0, 0, 0.25); }

/* Dock */
.dk { position: absolute; z-index: 2; left: 50%; bottom: 6px; height: 70px; display: flex; padding: 0 4px; transform: translateX(-50%); }
.dk::before { content: ''; position: absolute; left: -20px; right: -20px; bottom: 100%; height: 0; }
.dk.is-mag::before { height: 44px; } /* keep magnifying while the pointer is over the grown icons, but never start above the dock */
.dk-bg { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; border-radius: 20px; background: rgba(250, 250, 250, 0.44); -webkit-backdrop-filter: blur(30px) saturate(1.5); backdrop-filter: blur(30px) saturate(1.5); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 0 0.5px rgba(0, 0, 0, 0.14), 0 12px 32px -10px rgba(0, 0, 0, 0.28); }
.dk-slot, .dk-sep { position: relative; flex: none; height: 70px; }
.dk-slot { width: 64px; }
.dk-sep { width: 20px; }
.dk-sep i { position: absolute; left: 50%; top: 12px; bottom: 12px; width: 1px; margin-left: -0.5px; background: rgba(0, 0, 0, 0.16); }
.dk-mag { position: absolute; left: 6px; bottom: 10px; width: 52px; height: 52px; transform-origin: 50% 100%; }
.dk-stack .dk-mag { left: 3px; bottom: 7px; width: 58px; height: 58px; }
.dk-bob { width: 100%; height: 100%; }
.dk-art { position: relative; width: 100%; height: 100%; filter: drop-shadow(0 0.6px 0.8px rgba(0, 0, 0, 0.2)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1)); }
.dk-slot:active .dk-art { filter: brightness(0.62) drop-shadow(0 0.6px 0.8px rgba(0, 0, 0, 0.2)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1)); }
.dk-art svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.dk-art img { position: absolute; left: 50%; top: 50%; width: var(--w, 60%); max-width: none; height: auto; transform: translate(-50%, -50%); }
.dk-edge { fill: none; stroke: rgba(0, 0, 0, 0.1); stroke-width: 1; }
.dk-cal-m, .dk-cal-d { position: absolute; left: 0; right: 0; text-align: center; line-height: 1; }
.dk-cal-m { top: 8px; font-size: 7.8px; font-weight: 600; letter-spacing: 0.3px; color: #FF3B30; }
.dk-cal-d { top: 17px; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", Inter, sans-serif; font-size: 27px; font-weight: 300; letter-spacing: -0.8px; color: #1D1D1F; }
.dk-badge { position: absolute; top: -5px; right: -7px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: linear-gradient(#FF5B51, #F1352A); color: #fff; font-size: 12.5px; font-weight: 600; line-height: 20px; text-align: center; box-shadow: 0 0.5px 1.5px rgba(0, 0, 0, 0.25); }
.dk-dot { position: absolute; left: 50%; bottom: 2px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: rgba(0, 0, 0, 0.6); opacity: 0; transition: opacity 0.3s ease; }
.dk-slot[data-run] .dk-dot { opacity: 1; }
.dk-tip { position: absolute; left: 0; bottom: 0; padding: 4px 10px 5px; border-radius: 6px; font-size: 13px; line-height: 16px; white-space: nowrap; color: rgba(0, 0, 0, 0.85); background: rgba(238, 238, 238, 0.94); -webkit-backdrop-filter: blur(20px) saturate(1.8); backdrop-filter: blur(20px) saturate(1.8); box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.14), 0 4px 14px rgba(0, 0, 0, 0.16); opacity: 0; pointer-events: none; transition: opacity 0.12s ease; }
.dk-tip::after { content: ''; position: absolute; left: 50%; top: 100%; margin-left: -6px; border: 6px solid transparent; border-top-color: rgba(238, 238, 238, 0.94); border-bottom: 0; }
.dk-tip.is-on { opacity: 1; }
.mac.is-compact [data-opt] { display: none; }
@media (max-width: 880px) {
  .dock-band { padding: 0 12px 72px; }
  .dock-band > .container { padding: 0; }
  .dock-intro { padding: 0 8px; margin-bottom: 28px; }
  .mac { border-radius: 14px; }
}
@media (prefers-reduced-motion: reduce) { .mw, .dk-dot, .dk-tip { transition: none; } }

/* Footer statement: the goal, on every page */
.footer-statement { max-width: 1200px; margin: 0 auto 72px; padding: 16px 0 64px; border-bottom: 1px solid var(--line-soft); text-align: center; }
.footer-statement-mark { display: block; width: 44px; height: 44px; margin: 0 auto 20px; object-fit: contain; filter: drop-shadow(0 8px 14px rgba(95,136,95,0.2)); }
.footer-statement p { font-family: 'Newsreader', Georgia, serif; font-weight: 400; font-size: clamp(30px, 4vw, 52px); line-height: 1.1; letter-spacing: -0.025em; color: var(--primary); max-width: 900px; margin: 0 auto; }
.footer-statement em { font-style: italic; font-weight: 300; color: var(--secondary-dark); }
@media (max-width: 880px) { .footer-statement { margin-bottom: 48px; padding-bottom: 44px; } }

/* ============================================================
   Proposal flow — one client question becomes a finished proposal.
   Mirrors real product components: the doc-chat intake form
   (DocEditor.module.css .intakeQuestionText / .intakeOption / .intakeLetter),
   the first-draft skeleton (.skeletonStatus / .skelBlock / .skelBullet) and
   the Rivilo chat avatar (RiviloChat.module.css .bubbleAvatar).
   Every selector is prefixed with .pf so the generic ".feature p" rule above
   does not reach inside the flow.
   Default styles are the FINISHED state, so the block reads correctly with no
   JS and under prefers-reduced-motion. .is-js winds it back; .is-on plays it
   once, staged by the inline --d delay carried on each part.
   ============================================================ */
.feature.flow-row { display: block; }
.feature.flow-row .feature-text { max-width: 660px; margin: 0 auto; }
.feature.flow-row .feature-text h2 { text-align: center; }
.feature.flow-row .feature-text p { max-width: 620px; margin: 0 auto; text-align: center; }
.feature.flow-row h2 em { font-style: italic; font-weight: 300; color: var(--secondary-dark); }
.feature.bleed h2 em { font-style: italic; font-weight: 300; color: var(--secondary-dark); }
.feature.slips h2 em { font-style: italic; font-weight: 300; color: var(--secondary-dark); }
/* De teaser boven "From email to deliverable": Rivilo die de mail wegwerkt.
   Zelfde vlak als de tijdlijnvideo op /about. */
.flow-video { margin: 0 auto 44px; max-width: 760px; }
.flow-video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 16px; box-shadow: var(--shadow-card); background: var(--neutral-deep); }
@media (max-width: 640px) { .flow-video { margin-bottom: 28px; } .flow-video video { border-radius: 12px; } }

.pf { margin-top: 40px; }
.pf p { max-width: none; }
.pf .pf-flow { display: flex; flex-direction: column; align-items: stretch; }
.pf .pf-node { width: 100%; max-width: 528px; margin: 0 auto; }

/* Connectors. Straight lines only, so preserveAspectRatio="none" cannot distort
   them, and non-scaling-stroke keeps every line exactly 1px at any width. */
.pf .pf-v { display: block; width: 2px; height: var(--h, 36px); margin: 0 auto; flex: none; }
.pf .pf-h { display: block; flex: 1; min-width: 20px; height: 2px; }
/* No vector-effect here on purpose: these are axis-aligned straight lines, so
   the non-uniform viewBox scale lands on the dash axis only and leaves the
   stroke exactly 1px. non-scaling-stroke would move the dash maths into device
   units and turn the pathLength-normalised dash into a 1px dotted line. */
.pf .pf-v line, .pf .pf-h line { stroke: var(--secondary-light); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 0; }
.pf.is-js .pf-v line, .pf.is-js .pf-h line { stroke-dashoffset: 1; }
.pf.is-on .pf-v line, .pf.is-on .pf-h line { stroke-dashoffset: 0; transition: stroke-dashoffset 0.42s linear var(--d, 0ms); }

/* Entrance mirrors the app's intakeStepIn: 8px up, one short ease. */
.pf.is-js .pf-lift { opacity: 0; transform: translateY(8px); }
/* "Let Rivilo do this": one email and a button first, the steps unfold on click.
   The button sits on the line of the flow: a short stub from the email down to it, a tail
   below that fades out (there is more underneath). On click the button dissolves into a
   through line and the zone folds away, so the line never lets go of the email and the
   open state is the original design: the first connector touches the email card. */
.pf .pf-rest-inner { display: flex; flex-direction: column; align-items: stretch; min-height: 0; }
.pf .pf-run { display: none; }
.pf .pf-first { scroll-margin-top: 110px; }
.pf.is-gated .pf-run { --stub: 28px; --btn: 52px; --tail: 32px; position: relative; display: flex; justify-content: center; align-items: flex-start; height: calc(var(--stub) + var(--btn) + var(--tail)); margin: 0; padding-top: var(--stub); box-sizing: border-box; }
/* Same SVG technique as the connectors below, so the join with the first connector is invisible at any pixel ratio. */
.pf .pf-run-v { position: absolute; left: calc(50% - 1px); width: 2px; pointer-events: none; }
.pf .pf-run-v line { stroke: var(--secondary-light); stroke-width: 1; }
.pf .pf-run-stub { top: 0; height: var(--stub); transform-origin: top; transform: scaleY(0); }
.pf .pf-run-tail { top: calc(var(--stub) + var(--btn)); height: var(--tail); -webkit-mask-image: linear-gradient(to bottom, #000, transparent); mask-image: linear-gradient(to bottom, #000, transparent); transform-origin: top; opacity: 0; transition: transform 0.4s var(--ease), opacity 0.4s var(--ease) 0.75s; }
.pf .pf-run-line { top: var(--stub); height: calc(var(--btn) + var(--tail)); opacity: 0; }
.pf .pf-run-btn { position: relative; z-index: 1; width: auto; height: var(--btn); gap: 12px; padding: 0 26px 0 11px; font-size: 15px; opacity: 0; transform: translateY(8px); }
.pf .pf-run-mascot { width: 30px; height: 30px; border-radius: 50%; background: var(--neutral-deep); object-fit: cover; flex: none; transition: transform 0.35s var(--ease); }
.pf .pf-run-btn:hover .pf-run-mascot, .pf .pf-run-btn:focus-visible .pf-run-mascot { transform: rotate(-8deg) scale(1.06); }
.pf .pf-run-btn:active { transform: scale(0.985); box-shadow: none; }
.pf .pf-run:has(.pf-run-btn:hover) .pf-run-tail, .pf .pf-run:has(.pf-run-btn:focus-visible) .pf-run-tail { transform: scaleY(1.4); }
.pf.is-gated.is-seen .pf-first, .pf.is-gated.is-on .pf-first { opacity: 1; transform: none; transition: opacity 0.46s var(--ease), transform 0.46s var(--ease); }
.pf.is-gated.is-seen .pf-run-stub { transform: none; transition: transform 0.3s var(--ease) 0.3s; }
.pf.is-gated.is-seen .pf-run-btn { opacity: 1; transform: none; transition: opacity 0.46s var(--ease) 0.45s, transform 0.46s var(--ease) 0.45s, background 0.2s var(--ease), box-shadow 0.2s var(--ease); }
.pf.is-gated.is-seen .pf-run-btn:hover { transform: translateY(-1px); transition: transform 0.2s var(--ease), background 0.2s var(--ease), box-shadow 0.2s var(--ease); }
.pf.is-gated.is-seen .pf-run-btn:active { transform: scale(0.985); }
.pf.is-gated.is-seen .pf-run-tail { opacity: 1; }
.pf.is-gated .pf-rest { display: grid; grid-template-rows: 0fr; overflow: hidden; visibility: hidden; transition: grid-template-rows 0.7s var(--ease), visibility 0s linear 0.7s; }
.pf.is-gated.is-on .pf-rest { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows 0.7s var(--ease), visibility 0s; }
.pf.is-gated.is-open .pf-rest { overflow: visible; }
.pf.is-gated.is-on .pf-run { height: 0; padding-top: 0; overflow: hidden; pointer-events: none; transition: height 0.55s var(--ease) 0.16s, padding-top 0.55s var(--ease) 0.16s; }
.pf.is-gated.is-on .pf-run-btn, .pf.is-gated.is-on .pf-run-btn:hover { opacity: 0; transform: scale(0.96); box-shadow: none; transition: opacity 0.2s var(--ease), transform 0.2s var(--ease); }
.pf.is-gated.is-on .pf-run-line { opacity: 1; transition: opacity 0.2s var(--ease); }
.pf.is-gated.is-on .pf-run-tail { opacity: 0; transition: opacity 0.15s var(--ease); }
.pf.is-gated.is-open .pf-run { visibility: hidden; }
.pf.is-on .pf-lift { opacity: 1; transform: none; transition: opacity 0.46s var(--ease) var(--d, 0ms), transform 0.46s var(--ease) var(--d, 0ms); }

/* 1 — the request */
.pf .pf-mail { background: #fff; border-radius: 16px; box-shadow: var(--shadow-card); padding: 14px 18px 12px; text-align: left; }
.pf .pf-mail-top { display: flex; align-items: center; gap: 8px; margin: 0 0 11px; font-size: 12px; line-height: 1.4; color: var(--text-muted); }
.pf .pf-icon { display: inline-flex; color: var(--secondary-dark); }
.pf .pf-icon svg { width: 16px; height: 13px; display: block; }
.pf .pf-mail-row { display: flex; gap: 12px; align-items: flex-start; }
.pf .pf-av { width: 32px; height: 32px; border-radius: 50%; background: var(--secondary-pale); color: var(--secondary-dark); font-size: 11px; font-weight: 600; letter-spacing: 0.02em; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.pf .pf-av-foto { object-fit: cover; object-position: 50% 40%; }
.pf .pf-mail-body { min-width: 0; }
.pf .pf-mail-from { margin: 0 0 1px; font-size: 13px; line-height: 1.4; font-weight: 500; color: var(--primary); }
.pf .pf-mail-time { color: var(--text-light); font-size: 12px; font-weight: 400; margin-left: 8px; }
.pf .pf-mail-subj { margin: 0 0 7px; font-size: 12px; line-height: 1.4; color: var(--text-muted); }
.pf .pf-mail-quote { margin: 0; font-family: 'Newsreader', Georgia, serif; font-size: 21px; line-height: 1.3; letter-spacing: -0.012em; color: var(--primary); }
.pf .pf-prov { display: flex; align-items: center; gap: 6px; margin: 12px 0 0; padding-top: 9px; border-top: 1px solid var(--line-soft); font-size: 11.5px; line-height: 1.4; color: var(--text-light); }
/* Het bord waar de kaart op landde: tint en glyph zoals de projecttegel in de app (ProjectsPage .tileMonogram). */
.pf .pf-board { flex: none; width: 18px; height: 18px; border-radius: 5px; display: grid; place-items: center; background: color-mix(in srgb, var(--pigment) 12%, #fff); color: var(--pigment); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pigment) 24%, transparent); }
.pf .pf-board svg { width: 12px; height: 12px; display: block; }
.pf .pf-due { color: var(--secondary-dark); font-weight: 500; }
.pf .pf-clientdot { width: 6px; height: 6px; border-radius: 50%; background: var(--secondary-light); flex: none; }

/* 2 — three sources join the trunk */
.pf .pf-join { position: relative; display: grid; grid-template-columns: 1fr 1fr; align-items: center; padding: 0 40px; }
.pf .pf-side { min-width: 0; }
.pf .pf-side-l { order: -1; }
.pf .pf-side-r { display: flex; flex-direction: column; gap: 14px; }
.pf .pf-trunk { position: absolute; left: 50%; top: 0; height: 100%; margin: 0; transform: translateX(-1px); }
.pf .pf-branch { display: flex; align-items: center; }
.pf .pf-branch .pf-card { flex: none; width: min(296px, 100%); }
.pf .pf-card { background: #fff; border-radius: 14px; box-shadow: var(--shadow-card); padding: 13px 15px; text-align: left; }
.pf .pf-ctx-label { margin: 0 0 6px; display: flex; align-items: center; gap: 7px; font-size: 11.5px; line-height: 1.3; font-weight: 600; color: var(--secondary-dark); }
.pf .pf-ctx-logo { width: 13px; height: 13px; object-fit: contain; border-radius: 3px; flex: none; }
.pf .pf-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--secondary); flex: none; }
.pf .pf-dot-2 { background: var(--secondary-light); }
.pf .pf-ctx-line { margin: 0 0 6px; font-size: 13px; line-height: 1.45; color: var(--primary); }
.pf .pf-ctx-meta { margin: 0; font-size: 11.5px; line-height: 1.35; color: var(--text-light); }

/* 3 — Rivilo asks, with the real doc-chat intake form */
.pf .pf-ask { background: #fff; border-radius: 18px; box-shadow: var(--shadow-soft); padding: 17px 20px 15px; text-align: left; }
.pf .pf-ask-head { display: flex; align-items: center; gap: 8px; }
.pf .pf-mascot { width: 22px; height: 22px; border-radius: 50%; background: var(--neutral-deep); overflow: hidden; display: inline-flex; flex: none; }
.pf .pf-mascot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf .pf-ask-who { font-size: 12px; font-weight: 600; color: var(--text-muted); }
.pf .pf-intake { display: flex; flex-direction: column; gap: 15px; padding: 11px 2px 0; }
.pf .pf-intake-q { margin: 0; font-family: 'Newsreader', Georgia, serif; font-size: 22px; font-weight: 400; line-height: 1.3; letter-spacing: -0.012em; color: var(--primary); }
.pf .pf-opts { display: flex; flex-direction: column; gap: 8px; }
.pf .pf-opt { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--primary); font-size: 14.5px; }
.pf .pf-opt-key { width: 28px; height: 28px; border-radius: 8px; background: var(--neutral-warm); color: var(--text-muted); font-size: 12px; font-weight: 700; letter-spacing: 0.04em; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.pf .pf-opt-label { line-height: 1.35; letter-spacing: -0.005em; min-width: 0; }
.pf .pf-opt-input { line-height: 1.35; letter-spacing: -0.005em; color: var(--text-light); min-width: 0; }
.pf .pf-opt-pick { background: var(--secondary-pale); border-color: var(--secondary); color: var(--secondary-dark); }
.pf .pf-opt-pick .pf-opt-key { background: var(--secondary); color: #fff; }
.pf .pf-intake-hint { margin: 0; text-align: center; font-size: 10.5px; line-height: 1.4; letter-spacing: 0.02em; color: var(--text-light); }
.pf .pf-opt:not(.pf-opt-pick) { opacity: 0.6; }
.pf.is-js .pf-opt-pick { background: #fff; border-color: var(--line); color: var(--primary); }
.pf.is-js .pf-opt-pick .pf-opt-key { background: var(--neutral-warm); color: var(--text-muted); }
.pf.is-js .pf-opt:not(.pf-opt-pick) { opacity: 1; }
.pf.is-on .pf-opt-pick { background: var(--secondary-pale); border-color: var(--secondary); color: var(--secondary-dark);
  transition: background 0.28s var(--ease) 2000ms, border-color 0.28s var(--ease) 2000ms, color 0.28s var(--ease) 2000ms; }
.pf.is-on .pf-opt-pick .pf-opt-key { background: var(--secondary); color: #fff;
  transition: background 0.28s var(--ease) 2000ms, color 0.28s var(--ease) 2000ms; }
.pf.is-on .pf-opt:not(.pf-opt-pick) { opacity: 0.6; transition: opacity 0.35s var(--ease) 2140ms; }

/* 4 — Rivilo writes, with the real first-draft skeleton */
.pf .pf-write { background: var(--neutral-deep); border-radius: 16px; padding: 15px 16px 0; text-align: left; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line-soft); }
.pf .pf-status { display: flex; align-items: center; gap: 8px; width: fit-content; margin: 0 auto 13px; padding: 5px 14px 5px 7px; background: var(--secondary-pale); color: var(--secondary-dark); border-radius: var(--radius-pill); font-size: 11.5px; line-height: 1.4; letter-spacing: 0.02em; }
.pf .pf-status-mascot { width: 20px; height: 20px; border-radius: 50%; overflow: hidden; background: #fff; flex: none; display: inline-flex; }
.pf .pf-status-mascot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf .pf-status-state { position: relative; display: inline-block; white-space: nowrap; }
.pf .pf-status-busy { position: absolute; left: 0; top: 0; white-space: nowrap; opacity: 0; }
.pf .pf-status-done { opacity: 1; }
.pf.is-js .pf-status-busy { opacity: 1; }
.pf.is-js .pf-status-done { opacity: 0; }
.pf.is-on .pf-status-busy { animation: pf-out 0.3s var(--ease) 4900ms forwards; }
.pf.is-on .pf-status-done { animation: pf-in 0.34s var(--ease) 5040ms forwards; }
.pf.is-on .pf-status-mascot img { animation: pf-wobble 2.4s ease-in-out 2550ms 2 both; }
.pf .pf-sheet { background: #fff; border-radius: 2px 2px 0 0; box-shadow: 0 14px 40px -12px rgba(26, 26, 26, 0.12), 0 6px 16px -6px rgba(26, 26, 26, 0.05);
  padding: 22px 26px 0; display: flex; flex-direction: column; gap: 7px; height: 244px; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 76%, transparent 100%); mask-image: linear-gradient(to bottom, #000 76%, transparent 100%); }
.pf .pf-bar { display: block; position: relative; height: 10px; border-radius: 3px; flex: none;
  background: linear-gradient(90deg, rgba(26, 26, 26, 0.05) 0%, rgba(125, 166, 125, 0.18) 50%, rgba(26, 26, 26, 0.05) 100%);
  background-size: 200% 100%; }
/* Flat wash that settles over the shimmer once the draft is done, so the block
   at rest reads as a written page and not as a page still loading. */
.pf .pf-bar::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: rgba(26, 26, 26, 0.06); }
.pf .pf-spacer { display: block; height: 10px; flex: none; }
.pf .pf-bullet { margin-left: 17px; height: 9px; }
.pf .pf-bullet::before { content: ''; position: absolute; left: -11px; top: 3px; width: 4px; height: 4px; border-radius: 50%; background: rgba(26, 26, 26, 0.22); }
.pf.is-js .pf-bar::after { opacity: 0; }
.pf.is-on .pf-bar { animation: pf-shimmer 1.15s ease-in-out 2600ms 2 both; }
.pf.is-on .pf-bar::after { animation: pf-in 0.5s var(--ease) 4900ms forwards; }
@keyframes pf-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes pf-wobble { 0% { transform: rotate(0); } 5% { transform: rotate(-12deg); } 11% { transform: rotate(10deg); } 17% { transform: rotate(-7deg); } 23% { transform: rotate(5deg); } 29% { transform: rotate(-3deg); } 34% { transform: rotate(1.5deg); } 38%, 100% { transform: rotate(0); } }
@keyframes pf-in { to { opacity: 1; } }
@keyframes pf-out { to { opacity: 0; } }

/* 5 — the finished proposal, in the real editor */
.pf .pf-shot { max-width: 1000px; margin: 0 auto; }
.pf .pf-shot img { display: block; width: 100%; height: auto; border-radius: 14px; box-shadow: var(--shadow-card); background: #fff; }
.pf .pf-shot video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; border-radius: 14px; box-shadow: var(--shadow-card); background: #e6e4da; }
.pf .pf-caption { width: 100%; max-width: 1000px; margin: 14px auto 0; font-size: 13px; line-height: 1.5; color: var(--text-light); }

/* One quote under the flow, as type rather than a floating card: the flow
   above it already carries enough surfaces. Prefixed with .pv so the generic
   ".feature p" rule cannot reach inside. */
.pf .pv-quote { max-width: 1000px; margin: 40px auto 0; padding-top: 34px; border-top: 1px solid var(--line-soft); }
.pf .pv-quote blockquote { max-width: 660px; margin: 0; font-family: 'Newsreader', Georgia, serif; font-weight: 400; font-style: italic; font-size: clamp(19px, 2vw, 23px); line-height: 1.35; letter-spacing: -0.015em; color: var(--primary); }
.pf .pv-quote blockquote::before { content: '\201C'; }
.pf .pv-quote blockquote::after { content: '\201D'; }
.pf .pv-quote figcaption { display: flex; align-items: center; gap: 11px; margin-top: 18px; }
.pf .pv-quote figcaption img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex: none; }
.pf .pv-quote figcaption span { font-size: 13px; line-height: 1.35; color: var(--primary); }
.pf .pv-quote figcaption i { display: block; font-style: normal; font-size: 12px; color: var(--text-light); }

@media (max-width: 900px) {
  .pf .pf-join { display: flex; flex-direction: column; padding: 0; }
  .pf .pf-side-l, .pf .pf-side-r { order: 0; width: 100%; }
  .pf .pf-trunk, .pf .pf-h { display: none; }
  .pf .pf-branch { display: block; }
  .pf .pf-branch .pf-card { width: 100%; max-width: 528px; margin: 0 auto; }
  /* Stacked, the connectors form one unbroken spine: every line touches the card above and below it.
     The first card already hangs on the 40px connector from the email. */
  .pf .pf-join, .pf .pf-side-r { gap: 0; }
  .pf .pf-branch::before { content: ''; display: block; width: 1px; height: 24px; margin: 0 auto; background: var(--secondary-light); transform-origin: top; }
  .pf .pf-side-r .pf-branch:first-child::before { display: none; }
  .pf.is-js .pf-branch::before { transform: scaleY(0); }
  .pf.is-on .pf-branch::before { transform: none; transition: transform 0.4s var(--ease) 520ms; }
}
@media (max-width: 560px) {
  .pf.is-gated .pf-run { --stub: 24px; --btn: 48px; --tail: 28px; }
  .pf .pf-run-btn { font-size: 14.5px; padding: 0 24px 0 9px; }
  .pf .pf-first { scroll-margin-top: 84px; }
  .pf .pf-intake-q { font-size: 19px; }
  .pf .pf-opt { padding: 11px 13px; gap: 11px; font-size: 13.5px; }
  .pf .pf-opt-key { width: 25px; height: 25px; border-radius: 7px; }
  .pf .pf-mail-quote { font-size: 18px; }
  .pf .pf-mail-time { display: block; margin-left: 0; }
  .pf .pf-ask { padding: 15px 15px 14px; }
  .pf .pf-status { font-size: 11px; padding: 5px 11px 5px 6px; }
  .pf .pf-sheet { padding: 18px 16px 0; height: 200px; }
  /* On a phone the full editor shot is a postage stamp, so crop to the page
     itself; the chat column stays visible on every wider screen. */
  .pf .pf-shot img { border-radius: 10px; aspect-ratio: 1 / 1; object-fit: cover; object-position: 74% 0; }
  /* Telefoon: de hele app is op 300px onleesbaar; toon het document en de slides. */
  .pf .pf-shot video { border-radius: 10px; aspect-ratio: 5 / 4; object-fit: cover; object-position: 100% 50%; }
  .pf .pv-quote blockquote { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .pf * { animation: none !important; transition: none !important; }
}

/* ============================================================
   Company brain — the quiet interlude between the hero and the feature
   rows, which are both full of image. So this block is type and hairlines
   only: no cards, no icons, no tile.
   One idea: two sources flow in, Rivilo remembers, two kinds of knowledge
   come out. The roles are told the way the headlines tell them: what comes
   in is set roman in ink, what Rivilo knows is set italic in green. A source
   starts at an open ring, knowledge arrives at a solid dot.
   The wires are drawn 1:1 (140 x 232, rows of 116px), never stretched, so
   they meet the ports and the core exactly at every width.
   Default styles are the FINISHED state, so the block reads correctly with
   no JS and under prefers-reduced-motion. .is-js winds it back; .is-on
   draws it once; .is-live lets one light travel the lines, slowly.
   Every selector is prefixed with .cb so the generic ".feature p" rule
   cannot reach inside.
   ============================================================ */
.cb { padding: 0; }
.cb-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.cb-intro { max-width: 620px; margin: 0 auto 60px; text-align: center; }
.cb-intro h2 { font-family: 'Newsreader', Georgia, serif; font-weight: 400; font-size: clamp(26px, 2.6vw, 34px); line-height: 1.12; letter-spacing: -0.02em; margin: 0 0 14px; text-align: center; color: var(--primary); }
.cb-intro h2 em { font-style: italic; font-weight: 300; color: var(--secondary-dark); }
.cb-intro p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--text-muted); text-wrap: balance; }

.cb-map { position: relative; max-width: 980px; margin: 0 auto -16px; display: grid; grid-template-columns: minmax(0,1fr) 140px 156px 140px minmax(0,1fr); align-items: center; }
.cb-col { list-style: none; margin: 0; padding: 0; min-width: 0; }
.cb-item { height: 116px; display: flex; flex-direction: column; justify-content: center; }
.cb-col-in .cb-item { align-items: flex-end; text-align: right; padding-right: 22px; }
.cb-col-out .cb-item { align-items: flex-start; text-align: left; padding-left: 22px; }

.cb-name { margin: 0; font-family: 'Newsreader', Georgia, serif; font-weight: 400; font-size: 24px; line-height: 1.15; letter-spacing: -0.018em; color: var(--primary); }
.cb-col-out .cb-name { font-style: italic; font-weight: 300; color: var(--secondary-dark); }
.cb-say { margin: 7px 0 0; max-width: 25ch; font-size: 14.5px; line-height: 1.5; color: var(--text-muted); text-wrap: balance; }

/* Wires */
.cb-wire { display: block; width: 140px; height: 232px; overflow: visible; }
.cb-line { fill: none; stroke: var(--secondary-light); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 0; }
.cb-port { fill: var(--neutral-warm); stroke: var(--secondary); stroke-width: 1; }
.cb-port-known { fill: var(--secondary); stroke: var(--secondary); }
.cb-light { fill: none; stroke: var(--secondary); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 0.001 3; stroke-dashoffset: 0; opacity: 0; }

/* Core: the wordmark in a plain white disc. A hairline, a breath of shadow
   and one faint outer ring; nothing that reads as an app icon. */
.cb-core { position: relative; z-index: 1; display: grid; place-items: center; height: 232px; }
.cb-mark { position: relative; display: grid; place-items: center; width: 156px; height: 156px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px var(--secondary-light), 0 18px 36px -28px rgba(74,107,74,0.35); }
.cb-mark::before { content: ''; position: absolute; inset: -13px; border-radius: 50%; border: 1px solid var(--secondary-light); opacity: 0.45; pointer-events: none; }
.cb-wordmark { display: block; width: 84px; height: auto; color: var(--secondary-dark); }

/* Drawn once: sources, their lines, the core, then the lines out. */
.cb.is-js .cb-line { stroke-dashoffset: 1; }
.cb.is-js .cb-port, .cb.is-js .cb-item, .cb.is-js .cb-mark { opacity: 0; }
.cb.is-js .cb-mark { transform: scale(0.96); }
.cb.is-on .cb-line { stroke-dashoffset: 0; transition: stroke-dashoffset 0.9s var(--ease) var(--d, 0ms); }
.cb.is-on .cb-port { opacity: 1; transition: opacity 0.4s var(--ease) var(--d, 0ms); }
.cb.is-on .cb-item { opacity: 1; transition: opacity 0.7s var(--ease); }
.cb.is-on .cb-col-out .cb-item { transition-delay: 1.3s; }
.cb.is-on .cb-mark { opacity: 1; transform: none; transition: opacity 0.6s var(--ease) 0.55s, transform 0.8s var(--ease) 0.55s; }

/* One light per line, 10 seconds a round: in, a breath at the core, out. */
@media (prefers-reduced-motion: no-preference) {
  .cb.is-on .cb-light { animation: cb-travel 10s linear calc(2.4s + var(--l, 0s)) infinite paused; }
  .cb.is-on .cb-mark::before { animation: cb-ring 10s var(--ease) 2.4s infinite paused; }
  .cb.is-on.is-live .cb-light, .cb.is-on.is-live .cb-mark::before { animation-play-state: running; }
}
@keyframes cb-travel {
  0% { stroke-dashoffset: -0.02; opacity: 0; animation-timing-function: cubic-bezier(0.45, 0, 0.35, 1); }
  5% { opacity: 1; }
  23% { opacity: 1; }
  28% { stroke-dashoffset: -0.97; opacity: 0; }
  100% { stroke-dashoffset: -0.97; opacity: 0; }
}
@keyframes cb-ring {
  0%, 26% { transform: none; opacity: 0.45; }
  34% { transform: scale(1.045); opacity: 0.95; }
  48%, 100% { transform: none; opacity: 0.45; }
}

/* Between phone and desktop: same drawing, a smaller core */
@media (max-width: 1040px) {
  .cb-map { grid-template-columns: minmax(0,1fr) 140px 132px 140px minmax(0,1fr); }
  .cb-mark { width: 132px; height: 132px; }
  .cb-mark::before { inset: -11px; }
  .cb-wordmark { width: 72px; }
  .cb-name { font-size: 22px; }
  .cb-col-in .cb-item { padding-right: 18px; }
  .cb-col-out .cb-item { padding-left: 18px; }
}

/* Phone: the same sentence, read downwards. One continuous line runs behind
   the column; the words and the core sit on it, so it shows only in between. */
@media (max-width: 900px) {
  .cb-intro { margin-bottom: 40px; }
  .cb-map { display: flex; flex-direction: column; align-items: center; max-width: 340px; margin-bottom: 0; overflow: hidden; }
  .cb-wire { display: none; }
  .cb-col { display: contents; }
  .cb-map::before { content: ''; position: absolute; left: 50%; top: 40px; bottom: 40px; width: 1px; margin-left: -0.5px; background: var(--secondary-light); transform-origin: top; }
  .cb-item, .cb-col-in .cb-item, .cb-col-out .cb-item { position: relative; z-index: 1; height: auto; width: 100%; align-items: center; text-align: center; padding: 0; background: var(--neutral-warm); }
  .cb-col-in .cb-item { padding: 12px 0 18px; margin-bottom: 30px; }
  .cb-col-in .cb-item:first-child { padding-top: 0; }
  .cb-col-out .cb-item { padding: 18px 0 12px; margin-top: 30px; }
  .cb-col-out .cb-item:last-child { padding-bottom: 0; }
  .cb-say { max-width: 28ch; }
  /* Ports: a source leaves from an open ring, knowledge arrives at a dot */
  .cb-item::after { content: ''; position: absolute; left: 50%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; box-sizing: border-box; }
  .cb-col-in .cb-item::after { bottom: -3px; background: var(--neutral-warm); border: 1px solid var(--secondary); }
  .cb-col-out .cb-item::after { top: -3px; background: var(--secondary); }
  .cb-core { height: auto; }
  .cb-mark, .cb-mark:not(#x) { width: 124px; height: 124px; }
  .cb-mark::before { inset: -10px; }
  .cb-wordmark { width: 68px; }

  .cb.is-js .cb-map::before { transform: scaleY(0); }
  .cb.is-on .cb-map::before { transform: none; transition: transform 1.6s var(--ease); }
  .cb.is-on .cb-col-out .cb-item { transition-delay: 0.9s; }
}
@media (max-width: 900px) and (prefers-reduced-motion: no-preference) {
  .cb-map::after { content: ''; position: absolute; left: 50%; top: 0; width: 2px; height: 30px; margin-left: -1px; border-radius: 2px; background: linear-gradient(to bottom, rgba(74,107,74,0), var(--secondary-dark)); opacity: 0; }
  .cb.is-on .cb-map::after { animation: cb-fall 10s linear 2s infinite paused; }
  .cb.is-on.is-live .cb-map::after { animation-play-state: running; }
}
@keyframes cb-fall {
  0% { top: 30px; opacity: 0; animation-timing-function: cubic-bezier(0.45, 0, 0.35, 1); }
  3% { opacity: 0.9; }
  52% { opacity: 0.9; }
  55% { top: calc(100% - 70px); opacity: 0; }
  100% { top: calc(100% - 70px); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .cb * { animation: none !important; transition: none !important; }
}

/* ============================================================
   About timeline: how Rivilo got here, in order.
   One thin rule down the left with a dot per moment, so the eye has a
   single track to follow and the images can differ in size without the
   page losing its spine. Type carries the story; images are evidence,
   never decoration, so each one sits at the size its content needs.
   Items lift in once on scroll; the default state is the finished one,
   so with no JS or under prefers-reduced-motion nothing is missing.
   ============================================================ */
/* Pages without a hero (about, security): the first band carries the space the
   fixed nav needs, and the title sits in it at a calmer size than a hero. */
.page-top { padding-top: 152px; }
.page-title { max-width: 620px; margin: 0; font-family: 'Newsreader', Georgia, serif; font-weight: 400; font-size: clamp(32px, 4.4vw, 52px); line-height: 1.06; letter-spacing: -0.025em; color: var(--primary); }
.page-title em { font-style: italic; font-weight: 300; color: var(--secondary-dark); }
.page-title + .tl { margin-top: 56px; }
/* A wide crop of the studio under the title: the source has a lot of empty wall,
   so the frame favours the people and the desk rather than showing it all. */
.page-photo { margin: 40px 0 0; }
.page-photo img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 72%; border-radius: 16px; box-shadow: var(--shadow-card); background: var(--neutral-deep); }
.page-photo + .tl { margin-top: 64px; }
.page-intro { max-width: 600px; margin: 18px 0 0; font-size: 17px; line-height: 1.6; color: var(--text-muted); }
.page-note { max-width: 600px; margin: 34px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--text-light); }
.page-note a { color: var(--secondary-dark); text-decoration: underline; text-underline-offset: 3px; }

.tl { list-style: none; margin: 0; padding: 0; }
/* Type stays in a reading column; images may use the full width of the band,
   so a board screenshot is actually readable. */
.tl-item { position: relative; padding: 0 0 72px 34px; }
.tl-date, .tl h2, .tl-p { max-width: 560px; }
.tl-item::before { content: ''; position: absolute; left: 5px; top: 9px; bottom: -9px; width: 1px; background: var(--line); }
.tl-item:last-child { padding-bottom: 0; }
.tl-item:last-child::before { display: none; }

.tl-dot { position: absolute; left: 0; top: 6px; width: 11px; height: 11px; border-radius: 50%; background: var(--neutral-warm); box-shadow: inset 0 0 0 1.5px var(--secondary-light); }
.tl-dot-now { background: var(--secondary-dark); box-shadow: 0 0 0 4px rgba(125,166,125,0.16); }

.tl-date { margin: 0 0 8px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--secondary-dark); }
.tl h2 { margin: 0 0 12px; font-family: 'Newsreader', Georgia, serif; font-weight: 400; font-size: clamp(23px, 2.6vw, 30px); line-height: 1.15; letter-spacing: -0.02em; color: var(--primary); }
.tl-p { margin: 0; font-size: 16px; line-height: 1.62; color: var(--text-muted); }

/* Media: full width by default, with two smaller keys for portrait shots
   and for the two mascots, which are small objects and should read as such. */
.tl-media { margin-top: 26px; display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.tl-media img { display: block; width: 100%; height: auto; border-radius: 12px; box-shadow: var(--shadow-card); background: #fff; }
.tl-media-md img { max-width: 320px; }
/* A photo and a clip side by side: the moment, and the thing actually moving. */
.tl-media-pair { flex-direction: row; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.tl-media-pair img, .tl-media-pair .tl-video { width: 246px; flex: none; }
.tl-video { display: block; height: auto; border-radius: 12px; box-shadow: var(--shadow-card); background: var(--neutral-deep); }
.tl-video-wide { width: 100%; }
.tl-video-portrait { width: 100%; max-width: 260px; }
.tl-media-row { flex-direction: row; align-items: center; gap: 18px; }
/* The two mascots are small objects, so they read as tiles pinned to the
   timeline rather than as artwork: a thick white edge, a tight radius and a
   shadow at the scale of the tile, not of a full-width screenshot. */
.tl-media .tl-sq { width: 60px; height: 60px; flex: none; border-radius: 15px; border: 4px solid #fff; box-shadow: 0 6px 16px -4px rgba(26,26,26,0.22), 0 2px 5px -2px rgba(26,26,26,0.10); object-fit: cover; }
.tl-mac { width: 92px; height: auto; display: block; }
/* What actually ran on that machine, credited where it belongs. */
.tl-powered { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; line-height: 1.3; color: var(--text-light); white-space: nowrap; }
.tl-powered img { width: 22px; height: 22px; object-fit: contain; flex: none; }
/* The money bag and what cancelling the old tools saved. */
.tl-bag { width: 68px; height: auto; flex: none; display: block; }
.tl-saved-fig { margin: 0; font-family: 'Newsreader', Georgia, serif; font-weight: 400; font-size: clamp(30px, 3.4vw, 40px); line-height: 1; letter-spacing: -0.03em; color: var(--secondary-dark); }
.tl-saved-unit { margin-left: 0.2em; font-size: 0.42em; letter-spacing: -0.005em; color: var(--text-muted); }
.tl-saved-year { font-weight: 600; color: var(--secondary-dark); }
.tl-saved-label { margin: 7px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--text-muted); max-width: 320px; }

/* The validation numbers: three figures in a row, hairlines not cards. The
   figures stay proportional (no tabular-nums) because they stand alone. */
.tl-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 28px; max-width: 700px; margin: 26px 0 0; }
.tl-stats > div { padding-top: 16px; border-top: 1px solid var(--line); }
.tl-stats dt { margin: 0; font-family: 'Newsreader', Georgia, serif; font-weight: 400; font-size: clamp(28px, 3.2vw, 38px); line-height: 1; letter-spacing: -0.03em; color: var(--secondary-dark); }
.tl-stats dd { margin: 9px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--text-muted); }
.tl-stats-note { margin: 16px 0 0; max-width: 560px; font-size: 12px; line-height: 1.5; color: var(--text-light); }
@media (max-width: 640px) { .tl-stats { grid-template-columns: 1fr; gap: 18px; } }

/* A tile with its caption beside it, so a 60px mascot is not left hanging
   above a full-width screenshot. */
.tl-tilerow { display: flex; align-items: center; gap: 14px; }
.tl-note { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--text-light); }

/* The first outside user, given the room it deserves: a print of the two of
   them, and the quote at a size that carries. */
.tl-meet { display: flex; align-items: center; gap: 34px; margin-top: 28px; flex-wrap: wrap; }

.polaroid { flex: none; width: 216px; margin: 0; background: #fff; padding: 11px 11px 0; border-radius: 2px;
  box-shadow: 0 14px 34px -10px rgba(26,26,26,0.30), 0 3px 8px -3px rgba(26,26,26,0.14);
  transform: rotate(-2.4deg); }
.polaroid img { display: block; width: 100%; height: auto; border-radius: 0; box-shadow: none; background: var(--neutral-deep); }
.polaroid figcaption { padding: 13px 2px 15px; font-family: 'Newsreader', Georgia, serif; font-style: italic; font-size: 12.5px; line-height: 1.35; color: var(--text-muted); text-align: center; }

.tl-bigquote { flex: 1; min-width: 280px; max-width: 500px; margin: 0; font-family: 'Newsreader', Georgia, serif; font-weight: 400; font-size: clamp(20px, 2.3vw, 26px); line-height: 1.32; letter-spacing: -0.02em; color: var(--primary); }
.tl-bigquote::before { content: '\201C'; }
.tl-bigquote em { font-style: italic; font-weight: 300; color: var(--secondary-dark); }
.tl-bigquote em::after { content: '\201D'; font-style: normal; }
.tl-bigquote cite { display: flex; align-items: center; gap: 11px; margin-top: 20px; font-style: normal; }
.tl-bigquote cite img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: none; }
.tl-bigquote cite span { font-size: 13px; line-height: 1.35; color: var(--primary); }
.tl-bigquote cite i { display: block; font-style: normal; font-size: 12px; color: var(--text-light); }

/* One more stop after "Now": a dashed line that draws itself once the visitor scrolls past the apparent end. */
.tl .tl-item-now { padding-bottom: 170px; }
/* The line lives only in the empty stretch below the last block, where the timeline seemed to end. */
.tl .tl-item-now::before { top: auto; bottom: -4px; height: 146px; width: 1px; background: repeating-linear-gradient(to bottom, var(--secondary-dark) 0 5px, transparent 5px 11px); opacity: 0.55; }
@media (max-width: 760px) { .tl .tl-item-now { padding-bottom: 130px; } .tl .tl-item-now::before { height: 108px; } }
.tl-item-future h2 { margin-bottom: 4px; }
.tl-when { margin: 0; font-size: 15px; line-height: 1.5; color: var(--text-muted); }
.tl-dot-future { background: var(--neutral-warm); box-shadow: inset 0 0 0 1.5px var(--secondary-dark); }
.tl-media.tl-future-media { align-items: flex-start; gap: 22px; margin-top: 8px; }
.tl-media .tl-earth { width: clamp(150px, 20vw, 210px); height: auto; border-radius: 0; box-shadow: none; background: none; filter: drop-shadow(0 18px 22px rgba(26,26,26,0.16)); }
.tl.is-js .tl-item-now::before { clip-path: inset(0 0 100% 0); transition: clip-path 1.1s var(--ease); }
.tl.is-js .tl-item-now.is-extended::before { clip-path: inset(0); }
.tl.is-js .tl-item-future.tl-lift.is-on { transition-delay: 0.85s; }
@media (prefers-reduced-motion: no-preference) {
  .tl.is-js .tl-item-future.is-on .tl-earth { animation: tl-earth-float 6s ease-in-out 1.6s infinite; }
}
@keyframes tl-earth-float { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-6px) rotate(2deg); } }
.tl.is-js .tl-lift { opacity: 0; transform: translateY(10px); }
.tl.is-js .tl-lift.is-on { opacity: 1; transform: none; transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); }

@media (max-width: 640px) {
  .page-top { padding-top: 116px; }
  .page-title + .tl { margin-top: 40px; }
  .tl-item { padding-left: 26px; padding-bottom: 52px; }
  .tl-media-row { flex-wrap: wrap; gap: 16px; }
  .tl-media-md img { max-width: 240px; }
  .tl-media-pair img, .tl-media-pair .tl-video { width: calc(50% - 8px); }
}
@media (prefers-reduced-motion: reduce) {
  .tl .tl-lift { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* Values under the timeline: the story ends, the principles it produced stay.
   A two-column grid deliberately breaks the single vertical track above it,
   so the page reads as story first, then conclusions. Hairlines, no cards. */
/* Same scale as the timeline headings: a label for the list, not a second hero. */
.values-title { margin: 0; font-family: 'Newsreader', Georgia, serif; font-weight: 400; font-size: clamp(23px, 2.6vw, 30px); line-height: 1.15; letter-spacing: -0.02em; color: var(--primary); }
.values { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px; counter-reset: v; }
.values li { position: relative; padding: 26px 0 26px 34px; border-top: 1px solid var(--line); counter-increment: v; }
.values:not(.values-icons) li::before { content: counter(v, decimal-leading-zero); position: absolute; left: 0; top: 28px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; color: var(--secondary); }
.values .value-icon { position: absolute; left: 0; top: 29px; display: inline-flex; color: var(--secondary); }
.values .value-icon svg { width: 18px; height: 18px; display: block; }
.values h3 { margin: 0 0 7px; font-family: 'Newsreader', Georgia, serif; font-weight: 400; font-size: 22px; line-height: 1.2; letter-spacing: -0.015em; color: var(--primary); }
.values p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--text-muted); max-width: 420px; }
@media (max-width: 760px) {
  .values { grid-template-columns: 1fr; gap: 0; }
  .values li { padding: 22px 0 22px 30px; }
  .values:not(.values-icons) li::before { top: 24px; }
  .values .value-icon { top: 25px; }
}

/* Four-column comparison: fewer, clearer columns, so it sits inside the page
   instead of bleeding wide like the old seven-column table, and reads at a
   larger size. The category under each name says what kind of tool it is. */
.cmp-wrap.cmp-wrap-4 { width: auto; max-width: 1080px; margin: 32px auto 0; transform: none; }
.cmp.cmp-4 { min-width: 760px; font-size: 14.5px; line-height: 1.45; }
.cmp.cmp-4 th, .cmp.cmp-4 td { padding: 18px 20px; }
.cmp.cmp-4 td:first-child { width: 24%; white-space: normal; font-size: 14px; }
.cmp.cmp-4 td.rv { color: var(--primary); font-weight: 500; }
.cmp.cmp-4 .cmp-brand { min-height: 22px; }
.cmp-wrap-4 + .cmp-note { max-width: 1080px; margin-left: auto; margin-right: auto; }
.cmp-cat { display: block; margin-top: 4px; font-size: 12px; font-weight: 400; color: var(--text-muted); }
.cmp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Pricing. Hierarchy per card: the plan name next to its character, then the
   price as the largest element, then what is included. Ultra is told apart by a
   sage ring, not by a heavier shadow. The example is a sum, not a sentence. */
.pricing-plans { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; max-width: 880px; margin: 40px 0 0; }
.plan { display: flex; flex-direction: column; background: #fff; border-radius: var(--radius-card); box-shadow: 0 0 0 1px rgba(26,26,26,0.07); padding: 26px 28px 20px; }
.plan-ultra { box-shadow: 0 0 0 1.5px var(--secondary-light); }
.plan-standard { position: relative; }
.plan-badge { position: absolute; top: 31px; right: 28px; padding: 4px 11px; border-radius: var(--radius-pill); background: var(--secondary-pale); color: var(--secondary-dark); font-size: 12px; font-weight: 500; line-height: 1.3; }
/* Bij het laden trekt één keer een zachte salie-glans over Ultra: dezelfde sweep
   als het afvinken van een taak in de app (ProjectBoard .cardCelebrating),
   maar trager en lichter. Onder prefers-reduced-motion blijft hij weg. */
.plan-ultra { position: relative; overflow: hidden; }
.plan-ultra::before { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; mix-blend-mode: multiply;
  background-image: linear-gradient(100deg, transparent 0%, rgba(125,166,125,0.04) 30%, rgba(125,166,125,0.15) 50%, rgba(125,166,125,0.04) 70%, transparent 100%);
  background-size: 200% 100%; background-position: -100% 0;
  animation: plan-sweep 1300ms cubic-bezier(0.22, 0.61, 0.36, 1) 450ms forwards; }
@keyframes plan-sweep { from { background-position: -100% 0; } to { background-position: 200% 0; } }
.plan-head { display: flex; align-items: flex-start; gap: 14px; }
.plan-head > div { padding-top: 4px; }
.plan-tile { display: block; flex: none; width: 52px; height: 52px; border-radius: 13px; border: 4px solid #fff; object-fit: cover; background: #fff; box-shadow: 0 6px 16px -4px rgba(26,26,26,0.22), 0 2px 5px -2px rgba(26,26,26,0.10); }
.plan-name { margin: 0; font-family: 'Newsreader', Georgia, serif; font-weight: 400; font-size: 24px; line-height: 1.1; letter-spacing: -0.015em; color: var(--primary); }
.plan-for { margin: 3px 0 0; font-size: 13.5px; line-height: 1.35; color: var(--text-muted); }
.plan-price { margin: 26px 0 0; font-family: 'Newsreader', Georgia, serif; font-weight: 400; font-size: 52px; line-height: 1; letter-spacing: -0.03em; color: var(--primary); }
.plan-plus { font-size: 0.64em; vertical-align: 0.24em; margin-right: 0.14em; color: var(--text-muted); }
/* "From" vóór de Standard-prijs: zelfde rustige stijl als het plusje bij Ultra. */
.plan-from { display: block; margin-bottom: 2px; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 13px; line-height: 1.3; letter-spacing: 0; color: var(--text-muted); }
.plan-price small { margin-left: 8px; font-family: 'Inter', sans-serif; font-size: 14px; letter-spacing: 0; color: var(--text-muted); white-space: nowrap; }
.plan-list { list-style: none; margin: 22px 0 0; padding: 0; }
.plan-list li { position: relative; padding: 10px 0 10px 22px; border-top: 1px solid var(--line-soft); font-size: 14.5px; line-height: 1.45; color: var(--text); }
/* Twee kaarten naast elkaar delen hun rijen (kop, prijs, lijst), zodat een
   tweeregelige omschrijving of het "From"-label de prijzen niet laat verspringen. */
@media (min-width: 761px) {
  .pricing-plans { grid-template-rows: auto auto auto; row-gap: 0; }
  .plan { display: grid; grid-template-rows: subgrid; grid-row: span 3; }
  .plan-price { align-self: end; }
  .plan-list { align-self: start; }
}
.plan-list li::before { content: ''; position: absolute; left: 2px; top: 16px; width: 8px; height: 4px; border-left: 1.5px solid var(--secondary); border-bottom: 1.5px solid var(--secondary); transform: rotate(-45deg); }
.plan-light { display: grid; grid-template-columns: 1fr 1fr; column-gap: 76px; max-width: 880px; margin: 20px 0 0; padding: 22px 28px 14px; background: rgba(255,255,255,0.55); border-radius: var(--radius-card); box-shadow: 0 0 0 1px rgba(26,26,26,0.07); }
.plan-light-main { display: flex; flex-direction: column; justify-content: space-between; gap: 20px; min-width: 0; padding-bottom: 10px; }
.plan-light-name { margin: 0; font-family: 'Newsreader', Georgia, serif; font-weight: 400; font-size: 24px; line-height: 1.1; letter-spacing: -0.015em; color: var(--primary); }
.plan-light-name span { color: var(--text-muted); }
.plan-light-for { margin: 5px 0 0; font-size: 13.5px; line-height: 1.35; color: var(--text-muted); text-wrap: balance; }
.plan-light-price { margin: 0; font-family: 'Newsreader', Georgia, serif; font-weight: 400; font-size: 34px; line-height: 1; letter-spacing: -0.03em; color: var(--primary); white-space: nowrap; }
.plan-light-price small { margin-left: 8px; font-family: 'Inter', sans-serif; font-size: 13.5px; letter-spacing: 0; color: var(--text-muted); }
.plan-light-list { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.plan-light-list li { position: relative; flex: 0 0 100%; text-wrap: balance; box-sizing: border-box; padding: 8px 0 8px 22px; border-top: 1px solid var(--line-soft); font-size: 14px; line-height: 1.45; color: var(--text); }
.plan-light-list li:first-child { border-top: 0; padding-top: 6px; }
.plan-light-list li::before { content: ''; position: absolute; left: 2px; top: 14px; width: 8px; height: 4px; border-left: 1.5px solid var(--secondary); border-bottom: 1.5px solid var(--secondary); transform: rotate(-45deg); }
.plan-light-list li:first-child::before { top: 12px; }
.plan-light-list li.is-out { flex: 0 0 auto; padding-left: 0; margin-right: 22px; border-top: 0; color: var(--text-muted); }
.plan-light-list li.is-out::before { content: none; }
.plan-light-list li:nth-child(3) { border-bottom: 1px solid var(--line-soft); }
@media (max-width: 480px) { .plan-badge { position: static; align-self: flex-start; margin: -4px 0 14px; } }
@media (max-width: 760px) { .plan-light { grid-template-columns: 1fr; row-gap: 18px; padding-bottom: 12px; } .plan-light-main { padding-bottom: 0; } .plan-light-list li:first-child { border-top: 1px solid var(--line-soft); padding-top: 8px; } .plan-light-list li:first-child::before { top: 14px; } }
.pricing-note { max-width: 600px; margin: 16px 0 0; font-size: 13px; line-height: 1.55; color: var(--text-light); }

/* No lock-in: three plain points on hairlines instead of a sales argument. */
.lockin { max-width: 880px; margin: 52px 0 0; }
.lockin h2 { margin: 0; font-family: 'Newsreader', Georgia, serif; font-weight: 400; font-size: clamp(23px, 2.6vw, 30px); line-height: 1.15; letter-spacing: -0.02em; color: var(--primary); }
.lockin-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 28px; margin: 22px 0 0; }
.lockin-points > div { padding-top: 16px; border-top: 1px solid var(--line); }
.lockin-points dt { margin: 0; font-size: 15px; font-weight: 600; color: var(--primary); }
.lockin-points dd { margin: 6px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--text-muted); }
@media (max-width: 760px) { .lockin-points { grid-template-columns: 1fr; gap: 16px; } }

.tier-cta { margin: 32px 0 0; }
/* On a left-aligned page the question list starts under its heading, not centred,
   and its questions stay a step below the section title. */
.values-title + .faq-list { max-width: 880px; margin-left: 0; margin-right: 0; }
.values-title + .faq-list summary { font-size: 19px; padding: 20px 4px; }
.values-title + .faq-list .faq-a { font-size: 15px; padding-bottom: 20px; }
@media (max-width: 760px) { .pricing-plans { grid-template-columns: 1fr; } .plan-price { font-size: 46px; } .plan-price small { display: block; margin: 10px 0 0; } }

/* A quiet jump from the pricing intro to the calculator. Plain anchor; smooth only when motion is welcome. */
.pricing-jump { margin: 18px 0 0; }
.pricing-jump a { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 500; line-height: 1.4; color: var(--secondary-dark); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; transition: text-decoration-color 160ms var(--ease); }
.pricing-jump a:hover { text-decoration-color: currentColor; }
.pricing-jump a:focus-visible { outline: 2px solid var(--secondary-dark); outline-offset: 3px; border-radius: 4px; }
.pricing-jump svg { flex: none; width: 15px; height: 15px; transition: transform 160ms var(--ease); }
.pricing-jump a:hover svg { transform: translateY(2px); }
#savings { scroll-margin-top: 16px; }
@media (max-width: 760px) { #savings { scroll-margin-top: -96px; } }
@media (prefers-reduced-motion: no-preference) { html:has(#savings) { scroll-behavior: smooth; } }
@media (prefers-reduced-motion: reduce) { .pricing-jump a, .pricing-jump svg { transition: none; } .pricing-jump a:hover svg { transform: none; } }

/* The Recommended pill can move between the plans once the calculator has been used. Each plan
   holds its own copy; only one is shown. On a phone it rides the top edge of the card, so
   moving it never changes a card's height. */
.plan-badge[hidden] { display: none; }
.plan-ultra .plan-badge { z-index: 1; }
.plan-badge-inline { position: static; display: inline-block; margin-left: 8px; vertical-align: 4px; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; letter-spacing: 0; }
@media (max-width: 480px) {
  .plan-ultra { overflow: visible; }
  .plan-standard .plan-badge, .plan-ultra .plan-badge { position: absolute; top: -12px; right: auto; left: 24px; align-self: auto; margin: 0; box-shadow: 0 0 0 3px var(--neutral); }
}

/* Savings calculator (pricing). One object: a softly tinted panel the width of the
   plan cards. Left you choose (logo tiles, four sliders, the plan), right you see
   (one white card with the estimate). Two kinds of saving stay apart: tools and time.
   Inputs follow the order of the rows in the estimate: tools, time, Rivilo. */
#savings .values-title { max-width: 640px; font-size: clamp(27px, 3.4vw, 38px); line-height: 1.1; letter-spacing: -0.022em; text-wrap: balance; }
#savings .values-title em { font-style: italic; font-weight: 300; color: var(--secondary-dark); }
#try .values-title { max-width: 640px; font-size: clamp(27px, 3.4vw, 38px); line-height: 1.1; letter-spacing: -0.022em; }
#try .values-title em { font-style: italic; font-weight: 300; color: var(--secondary-dark); }
#try .page-intro { margin-top: 16px; }
/* On the pricing page the heading and the form are one section: same ground, no seam. */
#try { padding-bottom: 8px; border-bottom: 0; }
#try ~ .try-panel { background: transparent; border-top: 0; padding-top: 48px; }
#try ~ .try-panel::before { display: none; }
.sv-intro { max-width: 580px; margin: 16px 0 0; font-size: 16px; line-height: 1.6; color: var(--text-muted); }
.sv { max-width: 880px; margin: 44px 0 0; }
.sv-main { display: grid; grid-template-columns: minmax(0, 1fr) 348px; gap: 0 28px; align-items: start; padding: 28px; border-radius: var(--radius-card); background: rgba(26,26,26,0.035); }
.sv-in { min-width: 0; margin: 0; }
.sv-in fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.sv-group + .sv-group { margin-top: 32px; }
.sv-h { display: block; margin: 0; padding: 0; font-family: 'Newsreader', Georgia, serif; font-weight: 400; font-size: 21px; line-height: 1.2; letter-spacing: -0.015em; color: var(--primary); }
.sv-label { display: block; padding: 0; font-size: 13.5px; font-weight: 500; line-height: 1.35; color: var(--primary); }
.sv-hint { margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: var(--text-muted); }
.sv-hint[hidden] { display: none; }

/* Tools: brand logos on white tiles, five across at every width. The tile is the
   checkbox; ticked shows as a sage ring plus a tick badge, never colour alone. */
.sv-tools > .sv-hint { max-width: 420px; }
.sv-apps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px 10px; margin: 18px 0 0; }
.sv-app { position: relative; display: flex; flex-direction: column; align-items: center; min-width: 0; text-align: center; cursor: pointer; }
.sv-app input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.sv-app-tile { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 1; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px rgba(26,26,26,0.07), 0 1px 2px rgba(26,26,26,0.04); transition: box-shadow 160ms var(--ease), transform 160ms var(--ease); }
.sv-app-tile img { display: block; width: 42%; height: auto; transform: scale(var(--k, 1)); }
.sv-app-toggl img { --k: 0.94; }
.sv-app-notion img { --k: 0.94; }
.sv-app-asana img { --k: 1.04; }
.sv-app-gemini img { --k: 1.26; }
.sv-app-salesforce img { --k: 1.1; }
.sv-app-chatgpt img { --k: 1.04; }
.sv-app-claude img { --k: 1.08; }
.sv-app-jira img { --k: 0.9; }
/* No usable logo (see logoSource in savings-apps.json): a plain initial, as an avatar would. */
.sv-app-word { font-family: 'Newsreader', Georgia, serif; font-size: 30px; line-height: 1; color: var(--text-muted); transform: translateY(-1px); }
.sv-app-name { display: block; max-width: 100%; margin: 9px 0 0; font-size: 12.5px; font-weight: 500; line-height: 1.25; color: var(--primary); }
.sv-app-price { display: block; margin: 1px 0 0; font-size: 12.5px; line-height: 1.3; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.sv-tick { position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%; background: var(--secondary-dark); box-shadow: 0 0 0 2px #fff; opacity: 0; transform: scale(0.6); transition: opacity 160ms var(--ease), transform 200ms var(--ease), background 160ms var(--ease); }
.sv-tick::after { content: ''; position: absolute; left: 5.5px; top: 6px; width: 8px; height: 4.5px; border-left: 1.75px solid #fff; border-bottom: 1.75px solid #fff; transform: rotate(-45deg); }
.sv-app:hover .sv-app-tile { transform: translateY(-1px); box-shadow: 0 0 0 1px var(--line-strong), 0 6px 14px -6px rgba(26,26,26,0.18); }
.sv-app input:checked ~ .sv-app-tile { box-shadow: 0 0 0 2px var(--secondary-dark); }
.sv-app input:checked ~ .sv-app-tile .sv-tick { opacity: 1; transform: none; }
.sv-app input:focus-visible ~ .sv-app-tile { outline: 2px solid var(--secondary-dark); outline-offset: 3px; }
.sv-app.is-kept input:checked ~ .sv-app-tile { box-shadow: 0 0 0 2px var(--line-strong); }
.sv-app.is-kept .sv-tick { background: var(--text-light); }
.sv-app.is-kept .sv-tick::after { left: 6px; top: 9px; width: 8px; height: 0; border-left: 0; transform: none; }
.sv-app.is-kept .sv-app-price { text-decoration: line-through; color: var(--text-light); }

.sv-keep { margin: 18px 0 0; padding: 12px 16px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px rgba(26,26,26,0.07); }
.sv-switch { display: flex; align-items: center; gap: 12px; margin: 0; cursor: pointer; }
.sv-switch input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.sv-switch-track { position: relative; flex: none; width: 36px; height: 22px; border-radius: 11px; background: rgba(26,26,26,0.16); transition: background 160ms var(--ease); }
.sv-switch-track::after { content: ''; position: absolute; left: 2px; top: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(26,26,26,0.25); transition: transform 160ms var(--ease); }
.sv-switch input:checked + .sv-switch-track { background: var(--secondary-dark); }
.sv-switch input:checked + .sv-switch-track::after { transform: translateX(14px); }
.sv-switch input:focus-visible + .sv-switch-track { outline: 2px solid var(--secondary-dark); outline-offset: 2px; }
.sv-switch-text { font-size: 13.5px; font-weight: 500; line-height: 1.4; color: var(--primary); }
.sv-switch-hint { margin: 6px 0 2px 48px; }

/* Team: four small white cards, value in Newsreader, and the hourly cost as the
   fifth card because it belongs to the same sum. */
.sv-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 16px 0 0; }
.sv-field, .sv-rate { border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px rgba(26,26,26,0.07); }
.sv-field { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 1fr auto; align-items: center; gap: 4px 14px; padding: 14px 16px 8px; }
.sv-field .sv-label { grid-column: 1 / -1; align-self: start; text-wrap: pretty; }
.sv-val { min-width: 2.4ch; font-family: 'Newsreader', Georgia, serif; font-size: 28px; line-height: 1; letter-spacing: -0.025em; text-align: right; color: var(--primary); font-variant-numeric: tabular-nums; transform: translateY(-4px); }
.sv-field input[type=range] { width: 100%; height: 32px; margin: 0; padding: 0; background: none; appearance: none; -webkit-appearance: none; cursor: pointer; --p: 50%; }
.sv-field input[type=range]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--secondary-dark) var(--p), rgba(26,26,26,0.10) var(--p)); }
.sv-field input[type=range]::-moz-range-track { height: 6px; border-radius: 3px; background: rgba(26,26,26,0.10); }
.sv-field input[type=range]::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--secondary-dark); }
.sv-field input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -8px; border: 0; border-radius: 50%; background: radial-gradient(circle, var(--secondary-dark) 0 3px, #fff 3.6px); box-shadow: 0 0 0 1px rgba(26,26,26,0.14), 0 3px 8px -2px rgba(26,26,26,0.28); transition: transform 140ms var(--ease); }
.sv-field input[type=range]::-moz-range-thumb { width: 22px; height: 22px; border: 0; border-radius: 50%; background: radial-gradient(circle, var(--secondary-dark) 0 3px, #fff 3.6px); box-shadow: 0 0 0 1px rgba(26,26,26,0.14), 0 3px 8px -2px rgba(26,26,26,0.28); }
.sv-field input[type=range]:hover::-webkit-slider-thumb { transform: scale(1.06); }
.sv-field input[type=range]:active::-webkit-slider-thumb { transform: scale(1.12); }
.sv-field input[type=range]:focus { outline: none; }
.sv-field input[type=range]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--secondary-dark); }
.sv-field input[type=range]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--secondary-dark); }
.sv-field[hidden] { display: none; }
.sv-field-ultra { margin: 10px 0 0; }
.sv-rate { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 16px; margin: 10px 0 0; padding: 14px 16px; }
.sv-rate .sv-hint { grid-column: 1; margin-top: 3px; font-size: 12.5px; }
.sv-rate-box { grid-column: 2; grid-row: 1 / span 2; display: inline-flex; align-items: center; gap: 2px; padding: 0 12px 0 12px; border-radius: 10px; background: none; box-shadow: inset 0 0 0 1px var(--line-strong); font-family: 'Newsreader', Georgia, serif; font-size: 28px; letter-spacing: -0.025em; color: var(--primary); transition: box-shadow 160ms var(--ease); }
.sv-rate-box:hover { box-shadow: inset 0 0 0 1px rgba(26,26,26,0.28); }
.sv-rate-box:focus-within { background: #fff; box-shadow: inset 0 0 0 2px var(--secondary-dark); }
.sv-rate-box input { width: 50px; padding: 3px 0 4px; -moz-appearance: textfield; appearance: textfield; border: 0; background: none; font: inherit; color: inherit; font-variant-numeric: tabular-nums; outline: none; }

/* Plan: the same three names and prices as the cards above, in Newsreader. */
.sv-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin: 22px 0 0; padding: 4px; border-radius: 14px; background: rgba(26,26,26,0.05); }
.sv-seg label { position: relative; display: block; cursor: pointer; }
.sv-seg input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.sv-seg span { position: relative; display: block; height: 100%; padding: 9px 6px 10px; border-radius: 10px; text-align: center; transition: background 160ms var(--ease), box-shadow 160ms var(--ease); }
.sv-seg b { display: block; font-family: 'Newsreader', Georgia, serif; font-size: 18px; font-weight: 400; line-height: 1.2; letter-spacing: -0.015em; color: var(--text-muted); }
.sv-seg i { display: block; margin-top: 2px; font-style: normal; font-size: 12.5px; line-height: 1.3; color: var(--text-light); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* The recommendation rides on the top edge of its segment, so nothing changes size when it moves. */
.sv-rec { position: absolute; left: 50%; top: -15px; padding: 3px 10px; border-radius: var(--radius-pill); background: var(--secondary-pale); font-style: normal; font-size: 11.5px; font-weight: 500; line-height: 1.3; white-space: nowrap; color: var(--secondary-dark); transform: translateX(-50%); pointer-events: none; }
.sv-rec[hidden] { display: none; }
.sv-seg label:hover span { background: rgba(255,255,255,0.55); }
.sv-seg label:hover b { color: var(--primary); }
.sv-seg input:checked + span { background: #fff; box-shadow: 0 0 0 1px rgba(26,26,26,0.07), 0 2px 6px -2px rgba(26,26,26,0.12); }
.sv-seg input:checked + span b { color: var(--primary); }
.sv-seg input:checked + span i { color: var(--secondary-dark); }
.sv-seg input:focus-visible + span { outline: 2px solid var(--secondary-dark); outline-offset: 2px; }
.sv-plan > .sv-hint { margin-top: 10px; }

/* Estimate: the one white card, in the skin of .plan. Three quiet rows, then the
   balance in its own sage field so it reads first. */
.sv-out { position: sticky; top: var(--sv-top, 96px); min-width: 0; padding: 24px 24px 22px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px rgba(26,26,26,0.07), 0 18px 40px -24px rgba(26,26,26,0.18); scroll-margin-top: 96px; }
.sv-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 0 16px; margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--line-soft); }
.sv-out-head + .sv-row { margin-top: 16px; border-top-color: var(--line); }
.sv-row-label { margin: 0; font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--primary); }
.sv-row-num { margin: 0; font-size: 15px; font-weight: 500; color: var(--primary); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sv-row-num.sv-minus { color: var(--text-muted); }
.sv-row-note { font-weight: 400; color: var(--text-light); }
.sv-row-sub { grid-column: 1 / -1; margin: 3px 0 0; font-size: 13px; line-height: 1.45; color: var(--text-muted); }
.sv-list { grid-column: 1 / -1; list-style: none; margin: 5px 0 0; padding: 0; }
.sv-list li { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; font-size: 13px; line-height: 1.45; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.sv-list li span:last-child { flex: none; }
.sv-list li.is-kept, .sv-list li.is-empty { color: var(--text-light); }
.sv-out-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.sv-units { margin: 0; font-size: 12.5px; color: var(--text-light); white-space: nowrap; }
.sv-net { container-type: inline-size; margin: 16px 0 0; padding: 18px 20px 17px; border-radius: 14px; background: var(--secondary-pale); transition: background 200ms var(--ease); }
.sv-net-label { margin: 0; font-size: 13px; font-weight: 500; line-height: 1.3; color: var(--secondary-dark); }
.sv-net-num { margin: 7px 0 0; font-family: 'Newsreader', Georgia, serif; font-weight: 400; font-size: 40px; font-size: min(40px, 16cqw); line-height: 1; letter-spacing: -0.03em; white-space: nowrap; color: var(--secondary-dark); font-variant-numeric: tabular-nums; }
.sv-net-year { margin: 7px 0 0; font-size: 13px; line-height: 1.4; color: var(--secondary-dark); opacity: 0.78; }
.sv-net-year:empty { display: none; }
.sv-net.is-behind { background: rgba(26,26,26,0.045); }
.sv-net.is-behind .sv-net-label, .sv-net.is-behind .sv-net-year { color: var(--text-muted); opacity: 1; }
.sv-net.is-behind .sv-net-num { color: var(--primary); }
.sv-rec-say { margin: 12px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--text-muted); text-wrap: pretty; }
.sv-rec-say[hidden] { display: none; }
.sv-rec-switch { margin: 0; padding: 0; border: 0; background: none; font: inherit; font-weight: 500; color: var(--secondary-dark); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; white-space: nowrap; }
.sv-rec-switch:hover { color: var(--primary); }
.sv-rec-switch:focus-visible { outline: 2px solid var(--secondary-dark); outline-offset: 2px; border-radius: 4px; }
.sv-say { margin: 14px 0 0; font-size: 14px; line-height: 1.55; color: var(--text); text-wrap: pretty; }
/* Two gains on top of the balance: the outcome in bold reads first, how it happens follows quietly. */
.sv-extra { margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--line); }
.sv-extra-h { margin: 0; font-family: 'Newsreader', Georgia, serif; font-weight: 400; font-size: 18px; line-height: 1.25; letter-spacing: -0.015em; color: var(--primary); }
.sv-extra-list { list-style: none; margin: 6px 0 0; padding: 0; }
.sv-extra-list li { padding: 5px 0; font-size: 12.5px; line-height: 1.5; color: var(--text-muted); }
.sv-extra-list li + li { border-top: 1px solid var(--line-soft); }
.sv-extra-list li strong { font-size: 13px; font-weight: 600; color: var(--primary); }
.sv-what { display: none; margin: 6px 0 0; border-top: 1px solid var(--line-soft); }
.sv.is-js .sv-what { display: block; }
.sv-what summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0 0; list-style: none; cursor: pointer; font-size: 13.5px; font-weight: 500; line-height: 1.4; color: var(--primary); }
.sv-what summary::-webkit-details-marker { display: none; }
.sv-what summary::after { content: '+'; flex: none; font-size: 18px; font-weight: 400; line-height: 1; color: var(--text-light); }
.sv-what[open] summary::after { content: '–'; }
.sv-what summary:hover { color: var(--secondary-dark); }
.sv-what summary:focus-visible { outline: 2px solid var(--secondary-dark); outline-offset: 2px; border-radius: 6px; }
.sv-what-body { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 0 14px; margin: 10px 0 0; }
.sv-rate-box input::-webkit-outer-spin-button, .sv-rate-box input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sv-what-box { grid-column: 1; grid-row: auto; font-size: 18px; letter-spacing: 0; }
.sv-what-box input { width: 84px; padding: 5px 0 6px; text-align: left; }
.sv-what .sv-hint { grid-column: 2; margin: 0; font-size: 12px; line-height: 1.45; }
.sv-what-say { margin: 10px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--primary); }
.sv-what-say[hidden] { display: none; }
.sv-cta { margin: 16px 0 0; }
.sv-cta .btn { width: 100%; justify-content: center; }
.sv-cta-note { margin: 8px 0 0; font-size: 12.5px; line-height: 1.45; text-align: center; color: var(--text-light); }
.sv-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.sv-foot { margin: 20px 0 0; }
.sv-disclaimer { max-width: 660px; margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--text-light); }
.sv-marks { margin-top: 6px; }
.sv-how { margin: 28px 0 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sv-how summary { display: flex; justify-content: space-between; align-items: center; padding: 18px 4px; list-style: none; cursor: pointer; font-family: 'Newsreader', Georgia, serif; font-size: 19px; letter-spacing: -0.015em; color: var(--primary); }
.sv-how summary::-webkit-details-marker { display: none; }
.sv-how summary::after { content: '+'; font-family: 'Inter', sans-serif; font-size: 22px; color: var(--text-light); }
.sv-how[open] summary::after { content: '–'; }
.sv-how summary:hover { color: var(--secondary-dark); }
.sv-how summary:focus-visible { outline: 2px solid var(--secondary-dark); outline-offset: 2px; border-radius: 6px; }
.sv-how ul { list-style: none; max-width: 680px; margin: 0; padding: 0 4px; }
.sv-how li { padding: 9px 0; border-top: 1px solid var(--line-soft); font-size: 14.5px; line-height: 1.55; color: var(--text-muted); }
.sv-how li strong { font-weight: 500; color: var(--primary); }
.sv-how p { max-width: 680px; margin: 0; padding: 12px 4px 20px; font-size: 14.5px; line-height: 1.55; color: var(--text-muted); }

/* Balance out of view while the inputs are on screen: a small pill at the foot of the window. */
.sv-bar { display: none; }
.sv-bar:not([hidden]) { position: fixed; z-index: 40; left: 50%; bottom: 20px; display: flex; align-items: baseline; gap: 12px; padding: 10px 20px 11px; border-radius: var(--radius-pill); background: var(--primary); color: #fff; box-shadow: 0 12px 32px -8px rgba(26,26,26,0.45); transform: translateX(-50%); animation: sv-bar-in 220ms var(--ease); }
.sv-bar p { display: flex; align-items: baseline; gap: 12px; margin: 0; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sv-bar p span { font-family: 'Newsreader', Georgia, serif; font-size: 19px; line-height: 1.2; letter-spacing: -0.015em; }
.sv-bar p span + span { font-family: 'Inter', sans-serif; font-size: 12.5px; letter-spacing: 0; color: rgba(255,255,255,0.64); }
.sv-bar a { display: none; }
@keyframes sv-bar-in { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translateX(-50%); } }
@media (max-width: 900px) {
  .sv-main { grid-template-columns: minmax(0, 1fr) 300px; gap: 0 20px; padding: 20px; }
  .sv-apps { gap: 14px 8px; }
  .sv-app-tile { border-radius: 14px; }
  .sv-app-word { font-size: 27px; }
  .sv-fields { grid-template-columns: minmax(0, 1fr); }
  .sv-out { padding: 20px 20px 18px; }
  .sv-net { padding: 16px 16px 15px; }
  .sv-net-num { font-size: 34px; font-size: min(34px, 16cqw); }
}
@media (max-width: 760px) {
  .sv { margin-top: 32px; }
  .sv-main { grid-template-columns: minmax(0, 1fr); padding: 0; background: none; }
  .sv-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sv-out { position: static; margin: 32px 0 0; padding: 24px 24px 22px; border-radius: var(--radius-card); }
  .sv-net-num { font-size: 40px; font-size: min(40px, 16cqw); }
  .sv-bar:not([hidden]) { left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); align-items: center; justify-content: space-between; padding: 10px 10px 10px 18px; border-radius: 18px; transform: none; animation: none; }
  .sv-bar p { flex-direction: column; align-items: flex-start; gap: 0; min-width: 0; }
  .sv-bar p span + span { font-size: 12px; line-height: 1.35; }
  .sv-bar a { display: block; flex: none; padding: 9px 14px; border-radius: var(--radius-pill); background: rgba(255,255,255,0.12); font-size: 13px; font-weight: 500; line-height: 1.3; color: #fff; text-decoration: none; }
}
@media (max-width: 520px) {
  .sv-apps { gap: 14px 8px; }
  .sv-app-tile { border-radius: 13px; }
  .sv-app-tile img { width: 46%; }
  .sv-app-word { font-size: 23px; }
  .sv-app-name { margin-top: 7px; font-size: 10.5px; letter-spacing: -0.02em; white-space: nowrap; }
  .sv-app-price { font-size: 11.5px; }
  .sv-tick { top: -5px; right: -5px; width: 17px; height: 17px; }
  .sv-tick::after { left: 4.5px; top: 5px; width: 7px; height: 4px; }
  .sv-app.is-kept .sv-tick::after { left: 4.5px; top: 7.5px; width: 8px; height: 0; }
  .sv-fields { grid-template-columns: minmax(0, 1fr); }
  .sv-seg b { font-size: 16.5px; }
  .sv-seg i { font-size: 11.5px; }
}
@media (prefers-reduced-motion: reduce) { .sv-bar:not([hidden]) { animation: none; } .sv-seg span, .sv-app-tile, .sv-tick, .sv-net, .sv-rate-box, .sv-switch-track, .sv-switch-track::after, .sv-field input[type=range]::-webkit-slider-thumb { transition: none; } .sv-app:hover .sv-app-tile { transform: none; } }

/* Security teaser: local storage and local AI, coming soon. One dark panel so it
   reads as separate from what exists today; the Mac Mini ties it to where Rivilo
   started. The status light breathes, unless the visitor prefers less motion. */
.local-panel { position: relative; overflow: hidden; display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 32px; align-items: center; max-width: 880px; margin: 64px 0 0; padding: 40px 44px; border-radius: 24px; background: #1F201D; color: #F3F1EA; }
.local-panel .beta.soon { background: rgba(184,207,184,0.14); color: var(--secondary-light); }
.local-copy h2 { margin: 14px 0 0; font-family: 'Newsreader', Georgia, serif; font-weight: 400; font-size: clamp(26px, 3vw, 34px); line-height: 1.12; letter-spacing: -0.02em; color: #F7F5EF; }
.local-copy h2 em { font-style: italic; font-weight: 300; color: var(--secondary-light); }
.local-copy > p { margin: 12px 0 0; max-width: 420px; font-size: 15.5px; line-height: 1.6; color: rgba(243,241,234,0.72); }
.local-points { list-style: none; margin: 22px 0 0; padding: 0; }
.local-points li { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-top: 1px solid rgba(243,241,234,0.10); font-size: 14px; line-height: 1.5; color: rgba(243,241,234,0.62); }
.local-ico { flex: none; display: grid; place-items: center; width: 30px; height: 30px; margin-top: 1px; border-radius: 9px; background: rgba(184,207,184,0.10); color: var(--secondary-light); }
.local-ico svg { width: 16px; height: 16px; display: block; }
.local-points strong { display: block; font-weight: 600; color: #F3F1EA; }
.local-cta { margin: 24px 0 0; }
.btn.local-btn { background: transparent; color: #F3F1EA; box-shadow: inset 0 0 0 1px rgba(243,241,234,0.32); }
.btn.local-btn:hover { background: rgba(243,241,234,0.07); box-shadow: inset 0 0 0 1px rgba(243,241,234,0.55); }
.local-art { position: relative; margin: 0; text-align: center; }
.local-glow { position: absolute; left: 50%; top: 44%; width: 300px; height: 210px; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(125,166,125,0.38), rgba(125,166,125,0) 72%); pointer-events: none; }
.local-mac { position: relative; display: block; width: min(240px, 100%); height: auto; margin: 0 auto; }
.local-with { position: relative; display: inline-flex; align-items: center; gap: 9px; margin: 18px 0 0; padding: 5px 13px 5px 5px; border-radius: var(--radius-pill); background: rgba(243,241,234,0.07); box-shadow: 0 0 0 1px rgba(243,241,234,0.10); font-size: 13px; line-height: 1; color: rgba(243,241,234,0.78); }
.local-with img { display: block; width: 24px; height: 24px; padding: 3px; border-radius: 7px; background: #fff; object-fit: contain; }
.local-led { fill: #A8D8A8; animation: local-led 2.6s ease-in-out infinite; }
@keyframes local-led { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .local-led { animation: none; opacity: 1; } }
@media (max-width: 760px) { .local-panel { grid-template-columns: 1fr; gap: 18px; padding: 30px 24px; } .local-art { order: -1; } .local-mac { width: 180px; } }

/* Early access page: three steps on hairlines, a left-aligned form, and selects
   styled like the inputs so team size and mailbox read as part of one form. */
.apply-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 28px; max-width: 880px; margin: 44px 0 0; counter-reset: step; }
.apply-steps > div { padding-top: 16px; border-top: 1px solid var(--line); counter-increment: step; }
.apply-steps dt { margin: 0; font-size: 15px; font-weight: 600; color: var(--primary); }
.apply-steps dt::before { content: counter(step, decimal-leading-zero); display: block; margin-bottom: 6px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; color: var(--secondary); }
.apply-steps dd { margin: 6px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--text-muted); }
.apply-form .form, .apply-form .form-success { margin-left: 0; margin-right: 0; }
.apply-form .form { margin-top: 20px; }
.form select { width: 100%; font: inherit; font-size: 15px; padding: 13px 44px 13px 16px; border-radius: var(--radius-soft); border: 1px solid var(--line-strong); color: var(--primary); appearance: none; -webkit-appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%236B6B6B' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 16px center / 12px 8px; }
.form select:focus { outline: 2px solid var(--secondary-dark); outline-offset: 1px; border-color: transparent; }
.form select:invalid { color: var(--text-light); }
.apply-aside { max-width: 560px; margin: 26px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--text-light); }
.apply-aside a { color: var(--secondary-dark); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 760px) { .apply-steps { grid-template-columns: 1fr; gap: 16px; } }

/* Checkboxes in forms: the general .form input rule makes inputs full width with
   padding, so these are reset to a real checkbox beside its label. */
.form .form-check { display: flex; align-items: flex-start; gap: 10px; margin: 14px 0 0; font-size: 14px; font-weight: 400; line-height: 1.45; color: var(--text); cursor: pointer; }
.form textarea + .form-check { margin-top: 22px; }
.form .form-check input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; padding: 0; border-radius: 4px; accent-color: var(--secondary-dark); cursor: pointer; }
.form .form-check a { color: var(--secondary-dark); text-decoration: underline; text-underline-offset: 3px; }

/* ---- Try Rivilo page (/contact/): two routes, a short request form, what happens next ----
   Everything here is prefixed .try- and only used by site/pages/contact.html. */
.try-top { padding-bottom: 56px; }
.try-top .page-intro { max-width: 640px; }
.try-routes { display: inline-flex; gap: 4px; margin: 36px 0 0; padding: 5px; border-radius: var(--radius-pill); background: #fff; box-shadow: 0 0 0 1px rgba(26,26,26,0.07), 0 6px 18px -8px rgba(26,26,26,0.12); }
.try-routes a { padding: 11px 20px; border-radius: var(--radius-pill); font-size: 14.5px; font-weight: 500; line-height: 1.2; color: var(--text-muted); white-space: nowrap; transition: background 0.2s var(--ease), color 0.2s var(--ease); }
.try-routes a:hover { color: var(--primary); }
.try-routes a[aria-current="true"] { background: var(--primary); color: #fff; }
html:not(.try-js) .try-routes a:first-child { background: var(--primary); color: #fff; }
.try-panel[hidden] { display: none; }
.try-panel { scroll-margin-top: 96px; }
.try-js .try-book { background: var(--neutral-warm); }

.try-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 0 72px; align-items: start; }
.try-main { min-width: 0; }
.form.try-form, .try-success { max-width: none; margin: 0; padding: 32px 36px 30px; background: #fff; border-radius: var(--radius-card); box-shadow: 0 0 0 1px rgba(26,26,26,0.07); text-align: left; }
.try-form-title, .try-success-title { margin: 0; font-family: 'Newsreader', Georgia, serif; font-weight: 400; font-size: 27px; line-height: 1.15; letter-spacing: -0.02em; color: var(--primary); }
.try-form-title:focus, .try-book .values-title:focus { outline: none; }
.try-lead { margin: 14px 0 0; max-width: 640px; font-family: 'Newsreader', Georgia, serif; font-weight: 400; font-size: 24px; line-height: 1.3; letter-spacing: -0.012em; color: var(--primary); }
.try-lead + .page-intro { margin-top: 14px; }
@media (max-width: 480px) { .try-lead { font-size: 20px; } }
.try-form-title-mascot { display: flex; align-items: center; gap: 14px; }
.try-form-mascot { display: block; flex: none; width: 46px; height: 46px; object-fit: contain; }
@media (max-width: 480px) { .try-form-mascot { width: 40px; height: 40px; } .try-form-title-mascot { gap: 10px; } }
.try-context { margin: 14px 0 0; padding: 12px 16px; border-radius: var(--radius-soft); background: var(--secondary-pale); font-size: 14px; line-height: 1.5; color: var(--secondary-dark); }
.try-context[hidden] { display: none; }

.try-field { margin: 22px 0 0; padding: 0; border: 0; min-width: 0; }
.try-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.try-form-title + .try-row, .try-context + .try-row { margin-top: 2px; }
.try-form-title + .try-field, .try-context + .try-field { margin-top: 24px; }
.form .try-field > label, .try-field > legend { display: block; margin: 0 0 7px; padding: 0; font-size: 13.5px; font-weight: 500; color: var(--primary); }
.try-optional { margin-left: 6px; font-weight: 400; color: var(--text-light); }
.form.try-form input[type="text"], .form.try-form input[type="email"], .form.try-form textarea { background: #fff; }
.form.try-form textarea { min-height: 92px; }
.try-hint { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: var(--text-muted); }
.try-hint a, .try-legal a, .try-aside-note a, .try-book-back a, .try-link { color: var(--secondary-dark); text-decoration: underline; text-underline-offset: 3px; }
.try-hint-if { display: none; }
.try-choice:has(input[value="21 to 100"]:checked) .try-hint-large,
.try-choice:has(input[value="More than 100"]:checked) .try-hint-large,
.try-choice:has(input[value="Outlook or Microsoft 365"]:checked) .try-hint-ms { display: block; }
.try-error { margin: 8px 0 0; font-size: 13px; line-height: 1.45; color: #A33A2A; }
.try-error[hidden] { display: none; }
.form.try-form input[aria-invalid="true"] ~ .try-hint { display: none; }
.form.try-form input[aria-invalid="true"] { border-color: #A33A2A; }

/* Choice chips: real radio buttons, the label is the target. */
.try-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.form .try-chips label { position: relative; display: block; margin: 0; font-size: 14px; font-weight: 400; cursor: pointer; }
.form .try-chips input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: pointer; }
.try-chips span { display: block; padding: 10px 16px; border-radius: var(--radius-pill); border: 1px solid var(--line-strong); background: #fff; line-height: 1.2; color: var(--primary); transition: background 0.15s var(--ease), border-color 0.15s var(--ease); }
#field-size .try-chips { gap: 6px; }
#field-size .try-chips span { padding: 10px 12px; }
.try-chips label:hover span { border-color: rgba(26,26,26,0.32); }
.try-chips input:checked + span { background: var(--secondary-pale); border-color: var(--secondary-dark); color: var(--secondary-dark); font-weight: 500; }
.try-fix legend { line-height: 1.35; }
.try-fix-other { margin-top: 12px; }
.form .try-fix-other textarea { min-height: 72px; }
.try-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@supports selector(:has(*)) { .try-fix-other { display: none; } .try-fix:has(input[value="Other"]:checked) .try-fix-other { display: block; } }
.try-chips input:focus-visible + span { outline: 2px solid var(--secondary-dark); outline-offset: 2px; }
.try-choice[aria-invalid="true"] .try-chips span { border-color: #A33A2A; }

.form.try-form .form-check { margin-top: 22px; }
.form.try-form .btn { margin-top: 22px; }
.try-legal { margin: 14px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--text-muted); text-align: center; }

.try-success { display: none; padding: 36px; }
.try-success:target { display: block; }
.try-main:has(.try-success:target) .try-form { display: none; }
.try-success:focus { outline: none; }
.try-success p { margin: 12px 0 0; max-width: 460px; font-size: 15.5px; line-height: 1.6; color: var(--text-muted); }
.try-success .try-success-next { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); max-width: none; color: var(--primary); }
.try-success .try-success-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 18px; max-width: none; }
.try-link { font-size: 14.5px; }

.try-aside { padding-top: 6px; position: sticky; top: 104px; }
.try-aside-title { margin: 0; font-family: 'Newsreader', Georgia, serif; font-weight: 400; font-size: 22px; line-height: 1.2; letter-spacing: -0.015em; color: var(--primary); }
.try-next { list-style: none; margin: 18px 0 0; padding: 0; counter-reset: trystep; }
.try-next li { position: relative; padding: 16px 0 16px 34px; border-top: 1px solid var(--line); counter-increment: trystep; }
.try-next li::before { content: counter(trystep); position: absolute; left: 0; top: 13px; font-family: 'Newsreader', Georgia, serif; font-size: 21px; line-height: 1.2; color: var(--secondary); }
.try-next h3 { margin: 0; font-size: 14.5px; font-weight: 600; line-height: 1.35; color: var(--primary); }
.try-next p { margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: var(--text-muted); }
.try-founder { display: flex; align-items: center; gap: 12px; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.try-founder img { flex: none; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.try-founder p { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--text-muted); }
.try-founder strong { display: block; font-size: 14.5px; font-weight: 600; color: var(--primary); }
.try-aside-note { margin: 18px 0 0; font-size: 13px; line-height: 1.55; color: var(--text-muted); }

.try-cal { max-width: 860px; margin: 32px 0 0; border-radius: var(--radius-card); overflow: hidden; }
.try-book-back { margin: 24px 0 0; font-size: 14px; color: var(--text-muted); }

@media (max-width: 1000px) {
  .try-grid { grid-template-columns: minmax(0, 1fr) 280px; gap: 0 44px; }
  .form.try-form, .try-success { padding: 28px 28px 26px; }
  .try-chips { gap: 6px; }
  .try-chips span { padding: 10px 13px; }
  #field-size .try-chips span { padding: 10px 10px; }
}
@media (max-width: 840px) {
  .try-grid { grid-template-columns: minmax(0, 1fr); gap: 48px 0; }
  .try-main { max-width: 600px; }
  .try-aside { max-width: 600px; padding-top: 0; position: static; }
}
@media (max-width: 760px) {
  .try-top { padding-bottom: 40px; }
  .try-routes { margin-top: 28px; }
  .try-panel.band-tight { padding-top: 40px; }
  .form.try-form, .try-success { padding: 24px 20px 22px; }
  .try-form-title, .try-success-title { font-size: 24px; }
}
@media (max-width: 520px) {
  .try-row { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .try-chips { gap: 6px; }
  .try-chips span { padding: 10px 11px; text-align: center; }
  #field-mail .try-chips span { padding: 10px 9px; font-size: 13.5px; }
  #field-size .try-chips { display: grid; grid-template-columns: repeat(3, 1fr); }
  #field-size .try-chips label:last-child { grid-column: span 2; }
  #field-plan .try-chips { display: grid; grid-template-columns: repeat(2, 1fr); }
  .try-routes { display: flex; }
  .try-routes a { flex: 1; padding: 11px 8px; font-size: 13.5px; text-align: center; }
}

/* ---- Try page: phone field with country picker (.try-phone-*) ----
   One composed field: country button, hairline, number. Without JavaScript only the input is there. */
.try-phone { position: relative; display: flex; align-items: stretch; border-radius: var(--radius-soft); border: 1px solid var(--line-strong); background: #fff; }
.try-phone:focus-within { outline: 2px solid var(--secondary-dark); outline-offset: 1px; border-color: transparent; }
.try-phone:has(#contact-phone[aria-invalid="true"]) { border-color: #A33A2A; }
.try-phone:has(#contact-phone[aria-invalid="true"]) ~ .try-hint { display: none; }
.try-phone:focus-within:has(#contact-phone[aria-invalid="true"]) { border-color: transparent; }
.form.try-form .try-phone #contact-phone { flex: 1 1 auto; min-width: 0; width: auto; border: 0; border-radius: calc(var(--radius-soft) - 1px); background: transparent; font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
.form.try-form .try-phone.is-enhanced #contact-phone { padding-left: 14px; border-radius: 0 calc(var(--radius-soft) - 1px) calc(var(--radius-soft) - 1px) 0; }
.form.try-form .try-phone #contact-phone:focus { outline: none; }
.try-js .try-phone-nojs { display: none; }

.try-phone-country { position: relative; flex: none; display: flex; align-items: center; gap: 8px; margin: 0; padding: 0 12px 0 14px; border: 0; border-radius: calc(var(--radius-soft) - 1px) 0 0 calc(var(--radius-soft) - 1px); background: transparent; font: inherit; font-size: 15px; line-height: 1.2; color: var(--primary); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background 0.15s var(--ease); }
.try-phone-country::after { content: ''; position: absolute; right: 0; top: 11px; bottom: 11px; width: 1px; background: var(--line-strong); }
.try-phone-country:hover, .try-phone.is-open .try-phone-country { background: var(--neutral); }
.try-phone-country:focus { outline: none; }
.try-phone-country:focus-visible { outline: none; background: var(--secondary-pale); }
.try-phone-dial { min-width: 2.68em; text-align: left; font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }
.try-phone-flag { flex: none; width: 22px; font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; font-size: 18px; line-height: 1; text-align: center; }
.try-phone-iso { flex: none; min-width: 22px; padding: 3px 5px; border-radius: 5px; background: var(--neutral-warm); font-size: 11px; font-weight: 600; line-height: 1; letter-spacing: 0.03em; text-align: center; color: var(--text-muted); }
.try-phone-chev { flex: none; width: 10px; height: 7px; color: var(--text-light); transition: transform 0.2s var(--ease); }
.try-phone.is-open .try-phone-chev { transform: rotate(180deg); }

.try-phone-pop { position: absolute; z-index: 30; left: -1px; right: -1px; top: calc(100% + 8px); padding: 6px; border-radius: var(--radius-card); background: #fff; box-shadow: 0 0 0 1px rgba(26,26,26,0.07), var(--shadow-soft); opacity: 0; transform: translateY(-4px); transition: opacity 0.16s var(--ease), transform 0.16s var(--ease); }
.try-phone-pop.is-open { opacity: 1; transform: none; }
.try-phone-pop[hidden] { display: none; }
.try-phone-search { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; padding: 0 12px; border-bottom: 1px solid var(--line); }
.try-phone-glass { flex: none; width: 15px; height: 15px; color: var(--text-light); }
.form.try-form .try-phone-search input { flex: 1; min-width: 0; padding: 12px 0; border: 0; border-radius: 0; background: transparent; font-size: 14.5px; }
.form.try-form .try-phone-search input:focus { outline: none; }
.try-phone-list { list-style: none; max-height: 262px; margin: 0; padding: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(26,26,26,0.18) transparent; }
.try-phone-list[hidden] { display: none; }
.try-phone-option { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto 14px; align-items: center; gap: 10px; min-height: 40px; padding: 0 12px; border-radius: 12px; font-size: 14.5px; line-height: 1.25; color: var(--primary); cursor: pointer; }
.try-phone-option.is-active { background: var(--neutral-warm); }
.try-phone-option .try-phone-flag { font-size: 17px; }
.try-phone-option .try-phone-iso { justify-self: start; }
.try-phone-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.try-phone-code { font-size: 13.5px; font-variant-numeric: tabular-nums; color: var(--text-muted); }
.try-phone-check { width: 14px; height: 14px; color: var(--secondary-dark); visibility: hidden; }
.try-phone-option[aria-selected="true"] .try-phone-check { visibility: visible; }
.try-phone-option[aria-selected="true"] .try-phone-name { font-weight: 500; }
.try-phone-sep { height: 1px; margin: 6px 12px; background: var(--line); }
.try-phone-empty { margin: 0; padding: 14px 12px 16px; font-size: 14px; line-height: 1.5; color: var(--text-muted); }
.try-phone-empty[hidden] { display: none; }
.try-phone-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (max-width: 520px) {
  .try-phone-option { min-height: 44px; }
  .try-phone-list { max-height: 270px; }
  .form.try-form .try-phone-search input { font-size: 16px; padding: 13px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .try-phone-pop, .try-phone-chev, .try-phone-country { transition: none; }
  .try-phone-pop { transform: none; }
}

/* ---- Try page: reCAPTCHA block (.try-captcha-*). Google's widget is a fixed 304 x 78; the script on the
   page sets --try-captcha-scale when the card is narrower. Hidden without JavaScript (the widget needs it). */
.try-captcha { display: none; margin: 24px 0 0; }
.try-js .try-captcha { display: block; }
.try-captcha-box { width: calc(304px * var(--try-captcha-scale, 1)); height: calc(78px * var(--try-captcha-scale, 1)); max-width: 100%; border-radius: 3px; }
.try-captcha-box:focus { outline: 2px solid var(--secondary-dark); outline-offset: 4px; }
.try-captcha-box[aria-invalid="true"] { outline: 1px solid #A33A2A; outline-offset: 4px; }
.try-captcha-scale { width: 304px; height: 78px; transform-origin: 0 0; transform: scale(var(--try-captcha-scale, 1)); }
.try-captcha-note { margin: 10px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--text-muted); }
.try-captcha-note a { color: var(--secondary-dark); text-decoration: underline; text-underline-offset: 3px; }
.form.try-form .try-captcha ~ .btn { margin-top: 20px; }

/* ---- Try form in steps (.try-progress, .try-steps, .try-nav) and the thank-you (.try-delight-*) ----
   Without JavaScript none of the .is-stepped rules apply: the steps follow each other and one button sends. */
.try-progress { display: flex; align-items: center; gap: 14px; margin: 0 0 22px; }
.try-progress[hidden] { display: none; }
.try-progress-bar { flex: 1; height: 4px; border-radius: var(--radius-pill); background: var(--secondary-pale); overflow: hidden; }
.try-progress-bar span { display: block; width: 14%; height: 100%; border-radius: inherit; background: var(--secondary); transition: width 0.6s var(--ease); }
.try-progress-text { flex: none; margin: 0; font-size: 12.5px; line-height: 1; font-variant-numeric: tabular-nums; color: var(--text-muted); }
.try-form-title-mascot:focus { outline: none; }

.try-form.is-stepped .try-steps { position: relative; margin: 0 -6px; padding: 0 6px; overflow-x: clip; }
@supports not (overflow-x: clip) { .try-form.is-stepped .try-step:not(.is-current) { height: 0; overflow: hidden; } }
.try-form.is-stepped .try-steps.is-moving { overflow: hidden; }
@media (max-width: 520px) { .try-form.is-stepped .try-steps { transition: min-height 0.42s var(--ease); } }
.try-form.is-stepped .try-track { display: flex; align-items: flex-start; transition: transform 0.42s var(--ease); }
.try-form.is-stepped .try-step { flex: 0 0 100%; min-width: 0; visibility: hidden; transition: visibility 0s linear 0.42s; }
.try-form.is-stepped .try-step.is-current { visibility: visible; transition-delay: 0s; }
.try-form.is-stepped .try-steps.is-moving .try-step { visibility: visible; }
.try-form.is-stepped .try-step > .try-field:first-child, .try-form.is-stepped .try-step > .try-row:first-child .try-field { margin-top: 24px; }
.try-form.is-stepped .try-step > .try-row:first-child { margin-top: 0; }

.try-nav { display: block; }
.try-form.is-stepped .try-nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 28px; }
.try-form.is-stepped .try-nav .btn { width: auto; min-width: 168px; margin: 0 0 0 auto; padding: 15px 26px; }
.try-nav .btn[hidden], .try-back[hidden] { display: none; }
.try-back { margin: 0; padding: 10px 4px; border: 0; background: none; font: inherit; font-size: 14.5px; font-weight: 500; color: var(--text-muted); cursor: pointer; border-radius: 6px; transition: color 0.15s var(--ease); }
.try-back:hover { color: var(--primary); }
.try-form.is-stepped .try-legal { margin-top: 12px; text-align: left; }
.try-legal[hidden] { display: none; }

/* Thank-you: the mascot with the Ultra glasses springs in once, a glint crosses the glasses, a few fireflies rise. */
.try-delight .try-progress { margin-bottom: 8px; }
.try-progress-done .try-progress-bar span { width: 100%; animation: try-fill 0.9s var(--ease) both; }
@keyframes try-fill { from { width: 80%; } to { width: 100%; } }
.try-delight-stage { position: relative; width: 164px; height: 164px; margin: 26px 0 16px -10px; }
.try-delight-mascot { display: block; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transform-origin: 50% 85%; animation: try-spring 0.95s cubic-bezier(0.22, 1.2, 0.36, 1) 0.15s both; }
@keyframes try-spring {
  0% { opacity: 0; transform: translateY(34px) scale(0.55) rotate(-9deg); }
  45% { opacity: 1; transform: translateY(-6px) scale(1.07) rotate(3deg); }
  70% { transform: translateY(2px) scale(0.98) rotate(-1deg); }
  100% { opacity: 1; transform: none; }
}
/* A white glint, clipped to the glasses. On the white around them it cannot be seen. */
.try-delight-glint { position: absolute; inset: 0; overflow: hidden; pointer-events: none; clip-path: polygon(8% 41%, 12% 36.5%, 50% 33.5%, 89% 35%, 93.5% 42%, 88% 54%, 78% 60.5%, 62% 61%, 56% 48%, 50% 44%, 44% 48%, 40% 60.5%, 24% 59.5%, 14% 52%); }
.try-delight-glint::before { content: ''; position: absolute; top: 25%; bottom: 30%; left: 0; width: 26%; background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,0.62) 50%, transparent 100%); transform: translateX(-130%) skewX(-18deg); animation: try-glint 1.1s cubic-bezier(0.45, 0, 0.55, 1) 1.05s both; }
@keyframes try-glint { from { transform: translateX(-130%) skewX(-18deg); } to { transform: translateX(520%) skewX(-18deg); } }
.try-delight-fly { position: absolute; left: var(--x, 50%); bottom: var(--y, 20%); width: calc(4px * var(--d, 1)); height: calc(4px * var(--d, 1)); border-radius: 50%; background: #fff; box-shadow: 0 0 calc(5px * var(--d, 1)) calc(1.5px * var(--d, 1)) rgba(236, 205, 110, 1), 0 0 calc(16px * var(--d, 1)) calc(5px * var(--d, 1)) rgba(125, 166, 125, 0.55); opacity: 0; pointer-events: none; animation: try-fly var(--t, 2.2s) cubic-bezier(0.25, 0.46, 0.45, 0.94) var(--w, 0.9s) both; }
.try-delight-fly:nth-of-type(1) { --x: 8%; --y: 18%; --d: 1; --s: -14px; --w: 0.8s; }
.try-delight-fly:nth-of-type(2) { --x: 96%; --y: 30%; --d: 1.3; --s: 18px; --w: 1s; --t: 2.5s; }
.try-delight-fly:nth-of-type(3) { --x: 112%; --y: 8%; --d: 0.8; --s: 10px; --w: 1.25s; }
.try-delight-fly:nth-of-type(4) { --x: 2%; --y: 48%; --d: 0.7; --s: -8px; --w: 1.4s; --t: 2s; }
.try-delight-fly:nth-of-type(5) { --x: 128%; --y: 44%; --d: 1.1; --s: 22px; --w: 1.1s; --t: 2.6s; }
.try-delight-fly:nth-of-type(6) { --x: 78%; --y: 86%; --d: 0.9; --s: 6px; --w: 1.5s; }
@keyframes try-fly {
  0% { opacity: 0; transform: translate(0, 0) scale(0.4); }
  18% { opacity: 1; transform: translate(calc(var(--s, 0px) * 0.3), -14px) scale(1); }
  55% { opacity: 0.9; transform: translate(calc(var(--s, 0px) * 0.7), -46px) scale(1); }
  100% { opacity: 0; transform: translate(var(--s, 0px), -92px) scale(0.55); }
}
.try-delight .try-success-title { font-size: 32px; }
.try-delight > p { text-wrap: pretty; }
@media (max-width: 760px) {
  .try-delight-stage { width: 132px; height: 132px; margin-top: 22px; }
  .try-delight .try-success-title { font-size: 28px; }
  .try-form.is-stepped .try-nav .btn { min-width: 0; flex: 0 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .try-form.is-stepped .try-track, .try-form.is-stepped .try-steps, .try-progress-bar span { transition: none; }
  .try-form.is-stepped .try-step { transition: none; }
  .try-progress-done .try-progress-bar span, .try-delight-mascot { animation: none; }
  .try-delight-glint, .try-delight-fly { display: none; }
}