:root {
      --ink: #0d0d0f;
      --ink-muted: #5a5a68;
      --ink-faint: #9898a8;
      --surface: #f7f7f8;
      --white: #ffffff;
      --accent: #2a5cff;
      --accent-light: #e8edff;
      --border: rgba(0,0,0,0.07);
      --radius: 16px;
      --radius-sm: 10px;
      --success: #16a34a;
      --success-bg: #f0fdf4;
    }

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

    .terms-page {
      font-family: 'DM Sans', sans-serif;
      background: var(--surface);
      color: var(--ink);
      font-size: 15px;
      line-height: 1.7;
    }

    .terms-outer {
      max-width: 860px;
      margin: 0 auto;
      padding: 4rem 1.5rem 5rem;
    }

    /* ── HEADER ── */
    .terms-header {
      margin-bottom: 3rem;
      padding-bottom: 2rem;
      border-bottom: 1.5px solid var(--border);
    }
    .terms-badge {
      display: inline-flex;
      align-items: center;
      gap: 0.45rem;
      font-size: 0.72rem;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--accent);
      background: var(--accent-light);
      border-radius: 100px;
      padding: 0.3rem 0.85rem;
      margin-bottom: 1rem;
    }
    .terms-badge svg {
      width: 13px; height: 13px;
      stroke: var(--accent); fill: none; stroke-width: 2;
    }
    .terms-header h1 {
      font-family: 'DM Serif Display', serif;
      font-size: clamp(1.8rem, 4vw, 2.5rem);
      line-height: 1.15;
      letter-spacing: -0.03em;
      color: var(--ink);
      margin-bottom: 0.5rem;
    }
    .terms-updated {
      font-size: 0.82rem;
      color: var(--ink-faint);
      font-weight: 300;
    }

    /* ── TOC ── */
    .terms-toc {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 1.5rem 1.75rem;
      margin-bottom: 3rem;
    }
    .terms-toc-title {
      font-size: 0.72rem;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--ink-faint);
      margin-bottom: 0.9rem;
    }
    .terms-toc ol {
      list-style: none;
      padding: 0;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0.3rem 2rem;
    }
    .terms-toc ol li a {
      font-size: 0.85rem;
      color: var(--ink-muted);
      text-decoration: none;
      display: flex;
      align-items: baseline;
      gap: 0.5rem;
      transition: color 0.15s;
    }
    .terms-toc ol li a:hover { color: var(--accent); }
    .terms-toc-num {
      font-size: 0.72rem;
      font-weight: 700;
      color: var(--accent);
      min-width: 1.5rem;
    }

    /* ── SECTIONS ── */
    .terms-section {
      margin-bottom: 2.75rem;
      scroll-margin-top: 6rem;
    }
    .terms-section-header {
      display: flex;
      align-items: flex-start;
      gap: 1rem;
      margin-bottom: 1rem;
    }
    .terms-section-num {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 32px; height: 32px;
      min-width: 32px;
      background: var(--accent-light);
      border-radius: 8px;
      font-size: 0.75rem;
      font-weight: 700;
      color: var(--accent);
      margin-top: 2px;
      flex-shrink: 0;
    }
    .terms-section h2 {
      font-family: 'DM Serif Display', serif;
      font-size: 1.2rem;
      font-weight: 400;
      color: var(--ink);
      line-height: 1.3;
      letter-spacing: -0.01em;
    }
    .terms-section h2 a {
      color: var(--accent);
      text-decoration: none;
    }
    .terms-section h2 a:hover { text-decoration: underline; }

    .terms-section p {
      font-size: 0.9rem;
      color: var(--ink-muted);
      line-height: 1.8;
      margin-bottom: 0.75rem;
    }
    .terms-section p:last-child { margin-bottom: 0; }
    .terms-section b { color: var(--ink); font-weight: 500; }
    .terms-section a { color: var(--accent); text-decoration: none; }
    .terms-section a:hover { text-decoration: underline; }

    /* ── META GRID (section 1) ── */
    .terms-meta-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0.5rem;
      margin-top: 0.75rem;
    }
    .terms-meta-item {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      padding: 0.65rem 0.9rem;
    }
    .terms-meta-item strong {
      display: block;
      font-size: 0.7rem;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--ink-faint);
      margin-bottom: 0.2rem;
    }
    .terms-meta-item span { font-size: 0.85rem; color: var(--ink-muted); }

    /* ── LEGAL ARTICLE BLOCK ── */
    .legal-article {
      background: var(--white);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      padding: 1rem 1.25rem;
      margin-bottom: 1rem;
      font-size: 0.875rem;
      color: var(--ink-muted);
      line-height: 1.75;
    }
    .legal-article-title {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      font-size: 0.78rem;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: 0.65rem;
    }
    .legal-article-title svg {
      width: 13px; height: 13px;
      stroke: var(--accent); fill: none; stroke-width: 2; flex-shrink: 0;
    }

    /* ── NOTE ── */
    .terms-note {
      background: var(--accent-light);
      border-left: 3px solid var(--accent);
      border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
      padding: 0.75rem 1rem;
      font-size: 0.875rem;
      color: var(--ink-muted);
      margin-top: 0.75rem;
      margin-bottom: 0.75rem;
    }

    /* ── DIVIDER ── */
    .terms-divider {
      height: 1px;
      background: var(--border);
      margin: 2.5rem 0;
    }

    /* ── ACCEPT BUTTON ── */
    .terms-accept-wrap {
      display: flex;
      justify-content: center;
      padding-top: 1rem;
    }
    #termssubmitbutton {
      display: inline-flex;
      align-items: center;
      gap: 0.55rem;
      padding: 0.9rem 2.5rem;
      font-family: 'DM Sans', sans-serif;
      font-size: 0.95rem;
      font-weight: 500;
      color: var(--white);
      background: var(--success);
      border: none;
      border-radius: var(--radius-sm);
      cursor: pointer;
      transition: background 0.18s, box-shadow 0.18s, transform 0.12s;
    }
    #termssubmitbutton:hover {
      background: #15803d;
      box-shadow: 0 6px 20px rgba(22,163,74,0.28);
    }
    #termssubmitbutton:active { transform: scale(0.985); }
    #termssubmitbutton svg {
      width: 16px; height: 16px;
      stroke: white; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
    }

    /* ── RESPONSIVE ── */
    @media (max-width: 600px) {
      .terms-outer { padding: 3rem 1.1rem 4rem; }
      .terms-toc ol { grid-template-columns: 1fr; }
      .terms-meta-grid { grid-template-columns: 1fr; }
    }