/* Nunito, served from this site rather than from Google Fonts.
   The privacy statement says the website contacts no third party, and a
   stylesheet link to fonts.googleapis.com would have handed every visitor's IP
   address to Google before a word was read — the one thing on an otherwise
   clean page that needed consent. Latin and Latin Extended only, in the four
   faces the design uses; woff2, with the unicode-ranges Google ships so a
   visitor loads just the subset their text needs.
   Nunito is licensed under the SIL Open Font License 1.1. */
@font-face {
  font-family: 'Nunito';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/nunito-400-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Nunito';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/nunito-400-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/nunito-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/nunito-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/nunito-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/nunito-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('assets/fonts/nunito-800-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('assets/fonts/nunito-800-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --old-lace: #FBF4E8;
  --lotion: #FFFCF7;
  --coffee: #382F2A;
  --verdigris: #4CB1AA;
  --sand: #DED0B7;
  --radius: 16px;
  --radius-s: 8px;
  --lift: 0 8px 16px 0 rgba(56, 47, 42, 0.25);
  --ease: cubic-bezier(0.33, 0, 0.67, 1);
  --measure: 34rem;
  --gutter: 2rem;

  --sp-05: 4px;
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 32px;
  --sp-5: 40px;
  --sp-6: 48px;
  --section-gap: 160px;
  --stack-h1: var(--sp-3);
  --stack-h2: var(--sp-2);
  --stack-h3: var(--sp-1);

  --h1-size: 3rem;     --h1-lh: 3.5rem;
  --h2-size: 2rem;     --h2-lh: 3rem;
  --h3-size: 1.5rem;   --h3-lh: 2rem;
  --body-size: 1rem;   --body-lh: 1.5rem;
  --emph-size: 1.5rem; --emph-lh: 2rem;

  --ground: #FBF4E8;
  --surface: #FFFCF7;
  --ink: #382F2A;
  --line: #DED0B7;
  --link: #4CB1AA;
  --logo-tile: #4CB1AA;
  --logo-glyph: #FFFCF7;
  --blob: #DED0B7;

  --icon-accent: #DED0B7;
}

html[data-daypart="night"] {
  --ground: #241C17;
  --surface: #322822;
  --ink: #FFFCF7;
  --line: #55463B;
  --link: #4CB1AA;
  --logo-tile: #FFFCF7;
  --logo-glyph: #4CB1AA;
  --blob: #3C3128;
  --icon-accent: #FFFCF7;
}

/* The palette fade is carried by the elements that actually DECLARE a daypart
   token — never by `body *`. A universal transition put four transitionable
   properties on all ~2700 nodes, and the price was not paid at the flip alone:
   every style recalculation the sky animations trigger had to walk the whole
   tree, which measured ~410ms of style recalc per 1.2s and ~10 dropped frames
   per flip on a throttled iPhone-sized profile (mean frame 12.1ms against an
   8.3ms ProMotion budget). Scoped, the same fade costs nothing measurable.
   Listing only the declaring elements is enough because `color` INHERITS: a
   <span> inside a fading <p> is handed the parent's animating value every
   frame. The old `.shot`/`.frame`/`.night-sky`/`.day-sky` exclusions are gone
   with it — the inlined artwork is simply never selected now.
   Elements that declare their own `transition` (.lang-pill, .pc-pill,
   .soon-modal) are deliberately absent, exactly as before: their own rule
   replaced the universal one, so their colours have always snapped. */
body,
a,
:focus-visible,
.wordmark,
.wordmark-mark .logo-tile,
.wordmark-mark .logo-glyph,
.lang-toggle,
.lang-btn,
.lede,
.cta-note,
.benefit-copy p,
.privacy-lede,
.promise-timeline li::after,
.promise-tile,
.promise-text p,
.blob path,
.ds-track,
.ds-knob,
.ds-time,
.soon-card,
.soon-close,
.site-footer::before,
.footer-brand,
.footer-links a,
.footer-note,
.legal a:not(.back-link),
.back-link {
  transition: color 0.45s var(--ease), background-color 0.45s var(--ease),
    border-color 0.45s var(--ease), fill 0.45s var(--ease);
}

/* ...and the inlined artwork is cut out of the fade's inheritance walk. Those
   four subtrees hold 930 of the page's 1198 elements and not one of them reads
   `currentColor` — every fill and stroke in Peter's exports is a baked value.
   But `color` inherits, so while body's colour animated they were still
   restyled AND repainted on every frame of the flip, for a value none of them
   uses. Pinning a fixed colour at each root ends the inheritance there:
   measured on the throttled phone profile it took the flip from 18 dropped
   frames to 10 and the mean frame from 12.0ms to 9.8ms. Pin a NON-daypart
   colour, or the pin itself starts animating. */
.shot, .frame, .night-sky, .day-sky { color: var(--coffee); }

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

html, body {
  overflow-x: hidden;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: "Nunito", ui-rounded, "Hiragino Maru Gothic ProN", system-ui, sans-serif;
  font-size: var(--body-size);
  line-height: var(--body-lh);
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--verdigris); color: var(--lotion); }

img { max-width: 100%; display: block; }

h1, h2, h3 { margin: 0; text-wrap: balance; }

p { margin: 0; }

a { color: var(--link); }

:focus-visible {
  outline: 3px solid var(--link);
  outline-offset: 3px;
  border-radius: var(--radius-s);
}

.icon { width: 24px; height: 24px; }
.icon-lg { width: 40px; height: 40px; }

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  max-width: 72rem;
  margin: 0 auto;
  padding: var(--sp-3) var(--gutter);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: 800;
  font-size: var(--h3-size);
  line-height: var(--h3-lh);
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}

.wordmark-mark { width: 48px; height: 48px; flex: none; }

.lang-toggle {
  position: relative;
  display: inline-flex;
  gap: var(--sp-05);
  padding: var(--sp-05);
  border: 2px solid var(--line);
  border-radius: 16px;
}

.lang-btn {
  position: relative;
  z-index: 1;
  border: 0;
  background: transparent;
  font: inherit;
  font-weight: 400;
  font-size: var(--body-size);
  line-height: var(--body-lh);
  color: var(--ink);
  height: 36px;
  min-width: 44px;
  padding: 0 0.75rem;
  border-radius: 10px;
  cursor: pointer;
}

.lang-btn[aria-pressed="true"] { font-weight: 700; }

.lang-pill {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc(50% - 6px);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: var(--lift);
  transition: translate 90ms cubic-bezier(0.65, 0, 0.35, 1);
}

.lang-toggle:has(.lang-btn[data-lang="en"][aria-pressed="true"]) .lang-pill {
  translate: calc(100% + 4px) 0;
}

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

.store-badge {
  display: inline-flex;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.store-badge img {
  height: 56px;
  width: auto;
  display: block;
}

.cta-note {
  font-size: var(--body-size);
  line-height: var(--body-lh);
  font-style: italic;
  color: var(--ink);
}

.hero-usps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-2);
}

.hero-usps li {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-05);
  font-style: italic;
}

.hero-usps .icon { color: var(--verdigris); flex: none; }

.phone {
  margin: 0;
  width: min(300px, 72vw);
  aspect-ratio: 433 / 892;
  position: relative;

  border-radius: 17.552% / 8.52%;
}

.phone-sm { width: min(260px, 66vw); }

.phone-screen {

  position: absolute;
  inset: 2.2422% 4.6189%;
  border-radius: 14.249% / 6.573%;
  overflow: hidden;
  background: var(--old-lace);
}

.phone .frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hero {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: var(--sp-6);
  max-width: 72rem;
  margin: 0 auto;

  padding: var(--sp-6) var(--gutter) 0;
}

.hero-copy { max-width: var(--measure); }

.hero h1 {
  font-size: var(--h1-size);
  font-weight: 800;
  line-height: var(--h1-lh);
  letter-spacing: -0.015em;
}

.lede {
  margin-top: var(--stack-h1);
  font-size: var(--emph-size);
  line-height: var(--emph-lh);
  color: var(--ink);
  max-width: 30rem;
}

.cta-group {
  margin-top: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  align-items: flex-start;
}

.hero-visual {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 480px;
}

.blob {
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

.blob-hero {
  width: 135%;
  max-width: min(620px, 40vw);
  animation: breathe 8s var(--ease) infinite alternate;
}

@keyframes breathe {
  from { transform: scale(1) rotate(-3deg) translate(-6px, 4px); }
  to   { transform: scale(1.09) rotate(3.5deg) translate(8px, -10px); }
}

.hero-visual .phone { position: relative; z-index: 1; rotate: 3deg; }

.benefit {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  align-items: center;
  gap: var(--sp-6);
  max-width: 66rem;
  margin: 0 auto;
  padding: var(--section-gap) var(--gutter) 0;
}

.benefit-flip { direction: rtl; }
.benefit-flip > * { direction: ltr; }

.benefit-visual {
  position: relative;
  display: grid;
  place-items: center;
}

.benefit-visual .blob {
  width: 125%;
  max-width: min(480px, 40vw);
  animation: drift 11s var(--ease) infinite alternate;
}

#together .blob { animation-delay: -4s; }
#calm .blob { animation-delay: -8s; }

@keyframes drift {
  from { transform: rotate(-2.5deg) translate(-8px, 6px) scale(1); }
  to   { transform: rotate(2.5deg) translate(10px, -8px) scale(1.055); }
}

.benefit-visual .phone { position: relative; z-index: 1; }

#one-hand .phone { rotate: -3deg; }
#together .phone { rotate: 2.5deg; }
#calm .phone { rotate: -2deg; }

.benefit-copy { max-width: var(--measure); }

.benefit-icon {

  display: block;
  width: 48px;
  height: 48px;
  margin-bottom: var(--stack-h2);
}

.benefit h2 {
  font-size: var(--h2-size);
  font-weight: 800;
  line-height: var(--h2-lh);
}

.benefit-copy p {
  margin-top: var(--stack-h2);
  font-size: var(--emph-size);
  line-height: var(--emph-lh);
  color: var(--ink);
  max-width: 28rem;
}

.privacy { padding: var(--section-gap) var(--gutter) 0; }

.privacy-split {
  max-width: 72rem;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: start;
  text-align: left;
}

.privacy h2 {
  font-size: var(--h2-size);
  font-weight: 800;
  line-height: var(--h2-lh);
}

.privacy-lede {
  margin: var(--stack-h2) 0 0;
  font-size: var(--emph-size);
  line-height: var(--emph-lh);
  color: var(--ink);
  max-width: 24rem;
}

.promise-timeline {
  --promise-gap: var(--sp-5);
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--promise-gap);
}

.promise-timeline li {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr;
  column-gap: var(--sp-3);
  align-items: start;
}

.promise-timeline li::after {
  content: "";
  position: absolute;
  left: 26px;
  width: 4px;
  border-radius: 999px;
  background: var(--line);
  z-index: -1;
}

.promise-timeline li:first-child::after { top: 28px; bottom: calc(-1 * var(--promise-gap)); }

.promise-timeline li:not(:first-child):not(:last-child)::after { top: calc(-1 * var(--promise-gap)); bottom: calc(-1 * var(--promise-gap)); }

.promise-timeline li:last-child::after { top: calc(-1 * var(--promise-gap)); height: calc(var(--promise-gap) + 28px); }

.promise-tile {
  position: relative;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--surface);
  box-shadow: var(--lift);
  color: var(--verdigris);
}

.promise-tile .icon { width: 24px; height: 24px; }

.promise-text h3 { font-size: var(--h3-size); line-height: var(--h3-lh); font-weight: 700; }

.promise-text p {
  margin-top: var(--stack-h3);
  color: var(--ink);
  font-size: var(--body-size);
  line-height: var(--body-lh);
  max-width: 34rem;
}

.close {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  text-align: center;
  max-width: 60rem;
  margin: 0 auto;
  padding: var(--section-gap) var(--gutter);
}

.blob-close {
  width: min(560px, 86vw);

  top: calc(var(--section-gap) - 56px);
  animation: drift 12s var(--ease) infinite alternate;
  animation-delay: -2s;
}

.close h2 {
  position: relative;
  z-index: 1;
  font-size: var(--h2-size);
  line-height: var(--h2-lh);
  font-weight: 800;
  max-width: 40rem;
}

.close .store-badge, .close .cta-note { position: relative; z-index: 1; }
.close .cta-note { max-width: 26rem; }

.site-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  max-width: 72rem;
  margin: 0 auto;
  padding: var(--sp-5) var(--gutter) var(--sp-6);
  position: relative;
}

.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--gutter);
  right: var(--gutter);
  height: 2px;
  background: var(--line);
}

.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-weight: 700;
  font-size: var(--body-size);
  line-height: var(--body-lh);
}

.footer-brand .wordmark-mark { width: 24px; height: 24px; }

.footer-links { display: inline-flex; gap: var(--sp-2); }

.footer-links a {
  color: var(--link);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--verdigris);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.footer-links a:hover { text-decoration-thickness: 3px; }

.footer-note {
  width: 100%;
  font-size: var(--body-size);
  line-height: var(--body-lh);
  font-style: italic;
  color: var(--ink);
}

.reveal {
  opacity: 0;
  translate: 0 24px;
  transition: opacity 0.6s var(--ease), translate 0.6s var(--ease);
}

.reveal.is-visible { opacity: 1; translate: 0 0; }

@media (max-width: 56rem) {
  :root { --section-gap: 120px; }

  .site-header { padding: var(--sp-2) var(--gutter); }

  .hero {
    grid-template-columns: 1fr;
    gap: 0;
    justify-items: center;
    text-align: center;
  }

  .hero-copy,
  .cta-group { display: contents; }

  .lede { order: 2; margin-inline: auto; }
  .store-badge { order: 3; margin-top: var(--sp-5); }
  .hero-usps { order: 4; margin-top: var(--sp-2); justify-content: center; }
  .hero-visual { order: 5; min-height: 0; margin-top: var(--sp-5); justify-self: stretch; }
  .day-scrub { order: 6; margin-top: var(--sp-5); }

  .benefit, .benefit-flip {
    grid-template-columns: 1fr;
    direction: ltr;
    text-align: center;
    gap: var(--sp-5);
  }

  .benefit-visual { order: 2; }
  .benefit-copy { order: 1; }

  .benefit-copy { margin-inline: auto; }
  .benefit-copy p { margin-inline: auto; }
  .benefit-icon { margin-inline: auto; }

  .privacy-split { grid-template-columns: 1fr; gap: var(--sp-5); }

  .privacy-lede { max-width: 32rem; }

  .blob-hero { max-width: min(86vw, 460px); }
  .benefit-visual .blob { max-width: min(86vw, 400px); }

  .site-footer { flex-direction: column; flex-wrap: nowrap; text-align: center; }
  .footer-links { flex-wrap: wrap; justify-content: center; }
  .footer-note { width: auto; max-width: 100%; }
}

@media (max-width: 40rem) {
  .wordmark span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .blob, .blob-hero { animation: none; }

  .reveal {
    translate: 0 0;
    transition: opacity 0.1s linear;
  }
}

.feed-card {
  position: absolute;
  z-index: 2;
  left: 2%;
  top: 10%;
  rotate: -7deg;
  width: 264px;
  background: var(--lotion);
  border-radius: 20px;
  box-shadow: var(--lift);
  padding: 1.125rem 1.25rem;
  display: flex;
  flex-direction: column;
}

.fc-value {
  font-size: 3rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--coffee);
  text-align: center;
}

.fc-slider {
  position: relative;
  margin-top: 0.5rem;
  height: 56px;
  touch-action: none;
  cursor: grab;
}

.fc-rail, .fc-fill {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  height: 4px;
  border-radius: 2px;
}

.fc-rail { width: 100%; background: var(--sand); }

.fc-fill { background: var(--verdigris); }

.fc-handle {
  position: absolute;
  top: 0;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  background: var(--verdigris);
  color: var(--lotion);
  border-radius: 16px;
  box-shadow: var(--lift);
}

.fc-title {
  margin-top: 0.625rem;
  font-size: 1.375rem;
  font-weight: 800;
  color: var(--sand);
}

.picker-card {
  position: absolute;
  z-index: 2;
  right: 0;
  top: 8%;
  rotate: 2deg;
  width: min(240px, 80vw);
  background: var(--old-lace);
  border-radius: 16px;
  box-shadow: var(--lift);
  padding: 0.875rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.pc-tabs {
  position: relative;
  display: flex;
  padding: 4px;
  border: 2px solid var(--sand);
  border-radius: 12px;
  background: var(--old-lace);
}

.pc-tab {
  position: relative;
  z-index: 1;
  flex: 1;
  border: 0;
  background: transparent;
  font: inherit;
  font-weight: 400;
  font-size: 0.875rem;
  line-height: 20px;
  color: var(--coffee);
  padding: 5px;
  border-radius: 8px;
  cursor: pointer;
}

.pc-tab[aria-pressed="true"] { font-weight: 700; }

.pc-pill {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc(50% - 6px);
  border-radius: 8px;
  background: var(--lotion);
  box-shadow: 0px 6px 6px rgba(56, 47, 42, 0.25);
  transition: translate 90ms cubic-bezier(0.65, 0, 0.35, 1);
}

.pc-tabs:has(.pc-tab[data-tab="time"][aria-pressed="true"]) .pc-pill { translate: calc(100% + 4px) 0; }

.pc-wheels { display: flex; justify-content: center; gap: 18px; }

.pc-col {
  height: 108px;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
  touch-action: pan-y;
}

.pc-col::-webkit-scrollbar { display: none; }

.pc-col.pc-days { text-align: right; }

.pc-item {
  height: 36px;
  line-height: 36px;
  font-size: 1.375rem;
  font-weight: 800;
  color: var(--sand);
  scroll-snap-align: center;
}

.pc-item.active { color: var(--coffee); }

.pc-item.near-above {
  background: linear-gradient(to bottom, rgba(222, 208, 183, 0), var(--sand));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.pc-item.near-below {
  background: linear-gradient(to bottom, var(--sand), rgba(222, 208, 183, 0));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.pc-spacer { height: 36px; }

.pc-colon {
  align-self: center;
  font-size: 1.375rem;
  font-weight: 800;
  color: var(--coffee);
}

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

#together .phone { width: min(215px, 52vw); }

#together .ph-a { rotate: -9deg; translate: -32% -3%; z-index: 1; }

#together .ph-b { position: absolute; rotate: 5deg; translate: 30% 9%; z-index: 2; }

.wordmark-mark .logo-tile { fill: var(--logo-tile); }
.wordmark-mark .logo-glyph { fill: var(--logo-glyph); }
.footer-brand { color: var(--ink); }

/* Was a color-mix over the animated `--night`. `--night` was a REGISTERED,
   INHERITED custom property with a transition on <html>, so animating it
   re-resolved the inherited value for every node in the document on every
   frame of the flip — a whole-tree recalc to move four blob paths. A plain
   daypart token with a fill transition looks identical and touches four
   elements. */
.blob path { fill: var(--blob); }

.benefit-visual .blob path { opacity: 0.55; }

.night-sky {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.45s var(--ease);
  background-image:
    radial-gradient(2px 2px at 8% 12%, rgba(245, 235, 220, 0.9), transparent),
    radial-gradient(1.5px 1.5px at 22% 6%, rgba(245, 235, 220, 0.7), transparent),
    radial-gradient(2px 2px at 37% 15%, rgba(245, 235, 220, 0.8), transparent),
    radial-gradient(1.5px 1.5px at 52% 5%, rgba(245, 235, 220, 0.6), transparent),
    radial-gradient(2.5px 2.5px at 68% 11%, rgba(245, 235, 220, 0.85), transparent),
    radial-gradient(1.5px 1.5px at 81% 7%, rgba(245, 235, 220, 0.7), transparent),
    radial-gradient(2px 2px at 93% 14%, rgba(245, 235, 220, 0.8), transparent),
    radial-gradient(1.5px 1.5px at 15% 32%, rgba(245, 235, 220, 0.5), transparent),
    radial-gradient(2px 2px at 88% 36%, rgba(245, 235, 220, 0.55), transparent),
    radial-gradient(1.5px 1.5px at 45% 44%, rgba(245, 235, 220, 0.4), transparent),
    radial-gradient(2px 2px at 72% 58%, rgba(245, 235, 220, 0.45), transparent),
    radial-gradient(1.5px 1.5px at 10% 66%, rgba(245, 235, 220, 0.4), transparent),
    radial-gradient(2px 2px at 30% 82%, rgba(245, 235, 220, 0.45), transparent),
    radial-gradient(1.5px 1.5px at 60% 90%, rgba(245, 235, 220, 0.4), transparent),
    radial-gradient(2px 2px at 90% 78%, rgba(245, 235, 220, 0.5), transparent);
}

html[data-daypart="night"] .night-sky { opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
  .night-sky.is-star-field { background-image: none; }
}

:root {
  --cloud-body: #FFFCF7;
  --cloud-under: #F2EADE;
  --star: rgba(251, 244, 232, 0.5);
}

.day-sky {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.45s var(--ease);
}

html[data-daypart="night"] .day-sky { opacity: 0.0625; }

.day-sky .cloud {
  position: absolute;
  left: 0;
  max-width: 42vw;
  animation: cloud-cross linear infinite;
}

.day-sky .cloud svg { display: block; width: 100%; height: auto; }

@keyframes cloud-cross {
  from { transform: translateX(-360px); }
  to { transform: translateX(105vw); }
}

.night-sky .star {
  position: absolute;
  translate: -50% -50%;
  border-radius: 50%;

  background: var(--star);
  animation: star-twinkle ease-in-out infinite alternate;
  opacity: var(--peak, 0.8);
}

@keyframes star-twinkle {
  from { opacity: 0.05; }
  to { opacity: var(--peak, 0.8); }
}

@media (prefers-reduced-motion: reduce) {
  .night-sky .star { display: none; }
}

.day-scrub {
  position: relative;
  margin-top: var(--sp-3);
  width: 240px;
  height: 48px;
  cursor: grab;
  touch-action: none;
}

.ds-track {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  width: 100%;
  height: 4px;
  border-radius: 999px;
  background: var(--line);
}

.ds-knob {
  position: absolute;
  top: 0;

  left: calc(55% - 24px);
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: var(--radius);

  background: var(--logo-tile);
  box-shadow: var(--lift);
  color: var(--logo-glyph);
}

.ds-knob svg { width: 22px; height: 22px; }

.ds-knob svg { grid-area: 1 / 1; transition: opacity 0.15s var(--ease); }

.ds-knob .ds-moon { opacity: 0; }
html[data-daypart='night'] .ds-knob .ds-sun { opacity: 0; }
html[data-daypart='night'] .ds-knob .ds-moon { opacity: 1; }

.ds-time {
  position: absolute;

  left: calc(100% + var(--sp-3));
  top: 50%;
  translate: 0 -50%;
  font-size: var(--body-size);
  line-height: var(--body-lh);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

@media (max-width: 56rem) {
  .day-scrub {
    width: min(240px, calc(100vw - 136px));
    translate: -36px 0;
  }
}

.shot { display: block; width: 100%; height: auto; }

html.js .hero-shot:not(.is-live) { visibility: hidden; }

.hero-shot[data-settling] .tl-bind { transition: none !important; }

.tl-bind { transition: transform 0.3s var(--ease), opacity 0.3s var(--ease); }

.tl-hidden { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .tl-bind { transition: opacity 0.1s linear; }
}

.soon-modal {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0;
  padding: var(--sp-4);
  border: 0;
  background: none;
  color: var(--ink);

  align-items: center;
  justify-content: center;

  opacity: 0;
  translate: 0 var(--sp-2);
  transition:
    opacity 250ms var(--ease),
    translate 250ms var(--ease),
    overlay 250ms var(--ease) allow-discrete,
    display 250ms var(--ease) allow-discrete;
}

.soon-modal[open] {
  display: flex;
  opacity: 1;
  translate: 0 0;
}

@starting-style {
  .soon-modal[open] { opacity: 0; translate: 0 var(--sp-2); }
}

.soon-modal::backdrop {
  background: rgba(56, 47, 42, 0.8);
  backdrop-filter: blur(8px);
  opacity: 0;
  transition:
    opacity 250ms var(--ease),
    overlay 250ms var(--ease) allow-discrete,
    display 250ms var(--ease) allow-discrete;
}

.soon-modal[open]::backdrop { opacity: 1; }

@starting-style {
  .soon-modal[open]::backdrop { opacity: 0; }
}

/* showModal() puts initial focus on the dialog itself (it carries autofocus and
   tabindex="-1"), never on a button. Autofocusing "Duidelijk" is the obvious
   thing and it is wrong: WebKit counts that programmatic focus as :focus-visible
   and paints the 3px ring the moment the card appears, so a parent who tapped
   the badge with their thumb is shown a keyboard affordance they did not ask
   for. The ring is for people navigating by key, and it still is — Tab from here
   reaches the close button and the button, both ringed as they should be. The
   card is inside a dialog labelled by its <h2>, so landing there is also what a
   screen reader wants to hear announced.

   The autofocus sits on the card and not on the <dialog>: the focusing steps
   only search DESCENDANTS for it, so a dialog carrying its own autofocus is
   skipped and the first focusable child — the close cross — takes the focus and
   the ring, which is the bug wearing a different hat. */
.soon-card:focus { outline: none; }

.soon-card {
  width: min(329px, 100%);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border-radius: var(--radius);
  background: var(--ground);
  box-shadow: var(--lift);
  text-align: left;
}

.soon-head {
  display: flex;
  gap: var(--sp-2);
  align-items: flex-start;
}

.soon-head h2 {
  flex: 1;
  font-size: var(--h2-size);
  line-height: var(--h2-lh);
  font-weight: 800;
}

.soon-close {
  flex: none;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--lift);
  color: var(--ink);
  cursor: pointer;
}

.soon-note { font-style: italic; }

.soon-ok {
  height: 56px;
  padding: 0 var(--sp-2);
  border: 0;
  border-radius: var(--radius);
  background: var(--verdigris);
  color: var(--lotion);
  font-family: inherit;
  font-size: var(--body-size);
  line-height: var(--body-lh);
  font-weight: 700;
  box-shadow: var(--lift);
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .soon-modal,
  .soon-modal[open] { translate: 0 0; }

  .soon-modal {
    transition:
      opacity 100ms linear,
      overlay 100ms linear allow-discrete,
      display 100ms linear allow-discrete;
  }

  .soon-modal::backdrop {
    transition:
      opacity 100ms linear,
      overlay 100ms linear allow-discrete,
      display 100ms linear allow-discrete;
  }

  @starting-style {
    .soon-modal[open] { translate: 0 0; }
  }
}

.legal {
  max-width: 72rem;
  margin: 0 auto;
  padding: var(--sp-6) var(--gutter) var(--section-gap);

  /* The reading column, as a share of the page rather than a fixed measure.
     Full width below the breakpoint where the front page also collapses to one
     column: three quarters of a phone screen is just a margin nobody asked
     for. Overridden at the bottom of this file. */
  --legal-column: 75%;
}

.legal p,
.legal ul,
.legal h2,
.legal h3 {
  max-width: var(--legal-column);
}

.legal h1 {
  font-size: var(--h1-size);
  line-height: var(--h1-lh);
  font-weight: 800;
  letter-spacing: -0.015em;
  /* "Privacyverklaring" is one 17-character word at 48px: on a phone it does
     not fit and breaks wherever it lands. Hyphenation puts the break on a
     syllable instead, and follows the <html lang> the language toggle sets. */
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: break-word;
}

.legal p {
  margin-top: var(--stack-h1);
  font-size: var(--emph-size);
  line-height: var(--emph-lh);
}

/* Long-form legal document (the privacy statement).
   Same ladder as the front page, rule for rule:
     h1  = .hero h1          h2 = .benefit h2       h3 = .promise-text h3
     lede = .lede            body = .promise-text p
   and the stack tokens keep their meaning — the gap above a paragraph is the
   one belonging to the heading it follows, so a heading stays bound to its own
   first line. The single value not taken from index is the gap ABOVE a section
   heading: --section-gap separates three sections on the front page, and across
   eighteen it would be most of the scroll. */
.legal-doc p,
.legal-doc li {
  font-size: var(--body-size);
  line-height: var(--body-lh);
}

.legal-doc p { margin-top: var(--sp-2); }

.legal-doc h2 {
  margin-top: var(--sp-6);
  font-size: var(--h2-size);
  line-height: var(--h2-lh);
  font-weight: 800;
}

.legal-doc h2 + p { margin-top: var(--stack-h2); }

.legal-doc h3 {
  margin-top: var(--sp-4);
  font-size: var(--h3-size);
  line-height: var(--h3-lh);
  font-weight: 700;
}

.legal-doc h3 + p { margin-top: var(--stack-h3); }

.legal-doc .legal-lede {
  margin-top: var(--stack-h1);
  font-size: var(--emph-size);
  line-height: var(--emph-lh);
}

.legal-doc .legal-updated {
  margin-top: var(--stack-h3);
  opacity: 0.7;
}

.legal-doc ul {
  margin: var(--sp-2) 0 0;
  padding-left: var(--sp-3);
}

.legal-doc li { margin-top: var(--stack-h3); }

.legal-doc .legal-address { line-height: var(--body-lh); }

.legal-doc .legal-version {
  margin-top: var(--sp-4);
  opacity: 0.7;
}

/* Links in the copy carry the same underline as the back link below — same
   colour, weight, thickness and offset, and the same skip-ink: none, so a
   descender never punches a hole in the line. The back link itself is excluded
   because it wears its underline on the inner span, keeping the arrow clear of
   it; an anchor-level underline here would draw a second one straight through
   the icon. */
.legal a:not(.back-link) {
  color: var(--link);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-skip-ink: none;
  text-underline-offset: 4px;
}

.legal a:not(.back-link):hover { text-decoration-thickness: 3px; }

.back-link {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--sp-05);
  margin-top: var(--sp-6);
  color: var(--link);
  font-size: var(--body-size);
  line-height: var(--body-lh);
  font-weight: 700;
  text-decoration: none;
}

.back-link .icon { flex: none; }

.back-link span {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-skip-ink: none;
  text-underline-offset: 4px;
}

.back-link:hover span { text-decoration-thickness: 3px; }

@media (max-width: 56rem) {
  .legal { --legal-column: 100%; }
}