/* @ordomint/design-system:start sha256:cf0893b06ab454af25421f97ff1213179c29ebd7e86f964a52ecfc95d01610d8 */
/* Generated by scripts/tokens.mjs. Do not edit. */
:root,
html[data-om-theme="ordomint-light"] {
  --om-comp-button-default-background: var(--om-sys-color-action-primary-background);
  --om-comp-button-default-border: var(--om-sys-color-action-primary-border);
  --om-comp-button-default-foreground: var(--om-sys-color-action-primary-foreground);
  --om-comp-button-radius: var(--om-sys-radius-control);
  --om-comp-navigation-row-min-height: var(--om-sys-density-navigation-row-min-height);
  --om-comp-navigation-row-padding-block: var(--om-sys-density-navigation-row-padding-block);
  --om-comp-navigation-row-padding-inline: var(--om-sys-density-navigation-row-padding-inline);
  --om-ref-border-width-default: 1px;
  --om-ref-border-width-selected: 2px;
  --om-ref-breakpoint-large: 1024px;
  --om-ref-breakpoint-medium: 768px;
  --om-ref-breakpoint-small: 640px;
  --om-ref-breakpoint-wide: 1280px;
  --om-ref-color-action-hover: #B4C5AA;
  --om-ref-color-action-pressed: #A5B69D;
  --om-ref-color-canvas: #F4F6EF;
  --om-ref-color-canvas-soft: #F8FAF6;
  --om-ref-color-danger: #A3212C;
  --om-ref-color-danger-hover: #861923;
  --om-ref-color-danger-pressed: #6D141D;
  --om-ref-color-danger-subtle: #FFF0F1;
  --om-ref-color-forest: #13201D;
  --om-ref-color-info: #145DA0;
  --om-ref-color-info-subtle: #EBF4FF;
  --om-ref-color-ink: #091214;
  --om-ref-color-neutral-100: #EEEEEE;
  --om-ref-color-neutral-200: #E2E2E2;
  --om-ref-color-neutral-300: #D4D4D4;
  --om-ref-color-neutral-500: #737373;
  --om-ref-color-neutral-600: #525252;
  --om-ref-color-neutral-800: #333333;
  --om-ref-color-neutral-900: #222222;
  --om-ref-color-neutral-950: #111111;
  --om-ref-color-sage: #C3D5B7;
  --om-ref-color-sage-muted: #5F6F66;
  --om-ref-color-sage-strong: #3F5A4C;
  --om-ref-color-scrim: rgb(19 32 29 / 0.4);
  --om-ref-color-success: #23633E;
  --om-ref-color-success-subtle: #EAF6EE;
  --om-ref-color-transparent: rgb(0 0 0 / 0);
  --om-ref-color-warning: #754600;
  --om-ref-color-warning-subtle: #FFF5D6;
  --om-ref-color-white: #FFFFFF;
  --om-ref-density-control-default: 2.5rem;
  --om-ref-density-control-icon: 2.75rem;
  --om-ref-density-control-large: 2.75rem;
  --om-ref-density-control-small: 2rem;
  --om-ref-density-navigation-row-min-height: 1.875rem;
  --om-ref-density-navigation-row-padding-block: 0.25rem;
  --om-ref-density-navigation-row-padding-inline: 0.5rem;
  --om-ref-density-target: 2.75rem;
  --om-ref-elevation-floating-blur: 24px;
  --om-ref-elevation-floating-color: rgb(9 18 20 / 0.16);
  --om-ref-elevation-floating-offset-x: 0px;
  --om-ref-elevation-floating-offset-y: 8px;
  --om-ref-elevation-floating-spread: -4px;
  --om-ref-elevation-modal-blur: 48px;
  --om-ref-elevation-modal-color: rgb(9 18 20 / 0.24);
  --om-ref-elevation-modal-offset-x: 0px;
  --om-ref-elevation-modal-offset-y: 16px;
  --om-ref-elevation-modal-spread: -8px;
  --om-ref-elevation-none-blur: 0px;
  --om-ref-elevation-none-color: rgb(9 18 20 / 0);
  --om-ref-elevation-none-offset-x: 0px;
  --om-ref-elevation-none-offset-y: 0px;
  --om-ref-elevation-none-spread: 0px;
  --om-ref-elevation-raised-blur: 8px;
  --om-ref-elevation-raised-color: rgb(9 18 20 / 0.08);
  --om-ref-elevation-raised-offset-x: 0px;
  --om-ref-elevation-raised-offset-y: 2px;
  --om-ref-elevation-raised-spread: 0px;
  --om-ref-focus-offset: 2px;
  --om-ref-focus-width: 2px;
  --om-ref-font-family-mono: "SFMono-Regular", "Consolas", "Liberation Mono", monospace;
  --om-ref-font-family-sans: "Avenir Next", "Hiragino Sans", "Yu Gothic", "YuGothic", "Segoe UI", sans-serif;
  --om-ref-font-letter-spacing-normal: 0rem;
  --om-ref-font-line-height-125: 1.25;
  --om-ref-font-line-height-140: 1.4;
  --om-ref-font-line-height-150: 1.5;
  --om-ref-font-line-height-170: 1.7;
  --om-ref-font-line-height-175: 1.75;
  --om-ref-font-line-height-195: 1.95;
  --om-ref-font-size-12: 0.75rem;
  --om-ref-font-size-13: 0.8125rem;
  --om-ref-font-size-14: 0.875rem;
  --om-ref-font-size-16: 1rem;
  --om-ref-font-size-20: 1.25rem;
  --om-ref-font-size-24: 1.5rem;
  --om-ref-font-size-32: 2rem;
  --om-ref-font-weight-bold: 700;
  --om-ref-font-weight-regular: 400;
  --om-ref-font-weight-semibold: 600;
  --om-ref-layer-base: 0;
  --om-ref-layer-dialog: 40;
  --om-ref-layer-dropdown: 20;
  --om-ref-layer-scrim: 30;
  --om-ref-layer-skip: 100;
  --om-ref-layer-sticky: 10;
  --om-ref-layer-toast: 60;
  --om-ref-layer-tooltip: 50;
  --om-ref-layout-content: 72rem;
  --om-ref-layout-gutter-compact: 1rem;
  --om-ref-layout-gutter-default: 1.5rem;
  --om-ref-layout-section-compact: 4rem;
  --om-ref-layout-section-default: 6rem;
  --om-ref-motion-duration-fast: 120ms;
  --om-ref-motion-duration-instant: 0ms;
  --om-ref-motion-duration-slow: 240ms;
  --om-ref-motion-duration-standard: 180ms;
  --om-ref-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --om-ref-radius-control: 0.75rem;
  --om-ref-radius-navigation: 0.5rem;
  --om-ref-radius-none: 0rem;
  --om-ref-radius-pill: 624.9375rem;
  --om-ref-radius-small: 0.25rem;
  --om-ref-radius-surface: 1rem;
  --om-ref-space-0: 0rem;
  --om-ref-space-12: 0.75rem;
  --om-ref-space-16: 1rem;
  --om-ref-space-2: 0.125rem;
  --om-ref-space-20: 1.25rem;
  --om-ref-space-24: 1.5rem;
  --om-ref-space-32: 2rem;
  --om-ref-space-4: 0.25rem;
  --om-ref-space-40: 2.5rem;
  --om-ref-space-48: 3rem;
  --om-ref-space-6: 0.375rem;
  --om-ref-space-64: 4rem;
  --om-ref-space-8: 0.5rem;
  --om-ref-space-80: 5rem;
  --om-ref-space-96: 6rem;
  --om-sys-border-width-default: var(--om-ref-border-width-default);
  --om-sys-border-width-selected: var(--om-ref-border-width-selected);
  --om-sys-breakpoint-large: var(--om-ref-breakpoint-large);
  --om-sys-breakpoint-medium: var(--om-ref-breakpoint-medium);
  --om-sys-breakpoint-small: var(--om-ref-breakpoint-small);
  --om-sys-breakpoint-wide: var(--om-ref-breakpoint-wide);
  --om-sys-color-action-destructive-background: var(--om-ref-color-danger);
  --om-sys-color-action-destructive-border: var(--om-ref-color-danger);
  --om-sys-color-action-destructive-foreground: var(--om-ref-color-white);
  --om-sys-color-action-destructive-hover-background: var(--om-ref-color-danger-hover);
  --om-sys-color-action-destructive-pressed-background: var(--om-ref-color-danger-pressed);
  --om-sys-color-action-disabled-background: var(--om-ref-color-canvas);
  --om-sys-color-action-disabled-border: var(--om-ref-color-neutral-500);
  --om-sys-color-action-disabled-foreground: var(--om-sys-color-text-disabled);
  --om-sys-color-action-ghost-background: var(--om-ref-color-transparent);
  --om-sys-color-action-ghost-foreground: var(--om-sys-color-text-primary);
  --om-sys-color-action-ghost-hover-background: var(--om-ref-color-canvas);
  --om-sys-color-action-ghost-inverse-foreground: var(--om-sys-color-text-inverse);
  --om-sys-color-action-ghost-inverse-hover-background: var(--om-ref-color-sage-strong);
  --om-sys-color-action-ghost-inverse-pressed-background: var(--om-ref-color-ink);
  --om-sys-color-action-ghost-pressed-background: var(--om-ref-color-sage);
  --om-sys-color-action-outline-background: var(--om-ref-color-white);
  --om-sys-color-action-outline-border: var(--om-ref-color-neutral-500);
  --om-sys-color-action-outline-foreground: var(--om-sys-color-text-primary);
  --om-sys-color-action-outline-hover-background: var(--om-ref-color-canvas);
  --om-sys-color-action-outline-pressed-background: var(--om-ref-color-sage);
  --om-sys-color-action-primary-background: var(--om-ref-color-sage);
  --om-sys-color-action-primary-border: var(--om-ref-color-sage-strong);
  --om-sys-color-action-primary-foreground: var(--om-sys-color-text-primary);
  --om-sys-color-action-primary-hover-background: var(--om-ref-color-action-hover);
  --om-sys-color-action-primary-pressed-background: var(--om-ref-color-action-pressed);
  --om-sys-color-action-secondary-background: var(--om-ref-color-canvas);
  --om-sys-color-action-secondary-border: var(--om-ref-color-sage-strong);
  --om-sys-color-action-secondary-foreground: var(--om-sys-color-text-primary);
  --om-sys-color-action-secondary-hover-background: var(--om-ref-color-sage);
  --om-sys-color-action-secondary-pressed-background: var(--om-ref-color-action-hover);
  --om-sys-color-border-control: var(--om-ref-color-neutral-500);
  --om-sys-color-border-control-inverse: var(--om-ref-color-sage);
  --om-sys-color-border-decorative: var(--om-ref-color-sage);
  --om-sys-color-border-decorative-inverse: var(--om-ref-color-sage-strong);
  --om-sys-color-border-selected: var(--om-ref-color-neutral-500);
  --om-sys-color-focus-gap: var(--om-ref-color-canvas);
  --om-sys-color-focus-gap-inverse: var(--om-ref-color-forest);
  --om-sys-color-focus-ring: var(--om-ref-color-sage-strong);
  --om-sys-color-focus-ring-inverse: var(--om-ref-color-sage);
  --om-sys-color-icon-inverse: var(--om-sys-color-text-inverse);
  --om-sys-color-icon-primary: var(--om-sys-color-text-primary);
  --om-sys-color-icon-secondary: var(--om-sys-color-text-secondary);
  --om-sys-color-selection-background: var(--om-ref-color-neutral-100);
  --om-sys-color-selection-border: var(--om-ref-color-neutral-500);
  --om-sys-color-selection-foreground: var(--om-sys-color-text-primary);
  --om-sys-color-selection-hover-background: var(--om-ref-color-neutral-200);
  --om-sys-color-status-danger-background: var(--om-ref-color-danger-subtle);
  --om-sys-color-status-danger-border: var(--om-ref-color-danger);
  --om-sys-color-status-danger-foreground: var(--om-ref-color-danger);
  --om-sys-color-status-danger-icon: var(--om-ref-color-danger);
  --om-sys-color-status-info-background: var(--om-ref-color-info-subtle);
  --om-sys-color-status-info-border: var(--om-ref-color-info);
  --om-sys-color-status-info-foreground: var(--om-ref-color-info);
  --om-sys-color-status-info-icon: var(--om-ref-color-info);
  --om-sys-color-status-success-background: var(--om-ref-color-success-subtle);
  --om-sys-color-status-success-border: var(--om-ref-color-success);
  --om-sys-color-status-success-foreground: var(--om-ref-color-success);
  --om-sys-color-status-success-icon: var(--om-ref-color-success);
  --om-sys-color-status-warning-background: var(--om-ref-color-warning-subtle);
  --om-sys-color-status-warning-border: var(--om-ref-color-warning);
  --om-sys-color-status-warning-foreground: var(--om-ref-color-warning);
  --om-sys-color-status-warning-icon: var(--om-ref-color-warning);
  --om-sys-color-surface-canvas: var(--om-ref-color-canvas-soft);
  --om-sys-color-surface-default: var(--om-ref-color-white);
  --om-sys-color-surface-inverse: var(--om-ref-color-forest);
  --om-sys-color-surface-scrim: var(--om-ref-color-scrim);
  --om-sys-color-surface-subtle: var(--om-ref-color-canvas);
  --om-sys-color-text-disabled: var(--om-ref-color-neutral-500);
  --om-sys-color-text-inverse: var(--om-ref-color-white);
  --om-sys-color-text-link: var(--om-ref-color-neutral-800);
  --om-sys-color-text-link-hover: var(--om-ref-color-neutral-900);
  --om-sys-color-text-link-inverse: var(--om-ref-color-neutral-300);
  --om-sys-color-text-link-inverse-hover: var(--om-ref-color-white);
  --om-sys-color-text-link-inverse-pressed: var(--om-ref-color-white);
  --om-sys-color-text-link-pressed: var(--om-ref-color-neutral-950);
  --om-sys-color-text-primary: var(--om-ref-color-neutral-900);
  --om-sys-color-text-secondary: var(--om-ref-color-neutral-600);
  --om-sys-color-text-secondary-inverse: var(--om-ref-color-neutral-300);
  --om-sys-density-control-default: var(--om-ref-density-control-default);
  --om-sys-density-control-icon: var(--om-ref-density-control-icon);
  --om-sys-density-control-large: var(--om-ref-density-control-large);
  --om-sys-density-control-small: var(--om-ref-density-control-small);
  --om-sys-density-field: var(--om-ref-density-target);
  --om-sys-density-navigation-row-min-height: var(--om-ref-density-navigation-row-min-height);
  --om-sys-density-navigation-row-padding-block: var(--om-ref-density-navigation-row-padding-block);
  --om-sys-density-navigation-row-padding-inline: var(--om-ref-density-navigation-row-padding-inline);
  --om-sys-density-target: var(--om-ref-density-target);
  --om-sys-elevation-floating-blur: var(--om-ref-elevation-floating-blur);
  --om-sys-elevation-floating-color: var(--om-ref-elevation-floating-color);
  --om-sys-elevation-floating-offset-x: var(--om-ref-elevation-floating-offset-x);
  --om-sys-elevation-floating-offset-y: var(--om-ref-elevation-floating-offset-y);
  --om-sys-elevation-floating-spread: var(--om-ref-elevation-floating-spread);
  --om-sys-elevation-modal-blur: var(--om-ref-elevation-modal-blur);
  --om-sys-elevation-modal-color: var(--om-ref-elevation-modal-color);
  --om-sys-elevation-modal-offset-x: var(--om-ref-elevation-modal-offset-x);
  --om-sys-elevation-modal-offset-y: var(--om-ref-elevation-modal-offset-y);
  --om-sys-elevation-modal-spread: var(--om-ref-elevation-modal-spread);
  --om-sys-elevation-none-blur: var(--om-ref-elevation-none-blur);
  --om-sys-elevation-none-color: var(--om-ref-elevation-none-color);
  --om-sys-elevation-none-offset-x: var(--om-ref-elevation-none-offset-x);
  --om-sys-elevation-none-offset-y: var(--om-ref-elevation-none-offset-y);
  --om-sys-elevation-none-spread: var(--om-ref-elevation-none-spread);
  --om-sys-elevation-raised-blur: var(--om-ref-elevation-raised-blur);
  --om-sys-elevation-raised-color: var(--om-ref-elevation-raised-color);
  --om-sys-elevation-raised-offset-x: var(--om-ref-elevation-raised-offset-x);
  --om-sys-elevation-raised-offset-y: var(--om-ref-elevation-raised-offset-y);
  --om-sys-elevation-raised-spread: var(--om-ref-elevation-raised-spread);
  --om-sys-focus-offset: var(--om-ref-focus-offset);
  --om-sys-focus-width: var(--om-ref-focus-width);
  --om-sys-font-family-mono: var(--om-ref-font-family-mono);
  --om-sys-font-family-sans: var(--om-ref-font-family-sans);
  --om-sys-font-weight-bold: var(--om-ref-font-weight-bold);
  --om-sys-font-weight-regular: var(--om-ref-font-weight-regular);
  --om-sys-font-weight-semibold: var(--om-ref-font-weight-semibold);
  --om-sys-layer-base: var(--om-ref-layer-base);
  --om-sys-layer-dialog: var(--om-ref-layer-dialog);
  --om-sys-layer-dropdown: var(--om-ref-layer-dropdown);
  --om-sys-layer-scrim: var(--om-ref-layer-scrim);
  --om-sys-layer-skip: var(--om-ref-layer-skip);
  --om-sys-layer-sticky: var(--om-ref-layer-sticky);
  --om-sys-layer-toast: var(--om-ref-layer-toast);
  --om-sys-layer-tooltip: var(--om-ref-layer-tooltip);
  --om-sys-layout-content: var(--om-ref-layout-content);
  --om-sys-layout-flow-block: var(--om-sys-space-32);
  --om-sys-layout-flow-group: var(--om-sys-space-48);
  --om-sys-layout-flow-related: var(--om-sys-space-16);
  --om-sys-layout-flow-text: var(--om-sys-space-24);
  --om-sys-layout-flow-tight: var(--om-sys-space-8);
  --om-sys-layout-gutter-compact: var(--om-ref-layout-gutter-compact);
  --om-sys-layout-gutter-default: var(--om-ref-layout-gutter-default);
  --om-sys-layout-section-compact: var(--om-ref-layout-section-compact);
  --om-sys-layout-section-default: var(--om-ref-layout-section-default);
  --om-sys-motion-duration-fast: var(--om-ref-motion-duration-fast);
  --om-sys-motion-duration-instant: var(--om-ref-motion-duration-instant);
  --om-sys-motion-duration-slow: var(--om-ref-motion-duration-slow);
  --om-sys-motion-duration-standard: var(--om-ref-motion-duration-standard);
  --om-sys-motion-easing-standard: var(--om-ref-motion-easing-standard);
  --om-sys-radius-control: var(--om-ref-radius-control);
  --om-sys-radius-navigation: var(--om-ref-radius-navigation);
  --om-sys-radius-none: var(--om-ref-radius-none);
  --om-sys-radius-pill: var(--om-ref-radius-pill);
  --om-sys-radius-small: var(--om-ref-radius-small);
  --om-sys-radius-surface: var(--om-ref-radius-surface);
  --om-sys-space-0: var(--om-ref-space-0);
  --om-sys-space-12: var(--om-ref-space-12);
  --om-sys-space-16: var(--om-ref-space-16);
  --om-sys-space-2: var(--om-ref-space-2);
  --om-sys-space-20: var(--om-ref-space-20);
  --om-sys-space-24: var(--om-ref-space-24);
  --om-sys-space-32: var(--om-ref-space-32);
  --om-sys-space-4: var(--om-ref-space-4);
  --om-sys-space-40: var(--om-ref-space-40);
  --om-sys-space-48: var(--om-ref-space-48);
  --om-sys-space-6: var(--om-ref-space-6);
  --om-sys-space-64: var(--om-ref-space-64);
  --om-sys-space-8: var(--om-ref-space-8);
  --om-sys-space-80: var(--om-ref-space-80);
  --om-sys-space-96: var(--om-ref-space-96);
  --om-sys-type-body-small-family: var(--om-ref-font-family-sans);
  --om-sys-type-body-small-letter-spacing: var(--om-ref-font-letter-spacing-normal);
  --om-sys-type-body-small-line-height: var(--om-ref-font-line-height-175);
  --om-sys-type-body-small-size: var(--om-ref-font-size-14);
  --om-sys-type-body-small-weight: var(--om-ref-font-weight-regular);
  --om-sys-type-body-family: var(--om-ref-font-family-sans);
  --om-sys-type-body-letter-spacing: var(--om-ref-font-letter-spacing-normal);
  --om-sys-type-body-line-height: var(--om-ref-font-line-height-175);
  --om-sys-type-body-size: var(--om-ref-font-size-16);
  --om-sys-type-body-weight: var(--om-ref-font-weight-regular);
  --om-sys-type-code-family: var(--om-ref-font-family-mono);
  --om-sys-type-code-letter-spacing: var(--om-ref-font-letter-spacing-normal);
  --om-sys-type-code-line-height: var(--om-ref-font-line-height-170);
  --om-sys-type-code-size: var(--om-ref-font-size-13);
  --om-sys-type-code-weight: var(--om-ref-font-weight-regular);
  --om-sys-type-heading-family: var(--om-ref-font-family-sans);
  --om-sys-type-heading-letter-spacing: var(--om-ref-font-letter-spacing-normal);
  --om-sys-type-heading-line-height: var(--om-ref-font-line-height-140);
  --om-sys-type-heading-size: var(--om-ref-font-size-24);
  --om-sys-type-heading-weight: var(--om-ref-font-weight-semibold);
  --om-sys-type-label-family: var(--om-ref-font-family-sans);
  --om-sys-type-label-letter-spacing: var(--om-ref-font-letter-spacing-normal);
  --om-sys-type-label-line-height: var(--om-ref-font-line-height-150);
  --om-sys-type-label-size: var(--om-ref-font-size-12);
  --om-sys-type-label-weight: var(--om-ref-font-weight-semibold);
  --om-sys-type-navigation-label-family: var(--om-ref-font-family-sans);
  --om-sys-type-navigation-label-letter-spacing: var(--om-ref-font-letter-spacing-normal);
  --om-sys-type-navigation-label-line-height: var(--om-ref-font-line-height-150);
  --om-sys-type-navigation-label-size: var(--om-ref-font-size-12);
  --om-sys-type-navigation-label-weight: var(--om-ref-font-weight-semibold);
  --om-sys-type-prose-compact-family: var(--om-ref-font-family-sans);
  --om-sys-type-prose-compact-letter-spacing: var(--om-ref-font-letter-spacing-normal);
  --om-sys-type-prose-compact-line-height: var(--om-ref-font-line-height-195);
  --om-sys-type-prose-compact-size: var(--om-ref-font-size-14);
  --om-sys-type-prose-compact-weight: var(--om-ref-font-weight-regular);
  --om-sys-type-subheading-family: var(--om-ref-font-family-sans);
  --om-sys-type-subheading-letter-spacing: var(--om-ref-font-letter-spacing-normal);
  --om-sys-type-subheading-line-height: var(--om-ref-font-line-height-150);
  --om-sys-type-subheading-size: var(--om-ref-font-size-20);
  --om-sys-type-subheading-weight: var(--om-ref-font-weight-semibold);
  --om-sys-type-title-family: var(--om-ref-font-family-sans);
  --om-sys-type-title-letter-spacing: var(--om-ref-font-letter-spacing-normal);
  --om-sys-type-title-line-height: var(--om-ref-font-line-height-125);
  --om-sys-type-title-size: var(--om-ref-font-size-32);
  --om-sys-type-title-weight: var(--om-ref-font-weight-semibold);
  --background: var(--om-sys-color-surface-canvas);
  --foreground: var(--om-sys-color-text-primary);
  --primary: var(--om-sys-color-action-primary-background);
  --primary-foreground: var(--om-sys-color-action-primary-foreground);
  --muted: var(--om-sys-color-surface-subtle);
  --muted-foreground: var(--om-sys-color-text-secondary);
  --border: var(--om-sys-color-border-decorative);
  --radius: var(--om-sys-radius-control);
}

/* Scoped component styles. Import tokens.css first; no reset, body or Tailwind rules. */
@layer components {
.om-button, .om-input, .om-select, .om-textarea, .om-navigation-item, .om-dialog-close {
  box-sizing: border-box;
  font-family: var(--om-sys-type-body-small-family);
  font-size: var(--om-sys-type-body-small-size);
  line-height: var(--om-sys-type-body-small-line-height);
  letter-spacing: var(--om-sys-type-body-small-letter-spacing);
  transition: color var(--om-sys-motion-duration-fast) var(--om-sys-motion-easing-standard), background-color var(--om-sys-motion-duration-fast) var(--om-sys-motion-easing-standard), border-color var(--om-sys-motion-duration-fast) var(--om-sys-motion-easing-standard);
}
:where(.om-button, .om-navigation-item, .om-dialog-close, .om-brand, .om-link, .om-skip-link):focus-visible {
  outline: var(--om-sys-focus-width) solid var(--om-context-focus-ring, var(--om-sys-color-focus-ring));
  outline-offset: var(--om-sys-focus-offset);
  box-shadow: 0 0 0 var(--om-sys-focus-offset) var(--om-context-focus-gap, var(--om-sys-color-focus-gap));
}
.om-button {
  --om-action-background: var(--om-sys-color-action-primary-background);
  --om-action-hover: var(--om-sys-color-action-primary-hover-background);
  --om-action-pressed: var(--om-sys-color-action-primary-pressed-background);
  --om-action-foreground: var(--om-sys-color-action-primary-foreground);
  --om-action-border: var(--om-sys-color-action-primary-border);
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  gap: var(--om-sys-space-8);
  min-width: 0;
  max-inline-size: 100%;
  min-height: var(--om-sys-density-control-default);
  /* 2026-11-10: with a 1.5 line height a one-line label fits inside 40px (14px text) and 44px (16px text) with 8px above and below;
     min-height sets the size, and a wrapped label keeps the same 8px. The small size uses 4px (see below). */
  padding: var(--om-sys-space-8) var(--om-sys-space-16);
  border: var(--om-sys-border-width-default) solid var(--om-action-border);
  border-radius: var(--om-sys-radius-control);
  background: var(--om-action-background);
  color: var(--om-action-foreground);
  font-weight: var(--om-sys-type-label-weight);
  line-height: var(--om-sys-type-label-line-height);
  text-align: center;
  text-decoration: none;
  white-space: normal;
  overflow-wrap: anywhere;
  cursor: pointer;
}
.om-button--secondary {
  --om-action-background: var(--om-sys-color-action-secondary-background);
  --om-action-hover: var(--om-sys-color-action-secondary-hover-background);
  --om-action-pressed: var(--om-sys-color-action-secondary-pressed-background);
  --om-action-foreground: var(--om-sys-color-action-secondary-foreground);
  --om-action-border: var(--om-sys-color-action-secondary-border);
}
.om-button--outline {
  --om-action-background: var(--om-sys-color-action-outline-background);
  --om-action-hover: var(--om-sys-color-action-outline-hover-background);
  --om-action-pressed: var(--om-sys-color-action-outline-pressed-background);
  --om-action-foreground: var(--om-sys-color-action-outline-foreground);
  --om-action-border: var(--om-sys-color-action-outline-border);
}
.om-button--ghost {
  --om-action-background: var(--om-sys-color-action-ghost-background);
  --om-action-hover: var(--om-context-ghost-hover, var(--om-sys-color-action-ghost-hover-background));
  --om-action-pressed: var(--om-context-ghost-pressed, var(--om-sys-color-action-ghost-pressed-background));
  --om-action-foreground: var(--om-context-ghost-foreground, var(--om-sys-color-action-ghost-foreground));
  --om-action-border: var(--om-sys-color-action-ghost-background);
}
.om-button--destructive {
  --om-action-background: var(--om-sys-color-action-destructive-background);
  --om-action-hover: var(--om-sys-color-action-destructive-hover-background);
  --om-action-pressed: var(--om-sys-color-action-destructive-pressed-background);
  --om-action-foreground: var(--om-sys-color-action-destructive-foreground);
  --om-action-border: var(--om-sys-color-action-destructive-border);
}
.om-button--link {
  --om-action-background: var(--om-sys-color-action-ghost-background);
  --om-action-hover: var(--om-sys-color-action-ghost-background);
  --om-action-pressed: var(--om-sys-color-action-ghost-background);
  --om-action-foreground: var(--om-context-link, var(--om-sys-color-text-link));
  --om-action-border: var(--om-sys-color-action-ghost-background);
  text-decoration: underline;
  text-underline-offset: var(--om-sys-space-4);
}
@media (hover: hover) {
  .om-button:hover { background: var(--om-action-hover); }
  .om-button--link:hover { color: var(--om-context-link-hover, var(--om-sys-color-text-link-hover)); }
}
.om-button:active { background: var(--om-action-pressed); }
.om-button--link:active { color: var(--om-context-link-pressed, var(--om-sys-color-text-link-pressed)); }
.om-button--destructive:active { border-color: var(--om-action-pressed); }
.om-button--size-sm { min-height: var(--om-sys-density-control-small); padding-block: var(--om-sys-space-4); padding-inline: var(--om-sys-space-12); border-radius: var(--om-sys-radius-small); }
.om-button--size-lg { min-height: var(--om-sys-density-control-large); padding-inline: var(--om-sys-space-24); font-size: var(--om-sys-type-body-size); }
.om-button--size-icon { min-width: var(--om-sys-density-control-icon); min-height: var(--om-sys-density-control-icon); padding: var(--om-sys-space-8); }
/* The tap area: a transparent box that grows a button lower or narrower than the 44px target (sys.density.target) to that size,
   without changing how it looks or sits. min(0px, ...) never shrinks a button that is already larger. It reaches 2px past a 40px button
   and 6px past a 32px one; keep other controls at least that far away (the later one in the page wins where two areas overlap). */
.om-button::before { content: ""; position: absolute; inset: min(0px, calc((100% - var(--om-sys-density-target)) / 2)); }
.om-button > svg { width: var(--om-sys-space-16); height: var(--om-sys-space-16); flex-shrink: 0; pointer-events: none; }
.om-button > span { min-width: 0; }
.om-button:disabled, .om-button[aria-disabled="true"], .om-input:disabled, .om-select:disabled, .om-textarea:disabled, .om-dialog-close:disabled, .om-navigation-item:disabled, .om-navigation-item[aria-disabled="true"] {
  background: var(--om-sys-color-action-disabled-background);
  color: var(--om-sys-color-action-disabled-foreground);
  border-color: var(--om-sys-color-action-disabled-border);
  cursor: not-allowed;
  opacity: 1;
}
.om-button[aria-busy="true"] { cursor: progress; }
.om-card, .om-dialog-content, .om-tooltip-content {
  --om-context-focus-ring: var(--om-sys-color-focus-ring);
  --om-context-focus-gap: var(--om-sys-color-focus-gap);
  --om-context-link: var(--om-sys-color-text-link);
  --om-context-link-hover: var(--om-sys-color-text-link-hover);
  --om-context-link-pressed: var(--om-sys-color-text-link-pressed);
  --om-context-text-primary: var(--om-sys-color-text-primary);
  --om-context-ghost-foreground: var(--om-sys-color-action-ghost-foreground);
  --om-context-ghost-hover: var(--om-sys-color-action-ghost-hover-background);
  --om-context-ghost-pressed: var(--om-sys-color-action-ghost-pressed-background);
  box-sizing: border-box;
  background: var(--om-sys-color-surface-default);
  color: var(--om-sys-color-text-primary);
  border: var(--om-sys-border-width-default) solid var(--om-sys-color-border-decorative);
  border-radius: var(--om-sys-radius-surface);

  overflow-wrap: anywhere; font-family: var(--om-sys-type-body-family); font-size: var(--om-sys-type-body-size); font-weight: var(--om-sys-type-body-weight); line-height: var(--om-sys-type-body-line-height); letter-spacing: var(--om-sys-type-body-letter-spacing); }
.om-card-header { display: flex; flex-direction: column; gap: var(--om-sys-space-8); padding: var(--om-sys-space-24) var(--om-sys-space-24) 0; }
.om-card-title { margin: 0; font-family: var(--om-sys-type-subheading-family); font-size: var(--om-sys-type-subheading-size); font-weight: var(--om-sys-type-subheading-weight); line-height: var(--om-sys-type-subheading-line-height); letter-spacing: var(--om-sys-type-subheading-letter-spacing); }
.om-card-description, .om-dialog-description { margin: 0; color: var(--om-sys-color-text-secondary); font-family: var(--om-sys-type-body-small-family); font-size: var(--om-sys-type-body-small-size); font-weight: var(--om-sys-type-body-small-weight); line-height: var(--om-sys-type-body-small-line-height); letter-spacing: var(--om-sys-type-body-small-letter-spacing); }
.om-card-content { padding: var(--om-sys-space-24); }
.om-card-footer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--om-sys-space-12); padding: 0 var(--om-sys-space-24) var(--om-sys-space-24); }
.om-shell { display: flex; min-height: 100dvh; flex-direction: column; font-family: var(--om-sys-type-body-family); font-size: var(--om-sys-type-body-size); font-weight: var(--om-sys-type-body-weight); line-height: var(--om-sys-type-body-line-height); letter-spacing: var(--om-sys-type-body-letter-spacing); }
.om-main { min-width: 0; flex: 1; outline: none; }
.om-header { background: var(--om-sys-color-surface-canvas); border-bottom: var(--om-sys-border-width-default) solid var(--om-sys-color-border-decorative); }
.om-header-inner, .om-footer-inner { box-sizing: border-box; width: 100%; max-width: var(--om-sys-layout-content); margin-inline: auto; padding-inline: var(--om-sys-layout-gutter-compact); }
.om-header-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--om-sys-space-16); min-height: calc(var(--om-sys-density-control-default) + var(--om-sys-space-24)); padding-block: var(--om-sys-space-12); }
.om-brand { display: inline-flex; min-width: 0; align-items: center; gap: var(--om-sys-space-12); color: var(--om-sys-color-text-primary); text-decoration: none; border-radius: var(--om-sys-radius-control); overflow-wrap: anywhere; }
.om-brand-mark { display: inline-flex; width: var(--om-sys-density-control-small); height: var(--om-sys-density-control-small); flex-shrink: 0; align-items: center; justify-content: center; border-radius: var(--om-sys-radius-control); background: var(--om-sys-color-action-primary-background); color: var(--om-sys-color-action-primary-foreground); }
.om-brand-mark svg { width: var(--om-sys-space-20); height: var(--om-sys-space-20); }
.om-brand-name { font-family: var(--om-sys-type-subheading-family); font-size: var(--om-sys-type-subheading-size); font-weight: var(--om-sys-type-subheading-weight); line-height: var(--om-sys-type-subheading-line-height); letter-spacing: var(--om-sys-type-subheading-letter-spacing); }
.om-header-description { color: var(--om-sys-color-text-secondary); font-family: var(--om-sys-type-label-family); font-size: var(--om-sys-type-label-size); font-weight: var(--om-sys-type-label-weight); line-height: var(--om-sys-type-label-line-height); letter-spacing: var(--om-sys-type-label-letter-spacing); }
.om-footer { margin-top: var(--om-sys-space-48); padding-bottom: calc(var(--om-sys-space-64) + var(--om-sys-space-32)); border-top: var(--om-sys-border-width-default) solid var(--om-sys-color-border-decorative); }
.om-footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--om-sys-space-16); padding-block: var(--om-sys-space-24); color: var(--om-sys-color-text-secondary); font-family: var(--om-sys-type-label-family); font-size: var(--om-sys-type-label-size); font-weight: var(--om-sys-type-label-weight); line-height: var(--om-sys-type-label-line-height); letter-spacing: var(--om-sys-type-label-letter-spacing); }
.om-footer-note { margin: 0; overflow-wrap: anywhere; }
.om-link { color: var(--om-context-link, var(--om-sys-color-text-link)); text-decoration: underline; text-underline-offset: var(--om-sys-space-4); border-radius: var(--om-sys-radius-small); }
.om-link:hover { color: var(--om-context-link-hover, var(--om-sys-color-text-link-hover)); }
.om-link:active { color: var(--om-context-link-pressed, var(--om-sys-color-text-link-pressed)); }
.om-skip-link { position: fixed; top: var(--om-sys-space-12); left: var(--om-sys-space-12); z-index: var(--om-sys-layer-skip); transform: translateY(calc(-100% - var(--om-sys-space-24))); border-radius: var(--om-sys-radius-control); padding: var(--om-sys-space-12) var(--om-sys-space-16); background: var(--om-sys-color-surface-inverse); color: var(--om-sys-color-text-inverse); }
.om-skip-link:focus { transform: none; }
.om-dialog-overlay { position: fixed; inset: 0; z-index: var(--om-sys-layer-scrim); background: var(--om-sys-color-surface-scrim); }
.om-dialog-content { position: fixed; top: 50%; left: 50%; z-index: var(--om-sys-layer-dialog); max-height: calc(100dvh - var(--om-sys-space-32)); width: calc(100% - var(--om-sys-space-32)); max-width: calc(var(--om-sys-space-64) * 8); transform: translate(-50%, -50%); overflow-y: auto; overscroll-behavior: contain; padding: var(--om-sys-space-24); box-shadow: var(--om-sys-elevation-modal-offset-x) var(--om-sys-elevation-modal-offset-y) var(--om-sys-elevation-modal-blur) var(--om-sys-elevation-modal-spread) var(--om-sys-elevation-modal-color); }
.om-dialog-content:focus { outline: none; }
.om-dialog-close { position: absolute; top: var(--om-sys-space-8); right: var(--om-sys-space-8); display: inline-flex; align-items: center; justify-content: center; min-width: var(--om-sys-density-control-icon); min-height: var(--om-sys-density-control-icon); padding: var(--om-sys-space-8); border: var(--om-sys-border-width-default) solid var(--om-sys-color-action-ghost-background); border-radius: var(--om-sys-radius-control); background: var(--om-sys-color-action-ghost-background); color: var(--om-sys-color-icon-secondary); cursor: pointer; font-family: var(--om-sys-type-body-small-family); font-size: var(--om-sys-type-body-small-size); font-weight: var(--om-sys-type-body-small-weight); line-height: var(--om-sys-type-body-small-line-height); letter-spacing: var(--om-sys-type-body-small-letter-spacing); }
.om-dialog-close:hover:not(:disabled) { background: var(--om-sys-color-action-ghost-hover-background); color: var(--om-sys-color-text-primary); }
.om-dialog-close:active:not(:disabled) { background: var(--om-sys-color-action-ghost-pressed-background); color: var(--om-sys-color-text-primary); }
.om-dialog-close svg { width: var(--om-sys-space-16); height: var(--om-sys-space-16); }
.om-dialog-header { display: flex; flex-direction: column; gap: var(--om-sys-space-8); margin-bottom: var(--om-sys-space-24); padding-right: var(--om-sys-density-control-icon); }
.om-dialog-footer { display: flex; flex-direction: column-reverse; gap: var(--om-sys-space-8); margin-top: var(--om-sys-space-20); }
.om-dialog-title { margin: 0; font-family: var(--om-sys-type-subheading-family); font-size: var(--om-sys-type-subheading-size); font-weight: var(--om-sys-type-subheading-weight); line-height: var(--om-sys-type-subheading-line-height); letter-spacing: var(--om-sys-type-subheading-letter-spacing); }
.om-input, .om-select, .om-textarea { display: block; width: 100%; min-width: 0; min-height: var(--om-sys-density-field); padding: var(--om-sys-space-8) var(--om-sys-space-12); border: var(--om-sys-border-width-default) solid var(--om-sys-color-border-control); border-radius: var(--om-sys-radius-control); background: var(--om-sys-color-surface-default); color: var(--om-sys-color-text-primary); font-family: var(--om-sys-type-body-small-family); font-size: var(--om-sys-type-body-small-size); font-weight: var(--om-sys-type-body-small-weight); line-height: var(--om-sys-type-body-small-line-height); letter-spacing: var(--om-sys-type-body-small-letter-spacing); box-sizing: border-box; }
.om-input::placeholder, .om-textarea::placeholder { color: var(--om-sys-color-text-secondary); opacity: 1; }
.om-input[aria-invalid="true"], .om-select[aria-invalid="true"], .om-textarea[aria-invalid="true"] { border-color: var(--om-sys-color-status-danger-border); }
.om-input[readonly], .om-textarea[readonly] { background: var(--om-sys-color-surface-subtle); color: var(--om-sys-color-text-secondary); }
.om-input:disabled, .om-select:disabled, .om-textarea:disabled { background: var(--om-sys-color-action-disabled-background); color: var(--om-sys-color-action-disabled-foreground); border-color: var(--om-sys-color-action-disabled-border); }
/* Text fields already have a border: the ring hugs it (no gap) instead of floating like the action ring. Placed after the base field rules; low specificity keeps the invalid border.
   The border keeps the light-surface ring colour because the field stays white on inverse panels too; only the outer ring follows the context. */
:where(.om-input, .om-select, .om-textarea):focus-visible {
  border-color: var(--om-sys-color-focus-ring);
  outline: var(--om-sys-focus-width) solid var(--om-context-focus-ring, var(--om-sys-color-focus-ring));
  outline-offset: 0;
  box-shadow: none;
}
.om-select:not([multiple]):is(:not([size]), [size="0"], [size="1"]) {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 42%, currentColor 42%, currentColor 58%, transparent 58%), linear-gradient(135deg, transparent 42%, currentColor 42%, currentColor 58%, transparent 58%);
  background-position: right calc(var(--om-sys-space-12) + var(--om-sys-space-16) / 2) center, right var(--om-sys-space-12) center;
  background-size: calc(var(--om-sys-space-16) / 2) calc(var(--om-sys-space-16) / 2);
  background-repeat: no-repeat;
  padding-inline-end: calc(var(--om-sys-space-12) * 2 + var(--om-sys-space-16));
}
.om-select:not([multiple]):is(:not([size]), [size="0"], [size="1"]):dir(rtl) {
  background-position: left var(--om-sys-space-12) center, left calc(var(--om-sys-space-12) + var(--om-sys-space-16) / 2) center;
}
.om-textarea { resize: vertical; }
.om-status { display: flex; gap: var(--om-sys-space-8); align-items: flex-start; padding: var(--om-sys-space-16); border: var(--om-sys-border-width-default) solid var(--om-sys-color-status-info-border); border-radius: var(--om-sys-radius-control); background: var(--om-sys-color-status-info-background); color: var(--om-sys-color-status-info-foreground);    overflow-wrap: anywhere; font-family: var(--om-sys-type-body-small-family); font-size: var(--om-sys-type-body-small-size); font-weight: var(--om-sys-type-body-small-weight); line-height: var(--om-sys-type-body-small-line-height); letter-spacing: var(--om-sys-type-body-small-letter-spacing); }
.om-status[data-tone="success"] { border-color: var(--om-sys-color-status-success-border); background: var(--om-sys-color-status-success-background); color: var(--om-sys-color-status-success-foreground); }
.om-status[data-tone="warning"] { border-color: var(--om-sys-color-status-warning-border); background: var(--om-sys-color-status-warning-background); color: var(--om-sys-color-status-warning-foreground); }
.om-status[data-tone="danger"] { border-color: var(--om-sys-color-status-danger-border); background: var(--om-sys-color-status-danger-background); color: var(--om-sys-color-status-danger-foreground); }
.om-status-icon { display: inline-flex; inline-size: var(--om-sys-space-16); block-size: 1lh; flex-shrink: 0; align-items: center; justify-content: center; font-weight: var(--om-sys-type-label-weight); }
.om-status-content { flex: 1; min-width: 0; }
.om-status-label { display: block; font-weight: var(--om-sys-type-label-weight); }
.om-status-content > p { margin: var(--om-sys-space-4) 0 0; }
.om-status-content :where(a, small, svg) { color: inherit; }
.om-spinner { display: inline-flex; min-width: 0; align-items: center; gap: var(--om-sys-space-8); color: inherit; }
.om-spinner-label { min-width: 0; overflow-wrap: anywhere; }
.om-spinner-glyph { width: 1em; height: 1em; flex-shrink: 0; animation: om-spin calc(var(--om-sys-motion-duration-slow) * 4) linear infinite; }
@keyframes om-spin { to { transform: rotate(360deg); } }
.om-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.om-tooltip-root { position: relative; display: inline-flex; max-width: 100%; }
.om-tooltip-content { position: absolute; top: 100%; left: 0; z-index: var(--om-sys-layer-tooltip); transform: translateX(var(--om-tooltip-shift, 0px)); width: max-content; max-width: min(calc(var(--om-sys-space-64) * 4), calc(100vw - var(--om-sys-space-32))); padding: var(--om-sys-space-12); border-color: var(--om-sys-color-border-control);   box-shadow: var(--om-sys-elevation-floating-offset-x) var(--om-sys-elevation-floating-offset-y) var(--om-sys-elevation-floating-blur) var(--om-sys-elevation-floating-spread) var(--om-sys-elevation-floating-color); font-family: var(--om-sys-type-body-small-family); font-size: var(--om-sys-type-body-small-size); font-weight: var(--om-sys-type-body-small-weight); line-height: var(--om-sys-type-body-small-line-height); letter-spacing: var(--om-sys-type-body-small-letter-spacing); }
.om-tooltip-content[hidden] { display: none; }
.om-tooltip-content[data-side="top"] { top: auto; bottom: 100%; }
.om-navigation-item { position: relative; display: flex; width: 100%; min-width: 0; min-height: var(--om-sys-density-navigation-row-min-height); align-items: flex-start; gap: var(--om-sys-space-8); box-sizing: border-box; padding: var(--om-sys-density-navigation-row-padding-block) var(--om-sys-density-navigation-row-padding-inline); border: var(--om-sys-border-width-default) solid var(--om-sys-color-action-ghost-background); border-radius: var(--om-sys-radius-navigation); background: var(--om-sys-color-action-ghost-background); color: var(--om-context-text-primary, var(--om-sys-color-text-primary));     text-align: start; text-decoration: none; overflow-wrap: anywhere; cursor: pointer; font-family: var(--om-sys-type-label-family); font-size: var(--om-sys-type-label-size); font-weight: var(--om-sys-font-weight-regular); line-height: var(--om-sys-type-label-line-height); letter-spacing: var(--om-sys-type-label-letter-spacing); }
.om-navigation-item > svg { width: var(--om-sys-space-16); height: var(--om-sys-space-16); flex-shrink: 0; margin-block-start: max(0px, calc((1lh - var(--om-sys-space-16)) / 2)); }
.om-navigation-item:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--om-context-ghost-hover, var(--om-sys-color-action-ghost-hover-background)); }
.om-navigation-item:active:not(:disabled):not([aria-disabled="true"]) { background: var(--om-context-ghost-pressed, var(--om-sys-color-action-ghost-pressed-background)); }
.om-navigation-item[aria-current]:not([aria-current="false"]) { background: var(--om-sys-color-selection-background); color: var(--om-sys-color-selection-foreground); font-weight: var(--om-sys-font-weight-semibold); }
.om-navigation-item[aria-current]:not([aria-current="false"]):hover, .om-navigation-item[aria-current]:not([aria-current="false"]):active { background: var(--om-sys-color-selection-hover-background); }
.om-navigation-item[aria-current]:not([aria-current="false"]):is(:disabled, [aria-disabled="true"]) { background: var(--om-sys-color-action-disabled-background); color: var(--om-sys-color-action-disabled-foreground); border-color: var(--om-sys-color-action-disabled-border); cursor: not-allowed; }
.om-navigation-label { min-width: 0; flex: 1; }
.om-navigation-meta, .om-navigation-icon { flex-shrink: 0; color: inherit; }
.om-navigation-item :where(small, svg, a) { color: inherit; }
[data-om-surface="inverse"] { --om-context-focus-ring: var(--om-sys-color-focus-ring-inverse); --om-context-focus-gap: var(--om-sys-color-focus-gap-inverse); --om-context-link: var(--om-sys-color-text-link-inverse); --om-context-link-hover: var(--om-sys-color-text-link-inverse-hover); --om-context-link-pressed: var(--om-sys-color-text-link-inverse-pressed); --om-context-text-primary: var(--om-sys-color-text-inverse); --om-context-ghost-foreground: var(--om-sys-color-action-ghost-inverse-foreground); --om-context-ghost-hover: var(--om-sys-color-action-ghost-inverse-hover-background); --om-context-ghost-pressed: var(--om-sys-color-action-ghost-inverse-pressed-background); background: var(--om-sys-color-surface-inverse); color: var(--om-sys-color-text-inverse); }
.om-feedback-trigger { position: fixed; right: max(var(--om-sys-space-20), env(safe-area-inset-right)); bottom: max(var(--om-sys-space-20), env(safe-area-inset-bottom)); z-index: var(--om-sys-layer-dropdown); border-radius: var(--om-sys-radius-pill); box-shadow: var(--om-sys-elevation-floating-offset-x) var(--om-sys-elevation-floating-offset-y) var(--om-sys-elevation-floating-blur) var(--om-sys-elevation-floating-spread) var(--om-sys-elevation-floating-color); }
.om-feedback-eyebrow, .om-feedback-label, .om-feedback-legend { display: block; margin-bottom: var(--om-sys-space-8); color: var(--om-sys-color-text-primary); font-family: var(--om-sys-type-label-family); font-size: var(--om-sys-type-label-size); font-weight: var(--om-sys-type-label-weight); line-height: var(--om-sys-type-label-line-height); letter-spacing: var(--om-sys-type-label-letter-spacing); }
.om-feedback-eyebrow { color: var(--om-sys-color-text-link); }
.om-feedback-fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.om-feedback-categories { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, max(calc((100% - var(--om-sys-space-8)) / 2), calc(var(--om-sys-space-16) * 6))), 1fr)); gap: var(--om-sys-space-8); }
.om-feedback-choice { position: relative; min-width: 0; cursor: pointer; }
.om-feedback-category { display: grid; grid-template-columns: var(--om-sys-space-16) minmax(0, 1fr); box-sizing: border-box; min-height: var(--om-sys-density-control-large); height: 100%; align-items: start; align-content: center; gap: var(--om-sys-space-8); padding: var(--om-sys-space-8) var(--om-sys-space-12); border: var(--om-sys-border-width-default) solid var(--om-sys-color-border-control); border-radius: var(--om-sys-radius-control); background: var(--om-sys-color-surface-default); color: var(--om-sys-color-text-primary);   overflow-wrap: anywhere; font-family: var(--om-sys-type-label-family); font-size: var(--om-sys-type-label-size); font-weight: var(--om-sys-font-weight-regular); line-height: var(--om-sys-type-label-line-height); letter-spacing: var(--om-sys-type-label-letter-spacing); }
.om-feedback-control:checked + .om-feedback-category { border-color: var(--om-sys-color-selection-border); background: var(--om-sys-color-selection-background); color: var(--om-sys-color-selection-foreground); font-weight: var(--om-sys-font-weight-semibold); }
@media (hover: hover) {
  .om-feedback-choice:hover > .om-feedback-control:not(:disabled) + .om-feedback-category { background: var(--om-sys-color-action-ghost-hover-background); }
  .om-feedback-choice:hover > .om-feedback-control:checked:not(:disabled) + .om-feedback-category { background: var(--om-sys-color-selection-hover-background); }
}
.om-feedback-choice:active > .om-feedback-control:not(:disabled) + .om-feedback-category { background: var(--om-sys-color-action-ghost-pressed-background); }
.om-feedback-choice:active > .om-feedback-control:checked:not(:disabled) + .om-feedback-category { background: var(--om-sys-color-selection-hover-background); }
.om-feedback-control:focus-visible + .om-feedback-category { outline: var(--om-sys-focus-width) solid var(--om-sys-color-focus-ring); outline-offset: var(--om-sys-focus-offset); }
.om-feedback-control:disabled + .om-feedback-category { background: var(--om-sys-color-action-disabled-background); color: var(--om-sys-color-action-disabled-foreground); border-color: var(--om-sys-color-action-disabled-border); cursor: wait; }
.om-feedback-symbol { display: inline-flex; inline-size: var(--om-sys-space-16); block-size: 1lh; align-items: center; justify-content: center; }
.om-feedback-symbol-glyph { font-size: var(--om-sys-type-body-small-size); line-height: 1; }
.om-feedback-category-label { min-width: 0; }
.om-feedback-message { margin-top: var(--om-sys-space-20); }
.om-feedback-label small { color: var(--om-sys-color-text-secondary); font-weight: var(--om-sys-type-body-weight); }
.om-feedback-counter { margin: var(--om-sys-space-4) 0 0; color: var(--om-sys-color-text-secondary);   text-align: right; font-variant-numeric: tabular-nums; font-family: var(--om-sys-type-label-family); font-size: var(--om-sys-type-label-size); font-weight: var(--om-sys-type-label-weight); line-height: var(--om-sys-type-label-line-height); letter-spacing: var(--om-sys-type-label-letter-spacing); }
.om-feedback-note { margin: var(--om-sys-space-20) 0 0; padding: var(--om-sys-space-12); border-radius: var(--om-sys-radius-control); background: var(--om-sys-color-surface-subtle); color: var(--om-sys-color-text-secondary); font-family: var(--om-sys-type-body-small-family); font-size: var(--om-sys-type-label-size); font-weight: var(--om-sys-type-body-small-weight); line-height: var(--om-sys-type-body-small-line-height); letter-spacing: var(--om-sys-type-body-small-letter-spacing); }
.om-feedback-error { margin-top: var(--om-sys-space-12); color: var(--om-sys-color-status-danger-foreground); font-family: var(--om-sys-type-body-small-family); font-size: var(--om-sys-type-body-small-size); font-weight: var(--om-sys-type-body-small-weight); line-height: var(--om-sys-type-body-small-line-height); letter-spacing: var(--om-sys-type-body-small-letter-spacing); }
/* Breakpoint is sys.breakpoint.small (640 CSS px); media conditions cannot use var(). */
@media (min-width: 640px) {
  .om-header-inner, .om-footer-inner { padding-inline: var(--om-sys-layout-gutter-default); }
  .om-dialog-footer { flex-direction: row; justify-content: flex-end; flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  .om-spinner-glyph { animation: none; }
  .om-button, .om-input, .om-select, .om-textarea, .om-navigation-item, .om-dialog-close { transition: none; }
}
@media (forced-colors: active) {
  .om-select:not([multiple]):is(:not([size]), [size="0"], [size="1"]) { appearance: auto; background-image: none; padding-inline-end: var(--om-sys-space-12); }
  .om-button, .om-navigation-item, .om-input, .om-select, .om-textarea, .om-dialog-close, .om-status { border-color: ButtonText; }
  .om-navigation-item[aria-current]:not([aria-current="false"]):not(:disabled):not([aria-disabled="true"]), .om-feedback-control:checked:not(:disabled) + .om-feedback-category, .om-feedback-choice:is(:hover, :active) > .om-feedback-control:checked:not(:disabled) + .om-feedback-category { background: Highlight; color: HighlightText; border-color: Highlight; }
  .om-navigation-item:is(:disabled, [aria-disabled="true"]), .om-navigation-item[aria-current]:not([aria-current="false"]):is(:disabled, [aria-disabled="true"]), .om-feedback-control:disabled + .om-feedback-category { background: Canvas; color: GrayText; border-color: GrayText; }
}
}
/* Sonner injects unlayered CSS; scoped host overrides must share that cascade. */
.om-toaster[data-sonner-toaster] { font-family: var(--om-sys-font-family-sans); z-index: var(--om-sys-layer-toast); }
.om-toaster[data-sonner-toaster] [data-sonner-toast][data-styled] { box-sizing: border-box; flex-wrap: wrap; padding: var(--om-sys-space-16); gap: var(--om-sys-space-6); font-family: var(--om-sys-type-body-small-family); font-size: var(--om-sys-type-body-small-size); font-weight: var(--om-sys-type-body-small-weight); line-height: var(--om-sys-type-body-small-line-height); letter-spacing: var(--om-sys-type-body-small-letter-spacing); border-width: var(--om-sys-border-width-default); border-radius: var(--om-sys-radius-control); box-shadow: var(--om-sys-elevation-floating-offset-x) var(--om-sys-elevation-floating-offset-y) var(--om-sys-elevation-floating-blur) var(--om-sys-elevation-floating-spread) var(--om-sys-elevation-floating-color); overflow-wrap: anywhere; }
.om-toaster[data-sonner-toaster] [data-sonner-toast][data-styled] :is([data-title], [data-description]) { font-family: var(--om-sys-type-body-small-family); font-size: var(--om-sys-type-body-small-size); font-weight: var(--om-sys-type-body-small-weight); line-height: var(--om-sys-type-body-small-line-height); letter-spacing: var(--om-sys-type-body-small-letter-spacing); color: inherit; }
.om-toaster[data-sonner-toaster] [data-sonner-toast][data-styled] [data-title] { font-weight: var(--om-sys-font-weight-semibold); }
.om-toaster[data-sonner-toaster] [data-sonner-toast][data-styled] [data-content] { gap: var(--om-sys-space-2); flex-basis: calc(100% - var(--om-sys-space-32)); }
.om-toaster[data-sonner-toaster] [data-sonner-toast][data-styled] [data-icon], .om-toaster[data-sonner-toaster] [data-sonner-toast][data-styled] [data-icon] svg { width: var(--om-sys-space-16); height: var(--om-sys-space-16); margin: 0; }
.om-toaster[data-sonner-toaster] [data-sonner-toast][data-styled] :is([data-button], [data-close-button]) { box-sizing: border-box; max-width: 100%; height: auto; min-width: var(--om-sys-density-control-icon); min-height: var(--om-sys-density-control-icon); justify-content: center; gap: var(--om-sys-space-8); padding: var(--om-sys-space-8) var(--om-sys-space-12); margin: 0; border: var(--om-sys-border-width-default) solid var(--om-sys-color-action-primary-border); border-radius: var(--om-sys-radius-control); background: var(--om-sys-color-action-primary-background); color: var(--om-sys-color-action-primary-foreground); font-family: var(--om-sys-type-body-small-family); font-size: var(--om-sys-type-body-small-size); font-weight: var(--om-sys-font-weight-semibold); line-height: var(--om-sys-type-body-small-line-height); letter-spacing: var(--om-sys-type-body-small-letter-spacing); white-space: normal; overflow-wrap: anywhere; transition: background-color var(--om-sys-motion-duration-fast) var(--om-sys-motion-easing-standard); }
.om-toaster[data-sonner-toaster] [data-sonner-toast][data-styled] [data-button]:hover:not(:disabled) { background: var(--om-sys-color-action-primary-hover-background); }
.om-toaster[data-sonner-toaster] [data-sonner-toast][data-styled] [data-button]:active:not(:disabled) { background: var(--om-sys-color-action-primary-pressed-background); }
.om-toaster[data-sonner-toaster] [data-sonner-toast][data-styled] [data-close-button] { position: static; transform: none; width: auto; padding: var(--om-sys-space-8); border-color: var(--om-sys-color-border-control); background: var(--om-sys-color-surface-default); color: var(--om-sys-color-text-primary); z-index: auto; }
.om-toaster[data-sonner-toaster] [data-sonner-toast][data-styled] [data-close-button]:hover:not(:disabled) { border-color: var(--om-sys-color-border-control); background: var(--om-sys-color-action-ghost-hover-background); }
.om-toaster[data-sonner-toaster] [data-sonner-toast][data-styled] [data-close-button]:active:not(:disabled) { background: var(--om-sys-color-action-ghost-pressed-background); }
.om-toaster[data-sonner-toaster] [data-sonner-toast][data-styled] [data-close-button] svg { width: var(--om-sys-space-16); height: var(--om-sys-space-16); }
.om-toaster[data-sonner-toaster] [data-sonner-toast][data-styled] :is([data-button], [data-close-button]):disabled { background: var(--om-sys-color-action-disabled-background); color: var(--om-sys-color-action-disabled-foreground); border-color: var(--om-sys-color-action-disabled-border); cursor: not-allowed; }
.om-toaster[data-sonner-toaster] [data-sonner-toast][data-styled]:focus-visible, .om-toaster[data-sonner-toaster] [data-sonner-toast][data-styled] :is([data-button], [data-close-button]):focus-visible { outline: var(--om-sys-focus-width) solid var(--om-sys-color-focus-ring); outline-offset: var(--om-sys-focus-offset); }
.om-toaster[data-sonner-toaster] [data-sonner-toast][data-styled] :is([data-button], [data-close-button]):focus-visible { box-shadow: 0 0 0 var(--om-sys-focus-offset) var(--om-sys-color-focus-gap); }
.om-toaster[data-sonner-toaster] .sonner-loading-wrapper { --size: var(--om-sys-space-16); }
.om-toaster[data-sonner-toaster] .sonner-loading-bar { background: currentColor; border-radius: var(--om-sys-radius-pill); animation-duration: calc(var(--om-sys-motion-duration-slow) * 5); }
.om-toaster[data-sonner-toaster], .om-toaster[data-sonner-toaster] [data-sonner-toast], .om-toaster[data-sonner-toaster] .sonner-loader { transition-duration: var(--om-sys-motion-duration-standard); transition-timing-function: var(--om-sys-motion-easing-standard); }
.om-toaster[data-sonner-toaster] [data-sonner-toast] > * { transition-duration: var(--om-sys-motion-duration-standard); transition-timing-function: var(--om-sys-motion-easing-standard); }
.om-toaster[data-sonner-toaster] [data-sonner-toast][data-removed="true"][data-front="false"][data-swipe-out="false"][data-expanded="false"] { transition-duration: var(--om-sys-motion-duration-standard); transition-timing-function: var(--om-sys-motion-easing-standard); }
.om-toaster[data-sonner-toaster] [data-sonner-toast][data-promise="true"] [data-icon] > svg, .om-toaster[data-sonner-toaster] .sonner-loading-wrapper[data-visible="false"], .om-toaster[data-sonner-toaster] [data-sonner-toast][data-swipe-out="true"] { animation-duration: var(--om-sys-motion-duration-standard); animation-timing-function: var(--om-sys-motion-easing-standard); }
@media (prefers-reduced-motion: reduce) { .om-toaster [data-sonner-toast], .om-toaster [data-sonner-toast] * { animation: none !important; transition: none !important; } }
/* @ordomint/design-system:end */

/* 2026-10-29 (REQ-057): filled buttons use the strong green on light surfaces and keep the light sage role on dark ones.
   Shared tokens stay untouched: each surface sets site-local values that the filled button reads; disabled buttons keep the shared look. */
html {
  --site-filled-background: var(--om-ref-color-sage-strong);
  --site-filled-hover: color-mix(in srgb, var(--om-ref-color-sage-strong) 80%, var(--om-ref-color-ink) 20%);
  --site-filled-pressed: color-mix(in srgb, var(--om-ref-color-sage-strong) 65%, var(--om-ref-color-ink) 35%);
  --site-filled-foreground: var(--om-ref-color-white);
}
[data-om-surface="inverse"] {
  --site-filled-background: var(--om-sys-color-action-primary-background);
  --site-filled-hover: var(--om-sys-color-action-primary-hover-background);
  --site-filled-pressed: var(--om-sys-color-action-primary-pressed-background);
  --site-filled-foreground: var(--om-sys-color-action-primary-foreground);
}
.om-button:not(.om-button--destructive, .om-button--ghost, .om-button--link, .om-button--outline, .om-button--secondary, :disabled, [aria-disabled="true"]) { background: var(--site-filled-background); color: var(--site-filled-foreground); }
@media (hover: hover) {
  .om-button:not(.om-button--destructive, .om-button--ghost, .om-button--link, .om-button--outline, .om-button--secondary, :disabled, [aria-disabled="true"]):hover { background: var(--site-filled-hover); }
}
.om-button:not(.om-button--destructive, .om-button--ghost, .om-button--link, .om-button--outline, .om-button--secondary, :disabled, [aria-disabled="true"]):active { background: var(--site-filled-pressed); }

/* Corporate presentation follows the selected visual; shared foundations stay above. */
* { box-sizing: border-box; }
html { color-scheme: light; }
/* 2026-10-17 (REQ-036): the header follows the top of the screen, so in-page links land below it.
   2026-11-10 (REQ-078): the header is one 64px bar from 640px (--site-header-bar). Its row is the 44px tap target (sys.density.target):
   the wordmark and the links are 44px, the 40px contact button sits in the middle. Phones use the rows set below 640px. */
:root { --site-header-bar: var(--om-sys-space-64); --site-header-height: var(--site-header-bar); }
html { scroll-padding-top: var(--site-header-height); }
body {
  margin: 0;
  background: var(--om-sys-color-surface-canvas);
  color: var(--om-sys-color-text-primary);
  font-family: var(--om-sys-type-body-family);
  font-size: var(--om-sys-type-body-size);
  font-weight: var(--om-sys-type-body-weight);
  line-height: var(--om-sys-type-body-line-height);
  letter-spacing: var(--om-sys-type-body-letter-spacing);
  overflow-wrap: anywhere;
  /* 2026-11-05 (REQ-CORPORATE-SITE-073): Japanese text breaks only between phrases, never inside a word like 「デザイ｜ン」
     (Chrome/Edge 119+; iPhone WebKit ignores it and breaks normally). Headings share their lines evenly. */
  word-break: auto-phrase;
}
:is(h1, h2, h3, h4, summary) { text-wrap: balance; }
/* Short list items and table cells pull a phrase down rather than leave a lone 「費用」 or 「履行」 on the last line. */
:is(li, dt, dd, td, th) { text-wrap: pretty; }
p { text-wrap: wrap; } /* text-wrap is inherited: paragraphs inside list items are not re-flowed either */
::selection { color: var(--om-sys-color-selection-foreground); background: var(--om-sys-color-selection-background); }
h1, h2, h3, p { margin: 0; }
h1, h2 {
  font-family: var(--om-sys-type-title-family);
  font-weight: var(--om-sys-font-weight-bold);
  line-height: var(--om-sys-type-title-line-height);
  letter-spacing: var(--om-sys-type-title-letter-spacing);
}
h2 { font-size: var(--om-sys-type-heading-size); }
.statement-line { display: block; }
h3 {
  font-family: var(--om-sys-type-subheading-family);
  font-size: var(--om-sys-type-subheading-size);
  font-weight: var(--om-sys-font-weight-bold);
  line-height: var(--om-sys-type-subheading-line-height);
  letter-spacing: var(--om-sys-type-subheading-letter-spacing);
}
.container {
  width: calc(100% - max(var(--om-sys-layout-gutter-compact), 5vw) * 2);
  max-width: calc(var(--om-sys-layout-content) * 1.125);
  margin-inline: auto;
}
#main-content:focus { outline: none; }
section { scroll-margin-block-start: var(--om-sys-space-24); }
/* 2026-11-10 (REQ-078): links have no visible box, so their height is the 44px tap target, not the (now 40px) button height. */
.om-brand, .om-link, .om-skip-link { min-height: var(--om-sys-density-target); }
.om-brand { padding-block: var(--om-sys-space-8); }
.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--om-sys-space-12) var(--om-sys-space-32);
  min-height: var(--site-header-bar);
  padding-block: calc((var(--site-header-bar) - var(--om-sys-density-target)) / 2);
}
.site-header .om-brand { padding-block: 0; }
/* 2026-10-17 (REQ-036): every page keeps the header at the top with CSS only (no script).
   Layer: above the content, below the chatbot (dialog 40) and the skip link (skip 100). The line is a shadow so the height does not change. */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--om-sys-layer-sticky);
  background: var(--om-sys-color-surface-canvas);
  box-shadow: 0 var(--om-sys-border-width-default) 0 var(--om-sys-color-border-decorative);
}
/* Where scroll-linked animation exists, the line (and on the top page the surface) fades in over the first 64px of scrolling,
   so the top page header still sits on the photograph at the very top. Elsewhere it is opaque from the start. */
@supports (animation-timeline: scroll()) {
  .site-header { animation: site-header-rest linear both; animation-timeline: scroll(root block); animation-range: 0 var(--om-sys-space-64); }
  .corporate-page .site-header { animation-name: site-header-over-photo; }
}
@keyframes site-header-rest { from { box-shadow: 0 0 0 transparent; } }
@keyframes site-header-over-photo { from { background-color: transparent; box-shadow: 0 0 0 transparent; } }
.site-header .om-brand-name { font-size: 24px; font-weight: var(--om-sys-font-weight-bold); }
.corporate-page .site-header .om-brand-name { font-family: Arial, Helvetica, var(--om-sys-type-title-family); }
.corporate-page main :is(h1, h2, h3), .corporate-page .site-header .om-brand-name { color: var(--om-ref-color-ink); }
.site-nav { width: 100%; }
.site-nav__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--om-sys-space-4) var(--om-sys-space-8);
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-nav__list li { min-width: 0; }
.site-nav a {
  width: 100%;
  align-items: center;
  font-size: var(--om-sys-type-body-small-size);
}
/* 2026-11-10 (REQ-078): the text links are 44px rows; the contact button keeps the 40px button height (its tap area is 44px). */
.site-nav a:not(.om-button) { min-width: var(--om-sys-density-target); min-height: var(--om-sys-density-target); }
.site-header__contact { border-radius: var(--om-sys-radius-navigation); border-color: transparent; }
.eyebrow, .hero__eyebrow {
  color: var(--om-sys-color-text-secondary);
  font-size: var(--om-sys-type-label-size);
  font-weight: var(--om-sys-font-weight-semibold);
  line-height: var(--om-sys-type-label-line-height);
  letter-spacing: 0.2em;
}
.eyebrow { display: flex; align-items: center; gap: var(--om-sys-space-16); margin-bottom: var(--om-sys-layout-flow-related); }
.eyebrow::after { content: ""; width: var(--om-sys-space-32); border-top: var(--om-sys-border-width-default) solid currentColor; }
.hero {
  position: relative;
  padding-block: calc(var(--om-sys-space-32) + var(--om-sys-space-4)) var(--om-sys-space-40);
  background-color: var(--om-sys-color-surface-canvas);
  background-image: url('/assets/hero-glass.jpg');
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
}
.hero__inner { display: block; }
.hero-copy { min-width: 0; }
.hero__eyebrow { margin-bottom: var(--om-sys-space-24); }
.hero__eyebrow span { display: block; }
.hero__eyebrow::after { content: ""; display: block; width: var(--om-sys-space-32); margin-top: var(--om-sys-space-20); border-top: var(--om-sys-border-width-default) solid currentColor; }
.hero h1 { max-width: 12em; font-size: var(--om-sys-type-title-size); line-height: 1.48; letter-spacing: -0.05em; line-break: strict; } /* 32px on phones (REQ-079) */
.hero-title__phrase { display: block; }
.hero-title__part { display: inline-block; max-inline-size: 100%; }
/* 2026-11-05 (REQ-CORPORATE-SITE-073): phrases are left to word-break: auto-phrase. A word-group only keeps a short span (12 characters at most)
   on one line: a number and its unit (「2 営業日」「月 10 万回」), a Latin word and its particle (「AI を」), or a word auto-phrase splits (「お問い｜合わせ」).
   In text it is plain nowrap, which adds no break points at its edges. In a heading the large letters could overflow with 200% text,
   so there it is an inline box no wider than its line. */
.word-group { white-space: nowrap; }
:is(h1, h2, h3, h4) .word-group { display: inline-block; max-inline-size: 100%; white-space: normal; }
.hero__lead { max-width: 25em; margin-top: var(--om-sys-space-24); }
/* 2026-11-05 (REQ-066): the main call to action keeps the height of the shared large button (om-button--size-lg; 44px since 2026-11-10, REQ-078); no taller site-only size. */
.site-cta { border-radius: var(--om-sys-radius-navigation); border-color: transparent; }
/* 2026-11-05 (REQ-068): the arrow is an empty decorative span painted in the label colour (currentColor) through the arrow SVG as a mask,
   so it follows the text in every state (hover, focus, pressed) and on dark bands. An <img> could not inherit the colour and drew black.
   Forced colours keep the (system) text colour; print keeps the painted arrow. */
.arrow-icon { display: block; flex-shrink: 0; width: var(--om-sys-space-16); height: var(--om-sys-space-16); background-color: currentColor; -webkit-mask: url("/assets/arrow-right.svg") center / contain no-repeat; mask: url("/assets/arrow-right.svg") center / contain no-repeat; forced-color-adjust: none; print-color-adjust: exact; }
/* One rhythm for every section below the Hero: shared section space, heading block, then content. */
/* 2026-11-05 (REQ-066): every section (colored band or plain) keeps layout.section above and below its content:
   compact (64px) on phones and tablets, default (96px) on wide screens. Sub pages used half of it and felt cramped. */
.section, .contact, .lp-cta { --band-space: var(--om-sys-layout-section-compact); padding-block: var(--band-space); }
/* Two plain (white) sections in a row on a sub page share no colour edge, so the lower one starts at group (48px) instead of doubling the run.
   Screen only: print keeps its own even 32px. (The top page colours every section, so no plain pair occurs there.) */
@media screen { .sub-page .section:not(.section--band) + .section:not(.section--band) { padding-top: var(--om-sys-layout-flow-group); } }
/* 2026-11-05 (REQ-066): vertical rhythm uses the shared flow steps (design-system layout.flow): tight 8 / related 16 / text 24 / block 32 / group 48. */
.section-heading { margin-bottom: var(--om-sys-layout-flow-group); }
.section-introduction { margin-top: var(--om-sys-layout-flow-related); color: var(--om-sys-color-text-secondary); line-height: 1.7; }
/* No rules between sections: the background alternates pale green (shared surface.subtle) and white. */
/* 2026-11-05 (REQ-072): the top page runs services (white) → mission summary (pale green) → news (white, its category chips are pale green) → company (pale green).
   On sub pages every section is white unless it is a band (.sub-page .section / .section--band below). */
.mission-summary, .company { background: var(--om-sys-color-surface-subtle); }
.services, .news { background: var(--om-sys-color-surface-default); }
/* 2026-10-16: services are two cards, each with one button; on wide screens they sit side by side at the same height. */
.service-list { display: grid; gap: var(--om-sys-layout-flow-text); }
.service-card { display: flex; flex-direction: column; align-items: flex-start; gap: var(--om-sys-layout-flow-related); padding: var(--om-sys-space-24); border-radius: var(--om-sys-radius-surface); background: var(--om-sys-color-surface-subtle); }
.service-card h3 { font-size: var(--om-sys-type-subheading-size); }
.service-card p { margin-bottom: var(--om-sys-layout-flow-related); color: var(--om-sys-color-text-secondary); font-size: var(--om-sys-type-body-small-size); line-height: 1.8; }
.service-card__action { gap: var(--om-sys-space-12); margin-top: auto; border-radius: var(--om-sys-radius-navigation); }
/* 2026-10-17 (REQ-037): the card copy left a lone "ます。" line at 1086px; balance the lines on wide screens (kept for the short copy restored on 2026-11-05, REQ-072). */
@media (min-width: 1024px) { .service-card p { text-wrap: balance; } }
/* 2026-11-05 (REQ-070, approved 2026-10-22; REQ-072 moved it to /about/ as its own section): "私たちの技術" lists four items under the section heading.
   Its items are not cards and have no rules (rules are only for the company table and news); whitespace from the shared
   flow steps separates them: item heading → text tight, items text (block in two columns). */
.tech-list { display: grid; gap: var(--om-sys-layout-flow-text); margin: 0; padding: 0; list-style: none; }
.tech-list li { display: grid; align-content: start; gap: var(--om-sys-layout-flow-tight); }
.tech-list h3 { margin: 0; } /* the rest is shared with the /corporate-website/ item headings below */
.tech-list p { color: var(--om-sys-color-text-secondary); font-size: var(--om-sys-type-body-small-size); line-height: 1.8; }
@media (min-width: 1024px) { .tech-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--om-sys-layout-flow-block); } }
/* News (filled in at build time from the CMS): date and category above the title.
   2026-10-17 (REQ-036): each item gets 20px above and below, with a thin line between items. */
.news-list { display: grid; margin: 0; padding: 0; list-style: none; }
.news-item { display: grid; gap: var(--om-sys-space-4) var(--om-sys-space-24); align-items: center; padding-block: var(--om-sys-space-20); }
.news-item + .news-item { border-top: var(--om-sys-border-width-default) solid var(--om-sys-color-border-decorative); padding-top: calc(var(--om-sys-space-20) - var(--om-sys-border-width-default)); }
/* 2026-10-17 (REQ-037): the distance from one divider to the next must be a whole number of device pixels, or each divider lands
   at a different sub-pixel offset and blends into its neighbours differently (one looks gray, the next green) on 1.25x/1.5x/zoomed screens.
   So every item is a multiple of 4px tall: 20 + 24 (date row; the 12px x 1.8 tag made it 21.6px) + 4 + title lines of 24px (at least 44) + 20,
   and the divider takes its 1px out of the top padding instead of adding it. */
.news-item__meta { min-height: 24px; }
.news-item__date { color: var(--om-sys-color-text-secondary); font-family: Arial, Helvetica, var(--om-sys-type-title-family); font-size: var(--om-sys-type-label-size); font-weight: var(--om-sys-font-weight-semibold); letter-spacing: 0.04em; }
.news-item__link { display: inline-flex; align-items: center; justify-self: start; min-height: var(--om-sys-density-target); font-size: var(--om-sys-type-body-size); line-height: 24px; }
.news-empty { color: var(--om-sys-color-text-secondary); }
.news__more { display: inline-flex; align-items: center; gap: var(--om-sys-space-12); margin-top: var(--om-sys-layout-flow-block); font-size: var(--om-sys-type-body-small-size); font-weight: var(--om-sys-font-weight-semibold); }
.news-page__inner, .news-article__inner { max-width: 45rem; }
.news-article__date { margin-bottom: var(--om-sys-space-8); color: var(--om-sys-color-text-secondary); font-family: Arial, Helvetica, var(--om-sys-type-title-family); font-size: var(--om-sys-type-body-small-size); }
.sub-page .news-article h1 { line-height: 1.4; }
/* 2026-11-05 (REQ-066): article and policy text flow with margins instead of one grid gap, so a heading sits closer to its own text
   (related 16) than to what comes before it (group 48 for h2, block 32 for h3/h4), and blocks keep text 24 between them.
   :not(:first-child) lifts these above the element resets (ul/figure/pre margin: 0). A heading right after a larger heading also
   stays related; a heading after an equal or smaller one keeps its own space above. */
.news-article__body { display: flow-root; line-height: 1.8; }
:is(.news-article__body, .policy-body) > :not(:first-child) { margin-top: var(--om-sys-layout-flow-text); }
:is(.news-article__body, .policy-body) > h2:not(:first-child) { margin-top: var(--om-sys-layout-flow-group); }
.news-article__body > :is(h3, h4):not(:first-child) { margin-top: var(--om-sys-layout-flow-block); }
:is(.news-article__body, .policy-body) > :is(h2, h3, h4) + :not(h2, h3, h4, :first-child), .news-article__body > h2 + :is(h3, h4):not(:first-child), .news-article__body > h3 + h4:not(:first-child) { margin-top: var(--om-sys-layout-flow-related); }
.policy-body > .policy-date { margin-top: var(--om-sys-layout-flow-group); }
/* 2026-10-16 (REQ-032): the category tag sits next to the date; the article body is rebuilt from the body written in the admin. */
.news-item__meta, .news-article__date { display: flex; flex-wrap: wrap; align-items: center; gap: var(--om-sys-space-8); }
.news-category { display: inline-block; padding: 0 var(--om-sys-space-8); border-radius: var(--om-sys-radius-pill); background: var(--om-sys-color-surface-subtle); color: var(--om-sys-color-text-primary); font-family: var(--om-sys-type-label-family); font-size: var(--om-sys-type-label-size); font-weight: var(--om-sys-font-weight-semibold); line-height: 1.8; letter-spacing: 0.02em; }
.news-article__body { overflow-wrap: anywhere; }
.news-article__body :is(h2, h3, h4) { margin-block: 0; color: var(--om-ref-color-ink); line-height: 1.5; }
.news-article__body h2 { font-size: var(--om-sys-type-heading-size); }
.news-article__body h3 { font-size: var(--om-sys-type-subheading-size); }
.news-article__body h4 { font-size: var(--om-sys-type-body-size); font-weight: var(--om-sys-font-weight-bold); }
.news-article__body :is(ul, ol) { margin: 0; padding-left: 1.5em; }
.news-article__body li + li, .news-article__body li > :is(ul, ol) { margin-top: var(--om-sys-space-4); }
.news-article__body blockquote { margin: 0; padding: var(--om-sys-space-8) var(--om-sys-space-16); border-left: 4px solid var(--om-sys-color-border-decorative); background: var(--om-sys-color-surface-subtle); color: var(--om-sys-color-text-secondary); }
.news-article__body code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9em; }
.news-article__body :not(pre) > code { padding: 0 var(--om-sys-space-4); border-radius: var(--om-sys-radius-small); background: var(--om-sys-color-surface-subtle); }
.news-article__body pre { margin: 0; padding: var(--om-sys-space-16); overflow-x: auto; border-radius: var(--om-sys-radius-navigation); background: var(--om-sys-color-surface-subtle); line-height: 1.6; overflow-wrap: normal; }
.news-article__body figure { margin: 0; }
.news-article__body img { display: block; max-width: 100%; height: auto; border-radius: var(--om-sys-radius-navigation); }
.news-article__body figcaption { margin-top: var(--om-sys-space-8); color: var(--om-sys-color-text-secondary); font-size: var(--om-sys-type-body-small-size); }
.news-article__body hr { width: 100%; margin-inline: 0; margin-bottom: 0; border: 0; border-top: var(--om-sys-border-width-default) solid var(--om-sys-color-border-decorative); }
.news-article__body table { width: 100%; border-collapse: collapse; font-size: var(--om-sys-type-body-small-size); }
.news-article__body :is(th, td) { padding: var(--om-sys-space-8) var(--om-sys-space-12); border-bottom: var(--om-sys-border-width-default) solid var(--om-sys-color-border-decorative); text-align: left; vertical-align: top; }
.news-article__body th { font-weight: var(--om-sys-font-weight-semibold); }
.news-article__body :is(th, td) > p + p { margin-top: var(--om-sys-space-8); }
.news-article__body a { color: var(--om-sys-color-text-link); text-decoration: underline; text-underline-offset: var(--om-sys-space-4); }
.news-article__body a:hover { color: var(--om-sys-color-text-link-hover); }
/* Alignment from the editor becomes these fixed classes (never inline style). */
.news-article__body .align-center { text-align: center; }
.news-article__body .align-right { text-align: right; }
.news-article__body figure.align-center img { margin-inline: auto; }
.news-article__body figure.align-right img { margin-left: auto; }
/* The mission heading is the one large statement (the full mission on /about/, the short summary on the top page). */
:is(.about, .mission-summary) h2 { font-size: 28px; line-height: 1.35; }
/* 2026-11-05 (REQ-072): /about/ opens with its page heading only. The mission (white) follows, so the head ends at flow.group
   and the mission starts at flow.group (the sub-page rule for two white sections): 96px between them, like one section space. */
.about-head .section-heading { margin-bottom: 0; }
/* 2026-11-05 (REQ-CORPORATE-SITE-073): the one- or two-sentence leads share their lines evenly instead of leaving 「更新する。」 or 「つくります。」 alone. */
:is(.about-head, .mission-summary) .section-introduction { text-wrap: balance; }
@media screen { .about-head { padding-bottom: var(--om-sys-layout-flow-group); } }
/* The technology lead is two long sentences in the large introduction size; keep its lines readable. */
/* 2026-11-05 (REQ-CORPORATE-SITE-074): the shorter lead left 「担当します。」 alone on a third line at 1280px; share the lines evenly like the other leads. */
.technology .section-introduction { max-width: 45rem; text-wrap: balance; }
.about-copy { min-width: 0; font-size: var(--om-sys-type-body-size); line-height: 1.8; }
.origin-copy { margin-top: var(--om-sys-layout-flow-group); }
.about-copy, .origin-copy { max-width: 44em; }
/* Mission statement: three paragraphs, then the company paragraph (2026-10-16: no sources or first goal on the page). */
.mission-statement { display: grid; gap: var(--om-sys-layout-flow-text); }
.mission-statement + p { margin-top: var(--om-sys-space-40); }
.origin-copy h3 { font-size: var(--om-sys-type-body-size); font-weight: var(--om-sys-font-weight-semibold); }
.origin-copy p { margin-top: var(--om-sys-layout-flow-tight); color: var(--om-sys-color-text-secondary); font-size: var(--om-sys-type-body-small-size); line-height: 1.8; }
.value-list { margin: 0; padding: 0; list-style: none; }
.value-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--om-sys-space-8); padding-block: var(--om-sys-space-24); }
/* Hierarchy inside a value: large quiet number → small term label → strong statement → body. */
.value-row__number { display: block; color: var(--om-sys-color-text-secondary); font-family: Arial, Helvetica, var(--om-sys-type-title-family); font-size: var(--om-sys-type-title-size); font-weight: var(--om-sys-font-weight-regular); line-height: 1; letter-spacing: 0.02em; }
.value-row__heading { min-width: 0; }
.value-row__body { display: grid; gap: var(--om-sys-space-12); min-width: 0; color: var(--om-sys-color-text-secondary); font-size: var(--om-sys-type-body-small-size); line-height: 1.8; }
/* 2026-10-16: values are three panels of the same shape (number, term, body); side by side on wide screens.
   2026-11-05 (REQ-072): the same panels hold the full values on /about/ and the names with their slogans in the top page summary;
   both sit on a pale green band, so the panels are white. */
:is(.values, .mission-summary) .value-list { display: grid; gap: var(--om-sys-layout-flow-text); }
:is(.values, .mission-summary) .value-row { display: flex; flex-direction: column; gap: var(--om-sys-space-8); padding: var(--om-sys-space-24); border-radius: var(--om-sys-radius-surface); background: var(--om-sys-color-surface-default); }
:is(.values, .mission-summary) .value-row__number { font-size: var(--om-sys-type-heading-size); line-height: 1.2; }
:is(.values, .mission-summary) .value-row h3 { color: var(--om-ref-color-ink); font-size: var(--om-sys-type-subheading-size); font-weight: var(--om-sys-font-weight-bold); }
:is(.values, .mission-summary) .value-row__body { margin-top: var(--om-sys-space-8); }
/* 2026-11-10 (REQ-CORPORATE-SITE-077): each value paragraph opens with its slogan as a bold line in the body ink, then the quieter explanation.
   2026-11-11 (REQ-CORPORATE-SITE-082): the values heading on /about/ has a one-line introduction again, so the heading group keeps the shared flow.group gap
   (flow.block below 600px, like the other /about/ sections). */
.value-row__lead { display: block; margin-bottom: var(--om-sys-space-4); color: var(--om-ref-color-ink); font-size: var(--om-sys-type-body-size); font-weight: var(--om-sys-font-weight-bold); line-height: 1.6; }
/* The summary's one button to /about/ sits below the panels (list → button: flow.block). */
.mission-summary__action { display: flex; width: fit-content; gap: var(--om-sys-space-12); margin-top: var(--om-sys-layout-flow-block); border-radius: var(--om-sys-radius-navigation); }
/* 2026-11-05 (REQ-CORPORATE-SITE-074): /about/ was too long on phones. Below 600px it steps each gap down one shared flow step
   (heading → content and the mission's inner breaks 48/40 → block 32, value panels and list gaps 24 → related 16).
   The page head and the mission (two white sections) meet at 32 + 32 = one compact section space. Text size, line height and gutters stay. */
@media screen and (max-width: 599px) {
  :is(.about, .values, .technology) .section-heading { margin-bottom: var(--om-sys-layout-flow-block); }
  .about-head { padding-bottom: var(--om-sys-layout-flow-block); }
  .sub-page .section.about-head + .section.about:not(.section--band) { padding-top: var(--om-sys-layout-flow-block); }
  .mission-statement + p, .origin-copy { margin-top: var(--om-sys-layout-flow-block); }
  .values .value-list, .technology .tech-list { gap: var(--om-sys-layout-flow-related); }
  .values .value-row { padding: var(--om-sys-layout-flow-related); }
}
/* Draft placeholders stay visibly marked until the value is decided. */
.tbd { padding-inline: var(--om-sys-space-4); border-radius: var(--om-sys-radius-small); background: var(--om-sys-color-status-warning-background); color: var(--om-sys-color-status-warning-foreground); font-weight: var(--om-sys-font-weight-semibold); }
.process-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 176px), 1fr)); gap: var(--om-sys-space-32) var(--om-sys-space-24); margin: 0; padding: 0; list-style: none; }
.process-steps li { display: grid; align-content: start; gap: var(--om-sys-space-8); }
/* 2026-11-11 (REQ-CORPORATE-SITE-087): each step is the number, the title and one description. A thin rule under the number
   separates it from the title, so the steps read as structured cards without the former request block. */
.process-steps__number { padding-bottom: var(--om-sys-space-12); border-bottom: var(--om-sys-border-width-default) solid var(--om-sys-color-border-decorative); color: var(--om-sys-color-text-secondary); font-family: Arial, Helvetica, var(--om-sys-type-title-family); font-size: var(--om-sys-type-title-size); line-height: 1; }
.process-steps__number + h3 { margin-top: var(--om-sys-space-4); }
.process-steps h3 { font-size: var(--om-sys-type-body-size); }
.process-steps p { color: var(--om-sys-color-text-secondary); font-size: var(--om-sys-type-body-small-size); line-height: 1.8; }
.process-duration { margin-top: var(--om-sys-space-40); }
/* 2026-11-11 (REQ-CORPORATE-SITE-083): the maintenance plans are three cards like the production plans (same .plan-list columns),
   no longer a table. On the white maintenance section the cards are pale panels; the included time is the last line, set off by a thin rule. */
.maintenance-list { margin-top: var(--om-sys-space-8); }
.maintenance-card { background: var(--om-sys-color-surface-subtle); }
.maintenance-card__list { display: grid; align-content: start; gap: var(--om-sys-space-4); margin: var(--om-sys-space-8) 0 0; padding-left: 1.25em; font-size: var(--om-sys-type-body-small-size); line-height: 1.8; list-style: disc; }
/* 2026-11-11 (REQ-CORPORATE-SITE-084): the report's contents sit one step in under its line, in the secondary text colour.
   2026-11-11 (REQ-CORPORATE-SITE-087): the mark is a small hollow circle, like a standard nested list (list-style: circle). It is drawn with
   ::before, not ::marker, so iPhone Safari shows the same mark, and with a border, not a background, so it stays visible in forced colours.
   Its centre sits a little above the middle of the 1.8 line box, at the visual middle of the Japanese glyphs. */
.maintenance-card__sublist { display: grid; gap: 2px; margin: var(--om-sys-space-4) 0 0; padding-left: 1em; color: var(--om-sys-color-text-secondary); list-style: none; }
.maintenance-card__sublist li { --sublist-dot: 0.4em; position: relative; padding-left: 0.9em; }
.maintenance-card__sublist li::before { content: ""; position: absolute; top: calc(0.85em - var(--sublist-dot) / 2); left: 0; box-sizing: border-box; width: var(--sublist-dot); height: var(--sublist-dot); border: 1px solid currentColor; border-radius: 50%; }
/* The included time closes every card, set off by a thin rule. */
.maintenance-card__time { margin-top: var(--om-sys-space-8); padding-top: var(--om-sys-space-12); border-top: var(--om-sys-border-width-default) solid var(--om-sys-color-border-decorative); font-size: var(--om-sys-type-body-small-size); font-weight: var(--om-sys-font-weight-semibold); line-height: 1.8; }
/* Side by side, the five parts of the three cards share rows (subgrid), so the lists start together and the included-time rules line up. */
@media (min-width: 1024px) {
  .plan-card.maintenance-card { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: var(--om-sys-space-8); }
  .maintenance-card__list, .maintenance-card__time { margin-top: 0; }
}
.plan-notes { display: grid; gap: var(--om-sys-space-4); margin: var(--om-sys-space-24) 0 0; padding-left: 1.5em; color: var(--om-sys-color-text-secondary); font-size: var(--om-sys-type-body-small-size); line-height: 1.8; }
/* Sub pages (contact form, LP) share the header and type but use a plain flow without the photo hero. */
.sub-page main :is(h1, h2, h3) { color: var(--om-ref-color-ink); }
.sub-page h1 { font-size: var(--om-sys-type-title-size); }
/* 2026-11-05 (REQ-CORPORATE-SITE-073): below 360px a one-phrase title (「プライバシーポリシー」「送信できませんでした」) does not fit at 32px; use the 24px heading size there. */
@media (max-width: 359px) { .sub-page:not(.lp-page) h1 { font-size: var(--om-sys-type-heading-size); } }
.sub-page .section { background: var(--om-sys-color-surface-default); }
/* 明るい面のフッター（下層ページと404。404はsub-pageでないため、bodyのclassによらない。2026-10-17） */
.site-footer.site-footer--plain { color: var(--om-sys-color-text-primary); }
.site-footer.site-footer--plain :is(.site-footer__lead, .footer-nav__heading, .site-footer__copyright) { color: var(--om-sys-color-text-secondary); }
.contact-form-page__inner, .policy-page__inner { max-width: 45rem; }
.policy-body { line-height: 1.8; }
.policy-body h2 { font-size: var(--om-sys-type-subheading-size); }
.policy-body ul { margin: 0; padding-left: 1.5em; }
.policy-date { color: var(--om-sys-color-text-secondary); font-size: var(--om-sys-type-body-small-size); }
/* Decoy field for bots: off-screen and out of the tab order, never shown to people. */
.form-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
/* 結果だけの短いページ（送信完了・送信できなかったとき）は、フッターを画面の下端に置き、下に余った帯を出さない（2026-11-05） */
body:has(.result-page) { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
body:has(.result-page) > main { flex: 1 0 auto; background: var(--om-sys-color-surface-default); }
.result-page__inner { display: grid; justify-items: start; max-width: 45rem; line-height: 1.8; }
/* 2026-11-05 (REQ-066): heading → text 24, a small note right under its text (8), then the button set apart (32). */
.result-page__inner > :not(:first-child) { margin-top: var(--om-sys-layout-flow-text); }
.result-page__inner > .eyebrow + * { margin-top: 0; }
.result-page__inner > .form-field__hint { margin-top: var(--om-sys-layout-flow-tight); }
.result-page__inner > .om-button { margin-top: var(--om-sys-layout-flow-block); }
.result-page__list { margin: 0; padding-left: 1.5em; color: var(--om-sys-color-status-danger-foreground); }
.contact-form { display: grid; gap: var(--om-sys-layout-flow-block); }
/* align-content: start：2列の行で隣の欄に説明があっても、欄の高さを伸ばさない（2026-11-05） */
.form-field { display: grid; align-content: start; gap: var(--om-sys-space-8); min-width: 0; margin: 0; padding: 0; border: 0; }
.form-field > label, .form-field > legend { padding: 0; font-size: var(--om-sys-type-body-small-size); font-weight: var(--om-sys-font-weight-semibold); }
.form-field > legend { margin-bottom: var(--om-sys-space-8); }
.form-field__required { margin-left: var(--om-sys-space-8); padding: 0 var(--om-sys-space-6); border-radius: var(--om-sys-radius-small); background: var(--om-sys-color-surface-subtle); color: var(--om-sys-color-text-secondary); font-size: var(--om-sys-type-label-size); font-weight: var(--om-sys-font-weight-semibold); }
.form-field__hint { color: var(--om-sys-color-text-secondary); font-size: var(--om-sys-type-body-small-size); line-height: 1.8; }
.form-choices { display: grid; gap: var(--om-sys-space-4); }
.form-choices label, .form-consent label { display: flex; align-items: center; gap: var(--om-sys-space-8); min-height: var(--om-sys-density-target); font-size: var(--om-sys-type-body-small-size); }
.contact-form input[type="radio"], .contact-form input[type="checkbox"] { inline-size: var(--om-sys-space-20); block-size: var(--om-sys-space-20); margin: 0; accent-color: var(--om-sys-color-focus-ring); }
.form-grid { display: grid; gap: var(--om-sys-layout-flow-block) var(--om-sys-layout-flow-text); }
.contact-form button[type="submit"] { justify-self: start; }
/* 送信できなかったときの知らせ（関数が返す入力画面の上。共通デザインの om-status の危険の色。2026-11-05） */
.contact-alert { margin-bottom: var(--om-sys-layout-flow-block); }
.contact-alert .om-status-label { margin: 0; color: inherit; font-size: var(--om-sys-type-body-size); line-height: inherit; }
.contact-alert .om-status-content > p { line-height: 1.8; }
.contact-alert ul { margin: var(--om-sys-space-8) 0 0; padding-left: 1.5em; line-height: 1.8; }
/* 知らせは開いたときに読み上げのためフォーカスを受ける（autofocus）が、押せるものではないので輪を描かない */
.contact-alert:focus { outline: none; }
/* 誤りのある種類・同意（ラジオ・チェックボックス）にも、入力欄の赤い枠線と同じ色の印を付ける */
.contact-form input:is([type="radio"], [type="checkbox"])[aria-invalid="true"] { outline: var(--om-sys-focus-width) solid var(--om-sys-color-status-danger-border); outline-offset: 2px; }
.lp-hero { padding-block: var(--om-sys-space-64); background: color-mix(in srgb, var(--om-sys-color-surface-canvas) 92%, var(--om-ref-color-sage) 8%); }
.lp-hero h1 { font-size: var(--om-sys-type-title-size); line-height: 1.35; }
.lp-hero__lead { max-width: 36em; margin-top: var(--om-sys-space-24); color: var(--om-sys-color-text-secondary); }
.lp-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--om-sys-space-16) var(--om-sys-space-24); margin-top: var(--om-sys-space-32); }
.lp-hero__sub, .lp-text-link { display: inline-flex; align-items: center; gap: var(--om-sys-space-12); font-size: var(--om-sys-type-body-small-size); font-weight: var(--om-sys-font-weight-semibold); }
.lp-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: var(--om-sys-space-24); margin: 0; padding: 0; list-style: none; }
.lp-cards li { display: grid; align-content: start; gap: var(--om-sys-layout-flow-related); padding: var(--om-sys-space-24); border-radius: var(--om-sys-radius-surface); background: var(--om-sys-color-surface-subtle); }
.lp-cards h3 { font-size: var(--om-sys-type-body-size); }
.lp-cards p, .lp-text { color: var(--om-sys-color-text-secondary); font-size: var(--om-sys-type-body-small-size); line-height: 1.8; }
.lp-text-link { margin-top: var(--om-sys-layout-flow-text); }
.faq-list { display: grid; gap: var(--om-sys-layout-flow-related); }
.faq-list details { padding: var(--om-sys-space-16) var(--om-sys-space-20); border-radius: var(--om-sys-radius-control); background: var(--om-sys-color-surface-subtle); }
/* 2026-11-11 (REQ-CORPORATE-SITE-086): each question starts with a small icon in the reasons/security style (28px pale green disc).
   The question flows as a paragraph with a hanging indent, so wrapped lines start under the text, not under the icon. The icon is
   set like the hero checks: its centre 0.38em above the baseline (the centre of kanji and kana), whatever the font's line spacing.
   The icon is the tallest thing on the first line, so the open/close chevron on the right is centred 8px + half the icon from the top;
   opening turns it upward with one transform (rotate and a small nudge), so nothing jumps before the rotation.
   The dash of the report sub-list is a top border, so it stays visible in forced-colours mode (backgrounds are dropped there).
   The card's side padding is 20px (was 24px) so the common one-line questions still fit on one line at 390px. */
.faq-list { --faq-icon-size: 28px; --faq-icon-gap: var(--om-sys-space-12); }
.faq-list summary { --faq-indent: calc(var(--faq-icon-size) + var(--faq-icon-gap)); position: relative; display: block; min-height: var(--om-sys-density-target); padding: var(--om-sys-space-8) var(--om-sys-space-24) var(--om-sys-space-8) var(--faq-indent); text-indent: calc(var(--faq-indent) * -1); font-weight: var(--om-sys-font-weight-semibold); line-height: 1.6; list-style: none; cursor: pointer; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: ""; position: absolute; top: calc(var(--om-sys-space-8) + var(--faq-icon-size) / 2 - 6px); right: var(--om-sys-space-4); width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform 0.2s ease; }
.faq-list details[open] > summary::after { transform: translateY(4px) rotate(-135deg); }
.faq-list__icon { display: inline-block; width: var(--faq-icon-size); height: var(--faq-icon-size); margin-right: var(--faq-icon-gap); padding: 5px; border-radius: var(--om-sys-radius-pill); background: var(--om-ref-color-sage); text-indent: 0; vertical-align: calc(0.38em - var(--faq-icon-size) / 2); }
.faq-list details p { margin-top: var(--om-sys-space-8); color: var(--om-sys-color-text-secondary); font-size: var(--om-sys-type-body-small-size); line-height: 1.8; }
/* 2026-10-17（REQ-CORPORATE-SITE-038）: セキュリティへの取り組み。カードはlp-cardsと同じ面で、番号を添える。
   2026-11-10（REQ-CORPORATE-SITE-080）: 5項目だけにし、小見出しと「行わないこと」の一覧は外した。カードを列に分けると、1〜2文の説明が
   細い列で何度も折れたので、項目は1列に積み、768px以上は1枚の中で番号・見出し・説明を横に並べる（/about/ の大切にしていることと同じ形）。 */
.security-list { grid-template-columns: minmax(0, 1fr); gap: var(--om-sys-layout-flow-related); }
/* 2026-11-11（REQ-CORPORATE-SITE-083）: 番号の代わりに、選ぶ理由と同じ形のアイコン（48pxの薄い緑の丸）を置く。 */
.security-list__icon { display: block; width: var(--om-sys-space-48); height: var(--om-sys-space-48); padding: var(--om-sys-space-12); border-radius: var(--om-sys-radius-pill); background: var(--om-ref-color-sage); }
.security-list h3, .tech-list h3 { color: var(--om-ref-color-ink); font-size: var(--om-sys-type-body-size); font-weight: var(--om-sys-font-weight-bold); line-height: 1.5; }
@media (min-width: 768px) {
  .security-list li { grid-template-columns: var(--om-sys-space-48) minmax(0, 2fr) minmax(0, 3fr); align-items: start; column-gap: var(--om-sys-space-24); }
  /* 見出しと説明の1行目を、アイコンの上下の中央にそろえる。 */
  .security-list li > h3 { margin-top: max(0px, calc((var(--om-sys-space-48) - 1.5em) / 2)); margin-top: max(0px, calc((var(--om-sys-space-48) - 1lh) / 2)); }
  .security-list li > p { margin-top: max(0px, calc((var(--om-sys-space-48) - 1.8em) / 2)); margin-top: max(0px, calc((var(--om-sys-space-48) - 1lh) / 2)); }
}
/* 1024px以上は見出しの列を狭め（1:2。一番長い見出しの約20字が1行に入る）、説明を長い行で読ませる。比で決めるので、文字を大きくしても説明の列がなくならない。 */
@media (min-width: 1024px) { .security-list li { grid-template-columns: var(--om-sys-space-48) minmax(0, 1fr) minmax(0, 2fr); column-gap: var(--om-sys-space-32); } }
/* 2026-10-19（REQ-CORPORATE-SITE-039）: 会社ホームページ制作のページをLPらしく作り直した。白と薄い緑の帯を交互にし、帯の上のカードは白い面にする。 */
.sub-page .section--band { background: var(--om-sys-color-surface-subtle); }
.section--band :is(.lp-cards li, .faq-list details, .reason-card, .plan-card, .process-steps li) { background: var(--om-sys-color-surface-default); }
.lp-hero__inner { display: grid; align-items: center; gap: var(--om-sys-space-40); }
.lp-hero__copy, .lp-hero__visual { min-width: 0; }
.lp-stats { display: grid; gap: var(--om-sys-space-8); margin: var(--om-sys-space-24) 0 0; }
.lp-stats__item { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--om-sys-space-4) var(--om-sys-space-12); min-width: 0; padding: var(--om-sys-space-12) var(--om-sys-space-16); border-radius: var(--om-sys-radius-surface); background: var(--om-sys-color-surface-default); }
.lp-stats dt { color: var(--om-sys-color-text-secondary); font-size: var(--om-sys-type-label-size); font-weight: var(--om-sys-font-weight-semibold); line-height: 1.5; }
.lp-stats dd { display: flex; flex-wrap: wrap; align-items: baseline; margin: 0; }
.lp-stats__value { color: var(--om-ref-color-ink); font-family: Arial, Helvetica, var(--om-sys-type-title-family); font-size: var(--om-sys-type-subheading-size); font-weight: var(--om-sys-font-weight-bold); line-height: 1.3; }
.lp-stats__note { color: var(--om-sys-color-text-secondary); font-size: var(--om-sys-type-label-size); }
.lp-points { display: grid; gap: var(--om-sys-space-8); margin: var(--om-sys-space-24) 0 0; padding: 0; list-style: none; font-size: var(--om-sys-type-body-small-size); font-weight: var(--om-sys-font-weight-semibold); line-height: 1.6; }
/* 2026-11-11（REQ-CORPORATE-SITE-083）: ✓の印は、薄い緑の丸と✓を1つにしたSVG（assets/icon-point-check.svg）を行の先頭に置く。
   前は CSS の丸を行の高さ（1lh）の中央に置いていたが、日本語の字体は上の余白が大きく（14pxで上14px・下5px）、漢字とかなの形の中心は
   行の中央より約0.9px上にある。さらに回したL字は角が下を向いて下に寄って見えた。印は基準線から 0.38em 上（漢字とかなの形の中心）に
   中心が来るよう vertical-align で置く。基準線を基にするので、字体の上下の余白の違いに左右されない。2行目以降は文字の左端にそろえる。 */
.lp-points li { padding-left: calc(var(--om-sys-space-20) + var(--om-sys-space-8)); text-indent: calc((var(--om-sys-space-20) + var(--om-sys-space-8)) * -1); }
.lp-points__icon { display: inline-block; width: var(--om-sys-space-20); height: var(--om-sys-space-20); margin-right: var(--om-sys-space-8); vertical-align: calc(0.38em - var(--om-sys-space-20) / 2); }
/* 2026-10-19（REQ-CORPORATE-SITE-040）: ファーストビューの見本の画面。パソコンとスマホの形の枠をCSSで描き、中に見本の画面の画像を入れる。 */
/* 左の余白はパソコンの台（::after）が枠の外へはみ出す16pxと同じ。右の余白はスマホの枠を重ねるため（REQ-042）。 */
.lp-showcase { position: relative; padding: 0 var(--om-sys-space-24) var(--om-sys-space-32) var(--om-sys-space-16); }
.lp-showcase__laptop { padding: var(--om-sys-space-8); border-radius: var(--om-sys-radius-surface) var(--om-sys-radius-surface) var(--om-sys-radius-small) var(--om-sys-radius-small); background: var(--om-sys-color-surface-inverse); box-shadow: var(--om-sys-elevation-floating-offset-x) var(--om-sys-elevation-floating-offset-y) var(--om-sys-elevation-floating-blur) var(--om-sys-elevation-floating-spread) var(--om-sys-elevation-floating-color); }
.lp-showcase__laptop::after { content: ""; display: block; height: var(--om-sys-space-12); margin: var(--om-sys-space-8) calc(var(--om-sys-space-8) * -3) calc(var(--om-sys-space-8) * -1); border-radius: 0 0 var(--om-sys-radius-surface) var(--om-sys-radius-surface); background: var(--om-sys-color-border-control); }
.lp-showcase__laptop img, .lp-showcase__phone img { display: block; width: 100%; height: auto; border-radius: var(--om-sys-radius-small); }
.lp-showcase__phone { position: absolute; right: 0; bottom: 0; width: 26%; min-width: 88px; padding: var(--om-sys-space-6); border-radius: calc(var(--om-sys-radius-surface) + var(--om-sys-radius-small)); background: var(--om-sys-color-surface-inverse); box-shadow: var(--om-sys-elevation-modal-offset-x) var(--om-sys-elevation-modal-offset-y) var(--om-sys-elevation-modal-blur) var(--om-sys-elevation-modal-spread) var(--om-sys-elevation-modal-color); }
.lp-showcase__phone img { border-radius: var(--om-sys-radius-control); }
/* 制作見本の区画（2026-10-19）。カードは画面の画像→業種の札→会社名→一文→見本へのリンク。 */
.sample-list { display: grid; gap: var(--om-sys-space-24); margin: 0; padding: 0; list-style: none; }
.sample-card { display: flex; flex-direction: column; gap: var(--om-sys-space-8); min-width: 0; padding: var(--om-sys-space-16) var(--om-sys-space-16) var(--om-sys-space-8); border: var(--om-sys-border-width-default) solid var(--om-sys-color-border-decorative); border-radius: var(--om-sys-radius-surface); background: var(--om-sys-color-surface-default); }
.sample-card__image { display: block; width: 100%; height: auto; margin-bottom: var(--om-sys-space-8); border: var(--om-sys-border-width-default) solid var(--om-sys-color-border-decorative); border-radius: var(--om-sys-radius-navigation); }
.sample-card__industry { align-self: flex-start; padding: 0 var(--om-sys-space-12); border-radius: var(--om-sys-radius-pill); background: var(--om-sys-color-surface-subtle); color: var(--om-sys-color-text-primary); font-size: var(--om-sys-type-label-size); font-weight: var(--om-sys-font-weight-semibold); line-height: 1.8; }
.sample-card h3 { font-size: var(--om-sys-type-subheading-size); }
.sample-card__body { color: var(--om-sys-color-text-secondary); font-size: var(--om-sys-type-body-small-size); line-height: 1.8; }
.sample-card__link { display: inline-flex; align-items: center; align-self: flex-start; gap: var(--om-sys-space-12); min-height: 44px; margin-top: auto; font-size: var(--om-sys-type-body-small-size); font-weight: var(--om-sys-font-weight-semibold); }
.sample-note { margin-top: var(--om-sys-layout-flow-block); color: var(--om-sys-color-text-secondary); font-size: var(--om-sys-type-body-small-size); }
.sample-note a { margin-left: var(--om-sys-space-12); }
@media (min-width: 640px) and (max-width: 1023px) {
  .sample-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-auto-rows: min-content; align-content: start; column-gap: var(--om-sys-space-24); padding-bottom: var(--om-sys-space-16); }
  .sample-card__image { grid-row: 1 / span 4; margin-bottom: 0; }
  .sample-card > :not(.sample-card__image) { grid-column: 2; }
  .sample-card__industry { justify-self: start; }
  .sample-card__link { justify-self: start; margin-top: 0; }
}
@media (forced-colors: active) { .lp-showcase__laptop, .lp-showcase__phone { border: 1px solid CanvasText; } }
.problem-list { grid-template-columns: minmax(0, 1fr); }
.lp-solution { margin-top: var(--om-sys-space-32); color: var(--om-ref-color-ink); font-size: var(--om-sys-type-subheading-size); font-weight: var(--om-sys-font-weight-bold); line-height: 1.6; text-wrap: balance; }
.reason-list, .plan-list { display: grid; gap: var(--om-sys-space-24); margin: 0; padding: 0; list-style: none; }
.reason-card { display: flex; flex-direction: column; gap: var(--om-sys-space-12); min-width: 0; padding: var(--om-sys-space-24); border-radius: var(--om-sys-radius-surface); }
/* 2026-11-11 (REQ-CORPORATE-SITE-082): the "image coming" placeholders became our own flat SVG drawings (16:9, transparent);
   the pale panel and the rounded corners come from here so they follow the tokens. */
.reason-card__image { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: var(--om-sys-radius-surface); background: var(--om-sys-color-surface-subtle); }
.reason-card__heading { display: flex; align-items: center; justify-content: space-between; margin-top: var(--om-sys-space-8); }
.reason-card__icon { display: block; width: var(--om-sys-space-48); height: var(--om-sys-space-48); padding: var(--om-sys-space-12); border-radius: var(--om-sys-radius-pill); background: var(--om-ref-color-sage); }
.reason-card__number { color: var(--om-sys-color-text-secondary); font-family: Arial, Helvetica, var(--om-sys-type-title-family); font-size: var(--om-sys-type-heading-size); line-height: 1; }
.reason-card h3 { font-size: var(--om-sys-type-subheading-size); }
.reason-card__body { color: var(--om-sys-color-text-secondary); font-size: var(--om-sys-type-body-small-size); line-height: 1.8; }
.reason-list + .lp-text-link { margin-top: var(--om-sys-layout-flow-block); }
/* 本文の中の相談（選ぶ理由・料金・進め方の最後）。 */
.lp-inline-cta { display: grid; justify-items: center; gap: var(--om-sys-space-12); margin-top: var(--om-sys-space-48); text-align: center; }
.lp-inline-cta p { color: var(--om-sys-color-text-secondary); font-size: var(--om-sys-type-body-small-size); }
.plan-card { display: flex; flex-direction: column; gap: var(--om-sys-space-8); min-width: 0; padding: var(--om-sys-space-24); border-radius: var(--om-sys-radius-surface); }
.plan-card h3 { font-size: var(--om-sys-type-subheading-size); }
.plan-card__audience { color: var(--om-sys-color-text-secondary); font-size: var(--om-sys-type-label-size); line-height: 1.6; }
.plan-card__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--om-sys-space-4); margin-top: var(--om-sys-space-8); }
.plan-card__amount { color: var(--om-ref-color-ink); font-family: Arial, Helvetica, var(--om-sys-type-title-family); font-size: var(--om-sys-type-title-size); font-weight: var(--om-sys-font-weight-bold); line-height: 1.2; }
.plan-card__tax { color: var(--om-sys-color-text-secondary); font-size: var(--om-sys-type-label-size); }
.plan-card__body { margin-bottom: var(--om-sys-space-8); font-size: var(--om-sys-type-body-small-size); line-height: 1.8; }
/* 2026-11-10（REQ-CORPORATE-SITE-080）: 全プランに共通の項目は、カードから group（48px）離した1つの面にまとめ、行で並べる。
   カードの3列に合わせた3列にすると、プランごとの中身に見えたため。1024px以上はラベルを左、項目を右に置き、狭い幅は縦に積む。
   面は塗らずに線で囲み、白く塗ったプランのカードと形を変える（スマホで縦に積んだとき、4つ目のプランに見えないように）。 */
.price-common { min-width: 0; margin-top: var(--om-sys-layout-flow-group); padding: var(--om-sys-space-24); border: var(--om-sys-border-width-default) solid var(--om-sys-color-border-control); border-radius: var(--om-sys-radius-surface); }
.price-common h3 { font-size: var(--om-sys-type-subheading-size); }
.price-common__rows { margin: var(--om-sys-space-8) 0 0; }
.price-common__row:last-child { padding-bottom: 0; border-bottom: 0; } /* the box border closes the block; no extra line under the last row */
.price-common__row { display: grid; gap: var(--om-sys-layout-flow-tight); padding-block: var(--om-sys-space-16); border-bottom: var(--om-sys-border-width-default) solid var(--om-sys-color-border-decorative); }
.price-common__row dt { font-size: var(--om-sys-type-body-small-size); font-weight: var(--om-sys-font-weight-bold); line-height: 1.8; }
.price-common__row dd { min-width: 0; margin: 0; }
.price-common__row ul { margin: 0; padding-left: 1.25em; color: var(--om-sys-color-text-secondary); font-size: var(--om-sys-type-body-small-size); line-height: 1.8; }
@media (min-width: 1024px) {
  .price-common { padding: var(--om-sys-space-32); }
  .price-common__row { grid-template-columns: 12em minmax(0, 1fr); gap: var(--om-sys-space-32); }
}
.section--band .process-steps li { padding: var(--om-sys-space-20); border-radius: var(--om-sys-radius-surface); }
/* 2026-11-11 (REQ-CORPORATE-SITE-087): from 640px up to 1199px, five columns are too narrow (the description wraps every few characters
   and the short steps look empty), so each step is one row: the number on the left, set off by a thin vertical rule, the title and the
   description on the right. Five columns from 1200px; stacked cards below 640px. */
@media (min-width: 640px) and (max-width: 1199px) {
  .process-steps { grid-template-columns: 1fr; gap: var(--om-sys-space-12); }
  .process-steps li { grid-template-columns: 3.5rem minmax(0, 1fr); column-gap: var(--om-sys-space-20); row-gap: var(--om-sys-space-4); }
  .process-steps__number { grid-row: 1 / span 2; align-self: stretch; padding-bottom: 0; border-bottom: 0; border-right: var(--om-sys-border-width-default) solid var(--om-sys-color-border-decorative); }
  .process-steps__number + h3 { margin-top: 0; }
}
/* スマホの下の相談の帯（768px未満だけ）。帯の高さの分、ページの下に余白を足す。チャットボットの開くボタンは帯の右端に置く（2026-11-05から）。 */
.lp-sticky-cta { display: none; }
/* 帯の高さはrem（ボタン2.75rem〔共通の大きいボタン、2026-11-05に3.5remから3rem、2026-11-10に2.75rem〕＋上下0.75rem×2＋線）で決め、文字を大きくしても帯と余白が一緒に伸びる。ボタンの文字は1行に保つ。
   帯の内側の余白（--lp-cta-bar-inset-*）は、帯の中に置く開くボタンの位置にも使い、ずれないようにする。 */
@media (max-width: 767px) {
  :root:has(.lp-page) { --lp-cta-bar-inset-block: var(--om-sys-space-12); --lp-cta-bar-inset-inline: var(--om-sys-space-16); --lp-cta-bar-height: calc(var(--om-sys-density-control-large) + var(--lp-cta-bar-inset-block) * 2 + var(--om-sys-border-width-default)); scroll-padding-bottom: var(--lp-cta-bar-height); }
  .lp-page { padding-bottom: calc(var(--lp-cta-bar-height) + env(safe-area-inset-bottom, 0px)); }
  .lp-sticky-cta { position: fixed; right: 0; bottom: 0; left: 0; z-index: var(--om-sys-layer-sticky); display: block; padding: var(--lp-cta-bar-inset-block) var(--lp-cta-bar-inset-inline) calc(var(--lp-cta-bar-inset-block) + env(safe-area-inset-bottom, 0px)); border-top: var(--om-sys-border-width-default) solid var(--om-sys-color-border-decorative); background: var(--om-sys-color-surface-default); }
  .lp-sticky-cta .site-cta { width: 100%; min-height: var(--om-sys-density-control-large); justify-content: center; padding-inline: var(--om-sys-space-16); white-space: nowrap; }
  /* 2026-11-05（REQ-CORPORATE-SITE-067）: 開くボタン（767px以下は大きいボタンの高さの丸。2026-11-10から44px）は帯の右端に空けた場所に置き、本文の上に浮かせない。
     帯の分の余白で最後の中身は見えるので、フッターの下に開くボタンの分の余白を足さない。 */
  .has-chat .lp-sticky-cta { padding-inline-end: calc(var(--lp-cta-bar-inset-inline) + var(--om-sys-density-control-large) + var(--om-sys-space-12)); }
  .lp-page .chat { right: var(--lp-cta-bar-inset-inline); bottom: calc(var(--lp-cta-bar-inset-block) + env(safe-area-inset-bottom, 0px)); }
  .has-chat .lp-page .site-footer--plain { padding-bottom: 0; }
  .chat-open .lp-sticky-cta { display: none; }
}
@media (min-width: 640px) {
  .lp-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lp-stats__item { flex-direction: column; align-items: flex-start; justify-content: flex-start; }
  .lp-stats dd { flex-direction: column; }
  .problem-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-solution { text-align: center; }
}

@media (min-width: 1024px) {
  .lp-hero__inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--om-sys-space-64); }
  .lp-stats__value { font-size: var(--om-sys-type-heading-size); }
  .problem-list, .reason-list, .plan-list, .sample-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* 強制配色でも、アイコンの丸い面を残して線を見せる（アイコンは装飾で、見出しが意味を伝える）。 */
@media (forced-colors: active) {
  .reason-card__icon, .security-list__icon, .faq-list__icon { forced-color-adjust: none; }
}
@media print {
  .lp-sticky-cta { display: none; }
  .lp-page { padding-bottom: 0; }
}
.lp-cta { background: var(--om-ref-color-sage-strong); color: var(--om-sys-color-text-inverse); }
.sub-page .lp-cta h2 { color: inherit; }
.lp-cta p { max-width: 36em; margin-block: var(--om-sys-space-16) var(--om-sys-space-32); color: var(--om-sys-color-text-secondary-inverse); }
.company-table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.company-table th, .company-table td { padding-block: var(--om-sys-space-16); padding-inline: 0 var(--om-sys-space-16); border-top: var(--om-sys-border-width-default) solid var(--om-sys-color-border-decorative); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.company-table tr:last-child th, .company-table tr:last-child td { border-bottom: var(--om-sys-border-width-default) solid var(--om-sys-color-border-decorative); }
.company-table th { width: 25%; color: var(--om-sys-color-text-secondary); font-size: var(--om-sys-type-body-small-size); font-weight: var(--om-sys-type-subheading-weight); }
.company-table td { padding-inline-end: 0; }
.company-email { display: inline-flex; align-items: center; min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.company-email { margin-block: calc(var(--om-sys-space-8) * -1); }
/* 2026-10-29 (REQ-058): the closing section uses the strong green, laid at 72% over the leaves so they stay faintly visible. */
.closing-surface { background-color: var(--om-ref-color-sage-strong); background-image: linear-gradient(color-mix(in srgb, var(--om-ref-color-sage-strong) 72%, transparent), color-mix(in srgb, var(--om-ref-color-sage-strong) 72%, transparent)), url('/assets/contact-foliage.jpg'); background-repeat: no-repeat; background-position: center; background-size: cover; color: var(--om-sys-color-text-inverse); }
.contact, .site-footer { background: transparent; color: var(--om-sys-color-text-inverse); }
.contact__inner { display: grid; align-items: center; gap: var(--om-sys-space-24); }
.contact .section-heading { margin: 0; }
.contact .eyebrow { color: var(--om-sys-color-text-secondary-inverse); }
.contact__copy { max-width: 38em; margin-top: var(--om-sys-space-16); color: var(--om-sys-color-text-secondary-inverse); font-size: var(--om-sys-type-body-size); line-height: 1.8; }
.contact__actions { display: flex; flex-direction: column; align-items: flex-start; gap: var(--om-sys-space-4); }
/* 2026-11-10 (REQ-CORPORATE-SITE-075): the footer groups its links under small labels so it reads at a glance.
   Below 768px: brand -> the groups in two columns -> bottom row. From 768px: brand on the left, the three groups on the right.
   The links are plain text links; each 44px row is the touch target, so rows sit flush instead of spaced-out pills.
   Phones start the footer one step closer (flow.block) to keep the long pages short. */
.site-footer__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--om-sys-layout-flow-block); padding-block: var(--om-sys-layout-flow-group) var(--om-sys-layout-flow-text); }
.site-footer__about { display: grid; align-content: start; gap: var(--om-sys-layout-flow-tight); min-width: 0; }
.site-footer__brand { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--om-sys-space-4) var(--om-sys-space-12); font-size: var(--om-sys-type-label-size); }
.site-footer__wordmark { font-family: Arial, Helvetica, var(--om-sys-type-subheading-family); font-size: var(--om-sys-type-subheading-size); font-weight: var(--om-sys-font-weight-bold); }
.site-footer__lead { max-width: 20em; color: var(--om-sys-color-text-secondary-inverse); font-size: var(--om-sys-type-body-small-size); line-height: 1.7; }
/* Phones: 会社 fills the left column; サービス and お問い合わせ stack in the right one, sized to its longest link (both shrink and wrap only when the text is enlarged)
   (「Web アプリケーション開発」 stays on one line down to 320px). */
.footer-nav { display: grid; grid-template-columns: minmax(0, max-content) minmax(0, max-content); justify-content: start; gap: var(--om-sys-layout-flow-text) var(--om-sys-layout-flow-block); }
.footer-nav__group { min-width: 0; }
.footer-nav__group:first-child { grid-row: span 2; }
.footer-nav__heading { color: var(--om-sys-color-text-secondary-inverse); font-size: var(--om-sys-type-label-size); font-weight: var(--om-sys-font-weight-semibold); line-height: 1.5; }
.footer-nav__list { margin: 0; padding: 0; list-style: none; }
.footer-nav__link { display: inline-flex; align-items: center; min-width: var(--om-sys-density-target); color: inherit; font-size: var(--om-sys-type-body-small-size); line-height: 1.5; text-decoration: none; }
.footer-nav__link:hover, .footer-nav__link:active { color: inherit; text-decoration: underline; }
/* The bottom row is the small print: no rule (the page separates by whitespace only), but the 12px secondary text sets it apart. */
.site-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; column-gap: var(--om-sys-layout-flow-text); }
.site-footer__bottom .footer-nav__link { color: var(--om-sys-color-text-secondary-inverse); font-size: var(--om-sys-type-label-size); }
.site-footer.site-footer--plain .site-footer__bottom .footer-nav__link { color: var(--om-sys-color-text-secondary); }
.site-footer__copyright { color: var(--om-sys-color-text-secondary-inverse); font-size: var(--om-sys-type-label-size); line-height: 1.5; }
@media (min-width: 768px) {
  .footer-nav { grid-template-columns: repeat(3, minmax(0, max-content)); column-gap: var(--om-sys-layout-flow-group); }
  .footer-nav__group:first-child { grid-row: auto; }
}
/* The brand column needs room for its one-line description, so it moves beside the groups only from 1024px. */
@media (min-width: 1024px) {
  .site-footer__inner { grid-template-columns: minmax(0, 1fr) minmax(0, auto); column-gap: var(--om-sys-layout-flow-group); }
  .site-footer__bottom { grid-column: 1 / -1; }
}
@media (max-width: 767px) { .site-footer__inner { padding-top: var(--om-sys-layout-flow-block); } }
@media (max-width: 359px) { .footer-nav { column-gap: var(--om-sys-layout-flow-related); } }
.error-page__main { padding-block: calc(var(--om-sys-space-64) * 2); }
.error-page__content { display: grid; justify-items: start; gap: var(--om-sys-layout-flow-text); }
.error-page__content > .om-button { margin-top: var(--om-sys-layout-flow-tight); } /* text 24 + tight 8 = block 32 before the button */
.error-page h1 { font-size: var(--om-sys-type-title-size); font-weight: var(--om-sys-type-title-weight); }
.error-page__code { color: var(--om-sys-color-text-secondary); font-size: var(--om-sys-type-label-size); font-weight: var(--om-sys-type-label-weight); }
/* 2026-10-17 (REQ-036): a following header must stay low on phones. Contact sits at the right of the wordmark row
   and the other three links share the next row (188px -> 108px). DOM order stays wordmark -> links -> contact. */
@media (max-width: 639px) {
  /* 2026-11-10 (REQ-078): 8px + the 44px wordmark row (+ 4px + the 44px link row) + 8px: 60px, or 108px with links. */
  :root { --site-header-height: calc(var(--om-sys-space-8) * 2 + var(--om-sys-density-target)); }
  :root:has(.site-header .site-nav) { --site-header-height: calc(var(--om-sys-space-8) * 2 + var(--om-sys-density-target) * 2 + var(--om-sys-space-4)); }
  .site-header__inner { position: relative; row-gap: var(--om-sys-space-4); min-height: 0; padding-block: var(--om-sys-space-8); }
  /* The links keep their 8px inner padding for the tap target; pull the row left so the first word lines up with the wordmark (2026-11-10, REQ-075). */
  .site-nav__list { display: flex; flex-wrap: wrap; gap: var(--om-sys-space-4); margin-inline-start: calc(var(--om-sys-space-8) * -1); }
  /* The 40px button sits in the middle of the 44px wordmark row. */
  .site-nav__list > li:last-child { position: absolute; top: calc(var(--om-sys-space-8) + (var(--om-sys-density-target) - var(--om-sys-density-control-default)) / 2); right: 0; }
  .site-nav a { width: auto; padding-inline: var(--om-sys-space-8); }
}
@media (min-width: 640px) {
  .site-nav { width: auto; }
  .site-nav__list { display: flex; flex-wrap: wrap; align-items: center; }
  .site-nav__list { gap: var(--om-sys-space-8); }
  .site-header__contact { padding-inline: var(--om-sys-space-24); }
  .hero { padding-top: calc(var(--om-sys-space-24) + var(--om-sys-space-4)); }
  .hero-copy { max-width: 60%; }
  /* 2026-11-10 (REQ-079): at most 48px (1280px). It was clamp(30px, 4.85vw, 72px), 62px at 1280px. */
  .hero h1 { font-size: clamp(32px, 3.75vw, 48px); }
  .hero__lead { font-size: clamp(16px, 1.85vw, 20px); line-height: 1.4; }
  h2 { font-size: var(--om-sys-type-title-size); }
  .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .section-introduction { font-size: var(--om-sys-type-subheading-size); }
  .contact__inner { grid-template-columns: minmax(0, 1.22fr) minmax(0, 1fr); gap: var(--om-sys-space-48); }
  .contact__actions { justify-self: start; }
  :is(.about, .mission-summary) h2 { font-size: clamp(28px, 3.4vw, 36px); }
  .value-row { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); grid-template-rows: auto 1fr; align-content: start; gap: var(--om-sys-space-8) var(--om-sys-space-24); }
  .value-row__number { grid-column: 1; grid-row: 1; }
  .value-row__heading { grid-column: 1; grid-row: 2; }
  .value-row__body { grid-column: 2; grid-row: 1 / span 2; }
}
@media (min-width: 1024px) {
  .section, .contact, .lp-cta { --band-space: var(--om-sys-layout-section-default); }
  .lp-hero { padding-block: var(--om-sys-space-96); }
  /* 2026-10-19（REQ-CORPORATE-SITE-044）: 2行目（2026-11-10からは「会社のホームページを」の10文字）が文字の列に収まるよう、列の幅に合わせて小さくする（最大48px）。 */
  .lp-hero__copy { container-type: inline-size; }
  .lp-hero h1 { font-size: min(48px, 8.9cqi); }
  :is(.values, .mission-summary) .value-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--om-sys-space-24); }
  .service-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--om-sys-space-24); }
  .value-row { grid-template-columns: var(--om-sys-space-64) minmax(0, 2fr) minmax(0, 3fr); grid-template-rows: auto; column-gap: var(--om-sys-space-32); }
  .value-row__heading { grid-column: 2; grid-row: 1; }
  .value-row__body { grid-column: 3; grid-row: 1; }
  .hero { min-height: calc(100vw * 917 / 1715); padding-block: calc(var(--om-sys-space-24) + var(--om-sys-space-4)) var(--om-sys-space-40); background-position: center top; background-size: cover; }
  .hero-copy { max-width: 60%; }
  /* 2026-11-10 (REQ-079): the shared 20px step under the 48px heading, on one line where it fits (it left 「会社です。」 alone on a second line). */
  .hero__lead { max-width: none; font-size: 20px; }
  .company-table th { width: 30%; }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .corporate-page .site-header .om-brand-name { font-size: 20px; }
  .site-nav a { font-size: 12px; }
  .site-header__contact { padding-inline: var(--om-sys-space-16); }
  .hero__eyebrow { margin-bottom: var(--om-sys-space-20); }
  .hero__eyebrow::after { margin-top: var(--om-sys-space-12); }
  .hero__lead { max-width: calc(100% - var(--om-sys-space-32)); font-size: var(--om-sys-type-body-small-size); margin-top: var(--om-sys-space-16); }
}
/* Shared rows keep the header in the photograph and reserve its actual height (2026-11-05, REQ-072: hero over two rows, then four sections). */
@supports (grid-template-rows: subgrid) {
  .corporate-page { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: min-content repeat(6, auto); }
  .corporate-page > .site-header { grid-column: 1; grid-row: 1; align-self: start; }
  .corporate-page > main { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: subgrid; grid-column: 1; grid-row: 1 / span 6; min-width: 0; }
  .corporate-page .hero { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: subgrid; grid-row: 1 / span 2; padding-top: 0; }
  .corporate-page .hero__inner { grid-row: 2; padding-top: calc(var(--om-sys-space-32) + var(--om-sys-space-4)); }
  .corporate-page > .closing-surface { grid-column: 1; grid-row: 7; }
  @media (min-width: 640px) {
    .corporate-page .hero__inner { padding-top: calc(var(--om-sys-space-24) + var(--om-sys-space-4)); }
  }
  @media (min-width: 640px) and (max-width: 1023px) {
    .corporate-page .hero__inner { padding-top: var(--om-sys-space-16); }
  }
  /* 2026-11-10 (REQ-079): without the two hero buttons the copy would sit at the top of a tall photograph and leave its lower half empty.
     From 1024px the photograph keeps its proportion (header bar + this row; the 24px bottom padding lies inside the row) and the copy sits
     in the middle of the row, a little above the true middle because of that padding. Narrower screens keep the copy at the top. */
  @media (min-width: 1024px) {
    .corporate-page { grid-template-rows: min-content minmax(calc(100vw * 917 / 1715 - var(--site-header-bar)), auto) repeat(5, auto); }
    .corporate-page .hero { padding-bottom: var(--om-sys-space-24); }
    .corporate-page .hero__inner { align-self: center; padding-top: 0; }
  }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .faq-list summary::after { transition: none; } }
@media (forced-colors: active) {
  .corporate-page, .corporate-page > main, .corporate-page .hero { display: block; }
  .corporate-page .hero__inner { padding-top: 0; }
  .hero, .closing-surface { background-image: none; }
  .hero { min-height: 0; padding-block: var(--om-sys-space-64); }
}
@media print {
  .corporate-page, .corporate-page > main, .corporate-page .hero { display: block; }
  .corporate-page .hero__inner { padding-top: 0; }
  .site-nav, .footer-nav, .om-skip-link { display: none; }
  .site-header { position: static; animation: none; box-shadow: none; }
  .hero, .section { min-height: 0; padding-block: var(--om-sys-space-32); }
  .hero { background-image: none; }
  .hero-copy { max-width: none; }
  .closing-surface, .contact, .site-footer { background: var(--om-sys-color-surface-default); color: var(--om-sys-color-text-primary); }
  .contact .eyebrow, .contact__copy, .site-footer__lead, .site-footer__copyright, .site-footer__bottom .footer-nav__link { color: var(--om-sys-color-text-secondary); }
  .contact__inner { display: block; }
  .contact__actions { margin-top: var(--om-sys-space-16); }
}

/* 選択式のチャットボット（2026-10-16、REQ-CORPORATE-SITE-033）。/assets/chat.js が body の最後に差し込む。JSが動かないときは何も出ない。 */
.chat { position: fixed; right: var(--om-sys-space-16); bottom: var(--om-sys-space-16); z-index: var(--om-sys-layer-dialog); }
.chat-launcher {
  /* Fixed over every section, including the strong green closing one, so it takes the light sage role everywhere (REQ-058). */
  --site-filled-background: var(--om-ref-color-sage);
  --site-filled-hover: var(--om-ref-color-action-hover);
  --site-filled-pressed: var(--om-ref-color-action-pressed);
  --site-filled-foreground: var(--om-sys-color-text-primary);
  border-color: var(--om-ref-color-sage-strong);
  min-height: var(--om-sys-density-control-large);
  padding-inline: var(--om-sys-space-20);
  border-radius: var(--om-sys-radius-pill);
  box-shadow: var(--om-sys-elevation-floating-offset-x) var(--om-sys-elevation-floating-offset-y) var(--om-sys-elevation-floating-blur) var(--om-sys-elevation-floating-spread) var(--om-sys-elevation-floating-color);
}
/* 共通のフォーカスの見え方（間の色の輪）を、浮かせる影より先に重ねる。 */
.chat-launcher:focus-visible { box-shadow: 0 0 0 var(--om-sys-focus-offset) var(--om-context-focus-gap, var(--om-sys-color-focus-gap)), var(--om-sys-elevation-floating-offset-x) var(--om-sys-elevation-floating-offset-y) var(--om-sys-elevation-floating-blur) var(--om-sys-elevation-floating-spread) var(--om-sys-elevation-floating-color); }
.chat-launcher[hidden], .chat-typing[hidden] { display: none; }
/* 吹き出しの形の印は疑似要素で描く（区切り線として数えられる枠を要素に持たせない）。 */
.chat-launcher__icon { position: relative; flex-shrink: 0; width: 18px; height: 16px; }
.chat-launcher__icon::before { content: ""; position: absolute; inset: 0 0 4px; border: 2px solid currentColor; border-radius: var(--om-sys-radius-small); }
.chat-launcher__icon::after { content: ""; position: absolute; left: 4px; bottom: 0; border-width: 5px 5px 0 0; border-style: solid; border-color: currentColor transparent transparent transparent; }
.chat-panel {
  position: fixed;
  inset: var(--om-sys-space-8);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: var(--om-sys-border-width-default) solid var(--om-sys-color-border-decorative);
  border-radius: var(--om-sys-radius-surface);
  background: var(--om-sys-color-surface-default);
  color: var(--om-sys-color-text-primary);
  box-shadow: var(--om-sys-elevation-modal-offset-x) var(--om-sys-elevation-modal-offset-y) var(--om-sys-elevation-modal-blur) var(--om-sys-elevation-modal-spread) var(--om-sys-elevation-modal-color);
}
.chat-panel:focus { outline: none; }
.chat-panel__header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--om-sys-space-12); padding: var(--om-sys-space-16); border-bottom: var(--om-sys-border-width-default) solid var(--om-sys-color-border-decorative); background: var(--om-sys-color-surface-subtle); }
.chat-panel__headings { min-width: 0; }
.chat-panel__title { font-size: var(--om-sys-type-subheading-size); line-height: var(--om-sys-type-subheading-line-height); }
/* 2026-10-17 (REQ-037): the close button shows only an x, drawn with two 2px border lines (visible in forced colors); its name is aria-label. */
.chat-panel__close { flex-shrink: 0; width: var(--om-sys-density-control-icon); min-width: var(--om-sys-density-control-icon); min-height: var(--om-sys-density-control-icon); padding: 0; }
.chat-panel__close-icon { position: relative; display: block; width: 16px; height: 16px; }
.chat-panel__close-icon::before, .chat-panel__close-icon::after { content: ""; position: absolute; top: 7px; left: -2px; width: 20px; border-top: 2px solid currentColor; border-radius: 1px; transform: rotate(45deg); }
.chat-panel__close-icon::after { transform: rotate(-45deg); }
.chat-panel__body { display: flex; flex: 1 1 auto; flex-direction: column; gap: var(--om-sys-space-12); min-height: 0; padding: var(--om-sys-space-16); overflow-y: auto; overscroll-behavior: contain; }
.chat-log { display: flex; flex-direction: column; gap: var(--om-sys-space-8); }
.chat-message {
  max-width: 88%;
  padding: var(--om-sys-space-8) var(--om-sys-space-12);
  /* 強制配色で吹き出しの境目を見せるため、透明な枠線を置く。 */
  border: var(--om-sys-border-width-default) solid transparent;
  border-radius: var(--om-sys-radius-surface);
  font-size: var(--om-sys-type-body-small-size);
  line-height: 1.7;
  overflow-wrap: anywhere;
  animation: chat-message-in var(--om-sys-motion-duration-standard) var(--om-sys-motion-easing-standard);
}
.chat-message--bot { align-self: flex-start; border-end-start-radius: var(--om-sys-radius-small); background: var(--om-sys-color-surface-subtle); }
.chat-message--user { align-self: flex-end; border-end-end-radius: var(--om-sys-radius-small); background: var(--om-ref-color-sage-strong); color: var(--om-ref-color-white); }
.chat-message__list { margin: 0; padding-inline-start: 1.25em; }
.chat-message__list li + li { margin-top: var(--om-sys-space-4); }
/* 2026-10-17 (REQ-037): one bubble may hold several paragraphs, a list and the links, stacked with 8px between them. */
.chat-message > * + * { margin-top: var(--om-sys-space-8); }
.chat-message__links { display: flex; flex-direction: column; align-items: flex-start; }
.chat-message__link { display: inline-flex; align-items: center; min-height: var(--om-sys-density-target); }
.chat-typing { display: flex; align-items: center; gap: var(--om-sys-space-8); align-self: flex-start; color: var(--om-sys-color-text-secondary); font-size: var(--om-sys-type-label-size); }
.chat-typing__dots { display: inline-flex; gap: var(--om-sys-space-4); }
.chat-typing__dots span { width: 6px; height: 6px; border-radius: var(--om-sys-radius-pill); background: currentColor; animation: chat-typing-dot 1s ease-in-out infinite; }
.chat-typing__dots span:nth-child(2) { animation-delay: 0.15s; }
.chat-typing__dots span:nth-child(3) { animation-delay: 0.3s; }
.chat-choices { display: flex; flex-direction: column; align-items: flex-end; gap: var(--om-sys-space-8); }
.chat-choices:empty { display: none; }
/* 2026-10-17 (REQ-037): a pill turns into a lens when the label wraps. The corner radius is half the 44px control height instead,
   so one line still has round ends and two or more lines read as a rounded box; the text starts at the left. */
.chat-choice { justify-content: flex-start; min-height: var(--om-sys-density-target); padding: 10px var(--om-sys-space-16); border-radius: calc(var(--om-sys-density-target) / 2); line-height: 1.5; text-align: start; }
/* 開くボタンの分だけフッターの下に余白を足し、最下部までスクロールしたときにフッターを隠さない（フッターの内側の上下24pxは変えない）。 */
.has-chat .closing-surface, .has-chat .site-footer--plain { padding-bottom: var(--om-sys-space-64); }
@keyframes chat-message-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes chat-typing-dot { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }
/* 2026-11-05（REQ-CORPORATE-SITE-067）: 767px以下では開くボタンを吹き出しの印だけの丸（大きいボタンの高さ。2026-11-10から44px）にし、本文に重なる面を小さくする。
   文字「ご質問はこちら」は見えなくするだけで残し、読み上げの名前にする（om-visually-hidden と同じ形）。
   本文の部分を画面の高さにする決まりは、すべての幅に広げたので下の @media screen の区画にある（2026-11-10）。 */
@media screen and (max-width: 767px) {
  .chat-launcher { width: var(--om-sys-density-control-large); min-width: var(--om-sys-density-control-large); padding: 0; justify-content: center; }
  .chat-launcher__label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
}
/* 2026-11-05（REQ-067）: 本文の部分を画面の高さ以上にし、短いページでも開いた直後の画面にフッター（右の列のリンク）を入れない。
   ヘッダーの実際の高さ（文字の大きさで変わる）に左右されないよう、ヘッダーの分は引かない。svhが使えないブラウザーはvhのまま（画面だけ。印刷では高さを足さない）。
   2026-11-10（REQ-075）: フッターのリンクは右の列にも並ぶので、パソコンでも同じにする（前は767px以下だけ）。chat.js が付ける has-chat を待つと、
   読み込みの後にフッターが下へずれるので、チャットボットを読み込むページ（head の script）で最初から伸ばす。 */
@media screen {
  :root:has(script[src="/assets/chat.js"]) main { min-height: 100vh; min-height: 100svh; }
  /* 下層ページの区画は白いので、伸ばした本文の部分も白くし、フッターの色の空いた帯に見せない（送信完了ページと同じ形）。 */
  :root:has(script[src="/assets/chat.js"]) .sub-page main { background: var(--om-sys-color-surface-default); }
}
@media (max-width: 639px) {
  /* スマートフォンでパネルを開いている間は、後ろのページをスクロールさせない。 */
  .chat-open body { overflow: hidden; }
}
@media (min-width: 640px) {
  .chat { right: var(--om-sys-space-24); bottom: var(--om-sys-space-24); }
  .chat-panel { inset: auto var(--om-sys-space-24) var(--om-sys-space-24) auto; width: min(380px, calc(100vw - var(--om-sys-space-48))); height: min(600px, calc(100dvh - var(--om-sys-space-48))); }
}
@media (prefers-reduced-motion: reduce) {
  .chat-message, .chat-typing__dots span { animation: none; }
}
@media print {
  .chat { display: none; }
}