/* PantrySnap — the continuous world. Page styles on top of scrollcraft.css.
   The engine's classes are the mechanism and are not restyled here; this file
   themes them through tokens and styles the page's own parts: the bar, the
   copy blocks, the receipt slip (the signature move) and the route rail. */

:root {
  /* Deep forest ground, bone ink, one burnt-orange accent: the orman-pop kit
     the app ships, turned to its dark side because the page is film. */
  --sc-canvas:     #13221B;
  --sc-surface:    #1B3A2E;
  --sc-ink:        #F6F1E4;
  --sc-ink-soft:   #D3D9CC;
  --sc-accent:     #B4561B;   /* 4.9:1 under white button text */
  --sc-accent-ink: #FFFFFF;
  --sc-font-display: "Poppins", system-ui, sans-serif;
  --sc-font-text:    "Poppins", system-ui, sans-serif;
  --sc-leading-body: 1.62;

  --ps-paper:  #FAF7EF;
  --ps-paper-ink: #1B3A2E;
  --ps-paper-soft: #55665C;
  --ps-paper-line: #DDD6C4;
  --ps-vers:   #2F6B4E;   /* 6.0:1 on paper */
  --ps-bijna:  #8F530C;   /* 5.6:1 on paper */
  --ps-laatst: #A5342A;   /* 6.3:1 on paper */
  --ps-op:     #55665C;

  --ps-d-fast:  140ms;
  --ps-d-hover: 160ms;
  --ps-d-ui:    260ms;

  --ps-bar-h: 64px;
  --ps-rail-h: 46px;
}

html { background: var(--sc-canvas); scrollbar-gutter: stable; }
/* the landing catch (world.js): the page holds still until the arriving gesture ends */
html.is-holding { overflow: hidden; }
body { background: var(--sc-canvas); color: var(--sc-ink); font-family: var(--sc-font-text);
       -webkit-font-smoothing: antialiased; }

/* ------------------------------------------------------------------ bar -- */
.ps-bar {
  position: fixed; inset: 0 0 auto 0; z-index: 40;
  height: var(--ps-bar-h);
  display: flex; align-items: center; justify-content: space-between;
  padding-inline: var(--sc-gutter);
  background: linear-gradient(to bottom, color-mix(in oklab, var(--sc-canvas) 70%, transparent), transparent);
}
.ps-mark { display: flex; align-items: center; gap: 10px; color: var(--sc-ink); text-decoration: none; }
.ps-mark img { width: 28px; height: auto; }
.ps-mark span { font-weight: 800; font-size: 17px; letter-spacing: -0.02em; }
.ps-bar__right { display: flex; align-items: center; gap: 18px; }
.ps-lang { color: var(--sc-ink); font-size: 14px; font-weight: 600; text-decoration: none;
           padding: 10px 4px; opacity: 0.86; transition: opacity var(--ps-d-hover) var(--sc-ease-out); }
.ps-lang:hover { opacity: 1; }

.ps-cta {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 24px; border-radius: 999px;
  background: var(--sc-accent); color: var(--sc-accent-ink);
  font-weight: 600; font-size: 16px; text-decoration: none; white-space: nowrap;
  box-shadow: 0 6px 18px rgb(8 18 13 / 0.32);
  transition: transform var(--ps-d-fast) var(--sc-ease-out),
              background-color var(--ps-d-hover) var(--sc-ease-out);
}
.ps-cta--sm { min-height: 42px; padding: 0 18px; font-size: 14px; }
@media (hover: hover) and (pointer: fine) { .ps-cta:hover { background: #A04B15; } }
.ps-cta:active { transform: scale(0.97); }
:is(.ps-cta, .ps-lang, .ps-mark, .ps-rail button, .ps-foot a):focus-visible {
  outline: 2px solid #F0B48A; outline-offset: 3px; border-radius: 8px;
}

/* ------------------------------------------------------------- scrim -- */
/* One shape: a column of density down the left, where every block sits. The
   finale adds a soft centre pool, driven by the page as the finale opens. */
.ps-scrim {
  background:
    linear-gradient(to top right,
      color-mix(in oklab, var(--sc-canvas) 94%, transparent) 0%,
      color-mix(in oklab, var(--sc-canvas) 84%, transparent) 30%,
      color-mix(in oklab, var(--sc-canvas) 52%, transparent) 50%,
      transparent 70%),
    linear-gradient(to bottom right,
      color-mix(in oklab, var(--sc-canvas) 82%, transparent) 0%,
      color-mix(in oklab, var(--sc-canvas) 50%, transparent) 28%,
      transparent 48%),
    linear-gradient(90deg,
      color-mix(in oklab, var(--sc-canvas) 46%, transparent) 0%,
      color-mix(in oklab, var(--sc-canvas) 18%, transparent) 34%,
      transparent 52%);
}
.ps-scrim--finale {
  opacity: var(--ps-finale, 0);
  background: radial-gradient(70% 62% at 50% 54%,
    color-mix(in oklab, var(--sc-canvas) 74%, transparent) 0%,
    color-mix(in oklab, var(--sc-canvas) 46%, transparent) 55%,
    transparent 100%);
}

/* ------------------------------------------------------------- copy -- */
.ps-copy {
  position: absolute; z-index: 2;
  left: var(--sc-gutter);
  width: min(34rem, 44vw);
}
.ps-copy--bottom { bottom: calc(var(--ps-rail-h) + clamp(2.5rem, 9vh, 6.5rem)); }
.ps-copy--mid    { top: 50%; translate: 0 -50%; }
.ps-copy--top    { top: calc(var(--ps-bar-h) + clamp(2rem, 8vh, 5rem)); }
.ps-copy--wide   { width: min(44rem, 52vw); }
.ps-copy--centre { left: 50%; top: 50%; translate: -50% -50%; width: min(40rem, 86vw); text-align: center; }

.ps-h1, .ps-h2, .ps-say {
  margin: 0; font-family: var(--sc-font-display); font-weight: 700; color: var(--sc-ink);
  text-wrap: balance; letter-spacing: -0.025em;
  text-shadow: 0 2px 18px rgb(8 18 13 / 0.35);
}
.ps-h1  { font-size: clamp(2.5rem, 1.5rem + 3.6vw, 4.6rem); line-height: 1.02; }
.ps-h2  { font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3.2rem); line-height: 1.06; }
.ps-say { font-size: clamp(2.2rem, 1.4rem + 3vw, 4.2rem); line-height: 1.04; }
.ps-body {
  margin: 18px 0 0; max-width: 40ch;
  font-size: var(--sc-t-lg); line-height: var(--sc-leading-body); font-weight: 500;
  color: var(--sc-ink-soft); text-wrap: pretty; letter-spacing: 0.002em;
  text-shadow: 0 1px 12px rgb(8 18 13 / 0.45);
}
.ps-copy--centre .ps-body { margin-inline: auto; }
.ps-copy .ps-cta { margin-top: 28px; }

.ps-foot { margin: 34px 0 0; font-size: 13px; line-height: 1.7; color: var(--sc-ink-soft); }
.ps-foot a { color: var(--sc-ink); text-underline-offset: 3px; }
.ps-foot + .ps-foot { margin-top: 2px; }

/* ------------------------------------------------- the receipt slip -- */
/* The signature move. Paper, so its contrast never depends on the frame
   underneath. Its state is written by world.js from the scroll position the
   film is also driven by; nothing here animates on a timer. */
.ps-slip {
  position: fixed; z-index: 30;
  right: var(--sc-gutter); top: calc(var(--ps-bar-h) + 7vh);
  width: 300px;
  background: var(--ps-paper); color: var(--ps-paper-ink);
  border-radius: 6px 6px 3px 3px;
  padding: 18px 18px 22px;
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.9) inset, 0 18px 44px rgb(6 14 10 / 0.42), 0 3px 8px rgb(6 14 10 / 0.22);
  opacity: 0; visibility: hidden;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}
/* torn bottom edge */
.ps-slip::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 8px;
  background: linear-gradient(-45deg, transparent 5px, var(--ps-paper) 0) 0 0 / 10px 8px,
              linear-gradient(45deg, transparent 5px, var(--ps-paper) 0) 0 0 / 10px 8px;
}
.ps-slip__head { display: flex; justify-content: space-between; align-items: baseline;
                 padding-bottom: 10px; border-bottom: 1.5px dashed var(--ps-paper-line); }
.ps-slip__title { font-weight: 700; font-size: 15px; letter-spacing: -0.01em; }
.ps-slip__day { font-size: 13px; font-weight: 600; color: var(--ps-paper-soft); }
.ps-slip__note {
  margin: 10px 0 0; padding: 9px 11px; border-radius: 6px;
  background: #F6E3D3; color: #6E2F0B; font-size: 13px; line-height: 1.4; font-weight: 600;
  display: none;
}
.ps-slip.has-note .ps-slip__note { display: block; }
.ps-slip__rows { list-style: none; margin: 8px 0 0; padding: 0; position: relative; }
.ps-row { display: flex; align-items: center; justify-content: space-between; gap: 10px;
          min-height: 36px; border-bottom: 1px solid var(--ps-paper-line); font-size: 14px; }
.ps-row:last-child { border-bottom: 0; }
.ps-row__name { font-weight: 600; }
.ps-row__raw { display: none; font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
               font-size: 12.5px; letter-spacing: 0.04em; color: var(--ps-paper-soft); }
.ps-row.is-raw .ps-row__raw { display: block; }
.ps-row.is-raw .ps-row__name, .ps-row.is-raw .ps-badge { display: none; }
.ps-row.is-done .ps-row__name { text-decoration: line-through; text-decoration-thickness: 1.5px; color: var(--ps-paper-soft); }

.ps-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600;
            white-space: nowrap; }
.ps-badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.ps-badge[data-k="vers"]   { color: var(--ps-vers); }
.ps-badge[data-k="bijna"]  { color: var(--ps-bijna); }
.ps-badge[data-k="bijna"]::before  { border-radius: 2px; }
.ps-badge[data-k="laatst"] { color: var(--ps-laatst); }
.ps-badge[data-k="laatst"]::before { border-radius: 0; clip-path: polygon(50% 0, 100% 100%, 0 100%); width: 10px; }
.ps-badge[data-k="op"]     { color: var(--ps-op); }
.ps-badge[data-k="op"]::before { background: none; border: 1.5px solid currentColor; width: 6px; height: 6px; }

.ps-slip__scan {
  position: absolute; left: -18px; right: -18px; top: 0; height: 2px;
  background: var(--sc-accent);
  box-shadow: 0 0 0 1px rgb(180 86 27 / 0.18), 0 6px 14px rgb(180 86 27 / 0.28);
  opacity: 0;
}
.ps-slip__foot { margin: 12px 0 0; padding-top: 10px; border-top: 1.5px dashed var(--ps-paper-line);
                 display: none; justify-content: space-between; font-size: 13.5px; font-weight: 600; }
.ps-slip.has-foot .ps-slip__foot { display: flex; }
.ps-slip__foot b { color: var(--ps-vers); }
.ps-slip__sample { margin: 10px 0 0; font-size: 11.5px; color: var(--ps-paper-soft); }

/* ------------------------------------------------------- route rail -- */
.ps-rail {
  position: fixed; z-index: 35; left: var(--sc-gutter); right: var(--sc-gutter); bottom: 14px;
  height: var(--ps-rail-h);
}
.ps-rail ol { list-style: none; margin: 0; padding: 0; height: 100%;
              display: grid; grid-template-columns: repeat(7, 1fr); align-items: end; }
.ps-rail li { position: relative; }
/* the printed dotted line the route runs along */
.ps-rail ol::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 30px; height: 0;
  border-top: 1.5px dotted color-mix(in oklab, var(--sc-ink) 45%, transparent);
}
.ps-rail__fill {
  position: absolute; left: 0; right: 0; bottom: 29px; height: 3px; border-radius: 2px;
  background: var(--sc-accent); transform-origin: 0 50%; transform: scaleX(var(--ps-route, 0));
}
.ps-rail button {
  all: unset; cursor: pointer; display: block; width: 100%;
  padding: 22px 6px 2px 0; position: relative;
  font-size: 13px; font-weight: 500; color: color-mix(in oklab, var(--sc-ink) 80%, transparent);
  text-shadow: 0 1px 8px rgb(8 18 13 / 0.6);
  transition: color var(--ps-d-hover) var(--sc-ease-out);
}
.ps-rail button::before {
  content: ""; position: absolute; left: 0; top: 12px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--sc-canvas); border: 1.5px solid color-mix(in oklab, var(--sc-ink) 70%, transparent);
}
.ps-rail button[aria-current="step"] { color: var(--sc-ink); font-weight: 700; }
.ps-rail button[aria-current="step"]::before { background: var(--sc-accent); border-color: var(--sc-accent); }
.ps-rail button.is-past::before { background: color-mix(in oklab, var(--sc-ink) 70%, transparent); }
@media (hover: hover) and (pointer: fine) { .ps-rail button:hover { color: var(--sc-ink); } }

/* The consent banner is shared with the light site and reads its tokens; on
   this dark page it would render dark on dark. Paper, like the slip, parked
   bottom-right so it never covers the copy column or the route. */
body .ps-consent {
  left: auto; right: var(--sc-gutter); bottom: calc(var(--ps-rail-h) + 28px); margin: 0;
  max-width: 26rem; background: var(--ps-paper); color: var(--ps-paper-ink);
  border-color: var(--ps-paper-line); box-shadow: 0 18px 44px rgb(6 14 10 / 0.42);
  font-size: 0.875rem;
}
body .ps-consent a { color: var(--ps-vers); }
body .ps-consent button { color: var(--ps-paper-ink); border-color: var(--ps-paper-ink); }

.ps-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ----------------------------------------------------------- mobile -- */
@media (max-width: 860px) {
  :root { --ps-bar-h: 58px; --ps-rail-h: 0px; }
  .ps-mark span { font-size: 16px; }
  .ps-lang { font-size: 13px; }
  .ps-bar__right { gap: 10px; }
  .ps-cta--sm { min-height: 40px; padding: 0 14px; font-size: 13px; }

  .ps-scrim {
    background: linear-gradient(to top,
      color-mix(in oklab, var(--sc-canvas) 92%, transparent) 0%,
      color-mix(in oklab, var(--sc-canvas) 74%, transparent) 28%,
      color-mix(in oklab, var(--sc-canvas) 30%, transparent) 50%,
      transparent 64%);
  }
  .ps-copy, .ps-copy--wide { left: var(--sc-gutter); right: var(--sc-gutter); width: auto; }
  .ps-copy--top, .ps-copy--mid, .ps-copy--bottom { top: auto; translate: none; bottom: max(28px, 5svh); }
  .ps-copy--centre { left: var(--sc-gutter); right: var(--sc-gutter); top: auto; bottom: max(28px, 5svh);
                     translate: none; width: auto; text-align: left; }
  .ps-copy--centre .ps-body { margin-inline: 0; }
  .ps-h1 { font-size: clamp(2.1rem, 1.4rem + 4.4vw, 2.8rem); }
  .ps-h2 { font-size: clamp(1.7rem, 1.2rem + 3.6vw, 2.2rem); }
  .ps-say { font-size: clamp(1.9rem, 1.3rem + 4vw, 2.5rem); }
  .ps-body { font-size: 1.05rem; margin-top: 12px; }

  /* The slip folds into a strip under the bar: rows in two columns. */
  .ps-slip { top: calc(var(--ps-bar-h) + 6px); right: var(--sc-gutter); left: var(--sc-gutter);
             width: auto; translate: none; padding: 12px 14px 14px; }
  .ps-slip__rows { margin-top: 4px; }
  .ps-row { min-height: 25px; font-size: 12.5px; border-bottom: 0; }
  .ps-badge { font-size: 11.5px; gap: 4px; }
  .ps-slip__sample { display: none; }
  .ps-slip__note { font-size: 12px; padding: 7px 9px; }
  .ps-slip__foot { font-size: 12.5px; }

  .ps-rail { display: none; }
  /* Top, under the bar: the copy owns the bottom of a phone screen. */
  body .ps-consent { left: var(--sc-gutter); right: var(--sc-gutter); top: calc(var(--ps-bar-h) + 6px); bottom: auto;
                     max-width: none; padding: 14px 16px; font-size: 0.8rem; line-height: 1.45; }
  body .ps-consent p { margin-bottom: 10px; }
  body .ps-consent button { min-height: 44px; font-size: 0.85rem; }
  .ps-scrim--finale {
    background: linear-gradient(to top,
      color-mix(in oklab, var(--sc-canvas) 90%, transparent) 0%,
      color-mix(in oklab, var(--sc-canvas) 62%, transparent) 40%,
      transparent 70%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ps-slip__scan { display: none; }
}

/* ============================================================ the product ==
   After the flight the page turns into a product page: a sheet of receipt
   paper rises over the last frame of the film. It is the only content in
   document flow besides the spacer, so its top edge is drawn as a torn paper
   edge on purpose; the film behind it has already come to rest on the table. */
.ps-paper {
  --ink: #1B3A2E; --ink-soft: #4E6156; --line: #DDD6C4; --pine: #2C5241;
  position: relative; z-index: 32;
  background: var(--ps-paper); color: var(--ink);
  font-family: var(--sc-font-text);
  box-shadow: 0 -24px 60px rgb(6 14 10 / 0.35);
}
.ps-paper::before {
  content: ""; position: absolute; left: 0; right: 0; top: -9px; height: 10px;
  background: linear-gradient(-45deg, var(--ps-paper) 6px, transparent 0) 0 0 / 14px 10px,
              linear-gradient(45deg, var(--ps-paper) 6px, transparent 0) 0 0 / 14px 10px;
}
.ps-paper a { color: var(--pine); text-underline-offset: 3px; }
.ps-paper .ps-cta { color: #fff; }
.ps-wrap { max-width: 1120px; margin-inline: auto; padding-inline: var(--sc-gutter); }
.ps-paper section { padding-block: clamp(4.5rem, 10vw, 8rem) 0; scroll-margin-top: var(--ps-bar-h); }
.ps-ph2 {
  margin: 0 0 clamp(2rem, 4vw, 3rem); font-weight: 700; letter-spacing: -0.025em; line-height: 1.06;
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.4rem); text-wrap: balance; color: var(--ink);
}
.ps-paper h3 { margin: 0 0 8px; font-size: 1.25rem; line-height: 1.25; letter-spacing: -0.015em; font-weight: 700; }
.ps-paper p { margin: 0; line-height: 1.62; color: var(--ink-soft); text-wrap: pretty; }

/* a phone: a real screenshot in a drawn body, nothing painted on top */
.ps-phone {
  margin: 0; position: relative; aspect-ratio: 600 / 1234; width: 100%;
  border-radius: 34px; padding: 9px; background: #16231D;
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.12) inset, 0 24px 48px rgb(27 58 46 / 0.22), 0 6px 14px rgb(27 58 46 / 0.14);
}
.ps-phone img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 26px;
                 background: linear-gradient(#2C5241 0 9%, #F3F1EA 9%); }  /* the app's bar and ground until the screenshot arrives */

/* -- how it works: the phone holds still while the steps pass it -------- */
.ps-how__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: clamp(2rem, 6vw, 6rem); }
.ps-how__steps { list-style: none; margin: 0; padding: 0; }
.ps-how__step { min-height: 62vh; padding-block: 4vh 6vh; max-width: 30rem;
                opacity: 0.38; transition: opacity var(--ps-d-ui) var(--sc-ease-out); }
.ps-how__step.is-on { opacity: 1; }
.ps-how__step:last-child { min-height: 52vh; }
.ps-how__n {
  display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; margin-bottom: 18px;
  background: var(--sc-accent); color: #fff; font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums;
}
.ps-how__step h3 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.ps-how__step p { font-size: 1.08rem; }
.ps-phone--inline { display: none; }
.ps-how__stage { position: relative; }
.ps-phone--stack { position: sticky; top: calc(var(--ps-bar-h) + 6vh); }
.ps-phone--stack { background-clip: padding-box; }
.ps-phone--stack img { position: absolute; inset: 9px; width: calc(100% - 18px); height: calc(100% - 18px);
                       opacity: 0; transition: opacity var(--ps-d-ui) var(--sc-ease-out); }
.ps-phone--stack img.is-on { opacity: 1; }

/* -- features: one large, two smaller, never three equal ----------------- */
.ps-feats__grid { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; }
.ps-feat { display: grid; gap: 22px; }
.ps-feat .ps-phone { max-width: 280px; }
.ps-feat--0 { background: #EFE8D7; border-radius: 22px; padding: clamp(22px, 3vw, 36px); }
.ps-feat--0 .ps-phone { max-width: 300px; }
.ps-feat--1 { margin-top: 8vh; }
.ps-facts { list-style: none; margin: clamp(2.5rem, 5vw, 4rem) 0 0; padding: 22px 0 0; border-top: 1.5px dashed var(--line);
            display: flex; flex-wrap: wrap; gap: 12px 34px; font-weight: 600; font-size: 1rem; }
.ps-facts li::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 10px; border-radius: 50%;
                       background: var(--ps-vers); vertical-align: 2px; }

/* -- prices --------------------------------------------------------------- */
.ps-plans { display: grid; grid-template-columns: 1fr 1.12fr 1fr; gap: 18px; align-items: stretch; }
.ps-plan { border: 1.5px solid var(--line); border-radius: 20px; padding: 28px 26px 30px; background: #fff; }
.ps-plan--hot { background: var(--pine); border-color: var(--pine); color: #F6F1E4; transform: translateY(-10px);
                box-shadow: 0 22px 44px rgb(27 58 46 / 0.24); }
.ps-plan--hot h3, .ps-plan--hot .ps-plan__price b { color: #fff; }
.ps-paper .ps-plan__price { margin: 6px 0 20px; padding-bottom: 18px; border-bottom: 1.5px dashed var(--line); }
.ps-plan--hot .ps-plan__price { border-color: rgb(255 255 255 / 0.25); }
.ps-plan__price b { font-size: 2.4rem; letter-spacing: -0.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.ps-plan__price span { display: block; font-size: 0.95rem; color: var(--ink-soft); }
.ps-plan--hot .ps-plan__price span, .ps-plan--hot li { color: #DCE5DA; }
.ps-plan ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 0.98rem; color: var(--ink-soft); }
.ps-plan li { padding-left: 24px; position: relative; line-height: 1.5; }
.ps-plan li::before { content: ""; position: absolute; left: 2px; top: 0.42em; width: 10px; height: 6px;
                      border-left: 2px solid var(--ps-vers); border-bottom: 2px solid var(--ps-vers); transform: rotate(-45deg); }
.ps-plan--hot li::before { border-color: #A2D0B4; }
.ps-paper .ps-small { margin-top: 26px; font-size: 0.92rem; max-width: 62ch; }

/* -- coming soon ------------------------------------------------------------ */
.ps-soon__inner { background: var(--pine); color: #F6F1E4; border-radius: 26px; padding: clamp(32px, 5vw, 64px);
                  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 32px; align-items: center; }
.ps-soon .ps-ph2 { color: #fff; margin-bottom: 14px; }
.ps-paper .ps-soon p { color: #DCE5DA; font-size: 1.1rem; margin-bottom: 26px; }
.ps-stores { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ps-stores li { display: flex; justify-content: space-between; align-items: center; gap: 12px;
                border: 1.5px solid rgb(255 255 255 / 0.28); border-radius: 14px; padding: 16px 20px; }
.ps-stores span { font-weight: 700; font-size: 1.1rem; color: #fff; }
.ps-stores em { font-style: normal; font-size: 0.85rem; font-weight: 600; color: #F0B48A; }

/* -- questions ------------------------------------------------------------ */
.ps-qs__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: clamp(1.5rem, 5vw, 5rem); }
.ps-qs details { border-bottom: 1.5px dashed var(--line); padding: 18px 0; }
.ps-qs summary { cursor: pointer; font-weight: 600; font-size: 1.08rem; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.ps-qs summary::-webkit-details-marker { display: none; }
.ps-qs summary::after { content: "+"; color: var(--sc-accent); font-weight: 700; font-size: 1.3rem; line-height: 1; }
.ps-qs details[open] summary::after { content: "\2013"; }
.ps-paper .ps-qs details p { margin-top: 10px; }
.ps-more { display: inline-block; margin-top: 22px; font-weight: 600; }

.ps-footer { margin-top: clamp(4.5rem, 10vw, 8rem); padding-block: 28px 36px; border-top: 1.5px dashed var(--line); }
.ps-paper .ps-footer p { font-size: 13px; line-height: 1.8; }

/* -- the bar and the flight chrome once the paper is up ------------------- */
.ps-nav { display: flex; gap: 26px; margin-left: auto; margin-right: 26px; }
.ps-nav a { color: var(--sc-ink); text-decoration: none; font-size: 14px; font-weight: 500; padding: 10px 0; opacity: 0.86;
            text-shadow: 0 1px 8px rgb(8 18 13 / 0.5);
            transition: opacity var(--ps-d-hover) var(--sc-ease-out), color var(--ps-d-hover) var(--sc-ease-out); }
.ps-nav a:hover { opacity: 1; }
.ps-nav a:focus-visible { outline: 2px solid #F0B48A; outline-offset: 3px; border-radius: 6px; }
.ps-mark__dark { display: none; }
.ps-bar { transition: background-color var(--ps-d-ui) var(--sc-ease-out); }
html.is-paper .ps-bar { background: color-mix(in oklab, var(--ps-paper) 94%, transparent); box-shadow: 0 1px 0 #DDD6C4; }
html.is-paper .ps-mark, html.is-paper .ps-nav a, html.is-paper .ps-lang { color: #1B3A2E; text-shadow: none; }
html.is-paper .ps-mark__light { display: none; }
html.is-paper .ps-mark__dark { display: block; }
.ps-rail { transition: opacity var(--ps-d-ui) var(--sc-ease-out); }
html.is-landed .ps-rail { opacity: 0; pointer-events: none; }

@media (max-width: 1000px) {
  .ps-nav { display: none; }
}
@media (max-width: 860px) {
  .ps-how__grid { grid-template-columns: 1fr; }
  .ps-how__stage { display: none; }
  .ps-how__step { min-height: 0; opacity: 1; padding-block: 0 3.5rem; }
  .ps-phone--inline { display: block; max-width: 250px; margin-top: 26px; }
  .ps-feats__grid { grid-template-columns: 1fr; }
  .ps-feat--1 { margin-top: 0; }
  .ps-feat { grid-template-columns: 120px minmax(0, 1fr); align-items: center; }
  .ps-feat--0 { grid-template-columns: 1fr; }
  .ps-feat--0 .ps-phone { max-width: 240px; }
  .ps-feat .ps-phone { border-radius: 20px; padding: 5px; }
  .ps-feat .ps-phone img { border-radius: 16px; }
  .ps-plans { grid-template-columns: 1fr; }
  .ps-plan--hot { transform: none; }
  .ps-soon__inner, .ps-qs__inner { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .ps-how__step, .ps-phone--stack img { transition: none; }
}