/* web/public/marketing.css
   "Nature Distilled" marketing components - ported from approved mockups.
   Requires web/public/brand.css for :root token definitions.
   Scope: .mkt wrapper class.
*/

/* ============================================================
   BASE
   ============================================================ */
.mkt {
  font-family: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: var(--cream);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.mkt * { box-sizing: border-box; margin: 0; padding: 0; }
.mkt a { color: inherit; text-decoration: none; }
.mkt .wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

/* ---------- TOP BAR ---------- */
.mkt .topbar { position: sticky; top: 0; z-index: 50; background: rgba(247,244,236,.82);
  backdrop-filter: saturate(140%) blur(12px); border-bottom: 1px solid rgba(44,42,38,.06); }
.mkt .topbar .row { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.mkt .wordmark { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; letter-spacing: -.01em; }
.mkt .wordmark .mark { width: 30px; height: 30px; border-radius: 9px;
  background: linear-gradient(150deg,var(--sage),var(--sage-dark));
  display: grid; place-items: center; color: #fff; font-size: 16px;
  box-shadow: 0 4px 12px rgba(95,110,84,.35); }
.mkt .nav-links { display: flex; align-items: center; gap: 26px; font-size: 15px; color: var(--muted); font-weight: 500; }
.mkt .nav-links a:hover { color: var(--ink); }
.mkt .nav-links a.active { color: var(--ink); }
.mkt .btn { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; border: none;
  font-family: inherit; font-weight: 600; transition: transform .15s ease,box-shadow .15s ease,background .15s ease; }
.mkt .btn-primary { background: var(--terracotta); color: #fff; border-radius: 12px;
  padding: 11px 20px; font-size: 15px; box-shadow: 0 6px 18px rgba(198,107,78,.32); }
.mkt .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(198,107,78,.40);
  background: #bb6047; }
.mkt .btn-lg { padding: 15px 28px; font-size: 17px; border-radius: 14px; }
.mkt .btn-ghost { color: var(--sage-dark); font-weight: 600; border-bottom: 1.5px solid rgba(95,110,84,.45);
  padding-bottom: 1px; }
.mkt .btn-ghost:hover { border-bottom-color: var(--sage-dark); }

/* ---------- HERO ---------- */
.mkt .hero { padding: 64px 0 28px; text-align: center; }
.mkt .eyebrow { display: inline-flex; align-items: center; gap: 9px; background: #fff;
  border: 1px solid rgba(124,139,111,.28); color: var(--sage-dark); font-weight: 600; font-size: 13.5px;
  padding: 7px 15px; border-radius: 999px; box-shadow: 0 4px 14px rgba(44,42,38,.05); }
.mkt .eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sage);
  box-shadow: 0 0 0 0 rgba(124,139,111,.5); animation: v1pulseDot 2.4s ease-out infinite; }
@keyframes v1pulseDot {
  0% { box-shadow: 0 0 0 0 rgba(124,139,111,.45); }
  70% { box-shadow: 0 0 0 8px rgba(124,139,111,0); }
  100% { box-shadow: 0 0 0 0 rgba(124,139,111,0); }
}
.mkt h1 { font-size: clamp(34px,5.4vw,58px); line-height: 1.05; letter-spacing: -.025em;
  font-weight: 700; margin: 22px auto 0; max-width: 14ch; }
.mkt h1 .accent { color: var(--terracotta); }
.mkt .subhead { max-width: 50ch; margin: 20px auto 0; font-size: clamp(16px,2vw,19px); color: var(--muted); }
.mkt .subhead strong { color: var(--ink); font-weight: 600; }
.mkt .hero-ctas { display: flex; align-items: center; justify-content: center; gap: 20px; margin-top: 30px; flex-wrap: wrap; }
.mkt .hero-meta { margin-top: 14px; font-size: 13.5px; color: var(--muted); display: flex; gap: 18px;
  justify-content: center; flex-wrap: wrap; }
.mkt .hero-meta span { display: inline-flex; align-items: center; gap: 6px; }
.mkt .hero-meta .ck { color: var(--sage); font-weight: 700; }

/* ---------- KEYCAP ---------- */
.mkt .keycap { display: inline-flex; align-items: center; gap: 5px; background: #fff;
  border: 1px solid rgba(44,42,38,.16); border-bottom-width: 3px; border-radius: 8px;
  padding: 3px 9px; font-size: 13px; font-weight: 700; color: var(--ink);
  box-shadow: 0 2px 0 rgba(44,42,38,.06); }

/* ---------- HERO STAGE / LIVE APP WINDOW ---------- */
.mkt .stage { margin: 46px auto 0; max-width: 760px; position: relative; }
.mkt .stage-glow { position: absolute; inset: -8% -6% -14% -6%; border-radius: 40px; z-index: 0;
  background: radial-gradient(60% 55% at 50% 40%,rgba(124,139,111,.22),transparent 70%);
  filter: blur(14px); }
.mkt .appwin { position: relative; z-index: 1; background: #fff; border-radius: 18px; overflow: hidden;
  box-shadow: 0 24px 70px rgba(44,42,38,.18),0 4px 14px rgba(44,42,38,.06);
  border: 1px solid rgba(44,42,38,.07); text-align: left; }

/* title bar cycles accent via app stack */
.mkt .titlebar { display: flex; align-items: center; gap: 12px; padding: 13px 16px;
  border-bottom: 1px solid rgba(44,42,38,.07); position: relative;
  background: linear-gradient(180deg,#fff,#fbf9f4); }
.mkt .traffic { display: flex; gap: 7px; }
.mkt .traffic i { width: 12px; height: 12px; border-radius: 50%; display: block; }
.mkt .traffic .r { background: #ff5f57; } .mkt .traffic .y { background: #febc2e; } .mkt .traffic .g { background: #28c840; }
.mkt .app-id { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 14.5px; }
.mkt .app-icon { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center;
  font-size: 14px; color: #fff; box-shadow: 0 3px 8px rgba(44,42,38,.18); position: relative; }
/* stack of app icons, cross-fade */
.mkt .app-icon .ic { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 7px;
  opacity: 0; }
.mkt .app-name { position: relative; height: 18px; min-width: 120px; }
.mkt .app-name .nm { position: absolute; left: 0; top: 0; white-space: nowrap; opacity: 0; }
.mkt .titlebar .accent-bar { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; }

/* per-app accent + icon colors */
.mkt .ic-slack { background: #4a154b; } .mkt .ic-linkedin { background: #0a66c2; }
.mkt .ic-reddit { background: #ff4500; } .mkt .ic-gmail { background: #ea4335; }
.mkt .ic-web { background: linear-gradient(140deg,var(--sage),var(--sage-dark)); }

/* accent underline bar color cross-fade */
.mkt .accent-bar .accent-seg { position: absolute; inset: 0; opacity: 0; }
.mkt .accent-seg.seg-slack { background: #4a154b; }
.mkt .accent-seg.seg-linkedin { background: #0a66c2; }
.mkt .accent-seg.seg-reddit { background: #ff4500; }
.mkt .accent-seg.seg-gmail { background: #ea4335; }
.mkt .accent-seg.seg-web { background: var(--sage-dark); }

/* ---------- APP BODY ----------
   Compact body: the message text sits at top; the bottom pill dock
   holds the "Opt D Pressed" and "Translated / Undo" pills, LEFT-ALIGNED
   to the same left edge as the message text above them. During Stage 3
   the selected (highlighted) source text STAYS in place but is blurred into
   a soft backdrop, a warm shimmer sweeps across the text area, and the
   "AI rewriting" pill sits in front of it. */
.mkt .appbody { padding: 22px 22px 56px; min-height: 166px; position: relative;
  background: linear-gradient(180deg,#fff,#fffdf9); }
.mkt .msg-row { display: flex; gap: 12px; align-items: flex-start; }
.mkt .avatar { width: 38px; height: 38px; border-radius: 50%; flex: none; display: grid; place-items: center;
  font-weight: 700; color: #fff; font-size: 14px; background: linear-gradient(150deg,var(--sage),var(--sage-dark)); }
.mkt .msg-meta { font-size: 13px; color: var(--muted); margin-bottom: 5px; }
.mkt .msg-meta b { color: var(--ink); font-size: 14px; font-weight: 700; margin-right: 7px; }

/* WIDE message text block: spans the full content width, capped at TWO lines
   so the window never grows tall. Source and English are stacked layers that
   occupy the exact same spot; the shimmer overlay and AI-rewriting pill also
   live here. */
.mkt .msg-col { flex: 1; min-width: 0; }
.mkt .msg-text { position: relative; font-size: 16.5px; line-height: 1.45;
  width: 100%; max-width: 64ch; min-height: 48px; }
.mkt .layer { position: absolute; left: 0; top: 0; right: 0;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: visible; }
.mkt .src { color: var(--ink); }
.mkt .eng { color: var(--ink); }

/* selection highlight sweep over source text */
.mkt .sel-wrap { position: relative; display: inline; }
.mkt .selhi { position: absolute; left: -3px; top: -2px; height: calc(100% + 4px); width: 0;
  background: rgba(124,139,111,.30); border-radius: 5px; z-index: -1; }

/* per-word reveal: each word is an inline-block that gently fades + settles up.
   Hidden by default; the staged keyframe brings them in left-to-right. */
.mkt .eng .w { display: inline-block; opacity: 0; transform: translateY(6px);
  filter: blur(2px); will-change: opacity,transform; }

/* SHIMMER / FLARE OVERLAY (Stage 3) --------------------------------------
   A moving warm light streak confined to the text area, sweeping over the
   blurred source text like a skeleton-loading flare. Two animations run on
   it: a short ~1s background-position sweep (loops repeatedly for the whole
   stage) and the master 32.5s envelope that only reveals it during Stage 3.
   Subtle, light, on-brand (warm cream/white translucent). */
.mkt .shimmer { position: absolute; left: -4px; right: -4px; top: -4px; height: calc(100% + 8px);
  border-radius: 8px; pointer-events: none; opacity: 0; z-index: 1; overflow: hidden;
  background: linear-gradient(105deg,
    rgba(247,244,236,0) 30%,
    rgba(255,252,246,.18) 44%,
    rgba(255,255,255,.55) 50%,
    rgba(255,252,246,.18) 56%,
    rgba(247,244,236,0) 70%);
  background-size: 220% 100%; background-position: 120% 0;
  mix-blend-mode: screen; }
@keyframes v1shimmerSweep {
  0% { background-position: 120% 0; }
  100% { background-position: -120% 0; }
}

/* AI-REWRITING PROCESSING PILL (Stage 3) ----------------------------------
   Sits INSIDE the text area, centered over the blurred source text, IN FRONT
   of the shimmer (higher z-index). Soft "thinking" pulse. Generic AI only,
   no vendor. */
.mkt .ai-rewrite { position: absolute; left: 0; top: -2px; z-index: 3;
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(198,107,78,.10); color: var(--terracotta);
  font-size: 13.5px; font-weight: 700; padding: 8px 14px; border-radius: 999px;
  border: 1px solid rgba(198,107,78,.24);
  box-shadow: 0 6px 18px rgba(198,107,78,.12);
  opacity: 0; transform: scale(.94); white-space: nowrap; pointer-events: none; }
.mkt .ai-rewrite .spark { font-size: 13px; animation: v1spark 1.1s ease-in-out infinite; }
@keyframes v1spark { 0%,100% { opacity: .55; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.12); } }
.mkt .ai-rewrite .dots { display: inline-flex; gap: 3px; margin-left: 1px; }
.mkt .ai-rewrite .dots i { width: 4px; height: 4px; border-radius: 50%; background: currentColor;
  opacity: .4; animation: v1thinking 1.1s ease-in-out infinite; }
.mkt .ai-rewrite .dots i:nth-child(2) { animation-delay: .18s; }
.mkt .ai-rewrite .dots i:nth-child(3) { animation-delay: .36s; }
@keyframes v1thinking { 0%,100% { opacity: .35; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-2px); } }

/* BOTTOM PILL DOCK --------------------------------------------------------
   Both the "Opt D Pressed" keypress pill and the "Translated / Undo" pill
   are anchored to the bottom of the window and LEFT-ALIGNED to the same left
   edge as the message text above them. The dock sits at left:50px to match
   the text column inset: avatar width (38px) + msg-row gap (12px) inside the
   panel (whose own left edge already aligns with the appbody content inset).
   The pills inside justify to the start of the dock. They animate
   sequentially across the staged cycle. */
.mkt .pill-dock { position: absolute; left: 50px; bottom: 14px;
  width: auto; height: 40px; display: grid; justify-items: start; align-items: center; pointer-events: none; z-index: 4; }

/* "Opt D Pressed" keypress pill (Stage 2), left-aligned */
.mkt .keypress { grid-area: 1 / 1; justify-self: start; align-self: center;
  display: inline-flex; align-items: center; gap: 8px; background: #fff;
  border: 1px solid rgba(44,42,38,.12); border-radius: 12px; padding: 8px 13px;
  box-shadow: 0 8px 22px rgba(44,42,38,.14); font-size: 13px; font-weight: 600; color: var(--muted);
  opacity: 0; white-space: nowrap; transform: translateY(8px) scale(.94); }
.mkt .keypress .keycap { border-bottom-width: 3px; }
.mkt .keypress .lbl { color: var(--ink); font-weight: 700; }

/* "Translated / Undo" pill (Stage 4), left-aligned */
.mkt .undopill { grid-area: 1 / 1; justify-self: start; align-self: center;
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--ink); color: #fff; font-size: 12.5px; font-weight: 600; padding: 8px 14px; border-radius: 999px;
  box-shadow: 0 10px 26px rgba(44,42,38,.30); opacity: 0; white-space: nowrap; transform: translateY(8px); }
.mkt .undopill .sep { opacity: .5; }
.mkt .undopill .u { color: #e7c8bb; font-weight: 700; text-decoration: underline; }

/* =====================================================================
   STAGED ANIMATION TIMELINE
   Master loop = 32.5s, 5 apps x 6.5s each. One app slot = 20% of the loop.
   Stage boundaries inside a 6.5s slot, expressed as % of the 32.5s loop
   (slot start S = appIndex * 20%):
     Stage 1  0.0-1.3s  -> +0.0% .. +4.0%   (source shown, selection sweep)
     Stage 2  1.3-2.7s  -> +4.0% .. +8.3%   (Opt D Pressed pill, hold ~1.2s)
     Stage 3  2.7-4.1s  -> +8.3% .. +12.6%  (source BLURRED behind + shimmer
                                             sweep + AI rewriting pill in front)
     Stage 4  4.1-5.6s  -> +12.6% .. +17.2% (English word-by-word + Translated pill)
     Stage 5  5.6-6.5s  -> +17.2% .. +20.0% (hold readable, then gentle reset)
   Each panel uses the SAME keyframes; per-panel animation-delay shifts the
   active window to its 6.5s slot. Delays: 0, 6.5, 13, 19.5, 26s.
   ===================================================================== */

/* panel visibility: visible only during its 6.5s slot (20% of 32.5s) */
@keyframes v1panelShow {
  0% { opacity: 0; } 0.4% { opacity: 1; } 19.6% { opacity: 1; } 20% { opacity: 0; } 100% { opacity: 0; }
}
.mkt .panel { position: absolute; left: 22px; right: 22px; top: 22px; bottom: 0; opacity: 0;
  animation: v1panelShow 32.5s linear infinite; }

/* Stage 1: selection sweep (0 -> ~4% = 0.0-1.3s). Highlight grows, holds,
   then clears just before the keypress so the source reads clean. */
@keyframes v1selSweep {
  0% { width: 0; opacity: 1; }
  1.2% { width: 0; opacity: 1; }
  3.4% { width: 100%; opacity: 1; }
  7.0% { width: 100%; opacity: 1; }
  8.0% { width: 100%; opacity: 0; }
  8.3% { width: 0; opacity: 0; }
  100% { width: 0; opacity: 0; }
}
.mkt .panel .selhi { animation: v1selSweep 32.5s ease-in-out infinite; }

/* Source text: visible+sharp through Stages 1-2. At the start of Stage 3
   (~8.3% = 2.7s) it does NOT disappear: it stays in place but BLURS into a
   soft, slightly faded backdrop ("being transformed"). It then fades out at
   the start of Stage 4 (~12.6% = 4.1s) so the English reveal takes over. */
@keyframes v1srcOut {
  0% { opacity: 1; filter: blur(0); }
  7.8% { opacity: 1; filter: blur(0); }
  9.2% { opacity: .5; filter: blur(4.5px); }
  11.8% { opacity: .5; filter: blur(4.5px); }
  12.6% { opacity: 0; filter: blur(5px); }
  20% { opacity: 0; filter: blur(5px); }
  100% { opacity: 0; filter: blur(5px); }
}
.mkt .panel .src { animation: v1srcOut 32.5s ease-in-out infinite; }

/* Stage 3 shimmer envelope: reveal the sweeping flare only during Stage 3
   (~8.6% = 2.8s in, ~12.4% = 4.0s out). The streak itself moves on a short
   ~1s loop (v1shimmerSweep) so it sweeps across the text area repeatedly. */
@keyframes v1shimmerShow {
  0%,8.4% { opacity: 0; }
  9.2% { opacity: 1; }
  11.6% { opacity: 1; }
  12.4% { opacity: 0; }
  100% { opacity: 0; }
}
.mkt .panel .shimmer {
  animation: v1shimmerSweep 1s linear infinite,
             v1shimmerShow 32.5s linear infinite;
}

/* Stage 2: "Opt D Pressed" pill in (4.0% = 1.3s), held ~1.2s, fades out as
   Stage 3 begins (~9% = 2.9s). */
@keyframes v1keyPress {
  0%,3.7% { opacity: 0; transform: translateY(8px) scale(.94); }
  4.6% { opacity: 1; transform: translateY(0) scale(1.03); }
  5.4% { opacity: 1; transform: translateY(0) scale(1); }
  8.4% { opacity: 1; transform: translateY(0) scale(1); }
  9.4% { opacity: 0; transform: translateY(6px) scale(.96); }
  100% { opacity: 0; transform: translateY(8px) scale(.94); }
}
.mkt .panel .keypress { animation: v1keyPress 32.5s ease-in-out infinite; }

/* Stage 3: "AI rewriting to native English" pill, in the TEXT AREA, centered
   over the blurred source and IN FRONT of the shimmer. In at ~8.6% (2.8s),
   held ~1.2s, out at ~12.6% (4.1s). */
@keyframes v1aiRewrite {
  0%,8.2% { opacity: 0; transform: scale(.94); }
  9.0% { opacity: 1; transform: scale(1); }
  11.8% { opacity: 1; transform: scale(1); }
  12.6% { opacity: 0; transform: scale(.97); }
  100% { opacity: 0; transform: scale(.94); }
}
.mkt .panel .ai-rewrite { animation: v1aiRewrite 32.5s ease-in-out infinite; }

/* Stage 4: English layer container becomes present at ~12.6% (4.1s). The
   container itself just gates visibility; the per-word reveal does the work. */
@keyframes v1engShow {
  0%,12.4% { opacity: 0; }
  12.6% { opacity: 1; }
  19.4% { opacity: 1; }
  19.9% { opacity: 0; }
  100% { opacity: 0; }
}
.mkt .panel .eng { animation: v1engShow 32.5s linear infinite; }

/* Per-word reveal: gentle opacity + translateY settle, staggered left to
   right. Active band ~12.7% -> ~16.5% (4.1s -> 5.4s) plus per-word delay.
   Words hold through Stage 5, then the panel fade resets them. */
@keyframes v1wordIn {
  0%,12.6% { opacity: 0; transform: translateY(6px); filter: blur(2px); }
  14.0% { opacity: 1; transform: translateY(0); filter: blur(0); }
  19.4% { opacity: 1; transform: translateY(0); filter: blur(0); }
  19.9% { opacity: 0; transform: translateY(0); filter: blur(0); }
  100% { opacity: 0; transform: translateY(6px); filter: blur(2px); }
}
.mkt .panel .eng .w { animation: v1wordIn 32.5s ease-out infinite; }
/* gentle left-to-right stagger (each word ~0.09s after the previous) */
.mkt .eng .w:nth-child(1) { animation-delay: inherit; }
.mkt .eng .w-d1 { animation-delay: 0s; }
.mkt .eng .w-d2 { animation-delay: .09s; }
.mkt .eng .w-d3 { animation-delay: .18s; }
.mkt .eng .w-d4 { animation-delay: .27s; }
.mkt .eng .w-d5 { animation-delay: .36s; }
.mkt .eng .w-d6 { animation-delay: .45s; }
.mkt .eng .w-d7 { animation-delay: .54s; }
.mkt .eng .w-d8 { animation-delay: .63s; }
.mkt .eng .w-d9 { animation-delay: .72s; }
.mkt .eng .w-d10 { animation-delay: .81s; }
.mkt .eng .w-d11 { animation-delay: .90s; }
.mkt .eng .w-d12 { animation-delay: .99s; }

/* Stage 4-5: "Translated / Undo" pill, left-aligned. Appears at the SAME
   moment the English starts (~12.6% = 4.1s), held through Stage 5, fades on
   reset (~19.6% = 6.4s). */
@keyframes v1undo {
  0%,12.4% { opacity: 0; transform: translateY(8px); }
  13.4% { opacity: 1; transform: translateY(0); }
  19.2% { opacity: 1; transform: translateY(0); }
  19.8% { opacity: 0; transform: translateY(8px); }
  100% { opacity: 0; transform: translateY(8px); }
}
.mkt .panel .undopill { animation: v1undo 32.5s ease-in-out infinite; }

/* title-bar identity (icon / name / accent) cross-fades per slot, reusing
   the panel-show timing so the app identity matches the live panel */
.mkt .app-icon .ic,.mkt .app-name .nm,.mkt .accent-seg { animation: v1panelShow 32.5s linear infinite; }

/* ---- per-app delays: 0, 6.5, 13, 19.5, 26s ---- */
.mkt .panel-1,
.mkt .ic.seg-slack,.mkt .nm.seg-slack,.mkt .accent-seg.seg-slack { animation-delay: 0s; }
.mkt .panel-1 .selhi,.mkt .panel-1 .src,.mkt .panel-1 .shimmer,.mkt .panel-1 .keypress,
.mkt .panel-1 .ai-rewrite,.mkt .panel-1 .eng,.mkt .panel-1 .undopill { animation-delay: 0s; }
.mkt .panel-1 .shimmer { animation-delay: 0s,0s; }
.mkt .panel-1 .eng .w-d1 { animation-delay: 0s; }
.mkt .panel-1 .eng .w-d2 { animation-delay: .09s; } .mkt .panel-1 .eng .w-d3 { animation-delay: .18s; }
.mkt .panel-1 .eng .w-d4 { animation-delay: .27s; } .mkt .panel-1 .eng .w-d5 { animation-delay: .36s; }
.mkt .panel-1 .eng .w-d6 { animation-delay: .45s; } .mkt .panel-1 .eng .w-d7 { animation-delay: .54s; }
.mkt .panel-1 .eng .w-d8 { animation-delay: .63s; } .mkt .panel-1 .eng .w-d9 { animation-delay: .72s; }
.mkt .panel-1 .eng .w-d10 { animation-delay: .81s; } .mkt .panel-1 .eng .w-d11 { animation-delay: .90s; }
.mkt .panel-1 .eng .w-d12 { animation-delay: .99s; }

.mkt .panel-2,
.mkt .ic.seg-linkedin,.mkt .nm.seg-linkedin,.mkt .accent-seg.seg-linkedin { animation-delay: 6.5s; }
.mkt .panel-2 .selhi,.mkt .panel-2 .src,.mkt .panel-2 .keypress,
.mkt .panel-2 .ai-rewrite,.mkt .panel-2 .eng,.mkt .panel-2 .undopill { animation-delay: 6.5s; }
.mkt .panel-2 .shimmer { animation-delay: 0s,6.5s; }
.mkt .panel-2 .eng .w-d1 { animation-delay: 6.5s; }
.mkt .panel-2 .eng .w-d2 { animation-delay: 6.59s; } .mkt .panel-2 .eng .w-d3 { animation-delay: 6.68s; }
.mkt .panel-2 .eng .w-d4 { animation-delay: 6.77s; } .mkt .panel-2 .eng .w-d5 { animation-delay: 6.86s; }
.mkt .panel-2 .eng .w-d6 { animation-delay: 6.95s; } .mkt .panel-2 .eng .w-d7 { animation-delay: 7.04s; }
.mkt .panel-2 .eng .w-d8 { animation-delay: 7.13s; } .mkt .panel-2 .eng .w-d9 { animation-delay: 7.22s; }
.mkt .panel-2 .eng .w-d10 { animation-delay: 7.31s; } .mkt .panel-2 .eng .w-d11 { animation-delay: 7.40s; }
.mkt .panel-2 .eng .w-d12 { animation-delay: 7.49s; }

.mkt .panel-3,
.mkt .ic.seg-reddit,.mkt .nm.seg-reddit,.mkt .accent-seg.seg-reddit { animation-delay: 13s; }
.mkt .panel-3 .selhi,.mkt .panel-3 .src,.mkt .panel-3 .keypress,
.mkt .panel-3 .ai-rewrite,.mkt .panel-3 .eng,.mkt .panel-3 .undopill { animation-delay: 13s; }
.mkt .panel-3 .shimmer { animation-delay: 0s,13s; }
.mkt .panel-3 .eng .w-d1 { animation-delay: 13s; }
.mkt .panel-3 .eng .w-d2 { animation-delay: 13.09s; } .mkt .panel-3 .eng .w-d3 { animation-delay: 13.18s; }
.mkt .panel-3 .eng .w-d4 { animation-delay: 13.27s; } .mkt .panel-3 .eng .w-d5 { animation-delay: 13.36s; }
.mkt .panel-3 .eng .w-d6 { animation-delay: 13.45s; } .mkt .panel-3 .eng .w-d7 { animation-delay: 13.54s; }
.mkt .panel-3 .eng .w-d8 { animation-delay: 13.63s; } .mkt .panel-3 .eng .w-d9 { animation-delay: 13.72s; }
.mkt .panel-3 .eng .w-d10 { animation-delay: 13.81s; } .mkt .panel-3 .eng .w-d11 { animation-delay: 13.90s; }
.mkt .panel-3 .eng .w-d12 { animation-delay: 13.99s; }

.mkt .panel-4,
.mkt .ic.seg-gmail,.mkt .nm.seg-gmail,.mkt .accent-seg.seg-gmail { animation-delay: 19.5s; }
.mkt .panel-4 .selhi,.mkt .panel-4 .src,.mkt .panel-4 .keypress,
.mkt .panel-4 .ai-rewrite,.mkt .panel-4 .eng,.mkt .panel-4 .undopill { animation-delay: 19.5s; }
.mkt .panel-4 .shimmer { animation-delay: 0s,19.5s; }
.mkt .panel-4 .eng .w-d1 { animation-delay: 19.5s; }
.mkt .panel-4 .eng .w-d2 { animation-delay: 19.59s; } .mkt .panel-4 .eng .w-d3 { animation-delay: 19.68s; }
.mkt .panel-4 .eng .w-d4 { animation-delay: 19.77s; } .mkt .panel-4 .eng .w-d5 { animation-delay: 19.86s; }
.mkt .panel-4 .eng .w-d6 { animation-delay: 19.95s; } .mkt .panel-4 .eng .w-d7 { animation-delay: 20.04s; }
.mkt .panel-4 .eng .w-d8 { animation-delay: 20.13s; } .mkt .panel-4 .eng .w-d9 { animation-delay: 20.22s; }
.mkt .panel-4 .eng .w-d10 { animation-delay: 20.31s; } .mkt .panel-4 .eng .w-d11 { animation-delay: 20.40s; }
.mkt .panel-4 .eng .w-d12 { animation-delay: 20.49s; }

.mkt .panel-5,
.mkt .ic.seg-web,.mkt .nm.seg-web,.mkt .accent-seg.seg-web { animation-delay: 26s; }
.mkt .panel-5 .selhi,.mkt .panel-5 .src,.mkt .panel-5 .keypress,
.mkt .panel-5 .ai-rewrite,.mkt .panel-5 .eng,.mkt .panel-5 .undopill { animation-delay: 26s; }
.mkt .panel-5 .shimmer { animation-delay: 0s,26s; }
.mkt .panel-5 .eng .w-d1 { animation-delay: 26s; }
.mkt .panel-5 .eng .w-d2 { animation-delay: 26.09s; } .mkt .panel-5 .eng .w-d3 { animation-delay: 26.18s; }
.mkt .panel-5 .eng .w-d4 { animation-delay: 26.27s; } .mkt .panel-5 .eng .w-d5 { animation-delay: 26.36s; }
.mkt .panel-5 .eng .w-d6 { animation-delay: 26.45s; } .mkt .panel-5 .eng .w-d7 { animation-delay: 26.54s; }
.mkt .panel-5 .eng .w-d8 { animation-delay: 26.63s; } .mkt .panel-5 .eng .w-d9 { animation-delay: 26.72s; }
.mkt .panel-5 .eng .w-d10 { animation-delay: 26.81s; } .mkt .panel-5 .eng .w-d11 { animation-delay: 26.90s; }
.mkt .panel-5 .eng .w-d12 { animation-delay: 26.99s; }

/* ---------- HOW IT WORKS ---------- */
.mkt section { padding: 72px 0; }
.mkt .sec-head { text-align: center; max-width: 60ch; margin: 0 auto 44px; }
.mkt .sec-kicker { color: var(--terracotta); font-weight: 700; font-size: 13.5px; letter-spacing: .04em;
  text-transform: uppercase; }
.mkt .sec-head h2 { font-size: clamp(26px,3.6vw,38px); letter-spacing: -.02em; margin-top: 10px; font-weight: 700; }
.mkt .sec-head p { color: var(--muted); font-size: 17px; margin-top: 12px; }
.mkt .steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
.mkt .step { background: #fff; border-radius: var(--radius); padding: 28px 26px;
  box-shadow: 0 10px 40px rgba(44,42,38,.08); border: 1px solid rgba(44,42,38,.05); position: relative; }
.mkt .step .num { width: 34px; height: 34px; border-radius: 10px; background: rgba(124,139,111,.14);
  color: var(--sage-dark); font-weight: 700; display: grid; place-items: center; font-size: 15px; margin-bottom: 16px; }
.mkt .step h3 { font-size: 18.5px; font-weight: 700; letter-spacing: -.01em; }
.mkt .step p { color: var(--muted); margin-top: 8px; font-size: 15px; }
.mkt .step .kc { margin-top: 14px; }

/* ---------- AI SECTION ---------- */
.mkt .ai-sec { background: linear-gradient(180deg,#fbf9f3,#f3efe5); }
.mkt .ai-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
.mkt .ai-copy h2 { font-size: clamp(26px,3.4vw,36px); letter-spacing: -.02em; font-weight: 700; }
.mkt .ai-copy h2 .hl { color: var(--terracotta); }
.mkt .ai-copy p { color: var(--muted); font-size: 17px; margin-top: 16px; max-width: 46ch; }
.mkt .ai-points { margin-top: 22px; display: flex; flex-direction: column; gap: 13px; }
.mkt .ai-points li { list-style: none; display: flex; gap: 11px; align-items: flex-start; font-size: 15.5px; }
.mkt .ai-points .tick { width: 22px; height: 22px; border-radius: 7px; flex: none; display: grid; place-items: center;
  background: var(--sage); color: #fff; font-size: 12px; font-weight: 700; margin-top: 1px; }
.mkt .ai-points b { font-weight: 700; }
/* before/after card */
.mkt .ba-card { background: #fff; border-radius: var(--radius); padding: 26px;
  box-shadow: 0 10px 40px rgba(44,42,38,.08); border: 1px solid rgba(44,42,38,.05); }
.mkt .ba-label { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 8px; }
.mkt .ba-before { color: var(--muted); font-size: 15.5px; padding: 13px 15px; border-radius: 11px;
  background: rgba(44,42,38,.04); border: 1px dashed rgba(44,42,38,.14); }
.mkt .ba-arrow { display: flex; align-items: center; gap: 9px; color: var(--terracotta); font-weight: 700;
  font-size: 13px; margin: 16px 2px; }
.mkt .ba-arrow .line { flex: 1; height: 1px; background: rgba(198,107,78,.25); }
.mkt .ba-after { color: var(--ink); font-size: 16px; padding: 14px 16px; border-radius: 11px;
  background: rgba(124,139,111,.10); border: 1px solid rgba(124,139,111,.25); font-weight: 500; }
.mkt .ba-after .chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700;
  color: var(--sage-dark); background: #fff; padding: 3px 8px; border-radius: 999px; margin-bottom: 9px;
  border: 1px solid rgba(124,139,111,.3); }

/* ---------- FEATURES ---------- */
.mkt .feat-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }
.mkt .feat { background: #fff; border-radius: var(--radius); padding: 24px 22px;
  box-shadow: 0 10px 40px rgba(44,42,38,.07); border: 1px solid rgba(44,42,38,.05); }
.mkt .feat .ico { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 20px;
  background: rgba(198,107,78,.10); margin-bottom: 15px; }
.mkt .feat h3 { font-size: 16.5px; font-weight: 700; letter-spacing: -.01em; }
.mkt .feat p { color: var(--muted); font-size: 14.5px; margin-top: 7px; }

/* ---------- PRICING STRIP (landing page inline strip) ---------- */
.mkt .price-strip { background: #fff; border-radius: 20px; padding: 8px;
  box-shadow: 0 14px 50px rgba(44,42,38,.10); border: 1px solid rgba(44,42,38,.05);
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mkt .price-cell { padding: 30px 30px; border-radius: 15px; }
.mkt .price-cell.free { background: transparent; }
.mkt .price-cell.pro { background: linear-gradient(160deg,#fbf6f3,#f7efe9); position: relative; }
.mkt .price-tag { font-size: 14px; font-weight: 700; color: var(--sage-dark); letter-spacing: .03em; text-transform: uppercase; }
.mkt .price-cell.pro .price-tag { color: var(--terracotta); }
.mkt .price-amt { font-size: 34px; font-weight: 700; letter-spacing: -.02em; margin-top: 8px; }
.mkt .price-amt small { font-size: 15px; color: var(--muted); font-weight: 600; }
.mkt .price-desc { color: var(--muted); font-size: 15px; margin-top: 8px; max-width: 34ch; }
.mkt .price-cell .pill-tag { position: absolute; top: 18px; right: 18px; background: var(--terracotta); color: #fff;
  font-size: 11.5px; font-weight: 700; padding: 4px 11px; border-radius: 999px; }
.mkt .price-foot { text-align: center; margin-top: 20px; font-size: 15px; color: var(--muted); }

/* ---------- FINAL CTA ---------- */
.mkt .final { text-align: center; }
.mkt .final .card { background: linear-gradient(155deg,var(--sage-dark),var(--sage));
  border-radius: 24px; padding: 54px 32px; color: #fff; box-shadow: 0 20px 60px rgba(95,110,84,.30); }
.mkt .final h2 { font-size: clamp(26px,3.6vw,38px); letter-spacing: -.02em; font-weight: 700; }
.mkt .final p { margin-top: 14px; font-size: 17px; color: rgba(255,255,255,.85); max-width: 48ch; margin-inline: auto; }
.mkt .final .btn-primary { margin-top: 26px; background: #fff; color: var(--terracotta); }
.mkt .final .btn-primary:hover { background: #fff; }
.mkt .final .fmeta { margin-top: 15px; font-size: 13.5px; color: rgba(255,255,255,.75); }

/* ---------- FOOTER ---------- */
.mkt .footer { padding: 30px 0 40px; border-top: 1px solid rgba(44,42,38,.07); margin-top: 60px; }
.mkt .footer .row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; }
.mkt .footer .links { display: flex; gap: 22px; font-size: 14px; color: var(--muted); }
.mkt .footer .links a:hover { color: var(--ink); }
.mkt .footer .copy { font-size: 13.5px; color: var(--muted); }

/* reduced motion: freeze on the final, translated English state for app 1 */
@media (prefers-reduced-motion: reduce) {
  .mkt * { animation: none !important; }
  .mkt .panel-1 { opacity: 1; } .mkt .panel-2,.mkt .panel-3,.mkt .panel-4,.mkt .panel-5 { opacity: 0; }
  .mkt .panel-1 .selhi { width: 0; opacity: 0; }
  .mkt .panel-1 .src { opacity: 0; }
  .mkt .panel-1 .shimmer { opacity: 0; }
  .mkt .panel-1 .ai-rewrite { opacity: 0; }
  .mkt .panel-1 .keypress { opacity: 0; }
  .mkt .panel-1 .eng { opacity: 1; }
  .mkt .panel-1 .eng .w { opacity: 1; transform: none; filter: none; }
  .mkt .panel-1 .undopill { opacity: 1; transform: translateY(0); }
  .mkt .ic.seg-slack,.mkt .nm.seg-slack,.mkt .accent-seg.seg-slack { opacity: 1; }
}

/* responsive (landing) */
@media (max-width: 880px) {
  .mkt .nav-links { display: none; }
  .mkt .ai-grid { grid-template-columns: 1fr; gap: 30px; }
  .mkt .steps { grid-template-columns: 1fr; }
  .mkt .feat-grid { grid-template-columns: 1fr 1fr; }
  .mkt .price-strip { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .mkt .feat-grid { grid-template-columns: 1fr; }
  .mkt h1 { font-size: 34px; }
}

/* ============================================================
   PRICING PAGE - SPECIFIC COMPONENTS
   (appended from landing-pricing-v1.html; shared rules above
   are not duplicated)
   ============================================================ */

/* ---------- PRICING HERO ---------- */
.mkt .phero { padding: 60px 0 8px; text-align: center; }
.mkt .phero h1 { font-size: clamp(32px,4.8vw,50px); line-height: 1.06; letter-spacing: -.025em;
  font-weight: 700; margin: 20px auto 0; max-width: 18ch; }
.mkt .phero h1 .accent { color: var(--terracotta); }
.mkt .phero .subhead { max-width: 52ch; margin: 18px auto 0; font-size: clamp(16px,2vw,19px); color: var(--muted); }
.mkt .phero .subhead strong { color: var(--ink); font-weight: 600; }

/* ---------- BILLING TOGGLE ---------- */
.mkt .billing-toggle { display: inline-flex; align-items: center; gap: 6px; background: #fff;
  border: 1px solid rgba(44,42,38,.10); border-radius: 999px; padding: 5px; margin: 28px auto 0;
  box-shadow: 0 6px 18px rgba(44,42,38,.06); }
.mkt .billing-toggle button { font-family: inherit; border: none; background: transparent; cursor: pointer;
  font-size: 14.5px; font-weight: 700; color: var(--muted); padding: 9px 18px; border-radius: 999px;
  transition: background .18s ease,color .18s ease; }
.mkt .billing-toggle button.on { background: var(--ink); color: #fff; }
.mkt .billing-toggle .save { display: inline-block; margin-left: 6px; font-size: 11.5px; font-weight: 700;
  color: var(--sage-dark); background: rgba(124,139,111,.16); padding: 2px 8px; border-radius: 999px; }

/* ---------- PLAN CARDS ---------- */
.mkt .plans { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; max-width: 860px; margin: 40px auto 0; }
.mkt .plan { background: #fff; border-radius: 20px; padding: 34px 32px; position: relative;
  border: 1px solid rgba(44,42,38,.06); box-shadow: 0 14px 50px rgba(44,42,38,.08);
  display: flex; flex-direction: column; }
.mkt .plan.pro { border: 1.5px solid rgba(198,107,78,.45);
  background: linear-gradient(170deg,#fffdfb,#fbf4ef); box-shadow: 0 18px 56px rgba(198,107,78,.16); }
.mkt .plan .pill-tag { position: absolute; top: 22px; right: 24px; background: var(--terracotta); color: #fff;
  font-size: 11.5px; font-weight: 700; padding: 5px 12px; border-radius: 999px;
  box-shadow: 0 6px 16px rgba(198,107,78,.30); }
.mkt .plan .ptag { font-size: 14px; font-weight: 700; color: var(--sage-dark); letter-spacing: .03em; text-transform: uppercase; }
.mkt .plan.pro .ptag { color: var(--terracotta); }
.mkt .plan .price { display: flex; align-items: baseline; gap: 6px; margin-top: 14px; }
.mkt .plan .amt { font-size: 46px; font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.mkt .plan .per { font-size: 15px; color: var(--muted); font-weight: 600; }
.mkt .plan .bill-note { font-size: 13.5px; color: var(--muted); margin-top: 7px; min-height: 18px; }
.mkt .plan .ptagline { font-size: 15.5px; color: var(--muted); margin-top: 14px; max-width: 34ch; }
.mkt .plan .plan-cta { margin-top: 22px; width: 100%; justify-content: center; }
.mkt .plan.free .plan-cta { background: var(--ink); box-shadow: 0 6px 18px rgba(44,42,38,.20); }
.mkt .plan.free .plan-cta:hover { background: #1f1d1a; box-shadow: 0 10px 24px rgba(44,42,38,.26); }
.mkt .plan .cta-sub { text-align: center; font-size: 12.5px; color: var(--muted); margin-top: 10px; }
.mkt .plan .incl { list-style: none; margin-top: 24px; padding-top: 22px; border-top: 1px solid rgba(44,42,38,.08);
  display: flex; flex-direction: column; gap: 11px; }
.mkt .plan .incl li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; color: var(--ink); }
.mkt .plan .incl .tick { width: 20px; height: 20px; border-radius: 6px; flex: none; display: grid; place-items: center;
  background: var(--sage); color: #fff; font-size: 11px; font-weight: 700; margin-top: 1px; }
.mkt .plan.pro .incl .tick { background: var(--terracotta); }
.mkt .plan .incl .lead { font-weight: 700; }

/* ---------- COMPARISON TABLE ---------- */
.mkt .compare { max-width: 860px; margin: 0 auto; background: #fff; border-radius: 20px; overflow: hidden;
  border: 1px solid rgba(44,42,38,.06); box-shadow: 0 14px 50px rgba(44,42,38,.08); }
.mkt .compare table { width: 100%; border-collapse: collapse; }
.mkt .compare th,.mkt .compare td { text-align: left; padding: 16px 24px; font-size: 15px;
  border-bottom: 1px solid rgba(44,42,38,.07); }
.mkt .compare thead th { font-size: 14px; font-weight: 700; color: var(--ink); background: #fbf9f4; }
.mkt .compare thead th.col { text-align: center; width: 150px; }
.mkt .compare thead th.col .small { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin-top: 2px; }
.mkt .compare thead th.pro-col { color: var(--terracotta); }
.mkt .compare td.feat-name { color: var(--ink); font-weight: 600; }
.mkt .compare td.feat-name small { display: block; color: var(--muted); font-weight: 500; font-size: 13px; margin-top: 2px; }
.mkt .compare td.cell { text-align: center; color: var(--muted); font-weight: 600; }
.mkt .compare td.cell .yes { color: var(--sage-dark); font-weight: 700; font-size: 17px; }
.mkt .compare td.cell .hl { color: var(--terracotta); font-weight: 700; }
.mkt .compare tr:last-child th,.mkt .compare tr:last-child td { border-bottom: none; }
.mkt .compare .row-highlight td { background: rgba(198,107,78,.05); }

/* ---------- FAQ ---------- */
.mkt .faq-sec { background: linear-gradient(180deg,#fbf9f3,#f3efe5); }
.mkt .faq { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.mkt .qa { background: #fff; border-radius: var(--radius); padding: 22px 26px;
  border: 1px solid rgba(44,42,38,.05); box-shadow: 0 8px 30px rgba(44,42,38,.06); }
.mkt .qa h3 { font-size: 16.5px; font-weight: 700; letter-spacing: -.01em; }
.mkt .qa p { color: var(--muted); font-size: 15px; margin-top: 8px; }

/* responsive (pricing) */
@media (max-width: 880px) {
  .mkt .plans { grid-template-columns: 1fr; max-width: 460px; }
}
@media (max-width: 520px) {
  .mkt .compare th,.mkt .compare td { padding: 13px 14px; font-size: 14px; }
  .mkt .compare thead th.col { width: 84px; }
}