:root {
  color-scheme: light;
  --cf-paper: #f4f6f1;
  --cf-paper-deep: #e8ece5;
  --cf-surface: #ffffff;
  --cf-surface-muted: #f0f3ee;
  --cf-ink: #14231f;
  --cf-ink-soft: #455952;
  --cf-green: #163d35;
  --cf-green-strong: #0f302a;
  --cf-green-soft: #dce8e1;
  --cf-copper: #c8753d;
  --cf-copper-dark: #8c4726;
  --cf-blueprint: #557169;
  --cf-line: #cbd5ce;
  --cf-line-strong: #9daea5;
  --cf-danger: #a63f35;
  --cf-warning: #9a6500;
  --cf-success: #176247;
  --cf-radius-sm: 6px;
  --cf-radius: 10px;
  --cf-radius-lg: 18px;
  --cf-shadow: 0 18px 50px rgba(22, 61, 53, 0.12);
  --cf-font: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --cf-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--cf-paper); }
body {
  margin: 0;
  background:
    linear-gradient(rgba(85, 113, 105, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(85, 113, 105, 0.055) 1px, transparent 1px),
    var(--cf-paper);
  background-size: 24px 24px;
  color: var(--cf-ink);
  font-family: var(--cf-font);
  line-height: 1.55;
  text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; }
button, a, input, select, textarea, summary { scroll-margin: 96px 0 64px; }
:focus-visible { outline: 3px solid var(--cf-copper); outline-offset: 3px; }

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 10px;
  left: 10px;
  transform: translateY(-160%);
  border-radius: var(--cf-radius-sm);
  background: var(--cf-ink);
  padding: 10px 14px;
  color: white;
  font-weight: 750;
  text-decoration: none;
}
.skip-link:focus { transform: translateY(0); }

.public-header {
  position: sticky;
  z-index: 50;
  top: 0;
  border-bottom: 1px solid rgba(157, 174, 165, 0.72);
  background: rgba(244, 246, 241, 0.94);
  backdrop-filter: blur(16px);
}
.public-header-inner,
.public-container,
.public-footer-inner {
  width: min(100% - 40px, 1240px);
  max-width: 1240px;
  margin-inline: auto;
}
.public-header-inner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  min-height: 72px;
  gap: 28px;
}
.public-brand { display: inline-flex; width: 178px; min-height: 44px; align-items: center; }
.public-brand img { display: block; width: 100%; }
.public-nav { display: flex; justify-content: center; gap: 4px; }
.public-nav a,
.public-nav-dropdown summary,
.public-header-actions a,
.menu-toggle {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: var(--cf-radius-sm);
  padding: 7px 11px;
  color: var(--cf-ink-soft);
  font-size: 14px;
  font-weight: 680;
  text-decoration: none;
}
.public-nav a:hover,
.public-nav a[aria-current="page"],
.public-nav-dropdown summary:hover,
.public-nav-dropdown summary[aria-current="page"] { background: var(--cf-green-soft); color: var(--cf-green); }
.public-nav-dropdown { position: relative; }
.public-nav-dropdown::after { position: absolute; top: 100%; left: 0; width: 100%; height: 8px; content: ""; }
.public-nav-dropdown summary { list-style: none; cursor: pointer; }
.public-nav-dropdown summary::-webkit-details-marker { display: none; }
.public-nav-dropdown summary::after { width: 7px; height: 7px; margin: -4px 1px 0 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; content: ""; transform: rotate(45deg); transition: transform 160ms ease; }
.public-nav-dropdown[open] summary::after { margin-top: 3px; transform: rotate(225deg); }
.public-nav-dropdown-menu { position: absolute; z-index: 60; top: calc(100% + 8px); left: 0; width: 310px; display: none; grid-template-columns: 1fr; gap: 2px; border: 1px solid var(--cf-line); border-radius: var(--cf-radius); background: var(--cf-surface); padding: 8px; box-shadow: var(--cf-shadow); }
.public-nav-dropdown[open] .public-nav-dropdown-menu,
.public-nav-dropdown:hover .public-nav-dropdown-menu,
.public-nav-dropdown:focus-within .public-nav-dropdown-menu { display: grid; }
.public-nav-dropdown-menu a { min-height: 38px; justify-content: flex-start; }
.public-nav-dropdown-menu a:first-child { margin-bottom: 4px; border-bottom: 1px solid var(--cf-line); border-radius: 0; }
.public-header-actions { display: flex; align-items: center; gap: 8px; }
.public-header-actions .header-cta { background: var(--cf-green); color: white; }
.menu-toggle { display: none; border: 1px solid var(--cf-line); background: var(--cf-surface); }

.public-main { overflow: hidden; }
.public-section { position: relative; padding: 96px 0; }
.public-section.compact { padding: 68px 0; }
.section-tint { border-block: 1px solid var(--cf-line); background: rgba(232, 236, 229, 0.75); }
.section-dark { background: var(--cf-green); color: #f8fbf8; }
.section-copper { background: #f0e2d5; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--cf-copper-dark);
  font-family: var(--cf-mono);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.eyebrow::before { width: 24px; height: 1px; background: currentColor; content: ""; }
.section-heading { display: grid; max-width: 760px; gap: 14px; margin-bottom: 42px; }
.section-heading h2,
.hero-copy h1,
.method-hero-copy h1 {
  margin: 0;
  color: inherit;
  font-size: clamp(38px, 6vw, 72px);
  font-weight: 760;
  letter-spacing: -0.045em;
  line-height: 0.98;
}
.section-heading h2 { font-size: clamp(30px, 4vw, 50px); line-height: 1.04; }
.section-heading p,
.hero-copy > p,
.method-hero-copy > p { margin: 0; color: var(--cf-ink-soft); font-size: clamp(17px, 2vw, 21px); }
.section-dark .section-heading p,
.section-dark .method-hero-copy > p { color: #cfddd6; }

.button-row { display: flex; flex-wrap: wrap; gap: 10px; }
.button {
  display: inline-flex;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid var(--cf-green);
  border-radius: var(--cf-radius-sm);
  padding: 10px 16px;
  background: var(--cf-green);
  color: white;
  font-weight: 740;
  text-decoration: none;
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}
.button:hover { transform: translateY(-2px); background: var(--cf-green-strong); }
.button.secondary { border-color: var(--cf-line-strong); background: transparent; color: var(--cf-green); }
.section-dark .button.secondary { border-color: #769086; color: white; }
.button.copper { border-color: var(--cf-copper); background: var(--cf-copper); color: #1d130d; }

.hero {
  min-height: calc(100svh - 72px);
  display: grid;
  align-items: center;
  padding: 72px 0;
}
.hero-grid,
.method-hero-grid { display: grid; grid-template-columns: minmax(0, 0.86fr) minmax(420px, 1.14fr); align-items: center; gap: 44px; }
.hero-grid--copy-only,
.method-hero-grid--copy-only { grid-template-columns: minmax(0, 900px); }
.hero-copy,
.method-hero-copy { display: grid; gap: 24px; }
.hero-note { display: flex; flex-wrap: wrap; gap: 10px 18px; color: var(--cf-ink-soft); font-size: 13px; }
.hero-note span { display: inline-flex; align-items: center; gap: 7px; }
.hero-note span::before { width: 7px; height: 7px; border: 1px solid var(--cf-copper); border-radius: 50%; content: ""; }
.hero-visual {
  position: relative;
  min-height: 580px;
  display: grid;
  place-items: center;
}
.hero-visual::before {
  position: absolute;
  inset: 12% 7%;
  border: 1px solid var(--cf-line);
  background: rgba(255, 255, 255, 0.54);
  box-shadow: var(--cf-shadow);
  content: "";
  transform: rotate(-2deg);
}
.hero-visual img { position: relative; z-index: 2; width: 100%; filter: drop-shadow(0 24px 32px rgba(22, 61, 53, 0.12)); }

.method-grid,
.feature-grid,
.guide-grid,
.equipment-grid,
.layer-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.method-card,
.feature-card,
.guide-card,
.equipment-card,
.layer-card-new,
.content-card {
  position: relative;
  display: grid;
  align-content: start;
  gap: 13px;
  min-height: 220px;
  border: 1px solid var(--cf-line);
  border-radius: var(--cf-radius);
  background: rgba(255, 255, 255, 0.88);
  padding: 23px;
}
.method-card { min-height: 300px; overflow: hidden; text-decoration: none; }
.method-card::after { position: absolute; right: -22px; bottom: -22px; width: 90px; height: 90px; border: 18px solid var(--cf-green-soft); border-radius: 50%; content: ""; }
.method-card:hover { border-color: var(--cf-copper); transform: translateY(-3px); box-shadow: 0 12px 32px rgba(22, 61, 53, 0.09); }
.card-index { color: var(--cf-copper-dark); font-family: var(--cf-mono); font-size: 12px; }
.method-card h3,
.feature-card h3,
.guide-card h3,
.equipment-card h3,
.content-card h3 { margin: 0; font-size: 23px; line-height: 1.14; }
.method-card p,
.feature-card p,
.guide-card p,
.equipment-card p,
.content-card p { margin: 0; color: var(--cf-ink-soft); }
.card-output { margin-top: auto; color: var(--cf-green); font-family: var(--cf-mono); font-size: 12px; font-weight: 750; }
.method-card--equipment { min-height: 0; }
.method-card--equipment::after { display: none; }
.method-card-media { display: grid; width: auto; height: auto; aspect-ratio: 1; place-items: center; overflow: hidden; border-bottom: 1px solid var(--cf-line); background: #faf8f4; margin: -23px -23px 4px; padding: 0; }
.method-card-media img { width: 100%; height: 100%; object-fit: contain; }
.equipment-card--illustrated { min-height: 390px; background: #faf8f4; }
.equipment-card--illustrated > img { aspect-ratio: 1; width: min(100%, 260px); height: auto; justify-self: center; object-fit: contain; }

.process-list { display: grid; gap: 0; border-top: 1px solid var(--cf-line-strong); }
.process-step { display: grid; grid-template-columns: 76px 240px minmax(0, 1fr); gap: 22px; border-bottom: 1px solid var(--cf-line); padding: 26px 0; }
.process-step > span { color: var(--cf-copper-dark); font-family: var(--cf-mono); font-weight: 750; }
.process-step h3 { margin: 0; font-size: 22px; }
.process-step p { max-width: 720px; margin: 0; color: var(--cf-ink-soft); }

.layer-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.layer-card-new { min-height: 250px; padding: 12px; }
.layer-card-new img { aspect-ratio: 1; width: 100%; height: auto; object-fit: contain; }
.layer-card-new strong { display: block; padding: 0 8px 8px; text-align: center; font-size: 15px; }

.video-placeholder { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr); overflow: hidden; border: 1px solid #6b867b; border-radius: var(--cf-radius-lg); background: var(--cf-green); color: #f8fbf8; box-shadow: 0 20px 48px rgba(8, 35, 29, .16); }
.video-scene { position: relative; min-height: 360px; display: grid; place-content: center; justify-items: center; gap: 18px; overflow: hidden; background: radial-gradient(circle at 50% 45%, #28574c 0, #163d35 48%, #102e28 100%); }
.video-scene::before { position: absolute; inset: 28px; border: 1px solid rgba(255,255,255,.22); border-radius: calc(var(--cf-radius-lg) - 4px); content: ""; }
.video-scene::after { position: absolute; width: 240px; height: 160px; border: 1px dashed rgba(214,132,69,.62); content: ""; transform: rotate(-4deg); }
.video-play { position: relative; z-index: 2; display: grid; place-items: center; width: 72px; height: 72px; border: 1px solid rgba(255,255,255,.62); border-radius: 50%; background: rgba(255,255,255,.08); color: white; font-size: 22px; }
.video-scene-label { position: relative; z-index: 2; color: #fff; font-size: 14px; font-weight: 720; }
.video-copy { display: grid; align-content: center; gap: 16px; background: #163d35; padding: clamp(28px, 5vw, 52px); }
.video-copy .eyebrow { color: #e4a879; }
.video-copy h3 { margin: 0; color: #fff; font-size: clamp(27px, 3vw, 38px); line-height: 1.08; }
.video-copy p { margin: 0; color: #cfddd6; line-height: 1.65; }
.video-placeholder .button.secondary { border-color: #91a89e; color: #fff; }
.video-placeholder .button.secondary:hover { border-color: #fff; background: rgba(255,255,255,.08); color: #fff; }

.faq-list { display: grid; max-width: 920px; gap: 10px; }
.faq-list details { border: 1px solid var(--cf-line); border-radius: var(--cf-radius-sm); background: rgba(255,255,255,.86); }
.faq-list summary { min-height: 54px; padding: 15px 50px 15px 18px; cursor: pointer; font-weight: 720; }
.faq-list details p { margin: 0; border-top: 1px solid var(--cf-line); padding: 17px 18px; color: var(--cf-ink-soft); }
.guide-index { position: sticky; z-index: 12; top: 72px; display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; border: 1px solid var(--cf-line); background: rgba(244,246,241,.96); padding: 8px; }
.guide-index a { display: inline-flex; min-height: 38px; align-items: center; border-radius: var(--cf-radius-sm); padding: 6px 11px; color: var(--cf-green); font-weight: 700; text-decoration: none; }
.guide-index a:hover { background: var(--cf-green-soft); }
.guide-articles { display: grid; gap: 16px; }
.guide-articles .content-card { min-height: 0; }
.guide-articles ol { margin: 0; padding-left: 22px; color: var(--cf-ink-soft); }
.guide-articles li + li { margin-top: 8px; }
.guide-articles .content-card > a:not(.button) { color: var(--cf-green); font-weight: 720; }

.method-hero { padding: 88px 0 72px; }
.method-hero-grid { grid-template-columns: minmax(0, 1fr) 430px; }
.method-hero-grid.method-hero-grid--copy-only { grid-template-columns: minmax(0, 900px); }
.method-diagram { min-height: 420px; display: grid; align-content: center; gap: 14px; border: 1px solid var(--cf-line-strong); background: var(--cf-surface); padding: 26px; box-shadow: var(--cf-shadow); }
.method-equipment-panel { overflow: hidden; border: 1px solid var(--cf-line-strong); background: var(--cf-surface); box-shadow: var(--cf-shadow); }
.method-equipment-hero { display: grid; grid-template-columns: 170px minmax(0, 1fr); align-items: center; gap: 12px; margin: 0; border-bottom: 1px solid var(--cf-line); background: linear-gradient(145deg, #eef1e9, #fff); padding: 10px 20px 10px 12px; }
.method-equipment-hero img { aspect-ratio: 1; width: 170px; height: 170px; object-fit: contain; }
.method-equipment-hero figcaption { color: var(--cf-green); font-size: 20px; font-weight: 760; }
.method-equipment-panel .method-diagram { min-height: 0; border: 0; background: transparent; padding: 18px 24px 22px; box-shadow: none; }
.method-equipment-panel .diagram-row span { width: 40px; height: 40px; }
.method-equipment-panel .diagram-row { grid-template-columns: 44px minmax(0, 1fr); gap: 10px; }
.method-equipment-panel .diagram-row div { padding: 5px 0 5px 12px; }
.guide-card--equipment { grid-template-columns: 74px minmax(0, 1fr); align-items: center; min-height: 142px; text-decoration: none; }
.guide-card--equipment img { aspect-ratio: 1; width: 74px; height: 74px; object-fit: contain; }
.guide-card--equipment > div { display: grid; gap: 8px; }
.diagram-row { display: grid; grid-template-columns: 58px minmax(0,1fr); align-items: center; gap: 15px; }
.diagram-row span { display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid var(--cf-copper); border-radius: 50%; color: var(--cf-copper-dark); font-family: var(--cf-mono); }
.diagram-row div { border-left: 2px solid var(--cf-green-soft); padding: 8px 0 8px 16px; }
.diagram-row strong, .diagram-row small { display: block; }
.diagram-row small { color: var(--cf-ink-soft); }
.content-columns { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 36px; }
.prose { max-width: 820px; }
.prose h2 { margin: 0 0 18px; font-size: clamp(28px,4vw,44px); line-height: 1.08; }
.prose h3 { margin: 34px 0 10px; font-size: 23px; }
.prose p, .prose li { color: var(--cf-ink-soft); }
.prose li + li { margin-top: 8px; }
.side-note { align-self: start; border-left: 3px solid var(--cf-copper); background: var(--cf-surface); padding: 20px; }
.side-note strong { display: block; margin-bottom: 8px; }
.side-note p { margin: 0; color: var(--cf-ink-soft); }
.equipment-explainer { margin-top: 34px; }

.public-footer { border-top: 1px solid #385d54; background: #102e28; color: #dbe6e0; }
.public-footer-inner { display: grid; grid-template-columns: minmax(230px, .78fr) minmax(0, 1.22fr); gap: clamp(36px, 7vw, 88px); padding-block: 52px 26px; }
.public-footer-brand { display: grid; align-content: start; max-width: 360px; gap: 18px; }
.public-footer-brand img { width: 190px; filter: none; }
.public-footer-brand p { margin: 0; color: #aebfb7; }
.public-footer-nav-groups { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(24px, 4vw, 48px); }
.public-footer-nav-groups nav { display: grid; align-content: start; gap: 6px; }
.public-footer-nav-groups strong { margin-bottom: 6px; color: #fff; font-size: 13px; letter-spacing: .02em; }
.public-footer a { min-height: 30px; color: #c3d2cb; font-size: 13px; text-decoration: none; }
.public-footer a:hover { color: #fff; }
.public-footer-meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 16px; border-top: 1px solid rgba(255,255,255,.16); padding-top: 20px; color: #aebfb7; font-size: 13px; }
.public-footer-meta span + span::before { content: "·"; margin-right: 16px; }

.legal-page { padding: 72px 0 96px; }
.legal-page-header { max-width: 860px; margin-bottom: 42px; }
.legal-page-header h1 { margin: 10px 0 16px; font-size: clamp(38px, 6vw, 68px); line-height: .98; letter-spacing: -.04em; }
.legal-page-header p { color: var(--cf-ink-soft); font-size: 18px; line-height: 1.65; }
.legal-grid { display: grid; grid-template-columns: minmax(0, 1fr) 280px; align-items: start; gap: 40px; }
.legal-content { display: grid; gap: 18px; }
.legal-section { border: 1px solid var(--cf-line); background: var(--cf-surface); padding: clamp(22px, 4vw, 36px); }
.legal-section h2 { margin: 0 0 14px; font-size: clamp(24px, 3vw, 32px); line-height: 1.1; }
.legal-section h3 { margin: 24px 0 8px; font-size: 19px; }
.legal-section p, .legal-section li { color: var(--cf-ink-soft); line-height: 1.65; }
.legal-section p:first-of-type { margin-top: 0; }
.legal-section p:last-child { margin-bottom: 0; }
.legal-section li + li { margin-top: 8px; }
.legal-aside { position: sticky; top: 96px; display: grid; gap: 8px; border-left: 3px solid var(--cf-copper); background: var(--cf-surface); padding: 20px; }
.legal-aside a { color: var(--cf-green); font-weight: 700; text-decoration: none; }
.legal-table { width: 100%; border-collapse: collapse; }
.legal-table th, .legal-table td { border-bottom: 1px solid var(--cf-line); padding: 12px 8px; text-align: left; vertical-align: top; }
.legal-table th { color: var(--cf-ink); }
.legal-table td { color: var(--cf-ink-soft); }

[data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity 550ms ease, transform 550ms ease; }
[data-reveal].is-visible { opacity: 1; transform: none; }
[data-parallax] { will-change: transform; }

@media (max-width: 980px) {
  .public-header-inner { grid-template-columns: auto auto; }
  .menu-toggle { display: inline-flex; justify-self: end; }
  .public-nav, .public-header-actions { display: none; grid-column: 1 / -1; justify-content: stretch; }
  .public-header[data-menu-open="true"] .public-nav,
  .public-header[data-menu-open="true"] .public-header-actions { display: grid; }
  .public-nav a, .public-header-actions a { justify-content: flex-start; }
  .public-nav-dropdown summary { justify-content: flex-start; }
  .public-nav-dropdown-menu { position: static; width: auto; margin: 0 0 8px 12px; border: 0; border-left: 1px solid var(--cf-line); border-radius: 0; background: transparent; padding: 4px 0 4px 8px; box-shadow: none; }
  .public-nav-dropdown:hover:not([open]) .public-nav-dropdown-menu { display: none; }
  .public-header-actions { padding-bottom: 14px; }
  .public-footer-inner { grid-template-columns: 1fr; }
  .public-footer-meta { grid-column: 1; }
  .hero-grid, .method-hero-grid, .video-placeholder, .content-columns { grid-template-columns: 1fr; }
  .legal-grid { grid-template-columns: 1fr; }
  .legal-aside { position: static; }
  .hero { min-height: auto; }
  .hero-visual { min-height: 450px; }
  .method-grid, .feature-grid, .guide-grid, .equipment-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .layer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .process-step { grid-template-columns: 54px minmax(0, 1fr); }
  .process-step p { grid-column: 2; }
}

@media (max-width: 620px) {
  .public-header-inner, .public-container, .public-footer-inner { width: min(100% - 28px, 1240px); }
  .public-brand { width: 148px; }
  .public-section { padding: 68px 0; }
  .hero { padding: 48px 0 60px; }
  .hero-grid { gap: 20px; }
  .hero-visual { min-height: 330px; }
  .video-scene { min-height: 280px; }
  .method-equipment-hero { grid-template-columns: 130px minmax(0, 1fr); }
  .method-equipment-hero img { width: 130px; height: 130px; }
  .method-grid, .feature-grid, .guide-grid, .equipment-grid { grid-template-columns: 1fr; }
  .layer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .process-step { grid-template-columns: 40px minmax(0, 1fr); gap: 12px; }
  .process-step h3 { font-size: 19px; }
  .button-row { display: grid; }
  .button { width: 100%; }
  .public-footer-inner { grid-template-columns: 1fr; }
  .public-footer-nav-groups { grid-template-columns: 1fr; }
  .public-footer-meta { grid-column: 1; display: grid; }
  .public-footer-meta span + span::before { content: none; }
  .legal-table, .legal-table tbody, .legal-table tr, .legal-table th, .legal-table td { display: block; }
  .legal-table tr { border-bottom: 1px solid var(--cf-line); padding: 10px 0; }
  .legal-table th, .legal-table td { border: 0; padding: 4px 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  [data-parallax] { transform: none !important; }
}

/* CIRCUFORGE_CANONICAL_METHOD_HERO_START */
.method-hero {
  overflow: hidden;
  padding: clamp(56px, 8vw, 96px) 0 clamp(48px, 7vw, 80px);
  background:
    radial-gradient(circle at 86% 8%, rgba(181, 113, 73, 0.14), transparent 34%),
    linear-gradient(180deg, #fbfcf8 0%, #f3f6f1 100%);
}
.method-hero .method-hero-grid {
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, 0.92fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.method-hero .method-hero-grid--copy-only {
  grid-template-columns: minmax(0, 900px);
}
.method-hero-copy {
  align-content: center;
}
.method-equipment-panel {
  overflow: hidden;
  border: 1px solid var(--cf-line);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 28px 70px rgba(22, 61, 53, 0.12);
}
.method-equipment-hero {
  display: grid;
  grid-template-columns: minmax(180px, 0.86fr) minmax(150px, 0.54fr);
  min-height: 250px;
  align-items: center;
  gap: 18px;
  margin: 0;
  padding: 24px 26px 18px 18px;
  border-bottom: 1px solid var(--cf-line);
  background:
    radial-gradient(circle at 35% 45%, rgba(181, 113, 73, 0.12), transparent 45%),
    linear-gradient(145deg, #eef3ed, #ffffff);
}
.method-equipment-hero img {
  width: min(100%, 260px);
  height: 230px;
  margin-inline: auto;
  object-fit: contain;
  filter: drop-shadow(0 20px 26px rgba(22, 61, 53, 0.13));
}
.method-equipment-hero figcaption {
  color: var(--cf-green);
  font-size: clamp(19px, 2.2vw, 27px);
  font-weight: 780;
  line-height: 1.12;
}
.method-equipment-panel .method-diagram {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.method-equipment-panel .diagram-row {
  padding-inline: 22px;
}
.public-section .guide-grid .method-card-image,
.public-section .guide-grid .equipment-card-image {
  width: 100%;
  max-height: 180px;
  object-fit: contain;
}
@media (max-width: 860px) {
  .method-hero .method-hero-grid {
    grid-template-columns: 1fr;
  }
  .method-equipment-panel {
    max-width: 620px;
  }
}
@media (max-width: 560px) {
  .method-equipment-hero {
    grid-template-columns: 120px minmax(0, 1fr);
    min-height: 170px;
    padding: 14px;
  }
  .method-equipment-hero img {
    width: 120px;
    height: 140px;
  }
}
/* CIRCUFORGE_CANONICAL_METHOD_HERO_END */