:root {
  --ss-ivory: #fbf4ec;
  --ss-paper: #fffaf3;
  --ss-white: #fffdf9;
  --ss-sky: #cfe9e6;
  --ss-sky-soft: #e8f4f2;
  --ss-sky-strong: #78bbb7;
  --ss-teal: #438e8a;
  --ss-teal-deep: #327672;
  --ss-ink: #284f50;
  --ss-copy: #566b68;
  --ss-line: #ded1c4;
  --ss-line-cool: #cbdedb;
  --ss-gold: #bc8448;
  --ss-shadow: 0 12px 30px rgba(61, 79, 73, .07);
}

body.ss-theme {
  --ink: var(--ss-ink);
  --ink-soft: #526b69;
  --text: var(--ss-ink);
  --muted: var(--ss-copy);
  --forest: var(--ss-teal);
  --forest-light: var(--ss-sky-strong);
  --green: var(--ss-teal);
  --teal: var(--ss-teal);
  --teal-soft: var(--ss-sky-soft);
  --navy: var(--ss-ink);
  --ivory: var(--ss-ivory);
  --copy: var(--ss-copy);
  --taupe: var(--ss-line);
  --gold: var(--ss-gold);
  --paper-deep: #efe4d9;
  --review-navy: var(--ss-ink);
  --review-teal: var(--ss-teal);
  --review-teal-deep: var(--ss-teal-deep);
  --review-ivory: var(--ss-ivory);
  --review-paper: var(--ss-paper);
  --review-taupe: var(--ss-line);
  --review-copy: var(--ss-copy);
  --copper: var(--ss-teal);
  --copper-dark: var(--ss-teal-deep);
  --brass: var(--ss-sky-strong);
  --lime: var(--ss-sky);
  --paper: var(--ss-paper);
  --canvas: var(--ss-ivory);
  --canvas-deep: #efe4d9;
  --white: var(--ss-white);
  --warm: #fff2df;
  --line: var(--ss-line);
  --line-dark: #bcae9f;
  --bg: var(--ss-ivory);
  --surface: var(--ss-paper);
  --surface-soft: var(--ss-sky-soft);
  --brand: var(--ss-teal-deep);
  --brand-soft: var(--ss-sky);
  --focus: var(--ss-teal);
  --radius: 8px;
  --shadow: var(--ss-shadow);
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  overflow-x: hidden;
  overscroll-behavior: none;
  color: var(--ss-ink);
  background: var(--ss-ivory);
}

.ss-theme a {
  color: var(--ss-teal-deep);
  text-decoration-color: rgba(67, 142, 138, .55);
}

.ss-theme :focus-visible {
  outline-color: var(--ss-sky-strong);
}

.ss-theme .ss-header {
  border-bottom: 1px solid var(--ss-line-cool);
  background: rgba(251, 244, 236, .96);
  color: var(--ss-ink);
  box-shadow: none;
  backdrop-filter: blur(12px);
}

.ss-theme .ss-brand-logo {
  display: block;
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  border: 0;
  border-radius: 0;
  object-fit: contain;
}

.ss-theme .ss-header .brand,
.ss-theme .ss-header .brand strong,
.ss-theme .ss-header .brand small,
.ss-theme .ss-header a {
  color: var(--ss-ink);
}

.ss-theme .ss-header .brand small {
  color: var(--ss-copy);
}

.ss-theme .ss-header .header-support,
.ss-theme .ss-header .header-label {
  color: var(--ss-copy);
}

.ss-theme .ss-header .support-label {
  border-color: var(--ss-sky-strong);
  color: var(--ss-teal-deep);
  background: var(--ss-sky-soft);
}

/* Service guide and legal pages share the current sales-deck palette. */
.ss-service-page,
.ss-legal-page {
  /* Match the current sales deck: white field, dark type, and restrained Google colors. */
  --ss-ivory: #f5f7fa;
  --ss-paper: #ffffff;
  --ss-white: #ffffff;
  --ss-sky: #eaf2ff;
  --ss-sky-soft: #f4f7fb;
  --ss-sky-strong: #4285f4;
  --ss-teal: #34a853;
  --ss-teal-deep: #0b1b2e;
  --ss-ink: #0b1b2e;
  --ss-copy: #536174;
  --ss-line: #dfe5ec;
  --ss-line-cool: #e8edf3;
  --ss-gold: #fbbc04;
  --ss-highlight: #f8dc68;
  --ss-google-blue: #4285f4;
  --ss-google-red: #ea4335;
  --ss-google-yellow: #fbbc04;
  --ss-google-green: #34a853;
  --ss-shadow: 0 16px 40px rgba(11, 27, 46, .08);
  --paper-deep: #edf1f5;
  --canvas-deep: #edf1f5;
  --line-dark: #b9c4cf;
  --warm: #fff5d9;
  background: var(--ss-white);
}

body.ss-theme.ss-service-page {
  background: var(--ss-white);
}

.ss-service-page .ss-header {
  background: rgba(255, 255, 255, .96);
}

.ss-service-page .site-header .header-inner {
  padding-block: 10px;
}

.ss-service-page .site-header nav a {
  color: var(--ss-ink);
}

.ss-service-page .button-primary,
.ss-service-page .header-cta,
.ss-service-page .mobile-cta {
  border-color: var(--ss-teal-deep);
  background: var(--ss-teal-deep);
  color: #fff;
  box-shadow: none;
}

.ss-service-page a[href^="https://line.me/"] {
  border-color: #06c755;
  background: #06c755;
  color: #fff;
}

.ss-service-page a[href^="https://line.me/"]:hover {
  border-color: #05ad49;
  background: #05ad49;
  color: #fff;
}

.ss-service-page .button-primary:hover,
.ss-service-page .header-cta:hover {
  background: #286965;
}

.ss-service-page .button-outline,
.ss-service-page .button-lime {
  border-color: #cdbdab;
  background: var(--ss-paper);
  color: var(--ss-ink);
}

.ss-service-page .hero h1 span,
.ss-service-page .details-line-promise strong {
  background: linear-gradient(transparent 72%, var(--ss-highlight) 72% 92%, transparent 92%);
}

.ss-service-page .dot,
.ss-service-page .note-dot {
  background: var(--ss-sky-strong);
}

.ss-service-page .visual-note,
.ss-service-page .service-card,
.ss-service-page .overview-list a,
.ss-service-page .price-card,
.ss-service-page .plan-option,
.ss-service-page .line-overview,
.ss-service-page .service-detail,
.ss-service-page .detail-work > div,
.ss-service-page .line-roles article {
  border-color: var(--ss-line);
  background: var(--ss-paper);
}

.ss-service-page .journey,
.ss-service-page .closing {
  background: var(--ss-sky);
  color: var(--ss-ink);
}

.ss-service-page .journey .eyebrow,
.ss-service-page .journey-stages li > span,
.ss-service-page .journey-stages small,
.ss-service-page .closing p {
  color: var(--ss-teal-deep);
}

.ss-service-page .journey-stages li,
.ss-service-page .daily-steps li,
.ss-service-page .line-management-steps > li {
  border-color: var(--ss-sky-strong);
}

.ss-service-page .daily-section,
.ss-service-page .details-daily,
.ss-service-page .pricing-notes,
.ss-service-page .plan-common,
.ss-service-page .contract-terms,
.ss-service-page .hero-term-note,
.ss-service-page .detail-scope,
.ss-service-page .detail-check {
  background: var(--ss-ivory);
}

.ss-service-page .line-overview-hub,
.ss-service-page .management-example > figcaption,
.ss-service-page .management-avatar,
.ss-service-page .management-action-sample span,
.ss-service-page .example-mark,
.ss-service-page .task-symbol {
  background: var(--ss-teal);
  color: #fff;
}

.ss-service-page .line-overview-label {
  color: #effaf8;
}

.ss-service-page .management-chat,
.ss-service-page .chat-content {
  background: var(--ss-sky-soft);
}

.ss-service-page .bubble-customer,
.ss-service-page .from-store {
  background: var(--ss-sky);
}

.ss-service-page .plan-option-complete,
.ss-service-page .price-card.featured {
  border-color: var(--ss-teal);
  background: #fffdf8;
}

.ss-service-page .plan-tag,
.ss-service-page .detail-line-actions > span {
  background: var(--ss-sky);
  color: var(--ss-teal-deep);
}

.ss-service-page .detail-check,
.ss-service-page .detail-scope,
.ss-service-page .hero-term-note {
  border-left-color: var(--ss-sky-strong);
}

.ss-service-page .site-footer {
  color: var(--ss-copy);
}

/* Application and onboarding */
.ss-start-page .start-header {
  min-height: 64px;
  padding: 8px max(18px, calc((100vw - 668px) / 2));
}

.ss-start-page .start-header > a {
  margin: 0;
}

.ss-start-page main,
.ss-customer-flow-page main {
  color: var(--ss-ink);
}

.ss-start-page section,
.ss-start-page .start-panel,
.ss-customer-flow-page section,
.ss-customer-flow-page .panel,
.ss-customer-flow-page .review-item,
.ss-customer-flow-page .google-review-panel,
.ss-customer-flow-page .google-review-store {
  border-color: var(--ss-line);
  background: var(--ss-paper);
  box-shadow: var(--ss-shadow);
}

.ss-start-page button:not(.text-button):not(.secondary):not(.journey-step-toggle),
.ss-start-page .button-link:not(.secondary),
.ss-customer-flow-page button:not(.secondary):not(.danger),
.ss-customer-flow-page .button-link:not(.secondary) {
  border-color: var(--ss-teal-deep);
  background: var(--ss-teal-deep);
  color: #fff;
  box-shadow: none;
}

.ss-start-page button.secondary,
.ss-start-page .button-link.secondary,
.ss-customer-flow-page button.secondary,
.ss-customer-flow-page .button-link.secondary {
  border-color: #cdbdab;
  background: var(--ss-paper);
  color: var(--ss-ink);
  box-shadow: none;
}

.ss-start-page .start-steps li[aria-current],
.ss-start-page .start-steps li.done {
  border-color: var(--ss-sky-strong);
  color: var(--ss-teal-deep);
}

.ss-start-page .start-steps li[aria-current] > span,
.ss-start-page .start-steps li.done > span,
.ss-start-page .ready-mark {
  border-color: var(--ss-teal);
  background: var(--ss-teal);
  color: #fff;
}

.ss-start-page .candidate:has(input:checked) {
  border-color: var(--ss-teal);
  background: var(--ss-sky-soft);
}

.ss-start-page input:not([type="checkbox"]):not([type="radio"]),
.ss-start-page select,
.ss-start-page textarea,
.ss-customer-flow-page input,
.ss-customer-flow-page select,
.ss-customer-flow-page textarea {
  border-color: #c5d1cd;
  border-radius: 8px;
  background: #fff;
}

.ss-customer-flow-page .product-header {
  min-height: 64px;
  padding: 8px max(18px, calc((100vw - 960px) / 2));
}

.ss-customer-flow-page .eyebrow,
.ss-start-page .eyebrow {
  color: var(--ss-teal-deep);
}

.ss-customer-flow-page .status,
.ss-customer-flow-page .notice,
.ss-start-page .status,
.ss-start-page .notice {
  border-color: #ead8b9;
  border-left-color: var(--ss-gold);
  background: #fff3df;
  color: #6a512f;
}

.ss-customer-flow-page .steps li.current {
  border-color: var(--ss-sky-strong);
  color: var(--ss-teal-deep);
}

.ss-customer-flow-page .steps li.done {
  border-color: var(--ss-teal);
  color: var(--ss-teal-deep);
}

.ss-customer-flow-page .review-detail pre {
  border-color: var(--ss-line);
  background: var(--ss-ivory);
}

.ss-customer-flow-page .demo-panel {
  background: var(--ss-sky-soft);
}

.ss-customer-flow-page .demo-badge {
  color: var(--ss-teal-deep);
  background: var(--ss-sky);
}

.ss-customer-flow-page footer,
.ss-start-page .start-footer {
  border-color: var(--ss-line);
  color: var(--ss-copy);
}

/* Full setup */
.ss-setup-page .site-header {
  border-bottom: 1px solid var(--ss-line-cool);
}

.ss-setup-page .progress-panel,
.ss-setup-page .form-panel,
.ss-setup-page .side-panel,
.ss-setup-page .admin-card,
.ss-setup-page .admin-intro,
.ss-setup-page .admin-statusbar,
.ss-setup-page .next-action-panel {
  border-color: var(--ss-line);
  border-radius: 14px;
  background: var(--ss-paper);
  box-shadow: var(--ss-shadow);
}

.ss-setup-page h1,
.ss-setup-page h2,
.ss-setup-page .brand strong {
  font-family: inherit;
}

.ss-setup-page .section-kicker,
.ss-setup-page .card-index {
  color: var(--ss-teal-deep);
}

.ss-setup-page input[type="text"],
.ss-setup-page input[type="email"],
.ss-setup-page input[type="tel"],
.ss-setup-page input[type="url"],
.ss-setup-page input[type="time"],
.ss-setup-page input[type="password"],
.ss-setup-page select,
.ss-setup-page textarea {
  border-color: #c5d1cd;
  border-radius: 8px;
  background: #fff;
}

.ss-setup-page .button-primary,
.ss-setup-page .button.primary,
.ss-setup-page .next-action-button {
  border-color: var(--ss-teal-deep);
  background: var(--ss-teal-deep);
  color: #fff;
  box-shadow: none;
}

.ss-setup-page .button-secondary,
.ss-setup-page .button-quiet,
.ss-setup-page .button.subtle {
  border-color: #cdbdab;
  background: var(--ss-paper);
  color: var(--ss-ink);
  box-shadow: none;
}

.ss-setup-page .progress-track,
.ss-setup-page .step-list li,
.ss-setup-page .mobile-progress {
  border-color: var(--ss-line-cool);
}

.ss-setup-page .progress-track span,
.ss-setup-page .step-list li[aria-current="step"]::before,
.ss-setup-page .save-dot {
  background: var(--ss-sky-strong);
}

.ss-setup-page .notice-security,
.ss-setup-page .notice-info,
.ss-setup-page .summary-card {
  border-color: var(--ss-line-cool);
  background: var(--ss-sky-soft);
}

/* Legal pages */
body.ss-theme.ss-legal-page {
  background: var(--ss-white);
}

.ss-legal-page main {
  max-width: 800px;
  border-top: 5px solid transparent;
  border-image: linear-gradient(to right,
    var(--ss-google-blue) 0% 25%,
    var(--ss-google-red) 25% 50%,
    var(--ss-google-yellow) 50% 75%,
    var(--ss-google-green) 75% 100%) 1;
}

.ss-legal-page a {
  color: #1967d2;
  text-decoration-color: currentColor;
}

.ss-legal-page a:hover {
  color: #174ea6;
}

.ss-legal-page :focus-visible {
  outline: 3px solid #1967d2;
  outline-offset: 4px;
}

.ss-legal-page .brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ss-teal-deep);
  font-weight: 700;
}

.ss-legal-page .brand::before {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: conic-gradient(
    var(--ss-google-blue) 0deg 90deg,
    var(--ss-google-red) 90deg 180deg,
    var(--ss-google-yellow) 180deg 270deg,
    var(--ss-google-green) 270deg 360deg);
  content: "";
}

.ss-legal-page .version {
  color: var(--ss-copy);
}

.ss-legal-page .card,
.ss-legal-page section {
  border-color: var(--ss-line);
  background: var(--ss-paper);
}

.ss-legal-page .contents,
.ss-legal-page footer,
.ss-legal-page th,
.ss-legal-page td {
  border-color: var(--ss-line);
}

.ss-legal-page thead th {
  background: var(--ss-sky);
}

.ss-legal-page tbody th {
  background: var(--ss-sky-soft);
}

.ss-legal-page .notice {
  border-color: #f0d675;
  border-left: 4px solid var(--ss-google-yellow);
  background: var(--warm);
}

@media print {
  .ss-legal-page main {
    border: 0;
  }
}

/* Checkout guides: show key conditions first and keep the full detail available. */
.ss-checkout-page .legal-page-nav {
  gap: 8px;
  margin: 22px 0 28px;
  font-size: .9rem;
}

.ss-checkout-page .legal-page-nav a {
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--ss-line);
  border-radius: 8px;
  text-decoration: none;
}

.ss-checkout-page .legal-page-nav a[aria-current="page"] {
  border-color: #1967d2;
  background: var(--ss-sky);
  font-weight: 700;
}

.ss-checkout-page h1 {
  margin: 0 0 12px;
}

.ss-checkout-page .legal-intro,
.ss-checkout-page .legal-caption {
  color: var(--ss-copy);
}

.ss-checkout-page .legal-caption {
  font-size: .9rem;
}

.ss-checkout-page .legal-overview {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 16px 0;
}

.ss-checkout-page .legal-overview > div {
  min-width: 0;
  padding: 18px 20px;
  border: 1px solid var(--ss-line);
  border-radius: 12px;
  background: var(--ss-sky-soft);
}

.ss-checkout-page .legal-overview dt {
  margin: 0 0 6px;
  color: var(--ss-copy);
  font-size: .86rem;
  font-weight: 500;
}

.ss-checkout-page .legal-overview dd {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.6;
}

.ss-checkout-page .legal-overview dd span {
  display: block;
  margin-top: 6px;
  font-size: .82rem;
  font-weight: 400;
}

.ss-checkout-page .legal-overview-stacked {
  grid-template-columns: 1fr;
}

.ss-checkout-page .legal-overview-stacked dd {
  font-size: 1rem;
  font-weight: 500;
}

.ss-checkout-page .legal-callout {
  margin-top: 16px;
  padding: 18px 20px;
  border: 1px solid var(--ss-line);
  border-left: 4px solid var(--ss-google-blue);
  border-radius: 12px;
  background: var(--ss-sky-soft);
}

.ss-checkout-page .legal-callout-caution {
  border-color: #f0d675;
  border-left-color: var(--ss-google-yellow);
  background: var(--warm);
}

.ss-checkout-page .legal-callout h3 {
  margin: 0 0 8px;
  font-size: 1rem;
}

.ss-checkout-page .legal-callout p {
  margin: 0;
}

.ss-checkout-page .legal-details details {
  margin-top: 10px;
  border: 1px solid var(--ss-line);
  border-radius: 10px;
  background: var(--ss-white);
}

.ss-checkout-page .legal-details summary {
  min-height: 48px;
  padding: 14px 18px;
  font-weight: 600;
  cursor: pointer;
}

.ss-checkout-page .legal-details details[open] summary {
  border-bottom: 1px solid var(--ss-line);
  background: var(--ss-sky-soft);
}

.ss-checkout-page .legal-detail-body {
  padding: 4px 18px 12px;
}

.ss-checkout-page .legal-document-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.ss-checkout-page .legal-document-links a {
  display: block;
  min-height: 72px;
  padding: 16px 18px;
  border: 1px solid #bed2ef;
  border-radius: 10px;
  background: var(--ss-sky);
  font-weight: 700;
}

.ss-checkout-page .legal-document-links span {
  display: block;
  margin-top: 4px;
  color: var(--ss-copy);
  font-size: .8rem;
  font-weight: 400;
}

.ss-checkout-page .legal-small-section {
  font-size: .9rem;
}

@media (max-width: 550px) {
  .ss-checkout-page .legal-overview,
  .ss-checkout-page .legal-document-links {
    grid-template-columns: 1fr;
  }

  .ss-checkout-page .legal-overview > div {
    padding: 14px 16px;
  }

  .ss-checkout-page .legal-page-nav {
    margin-block: 18px 24px;
  }

  .ss-checkout-page .legal-callout {
    padding: 16px;
  }
}

@media print {
  .ss-checkout-page .legal-page-nav,
  .ss-checkout-page footer nav {
    display: none;
  }

  .ss-checkout-page details::details-content {
    content-visibility: visible;
  }

  .ss-checkout-page details > :not(summary) {
    display: block !important;
  }

  .ss-checkout-page .legal-callout,
  .ss-checkout-page .legal-overview > div {
    break-inside: avoid;
  }
}

/* Internal operation screens keep their dense layouts and share the palette. */
.ss-internal-page .app-header,
.ss-support-page > header {
  border-color: var(--ss-line-cool);
  background: var(--ss-sky);
  color: var(--ss-ink);
}

.ss-internal-page .app-header .brand,
.ss-internal-page .app-header .brand strong,
.ss-internal-page .app-header .brand small,
.ss-support-page > header small {
  color: var(--ss-ink);
}

.ss-internal-page .brand-symbol i {
  background: var(--ss-teal);
}

.ss-internal-page .sidebar,
.ss-internal-page .panel,
.ss-internal-page .next-action,
.ss-internal-page .progress-strip,
.ss-support-page section {
  border-color: var(--ss-line);
  background: var(--ss-paper);
}

.ss-internal-page .panel,
.ss-internal-page .next-action,
.ss-support-page section {
  border-radius: 10px;
}

.ss-internal-page .button.primary,
.ss-support-page button:not(.secondary) {
  border-color: var(--ss-teal-deep);
  background: var(--ss-teal-deep);
  color: #fff;
}

.ss-support-page button.secondary {
  border-color: var(--ss-teal-deep);
  background: var(--ss-paper);
  color: var(--ss-teal-deep);
}

.ss-support-page h2 {
  border-color: var(--ss-sky-strong);
}

.ss-support-page input,
.ss-support-page textarea,
.ss-support-page select,
.ss-internal-page input,
.ss-internal-page textarea,
.ss-internal-page select {
  border-color: #c5d1cd;
  border-radius: 8px;
  background-color: #fff;
}

.ss-support-page .preview,
.ss-support-page .rich-menu-receipt,
.ss-support-page #feedback:not(:empty),
.ss-internal-page .callout,
.ss-internal-page .notice {
  border-color: var(--ss-sky-strong);
  background: var(--ss-sky-soft);
}

@media (max-width: 680px) {
  .ss-theme .ss-brand-logo {
    width: 46px;
    height: 46px;
  }

  .ss-service-page .site-header .header-inner {
    padding-block: 8px;
  }

  .ss-setup-page .progress-panel,
  .ss-setup-page .form-panel,
  .ss-setup-page .side-panel,
  .ss-setup-page .admin-card,
  .ss-setup-page .admin-intro,
  .ss-setup-page .admin-statusbar,
  .ss-setup-page .next-action-panel {
    border-radius: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ss-theme * {
    scroll-behavior: auto !important;
  }
}