:root {
        --background: oklch(1 0 0);
        --foreground: oklch(0.2468 0.0146 261.67);
        --card: oklch(1 0 0);
        --card-foreground: oklch(0.2468 0.0146 261.67);
        --popover: oklch(1 0 0);
        --popover-foreground: oklch(0.2468 0.0146 261.67);
        --primary: oklch(0.3487 0.1068 255.78);
        --primary-foreground: oklch(1 0 0);
        --primary-hover: oklch(0.395 0.1145 255.78);
        --primary-active: oklch(0.305 0.098 255.78);
        --primary-subtle: oklch(0.97 0.015 255.78);
        --primary-soft: rgb(10 57 112 / 0.06);
        --secondary: oklch(1 0 0);
        --secondary-foreground: oklch(0.2468 0.0146 261.67);
        --muted: oklch(0.97 0.003 264.51);
        --muted-foreground: oklch(0.5031 0.0201 267.61);
        --accent: oklch(0.965 0.007 255.78);
        --accent-foreground: oklch(0.2468 0.0146 261.67);
        --destructive: oklch(0.5113 0.1821 26.56);
        --destructive-foreground: oklch(1 0 0);
        --border: oklch(0.9212 0.0047 258.41);
        --input: oklch(0.8408 0.0095 258.38);
        --ring: oklch(0.3487 0.1068 255.78);
        --border-strong: oklch(0.8408 0.0095 258.38);
        --foreground-subtle: oklch(0.6491 0.016 264.46);
        --accent-pressed: oklch(0.9364 0.0047 258.42);
        --success: oklch(0.5119 0.128 149.28);
        --success-foreground: oklch(1 0 0);
        --success-muted: oklch(0.9717 0.0107 159.29);
        --success-border: oklch(0.8679 0.0403 156.86);
        --warning: oklch(0.5078 0.108 73.3);
        --warning-foreground: oklch(1 0 0);
        --warning-muted: oklch(0.9768 0.0207 88.74);
        --warning-border: oklch(0.8702 0.0696 90.02);
        --destructive-muted: oklch(0.9741 0.0096 16.87);
        --destructive-border: oklch(0.8382 0.0483 18.08);
        --deal-sale: oklch(0.5153 0.1881 260.9);
        --deal-sale-foreground: oklch(1 0 0);
        --deal-sale-muted: oklch(0.966 0.0133 262.39);
        --deal-sale-border: oklch(0.8557 0.0515 259.4);
        --deal-purchase: oklch(0.6045 0.1762 43.85);
        --deal-purchase-foreground: oklch(1 0 0);
        --deal-purchase-muted: oklch(0.9747 0.0153 67.56);
        --deal-purchase-border: oklch(0.8603 0.0781 67.72);
        --deal-rental: oklch(0.5656 0.0963 187.48);
        --deal-rental-foreground: oklch(1 0 0);
        --deal-rental-muted: oklch(0.9763 0.0119 184.49);
        --deal-rental-border: oklch(0.8725 0.0673 186.68);
        --radius: 6px;
        --radius-sm: calc(var(--radius) * 0.6);
        --radius-md: calc(var(--radius) * 0.8);
        --radius-lg: var(--radius);
        --radius-xl: calc(var(--radius) * 1.4);
        --radius-2xl: calc(var(--radius) * 1.8);
        --radius-3xl: calc(var(--radius) * 2.2);
        --radius-4xl: calc(var(--radius) * 2.6);
        --radius-full: 9999px;
        --font-sans: "Inter", "Noto Sans JP", sans-serif;
        --font-mono: "Roboto Mono", Menlo, Consolas, monospace;
        --fs-hero: clamp(34px, 6.5vw, 64px);
        --fs-hero-lh: 1.1;
        --fs-hero-mid: clamp(32px, 5vw, 52px);
        --fs-hero-mid-lh: 1.12;
        --fs-display: clamp(26px, 3.4vw, 38px);
        --fs-display-lh: 1.15;
        --fs-section: clamp(24px, 2.6vw, 30px);
        --fs-section-lh: 1.2;
        --fs-heading: clamp(20px, 2vw, 24px);
        --fs-heading-lh: 1.3;
        --fs-subheading: clamp(16px, 1.4vw, 18px);
        --fs-subheading-lh: 1.4;
        --fs-lead: clamp(15px, 1.2vw, 17px);
        --fs-lead-lh: 1.6;
        --fs-body: clamp(14px, 1vw, 15px);
        --fs-body-lh: 1.65;
        --fs-stat: clamp(26px, 2.8vw, 34px);
        --fs-stat-lh: 1.1;
        --text-caption: var(--fs-body);
        --text-caption-lh: var(--fs-body-lh);
        --text-body-sm: var(--fs-body);
        --text-body-sm-lh: var(--fs-body-lh);
        --text-body-md: var(--fs-body);
        --text-body-md-lh: var(--fs-body-lh);
        --text-body-lg: var(--fs-lead);
        --text-body-lg-lh: var(--fs-lead-lh);
        --text-display-sm: var(--fs-subheading);
        --text-display-sm-lh: var(--fs-subheading-lh);
        --text-display-md: var(--fs-heading);
        --text-display-md-lh: var(--fs-heading-lh);
        --text-display-lg: var(--fs-display);
        --text-display-lg-lh: var(--fs-display-lh);
        --text-display-xl: var(--fs-display);
        --text-display-xl-lh: var(--fs-display-lh);
        --font-weight-regular: 400;
        --font-weight-medium: 500;
        --font-weight-semibold: 600;
        --font-weight-bold: 700;
        --tracking-tight: -0.02em;
        --tracking-normal: 0.01em;
        --tracking-wide: 0.04em;
        --spacing: 4px;
        --sp-1: 4px;
        --sp-2: 8px;
        --sp-3: 12px;
        --sp-4: 16px;
        --sp-5: 20px;
        --sp-6: 24px;
        --sp-7: 28px;
        --sp-8: 32px;
        --sp-9: 36px;
        --sp-10: 40px;
        --sp-12: 48px;
        --sp-14: 56px;
        --sp-16: 64px;
        --sp-20: 80px;
        --sp-24: 96px;
        --control-h-sm: 44px;
        --control-h-md: 44px;
        --control-h-lg: 44px;
        --control-h-xl: 44px;
        --control-px-sm: 12px;
        --control-px-md: 16px;
        --control-px-lg: 20px;
        --control-px-xl: 28px;
        --height-topnav: 64px;
        --container-content: 1080px;
        --container-narrow: 720px;
        --container-wide: 1280px;
        --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
        --shadow-md:
          0 4px 6px -1px rgb(0 0 0 / 0.08), 0 2px 4px -2px rgb(0 0 0 / 0.06);
        --shadow-lg:
          0 10px 20px -4px rgb(0 0 0 / 0.1), 0 6px 8px -6px rgb(0 0 0 / 0.06);
        --shadow-xl: 0 24px 48px -12px rgb(0 0 0 / 0.18);
        --duration-fast: 120ms;
        --duration-base: 180ms;
        --duration-slow: 280ms;
        --easing: cubic-bezier(0.2, 0, 0, 1);
        --ring-focus: 0 0 0 3px rgb(10 57 112 / 0.2);
        --page-padding-x: clamp(20px, 5vw, 64px);
        --section-padding-y: clamp(64px, 9vw, 120px);
      }
      *,
      *::before,
      *::after {
        box-sizing: border-box;
      }
      html,
      body {
        margin: 0;
        padding: 0;
        background: var(--background);
        color: var(--foreground);
        font-family: var(--font-sans);
        font-size: var(--text-body-md);
        line-height: var(--text-body-md-lh);
        overflow-x: hidden;
        letter-spacing: var(--tracking-normal);
        font-feature-settings: "cv11", "ss01", "palt";
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
      }
      a {
        color: inherit;
        text-decoration: none;
      }
      button {
        font-family: inherit;
        cursor: pointer;
        border: none;
        background: none;
      }
      img {
        max-width: 100%;
        display: block;
      }
      h1,
      .h1 {
        font-size: var(--text-display-lg);
        line-height: var(--text-display-lg-lh);
        font-weight: var(--font-weight-bold);
        letter-spacing: var(--tracking-tight);
      }
      h2,
      .h2 {
        font-size: var(--text-display-md);
        line-height: var(--text-display-md-lh);
        font-weight: var(--font-weight-bold);
        letter-spacing: var(--tracking-tight);
      }
      h3,
      .h3 {
        font-size: var(--text-display-sm);
        line-height: var(--text-display-sm-lh);
        font-weight: var(--font-weight-semibold);
        letter-spacing: var(--tracking-tight);
      }
      p {
        font-size: var(--text-body-md);
        line-height: var(--text-body-md-lh);
      }
      .mono {
        font-variant-numeric: tabular-nums;
      }
      .code {
        font-family: var(--font-mono);
        font-variant-numeric: tabular-nums;
      }
      .fg-muted {
        color: var(--muted-foreground);
      }
      .fg-subtle {
        color: var(--foreground-subtle);
      }
      .button {
        --_h: var(--control-h-md);
        --_px: var(--control-px-md);
        --_fs: var(--text-body-md);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        height: var(--_h);
        padding: 0 var(--_px);
        border-radius: var(--radius-md);
        font-family: var(--font-sans);
        font-size: var(--_fs);
        font-weight: var(--font-weight-semibold);
        letter-spacing: var(--tracking-normal);
        background: var(--secondary);
        color: var(--secondary-foreground);
        border: 1px solid var(--border);
        cursor: pointer;
        white-space: nowrap;
        text-decoration: none;
        transition:
          background var(--duration-base) var(--easing),
          border-color var(--duration-base) var(--easing),
          box-shadow var(--duration-base) var(--easing),
          transform var(--duration-fast) var(--easing),
          color var(--duration-base) var(--easing);
      }
      .button:hover {
        background: var(--muted);
        border-color: var(--border-strong);
        box-shadow: var(--shadow-sm);
      }
      .button:active {
        transform: translateY(1px);
        box-shadow: none;
      }
      .button:focus-visible {
        outline: none;
        box-shadow: var(--ring-focus);
        border-color: var(--primary);
      }
      .button--sm {
        --_h: var(--control-h-sm);
        --_px: var(--control-px-sm);
        --_fs: var(--text-body-sm);
        border-radius: var(--radius-md);
      }
      .button--md {
        --_h: var(--control-h-md);
        --_px: var(--control-px-md);
        --_fs: var(--text-body-md);
      }
      .button--lg {
        --_h: var(--control-h-lg);
        --_px: var(--control-px-lg);
        --_fs: var(--text-body-lg);
        border-radius: var(--radius-lg);
      }
      .button--xl {
        --_h: var(--control-h-xl);
        --_px: var(--control-px-xl);
        --_fs: var(--text-body-lg);
        border-radius: var(--radius-lg);
        font-weight: var(--font-weight-bold);
      }
      .button--primary {
        background: var(--primary);
        color: var(--primary-foreground);
        border-color: var(--primary);
      }
      .button--primary:hover {
        background: var(--primary-hover);
        border-color: var(--primary-hover);
        box-shadow: var(--shadow-md);
      }
      .button--primary:active {
        background: var(--primary-active);
        border-color: var(--primary-active);
      }
      .button--outline {
        background: transparent;
        color: var(--primary);
        border: 1px solid var(--primary);
      }
      .button--outline:hover {
        background: var(--primary-soft);
        border-color: var(--primary);
      }
      .chip {
        display: inline-flex;
        align-items: center;
        height: 24px;
        padding: 0 var(--sp-2);
        border-radius: var(--radius-md);
        font-size: var(--text-body-sm);
        font-weight: var(--font-weight-semibold);
        background: var(--muted);
        color: var(--foreground);
        border: 1px solid var(--border);
        white-space: nowrap;
      }
      .chip--primary {
        background: var(--primary);
        color: var(--primary-foreground);
        border-color: var(--primary);
      }
      .chip--secondary {
        background: var(--muted);
        color: var(--muted-foreground);
        border-color: var(--border);
      }
      .chip--outline {
        background: transparent;
        color: var(--foreground);
        border-color: var(--border-strong);
      }
      .chip--destructive {
        background: var(--destructive-muted);
        color: var(--destructive);
        border-color: var(--destructive-border);
      }
      .chip--success {
        background: var(--success-muted);
        color: var(--success);
        border-color: var(--success-border);
      }
      .chip--warning {
        background: var(--warning-muted);
        color: var(--warning);
        border-color: var(--warning-border);
      }
      .chip--sale {
        background: var(--deal-sale-muted);
        color: var(--deal-sale);
        border-color: var(--deal-sale-border);
      }
      .chip--purchase {
        background: var(--deal-purchase-muted);
        color: var(--deal-purchase);
        border-color: var(--deal-purchase-border);
      }
      .chip--rental {
        background: var(--deal-rental-muted);
        color: var(--deal-rental);
        border-color: var(--deal-rental-border);
      }
      .chip--pill {
        border-radius: var(--radius-full);
        padding: 0 var(--sp-3);
      }
      .input {
        height: var(--control-h-md);
        padding: 0 var(--control-px-md);
        border-radius: var(--radius-md);
        border: 1px solid var(--input);
        background: var(--card);
        font-family: var(--font-sans);
        font-size: var(--text-body-md);
        color: var(--foreground);
        outline: none;
        transition:
          border-color var(--duration-base) var(--easing),
          box-shadow var(--duration-base) var(--easing);
      }
      .input::placeholder {
        color: var(--foreground-subtle);
      }
      .input:hover:not(:focus):not(:disabled) {
        border-color: var(--border-strong);
      }
      .input:focus-visible {
        border-color: var(--primary);
        box-shadow: var(--ring-focus);
      }
      .card,
      .ds-card {
        background: var(--card);
        color: var(--card-foreground);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        padding: var(--sp-5);
      }
      .card--elevated {
        box-shadow: var(--shadow-sm);
      }
      [data-goto].product-card,
      [data-goto].ds-card,
      [data-goto].feature-card,
      [data-goto].interview-card,
      [data-goto].job-card,
      [data-goto].related-card {
        position: relative;
        cursor: pointer;
        box-shadow: var(--shadow-sm);
        transition:
          border-color var(--duration-base) var(--easing),
          box-shadow var(--duration-base) var(--easing),
          transform var(--duration-base) var(--easing),
          background var(--duration-fast) var(--easing);
      }
      [data-goto].product-card::after,
      [data-goto].ds-card::after,
      [data-goto].feature-card::after,
      [data-goto].interview-card::after,
      [data-goto].related-card::after {
        content: "";
        position: absolute;
        top: var(--sp-4);
        right: var(--sp-4);
        width: 20px;
        height: 20px;
        background-color: var(--muted-foreground);
        -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><line x1='7' y1='17' x2='17' y2='7'/><polyline points='7 7 17 7 17 17'/></svg>");
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
        -webkit-mask-size: 16px 16px;
        mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><line x1='7' y1='17' x2='17' y2='7'/><polyline points='7 7 17 7 17 17'/></svg>");
        mask-repeat: no-repeat;
        mask-position: center;
        mask-size: 16px 16px;
        pointer-events: none;
        transition:
          background-color var(--duration-base) var(--easing),
          transform var(--duration-base) var(--easing);
      }
      [data-goto].product-card:hover::after,
      [data-goto].ds-card:hover::after,
      [data-goto].feature-card:hover::after,
      [data-goto].interview-card:hover::after,
      [data-goto].related-card:hover::after {
        background-color: var(--primary);
        transform: translate(2px, -2px);
      }
      [data-goto].product-card::after {
        top: auto;
        bottom: var(--sp-4);
      }
      [data-goto].product-card:hover::after {
        transform: translate(2px, 2px);
      }
      [data-goto].product-card:active,
      [data-goto].ds-card:active,
      [data-goto].feature-card:active,
      [data-goto].interview-card:active,
      [data-goto].job-card:active,
      [data-goto].related-card:active {
        background: var(--muted);
        transform: scale(0.995);
      }
      .pr-logo {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        user-select: none;
        line-height: 1;
        text-decoration: none;
        cursor: pointer;
      }
      .pr-logo-mark {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: var(--primary);
        color: var(--primary-foreground);
        font-family: var(--font-sans);
        font-weight: var(--font-weight-bold);
        line-height: 1;
        flex-shrink: 0;
      }
      .pr-logo-text {
        font-family: var(--font-sans);
        font-weight: var(--font-weight-bold);
        letter-spacing: var(--tracking-tight);
        color: var(--foreground);
        white-space: nowrap;
        line-height: 1;
      }
      .pr-logo--sm {
        gap: 8px;
      }
      .pr-logo--sm .pr-logo-mark {
        width: 20px;
        height: 20px;
        border-radius: var(--radius-sm);
        font-size: 12px;
      }
      .pr-logo--sm .pr-logo-text {
        font-size: var(--text-body-md);
      }
      .pr-logo--md {
        gap: 10px;
      }
      .pr-logo--md .pr-logo-mark {
        width: 24px;
        height: 24px;
        border-radius: var(--radius-sm);
        font-size: 14px;
      }
      .pr-logo--md .pr-logo-text {
        font-size: var(--text-body-lg);
      }
      .pr-logo--lg {
        gap: 12px;
      }
      .pr-logo--lg .pr-logo-mark {
        width: 32px;
        height: 32px;
        border-radius: var(--radius-md);
        font-size: 18px;
      }
      .pr-logo--lg .pr-logo-text {
        font-size: var(--text-display-sm);
      }
      .pr-logo--xl {
        gap: 14px;
      }
      .pr-logo--xl .pr-logo-mark {
        width: 48px;
        height: 48px;
        border-radius: var(--radius-md);
        font-size: 26px;
      }
      .pr-logo--xl .pr-logo-text {
        font-size: var(--text-display-md);
      }
      .pr-logo--inverse .pr-logo-mark {
        background: var(--primary-foreground);
        color: var(--primary);
      }
      .pr-logo--inverse .pr-logo-text {
        color: var(--primary-foreground);
      }
      .container {
        max-width: var(--container-content);
        margin: 0 auto;
        padding: 0 var(--page-padding-x);
      }
      .section {
        padding: var(--section-padding-y) 0;
      }
      .section--bg {
        background: transparent;
      }
      .section--bg > .container {
        background: var(--muted);
        border-top: 1px solid var(--border);
        border-bottom: 1px solid var(--border);
        padding: var(--section-padding-y) var(--page-padding-x);
      }
      .section.section--bg {
        padding-top: 0;
        padding-bottom: 0;
      }
      .section-eyebrow {
        font-size: var(--text-body-sm);
        letter-spacing: var(--tracking-wide);
        color: var(--primary);
        font-weight: var(--font-weight-semibold);
        margin-bottom: var(--sp-3);
      }
      .section-title {
        font-size: var(--text-display-md);
        font-weight: var(--font-weight-bold);
        letter-spacing: var(--tracking-tight);
        margin-bottom: var(--sp-4);
        line-height: var(--text-display-md-lh);
      }
      .section-title--lg {
        font-size: var(--fs-section);
        line-height: var(--fs-section-lh);
      }
      .section-lead {
        font-size: var(--text-body-lg);
        color: var(--muted-foreground);
        max-width: 720px;
        margin-bottom: var(--sp-10);
        line-height: var(--text-body-lg-lh);
      }
      .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);
      }
      .logo {
        font-size: var(--text-display-sm);
        font-weight: var(--font-weight-bold);
        letter-spacing: var(--tracking-tight);
        cursor: pointer;
        color: var(--primary);
      }
      .header-nav {
        display: flex;
        align-items: center;
        gap: var(--sp-2);
      }
      .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);
      }
      .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);
      }
      .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 {
        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-base) var(--easing),
          border-color var(--duration-base) var(--easing);
      }
      .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 {
        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);
        border-color: var(--foreground-subtle);
      }
      .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 {
        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-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;
      }
      .mm-footer-row {
        margin-top: var(--sp-6);
        padding-top: var(--sp-4);
        border-top: 1px solid var(--border);
        display: flex;
        gap: var(--sp-5);
        flex-wrap: wrap;
      }
      .mm-footer-link {
        font-size: var(--text-body-md);
        font-weight: var(--font-weight-semibold);
        color: var(--primary);
        cursor: pointer;
      }
      .mm-footer-link:hover {
        text-decoration: underline;
      }
      .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 {
        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-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-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-4);
        border-bottom: 1px solid rgb(255 255 255 / 0.12);
        letter-spacing: var(--tracking-wide);
      }
      .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);
        }
      }
      @media (max-width: 600px) {
        .footer-products-grid,
        .footer-cols-secondary {
          grid-template-columns: 1fr;
        }
      }
      .hero {
        position: relative;
        background: var(--card);
        padding: var(--sp-20) 0 var(--sp-16);
      }
      .hero::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
        width: min(100% - var(--page-padding-x) * 2, var(--container-content));
        height: 1px;
        background: var(--border);
      }
      .hero-inner {
        max-width: var(--container-content);
        margin: 0 auto;
        padding: 0 var(--page-padding-x);
      }
      .hero-eyebrow {
        font-size: var(--text-caption);
        letter-spacing: var(--tracking-wide);
        color: var(--primary);
        font-weight: var(--font-weight-semibold);
        margin-bottom: var(--sp-4);
      }
      .hero-title {
        font-size: var(--text-display-xl);
        font-weight: var(--font-weight-bold);
        line-height: var(--text-display-xl-lh);
        letter-spacing: var(--tracking-tight);
        margin-bottom: var(--sp-6);
      }
      .hero-lead {
        font-size: var(--text-body-lg);
        color: var(--muted-foreground);
        line-height: var(--text-body-lg-lh);
        max-width: 680px;
        margin: 0 0 var(--sp-6);
      }
      .hero-cta-row {
        display: flex;
        gap: var(--sp-3);
        justify-content: center;
        flex-wrap: wrap;
      }
      .product-card-img {
        background: var(--muted);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        aspect-ratio: 16 / 10;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--foreground-subtle);
        font-size: var(--text-caption);
        margin-bottom: var(--sp-4);
        overflow: hidden;
      }
      .product-card-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }
      .integration-visual {
        background: var(--muted);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        aspect-ratio: 16 / 7;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--foreground-subtle);
        font-size: var(--text-body-sm);
        margin: var(--sp-6) 0 var(--sp-8);
        overflow: hidden;
      }
      .integration-visual img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
      }
      .page-hero {
        position: relative;
        background: var(--card);
        padding: var(--sp-20) var(--page-padding-x);
      }
      .page-hero > * {
        max-width: var(--container-content);
        margin-left: auto;
        margin-right: auto;
      }
      .page-hero::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
        width: min(100% - var(--page-padding-x) * 2, var(--container-content));
        height: 1px;
        background: var(--border);
      }
      .page-hero-eyebrow {
        font-size: var(--text-caption);
        letter-spacing: var(--tracking-wide);
        color: var(--primary);
        font-weight: var(--font-weight-semibold);
        margin-bottom: var(--sp-3);
      }
      .page-hero-title {
        font-size: var(--text-display-lg);
        font-weight: var(--font-weight-bold);
        line-height: var(--text-display-lg-lh);
        letter-spacing: var(--tracking-tight);
        margin-bottom: var(--sp-5);
      }
      .page-hero-lead {
        font-size: var(--text-body-lg);
        color: var(--muted-foreground);
        max-width: 720px;
        margin: 0;
        line-height: var(--text-body-lg-lh);
      }
      .row-2 {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--sp-5);
      }
      .row-3 {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--sp-5);
      }
      .row-4 {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: var(--sp-5);
      }
      .flow-diagram {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: var(--sp-2);
        flex-wrap: wrap;
        margin: var(--sp-6) 0 var(--sp-8);
      }
      .flow-box {
        flex: 0 1 180px;
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        padding: var(--sp-4) var(--sp-3);
        background: var(--card);
        font-size: var(--text-body-md);
        font-weight: var(--font-weight-semibold);
        text-align: center;
      }
      .flow-arrow {
        font-size: var(--text-body-lg);
        color: var(--foreground-subtle);
        font-weight: var(--font-weight-bold);
      }
      .product-card {
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        padding: var(--sp-5);
        background: var(--card);
        transition:
          opacity var(--duration-base) var(--easing),
          border-color var(--duration-base) var(--easing),
          transform var(--duration-base) var(--easing),
          box-shadow var(--duration-base) var(--easing);
        cursor: pointer;
      }
      .product-card:hover {
        border-color: var(--primary);
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
      }
      .product-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        margin-bottom: var(--sp-2);
        min-height: 24px;
      }
      .prod-tag {
        font-size: var(--text-caption);
        padding: 2px 8px;
        border: 1px solid var(--border);
        background: var(--card);
        color: var(--muted-foreground);
        border-radius: var(--radius-sm);
      }
      .product-card.is-dimmed {
        opacity: 0.35;
      }
      .product-card.is-matched {
        border-color: var(--primary);
        border-width: 1.5px;
      }
      .product-card.is-matched .prod-tag.is-match {
        background: var(--primary);
        color: var(--primary-foreground);
        border-color: var(--primary);
      }
      .product-num {
        font-size: var(--text-caption);
        color: var(--foreground-subtle);
        font-weight: var(--font-weight-semibold);
        letter-spacing: 0.05em;
        margin-bottom: var(--sp-1);
      }
      .product-name {
        font-size: var(--text-body-lg);
        font-weight: var(--font-weight-bold);
        margin-bottom: var(--sp-2);
        line-height: 1.5;
      }
      .product-desc {
        font-size: var(--text-body-md);
        color: var(--muted-foreground);
        line-height: var(--text-body-md-lh);
      }
      .stat {
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        padding: var(--sp-8) var(--sp-4);
        text-align: center;
        background: var(--card);
      }
      .stat-num {
        font-size: var(--text-display-lg);
        font-weight: var(--font-weight-bold);
        color: var(--primary);
        line-height: 1.1;
        margin-bottom: var(--sp-2);
        letter-spacing: var(--tracking-tight);
        font-variant-numeric: tabular-nums;
      }
      .stat-label {
        font-size: var(--text-body-sm);
        color: var(--muted-foreground);
      }
      .advantage-num {
        font-size: var(--text-caption);
        color: var(--foreground-subtle);
        letter-spacing: var(--tracking-wide);
        font-weight: var(--font-weight-semibold);
        margin-bottom: var(--sp-3);
        font-variant-numeric: tabular-nums;
      }
      .product-hero {
        position: relative;
        background: var(--card);
        padding: var(--sp-20) 0;
      }
      .product-hero::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
        width: min(100% - var(--page-padding-x) * 2, var(--container-content));
        height: 1px;
        background: var(--border);
      }
      .product-hero-inner {
        max-width: var(--container-content);
        margin: 0 auto;
        padding: 0 var(--page-padding-x);
        display: grid;
        grid-template-columns: 1.3fr 1fr;
        gap: var(--sp-16);
        align-items: center;
      }
      .product-hero-name {
        display: block;
        font-size: var(--text-body-md);
        font-weight: var(--font-weight-semibold);
        color: var(--primary);
        letter-spacing: var(--tracking-wide);
        margin-bottom: var(--sp-3);
        line-height: 1.3;
      }
      .product-hero-title {
        font-size: var(--text-display-lg);
        font-weight: var(--font-weight-bold);
        margin: 0 0 var(--sp-5);
        line-height: var(--text-display-lg-lh);
        letter-spacing: var(--tracking-tight);
      }
      .product-hero-desc {
        font-size: var(--text-body-lg);
        color: var(--muted-foreground);
        line-height: var(--text-body-lg-lh);
        margin-bottom: var(--sp-8);
      }
      .img-ph {
        background: var(--muted);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--foreground-subtle);
        font-size: var(--text-body-sm);
      }
      .section--centered .section-eyebrow,
      .section--centered .section-title,
      .section--centered .section-lead {
        text-align: left;
      }
      .section--centered .section-lead {
        margin-left: auto;
        margin-right: auto;
      }
      .overview-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--sp-12);
        align-items: center;
      }
      .overview-meta {
        margin-top: var(--sp-5);
        border-top: 1px solid var(--border);
        padding-top: var(--sp-3);
      }
      .overview-meta-row {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--sp-1);
        padding: var(--sp-3) 0;
        border-bottom: 1px solid var(--border);
        font-size: var(--text-body-md);
      }
      .overview-meta-row span:first-child {
        width: auto;
        font-size: var(--text-caption);
        color: var(--muted-foreground);
        font-weight: var(--font-weight-semibold);
        letter-spacing: var(--tracking-wide);
        text-transform: uppercase;
      }
      .overview-meta-row span:last-child {
        width: 100%;
        color: var(--foreground);
        line-height: 1.6;
      }
      .feature-card {
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        padding: var(--sp-6);
        background: var(--card);
        display: flex;
        flex-direction: column;
        gap: var(--sp-4);
      }
      .feature-card-img {
        height: auto;
        aspect-ratio: 16 / 10;
        width: 100%;
      }
      .feature-card-body h4 {
        font-size: var(--fs-subheading);
        line-height: var(--fs-subheading-lh);
        font-weight: var(--font-weight-bold);
        margin: 0 0 var(--sp-2);
      }
      .feature-card-body p {
        font-size: var(--text-body-md);
        color: var(--muted-foreground);
        line-height: var(--text-body-md-lh);
        margin: 0;
      }
      .scope-card {
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        padding: var(--sp-10);
        background: var(--card);
      }
      .scope-card.is-can {
        border-left: 4px solid var(--primary);
      }
      .scope-card.is-cannot {
        border-left: 4px solid var(--border-strong);
        background: var(--muted);
      }
      .scope-card.is-neutral {
        border-left: 4px solid var(--primary);
        background: var(--card);
      }
      .scope-card h4 {
        font-size: var(--fs-subheading);
        line-height: var(--fs-subheading-lh);
        font-weight: var(--font-weight-bold);
        margin: 0 0 var(--sp-3);
        padding-bottom: var(--sp-2);
        border-bottom: 1px solid var(--border);
      }
      .scope-card ul {
        list-style: none;
        padding: 0;
        margin: 0;
      }
      .scope-card li {
        padding: var(--sp-2) 0 var(--sp-2) var(--sp-5);
        position: relative;
        font-size: var(--text-body-md);
        color: var(--foreground);
        line-height: var(--text-body-md-lh);
      }
      .scope-card.is-can li::before,
      .scope-card.is-neutral li::before {
        content: "✓";
        position: absolute;
        left: 0;
        color: var(--primary);
        font-weight: var(--font-weight-bold);
      }
      .scope-card.is-cannot li::before {
        content: "—";
        position: absolute;
        left: 0;
        color: var(--foreground-subtle);
      }
      .strength-card {
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        padding: var(--sp-10) var(--sp-6);
        background: var(--card);
        height: 100%;
      }
      .strength-num {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1.5px solid var(--primary);
        width: 36px;
        height: 36px;
        font-weight: var(--font-weight-bold);
        font-size: var(--text-body-lg);
        color: var(--primary);
        margin-bottom: var(--sp-4);
        border-radius: var(--radius-md);
        font-variant-numeric: tabular-nums;
      }
      .strength-title {
        font-size: var(--text-display-sm);
        font-weight: var(--font-weight-bold);
        margin-bottom: var(--sp-3);
        line-height: var(--text-display-sm-lh);
        letter-spacing: var(--tracking-tight);
      }
      .strength-desc {
        font-size: var(--text-body-md);
        color: var(--muted-foreground);
        line-height: var(--text-body-md-lh);
        margin-bottom: var(--sp-3);
      }
      .strength-reason {
        font-size: var(--text-body-md);
        color: var(--muted-foreground);
        line-height: var(--text-body-md-lh);
        padding-top: var(--sp-3);
        border-top: 1px solid var(--border);
      }
      .strength-reason strong {
        color: var(--foreground);
        font-weight: var(--font-weight-bold);
      }
      .philosophy-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--sp-12);
        align-items: center;
      }
      .philosophy-quote {
        border-left: 3px solid var(--primary);
        padding: var(--sp-3) var(--sp-6);
        font-size: var(--text-display-sm);
        line-height: 1.6;
        margin-bottom: var(--sp-5);
        color: var(--foreground);
        font-weight: var(--font-weight-medium);
        letter-spacing: var(--tracking-tight);
      }
      .philosophy-text {
        font-size: var(--text-body-md);
        color: var(--muted-foreground);
        line-height: var(--text-body-md-lh);
      }
      .philosophy-img {
        height: 280px;
      }
      .support-card {
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        padding: var(--sp-6);
        background: var(--card);
        height: 100%;
      }
      .support-tag {
        display: inline-block;
        border: 1px solid var(--border-strong);
        padding: 2px 8px;
        font-size: var(--text-caption);
        color: var(--muted-foreground);
        margin-bottom: var(--sp-2);
        font-weight: var(--font-weight-semibold);
        letter-spacing: var(--tracking-wide);
        border-radius: var(--radius-sm);
      }
      .support-card h4 {
        font-size: var(--fs-subheading);
        line-height: var(--fs-subheading-lh);
        font-weight: var(--font-weight-bold);
        margin: 0 0 var(--sp-2);
      }
      .support-card p {
        font-size: var(--text-body-md);
        color: var(--muted-foreground);
        line-height: var(--text-body-md-lh);
        margin: 0;
      }
      .dark-cta {
        background: transparent;
        padding: var(--sp-12) var(--page-padding-x);
      }
      .dark-cta-inner {
        max-width: var(--container-content);
        margin: 0 auto;
        background: var(--primary);
        color: var(--primary-foreground);
        padding: var(--sp-20) var(--sp-8);
        border-radius: var(--radius-lg);
      }
      .dark-cta-eyebrow {
        font-size: var(--text-caption);
        color: rgb(255 255 255 / 0.8);
        letter-spacing: var(--tracking-wide);
        margin-bottom: var(--sp-3);
        font-weight: var(--font-weight-semibold);
      }
      .dark-cta h3 {
        font-size: var(--text-display-md);
        font-weight: var(--font-weight-bold);
        margin: 0 0 var(--sp-4);
        line-height: var(--text-display-md-lh);
        letter-spacing: var(--tracking-tight);
        color: var(--primary-foreground);
      }
      .dark-cta p {
        font-size: var(--text-body-lg);
        color: rgb(255 255 255 / 0.8);
        margin: 0 0 6px;
      }
      .dark-cta .meta {
        font-size: var(--text-body-md);
        color: rgb(255 255 255 / 0.65);
        margin-bottom: var(--sp-8);
      }
      .dark-cta .button {
        background: transparent;
        color: var(--primary-foreground);
        border-color: rgb(255 255 255 / 0.8);
      }
      .dark-cta .button:hover {
        background: var(--primary-hover);
        border-color: var(--primary-foreground);
      }
      .dark-cta .button--primary {
        background: var(--primary-foreground);
        color: var(--primary);
        border-color: var(--primary-foreground);
      }
      .dark-cta .button--primary:hover {
        background: var(--muted);
        color: var(--primary);
      }
      body.is-top-page .site-header {
        background: var(--primary);
        border-bottom-color: transparent;
      }
      body.is-top-page .pr-logo .pr-logo-mark {
        background: var(--primary-foreground);
        color: var(--primary);
      }
      body.is-top-page .pr-logo .pr-logo-text {
        color: var(--primary-foreground);
      }
      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.08);
        color: var(--primary-foreground);
        border-color: transparent;
      }
      body.is-top-page .hero {
        background: var(--primary);
        color: var(--primary-foreground);
      }
      body.is-top-page .hero-eyebrow {
        color: rgb(255 255 255 / 0.85);
      }
      body.is-top-page .hero-title {
        color: var(--primary-foreground);
      }
      body.is-top-page .hero-lead {
        color: rgb(255 255 255 / 0.85);
      }
      body.is-top-page .hero::after {
        display: none;
      }
      body.is-top-page .hero-stats {
        background: var(--primary);
      }
      body.is-top-page .hero-stats-inner {
        background: transparent;
        border-bottom: none;
      }
      body.is-top-page .hero-stat {
        border-left-color: rgb(255 255 255 / 0.2);
      }
      body.is-top-page .hero-stat-num,
      body.is-top-page .hero-stat-num .unit {
        color: var(--primary-foreground);
      }
      body.is-top-page .hero-stat-label {
        color: var(--primary-foreground);
      }
      body.is-top-page .hero-stat-meta {
        color: rgb(255 255 255 / 0.65);
      }
      body.is-top-page .hero .button--primary {
        background: var(--primary-foreground);
        color: var(--primary);
        border-color: var(--primary-foreground);
      }
      body.is-top-page .hero .button--primary:hover {
        background: var(--muted);
        border-color: var(--muted);
      }
      body.is-top-page .hero .button--outline {
        background: transparent;
        color: var(--primary-foreground);
        border-color: rgb(255 255 255 / 0.6);
      }
      body.is-top-page .hero .button--outline:hover {
        background: rgb(255 255 255 / 0.1);
        border-color: var(--primary-foreground);
      }
      body.is-top-page .megamenu {
        border-top: 1px solid rgb(255 255 255 / 0.1);
      }
      .related-card {
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        padding: var(--sp-5) var(--sp-10) var(--sp-5) var(--sp-5);
        background: var(--card);
        font-size: var(--text-body-md);
        cursor: pointer;
        transition:
          border-color var(--duration-base) var(--easing),
          transform var(--duration-base) var(--easing),
          box-shadow var(--duration-base) var(--easing);
        display: flex;
        flex-direction: column;
        gap: var(--sp-2);
        min-height: 96px;
      }
      .related-card:hover {
        border-color: var(--primary);
        transform: translateY(-2px);
        box-shadow: var(--shadow-sm);
      }
      .related-card-name {
        font-weight: var(--font-weight-bold);
        font-size: var(--fs-subheading);
        line-height: var(--fs-subheading-lh);
        color: var(--foreground);
      }
      .related-card-summary {
        font-size: var(--text-body-sm);
        color: var(--muted-foreground);
        line-height: 1.6;
        margin: 0;
      }
      .related-card--all {
        background: var(--muted);
        border-style: dashed;
      }
      .related-card--all .related-card-name {
        color: var(--primary);
      }
      .related-card--all .related-card-summary {
        color: var(--primary);
        font-weight: var(--font-weight-semibold);
      }
      .solution-block {
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        background: var(--card);
        padding: var(--sp-12);
        margin-bottom: var(--sp-6);
      }
      .solution-num {
        display: inline-block;
        background: var(--primary);
        color: var(--primary-foreground);
        padding: 5px 14px;
        font-size: var(--text-caption);
        font-weight: var(--font-weight-bold);
        letter-spacing: 0.1em;
        margin-bottom: var(--sp-3);
        border-radius: var(--radius-sm);
      }
      .solution-eyebrow {
        font-size: var(--text-caption);
        color: var(--foreground-subtle);
        letter-spacing: 0.1em;
        margin-bottom: var(--sp-2);
        font-weight: var(--font-weight-semibold);
      }
      .solution-title {
        font-size: var(--text-display-sm);
        font-weight: var(--font-weight-bold);
        margin-bottom: var(--sp-4);
        line-height: var(--text-display-sm-lh);
        letter-spacing: var(--tracking-tight);
      }
      .solution-lead {
        font-size: var(--text-body-md);
        color: var(--muted-foreground);
        line-height: var(--text-body-md-lh);
        margin-bottom: var(--sp-5);
      }
      .mvv-card {
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        padding: var(--sp-12) var(--sp-6);
        background: var(--card);
        text-align: center;
        height: 100%;
      }
      .mvv-label {
        font-size: var(--text-caption);
        color: var(--primary);
        letter-spacing: 0.2em;
        margin-bottom: var(--sp-3);
        font-weight: var(--font-weight-semibold);
      }
      .mvv-statement {
        font-size: var(--text-display-sm);
        font-weight: var(--font-weight-bold);
        margin-bottom: var(--sp-3);
        line-height: 1.5;
        letter-spacing: var(--tracking-tight);
      }
      .mvv-desc {
        font-size: var(--text-body-md);
        color: var(--muted-foreground);
        line-height: var(--text-body-md-lh);
      }
      .ceo-grid {
        display: grid;
        grid-template-columns: 1fr 2fr;
        gap: var(--sp-12);
        align-items: start;
      }
      .ceo-img {
        height: 320px;
      }
      .ceo-message-title {
        font-size: var(--text-display-sm);
        font-weight: var(--font-weight-bold);
        margin-bottom: var(--sp-5);
        line-height: var(--text-display-sm-lh);
        letter-spacing: var(--tracking-tight);
      }
      .ceo-message-body {
        font-size: var(--text-body-md);
        color: var(--muted-foreground);
        line-height: var(--text-body-md-lh);
        margin-bottom: var(--sp-3);
      }
      .ceo-message-sign {
        font-size: var(--text-body-md);
        color: var(--foreground);
        text-align: right;
        margin-top: var(--sp-5);
        font-weight: var(--font-weight-semibold);
      }
      .info-table {
        width: 100%;
        border-collapse: collapse;
        border-top: 1px solid var(--border);
      }
      .info-table th,
      .info-table td {
        border-bottom: 1px solid var(--border);
        padding: var(--sp-3) var(--sp-4);
        font-size: var(--text-body-md);
        text-align: left;
        vertical-align: top;
      }
      .info-table th {
        background: var(--muted);
        color: var(--muted-foreground);
        width: 200px;
        font-weight: var(--font-weight-semibold);
      }
      .info-table td {
        color: var(--foreground);
      }
      .access-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--sp-12);
      }
      .access-map {
        height: 280px;
      }
      .access-info dt {
        font-size: var(--text-caption);
        color: var(--foreground-subtle);
        letter-spacing: 0.05em;
        margin-top: var(--sp-3);
        font-weight: var(--font-weight-semibold);
      }
      .access-info dt:first-of-type {
        margin-top: 0;
      }
      .access-info dd {
        font-size: var(--text-body-md);
        color: var(--foreground);
        margin: 4px 0 0;
        line-height: var(--text-body-md-lh);
      }
      .timeline {
        margin: 0;
      }
      .timeline-item {
        display: grid;
        grid-template-columns: 160px 1fr;
        gap: var(--sp-8);
        padding: var(--sp-5) 0;
        border-bottom: 1px solid var(--border);
        align-items: start;
      }
      .timeline-year {
        font-size: var(--text-body-lg);
        font-weight: var(--font-weight-bold);
        color: var(--primary);
        letter-spacing: 0.05em;
        font-variant-numeric: tabular-nums;
      }
      .timeline-body {
        font-size: var(--text-body-md);
        color: var(--muted-foreground);
        line-height: var(--text-body-md-lh);
      }
      .team-card {
        text-align: center;
      }
      .team-photo {
        height: 220px;
        margin-bottom: var(--sp-4);
      }
      .team-name {
        font-weight: var(--font-weight-bold);
        font-size: var(--fs-subheading);
        line-height: var(--fs-subheading-lh);
        margin-bottom: 4px;
      }
      .team-role {
        font-size: var(--text-body-sm);
        color: var(--primary);
        margin-bottom: var(--sp-2);
        font-weight: var(--font-weight-semibold);
      }
      .team-bio {
        font-size: var(--text-body-md);
        color: var(--muted-foreground);
        line-height: var(--text-body-md-lh);
        text-align: left;
      }
      .values-card {
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        padding: var(--sp-10) var(--sp-6);
        background: var(--card);
        height: 100%;
      }
      .values-num {
        font-size: var(--fs-body);
        font-weight: var(--font-weight-bold);
        color: var(--primary);
        margin-bottom: var(--sp-3);
        font-variant-numeric: tabular-nums;
        letter-spacing: var(--tracking-wide);
      }
      .values-title {
        font-size: var(--text-display-sm);
        font-weight: var(--font-weight-bold);
        margin-bottom: var(--sp-3);
        line-height: var(--text-display-sm-lh);
        letter-spacing: var(--tracking-tight);
      }
      .values-desc {
        font-size: var(--text-body-md);
        color: var(--muted-foreground);
        line-height: var(--text-body-md-lh);
      }
      .culture-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--sp-12);
        align-items: center;
      }
      .culture-img {
        height: 300px;
      }
      .culture-list {
        font-size: var(--text-body-md);
        color: var(--foreground);
        line-height: 2.2;
        padding-left: var(--sp-5);
      }
      .benefit-card {
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        padding: var(--sp-5);
        background: var(--card);
        height: 100%;
      }
      .benefit-card h4 {
        font-size: var(--fs-subheading);
        line-height: var(--fs-subheading-lh);
        font-weight: var(--font-weight-bold);
        margin: 0 0 var(--sp-2);
      }
      .benefit-card p {
        font-size: var(--text-body-md);
        color: var(--muted-foreground);
        line-height: var(--text-body-md-lh);
        margin: 0;
      }
      .job-filter {
        display: flex;
        gap: var(--sp-2);
        flex-wrap: wrap;
        margin-bottom: var(--sp-6);
        align-items: center;
      }
      .job-filter-label {
        font-size: var(--text-body-sm);
        color: var(--muted-foreground);
        margin-right: var(--sp-2);
      }
      .job-filter-btn {
        padding: 0 var(--sp-3);
        height: var(--control-h-sm);
        font-size: var(--text-body-sm);
        border: 1px solid var(--border);
        background: var(--card);
        color: var(--foreground);
        cursor: pointer;
        border-radius: var(--radius-md);
        font-weight: var(--font-weight-medium);
        transition:
          background var(--duration-base) var(--easing),
          border-color var(--duration-base) var(--easing),
          color var(--duration-base) var(--easing);
      }
      .job-filter-btn:hover {
        border-color: var(--border-strong);
      }
      .job-filter-btn.is-active {
        background: var(--primary);
        color: var(--primary-foreground);
        border-color: var(--primary);
      }
      .job-card {
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        padding: var(--sp-6);
        background: var(--card);
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--sp-6);
        align-items: center;
        margin-bottom: var(--sp-3);
      }
      .job-title {
        font-size: var(--fs-subheading);
        line-height: var(--fs-subheading-lh);
        font-weight: var(--font-weight-bold);
        margin-bottom: 6px;
      }
      .job-desc {
        font-size: var(--text-body-md);
        color: var(--muted-foreground);
        line-height: var(--text-body-md-lh);
        margin-bottom: var(--sp-3);
      }
      .job-meta {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
      }
      .process-grid {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: var(--sp-2);
        margin: var(--sp-6) 0;
      }
      .process-step {
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        padding: var(--sp-5) var(--sp-3);
        background: var(--card);
        text-align: center;
        position: relative;
      }
      .process-step-num {
        font-size: var(--text-caption);
        color: var(--foreground-subtle);
        letter-spacing: 0.1em;
        display: block;
        margin-bottom: var(--sp-2);
        font-weight: var(--font-weight-semibold);
      }
      .process-step-title {
        font-weight: var(--font-weight-bold);
        font-size: var(--fs-lead);
        color: var(--foreground);
        line-height: 1.5;
      }
      .interview-card {
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        background: var(--card);
        cursor: pointer;
        transition:
          border-color var(--duration-base) var(--easing),
          box-shadow var(--duration-base) var(--easing);
        overflow: hidden;
      }
      .interview-card:hover {
        border-color: var(--primary);
        box-shadow: var(--shadow-sm);
      }
      .interview-img {
        height: 200px;
      }
      .interview-body {
        padding: var(--sp-5);
      }
      .interview-name {
        font-weight: var(--font-weight-bold);
        font-size: var(--fs-subheading);
        line-height: var(--fs-subheading-lh);
        margin-bottom: 4px;
      }
      .interview-role {
        font-size: var(--text-body-sm);
        color: var(--primary);
        margin-bottom: var(--sp-2);
        font-weight: var(--font-weight-semibold);
      }
      .interview-quote {
        font-size: var(--text-body-md);
        color: var(--muted-foreground);
        line-height: var(--text-body-md-lh);
      }
      .news-filter {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
        margin-bottom: var(--sp-3);
        align-items: center;
      }
      .news-filter-label {
        font-size: var(--text-body-sm);
        color: var(--muted-foreground);
        margin-right: var(--sp-2);
      }
      .news-filter-btn {
        padding: 0 var(--sp-3);
        height: var(--control-h-sm);
        font-size: var(--text-body-sm);
        border: 1px solid var(--border);
        background: var(--card);
        color: var(--foreground);
        cursor: pointer;
        border-radius: var(--radius-md);
        font-weight: var(--font-weight-medium);
        transition:
          background var(--duration-base) var(--easing),
          border-color var(--duration-base) var(--easing),
          color var(--duration-base) var(--easing);
      }
      .news-filter-btn:hover {
        border-color: var(--border-strong);
      }
      .news-filter-btn.is-active {
        background: var(--primary);
        color: var(--primary-foreground);
        border-color: var(--primary);
      }
      .news-list {
        background: var(--card);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
      }
      .news-row {
        display: grid;
        grid-template-columns: 130px 1fr auto;
        gap: var(--sp-4);
        padding: var(--sp-4) var(--sp-5);
        border-bottom: 1px solid var(--border);
        align-items: center;
        font-size: var(--text-body-md);
        cursor: pointer;
        transition: background var(--duration-fast) ease;
      }
      .news-row:last-child {
        border-bottom: none;
      }
      .news-row:hover {
        background: var(--accent);
      }
      .news-date {
        color: var(--muted-foreground);
        font-weight: var(--font-weight-semibold);
        font-variant-numeric: tabular-nums;
        letter-spacing: 0.05em;
      }
      .news-title {
        color: var(--foreground);
        font-weight: var(--font-weight-regular);
      }
      .news-arrow {
        color: var(--foreground-subtle);
        font-size: var(--text-body-lg);
      }
      .pagination {
        display: flex;
        justify-content: center;
        gap: 6px;
        margin-top: var(--sp-10);
      }
      .pg-btn {
        padding: 0 var(--sp-3);
        height: var(--control-h-md);
        display: inline-flex;
        align-items: 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);
        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.is-active {
        background: var(--primary);
        color: var(--primary-foreground);
        border-color: var(--primary);
      }
      .stub-screen .stub-inner {
        max-width: 720px;
        margin: 0 auto;
        padding: var(--sp-24) var(--page-padding-x);
        text-align: center;
      }
      .stub-eyebrow {
        font-size: var(--text-caption);
        letter-spacing: var(--tracking-wide);
        color: var(--foreground-subtle);
        margin-bottom: var(--sp-3);
        font-weight: var(--font-weight-semibold);
      }
      .stub-title {
        font-size: var(--text-display-lg);
        font-weight: var(--font-weight-bold);
        margin-bottom: var(--sp-5);
        line-height: var(--text-display-lg-lh);
        letter-spacing: var(--tracking-tight);
      }
      .stub-desc {
        font-size: var(--text-body-lg);
        color: var(--muted-foreground);
        line-height: var(--text-body-lg-lh);
        margin-bottom: var(--sp-10);
      }
      .chat-dock {
        position: fixed;
        left: 50%;
        bottom: var(--sp-5);
        transform: translateX(-50%);
        width: 100%;
        max-width: 720px;
        padding: 0 var(--sp-4);
        z-index: 200;
        pointer-events: none;
      }
      .chat-dock-inner {
        background: var(--card);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-xl);
        overflow: hidden;
        pointer-events: auto;
        display: flex;
        flex-direction: column;
        transition: max-height var(--duration-slow) var(--easing);
      }
      .chat-dock-prompt {
        display: flex;
        align-items: center;
        gap: var(--sp-3);
        padding: var(--sp-2) var(--sp-4);
        background: var(--muted);
        border-bottom: 1px solid var(--border);
        font-size: var(--text-caption);
        color: var(--muted-foreground);
      }
      .chat-dock-prompt::before {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: var(--radius-full);
        background: var(--success);
        flex-shrink: 0;
      }
      .chat-dock-prompt-label {
        font-weight: var(--font-weight-semibold);
        color: var(--foreground);
        font-size: var(--text-caption);
        letter-spacing: var(--tracking-wide);
      }
      .chat-dock-prompt-sub {
        color: var(--muted-foreground);
      }
      .chat-dock-collapse {
        margin-left: auto;
        border: none;
        background: transparent;
        color: var(--muted-foreground);
        cursor: pointer;
        font-size: var(--text-body-md);
        padding: 4px 8px;
        border-radius: var(--radius-sm);
        display: none;
        line-height: 1;
      }
      .chat-dock-collapse:hover {
        color: var(--foreground);
        background: var(--accent);
      }
      .chat-dock.is-expanded .chat-dock-collapse {
        display: inline-block;
      }
      .chat-dock-body {
        display: none;
        padding: var(--sp-4);
        background: var(--muted);
        max-height: 320px;
        overflow-y: auto;
      }
      .chat-dock.is-expanded .chat-dock-body {
        display: block;
      }
      .cd-msg-bot {
        background: var(--card);
        border: 1px solid var(--border);
        padding: var(--sp-3) var(--sp-4);
        font-size: var(--text-body-md);
        color: var(--foreground);
        margin-bottom: var(--sp-2);
        max-width: 85%;
        border-radius: 0 var(--radius-md) var(--radius-md) var(--radius-md);
        line-height: var(--text-body-md-lh);
      }
      .cd-msg-user {
        background: var(--primary);
        color: var(--primary-foreground);
        padding: var(--sp-3) var(--sp-4);
        font-size: var(--text-body-md);
        margin-bottom: var(--sp-2);
        max-width: 85%;
        margin-left: auto;
        border-radius: var(--radius-md) 0 var(--radius-md) var(--radius-md);
        line-height: var(--text-body-md-lh);
      }

      .chat-dock-input-row {
        display: flex;
        align-items: center;
        gap: var(--sp-2);
        padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4);
        background: var(--card);
      }
      .chat-dock-input {
        flex: 1;
        height: var(--control-h-lg);
        border: none;
        background: transparent;
        font-size: var(--text-body-md);
        color: var(--foreground);
        outline: none;
        font-family: var(--font-sans);
      }
      .chat-dock-input::placeholder {
        color: var(--foreground-subtle);
      }
      .chat-dock-send {
        height: var(--control-h-md);
        padding: 0 var(--sp-4);
        background: var(--primary);
        color: var(--primary-foreground);
        border: 1px solid var(--primary);
        border-radius: var(--radius-md);
        font-size: var(--text-body-md);
        font-weight: var(--font-weight-semibold);
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        transition: background var(--duration-base) var(--easing);
        flex-shrink: 0;
      }
      .chat-dock-send:hover {
        background: var(--primary-hover);
        border-color: var(--primary-hover);
      }
      .chat-dock.is-sales-mode .chat-dock-prompt {
        background: var(--primary);
        color: var(--primary-foreground);
        border-bottom-color: var(--primary);
      }
      .chat-dock.is-sales-mode .chat-dock-prompt-label {
        color: var(--primary-foreground);
      }
      .chat-dock.is-sales-mode .chat-dock-prompt-sub {
        color: rgb(255 255 255 / 0.8);
      }
      .chat-dock.is-sales-mode .chat-dock-prompt::before {
        background: rgb(255 255 255 / 0.8);
      }
      .chat-dock.is-sales-mode .chat-dock-collapse {
        color: rgb(255 255 255 / 0.8);
      }
      @media (max-width: 768px) {
        .chat-dock {
          bottom: 0;
          padding: 0;
        }
        .chat-dock-inner {
          border-radius: var(--radius-lg) var(--radius-lg) 0 0;
          border-bottom: none;
          border: 2px solid var(--primary);
          border-bottom: none;
          box-shadow:
            0 -8px 24px rgba(10, 57, 112, 0.25),
            0 -2px 8px rgba(10, 57, 112, 0.15);
        }
        .chat-dock-prompt {
          background: var(--primary);
          border-bottom: none;
          padding: var(--sp-3) var(--sp-4);
        }
        .chat-dock-prompt::before {
          background: #4ade80;
          box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.25);
          width: 8px;
          height: 8px;
        }
        .chat-dock-prompt-label {
          color: #fff;
        }
        .chat-dock-prompt-sub {
          color: rgb(255 255 255 / 0.85);
        }
        .chat-dock-collapse {
          color: rgb(255 255 255 / 0.85);
        }
        .chat-dock-input-row {
          padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-3);
          background: #fff;
          border-top: 1px solid var(--border);
        }
        .chat-dock-input {
          font-size: 16px;
          color: var(--foreground);
          min-width: 0;
        }
        .chat-dock-input::placeholder {
          color: #9ca3af;
        }
        .chat-dock-send {
          background: var(--primary);
          color: #fff;
          border: 1px solid var(--primary);
          font-weight: var(--font-weight-bold);
          box-shadow: 0 2px 8px rgba(10, 57, 112, 0.3);
          padding: 0 var(--sp-3);
          font-size: 14px;
          flex-shrink: 0;
          white-space: nowrap;
        }
      }
      .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);
      }
      body.is-top-page .hamburger-bar {
        background: var(--primary-foreground);
      }
      .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 {
        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;
      }
      body.is-drawer-open .chat-dock {
        display: none;
      }
      .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 {
        background: var(--accent);
      }
      .mobile-drawer-toggle:active {
        background: var(--accent);
      }
      .mobile-drawer-toggle:focus-visible {
        outline: none;
        box-shadow: var(--ring-focus);
      }
      .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-toggle[aria-expanded="true"] {
        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-flat {
        border-bottom: 1px solid var(--border);
        padding-bottom: var(--sp-3);
      }
      .mobile-drawer-flat-title {
        font-size: var(--fs-body);
        font-weight: var(--font-weight-semibold);
        color: var(--muted-foreground);
        padding: var(--sp-2) var(--page-padding-x);
        margin: 0;
        letter-spacing: 0.04em;
        line-height: 1.4;
      }
      .mobile-drawer-flat .mobile-drawer-grid {
        padding: 0;
      }
      .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);
      }
      .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) var(--sp-2);
        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;
      }
      @media (max-width: 900px) {
        .header-nav {
          display: none;
        }
        .header-inner {
          gap: var(--sp-3);
        }
        .header-mobile-actions {
          display: flex;
        }
        .nav-cta--mobile {
          display: inline-flex;
          align-items: center;
        }
        .hamburger {
          display: flex;
        }
        .megamenu {
          display: none !important;
        }
        .hero-lead {
          font-size: var(--text-body-md);
        }
        .hero {
          padding: var(--sp-12) 0 var(--sp-10);
        }
        .hero-cta-row {
          flex-direction: column;
          align-items: stretch;
          gap: var(--sp-2);
        }
        .hero-cta-row .button {
          width: 100%;
        }
        .hero .button--xl {
          --_h: var(--control-h-lg);
          --_px: var(--control-px-lg);
          --_fs: var(--text-body-md);
          border-radius: var(--radius-md);
        }
        .hero-stats-inner {
          grid-template-columns: repeat(2, 1fr);
          gap: var(--sp-8) var(--sp-4);
          padding: var(--sp-8) var(--page-padding-x);
        }
        .hero-stat {
          border-left: none;
          padding: 0;
        }
        .hero-stat:nth-child(2n + 1) {
          border-left: none;
        }
        .hero-stat-num {
          font-size: var(--text-display-md);
        }
        .product-hero {
          padding: var(--sp-12) 0;
        }
        .product-hero-inner {
          grid-template-columns: 1fr;
          gap: var(--sp-6);
        }
        .product-hero-desc {
          font-size: var(--text-body-md);
          margin-bottom: var(--sp-6);
        }
        .page-hero {
          padding: var(--sp-12) var(--page-padding-x);
        }
        .page-hero-lead {
          font-size: var(--text-body-md);
        }
        .business-block {
          padding: var(--sp-6);
          margin-bottom: var(--sp-4);
        }
        .section-lead {
          font-size: var(--text-body-md);
        }
        .row-3,
        .row-4,
        .row-5 {
          grid-template-columns: repeat(2, 1fr);
        }
        .mm-grid-products,
        .mm-grid-solutions,
        .mm-grid-login {
          grid-template-columns: 1fr;
        }
        .section {
          padding: var(--sp-10) 0;
        }
        .section--bg > .container {
          padding: var(--sp-10) var(--page-padding-x);
        }
        .hero-stats {
          padding: 0;
        }
        .dark-cta {
          padding: var(--sp-8) var(--page-padding-x);
        }
        .dark-cta-inner {
          padding: var(--sp-10) var(--sp-6);
        }
        .dark-cta p {
          font-size: var(--text-body-md);
        }
        .site-footer {
          margin-top: var(--sp-10);
          padding: var(--sp-10) 0 var(--sp-6);
        }
        .cv-card {
          padding: var(--sp-6);
        }
        .license-row > .license-type {
          flex: 1 1 100%;
        }
        .license-row > .license-count,
        .license-row > .license-number {
          flex: 1 1 auto;
        }
        .row-2 > *,
        .row-3 > *,
        .row-4 > *,
        .row-5 > *,
        .feature-card > *,
        .overview-grid > *,
        .philosophy-grid > *,
        .ceo-grid > *,
        .access-grid > *,
        .timeline-item > *,
        .culture-grid > *,
        .news-row > *,
        .product-hero-inner > *,
        .hero-stats > * {
          min-width: 0;
        }
        .feature-card-img {
          aspect-ratio: 16 / 10;
        }
        .overview-grid {
          grid-template-columns: 1fr;
          gap: var(--sp-8);
        }
        .philosophy-grid {
          grid-template-columns: 1fr;
          gap: var(--sp-6);
        }
        .philosophy-grid > * {
          min-width: 0;
        }
        .philosophy-img {
          width: 100%;
          height: auto;
          aspect-ratio: 16 / 9;
          min-height: 200px;
        }
        .philosophy-quote {
          font-size: var(--text-body-lg);
          padding: var(--sp-3) var(--sp-4);
        }
        .ceo-grid {
          grid-template-columns: 1fr;
          gap: var(--sp-6);
        }
        .access-grid {
          grid-template-columns: 1fr;
          gap: var(--sp-6);
        }
        .timeline-item {
          grid-template-columns: 1fr;
          gap: var(--sp-2);
        }
        .culture-grid {
          grid-template-columns: 1fr;
          gap: var(--sp-6);
        }
        .news-row {
          grid-template-columns: 1fr auto;
          grid-template-areas: "date date" "title arrow";
          column-gap: var(--sp-3);
          row-gap: var(--sp-2);
          padding: var(--sp-4);
          align-items: center;
        }
        .news-row .news-date {
          grid-area: date;
          font-size: var(--text-body-sm);
        }
        .news-row .news-title {
          grid-area: title;
          font-size: var(--text-body-lg);
          line-height: 1.5;
          font-weight: var(--font-weight-medium);
        }
        .news-row .news-arrow {
          grid-area: arrow;
        }
        .industry-tabs {
          margin: var(--sp-3) 0 var(--sp-6);
        }
        .industry-tabs-buttons {
          display: flex;
          flex-wrap: nowrap;
          overflow-x: auto;
          -webkit-overflow-scrolling: touch;
          scrollbar-width: none;
          justify-content: flex-start;
          gap: 2px;
          padding: 3px;
          width: 100%;
        }
        .industry-tabs-buttons::-webkit-scrollbar {
          display: none;
        }
        .industry-tab {
          flex-shrink: 0;
          padding: 0 var(--sp-3);
          height: 44px;
          font-size: var(--text-body-sm);
        }
        .footer-brand-meta {
          flex-direction: column;
          gap: var(--sp-2);
        }
        .footer-brand-meta > span {
          display: grid;
          grid-template-columns: 80px 1fr;
          column-gap: var(--sp-3);
          align-items: start;
          line-height: 1.65;
        }
        .footer-brand-meta strong {
          margin-right: 0;
        }
        .dark-cta .flex-row {
          flex-direction: column;
          align-items: stretch;
          gap: var(--sp-2);
        }
        .dark-cta .flex-row .button {
          width: 100%;
        }
        .product-hero-cta-row {
          flex-direction: column;
          align-items: stretch;
          gap: var(--sp-2);
        }
        .product-hero-cta-row .button {
          width: 100%;
        }
        .section > .container > .button,
        .section > .container > .flex-row > .button,
        .business-block > .button {
          width: 100%;
        }
      }
      @media (max-width: 640px) {
        .row-2,
        .row-3,
        .row-4,
        .row-5 {
          grid-template-columns: 1fr;
        }
        .hero-stats-inner {
          grid-template-columns: repeat(2, 1fr);
          padding: var(--sp-6) var(--page-padding-x);
          gap: var(--sp-6) var(--sp-3);
        }
        .hero-stat-label {
          font-size: var(--text-caption);
        }
        .hero {
          padding: var(--sp-10) 0 var(--sp-8);
        }
        .hero-lead {
          font-size: var(--text-body-md);
          margin-bottom: var(--sp-5);
        }
        body.is-top-page .hero-cta-row {
          display: none;
        }
        body.is-top-page .hero {
          padding: var(--sp-8) 0 var(--sp-6);
        }
        body.is-top-page .hero-stats-inner {
          padding: var(--sp-6) var(--page-padding-x);
          gap: var(--sp-5) var(--sp-3);
        }
        .product-hero {
          padding: var(--sp-10) 0;
        }
        .product-hero-desc {
          font-size: var(--text-body-md);
          margin-bottom: var(--sp-5);
          text-align: left;
        }
        .product-hero-inner {
          gap: var(--sp-5);
        }
        .page-hero {
          padding: var(--sp-10) var(--page-padding-x);
        }
        .section-lead {
          text-align: left;
        }
        .dark-cta p {
          text-align: left;
        }
        .business-block {
          padding: var(--sp-5) var(--sp-4);
        }
        .section-title {
          margin-bottom: var(--sp-3);
        }
        .section-lead {
          font-size: var(--text-body-md);
          margin-bottom: var(--sp-6);
        }
        .section-eyebrow {
          margin-bottom: var(--sp-2);
        }
        .page-hero-title,
        .product-hero-title,
        .cv-title,
        .legal-title,
        .news-detail-title,
        .stub-title,
        .industry-hero {
          padding: var(--sp-10) 0 var(--sp-8);
        }
        .pr-logo--md {
          gap: 8px;
        }
        .pr-logo--md .pr-logo-mark {
          width: 22px;
          height: 22px;
          font-size: 13px;
        }
        .pr-logo--md .pr-logo-text {
          font-size: var(--text-body-md);
        }
        .nav-cta--mobile {
          height: var(--control-h-sm);
          padding: 0 var(--sp-3);
          font-size: var(--text-body-sm);
        }
        .dark-cta {
          padding: var(--sp-6) var(--page-padding-x);
        }
        .dark-cta-inner {
          padding: var(--sp-8) var(--sp-4);
        }
        .section {
          padding: var(--sp-8) 0;
        }
        .section--bg > .container {
          padding: var(--sp-8) var(--page-padding-x);
        }
        .hero-stats-inner,
        .dark-cta-inner {
          margin-left: 0;
          margin-right: 0;
        }
        .footer-brand-meta {
          flex-direction: column;
          gap: var(--sp-2);
        }
        .site-footer {
          margin-top: var(--sp-8);
          padding: var(--sp-8) 0 var(--sp-5);
        }
        .cv-page {
          padding: var(--sp-6) 0 var(--sp-10);
        }
        .cv-card {
          padding: var(--sp-5) var(--sp-4);
        }
        .cv-info-row {
          grid-template-columns: 1fr;
          gap: var(--sp-3);
        }
        .cv-radio-item {
          padding: var(--sp-3) var(--sp-4);
        }
        .cv-field {
          margin-bottom: var(--sp-5);
        }
        .cv-consent {
          padding: var(--sp-4);
          margin: var(--sp-6) 0 var(--sp-4);
        }
        .cv-page .cv-meta-row {
          display: none;
        }
        .cv-page .cv-header {
          margin-bottom: var(--sp-6);
          text-align: left;
        }
        .cv-page .cv-lead {
          line-height: 1.7;
          text-align: left;
        }
        :root {
          --page-padding-x: 24px;
        }
        .button:not(.nav-cta):not(.nav-cta--mobile):not(.chat-dock-send):not(
            .chat-suggest-chip
          ):not(.chip):not(.industry-tab):not(.news-filter-btn):not(
            .job-filter-btn
          ):not(.pg-btn):not(.tab):not(.btn-icon) {
          width: 100%;
        }
        .flex-row {
          flex-wrap: wrap;
        }
        .hero-cta-row,
        .dark-cta .flex-row,
        .product-hero-cta-row,
        .business-block + .flex-row {
          flex-direction: column;
          align-items: stretch;
        }
      }
      @media (max-width: 480px) {
        .section {
          padding: var(--sp-6) 0;
        }
        .section--bg > .container {
          padding: var(--sp-6) var(--page-padding-x);
        }
        .hero {
          padding: var(--sp-8) 0 var(--sp-6);
        }
        .site-footer {
          margin-top: var(--sp-6);
          padding: var(--sp-6) 0 var(--sp-4);
        }
        .hero-stats-inner {
          padding: var(--sp-5) var(--page-padding-x);
          gap: var(--sp-5) var(--sp-3);
        }
        .dark-cta {
          padding: var(--sp-4) var(--page-padding-x);
        }
        .dark-cta-inner {
          padding: var(--sp-6) var(--sp-4);
        }
        .cv-card {
          padding: var(--sp-4) var(--sp-3);
        }
        .cv-field {
          margin-bottom: var(--sp-4);
        }
        .cv-page {
          padding: var(--sp-5) 0 var(--sp-8);
        }
        .legal-page {
          padding: var(--sp-6) 0 var(--sp-8);
        }
        .news-detail-page {
          padding: var(--sp-6) 0 var(--sp-8);
        }
        .page-hero {
          padding: var(--sp-10) var(--page-padding-x);
        }
        .product-hero {
          padding: var(--sp-10) 0;
        }
        .industry-hero {
          padding: var(--sp-8) 0 var(--sp-6);
        }
        .business-block {
          padding: var(--sp-4);
        }
      }
      .release-notice {
        width: 100%;
        background: #fff1f1;
        border-top: 2px solid #d92d20;
        border-bottom: 2px solid #d92d20;
        color: #b42318;
        padding: var(--sp-5) var(--page-padding-x);
      }
      .release-notice-inner {
        max-width: var(--container-content);
        margin: 0 auto;
        display: flex;
        align-items: center;
        gap: var(--sp-4);
        flex-wrap: wrap;
      }
      .release-notice-label {
        display: inline-flex;
        align-items: center;
        height: 24px;
        padding: 0 var(--sp-2);
        background: #d92d20;
        color: #fff;
        font-size: var(--text-caption);
        font-weight: var(--font-weight-bold);
        letter-spacing: var(--tracking-wide);
        border-radius: var(--radius-sm);
        flex-shrink: 0;
        white-space: nowrap;
      }
      .release-notice-text {
        margin: 0;
        font-size: var(--text-body-md);
        line-height: 1.7;
        font-weight: var(--font-weight-semibold);
        color: #b42318;
        flex: 1;
        min-width: 240px;
      }
      .release-notice-text strong {
        color: #912018;
        font-weight: var(--font-weight-bold);
      }
      body.is-top-page .release-notice {
        background: #fff1f1;
        border-color: #d92d20;
      }
      @media (max-width: 600px) {
        .release-notice {
          padding: var(--sp-4) var(--page-padding-x);
        }
        .release-notice-inner {
          gap: var(--sp-3);
        }
        .release-notice-text {
          font-size: var(--text-body-sm);
          min-width: 0;
          width: 100%;
        }
      }
      .page-screen {
        display: none;
      }
      .page-screen.is-active {
        display: block;
      }
      .text-center {
        text-align: left;
      }
      .ds-card.text-center {
        text-align: center;
      }
      .nowrap {
        white-space: nowrap;
      }
      .mt-5 {
        margin-top: var(--sp-5);
      }
      .mt-6 {
        margin-top: var(--sp-6);
      }
      .mt-8 {
        margin-top: var(--sp-8);
      }
      .mb-5 {
        margin-bottom: var(--sp-5);
      }
      .flex-row {
        display: flex;
        gap: var(--sp-3);
        flex-wrap: wrap;
      }
      .flex-center {
        justify-content: flex-start;
      }
      .card-label {
        font-weight: 600;
        font-size: var(--fs-subheading);
        line-height: var(--fs-subheading-lh);
        margin-bottom: var(--sp-2);
      }
      .card-label--md {
        font-weight: 600;
        font-size: var(--fs-subheading);
        margin-bottom: var(--sp-2);
        line-height: var(--fs-subheading-lh);
      }
      .card-label--lg {
        font-size: var(--fs-subheading);
        line-height: var(--fs-subheading-lh);
        font-weight: bold;
        margin-bottom: var(--sp-2);
      }
      .card-label--strong {
        font-size: var(--fs-subheading);
        font-weight: bold;
        margin-bottom: var(--sp-2);
        line-height: var(--fs-subheading-lh);
      }
      .card-desc {
        font-size: var(--text-body-md);
        color: var(--muted-foreground);
        line-height: 1.7;
      }
      .card-desc--loose {
        font-size: var(--text-body-md);
        color: var(--muted-foreground);
        line-height: 2;
      }
      .card-desc--plain {
        font-size: var(--text-body-md);
        color: var(--muted-foreground);
      }
      .card-eyebrow {
        font-size: var(--text-caption);
        color: var(--foreground-subtle);
        letter-spacing: var(--tracking-wide);
        margin-bottom: var(--sp-2);
        font-weight: 600;
      }
      .card-clickable {
        cursor: pointer;
        padding: var(--sp-6);
      }
      .text-primary-bold {
        color: var(--primary);
        font-weight: 600;
      }
      .body-sm-loose {
        font-size: var(--text-body-md);
        line-height: 1.9;
        color: var(--muted-foreground);
      }
      .img-ph-md {
        height: 140px;
        margin-bottom: var(--sp-4);
      }
      .list-loose {
        font-size: var(--text-body-md);
        line-height: 2;
        padding-left: var(--sp-5);
        color: var(--muted-foreground);
      }
      .lead-narrow {
        margin: 0 auto var(--sp-8);
      }
      .mt-2 {
        margin-top: var(--sp-2);
      }
      .mt-4 {
        margin-top: var(--sp-4);
      }
      .mb-4 {
        margin-bottom: var(--sp-4);
      }
      .img-ph-dashed {
        background: var(--muted);
        border-style: dashed;
      }
      .card-label--simple {
        font-weight: 600;
        font-size: var(--fs-subheading);
        line-height: var(--fs-subheading-lh);
        margin-bottom: var(--sp-2);
      }
      .card-label--bold {
        font-size: var(--fs-subheading);
        font-weight: bold;
        line-height: var(--fs-subheading-lh);
        margin-bottom: var(--sp-2);
      }
      .card-desc--bordered {
        margin-top: var(--sp-4);
        padding-top: var(--sp-4);
        border-top: 1px solid var(--border);
        font-size: var(--text-body-md);
        color: var(--muted-foreground);
        line-height: 1.7;
      }
      .card-desc--with-mb {
        font-size: var(--text-body-md);
        color: var(--muted-foreground);
        line-height: 1.7;
        margin-bottom: var(--sp-4);
      }
      .sub-link-mm {
        padding-left: var(--sp-4);
        font-size: var(--text-caption);
        color: var(--muted-foreground);
      }
      .news-date-cell {
        color: var(--muted-foreground);
        font-size: var(--text-body-sm);
        min-width: 90px;
      }
      .text-muted {
        color: var(--muted-foreground);
      }
      .text-fg {
        color: var(--foreground);
      }
      .bg-muted {
        background: var(--muted);
      }
      .body-md {
        font-size: var(--text-body-md);
      }
      .flex-1-md {
        flex: 1;
        font-size: var(--text-body-md);
      }
      .link-underline {
        cursor: pointer;
        text-decoration: underline;
      }
      .cursor-pointer {
        cursor: pointer;
      }
      .p-8 {
        padding: var(--sp-8);
      }
      .h-260 {
        height: 260px;
      }
      .h-280 {
        height: 280px;
      }
      .gap-4 {
        gap: var(--sp-4);
      }
      .legal-page {
        padding: var(--sp-12) 0 var(--sp-16);
      }
      .legal-container {
        max-width: var(--container-narrow);
        margin: 0 auto;
        padding: 0 var(--page-padding-x);
      }
      .legal-eyebrow {
        font-size: var(--text-caption);
        font-weight: var(--font-weight-semibold);
        color: var(--foreground-subtle);
        letter-spacing: var(--tracking-wide);
        margin-bottom: var(--sp-3);
      }
      .legal-title {
        font-size: var(--text-display-md);
        font-weight: var(--font-weight-bold);
        color: var(--foreground);
        margin-bottom: var(--sp-3);
        letter-spacing: var(--tracking-tight);
        line-height: var(--text-display-md-lh);
      }
      .legal-lead {
        font-size: var(--text-body-md);
        color: var(--muted-foreground);
        line-height: 1.9;
        margin-bottom: var(--sp-10);
        padding-bottom: var(--sp-6);
        border-bottom: 1px solid var(--border);
      }
      .legal-section {
        margin-bottom: var(--sp-10);
      }
      .legal-section-title {
        font-size: var(--text-display-sm);
        font-weight: var(--font-weight-bold);
        color: var(--foreground);
        margin-bottom: var(--sp-4);
        letter-spacing: var(--tracking-tight);
      }
      .legal-section-body {
        font-size: var(--text-body-md);
        color: var(--foreground);
        line-height: 1.95;
      }
      .legal-section-body p {
        margin-bottom: var(--sp-4);
      }
      .legal-section-body ol {
        padding-left: var(--sp-5);
        margin-bottom: var(--sp-4);
      }
      .legal-section-body ol > li {
        margin-bottom: var(--sp-3);
        line-height: 1.95;
      }
      .legal-section-body ol ol {
        margin-top: var(--sp-2);
        list-style: lower-roman;
      }
      .legal-section-body ul {
        padding-left: var(--sp-5);
        margin-bottom: var(--sp-4);
        list-style: disc;
      }
      .legal-section-body ul > li {
        margin-bottom: var(--sp-2);
        line-height: 1.95;
      }
      .legal-meta {
        margin-top: var(--sp-12);
        padding-top: var(--sp-6);
        border-top: 1px solid var(--border);
        font-size: var(--text-body-md);
        color: var(--muted-foreground);
      }
      .legal-table {
        width: 100%;
        border-collapse: collapse;
        margin: var(--sp-6) 0;
        font-size: var(--text-body-md);
      }
      .legal-table th,
      .legal-table td {
        border: 1px solid var(--border);
        padding: var(--sp-3) var(--sp-4);
        text-align: left;
        vertical-align: top;
        line-height: 1.85;
      }
      .legal-table th {
        background: var(--muted);
        font-weight: var(--font-weight-semibold);
        color: var(--foreground);
        width: 35%;
        white-space: normal;
      }
      .legal-table td {
        background: var(--background);
        color: var(--foreground);
      }
      body.is-cv-page .site-header .header-nav,
      body.is-cv-page .site-header .header-actions,
      body.is-cv-page .header-mobile-actions,
      body.is-cv-page .site-header .hamburger,
      body.is-cv-page .megamenu,
      body.is-cv-page .mobile-drawer,
      body.is-cv-page .chat-dock,
      body.is-cv-page .site-footer,
      body:has(#screen-contact.is-active) .site-header .header-nav,
      body:has(#screen-contact.is-active) .site-header .header-actions,
      body:has(#screen-contact.is-active) .header-mobile-actions,
      body:has(#screen-contact.is-active) .site-header .hamburger,
      body:has(#screen-contact.is-active) .megamenu,
      body:has(#screen-contact.is-active) .mobile-drawer,
      body:has(#screen-contact.is-active) .chat-dock,
      body:has(#screen-contact.is-active) .site-footer {
        display: none !important;
      }
      body.is-cv-page .site-header,
      body:has(#screen-contact.is-active) .site-header {
        background: var(--muted) !important;
        border-bottom: none !important;
        position: static !important;
      }
      body.is-cv-page .header-inner,
      body:has(#screen-contact.is-active) .header-inner {
        justify-content: center !important;
        gap: 0 !important;
      }
      body.is-cv-page,
      body:has(#screen-contact.is-active) {
        padding-bottom: 0 !important;
      }
      .cv-page {
        padding: var(--sp-12) 0 var(--sp-20);
        background: var(--muted);
        min-height: calc(100vh - var(--height-topnav));
        min-height: calc(100dvh - var(--height-topnav));
      }
      .cv-container {
        max-width: 720px;
        margin: 0 auto;
        padding: 0 var(--page-padding-x);
      }
      .cv-header {
        margin-bottom: var(--sp-10);
      }
      .cv-eyebrow {
        font-size: var(--text-caption);
        font-weight: var(--font-weight-semibold);
        color: var(--primary);
        letter-spacing: var(--tracking-wide);
        margin-bottom: var(--sp-3);
      }
      .cv-title {
        font-size: var(--text-display-md);
        font-weight: var(--font-weight-bold);
        color: var(--foreground);
        margin-bottom: var(--sp-4);
        letter-spacing: var(--tracking-tight);
        line-height: var(--text-display-md-lh);
      }
      .cv-lead {
        font-size: var(--text-body-md);
        color: var(--muted-foreground);
        line-height: 1.85;
      }
      .cv-meta-row {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--sp-6);
        margin-top: var(--sp-5);
        padding-top: var(--sp-5);
        border-top: 1px solid var(--border);
      }
      .cv-meta-item {
        font-size: var(--text-body-sm);
        color: var(--muted-foreground);
      }
      .cv-meta-item strong {
        display: block;
        color: var(--foreground);
        font-weight: var(--font-weight-semibold);
        margin-bottom: 4px;
        font-size: var(--text-caption);
        letter-spacing: var(--tracking-wide);
      }
      .cv-card {
        background: var(--background);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        padding: var(--sp-10);
        box-shadow: var(--shadow-md);
      }
      @media (max-width: 600px) {
        .cv-card {
          padding: var(--sp-6);
        }
      }
      .cv-field {
        margin-bottom: var(--sp-6);
      }
      .cv-label {
        display: block;
        font-size: var(--text-body-sm);
        font-weight: var(--font-weight-semibold);
        color: var(--foreground);
        margin-bottom: var(--sp-2);
      }
      .cv-label-required::after {
        content: "*";
        display: inline-block;
        margin-left: 4px;
        color: #d92d20;
        font-size: 1.1em;
        font-weight: var(--font-weight-bold);
        vertical-align: middle;
        line-height: 1;
      }
      .cv-label-optional::after {
        content: "任意";
        display: inline-block;
        margin-left: var(--sp-2);
        padding: 2px 6px;
        background: transparent;
        color: var(--foreground-subtle);
        border: 1px solid var(--border);
        font-size: var(--text-caption);
        font-weight: var(--font-weight-semibold);
        border-radius: var(--radius-sm);
        vertical-align: middle;
      }
      .cv-help {
        font-size: var(--text-body-sm);
        color: var(--muted-foreground);
        margin-top: var(--sp-2);
        line-height: 1.6;
      }
      .cv-input,
      .cv-select,
      .cv-textarea {
        width: 100%;
        height: var(--control-h-lg);
        padding: 0 var(--control-px-md);
        border: 1px solid var(--input);
        border-radius: var(--radius-md);
        background: var(--background);
        color: var(--foreground);
        font-size: var(--text-body-md);
        font-family: var(--font-sans);
        transition:
          border-color var(--duration-base) var(--easing),
          box-shadow var(--duration-base) var(--easing);
      }
      .cv-input:focus,
      .cv-select:focus,
      .cv-textarea:focus {
        outline: none;
        border-color: var(--primary);
        box-shadow: var(--ring-focus);
      }
      .cv-textarea {
        height: auto;
        min-height: 120px;
        padding: var(--sp-3) var(--control-px-md);
        resize: vertical;
        line-height: 1.7;
      }
      @media (max-width: 768px) {
        .cv-input,
        .cv-select,
        .cv-textarea,
        .chat-dock-input {
          font-size: 16px;
        }
      }
      .cv-radio-group {
        display: flex;
        flex-direction: column;
        gap: var(--sp-2);
      }
      .cv-radio-item {
        display: flex;
        align-items: center;
        gap: var(--sp-3);
        padding: var(--sp-3) var(--sp-4);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        cursor: pointer;
        transition: all var(--duration-base) var(--easing);
        font-size: var(--text-body-md);
        background: var(--background);
      }
      .cv-radio-item:hover {
        border-color: var(--primary);
        background: var(--accent);
      }
      .cv-radio-item input {
        flex-shrink: 0;
        accent-color: var(--primary);
        margin: 0;
      }
      .license-row {
        display: flex;
        align-items: center;
        gap: var(--sp-2);
        flex-wrap: wrap;
      }
      .license-row > .license-type {
        flex: 1 1 180px;
        min-width: 0;
      }
      .license-row > .license-count {
        display: flex;
        align-items: center;
        gap: 2px;
        color: var(--foreground);
        font-size: var(--text-body-md);
        flex-shrink: 0;
      }
      .license-row > .license-count input {
        width: 48px;
        text-align: center;
        padding-left: var(--sp-2);
        padding-right: var(--sp-2);
      }
      .license-row > .license-number {
        display: flex;
        align-items: center;
        gap: 2px;
        color: var(--foreground);
        font-size: var(--text-body-md);
        flex-shrink: 0;
      }
      .license-row > .license-number input {
        width: 88px;
        text-align: center;
        font-variant-numeric: tabular-nums;
        padding-left: var(--sp-2);
        padding-right: var(--sp-2);
      }
      .license-paren {
        font-size: var(--text-body-md);
        color: var(--foreground);
        font-weight: var(--font-weight-regular);
      }
      @media (max-width: 600px) {
        .license-row > .license-type {
          flex: 1 1 100%;
        }
      }
      .cv-consent {
        padding: var(--sp-5);
        background: var(--muted);
        border-radius: var(--radius-md);
        margin: var(--sp-8) 0 var(--sp-5);
        font-size: var(--text-body-md);
        line-height: 1.85;
      }
      .cv-consent label {
        display: flex;
        align-items: flex-start;
        gap: var(--sp-3);
        cursor: pointer;
      }
      .cv-consent input {
        margin-top: 4px;
        flex-shrink: 0;
        accent-color: var(--primary);
      }
      .cv-consent a,
      .cv-consent [data-spa-go] {
        color: var(--primary);
        text-decoration: underline;
      }
      .cv-submit {
        width: 100%;
        height: var(--control-h-xl);
        background: var(--primary);
        color: var(--primary-foreground);
        border: none;
        border-radius: var(--radius-md);
        font-size: var(--text-body-lg);
        font-weight: var(--font-weight-semibold);
        cursor: pointer;
        transition: opacity var(--duration-base) var(--easing);
        font-family: var(--font-sans);
      }
      .cv-submit:hover {
        opacity: 0.92;
      }
      .cv-submit:disabled {
        opacity: 0.6;
        cursor: wait;
      }
      .cv-thanks {
        text-align: center;
        padding: var(--sp-12) var(--sp-4) var(--sp-8);
      }
      .cv-thanks-icon {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background: color-mix(in oklab, var(--primary) 12%, white);
        color: var(--primary);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 40px;
        font-weight: 700;
        margin: 0 auto var(--sp-7);
        line-height: 1;
      }
      .cv-thanks-title {
        font-size: var(--fs-heading);
        font-weight: 700;
        letter-spacing: var(--tracking-tight);
        margin: 0 0 var(--sp-5);
        color: var(--fg);
        line-height: var(--fs-heading-lh);
      }
      .cv-thanks-lead {
        color: var(--muted-foreground);
        line-height: 1.85;
        margin: 0 0 var(--sp-5);
        max-width: 540px;
      }
      .cv-thanks-sub {
        color: var(--muted-foreground);
        font-size: var(--text-body-sm);
        line-height: 1.75;
        margin: 0 0 var(--sp-9);
        max-width: 540px;
      }
      .cv-thanks-actions {
        display: flex;
        gap: var(--sp-3);
        justify-content: center;
        flex-wrap: wrap;
        margin-top: 0;
      }
      .cv-trust-row {
        display: flex;
        justify-content: center;
        gap: var(--sp-6);
        margin-top: var(--sp-6);
        flex-wrap: wrap;
        font-size: var(--text-body-sm);
        color: var(--muted-foreground);
      }
      .cv-trust-item {
        display: flex;
        align-items: center;
        gap: 4px;
      }
      .cv-mini-footer {
        margin-top: var(--sp-10);
        padding-top: var(--sp-5);
        border-top: 1px solid var(--border);
        text-align: center;
        font-size: var(--text-caption);
        color: var(--muted-foreground);
      }
      .cv-mini-footer a,
      .cv-mini-footer [data-spa-go] {
        color: var(--muted-foreground);
        text-decoration: underline;
        margin: 0 var(--sp-2);
      }
      .news-detail-page {
        padding: var(--sp-12) 0 var(--sp-16);
      }
      .news-detail-container {
        max-width: 760px;
        margin: 0 auto;
        padding: 0 var(--page-padding-x);
      }
      .news-breadcrumb {
        font-size: var(--text-caption);
        color: var(--muted-foreground);
        margin-bottom: var(--sp-6);
      }
      .news-breadcrumb a,
      .news-breadcrumb span[data-goto],
      .news-breadcrumb [data-spa-go] {
        color: var(--muted-foreground);
        cursor: pointer;
      }
      .news-breadcrumb a:hover,
      .news-breadcrumb span[data-goto]:hover,
      .news-breadcrumb [data-spa-go]:hover {
        color: var(--primary);
      }
      .news-detail-meta {
        display: flex;
        align-items: center;
        gap: var(--sp-3);
        margin-bottom: var(--sp-4);
      }
      .news-detail-title {
        font-size: var(--text-display-md);
        font-weight: var(--font-weight-bold);
        color: var(--foreground);
        margin-bottom: var(--sp-6);
        letter-spacing: var(--tracking-tight);
        line-height: var(--text-display-md-lh);
      }
      .news-hero-image {
        width: 100%;
        height: 320px;
        background: var(--muted);
        border-radius: var(--radius-lg);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--foreground-subtle);
        font-size: var(--text-body-sm);
        margin: var(--sp-6) 0 var(--sp-10);
      }
      .news-detail-body {
        font-size: var(--text-body-md);
        color: var(--foreground);
        line-height: 1.95;
      }
      .news-detail-body p {
        margin-bottom: var(--sp-5);
      }
      .news-detail-body h2 {
        font-size: var(--text-display-sm);
        font-weight: var(--font-weight-bold);
        margin: var(--sp-10) 0 var(--sp-4);
        padding-bottom: var(--sp-2);
        border-bottom: 2px solid var(--primary);
        letter-spacing: var(--tracking-tight);
      }
      .news-detail-body h3 {
        font-size: var(--text-body-lg);
        font-weight: var(--font-weight-semibold);
        margin: var(--sp-6) 0 var(--sp-3);
      }
      .news-detail-body ul {
        padding-left: var(--sp-5);
        margin-bottom: var(--sp-5);
        list-style: disc;
      }
      .news-detail-body ul > li {
        margin-bottom: var(--sp-2);
        line-height: 1.85;
      }
      .news-detail-body blockquote {
        border-left: 3px solid var(--primary);
        padding: var(--sp-3) var(--sp-5);
        margin: var(--sp-6) 0;
        background: var(--muted);
        color: var(--muted-foreground);
        font-size: var(--text-body-md);
        font-style: italic;
      }
      .news-detail-footer {
        margin-top: var(--sp-12);
        padding-top: var(--sp-6);
        border-top: 1px solid var(--border);
      }
      .news-related {
        margin-top: var(--sp-12);
        padding-top: var(--sp-10);
        border-top: 1px solid var(--border);
      }
      .news-related-title {
        font-size: var(--text-display-sm);
        font-weight: var(--font-weight-bold);
        margin-bottom: var(--sp-5);
      }
      .news-related-row {
        display: flex;
        align-items: center;
        gap: var(--sp-4);
        padding: var(--sp-4);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        cursor: pointer;
        margin-bottom: var(--sp-3);
        background: var(--background);
        transition: all var(--duration-base) var(--easing);
      }
      .news-related-row:hover {
        border-color: var(--primary);
        background: var(--accent);
      }
      .logos-section {
        padding: var(--sp-12) 0;
        background: var(--background);
        border-bottom: 1px solid var(--border);
      }
      .logos-inner {
        max-width: var(--container-content);
        margin: 0 auto;
        padding: 0 var(--page-padding-x);
      }
      .logos-title {
        font-size: var(--text-body-sm);
        color: var(--muted-foreground);
        letter-spacing: var(--tracking-wide);
        font-weight: var(--font-weight-semibold);
        margin-bottom: var(--sp-6);
      }
      .logos-grid {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: var(--sp-5);
        align-items: center;
      }
      .logo-cell {
        min-height: 64px;
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        background: transparent;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        color: var(--muted-foreground);
        font-size: var(--text-body-sm);
        font-weight: var(--font-weight-semibold);
        letter-spacing: 0.02em;
        text-align: center;
        padding: var(--sp-3) var(--sp-2);
        opacity: 0.7;
      }
      @media (max-width: 768px) {
        .logos-grid {
          grid-template-columns: repeat(3, 1fr);
        }
      }
      @media (max-width: 480px) {
        .logos-grid {
          grid-template-columns: repeat(2, 1fr);
        }
      }
      .dual-business {
        padding: var(--sp-16) 0;
        background: var(--muted);
      }
      .dual-business-inner {
        max-width: var(--container-content);
        margin: 0 auto;
        padding: 0 var(--page-padding-x);
      }
      .dual-business-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--sp-6);
        margin-top: var(--sp-8);
      }
      .dual-business-card {
        background: var(--card);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        padding: var(--sp-8);
        display: flex;
        flex-direction: column;
        position: relative;
        overflow: hidden;
      }
      .dual-business-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: var(--primary);
      }
      .dual-business-card--data::before {
        background: var(--deal-purchase);
      }
      .dual-business-label {
        font-family: var(--font-mono);
        font-size: var(--text-caption);
        color: var(--foreground-subtle);
        letter-spacing: var(--tracking-wide);
        font-weight: var(--font-weight-bold);
        margin-bottom: var(--sp-3);
      }
      .dual-business-eyebrow {
        font-size: var(--text-caption);
        color: var(--primary);
        letter-spacing: var(--tracking-wide);
        font-weight: var(--font-weight-bold);
        margin-bottom: var(--sp-2);
      }
      .dual-business-card--data .dual-business-eyebrow {
        color: var(--deal-purchase);
      }
      h3.dual-business-title,
      .dual-business-title {
        font-size: var(--fs-heading);
        font-weight: var(--font-weight-bold);
        line-height: var(--fs-heading-lh);
        margin-bottom: var(--sp-3);
        letter-spacing: var(--tracking-tight);
      }
      .dual-business-lead {
        font-size: var(--text-body-md);
        line-height: 1.8;
        color: var(--muted-foreground);
        margin-bottom: var(--sp-6);
      }
      .dual-business-meta {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--sp-3);
        padding: var(--sp-5) 0;
        border-top: 1px dashed var(--border);
        border-bottom: 1px dashed var(--border);
        margin-bottom: var(--sp-6);
      }
      .dual-business-meta-cell {
        text-align: center;
      }
      .dual-business-meta-num {
        font-family: var(--font-mono);
        font-size: var(--fs-stat);
        font-weight: var(--font-weight-bold);
        color: var(--primary);
        letter-spacing: var(--tracking-tight);
        line-height: var(--fs-stat-lh);
      }
      .num-unit {
        font-size: 0.55em;
        font-weight: var(--font-weight-semibold);
        margin-left: 2px;
        opacity: 0.85;
        letter-spacing: 0;
      }
      .dual-business-card--data .dual-business-meta-num {
        color: var(--deal-purchase);
      }
      .dual-business-meta-label {
        font-size: var(--text-caption);
        color: var(--muted-foreground);
        margin-top: var(--sp-2);
        line-height: 1.4;
      }
      .dual-business-entry-title {
        font-size: var(--text-caption);
        color: var(--foreground-subtle);
        letter-spacing: var(--tracking-wide);
        font-weight: var(--font-weight-bold);
        margin-bottom: var(--sp-3);
      }
      .dual-business-entries {
        display: flex;
        flex-direction: column;
        gap: var(--sp-2);
        margin-bottom: var(--sp-6);
      }
      .dual-business-entry {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: var(--sp-3) var(--sp-4);
        background: var(--accent);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        font-size: var(--text-body-md);
        font-weight: var(--font-weight-semibold);
        color: var(--foreground);
        cursor: pointer;
        transition: all var(--duration-base) var(--easing);
      }
      .dual-business-entry:hover {
        border-color: var(--primary);
        background: var(--card);
        transform: translateX(2px);
      }
      .dual-business-card--data .dual-business-entry {
        background: var(--deal-purchase-muted);
        border-color: var(--deal-purchase-border);
      }
      .dual-business-card--data .dual-business-entry:hover {
        border-color: var(--deal-purchase);
        background: var(--card);
      }
      .dual-business-card--data .dual-business-entry-arrow {
        color: var(--deal-purchase);
      }
      .dual-business-card--data .button--outline {
        color: var(--deal-purchase);
        border-color: var(--deal-purchase);
      }
      .dual-business-card--data .button--outline:hover {
        background: rgb(217 119 87 / 0.08);
        border-color: var(--deal-purchase);
        color: var(--deal-purchase);
      }
      .dual-business-entry-arrow {
        color: var(--foreground-subtle);
        font-family: var(--font-mono);
      }
      .dual-business-card .button {
        margin-top: auto;
        align-self: flex-start;
      }
      @media (max-width: 768px) {
        .dual-business-grid {
          grid-template-columns: 1fr;
        }
      }
      .strengths-section {
        padding: var(--sp-16) 0;
        background: var(--card);
      }
      .strengths-inner {
        max-width: var(--container-content);
        margin: 0 auto;
        padding: 0 var(--page-padding-x);
      }
      .strengths-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--sp-6);
        margin-top: var(--sp-8);
      }
      .strength-block {
        display: flex;
        flex-direction: column;
        padding: var(--sp-6) 0;
        border-top: 2px solid var(--primary);
      }
      .strength-block-num {
        font-family: var(--font-mono);
        font-size: var(--text-caption);
        color: var(--primary);
        letter-spacing: var(--tracking-wide);
        font-weight: var(--font-weight-bold);
        margin-bottom: var(--sp-3);
      }
      .strength-headline {
        font-size: var(--fs-heading);
        font-weight: var(--font-weight-bold);
        line-height: var(--fs-heading-lh);
        letter-spacing: var(--tracking-tight);
        margin-bottom: var(--sp-5);
      }
      .strength-points {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: var(--sp-3);
      }
      .strength-points li {
        font-size: var(--text-body-md);
        line-height: 1.7;
        color: var(--muted-foreground);
        padding-left: var(--sp-5);
        position: relative;
      }
      .strength-points li::before {
        content: "";
        position: absolute;
        left: 0;
        top: 10px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: var(--primary);
        opacity: 0.6;
      }
      .strength-points li strong {
        color: var(--foreground);
        font-weight: var(--font-weight-semibold);
        margin: 0 1px;
      }
      @media (max-width: 900px) {
        .strengths-grid {
          grid-template-columns: 1fr;
          gap: var(--sp-4);
        }
      }
      .challenge-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--sp-5);
        margin-top: var(--sp-8);
      }
      .challenge-card {
        background: var(--card);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        padding: var(--sp-6);
        display: flex;
        flex-direction: column;
      }
      .challenge-icon {
        width: 40px;
        height: 40px;
        border-radius: var(--radius-md);
        background: var(--accent);
        color: var(--primary);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        font-weight: var(--font-weight-bold);
        font-family: var(--font-mono);
        margin-bottom: var(--sp-4);
      }
      .challenge-title {
        font-size: var(--fs-subheading);
        font-weight: var(--font-weight-bold);
        margin-bottom: var(--sp-2);
        line-height: var(--fs-subheading-lh);
      }
      .challenge-desc {
        font-size: var(--text-body-md);
        color: var(--muted-foreground);
        line-height: 1.7;
        flex: 1;
      }
      .challenge-solution {
        font-size: var(--text-body-sm);
        color: var(--primary);
        font-weight: var(--font-weight-semibold);
        margin-top: var(--sp-4);
        padding-top: var(--sp-3);
        border-top: 1px dashed var(--border);
      }
      @media (max-width: 768px) {
        .challenge-grid {
          grid-template-columns: 1fr;
        }
      }
      .package-section {
        background: var(--muted);
        padding: var(--sp-12);
        border-radius: var(--radius-lg);
        margin-top: var(--sp-8);
      }
      .package-eyebrow {
        font-size: var(--text-caption);
        color: var(--primary);
        letter-spacing: var(--tracking-wide);
        font-weight: var(--font-weight-bold);
        margin-bottom: var(--sp-2);
      }
      .package-title {
        font-size: var(--text-display-sm);
        font-weight: var(--font-weight-bold);
        margin-bottom: var(--sp-3);
        letter-spacing: var(--tracking-tight);
      }
      .package-lead {
        font-size: var(--text-body-sm);
        color: var(--muted-foreground);
        line-height: 1.8;
        margin-bottom: var(--sp-6);
      }
      .package-products {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: var(--sp-4);
      }
      .package-product-card {
        background: var(--card);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        padding: var(--sp-4);
        cursor: pointer;
        transition: all var(--duration-base) var(--easing);
        display: flex;
        flex-direction: column;
        gap: var(--sp-2);
      }
      .package-product-card:hover {
        border-color: var(--primary);
        transform: translateY(-2px);
      }
      .package-product-num {
        font-family: var(--font-mono);
        font-size: var(--text-caption);
        color: var(--foreground-subtle);
        font-weight: var(--font-weight-bold);
      }
      .package-product-name {
        font-size: var(--fs-subheading);
        font-weight: var(--font-weight-bold);
        line-height: var(--fs-subheading-lh);
      }
      .package-product-desc {
        font-size: var(--text-body-md);
        color: var(--muted-foreground);
        line-height: 1.6;
      }
      @media (max-width: 900px) {
        .package-products {
          grid-template-columns: repeat(2, 1fr);
        }
      }
      @media (max-width: 480px) {
        .package-products {
          grid-template-columns: 1fr;
        }
      }
      .industry-hero {
        background: var(--card);
        padding: var(--sp-16) 0 var(--sp-12);
        border-bottom: 1px solid var(--border);
      }
      .industry-hero-inner {
        max-width: var(--container-content);
        margin: 0 auto;
        padding: 0 var(--page-padding-x);
      }
      .industry-hero-eyebrow {
        font-size: var(--text-caption);
        color: var(--primary);
        letter-spacing: var(--tracking-wide);
        font-weight: var(--font-weight-bold);
        margin-bottom: var(--sp-3);
      }
      .industry-hero-title {
        font-size: var(--text-display-lg);
        font-weight: var(--font-weight-bold);
        line-height: var(--text-display-lg-lh);
        letter-spacing: var(--tracking-tight);
        margin-bottom: var(--sp-4);
      }
      .industry-hero-lead {
        font-size: var(--text-body-lg);
        color: var(--muted-foreground);
        line-height: var(--text-body-lg-lh);
        max-width: 720px;
        margin-bottom: var(--sp-6);
      }
      .industry-hero-meta {
        display: flex;
        gap: var(--sp-4);
        flex-wrap: wrap;
        font-size: var(--text-body-sm);
        color: var(--muted-foreground);
        padding-top: var(--sp-5);
        border-top: 1px solid var(--border);
      }
      .industry-hero-meta strong {
        color: var(--foreground);
        font-weight: var(--font-weight-semibold);
      }
      body.is-top-page .hero-eyebrow {
        font-size: var(--fs-body);
        letter-spacing: 0.18em;
        font-weight: var(--font-weight-medium);
        text-transform: none;
        margin-bottom: var(--sp-5);
        opacity: 0.7;
      }
      body.is-top-page .hero-title {
        font-size: var(--fs-hero);
        font-weight: 900;
        line-height: var(--fs-hero-lh);
        letter-spacing: -0.04em;
        margin-bottom: var(--sp-6);
        text-shadow: 0 1px 2px rgb(0 0 0 / 0.08);
      }
      body.is-top-page .hero-lead {
        font-size: var(--fs-lead);
        line-height: var(--fs-lead-lh);
        font-weight: var(--font-weight-regular);
        letter-spacing: 0.01em;
        color: rgb(255 255 255 / 0.72);
        max-width: none;
        margin-left: 0;
        margin-right: 0;
      }
      body.is-top-page .hero {
        padding: clamp(72px, 10vw, 140px) 0 clamp(72px, 10vw, 120px);
      }
      @media (max-width: 768px) {
        body.is-top-page .hero {
          padding: 72px 0 60px;
        }
      }
      @media (max-width: 480px) {
        body.is-top-page .hero {
          padding: 64px 0 56px;
        }
      }
      @media (max-width: 768px) {
        .footer-brand-meta > span {
          display: block;
          grid-template-columns: none;
          line-height: 1.6;
        }
        .footer-brand-meta > span strong {
          display: block;
          margin-bottom: 4px;
          margin-right: 0;
        }
        .overview-meta-row {
          flex-direction: column;
          align-items: flex-start;
          gap: 2px;
          padding: var(--sp-3) 0;
        }
        .overview-meta-row span:first-child {
          width: auto;
          font-size: var(--text-caption);
          color: var(--muted-foreground);
          margin-bottom: 2px;
        }
        .overview-meta-row span:last-child {
          width: 100%;
        }
        .industry-hero-meta {
          flex-direction: column;
          gap: var(--sp-3);
        }
        .industry-hero-meta > span {
          display: block;
          line-height: 1.5;
        }
        .industry-hero-meta > span strong {
          display: block;
          margin-bottom: 2px;
          font-size: var(--text-caption);
          color: var(--muted-foreground);
          font-weight: var(--font-weight-semibold);
        }
      }
      .section + .section {
        padding-top: 0;
      }
      .section + .section.section--bg,
      .section.section--bg + .section {
        padding-top: var(--section-padding-y);
      }
      .section.section--bg + .section.section--bg {
        padding-top: 0;
      }
      .hero,
      .page-hero,
      .industry-hero,
      .product-hero,
      .cv-header,
      .legal-header {
        text-align: left;
      }
      .hero-inner,
      .page-hero-inner,
      .industry-hero-inner,
      .product-hero-inner {
        text-align: left;
      }
      .hero-lead,
      .page-hero-lead,
      .industry-hero-lead,
      .product-hero-lead {
        margin-left: max(0px, (100% - var(--container-content)) / 2);
        margin-right: 0;
      }
      .strengths-section .section-eyebrow,
      .strengths-section .section-title,
      .strengths-section .section-title--lg,
      .strengths-section .section-lead {
        text-align: left !important;
        margin-left: 0;
        margin-right: 0;
      }
      .section--centered .section-eyebrow,
      .section--centered .section-title,
      .section--centered .section-title--lg,
      .section--centered .section-lead {
        text-align: left !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
      }
      .section-title.text-center,
      .section-title--lg.text-center,
      .section-eyebrow.text-center,
      .section-lead.text-center {
        text-align: left !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
      }
      .news-section .section-title,
      .news-section .section-title--lg {
        text-align: left;
      }
      .cv-header {
        text-align: left;
      }
      .cv-lead {
        text-align: left;
        margin-left: 0;
        margin-right: 0;
      }
      @media (max-width: 900px) {
        .hamburger {
          width: 44px;
          height: 44px;
        }
        .site-header .pr-logo[data-goto],
        .site-footer .pr-logo[data-goto] {
          padding-top: 6px;
          padding-bottom: 6px;
          margin-top: -6px;
          margin-bottom: -6px;
        }
        .chat-dock-send {
          height: 44px;
        }
        .button--md {
          --_h: 44px;
        }
        .button {
          --_h: 44px;
        }
      }
      @media (max-width: 640px) {
        .nav-cta--mobile {
          height: 44px;
          padding: 0 var(--sp-3);
        }
      }
      @media (max-width: 900px) {
        .site-footer .footer-link {
          padding-top: 10px;
          padding-bottom: 10px;
          min-height: 44px;
          box-sizing: border-box;
        }
        .news-filter-btn,
        .job-filter-btn,
        .pg-btn,
        .industry-tab {
          height: 44px;
          min-height: 44px;
        }
      }
      /* スマホ：情報密度を下げてマージンを広げる */
      @media (max-width: 900px) {
        /* セクション全体のパディングを大幅増 */
        .section {
          padding: var(--sp-16) 0 !important;
        }
        .section--bg > .container {
          padding: var(--sp-16) var(--page-padding-x) !important;
        }
        .section + .section {
          padding-top: var(--sp-8) !important;
        }
        /* ヒーロー類 */
        .hero {
          padding: var(--sp-16) 0 var(--sp-12) !important;
        }
        .page-hero {
          padding: var(--sp-16) var(--page-padding-x) !important;
        }
        .product-hero {
          padding: var(--sp-16) 0 !important;
        }
        .industry-hero {
          padding: var(--sp-16) 0 var(--sp-12) !important;
        }
        /* セクション内マージン */
        .section-title {
          margin-bottom: var(--sp-5) !important;
        }
        .section-lead {
          margin-bottom: var(--sp-10) !important;
        }
        .section-eyebrow {
          margin-bottom: var(--sp-3) !important;
        }
        /* グリッド要素間の隙間 */
        .row-2,
        .row-3,
        .row-4 {
          gap: var(--sp-6) !important;
        }
        /* dark-cta */
        .dark-cta {
          padding: var(--sp-12) var(--page-padding-x) !important;
        }
        .dark-cta-inner {
          padding: var(--sp-12) var(--sp-6) !important;
        }
        .dark-cta h3 {
          margin-bottom: var(--sp-5) !important;
        }
        .dark-cta .meta {
          margin-bottom: var(--sp-8) !important;
        }
        /* dual-business（事業内容） */
        .dual-business {
          padding: var(--sp-14) 0 !important;
        }
        .dual-business-grid {
          margin-top: var(--sp-10) !important;
          gap: var(--sp-8) !important;
        }
        .dual-business-card {
          padding: var(--sp-8) !important;
        }
        .dual-business-lead {
          margin-bottom: var(--sp-7) !important;
          line-height: 1.85 !important;
        }
        .dual-business-meta {
          padding: var(--sp-6) 0 !important;
          margin-bottom: var(--sp-7) !important;
        }
        .dual-business-entries {
          margin-bottom: var(--sp-7) !important;
          gap: var(--sp-3) !important;
        }
        .dual-business-entry {
          padding: var(--sp-4) var(--sp-5) !important;
        }
        /* strengths（強み） */
        .strengths-section {
          padding: var(--sp-14) 0 !important;
        }
        .strengths-grid {
          gap: var(--sp-8) !important;
          margin-top: var(--sp-10) !important;
        }
        .strength-block {
          padding: var(--sp-7) 0 !important;
        }
        .strength-headline {
          margin-bottom: var(--sp-6) !important;
          line-height: 1.5 !important;
        }
        .strength-points {
          gap: var(--sp-4) !important;
        }
        .strength-points li {
          line-height: 1.9 !important;
          padding-left: var(--sp-5) !important;
        }
        .strength-points li::before {
          top: 11px;
        }
        /* logos */
        .logos-section {
          padding: var(--sp-12) 0 !important;
        }
        .logos-grid {
          gap: var(--sp-6) !important;
        }
        /* package section（業態別） */
        .package-section {
          padding: var(--sp-10) var(--sp-6) !important;
          margin-top: var(--sp-8) !important;
        }
        .package-products {
          gap: var(--sp-5) !important;
        }
        .package-product-card {
          padding: var(--sp-5) !important;
          gap: var(--sp-3) !important;
        }
        .package-lead {
          margin-bottom: var(--sp-7) !important;
          line-height: 1.85 !important;
        }
        /* challenge card（業態別の課題） */
        .challenge-grid {
          gap: var(--sp-5) !important;
          margin-top: var(--sp-10) !important;
        }
        .challenge-card {
          padding: var(--sp-7) !important;
        }
        .challenge-icon {
          margin-bottom: var(--sp-5) !important;
        }
        .challenge-desc {
          line-height: 1.85 !important;
        }
        .challenge-solution {
          margin-top: var(--sp-5) !important;
          padding-top: var(--sp-4) !important;
        }
        /* product card */
        .product-card {
          padding: var(--sp-6) !important;
        }
        .product-card-img {
          margin-bottom: var(--sp-5) !important;
        }
        /* ds-card一般 */
        .ds-card {
          padding: var(--sp-6) !important;
        }
        /* feature-card */
        .feature-card {
          padding: var(--sp-7) !important;
          gap: var(--sp-5) !important;
        }
        /* news-list */
        .news-row {
          padding: var(--sp-5) !important;
        }
        /* footer */
        .site-footer {
          padding: var(--sp-14) 0 var(--sp-8) !important;
        }
        .footer-section,
        .footer-cols-secondary {
          margin-bottom: var(--sp-8) !important;
          gap: var(--sp-8) !important;
        }
        /* mvv-card */
        .mvv-card {
          padding: var(--sp-10) var(--sp-6) !important;
        }
        /* news-detail */
        .news-detail-body p {
          margin-bottom: var(--sp-6) !important;
        }
        .news-detail-body h2 {
          margin: var(--sp-12) 0 var(--sp-5) !important;
        }
        /* release notice */
        .release-notice {
          padding: var(--sp-6) var(--page-padding-x) !important;
        }
        .release-notice-text {
          line-height: 1.85 !important;
        }
        /* 全体的にp要素の行間を緩める */
        p {
          line-height: 1.85;
        }
        /* 関連製品セクション */
        .related-card {
          padding: var(--sp-5) var(--sp-10) var(--sp-5) var(--sp-5) !important;
        }
        .row-4.mb-5 {
          margin-bottom: var(--sp-6) !important;
        }
        /* solution-block（データソリューション） */
        .solution-block {
          padding: var(--sp-8) !important;
          margin-bottom: var(--sp-7) !important;
        }
        .solution-lead {
          margin-bottom: var(--sp-7) !important;
          line-height: 1.85 !important;
        }
        /* values-card, benefit-card, support-card */
        .values-card {
          padding: var(--sp-8) var(--sp-6) !important;
        }
        .benefit-card {
          padding: var(--sp-6) !important;
        }
        /* job-card */
        .job-card {
          padding: var(--sp-7) !important;
          margin-bottom: var(--sp-4) !important;
        }
        .job-desc {
          line-height: 1.85 !important;
          margin-bottom: var(--sp-4) !important;
        }
        /* timeline */
        .timeline-item {
          padding: var(--sp-6) 0 !important;
        }
      }
      @media (max-width: 480px) {
        /* さらに小さい画面では、左右パディングは保ちつつ縦の余白をしっかり */
        .section {
          padding: var(--sp-12) 0 !important;
        }
        .section--bg > .container {
          padding: var(--sp-12) var(--page-padding-x) !important;
        }
        .hero {
          padding: var(--sp-12) 0 var(--sp-10) !important;
        }
        .page-hero {
          padding: var(--sp-12) var(--page-padding-x) !important;
        }
        .product-hero {
          padding: var(--sp-12) 0 !important;
        }
        .industry-hero {
          padding: var(--sp-12) 0 var(--sp-10) !important;
        }
        .dual-business {
          padding: var(--sp-12) 0 !important;
        }
        .strengths-section {
          padding: var(--sp-12) 0 !important;
        }
        .dark-cta-inner {
          padding: var(--sp-10) var(--sp-5) !important;
        }
        .package-section {
          padding: var(--sp-8) var(--sp-5) !important;
        }
        .challenge-card {
          padding: var(--sp-6) !important;
        }
        .ds-card {
          padding: var(--sp-5) !important;
        }
        .product-card {
          padding: var(--sp-5) !important;
        }
        .feature-card {
          padding: var(--sp-6) !important;
        }
        .dual-business-card {
          padding: var(--sp-7) var(--sp-5) !important;
        }
        .strength-block {
          padding: var(--sp-6) 0 !important;
        }
        .solution-block {
          padding: var(--sp-7) var(--sp-5) !important;
        }
        /* 左右パディングを少し増やす */
        :root {
          --page-padding-x: 24px !important;
        }
      }
      /* スマホ：フルブリードセクション内のカードが画面端に密着しないよう、outerセクションに左右パディングを直接付与 */
      @media (max-width: 768px) {
        /* outerセクション自体に左右パディングを強制 */
        body .dual-business,
        body .strengths-section,
        body .logos-section,
        body .industry-hero,
        body .product-hero,
        body .hero,
        body .release-notice,
        body .dark-cta,
        body .page-hero {
          padding-left: 24px !important;
          padding-right: 24px !important;
          box-sizing: border-box !important;
        }
        body .section {
          padding-left: 24px !important;
          padding-right: 24px !important;
          box-sizing: border-box !important;
        }
        body .section--bg {
          padding-left: 24px !important;
          padding-right: 24px !important;
          box-sizing: border-box !important;
        }
        /* innerは入れ子のpaddingを削除 */
        body .dual-business-inner,
        body .strengths-inner,
        body .logos-inner,
        body .industry-hero-inner,
        body .product-hero-inner,
        body .hero-inner,
        body .release-notice-inner {
          padding-left: 0 !important;
          padding-right: 0 !important;
        }
        body .dark-cta-inner {
          padding-left: var(--sp-6) !important;
          padding-right: var(--sp-6) !important;
        }
        body .section > .container,
        body .section--bg > .container {
          padding-left: 0 !important;
          padding-right: 0 !important;
        }
        /* カード自体にも保険として左右マージンを設定（万が一外側が効かなくても画面端から離れるように） */
        body .dual-business-card {
          margin-left: 0;
          margin-right: 0;
          max-width: 100%;
          box-sizing: border-box;
        }
        /* dual-business-grid のgapを縦方向のみに */
        body .dual-business-grid {
          gap: var(--sp-6) !important;
        }
        /* 上下paddingは別途確保 */
        body .dual-business {
          padding-top: var(--sp-14) !important;
          padding-bottom: var(--sp-14) !important;
        }
        body .strengths-section {
          padding-top: var(--sp-14) !important;
          padding-bottom: var(--sp-14) !important;
        }
        body .logos-section {
          padding-top: var(--sp-12) !important;
          padding-bottom: var(--sp-12) !important;
        }
        body .industry-hero {
          padding-top: var(--sp-16) !important;
          padding-bottom: var(--sp-12) !important;
        }
        body .product-hero {
          padding-top: var(--sp-16) !important;
          padding-bottom: var(--sp-16) !important;
        }
        body .hero {
          padding-top: var(--sp-16) !important;
          padding-bottom: var(--sp-12) !important;
        }
        body .release-notice {
          padding-top: var(--sp-6) !important;
          padding-bottom: var(--sp-6) !important;
        }
        body .dark-cta {
          padding-top: var(--sp-12) !important;
          padding-bottom: var(--sp-12) !important;
        }
        body .page-hero {
          padding-top: var(--sp-16) !important;
          padding-bottom: var(--sp-16) !important;
        }
      }
      /* === Font size refinements === */
      /* 日本語テキストを数値スロットに表示する場合のサイズ調整 */
      .dual-business-meta-num .num-text {
        font-size: 0.55em;
        font-weight: var(--font-weight-bold);
        letter-spacing: 0;
        display: inline-block;
        line-height: 1.2;
        vertical-align: middle;
      }
      /* 数字・ラベルの monospace を デザインシステムフォント（Inter + Noto Sans JP）に統一 */
      html body .dual-business-label,
      html body .dual-business-meta-num,
      html body .dual-business-meta-num *,
      html body .dual-business-meta-label,
      html body .dual-business-entry-arrow,
      html body .strength-block-num,
      html body .strength-card-num {
        font-family: var(--font-sans) !important;
        font-feature-settings: "tnum" 1;
      }
      /* ニュースタイトルのサイズ調整 (全画面サイズで適用) */
      .news-row .news-title {
        font-size: var(--text-body-md);
        line-height: 1.55;
        font-weight: var(--font-weight-medium);
      }
      @media (max-width: 480px) {
        .dual-business-meta-num .num-text {
          font-size: var(--fs-subheading);
        }
      }
      /* === Chat dock: PC版もモバイル版に揃えた配色 === */
      .chat-dock-inner {
        border: 2px solid var(--primary);
        box-shadow:
          0 8px 24px rgba(10, 57, 112, 0.25),
          0 2px 8px rgba(10, 57, 112, 0.15);
      }
      .chat-dock-prompt {
        background: var(--primary);
        color: var(--primary-foreground);
        border-bottom: none;
        padding: var(--sp-3) var(--sp-4);
      }
      .chat-dock-prompt::before {
        background: #4ade80;
        box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.25);
        width: 8px;
        height: 8px;
      }
      .chat-dock-prompt-label {
        color: #fff;
      }
      .chat-dock-prompt-sub {
        color: rgb(255 255 255 / 0.85);
      }
      .chat-dock-collapse {
        color: rgb(255 255 255 / 0.85);
      }
      .chat-dock-collapse:hover {
        color: #fff;
        background: rgb(255 255 255 / 0.1);
      }
      .chat-dock-input-row {
        background: #fff;
        border-top: 1px solid var(--border);
      }
      .chat-dock-send {
        background: var(--primary);
        color: #fff;
        border: 1px solid var(--primary);
        font-weight: var(--font-weight-bold);
        box-shadow: 0 2px 8px rgba(10, 57, 112, 0.3);
      }
      /* sales-modeでの上書き（既存と整合） */
      .chat-dock.is-sales-mode .chat-dock-prompt::before {
        background: rgb(255 255 255 / 0.8);
        box-shadow: none;
      }
      /* ====== 強制：スマホでカード周りのマージン・パディング ====== */
      @media (max-width: 768px) {
        html body main.page-screen section.dual-business,
        html body main.page-screen section.strengths-section,
        html body main.page-screen section.logos-section,
        html body main.page-screen section.industry-hero,
        html body main.page-screen section.product-hero,
        html body main.page-screen section.hero,
        html body main.page-screen section.release-notice,
        html body main.page-screen section.dark-cta,
        html body main.page-screen section.page-hero,
        html body main.page-screen section.section {
          padding-left: 24px !important;
          padding-right: 24px !important;
          box-sizing: border-box !important;
        }
        html body main.page-screen section.section--bg {
          padding-left: 0 !important;
          padding-right: 0 !important;
        }
        html body main.page-screen section.section--bg > .container {
          padding-left: 24px !important;
          padding-right: 24px !important;
        }
        html body .dual-business-inner,
        html body .strengths-inner,
        html body .logos-inner,
        html body .industry-hero-inner,
        html body .product-hero-inner,
        html body .hero-inner,
        html body .release-notice-inner,
        html body .section > .container {
          padding-left: 0 !important;
          padding-right: 0 !important;
          max-width: 100% !important;
        }
        html body .dark-cta-inner {
          padding-left: 24px !important;
          padding-right: 24px !important;
          box-sizing: border-box !important;
        }
      }
      /* ====== タブレット・スマホ：縦積み時の画像は全幅中央に ======
   product-heroなどの2カラムレイアウトはタブレット幅以下で縦積みになる。
   このとき右側にあった画像（.img-ph）が左寄せ・固定幅で表示されないよう、
   幅100%でコンテナの中央に配置する。
   ※ PC（min-width:901px）には影響しない。 */
      @media (max-width: 900px) {
        html body .product-hero-inner,
        html body .industry-hero-inner,
        html body .hero-inner {
          display: flex !important;
          flex-direction: column !important;
          align-items: stretch !important;
          gap: var(--sp-8) !important;
        }
        html body .product-hero-inner > .img-ph,
        html body .product-hero-inner > [data-image-slot],
        html body .industry-hero-inner > .img-ph,
        html body .industry-hero-inner > [data-image-slot],
        html body .hero-inner > .img-ph,
        html body .hero-inner > [data-image-slot] {
          width: 100% !important;
          max-width: 100% !important;
          margin-left: 0 !important;
          margin-right: 0 !important;
          box-sizing: border-box !important;
          align-self: stretch !important;
        }
        /* 縦積みされる .img-ph および data-image-slot 全般を中央表示。
     高さ固定（h-280等）の枠で画像が縦に見切れないよう、横幅は90%に抑え、
     画像/プレースホルダ内のメディアは contain で全体が見えるようにする */
        html body main.page-screen .img-ph,
        html body main.page-screen [data-image-slot] {
          width: 90% !important;
          max-width: 90% !important;
          height: auto !important;
          min-height: 0 !important;
          aspect-ratio: auto !important;
          margin-left: auto !important;
          margin-right: auto !important;
          box-sizing: border-box !important;
          display: block !important;
          overflow: hidden !important;
        }
        html body main.page-screen .img-ph > img,
        html body main.page-screen [data-image-slot] > img,
        html body main.page-screen .img-ph picture img,
        html body main.page-screen [data-image-slot] picture img {
          width: 100% !important;
          height: auto !important;
          max-height: 100% !important;
          object-fit: contain !important;
          display: block !important;
          margin: 0 auto !important;
        }
      }
      /* /products の業務全体マップ：スマホでは縦積み・全幅にして矢印は↓に回転 */
      @media (max-width: 640px) {
        html body main.page-screen .flow-diagram {
          flex-direction: column !important;
          align-items: stretch !important;
          gap: var(--sp-2) !important;
          width: 100% !important;
        }
        html body main.page-screen .flow-diagram .flow-box {
          flex: 1 1 auto !important;
          width: 100% !important;
          max-width: 100% !important;
        }
        html body main.page-screen .flow-diagram .flow-arrow {
          transform: rotate(90deg) !important;
          align-self: center !important;
        }
      }

      /* /contact ページ：スマホでロゴ直下のタイトルまでの余白が大きすぎるので圧縮 */
      @media (max-width: 900px) {
        html body main.page-screen .cv-container {
          padding-top: var(--sp-4) !important;
        }
        html body main.page-screen .cv-title {
          padding: 0 0 var(--sp-3) !important;
        }
        html body main.page-screen .cv-header {
          margin-bottom: var(--sp-6) !important;
        }
      }

      /* page-hero--tight : リード直下にすぐ本文が続くページ用に下パディングを圧縮 */
      html body main.page-screen > section.page-hero.page-hero--tight {
        padding-bottom: var(--sp-6) !important;
      }
      /* section--tight-top : 直前のpage-heroと隣接する場合、上パディングを圧縮して
   キャッチコピーと本文の距離を詰める */
      html body main.page-screen > section.section.section--tight-top {
        padding-top: var(--sp-6) !important;
      }
      @media (max-width: 900px) {
        html body main.page-screen > section.page-hero.page-hero--tight {
          padding-bottom: var(--sp-6) !important;
        }
        html body main.page-screen > section.section.section--tight-top {
          padding-top: var(--sp-6) !important;
        }
      }
      /* ====== タブレット幅(641〜900px)：ハンバーガー内のログインアコーディオンを非表示 ======
   タブレット幅では右端の .nav-login（ヘッダー上のログイン）が表示されるため、
   ハンバーガー内にも同じログインがあると2つに見える。タブレット幅のみハンバーガー側を非表示にする
   （スマホ幅<641pxではヘッダー右端のログインが消えるので、ハンバーガー側のログインを残す）。 */
      @media (max-width: 900px) and (min-width: 641px) {
        html body .mobile-drawer .mobile-drawer-toggle[data-accordion="login"],
        html body .mobile-drawer .mobile-drawer-panel[data-panel="login"] {
          display: none !important;
        }
      }

      /* ====== タブレット幅（641〜900px）でログイン用メガメニューを開けるよう display:none を解除 ======
   ds/layout.css の @media(max-width:900px) で .megamenu{display:none !important} が効いており、
   ログインボタンを押しても is-open が付いてもメニューが見えない。タブレット幅では login の
   メガメニューだけ表示できるよう上書きする。 */
      @media (max-width: 900px) and (min-width: 641px) {
        html body .megamenu#menu-login.is-open {
          display: block !important;
        }
      }
      /* ログインメガメニュー：disabled とリンク有効の項目で見た目が変わってしまうため統一 */
      /* disabled側に opacity:0.55 が掛かっているため、有効リンク（価格査定）だけ濃く見えてフォントが
   違って見える現象が起きる。ログインメガメニュー内では opacity も揃えて見た目を統一する */
      html body .megamenu#menu-login .mm-link {
        color: var(--muted-foreground) !important;
        font-weight: var(--font-weight-regular) !important;
        font-family: inherit !important;
        opacity: 0.55 !important;
      }
      html body .megamenu#menu-login .mm-link:hover {
        opacity: 1 !important;
        color: var(--primary) !important;
      }
      /* ====== 経営課題（challenge-grid）：タブレット幅で2カラム、3つ目は下部に同じ幅で表示 ====== */
      @media (max-width: 900px) and (min-width: 481px) {
        html body main.page-screen .challenge-grid {
          display: grid !important;
          grid-template-columns: 1fr 1fr !important;
          gap: var(--sp-5) !important;
        }
        /* 3枚目は下段に配置するが、横幅は他のカードと揃える（半分幅で左寄せ） */
        html
          body
          main.page-screen
          .challenge-grid
          > .challenge-card:nth-child(3) {
          grid-column: 1 / 2 !important;
        }
      }
      /* ====== businessカード（dual-business-card）の内側パディング強化 ====== */
      /* 画面幅が小さくてもカード内側の余白を確保するルールは、下の「情報密度アップ」セクションに統合 */
      /* ====== businessカード内ボタンが上要素と密着しないよう最小マージンを確保 ====== */
      /* margin-top:auto で下に押し下げられても、最低限の上マージンを保証 */
      html body .dual-business-card > .button {
        margin-top: var(--sp-4) !important;
      }
      @media (min-width: 769px) {
        html body .dual-business-card > .button {
          margin-top: var(--sp-6) !important;
        }
      }
      /* ====== businessカード 情報密度アップ（余白圧縮・行間整理） ====== */
      /* ラベル・eyebrowの間隔を詰める */
      html body .dual-business-card .dual-business-label {
        margin-bottom: var(--sp-2) !important;
      }
      html body .dual-business-card .dual-business-eyebrow {
        margin-bottom: var(--sp-1) !important;
      }
      html body .dual-business-card h3.dual-business-title,
      html body .dual-business-card .dual-business-title {
        margin-bottom: var(--sp-2) !important;
        line-height: 1.3 !important;
      }
      /* リード文の余白と行間を圧縮 */
      html body .dual-business-card .dual-business-lead {
        margin-bottom: var(--sp-4) !important;
        line-height: 1.65 !important;
        font-size: var(--text-body-sm) !important;
      }
      /* メタ統計の上下余白を圧縮 */
      html body .dual-business-card .dual-business-meta {
        padding: var(--sp-4) 0 !important;
        margin-bottom: var(--sp-4) !important;
        gap: var(--sp-2) !important;
      }
      html body .dual-business-card .dual-business-meta-num {
        font-size: clamp(28px, 3.6vw, 38px) !important;
        line-height: 1 !important;
      }
      html body .dual-business-card .dual-business-meta-label {
        font-size: var(--fs-body) !important;
        margin-top: var(--sp-1) !important;
        line-height: 1.3 !important;
      }
      /* エントリータイトルとリストの余白を圧縮 */
      html body .dual-business-card .dual-business-entry-title {
        margin-bottom: var(--sp-2) !important;
      }
      html body .dual-business-card .dual-business-entries {
        margin-bottom: var(--sp-3) !important;
        gap: 6px !important;
      }
      html body .dual-business-card .dual-business-entry {
        padding: 10px var(--sp-4) !important;
        font-size: var(--text-body-sm) !important;
      }
      /* カード本体パディングも少し詰める（ただしモバイル対応との両立を考慮） */
      @media (min-width: 769px) {
        html body .dual-business-card {
          padding: var(--sp-7) var(--sp-6) !important;
        }
      }
      @media (max-width: 768px) {
        html body .dual-business-card {
          padding: var(--sp-6) var(--sp-5) !important;
        }
      }
      @media (max-width: 480px) {
        html body .dual-business-card {
          padding: var(--sp-5) var(--sp-4) !important;
        }
        html body .dual-business-card .dual-business-meta-num {
          font-size: var(--fs-stat) !important;
        }
        html body .dual-business-card .dual-business-entry {
          padding: 9px var(--sp-3) !important;
        }
      }
      /* ====== 背景色で視覚区切りができている箇所の重複ボーダーを削除 ====== */
      /* hero/page-hero/product-heroの底のボーダーは、次セクションが背景色違いなら不要 */
      html body .hero::after,
      html body .page-hero::after,
      html body .product-hero::after {
        display: none;
      }
      /* section--bg のcontainerの上下borderも、背景色で十分視覚区切りができているため削除 */
      html body .section--bg > .container {
        border-top: none !important;
        border-bottom: none !important;
      }
      /* logos-sectionのbottom borderも、次が背景色違いセクションなら不要 */
      html body .logos-section {
        border-bottom: none;
      }
      /* industry-heroの下borderも同様 */
      html body .industry-hero {
        border-bottom: none;
      }
      /* ====== 会社情報テーブル：全画面で16px固定 ====== */
      html body .info-table,
      html body .info-table th,
      html body .info-table td {
        font-size: var(--fs-body) !important;
      }
      /* ====== 会社情報テーブル：ラベルと値を上下に並べる ====== */
      html body .info-table tr {
        display: block;
        border-bottom: 1px solid var(--border);
        padding: var(--sp-4) 0;
      }
      html body .info-table tr:first-child {
        border-top: 1px solid var(--border);
      }
      html body .info-table th,
      html body .info-table td {
        display: block;
        width: auto !important;
        border-bottom: none !important;
        padding: 0 !important;
        background: transparent !important;
      }
      html body .info-table th {
        color: var(--muted-foreground);
        font-weight: var(--font-weight-semibold);
        margin-bottom: var(--sp-2);
        font-size: var(--fs-body) !important;
        letter-spacing: var(--tracking-wide);
      }
      html body .info-table td {
        color: var(--foreground);
        line-height: 1.7;
      }
      /* ====== 会社概要3カード：タイトルと説明文の階層を明確化 ====== */
      html body .ds-card .card-label--bold {
        font-size: var(--fs-subheading) !important;
        font-weight: var(--font-weight-bold) !important;
        line-height: var(--fs-subheading-lh);
        color: var(--foreground);
        margin-bottom: var(--sp-3);
      }
      html body .ds-card .card-desc--with-mb {
        font-size: var(--text-body-sm) !important;
        color: var(--muted-foreground);
        line-height: 1.7;
      }
      /* ====== 全カード共通：モバイル時の最低パディングを保証 ====== */
      /* PC幅 */
      html body .solution-block {
        padding: var(--sp-8) var(--sp-7) !important;
      }
      html body .scope-card {
        padding: var(--sp-8) var(--sp-7) !important;
      }
      html body .mvv-card {
        padding: var(--sp-10) var(--sp-6) !important;
      }
      html body .values-card {
        padding: var(--sp-8) var(--sp-6) !important;
      }
      html body .strength-card {
        padding: var(--sp-8) var(--sp-6) !important;
      }
      html body .package-section {
        padding: var(--sp-10) var(--sp-7) !important;
      }
      /* タブレット〜モバイル(〜768px) */
      @media (max-width: 768px) {
        html body .solution-block {
          padding: var(--sp-6) var(--sp-5) !important;
          margin-bottom: var(--sp-5) !important;
        }
        html body .scope-card {
          padding: var(--sp-6) var(--sp-5) !important;
        }
        html body .mvv-card {
          padding: var(--sp-7) var(--sp-5) !important;
        }
        html body .values-card {
          padding: var(--sp-6) var(--sp-5) !important;
        }
        html body .strength-card {
          padding: var(--sp-6) var(--sp-5) !important;
        }
        html body .package-section {
          padding: var(--sp-7) var(--sp-5) !important;
        }
        html body .ds-card {
          padding: var(--sp-5) !important;
        }
        html body .feature-card {
          padding: var(--sp-5) !important;
        }
        html body .challenge-card {
          padding: var(--sp-5) !important;
        }
        html body .support-card {
          padding: var(--sp-5) !important;
        }
        html body .benefit-card {
          padding: var(--sp-5) !important;
        }
        html body .job-card {
          padding: var(--sp-5) !important;
        }
        html body .product-card {
          padding: var(--sp-5) !important;
        }
        html body .interview-body {
          padding: var(--sp-5) !important;
        }
        html body .related-card {
          padding: var(--sp-4) var(--sp-10) var(--sp-4) var(--sp-4) !important;
        }
        html body .package-product-card {
          padding: var(--sp-4) !important;
        }
        /* ds-card に .p-8 が付いている場合も同サイズに統一 */
        html body .ds-card.p-8 {
          padding: var(--sp-5) !important;
        }
      }
      /* 極小モバイル(〜480px) */
      @media (max-width: 480px) {
        html body .solution-block {
          padding: var(--sp-5) var(--sp-4) !important;
        }
        html body .scope-card {
          padding: var(--sp-5) var(--sp-4) !important;
        }
        html body .mvv-card {
          padding: var(--sp-6) var(--sp-4) !important;
        }
        html body .values-card {
          padding: var(--sp-5) var(--sp-4) !important;
        }
        html body .strength-card {
          padding: var(--sp-5) var(--sp-4) !important;
        }
        html body .package-section {
          padding: var(--sp-5) var(--sp-4) !important;
        }
        html body .ds-card {
          padding: var(--sp-4) !important;
        }
        html body .feature-card {
          padding: var(--sp-4) !important;
        }
        html body .challenge-card {
          padding: var(--sp-4) !important;
        }
        html body .support-card {
          padding: var(--sp-4) !important;
        }
        html body .benefit-card {
          padding: var(--sp-4) !important;
        }
        html body .job-card {
          padding: var(--sp-4) !important;
        }
        html body .product-card {
          padding: var(--sp-4) !important;
        }
        html body .interview-body {
          padding: var(--sp-4) !important;
        }
        html body .ds-card.p-8 {
          padding: var(--sp-4) !important;
        }
      }

      /* ============================================================================
   FINAL FIX
   ・背景色のあるセクションは画面幅100%まで広がる
   ・内部のコンテンツは max-width 1080px + 左右padding(clamp(20px,5vw,64px))で中央配置
   ・カードUIは上下左右に十分なpaddingを確保
   ============================================================================ */

      /* --- 1. 全コンテンツラッパーを1080px+左右padding+中央寄せに統一 ---
   ※ outerはそのまま100%幅+背景色、innerが中身を1080px帯の中央に収める */

      /* --- ヘッダー3カラムレイアウト：ロゴ(左) / メインナビ(中央) / 資料請求＆ログイン(右) --- */
      @media (min-width: 901px) {
        html body .header-inner {
          display: grid !important;
          grid-template-columns: 1fr auto 1fr !important;
          align-items: center !important;
          gap: var(--sp-4) !important;
        }
        html body .header-inner > .pr-logo {
          grid-column: 1;
          justify-self: start;
        }
        html body .header-inner > .header-nav {
          grid-column: 2;
          justify-self: center;
        }
        html body .header-inner > .header-actions {
          grid-column: 3;
          justify-self: end;
          display: flex;
          align-items: center;
          gap: var(--sp-2);
          flex-shrink: 0;
          white-space: nowrap;
        }
        html body .header-inner > .header-mobile-actions {
          display: none !important;
        }
      }
      /* 中央navの折り返し防止（狭くなった時に縦並びにならないよう） */
      html body .header-nav {
        flex-wrap: nowrap;
        white-space: nowrap;
      }
      html body .header-actions .nav-cta,
      html body .header-actions .nav-login {
        white-space: nowrap;
        flex-shrink: 0;
      }

      /* --- データ連携事例：タイプ①のロゴ表示スロット ---
   各サービス（Salesforce / Google / Slack）の公式ロゴを中サイズで配置するためのエリア。
   通常の事例画像（img-ph-md）と異なり、高さを抑えてロゴらしい見え方にする。 */
      .integration-logo-slot {
        background: var(--muted);
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        height: 110px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        color: var(--foreground-subtle);
        font-size: var(--text-body-sm);
        text-align: center;
        padding: var(--sp-3) var(--sp-4);
        margin-bottom: var(--sp-4);
        background-size: 60% auto;
        background-repeat: no-repeat;
        background-position: center;
      }
      .integration-logo-slot .integration-logo-name {
        font-weight: var(--font-weight-semibold);
        color: var(--muted-foreground);
      }
      /* テキスト版ロゴ：画像の代わりにブランド名をブランドカラーで中央配置 */
      .integration-logo-slot--text .integration-logo-text {
        font-family: var(--font-sans);
        font-weight: 700;
        font-size: clamp(22px, 2.4vw, 32px);
        letter-spacing: -0.01em;
        line-height: 1;
        text-align: center;
      }
      /* ロゴ画像がロード済みの場合、左寄せにならないよう中央表示＋contain で全体を見せる。
   .auto-image のデフォルト（width:100%/height:100%/object-fit:cover）は事例写真向けで、
   ロゴだとトリミングされたり左寄りに見えるため、ロゴスロット限定で上書きする。 */
      html body .integration-logo-slot.is-image-loaded {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
      }
      html body .integration-logo-slot > img.auto-image {
        width: auto !important;
        height: auto !important;
        max-width: 70% !important;
        max-height: 80% !important;
        margin: 0 auto !important;
        object-fit: contain !important;
        object-position: center !important;
        display: block !important;
      }

      /* --- 資料請求ページのみ：ロゴを中央表示 ---
   通常ページの3カラムgridレイアウトを打ち消し、ロゴだけを中央寄せにする。
   他ページは現状のまま左寄せ。 */
      html body.is-cv-page .header-inner,
      html body:has(#screen-contact.is-active) .header-inner {
        display: flex !important;
        grid-template-columns: none !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 0 !important;
      }
      html body.is-cv-page .header-inner > .pr-logo,
      html body:has(#screen-contact.is-active) .header-inner > .pr-logo {
        grid-column: auto !important;
        justify-self: center !important;
        margin: 0 auto !important;
      }

      /* 中間幅(641px〜900px)：中央navだけ先に隠してハンバーガー化、資料請求/ログインは右端に残す */
      @media (max-width: 900px) and (min-width: 641px) {
        html body .site-header .header-nav {
          display: none !important;
        }
        html body .site-header .header-actions {
          display: flex !important;
          align-items: center;
          gap: var(--sp-2);
          flex-shrink: 0;
          white-space: nowrap;
          margin-left: auto;
        }
        /* 中央nav非表示中は header-mobile-actions（ハンバーガー）も表示 */
        html body .site-header .header-mobile-actions {
          display: flex !important;
        }
        /* mobile-actionsの中の重複「資料請求」ボタンは、右側で既に表示されているので隠す */
        html body .site-header .header-mobile-actions .nav-cta--mobile {
          display: none !important;
        }
        /* ヘッダー全体をflex並びに戻す（3カラムgridを解除） */
        html body .header-inner {
          display: flex !important;
          align-items: center !important;
          justify-content: space-between !important;
          gap: var(--sp-3) !important;
        }
      }

      /* 狭い幅(640px以下)：従来通り header-actions を隠してハンバーガーに完全移行 */
      @media (max-width: 640px) {
        html body .header-actions {
          display: none !important;
        }
      }

      html body .header-inner,
      html body .footer-inner,
      html body .hero-inner,
      html body .product-hero-inner,
      html body .industry-hero-inner,
      html body .dual-business-inner,
      html body .strengths-inner,
      html body .logos-inner,
      html body .release-notice-inner,
      html body .megamenu-inner,
      html body main.page-screen > section.section > .container,
      html body main.page-screen > section.section--bg > .container {
        max-width: calc(1080px + clamp(20px, 5vw, 64px) * 2) !important;
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: clamp(20px, 5vw, 64px) !important;
        padding-right: clamp(20px, 5vw, 64px) !important;
        box-sizing: border-box !important;
      }

      /* page-hero自体がコンテンツを直接持つ構造のため、外側にpaddingを与え、内部要素を1080pxで中央寄せ */
      html body main.page-screen > section.page-hero {
        padding-left: clamp(20px, 5vw, 64px) !important;
        padding-right: clamp(20px, 5vw, 64px) !important;
      }
      html body main.page-screen > section.page-hero > * {
        max-width: 1080px !important;
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
      }

      /* outerセクションは画面幅100%、左右paddingゼロ(背景帯を画面端まで広げる) */
      html body main.page-screen > section.hero,
      html body main.page-screen > section.product-hero,
      html body main.page-screen > section.industry-hero,
      html body main.page-screen > section.dual-business,
      html body main.page-screen > section.strengths-section,
      html body main.page-screen > section.strengths-section-v2,
      html body main.page-screen > section.logos-section,
      html body main.page-screen > section.release-notice,
      html body main.page-screen > section.section {
        padding-left: 0 !important;
        padding-right: 0 !important;
      }

      /* section--bg: 背景色のあるセクション。outerは画面幅100%でpadding 0、内部のcontainerが灰色背景を持ち画面幅100%で広がる */
      /* 上下paddingも0にする — 縦余白は内側のcontainerが担当する。
   そうしないとタブレット幅（max-width:900px）で .section{padding:var(--sp-16) 0} が効き、
   transparentなouterに白い余白が現れる（リリース予定 と 事業内容 の間など） */
      html body main.page-screen > section.section--bg {
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        background: transparent !important;
      }
      html body main.page-screen > section.section--bg > .container {
        /* 背景色のためにcontainerは画面幅100%まで広がる必要があり、本来のmax-width:1080px設定を解除 */
        max-width: 100% !important;
        width: 100% !important;
        background: var(--muted) !important;
        border-top: 1px solid var(--border) !important;
        border-bottom: 1px solid var(--border) !important;
        padding-top: var(--section-padding-y) !important;
        padding-bottom: var(--section-padding-y) !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin: 0 !important;
      }
      /* section--bg内部の各コンテンツは、ラッパーが用意されてないため
   独自に1080px帯+左右paddingを与える(直下の子要素に対して) */
      html body main.page-screen > section.section--bg > .container > * {
        max-width: calc(1080px + clamp(20px, 5vw, 64px) * 2) !important;
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: clamp(20px, 5vw, 64px) !important;
        padding-right: clamp(20px, 5vw, 64px) !important;
        box-sizing: border-box !important;
      }

      /* dark-cta: 外側に左右padding確保、CTAボックス(青色)が1080px帯の中で表示される */
      html body main.page-screen > section.dark-cta {
        padding-left: clamp(20px, 5vw, 64px) !important;
        padding-right: clamp(20px, 5vw, 64px) !important;
        padding-top: var(--sp-12) !important;
        padding-bottom: var(--sp-12) !important;
      }
      html body .dark-cta-inner {
        max-width: 1080px !important;
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding: var(--sp-20) var(--sp-12) !important;
        box-sizing: border-box !important;
      }
      @media (max-width: 768px) {
        html body .dark-cta-inner {
          padding: var(--sp-10) var(--sp-6) !important;
        }
      }

      /* --- 2. heroのテキスト/リードに付いていた変なmargin・max-widthを打ち消し --- */
      html body .hero-lead,
      html body .page-hero-lead,
      html body .industry-hero-lead,
      html body .product-hero-lead,
      html body .hero-title,
      html body .hero-eyebrow,
      html body.is-top-page .hero-lead,
      html body.is-top-page .hero-title,
      html body.is-top-page .hero-eyebrow {
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
      }

      /* --- 3. テキスト中央寄せをすべて左寄せに(ロゴと左端を揃える) --- */
      html body .text-center,
      html body .flex-center,
      html body .section-title.text-center,
      html body .section-title--lg.text-center,
      html body .section-eyebrow.text-center,
      html body .section-lead.text-center,
      html body .hero-cta-row,
      html body .dark-cta .flex-row,
      html body .dark-cta-inner,
      html body .ds-card.text-center {
        text-align: left !important;
      }
      html body .flex-center,
      html body .hero-cta-row,
      html body .dark-cta .flex-row {
        justify-content: flex-start !important;
      }

      /* --- 4. カードUIに上下左右のpaddingを保証(全画面幅・最高詳細度) --- */
      html body main.page-screen .ds-card {
        padding: var(--sp-6) !important;
      }
      html body main.page-screen .ds-card.p-8 {
        padding: var(--sp-8) !important;
      }
      html body main.page-screen .feature-card {
        padding: var(--sp-6) !important;
      }
      html body main.page-screen .challenge-card {
        padding: var(--sp-6) !important;
      }
      html body main.page-screen .support-card {
        padding: var(--sp-6) !important;
      }
      html body main.page-screen .benefit-card {
        padding: var(--sp-5) !important;
      }
      html body main.page-screen .job-card {
        padding: var(--sp-6) !important;
      }
      html body main.page-screen .product-card {
        padding: var(--sp-5) !important;
      }
      html body main.page-screen .interview-body {
        padding: var(--sp-5) !important;
      }
      html body main.page-screen .related-card {
        padding: var(--sp-4) var(--sp-10) var(--sp-4) var(--sp-4) !important;
      }
      html body main.page-screen .package-product-card {
        padding: var(--sp-4) !important;
      }
      html body main.page-screen .strength-card {
        padding: var(--sp-8) var(--sp-6) !important;
      }
      html body main.page-screen .scope-card {
        padding: var(--sp-8) var(--sp-7) !important;
      }
      html body main.page-screen .mvv-card {
        padding: var(--sp-10) var(--sp-6) !important;
      }
      /* MVV（ミッション・ビジョン・バリュー）カードは左寄せに統一 */
      html body main.page-screen .mvv-card,
      html body main.page-screen .mvv-card .mvv-label,
      html body main.page-screen .mvv-card .mvv-statement,
      html body main.page-screen .mvv-card .mvv-desc {
        text-align: left !important;
      }
      html body main.page-screen .values-card {
        padding: var(--sp-8) var(--sp-6) !important;
      }
      html body main.page-screen .solution-block {
        padding: var(--sp-8) var(--sp-7) !important;
      }
      html body main.page-screen .package-section {
        padding: var(--sp-10) var(--sp-7) !important;
      }
      html body main.page-screen .dual-business-card {
        padding: var(--sp-7) var(--sp-6) !important;
      }
      html body main.page-screen .stat {
        padding: var(--sp-8) var(--sp-4) !important;
      }
      /* トップページ以外ではヘッダーロゴの「PinRich」をコーポレートカラー（navy）で表示 */
      html
        body:not(.is-top-page)
        .site-header
        .pr-logo:not(.pr-logo--inverse)
        .pr-logo-text {
        color: var(--primary) !important;
      }
      html body main.page-screen .cv-card {
        padding: var(--sp-10) !important;
      }

      @media (max-width: 768px) {
        html body main.page-screen .ds-card,
        html body main.page-screen .ds-card.p-8,
        html body main.page-screen .feature-card,
        html body main.page-screen .challenge-card,
        html body main.page-screen .support-card,
        html body main.page-screen .benefit-card,
        html body main.page-screen .job-card,
        html body main.page-screen .product-card,
        html body main.page-screen .interview-body {
          padding: var(--sp-5) !important;
        }
        html body main.page-screen .related-card,
        html body main.page-screen .package-product-card {
          padding: var(--sp-4) !important;
        }
        html body main.page-screen .strength-card,
        html body main.page-screen .scope-card,
        html body main.page-screen .values-card,
        html body main.page-screen .solution-block,
        html body main.page-screen .dual-business-card {
          padding: var(--sp-6) var(--sp-5) !important;
        }
        html body main.page-screen .mvv-card,
        html body main.page-screen .package-section {
          padding: var(--sp-7) var(--sp-5) !important;
        }
        html body main.page-screen .cv-card {
          padding: var(--sp-6) !important;
        }
      }

      @media (max-width: 480px) {
        html body main.page-screen .ds-card,
        html body main.page-screen .ds-card.p-8,
        html body main.page-screen .feature-card,
        html body main.page-screen .challenge-card,
        html body main.page-screen .support-card,
        html body main.page-screen .benefit-card,
        html body main.page-screen .job-card,
        html body main.page-screen .product-card,
        html body main.page-screen .interview-body {
          padding: var(--sp-5) var(--sp-4) !important;
        }
        html body main.page-screen .related-card,
        html body main.page-screen .package-product-card {
          padding: var(--sp-4) var(--sp-3) !important;
        }
        html body main.page-screen .strength-card,
        html body main.page-screen .scope-card,
        html body main.page-screen .values-card,
        html body main.page-screen .solution-block,
        html body main.page-screen .dual-business-card,
        html body main.page-screen .mvv-card,
        html body main.page-screen .package-section {
          padding: var(--sp-5) var(--sp-4) !important;
        }
        html body main.page-screen .cv-card {
          padding: var(--sp-5) var(--sp-4) !important;
        }
      }

      /* --- 5. 子セレクタ`> *`が打ち消してしまう、内部の特殊レイアウトに必要なルールを保護 --- */
      /* solution-block内のrow-2など、grid/flexはmax-widthに収まるためそのまま機能する */
      /* 各カード(.ds-card等)はclassが付いているので上記のpaddingルールが適用される */
      .renewal-notice-section {
        padding: var(--sp-12) var(--page-padding-x);
        background: transparent;
      }
      .renewal-notice-inner {
        max-width: var(--container-content);
        margin: 0 auto;
      }
      .renewal-notice-card {
        position: relative;
        background: linear-gradient(
          135deg,
          oklch(0.9747 0.0153 67.56) 0%,
          oklch(0.98 0.012 60) 100%
        );
        border: 2px solid var(--deal-purchase);
        border-radius: var(--radius-lg);
        padding: var(--sp-12) var(--sp-10);
        overflow: hidden;
      }
      .renewal-notice-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 6px;
        background: var(--deal-purchase);
      }
      .renewal-notice-badge {
        display: inline-flex;
        align-items: center;
        gap: var(--sp-2);
        padding: 6px var(--sp-3);
        background: var(--deal-purchase);
        color: var(--deal-purchase-foreground);
        font-size: var(--text-caption);
        font-weight: var(--font-weight-bold);
        letter-spacing: var(--tracking-wide);
        border-radius: var(--radius-md);
        margin-bottom: var(--sp-5);
      }
      .renewal-notice-title {
        font-size: var(--text-display-md);
        font-weight: var(--font-weight-bold);
        color: var(--foreground);
        margin: 0 0 var(--sp-4);
        line-height: var(--text-display-md-lh);
        letter-spacing: var(--tracking-tight);
      }
      .renewal-notice-lead {
        font-size: var(--text-body-lg);
        color: var(--foreground);
        line-height: 1.75;
        margin-bottom: var(--sp-10);
        max-width: 780px;
      }
      .renewal-notice-lead strong {
        color: var(--deal-purchase);
        font-weight: var(--font-weight-bold);
      }
      .renewal-notice-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--sp-5);
        margin-bottom: var(--sp-8);
      }
      .renewal-notice-item {
        background: var(--card);
        border: 1px solid var(--deal-purchase-border);
        border-radius: var(--radius-md);
        padding: var(--sp-6);
      }
      .renewal-notice-num {
        font-family: var(--font-mono);
        font-size: var(--text-caption);
        color: var(--deal-purchase);
        font-weight: var(--font-weight-bold);
        letter-spacing: var(--tracking-wide);
        margin-bottom: var(--sp-3);
      }
      .renewal-notice-item-title {
        font-size: var(--text-body-lg);
        font-weight: var(--font-weight-bold);
        color: var(--foreground);
        margin-bottom: var(--sp-2);
        line-height: 1.5;
      }
      .renewal-notice-item-desc {
        font-size: var(--text-body-md);
        color: var(--muted-foreground);
        line-height: 1.7;
      }
      .renewal-notice-footer {
        padding-top: var(--sp-5);
        border-top: 1px dashed var(--deal-purchase-border);
        font-size: var(--text-body-md);
        color: var(--foreground);
        line-height: 1.7;
      }
      .renewal-notice-footer strong {
        color: var(--deal-purchase);
        font-weight: var(--font-weight-semibold);
      }
      @media (max-width: 900px) {
        .renewal-notice-grid {
          grid-template-columns: 1fr;
          gap: var(--sp-4);
        }
        .renewal-notice-card {
          padding: var(--sp-8) var(--sp-5);
        }
        .renewal-notice-lead {
          font-size: var(--text-body-md);
        }
      }
      /* 会社概要 = ブランド宣言ページ。ヒーローを中間サイズで強調 */
      #screen-company .page-hero-title {
        font-size: var(--fs-hero-mid);
        line-height: var(--fs-hero-mid-lh);
      }
      /* 会社概要ヒーロー：eyebrow → タイトル → リードの情報階層を引き締める。
   既存の汎用マージンだとブロック間が離れすぎて関連性が読み取れないため、
   3要素を1つの宣言ブロックとして見えるよう詰める */
      html
        body
        main.page-screen
        #screen-company
        section.page-hero
        .page-hero-eyebrow {
        margin-bottom: var(--sp-3) !important;
      }
      html
        body
        main.page-screen
        #screen-company
        section.page-hero
        .page-hero-title {
        margin-top: 0 !important;
        margin-bottom: var(--sp-4) !important;
      }
      html
        body
        main.page-screen
        #screen-company
        section.page-hero
        .page-hero-lead {
        margin-top: 0 !important;
      }
      /* 会社概要 MVVステートメントを中見出し階層に格上げ（思想の中核） */
      #screen-company .mvv-statement {
        font-size: var(--fs-heading);
        line-height: var(--fs-heading-lh);
      }

      /* 採用ページ 選考フローのレスポンシブ対応 */
      @media (max-width: 900px) {
        .process-grid {
          grid-template-columns: repeat(5, 1fr);
          gap: var(--sp-2);
        }
      }
      @media (max-width: 768px) {
        .process-grid {
          grid-template-columns: repeat(3, 1fr);
          gap: var(--sp-3);
        }
      }
      @media (max-width: 480px) {
        .process-grid {
          grid-template-columns: 1fr;
          gap: var(--sp-2);
        }
        .process-step {
          display: flex;
          align-items: center;
          gap: var(--sp-3);
          text-align: left;
          padding: var(--sp-4);
        }
        .process-step .process-step-num {
          margin-bottom: 0;
          flex-shrink: 0;
          min-width: 80px;
        }
        .process-step .process-step-title {
          flex: 1;
        }
      }

      /* SPA: ページ切替用 */
      [data-page-host] > main {
        display: block;
      }
      .spa-loading {
        opacity: 0.4;
        transition: opacity 0.15s;
      }

      /* SPA: <a> から <span> に変換されたリンクをクリック可能に見せる */
      [data-spa-go] {
        cursor: pointer;
      }
      [data-spa-go]:focus-visible {
        outline: 2px solid #1f4ed8;
        outline-offset: 2px;
      }
      [data-spa-disabled] {
        cursor: default;
        opacity: 0.55;
      }