:root {
       --bg: #ffffff;
       --soft: #fff9e6;
       --card: #ffffff;
       --text: #0f172a;
       --muted: #64748b;
       --border: #e5e7eb;

       --yellow: #ffcc00;
       --yellow2: #ffe27a;

       --r-xl: 22px;
       --r-md: 12px;

       --shadow: 0 18px 40px rgba(15, 23, 42, .08);
       --shadow2: 0 10px 26px rgba(15, 23, 42, .06);

       --max: 1150px;
   }

   .page {
       background: var(--bg);
       color: var(--text);
       max-width: var(--max);
       margin: 0 auto;
       padding: 18px clamp(14px, 3vw, 22px) 46px;
       font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
   }

   .heading-xl {
       margin: 0 0 8px;
       font-size: clamp(22px, 3vw, 34px);
       font-weight: 900;
       letter-spacing: -0.02em;
   }

   .heading-lg {
       margin: 0 0 10px;
       font-size: clamp(18px, 2.2vw, 22px);
       font-weight: 800;
   }

   .muted {
       color: var(--muted);
       font-size: 15px;
   }

   .text-tight {
       margin: 0;
   }

   .note {
       margin-top: 10px;
       font-size: 14px;
   }

   .card {
       background: linear-gradient(135deg, var(--soft), var(--card) 46%);
       border: 1px solid var(--border);
       border-radius: var(--r-xl);
       padding: clamp(18px, 3vw, 28px);
       box-shadow: var(--shadow);
   }

   .grid {
       display: grid;
       grid-template-columns: repeat(12, 1fr);
       gap: 22px;
       margin-top: 26px;
   }

   .col-6 {
       grid-column: span 6;
   }

   @media (max-width: 900px) {
       .col-6 {
           grid-column: span 12;
       }
   }

   .actions {
       margin-top: 14px;
       display: flex;
       flex-wrap: wrap;
       gap: 12px;
   }

   .btn {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       min-height: 44px;
       padding: 12px 18px;
       border-radius: var(--r-md);
       font-weight: 800;
       text-decoration: none;
       cursor: pointer;
       color: #000;
       background: linear-gradient(180deg, var(--yellow2), var(--yellow));
       box-shadow: 0 10px 22px rgba(255, 204, 0, .28);
       transition: transform .15s ease, box-shadow .15s ease;
   }

   .btn:hover {
       transform: translateY(-1px);
       box-shadow: 0 14px 28px rgba(255, 204, 0, .38);
   }

   .btn.secondary {
       background: #fff;
       color: var(--text);
       border: 1px solid var(--border);
       box-shadow: var(--shadow2);
   }

   @media (max-width: 600px) {
       .btn {
           flex: 1 1 100%;
       }
   }

   .card ul {
       margin: 12px 0 0;
       padding: 0;
       list-style: none;
       display: grid;
       gap: 10px;
   }

   .card ul li {
       position: relative;
       padding-left: 26px;
       font-size: 15px;
   }

   .card ul li::before {
       content: "✔";
       position: absolute;
       left: 0;
       top: 0;
       color: var(--yellow);
       font-weight: 900;
   }