/* iSpirits Cloud — Marketing styles (Landing · Login · Blog · Blog-post)
 * Ported from design pack 2026-05-16 (ds/marketing.css). Source design
 * file kept verbatim — only the tokens @import path was redirected to
 * our canonical tokens.css.
 *
 * Loaded ONLY on marketing pages (those that include this stylesheet
 * directly). Selectors are class-based (.lp-*, .nav-*, .btn-*, .ps-*,
 * .login-*, etc.) so they cannot bleed into product pages.
 *
 * Token contract: every color/spacing/typography value resolves via
 * tokens.css. Cozy mode (`data-ux-mode="cozy"` on :root or body)
 * cascades automatically.
 */

@import url('/chinese/src/styles/tokens.css?v=20260730-personaguard2');

:root {
  --radius-sm: 10px; --radius-md: 14px; --radius-lg: 18px; --radius-xl: 24px; --radius-2xl: 32px;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px;
  --shadow-md: 0 6px 18px rgba(0,0,0,0.28);
  /* VIS-M1 2026-06-10: stops darkened so white .btn-primary labels clear
     WCAG AA — #2273D6→4.68:1, #7355E2→5.09:1 (was #4FACFE→2.42:1). */
  --gradient-brand: linear-gradient(135deg, #2273D6 0%, #7355E2 100%);
  --container: 1180px;
}
[data-ux-mode="cozy"] {
  --radius-sm: 12px; --radius-md: 18px; --radius-lg: 22px; --radius-xl: 28px;
  --shadow-md: 0 6px 18px rgba(90, 60, 30, 0.10);
  --gradient-brand: linear-gradient(135deg, #B69763 0%, #C66B6B 100%);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

/* Keyboard focus indicator (WCAG 2.4.7) — marketing pages only loaded this
 * sheet + cozy-theme, neither of which defined a focus-visible style, so
 * keyboard users got only the weak 1px UA outline. */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible,
video[controls]:focus-visible {
  outline: 3px solid var(--accent-cyan, #4FACFE);
  outline-offset: 2px;
  border-radius: 4px;
}
[data-ux-mode="cozy"] a:focus-visible,
[data-ux-mode="cozy"] button:focus-visible,
[data-ux-mode="cozy"] [tabindex]:focus-visible {
  outline-color: #C66B6B;
}

/* Skip-to-content link — visually hidden until focused. */
.skip-link {
  position: absolute; left: 8px; top: -48px; z-index: 1000;
  padding: 10px 16px; border-radius: 8px;
  background: #2273D6; color: #fff; /* AA 4.68:1 (was cyan 2.42:1) */
  font-weight: 600; text-decoration: none;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 8px; }
body {
  font-family: var(--font-sans);
  background: var(--bg-body);
  background-color: var(--bg-solid);
  color: var(--fg);
  font-size: 15px; line-height: 1.55;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
/* font-size reads --cozy-text-base (cozy-theme.css) rather than a literal:
   this rule loads AFTER cozy-theme.css at equal specificity, so a hardcoded
   16px here silently overrode cozy's own base size and made cozy body text
   identical to standard. Owner directive 2026-07-30: same families as
   standard, a bit larger. Fallback keeps this safe if loaded standalone. */
[data-ux-mode="cozy"] body { font-family: var(--font-body-cozy); font-size: var(--cozy-text-base, 17px); line-height: 1.7; }

button, a { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; text-decoration: none; }
input, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }
[data-ux-mode="cozy"] h1, [data-ux-mode="cozy"] h2, [data-ux-mode="cozy"] h3 { font-family: var(--font-serif); letter-spacing: -0.01em; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.eyebrow { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; color: var(--fg-muted); display: inline-block; margin-bottom: 12px; }
.text-gradient { background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
[data-ux-mode="cozy"] .text-gradient { font-style: italic; font-family: var(--font-serif); }

/* ─── Top nav ─── */
.top-nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg-solid) 78%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
[data-ux-mode="cozy"] .top-nav { background: rgba(247,239,224,0.85); border-bottom: 1px solid rgba(166,130,85,0.20); }
.nav-inner {
  max-width: var(--container); margin: 0 auto; padding: 14px 24px;
  display: flex; align-items: center; gap: 24px;
}
.nav-brand { display: flex; align-items: center; gap: 10px; }
.nav-mark { width: 32px; height: 32px; border-radius: 10px; overflow: hidden; background: #0a0a18; flex-shrink: 0; }
.nav-mark img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nav-word { font-family: var(--font-display); font-weight: 600; font-size: 15px; letter-spacing: -0.01em; }
[data-ux-mode="cozy"] .nav-word { font-family: var(--font-serif); }
.nav-links { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.nav-link {
  padding: 8px 14px; border-radius: 10px; font-size: 14px; color: var(--fg-muted);
  transition: all 0.18s;
}
.nav-link:hover { color: var(--fg); background: rgba(255,255,255,0.04); }
[data-ux-mode="cozy"] .nav-link:hover { background: rgba(198,107,107,0.08); }
.nav-link.active { color: var(--fg-strong); }

/* ─── Buttons ─── */
.btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; border-radius: var(--radius-sm);
  background: var(--surface-flat); border: 1px solid var(--border); color: var(--fg); font-size: 14px; font-weight: 500;
  transition: all 0.18s;
}
.btn:hover { background: rgba(255,255,255,0.04); border-color: var(--border-strong); transform: translateY(-1px); }
[data-ux-mode="cozy"] .btn:hover { background: rgba(198,107,107,0.08); }
.btn-primary { background: var(--gradient-brand); color: white; border-color: transparent; box-shadow: 0 8px 24px rgba(148,121,255,0.30); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 12px 32px rgba(148,121,255,0.40); }
[data-ux-mode="cozy"] .btn-primary { color: white; }
.btn-lg { padding: 14px 24px; font-size: 15px; border-radius: var(--radius-md); }
.btn-ghost { background: transparent; border: 0; color: var(--fg-muted); }
.btn-ghost:hover { color: var(--fg); }

/* ─── Landing — hero ─── */
.lp-hero {
  padding: 80px 0 60px;
  position: relative; overflow: hidden;
}
.lp-hero::before {
  content: ""; position: absolute; top: -200px; left: 50%; transform: translateX(-50%);
  width: 900px; height: 600px;
  background: radial-gradient(ellipse, rgba(148,121,255,0.18), transparent 60%);
  pointer-events: none;
}
.lp-hero-grid {
  position: relative; display: grid; grid-template-columns: 1.1fr 1fr; gap: 60px; align-items: center;
  max-width: var(--container); margin: 0 auto; padding: 0 24px;
}
.lp-copy h1 { font-size: clamp(40px, 5vw, 64px); margin-bottom: 20px; text-wrap: balance; }
.lp-copy p.lead { font-size: clamp(16px, 1.4vw, 19px); color: var(--fg-muted); margin: 0 0 28px; max-width: 540px; line-height: 1.6; }
.lp-cta-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; }
.lp-foot-line { font-size: 13px; color: var(--fg-faded); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lp-foot-line strong { color: var(--fg); font-weight: 500; }
.lp-foot-line .sep { opacity: 0.4; }

.lp-hero-art {
  position: relative; aspect-ratio: 1 / 1; max-width: 460px; margin: 0 auto;
  display: grid; place-items: center;
}
.lp-aura { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, rgba(79,172,254,0.22), transparent 65%); animation: lpPulse 5s ease-in-out infinite; }
.lp-aura.ring2 { background: radial-gradient(circle, rgba(148,121,255,0.18), transparent 70%); animation-delay: 1.2s; }
@keyframes lpPulse { 0%,100%{transform:scale(1);opacity:0.85;} 50%{transform:scale(1.08);opacity:1;} }
.lp-hero-art img { position: relative; width: 78%; height: 78%; object-fit: contain; z-index: 1; }
.lp-hero-art .lp-hero-video {
  position: relative; z-index: 1;
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 28px;
  border: 1px solid var(--border-subtle);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.45), 0 0 0 1px rgba(148, 121, 255, 0.18);
  background: radial-gradient(circle at 50% 40%, rgba(79,172,254,0.12), transparent 70%);
}
.lp-hero-art .float-chip {
  position: absolute; z-index: 2;
  padding: 8px 14px; border-radius: 99px;
  background: var(--surface-2); border: 1px solid var(--border-subtle);
  font-size: 12px; display: flex; align-items: center; gap: 6px;
  color: var(--fg); animation: lpFloat 4s ease-in-out infinite;
}
[data-ux-mode="cozy"] .lp-hero-art .float-chip { background: var(--surface-raised, #FFFBF2); }
.float-chip .ico { color: var(--accent-cyan); display: inline-flex; }
[data-ux-mode="cozy"] .float-chip .ico { color: #C66B6B; }
.float-chip.fc-1 { top: 14%; left: -4%; animation-delay: 0s; }
.float-chip.fc-2 { top: 50%; right: -2%; animation-delay: 1.2s; }
.float-chip.fc-3 { bottom: 14%; left: 8%; animation-delay: 2.4s; }
@keyframes lpFloat { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-6px);} }

/* ─── Trust bar ─── */
.trust-bar {
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  padding: 18px 0; background: var(--surface-flat);
}
.trust-row { display: flex; justify-content: center; gap: 28px; flex-wrap: wrap; align-items: center; }
.trust-pill { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--fg-muted); }
.trust-pill svg { color: var(--accent-cyan); }
[data-ux-mode="cozy"] .trust-pill svg { color: #C66B6B; }

/* ─── Section header ─── */
.lp-section { padding: 80px 0; }
.section-head { text-align: center; max-width: 720px; margin: 0 auto 56px; }
.section-divider { width: 40px; height: 2px; background: var(--gradient-brand); border-radius: 99px; margin: 0 auto 18px; }
.section-head h2 { font-size: clamp(28px, 3vw, 40px); margin-bottom: 12px; }
.section-head p { font-size: 16px; color: var(--fg-muted); margin: 0; line-height: 1.6; text-wrap: balance; }

/* ─── Problem / Solution split ─── */
.ps-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.ps-card {
  padding: 32px; border-radius: var(--radius-xl);
  background: var(--surface-2); border: 1px solid var(--border);
  position: relative;
}
[data-ux-mode="cozy"] .ps-card { background: var(--surface-raised, #FFFBF2); }
.ps-card-solution {
  background: linear-gradient(135deg, rgba(79,172,254,0.10), rgba(148,121,255,0.10));
  border-color: var(--border-subtle);
}
[data-ux-mode="cozy"] .ps-card-solution { background: linear-gradient(135deg, rgba(182,151,99,0.10), rgba(198,107,107,0.06)); }
.ps-card-ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 18px; background: var(--surface-flat); color: var(--fg-muted); }
.ps-card-solution .ps-card-ico { background: var(--gradient-brand); color: white; }
.ps-card h3 { font-size: 20px; margin-bottom: 18px; }
.ps-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.ps-list li { display: flex; gap: 10px; align-items: start; font-size: 14px; line-height: 1.55; color: var(--fg); }
.ps-list li .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--fg-faded); margin-top: 8px; flex-shrink: 0; }
.ps-card-solution .ps-list li .dot { background: var(--accent-cyan); box-shadow: 0 0 6px rgba(79,172,254,0.5); }
[data-ux-mode="cozy"] .ps-card-solution .ps-list li .dot { background: #C66B6B; box-shadow: 0 0 6px rgba(198,107,107,0.5); }

/* ─── Steps ─── */
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.step-card {
  padding: 28px; border-radius: var(--radius-lg);
  background: var(--surface-2); border: 1px solid var(--border);
  position: relative;
}
[data-ux-mode="cozy"] .step-card { background: var(--surface-raised, #FFFBF2); }
.step-num {
  position: absolute; top: 18px; right: 22px;
  font-family: var(--font-display); font-weight: 700; font-size: 48px;
  color: transparent; -webkit-text-stroke: 1.5px var(--border-strong); opacity: 0.5;
  line-height: 1;
}
[data-ux-mode="cozy"] .step-num { font-family: var(--font-serif); -webkit-text-stroke: 1.5px rgba(182,151,99,0.40); }
.step-ico { width: 44px; height: 44px; border-radius: 12px; background: var(--gradient-brand); color: white; display: grid; place-items: center; margin-bottom: 18px; }
.step-card h3 { font-size: 18px; margin-bottom: 8px; }
.step-card p { font-size: 14px; color: var(--fg-muted); margin: 0; line-height: 1.6; }

/* ─── Features grid ─── */
.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.feature-card {
  padding: 24px; border-radius: var(--radius-md); background: var(--surface-2); border: 1px solid var(--border);
  transition: all 0.2s;
}
[data-ux-mode="cozy"] .feature-card { background: var(--surface-raised, #FFFBF2); }
.feature-card:hover { transform: translateY(-2px); border-color: var(--border-strong); box-shadow: var(--shadow-md); }
.feature-ico { width: 38px; height: 38px; border-radius: 10px; background: rgba(79,172,254,0.10); color: var(--accent-cyan); display: grid; place-items: center; margin-bottom: 14px; }
[data-ux-mode="cozy"] .feature-ico { background: rgba(198,107,107,0.12); color: #C66B6B; }
.feature-card h3 { font-size: 16px; margin-bottom: 6px; }
.feature-card p { font-size: 13px; color: var(--fg-muted); margin: 0; line-height: 1.6; }

/* ─── Personas ─── */
.personas-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.persona-card {
  padding: 28px; border-radius: var(--radius-xl); background: var(--surface-2); border: 1px solid var(--border);
}
[data-ux-mode="cozy"] .persona-card { background: var(--surface-raised, #FFFBF2); }
.persona-av {
  width: 56px; height: 56px; border-radius: 18px;
  background: linear-gradient(135deg, rgba(79,172,254,0.18), rgba(148,121,255,0.22));
  color: var(--accent-cyan);
  display: grid; place-items: center; margin-bottom: 18px;
  border: 1px solid var(--border-subtle);
}
[data-ux-mode="cozy"] .persona-av { background: linear-gradient(135deg, rgba(182,151,99,0.10), rgba(198,107,107,0.10)); color: #C66B6B; }
.persona-card h3 { font-size: 19px; margin-bottom: 4px; }
.persona-card h3 small { display: block; font-family: var(--font-sans); font-size: 12px; font-weight: 500; color: var(--fg-faded); margin-top: 4px; letter-spacing: 0; }
[data-ux-mode="cozy"] .persona-card h3 small { font-family: var(--font-body-cozy); }
.persona-card p { font-size: 14px; color: var(--fg-muted); margin: 12px 0 16px; line-height: 1.6; }
.persona-cta { color: var(--accent-cyan); font-weight: 600; font-size: 13px; display: inline-flex; align-items: center; gap: 4px; }
[data-ux-mode="cozy"] .persona-cta { color: #C66B6B; }

/* ─── Journey timeline ─── */
.journey { position: relative; padding-left: 32px; max-width: 800px; margin: 0 auto; }
.journey::before { content: ""; position: absolute; left: 11px; top: 12px; bottom: 12px; width: 2px; background: linear-gradient(180deg, var(--accent-cyan), var(--accent-purple), transparent); opacity: 0.5; }
.journey-node { position: relative; padding-bottom: 32px; }
.journey-node::before {
  content: ""; position: absolute; left: -28px; top: 8px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--gradient-brand);
  box-shadow: 0 0 0 4px var(--bg-solid), 0 0 16px rgba(148,121,255,0.4);
}
.journey-stage { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent-cyan); margin-bottom: 4px; }
[data-ux-mode="cozy"] .journey-stage { color: var(--cozy-rose); }
.journey-node h3 { font-size: 20px; margin-bottom: 8px; }
.journey-node p { font-size: 14px; color: var(--fg-muted); margin: 0; max-width: 560px; line-height: 1.6; }

/* ─── Pricing ─── */
.pricing-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.price-card {
  padding: 28px 22px; border-radius: var(--radius-xl); background: var(--surface-2); border: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 12px; position: relative;
}
[data-ux-mode="cozy"] .price-card { background: var(--surface-raised, #FFFBF2); }
.price-card.popular {
  background: linear-gradient(135deg, rgba(79,172,254,0.08), rgba(148,121,255,0.10));
  border-color: var(--border-strong);
  box-shadow: 0 18px 48px rgba(148,121,255,0.18);
}
[data-ux-mode="cozy"] .price-card.popular { background: linear-gradient(135deg, rgba(182,151,99,0.10), rgba(198,107,107,0.06)); }
.popular-badge {
  position: absolute; top: -12px; right: 18px;
  background: var(--gradient-brand); color: white;
  padding: 4px 10px; border-radius: 99px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase;
}
.price-card h3 { font-size: 18px; }
.price-amount { font-family: var(--font-display); font-size: 30px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; }
[data-ux-mode="cozy"] .price-amount { font-family: var(--font-serif); }
.price-amount small { font-family: var(--font-sans); font-size: 12px; font-weight: 500; color: var(--fg-muted); letter-spacing: 0; }
.price-tagline { font-size: 13px; color: var(--fg-muted); margin: 0; }
.price-feats { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.price-feats li { font-size: 13px; line-height: 1.55; display: flex; gap: 8px; align-items: start; }
.price-feats li::before { content: ""; flex: 0 0 6px; height: 6px; border-radius: 50%; background: var(--success); margin-top: 7px; }
.price-feats li strong { color: var(--fg); font-weight: 600; }

/* ─── Final CTA ─── */
.final-cta {
  padding: 100px 0; text-align: center;
  background: radial-gradient(ellipse at center, rgba(148,121,255,0.10), transparent 60%);
}
.final-cta h2 { font-size: clamp(32px, 4vw, 52px); margin-bottom: 18px; text-wrap: balance; max-width: 720px; margin-left: auto; margin-right: auto; }
.final-cta p { font-size: 16px; color: var(--fg-muted); margin: 0 0 28px; max-width: 540px; margin-left: auto; margin-right: auto; }

/* ─── Footer ─── */
.lp-footer {
  border-top: 1px solid var(--border); padding: 40px 0 32px;
  background: var(--surface-flat);
}
.foot-row { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 32px; }
.foot-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.foot-tagline { font-size: 13px; color: var(--fg-muted); max-width: 280px; margin: 0; }
.foot-col h4 { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--fg-muted); margin-bottom: 12px; font-family: var(--font-sans); }
[data-ux-mode="cozy"] .foot-col h4 { font-family: var(--font-body-cozy); }
.foot-col a { display: block; font-size: 13px; color: var(--fg); padding: 4px 0; transition: color 0.15s; }
.foot-col a:hover { color: var(--accent-cyan); }
[data-ux-mode="cozy"] .foot-col a:hover { color: #C66B6B; }
.foot-bottom { border-top: 1px solid var(--border); padding-top: 18px; display: flex; justify-content: space-between; font-size: 12px; color: var(--fg-faded); flex-wrap: wrap; gap: 12px; }

/* ─── Login ─── */
.login-shell {
  min-height: 100vh; display: grid; place-items: center; padding: 32px 24px;
  background:
    radial-gradient(circle at top left, rgba(79,172,254,0.16), transparent 45%),
    radial-gradient(circle at bottom right, rgba(148,121,255,0.18), transparent 60%),
    var(--bg-solid);
}
[data-ux-mode="cozy"] .login-shell { background: var(--bg-solid); }
.login-card {
  width: 100%; max-width: 1040px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  background: var(--surface-2); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-2xl); overflow: hidden;
  box-shadow: 0 32px 80px rgba(0,0,0,0.30);
}
[data-ux-mode="cozy"] .login-card { background: var(--surface-raised, #FFFBF2); box-shadow: 0 32px 80px rgba(90,60,30,0.18); }
.login-pitch {
  padding: 56px 48px;
  background: linear-gradient(135deg, rgba(79,172,254,0.10), rgba(148,121,255,0.10));
  border-right: 1px solid var(--border-subtle);
  display: flex; flex-direction: column; gap: 24px;
}
[data-ux-mode="cozy"] .login-pitch { background: linear-gradient(135deg, rgba(182,151,99,0.10), rgba(198,107,107,0.06)); border-right: 1px solid rgba(166,130,85,0.20); }
.login-brand { display: flex; align-items: center; gap: 10px; }
.login-brand-mark { width: 36px; height: 36px; border-radius: 10px; overflow: hidden; background: #0a0a18; flex-shrink: 0; }
.login-brand-mark img { width: 100%; height: 100%; object-fit: cover; display: block; }
.login-brand-word { font-family: var(--font-display); font-weight: 600; font-size: 16px; }
[data-ux-mode="cozy"] .login-brand-word { font-family: var(--font-serif); }
.login-pitch h1 { font-size: clamp(32px, 3.5vw, 42px); margin-bottom: 12px; text-wrap: balance; }
.login-pitch p.lead { font-size: 15px; color: var(--fg-muted); margin: 0 0 8px; line-height: 1.7; }
.login-highlights { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.login-highlight {
  display: flex; gap: 12px; align-items: start;
  padding: 14px 16px; border-radius: var(--radius-md);
  background: var(--surface-flat); border: 1px solid var(--border);
}
[data-ux-mode="cozy"] .login-highlight { background: var(--surface-raised, #FFFBF2); }
.lh-ico { width: 36px; height: 36px; border-radius: 10px; background: rgba(79,172,254,0.10); color: var(--accent-cyan); display: grid; place-items: center; flex-shrink: 0; }
[data-ux-mode="cozy"] .lh-ico { background: rgba(198,107,107,0.10); color: #C66B6B; }
.login-highlight h4 { font-size: 13px; margin-bottom: 2px; }
.login-highlight p { font-size: 12px; color: var(--fg-muted); margin: 0; line-height: 1.5; }

.login-form-pane {
  padding: 56px 48px;
  display: flex; flex-direction: column; gap: 20px;
}
.back-link {
  display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--fg-muted);
  align-self: flex-start; transition: color 0.15s;
}
.back-link:hover { color: var(--fg); }
.login-form-pane h2 { font-size: 28px; margin-bottom: 4px; }
.login-form-pane > p.subhead { font-size: 14px; color: var(--fg-muted); margin: 0 0 12px; }

.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group label { font-size: 12px; font-weight: 600; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.08em; }
.form-input {
  width: 100%; padding: 12px 14px; border-radius: var(--radius-sm);
  background: var(--surface-flat); border: 1px solid var(--border);
  color: var(--fg); font-size: 14px; outline: none; transition: all 0.18s;
}
[data-ux-mode="cozy"] .form-input { background: var(--surface-raised, #FFFBF2); }
.form-input:focus { border-color: var(--accent-cyan); box-shadow: 0 0 0 3px rgba(79,172,254,0.15); }
[data-ux-mode="cozy"] .form-input:focus { border-color: #C66B6B; box-shadow: 0 0 0 3px rgba(198,107,107,0.15); }
.password-wrap { position: relative; }
.password-toggle {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  /* tap-target floor (QA55: measured 54x31). Centered flex keeps the label
     position identical while the hit box grows. */
  min-height: 40px; min-width: 48px; display: inline-flex; align-items: center; justify-content: center;
  padding: 6px 10px; border-radius: 8px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--fg-muted);
  transition: all 0.15s;
}
.password-toggle:hover { color: var(--fg); }

.form-row-between { display: flex; justify-content: space-between; align-items: center; font-size: 12px; }
.form-row-between .checkbox-row { display: inline-flex; align-items: center; gap: 6px; color: var(--fg-muted); }
.form-row-between a { color: var(--accent-cyan); font-weight: 600; }
[data-ux-mode="cozy"] .form-row-between a { color: #C66B6B; }
.form-row-between a:hover { text-decoration: underline; }

.btn-submit {
  width: 100%; padding: 14px; border-radius: var(--radius-sm);
  background: var(--gradient-brand); color: white; font-weight: 600; font-size: 14px;
  box-shadow: 0 8px 22px rgba(148,121,255,0.30); transition: all 0.18s;
}
.btn-submit:hover { transform: translateY(-1px); box-shadow: 0 12px 30px rgba(148,121,255,0.40); }

.divider-line {
  display: flex; align-items: center; gap: 12px;
  font-size: 11px; color: var(--fg-faded); text-transform: uppercase; letter-spacing: 0.12em;
  margin: 4px 0;
}
.divider-line::before, .divider-line::after { content: ""; flex: 1; height: 1px; background: var(--border); }

/* Single column since 2026-08-03: the disabled "Apple — 即将上线" placeholder was
   removed from login.html, leaving Google as the only provider. Two columns
   would strand it in the left half of the row.
   This also retires the old 430px stacking query — it existed because the
   Google button's 240px floor blew out of a ~134px grid cell and pushed the
   Apple button off-screen at 390px (QA R4). With one child there is nothing to
   push, and login.js sizes the button from the container's real width
   (clamped [240, 400], re-rendered on resize), so it fills the row at every
   breakpoint. Restore `grid-template-columns: 1fr 1fr` AND that media query
   together when Apple sign-in ships. */
.oauth-row { display: grid; grid-template-columns: 1fr; gap: 8px; }
/* Centre the button INSIDE a full-width wrap — never with `justify-items:center`
   on the row. Google's renderButton caps `width` at 400px, so on a full-width
   row the button can't fill its cell and strands against the left edge. The
   obvious fix (justify-items:center) breaks a feedback loop: login.js sizes the
   button from `#googleSignIn`'s own getBoundingClientRect, so the moment the
   wrap stops stretching to its cell it reports the BUTTON's width instead of the
   available width — measured at 390px, a 360px wrap inside a 276px cell with the
   iframe running to x=427, clipped off a 390px viewport. Keeping the wrap
   stretched preserves the measurement; flex just centres the button within it.
   Same shape as register.html's .google-signin-slot. */
.oauth-btn-wrap { display: flex; justify-content: center; width: 100%; }
.oauth-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 16px; border-radius: var(--radius-sm);
  background: var(--surface-flat); border: 1px solid var(--border); color: var(--fg); font-size: 13px; font-weight: 500;
  transition: all 0.18s;
}
[data-ux-mode="cozy"] .oauth-btn { background: var(--surface-raised, #FFFBF2); }
.oauth-btn:hover { border-color: var(--border-strong); transform: translateY(-1px); }

.signup-link { text-align: center; font-size: 13px; color: var(--fg-muted); margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--border); }
.signup-link a { color: var(--accent-cyan); font-weight: 600; }
[data-ux-mode="cozy"] .signup-link a { color: #C66B6B; }

/* ─── Blog ─── */
.blog-hero { padding: 64px 0 32px; text-align: center; }
.blog-hero h1 { font-size: clamp(36px, 4vw, 52px); margin-bottom: 14px; }
.blog-hero p { font-size: 16px; color: var(--fg-muted); margin: 0 auto; max-width: 540px; }

.blog-filter { display: flex; gap: 6px; justify-content: center; margin: 32px 0 40px; flex-wrap: wrap; }
.blog-pill {
  padding: 7px 14px; border-radius: 99px; font-size: 12px;
  background: var(--surface-flat); border: 1px solid var(--border); color: var(--fg-muted);
  transition: all 0.15s;
}
.blog-pill:hover { color: var(--fg); border-color: var(--border-strong); }
.blog-pill.active { background: var(--gradient-brand); color: white; border-color: transparent; }

.featured-post {
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 32px; align-items: center;
  padding: 36px; margin-bottom: 48px;
  border-radius: var(--radius-2xl);
  background: linear-gradient(135deg, rgba(79,172,254,0.08), rgba(148,121,255,0.10));
  border: 1px solid var(--border-subtle);
}
[data-ux-mode="cozy"] .featured-post { background: linear-gradient(135deg, rgba(182,151,99,0.10), rgba(198,107,107,0.06)); border-color: rgba(166,130,85,0.30); }
.featured-tag {
  display: inline-block; padding: 4px 10px; border-radius: 99px;
  background: var(--gradient-brand); color: white;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.10em; margin-bottom: 14px;
}
.featured-post h2 { font-size: clamp(24px, 3vw, 34px); margin-bottom: 14px; line-height: 1.2; }
.featured-post p { font-size: 14px; color: var(--fg-muted); line-height: 1.7; margin: 0 0 18px; }
.featured-meta { display: flex; gap: 12px; font-size: 12px; color: var(--fg-faded); }
.featured-art {
  aspect-ratio: 4 / 3; border-radius: var(--radius-xl);
  background: radial-gradient(circle at 30% 30%, rgba(79,172,254,0.40), transparent 50%),
              radial-gradient(circle at 70% 70%, rgba(148,121,255,0.45), transparent 55%),
              var(--surface-flat);
  display: grid; place-items: center;
  border: 1px solid var(--border-subtle);
}
.featured-art img { width: 60%; height: 60%; object-fit: contain; opacity: 0.95; }

.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 64px; }
.post-card {
  display: flex; flex-direction: column;
  border-radius: var(--radius-lg);
  background: var(--surface-2); border: 1px solid var(--border);
  overflow: hidden; transition: all 0.2s; cursor: pointer;
}
[data-ux-mode="cozy"] .post-card { background: var(--surface-raised, #FFFBF2); }
.post-card:hover { transform: translateY(-2px); border-color: var(--border-strong); box-shadow: var(--shadow-md); }
.post-thumb {
  aspect-ratio: 16 / 9;
  background: var(--surface-flat);
  position: relative; overflow: hidden;
}
.post-thumb.g1 { background: linear-gradient(135deg, #4FACFE, #9479FF); }
.post-thumb.g2 { background: linear-gradient(135deg, #34d399, #4FACFE); }
.post-thumb.g3 { background: linear-gradient(135deg, #f59e0b, #9479FF); }
.post-thumb.g4 { background: linear-gradient(135deg, #9479FF, #ef4444); }
.post-thumb.g5 { background: linear-gradient(135deg, #4FACFE, #34d399); }
.post-thumb.g6 { background: linear-gradient(135deg, #ef4444, #f59e0b); }
.post-thumb.has-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.featured-art img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.post-thumb-tag { position: absolute; top: 12px; left: 12px; padding: 3px 9px; border-radius: 99px; background: rgba(0,0,0,0.36); color: white; font-size: 10px; font-weight: 600; letter-spacing: 0.10em; text-transform: uppercase; backdrop-filter: blur(8px); }
.post-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.post-body h3 { font-size: 16px; line-height: 1.35; margin: 0; }
.post-excerpt { font-size: 13px; color: var(--fg-muted); margin: 0; line-height: 1.55; flex: 1; }
.post-meta { display: flex; justify-content: space-between; align-items: center; padding-top: 10px; border-top: 1px dashed var(--border); font-size: 11px; color: var(--fg-faded); margin-top: 8px; }
.post-author { display: inline-flex; align-items: center; gap: 6px; color: var(--fg-muted); }
.author-av { width: 22px; height: 22px; border-radius: 50%; background: var(--gradient-brand); color: white; display: grid; place-items: center; font-size: 10px; font-weight: 700; }

/* Newsletter inline */
.newsletter {
  padding: 40px; margin-bottom: 64px;
  border-radius: var(--radius-2xl);
  background: var(--surface-2); border: 1px solid var(--border);
  display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center;
}
[data-ux-mode="cozy"] .newsletter { background: var(--surface-raised, #FFFBF2); }
.newsletter h3 { font-size: 22px; margin-bottom: 6px; }
.newsletter p { font-size: 13px; color: var(--fg-muted); margin: 0; max-width: 380px; }
.news-form { display: flex; gap: 8px; }
.news-form .form-input { min-width: 240px; }

/* ─── Blog post ─── */
.post-page { padding: 48px 0 80px; }
.post-page-inner { max-width: 760px; margin: 0 auto; padding: 0 24px; }
.post-crumb { font-size: 12px; color: var(--fg-muted); margin-bottom: 14px; }
.post-crumb a { color: var(--accent-cyan); }
[data-ux-mode="cozy"] .post-crumb a { color: #C66B6B; }
.post-header { margin-bottom: 28px; }
.post-header .featured-tag { margin-bottom: 18px; }
.post-header h1 { font-size: clamp(32px, 4vw, 46px); margin-bottom: 16px; text-wrap: balance; line-height: 1.15; }
.post-header .post-meta { border-top: 0; margin: 0; padding: 0; font-size: 13px; }
.post-cover {
  aspect-ratio: 16 / 9; border-radius: var(--radius-xl); margin-bottom: 32px;
  background: linear-gradient(135deg, #4FACFE 0%, #9479FF 100%);
  display: grid; place-items: center;
}
.post-cover img { width: 40%; height: 70%; object-fit: contain; }
.post-body-content {
  font-size: 17px; line-height: 1.8; color: var(--fg);
}
[data-ux-mode="cozy"] .post-body-content { font-size: 19px; line-height: 1.8; }
.post-body-content p { margin: 0 0 24px; }
.post-body-content h2 { font-size: 26px; margin: 40px 0 14px; }
.post-body-content h3 { font-size: 20px; margin: 32px 0 10px; }
.post-body-content blockquote {
  margin: 28px 0; padding: 18px 24px;
  border-left: 3px solid var(--accent-purple);
  background: var(--surface-flat); border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-style: italic; color: var(--fg);
}
[data-ux-mode="cozy"] .post-body-content blockquote { border-left-color: #B69763; background: var(--surface-raised, #FFFBF2); font-family: var(--font-serif); }
.post-body-content ul { padding-left: 22px; margin: 0 0 24px; }
.post-body-content li { margin-bottom: 10px; }
.post-body-content a { color: var(--accent-cyan); text-decoration: underline; text-underline-offset: 3px; }
[data-ux-mode="cozy"] .post-body-content a { color: #C66B6B; }
.post-share {
  display: flex; gap: 8px; margin: 40px 0 32px;
  padding-top: 24px; border-top: 1px solid var(--border);
}

/* ─── Responsive ─── */
/* Phone-only short label for the nav CTA — base rule BEFORE the media blocks so the
   600px rule below wins on phones (same specificity, later wins). */
.nav-cta-short { display: none; }

@media (max-width: 960px) {
  .lp-hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .lp-hero-art { max-width: 360px; }
  .ps-grid { grid-template-columns: 1fr; }
  .steps-grid, .features-grid, .personas-grid { grid-template-columns: 1fr; }
  .pricing-grid { grid-template-columns: repeat(2, 1fr); }
  .post-grid { grid-template-columns: repeat(2, 1fr); }
  .featured-post { grid-template-columns: 1fr; }
  .featured-art { aspect-ratio: 21 / 9; }
  .login-card { grid-template-columns: minmax(0, 1fr); }
  .login-pitch { padding: 36px 32px; border-right: 0; border-bottom: 1px solid var(--border-subtle); }
  .login-form-pane { padding: 36px 32px; }
  .foot-row { grid-template-columns: 1fr 1fr; }
  .newsletter { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .pricing-grid, .post-grid { grid-template-columns: 1fr; }
  .lp-section { padding: 56px 0; }
  .foot-row { grid-template-columns: 1fr; gap: 24px; }
  /* Phone nav: hide only the in-page anchor links (reachable by scrolling), but
     KEEP the language switch, Sign in, and the primary CTA — these have no
     in-page equivalent and were previously stranded off-screen on phones
     (QA r95). Allow wrap so the account actions never overflow horizontally. */
  .nav-links { gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
  .nav-links .nav-link { display: none; }
  .nav-links .nav-link[hreflang] { display: inline-flex; }
  .nav-links .btn { display: none; }
  .nav-links .btn[href*="login"],
  .nav-links .btn-primary { display: inline-flex; }
  /* Landing redesign 2026-09-02 §3.1: the phone nav is ONE row ≤64px. The wordmark
     used to wrap ("iSpirits / Cloud") and the full-length CTA forced a second row,
     so the nav ate 240 of 844px before the H1. Short CTA label on phones only. */
  .nav-inner { padding: 10px 14px; gap: 10px; }
  .nav-brand { flex: none; }
  .nav-word { white-space: nowrap; }
  .nav-links { flex-wrap: nowrap; gap: 4px; }
  .nav-links .nav-link[hreflang] { padding: 6px 6px; }
  .nav-links .btn { padding: 8px 11px; font-size: 13px; white-space: nowrap; }
  .nav-cta-long { display: none; }
  .nav-cta-short { display: inline; }
  .lp-hero { padding-top: 44px; }   /* phone fold: 80px of top air was the fold's largest empty band */
  /* Cozy mode on phones: cozy-theme.css sets .nav-link to 18px and .btn to 18px / 14px 28px with a
     high-specificity selector (:281 / :360), which broke the one-row nav (中文 stacked, CTA off-screen);
     these outrank it. The cozy display-size h1 (56px) is clamped to the standard phone size too, so the
     receipt card stays inside the first phone screen in both modes. */
  [data-ux-mode="cozy"] .top-nav .nav-links .btn:not(.btn-icon):not(.menu-btn):not(.composer-send) { padding: 8px 11px; font-size: 13px; min-height: 40px; }
  [data-ux-mode="cozy"] .top-nav .nav-brand { padding: 0; }   /* cozy's 14px 18px brand padding made the row 81px */
  [data-ux-mode="cozy"] .top-nav .nav-links .nav-link[hreflang] { font-size: 14px; padding: 6px; white-space: nowrap; flex: none; }
  [data-ux-mode="cozy"] .lp-copy h1 { font-size: 40px; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; }
}

/* ─── CSP fix-ups for landing inline styles (2026-05-16) ──────────
   The design pack used a few `style=""` attrs on alternating
   `<section>` backgrounds and the final-CTA sign-in hint. Extracted
   to classes here so the markup stays CSP-clean. */
.lp-section.lp-section--alt {
  background: var(--surface-flat);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.final-cta__signin-hint {
  margin-top: 16px;
  font-size: 13px;
  color: var(--fg-faded);
}
.final-cta__signin-hint a {
  color: var(--fg-muted);
  text-decoration: underline;
}

/* ─── Login page inline-style replacements (Phase 2b, 2026-05-16) ── */
.login-pitch__signup-line {
  font-size: 12px;
  color: var(--fg-faded);
  margin: 0;
}
.login-pitch__signup-line a {
  color: var(--fg-muted);
  text-decoration: underline;
}
.form-group--mb-14 { margin-bottom: 14px; }
.form-group--mb-12 { margin-bottom: 12px; }
.form-row-between--mb-16 { margin-bottom: 16px; }
.checkbox-row input[type="checkbox"] { margin: 0; }
.btn-submit__arrow { margin-left: 4px; }
.signup-link__arrow { vertical-align: -1px; }
/* Generic error/info banner used by login.js */
#login-error {
  display: none;
  padding: 10px 14px;
  margin-bottom: 14px;
  border-radius: 10px;
  background: rgba(239, 68, 68, 0.10);
  border: 1px solid rgba(239, 68, 68, 0.30);
  color: var(--danger, #ef4444);
  font-size: 13px;
}
#login-error.is-info {
  background: rgba(79, 172, 254, 0.10);
  border-color: rgba(79, 172, 254, 0.30);
  color: var(--accent-cyan);
}
#login-error.is-visible { display: block; }
/* Apple OAuth — PARKED 2026-08-03. The button was removed from login.html
   (owner: don't advertise it until it's tested), so .oauth-btn,
   .oauth-btn[disabled] and .oauth-btn__soon currently match nothing.
   Kept on purpose so restoring the button is markup-only. Delete these
   three rules only if Apple sign-in is abandoned for good. */
.oauth-btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}
.oauth-btn__soon {
  font-size: 10px;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 99px;
  background: var(--border);
  color: var(--fg-muted);
}

/* Session-expired soft notice (injected by landing-redirect.js) */
.session-expired-notice {
  position: sticky;
  top: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 10px 44px;
  background: color-mix(in srgb, var(--accent-purple, #9479ff) 16%, var(--bg-primary, #0b1020));
  border-bottom: 1px solid color-mix(in srgb, var(--accent-purple, #9479ff) 40%, transparent);
  font-size: 14px;
}
.session-expired-notice a {
  color: var(--accent-purple, #9479ff);
  font-weight: 600;
  text-decoration: underline;
}
.session-expired-notice button {
  position: absolute;
  right: 10px;
  background: none;
  border: none;
  color: inherit;
  font-size: 18px;
  line-height: 1;
  padding: 4px 8px;
  cursor: pointer;
}

/* Footer status tag — marks a link as not-yet-shipped before the click.
   Self-hosting is a planned business capability and the destination page reads
   as available-now; labelling it here means the status is known first.
   NB: the guard for this block must anchor on `^\.foot-tag\s*\{` — a bare
   grep for "foot-tag" also matches the pre-existing `.foot-tagline`. */
.foot-tag {
    display: inline-block;
    margin-left: 0.35rem;
    padding: 0.05rem 0.4rem;
    border-radius: 0.35rem;
    font-size: 0.68rem;
    letter-spacing: 0.02em;
    white-space: nowrap;
    vertical-align: baseline;
    color: var(--fg-muted, inherit);
    border: 1px solid var(--border-subtle, rgba(127, 127, 127, 0.3));
}

/* P1-2(a) 2026-08-31 (landing plan): the hero right column now holds the Monday-Plan
   receipt card — evidence on the first screen; the film + pet chips moved to slot 2. */
.lp-hero-art.has-receipt { aspect-ratio: auto; max-width: 560px; display: block; }
.lp-hero-art.has-receipt .lp-aura { border-radius: 32px; }
.lp-hero-art.has-receipt .lp-receipt-card { position: relative; z-index: 1; width: 100%;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.45), 0 0 0 1px rgba(148, 121, 255, 0.14); }

/* ── Task-vs-ambition contrast (2026-08-01) ───────────────────────────────
   Sits inside the problem/solution section, directly answering the objection
   that section raises: "but an AI tool already does this." Deliberately NOT a
   competitor comparison table — naming rivals on a landing page invites
   comparison shopping. It states our own frame and lets the reader draw it.
   color-mix per frontend pitfall #16 so the tint warms in cozy mode instead
   of staying cold purple on cream paper. */
.lp-contrast {
  margin: 2.5rem auto 0;
  max-width: 62ch;
  padding: 1.5rem 1.75rem;
  border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--accent-purple) 22%, transparent);
  background: color-mix(in srgb, var(--accent-purple) 7%, transparent);
  text-align: center;
}
.lp-contrast-lead {
  margin: 0 0 .6rem;
  font-size: clamp(1.05rem, 2.4vw, 1.3rem);
  font-weight: 600;
  color: var(--text-secondary, inherit);
}
.lp-contrast-body {
  margin: 0;
  font-size: clamp(.95rem, 2vw, 1.05rem);
  line-height: 1.65;
}
.lp-contrast-body strong { color: var(--text-primary, inherit); }
@media (max-width: 560px) {
  .lp-contrast { padding: 1.15rem 1rem; margin-top: 1.75rem; }
  .lp-contrast-body { text-align: left; }   /* 90 words read as prose on phones (redesign 2026-09-02 §3.5) */
}