.functions-page {
  --functions-lime: #bfea57;
  --functions-green: #43ad73;
  --functions-green-deep: #287b59;
  --functions-green-text: var(--color-green-text);
  --functions-teal: #59bfc0;
  --functions-teal-dark: #398f91;
  --functions-ink: #14231b;
  --functions-muted: #5d6c64;
  --functions-line: #dce8df;
  overflow: clip;
  color: var(--functions-ink);
  background:
    radial-gradient(ellipse 42% 20% at 6% 2%, rgb(191 234 87 / 23%), transparent 72%),
    radial-gradient(ellipse 38% 24% at 97% 12%, rgb(89 191 192 / 20%), transparent 74%),
    radial-gradient(ellipse 34% 22% at 4% 49%, rgb(132 220 101 / 12%), transparent 76%),
    radial-gradient(ellipse 36% 23% at 96% 78%, rgb(89 191 192 / 11%), transparent 76%),
    linear-gradient(135deg, #fbfdfb 0%, #f5fbf6 48%, #f1faf9 100%);
}

.functions-page h1,
.functions-page h2,
.functions-page h3 {
  color: var(--functions-ink);
  font-weight: 650;
  letter-spacing: -.04em;
  line-height: 1.08;
}

.functions-hero { padding: 18px 0 clamp(52px, 6vw, 78px); }
.functions-breadcrumb { display: flex; align-items: center; gap: 12px; margin-bottom: clamp(28px, 3vw, 38px); color: #53635b; font-size: 13px; font-weight: 700; }
.functions-breadcrumb a { color: var(--functions-green-text); font-weight: 750; text-decoration: none; }
.functions-breadcrumb a:hover { text-decoration: underline; text-underline-offset: 4px; }
.functions-hero-copy { max-width: 1200px; }
.functions-hero h1 { max-width: none; margin: 0; font-size: clamp(40px, 4vw, 50px); }
.functions-hero-copy > p { max-width: none; margin: 15px 0 0; color: #33493d; font-size: 18px; line-height: 1.65; }

.functions-overview { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: clamp(36px, 4vw, 52px); }
.functions-overview a { display: grid; min-width: 0; min-height: 88px; grid-template-columns: 58px minmax(0, 1fr) 16px; align-items: center; gap: 14px; padding: 13px 15px; border: 1px solid rgb(255 255 255 / 84%); border-radius: 19px; color: var(--functions-ink); background: linear-gradient(145deg, rgb(255 255 255 / 90%), rgb(241 250 246 / 73%)); box-shadow: 0 17px 42px rgb(47 146 107 / 9%), inset 0 1px 0 rgb(255 255 255 / 76%); backdrop-filter: blur(15px) saturate(120%); -webkit-backdrop-filter: blur(15px) saturate(120%); font-size: .94rem; font-weight: 670; line-height: 1.35; text-decoration: none; transition: border-color .2s ease, box-shadow .2s ease, color .2s ease, transform .2s ease; }
.functions-overview picture { display: grid; width: 58px; height: 58px; place-items: center; border: 1px solid rgb(255 255 255 / 88%); border-radius: 16px; background: linear-gradient(145deg, rgb(191 234 87 / 25%), rgb(89 191 192 / 18%)); box-shadow: inset 0 1px 0 rgb(255 255 255 / 76%); }
.functions-overview img { display: block; width: auto; max-width: 48px; height: auto; max-height: 48px; object-fit: contain; }
.functions-overview span { min-width: 0; }
.functions-overview b { color: var(--functions-green); font-size: 1.6rem; font-weight: 700; line-height: 1; }
.functions-overview a:hover { color: var(--functions-green-text); border-color: rgb(61 168 111 / 45%); background: linear-gradient(145deg, rgb(255 255 255 / 96%), rgb(232 248 240 / 84%)); box-shadow: 0 23px 50px rgb(47 146 107 / 15%); transform: translateY(-3px); }
.functions-overview a:focus-visible { outline: 3px solid rgb(67 173 115 / 32%); outline-offset: 2px; }

.functions-content { padding-bottom: clamp(72px, 8vw, 108px); }
.functions-detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 248px; align-items: start; gap: clamp(22px, 2.5vw, 34px); }
.functions-side-nav { position: sticky; top: 104px; display: grid; grid-column: 2; max-height: calc(100vh - 128px); gap: 12px; overflow-y: auto; padding: 17px; border: 1px solid rgb(255 255 255 / 84%); border-radius: 22px; background: linear-gradient(145deg, rgb(255 255 255 / 91%), rgb(242 251 247 / 82%)); box-shadow: 0 20px 52px rgb(47 146 107 / 11%), inset 0 1px 0 rgb(255 255 255 / 88%); scrollbar-color: rgb(67 173 115 / 48%) transparent; scrollbar-width: thin; backdrop-filter: blur(16px) saturate(122%); -webkit-backdrop-filter: blur(16px) saturate(122%); }
.functions-side-nav > strong { padding: 3px 9px 8px; color: #355246; font-size: .78rem; font-weight: 800; }
.functions-side-nav ol,
.functions-mobile-nav ol { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.functions-side-nav a,
.functions-mobile-nav-menu a { display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: center; gap: 9px; min-height: 45px; padding: 6px 9px; border: 1px solid transparent; border-radius: 13px; color: var(--functions-ink); font-size: .78rem; font-weight: 720; line-height: 1.25; text-decoration: none; transition: border-color .2s ease, color .2s ease, background .2s ease, box-shadow .2s ease; }
.functions-side-nav a > span,
.functions-mobile-nav-menu a > span,
.functions-mobile-nav-number { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 50%; color: var(--functions-green-text); background: #edf7ef; font-size: .7rem; font-weight: 850; }
.functions-side-nav a:hover,
.functions-mobile-nav-menu a:hover { border-color: rgb(67 173 115 / 20%); color: var(--functions-green-text); background: rgb(255 255 255 / 82%); }
.functions-side-nav a.is-active,
.functions-mobile-nav-menu a.is-active { border-color: rgb(67 173 115 / 24%); color: #17452f; background: linear-gradient(105deg, rgb(191 234 87 / 24%), rgb(89 191 192 / 14%)); box-shadow: inset 0 1px 0 rgb(255 255 255 / 80%); }
.functions-side-nav a.is-active > span,
.functions-mobile-nav-menu a.is-active > span { color: #fff; background: linear-gradient(135deg, #43ad73, #398f91); box-shadow: 0 5px 12px rgb(47 146 107 / 20%); }
.functions-side-nav a:focus-visible,
.functions-mobile-nav-toggle:focus-visible,
.functions-mobile-nav-menu a:focus-visible { outline: 3px solid rgb(67 173 115 / 33%); outline-offset: 2px; }
.functions-mobile-nav { display: none; }
.functions-list { display: grid; grid-column: 1; grid-row: 1; gap: clamp(28px, 3vw, 42px); }
.function-detail { position: relative; display: grid; overflow: hidden; grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr); align-items: center; gap: clamp(42px, 6vw, 86px); padding: clamp(28px, 4vw, 50px); border: 1px solid rgb(255 255 255 / 82%); border-radius: 30px; background: linear-gradient(145deg, rgb(255 255 255 / 74%), rgb(241 250 246 / 57%)); box-shadow: 0 22px 58px rgb(47 146 107 / 9%), inset 0 1px 0 rgb(255 255 255 / 82%); backdrop-filter: blur(17px) saturate(118%); -webkit-backdrop-filter: blur(17px) saturate(118%); scroll-margin-top: 120px; }
.function-detail:nth-child(even) { background: linear-gradient(215deg, rgb(255 255 255 / 78%), rgb(239 250 248 / 58%)); }
.function-detail::before { position: absolute; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, rgb(191 234 87 / 13%), transparent 69%); content: ""; pointer-events: none; transform: translate(-46%, -48%); }
.function-detail:nth-child(even)::before { right: 0; background: radial-gradient(circle, rgb(89 191 192 / 13%), transparent 69%); transform: translate(48%, -46%); }
.function-detail > * { position: relative; z-index: 1; }
.function-detail:nth-child(even) .function-visual { order: 2; }
.function-visual { display: grid; min-height: 330px; margin: 0; padding: clamp(24px, 3vw, 38px); place-items: center; border: 1px solid rgb(255 255 255 / 88%); border-radius: 23px; background: linear-gradient(145deg, rgb(255 255 255 / 92%), rgb(242 250 247 / 74%)); box-shadow: 0 18px 46px rgb(47 146 107 / 10%), inset 0 1px 0 rgb(255 255 255 / 84%); backdrop-filter: blur(14px) saturate(115%); -webkit-backdrop-filter: blur(14px) saturate(115%); }
.function-visual picture { display: contents; }
.function-visual img { display: block; width: auto; max-width: 100%; height: auto; max-height: 350px; object-fit: contain; }
.function-copy { min-width: 0; }
.function-copy h2 { margin: 0 0 19px; font-size: clamp(32px, 3.2vw, 44px); }
.function-copy h3 { margin: -7px 0 18px; color: var(--functions-teal-dark); font-size: 1.25rem; letter-spacing: -.025em; }
.function-copy p { max-width: 680px; margin: 0 0 21px; color: #42584c; font-size: 16px; line-height: 1.7; }
.function-copy .function-emphasis { color: var(--functions-ink); font-weight: 720; }
.function-guide { display: inline-flex; align-items: center; gap: 8px; margin: 2px 0 24px; padding: 9px 13px; border: 1px solid rgb(61 168 111 / 24%); border-radius: 999px; color: var(--functions-green-text); background: rgb(244 251 246 / 72%); font-size: .84rem; font-weight: 800; text-decoration: none; }
.function-guide:hover { color: #fff; border-color: transparent; background: linear-gradient(135deg, #54b96d, #398f91); }
.function-editions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 21px; border-top: 1px solid var(--functions-line); }
.function-editions > span { width: 100%; margin-bottom: 2px; color: var(--functions-muted); font-size: .78rem; font-weight: 750; }
.function-editions a { display: inline-flex; padding: 7px 11px; border: 1px solid rgb(113 190 137 / 39%); border-radius: 999px; color: var(--functions-green-text); background: rgb(255 255 255 / 64%); box-shadow: inset 0 1px 0 rgb(255 255 255 / 74%); font-size: .76rem; font-weight: 780; line-height: 1.3; text-decoration: none; backdrop-filter: blur(8px); }
.function-editions a:hover { border-color: var(--functions-green); background: #e8f7ed; }

.functions-feedback { padding: 0 0 clamp(80px, 10vw, 132px); }
.functions-feedback-grid { display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr); align-items: stretch; gap: 22px; }
.functions-feedback-grid > div { padding: clamp(34px, 4vw, 52px); border: 1px solid rgb(255 255 255 / 84%); border-radius: 26px; background: linear-gradient(145deg, rgb(255 255 255 / 88%), rgb(241 250 246 / 70%)); box-shadow: 0 20px 48px rgb(47 146 107 / 10%), inset 0 1px 0 rgb(255 255 255 / 80%); backdrop-filter: blur(16px) saturate(120%); -webkit-backdrop-filter: blur(16px) saturate(120%); }
.functions-feedback-grid > div > span { color: var(--functions-green-text); font-size: .84rem; font-weight: 850; }
.functions-feedback h2 { margin: 12px 0 15px; font-size: clamp(28px, 3vw, 40px); }
.functions-feedback p { margin: 0 0 22px; color: var(--functions-muted); line-height: 1.65; }
.functions-text-link { color: var(--functions-green-text); font-weight: 800; text-underline-offset: 4px; }
.functions-decision { color: var(--functions-ink); background: radial-gradient(circle at 92% 0%, rgb(89 191 192 / 24%), transparent 42%), linear-gradient(125deg, rgb(191 234 87 / 27%), rgb(98 200 116 / 20%) 52%, rgb(89 191 192 / 24%)) !important; }
.functions-decision h2 { color: var(--functions-ink); }
.functions-decision p { color: #33493d; }
.functions-decision > div { display: flex; flex-wrap: wrap; gap: 12px; }
.functions-button { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; padding: 11px 18px; border: 1px solid rgb(255 255 255 / 70%); border-radius: 12px; font-size: .88rem; font-weight: 800; text-decoration: none; }
.functions-button-primary { color: #fff; border-color: transparent; background: linear-gradient(135deg, #54b96d, #398f91); box-shadow: 0 12px 26px rgb(47 146 107 / 22%); }
.functions-button-secondary { color: var(--functions-green-text); border-color: rgb(255 255 255 / 78%); background: rgb(255 255 255 / 56%); backdrop-filter: blur(10px); }
.functions-button:hover { transform: translateY(-1px); }
.functions-button-primary:hover { border-color: transparent; color: #fff; background: linear-gradient(135deg, #43ad73, #2f8082); box-shadow: 0 18px 38px rgb(47 146 107 / 27%); }
.functions-button-secondary:hover { border-color: rgb(61 168 111 / 35%); color: var(--functions-green-text); background: rgb(255 255 255 / 88%); box-shadow: 0 14px 30px rgb(47 146 107 / 14%); }

@media (max-width: 980px) {
  .function-detail,
  .functions-feedback-grid { grid-template-columns: 1fr; }
  .functions-hero h1 { max-width: 850px; }
  .functions-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .function-detail:nth-child(even) .function-visual { order: initial; }
  .function-detail { padding: 28px; }
  .function-visual { min-height: 310px; }
}

@media (max-width: 1180px) {
  .functions-mobile-nav { position: sticky; z-index: 18; top: 76px; display: block; margin-bottom: 20px; border: 1px solid rgb(255 255 255 / 88%); border-radius: 18px; background: rgb(247 252 249 / 91%); box-shadow: 0 14px 38px rgb(47 146 107 / 11%), inset 0 1px 0 rgb(255 255 255 / 92%); backdrop-filter: blur(17px) saturate(125%); -webkit-backdrop-filter: blur(17px) saturate(125%); }
  .functions-mobile-nav-toggle { display: grid; width: 100%; min-height: 62px; grid-template-columns: 34px minmax(0, 1fr) 18px; align-items: center; gap: 11px; padding: 7px 14px; border: 0; border-radius: inherit; color: var(--functions-ink); background: transparent; font: inherit; text-align: left; cursor: pointer; }
  .functions-mobile-nav-current { min-width: 0; }
  .functions-mobile-nav-current small,
  .functions-mobile-nav-current strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .functions-mobile-nav-current small { margin-bottom: 2px; color: #5d6c64; font-size: .68rem; font-weight: 700; }
  .functions-mobile-nav-current strong { font-size: .86rem; font-weight: 790; }
  .functions-mobile-nav-chevron { width: 9px; height: 9px; border-right: 2px solid var(--functions-green-text); border-bottom: 2px solid var(--functions-green-text); transform: translateY(-2px) rotate(45deg); transition: transform .2s ease; }
  .functions-mobile-nav-toggle[aria-expanded="true"] .functions-mobile-nav-chevron { transform: translateY(2px) rotate(225deg); }
  .functions-mobile-nav-menu { position: absolute; top: calc(100% + 7px); right: 0; left: 0; max-height: calc(100vh - 166px); overflow-y: auto; padding: 8px; border: 1px solid rgb(255 255 255 / 90%); border-radius: 18px; background: rgb(247 252 249 / 97%); box-shadow: 0 22px 50px rgb(47 146 107 / 17%), inset 0 1px 0 rgb(255 255 255 / 92%); scrollbar-color: rgb(67 173 115 / 48%) transparent; scrollbar-width: thin; backdrop-filter: blur(19px) saturate(126%); -webkit-backdrop-filter: blur(19px) saturate(126%); }
  .functions-mobile-nav-menu[hidden] { display: none; }
  .functions-mobile-nav-menu ol { padding: 0; }
  .functions-mobile-nav-menu a { min-height: 46px; font-size: .82rem; }
  .functions-detail-layout { display: block; }
  .functions-side-nav { display: none; }
  .function-detail { scroll-margin-top: 154px; }
}

@media (max-width: 640px) {
  .functions-hero { padding-top: 14px; }
  .functions-breadcrumb { margin-bottom: 24px; }
  .functions-hero h1 { font-size: clamp(34px, 10vw, 42px); }
  .functions-overview { grid-template-columns: 1fr; gap: 10px; margin-top: 30px; }
  .functions-overview a { min-height: 64px; grid-template-columns: 52px minmax(0, 1fr) 14px; gap: 12px; }
  .functions-overview picture { width: 52px; height: 52px; }
  .functions-overview img { max-width: 50px; max-height: 50px; }
  .functions-mobile-nav { top: 68px; margin-bottom: 12px; border-radius: 16px; }
  .functions-mobile-nav-toggle { min-height: 58px; padding-right: 12px; padding-left: 12px; }
  .functions-mobile-nav-menu { max-height: calc(100vh - 146px); }
  .function-detail { scroll-margin-top: 140px; }
  .functions-list { gap: 22px; }
  .function-detail { gap: 28px; padding: 20px; border-radius: 23px; }
  .function-visual { min-height: 250px; padding: 22px 16px; border-radius: 21px; }
  .function-visual img { max-height: 250px; }
  .function-copy h2 { font-size: 32px; }
  .functions-feedback-grid > div { padding: 30px 23px; border-radius: 22px; }
  .functions-decision > div { flex-direction: column; }
  .functions-button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .functions-page { scroll-behavior: auto; }
  .functions-button:hover { transform: none; }
}