/* ==========================================================================
   Corporate LP Design System v4.3 — Layout & Navigation styles
   ──────────────────────────────────────────────────────────────────────────
   Header / Site Nav, Footer, Tabs, Accordion, Table, Pagination, Breadcrumb,
   Modal, Tooltip. Consumes tokens from `colors_and_type.css`. Class names
   match the production wireframe (`pinrich_corporate_wireframe_v32_rewrite.html`)
   so existing markup ports 1:1 to the design system.

   File layout (LP loads three files now):
     <link rel="stylesheet" href="/path/to/colors_and_type.css">
     <link rel="stylesheet" href="/path/to/assets/components.css">  // form / card / alert / chip / chat-dock / release-notice
     <link rel="stylesheet" href="/path/to/assets/layout.css">      // THIS FILE — header / footer / tabs / table / etc.
     <link rel="stylesheet" href="/path/to/assets/logo.css">

   Scope of this file
   ------------------
   • Header (`.site-header` / `.header-nav` / `.nav-item` / `.nav-cta` / `.nav-login` /
     `.megamenu` / `.hamburger` / `.mobile-drawer`) — sticky top nav (64px = `--height-topnav`),
     megamenu dropdown, mobile hamburger drawer with accordion sub-menus. Includes the
     `body.is-top-page` inverse style for navy hero pages.
   • Footer (`.site-footer` / `.footer-inner` / `.footer-section` / `.footer-link` etc.) —
     dark footer, navy-bg, grouped product links, legal row.
   • Tabs (`.tabs` / `.tab` / `.tab-panel`) — inline tab bar plus mobile-scroll variant.
   • Accordion (`.accordion` / `.accordion-item` / `.accordion-toggle` / `.accordion-panel`) —
     FAQ / feature-detail collapsible blocks.
   • Table (`.table`) — pricing comparison / feature comparison.
   • Pagination (`.pagination` / `.pg-btn`) — News / Press list pagination.
   • Breadcrumb (`.breadcrumb`) — inline breadcrumb for News detail / Press detail.
   • Modal (`.modal-backdrop` / `.modal` / `.modal__header` / `.modal__body` /
     `.modal__footer`) — built on `--popover` tokens.
   • Tooltip (`.tooltip-wrap[data-tooltip]`) — pure-CSS hover tooltip on `--popover` tokens.

   Tokens used (no new tokens added; everything maps to existing colors_and_type.css)
   ---------------------------------------------------------------------------------
     --background / --card / --foreground / --foreground-subtle / --muted /
     --muted-foreground / --primary / --primary-foreground / --primary-hover /
     --primary-soft / --accent / --border / --border-strong / --popover /
     --popover-foreground / --shadow-sm / --shadow-md / --shadow-lg / --shadow-xl /
     --radius-sm / --radius-md / --radius-lg / --radius-full /
     --sp-1..16 / --control-h-md / --control-h-sm / --control-px-md /
     --text-body-sm / --text-body-md / --text-body-lg / --text-caption /
     --text-display-sm / --text-display-md / --fs-subheading /
     --font-weight-medium / --font-weight-semibold / --font-weight-bold /
     --tracking-tight / --tracking-normal / --tracking-wide /
     --duration-fast / --duration-base / --duration-slow / --easing /
     --ring-focus / --height-topnav / --container-content / --page-padding-x

   Naming
   ------
   • Block-level names (`site-header`, `site-footer`, `mobile-drawer`) match the
     wireframe HTML; do not rename.
   • Variants follow shadcn vocabulary where applicable.
   ========================================================================== */

      /* ============================================================ */
      /*  Site Header — sticky top-nav with megamenu                  */
      /* ------------------------------------------------------------ */
      /*  Height = `--height-topnav` (64px). Sticky. Contains the     */
      /*  logo, primary nav (`.nav-item`), CTA (`.nav-cta`), and a    */
      /*  login pill (`.nav-login`). Megamenus open below the bar.    */
      /*  On the top page (`body.is-top-page`), the bar inverts to    */
      /*  navy bg / white-out logo via overrides at the bottom of this */
      /*  block.                                                      */
      /* ============================================================ */
      .site-header {
        position: sticky;
        top: 0;
        z-index: 100;
        background: var(--card);
        border-bottom: 1px solid var(--border);
      }
      .header-inner {
        max-width: var(--container-content);
        margin: 0 auto;
        padding: 0 var(--page-padding-x);
        height: var(--height-topnav);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--sp-6);
      }
      .header-nav {
        display: flex;
        align-items: center;
        gap: var(--sp-2);
      }
      .header-actions {
        display: flex;
        align-items: center;
        gap: var(--sp-2);
      }

      /* nav-item — top-level menu trigger */
      .nav-item {
        font-size: var(--text-body-md);
        font-weight: var(--font-weight-medium);
        color: var(--foreground);
        padding: 0 var(--sp-4);
        height: var(--control-h-md);
        display: inline-flex;
        align-items: center;
        gap: 4px;
        cursor: pointer;
        border-radius: var(--radius-md);
        position: relative;
        transition:
          background var(--duration-fast) ease,
          color var(--duration-fast) ease;
      }
      .nav-item:hover {
        background: var(--accent);
        color: var(--primary);
      }
      .nav-item:hover .chev {
        color: var(--primary);
      }
      .nav-item.is-active {
        background: var(--accent);
        color: var(--primary);
      }
      .nav-item.is-current {
        color: var(--primary);
        font-weight: var(--font-weight-semibold);
        background: transparent;
      }
      .nav-item.is-current:hover {
        background: var(--accent);
        color: var(--primary);
      }
      .nav-item.is-current::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: -13px;
        height: 2px;
        background: var(--primary);
      }
      .nav-item .chev {
        font-size: var(--text-caption);
        color: var(--foreground-subtle);
        transition: transform var(--duration-fast) ease;
      }
      .nav-item.is-active .chev {
        transform: rotate(180deg);
      }

      /* nav-cta — primary navy pill ("資料請求" etc.) */
      .nav-cta {
        font-size: var(--text-body-md);
        font-weight: var(--font-weight-semibold);
        color: var(--primary-foreground);
        background: var(--primary);
        border: 1px solid var(--primary);
        padding: 0 var(--sp-4);
        height: var(--control-h-md);
        display: inline-flex;
        align-items: center;
        border-radius: var(--radius-md);
        cursor: pointer;
        white-space: nowrap;
        flex-shrink: 0;
        transition:
          background var(--duration-fast) ease,
          border-color var(--duration-fast) ease;
      }
      .nav-cta:hover {
        background: var(--primary-hover);
        border-color: var(--primary-hover);
      }

      .nav-divider {
        width: 1px;
        height: 20px;
        background: var(--border);
        margin: 0 var(--sp-2);
        flex-shrink: 0;
      }

      /* nav-login — outlined "ログイン" pill with user icon */
      .nav-login {
        font-size: var(--text-body-sm);
        font-weight: var(--font-weight-semibold);
        color: var(--foreground);
        background: var(--card);
        border: 1px solid var(--border-strong);
        padding: 0 var(--sp-4);
        height: var(--control-h-md);
        display: inline-flex;
        align-items: center;
        gap: 6px;
        cursor: pointer;
        border-radius: var(--radius-md);
        transition:
          background var(--duration-fast) ease,
          border-color var(--duration-fast) ease,
          color var(--duration-fast) ease;
      }
      .nav-login::before {
        content: "";
        width: 14px;
        height: 14px;
        background-color: var(--foreground);
        -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8' r='4'/><path d='M4 21v-1a8 8 0 0 1 16 0v1'/></svg>");
        mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8' r='4'/><path d='M4 21v-1a8 8 0 0 1 16 0v1'/></svg>");
        -webkit-mask-size: contain;
        mask-size: contain;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        flex-shrink: 0;
      }
      .nav-login:hover {
        background: var(--accent);
        color: var(--primary);
      }
      .nav-login:hover::before {
        background-color: var(--primary);
      }
      .nav-login:hover .chev {
        color: var(--primary);
      }
      .nav-login.is-active {
        background: var(--accent);
        border-color: var(--primary);
        color: var(--primary);
      }
      .nav-login .chev {
        font-size: var(--text-caption);
        color: var(--foreground-subtle);
        transition: transform var(--duration-fast) ease;
      }
      .nav-login.is-active .chev {
        transform: rotate(180deg);
      }

      /* ============================================================ */
      /*  Megamenu — dropdown panel anchored under the header         */
      /* ============================================================ */
      .megamenu {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--card);
        border-bottom: 1px solid var(--border);
        box-shadow: var(--shadow-md);
        display: none;
        z-index: 99;
      }
      .megamenu.is-open {
        display: block;
      }
      .megamenu-inner {
        max-width: var(--container-content);
        margin: 0 auto;
        padding: var(--sp-8) var(--page-padding-x);
      }
      .mm-grid-products {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: var(--sp-8);
      }
      .mm-grid-solutions {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--sp-8);
        max-width: 900px;
      }
      .mm-grid-login {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--sp-8) var(--sp-12);
        align-items: start;
        max-width: 720px;
      }

      .mm-cat-title {
        font-size: var(--text-body-md);
        font-weight: var(--font-weight-bold);
        color: var(--foreground);
        padding-bottom: var(--sp-2);
        margin-bottom: var(--sp-3);
        border-bottom: 1px solid var(--border);
      }
      .mm-link {
        display: block;
        font-size: var(--text-body-md);
        color: var(--muted-foreground);
        padding: 6px 0;
        cursor: pointer;
        transition: color var(--duration-fast) ease;
      }
      .mm-link:hover {
        color: var(--primary);
      }
      .mm-link.sub-link-mm {
        padding-left: var(--sp-4);
        font-size: var(--text-caption);
        color: var(--muted-foreground);
      }

      /* mm-solution-item — card-shaped solution links inside the solutions megamenu */
      .mm-solution-item {
        display: block;
        padding: var(--sp-5);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        background: var(--card);
        cursor: pointer;
        transition:
          border-color var(--duration-fast) ease,
          background var(--duration-fast) ease,
          transform var(--duration-fast) ease;
      }
      .mm-solution-item:hover {
        border-color: var(--primary);
        background: var(--primary-soft);
      }
      .mm-solution-item:active {
        transform: scale(0.997);
      }
      .mm-solution-eyebrow {
        font-size: var(--text-caption);
        color: var(--foreground-subtle);
        letter-spacing: var(--tracking-wide);
        font-weight: var(--font-weight-semibold);
        margin-bottom: var(--sp-2);
      }
      .mm-solution-title {
        font-size: var(--text-body-lg);
        font-weight: var(--font-weight-bold);
        color: var(--foreground);
        margin-bottom: var(--sp-2);
        line-height: 1.4;
      }
      .mm-solution-desc {
        font-size: var(--text-caption);
        color: var(--muted-foreground);
        line-height: 1.6;
      }

      /* ============================================================ */
      /*  Hamburger button (mobile)                                   */
      /* ============================================================ */
      .header-mobile-actions {
        display: none;
        align-items: center;
        gap: var(--sp-3);
        flex-shrink: 0;
      }
      .nav-cta--mobile {
        display: none;
      }
      .hamburger {
        display: none;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 44px;
        height: 44px;
        background: transparent;
        border: none;
        padding: 0;
        cursor: pointer;
        gap: 5px;
      }
      .hamburger-bar {
        display: block;
        width: 22px;
        height: 2px;
        background: var(--foreground);
        border-radius: var(--radius-full);
        transition:
          transform var(--duration-base) var(--easing),
          opacity var(--duration-fast) var(--easing);
      }
      .hamburger[aria-expanded="true"] .hamburger-bar:nth-child(1) {
        transform: translateY(7px) rotate(45deg);
      }
      .hamburger[aria-expanded="true"] .hamburger-bar:nth-child(2) {
        opacity: 0;
      }
      .hamburger[aria-expanded="true"] .hamburger-bar:nth-child(3) {
        transform: translateY(-7px) rotate(-45deg);
      }

      /* ============================================================ */
      /*  Mobile drawer — full-screen accordion menu                  */
      /* ============================================================ */
      .mobile-drawer {
        display: none;
        position: fixed;
        top: var(--height-topnav);
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--background);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        z-index: 99;
        padding: 0 0 var(--sp-12);
      }
      .mobile-drawer.is-open {
        display: block;
      }
      .mobile-drawer.is-open {
        padding-bottom: 140px;
      }

      .mobile-drawer-accordion {
        border-bottom: 1px solid var(--border);
      }
      .mobile-drawer-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        min-height: 56px;
        padding: var(--sp-4) var(--page-padding-x);
        background: transparent;
        border: none;
        font-family: var(--font-sans);
        font-size: var(--fs-subheading);
        font-weight: var(--font-weight-semibold);
        color: var(--foreground);
        cursor: pointer;
        text-align: left;
        letter-spacing: var(--tracking-normal);
      }
      .mobile-drawer-toggle:hover,
      .mobile-drawer-toggle:active {
        background: var(--accent);
      }
      .mobile-drawer-toggle:focus-visible {
        outline: none;
        box-shadow: var(--ring-focus);
      }
      .mobile-drawer-toggle[aria-expanded="true"] {
        color: var(--primary);
      }

      .mobile-drawer-chev {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 28px;
        font-size: 16px;
        color: var(--foreground-subtle);
        transition: transform var(--duration-base) var(--easing);
      }
      .mobile-drawer-toggle[aria-expanded="true"] .mobile-drawer-chev {
        transform: rotate(180deg);
        color: var(--primary);
      }

      .mobile-drawer-panel {
        display: none;
        padding: var(--sp-2) 0 var(--sp-5);
        background: var(--background);
      }
      .mobile-drawer-panel.is-open {
        display: block;
      }

      .mobile-drawer-group {
        background: transparent;
        border: none;
        border-radius: 0;
        padding: 0;
        margin-bottom: var(--sp-6);
      }
      .mobile-drawer-group:last-child {
        margin-bottom: 0;
      }
      .mobile-drawer-subcat {
        font-size: var(--fs-body);
        font-weight: var(--font-weight-semibold);
        color: var(--muted-foreground);
        margin: 0;
        padding: var(--sp-2) var(--page-padding-x);
        border: none;
        letter-spacing: 0.04em;
        line-height: 1.4;
        background: transparent;
      }
      .mobile-drawer-group .mobile-drawer-link {
        padding-left: var(--page-padding-x);
      }
      .mobile-drawer-grid {
        display: flex;
        flex-direction: column;
        gap: 0;
      }
      .mobile-drawer-link {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--sp-3);
        font-size: var(--fs-lead);
        font-weight: var(--font-weight-regular);
        color: var(--foreground);
        padding: var(--sp-3) var(--page-padding-x);
        cursor: pointer;
        min-height: 48px;
        line-height: 1.45;
      }
      .mobile-drawer-link::after {
        content: "›";
        color: var(--foreground-subtle);
        font-size: 20px;
        line-height: 1;
        flex-shrink: 0;
        opacity: 0.4;
        font-weight: var(--font-weight-regular);
        transition: opacity var(--duration-fast) ease;
      }
      .mobile-drawer-link:hover,
      .mobile-drawer-link:active {
        background: var(--muted);
      }
      .mobile-drawer-link:hover::after,
      .mobile-drawer-link:active::after {
        opacity: 0.7;
      }

      .mobile-drawer-single {
        border-bottom: 1px solid var(--border);
      }
      .mobile-drawer-single-link {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 56px;
        padding: var(--sp-4) var(--page-padding-x);
        font-size: var(--fs-subheading);
        font-weight: var(--font-weight-semibold);
        color: var(--foreground);
        cursor: pointer;
        letter-spacing: var(--tracking-normal);
      }
      .mobile-drawer-single-link::after {
        content: "›";
        color: var(--foreground-subtle);
        font-size: 22px;
        line-height: 1;
        margin-left: var(--sp-2);
        opacity: 0.4;
        font-weight: var(--font-weight-regular);
      }
      .mobile-drawer-single-link:hover,
      .mobile-drawer-single-link:active {
        background: var(--accent);
      }

      /* ============================================================ */
      /*  body.is-top-page — header inversion for navy hero pages     */
      /* ============================================================ */
      body.is-top-page .site-header {
        background: var(--primary);
        border-bottom-color: transparent;
      }
      body.is-top-page .nav-item {
        color: var(--primary-foreground);
      }
      body.is-top-page .nav-item:hover {
        background: rgb(255 255 255 / 0.1);
      }
      body.is-top-page .nav-item.is-active {
        background: rgb(255 255 255 / 0.15);
        color: var(--primary-foreground);
      }
      body.is-top-page .nav-item .chev {
        color: rgb(255 255 255 / 0.7);
      }
      body.is-top-page .nav-item.is-current {
        color: var(--primary-foreground);
        background: transparent;
      }
      body.is-top-page .nav-item.is-current:hover {
        background: rgb(255 255 255 / 0.1);
      }
      body.is-top-page .nav-item.is-current::after {
        background: var(--primary-foreground);
      }

      body.is-top-page .nav-cta {
        background: var(--primary-foreground);
        color: var(--primary);
        border-color: var(--primary-foreground);
      }
      body.is-top-page .nav-cta:hover {
        background: var(--muted);
        border-color: var(--muted);
      }
      body.is-top-page .nav-divider {
        background: rgb(255 255 255 / 0.2);
      }

      body.is-top-page .nav-login {
        background: transparent;
        color: rgb(255 255 255 / 0.85);
        border-color: transparent;
      }
      body.is-top-page .nav-login::before {
        background-color: rgb(255 255 255 / 0.85);
      }
      body.is-top-page .nav-login:hover {
        background: rgb(255 255 255 / 0.1);
        color: var(--primary-foreground);
        border-color: transparent;
      }
      body.is-top-page .hamburger-bar {
        background: var(--primary-foreground);
      }
      body.is-top-page .megamenu {
        border-top: 1px solid rgb(255 255 255 / 0.1);
      }

      /* ============================================================ */
      /*  Site Footer — dark navy footer with grouped product links   */
      /* ============================================================ */
      .site-footer {
        background: var(--foreground);
        color: var(--card);
        padding: var(--sp-16) 0 var(--sp-6);
        margin-top: var(--sp-20);
      }
      .footer-inner {
        max-width: var(--container-content);
        margin: 0 auto;
        padding: 0 var(--page-padding-x);
      }
      .footer-brand-row {
        padding-bottom: var(--sp-10);
        border-bottom: 1px solid rgb(255 255 255 / 0.12);
        margin-bottom: var(--sp-10);
      }
      .footer-brand-row .pr-logo {
        display: inline-flex;
        margin-bottom: var(--sp-3);
      }
      .footer-brand-text {
        font-size: var(--text-body-sm);
        color: var(--foreground-subtle);
        line-height: 1.7;
        max-width: 720px;
      }
      .footer-brand-meta {
        display: flex;
        flex-wrap: wrap;
        gap: var(--sp-2) var(--sp-8);
        margin-top: var(--sp-4);
        font-size: var(--text-body-sm);
        color: var(--foreground-subtle);
      }
      .footer-brand-meta strong {
        color: var(--card);
        font-weight: var(--font-weight-semibold);
        margin-right: var(--sp-1);
      }

      .footer-section {
        margin-bottom: var(--sp-10);
      }
      .footer-section-title,
      .footer-col-title {
        font-size: var(--text-body-md);
        font-weight: var(--font-weight-bold);
        color: var(--card);
        padding-bottom: var(--sp-2);
        margin-bottom: var(--sp-5);
        border-bottom: 1px solid rgb(255 255 255 / 0.12);
        letter-spacing: var(--tracking-wide);
      }
      .footer-col-title {
        margin-bottom: var(--sp-4);
      }

      .footer-products-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: var(--sp-6);
      }
      .footer-cols-secondary {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--sp-6);
        padding-bottom: var(--sp-6);
      }

      .footer-subcat {
        font-size: var(--text-body-sm);
        color: var(--card);
        letter-spacing: var(--tracking-wide);
        margin-bottom: var(--sp-3);
        font-weight: var(--font-weight-bold);
        padding-left: 0;
      }
      .footer-link {
        font-size: var(--text-body-sm);
        color: var(--foreground-subtle);
        padding: 4px 0;
        cursor: pointer;
        display: block;
        transition: color var(--duration-fast) ease;
        font-weight: var(--font-weight-regular);
      }
      .footer-link.footer-link--sub {
        padding-left: var(--sp-3);
        font-size: var(--text-body-sm);
        color: var(--foreground-subtle);
      }
      .footer-link:hover {
        color: var(--card);
      }

      .footer-bottom {
        border-top: 1px solid rgb(255 255 255 / 0.12);
        margin-top: var(--sp-6);
        padding-top: var(--sp-4);
        font-size: var(--text-body-sm);
        color: var(--foreground-subtle);
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      @media (max-width: 900px) {
        .footer-products-grid {
          grid-template-columns: repeat(2, 1fr);
        }
        .footer-cols-secondary {
          grid-template-columns: repeat(2, 1fr);
        }
        .site-footer .footer-link {
          padding-top: 10px;
          padding-bottom: 10px;
          min-height: 44px;
          box-sizing: border-box;
        }
      }
      @media (max-width: 600px) {
        .footer-products-grid,
        .footer-cols-secondary {
          grid-template-columns: 1fr;
        }
      }

      /* ============================================================ */
      /*  Tabs — inline tab bar                                       */
      /* ------------------------------------------------------------ */
      /*  Used for FAQ / 業態切り替え / 機能切替. 44px tap-target,    */
      /*  pill-style active state, horizontal scroll on mobile.       */
      /* ============================================================ */
      .tabs {
        display: flex;
        flex-direction: column;
        gap: var(--sp-5);
      }
      .tabs__list {
        display: inline-flex;
        align-items: center;
        gap: 2px;
        padding: 3px;
        background: var(--muted);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        flex-wrap: wrap;
      }
      .tab {
        flex-shrink: 0;
        padding: 0 var(--sp-4);
        height: var(--control-h-md);
        display: inline-flex;
        align-items: center;
        font-family: var(--font-sans);
        font-size: var(--text-body-md);
        font-weight: var(--font-weight-medium);
        color: var(--foreground);
        background: transparent;
        border: none;
        border-radius: calc(var(--radius-md) - 2px);
        cursor: pointer;
        white-space: nowrap;
        transition:
          background var(--duration-base) var(--easing),
          color var(--duration-base) var(--easing);
      }
      .tab:hover:not([aria-selected="true"]) {
        background: var(--accent);
      }
      .tab[aria-selected="true"] {
        background: var(--card);
        color: var(--primary);
        font-weight: var(--font-weight-semibold);
        box-shadow: var(--shadow-sm);
      }
      .tab:focus-visible {
        outline: none;
        box-shadow: var(--ring-focus);
      }

      /* underline variant — minimal style for dense tab groups */
      .tabs--underline .tabs__list {
        background: transparent;
        border: none;
        border-bottom: 1px solid var(--border);
        border-radius: 0;
        padding: 0;
        gap: 0;
        width: 100%;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
      }
      .tabs--underline .tabs__list::-webkit-scrollbar {
        display: none;
      }
      .tabs--underline .tab {
        border-radius: 0;
        background: transparent;
        position: relative;
        padding: 0 var(--sp-4);
      }
      .tabs--underline .tab[aria-selected="true"] {
        background: transparent;
        box-shadow: none;
        color: var(--primary);
        font-weight: var(--font-weight-semibold);
      }
      .tabs--underline .tab[aria-selected="true"]::after {
        content: "";
        position: absolute;
        left: var(--sp-3);
        right: var(--sp-3);
        bottom: 0;
        height: 2px;
        background: var(--primary);
      }

      .tab-panel {
        display: none;
      }
      .tab-panel.is-active {
        display: block;
      }

      /* ============================================================ */
      /*  Accordion — FAQ / collapsible section                       */
      /* ============================================================ */
      .accordion {
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        background: var(--card);
        overflow: hidden;
      }
      .accordion-item + .accordion-item {
        border-top: 1px solid var(--border);
      }
      .accordion-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        min-height: 56px;
        padding: var(--sp-4) var(--sp-5);
        background: transparent;
        border: none;
        font-family: var(--font-sans);
        font-size: var(--fs-subheading);
        line-height: var(--fs-subheading-lh);
        font-weight: var(--font-weight-semibold);
        color: var(--foreground);
        cursor: pointer;
        text-align: left;
        letter-spacing: var(--tracking-normal);
        transition:
          background var(--duration-fast) ease,
          color var(--duration-fast) ease;
      }
      .accordion-toggle:hover {
        background: var(--accent);
      }
      .accordion-toggle:focus-visible {
        outline: none;
        box-shadow: var(--ring-focus);
      }
      .accordion-toggle[aria-expanded="true"] {
        color: var(--primary);
      }
      .accordion-chev {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        font-size: 14px;
        color: var(--foreground-subtle);
        transition: transform var(--duration-base) var(--easing);
        flex-shrink: 0;
        margin-left: var(--sp-3);
      }
      .accordion-toggle[aria-expanded="true"] .accordion-chev {
        transform: rotate(180deg);
        color: var(--primary);
      }
      .accordion-panel {
        display: none;
        padding: 0 var(--sp-5) var(--sp-5);
        font-size: var(--text-body-md);
        color: var(--muted-foreground);
        line-height: 1.8;
      }
      .accordion-panel.is-open {
        display: block;
      }

      /* ghost variant — no card surround, dividers only */
      .accordion--ghost {
        border: none;
        border-radius: 0;
        background: transparent;
      }
      .accordion--ghost .accordion-item {
        border-top: 1px solid var(--border);
      }
      .accordion--ghost .accordion-item:last-child {
        border-bottom: 1px solid var(--border);
      }
      .accordion--ghost .accordion-toggle {
        padding-left: 0;
        padding-right: 0;
      }
      .accordion--ghost .accordion-panel {
        padding-left: 0;
        padding-right: 0;
        padding-bottom: var(--sp-4);
      }

      /* ============================================================ */
      /*  Table — pricing comparison / feature comparison             */
      /* ============================================================ */
      .table {
        width: 100%;
        border-collapse: collapse;
        font-size: var(--text-body-md);
        background: var(--card);
      }
      .table th,
      .table td {
        border-bottom: 1px solid var(--border);
        padding: var(--sp-3) var(--sp-4);
        text-align: left;
        vertical-align: top;
        line-height: 1.7;
      }
      .table thead th {
        background: var(--muted);
        color: var(--foreground);
        font-weight: var(--font-weight-bold);
        font-size: var(--text-body-sm);
        letter-spacing: var(--tracking-wide);
        border-bottom: 1px solid var(--border-strong);
        white-space: nowrap;
      }
      .table tbody th {
        background: var(--muted);
        color: var(--muted-foreground);
        font-weight: var(--font-weight-semibold);
        width: 200px;
      }
      .table tbody td {
        color: var(--foreground);
      }
      .table tbody tr:last-child th,
      .table tbody tr:last-child td {
        border-bottom: none;
      }

      /* compact — denser rows for long tables */
      .table--compact th,
      .table--compact td {
        padding: var(--sp-2) var(--sp-3);
      }

      /* striped — alternate row backgrounds for legibility on long tables */
      .table--striped tbody tr:nth-child(odd) td {
        background: var(--muted);
      }

      /* bordered — outer border + radius for standalone tables */
      .table--bordered {
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        overflow: hidden;
      }

      /* responsive wrapper — horizontal scroll for narrow viewports */
      .table-wrap {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: var(--radius-lg);
      }

      /* feature comparison helpers — checkmarks / dashes / labels */
      .table .table__check {
        color: var(--primary);
        font-weight: var(--font-weight-bold);
      }
      .table .table__dash {
        color: var(--foreground-subtle);
      }
      .table .table__highlight {
        background: var(--primary-soft);
      }
      .table .table__highlight + th,
      .table thead .table__highlight {
        color: var(--primary);
      }

      /* ============================================================ */
      /*  Pagination — News / Press list                              */
      /* ============================================================ */
      .pagination {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 6px;
        margin-top: var(--sp-10);
        flex-wrap: wrap;
      }
      .pg-btn {
        padding: 0 var(--sp-3);
        height: var(--control-h-md);
        min-width: var(--control-h-md);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--border);
        background: var(--card);
        font-size: var(--text-body-sm);
        color: var(--foreground);
        cursor: pointer;
        font-weight: var(--font-weight-semibold);
        border-radius: var(--radius-md);
        font-variant-numeric: tabular-nums;
        transition:
          background var(--duration-base) var(--easing),
          border-color var(--duration-base) var(--easing),
          color var(--duration-base) var(--easing);
      }
      .pg-btn:hover {
        border-color: var(--border-strong);
      }
      .pg-btn:focus-visible {
        outline: none;
        box-shadow: var(--ring-focus);
        border-color: var(--primary);
      }
      .pg-btn.is-active,
      .pg-btn[aria-current="page"] {
        background: var(--primary);
        color: var(--primary-foreground);
        border-color: var(--primary);
      }
      .pg-btn[disabled],
      .pg-btn.is-disabled {
        color: var(--foreground-subtle);
        background: var(--muted);
        border-color: var(--border);
        cursor: not-allowed;
        pointer-events: none;
      }
      .pg-ellipsis {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: var(--control-h-md);
        padding: 0 var(--sp-2);
        color: var(--foreground-subtle);
        font-size: var(--text-body-sm);
      }

      /* ============================================================ */
      /*  Breadcrumb — News detail / Press detail                     */
      /* ============================================================ */
      .breadcrumb {
        font-size: var(--text-caption);
        color: var(--muted-foreground);
        margin-bottom: var(--sp-6);
        line-height: 1.6;
      }
      .breadcrumb a,
      .breadcrumb span[data-goto] {
        color: var(--muted-foreground);
        cursor: pointer;
        transition: color var(--duration-fast) ease;
      }
      .breadcrumb a:hover,
      .breadcrumb span[data-goto]:hover {
        color: var(--primary);
      }
      .breadcrumb__sep {
        display: inline-block;
        margin: 0 var(--sp-2);
        color: var(--foreground-subtle);
      }
      .breadcrumb__current {
        color: var(--foreground);
        font-weight: var(--font-weight-semibold);
      }

      /* ============================================================ */
      /*  Modal — built on --popover tokens                           */
      /* ------------------------------------------------------------ */
      /*  Headless: structure here, open/close state via `.is-open`   */
      /*  on `.modal-backdrop`. Backdrop blocks scroll; the modal     */
      /*  surface uses `--popover` so it can theme separately from    */
      /*  cards if needed (currently both = white).                    */
      /* ============================================================ */
      .modal-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 300;
        background: rgb(0 0 0 / 0.5);
        align-items: center;
        justify-content: center;
        padding: var(--sp-5);
        overscroll-behavior: contain;
      }
      .modal-backdrop.is-open {
        display: flex;
      }

      .modal {
        width: 100%;
        max-width: 560px;
        max-height: calc(100vh - var(--sp-10));
        max-height: calc(100dvh - var(--sp-10));
        background: var(--popover);
        color: var(--popover-foreground);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-xl);
        display: flex;
        flex-direction: column;
        overflow: hidden;
      }
      .modal--sm {
        max-width: 400px;
      }
      .modal--lg {
        max-width: 800px;
      }
      .modal--xl {
        max-width: 1024px;
      }

      .modal__header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: var(--sp-4);
        padding: var(--sp-5) var(--sp-5) var(--sp-4);
        border-bottom: 1px solid var(--border);
      }
      .modal__title {
        margin: 0;
        font-size: var(--text-display-sm);
        line-height: var(--text-display-sm-lh);
        font-weight: var(--font-weight-bold);
        letter-spacing: var(--tracking-tight);
        color: var(--foreground);
        flex: 1;
      }
      .modal__close {
        flex-shrink: 0;
        width: 32px;
        height: 32px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: none;
        background: transparent;
        color: var(--muted-foreground);
        cursor: pointer;
        border-radius: var(--radius-md);
        font-size: 20px;
        line-height: 1;
        transition:
          background var(--duration-fast) ease,
          color var(--duration-fast) ease;
      }
      .modal__close:hover {
        background: var(--accent);
        color: var(--foreground);
      }
      .modal__close:focus-visible {
        outline: none;
        box-shadow: var(--ring-focus);
      }

      .modal__body {
        padding: var(--sp-5);
        overflow-y: auto;
        font-size: var(--text-body-md);
        line-height: 1.8;
        color: var(--foreground);
      }

      .modal__footer {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: var(--sp-3);
        padding: var(--sp-4) var(--sp-5);
        border-top: 1px solid var(--border);
        background: var(--muted);
        flex-wrap: wrap;
      }

      /* ============================================================ */
      /*  Tooltip — pure-CSS hover tooltip on --popover tokens        */
      /* ============================================================ */
      .tooltip-wrap {
        position: relative;
        display: inline-flex;
        align-items: center;
      }
      .tooltip-wrap[data-tooltip]::after {
        content: attr(data-tooltip);
        position: absolute;
        left: 50%;
        bottom: calc(100% + 8px);
        transform: translateX(-50%) translateY(4px);
        background: var(--popover);
        color: var(--popover-foreground);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        padding: 6px var(--sp-3);
        font-size: var(--text-caption);
        line-height: 1.5;
        white-space: nowrap;
        box-shadow: var(--shadow-md);
        pointer-events: none;
        opacity: 0;
        transition:
          opacity var(--duration-base) var(--easing),
          transform var(--duration-base) var(--easing);
        z-index: 250;
      }
      .tooltip-wrap[data-tooltip]::before {
        content: "";
        position: absolute;
        left: 50%;
        bottom: calc(100% + 3px);
        transform: translateX(-50%) translateY(4px);
        width: 8px;
        height: 8px;
        background: var(--popover);
        border-right: 1px solid var(--border);
        border-bottom: 1px solid var(--border);
        rotate: 45deg;
        pointer-events: none;
        opacity: 0;
        transition:
          opacity var(--duration-base) var(--easing),
          transform var(--duration-base) var(--easing);
        z-index: 249;
      }
      .tooltip-wrap[data-tooltip]:hover::after,
      .tooltip-wrap[data-tooltip]:hover::before,
      .tooltip-wrap[data-tooltip]:focus-within::after,
      .tooltip-wrap[data-tooltip]:focus-within::before {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
      }

      /* placement modifiers */
      .tooltip-wrap[data-tooltip-placement="bottom"]::after {
        bottom: auto;
        top: calc(100% + 8px);
      }
      .tooltip-wrap[data-tooltip-placement="bottom"]::before {
        bottom: auto;
        top: calc(100% + 3px);
        border: none;
        border-top: 1px solid var(--border);
        border-left: 1px solid var(--border);
      }
      .tooltip-wrap[data-tooltip-placement="right"]::after {
        left: calc(100% + 8px);
        bottom: 50%;
        transform: translateY(50%) translateX(4px);
      }
      .tooltip-wrap[data-tooltip-placement="right"]:hover::after {
        transform: translateY(50%) translateX(0);
      }
      .tooltip-wrap[data-tooltip-placement="right"]::before {
        display: none;
      }

      .tooltip-wrap[data-tooltip-placement="left"]::after {
        left: auto;
        right: calc(100% + 8px);
        bottom: 50%;
        transform: translateY(50%) translateX(-4px);
      }
      .tooltip-wrap[data-tooltip-placement="left"]:hover::after {
        transform: translateY(50%) translateX(0);
      }
      .tooltip-wrap[data-tooltip-placement="left"]::before {
        display: none;
      }

      /* ============================================================ */
      /*  Mobile breakpoints — header + drawer                        */
      /* ============================================================ */
      @media (max-width: 900px) {
        .header-nav {
          display: none;
        }
        .header-inner {
          gap: var(--sp-3);
        }
        .header-actions {
          display: none;
        }
        .header-mobile-actions {
          display: flex;
        }
        .nav-cta--mobile {
          display: inline-flex;
          align-items: center;
        }
        .hamburger {
          display: flex;
        }
        .megamenu {
          display: none !important;
        }

        .mm-grid-products,
        .mm-grid-solutions,
        .mm-grid-login {
          grid-template-columns: 1fr;
        }

        .site-header .pr-logo[data-goto],
        .site-footer .pr-logo[data-goto] {
          padding-top: 6px;
          padding-bottom: 6px;
          margin-top: -6px;
          margin-bottom: -6px;
        }
      }
      @media (max-width: 640px) {
        .nav-cta--mobile {
          height: var(--control-h-sm);
          padding: 0 var(--sp-3);
          font-size: var(--text-body-sm);
        }
      }
      @media (max-width: 600px) {
        .modal {
          max-width: 100%;
          max-height: calc(100vh - var(--sp-6));
          max-height: calc(100dvh - var(--sp-6));
        }
        .modal__header,
        .modal__footer {
          padding-left: var(--sp-4);
          padding-right: var(--sp-4);
        }
        .modal__body {
          padding: var(--sp-4);
        }
        .table tbody th {
          width: 140px;
        }
        /* tooltip — hide on narrow screens (no hover); apps should fall back to inline help text */
        .tooltip-wrap[data-tooltip]::after,
        .tooltip-wrap[data-tooltip]::before {
          display: none;
        }
      }