html, body {
  height: auto !important;
  min-height: 100%;
  overflow-y: auto !important;
  overflow-x: hidden;
}

body.ghw-body .main-wrapper { height: auto !important; overflow: visible !important; }
body.ghw-body .main-content { height: auto !important; overflow: visible !important; }

.ghw-body {
  --gw-ink:        #241f1a;
  --gw-ink-soft:   #766c5c;
  --gw-bg:         #faf6ee;
  --gw-panel:      #ffffff;
  --gw-line:       #e9e0cf;

  --gw-accent:      #b3541e;
  --gw-accent-dark: #8f4116;
  --gw-accent-soft: #f6e6d6;

  --gw-sage:       #3f7a5c;
  --gw-sage-soft:  #e2efe7;

  --gw-charcoal:      #241f1a;
  --gw-charcoal-soft: #3a3226;

  --gw-low:       #2f7a52;
  --gw-low-bg:    #e2f0e8;
  --gw-medium:    #a8710f;
  --gw-medium-bg: #f7ecd6;
  --gw-high:      #b23a2d;
  --gw-high-bg:   #f8e2df;

  --gw-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --gw-sans:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --gw-mono:    'JetBrains Mono', ui-monospace, monospace;

  background:
    radial-gradient(620px 360px at 92% -6%, rgba(179,84,30,0.08), transparent 60%),
    radial-gradient(560px 320px at 2% 10%, rgba(63,122,92,0.07), transparent 60%),
    var(--gw-bg);
}

.ghw { max-width: 1180px; margin: 0 auto; padding: 0 24px 88px; color: var(--gw-ink); font-family: var(--gw-sans); }
.ghw h1, .ghw h2, .ghw h3 { font-family: var(--gw-display); color: var(--gw-charcoal); font-weight: 600; letter-spacing: -0.01em; }
.ghw p { line-height: 1.7; color: var(--gw-ink-soft); }

/* ---------- shared "wax seal" badge, this page's signature mark ---------- */
.ghw-stamp {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--gw-mono); font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--gw-accent-dark); background: var(--gw-accent-soft);
  padding: 7px 15px; border-radius: 999px;
  border: 1px solid var(--gw-accent);
}
.ghw-eyebrow-stamp {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--gw-mono); font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--gw-sage); background: var(--gw-sage-soft);
  padding: 7px 15px; border-radius: 999px;
}

/* ---------- HERO ---------- */
.ghw-hero { padding: 68px 0 56px; }
.ghw-hero-copy { max-width: 860px; }
.ghw-kicker { margin-bottom: 22px; }
.ghw-h1 { font-size: 42px; line-height: 1.14; margin: 0 0 18px; }
.ghw-sub { font-size: 17px; max-width: 68ch; margin-bottom: 26px; color: var(--gw-charcoal-soft); font-weight: 450; }

.ghw-hero-points { list-style: none; margin: 0 0 30px; padding: 0; display: flex; flex-direction: column; gap: 11px; max-width: 68ch; }
.ghw-hero-points li {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 15px; line-height: 1.6; color: var(--gw-ink-soft);
  background: var(--gw-panel); border: 1px solid var(--gw-line); border-radius: 10px;
  padding: 12px 15px;
  box-shadow: 0 12px 26px -24px rgba(36,31,26,0.35);
}
.ghw-hero-points i { flex: none; color: var(--gw-accent); font-size: 15px; margin-top: 3px; width: 16px; text-align: center; }
.ghw-hero-cta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 10px; }
.ghw-hero-btn {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--gw-charcoal); color: #fff; font-weight: 600;
  padding: 14px 26px; border-radius: 8px; text-decoration: none;
  font-family: var(--gw-sans); font-size: 15px;
  box-shadow: 0 14px 28px -14px rgba(36,31,26,0.55);
  transition: transform 0.15s ease, background 0.15s ease;
}
.ghw-hero-btn:hover { background: var(--gw-accent-dark); transform: translateY(-2px); }
.ghw-hero-note { font-family: var(--gw-mono); font-size: 12.5px; color: var(--gw-ink-soft); }

/* ---------- TYPE STRIP ---------- */
.ghw-typestrip {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 18px 22px; margin-bottom: 40px;
  background: var(--gw-panel); border: 1px solid var(--gw-line); border-radius: 14px;
  box-shadow: 0 16px 36px -30px rgba(36,31,26,0.3);
}
.ghw-typestrip-label { font-family: var(--gw-mono); font-size: 12.5px; color: var(--gw-ink-soft); white-space: nowrap; }
.ghw-typestrip-chips { display: flex; gap: 10px; flex-wrap: wrap; }
.ghw-typestrip-chips button {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--gw-line); background: var(--gw-bg);
  border-radius: 8px; padding: 9px 14px; font-size: 13.5px;
  font-family: var(--gw-sans); font-weight: 600; color: var(--gw-ink); cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.ghw-typestrip-chips button:hover { border-color: var(--gw-accent); background: var(--gw-accent-soft); color: var(--gw-accent-dark); }
.ghw-typestrip-chips i { color: var(--gw-sage); }

/* ---------- TOOL LAYOUT ---------- */
.ghw-tool { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; align-items: start; }

/* ---------- FORM BLOCKS (flat cards with a left accent bar, no numbered rail) ---------- */
.ghw-form { display: flex; flex-direction: column; gap: 18px; }
.ghw-block {
  background: var(--gw-panel); border: 1px solid var(--gw-line); border-radius: 14px;
  border-left: 3px solid var(--gw-accent);
  padding: 20px 22px 22px;
  box-shadow: 0 16px 34px -30px rgba(36,31,26,0.3);
}
.ghw-block-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--gw-mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--gw-accent-dark); margin-bottom: 14px;
}

.ghw-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.ghw-field:last-child { margin-bottom: 0; }
.ghw-field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.ghw-field-pair.three { grid-template-columns: 1fr 1fr 1fr; }
.ghw-field label { font-size: 13px; font-weight: 700; color: var(--gw-charcoal); }
.ghw-req { color: var(--gw-accent-dark); }
.ghw-opt { font-weight: 400; color: var(--gw-ink-soft); font-size: 12px; }

.ghw-field input[type="text"],
.ghw-field select,
.ghw-field textarea {
  font-family: var(--gw-sans); font-size: 14.5px; color: var(--gw-ink);
  border: 1px solid var(--gw-line); border-radius: 8px; padding: 11px 13px;
  background: var(--gw-bg); resize: vertical;
}
.ghw-field input:focus, .ghw-field select:focus, .ghw-field textarea:focus {
  outline: none; border-color: var(--gw-accent); box-shadow: 0 0 0 3px var(--gw-accent-soft);
}

.ghw-checkline { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--gw-ink-soft); margin-top: 12px; cursor: pointer; }
.ghw-checkline input { accent-color: var(--gw-accent); width: 16px; height: 16px; }

.ghw-submit {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--gw-charcoal); color: #fff; border: none; border-radius: 10px;
  padding: 16px; font-size: 16px; font-weight: 600; font-family: var(--gw-sans);
  cursor: pointer; transition: background 0.15s ease, transform 0.15s ease;
}
.ghw-submit:hover { background: var(--gw-accent-dark); transform: translateY(-1px); }
.ghw-submit:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.ghw-form-note { text-align: center; font-size: 12.5px; color: var(--gw-ink-soft); margin: 12px 0 0; }

/* ---------- OUTPUT PANEL ---------- */
.ghw-output {
  position: sticky; top: 20px;
  background: var(--gw-panel); border: 1px solid var(--gw-line); border-radius: 16px;
  padding: 24px; min-height: 420px;
  display: flex; flex-direction: column;
  box-shadow: 0 22px 50px -28px rgba(36,31,26,0.34);
}
.ghw-output-placeholder, .ghw-output-loading {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; color: var(--gw-ink-soft); text-align: center; padding: 60px 20px;
}
.ghw-output-placeholder i { font-size: 30px; color: var(--gw-accent); }
.ghw-spinner {
  width: 30px; height: 30px; border-radius: 50%;
  border: 3px solid var(--gw-line); border-top-color: var(--gw-accent);
  animation: ghw-spin 0.8s linear infinite;
}
@keyframes ghw-spin { to { transform: rotate(360deg); } }

.ghw-error { background: var(--gw-high-bg); color: var(--gw-high); border-radius: 10px; padding: 14px 16px; font-size: 14px; }

/* ---------- AI TELL CARD ---------- */
.ghw-tellcard {
  border: 1.5px dashed var(--gw-line); border-radius: 12px; padding: 14px 16px; margin-bottom: 16px;
}
.ghw-tellcard-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.ghw-tellcard-label {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--gw-mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--gw-ink-soft);
}
.ghw-risk-chip {
  display: inline-block; font-family: var(--gw-mono); font-size: 11.5px;
  padding: 4px 11px; border-radius: 999px; font-weight: 600;
}
.ghw-risk-low    { background: var(--gw-low-bg);    color: var(--gw-low); }
.ghw-risk-medium { background: var(--gw-medium-bg); color: var(--gw-medium); }
.ghw-risk-high   { background: var(--gw-high-bg);   color: var(--gw-high); }
.ghw-tellcard-note { margin: 0; font-size: 13px; color: var(--gw-ink-soft); }

.ghw-segmented { display: flex; gap: 6px; margin-bottom: 14px; background: var(--gw-bg); border-radius: 10px; padding: 4px; }
.ghw-seg {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
  border: none; background: transparent; padding: 10px 12px; border-radius: 7px;
  font-family: var(--gw-sans); font-size: 13.5px; font-weight: 700; color: var(--gw-ink-soft); cursor: pointer;
}
.ghw-seg.active { background: var(--gw-panel); color: var(--gw-accent-dark); box-shadow: 0 2px 10px rgba(36,31,26,0.1); }

.ghw-seg-panel { display: none; }
.ghw-seg-panel.active { display: block; }

/* ---------- MANUSCRIPT PAGE ---------- */
.ghw-manuscript { border: 1px solid var(--gw-line); border-radius: 12px; overflow: hidden; }
.ghw-manuscript-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px; background: var(--gw-charcoal); color: rgba(255,255,255,0.85);
  font-family: var(--gw-mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.06em;
}
.ghw-manuscript-title {
  font-size: 20px; padding: 20px 22px 0; margin: 0; color: var(--gw-charcoal);
}
.ghw-manuscript-body { padding: 14px 22px 20px; font-size: 15px; line-height: 1.75; color: var(--gw-ink); max-height: 440px; overflow-y: auto; }
.ghw-manuscript-body h3 { font-size: 16.5px; margin: 18px 0 8px; }
.ghw-manuscript-body h3:first-child { margin-top: 0; }
.ghw-manuscript-body ul { padding-left: 20px; margin: 10px 0; }
.ghw-manuscript-body li { margin-bottom: 6px; }
.ghw-editornote {
  margin: 0; padding: 14px 22px; font-size: 13.5px; color: var(--gw-accent-dark);
  background: var(--gw-accent-soft); border-top: 1px solid var(--gw-line);
}

.ghw-plain {
  font-family: var(--gw-mono); font-size: 13px; line-height: 1.7;
  white-space: pre-wrap; background: var(--gw-bg); border: 1px solid var(--gw-line);
  border-radius: 12px; padding: 18px; max-height: 480px; overflow-y: auto; margin: 0;
}

.ghw-output-actions {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--gw-line);
}
.ghw-meta { font-family: var(--gw-mono); font-size: 12px; color: var(--gw-ink-soft); margin-right: auto; }
.ghw-action-btn {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--gw-line); background: var(--gw-bg); color: var(--gw-charcoal);
  border-radius: 8px; padding: 9px 14px; font-size: 13px; font-family: var(--gw-sans); font-weight: 600;
  cursor: pointer; transition: border-color 0.15s ease;
}
.ghw-action-btn:hover { border-color: var(--gw-accent); color: var(--gw-accent-dark); }

/* ---------- EDITORIAL ---------- */
.ghw-editorial { margin-top: 88px; }
.ghw-editorial-intro { max-width: 74ch; margin-bottom: 42px; }
.ghw-editorial-intro h2 { font-size: 27px; margin-bottom: 14px; }
.ghw-editorial-intro p { font-size: 15.5px; }

.ghw-beforeafter h2 { font-size: 22px; margin-bottom: 20px; }
.ghw-ba-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ghw-ba-col { border-radius: 12px; padding: 20px 22px; display: flex; flex-direction: column; gap: 10px; }
.ghw-ba-rough { background: var(--gw-panel); border: 1.5px dashed var(--gw-line); }
.ghw-ba-draft { background: var(--gw-charcoal); }
.ghw-ba-label { font-family: var(--gw-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gw-ink-soft); }
.ghw-ba-draft .ghw-ba-label { color: rgba(255,255,255,0.55); }
.ghw-ba-rough p { font-size: 14px; color: var(--gw-ink-soft); margin: 0; }
.ghw-ba-draft p { font-family: var(--gw-display); font-size: 15.5px; line-height: 1.65; color: rgba(255,255,255,0.92); margin: 0; }

/* ---------- ABOUT / BENEFITS ---------- */
.ghw-about { margin-top: 88px; }
.ghw-about-intro { max-width: 76ch; margin-bottom: 30px; }
.ghw-about-intro h2 { font-size: 27px; margin-bottom: 14px; }
.ghw-about-intro p { font-size: 15.5px; }

.ghw-about-block { margin-bottom: 46px; }
.ghw-about-block h3 { font-size: 20px; margin: 0 0 16px; display: flex; align-items: center; gap: 10px; }
.ghw-about-block h3 i {
  font-size: 14px; color: var(--gw-accent-dark); background: var(--gw-accent-soft);
  width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center;
}

.ghw-benefit-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.ghw-benefit-card {
  display: flex; gap: 14px;
  background: var(--gw-panel); border: 1px solid var(--gw-line); border-radius: 12px; padding: 20px;
}
.ghw-benefit-card i {
  flex: none; font-size: 15px; color: var(--gw-sage); background: var(--gw-sage-soft);
  width: 38px; height: 38px; border-radius: 9px; display: flex; align-items: center; justify-content: center;
}
.ghw-benefit-card h4 { font-family: var(--gw-sans); font-size: 14.5px; font-weight: 700; color: var(--gw-charcoal); margin: 0 0 6px; }
.ghw-benefit-card p { font-size: 13.5px; margin: 0; }

.ghw-formula-intro { font-size: 14.5px; margin-bottom: 16px; }
.ghw-structure-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ghw-structure-list li {
  background: var(--gw-panel); border: 1px solid var(--gw-line); border-radius: 10px;
  padding: 14px 16px; display: flex; gap: 14px; align-items: flex-start;
  font-size: 14px; color: var(--gw-ink-soft);
}
.ghw-structure-list strong { color: var(--gw-charcoal); font-family: var(--gw-sans); }
.ghw-structure-num {
  flex: none; font-family: var(--gw-mono); font-weight: 700; font-size: 12px;
  color: var(--gw-accent-dark); background: var(--gw-accent-soft);
  width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
}

.ghw-relevance-banner {
  margin-top: 4px; display: flex; align-items: center; gap: 16px;
  background: var(--gw-sage-soft); border: 1px solid var(--gw-sage); border-radius: 12px;
  padding: 20px 24px;
}
.ghw-relevance-banner i { font-size: 22px; color: var(--gw-sage); flex: none; }
.ghw-relevance-banner p { margin: 0; font-size: 14.5px; color: var(--gw-charcoal); }

/* ---------- PROMPT EXAMPLES ---------- */
.ghw-prompts { margin-top: 88px; }
.ghw-prompts-intro { max-width: 76ch; margin-bottom: 30px; }
.ghw-prompts-intro h2 { font-size: 27px; margin: 16px 0 14px; }
.ghw-prompts-intro p { font-size: 15.5px; }

.ghw-prompt-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.ghw-prompt-card {
  background: var(--gw-charcoal); border-radius: 14px; padding: 20px 22px;
  display: flex; flex-direction: column; gap: 12px;
}
.ghw-prompt-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ghw-prompt-label {
  font-family: var(--gw-mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--gw-accent);
}
.ghw-prompt-copy {
  display: inline-flex; align-items: center; gap: 6px;
  border: none; background: rgba(255,255,255,0.08); color: #fff;
  border-radius: 999px; padding: 6px 12px; font-size: 12px; font-family: var(--gw-sans); font-weight: 600;
  cursor: pointer; transition: background 0.15s ease;
}
.ghw-prompt-copy:hover { background: rgba(255,255,255,0.16); }
.ghw-prompt-text { font-family: var(--gw-mono); font-size: 13px; line-height: 1.65; color: rgba(255,255,255,0.88); margin: 0; }

/* ---------- FAQ ---------- */
.ghw-faq { margin-top: 74px; }
.ghw-faq h2 { font-size: 24px; margin-bottom: 20px; }
.ghw-faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ghw-faq-item { background: var(--gw-panel); border: 1px solid var(--gw-line); border-radius: 12px; padding: 17px 19px; }
.ghw-faq-item summary {
  font-weight: 700; font-family: var(--gw-sans); font-size: 14.5px; color: var(--gw-charcoal);
  cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.ghw-faq-item summary::-webkit-details-marker { display: none; }
.ghw-faq-item summary::after {
  content: '\f078'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 12px;
  color: var(--gw-accent); transition: transform 0.15s ease; flex: none;
}
.ghw-faq-item[open] summary::after { transform: rotate(180deg); }
.ghw-faq-item p { font-size: 13.5px; margin: 10px 0 0; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 980px) {
  .ghw-tool { grid-template-columns: 1fr; }
  .ghw-output { position: static; }
  .ghw-faq-grid { grid-template-columns: 1fr; }
  .ghw-ba-row { grid-template-columns: 1fr; }
  .ghw-benefit-grid { grid-template-columns: 1fr; }
  .ghw-prompt-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .ghw-h1 { font-size: 29px; }
  .ghw-field-pair, .ghw-field-pair.three { grid-template-columns: 1fr; }
}