:root {
        --service-motion-ease: ease;
        --service-motion-duration: 700ms;
      }
      * { box-sizing: border-box; }
      html { scroll-behavior: smooth; }
      body {
        margin: 0;
        color: var(--ink);
        background: var(--white);
        font-family: Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;
        -webkit-font-smoothing: antialiased;
      }
      a { color: inherit; text-decoration: none; }
      .skip-link {
        position: fixed;
        top: 12px;
        left: 12px;
        z-index: 100;
        padding: 10px 16px;
        border-radius: 7px;
        color: var(--white);
        background: var(--blue);
        font-weight:700;
        transform: translateY(-180%);
        transition: transform 200ms ease;
      }
      .skip-link:focus { transform: translateY(0); }
      .svg-filter-definitions { position: absolute; width: 0; height: 0; overflow: hidden; }
      .shell { width: min(1280px, calc(100% - 48px)); margin: 0 auto; }
      .site-header {
        position: fixed;
        inset: 0 0 auto;
        z-index: 20;
        height: 75px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid var(--line);
        background: rgba(255, 255, 255, 0.92);
        backdrop-filter: blur(16px);
      }
      .brand { display: inline-flex; align-items: center; height: 40px; }
      .brand-logo-picture { display: block; line-height: 0; }
      .brand img { display: block; width: auto; height: 40px; }
      .header-nav {
        display: flex;
        align-items: center;
        gap: 28px;
        color: var(--ink);
        font-size: 13.2px;
        font-weight:700;
        letter-spacing: 0.04em;
      }
      .header-nav a { transition: color 200ms ease; }
      .header-nav a:not(.header-cta):hover,
      .header-nav a:not(.header-cta):focus-visible { color: var(--ink); }
      .mobile-header-actions, .mobile-nav { display: none; }
      .mobile-header-inquiry, .mobile-menu-toggle {
        min-height: 44px;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--ink);
        border-radius: 7px;
        background: var(--white);
        color: var(--ink);
        font: inherit;
        font-weight:700;
      }
      .mobile-header-inquiry { padding: 0 11px; font-size: 12px; }
      .mobile-menu-toggle { width: 44px; padding: 0; cursor: pointer; }
      .mobile-menu-toggle__line, .mobile-menu-toggle__line::before, .mobile-menu-toggle__line::after {
        display: block;
        width: 16px;
        height: 2px;
        border-radius: 10px;
        background: var(--ink);
        content: "";
        transition: transform 200ms ease;
      }
      .mobile-menu-toggle__line { position: relative; }
      .mobile-menu-toggle__line::before { position: absolute; top: -5px; }
      .mobile-menu-toggle__line::after { position: absolute; top: 5px; }
      .site-header.is-mobile-menu-open .mobile-menu-toggle__line { background: transparent; }
      .site-header.is-mobile-menu-open .mobile-menu-toggle__line::before { transform: translateY(5px) rotate(45deg); }
      .site-header.is-mobile-menu-open .mobile-menu-toggle__line::after { transform: translateY(-5px) rotate(-45deg); }
      .header-cta, .button {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 48px;
        padding: 0 26px;
        overflow: hidden;
        border: 1px solid var(--ink);
        border-radius: 7px;
        font-size: 14px;
        font-weight:700;
        transition: color 300ms ease, border-color 300ms ease, transform 300ms ease;
      }
      .header-cta {
        min-height: 42px;
        padding: 0 22px;
        border: 1px solid var(--ink);
        color: var(--ink);
        background: var(--white);
        transition: color 300ms ease, background-color 300ms ease, border-color 300ms ease, transform 300ms ease;
      }
      .header-cta::before { content: none; }
      .header-cta::before, .button::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background: var(--blue);
        transform: translateY(102%);
        transition: transform 300ms ease;
      }
      .header-cta:hover, .header-cta:focus-visible, .button:hover, .button:focus-visible {
        color: var(--white);
        border-color: var(--blue);
        transform: translateY(-2px);
      }
      .header-cta:hover, .header-cta:focus-visible { background: var(--blue); }
      .header-cta:hover::before, .header-cta:focus-visible::before,
      .button:hover::before, .button:focus-visible::before { transform: none; }
      main { padding-top: 70px; }
      h1, h2, h3, p { margin-top: 0; }
      .service-list {
        padding: clamp(63px, 7.5vw, 112px) 0;
        background: var(--white);
      }
      .section-heading {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 45px;
        margin-bottom: clamp(41px, 5.25vw, 68px);
      }
      .section-heading h2 {
        margin-bottom: 0;
        font-size: clamp(29px, 3.3vw, 48px);
        line-height: 1.04;
        letter-spacing:-0.018em;
        white-space: nowrap;
      }
      .section-heading p {
        align-self: end;
        max-width: 520px;
        margin-bottom: 0;
        color: var(--muted);
        line-height: 1.75;
        word-break: keep-all;
      }
      .service-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 18px;
      }
      .service-card {
        min-width: 0;
        min-height: 375px;
        padding: 9px 9px 21px;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        border: 1px solid rgba(87, 3, 1, 0.1);
        border-radius: 10px;
        background: var(--white);
        box-shadow:none;
        transition: transform 300ms ease, box-shadow 300ms ease, border-color 300ms ease;
      }
      .service-card:hover {
        transform: translateY(-6px);
        border-color: var(--blue);
        box-shadow:none;
      }
      .service-card:focus-within {
        transform: translateY(-6px);
        border-color: var(--blue);
        box-shadow:none;
      }
      .service-card__visual {
        min-height: 158px;
        margin-bottom: 20px;
        display: grid;
        place-items: center;
        overflow: hidden;
        border-radius: 10px;
        background: var(--surface);
      }
      .service-card__icon {
        display: block;
        width: min(62%, 135px);
        height: auto;
        aspect-ratio: 1;
        object-fit: contain;
      }
      .service-card__body {
        padding: 0 11px;
        display: flex;
        flex: 1;
        flex-direction: column;
      }
      .service-card__top {
        display: flex;
        align-items: flex-start;
      }
      .service-card h3 {
        max-width: 230px;
        margin-bottom: 14px;
        font-size: clamp(18px, 1.25vw, 19px);
        line-height: 1.14;
        letter-spacing:-0.018em;
      }
      .service-card__description {
        max-width: 280px;
        margin-bottom: 21px;
        font-size: 13px;
        color: var(--muted);
        line-height: 1.75;
      }
      .service-card__price {
        margin: 8px 0 0;
        font-size: clamp(18px, 1.35vw, 20px);
        font-weight:700;
        letter-spacing:-0.018em;
      }
      .service-card__price small {
        display: block;
        margin-top: 8px;
        color: var(--muted);
        font-size: 11px;
        font-weight:600;
        letter-spacing: 0;
      }
      .reveal-ready [data-reveal][data-service-heading-motion]:not(.is-visible) h2,
      .reveal-ready [data-reveal][data-service-heading-motion]:not(.is-visible) p {
        opacity: 0;
        transform: translate3d(0, var(--service-motion-distance, 24px), 0);
        transition: opacity var(--service-motion-duration) var(--service-motion-ease), transform var(--service-motion-duration) var(--service-motion-ease);
      }
      .reveal-ready [data-reveal][data-service-heading-motion]:not(.is-visible) p { transition-delay: 100ms; }
      [data-service-heading-motion].is-visible h2,
      [data-service-heading-motion].is-visible p { opacity: 1; transform: none; }
      .service-card { --service-card-delay: 0ms; }
      .service-card:nth-child(2) { --service-card-delay: 90ms; }
      .service-card:nth-child(3) { --service-card-delay: 180ms; }
      .service-card:nth-child(4) { --service-card-delay: 270ms; }
      [data-service-card-motion] { transition-delay: var(--service-card-delay); }
      .reveal-ready [data-service-card-motion]:not(.is-visible) .service-card__icon {
        transform: scale(0.94);
        transition: transform 800ms var(--service-motion-ease);
      }
      [data-service-card-motion].is-visible .service-card__icon { transform: scale(1); }
      .service-card:hover .service-card__icon,
      .service-card:focus-within .service-card__icon { transform: scale(1.02); }
      @media (hover: none) {
        .service-card:hover { transform: none; }
      }
      @media (max-width: 1100px) {
        .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .pricing-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .service-card { min-height: 390px; }
        .service-card__visual { min-height: 180px; }
        .service-card__icon { width: min(58%, 158px); }
      }
      .price-section {
        padding: clamp(51px, 5.25vw, 72px) 0 clamp(57px, 6vw, 83px);
        background: var(--tint);
      }
      .price-heading {
        margin-bottom: clamp(26px, 3vw, 36px);
        text-align: center;
      }
      .price-heading .eyebrow {
        margin-inline: auto;
        margin-bottom: 18px;
      }
      .price-heading h1 {
        margin-bottom: 10px;
        font-size: clamp(30px, 3vw, 44px);
        line-height: 1;
        letter-spacing:-0.018em;
      }
      .price-heading p {
        margin-bottom: 0;
        color: var(--muted);
        font-size: clamp(14px, 1.2vw, 16px);
        line-height: 1.6;
      }
      .pricing-card-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 380px));
        justify-content: center;
        gap: 18px;
        align-items: stretch;
      }
      .pricing-card {
        position: relative;
        display: flex;
        flex-direction: column;
        min-height: 0;
        overflow: visible;
        border: 1px solid var(--ink);
        border-radius: 10px;
        background: var(--white);
        box-shadow:none;
      }
      .pricing-card--featured {
        border-color: var(--blue);
        box-shadow: 0 18px 40px rgba(33, 100, 245, 0.1);
      }
      .pricing-card__header {
        min-height:110px;
        position: relative;
        padding: 25.5px 28px 18.7px;
      }
      .pricing-card__header::after {
        content: "";
        position: absolute;
        right: 28px;
        bottom: 0;
        left: 28px;
        height: 1px;
        background: var(--line);
        transform: scaleX(0);
        transform-origin: left center;
        transition: transform 800ms var(--service-motion-ease) calc(var(--i, 0) * 80ms + 300ms);
      }
      .pricing-card__header h3 {
        margin: 0;
        color: var(--ink);
        font-size: 22px;
        line-height: 1.3;
        letter-spacing: -0.018em;
      }
      .pricing-card__header p {
        margin: 6px 0 0;
        color: var(--muted);
        font-size: 14px;
        line-height: 1.5;
      }
      .pricing-card__body {
        padding: 18.7px 28px 23.8px;
        display: flex;
        flex: 1;
        flex-direction: column;
      }
      .pricing-card__details { margin: 0; padding: 0; list-style: none; }
      .pricing-card__details li {
        position: relative;
        padding: 10.2px 0 10.2px 32px;
        font-size: 14px;
        line-height: 1.5;
      }
      .pricing-card__details li::before {
        content: "\2713";
        position: absolute;
        top: 12px;
        left: 0;
        display: grid;
        width: 20px;
        height: 20px;
        place-items: center;
        border-radius: 50%;
        background: var(--tint);
        color: var(--blue);
        font-size: 11px;
        font-weight: 700;
      }
      .pricing-card__details strong { display: block; color: var(--ink); font-weight: 700; }
      .pricing-card__details span { display: block; margin-top: 4px; color: var(--muted); }
      .pricing-card__price {
        margin: 0 0 17px;
        padding: 0 0 18.7px;
        border-bottom: 1px solid var(--line);
      }
      .pricing-card__discount {
        display: flex;
        align-items: center;
        gap: 9px;
        min-height: 24px;
      }
      .pricing-card__discount b {
        padding: 4px 8px;
        border-radius: 999px;
        background: #e8f0ff;
        color: var(--blue);
        font-size: 12px;
        line-height: 1.2;
      }
      .pricing-card__discount del {
        color: var(--muted);
        font-size: 12px;
        font-weight: 600;
      }
      .pricing-card__price strong {
        display: block;
        margin-top: 9px;
        font-size: 34px;
        font-weight:750;
        line-height: 1.05;
        letter-spacing:-0.018em;
        white-space: nowrap;
      }
      .pricing-card__price small {
        display: block;
        margin-top: 6px;
        color: var(--muted);
        font-size: 11px;
        font-weight:600;
      }
      .pricing-card__price--regular {
        padding-top: 20.4px;
      }
      .pricing-card__cta {
        display: flex;
        min-height: 43px;
        align-items: center;
        justify-content: center;
        margin-top: 17px;
        border: 1px solid var(--tint);
        border-radius: 7px;
        background: var(--tint);
        color: var(--ink);
        font-size: 15px;
        font-weight: 700;
        transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
      }
      .pricing-card__cta:hover,
      .pricing-card__cta:focus-visible {
        border-color: var(--blue);
        background: var(--blue);
        color: var(--white);
      }
      .pricing-card__early {
        margin: 8px 0 0;
        color: var(--ink);
        font-size: 12px;
        font-weight:700;
      }
      .pricing-card__early small { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; font-weight:600; line-height: 1.5; }
      .pricing-additional {
        margin-top: 17px;
        padding: 18px 21px;
        border: 1px solid var(--line);
        border-radius: 7px;
        background: rgba(255, 255, 255, 0.82);
      }
      .pricing-additional h3 {
        margin: 0 0 14px;
        color: var(--ink);
        font-size: 13px;
        letter-spacing: 0.12em;
      }
      .pricing-additional__grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 21px;
      }
      .pricing-additional p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.65; }
      .pricing-additional strong { display: block; margin-bottom: 7px; color: var(--ink); }
      @media (hover: hover) and (pointer: fine) {
        [data-pricing-motion].is-visible .pricing-card:hover {
          z-index: 1;
          transform: translateY(-8px) scale(1.02);
          box-shadow:none;
        }
      }
      [data-pricing-motion].is-visible .pricing-card:focus-within {
        z-index: 1;
        transform: translateY(-8px) scale(1.02);
        box-shadow:none;
      }
      [data-pricing-motion].is-visible .pricing-card__header::after { transform: scaleX(1); }
      .faq-section {
        padding: clamp(72px, 8vw, 112px) 0;
        background: var(--tint);
      }
      .faq-heading {
        max-width: 960px;
        margin: 0 auto clamp(32px, 4.5vw, 52px);
        display: grid;
        grid-template-columns: minmax(0, 0.8fr) minmax(280px, 1.2fr);
        gap: clamp(28px, 6vw, 80px);
        align-items: end;
      }
      .faq-heading h2 {
        margin: 0;
        font-size: clamp(32px, 4vw, 52px);
        line-height: 1.06;
        letter-spacing:-0.018em;
        word-break: keep-all;
      }
      .faq-heading p {
        max-width: 520px;
        margin: 0;
        color: var(--muted);
        font-size: 14px;
        line-height: 1.75;
        letter-spacing:-0.018em;
        word-break: keep-all;
      }
      .faq-list {
        max-width: 960px;
        margin: 0 auto;
        border-top: 1px solid var(--ink);
      }
      .faq-item {
        border-bottom: 1px solid var(--line);
        background: transparent;
      }
      .faq-item summary {
        min-height: 78px;
        padding: 22px 8px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 24px;
        color: var(--ink);
        font-size: clamp(17px, 1.5vw, 20px);
        font-weight:700;
        line-height: 1.45;
        letter-spacing:-0.018em;
        list-style: none;
        word-break: keep-all;
      }
      .faq-item summary::-webkit-details-marker { display: none; }
      .faq-item summary::marker { content: ""; }
      .faq-item__icon {
        position: relative;
        width: 28px;
        height: 28px;
        flex: 0 0 auto;
        border: 1px solid var(--line);
        border-radius: 50%;
        background: var(--white);
        transition: border-color 300ms ease, transform 300ms var(--service-motion-ease);
      }
      .faq-item__icon::before,
      .faq-item__icon::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 10px;
        height: 1.5px;
        border-radius: 10px;
        background: var(--blue);
        transform: translate(-50%, -50%);
      }
      .faq-item__icon::after { transform: translate(-50%, -50%) rotate(90deg); }
      .faq-item[open] .faq-item__icon { border-color: var(--blue); transform: rotate(45deg); }
      .faq-item__answer {
        max-width: 790px;
        padding: 0 52px 27px 8px;
        color: var(--muted);
        font-size: 14px;
        line-height: 1.8;
        letter-spacing:-0.018em;
        word-break: keep-all;
      }
      .faq-item__answer p { margin: 0; }
      .faq-item__answer p + p { margin-top: 8px; }
      .faq-item__answer strong { color: var(--ink); font-weight:700; }
      .site-footer__inner { display: flex; align-items: flex-start; justify-content: space-between; gap: 48px; }
      .site-footer__main { display: flex; align-items: flex-start; gap: 26px; }
      .site-footer__brand { flex: 0 0 auto; }
      .site-footer__logo { display: block; width: auto; height: 48px; object-fit: contain; }
      .site-footer__details { padding-top: 1px; }
      .site-footer__details p { margin: 0; color: rgba(255, 255, 255, 0.72); font-size: 13px; line-height: 1.8; letter-spacing:-0.018em; }
      .site-footer__details p + p { margin-top: 4px; }
      .site-footer__details strong { color: var(--white); font-weight:700; }
      .site-footer__separator { margin: 0 10px; color: rgba(255, 255, 255, 0.28); }
      .site-footer__details a, .site-footer__nav a { transition: color 300ms ease; }
      .site-footer__details a:hover, .site-footer__details a:focus-visible,
      .site-footer__nav a:hover, .site-footer__nav a:focus-visible { color: var(--white); }
      .site-footer__details a[href^="mailto:goyuweb@gmail.com"] {
        display: inline-flex;
        padding: 5px 9px;
        border-radius: 7px;
        color: var(--blue);
        background: var(--white);
      }
      .site-footer__nav { display: flex; flex-wrap: wrap; gap: 28px; padding-top: 7px; color: rgba(245, 247, 255, 0.82); font-size: 13px; font-weight:600; white-space: nowrap; }
      .site-footer__bottom { margin-top: 32px; padding: 16px 0 23px; display: flex; justify-content: flex-end; border-top: 1px solid rgba(255, 255, 255, 0.14); }
      .site-footer__bottom p { margin: 0; color: rgba(255, 255, 255, 0.72); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; }
      [data-reveal] { opacity: 1; transform: none; }
      .reveal-ready [data-reveal]:not(.is-visible) {
        opacity: 0;
        transform: translateY(24px);
        transition: opacity 1250ms ease, transform 1250ms ease;
      }
      @media (max-width: 880px) {
        .section-heading { grid-template-columns: 1fr; gap: 22px; }
        .section-heading h2 { white-space: normal; }
        .pricing-card-grid { grid-template-columns: 1fr; }
        .pricing-card { min-height: 0; }
        .pricing-card__description { min-height: 0; }
        .pricing-additional__grid { grid-template-columns: 1fr; }
        .faq-heading { grid-template-columns: 1fr; gap: 18px; }
      }
      @media (max-width: 680px) {
        .shell { width: min(100% - 32px, 1280px); }
        .site-header { height: 60px; padding: 0 16px; }
        .brand, .brand img { height: 26px; }
        .header-nav { display: none; }
        .mobile-header-actions { display: flex; align-items: center; gap: 6px; }
        .mobile-header-inquiry, .mobile-menu-toggle { display: inline-flex; }
        .mobile-nav { position: absolute; top: calc(100% + 10px); right: 12px; left: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--white); box-shadow:none; }
        .mobile-nav a { display: flex; min-height: 44px; align-items: center; padding: 0 12px; border-radius: 10px; background: var(--surface); font-size: 14px; font-weight:700; }
        .site-header.is-mobile-menu-open .mobile-nav { display: grid; }
        main { padding-top: 60px; }
        .price-heading h1 { font-size: 30px; }
        .price-heading p { margin-top: 5px; }
        [data-pricing-motion] .pricing-card,
        [data-service-heading-motion] h2,
        [data-service-heading-motion] p { --service-motion-distance: 24px; }
        .service-grid { grid-template-columns: 1fr; }
        .service-card { min-height: 0; border-radius: 10px; }
        .service-card__visual { min-height: 165px; border-radius: 10px; }
        .service-card__icon { width: min(58%, 158px); }
        .faq-section { padding: 64px 0 72px; }
        .faq-heading { margin-bottom: 28px; }
        .faq-heading h2 { font-size: 32px; }
        .faq-heading p { font-size: 13px; }
        .faq-item summary { min-height: 68px; padding: 18px 2px; gap: 16px; font-size: 16px; }
        .faq-item__icon { width: 26px; height: 26px; }
        .faq-item__answer { padding: 0 38px 22px 2px; font-size: 13px; line-height: 1.75; }
        .site-footer { padding-top: 32px; }
        .site-footer__inner { width: min(100% - 32px, 1180px); display: grid; grid-template-columns: 1fr; gap: 26px; }
        .site-footer__main { gap: 16px; }
        .site-footer__logo { width: auto; height: 42px; }
        .site-footer__details p, .site-footer__nav { font-size: 11px; }
        .site-footer__nav { gap: 18px; padding-top: 0; }
        .site-footer__bottom { width: min(100% - 32px, 1180px); margin-top: 26px; padding: 14px 0 20px; justify-content: flex-start; }
        .site-footer__bottom p { font-size: 8px; }
      }
      @media (prefers-reduced-motion: reduce) {
        html { scroll-behavior: auto; }
        *, *::before, *::after {
          animation: none !important;
          scroll-behavior: auto !important;
          transition: none !important;
          }
          [data-reveal] { opacity: 1; transform: none; }
          [data-price-heading-motion] *,
          [data-pricing-motion] .pricing-card,
          [data-pricing-motion] .pricing-card__price,
          [data-service-heading-motion] *,
          [data-service-card-motion],
          [data-service-card-motion] .service-card__icon {
            opacity: 1 !important;
            clip-path: none !important;
            transform: none !important;
            transition: none !important;
          }
          .pricing-card__header::after { transform: scaleX(1) !important; transition: none !important; }
        }

      :focus-visible {
        outline: 3px solid var(--blue);
        outline-offset: 3px;
      }
      .site-footer :focus-visible {
        outline-color: var(--white);
      }

      @media (hover: none) and (pointer: coarse) {
        .header-cta,
        .header-cta:hover,
        .header-cta:focus-visible,
        .button,
        .button:hover,
        .button:focus-visible,
        .pricing-card__cta,
        .pricing-card__cta:hover,
        .pricing-card__cta:focus-visible {
          border-color: var(--ink);
          color: var(--ink);
          background-color: var(--white) !important;
          background-image: none !important;
          background-position: 0 0 !important;
          transform: none;
          transition: transform 120ms ease, border-color 120ms ease, color 120ms ease;
          -webkit-tap-highlight-color: transparent;
        }

        .header-cta:active,
        .button:active,
        .pricing-card__cta:active {
          border-color: var(--blue);
          color: var(--blue);
          transform: scale(0.97);
        }
      }

      /* --- Service motion (approved plan) --- */
      .pricing-card { transition: transform 300ms ease, border-color 300ms ease; }
      .reveal-ready .pricing-card-grid.is-visible .pricing-card__cta { animation: riseIn 0.7s ease-out both; animation-delay: calc(var(--i, 0) * 80ms + 800ms); }
      .pricing-card__cta::after {
        content: "→";
        display: inline-block;
        width: 0;
        margin-left: 0;
        opacity: 0;
        transform: translateX(-4px);
        transition: opacity 250ms ease, transform 250ms ease, width 250ms ease, margin-left 250ms ease;
      }
      .pricing-card__cta:hover::after,
      .pricing-card__cta:focus-visible::after { width: 1em; margin-left: 6px; opacity: 1; transform: none; }
      .faq-item summary span:first-child { transition: color 200ms ease; }
      .faq-item summary:hover span:first-child { color: var(--blue); }
      /* Answer unfolds instead of snapping (progressive: browsers without ::details-content keep today's snap). */
      .faq-item { interpolate-size: allow-keywords; }
      .faq-item::details-content {
        block-size: 0;
        overflow: hidden;
        transition: block-size 300ms ease, content-visibility 300ms allow-discrete;
      }
      .faq-item[open]::details-content { block-size: auto; }
/* Featured plans and additional consultation options. */
.pricing-card.pricing-card--featured,.offer .offer-summary {
  position:relative;
  isolation:isolate;
  border:3px solid #3978ff;
  box-shadow:0 16px 44px #2164f52b;
}
.pricing-card--featured::before,.offer-summary::before {
  content:"✦"; position:absolute; right:18px; top:120px;
  color:#6794ff; opacity:.18; font-size:110px; line-height:1;
  pointer-events:none; z-index:-1;
  animation:plan-sparkle 5s ease-in-out infinite;
}
.pricing-card--featured::after,.offer-summary::after {
  content:"✦"; position:absolute; right:30px; bottom:85px;
  color:#3978ff; opacity:.2; font-size:65px;
  pointer-events:none; z-index:-1;
  animation:plan-sparkle 5s 1.5s ease-in-out infinite;
}
.pricing-card--featured .pricing-card__cta {
  background:#2164f5;color:white;border-color:#2164f5;
}
.pricing-options {margin:64px auto 36px;max-width:778px}
.pricing-options h2 {text-align:center;font-size:24px;margin-bottom:30px}
.pricing-options__grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.pricing-card--renewal {border:2px solid #9b86dc}
.pricing-options .pricing-card__cta {margin-top:auto}
.pricing-options .pricing-card__details {margin-bottom:24px}
@keyframes plan-sparkle {
  0%,100% {transform:translateY(0) rotate(-8deg) scale(.92);opacity:.14}
  50% {transform:translateY(-9px) rotate(8deg) scale(1.06);opacity:.28}
}
@media(max-width:680px) {.pricing-options__grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce) {
  .pricing-card--featured::before,.pricing-card--featured::after,
  .offer-summary::before,.offer-summary::after {animation:none}
}
.plan-star-badge {
  position:absolute;
  top:-17px;
  left:50%;
  transform:translateX(-50%);
  z-index:2;
  display:block;
  padding:5px 18px;
  border-radius:999px;
  background:linear-gradient(110deg,#3474ef,#79aaff);
  color:#ffe369;
  font-size:20px;
  line-height:24px;
  white-space:nowrap;
  box-shadow:0 5px 18px #2164f540;
  pointer-events:none;
}
.pricing-renewal {margin-top:64px}
.pricing-divider {display:flex;align-items:center;gap:18px;justify-content:center;margin:0 0 40px;color:var(--muted);font-size:15px;font-weight:600;text-align:center}
.pricing-divider::before,.pricing-divider::after {content:"";height:1px;background:var(--line);flex:1}
.pricing-single {width:min(100%,380px);margin-inline:auto}
.pricing-renewal .pricing-card--renewal {position:relative;isolation:isolate;border:2px solid #a08bdc;box-shadow:0 14px 32px #8470c31a}
.pricing-card--renewal .plan-star-badge {background:linear-gradient(110deg,#9476d8,#b79eea)}
.admin-plans {padding:72px 0 80px;background:var(--white);border-block:1px solid var(--line)}
.admin-plans .price-heading {margin-bottom:48px}
.admin-plans .price-heading h2 {font-size:clamp(30px,3vw,44px);line-height:1.2;margin-bottom:14px}
.admin-plan-grid .pricing-card {background:var(--white)}
.admin-plan-grid .pricing-card__body,.pricing-single .pricing-card__body {gap:0}
.admin-plan-grid .pricing-card__details,.pricing-single .pricing-card__details {margin-bottom:24px}
.admin-plan-grid .pricing-card__cta,.pricing-single .pricing-card__cta {margin-top:auto}
.admin-plan-grid .pricing-card__header {min-height:110px}
.admin-plans__note {text-align:center;color:var(--muted);font-size:13px;margin:24px 0 0}
.service-notices {padding:56px 0;background:var(--tint);border-top:1px solid var(--line)}
.service-notices .pricing-additional {max-width:1000px;margin:0 auto;padding:28px 32px;background:var(--white);border-radius:14px}
.service-notices h2 {font-size:18px;margin:0 0 18px}
.service-notices__list {margin:0;padding-left:20px;color:var(--muted);font-size:14px;line-height:1.85;word-break:keep-all}
.service-notices__list li+li {margin-top:10px}
@media(max-width:880px) {
  .admin-plans .admin-plan-grid {grid-template-columns:minmax(0,480px)}
  .admin-plan-grid {row-gap:32px}
  .pricing-single {max-width:480px}
  .admin-plan-grid .pricing-card__header {min-height:0}
}
@media(max-width:680px) {
  .admin-plans {padding:52px 0}
  .pricing-renewal {margin-top:48px}
  .pricing-divider {font-size:13px;gap:10px}
  .service-notices {padding:36px 0}
  .service-notices .pricing-additional {padding:24px 20px}
  .service-notices__list {font-size:13px}
}

/* Shared proportions for the four blue website illustrations. */
.service-card__visual .service-card__icon--web { width: min(88%, 216px); aspect-ratio: 4 / 3; }