:root{
  --blue:#009af5;
  --blue-deep:#0074c4;
  --blue-press:#33b1ff;
  --blue-wash:#e8f6ff;
  --ink:#20242c;
  --ink-soft:#59606c;
  --line:#e3e7ef;
  --paper:#ffffff;
  --paper-soft:#f8f9fc;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:"Hanken Grotesk",system-ui,sans-serif;color:var(--ink);background:var(--paper);line-height:1.6;font-size:16px}
h1,h2,h3{font-family:"Poppins",sans-serif;letter-spacing:-.02em;line-height:1.12;color:var(--ink)}
img{max-width:100%;height:auto;display:block}
a{color:var(--blue-deep);text-decoration:none}
::selection{background:var(--blue);color:#fff}
.wrap{max-width:1180px;margin-inline:auto;padding-inline:clamp(1.25rem,4vw,2.5rem)}

/* radius system: buttons pill, cards + media 16px */
.btn{display:inline-block;font-family:"Poppins",sans-serif;font-weight:600;font-size:.95rem;padding:.72rem 1.5rem;border-radius:999px;transition:background .2s ease,transform .12s ease}
.btn:active{transform:translateY(1px)}
.btn-blue{background:var(--blue);color:#07202f}
.btn-blue:hover{background:var(--blue-press);color:#07202f}
.btn-ghost{color:var(--blue-deep);border:1.5px solid var(--line)}
.btn-ghost:hover{border-color:var(--blue)}

/* nav */
nav{position:sticky;top:0;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);z-index:10}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:66px}
.brand{font-family:"Poppins",sans-serif;font-weight:800;font-size:1.15rem;color:var(--ink);letter-spacing:-.02em}
.brand span{color:var(--blue)}
.nav-links{display:flex;gap:1.8rem;align-items:center}
.nav-links a{color:var(--ink-soft);font-weight:500;font-size:.95rem;transition:color .2s ease}
.nav-links a:hover{color:var(--blue-deep)}
.nav-links a[aria-current="page"]{color:var(--ink);font-weight:600}
@media(max-width:719px){.nav-links{gap:1.1rem}.nav-links a{font-size:.85rem}}

/* page hero (interior pages) */
.page-head{padding:clamp(2.2rem,5vh,3.5rem) 0 clamp(1.6rem,3vh,2.2rem)}
.page-head h1{font-size:clamp(1.9rem,1.4rem + 2vw,2.8rem);font-weight:800}
.page-head p{color:var(--ink-soft);margin-top:.9rem;max-width:44rem;font-size:1.05rem}

/* home hero */
.hero{padding:clamp(2.5rem,6vh,4.5rem) 0}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,5vw,4rem);align-items:center}
.hero h1{font-size:clamp(2.1rem,1.5rem + 2.6vw,3.4rem);font-weight:800}
.hero h1 em{font-style:normal;color:var(--blue)}
.hero p{font-size:clamp(1.05rem,1rem + .3vw,1.2rem);color:var(--ink-soft);margin:1.3rem 0 1.9rem;max-width:32rem}
.hero-ctas{display:flex;gap:.9rem;flex-wrap:wrap}
.hero-art img{border-radius:16px;box-shadow:0 24px 60px rgba(11,92,255,.16)}
@media(max-width:860px){.hero-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:no-preference){
  .hero-grid>*{animation:rise .7s cubic-bezier(.16,1,.3,1) both}
  .hero-art{animation-delay:.12s}
  @keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
}

/* product cards (home) */
.cards{padding:clamp(2.5rem,6vh,4.5rem) 0;background:var(--paper-soft);border-block:1px solid var(--line)}
.cards h2{font-size:clamp(1.6rem,1.3rem + 1.2vw,2.1rem);margin-bottom:1.8rem}
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.card{background:var(--paper);border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:box-shadow .25s ease,transform .25s ease;display:flex;flex-direction:column}
.card:hover{box-shadow:0 14px 40px rgba(11,92,255,.13);transform:translateY(-3px)}
.card img{aspect-ratio:16/10;object-fit:cover;width:100%}
.card-body{padding:1.2rem 1.25rem 1.4rem;display:flex;flex-direction:column;gap:.45rem;flex:1}
.card-body h3{font-size:1.12rem;font-weight:700;color:var(--ink)}
.card-body p{color:var(--ink-soft);font-size:.93rem;flex:1}
.card-body .go{font-family:"Poppins",sans-serif;font-weight:600;font-size:.9rem}
@media(max-width:860px){.card-grid{grid-template-columns:1fr}}

/* generic section */
.sec{padding:clamp(2.4rem,6vh,4rem) 0}
.sec-tint{background:var(--paper-soft);border-block:1px solid var(--line)}
.sec h2{font-size:clamp(1.5rem,1.2rem + 1.2vw,2rem);margin-bottom:1rem}
.sec .lede{color:var(--ink-soft);max-width:42rem;margin-bottom:1.8rem}

/* before/after slider */
.ba{position:relative;overflow:hidden;border-radius:16px;user-select:none;touch-action:none;box-shadow:0 14px 40px rgba(32,36,44,.14)}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.ba{aspect-ratio:16/9}
.ba .ba-before{clip-path:inset(0 calc(100% - var(--pos,50%)) 0 0)}
.ba .ba-line{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:2px;background:#fff;box-shadow:0 0 8px rgba(0,0,0,.45);pointer-events:none}
.ba .ba-line::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:38px;height:38px;border-radius:50%;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.35);background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%2320242c" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M8 7l-5 5 5 5M16 7l5 5-5 5"/></svg>');background-size:20px;background-position:center;background-repeat:no-repeat}
.ba input[type=range]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}
.ba .ba-tag{position:absolute;bottom:.8rem;font-family:"Poppins",sans-serif;font-weight:600;font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;color:#fff;background:rgba(24,26,32,.62);border-radius:999px;padding:.28rem .8rem;pointer-events:none}
.ba .ba-tag-l{left:.8rem}
.ba .ba-tag-r{right:.8rem}
.ba-row{display:grid;gap:2rem;margin-bottom:2rem}
.ba-cap{margin-top:.7rem;color:var(--ink-soft);font-size:.93rem}
.ba-cap b{color:var(--ink)}

/* look grid */
.look-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.look-grid figure img{border-radius:12px;aspect-ratio:16/13;object-fit:cover}
.look-grid figcaption{font-family:"Poppins",sans-serif;font-weight:600;font-size:.85rem;margin-top:.45rem}
@media(max-width:860px){.look-grid{grid-template-columns:repeat(2,1fr)}}

/* product split (simplicity / instruments) */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,3.5rem);align-items:center}
.split img{border-radius:16px;box-shadow:0 18px 48px rgba(32,36,44,.15)}
.split h2{font-size:clamp(1.5rem,1.2rem + 1.4vw,2.1rem)}
.split .lede{margin:.8rem 0 1.4rem}
@media(max-width:860px){.split{grid-template-columns:1fr}}

.spec-grid{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin-bottom:1.6rem}
.spec{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:1rem 1.15rem}
.spec b{font-family:"Poppins",sans-serif;font-weight:700;font-size:1.2rem;display:block;color:var(--blue)}
.spec small{color:var(--ink-soft);font-size:.87rem;line-height:1.4;display:block;margin-top:.15rem}
@media(max-width:520px){.spec-grid{grid-template-columns:1fr}}
.buy-row{display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap}
.price{font-family:"Poppins",sans-serif;font-weight:800;font-size:1.55rem}

.soon{display:inline-block;font-family:"Poppins",sans-serif;font-weight:600;font-size:.76rem;letter-spacing:.04em;color:var(--blue-deep);background:var(--blue-wash);border:1px solid #b9e2fc;border-radius:999px;padding:.28rem .85rem}
.tag-free{display:inline-block;font-family:"Poppins",sans-serif;font-weight:600;font-size:.76rem;letter-spacing:.04em;color:#1c7a4d;background:#ecf7f1;border:1px solid #cfe9db;border-radius:999px;padding:.28rem .85rem}

/* about + footer */
.about{padding:clamp(2.6rem,7vh,4.2rem) 0;text-align:center}
.about p{max-width:40rem;margin-inline:auto;color:var(--ink-soft);font-size:1.03rem}
.about b{color:var(--ink)}
footer{border-top:1px solid var(--line);padding:2rem 0 2.4rem}
.foot{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;color:var(--ink-soft);font-size:.9rem}
.foot a{color:var(--ink-soft)}
.foot a:hover{color:var(--blue-deep)}

/* back link (the nathanielwright.com pattern) */
.back{display:inline-flex;align-items:center;font-family:"Poppins",sans-serif;font-weight:600;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--blue-deep);transition:color .2s ease}
.back:hover{color:var(--ink)}
.back-row{padding-top:1.6rem}
.page-head .back{display:inline-flex;margin-bottom:1.2rem}

/* launch deal */
.price-old{color:var(--ink-soft);font-weight:600;font-size:1.05rem;margin-right:.35rem}
.deal-note{color:var(--ink-soft);font-size:.88rem;margin-top:.8rem;max-width:34rem}
.deal-note b{color:var(--blue-deep);cursor:pointer}

/* full-catalog slider grid */
.ba-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.8rem 1.4rem}
@media(max-width:860px){.ba-grid{grid-template-columns:1fr}}