/* Homepage v32 additions (Steve's edits, 2026-10-01): big gold step words with
   the five-step staircase, the Trust flagstone path, the simpler Define offer,
   the Review Desk name and the Geo Grid button. Loads after home-motion.css. */

/* Big step word: same size as the section heading, bold corporate gold. Gold
   reads paler on white than on navy, so light sections get a slightly deeper
   gold that looks the same to the eye. */
.stepmark{display:flex;align-items:flex-end;gap:22px;margin:0 0 18px}
.stepword{font-family:var(--font-display);font-weight:800;font-size:clamp(35.2px,4.2vw,55px);line-height:1;letter-spacing:-.02em;color:var(--action)}
section:not(.dark):not(.lp) .stepword{color:var(--action-on-light)}
section:not(.dark):not(.lp) .stairs .st.on{fill:var(--action-on-light);stroke:var(--action-on-light)}
.stairs{width:128px;height:auto;flex:none;margin-bottom:4px;overflow:visible}
.stairs .st{fill:none;stroke:#B9C0D4;stroke-width:2}
.dark .stairs .st,.lp .stairs .st{stroke:rgba(255,255,255,.5)}
.stairs .st.on{fill:var(--action);stroke:var(--action)}
.stairs .flag path{stroke:var(--ink);stroke-width:2;stroke-linecap:round;fill:none}
.dark .stairs .flag path,.lp .stairs .flag path{stroke:#fff}
.stairs .flag .pennant{fill:var(--accent,#6D3FF5);stroke:none}
/* The little TRUST signpost in front of each flagstone path. */
.flagstones .sign .post{stroke:var(--ink);stroke-width:3;stroke-linecap:round}
.flagstones .sign .board{fill:#FFF6E5;stroke:var(--ink);stroke-width:2;stroke-linejoin:round}
.dark .flagstones .sign .post,.dark .flagstones .sign .board{stroke:#fff}
.flagstones .sign text{font-family:var(--font-display);font-weight:800;font-size:12px;letter-spacing:.06em;fill:var(--ink)}
.stairs .flag{animation:flagwave 2.6s ease-in-out infinite;transform-box:fill-box;transform-origin:bottom left}
@keyframes flagwave{0%,100%{rotate:0deg}50%{rotate:-4deg}}

/* Trust pieces: a quieter flagstone path beside the small label. */
.ttagrow{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.ttagrow .ttag{margin-bottom:0}
.flagstones{width:236px;height:auto;flex:none}
.flagstones .lawn{fill:none;stroke:#8BC79F;stroke-width:2;stroke-linecap:round;opacity:.7}
.flagstones .stone{fill:none;stroke:var(--rule);stroke-width:1.6;stroke-dasharray:3 3}
.dark .flagstones .stone{stroke:rgba(255,255,255,.25)}
.flagstones .stone.on{fill:#C9C2B3;stroke:#A39B8B;stroke-dasharray:none}
.dark .flagstones .stone.on{fill:#8E8778;stroke:#B7AF9E}
/* The stone you're on is always gold, on light and dark sections alike. */
.flagstones .stone.here,.dark .flagstones .stone.here{fill:var(--action);stroke:var(--action-deep)}
section:not(.dark) .flagstones .stone.here{fill:var(--action-on-light)}

/* Review Desk, named. */
.product{margin:18px 0 0;font-family:var(--font-display);font-weight:800;font-size:28px;letter-spacing:-.01em;color:var(--ink)}
.product span{font-family:var(--font-mono);font-size:13px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--action-deep);margin-right:10px;vertical-align:middle}

/* Look: the $39 Geo Grid line in gold, with a gold button under it. */
.lp-offer p.lp-paid{color:var(--action)}
.lp-paid-btn{margin-top:14px}

/* Define: caption above the report art, three simple steps, done-for-you link. */
.lp-offer p.art-cap,.art-cap{font-family:var(--font-mono);font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--action);margin:22px 0 8px}
.buybox .bb-steps{list-style:none;margin:0;padding:0;display:grid;gap:12px;font-size:19px;color:#fff}
.buybox .bb-steps li{display:flex;align-items:center;gap:14px}
.buybox .bb-steps b{flex:none;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--action);color:#180F00;font-family:var(--font-display);font-size:16px}
.dfy-link{margin-top:28px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 28px;padding:24px 28px;border:1px dashed var(--rule);border-radius:var(--radius-lg)}
.dfy-link p{margin:0;max-width:60ch;font-size:18px}

@media (max-width:640px){
  .stepmark{gap:14px}
  .stairs{width:96px}
  .product{font-size:24px}
}
@media (prefers-reduced-motion:reduce){.stairs .flag{animation:none}}

/* Citations: a little more room above the stamping vignette (its caption now
   sits above the stamp's highest point, in vig-stamp.php). */
#citations .vig{margin-top:12px}

/* Gold buttons on light sections get the same slightly deeper gold as the step
   words, so they read the same as on navy. Panels that are navy themselves
   (the free-grid and $25 report panels) keep the brand gold. */
section:not(.dark):not(.lp):not(.offer):not(.close) .btn:not(.btn-dark):not(.btn-ghost):not(.allposts){background:var(--action-on-light);border-color:var(--action-on-light)}
section:not(.dark):not(.lp):not(.offer):not(.close) .lp-offer .btn:not(.btn-dark):not(.btn-ghost){background:var(--action);border-color:var(--action)}
section:not(.dark):not(.lp):not(.offer):not(.close) .btn:not(.btn-dark):not(.btn-ghost):not(.allposts):hover{background:var(--action);border-color:var(--action)}