/* ===== Site-wide rules moved from workspace.css (header, menu, dialogs, base reset). The chat-only rules now live in frontend static/css/quote-builder.css. ===== */
*{box-sizing:border-box}
html{background:#f7f7f4;color:#121820}
body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit}
button:disabled{opacity:.5;cursor:not-allowed}
.skipLink{position:fixed;left:16px;top:12px;z-index:1000;padding:10px 14px;border-radius:10px;background:#121820;color:#fff;transform:translateY(-180%);transition:transform .12s ease}
.skipLink:focus{transform:translateY(0)}
:where(a,button,input,textarea,select):focus-visible{outline:3px solid currentColor;outline-offset:3px}
:where(button,input,textarea,select){min-height:44px}
.ppTop{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:220px 1fr 360px;align-items:center;gap:16px}
.ppLogo{font-size:32px;font-weight:900;letter-spacing:-.06em}
.ppLogo span{color:#1d4ed8}
.ppTop h1{margin:0;text-align:center;font-size:26px;line-height:1;font-weight:600;letter-spacing:-.035em}
.ppTop h1 em{font-style:normal;color:#1d4ed8}
.ppTop nav{display:flex;justify-content:flex-end;gap:18px;font-size:14px;font-weight:700;color:#475569}
.ppMenu,.ppTodoPicker,.ppTask .ppRowBadge,.ppTop nav [data-pp-todos],.ppTop nav [data-pp-cookies],.ppRailToggle{display:none}
@media(min-width:768px) and (max-width:1279px){.ppTop{grid-template-columns:auto 1fr auto}.ppTop h1{display:none}}
@media(max-width:767px){.ppTop{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 14px;min-height:52px;position:relative;background:#fff;border-bottom:1px solid #e5e7eb;text-align:left}.ppTop h1,.ppHero{display:none}.ppLogo{font-size:24px}.ppMenu{display:inline-grid;place-items:center;width:40px;height:40px;border:1px solid #dbe3ef;border-radius:10px;background:#fff;color:#111827;cursor:pointer;padding:0}.ppMenu span{display:block;width:18px;height:2px;background:currentColor;border-radius:2px;box-shadow:0 -6px 0 currentColor,0 6px 0 currentColor}.ppTop nav{display:none;position:absolute;top:100%;right:10px;left:10px;z-index:40;flex-direction:column;align-items:stretch;gap:0;background:#fff;border:1px solid #e5e7eb;border-radius:14px;box-shadow:0 18px 40px rgba(15,23,42,.14);padding:6px;font-size:15px}.ppTop.ppMenuOpen nav{display:flex}.ppTop nav a{padding:12px 14px;border-radius:9px;color:#111827;text-decoration:none}.ppTop nav a:hover{background:#f1f5f9}.ppTop nav a[data-pp-todos]{display:block;color:#1d4ed8;border-bottom:1px solid #edf1f6;border-radius:9px 9px 0 0;margin-bottom:4px}.ppTop nav a[data-pp-cookies]{display:block;color:#64748b;font-size:13px;border-top:1px solid #edf1f6;border-radius:0 0 9px 9px;margin-top:4px}.ppError:empty{display:none!important}.ppError:not([hidden]){position:fixed;left:12px;right:12px;top:calc(var(--ppHeadH,53px) + 8px);z-index:35;margin:0;background:#fee2e2;color:#991b1b;border:1px solid #fecaca;border-radius:12px;padding:10px 12px;font-size:14px;box-shadow:0 10px 30px rgba(15,23,42,.15)}.ppDialog.ppStrengthDialog{width:100vw;max-width:none;height:100dvh;max-height:none;margin:0;border:0;border-radius:0;padding:18px 16px calc(18px + env(safe-area-inset-bottom,0px));overflow:auto;align-content:start}.ppDialog.ppStrengthDialog header [data-close]{width:44px;height:44px;min-width:0}}
.ppDialog.ppStrengthDialog{display:none;gap:18px}
.ppDialog.ppStrengthDialog[open]{display:grid}
.ppDialog.ppStrengthDialog header{align-items:flex-start}
.ppDialog.ppStrengthDialog header p{margin:2px 0 0;font-size:14px}
.ppDialog.ppStrengthDialog footer{margin-top:0;justify-content:flex-end}
@container pp-composer (max-width:520px){
  .ppActions:has(>.ppGeo){flex-wrap:wrap;row-gap:10px}
  .ppActions>.ppGeo{order:0;flex:1 1 100%;max-width:100%;margin:0;padding:0;text-align:right}
  .ppActions:has(>.ppGeo) [data-action="send"]{margin-left:auto}
}
.ppActions>.ppTurnstile{order:4;flex:0 0 300px;max-width:100%;min-width:0}
.ppTurnstile [data-verification-widget]{width:300px;max-width:100%;min-height:65px}
.ppTurnstile p{margin:3px 0 0;font-size:12px;line-height:1.35;color:#475569}
.ppTurnstile [data-verification-retry]{min-height:44px;padding:6px 10px;border:1px solid #bfd3ff;border-radius:8px;background:#eff6ff;color:#1d4ed8;font-size:12px}
.ppActions:has(>.ppTurnstile:not([hidden])){gap:8px}
.ppActions:has(>.ppTurnstile:not([hidden]))>.ppGeo{max-width:180px;padding-left:0}
.ppActions:has(>.ppTurnstile:not([hidden])) [data-action="send"]{order:5;margin-left:4px}
@container pp-composer (max-width:740px){
  .ppActions:has(>.ppTurnstile:not([hidden])){flex-wrap:wrap;row-gap:8px}
  .ppActions:has(>.ppTurnstile:not([hidden]))>.ppGeo{order:0;flex:1 1 100%;max-width:100%;margin:0;text-align:right}
  .ppActions>.ppTurnstile{order:1;flex:1 1 100%;display:flex;flex-direction:column;align-items:flex-end}
  .ppActions:has(>.ppTurnstile:not([hidden]))>.ppSubmitWrap{order:2}
  .ppActions:has(>.ppTurnstile:not([hidden]))>[data-action="photos"]{order:3}
  .ppActions:has(>.ppTurnstile:not([hidden])) [data-action="send"]{margin-left:auto}
}
.ppActions>.ppTurnstile[hidden]{display:none}
#dj-flash-success{position:fixed;top:0;left:0;right:0;z-index:99999;display:flex;justify-content:center;pointer-events:none;transform:translateY(-120%);transition:transform .4s cubic-bezier(.4,0,.2,1);padding:16px 16px 0}
#dj-flash-success .dj-flash-inner{pointer-events:auto;max-width:560px;width:100%;padding:14px 20px;background:linear-gradient(135deg,#059669,#10b981);color:#fff;border-radius:12px;box-shadow:0 8px 32px rgba(0,0,0,.18);display:flex;align-items:center;gap:12px;font-size:15px;font-weight:500;box-sizing:border-box}
#dj-flash-success .dj-flash-icon{width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:16px}
#dj-flash-success .dj-flash-close{background:none;border:0;color:#fff;font-size:22px;line-height:1;cursor:pointer;padding:0 2px;margin-left:auto;min-height:0;opacity:.85}
#dj-flash-success .dj-flash-close:hover{opacity:1}
@media(max-width:767px){body:is(.ppPublic,:where(:has(#main-content[data-pp-body~=ppPublic]))) #main-content{padding-top:24px}body:is(.ppPublic,:where(:has(#main-content[data-pp-body~=ppPublic]))) #main-content>h1{margin-top:0}body:is(.ppPublic,:where(:has(#main-content[data-pp-body~=ppPublic]))) :is(#header,.header_sec){position:relative;z-index:2;background:#fff}body:is(.ppPublic,:where(:has(#main-content[data-pp-body~=ppPublic]))) .ppCard{margin-top:0}}
.ppActions .ppTurnstile{margin-left:auto!important}
.ppActions .ppTurnstile:not([hidden]) ~ .ppSend{margin-left:4px!important}
/* Only a VISIBLE verification slot pulls Send next to it. Once verification passes the slot is
   hidden but stays in the row until reload, and the unqualified sibling rule kept Send glued to
   the photo button (QA: Send icon shifts after "Verify you are human", back after refresh). */
.ppActions>.ppTurnstile[hidden] ~ .ppSend{margin-left:auto!important}
body.ppWelcome #main-content,
body.ppWelcome :is(#header,.header_sec,#footer,.footer_sec){filter:blur(5px) saturate(.85);pointer-events:none;user-select:none;transition:filter .25s ease}
body.ppWelcome{overflow:hidden}
body.ppWelcome #cookie-consent-banner{display:none!important}
.ppDialog.ppWelcome{max-width:520px;width:calc(100% - 32px);padding:28px 32px 26px;border-radius:20px;border-color:#e5e7eb;box-shadow:0 30px 80px #0f172a4d;max-height:calc(100dvh - 32px);overflow:auto;overscroll-behavior:contain}
.ppDialog.ppWelcome::backdrop{background:#0f172a80}
.ppWelcomeLogo .ppLogoImg{margin:0 auto}
.ppDialog.ppWelcome .ppWelcomeName{width:100%;margin:0;padding:12px 14px;font:inherit;font-size:16px;border:1px solid #cbd5e1;border-radius:10px;background:#fff;color:#111827}
.ppDialog.ppWelcome .ppWelcomeName:focus,
.ppDialog.ppWelcome .ppWelcomeName:focus-visible{outline:none;border-color:#1a73e8;box-shadow:none}
.ppDialog.ppWelcome .ppWelcomeName.ppInvalid{border-color:#b42318}
.ppDialog.ppWelcome .ppWelcomeErr{margin:8px 0 0;font-size:13px;line-height:1.4;max-width:none}
.ppDialog.ppWelcome .ppWelcomeAgree{margin:18px 0 0;display:flex;flex-direction:column;align-items:center;gap:10px;padding:14px 12px 12px;border:1px solid #e2e8f0;border-radius:14px;background:#f8fafc}
.ppDialog.ppWelcome .ppWelcomeAgreeText{margin:0;font-size:15px;font-weight:600;color:#111827;text-align:center;line-height:1.35}
.ppDialog.ppWelcome .ppWelcomeAgree a{color:#1d4ed8;font-weight:700;text-decoration:underline}
.ppDialog.ppWelcome .ppWelcomeTick{margin:0;align-items:center;gap:10px;font-size:15px;font-weight:600;color:#111827;cursor:pointer}
.ppDialog.ppWelcome .ppWelcomeTick input{width:20px;height:20px;min-height:0;margin:0;padding:0;accent-color:#1d4ed8;cursor:pointer;flex:none}
.ppDialog.ppWelcome .ppWelcomeTick input:focus-visible{outline:2px solid #1a73e8;outline-offset:2px}
.ppWelcomeVerify .ppTurnstile{display:flex;flex-direction:column;align-items:center;gap:6px;width:auto;flex:none;order:0}
.ppWelcomeVerify .ppTurnstile [role=status]{margin:0;font-size:13px;color:#475569;text-align:center}
.ppWelcomeVerify .ppTurnstile [data-verification-retry]{font-size:13px;padding:6px 12px}
.ppDialog.ppWelcome [data-welcome-error]{text-align:center;margin-top:10px}
.ppDialog.ppWelcome .ppWelcomeRetry{align-self:center;margin-top:10px;background:var(--pp-brand,#1d4ed8);color:#fff;border-color:var(--pp-brand,#1d4ed8)}
@media(max-width:640px){.ppDialog.ppWelcome{padding:22px 18px 20px;max-height:calc(100dvh - 24px);width:calc(100% - 24px)}.ppWelcomeVerify .ppTurnstile{max-width:100%}}
@media(prefers-reduced-motion:reduce){body.ppWelcome #main-content,body.ppWelcome :is(#header,.header_sec,#footer,.footer_sec){transition:none}}

/* ===== end moved rules ===== */
/* Public theme customization layer — edit these tokens, not the API code.
   boot.js copies data-pp-body onto <body>, but loads async after the content is
   revealed, so every body-class rule below also matches the attribute directly
   (:is(.ppPage, :where(body:has(...)))) to be correct on first paint. :where()
   keeps specificity unchanged. */
   :root{--pp-brand:#1d4ed8;--pp-action:#1a73e8;--pp-background:#f6f8fb;--pp-text:#111827;--pp-panel:#fff;--pp-border:#e5e7eb;--pp-radius:13px;--pp-font:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
   body:is(.ppAdmin,:where(:has(#main-content[data-pp-body~=ppAdmin]))) #header,
   body:is(.ppPage,:where(:has(#main-content[data-pp-body~=ppPage]))):not(.ppPublic) #header{display:none!important}
   #header .ppTop{display:grid!important;grid-template-columns:220px 1fr 360px!important;align-items:center!important;gap:16px!important;max-width:1180px!important;margin:0 auto!important;width:100%!important}
   #header .ppTop h1{margin:0!important;text-align:center!important;font-size:26px!important;line-height:1!important;font-weight:600!important;letter-spacing:-.035em!important}
   /* grid-column:-2 pins the nav to the last column: at 768-1279px workspace.css hides the h1,
      and without this the nav slid into the empty middle column, leaving a gap on the right. */
   #header .ppTop nav{grid-column:-2!important;display:flex!important;justify-content:flex-end!important;gap:18px!important;font-size:14px!important;font-weight:700!important;color:#475569!important}
   /* Info pages (ppPage ppPublic): logo + nav only. The header tagline belongs to the
      ToDo page; over the page's own h1 it read as two titles (QA 2026-09-09). */
   body:is(.ppPublic,:where(:has(#main-content[data-pp-body~=ppPublic]))) :is(#header,.header_sec) .ppTop h1{display:none!important}
   body:is(.ppPublic,:where(:has(#main-content[data-pp-body~=ppPublic]))) :is(#header,.header_sec) .ppTop{grid-template-columns:220px 1fr!important}
   body:is(.ppPublic,:where(:has(#main-content[data-pp-body~=ppPublic]))) #main-content{padding-top:36px}
   body:is(.ppPublic,:where(:has(#main-content[data-pp-body~=ppPublic]))) #main-content>h1{font-size:30px;margin:0 0 16px}
   @media(max-width:767px){body:is(.ppPublic,:where(:has(#main-content[data-pp-body~=ppPublic]))) #main-content{padding-top:20px}body:is(.ppPublic,:where(:has(#main-content[data-pp-body~=ppPublic]))) #main-content>h1{font-size:26px}}
   #footer,#post_script{display:none}
   body:is(.ppMarketing,:where(:has(#main-content[data-pp-body~=ppMarketing]))) #footer{display:block}
   #content{padding:0}
   body:is(.ppPage,:where(:has(#main-content[data-pp-body~=ppPage]))) #content,
   body:is(.ppAdmin,:where(:has(#main-content[data-pp-body~=ppAdmin]))) #content{max-width:1180px;margin-left:auto;margin-right:auto}
   :is(.ppAdmin,:where(body:has(#main-content[data-pp-body~=ppAdmin]))){min-height:100vh;background:#f6f8fb;padding:32px;color:#111827}:is(.ppAdmin,:where(body:has(#main-content[data-pp-body~=ppAdmin]))) #dashboard{max-width:1180px;margin:0 auto}.ppAdminHeader{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:24px}.ppAdminHeader p{margin:0 0 6px;color:#2563eb;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.08em}.ppAdminHeader h1{margin:0;font-size:42px;letter-spacing:-.055em;line-height:1}.ppAdminMeta{text-align:right;color:#64748b;font-size:13px}.ppAdminGrid{display:grid;gap:14px;margin-bottom:18px}.ppAdminFour{grid-template-columns:repeat(4,1fr)}.ppAdminThree{grid-template-columns:repeat(3,1fr);margin-bottom:24px}.ppAdminPanels{grid-template-columns:1fr 1.4fr;gap:18px}.ppAdminCard,.ppAdminPanel{background:white;border:1px solid #e5e7eb;border-radius:16px;padding:18px;box-shadow:0 14px 35px rgba(15,23,42,.06)}.ppAdminLabel{color:#64748b;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.06em}.ppAdminValue{font-size:30px;font-weight:800;letter-spacing:-.045em;margin-top:8px}.ppAdminPanel h2{margin:0 0 12px;font-size:18px}.ppAdminRow{display:flex;justify-content:space-between;gap:16px;border-bottom:1px solid #eef2f7;padding:10px 0;font-size:14px}.ppAdminEvent{border-bottom:1px solid #eef2f7;padding:10px 0}.ppAdminEvent>div{display:flex;justify-content:space-between;gap:12px;font-size:13px}.ppAdminEvent span{color:#64748b}.ppAdminEvent p{color:#475569;font-size:13px;margin:3px 0 0}.ppAdminEvent small{color:#94a3b8;font-size:12px}.ppAdminLeads{margin-top:18px}:is(.ppAdmin,:where(body:has(#main-content[data-pp-body~=ppAdmin]))) a{color:#1d4ed8}@media(max-width:800px){:is(.ppAdmin,:where(body:has(#main-content[data-pp-body~=ppAdmin]))){padding:20px 14px}.ppAdminFour,.ppAdminThree,.ppAdminPanels{grid-template-columns:1fr}.ppAdminHeader{display:block}.ppAdminHeader h1{font-size:32px}.ppAdminMeta{text-align:left;margin-top:14px}}
   :is(.ppDemo,:where(body:has(#main-content[data-pp-body~=ppDemo]))){background:var(--pp-background);color:var(--pp-text);font-family:var(--pp-font)}
   body:is(.ppMarketing,:where(:has(#main-content[data-pp-body~=ppMarketing]))){color:var(--pp-text);font-family:var(--pp-font)}
   body:is(.ppMarketing,:where(:has(#main-content[data-pp-body~=ppMarketing]))) #header, body:is(.ppMarketing,:where(:has(#main-content[data-pp-body~=ppMarketing]))) .header_sec{background:#fff;padding:24px 16px 0}
   /* Side padding tracks the footer's px-4 sm:px-6 lg:px-8 so both line up on the right edge */
   @media(min-width:640px){body:is(.ppMarketing,:where(:has(#main-content[data-pp-body~=ppMarketing]))) #header, body:is(.ppMarketing,:where(:has(#main-content[data-pp-body~=ppMarketing]))) .header_sec{padding-left:24px;padding-right:24px}}
   @media(min-width:1024px){body:is(.ppMarketing,:where(:has(#main-content[data-pp-body~=ppMarketing]))) #header, body:is(.ppMarketing,:where(:has(#main-content[data-pp-body~=ppMarketing]))) .header_sec{padding-left:32px;padding-right:32px}}
   .ppLogo span,.ppTop h1 em{color:var(--pp-brand)}
   #header .ppLogo{text-decoration:none;color:inherit;display:inline-flex;align-items:center}
   .ppLogoImg{height:42px;width:auto;display:block}
   @media(max-width:767px){.ppLogoImg{height:30px}}
   /* Phones: logo + burger, nav behind it. Must match .header_sec as well as #header —
      the platform wraps the theme header and #header may not exist (QA batch 5 #14). */
   @media(max-width:767px){:is(#header,.header_sec) .ppTop{display:flex!important;grid-template-columns:none!important;justify-content:space-between!important;gap:12px!important}:is(#header,.header_sec) .ppTop h1{display:none!important}:is(#header,.header_sec) .ppTop:not(.ppMenuOpen) nav{display:none!important}:is(#header,.header_sec) .ppTop.ppMenuOpen nav{display:flex!important;flex-direction:column!important;justify-content:flex-start!important;align-items:flex-start!important;width:100%!important;flex-basis:100%!important;gap:12px!important;padding:10px 0 4px!important}}
   .ppWorkspace{background:var(--pp-panel);border-color:var(--pp-border);border-radius:var(--pp-radius)}
   .ppSend,.ppBubble.user{background:var(--pp-action)}
   [hidden]{display:none!important}
   .ppPreviewNotice{position:fixed;bottom:6px;left:50%;transform:translateX(-50%);z-index:20;padding:5px 12px;border-radius:20px;border:1px solid #dbe3ef;background:#fff;color:#64748b;font-size:11px;white-space:nowrap}
   .ppError{color:#b42318;white-space:pre-wrap;max-width:1180px;margin:12px auto}
   /* margin:auto centres a showModal() dialog; Tailwind v4 preflight's *{margin:0}
      kills the UA default and pins it top-left (QA 2026-09-17 #4). Not !important —
      .ppStrengthDialog needs margin:0 to go full-screen <=640px. */
   .ppDialog{margin:auto;border:1px solid var(--pp-border);border-radius:18px;max-width:560px;width:calc(100% - 32px);padding:24px;color:var(--pp-text);font-family:var(--pp-font);box-shadow:0 24px 70px #0f172a33}
   .ppDialog::backdrop{background:#0f172a66}.ppDialog header,.ppDialog footer{display:flex;align-items:center;justify-content:space-between;gap:12px}.ppDialog h2{margin:0;font-size:24px}.ppDialog label,.ppForm label{display:grid;gap:7px;margin:14px 0;font-size:14px;font-weight:600}.ppDialog input,.ppDialog select,.ppDialog textarea,.ppForm input,.ppForm textarea,.ppForm select{width:100%;padding:10px 12px;border:1px solid #cbd5e1;border-radius:9px;background:white;color:#111827}
   /* Border colour alone marks focus. Overrides workspace.css's global focus-visible
      outline, which is :where()-wrapped (0 specificity) so no !important is needed. */
   .ppDialog :is(input,select,textarea):focus,.ppForm :is(input,select,textarea):focus,
   .ppDialog :is(input,select,textarea):focus-visible,.ppForm :is(input,select,textarea):focus-visible{outline:none;border-color:var(--pp-action);box-shadow:none}.ppDialog button,:is(.ppPage,:where(body:has(#main-content[data-pp-body~=ppPage]))) button:where(:not(.ppTop *)){border:1px solid #cbd5e1;border-radius:999px;padding:10px 16px;background:white;color:#1d4ed8;font-weight:700;cursor:pointer}.ppDialog [type=submit],:is(.ppPage,:where(body:has(#main-content[data-pp-body~=ppPage]))) button.primary{background:var(--pp-brand);color:white;border-color:var(--pp-brand)}.ppDialog .ppCheckbox{display:flex;align-items:flex-start;font-weight:400}.ppCheckbox input{width:18px;min-height:18px;flex-shrink:0}.ppDialog progress{width:100%;margin-top:15px}.ppDialog textarea{min-height:100px}.ppDialog footer{margin-top:20px}.ppPhotos{display:flex;gap:12px;overflow:auto;padding:12px 22px;max-height:220px;flex-shrink:0}.ppPhotos figure{margin:0;min-width:150px;width:170px}.ppPhotos img{width:150px;height:95px;object-fit:cover;border-radius:10px}.ppPhotos figcaption{font-size:13px}.ppPhotos small{display:block;font-size:10px;color:#64748b}.ppPhotos button{font-size:11px;min-height:28px;border:0;background:transparent;color:#1d4ed8;padding:4px}:is(.ppPage,:where(body:has(#main-content[data-pp-body~=ppPage]))){background:var(--pp-background);min-height:100vh;padding:24px 20px 60px;font-family:var(--pp-font);color:var(--pp-text)}.ppPageHeader{max-width:1180px;margin:0 auto 26px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}.ppPageHeader nav{display:flex;gap:20px;flex-wrap:wrap;color:#475569;font-weight:650;font-size:14px}:is(.ppPage,:where(body:has(#main-content[data-pp-body~=ppPage]))) main{max-width:1180px;margin:auto}:is(.ppPage,:where(body:has(#main-content[data-pp-body~=ppPage]))) h1{font-size:36px;letter-spacing:-.04em;margin:0 0 10px}:is(.ppPage,:where(body:has(#main-content[data-pp-body~=ppPage]))) h2{font-size:20px;margin:0 0 14px}:is(.ppPage,:where(body:has(#main-content[data-pp-body~=ppPage]))) p{line-height:1.55}.ppCard{padding:22px;border:1px solid var(--pp-border);border-radius:16px;background:var(--pp-panel);margin-bottom:18px;box-shadow:0 14px 35px #0f172a08}.ppGrid{display:grid;grid-template-columns:1fr 1fr;gap:18px}:is(.ppPage,:where(body:has(#main-content[data-pp-body~=ppPage]))) a.ppLink,.ppWorksheet a{color:var(--pp-brand);text-decoration:underline}.ppRows>article,.ppRows>div{padding:12px 0;border-bottom:1px solid #edf1f6}.ppRows p{margin:5px 0;white-space:pre-wrap}.ppMuted{color:#64748b;font-size:14px}.ppTag{display:inline-block;font-size:12px;border-radius:999px;background:#eff6ff;color:#1e40af;padding:5px 10px}.ppActionsRow{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}:is(.ppPage,:where(body:has(#main-content[data-pp-body~=ppPage]))) pre{white-space:pre-wrap;font:inherit;font-size:14px}:is(.ppPage,:where(body:has(#main-content[data-pp-body~=ppPage]))) .ppPhotos{padding:0;max-height:none;flex-wrap:wrap}:is(.ppPage,:where(body:has(#main-content[data-pp-body~=ppPage]))) .ppPhotos figure{margin-bottom:12px}:is(.ppPage,:where(body:has(#main-content[data-pp-body~=ppPage]))) table{width:100%;border-collapse:collapse;font-size:13px}:is(.ppPage,:where(body:has(#main-content[data-pp-body~=ppPage]))) th,:is(.ppPage,:where(body:has(#main-content[data-pp-body~=ppPage]))) td{text-align:left;padding:12px;border-bottom:1px solid #e5e7eb;vertical-align:top}.ppScroll{overflow:auto}.ppForm textarea{min-height:100px}@media(max-width:800px){.ppGrid{grid-template-columns:1fr}:is(.ppPage,:where(body:has(#main-content[data-pp-body~=ppPage]))){padding:18px 14px 60px}.ppCard{padding:16px}.ppPageHeader{align-items:flex-start}:is(.ppPage,:where(body:has(#main-content[data-pp-body~=ppPage]))) h1{font-size:28px}}
   /* Undo the pill button style the dialog × inherits — it rendered as an oversized
      lozenge with an off-centre glyph (QA batch 5 #10, #17). */
   .ppDialog header [data-close]{flex:none;width:36px;height:36px;min-width:0;min-height:0;padding:0;display:inline-grid;place-items:center;border-radius:50%;border-color:#e2e8f0;color:#475569;font-size:22px;font-weight:400;line-height:1}
   .ppDialog header [data-close]:hover{background:#f1f5f9;color:#0f172a}
   @media(max-width:640px){.ppDialog header [data-close]{width:40px;height:40px;font-size:24px}}

   /* Styled file control replacing the browser's "Choose File" chrome (QA 2026-09-17 #5).
      The input is CLIPPED, not display:none, so Tab and Enter still reach the picker. */
   .ppDialog .ppFile{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:14px 0}
   .ppDialog .ppFileBtn{display:inline-flex;align-items:center;justify-content:center;margin:0;padding:0 16px;min-height:44px;border:1px solid #cfd8e6;border-radius:12px;background:#fff;color:#1d4ed8;font-size:13px;font-weight:800;cursor:pointer}
   .ppDialog .ppFileBtn:hover{background:#eff6ff;border-color:#1a73e8}
   .ppDialog .ppFileBtn:focus-within{outline:2px solid #1a73e8;outline-offset:2px}
   .ppDialog .ppFileBtn input[type=file]{position:absolute;width:1px;height:1px;opacity:0;clip-path:inset(50%);pointer-events:none}
   .ppDialog .ppFileName{font-size:13px;color:#64748b;word-break:break-all;flex:1;min-width:0}
   .ppDialog .ppFile[data-chosen="1"] .ppFileName{color:#0f172a;font-weight:700}
   @media(max-width:640px){.ppDialog .ppFileBtn{width:100%}}

   /* Button + accent layer the shared service templates expect; this theme defined neither. */
   .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:10px;cursor:pointer;font-family:var(--pp-font);font-size:14px;font-weight:700;line-height:1;padding:12px 22px;white-space:nowrap;text-decoration:none;transition:filter .15s ease,transform .12s ease,box-shadow .15s ease}
   .btn:disabled{opacity:.45;cursor:not-allowed}

   .theme-primary,
   .btn-primary{background:linear-gradient(180deg,var(--pp-action) 0%,var(--pp-brand) 100%);border:1px solid var(--pp-brand);box-shadow:0 6px 16px rgba(29,78,216,.22);color:#fff}
   .btn-primary:not(:disabled):hover{filter:brightness(1.06);transform:translateY(-1px);box-shadow:0 10px 22px rgba(29,78,216,.28)}
   .btn-primary:focus-visible{outline:2px solid var(--pp-action);outline-offset:2px}

   .btn-secondary{background:var(--pp-panel);border:1px solid var(--pp-border);color:var(--pp-text);box-shadow:0 4px 10px rgba(16,38,84,.06)}
   .btn-secondary:not(:disabled):hover{background:#eff6ff;border-color:var(--pp-action)}

   .text-primary-theme{color:var(--pp-brand)}
   a.text-primary-theme:hover{color:var(--pp-action)}

   /* .theme-primary is an avatar fill here, not a button — strip the button chrome. */
   .svc-team-avatar.theme-primary{border:0;box-shadow:none;padding:0;background:linear-gradient(180deg,var(--pp-action) 0%,var(--pp-brand) 100%)}

   .svc-available{border:1px solid var(--pp-border)}
   .svc-team-badge{background:#eff6ff;border:1px solid var(--pp-border);border-radius:999px}

   /* Template accents default to green; re-tint to ProofPros blue. */
   .svc-bullet{background:var(--pp-action)}
   .svc-icon-wrap i{color:var(--pp-brand)}
   .svc-cta{background:#eff6ff;border-color:var(--pp-border)}
   .svc-checkbox-group input,.svc-radio-group input{accent-color:var(--pp-action)}

   /* Card is a link: lift it on hover. Title/"Learn more" colours (grey at rest, theme
      accent only while hovering that element) come from templates/services_overview.html. */
   .services_overview .service_card_inner{border:1px solid var(--pp-border);transition:transform .15s ease,box-shadow .15s ease}
   .services_overview .service_card:hover .service_card_inner{transform:translateY(-2px);box-shadow:0 14px 32px rgba(15,23,42,.12)}

   /* Auth pages (login, set-password, signup): the live platform wraps page content in
      .stripe-inputs (static/css/stripe-inputs.css), which restyles every input/label with
      !important. Retune its --si-* tokens and win on specificity (form ids) so these
      forms keep the design: white 46px fields, inline checkbox row, icon/eye padding. */
   /* --si-ring is transparent on purpose: the accent border alone marks focus on
      these auth forms. stripe-inputs.css paints its focus ring as
      `box-shadow:0 0 0 3px var(--si-ring)!important`, so blanking the token is
      what removes it — --si-shadow:none only covers the resting shadow. */
   #main-content form:has(#ppLoginEmail,#ppSetPasswordEmail,#ppSignupEmail){--si-surface:#fff;--si-border:#e2e8f0;--si-radius:8px;--si-height:46px;--si-shadow:none;--si-accent:#0857ff;--si-ring:transparent;--si-text:#071229;--si-placeholder:#94a3b8;--si-label:#071229;--si-font:Inter,ui-sans-serif,system-ui,sans-serif}
   #main-content form:has(#ppLoginEmail,#ppSetPasswordEmail,#ppSignupEmail) input:where([type=email],[type=text],[type=tel],[type=password]){padding:0 14px}
   #main-content form:has(#ppLoginEmail,#ppSetPasswordEmail,#ppSignupEmail) .relative>svg+input{padding-left:40px}
   #main-content form:has(#ppLoginEmail,#ppSetPasswordEmail,#ppSignupEmail) input:has(+button){padding-right:44px}
   #main-content form:has(#ppLoginEmail,#ppSetPasswordEmail,#ppSignupEmail) label:not(:has(>input)){margin-block-end:8px!important}
   #main-content form:has(#ppLoginEmail,#ppSetPasswordEmail,#ppSignupEmail) label:has(>input[type=checkbox]){display:flex!important;margin:0!important;color:#334155!important;font:400 14px/1.4 var(--si-font)!important}
   #main-content form:has(#ppLoginEmail,#ppSetPasswordEmail,#ppSignupEmail) .relative>button[type=button]{height:32px!important;min-height:0!important}
   /* Focus is marked by the accent border alone. Two separate sources paint a ring
      on these fields and both have to go: stripe-inputs.css's token ring (handled by
      --si-ring:transparent above) and the pages' own Tailwind utility
      `focus:shadow-[0_0_0_4px_rgba(8,87,255,0.12)]`, which this rule overrides.
      The submit button carries the same utility at 0.25 alpha. */
   #main-content form:has(#ppLoginEmail,#ppSetPasswordEmail,#ppSignupEmail) :is(input,select,textarea):focus,
   #main-content form:has(#ppLoginEmail,#ppSetPasswordEmail,#ppSignupEmail) :is(input,select,textarea):focus-visible{box-shadow:none!important;outline:none!important}
   #main-content form:has(#ppLoginEmail,#ppSetPasswordEmail,#ppSignupEmail) button:focus,
   #main-content form:has(#ppLoginEmail,#ppSetPasswordEmail,#ppSignupEmail) button:focus-visible{box-shadow:none!important}
   /* Non-editable fields (the prefilled email on set-password is `readonly`, not
      `disabled`) otherwise kept the editable look: the page's utility classes give
      them bg-white, full-strength text and a focus border, and a readonly input
      keeps the native text caret. Grey them and drop the caret so they read as
      non-editable. Palette matches the disabled state in static/css/stripe-inputs.css. */
   #main-content form:has(#ppLoginEmail,#ppSetPasswordEmail,#ppSignupEmail) input:is([readonly],:disabled){background-color:#f1f3f5!important;border-color:#d7dce1!important;color:#697586!important;-webkit-text-fill-color:#697586!important;cursor:not-allowed!important;box-shadow:none!important}
   /* A readonly input still takes focus, so neutralise the focus border/ring it
      would otherwise flash. */
   #main-content form:has(#ppLoginEmail,#ppSetPasswordEmail,#ppSignupEmail) input:is([readonly],:disabled):focus{border-color:#d7dce1!important;box-shadow:none!important}
   /* Leading icon greys with its field. */
   #main-content form:has(#ppLoginEmail,#ppSetPasswordEmail,#ppSignupEmail) .relative:has(>input:is([readonly],:disabled))>svg{color:#98a2b3!important}
   /* The submit button ships with `cursor-pointer` in its class list, which wins
      over the disabled state without this. */
   #main-content form:has(#ppLoginEmail,#ppSetPasswordEmail,#ppSignupEmail) button:disabled{cursor:not-allowed!important;opacity:.55!important;box-shadow:none!important}