@layer components {
  .service-page .topic-links { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 2.2rem; }
  .service-page .topic-links a { display: inline-flex; align-items: center; min-height: 2.75rem; padding: .65rem .9rem; border: 1px solid rgba(0,209,255,.4); border-radius: 999px; color: var(--cyan); font-size: .82rem; font-weight: 750; transition: border-color .2s, color .2s, background .2s; }
  .service-page .topic-links a:hover { border-color: var(--acid); color: var(--acid); background: rgba(198,255,0,.06); }
  .service-page .hero-panel .panel-number { display: block; margin-bottom: .5rem; color: var(--acid); font-family: var(--display); font-size: clamp(3rem, 6vw, 5rem); line-height: 1; }
  .service-page .hero-panel .panel-caption { margin: 0; color: #c7cdd0; font-size: .92rem; }
  .service-page .service-note { max-width: 52rem; padding: 1.35rem 1.5rem; border-left: 3px solid var(--cyan); background: rgba(0,209,255,.055); color: #c7cdd0; }
  .service-page .section-light .service-note { color: #3f4c50; background: #e7f6f4; }
  .service-page .faq a { color: var(--acid); text-decoration: underline; text-underline-offset: .2rem; }
  .faq-page .hero h1 { max-width: 54rem; }
  .proposal-diagram { position: relative; isolation: isolate; width: 100%; max-width: 29rem; justify-self: end; align-self: center; padding: 1.2rem .4rem 1.2rem 0; transform: translateY(-1.3rem); }
  .proposal-diagram::before { content: ""; position: absolute; z-index: -1; inset: -2rem -2rem -2rem -3rem; background: radial-gradient(ellipse at 44% 52%, rgba(0,209,255,.09), transparent 65%); pointer-events: none; }
  .proposal-diagram h2 { display: flex; align-items: center; gap: .75rem; color: var(--cyan); font: 850 .74rem var(--body); letter-spacing: .14em; text-transform: uppercase; }
  .proposal-diagram h2::before { content: ""; width: 1.7rem; height: 3px; border-radius: 999px; background: var(--brand-gradient); }
  .proposal-flow { position: relative; display: grid; gap: .7rem; margin: 1.25rem 0 0; padding: 0; list-style: none; }
  .proposal-flow::before, .proposal-flow::after { content: ""; position: absolute; z-index: 0; top: 1.5rem; bottom: 1.5rem; left: 1.39rem; width: 2px; transform-origin: top center; pointer-events: none; }
  .proposal-flow::before { background: rgba(243,246,241,.17); }
  .proposal-flow::after { background: linear-gradient(180deg, var(--cyan), var(--acid), var(--cyan)); background-size: 100% 200%; box-shadow: 0 0 .65rem rgba(0,209,255,.5); }
  .proposal-flow li { position: relative; z-index: 1; display: grid; grid-template-columns: 2.9rem minmax(0, 1fr); gap: .8rem; align-items: center; min-width: 0; }
  .flow-node { position: relative; z-index: 1; display: grid; place-items: center; width: 2.9rem; height: 2.9rem; border: 1px solid rgba(0,209,255,.58); border-radius: 50%; color: var(--cyan); background: #0d171b; box-shadow: 0 0 0 .32rem rgba(8,11,15,.94); font-size: .68rem; font-weight: 850; letter-spacing: .05em; }
  .proposal-flow li:nth-child(even) .flow-node { border-color: rgba(198,255,0,.65); color: var(--acid); }
  .flow-node::after { content: ""; position: absolute; inset: -.35rem; border: 1px solid currentColor; border-radius: inherit; opacity: 0; transform: scale(.76); }
  .flow-card { display: flex; align-items: center; min-height: 3.65rem; padding: .75rem 1rem; border: 1px solid rgba(0,209,255,.24); border-radius: .95rem; color: #d8dfe0; background: linear-gradient(105deg, rgba(0,209,255,.075), rgba(20,26,32,.88)); font-size: clamp(.85rem, 1.2vw, .96rem); font-weight: 660; line-height: 1.35; transition: transform .25s, border-color .25s, background .25s; }
  .proposal-flow li:nth-child(even) .flow-card { margin-left: .65rem; border-color: rgba(198,255,0,.24); background: linear-gradient(105deg, rgba(198,255,0,.055), rgba(20,26,32,.88)); }
  .proposal-flow li:hover .flow-card { transform: translateX(.25rem); border-color: rgba(0,209,255,.7); }
  .proposal-flow li:nth-child(even):hover .flow-card { border-color: rgba(198,255,0,.7); }
  .diagram-motion-ready .proposal-diagram .proposal-flow::after { transform: scaleY(0); }
  .diagram-motion-ready .proposal-diagram.is-visible .proposal-flow::after { animation: flow-draw 1.8s cubic-bezier(.2,.7,.2,1) .2s both, flow-beam 4s linear 2s infinite; }
  .diagram-motion-ready .proposal-diagram .proposal-flow li { opacity: 0; transform: translateY(.75rem); }
  .diagram-motion-ready .proposal-diagram.is-visible .proposal-flow li { animation: flow-step-in .55s cubic-bezier(.2,.7,.2,1) both; }
  .diagram-motion-ready .proposal-diagram.is-visible .proposal-flow li:nth-child(1) { animation-delay: .25s; }
  .diagram-motion-ready .proposal-diagram.is-visible .proposal-flow li:nth-child(2) { animation-delay: .48s; }
  .diagram-motion-ready .proposal-diagram.is-visible .proposal-flow li:nth-child(3) { animation-delay: .71s; }
  .diagram-motion-ready .proposal-diagram.is-visible .proposal-flow li:nth-child(4) { animation-delay: .94s; }
  .diagram-motion-ready .proposal-diagram.is-visible .proposal-flow li:nth-child(5) { animation-delay: 1.17s; }
  .proposal-diagram.is-visible .flow-node::after { animation: flow-ring 4s ease-out infinite; }
  .proposal-diagram.is-visible li:nth-child(2) .flow-node::after { animation-delay: .65s; }
  .proposal-diagram.is-visible li:nth-child(3) .flow-node::after { animation-delay: 1.3s; }
  .proposal-diagram.is-visible li:nth-child(4) .flow-node::after { animation-delay: 1.95s; }
  .proposal-diagram.is-visible li:nth-child(5) .flow-node::after { animation-delay: 2.6s; }
  .proposal-diagram.motion-paused .proposal-flow::after, .proposal-diagram.motion-paused .proposal-flow li, .proposal-diagram.motion-paused .flow-node::after { animation-play-state: paused; }
  .faq-page .faq-group + .faq-group { margin-top: 3.5rem; }
  .faq-page .faq-group h2 { margin-bottom: .6rem; }
  .faq-page .faq-group > p { max-width: 50rem; color: #b9c1c3; }
  .faq-page .faq { margin-top: 1.5rem; border: 1px solid var(--line); border-radius: 1.25rem; overflow: hidden; }
  .faq-page .faq details { padding: 0; border-bottom: 1px solid var(--line); }
  .faq-page .faq details:last-child { border-bottom: 0; }
  .faq-page .section-light .faq { border-color: #cbd5d2; background: #cbd5d2; }
  .faq-page .section-light .faq details { border-color: #cbd5d2; background: #fff; }
  .faq-page .section-light .faq details > p, .faq-page .section-light .faq details > ul { color: #435054; }
  .faq-page .section-light .faq details[open] summary { color: #397100; }
  .faq-page .section-light .faq summary::after { color: #397100; }
  .faq-page .section-light .faq a { color: #00677f; }
  .faq-page .faq summary { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 4.5rem; padding: 1.1rem 1.4rem; list-style: none; font-size: clamp(.98rem, 1.5vw, 1.1rem); }
  .faq-page .faq summary::-webkit-details-marker { display: none; }
  .faq-page .faq summary::after { content: '+'; flex: none; color: var(--acid); font-size: 1.6rem; line-height: 1; transition: transform .25s; }
  .faq-page .faq details[open] summary::after { transform: rotate(45deg); }
  .faq-page .faq details[open] summary { color: var(--acid); }
  .faq-page .faq details > p, .faq-page .faq details > ul { max-width: 55rem; margin: 0; padding: 0 1.4rem 1.4rem; color: #c2c9c9; animation: faq-content-in .3s ease both; }
  .faq-page .faq details > ul { padding-left: 2.7rem; }
  .faq-page .faq details > p + p { padding-top: 0; }
  .faq-page .faq details a { color: var(--cyan); }
  .faq-page .faq-nav { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 2rem; }
  .faq-page .faq-nav a { min-height: 2.75rem; display: inline-flex; align-items: center; border: 1px solid rgba(0,209,255,.4); border-radius: 999px; padding: .65rem .9rem; color: var(--cyan); font-size: .82rem; font-weight: 750; }
  .faq-page .faq-nav a:hover { color: var(--acid); border-color: var(--acid); }
  .faq-page .faq-group { scroll-margin-top: 6rem; }
  @keyframes faq-content-in { from { opacity: 0; transform: translateY(-.4rem); } to { opacity: 1; transform: none; } }
  @keyframes flow-draw { to { transform: scaleY(1); } }
  @keyframes flow-beam { to { background-position: 0 100%; } }
  @keyframes flow-step-in { to { opacity: 1; transform: none; } }
  @keyframes flow-ring { 0%, 72%, 100% { opacity: 0; transform: scale(.76); } 12% { opacity: .42; transform: scale(1.2); } 28% { opacity: 0; transform: scale(1.55); } }
}
@layer utilities {
  @media (max-width: 820px) {
    .proposal-diagram { justify-self: start; transform: none; }
  }
  @media (max-width: 560px) {
    .proposal-diagram { justify-self: stretch; max-width: none; padding-right: 0; }
    .proposal-flow li:nth-child(even) .flow-card { margin-left: 0; }
    .faq-page .faq summary { padding-inline: 1.1rem; }
    .faq-page .faq details > p { padding-inline: 1.1rem; }
    .faq-page .faq details > ul { padding-left: 2.4rem; padding-right: 1.1rem; }
  }
  @media (prefers-reduced-motion: reduce) {
    .proposal-flow::after, .proposal-flow li, .flow-node::after { animation: none !important; }
    .proposal-flow li:hover .flow-card { transform: none; }
    .faq-page .faq details > p, .faq-page .faq details > ul { animation: none; }
    .faq-page .faq summary::after { transition: none; }
  }
}