/* Hillside Addon — shared base: variables, reset, fonts, buttons, .rv animation */
:root {
  --hsa-green: #415813;
  --hsa-green-deep: #2c3c0c;
  --hsa-yellow: #FDB71B;
  --hsa-bg: #f7f8f2;
  --hsa-surface: #ffffff;
  --hsa-tint: #eef1e3;
  --hsa-fg: #1d2312;
  --hsa-muted: #5a6249;
  --hsa-line: #dde2cc;
  --hsa-on-green: #f7f8f2;
  --hsa-on-green-muted: #d3ddb4;
  --hsa-brand-text: #415813;
  --hsa-logo-g: #415813;
  --hsa-shadow: 0 30px 60px -30px rgba(44,60,12,.35);
  --hsa-display: "Urbanist","Avenir Next","Segoe UI",system-ui,sans-serif;
  --hsa-body: "Urbanist","Avenir Next","Segoe UI",system-ui,sans-serif;
  --hsa-label: "Questrial","Century Gothic","Futura",system-ui,sans-serif;
  --hsa-r: 28px;
  --hsa-wrap: 1200px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --hsa-bg: #12160b; --hsa-surface: #1a2010; --hsa-tint: #1f2713;
    --hsa-fg: #eef1e3; --hsa-muted: #a9b294; --hsa-line: #2d3720;
    --hsa-brand-text: #c9dc8f; --hsa-logo-g: #8fae3c;
    --hsa-shadow: 0 30px 60px -30px rgba(0,0,0,.7); color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --hsa-bg: #12160b; --hsa-surface: #1a2010; --hsa-tint: #1f2713;
  --hsa-fg: #eef1e3; --hsa-muted: #a9b294; --hsa-line: #2d3720;
  --hsa-brand-text: #c9dc8f; --hsa-logo-g: #8fae3c;
  --hsa-shadow: 0 30px 60px -30px rgba(0,0,0,.7); color-scheme: dark;
}

/* reset & base */
.hsa-wrap *, .hsa-wrap *::before, .hsa-wrap *::after { box-sizing: border-box; }
.hsa-wrap { max-width: var(--hsa-wrap); margin-inline: auto; padding-left: max(20px,env(safe-area-inset-left,0px)); padding-right: max(20px,env(safe-area-inset-right,0px)); }
.hsa-narrow { max-width: 820px; }

/* typography helpers */
.hsa-eyebrow {
  font-family: var(--hsa-label); text-transform: uppercase; letter-spacing: .3em;
  font-size: 12.5px; color: var(--hsa-brand-text); display: inline-flex;
  align-items: center; gap: 12px;
}
.hsa-eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--hsa-yellow); flex: none; }

/* focus */
.hsa-wrap :focus-visible { outline: 3px solid var(--hsa-yellow); outline-offset: 3px; border-radius: 6px; }

/* skip link */
.hsa-skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--hsa-yellow);
  color: #1d2312; padding: 10px 16px; border-radius: 10px; font-weight: 600; }
.hsa-skip:focus { left: 16px; }

/* buttons */
.hsa-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--hsa-body); font-weight: 600; font-size: 16px; text-decoration: none;
  border-radius: 999px; padding: 14px 24px; border: 0; cursor: pointer;
  transition: transform .25s, background .25s, box-shadow .25s, border-color .25s; line-height: 1.2;
}
.hsa-btn:hover { transform: translateY(-2px); }
.hsa-btn-yellow { background: var(--hsa-yellow); color: #1d2312; box-shadow: 0 12px 30px -12px rgba(253,183,27,.7); }
.hsa-btn-green  { background: var(--hsa-green); color: #f7f8f2; }
.hsa-btn-ghost  { background: transparent; color: var(--hsa-fg); border: 1.5px solid var(--hsa-line); }
.hsa-btn-ghost:hover { border-color: var(--hsa-brand-text); }
.hsa-btn-ghost-light { background: transparent; color: #f7f8f2; border: 1.5px solid rgba(247,248,242,.35); }
.hsa-btn-ghost-light:hover { border-color: var(--hsa-yellow); }
.hsa-btn svg { width: 18px; height: 18px; flex: none; }
.hsa-btns { display: flex; flex-wrap: wrap; gap: 14px; }

/* section wrappers */
.hsa-section { padding-block: 96px; background: var(--hsa-bg); color: var(--hsa-fg); font-family: var(--hsa-body); font-size: 18px; line-height: 1.65; -webkit-font-smoothing: antialiased; }
.hsa-section-alt  { background: var(--hsa-surface); border-top: 1px solid var(--hsa-line); border-bottom: 1px solid var(--hsa-line); }
.hsa-section-dark { background: var(--hsa-green-deep); color: var(--hsa-on-green); }
.hsa-section-dark .hsa-eyebrow { color: var(--hsa-yellow); }
.hsa-section-dark .hsa-sec-head p, .hsa-section-dark .hsa-muted { color: var(--hsa-on-green-muted); }

/* section header */
.hsa-sec-head { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; margin-bottom: 56px; }
.hsa-sec-head.single { grid-template-columns: 1fr; max-width: 760px; }
.hsa-sec-head h2, .hsa-h2 { font-size: clamp(32px,4.4vw,54px); font-weight: 400; margin-top: 16px; font-family: var(--hsa-display); line-height: 1.1; letter-spacing: -.02em; text-wrap: balance; margin-bottom: 0; }
.hsa-sec-head p { color: var(--hsa-muted); max-width: 34em; margin: 0; }
.hsa-muted { color: var(--hsa-muted); }

/* split layout */
.hsa-split { display: grid; grid-template-columns: .9fr 1.1fr; gap: 72px; align-items: start; }
.hsa-split-even { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.hsa-prose { display: grid; gap: 20px; font-size: 19px; }
.hsa-prose.hsa-drop p:first-child::first-letter { font-family: var(--hsa-display); font-weight: 700; font-size: 3.6em; float: left; line-height: .85; margin: 6px 12px 0 0; color: var(--hsa-brand-text); }
.hsa-prose p { margin: 0; }
.hsa-prose h3 { font-size: 26px; font-weight: 600; margin-top: 16px; font-family: var(--hsa-display); }
.hsa-prose ul { margin: 0; padding-left: 1.2em; display: grid; gap: 8px; }
.hsa-prose li::marker { color: var(--hsa-yellow); }
.hsa-photo { border-radius: var(--hsa-r); overflow: hidden; box-shadow: var(--hsa-shadow); max-width: 100%; }
.hsa-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hsa-photo-tall { aspect-ratio: 4/5; }
.hsa-photo-wide { aspect-ratio: 4/3; }
.hsa-lead { font-size: 20px; color: var(--hsa-muted); max-width: 34em; margin: 0; }

/* grids */
.hsa-grid2 { display: grid; grid-template-columns: repeat(2,1fr); gap: 20px; }
.hsa-grid3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.hsa-grid4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }

/* pillar cards */
.hsa-pillar { padding: 32px 30px; border-radius: 22px; background: var(--hsa-tint); display: flex; flex-direction: column; gap: 12px; }
.hsa-pillar-feature { background: var(--hsa-green); color: #f7f8f2; }
.hsa-pillar-feature .hsa-p-label { color: var(--hsa-yellow); }
.hsa-pillar-feature p { color: #dfe7c6; }
.hsa-p-label { font-family: var(--hsa-label); text-transform: uppercase; letter-spacing: .26em; font-size: 12px; color: var(--hsa-brand-text); }
.hsa-pillar h3 { font-size: 25px; font-weight: 600; font-family: var(--hsa-display); line-height: 1.1; margin: 0; }
.hsa-pillar p { color: var(--hsa-muted); font-size: 17px; margin: 0; }

/* ic-box icon container */
.hsa-ic-box { width: 52px; height: 52px; border-radius: 16px; background: var(--hsa-tint); display: grid; place-items: center; color: var(--hsa-brand-text); flex: none; transition: background .3s, color .3s; }
.hsa-ic-box svg { width: 24px; height: 24px; }
.hsa-ic-box-green { background: var(--hsa-green); color: var(--hsa-yellow); }

/* care grid */
.hsa-care-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--hsa-line); border: 1px solid var(--hsa-line); border-radius: var(--hsa-r); overflow: hidden; }
.hsa-care { background: var(--hsa-bg); padding: 38px 34px; display: flex; flex-direction: column; gap: 12px; transition: background .3s; text-decoration: none; color: inherit; }
.hsa-section-alt .hsa-care { background: var(--hsa-surface); }
.hsa-care:hover { background: var(--hsa-tint); }
.hsa-care:hover .hsa-ic-box { background: var(--hsa-yellow); color: #1d2312; }
.hsa-care h3 { font-size: 23px; font-weight: 600; margin-top: 8px; font-family: var(--hsa-display); line-height: 1.1; margin-bottom: 0; }
.hsa-care p { color: var(--hsa-muted); font-size: 17px; margin: 0; }
.hsa-care ul { margin: 4px 0 0; padding-left: 1.1em; color: var(--hsa-muted); font-size: 16px; display: grid; gap: 4px; }
.hsa-care li::marker { color: var(--hsa-yellow); }
.hsa-more { margin-top: auto; padding-top: 10px; font-weight: 600; color: var(--hsa-brand-text); font-size: 16px; }

/* check-card */
.hsa-check-card { background: var(--hsa-surface); border: 1px solid var(--hsa-line); border-radius: 22px; padding: 32px; display: flex; flex-direction: column; gap: 16px; }
.hsa-check-card h3 { font-size: 22px; font-weight: 600; font-family: var(--hsa-display); margin: 0; }

/* ticks list */
.hsa-ticks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 28px; }
.hsa-ticks.one { grid-template-columns: 1fr; }
.hsa-ticks li { position: relative; padding-left: 32px; font-size: 17px; }
.hsa-ticks li::before {
  content: ""; position: absolute; left: 0; top: .35em; width: 20px; height: 20px; border-radius: 50%;
  background: var(--hsa-yellow) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d2312' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat;
}

/* steps */
.hsa-steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; counter-reset: s; }
.hsa-steps-long { grid-template-columns: repeat(5,1fr); }
.hsa-step { position: relative; padding-top: 34px; border-top: 2px solid var(--hsa-line); }
.hsa-step::before { counter-increment: s; content: "0" counter(s); font-family: var(--hsa-label); font-size: 13px; letter-spacing: .2em; color: var(--hsa-brand-text); position: absolute; top: 10px; left: 0; }
.hsa-step::after { content: ""; position: absolute; top: -2px; left: 0; width: 48px; height: 2px; background: var(--hsa-yellow); }
.hsa-step h3 { font-size: 22px; font-weight: 600; margin-bottom: 10px; font-family: var(--hsa-display); }
.hsa-step p { color: var(--hsa-muted); font-size: 17px; margin: 0; }

/* pay / link cards */
.hsa-pay { background: var(--hsa-surface); border: 1px solid var(--hsa-line); border-radius: 22px; padding: 30px; display: flex; flex-direction: column; gap: 10px; }
.hsa-pay h3 { font-size: 22px; font-weight: 600; font-family: var(--hsa-display); margin: 0; }
.hsa-pay p { color: var(--hsa-muted); font-size: 17px; margin: 0; }

/* scroll reveal */
.hsa-rv { transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.hsa-js .hsa-rv.hsa-pre { opacity: .35; transform: translateY(24px); }

/* brand link */
.hsa-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; flex: none; }
.hsa-brand svg { width: 46px; height: auto; flex: none; }
.hsa-brand-name { font-family: var(--hsa-display); font-weight: 500; font-size: 21px; color: var(--hsa-brand-text); line-height: 1; letter-spacing: -.01em; display: block; }
.hsa-brand-sub  { display: block; font-family: var(--hsa-label); font-size: 8.5px; letter-spacing: .42em; color: var(--hsa-muted); margin-top: 5px; text-transform: uppercase; }

/* logo svg colors */
.hsa-logo      { --lg: var(--hsa-logo-g); --ly: var(--hsa-yellow); }
.hsa-logo-light { --lg: #f7f8f2; --ly: var(--hsa-yellow); }

/* general heading reset inside widgets */
.hsa-wrap h1, .hsa-wrap h2, .hsa-wrap h3, .hsa-wrap h4 {
  font-family: var(--hsa-display); line-height: 1.1; margin: 0; text-wrap: balance; letter-spacing: -.02em;
}
.hsa-wrap p { margin: 0; }
.hsa-wrap a { color: inherit; }
.hsa-wrap b, .hsa-wrap strong { font-weight: 700; }
.hsa-wrap img { max-width: 100%; display: block; }

/* .hl underline animation */
.hsa-hl { position: relative; white-space: nowrap; z-index: 0; }
.hsa-hl::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .06em; height: .14em;
  background: var(--hsa-yellow); border-radius: 4px; z-index: -1;
  transform-origin: left; animation: hsa-draw 1s .5s cubic-bezier(.6,0,.2,1) both;
}
@keyframes hsa-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* responsive shared */
@media (max-width: 1000px) {
  .hsa-sec-head,
  .hsa-split, .hsa-split-even { grid-template-columns: 1fr; }
  .hsa-care-grid, .hsa-grid3 { grid-template-columns: 1fr 1fr; }
  .hsa-grid4 { grid-template-columns: 1fr 1fr; }
  .hsa-steps { grid-template-columns: 1fr 1fr; row-gap: 44px; }
  .hsa-steps-long { grid-template-columns: 1fr 1fr; }
  .hsa-split { gap: 40px; }
}
@media (max-width: 620px) {
  .hsa-wrap { font-size: 17px; }
  .hsa-section { padding-block: 68px; }
  .hsa-care-grid, .hsa-grid3, .hsa-grid2, .hsa-grid4, .hsa-steps, .hsa-steps-long, .hsa-ticks { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .hsa-js .hsa-rv.hsa-pre { opacity: 1; transform: none; }
}