/* ==========================================================================
   ShipWeb3 — storefront design system
   Clean light theme, blue→purple gradient accents.
   ========================================================================== */

:root {
  /* brand */
  --brand-600:#3b5bfd;
  --brand-500:#4f6dff;
  --brand-400:#7189ff;
  --violet-600:#8b3dff;
  --violet-500:#a35cff;
  --gradient: linear-gradient(135deg, var(--brand-600) 0%, var(--violet-600) 100%);
  --gradient-soft: linear-gradient(135deg, rgba(59,91,253,.10) 0%, rgba(139,61,255,.10) 100%);

  /* ink */
  --ink-900:#0e1330;
  --ink-800:#1a2148;
  --ink-700:#2c3563;
  --ink-500:#5b6588;
  --ink-400:#7a85a8;
  --ink-300:#a4adc7;

  /* surfaces */
  --bg:#ffffff;
  --bg-soft:#f7f8fc;
  --bg-tint:#f2f4fd;
  --line:#e6e9f3;
  --line-strong:#d5dae9;

  /* status */
  --success:#12b76a;
  --success-bg:#e7f8f0;
  --warning:#f79009;
  --warning-bg:#fff6e8;
  --danger:#f04438;
  --danger-bg:#fdeceb;
  --info:#0ba5ec;
  --info-bg:#e7f6fe;

  /* shape */
  --r-sm:8px;
  --r:12px;
  --r-lg:18px;
  --r-xl:26px;

  --shadow-xs:0 1px 2px rgba(16,24,40,.05);
  --shadow-sm:0 2px 8px rgba(16,24,40,.06);
  --shadow:0 8px 24px rgba(16,24,40,.08);
  --shadow-lg:0 20px 48px rgba(16,24,40,.12);
  --shadow-brand:0 12px 32px rgba(79,109,255,.28);

  --container:1200px;
  --header-h:72px;

  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
}

*,*::before,*::after { box-sizing:border-box; }

/* Base size for inline SVG icons. More specific rules below override it. */
.icon{width:20px;height:20px;flex:none;}
h1 .icon,h2 .icon,h3 .icon,h4 .icon{width:1.05em;height:1.05em;vertical-align:-.14em;}
p .icon,span .icon,li .icon,td .icon,label .icon{width:1.05em;height:1.05em;vertical-align:-.14em;}

html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body {
  margin:0;
  font-family:var(--font);
  font-size:16px;
  line-height:1.6;
  color:var(--ink-700);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3,h4,h5 { margin:0 0 .5em; color:var(--ink-900); font-weight:800; line-height:1.15; letter-spacing:-.02em; }
h1{font-size:clamp(2rem,4.5vw,3.5rem);}
h2{font-size:clamp(1.6rem,3vw,2.5rem);}
h3{font-size:clamp(1.2rem,2vw,1.6rem);}
h4{font-size:1.1rem;}
p{margin:0 0 1rem;}
a{color:var(--brand-600);text-decoration:none;transition:color .15s ease;}
a:hover{color:var(--violet-600);}
img,svg{max-width:100%;}
img{height:auto;display:block;}
hr{border:0;border-top:1px solid var(--line);margin:2rem 0;}
small{font-size:.85em;}
code{font-family:var(--mono);font-size:.9em;background:var(--bg-tint);padding:.15em .4em;border-radius:6px;color:var(--brand-600);}
pre{background:var(--ink-900);color:#e6ebff;padding:1.2rem;border-radius:var(--r);overflow-x:auto;font-family:var(--mono);font-size:.875rem;line-height:1.6;}
pre code{background:none;color:inherit;padding:0;}
blockquote{margin:1.5rem 0;padding:1rem 1.4rem;border-left:4px solid var(--brand-500);background:var(--bg-soft);border-radius:0 var(--r) var(--r) 0;color:var(--ink-700);}

/* ------------------------------------------------------------- layout */

.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 24px;}
.container-narrow{max-width:820px;}
.container-wide{max-width:1440px;}

.section{padding:88px 0;}
.section-sm{padding:56px 0;}
.section-soft{background:var(--bg-soft);}
.section-tint{background:var(--gradient-soft);}

.row{display:flex;flex-wrap:wrap;gap:24px;}
.grid{display:grid;gap:24px;}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
.grid-auto{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));}

.flex{display:flex;}
.items-center{align-items:center;}
.justify-between{justify-content:space-between;}
.justify-center{justify-content:center;}
.gap-1{gap:8px;} .gap-2{gap:16px;} .gap-3{gap:24px;}
.flex-wrap{flex-wrap:wrap;}
.flex-1{flex:1;}
.text-center{text-align:center;}
.text-right{text-align:right;}
.mt-0{margin-top:0;} .mt-1{margin-top:8px;} .mt-2{margin-top:16px;} .mt-3{margin-top:24px;} .mt-4{margin-top:32px;}
.mb-0{margin-bottom:0;} .mb-1{margin-bottom:8px;} .mb-2{margin-bottom:16px;} .mb-3{margin-bottom:24px;} .mb-4{margin-bottom:32px;}
.hidden{display:none !important;}
.w-full{width:100%;}

/* --------------------------------------------------------- typography */

.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.78rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--brand-600);margin-bottom:14px;
}
.eyebrow .icon{width:15px;height:15px;flex:none;}
.section-head .eyebrow{justify-content:center;}
.section-head.left .eyebrow{justify-content:flex-start;}
.gradient-text{
  background:var(--gradient);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.lead{font-size:1.125rem;color:var(--ink-500);line-height:1.7;}
.muted{color:var(--ink-400);}
.section-head{max-width:680px;margin:0 auto 52px;text-align:center;}
.section-head.left{margin-left:0;text-align:left;}
.section-head p{color:var(--ink-500);font-size:1.05rem;margin-bottom:0;}

/* ------------------------------------------------------------ buttons */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 26px;border-radius:var(--r);border:1.5px solid transparent;
  font-family:inherit;font-size:.95rem;font-weight:700;line-height:1;
  cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease, border-color .16s ease;
}
.btn:active{transform:translateY(1px);}
.btn .icon{width:18px;height:18px;flex:none;}

.btn-primary{background:var(--gradient);color:#fff;box-shadow:var(--shadow-brand);}
.btn-primary:hover{color:#fff;transform:translateY(-2px);box-shadow:0 16px 40px rgba(79,109,255,.36);}

.btn-dark{background:var(--ink-900);color:#fff;}
.btn-dark:hover{background:var(--ink-800);color:#fff;transform:translateY(-2px);}

.btn-outline{background:#fff;color:var(--ink-900);border-color:var(--line-strong);}
.btn-outline:hover{border-color:var(--brand-500);color:var(--brand-600);transform:translateY(-2px);box-shadow:var(--shadow-sm);}

.btn-ghost{background:transparent;color:var(--ink-700);}
.btn-ghost:hover{background:var(--bg-tint);color:var(--brand-600);}

.btn-soft{background:var(--bg-tint);color:var(--brand-600);}
.btn-soft:hover{background:#e7ebfd;color:var(--brand-600);}

.btn-success{background:var(--success);color:#fff;}
.btn-success:hover{background:#0f9d5b;color:#fff;}
.btn-danger{background:var(--danger);color:#fff;}
.btn-danger:hover{background:#d92d20;color:#fff;}
.btn-danger-soft{background:var(--danger-bg);color:var(--danger);}
.btn-danger-soft:hover{background:#fbdbd9;color:var(--danger);}

.btn-lg{padding:16px 34px;font-size:1.02rem;}
.btn-sm{padding:9px 16px;font-size:.85rem;border-radius:var(--r-sm);}
.btn-xs{padding:6px 12px;font-size:.78rem;border-radius:6px;}
.btn-icon{padding:10px;border-radius:var(--r-sm);}
.btn-block{width:100%;}
.btn:disabled,.btn.is-disabled{opacity:.55;cursor:not-allowed;transform:none !important;box-shadow:none;}

/* ------------------------------------------------------------- badges */

.badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 11px;border-radius:100px;
  font-size:.75rem;font-weight:700;letter-spacing:.01em;line-height:1.4;
}
.badge .icon{width:13px;height:13px;}
.badge-primary{background:var(--bg-tint);color:var(--brand-600);}
.badge-success{background:var(--success-bg);color:#087443;}
.badge-warning{background:var(--warning-bg);color:#b54708;}
.badge-danger{background:var(--danger-bg);color:#b42318;}
.badge-info{background:var(--info-bg);color:#0670a8;}
.badge-muted{background:var(--bg-tint);color:var(--ink-500);}
.badge-dark{background:var(--ink-900);color:#fff;}
.badge-sale{background:linear-gradient(135deg,#ff5a7e,#ff8a5b);color:#fff;box-shadow:0 6px 16px rgba(255,90,126,.32);}
.badge-gradient{background:var(--gradient);color:#fff;}

.chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 13px;border-radius:100px;background:var(--bg-tint);
  color:var(--brand-600);font-size:.8rem;font-weight:600;
  transition:background .15s ease,transform .15s ease;
}
a.chip:hover{background:#e4e9fd;transform:translateY(-1px);color:var(--brand-600);}
.chip-outline{background:#fff;border:1px solid var(--line);color:var(--ink-500);}

/* -------------------------------------------------------------- cards */

.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-xs);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.card-pad{padding:26px;}
.card-hover:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#dfe4f5;}

/* product card */
.product-card{
  display:flex;flex-direction:column;overflow:hidden;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-xs);
  transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
}
.product-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:#dbe1f7;}
.product-card__media{
  position:relative;aspect-ratio:16/10;overflow:hidden;
  background:var(--gradient-soft);display:flex;align-items:center;justify-content:center;
}
.product-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease;}
.product-card:hover .product-card__media img{transform:scale(1.05);}
.product-card__flags{position:absolute;top:14px;left:14px;display:flex;gap:8px;flex-wrap:wrap;z-index:2;}
.product-card__type{position:absolute;top:14px;right:14px;z-index:2;}
.product-card__body{padding:22px;display:flex;flex-direction:column;flex:1;gap:12px;}
.product-card__cat{font-size:.76rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--brand-500);}
.product-card__title{font-size:1.12rem;font-weight:800;line-height:1.3;margin:0;color:var(--ink-900);}
.product-card__title a{color:inherit;}
.product-card__title a:hover{color:var(--brand-600);}
.product-card__desc{font-size:.9rem;color:var(--ink-500);margin:0;flex:1;line-height:1.6;}
.product-card__stack{display:flex;flex-wrap:wrap;gap:6px;}
.product-card__stack span{font-size:.72rem;font-weight:600;padding:3px 9px;border-radius:6px;background:var(--bg-soft);color:var(--ink-500);border:1px solid var(--line);}
/* wrap, or a long price pushes the View button out through the card's
   own overflow:hidden and it disappears entirely on small phones */
.product-card__foot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;padding-top:16px;border-top:1px solid var(--line);margin-top:auto;}
.product-card__price{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px;min-width:0;}
.price-now{font-size:1.5rem;font-weight:800;color:var(--ink-900);letter-spacing:-.02em;}
.price-was{font-size:.95rem;color:var(--ink-300);text-decoration:line-through;}
.price-from{font-size:.78rem;color:var(--ink-400);font-weight:600;display:block;}

/* --------------------------------------------------------------- stars */

.stars{display:inline-flex;gap:2px;align-items:center;}
.stars .star-icon{width:14px;height:14px;}
.stars .is-full{color:#f5a524;}
.stars .is-half{color:#f5a524;opacity:.55;}
.stars .is-empty{color:var(--line-strong);}
.rating-row{display:flex;align-items:center;gap:8px;font-size:.85rem;color:var(--ink-400);}

/* rating breakdown on the product page */
.rating-summary{
  display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:center;
  padding:20px;margin-bottom:26px;
  background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--r-lg);
}
.rating-summary__score{display:flex;flex-direction:column;align-items:center;gap:5px;flex:none;}
.rating-summary__number{font-size:2.6rem;font-weight:800;color:var(--ink-900);line-height:1;letter-spacing:-.03em;}
.rating-summary__bars{display:grid;gap:6px;min-width:0;}
.rating-bar{display:flex;align-items:center;gap:10px;font-size:.78rem;color:var(--ink-400);}
.rating-bar__label{width:24px;flex:none;font-weight:700;color:var(--ink-500);}
.rating-bar__track{flex:1;height:7px;border-radius:100px;background:var(--line);overflow:hidden;min-width:0;}
.rating-bar__fill{display:block;height:100%;border-radius:100px;background:#f5a524;}
.rating-bar__count{width:22px;text-align:right;flex:none;}

@media (max-width:600px){
  .rating-summary{grid-template-columns:1fr;gap:18px;}
}

/* --------------------------------------------------------------- forms */

.form-group{margin-bottom:20px;}
.form-label{display:block;font-size:.875rem;font-weight:700;color:var(--ink-800);margin-bottom:7px;}
.form-label .req{color:var(--danger);margin-left:2px;}
.form-hint{display:block;font-size:.8rem;color:var(--ink-400);margin-top:6px;line-height:1.5;}
.form-error{display:block;font-size:.82rem;color:var(--danger);margin-top:6px;font-weight:600;}

.form-control{
  /* date/datetime inputs carry a wide intrinsic min-content that would
     otherwise set the floor for whatever grid column they sit in */
  width:100%;min-width:0;padding:13px 15px;
  border:1.5px solid var(--line-strong);border-radius:var(--r);
  font-family:inherit;font-size:.95rem;color:var(--ink-900);background:#fff;
  transition:border-color .16s ease,box-shadow .16s ease;
}
.form-control::placeholder{color:var(--ink-300);}
.form-control:focus{outline:none;border-color:var(--brand-500);box-shadow:0 0 0 4px rgba(79,109,255,.13);}
.form-control.is-invalid{border-color:var(--danger);}
.form-control.is-invalid:focus{box-shadow:0 0 0 4px rgba(240,68,56,.13);}
.form-control:disabled{background:var(--bg-soft);color:var(--ink-400);cursor:not-allowed;}
textarea.form-control{min-height:130px;resize:vertical;line-height:1.6;}
select.form-control{
  appearance:none;cursor:pointer;padding-right:42px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6588' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:16px;
}
.input-group{display:flex;gap:10px;}
.input-group .form-control{flex:1;}

.form-check{display:flex;align-items:flex-start;gap:10px;cursor:pointer;font-size:.9rem;color:var(--ink-700);}
.form-check input[type=checkbox],.form-check input[type=radio]{
  width:18px;height:18px;margin:2px 0 0;accent-color:var(--brand-600);cursor:pointer;flex:none;
}
.form-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;}
.form-row > *{min-width:0;}

/* ------------------------------------------------------------- alerts */

.alert{
  display:flex;align-items:flex-start;gap:12px;
  padding:15px 18px;border-radius:var(--r);
  font-size:.92rem;font-weight:500;margin-bottom:22px;border:1px solid transparent;
}
.alert .icon{width:20px;height:20px;flex:none;margin-top:1px;}
.alert-success{background:var(--success-bg);color:#087443;border-color:#b6ecd3;}
.alert-error,.alert-danger{background:var(--danger-bg);color:#b42318;border-color:#fbc9c5;}
.alert-warning{background:var(--warning-bg);color:#b54708;border-color:#fce0b6;}
.alert-info{background:var(--info-bg);color:#0670a8;border-color:#b9e5fa;}

/* ------------------------------------------------------------ toasts */

.toast-stack{position:fixed;top:calc(var(--header-h) + 16px);right:20px;z-index:9999;display:flex;flex-direction:column;gap:10px;pointer-events:none;}
.toast{
  display:flex;align-items:center;gap:10px;
  min-width:260px;max-width:380px;padding:13px 17px;border-radius:var(--r);
  background:var(--ink-900);color:#fff;font-size:.9rem;font-weight:600;
  box-shadow:var(--shadow-lg);pointer-events:auto;
  animation:toastIn .28s cubic-bezier(.16,1,.3,1);
}
.toast .icon{width:18px;height:18px;flex:none;}
.toast.is-success{background:#0b8f55;}
.toast.is-error{background:#c9271c;}
.toast.is-hiding{animation:toastOut .22s ease forwards;}
@keyframes toastIn{from{opacity:0;transform:translateX(28px) scale(.96);}to{opacity:1;transform:none;}}
@keyframes toastOut{to{opacity:0;transform:translateX(28px) scale(.96);}}

/* ------------------------------------------------------------- header */

.site-header{
  position:sticky;top:0;z-index:900;
  background:rgba(255,255,255,.88);backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;transition:border-color .2s ease,box-shadow .2s ease;
}
.site-header.is-stuck{border-bottom-color:var(--line);box-shadow:var(--shadow-xs);}
.header-inner{display:flex;align-items:center;gap:28px;height:var(--header-h);}

.brand{display:flex;align-items:center;gap:11px;font-weight:800;font-size:1.22rem;color:var(--ink-900);letter-spacing:-.02em;flex:none;}
.brand:hover{color:var(--ink-900);}
.brand-mark{
  width:38px;height:38px;border-radius:11px;background:var(--gradient);
  display:grid;place-items:center;color:#fff;font-size:.95rem;font-weight:900;
  box-shadow:var(--shadow-brand);letter-spacing:-.03em;flex:none;
}

/* An uploaded logo replaces .brand-mark. Height is set inline from the admin
   setting; width follows the artwork, capped so a wide wordmark cannot push
   the nav off the header. */
.brand-logo{display:block;width:auto;max-width:200px;object-fit:contain;flex:none;}

.main-nav{display:flex;align-items:center;gap:4px;margin-left:8px;}
.main-nav a{
  padding:9px 15px;border-radius:var(--r-sm);
  font-size:.93rem;font-weight:600;color:var(--ink-700);
  transition:background .15s ease,color .15s ease;
}
.main-nav a:hover{background:var(--bg-tint);color:var(--brand-600);}
.main-nav a.active{background:var(--bg-tint);color:var(--brand-600);}

.header-actions{display:flex;align-items:center;gap:10px;margin-left:auto;}

.icon-btn{
  position:relative;display:grid;place-items:center;
  width:42px;height:42px;border-radius:var(--r-sm);border:1px solid var(--line);
  background:#fff;color:var(--ink-700);cursor:pointer;
  transition:border-color .15s ease,color .15s ease,background .15s ease;
}
.icon-btn:hover{border-color:var(--brand-400);color:var(--brand-600);background:var(--bg-tint);}
.icon-btn .icon{width:20px;height:20px;}
.cart-count{
  position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;padding:0 5px;
  border-radius:100px;background:var(--gradient);color:#fff;
  font-size:.68rem;font-weight:800;display:grid;place-items:center;
  border:2px solid #fff;
}
.cart-count:empty,.cart-count[data-count="0"]{display:none;}

.nav-toggle{display:none;}

/* user dropdown */
.dropdown{position:relative;}
.dropdown-menu{
  position:absolute;top:calc(100% + 10px);right:0;min-width:216px;
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow-lg);padding:7px;z-index:950;
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .16s ease,transform .16s ease,visibility .16s;
}
.dropdown.is-open .dropdown-menu{opacity:1;visibility:visible;transform:none;}
.dropdown-menu a,.dropdown-menu button{
  display:flex;align-items:center;gap:10px;width:100%;
  padding:10px 12px;border:0;border-radius:var(--r-sm);background:none;
  font-family:inherit;font-size:.9rem;font-weight:600;color:var(--ink-700);
  text-align:left;cursor:pointer;transition:background .14s ease,color .14s ease;
}
.dropdown-menu a:hover,.dropdown-menu button:hover{background:var(--bg-tint);color:var(--brand-600);}
.dropdown-menu .icon{width:17px;height:17px;}
.dropdown-divider{height:1px;background:var(--line);margin:6px 0;}
.dropdown-head{padding:11px 12px 9px;border-bottom:1px solid var(--line);margin-bottom:6px;}
.dropdown-head strong{display:block;font-size:.9rem;color:var(--ink-900);}
.dropdown-head span{font-size:.78rem;color:var(--ink-400);word-break:break-all;}

.avatar{
  width:34px;height:34px;border-radius:50%;background:var(--gradient);
  display:grid;place-items:center;color:#fff;font-size:.82rem;font-weight:800;flex:none;
  object-fit:cover;
}
.avatar-lg{width:64px;height:64px;font-size:1.4rem;}

/* ---------------------------------------------------------------- hero */

.hero{position:relative;padding:78px 0 92px;overflow:hidden;}
.hero::before{
  content:'';position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(900px 460px at 12% -10%, rgba(79,109,255,.13), transparent 62%),
    radial-gradient(760px 420px at 92% 6%, rgba(139,61,255,.13), transparent 60%);
}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;}
.hero h1{margin-bottom:22px;}
.hero .lead{font-size:1.18rem;margin-bottom:32px;max-width:560px;}
.hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:26px;}
.hero-trust{display:flex;align-items:center;gap:9px;font-size:.9rem;color:var(--ink-500);font-weight:500;}
.hero-trust .icon{width:18px;height:18px;color:var(--success);flex:none;}

.social-proof{
  display:inline-flex;align-items:center;gap:12px;
  padding:8px 18px 8px 8px;border-radius:100px;
  background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-sm);
  font-size:.88rem;font-weight:600;color:var(--ink-700);margin-bottom:26px;
}
.avatar-stack{display:flex;}
.avatar-stack span{
  width:30px;height:30px;border-radius:50%;border:2px solid #fff;
  background:var(--gradient);display:grid;place-items:center;
  color:#fff;font-size:.66rem;font-weight:800;margin-left:-9px;
}
.avatar-stack span:first-child{margin-left:0;}

/* hero visual */
.hero-visual{position:relative;}

/* --------------------------------------------------------- hero stage */
/* Two panels — the source and a playable demo — sharing one footprint. */

.hero-stage{position:relative;}

.stage-switch{
  display:inline-flex;gap:3px;padding:4px;margin-bottom:12px;
  background:#fff;border:1px solid var(--line);border-radius:100px;
  box-shadow:var(--shadow-xs);
}
.stage-switch__btn{
  display:inline-flex;align-items:center;gap:6px;
  border:0;background:none;cursor:pointer;
  padding:7px 15px;border-radius:100px;
  font-size:.79rem;font-weight:700;color:var(--ink-400);
  transition:background .16s ease,color .16s ease;
}
.stage-switch__btn .icon{width:14px;height:14px;}
.stage-switch__btn:hover{color:var(--ink-700);}
.stage-switch__btn.is-active{background:var(--gradient);color:#fff;box-shadow:var(--shadow-brand);}

.stage-panel[hidden]{display:none;}
.stage-panel{animation:codeFade .32s ease;}

/* --------------------------------------------------------- tap demo */

.tap-demo{
  position:relative;z-index:2;border-radius:var(--r-xl);overflow:hidden;
  background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-lg);
}
.tap-demo__head{
  display:flex;align-items:flex-start;justify-content:space-between;
  padding:16px 20px;border-bottom:1px solid var(--line);
}
.tap-demo__label{
  font-size:.64rem;font-weight:800;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-300);
}
.tap-demo__wallet{font-family:var(--mono);font-size:.86rem;font-weight:700;color:var(--ink-700);margin-top:2px;}
.tap-demo__tokens{
  font-size:1.55rem;font-weight:800;color:var(--ink-900);
  letter-spacing:-.02em;line-height:1.15;font-variant-numeric:tabular-nums;
}
.tap-demo__tokens.is-bump{animation:tokenBump .28s ease;}
@keyframes tokenBump{0%{transform:scale(1);}40%{transform:scale(1.11);color:var(--brand-600);}100%{transform:scale(1);}}

.tap-demo__arena{
  position:relative;height:216px;display:grid;place-items:center;
  cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;
  background:
    radial-gradient(circle at 50% 45%, rgba(123,77,255,.10), transparent 62%),
    var(--bg-soft);
  overflow:hidden;
}
.tap-demo__arena:focus-visible{outline:2px solid var(--brand-500);outline-offset:-3px;}

.tap-demo__glow{
  position:absolute;width:190px;height:190px;border-radius:50%;
  background:radial-gradient(circle, rgba(79,109,255,.22), transparent 68%);
  animation:pulseGlow 2.6s ease-in-out infinite;
}
@keyframes pulseGlow{0%,100%{transform:scale(1);opacity:.7;}50%{transform:scale(1.14);opacity:1;}}

.tap-coin{
  position:relative;width:112px;height:112px;border-radius:50%;
  display:grid;place-items:center;
  background:linear-gradient(150deg,#ffd76e,#f7a325 52%,#e0851a);
  box-shadow:0 12px 26px -8px rgba(224,133,26,.7), inset 0 -5px 12px rgba(0,0,0,.16), inset 0 5px 10px rgba(255,255,255,.5);
  transition:transform .09s cubic-bezier(.2,1.6,.4,1);
}
.tap-coin__face{
  width:84px;height:84px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(150deg,#ffe8a8,#f8b64a);
  box-shadow:inset 0 2px 6px rgba(255,255,255,.7);
}
.tap-coin__mark{
  font-size:1.32rem;font-weight:900;letter-spacing:-.04em;color:#8a4d05;
  text-shadow:0 1px 0 rgba(255,255,255,.55);
}
.tap-coin.is-hit{transform:scale(.9);}

.tap-float{
  position:absolute;pointer-events:none;
  font-weight:800;font-size:1rem;color:var(--brand-600);
  animation:tapFloat .78s ease-out forwards;
}
@keyframes tapFloat{
  0%{opacity:1;transform:translateY(0) scale(.85);}
  100%{opacity:0;transform:translateY(-62px) scale(1.15);}
}

.tap-demo__hint{
  position:absolute;bottom:14px;font-size:.76rem;font-weight:600;color:var(--ink-300);
  animation:float 3s ease-in-out infinite;
}
.tap-demo__combo{
  position:absolute;top:14px;right:16px;
  padding:4px 11px;border-radius:100px;
  background:var(--gradient);color:#fff;font-size:.72rem;font-weight:800;
}

.tap-demo__energy{padding:14px 20px 4px;}
.tap-demo__energy-row{
  display:flex;align-items:center;justify-content:space-between;
  font-size:.76rem;font-weight:700;color:var(--ink-500);margin-bottom:7px;
}
.tap-demo__energy-row .icon{width:13px;height:13px;color:var(--warning);vertical-align:-2px;}
.tap-demo__energy-row strong{font-variant-numeric:tabular-nums;color:var(--ink-800);}
.tap-demo__bar{height:7px;border-radius:100px;background:var(--line);overflow:hidden;}
.tap-demo__bar span{
  display:block;height:100%;border-radius:100px;
  background:linear-gradient(90deg,#f79009,#ffd76e);
  transition:width .18s ease;
}

.tap-demo__foot{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 20px 14px;font-size:.74rem;color:var(--ink-400);font-weight:600;
}
.tap-demo__live{display:inline-flex;align-items:center;gap:6px;color:var(--success);}
.tap-demo__live i{
  width:7px;height:7px;border-radius:50%;background:var(--success);display:block;
  animation:caret 1.4s ease-in-out infinite;
}

@media (prefers-reduced-motion:reduce){
  .tap-demo__glow,.tap-demo__hint,.tap-demo__live i{animation:none;}
  .stage-panel{animation:none;}
}

/* ---------------------------------------------------- hero code window */
/* Deliberately dark against the light page: it reads as a real editor, and
   the product being sold is source code, so show source code. */

.code-window{
  position:relative;z-index:2;border-radius:var(--r-xl);overflow:hidden;
  background:#0f1424;border:1px solid #232a45;
  box-shadow:0 24px 60px -18px rgba(14,19,48,.45), var(--shadow-lg);
}

.code-window__bar{
  display:flex;align-items:center;gap:14px;
  padding:11px 14px;background:#161d33;border-bottom:1px solid #232a45;
}
.code-window__lights{display:flex;gap:7px;flex:none;}
.code-window__lights i{width:11px;height:11px;border-radius:50%;display:block;background:#ff5f57;}
.code-window__lights i:nth-child(2){background:#febc2e;}
.code-window__lights i:nth-child(3){background:#28c840;}

.code-window__tabs{display:flex;gap:3px;overflow-x:auto;scrollbar-width:none;}
.code-window__tabs::-webkit-scrollbar{display:none;}
.code-tab{
  border:0;background:none;cursor:pointer;white-space:nowrap;
  font-family:var(--mono);font-size:.74rem;font-weight:600;
  color:#6f7da8;padding:5px 11px;border-radius:7px;
  transition:color .15s ease,background .15s ease;
}
.code-tab:hover{color:#b9c6ee;}
.code-tab.is-active{color:#fff;background:#232a45;}

.code-body{
  margin:0;padding:14px 0;background:none;border:0;
  font-family:var(--mono);font-size:.76rem;line-height:1.62;
  overflow-x:auto;white-space:pre;
  /* The files differ by a line or two; a floor stops the hero jumping as the
     tabs rotate. */
  min-height:322px;
}
.code-line{display:block;min-height:1.62em;}
.code-num{
  display:inline-block;width:38px;padding-right:14px;text-align:right;
  color:#3f4a70;user-select:none;
}
.code-text{color:#c8d2f0;}

/* syntax tokens */
.t-k{color:#c792ea;}          /* keyword   */
.t-s{color:#a5e884;}          /* string    */
.t-f{color:#82aaff;}          /* function  */
.t-n{color:#f78c6c;}          /* number    */
.t-c{color:#5a6689;font-style:italic;} /* comment */
.t-t{color:#ffcb6b;}          /* type      */
.t-o{color:#89ddff;}          /* operator  */

.code-window__foot{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:10px 16px;background:#0b0f1c;border-top:1px solid #232a45;
  font-family:var(--mono);font-size:.72rem;
}
.code-window__lang{color:#6f7da8;font-weight:600;}
.code-window__term{display:inline-flex;align-items:center;gap:7px;color:#a5e884;min-width:0;}
.code-window__tick{flex:none;}
.code-caret{
  width:7px;height:13px;background:#a5e884;display:inline-block;flex:none;
  animation:caret 1.05s step-end infinite;
}
@keyframes caret{0%,100%{opacity:1;}50%{opacity:0;}}

.code-pane[hidden]{display:none;}
.code-pane{animation:codeFade .3s ease;}
@keyframes codeFade{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:none;}}

@media (prefers-reduced-motion:reduce){
  .code-caret{animation:none;}
  .code-pane{animation:none;}
}
.float-tag{
  position:absolute;z-index:3;
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 15px;border-radius:100px;background:#fff;
  border:1px solid var(--line);box-shadow:var(--shadow);
  font-size:.8rem;font-weight:700;color:var(--ink-800);
  animation:float 5s ease-in-out infinite;
}
.float-tag i{width:8px;height:8px;border-radius:50%;background:var(--brand-500);display:block;}
/* Sat mostly outside the window — they should frame the code, not cover it. */
.float-tag.t1{top:-18px;right:26px;}
.float-tag.t2{top:30%;left:-88px;animation-delay:-1.6s;}
.float-tag.t2 i{background:var(--violet-500);}
.float-tag.t3{bottom:-22px;right:-46px;animation-delay:-3.2s;}
.float-tag.t3 i{background:var(--success);}

/* Below this the window fills the column and there is no margin to sit in. */
@media (max-width:1180px){
  .float-tag.t2{left:-30px;}
  .float-tag.t3{right:-6px;}
}
@keyframes float{0%,100%{transform:translateY(0);}50%{transform:translateY(-11px);}}

/* ------------------------------------------------------------- stats */

.stat-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
.stat{text-align:center;padding:26px 16px;border-radius:var(--r-lg);background:#fff;border:1px solid var(--line);}
.stat__value{font-size:2.1rem;font-weight:800;letter-spacing:-.03em;line-height:1;margin-bottom:7px;}
.stat__label{font-size:.85rem;color:var(--ink-400);font-weight:600;}

/* ------------------------------------------------------ feature cards */

.feature{padding:30px;border-radius:var(--r-lg);background:#fff;border:1px solid var(--line);transition:transform .2s ease,box-shadow .2s ease;}
.feature:hover{transform:translateY(-4px);box-shadow:var(--shadow);}
.feature__icon{
  width:52px;height:52px;border-radius:15px;background:var(--gradient-soft);
  display:grid;place-items:center;color:var(--brand-600);margin-bottom:18px;
}
.feature__icon .icon{width:25px;height:25px;}
.feature h3{font-size:1.13rem;margin-bottom:9px;}
.feature p{font-size:.93rem;color:var(--ink-500);margin:0;line-height:1.65;}

/* category tiles */
.cat-tile{
  display:flex;align-items:center;gap:15px;padding:19px;
  border-radius:var(--r-lg);background:#fff;border:1px solid var(--line);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.cat-tile:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:#dbe1f7;}
.cat-tile__icon{width:46px;height:46px;border-radius:13px;background:var(--gradient-soft);display:grid;place-items:center;color:var(--brand-600);flex:none;}
.cat-tile__icon .icon{width:22px;height:22px;}
.cat-tile strong{display:block;font-size:.98rem;color:var(--ink-900);line-height:1.3;}
.cat-tile span{font-size:.82rem;color:var(--ink-400);}

/* --------------------------------------------------------------- tabs */

/* min-width:0 matters: as a flex item this defaults to min-width:auto, which
   refuses to shrink below the chips inside, so max-width:100% never bites and
   the row pushes the page sideways instead of scrolling. */
.tabs{
  display:flex;gap:6px;padding:6px;background:var(--bg-soft);
  border-radius:var(--r);border:1px solid var(--line);
  width:fit-content;max-width:100%;min-width:0;overflow-x:auto;
  scrollbar-width:none;
}
.tabs::-webkit-scrollbar{display:none;}
.tabs a,.tabs button{
  padding:9px 18px;border-radius:var(--r-sm);border:0;background:none;
  font-family:inherit;font-size:.88rem;font-weight:700;color:var(--ink-500);
  cursor:pointer;white-space:nowrap;transition:background .15s ease,color .15s ease;
}
.tabs a:hover,.tabs button:hover{color:var(--brand-600);}
.tabs a.active,.tabs button.active{background:#fff;color:var(--brand-600);box-shadow:var(--shadow-xs);}

/* ------------------------------------------------------------- tables */

.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;}
table.table{width:100%;border-collapse:collapse;font-size:.9rem;min-width:640px;}
table.table th{
  text-align:left;padding:14px 18px;background:var(--bg-soft);
  font-size:.76rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-400);
  border-bottom:1px solid var(--line);white-space:nowrap;
}
table.table td{padding:15px 18px;border-bottom:1px solid var(--line);color:var(--ink-700);vertical-align:middle;}
table.table tbody tr:last-child td{border-bottom:0;}
table.table tbody tr{transition:background .13s ease;}
table.table tbody tr:hover{background:var(--bg-soft);}
table.table td strong{color:var(--ink-900);}
.table-actions{display:flex;gap:6px;justify-content:flex-end;}

/* --------------------------------------------------------- pagination */

.pagination{display:flex;justify-content:center;align-items:center;gap:7px;margin-top:44px;flex-wrap:wrap;}
.pagination a,.pagination span{
  min-width:42px;height:42px;padding:0 13px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--r-sm);border:1px solid var(--line);background:#fff;
  font-size:.9rem;font-weight:700;color:var(--ink-700);
  transition:border-color .15s ease,color .15s ease,background .15s ease;
}
.pagination a:hover{border-color:var(--brand-500);color:var(--brand-600);background:var(--bg-tint);}
.pagination .current{background:var(--gradient);color:#fff;border-color:transparent;box-shadow:var(--shadow-brand);}
.pagination .disabled{opacity:.4;pointer-events:none;}
.pagination .gap{border:0;background:none;}
.pagination .icon{width:16px;height:16px;}

/* ------------------------------------------------------------ footer */

.site-footer{background:var(--ink-900);color:#a9b4d4;padding:72px 0 0;margin-top:auto;}
.site-footer a{color:#a9b4d4;}
.site-footer a:hover{color:#fff;}
.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.5fr;gap:44px;padding-bottom:52px;}
.footer-brand .brand{color:#fff;margin-bottom:16px;}
.footer-brand .brand:hover{color:#fff;}
.footer-about{font-size:.92rem;line-height:1.7;color:#8f9cc0;max-width:330px;margin-bottom:22px;}
.footer-social{display:flex;gap:10px;}
.footer-social a{
  width:40px;height:40px;border-radius:11px;display:grid;place-items:center;
  background:rgba(255,255,255,.07);color:#c3cce6;
  transition:background .16s ease,color .16s ease,transform .16s ease;
}
.footer-social a:hover{background:var(--gradient);color:#fff;transform:translateY(-3px);}
.footer-social .icon{width:19px;height:19px;}
.footer-col h4{color:#fff;font-size:.82rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;margin-bottom:19px;}
.footer-col ul{list-style:none;padding:0;margin:0;display:grid;gap:11px;}
.footer-col li a{font-size:.93rem;}
.footer-news p{font-size:.9rem;color:#8f9cc0;margin-bottom:15px;}
.footer-news form{display:flex;gap:9px;}
.footer-news input{
  flex:1;min-width:0;padding:12px 15px;border-radius:var(--r-sm);
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);
  color:#fff;font-family:inherit;font-size:.9rem;
}
.footer-news input::placeholder{color:#7b88ad;}
.footer-news input:focus{outline:none;border-color:var(--brand-400);background:rgba(255,255,255,.1);}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.09);padding:24px 0;
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  font-size:.87rem;color:#7b88ad;
}
.footer-bottom nav{display:flex;gap:22px;flex-wrap:wrap;}

/* --------------------------------------------------------- breadcrumb */

.breadcrumb{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:.86rem;color:var(--ink-400);margin-bottom:22px;}
.breadcrumb a{color:var(--ink-500);font-weight:600;}
.breadcrumb a:hover{color:var(--brand-600);}
.breadcrumb .icon{width:14px;height:14px;color:var(--ink-300);}

/* -------------------------------------------------------- page header */

.page-head{padding:52px 0 40px;background:var(--bg-soft);border-bottom:1px solid var(--line);}
.page-head h1{margin-bottom:11px;}
.page-head p{color:var(--ink-500);font-size:1.05rem;margin:0;max-width:640px;}

/* ------------------------------------------------------- empty states */

.empty{text-align:center;padding:72px 24px;}
.empty__icon{
  width:78px;height:78px;border-radius:24px;background:var(--bg-tint);
  display:grid;place-items:center;color:var(--brand-500);margin:0 auto 22px;
}
.empty__icon .icon{width:36px;height:36px;}
.empty h3{margin-bottom:9px;}
.empty p{color:var(--ink-400);max-width:420px;margin:0 auto 26px;}

/* ------------------------------------------------------------ utility */

.btn-google{gap:11px;font-weight:600;}
.btn-google .google-mark{width:18px;height:18px;flex:none;}

/* banner nudging unverified accounts */
.verify-banner{
  background:linear-gradient(135deg,#fff6e8,#fdf0e0);
  border-bottom:1px solid #fce0b6;
}
.verify-banner__inner{
  display:flex;align-items:center;gap:14px;padding:13px 0;flex-wrap:wrap;
  font-size:.9rem;color:#7a4a08;
}
.verify-banner__inner .icon{width:19px;height:19px;color:var(--warning);flex:none;}
.verify-banner__inner strong{color:#5c3705;}
.verify-banner__inner form{margin-left:auto;display:flex;gap:8px;}

.divider-label{display:flex;align-items:center;gap:16px;color:var(--ink-300);font-size:.83rem;font-weight:600;margin:26px 0;}
.divider-label::before,.divider-label::after{content:'';flex:1;height:1px;background:var(--line);}

.copy-field{
  display:flex;align-items:center;gap:10px;padding:12px 14px;
  border:1.5px dashed var(--line-strong);border-radius:var(--r);background:var(--bg-soft);
}
.copy-field code{flex:1;background:none;padding:0;color:var(--ink-900);font-size:.86rem;word-break:break-all;font-weight:600;}

.skeleton{background:linear-gradient(90deg,var(--bg-soft) 25%,var(--bg-tint) 50%,var(--bg-soft) 75%);background-size:200% 100%;animation:shimmer 1.4s infinite;border-radius:var(--r-sm);}
@keyframes shimmer{to{background-position:-200% 0;}}

.spinner{
  width:17px;height:17px;border:2px solid rgba(255,255,255,.35);
  border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite;display:inline-block;
}
@keyframes spin{to{transform:rotate(360deg);}}

/* Scoped to .js so a blocked or slow script never leaves a section blank —
   without JS the content is simply there, unanimated. */
.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s cubic-bezier(.16,1,.3,1);}
.js .reveal.is-visible{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none;transition:none;}
}

/* ------------------------------------------------------- prose (blog) */

.prose{font-size:1.06rem;line-height:1.8;color:var(--ink-700);}
.prose h2{font-size:1.65rem;margin:2.2em 0 .7em;}
.prose h3{font-size:1.3rem;margin:1.9em 0 .6em;}
.prose p{margin:0 0 1.35em;}
.prose ul,.prose ol{margin:0 0 1.35em;padding-left:1.5em;}
.prose li{margin-bottom:.6em;}
.prose img{border-radius:var(--r-lg);margin:2em 0;box-shadow:var(--shadow);}
.prose a{font-weight:600;text-decoration:underline;text-underline-offset:3px;}
.prose strong{color:var(--ink-900);font-weight:700;}
.prose > :first-child{margin-top:0;}

/* ------------------------------------------------- main + aside layout */
/*
 * Every page that pairs a main column with a sidebar used to declare the grid
 * inline and ship its own [style*="1fr 340px"] media query to undo it. Those
 * selectors drifted out of step with the markup and several never matched at
 * all, so the sidebar simply never collapsed.
 *
 * minmax(0,1fr) rather than 1fr is the important part: a bare 1fr track has a
 * min-content floor, so one wide table inside stretches the track past its own
 * container and the whole page scrolls sideways. Capping the minimum at 0 lets
 * the track shrink and hands the overflow to the scroller that should own it.
 */

.split{
  display:grid;
  grid-template-columns:minmax(0,1fr) var(--aside,340px);
  gap:var(--split-gap,22px);align-items:start;
}

/* Two proportional columns rather than a fixed sidebar. */
.split--ratio{grid-template-columns:minmax(0,var(--main,1.5fr)) minmax(0,var(--side,1fr));}

/* Navigation column first, content second (the legal pages). */
.split--nav{grid-template-columns:var(--aside,250px) minmax(0,1fr);}

.split > *{min-width:0;}

/* Same floor for the dashboard's own content column. */
.dash-content > *{min-width:0;}

@media (max-width:1024px){
  .split,
  .split--ratio,
  .split--nav{grid-template-columns:minmax(0,1fr);gap:var(--split-gap-sm,22px);}
}

/* Shop filter bar: search, a facet, sort and the button. */
.shop-filters{
  display:grid;grid-template-columns:1.6fr 1fr 1fr auto;
  gap:14px;align-items:end;
}
@media (max-width:860px){
  .shop-filters{grid-template-columns:1fr 1fr;}
  .shop-filters > .form-group:first-child{grid-column:1 / -1;}
  .shop-filters > .btn{grid-column:1 / -1;justify-content:center;}
}
@media (max-width:480px){
  .shop-filters{grid-template-columns:1fr;}
}

/* ---------------------------------------------------------- responsive */

@media (max-width:1024px){
  /* minmax(0,…) not 1fr — a bare 1fr keeps a min-content floor, and the
     social-proof row is wide enough to push the column past the viewport
     where .hero{overflow:hidden} then silently crops the headline. */
  .hero-grid{grid-template-columns:minmax(0,1fr);gap:44px;}
  .hero-grid > *{min-width:0;}
  .hero-visual{max-width:520px;}
  .footer-grid{grid-template-columns:1fr 1fr;gap:36px;}
  .grid-4{grid-template-columns:repeat(2,1fr);}
  .stat-strip{grid-template-columns:repeat(2,1fr);}
}

@media (max-width:900px){
  .grid-3{grid-template-columns:repeat(2,1fr);}
}

@media (max-width:768px){
  .section{padding:60px 0;}
  .container{padding:0 18px;}

  .nav-toggle{display:grid;}
  .main-nav{
    position:fixed;inset:var(--header-h) 0 auto;
    flex-direction:column;align-items:stretch;gap:2px;
    background:#fff;border-bottom:1px solid var(--line);
    padding:14px 18px 22px;margin:0;box-shadow:var(--shadow);
    transform:translateY(-118%);transition:transform .26s cubic-bezier(.16,1,.3,1);
    max-height:calc(100vh - var(--header-h));overflow-y:auto;
  }
  .main-nav.is-open{transform:none;}
  .main-nav a{padding:13px 15px;font-size:1rem;}

  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}
  .form-row{grid-template-columns:minmax(0,1fr);gap:0;}
  .footer-grid{grid-template-columns:1fr;gap:34px;}
  .footer-bottom{flex-direction:column;text-align:center;}
  .hero{padding:48px 0 62px;}
  .hero-cta{flex-direction:column;align-items:stretch;}
  .hero-cta .btn{width:100%;}
  .float-tag{display:none;}
  .toast-stack{left:16px;right:16px;top:auto;bottom:16px;}
  .toast{min-width:0;max-width:none;}
  .page-head{padding:36px 0 30px;}
}

/* The signed-out header is the widest the bar ever gets: brand + cart +
   "Sign in" + "Get started" + hamburger. On a phone that ran ~117px past the
   viewport and pushed the menu button clean off the screen, so "Sign in" moves
   into the menu (see .nav-auth) and the row tightens well before 360px. */
@media (max-width:600px){
  .header-inner{gap:12px;}
  .brand{font-size:1.05rem;gap:8px;min-width:0;}
  .brand span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .brand-mark{width:32px;height:32px;border-radius:9px;font-size:.82rem;}
  .brand-logo{max-width:132px;}
  .header-actions{gap:6px;}
  .header-actions .btn-ghost{display:none;}
  .header-actions .btn{padding-left:13px;padding-right:13px;}
  .icon-btn{width:36px;height:36px;}
  .icon-btn .icon{width:17px;height:17px;}
}

/* Auth links inside the mobile menu — hidden while the desktop nav is a row. */
.nav-auth{display:none;}
@media (max-width:768px){
  .nav-auth{
    display:flex;flex-direction:column;gap:2px;
    margin-top:10px;padding-top:12px;border-top:1px solid var(--line);
  }
  .nav-auth a{display:flex;align-items:center;gap:10px;}
  .nav-auth .icon{width:17px;height:17px;color:var(--brand-600);}
}

/* Smallest phones still in use (iPhone SE, 320px). */
@media (max-width:360px){
  .container{padding:0 14px;}

  /* Even with "Sign in" moved into the menu, brand + cart + CTA + hamburger
     is 3px over at 320. Reclaim it from the gaps and the CTA's padding. */
  .header-inner{gap:8px;}
  .header-actions{gap:4px;}
  .header-actions .btn{padding-left:10px;padding-right:10px;font-size:.8rem;}
  .icon-btn{width:34px;height:34px;}

  /* A nowrap label plus 26px of side padding gives .btn a ~254px min-content,
     which no longer fits a padded panel here — let long labels wrap and trim
     the padding rather than have the button clipped by .panel{overflow:hidden}. */
  .btn{padding-left:16px;padding-right:16px;white-space:normal;line-height:1.25;text-align:center;}
  .btn-lg{padding-left:20px;padding-right:20px;}
}

/* A slug, URL or hash in a hint has no break opportunity and would otherwise
   push its panel wider than the screen. */
.form-hint,.form-hint strong,.form-text{overflow-wrap:anywhere;}

@media (max-width:520px){
  .social-proof{font-size:.8rem;}
  /* Two-up keeps the strip compact; the numbers are short enough to share a row. */
  .stat-strip{gap:12px;}
  .stat{padding:20px 10px;}
  .stat__value{font-size:1.7rem;}
  .stat__label{font-size:.78rem;}
}

@media (max-width:359px){
  .stat-strip{grid-template-columns:1fr;}
}

@media print{
  .site-header,.site-footer,.no-print{display:none !important;}
  body{background:#fff;}
}