:root {
  --ink:#20262b; --paper:#f7f3e9; --card:#fffdf8; --line:#d8d0bf;
  --accent:#c75f2c; --accent-dark:#8f3d18; --muted:#667078;
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
header { padding:54px 22px 48px; color:white; background:linear-gradient(140deg,#20262b 0%,#2e3439 65%,#553321 100%); }
.wrap { width:min(1180px,calc(100% - 36px)); margin:auto; }
.eyebrow { margin-bottom:14px; color:#e5a47e; font-size:12px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; }
h1 { max-width:850px; margin:0; font-family:Georgia,serif; font-size:clamp(40px,6vw,72px); font-weight:500; line-height:.98; letter-spacing:-.035em; }
.lead { max-width:760px; margin:22px 0 0; color:#e5e1d8; font-size:18px; line-height:1.55; }
.process { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; max-width:920px; margin-top:28px; }
.process span { padding:12px 14px; border:1px solid rgba(255,255,255,.22); border-radius:999px; background:rgba(255,255,255,.07); font-size:13px; font-weight:800; text-align:center; }
main { padding:44px 0 70px; }
.rule { margin-bottom:34px; padding:18px 20px; border:1px solid #e2c4af; border-radius:16px; background:#fff5ee; }
.rule strong { display:block; margin-bottom:3px; }
.rule p { margin:0; color:#5e554f; font-size:14px; line-height:1.45; }
.grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; }
.step { display:grid; grid-template-columns:minmax(0,340px) 1fr; gap:24px; align-items:start; min-height:520px; padding:24px; border:1px solid var(--line); border-radius:20px; background:var(--card); box-shadow:0 16px 45px rgba(40,34,25,.08); }
.step-copy { padding-top:6px; }
.step-no { display:inline-grid; place-items:center; width:34px; height:34px; margin-bottom:15px; border-radius:50%; color:white; background:var(--accent); font-size:15px; font-weight:900; }
h2 { margin:0 0 10px; font-family:Georgia,serif; font-size:29px; font-weight:500; line-height:1.08; }
.instruction { margin:0 0 14px; color:var(--accent-dark); font-size:15px; font-weight:850; line-height:1.4; }
.step-copy p:last-child { margin:0; color:var(--muted); font-size:14px; line-height:1.55; }
.phone { position:relative; width:100%; max-width:340px; overflow:hidden; border:8px solid #252b30; border-radius:28px; background:#252b30; box-shadow:0 20px 42px rgba(26,29,31,.2); }
.phone img { display:block; width:100%; height:auto; border-radius:19px; }
.pin { position:absolute; display:grid; place-items:center; width:42px; height:42px; border:4px solid white; border-radius:50%; color:white; background:var(--accent); box-shadow:0 3px 12px rgba(0,0,0,.35); font-size:17px; font-weight:900; transform:translate(-50%,-50%); }
.pin::after { content:""; position:absolute; inset:-10px; border:2px solid rgba(199,95,44,.48); border-radius:50%; }
.summary { margin-top:34px; padding:28px; border-radius:20px; color:white; background:var(--ink); }
.summary h2 { margin-bottom:12px; }
.summary ol { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:20px 0 0; padding:0; list-style:none; counter-reset:item; }
.summary li { counter-increment:item; padding:14px; border:1px solid rgba(255,255,255,.16); border-radius:12px; color:#e8e4da; font-size:13px; line-height:1.4; }
.summary li::before { content:counter(item); display:block; margin-bottom:7px; color:#f0a175; font-size:20px; font-weight:900; }
footer { padding:22px; color:#727a80; font-size:12px; text-align:center; }
@media (max-width:980px) {
  .grid { grid-template-columns:1fr; }
  .summary ol { grid-template-columns:1fr 1fr; }
}
@media (max-width:680px) {
  header { padding-top:36px; }
  .process { grid-template-columns:1fr 1fr; }
  .step { grid-template-columns:1fr; }
  .phone { margin:auto; }
  .step-copy { order:-1; }
  .summary ol { grid-template-columns:1fr; }
}