/* AURA landing hero with the animated demo (logged-out visitors only). Based on aura-hero.html.
   Light mode: white with soft colour blobs. Dark mode: deep navy with a fine grid (like the reference screenshot). */
.ah-hero {
  --ah-bg: #ffffff; --ah-surface: #f6f7fb; --ah-card: #ffffff; --ah-text: #0f1222; --ah-muted: #6b7090;
  --ah-border: rgba(15, 18, 34, .09); --ah-track: rgba(15, 18, 34, .07); --ah-shimmer: rgba(109, 94, 252, .16);
  --ah-shadow: rgba(32, 36, 90, .17); --ah-glow: rgba(109, 94, 252, .16);
  --ah-paper: #fffdf8; --ah-paper2: #f1eee6; --ah-rule: rgba(76, 110, 190, .17); --ah-ink: #1c2a63;
  --ah-ptext: #1d2240; --ah-pmuted: #80859c; --ah-a1: #6d5efc; --ah-a2: #00b8f0;
  --ah-t1a: #6366f1; --ah-t1b: #3b82f6; --ah-t2a: #14b8a6; --ah-t2b: #10b981;
  position: relative; overflow: hidden; isolation: isolate; background: var(--ah-bg); color: var(--ah-text);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  padding: clamp(36px, 7vw, 88px) 16px clamp(28px, 5vw, 64px); border-radius: 28px; border: 1px solid var(--ah-border);
  -webkit-font-smoothing: antialiased; text-align: center;
}
html[data-theme="dark"] .ah-hero {
  --ah-bg: #0b0f2e; --ah-surface: #11163a; --ah-card: #151b45; --ah-text: #eef0ff; --ah-muted: #a3a9cf;
  --ah-border: rgba(129, 140, 248, .22); --ah-track: rgba(255, 255, 255, .08); --ah-shimmer: rgba(255, 255, 255, .14);
  --ah-shadow: rgba(0, 0, 0, .55); --ah-glow: rgba(99, 102, 241, .32); --ah-paper: #f7f4ec; --ah-paper2: #cfc9bc;
  --ah-a1: #6366f1; --ah-a2: #22d3ee; --ah-t1a: #818cf8; --ah-t1b: #60a5fa; --ah-t2a: #2dd4bf; --ah-t2b: #34d399;
  background:
    linear-gradient(rgba(129, 140, 248, .07) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(90deg, rgba(129, 140, 248, .07) 1px, transparent 1px) 0 0 / 44px 44px,
    radial-gradient(120% 70% at 50% 0%, #1b1f5c 0%, #0b0f2e 62%);
}
.ah-hero * { box-sizing: border-box; }
.ah-blob { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .5; z-index: -1; animation: ahFloat 16s ease-in-out infinite alternate; pointer-events: none; }
.ah-blob.b1 { width: 460px; height: 460px; background: var(--ah-a1); top: -160px; left: -120px; }
.ah-blob.b2 { width: 400px; height: 400px; background: var(--ah-a2); top: -120px; right: -140px; animation-delay: -6s; opacity: .38; }
.ah-blob.b3 { width: 520px; height: 520px; background: #ff7ac6; bottom: -300px; left: 30%; opacity: .16; animation-delay: -10s; }
html[data-theme="dark"] .ah-blob { opacity: .22; }
@keyframes ahFloat { to { transform: translate(40px, 30px) scale(1.08); } }
.ah-wrap { max-width: 1040px; margin: 0 auto; }
.ah-copy { max-width: 820px; margin: 0 auto; }
.ah-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px; background: var(--ah-card); border: 1px solid var(--ah-border); font-size: 13px; font-weight: 600; color: var(--ah-muted); box-shadow: 0 6px 20px -10px var(--ah-shadow); }
html[data-theme="dark"] .ah-eyebrow { background: rgba(99, 102, 241, .14); color: #c7d2fe; }
.ah-eyebrow i { width: 9px; height: 9px; border-radius: 50%; background: linear-gradient(135deg, var(--ah-a1), var(--ah-a2)); box-shadow: 0 0 0 0 var(--ah-a1); animation: ahPulse 2s infinite; }
@keyframes ahPulse { 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.ah-copy h1 { font-size: clamp(32px, 6vw, 60px); line-height: 1.06; letter-spacing: -.035em; font-weight: 800; margin: 18px 0 16px; color: var(--ah-text); }
.ah-g1 { background: linear-gradient(90deg, var(--ah-t1a), var(--ah-t1b)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ah-g2 { background: linear-gradient(90deg, var(--ah-t2a), var(--ah-t2b)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ah-copy p.ah-lead { font-size: clamp(15.5px, 1.7vw, 18.5px); line-height: 1.6; color: var(--ah-muted); margin: 0 auto; max-width: 680px; }
.ah-copy p.ah-lead b { color: var(--ah-text); }
.ah-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 20px; }
.ah-chips span { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 12px; background: var(--ah-surface); border: 1px solid var(--ah-border); font-size: 13.5px; font-weight: 600; color: var(--ah-text); }
.ah-chips svg { width: 15px; height: 15px; }
.ah-free { margin: 18px auto 0; max-width: 560px; }
.ah-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 22px; }
.ah-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 24px; border: 0; border-radius: 16px; font: 700 15.5px/1 Inter, system-ui, sans-serif; text-decoration: none; cursor: pointer; transition: transform .2s, box-shadow .2s; }
.ah-btn:hover { transform: translateY(-2px); }
.ah-btn.primary { color: #fff; background: linear-gradient(135deg, #4f46e5, #6366f1 55%, #818cf8); box-shadow: 0 16px 34px -14px #4f46e5; }
.ah-btn.ghost { color: var(--ah-text); background: var(--ah-card); border: 1px solid var(--ah-border); }
.ah-trust { margin: 12px 0 0; font-size: 13px; color: var(--ah-muted); }
.ah-stats { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 20px 0 0; }
.ah-stats li { font-size: 13px; color: var(--ah-muted); padding: 6px 12px; border-radius: 10px; background: var(--ah-surface); border: 1px solid var(--ah-border); }
.ah-stats b { color: var(--ah-text); margin-right: 5px; }
.ah-teacher { max-width: 560px; margin: 22px auto 0; padding: 16px; border-radius: 20px; background: var(--ah-card); border: 1px solid var(--ah-border); box-shadow: 0 10px 30px -18px var(--ah-shadow); text-align: left; }
.ah-teacher-who { display: flex; align-items: center; gap: 12px; }
.ah-teacher-photo { display: block; width: 48px; height: 48px; flex: 0 0 auto; border-radius: 50%; object-fit: cover; border: 2px solid var(--ah-a1); background: #fff; }
.ah-teacher-name { margin: 0; font-size: 15px; font-weight: 700; color: var(--ah-text); }
.ah-teacher-role { margin: 2px 0 0; font-size: 12.5px; color: var(--ah-muted); }
.ah-teacher-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; list-style: none; padding: 0; margin: 12px 0 0; }
.ah-teacher-stats li { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border-radius: 12px; background: var(--ah-surface); border: 1px solid var(--ah-border); font-size: 11px; font-weight: 600; line-height: 1.25; color: var(--ah-muted); text-align: center; }
.ah-teacher-stats b { font-size: 17px; font-weight: 800; color: var(--ah-a1); }
.ah-teacher-quote { margin: 12px 0 0; padding-left: 10px; border-left: 2px solid var(--ah-a1); font-size: 13px; font-style: italic; line-height: 1.5; color: var(--ah-muted); }
.ah-demo { margin-top: clamp(28px, 5vw, 48px); text-align: left; }
.ah-stage { position: relative; border-radius: 26px; border: 1px solid var(--ah-border); overflow: hidden;
  background: radial-gradient(var(--ah-border) 1px, transparent 1.2px) 0 0 / 22px 22px, var(--ah-surface); box-shadow: 0 40px 90px -40px var(--ah-shadow); }
.ah-stage canvas { display: block; width: 100%; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }
.ah-tip { position: absolute; left: 0; top: 0; z-index: 3; width: max-content; max-width: min(290px, calc(100% - 16px)); padding: 12px 14px; border-radius: 14px;
  background: var(--ah-card); color: var(--ah-text); border: 1px solid var(--ah-border); box-shadow: 0 18px 40px -12px var(--ah-shadow);
  font-size: 13px; line-height: 1.45; opacity: 0; pointer-events: none; transition: opacity .15s; text-align: left; }
.ah-tip.on { opacity: 1; }
.ah-tip-h { font-weight: 700; display: flex; gap: 8px; align-items: center; }
.ah-tip-m { color: var(--ah-muted); font-size: 12px; margin: 3px 0 6px; }
.ah-tip p { margin: 0; }
.ah-tip u { text-decoration-color: #22c55e; text-decoration-thickness: 2px; text-underline-offset: 2px; }
.ah-tip-fix { margin-top: 8px; padding: 8px 10px; border-radius: 10px; background: rgba(34, 197, 94, .11); font-size: 12.5px; }
.ah-crit { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 4px; }
.ah-crit li { display: flex; justify-content: space-between; gap: 18px; font-size: 12.5px; color: var(--ah-muted); }
.ah-crit li b { color: var(--ah-text); }
.ah-crit li.on { color: var(--ah-text); font-weight: 600; }
.ah-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; display: inline-block; }
.ah-r { background: #ef4444; } .ah-y { background: #f59e0b; } .ah-g { background: #22c55e; } .ah-a { background: linear-gradient(135deg, var(--ah-a1), var(--ah-a2)); }
.ah-ctl { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 14px; }
.ah-steps { display: flex; gap: 4px; padding: 4px; background: var(--ah-card); border: 1px solid var(--ah-border); border-radius: 14px; overflow-x: auto; scrollbar-width: none; min-width: 0; }
.ah-steps::-webkit-scrollbar { display: none; }
.ah-step { border: 0; background: transparent; color: var(--ah-muted); font: 600 13px/1 Inter, system-ui, sans-serif; padding: 9px 12px; border-radius: 10px; cursor: pointer; display: flex; gap: 7px; align-items: center; white-space: nowrap; transition: background .2s, color .2s; }
.ah-step i { font-style: normal; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; background: var(--ah-track); }
.ah-step.on { color: var(--ah-text); background: var(--ah-surface); }
.ah-step.on i { background: linear-gradient(135deg, var(--ah-a1), var(--ah-a2)); color: #fff; }
.ah-btns { display: flex; gap: 8px; flex: none; }
.ah-icon { width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--ah-border); background: var(--ah-card); color: var(--ah-text); display: grid; place-items: center; cursor: pointer; padding: 0; }
.ah-icon svg { width: 18px; height: 18px; }
.ah-icon .i-play { display: none; } .ah-icon.paused .i-play { display: block; } .ah-icon.paused .i-pause { display: none; }
.ah-prog { height: 3px; background: var(--ah-track); border-radius: 3px; margin-top: 12px; overflow: hidden; }
.ah-prog i { display: block; height: 100%; background: linear-gradient(90deg, var(--ah-a1), var(--ah-a2)); transform-origin: left; transform: scaleX(0); }
.ah-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; justify-content: center; margin-top: 14px; font-size: 13px; color: var(--ah-muted); }
.ah-legend span { display: inline-flex; align-items: center; gap: 6px; }
.ah-btn:focus-visible, .ah-step:focus-visible, .ah-icon:focus-visible { outline: 2px solid var(--ah-a1); outline-offset: 2px; }
@media (max-width: 520px) { .ah-cta .ah-btn { flex: 1 1 100%; } .ah-step span { display: none; } .ah-step { padding: 9px; } .ah-hero { border-radius: 24px; } }
@media (prefers-reduced-motion: reduce) { .ah-blob, .ah-eyebrow i { animation: none; } }

/* The hero replaces the old landing card inside the Writing page's status box */
#authStatus:has(.ah-hero) { padding: 0 !important; border: 0 !important; background: none !important; box-shadow: none !important; text-align: left; }

/* "See how it works" cue under the hero text: a softly bouncing arrow down to the demo */
.ah-down { display: inline-flex; flex-direction: column; align-items: center; gap: 8px; margin: 26px auto 0; padding: 0; border: 0; background: none; color: var(--ah-muted); font: 600 13px/1 Inter, system-ui, sans-serif; cursor: pointer; }
.ah-down i { position: relative; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: linear-gradient(150deg, var(--ah-t1a), var(--ah-a1) 55%, var(--ah-a2)); box-shadow: 0 14px 30px -12px var(--ah-a1), inset 0 1px 0 rgba(255, 255, 255, .4);
  animation: ahBounce 2s cubic-bezier(.45, 0, .25, 1) infinite; }
.ah-down i::before { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--ah-a1); opacity: 0; animation: ahRing 2s ease-out infinite; }
.ah-down svg { width: 22px; height: 22px; }
.ah-down:hover { color: var(--ah-text); }
.ah-down:focus-visible { outline: 2px solid var(--ah-a1); outline-offset: 4px; border-radius: 12px; }
@keyframes ahBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } }
@keyframes ahRing { 0% { opacity: .55; transform: scale(.85); } 80%, 100% { opacity: 0; transform: scale(1.35); } }
@media (prefers-reduced-motion: reduce) { .ah-down i, .ah-down i::before { animation: none; } }

/* "Your first essay is free" banner: dark amber text on light amber in light mode, light text in dark mode */
.ah-hero .aura-land-free { justify-content: center; text-align: left; background: #fff7e6; border-color: #fcd9a0; color: #92400e; font-weight: 600; box-shadow: 0 6px 18px -12px rgba(180, 83, 9, .45); }
.ah-hero .aura-land-free b { color: #78350f; }
.ah-hero .aura-land-free svg { color: #d97706; }
html[data-theme="dark"] .ah-hero .aura-land-free { background: rgba(245, 181, 68, .14); border-color: rgba(245, 181, 68, .4); color: #fde7b8; box-shadow: none; }
html[data-theme="dark"] .ah-hero .aura-land-free b { color: #fff; }
html[data-theme="dark"] .ah-hero .aura-land-free svg { color: #fbbf24; }