*{box-sizing:border-box;margin:0;padding:0}

:root{
  --ink:#111114;
  --muted:#6f6f76;
  --soft:#f5f5f7;
  --line:#e5e5ea;
  --blue:#0071e3;
  --green:#16a34a;
  --paper:#fff;
  --max:1180px;
}

body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Arial,sans-serif;
  color:var(--ink);
  background:#f1f1f4;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}

a{text-decoration:none;color:inherit}
button,input,select{font:inherit}
html,body{max-width:100%;overflow-x:hidden}

.checkout-shell{
  max-width:var(--max);
  margin:0 auto;
  padding:0 24px 72px;
}

.checkout-header{
  height:76px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.brand-link{display:flex;align-items:center;gap:10px}
.brand-link svg{flex-shrink:0}
.brand{font-size:18px;font-weight:700;letter-spacing:-.035em;color:var(--ink)}
.header-secure{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--muted);font-weight:600}

.checkout-hero{
  min-height:330px;
  border-radius:28px;
  background:
    linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,0)),
    #111114;
  color:#fff;
  display:grid;
  grid-template-columns:minmax(0,1fr) 360px;
  align-items:center;
  overflow:hidden;
  padding:44px 52px;
  margin-bottom:24px;
  box-shadow:0 28px 80px rgba(0,0,0,.16);
}

.hero-copy{max-width:650px}
.product-badge{
  display:inline-flex;
  align-items:center;
  margin-bottom:18px;
  padding:7px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.16);
  color:rgba(255,255,255,.78);
  font-size:12px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.checkout-hero h1{
  font-size:clamp(42px,5.5vw,74px);
  line-height:.9;
  letter-spacing:-.06em;
  margin-bottom:18px;
}

.checkout-hero p{
  max-width:550px;
  font-size:18px;
  line-height:1.55;
  color:rgba(255,255,255,.66);
}

.hero-proof{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:28px;
}

.hero-proof span{
  border:1px solid rgba(255,255,255,.15);
  border-radius:999px;
  padding:8px 13px;
  color:rgba(255,255,255,.78);
  background:rgba(255,255,255,.07);
  font-size:13px;
  font-weight:650;
}

.hero-product{
  justify-self:end;
  width:315px;
  aspect-ratio:1;
  border-radius:34px;
  background:radial-gradient(circle at 55% 35%,rgba(255,255,255,.2),rgba(255,255,255,.05) 50%,rgba(255,255,255,0) 70%);
  display:grid;
  place-items:center;
}

.hero-product img{
  width:86%;
  height:86%;
  object-fit:cover;
  border-radius:28px;
  box-shadow:0 35px 80px rgba(0,0,0,.45);
}

.checkout-reasons{
  display:grid;
  grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:18px;
  align-items:center;
  margin-bottom:24px;
  padding:24px;
  border-radius:22px;
  background:#fff;
  border:1px solid rgba(229,229,234,.9);
  box-shadow:0 1px 2px rgba(0,0,0,.03);
}

.reason-copy h2{
  font-size:26px;
  line-height:1.05;
  letter-spacing:-.045em;
  margin-bottom:8px;
}

.reason-copy p{
  color:var(--muted);
  font-size:14px;
  line-height:1.5;
}

.reason-list{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.reason-list div{
  display:flex;
  align-items:flex-start;
  gap:8px;
  padding:12px;
  border-radius:14px;
  background:#f7f7f9;
  color:#303036;
  font-size:13px;
  line-height:1.35;
  font-weight:650;
}

.reason-list span{
  color:var(--green);
  font-weight:900;
  flex-shrink:0;
}

.checkout-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 390px;
  gap:24px;
  align-items:start;
}

.checkout-flow{display:grid;gap:16px}

.card,.summary-card{
  background:rgba(255,255,255,.92);
  border:1px solid rgba(229,229,234,.9);
  border-radius:22px;
  box-shadow:0 1px 2px rgba(0,0,0,.03);
}

.card{padding:26px 28px 12px}
.card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
  margin-bottom:22px;
  border-bottom:1px solid var(--line);
  padding-bottom:18px;
}

.step-label{
  display:block;
  color:var(--blue);
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:6px;
}

.card h2{
  font-size:24px;
  letter-spacing:-.04em;
  line-height:1.05;
}

.card-head p{
  max-width:250px;
  color:var(--muted);
  font-size:13px;
  line-height:1.45;
  text-align:right;
}

.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-group{margin-bottom:16px}
.form-group.wide{grid-column:1 / -1}
.form-group label{display:block;font-size:13px;font-weight:650;color:#333338;margin-bottom:7px}

.form-group input,
.form-group select{
  width:100%;
  min-height:48px;
  padding:12px 14px;
  border:1.5px solid #d9d9df;
  border-radius:13px;
  font-size:15px;
  outline:none;
  transition:border-color .15s,box-shadow .15s,background .15s;
  background:#fff;
  color:var(--ink);
  -webkit-appearance:none;
  appearance:none;
}

.form-group input:focus,
.form-group select:focus{
  border-color:var(--blue);
  box-shadow:0 0 0 4px rgba(0,113,227,.12);
}

.form-group input.error,
.form-group select.error{border-color:#dc2626;box-shadow:0 0 0 4px rgba(220,38,38,.08)}
.field-error{font-size:12px;color:#dc2626;margin-top:5px;display:none}

.qty-row{display:flex;align-items:center;gap:18px;padding-bottom:14px}
.qty-stepper{display:flex;align-items:center;border:1.5px solid #d9d9df;border-radius:15px;overflow:hidden;background:#fff;flex-shrink:0}
.qty-btn{width:50px;height:48px;border:0;background:#fafafa;font-size:22px;cursor:pointer;color:var(--ink);transition:background .12s}
.qty-btn:hover{background:#ededf1}
.qty-input{width:64px;height:48px;border:0;border-left:1.5px solid var(--line);border-right:1.5px solid var(--line);text-align:center;font-size:17px;font-weight:800;outline:none;background:#fff}
.qty-note{font-size:13px;color:var(--muted);line-height:1.45}
.qty-input::-webkit-outer-spin-button,.qty-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.qty-input[type=number]{-moz-appearance:textfield}

.upsell-grid{display:grid;gap:10px;padding-bottom:14px}
.upsell-item{
  display:flex;
  align-items:center;
  gap:14px;
  padding:16px;
  border:1.5px solid #e4e4e9;
  border-radius:16px;
  cursor:pointer;
  transition:border-color .15s,background .15s,box-shadow .15s,transform .15s;
  background:#fff;
}
.upsell-item:hover{border-color:#b8b8c0;transform:translateY(-1px)}
.upsell-item.selected{border-color:var(--blue);background:#f3f8ff;box-shadow:0 0 0 4px rgba(0,113,227,.08)}
.upsell-item input[type=checkbox]{width:19px;height:19px;accent-color:var(--blue);cursor:pointer;flex-shrink:0}
.upsell-label{flex:1;min-width:0}
.upsell-name{font-size:15px;font-weight:750;letter-spacing:-.015em}
.upsell-desc{font-size:13px;color:var(--muted);margin-top:3px;line-height:1.35}
.upsell-price{font-size:15px;font-weight:800;color:var(--ink);flex-shrink:0}

.order-panel{
  position:sticky;
  top:22px;
}

.summary-card{
  padding:22px;
  box-shadow:0 20px 60px rgba(0,0,0,.08);
}

.summary-product{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:20px;
}

.summary-product img{
  width:72px;
  height:72px;
  object-fit:cover;
  border-radius:16px;
  background:#f1f1f4;
}

.summary-product span{display:block;font-size:13px;color:var(--muted);margin-bottom:3px}
.summary-product strong{display:block;font-size:16px;letter-spacing:-.025em}

.price-anchor{
  border-radius:18px;
  background:#111114;
  color:#fff;
  padding:20px;
  margin-bottom:18px;
}

.old-price{
  display:inline-block;
  color:rgba(255,255,255,.42);
  font-size:13px;
  text-decoration:line-through;
  margin-bottom:4px;
}
.current-price{display:block;font-size:36px;font-weight:900;letter-spacing:-.055em;line-height:1}
.price-note{display:block;color:rgba(255,255,255,.58);font-size:12px;margin-top:8px}

.summary-lines{display:grid;gap:9px;font-size:14px;margin:18px 0}
.summary-line{display:flex;justify-content:space-between;gap:18px;color:#3c3c43}
.discount-box{display:grid;gap:8px;padding:13px;border:1px solid var(--line);border-radius:15px;background:#fafafa}
.discount-box label{font-size:12px;font-weight:850;color:#303036}
.discount-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px}
.discount-row input{min-width:0;height:42px;border:1.5px solid #d9d9df;border-radius:12px;padding:0 11px;text-transform:uppercase;background:#fff;color:var(--ink);outline:none}
.discount-row input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,113,227,.1)}
.discount-row button{height:42px;border:0;border-radius:12px;padding:0 12px;background:#111114;color:#fff;font-size:12px;font-weight:850;cursor:pointer}
.discount-row button[hidden]{display:none}
.discount-row #discount-remove{background:#ededf1;color:#111114}
.discount-message{min-height:16px;font-size:12px;color:var(--muted);line-height:1.35}
.discount-message.success{color:#15803d;font-weight:750}
.discount-message.error{color:#dc2626;font-weight:750}
.discount-line{color:#15803d;font-weight:800}
.summary-line.total{font-size:19px;font-weight:850;color:var(--ink);padding-top:14px;border-top:1.5px solid var(--line);margin-top:4px}
.summary-note{font-size:12px;color:var(--muted);line-height:1.45;margin-top:13px}

.embedded-payment{
  margin-top:16px;
  padding-top:16px;
  border-top:1px solid var(--line);
}

.embedded-payment-head{
  display:grid;
  gap:6px;
  margin-bottom:14px;
}

.embedded-payment-head strong{
  font-size:16px;
  letter-spacing:-.02em;
}

.embedded-payment-head p{
  font-size:12px;
  color:var(--muted);
  line-height:1.45;
}

.embedded-payment-head button{
  justify-self:start;
  border:0;
  background:transparent;
  color:var(--blue);
  font-size:12px;
  font-weight:800;
  cursor:pointer;
  padding:4px 0;
}

#embedded-checkout{
  min-height:360px;
}

.btn-checkout{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:56px;
  padding:16px 22px;
  background:linear-gradient(135deg,#0071e3 0%,#005bbf 100%);
  color:#fff;
  border:0;
  border-radius:16px;
  font-size:17px;
  font-weight:800;
  cursor:pointer;
  transition:transform .12s,box-shadow .15s,opacity .15s;
  letter-spacing:-.02em;
  box-shadow:0 12px 28px rgba(0,113,227,.28);
}
.btn-checkout:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 16px 34px rgba(0,113,227,.34)}
.btn-checkout:active:not(:disabled){transform:scale(.99)}
.btn-checkout:disabled{opacity:.55;cursor:not-allowed;box-shadow:none}
.btn-label{display:flex;align-items:center;gap:8px}
.btn-checkout .spinner{display:none;width:20px;height:20px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
.btn-checkout.loading .spinner{display:block}
.btn-checkout.loading .btn-label{display:none}
@keyframes spin{to{transform:rotate(360deg)}}

.included-list{
  display:grid;
  gap:10px;
  margin-top:18px;
  padding-top:18px;
  border-top:1px solid var(--line);
  color:#3c3c43;
  font-size:13px;
  line-height:1.4;
}
.included-list span{color:var(--green);font-weight:900;margin-right:7px}

.trust-row{
  display:grid;
  gap:9px;
  margin-top:14px;
  padding:0 8px;
}
.trust-item{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  color:#5f6067;
  font-weight:650;
}
.trust-item svg{flex-shrink:0}

.side-card{
  margin-top:14px;
  padding:18px;
  border-radius:20px;
  background:#fff;
  border:1px solid rgba(229,229,234,.9);
  box-shadow:0 1px 2px rgba(0,0,0,.03);
}

.side-card h3{
  font-size:17px;
  line-height:1.15;
  letter-spacing:-.03em;
  margin-bottom:12px;
}

.reviews-card{
  display:grid;
  gap:12px;
}

.reviews-card blockquote{
  border-top:1px solid var(--line);
  padding-top:12px;
}

.reviews-card blockquote:first-of-type{
  border-top:0;
  padding-top:0;
}

.reviews-card p{
  color:#303036;
  font-size:13px;
  line-height:1.5;
  margin-bottom:7px;
}

.reviews-card cite{
  display:block;
  color:var(--muted);
  font-size:12px;
  font-style:normal;
  font-weight:750;
}

.faq-card{
  display:grid;
  gap:8px;
}

.faq-card details{
  border-top:1px solid var(--line);
  padding-top:10px;
}

.faq-card details:first-of-type{
  border-top:0;
  padding-top:0;
}

.faq-card summary{
  cursor:pointer;
  color:#202025;
  font-size:13px;
  line-height:1.35;
  font-weight:800;
  list-style:none;
}

.faq-card summary::-webkit-details-marker{display:none}

.faq-card p{
  color:var(--muted);
  font-size:12px;
  line-height:1.5;
  margin-top:7px;
}

.compare-card .card-head{
  margin-bottom:16px;
}

.compare-list{
  display:grid;
  gap:10px;
  padding-bottom:14px;
}

.compare-list div{
  display:grid;
  grid-template-columns:150px minmax(0,1fr);
  gap:12px;
  align-items:start;
  padding:14px;
  border:1px solid #e4e4e9;
  border-radius:15px;
  background:#fff;
}

.compare-list .is-best{
  border-color:rgba(22,163,74,.38);
  background:#f0fdf4;
}

.compare-list strong{
  font-size:13px;
  color:#1d1d1f;
}

.compare-list span{
  color:var(--muted);
  font-size:13px;
  line-height:1.45;
}

.alert{border-radius:14px;padding:15px 17px;font-size:14px;margin-bottom:18px;display:none}
.alert-error{background:#fef2f2;border:1px solid #fca5a5;color:#991b1b}
.alert.visible{display:block}

@media(max-width:1120px){
  .checkout-hero{grid-template-columns:1fr;padding:36px 28px}
  .checkout-grid{grid-template-columns:1fr}
  .checkout-reasons{grid-template-columns:1fr}
  .order-panel{position:static}
  .hero-product{
    width:min(320px,100%);
    justify-self:start;
    margin-top:16px;
  }
  .summary-card{max-width:none}
}

@media(max-width:760px){
  .checkout-shell{padding:0 14px 56px}
  .checkout-header{height:68px}
  .header-secure{font-size:12px}
  .checkout-hero{border-radius:22px;padding:30px 22px;margin-bottom:16px}
  .checkout-hero h1{font-size:clamp(38px,11vw,48px);line-height:.92}
  .checkout-hero p{font-size:16px}
  .hero-product{display:none}
  .hero-proof{gap:8px}
  .hero-proof span{font-size:12px;padding:7px 10px}
  .checkout-reasons{padding:18px;border-radius:18px;margin-bottom:16px}
  .reason-list{grid-template-columns:1fr}
  .card{padding:22px 18px 8px;border-radius:18px}
  .card-head{display:block}
  .card-head p{text-align:left;max-width:none;margin-top:8px}
  .form-row{grid-template-columns:1fr;gap:0}
  .qty-row{align-items:flex-start;flex-direction:column}
  .summary-card{border-radius:20px;padding:18px}
  .compare-list div{grid-template-columns:1fr}
  .summary-product img{width:62px;height:62px}
  .current-price{font-size:32px}
  .btn-checkout{min-height:54px}
  .discount-row{grid-template-columns:1fr}
  .discount-row button{width:100%}
}

@media(max-width:420px){
  .brand{font-size:16px}
  .header-secure{max-width:145px;justify-content:flex-end;text-align:right}
  .checkout-hero{padding:26px 18px}
  .card{padding:20px 16px 6px}
  .upsell-item{align-items:flex-start}
  .upsell-price{padding-top:2px}
  .summary-product{align-items:flex-start}
}