/* ==========================================================================
   Marketing site — landing page, header, footer.
   Loaded only on marketing pages via layouts/marketing.blade.php.
   ========================================================================== */

.marketing-body{ background:var(--paper); }

/* .mkt-btn-primary/.mkt-btn-ghost were written for <a> CTAs, which have no
   native background/border/appearance — applying them to a real <button>
   (e.g. the Stripe checkout submit on billing-plans.blade.php) let the
   browser's own button chrome show through underneath. appearance:none plus
   explicit border/background/cursor make both classes render identically
   on <a> and <button>. */
.mkt-btn-primary{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-weight:700; font-size:13.5px; letter-spacing:.01em;
  padding:10px 20px; border-radius:7px; background:var(--brass); color:#FFFFFF;
  border:none; appearance:none; -webkit-appearance:none; cursor:pointer;
  transition:background .15s, transform .15s; white-space:nowrap;
}
.mkt-btn-primary:hover{ background:var(--brass-deep); transform:translateY(-1px); }
.mkt-btn-ghost{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--font-mono); font-weight:600; font-size:13.5px;
  padding:10px 20px; border-radius:7px; border:1px solid var(--line-strong); color:var(--ink-900);
  background:transparent; appearance:none; -webkit-appearance:none; cursor:pointer;
  transition:border-color .15s, background .15s; white-space:nowrap;
}
.mkt-btn-ghost:hover{ border-color:var(--brass); background:var(--brass-wash); }
.mkt-btn-ghost:disabled{
  cursor:not-allowed; opacity:.55; border-color:var(--line);
  font-family:var(--font-mono); font-size:12.5px;
}
.mkt-btn-ghost:disabled:hover{ background:transparent; border-color:var(--line); }
.mkt-btn-lg{ padding:14px 28px; font-size:14.5px; }
.mkt-btn-block{ width:100%; }

.mkt-logo{ display:flex; align-items:center; gap:10px; }
.mkt-logo-mark{
  width:34px; height:34px; flex:0 0 34px; border-radius:9px;
  background:linear-gradient(145deg, var(--brass-bright), var(--clay));
  display:flex; align-items:center; justify-content:center;
  font-family:'Fraunces', serif; font-weight:700; font-style:italic; font-size:16px; color:#FFFFFF;
}
.mkt-logo-word{ font-family:'Fraunces', serif; font-size:19px; font-weight:700; font-style:italic; color:var(--ink-900); }
.mkt-logo-word em{ color:var(--brass-deep); font-style:italic; }

.mkt-header{
  position:sticky; top:0; z-index:50;
  background:rgba(251,250,247,0.92); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.mkt-header-row{
  max-width:1240px; margin:0 auto; padding:16px 28px;
  display:flex; align-items:center; gap:32px;
}
.mkt-nav{ display:flex; gap:28px; flex:1; }
.mkt-nav a{ font-size:14px; font-weight:500; color:var(--ink-700); transition:color .15s; }
.mkt-nav a:hover{ color:var(--ink-900); }
.mkt-header-actions{ display:flex; align-items:center; gap:12px; }

.mkt-burger{ display:none; flex-direction:column; gap:4px; width:32px; height:32px; align-items:center; justify-content:center; border:none; background:none; }
.mkt-burger span{ width:18px; height:2px; background:var(--chrome); border-radius:1px; }
.mkt-mobile-nav{ display:none; flex-direction:column; padding:14px 28px 18px; gap:4px; border-top:1px solid var(--line); }
.mkt-mobile-nav a{ padding:10px 4px; font-size:14.5px; font-weight:500; color:var(--ink-700); }
.mkt-mobile-nav.is-open{ display:flex; }

@media(max-width:860px){
  .mkt-nav, .mkt-header-actions{ display:none; }
  .mkt-burger{ display:flex; margin-left:auto; }
}

.mkt-hero{
  padding:72px 28px 0; position:relative; overflow:hidden;
}
.mkt-hero::before{
  content:''; position:absolute; top:-220px; left:50%; transform:translateX(-50%);
  width:1100px; height:520px; pointer-events:none;
  background:radial-gradient(ellipse at center, var(--brass-wash) 0%, transparent 70%);
  opacity:.6; z-index:0;
}
.mkt-hero-inner{ position:relative; z-index:1; max-width:880px; margin:0 auto; text-align:center; }
.mkt-eyebrow{
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--brass-deep); margin-bottom:14px; font-weight:700;
}
.mkt-hero h1{
  font-family:var(--font-display); font-size:clamp(34px, 5vw, 54px); font-weight:700;
  color:var(--ink-900); letter-spacing:-.01em; line-height:1.08; margin-bottom:18px;
}
.mkt-hero-sub{ font-size:17px; color:var(--ink-700); line-height:1.6; max-width:640px; margin:0 auto 8px; }

.mkt-engine{
  position:relative; max-width:1000px; margin:46px auto 8px;
  height:460px;
}
.mkt-engine-lines{ position:absolute; inset:0; width:100%; height:100%; }
.mkt-engine-lines path{ fill:none; stroke:var(--line-strong); stroke-width:1.5; }
.mkt-engine-lines .line-in{ stroke:var(--brass-wash); }
.mkt-engine-lines .line-out{ stroke:var(--sage-wash); }
.flow-dot{ fill:var(--brass); }
.flow-dot.dot-out{ fill:var(--sage); }

.mkt-engine-input{
  position:absolute; left:0; transform:translateY(-50%);
  background:var(--paper-raised); border:1px solid var(--line); border-radius:20px;
  padding:9px 16px; font-size:12.5px; font-weight:600; color:var(--ink-900);
  box-shadow:var(--shadow-sm); white-space:nowrap;
}

.mkt-engine-core{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:140px; height:140px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, var(--brass-bright), var(--brass) 60%, var(--brass-deep) 100%);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 0 8px var(--brass-wash), 0 12px 30px rgba(198,138,30,.28);
}
.mkt-engine-core-ring{
  position:absolute; inset:-14px; border-radius:50%; border:2px dashed var(--line-strong);
  animation:mkt-spin 40s linear infinite;
}
@keyframes mkt-spin{ to{ transform:rotate(360deg); } }
.mkt-engine-core-label{ display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center; }
.mkt-engine-core-title{ font-family:var(--font-display); font-weight:700; font-size:14px; color:#FFFFFF; line-height:1.2; }
.mkt-engine-core-tag{ font-family:var(--font-mono); font-size:9.5px; color:rgba(255,255,255,.85); letter-spacing:.04em; }

.mkt-engine-output{
  position:absolute; right:0; transform:translateY(-50%); width:280px;
  background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius);
  padding:14px 16px; box-shadow:var(--shadow-sm); text-align:left;
}
.mkt-out-head{ display:flex; align-items:center; gap:10px; margin-bottom:7px; }
.mkt-engine-output p{ font-size:12px; color:var(--ink-700); line-height:1.45; }

.mkt-engine-caption{ font-size:13.5px; color:var(--ink-500); max-width:560px; margin:18px auto 36px; line-height:1.6; }
.mkt-hero-cta{ display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; }

@media(max-width:860px){
  /* Root cause of a page-wide mobile overflow bug (every section below
     the hero was getting clipped on the right, not just this one): the
     input pills keep white-space:nowrap from the desktop layout, and a
     flex child's default min-width:auto means a long unwrappable label
     ("News & Retail Sentiment") forces the whole .mkt-engine flex
     column -- and everything after it -- wider than the viewport.
     Letting it wrap removes the forcing width instead of just hoping
     an ancestor's overflow:hidden happens to contain it. */
  .mkt-engine{ height:auto; display:flex; flex-direction:column; gap:10px; min-width:0; }
  .mkt-engine-lines{ display:none; }
  .mkt-engine-input, .mkt-engine-output{ position:static; transform:none; width:auto; }
  .mkt-engine-input{ white-space:normal; }
  .mkt-engine-core{ position:static; transform:none; margin:18px auto; }
  .mkt-engine-core-ring{ display:none; }
}

.mkt-stats{ background:var(--chrome); padding:30px 28px; }
.mkt-stats-inner{
  max-width:1100px; margin:0 auto; display:grid;
  grid-template-columns:repeat(4,1fr); gap:24px; text-align:center;
}
.mkt-stat{ display:flex; flex-direction:column; gap:4px; }
.mkt-stat-num{ font-family:var(--font-display); font-size:28px; font-weight:700; color:var(--brass-bright); }
.mkt-stat-label{ font-family:var(--font-mono); font-size:11.5px; color:#E8E4D8; }
@media(max-width:700px){ .mkt-stats-inner{ grid-template-columns:repeat(2,1fr); } }

.mkt-section{ padding:80px 28px; }
.mkt-section-alt{ background:var(--paper-sunk); }
.mkt-section-inner{ max-width:1100px; margin:0 auto; text-align:center; }
.mkt-section-narrow{ max-width:740px; }
.mkt-section h2{ font-family:var(--font-display); font-size:clamp(26px,3.4vw,36px); font-weight:700; color:var(--ink-900); margin-bottom:10px; letter-spacing:-.005em; }
.mkt-section-sub{ font-size:15px; color:var(--ink-500); margin-bottom:44px; }

.mkt-feature-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:44px; text-align:left; }
.mkt-feature-card{
  background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius);
  padding:26px 24px; transition:border-color .15s, transform .15s, box-shadow .15s;
}
.mkt-feature-card:hover{ transform:translateY(-3px); border-color:var(--line-strong); box-shadow:var(--shadow-md); }
.mkt-feature-icon{ width:46px; height:46px; border-radius:11px; display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
.mkt-feature-card h3{ font-family:var(--font-display); font-size:17px; font-weight:600; color:var(--ink-900); margin-bottom:8px; }
.mkt-feature-card p{ font-size:13.5px; color:var(--ink-700); line-height:1.55; }
@media(max-width:900px){ .mkt-feature-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:600px){ .mkt-feature-grid{ grid-template-columns:1fr; } }

/* ===== Product preview — tabbed real screenshots ===== */
.mkt-preview-tabs{
  display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:0 auto 28px;
}
.mkt-preview-tab{
  font-family:var(--font-mono); font-size:12.5px; font-weight:600; letter-spacing:.02em;
  padding:9px 16px; border-radius:8px; border:1px solid var(--line-strong);
  background:var(--paper-raised); color:var(--ink-700); cursor:pointer;
  transition:background .18s ease, color .18s ease, box-shadow .18s ease, transform .12s ease;
}
.mkt-preview-tab:hover{ border-color:var(--brass); color:var(--ink-900); transform:translateY(-1px); }
.mkt-preview-tab.active{
  background:var(--chrome); border-color:var(--ink-900); color:#FFFFFF;
  box-shadow:0 4px 14px rgba(43,44,38,.18);
}

.mkt-preview-frame{
  max-width:1020px; margin:0 auto; border-radius:14px; overflow:hidden;
  border:1px solid var(--line-strong); box-shadow:var(--shadow-md); background:var(--paper-raised);
}
.mkt-preview-bar{
  display:flex; align-items:center; gap:7px; padding:11px 14px; background:var(--paper-sunk);
  border-bottom:1px solid var(--line);
}
.mkt-preview-dot{ width:10px; height:10px; border-radius:50%; flex:0 0 10px; }
.mkt-preview-url{
  margin-left:10px; font-family:var(--font-mono); font-size:11.5px; color:var(--ink-500);
  background:var(--paper-raised); border:1px solid var(--line); border-radius:5px; padding:3px 10px;
}

.mkt-preview-body{ position:relative; width:100%; aspect-ratio:1600/760; background:var(--paper-sunk); }
.mkt-preview-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:top center;
  opacity:0; transition:opacity .28s ease; pointer-events:none;
}
.mkt-preview-img.active{ opacity:1; pointer-events:auto; }

.mkt-preview-caption{
  max-width:640px; margin:22px auto 0; font-size:13.5px; color:var(--ink-700); line-height:1.55;
}
@media(max-width:640px){ .mkt-preview-tab{ font-size:11.5px; padding:8px 12px; } }

.mkt-how-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:32px; margin-top:44px; text-align:left; }
.mkt-how-num{ font-family:var(--font-display); font-size:34px; font-weight:700; color:var(--line-strong); display:block; margin-bottom:8px; }
.mkt-how-step h3{ font-family:var(--font-display); font-size:17px; font-weight:600; color:var(--ink-900); margin-bottom:8px; }
.mkt-how-step p{ font-size:13.5px; color:var(--ink-700); line-height:1.6; }
@media(max-width:860px){ .mkt-how-grid{ grid-template-columns:1fr; gap:28px; } }

/* ===== Connect Your AI — MCP ===== */
.ai-connect-grid{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; text-align:left; }
.ai-connect-copy h2{ margin-bottom:14px; }
@media(max-width:900px){ .ai-connect-grid{ grid-template-columns:1fr; gap:36px; } }

.ai-connect-visual{
  position:relative; overflow:hidden;
  background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius);
  padding:28px; box-shadow:var(--shadow-md);
}
.ai-connect-visual::before{
  content:''; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg, var(--brass-bright), var(--clay), var(--brass-bright));
  background-size:200% 100%; animation:ai-accent-shift 6s linear infinite;
}
@keyframes ai-accent-shift{ from{ background-position:0% 0; } to{ background-position:200% 0; } }

/* Grid, not flex -- the two text-bearing nodes get minmax(0,1fr) tracks,
   the standard fix for "long text forces overflow past the parent" that
   flex+nowrap is prone to. Only 2 columns, not 3 -- the hub isn't a
   grid track at all (see .ai-flow-hub below), so it can't drift off
   true center if the two card columns ever end up unequal widths; the
   gap between them just reserves clear space for it to float in. */
.ai-flow{
  position:relative;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:center; gap:140px; margin-bottom:24px;
}
.ai-flow-node{
  position:relative; z-index:1; min-width:0;
  background:var(--paper-sunk); border:1px solid var(--line); border-radius:10px;
  padding:14px 16px; display:flex; flex-direction:column; gap:6px;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.ai-flow-node:hover{ border-color:var(--line-strong); box-shadow:var(--shadow-sm); }
.ai-flow-node-head{ display:flex; align-items:center; gap:7px; min-width:0; }
.ai-flow-node-label{ font-family:var(--font-display); font-size:15px; font-weight:700; color:var(--ink-900); }
.ai-flow-node-label-serif{ font-style:italic; }
.ai-flow-node-sub{
  font-size:11.5px; color:var(--ink-500); font-style:italic; line-height:1.4;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
}
.ai-flow-macrolens .ai-flow-node-label{ color:var(--brass-deep); }

.ai-flow-icon-claude{ flex:0 0 18px; color:#C9603F; }

.ai-flow-live-dot{
  width:6px; height:6px; border-radius:50%; background:var(--sage-deep);
  display:inline-block; margin-right:6px;
  box-shadow:0 0 0 0 rgba(58,140,90,.5); animation:ai-live-pulse 1.8s ease-out infinite;
}
@keyframes ai-live-pulse{
  0%{ box-shadow:0 0 0 0 rgba(58,140,90,.45); }
  70%{ box-shadow:0 0 0 6px rgba(58,140,90,0); }
  100%{ box-shadow:0 0 0 0 rgba(58,140,90,0); }
}

/* Spans the FULL width of .ai-flow (not just the middle column) sitting
   behind everything else -- the node cards' and pill's own opaque
   backgrounds naturally mask whatever part of the line falls behind
   them, so what's actually visible is the line running right into both
   cards and the pill from either side, exactly like it's one
   continuous connection. z-index:0 (vs. 1 on the cards/pill) is what
   keeps it behind rather than painting over them. Plain CSS border, not
   SVG -- a non-uniformly-stretched SVG viewBox was rendering the line
   and dots at sub-pixel size, effectively invisible; real CSS pixels
   have no such scaling ambiguity. */
.ai-flow-line-track{
  position:absolute; left:0; right:0; top:50%; z-index:0;
  border-top:1.5px dashed var(--line-strong);
}

/* Two colors, one per direction -- same dot-in(brass)/dot-out(sage)
   convention the hero engine diagram already uses, so "question going
   out" and "data coming back" read as visually distinct without needing
   a legend. left% is relative to .ai-flow's own width, so each dot makes
   the FULL Claude<->Macrolens trip in one unbroken motion. */
.ai-flow-dot{
  position:absolute; top:50%; z-index:0; width:7px; height:7px; border-radius:50%;
  transform:translate(-50%, -50%);
  animation-duration:3.4s; animation-iteration-count:infinite; animation-timing-function:linear;
}
.ai-flow-dot-ask{ background:var(--brass-bright); box-shadow:0 0 5px var(--brass-bright); animation-name:ai-dot-forward; }
.ai-flow-dot-data{ background:var(--sage-deep); box-shadow:0 0 5px var(--sage); animation-name:ai-dot-backward; animation-delay:1.7s; }
@keyframes ai-dot-forward{ from{ left:1%; } to{ left:99%; } }
@keyframes ai-dot-backward{ from{ left:99%; } to{ left:1%; } }

/* Absolutely centered on .ai-flow itself (left:50%/top:50%), not placed
   as a grid track -- guarantees it sits at the true midpoint of the
   whole row regardless of whether the two card columns end up exactly
   equal width. Sized to the pill ALONE (not a flex column with the
   caption stacked inside it) -- centering a two-line block would put
   the *gap* between pill and caption on the line, not the pill itself. */
.ai-flow-hub{ position:absolute; left:50%; top:50%; z-index:1; transform:translate(-50%, -50%); }
.ai-flow-pill{
  display:block;
  font-family:var(--font-mono); font-size:10.5px; font-weight:700; letter-spacing:.04em;
  color:var(--brass-deep); background:var(--brass-wash); border:1px solid var(--brass);
  padding:3px 10px; border-radius:20px; white-space:nowrap;
}
/* Positioned relative to .ai-flow-hub's own (pill-sized) box, not
   inside the centering math -- top:100% is the pill's bottom edge. */
.ai-flow-link-sub{
  position:absolute; left:50%; top:100%; margin-top:6px; transform:translateX(-50%);
  font-family:var(--font-mono); font-size:9.5px; color:var(--ink-500); white-space:nowrap;
}

@media(max-width:640px){
  .ai-flow{ grid-template-columns:1fr; gap:16px; }
  /* Undo the absolute centering + pill/caption split from the desktop
     layout -- stacked mode needs the hub back in normal flow as its
     own row between the two cards (not floating at the geometric
     center of the whole, much taller column), with the caption simply
     stacked below the pill again rather than independently positioned. */
  .ai-flow-hub{
    position:relative; left:auto; top:auto; transform:none;
    display:flex; flex-direction:column; align-items:center; gap:4px;
  }
  .ai-flow-link-sub{ position:relative; left:auto; top:auto; margin-top:0; transform:none; }
  /* Stacked layout -- the line/dots run vertically behind all three
     rows instead of horizontally. */
  .ai-flow-line-track{
    left:50%; right:auto; top:0; bottom:0; width:0;
    border-top:none; border-left:1.5px dashed var(--line-strong);
    transform:translateX(-50%);
  }
  .ai-flow-dot{ left:50%; animation-name:none; }
  .ai-flow-dot-ask{ animation-name:ai-dot-forward-vert; }
  .ai-flow-dot-data{ animation-name:ai-dot-backward-vert; }
  .ai-flow-hub{ background:var(--paper-raised); padding:6px 10px; border-radius:8px; }
  .ai-flow-node-sub{ -webkit-line-clamp:3; }
}
@keyframes ai-dot-forward-vert{ from{ top:1%; } to{ top:99%; } }
@keyframes ai-dot-backward-vert{ from{ top:99%; } to{ top:1%; } }

.ai-tool-grid-label{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.05em; color:var(--ink-500);
  text-transform:uppercase; margin-bottom:12px; padding-top:16px; border-top:1px solid var(--line);
}
/* Fixed 3-column grid, not flex-wrap -- every chip is exactly the same
   size regardless of label length, so the row edges line up instead of
   zigzagging with the shortest/longest labels. minmax(0,1fr), not bare
   1fr -- a plain 1fr track has an implicit min-width:auto, so it won't
   shrink below its content's min-content width (the longest label) even
   if that overflows the card; minmax(0,...) is what actually lets a
   track shrink and hand off to the label's own ellipsis instead. */
.ai-tool-grid{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:8px; }
.ai-tool-chip{
  display:flex; align-items:center; gap:8px; min-width:0;
  font-size:12.5px; font-weight:500; color:var(--ink-700); background:var(--paper-sunk);
  border:1px solid var(--line); border-radius:8px; padding:8px 10px;
  transition:border-color .15s ease, transform .15s ease, color .15s ease, box-shadow .15s ease;
}
.ai-tool-chip:hover{ border-color:var(--brass); color:var(--ink-900); transform:translateY(-2px); box-shadow:var(--shadow-sm); }
.ai-tool-chip-icon{
  width:22px; height:22px; flex:0 0 22px; border-radius:6px;
  display:flex; align-items:center; justify-content:center;
}
.ai-tool-chip-label{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
@media(max-width:520px){ .ai-tool-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }

.mkt-pricing-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,320px)); justify-content:center; gap:22px; margin-top:44px; text-align:left; }

/* Used in narrower contexts (Settings > Change plan, the subscription-
   expired gate) where auto-fit's 240px floor can leave an odd width that
   fits 2 cards but not a 3rd, wrapping it to its own row. Sized purely by
   card count instead, so it always stays a single row until the mobile
   breakpoint stacks it. */
.mkt-pricing-grid--fluid{ grid-template-columns:repeat(auto-fit,minmax(0,1fr)); }
.mkt-price-card{
  background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius);
  padding:30px 26px; position:relative; display:flex; flex-direction:column;
}
.mkt-price-featured{ border-color:var(--brass); box-shadow:0 0 0 3px var(--brass-wash); }
.mkt-price-badge{
  position:absolute; top:-12px; right:26px; background:var(--brass); color:#FFF;
  font-family:var(--font-mono); font-size:10px; font-weight:700; letter-spacing:.04em;
  padding:4px 10px; border-radius:20px;
}
.mkt-price-off-badge{
  position:absolute; top:-12px; left:26px;
  display:inline-flex; align-items:center; gap:5px;
  background:var(--sage); color:#FFF;
  font-family:var(--font-mono); font-size:10px; font-weight:700; letter-spacing:.04em;
  padding:4px 10px 4px 8px; border-radius:20px; box-shadow:var(--shadow-sm);
}
.mkt-price-card h3{ font-family:var(--font-display); font-size:18px; font-weight:600; color:var(--ink-900); margin-bottom:8px; }
.mkt-price{ font-family:var(--font-display); font-size:36px; font-weight:700; color:var(--ink-900); margin-bottom:18px; }
.mkt-price span{ font-size:14px; font-weight:400; color:var(--ink-500); }
.mkt-price-card ul{ list-style:none; display:flex; flex-direction:column; gap:10px; margin-bottom:24px; flex:1; }
.mkt-price-card li{ font-size:13.5px; color:var(--ink-700); padding-left:22px; position:relative; }
.mkt-price-card li::before{ content:'✓'; position:absolute; left:0; color:var(--sage-deep); font-weight:700; }
.mkt-price-trial-note{ font-size:11.5px; color:var(--ink-500); text-align:center; margin-top:10px; }
@media(max-width:900px){ .mkt-pricing-grid{ grid-template-columns:1fr; max-width:420px; margin-inline:auto; } }

/* ===== Reviews — auto-sliding 3-up strip ===== */
.rv-strip-viewport{ overflow:hidden; margin-top:44px; }
.rv-strip-track{ display:flex; gap:20px; }
.rv-strip-card{
  flex:0 0 auto; background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius);
  padding:22px 22px 20px; display:flex; flex-direction:column; gap:12px; text-align:left;
}

.rv-card-head{ display:flex; align-items:center; gap:12px; }
.rv-avatar{
  width:44px; height:44px; border-radius:50%; flex:0 0 44px;
  background:linear-gradient(145deg, var(--brass), var(--clay));
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:600; font-size:15px; color:#FFF;
}
.rv-name{ font-family:var(--font-display); font-size:14.5px; font-weight:600; color:var(--ink-900); }
.rv-stars{ display:flex; gap:2px; margin-top:3px; }
.rv-stars svg{ width:13px; height:13px; color:var(--line-strong); }
.rv-stars svg.is-filled{ color:var(--brass-deep); }
.rv-body{
  font-size:13.5px; color:var(--ink-700); line-height:1.6; margin:0;
  display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden;
}
.rv-see-more{
  font-family:var(--font-mono); font-size:12px; font-weight:700;
  color:var(--brass-deep); background:none; border:none; padding:0; cursor:pointer;
}
.rv-see-more:hover{ text-decoration:underline; }

.rv-dots{ display:flex; justify-content:center; gap:8px; margin-top:22px; }
.rv-dot{
  width:8px; height:8px; border-radius:50%; padding:0; border:none;
  background:var(--line-strong); cursor:pointer; transition:background .15s, transform .15s;
}
.rv-dot.is-active{ background:var(--brass-deep); transform:scale(1.25); }

.rv-modal-overlay{
  display:none; position:fixed; inset:0; z-index:200;
  background:rgba(43,44,38,0.6); backdrop-filter:blur(2px);
  align-items:center; justify-content:center; padding:20px;
}
.rv-modal-overlay.is-open{ display:flex; }
.rv-modal{
  background:var(--paper-raised); border-radius:14px; border:1px solid var(--line-strong);
  box-shadow:0 20px 60px rgba(43,44,38,0.35);
  max-width:520px; width:100%; padding:28px 26px; position:relative; max-height:80vh; overflow-y:auto;
}
.rv-modal-close{
  position:absolute; top:14px; right:14px; width:30px; height:30px; border-radius:50%;
  background:var(--paper-sunk); border:none; color:var(--ink-700); font-size:18px; line-height:1;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.rv-modal-close:hover{ background:var(--line); }
.rv-modal-body{ font-size:14px; color:var(--ink-700); line-height:1.7; margin:18px 0 0; white-space:pre-wrap; }

.mkt-faq-list{ margin-top:36px; text-align:left; display:flex; flex-direction:column; gap:10px; }
.mkt-faq-item{
  background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius);
  padding:4px 20px;
}
.mkt-faq-item summary{
  padding:16px 0; font-family:var(--font-display); font-size:15.5px; font-weight:600;
  color:var(--ink-900); cursor:pointer; list-style:none; position:relative;
}
.mkt-faq-item summary::-webkit-details-marker{ display:none; }
.mkt-faq-item summary::after{
  content:'+'; position:absolute; right:0; top:14px; font-size:20px; color:var(--brass-deep); font-weight:400;
}
.mkt-faq-item[open] summary::after{ content:'–'; }
.mkt-faq-item p{ font-size:13.5px; color:var(--ink-700); line-height:1.6; padding-bottom:18px; }

.mkt-cta{ background:var(--chrome); padding:70px 28px; text-align:center; }
.mkt-cta-inner{ max-width:560px; margin:0 auto; }
.mkt-cta h2{ font-family:var(--font-display); font-size:30px; font-weight:700; color:#FFFFFF; margin-bottom:10px; }
.mkt-cta p{ color:#E8E4D8; font-size:14.5px; margin-bottom:24px; }

.mkt-footer{ background:var(--paper-raised); border-top:1px solid var(--line); }
.mkt-footer-grid{
  max-width:1100px; margin:0 auto; padding:54px 28px 32px;
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:36px;
}
.mkt-footer-brand p{ font-size:13px; color:var(--ink-500); line-height:1.65; margin-top:14px; max-width:300px; }
.mkt-footer-social{ margin-top:16px; }
.mkt-footer-social-link{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:50%;
  background:var(--paper-sunk);
  transition:background-color .15s;
}
.mkt-footer-social-link:hover{ background:rgba(88,101,242,0.14); }
.mkt-footer-col h5{ font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-300); margin-bottom:14px; }
.mkt-footer-col a{ display:block; font-size:13.5px; color:var(--ink-700); padding:5px 0; transition:color .15s; }
.mkt-footer-col a:hover{ color:var(--brass-deep); }
.mkt-footer-bottom{
  max-width:1100px; margin:0 auto; padding:18px 28px 28px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  font-family:var(--font-ui); font-size:11.5px; color:var(--ink-900);
}
.mkt-footer-bottom a:hover{ color:var(--brass-deep); }
@media(max-width:760px){ .mkt-footer-grid{ grid-template-columns:1fr 1fr; } }

.mkt-footer-partner{
  max-width:1100px; margin:0 auto; padding:0 28px 22px;
  display:flex; align-items:center; gap:10px;
  font-family:var(--font-mono); font-size:12px; color:var(--ink-500);
}
.mkt-partner-placeholder{
  display:inline-flex; align-items:center; gap:8px;
  border:1px dashed var(--line-strong); border-radius:8px; padding:5px 12px;
  font-weight:600; color:var(--ink-700); text-decoration:none; transition:border-color .15s, color .15s;
}
.mkt-partner-placeholder:hover{ border-color:var(--brass); border-style:solid; color:var(--brass-deep); }
.mkt-logo-mark-sm{ width:20px; height:20px; flex:0 0 20px; font-size:10px; border-radius:6px; }

/* ============================== DATA SOURCES STRIP ============================== */
.mkt-sources{ background:var(--chrome); padding:42px 0; }
.mkt-sources-inner{ max-width:1100px; margin:0 auto; padding:0 28px; }
.mkt-sources-label{
  display:block; text-align:center; font-family:var(--font-mono); font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; color:#C2BDAC; margin-bottom:28px; font-weight:600;
}
.mkt-sources-viewport{ overflow:hidden; mask-image:linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.mkt-sources-track{ display:flex; gap:48px; width:max-content; align-items:center; animation:mkt-sources-scroll 38s linear infinite; }
.mkt-sources-track:hover{ animation-play-state:paused; }
@keyframes mkt-sources-scroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.mkt-source-logo{
  flex:0 0 auto; display:flex; align-items:center; gap:10px; white-space:nowrap;
  opacity:.55; filter:grayscale(1); transition:opacity .2s, filter .2s;
}
.mkt-source-logo:hover{ opacity:1; filter:grayscale(0); }
.mkt-source-mono{
  display:flex; align-items:center; justify-content:center;
  width:30px; height:30px; border-radius:50%; flex:0 0 30px;
  background:linear-gradient(145deg, var(--brass-bright), var(--clay));
  font-family:'Fraunces', serif; font-weight:700; font-size:10px; color:#FFFFFF; letter-spacing:-.02em;
}
.mkt-source-name{ font-family:var(--font-mono); font-size:13px; font-weight:600; color:#E4E2D3; }

/* ============================== AUTH (register/login) ============================== */
.auth-section{ padding:64px 28px 90px; min-height:60vh; display:flex; align-items:center; justify-content:center; }
.auth-card{
  max-width:460px; width:100%; background:var(--paper-raised); border:1px solid var(--line);
  border-radius:var(--radius); padding:40px 36px; box-shadow:var(--shadow-md);
}
/* Register-only -- login's 2-field form stays at the narrower default
   width above; register has 5 field-pairs (10 inputs) now that it asks
   for date of birth and trading style too, and looked like a needlessly
   narrow column with huge empty margins on a wide screen at that width. */
.auth-card-wide{ max-width:640px; }
.auth-title{
  font-family:var(--font-display); font-size:26px; font-weight:700; color:var(--ink-900);
  text-align:center; margin:8px 0 6px;
}
.auth-sub{ text-align:center; font-size:14px; color:var(--ink-500); margin-bottom:28px; line-height:1.5; }

.auth-form{ display:flex; flex-direction:column; gap:4px; }
.auth-label{ font-family:var(--font-mono); font-size:11.5px; font-weight:600; color:var(--ink-700); margin-top:14px; margin-bottom:6px; }
.auth-input{
  width:100%; padding:11px 14px; border-radius:8px; border:1px solid var(--line-strong);
  background:var(--paper); font-family:var(--font-ui); font-size:14px; color:var(--ink-900);
  transition:border-color .15s;
}
.auth-input:focus{ outline:none; border-color:var(--brass); }
.auth-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.auth-field{ display:flex; flex-direction:column; }

.auth-errors{
  background:var(--clay-wash); border:1px solid var(--clay); border-radius:8px;
  padding:14px 16px; margin-bottom:18px; font-size:13px; color:var(--clay-deep);
}
.auth-errors ul{ margin:8px 0 0; padding-left:18px; }
.auth-errors li{ margin-bottom:3px; }

.auth-status{
  background:var(--sage-wash); border:1px solid var(--sage); border-radius:8px;
  padding:12px 16px; margin-bottom:18px; font-size:13px; color:var(--sage-deep); font-weight:600;
}

.auth-foot{ text-align:center; font-size:13.5px; color:var(--ink-500); margin-top:22px; }
.auth-foot a{ color:var(--brass-deep); font-weight:600; }

/* Google requires this disclosure to be shown somewhere on the page
   whenever the reCAPTCHA badge itself is hidden (see .grecaptcha-badge
   below, hidden globally in the marketing layout). */
.grecaptcha-badge{ visibility:hidden !important; }
.recaptcha-notice{ text-align:center; font-size:11px; color:var(--ink-300); line-height:1.5; margin-top:14px; }
.recaptcha-notice a{ color:var(--ink-500); text-decoration:underline; }

@media(max-width:520px){
  .auth-card{ padding:30px 24px; }
  .auth-row{ grid-template-columns:1fr; }
}

/* ---- Password visibility toggle ---- */
.auth-pwd-wrap{ position:relative; display:flex; align-items:center; }
.auth-pwd-wrap .auth-input{ padding-right:42px; }
.auth-pwd-toggle{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  display:flex; align-items:center; justify-content:center;
  width:28px; height:28px; border:none; background:none; cursor:pointer;
  color:var(--ink-300); transition:color .15s; padding:0;
}
.auth-pwd-toggle:hover{ color:var(--ink-700); }

/* ---- Terms checkbox ---- */
.auth-checkbox-row{
  display:flex; align-items:flex-start; gap:10px; margin-top:18px;
  font-size:12.5px; color:var(--ink-700); line-height:1.5; cursor:pointer;
}
.auth-checkbox-row input[type="checkbox"]{
  width:17px; height:17px; flex:0 0 17px; margin-top:1px;
  accent-color:var(--brass); cursor:pointer;
}
.auth-checkbox-row a{ color:var(--brass-deep); font-weight:600; }

.auth-login-row{
  display:flex; align-items:center; justify-content:space-between;
  margin-top:16px; flex-wrap:wrap; gap:10px;
}
.auth-forgot-link{ font-size:12.5px; color:var(--brass-deep); font-weight:600; }

.auth-check-circle{
  width:64px; height:64px; border-radius:50%; margin:0 auto 18px;
  background:linear-gradient(135deg, var(--sage), var(--sage-deep));
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 0 8px var(--sage-wash);
}

.auth-card-wide{ max-width:1040px; }

@media(max-width:900px){
  .auth-card-wide{ max-width:480px; }
}

.sub-term-switch{
  display:inline-flex; gap:4px; background:var(--paper-sunk); border-radius:10px;
  padding:4px; margin:26px 0 22px;
}
.sub-term-btn{
  font-family:var(--font-mono); font-size:13px; font-weight:600; color:var(--ink-700);
  padding:9px 18px; border-radius:7px; border:none; background:transparent; cursor:pointer;
  transition:background .15s, color .15s;
}
.sub-term-btn.is-active{ background:var(--paper-raised); color:var(--ink-900); box-shadow:var(--shadow-sm); }
.sub-term-btn:hover:not(.is-active){ color:var(--ink-900); }

.sub-price-card{
  background:var(--paper-raised); border:1px solid var(--brass); border-radius:var(--radius);
  box-shadow:0 0 0 3px var(--brass-wash); padding:30px 28px; text-align:left; position:relative;
}
.sub-price-save{
  position:absolute; top:-12px; right:24px; background:var(--sage); color:#FFF;
  font-family:var(--font-mono); font-size:10.5px; font-weight:700; letter-spacing:.03em;
  padding:4px 11px; border-radius:20px;
}
.sub-price-amount{ display:flex; align-items:baseline; gap:2px; justify-content:center; }
.sub-price-currency{ font-family:var(--font-display); font-size:22px; font-weight:700; color:var(--ink-900); }
.sub-price-num{ font-family:var(--font-display); font-size:46px; font-weight:700; color:var(--ink-900); line-height:1; }
.sub-price-per{ font-family:var(--font-mono); font-size:14px; color:var(--ink-500); }
.sub-price-billed{
  text-align:center; font-family:var(--font-mono); font-size:12px; color:var(--ink-500);
  margin-top:4px; margin-bottom:22px;
}
.sub-price-features{ list-style:none; display:flex; flex-direction:column; gap:9px; margin-bottom:22px; padding:0; }
.sub-price-features li{ font-size:13.5px; color:var(--ink-700); padding-left:22px; position:relative; }
.sub-price-features li::before{ content:'✓'; position:absolute; left:0; color:var(--sage-deep); font-weight:700; }

.gate-header{ border-bottom:1px solid var(--line); background:var(--paper-raised); }
.gate-header-row{
  max-width:1240px; margin:0 auto; padding:16px 28px;
  display:flex; align-items:center; justify-content:space-between;
}


/* ============================== TECHNICAL vs FUNDAMENTALS COMPARISON ============================== */
.mkt-compare-grid{
  display:grid; grid-template-columns:1fr auto 1fr; gap:24px; align-items:stretch;
  margin-top:48px; text-align:left;
}
.mkt-compare-card{
  background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius);
  padding:28px 26px;
}
.mkt-compare-card-highlight{
  border-color:var(--brass); box-shadow:0 0 0 3px var(--brass-wash), var(--shadow-md);
  background:linear-gradient(180deg, var(--paper-raised), var(--brass-wash) 600%);
}
.mkt-compare-label{
  font-family:var(--font-mono); font-size:12px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  color:var(--brass-deep); margin-bottom:18px; display:block;
}
.mkt-compare-label-muted{ color:var(--ink-300); }

.mkt-compare-list{ list-style:none; display:flex; flex-direction:column; gap:14px; }
.mkt-compare-list li{ font-size:14px; line-height:1.5; padding-left:26px; position:relative; }
.mkt-compare-list li.is-muted{ color:var(--ink-500); }
.mkt-compare-list li.is-muted::before{
  content:'×'; position:absolute; left:0; top:-1px; color:var(--clay); font-weight:700; font-size:16px;
}
.mkt-compare-list li.is-good{ color:var(--ink-900); font-weight:500; }
.mkt-compare-list li.is-good::before{
  content:'✓'; position:absolute; left:0; top:0; color:var(--sage-deep); font-weight:700;
}

.mkt-compare-arrow{
  display:flex; align-items:center; justify-content:center; color:var(--brass);
  align-self:center;
}

.mkt-compare-foot{
  text-align:center; font-size:14.5px; color:var(--ink-700); max-width:640px;
  margin:36px auto 0; line-height:1.6; font-style:italic;
}

@media(max-width:860px){
  .mkt-compare-grid{ grid-template-columns:1fr; gap:16px; }
  .mkt-compare-arrow{ transform:rotate(90deg); margin:0 auto; }
}

/* ============================== HIDDEN RISKS — X-RAY DEVICE ============================== */
.mkt-xray{ position:relative; max-width:1000px; margin:48px auto 8px; height:460px; }
.mkt-xray-lines{ position:absolute; inset:0; width:100%; height:100%; }
.mkt-xray-lines path{ fill:none; stroke-width:1.5; stroke:var(--clay-wash); stroke-dasharray:5 4; }
.xray-dot{ fill:var(--clay); }

.mkt-xray-core{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:140px; height:140px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, var(--ink-700), var(--ink-900) 70%);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 0 8px var(--clay-wash), 0 12px 30px rgba(0,0,0,.18);
  z-index:1;
}
.mkt-xray-core-ring{
  position:absolute; inset:-14px; border-radius:50%; border:2px dashed var(--clay);
  animation:mkt-spin 5s linear infinite; opacity:.55;
}
.mkt-xray-core-label{ display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center; }
.mkt-xray-core-title{ font-family:var(--font-display); font-weight:700; font-size:14px; color:#FFFFFF; line-height:1.2; }
.mkt-xray-core-tag{ font-family:var(--font-mono); font-size:9.5px; color:var(--clay-wash); letter-spacing:.04em; }

.mkt-xray-node{
  position:absolute; left:0; transform:translateY(-50%); width:300px;
  background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px 18px; box-shadow:var(--shadow-sm); text-align:left;
}
.mkt-xray-node-head{ display:flex; align-items:center; gap:9px; margin-bottom:7px; }
.mkt-xray-node-icon{
  width:26px; height:26px; flex:0 0 26px; border-radius:7px; background:var(--clay-wash); color:var(--clay-deep);
  display:flex; align-items:center; justify-content:center;
}
.mkt-xray-node-title{ font-family:var(--font-display); font-weight:600; font-size:14px; color:var(--ink-900); }
.mkt-xray-node p{ font-size:12.5px; color:var(--ink-700); line-height:1.5; margin-bottom:8px; }
.mkt-xray-node a{ font-family:var(--font-mono); font-size:11.5px; font-weight:700; color:var(--brass-deep); }
.mkt-xray-node a:hover{ text-decoration:underline; }

.mkt-xray-foot{ font-size:13.5px; color:var(--ink-500); max-width:560px; margin:18px auto 0; line-height:1.6; text-align:center; }
.mkt-xray-node-right{ left:auto; right:0; }
@media(max-width:860px){
  .mkt-xray{ height:auto; display:flex; flex-direction:column; gap:10px; }
  .mkt-xray-lines{ display:none; }
  .mkt-xray-node{ position:static; transform:none; width:auto; }
  .mkt-xray-core{ position:static; transform:none; margin:18px auto; }
  .mkt-xray-core-ring{ display:none; }
}
@media(max-width:860px){
  .mkt-xray{ height:auto; display:flex; flex-direction:column; gap:10px; }
  .mkt-xray-lines{ display:none; }
  .mkt-xray-node{ position:static; transform:none; width:auto; }
  .mkt-xray-node-right{ left:auto; right:auto; }
  .mkt-xray-core{ position:static; transform:none; margin:18px auto; }
  .mkt-xray-core-ring{ display:none; }
}

.mkt-price-was{
  font-family:var(--font-mono); font-size:16px; color:var(--ink-300);
  text-decoration:line-through; margin-bottom:2px;
}
.mkt-price-campaign-tag{
  display:inline-block; font-family:var(--font-mono); font-size:10.5px; font-weight:700;
  letter-spacing:.03em; text-transform:uppercase; color:#FFFFFF; background:var(--clay);
  padding:4px 10px; border-radius:20px; margin-bottom:18px; margin-top:-6px;
}
.mkt-price-savings-note{
  font-family:var(--font-mono); font-size:12px; font-weight:600;
  color:var(--sage-deep); margin-bottom:18px; margin-top:-8px;
}

.mkt-campaign-banner{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:12px;
  padding:14px 24px; border-radius:12px; margin-bottom:32px; text-align:center;
}
.mkt-campaign-badge{
  font-family:var(--font-mono); font-size:11px; font-weight:800; letter-spacing:.05em;
  text-transform:uppercase; padding:5px 14px; border-radius:20px;
}
.mkt-campaign-tagline{ font-size:14px; font-weight:500; }
.mkt-campaign-countdown{ font-family:var(--font-mono); font-weight:700; font-size:16px; letter-spacing:.04em; }