/* The previews and expanded samples share the same HTML and design styles. */
.example-open { display: block; color: var(--ink); background: var(--paper-2); text-decoration: none; }
.example-cover { position: relative; width: 100%; aspect-ratio: 800 / 520; overflow: hidden; background: #f5f7f7; }
.example-cover-canvas { position: absolute; width: 800px; min-height: 520px; transform-origin: top left; pointer-events: none; }
.example-cover .sample { height: auto; min-height: 520px; overflow: visible; }
.example-cover > * { animation: example-appear .4s ease both; }
.example-media-bar { display: flex; align-items: center; justify-content: space-between; gap: .4rem; padding: .25rem .8rem; border-block: 1px solid var(--line); }
.example-gallery-link { font-size: .8rem; font-weight: 600; padding-block: .6rem; }
.example-gallery-link:hover { text-decoration: underline; text-underline-offset: .2em; }
.example-cycle-controls { display: flex; align-items: center; flex-shrink: 0; }
.example-cycle-controls button { width: 36px; height: 44px; padding: 0; border: 0; border-radius: 4px; background: transparent; color: var(--ink); font: inherit; font-size: 1.5rem; cursor: pointer; }
.example-cycle-controls button:hover { background: var(--paper-3); }
.example-counter { min-width: 30px; text-align: center; font-size: .7rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.example-motion { flex-shrink: 0; border: 1px solid var(--line-2); border-radius: 5px; background: var(--paper-2); color: var(--ink-soft); font: inherit; font-size: .75rem; padding: .65rem .8rem; cursor: pointer; }
.example-motion[hidden] { display: none; }
.outcome-feed-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.example-scene { position: relative; margin: 0; width: 100%; background: #e5e8e5; }
.example-scene img { display: block; width: 100%; height: auto; }
.example-cover .example-scene { height: 100%; }
.example-cover .example-scene img { width: 100%; height: 100%; object-fit: contain; }
.example-open:focus-visible { outline-offset: -4px !important; }
.examples-open { overflow: hidden; }
.example-dialog { width: min(1060px, calc(100vw - 40px)); max-width: none; max-height: min(940px, calc(100dvh - 40px)); margin: auto; padding: 0; border: 1px solid var(--line-2); border-radius: 12px; background: var(--paper); color: var(--ink); box-shadow: 0 20px 100px #0005; }
.example-dialog[open] { display: flex; flex-direction: column; }
.example-dialog::backdrop { background: #101b24ba; }
.example-dialog-head { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.2rem 1.7rem; border-bottom: 1px solid var(--line); }
.example-dialog-head .kicker { font-size: .65rem; margin: 0 0 .35rem; }
.example-dialog-head h2 { font-family: var(--ff-display); font-size: clamp(1.25rem, 2.6vw, 1.8rem); margin: 0; line-height: 1.2; }
.example-close { display: flex; gap: .8rem; align-items: center; flex-shrink: 0; min-height: 44px; border: 1px solid var(--line-2); border-radius: 6px; background: var(--paper-2); color: var(--ink); font: inherit; font-size: .85rem; padding: .5rem .8rem; cursor: pointer; }
.example-close span { font-size: 1.4rem; line-height: 1; }
.example-dialog-scroll { min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 1rem 1.7rem 1.8rem; }
.example-gallery-note { font-size: .85rem; line-height: 1.5; color: var(--muted); margin: 0 0 1rem; }
.example-choices { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1.2rem; }
.example-choices button { min-height: 40px; max-width: 100%; padding: .55rem .85rem; border: 1px solid var(--line-2); border-radius: 5px; background: transparent; color: var(--ink-soft); font: inherit; font-size: .85rem; cursor: pointer; }
.example-choices button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
@media (hover: hover) { .example-choices button:hover { text-decoration: underline; text-underline-offset: .2em; } }
.example-stage { border: 1px solid #27363030; border-radius: 6px; overflow: hidden; }
.example-caption { padding-top: 1.3rem; }
.example-caption h3 { font-family: var(--ff-display); font-size: 1.4rem; line-height: 1.3; margin: 0 0 .5rem; }
.example-caption p { color: var(--ink-soft); font-size: .95rem; line-height: 1.6; margin: 0 0 1rem; max-width: 78ch; }
.example-contact { font-size: .95rem; }

/* Samples intentionally keep their own palettes in either site theme. */
.sample { --sample-ink: #243e37; --sample-accent: #285f50; --sample-soft: #e8eee8; color-scheme: light; background: #fffefa; color: var(--sample-ink); font-family: var(--ff-body, 'Spline Sans', sans-serif); font-size: 16px; line-height: 1.5; text-align: left; min-width: 0; }
.sample *, .sample *::before, .sample *::after { box-sizing: border-box; }
.sample h4 { color: inherit; font-family: var(--ff-display); font-weight: 500; font-size: 32px; line-height: 1.15; letter-spacing: -.025em; margin: 14px 0 18px; }
.sample p { font-size: 16px; line-height: 1.6; margin: 0 0 16px; color: inherit; }
.sample small { font-size: 12px; line-height: 1.5; }
.sample strong { font-weight: 600; }
.sample-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 32px; border-bottom: 1px solid #223a3226; font-size: 13px; }
.sample-head > strong { letter-spacing: .06em; }
.sample-head > span { font-size: 12px; }
.sample-body { padding: 26px 32px 30px; }
.sample-tag { display: inline-block; color: var(--sample-accent); background: var(--sample-soft); padding: 4px 9px; border-radius: 4px; font-size: 11px; font-weight: 600; letter-spacing: .035em; }
.sample-rows { margin: 14px 0 18px; border-top: 1px solid #26393126; }
.sample-line { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding: 11px 0; border-bottom: 1px solid #26393126; font-size: 14px; }
.sample-line > strong { text-align: right; }
.sample-note { padding: 14px 17px; background: var(--sample-soft); border-left: 3px solid var(--sample-accent); border-radius: 0 4px 4px 0; font-size: 14px; }
.sample-note p { font-size: 14px; margin: 5px 0 0; }
.sample-action { display: inline-flex; justify-content: space-between; align-items: center; gap: 24px; background: var(--sample-accent); color: #fff; padding: 12px 18px; font-size: 13px; font-weight: 600; margin-top: 14px; border-radius: 4px; }
.sample-two { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.sample-two p { margin-bottom: 6px; }
.sample-two .sample-action { align-self: start; }
.sample-blue { --sample-ink: #223c52; --sample-accent: #24556b; --sample-soft: #e6eff3; }
.sample-rose { --sample-ink: #5c3a34; --sample-accent: #7b4d45; --sample-soft: #f4e7e2; }
.sample-coffee { --sample-ink: #593c2d; --sample-accent: #804630; --sample-soft: #f6ecdf; }
.sample-lilac { --sample-ink: #363954; --sample-accent: #55517c; --sample-soft: #eeecf6; }
.sample-conversation { display: grid; gap: 9px; margin-top: 20px; }
.sample-message { max-width: 85%; padding: 10px 14px; background: #f2f3f4; border-radius: 10px 10px 10px 0; }
.sample-message small { font-weight: 600; font-size: 10px; }
.sample-message p { margin: 2px 0 0; font-size: 14px; line-height: 1.5; }
.sample-message.is-reply { background: var(--sample-soft); justify-self: end; border-radius: 10px 10px 0 10px; }
.sample-booking { border: 1px solid #8c544b35; padding: 20px; border-radius: 7px; }
.sample-booking > strong { font-size: 14px; }
.sample-times { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 16px 0; }
.sample-times span { border: 1px solid #8c544b60; text-align: center; padding: 10px 7px; font-size: 12px; border-radius: 4px; }
.sample-times .is-selected { background: var(--sample-accent); color: white; }
.sample-steps { list-style: none; counter-reset: sample-step; display: grid; gap: 17px; padding: 0; margin: 20px 0; }
.sample-steps li { counter-increment: sample-step; position: relative; padding-left: 40px; }
.sample-steps li::before { content: counter(sample-step, decimal-leading-zero); position: absolute; left: 0; top: 1px; color: var(--sample-accent); font-size: 12px; font-weight: 600; }
.sample-steps strong { font-size: 15px; }
.sample-steps p { font-size: 14px; margin: 3px 0 0; }
.sample-agenda { display: grid; gap: 8px; margin-top: 24px; }
.sample-agenda > div { display: grid; grid-template-columns: 55px 1fr; gap: 14px; align-items: center; }
.sample-agenda time { font-size: 12px; }
.sample-agenda > div > span { display: flex; justify-content: space-between; align-items: center; gap: 15px; border-left: 3px solid var(--sample-accent); background: var(--sample-soft); padding: 9px 14px; }
.sample-agenda strong { font-size: 13px; }
.sample-agenda small { font-size: 11px; }
.sample-lesson-box { padding: 22px; border: 1px solid #899c8e50; border-radius: 5px; margin-bottom: 20px; }
.sample-lesson-box p { font-family: var(--ff-display); font-size: 23px; line-height: 1.3; margin-top: 12px; }
.sample-lesson-box.is-good { background: var(--sample-soft); border-color: var(--sample-accent); }
.sample .sample-small { font-size: 12px; margin-top: 16px; }
.sample-quiz { display: grid; gap: 10px; margin-block: 22px; }
.sample-quiz :is(button, .sample-quiz-option) { border: 1px solid #899c8e80; border-radius: 5px; text-align: left; padding: 14px 18px; background: #fffefa; color: var(--sample-ink); font: inherit; font-size: 14px; }
.sample-quiz button { cursor: pointer; }
.sample-quiz button:hover, .sample-quiz button[aria-pressed="true"] { border-color: var(--sample-accent); background: var(--sample-soft); }
.sample .sample-feedback { padding: 14px; font-size: 14px; background: #f5eee0; border-radius: 5px; }
.sample .sample-feedback.is-correct { background: var(--sample-soft); }
.sample-social { display: grid; grid-template-columns: 1fr .75fr; min-height: 500px; background: #fffefa; color: #573927; }
.sample-social-art { padding: 28px; display: flex; flex-direction: column; background: #f6e5d1; }
.sample-social-art > p { font-size: 11px; letter-spacing: .16em; }
.sample-social-art h4 { font-size: 37px; margin: 10px 0 0; }
.sample-social-art > div { flex: 1; display: grid; place-items: center; }
.sample-social-art svg { width: 100%; max-width: 255px; height: 230px; }
.sample-social-art > span { font-size: 9px; letter-spacing: .11em; }
.sample-social-copy { padding: 30px; align-self: center; }
.sample-social-copy > strong { display: block; margin-block: 30px 15px; }
.sample-social-copy > p { font-size: 14px; }
.sample-social-copy > small { font-size: 11px; }

/* Seven distinct business-site / app directions. */
.sample-site { --sample-accent: #254a5c; --sample-ink: #1e3446; background: #f3f5f3; }
.sample-site .sample-head { padding: 20px 30px; }
.sample-site-hero { display: grid; grid-template-columns: 1.13fr 1fr; gap: 18px; align-items: center; padding: 25px 30px 22px; }
.sample-site-hero h4 { font-size: 44px; line-height: 1.02; margin: 15px 0 18px; }
.sample-site-hero p { font-size: 14px; max-width: 33ch; }
.sample-site-hero .sample-eyebrow { font-size: 9px; letter-spacing: .13em; font-weight: 600; }
.sample-site-hero .sample-action { margin-top: 3px; }
.sample-art svg { display: block; width: 100%; max-height: 300px; }
.sample-service-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; padding: 20px 30px; border-top: 1px solid #27362d30; }
.sample-service-strip > div { display: grid; gap: 4px; }
.sample-service-strip strong { font-size: 13px; }
.sample-service-strip span { font-size: 11px; }
.site-trades .sample-head { background: #213d51; color: #fff; }
.site-trades .sample-action { background: #f1a56a; color: #213d51; }
.site-trades h4 { font-family: var(--ff-body); font-weight: 700; letter-spacing: -.05em; }
.site-garden { --sample-ink: #31462e; --sample-accent: #3f5839; background: #f0eddf; }
.site-garden .sample-head strong { font-family: var(--ff-display); font-size: 22px; letter-spacing: -.03em; }
.site-garden .sample-service-strip { background: #e1e3d2; }
.site-cafe { --sample-ink: #573927; --sample-accent: #78482f; background: #fbefd8; }
.site-cafe .sample-head strong { font-size: 26px; font-family: var(--ff-display); letter-spacing: -.05em; }
.site-cafe .sample-action { border-radius: 30px; }
.site-cafe .sample-art { order: -1; }
.site-cafe .sample-service-strip { border-top: 1px dashed #78482f80; }
.site-salon { --sample-ink: #633f38; --sample-accent: #784c44; background: #f7ece6; }
.site-salon .sample-head strong { letter-spacing: .2em; font-size: 13px; }
.site-salon h4 { font-style: italic; font-weight: 400; }
.site-salon .sample-action { background: transparent; border: 1px solid #784c44; color: #633f38; border-radius: 0; }
.site-accounting { --sample-ink: #284a3e; --sample-accent: #2a5447; background: #f1f3ea; }
.site-accounting .sample-head strong { letter-spacing: .12em; }
.site-accounting h4 { font-size: 40px; }
.site-accounting .sample-service-strip { background: #294e42; color: #fcfaf0; }
.site-pet { --sample-ink: #443a36; --sample-accent: #42637b; background: #fbf5e8; }
.site-pet .sample-head strong { font-weight: 800; letter-spacing: -.02em; font-size: 19px; }
.site-pet h4 { font-family: var(--ff-body); font-weight: 700; letter-spacing: -.05em; font-size: 39px; }
.site-pet .sample-action { border-radius: 28px; }
.site-pet .sample-service-strip { background: #e3eaf0; }

/* Fixed product shots use the same 800 × 520 canvas in cards and the gallery. */
.example-stage.is-product-shot { position: relative; aspect-ratio: 800 / 520; }
.example-stage-canvas { position: absolute; inset: 0 auto auto 0; width: 800px; height: 520px; transform-origin: top left; }
.pd { position: relative; width: 800px; height: 520px; overflow: hidden; color-scheme: light; font-family: var(--ff-body, 'Spline Sans', sans-serif); text-align: left; }
.pd *, .pd *::before, .pd *::after { box-sizing: border-box; }
.pd svg { display: block; width: 16px; height: 16px; }
.pd h4, .pd p { margin: 0; }
.pd-phone { position: absolute; width: var(--pd-phone-width, 276px); height: var(--pd-phone-height, 480px); filter: drop-shadow(0 20px 25px #182b3140) drop-shadow(0 4px 7px #182b312b); }
.pd-phone-bezel { width: 100%; height: 100%; padding: 6px; border: 2px solid #404850; border-radius: 42px; background: #17212a; }
.pd-phone-screen { position: relative; height: 100%; overflow: hidden; border-radius: 34px; background: #f7f9f8; }
.pd-camera { position: absolute; z-index: 2; top: 15px; left: 50%; width: 78px; height: 18px; transform: translateX(-50%); border-radius: 20px; background: #101820; }
.pd-status { display: flex; align-items: center; justify-content: space-between; height: 31px; padding: 5px 18px 0 22px; color: #182b34; font-size: 10px; line-height: 1; }
.pd-status > span { display: flex; align-items: center; gap: 2px; }
.pd-status svg { width: 13px; height: 13px; stroke-width: 2; }
.pd-status svg:last-child { width: 18px; }
.pd-home { position: absolute; z-index: 1; bottom: 7px; left: 50%; width: 86px; height: 4px; transform: translateX(-50%); border-radius: 10px; background: #26343e; }

.pd-call { background: linear-gradient(135deg, #eaf2f3 0%, #c5dbdc 100%); color: #263d47; }
.pd-call .pd-phone { z-index: 1; top: 20px; left: 94px; }
.pd-call-app { padding: 5px 13px 16px; }
.pd-call-head { display: flex; align-items: center; gap: 9px; padding: 7px 2px 11px; border-bottom: 1px solid #dce4e4; }
.pd-call-logo, .pd-notification-icon { display: grid; flex: 0 0 auto; place-items: center; width: 33px; height: 33px; border-radius: 10px; background: #245965; color: white; font-family: var(--ff-display); font-size: 20px; }
.pd-call-head strong { display: block; font-size: 13px; line-height: 1.2; }
.pd-call-head span { display: block; margin-top: 3px; color: #65777a; font-size: 9px; }
.pd-call-meta { display: flex; justify-content: space-between; align-items: center; padding: 10px 2px 4px; color: #5d7379; font-size: 9px; }
.pd-call-meta span { display: flex; align-items: center; gap: 3px; }
.pd-call-meta svg { width: 12px; height: 12px; }
.pd-call-meta strong { color: #344d54; font-size: 10px; }
.pd-call-date { margin: 3px 0 9px; text-align: center; color: #8b9b9d; font-size: 9px; }
.pd-chats { display: grid; gap: 8px; }
.pd-chat { display: grid; justify-items: start; max-width: 90%; }
.pd-chat.is-reply { justify-self: end; justify-items: end; }
.pd-chat-bubble { padding: 8px 10px; border: 1px solid #e5ebea; border-radius: 11px 11px 11px 3px; background: #fff; color: #263941; font-size: 11px; line-height: 1.35; }
.pd-chat.is-reply .pd-chat-bubble { border-color: #cde2df; border-radius: 11px 11px 3px 11px; background: #e3f2ee; }
.pd-chat small { margin: 3px 3px 0; color: #89999a; font-size: 8px; }
.pd-notification { position: absolute; z-index: 2; top: 153px; left: 383px; display: flex; gap: 12px; width: 352px; padding: 17px; border: 1px solid #ffffffad; border-radius: 18px; background: #ffffffed; box-shadow: 0 18px 40px #31576526, 0 2px 6px #31576519; }
.pd-notification-icon { width: 38px; height: 38px; }
.pd-notification small { display: flex; justify-content: space-between; width: 258px; color: #687c80; font-size: 9px; letter-spacing: .04em; }
.pd-notification small span { color: #99a6a8; letter-spacing: 0; }
.pd-notification strong { display: block; margin-top: 7px; color: #203b43; font-size: 15px; }
.pd-notification p { margin-top: 3px; color: #5f7378; font-size: 11px; }

.pd-invoice { background: linear-gradient(135deg, #e6eef1, #c7d9df); color: #263c47; }
.pd-invoice-sheet { position: absolute; top: 27px; left: 48px; width: 530px; height: 468px; padding: 24px 30px; background: #fff; box-shadow: 0 20px 43px #49636c39, 0 2px 8px #49636c20; }
.pd-invoice-sheet header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 25px; border-bottom: 1px solid #d8e1e4; }
.pd-wordmark, .pd-app-mark { display: flex; align-items: center; gap: 9px; color: #245465; }
.pd-wordmark svg { width: 26px; height: 26px; stroke-width: 1.6; }
.pd-wordmark strong { font-size: 21px; letter-spacing: -.045em; }
.pd-invoice-sheet header > span { color: #72868e; font-size: 10px; font-weight: 700; letter-spacing: .15em; }
.pd-invoice-title { display: flex; justify-content: space-between; gap: 20px; padding: 27px 0 22px; }
.pd-invoice-title small { color: #68818a; font-size: 10px; font-weight: 700; letter-spacing: .11em; }
.pd-invoice-title h4 { margin-top: 5px; color: #233e4a; font-family: var(--ff-display); font-size: 39px; font-weight: 500; }
.pd-invoice-title > div:last-child { display: grid; align-content: center; gap: 6px; color: #5b6d73; font-size: 11px; text-align: right; }
.pd-bill-to { display: grid; gap: 4px; margin-bottom: 28px; font-size: 12px; }
.pd-bill-to small { margin-bottom: 4px; color: #758b92; font-size: 9px; font-weight: 700; letter-spacing: .12em; }
.pd-bill-to strong { font-size: 15px; }
.pd-bill-to span { color: #5a6e75; }
.pd-invoice-sheet table { width: 100%; border-collapse: collapse; font-size: 11px; }
.pd-invoice-sheet th { padding: 11px 4px; border-block: 1px solid #cbd9de; color: #68818a; font-size: 9px; font-weight: 700; text-align: left; }
.pd-invoice-sheet td { padding: 13px 4px; border-bottom: 1px solid #e5eced; }
.pd-invoice-sheet th:not(:first-child), .pd-invoice-sheet td:not(:first-child) { text-align: right; }
.pd-invoice-totals { display: grid; gap: 8px; width: 190px; margin: 18px 0 0 auto; font-size: 12px; }
.pd-invoice-totals > div { display: flex; justify-content: space-between; }
.pd-invoice-totals .pd-total { padding-top: 12px; border-top: 1px solid #cad9dc; font-size: 15px; font-weight: 700; }
.pd-invoice-footer { margin-top: 27px !important; padding-top: 17px; border-top: 1px solid #e4eaec; color: #71838a; font-size: 10px; }
.pd-invoice .pd-phone { --pd-phone-width: 216px; --pd-phone-height: 429px; z-index: 1; top: 71px; left: 566px; }
.pd-invoice .pd-phone-bezel { border-radius: 38px; }
.pd-invoice .pd-phone-screen { border-radius: 30px; background: #f8fbfa; }
.pd-invoice-app > header { display: flex; justify-content: space-between; align-items: center; padding: 7px 14px 11px; border-bottom: 1px solid #e0e8e9; color: #263f49; }
.pd-invoice-app > header strong { font-size: 12px; }
.pd-invoice-app > header svg { width: 16px; height: 16px; }
.pd-app-body { padding: 17px 15px; }
.pd-app-mark { margin-bottom: 15px; gap: 5px; }
.pd-app-mark svg { width: 18px; height: 18px; }
.pd-app-mark strong { font-size: 12px; }
.pd-ready { display: inline-block; padding: 5px 8px; border-radius: 20px; background: #dfede7; color: #326457; font-size: 9px; font-weight: 700; }
.pd-app-body > small { display: block; margin-top: 16px; color: #82959a; font-size: 8px; font-weight: 700; letter-spacing: .12em; }
.pd-app-total { margin: 3px 0 16px; color: #224654; font-family: var(--ff-display); font-size: 30px; }
.pd-app-row { display: flex; justify-content: space-between; gap: 8px; padding: 9px 0; border-top: 1px solid #e3eaeb; font-size: 9px; }
.pd-app-row span { color: #7b8d92; }
.pd-app-row strong { text-align: right; }
.pd-send { display: block; margin-top: 17px; padding: 10px; border-radius: 8px; background: #28576a; color: white; font-size: 11px; font-weight: 700; text-align: center; }

.pd-cafe { background: #f5e8d4; color: #563c2d; }
.pd-browser { position: absolute; top: 23px; left: 25px; width: 750px; height: 472px; overflow: hidden; border: 1px solid #aa9a88; border-radius: 13px; background: #fff9ef; box-shadow: 0 18px 39px #775c3b38, 0 3px 8px #775c3b2b; }
.pd-browser-top { display: flex; align-items: end; gap: 22px; height: 32px; padding: 0 14px; border-bottom: 1px solid #d9d0c4; background: #e8e3dc; }
.pd-browser-dots { display: flex; align-self: center; gap: 5px; }
.pd-browser-dots i { width: 8px; height: 8px; border-radius: 50%; background: #c7aaa0; }
.pd-browser-dots i:nth-child(2) { background: #d9c29b; }
.pd-browser-dots i:nth-child(3) { background: #a9bbaa; }
.pd-browser-tab { display: flex; align-items: center; gap: 7px; width: 175px; height: 27px; padding: 0 11px; border: 1px solid #d9d0c4; border-bottom: 0; border-radius: 8px 8px 0 0; background: #faf8f3; color: #554839; font-size: 10px; }
.pd-browser-tab i { width: 9px; height: 9px; border-radius: 50%; background: #b8734d; }
.pd-browser-tools { display: flex; align-items: center; gap: 14px; height: 36px; padding: 0 13px; border-bottom: 1px solid #e2dbd0; background: #faf8f3; }
.pd-browser-tools > span { display: flex; gap: 8px; color: #8e867d; }
.pd-browser-tools svg { width: 13px; height: 13px; }
.pd-address { display: flex; align-items: center; gap: 7px; width: 510px; height: 23px; padding: 0 10px; border: 1px solid #e3ddd3; border-radius: 5px; background: #fff; color: #6c675e; font-size: 9px; }
.pd-address svg { width: 11px; height: 11px; }
.pd-browser-page { height: 404px; overflow: hidden; }
.pd-cafe-site { height: 100%; background: #fff9ec; }
.pd-cafe-site > header { display: flex; justify-content: space-between; align-items: center; height: 55px; padding: 0 31px; }
.pd-cafe-site > header strong { color: #603d2b; font-family: var(--ff-display); font-size: 29px; font-weight: 600; letter-spacing: -.06em; }
.pd-cafe-site nav { display: flex; gap: 26px; color: #674d3b; font-size: 11px; }
.pd-cafe-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; align-items: center; height: 258px; padding: 6px 31px 19px; }
.pd-cafe-copy small { color: #a06441; font-size: 8px; font-weight: 700; letter-spacing: .13em; }
.pd-cafe-copy h4 { margin: 10px 0 11px; color: #583822; font-family: var(--ff-display); font-size: 40px; font-weight: 500; line-height: .99; letter-spacing: -.035em; }
.pd-cafe-copy p { max-width: 35ch; color: #6c5545; font-size: 10px; line-height: 1.5; }
.pd-cafe-button { display: inline-flex; align-items: center; gap: 19px; margin-top: 17px; padding: 10px 15px; border-radius: 22px; background: #72452e; color: white; font-size: 10px; font-weight: 700; }
.pd-cafe-photo { width: 100%; max-width: 295px; aspect-ratio: 4 / 3; justify-self: end; overflow: hidden; border-radius: 6px; background: linear-gradient(135deg, #cfaa82, #efe0c3 55%, #aa7657); }
.pd-cafe-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pd-cafe-tiles { display: grid; grid-template-columns: repeat(3, 1fr); height: 91px; padding: 17px 31px; border-top: 1px solid #e9dcca; background: #f6ecdd; }
.pd-cafe-tiles > div { display: grid; align-content: start; gap: 6px; padding-left: 18px; border-left: 1px solid #e0cbb4; }
.pd-cafe-tiles > div:first-child { padding-left: 0; border-left: 0; }
.pd-cafe-tiles strong { color: #5d3d2c; font-family: var(--ff-display); font-size: 16px; font-weight: 600; }
.pd-cafe-tiles span { color: #7d6858; font-size: 9px; }

/* Product UI shares a quiet vocabulary; each composition keeps its own palette. */
.pd { --pd-ink: #273f46; --pd-accent: #285b67; --pd-soft: #e5efef; color: var(--pd-ink); font-size: 12px; line-height: 1.4; }
.pd h4 { font-family: var(--ff-display); font-weight: 500; line-height: 1.08; letter-spacing: -.025em; }
.pd h5 { margin: 0; font: inherit; font-weight: 600; }
.pd small { font-size: 10px; }
.pd-browser-tab { width: auto; min-width: 175px; max-width: 550px; white-space: nowrap; }
.pd-browser-page { height: calc(100% - 68px); }
.pd-fluid-stage { position: relative; }
.pd-app-header { display: flex; align-items: center; gap: 18px; height: 49px; padding: 0 22px; border-bottom: 1px solid #243b3520; background: #fff; }
.pd-app-header > strong { font-size: 12px; letter-spacing: .04em; }
.pd-app-header > span:not(.pd-avatar, .pd-pill) { color: #708180; font-size: 10px; }
.pd-app-header > .pd-avatar, .pd-app-header > .pd-pill { margin-left: auto; }
.pd-avatar { display: inline-grid; place-items: center; flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; background: var(--pd-soft); color: var(--pd-accent); font-size: 10px; font-weight: 600; }
.pd-pill { display: inline-block; padding: 5px 9px; border: 1px solid #284e3d12; border-radius: 20px; background: var(--pd-soft); color: var(--pd-accent); font-size: 9px; font-weight: 600; line-height: 1.25; }
.pd-button { display: inline-flex; align-items: center; justify-content: center; padding: 10px 16px; border: 1px solid var(--pd-accent); border-radius: 7px; background: var(--pd-accent); color: #fff; font-size: 11px; font-weight: 600; line-height: 1.2; }
.pd-secondary { background: transparent; color: var(--pd-accent); border-color: #596a6640; }
.pd-details { margin: 15px 0; }
.pd-details > div { display: grid; grid-template-columns: 115px 1fr; gap: 15px; padding: 9px 0; border-bottom: 1px solid #324e4020; }
.pd-details dt { color: #74827d; font-size: 10px; }
.pd-details dd { margin: 0; font-size: 11px; font-weight: 600; }
.pd-callout { padding: 12px 14px; border: 1px solid #385c4015; border-radius: 8px; background: var(--pd-soft); font-size: 10px; line-height: 1.45; }
.pd-callout > strong { display: block; margin-bottom: 4px; font-size: 11px; }
.pd-callout p { font-size: 10px; line-height: 1.5; }
.pd-mobile-header { display: flex; align-items: center; justify-content: center; gap: 10px; height: 39px; padding: 0 14px; border-bottom: 1px solid #263d3420; font-size: 11px; }
.pd-mobile-header > span:first-child { margin-right: auto; }
.pd-mobile-header > strong { margin-right: auto; }
.pd-mobile-body { padding: 16px; }
.pd-mobile-body h4 { margin: 12px 0; font-size: 27px; }
.pd-mobile-body .pd-details > div { grid-template-columns: 65px 1fr; gap: 8px; }
.pd-mobile-body .pd-button { display: flex; margin-top: 9px; }
.pd-mobile-brand { margin-bottom: 12px; color: var(--pd-accent); font-size: 10px; font-weight: 600; letter-spacing: .05em; }
.pd-tablet { position: absolute; top: 38px; left: 80px; width: 640px; height: 444px; padding: 16px 20px; border: 2px solid #42454b; border-radius: 32px; background: #17212a; box-shadow: 0 20px 35px #26343b40, 0 3px 7px #26343b30; }
.pd-tablet-camera { position: absolute; top: 6px; left: 50%; width: 5px; height: 5px; border-radius: 50%; background: #46525a; }
.pd-tablet-screen { height: 100%; overflow: hidden; border-radius: 16px; background: #fffdf8; }
.pd img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pd-invoice-sheet header { padding-bottom: 12px; }
.pd-invoice-title { padding: 14px 0 12px; }
.pd-invoice-title h4 { font-size: 35px; }
.pd-bill-to { margin-bottom: 12px; }
.pd-invoice-sheet td { padding: 8px 4px; }
.pd-invoice-totals { margin-top: 13px; }
.pd-invoice-footer { margin-top: 12px !important; padding-top: 10px; }
.pd-invoice .pd-camera { width: 60px; }

.pd-calls { background: #d3e3e3; }
.pd-calls .pd-browser { top: 41px; left: 38px; width: 724px; height: 438px; }
.pd-inbox { height: 100%; background: #fff; }
.pd-inbox-layout { display: grid; grid-template-columns: 218px 1fr; height: 321px; }
.pd-call-list { padding: 17px 10px; border-right: 1px solid #dce6e5; background: #f5f8f7; }
.pd-call-list > small { display: block; padding: 0 10px 12px; color: #869593; }
.pd-call-item { display: flex; gap: 10px; margin-bottom: 7px; padding: 12px 9px; border: 1px solid transparent; border-radius: 9px; color: #84918e; }
.pd-call-item.is-selected { border-color: #cfdfdb; background: #fff; color: #294f55; box-shadow: 0 3px 6px #30494108; }
.pd-call-item strong { font-size: 11px; }
.pd-call-item p { margin: 3px 0; font-size: 9px; line-height: 1.3; }
.pd-call-item time { font-size: 8px; color: #8b9995; }
.pd-call-detail { padding: 17px 23px; }
.pd-call-detail h4 { margin-top: 11px; font-size: 25px; }
.pd-call-detail .pd-details { margin: 10px 0 13px; }
.pd-call-detail .pd-details > div { padding: 7px 0; }
.pd-call-detail .pd-callout { padding: 9px 11px; }

.pd-record { background: #d4e6e9; }
.pd-record .pd-phone { top: 20px; left: 439px; width: 292px; }
.pd-record-app { color: #284656; }
.pd-record-app .pd-callout { padding: 11px; }
.pd-record-app .pd-mobile-body { padding-top: 12px; }
.pd-record-app .pd-mobile-brand { margin-bottom: 8px; }
.pd-record-app h4 { margin: 9px 0; font-size: 24px; }
.pd-record-app .pd-details { margin: 10px 0; }
.pd-record-app .pd-details > div { padding: 7px 0; }
.pd-record-app .pd-button { padding: 8px; margin-top: 7px; }
.pd-visit-card { position: absolute; left: 68px; top: 165px; width: 314px; padding: 25px; border: 1px solid #fff; border-radius: 15px; background: #fffffff2; box-shadow: 0 18px 35px #35596422; }
.pd-visit-card .pd-wordmark strong { font-size: 19px; }
.pd-visit-card > small { display: block; margin-top: 26px; color: #84969a; }
.pd-visit-card h4 { margin: 5px 0 4px; font-size: 36px; }
.pd-visit-card p { color: #6c8187; font-size: 13px; }

.pd-booking, .pd-confirmation, .pd-salon { --pd-ink: #60443f; --pd-accent: #805a51; --pd-soft: #f4e9e4; background: #e9d8d0; }
.pd-booking .pd-browser { top: 30px; height: 460px; }
.pd-booking-page { height: 100%; background: #fffdf9; }
.pd-booking-page .pd-app-header { background: #fffdf9; }
.pd-stepper { display: flex; justify-content: center; align-items: center; gap: 24px; padding: 17px 0 10px; color: #9b8b84; font-size: 10px; }
.pd-stepper > span { display: flex; align-items: center; gap: 6px; }
.pd-stepper i { display: grid; place-items: center; width: 20px; height: 20px; border: 1px solid #d4c6bf; border-radius: 50%; font-style: normal; }
.pd-stepper .is-current { color: var(--pd-accent); font-weight: 600; }
.pd-stepper .is-current i { background: var(--pd-accent); color: white; border-color: var(--pd-accent); }
.pd-stepper .is-done i { background: var(--pd-soft); color: var(--pd-accent); }
.pd-stepper b { font-weight: 400; color: #b6aaa2; }
.pd-booking-page > h4 { margin: 8px 30px 18px; font-size: 29px; }
.pd-booking-layout { display: grid; grid-template-columns: 205px 1fr; gap: 26px; padding: 0 30px; }
.pd-service-summary { padding: 18px; border: 1px solid #e5d7cd; border-radius: 10px; background: #faf4ef; }
.pd-service-summary > small { color: #a08b80; }
.pd-service-summary h5 { margin-top: 5px; font-family: var(--ff-display); font-size: 25px; }
.pd-stylist { display: flex; align-items: center; gap: 8px; margin: 24px 0 18px; }
.pd-stylist small, .pd-stylist strong { display: block; }
.pd-stylist small { color: #a08b80; }
.pd-duration { display: flex; align-items: center; gap: 7px; font-size: 10px; }
.pd-date-heading { display: flex; justify-content: space-between; align-items: center; font-size: 12px; }
.pd-date-heading > span { padding: 6px; border: 1px solid #e5d7cd; border-radius: 5px; }
.pd-week-strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; margin: 12px 0; }
.pd-week-strip > span { display: grid; justify-items: center; gap: 4px; padding: 8px 0; border: 1px solid transparent; border-radius: 7px; }
.pd-week-strip small { font-size: 9px; color: #a29289; }
.pd-week-strip strong { font-size: 12px; }
.pd-week-strip .is-selected { border-color: #c1a598; background: #f7eee7; }
.pd-time-slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.pd-time-slots > span { padding: 10px 3px; border: 1px solid #d9c8be; border-radius: 6px; text-align: center; font-size: 10px; }
.pd-time-slots .is-selected { background: var(--pd-accent); color: #fff; border-color: var(--pd-accent); }
.pd-booking-bottom { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 18px; }
.pd-booking-bottom > small { color: #9e8d82; font-size: 8px; }
.pd-booking-bottom .pd-button { font-size: 10px; padding: 10px; }
.pd-confirmation .pd-phone { top: 20px; left: 123px; width: 324px; }
.pd-mail { color: var(--pd-ink); }
.pd-mail .pd-mobile-body { padding: 10px 16px; }
.pd-mail-sender { display: flex; gap: 9px; align-items: center; margin-bottom: 8px; }
.pd-mail-sender .pd-avatar { width: 28px; height: 28px; }
.pd-mail-sender strong, .pd-mail-sender small { display: block; }
.pd-mail-sender strong { font-size: 11px; }
.pd-mail-sender small { margin-top: 2px; font-size: 8px; color: #a59286; }
.pd-mail h4 { margin: 9px 0; font-size: 24px; }
.pd-mail-details { display: grid; gap: 6px; margin-bottom: 10px; }
.pd-mail-details > div { display: flex; align-items: center; gap: 9px; }
.pd-mail-details svg { width: 14px; height: 14px; color: #a08274; }
.pd-mail-details small, .pd-mail-details strong { display: block; font-size: 9px; }
.pd-mail-details small { color: #a59286; margin-bottom: 2px; }
.pd-mail .pd-callout { padding: 8px; }
.pd-mail .pd-callout p { font-size: 9px; }
.pd-manage-label { display: block; margin-top: 9px; font-size: 8px; color: #a59286; }
.pd-mail .pd-button { margin-top: 5px; padding: 8px; }
.pd-calendar-tile { position: absolute; top: 140px; left: 480px; width: 174px; padding: 0 0 20px; overflow: hidden; border: 1px solid #fff; border-radius: 18px; background: #fffcf8; box-shadow: 0 18px 35px #815c472b; text-align: center; transform: rotate(4deg); }
.pd-calendar-tile small { display: block; padding: 12px; background: #93695e; color: white; font-size: 14px; letter-spacing: .18em; }
.pd-calendar-tile strong { display: block; margin: 12px 0 2px; font-family: var(--ff-display); font-size: 72px; font-weight: 500; line-height: 1; }
.pd-calendar-tile > span { font-size: 13px; color: #9a7868; }

.pd-social, .pd-content { --pd-ink: #5c3c2a; --pd-accent: #815236; --pd-soft: #f5e9d8; background: #e8d0b4; }
.pd-social .pd-phone { top: 20px; left: 78px; width: 314px; }
.pd-approval { background: #fffaf4; height: 100%; }
.pd-approval .pd-mobile-header { height: 32px; font-size: 10px; color: #916d4e; }
.pd-post-account { display: flex; align-items: center; gap: 7px; padding: 8px 13px; font-size: 10px; }
.pd-post-account .pd-avatar { width: 25px; height: 25px; font-size: 8px; }
.pd-post-photo { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: #caa782; }
.pd-post-art { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 18px; background: linear-gradient(90deg, #2e1c13d9, #2e1c1338); color: #fff8ed; }
.pd-post-art small { font-size: 8px; letter-spacing: .16em; }
.pd-post-art h4 { font-size: 30px; text-shadow: 0 2px 5px #23150c55; }
.pd-post-art > span { font-size: 7px; letter-spacing: .07em; }
.pd-post-caption { padding: 12px 14px; }
.pd-post-caption p { margin-bottom: 7px; font-size: 10px; line-height: 1.5; }
.pd-post-caption > small { font-size: 8px; color: #ac9581; }
.pd-post-actions { display: flex; gap: 8px; margin-top: 9px; }
.pd-post-actions .pd-button { flex: 1; padding: 8px 5px; font-size: 9px; }
.pd-draft-card { position: absolute; top: 133px; left: 447px; width: 273px; padding: 26px; border: 1px solid #fff7e9; border-radius: 13px; background: #fff8e9; box-shadow: 0 20px 35px #79533120; transform: rotate(-3deg); }
.pd-draft-card > small { font-size: 9px; letter-spacing: .11em; }
.pd-draft-card .pd-pill { display: block; width: fit-content; margin-top: 17px; }
.pd-draft-card h4 { margin: 15px 0; font-size: 34px; }
.pd-draft-card p { color: #9a7a62; font-size: 11px; }
.pd-content .pd-browser { top: 39px; left: 28px; width: 744px; height: 441px; }
.pd-content-page { height: 100%; background: #fdfaf5; }
.pd-board-heading { display: flex; justify-content: space-between; align-items: center; padding: 22px 20px 20px; }
.pd-board-heading h4 { font-size: 26px; }
.pd-week-board { display: grid; grid-template-columns: repeat(5, 1fr); gap: 9px; padding: 0 20px; }
.pd-week-board > section { min-width: 0; height: 219px; padding: 10px 6px; border: 1px solid #e6ddcf; border-radius: 8px; background: #f4efe7; }
.pd-week-board section > header { padding: 0 5px 12px; font-size: 10px; font-weight: 600; color: #9b826c; }
.pd-content-card { padding: 11px 8px; border: 1px solid #e6d8c6; border-radius: 7px; background: #fff; box-shadow: 0 2px 4px #80624408; }
.pd-content-card > svg { width: 22px; height: 22px; margin-bottom: 12px; color: #a87851; }
.pd-content-card > small { display: block; font-size: 8px; color: #a1846a; }
.pd-content-card h5 { margin: 6px 0 12px; font-size: 11px; line-height: 1.45; }
.pd-content-card .pd-pill { padding: 4px 6px; font-size: 8px; border-radius: 5px; }
.pd-empty-day { height: 60px; border: 1px dashed #d7cbb9; border-radius: 6px; }
.pd-board-note { margin: 16px 22px 0 !important; color: #a08874; font-size: 9px; }

.pd-review, .pd-revision, .pd-handbook, .pd-lesson, .pd-quiz, .pd-portal { --pd-ink: #304738; --pd-accent: #496950; --pd-soft: #e9eee3; }
.pd-review { background: #dbdfcf; }
.pd-report { position: absolute; top: 27px; left: 73px; width: 594px; height: 449px; padding: 29px 34px; background: #fffef8; box-shadow: 0 18px 35px #48564025; }
.pd-report header { display: flex; flex-direction: column; gap: 7px; margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid #d9dfd0; }
.pd-report header strong { font-size: 13px; }
.pd-report header small { font-size: 9px; color: #8d9880; }
.pd-report h4 { margin: 13px 0 16px; font-size: 30px; }
.pd-findings { width: 100%; border-collapse: collapse; font-size: 11px; }
.pd-findings th { padding: 8px 0; border-bottom: 1px solid #cfd7c7; font-size: 9px; text-align: left; color: #8a9880; }
.pd-findings td { padding: 13px 0; border-bottom: 1px solid #e4e8de; }
.pd-findings th:first-child { width: 45%; }
.pd-findings td:last-child { position: relative; padding-left: 23px; font-size: 10px; }
.pd-findings td svg { position: absolute; top: 12px; left: 0; width: 14px; height: 14px; color: #a88446; }
.pd-findings tr:first-child td svg { color: #5e8559; }
.pd-sticky { position: absolute; top: 399px; left: 383px; width: 340px; padding: 14px 18px; background: #f8e8b7; box-shadow: 0 10px 20px #6f67452b; transform: rotate(-3deg); }
.pd-sticky strong { font-family: var(--ff-display); font-size: 23px; font-weight: 500; }
.pd-sticky p { margin-top: 7px; font-size: 10px; line-height: 1.5; }
.pd-revision { background: #dfe5d5; }
.pd-revision .pd-browser { top: 31px; left: 48px; width: 704px; height: 458px; }
.pd-revised-site { height: 100%; background: #fffef8; }
.pd-revised-site > header { display: flex; justify-content: space-between; padding: 16px 23px; border-bottom: 1px solid #dde2d5; font-size: 10px; }
.pd-revised-site > header > span { color: #8d987f; font-size: 9px; }
.pd-revised-site main { padding: 19px 32px 20px 100px; }
.pd-revised-block { position: relative; margin-top: 13px; padding-left: 17px; border-left: 2px solid #8ca475; }
.pd-revised-block > small { position: absolute; top: 4px; left: -80px; padding: 3px 7px; border-radius: 4px; background: #eaf0e1; color: #77945e; font-size: 8px; }
.pd-revised-block h4 { font-size: 29px; }
.pd-revised-block p { margin-top: 10px; font-size: 11px; line-height: 1.5; }
.pd-revised-block .pd-details { margin: 0; }
.pd-revised-block .pd-details > div { grid-template-columns: 125px 1fr; padding: 8px 0; }
.pd-revised-site .pd-button { margin: 17px 0 0 18px; }

.pd-day, .pd-changes { --pd-ink: #3f4056; --pd-accent: #625b86; --pd-soft: #edeaf4; background: #ded9ec; }
.pd-day-app { height: 100%; background: #fcfbfe; }
.pd-day-app .pd-app-header { height: 43px; padding: 0 17px; gap: 12px; }
.pd-day-app .pd-app-header > strong { font-size: 10px; }
.pd-day-app .pd-app-header > span { font-size: 9px; }
.pd-day-heading { display: flex; justify-content: space-between; align-items: center; padding: 14px 21px 10px; }
.pd-day-heading h4 { font-size: 22px; }
.pd-day-grid { position: relative; height: 277px; margin: 0 22px 0 17px; }
.pd-time-axis { position: absolute; top: 0; bottom: 0; width: 43px; color: #a19aae; font-size: 8px; }
.pd-time-axis time { position: absolute; transform: translateY(-50%); }
.pd-calendar-track { position: absolute; top: 0; right: 0; bottom: 0; left: 43px; border-block: 1px solid #e8e3ef; background: repeating-linear-gradient(to bottom, transparent 0, transparent calc(12.5% - 1px), #e8e3ef calc(12.5% - 1px), #e8e3ef 12.5%); }
.pd-event { position: absolute; left: 13px; right: 12px; display: flex; align-items: center; gap: 12px; padding: 0 10px; border-left: 3px solid #807ba9; border-radius: 3px; box-shadow: inset 0 -2px #fff; font-size: 9px; }
.pd-event time { width: 34px; flex-shrink: 0; font-size: 8px; }
.pd-event strong { font-size: 10px; }
.pd-event small { margin-left: auto; font-size: 8px; }
.pd-event-client { background: #e5e4f5; border-color: #8d84bd; }
.pd-event-buffer { background: #f0eee8; border-color: #b8a880; }
.pd-event-focus { background: #dfede8; border-color: #7fae9a; }
.pd-event-break { background: #f5e8db; border-color: #c59c7a; }
.pd-event-office { background: #e5edf5; border-color: #83a2c2; }
.pd-calendar-legend { display: flex; justify-content: center; gap: 13px; margin-top: 15px; color: #8b859a; font-size: 8px; }
.pd-calendar-legend > span { display: flex; align-items: center; gap: 4px; }
.pd-calendar-legend i { width: 7px; height: 7px; border-radius: 2px; }
.pd-changes .pd-phone { top: 20px; left: 404px; width: 328px; }
.pd-dimmed-day { height: 100%; padding: 15px; background: #746d80; color: #e2dfe8; }
.pd-dimmed-day > strong { font-size: 12px; }
.pd-dimmed-day p { margin: 8px 0 20px; font-size: 10px; }
.pd-dimmed-day > div { margin: 12px 0; padding: 15px; border-radius: 5px; background: #8c8595; font-size: 10px; }
.pd-change-sheet { position: absolute; left: 0; right: 0; bottom: 0; height: 399px; padding: 7px 18px 17px; border-radius: 22px 22px 0 0; background: #fffdfd; box-shadow: 0 -10px 30px #27223835; }
.pd-sheet-handle { width: 36px; height: 3px; margin: 0 auto 10px; border-radius: 5px; background: #d7d2e0; }
.pd-change-sheet > small { display: block; margin-bottom: 5px; font-size: 8px; color: #aaa1b5; }
.pd-change-sheet h4 { margin: 10px 0 12px; font-size: 25px; }
.pd-change-list { display: grid; gap: 10px; margin-bottom: 13px; }
.pd-change-list > div { display: flex; align-items: center; gap: 9px; }
.pd-change-list svg { width: 16px; height: 16px; color: #9389ac; }
.pd-change-list small, .pd-change-list strong { display: block; font-size: 9px; }
.pd-change-list small { margin-bottom: 2px; color: #9a8daa; font-size: 8px; }
.pd-change-sheet .pd-callout { padding: 9px 11px; }
.pd-change-sheet .pd-callout p { font-size: 9px; }
.pd-change-actions { display: flex; gap: 8px; margin-top: 11px; }
.pd-change-actions .pd-button { flex: 1; padding: 9px; font-size: 10px; }
.pd-another-option { display: block; margin-top: 7px; text-align: center; color: #9b8aa8; font-size: 8px; }
.pd-change-side { position: absolute; top: 164px; left: 65px; width: 290px; }
.pd-change-side > small { color: #9389a8; letter-spacing: .12em; }
.pd-change-side h4 { margin: 16px 0 22px; font-size: 40px; }

.pd-handbook { background: #e1e4d5; }
.pd-handbook-back { position: absolute; top: 33px; left: 153px; width: 511px; height: 454px; transform: rotate(3deg); background: #f4f0e4; box-shadow: 0 10px 28px #49543b20; }
.pd-handbook > .pd-handbook { position: absolute; top: 25px; left: 138px; width: 518px; height: 465px; padding: 27px 32px; transform: rotate(-2deg); background: #fffef6; box-shadow: 0 15px 30px #48543c30; }
.pd-handbook header { display: flex; justify-content: space-between; padding-bottom: 17px; border-bottom: 1px solid #d6dfca; font-size: 10px; }
.pd-handbook header > span { color: #8c977e; font-size: 9px; }
.pd-handbook .pd-pill { margin-top: 17px; }
.pd-handbook h4 { margin: 12px 0 9px; font-size: 33px; }
.pd-handbook p { font-size: 11px; line-height: 1.5; }
.pd-handbook ol { display: grid; gap: 16px; margin: 22px 0 17px; padding-left: 25px; }
.pd-handbook li { padding-left: 7px; font-size: 11px; }
.pd-handbook li::marker { color: #7e9870; font-weight: 600; }
.pd-handbook li strong { font-size: 12px; }
.pd-handbook li p { margin-top: 4px; color: #6d7964; font-size: 10px; }
.pd-handbook .pd-callout { padding: 10px 12px; font-size: 10px; }
.pd-handbook .pd-callout strong { display: inline; font-size: 10px; }
.pd-handbook footer { display: flex; justify-content: space-between; margin-top: 19px; padding-top: 10px; border-top: 1px solid #dfe5d5; font-size: 8px; color: #99a18d; }
.pd-lesson, .pd-quiz { background: #dfe7d9; }
.pd-lesson .pd-browser, .pd-quiz .pd-browser { top: 29px; left: 29px; width: 742px; height: 462px; }
.pd-learning { height: 100%; background: #fffef9; }
.pd-learning-layout { display: grid; grid-template-columns: 173px 1fr; height: calc(100% - 49px); }
.pd-lesson-outline { padding: 19px 12px; border-right: 1px solid #dfe6d7; background: #f3f6ee; }
.pd-lesson-outline > small { display: block; padding: 0 9px 14px; font-size: 9px; color: #8e9d83; }
.pd-lesson-outline > div { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; padding: 12px 9px; border-radius: 7px; color: #95a08b; font-size: 10px; }
.pd-lesson-outline > div > span { display: grid; place-items: center; flex-shrink: 0; width: 21px; height: 21px; border: 1px solid #d4dec8; border-radius: 50%; font-size: 9px; }
.pd-lesson-outline .is-current { color: #426138; background: #e2ead7; }
.pd-lesson-outline .is-current > span { border-color: #788d63; background: #788d63; color: #fff; }
.pd-lesson-main { padding: 13px 23px; }
.pd-lesson-main h4 { margin: 11px 0 9px; font-size: 28px; }
.pd-lesson-main > p { max-width: 50ch; font-size: 11px; line-height: 1.5; }
.pd-comparisons { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 12px 0; }
.pd-comparisons > div { padding: 12px; border: 1px solid #e1e6d8; border-radius: 7px; background: #fbfaf4; }
.pd-comparisons small { color: #959c89; font-size: 8px; }
.pd-comparisons p { margin-top: 7px; font-family: var(--ff-display); font-size: 16px; line-height: 1.22; }
.pd-comparisons .pd-clear { border-color: #c7d9b5; background: #edf3e6; }
.pd-lesson-main .pd-callout { padding: 9px 12px; }
.pd-lesson-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }
.pd-lesson-footer p { color: #8d987e; font-size: 9px; }
.pd-lesson-progress { display: flex; gap: 4px; margin-top: 7px; }
.pd-lesson-progress i { width: 17px; height: 3px; border-radius: 3px; background: #dce3d3; }
.pd-lesson-progress .is-current { background: #64884b; }
.pd-lesson-footer .pd-button { padding: 9px 19px; }
.pd-quiz-main { padding: 20px 25px; }
.pd-quiz-main h4 { max-width: 26ch; margin: 12px 0; font-size: 29px; }
.pd-quiz-main > p { font-size: 12px; }
.pd-quiz-answers { display: grid; gap: 9px; margin: 16px 0; }
.pd-quiz-answers :is(button, .sample-quiz-option) { display: block; min-height: 44px; padding: 12px 16px; border: 1px solid #cbd6c0; border-radius: 7px; background: #fffefa; color: #3c5032; font: inherit; font-size: 12px; text-align: left; line-height: 1.4; }
.pd-quiz-answers button { cursor: pointer; }
.pd-quiz-answers button:hover, .pd-quiz-answers button[aria-pressed="true"] { border-color: #7a9a60; background: #ecf3e4; }
.pd-quiz-answers button:focus-visible { outline: 2px solid #7a9a60; outline-offset: 2px; }
.pd-quiz-main .pd-quiz-feedback { padding: 11px 13px; border-radius: 7px; background: #f3efe2; font-size: 11px; line-height: 1.5; }
.pd-quiz-main .pd-quiz-feedback.is-correct { background: #e6efdc; }
.example-stage .pd-quiz { width: 100%; height: auto; padding: 20px; }
.example-stage .pd-quiz .pd-browser { position: relative; inset: auto; width: 100%; height: auto; }
.example-stage .pd-quiz .pd-browser-page { height: auto; }
.example-stage .pd-quiz .pd-address { width: auto; flex: 1; min-width: 0; }
.example-stage .pd-quiz .pd-learning-layout { height: auto; min-height: 360px; }
.example-stage .pd-quiz .pd-quiz-main { padding: 25px 30px 40px; }
.example-stage .pd-quiz .pd-quiz-answers button { font-size: 14px; }
.example-stage .pd-quiz .pd-quiz-feedback { font-size: 13px; }

.pd-trades { --pd-ink: #213d51; --pd-accent: #213d51; --pd-soft: #e0ebed; background: #d6e2e5; }
.pd-trades-site { height: 100%; background: #f5f7f4; }
.pd-trades-site > header { display: flex; align-items: center; justify-content: space-between; height: 52px; padding: 0 26px; background: #213d51; color: #fff; font-size: 13px; }
.pd-trades-site nav { font-size: 10px; color: #b4cbd3; }
.pd-trades-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: center; padding: 18px 26px; }
.pd-trades-hero small { color: #6e96a3; font-size: 8px; letter-spacing: .13em; }
.pd-trades-hero h4 { margin: 10px 0 13px; font-family: var(--ff-body); font-size: 39px; font-weight: 700; letter-spacing: -.055em; }
.pd-trades-hero p { max-width: 35ch; color: #6e8288; font-size: 11px; line-height: 1.5; }
.pd-trades-hero .pd-button { margin-top: 15px; background: #efa76d; border-color: #efa76d; color: #213d51; }
.pd-trades-photo { aspect-ratio: 3 / 2; overflow: hidden; border-radius: 7px; background: #cbb794; }
.pd-trades-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; padding: 0 26px; }
.pd-trades-tiles > div { position: relative; display: grid; gap: 4px; padding: 12px 10px 12px 40px; border: 1px solid #d9e2e1; border-radius: 7px; background: #fff; }
.pd-trades-tiles svg { position: absolute; top: 15px; left: 12px; color: #7294a3; }
.pd-trades-tiles strong { font-size: 12px; }
.pd-trades-tiles span { font-size: 9px; color: #849195; }
.pd-garden { --pd-ink: #31462e; --pd-accent: #3f5839; --pd-soft: #e1e3d2; background: #d7ddc6; }
.pd-garden .pd-browser { top: 40px; left: 23px; width: 656px; height: 438px; }
.pd-garden-site { height: 100%; background: #f6f3e8; }
.pd-garden-site > header { display: flex; align-items: center; justify-content: space-between; height: 49px; padding: 0 24px; }
.pd-garden-site > header > strong { font-family: var(--ff-display); font-size: 25px; font-weight: 500; letter-spacing: -.04em; }
.pd-garden-site nav { font-size: 9px; color: #7c8968; }
.pd-garden-hero { display: grid; grid-template-columns: .9fr 1fr; gap: 23px; align-items: center; padding: 8px 24px 21px; }
.pd-garden-photo { aspect-ratio: 4 / 3; overflow: hidden; border-radius: 80px 80px 5px 5px; background: #c9b69a; }
.pd-garden-hero small { font-size: 7px; letter-spacing: .1em; color: #819467; }
.pd-garden-hero h4 { margin: 12px 0; font-size: 31px; }
.pd-garden-hero p { max-width: 31ch; color: #7b856c; font-size: 10px; line-height: 1.5; }
.pd-garden-hero .pd-button { margin-top: 16px; border-radius: 0; font-size: 10px; }
.pd-garden-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 14px 24px; border-top: 1px solid #d8dcc8; background: #e5e8d7; }
.pd-garden-tiles > div { display: grid; gap: 5px; }
.pd-garden-tiles > div:last-child { padding-right: 55px; }
.pd-garden-tiles strong { font-family: var(--ff-display); font-size: 14px; }
.pd-garden-tiles span { font-size: 8px; color: #879174; }
.pd-garden .pd-phone { top: 153px; left: 598px; width: 176px; height: 346px; }
.pd-garden .pd-phone-bezel { padding: 5px; border-radius: 33px; }
.pd-garden .pd-phone-screen { border-radius: 26px; background: #f6f3e8; }
.pd-garden .pd-camera { top: 13px; width: 61px; height: 14px; }
.pd-garden .pd-status { height: 26px; padding: 6px 10px 0 15px; font-size: 8px; }
.pd-garden .pd-status svg { width: 9px; height: 9px; }
.pd-garden-mobile header { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; }
.pd-garden-mobile header strong { font-family: var(--ff-display); font-size: 17px; }
.pd-garden-mobile header svg { width: 12px; height: 12px; }
.pd-garden-mobile-photo { aspect-ratio: 2 / 1; margin: 0 12px; overflow: hidden; border-radius: 44px 44px 2px 2px; background: #c9b69a; }
.pd-garden-mobile-copy { padding: 9px 12px; }
.pd-garden-mobile-copy > small { font-size: 5px; letter-spacing: .08em; color: #819467; }
.pd-garden-mobile-copy h4 { margin: 6px 0; font-size: 20px; }
.pd-garden-mobile-copy p { font-size: 8px; line-height: 1.5; color: #7b856c; }
.pd-garden-mobile-copy .pd-button { margin-top: 8px; padding: 8px 10px; border-radius: 0; font-size: 8px; }
.pd-salon .pd-phone { top: 20px; left: 115px; width: 308px; }
.pd-salon .pd-phone-screen { background: #fbf1eb; }
.pd-salon-site > header { display: flex; align-items: center; justify-content: space-between; padding: 9px 15px; }
.pd-salon-site > header strong { font-size: 11px; letter-spacing: .17em; }
.pd-salon-site > header svg { width: 14px; height: 14px; }
.pd-salon-photo { aspect-ratio: 3 / 1; margin: 0 14px; overflow: hidden; border-radius: 65px 65px 2px 2px; background: #dcb2a5; }
.pd-salon-copy { padding: 12px 15px; }
.pd-salon-copy > small { color: #a68b80; font-size: 7px; letter-spacing: .08em; }
.pd-salon-copy h4 { margin: 9px 0; font-size: 32px; font-style: italic; }
.pd-salon-copy > p { max-width: 36ch; font-size: 9px; line-height: 1.5; color: #8c746b; }
.pd-salon-copy .pd-button { display: flex; margin-top: 10px; padding: 8px; border-radius: 0; font-size: 9px; }
.pd-salon-services { margin-top: 11px; }
.pd-salon-services > div { display: flex; justify-content: space-between; align-items: baseline; gap: 7px; padding: 8px 0; border-top: 1px solid #e6d5cb; }
.pd-salon-services strong { font-size: 10px; }
.pd-salon-services span { text-align: right; font-size: 8px; color: #a28a7f; }
.pd-studio-card { position: absolute; top: 150px; left: 479px; width: 243px; padding: 30px 24px; border: 1px solid #fdf5ea; background: #f8eee2; box-shadow: 0 18px 30px #85614d20; }
.pd-studio-card > small { color: #b19787; font-size: 9px; letter-spacing: .14em; }
.pd-studio-card h4 { margin: 25px 0 15px; font-size: 25px; letter-spacing: .07em; }
.pd-studio-card p { color: #a28a7d; font-size: 10px; }
.pd-studio-card > div { display: grid; place-items: center; width: 50px; height: 50px; margin-top: 32px; border: 1px solid #d8bca9; border-radius: 50%; color: #b49987; }
.pd-studio-card svg { width: 24px; height: 24px; }
.pd-accounting { --pd-ink: #284a3e; --pd-accent: #2a5447; --pd-soft: #e1e9db; background: #d9e2d3; }
.pd-accounting-site { height: 100%; background: #f8f9f0; }
.pd-accounting-site > header { display: flex; align-items: center; justify-content: space-between; height: 57px; padding: 0 29px; border-bottom: 1px solid #dce5d4; }
.pd-accounting-site > header > strong { font-size: 15px; letter-spacing: .12em; }
.pd-accounting-site nav { color: #7c9682; font-size: 10px; }
.pd-accounting-hero { display: grid; grid-template-columns: 1.25fr 1fr; gap: 26px; align-items: center; padding: 22px 29px; }
.pd-accounting-hero small { color: #8ea580; font-size: 8px; letter-spacing: .08em; }
.pd-accounting-hero h4 { margin: 12px 0 14px; font-size: 32px; }
.pd-accounting-hero p { max-width: 40ch; color: #77907e; font-size: 10px; line-height: 1.5; }
.pd-accounting-hero .pd-button { margin-top: 15px; border-radius: 3px; font-size: 10px; }
.pd-accounting-photo { aspect-ratio: 3 / 2; overflow: hidden; border-radius: 3px; background: #cdbd99; }
.pd-accounting-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; padding: 23px 29px; background: #294e42; color: #f8f8ec; }
.pd-accounting-tiles > div { display: grid; gap: 6px; padding-left: 17px; border-left: 1px solid #63806b; }
.pd-accounting-tiles > div:first-child { border: 0; padding: 0; }
.pd-accounting-tiles strong { font-family: var(--ff-display); font-size: 18px; font-weight: 500; }
.pd-accounting-tiles span { color: #b0c3ad; font-size: 9px; }
.pd-pet { --pd-ink: #443a36; --pd-accent: #42637b; --pd-soft: #e3eaf0; background: #e8d7b4; }
.pd-pet-site { height: 100%; background: #fff8e9; }
.pd-pet-site > header { display: flex; align-items: center; justify-content: space-between; height: 53px; padding: 0 22px; }
.pd-pet-site > header > strong { color: #486a7c; font-size: 18px; font-weight: 800; letter-spacing: -.03em; }
.pd-pet-site nav { color: #a19683; font-size: 9px; }
.pd-pet-hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 18px; align-items: center; padding: 11px 22px 22px; }
.pd-pet-hero small { color: #bc915d; font-size: 8px; letter-spacing: .09em; }
.pd-pet-hero h4 { margin: 12px 0; font-family: var(--ff-body); font-size: 32px; font-weight: 700; letter-spacing: -.04em; }
.pd-pet-hero p { max-width: 33ch; color: #968577; font-size: 10px; line-height: 1.5; }
.pd-pet-hero .pd-button { margin-top: 16px; border-radius: 22px; font-size: 10px; }
.pd-pet-photo { aspect-ratio: 11 / 10; overflow: hidden; border-radius: 45% 45% 10px 10px; background: #e2bd7f; }
.pd-pet-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; margin: 0 22px; padding: 18px; border-radius: 9px; background: #e7edf0; }
.pd-pet-tiles > div { display: grid; gap: 4px; }
.pd-pet-tiles strong { color: #486a7c; font-size: 12px; }
.pd-pet-tiles span { color: #8e9ba2; font-size: 8px; }
.pd-portal { background: #d8e1d3; }
.pd-portal .pd-browser { top: 31px; left: 27px; width: 746px; height: 458px; }
.pd-portal-app { height: 100%; background: #f7f9f2; }
.pd-portal-layout { display: grid; grid-template-columns: 144px 1fr; height: calc(100% - 49px); }
.pd-portal-layout > aside { padding: 19px 12px; border-right: 1px solid #e1e7d9; background: #fffef9; }
.pd-portal-layout > aside > small { display: block; padding: 0 8px 16px; color: #94a085; font-size: 9px; }
.pd-portal-layout > aside > div { display: flex; align-items: center; gap: 9px; margin-bottom: 5px; padding: 10px 8px; border-radius: 6px; color: #8a997a; font-size: 10px; }
.pd-portal-layout > aside svg { width: 14px; height: 14px; }
.pd-portal-layout > aside .is-current { background: #e7eeda; color: #52713a; font-weight: 600; }
.pd-portal-layout main { padding: 17px; }
.pd-portal-heading { display: flex; justify-content: space-between; align-items: start; gap: 10px; }
.pd-portal-heading h4 { font-size: 25px; }
.pd-portal-heading p { margin-top: 8px; font-size: 10px; color: #8d9d7e; }
.pd-portal-heading .pd-pill { flex-shrink: 0; padding: 7px 9px; border-radius: 7px; }
.pd-portal-heading .pd-pill small { display: block; margin-bottom: 3px; font-size: 7px; font-weight: 400; }
.pd-portal-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin: 14px 0 12px; }
.pd-portal-cards section { position: relative; padding: 10px; border: 1px solid #dde6d3; border-radius: 9px; background: #fff; }
.pd-portal-cards small { display: block; margin-bottom: 9px; color: #96a588; font-size: 9px; }
.pd-portal-cards strong { display: block; font-size: 11px; line-height: 1.5; }
.pd-portal-cards svg { width: 16px; height: 16px; margin-bottom: 5px; color: #92a27c; }
.pd-portal-cards .pd-button { margin-top: 8px; padding: 6px 11px; font-size: 9px; }
.pd-portal-update { display: grid; grid-template-columns: 1.5fr 1fr; align-items: center; gap: 13px; }
.pd-portal-update .pd-callout { padding: 15px; }
.pd-portal-update figure { margin: 0; }
.pd-portal-photo { aspect-ratio: 2 / 1; overflow: hidden; border: 1px solid #d4ddca; border-radius: 7px; background: #d2bc96; }
.pd-portal-update figcaption { margin-top: 5px; color: #9caa90; font-size: 8px; }

@media (max-width: 640px) {
  .example-stage .pd-quiz { padding: 0; }
  .example-stage .pd-quiz .pd-browser { border: 0; border-radius: 0; box-shadow: none; }
  .example-stage .pd-quiz .pd-browser-top { gap: 12px; }
  .example-stage .pd-quiz .pd-browser-tab { min-width: 0; font-size: 9px; }
  .example-stage .pd-quiz .pd-browser-tools { gap: 8px; }
  .example-stage .pd-quiz .pd-browser-tools > span { gap: 5px; }
  .example-stage .pd-quiz .pd-app-header { height: auto; flex-wrap: wrap; gap: 5px; padding: 16px 18px; }
  .example-stage .pd-quiz .pd-app-header > strong { width: 100%; font-size: 11px; }
  .example-stage .pd-quiz .pd-learning-layout { display: block; }
  .example-stage .pd-quiz .pd-lesson-outline { display: none; }
  .example-stage .pd-quiz .pd-quiz-main { padding: 20px 18px 36px; }
  .example-stage .pd-quiz .pd-quiz-main h4 { font-size: 28px; }
  .example-stage .pd-quiz .pd-quiz-main > p { font-size: 14px; }
  .example-stage .pd-quiz .pd-quiz-answers button { padding: 14px; }
  .example-dialog { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); border-radius: 8px; }
  .example-dialog-head { padding: 1rem; align-items: start; gap: .7rem; }
  .example-dialog-head .kicker { font-size: .55rem; }
  .example-close { font-size: 0; padding: .5rem .7rem; gap: 0; }
  .example-dialog-scroll { padding: 1rem; }
  .example-gallery-note { font-size: .8rem; }
  .example-choices { gap: .4rem; }
  .example-choices button { font-size: .75rem; padding: .5rem .65rem; }
  .example-caption h3 { font-size: 1.25rem; }
  .example-stage .sample-head { padding: 15px 18px; flex-wrap: wrap; gap: 6px 16px; }
  .example-stage .sample-head > span { font-size: 11px; }
  .example-stage .sample-body { padding: 20px 18px; }
  .example-stage .sample h4 { font-size: 28px; }
  .example-stage .sample p { font-size: 14px; }
  .example-stage .sample-two { grid-template-columns: 1fr; gap: 12px; }
  .example-stage .sample-line { flex-direction: column; gap: 3px; font-size: 13px; }
  .example-stage .sample-line > strong { text-align: left; }
  .example-stage .sample-message { max-width: 94%; }
  .example-stage .sample-agenda > div { grid-template-columns: 37px 1fr; gap: 8px; }
  .example-stage .sample-agenda > div > span { flex-direction: column; align-items: start; gap: 2px; padding: 9px 10px; }
  .example-stage .sample-lesson-box { margin-bottom: 3px; padding: 16px; }
  .example-stage .sample-lesson-box p { font-size: 21px; }
  .example-stage .sample-note { margin-top: 12px; }
  .example-stage .sample-social { grid-template-columns: 1fr; }
  .example-stage .sample-social-art { padding: 24px; }
  .example-stage .sample-social-art h4 { font-size: 36px; }
  .example-stage .sample-social-copy { padding: 22px; }
  .example-stage .sample-site-hero { grid-template-columns: 1fr; gap: 14px; padding: 24px 20px; }
  .example-stage .sample-site-hero h4 { font-size: 38px; }
  .example-stage .sample-art svg { max-height: 225px; }
  .example-stage .site-cafe .sample-art { order: 0; }
  .example-stage .sample-service-strip { grid-template-columns: 1fr; padding: 20px; gap: 16px; }
}
@keyframes example-appear { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .example-cover > * { animation: none; } }