/* ==========================================================================
   Simple Money Tools — shared stylesheet
   Design language adapted from james-bowen.co.uk: dark theme, card layouts,
   restrained motion. Given its own identity via a green/blue brand accent
   (taken from the Simple Money Tools logo) and a Sora/Inter type pairing.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Sora:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap");

:root {
  /* Brand accent — a single deliberate teal, used sparingly (buttons, small
     labels, checkmarks, highlights) rather than smeared across every
     heading and border. Blue is a distinct secondary, not a teal variant */
  --accent: #4dd4bf;
  --accent-hover: #63e6d2;
  --accent-2: #60a5fa;
  --accent-contrast: #052e28;
  --gradient: linear-gradient(135deg, var(--accent-2), var(--accent));

  /* Surfaces — deep navy rather than slate, with a deliberate step between
     page background, alternate sections and card background */
  --bg: #07111f;
  --bg-alt: #10213a;
  --card-bg: #101d31;
  --card-bg-raised: #16243a;
  --card-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01)),
    var(--card-bg);
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.15);

  /* Text */
  --text: #f8fafc;
  --text-muted: #b7c5d8;
  --text-faint: #8495a8;

  /* Status */
  --free: #4dd4bf;
  --paid: #60a5fa;
  --soon: #94a3b8;
  --warn: #e6bd5e;

  /* Card shadows: soft, deep and diffuse rather than a hard drop shadow */
  --shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.35);
  --radius-sm: 12px;
  --radius: 20px;
  --radius-lg: 28px;
  --max-width: 1160px;

  --font-heading: "Sora", "Segoe UI", sans-serif;
  --font-body: "Inter", "Segoe UI", sans-serif;

  color-scheme: dark;
}

/* Slightly larger base type scale — everything sized in rem grows with it,
   which also buys extra breathing room in paddings/gaps for free */
html {
  font-size: 17px;
}

/* ---- Reset ------------------------------------------------------------ */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0;
}

p {
  margin: 0;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

button {
  font-family: inherit;
}

svg {
  display: block;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---- Layout helpers ----------------------------------------------------- */

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

main section {
  padding: 8.5rem 0;
  position: relative;
  /* An extremely faint teal wash at the top of every section — depth
     without a visible line between sections */
  background-image: linear-gradient(180deg, rgba(77, 212, 191, 0.03), transparent 40%);
  background-repeat: no-repeat;
}

main section.tight {
  padding: 6rem 0;
}

/* Sections are separated by generous whitespace and, where a section is
   marked .section-alt, a subtly shifted background — not hairline rules */
main section.section-alt {
  background-color: var(--bg-alt);
}

.section-head {
  max-width: 580px;
  margin: 0 0 4.5rem;
}

.section-head.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--accent);
  margin: 0 0 0.75rem;
}

.section-title {
  font-size: clamp(1.85rem, 3.4vw, 2.6rem);
  letter-spacing: -0.02em;
  margin: 0 0 1rem;
}

.section-lead {
  color: var(--text-muted);
  font-size: 1.05rem;
  line-height: 1.7;
  max-width: 34rem;
  margin-left: auto;
  margin-right: auto;
}

.text-muted {
  color: var(--text-muted);
}

.center {
  text-align: center;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -3rem;
  left: 1rem;
  background: var(--accent);
  color: var(--accent-contrast);
  padding: 0.6rem 1rem;
  border-radius: var(--radius-sm);
  font-weight: 700;
  z-index: 1000;
  transition: top 0.15s ease;
}

.skip-link:focus {
  top: 1rem;
}

/* ---- Buttons ------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.6rem;
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, background-color 0.15s ease,
    border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.btn:hover {
  transform: translateY(-2px);
}

.btn-sm {
  padding: 0.55rem 1.05rem;
  font-size: 0.85rem;
}

.btn-primary {
  background-color: var(--accent);
  color: var(--accent-contrast);
  box-shadow: 0 8px 24px rgba(77, 212, 191, 0.22);
}

.btn-primary:hover {
  background-color: var(--accent-hover);
  box-shadow: 0 14px 32px rgba(77, 212, 191, 0.32);
}

.btn-ghost {
  background-color: transparent;
  border-color: var(--border-strong);
  color: var(--text);
}

.btn-ghost:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.btn-block {
  width: 100%;
}

.btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

/* ---- Badges -------------------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.3rem 0.65rem;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  white-space: nowrap;
}

.badge-free {
  color: var(--free);
  border-color: rgba(77, 212, 191, 0.4);
  background-color: rgba(77, 212, 191, 0.1);
}

.badge-paid {
  color: var(--paid);
  border-color: rgba(96, 165, 250, 0.4);
  background-color: rgba(96, 165, 250, 0.1);
}

.badge-soon {
  color: var(--soon);
  border-color: var(--border-strong);
  background-color: var(--bg-alt);
}

.badge-planned {
  color: var(--warn);
  border-color: rgba(224, 179, 77, 0.4);
  background-color: rgba(224, 179, 77, 0.1);
}

/* ---- Nav ------------------------------------------------------------------ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: rgba(7, 17, 31, 0.66);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}

.nav-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0.85rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--text);
}

.brand-mark {
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 0.15rem;
}

.nav-links a:not(.btn) {
  text-decoration: none;
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 500;
  padding: 0.5rem 0.65rem;
  border-radius: var(--radius-sm);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.nav-links a:not(.btn):hover,
.nav-links a[aria-current="page"] {
  background-color: var(--bg-alt);
  color: var(--text);
}

.nav-social {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  padding-inline: 0.35rem;
  margin-inline: 0.15rem;
  border-inline: 1px solid var(--border);
}

.nav-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 999px;
  color: var(--text-muted);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.nav-social a:hover {
  background-color: var(--bg-alt);
  color: var(--accent);
}

.nav-social svg {
  width: 1.05rem;
  height: 1.05rem;
}

.nav-cta {
  margin-left: 0.4rem;
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: var(--radius-sm);
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text);
  cursor: pointer;
}

.nav-toggle svg {
  width: 1.3rem;
  height: 1.3rem;
}

.icon-close {
  display: none;
}

.nav-toggle[aria-expanded="true"] .icon-menu {
  display: none;
}

.nav-toggle[aria-expanded="true"] .icon-close {
  display: block;
}

@media (max-width: 880px) {
  .nav-toggle {
    display: flex;
  }

  .nav-links {
    position: fixed;
    inset: 4.1rem 0 0 0;
    background-color: var(--bg);
    flex-direction: column;
    align-items: stretch;
    padding: 1rem 1.25rem 2rem;
    gap: 0.25rem;
    overflow-y: auto;
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
  }

  .nav-links.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  .nav-links a:not(.btn) {
    padding: 0.85rem 1rem;
    font-size: 1rem;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
  }

  .nav-social {
    border-inline: none;
    padding-block: 0.75rem;
    margin-inline: 0;
    justify-content: flex-start;
    gap: 0.75rem;
    border-bottom: 1px solid var(--border);
  }

  .nav-social a {
    width: 2.6rem;
    height: 2.6rem;
  }

  .nav-cta {
    margin: 0.85rem 0 0;
  }
}

/* ---- Hero — centered headline over a large full-width product showcase,
   in the vein of Linear/Raycast/Arc/Vercel marketing pages ---------------- */

.hero {
  max-width: 1640px;
  padding: 8.5rem 0 3rem;
  position: relative;
  /* The showcase now fills almost the full width at common desktop sizes,
     leaving little margin for the edge-hanging callout chips and glows to
     bleed into — clip it here rather than on html/body, since that would
     break position:sticky on the (unrelated, sibling) site header */
  overflow-x: hidden;
}

/* Soft ambient glow behind the hero — ombré atmosphere rather than a flat
   background */
.hero::before {
  content: "";
  position: absolute;
  inset: -15% 5% auto 5%;
  height: 75%;
  background: radial-gradient(ellipse at 35% 20%, rgba(77, 212, 191, 0.16), transparent 62%),
    radial-gradient(ellipse at 70% 40%, rgba(96, 165, 250, 0.13), transparent 58%);
  filter: blur(50px);
  z-index: -1;
  pointer-events: none;
}

.hero-copy {
  max-width: 40rem;
  margin: 0 auto;
  text-align: center;
  position: relative;
}

/* A tighter, brighter glow focused directly behind the headline itself */
.hero-copy::before {
  content: "";
  position: absolute;
  top: -3rem;
  left: 50%;
  transform: translateX(-50%);
  width: 44rem;
  height: 26rem;
  background: radial-gradient(circle, rgba(77, 212, 191, 0.12), transparent 70%);
  z-index: -1;
  pointer-events: none;
}

.hero h1 {
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  font-size: clamp(2.4rem, 5.2vw, 3.75rem);
  letter-spacing: -0.025em;
  margin-bottom: 1.4rem;
}

.hero-lead {
  color: var(--text-muted);
  font-size: 1.15rem;
  line-height: 1.7;
  max-width: 550px;
  margin: 0 auto 2.25rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 1.75rem;
}

.hero-actions .btn {
  padding: 1rem 1.9rem;
  font-size: 1rem;
}

.hero-actions .btn-primary {
  box-shadow: 0 14px 38px rgba(77, 212, 191, 0.28);
}

.trust-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  color: var(--text-faint);
  font-size: 0.9rem;
  font-weight: 600;
}

.trust-line svg {
  width: 1rem;
  height: 1rem;
  color: var(--accent);
  flex-shrink: 0;
}

/* Full-width product showcase beneath the headline — the largest, most
   prominent screenshot on the page, set on its own slightly-lighter
   "stage" so it reads as a distinct block from the hero copy above it */
.hero-showcase {
  position: relative;
  max-width: 104rem;
  margin: 5rem auto 0;
  padding: 3.5rem 3.5rem 3rem;
  background-color: var(--bg-alt);
  border-radius: var(--radius-lg);
}

@media (max-width: 900px) {
  .hero-showcase {
    padding: 1.5rem;
  }
}

.hero-showcase .browser-frame {
  position: relative;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(77, 212, 191, 0.16);
}

.hero-showcase-caption {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 1.75rem;
  font-size: 0.95rem;
  color: var(--text);
  font-weight: 600;
}

.hero-showcase-caption .text-faint {
  color: var(--text-faint);
  font-weight: 400;
}

/* The Pro pill used to float above the frame (top: -1.15rem). The sticky
   site header sat on top of it on scroll, clipping the price — so it now
   rides inside the frame bar, where nothing can cover it. */
.hero-pro-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text);
  white-space: nowrap;
}

@media (max-width: 620px) {
  /* The frame bar is tight at phone width; the price badge alone carries it. */
  .hero-pro-badge {
    font-size: 0;
    gap: 0;
  }
}

/* Stage wraps just the screenshot so overlaid widgets can be positioned
   with percentages that match the image's own box, not the frame chrome */
.mockup-stage {
  position: relative;
  line-height: 0;
}

@media (max-width: 640px) {
  .hero {
    padding: 5rem 0 2rem;
  }

  .hero-lead {
    max-width: none;
  }

  .hero-showcase {
    margin-top: 3rem;
  }
}

/* ---- Device frames (browser/window chrome around product screenshots) ---- */

.browser-frame,
.window-frame {
  background-color: var(--card-bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.frame-bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 1rem;
  background: linear-gradient(180deg, var(--card-bg-raised), var(--bg-alt));
  border-bottom: 1px solid var(--border);
}

.frame-dots {
  display: flex;
  gap: 0.4rem;
  flex-shrink: 0;
}

.frame-dots span {
  width: 0.62rem;
  height: 0.62rem;
  border-radius: 999px;
  opacity: 0.55;
}

.frame-dots span:nth-child(1) {
  background-color: #ec6a5e;
}

.frame-dots span:nth-child(2) {
  background-color: #e6bd5e;
}

.frame-dots span:nth-child(3) {
  background-color: #4dd4bf;
}

.frame-address {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background-color: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.3rem 0.8rem;
  font-size: 0.78rem;
  color: var(--text-faint);
  min-width: 0;
}

.frame-address svg {
  width: 0.85rem;
  height: 0.85rem;
  flex-shrink: 0;
  color: var(--text-faint);
}

.frame-address span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.frame-title {
  flex: 1;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-faint);
}

.browser-frame img,
.window-frame img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---- Product spotlight (flagship Chrome extension) ------------------------ */

.spotlight-grid {
  display: grid;
  /* The screenshot column is deliberately much wider than the copy column
     — the product, not the paragraph, should sell this section */
  grid-template-columns: 0.62fr 1.38fr;
  gap: 3.5rem;
  align-items: center;
}

@media (max-width: 940px) {
  .spotlight-grid {
    grid-template-columns: 1fr;
  }

  .spotlight-grid.reverse .spotlight-visual {
    order: -1;
  }
}

.spotlight-visual {
  position: relative;
  padding: 1.5rem;
}

.spotlight-visual::before {
  content: "";
  position: absolute;
  inset: -10% -10% auto auto;
  width: 60%;
  height: 60%;
  background: var(--gradient);
  filter: blur(90px);
  opacity: 0.16;
  z-index: -1;
  border-radius: 50%;
}

.spotlight-visual .browser-frame,
.spotlight-visual .window-frame {
  box-shadow: var(--shadow);
}

/* Laptop-style mockup for the Budget Tracker screenshot — a simplified
   CSS-drawn bezel + base, so the spreadsheet reads as a product rather
   than a raw Excel screenshot */
.laptop-frame {
  position: relative;
}

.laptop-frame::before {
  /* soft teal glow beneath the "laptop" */
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -1.5rem;
  height: 3rem;
  background: rgba(77, 212, 191, 0.15);
  filter: blur(38px);
  z-index: -1;
  border-radius: 50%;
}

.laptop-frame .window-frame {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius) var(--radius) 4px 4px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35);
}

.laptop-frame-base {
  width: 62%;
  height: 0.9rem;
  margin: 0 auto;
  background: linear-gradient(180deg, var(--card-bg-raised), var(--bg-alt));
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 10px 10px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3);
}

.spotlight-copy .eyebrow-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.9rem;
}

.spotlight-copy h2 {
  font-size: clamp(1.6rem, 3vw, 2.15rem);
  margin-bottom: 1rem;
}

.spotlight-copy > p {
  color: var(--text-muted);
  font-size: 1.02rem;
  line-height: 1.7;
  margin-bottom: 1.75rem;
  max-width: 30rem;
}

.spotlight-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.1rem 1.5rem;
  margin-bottom: 2.25rem;
}

.spotlight-feature {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.spotlight-feature-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: var(--radius-sm);
  background-color: var(--card-bg);
  border: 1px solid var(--border);
  color: var(--accent);
  flex-shrink: 0;
}

.spotlight-feature-icon svg {
  width: 1.15rem;
  height: 1.15rem;
}

.spotlight-feature h3 {
  font-size: 0.95rem;
  margin-bottom: 0.2rem;
}

.spotlight-feature p {
  color: var(--text-muted);
  font-size: 0.85rem;
  line-height: 1.5;
}

.spotlight-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/* ---- Pro showcase (Trading 212 + Strava, the aspirational hero product) --- */

.pro-showcase-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.75rem;
  max-width: 60rem;
  margin: 0 auto 3.5rem;
}

@media (max-width: 760px) {
  .pro-showcase-grid {
    grid-template-columns: 1fr;
  }
}

.pro-widget-card {
  background: var(--card-gradient);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2.25rem;
  box-shadow: var(--shadow-lg);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.pro-widget-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-strong);
}

.pro-widget-head {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 1.75rem;
}

.pro-widget-head h3 {
  font-size: 1.05rem;
  margin-bottom: 0.15rem;
}

.pro-widget-sub {
  font-size: 0.8rem;
  color: var(--text-faint);
}

.pro-widget-value {
  font-family: var(--font-heading);
  font-size: 1.9rem;
  font-weight: 800;
  margin: 0 0 0.35rem;
}

.pro-widget-change {
  display: block;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 1.5rem;
}

.pro-widget-chart {
  display: block;
  width: 100%;
  height: 6rem;
}

.pro-feature-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

@media (max-width: 940px) {
  .pro-feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .pro-feature-grid {
    grid-template-columns: 1fr;
  }
}

.pro-feature-card {
  background: var(--card-gradient);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.6rem;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.pro-feature-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-lg);
}

.pro-feature-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-sm);
  background-color: rgba(77, 212, 191, 0.12);
  color: var(--accent);
  margin-bottom: 1rem;
}

.pro-feature-icon svg {
  width: 1.2rem;
  height: 1.2rem;
}

.pro-feature-card h3 {
  font-size: 1rem;
  margin-bottom: 0.4rem;
}

.pro-feature-card p {
  color: var(--text-muted);
  font-size: 0.88rem;
  line-height: 1.6;
}

/* ---- Ecosystem (how the tools connect) ------------------------------------ */

/* A vertical timeline rather than a horizontal row — one connected system,
   read top to bottom like a flow diagram, not three side-by-side cards */
.ecosystem-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 26rem;
  margin: 0 auto;
}

.ecosystem-step {
  width: 100%;
  background: var(--card-gradient);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2rem 1.75rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  box-shadow: var(--shadow);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.ecosystem-step:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--border-strong);
}

/* The middle step (Personal Dashboard) is the flagship — give it a little
   more visual weight than the two either side */
.ecosystem-step.is-primary {
  border-color: rgba(77, 212, 191, 0.35);
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(77, 212, 191, 0.12);
  transform: scale(1.04);
}

.ecosystem-step.is-primary:hover {
  transform: scale(1.04) translateY(-4px);
}

.ecosystem-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 999px;
  background: var(--gradient);
  color: var(--accent-contrast);
  margin-bottom: 0.6rem;
}

.ecosystem-icon svg {
  width: 1.6rem;
  height: 1.6rem;
}

.ecosystem-step h3 {
  font-size: 1.05rem;
}

.ecosystem-step .ecosystem-outcome {
  color: var(--accent);
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.ecosystem-step p {
  color: var(--text-muted);
  font-size: 0.88rem;
  line-height: 1.55;
}

/* Glowing vertical connector — a faint line fading downward, ending in a
   small chevron, instead of an arrow icon */
.ecosystem-connector {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  flex-shrink: 0;
  height: 3.5rem;
  margin: 0.5rem 0;
}

.ecosystem-connector .line {
  width: 2px;
  flex: 1;
  background: linear-gradient(180deg, rgba(77, 212, 191, 0.6), rgba(77, 212, 191, 0));
}

.ecosystem-connector svg {
  width: 1rem;
  height: 1rem;
  color: rgba(77, 212, 191, 0.6);
  flex-shrink: 0;
}

/* ---- Trust / credibility -------------------------------------------------- */

.trust-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  max-width: 56rem;
  margin: 0 auto;
}

.trust-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.5rem;
  border-radius: var(--radius);
  background: var(--card-gradient);
  border: 1px solid var(--border);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.trust-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--border-strong);
}

/* Neutral by default — teal is reserved for the handful of icons marked
   .is-accent, not applied uniformly across every card in the grid */
.trust-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  background-color: #162437;
  color: var(--text-muted);
  flex-shrink: 0;
}

.trust-card-icon.is-accent {
  background-color: rgba(77, 212, 191, 0.12);
  color: var(--accent);
}

.trust-card-icon svg {
  width: 1.2rem;
  height: 1.2rem;
}

.trust-card h3 {
  font-size: 0.98rem;
  margin-bottom: 0.3rem;
}

.trust-card p {
  color: var(--text-muted);
  font-size: 0.88rem;
  line-height: 1.55;
}

/* ---- Roadmap --------------------------------------------------------------- */

.roadmap-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: 0.82fr 1.36fr 0.82fr;
  align-items: start;
}

@media (max-width: 860px) {
  .roadmap-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

.roadmap-col {
  background: var(--card-gradient);
  border: 1px solid var(--border);
  border-top: 3px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.roadmap-col:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.roadmap-col.is-now {
  border-top-color: var(--accent-2);
}

.roadmap-col.is-featured {
  border-top-color: var(--accent);
  border-color: rgba(77, 212, 191, 0.4);
  background: linear-gradient(180deg, rgba(77, 212, 191, 0.1), var(--card-bg) 45%);
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(77, 212, 191, 0.16);
  padding: 2.25rem 2rem;
}

.roadmap-col.is-future {
  border-top-color: var(--soon);
}

@media (min-width: 861px) {
  .roadmap-col.is-featured {
    transform: scale(1.045);
  }

  .roadmap-col.is-featured:hover {
    transform: scale(1.045) translateY(-4px);
  }
}

.roadmap-col-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.5rem;
}

.roadmap-dot {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 999px;
  flex-shrink: 0;
}

.roadmap-col.is-now .roadmap-dot {
  background-color: var(--accent-2);
  box-shadow: 0 0 0 4px rgba(96, 165, 250, 0.18);
}

.roadmap-col.is-featured .roadmap-dot {
  background-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(77, 212, 191, 0.18);
}

.roadmap-col.is-featured .roadmap-col-head h3 {
  color: var(--accent);
}

.roadmap-col.is-future .roadmap-dot {
  background-color: var(--text-faint);
  box-shadow: 0 0 0 4px rgba(126, 137, 155, 0.15);
}

.roadmap-col-head h3 {
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted);
}

.roadmap-list {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.roadmap-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.92rem;
  color: var(--text);
}

.roadmap-list li svg {
  width: 1rem;
  height: 1rem;
  color: var(--text-faint);
  flex-shrink: 0;
  margin-top: 0.2rem;
}

.roadmap-col.is-now .roadmap-list li svg {
  color: var(--accent-2);
}

.roadmap-col.is-featured .roadmap-list li svg {
  color: var(--accent);
}

/* ---- Cards: tools -------------------------------------------------------- */

.card-grid {
  display: grid;
  gap: 1.75rem;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.tool-card {
  background: var(--card-gradient);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.tool-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.tool-card-media {
  position: relative;
  height: 13rem;
  background-color: var(--bg-alt);
  overflow: hidden;
}

.tool-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Compact device-frame treatment for card-sized product thumbnails */
.tool-card-media .browser-frame,
.tool-card-media .window-frame {
  height: 100%;
  display: flex;
  flex-direction: column;
  border: none;
  border-radius: 0;
}

.tool-card-media .frame-bar {
  padding: 0.4rem 0.6rem;
  gap: 0.4rem;
  flex-shrink: 0;
}

.tool-card-media .frame-dots span {
  width: 0.4rem;
  height: 0.4rem;
}

.tool-card-media .frame-title,
.tool-card-media .frame-address {
  font-size: 0.68rem;
}

.tool-card-media .frame-address {
  padding: 0.15rem 0.55rem;
}

.tool-card-media .browser-frame img,
.tool-card-media .window-frame img {
  flex: 1;
  min-height: 0;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.tool-card-media.placeholder-media {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: linear-gradient(135deg, rgba(96, 165, 250, 0.16), rgba(77, 212, 191, 0.16));
  color: var(--text-muted);
  text-align: center;
  padding: 1rem;
}

.tool-card-media.placeholder-media svg {
  width: 2rem;
  height: 2rem;
  color: var(--accent);
}

.tool-card-media.placeholder-media span {
  font-size: 0.78rem;
  font-weight: 700;
}

.tool-card-badges {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.tool-card-body {
  padding: 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  flex: 1;
}

.tool-card-body h3 {
  font-size: 1.15rem;
}

.tool-card-body p {
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.6;
}

.tool-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.15rem 0 0.3rem;
}

.tool-card-tags span {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-muted);
  background-color: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.25rem 0.6rem;
}

.tool-card-features {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 0.88rem;
  color: var(--text-muted);
  margin: 0.2rem 0;
}

.tool-card-features li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.tool-card-features svg {
  width: 0.95rem;
  height: 0.95rem;
  color: var(--accent);
  flex-shrink: 0;
  margin-top: 0.2rem;
}

/* ---- Pro pricing block (tools.html's Personal Dashboard Pro card) ------- */

.pro-price {
  font-size: 0.9rem;
  color: var(--text);
  background-color: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0.7rem 0.9rem;
  margin: 0.4rem 0 0.2rem;
  line-height: 1.55;
}

/* Small caps-ish heading separating the "Pro unlocks" and "Free forever"
   halves of the card, so the two tiers can't be misread as one list. */
.pro-tier-label {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 600;
  margin: 0.9rem 0 0.1rem;
}

.pro-free-note,
.pro-buy-note {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0.2rem 0 0;
}

.pro-buy-note {
  font-size: 0.8rem;
  margin-top: 0.7rem;
}

.tool-card-actions {
  margin-top: auto;
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  padding-top: 0.6rem;
  border-top: 1px solid var(--border);
}

.tool-card-actions .btn {
  flex: 1;
  white-space: nowrap;
}

/* ---- Filters --------------------------------------------------------- */

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 2.5rem;
}

.filter-btn {
  background-color: var(--card-bg);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-weight: 600;
  font-size: 0.88rem;
  padding: 0.55rem 1.05rem;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}

.filter-btn:hover {
  color: var(--text);
  border-color: var(--border-strong);
}

.filter-btn[aria-pressed="true"] {
  background: var(--gradient);
  color: var(--accent-contrast);
  border-color: transparent;
}

.empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--text-muted);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  display: none;
}

.empty-state.is-visible {
  display: block;
}

/* ---- Free vs paid ------------------------------------------------------ */

.compare-grid {
  display: grid;
  gap: 1.75rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.compare-card {
  background: var(--card-gradient);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.compare-card.is-pro {
  border-color: rgba(96, 165, 250, 0.4);
  background: linear-gradient(180deg, rgba(96, 165, 250, 0.08), var(--card-bg) 40%);
}

.compare-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.compare-head h3 {
  font-size: 1.25rem;
}

.compare-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.95rem;
  color: var(--text-muted);
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--border);
}

.compare-list li:last-child {
  border-bottom: none;
}

.compare-list svg {
  width: 1.05rem;
  height: 1.05rem;
  color: var(--accent);
  flex-shrink: 0;
  margin-top: 0.15rem;
}

.compare-list li.is-planned svg {
  color: var(--warn);
}

.compare-list .tag-planned {
  margin-left: auto;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--warn);
  white-space: nowrap;
}

/* ---- Steps -------------------------------------------------------------- */

.steps-grid {
  display: grid;
  gap: 1.75rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  counter-reset: step;
}

.step-card {
  position: relative;
  padding: 1.75rem 1.5rem 1.5rem;
  background: var(--card-gradient);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
  background: var(--gradient);
  color: var(--accent-contrast);
  font-family: var(--font-heading);
  font-weight: 800;
  margin-bottom: 1rem;
}

.step-card h3 {
  font-size: 1.05rem;
  margin-bottom: 0.5rem;
}

.step-card p {
  color: var(--text-muted);
  font-size: 0.92rem;
}

/* ---- Tutorials --------------------------------------------------------- */

.tutorial-card {
  background: var(--card-gradient);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow);
  transition: transform 0.18s ease, border-color 0.18s ease;
}

.tutorial-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.tutorial-thumb {
  height: 10rem;
  background: linear-gradient(135deg, rgba(96, 165, 250, 0.18), rgba(77, 212, 191, 0.18));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  position: relative;
}

.tutorial-thumb svg {
  width: 2.4rem;
  height: 2.4rem;
  color: var(--accent);
}

.tutorial-thumb .thumb-label {
  position: absolute;
  bottom: 0.6rem;
  left: 0.6rem;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-faint);
  background-color: rgba(18, 22, 29, 0.72);
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
}

.tutorial-body {
  padding: 1.3rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  flex: 1;
}

.tutorial-meta {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-faint);
}

.tutorial-body h3 {
  font-size: 1.05rem;
}

.tutorial-body p {
  color: var(--text-muted);
  font-size: 0.9rem;
  flex: 1;
}

.difficulty {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
}

.difficulty-beginner {
  color: var(--free);
}

.difficulty-intermediate {
  color: var(--warn);
}

.difficulty-advanced {
  color: var(--paid);
}

/* ---- Search box --------------------------------------------------------- */

.search-box {
  position: relative;
  max-width: 30rem;
  margin: 0 0 2rem;
}

.search-box input {
  width: 100%;
  padding: 0.85rem 1rem 0.85rem 2.75rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background-color: var(--card-bg);
  color: var(--text);
  font-size: 0.95rem;
  font-family: inherit;
}

.search-box input::placeholder {
  color: var(--text-faint);
}

.search-box input:focus {
  outline: none;
  border-color: var(--accent);
}

.search-box svg {
  position: absolute;
  top: 50%;
  left: 0.9rem;
  transform: translateY(-50%);
  width: 1.1rem;
  height: 1.1rem;
  color: var(--text-faint);
}

/* ---- FAQ / accordion ---------------------------------------------------- */

.faq-list {
  max-width: 46rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.faq-item {
  background: var(--card-gradient);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.faq-item summary {
  cursor: pointer;
  padding: 1.1rem 1.3rem;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.98rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  font-size: 1.3rem;
  color: var(--accent);
  flex-shrink: 0;
  transition: transform 0.15s ease;
}

.faq-item[open] summary::after {
  transform: rotate(45deg);
}

.faq-item p {
  padding: 0 1.3rem 1.2rem;
  color: var(--text-muted);
  font-size: 0.93rem;
  line-height: 1.65;
}

/* ---- Troubleshooting ----------------------------------------------------- */

.trouble-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.trouble-card {
  background: var(--card-gradient);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
}

.trouble-card h3 {
  font-size: 1rem;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.trouble-card h3 svg {
  width: 1.1rem;
  height: 1.1rem;
  color: var(--warn);
  flex-shrink: 0;
}

.trouble-card p {
  color: var(--text-muted);
  font-size: 0.9rem;
}

/* ---- Social ------------------------------------------------------------- */

.social-grid {
  display: grid;
  gap: 1.75rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.social-card {
  background: var(--card-gradient);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.75rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  transition: transform 0.18s ease, border-color 0.18s ease;
}

.social-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(255, 255, 255, 0.05);
}

.social-icon {
  width: 3rem;
  height: 3rem;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gradient);
  color: var(--accent-contrast);
}

.social-icon svg {
  width: 1.5rem;
  height: 1.5rem;
}

.social-card h3 {
  font-size: 1.05rem;
}

.social-card .handle {
  color: var(--text-faint);
  font-size: 0.85rem;
}

/* ---- Founder ---------------------------------------------------------------- */

.founder-card {
  max-width: 50rem;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 3rem;
  background-color: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 48px;
  box-shadow: var(--shadow-lg);
}

@media (max-width: 700px) {
  .founder-card {
    flex-direction: column;
    text-align: center;
    padding: 2.25rem 1.75rem;
    gap: 1.75rem;
  }
}

.founder-avatar {
  position: relative;
  flex-shrink: 0;
  width: 8.5rem;
  height: 8.5rem;
  border-radius: 999px;
  overflow: hidden;
  background-color: #eef4f0;
  border: 1px solid var(--border-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem;
  box-shadow: 0 0 0 10px rgba(77, 212, 191, 0.06), 0 0 50px rgba(77, 212, 191, 0.22);
}

.founder-avatar img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.founder-name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.35rem;
  margin-bottom: 0.3rem;
}

.founder-title {
  color: var(--accent);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.5;
  margin-bottom: 1.1rem;
}

.founder-bio {
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.7;
  max-width: 650px;
  margin-bottom: 1rem;
}

.founder-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--accent);
  font-weight: 700;
  font-size: 0.9rem;
  text-decoration: none;
}

.founder-link:hover {
  text-decoration: underline;
}

.founder-link svg {
  width: 0.95rem;
  height: 0.95rem;
}

/* ---- Newsletter ----------------------------------------------------------- */

.newsletter {
  background: var(--card-gradient);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.newsletter-copy {
  max-width: 26rem;
}

.newsletter-form {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  flex: 1;
  min-width: 260px;
  max-width: 26rem;
}

.newsletter-form input[type="email"] {
  flex: 1;
  min-width: 180px;
  padding: 0.8rem 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background-color: var(--bg-alt);
  color: var(--text);
  font-family: inherit;
  font-size: 0.95rem;
}

.newsletter-form input[type="email"]:focus {
  outline: none;
  border-color: var(--accent);
}

.form-note {
  font-size: 0.78rem;
  color: var(--text-faint);
  margin-top: 0.6rem;
  width: 100%;
}

.form-status {
  font-size: 0.85rem;
  font-weight: 600;
  margin-top: 0.6rem;
  min-height: 1.2em;
}

.form-status.is-success {
  color: var(--accent);
}

.form-status.is-error {
  color: #e07070;
}

/* ---- Contact form --------------------------------------------------------- */

.contact-layout {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 2.5rem;
  align-items: start;
}

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

.contact-form {
  background: var(--card-gradient);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.field label {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-muted);
}

.field .hint {
  font-size: 0.78rem;
  color: var(--text-faint);
  font-weight: 400;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.8rem 0.9rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background-color: var(--bg-alt);
  color: var(--text);
  font-family: inherit;
  font-size: 0.95rem;
}

.field textarea {
  resize: vertical;
  min-height: 8rem;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
}

.field-error {
  color: #e07070;
  font-size: 0.8rem;
  min-height: 1.1em;
}

.contact-side {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.contact-info-card {
  background: var(--card-gradient);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  display: flex;
  gap: 1rem;
}

.contact-info-card svg {
  width: 1.4rem;
  height: 1.4rem;
  color: var(--accent);
  flex-shrink: 0;
}

.contact-info-card h3 {
  font-size: 0.98rem;
  margin-bottom: 0.35rem;
}

.contact-info-card p {
  color: var(--text-muted);
  font-size: 0.88rem;
}

.notice-box {
  background-color: var(--bg-alt);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius);
  padding: 1.1rem 1.3rem;
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.6;
}

/* ---- Legal pages ----------------------------------------------------------- */

.legal-content {
  max-width: 46rem;
  margin: 0 auto;
}

.legal-content h2 {
  font-size: 1.25rem;
  margin: 2.25rem 0 0.75rem;
}

.legal-content h2:first-child {
  margin-top: 0;
}

.legal-content p,
.legal-content li {
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.75;
}

.legal-content ul {
  padding-left: 1.25rem;
  margin: 0.75rem 0;
}

.legal-content li {
  list-style: disc;
  margin-bottom: 0.4rem;
}

.legal-meta {
  color: var(--text-faint);
  font-size: 0.85rem;
  margin-bottom: 2.5rem;
}

.review-notice {
  background-color: rgba(224, 179, 77, 0.08);
  border: 1px solid rgba(224, 179, 77, 0.35);
  border-radius: var(--radius);
  padding: 1.1rem 1.3rem;
  font-size: 0.88rem;
  color: var(--text);
  margin-bottom: 2.5rem;
  display: flex;
  gap: 0.75rem;
}

.review-notice svg {
  width: 1.3rem;
  height: 1.3rem;
  color: var(--warn);
  flex-shrink: 0;
  margin-top: 0.1rem;
}

/* ---- About page --------------------------------------------------------- */

.about-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 3rem;
  align-items: center;
}

@media (max-width: 860px) {
  .about-grid {
    grid-template-columns: 1fr;
  }
}

.about-photo-card {
  background: var(--card-gradient);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2rem;
  text-align: center;
}

.about-photo-card img {
  width: 6rem;
  height: 6rem;
  margin: 0 auto 1rem;
  border-radius: var(--radius);
  object-fit: contain;
  background-color: #eef4f0;
  padding: 0.6rem;
}

.about-photo-card a {
  color: var(--accent);
  font-weight: 700;
  text-decoration: none;
  font-size: 0.9rem;
}

.about-photo-card a:hover {
  text-decoration: underline;
}

.about-body p + p {
  margin-top: 1rem;
}

.about-body p {
  color: var(--text-muted);
  line-height: 1.75;
}

.value-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin-top: 3rem;
}

.value-card {
  padding: 1.5rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--card-gradient);
}

.value-card svg {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--accent);
  margin-bottom: 0.8rem;
}

.value-card h3 {
  font-size: 1rem;
  margin-bottom: 0.4rem;
}

.value-card p {
  color: var(--text-muted);
  font-size: 0.88rem;
}

/* ---- Page hero (non-home) ------------------------------------------------- */

.page-hero {
  padding: 4rem 0 3rem;
  border-bottom: 1px solid var(--border);
}

.page-hero .eyebrow {
  margin-bottom: 1rem;
}

.page-hero h1 {
  font-size: clamp(1.9rem, 3.6vw, 2.6rem);
  margin-bottom: 1rem;
}

.page-hero p {
  color: var(--text-muted);
  font-size: 1.05rem;
  max-width: 40rem;
  line-height: 1.7;
}

/* ---- Footer --------------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--border);
  padding: 3.5rem 0 2rem;
  background-color: var(--bg-alt);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 2.5rem;
  margin-bottom: 2.5rem;
}

@media (max-width: 760px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.9rem;
}

.footer-brand img {
  width: 2rem;
  height: 2rem;
  border-radius: 7px;
}

.footer-col p {
  color: var(--text-muted);
  font-size: 0.88rem;
  line-height: 1.6;
  max-width: 22rem;
}

.footer-col h4 {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  margin-bottom: 1rem;
}

.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.footer-col a {
  color: var(--text-muted);
  text-decoration: none;
  font-size: 0.9rem;
}

.footer-col a:hover {
  color: var(--accent);
}

.footer-social {
  display: flex;
  gap: 0.6rem;
  margin-top: 1.1rem;
}

.footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  color: var(--text-muted);
}

.footer-social a:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.footer-social svg {
  width: 1.05rem;
  height: 1.05rem;
}

.footer-bottom {
  border-top: 1px solid var(--border);
  padding-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  color: var(--text-faint);
  font-size: 0.82rem;
}

.footer-bottom-links {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
}

.footer-bottom-links a {
  color: var(--text-faint);
  text-decoration: none;
}

.footer-bottom-links a:hover {
  color: var(--accent);
}

/* ---- Back to top ------------------------------------------------------------ */

.back-to-top {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  width: 3rem;
  height: 3rem;
  border-radius: 999px;
  background: var(--gradient);
  color: var(--accent-contrast);
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 90;
}

.back-to-top.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.back-to-top svg {
  width: 1.3rem;
  height: 1.3rem;
}

/* ---- Reveal on scroll --------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---- Responsive type ------------------------------------------------------ */

@media (max-width: 640px) {
  main section {
    padding: 4.5rem 0;
  }

  main section.tight {
    padding: 3.5rem 0;
  }

  .hero {
    padding: 3.5rem 0 3rem;
  }

  .newsletter {
    padding: 1.75rem;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }
}

/* ---- Tool-card badges, tiers and guide figures (2026-09-12) ------------- */

/* Badges used to sit at the top-left of the media, directly over the fake
   browser/window title bar — at card width the "£5 one-time" pill collided
   with the frame title and the screenshot behind it, which is what made the
   price unreadable. They now sit along the bottom edge of the media, clear
   of the title bar, over a short scrim so any screenshot can pass behind
   them. */
.tool-card-media::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 4.5rem;
  background: linear-gradient(to top, rgba(9, 11, 18, 0.85), rgba(9, 11, 18, 0));
  pointer-events: none;
}

.tool-card-media.placeholder-media::after { content: none; }

.tool-card-badges {
  top: auto;
  bottom: 0.7rem;
  left: 0.7rem;
  right: 0.7rem;
  z-index: 1;
}

/* The price is the one badge that states a fact rather than a category, so
   it is filled rather than outlined — at 0.7rem outlined type over a busy
   screenshot it read as decoration. */
.badge-price {
  color: #08131f;
  background-color: var(--accent);
  border-color: transparent;
  font-weight: 800;
}

/* Free and Pro side by side inside one card, so a reader can compare the
   tiers without scrolling a long single list. Collapses to one column at
   phone width. */
.tier-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0.9rem 1.4rem;
  margin-top: 0.2rem;
}

.tier-head {
  margin: 0 0 0.4rem;
}

.tier.is-pro {
  border-left: 2px solid rgba(96, 165, 250, 0.35);
  padding-left: 1rem;
}

@media (max-width: 32rem) {
  .tier.is-pro {
    border-left: none;
    border-top: 1px solid var(--border);
    padding-left: 0;
    padding-top: 0.8rem;
  }
}

.tool-card.is-featured {
  border-color: rgba(96, 165, 250, 0.35);
}

/* Screenshots inside the written guides. Constrained and framed so a 1280px
   capture doesn't dominate the column it sits in. */
.guide-figure {
  margin: 1rem 0 1.4rem;
}

.guide-figure img {
  width: 100%;
  max-width: 100%;
  display: block;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background-color: var(--bg-alt);
}

.guide-figure figcaption {
  font-size: 0.82rem;
  color: var(--text-faint);
  margin-top: 0.5rem;
  line-height: 1.55;
}

.guide-figure-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1rem;
  margin: 1rem 0 1.4rem;
}

.guide-figure-row figure { margin: 0; }

/* Tutorial thumbnails can now be real screenshots rather than an icon —
   the guides they head are about specific screens, and an icon told the
   reader nothing about which one. */
.tutorial-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

/* Real product screenshots in the Pro showcase, replacing the hand-drawn
   mock widgets that used to sit here — those invented figures (a £24,318.52
   portfolio) implied data the product had never shown anyone. */
.pro-shot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 1.4rem;
  margin-bottom: 2.5rem;
}

.pro-shot {
  margin: 0;
  background: var(--card-gradient);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  box-shadow: var(--shadow);
}

.pro-shot img {
  /* The two cards are different shapes (the portfolio one is taller), so
     cap the height and let width follow: they then sit level instead of one
     column running far past the other. */
  max-height: 30rem;
  width: auto;
  max-width: 100%;
  margin: 0 auto;
  display: block;
  border-radius: calc(var(--radius) - 4px);
}

.pro-shot figcaption {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin-top: 0.8rem;
}

/* Card screenshots are wide (1916x906) and the media box is short, so a
   centred crop showed a thin band from the middle of the dashboard. Anchor
   to the top, where the greeting and the cards are. */
.tool-card-media img {
  object-position: top center;
}

/* Every badge sitting over a card screenshot gets the same filled pill,
   whatever it says — an outlined "Free" next to a filled price badge read
   as two different kinds of label rather than the same one. */
.tool-card-badges .badge {
  color: #08131f;
  background-color: var(--accent);
  border-color: transparent;
  font-weight: 800;
}

/* Prev/next between the standalone tutorial pages. */
.guide-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: space-between;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}

/* ---- links.html (the link-in-bio page) --------------------------------- */

/* Built for a phone arriving from an Instagram bio: one column, thumb-sized
   targets, and no nav — the whole page is the navigation. */
.links-wrap {
  max-width: 34rem;
  margin: 0 auto;
  padding: 3rem 1.25rem 4rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.links-head {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.links-logo {
  border-radius: 50%;
  box-shadow: var(--shadow);
}

.links-head h1 {
  font-size: 1.6rem;
  margin: 0;
}

.links-head p {
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
  max-width: 30rem;
}

.links-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.link-card {
  display: grid;
  grid-template-columns: 2.5rem 1fr auto;
  align-items: center;
  gap: 0.9rem;
  padding: 1rem 1.1rem;
  background: var(--card-gradient);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--text);
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.link-card:hover,
.link-card:focus-visible {
  transform: translateY(-2px);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-lg);
}

/* One card carries the main call to action; the rest stay quiet. */
.link-card.is-primary {
  border-color: rgba(77, 212, 191, 0.45);
}

.link-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: var(--bg-alt);
  color: var(--accent);
}

.link-card-icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.link-card-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.link-card-text strong {
  font-size: 0.98rem;
  font-weight: 700;
}

.link-card-text span {
  color: var(--text-muted);
  font-size: 0.85rem;
  line-height: 1.5;
}

.link-card-arrow {
  color: var(--text-faint);
  font-size: 1.1rem;
}

.links-foot {
  text-align: center;
  color: var(--text-faint);
  font-size: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.links-foot a {
  color: var(--text-muted);
}

.links-copyright {
  margin: 0;
}

@media (max-width: 26rem) {
  /* The descriptions are the first thing to go when space is tight. */
  .link-card-text span {
    display: none;
  }
}