/* ============================================================
   HOMEPAGE-ONLY STYLES
   Loaded on the front page and the Legacy Tool Landing template
   only (see rf_assets() in functions.php) — everything shared
   across all pages (header, footer, tool widget) stays in the
   theme's main style.css.

   Homepage layout follows the "editorial" design direction: an
   asymmetric hero with a capability ticker, a before/after story
   block, a terminal-style tool list, the existing features/steps
   sections, a stats band, and a final CTA.
   ============================================================ */

/* ============================================================
   SECTION HEADS (features / steps section intros)
   ============================================================ */
.section-head{ max-width: 620px; margin: 0 auto 48px; text-align:center; }
.section-head h2{ font-size: clamp(1.6rem,3.2vw,2.2rem); font-weight:600; }
.section-head p{ color: var(--ink-soft); margin-top:12px; font-size:1.02rem; }

/* ============================================================
   HOME HERO — asymmetric grid, strikethrough headline, ticker
   ============================================================ */
.home-hero{ padding: 56px 0 0; }
.home-hero-grid{
  display:grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 56px;
  align-items:end;
}
.home-hero-eyebrow{
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 20px;
  display:flex;
  align-items:center;
  gap:8px;
}
.home-hero-eyebrow::before{ content:""; width:20px; height:2px; background: var(--accent); }
.home-hero h1{
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  line-height: 0.98;
  font-weight:700;
}
.home-hero-strike{
  position:relative;
  color: var(--ink-soft);
  opacity:.5;
  display:inline-block;
}
.home-hero-strike::after{
  content:"";
  position:absolute; left:0; right:0; top:50%;
  height:3px; background: var(--flag);
  transform: rotate(-2deg);
}
.home-hero-accent{ color: var(--accent); }
.home-hero-side{
  font-size: 1.06rem;
  color: var(--ink-soft);
  padding-bottom: 10px;
}
.home-hero-actions{ margin-top:30px; display:flex; gap:16px; flex-wrap:wrap; align-items:center; }
.btn-primary{
  background: var(--ink);
  color:#fff;
  padding: 15px 28px;
  border-radius: var(--radius-sm);
  font-weight:600;
  font-size:0.98rem;
  display:inline-flex; align-items:center; gap:10px;
  transition: background .12s ease, transform .12s ease;
}
.btn-primary:hover{ background: var(--accent); transform: translateY(-1px); }
.btn-text{
  font-weight:600;
  font-size: 0.92rem;
  color: var(--ink);
  display:inline-flex; align-items:center; gap:6px;
}
.btn-text i{ color: var(--accent); }

.home-ticker{
  margin-top: 48px;
  border-top: var(--border);
  border-bottom: var(--border);
  padding: 15px 0;
  overflow:hidden;
  white-space:nowrap;
}
.home-ticker-track{
  display:inline-block;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--ink-soft);
  animation: home-ticker-scroll 26s linear infinite;
}
.home-ticker-track span{ margin-right: 44px; }
.home-ticker-track .sep{ color: var(--flag); }
@keyframes home-ticker-scroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce){
  .home-ticker-track{ animation: none; }
}

@media (max-width: 900px){
  .home-hero-grid{ grid-template-columns: 1fr; gap:28px; }
}

/* ============================================================
   STORY — the "problem" narrative + before/after diff visual
   ============================================================ */
.home-story{ padding: 76px 0; border-top: var(--border); }
.home-story-grid{ display:grid; grid-template-columns: 0.9fr 1.1fr; gap:56px; align-items:start; }
.home-story-label{
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--flag);
  margin-bottom: 16px;
}
.home-story h2{ font-size: clamp(1.8rem,3.2vw,2.5rem); margin-bottom:18px; font-weight:600; }
.home-story p{ color: var(--ink-soft); font-size:1.02rem; margin-bottom:16px; max-width:52ch; }
.home-story-visual{
  background: var(--surface);
  border: var(--border);
  border-radius: 16px;
  padding: 28px;
  font-family: var(--font-mono);
  font-size: 0.86rem;
}
.home-diff-label{
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
  margin-bottom: 8px;
  display:block;
}
.home-diff-before{
  color: var(--ink-soft);
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--line);
  margin-bottom: 14px;
}
.home-diff-before del{
  background: var(--flag-soft);
  color: var(--flag);
  text-decoration: line-through;
  padding: 0 2px;
  border-radius: 3px;
}
.home-diff-after{ color: var(--ink); }
.home-diff-after mark{
  background:transparent;
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

@media (max-width: 900px){
  .home-story-grid{ grid-template-columns: 1fr; }
}

/* ============================================================
   TOOLS — terminal-style row list ("Pick a tool to run")
   ============================================================ */
.home-tools{ padding: 76px 0; border-top: var(--border); }
.home-section-label{
  font-family: var(--font-mono);
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--accent);
  margin-bottom: 8px;
  display:flex; align-items:center; gap:8px;
}
.home-section-label::before{ content:"//"; color: var(--ink-soft); }
.home-tools-heading{ font-size: clamp(1.7rem,3vw,2.3rem); font-weight:600; margin-bottom:32px; }

.tool-menu{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 14px;
}
.tool-row{
  display:flex;
  align-items:center;
  gap:16px;
  padding: 20px 22px;
  background: var(--surface);
  border: var(--border);
  border-radius: 12px;
  transition: border-color .12s ease, transform .12s ease, box-shadow .12s ease;
}
a.tool-row:hover{
  border-color: var(--accent);
  transform: translateX(3px);
  box-shadow: 0 10px 24px -14px rgba(1,31,69,.2);
}
.tool-row-idx{
  font-family: var(--font-mono);
  color: var(--ink-soft);
  font-size:0.8rem;
  width:22px;
  flex-shrink:0;
}
.tool-row-icon{
  width:40px; height:40px;
  border-radius: 9px;
  display:flex; align-items:center; justify-content:center;
  background: var(--flag-soft);
  color: var(--flag);
  font-size: 1.05rem;
  flex-shrink:0;
}
.tool-row-tint-2 .tool-row-icon{ background: rgba(43,47,243,.1); color: var(--accent); }
.tool-row-tint-3 .tool-row-icon{ background:#E4F7E5; color: var(--mint); }
.tool-row-tint-4 .tool-row-icon{ background:#FFF4DA; color: var(--brand-gold); }
.tool-row-body{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:4px; }
.tool-row-title{ font-size:0.98rem; font-weight:600; color: var(--ink); }
.tool-row-desc{ font-size:0.82rem; color: var(--ink-soft); }
.tool-row-arrow{ color: var(--ink-soft); flex-shrink:0; }
a.tool-row:hover .tool-row-arrow{ color: var(--accent); }
/* Dummy/no-link cards render as a plain div — same look, no hover affordance. */
div.tool-row{ cursor:default; }

/* ============================================================
   FEATURES
   ============================================================ */
.features{ padding: 76px 0; border-top: var(--border); }

.feature-grid{
  border: var(--border);
  border-radius: 16px;
  overflow:hidden;
  box-shadow: 0 1px 2px rgba(1,31,69,.04);
}
.feature-card{
  background: var(--surface);
  padding: 32px 28px;
  border-top: var(--border);
}
.feature-card:first-child{ border-top:none; }
.feature-icon{
  width:42px; height:42px;
  border-radius: 10px;
  display:flex; align-items:center; justify-content:center;
  margin-bottom: 18px;
  background: var(--flag-soft);
  color: var(--flag);
  font-size: 1.1rem;
}
.feature-card:nth-child(2) .feature-icon{ background:#EFE5FD; color: var(--brand-purple); }
.feature-card:nth-child(3) .feature-icon{ background:#E4F7E5; color: var(--mint); }
.feature-card:nth-child(4) .feature-icon{ background:#FFF4DA; color: var(--brand-gold); }
.feature-card h3{ font-size: 1.08rem; font-weight:600; margin-bottom:10px; }
.feature-card p{ color: var(--ink-soft); font-size: 0.92rem; line-height:1.6; }

@media (min-width: 768px){
  .feature-card{
    border-top:none;
    border-left: var(--border);
  }
  .feature-card:first-child{ border-left:none; }
}

/* ============================================================
   HOW IT WORKS — a single fused grid, deliberately built the
   same way as .feature-grid just above it (one shared border,
   one shadow, dividers between cells instead of each card
   floating on its own) so the two sections read as one design
   system rather than two different card styles stacked on top
   of each other. Each step is told apart by a large colored
   digit set inline with its title, not a separate badge/slab.
   ============================================================ */
.steps{ padding: 76px 0; border-top: var(--border); }
.steps-eyebrow{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent);
  margin-bottom: 14px;
}
.steps-eyebrow::before{ content:""; width:20px; height:2px; background: var(--accent); }

.step-list{
  border: var(--border);
  border-radius: 16px;
  overflow:hidden;
  box-shadow: 0 1px 2px rgba(1,31,69,.04);
}
.step-card{
  background: var(--surface);
  padding: 32px 28px;
  border-top: var(--border);
}
.step:first-child .step-card{ border-top:none; }

.step-num-row{ display:flex; align-items:center; gap:14px; margin-bottom: 18px; }
.step-index{
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight:700;
  line-height:1;
  color: var(--flag);
}
.step-tint-2 .step-index{ color: var(--accent); }
.step-tint-3 .step-index{ color: var(--brand-purple); }
.step-tint-4 .step-index{ color: var(--mint); }
.step-icon-badge{
  width:38px; height:38px;
  border-radius: 10px;
  display:flex; align-items:center; justify-content:center;
  background: var(--flag-soft);
  color: var(--flag);
  font-size: 1rem;
  flex-shrink:0;
}
.step-tint-2 .step-icon-badge{ background: rgba(43,47,243,.1); color: var(--accent); }
.step-tint-3 .step-icon-badge{ background:#EFE5FD; color: var(--brand-purple); }
.step-tint-4 .step-icon-badge{ background:#E4F7E5; color: var(--mint); }

.step h3{ font-size: 1.08rem; font-weight:600; margin-bottom:10px; }
.step p{ color: var(--ink-soft); font-size: 0.92rem; line-height:1.6; margin:0; }

@media (min-width: 768px){
  .step-card{
    border-top:none;
    border-left: var(--border);
    height:100%;
  }
  .step:first-child .step-card{ border-left:none; }
}

/* ============================================================
   CTA BAND (Watermark Remover page) — intentionally matches
   .home-final-cta's look (same light --bg, ink text, solid ink
   button) so the homepage and this tool page's closing CTA read
   as the same design system rather than two unrelated styles.
   This page's .btn had no rules at all before — it rendered as
   plain unstyled text.
   ============================================================ */
.cta-band{
  background: var(--ink);
  color:#fff;
  padding: 88px 0;
  text-align:center;
}
.cta-band h2{ font-size: clamp(2rem,4vw,2.8rem); font-weight:700; margin-bottom:16px; }
.cta-band p{ color:#B9B9C2; font-size:1.05rem; margin:0 auto; max-width: 46ch; }
.cta-band .btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-top: 30px;
  background: var(--accent);
  color:#fff;
  padding: 15px 30px;
  border-radius: var(--radius-sm);
  font-weight:600;
  font-size:0.98rem;
  transition: background .12s ease, transform .12s ease;
}
.cta-band .btn:hover{ background: var(--brand-purple); transform: translateY(-1px); }

@media (max-width: 575.98px){
  .cta-band{ padding: 64px 0; }
  .cta-band .btn{ width:100%; justify-content:center; }
}

/* ============================================================
   STATS BAND
   ============================================================ */
.home-stats-band{ background: var(--ink); color:#fff; padding: 56px 0; }
.home-stats-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:20px;
  text-align:center;
}
.home-stats-grid strong{
  display:block;
  font-family: var(--font-display);
  font-size: 2.2rem;
  margin-bottom:6px;
}
.home-stats-grid span{ font-size:0.85rem; color:#B9B9C2; }

@media (max-width: 700px){
  .home-stats-grid{ grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   FINAL CTA
   ============================================================ */
.home-final-cta{
  background: var(--bg);
  color: var(--ink);
  padding: 88px 0;
  text-align:center;
}
.home-final-cta h2{ font-size: clamp(2rem,4vw,2.8rem); font-weight:700; margin-bottom:16px; }
.home-final-cta p{ color: var(--ink-soft); font-size:1.05rem; margin-bottom:0; }
.home-final-cta .btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-top: 30px;
  background: var(--ink);
  color:#fff;
  padding: 15px 30px;
  border-radius: var(--radius-sm);
  font-weight:600;
  font-size:0.98rem;
  transition: background .12s ease, transform .12s ease;
}
.home-final-cta .btn:hover{ background: var(--accent); transform: translateY(-1px); }