:root{
  --pdpd-primary:#a50303;
  --pdpd-text:#0e1116;
  --pdpd-muted:#6b7280;
  --pdpd-surface:#ffffff;
  --pdpd-border:#e6e8ee;
  --pdpd-shadow:0 10px 30px rgba(10,12,16,.10);
  --pdpd-shadow-lg:0 22px 60px rgba(10,12,16,.18);
}

/* Base resets for safer mobile layout */
.pdpd-root{
  position:relative;
  background:#fff;
  color:var(--pdpd-text);
  font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  overflow-x:hidden;                 /* prevent sideways scroll */
  -webkit-text-size-adjust:100%;     /* iOS zoom consistency */
  word-break:normal;
}
.pdpd-root *{ box-sizing:border-box; }

.pdpd-gradient{
  position:absolute; inset:-8% 0 auto;
  height:520px;
  background:
    radial-gradient(900px 380px at 20% -10%,rgba(165,3,3,.12),transparent 60%),
    radial-gradient(600px 320px at 95% 10%,rgba(0,0,0,.06),transparent 60%);
  pointer-events:none;
}

.pdpd-container{
  position:relative; z-index:1;
  max-width:1200px; margin:0 auto;
  padding:60px 22px;
}

/* ── HERO ───────────────────────────────────────────────────────────── */
.pdpd-hero{
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:44px; align-items:center; margin:8px 0 28px;
}
.pdpd-col{ min-width:0; }            /* fix flex/grid overflow */
.pdpd-kicker{ color:var(--pdpd-primary); font-weight:800; letter-spacing:.08em; text-transform:uppercase; font-size:.9rem; }
.pdpd-title{
  margin:.15em 0 .35em;
  font-size:clamp(34px,4.6vw,58px);
  line-height:1.08; font-weight:900; letter-spacing:-.015em;
  word-wrap:break-word;
}
.pdpd-desc p{ margin:.6em 0; color:#1f2937; font-size:1.06rem; line-height:1.65; }

.pdpd-meta{
  display:flex; flex-wrap:wrap; gap:10px; margin:.7rem 0 1.1rem;
}
.pdpd-chip{
  display:inline-flex; align-items:center; gap:.5em;
  background:#f3f5f8; border:1px solid var(--pdpd-border);
  color:#0f141c; padding:.5em .9em; border-radius:999px;
  font-size:.93rem; font-weight:700; box-shadow:0 1px 0 rgba(255,255,255,.8) inset;
  max-width:100%; white-space:nowrap;
}
.pdpd-chip svg{ opacity:.95 }

/* CTA */
.pdpd-cta{
  display:inline-block; margin-top:.75rem;
  background:linear-gradient(180deg,#b00505,#8f0303);
  color:#fff; text-decoration:none;
  padding:.9em 1.45em; border-radius:12px; font-weight:900; letter-spacing:.01em;
  box-shadow:0 12px 28px rgba(165,3,3,.28);
  transition:transform .06s ease,box-shadow .2s ease,filter .15s;
}
.pdpd-cta:hover{ filter:brightness(1.05); box-shadow:0 16px 36px rgba(165,3,3,.34); }
.pdpd-cta:active{ transform:translateY(1px); }

.pdpd-col--art{ align-self:stretch; }
.pdpd-heroimg{
  position:relative; height:min(460px,48vh);
  border-radius:22px; overflow:hidden;
  background-size:cover; background-position:center;
  box-shadow:var(--pdpd-shadow-lg);
}
.pdpd-heroimg::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(8deg,rgba(0,0,0,.38) 0%,rgba(0,0,0,.20) 38%,rgba(0,0,0,.10) 60%,rgba(0,0,0,0) 100%);
}
.pdpd-win-tag{
  position:absolute; top:14px; right:14px;
  background:var(--pdpd-primary); color:#fff; font-weight:900;
  font-size:13px; letter-spacing:.08em; padding:.45em .9em;
  border-radius:12px; text-transform:uppercase;
  box-shadow:0 10px 24px rgba(165,3,3,.35);
}

/* ── CLOSED BANNER ──────────────────────────────────────────────────── */
.pdpd-banner{
  border:1px solid var(--pdpd-border); background:#fff;
  border-radius:16px; padding:14px 16px; font-weight:800;
  display:flex; align-items:center; gap:10px;
}
.pdpd-banner--closed{ background:#fff1f1; border-color:#f4d2d2; color:#7c1515; }

/* ── FORM CARD ──────────────────────────────────────────────────────── */
.pdpd-card{
  background:var(--pdpd-surface); border:1px solid var(--pdpd-border);
  border-radius:20px; padding:28px;
  max-width:980px; margin:22px auto 0; box-shadow:var(--pdpd-shadow);
}
.pdpd-card-title{ font-size:clamp(20px,2.4vw,26px); font-weight:900; letter-spacing:-.01em; margin:0 0 16px; }

.pdpd-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.pdpd-field{ display:flex; flex-direction:column; gap:7px; min-width:0; }
.pdpd-field span{ font-size:.95rem; color:#0f141c; font-weight:800; }
.pdpd-field input[type="text"], .pdpd-field input[type="email"]{
  width:100%; height:50px; border:1px solid #d6dae2; border-radius:12px; padding:0 14px; font-size:1rem;
  transition:border .15s,box-shadow .15s,background .15s; background:#fff;
}
.pdpd-field input:focus{ outline:none; border-color:var(--pdpd-primary); box-shadow:0 0 0 4px rgba(165,3,3,.14); transform:scale(1.01); }
.pdpd-field input::placeholder{ color:#9aa3af; }

.pdpd-field--file{
  grid-column:1/-1; border:2px dashed #ccd2db; border-radius:14px; text-align:center; padding:22px;
  position:relative; background:#fbfcff;
}
.pdpd-field--file:hover{ border-color:#b9c0cb; }
.pdpd-field--file input[type=file]{ position:absolute; inset:0; opacity:0; cursor:pointer; }
.pdpd-file-hint{ color:var(--pdpd-muted); font-size:.95rem; }

.pdpd-checkbox{ grid-column:1/-1; display:flex; align-items:center; gap:10px; font-size:.98rem; color:#202632; }
.pdpd-checkbox input{ width:18px; height:18px; }

.pdpd-btn{
  background:linear-gradient(180deg,#b00505,#8f0303); color:#fff;
  border:none; border-radius:14px; padding:14px 20px;
  font-weight:900; letter-spacing:.02em; box-shadow:0 14px 30px rgba(165,3,3,.28); cursor:pointer;
  transition:transform .06s, box-shadow .2s, filter .15s;
}
.pdpd-btn:hover{ filter:brightness(1.05); box-shadow:0 18px 38px rgba(165,3,3,.34); }
.pdpd-btn:active{ transform:translateY(1px); }

.pdpd-msg{ margin-top:12px; font-weight:800; font-size:.98rem; }
.pdpd-msg.ok{ color:#0f7a12; } .pdpd-msg.err{ color:#a50303; }

/* ── TERMS MODAL ────────────────────────────────────────────────────── */
dialog.pdpd-modal{ border:none; border-radius:16px; padding:0; max-width:720px; width:92%; box-shadow:0 22px 70px rgba(10,12,16,.35); }
.pdpd-modal-content header{ background:var(--pdpd-primary); color:#fff; padding:16px 18px; border-radius:16px 16px 0 0; display:flex; justify-content:space-between; align-items:center; }
.pdpd-modal-body{ padding:18px 20px 22px; color:#111; line-height:1.68; }
.pdpd-link{ background:none; border:none; color:var(--pdpd-primary); font-weight:900; cursor:pointer; text-decoration:underline; }
.pdpd-close{ background:none; border:none; color:#fff; font-size:1.6rem; cursor:pointer; }

/* ── Empty state ────────────────────────────────────────────────────── */
.pdpd-empty{ text-align:left; padding:90px 12px; }
.pdpd-empty h2{ font-size:2.2rem; font-weight:900; margin-bottom:.4rem; }

/* ── How-to + progress ─────────────────────────────────────────────── */
.pdpd-howto{
  display:flex; flex-wrap:wrap; gap:1rem; margin:1rem 0 0;
  font-size:1rem; font-weight:700; color:#151a22;
}
.pdpd-howto div{ display:flex; align-items:center; gap:.55em; min-width:0; }
.pdpd-howto span{
  display:inline-flex; justify-content:center; align-items:center;
  background:var(--pdpd-primary); color:#fff; font-weight:900;
  border-radius:50%; width:28px; height:28px; font-size:.9rem;
  box-shadow:0 3px 10px rgba(165,3,3,.25);
  flex:0 0 28px;
}
.pdpd-progress{ height:6px; background:#eceff4; border-radius:6px; overflow:hidden; margin-top:8px; max-width:420px; }
.pdpd-progress span{ display:block; height:100%; background:var(--pdpd-primary); width:0%; transition:width 1s linear; border-radius:6px; }

/* ── RESPONSIVE BREAKPOINTS ────────────────────────────────────────── */

/* Large tablets */
@media (max-width: 1024px){
  .pdpd-container{ padding:46px 18px; }
  .pdpd-hero{ grid-template-columns:1fr; gap:28px; }
  .pdpd-col--art{ order:2; }         /* image after copy */
  .pdpd-col--copy{ order:1; }
  .pdpd-heroimg{ height:340px; }
  .pdpd-meta{ gap:8px; }
  .pdpd-chip{ font-size:.9rem; }
}

/* iPad Mini / portrait tablets */
@media (max-width: 820px){
  .pdpd-title{ font-size:36px; line-height:1.1; }
  .pdpd-desc p{ font-size:1rem; }
  .pdpd-heroimg{ height:300px; border-radius:18px; }
  .pdpd-card{ margin-top:16px; }
}

/* Phones */
@media (max-width: 640px){
  .pdpd-container{ padding:38px 14px; }
  .pdpd-title{ font-size:32px; }
  .pdpd-heroimg{ height:240px; }     /* prevent huge image on small screens */
  .pdpd-howto{ font-size:.98rem; }
  .pdpd-progress{ max-width:100%; }  /* bar spans container */
  .pdpd-grid{ grid-template-columns:1fr; gap:12px; }
  .pdpd-card{ padding:20px; border-radius:16px; }
  .pdpd-field input[type="text"], .pdpd-field input[type="email"]{ height:48px; }
  .pdpd-btn{ width:100%; }           /* thumb-friendly CTA */
}

/* Very small phones (old iPhones, etc.) */
@media (max-width: 380px){
  .pdpd-title{ font-size:28px; }
  .pdpd-chip{ font-size:.85rem; }
  .pdpd-howto span{ width:26px; height:26px; font-size:.82rem; }
}

/* How-to steps styling */
.pdpd-howto { 
  display: grid; 
  gap: 12px; 
}

.pdpd-howto-step {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap;
}

.pdpd-howto-step span {
  flex: 0 0 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--pdpd-primary, #a50303);
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
}

.pdpd-howto-step p {
  margin: 0;
  line-height: 1.6;
  font-size: 17px; /* increased from 15px */
  color: #111;
  flex: 1 1 auto;
}

.pdpd-howto-step a {
  color: var(--pdpd-primary, #a50303);
  text-decoration: underline;
  font-weight: 600;
}

/* Slightly reduce for mobile */
@media (max-width: 420px) {
  .pdpd-howto-step {
    gap: 10px;
  }
  .pdpd-howto-step span {
    width: 24px;
    height: 24px;
    font-size: 13px;
  }
  .pdpd-howto-step p {
    font-size: 16px;
  }
}