:root{
      --bg:#f7f4ef;
      --paper:#fffdf9;
      --ink:#1f2933;
      --muted:#6b7280;
      --line:#e7dfd3;
      --accent:#9b7b59;
      --accent-dark:#7b6045;
      --soft:#efe6db;
      --shadow:0 18px 40px rgba(50,40,30,.08);
      --radius:24px;
      --max:1100px;
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family: Arial, Helvetica, sans-serif;
      background:var(--bg);
      color:var(--ink);
      line-height:1.75;
    }

    img{
      max-width:100%;
      display:block;
      height:auto;
    }

    a{
      color:var(--accent-dark);
      text-decoration:none;
      font-weight:700;
    }

    a:hover{text-decoration:underline}

    .wrap{
      width:100%;
      max-width:var(--max);
      margin:0 auto;
      padding:0 22px;
    }

    .topbar{
      padding:18px 0;
      border-bottom:1px solid rgba(0,0,0,.05);
      background:rgba(255,253,249,.85);
      backdrop-filter: blur(6px);
      position:sticky;
      top:0;
      z-index:20;
    }

    .topbar-inner{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:20px;
    }

    .brand{
      font-size:14px;
      letter-spacing:.08em;
      text-transform:uppercase;
      color:var(--muted);
      font-weight:700;
    }

    .top-links{
      display:flex;
      gap:18px;
      flex-wrap:wrap;
    }

    .top-links a{
      font-size:14px;
      color:var(--muted);
      font-weight:600;
    }

    .hero{
      padding:54px 0 26px;
    }

    .eyebrow{
      display:inline-block;
      padding:8px 14px;
      background:var(--soft);
      color:var(--accent-dark);
      border-radius:999px;
      font-size:13px;
      font-weight:800;
      letter-spacing:.03em;
      margin-bottom:18px;
    }

    h1{
      font-size:54px;
      line-height:1.08;
      margin:0 0 20px;
      letter-spacing:-1.2px;
      color:#17212b;
      max-width:860px;
    }

    .lead{
      max-width:780px;
      font-size:19px;
      color:#495463;
      margin:0 0 28px;
    }

    .meta-row{
      display:flex;
      gap:12px;
      flex-wrap:wrap;
      color:var(--muted);
      font-size:14px;
      margin-bottom:34px;
    }

    .meta-pill{
      padding:8px 12px;
      border:1px solid var(--line);
      border-radius:999px;
      background:rgba(255,255,255,.65);
    }

    .hero-image{
      margin-top:12px;
      background:var(--paper);
      border:1px solid var(--line);
      border-radius:30px;
      overflow:hidden;
      box-shadow:var(--shadow);
    }

    .hero-image img{
      width:100%;
      aspect-ratio: 1200 / 900;
      object-fit:cover;
    }

    .hero-caption{
      padding:14px 18px 18px;
      font-size:13px;
      color:var(--muted);
    }

    .content{
      display:grid;
      grid-template-columns:240px minmax(0,1fr);
      gap:44px;
      padding:40px 0 80px;
    }

    .toc{
      position:sticky;
      top:86px;
      align-self:start;
      background:var(--paper);
      border:1px solid var(--line);
      border-radius:20px;
      padding:20px;
      box-shadow:0 10px 24px rgba(0,0,0,.04);
    }

    .toc h3{
      margin:0 0 12px;
      font-size:16px;
      color:#25303b;
    }

    .toc a{
      display:block;
      padding:9px 0;
      border-bottom:1px dashed #e6ddd0;
      font-size:14px;
      color:#5b6572;
      font-weight:600;
    }

    .toc a:last-child{border-bottom:none}

    .article{
      min-width:0;
    }

    .article-card{
      background:var(--paper);
      border:1px solid var(--line);
      border-radius:28px;
      padding:34px;
      box-shadow:var(--shadow);
    }

    .section{
      margin-bottom:42px;
      scroll-margin-top:100px;
    }

    .section:last-child{margin-bottom:0}

    .section h2{
      font-size:34px;
      line-height:1.2;
      margin:0 0 14px;
      color:#1b2a37;
      letter-spacing:-.5px;
    }

    .section h3{
      font-size:22px;
      line-height:1.3;
      margin:24px 0 10px;
      color:#253443;
    }

    .section p{
      font-size:17px;
      color:#394452;
      margin:0 0 16px;
    }

    .pull-quote{
      margin:26px 0;
      padding:26px 28px;
      border-left:4px solid var(--accent);
      background:linear-gradient(180deg,#fcf8f2 0%,#f6efe5 100%);
      border-radius:18px;
    }

    .pull-quote p{
      margin:0;
      font-size:18px;
      color:#4c4036;
    }

    .comparison{
      margin:22px 0;
      overflow:hidden;
      border:1px solid var(--line);
      border-radius:18px;
      background:#fff;
    }

    .comparison table{
      width:100%;
      border-collapse:collapse;
    }

    .comparison th,
    .comparison td{
      padding:16px;
      text-align:left;
      vertical-align:top;
      border-bottom:1px solid #eee5d9;
      font-size:15px;
    }

    .comparison th{
      background:#f7f0e7;
      color:#3b3028;
      font-size:14px;
      text-transform:uppercase;
      letter-spacing:.04em;
    }

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

    .checklist{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:14px 24px;
      margin-top:18px;
    }

    .item{
      background:#fcfaf6;
      border:1px solid #ede3d6;
      border-radius:16px;
      padding:16px 16px 16px 18px;
    }

    .item strong{
      display:block;
      margin-bottom:6px;
      color:#2d3a46;
      font-size:16px;
    }

    .item p{
      margin:0;
      font-size:15px;
      color:#55606d;
    }

    .image-panel{
      margin:26px 0 6px;
      background:#fff;
      border:1px solid var(--line);
      border-radius:24px;
      overflow:hidden;
      box-shadow:0 12px 24px rgba(0,0,0,.04);
    }

    .image-panel img{
      width:100%;
      aspect-ratio: 1448 / 1086;
      object-fit:cover;
    }

    .image-panel .note{
      padding:14px 18px 18px;
      font-size:13px;
      color:var(--muted);
    }

    .split-note{
      display:grid;
      grid-template-columns:1.1fr .9fr;
      gap:24px;
      align-items:start;
      margin-top:26px;
      padding:26px;
      background:#f8f3ec;
      border:1px solid #eadfce;
      border-radius:22px;
    }

    .split-note h3{
      margin-top:0;
    }

    .mini-box{
      background:#fffdf9;
      border:1px solid #e8decf;
      border-radius:18px;
      padding:18px;
    }

    .mini-box ul{
      margin:0;
      padding-left:18px;
    }

    .mini-box li{
      margin-bottom:8px;
      color:#4d5866;
      font-size:15px;
    }

    .faq{
      display:grid;
      gap:14px;
    }

    .faq-item{
      border:1px solid #e8decf;
      border-radius:18px;
      background:#fff;
      padding:20px;
    }

    .faq-item h3{
      margin:0 0 8px;
      font-size:18px;
    }

    .faq-item p{
      margin:0;
      font-size:15.5px;
      color:#56616d;
    }

    .cta{
      margin-top:30px;
      padding:30px;
      background:#1f2d3a;
      color:#fff;
      border-radius:24px;
    }

    .cta h2{
      margin:0 0 10px;
      color:#fff;
      font-size:30px;
    }

    .cta p{
      color:#dde5eb;
      margin:0 0 18px;
      font-size:16px;
    }

    .cta a.button{
      display:inline-block;
      padding:13px 18px;
      background:#fff;
      color:#1f2d3a;
      border-radius:12px;
      font-weight:800;
    }

    .summary{
      margin-top:28px;
      padding-top:24px;
      border-top:1px solid #ebdfd0;
    }

    .summary p{
      margin:0;
      font-size:16px;
    }

    @media (max-width: 960px){
      h1{font-size:42px}
      .content{
        grid-template-columns:1fr;
      }
      .toc{
        position:static;
      }
      .checklist,
      .split-note{
        grid-template-columns:1fr;
      }
    }

    @media (max-width: 640px){
      .wrap{padding:0 16px}
      .hero{padding:36px 0 18px}
      h1{font-size:34px}
      .lead{font-size:17px}
      .article-card{padding:22px}
      .section h2{font-size:28px}
      .comparison{
        overflow-x:auto;
      }
      .comparison table{
        min-width:700px;
      }
      .cta{
        padding:22px;
      }
    }