/* Preview-only additions. Shared Elyvate assets are read without modification. */
body:is([data-page="work-app-preview"], [data-page="work-app-commercial"]) { --wp-muted: #626c79; }
body:is([data-page="work-app-preview"], [data-page="work-app-commercial"]) :is(section[id], main) { scroll-margin-top: 110px; }
body:is([data-page="work-app-preview"], [data-page="work-app-commercial"]) .section { padding-block: 85px; }
body:is([data-page="work-app-preview"], [data-page="work-app-commercial"]) :is(.eyebrow, .wi-demo-label, .wi-fine-print, .wi-stock-bottom > span, .wi-stock-receipt small, .wi-stock-receipt > span, .wi-stock-receipt > div > span, .wi-interface-preview > div, .wi-map-node span, .wi-hero-foot > p) { color: var(--wp-muted); }
body:is([data-page="work-app-preview"], [data-page="work-app-commercial"]) .wi-hero { min-height: 640px; padding-top: 80px; }
body:is([data-page="work-app-preview"], [data-page="work-app-commercial"]) .wi-hero h1 span { color: #727b88; }
body:is([data-page="work-app-preview"], [data-page="work-app-commercial"]) .wi-hero-foot { margin-top: 50px; }
body:is([data-page="work-app-preview"], [data-page="work-app-commercial"]) .wi-system-map { height: 320px; margin-top: 25px; }
.wp-system-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 55px; }
.wp-system-steps article { border-top: 1px solid #d9c8ad; padding-top: 23px; }
.wp-system-steps h3 { font-size: 26px; font-weight: 500; letter-spacing: -.03em; margin: 12px 0; }
.wp-system-steps p { font-size: 16px; color: var(--wp-muted); line-height: 1.7; max-width: 300px; }
.wp-cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 45px; }
.wp-case { padding: 26px; border: 1px solid #3b4048; border-radius: 13px; display: flex; flex-direction: column; }
body:is([data-page="work-app-preview"], [data-page="work-app-commercial"]) .wi-action-section .eyebrow { color: #c9b493; }
.wp-case h3 { font-size: 23px; font-weight: 500; letter-spacing: -.025em; margin: 18px 0 13px; }
.wp-case > p { color: #b6bec9; line-height: 1.7; font-size: 15px; margin-bottom: 24px; }
.wp-case .wi-case-flow { margin-top: auto; gap: 6px; flex-wrap: wrap; }
.wp-case .wi-case-flow span { padding: 8px; font-size: 11px; color: #d7dce4; }
.wp-offers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 45px; }
.wp-offer { border: 1px solid #e1e5e9; border-radius: 13px; padding: 27px 22px; display: flex; flex-direction: column; background: #fafbfc; }
.wp-offer h3 { font-size: 22px; font-weight: 500; letter-spacing: -.03em; margin: 22px 0 18px; }
.wp-price { font-size: 39px; font-weight: 500; letter-spacing: -.055em; color: #1a1c20; white-space: nowrap; }
.wp-price small { display: block; font-size: 13px; letter-spacing: 0; color: var(--wp-muted); font-weight: 400; margin-bottom: 5px; }
.wp-offer > p:not(.wp-price), .wp-integrated p:not(.wp-price) { color: var(--wp-muted); font-size: 15px; line-height: 1.7; margin-top: 20px; }
.wp-scope { border-top: 1px solid #e1e5e9; padding-top: 20px; margin-top: 24px; margin-bottom: 28px; }
.wp-scope > span { font: 9px 'Source Code Pro', monospace; letter-spacing: .04em; color: #626c79; }
.wp-scope p { font-size: 14px; line-height: 1.7; color: var(--wp-muted); margin-top: 12px; }
.wp-offer .text-link { margin-top: auto; font-size: 13px; }
.wp-integrated { display: grid; grid-template-columns: 1.5fr 1fr; align-items: center; gap: 45px; padding: 32px; border: 1px solid #d9c8ad; border-radius: 13px; margin-top: 18px; }
.wp-integrated h3 { font-size: 27px; font-weight: 500; letter-spacing: -.035em; margin-top: 15px; }
.wp-integrated > div:last-child { justify-self: end; }
.wp-integrated .text-link { display: block; font-size: 14px; margin-top: 18px; }
.wp-quote { font-size: 12px; color: var(--wp-muted); }
body:is([data-page="work-app-preview"], [data-page="work-app-commercial"]) .wp-contact .eyebrow { color: #c9b493; }
body:is([data-page="work-app-preview"], [data-page="work-app-commercial"]) .wp-contact > .wrap > p { max-width: 700px; font-size: 20px; }
body:is([data-page="work-app-preview"], [data-page="work-app-commercial"]) .wi-interface-preview b { color: #79603d; }
body:is([data-page="work-app-preview"], [data-page="work-app-commercial"]) :is(a, button, input, select, textarea, summary):focus-visible { outline: 2px solid #927348; outline-offset: 5px; }
body:is([data-page="work-app-preview"], [data-page="work-app-commercial"]) .wi-stock-steps button { min-height: 70px; color: #626c79; }
body:is([data-page="work-app-preview"], [data-page="work-app-commercial"]) .wi-stock-steps button[aria-pressed="true"] { color: #fff; }
body:is([data-page="work-app-preview"], [data-page="work-app-commercial"]) .wi-stock-steps button > span { color: #806640; }
body:is([data-page="work-app-preview"], [data-page="work-app-commercial"]) .wi-stock-steps button[aria-pressed="true"] > span { color: #dec8a7; }
@media (max-width: 1100px) { .wp-offers { grid-template-columns: repeat(2, 1fr); } .wp-cases { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 650px) {
  body:is([data-page="work-app-preview"], [data-page="work-app-commercial"]) .section { padding-block: 58px; }
  body:is([data-page="work-app-preview"], [data-page="work-app-commercial"]) .wi-hero { min-height: 0; padding-block: 45px; }
  body:is([data-page="work-app-preview"], [data-page="work-app-commercial"]) .wi-hero h1 { font-size: clamp(37px, 10.5vw, 60px); }
  body:is([data-page="work-app-preview"], [data-page="work-app-commercial"]) .wi-hero-foot { margin-top: 35px; }
  body:is([data-page="work-app-preview"], [data-page="work-app-commercial"]) .wi-system-map { height: 300px; }
  .wp-system-steps { grid-template-columns: 1fr; gap: 22px; margin-top: 45px; }
  .wp-system-steps h3 { font-size: 23px; }
  .wp-system-steps p { max-width: none; }
  .wp-cases, .wp-offers, .wp-integrated { grid-template-columns: 1fr; gap: 14px; }
  .wp-case, .wp-offer, .wp-integrated { padding: 25px 22px; }
  .wp-integrated { gap: 25px; }
  .wp-integrated > div:last-child { justify-self: start; }
  .wp-case .wi-case-flow { margin-top: 0; }
  .wp-offer h3 { margin-top: 18px; }
  .wp-price { font-size: 36px; }
  body:is([data-page="work-app-preview"], [data-page="work-app-commercial"]) .wi-stock-top .wi-demo-label { max-width: 175px; }
  body:is([data-page="work-app-preview"], [data-page="work-app-commercial"]) .wp-contact h2 { font-size: 36px; }
}

/* Native swipe, snap alignment and a next/return arrow, as on Website hosting. */
.wp-swipe-nav { display: none; }
@media (max-width: 650px) {
  .wp-cases { position: relative; display: flex; gap: 14px; margin-inline: -24px; padding: 10px 24px 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 24px; overscroll-behavior-x: contain; scrollbar-width: none; }
  .wp-cases::-webkit-scrollbar { display: none; }
  .wp-case { flex: 0 0 calc(100% - 28px); min-width: 0; scroll-snap-align: start; }
  .wp-case .wi-case-flow { margin-top: auto; }
  .wp-swipe-nav { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 4px; color: #cdb38e; }
  .wp-swipe-nav > span { font: 11px 'Source Code Pro', monospace; }
  .wp-swipe-arrow { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; background: transparent; border: 0; color: inherit; border-radius: 9px; }
  .wp-swipe-arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
  .wp-swipe-arrow[data-return="true"] svg { transform: rotate(180deg); }
}

/* Productivity examples and breathing room around the pricing conditions. */
.wp-task-preview > div:not(:first-child) { align-items: center; gap: 18px; }
.wp-task-preview > div:not(:first-child) > span { max-width: 60%; line-height: 1.6; }
.wp-task-preview b { text-align: right; line-height: 1.6; }
.wp-task-preview s { text-decoration-color: #ad9878; text-decoration-thickness: 1px; }
body:is([data-page="work-app-preview"], [data-page="work-app-commercial"]) .wp-pricing > .wi-fine-print { margin-top: 44px; margin-bottom: 20px; padding-block: 12px; max-width: 950px; line-height: 1.9; }
@media (max-width: 650px) {
  .wp-task-preview { padding: 20px 16px; }
  body:is([data-page="work-app-preview"], [data-page="work-app-commercial"]) .wp-pricing > .wi-fine-print { margin-top: 32px; margin-bottom: 16px; }
}

/* Monthly Work App subscriptions. */
.wp-offer { position: relative; min-width: 0; }
.wp-offer-featured { border-color: #bda27b; background: #faf6ef; box-shadow: 0 8px 28px #8066400d; }
.wp-featured-label { align-self: flex-start; padding: 5px 10px; border-radius: 6px; background: #ede2d0; color: #725837; font-size: 11px; font-weight: 500; margin-top: 14px; }
.wp-offer-featured h3 { margin-top: 12px; }
.wp-pricing .wp-price { font-size: 39px; line-height: 1.2; color: #1a1c20; }
.wp-pricing .wp-monthly-amount { display: block; }
.wp-pricing .wp-monthly-amount small { display: inline; font-size: 14px; font-weight: 400; letter-spacing: 0; }
.wp-pricing .wp-period { display: block; margin-top: 3px; font-size: 14px; font-weight: 400; letter-spacing: 0; color: var(--wp-muted); }
.wp-pricing :is(.wp-offer, .wp-integrated) .wp-setup { font-size: 12px; color: #725837; line-height: 1.6; margin-top: 14px; }
.wp-integrated .wp-scope { margin-bottom: 0; }
@media (min-width: 1101px) {
  .wp-offer > .eyebrow { font-size: 10px; }
  .wp-offer h3 { min-height: 53px; }
  .wp-offer-featured .wp-featured-label { position: absolute; top: -14px; left: 21px; margin-top: 0; }
  .wp-offer-featured h3 { margin-top: 22px; }
}