:root {
  --page: #e7e4d8;
  --paper: #fbfaf5;
  --ink: #303d39;
  --muted: #65716b;
  --line: #c9cabe;
  --green: #2b5c54;
  --green-dark: #234c47;
  --link: #315e68;
  --pale: #edf0e8;
  --cream: #f6f1e4;
}

* { box-sizing: border-box; }
html { scroll-behavior: auto; }
body {
  margin: 0;
  color: var(--ink);
  font: 16px/1.6 Arial, Helvetica, sans-serif;
  background: var(--page);
  background-image: repeating-linear-gradient(90deg, transparent 0, transparent 3px, rgba(255,255,255,.12) 3px, rgba(255,255,255,.12) 4px);
}
a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: #8b493c; }
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link { position: absolute; top: -50px; left: 12px; z-index: 10; padding: 5px 10px; background: white; }
.skip-link:focus { top: 8px; }
.site-shell {
  max-width: 1080px;
  margin: 22px auto 40px;
  background: var(--paper);
  border: 1px solid #aeb5aa;
  box-shadow: 0 0 0 4px rgba(255,255,255,.55), 0 10px 26px rgba(49,52,45,.13);
}
.site-header { background: #5d7770; border-bottom: 3px solid #374f4a; color: #fff; }
.header-table { width: 100%; border-collapse: collapse; }
.header-table td { padding: 20px 25px 18px; vertical-align: middle; }
.site-logo { color: #fff8e9; font: bold 33px Georgia, 'Times New Roman', serif; letter-spacing: -.5px; text-decoration: none; text-shadow: 1px 1px #344943; }
.site-logo:hover { color: #fff; }
.site-tagline { margin-top: 2px; color: #e6e9de; font: italic 14px Georgia, serif; }
.header-note { text-align: right; font-size: 12px; line-height: 1.45; color: #f4f2e5; }
.header-note span { opacity: .76; }
.top-nav {
  display: flex; flex-wrap: wrap; border-bottom: 1px solid #b6c0b5;
  background: linear-gradient(#f9f9f3, #e9eee6);
}
.top-nav a { display: block; padding: 9px 18px; border-right: 1px solid #bdc8be; font-size: 13px; font-weight: bold; text-decoration: none; color: #31594f; }
.top-nav a:hover { background: #e3ebe2; }
.breadcrumb { padding: 8px 18px; color: #747c72; background: #f6f4e9; border-bottom: 1px solid #deded1; font-size: 12px; }
.page-layout { width: 100%; border-collapse: collapse; table-layout: fixed; }
.page-layout > tbody > tr > td { vertical-align: top; }
.main-column { width: 76%; border-right: 1px solid #d4d4c8; }
.sidebar-column { width: 24%; background: #f3f2e9; }
.thread-toolbar {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 9px 18px; border-bottom: 1px solid #ccd3c8;
  background: #e8eee8; color: #53635a; font-size: 12px;
}
.thread-toolbar strong { color: #314c43; }
.thread-article { padding: 0 26px 28px; }
.post-byline { display: flex; align-items: center; gap: 10px; padding: 17px 0 14px; border-bottom: 1px dotted #c5c9bd; font-size: 13px; }
.post-byline strong, .post-byline small { display: block; }
.post-byline small { color: #7a8179; font-size: 11px; }
.post-avatar { width: 32px; height: 32px; border: 1px solid #8da396; background: #e3e8dc; color: #3c6255; text-align: center; line-height: 30px; font: bold 20px/30px Georgia, serif; }
.thread-section { padding: 24px 0 23px; border-bottom: 1px dotted #b9bcb0; scroll-margin-top: 16px; }
.thread-section p { margin: 0 0 13px; }
.thread-section p:last-child { margin-bottom: 0; }
.section-ribbon {
  display: inline-block; margin-bottom: 14px; padding: 3px 10px;
  border: 1px solid #c5cec1; background: #eaf0e8; color: #4e6658;
  font-size: 11px; line-height: 1.3; font-weight: bold; letter-spacing: .08em; text-transform: uppercase;
}
.section-title { margin: 0 0 18px; color: #2a4840; font: bold 27px/1.24 Georgia, 'Times New Roman', serif; }
.sub-title { margin: 21px 0 7px; color: #3e5c50; font: bold 19px/1.35 Georgia, 'Times New Roman', serif; }
.hero-figure { margin: 0 0 20px; padding: 5px; border: 1px solid #c8c8bb; background: #fff; }
.hero-figure img { width: 100%; }
.intro-copy > p { font-size: 17px; }
.intro-copy > p:first-of-type { font-weight: bold; color: #39594d; }
.intro-copy > p:last-child { font-weight: bold; }
.photo-pair { display: flex; align-items: stretch; gap: 10px; margin: 16px 0 20px; }
.photo-pair img { width: calc(50% - 5px); height: 260px; object-fit: cover; border: 5px solid #fff; outline: 1px solid #c8c6b8; background: #f5f4ea; }
.photo-pair img:first-child { object-position: center 35%; }
.photo-pair img:last-child { object-position: center; }
.family-quote {
  margin: 21px 10px 23px 18px; padding: 16px 21px;
  border-left: 4px solid #779288; background: #f0f2e9;
  color: #3d5146; font: italic 19px/1.5 Georgia, serif;
}
.family-quote p { margin: 0; }
.key-line { padding: 10px 13px; border-left: 3px solid #af9f76; background: #f5f1e4; font-weight: bold; }
.short-answer { color: #2a6358; font-weight: bold; font-size: 18px; }
.flow-line { padding: 11px 15px; background: #edf1eb; border: 1px solid #d5ddd3; color: #2f514c; font-weight: bold; line-height: 1.8; }
.article-figure { margin: 19px auto 3px; max-width: 565px; padding: 5px; border: 1px solid #d1d0c5; background: #fff; }
.article-figure img { width: 100%; }
.small-figure { margin: 18px auto 2px; width: max-content; max-width: 100%; }
.small-figure img { max-height: 290px; }
.section-5 { padding: 27px 21px; margin: 18px -10px 0; background: #f7f2e6; border: 1px solid #ded2bd; }
.section-5 .section-title { margin-bottom: 10px; }
.section-6, .section-12 { padding-top: 29px; }
.section-6 .section-title { padding: 11px 15px; margin-left: -8px; margin-right: -8px; background: #e9eee7; border-top: 1px solid #c3d0c3; border-bottom: 1px solid #c3d0c3; }
.section-7 .sub-title { font-size: 16px; font-family: Arial, sans-serif; }
.steps-table { width: 100%; border-collapse: separate; border-spacing: 0 6px; margin: 15px 0 17px; }
.steps-table td { padding: 9px 12px; background: #f4f5ee; border-top: 1px solid #d9dfd2; border-bottom: 1px solid #d9dfd2; vertical-align: top; }
.steps-table td:first-child { border-left: 1px solid #d9dfd2; }
.steps-table td:last-child { border-right: 1px solid #d9dfd2; }
.steps-table .step-number { width: 38px; background: #dfe9de; color: #3c6255; text-align: center; font: bold 19px/1.4 Georgia, serif; }
.steps-table strong { color: #2d5147; }
.steps-table p { margin: 3px 0 0; font-size: 14px; }
.aged-list { margin: 4px 0 16px; padding: 12px 14px 12px 36px; columns: 2; column-gap: 35px; background: #f6f4e9; border: 1px solid #dfdece; }
.aged-list li { padding: 2px 0; break-inside: avoid; }
.product-panel { display: flex; gap: 11px; align-items: center; padding: 15px; border: 1px solid #d7dbcc; background: #f3f6ef; }
.product-copy { flex: 1 1 60%; min-width: 0; }
.product-photo { flex: 0 0 35%; }
.product-photo img { width: 100%; }
.benefit-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.benefit-table tr + tr { border-top: 1px dotted #b7c5b7; }
.benefit-table td { padding: 9px 3px; vertical-align: top; }
.benefit-table strong { color: #2b544b; }
.benefit-table p { margin: 2px 0 0; line-height: 1.5; }
.benefit-check { width: 22px; color: #518272; font-weight: bold; }
.section-cta { margin-top: 15px !important; text-align: right; font-weight: bold; }
.offer-section { border: 1px solid #d9d8c5; background: #f7f5e9; margin: 25px -10px 0; padding: 24px 20px; }
.offer-section .section-ribbon { display: none; }
.offer-link { margin: 17px 0 !important; }
.offer-link a { display: inline-block; padding: 7px 16px; color: #fff; background: #355e55; border: 1px solid #214940; font-weight: bold; text-decoration: none; }
.offer-link a:hover { color: #fff; background: #244b44; }
.offer-points { margin: 0; padding-left: 19px; color: #516159; font-size: 14px; }
.form-area {
  min-height: 530px; margin: 27px -26px 0; padding: 29px 20px;
  display: flex; align-items: center; justify-content: center;
  background: #c4d4cb url('images/order-bg.webp') center center / cover no-repeat;
  scroll-margin-top: 10px;
}
.form-card { width: min(100%, 458px); padding: 22px 38px 25px; border: 1px solid rgba(255,255,255,.9); border-radius: 20px; background: rgba(255,255,255,.94); box-shadow: 0 7px 20px rgba(26,55,47,.11); }
.form-card h2 { margin: 0 0 7px; color: #244a47; font: bold 31px/1.16 Georgia, serif; }
.form-card > p { margin: 0 0 21px; color: #334f50; font-size: 15px; line-height: 1.5; }
.lead-form { display: grid; gap: 12px; }
.input-wrap { position: relative; display: block; }
.field-icon { position: absolute; top: 50%; left: 15px; width: 23px; height: 23px; transform: translateY(-50%); color: #486c69; pointer-events: none; }
.field-icon svg { display: block; width: 100%; height: 100%; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.input-wrap input { width: 100%; height: 49px; padding: 0 12px 0 56px; border: 1px solid #bfcbd0; border-radius: 12px; outline: none; background: #fff; color: #2c4545; font: 17px Arial, sans-serif; }
.input-wrap input::placeholder { color: #697879; opacity: 1; }
.input-wrap input:focus { border-color: #376a61; box-shadow: 0 0 0 2px #d5e7dd; }
.lead-form button { min-height: 50px; padding: 9px 17px; border: 0; border-radius: 13px; background: #286157; color: white; font: bold 19px Georgia, serif; cursor: pointer; }
.lead-form button:hover { background: #1d5048; }
.lead-form button span { margin-left: 10px; font: 26px Arial, sans-serif; vertical-align: -2px; }
.form-assurances { list-style: none; margin: 16px 0 0; padding: 0; color: #315451; font-size: 12px; }
.form-assurances li { display: flex; align-items: center; gap: 11px; margin: 5px 0; }
.form-assurances span { color: #2e6960; font-size: 18px; width: 20px; text-align: center; }
.sidebar { position: sticky; top: 13px; padding: 15px 12px; font-size: 13px; }
.sidebar-box { margin-bottom: 16px; border: 1px solid #c8cebf; background: #fafaf3; }
.sidebar-heading { padding: 6px 9px; color: #fff; background: #69857a; border-bottom: 1px solid #526f62; font-size: 12px; font-weight: bold; }
.sidebar-box ul { margin: 0; padding: 8px 9px 10px 27px; }
.sidebar-box li { margin: 6px 0; line-height: 1.35; }
.sidebar-quote p { margin: 0; padding: 12px 10px; font: italic 14px/1.5 Georgia, serif; color: #526155; }
.sidebar-order { display: block; padding: 9px 10px; border: 1px solid #4c7264; background: #e1ebe0; color: #2d594e; font-weight: bold; text-decoration: none; text-align: center; }
.sidebar-order:hover { background: #d4e4d5; }
.site-footer { display: flex; justify-content: space-between; gap: 20px; padding: 13px 20px; border-top: 1px solid #bdc8bd; background: #e6ece3; color: #526457; font-size: 12px; }

@media (max-width: 800px) {
  .site-shell { margin: 0; border-left: 0; border-right: 0; box-shadow: none; }
  .header-table td { padding: 18px; }
  .header-note { display: none; }
  .page-layout, .page-layout tbody, .page-layout tr, .page-layout td { display: block; width: 100%; }
  .main-column { border-right: 0; }
  .sidebar-column { display: none !important; }
  .thread-article { padding: 0 20px 20px; }
  .form-area { margin-left: -20px; margin-right: -20px; }
}
@media (max-width: 520px) {
  body { font-size: 15px; }
  .site-logo { font-size: 28px; }
  .top-nav a { padding: 8px 10px; font-size: 12px; }
  .breadcrumb { padding: 7px 11px; }
  .thread-toolbar { padding: 8px 11px; }
  .thread-toolbar a { white-space: nowrap; }
  .thread-article { padding: 0 14px 15px; }
  .thread-section { padding: 20px 0; }
  .section-title { font-size: 23px; }
  .sub-title { font-size: 18px; }
  .intro-copy > p { font-size: 16px; }
  .photo-pair { gap: 6px; }
  .photo-pair img { width: calc(50% - 3px); height: 185px; border-width: 3px; }
  .family-quote { margin: 17px 0; padding: 13px 16px; font-size: 17px; }
  .section-5 { margin-left: -4px; margin-right: -4px; padding: 20px 13px; }
  .section-6 .section-title { margin-left: -5px; margin-right: -5px; }
  .aged-list { columns: 1; }
  .product-panel { display: block; }
  .product-photo { max-width: 245px; margin: 10px auto 0; }
  .offer-section { margin-left: -4px; margin-right: -4px; padding: 20px 13px; }
  .form-area { margin-left: -14px; margin-right: -14px; padding: 22px 12px; min-height: 495px; }
  .form-card { padding: 22px 20px; }
  .form-card h2 { font-size: 27px; }
  .form-card > p { font-size: 14px; }
  .form-assurances { font-size: 11px; }
}