/* Business Jump — Dub-faithful design system (light editorial SaaS)
   Border-first containers, single electric-blue accent, dotted-grid texture,
   feature pills, product-mockup panels, motivated motion. */

@import url('https://api.fontshare.com/v2/css?f[]=satoshi@500,700,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root{
  --canvas:#ffffff; --paper:#f5f5f5; --ash:#e5e5e5; --smoke:#d4d4d4; --pebble:#c8c8c8;
  --ink:#0a0a0a; --charcoal:#171717; --graphite:#262626; --slate:#404040; --steel:#525252;
  --fog:#737373; --silver:#a3a3a3;
  --blue:#2563eb; --sapphire:#1e40af; --blue-wash:#dbeaff;
  --mint:#dcfce7; --green:#16a34a; --tangerine:#ea580c; --lavender:#7c3aed;
  --font-display:'Satoshi', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body:'Inter', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --maxw:1200px; --gap:64px;
  --r-tag:9999px; --r-card:12px; --r-lg:16px; --r-btn:8px; --r-input:6px;
  --sh-subtle:rgba(0,0,0,.05) 0 1px 2px 0;
  --sh-ring:rgba(0,0,0,.10) 0 0 0 4px;
  --sh-md:rgba(0,0,0,.10) 0 10px 15px -3px, rgba(0,0,0,.10) 0 4px 6px -4px;
  --sh-lg:rgba(0,0,0,.09) 0 20px 40px 0;
  --ease:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--canvas);color:var(--charcoal);
  font-family:var(--font-body);font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip;
}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-family:var(--font-display);font-weight:500;color:var(--charcoal);letter-spacing:-.02em;line-height:1.08}
p{margin:0}
::selection{background:var(--blue-wash);color:var(--sapphire)}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.section{padding:calc(var(--gap)*1.1) 0}
.eyebrow{font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--fog);font-weight:500}
.lead{color:var(--steel);font-size:18px;line-height:1.56}

/* dotted-grid texture ------------------------------------------------------ */
.dots{
  background-image:radial-gradient(var(--ash) 1px, transparent 1px);
  background-size:22px 22px;background-position:-1px -1px;
}
.dots-fade{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(#d9d9d9 1px, transparent 1px);
  background-size:24px 24px;
  -webkit-mask-image:radial-gradient(ellipse 75% 60% at 50% 32%, #000 0%, transparent 78%);
          mask-image:radial-gradient(ellipse 75% 60% at 50% 32%, #000 0%, transparent 78%);
}

/* buttons ------------------------------------------------------------------ */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-body);font-weight:500;
  font-size:15px;line-height:1;border-radius:var(--r-btn);padding:12px 18px;cursor:pointer;
  border:1px solid transparent;transition:transform .18s var(--ease),background .18s var(--ease),box-shadow .18s var(--ease),border-color .18s var(--ease);white-space:nowrap}
.btn svg{width:16px;height:16px}
.btn-primary{background:var(--ink);color:#fff;box-shadow:var(--sh-subtle)}
.btn-primary:hover{background:#000;transform:translateY(-1px);box-shadow:0 8px 22px -8px rgba(37,99,235,.55),var(--sh-subtle)}
.btn-primary:active{transform:translateY(0) scale(.985)}
.btn-outline{background:#fff;color:var(--charcoal);border-color:var(--ash)}
.btn-outline:hover{border-color:var(--smoke);transform:translateY(-1px)}
.btn-outline:active{transform:translateY(0) scale(.985)}
.btn-blue{background:var(--sapphire);color:#fff}
.btn-blue:hover{background:#1b3aa0;transform:translateY(-1px);box-shadow:0 10px 26px -10px rgba(30,64,175,.7)}
.btn-ghost{background:transparent;color:var(--charcoal);padding:10px 14px}
.btn-ghost:hover{background:var(--paper)}
.btn-lg{padding:14px 22px;font-size:16px}

/* nav ---------------------------------------------------------------------- */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.82);backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--ash)}
.nav-inner{display:flex;align-items:center;gap:20px;height:64px;max-width:var(--maxw);margin:0 auto;padding:0 24px}
.brand{display:flex;align-items:center;gap:9px;font-family:var(--font-display);font-weight:700;font-size:19px;letter-spacing:-.03em;color:var(--ink)}
.brand .mark{width:26px;height:26px;flex:0 0 auto}
.nav-links{display:flex;align-items:center;gap:2px;margin:0 auto}
.nav-links a{padding:8px 14px;border-radius:var(--r-tag);color:var(--charcoal);font-size:15px;font-weight:500;transition:background .15s var(--ease),color .15s var(--ease)}
.nav-links a:hover{background:var(--paper)}
.nav-links a.is-active{color:var(--blue)}
.nav-cta{display:flex;align-items:center;gap:8px}
.nav-toggle{display:none;background:none;border:1px solid var(--ash);border-radius:var(--r-btn);width:40px;height:40px;align-items:center;justify-content:center;cursor:pointer}
.nav-toggle svg{width:20px;height:20px}

/* hero --------------------------------------------------------------------- */
.hero{position:relative;overflow:hidden;padding:74px 0 0}
.hero .wrap{position:relative;z-index:1}
.hero-center{text-align:center;max-width:760px;margin:0 auto}
.announce{display:inline-flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--ash);border-radius:var(--r-tag);
  padding:5px 6px 5px 14px;font-size:13.5px;color:var(--slate);box-shadow:var(--sh-subtle);margin-bottom:26px}
.announce b{color:var(--charcoal);font-weight:500}
.announce .pill-go{display:inline-flex;align-items:center;gap:4px;background:var(--paper);border-radius:var(--r-tag);padding:3px 10px;font-size:12.5px;color:var(--slate)}
.hero h1{font-size:clamp(38px,6.4vw,60px);line-height:1;margin:0 auto;max-width:12ch}
.hero .lead{margin:22px auto 0;max-width:52ch}
.hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:30px}
.hero-pills{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:44px 0 0}
.fpill{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--ash);border-radius:var(--r-tag);
  padding:8px 16px 8px 12px;font-size:14px;font-weight:500;color:var(--charcoal);box-shadow:var(--sh-subtle)}
.fpill .ic{width:20px;height:20px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;color:#fff}
.fpill .ic svg{width:12px;height:12px}
.ic-orange{background:var(--tangerine)} .ic-violet{background:var(--lavender)} .ic-green{background:var(--green)}

/* product mockup panel ----------------------------------------------------- */
.mockup-stage{position:relative;margin:38px auto -80px;max-width:1060px;z-index:1}
.mockup{background:#fff;border:1px solid var(--ash);border-radius:16px 16px 0 0;box-shadow:var(--sh-ring),var(--sh-lg);overflow:hidden;transform:perspective(1600px) rotateX(1.2deg);transform-origin:center top}
.mk-top{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--ash);background:#fff}
.mk-dot{width:11px;height:11px;border-radius:9999px;background:var(--smoke)}
.mk-title{margin-left:8px;font-size:13px;color:var(--fog);font-family:var(--font-mono)}
.mk-body{display:grid;grid-template-columns:220px 1fr;min-height:340px}
.mk-side{border-right:1px solid var(--ash);padding:16px 12px;background:#fff}
.mk-side .mk-brand{display:flex;align-items:center;gap:8px;font-family:var(--font-display);font-weight:700;font-size:15px;padding:4px 8px 14px}
.mk-navitem{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;font-size:13.5px;color:var(--slate);margin-bottom:2px}
.mk-navitem .g{width:15px;height:15px;border-radius:4px;background:var(--ash)}
.mk-navitem.on{background:var(--blue-wash);color:var(--sapphire)}
.mk-navitem.on .g{background:var(--blue)}
.mk-navitem .ct{margin-left:auto;font-size:11px;font-family:var(--font-mono);color:var(--fog)}
.mk-main{padding:18px}
.mk-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.mk-h .t{font-family:var(--font-display);font-weight:500;font-size:18px}
.mk-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
.mk-kpi{border:1px solid var(--ash);border-radius:10px;padding:12px}
.mk-kpi .l{font-size:11px;color:var(--fog);text-transform:uppercase;letter-spacing:.08em}
.mk-kpi .v{font-family:var(--font-display);font-weight:500;font-size:24px;margin-top:6px}
.mk-kpi .d{font-size:11px;color:var(--green);font-family:var(--font-mono);margin-top:2px}
.mk-chart{border:1px solid var(--ash);border-radius:10px;padding:14px;height:150px;position:relative;overflow:hidden}
.mk-rows{margin-top:12px}
.mk-row{display:grid;grid-template-columns:1fr auto auto;gap:12px;align-items:center;padding:10px 4px;border-bottom:1px solid var(--ash);font-size:13px}
.mk-row:last-child{border-bottom:0}
.mk-badge{font-size:11px;padding:3px 9px;border-radius:9999px;background:var(--mint);color:var(--green);font-weight:500}
.mk-badge.pend{background:#fff7ed;color:var(--tangerine)}

/* floating cards around editorial ------------------------------------------ */
.float-card{background:#fff;border:1px solid var(--ash);border-radius:var(--r-card);box-shadow:var(--sh-md);padding:14px}

/* generic section headers -------------------------------------------------- */
.sec-head{max-width:640px}
.sec-head.center{margin:0 auto;text-align:center}
.sec-head h2{font-size:clamp(28px,4vw,40px);line-height:1.08}
.sec-head p{margin-top:14px;color:var(--steel);font-size:18px;line-height:1.56}

/* zigzag feature ----------------------------------------------------------- */
.feature{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.feature.rev .fx-copy{order:2}
.fx-copy h3{font-size:clamp(24px,3.2vw,32px)}
.fx-copy p{margin-top:14px;color:var(--steel);font-size:17px;line-height:1.56}
.fx-list{margin:20px 0 0;padding:0;list-style:none;display:grid;gap:12px}
.fx-list li{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;color:var(--charcoal)}
.fx-list .tick{flex:0 0 auto;width:22px;height:22px;border-radius:9999px;background:var(--mint);color:var(--green);display:inline-flex;align-items:center;justify-content:center;margin-top:1px}
.fx-list .tick svg{width:13px;height:13px}
.fx-visual{position:relative}

/* bento -------------------------------------------------------------------- */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.cell{border:1px solid var(--ash);border-radius:var(--r-lg);padding:24px;background:#fff;position:relative;overflow:hidden}
.cell h4{font-family:var(--font-display);font-size:20px;font-weight:500}
.cell p{margin-top:8px;color:var(--steel);font-size:15px;line-height:1.5}
.cell.tint{background:var(--paper)}
.cell.accent{background:linear-gradient(160deg,#eff4ff,#ffffff 70%);border-color:#d7e3ff}
.cell.wide{grid-column:span 4}
.cell.half{grid-column:span 3}
.cell.third{grid-column:span 2}
.cell .badge-ico{width:34px;height:34px;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;color:#fff;margin-bottom:14px}
.cell .badge-ico svg{width:18px;height:18px}

/* logo cloud --------------------------------------------------------------- */
.cloud{display:flex;flex-wrap:wrap;gap:14px 40px;align-items:center;justify-content:center;opacity:.72}
.cloud .lg{display:flex;align-items:center;gap:9px;color:var(--graphite);font-family:var(--font-display);font-weight:700;font-size:17px;letter-spacing:-.02em}
.cloud .lg svg{width:22px;height:22px;color:var(--slate)}

/* stats -------------------------------------------------------------------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.stat{border:1px solid var(--ash);border-radius:var(--r-lg);padding:26px;text-align:center;background:#fff}
.stat .v{font-family:var(--font-display);font-weight:500;font-size:clamp(30px,4vw,42px);color:var(--charcoal);letter-spacing:-.03em}
.stat .l{margin-top:6px;color:var(--fog);font-size:14px}

/* testimonials ------------------------------------------------------------- */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.quote{border:1px solid var(--ash);border-radius:var(--r-lg);padding:24px;background:#fff;display:flex;flex-direction:column;gap:16px}
.quote p{font-size:16px;line-height:1.55;color:var(--charcoal)}
.quote .who{display:flex;align-items:center;gap:12px;margin-top:auto}
.quote .who img{width:42px;height:42px;border-radius:9999px;object-fit:cover;border:1px solid var(--ash)}
.quote .who .n{font-weight:600;font-size:14px}
.quote .who .r{font-size:13px;color:var(--fog)}

/* packages ----------------------------------------------------------------- */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:start}
.plan{border:1px solid var(--ash);border-radius:var(--r-lg);padding:28px;background:#fff;display:flex;flex-direction:column;gap:6px}
.plan.feat{border-color:var(--blue);box-shadow:0 0 0 1px var(--blue),var(--sh-md);position:relative}
.plan.feat::before{content:"Most popular";position:absolute;top:-11px;left:28px;background:var(--blue);color:#fff;font-size:12px;font-weight:500;padding:3px 12px;border-radius:9999px}
.plan .pn{font-family:var(--font-display);font-weight:500;font-size:22px}
.plan .pd{color:var(--fog);font-size:14px;min-height:40px}
.plan .pp{font-family:var(--font-display);font-weight:500;font-size:34px;margin:8px 0}
.plan .pp span{font-size:14px;color:var(--fog);font-family:var(--font-body)}
.plan ul{list-style:none;margin:14px 0 22px;padding:0;display:grid;gap:11px}
.plan li{display:flex;gap:10px;font-size:14.5px;color:var(--slate)}
.plan li svg{width:17px;height:17px;color:var(--green);flex:0 0 auto;margin-top:1px}
.plan .btn{width:100%;justify-content:center;margin-top:auto}

/* cta band ----------------------------------------------------------------- */
.ctaband{position:relative;overflow:hidden;border:1px solid #d7e3ff;border-radius:24px;background:linear-gradient(160deg,#eef3ff,#ffffff 60%);padding:56px 32px;text-align:center}
.ctaband h2{font-size:clamp(28px,4vw,40px)}
.ctaband p{margin:14px auto 0;max-width:48ch;color:var(--steel);font-size:18px}
.ctaband .hero-cta{margin-top:28px}

/* faq ---------------------------------------------------------------------- */
.faq{display:grid;gap:0;max-width:820px;margin:0 auto;border-top:1px solid var(--ash)}
.faq details{border-bottom:1px solid var(--ash);padding:4px 0}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 4px;font-weight:500;font-size:17px}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{flex:0 0 auto;width:22px;height:22px;position:relative;transition:transform .2s var(--ease)}
.faq summary .pm::before,.faq summary .pm::after{content:"";position:absolute;background:var(--fog);top:50%;left:50%;transform:translate(-50%,-50%)}
.faq summary .pm::before{width:12px;height:1.5px}
.faq summary .pm::after{width:1.5px;height:12px;transition:transform .2s var(--ease)}
.faq details[open] summary .pm::after{transform:translate(-50%,-50%) scaleY(0)}
.faq details p{padding:0 4px 20px;color:var(--steel);font-size:15.5px;line-height:1.6;max-width:70ch}

/* footer ------------------------------------------------------------------- */
.foot{border-top:1px solid var(--ash);background:var(--canvas);padding:56px 0 32px}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:32px}
.foot .brand{margin-bottom:14px}
.foot .blurb{color:var(--fog);font-size:14px;max-width:34ch;line-height:1.55}
.foot h5{font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--fog);margin:0 0 14px;font-family:var(--font-body);font-weight:600}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.foot ul a{color:var(--slate);font-size:14.5px}
.foot ul a:hover{color:var(--blue)}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-top:44px;padding-top:22px;border-top:1px solid var(--ash);color:var(--fog);font-size:13.5px}

/* blog listing ------------------------------------------------------------- */
.blog-hero{padding:64px 0 8px}
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card-post{border:1px solid var(--ash);border-radius:var(--r-lg);overflow:hidden;background:#fff;display:flex;flex-direction:column;transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.card-post:hover{transform:translateY(-3px);box-shadow:var(--sh-md)}
.card-post .cov{aspect-ratio:16/10;background:var(--paper);position:relative;overflow:hidden}
.card-post .cov img{width:100%;height:100%;object-fit:cover}
.card-post .pc{padding:18px;display:flex;flex-direction:column;gap:9px;flex:1}
.tag{align-self:flex-start;font-size:12px;font-weight:500;color:var(--sapphire);background:var(--blue-wash);border-radius:9999px;padding:3px 11px}
.card-post h3{font-family:var(--font-display);font-size:19px;font-weight:500;line-height:1.2}
.card-post .ex{color:var(--fog);font-size:14px;line-height:1.5}
.card-post .meta{margin-top:auto;padding-top:6px;color:var(--silver);font-size:12.5px;font-family:var(--font-mono)}
.feat-post{grid-column:span 3;display:grid;grid-template-columns:1.1fr 1fr;gap:0;border:1px solid var(--ash);border-radius:var(--r-lg);overflow:hidden;background:#fff}
.feat-post .cov{aspect-ratio:auto}
.feat-post .pc{padding:36px;justify-content:center;gap:14px}
.feat-post h3{font-size:clamp(24px,3vw,32px)}
.feat-post .ex{font-size:16px;line-height:1.55}

/* article ------------------------------------------------------------------ */
.art-head{max-width:760px;margin:0 auto;padding:56px 0 8px;text-align:center}
.art-head h1{font-size:clamp(32px,5vw,46px);line-height:1.06}
.art-head .dek{margin-top:18px;color:var(--steel);font-size:19px;line-height:1.55}
.art-meta{margin-top:22px;display:flex;gap:16px;justify-content:center;align-items:center;color:var(--fog);font-size:13.5px;font-family:var(--font-mono);flex-wrap:wrap}
.art-cover{max-width:960px;margin:34px auto 0;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--ash);aspect-ratio:16/8;background:var(--paper)}
.art-cover img{width:100%;height:100%;object-fit:cover}
.prose{max-width:720px;margin:44px auto 0;font-size:17.5px;line-height:1.72;color:var(--slate)}
.prose h2{font-size:clamp(24px,3vw,30px);margin:44px 0 14px;color:var(--charcoal)}
.prose h3{font-size:21px;margin:32px 0 10px;color:var(--charcoal)}
.prose p{margin:0 0 20px}
.prose ul,.prose ol{margin:0 0 22px;padding-left:22px;display:grid;gap:9px}
.prose li{padding-left:4px}
.prose strong{color:var(--charcoal);font-weight:600}
.prose blockquote{margin:26px 0;padding:18px 24px;border-left:3px solid var(--blue);background:var(--paper);border-radius:0 10px 10px 0;color:var(--charcoal);font-size:18px}
.prose a{color:var(--blue);font-weight:500;text-decoration:underline;text-underline-offset:2px}
.art-foot{max-width:720px;margin:40px auto 0;padding-top:26px;border-top:1px solid var(--ash);display:flex;align-items:center;gap:16px}
.art-foot img{width:52px;height:52px;border-radius:9999px;border:1px solid var(--ash)}
.art-foot .n{font-weight:600}.art-foot .r{color:var(--fog);font-size:14px}

/* suspended / 404 ---------------------------------------------------------- */
.mini{min-height:70vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:60px 24px}
.mini .box{max-width:520px}
.mini h1{font-size:clamp(30px,5vw,44px)}
.mini p{margin:16px auto 26px;color:var(--steel);font-size:17px;max-width:44ch}
.mini .code{font-family:var(--font-mono);color:var(--silver);font-size:13px;margin-bottom:18px}

/* reveal motion ------------------------------------------------------------ */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
[data-stagger]>*{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
[data-stagger].in>*{opacity:1;transform:none}
.tiltable{transition:transform .3s var(--ease)}

/* responsive --------------------------------------------------------------- */
@media(max-width:960px){
  .foot-grid{grid-template-columns:1fr 1fr}
  .mk-body{grid-template-columns:1fr}
  .mk-side{display:none}
}
@media(max-width:860px){
  .nav-links{display:none}
  .nav-toggle{display:inline-flex}
  .nav-cta .btn-ghost{display:none}
  .feature{grid-template-columns:1fr;gap:32px}
  .feature.rev .fx-copy{order:0}
  .bento{grid-template-columns:1fr 1fr}
  .cell.wide,.cell.half,.cell.third{grid-column:span 2}
  .stats{grid-template-columns:1fr 1fr}
  .quotes{grid-template-columns:1fr}
  .plans{grid-template-columns:1fr}
  .post-grid{grid-template-columns:1fr 1fr}
  .feat-post{grid-column:span 2;grid-template-columns:1fr}
  .mockup-stage{margin-bottom:-40px}
}
@media(max-width:560px){
  .bento{grid-template-columns:1fr}
  .cell.wide,.cell.half,.cell.third{grid-column:span 1}
  .stats{grid-template-columns:1fr 1fr}
  .post-grid{grid-template-columns:1fr}
  .feat-post{grid-column:span 1}
  .hero{padding-top:48px}
  .section{padding:52px 0}
}

/* mobile drawer ------------------------------------------------------------ */
.drawer{position:fixed;inset:0;z-index:60;background:rgba(10,10,10,.4);opacity:0;visibility:hidden;transition:opacity .25s var(--ease),visibility .25s}
.drawer.open{opacity:1;visibility:visible}
.drawer-panel{position:absolute;top:0;right:0;height:100%;width:min(84vw,340px);background:#fff;border-left:1px solid var(--ash);padding:20px;transform:translateX(100%);transition:transform .3s var(--ease);display:flex;flex-direction:column;gap:6px}
.drawer.open .drawer-panel{transform:none}
.drawer a{padding:13px 12px;border-radius:10px;font-size:16px;font-weight:500;color:var(--charcoal)}
.drawer a:hover{background:var(--paper)}
.drawer .btn{margin-top:12px;justify-content:center}
.drawer-x{align-self:flex-end;background:none;border:0;cursor:pointer;padding:8px;color:var(--slate)}
.drawer-x svg{width:22px;height:22px}

@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important}
  .reveal,[data-stagger]>*{opacity:1!important;transform:none!important;transition:none!important}
  .mockup{transform:none}
  .btn:hover,.card-post:hover{transform:none!important}
}