/* MetalMint public pages: landing, price pages, guides. Same tokens as the app. */
:root{
  --bg:#eef1ef; --surface:#ffffff; --sunk:#f4f7f5; --fg:#1f2527; --muted:#5b6765; --line:#d6ddda;
  --mint:#0b6e45; --mint-ink:#ffffff; --mint-soft:#e0f0e8; --warn:#9a6a00; --warn-soft:#fbf1d9; --bad:#b3261e;
  --ink:#151a1c; --ink-2:#1f2629; --ink-fg:#e9efec; --ink-muted:#9aa7a3; --ink-mint:#3fd393;
  --display:"Outfit",system-ui,-apple-system,sans-serif;
  --body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0e1312; --surface:#172020; --sunk:#121918; --fg:#e6ece9; --muted:#93a19d; --line:#27322f;
  --mint:#34c486; --mint-ink:#04140c; --mint-soft:#113222; --warn:#e2b44a; --warn-soft:#2c2412; --bad:#f08a80;
  --ink:#0a0e0d; --ink-2:#121918; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0e1312; --surface:#172020; --sunk:#121918; --fg:#e6ece9; --muted:#93a19d; --line:#27322f;
  --mint:#34c486; --mint-ink:#04140c; --mint-soft:#113222; --warn:#e2b44a; --warn-soft:#2c2412; --bad:#f08a80;
  --ink:#0a0e0d; --ink-2:#121918; color-scheme:dark}

.m-copper{background:linear-gradient(135deg,#f6b08a 0%,#cf6a34 42%,#9a4520 70%,#d9875b 100%)}
.m-brass{background:linear-gradient(135deg,#fbe68f 0%,#d1aa2c 45%,#8f6e12 72%,#e3c35a 100%)}
.m-bronze{background:linear-gradient(135deg,#eab37a 0%,#b56d37 45%,#70401d 72%,#c98a52 100%)}
.m-alum{background:linear-gradient(135deg,#f6f8f9 0%,#ccd1d5 40%,#959ca2 70%,#e3e6e9 100%)}
.m-stain{background:repeating-linear-gradient(90deg,rgba(255,255,255,.18) 0 1px,transparent 1px 3px),linear-gradient(135deg,#fdfeff 0%,#c2cad0 38%,#76818a 68%,#dfe4e8 100%)}
.m-steel{background:linear-gradient(135deg,#a5abaf 0%,#62686c 45%,#363b3e 75%,#7d8387 100%)}
.m-lead{background:linear-gradient(135deg,#adb4c3 0%,#727a8c 45%,#474d5b 75%,#8a91a1 100%)}
.m-gold{background:linear-gradient(135deg,#fff3ad 0%,#e6b83c 45%,#a5761a 72%,#f2d36f 100%)}
.m-pcb{background:repeating-linear-gradient(90deg,rgba(255,215,90,.35) 0 1px,transparent 1px 7px),repeating-linear-gradient(0deg,rgba(255,215,90,.25) 0 1px,transparent 1px 9px),linear-gradient(135deg,#2f8f4e,#14532d)}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.6 var(--body);
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:env(safe-area-inset-top,0px) 0}
img{max-width:100%}
a{color:var(--mint)}
:focus-visible{outline:2px solid var(--mint);outline-offset:2px}
.wrap{max-width:1080px;margin:0 auto}
.narrow{max-width:720px;margin:0 auto}
h1,h2,h3{font-family:var(--display);letter-spacing:-.4px;text-wrap:balance;margin:0}
.eyebrow{font:600 12px var(--display);letter-spacing:2.2px;text-transform:uppercase;color:var(--mint)}
.muted{color:var(--muted)}
.small{font-size:13.5px;color:var(--muted)}

/* nav */
.nav{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-block:14px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--fg);font:800 22px var(--display);letter-spacing:-.5px}
.brand img{width:36px;height:36px;border-radius:24%}
.brand .wm span{color:var(--mint)}
.navlinks{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.navlinks a.plain{color:var(--fg);text-decoration:none;font:600 14.5px var(--display)}
.navlinks a.plain:hover{color:var(--mint)}
.tools{display:flex;gap:8px;align-items:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:700 16px var(--display);padding:13px 22px;border-radius:14px;border:0;background:var(--mint);color:var(--mint-ink);text-decoration:none;cursor:pointer;box-shadow:0 3px 0 color-mix(in srgb,var(--mint) 60%,#000)}
.btn.alt{background:var(--surface);color:var(--fg);border:1px solid var(--line);box-shadow:none}
.btn.sm{font-size:14px;padding:9px 16px;border-radius:12px;box-shadow:none}
@media (max-width:720px){.navlinks a.plain{display:none}}

/* switches (same as the app) */
.tgl{position:relative;display:grid;grid-template-columns:1fr 1fr;align-items:center;width:84px;height:32px;padding:3px;border-radius:99px;border:1px solid var(--line);background:var(--sunk);cursor:pointer;color:var(--muted)}
.tgl::before{content:"";position:absolute;top:3px;left:3px;width:calc(50% - 3px);height:calc(100% - 6px);border-radius:99px;background:var(--mint);transition:transform .22s ease}
.tgl[data-active="es"]::before,.tgl[data-active="dark"]::before{transform:translateX(100%)}
.tgl>*{position:relative;z-index:1;display:grid;place-items:center;height:100%;border:0;background:none;padding:0;color:inherit;font:700 12px var(--display);letter-spacing:1px;cursor:pointer;text-decoration:none}
.tgl svg{width:16px;height:16px}
.tgl[data-active="en"] [data-lang="en"],.tgl[data-active="es"] [data-lang="es"],.tgl[data-active="light"]>span:first-child,.tgl[data-active="dark"]>span:last-child{color:var(--mint-ink)}
@media (prefers-reduced-motion:reduce){.tgl::before{transition:none}}

/* hero */
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;padding-block:28px 36px}
.hero h1{font-size:clamp(38px,6vw,64px);line-height:1.02;font-weight:800}
.hero h1 em{font-style:normal;color:var(--mint)}
.hero p.lead{font-size:clamp(17px,2vw,20px);color:var(--muted);max-width:34em;margin:18px 0 26px}
.ctas{display:flex;gap:10px;flex-wrap:wrap}
.chips{display:flex;gap:6px;margin-bottom:18px}
.chips span{width:30px;height:30px;border-radius:8px;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 2px 6px rgba(0,0,0,.2)}
.chips span:nth-child(odd){transform:rotate(-7deg)}.chips span:nth-child(even){transform:rotate(6deg) translateY(-3px)}
.phone{justify-self:center;width:min(330px,100%);aspect-ratio:9/18.5;border-radius:44px;background:var(--ink);padding:12px;box-shadow:0 30px 60px -20px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.06) inset;position:relative}
.phone img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;border-radius:34px;background:#eef1ef}
.phone::after{content:"";position:absolute;top:22px;left:50%;transform:translateX(-50%);width:84px;height:22px;border-radius:99px;background:var(--ink)}
@media (max-width:820px){.hero{grid-template-columns:1fr;gap:28px}.phone{width:min(290px,100%)}}

/* market strip */
.market{display:flex;flex-wrap:wrap;gap:10px 22px;align-items:center;background:var(--ink);color:var(--ink-fg);border-radius:18px;padding:14px 18px;margin-bottom:56px}
.market .lab{font:600 11px var(--display);letter-spacing:2px;text-transform:uppercase;color:var(--ink-muted)}
.market .it{display:flex;gap:7px;align-items:baseline;white-space:nowrap}
.market b{font:600 17px var(--mono);font-variant-numeric:tabular-nums}
.market .go{margin-left:auto;color:var(--ink-mint);font:600 14px var(--display);text-decoration:none}
.up{color:var(--ink-mint)}.down{color:#ff8a7f}.flat{color:var(--ink-muted)}
.chg{font:500 12px var(--mono)}

/* sections */
section.block{padding-block:20px 56px}
.block>h2{font-size:clamp(28px,4vw,40px);margin:6px 0 10px}
.block>p.sub{color:var(--muted);max-width:40em;margin:0 0 26px;font-size:17px}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;counter-reset:s}
.step{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:20px;display:grid;gap:8px;align-content:start}
.step::before{counter-increment:s;content:counter(s);font:800 15px var(--display);width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--mint);color:var(--mint-ink)}
.step h3{font-size:19px}
.step p{margin:0;color:var(--muted);font-size:15px}
@media (max-width:760px){.steps{grid-template-columns:1fr}}
.feat{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:center;padding-block:22px;border-top:1px solid var(--line)}
.feat:first-of-type{border-top:0}
.feat.flip .copy{order:2}
.feat h3{font-size:clamp(22px,3vw,28px);margin:6px 0 8px}
.feat p{margin:0 0 10px;color:var(--muted)}
.feat ul{margin:0;padding-left:18px;color:var(--fg)}
.feat ul li{margin:4px 0}
.shot{border-radius:22px;background:var(--surface);border:1px solid var(--line);padding:12px;box-shadow:0 18px 40px -24px rgba(0,0,0,.35)}
.shot img{display:block;width:100%;border-radius:14px;max-height:540px;object-fit:cover;object-position:top}
.shot svg{display:block;width:100%;height:auto;border-radius:14px}
@media (max-width:760px){.feat{grid-template-columns:1fr}.feat.flip .copy{order:0}}
.pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.pills span{font:600 13px var(--display);padding:6px 12px;border-radius:99px;background:var(--mint-soft);color:var(--mint)}

/* pricing */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.plan{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:22px;display:grid;gap:10px;align-content:start}
.plan.best{border:2px solid var(--mint)}
.plan .tag{justify-self:start;font:700 11px var(--display);letter-spacing:1.6px;text-transform:uppercase;background:var(--mint);color:var(--mint-ink);padding:3px 10px;border-radius:99px}
.plan h3{font-size:22px}
.price{font:600 34px var(--mono);letter-spacing:-1px}
.price small{font:500 15px var(--body);color:var(--muted);letter-spacing:0}
.plan ul{margin:0;padding-left:18px;color:var(--muted);font-size:15px}
.plan .btn{margin-top:6px}
@media (max-width:860px){.plans{grid-template-columns:1fr}}

/* guides + faq */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.card-link{display:grid;gap:6px;text-decoration:none;color:var(--fg);background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:16px}
.card-link:hover{border-color:var(--mint)}
.card-link b{font:600 16.5px var(--display)}
.card-link span{font-size:14px;color:var(--muted)}
details.faq{background:var(--surface);border:1px solid var(--line);border-radius:14px;margin-bottom:10px}
details.faq summary{cursor:pointer;padding:14px 16px;font:600 16.5px var(--display);list-style:none}
details.faq summary::-webkit-details-marker{display:none}
details.faq p{margin:0;padding:0 16px 16px;color:var(--muted)}

/* article (guides, price pages) */
.article{padding-block:10px 40px}
.article h1{font-size:clamp(32px,5vw,46px);line-height:1.08;margin:10px 0 12px}
.article .deck{font-size:18px;color:var(--muted);margin:0 0 24px}
.article h2{font-size:24px;margin:30px 0 8px}
.article p,.article li{font-size:17px}
.article ul{padding-left:20px}
.callout{background:var(--mint-soft);border-radius:16px;padding:18px 20px;margin:30px 0;display:grid;gap:10px}
.callout b{font:700 19px var(--display)}
.warn{background:var(--warn-soft);border-radius:14px;padding:14px 16px;margin:20px 0}
.ptable{width:100%;border-collapse:collapse;font-size:16px;margin:10px 0}
.ptable th{font:600 11.5px var(--display);letter-spacing:1.6px;text-transform:uppercase;color:var(--muted);text-align:left;padding:8px 6px;border-bottom:2px solid var(--line)}
.ptable td{padding:11px 6px;border-bottom:1px solid var(--line);vertical-align:middle}
.ptable .num{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.ptable .d{width:18px;height:18px;border-radius:5px;display:inline-block;vertical-align:-3px;margin-right:8px}
.ptable .chg.up{color:var(--mint)}.ptable .chg.down{color:var(--bad)}
.tw{overflow-x:auto}
.crumbs{font-size:14px;color:var(--muted);padding-top:6px}
.crumbs a{color:var(--muted)}

/* footer */
footer.site{border-top:1px solid var(--line);margin-top:30px;padding-block:28px 40px;display:flex;flex-wrap:wrap;gap:16px 30px;justify-content:space-between;color:var(--muted);font-size:14px}
footer.site a{color:var(--muted)}
footer.site .cols{display:flex;gap:28px;flex-wrap:wrap}
footer.site .cols div{display:grid;gap:6px}
footer.site b{color:var(--fg);font-family:var(--display)}
.soon{display:inline-flex;align-items:center;gap:7px;margin-top:12px;font:600 13px var(--display);letter-spacing:.3px;padding:6px 12px;border-radius:99px;background:var(--mint-soft);color:var(--mint)}