/*
Theme Name: PreviewCardz
Theme URI: https://previewcardz.com
Author: PreviewCardz
Description: The whole PreviewCardz site in one theme — landing page, guides, NFC tap routing, tap tracking, WooCommerce signup. Activate it and the site exists.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: previewcardz
*/

:root{
  --bg:#FFFCF4; --ink:#0A1622; --ink-soft:#3E4C5E;
  --gold:#FFB627; --gold-ink:#8F5F00;
  --navy:#0D1B2A; --navy2:#16283C;
  --live:#2FBF71;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,sans-serif;background:var(--bg);color:var(--ink);font-size:17px;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:'Bricolage Grotesque','Inter',sans-serif;letter-spacing:-.025em}
img{max-width:100%;height:auto}
a{color:inherit}
button{font-family:'Inter'}
.mono{font-family:'JetBrains Mono',monospace}

.rv{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.rv.in{opacity:1;transform:none}

/* ---------- nav ---------- */
.pc-nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  padding:16px clamp(20px,5vw,64px);background:rgba(255,252,244,.94);backdrop-filter:blur(12px);border-bottom:2px solid var(--ink)}
.pc-brand{display:flex;align-items:center;gap:10px;text-decoration:none}
.pc-brand-name{font-family:'Bricolage Grotesque';font-weight:800;font-size:21px}
.pc-brand-name b{color:var(--gold-ink)}
.pc-links{display:flex;align-items:center;gap:26px}
.pc-links a{color:var(--ink);text-decoration:none;font-size:15px;font-weight:700}
.pc-links a:hover{color:var(--gold-ink)}
.pc-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--ink);color:#fff;border:2px solid var(--ink);border-radius:999px;
  font-weight:800;font-size:16px;padding:14px 28px;cursor:pointer;transition:transform .15s,box-shadow .15s;text-decoration:none}
.pc-btn:hover{transform:translateY(-2px);box-shadow:0 10px 0 rgba(10,22,34,.15);color:#fff}
.pc-btn.gold{background:var(--gold);color:var(--ink)}
.pc-btn.gold:hover{color:var(--ink)}
.pc-btn.small{padding:10px 20px;font-size:14px}
button:focus-visible,a:focus-visible{outline:3px solid var(--gold-ink);outline-offset:3px}

/* ---------- hero ---------- */
.pc-hero{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,6vw,80px);align-items:center;
  max-width:1180px;margin:0 auto;padding:clamp(56px,9vh,110px) clamp(20px,5vw,64px)}
.pc-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);margin-bottom:22px;
  border:2px solid var(--ink);border-radius:999px;padding:8px 18px;background:#fff}
.pc-eyebrow b{color:var(--gold-ink)}
.pc-hero h1{font-size:clamp(58px,9.5vw,124px);font-weight:800;line-height:.95;margin-bottom:22px}
.pc-hero h1 em{font-style:normal;color:var(--gold-ink)}
.pc-hero .pc-lede{font-size:clamp(18px,2vw,22px);line-height:1.5;color:var(--ink);font-weight:600;max-width:38ch;margin-bottom:32px}
.pc-fine{font-size:15px;font-weight:600;color:var(--ink-soft);margin-top:16px}
.pc-fine b{color:var(--ink)}
.pc-fine a{color:var(--gold-ink);font-weight:800;text-decoration:none}

/* card visual */
.pc-visual{display:flex;justify-content:center}
.pc-card{position:relative;width:min(360px,80vw);aspect-ratio:1.586;background:linear-gradient(135deg,var(--navy),var(--navy2));
  border-radius:18px;box-shadow:12px 12px 0 var(--gold);padding:26px;display:flex;flex-direction:column;justify-content:space-between;transform:rotate(-2deg)}
.pc-card .cstar{width:38px;height:38px}
.pc-card .ccta{font-family:'Bricolage Grotesque';font-weight:800;font-size:25px;line-height:1.2;color:#fff}
.pc-card .ccta span{color:var(--gold)}
.pc-card .cid{font-family:'JetBrains Mono',monospace;font-size:12px;color:rgba(255,255,255,.5);letter-spacing:.06em;margin-top:12px}
.pc-ripple{position:absolute;top:12px;right:12px;width:110px;height:110px;pointer-events:none}
.pc-ripple circle{fill:none;stroke:var(--gold);stroke-width:3;opacity:0;animation:pcrip 2.2s ease-out infinite;transform-origin:center}
@keyframes pcrip{0%{opacity:0;transform:scale(.45)}30%{opacity:.9}100%{opacity:0;transform:scale(1.2)}}
.pc-ripple circle:nth-child(2){animation-delay:.45s}
.pc-ripple circle:nth-child(3){animation-delay:.9s}
.pc-chip{position:absolute;bottom:-20px;left:-12px;background:#fff;border:2px solid var(--ink);border-radius:999px;
  padding:11px 20px;font-size:14px;font-weight:800;box-shadow:5px 5px 0 rgba(10,22,34,.15);display:flex;gap:9px;align-items:center;transform:rotate(1deg)}
.pc-chip .dot{width:9px;height:9px;border-radius:50%;background:var(--live)}

/* ---------- numbers band ---------- */
.pc-band{max-width:1180px;margin:0 auto;padding:0 clamp(20px,5vw,64px)}
.pc-band-inner{background:var(--navy);border-radius:26px;padding:clamp(40px,6vw,64px) clamp(24px,4vw,56px);
  display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,40px);text-align:center}
.pc-bstat b{font-family:'Bricolage Grotesque';font-size:clamp(44px,6vw,76px);font-weight:800;color:var(--gold);display:block;line-height:1;letter-spacing:-.03em}
.pc-bstat span{display:block;margin-top:10px;font-size:15px;font-weight:700;color:#fff}

/* ---------- 330 strip ---------- */
.pc-330{border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);background:var(--gold);margin-top:clamp(56px,9vh,100px)}
.pc-330-inner{max-width:1180px;margin:0 auto;padding:26px clamp(20px,5vw,64px);display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.pc-330-label{font-family:'Bricolage Grotesque';font-size:clamp(20px,2.5vw,28px);font-weight:800;white-space:nowrap}
.pc-towns{display:flex;gap:8px;flex-wrap:wrap}
.pc-town{font-size:14px;font-weight:800;color:var(--ink);background:#fff;border:2px solid var(--ink);border-radius:999px;padding:8px 16px}

/* ---------- sections ---------- */
.pc-section{max-width:1180px;margin:0 auto;padding:clamp(56px,9vh,104px) clamp(20px,5vw,64px)}
.pc-sec-head{margin-bottom:clamp(30px,5vh,48px)}
.pc-sec-head h2{font-size:clamp(38px,5.5vw,64px);font-weight:800}
.pc-sec-head p{margin-top:12px;color:var(--ink-soft);font-size:18px;font-weight:600}

.pc-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.pc-step{background:#fff;border:2px solid var(--ink);border-radius:20px;padding:34px 30px;box-shadow:7px 7px 0 rgba(10,22,34,.1)}
.pc-step .n{font-family:'Bricolage Grotesque';font-size:clamp(56px,6vw,84px);font-weight:800;line-height:1;color:var(--gold);
  -webkit-text-stroke:2.5px var(--ink);display:block;margin-bottom:16px}
.pc-step h3{font-size:23px;font-weight:800;margin-bottom:8px}
.pc-step p{font-size:16px;line-height:1.55;color:var(--ink-soft);font-weight:600}

.pc-math{background:var(--navy);border-radius:26px;padding:clamp(40px,6vw,60px);display:flex;align-items:center;
  justify-content:center;gap:clamp(18px,4vw,48px);flex-wrap:wrap;text-align:center}
.pc-math .m b{font-family:'Bricolage Grotesque';font-size:clamp(48px,7vw,88px);font-weight:800;display:block;line-height:1;color:#fff;letter-spacing:-.03em}
.pc-math .m b.gold{color:var(--gold)}
.pc-math .m span{display:block;margin-top:8px;font-size:15px;font-weight:700;color:rgba(255,255,255,.75)}
.pc-math .arrow{font-size:38px;color:var(--gold);font-weight:800}
.pc-math-note{width:100%;font-size:14px;font-weight:600;color:rgba(255,255,255,.55);margin-top:8px}

/* ---------- pricing ---------- */
.pc-price-wrap{display:flex;justify-content:center}
.pc-price-card{background:var(--navy);border-radius:26px;padding:clamp(38px,5vw,56px);max-width:520px;width:100%;text-align:center;position:relative;
  box-shadow:12px 12px 0 var(--gold);color:#fff}
.pc-badge{position:absolute;top:-18px;left:50%;transform:translateX(-50%);background:var(--gold);color:var(--ink);border:2px solid var(--ink);
  font-size:14px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:9px 22px;border-radius:999px;white-space:nowrap}
.pc-price-num{font-family:'Bricolage Grotesque';font-size:clamp(76px,10vw,110px);font-weight:800;line-height:1;margin:20px 0 4px;color:var(--gold)}
.pc-price-num span{font-size:26px;font-weight:700;color:rgba(255,255,255,.65)}
.pc-price-sub{font-size:17px;font-weight:700;margin-bottom:28px}
.pc-includes{list-style:none;margin:0 auto 32px;display:grid;gap:13px;text-align:left;max-width:300px}
.pc-includes li{display:flex;gap:12px;align-items:baseline;font-size:16.5px;font-weight:600}
.pc-includes li::before{content:'★';color:var(--gold);font-size:14px}
.pc-price-call{margin-top:16px;font-size:14px;font-weight:700;color:rgba(255,255,255,.7)}
.pc-price-call a{color:var(--gold);text-decoration:none;font-weight:800}

/* ---------- guides ---------- */
.pc-guides{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px}
.pc-guide{display:flex;align-items:center;gap:16px;background:#fff;border:2px solid var(--ink);border-radius:16px;padding:20px 24px;
  text-align:left;transition:transform .15s,box-shadow .15s;color:var(--ink);text-decoration:none}
.pc-guide:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--gold);color:var(--ink)}
.pc-guide .g-star{color:var(--gold-ink);font-size:18px;flex-shrink:0}
.pc-guide h3{font-size:17px;font-weight:800;line-height:1.3;font-family:'Inter'}

/* ---------- faq ---------- */
.pc-faq{max-width:760px}
.pc-faq details{border-bottom:2px solid var(--ink);padding:22px 4px}
.pc-faq summary{font-size:20px;font-weight:800;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:14px;font-family:'Bricolage Grotesque'}
.pc-faq summary::-webkit-details-marker{display:none}
.pc-faq summary::after{content:'+';color:var(--gold-ink);font-size:26px;font-weight:800}
.pc-faq details[open] summary::after{content:'–'}
.pc-faq details p{margin-top:12px;font-size:17px;line-height:1.6;color:var(--ink-soft);font-weight:600;max-width:58ch}

/* ---------- call strip ---------- */
.pc-call-strip{max-width:1180px;margin:0 auto;padding:0 clamp(20px,5vw,64px) clamp(56px,9vh,104px)}
.pc-call{background:var(--navy);border-radius:26px;padding:clamp(38px,6vw,58px);text-align:center;color:#fff}
.pc-call h2{font-size:clamp(30px,4.5vw,50px);font-weight:800;margin-bottom:10px}
.pc-call p{font-size:16px;font-weight:600;color:rgba(255,255,255,.7);margin-bottom:26px}
.pc-call-num{display:inline-block;font-family:'Bricolage Grotesque';font-size:clamp(28px,5.5vw,54px);font-weight:800;color:var(--ink);
  background:var(--gold);border:2px solid var(--ink);border-radius:999px;padding:16px 38px;text-decoration:none;letter-spacing:-.01em;transition:transform .15s}
.pc-call-num:hover{transform:translateY(-2px);color:var(--ink)}
.pc-call-sub{margin-top:16px;font-size:14px;font-weight:700;color:rgba(255,255,255,.6)}

/* ---------- footer ---------- */
.pc-footer{border-top:2px solid var(--ink);padding:34px clamp(20px,5vw,64px);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;background:#fff}
.pc-footer .fnote{font-size:15px;font-weight:800}
.pc-footer .fnote b{color:var(--gold-ink)}
.pc-footer .fnote a{color:var(--gold-ink);text-decoration:none}
.pc-footer .fbrand{display:flex;align-items:center;gap:9px;font-family:'Bricolage Grotesque';font-weight:800;font-size:17px}

/* ---------- inner pages (guides, Woo pages, generic) ---------- */
.pc-page{max-width:820px;margin:0 auto;padding:clamp(40px,6vh,72px) clamp(20px,5vw,40px) clamp(64px,9vh,110px)}
.pc-page-head{margin-bottom:26px}
.pc-page-head .kicker{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-ink)}
.pc-page-head h1{font-size:clamp(34px,5vw,54px);font-weight:800;line-height:1.08;margin-top:10px}
.pc-content{font-size:17.5px;line-height:1.75;color:#2C3A4E;font-weight:500}
.pc-content h2{font-size:26px;margin:34px 0 12px;color:var(--ink)}
.pc-content h3{font-size:21px;margin:28px 0 10px;color:var(--ink)}
.pc-content p{margin-bottom:16px}
.pc-content ul,.pc-content ol{margin:0 0 16px 22px}
.pc-content li{margin-bottom:8px}
.pc-content a{color:var(--gold-ink);font-weight:700}
.pc-content code{font-family:'JetBrains Mono',monospace;background:#fff;border:1.5px solid var(--ink);border-radius:6px;padding:2px 7px;font-size:.85em}

.pc-cta-box{background:var(--navy);border-radius:20px;padding:32px 28px;text-align:center;color:#fff;margin-top:44px}
.pc-cta-box h3{font-size:24px;font-weight:800;margin-bottom:8px}
.pc-cta-box p{font-size:14.5px;font-weight:600;color:rgba(255,255,255,.7);margin-bottom:20px}
.pc-cta-box a.phone{display:block;margin-top:14px;color:var(--gold);font-weight:800;text-decoration:none;font-size:15px}

.pc-back{display:inline-block;margin-bottom:22px;font-size:14px;font-weight:800;color:var(--gold-ink);text-decoration:none}

/* WooCommerce pages inherit the clean container; checkout gets its own stylesheet */
.pc-page .woocommerce{font-weight:500}
.pc-page .woocommerce a.button,.pc-page .woocommerce button.button{
  background:var(--gold);color:var(--ink);border:2px solid var(--ink);border-radius:999px;font-weight:800;padding:12px 24px}

@media (max-width:900px){
  .pc-hero{grid-template-columns:1fr;padding-top:44px}
  .pc-visual{margin-top:16px}
  .pc-band-inner{grid-template-columns:repeat(2,1fr)}
  .pc-steps{grid-template-columns:1fr}
  .pc-guides{grid-template-columns:1fr}
  .pc-links a.hide-m{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none}
}