/* Page-specific layout, content and typography. Tool behavior and navigation stay unchanged. */
.tf-page .app-shell,
html.topic-refinement-open .tf-page .app-shell {
  height: auto;
  min-height: 0;
  padding-bottom: 32px;
}

.tf-hero {
  padding: 12px 0 28px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--aw-line);
  background: #e7eff8;
  box-shadow: 0 0 0 100vmax #e7eff8;
  clip-path: inset(0 -100vmax);
}
.tf-hero > .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  text-transform: none;
}
.tf-hero > .eyebrow::before {
  content: "";
  flex: 0 0 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--aw-teal);
}
html.aw-platform[data-aw-design="tool"] .tf-hero h1 { font-size: 32px !important; }
.tf-hero p { max-width: 1080px; margin: 10px 0 0; color: var(--aw-text, #516171); }
/* Keep one heading hierarchy across the introduction, tool and guide. */
html.aw-platform[data-aw-design="tool"] .tf-page :is(#generator-title, #results-title) { font-size: 24px !important; line-height: 1.3 !important; }
html.aw-platform[data-aw-design="tool"] .tf-page .topic-card h3 { font-size: 18px !important; }
.tf-page :is(.optional-fields summary, .free-result > span, .score-item small, .premium-title-badge, .premium-state, .premium-detail dt) { font-weight: 600; }
.tf-page .topic-premium-cta a { font-weight: 500; }
.tf-page .tf-signup-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 8px;
  min-height: 52px;
  margin: 0 0 20px;
  padding: 12px 18px;
  border: 1px solid var(--aw-line);
  border-radius: 8px;
  background: rgba(237, 243, 255, 0.75);
  text-align: center;
}
/* Use the shared tool typography instead of miniature premium-only text. */
.tf-page .topic-premium-heading strong { font-size: var(--aw-ui-body); line-height: 1.5; flex-wrap: wrap; }
.tf-page :is(.premium-state, .premium-intro, .premium-detail dt) { font-size: var(--aw-ui-label); line-height: 1.5; }
.tf-page .premium-detail dd { font-size: var(--aw-ui-body); line-height: 1.55; font-weight: 400; }
.tf-page .topic-premium-cta a { font-size: var(--aw-ui-body); line-height: 1.5; }
.tf-page :is(.premium-title-badge, .topic-premium-cta small) { font-size: var(--aw-ui-caption); line-height: 1.5; }

/* Visual reference: the homepage's .aw-product, .aw-document and .aw-feedback. */
#themenfinder-tool { --aw-state-line: var(--aw-line); }
#themenfinder-tool .generator-panel > .section-heading {
  padding-top: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--aw-line);
  border-radius: 7px 7px 0 0;
  background: #fafbfd;
}
#themenfinder-tool .results-heading {
  padding: 10px 14px;
  border: 1px solid var(--aw-line);
  border-radius: 6px;
  background: #f8fafc;
}
#themenfinder-tool .proposal-nav-button { font-weight: 500; }
#themenfinder-tool .topic-card::before { content: none; }
#themenfinder-tool .topic-card-inner { padding: 20px 22px; }
html.aw-platform[data-aw-design="tool"] #themenfinder-tool .topic-card h3 { font-size: 23px !important; line-height: 1.3 !important; margin-bottom: 12px; }
#themenfinder-tool .topic-title-label { display: block; margin-bottom: 6px; color: var(--aw-muted); font-size: 13px; font-weight: 400; line-height: 1.5; }
#themenfinder-tool .topic-description { color: var(--aw-text); line-height: 1.65; }
#themenfinder-tool .copy-button { border-color: var(--aw-line); border-radius: 5px; color: var(--aw-text); box-shadow: none; }
#themenfinder-tool .free-result { margin: 18px 0; padding: 12px 14px; border-left: 2px solid #d8a327; background: #fef3d5; }
#themenfinder-tool .free-result > span { color: #5d4b2d; font-size: 13px; font-weight: 500; text-transform: none; }
#themenfinder-tool .free-result p { color: #5d4b2d; line-height: 1.65; }
#themenfinder-tool .topic-scores { padding: 12px 0; }
#themenfinder-tool .score-item > span,
#themenfinder-tool .score-item small { font-size: var(--aw-ui-caption); line-height: 1.4; }
#themenfinder-tool .score-ring.is-good { --ring-color: #0c9787; }
#themenfinder-tool .score-ring.is-very-good { --ring-color: var(--aw-teal); }
#themenfinder-tool .score-ring.is-medium { --ring-color: #d8a327; }
#themenfinder-tool .topic-premium { margin: 18px -22px -20px; padding: 18px 22px 20px; background: #f8fafc; }
#themenfinder-tool .topic-premium-heading { margin-bottom: 12px; }
#themenfinder-tool .premium-state { color: var(--aw-teal); }
#themenfinder-tool .premium-title-badge { border-color: var(--aw-line); border-radius: 5px; background: #eaf1fe; }
#themenfinder-tool .premium-title-badge.is-active { color: var(--aw-teal); background: #edf7f3; }
#themenfinder-tool .premium-detail { padding-top: 8px; padding-bottom: 10px; border-top-color: var(--aw-line); }
#themenfinder-tool .premium-detail dd { color: var(--aw-text); }
#themenfinder-tool .premium-detail:last-child { padding: 10px 12px; border-top: 0; border-left: 2px solid #0c9787; background: #edf7f3; }
#themenfinder-tool .premium-detail:last-child dt { color: var(--aw-teal); }
#themenfinder-tool .premium-detail:last-child dd { color: #365b52; }
#themenfinder-tool .topic-premium-cta a { border-radius: 6px; }
#themenfinder-tool #empty-state { border-style: solid; border-color: var(--aw-line); box-shadow: var(--aw-ui-shadow); }

#themenfinder-tool { scroll-margin-top: 24px; }
#themenfinder-tool:focus { outline: none; }
/* Override the shared empty-state background for this tool only. */
.tf-page #empty-state { background-color: var(--aw-white, #fff) !important; }

/* Keep the document as the scroll container when optional inputs are open. */
html.topic-refinement-open:has(> body.tf-page),
html.topic-refinement-open > body.tf-page { overflow: visible; }
@media (min-width: 980px) {
  #themenfinder-tool > .generator-panel {
    position: sticky;
    top: min(16px, calc(100dvh - var(--tf-form-height, 0px) - 16px));
    align-self: start;
    max-height: none;
    overflow: visible;
  }
}

.tf-guide { color: var(--aw-ink); }
.tf-container { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }
.tf-band { padding: 68px 0; border-top: 1px solid var(--aw-line); }
.tf-white { background: var(--aw-white, #fff); }
.tf-guide :is(h2, h3, p, figure, dl) { margin: 0; }
html.aw-platform[data-aw-design="tool"] .tf-guide h2 { font-size: 24px !important; line-height: 1.3 !important; }
html.aw-platform[data-aw-design="tool"] .tf-guide h3 { font-size: 18px !important; }
.tf-guide p { color: var(--aw-text, #516171); }
.tf-guide h2 + p { margin-top: 14px; }
.tf-guide :is(.tf-eyebrow, .tf-subject) { color: var(--aw-blue); font-size: 13px; font-weight: 600; }
.tf-guide .tf-eyebrow { margin-bottom: 10px; }
.tf-guide .tf-intro { margin-top: 16px; }
.tf-section-heading { max-width: 760px; margin-bottom: 32px; }
.tf-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 54px; align-items: center; }
.tf-align-start { align-items: start; }
body.tf-page .tf-guide .tf-caption, .tf-guide figcaption { color: var(--aw-muted); font-size: 12px; line-height: 1.6; }
.tf-guide .tf-caption { margin-top: 20px; }
.tf-text-link, .tf-inline-links a { display: inline-flex; align-items: center; gap: 10px; color: var(--aw-blue); font-weight: 500; text-decoration: none; }
.tf-text-link:hover, .tf-inline-links a:hover { text-decoration: underline; }
.tf-button { display: inline-flex; justify-content: center; align-items: center; gap: 12px; min-height: 46px; padding: 11px 18px; border: 1px solid var(--aw-blue); border-radius: 8px; color: #fff; background: var(--aw-blue); text-decoration: none; font-size: 15px; font-weight: 500; line-height: 1.4; text-align: center; }
.tf-button:hover { background: var(--aw-ui-blue-hover); }
.tf-guide :is(a, summary):focus-visible { outline: 2px solid var(--aw-blue); outline-offset: 4px; }
.tf-guide :is(.tf-text-link, .tf-button) > span { flex-shrink: 0; }
.tf-steps { list-style: none; padding: 0; margin: 28px 0; display: grid; gap: 22px; }
.tf-steps li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 14px; }
.tf-step-number { display: inline-grid; align-content: center; justify-content: center; width: 36px; height: 36px; border-radius: 6px; background: #edf3ff; color: var(--aw-blue); font-size: 13px; font-weight: 600; }
.tf-steps p { margin-top: 6px; }
.tf-product-figure { min-width: 0; }
.tf-figure-heading { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; font-size: 14px; font-weight: 500; }
.tf-figure-heading img { flex-shrink: 0; }
.tf-product-image { display: block; width: 100%; height: auto; border: 1px solid var(--aw-line); border-radius: 8px; box-shadow: var(--aw-ui-shadow); background: #fff; }
.tf-product-figure figcaption { margin-top: 12px; }
.tf-figure-note { display: flex; align-items: flex-start; gap: 14px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--aw-line); }
.tf-figure-note img { flex-shrink: 0; }
.tf-guide .tf-figure-disclaimer { margin-top: 20px; font-size: 13px; }

.tf-focus-path { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 38px; background: #fff; border-block: 1px solid var(--aw-line); }
.tf-focus-path > div { position: relative; padding: 23px 25px; border-right: 1px solid var(--aw-line); }
.tf-focus-path > div:last-child { border: 0; background: #edf3ff; }
.tf-focus-path > div:not(:last-child)::after { content: "→"; position: absolute; right: -11px; top: calc(50% - 14px); z-index: 1; width: 22px; height: 28px; text-align: center; background: #fff; color: var(--aw-blue); }
.tf-focus-path :is(span, strong, small) { display: block; }
.tf-focus-path span { color: var(--aw-blue); font-size: 12px; margin-bottom: 10px; }
.tf-focus-path strong { font-size: 17px; }
.tf-focus-path small { margin-top: 8px; font-size: 12px; color: var(--aw-muted); }
.tf-principles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.tf-principles img { margin-bottom: 12px; }
.tf-principles p { margin-top: 10px; }
.tf-tip { display: grid; grid-template-columns: minmax(180px, .65fr) minmax(0, 2fr); gap: 24px; margin-top: 30px; padding: 20px 24px; background: #edf8f5; border-left: 3px solid var(--aw-teal, #087f78); }
.tf-tip strong { color: var(--aw-teal, #087f78); }
.tf-degree-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.tf-degree-grid article { display: flex; flex-direction: column; padding-top: 18px; border-top: 2px solid var(--aw-line); }
.tf-degree-index { color: var(--aw-muted); font-size: 12px; margin-bottom: 12px; }
.tf-degree-grid article > p { margin-top: 12px; margin-bottom: 18px; }
.tf-mini-example { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--aw-line); }
.tf-mini-example span { display: block; color: var(--aw-teal, #087f78); font-size: 12px; margin-bottom: 6px; }
.tf-mini-example strong { font-size: 14px; font-weight: 500; }
.tf-heading-with-link { display: flex; align-items: end; gap: 40px; max-width: none; }
.tf-heading-with-link > div { max-width: 720px; }
.tf-heading-with-link > a { margin-left: auto; flex-shrink: 0; padding-bottom: 3px; font-size: 14px; }
.tf-example-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.tf-example { display: flex; flex-direction: column; padding: 24px; border: 1px solid var(--aw-line); border-radius: 8px; background: #fff; }
.tf-example .tf-subject { display: block; margin-bottom: 14px; }
.tf-example p { margin-top: 14px; margin-bottom: 20px; font-size: 14px; }
.tf-example > div { display: flex; align-items: flex-start; gap: 8px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--aw-line); font-size: 12px; color: var(--aw-muted); }
.tf-example img { flex-shrink: 0; }
.tf-assessment-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.tf-assessment-icon { display: grid; place-items: center; width: 58px; height: 58px; margin-bottom: 20px; background: #edf3ff; border-radius: 8px; }
.tf-assessment-icon.tf-teal { background: #edf8f5; }
.tf-assessment-icon.tf-amber { background: #fff8e9; }
.tf-assessment-grid p { margin: 12px 0 20px; }
.tf-assessment-grid dl { padding-top: 16px; border-top: 1px solid var(--aw-line); }
.tf-assessment-grid dt { font-size: 13px; font-weight: 600; }
.tf-assessment-grid dd { margin: 6px 0 18px; color: var(--aw-text, #516171); font-size: 14px; }
.tf-assessment-grid dd:last-child { margin-bottom: 0; }
.tf-mistakes { display: grid; gap: 20px; }
.tf-mistakes article { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 14px; border-bottom: 1px solid var(--aw-line); padding-bottom: 20px; }
.tf-mistakes article:last-child { padding-bottom: 0; border-bottom: 0; }
.tf-mistakes article > span { font-size: 13px; color: var(--aw-muted); padding-top: 3px; }
.tf-mistakes p { margin-top: 7px; }
.tf-mistakes .tf-better { color: var(--aw-teal, #087f78); font-size: 14px; }
.tf-align-start > div > .tf-button { margin-top: 26px; }
.tf-question-path { display: grid; grid-template-columns: .7fr 1fr 1.2fr; gap: 32px; }
.tf-question-path > div { padding: 24px 0; border-top: 2px solid var(--aw-line); }
.tf-question-path > div:last-child { border-color: var(--aw-teal, #087f78); }
.tf-question-path small { display: block; font-size: 12px; color: var(--aw-muted); margin: 18px 0 8px; }
.tf-question-path p { margin-top: 12px; font-size: 14px; }
.tf-inline-links { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; padding-top: 22px; border-top: 1px solid var(--aw-line); font-size: 14px; }
.tf-inline-links p { flex-basis: 100%; }
.tf-premium-band { background: #edf3ff; }
.tf-included { padding-bottom: 20px; margin-bottom: 22px; border-bottom: 1px solid var(--aw-line); }
.tf-included p { margin-top: 8px; font-size: 14px; }
.tf-guide .tf-premium-list-title { margin-bottom: 18px; }
.tf-premium-factors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; }
.tf-premium-factors dt { color: var(--aw-ink); font-size: 14px; font-weight: 600; }
.tf-premium-factors dd { margin: 4px 0 0; color: var(--aw-text, #516171); font-size: 13px; }
.tf-premium-band .tf-caption { margin-top: 10px; max-width: 400px; }
.tf-faq-layout { display: grid; grid-template-columns: .65fr 1.35fr; gap: 64px; align-items: start; }
.tf-faq-icon { margin-top: 28px; }
.tf-faq { border-top: 1px solid var(--aw-line); }
.tf-faq details { border-bottom: 1px solid var(--aw-line); }
.tf-faq summary { position: relative; padding: 20px 34px 20px 0; color: var(--aw-ink); font-weight: 500; cursor: pointer; list-style: none; }
.tf-faq summary::-webkit-details-marker { display: none; }
.tf-faq summary::after { content: "+"; position: absolute; right: 4px; top: 17px; font-size: 23px; font-weight: 400; color: var(--aw-blue); }
.tf-faq details[open] summary::after { content: "−"; }
.tf-faq details > div { padding: 0 28px 22px 0; }
.tf-faq p + p, .tf-faq .tf-text-link { margin-top: 12px; }
.tf-final-cta { padding: 36px 0; background: #edf8f5; border-block: 1px solid var(--aw-line); }
.tf-final-cta .tf-container { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.tf-final-cta p { margin-top: 8px; }
.tf-final-cta .tf-button { flex-shrink: 0; }

/* Reuse the homepage's pricing-card design, scoped to this page section. */
.tf-pricing .aw-pricing-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.tf-pricing .aw-price { position: relative; display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: 28px; background: #fff; border: 1px solid var(--aw-line); border-radius: 8px; box-shadow: var(--aw-ui-shadow); }
.tf-pricing .aw-price-featured { padding: 27px; border: 2px solid var(--aw-blue); }
.tf-pricing .aw-price h3 { min-height: 28px; }
.tf-pricing .aw-price-featured h3 { max-width: calc(100% - 110px); }
.tf-pricing .aw-price-ribbon { position: absolute; top: 24px; right: 0; padding: 6px 18px 6px 22px; background: var(--aw-blue); color: #fff; font-size: 13px; line-height: 20px; font-weight: 600; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 8px 50%); }
.tf-pricing .aw-price-audience { margin-top: 8px; min-height: 46px; font-size: 14px; line-height: 1.6; }
.tf-pricing .aw-price-amount { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 10px; min-height: 60px; margin-top: 24px; font-size: 48px; line-height: 1.15; font-weight: 700; font-variant-numeric: tabular-nums; }
.tf-pricing .aw-price-amount > span { white-space: nowrap; }
.tf-pricing .aw-price-amount > small { font-size: 14px; line-height: 1.5; font-weight: 400; color: var(--aw-muted); }
.tf-pricing .aw-price-featured .aw-price-amount > span { color: var(--aw-blue); }
.tf-pricing .aw-price-value-note { margin-top: 8px; font-size: 13px; line-height: 1.6; color: var(--aw-teal); }
.tf-pricing .aw-price-terms { min-height: 64px; margin-top: 14px; font-size: 13px; line-height: 1.6; }
.tf-pricing strong { font-weight: 600; }
.tf-pricing .aw-price-features { width: 100%; margin: 22px 0 28px; padding: 20px 0 0 18px; border-top: 1px solid var(--aw-line); font-size: 14px; line-height: 1.55; }
.tf-pricing .aw-price-features li + li { margin-top: 18px; }
.tf-pricing .aw-price-features li::marker { color: var(--aw-teal); }
.tf-pricing .aw-price-features span { display: block; margin-top: 4px; color: var(--aw-text); font-size: 13px; }
.tf-pricing .aw-price .tf-button { width: 100%; margin-top: auto; }
.tf-pricing .tf-button-secondary { color: var(--aw-blue); background: #fff; }
.tf-pricing .tf-button-secondary:hover { background: #edf3ff; }
.tf-pricing .aw-pricing-note { max-width: 840px; margin: 28px auto 0; font-size: 14px; line-height: 1.7; text-align: center; }
.tf-pricing .aw-pricing-explainer { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--aw-line); }
.tf-pricing .aw-pricing-explainer p { font-size: 13px; }
.tf-pricing .aw-pricing-availability { margin-top: 18px; font-size: 13px; }

@media (max-width: 1100px) {
  .tf-split { gap: 30px; }
  .tf-focus-path > div { padding: 20px 16px; }
  .tf-degree-grid, .tf-example-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tf-degree-grid { gap: 32px; }
  .tf-heading-with-link { display: block; }
  .tf-heading-with-link > a { margin-top: 18px; }
  .tf-faq-layout { gap: 36px; }
}

@media (max-width: 760px) {
  .tf-pricing :is(.aw-pricing-grid, .aw-pricing-explainer) { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .tf-pricing .aw-price { padding: 24px; }
  .tf-pricing .aw-price-featured { padding: 23px; }
  .tf-pricing :is(.aw-price-audience, .aw-price-terms) { min-height: 0; }
  .tf-pricing .aw-pricing-note { text-align: left; }
  .tf-hero { padding: 8px 0 22px; margin-bottom: 20px; }
  html.aw-platform[data-aw-design="tool"] .tf-hero h1 { font-size: 28px !important; }
  .tf-container { width: calc(100% - 32px); }
  .tf-band { padding: 42px 0; }
  html.aw-platform[data-aw-design="tool"] .tf-page :is(#generator-title, #results-title, .tf-guide h2) { font-size: 22px !important; }
  .tf-split, .tf-faq-layout { grid-template-columns: 1fr; gap: 32px; }
  .tf-focus-path { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tf-focus-path > div { border-bottom: 1px solid var(--aw-line); }
  .tf-focus-path > div:nth-child(2)::after { content: none; }
  .tf-focus-path > div:last-child { border-bottom: 1px solid var(--aw-line); }
  .tf-principles, .tf-assessment-grid { grid-template-columns: 1fr; gap: 28px; }
  .tf-principles article { padding-left: 44px; position: relative; }
  .tf-principles img { position: absolute; left: 0; top: 0; }
  .tf-assessment-grid article { padding-top: 24px; border-top: 1px solid var(--aw-line); }
  .tf-assessment-grid article:first-child { padding-top: 0; border: 0; }
  .tf-tip { grid-template-columns: 1fr; gap: 8px; padding: 18px; }
  .tf-question-path { grid-template-columns: 1fr; gap: 12px; }
  .tf-question-path > div { padding: 18px 0; }
  .tf-question-path small { display: inline; margin-left: 12px; }
  .tf-question-path h3 { margin-top: 12px; }
  .tf-faq-icon { display: none; }
  .tf-final-cta .tf-container { align-items: flex-start; flex-direction: column; gap: 20px; }
}

@media (max-width: 520px) {
  .tf-degree-grid, .tf-example-grid { grid-template-columns: 1fr; }
  .tf-example { padding: 22px; }
  .tf-focus-path { grid-template-columns: 1fr; }
  .tf-focus-path > div { border-right: 0; }
  .tf-focus-path > div:not(:last-child)::after { content: "↓"; right: 18px; top: auto; bottom: -14px; }
  .tf-premium-factors { grid-template-columns: 1fr; gap: 14px; }
  .tf-guide .tf-button { max-width: 100%; }
}