/*
  DESIGN ONLINE — PAGE-SPECIFIC STYLES ONLY

  FROZEN GLOBAL COMPONENTS — DO NOT OVERRIDE HERE:
  .site-header
  .header-inner
  .brand
  .brand-name
  .main-nav
  .sign-in
  .signin-dropdown
  .wholesale-only
  .wholesale-inner
  .site-footer
  .footer-inner
  .footer-brand
  .footer-nav
  .copyright

  These components are controlled by the frozen V7 home.css.
*/

.do-hero{background:var(--white);overflow:hidden}
.do-hero-inner{min-height:560px;display:grid;grid-template-columns:39% 61%;align-items:stretch}
.do-hero-copy{display:flex;flex-direction:column;justify-content:center;padding:62px 32px 62px 0;position:relative;z-index:2}
.do-product-logo{display:block;width:76px;height:76px;object-fit:contain;margin:0 0 20px}
.do-hero-copy h1{font:400 clamp(46px,4.3vw,64px)/1.03 "Marcellus",Georgia,serif;letter-spacing:-.03em;margin:0;color:var(--gray)}
.do-hero-copy h1 strong{color:var(--orange);font-weight:400}
.do-hero-copy>p{font:400 19px/1.55 Arial,Helvetica,sans-serif;margin:30px 0 28px;color:var(--gray)}
.do-actions{display:flex;gap:16px;align-items:center}.do-actions .button{min-width:170px}.do-actions .secondary span{color:var(--orange);padding-left:9px}
.no-account{max-width:520px;padding-left:14px;border-left:3px solid var(--orange);font-size:13px!important;line-height:1.5!important;margin:24px 0 0!important}
.do-hero-visual{position:relative;display:flex;align-items:center;justify-content:center;padding:36px 0 36px 50px}.do-hero-shape{position:absolute;inset:0 -20vw 0 0;background:#d8d4cf;clip-path:polygon(18% 0,100% 0,100% 100%,0 100%)}
.do-hero-shape::after{display:none}
.editor-frame{position:relative;z-index:1;width:min(760px,100%);background:transparent;overflow:visible}.editor-frame img{display:block;width:100%;height:auto}
.how{padding:70px 0 58px}.do-eyebrow,.section-kicker{text-align:center;color:var(--orange);font:700 12px/1 Arial,Helvetica,sans-serif;letter-spacing:.08em;margin:0 0 10px}.do-display{text-align:center;font:400 38px/1.2 "Marcellus",serif;letter-spacing:.02em;margin:0 0 38px;color:var(--gray)}
.how .do-display{margin-bottom:46px}.how-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:0}.how-step{padding:0 16px;border-right:1px solid #dedbd8;min-width:0}.how-step:first-child{padding-left:0}.how-step:last-child{padding-right:0;border-right:0}
.step-no{display:block;color:var(--orange);font:400 30px/1 Arial,Helvetica,sans-serif;margin-bottom:10px}.how-step h3{font:700 14px/1.25 Arial,Helvetica,sans-serif;margin:0 0 10px;color:var(--gray)}.how-step p{font:400 13px/1.55 Arial,Helvetica,sans-serif;min-height:84px;margin:0 0 20px;color:var(--gray)}.how-step img{width:100%;height:170px;padding:5px;box-sizing:border-box;object-fit:contain;object-position:center;border:1px solid #e6e2df;background:#fff}.order-workflow{width:100%;height:170px;box-sizing:border-box;border:1px solid #e6e2df;background:#faf9f7;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center}.order-workflow span{color:var(--gray);font:700 11px/1.2 Arial,Helvetica,sans-serif;letter-spacing:.04em}.order-workflow i{color:var(--orange);font:400 15px/1 Arial,Helvetica,sans-serif;font-style:normal}.process-assurance{margin:34px 0 0;text-align:center;color:var(--gray);font:400 14px/1.5 Arial,Helvetica,sans-serif}
.benefits{background:#f6f6f5;padding:54px 0 50px}.section-kicker{color:var(--gray);letter-spacing:.06em}.benefits .do-display{margin-bottom:34px}.benefit-grid{display:grid;grid-template-columns:repeat(4,1fr)}.benefit-grid article{text-align:center;padding:0 34px;border-right:1px solid #d9d6d3}.benefit-grid article:last-child{border-right:0}.benefit-no{display:block;margin:0 0 18px;color:var(--orange);font:400 28px/1 "Marcellus",Georgia,serif}
.benefit-grid h3,.account-grid h3{font:700 13px/1.3 Arial,Helvetica,sans-serif;margin:0 0 10px;color:var(--gray)}.benefit-grid p,.account-grid p{font:400 14px/1.5 Arial,Helvetica,sans-serif;margin:0;color:var(--gray)}
.account-band{background:#faf9f7;padding:50px 0}.account-grid{display:grid;grid-template-columns:1fr 1fr}.account-grid article{display:block;padding:4px 62px}.account-grid article:first-child{border-right:1px solid #cbc8c5}.account-grid .button{margin-top:18px}.orange-outline{border-color:var(--orange)!important;color:var(--orange)!important;background:transparent!important}
@media(max-width:1024px){.do-hero-inner{grid-template-columns:42% 58%;min-height:500px}.do-hero-copy h1{font-size:54px}.how-grid{grid-template-columns:repeat(2,1fr);gap:34px 0}.how-step{border-right:0;border-bottom:1px solid #dedbd8;padding:0 18px 30px}.benefit-grid{grid-template-columns:repeat(2,1fr);gap:34px 0}.benefit-grid article:nth-child(2){border-right:0}}
@media(max-width:760px){.do-hero-inner{display:block}.do-hero-copy{padding:48px 0 36px}.do-hero-copy h1{font-size:48px}.do-hero-copy>p br{display:none}.do-actions{flex-direction:column;align-items:stretch}.do-actions .button{width:100%}.do-hero-visual{padding:34px 0}.do-hero-shape{inset:0 -20px;clip-path:none}.editor-frame{width:92%}.how-grid{grid-template-columns:1fr}.how-step{padding:0 0 30px;margin-bottom:30px}.how-step p{min-height:0}.how-step img{height:auto;max-height:290px;object-fit:contain}.order-workflow{height:220px}.benefit-grid{grid-template-columns:1fr}.benefit-grid article{border-right:0;border-bottom:1px solid #d9d6d3;padding:26px 0}.benefit-grid article:last-child{border-bottom:0}.account-grid{grid-template-columns:1fr}.account-grid article{display:block;padding:30px 0}.account-grid article:first-child{border-right:0;border-bottom:1px solid #cbc8c5}}
@media print{.account-band,.do-actions,.no-account{display:none!important}.do-hero-inner{grid-template-columns:40% 60%;min-height:auto}.do-hero{break-inside:avoid}.do-hero-shape{background:#eee;clip-path:none}.how,.benefits{padding:28px 0}.how-step img{height:110px}}


/* === Design Online contained-width correction ===
   Keeps the Design Online hero visually aligned to the frozen V7 homepage shell. */
@media (min-width: 1025px) {
  .do-hero-inner {
    grid-template-columns: 44% 56%;
  }

  .do-hero-visual {
    padding-left: 24px;
    padding-right: 0;
    overflow: hidden;
  }

  .do-hero-shape {
    inset: 0;
    clip-path: polygon(16% 0, 100% 0, 100% 100%, 0 100%);
  }

  .editor-frame {
    width: min(670px, calc(100% - 34px));
    margin-left: auto;
    margin-right: 0;
  }
}