.ffqh-host {
  --ffqh-navy: #102a43;
  --ffqh-midnight: #0b1f33;
  --ffqh-storm: #154c79;
  --ffqh-teal: #0b6b69;
  --ffqh-green: #237a57;
  --ffqh-gold: #e9b949;
  --ffqh-cream: #fff8e7;
  --ffqh-linen: #f4e9d8;
  --ffqh-coral: #b9472d;
  --ffqh-mist: #ddeef0;
  --ffqh-ink: #172b3a;
  --ffqh-white: #fff;
  --ffqh-border: #c8d5df;
  color: var(--ffqh-ink);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;
  margin-inline: auto;
  max-width: 1180px;
  padding: 0 0 3rem;
}

.ffqh-host,
.ffqh-host * { box-sizing: border-box; }

.ffqh-host img { display: block; height: auto; max-width: 100%; }
.ffqh-host h2,
.ffqh-host h3 { color: var(--ffqh-navy); font-family: ui-rounded, "Trebuchet MS", system-ui, sans-serif; line-height: 1.18; margin-top: 0; }
.ffqh-host h2 { font-size: clamp(1.7rem, 4vw, 2.55rem); }
.ffqh-host h3 { font-size: clamp(1.08rem, 2.5vw, 1.28rem); }
.ffqh-host p { margin-top: 0; }
.ffqh-host code { background: rgba(11,107,105,.10); border-radius: .35rem; color: var(--ffqh-navy); padding: .08em .32em; }
.ffqh-host a { text-underline-offset: .18em; }

.ffqh-skip {
  background: var(--ffqh-navy);
  border-radius: .65rem;
  color: white;
  left: .75rem;
  padding: .75rem 1rem;
  position: absolute;
  top: -10rem;
  z-index: 9999;
}
.ffqh-skip:focus { top: .75rem; }

.ffqh-hero {
  background: var(--ffqh-midnight);
  border: 1px solid rgba(16,42,67,.12);
  border-radius: 1.6rem;
  box-shadow: 0 18px 50px rgba(16,42,67,.18);
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(300px, .85fr);
  margin: 1rem 0 2rem;
  min-height: 510px;
  overflow: hidden;
}
.ffqh-hero-media { min-width: 0; position: relative; }
.ffqh-hero-media::after {
  background: linear-gradient(90deg, transparent 60%, var(--ffqh-midnight));
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}
.ffqh-hero-media picture,
.ffqh-hero-media img { height: 100%; width: 100%; }
.ffqh-hero-media img { object-fit: cover; object-position: 48% center; }
.ffqh-hero-copy {
  align-self: center;
  color: rgba(255,255,255,.91);
  padding: clamp(1.5rem, 4vw, 3.4rem) clamp(1.35rem, 4vw, 3.2rem) clamp(1.5rem, 4vw, 3.4rem) .75rem;
  position: relative;
  z-index: 1;
}
.ffqh-hero-copy h2 { color: white; font-size: clamp(2rem, 4.5vw, 3.3rem); }
.ffqh-hero-copy p { font-size: 1.04rem; }
.ffqh-eyebrow {
  color: var(--ffqh-teal);
  font-size: .78rem !important;
  font-weight: 800;
  letter-spacing: .12em;
  margin-bottom: .5rem;
  text-transform: uppercase;
}
.ffqh-hero-copy .ffqh-eyebrow { color: #8ce0d9; }
.ffqh-trust { color: rgba(255,255,255,.72); font-size: .83rem !important; margin: 1rem 0 0; }
.ffqh-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin: 1.25rem 0 0; }
.ffqh-button {
  align-items: center;
  border: 2px solid transparent;
  border-radius: 999px;
  display: inline-flex;
  font-weight: 800;
  gap: .5rem;
  justify-content: center;
  min-height: 48px;
  padding: .72rem 1.12rem;
  text-decoration: none !important;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.ffqh-button svg { fill: none; height: 1.1em; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; width: 1.1em; }
.ffqh-button:hover { transform: translateY(-1px); }
.ffqh-button:focus-visible { outline: 4px solid var(--ffqh-gold); outline-offset: 3px; }
.ffqh-button-primary { background: var(--ffqh-gold); color: var(--ffqh-navy) !important; box-shadow: 0 8px 20px rgba(233,185,73,.23); }
.ffqh-button-secondary { border-color: rgba(255,255,255,.72); color: white !important; }

.ffqh-feature-grid {
  display: grid;
  gap: .9rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0 0 3rem;
}
.ffqh-feature-card,
.ffqh-three-grid article,
.ffqh-tool-grid article {
  background: white;
  border: 1px solid var(--ffqh-border);
  border-radius: 1rem;
  box-shadow: 0 6px 18px rgba(16,42,67,.08);
  padding: 1.1rem;
}
.ffqh-feature-card { display: grid; grid-template-columns: auto 1fr; column-gap: .8rem; align-content: start; }
.ffqh-feature-card h3 { margin-bottom: .25rem; }
.ffqh-feature-card p { font-size: .93rem; grid-column: 2; margin-bottom: 0; }
.ffqh-icon {
  align-items: center;
  background: var(--ffqh-mist);
  border-radius: .8rem;
  color: var(--ffqh-teal);
  display: inline-flex;
  grid-row: 1 / span 2;
  height: 44px;
  justify-content: center;
  width: 44px;
}
.ffqh-icon svg,
.ffqh-icon-large svg,
.ffqh-safety-icon svg { fill: none; height: 24px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; width: 24px; }

.ffqh-app-section,
.ffqh-quickstart,
.ffqh-paths,
.ffqh-learn,
.ffqh-map-section,
.ffqh-toolkit,
.ffqh-printables,
.ffqh-faq,
.ffqh-related { margin: 4rem 0; }
.ffqh-section-heading { margin: 0 auto 1.4rem; max-width: 800px; text-align: center; }
.ffqh-section-heading > p:last-child { color: #455d6c; font-size: 1.04rem; }
.ffqh-app-frame {
  background: linear-gradient(180deg, var(--ffqh-mist), rgba(255,255,255,.9));
  border: 1px solid #b8d6d8;
  border-radius: 1.25rem;
  padding: clamp(.35rem, 1.5vw, 1rem);
}
.ffqh-missing-app { background: white; border: 2px dashed var(--ffqh-coral); border-radius: 1rem; padding: 1.3rem; text-align: center; }
.ffqh-missing-app strong { color: var(--ffqh-coral); }

.ffqh-step-grid { counter-reset: ffqh-steps; display: grid; gap: 1rem; grid-template-columns: repeat(3,minmax(0,1fr)); list-style: none; margin: 0; padding: 0; }
.ffqh-step-grid li { align-items: flex-start; background: var(--ffqh-cream); border: 1px solid #ead8ae; border-radius: 1rem; display: flex; gap: .9rem; padding: 1.15rem; }
.ffqh-step-grid li > span { align-items: center; background: var(--ffqh-navy); border-radius: 50%; color: white; display: inline-flex; flex: 0 0 38px; font-weight: 900; height: 38px; justify-content: center; }
.ffqh-step-grid h3 { margin-bottom: .3rem; }
.ffqh-step-grid p { margin-bottom: 0; }

.ffqh-three-grid { display: grid; gap: 1rem; grid-template-columns: repeat(3,minmax(0,1fr)); }
.ffqh-three-grid article { border-top: 5px solid var(--ffqh-teal); }
.ffqh-three-grid article:nth-child(2) { border-top-color: var(--ffqh-storm); }
.ffqh-three-grid article:nth-child(3) { border-top-color: var(--ffqh-coral); }
.ffqh-path-mark { align-items: center; background: var(--ffqh-navy); border-radius: 50%; color: white; display: inline-flex; font-weight: 900; height: 34px; justify-content: center; margin-bottom: .65rem; width: 34px; }
.ffqh-callout { background: var(--ffqh-mist); border-left: 5px solid var(--ffqh-teal); border-radius: .6rem; margin: 1rem 0 0; padding: 1rem; }

.ffqh-learn { align-items: center; display: grid; gap: 2rem; grid-template-columns: minmax(0,1.25fr) minmax(280px,.75fr); }
.ffqh-check-list { list-style: none; margin: 0; padding: 0; }
.ffqh-check-list li { margin: .54rem 0; padding-left: 1.75rem; position: relative; }
.ffqh-check-list li::before { color: var(--ffqh-green); content: "✓"; font-weight: 900; left: 0; position: absolute; }
.ffqh-formula-card { background: var(--ffqh-midnight); border-radius: 1.2rem; box-shadow: 0 16px 34px rgba(16,42,67,.2); color: white; padding: 1.5rem; text-align: center; }
.ffqh-formula-card strong { color: var(--ffqh-gold); display: block; font-family: ui-monospace, monospace; font-size: 1.35rem; margin: .6rem 0; }
.ffqh-formula { background: rgba(255,255,255,.1); border-radius: .65rem; font-family: ui-monospace, monospace; padding: .7rem; }
.ffqh-icon-large { color: #8ce0d9; display: inline-flex; }
.ffqh-icon-large svg { height: 38px; width: 38px; }

.ffqh-map-section img { border: 1px solid var(--ffqh-border); border-radius: 1.2rem; box-shadow: 0 12px 30px rgba(16,42,67,.14); width: 100%; }
.ffqh-tool-grid { display: grid; gap: 1rem; grid-template-columns: repeat(3,minmax(0,1fr)); }
.ffqh-tool-grid article { background: linear-gradient(180deg,#fff,var(--ffqh-cream)); }
.ffqh-tool-grid p { margin-bottom: 0; }

.ffqh-safety { align-items: flex-start; background: #fff3d6; border: 1px solid #e5c777; border-radius: 1.2rem; display: grid; gap: 1.2rem; grid-template-columns: auto 1fr; margin: 4rem 0; padding: clamp(1.2rem,3vw,2rem); }
.ffqh-safety-icon { align-items: center; background: var(--ffqh-navy); border-radius: 50%; color: var(--ffqh-gold); display: flex; height: 54px; justify-content: center; width: 54px; }
.ffqh-check-list-compact { columns: 2; column-gap: 2rem; }

.ffqh-printables { background: linear-gradient(135deg,var(--ffqh-mist),var(--ffqh-cream)); border: 1px solid #bfd6d8; border-radius: 1.3rem; padding: clamp(1.25rem,4vw,2.5rem); text-align: center; }
.ffqh-print-columns { display: grid; gap: 1.5rem; grid-template-columns: repeat(2,minmax(0,1fr)); margin: 1.4rem auto; max-width: 850px; text-align: left; }

.ffqh-details-list { display: grid; gap: .75rem; margin: 0 auto; max-width: 920px; }
.ffqh-details-list details { background: white; border: 1px solid var(--ffqh-border); border-radius: .85rem; box-shadow: 0 4px 14px rgba(16,42,67,.06); }
.ffqh-details-list summary { color: var(--ffqh-navy); cursor: pointer; font-family: ui-rounded,"Trebuchet MS",system-ui,sans-serif; font-size: 1.05rem; font-weight: 800; list-style: none; padding: 1rem 3rem 1rem 1rem; position: relative; }
.ffqh-details-list summary::-webkit-details-marker { display: none; }
.ffqh-details-list summary::after { content: "+"; font-size: 1.5rem; position: absolute; right: 1rem; top: .66rem; }
.ffqh-details-list details[open] summary::after { content: "−"; }
.ffqh-details-list details p { border-top: 1px solid var(--ffqh-border); margin: 0; padding: 1rem; }
.ffqh-details-list summary:focus-visible { outline: 4px solid var(--ffqh-gold); outline-offset: 2px; }

.ffqh-related { align-items: center; background: var(--ffqh-navy); border-radius: 1.2rem; color: white; display: grid; gap: 1rem 2rem; grid-template-columns: minmax(180px,.55fr) minmax(0,1.45fr); padding: clamp(1.25rem,3vw,2rem); }
.ffqh-related h2 { color: white; margin-bottom: 0; }
.ffqh-related .ffqh-eyebrow { color: #8ce0d9; }
.ffqh-link-grid { display: grid; gap: .7rem; }
.ffqh-link-grid a { align-items: center; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.25); border-radius: .65rem; color: white !important; display: flex; justify-content: space-between; min-height: 46px; padding: .65rem .8rem; text-decoration: none; }
.ffqh-link-grid a:hover { background: rgba(255,255,255,.15); }
.ffqh-link-grid svg { fill: none; height: 1.1em; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; width: 1.1em; }
.ffqh-notice { border-top: 1px solid var(--ffqh-border); color: #526775; font-size: .84rem; margin-top: 2rem; padding: 1.2rem .25rem 0; text-align: center; }

@media (max-width: 900px) {
  .ffqh-hero { grid-template-columns: 1fr; }
  .ffqh-hero-media { min-height: 390px; }
  .ffqh-hero-media::after { background: linear-gradient(180deg, transparent 55%, var(--ffqh-midnight)); }
  .ffqh-hero-copy { margin-top: -6rem; padding: 2rem 1.3rem 1.7rem; }
  .ffqh-feature-grid,
  .ffqh-tool-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .ffqh-step-grid,
  .ffqh-three-grid { grid-template-columns: 1fr; }
  .ffqh-learn { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .ffqh-host { margin-inline: calc(50% - 50vw); max-width: 100vw; padding-inline: 12px; }
  .ffqh-hero { border-radius: 1.15rem; margin-top: .4rem; min-height: 0; }
  .ffqh-hero-media { min-height: 410px; }
  .ffqh-hero-media img { object-position: center; }
  .ffqh-hero-copy { margin-top: -7rem; }
  .ffqh-hero-copy h2 { font-size: clamp(1.8rem,8.5vw,2.45rem); }
  .ffqh-actions { align-items: stretch; flex-direction: column; }
  .ffqh-button { width: 100%; }
  .ffqh-feature-grid,
  .ffqh-tool-grid,
  .ffqh-print-columns { grid-template-columns: 1fr; }
  .ffqh-app-section,
  .ffqh-quickstart,
  .ffqh-paths,
  .ffqh-learn,
  .ffqh-map-section,
  .ffqh-toolkit,
  .ffqh-printables,
  .ffqh-faq,
  .ffqh-related { margin: 3rem 0; }
  .ffqh-feature-card { padding: .95rem; }
  .ffqh-check-list-compact { columns: 1; }
  .ffqh-safety { grid-template-columns: 1fr; }
  .ffqh-related { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .ffqh-host *, .ffqh-host *::before, .ffqh-host *::after { scroll-behavior: auto !important; transition: none !important; }
}

@media (forced-colors: active) {
  .ffqh-host * { box-shadow: none !important; }
  .ffqh-hero,
  .ffqh-related,
  .ffqh-formula-card { border: 2px solid CanvasText; }
  .ffqh-button { border: 2px solid ButtonText; }
}