/* ============================================================
   Scraplift — marketing site styles
   Built from Scraplift-Brand.html (v1.0). Three fonts, three colors.
   Yellow signals "best pay" / primary action only — never decoration.
   ============================================================ */

:root{
  --ink:#0E0E0C; --paper:#FBF9F2; --cream:#F2EEDE;
  --line:#E1DDD0; --mute:#5C5B55;
  --acc:#E8FF54; --acc-deep:#C8DC2F;
  --warn:#C84A1F; --pos:#0E8245; --info:#1F6D9A;

  --r-pill:99px; --r-card:18px; --r-screen:38px; --r-tile:14px;

  --font-display:'Instrument Serif', Georgia, serif;
  --font-ui:'Inter', system-ui, sans-serif;
  --font-mono:'JetBrains Mono', Menlo, monospace;

  --wrap:1120px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font-ui); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }

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

/* ---- shared type ---- */
h1,h2,h3,h4{ margin:0; font-weight:400; }
.cap{
  font-family:var(--font-mono); font-size:11px; font-weight:500;
  letter-spacing:1px; text-transform:uppercase; color:var(--mute);
}
em{ font-style:italic; font-family:var(--font-display); color:var(--mute); }

/* ---- buttons ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-ui); font-weight:600; font-size:15px;
  padding:14px 22px; border-radius:var(--r-pill); border:1.5px solid transparent;
  cursor:pointer; transition:transform .06s ease, background .15s ease, opacity .15s ease;
  white-space:nowrap;
}
.btn:active{ transform:translateY(1px); }
.btn-sm{ padding:9px 16px; font-size:14px; }
.btn-ink{ background:var(--ink); color:#fff; }
.btn-ink:hover{ background:#000; }
.btn-acc{ background:var(--acc); color:var(--ink); }
.btn-acc:hover{ background:var(--acc-deep); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--ink); }
.btn-ghost:hover{ background:var(--ink); color:#fff; }

/* ---- pills ---- */
.pill{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:11px; font-weight:600;
  letter-spacing:0.5px; text-transform:uppercase;
  padding:6px 12px; border-radius:var(--r-pill);
  background:var(--cream); color:var(--ink); border:1px solid var(--line);
}
.pill.ink{ background:var(--ink); color:#fff; border-color:var(--ink); }
.pill.acc{ background:var(--acc); color:var(--ink); border-color:var(--acc); }
.dot{ width:7px; height:7px; border-radius:50%; background:var(--acc); }
.dot.live{ box-shadow:0 0 0 0 rgba(232,255,84,.6); animation:pulse 1.8s infinite; }
@keyframes pulse{ 0%{box-shadow:0 0 0 0 rgba(232,255,84,.6);} 70%{box-shadow:0 0 0 7px rgba(232,255,84,0);} 100%{box-shadow:0 0 0 0 rgba(232,255,84,0);} }

/* ============ HEADER ============ */
.site-header{
  position:sticky; top:0; z-index:60;
  background:rgba(251,249,242,.9); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.site-header .wrap{ display:flex; align-items:center; justify-content:space-between; height:64px; }
.brand{ display:inline-flex; align-items:center; gap:10px; font-family:var(--font-display); font-size:24px; letter-spacing:-0.5px; }
.brand .tile{ width:30px; height:30px; }
.brand .tile svg{ width:100%; height:100%; border-radius:8px; }
.nav{ display:flex; align-items:center; gap:26px; }
.nav a{ font-size:15px; font-weight:500; color:var(--ink); }
.nav a:hover{ color:var(--mute); }
.nav a.header-cta{ color:#fff; }
.nav a.header-cta:hover{ color:#fff; }
.burger{ display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:8px; }
.burger span{ width:24px; height:2px; background:var(--ink); border-radius:2px; transition:.2s; }

/* ============ HERO ============ */
.hero{ padding:64px 0 56px; }
.hero .wrap{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:center; }
.hero h1{
  font-family:var(--font-display); font-size:84px; line-height:0.94;
  letter-spacing:-2px; margin:18px 0 8px;
}
.hero h1 em{ color:var(--ink); }
.hero-sub{ font-family:var(--font-display); font-style:italic; font-size:26px; color:var(--mute); margin:0 0 18px; }
.hero-body{ font-size:16px; line-height:1.6; max-width:500px; color:#28261E; margin:0 0 26px; }

.capture{ display:flex; gap:10px; flex-wrap:wrap; max-width:520px; }
.field{
  font-family:var(--font-ui); font-size:15px; color:var(--ink);
  background:#fff; border:1.5px solid var(--line); border-radius:var(--r-pill);
  padding:13px 18px; flex:1; min-width:200px; outline:none; transition:border .15s;
}
.field:focus{ border-color:var(--ink); }
.field.zip{ flex:0 0 96px; min-width:0; font-family:var(--font-mono); }
.capture .btn{ flex:0 0 auto; }
.capture-note{ margin:12px 0 0; }
.form-msg{ margin-top:12px; font-size:14px; font-weight:500; padding:10px 14px; border-radius:var(--r-tile); }
.form-msg.ok{ background:#DCEDC8; color:#1B5E20; }
.form-msg.err{ background:#FAD9CE; color:var(--warn); }

/* hero art / phone */
.hero-art{ position:relative; display:flex; align-items:center; justify-content:center; }
.phone{
  margin:0; width:min(300px, 78%); aspect-ratio:9/19.5;
  background:var(--ink); border-radius:var(--r-screen);
  border:8px solid var(--ink); box-shadow:0 30px 70px rgba(0,0,0,.18);
  overflow:hidden;
}
.phone .screen{ width:100%; height:100%; background:var(--ink); border-radius:30px; overflow:hidden; }
.phone .screen img{ width:100%; height:100%; object-fit:cover; }
.annot{
  position:absolute; z-index:2; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-tile); padding:10px 14px; box-shadow:0 10px 30px rgba(0,0,0,.10);
  max-width:210px;
}
.annot .k{ font-family:var(--font-mono); font-size:9.5px; letter-spacing:1px; text-transform:uppercase; color:var(--mute); }
.annot .v{ font-size:13px; font-weight:600; margin-top:3px; }
.annot.tl{ top:8%; left:-4%; }
.annot.br{ bottom:8%; right:-4%; }

/* ============ SECTIONS ============ */
.section{ padding:72px 0; border-top:1px solid var(--line); }
.section-head{ max-width:680px; margin:0 0 40px; }
.section-head h2,
.foryards h2, .cta h2{
  font-family:var(--font-display); font-size:48px; line-height:1.02; letter-spacing:-0.8px; margin:10px 0 12px;
}
.section-head p{ font-size:16px; color:var(--mute); margin:0; }

/* ============ HOW IT WORKS ============ */
.howx-tabs{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:28px; }
.howx-tab{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-ui); font-size:14px; font-weight:600; color:var(--mute);
  background:var(--cream); border:1px solid var(--line); border-radius:var(--r-pill);
  padding:9px 16px; cursor:pointer; transition:.15s;
}
.howx-tab .tn{
  font-family:var(--font-mono); font-size:11px; font-weight:700;
  width:20px; height:20px; border-radius:50%; background:#fff; border:1px solid var(--line);
  display:inline-flex; align-items:center; justify-content:center;
}
.howx-tab[aria-selected="true"]{ background:var(--ink); color:#fff; border-color:var(--ink); }
.howx-tab[aria-selected="true"] .tn{ background:var(--acc); border-color:var(--acc); color:var(--ink); }

.howx-stage{
  background:var(--cream); border:1px solid var(--line); border-radius:var(--r-card);
  padding:36px; min-height:420px;
}
.howx-panel{ display:grid; grid-template-columns:0.8fr 1.2fr; gap:48px; align-items:center; }
.howx-panel[hidden]{ display:none; }
.howx-art{ display:flex; justify-content:center; }
.howx-art .phone{ width:min(250px, 100%); }
.step-k{ font-family:var(--font-mono); font-size:11px; letter-spacing:1px; text-transform:uppercase; color:var(--mute); }
.howx-text h3{ font-family:var(--font-display); font-size:40px; line-height:1.02; letter-spacing:-0.8px; margin:8px 0 12px; }
.howx-text p{ font-size:16px; color:#28261E; margin:0 0 18px; max-width:480px; }
.readout{ display:flex; gap:10px; flex-wrap:wrap; }
.chip{
  font-family:var(--font-mono); font-size:12px; color:var(--ink);
  background:#fff; border:1px solid var(--line); border-radius:var(--r-pill); padding:7px 12px;
}
.chip b{ font-weight:700; }
.chip.pos{ color:var(--pos); border-color:#bfe3cd; }
.chip.warn{ color:var(--warn); border-color:#f0cdbf; }
.howx-dots{ display:flex; justify-content:center; gap:8px; margin-top:22px; }
.howx-dot{ width:9px; height:9px; border-radius:50%; background:var(--line); border:0; cursor:pointer; padding:0; transition:.2s; }
.howx-dot[aria-current="true"]{ background:var(--ink); width:24px; border-radius:5px; }

/* ============ FEATURES ============ */
.feat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.feat-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-card); padding:24px;
}
.feat-card .ic{ display:inline-flex; width:40px; height:40px; align-items:center; justify-content:center;
  border-radius:var(--r-tile); background:var(--cream); color:var(--ink); margin-bottom:14px; }
.feat-card .ic svg{ width:22px; height:22px; }
.feat-card h4{ font-size:16px; font-weight:700; margin:0 0 6px; }
.feat-card p{ font-size:14px; color:var(--mute); margin:0; line-height:1.5; }
.feat-card .tagnum{ font-family:var(--font-mono); font-size:12px; font-weight:700; color:var(--pos); white-space:nowrap; }
.feat-card.dark{ background:var(--ink); color:#fff; }
.feat-card.dark .ic{ background:rgba(255,255,255,.08); color:var(--acc); }
.feat-card.dark p{ color:rgba(255,255,255,.65); }

/* ============ FREE TOOLS ============ */
.tools{ background:var(--cream); }
.tool-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.tool-card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-card);
  padding:24px; display:flex; flex-direction:column; gap:8px; transition:.15s;
}
.tool-card:hover{ border-color:var(--ink); transform:translateY(-2px); }
.tool-card .badge{ align-self:flex-start; margin-bottom:6px; }
.tool-card h4{ font-size:19px; font-weight:700; }
.tool-card p{ font-size:14.5px; color:var(--mute); margin:0; flex:1; }
.tool-card .go{ font-family:var(--font-mono); font-size:12px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase; margin-top:8px; }
.tool-card .go .ar{ transition:.15s; display:inline-block; }
.tool-card:hover .go .ar{ transform:translateX(4px); }

/* ============ PRICING ============ */
.tier-toggle{ display:inline-flex; gap:4px; background:var(--cream); border:1px solid var(--line); border-radius:var(--r-pill); padding:4px; margin-top:18px; }
.tier-toggle button{
  font-family:var(--font-ui); font-size:13px; font-weight:600; color:var(--mute);
  background:transparent; border:0; border-radius:var(--r-pill); padding:8px 16px; cursor:pointer;
}
.tier-toggle button.on{ background:var(--ink); color:#fff; }
.tiers{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; align-items:stretch; }
.tier{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-card);
  padding:26px 22px; display:flex; flex-direction:column; position:relative;
}
.tier.featured{ border-color:var(--ink); box-shadow:0 20px 50px rgba(0,0,0,.10); }
.tier .badge{
  position:absolute; top:-11px; left:22px;
  font-family:var(--font-mono); font-size:10px; font-weight:700; letter-spacing:0.5px; text-transform:uppercase;
  background:var(--acc); color:var(--ink); padding:4px 10px; border-radius:var(--r-pill);
}
.tier .for{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:1px; text-transform:uppercase; color:var(--mute); }
.tier .name{ font-family:var(--font-display); font-size:34px; margin:6px 0 8px; }
.tier .price{ display:flex; align-items:baseline; gap:4px; }
.tier .amt{ font-family:var(--font-mono); font-size:32px; font-weight:700; letter-spacing:-1px; }
.tier .per{ font-family:var(--font-mono); font-size:13px; color:var(--mute); }
.tier .save{ font-family:var(--font-mono); font-size:11px; color:var(--pos); min-height:16px; margin-top:4px; }
.tier .blurb{ font-size:14px; color:var(--mute); line-height:1.5; margin:12px 0 20px; flex:1; }
.tier .tier-cta{ width:100%; }
.pricing-foot{ text-align:center; margin-top:26px; }

/* ============ FOR YARDS ============ */
.foryards{ background:var(--ink); color:#fff; padding:72px 0; }
.foryards .wrap{ display:grid; grid-template-columns:1.2fr 0.8fr; gap:48px; align-items:center; }
.foryards .cap{ color:var(--acc); }
.foryards h2{ color:#fff; }
.foryards h2 em{ color:var(--acc); }
.foryards p{ color:rgba(255,255,255,.72); font-size:16px; max-width:520px; margin:12px 0 22px; }
.yard-form{ display:flex; gap:10px; flex-wrap:wrap; max-width:540px; }
.yard-form .field{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.2); color:#fff; }
.yard-form .field::placeholder{ color:rgba(255,255,255,.5); }
.yard-form .field:focus{ border-color:var(--acc); }
.foryards-note{ margin-top:14px; }
.foryards-note .cap{ color:rgba(255,255,255,.5); }
.foryards-note a{ color:var(--acc); }
.yard-aside{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:var(--r-card); padding:26px; }
.yard-aside .q{ font-family:var(--font-mono); font-size:11px; letter-spacing:1px; text-transform:uppercase; color:var(--acc); margin-bottom:14px; }
.yard-aside ul{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:14px; }
.yard-aside li{ font-size:15px; line-height:1.45; padding-left:24px; position:relative; color:rgba(255,255,255,.85); }
.yard-aside li::before{ content:"→"; position:absolute; left:0; color:var(--acc); font-family:var(--font-mono); }

/* ============ BOTTOM CTA ============ */
.cta{ padding:80px 0; text-align:center; }
.cta h2{ font-family:var(--font-display); font-size:60px; line-height:0.98; letter-spacing:-1.5px; }
.cta h2 em{ color:var(--ink); }
.cta p{ font-size:17px; color:var(--mute); max-width:560px; margin:18px auto 28px; }
.cta .capture{ margin:0 auto; justify-content:center; }
.cta .form-msg{ max-width:520px; margin:12px auto 0; }
.cta .capture-note{ text-align:center; }

/* ============ FOOTER ============ */
.site-footer{ background:var(--cream); border-top:1px solid var(--line); padding:48px 0 28px; }
.site-footer .wrap{ display:flex; justify-content:space-between; gap:32px; flex-wrap:wrap; }
.foot-tag{ font-family:var(--font-mono); font-size:11px; line-height:1.8; color:var(--mute); margin-top:14px; letter-spacing:0.3px; }
.foot-links{ display:flex; flex-wrap:wrap; gap:14px 22px; align-content:flex-start; max-width:420px; }
.foot-links a{ font-size:14px; color:var(--mute); }
.foot-links a:hover{ color:var(--ink); }
.foot-legal{ margin-top:28px; padding-top:18px; border-top:1px solid var(--line); }

/* ============ RESPONSIVE ============ */
@media (max-width:960px){
  .hero .wrap{ grid-template-columns:1fr; gap:36px; }
  .hero h1{ font-size:64px; }
  /* heading + copy lead on mobile; screenshot sits below */
  .hero-art{ order:0; }
  .feat-grid{ grid-template-columns:repeat(2,1fr); }
  .tiers{ grid-template-columns:repeat(2,1fr); }
  .howx-panel{ grid-template-columns:1fr; gap:28px; }
  .howx-art{ order:-1; }
  .foryards .wrap{ grid-template-columns:1fr; }
  .tool-grid{ grid-template-columns:1fr; }
}
@media (max-width:680px){
  .nav{
    position:fixed; inset:64px 0 auto 0; flex-direction:column; align-items:stretch; gap:0;
    background:var(--paper); border-bottom:1px solid var(--line); padding:8px 24px 16px;
    transform:translateY(-120%); transition:transform .25s ease; box-shadow:0 20px 40px rgba(0,0,0,.08);
  }
  .nav.open{ transform:translateY(0); }
  .nav a{ padding:14px 0; border-bottom:1px solid var(--line); }
  .nav a.header-cta{ margin-top:12px; border-bottom:0; }
  .burger{ display:flex; }
  .hero h1{ font-size:52px; }
  .section{ padding:52px 0; }
  .section-head h2, .foryards h2{ font-size:38px; }
  .cta h2{ font-size:44px; }
  .howx-text h3{ font-size:32px; }
  .howx-stage{ padding:24px; }
  .capture, .yard-form{ flex-direction:column; align-items:stretch; }
  .field, .field.zip{ flex:1 1 auto; width:100%; }
  .site-footer .wrap{ flex-direction:column; }
}

/* ============ YARD DIRECTORY ============ */
.dir-wrap{ padding:48px 0 72px; }
.crumbs{ font-family:var(--font-mono); font-size:12px; color:var(--mute); margin-bottom:18px; display:flex; gap:8px; flex-wrap:wrap; }
.crumbs a{ color:var(--mute); text-decoration:underline; }
.crumbs b{ color:var(--ink); font-weight:700; }
.dir-h1{ font-family:var(--font-display); font-size:56px; line-height:1; letter-spacing:-1.5px; margin:8px 0 10px; }
.dir-lede{ font-size:17px; color:var(--mute); max-width:640px; margin:0 0 26px; }
.dir-search{ display:flex; gap:10px; max-width:560px; margin-bottom:14px; flex-wrap:wrap; }
.dir-search .field{ flex:1; min-width:220px; }
.dir-sub{ font-family:var(--font-display); font-size:28px; margin:36px 0 16px; }
.dir-states{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.dir-state{
  display:flex; justify-content:space-between; align-items:center; gap:8px;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-tile);
  padding:14px 16px; font-size:15px; font-weight:600; transition:.15s;
}
.dir-state:hover{ border-color:var(--ink); transform:translateY(-1px); }
.dir-count{ font-family:var(--font-mono); font-size:12px; color:var(--mute); background:var(--cream); border-radius:var(--r-pill); padding:2px 9px; }
.dir-results{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:8px 0; }
.dir-card{
  display:flex; flex-direction:column; gap:6px;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-card);
  padding:18px 20px; transition:.15s;
}
.dir-card:hover{ border-color:var(--ink); transform:translateY(-2px); }
.dir-card-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.dir-card h3{ font-size:17px; font-weight:700; line-height:1.25; }
.dir-meta{ font-size:14px; color:var(--mute); }
.dir-rate{ font-family:var(--font-mono); font-size:12px; color:var(--mute); }
.dir-card .go{ font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; margin-top:6px; }
.dir-card .go .ar{ display:inline-block; transition:.15s; }
.dir-card:hover .go .ar{ transform:translateX(4px); }
.dir-actions{ font-size:13px; color:var(--mute); margin-top:4px; }
.dir-actions a{ color:var(--info); }
.dir-cities{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:24px; }
.dir-empty{ color:var(--mute); padding:18px 0; }
.pill.badge{ font-size:9.5px; padding:4px 9px; }

/* per-yard detail */
.yard-detail{ display:grid; grid-template-columns:1.4fr 0.6fr; gap:40px; align-items:start; margin-top:8px; }
.yard-actions{ display:flex; gap:10px; flex-wrap:wrap; margin:18px 0 8px; }
.yard-hours{ width:100%; border-collapse:collapse; max-width:360px; }
.yard-hours td{ padding:9px 0; border-bottom:1px solid var(--line); font-size:14px; }
.yard-hours td:first-child{ font-weight:600; width:130px; }
.yard-hours td:last-child{ font-family:var(--font-mono); font-size:13px; color:var(--mute); }
.yard-side{ display:flex; flex-direction:column; gap:16px; }
.yard-card-cta{ background:var(--ink); color:#fff; border-radius:var(--r-card); padding:24px; }
.yard-card-cta h3{ font-family:var(--font-display); font-size:24px; margin-bottom:8px; }
.yard-card-cta p{ font-size:14px; color:rgba(255,255,255,.7); margin:0 0 16px; }
.yard-claim{ background:var(--cream); border:1px solid var(--line); border-radius:var(--r-card); padding:24px; }
.yard-claim .q{ font-family:var(--font-mono); font-size:11px; letter-spacing:1px; text-transform:uppercase; color:var(--mute); margin-bottom:8px; }
.yard-claim p{ font-size:14px; color:var(--mute); margin:0 0 14px; }

@media (max-width:960px){
  .dir-states{ grid-template-columns:repeat(2,1fr); }
  .dir-results{ grid-template-columns:repeat(2,1fr); }
  .yard-detail{ grid-template-columns:1fr; gap:28px; }
}
@media (max-width:680px){
  .dir-h1{ font-size:40px; }
  .dir-states, .dir-results{ grid-template-columns:1fr; }
}

/* ============ CHEAT SHEET (embedded field guide) ============ */
.cheat-band{ background:#2D2C28; padding:56px 0; margin-top:56px; }
.promo{ color:#EFEAD8; margin-bottom:28px; }
.promo .cap{ color:#8a877a; }
.promo h2{ font-family:var(--font-display); font-size:48px; line-height:0.96; letter-spacing:-1.2px; margin:8px 0 14px; max-width:760px; }
.promo h2 i{ color:#8a877a; }
.promo p{ font-size:16px; max-width:580px; line-height:1.55; color:#cdc7b3; margin:0; }
.promo .actions{ display:flex; gap:10px; margin-top:22px; flex-wrap:wrap; }

.sheet{ width:8.5in; max-width:100%; min-height:11in; background:var(--paper); color:var(--ink);
  margin:0 auto; box-shadow:0 32px 80px rgba(0,0,0,0.5); padding:0.5in;
  display:flex; flex-direction:column; gap:0.18in; font-size:11px; line-height:1.4; position:relative; overflow:hidden; }
.sh-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:24px; border-bottom:3px solid var(--ink); padding-bottom:14px; }
.sh-head .eyebrow{ font-family:var(--font-mono); font-size:9.5px; letter-spacing:1.5px; text-transform:uppercase; color:var(--mute); }
.sh-head h3{ font-family:var(--font-display); font-size:46px; line-height:0.92; letter-spacing:-1.2px; margin:4px 0 0; font-weight:400; }
.sh-head h3 i{ color:var(--mute); }
.sh-head .meta{ text-align:right; }
.sh-head .meta .mark{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-display); font-size:18px; }
.sh-head .meta .mark .tile{ width:26px; height:26px; } .sh-head .meta .mark .tile svg{ width:100%; border-radius:5px; }
.sh-head .meta .date{ font-family:var(--font-mono); font-size:9.5px; letter-spacing:1.2px; text-transform:uppercase; color:var(--mute); margin-top:6px; }
.sh-head .meta .date b{ color:var(--ink); font-weight:700; }
.legend{ display:flex; justify-content:space-between; align-items:center; background:var(--cream); border:1px solid var(--line); border-radius:10px; padding:8px 12px; font-family:var(--font-mono); font-size:9.5px; letter-spacing:0.5px; text-transform:uppercase; flex-wrap:wrap; gap:6px; }
.legend .lg-item{ display:flex; align-items:center; gap:6px; }
.legend .swatch{ display:inline-block; width:14px; height:14px; border-radius:3px; }
.legend .pri-hi{ background:#7ED99B; } .legend .pri-md{ background:#FFD37A; } .legend .pri-lo{ background:#E1DDD0; }
.metals-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; flex:1; }
.mcard{ background:#fff; border:1px solid var(--line); border-radius:10px; padding:10px 11px; display:flex; flex-direction:column; gap:5px; position:relative; overflow:hidden; }
.mcard .header{ display:grid; grid-template-columns:34px minmax(0,1fr); gap:8px; align-items:start; padding-right:26px; }
.mcard .header > div{ min-width:0; }
.mcard .visual{ width:34px; height:34px; border-radius:7px; overflow:hidden; }
.mcard .name{ font-family:var(--font-display); font-size:14px; line-height:1.15; font-weight:400; letter-spacing:-0.3px; text-align:left; white-space:normal; overflow-wrap:anywhere; word-break:break-word; }
.mcard .grade{ font-family:var(--font-mono); font-size:8px; letter-spacing:0.5px; text-transform:uppercase; color:var(--mute); margin-top:2px; text-align:left; white-space:normal; overflow-wrap:anywhere; }
.mcard .tier{ border-width:0 18px 18px 0 !important; }
.mcard .price-row{ display:flex; align-items:baseline; gap:6px; border-top:1px solid var(--line); padding-top:5px; margin-top:1px; }
.mcard .price{ font-family:var(--font-mono); font-weight:700; font-size:18px; letter-spacing:-0.5px; font-variant-numeric:tabular-nums; }
.mcard .ppl{ font-family:var(--font-mono); font-size:8.5px; color:var(--mute); letter-spacing:0.5px; }
.mcard .tier{ position:absolute; top:0; right:0; width:0; height:0; border-style:solid; border-width:0 24px 24px 0; border-color:transparent; }
.mcard.hi .tier{ border-color:transparent #7ED99B transparent transparent; }
.mcard.md .tier{ border-color:transparent #FFD37A transparent transparent; }
.mcard.lo .tier{ border-color:transparent #C8C5B6 transparent transparent; }
.mcard .look{ font-size:9.5px; line-height:1.4; color:#28261E; }
.mcard .look b, .mcard .where b{ font-family:var(--font-mono); font-size:8px; letter-spacing:0.8px; text-transform:uppercase; color:var(--mute); display:block; margin-bottom:1px; font-weight:700; }
.mcard .where{ font-size:9.5px; line-height:1.4; color:#28261E; font-style:italic; }
.mcard .where b{ font-style:normal; }
.bottom{ display:grid; grid-template-columns:1.2fr 0.8fr; gap:8px; margin-top:auto; }
.tips{ background:var(--ink); color:var(--paper); border-radius:10px; padding:11px 13px; }
.tips h3{ font-family:var(--font-mono); font-size:9.5px; letter-spacing:1.2px; text-transform:uppercase; color:var(--acc); margin:0 0 6px; }
.tips ol{ margin:0; padding-left:14px; font-size:10px; line-height:1.45; }
.tips ol li{ margin-bottom:2px; } .tips ol li b{ color:var(--acc); }
.ctabox{ background:var(--acc); border-radius:10px; padding:13px 15px; display:flex; flex-direction:column; justify-content:center; gap:4px; }
.ctabox h4{ font-family:var(--font-display); font-size:21px; line-height:1; margin:0; font-weight:400; }
.ctabox p{ font-size:9.5px; line-height:1.4; margin:4px 0 0; color:#28261E; }
.ctabox .url{ font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:0.5px; margin-top:6px; }
.sh-foot{ font-family:var(--font-mono); font-size:8px; letter-spacing:0.8px; text-transform:uppercase; color:var(--mute); display:flex; justify-content:space-between; gap:8px; padding-top:6px; border-top:1px solid var(--line); flex-wrap:wrap; }
.wmark{ position:absolute; right:-40px; bottom:80px; font-family:var(--font-display); font-size:180px; opacity:0.04; transform:rotate(-8deg); pointer-events:none; font-style:italic; color:var(--ink); letter-spacing:-4px; }
@media (max-width:760px){
  .promo h2{ font-size:36px; }
  .metals-grid{ grid-template-columns:repeat(2,1fr); }
  .bottom{ grid-template-columns:1fr; }
}
@media print{
  .site-header, .site-footer, .promo, .dir-wrap, .modal-bg{ display:none !important; }
  .cheat-band{ background:#fff !important; padding:0 !important; margin:0 !important; }
  .sheet{ box-shadow:none !important; margin:0 auto !important; width:100% !important; min-height:auto !important; padding:0 !important; gap:0.14in; }
  /* Force the design's colors to actually print (browsers drop backgrounds by default). */
  .sheet, .sheet *, .mcard, .tips, .ctabox, .legend, .visual, .tier, .swatch{
    -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important;
  }
  @page{ size:letter; margin:0.3in; }
}

/* email-gate modal (shared) */
.modal-bg{ position:fixed; inset:0; background:rgba(14,14,12,.55); display:none; align-items:center; justify-content:center; z-index:100; padding:20px; }
.modal-bg.open{ display:flex; }
.modal{ background:var(--paper); border-radius:var(--r-card); padding:28px; max-width:380px; width:100%; }
.modal h3{ font-family:var(--font-display); font-size:26px; margin:0 0 6px; }
.modal p{ font-size:14px; color:var(--mute); margin:0 0 16px; }
.modal .field{ width:100%; margin-bottom:10px; }
.modal .btn{ width:100%; }
.modal .x{ float:right; background:none; border:0; font-size:22px; color:var(--mute); cursor:pointer; line-height:1; }
.modal .form-msg{ margin-top:10px; }

/* today's rates table */
.rates-table{ width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--line); border-radius:var(--r-card); overflow:hidden; }
.rates-table th{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:1px; text-transform:uppercase; color:var(--mute); text-align:left; padding:12px 16px; background:var(--cream); border-bottom:1px solid var(--line); }
.rates-table th:not(:first-child), .rates-table td:not(:first-child){ text-align:right; }
.rates-table td{ padding:12px 16px; border-bottom:1px solid var(--line); font-size:15px; }
.rates-table tr:last-child td{ border-bottom:none; }
.rates-table td.mono{ font-family:var(--font-mono); font-weight:700; font-variant-numeric:tabular-nums; }
.rates-table .lb{ font-family:var(--font-mono); font-weight:400; font-size:11px; color:var(--mute); }
.rates-table .muted{ color:var(--mute); }
.rates-note{ margin:10px 0 0; }

/* ============ MOBILE OPTIMIZATION (phones) ============ */
@media (max-width:540px){
  /* pricing: stack to one even column instead of two uneven ones */
  .tiers{ grid-template-columns:1fr; }
  .tier{ min-width:0; }
  /* cheat sheet: 1 column, tighter sheet so cards aren't cramped */
  .cheat-band{ padding:32px 0; margin-top:36px; }
  .promo h2{ font-size:30px; }
  .sheet{ padding:18px; gap:14px; }
  .sh-head{ flex-direction:column; align-items:flex-start; gap:8px; }
  .sh-head .meta{ text-align:left; }
  .sh-head h3{ font-size:34px; }
  .legend{ flex-direction:column; align-items:flex-start; gap:5px; }
  .metals-grid{ grid-template-columns:1fr; }
  /* rates table: tighten padding so 3 columns fit a phone */
  .rates-table th, .rates-table td{ padding:10px 10px; font-size:13px; }
  .rates-table th{ font-size:9px; letter-spacing:0.5px; }
}
@media (max-width:430px){
  .hero h1{ font-size:40px; }
  .cta h2{ font-size:34px; }
  .dir-h1{ font-size:30px; }
  .section-head h2, .foryards h2{ font-size:32px; }
  .wrap{ padding:0 18px; }
}

/* ============ MOBILE: center headings ============ */
@media (max-width:640px){
  .hero-copy, .section-head, .foryards-copy, .promo, .cta{ text-align:center; }
  .section-head{ margin-left:auto; margin-right:auto; }
  .dir-h1, .dir-lede, .dir-sub{ text-align:center; }
  .dir-wrap > .wrap > .cap{ display:block; text-align:center; }
  /* keep form fields full-width, just center the helper text */
  .capture-note, .rates-note, .foryards-note{ text-align:center; }
}

/* ============ MOBILE: how-it-works as centered number circles + swipe carousel ============ */
@media (max-width:640px){
  .howx-tabs{ justify-content:center; gap:14px; flex-wrap:nowrap; margin-bottom:20px; }
  .howx-tab{ font-size:0; padding:0; background:transparent; border:0; }
  .howx-tab .tn{ font-size:13px; width:36px; height:36px; border:1.5px solid var(--line); background:#fff; }
  .howx-tab[aria-selected="true"]{ background:transparent; }
  .howx-tab[aria-selected="true"] .tn{ background:var(--acc); border-color:var(--ink); color:var(--ink); }

  /* Stage becomes a horizontal scroll-snap carousel; each panel takes the full
     viewport. scroll-snap-stop:always so a flick only advances ONE panel even
     if it traveled far — that's the "less sensitive" feel. */
  .howx-stage{
    display:flex; flex-direction:row; gap:0;
    overflow-x:auto; overflow-y:hidden;
    scroll-snap-type:x mandatory; scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch;
    padding:0; margin:0 -16px;
    scrollbar-width:none;
  }
  .howx-stage::-webkit-scrollbar{ display:none; }
  .howx-panel{
    flex:0 0 100%; scroll-snap-align:center; scroll-snap-stop:always;
    display:grid !important;
    grid-template-columns:1fr; gap:18px;
    padding:24px 22px;
    align-content:start;
  }
  /* All panels normalized to the same visual frame so swiping doesn't make slide
     2 look offset vs slide 1: same phone art height, same caption block top. */
  .howx-panel .howx-art{ min-height:340px; align-items:flex-start; justify-content:center; }
  .howx-panel .howx-art .phone{ width:min(220px,80%); }
  .howx-panel .howx-text{ min-height:240px; }
  .howx-panel .step-k{ display:block; margin-bottom:6px; }
  /* Override the desktop "hide unless active" — all panels live in the strip. */
  .howx-panel[hidden]{ display:grid !important; }

  /* Hint row: subtle "← swipe →" and dots, always visible on mobile. */
  .howx-dots{ display:flex; justify-content:center; gap:8px; margin-top:14px; }
  .howx-swipe-hint{
    display:flex; align-items:center; justify-content:center; gap:8px;
    margin-top:10px; font-family:var(--font-mono); font-size:10px;
    letter-spacing:1.5px; text-transform:uppercase; color:var(--mute);
  }
  .howx-swipe-hint .arrow{ display:inline-block; animation:howxNudge 1.6s ease-in-out infinite; }
}

/* Hide the swipe hint above mobile breakpoint. */
@media (min-width:641px){
  .howx-swipe-hint{ display:none; }
}

@keyframes howxNudge {
  0%, 100% { transform:translateX(0); opacity:0.55; }
  50%      { transform:translateX(4px); opacity:1; }
}