:root {
      --bg: #DCE9E4;
      --bg-soft: #C7D8D2;
      --accent-mid: #8BAFA3;
      --primary: #598F79;
      --primary-dark: #063629;
      --card-bg: #ffffff;
      --border: #C7D8D2;
      --text-main: #063629;
      --text-muted: #4b5563;
      --radius: 14px;
      --shadow: 0 12px 24px rgba(15, 23, 42, 0.12);
    }

    * {margin:0; padding:0; box-sizing:border-box;}
    body {
      font-family:"Inter",sans-serif;
      background:var(--bg);
      color:var(--text-main);
      line-height:1.6;
    }
    .wrapper {
      max-width:1100px;
      margin:0 auto;
      padding:24px 16px 40px;
    }

    .page-header {margin-bottom:24px;}
    .page-kicker {
      font-size:13px;
      letter-spacing:.12em;
      text-transform:uppercase;
      color:var(--text-muted);
      margin-bottom:6px;
    }
    .page-title {
      font-family:"Playfair Display",serif;
      font-size:26px;
      color:var(--primary-dark);
      margin-bottom:6px;
    }
    .page-subtitle {
      font-size:14px;
      color:var(--text-muted);
      max-width:620px;
    }
    .accent-line {
      width:60px;
      height:3px;
      background:var(--accent-mid);
      border-radius:2px;
      margin:14px 0 18px;
    }

    .card {
      background:var(--card-bg);
      border-radius:var(--radius);
      border:1px solid var(--border);
      box-shadow:var(--shadow);
      padding:18px;
    }

    /* HERO */
    .hero-grid {
      display:grid;
      grid-template-columns:1.3fr 1fr;
      gap:18px;
      align-items:stretch;
      margin-bottom:20px;
    }
    .hero-main-title {
      font-size:18px;
      font-weight:600;
      margin-bottom:6px;
      color:var(--primary-dark);
    }
    .hero-points {
      list-style:none;
      margin-top:8px;
    }
    .hero-points li {
      font-size:14px;
      margin-bottom:4px;
      display:flex;
      gap:8px;
      align-items:flex-start;
      color:var(--text-main);
    }
    .hero-points i {
      margin-top:3px;
      color:var(--primary);
      font-size:12px;
    }

    .hero-image {
      border-radius:12px;
      overflow:hidden;
      position:relative;
      min-height:210px;
    }
    .hero-image img {
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
    }
    .hero-tag {
      position:absolute;
      left:10px;
      bottom:10px;
      background:rgba(6,54,41,0.88);
      color:#fff;
      padding:4px 10px;
      border-radius:999px;
      font-size:12px;
    }

    /* 3 focus cards */
    .focus-grid {
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:12px;
      margin-bottom:20px;
    }
    .focus-item {
      background:#f4faf7;
      border-radius:12px;
      border:1px solid #d4e4dd;
      padding:12px 11px;
      font-size:13px;
    }
    .focus-icon {
      width:30px;
      height:30px;
      border-radius:999px;
      background:#e1efe9;
      display:flex;
      align-items:center;
      justify-content:center;
      color:var(--primary-dark);
      margin-bottom:6px;
      font-size:14px;
    }
    .focus-title {
      font-weight:600;
      margin-bottom:4px;
      font-size:13px;
    }

    

    /* simple steps */
    .steps-strip {
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin-top:4px;
      font-size:13px;
    }
    .step-pill {
      display:inline-flex;
      align-items:center;
      gap:6px;
      background:#f8fffd;
      border-radius:999px;
      border:1px solid #d4e4dd;
      padding:4px 10px;
    }
    .primary-btn {
      display:inline-flex;
      align-items:center;
      gap:6px;
      background:var(--primary);
      color:#fff;
      padding:8px 14px;
      border-radius:999px;
      font-size:13px;
      text-decoration:none;
      margin-top:10px;
    }
    .primary-btn:hover {background:var(--primary-dark);}

    @media(max-width:880px){
      .hero-grid{grid-template-columns:1fr;}
      .focus-grid{grid-template-columns:1fr 1fr;}
    }
    @media(max-width:600px){
      .focus-grid{grid-template-columns:1fr;}
      .page-title{font-size:22px;}
    }