/* BDAW WP Product Demo — presentation. Colors are tokens; a product's package
   supplies its own through Content Sync (printed after this file). The values
   below are the theme's neutral fallback. */

/* ---------------------------------------------------------------- tokens */
:root, :root[data-mode="light"], .pd-phone[data-mode="light"], .pd-force-light {
  --pd-bg: #F3F4F6; --pd-surface: #FFFFFF; --pd-ink: #111318; --pd-muted: #5E6470; --pd-line: #E2E4E9;
  --pd-accent: #3B5BDB; --pd-accent-ink: #FFFFFF; --pd-success: #1E7A44; --pd-waiting: #8F5E00; --pd-danger: #C0392B;
  --pd-wheel-a: #3B5BDB; --pd-wheel-b: #D9DCE2;
  color-scheme: light;
}
:root[data-mode="dark"], .pd-phone[data-mode="dark"], .pd-force-dark {
  --pd-bg: #0B0C0F; --pd-surface: #18191D; --pd-ink: #F2F3F5; --pd-muted: #9AA0AC; --pd-line: #2B2D33;
  --pd-accent: #6F8BFF; --pd-accent-ink: #0B0C0F; --pd-success: #45A873; --pd-waiting: #D9A43B; --pd-danger: #E5544A;
  --pd-wheel-a: #6F8BFF; --pd-wheel-b: #2B2D33;
  color-scheme: dark;
}
:root[data-mode="dark"] .pd-phone[data-mode="light"] { color-scheme: light; }
:root { --pd-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        --pd-mono: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace; --pd-radius: 12px; }

/* ---------------------------------------------------------------- site */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--pd-bg); color: var(--pd-ink); font: 1rem/1.5 var(--pd-font); }
a { color: var(--pd-accent); }
:focus-visible { outline: 2px solid var(--pd-accent); outline-offset: 2px; border-radius: 4px; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap; }
.pd-skip { position: absolute; left: 12px; top: -60px; background: var(--pd-surface); color: var(--pd-ink); padding: 8px 12px; border-radius: 8px; z-index: 50; }
.pd-skip:focus { top: 12px; }
/* The WordPress toolbar, for signed-in users who have it on: the header sits just below it. */
.admin-bar .pd-site { top: var(--wp-admin--admin-bar--height, 32px); }
.admin-bar .pd-skip:focus { top: calc(var(--wp-admin--admin-bar--height, 32px) + 12px); }
@media screen and (max-width: 600px) { .admin-bar .pd-site { top: 0; } } /* the toolbar scrolls away there */
main:focus { outline: none; }

.pd-site { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--pd-bg) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--pd-line); }
.pd-site-in { max-width: 1240px; margin: 0 auto; padding: 10px 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.pd-brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--pd-ink); text-decoration: none; font-size: 1.02rem; letter-spacing: -.01em; }
.pd-sitenav { flex: 1 1 auto; min-width: 0; }
.pd-sitenav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 2px 4px; }
.pd-sitenav a { display: block; padding: 6px 9px; border-radius: 8px; color: var(--pd-muted); text-decoration: none; font-size: .9rem; }
.pd-sitenav a:hover { color: var(--pd-ink); background: var(--pd-surface); }
.pd-sitenav a[aria-current="page"] { color: var(--pd-ink); background: var(--pd-surface); box-shadow: inset 0 -2px 0 var(--pd-accent); }
.pd-menu { display: none; }
.pd-switches { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-left: auto; }
.pd-appearance { display: inline-flex; background: var(--pd-line); border-radius: 9px; padding: 2px; }
.pd-appearance button { border: 0; background: transparent; color: var(--pd-muted); font: inherit; font-size: .82rem; padding: 5px 10px; border-radius: 7px; cursor: pointer; }
.pd-appearance button[aria-pressed="true"] { background: var(--pd-surface); color: var(--pd-ink); font-weight: 600; box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.pd-reviewswitch { font: .78rem/1 var(--pd-mono); letter-spacing: .02em; border: 1px dashed var(--pd-muted); background: transparent; color: var(--pd-muted); padding: 7px 10px; border-radius: 8px; cursor: pointer; }
.pd-reviewswitch[aria-pressed="true"] { color: var(--pd-ink); }

.pd-wrap { max-width: 1240px; margin: 0 auto; padding: 28px 20px 64px; }
.pd-plain { max-width: 760px; }
.pd-h1 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); line-height: 1.1; letter-spacing: -.02em; margin: 0 0 10px; }
.pd-display { font-size: clamp(2.2rem, 5vw, 3.6rem); }
.pd-h2 { font-size: 1.2rem; margin: 0 0 8px; letter-spacing: -.01em; }
.pd-lead { font-size: 1.1rem; color: var(--pd-muted); max-width: 60ch; margin: 0 0 18px; }
.pd-pagehead { margin: 0 0 22px; }
.pd-kicker { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--pd-muted); margin: 0 0 8px; }
.pd-statement { font-size: clamp(1.35rem, 2.6vw, 1.9rem); font-weight: 600; line-height: 1.25; margin: 0 0 14px; max-width: 24ch; }
.pd-empty { padding: 18px; border: 1px dashed var(--pd-muted); border-radius: var(--pd-radius); color: var(--pd-muted); }
/* A page that cannot be drawn, as an editor sees it. */
.pd-diag { margin: 0 0 20px; padding: 14px 18px; border: 2px solid #d63638; border-radius: var(--pd-radius); background: var(--pd-surface); color: var(--pd-ink); }
.pd-diag p { margin: 6px 0; }
.pd-diag-h { font-weight: 700; color: #d63638; }
.pd-diag-v { font-size: .85rem; color: var(--pd-muted); }
:root[data-mode="dark"] .pd-diag, :root[data-mode="dark"] .pd-diag-h { border-color: #ff8085; color: var(--pd-ink); }
:root[data-mode="dark"] .pd-diag-h { color: #ff8085; }
.pd-foot { border-top: 1px solid var(--pd-line); color: var(--pd-muted); font-size: .85rem; margin-top: 24px; }
.pd-foot .pd-site-in { justify-content: space-between; align-items: flex-start; padding-top: 20px; padding-bottom: 28px; }
.pd-footnav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; }
.pd-footnav a { color: var(--pd-ink); text-decoration: none; }
.pd-footnav a:hover { text-decoration: underline; }
.pd-footlines { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.pd-legal { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 10px 0 0; }
.pd-legal a { color: inherit; }
.pd-footstaff { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px 18px; padding-top: 10px; border-top: 1px dashed var(--pd-line); }
.pd-versions { font-family: var(--pd-mono); }

/* landing */
.pd-landing { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 32px; align-items: center; }
.pd-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.pd-cta { display: inline-flex; align-items: center; gap: 8px; padding: 11px 16px; border-radius: 11px; border: 1px solid var(--pd-line); background: var(--pd-surface); color: var(--pd-ink); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; }
.pd-cta.is-primary { background: var(--pd-accent); color: var(--pd-accent-ink); border-color: transparent; }
.pd-cta-now { font-weight: 400; color: var(--pd-muted); font-size: .85rem; }
.pd-landing-phone { display: flex; justify-content: center; }

/* steps */
.pd-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 22px; }
.pd-step { background: var(--pd-surface); border: 1px solid var(--pd-line); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.pd-step-copy p { margin: 0; color: var(--pd-muted); }
.pd-step-n { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--pd-accent); color: var(--pd-accent-ink); font-weight: 700; font-size: .9rem; margin-bottom: 8px; }
.pd-scale { display: flex; justify-content: center; }
.pd-scale.is-small .pd-phone { zoom: .72; }
@supports not (zoom: 1) { .pd-scale.is-small .pd-phone { transform: scale(.72); transform-origin: top center; margin-bottom: -190px; } }

/* stage: walkthrough and flow */
.pd-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 16px; }
.pd-ctl { font: inherit; font-size: .92rem; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--pd-line); background: var(--pd-surface); color: var(--pd-ink); cursor: pointer; }
.pd-ctl:disabled { opacity: .45; cursor: default; }
.pd-ctl-select select { font: inherit; font-size: .92rem; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--pd-line); background: var(--pd-surface); color: var(--pd-ink); max-width: 100%; }
.pd-ctl-count { color: var(--pd-muted); font-size: .9rem; }
.pd-stage-body { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 28px; align-items: start; }
.pd-stage-phone { display: flex; justify-content: center; }
.pd-stage .pd-phone, .pd-compare { scroll-margin-top: 130px; }
.pd-flowside { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.pd-steplist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 6px; }
.pd-steplist button { width: 100%; text-align: left; font: inherit; font-size: .9rem; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--pd-line); background: var(--pd-surface); color: var(--pd-ink); cursor: pointer; }
.pd-steplist button[aria-current="step"] { border-color: var(--pd-accent); box-shadow: inset 3px 0 0 var(--pd-accent); font-weight: 600; }
.pd-steplist .n { display: inline-block; min-width: 1.6em; color: var(--pd-muted); font-variant-numeric: tabular-nums; }
.pd-notice { margin: 0; padding: 12px 14px; border-radius: var(--pd-radius); border: 1px solid var(--pd-line); background: var(--pd-surface); color: var(--pd-muted); font-size: .92rem; }

/* review controls — outside the phone, and plainly not the app */
.pd-review { border: 1px dashed var(--pd-muted); border-radius: var(--pd-radius); padding: 14px 16px; font: .86rem/1.45 var(--pd-mono); color: var(--pd-ink); background: repeating-linear-gradient(135deg, transparent 0 10px, color-mix(in srgb, var(--pd-line) 45%, transparent) 10px 11px); min-width: 0; }
.pd-review.is-inline { margin-top: 18px; }
.pd-review-tag { display: inline-block; margin: 0 0 8px; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--pd-muted); border: 1px solid var(--pd-muted); border-radius: 4px; padding: 1px 6px; }
.pd-rv-title { margin: 0 0 8px; }
.pd-rv-line { margin: 0 0 6px; }
.pd-rv-k { color: var(--pd-muted); margin-right: 6px; }
.pd-rv-notes { margin: 6px 0 8px; padding-left: 18px; }
.pd-rv-notes li { margin: 0 0 4px; }
.pd-rv-states { margin: 0 0 8px; }
.pd-rv-seg { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.pd-rv-seg button { font: inherit; font-size: .8rem; padding: 5px 8px; border-radius: 7px; border: 1px dashed var(--pd-muted); background: var(--pd-surface); color: var(--pd-ink); cursor: pointer; }
.pd-rv-seg button[aria-pressed="true"] { border-style: solid; border-color: var(--pd-accent); font-weight: 700; }
.pd-rv-chip { display: inline-block; font: .72rem/1.3 var(--pd-mono); letter-spacing: .04em; padding: 1px 7px; border-radius: 999px; border: 1px dashed currentColor; color: var(--pd-muted); vertical-align: middle; }
.pd-rv-chip.is-ruled { color: var(--pd-success); }
.pd-rv-chip.is-placeholder { color: var(--pd-waiting); }
.pd-rv-chip.is-demo { color: var(--pd-accent); }
:root[data-review="off"] [data-review-only] { display: none !important; }

/* compare */
.pd-compare { padding: 18px 0 26px; border-top: 1px solid var(--pd-line); }
.pd-pair { display: flex; flex-wrap: wrap; gap: 22px; justify-content: center; }
.pd-figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.pd-figure figcaption { font-size: .85rem; color: var(--pd-muted); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }

/* feature */
.pd-feature { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 32px; align-items: start; }
.pd-feature-phones { display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; }
.pd-points { margin: 0 0 14px; padding-left: 20px; font-size: 1.02rem; }
.pd-points li { margin: 0 0 8px; }
.pd-points li.is-placeholder { color: var(--pd-muted); }
.pd-where { color: var(--pd-muted); font-size: .9rem; }
.pd-faces { display: flex; flex-wrap: wrap; gap: 16px; margin: 0 0 18px; }
.pd-face-fig { margin: 0; width: 240px; max-width: 100%; }
.pd-face-fig figcaption { font-size: .85rem; color: var(--pd-muted); margin-top: 6px; font-weight: 600; }

/* review page */
.pd-reviewpage { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 24px 32px; }
.pd-reviewpage section { min-width: 0; }
.pd-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.pd-table th, .pd-table td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--pd-line); vertical-align: top; }
.pd-table th { color: var(--pd-muted); font-weight: 600; width: 40%; }
.pd-reviewpage code { font-family: var(--pd-mono); font-size: .82rem; word-break: break-all; }

/* ---------------------------------------------------------------- public pages */
.pd-navcta { background: var(--pd-accent) !important; color: var(--pd-accent-ink) !important; font-weight: 600; }
.pd-navcta:hover { filter: brightness(1.08); }
.pd-navcta[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--pd-accent-ink) !important; }
.pd-demobar { border-top: 1px solid var(--pd-line); background: var(--pd-surface); }
.pd-demobar ul { list-style: none; margin: 0 auto; padding-top: 6px; padding-bottom: 6px; gap: 2px 4px; }
.pd-demobar li { display: inline-flex; }
.pd-demobar a { display: block; padding: 5px 9px; border-radius: 8px; color: var(--pd-muted); text-decoration: none; font-size: .86rem; }
.pd-demobar a:hover { color: var(--pd-ink); background: var(--pd-bg); }
.pd-demobar a[aria-current="page"] { color: var(--pd-ink); background: var(--pd-bg); box-shadow: inset 0 -2px 0 var(--pd-accent); }
.pd-wrap-public, .pd-wrap-access { max-width: 1120px; }
.pd-sections { display: flex; flex-direction: column; gap: 44px; }
.pd-sec { min-width: 0; }
.pd-sec > p, .pd-sec-text p, .pd-sec-company p { max-width: 68ch; margin: 0 0 12px; }
.pd-sec .pd-points { max-width: 68ch; }
.pd-h3 { font-size: 1.05rem; margin: 0 0 6px; letter-spacing: -.005em; }
.pd-sec-hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: center; padding: 20px 0 8px; }
.pd-sec-hero.has-phone { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
.pd-sec-hero .pd-display { max-width: 18ch; margin-bottom: 18px; }
.pd-sec-hero .pd-lead { margin-bottom: 10px; }
.pd-sec-hero .pd-actions { margin-top: 18px; }
.pd-hero-phone { display: flex; justify-content: center; }
.pd-sec-text:first-child .pd-h2 { margin-top: 0; }
.pd-highlights { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.pd-highlight { background: var(--pd-surface); border: 1px solid var(--pd-line); border-radius: 16px; padding: 18px; }
.pd-highlight p { margin: 0; color: var(--pd-muted); }
.pd-numbered { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.pd-numbered-item { display: flex; gap: 12px; align-items: flex-start; background: var(--pd-surface); border: 1px solid var(--pd-line); border-radius: 16px; padding: 16px; }
.pd-numbered-item .pd-step-n { flex: none; margin: 0; }
.pd-numbered-item p { margin: 0; color: var(--pd-muted); }
.pd-screens { display: flex; gap: 16px; justify-content: space-between; overflow-x: auto; padding: 4px 0 12px; scroll-snap-type: x proximity; }
.pd-screen-fig { margin: 0; flex: none; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.pd-screen-fig .pd-phone { zoom: .58; }
@supports not (zoom: 1) { .pd-screen-fig .pd-phone { transform: scale(.58); transform-origin: top center; margin-bottom: -290px; } }
.pd-screen-fig figcaption { font-size: .88rem; font-weight: 600; color: var(--pd-muted); }
.pd-sec-caption { font-size: .85rem; color: var(--pd-muted); margin: 8px 0 12px; }
.pd-sec-cta { background: var(--pd-surface); border: 1px solid var(--pd-line); border-radius: 20px; padding: 26px 24px; }
.pd-sec-cta .pd-h2 { font-size: 1.4rem; }
.pd-sec-cta p { color: var(--pd-muted); }
.pd-sec-company { border-left: 3px solid var(--pd-accent); padding-left: 16px; }
.pd-linkcards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.pd-linkcard { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 16px; border-radius: 14px; border: 1px solid var(--pd-line); background: var(--pd-surface); color: var(--pd-ink); text-decoration: none; }
.pd-linkcard:hover { border-color: var(--pd-accent); }
.pd-linkcard span { color: var(--pd-muted); font-size: .92rem; }
.pd-preview { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.pd-preview-bar { display: flex; flex-direction: column; gap: 10px; align-items: center; width: 100%; }
.pd-pager { display: grid; grid-template-columns: 1fr minmax(0, auto) 1fr; align-items: center; gap: 10px; width: 330px; max-width: 100%; }
.pd-pager .pd-ctl { white-space: nowrap; }
.pd-pager .pd-pager-prev { justify-self: start; }
.pd-pager .pd-pager-next { justify-self: end; }
.pd-pager .pd-pager-mid { justify-self: center; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; min-width: 0; max-width: 100%; }
.pd-pager .pd-ctl-select { min-width: 0; flex: 0 1 auto; }
.pd-stage > .pd-pager { width: 100%; max-width: 560px; }
.pd-pager .pd-ctl-select select { width: 100%; max-width: 220px; min-width: 0; text-overflow: ellipsis; }
.pd-fld-check label { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.pd-fld-check input { width: 18px; height: 18px; accent-color: var(--pd-accent); }
.pd-demobar-note { margin-left: auto; font-size: .8rem; color: var(--pd-muted); padding: 5px 9px; }
.pd-endsession { margin-left: auto; position: relative; }
.pd-endsession summary { list-style: none; cursor: pointer; padding: 5px 10px; border-radius: 8px; font-size: .86rem; color: var(--pd-ink); border: 1px solid var(--pd-line); background: var(--pd-bg); }
.pd-endsession summary::-webkit-details-marker { display: none; }
.pd-endpanel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; width: min(360px, 90vw); background: var(--pd-surface); border: 1px solid var(--pd-line); border-radius: 14px; padding: 14px 16px; box-shadow: 0 12px 30px -12px rgba(0,0,0,.35); }
.pd-endpanel p { margin: 0 0 8px; }
.pd-endpanel form { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.pd-preview .pd-controls { margin: 0; }
.pd-preview-title { margin: 2px 0 4px; font-size: 1.1rem; font-weight: 700; text-align: center; }
.pd-localmode button { font-size: .88rem; padding: 7px 12px; }
.pd-rv-pagemeta { margin: 0 0 14px; font: .78rem/1.4 var(--pd-mono); color: var(--pd-muted); }
.pd-review.is-visitor { background: var(--pd-surface); border-style: solid; border-color: var(--pd-line); font-family: var(--pd-font); font-size: .92rem; }
.pd-review.is-visitor .pd-review-tag { border: 0; padding: 0; letter-spacing: .08em; }

/* forms and notices */
.pd-access { max-width: 680px; }
.pd-form { max-width: 560px; display: flex; flex-direction: column; gap: 14px; margin: 8px 0 0; }
.pd-form .pd-h2 { margin: 18px 0 0; font-size: 1.35rem; }
.pd-form-lead { margin: 0; color: var(--pd-muted); }
.pd-fld { display: flex; flex-direction: column; gap: 6px; }
.pd-fld label { font-weight: 600; font-size: .95rem; }
.pd-opt { font-weight: 400; color: var(--pd-muted); font-size: .88rem; }
.pd-fld input, .pd-fld textarea, .pd-fld select { font: inherit; font-size: 1rem; padding: 11px 12px; border-radius: 11px; border: 1px solid var(--pd-line); background: var(--pd-surface); color: var(--pd-ink); width: 100%; }
.pd-fld textarea { resize: vertical; min-height: 110px; }
.pd-fld input:focus-visible, .pd-fld textarea:focus-visible, .pd-fld select:focus-visible { outline: 2px solid var(--pd-accent); outline-offset: 1px; }
.pd-fld.has-error input, .pd-fld.has-error textarea { border-color: var(--pd-danger); }
.pd-err { margin: 0; color: var(--pd-danger); font-size: .9rem; }
.pd-form-errors { margin: 0; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--pd-danger); color: var(--pd-danger); }
.pd-form-go { margin: 4px 0 0; }
.pd-form-go .pd-cta { font-size: 1rem; padding: 12px 20px; }
.pd-form-go .pd-cta[disabled] { opacity: .6; cursor: default; }
.pd-form-note { margin: 0; color: var(--pd-muted); font-size: .92rem; }
.pd-noticebox { margin: 4px 0 18px; padding: 18px 20px; border-radius: 16px; border: 1px solid var(--pd-line); border-left: 4px solid var(--pd-accent); background: var(--pd-surface); }
.pd-noticebox:focus { outline: none; }
.pd-noticebox:focus-visible { outline: 2px solid var(--pd-accent); outline-offset: 2px; }
.pd-noticebox-title { margin: 0 0 6px; font-size: 1.15rem; font-weight: 700; }
.pd-noticebox p { margin: 0 0 6px; }
.pd-noticebox p:last-child { margin-bottom: 0; }
.pd-noticebox .pd-cta { margin-top: 8px; }

/* ---------------------------------------------------------------- the phone */
.pd-phone { position: relative; width: 330px; max-width: 100%; height: 690px; flex: none; border: 9px solid #0b0b0b; border-radius: 42px; overflow: hidden;
  background: var(--pd-bg); color: var(--pd-ink); font: .9375rem/1.35 var(--pd-font); display: flex; flex-direction: column; text-align: left;
  box-shadow: 0 0 0 1px var(--pd-line), 0 18px 40px -18px rgba(0,0,0,.35); }
.pd-phone button { font: inherit; color: inherit; }
.pd-statusbar { height: 32px; flex: none; display: flex; justify-content: space-between; align-items: center; padding: 0 22px; font-weight: 600; font-size: .75rem; }
.pd-signal { display: inline-flex; align-items: flex-end; gap: 2px; }
.pd-signal i { width: 3px; background: currentColor; border-radius: 1px; }
.pd-signal i:nth-child(1) { height: 5px; } .pd-signal i:nth-child(2) { height: 7px; } .pd-signal i:nth-child(3) { height: 9px; }
.pd-signal b { width: 18px; height: 9px; margin-left: 5px; border: 1.5px solid currentColor; border-radius: 3px; }
.pd-body { flex: 1; overflow-x: hidden; overflow-y: auto; padding: 0 14px 12px; scrollbar-width: none; }
.pd-body::-webkit-scrollbar { display: none; }

.pd-nav { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 30px; margin: 2px 2px 4px; font-size: .9375rem; }
.pd-nav .c { flex: 1; text-align: center; font-weight: 600; }
.pd-nav .l, .pd-nav .r { min-width: 56px; } .pd-nav .r { text-align: right; }
.pd-nav .is-link, .pd-phone .pd-navbtn { color: var(--pd-accent); }
.pd-phone .pd-navbtn.tone-muted { color: var(--pd-muted); }
.pd-navbtn { background: none; border: 0; padding: 4px 0; cursor: pointer; text-align: left; }
.pd-navbtn.r { text-align: right; }
.pd-title { font-size: 1.8rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.12; margin: 6px 4px 10px; }
.pd-subtitle { color: var(--pd-muted); font-size: .9375rem; margin: -2px 4px 12px; }
.pd-caption { color: var(--pd-muted); font-size: .8125rem; margin: 0 4px 10px; }
.pd-header { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--pd-muted); margin: 12px 14px 6px; }
.is-center { text-align: center; }
.pd-spacer.is-sm { height: 8px; } .pd-spacer.is-md { height: 22px; } .pd-spacer.is-lg { height: 60px; } .pd-spacer.is-xl { height: 110px; }
.pd-markrow { margin: 4px 0 8px; } .pd-markrow.is-center { display: flex; justify-content: center; }
.pd-mark { display: inline-flex; width: var(--mark, 32px); height: var(--mark, 32px); color: var(--pd-accent); }
.pd-mark svg { width: 100%; height: 100%; }
.pd-mark.tone-success { color: var(--pd-success); }

.pd-btn { display: block; width: 100%; text-align: center; border-radius: 12px; padding: 12px; font-weight: 600; margin: 0 0 9px; font-size: .9375rem; cursor: pointer; border: 1px solid transparent; }
.pd-btn--primary { background: var(--pd-accent); color: var(--pd-accent-ink) !important; }
.pd-btn--secondary { background: var(--pd-surface); color: var(--pd-accent) !important; border-color: var(--pd-line); }
.pd-btn--danger { background: var(--pd-danger); color: #fff !important; }
.pd-linkrow { margin: 0 0 10px; }
.pd-link { background: none; border: 0; padding: 2px 0; color: var(--pd-accent) !important; font-weight: 600; font-size: .875rem; cursor: pointer; }

.pd-hero { background: var(--pd-surface); border-radius: 14px; padding: 14px; margin: 0 0 12px; }
.pd-hero.is-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.pd-hero-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.pd-k { font-size: .75rem; color: var(--pd-muted); }
.pd-big { font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; line-height: 1.08; margin: 2px 0; }
.pd-big.is-md { font-size: 1.35rem; } .pd-big.is-lg { font-size: 2.1rem; } .pd-big.is-xl { font-size: 3.2rem; }

.pd-listhead { display: flex; justify-content: space-between; align-items: baseline; margin: 12px 14px 6px; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--pd-muted); }
.pd-listhead .pd-link { text-transform: none; letter-spacing: 0; }
.pd-group { background: var(--pd-surface); border-radius: 12px; margin: 0 0 12px; overflow: hidden; }
.pd-group.is-muted { opacity: .62; }
.pd-row { display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 14px; border: 0; border-top: 1px solid var(--pd-line); background: transparent; font-size: .9rem; text-align: left; color: inherit; }
.pd-group > .pd-row:first-child { border-top: 0; }
button.pd-row { cursor: pointer; }
.pd-row.is-selected { box-shadow: inset 3px 0 0 var(--pd-accent); }
.pd-row.is-muted .pd-row-label { color: var(--pd-muted); }
.pd-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pd-row-label.is-bold, .pd-row-value.is-bold { font-weight: 700; }
.pd-row-sub { color: var(--pd-muted); font-size: .75rem; margin-top: 1px; }
.pd-row-value { color: var(--pd-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pd-chev { color: var(--pd-muted); font-size: 1.1rem; line-height: 1; }
.pd-av { width: 26px; height: 26px; border-radius: 50%; background: var(--pd-line); display: inline-flex; align-items: center; justify-content: center; font-size: .65rem; font-weight: 700; color: var(--pd-muted); flex: none; }
.pd-bar { height: 8px; border-radius: 4px; background: var(--pd-line); overflow: hidden; margin: 6px 0 2px; }
.pd-bar b { display: block; height: 100%; background: var(--pd-accent); }
.pd-stepper { display: inline-flex; align-items: center; gap: 12px; color: var(--pd-muted); }
.pd-stepper b { color: var(--pd-ink); font-variant-numeric: tabular-nums; }
.pd-chip { font-size: .7rem; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--pd-line); color: var(--pd-muted); white-space: nowrap; }
.pd-chip.tone-accent { color: var(--pd-accent); border-color: var(--pd-accent); }
.pd-toggle { width: 42px; height: 25px; border-radius: 13px; background: var(--pd-line); position: relative; flex: none; }
.pd-toggle::after { content: ""; position: absolute; left: 2px; top: 2px; width: 21px; height: 21px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.pd-toggle.is-on { background: var(--pd-accent); } .pd-toggle.is-on::after { left: 19px; }

.tone-accent { color: var(--pd-accent) !important; } .tone-success { color: var(--pd-success) !important; }
.tone-waiting { color: var(--pd-waiting) !important; } .tone-danger { color: var(--pd-danger) !important; } .tone-muted { color: var(--pd-muted) !important; }

.pd-seg { display: flex; background: var(--pd-line); border-radius: 9px; padding: 2px; margin: 0 0 12px; }
.pd-seg-opt { flex: 1; border: 0; background: transparent; padding: 7px 4px; font-size: .8rem; border-radius: 7px; color: var(--pd-muted) !important; cursor: pointer; }
.pd-seg-opt.is-on { background: var(--pd-surface); color: var(--pd-ink) !important; font-weight: 600; }
.pd-note { background: var(--pd-surface); border-radius: 12px; padding: 12px 14px; margin: 0 0 12px; font-size: .9rem; }
.pd-cam { height: 220px; border-radius: 14px; background: #1b1c20; position: relative; margin: 0 0 12px; overflow: hidden; }
.pd-receipt { position: absolute; left: 62px; right: 62px; top: 16px; bottom: 16px; background: #f4f1e8; border-radius: 3px; padding: 10px 12px; font: .64rem/1.5 var(--pd-mono); color: #333; white-space: pre; overflow: hidden; text-transform: uppercase; }
.pd-frame { position: absolute; left: 52px; right: 52px; top: 8px; bottom: 8px; border: 2px solid var(--pd-accent); border-radius: 8px; }
.pd-code { background: #fff; border-radius: 14px; padding: 14px; width: 198px; margin: 0 auto 10px; }
.pd-code svg { display: block; width: 170px; height: 170px; }
.pd-map { height: 150px; border-radius: 12px; position: relative; margin: 0 0 12px; background: repeating-linear-gradient(0deg, var(--pd-line) 0 1px, transparent 1px 28px), repeating-linear-gradient(90deg, var(--pd-line) 0 1px, transparent 1px 28px), var(--pd-surface); }
.pd-map i { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: var(--pd-accent); border: 2px solid var(--pd-surface); }
.pd-moment { border-radius: 16px; padding: 18px; background: var(--pd-surface); border: 1px solid var(--pd-line); text-align: center; margin: 8px 0 14px; }
.pd-moment .pd-caption { margin: 0; }
.pd-line { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 0 4px 8px; font-size: .8125rem; color: var(--pd-muted); }
.pd-line .v { color: var(--pd-ink); font-variant-numeric: tabular-nums; }
.pd-line .v.is-bold { font-weight: 600; }
.pd-line.is-boxed { background: var(--pd-surface); border-radius: 14px; padding: 14px; font-size: .9375rem; color: var(--pd-ink); margin: 0 0 12px; }
.pd-line.is-boxed .v { font-weight: 700; }
.pd-mine { text-align: center; margin: 0 0 10px; }
.pd-mine .pd-caption { margin: 0; }

.pd-cardface { display: block; position: relative; height: 178px; border-radius: 14px; background: var(--pd-face, linear-gradient(135deg, #cfd2d8, #8f959e)); color: var(--pd-face-ink, #111); padding: 16px; margin: 4px 0 14px; overflow: hidden; }
.pd-face-fig .pd-cardface { height: 150px; margin: 0; }
.pd-cardface .nm { display: block; font-weight: 700; letter-spacing: .04em; font-size: .9rem; }
.pd-cardface .chipface { position: absolute; left: 16px; top: 58px; width: 36px; height: 27px; border-radius: 5px; background: linear-gradient(135deg, #e8d9a8, #b99a4f); }
.pd-cardface .no { position: absolute; left: 16px; bottom: 34px; font-size: .85rem; letter-spacing: .14em; font-variant-numeric: tabular-nums; }
.pd-cardface .ho { position: absolute; left: 16px; bottom: 14px; font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; }
.pd-cardface .mk { position: absolute; right: 14px; bottom: 12px; }
.pd-cardface .pd-mark { color: currentColor; }

/* tabs */
.pd-tabs { height: 54px; flex: none; border-top: 1px solid var(--pd-line); display: flex; justify-content: space-around; align-items: center; font-size: .625rem; color: var(--pd-muted); background: var(--pd-surface); }
.pd-tab { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.pd-tab::before { content: ""; width: 18px; height: 18px; border-radius: 5px; border: 1.6px solid currentColor; }
.pd-tab.is-on { color: var(--pd-accent); font-weight: 600; }
.pd-tab.is-on::before { background: color-mix(in srgb, var(--pd-accent) 18%, transparent); }

/* wheel */
.pd-wheelwrap { position: relative; width: var(--wheel, 200px); height: var(--wheel, 200px); margin: 4px auto 6px; touch-action: none; }
.pd-wheel-rot { width: 100%; height: 100%; transition: transform 1.6s cubic-bezier(.17,.84,.24,1); }
.pd-wheel-rot svg, .pd-pointer { display: block; width: 100%; height: 100%; }
.pd-pointer { position: absolute; inset: 0; pointer-events: none; }
.pd-pointer path { fill: var(--pd-ink); }
.pd-wheel-rot .a { fill: var(--pd-wheel-a); } .pd-wheel-rot .b { fill: var(--pd-wheel-b); } .pd-wheel-rot .hole { fill: var(--pd-bg); }
.pd-wheelwrap.is-idle .pd-wheel-rot svg { animation: pd-idle 14s linear infinite; }
.pd-wheelwrap.is-spinning .pd-wheel-rot svg { animation: none; }
@keyframes pd-idle { from { transform: rotate(0); } to { transform: rotate(360deg); } }
.pd-spinbtn { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 39%; aspect-ratio: 1; border-radius: 50%; border: 0; background: var(--pd-accent); color: var(--pd-accent-ink) !important; font-weight: 700; font-size: 1.05rem; cursor: pointer; box-shadow: 0 0 0 6px color-mix(in srgb, var(--pd-accent) 22%, transparent); }
.pd-wheelwrap.is-spinning .pd-spinbtn { opacity: .6; }

/* dialogs — inside the phone */
.pd-layer { position: absolute; inset: 0; z-index: 5; display: flex; align-items: flex-end; }
.pd-layer[hidden] { display: none; }
.pd-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.45); }
.pd-dialog { position: relative; width: 100%; background: var(--pd-surface); color: var(--pd-ink); border-radius: 18px 18px 0 0; padding: 18px 16px 16px; box-shadow: 0 -8px 30px rgba(0,0,0,.25); max-height: 86%; overflow: auto; }
.pd-dialog:focus { outline: none; }
.pd-dialog-title { font-size: 1.1rem; font-weight: 700; margin: 0 0 6px; }
.pd-dialog-body { color: var(--pd-muted); font-size: .875rem; margin: 0 0 12px; }
.pd-field { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--pd-line); font-size: .9rem; }
.pd-field input { width: 120px; font: inherit; text-align: right; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--pd-line); background: var(--pd-bg); color: var(--pd-ink); font-variant-numeric: tabular-nums; }
.pd-options { display: flex; flex-direction: column; margin: 0 0 12px; border-radius: 12px; overflow: hidden; border: 1px solid var(--pd-line); }
.pd-option { display: flex; justify-content: space-between; align-items: center; padding: 11px 14px; border: 0; border-top: 1px solid var(--pd-line); background: transparent; text-align: left; cursor: pointer; font-size: .9rem; }
.pd-option:first-child { border-top: 0; }
.pd-opt-mark { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--pd-line); flex: none; }
.pd-option.is-on .pd-opt-mark { border-color: var(--pd-accent); background: radial-gradient(circle, var(--pd-accent) 0 4px, transparent 5px); }
.pd-option.is-on { font-weight: 600; }
.pd-dialog-actions { display: flex; gap: 8px; }
.pd-dialog-actions .pd-btn { margin: 0; }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 980px) {
  .pd-landing, .pd-feature, .pd-stage-body, .pd-sec-hero.has-phone { grid-template-columns: minmax(0, 1fr); }
  .pd-stage-phone, .pd-feature-phones { justify-content: center; }
}
@media (max-width: 760px) {
  .pd-site { position: static; }
  .pd-brand { flex: 1 1 auto; }
  .pd-menu { display: inline-block; font: inherit; font-size: .9rem; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--pd-line); background: var(--pd-surface); color: var(--pd-ink); }
  .pd-site-in { position: relative; }
  .pd-sitenav { order: 2; flex: 0 0 auto; }
  .js .pd-sitenav ul { display: none; }
  .js .pd-sitenav.is-open ul { display: flex; flex-direction: column; position: absolute; left: 0; right: 0; top: 100%; z-index: 30; background: var(--pd-bg); padding: 6px 16px 12px; border-bottom: 1px solid var(--pd-line); box-shadow: 0 12px 24px -12px rgba(0,0,0,.3); }
  .pd-switches { order: 3; flex-basis: 100%; margin-left: 0; justify-content: space-between; }
  .pd-wrap { padding: 20px 16px 48px; }
  .pd-site-in { padding: 10px 16px; }
  .pd-sections { gap: 34px; }
  .pd-sec-cta { padding: 20px 16px; }
  .pd-demobar ul { padding-left: 12px; padding-right: 12px; }
  .pd-actions .pd-cta { flex: 1 1 auto; justify-content: center; }
}
@media (max-width: 380px) {
  .pd-phone { width: 100%; height: 640px; border-width: 7px; border-radius: 34px; }
}

/* ---------------------------------------------------------------- motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .pd-wheelwrap.is-idle .pd-wheel-rot svg { animation: none !important; }
}
@media print { .pd-site, .pd-controls, .pd-review, .pd-foot, .pd-preview-bar, .pd-form { display: none; } .pd-phone { break-inside: avoid; } }