/* ============================================================
   SAMPLES WITH SHAW  ·  store styles
   Self-contained on purpose: this folder lifts out to its own
   domain (sampleswithshaw.com) later with zero rework.
   Tokens mirror the Sessions With Shaw design system.
   ============================================================ */

@font-face{font-family:'License Plate';src:url('fonts/license-plate.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Oswald';src:url('fonts/oswald-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Oswald';src:url('fonts/oswald-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Oswald';src:url('fonts/oswald-700.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url('fonts/barlow-condensed-300.woff2') format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url('fonts/barlow-condensed-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url('fonts/barlow-condensed-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Besley';src:url('fonts/besley-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Besley';src:url('fonts/besley-600.woff2') format('woff2');font-weight:600;font-display:swap}

:root{
  --teal:#2F6D85;
  --rust:#C7522A;
  --cream:#F3D9BE;
  --cream-soft:#F7E6D2;
  --ink:#151210;
  --ink-soft:#3a332d;
  --font-gothic:'Oswald','Arial Narrow',sans-serif;
  --font-din:'Barlow Condensed','Arial Narrow',sans-serif;
  --font-slab:'Besley',Georgia,serif;
  --font-plate:'License Plate',ui-monospace,monospace;
  --border:2.5px solid var(--ink);
  --shadow:6px 6px 0 rgba(21,18,16,.9);
  --shadow-sm:4px 4px 0 rgba(21,18,16,.9);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
body{
  background:var(--ink);
  color:var(--cream);
  font-family:var(--font-din);
  font-weight:400;
  font-size:19px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
img{max-width:100%}

.eyebrow{font-family:var(--font-plate);font-size:14px;letter-spacing:.22em;color:var(--rust)}

.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-gothic);font-weight:600;
  font-size:17px;letter-spacing:.06em;text-transform:uppercase;
  padding:14px 22px;text-decoration:none;
  border:var(--border);
  transition:transform .12s ease,box-shadow .12s ease;
  cursor:pointer;
}
.btn .ico{width:20px;height:20px;flex:none}
.btn-primary{background:var(--rust);color:var(--cream);box-shadow:var(--shadow-sm)}
.btn-primary:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 rgba(21,18,16,.9)}
.btn-ghost-dark{background:transparent;color:var(--cream);border-color:var(--cream)}
.btn-ghost-dark:hover{background:var(--cream);color:var(--ink)}

/* ---------- preview bar ---------- */
.pv-bar{
  background:var(--rust);color:var(--cream);text-align:center;
  font-family:var(--font-plate);font-size:12px;letter-spacing:.14em;
  padding:9px 16px;line-height:1.4;
}

/* ---------- nav ---------- */
.st-nav{
  display:flex;align-items:center;justify-content:space-between;gap:10px 16px;
  flex-wrap:wrap;padding:18px 0;border-bottom:2.5px solid rgba(243,217,190,.18);
}
.st-home{white-space:nowrap}
.st-brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.st-brand .chip{
  width:40px;height:40px;flex:none;background:var(--cream);
  border:2px solid var(--cream);display:flex;align-items:center;justify-content:center;
}
.st-brand .chip img{width:30px;height:30px;object-fit:contain;display:block}
.st-brand .nav-word{white-space:nowrap}
.st-brand .nav-word b{font-family:var(--font-slab);font-weight:600;font-size:19px;color:var(--cream);letter-spacing:.01em}
.st-brand .nav-word i{font-family:var(--font-slab);font-style:italic;font-weight:500;font-size:16px;color:var(--rust)}
.st-brand .nav-word b.shaw{font-family:var(--font-gothic);font-weight:700;color:var(--rust);letter-spacing:.04em}
.st-home{font-family:var(--font-din);font-weight:500;font-size:16px;color:var(--cream);text-decoration:none;opacity:.8}
.st-home:hover{opacity:1;color:var(--rust)}

/* ---------- hero ---------- */
.st-hero{padding:clamp(44px,6.5vw,80px) 0 clamp(28px,3.6vw,46px)}
.st-hero h1{
  font-family:var(--font-gothic);font-weight:700;letter-spacing:.01em;
  font-size:clamp(38px,6.4vw,76px);line-height:.98;margin:14px 0 18px;color:var(--cream);
  text-transform:uppercase;
}
.st-hero p{max-width:60ch;color:var(--cream);opacity:.82;font-size:19px}

/* ---------- pack demo player ---------- */
.demo{
  display:grid;grid-template-columns:64px 1fr auto;align-items:center;gap:18px;
  background:var(--teal);border:var(--border);box-shadow:var(--shadow);
  padding:20px 22px;margin-bottom:44px;
}
.demo-play{
  width:64px;height:64px;border-radius:999px;border:2.5px solid var(--cream);
  background:transparent;color:var(--cream);cursor:pointer;flex:none;
  display:flex;align-items:center;justify-content:center;transition:all .12s ease;
}
.demo.playing .demo-play,.demo-play:hover{background:var(--cream);color:var(--teal)}
.demo-play svg{width:24px;height:24px;fill:currentColor}
.demo-mid{min-width:0}
.demo-label b{font-family:var(--font-gothic);font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:20px;color:var(--cream);display:block}
.demo-label span{font-family:var(--font-din);font-size:15px;color:var(--cream);opacity:.85}
.demo-wave{position:relative;height:10px;background:rgba(243,217,190,.28);margin-top:10px;overflow:hidden;cursor:pointer}
.demo-wave i{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--cream)}
/* Barlow, not License Plate: the plate font has no usable colon glyph */
.demo-time{font-family:var(--font-din);font-weight:500;font-size:17px;letter-spacing:.06em;color:var(--cream);flex:none;font-variant-numeric:tabular-nums}
@media(max-width:560px){.demo{grid-template-columns:52px 1fr;gap:14px}.demo-time{display:none}.demo-play{width:52px;height:52px}}

/* ---------- featured pack ---------- */
.pack{
  display:grid;grid-template-columns:minmax(0,420px) 1fr;gap:clamp(24px,4vw,52px);
  align-items:start;padding-bottom:56px;border-bottom:2.5px solid rgba(243,217,190,.18);
}
@media(max-width:820px){.pack{grid-template-columns:1fr}}
.cover{position:relative;border:var(--border);box-shadow:var(--shadow);background:var(--cream);aspect-ratio:1/1;overflow:hidden}
.cover svg{width:100%;height:100%;display:block}
.pack-info .kicker{font-family:var(--font-plate);font-size:12px;letter-spacing:.2em;color:var(--rust)}
.pack-info h2{font-family:var(--font-slab);font-weight:600;font-size:clamp(30px,4.6vw,46px);line-height:1.02;color:var(--cream);margin:8px 0 4px}
.pack-info .tagline{font-family:var(--font-slab);font-style:italic;font-size:19px;color:var(--cream);opacity:.75;margin-bottom:18px}
.pack-info p{color:var(--cream);opacity:.82;max-width:56ch;margin-bottom:18px}
.specs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.spec{font-family:var(--font-plate);font-size:11px;letter-spacing:.1em;color:var(--cream);
      border:1.5px solid rgba(243,217,190,.35);padding:7px 11px}
.buy-row{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.price{font-family:var(--font-gothic);font-weight:700;font-size:34px;color:var(--cream)}
.price s{font-weight:500;font-size:20px;opacity:.5;margin-right:8px}
.trust{
  margin-top:16px;font-family:var(--font-plate);font-size:11px;letter-spacing:.1em;
  color:var(--cream);opacity:.62;line-height:1.9;
}
.trust b{font-weight:400;border-bottom:1px solid rgba(243,217,190,.4)}

/* ---------- how it works ---------- */
.how{padding:clamp(40px,5vw,64px) 0}
.how .eyebrow{color:var(--rust)}
.how h2{font-family:var(--font-gothic);font-weight:700;text-transform:uppercase;font-size:clamp(24px,3vw,32px);color:var(--cream);margin:10px 0 24px}
.how-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:760px){.how-steps{grid-template-columns:1fr}}
.how-step{border:1.5px solid rgba(243,217,190,.2);padding:22px}
.how-step b{font-family:var(--font-plate);font-size:13px;letter-spacing:.14em;color:var(--rust);display:block;margin-bottom:10px}
.how-step h4{font-family:var(--font-gothic);font-weight:600;font-size:19px;color:var(--cream);margin-bottom:6px}
.how-step p{font-family:var(--font-din);font-size:16px;color:var(--cream);opacity:.78}

/* ---------- footer ---------- */
.st-foot{border-top:2.5px solid rgba(243,217,190,.18);padding:30px 0 60px;text-align:center}
.st-foot p{font-family:var(--font-din);font-size:15px;color:var(--cream);opacity:.6;max-width:64ch;margin:0 auto 10px}
.st-foot a{color:var(--cream)}

/* ---------- what's inside ---------- */
.inside{padding:clamp(40px,5vw,64px) 0;border-top:2.5px solid rgba(243,217,190,.18)}
.inside .eyebrow{color:var(--rust)}
.inside h2{font-family:var(--font-gothic);font-weight:700;text-transform:uppercase;font-size:clamp(24px,3vw,34px);color:var(--cream);margin:10px 0 12px}
.inside .lead{color:var(--cream);opacity:.82;max-width:62ch;margin-bottom:26px}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:24px}
@media(max-width:640px){.stat-grid{grid-template-columns:1fr 1fr}}
.stat{border:1.5px solid rgba(243,217,190,.22);background:rgba(243,217,190,.03);padding:22px 14px;text-align:center}
.stat b{display:block;font-family:var(--font-gothic);font-weight:700;font-size:clamp(34px,5vw,46px);color:var(--cream);line-height:1}
.stat span{font-family:var(--font-plate);font-size:11px;letter-spacing:.16em;color:var(--rust);display:block;margin-top:9px}
.specs.format{margin-bottom:0}
.cred{margin-top:24px;font-family:var(--font-din);font-size:16px;color:var(--cream);opacity:.75;max-width:60ch}
.cred b{font-weight:500;opacity:1}

/* ---------- license ---------- */
.license{border-top:2.5px solid rgba(243,217,190,.18);padding:clamp(40px,5vw,64px) 0}
.license .eyebrow{color:var(--rust)}
.license h2{font-family:var(--font-gothic);font-weight:700;text-transform:uppercase;font-size:clamp(24px,3vw,34px);color:var(--cream);margin:10px 0 22px}
.lic-list{display:grid;gap:16px;max-width:780px}
.lic-item{display:grid;grid-template-columns:38px 1fr;gap:14px;align-items:start}
.lic-item .mk{font-family:var(--font-plate);font-size:13px;letter-spacing:.1em;color:var(--rust);padding-top:4px}
.lic-item p{color:var(--cream);opacity:.85;font-size:17px}
.lic-item b{font-weight:500;opacity:1}

/* ============================================================
   checkout + thanks pages
   ============================================================ */
.co-head{padding:clamp(30px,4.5vw,52px) 0 18px}
.co-head h1{
  font-family:var(--font-gothic);font-weight:700;text-transform:uppercase;
  font-size:clamp(28px,4vw,44px);color:var(--cream);letter-spacing:.01em;
}
.co-head p{color:var(--cream);opacity:.75;margin-top:8px;max-width:60ch}

.co-note{
  font-family:var(--font-din);font-size:15.5px;color:var(--cream);
  background:rgba(47,109,133,.25);border-left:3px solid var(--teal);
  padding:12px 14px;margin:0 0 18px;max-width:640px;
}
.co-note.warn{background:rgba(199,82,42,.16);border-left-color:var(--rust)}

/* Stripe embedded checkout mounts on cream so its default (light) theme sits right */
.co-mount{
  background:var(--cream);border:var(--border);box-shadow:var(--shadow);
  padding:clamp(10px,2vw,22px);min-height:420px;margin-bottom:44px;
}
.co-mount:empty::after{
  content:'Loading secure checkout…';display:block;text-align:center;
  font-family:var(--font-din);color:var(--ink-soft);padding:150px 0;
}

/* preview card shown while Stripe is not wired yet */
.preview-card{
  background:var(--cream);color:var(--ink);border:var(--border);box-shadow:var(--shadow);
  max-width:640px;padding:0;margin-bottom:44px;overflow:hidden;
}
.preview-card .top{background:var(--ink);color:var(--cream);padding:14px 20px;
  font-family:var(--font-plate);font-size:12px;letter-spacing:.16em}
.preview-card .body{padding:22px 22px 26px}
.preview-card h3{font-family:var(--font-gothic);font-weight:700;text-transform:uppercase;font-size:22px;margin-bottom:8px}
.preview-card p{font-family:var(--font-din);font-size:16.5px;color:var(--ink-soft);margin-bottom:12px;max-width:52ch}
.preview-card .ord{border:1.5px solid var(--ink);margin:16px 0 18px}
.preview-card .ord-row{display:flex;justify-content:space-between;padding:11px 14px;font-family:var(--font-din);font-size:16px}
.preview-card .ord-row + .ord-row{border-top:1px solid rgba(21,18,16,.15)}
.preview-card .ord-row.tot{font-family:var(--font-gothic);font-weight:700;background:rgba(21,18,16,.05)}

/* thanks page */
.done{max-width:640px;margin:0 0 44px;background:var(--cream);color:var(--ink);
  border:var(--border);box-shadow:var(--shadow);padding:34px 26px;text-align:center}
.done .chk{width:64px;height:64px;border-radius:999px;background:var(--teal);color:var(--cream);
  display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
.done .chk svg{width:32px;height:32px;fill:currentColor}
.done h3{font-family:var(--font-gothic);font-weight:700;text-transform:uppercase;font-size:24px;margin-bottom:8px}
.done p{font-family:var(--font-din);font-size:16px;color:var(--ink-soft);max-width:44ch;margin:0 auto 16px}
.done .fine{font-size:13.5px;opacity:.85;margin-top:14px;margin-bottom:0}
.done.pending .chk{background:var(--rust)}
.done a,.preview-card a{color:var(--rust)}