:root{
    --ink:#1d1a16; --muted:#6b645a; --paper:#faf7f1; --card:#ffffff;
    --line:#e6dfd2; --accent:#c2541b; --accent-dark:#9c4212; --wood:#f1e6d3;
    --ok:#2f7a4d;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0;background:var(--paper);color:var(--ink);
    font:17px/1.6 "Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif}
  .sans,h1,h2,h3,nav,.btn,.price,.tabbar,table,.eyebrow,footer,.faq summary{
    font-family:ui-sans-serif,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
  a{color:var(--accent-dark)}
  .wrap{max-width:1080px;margin:0 auto;padding:0 24px}

  nav{display:flex;align-items:center;justify-content:space-between;padding:22px 0}
  .logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:19px;color:var(--ink);text-decoration:none}
  .logo svg{width:30px;height:30px}
  nav .links a{margin-left:22px;color:var(--muted);text-decoration:none;font-size:15px}
  nav .links a:hover{color:var(--ink)}

  .hero{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center;padding:48px 0 72px}
  .eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:12.5px;color:var(--accent-dark);font-weight:700}
  h1{font-size:50px;line-height:1.08;letter-spacing:-.02em;margin:14px 0 18px}
  .lede{font-size:19.5px;color:var(--muted);margin:0 0 30px;max-width:30em}
  .btn{display:inline-block;padding:14px 22px;border-radius:10px;font-weight:650;font-size:16px;text-decoration:none;transition:.15s}
  .btn-primary{background:var(--accent);color:#fff}
  .btn-primary:hover{background:var(--accent-dark)}
  .btn-ghost{color:var(--ink);border:1.5px solid var(--line);margin-left:10px;background:var(--card)}
  .btn-ghost:hover{border-color:var(--ink)}
  .fine{font-size:14px;color:var(--muted);margin-top:16px}

  /* product-page mockup */
  .mock{background:var(--card);border:1px solid var(--line);border-radius:16px;
    box-shadow:0 1px 0 var(--line),0 24px 48px -28px rgba(60,40,20,.35);overflow:hidden}
  .mock-top{display:flex;gap:18px;padding:22px}
  .mock-img{width:118px;height:118px;border-radius:10px;flex:none;
    background:linear-gradient(135deg,#efe3cf,#d9c3a1);display:grid;place-items:center}
  .mock-img svg{width:64px;opacity:.75}
  .mock h3{margin:2px 0 4px;font-size:18px}
  .mock .amt{font-weight:700;color:var(--accent-dark)}
  .mock .meta{font-size:13px;color:var(--muted)}
  .tabbar{display:flex;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fcfaf6;font-size:13.5px}
  .tabbar span{padding:11px 16px;color:var(--muted);border-right:1px solid var(--line)}
  .tabbar span.on{background:var(--card);color:var(--ink);font-weight:650;box-shadow:inset 0 -2px 0 var(--accent)}
  .mock-body{padding:18px 22px 22px;font-size:15px}
  .mock-body table{width:100%;border-collapse:collapse;font-size:13.5px;margin-top:6px}
  .mock-body td{padding:6px 0;border-bottom:1px dashed var(--line)}
  .filled{background:#fdf0d9;border-radius:4px;padding:0 4px}
  .badge{display:inline-block;font-size:11.5px;font-weight:650;color:var(--ok);background:#e5f2ea;border-radius:99px;padding:3px 9px;margin-left:6px;vertical-align:2px}

  section{padding:72px 0;border-top:1px solid var(--line)}
  h2{font-size:34px;letter-spacing:-.015em;margin:0 0 12px;line-height:1.15}
  .sub{color:var(--muted);font-size:18.5px;margin:0 0 40px;max-width:36em}

  .features{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
  .feature{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:26px}
  .feature h3{margin:12px 0 8px;font-size:18px}
  .feature p{margin:0;color:var(--muted);font-size:16px}
  .icon{width:40px;height:40px;border-radius:10px;background:var(--wood);display:grid;place-items:center}
  .icon svg{width:22px;height:22px;stroke:var(--accent-dark);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.86em;background:var(--wood);padding:1px 6px;border-radius:5px}

  .compare{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;font-size:15.5px}
  .compare th,.compare td{padding:14px 20px;text-align:left;border-bottom:1px solid var(--line)}
  .compare th{background:#fcfaf6;font-size:14px;color:var(--muted);font-weight:650}
  .compare td:not(:first-child),.compare th:not(:first-child){text-align:center;width:22%}
  .compare tr:last-child td{border-bottom:0}
  .yes{color:var(--ok);font-weight:700}
  .no{color:#b5ab9c}

  .prices{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
  .plan{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:30px;display:flex;flex-direction:column}
  .plan.pick{border:2px solid var(--accent);position:relative}
  .plan.pick:before{content:"Most stores";position:absolute;top:-12px;left:28px;background:var(--accent);color:#fff;
    font:650 12px ui-sans-serif,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;padding:3px 10px;border-radius:99px}
  .plan h3{margin:0;font-size:17px;color:var(--muted);font-weight:650}
  .price{font-size:44px;font-weight:750;margin:10px 0 2px;letter-spacing:-.02em}
  .price small{font-size:16px;color:var(--muted);font-weight:500}
  .plan p{color:var(--muted);font-size:15.5px;margin:4px 0 24px;flex:1}
  .plan .btn{text-align:center}
  .guarantee{margin-top:28px;display:flex;gap:14px;align-items:flex-start;color:var(--muted);font-size:16px;max-width:44em}
  .guarantee strong{color:var(--ink)}

  .faq details{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px 22px;margin-bottom:12px}
  .faq summary{cursor:pointer;font-weight:650;font-size:16.5px}
  .faq details p{margin:12px 0 0;color:var(--muted)}

  .shots{display:grid;grid-template-columns:1.25fr 1fr;gap:22px;align-items:start}
  .shot{margin:0;background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden}
  .shot img{display:block;width:100%;height:auto;border-bottom:1px solid var(--line)}
  .shot figcaption{padding:14px 18px;font-size:15px;color:var(--muted)}
  .shot figcaption strong{color:var(--ink)}
  .shot.wide{grid-row:span 2}
  .tags{display:grid;grid-template-columns:repeat(2,1fr);gap:0 28px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:10px 24px}
  .tags div{display:flex;gap:14px;align-items:baseline;padding:11px 0;border-bottom:1px dashed var(--line);font-size:15.5px}
  .tags div code{flex:none;min-width:170px}
  .tags span{color:var(--muted)}
  .note{margin-top:12px;font-size:15px;color:var(--muted)}

  footer{border-top:1px solid var(--line);padding:32px 0 48px;font-size:14px;color:var(--muted)}
  footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}

  @media (max-width:860px){
    .hero{grid-template-columns:1fr;gap:36px;padding-top:24px}
    h1{font-size:38px}
    .features,.prices,.shots,.tags{grid-template-columns:1fr}
    .shot.wide{grid-row:auto}
    .tags div code{min-width:140px}
    nav .links a:not(.keep){display:none}
    .btn-ghost{margin:10px 0 0}
    .compare th,.compare td{padding:12px 12px}
  }