/* Premium layer on top of the original stylesheets.
   Kept separate so every change is easy to see, tune or remove. */

/* ── Less noise ─────────────────────────────────────────────────────────
   Repeated status lines and badges that other sections already say. */
.hero-release-line,            /* "Windows coming soon · Android coming soon" above the hero */
.payload-heading,              /* "One route… / Five ways to start" */
.payload-number,               /* 01–05 on the content rows */
.payload-row > svg,            /* arrows on rows that are not links */
.privacy-status,               /* "No cloud file storage" badge (the headline says it) */
.privacy-eyebrow {             /* "A local transfer, plainly shown" */
  display: none !important;
}

/* The content rows lose their number column, so let the title breathe. */
.payload-row { grid-template-columns: 64px minmax(220px, .8fr) minmax(300px, 1fr); }
@media (max-width: 720px) {
  .payload-row { grid-template-columns: 48px 1fr; }
}

/* ── Calmer motion ──────────────────────────────────────────────────── */
.motion-ready [data-reveal] {
  transition-duration: .9s;
  transition-timing-function: cubic-bezier(.16, 1, .3, 1);
}

/* ── Pacing ─────────────────────────────────────────────────────────────
   The closing launch deck repeated the Windows / Android panel right above
   it (and offered a download while Windows is "coming soon"). */
.footer-launch-deck { display: none !important; }

/* ── Sharper product shots ─────────────────────────────────────────────
   Phones are shown small and slightly tilted; keep the scaled, rotated
   screenshots smooth instead of jagged. */
.phone-showcase figure, .proof-phone, .release-phone, .dl-android-phone figure {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.phone-showcase figure img, .proof-phone img, .release-phone, .dl-android-phone img {
  image-rendering: auto;
  transform: translateZ(0);
}

/* ── No mock dashboards ─────────────────────────────────────────────────
   Boxed "session" diagrams, floating chips and caption bars looked
   generated. Show the real app and plain, calm statements instead. */

/* Privacy: drop the diagram, keep three quiet statements. */
.local-session-head,
.local-session-route { display: none !important; }
.local-session,
.local-session:hover {
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  transform: none;
  overflow: visible;
}
.local-session-points {
  grid-template-columns: 1fr !important;
  border-top: 1px solid rgba(255, 255, 255, .12);
  background: none;
}
.local-session-points article {
  min-height: 0;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 18px;
  padding: 30px 0;
  border-right: 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.local-session-points article > span {
  width: 40px; height: 40px;
  border-color: rgba(50, 226, 173, .3);
}
.local-session-points article > span .icon { width: 18px; }
.local-session-points h3 {
  margin: 2px 0 8px;
  font-family: var(--display);
  font-size: 22px;
  font-weight: 650;
  letter-spacing: -.03em;
}
.local-session-points p { font-size: 15px; line-height: 1.6; color: #a9b8cc; max-width: 46ch; }
html:not([data-theme="dark"]) .local-session-points { border-top-color: rgba(8, 16, 30, .14); }
html:not([data-theme="dark"]) .local-session-points article { border-bottom-color: rgba(8, 16, 30, .14); }
html:not([data-theme="dark"]) .local-session-points h3 { color: var(--text-primary); }
html:not([data-theme="dark"]) .local-session-points p { color: var(--text-secondary); }

/* Home: phones and windows without floating chips or caption bars. */
.phone-callout,
.showcase-radar,
.phone-showcase-head,
.proof-note,
.proof-window figcaption { display: none !important; }

/* Downloads: just the app, no mock "release desk" around it. */
.dl-release-line,
.dl-desk-bar,
.dl-version-stamp,
.dl-route-card,
.dl-desk-facts,
.dl-window-preview figcaption,
.dl-android-device-card,
.dl-android-orbit,
.dl-android-facts { display: none !important; }
.dl-release-desk,
.dl-release-desk:hover {
  border: 0;
  background: none;
  box-shadow: none;
  transform: none;
  overflow: visible;
}
.dl-desk-stage { padding: 0 !important; min-height: 0 !important; background: none !important; }
.dl-window-preview {
  width: 100% !important;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 14px;
  box-shadow: 0 40px 90px rgba(0, 0, 0, .45);
  transform: none !important;
}
.dl-window-preview img { display: block; width: 100%; aspect-ratio: auto; object-fit: contain; }

/* ── Hero: the real apps instead of a mock session card ─────────────── */
.hero-product {
  position: relative;
  margin: 0;
  padding: 0 0 90px 0;
}
.hero-product-window {
  display: block;
  width: 86%;
  height: auto;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 14px;
  box-shadow: 0 46px 110px rgba(0, 0, 0, .5);
  transform: translateY(var(--hero-float, 0px));
}
.hero-product-phone {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 24%;
  height: auto;
  border: 6px solid #0a111d;
  border-radius: 30px;
  box-shadow: 0 40px 90px rgba(0, 0, 0, .55);
  backface-visibility: hidden;
}
/* Hover: the window lifts and leans toward the pointer; the phone, being
   "closer", lifts and drifts a little more. --tilt-x/y come from site.js. */
.hero-product { --tilt-x: 0; --tilt-y: 0; perspective: 1400px; }
.hero-product-window,
.hero-product-phone {
  transition: transform .7s cubic-bezier(.16, 1, .3, 1), box-shadow .7s cubic-bezier(.16, 1, .3, 1);
  will-change: transform;
}
.hero-product:hover .hero-product-window {
  transform:
    translateY(calc(var(--hero-float, 0px) - 8px))
    rotateX(calc(var(--tilt-y) * -3deg))
    rotateY(calc(var(--tilt-x) * 4deg));
  box-shadow: 0 60px 130px rgba(0, 0, 0, .55);
}
.hero-product:hover .hero-product-phone {
  transform:
    translate(calc(var(--tilt-x) * 10px), calc(-16px + var(--tilt-y) * 8px))
    rotate(calc(var(--tilt-x) * -1.5deg));
  box-shadow: 0 56px 110px rgba(0, 0, 0, .6);
}
@media (prefers-reduced-motion: reduce) {
  .hero-product:hover .hero-product-window,
  .hero-product:hover .hero-product-phone { transform: none; }
}
/* Wide screens: no framed card. The whole window fills the column and the
   phone overlaps its lower-left corner, over a faint glow instead of a
   heavy black shadow. */
.hero-product::before {
  content: "";
  position: absolute;
  inset: -12% -20% -6% -10%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(50% 50% at 55% 45%, rgba(50, 226, 173, .1), transparent 70%);
}
/* The reveal animation ends with clip-path: inset(0), which would slice
   off the phone and the window where they leave the figure's box. */
.motion-ready .hero-product[data-reveal].is-visible,
.hero-product { clip-path: none !important; }
@media (min-width: 1240px) {
  .hero-product { padding-bottom: 70px; }
  .hero-product-window {
    width: 100%;
    max-width: none;
    border-radius: 16px;
    border-color: rgba(255, 255, 255, .1);
    box-shadow: 0 30px 80px -24px rgba(0, 0, 0, .6);
  }
  .hero-product:hover .hero-product-window { box-shadow: 0 44px 100px -24px rgba(0, 0, 0, .65); }
  .hero-product-phone { right: auto; left: -7%; width: 25%; }
}
html:not([data-theme="dark"]) .hero-product-window { box-shadow: 0 40px 90px rgba(8, 16, 30, .28); }
html:not([data-theme="dark"]) .hero-product-phone { box-shadow: 0 34px 80px rgba(8, 16, 30, .3); }
html:not([data-theme="dark"]) .hero-product:hover .hero-product-window { box-shadow: 0 54px 120px rgba(8, 16, 30, .32); }
html:not([data-theme="dark"]) .hero-product:hover .hero-product-phone { box-shadow: 0 48px 100px rgba(8, 16, 30, .36); }
@media (max-width: 720px) {
  .hero-product { padding-bottom: 40px; }
  .hero-product-window { width: 100%; }
  .hero-product-phone { width: 27%; right: 0; border-width: 4px; border-radius: 18px; }
}

/* ── Homepage, round 3 ──────────────────────────────────────────────────
   The strip under the hero repeated "The handoff" below it (and counted
   four steps to its three). */
.hero-proof-strip { display: none !important; }

/* File types: one compact row of tiles instead of five full-width rows. */
.payload-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  width: min(1200px, calc(100% - 64px));
  margin: 8px auto 0;
  border-top: 0;
}
.payload-list article,
.payload-list article:hover {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, .025);
}
.payload-list .payload-row {
  width: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 22px;
}
.payload-list .payload-row h3 { font-size: 22px; letter-spacing: -.03em; }
.payload-list .payload-row p { display: block; font-size: 13.5px; line-height: 1.45; }
.payload-list .payload-arrow { display: none; }
@media (max-width: 900px) {
  .payload-list { grid-template-columns: repeat(2, minmax(0, 1fr)); width: calc(100% - 32px); }
}
@media (max-width: 420px) {
  .payload-list { gap: 10px; }
  .payload-list .payload-row { padding: 16px; }
  .payload-list .payload-row h3 { font-size: 19px; }
}

/* Works in the background. */
.always-ready { padding: 140px 0; }
.ready-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 80px;
  align-items: center;
}
.ready-kicker {
  margin: 0 0 18px;
  font-family: var(--mono, monospace);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mint, #32e2ad);
}
.always-ready h2 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(42px, 5vw, 72px);
  font-weight: 700;
  line-height: .95;
  letter-spacing: -.06em;
}
.always-ready h2 span { display: block; color: var(--blue); font-weight: 580; }
.ready-points { list-style: none; margin: 40px 0 0; padding: 0; }
.ready-points li {
  padding: 18px 0;
  border-top: 1px solid var(--line);
  color: #a9b8cc;
  font-size: 15px;
  line-height: 1.6;
}
.ready-points li:last-child { border-bottom: 1px solid var(--line); }
.ready-points b {
  display: block;
  margin-bottom: 4px;
  color: var(--text-primary, #edf3ff);
  font-family: var(--display);
  font-size: 19px;
  letter-spacing: -.02em;
}
.ready-visual { display: grid; gap: 22px; justify-items: center; }
.ready-visual img {
  display: block;
  width: min(100%, 520px);
  height: auto;
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, .5));
}
.ready-visual img:last-child { transform: translateX(28px); }
html:not([data-theme="dark"]) .ready-points li { color: var(--text-secondary); }
@media (max-width: 900px) {
  .always-ready { padding: 90px 0; }
  .ready-grid { grid-template-columns: 1fr; gap: 44px; }
  .ready-visual img:last-child { transform: none; }
}

/* Android panel: a real button to the beta. */
.beta-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 15px 20px;
  border-radius: 12px;
  background: var(--mint, #32e2ad);
  color: #04121f;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease;
}
.beta-cta .icon { width: 18px; }
.beta-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(50, 226, 173, .25); }

/* Android beta page. */
.beta-page { min-height: 70vh; }
.beta-hero { padding: 150px 0 120px; }
.beta-hero .page-shell { max-width: 880px; }
.beta-hero h1 {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(48px, 7vw, 92px);
  font-weight: 700;
  line-height: .92;
  letter-spacing: -.065em;
}
.beta-hero h1 span { display: block; color: var(--blue); font-weight: 580; }
.beta-lead { max-width: 58ch; margin: 28px 0 0; color: #a9b8cc; font-size: 17px; line-height: 1.6; }
.beta-steps { list-style: none; margin: 56px 0 0; padding: 0; }
.beta-step {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 20px;
  padding: 30px 0;
  border-top: 1px solid var(--line);
}
.beta-step:last-child { border-bottom: 1px solid var(--line); }
.beta-step-num { font-family: var(--mono, monospace); font-size: 14px; color: var(--mint, #32e2ad); padding-top: 6px; }
.beta-step h2 { margin: 0 0 8px; font-family: var(--display); font-size: 26px; letter-spacing: -.03em; }
.beta-step p { margin: 0 0 18px; color: #a9b8cc; font-size: 15px; line-height: 1.6; max-width: 56ch; }
.beta-note { margin: 34px 0 0; color: #a9b8cc; font-size: 14px; }
.beta-note a { color: var(--mint, #32e2ad); }
html:not([data-theme="dark"]) .beta-lead,
html:not([data-theme="dark"]) .beta-step p,
html:not([data-theme="dark"]) .beta-note { color: var(--text-secondary); }
@media (max-width: 600px) {
  .beta-hero { padding: 110px 0 80px; }
  .beta-step { grid-template-columns: 40px minmax(0, 1fr); gap: 12px; }
}

/* Downloads: installer checksum under the SmartScreen note. */
.dl-checksum { margin: 14px 0 0; display: grid; gap: 4px; }
.dl-checksum small { font-family: var(--mono, monospace); font-size: 11px; letter-spacing: .12em; color: #a9b8cc; }
.dl-checksum code { font-family: var(--mono, monospace); font-size: 11.5px; line-height: 1.5; word-break: break-all; color: var(--text-primary, #edf3ff); }
html:not([data-theme="dark"]) .dl-checksum small { color: var(--text-secondary); }
.dl-android-copy .beta-cta { margin-top: 26px; }
.cl-next-status a { color: var(--mint, #32e2ad); font-weight: 700; }
/* Longer translations ("Kostenlos", "Gratuit") stay on one line. */
.nav-price { white-space: nowrap; }

/* Links inside FAQ answers. */
.faq-list details p a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Translated pages carry their real lang, so long headline words
   (German, Finnish, Dutch…) can break with a proper hyphen. */
html:not([lang="en"]) :is(h1, h2) { hyphens: auto; }

/* The wordmark never wraps (narrow right-to-left headers squeezed it). */
.brand { white-space: nowrap; }