/* Dotnote page: the scroll journey (3D) and its still version. */

.page-dotnote { --app-gold: #fbc93a; }

/* ---------- journey: shared ---------- */
.journey { position: relative; }
.j-steps { list-style: none; position: relative; z-index: 1; }
.j-step { position: relative; }
.j-row { display: flex; align-items: center; gap: clamp(24px, 5vw, 72px); }
.j-card {
  position: relative; width: min(440px, 100%); padding: 28px 30px 30px; border-radius: 24px; flex: none;
  background: var(--glass); border: 1px solid var(--glass-edge); box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%);
}
.j-card::before {
  content: ""; position: absolute; left: 30px; right: 30px; top: -1px; height: 2px; border-radius: 2px; background: var(--neon); opacity: .9;
}
.j-k { font-size: 13px; font-weight: 750; letter-spacing: .16em; color: var(--ink-2); }
.j-k i { font-style: normal; color: var(--muted); font-weight: 600; }
.j-card h2 { margin-top: 12px; font: 600 clamp(30px, 3.4vw, 42px)/1.06 var(--display); letter-spacing: -.02em; }
.j-card p:not(.j-k) { margin-top: 14px; color: var(--ink-2); font-size: 17px; line-height: 1.55; }

.j-card-intro { width: min(520px, 100%); padding: 34px 34px 30px; }
.j-card-intro::before { display: none; }
.dn-icon { width: 84px; height: 84px; border-radius: 21px; box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .6); }
.dn-title { margin-top: 22px; font: 600 clamp(58px, 7.4vw, 96px)/.92 var(--display); letter-spacing: -.035em; display: flex; align-items: flex-end; }
.dn-dot {
  width: .2em; height: .2em; border-radius: 50%; margin: 0 0 .08em .06em; flex: none;
  background: radial-gradient(circle at 30% 30%, #b9e8ff, #6fd2ff 35%, #9c9bff 65%, #ff8fa6);
  box-shadow: 0 0 18px rgba(111, 210, 255, .6), 0 0 32px rgba(255, 143, 166, .35);
}
.dn-tag { margin-top: 14px; font: 600 clamp(20px, 2vw, 25px)/1.25 var(--display); color: var(--ink); letter-spacing: -.01em; }
.j-card .dn-lead { margin-top: 14px; }
/* the last stop: the ways in, and the small print */
.j-end { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 10px; }
.j-card p.j-legal, .get-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 14px; color: var(--muted); }
.j-card p.j-legal { margin-top: 16px; }
.j-legal a, .get-legal a { color: var(--muted); text-decoration: underline; text-decoration-color: var(--line-2); }
.j-legal a:hover, .get-legal a:hover { color: var(--ink); text-decoration-color: currentColor; }
.get-legal { margin-top: 28px; justify-content: center; }
.dn-cta { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 10px; }
.j-card p.j-hint { margin-top: 22px; display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 14.5px; font-weight: 600; }
.j-hint-line { width: 2px; height: 26px; border-radius: 2px; background: var(--neon); position: relative; overflow: hidden; flex: none; }
@media (prefers-reduced-motion: no-preference) {
  .j-hint-line::after { content: ""; position: absolute; left: 0; right: 0; height: 40%; background: var(--bg); animation: hint 1.6s var(--ease) infinite; }
}
@keyframes hint { from { top: -40%; } to { top: 100%; } }

.j-fig { margin: 0; flex: 1 1 auto; min-width: 0; }
.j-fig img {
  width: 100%; height: auto; border-radius: 14px; background: #101216;
  box-shadow: 0 0 0 1px var(--line), 0 40px 80px -40px rgba(0, 0, 0, .6);
}
.j-fig-wide img { aspect-ratio: 16 / 9; }
.j-fig-phone { flex: 0 1 300px; margin-inline: auto; }
.j-fig-phone img { aspect-ratio: 540 / 830; border-radius: 22px; }

/* ring menu (still version) */
.j-fig-ring { display: grid; place-items: center; min-height: 380px; }
.ring-demo { position: relative; width: 330px; height: 330px; }
.ring-hub { position: absolute; left: 50%; top: 50%; width: 92px; height: 92px; margin: -46px 0 0 -46px; border-radius: 50%; overflow: hidden; box-shadow: 0 12px 30px -8px rgba(0, 0, 0, .5); }
.ring-hub img { width: 100%; height: 100%; }
.ring-item {
  --r: 128px; position: absolute; left: 50%; top: 50%; width: 0; height: 0;
  transform: rotate(var(--a)) translateX(var(--r)) rotate(calc(-1 * var(--a)));
}
.ring-item b {
  position: absolute; left: -31px; top: -31px; width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center;
  background: #fff; color: #1d1f24; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .5);
}
.ring-item b svg { width: 26px; height: 26px; }
.ring-item em { position: absolute; top: 36px; left: 50%; translate: -50% 0; white-space: nowrap; font-style: normal; font-size: 13px; font-weight: 650; color: var(--ink-2); }
.ring-item:first-of-type b { background: var(--app-gold); }
.ring-item.a0 { --a: -90deg; } .ring-item.a1 { --a: -30deg; } .ring-item.a2 { --a: 30deg; }
.ring-item.a3 { --a: 90deg; } .ring-item.a4 { --a: 150deg; } .ring-item.a5 { --a: 210deg; }

/* export (still version) */
.j-fig-files { display: flex; gap: 18px; justify-content: center; align-items: flex-end; min-height: 320px; perspective: 900px; }
.file-tok {
  width: 120px; height: 150px; border-radius: 18px; display: grid; place-items: end center; padding-bottom: 18px; position: relative;
  background: var(--glass-2); border: 1px solid var(--line-2); box-shadow: var(--glass-shadow); font: 700 18px/1 var(--sans);
}
.file-tok::before { content: ""; position: absolute; left: 30px; right: 30px; top: 26px; height: 64px; border-radius: 6px; background: currentColor; opacity: .9; }
.tok-pdf { color: #e5484d; transform: rotateY(14deg) translateY(10px); }
.tok-doc { color: #2f6fe4; transform: translateY(-14px); }
.tok-elif { color: #9c9bff; transform: rotateY(-14deg) translateY(10px); }
.tok-elif::before { background: var(--neon); }
.file-tok b { color: var(--ink); }

/* ---------- 3D journey mode ---------- */
.j-stage { display: none; }
.j3d .j-stage {
  display: block; position: sticky; top: 0; height: 100vh; overflow: hidden; z-index: 0;
  background: var(--bg-hero);
}
.j3d .j-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .9s var(--ease); }
.j3d .journey.is-live .j-stage canvas { opacity: 1; }
.j-poster { position: absolute; inset: 0; display: grid; place-items: center end; padding-right: 6vw; perspective: 1400px; transition: opacity .9s var(--ease); }
.j3d .journey.is-live .j-poster { opacity: 0; }
.j-poster-device {
  width: min(58vw, 860px); padding: 12px; border-radius: 26px; background: linear-gradient(160deg, #2a2c34, #121318 60%, #0c0d10);
  transform: rotateY(-22deg) rotateX(6deg); box-shadow: 0 60px 120px -50px rgba(0, 0, 0, .8); position: relative;
}
.j-poster-device::before {
  content: ""; position: absolute; inset: -1px; border-radius: 27px; padding: 1.5px; background: var(--neon); opacity: .7;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
}
.j-poster-device img { width: 100%; height: auto; border-radius: 14px; aspect-ratio: 16 / 9; }
.j-progress { position: absolute; left: 0; right: 0; top: var(--header-h); height: 2px; background: transparent; z-index: 2; }
.j-progress span { display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: var(--neon); }

/* the stops, as dots on the right edge (3D journey only) */
.j-dots { display: none; }
.j3d .j-dots { display: block; position: sticky; top: 50vh; height: 0; z-index: 3; pointer-events: none; }
.j3d .j-dots ol {
  list-style: none; position: absolute; right: 14px; top: 0; transform: translateY(-50%); display: grid; gap: 2px; pointer-events: auto;
  /* a pill of its own: over a dotted or lined page the stops still read as controls */
  margin: 0; padding: 5px 0; border-radius: 999px; background: var(--glass-2); border: 1px solid var(--line);
  box-shadow: 0 6px 18px -10px rgba(0, 0, 0, .35); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.j-dots a { position: relative; display: block; width: 30px; height: 30px; border-radius: 50%; color: var(--ink); }
.j-dots a::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%;
  background: var(--line-2); transition: transform .35s var(--ease), background-color .35s;
}
.j-dots a:hover::before { background: var(--muted); }
.j-dots a[aria-current="step"]::before { background: linear-gradient(135deg, #6fd2ff, #9c9bff 55%, #ff9a6a); transform: scale(1.55); box-shadow: 0 0 12px rgba(111, 210, 255, .45); }
.j-dots a > span {
  position: absolute; right: 36px; top: 50%; translate: 0 -50%; white-space: nowrap; font-size: 13px; font-weight: 650;
  padding: 5px 11px; border-radius: 999px; background: var(--glass-2); border: 1px solid var(--line); box-shadow: var(--glass-shadow);
  opacity: 0; transform: translateX(6px); transition: opacity .2s, transform .2s; pointer-events: none;
}
.j-dots a:hover > span, .j-dots a:focus-visible > span { opacity: 1; transform: none; }
.j-dots a:focus-visible { outline-offset: 0; }
.j3d .j-dots ol { transition: opacity .35s var(--ease); }
.j3d .j-dots.is-done ol { opacity: 0; pointer-events: none; }

/* The app around the scene once the camera is inside it: a top bar with the
   note's title and a tool rail, ghosted, beside the captions (journey3d.js
   places it in the free space and fades it with the flight in and out). */
.j-app { display: none; }
/* without the live scene (poster, lost GPU context) the app frame goes too */
.j3d .journey:not(.is-live) .j-app { opacity: 0 !important; }
.j3d .j-app {
  display: block; position: absolute; inset: 0; pointer-events: none; opacity: 0; z-index: 1;
  --j-left: 0px; --j-right: 64px; color: #1d1f24;
}
.j-app-bar {
  position: absolute; left: var(--j-left); right: var(--j-right); top: calc(var(--header-h) + 12px); height: 44px;
  display: flex; align-items: center; gap: 14px; font: 700 18px/1 var(--sans); letter-spacing: -.005em;
  /* a bar of its own, as in the app: pages pass under it, not through its title */
  padding: 0 12px 0 10px; border-radius: 14px; background: #ffffff;
  box-shadow: 0 1px 3px rgba(20, 24, 33, .1), 0 8px 24px -16px rgba(20, 24, 33, .3);
}
.j-app-bar svg, .j-app-rail svg { width: 22px; height: 22px; flex: none; }
/* the bars are solid (journey3d.js fades the whole frame); their content is
   a ghost of the app's, so the scene stays the subject */
.j-app-bar > *, .j-app-rail > * { opacity: .66; }
.j-app-bar > b { opacity: .8; }
.j-app-bar b { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.j-app-icons { margin-left: auto; display: flex; align-items: center; gap: 18px; flex: none; }
.j-app-icons i { font-style: normal; font-size: 13.5px; font-weight: 750; padding: 7px 11px; border-radius: 999px; border: 1px solid rgba(29, 31, 36, .14); }
.j-app-rail {
  position: absolute; left: var(--j-left); top: calc(var(--header-h) + 72px); width: 46px; padding: 12px 0;
  opacity: var(--j-rail, 1); /* hidden in the corridor of stop 1 (journey3d.js) */
  display: grid; justify-items: center; gap: 15px; border-radius: 23px;
  background: #ffffff; box-shadow: 0 1px 3px rgba(20, 24, 33, .12), 0 8px 24px -14px rgba(20, 24, 33, .35);
}
.j-app-rail i { width: 22px; height: 1.5px; border-radius: 1px; background: currentColor; opacity: .22; }
:root[data-theme="dark"] .j-app { color: #e7e9ee; }
:root[data-theme="dark"] .j-app-icons i { border-color: rgba(255, 255, 255, .16); }
:root[data-theme="dark"] .j-app-rail, :root[data-theme="dark"] .j-app-bar { background: #1c1c1e; box-shadow: 0 0 0 1px rgba(255, 255, 255, .06); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .j-app { color: #e7e9ee; }
  :root:not([data-theme="light"]) .j-app-icons i { border-color: rgba(255, 255, 255, .16); }
  :root:not([data-theme="light"]) .j-app-rail, :root:not([data-theme="light"]) .j-app-bar { background: #1c1c1e; box-shadow: 0 0 0 1px rgba(255, 255, 255, .06); }
}
@media (max-width: 760px), (max-aspect-ratio: 17/20) {
  .j-app-bar { font-size: 16px; gap: 10px; height: 38px; padding: 0 10px 0 8px; border-radius: 12px; }
  .j-app-icons { gap: 12px; }
  .j-app-icons svg:nth-of-type(-n+2) { display: none; }
  .j-app-rail { width: 40px; gap: 12px; padding: 10px 0; top: calc(var(--header-h) + 62px); }
  .j-app-rail > :nth-child(n+6) { display: none; }
}

.j3d .j-steps { margin-top: -100vh; }
.j3d .j-step { min-height: 100vh; display: flex; align-items: center; padding: calc(var(--header-h) + 20px) 0 32px; }
.j3d .j-step .j-row { pointer-events: none; }
.j3d .j-step .j-card { pointer-events: auto; background: var(--glass-2); }
.j3d .j-fig { display: none; }
.j3d .j-step:not(.j-intro) { min-height: 118vh; }
/* the last stop leaves without a long empty run before the next section */
.j3d .j-step:last-child { min-height: 100vh; }

/* Phones and upright tablets (the same test as journey3d.js): the caption
   rides at the bottom of the screen for its whole step, the scene above it. */
@media (max-width: 760px), (max-aspect-ratio: 17/20) {
  .j-poster { place-items: end center; padding: 0 0 6vh; }
  .j-poster-device { width: min(108vw, 900px); transform: rotateX(12deg) rotateZ(-4deg); }
  .j3d .j-step { align-items: flex-end; padding-bottom: 0; }
  .j3d .j-step:not(.j-intro) .j-row { position: sticky; bottom: max(14px, env(safe-area-inset-bottom)); }
  .j3d .j-intro { align-items: flex-start; padding-top: calc(var(--header-h) + 8px); }
  .j3d .j-card-intro p.j-hint { display: none; }
}
@media (max-width: 760px) {
  .j3d .j-dots { display: none; }
  .j3d .j-card-intro .dn-lead { font-size: 15px; }
  .dn-cta .btn-soon { --h: 40px; font-size: 14px; }
  .j-card { padding: 20px 22px 22px; border-radius: 20px; }
  .j-card h2 { font-size: 28px; }
  .j-card p:not(.j-k) { font-size: 16px; margin-top: 10px; }
  .j-card-intro { padding: 24px 22px 22px; }
  .dn-icon { width: 64px; height: 64px; border-radius: 16px; }
  .dn-title { margin-top: 14px; }
  .dn-cta .btn { flex: 1 1 auto; }
  .j-end { margin-top: 16px; gap: 8px; }
  .j-end .btn { flex: 1 1 auto; --h: 44px; }
  .j-end .btn-soon { --h: 40px; font-size: 14px; }
  .j-card p.j-legal { margin-top: 12px; font-size: 13px; }
}

/* ---------- still version (no WebGL / reduced motion) ---------- */
.no3d .journey, html:not(.j3d) .journey { padding-top: calc(var(--header-h) + 24px); }
html:not(.j3d) .j-step { padding: clamp(36px, 6vw, 72px) 0; }
html:not(.j3d) .j-step:nth-child(even) .j-row { flex-direction: row-reverse; }
html:not(.j3d) .j-intro .j-row { align-items: center; }
@media (max-width: 900px) {
  html:not(.j3d) .j-row, html:not(.j3d) .j-step:nth-child(even) .j-row { flex-direction: column; align-items: stretch; }
  html:not(.j3d) .j-card { width: 100%; }
  .j-fig-phone { width: min(300px, 80%); }
}

/* ---------- screens strip ---------- */
.dn-screens { padding-top: clamp(40px, 6vw, 80px); padding-bottom: clamp(60px, 8vw, 110px); }
.shots {
  display: flex; gap: 18px; overflow-x: auto; padding: 8px max(16px, calc((100vw - 1200px) / 2)) 26px;
  scroll-snap-type: x mandatory; scroll-padding-inline: max(16px, calc((100vw - 1200px) / 2)); overscroll-behavior-x: contain;
  scrollbar-width: thin;
}
.shots:focus-visible { outline-offset: -4px; }
.shot { margin: 0; flex: 0 0 auto; width: clamp(200px, 22vw, 260px); scroll-snap-align: start; }
.shot img { width: 100%; height: auto; aspect-ratio: 540 / 830; border-radius: 22px; background: #101216; box-shadow: 0 0 0 1px var(--line), 0 30px 60px -36px rgba(0, 0, 0, .55); }
.shot figcaption { margin-top: 12px; font-size: 14.5px; font-weight: 600; color: var(--ink-2); }
/* The phones turn a little as they pass, like a carousel (scroll-driven). */
@supports (animation-timeline: view(inline)) {
  @media (prefers-reduced-motion: no-preference) {
    .shot { perspective: 1000px; }
    .shot img { animation: shot-turn linear both; animation-timeline: view(inline); }
    @keyframes shot-turn {
      0% { rotate: y 24deg; scale: .9; opacity: .55; }
      30%, 70% { rotate: y 0deg; scale: 1; opacity: 1; }
      100% { rotate: y -24deg; scale: .9; opacity: .55; }
    }
  }
}

/* ---------- get it ---------- */
.get-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.get-card { padding: 32px 30px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.get-card h3 { font: 600 28px/1.1 var(--display); letter-spacing: -.01em; }
.get-card p { color: var(--ink-2); font-size: 16.5px; flex: 1; }
.get-card p.get-note { flex: none; margin-top: -4px; font-size: 14px; color: var(--muted); }
.get-note a { color: var(--muted); text-decoration-color: var(--line-2); }
.get-note a:hover { color: var(--ink); }
.get-ico { width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center; background: var(--btn-glass); border: 1px solid var(--line); color: var(--ink); }
.get-ico svg { width: 26px; height: 26px; }
.facts { list-style: none; margin-top: 26px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.facts li { padding: 18px 4px 0; border-top: 1px solid var(--line-2); color: var(--muted); font-size: 15.5px; }
.facts b { display: block; font: 600 30px/1.1 var(--display); color: var(--ink); margin-bottom: 6px; }
@media (max-width: 860px) { .get-grid, .facts { grid-template-columns: 1fr; } }

/* ---------- faq ---------- */
.faq-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 40px; align-items: start; }
.faq { display: grid; gap: 12px; }
.faq details { border-radius: 18px; padding: 0; }
.faq summary {
  cursor: pointer; list-style: none; padding: 20px 56px 20px 22px; font-weight: 650; font-size: 17px; position: relative; border-radius: 18px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 22px; top: 50%; width: 10px; height: 10px; margin-top: -7px;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .3s var(--ease);
}
.faq details[open] summary::after { transform: rotate(225deg); margin-top: -2px; }
.faq details p { padding: 0 22px 20px; color: var(--ink-2); }
@media (max-width: 860px) { .faq-wrap { grid-template-columns: 1fr; gap: 0; } }