/* Public OKWorkD pages v85. Fixed classes only: stored choices select a known
   layout/design/palette composition and never become CSS themselves. */
.workpro-homepage {
    --hp-ink: #10243f;
    --hp-muted: #61718a;
    --hp-paper: #ffffff;
    --hp-paper-soft: #f5f8fc;
    --hp-line: #dce5f0;
    --hp-accent: #1269d3;
    --hp-accent-deep: #0b4eab;
    --hp-accent-soft: #e8f2ff;
    --hp-glow: rgba(18, 105, 211, .18);
    --hp-radius: 24px;
    background: var(--hp-paper-soft);
    color: var(--hp-ink);
    min-height: 100vh;
    overflow: hidden;
    padding: 0 clamp(18px, 4vw, 72px) 36px;
    position: relative;
}
.workpro-homepage *, .workpro-homepage *::before, .workpro-homepage *::after { box-sizing: border-box; }
.workpro-homepage a { color: inherit; text-decoration: none; }
.workpro-homepage p, .workpro-homepage h1, .workpro-homepage h2, .workpro-homepage h3 { margin: 0; }
.workpro-homepage a:focus-visible,
.workpro-homepage button:focus-visible,
.workpro-homepage summary:focus-visible { outline:3px solid var(--hp-accent); outline-offset:3px; }

.hp-palette-ocean { --hp-ink:#10243f; --hp-muted:#61718a; --hp-paper:#fff; --hp-paper-soft:#f4f8fc; --hp-line:#dbe7f2; --hp-accent:#1467d8; --hp-accent-deep:#0b4da4; --hp-accent-soft:#e7f1ff; --hp-glow:rgba(20,103,216,.17); }
.hp-palette-emerald { --hp-ink:#102d29; --hp-muted:#5b756d; --hp-paper:#fff; --hp-paper-soft:#f2f8f5; --hp-line:#d8e8e1; --hp-accent:#11866e; --hp-accent-deep:#076552; --hp-accent-soft:#e2f5ee; --hp-glow:rgba(17,134,110,.17); }
.hp-palette-indigo { --hp-ink:#1f1f4b; --hp-muted:#696b91; --hp-paper:#fff; --hp-paper-soft:#f5f5fd; --hp-line:#e0e0f3; --hp-accent:#5752c8; --hp-accent-deep:#39349b; --hp-accent-soft:#ebeaff; --hp-glow:rgba(87,82,200,.18); }
.hp-palette-rose { --hp-ink:#412236; --hp-muted:#87677a; --hp-paper:#fff; --hp-paper-soft:#fff6f8; --hp-line:#f0dce4; --hp-accent:#c44f77; --hp-accent-deep:#9d3157; --hp-accent-soft:#ffe8ef; --hp-glow:rgba(196,79,119,.17); }
.hp-palette-graphite { --hp-ink:#1d2733; --hp-muted:#63707d; --hp-paper:#fff; --hp-paper-soft:#f5f7f8; --hp-line:#dbe0e4; --hp-accent:#3d5975; --hp-accent-deep:#263e56; --hp-accent-soft:#e7edf2; --hp-glow:rgba(61,89,117,.16); }
.hp-palette-gold { --hp-ink:#342915; --hp-muted:#7e6e4d; --hp-paper:#fffdf8; --hp-paper-soft:#fbf7ee; --hp-line:#eadfca; --hp-accent:#ad741c; --hp-accent-deep:#80510d; --hp-accent-soft:#fff0cf; --hp-glow:rgba(173,116,28,.17); }

.hp-nav { align-items:center; display:flex; gap:26px; margin:0 auto; max-width:1220px; min-height:88px; position:relative; z-index:5; }
.hp-brand { align-items:center; display:inline-flex; flex:0 0 auto; font-size:18px; font-weight:800; gap:10px; letter-spacing:.02em; }
.hp-brand-mark { align-items:center; background:var(--hp-accent); border-radius:10px; color:#fff; display:inline-flex; font-size:15px; height:31px; justify-content:center; width:31px; box-shadow:0 8px 17px var(--hp-glow); }
.hp-brand-logo { display:block; height:auto; max-height:48px; object-fit:contain; width:174px; }
.hp-nav-links { display:flex; gap:25px; margin-left:32px; }
.hp-nav-links a, .hp-login-link { color:var(--hp-muted); font-size:14px; font-weight:600; transition:color .2s ease; }
.hp-nav-links a:hover, .hp-login-link:hover { color:var(--hp-accent); }
.hp-nav-links a.is-active { color:var(--hp-accent-deep); }
.hp-mobile-nav { display:none; position:relative; }
.hp-mobile-nav summary { align-items:center; background:var(--hp-paper); border:1px solid var(--hp-line); border-radius:10px; color:var(--hp-ink); cursor:pointer; display:flex; font-size:21px; height:39px; justify-content:center; list-style:none; width:39px; }
.hp-mobile-nav summary::-webkit-details-marker { display:none; }
.hp-mobile-nav-panel { background:var(--hp-paper); border:1px solid var(--hp-line); border-radius:14px; box-shadow:0 18px 45px rgba(17,43,72,.18); display:flex; flex-direction:column; min-width:210px; overflow:hidden; padding:8px; position:absolute; right:0; top:47px; }
.hp-mobile-nav-panel a { border-radius:9px; color:var(--hp-muted); font-size:14px; font-weight:700; padding:11px 13px; }
.hp-mobile-nav-panel a:hover, .hp-mobile-nav-panel a.is-active { background:var(--hp-accent-soft); color:var(--hp-accent-deep); }
.hp-nav-actions { align-items:center; display:flex; gap:15px; margin-left:auto; }
.hp-language { background:var(--hp-paper); border:1px solid var(--hp-line); border-radius:999px; display:flex; padding:3px; }
.hp-language a { border-radius:999px; color:var(--hp-muted); font-size:12px; font-weight:700; padding:5px 8px; }
.hp-language a.is-active { background:var(--hp-accent-soft); color:var(--hp-accent-deep); }
.hp-button { align-items:center; background:var(--hp-accent); border:1px solid var(--hp-accent); border-radius:12px; color:#fff !important; display:inline-flex; font-size:14px; font-weight:700; gap:8px; justify-content:center; line-height:1.2; padding:12px 17px; transition:transform .2s ease, box-shadow .2s ease, background .2s ease; }
.hp-button:hover { background:var(--hp-accent-deep); box-shadow:0 12px 24px var(--hp-glow); color:#fff; transform:translateY(-2px); }
.hp-button-small { border-radius:10px; font-size:13px; padding:10px 14px; }
.hp-button-large { min-height:51px; padding:14px 21px; }
.hp-button-secondary { background:transparent; border-color:var(--hp-line); color:var(--hp-ink) !important; }
.hp-button-secondary:hover { background:var(--hp-paper); border-color:var(--hp-accent); color:var(--hp-accent-deep) !important; }

.hp-hero { align-items:center; display:grid; gap:clamp(40px, 7vw, 110px); grid-template-columns:minmax(0, .92fr) minmax(430px, 1.08fr); margin:0 auto; max-width:1220px; min-height:565px; padding:48px 0 65px; }
.hp-hero-copy { max-width:585px; position:relative; z-index:2; }
.hp-eyebrow { align-items:center; color:var(--hp-accent); display:flex; font-size:12px; font-weight:800; gap:9px; letter-spacing:.13em; text-transform:uppercase; }
.hp-eyebrow span { background:currentColor; border-radius:2px; display:inline-block; height:2px; width:27px; }
.hp-hero h1 { font-size:clamp(38px, 4.15vw, 62px); font-weight:800; letter-spacing:-.055em; line-height:1.13; margin-top:18px; max-width:630px; }
.hp-lead { color:var(--hp-muted); font-size:clamp(16px, 1.3vw, 18px); line-height:1.75; margin-top:20px; max-width:570px; }
.hp-hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.hp-hero-note { align-items:center; color:var(--hp-muted); display:flex; font-size:13px; gap:8px; margin-top:20px; }
.hp-hero-note i { color:var(--hp-accent); font-size:16px; }
.hp-hero-visual { min-height:425px; position:relative; }
.hp-orbit { border:1px solid var(--hp-line); border-radius:50%; position:absolute; }
.hp-orbit-one { height:390px; right:14px; top:1px; width:390px; }
.hp-orbit-two { background:var(--hp-accent-soft); border:0; height:225px; left:3%; opacity:.68; top:170px; width:225px; }
.hp-dashboard-preview { background:var(--hp-paper); border:1px solid rgba(255,255,255,.7); border-radius:22px; box-shadow:0 32px 70px rgba(36,64,94,.19), 0 1px 0 rgba(255,255,255,.8) inset; display:flex; height:370px; left:5%; overflow:hidden; position:absolute; top:26px; transform:rotate(-2deg); width:min(100%, 570px); z-index:2; }
.hp-preview-sidebar { align-items:center; background:#172942; color:#9eb2cd; display:flex; flex:0 0 58px; flex-direction:column; gap:21px; padding-top:17px; }
.hp-preview-sidebar span { align-items:center; border-radius:9px; display:flex; height:30px; justify-content:center; width:30px; }
.hp-preview-sidebar .hp-preview-logo { background:var(--hp-accent); color:#fff; margin-bottom:12px; }
.hp-preview-sidebar .is-current { background:rgba(255,255,255,.13); color:#fff; }
.hp-preview-main { background:#f9fbfd; flex:1; padding:23px 26px; }
.hp-preview-topline, .hp-preview-heading, .hp-preview-panel-title { align-items:center; display:flex; justify-content:space-between; }
.hp-preview-topline > span { background:#e4eaf1; border-radius:4px; height:7px; width:58px; }
.hp-preview-topline div { align-items:center; color:#8896a9; display:flex; gap:14px; }
.hp-preview-topline b, .hp-mobile-top b { background:#cbd6e1; border-radius:50%; display:block; height:21px; width:21px; }
.hp-preview-heading { margin-top:25px; }
.hp-preview-heading small { color:#8390a2; display:block; font-size:9px; font-weight:800; letter-spacing:.11em; }
.hp-preview-heading strong { display:block; font-size:21px; letter-spacing:-.03em; margin-top:3px; }
.hp-preview-heading button { background:var(--hp-accent); border:0; border-radius:8px; color:#fff; font-size:15px; height:31px; width:31px; }
.hp-preview-cards { display:grid; gap:10px; grid-template-columns:repeat(3, 1fr); margin-top:20px; }
.hp-preview-cards div { background:#fff; border:1px solid #e4eaf0; border-radius:11px; min-height:82px; padding:11px; }
.hp-preview-cards i { color:var(--hp-accent); font-size:14px; }
.hp-preview-cards span { color:#66758a; display:block; font-size:10px; font-weight:700; margin-top:8px; }
.hp-preview-cards b { background:#dce4eb; border-radius:4px; display:block; height:5px; margin-top:6px; width:55%; }
.hp-preview-panel { background:#fff; border:1px solid #e4eaf0; border-radius:12px; margin-top:13px; padding:13px; }
.hp-preview-panel-title { color:#43546b; font-size:11px; font-weight:800; }
.hp-preview-panel-title i { color:#8d9bae; }
.hp-preview-row { align-items:center; display:flex; gap:8px; margin-top:12px; }
.hp-preview-row b { background:var(--hp-accent-soft); border-radius:50%; height:18px; width:18px; }
.hp-preview-row span { background:#e1e7ee; border-radius:4px; height:6px; width:52%; }
.hp-preview-row em { background:#edf1f5; border-radius:4px; height:6px; margin-left:auto; width:18%; }
.hp-mobile-preview { background:#fff; border:5px solid #1f314a; border-radius:25px; bottom:-6px; box-shadow:0 21px 43px rgba(21,47,77,.25); padding:15px 14px; position:absolute; right:-9px; transform:rotate(5deg); width:164px; z-index:3; }
.hp-mobile-top { align-items:center; color:var(--hp-accent); display:flex; font-size:15px; justify-content:space-between; }
.hp-mobile-preview small { color:#8b97a7; display:block; font-size:8px; font-weight:700; margin-top:21px; }
.hp-mobile-preview strong { display:block; font-size:16px; margin-top:2px; }
.hp-mobile-check { align-items:center; background:var(--hp-accent-soft); border-radius:10px; color:var(--hp-accent-deep); display:flex; font-size:10px; font-weight:800; gap:7px; margin-top:13px; padding:10px; }
.hp-mobile-menu { color:#8b99ac; display:flex; justify-content:space-around; margin:16px 0 2px; }
.hp-uploaded-hero { background:var(--hp-paper); border:1px solid var(--hp-line); border-radius:var(--hp-radius); box-shadow:0 30px 60px rgba(31,61,96,.16); height:410px; overflow:hidden; position:relative; z-index:2; }
.hp-uploaded-hero img { display:block; height:100%; object-fit:cover; width:100%; }

.hp-feature-strip { background:var(--hp-paper); border:1px solid var(--hp-line); border-radius:var(--hp-radius); display:grid; grid-template-columns:repeat(3, 1fr); margin:0 auto; max-width:1220px; overflow:hidden; position:relative; z-index:3; }
.hp-feature-item { align-items:flex-start; display:flex; gap:15px; min-height:145px; padding:27px clamp(19px, 2.4vw, 34px); }
.hp-feature-item + .hp-feature-item { border-left:1px solid var(--hp-line); }
.hp-feature-icon { align-items:center; background:var(--hp-accent-soft); border-radius:12px; color:var(--hp-accent); display:flex; flex:0 0 40px; font-size:18px; height:40px; justify-content:center; }
.hp-feature-item h2 { font-size:15px; font-weight:800; letter-spacing:-.02em; }
.hp-feature-item p { color:var(--hp-muted); font-size:13px; line-height:1.6; margin-top:6px; }

.hp-section { margin:0 auto; max-width:1220px; padding:112px 0 0; }
.hp-section-heading { max-width:650px; }
.hp-section-heading h2 { font-size:clamp(28px, 3.1vw, 43px); font-weight:800; letter-spacing:-.045em; line-height:1.18; margin-top:15px; }
.hp-section-heading > p:last-child { color:var(--hp-muted); font-size:16px; line-height:1.7; margin-top:14px; }
.hp-capability-grid { display:grid; gap:15px; grid-template-columns:repeat(3, 1fr); margin-top:36px; }
.hp-capability-card { background:var(--hp-paper); border:1px solid var(--hp-line); border-radius:18px; min-height:204px; padding:26px; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.hp-capability-card:hover { border-color:var(--hp-accent); box-shadow:0 16px 32px var(--hp-glow); transform:translateY(-4px); }
.hp-capability-card > i { color:var(--hp-accent); font-size:23px; }
.hp-capability-card h3 { font-size:16px; font-weight:800; margin-top:19px; }
.hp-capability-card p { color:var(--hp-muted); font-size:13px; line-height:1.65; margin-top:7px; }
.hp-workflow { display:grid; gap:70px; grid-template-columns:.75fr 1.25fr; padding-top:130px; }
.hp-step-list { border-top:1px solid var(--hp-line); }
.hp-step { align-items:center; border-bottom:1px solid var(--hp-line); display:grid; gap:20px; grid-template-columns:49px 1fr 25px; padding:23px 0; }
.hp-step > span { color:var(--hp-accent); font-size:13px; font-weight:800; }
.hp-step h3 { font-size:17px; font-weight:800; }
.hp-step p { color:var(--hp-muted); font-size:13px; line-height:1.55; margin-top:5px; }
.hp-step > i { color:var(--hp-accent); font-size:19px; }
.hp-faq-section { display:grid; gap:70px; grid-template-columns:.75fr 1.25fr; padding-top:125px; }
.hp-faq-list { border-top:1px solid var(--hp-line); }
.hp-faq { border-bottom:1px solid var(--hp-line); }
.hp-faq summary { align-items:center; cursor:pointer; display:flex; font-size:16px; font-weight:800; gap:20px; justify-content:space-between; list-style:none; padding:23px 0; }
.hp-faq summary::-webkit-details-marker { display:none; }
.hp-faq summary i { color:var(--hp-accent); font-size:15px; transition:transform .2s ease; }
.hp-faq[open] summary i { transform:rotate(45deg); }
.hp-faq p { color:var(--hp-muted); font-size:14px; line-height:1.7; padding:0 35px 23px 0; }
.hp-cta { align-items:center; background:var(--hp-accent); border-radius:var(--hp-radius); color:#fff; display:flex; gap:45px; justify-content:space-between; margin:120px auto 0; max-width:1220px; overflow:hidden; padding:clamp(34px, 5vw, 64px); position:relative; }
.hp-cta::after { border:1px solid rgba(255,255,255,.2); border-radius:50%; content:""; height:310px; position:absolute; right:-70px; top:-150px; width:310px; }
.hp-cta > div, .hp-cta > a { position:relative; z-index:1; }
.hp-cta .hp-eyebrow { color:rgba(255,255,255,.8); }
.hp-cta h2 { font-size:clamp(27px, 3vw, 42px); font-weight:800; letter-spacing:-.045em; line-height:1.18; margin-top:14px; max-width:680px; }
.hp-cta p:not(.hp-eyebrow) { color:rgba(255,255,255,.78); font-size:15px; line-height:1.65; margin-top:12px; }
.hp-button-light { background:#fff; border-color:#fff; color:var(--hp-accent-deep) !important; flex:0 0 auto; }
.hp-button-light:hover { background:var(--hp-paper-soft); border-color:var(--hp-paper-soft); color:var(--hp-accent-deep) !important; }
.hp-button-outline-light { background:transparent; border-color:rgba(255,255,255,.64); color:#fff !important; }
.hp-button-outline-light:hover { background:rgba(255,255,255,.12); border-color:#fff; }
.hp-footer { align-items:center; color:var(--hp-muted); display:flex; flex-wrap:wrap; gap:18px 30px; margin:0 auto; max-width:1220px; padding:40px 0 8px; }
.hp-footer .hp-brand { color:var(--hp-ink); }
.hp-footer p, .hp-footer small { font-size:12px; }
.hp-footer small { margin-left:auto; }
.hp-footer-legal { display:flex; flex-wrap:wrap; gap:8px 16px; }
.hp-footer-legal a { color:var(--hp-muted); font-size:12px; font-weight:700; text-decoration:none; }
.hp-footer-legal a:hover { color:var(--hp-accent-deep); text-decoration:underline; }

/* Public Package Price and About pages. */
.hp-public-page { overflow:visible; }
.hp-page-hero { margin:0 auto; max-width:1220px; padding:86px 0 50px; text-align:center; }
.hp-page-hero .hp-eyebrow { justify-content:center; }
.hp-page-hero h1 { font-size:clamp(40px, 5vw, 66px); font-weight:800; letter-spacing:-.055em; line-height:1.08; margin-top:17px; }
.hp-page-hero > p:last-child { color:var(--hp-muted); font-size:17px; line-height:1.75; margin:18px auto 0; max-width:760px; }
.hp-package-section { margin:0 auto; max-width:1220px; padding:20px 0 45px; }
.hp-package-grid { align-items:stretch; display:grid; gap:20px; grid-template-columns:repeat(3, minmax(0, 1fr)); }
.hp-package-card { background:var(--hp-paper); border:1px solid var(--hp-line); border-radius:var(--hp-radius); box-shadow:0 16px 38px rgba(31,61,96,.07); display:flex; flex-direction:column; min-height:440px; overflow:hidden; padding:28px; transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.hp-package-card:hover { border-color:var(--hp-accent); box-shadow:0 22px 48px var(--hp-glow); transform:translateY(-4px); }
.hp-package-icon { align-items:center; background:var(--hp-accent-soft); border-radius:13px; color:var(--hp-accent); display:flex; font-size:21px; height:46px; justify-content:center; width:46px; }
.hp-package-card h2 { font-size:23px; font-weight:800; letter-spacing:-.035em; line-height:1.25; margin-top:20px; }
.hp-package-description { color:var(--hp-muted); font-size:14px; line-height:1.7; margin-top:11px !important; }
.hp-package-facts { border-bottom:1px solid var(--hp-line); border-top:1px solid var(--hp-line); display:grid; gap:0; grid-template-columns:1fr 1fr; margin:25px 0 0; }
.hp-package-facts > div { padding:18px 8px 17px 0; }
.hp-package-facts > div + div { border-left:1px solid var(--hp-line); padding-left:18px; }
.hp-package-facts dt { align-items:center; color:var(--hp-muted); display:flex; font-size:12px; font-weight:700; gap:7px; }
.hp-package-facts dt i { color:var(--hp-accent); }
.hp-package-facts dd { font-size:24px; font-weight:800; letter-spacing:-.03em; margin:7px 0 0; }
.hp-package-facts dd small { color:var(--hp-muted); font-size:12px; font-weight:600; letter-spacing:0; }
.hp-package-price { align-items:flex-end; display:flex; gap:12px; justify-content:space-between; margin-top:auto; padding-top:26px; }
.hp-package-price span { color:var(--hp-muted); font-size:13px; font-weight:700; }
.hp-package-price strong { color:var(--hp-accent-deep); font-size:27px; letter-spacing:-.035em; }
.hp-package-button { margin-top:20px; width:100%; }
.hp-public-empty { align-items:center; background:var(--hp-paper); border:1px dashed var(--hp-line); border-radius:var(--hp-radius); color:var(--hp-muted); display:flex; flex-direction:column; gap:14px; justify-content:center; min-height:240px; padding:36px; text-align:center; }
.hp-public-empty i { color:var(--hp-accent); font-size:34px; }
.hp-public-empty p { font-size:15px; line-height:1.7; }
.hp-public-empty-error i { color:#b45309; }
.hp-about-hero { align-items:center; display:grid; gap:clamp(45px, 8vw, 120px); grid-template-columns:minmax(0, 1.25fr) minmax(280px, .75fr); margin:0 auto; max-width:1220px; min-height:510px; padding:75px 0 65px; }
.hp-about-copy h1 { font-size:clamp(40px, 5vw, 65px); font-weight:800; letter-spacing:-.055em; line-height:1.08; margin-top:18px; }
.hp-about-body { color:var(--hp-muted); font-size:16px; line-height:1.9; margin-top:24px !important; max-width:750px; }
.hp-about-mark { align-items:center; aspect-ratio:1; background:linear-gradient(145deg, var(--hp-accent-deep), var(--hp-accent)); border-radius:40% 60% 58% 42% / 46% 41% 59% 54%; box-shadow:0 32px 70px var(--hp-glow); color:#fff; display:flex; flex-direction:column; justify-content:center; margin:0 auto; max-width:360px; position:relative; width:100%; }
.hp-about-mark::before, .hp-about-mark::after { border:1px solid rgba(255,255,255,.28); border-radius:50%; content:""; position:absolute; }
.hp-about-mark::before { height:72%; width:72%; }
.hp-about-mark::after { height:48%; width:48%; }
.hp-about-mark i, .hp-about-mark span { position:relative; z-index:1; }
.hp-about-mark i { font-size:68px; }
.hp-about-mark span { font-size:13px; font-weight:800; letter-spacing:.18em; margin-top:13px; }
.hp-about-values { display:grid; gap:18px; grid-template-columns:repeat(3, 1fr); margin:0 auto; max-width:1220px; }
.hp-about-values article { background:var(--hp-paper); border:1px solid var(--hp-line); border-radius:19px; min-height:210px; padding:29px; }
.hp-about-values article > i { color:var(--hp-accent); font-size:25px; }
.hp-about-values h2 { font-size:18px; font-weight:800; margin-top:21px; }
.hp-about-values p { color:var(--hp-muted); font-size:14px; line-height:1.7; margin-top:9px; }
.hp-about-cta { margin-top:85px; }
.hp-about-actions { display:flex; flex:0 0 auto; flex-wrap:wrap; gap:10px; }

/* The FAQ data is shared; these fixed styles follow the selected composition. */
.hp-faq-page-hero { padding-bottom:36px; }
.hp-faq-page { margin:0 auto; max-width:980px; padding:12px 0 52px; }
.hp-faq-page-list { display:grid; gap:14px; }
.hp-faq-page-item { background:var(--hp-paper); border:1px solid var(--hp-line); border-radius:18px; box-shadow:0 13px 34px rgba(31,61,96,.06); overflow:hidden; }
.hp-faq-page-item summary { padding:23px 25px; }
.hp-faq-page-item summary > span { align-items:center; display:flex; gap:16px; line-height:1.55; }
.hp-faq-page-item summary small { align-items:center; background:var(--hp-accent-soft); border-radius:9px; color:var(--hp-accent-deep); display:inline-flex; flex:0 0 36px; font-size:11px; height:36px; justify-content:center; letter-spacing:.06em; }
.hp-faq-page-item > p { border-top:1px solid var(--hp-line); margin:0 25px !important; padding:21px 0 25px; }
.hp-layout-professional_corporate .hp-faq-page-item { border-left:4px solid var(--hp-accent); border-radius:12px; }
.hp-layout-modern_tech .hp-faq-page-item,
.hp-layout-compact_tech .hp-faq-page-item { background:rgba(24,36,56,.84); border-color:rgba(148,163,184,.22); box-shadow:0 22px 52px rgba(0,0,0,.18); }
.hp-layout-modern_tech .hp-faq-page-item > p,
.hp-layout-compact_tech .hp-faq-page-item > p { color:#a7b3c5; }
.hp-layout-premium_trust .hp-faq-page-hero h1,
.hp-layout-premium_trust .hp-faq-page-item summary { font-family:Georgia,"Times New Roman",serif; }
.hp-layout-premium_trust .hp-faq-page-item { box-shadow:0 16px 38px rgba(42,43,45,.08); }
.hp-layout-compact_glass .hp-faq-page-item { background:rgba(23,34,54,.7); border-color:rgba(255,255,255,.2); box-shadow:0 20px 48px rgba(7,30,45,.2); backdrop-filter:blur(12px); }
.hp-layout-compact_glass .hp-faq-page-item > p { color:#e3e9f2; }

/* Six local visual compositions. */
.hp-design-pearl_editorial { --hp-radius:4px; background:#fbfaf7; }
.hp-design-pearl_editorial .hp-nav, .hp-design-pearl_editorial .hp-hero h1, .hp-design-pearl_editorial .hp-section-heading h2, .hp-design-pearl_editorial .hp-cta h2 { font-family:Georgia, "Times New Roman", serif; }
.hp-design-pearl_editorial .hp-dashboard-preview, .hp-design-pearl_editorial .hp-feature-strip, .hp-design-pearl_editorial .hp-capability-card { border-radius:4px; }
.hp-design-azure_glass { background:linear-gradient(135deg, #eef8ff 0%, #f9fcff 48%, #f0f6ff 100%); }
.hp-design-azure_glass .hp-feature-strip, .hp-design-azure_glass .hp-capability-card, .hp-design-azure_glass .hp-uploaded-hero { background:rgba(255,255,255,.68); backdrop-filter:blur(16px); }
.hp-design-azure_glass .hp-orbit { border-color:rgba(20,103,216,.25); }
.hp-design-forest_ledger { --hp-radius:12px; background:#f4f7f3; }
.hp-design-forest_ledger .hp-nav { border-bottom:1px solid var(--hp-line); }
.hp-design-forest_ledger .hp-feature-strip, .hp-design-forest_ledger .hp-capability-card { box-shadow:5px 5px 0 rgba(16,45,41,.06); }
.hp-design-indigo_aurora { background:radial-gradient(circle at 80% 8%, rgba(128,104,255,.14), transparent 33%), #f7f6ff; }
.hp-design-indigo_aurora .hp-hero-visual::before { background:linear-gradient(140deg, var(--hp-accent-soft), transparent); border-radius:50%; content:""; height:330px; position:absolute; right:0; top:12px; width:330px; }
.hp-design-indigo_aurora .hp-feature-strip, .hp-design-indigo_aurora .hp-capability-card { box-shadow:0 14px 34px rgba(65,57,153,.08); }
.hp-design-warm_gold { --hp-radius:16px; background:#fcf8ee; }
.hp-design-warm_gold .hp-brand-mark, .hp-design-warm_gold .hp-button, .hp-design-warm_gold .hp-cta { background:#493619; }
.hp-design-warm_gold .hp-button:hover { background:#2f230f; }
.hp-design-warm_gold .hp-button-light { background:#fff9e9; color:#493619 !important; }
.hp-design-warm_gold .hp-eyebrow, .hp-design-warm_gold .hp-capability-card > i { color:#9b6512; }

/*
 * V82 page compositions.  hp-layout-default intentionally has no overrides:
 * every pre-v82 design and palette therefore renders exactly as before.
 */
.hp-layout-professional_corporate {
    --hp-ink:#1a365d;
    --hp-muted:#59697e;
    --hp-paper:#ffffff;
    --hp-paper-soft:#f4f7f6;
    --hp-line:#dce5eb;
    --hp-accent:#075eae;
    --hp-accent-deep:#004684;
    --hp-accent-soft:#e7f2fc;
    --hp-glow:rgba(7,94,174,.17);
    --hp-radius:14px;
    background:#f4f7f6;
}
.hp-layout-professional_corporate .hp-nav { border-bottom:1px solid rgba(26,54,93,.1); }
.hp-layout-professional_corporate .hp-hero { gap:clamp(42px,6vw,90px); grid-template-columns:minmax(0,1fr) minmax(390px,1fr); min-height:590px; }
.hp-layout-professional_corporate .hp-hero h1 { color:#1a365d; font-size:clamp(40px,4.3vw,64px); letter-spacing:-.045em; }
.hp-layout-professional_corporate .hp-button { border-radius:8px; padding-left:24px; padding-right:24px; }
.hp-layout-professional_corporate .hp-dashboard-preview,
.hp-layout-professional_corporate .hp-uploaded-hero { border:1px solid #e1e7ec; border-radius:12px; box-shadow:0 18px 44px rgba(25,49,78,.14); }
.hp-layout-professional_corporate .hp-dashboard-preview { transform:none; }
.hp-layout-professional_corporate .hp-mobile-preview { transform:rotate(2deg); }
.hp-layout-professional_corporate .hp-feature-strip { box-shadow:0 12px 34px rgba(25,49,78,.07); }
.hp-layout-professional_corporate .hp-capability-card,
.hp-layout-professional_corporate .hp-package-card,
.hp-layout-professional_corporate .hp-about-values article { border-radius:12px; }

.hp-layout-modern_tech {
    --hp-ink:#f8fafc;
    --hp-muted:#a7b3c5;
    --hp-paper:#182438;
    --hp-paper-soft:#0f172a;
    --hp-line:rgba(148,163,184,.24);
    --hp-accent:#38bdf8;
    --hp-accent-deep:#7dd3fc;
    --hp-accent-soft:rgba(56,189,248,.14);
    --hp-glow:rgba(56,189,248,.22);
    --hp-radius:22px;
    background:radial-gradient(circle at 50% 4%, rgba(56,189,248,.15), transparent 34%), linear-gradient(135deg,#1e293b 0%,#0f172a 62%,#08111f 100%);
}
.hp-layout-modern_tech .hp-nav { border-bottom:1px solid rgba(148,163,184,.16); }
.hp-layout-modern_tech .hp-hero { grid-template-columns:1fr; min-height:650px; padding:74px 0 96px; text-align:center; }
.hp-layout-modern_tech .hp-hero-copy { margin:0 auto; max-width:880px; }
.hp-layout-modern_tech .hp-eyebrow,
.hp-layout-modern_tech .hp-hero-actions,
.hp-layout-modern_tech .hp-hero-note { justify-content:center; }
.hp-layout-modern_tech .hp-hero h1 { font-size:clamp(45px,5.7vw,76px); letter-spacing:-.055em; margin-left:auto; margin-right:auto; max-width:920px; }
.hp-layout-modern_tech .hp-lead { color:#a7b3c5; font-size:clamp(17px,1.45vw,20px); margin-left:auto; margin-right:auto; max-width:760px; }
.hp-layout-modern_tech .hp-hero-visual { display:none; }
.hp-layout-modern_tech .hp-button { border-radius:999px; min-width:160px; }
.hp-layout-modern_tech .hp-button-secondary { border-color:#38bdf8; color:#7dd3fc !important; }
.hp-layout-modern_tech .hp-button-secondary:hover { background:rgba(56,189,248,.1); color:#fff !important; }
.hp-layout-modern_tech .hp-feature-strip,
.hp-layout-modern_tech .hp-capability-card,
.hp-layout-modern_tech .hp-package-card,
.hp-layout-modern_tech .hp-about-values article,
.hp-layout-modern_tech .hp-public-empty { background:rgba(24,36,56,.84); border-color:rgba(148,163,184,.2); box-shadow:0 22px 52px rgba(0,0,0,.19); }
.hp-layout-modern_tech .hp-feature-strip { backdrop-filter:blur(15px); }
.hp-layout-modern_tech .hp-capability-card:hover,
.hp-layout-modern_tech .hp-package-card:hover { border-color:#38bdf8; }
.hp-layout-modern_tech .hp-cta { background:linear-gradient(135deg,#0369a1,#0ea5e9); }
.hp-layout-modern_tech .hp-footer .hp-brand { color:#fff; }
.hp-layout-modern_tech .hp-about-mark { background:linear-gradient(145deg,#075985,#38bdf8); }
.hp-layout-modern_tech .hp-language,
.hp-layout-modern_tech .hp-mobile-nav summary,
.hp-layout-modern_tech .hp-mobile-nav-panel { background:#182438; }
.hp-layout-modern_tech .hp-page-hero > p:last-child,
.hp-layout-modern_tech .hp-about-body,
.hp-layout-modern_tech .hp-package-description { color:#a7b3c5; }

.hp-layout-premium_trust {
    --hp-ink:#172033;
    --hp-muted:#677184;
    --hp-paper:#ffffff;
    --hp-paper-soft:#f3f1ed;
    --hp-line:#e0ddd5;
    --hp-accent:#a86f1f;
    --hp-accent-deep:#6f4610;
    --hp-accent-soft:#f9edd8;
    --hp-glow:rgba(168,111,31,.18);
    --hp-radius:22px;
    background:linear-gradient(180deg,#f7f5f1 0%,#eeece7 100%);
}
.hp-layout-premium_trust .hp-hero { background:#122037; border-radius:30px; display:grid; isolation:isolate; min-height:680px; overflow:hidden; padding:72px; place-items:center; position:relative; }
.hp-layout-premium_trust .hp-hero::after { background:linear-gradient(135deg,rgba(5,12,24,.78),rgba(8,17,31,.5)); content:""; inset:0; position:absolute; z-index:1; }
.hp-layout-premium_trust .hp-hero-copy { background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.23); border-radius:22px; box-shadow:0 24px 70px rgba(0,0,0,.27); color:#fff; margin:0 auto; max-width:840px; padding:clamp(34px,5vw,56px); text-align:center; backdrop-filter:blur(14px); }
.hp-layout-premium_trust .hp-hero-visual { inset:0; margin:0; max-width:none; min-height:0; position:absolute; width:auto; z-index:0; }
.hp-layout-premium_trust .hp-uploaded-hero { background:#122037; border:0; border-radius:0; box-shadow:none; height:100%; inset:0; position:absolute; }
.hp-layout-premium_trust .hp-uploaded-hero img { object-position:center; }
.hp-layout-premium_trust .hp-dashboard-preview { height:100%; inset:0; opacity:.82; transform:scale(1.18); width:100%; }
.hp-layout-premium_trust .hp-mobile-preview,
.hp-layout-premium_trust .hp-orbit { display:none; }
.hp-layout-premium_trust .hp-eyebrow,
.hp-layout-premium_trust .hp-hero-actions,
.hp-layout-premium_trust .hp-hero-note { justify-content:center; }
.hp-layout-premium_trust .hp-eyebrow { color:#f5cf8f; }
.hp-layout-premium_trust .hp-hero h1 { font-size:clamp(40px,5vw,67px); letter-spacing:-.045em; margin-left:auto; margin-right:auto; max-width:760px; }
.hp-layout-premium_trust .hp-lead { color:#edf1f6; margin-left:auto; margin-right:auto; max-width:680px; }
.hp-layout-premium_trust .hp-hero-note { color:#e7ebf0; }
.hp-layout-premium_trust .hp-hero-note i { color:#f5cf8f; }
.hp-layout-premium_trust .hp-hero .hp-button { background:#fff; border-color:#fff; border-radius:8px; color:#111827 !important; }
.hp-layout-premium_trust .hp-hero .hp-button:hover { background:#f7efe1; border-color:#f7efe1; color:#111827 !important; }
.hp-layout-premium_trust .hp-hero .hp-button-secondary { background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.62); color:#fff !important; }
.hp-layout-premium_trust .hp-feature-strip { box-shadow:0 25px 55px rgba(37,42,50,.12); margin-top:-42px; }
.hp-layout-premium_trust .hp-capability-card,
.hp-layout-premium_trust .hp-package-card,
.hp-layout-premium_trust .hp-about-values article { box-shadow:0 16px 38px rgba(42,43,45,.06); }
.hp-layout-premium_trust .hp-cta { background:linear-gradient(135deg,#172033,#39455c); }
.hp-layout-premium_trust .hp-page-hero h1,
.hp-layout-premium_trust .hp-about-copy h1 { font-family:Georgia,"Times New Roman",serif; }

/*
 * V83 compact compositions are inspired by the three single-screen concepts
 * supplied by the Creator. They reuse the validated OKWorkD logo, a packaged
 * local visual derived from the Creator-supplied PDF, or one shared Creator
 * upload. Content remains the same shared Creator-managed homepage copy.
 */
.hp-single-screen:not(.hp-public-page) {
    min-height:100vh;
    min-height:100svh;
    overflow-x:clip;
    overflow-y:visible;
    padding-bottom:0;
}
.hp-single-screen:not(.hp-public-page) .hp-nav { max-width:1320px; min-height:84px; }
.hp-single-screen:not(.hp-public-page) .hp-hero {
    min-height:calc(100vh - 84px);
    min-height:calc(100svh - 84px);
    max-width:1320px;
    padding-bottom:clamp(28px,5vh,58px);
    padding-top:clamp(28px,5vh,58px);
}
.hp-single-screen:not(.hp-public-page) .hp-hero-note { display:none; }
.hp-compact-features { display:grid; gap:10px; grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:24px; }
.hp-compact-features article {
    align-items:center;
    background:rgba(255,255,255,.8);
    border:1px solid var(--hp-line);
    border-radius:14px;
    display:flex;
    gap:9px;
    min-width:0;
    padding:10px 11px;
}
.hp-compact-features article > span {
    align-items:center;
    background:var(--hp-accent-soft);
    border-radius:50%;
    color:var(--hp-accent);
    display:flex;
    flex:0 0 27px;
    height:27px;
    justify-content:center;
}
.hp-compact-features strong {
    display:-webkit-box;
    font-size:11px;
    font-weight:800;
    line-height:1.35;
    overflow:hidden;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
}

/* Compact Corporate: bright split composition. */
.hp-layout-compact_corporate {
    --hp-ink:#10213d;
    --hp-muted:#596b82;
    --hp-paper:#ffffff;
    --hp-paper-soft:#f5f8fc;
    --hp-line:#dbe7f1;
    --hp-accent:#0b8fc9;
    --hp-accent-deep:#066caa;
    --hp-accent-soft:#e3f6fc;
    --hp-glow:rgba(11,143,201,.2);
    background:radial-gradient(circle at 78% 35%,rgba(55,192,226,.12),transparent 31%),#f7f9fc;
}
.hp-layout-compact_corporate .hp-nav { border-bottom:1px solid rgba(16,33,61,.07); }
.hp-layout-compact_corporate .hp-hero { gap:clamp(34px,5vw,76px); grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); }
.hp-layout-compact_corporate .hp-hero-copy { max-width:620px; }
.hp-layout-compact_corporate .hp-hero h1 { font-size:clamp(42px,4.7vw,68px); line-height:1.08; }
.hp-layout-compact_corporate .hp-lead { font-size:clamp(15px,1.3vw,18px); max-width:590px; }
.hp-layout-compact_corporate .hp-button { border-radius:9px; }
.hp-layout-compact_corporate .hp-hero-visual { height:clamp(320px,48vh,520px); min-height:0; }
.hp-layout-compact_corporate .hp-uploaded-hero {
    background:linear-gradient(135deg,#ede4ff,#dff8ff 55%,#e8ffd9);
    border:0;
    border-radius:28px;
    box-shadow:0 30px 65px rgba(38,67,95,.16);
    height:100%;
}
.hp-layout-compact_corporate .hp-dashboard-preview { height:88%; left:0; top:6%; transform:none; width:96%; }
.hp-layout-compact_corporate .hp-mobile-preview { bottom:1%; right:-1%; transform:rotate(2deg) scale(.88); transform-origin:bottom right; }
.hp-layout-compact_corporate .hp-compact-features article { box-shadow:0 7px 20px rgba(23,55,85,.05); }

/* Compact Tech: centred dark presentation with the existing hero as ambience. */
.hp-layout-compact_tech {
    --hp-ink:#f8fbff;
    --hp-muted:#a7b4c7;
    --hp-paper:#18253a;
    --hp-paper-soft:#081224;
    --hp-line:rgba(148,177,207,.24);
    --hp-accent:#38bdf8;
    --hp-accent-deep:#7dd3fc;
    --hp-accent-soft:rgba(56,189,248,.14);
    --hp-glow:rgba(56,189,248,.24);
    background:radial-gradient(circle at 50% 42%,rgba(14,165,233,.2),transparent 35%),linear-gradient(130deg,#050b1d,#0f1b2f 62%,#172337);
}
.hp-layout-compact_tech .hp-nav { border-bottom:1px solid rgba(148,177,207,.12); color:#fff; }
.hp-layout-compact_tech .hp-brand { background:#fff; border-radius:14px; color:#10213d; padding:8px 13px; }
.hp-layout-compact_tech .hp-nav-links a,
.hp-layout-compact_tech .hp-login-link { color:#a7b4c7; }
.hp-layout-compact_tech .hp-nav-links a:hover,
.hp-layout-compact_tech .hp-nav-links a.is-active,
.hp-layout-compact_tech .hp-login-link:hover { color:#7dd3fc; }
.hp-layout-compact_tech .hp-language,
.hp-layout-compact_tech .hp-mobile-nav summary,
.hp-layout-compact_tech .hp-mobile-nav-panel { background:#152238; border-color:rgba(148,177,207,.22); }
.hp-layout-compact_tech .hp-hero { grid-template-columns:1fr; isolation:isolate; place-items:center; position:relative; text-align:center; }
.hp-layout-compact_tech .hp-hero::before {
    background:linear-gradient(180deg,rgba(5,11,29,.72),rgba(5,11,29,.84));
    content:"";
    inset:0;
    position:absolute;
    z-index:1;
}
.hp-layout-compact_tech .hp-hero-copy { margin:0 auto; max-width:980px; z-index:2; }
.hp-layout-compact_tech .hp-eyebrow,
.hp-layout-compact_tech .hp-hero-actions { justify-content:center; }
.hp-layout-compact_tech .hp-hero h1 { font-size:clamp(48px,6.2vw,84px); line-height:1.06; margin-left:auto; margin-right:auto; max-width:1040px; }
.hp-layout-compact_tech .hp-lead { color:#a7b4c7; font-size:clamp(16px,1.55vw,21px); margin-left:auto; margin-right:auto; max-width:790px; }
.hp-layout-compact_tech .hp-button { border-radius:999px; min-width:170px; }
.hp-layout-compact_tech .hp-button-secondary { border-color:#38bdf8; color:#7dd3fc !important; }
.hp-layout-compact_tech .hp-hero-visual { inset:8% 4%; min-height:0; opacity:.22; position:absolute; width:auto; z-index:0; }
.hp-layout-compact_tech .hp-uploaded-hero { border:0; border-radius:42px; height:100%; inset:0; position:absolute; }
.hp-layout-compact_tech .hp-dashboard-preview { height:100%; left:10%; top:0; transform:scale(1.16); width:80%; }
.hp-layout-compact_tech .hp-mobile-preview,
.hp-layout-compact_tech .hp-orbit { display:none; }
.hp-layout-compact_tech .hp-compact-features { margin-left:auto; margin-right:auto; max-width:780px; }
.hp-layout-compact_tech .hp-compact-features article { background:rgba(17,31,51,.7); border-color:rgba(125,211,252,.22); color:#eaf8ff; justify-content:center; }

/* Compact Glass: one full visual with a translucent trust panel. */
.hp-layout-compact_glass {
    --hp-ink:#ffffff;
    --hp-muted:#e3e9f2;
    --hp-paper:#172236;
    --hp-paper-soft:#646b77;
    --hp-line:rgba(255,255,255,.25);
    --hp-accent:#24c694;
    --hp-accent-deep:#11a87b;
    --hp-accent-soft:rgba(36,198,148,.18);
    --hp-glow:rgba(7,30,45,.3);
    background:linear-gradient(135deg,#4d5664,#7e838d);
}
.hp-layout-compact_glass .hp-nav { color:#fff; }
.hp-layout-compact_glass .hp-brand { background:#fff; border-radius:14px; color:#10213d; padding:8px 13px; }
.hp-layout-compact_glass .hp-nav-links a,
.hp-layout-compact_glass .hp-login-link { color:rgba(255,255,255,.76); }
.hp-layout-compact_glass .hp-nav-links a:hover,
.hp-layout-compact_glass .hp-nav-links a.is-active,
.hp-layout-compact_glass .hp-login-link:hover { color:#fff; }
.hp-layout-compact_glass .hp-language,
.hp-layout-compact_glass .hp-mobile-nav summary,
.hp-layout-compact_glass .hp-mobile-nav-panel { background:rgba(19,30,47,.68); border-color:rgba(255,255,255,.22); }
.hp-layout-compact_glass .hp-hero {
    border:1px solid rgba(255,255,255,.22);
    border-radius:30px;
    grid-template-columns:1fr;
    isolation:isolate;
    overflow:hidden;
    padding-left:clamp(20px,6vw,80px);
    padding-right:clamp(20px,6vw,80px);
    place-items:center;
    position:relative;
}
.hp-layout-compact_glass .hp-hero::before {
    background:linear-gradient(135deg,rgba(26,35,49,.7),rgba(77,85,99,.62));
    content:"";
    inset:0;
    position:absolute;
    z-index:1;
}
.hp-layout-compact_glass .hp-hero-copy {
    background:rgba(76,85,99,.58);
    border:1px solid rgba(255,255,255,.3);
    border-radius:28px;
    box-shadow:0 28px 70px rgba(4,13,25,.34);
    color:#fff;
    margin:0 auto;
    max-width:1040px;
    padding:clamp(30px,4.2vw,56px);
    text-align:center;
    backdrop-filter:blur(14px);
    z-index:2;
}
.hp-layout-compact_glass .hp-eyebrow,
.hp-layout-compact_glass .hp-hero-actions { justify-content:center; }
.hp-layout-compact_glass .hp-eyebrow { color:#73e6c2; }
.hp-layout-compact_glass .hp-hero h1 { font-size:clamp(45px,5.6vw,76px); line-height:1.07; margin-left:auto; margin-right:auto; max-width:900px; }
.hp-layout-compact_glass .hp-lead { color:#eef2f7; margin-left:auto; margin-right:auto; max-width:790px; }
.hp-layout-compact_glass .hp-button { background:#fff; border-color:#fff; border-radius:12px; color:#087a5b !important; }
.hp-layout-compact_glass .hp-button:hover { background:#eafbf5; border-color:#eafbf5; color:#065e47 !important; }
.hp-layout-compact_glass .hp-button-secondary { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.68); color:#fff !important; }
.hp-layout-compact_glass .hp-hero-visual { inset:0; min-height:0; position:absolute; width:auto; z-index:0; }
.hp-layout-compact_glass .hp-uploaded-hero { border:0; border-radius:0; box-shadow:none; height:100%; inset:0; position:absolute; }
.hp-layout-compact_glass .hp-uploaded-hero img { object-position:center; }
.hp-layout-compact_glass .hp-dashboard-preview { height:100%; left:0; opacity:.78; top:0; transform:scale(1.16); width:100%; }
.hp-layout-compact_glass .hp-mobile-preview,
.hp-layout-compact_glass .hp-orbit { display:none; }
.hp-layout-compact_glass .hp-compact-features article { background:rgba(27,39,55,.58); border-color:rgba(255,255,255,.18); color:#fff; justify-content:center; }
.hp-layout-compact_glass .hp-compact-features article > span { background:#13b98a; color:#fff; }

@media (max-width: 980px) {
    .hp-hero { gap:38px; grid-template-columns:1fr; padding-top:35px; }
    .hp-hero-copy { max-width:700px; }
    .hp-hero-visual { margin:0 auto; max-width:630px; width:100%; }
    .hp-workflow, .hp-faq-section { gap:35px; grid-template-columns:1fr; }
    .hp-capability-grid { grid-template-columns:repeat(2, 1fr); }
    .hp-nav { gap:15px; }
    .hp-nav-links { gap:14px; margin-left:10px; }
    .hp-brand-logo { width:145px; }
    .hp-package-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); }
    .hp-about-hero { gap:45px; grid-template-columns:1fr .7fr; }
}
@media (max-width: 760px) {
    .workpro-homepage { padding-left:16px; padding-right:16px; }
    .hp-nav { gap:11px; min-height:72px; }
    .hp-nav-links, .hp-login-link { display:none; }
    .hp-mobile-nav { display:block; margin-left:auto; }
    .hp-brand-logo { max-height:39px; width:136px; }
    .hp-nav-actions { gap:8px; }
    .hp-button-small { font-size:12px; padding:9px 10px; }
    .hp-nav-actions > .hp-button-small { display:none; }
    .hp-hero { min-height:0; padding:39px 0 50px; }
    .hp-hero h1 { font-size:39px; }
    .hp-lead { font-size:15px; }
    .hp-hero-visual { min-height:312px; }
    .hp-uploaded-hero { height:300px; }
    .hp-dashboard-preview { height:284px; left:0; top:18px; width:calc(100% - 16px); }
    .hp-preview-sidebar { flex-basis:43px; gap:13px; padding-top:12px; }
    .hp-preview-sidebar span { height:25px; width:25px; }
    .hp-preview-main { padding:16px; }
    .hp-preview-heading { margin-top:16px; }
    .hp-preview-cards { margin-top:12px; }
    .hp-preview-cards div { min-height:58px; padding:8px; }
    .hp-preview-panel { margin-top:9px; padding:9px; }
    .hp-mobile-preview { bottom:-3px; right:0; transform:rotate(3deg) scale(.82); transform-origin:bottom right; }
    .hp-feature-strip { grid-template-columns:1fr; }
    .hp-feature-item { min-height:0; padding:22px; }
    .hp-feature-item + .hp-feature-item { border-left:0; border-top:1px solid var(--hp-line); }
    .hp-section { padding-top:78px; }
    .hp-capability-grid { grid-template-columns:1fr; margin-top:25px; }
    .hp-capability-card { min-height:0; padding:22px; }
    .hp-cta { align-items:flex-start; flex-direction:column; gap:27px; margin-top:78px; padding:31px 25px; }
    .hp-footer { align-items:flex-start; flex-direction:column; gap:10px; padding-top:30px; }
    .hp-footer small { margin-left:0; }
    .hp-page-hero { padding:58px 0 35px; text-align:left; }
    .hp-page-hero .hp-eyebrow { justify-content:flex-start; }
    .hp-page-hero h1 { font-size:43px; }
    .hp-page-hero > p:last-child { font-size:15px; margin-left:0; }
    .hp-package-section { padding-top:10px; }
    .hp-package-grid { grid-template-columns:1fr; }
    .hp-package-card { min-height:0; padding:24px; }
    .hp-about-hero { grid-template-columns:1fr; min-height:0; padding:55px 0 60px; }
    .hp-about-copy h1 { font-size:43px; }
    .hp-about-mark { max-width:260px; }
    .hp-about-values { grid-template-columns:1fr; }
    .hp-about-values article { min-height:0; padding:24px; }
    .hp-about-actions { align-items:stretch; flex-direction:column; width:100%; }
    .hp-about-actions .hp-button { width:100%; }
    .hp-faq-page { padding-top:0; }
    .hp-faq-page-item summary { padding:19px 17px; }
    .hp-faq-page-item summary > span { gap:11px; }
    .hp-faq-page-item summary small { flex-basis:32px; height:32px; }
    .hp-faq-page-item > p { margin:0 17px !important; padding:18px 0 21px; }
}
@media (max-width: 390px) {
    .hp-brand { font-size:15px; gap:7px; }
    .hp-brand-mark { border-radius:8px; height:27px; width:27px; }
    .hp-brand-logo { width:116px; }
    .hp-language a { padding:4px 6px; }
    .hp-button-small { max-width:108px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .hp-hero-actions { align-items:stretch; flex-direction:column; }
    .hp-button-large { width:100%; }
}
@media (max-width: 980px) {
    .hp-layout-professional_corporate .hp-hero { grid-template-columns:1fr; }
    .hp-layout-modern_tech .hp-hero { min-height:600px; }
    .hp-layout-premium_trust .hp-hero { padding:52px 38px; }
}
@media (max-width: 760px) {
    .hp-layout-modern_tech .hp-hero { min-height:520px; padding:62px 0 72px; }
    .hp-layout-modern_tech .hp-hero h1 { font-size:43px; }
    .hp-layout-premium_trust .hp-hero { border-radius:22px; min-height:590px; padding:32px 16px; }
    .hp-layout-premium_trust .hp-hero-copy { border-radius:18px; padding:30px 20px; }
    .hp-layout-premium_trust .hp-hero h1 { font-size:39px; }
    .hp-layout-premium_trust .hp-feature-strip { margin-top:18px; }
}
@media (min-width: 761px) and (max-width: 980px) {
    .hp-layout-compact_corporate .hp-hero { gap:25px; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); }
    .hp-layout-compact_corporate .hp-hero h1 { font-size:clamp(39px,5vw,52px); }
    .hp-layout-compact_corporate .hp-hero-visual { height:clamp(300px,43vh,440px); min-height:0; }
    .hp-layout-compact_tech .hp-hero-visual,
    .hp-layout-compact_glass .hp-hero-visual { margin:0; max-width:none; width:auto; }
}
@media (max-width: 760px) {
    .hp-single-screen:not(.hp-public-page) .hp-nav { min-height:72px; }
    .hp-single-screen:not(.hp-public-page) .hp-nav-actions > .hp-button { display:none; }
    .hp-single-screen:not(.hp-public-page) .hp-hero {
        min-height:calc(100vh - 72px);
        min-height:calc(100svh - 72px);
        padding-bottom:26px;
        padding-top:22px;
    }
    .hp-single-screen:not(.hp-public-page) .hp-hero-copy { max-width:none; width:100%; }
    .hp-single-screen:not(.hp-public-page) .hp-hero h1 { font-size:clamp(34px,10vw,43px); margin-top:12px; }
    .hp-single-screen:not(.hp-public-page) .hp-lead { line-height:1.55; margin-top:13px; }
    .hp-single-screen:not(.hp-public-page) .hp-hero-actions { margin-top:19px; }
    .hp-single-screen:not(.hp-public-page) .hp-button-large { min-height:45px; padding:11px 16px; }
    .hp-single-screen:not(.hp-public-page) .hp-brand-logo { width:124px; }
    .hp-layout-compact_tech .hp-brand,
    .hp-layout-compact_glass .hp-brand { padding:6px 9px; }
    .hp-compact-features { gap:6px; margin-top:18px; }
    .hp-compact-features article { border-radius:10px; display:block; padding:8px 5px; text-align:center; }
    .hp-compact-features article > span { height:24px; margin:0 auto 6px; width:24px; }
    .hp-compact-features strong { font-size:10px; line-height:1.25; }

    .hp-layout-compact_corporate .hp-hero {
        align-content:center;
        gap:18px;
        grid-template-columns:1fr;
        grid-template-rows:auto minmax(180px,30svh);
    }
    .hp-layout-compact_corporate .hp-hero-visual { height:100%; min-height:180px; }
    .hp-layout-compact_corporate .hp-uploaded-hero { height:100%; }
    .hp-layout-compact_corporate .hp-dashboard-preview { height:92%; top:4%; }
    .hp-layout-compact_corporate .hp-mobile-preview { display:none; }

    .hp-layout-compact_tech .hp-hero { place-items:center; text-align:center; }
    .hp-layout-compact_tech .hp-hero h1 { font-size:clamp(38px,11vw,49px); }
    .hp-layout-compact_tech .hp-hero-visual { inset:4% -10%; margin:0; max-width:none; width:auto; }
    .hp-layout-compact_tech .hp-compact-features { max-width:520px; }

    .hp-layout-compact_glass .hp-hero { border-radius:23px; padding-left:14px; padding-right:14px; }
    .hp-layout-compact_glass .hp-hero-copy { border-radius:20px; padding:25px 16px; }
    .hp-layout-compact_glass .hp-hero h1 { font-size:clamp(35px,10.5vw,46px); }
    .hp-layout-compact_glass .hp-hero-visual { margin:0; max-width:none; width:auto; }
}
@media (max-height: 680px) and (min-width: 761px) {
    /* Very short desktop windows may scroll rather than clipping controls. */
    .hp-single-screen:not(.hp-public-page) { overflow-y:auto; }
    .hp-single-screen:not(.hp-public-page) .hp-hero { min-height:600px; }
}
@media (prefers-reduced-motion: reduce) { .workpro-homepage *, .workpro-homepage *::before, .workpro-homepage *::after { scroll-behavior:auto !important; transition:none !important; } }