/* Foldie site v2 (prototype): one story — everyday things fall into DouDou. */
:root {
  --night: #0b0b12;
  --ink: #ffffff;
  --dim: rgba(255, 255, 255, 0.56);
  --faint: rgba(255, 255, 255, 0.1);
  --blue: #00b5fe;
  --yellow: #ffcb3d;
}

body.v2 { background: var(--night); }
.v2 .bar { background: rgba(11, 11, 18, 0.6); border-bottom-color: transparent; }
.v2 .bar .wrap { max-width: 1200px; }

/* ===== Hero: a tall track; the scene sticks while the page scrolls past it. ===== */
.catch { position: relative; height: 320vh; }
.stage {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  background:
    radial-gradient(70% 55% at 50% 78%, rgba(0, 181, 254, 0.22), transparent 70%),
    radial-gradient(40% 30% at 50% 74%, rgba(255, 203, 61, 0.10), transparent 70%),
    var(--night);
}
/* Stars: two layers of fine dots drifting very slowly (far away). */
.stars, .stars::after {
  position: absolute; inset: -10% 0 0; pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1px 1px at 28% 64%, rgba(255,255,255,.35), transparent 60%),
    radial-gradient(1.5px 1.5px at 46% 12%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(1px 1px at 63% 38%, rgba(255,255,255,.4), transparent 60%),
    radial-gradient(1px 1px at 82% 22%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1.5px 1.5px at 91% 70%, rgba(255,255,255,.35), transparent 60%),
    radial-gradient(1px 1px at 18% 86%, rgba(255,255,255,.3), transparent 60%),
    radial-gradient(1px 1px at 72% 88%, rgba(255,255,255,.3), transparent 60%);
  background-size: 520px 520px;
}
.stars::after { content: ""; background-size: 340px 340px; opacity: 0.6; transform: translate(130px, 90px); }

.headline {
  position: absolute; left: 0; right: 0; top: 15vh; z-index: 4;
  text-align: center; padding: 0 20px; pointer-events: none;
}
.headline h1 {
  margin: 0; font-size: clamp(44px, 8.2vw, 112px); line-height: 1.02; font-weight: 600;
  letter-spacing: -0.035em;
}
.headline h1 .soft { color: var(--dim); }
.headline p { margin: 22px auto 0; max-width: 560px; font-size: clamp(17px, 1.6vw, 21px); color: var(--dim); }

/* The folder: the icon whole, the falling things, then the icon's front flap again on
   top — so things sink behind the front edge into the folder (as in the app's splash). */
.folder {
  position: absolute; left: 50%; top: 66%; z-index: 2;
  width: clamp(132px, 12.5vw, 196px); aspect-ratio: 1; transform: translate(-50%, -50%);
}
.folder .layer {
  position: absolute; inset: 0; border-radius: 22.5%; overflow: hidden;
  transform-origin: 50% 100%;
}
.folder .layer img { width: 100%; height: 100%; display: block; }
.folder .front { z-index: 3; clip-path: polygon(0 45%, 100% 62%, 100% 100%, 0 100%); }
.folder .back { box-shadow: 0 40px 90px rgba(0, 181, 254, 0.28), 0 18px 40px rgba(0, 0, 0, 0.55); }
.folder .face-b { position: absolute; inset: 0; opacity: 0; transition: opacity .35s ease; }
.folder.full .face-b { opacity: 1; }
.folder.bump .layer { animation: bump .42s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes bump { 0% { transform: scale(1, 1); } 30% { transform: scale(1.06, .92); } 100% { transform: scale(1, 1); } }
.items { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.items img {
  position: absolute; left: 0; top: 0; will-change: transform, opacity;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.45));
}
/* Ground shadow under the folder. */
.folder::after {
  content: ""; position: absolute; left: 8%; right: 8%; bottom: -14%; height: 14%;
  background: radial-gradient(closest-side, rgba(0,0,0,.6), transparent); z-index: 0;
}

.after {
  position: absolute; left: 0; right: 0; bottom: 6vh; z-index: 4; text-align: center;
  opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease;
}
.after.on { opacity: 1; transform: none; }
.after .count { font-size: 15px; color: var(--dim); margin-bottom: 14px; }
.after .count b { color: var(--yellow); font-weight: 600; }
.pill {
  display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 26px;
  border-radius: 999px; background: #fff; color: #000; font-weight: 600; font-size: 16px;
}
.pill:hover { text-decoration: none; }
.pill svg { width: 18px; height: 18px; }

.hint {
  position: absolute; left: 50%; bottom: 4vh; transform: translateX(-50%); z-index: 4;
  color: var(--dim); font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
  transition: opacity .3s ease;
}
.hint::after { content: ""; display: block; width: 1px; height: 34px; margin: 10px auto 0; background: linear-gradient(var(--dim), transparent); animation: drip 1.8s ease-in-out infinite; }
@keyframes drip { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ===== Statement + cards (Endel-style rhythm) ===== */
.statement { text-align: center; padding: 140px 20px 56px; }
.statement h2 { margin: 0; font-size: clamp(34px, 4.6vw, 60px); line-height: 1.1; font-weight: 600; letter-spacing: -0.03em; }
.statement h2 .soft { color: var(--dim); }
.statement p { margin: 22px auto 0; max-width: 620px; color: var(--dim); font-size: 18px; }

.duo { max-width: 1200px; margin: 0 auto; padding: 0 20px 140px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.demo-card {
  border-radius: 32px; overflow: hidden; background: #15151f;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.demo-card .scene { position: relative; height: 380px; overflow: hidden; display: grid; place-items: center; }
.demo-card .copy { padding: 28px 32px 34px; }
.demo-card h3 { margin: 0 0 10px; font-size: 28px; line-height: 1.15; font-weight: 600; letter-spacing: -0.02em; }
.demo-card p { margin: 0; color: var(--dim); font-size: 16px; line-height: 1.6; }

/* Card 1: a line typed, then read back as a time and a list. */
.type-scene { background: radial-gradient(80% 70% at 50% 100%, rgba(0, 181, 254, 0.16), transparent 70%), #15151f; }
.composer { width: min(82%, 400px); }
.field {
  height: 64px; border-radius: 22px; padding: 0 22px; display: flex; align-items: center;
  background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.09);
  font-size: 20px;
}
.field .caret { width: 2px; height: 26px; background: var(--blue); margin-left: 2px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.chips { display: flex; gap: 10px; margin-top: 16px; min-height: 40px; }
.chips span {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.08); font-size: 15px; opacity: 0; transform: translateY(8px) scale(.96);
  transition: opacity .35s ease, transform .45s cubic-bezier(.3, 1.4, .5, 1);
}
.chips span img { width: 20px; height: 20px; }
.chips span.on { opacity: 1; transform: none; }
.added {
  margin-top: 26px; height: 64px; border-radius: 22px; padding: 0 18px; display: flex; align-items: center; gap: 14px;
  background: #22222e; opacity: 0; transform: translateY(14px); transition: opacity .4s ease, transform .5s cubic-bezier(.3, 1.3, .5, 1);
}
.added.on { opacity: 1; transform: none; }
.added img { width: 34px; height: 34px; }
.added b { font-weight: 600; font-size: 16px; display: block; }
.added small { color: var(--dim); font-size: 13px; }
.added .ring { margin-left: auto; width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.25); }

/* Card 2: the reminder drops in on a quiet lock screen. */
.lock-scene { background: linear-gradient(180deg, #1b1830 0%, #0f0f19 100%); }
.lock-scene .time { position: absolute; top: 48px; left: 0; right: 0; text-align: center; }
.lock-scene .time b { display: block; font-size: 76px; font-weight: 600; letter-spacing: -0.04em; line-height: 1; }
.lock-scene .time small { color: var(--dim); font-size: 15px; }
.lock-scene .moon { position: absolute; right: -30px; top: -34px; width: 170px; opacity: 0.85; filter: blur(.5px) drop-shadow(0 0 40px rgba(255, 220, 120, 0.35)); }
.note {
  position: absolute; left: 50%; bottom: 58px; width: min(84%, 380px);
  display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 24px;
  background: rgba(70, 70, 86, 0.55); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transform: translate(-50%, -140px) scale(.96); opacity: 0;
  transition: transform .7s cubic-bezier(.25, 1.25, .45, 1), opacity .4s ease;
}
.note.on { transform: translate(-50%, 0) scale(1); opacity: 1; }
.note > img { width: 42px; height: 42px; border-radius: 11px; }
.note b { display: flex; justify-content: space-between; font-size: 15px; }
.note b small { color: var(--dim); font-weight: 400; }
.note span { font-size: 14px; color: rgba(255, 255, 255, 0.85); }

.reveal2 { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s ease; }
.reveal2.in { opacity: 1; transform: none; }

@media (max-width: 860px) {
  .duo { grid-template-columns: 1fr; }
  .demo-card .scene { height: 320px; }
  .folder { top: 64%; }
}
@media (prefers-reduced-motion: reduce) {
  .catch { height: auto; }
  .stage { position: relative; }
  .after { opacity: 1; transform: none; }
  .hint { display: none; }
  .reveal2 { opacity: 1; transform: none; transition: none; }
  .field .caret, .hint::after { animation: none; }
}
.folder-front::after { display: none; }
.chips em { font-style: normal; }

/* ===== Tour: one phone stays put while the page scrolls through the app ===== */
.tour { position: relative; }
.tour-stick {
  position: sticky; top: 0; height: 100vh; height: 100svh;
  max-width: 1200px; margin: 0 auto; padding: 0 20px;
  display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 40px;
}
.steps { position: relative; height: 340px; }
.step {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center;
  opacity: 0; transform: translateY(24px); transition: opacity .5s ease, transform .6s ease;
}
.step.on { opacity: 1; transform: none; }
.step .k { color: var(--blue); font-size: 15px; font-weight: 600; letter-spacing: .06em; margin-bottom: 14px; }
.step h3 { margin: 0; font-size: clamp(32px, 4vw, 52px); line-height: 1.1; font-weight: 600; letter-spacing: -0.03em; }
.step p { margin: 18px 0 0; color: var(--dim); font-size: 18px; max-width: 460px; }
.dots { display: flex; gap: 8px; margin-top: 28px; }
.dots i { width: 8px; height: 8px; border-radius: 4px; background: rgba(255,255,255,.2); transition: width .3s ease, background .3s ease; }
.dots i.on { width: 26px; background: var(--blue); }
.big-phone {
  justify-self: center; position: relative; width: min(340px, 80vw); aspect-ratio: 1320 / 2868;
  border-radius: 56px; padding: 11px; background: linear-gradient(160deg, #3c3c4a, #14141b);
  box-shadow: 0 60px 120px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255,255,255,.08) inset, 0 0 120px rgba(0, 181, 254, .12);
}
.big-phone .screen { position: relative; width: 100%; height: 100%; border-radius: 46px; overflow: hidden; background: #000; }
.big-phone .screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s ease; }
.big-phone .screen img.on { opacity: 1; }

/* ===== Money cards ===== */
.flow-scene { background: radial-gradient(80% 70% at 70% 100%, rgba(255, 203, 61, 0.12), transparent 70%), #15151f; }
.flow-scene .col { position: absolute; top: 50%; transform: translateY(-50%); }
.flow-scene .log { left: 7%; width: 46%; display: grid; gap: 10px; }
.flow-scene .row {
  height: 50px; border-radius: 16px; background: #22222e; display: flex; align-items: center; gap: 10px; padding: 0 12px;
  font-size: 14px;
}
.flow-scene .row img { width: 26px; height: 26px; }
.flow-scene .row b { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; }
.flow-scene .row.lift { outline: 2px solid var(--blue); }
.flow-scene .book {
  right: 7%; width: 36%; border-radius: 22px; padding: 18px; background: #1e1e2a;
  border: 1px dashed rgba(255,255,255,.18); text-align: center;
}
.flow-scene .book img { width: 44px; height: 44px; }
.flow-scene .book .who { font-weight: 600; margin-top: 6px; }
.flow-scene .book .part { color: var(--dim); font-size: 13px; }
.flow-scene .book .sum { margin-top: 10px; font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--yellow); }
.flow-scene .book.got { border-color: var(--yellow); }
.flyer {
  position: absolute; height: 50px; border-radius: 16px; background: #2c2c3a; display: flex; align-items: center; gap: 10px;
  padding: 0 12px; font-size: 14px; box-shadow: 0 20px 40px rgba(0,0,0,.5); opacity: 0; pointer-events: none;
}
.flyer img { width: 26px; height: 26px; }
.flyer b { margin-left: auto; }

.pad-scene { background: radial-gradient(80% 70% at 30% 100%, rgba(255, 99, 107, 0.14), transparent 70%), #15151f; }
.pad { width: min(84%, 360px); }
.pad .amount { text-align: right; font-size: 44px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: #ff636b; }
.pad .amount small { font-size: 24px; color: var(--dim); margin-right: 6px; }
.pad .cats { display: flex; gap: 8px; margin: 8px 0 14px; }
.pad .cats > span { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 999px; background: rgba(255,255,255,.07); font-size: 14px; }
.pad .cats > span.on { background: rgba(0,181,254,.18); outline: 1.5px solid var(--blue); }
.pad .cats img { width: 20px; height: 20px; }
.keys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.keys i {
  font-style: normal; height: 46px; border-radius: 14px; background: #262633; display: grid; place-items: center;
  font-size: 19px; font-weight: 500; transition: background .12s ease, transform .12s ease;
}
.keys i.hit { background: #3a3a4c; transform: scale(.94); }
.keys i.save { background: var(--blue); grid-row: span 2; height: auto; font-size: 16px; font-weight: 600; }

/* ===== Reports: the printer ===== */
.print { text-align: center; padding: 0 20px 140px; }
.printer { width: min(420px, 90vw); margin: 56px auto 0; position: relative; }
.printer .body {
  height: 74px; border-radius: 24px 24px 12px 12px; position: relative; z-index: 2;
  background: linear-gradient(180deg, #38cde6 0%, #009ec2 45%, #00566f 100%);
  box-shadow: 0 30px 60px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.4);
}
.printer .body::before { content: "DOUDOU"; position: absolute; left: 24px; top: 16px; font-size: 10px; letter-spacing: .3em; color: rgba(255,255,255,.85); font-weight: 600; }
.printer .body::after { content: ""; position: absolute; left: 24px; right: 24px; bottom: 12px; height: 8px; border-radius: 4px; background: #08151b; box-shadow: inset 0 2px 3px rgba(0,0,0,.8); }
.paper-wrap { width: 86%; margin: -12px auto 0; overflow: hidden; position: relative; z-index: 1; padding-bottom: 30px; }
.paper {
  background: #f6f4ec; color: #26262c; text-align: left; padding: 26px 24px 30px;
  font-variant-numeric: tabular-nums; transform: translateY(-101%); transition: transform 2.6s cubic-bezier(.35, .1, .25, 1);
  box-shadow: 0 20px 40px rgba(0,0,0,.4);
  position: relative;
}
/* Torn edge: a row of small teeth hanging off the bottom. */
.paper::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 8px;
  background:
    linear-gradient(45deg, #f6f4ec 50%, transparent 50%) 0 0 / 12px 8px repeat-x,
    linear-gradient(-45deg, #f6f4ec 50%, transparent 50%) 0 0 / 12px 8px repeat-x;
}
.paper.out { transform: none; }
.paper .t { text-align: center; font-weight: 700; font-size: 22px; letter-spacing: .2em; }
.paper .st { text-align: center; font-size: 12px; color: #77776f; margin-top: 2px; }
.paper hr { border: 0; border-top: 1px dashed #9a9a92; margin: 14px 0; }
.paper .ln { display: flex; justify-content: space-between; font-size: 14px; padding: 3px 0; }
.paper .ln span:first-child { color: #55554f; }
.paper .tot { display: flex; justify-content: space-between; align-items: baseline; font-weight: 700; }
.paper .tot b { font-size: 28px; }
.paper .bar { height: 36px; margin-top: 16px; background: repeating-linear-gradient(90deg, #26262c 0 2px, transparent 2px 4px, #26262c 4px 5px, transparent 5px 8px); opacity: .85; }
.styles { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.styles > span { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 999px; background: rgba(255,255,255,.06); font-size: 15px; }
.styles .tag { margin: 0; }

/* ===== Numbers ===== */
.nums { max-width: 1200px; margin: 0 auto; padding: 40px 20px 120px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: center; }
.nums b { display: block; font-size: clamp(48px, 6vw, 84px); font-weight: 600; letter-spacing: -0.04em; line-height: 1; background: linear-gradient(180deg, #fff, rgba(255,255,255,.55)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nums span { display: block; margin-top: 12px; color: var(--dim); font-size: 15px; }

/* ===== Night band ===== */
.band { position: relative; min-height: 86vh; display: grid; align-items: end; overflow: hidden; }
.band .bg { position: absolute; inset: 0; background: url("img/art/night.webp") center / cover no-repeat; transform: scale(1.08); }
.band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--night) 0%, rgba(11,11,18,.15) 30%, rgba(11,11,18,.35) 60%, var(--night) 100%); }
.band .txt { position: relative; z-index: 1; text-align: center; padding: 0 20px 12vh; }
.band h2 { margin: 0; font-size: clamp(36px, 5vw, 68px); line-height: 1.08; font-weight: 600; letter-spacing: -0.03em; text-shadow: 0 6px 40px rgba(0,0,0,.5); }
.band p { color: rgba(255,255,255,.8); font-size: 18px; margin: 18px 0 0; }

/* ===== Privacy ===== */
.priv { max-width: 1200px; margin: 0 auto; padding: 0 20px 140px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.priv div { border-top: 1px solid rgba(255,255,255,.14); padding-top: 22px; }
.priv svg { width: 30px; height: 30px; stroke: #fff; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.priv h3 { margin: 16px 0 8px; font-size: 20px; font-weight: 600; }
.priv p { margin: 0; color: var(--dim); font-size: 15px; }
.more { text-align: center; margin: -100px 0 140px; }

/* ===== Plans ===== */
.plans2 { max-width: 1100px; margin: 0 auto; padding: 0 20px 140px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.plan2 { border-radius: 32px; padding: 32px 28px; background: #15151f; border: 1px solid rgba(255,255,255,.06); }
.plan2.best { background: linear-gradient(180deg, rgba(0,181,254,.16), #15151f 55%); border-color: rgba(0,181,254,.6); }
.plan2 .n { font-size: 15px; color: var(--dim); }
.plan2 h3 { margin: 6px 0 22px; font-size: 30px; font-weight: 600; letter-spacing: -0.02em; }
.plan2 ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.plan2 li { font-size: 15px; padding-left: 28px; position: relative; color: rgba(255,255,255,.88); }
.plan2 li::before { content: ""; position: absolute; left: 2px; top: 6px; width: 12px; height: 7px; border-left: 2px solid var(--blue); border-bottom: 2px solid var(--blue); transform: rotate(-45deg); }
.plan2 li.no { color: var(--dim); }
.plan2 li.no::before { border: 0; height: 2px; top: 11px; width: 12px; background: var(--dim); transform: none; }
.fine { text-align: center; color: var(--dim); font-size: 14px; margin: -116px 0 140px; }

/* ===== Faces marquee + ending ===== */
.marquee { overflow: hidden; padding: 10px 0; -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee .track { display: flex; gap: 18px; width: max-content; animation: slide 60s linear infinite; }
.marquee img { width: 88px; height: 88px; border-radius: 30%; }
@keyframes slide { to { transform: translateX(-50%); } }
.ending { text-align: center; padding: 100px 20px 140px; }
.ending h2 { margin: 0; font-size: clamp(40px, 6vw, 80px); line-height: 1.04; font-weight: 600; letter-spacing: -0.035em; }
.ending p { color: var(--dim); font-size: 18px; margin: 20px 0 32px; }
.ending .row2 { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }
.ghost2 { display: inline-flex; align-items: center; height: 52px; padding: 0 24px; border-radius: 999px; background: rgba(255,255,255,.1); color: #fff; font-weight: 600; }
.ghost2:hover { text-decoration: none; background: rgba(255,255,255,.16); }
.v2 footer { border-top-color: rgba(255,255,255,.08); }
.v2 footer .wrap { max-width: 1200px; }

@media (max-width: 860px) {
  .tour-stick { grid-template-columns: 1fr; grid-template-rows: auto 1fr; gap: 12px; padding-top: 72px; }
  .steps { height: 190px; }
  .step h3 { font-size: 30px; }
  .step p { font-size: 16px; margin-top: 10px; }
  .dots { margin-top: 14px; }
  .big-phone { width: auto; height: min(60vh, 540px); border-radius: 44px; padding: 8px; }
  .big-phone .screen { border-radius: 36px; }
  .nums { grid-template-columns: 1fr 1fr; row-gap: 48px; }
  .priv { grid-template-columns: 1fr 1fr; }
  .plans2 { grid-template-columns: 1fr; }
  .fine { margin-top: -110px; }
}
@media (max-width: 520px) {
  .priv { grid-template-columns: 1fr; }
  .marquee img { width: 64px; height: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  .paper { transform: none; transition: none; }
  .marquee .track { animation: none; }
  .step, .big-phone .screen img { transition: none; }
}
/* The phone fits the screen's height (it stays put while the steps change). */
.big-phone { width: auto; height: min(78vh, 720px); }
@media (max-width: 860px) { .big-phone { height: min(58vh, 540px); } }
/* Words up top, so the sleeping DouDou shows below them. */
.band { align-items: start; }
.band .txt { padding: 16vh 20px 0; }
.band .bg { background-position: center 75%; }
.band::after { background: linear-gradient(180deg, var(--night) 0%, rgba(11,11,18,.55) 32%, rgba(11,11,18,.1) 60%, var(--night) 100%); }
.night2 { max-width: 1200px; margin: 0 auto; padding: 40px 20px 140px; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.night2 h2 { margin: 0; font-size: clamp(36px, 4.6vw, 60px); line-height: 1.1; font-weight: 600; letter-spacing: -0.03em; }
.night2 h2 .soft { color: var(--dim); }
.night2 p { color: var(--dim); font-size: 18px; margin: 20px 0 0; }
.night2 .art { border-radius: 36px; overflow: hidden; aspect-ratio: 4 / 5; box-shadow: 0 50px 100px rgba(0,0,0,.55), 0 0 100px rgba(255, 160, 120, .12); }
.night2 .art img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.06); }
@media (max-width: 860px) { .night2 { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
  .headline { top: 12vh; }
  .headline h1 { font-size: 40px; }
  .headline p { font-size: 16px; margin-top: 14px; }
}

/* ===== Caught: rows of capsules drifting left → right ===== */
.caught { padding-bottom: 140px; overflow: hidden; }
.caprows { display: grid; gap: 16px; -webkit-mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.caprow { overflow: hidden; }
.captrack { display: flex; gap: 14px; width: max-content; animation: drift 70s linear infinite; }
.r1 .captrack { animation-duration: 85s; animation-delay: -30s; }
.r2 .captrack { animation-duration: 60s; animation-delay: -12s; }
@keyframes drift { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.cap {
  display: flex; align-items: center; gap: 14px; height: 76px; padding: 0 22px 0 12px; border-radius: 999px;
  background: #171722; border: 1px solid rgba(255,255,255,.07); white-space: nowrap;
}
.cap img { width: 52px; height: 52px; }
.cap b { display: block; font-size: 17px; font-weight: 600; }
.cap small { display: block; font-size: 14px; color: var(--dim); margin-top: 2px; }
.cap i { width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(255,255,255,.22); margin-left: 10px; }
@media (max-width: 600px) { .cap { height: 64px; } .cap img { width: 42px; height: 42px; } .cap b { font-size: 15px; } }

/* ===== Reviews: masonry ===== */
.reviews { padding-bottom: 120px; }
.masonry { max-width: 1200px; margin: 0 auto; padding: 0 20px; columns: 3 320px; column-gap: 20px; }
.rev { break-inside: avoid; margin: 0 0 20px; padding: 26px 26px 22px; border-radius: 28px; background: #15151f; border: 1px solid rgba(255,255,255,.06); position: relative; }
.rev .rating { color: var(--yellow); letter-spacing: 3px; font-size: 15px; }
.rev blockquote { margin: 12px 0 18px; font-size: 17px; line-height: 1.65; color: rgba(255,255,255,.9); }
.rev figcaption { display: flex; align-items: center; gap: 12px; }
.rev figcaption img { width: 40px; height: 40px; border-radius: 50%; }
.rev figcaption b { display: block; font-size: 15px; }
.rev figcaption small { color: var(--dim); font-size: 13px; }
.rev .sample { position: absolute; top: 16px; right: 18px; font-size: 12px; color: #ff9f6b; border: 1px solid rgba(255,159,107,.5); border-radius: 999px; padding: 1px 8px; }
@media (prefers-reduced-motion: reduce) { .captrack { animation: none; } }
.rev { display: inline-block; width: 100%; -webkit-column-break-inside: avoid; page-break-inside: avoid; }

/* Text pages (privacy, support) in the v2 look */
.v2 .doc .qa, .v2 .doc .contact { background: #15151f; border: 1px solid rgba(255,255,255,.06); }
.v2 .doc h1 { font-size: 40px; letter-spacing: -0.03em; }

/* =====================================================================
   Site-wide scale (2026-10-18): titles 32, body 16; 32 between blocks,
   16 within; content 1200 wide. The mock screens inside demo cards keep
   their own sizes (they imitate the app).
   ===================================================================== */
.v2 { --title: 32px; --body: 16px; --block: 32px; --gap: 16px; --max: 1200px; }

/* Nav: a floating, fully rounded bar */
.v2 .bar { position: fixed; top: 0; left: 0; right: 0; background: none; border: 0; backdrop-filter: none; -webkit-backdrop-filter: none; padding: 12px 20px 0; }
.v2 .bar .wrap {
  max-width: var(--max); height: 56px; padding: 0 8px 0 16px; border-radius: 999px;
  background: rgba(28, 28, 40, 0.72); border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: saturate(160%) blur(20px); -webkit-backdrop-filter: saturate(160%) blur(20px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
.v2 .bar nav a { font-size: var(--body); }
.v2 .lang { font-size: 14px; }

/* Titles 32 */
.v2 .headline h1, .v2 .statement h2, .v2 .demo-card h3, .v2 .step h3, .v2 .night2 h2,
.v2 .priv h3, .v2 .plan2 h3, .v2 .ending h2, .v2 .nums b, .v2 .doc h1 {
  font-size: var(--title); line-height: 1.2; letter-spacing: -0.01em;
}
/* Body 16 */
.v2 .headline p, .v2 .statement p, .v2 .demo-card p, .v2 .step p, .v2 .night2 p, .v2 .priv p,
.v2 .plan2 li, .v2 .plan2 .n, .v2 .fine, .v2 .ending p, .v2 .nums span, .v2 .after .count,
.v2 .step .k, .v2 .styles > span, .v2 .more, .v2 .pill, .v2 .ghost2, .v2 .doc p, .v2 .doc li, .v2 .doc h2 {
  font-size: var(--body);
}
.v2 .doc h2 { font-weight: 600; }

/* Width */
.v2 .duo, .v2 .tour-stick, .v2 .nums, .v2 .priv, .v2 .plans2, .v2 .night2, .v2 .masonry, .v2 footer .wrap { max-width: var(--max); }

/* Spacing: 32 between blocks, 16 within */
.v2 main > section:not(.catch):not(.tour) { padding-top: var(--gap); padding-bottom: var(--gap); }
.v2 .statement { padding: var(--block) 20px var(--block); }
.v2 .statement p { margin-top: var(--gap); }
.v2 .headline p { margin-top: var(--gap); }
.v2 .duo { gap: var(--gap); padding-bottom: var(--block); }
.v2 .demo-card .copy { padding: 24px; }
.v2 .demo-card h3 { margin-bottom: var(--gap); }
.v2 .step p { margin-top: var(--gap); }
.v2 .dots { margin-top: var(--block); }
.v2 .tour-stick { gap: var(--block); }
.v2 .print { padding-bottom: var(--block); }
.v2 .printer { margin-top: 0; }
.v2 .styles { margin-top: var(--gap); }
.v2 .nums { padding: var(--block) 20px; gap: var(--gap); }
.v2 .nums span { margin-top: 8px; }
.v2 .night2 { padding: var(--block) 20px; gap: var(--block); }
.v2 .night2 p { margin-top: var(--gap); }
.v2 .priv { padding-bottom: var(--block); gap: var(--gap); }
.v2 .priv h3 { margin: var(--gap) 0 8px; }
.v2 .more { margin: 0 0 var(--block); }
.v2 .plans2 { padding-bottom: var(--gap); gap: var(--gap); }
.v2 .plan2 { padding: 24px; }
.v2 .plan2 h3 { margin: 8px 0 var(--gap); }
.v2 .plan2 ul { gap: 8px; }
.v2 .fine { margin: 0 0 var(--block); }
.v2 .caught { padding-bottom: var(--block); }
.v2 .caprows { gap: var(--gap); }
.v2 .ending { padding: var(--block) 20px calc(var(--block) * 2); }
.v2 .ending p { margin: var(--gap) 0 var(--block); }
.v2 .doc { padding-top: 120px; }
.v2 .doc h2 { margin: var(--block) 0 8px; }
@media (max-width: 860px) {
  .v2 .nums { row-gap: var(--block); }
  .v2 .tour-stick { padding-top: 96px; gap: var(--gap); }
  .v2 .steps { height: 150px; }
}
@media (max-width: 600px) {
  .v2 .headline h1 { font-size: var(--title); }
  .v2 .headline p { font-size: var(--body); }
  .v2 .bar { padding: 8px 12px 0; }
}
/* No single-character last lines */
.v2 p, .v2 h1, .v2 h2, .v2 h3 { text-wrap: pretty; }
.v2 .statement p, .v2 .headline p, .v2 .ending p { text-wrap: balance; }

/* Cards: title 16 bold, description 16 light */
.v2 .demo-card h3, .v2 .priv h3, .v2 .plan2 h3 { font-size: var(--body); font-weight: 700; line-height: 1.4; letter-spacing: 0; }
.v2 .demo-card p, .v2 .priv p, .v2 .plan2 li { font-size: var(--body); font-weight: 300; }
.v2 .demo-card h3 { margin: 0 0 8px; }
.v2 .priv h3 { margin: var(--gap) 0 8px; }
.v2 .plan2 h3 { margin: 8px 0 var(--gap); }

/* Language button and its menu */
.v2 .bar nav { position: relative; }
.v2 .lang { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px 0 12px; }
.v2 .lang svg, .langmenu svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.langmenu {
  position: absolute; top: calc(100% + 16px); min-width: 216px; padding: 8px; border-radius: 24px;
  background: rgba(40, 40, 54, 0.92); border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: saturate(160%) blur(20px); -webkit-backdrop-filter: saturate(160%) blur(20px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45); transform-origin: top right; animation: langIn .18s ease-out;
}
.langmenu button {
  display: flex; align-items: center; justify-content: space-between; width: 100%; height: 44px; padding: 0 12px;
  font: inherit; font-size: var(--body); color: var(--ink); background: none; border: 0; border-radius: 16px; cursor: pointer; text-align: left;
}
.langmenu button:hover { background: rgba(255, 255, 255, 0.08); }
.langmenu button svg { color: var(--blue); }
@keyframes langIn { from { opacity: 0; transform: scale(.96) translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .langmenu { animation: none; } }

/* =====================================================================
   Six sections (2026-10-18): banner / to-dos / money / privacy / FAQ / sign-off
   ===================================================================== */
.v2 .bar nav .sec { display: none; }
@media (min-width: 760px) { .v2 .bar nav .sec { display: inline-block; } }
.v2 main > section[id] { scroll-margin-top: 80px; }

/* To-dos: the capsule rows sit between the words and the cards */
.v2 #notes .caprows { margin-bottom: var(--block); overflow: hidden; }

/* The timeline card: the top of the home screen, fading out at the card's edge */
.shot-scene { background: radial-gradient(80% 70% at 50% 100%, rgba(0, 181, 254, 0.14), transparent 70%), #15151f; place-items: start center !important; }
.mini-phone {
  width: 300px; margin-top: 40px; border-radius: 44px 44px 0 0; padding: 9px 9px 0;
  background: linear-gradient(160deg, #3c3c4a, #14141b); box-shadow: 0 0 0 1px rgba(255,255,255,.08) inset, 0 30px 60px rgba(0,0,0,.5);
  -webkit-mask: linear-gradient(180deg, #000 70%, transparent); mask: linear-gradient(180deg, #000 70%, transparent);
}
.mini-phone img { display: block; width: 100%; border-radius: 36px 36px 0 0; }

/* Money: the long-image card spans both columns, words left, receipt right */
.demo-card.wide { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
.demo-card.wide .copy { padding: 40px; }
.demo-card.wide .styles { justify-content: flex-start; margin-top: var(--gap); }
.demo-card.wide .styles > span { height: 36px; font-size: 14px; }
.print-scene { height: auto !important; padding: 40px 0 0; background: radial-gradient(70% 60% at 50% 100%, rgba(0, 181, 254, 0.12), transparent 70%), #15151f; }
.print-scene .printer { margin: 0 auto; width: min(380px, 84%); }
@media (max-width: 860px) {
  .demo-card.wide { grid-template-columns: 1fr; }
  .demo-card.wide .copy { padding: 24px; order: 2; }
}

/* FAQ */
.faq { max-width: 800px; margin: 0 auto; padding: 0 20px var(--block); }
.v2 .faq .qa { background: #15151f; border: 1px solid rgba(255,255,255,.06); padding: 0 24px; margin: 0; }
.v2 .faq .qa summary { padding: var(--gap) 0; font-size: var(--body); font-weight: 600; }
.v2 .faq .qa details p { font-size: var(--body); font-weight: 300; margin: 0 0 var(--gap); line-height: 1.6; }
.v2 .faq .more { margin: var(--gap) 0 0; }

/* Sign-off: words left, sleeping DouDou right */
.signoff { max-width: var(--max); margin: 0 auto; padding: var(--block) 20px calc(var(--block) * 2); display: grid; grid-template-columns: 1fr 1fr; gap: var(--block); align-items: center; }
.signoff h2 { margin: 0; font-size: var(--title); line-height: 1.2; font-weight: 600; }
.signoff p { color: var(--dim); font-size: var(--body); margin: var(--gap) 0 var(--block); }
.signoff .row2 { display: flex; gap: 12px; flex-wrap: wrap; }
.signoff .art { border-radius: 32px; overflow: hidden; aspect-ratio: 4 / 3; }
.signoff .art:not(.nightscape) img { width: 100%; height: 100%; object-fit: cover; object-position: center 70%; display: block; }
@media (max-width: 860px) { .signoff { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
  .flow-scene .book { padding: 16px 8px; }
  .flow-scene .book .sum { font-size: 18px; }
}
@media (max-width: 600px) { .paper .tot b { font-size: 22px; } }

/* Nothing wider than 1200: wider things fade out at both ends */
.v2 .statement, .v2 .more { max-width: var(--max); margin-left: auto; margin-right: auto; }
.v2 .caprows { max-width: var(--max); margin-left: auto; margin-right: auto; }
@media (min-width: 1200px) {
  .v2 .stage {
    max-width: var(--max); margin: 0 auto;
    -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  }
}
.v2 footer { border-top: 0; padding-top: 0; }
.v2 footer .wrap { padding-top: 24px; background: linear-gradient(rgba(255,255,255,.08), rgba(255,255,255,.08)) 20px 0 / calc(100% - 40px) 1px no-repeat; }

/* =====================================================================
   Bar: bigger logo left, sections centred, language right
   ===================================================================== */
.v2 .bar .wrap { display: grid; grid-template-columns: 1fr auto 1fr; height: 64px; padding: 0 12px 0 12px; }
.v2 .brand { font-size: 20px; gap: 12px; }
.v2 .brand img { width: 40px; height: 40px; border-radius: 10px; }
.v2 .bar nav.secs { margin: 0; display: flex; gap: 4px; justify-self: center; }
.v2 .bar nav.secs a { font-size: var(--body); padding: 10px 14px; border-radius: 999px; }
.v2 .bar nav.secs a:hover { background: rgba(255,255,255,.06); }
.v2 .bar .tools { justify-self: end; position: relative; }
.v2 .lang { margin: 0; }
@media (max-width: 760px) {
  .v2 .bar .wrap { grid-template-columns: 1fr auto; }
  .v2 .bar nav.secs { display: none; }
}

/* Section heads: one Toss icon, or DouDou, above the title */
.v2 .sec-icon { display: block; width: 64px; height: 64px; margin: 0 auto var(--gap); }
.v2 .sec-icon.dou { border-radius: 22%; box-shadow: 0 10px 30px rgba(0, 181, 254, .25); }

/* Privacy points: Toss icons */
.v2 .priv img { width: 40px; height: 40px; display: block; }

/* FAQ: a small Toss icon in front of each question */
.v2 .faq summary { display: flex; align-items: center; gap: 12px; }
.v2 .faq summary::before { content: ""; flex: none; width: 24px; height: 24px; background: center / contain no-repeat; }
.v2 .faq summary::after { margin-left: auto; }
.v2 .faq details:nth-child(1) summary::before { background-image: url("img/toss/moneybag.png"); }
.v2 .faq details:nth-child(2) summary::before { background-image: url("img/toss/key.png"); }
.v2 .faq details:nth-child(3) summary::before { background-image: url("img/toss/link.png"); }
.v2 .faq details:nth-child(4) summary::before { background-image: url("img/toss/newphone.png"); }
.v2 .faq details:nth-child(5) summary::before { background-image: url("img/toss/bell.png"); }
.v2 .faq details:nth-child(6) summary::before { background-image: url("img/toss/crown.png"); }
.v2 .faq details p { padding-left: 36px; }

/* =====================================================================
   Sign-off: a quiet night, drawn with Toss and CSS
   ===================================================================== */
.nightscape {
  position: relative; aspect-ratio: 4 / 3; border-radius: 32px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.06);
  background:
    radial-gradient(45% 40% at 80% 20%, rgba(255, 210, 110, .14), transparent 70%),
    linear-gradient(180deg, #11132c 0%, #181834 55%, #201c3c 100%);
}
.nightscape i {
  position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #fff; opacity: .5;
  animation: twinkle 3.2s ease-in-out infinite;
}
.nightscape i:nth-of-type(2n) { animation-delay: -1.1s; width: 2px; height: 2px; }
.nightscape i:nth-of-type(3n) { animation-delay: -2.3s; animation-duration: 4.4s; }
@keyframes twinkle { 50% { opacity: .12; } }
.nightscape img { position: absolute; display: block; }
.ns-moon { right: 10%; top: 10%; width: 20%; filter: drop-shadow(0 0 32px rgba(255, 214, 100, .45)); }
.ns-spark { left: 14%; top: 16%; width: 8%; animation: twinkle 3.6s ease-in-out infinite; }
.ns-star { left: 60%; top: 30%; width: 4%; opacity: .8; animation: twinkle 4.2s ease-in-out -1.5s infinite; }
.ns-cloud { opacity: .22; filter: blur(1px); animation: cloud 16s ease-in-out infinite alternate; }
.ns-cloud.c1 { left: 26%; top: 34%; width: 18%; }
.ns-cloud.c2 { right: 31%; top: 16%; width: 11%; opacity: .14; animation-duration: 22s; animation-direction: alternate-reverse; }
@keyframes cloud { to { transform: translateX(28px); } }
.ns-hill {
  position: absolute; left: -15%; right: -15%; bottom: -62%; height: 100%; border-radius: 50%;
  background: linear-gradient(180deg, #2b2752 0%, #1a1834 40%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 -30px 80px rgba(0, 181, 254, .08);
}
.ns-dou {
  left: 50%; bottom: 22%; width: 24%; border-radius: 22%; transform: translateX(-50%);
  box-shadow: 0 0 60px rgba(0, 181, 254, .3), 0 18px 30px rgba(0, 0, 0, .45);
  animation: breathe 4.8s ease-in-out infinite;
}
@keyframes breathe { 50% { transform: translateX(-50%) scale(1.025); } }
.ns-phone { left: 64%; bottom: 23%; width: 9%; transform: rotate(-14deg); filter: drop-shadow(0 0 18px rgba(120, 200, 255, .45)); }
.ns-z { left: 60%; bottom: 52%; width: 9%; animation: zzz 3.6s ease-out infinite; }
@keyframes zzz { 0% { transform: translate(0, 10px) scale(.8); opacity: 0; } 30% { opacity: .9; } 100% { transform: translate(18px, -26px) scale(1.05); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .nightscape i, .nightscape img { animation: none !important; }
  .ns-z { opacity: .8; }
}
.v2 .faq { max-width: 800px; margin-left: auto; margin-right: auto; }

/* =====================================================================
   Banner: an evening drawn with Toss and CSS (no glows)
   ===================================================================== */
.banner { max-width: var(--max); margin: 0 auto; padding: 88px 20px var(--block); }
.b-card {
  position: relative; height: min(78vh, 720px); min-height: 560px; border-radius: 32px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.06);
  background: linear-gradient(180deg, #121430 0%, #1b1a3a 60%, #251f42 100%);
}
.b-deco { position: absolute; inset: 0; }
.b-deco i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #fff; opacity: .5; animation: twinkle 3.4s ease-in-out infinite; }
.b-deco i:nth-of-type(2n) { width: 2px; height: 2px; animation-delay: -1.2s; }
.b-deco i:nth-of-type(3n) { animation-duration: 4.6s; animation-delay: -2.4s; }
.b-deco img { position: absolute; display: block; }
.b-moon { right: 7%; top: 9%; width: 96px; }
.b-spark { left: 7%; top: 9%; width: 44px; animation: twinkle 3.8s ease-in-out infinite; }
.b-cloud { opacity: .2; animation: cloud 18s ease-in-out infinite alternate; }
.b-cloud.c1 { left: 30%; top: 46%; width: 120px; }
.b-cloud.c2 { right: 20%; top: 14%; width: 80px; opacity: .14; animation-duration: 24s; animation-direction: alternate-reverse; }
.b-thing {
  left: var(--x); top: var(--y); width: var(--s); height: var(--s); transform: translate(-50%, -50%) rotate(var(--r));
  animation: bob var(--d) ease-in-out infinite alternate;
}
@keyframes bob { to { transform: translate(-50%, calc(-50% - 10px)) rotate(var(--r)); } }
.b-hill {
  position: absolute; left: -20%; right: -20%; bottom: -70%; height: 100%; border-radius: 50%;
  background: linear-gradient(180deg, #2c2853 0%, #1c1a38 35%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.b-hill.back { left: 30%; right: -40%; bottom: -62%; background: linear-gradient(180deg, #24214a 0%, #19172f 35%); }
.b-dou { position: absolute; left: 50%; bottom: 14%; width: 152px; transform: translateX(-50%); animation: hop 5s ease-in-out infinite; }
.b-dou img { position: static !important; width: 100%; border-radius: 22%; }
@keyframes hop { 0%, 80%, 100% { transform: translateX(-50%); } 86% { transform: translateX(-50%) translateY(-10px); } 92% { transform: translateX(-50%); } }
.b-words { position: absolute; left: 0; right: 0; top: 13%; text-align: center; padding: 0 20px; }
.b-words h1 { margin: 0; font-size: var(--title); line-height: 1.2; font-weight: 600; }
.b-words h1 .soft { color: var(--dim); }
.b-words p { margin: var(--gap) 0 var(--block); color: var(--dim); font-size: var(--body); }
.b-words .pill { height: 48px; }
@media (max-width: 600px) {
  .banner { padding-top: 80px; }
  .b-card { height: 640px; min-height: 0; }
  .b-moon { width: 64px; right: 6%; top: 34%; }
  .b-spark { top: 36%; }
  .b-thing { width: calc(var(--s) * .72); height: calc(var(--s) * .72); top: calc(var(--y) + 10%); }
  .b-cloud.c1 { width: 90px; top: 58%; left: 18%; }
  .b-dou { width: 120px; bottom: 12%; }
  .b-words { top: 8%; }
}
@media (prefers-reduced-motion: reduce) {
  .b-deco i, .b-deco img, .b-dou { animation: none !important; }
}

/* No glows anywhere: cards flat, icons without halos */
.type-scene, .shot-scene, .flow-scene, .pad-scene, .print-scene { background: #15151f !important; }
.v2 .sec-icon.dou { box-shadow: none; }
.nightscape { background: linear-gradient(180deg, #11132c 0%, #181834 55%, #201c3c 100%); }
.ns-moon, .ns-phone { filter: none; }
.ns-hill { box-shadow: inset 0 1px 0 rgba(255,255,255,.08); }
.ns-dou { box-shadow: none; }
.b-card { height: min(74vh, 660px); }
.b-dou { bottom: 26%; }
.b-hill { bottom: -72%; }
.b-hill.back { left: 40%; bottom: -66%; }
.b-cloud.c1 { left: 26%; top: 40%; width: 104px; }
@media (max-width: 600px) { .b-card { height: 620px; } .b-dou { bottom: 24%; } }
@media (max-width: 600px) {
  .b-words { top: 32px; padding: 0 16px; }
  .b-words p { margin-bottom: var(--gap); }
  .b-moon { width: 56px; right: 8%; top: 44%; }
  .b-spark { width: 32px; left: 9%; top: 45%; }
  .b-cloud.c1 { width: 80px; left: 30%; top: 50%; }
  .b-cloud.c2, .t-books, .t-gift, .t-bubbletea, .t-taxi { display: none !important; }
  .b-thing { width: calc(var(--s) * .8); height: calc(var(--s) * .8); }
  .t-coffee { --x: 14% !important; --y: 60% !important; }
  .t-receipt { --x: 86% !important; --y: 60% !important; }
  .t-alarm { --x: 20% !important; --y: 74% !important; }
  .t-box { --x: 80% !important; --y: 74% !important; }
  .b-thing { top: var(--y); }
}
.v2 main > section.banner { padding: 88px 20px var(--block) !important; }
@media (max-width: 600px) {
  .v2 main > section.banner { padding-top: 80px !important; }
  .b-cloud.c1 { width: 72px; left: 40%; top: 42%; }
}
@media (max-width: 600px) { .b-words { padding: 0 8px; } }

/* =====================================================================
   One-screen home (2026-10-18): the whole window is the drawing
   ===================================================================== */
.v2 .bar nav.secs a.on { color: var(--ink); background: rgba(255,255,255,.08); }

.screen1 {
  position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden;
  background: linear-gradient(180deg, #0f1129 0%, #17183a 50%, #241f45 100%);
}
.sky1 { position: absolute; inset: 0; }
.sky1 i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #fff; opacity: .5; animation: twinkle 3.4s ease-in-out infinite; }
.sky1 i:nth-of-type(2n) { width: 2px; height: 2px; animation-delay: -1.3s; }
.sky1 i:nth-of-type(3n) { animation-duration: 4.8s; animation-delay: -2.6s; }
.sky1 img { position: absolute; display: block; }
.s1-moon { right: 9%; top: 13%; width: clamp(64px, 11vmin, 220px); }
.s1-spark { left: 8%; top: 15%; width: clamp(32px, 5vmin, 96px); animation: twinkle 3.8s ease-in-out infinite; }
.s1-cloud { opacity: .18; animation: cloud 20s ease-in-out infinite alternate; }
.s1-cloud.c1 { left: 20%; top: 20%; width: clamp(80px, 13vmin, 260px); }
.s1-cloud.c2 { right: 22%; top: 9%; width: clamp(60px, 9vmin, 180px); opacity: .12; animation-duration: 26s; animation-direction: alternate-reverse; }
.s1-cloud.c3 { left: 58%; top: 44%; width: clamp(60px, 8vmin, 160px); opacity: .1; animation-duration: 30s; }
/* Hills: the near one's crest is where DouDou sits (66% down) */
.s1-hill {
  position: absolute; left: -35%; right: -35%; top: 66%; height: 120%; border-radius: 50%;
  background: linear-gradient(180deg, #2d2955 0%, #1d1b3a 22%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.s1-hill.back { left: 38%; right: -45%; top: 57%; background: linear-gradient(180deg, #25224b 0%, #191731 25%); }

.words1 { position: absolute; left: 0; right: 0; top: max(112px, 19%); text-align: center; padding: 0 20px; z-index: 2; }
.words1 h1 { margin: 0; font-size: var(--title); line-height: 1.2; font-weight: 600; }
.words1 h1 .soft { color: var(--dim); }
.words1 p { margin: var(--gap) 0 0; color: var(--dim); font-size: var(--body); }

.things1 { position: absolute; inset: 0; }
.b1-thing {
  position: absolute; left: var(--x); top: var(--y); width: max(36px, var(--s)); height: max(36px, var(--s));
  transform: translate(-50%, -50%) rotate(var(--r)); animation: bob var(--d) ease-in-out infinite alternate;
}

.dou1 {
  position: absolute; left: 50%; top: 66%; width: clamp(120px, 18vmin, 320px); border-radius: 22%;
  transform: translate(-50%, -96%); z-index: 2; animation: hop1 5s ease-in-out infinite;
}
@keyframes hop1 { 0%, 80%, 100% { transform: translate(-50%, -96%); } 86% { transform: translate(-50%, calc(-96% - 10px)); } 92% { transform: translate(-50%, -96%); } }
.store1 { position: absolute; left: 50%; top: calc(66% + 32px); transform: translateX(-50%); height: 48px; z-index: 2; white-space: nowrap; }

.foot1 {
  position: absolute; left: 0; right: 0; bottom: 24px; z-index: 2;
  display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 20px; padding: 0 20px;
  color: var(--dim); font-size: 14px;
}
.foot1 a { color: var(--dim); }
.foot1 a:hover { color: var(--ink); text-decoration: none; }

@media (max-width: 600px) {
  .words1 { top: 104px; }
  .s1-moon { top: 30%; right: 7%; }
  .s1-spark { top: 31%; }
  .s1-cloud.c1 { top: 36%; left: 30%; }
  .s1-cloud.c2, .s1-cloud.c3, .t-books, .t-gift, .t-bubbletea, .t-cart, .t-tulip, .t-taxi { display: none !important; }
  .t-coffee { --x: 14% !important; --y: 46% !important; }
  .t-receipt { --x: 86% !important; --y: 46% !important; }
  .t-alarm { --x: 20% !important; --y: 58% !important; }
  .t-box { --x: 80% !important; --y: 58% !important; }
  .s1-hill { left: -80%; right: -80%; }
  .foot1 { font-size: 13px; gap: 4px 16px; bottom: 16px; }
}
@media (max-height: 640px) {
  .words1 { top: 92px; }
}
@media (prefers-reduced-motion: reduce) {
  .sky1 i, .sky1 img, .b1-thing, .dou1 { animation: none !important; }
}

/* About page: room under the bar for the first section */
.v2.about main { padding-top: 72px; }
.s1-hill { top: 70%; }
.s1-hill.back { top: 61%; }
.dou1 { top: 70%; }
.store1 { top: calc(70% + 32px); }
/* Three short menu items fit on phones too */
@media (max-width: 760px) {
  .v2 .bar .wrap { grid-template-columns: 1fr auto 1fr; }
  .v2 .bar nav.secs { display: flex; gap: 0; }
  .v2 .bar nav.secs a { padding: 8px 10px; font-size: 15px; }
}
@media (max-width: 420px) {
  .v2 .brand > span { display: none; }
  .v2 .lang { padding: 0 12px 0 10px; }
}

/* Bar without its own background: logo, menu and language sit straight on the page */
.v2 .bar .wrap { background: none; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.v2 .bar nav.secs a.on { background: none; color: var(--ink); font-weight: 600; }
.v2 .bar nav.secs a:hover { background: none; color: var(--ink); }
/* Long pages: the bar scrolls away with the top, so words never run under it */
body.v2:not(.one) .bar { position: absolute; }

/* =====================================================================
   Bar (2026-10-18, user spec): logo at the far left, 20 from top and left;
   icon 40, name 30, 10 apart. Menu 16 bold, 40 apart. Language 40 × 120 pill.
   ===================================================================== */
.v2 .bar { padding: 20px 20px 0; }
.v2 .bar .wrap { max-width: none; height: 40px; padding: 0; }
.v2 .brand { gap: 10px; font-size: 30px; line-height: 30px; font-weight: 600; }
.v2 .brand img { width: 40px; height: 40px; border-radius: 10px; }
.v2 .bar nav.secs { gap: 40px; }
.v2 .bar nav.secs a { padding: 0; font-size: 16px; font-weight: 700; color: var(--dim); line-height: 40px; }
.v2 .bar nav.secs a.on, .v2 .bar nav.secs a:hover { color: var(--ink); }
.v2 .lang { width: 120px; height: 40px; padding: 0; justify-content: center; border-radius: 999px; font-size: 14px; white-space: nowrap; }
@media (max-width: 760px) {
  .v2 .bar nav.secs { gap: 20px; }
  .v2 .bar nav.secs a { padding: 0; font-size: 16px; }
}
@media (max-width: 520px) {
  .v2 .brand > span { display: none; }
  .v2 .bar nav.secs { gap: 16px; }
  .v2 .lang { width: 104px; }
}

/* Home column: logo 128 (One UI squircle) → title (2 lines) → words (2 lines) → App Store button (40) */
.words1 {
  top: 47%; transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center;
}
.logo1 { width: 128px; height: 128px; clip-path: url(#squircle); margin-bottom: var(--block); }
.words1 h1 { margin: 0; }
.words1 p { margin: var(--gap) 0 0; line-height: 1.6; }
.store1 { position: static; transform: none; height: 40px; padding: 0 20px; font-size: 15px; margin-top: var(--block); }
.store1 svg { width: 16px; height: 16px; }
@media (max-width: 600px) {
  .words1 { top: 46%; }
  .s1-hill { top: 80%; }
  .s1-hill.back { top: 74%; }
  .s1-moon { top: 13%; right: 8%; width: 52px; }
  .s1-spark { top: 14%; left: 8%; width: 30px; }
  .s1-cloud.c1 { top: 72%; left: 8%; width: 70px; }
  .t-coffee { --x: 12% !important; --y: 87% !important; }
  .t-alarm { --x: 32% !important; --y: 90% !important; }
  .t-box { --x: 68% !important; --y: 90% !important; }
  .t-receipt { --x: 88% !important; --y: 87% !important; }
  .foot1 { bottom: 12px; }
}
@media (max-height: 700px) {
  .logo1 { width: 96px; height: 96px; margin-bottom: var(--gap); }
  .store1 { margin-top: var(--gap); }
}
.s1-cloud.c3 { left: 78%; top: 44%; }
.v2 .bar nav.secs a.on { font-weight: 700; }

/* Language button: white, as wide as its words, 16 each side */
.v2 .lang { width: auto; padding: 0 16px; background: #fff; color: #000; font-weight: 600; }
.v2 .lang:hover { background: #f0f0f3; }

/* App Store button: Apple mark left, two lines right, height follows the words */
.store1 {
  display: inline-flex; align-items: center; gap: 10px; height: auto; padding: 8px 20px 8px 16px;
  border-radius: 14px; background: #fff; color: #000; margin-top: var(--block); white-space: nowrap;
}
.store1 svg { width: 26px; height: 26px; flex: none; }
.store1 .st { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
.store1 small { font-size: 12px; font-weight: 500; }
.store1 b { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }

/* Privacy, four points, just above the footer; no rules above them */
.priv1 {
  position: absolute; left: 50%; bottom: 72px; transform: translateX(-50%); z-index: 2;
  width: min(1200px, calc(100% - 40px)); display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap) var(--block);
}
.priv1 > div { display: grid; grid-template-columns: 32px 1fr; column-gap: 12px; align-items: start; }
.priv1 img { width: 32px; height: 32px; grid-row: span 2; }
.priv1 b { font-size: 16px; font-weight: 700; line-height: 1.4; }
.priv1 small { font-size: 14px; font-weight: 300; color: var(--dim); line-height: 1.5; margin-top: 4px; }
.words1 { top: 42%; }
@media (max-width: 860px) {
  .priv1 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .priv1 { bottom: 52px; gap: 12px 16px; }
  .priv1 > div { grid-template-columns: 24px 1fr; column-gap: 8px; align-items: center; }
  .priv1 img { width: 24px; height: 24px; grid-row: auto; }
  .priv1 small { display: none; }
  .words1 { top: 40%; }
  .t-alarm, .t-box { display: none !important; }
  .t-coffee { --x: 24% !important; --y: 21% !important; }
  .t-receipt { --x: 76% !important; --y: 21% !important; }
  .s1-cloud.c1 { top: 66%; }
}
@media (max-height: 760px) and (min-width: 601px) {
  .priv1 small { display: none; }
}

/* Everything 1000 wide: bar (logo and language come back in), privacy row, footer, pages */
.v2 { --max: 1000px; }
.v2 .bar .wrap { max-width: var(--max); margin: 0 auto; }
.priv1 { width: min(1000px, calc(100% - 40px)); }
.v2 .wrap { max-width: var(--max); }
.v2 footer .wrap { max-width: var(--max); }

/* =====================================================================
   Type and bottom block (2026-10-18, user spec)
   ===================================================================== */
/* Bar: logo name, menu and language all 20; menu bold; English in capitals */
.v2 .brand { font-size: 20px; line-height: 40px; }
.v2 .bar nav.secs a { font-size: 20px; font-weight: 700; text-transform: uppercase; }
.v2 .lang { font-size: 20px; text-transform: uppercase; }
.v2 .lang svg { width: 20px; height: 20px; }

/* Banner: title 40, words 20 */
.words1 h1 { font-size: 40px; line-height: 1.25; }
.words1 p { font-size: 20px; line-height: 1.6; }

/* Bottom block: privacy (title 20 bold, words 20 light, 10 apart, 20 from the icon),
   a 1px rule 20 below, then the footer 20 below the rule and 20 above the screen's edge */
.bottom1 {
  position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 2;
  width: min(1000px, calc(100% - 40px));
}
.bottom1 .priv1 { position: static; transform: none; width: auto; gap: 20px; }
.priv1 > div { grid-template-columns: 40px 1fr; column-gap: 20px; }
.priv1 img { width: 40px; height: 40px; }
.priv1 b { font-size: 20px; font-weight: 700; line-height: 1.3; }
.priv1 small { font-size: 20px; font-weight: 300; line-height: 1.45; margin-top: 10px; }
.rule1 { border: 0; height: 1px; background: rgba(255,255,255,.16); margin: 20px 0 0; }
.foot1 {
  position: static; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 20px;
  padding: 0; margin-top: 20px; font-size: 14px;
}
.foot1 > div { display: flex; gap: 20px; flex-wrap: wrap; }
.words1 { top: 38%; }
@media (max-height: 860px) and (min-width: 601px) {
  .priv1 small { display: none; }
  .words1 { top: 42%; }
}
@media (max-width: 860px) {
  .bottom1 .priv1 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .words1 h1 { font-size: 32px; }
  .words1 p { font-size: 16px; }
  .bottom1 { bottom: 20px; }
  .bottom1 .priv1 { gap: 12px 16px; }
  .priv1 > div { grid-template-columns: 24px 1fr; column-gap: 8px; }
  .priv1 img { width: 24px; height: 24px; }
  .priv1 b { font-size: 16px; }
  .priv1 small { display: none; }
  .foot1 { font-size: 13px; }
  .foot1 > div { gap: 12px; }
  .v2 .bar nav.secs a, .v2 .lang, .v2 .brand { font-size: 16px; }
  .v2 .lang svg { width: 16px; height: 16px; }
}
/* Privacy items stacked: icon, 20, title, 10, words */
@media (min-width: 601px) {
  .priv1 > div { display: flex; flex-direction: column; align-items: flex-start; }
  .priv1 img { margin-bottom: 20px; }
}
.t-cart, .t-tulip { display: none !important; }

/* Fonts: English in Montserrat (Chinese stays the system's); the logo's "Foldie" in Hachi Maru Pop */
.v2 { --font: "Montserrat", -apple-system, BlinkMacSystemFont, "PingFang SC", "PingFang TC", "PingFang HK", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; font-family: var(--font); }
.v2 .brand .en { font-family: "Hachi Maru Pop", var(--font); font-weight: 700; }
.v2 .brand .en { -webkit-text-stroke: 0.035em currentColor; letter-spacing: 0.02em; }

/* Fonts served from our own folder (no Google requests) */
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 300 800; font-display: swap;
  src: url("fonts/Montserrat-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: "Montserrat"; font-style: normal; font-weight: 300 800; font-display: swap;
  src: url("fonts/Montserrat-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 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; }
/* Only the six letters of "Foldie" */
@font-face { font-family: "Hachi Maru Pop"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/HachiMaruPop-Foldie.woff2") format("woff2"); }

/* Logo: just the word, 40 tall, in every language */
.v2 .brand {
  font-family: "Hachi Maru Pop", var(--font); font-size: 40px; line-height: 40px; font-weight: 700;
  -webkit-text-stroke: 0.035em currentColor; letter-spacing: 0.02em; color: var(--ink); gap: 0;
}
@media (max-width: 600px) { .v2 .brand { font-size: 28px; } }
@media (max-width: 600px) {
  .v2 .bar .wrap { grid-template-columns: auto 1fr auto; column-gap: 12px; }
  .v2 .bar nav.secs a { white-space: nowrap; }
  .v2 .brand { white-space: nowrap; }
}

/* Logo: the word's ink is 40 tall (not the font size). Hachi Maru Pop's ink with the stroke is
   about 0.855 em, so 47px; nudged up so the ink sits in the middle of the 40px bar. */
.v2 .brand { font-size: 47px; line-height: 40px; height: 40px; display: flex; align-items: center; }
.v2 .brand { transform: translateY(-0.147em); }
@media (max-width: 600px) { .v2 .brand { font-size: 33px; } }

/* Bottom: only the footer, 20 white */
.bottom1 { bottom: 20px; }
.foot1 { margin-top: 0; font-size: 20px; color: #fff; }
.foot1 a { color: #fff; }
.foot1 a:hover { color: #fff; opacity: .7; }
.words1 { top: 45%; }
.t-cart, .t-tulip { display: block !important; }
@media (max-width: 600px) {
  .t-cart, .t-tulip { display: none !important; }
  .foot1 { font-size: 15px; }
}
.v2 .brand { display: block; }
@media (max-width: 600px) {
  .v2 .brand { font-size: 26px; }
  .v2 .lang { font-size: 14px; padding: 0 12px; }
  .v2 .lang svg { width: 14px; height: 14px; }
}

/* Logo ink 30 tall, centred on the 40 language pill */
.v2 .brand { font-size: 35px; transform: none; }

/* App Store: full pill, every word 20, size follows the words */
.store1 { border-radius: 999px; padding: 10px 28px 10px 22px; gap: 12px; }
.store1 svg { width: 30px; height: 30px; }
.store1 small, .store1 b { font-size: 20px; line-height: 1.25; }
.store1 small { font-weight: 500; }
.v2 .brand { transform: translateY(-5px); }
@media (max-width: 600px) { .v2 .bar .wrap { column-gap: 8px; } .v2 .bar nav.secs { gap: 12px; } .v2 .lang { padding: 0 10px; } .v2 .lang svg { display: none; } }
@media (max-width: 600px) { .v2 .bar nav.secs { gap: 10px; } .v2 .bar nav.secs a { font-size: 15px; } .v2 .lang { font-size: 13px; } }

/* =====================================================================
   Bar = the logo alone, centred: "Foldie" (ink 40) over 兜兜 (ink 20)
   ===================================================================== */
.v2 .bar .wrap { display: flex; justify-content: center; height: auto; }
.v2 .brand {
  display: flex; flex-direction: column; align-items: center; transform: none; height: auto;
  font-family: var(--font); font-size: 16px; line-height: 1; -webkit-text-stroke: 0; letter-spacing: 0;
}
.v2 .brand-en {
  font-family: "Hachi Maru Pop", var(--font); font-weight: 700; font-size: 47px; line-height: 40px; height: 40px;
  -webkit-text-stroke: 0.035em currentColor; letter-spacing: 0.02em; transform: translateY(-7px);
}
.v2 .brand-zh { font-size: 21.6px; font-weight: 600; line-height: 20px; height: 20px; margin-top: 8px; letter-spacing: 0.1em; }

/* Language at the far right of the footer row; its menu opens upwards there */
.foot-lang { position: relative; }
.foot-lang .langmenu { top: auto; bottom: calc(100% + 12px); transform-origin: bottom right; }
.bottom1 { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 20px; }
.bottom1 .foot1 { grid-column: 2; justify-content: center; flex-wrap: nowrap; gap: 20px; white-space: nowrap; }
.bottom1 .foot-lang { grid-column: 3; justify-self: end; }
.words1 { top: 48%; }
@media (max-width: 860px) {
  .bottom1 { grid-template-columns: 1fr; row-gap: 16px; }
  .bottom1 .foot1 { grid-column: 1; flex-wrap: wrap; gap: 8px 16px; }
  .bottom1 .foot-lang { grid-column: 1; grid-row: 1; justify-self: end; }
}
/* Other pages: the language sits at the right end of their footer */
.v2 footer .wrap { align-items: center; }
.v2 footer .wrap .foot-lang { margin-left: auto; }
.v2 .brand > .brand-en, .v2 .brand > .brand-zh { display: block; }
@media (max-width: 600px) { .v2 .brand-en { font-size: 47px; } .words1 { top: 50%; } }

/* Logo 40 from the top; 兜兜 20 below Foldie (ink to ink) */
.v2 .bar { padding-top: 40px; }
.v2 .brand-zh { margin-top: 20.4px; }
/* App Store: 20 inside left and right */
.store1 { padding-left: 20px; padding-right: 20px; }

/* Language: plain text in the footer row, with a small down triangle; 40 between footer items */
.v2 .lang, .v2 .lang:hover {
  background: none; color: inherit; width: auto; height: auto; padding: 0; border-radius: 0;
  font: inherit; font-weight: inherit; text-transform: none; gap: 8px; line-height: inherit;
}
.v2 .lang svg { display: inline-block; width: 1em; height: 1em; }
.v2 .lang::after {
  content: ""; width: 0; height: 0; margin-left: 2px;
  border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid currentColor;
}
.v2 .lang:hover { opacity: .7; }
.bottom1 { display: block; }
.bottom1 .foot1 { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 12px 40px; white-space: nowrap; }
.foot1 .foot-lang { position: relative; display: inline-flex; }
@media (max-width: 860px) {
  .bottom1 .foot1 { gap: 10px 24px; }
}
@media (max-width: 600px) {
  .v2 .lang, .v2 .lang:hover { font-size: inherit; padding: 0; }
  .v2 .lang svg { display: inline-block; }

}
.store1 { padding-left: 40px; padding-right: 40px; }
.store1 { padding-left: 40px; padding-right: 40px; }
.bottom1 { bottom: 40px; }

/* =====================================================================
   Privacy and Support as one screen, like the home page: the same night,
   the logo on top, the footer below, and the words in a card between them
   ===================================================================== */
.doc1 .bar { position: absolute; }
.panel1 {
  position: absolute; z-index: 2; left: 50%; transform: translateX(-50%);
  top: 160px; bottom: 120px; width: min(800px, calc(100% - 40px));
  display: flex; flex-direction: column;
  padding: 32px 32px 16px; border-radius: 24px;
  background: rgba(20, 20, 34, 0.78); border: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.panel1 > .en:not(.qa1), .panel1 > .zh:not(.qa1) { display: contents; }
html[data-lang="en"] .panel1 > .zh, html[data-lang="zh"] .panel1 > .en { display: none !important; }
.panel1 h1 { margin: 0; font-size: 32px; line-height: 1.2; font-weight: 600; }
.panel1 .date { margin: 8px 0 0; color: var(--dim); font-size: 16px; }
.panel1 .mail1 { margin: 16px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; font-size: 16px; color: var(--dim); }
.panel1 .mail1 a { font-size: 20px; font-weight: 600; color: var(--blue); }
.qa1 { margin-top: 20px; overflow-y: auto; flex: 1; min-height: 0; scrollbar-width: none; }
.qa1::-webkit-scrollbar { display: none; }
.qa1 details { border-top: 1px solid rgba(255,255,255,.1); }
.qa1 summary {
  cursor: pointer; list-style: none; padding: 14px 0; font-size: 16px; font-weight: 600;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.qa1 summary::-webkit-details-marker { display: none; }
.qa1 summary::after { content: "+"; color: var(--dim); font-weight: 400; font-size: 20px; line-height: 1; }
.qa1 details[open] summary::after { content: "–"; }
.qa1 details p { margin: 0 0 16px; color: var(--dim); font-size: 16px; font-weight: 300; line-height: 1.7; }
.qa1 a { color: var(--blue); }
@media (max-width: 600px) {
  .panel1 { top: 136px; bottom: 132px; padding: 24px 20px 8px; }
  .panel1 h1 { font-size: 26px; }
  .qa1 summary { padding: 12px 0; font-size: 15px; }
  .qa1 details p { font-size: 15px; }
}
.qa1 summary { padding: 11px 0; line-height: 22px; }
.panel1 { top: 150px; bottom: 112px; }
.panel1 { bottom: auto; max-height: calc(100% - 150px - 112px); } @media (max-width: 600px) { .panel1 { max-height: calc(100% - 136px - 132px); } }
@media (max-width: 600px) { .qa1 summary { padding: 9px 0; line-height: 20px; } .qa1 { margin-top: 12px; } .panel1 .date { font-size: 14px; } }
/* Cards sit in the middle of the screen (same room kept above and below for the logo and footer) */
.panel1 { top: 50%; transform: translate(-50%, -50%); max-height: calc(100% - 300px); }
@media (max-width: 600px) { .panel1 { max-height: calc(100% - 280px); } }