/* The approved full-width hero returns. Product motion belongs to scroll position. */
.hero-sculptural { display: grid; grid-template-columns: minmax(0,1fr) minmax(300px,30%); grid-template-areas: 'intro intro' 'description preview' 'action preview'; column-gap: clamp(32px,4vw,64px); row-gap: 28px; }
.hero-sculptural .hero-intro { grid-area: intro; min-width: 0; }
.hero-sculptural > .hero-description, .hero-sculptural > .hero-action { min-width: 0; }
.hero-sculptural .hero-description { grid-area: description; margin: 0 0 0 16%; max-width: 590px; position: relative; z-index: 1; }
.hero-sculptural .hero-action { grid-area: action; margin: 0 auto; }
.pv-demo { --pv-gap: 12px; position: relative; text-align: left; min-width: 0; }
.pv-demo .icon { flex-shrink: 0; }
.pv-mini { grid-area: preview; width: 100%; max-width: 390px; margin: 0 0 0 auto; align-self: center; z-index: 1; }
.pv-mini-window { position: relative; background: var(--color-surface); border: 1px solid #dbe1ef; border-radius: 14px; box-shadow: 0 23px 45px -28px rgb(35 54 106 / 28%); overflow: hidden; }
.pv-mini::before { content: ''; position: absolute; inset: 12px -6px -7px 12px; background: #edf1fc; border: 1px solid #dfe5f3; border-radius: 15px; transform: rotate(2deg); z-index: -1; }
.hero-sculptural .pv-mini .hero-art-frame { position: absolute; left: auto; right: 10px; top: -49px; width: 101px; height: 47px; margin: 0; rotate: 0deg; scale: 1; z-index: 0; }
.hero-sculptural .pv-mini .hero-art { scale: .42; transform-origin: top left; }
.pv-mini-bar, .pv-workspace-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 16px; border-bottom: 1px solid #e9ecf3; }
.pv-mini-bar > span:first-child, .pv-workspace-bar > span:first-child { display: flex; align-items: center; gap: 7px; }
.pv-mini-bar strong { font-size: 17px; letter-spacing: -.035em; }
.pv-mini-bar img { width: 20px; height: 20px; }
.pv-mini-bar > span:last-child { font-size: 11px; color: var(--color-muted); }
.pv-mini-content { padding: 18px 12px 9px; }
.pv-kanban { position: relative; height: 207px; }
.pv-lanes, .pv-lane-beds { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--pv-gap); }
.pv-lanes { align-items: center; font-size: 11px; color: var(--color-muted); }
.pv-lanes > span { position: relative; padding-left: 9px; }
.pv-lanes > span::before { content: ''; position: absolute; left: 0; top: 50%; width: 4px; height: 4px; transform: translateY(-50%); border-radius: 50%; background: #9aa4b9; }
.pv-lanes > span:nth-child(2)::before, .pv-lanes > span:last-child::before { background: var(--color-blue); }
.pv-lane-beds { position: absolute; inset: 37px 0 0; }
.pv-lane-beds > span { background: #f5f6fa; border-radius: 8px; border: 1px solid #edf0f6; }
.pv-traveler { position: absolute; left: 0; top: 47px; width: calc((100% - 2 * var(--pv-gap)) / 3); min-height: 146px; padding: 12px 9px; border: 1px solid #d9e1f0; border-radius: 8px; background: white; box-shadow: 0 8px 17px -12px rgb(34 54 102 / 32%); }
.pv-avatar { display: flex; align-items: center; justify-content: center; width: 27px; height: 27px; margin-bottom: 9px; background: #edf2ff; border-radius: 50%; color: var(--color-blue-ink); }
.pv-avatar .icon { width: 17px; height: 17px; }
.pv-traveler > strong { display: block; font-size: 12px; font-weight: 550; }
.pv-card-status { display: block; font-size: 11px; margin-top: 3px; color: var(--color-muted); }
.pv-card-action { display: flex; align-items: flex-start; gap: 5px; margin-top: 11px; font-size: 11px; line-height: 1.4; color: var(--color-blue-ink); }
.pv-card-action .icon { width: 13px; height: 13px; margin-top: 1px; }
.pv-mini { --pv-gap: 8px; }
.pv-mini .pv-card-action .icon { display: none; }
.pv-demo[data-step='2'] .pv-traveler { border-color: #9db4f4; }
.pv-demo[data-step='3'] .pv-traveler { border-color: #9db4f4; background: #f5f8ff; }
.pv-demo[data-step='4'] .pv-traveler { background: var(--color-blue); border-color: var(--color-blue); color: white; }
.pv-demo[data-step='4'] .pv-card-status, .pv-demo[data-step='4'] .pv-card-action { color: #edf1ff; }
.pv-mini-event { display: flex; align-items: center; gap: 8px; min-height: 51px; padding: 10px 0 0; }
.pv-event-icon { width: 28px; height: 28px; flex-shrink: 0; background: #edf2ff; color: var(--color-blue-ink); display: grid; place-items: center; border-radius: 7px; }
.pv-event-icon .icon { width: 16px; height: 16px; }
.pv-mini-event > span:nth-child(2) { flex: 1; }
.pv-mini-event strong { display: block; font-size: 11px; font-weight: 500; }
.pv-event-check { display: none; }
.pv-mini-bottom { border-top: 1px solid #e9ecf3; padding: 10px 15px; }
.pv-mini-bottom > span { display: flex; align-items: center; gap: 6px; color: var(--color-muted); font-size: 11px; }
.pv-mini-bottom .icon { width: 13px; height: 13px; }
.pv-section { max-width: 1100px; }
.pv-section > h2 { font-size: clamp(42px,4.9vw,66px); }
.pv-workspace { margin: 34px 0 0; border: 1px solid #dbe1ef; border-radius: 17px; overflow: hidden; background: white; box-shadow: 0 24px 50px -35px rgb(35 54 106 / 30%); }
.pv-workspace-bar { padding: 18px 26px; }
.pv-workspace-bar strong { font-size: 20px; letter-spacing: -.04em; }
.pv-workspace-name { font-size: 12px; color: var(--color-muted); margin-left: 12px; padding-left: 20px; border-left: 1px solid #dce1e9; }
.pv-example { font-size: 11px; color: var(--color-muted); }
.pv-workspace-body { display: grid; grid-template-columns: 1.6fr 1fr; }
.pv-board-side { padding: 28px 30px 24px; }
.pv-board-label, .pv-mail-heading { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; }
.pv-board-label .icon, .pv-mail-heading .icon { width: 17px; height: 17px; color: var(--color-blue-ink); }
.pv-workspace .pv-kanban { margin-top: 19px; height: 218px; }
.pv-workspace .pv-traveler { top: 46px; min-height: 149px; padding: 14px; }
.pv-workspace .pv-avatar { width: 31px; height: 31px; }
.pv-workspace .pv-traveler > strong { font-size: 13px; }
.pv-your-control { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-top: 18px; font-size: 11px; }
.pv-your-control > span { display: flex; align-items: center; gap: 5px; }
.pv-your-control > span:nth-child(2) { color: var(--color-muted); }
.pv-your-control .icon { width: 14px; height: 14px; color: var(--color-blue-ink); }
.pv-your-control .pv-approved { margin-left: auto; color: var(--color-muted); }
.pv-mail-side { position: relative; border-left: 1px solid #e7ebf2; background: #f6f8fd; padding: 27px 25px 24px; }
.pv-mail-heading { justify-content: center; font-size: 12px; }
.pv-email { position: relative; margin: 18px auto 0; max-width: 300px; padding: 20px; border: 1px solid #dbe2ef; border-radius: 11px; background: white; box-shadow: 0 12px 22px -21px #23478560; text-align: center; }
.pv-envelope { width: 36px; height: 36px; color: var(--color-blue-ink); stroke-width: 1.3; }
.pv-email h3 { font-size: 21px; font-weight: 550; letter-spacing: -.025em; margin: 7px 0 12px; }
.pv-extra-days { display: flex; justify-content: center; align-items: center; gap: 9px; }
.pv-extra-days strong { font-size: 45px; font-weight: 500; letter-spacing: -.04em; line-height: 1; color: var(--color-blue-ink); }
.pv-extra-days > span { font-size: 12px; color: var(--color-muted); max-width: 65px; text-align: left; line-height: 1.4; }
.pv-email-link { display: inline-flex; align-items: center; gap: 17px; border-radius: 7px; padding: 10px 15px; margin-top: 19px; color: white; background: var(--color-blue); font-size: 12px; }
.pv-email-link .icon { width: 16px; height: 16px; }
.pv-starts-on-acceptance { margin-top: 9px; font-size: 11px; color: var(--color-muted); }
.pv-accept-stamp { position: absolute; top: -11px; right: -9px; display: inline-flex; align-items: center; gap: 4px; border: 1px solid #bccdf8; border-radius: 6px; padding: 5px 8px; font-size: 11px; background: #edf2ff; color: var(--color-blue-ink); opacity: 0; }
.pv-accept-stamp .icon { width: 14px; height: 14px; }
.pv-demo[data-step='3'] .pv-accept-stamp, .pv-demo[data-step='4'] .pv-accept-stamp { opacity: 1; }
.pv-outcome { display: flex; align-items: center; justify-content: space-between; gap: 20px; border-top: 1px solid #e2e8f2; padding: 18px 27px; background: #f9fbff; }
.pv-demo[data-step='4'] .pv-outcome { background: #eaf0ff; }
.pv-outcome > span:first-child { display: flex; align-items: center; gap: 10px; }
.pv-outcome > span:first-child > .icon { width: 24px; height: 24px; color: var(--color-blue-ink); }
.pv-outcome strong { display: block; font-size: 13px; font-weight: 500; }
.pv-paid-status { display: flex; align-items: center; gap: 5px; color: var(--color-blue-ink); border: 1px solid #dbe3f4; border-radius: 6px; font-size: 12px; padding: 6px 11px; }
.pv-demo[data-step='4'] .pv-paid-status { background: var(--color-blue); color: white; border-color: var(--color-blue); }
.pv-paid-status .icon { width: 14px; height: 14px; }
.pv-caption { color: var(--color-muted); font-size: 11px; margin-top: 15px; }

@media (min-width: 981px) and (max-width: 1100px) {
  .hero-sculptural .hero-action { padding-inline: 18px; }
  .hero-sculptural .hero-purchase, .hero-sculptural .hero-confidence { grid-template-columns: minmax(0,1fr) 270px; gap: 16px; }
  .hero-sculptural .hero-cta { padding-inline: 13px; gap: 12px; font-size: 14px; }
  .hero-sculptural .hero-offer { font-size: 26px; }
  .hero-sculptural .hero-description { margin-left: 6%; }
}
@media (max-width: 980px) {
  .hero-sculptural { grid-template-columns: minmax(0,1fr); grid-template-areas: 'intro' 'description' 'preview' 'action'; gap: 26px; }
  .hero-sculptural .hero-description { margin: 0 auto; text-align: center; }
  .hero-sculptural .hero-description > span, .hero-sculptural .hero-description strong { margin-inline: auto; }
  .pv-mini { width: min(365px,100%); margin: 20px auto 0; }
  .hero-sculptural .hero-action { margin: 0 auto; }
  .hero-sculptural .pv-mini .hero-art-frame { scale: .8; transform-origin: bottom right; top: -42px; }
  .pv-workspace-body { grid-template-columns: 1.35fr 1fr; }
  .pv-board-side { padding-inline: 20px; }
  .pv-mail-side { padding-inline: 18px; }
  .pv-your-control .pv-approved { flex-basis: 100%; margin-left: 0; }
}
@media (max-width: 700px) {
  .pv-workspace { margin-top: 25px; border-radius: 13px; }
  .pv-workspace-bar { padding: 15px 18px; }
  .pv-workspace-name { display: none; }
  .pv-workspace-body { grid-template-columns: 1fr; }
  .pv-board-side { padding: 20px 15px 18px; }
  .pv-workspace .pv-kanban { height: 213px; margin-top: 15px; }
  .pv-workspace .pv-traveler { padding-inline: 9px; min-height: 156px; }
  .pv-workspace .pv-card-action .icon { display: none; }
  .pv-your-control { margin-top: 14px; gap: 6px; }
  .pv-your-control .pv-approved { flex-basis: auto; margin-left: auto; }
  .pv-mail-side { border-left: 0; border-top: 1px solid #e7ebf2; padding: 17px 20px 20px; }
  .pv-email { max-width: none; display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 9px 10px; padding: 15px; margin-top: 14px; text-align: left; }
  .pv-envelope { grid-column: 1; grid-row: 1 / 3; width: 31px; height: 31px; }
  .pv-email h3 { grid-column: 2 / 4; margin: 0; font-size: 19px; }
  .pv-extra-days { grid-column: 2 / 4; justify-content: flex-start; gap: 6px; }
  .pv-extra-days strong { font-size: 32px; }
  .pv-extra-days > span { max-width: none; font-size: 11px; }
  .pv-email-link { grid-column: 1 / 4; justify-self: start; margin-top: 3px; }
  .pv-starts-on-acceptance { grid-column: 1 / 4; margin: 0; font-size: 11px; }
  .pv-outcome { padding: 16px; gap: 9px; }
  .pv-outcome strong { font-size: 12px; }
  .pv-outcome > span:first-child { gap: 7px; }
  .pv-outcome > span:first-child > .icon { width: 21px; height: 21px; }
  .pv-paid-status { padding: 5px 8px; font-size: 11px; }
  .pv-section > h2 { font-size: 43px; }
  .pv-caption { line-height: 1.6; }
}
@media (max-width: 360px) {
  .pv-demo { --pv-gap: 7px; }
  .pv-traveler { padding-inline: 7px; }
  .pv-mini-content { padding-inline: 10px; }
  .pv-workspace .pv-traveler > strong { font-size: 12px; }
  .pv-workspace .pv-card-action { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .pv-demo *, .pv-demo *::before, .pv-demo *::after { animation: none !important; transition: none !important; }
}
@media print { .pv-mini-window, .pv-workspace, .pv-email { box-shadow: none; } }