.how-shell { max-width: 1440px; }

.brand-copy { display: grid; }
.brand-copy small { margin-top: 2px; color: #697064; font-family: "Libre Baskerville", serif; font-size: 8px; line-height: 1.25; }
.nav-links a { position: relative; }
.nav-links a.active::after { position: absolute; right: 0; bottom: -26px; left: 0; height: 1px; background: #854a42; content: ""; }

.how-hero {
  display: grid;
  min-height: 315px;
  padding: 36px 1vw 12px;
  grid-template-columns: 1fr 1.45fr;
  align-items: center;
  gap: 34px;
}

.how-intro { position: relative; z-index: 1; }
.how-kicker { margin: 0 0 10px; color: #854a42; font-size: 11px; font-weight: 700; letter-spacing: .14em; }
.how-intro h1 { margin: 0 0 10px; color: #173d30; font-family: "Libre Baskerville", serif; font-size: clamp(34px, 2.72vw, 39px); font-weight: 400; line-height: 1.12; letter-spacing: -.035em; }
.how-intro > p:not(.how-kicker) { max-width: 490px; margin: 0 0 15px; color: #55594d; font-family: "Libre Baskerville", serif; font-size: 12px; line-height: 1.52; }
.how-button { display: inline-flex; align-items: center; gap: 12px; padding: 11px 17px; color: #f6ead3; background: #173d30; border: 1px solid #c49a5d; border-radius: 4px; box-shadow: 0 0 0 2px rgba(23,61,48,.16); font-family: "Libre Baskerville", serif; font-size: 11px; font-weight: 700; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }
.how-button span { color: #c49a5d; }
.how-button:hover, .how-button:focus-visible { box-shadow: 0 8px 20px rgba(22,43,33,.18); transform: translateY(-2px); }
.how-hero-art { display: block; width: 106%; max-height: 275px; margin-left: -3%; object-fit: contain; filter: drop-shadow(0 12px 14px rgba(64,46,25,.11)); }

.how-steps { padding-bottom: 14px; }
.how-divider { display: flex; align-items: center; gap: 8px; color: #ba8d4e; }
.how-divider span { height: 1px; flex: 1; background: #c7a76e; }
.how-divider b { font-family: Georgia, serif; font-size: 22px; font-weight: 400; }
.how-steps > h2 { margin: -3px 0 1px; color: #173d30; font-family: "Libre Baskerville", serif; font-size: 22px; font-weight: 400; text-align: center; }
.steps-grid { display: grid; padding: 0 4px; grid-template-columns: 1fr 36px 1fr 36px 1fr 36px 1fr; align-items: center; }
.step-card { position: relative; min-height: 205px; padding: 8px 12px 10px; overflow: hidden; background: rgba(255,250,240,.24); border: 1px solid #c8a46d; border-radius: 10px; text-align: center; }
.step-number { position: absolute; z-index: 2; top: 10px; left: 12px; display: grid; width: 31px; height: 31px; place-items: center; color: #f4e4c6; background: #173d30; border: 1px solid #c79a58; border-radius: 50%; box-shadow: 0 0 0 3px rgba(23,61,48,.08); font-family: "Libre Baskerville", serif; font-size: 16px; }
.step-card img { display: block; width: 100%; height: 112px; margin: 0 auto -1px; object-fit: contain; filter: sepia(.06) saturate(.9); }
.step-card:nth-of-type(4) img { transform: scale(1.13); }
.step-card h3 { margin: 0 0 3px; color: #173d30; font-family: "Libre Baskerville", serif; font-size: 13px; line-height: 1.2; }
.step-card p { max-width: 220px; margin: 0 auto; color: #54584b; font-family: "Libre Baskerville", serif; font-size: 9px; line-height: 1.4; }
.step-arrow { color: #b58441; font-size: 27px; text-align: center; }

.platform-band { color: #f5ead6; background: #103d30; border-top: 1px solid #c39c60; border-bottom: 1px solid #c39c60; }
.platform-band::before, .platform-band::after { position: absolute; bottom: 8px; color: #c39c60; content: "❧"; font-family: Georgia, serif; font-size: 104px; opacity: .15; }
.platform-band::before { left: 18px; transform: rotate(18deg); }
.platform-band::after { right: 18px; transform: scaleX(-1) rotate(18deg); }
.platform-inner { position: relative; z-index: 1; display: grid; width: min(1200px, calc(100% - 48px)); min-height: 270px; margin: 0 auto; padding: 22px 0; grid-template-columns: .75fr 1.5fr; align-items: center; gap: 34px; }
.platform-copy h2 { margin: 0 0 14px; font-family: "Libre Baskerville", serif; font-size: 24px; font-weight: 400; line-height: 1.2; }
.platform-copy ul { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.platform-copy li { display: grid; grid-template-columns: 44px 1fr; align-items: start; gap: 11px; }
.platform-icon { display: grid; width: 44px; height: 44px; place-items: center; }
.platform-icon img { display: block; width: 42px; height: 42px; object-fit: contain; }
.platform-icon svg { width: 40px; height: 40px; fill: none; stroke: #cfaa5f; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.platform-copy strong { display: block; margin-bottom: 3px; font-family: "Libre Baskerville", serif; font-size: 14px; }
.platform-copy p { margin: 0; color: #e3d7c1; font-family: "Libre Baskerville", serif; font-size: 9px; line-height: 1.45; }

.product-preview { overflow: hidden; min-height: 228px; color: #1b3529; background: #f4ecde; border: 3px solid #c6a566; border-radius: 8px; box-shadow: 0 14px 28px rgba(0,0,0,.24); font-family: "DM Sans", sans-serif; }
.preview-top { display: grid; height: 27px; padding: 0 10px; grid-template-columns: 1fr 180px 20px; align-items: center; color: #f2e4c8; background: #164635; font-size: 9px; }
.preview-top span { padding: 4px 8px; border: 1px solid rgba(232,211,170,.48); border-radius: 3px; font-size: 7px; }
.preview-top i { text-align: right; }
.preview-body { display: grid; min-height: 198px; grid-template-columns: 80px 1fr 155px; }
.preview-body > aside:first-child { display: grid; align-content: start; gap: 7px; padding: 12px 9px; border-right: 1px solid #cab894; font-size: 7px; }
.preview-body > aside:first-child b { color: #9b7140; }
.tree-preview { position: relative; padding: 11px 13px 8px; text-align: center; }
.preview-heading { margin-bottom: 12px; font-family: "Libre Baskerville", serif; font-size: 9px; text-align: left; }
.tree-level { display: flex; position: relative; z-index: 1; justify-content: center; gap: 7px; }
.tree-level article { display: grid; min-width: 68px; min-height: 28px; padding: 4px; place-items: center; background: #fffaf0; border: 1px solid #cfbd9a; border-radius: 3px; font-size: 6px; }
.tree-level i { display: grid; width: 14px; height: 14px; margin-bottom: 2px; place-items: center; color: #f7ecd7; background: #8f7252; border-radius: 50%; font-size: 5px; font-style: normal; }
.tree-level small { font-size: 5px; color: #777; }
.tree-connector { width: 46%; height: 16px; margin: -1px auto; border-right: 1px solid #aa8c5c; border-bottom: 1px solid #aa8c5c; border-left: 1px solid #aa8c5c; }
.tree-level.children { gap: 4px; }
.tree-level.children article { min-width: 53px; }
.tree-level.grandchildren { margin-top: 13px; gap: 5px; }
.tree-level.grandchildren article { min-width: 50px; min-height: 22px; }
.timeline-preview { display: grid; align-content: start; gap: 8px; padding: 11px 10px; background: rgba(255,250,240,.44); border-left: 1px solid #cab894; font-size: 6px; }
.timeline-preview b { font-family: "Libre Baskerville", serif; font-size: 9px; }
.timeline-preview span { display: grid; padding-left: 8px; border-left: 1px solid #b39055; }
.timeline-preview em { font-size: 6px; font-style: normal; font-weight: 700; }
.timeline-preview a { margin-top: 3px; padding: 6px; color: #f5ead6; background: #174535; border-radius: 2px; font-size: 7px; font-weight: 700; text-align: center; text-decoration: none; }

.control-strip { padding: 7px 3vw 10px; }
.control-strip > h2 { display: flex; align-items: center; gap: 14px; margin: 0 0 1px; color: #173d30; font-family: "Libre Baskerville", serif; font-size: 21px; font-weight: 400; text-align: center; }
.control-strip > h2::before, .control-strip > h2::after { height: 1px; flex: 1; background: #c8a874; content: ""; }
.control-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.control-grid article { display: grid; min-height: 75px; padding: 1px 30px; grid-template-columns: 68px 1fr; align-items: center; gap: 13px; }
.control-grid article + article { border-left: 1px solid #bcae92; }
.control-grid img { width: 66px; height: 66px; object-fit: contain; }
.control-grid h3 { margin: 0 0 3px; color: #173d30; font-family: "Libre Baskerville", serif; font-size: 12px; }
.control-grid p { margin: 0; color: #55594c; font-family: "Libre Baskerville", serif; font-size: 8px; line-height: 1.45; }

.how-cta { display: grid; min-height: 78px; padding: 12px max(8vw, 32px); grid-template-columns: 1fr 1.2fr minmax(310px, .85fr); align-items: center; gap: 26px; color: #f5ecd8; background: #315346; border-top: 1px solid #c49a5d; border-bottom: 1px solid #c49a5d; }
.how-cta h2 { margin: 0; font-family: "Libre Baskerville", serif; font-size: 24px; font-weight: 400; }
.how-cta p { margin: 0; padding-left: 25px; border-left: 1px solid rgba(212,184,128,.55); font-family: "Libre Baskerville", serif; font-size: 10px; line-height: 1.5; }
.how-cta > a { display: flex; padding: 12px 20px; justify-content: center; gap: 18px; color: #173d30; background: #f5ecd8; border: 1px solid #c49a5d; border-radius: 4px; box-shadow: 0 0 0 3px rgba(245,236,216,.12); font-family: "Libre Baskerville", serif; font-size: 12px; font-weight: 700; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }
.how-cta > a:hover, .how-cta > a:focus-visible { box-shadow: 0 8px 20px rgba(7,26,20,.24); transform: translateY(-2px); }

@media (max-width: 980px) {
  .how-hero { grid-template-columns: 1fr; padding-top: 44px; text-align: center; }
  .how-intro > p:not(.how-kicker) { margin-right: auto; margin-left: auto; }
  .how-hero-art { width: 100%; max-height: 250px; margin: 0; }
  .steps-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .step-arrow { display: none; }
  .platform-inner { grid-template-columns: 1fr; }
  .platform-copy { max-width: 620px; margin: 0 auto; }
  .how-cta { grid-template-columns: 1fr 1fr; }
  .how-cta > a { grid-column: span 2; width: min(100%, 450px); margin: 0 auto; }
}

@media (max-width: 680px) {
  .how-hero { padding-right: 0; padding-left: 0; }
  .how-intro h1 { font-size: 37px; }
  .steps-grid { grid-template-columns: 1fr; }
  .step-card { min-height: 220px; }
  .product-preview { overflow-x: auto; }
  .preview-body { min-width: 660px; }
  .control-grid { grid-template-columns: 1fr; }
  .control-grid article + article { border-top: 1px solid #bcae92; border-left: 0; }
  .how-cta { grid-template-columns: 1fr; padding-top: 26px; padding-bottom: 26px; text-align: center; }
  .how-cta p { padding: 0; border-left: 0; }
  .how-cta > a { grid-column: auto; }
}