/* ============================================================
   STACK METHOD — 3-layer explainer, example table,
   checklist, resources. Matches the XpressCoupon system.
   ============================================================ */

/* ---- layers (numbered rows) ---- */
.layers{ display:flex; flex-direction:column; gap:18px; margin-top:10px; }
.layer{
  display:grid; grid-template-columns:64px 1fr; gap:22px; align-items:start;
  background:var(--surface); border:1px solid var(--line-soft);
  border-radius:var(--r-lg); padding:clamp(20px,3vw,32px); box-shadow:var(--shadow-sm);
}
.layer__num{
  width:64px; height:64px; border-radius:18px; display:grid; place-items:center;
  font-family:var(--font-display); font-weight:700; font-size:27px; color:#fff;
  background:linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow:0 10px 22px var(--accent-glow);
}
.layer__kicker{
  font-family:var(--font-display); font-weight:600; font-size:12px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--accent);
}
.layer__body h3{ font-size:clamp(19px,2.4vw,25px); margin-top:5px; letter-spacing:-.01em; }
.layer__body p{ color:var(--ink-soft); margin-top:10px; font-size:15.5px; line-height:1.55; }
.layer__body p a{ color:var(--accent); font-weight:600; text-decoration:underline; text-underline-offset:2px; }
.layer__foot{ font-style:italic; color:var(--ink-faint) !important; margin-top:12px !important; font-size:14px !important; }

/* numbered step list */
.layer-steps{ counter-reset:ls; margin-top:18px; display:flex; flex-direction:column; gap:11px; }
.layer-steps li{
  position:relative; padding-left:40px; font-size:15px; color:var(--ink); line-height:1.5;
}
.layer-steps li::before{
  counter-increment:ls; content:counter(ls);
  position:absolute; left:0; top:-2px;
  width:28px; height:28px; border-radius:50%;
  background:var(--accent-soft); color:var(--accent);
  font-family:var(--font-display); font-weight:700; font-size:13px;
  display:grid; place-items:center;
}
.layer-steps b, .layer__body b{ color:var(--ink); font-weight:700; }

/* callout note */
.note{
  display:flex; gap:12px; margin-top:18px; padding:14px 16px;
  border-radius:var(--r-md); font-size:14.5px; line-height:1.5;
  background:var(--bg-2); border:1px solid var(--line); color:var(--ink-soft);
}
.note svg{ flex:none; width:20px; height:20px; margin-top:1px; color:var(--accent); }
.note b{ color:var(--ink); }
.note--warn{ background:oklch(0.965 0.04 75); border-color:oklch(0.85 0.09 75); color:oklch(0.42 0.07 55); }
.note--warn svg{ color:var(--amber); }
.note--warn b{ color:oklch(0.34 0.08 50); }

/* store-coupon chips */
.chips{ display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.chip-btn{
  font-family:var(--font-display); font-weight:600; font-size:14px;
  padding:9px 16px; border-radius:10px;
  background:var(--accent-soft); color:var(--accent); border:1.5px dashed var(--accent);
}

/* ---- data tables (coin compare, example, resources) ---- */
.data-table{
  width:100%; border-collapse:collapse; margin-top:18px; font-size:14.5px;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-md); overflow:hidden;
}
.data-table th, .data-table td{ padding:12px 16px; text-align:left; border-bottom:1px solid var(--line); }
.data-table thead th{
  background:var(--ink); color:#fff;
  font-family:var(--font-display); font-weight:600; font-size:12px;
  letter-spacing:.05em; text-transform:uppercase;
}
.data-table tbody tr:last-child td{ border-bottom:0; }
.data-table td.num, .data-table th.num{ text-align:right; font-variant-numeric:tabular-nums; }
.data-table .hi{ color:var(--accent); font-weight:700; }
.data-table a{ color:var(--accent); font-weight:600; text-decoration:underline; text-underline-offset:2px; }
.data-table--lg{ font-size:16px; }
.data-table--lg td{ padding:14px 18px; }
.data-table tr.total td{ background:var(--accent-soft); font-weight:700; color:var(--ink); font-size:17px; }

/* ---- worked example / resources blocks ---- */
.stack-example, .resources, .checklist{ margin-top:clamp(30px,4vw,48px); }
.stack-example__head .eyebrow, .resources .eyebrow, .checklist .eyebrow{ margin-bottom:10px; display:inline-block; }
.stack-example__head h3, .resources h3, .checklist h3{ font-size:clamp(20px,2.8vw,28px); letter-spacing:-.01em; }
.stack-example__head p{ color:var(--ink-soft); margin-top:10px; font-size:15.5px; }
.stack-example__foot{ margin-top:14px; color:var(--ink-soft); font-size:15px; }
.stack-example__foot strong{ color:var(--accent); }
.stack-example{
  background:var(--surface); border:1px solid var(--line-soft);
  border-radius:var(--r-lg); padding:clamp(22px,3vw,34px); box-shadow:var(--shadow-sm);
}

/* ---- checklist ---- */
.checklist{
  background:var(--surface); border:1px solid var(--line-soft);
  border-radius:var(--r-lg); padding:clamp(22px,3vw,34px); box-shadow:var(--shadow-sm);
}
.checklist ul{ margin-top:20px; display:grid; grid-template-columns:1fr 1fr; gap:13px 30px; }
.checklist li{ position:relative; padding-left:34px; font-size:15px; color:var(--ink); line-height:1.5; }
.checklist li svg{ position:absolute; left:0; top:0; width:22px; height:22px; color:var(--green); }
@media (max-width:680px){ .checklist ul{ grid-template-columns:1fr; } }

/* spacing for the calculator block within the new flow */
#stack .calc{ margin-top:clamp(30px,4vw,48px); }

/* ---- responsive ---- */
@media (max-width:560px){
  .layer{ grid-template-columns:1fr; gap:16px; }
  .layer__num{ width:54px; height:54px; font-size:23px; border-radius:15px; }
  .data-table th, .data-table td{ padding:10px 12px; font-size:13.5px; }
}