/* Tool-page styles (/tools, /tools/*).
 *
 * These pages carry the SITE's nav, footer and stylesheet, exactly like /learn and /news.
 * This file adds only what the tool pages themselves need, on top of that. It used to be a
 * standalone stylesheet cloned from start/index.html, which meant a second reset and a
 * second set of header and footer rules fighting the real ones.
 *
 * The tokens below are the same values as the site's, restated so a tool section can be
 * read without opening the Webflow bundle. */
:root {
  --color-primary: #1D2330;
  --color-on-primary: #FFFFFF;
  --color-secondary: #4B3C8E;
  --color-on-secondary: #FFFFFF;
  --color-tertiary: #8A4FFF;
  --color-tertiary-hover: #7A3FE8;
  --color-tertiary-active: #6A31D1;
  --color-on-tertiary: #FFFFFF;
  --color-accent: #E56457;
  --color-on-accent: #FFFFFF;
  --color-neutral: #F7F5F3;
  --color-surface: #FFFFFF;
  --color-surface-alt: #F5F5F5;
  --color-on-surface: #1D2330;
  --color-muted: #676B74;
  --color-border: #E4EAF3;

  --radius-none: 0;
  --radius-sm: 5px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 26px;
  --radius-full: 9999px;

  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 32px;
  --space-xl: 48px;
  --space-xxl: 80px;
  --gutter: 24px;
  --section-y: 4.5rem;
  --max-width: 1336px;

  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-headline-md: 'PT Serif', Georgia, serif; /* Abril Text fallback */
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --shadow-card: 0 2px 4px rgba(25, 33, 61, 0.08);
  --shadow-feature: 0 10px 60px rgba(153, 153, 153, 0.07);
}


/* =====================================================
   Free tool pages (/tools, /tools/*)
   Added 2026-08-18. These pages are the indexable surface
   for the two live tools that run on app.advisewell.co.
   ===================================================== */
.header__nav a.header__link { font-weight: 400; }
.hero--tool { padding-bottom: 0; }
.hero--tool .hero__sub { max-width: 720px; }

.tool-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-lg); }
.tool-card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
}
.tool-card h2 { font-family: var(--font-display); font-size: 1.7rem; font-weight: 400; color: var(--color-secondary); margin-bottom: var(--space-xs); }
.tool-card p { color: var(--color-muted); font-size: 0.98rem; line-height: 1.6; margin-bottom: var(--space-md); }
.tool-card ul { list-style: none; margin-bottom: var(--space-lg); }
.tool-card li { position: relative; padding-left: 1.4rem; margin-bottom: 8px; font-size: 0.95rem; color: var(--color-on-surface); }
.tool-card li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 7px; height: 7px; border-radius: 50%; background: var(--color-tertiary); }
.tool-card .btn { align-self: flex-start; margin-top: auto; }

.live-dot {
  display: inline-block;
  width: 7px; height: 7px;
  margin-right: 7px;
  border-radius: 50%;
  background: #23c552;
  box-shadow: 0 0 0 0 rgba(35, 197, 82, 0.6);
  animation: live-pulse 2.4s ease-out infinite;
}
@keyframes live-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(35, 197, 82, 0.55); }
  70%  { box-shadow: 0 0 0 7px rgba(35, 197, 82, 0); }
  100% { box-shadow: 0 0 0 0 rgba(35, 197, 82, 0); }
}

.examples { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-sm); }
.example {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-tertiary);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--color-on-surface);
}
.example .example__q { font-family: var(--font-headline-md); display: block; margin-bottom: 6px; }
.example .example__a { color: var(--color-muted); font-size: 0.9rem; }

.covers { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-md); }
.cover { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-md); }
.cover h3 { font-family: var(--font-headline-md); font-size: 1.05rem; margin-bottom: 6px; }
.cover p { color: var(--color-muted); font-size: 0.9rem; line-height: 1.55; }

.crosslink {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg) var(--space-xl);
}
.crosslink h2 { font-family: var(--font-headline-md); font-size: 1.2rem; font-weight: 400; margin-bottom: 4px; }
.crosslink p { color: var(--color-muted); font-size: 0.93rem; }

.readmore { margin-top: var(--space-lg); font-size: 0.95rem; }
.readmore a { color: var(--color-secondary); text-decoration: none; border-bottom: 1px solid rgba(75, 60, 142, 0.3); }
.readmore a:hover { color: var(--color-tertiary); border-bottom-color: var(--color-tertiary); }
.readmore li { margin-bottom: 6px; list-style: none; }

.breadcrumb {
  font-size: 0.82rem;
  color: var(--color-muted);
  padding-top: var(--space-md);
  /* The site stylesheet makes every .container a COLUMN flex box, which turned the
     breadcrumb's links and separators into four stacked rows. It is one line of text, so
     take it out of flex layout entirely rather than fighting the direction. */
  display: block;
}
.breadcrumb a { color: var(--color-muted); text-decoration: none; border-bottom: 1px solid transparent; }
.breadcrumb a:hover { color: var(--color-secondary); border-bottom-color: var(--color-secondary); }

.note-strip {
  background: var(--color-surface-alt);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  font-size: 0.9rem;
  color: var(--color-muted);
  line-height: 1.6;
}

@media (max-width: 600px) {
  .tool-card { padding: var(--space-lg); }
  .crosslink { padding: var(--space-lg); }
}

/* Long-form prose sections. These used to carry inline style attributes on every
   heading, paragraph and list, repeated across the pages. Now the renderer emits
   .prose-block and the styling lives here once. */
.prose-block { max-width: 760px; margin: 0 auto; }
.prose-block h2 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-weight: 400;
  color: var(--color-secondary);
  margin-bottom: var(--space-md);
}
.prose-block p { color: var(--color-muted); line-height: 1.7; margin-bottom: var(--space-md); }
.prose-block p:last-child { margin-bottom: 0; }
.prose-block ul { color: var(--color-muted); line-height: 1.7; margin: 0 0 var(--space-md) 1.1rem; }
.prose-block li { margin-bottom: 6px; }

.readmore__intro { color: var(--color-muted); margin-bottom: var(--space-xs); }

/* The date stamp on the trust statement. SOC 2 is point-in-time: showing when the claim
   was last confirmed is the difference between a fact and a decoration. */
.note-strip__stamp { display: inline-block; color: var(--color-on-surface); opacity: 0.72; }

/* Layout the tool sections rely on. Scoped under #main-content so nothing here can reach
   the nav or footer, which the site stylesheet owns. */
#main-content .container { max-width: 1336px; margin: 0 auto; padding: 0 24px; }
#main-content .section { padding: 4.5rem 0; }
#main-content .hero { padding: 3.5rem 0 0; }
#main-content .hero__inner { text-align: center; }
#main-content .display {
  font-family: var(--font-display); font-size: clamp(2.2rem, 5vw, 3.2rem);
  font-weight: 400; line-height: 1.12; letter-spacing: -0.015em; color: var(--color-secondary);
}
#main-content .hero__sub {
  max-width: 720px; margin: 20px auto 0; color: var(--color-muted);
  font-size: 1.05rem; line-height: 1.6;
}
#main-content .hero__cta { margin-top: 28px; }
#main-content .hero__btns { display: flex; gap: 16px; justify-content: center; align-items: center; flex-wrap: wrap; }
#main-content .hero__microcopy { margin-top: 14px; font-size: 0.85rem; color: var(--color-muted); }
#main-content .eyebrow {
  display: inline-block; font-size: 0.72rem; font-weight: 500; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--color-muted); background: var(--color-surface-alt);
  padding: 6px 12px; border-radius: 9999px; margin-bottom: 18px;
}
#main-content .sec-title { text-align: center; max-width: 720px; margin: 0 auto 40px; }
#main-content .sec-title h2 {
  font-family: var(--font-display); font-size: clamp(1.7rem, 3.5vw, 2.3rem);
  font-weight: 400; color: var(--color-secondary);
}
#main-content .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 32px; }
#main-content .step__n { font-family: var(--font-display); font-size: 1.5rem; color: var(--color-tertiary); }
#main-content .step h3 { font-family: var(--font-headline-md); font-size: 1.12rem; margin: 6px 0; }
#main-content .step p { color: var(--color-muted); font-size: 0.95rem; line-height: 1.55; }
#main-content .faq { max-width: 760px; margin: 0 auto; }
#main-content .faq__item {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: 8px; padding: 14px 22px; margin-bottom: 14px;
}
#main-content .faq__item summary {
  font-family: var(--font-headline-md); font-size: 1.02rem; cursor: pointer; color: var(--color-on-surface);
}
#main-content .faq__item summary::marker { color: var(--color-tertiary); }
#main-content .faq__item p { color: var(--color-muted); font-size: 0.95rem; line-height: 1.55; padding-top: 10px; }
#main-content .cta-band { text-align: center; }
#main-content .cta-band h2 {
  font-family: var(--font-display); font-size: clamp(1.7rem, 3.5vw, 2.3rem);
  font-weight: 400; color: var(--color-secondary); margin-bottom: 18px;
}

/* The hub card's two actions: open the tool (primary), read how it works (secondary).
   The tool is the button because using it is the point; the page about it is a text link. */
#main-content .tool-card__actions { margin-top: auto; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
#main-content .tool-card__more { font-size: 0.9rem; color: var(--color-secondary); text-decoration: none; border-bottom: 1px solid rgba(75,60,142,.3); }
#main-content .tool-card__more:hover { color: var(--color-tertiary); border-bottom-color: var(--color-tertiary); }

/* Clear the fixed nav.
   .section.nav is `position: fixed; inset: 0 0 auto` with a 1rem top margin and a 1rem
   padded card inside, so it floats over whatever the page puts first. The article pages
   never noticed because their first section carries Webflow's own hero spacing; these
   pages start with a breadcrumb, which was landing underneath the nav card and showing as
   a clipped sliver beside it. Reserve the space explicitly rather than relying on the
   first child to happen to have enough padding. */
:root { --tools-nav-clearance: 118px; }
@media (max-width: 991px) { :root { --tools-nav-clearance: 104px; } }
@media (max-width: 767px)  { :root { --tools-nav-clearance: 92px; } }

#main-content { padding-top: var(--tools-nav-clearance); }
#main-content .breadcrumb { padding-top: 0; }
#main-content .hero--tool { padding-top: 1.5rem; }