/* ============================================================
   Design System v2 (ds-v2) — compress-flow redesign skin.
   Loaded only for test_ds_compress groups B & C (body.ds-v2).
   Everything is scoped under body.ds-v2 so control (A) is untouched.
   Layout arm: body.ds-b = two-column hero, body.ds-c = centered hero.
   Palette matches the approved Claude Design ("Digital Architect").
   ============================================================ */

body.ds-v2 {
  --v2-navy:#26377d; --v2-navy-2:#31438f;
  --v2-orange:#c2560f; --v2-orange-soft:#fdf1e6;
  --v2-bg:#f7f8fa; --v2-card:#ffffff; --v2-muted:#6a7488; --v2-faint:#8a93a6;
  --v2-line:#e7ecf4; --v2-soft:#f3f6fb; --v2-blue:#2f6bff; --v2-blue-soft:#eaf1ff;
  --v2-shadow:0 24px 60px rgba(13,27,62,.10);
  --v2-shadow-sm:0 8px 24px rgba(13,27,62,.06);
}

/* ---- HERO shell ---- */
body.ds-v2 .dsh{
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;
  background:var(--v2-bg);
  padding:clamp(34px,5vw,68px) clamp(20px,4vw,56px);
}
body.ds-v2 .dsh-wrap{max-width:1200px;margin:0 auto;}
body.ds-v2 .dsh-b .dsh-wrap{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start;}
body.ds-v2 .dsh-c .dsh-wrap{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:1040px;}
body.ds-v2 .dsh-c .dsh-copy{display:flex;flex-direction:column;align-items:center;width:100%;}

body.ds-v2 .dsh-title{
  font-weight:800;letter-spacing:-.03em;color:var(--v2-navy);margin:0;text-wrap:balance;
  font-size:clamp(38px,6.6vw,68px);line-height:1.02;
}
body.ds-v2 .dsh-c .dsh-title{font-size:clamp(34px,5.2vw,58px);}
/* Two-tone accent — color driven per-tool by the theme (future: tool icon color) */
body.ds-v2 .dsh-accent{color:var(--dsh-accent,#c2560f);}
body.ds-v2 .dsh.theme-pink{--dsh-accent:#c2560f;}   /* compress */
body.ds-v2 .dsh.theme-blue{--dsh-accent:#2f6bff;}
body.ds-v2 .dsh.theme-mint{--dsh-accent:#0f8a5f;}
body.ds-v2 .dsh-sub{
  color:var(--v2-muted);line-height:1.55;font-size:clamp(15px,1.7vw,19px);
  margin:clamp(16px,2vw,26px) 0 0;max-width:34em;
}
body.ds-v2 .dsh-c .dsh-sub{max-width:32em;margin-top:clamp(12px,1.4vw,18px);font-size:clamp(14px,1.4vw,17px);}

/* benefits: shown in B (left), hidden in C */
body.ds-v2 .dsh-benefits{display:flex;flex-direction:column;gap:16px;margin-top:clamp(24px,3vw,38px);}
body.ds-v2 .dsh-c .dsh-benefits{display:none;}
body.ds-v2 .dsh-benefit{display:flex;align-items:center;gap:13px;font-size:15px;color:#39435a;font-weight:500;}
body.ds-v2 .dsh-bi{flex:none;width:30px;height:30px;border-radius:9999px;background:#fbe3cb;display:flex;align-items:center;justify-content:center;}
body.ds-v2 .dsh-bi svg{width:15px;height:15px;}

/* ---- PANEL (card + features + legal) ---- */
body.ds-v2 .dsh-c .dsh-panel{width:100%;max-width:720px;margin-top:clamp(22px,2.4vw,32px);}
body.ds-v2 .dsh-b .dsh-panel{display:flex;flex-direction:column;gap:14px;}

/* the card wraps the real form */
body.ds-v2 .dsh-card{
  width:100%!important;max-width:none!important;
  background:var(--v2-card);border-radius:22px;box-shadow:var(--v2-shadow);
  padding:clamp(14px,1.6vw,20px)!important;box-sizing:border-box;
}

/* neutralise the global  form{width:90%;align-items:center}  and legacy tool-hero styles */
body.ds-v2 .tool-upload-form{width:100%;margin:0;align-items:stretch;gap:0;}
body.ds-v2 .dsh-zone{
  width:100%!important;margin:0!important;box-sizing:border-box;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  gap:clamp(14px,1.8vw,20px);
  border:2px dashed #e4b98f;border-radius:16px;background:#fff!important;
  padding:clamp(28px,4vw,56px) clamp(20px,3vw,40px);cursor:pointer;transition:border-color .18s,background .18s;
}
body.ds-v2 .dsh-c .dsh-zone{border-color:#c9d0dd;padding:clamp(32px,4vw,52px) clamp(20px,3vw,36px);}
body.ds-v2 .dsh-zone:hover,body.ds-v2 .dsh-zone.dragover{border-color:var(--v2-orange);background:#fffaf5!important;}

/* the peach inner wrapper -> transparent, no min-height */
body.ds-v2 .dsh-zone .upload-content-wrapper{
  width:100%;background:transparent!important;padding:0!important;min-height:0!important;border-radius:0!important;
  display:flex;flex-direction:column;align-items:center;gap:clamp(14px,1.8vw,20px);
}

/* orange gradient square icon */
body.ds-v2 .dsh-square{
  margin:0!important;flex:none;
  width:clamp(58px,6vw,80px);height:clamp(58px,6vw,80px);border-radius:16px;
  background:linear-gradient(160deg,#d8621a,#bd530e);
  display:flex;align-items:center;justify-content:center;box-shadow:0 14px 30px rgba(194,86,15,.32);
}
body.ds-v2 .dsh-c .dsh-square{border-radius:18px;}
body.ds-v2 .dsh-square svg{width:clamp(28px,3vw,34px);height:clamp(28px,3vw,34px);}

body.ds-v2 .dsh-zone .file-label{display:flex;flex-direction:column;align-items:center;gap:6px;}
body.ds-v2 .dsh-zone .file-label-text{font-weight:800;color:var(--v2-navy);letter-spacing:-.02em;font-size:clamp(19px,2.2vw,25px);}
body.ds-v2 .dsh-zone .file-label-hint{font-weight:700;color:var(--v2-muted);font-size:clamp(12.5px,1.3vw,14px);}

/* navy pill button inside the zone */
body.ds-v2 .dsh-btn{
  margin-top:2px!important;padding:14px 30px!important;border:none!important;border-radius:9999px!important;
  background:var(--v2-navy)!important;color:#fff!important;font-family:inherit;font-weight:700!important;
  font-size:clamp(15px,1.5vw,16px)!important;cursor:pointer;box-shadow:0 12px 28px rgba(13,27,62,.22);
  min-width:0!important;display:inline-flex;align-items:center;justify-content:center;transition:background .18s;
}
body.ds-v2 .dsh-btn:hover{background:var(--v2-navy-2)!important;}

body.ds-v2 .tool-result{margin-top:16px;text-align:center;}

/* ---- FEATURE cards ---- */
body.ds-v2 .dsh-features{display:grid;gap:16px;margin-top:clamp(20px,2.6vw,30px);}
body.ds-v2 .dsh-c .dsh-features{grid-template-columns:repeat(3,1fr);}
body.ds-v2 .dsh-b .dsh-features{grid-template-columns:1fr;}
body.ds-v2 .dsh-feat{
  display:flex;align-items:center;gap:15px;text-align:left;
  background:#fff;border-radius:16px;box-shadow:var(--v2-shadow-sm);padding:18px 20px;
}
body.ds-v2 .dsh-fi{flex:none;width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;}
body.ds-v2 .dsh-fi svg{width:20px;height:20px;}
body.ds-v2 .dsh-sec{background:#fbe3cb;} body.ds-v2 .dsh-perf{background:#d4ede2;} body.ds-v2 .dsh-acc{background:#e5ecfb;}
body.ds-v2 .dsh-feat b{font-size:clamp(14px,1.5vw,16px);font-weight:800;color:var(--v2-navy);}

body.ds-v2 .dsh-legal{
  font-size:clamp(10.5px,1.1vw,12px);line-height:1.7;letter-spacing:.02em;text-transform:uppercase;
  color:var(--v2-faint);margin:clamp(16px,2.4vw,26px) 0 0;max-width:40em;
}
body.ds-v2 .dsh-c .dsh-legal{text-align:center;margin-left:auto;margin-right:auto;}
body.ds-v2 .dsh-legal a{color:var(--v2-navy);font-weight:700;text-decoration:underline;}

/* ============================================================
   QUALITY (options) MODAL — reskin the existing markup + radios
   ============================================================ */
body.ds-v2 .tool-options-modal.modal{background:rgba(15,23,42,.45);backdrop-filter:none;}
body.ds-v2 .tool-options-modal.modal > .card{
  background:#fff;border:1px solid var(--v2-line);border-radius:22px;box-shadow:var(--v2-shadow);
  padding:32px;font-family:'Plus Jakarta Sans',sans-serif;
}
body.ds-v2 .tool-options-header h3{font-weight:800;color:var(--v2-navy);text-align:center;letter-spacing:-.02em;}
body.ds-v2 .tool-options-modal.modal .tool-options-file-info{background:#f2f3f5;border:1px solid #e8eaed;border-radius:14px;}
body.ds-v2 .tool-options-modal.modal .tool-options-file-icon{width:46px;height:46px;border-radius:12px;background:var(--v2-blue);}
body.ds-v2 .tool-options-modal.modal .tool-options-file-icon svg{width:24px;height:24px;fill:#fff;}
/* Low/Medium/High radios -> cards */
body.ds-v2 .tool-badge-group{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
body.ds-v2 .tool-badge-group input[type="radio"]{position:absolute;opacity:0;pointer-events:none;}
body.ds-v2 .tool-badge{position:relative;display:flex;flex-direction:column;gap:8px;background:var(--v2-soft);border:2px solid transparent;border-radius:14px;padding:16px 14px;cursor:pointer;}
body.ds-v2 .tool-badge-group input[type="radio"]:checked + .tool-badge{background:#fff;border-color:var(--v2-blue);}
body.ds-v2 .tool-badge-title{font-weight:800;color:var(--v2-navy);}
body.ds-v2 .tool-badge-desc{font-size:13px;color:var(--v2-muted);}
body.ds-v2 .tool-badge-estimate{font-size:13px;font-weight:700;color:var(--v2-blue);border-top:1px solid var(--v2-line);padding-top:8px;}
body.ds-v2 .tool-options-modal .btn{background:var(--v2-navy);border-radius:999px;font-family:inherit;font-weight:700;box-shadow:0 12px 28px rgba(13,27,62,.22);}
body.ds-v2 .tool-options-modal .btn:hover{background:var(--v2-navy-2);}

/* ============================================================
   WRONG-FILE (image) MODAL — reskin existing include
   ============================================================ */
body.ds-v2 .modal[id$="WrongFileModal"] > .card{border-radius:22px;box-shadow:var(--v2-shadow);padding:32px;font-family:'Plus Jakarta Sans',sans-serif;}
body.ds-v2 .modal[id$="WrongFileModal"] h3{font-weight:800;color:var(--v2-navy);letter-spacing:-.01em;}
body.ds-v2 .modal[id$="WrongFileModal"] [id$="WrongFilePrimary"]{background:var(--v2-navy);border-radius:999px;font-weight:700;}
body.ds-v2 .modal[id$="WrongFileModal"] [id$="WrongFileSecondary"]{border-radius:999px;border:1.5px solid var(--v2-line);color:var(--v2-navy);font-weight:700;}

/* ============================================================
   EDITOR HEADER (editor_shell.html) — minimal, neutral.
   Nutrient chrome left at default; only our own header is touched:
   brand font + the "Done" primary CTA as a navy pill (matches the
   upload / quality / export buttons across the flow).
   ============================================================ */
body.ds-v2 .editor-header{font-family:'Plus Jakarta Sans',system-ui,sans-serif;}
body.ds-v2 .done-button{
  background:var(--v2-navy);border-radius:999px;font-family:inherit;font-weight:700;
  box-shadow:0 10px 24px rgba(13,27,62,.20);
}
body.ds-v2 .done-button:hover{background:var(--v2-navy-2);}

/* ============================================================
   POST-"DONE" EXPORT / FORMAT MODAL (editor_shell.html) — reskin
   + colorful per-format icons (swap the uniform-navy PNGs).
   ============================================================ */
body.ds-v2 .export-modal-container{
  border-radius:22px;box-shadow:var(--v2-shadow);border:1px solid var(--v2-line);
  font-family:'Plus Jakarta Sans',sans-serif;
}
body.ds-v2 .export-modal-header h2{font-weight:800;color:var(--v2-navy);letter-spacing:-.02em;}
body.ds-v2 .export-modal-subtitle{color:var(--v2-muted);}

/* format cards + blue selected state (matches the quality modal) */
body.ds-v2 .export-format-btn{border:1px solid var(--v2-line);border-radius:12px;background:#fff;color:var(--v2-navy);font-weight:600;}
body.ds-v2 .export-format-btn:hover{border-color:var(--v2-blue);box-shadow:0 2px 10px rgba(47,107,255,.12);}
body.ds-v2 .export-format-btn.active{border-color:var(--v2-blue);background:var(--v2-blue-soft);box-shadow:0 4px 16px rgba(47,107,255,.16);}
body.ds-v2 .export-format-radio{border:2px solid #c9d0dd;}
body.ds-v2 .export-format-btn.active .export-format-radio{border-color:var(--v2-blue);background:var(--v2-blue);box-shadow:inset 0 0 0 4px #fff;}

/* filename input + actions */
body.ds-v2 .export-filename-input:focus{border-color:var(--v2-blue)!important;box-shadow:0 0 0 3px rgba(47,107,255,.14);}
body.ds-v2 .export-modal-actions #exportDownloadBtn{background:var(--v2-navy)!important;border:none!important;color:#fff!important;border-radius:999px;font-weight:700;box-shadow:0 12px 28px rgba(13,27,62,.22);}
body.ds-v2 .export-modal-actions #exportDownloadBtn:hover{background:var(--v2-navy-2)!important;}
body.ds-v2 .export-cancel-btn{border-radius:999px;border:1.5px solid var(--v2-line)!important;color:var(--v2-navy)!important;font-weight:700;}

/* ============================================================
   OFFERS PAGE (offers.html + offers_b.html) — ds-v2 reskin.
   Recolor + polish over the existing layout. Both test_offers_v2
   layouts share these classes, so both get the skin at once.
   Solidgate/plan/consent logic untouched.
   ============================================================ */
/* page surface (soft dotted) + brand font */
body.ds-v2 .offers-custom-header,
body.ds-v2 .offers-page-container{font-family:'Plus Jakarta Sans',system-ui,sans-serif;}
body.ds-v2 .offers-page-container{
  background:var(--v2-bg);
  background-image:radial-gradient(rgba(13,27,62,.06) 1px,transparent 1px);
  background-size:22px 22px;
}
body.ds-v2 .offers-custom-header{background:#fff;}

/* titles → navy, brand weight */
body.ds-v2 .offers-plans-title,
body.ds-v2 .offers-trust-title,
body.ds-v2 .offers-reviews-title{color:var(--v2-navy);letter-spacing:-.02em;font-weight:800;}
/* stacked two-tone headline: exactly two lines — "Choose a plan to" /
   "download your document" (accent kept on one line, sized to fit the column) */
body.ds-v2 .offers-plans-title{white-space:normal;font-size:clamp(26px,2.6vw,40px);line-height:1.08;letter-spacing:-.03em;}
body.ds-v2 .offers-title-accent{display:block;color:#8fa8e8;white-space:nowrap;}
body.ds-v2 .offers-header-row{align-items:start;background:var(--v2-bg);grid-template-columns:minmax(380px,540px) 1fr;}

/* stepper: done stays blue (keep the blue), active number navy */
body.ds-v2 .stepper-step.done .stepper-number,
body.ds-v2 .stepper-line.done{background:var(--v2-blue);border-color:var(--v2-blue);}
body.ds-v2 .stepper-line.done::after{border-left-color:var(--v2-blue);}
body.ds-v2 .stepper-step.done .stepper-label{color:var(--v2-blue);}
body.ds-v2 .stepper-step.active .stepper-number{background:var(--v2-navy);border-color:var(--v2-navy);}

/* Continue CTA: green → navy pill (with a navy pulse, not green) */
body.ds-v2 .offers-continue-btn{border-radius:999px;font-family:inherit;font-weight:700;}
body.ds-v2 .offers-continue-btn,
body.ds-v2 .offers-continue-btn-desktop,
body.ds-v2 .offers-continue-btn.offers-continue-btn-mobile{
  background:var(--v2-navy)!important;border-color:var(--v2-navy)!important;
}
body.ds-v2 .offers-continue-btn-desktop{animation:dsContinuePulse 2s ease-in-out infinite;}
body.ds-v2 .offers-continue-btn:hover,
body.ds-v2 .offers-continue-btn-desktop:hover{background:var(--v2-navy-2)!important;border-color:var(--v2-navy-2)!important;}
@keyframes dsContinuePulse{0%,100%{box-shadow:0 0 0 0 rgba(13,27,62,.4);}50%{box-shadow:0 0 0 12px rgba(13,27,62,0);}}

/* document card polish */
body.ds-v2 .offers-document-card{border:1px solid var(--v2-line);border-radius:22px;box-shadow:0 22px 46px -26px rgba(13,27,62,.28),0 4px 12px -8px rgba(13,27,62,.12);}

/* plan cards: navy selected + navy pill badge, deeper (roomier + stronger shadow) */
body.ds-v2 .offers-plan-cards{gap:1.15rem;}
body.ds-v2 .offer-plan-card{padding:1.65rem 1.6rem;border:1px solid var(--v2-line);border-radius:20px;box-shadow:0 18px 40px -26px rgba(13,27,62,.32),0 3px 10px -6px rgba(13,27,62,.10);}
body.ds-v2 .offer-plan-card:hover{border-color:var(--v2-navy);box-shadow:0 22px 46px -24px rgba(13,27,62,.40),0 4px 12px -6px rgba(13,27,62,.14);}
body.ds-v2 .offer-plan-card.selected{border:2px solid var(--v2-navy)!important;background:#fff!important;box-shadow:0 24px 50px -22px rgba(13,27,62,.48),0 5px 14px -6px rgba(13,27,62,.16)!important;}
body.ds-v2 .plan-name{color:var(--v2-navy);font-weight:800;font-size:1.15rem;}
body.ds-v2 .plan-price{color:var(--v2-navy);font-weight:800;}
body.ds-v2 .plan-badge{background:var(--v2-navy);border-radius:999px;letter-spacing:.06em;}

/* feature checks: swap the green check PNG/SVG for a CSS blue circle-check */
body.ds-v2 .plan-feature-icon{display:none;}
body.ds-v2 .plan-feature-item::before{
  content:"";flex:none;width:22px;height:22px;border-radius:999px;border:1.5px solid var(--v2-blue);
  background:center/12px 12px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f6bff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
}
body.ds-v2 .plan-feature-item.inactive::before{border-color:#c9d0dd;background-image:none;}

/* Built for trust → designed panel: soft rounded surface, floating decorative
   shape (::before), left title + blue rule bar (::after), stacked navy-icon cards */
body.ds-v2 .offers-trust-section{position:relative;overflow:hidden;border-top:none!important;background:#f1f4f9;border:1px solid var(--v2-line);border-radius:22px;padding:44px 44px 48px!important;margin:2.5rem auto!important;}
body.ds-v2 .offers-trust-section::before{content:"";position:absolute;right:-70px;top:-50px;width:360px;height:360px;background:#e6ebf3;border-radius:56px;transform:rotate(20deg);opacity:.75;z-index:0;pointer-events:none;}
body.ds-v2 .offers-trust-title{text-align:left;position:relative;z-index:1;margin:0;}
body.ds-v2 .offers-trust-title::after{content:"";display:block;width:46px;height:4px;background:var(--v2-blue);border-radius:999px;margin:14px 0 34px;}
body.ds-v2 .offers-trust-grid{position:relative;z-index:1;gap:34px;}
body.ds-v2 .offers-trust-card{flex-direction:column;align-items:center;text-align:center;background:transparent;border:none;box-shadow:none;padding:0;gap:0;}
body.ds-v2 .offers-trust-icon{background:var(--v2-blue-soft);width:52px;height:52px;border-radius:14px;margin-bottom:16px;}
body.ds-v2 .offers-trust-icon svg{stroke:var(--v2-navy);}
body.ds-v2 .offers-trust-card-title{color:var(--v2-navy);font-weight:800;margin-bottom:9px;}

/* reviews: match the homepage — light-grey section band, big soft-rounded white
   cards (32px), soft editorial shadow, navy-tint avatars, no border */
body.ds-v2 .offers-reviews-section{border-top:none!important;background:#f3f4f5;border-radius:24px;padding:48px 40px 52px;margin:2.5rem 0;}
body.ds-v2 .offers-reviews-trustpilot{margin-bottom:3rem;}      /* homepage mb-16 breathing room */
body.ds-v2 .offers-reviews-grid{gap:2rem;}                       /* homepage gap-8 */
body.ds-v2 .offers-review-card{background:#fff;border:none;border-radius:32px;padding:2rem;box-shadow:0 40px 60px -15px rgba(25,28,29,.05);}
body.ds-v2 .offers-review-card-top{margin-bottom:1rem;}          /* mb-4 */
body.ds-v2 .offers-review-text{margin:0 0 1.5rem 0;}             /* mb-6 */
body.ds-v2 .offers-review-author{gap:1rem;}                      /* gap-4 */
body.ds-v2 .offers-review-avatar{width:40px;height:40px;background:rgba(0,23,54,.1);color:#001736;font-weight:700;}
body.ds-v2 .offers-review-name{color:#001736;}

/* Trusted & certified → no panel, blends into the page background */
body.ds-v2 .trusted-section{background:transparent;border:none;box-shadow:none;border-radius:0;padding:40px 0;}
body.ds-v2 .trusted-title{color:var(--v2-navy);font-weight:800;font-size:30px;line-height:1.3;margin-bottom:28px;}

/* disclaimer + price period: copy group A exactly — Nunito Sans at A's weights
   (Plus Jakarta Sans rendered heavier and read as bold) */
body.ds-v2 .offers-disclaimer{font-family:'Nunito Sans',sans-serif;font-weight:400;}
body.ds-v2 .plan-price .price-period{font-family:'Nunito Sans',sans-serif;font-weight:500;}

/* ============================================================
   SUCCESS PAGE (subscriptions/success.html) — ds-v2 reskin.
   Built-for-trust already themed via the shared .offers-trust-* classes.
   ============================================================ */
body.ds-v2 .hero-centered,
body.ds-v2 .success-actions,
body.ds-v2 .success-benefits{font-family:'Plus Jakarta Sans',system-ui,sans-serif;}
/* hero: no panel — blends into the page; navy check circle (keeps the checkmark) */
body.ds-v2 .hero.hero-centered{background:none!important;border:none!important;box-shadow:none!important;padding:40px 24px 8px!important;}
body.ds-v2 .hero-centered .hero-content > div{background:var(--v2-navy)!important;box-shadow:0 12px 28px rgba(13,27,62,.28)!important;}
body.ds-v2 .hero-centered h1{color:var(--v2-navy);letter-spacing:-.02em;}
body.ds-v2 .success-subtitle{color:var(--v2-muted);}
/* primary CTA → navy pill; secondary → outline pill */
body.ds-v2 .success-btn{border-radius:999px!important;font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;}
body.ds-v2 .success-btn-primary{background:var(--v2-navy)!important;border-color:var(--v2-navy)!important;box-shadow:0 10px 24px rgba(13,27,62,.20);}
body.ds-v2 .success-btn-primary:hover{background:var(--v2-navy-2)!important;border-color:var(--v2-navy-2)!important;}
body.ds-v2 .success-btn-secondary{background:#fff!important;border:1.5px solid var(--v2-line)!important;color:var(--v2-navy)!important;}
/* light blueprint background for the success page (faint graph grid) */
body.ds-v2.ds-success{background:#f4f5fa;background-image:linear-gradient(rgba(13,27,62,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(13,27,62,.04) 1px,transparent 1px);background-size:28px 28px;}
/* smaller, subtler navy check seal on the hero */
body.ds-v2 .hero-centered .hero-content > div{width:64px!important;height:64px!important;}
body.ds-v2 .hero-centered .hero-content > div svg{width:36px!important;height:36px!important;}

/* "What you'll get" -> radial "sun" layout: central hub icon + 4 orbiting tiles */
body.ds-v2 .asb{max-width:1160px;margin:8px auto 0;padding:0 24px;container-type:inline-size;}
body.ds-v2 .asb-divider{text-align:center;padding:8px 0 34px;}
body.ds-v2 .asb-divider span{font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--v2-blue);}
/* radial "sun": center schematic image + 4 corner cards + dashed rays (ported from Claude Design) */
body.ds-v2 .as-sun{position:relative;display:grid;grid-template-columns:1fr minmax(300px,420px) 1fr;grid-template-rows:auto auto;grid-template-areas:"edit img conv" "sign img studio";column-gap:clamp(20px,3cqw,52px);row-gap:clamp(20px,3cqw,44px);align-items:center;}
body.ds-v2 .as-rays{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;}
body.ds-v2 .as-img-cell{grid-area:img;position:relative;z-index:1;display:flex;align-items:center;justify-content:center;}
body.ds-v2 .as-img-frame{position:relative;width:100%;background:rgba(255,255,255,.6);border:1px solid var(--v2-line);border-radius:20px;box-shadow:0 20px 50px -24px rgba(13,27,62,.16);padding:clamp(14px,2cqw,24px);box-sizing:border-box;}
body.ds-v2 .as-img-frame img{display:block;width:100%;height:auto;border-radius:10px;}
body.ds-v2 .as-card{position:relative;z-index:2;background:rgba(255,255,255,.55);border:1px solid var(--v2-line);border-radius:16px;box-shadow:0 12px 30px -14px rgba(13,27,62,.10);padding:clamp(20px,2.4cqw,28px);display:flex;flex-direction:column;gap:14px;}
body.ds-v2 .as-c-edit{grid-area:edit;}
body.ds-v2 .as-c-conv{grid-area:conv;}
body.ds-v2 .as-c-sign{grid-area:sign;}
body.ds-v2 .as-c-studio{grid-area:studio;}
body.ds-v2 .as-ic{flex:none;width:36px;height:36px;border-radius:9px;border:1px solid var(--v2-line);display:flex;align-items:center;justify-content:center;}
body.ds-v2 .as-ic svg{width:17px;height:17px;stroke:var(--v2-navy);fill:none;}
body.ds-v2 .as-title{font-family:'Plus Jakarta Sans',sans-serif;font-size:clamp(18px,2cqw,22px);font-weight:800;letter-spacing:-.01em;color:var(--v2-navy);margin:0;line-height:1.2;}
body.ds-v2 .as-c-studio{background:var(--v2-navy);border-color:var(--v2-navy);}
body.ds-v2 .as-c-studio .as-ic{border-color:rgba(255,255,255,.22);}
body.ds-v2 .as-c-studio .as-ic svg{stroke:#c7d0ee;}
body.ds-v2 .as-c-studio .as-title{color:#fff;}
/* mobile: show only the schematic image (hide the corner cards + rays) */
@container (max-width:860px){
  body.ds-v2 .as-sun{grid-template-columns:1fr;grid-template-areas:"img";}
  body.ds-v2 .as-card,body.ds-v2 .as-rays{display:none;}
  body.ds-v2 .as-img-frame{max-width:520px;margin:0 auto;}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* ---- MOBILE: shared "Option A" layout for both B and C ----
   Centered, no benefit bullets, round upload icon, 3-across compact trust cards. */
@media(max-width:860px){
  body.ds-v2 .dsh{padding:16px 18px 28px;}
  body.ds-v2 .dsh-b .dsh-wrap{grid-template-columns:1fr;gap:20px;}
  body.ds-v2 .dsh-copy{align-items:center;text-align:center;}
  /* tighter hero copy so the trust cubes rise into the first screen */
  body.ds-v2 .dsh-title,body.ds-v2 .dsh-c .dsh-title{font-size:clamp(28px,8.4vw,36px)!important;line-height:1.05;}
  body.ds-v2 .dsh-sub,body.ds-v2 .dsh-c .dsh-sub{font-size:14px!important;line-height:1.45;margin-top:10px!important;max-width:30em;}
  body.ds-v2 .dsh-benefits{display:none!important;}          /* no bullets on mobile */
  body.ds-v2 .dsh-b .dsh-panel,body.ds-v2 .dsh-c .dsh-panel{max-width:none;margin-top:16px;}
  body.ds-v2 .dsh-square{border-radius:50%!important;}       /* round icon on mobile */
  body.ds-v2 .dsh-zone{padding:24px 18px;}
  body.ds-v2 .dsh-features{grid-template-columns:repeat(3,1fr)!important;gap:10px;margin-top:14px;}
  body.ds-v2 .dsh-feat{flex-direction:column;align-items:center;text-align:center;gap:8px;padding:14px 8px;}
  body.ds-v2 .dsh-fi{width:34px;height:34px;}
  body.ds-v2 .dsh-feat b{font-size:11px;line-height:1.25;}
  body.ds-v2 .dsh-legal{text-align:center;}
  /* compress hero: on mobile B looks like C (grey upload border + block panel
     so the feature cubes aren't pushed lower by B's flex gap) */
  body.ds-v2 .dsh-b .dsh-zone{border-color:#c9d0dd;}
  body.ds-v2 .dsh-b .dsh-panel{display:block;}
  /* quality modal: shorter/tighter on mobile (keep badges 3-across, not stacked) */
  body.ds-v2 .tool-options-modal.modal > .card{padding:20px 18px;}
  body.ds-v2 .tool-options-header h3{font-size:1.1rem;}
  body.ds-v2 .tool-badge-group{grid-template-columns:repeat(3,1fr);gap:8px;}
  body.ds-v2 .tool-badge{padding:12px 9px;gap:5px;}
  body.ds-v2 .tool-badge-desc{font-size:11px;line-height:1.3;}
  body.ds-v2 .tool-badge-estimate{font-size:11px;padding-top:6px;}
  /* smaller radio dot so it doesn't overlap the badge title on narrow cards */
  body.ds-v2 .tool-options-modal.modal .tool-badge-group label.tool-badge::after{width:14px;height:14px;top:9px;right:9px;}
  body.ds-v2 .tool-options-modal.modal .tool-badge-group input[type="radio"]:checked + label.tool-badge::after{box-shadow:inset 0 0 0 2px var(--surface);}
  body.ds-v2 .tool-badge-title{padding-right:18px;}
  /* Built-for-trust panel: tighter padding + single column on mobile */
  body.ds-v2 .offers-trust-section{padding:28px 20px 32px;}
  body.ds-v2 .offers-trust-grid{grid-template-columns:1fr;gap:24px;}
  body.ds-v2 .offers-trust-section::before{width:220px;height:220px;right:-60px;top:-40px;}
}