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

    body {
      background-color: #faf9f7;
      font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
      color: #1e1e1e;
      line-height: 1.6;
      padding: 2rem 1rem;
    }

    .material-container {
      max-width: 1280px;
      margin: 0 auto;
      background: #ffffff;
      border-radius: 32px;
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.04);
      padding: 2.5rem 2rem;
    }

    /* ---------- section modules ---------- */
    .section-module {
      margin-bottom: 4rem;
      scroll-margin-top: 2rem;
    }

    .section-module:last-of-type {
      margin-bottom: 0;
    }

    .section-tag {
      display: inline-block;
      font-size: 0.7rem;
      font-weight: 600;
      letter-spacing: 1px;
      text-transform: uppercase;
      color: #5f6b7a;
      background: #eef1f4;
      padding: 0.2rem 0.9rem;
      border-radius: 40px;
      margin-bottom: 0.75rem;
    }

    h2 {
      font-size: 2.2rem;
      font-weight: 550;
      letter-spacing: -0.02em;
      line-height: 1.2;
      margin-bottom: 1rem;
      color: #0b1a2b;
    }

    h2 + .subhead {
      font-size: 1.1rem;
      color: #3e4a5a;
      max-width: 720px;
      margin-bottom: 2rem;
    }

    .body-copy {
      font-size: 1rem;
      color: #222b36;
      max-width: 780px;
    }

    .body-copy p {
      margin-bottom: 1.25rem;
    }

    .body-copy p:last-child {
      margin-bottom: 0;
    }

    /* ----- grid & cards ----- */
    .grid-2col {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 2rem 2.5rem;
      margin-top: 1.5rem;
    }

    .grid-4col {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1.5rem;
      margin-top: 1.5rem;
    }

    .advantage-card {
      background: #f6f8fa;
      border-radius: 20px;
      padding: 1.6rem 1.6rem 1.8rem;
      transition: background 0.15s;
    }

    .advantage-card:hover {
      background: #f0f3f6;
    }

    .advantage-card .icon-symbol {
      font-size: 1.8rem;
      font-weight: 300;
      margin-bottom: 0.6rem;
      color: #1f3a57;
    }

    .advantage-card h3 {
      font-size: 1.1rem;
      font-weight: 600;
      margin-bottom: 0.4rem;
      letter-spacing: -0.01em;
      color: #0b1a2b;
    }

    .advantage-card p {
      font-size: 0.95rem;
      color: #2d3846;
      margin-bottom: 0;
    }

    /* ----- comparison table (accessible & responsive) ----- */
    .table-wrap {
      overflow-x: auto;
      margin-top: 1.5rem;
      border-radius: 20px;
      border: 1px solid #e6eaef;
      background: #ffffff;
    }

    .compare-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.95rem;
      min-width: 600px;
    }

    .compare-table th {
      text-align: left;
      padding: 1.2rem 1.5rem;
      background: #f2f5f8;
      font-weight: 600;
      color: #0b1a2b;
      border-bottom: 1px solid #dce1e8;
    }

    .compare-table td {
      padding: 1rem 1.5rem;
      border-bottom: 1px solid #e6eaef;
      vertical-align: top;
      background-color: #ffffff;
    }

    .compare-table tr:last-child td {
      border-bottom: none;
    }

    .compare-table .feature-label {
      font-weight: 600;
      color: #1f2a37;
    }

    .check-yes {
      color: #1a7f4a;
      font-weight: 500;
    }

    .check-mixed {
      color: #b06f2b;
      font-weight: 400;
    }

    .check-low {
      color: #8f5e5e;
    }

    .badge-chip {
      display: inline-block;
      background: #eef3f7;
      padding: 0.1rem 0.7rem;
      border-radius: 40px;
      font-size: 0.8rem;
      font-weight: 450;
      color: #1e384f;
    }

    /* ----- design versatility (2-col) ----- */
    .design-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 2.5rem 3rem;
      margin-top: 1.8rem;
      align-items: start;
    }

    .design-feature-list {
      list-style: none;
      padding: 0;
    }

    .design-feature-list li {
      padding: 0.6rem 0 0.6rem 1.8rem;
      background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="%231a4b6e" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>') left center no-repeat;
      background-size: 1.1rem;
      margin-bottom: 0.2rem;
      color: #1b2a3c;
    }

    .finish-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 0.6rem 0.9rem;
      margin-top: 0.75rem;
    }

    .finish-tags span {
      background: #eef1f5;
      padding: 0.2rem 1rem;
      border-radius: 40px;
      font-size: 0.85rem;
      color: #1f3347;
    }

    /* ----- why teemtry (featured) ----- */
    .trust-badge-group {
      display: flex;
      flex-wrap: wrap;
      gap: 2rem 3.5rem;
      margin-top: 1.8rem;
      padding-top: 0.5rem;
    }

    .trust-item {
      flex: 1 0 180px;
    }

    .trust-item strong {
      display: block;
      font-size: 1.2rem;
      font-weight: 600;
      color: #0b1a2b;
      margin-bottom: 0.2rem;
    }

    .trust-item span {
      font-size: 0.95rem;
      color: #2b3a4b;
    }

    .sustainable-note {
      background: #eef5f0;
      border-radius: 40px;
      padding: 0.8rem 1.6rem;
      display: inline-block;
      margin-top: 1.2rem;
      font-weight: 450;
      color: #1b4d3a;
    }

    /* ----- CTA (clean) ----- */
    .cta-box {
      background: #f0f4fa;
      border-radius: 28px;
      padding: 2.5rem 2.8rem;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 1.8rem;
      margin-top: 1.2rem;
    }

    .cta-text h3 {
      font-size: 1.6rem;
      font-weight: 550;
      color: #0b1a2b;
      margin-bottom: 0.3rem;
    }

    .cta-text p {
      color: #2d3d4f;
      margin-bottom: 0;
      max-width: 480px;
    }

    .cta-btn {
      background: #1a2f43;
      color: #ffffff;
      border: none;
      padding: 0.9rem 2.8rem;
      border-radius: 60px;
      font-weight: 500;
      font-size: 1.1rem;
      letter-spacing: 0.3px;
      cursor: pointer;
      transition: background 0.2s, transform 0.1s;
      white-space: nowrap;
      text-decoration: none;
      display: inline-block;
      text-align: center;
    }

    .cta-btn:hover {
      background: #0f1f30;
      transform: scale(0.98);
    }

    /* ----- responsive ----- */
    @media (max-width: 900px) {
      .material-container {
        padding: 1.5rem 1.2rem;
      }
      h2 {
        font-size: 1.8rem;
      }
      .grid-2col {
        grid-template-columns: 1fr;
        gap: 1.8rem;
      }
      .grid-4col {
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
      }
      .design-grid {
        grid-template-columns: 1fr;
        gap: 1.8rem;
      }
      .cta-box {
        flex-direction: column;
        align-items: flex-start;
        padding: 1.8rem 1.5rem;
      }
      .cta-btn {
        width: 100%;
        text-align: center;
        white-space: normal;
      }
      .trust-badge-group {
        gap: 1.5rem;
      }
    }

    @media (max-width: 550px) {
      .grid-4col {
        grid-template-columns: 1fr;
      }
      .compare-table {
        font-size: 0.85rem;
        min-width: 480px;
      }
      .compare-table th,
      .compare-table td {
        padding: 0.7rem 1rem;
      }
    }

    /* helper for readability */
    .text-muted {
      color: #4a5a6a;
    }

    .mt-1 {
      margin-top: 1rem;
    }

    .border-top-light {
      border-top: 1px solid #e3e8ef;
      padding-top: 2rem;
    }

    /* small note for alloy mention */
    .trace-note {
      font-size: 0.9rem;
      color: #4d5e6f;
      background: #f4f7fa;
      padding: 0.5rem 1.2rem;
      border-radius: 40px;
      display: inline-block;
      margin-top: 0.5rem;
    }