:root{
      --page-bg: #ffffff;
      --app-bg: #f3f4f6;
      --text: #111827;
      --muted: #4b5563;
      --line: #e5e7eb;
    }
    *{ box-sizing: border-box; }
    body{
      margin: 0;
      background: var(--app-bg);
      color: var(--text);
      font-family: Calibri, "Segoe UI", Arial, sans-serif;
      font-size: 16px;
      line-height: 1.55;
    }
    .wrap{
      padding: 28px 14px 50px;
      display: flex;
      justify-content: center;
    }
    .page{
      width: 210mm;
      max-width: 100%;
      background: var(--page-bg);
      border: 1px solid var(--line);
      box-shadow: 0 18px 55px rgba(0,0,0,0.12);
      border-radius: 10px;
      padding: 28mm 22mm;
    }
    h1{
      font-size: 26px;
      margin: 0 0 10px;
      letter-spacing: .2px;
    }
    .subtitle{
      color: var(--muted);
      margin: 0 0 18px;
    }
    h2{
      font-size: 18px;
      margin: 22px 0 8px;
    }
    p{ margin: 0 0 10px; }
    ul{
      margin: 8px 0 10px 20px;
      padding: 0;
    }
    li{ margin: 6px 0; }
    .hr{
      margin: 18px 0 14px;
      border-top: 1px solid var(--line);
    }
    .contact{
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 14px 14px;
      background: #fafafa;
    }
    .contact strong{ display: inline-block; min-width: 80px; }
    a{
      color: #0f766e;
      text-decoration: none;
      border-bottom: 1px dashed rgba(15,118,110,.35);
    }
    a:hover{ border-bottom-style: solid; }
    @media print{
      body{ background: #fff; }
      .wrap{ padding: 0; }
      .page{
        border: none;
        box-shadow: none;
        border-radius: 0;
        width: auto;
        padding: 18mm 18mm;
      }
      a{ border-bottom: none; color: #000; }
    }
    @media (max-width: 720px){
      .page{
        padding: 18px 16px;
        border-radius: 12px;
      }
    }