/* #247 refresh: the window from real captures (layered, supercut.ai depth), everyday questions, WhatsApp, privacy
   (linear.app/security layout), footer (granola.ai spirit). Tokens come from styles.css. */

/* light / dark captures: one <picture> per theme, the hidden one is never loaded (display:none + loading=lazy) */
.t-l { display: none; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .t-d { display: none; } :root:not([data-theme="dark"]) .t-l { display: block; } }
:root[data-theme="light"] .t-d { display: none; } :root[data-theme="light"] .t-l { display: block; }
:root[data-theme="dark"] .t-d { display: block; } :root[data-theme="dark"] .t-l { display: none; }

.lx-head kbd.k { font: 500 14px/1 var(--font); padding: 2px 6px; border-radius: 6px; box-shadow: inset 0 0 0 1px var(--line2); color: var(--fg); vertical-align: 2px; }
.lx-head .soon { vertical-align: 3px; margin-left: 4px; color: #25d366; box-shadow: inset 0 0 0 1px color-mix(in srgb, #25d366 45%, transparent); }

/* ───── the window, layered ───── */
.wx { position: relative; aspect-ratio: 1200 / 790; border-radius: 28px; overflow: hidden; isolation: isolate;
  background: radial-gradient(70% 60% at 22% 8%, color-mix(in srgb, #8a6cff 22%, transparent), transparent 70%),
              radial-gradient(60% 60% at 90% 100%, color-mix(in srgb, #ff7a59 18%, transparent), transparent 70%), var(--card2);
  box-shadow: inset 0 0 0 1px var(--line); }
.wx figure { position: absolute; margin: 0; }
.wx img { display: block; width: 100%; height: auto; }
.wx-main { left: 4.6%; top: 7%; width: 76%; border-radius: 1.9vw; }
.wx-main img { border-radius: min(22px, 1.6vw); box-shadow: 0 0 0 .5px rgba(0,0,0,.25), 0 40px 90px -20px rgba(0,0,0,.45), 0 12px 30px -10px rgba(0,0,0,.25); }
.wx-pv { right: 3.6%; top: 47%; width: 47%; transform: translateY(16px); opacity: 0; transition: transform 1s var(--ease) .25s, opacity .8s var(--ease) .25s; }
.wx-pv img { border-radius: min(22px, 1.1vw); box-shadow: 0 0 0 .5px rgba(0,0,0,.3), 0 50px 100px -20px rgba(0,0,0,.55), 0 16px 40px -12px rgba(0,0,0,.35); }
.wx-pv figcaption { position: absolute; right: calc(100% + 16px); bottom: 18%; white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px 0 5px; border-radius: 15px; font-size: 13px; font-weight: 500;
  color: var(--fg); background: color-mix(in srgb, var(--bg2) 80%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: inset 0 0 0 1px var(--line2), 0 6px 18px rgba(0,0,0,.12); }
.wx-pv figcaption kbd { font: 600 12px/1 var(--font); min-width: 22px; height: 22px; display: grid; place-items: center; border-radius: 6px; background: var(--ghost); box-shadow: inset 0 0 0 1px var(--line2); }
.wx-ag { right: 3.6%; top: 9%; width: 30%; border-radius: 14px; overflow: hidden; transform: translateY(12px); opacity: 0; transition: transform 1s var(--ease) .45s, opacity .8s var(--ease) .45s;
  box-shadow: 0 0 0 .5px rgba(0,0,0,.3), 0 30px 60px -16px rgba(0,0,0,.5); }
.reveal.in .wx-pv, .reveal.in .wx-ag { transform: none; opacity: 1; }
.wx-note { margin-top: 14px; text-align: center; font-size: 12.5px; color: var(--fg2); }

/* ───── ask: everyday questions ───── */
.aq { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 72px; }
.aq-card { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 14px 14px 16px; border-radius: 22px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line), var(--shadow); }
.aq-card q { quotes: none; display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 14px; border-radius: 12px; background: var(--card2); box-shadow: inset 0 0 0 1px var(--line); font-size: 15px; font-weight: 500; letter-spacing: -.01em; }
.aq-card q::before { content: ""; width: 14px; height: 14px; flex: none; opacity: .55; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'%3E%3Cpath d='M6.2 12.3a6 6 0 0 0 3.6-1.2l3.6 3.6c.2.2.4.3.7.3.5 0 .9-.4.9-.9 0-.3-.1-.5-.3-.7l-3.6-3.6a6.1 6.1 0 1 0-4.9 2.5Zm0-1.6a4.5 4.5 0 1 1 0-9 4.5 4.5 0 0 1 0 9Z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'%3E%3Cpath d='M6.2 12.3a6 6 0 0 0 3.6-1.2l3.6 3.6c.2.2.4.3.7.3.5 0 .9-.4.9-.9 0-.3-.1-.5-.3-.7l-3.6-3.6a6.1 6.1 0 1 0-4.9 2.5Zm0-1.6a4.5 4.5 0 1 1 0-9 4.5 4.5 0 0 1 0 9Z'/%3E%3C/svg%3E") center / contain no-repeat; }
.aq-card > p { font-size: 18px; line-height: 1.42; letter-spacing: -.015em; padding: 0 6px; text-wrap: pretty; }
.aq-card > p b { font-weight: 600; }
.aq-src { margin-top: auto; display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 14px; background: var(--card2); box-shadow: inset 0 0 0 1px var(--line); }
.aq-th { width: 72px; height: 45px; flex: none; border-radius: 7px; background: #222 center / cover no-repeat; box-shadow: 0 0 0 .5px var(--line2), 0 2px 6px rgba(0,0,0,.12); }
.aq-src > span:last-child { display: block; font-size: 13px; line-height: 1.45; color: var(--fg2); min-width: 0; }
.aq-src b { color: var(--fg); font-weight: 600; }
.aq-src small { display: block; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aq-card:nth-child(2) { transition-delay: .08s; } .aq-card:nth-child(3) { transition-delay: .16s; }
.aq-more { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 20px auto 0; max-width: 900px; }
.aq-more li { font-size: 14px; color: var(--fg2); padding: 8px 14px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line2); }
#ask .vid-frame { margin-top: 56px; }
#ask .vid-frame video { aspect-ratio: 1600 / 1008; }

/* ───── WhatsApp ───── */
.wa { position: relative; border-radius: 28px; padding: 64px 48px 40px; overflow: hidden; isolation: isolate;
  background: radial-gradient(60% 70% at 18% 20%, color-mix(in srgb, #25d366 16%, transparent), transparent 70%), radial-gradient(50% 60% at 95% 90%, color-mix(in srgb, #8a6cff 14%, transparent), transparent 70%), var(--card2);
  box-shadow: inset 0 0 0 1px var(--line); }
.wa-mac { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 150px minmax(0, 1fr); align-items: center; gap: 0; padding: 48px 40px 40px; border-radius: 24px;
  border: 1.5px dashed color-mix(in srgb, var(--fg) 22%, transparent); max-width: 1000px; margin: 0 auto; }
.wa-tag, .v-tag { position: absolute; left: 20px; top: -13px; display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 11px; border-radius: 13px; font-size: 12.5px; font-weight: 600; color: var(--fg); background: var(--bg2); box-shadow: inset 0 0 0 1px var(--line2); }
.wa-tag svg, .v-tag svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.wa-chat { border-radius: 16px; overflow: hidden; background: #efeae2; color: #111; box-shadow: 0 0 0 .5px rgba(0,0,0,.2), 0 30px 60px -20px rgba(0,0,0,.45); }
.wa-top { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: #f0f2f5; border-bottom: 1px solid rgba(0,0,0,.06); }
.wa-av { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 12px; font-weight: 700; color: #fff; background: #e8912d; }
.wa-top span { display: flex; flex-direction: column; font-size: 14px; line-height: 1.2; } .wa-top small { font-size: 12px; color: #667781; }
.wa-body { display: flex; flex-direction: column; gap: 6px; padding: 14px 12px 16px; }
.wa-body p { max-width: 82%; padding: 7px 10px; border-radius: 9px; font-size: 13.5px; line-height: 1.35; background: #fff; box-shadow: 0 1px .5px rgba(0,0,0,.13); align-self: flex-start; }
.wa-body p.out { align-self: flex-end; background: #d9fdd3; }
.wa-body p i { font-style: normal; color: #53bdeb; font-size: 11px; margin-left: 6px; letter-spacing: -2px; }
.wa-flow { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 12px; color: var(--fg2); text-align: center; }
.wa-flow i { width: 90px; height: 1.5px; background: repeating-linear-gradient(90deg, var(--fg3) 0 5px, transparent 5px 9px); position: relative; }
.wa-flow i:last-child::after { content: ""; position: absolute; right: -2px; top: -4px; border: 4.5px solid transparent; border-left: 6px solid var(--fg3); }
.wa-ask { border-radius: 18px; padding: 10px 10px 14px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line2), 0 30px 60px -20px rgba(0,0,0,.4); }
.wa-q { display: flex; align-items: center; gap: 9px; height: 40px; padding: 0 12px; border-radius: 11px; background: var(--card2); box-shadow: inset 0 0 0 1px var(--line); font-size: 14px; font-weight: 500; }
.wa-q svg { color: var(--fg2); }
.wa-ask p { margin: 14px 6px 0; font-size: 16px; line-height: 1.42; letter-spacing: -.01em; }
.wa-proof { display: flex; align-items: center; gap: 8px; margin: 12px 6px 0; font-size: 12.5px; color: var(--fg2); }
.wa-ic { width: 16px; height: 16px; border-radius: 5px; background: linear-gradient(#5fe08a, #1fa855); }
.wa-no { list-style: none; display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.wa-no li { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px 0 10px; border-radius: 17px; font-size: 13.5px; color: var(--fg); background: color-mix(in srgb, var(--bg2) 70%, transparent); box-shadow: inset 0 0 0 1px var(--line2); }
.wa-no svg { color: var(--accent); }

/* ───── how: step 2 (look) and 3 (open) ───── */
.vis-look { padding: 14px 34px 0 12px; display: flex; flex-direction: column; gap: 2px; }
.lk-row { position: relative; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 8px; border-radius: 10px; font-size: 12.5px; font-weight: 500; letter-spacing: -.01em; white-space: nowrap; }
.lk-row .ic { width: 18px; height: 18px; flex: none; border-radius: 5px; background: var(--c); box-shadow: inset 0 0 0 .5px var(--line2); }
.lk-row time { width: 34px; flex: none; font-size: 11px; color: var(--fg2); font-weight: 400; font-variant-numeric: tabular-nums; }
.lk-row.now time { color: var(--fg); font-weight: 600; }
.lk-row span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.lk-row .th { width: 42px; height: 26px; flex: none; border-radius: 5px; background: #222 center / cover no-repeat; box-shadow: 0 0 0 .5px var(--line2); }
.lk-row .nd { position: absolute; right: -27px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; z-index: 1; }
.lk-row .nd.now { background: var(--accent); } .lk-row .nd.open { background: var(--card2); box-shadow: inset 0 0 0 1.8px var(--accent); }
.lk-line { position: absolute; right: 21px; top: 0; bottom: 0; width: 1.5px; background: var(--fg3); }
.lk-row.sel { background: var(--ghost); box-shadow: inset 0 0 0 1px var(--line); }
.step.in .lk-row.sel { animation: lksel 4s var(--ease) infinite; }
@keyframes lksel { 0%, 10% { transform: translateY(-42px); opacity: .0; } 22%, 88% { transform: none; opacity: 1; } 100% { opacity: 0; } }
.vis-open { display: grid; place-items: center; }
.op-win { width: 84%; border-radius: 12px; padding: 8px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line2), 0 16px 40px -12px rgba(0,0,0,.3); display: flex; flex-direction: column; gap: 6px; }
.op-strip { display: flex; gap: 6px; } .op-strip i { flex: 1; aspect-ratio: 16 / 10; border-radius: 4px; background: #222 center / cover no-repeat; box-shadow: 0 0 0 .5px var(--line2); }
.op-strip i.on { box-shadow: 0 0 0 1.5px #0a84ff; }
.op-q { height: 14px; border-radius: 5px; background: var(--card2); box-shadow: inset 0 0 0 1px var(--line); }
.op-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.op-cols > div { border-radius: 6px; padding: 6px; background: var(--card2); display: flex; flex-direction: column; gap: 4px; }
.op-cols small { font-size: 7.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--fg2); }
.op-cols b { display: flex; align-items: center; gap: 5px; height: 9px; } .op-cols b::after { content: ""; flex: 1; height: 4px; border-radius: 2px; background: var(--line2); }
.op-cols .r { width: 7px; height: 7px; border-radius: 50%; box-shadow: inset 0 0 0 1.4px var(--accent); }
.op-cols .p { width: 7px; height: 7px; border-radius: 50%; background: conic-gradient(#0a84ff 0 62%, color-mix(in srgb, #0a84ff 25%, transparent) 62%); }
.op-cols .a { width: 7px; height: 7px; border-radius: 2px; background: #d97757; }
.op-key { position: absolute; right: 14px; bottom: 12px; display: flex; gap: 3px; }
.op-key kbd { font: 600 11px/1 var(--font); min-width: 22px; height: 22px; display: grid; place-items: center; border-radius: 6px; background: var(--card); color: var(--fg); box-shadow: inset 0 0 0 1px var(--line2), 0 1px 0 var(--line2); }
.step.in .op-win { animation: opin 3.6s var(--ease) infinite; }
@keyframes opin { 0%, 18% { opacity: 0; transform: translateY(8px) scale(.97); } 34%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.step.in .op-key kbd { animation: opkey 3.6s var(--ease) infinite; }
@keyframes opkey { 0%, 10% { transform: none; } 14% { transform: translateY(1px) scale(.94); } 20%, 100% { transform: none; } }

/* ───── privacy (linear.app/security) ───── */
.pv-sec { max-width: 1280px; margin: 0 auto; padding: 180px 40px 0; }
.pv-head { text-align: center; max-width: 760px; margin: 0 auto; }
.pv-eye { font-size: 14px; color: var(--fg2); margin-bottom: 14px; }
.pv-head h2 { font: 560 64px/1.02 var(--display); letter-spacing: -.035em; }
.pv-head > p:last-child { margin: 20px auto 0; max-width: 34em; font-size: 19px; line-height: 1.5; color: var(--fg2); text-wrap: balance; }
.vault { display: grid; grid-template-columns: minmax(0, 1fr) 120px 300px; align-items: center; margin-top: 80px; }
.v-mac { position: relative; padding: 44px 28px 24px; border-radius: 26px; background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line2), 0 0 0 6px color-mix(in srgb, var(--accent) 5%, transparent), 0 40px 90px -50px color-mix(in srgb, var(--accent) 22%, transparent), var(--shadow); }
.v-chain { display: flex; align-items: stretch; gap: 0; }
.v-node { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; padding: 16px; border-radius: 16px; background: var(--card2); box-shadow: inset 0 0 0 1px var(--line); }
.v-node b { font-size: 15px; font-weight: 600; letter-spacing: -.01em; margin-top: 8px; } .v-node small { font-size: 12.5px; color: var(--fg2); line-height: 1.4; }
.v-rec { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--fg); position: relative; } .v-rec::after { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: var(--accent); animation: breathe 2.6s ease-in-out infinite; }
.v-db { width: 22px; height: 22px; display: flex; flex-direction: column; justify-content: space-between; } .v-db s { height: 6px; border-radius: 3px; box-shadow: inset 0 0 0 1.6px var(--fg); }
.v-pb svg { display: block; }
.v-arr { width: 22px; align-self: center; height: 1.5px; background: var(--fg3); position: relative; margin: 0 6px; flex: none; }
.v-arr::after { content: ""; position: absolute; right: -2px; top: -4px; border: 4.5px solid transparent; border-left: 6px solid var(--fg3); }
.v-stay { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--line2); }
.v-stay span { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px 0 10px; border-radius: 15px; font-size: 13px; background: var(--card2); box-shadow: inset 0 0 0 1px var(--line); }
.v-stay svg, .pv-facts svg, .pv-k svg { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.v-stay em { font-style: normal; font-size: 12.5px; color: var(--fg2); margin-left: 4px; }
.v-gate { display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 11.5px; line-height: 1.35; color: var(--fg2); text-align: center; }
.v-gate i { width: 100%; height: 1.5px; background: repeating-linear-gradient(90deg, var(--fg3) 0 5px, transparent 5px 9px); position: relative; }
.v-gate i::after { content: ""; position: absolute; right: -2px; top: -4px; border: 4.5px solid transparent; border-left: 6px solid var(--fg3); }
.v-out { position: relative; padding: 36px 18px 18px; border-radius: 22px; border: 1.5px dashed var(--line2); }
.v-snip { border-radius: 14px; padding: 12px 14px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line2); font: 12.5px/1.5 ui-monospace, "SF Mono", Menlo, monospace; }
.v-snip small { display: block; font: 600 10.5px/1 var(--font); letter-spacing: .05em; text-transform: uppercase; color: var(--fg2); margin-bottom: 8px; }
.v-snip mark { background: color-mix(in srgb, var(--fg) 10%, transparent); color: inherit; border-radius: 4px; padding: 0 3px; }
.v-px { display: block; margin-top: 12px; font-size: 12px; color: var(--fg2); line-height: 1.4; }
.pv-grid { display: grid; grid-template-columns: 5fr 7fr; gap: 40px 64px; margin-top: 96px; padding-top: 48px; border-top: 1px solid var(--line); }
.pv-k { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--accent); margin-bottom: 14px; }
.pv-lead p:last-child { font-size: 21px; line-height: 1.45; letter-spacing: -.012em; color: var(--fg2); text-wrap: pretty; }
.pv-lead b { color: var(--fg); font-weight: 560; } .pv-lead a { color: var(--fg); text-underline-offset: 3px; text-decoration-color: var(--fg3); }
.pv-facts { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 36px 40px; }
.pv-facts b { display: flex; align-items: center; gap: 9px; font-size: 15.5px; font-weight: 560; letter-spacing: -.01em; margin-bottom: 8px; }
.pv-facts span { font-size: 15px; line-height: 1.55; color: var(--fg2); }

/* ───── footer (granola.ai spirit) ───── */
.gf { max-width: 1280px; margin: 40px auto 0; padding: 72px 40px 0; overflow: hidden; border-top: 1px solid var(--line); }
.gf-cols { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; }
.gf-about .brand { font-size: 16px; } .gf-about p { margin-top: 14px; max-width: 22em; font-size: 15px; line-height: 1.5; color: var(--fg2); }
.gf nav { display: flex; flex-direction: column; gap: 10px; }
.gf h3 { font: 500 22px/1.2 var(--display); letter-spacing: -.02em; margin-bottom: 10px; }
.gf nav a { font-size: 15px; color: var(--fg2); text-decoration: none; transition: color .15s; width: max-content; }
.gf nav a:hover { color: var(--fg); }
.gf nav a[hidden] { display: none; }
.gf-row { display: flex; justify-content: space-between; gap: 16px; margin-top: 72px; font-size: 13px; color: var(--fg2); }
.gf-word { display: flex; align-items: center; gap: .06em; margin: 28px 0 -.16em -.04em; font: 650 clamp(72px, 17.4vw, 252px)/1 var(--display); letter-spacing: -.06em; color: var(--fg); white-space: nowrap; user-select: none; }
.gf-word svg { width: .74em; height: .74em; flex: none; margin-right: .04em; }

/* ───── responsive ───── */
@media (max-width: 900px) {
  .aq { grid-template-columns: 1fr; max-width: 520px; margin-left: auto; margin-right: auto; }
  .wa { padding: 44px 16px 28px; }
  .wa-mac { grid-template-columns: 1fr; padding: 36px 16px 20px; gap: 0; }
  .wa-flow { flex-direction: row; justify-content: center; padding: 18px 0; }
  .wa-flow i { width: 1.5px; height: 26px; background: repeating-linear-gradient(180deg, var(--fg3) 0 5px, transparent 5px 9px); }
  .wa-flow i:first-child { display: none; }
  .wa-flow i:last-child::after { right: -4px; top: auto; bottom: -2px; border: 4.5px solid transparent; border-top: 6px solid var(--fg3); }
  .vault { grid-template-columns: 1fr; gap: 0; margin-top: 56px; }
  .v-chain { flex-direction: column; }
  .v-arr { width: 1.5px; height: 18px; align-self: center; margin: 6px 0; }
  .v-arr::after { right: -4px; top: auto; bottom: -2px; border: 4.5px solid transparent; border-top: 6px solid var(--fg3); }
  .v-gate { padding: 18px 0; flex-direction: row; justify-content: center; }
  .v-gate i { width: 1.5px; height: 40px; background: repeating-linear-gradient(180deg, var(--fg3) 0 5px, transparent 5px 9px); }
  .v-gate i::after { right: -4px; top: auto; bottom: -2px; border: 4.5px solid transparent; border-top: 6px solid var(--fg3); }
  .pv-grid { grid-template-columns: 1fr; margin-top: 64px; }
  .gf-cols { grid-template-columns: 1fr 1fr; }
  .gf-about { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .wx { aspect-ratio: auto; padding: 22px 14px 18px; display: flex; flex-direction: column; }
  .wx figure { position: relative; left: auto; right: auto; top: auto; }
  .wx-main { width: 100%; }
  .wx-pv { width: 88%; align-self: flex-end; margin-top: -14%; }
  .wx-pv figcaption { right: auto; left: 0; bottom: calc(100% + 8px); }
  .wx-ag { width: 92%; margin-top: 14px; align-self: center; }
}
@media (max-width: 640px) {
  .pv-sec { padding: 120px 16px 0; }
  .pv-head h2 { font-size: 40px; }
  .pv-head > p:last-child { font-size: 16.5px; }
  .pv-facts { grid-template-columns: 1fr; gap: 26px; }
  .pv-lead p:last-child { font-size: 18px; }
  .aq { margin-top: 44px; }
  .aq-card > p { font-size: 17px; }
  .gf { padding: 56px 16px 0; }
  .gf-row { flex-direction: column; margin-top: 48px; }
  .gf h3 { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  .wx-pv, .wx-ag { transition: none; opacity: 1; transform: none; }
  .step.in .lk-row.sel, .step.in .op-win, .step.in .op-key kbd, .v-rec::after { animation: none; }
}