/* How WayVibe works: the guide (v2, Oct 2026). Scoped to body[data-page="guide"].
   A static document: every word is in the markup, so it reads fully without JS.
   Ruled numbered sections in a zig-zag: text beside a phone frame, alternating sides, stacked on
   mobile. Phones hold a real app screenshot where one exists, otherwise a static skeleton of that
   screen. No animation. The character appears once, static, in the hero. Lavender #D3D3FF / ink #0B0B0F. Dark mode follows the
   site toggle ([data-theme] on <html>) and the OS on "system". The shared main-*.css is
   never edited. Fonts: only the shared stacks from main-*.css (var(--font-display) for headings,
   var(--font-body) for everything else), exactly as the home page uses them. Slackey is for the logo only. */
body[data-page="guide"] {
  --gd-bg: #fbfbff; --gd-paper: #ffffff; --gd-ink: #0b0b0f; --gd-soft: #4a4957; --gd-muted: #6e6d7c;
  --gd-rule: #e4e4f2; --gd-lav: #d3d3ff; --gd-lav-deep: #b9b9ff; --gd-dot: #8f8cf2; --gd-wash: #f1f1ff;
  --gd-edge: #c9c9fb; --gd-link: #4b47c9; --gd-say-bg: #ffffff; --gd-figure: drop-shadow(0 1px 1.5px rgb(11 11 15 / .12));
  --gd-head-f: var(--font-display);
  --gd-text-f: var(--font-body);
  background: var(--gd-bg); color: var(--gd-ink);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body[data-page="guide"] {
    --gd-bg: #0b0b0f; --gd-paper: #14141b; --gd-ink: #f1f0fb; --gd-soft: #c9c8d6; --gd-muted: #9897a8;
    --gd-rule: #23232d; --gd-lav: #d3d3ff; --gd-lav-deep: #b9b9ff; --gd-dot: #b9b9ff; --gd-wash: #16162a;
    --gd-edge: #34345a; --gd-link: #c3c3ff; --gd-say-bg: #d3d3ff; --gd-figure: drop-shadow(0 0 1px rgb(211 211 255 / .35));
  }
}
:root[data-theme="dark"] body[data-page="guide"] {
  --gd-bg: #0b0b0f; --gd-paper: #14141b; --gd-ink: #f1f0fb; --gd-soft: #c9c8d6; --gd-muted: #9897a8;
  --gd-rule: #23232d; --gd-lav: #d3d3ff; --gd-lav-deep: #b9b9ff; --gd-dot: #b9b9ff; --gd-wash: #16162a;
  --gd-edge: #34345a; --gd-link: #c3c3ff; --gd-say-bg: #d3d3ff; --gd-figure: drop-shadow(0 0 1px rgb(211 211 255 / .35));
}
html { scroll-padding-top: 6rem; }
@media (min-width: 768px) { html { scroll-padding-top: 7rem; } }

/* The shared footer uppercases its captions, which turns the name into "WAYVIBE". Keep the real casing here. */
body[data-page="guide"] .footer__base .caption { text-transform: none; letter-spacing: .02em; }

.gd-shell { width: 100%; max-width: 1120px; margin: 0 auto; padding-inline: 20px; }
@media (min-width: 768px) { .gd-shell { padding-inline: 40px; } }
.gd-mono { font-family: var(--gd-text-f); font-weight: 600; font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gd-muted); margin: 0; }
.gd a { color: var(--gd-link); text-underline-offset: 3px; text-decoration-thickness: 1px; }

/* Hero */
.gd-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px;
  padding: 64px 0 40px; }
@media (min-width: 768px) { .gd-hero { padding: 96px 0 56px; gap: 40px; } }
.gd-hero h1 { font-family: var(--gd-head-f); font-weight: 800; letter-spacing: -.045em; line-height: 1.02;
  font-size: clamp(2.3rem, 6.2vw, 4rem); margin: 18px 0 0; color: var(--gd-ink); }
.gd-lede { max-width: 56ch; margin: 22px 0 0; font-size: 17px; line-height: 1.6; color: var(--gd-soft); }
.gd-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.gd .gd-btn { display: inline-flex; align-items: center; min-height: 46px; padding: 0 22px; border-radius: 999px;
  border: 1px solid var(--gd-edge); color: var(--gd-ink); font-weight: 650; font-size: 15px; text-decoration: none;
  transition: background-color .3s, transform .3s; }
.gd .gd-btn:hover { background: var(--gd-wash); }
.gd .gd-btn--fill { background: var(--gd-lav); color: #0b0b0f; border-color: transparent; }
.gd .gd-btn--fill:hover { background: var(--gd-lav-deep); }
.gd-updated { margin-top: 26px; letter-spacing: .16em; }
.gd-updated time { color: var(--gd-soft); text-transform: none; letter-spacing: .04em; }
.gd-hero__fig { position: relative; margin: 0; width: clamp(120px, 24vw, 250px); }
.gd-say { position: absolute; z-index: 1; right: 62%; top: 4%; width: max-content; max-width: 19ch;
  padding: 10px 14px; border-radius: 18px 18px 4px 18px; background: var(--gd-say-bg); color: #0b0b0f;
  font-family: var(--gd-text-f); font-weight: 600; font-size: clamp(12px, 1.3vw, 15px); line-height: 1.3;
  box-shadow: 0 10px 28px -12px rgb(11 11 15 / .35); }
@media (max-width: 559px) { .gd-hero { grid-template-columns: 1fr; } .gd-hero__fig { display: none; } }

/* Character: static, hero only */
.gd-pose { display: block; width: 100%; height: auto; filter: var(--gd-figure); user-select: none; pointer-events: none; }

/* Contents: a fold-out list on mobile, a wrapped index row on desktop */
.gd-flow { padding-bottom: 104px; }
@media (min-width: 1024px) { .gd-flow { padding-bottom: 136px; } }
.gd-toc { margin-bottom: 8px; }
.gd-toc ol { list-style: none; margin: 0; padding: 0; }
.gd-toc a { display: flex; gap: 10px; padding: 6px 8px 6px 0; font-size: 13.5px; line-height: 1.35; color: var(--gd-muted);
  text-decoration: none; transition: color .3s; }
.gd-toc a span { font-family: var(--gd-text-f); font-weight: 600; font-size: 11px; opacity: .55; padding-top: 1px; font-variant-numeric: tabular-nums; }
.gd-toc a:hover, .gd-toc a[aria-current="true"] { color: var(--gd-ink); }
.gd-toc__d { display: none; }
@media (min-width: 1024px) {
  .gd-toc__m { display: none; }
  .gd-toc__d { display: flex; align-items: baseline; gap: 28px; padding: 18px 0; border-top: 1px solid var(--gd-rule); border-bottom: 1px solid var(--gd-rule); }
  .gd-toc__d ol { display: flex; flex-wrap: wrap; gap: 2px 22px; }
}
.gd-toc__m { border-top: 1px solid var(--gd-rule); border-bottom: 1px solid var(--gd-rule); }
.gd-toc__m summary { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; cursor: pointer; list-style: none; }
.gd-toc__m summary::-webkit-details-marker { display: none; }
.gd-toc__m summary span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  border: 1px solid var(--gd-rule); font-size: 14px; letter-spacing: 0; transition: transform .4s; }
.gd-toc__m[open] summary span { transform: rotate(45deg); }
.gd-toc__m ol { margin: 0 0 16px; }

/* Sections: zig-zag rows, text beside a phone, alternating sides; stacked on mobile */
.gd-body { min-width: 0; }
.gd-sec { border-top: 1px solid var(--gd-rule); padding: 56px 0; }
.gd-sec:first-child { border-top: 0; }
.gd-row { display: grid; gap: 40px; align-items: center; }
.gd-row__text { min-width: 0; }
.gd-row__media { display: flex; justify-content: center; }
@media (min-width: 860px) {
  .gd-sec { padding: 96px 0; }
  .gd-row { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(48px, 7vw, 104px); }
  .gd-row:nth-of-type(even) .gd-row__media { order: -1; }
}
.gd-num { font-family: var(--gd-text-f); font-weight: 600; font-size: 12px; letter-spacing: .16em; color: var(--gd-muted); margin: 0;
  font-variant-numeric: tabular-nums; }
.gd-sec h2 { font-family: var(--gd-head-f); font-weight: 800; letter-spacing: -.035em; line-height: 1.05;
  font-size: clamp(1.75rem, 3.4vw, 2.6rem); margin: 12px 0 0; padding: 0; border: 0; color: var(--gd-ink); max-width: 20ch; }
.gd-intro { margin: 14px 0 0; max-width: 46ch; font-size: 17px; line-height: 1.6; color: var(--gd-soft); }

/* Phone frame: one size and bezel everywhere, soft shadow */
.gd-phone { margin: 0; width: min(280px, 72vw); padding: 10px; border-radius: 44px; background: #0b0b0f;
  box-shadow: 0 0 0 1px rgb(11 11 15 / .08), 0 2px 4px rgb(20 20 60 / .06), 0 30px 60px -28px rgb(20 20 60 / .38); }
:root[data-theme="dark"] body[data-page="guide"] .gd-phone { background: #1c1c26; box-shadow: 0 0 0 1px rgb(211 211 255 / .12), 0 24px 48px -24px rgb(0 0 0 / .6); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body[data-page="guide"] .gd-phone { background: #1c1c26; box-shadow: 0 0 0 1px rgb(211 211 255 / .12), 0 24px 48px -24px rgb(0 0 0 / .6); } }
.gd-phone__screen { position: relative; overflow: hidden; aspect-ratio: 540 / 1120; border-radius: 34px; background: var(--gd-paper); }
.gd-phone__screen img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* Skeleton screens: static grey and lavender blocks shaped like the real UI. No text, no data, no motion. */
.sk-screen { --sk: #ececf3; --sk2: #f6f6fa; --sk-on: var(--gd-lav); display: flex; flex-direction: column; background: #ffffff; }
:root[data-theme="dark"] body[data-page="guide"] .sk-screen { --sk: #262632; --sk2: #1b1b24; background: #121219; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body[data-page="guide"] .sk-screen { --sk: #262632; --sk2: #1b1b24; background: #121219; } }
.sk { display: block; background: var(--sk); border-radius: 10px; }
.sk-on, .sk.sk-on { background: var(--sk-on); }
.sk-bar { height: 9px; width: var(--w, 50%); border-radius: 99px; }
.sk-bar--lg { height: 14px; } .sk-bar--sm { height: 7px; }
.sk-pad { padding: 16px; }
.sk-col { display: flex; flex-direction: column; gap: 12px; flex: 1; min-height: 0; }
.sk-center { align-items: center; text-align: center; padding-top: 44px; }
.sk-grow { flex: 1; }
.sk-top { display: flex; align-items: center; gap: 10px; padding: 34px 16px 14px; border-bottom: 1px solid var(--sk2); }
.sk-top .sk-bar { flex: none; }
.sk-ava { width: 30px; height: 30px; border-radius: 50%; flex: none; }
.sk-ava--lg { position: relative; z-index: 1; width: 64px; height: 64px; margin-top: -48px; border: 4px solid #fff; box-sizing: content-box; }
:root[data-theme="dark"] body[data-page="guide"] .sk-ava--lg { border-color: #121219; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body[data-page="guide"] .sk-ava--lg { border-color: #121219; } }
.sk-logo { width: 52px; height: 52px; border-radius: 16px; background: var(--sk-on); margin-bottom: 6px; }
.sk-photo { width: 84px; height: 84px; border-radius: 50%; margin-top: 14px; background: var(--sk2); border: 2px dashed var(--gd-lav-deep); }
.sk-dob { display: flex; gap: 8px; width: 100%; margin-top: 10px; }
.sk-field { height: 40px; flex: 1; }
.sk-field--wide { flex: 1.6; }
.sk-field--full { width: 100%; }
.sk-btn { height: 44px; width: 100%; border-radius: 99px; background: var(--sk-on); }
.sk-bubble { height: 34px; width: 62%; border-radius: 18px 18px 18px 6px; }
.sk-bubble--me { align-self: flex-end; width: 54%; border-radius: 18px 18px 6px 18px; background: var(--sk-on); }
.sk-bubble--short { width: 38%; }
.sk-bubble--ask { width: 58%; height: 44px; }
.sk-photo-reply { width: 78%; aspect-ratio: 4 / 5; border-radius: 18px; }
.sk-seg { display: flex; gap: 6px; padding: 4px; border-radius: 99px; background: var(--sk2); }
.sk-seg .sk { flex: 1; height: 30px; border-radius: 99px; background: transparent; }
.sk-seg .sk.sk-seg__on { background: var(--sk-on); }
.sk-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.sk-cal .sk { aspect-ratio: 1; border-radius: 50%; }
.sk-time { display: flex; gap: 8px; }
.sk-time .sk { flex: 1; height: 38px; }
.sk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; flex: 1; min-height: 0; overflow: hidden; align-content: start; }
.sk-grid .sk { aspect-ratio: 3 / 4; border-radius: 6px; }
.sk-tabs { flex: none; display: flex; justify-content: space-around; padding: 12px 10px 22px; border-top: 1px solid var(--sk2); }
.sk-tabs .sk { width: 22px; height: 22px; border-radius: 8px; }
.sk-tray { padding: 10px 12px 20px; background: var(--sk2); border-radius: 22px 22px 0 0; }
.sk-tray__tabs { display: flex; gap: 8px; margin-bottom: 10px; }
.sk-tray__tabs .sk { width: 48px; height: 20px; border-radius: 99px; }
.sk-tray__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.sk-tray__grid .sk { aspect-ratio: 1; border-radius: 12px; }
.sk-banner { position: relative; height: 34%; overflow: hidden; background: var(--sk2); }
.sk-road { position: absolute; display: block; height: 8px; width: 140%; left: -20%; background: var(--sk); border-radius: 99px; }
.sk-road--a { top: 44%; transform: rotate(-14deg); }
.sk-road--b { top: 30%; transform: rotate(32deg); }
.sk-pin { position: absolute; display: block; width: 16px; height: 16px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  background: var(--gd-lav-deep); box-shadow: 0 0 0 3px rgb(255 255 255 / .8); }
.sk-rows { display: flex; flex-direction: column; gap: 10px; width: 100%; margin-top: 8px; }
.sk-rows .sk { height: 46px; border-radius: 14px; }
.sk-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px; border-radius: 14px; background: var(--sk2); }
.sk-switch { display: block; position: relative; flex: none; width: 38px; height: 22px; border-radius: 99px; background: var(--sk); }
.sk-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; }
.sk-switch--on { background: var(--gd-lav-deep); }
.sk-switch--on::after { left: 19px; }
.sk-shield { display: block; flex: none; width: 26px; height: 30px; background: var(--gd-lav-deep);
  clip-path: polygon(50% 0, 100% 16%, 100% 52%, 50% 100%, 0 52%, 0 16%); }
.sk-dim { opacity: .45; }
.sk-sheet { padding: 12px 16px 26px; border-radius: 26px 26px 0 0; background: #fff; box-shadow: 0 -10px 30px -12px rgb(20 20 60 / .25);
  display: flex; flex-direction: column; gap: 12px; }
:root[data-theme="dark"] body[data-page="guide"] .sk-sheet { background: #1b1b24; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body[data-page="guide"] .sk-sheet { background: #1b1b24; } }
.sk-grab { width: 40px; height: 5px; border-radius: 99px; align-self: center; }

/* Numbered steps */
.gd-steps { list-style: none; counter-reset: gd; margin: 22px 0 0; padding: 0; max-width: 66ch; }
.gd-steps li { counter-increment: gd; position: relative; padding: 0 0 0 44px; font-size: 16px; line-height: 1.65; color: var(--gd-soft); }
.gd-steps li + li { margin-top: 14px; }
.gd-steps li::before { content: counter(gd); position: absolute; left: 0; top: 0; display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: 50%; background: var(--gd-lav); color: #0b0b0f;
  font-family: var(--gd-text-f); font-size: 12px; font-weight: 600; }
.gd-steps strong { color: var(--gd-ink); font-weight: 650; }
.gd-steps em { font-style: normal; font-weight: 650; color: var(--gd-ink); }

/* Callout */
.gd-callout { position: relative; overflow: hidden; margin-top: 28px; max-width: 66ch; border-radius: 20px;
  border: 1px solid var(--gd-edge); background: var(--gd-wash); padding: 18px 22px 18px 26px; }
.gd-callout::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--gd-dot); }
.gd-callout__tag { margin-bottom: 8px; letter-spacing: .16em; color: var(--gd-link); }
.gd-callout p:not(.gd-mono) { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--gd-soft); }

/* Help card */
.gd-sec--help { padding-bottom: 8px; }
.gd-sec--help .gd-card, .gd-sec--help .gd-more { max-width: 760px; }
.gd-card { margin-top: 22px; border-radius: 28px; background: var(--gd-paper); border: 1px solid var(--gd-rule);
  padding: 26px; box-shadow: inset 0 1px rgb(255 255 255 / .6), 0 1px 2px rgb(20 20 60 / .05), 0 18px 40px -24px rgb(20 20 60 / .25); }
@media (min-width: 768px) { .gd-card { padding: 34px; } }
.gd-card__big { display: flex; align-items: center; gap: 10px; width: max-content; max-width: 100%; margin-top: 16px;
  font-family: var(--gd-head-f); font-weight: 800; letter-spacing: -.03em;
  font-size: clamp(1.3rem, 3vw, 1.75rem); color: var(--gd-ink) !important; text-decoration: none; overflow-wrap: anywhere; }
.gd-card__big + .gd-card__big { margin-top: 8px; }
.gd-arrow { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%;
  background: var(--gd-lav); color: #0b0b0f; font-size: 15px; letter-spacing: 0; transition: transform .4s; }
.gd-card__big:hover .gd-arrow { transform: translate(2px, -2px); }
.gd-card__note { margin: 16px 0 0; max-width: 52ch; font-size: 15px; line-height: 1.6; color: var(--gd-soft); }
.gd-more ul { list-style: none; margin: 28px 0 0; padding: 0; display: grid; column-gap: 32px; }
@media (min-width: 640px) { .gd-more ul { grid-template-columns: 1fr 1fr; } }
.gd-more a { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 16px 0;
  border-bottom: 1px solid var(--gd-rule); text-decoration: none; }
.gd-more strong { display: block; font-size: 15.5px; font-weight: 700; letter-spacing: -.01em; color: var(--gd-ink); transition: color .3s; }
.gd-more em { display: block; margin-top: 4px; font-style: normal; font-size: 13.5px; line-height: 1.4; color: var(--gd-muted); }
.gd-more i { font-style: normal; color: var(--gd-muted); opacity: 0; transform: translateX(-4px); transition: opacity .4s, transform .4s; }
.gd-more a:hover strong { color: var(--gd-link); }
.gd-more a:hover i { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) { .gd-arrow, .gd-more i, .gd-toc__m summary span, .gd .gd-btn { transition: none; } }
@media print { .nav, .footer, .gd-toc, .gd-pose, .gd-hero__fig, .gd-row__media { display: none !important; } .gd-row { display: block; } }