/* ── Reset & Variables ───────────────────────────────────── */

*, *::before, *::after {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

:root {
   --color-bg: #F0EDE8;
   --color-bg-alt: #F7F5F1;
   --color-white: #FFFFFF;
   --color-text: #2C2C2E;
   --color-text-secondary: #7A756E;
   --color-text-muted: #A09A92;
   --color-primary: #4A6670;
   --color-primary-hover: #3D565F;
   --color-accent: #C27856;
   --color-accent-hover: #B06A4A;
   --color-border: #D8D3CB;
   --color-border-subtle: #E4E0DA;
   --color-surface-hover: #EBE8E3;
   --radius-sm: 6px;
   --radius-md: 10px;
   --radius-lg: 16px;
   --font-serif: 'Instrument Serif', Georgia, serif;
   --font-sans: 'DM Sans', system-ui, -apple-system, sans-serif;
}

html {
   scroll-behavior: smooth;
}

body {
   font-family: var(--font-sans);
   color: var(--color-text);
   background-color: var(--color-bg);
   line-height: 1.6;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}

.container {
   max-width: 1080px;
   margin: 0 auto;
   padding: 0 28px;
}


/* ── Navigation ─────────────────────────────────────────── */

.navbar {
   background: var(--color-white);
   border-bottom: 1px solid var(--color-border);
   padding: 16px 0;
   position: sticky;
   top: 0;
   z-index: 100;
}

.navbar-inner {
   display: flex;
   align-items: center;
   justify-content: space-between;
}

.logo {
   font-family: var(--font-serif);
   font-size: 1.2rem;
   font-weight: 600;
   color: var(--color-text);
   text-decoration: none;
}

.nav-links {
   display: flex;
   gap: 36px;
}

.nav-links a {
   color: var(--color-text-secondary);
   text-decoration: none;
   font-size: 0.9rem;
   transition: color 0.2s;
}

.nav-links a:hover {
   color: var(--color-text);
}

.btn-signin {
   border: 1px solid var(--color-border);
   padding: 8px 22px;
   border-radius: var(--radius-sm);
   color: var(--color-text);
   text-decoration: none;
   font-size: 0.9rem;
   transition: all 0.2s;
   background: transparent;
}

.btn-signin:hover {
   background: var(--color-primary);
   color: var(--color-white);
   border-color: var(--color-primary);
}

.nav-toggle {
   display: none;
   flex-direction: column;
   gap: 5px;
   background: none;
   border: none;
   cursor: pointer;
   padding: 4px;
}

.nav-toggle span {
   display: block;
   width: 22px;
   height: 2px;
   background: var(--color-text);
   border-radius: 1px;
   transition: all 0.3s;
}


/* ── Hero ────────────────────────────────────────────────── */

.hero {
   background: var(--color-bg);
   padding: 80px 0 90px;
   border-top: 3px solid var(--color-accent);
}

.hero-inner {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 56px;
   align-items: center;
}

.hero-text h1 {
   font-family: var(--font-serif);
   font-size: 3.2rem;
   font-weight: 400;
   line-height: 1.18;
   margin-bottom: 22px;
}

.hero-text h1 em {
   color: var(--color-accent);
   font-style: italic;
}

.hero-subtitle {
   color: var(--color-text-secondary);
   font-size: 1.02rem;
   line-height: 1.65;
}


/* ── Compose Card ────────────────────────────────────────── */

.compose-card {
   background: var(--color-white);
   border-radius: var(--radius-lg);
   padding: 28px 30px;
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04), 0 6px 20px rgba(0, 0, 0, 0.03);
}

.compose-label {
   display: block;
   font-size: 0.68rem;
   font-weight: 600;
   letter-spacing: 0.1em;
   color: var(--color-text-secondary);
   margin-bottom: 16px;
}

.compose-textarea {
   width: 100%;
   min-height: 110px;
   border: none;
   border-bottom: 1px solid var(--color-border-subtle);
   resize: none;
   font-family: var(--font-sans);
   font-size: 0.92rem;
   color: var(--color-text-muted);
   line-height: 1.65;
   padding: 0 0 18px;
   outline: none;
   background: transparent;
}

.compose-textarea:focus {
   color: var(--color-text);
}

.compose-textarea::placeholder {
   color: var(--color-text-muted);
}

.compose-footer {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-top: 18px;
   gap: 16px;
}

.compose-note {
   font-size: 0.76rem;
   color: var(--color-text-secondary);
}

.btn-send {
   background: var(--color-primary);
   color: var(--color-white);
   border: none;
   padding: 13px 26px;
   border-radius: var(--radius-md);
   font-size: 0.88rem;
   font-family: var(--font-sans);
   cursor: pointer;
   transition: background 0.2s;
   white-space: nowrap;
}

.btn-send:hover {
   background: var(--color-primary-hover);
}


/* ── How It Works ────────────────────────────────────────── */

.how-it-works {
   background: var(--color-bg-alt);
   padding: 80px 0 90px;
   text-align: center;
   border-top: 3px solid var(--color-accent);
}

.how-it-works h2,
.pledge h2 {
   font-family: var(--font-serif);
   font-size: 2.1rem;
   font-weight: 400;
   margin-bottom: 20px;
   line-height: 1.3;
}

.section-desc {
   color: var(--color-text-secondary);
   max-width: 620px;
   margin: 0 auto 48px;
   font-size: 0.94rem;
   line-height: 1.7;
}

.section-desc.left {
   margin-left: 0;
   text-align: left;
}

.steps {
   display: flex;
   align-items: flex-start;
   justify-content: center;
   gap: 28px;
}

.step {
   text-align: center;
   max-width: 170px;
}

.step-number {
   width: 44px;
   height: 44px;
   border: 1.5px solid var(--color-text);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-family: var(--font-serif);
   font-size: 1.05rem;
   margin: 0 auto 14px;
}

.step p {
   color: var(--color-text-secondary);
   font-size: 0.88rem;
   line-height: 1.5;
}

.step-arrow {
   color: var(--color-text-secondary);
   font-size: 1.15rem;
   margin-top: 12px;
   opacity: 0.5;
}


/* ── Messages ────────────────────────────────────────────── */

.messages {
   padding: 80px 0;
   text-align: center;
   background: var(--color-bg-alt);
}

.section-label {
   font-size: 0.68rem;
   font-weight: 600;
   letter-spacing: 0.15em;
   color: var(--color-text-secondary);
   margin-bottom: 32px;
}

.message-cards {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 20px;
   text-align: left;
}

.message-card {
   background: var(--color-white);
   border: 1px solid var(--color-border);
   border-radius: var(--radius-md);
   padding: 28px;
   display: flex;
   flex-direction: column;
}

.message-text {
   font-style: italic;
   color: var(--color-text);
   font-size: 0.93rem;
   line-height: 1.7;
   margin-bottom: 22px;
   flex: 1;
}

.message-meta {
   display: flex;
   align-items: center;
   gap: 10px;
}

.message-tag {
   font-size: 0.66rem;
   padding: 3px 9px;
   border-radius: 2rem;
   color: var(--color-primary);
   background: var(--color-bg);
}

.message-reply {
   font-size: 0.72rem;
   color: var(--color-text-muted);
}

.message-lang {
   margin-left: auto;
   font-size: 0.66rem;
   color: var(--color-text-muted);
   font-style: normal;
}


/* ── Pledge ──────────────────────────────────────────────── */

.pledge {
   background: var(--color-text);
   padding: 80px 0;
   text-align: center;
}

.pledge h2 {
   color: var(--color-bg);
}

.pledge-body {
   color: #A09A92;
   max-width: 560px;
   margin: 0 auto 16px;
   font-size: 0.9rem;
   line-height: 1.8;
}

.pledge-body.secondary {
   color: #7A756E;
   font-size: 0.84rem;
}

.pledge-link {
   display: inline-block;
   color: var(--color-bg);
   font-size: 0.85rem;
   font-weight: 500;
   text-decoration: none;
   border-bottom: 1px solid rgba(240, 237, 228, 0.4);
   padding-bottom: 2px;
   letter-spacing: 0.03em;
   margin: 16px 0 32px;
   transition: border-color 0.2s;
}

.pledge-link:hover {
   border-color: var(--color-bg);
}

.pledge-points {
   display: flex;
   justify-content: center;
   gap: 28px;
   flex-wrap: wrap;
}

.pledge-points span {
   font-size: 0.8rem;
   color: #7A756E;
}

.pledge-points span::before {
   content: '•';
   margin-right: 6px;
}


/* ── Safety ──────────────────────────────────────────────── */

.safety {
   padding: 80px 0;
}

.safety h2 {
   font-family: var(--font-serif);
   font-size: 2.1rem;
   font-weight: 400;
   margin-bottom: 14px;
   line-height: 1.3;
}

.safety-cards {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 22px;
}

.safety-card {
   background: var(--color-bg-alt);
   border-radius: var(--radius-md);
   padding: 30px;
}

.safety-icon {
   width: 38px;
   height: 38px;
   border-radius: 50%;
   background: var(--color-bg);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.1rem;
   color: var(--color-text-secondary);
   margin-bottom: 18px;
}

.safety-card h3 {
   font-family: var(--font-sans);
   font-size: 0.98rem;
   font-weight: 600;
   margin-bottom: 8px;
}

.safety-card p {
   color: var(--color-text-secondary);
   font-size: 0.88rem;
   line-height: 1.65;
}


/* ── Frequency ───────────────────────────────────────────── */

.frequency {
   background: var(--color-bg-alt);
   padding: 80px 0;
   border-top: 3px solid var(--color-accent);
}

.frequency h2 {
   font-family: var(--font-serif);
   font-size: 2.1rem;
   font-weight: 400;
   margin-bottom: 14px;
   line-height: 1.3;
}

.frequency-cards {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
}

.frequency-card {
   background: var(--color-white);
   border: 1px solid var(--color-border);
   padding: 32px 28px;
   text-align: center;
   cursor: pointer;
   transition: background 0.2s, border-color 0.2s;
}

.frequency-card:first-child {
   border-radius: var(--radius-md) 0 0 var(--radius-md);
}

.frequency-card:last-child {
   border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.frequency-card + .frequency-card {
   border-left: none;
}

.frequency-card.active {
   background: var(--color-bg-alt);
   border-color: var(--color-text-secondary);
}

.frequency-card.active + .frequency-card {
   border-left-color: var(--color-text-secondary);
}

.frequency-card:hover:not(.active) {
   background: var(--color-surface-hover);
}

.frequency-card h3 {
   font-family: var(--font-sans);
   font-size: 1.05rem;
   font-weight: 600;
   margin-bottom: 6px;
}

.frequency-card p {
   color: var(--color-text-secondary);
   font-size: 0.84rem;
   line-height: 1.5;
}

.frequency-preview {
   margin-top: 32px;
   text-align: center;
}

.frequency-preview-text {
   font-family: var(--font-serif);
   font-size: 1.15rem;
   line-height: 1.55;
   color: var(--color-text);
   max-width: 580px;
   margin: 0 auto 24px;
   min-height: 2.4em;
   transition: opacity 0.18s ease;
}

.btn-frequency-cta {
   display: inline-block;
   background: var(--color-primary);
   color: var(--color-white);
   text-decoration: none;
   padding: 14px 30px;
   border-radius: var(--radius-md);
   font-size: 0.92rem;
   font-family: var(--font-sans);
   font-weight: 500;
   transition: background 0.2s;
}

.btn-frequency-cta:hover {
   background: var(--color-primary-hover);
}

.frequency-preview-note {
   margin-top: 16px;
   font-size: 0.8rem;
   color: var(--color-text-secondary);
}


/* ── Legal Pages ─────────────────────────────────────────── */

.legal-page {
   background: var(--color-bg);
   padding: 64px 0 80px;
   border-top: 3px solid var(--color-accent);
}

.legal-content {
   max-width: 720px;
   margin: 0 auto;
}

.legal-content h1 {
   font-family: var(--font-serif);
   font-size: 2.6rem;
   font-weight: 400;
   line-height: 1.2;
   margin-bottom: 12px;
}

.legal-content h2 {
   font-family: var(--font-serif);
   font-size: 1.5rem;
   font-weight: 400;
   line-height: 1.35;
   margin: 44px 0 14px;
}

.legal-content h3 {
   font-family: var(--font-sans);
   font-size: 1rem;
   font-weight: 600;
   margin: 26px 0 10px;
}

.legal-content p,
.legal-content li {
   color: var(--color-text);
   font-size: 0.95rem;
   line-height: 1.75;
}

.legal-content p {
   margin-bottom: 14px;
}

.legal-content .legal-meta {
   color: var(--color-text-secondary);
   font-size: 0.9rem;
   margin-bottom: 36px;
}

.legal-content ul {
   padding-left: 22px;
   margin: 4px 0 16px;
}

.legal-content li {
   margin-bottom: 6px;
}

.legal-content a {
   color: var(--color-primary);
}

.legal-content a:hover {
   color: var(--color-primary-hover);
}

.legal-content strong {
   font-weight: 600;
}

.legal-content em {
   color: var(--color-text-secondary);
}

.legal-content table {
   width: 100%;
   border-collapse: collapse;
   margin: 18px 0 22px;
   font-size: 0.9rem;
}

.legal-content th,
.legal-content td {
   text-align: left;
   padding: 10px 12px;
   border-bottom: 1px solid var(--color-border-subtle);
}

.legal-content th {
   background: var(--color-bg-alt);
   font-weight: 600;
}

.legal-content hr {
   border: none;
   border-top: 1px solid var(--color-border);
   margin: 36px 0 24px;
}


/* ── Footer ──────────────────────────────────────────────── */

.footer {
   background: var(--color-bg);
   padding: 28px 0;
   border-top: 1px solid var(--color-border);
}

.footer-inner {
   display: flex;
   align-items: center;
   justify-content: space-between;
}

.footer-logo {
   font-family: var(--font-serif);
   font-size: 0.98rem;
   font-weight: 600;
   color: var(--color-text);
}

.footer-links {
   display: flex;
   gap: 24px;
}

.footer-links a {
   color: var(--color-text-secondary);
   text-decoration: none;
   font-size: 0.84rem;
   transition: color 0.2s;
}

.footer-links a:hover {
   color: var(--color-text);
}

.footer-company {
   color: var(--color-text-secondary);
   font-size: 0.8rem;
}


/* ── Responsive ──────────────────────────────────────────── */

@media (max-width: 900px) {
   .hero-inner {
      grid-template-columns: 1fr;
      gap: 40px;
   }

   .hero-text h1 {
      font-size: 2.6rem;
   }

   .message-cards {
      grid-template-columns: repeat(2, 1fr);
   }

   .safety-cards {
      grid-template-columns: 1fr;
   }

   .frequency-cards {
      grid-template-columns: 1fr;
   }

   .frequency-card:first-child {
      border-radius: var(--radius-md) var(--radius-md) 0 0;
   }

   .frequency-card:last-child {
      border-radius: 0 0 var(--radius-md) var(--radius-md);
   }

   .frequency-card + .frequency-card {
      border-left: 1px solid var(--color-border);
      border-top: none;
   }

   .footer-inner {
      flex-direction: column;
      gap: 16px;
      text-align: center;
   }

   .footer-links {
      flex-wrap: wrap;
      justify-content: center;
   }
}

@media (max-width: 640px) {
   .nav-toggle {
      display: flex;
   }

   .nav-links {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      background: var(--color-white);
      flex-direction: column;
      padding: 16px 28px 20px;
      gap: 16px;
      border-bottom: 1px solid var(--color-border);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
   }

   .nav-links.open {
      display: flex;
   }

   .navbar-inner {
      position: relative;
   }

   .hero-text h1 {
      font-size: 2.1rem;
   }

   .hero {
      padding: 50px 0 60px;
   }

   .how-it-works,
   .messages,
   .pledge,
   .safety,
   .frequency {
      padding: 56px 0;
   }

   .how-it-works h2,
   .pledge h2,
   .safety h2,
   .frequency h2 {
      font-size: 1.7rem;
   }

   .steps {
      flex-direction: column;
      align-items: center;
      gap: 8px;
   }

   .step-arrow {
      transform: rotate(90deg);
      margin: 0;
   }

   .message-cards {
      grid-template-columns: 1fr;
   }

   .pledge-points {
      flex-direction: column;
      align-items: center;
      gap: 10px;
   }

   .compose-footer {
      flex-direction: column;
      align-items: stretch;
   }

   .compose-note {
      text-align: center;
      margin-bottom: 4px;
   }
}