/* People Centric Works — Apple-inspired public design system */

.site-body,
.auth-body {
    --pcw-purple: #7c1fd6;
    --pcw-purple-deep: #500868;
    --pcw-purple-mid: #9b2fd4;
    --pcw-purple-light: #c44ef0;
    --pcw-gold: #efc760;
    --pcw-gold-bright: #f6e08a;
    --pcw-gold-deep: #c39228;
    --pcw-gold-ink: #0b0905;
    /* Deep aubergine into violet. Full-saturation magenta reads as neon on a
       large fill; the brand mark keeps the bright end of the range. */
    --pcw-gradient: linear-gradient(158deg, #23063d 0%, #450c76 30%, #6413ab 60%, #8420c9 100%);
    --pcw-gold-brass: url("../images/texture-c2680-brass.jpg");
    --pcw-gradient-soft: linear-gradient(180deg, #f8f4fc 0%, #ffffff 100%);
    --ease-out: cubic-bezier(.28, .11, .32, 1);
    --ease-in-out: cubic-bezier(.4, 0, .2, 1);
    --bg: #ffffff;
    --bg-alt: #f5f5f7;
    --bg-dark: #1d1d1f;
    --card: #ffffff;
    --text: #1d1d1f;
    --text-secondary: #6e6e73;
    --text-tertiary: #86868b;
    --line: rgba(0, 0, 0, .08);
    --line-strong: rgba(0, 0, 0, .12);
    --shadow-sm: 0 2px 12px rgba(0, 0, 0, .06);
    --shadow-md: 0 8px 32px rgba(80, 8, 104, .08);
    --shadow-lg: 0 24px 64px rgba(80, 8, 104, .12);
    --radius: 18px;
    --radius-lg: 28px;
    --radius-pill: 980px;
    --page-pad: clamp(1.25rem, 5vw, 4.5rem);
    --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --container-max: 980px;
    --container-wide: 1200px;
    --nav-h: 52px;
    --pcw-nav-ink: #14110c;
}

html[data-appearance="dark"] .site-body,
html[data-appearance="dark"] .auth-body {
    --pcw-gradient-soft: linear-gradient(180deg, #1d1d1f 0%, #000000 100%);
    --bg: #000000;
    --bg-alt: #1d1d1f;
    --card: #1d1d1f;
    --text: #f5f5f7;
    --text-secondary: #a1a1a6;
    --text-tertiary: #86868b;
    --line: rgba(255, 255, 255, .12);
    --line-strong: rgba(255, 255, 255, .18);
    --shadow-sm: 0 2px 12px rgba(0, 0, 0, .4);
    --shadow-md: 0 8px 32px rgba(0, 0, 0, .45);
    --shadow-lg: 0 24px 64px rgba(0, 0, 0, .5);
    --pcw-gold-ink: #0b0905;
    --pcw-nav-ink: #14110c;
    --pcw-gold-deep: #e8d08a;
}

html.appearance-animating .site-body,
html.appearance-animating .auth-body,
html.appearance-animating .site-header,
html.appearance-animating .site-footer,
html.appearance-animating .pcw-page-hero,
html.appearance-animating .pcw-section-alt,
html.appearance-animating .pcw-product-card,
html.appearance-animating .auth-card {
    transition: background-color .28s ease, color .28s ease, border-color .28s ease, box-shadow .28s ease;
}
@media (prefers-reduced-motion: reduce) {
    html.appearance-animating .site-body,
    html.appearance-animating .auth-body,
    html.appearance-animating .site-header,
    html.appearance-animating .site-footer,
    html.appearance-animating .pcw-page-hero,
    html.appearance-animating .pcw-section-alt,
    html.appearance-animating .pcw-product-card,
    html.appearance-animating .auth-card {
        transition: none;
    }
}

.site-body,
.auth-body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 17px;
    line-height: 1.47059;
    letter-spacing: -.022em;
    -webkit-font-smoothing: antialiased;
}

.site-body h1,
.site-body h2,
.site-body h3,
.auth-body h1,
.auth-body h2 {
    font-family: var(--font);
    font-weight: 600;
    letter-spacing: -.025em;
    color: var(--text);
}

:is(.site-body, .auth-body) :focus-visible { outline: 3px solid var(--pcw-gold); outline-offset: 3px; }
:is(.site-body, .auth-body) p { color: var(--text-secondary); }
.site-body .container {
    width: 100%;
    max-width: var(--container-wide);
    margin-inline: auto;
    padding-inline: var(--page-pad);
    box-sizing: border-box;
}
.site-body .container.narrow { max-width: var(--container-max); }

/* ── Navigation — C2680 mill brass ──
   Photograph-matched yellow brass: mill-roll grain along the bar, not wood
   and not a flat CSS fill. */
.site-body .site-header {
    position: fixed;
    inset: 0 0 auto;
    height: var(--nav-h);
    z-index: 200;
    color: var(--pcw-nav-ink);
    background-color: #efc760;
    background-image: var(--pcw-gold-brass);
    background-repeat: repeat-x;
    background-position: center;
    background-size: auto 100%;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 0;
    box-shadow:
        inset 0 1px 0 rgba(255, 248, 220, .55),
        inset 0 -1px 0 rgba(92, 62, 12, .42),
        0 1px 0 rgba(84, 56, 14, .16),
        0 8px 24px rgba(84, 56, 14, .12);
    transition: box-shadow .4s var(--ease-out);
}
.site-body .site-header::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background: linear-gradient(90deg, rgba(70, 48, 8, .14), transparent 12%, transparent 88%, rgba(70, 48, 8, .14));
}
.site-body .site-header.scrolled {
    box-shadow:
        inset 0 1px 0 rgba(255, 248, 220, .55),
        inset 0 -1px 0 rgba(92, 62, 12, .48),
        0 1px 0 rgba(84, 56, 14, .18),
        0 12px 32px rgba(84, 56, 14, .16);
}
.site-body .nav-shell {
    position: relative;
    z-index: 1;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: var(--container-wide);
    margin-inline: auto;
    padding-inline: var(--page-pad);
}
.site-body .brand {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    text-decoration: none;
    color: var(--pcw-nav-ink);
    flex: 0 0 auto;
}
.site-body .brand-logo {
    width: 28px;
    height: 28px;
    border-radius: 0;
    overflow: visible;
    box-shadow: none;
    background: transparent;
}
.site-body .brand-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    padding: 0;
    background: transparent;
}
.site-body .brand-copy {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -.02em;
    line-height: 1.2;
}
.site-body .site-header .brand-copy,
.site-body .site-nav a:not(.button) {
    text-shadow: none;
}
.site-body .brand-copy small {
    display: none;
}
.site-body .site-nav {
    display: flex;
    align-items: center;
    gap: clamp(12px, 2vw, 28px);
    margin-left: auto;
}
.site-body .nav-tools {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 0 0 auto;
    margin-left: 4px;
}
.appearance-toggle {
    appearance: none;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex: 0 0 44px;
}
.appearance-toggle:hover {
    background: rgba(20, 16, 10, .08);
}
.appearance-toggle:focus-visible {
    outline: 3px solid rgba(46, 30, 6, .85);
    outline-offset: 2px;
}
.site-body .site-nav a {
    font-size: .9375rem;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--pcw-nav-ink);
    text-decoration: none;
    opacity: 1;
    transition: color .2s, box-shadow .2s;
}
.site-body .site-nav a:hover { color: #000; }
.site-body .site-nav a.active {
    box-shadow: inset 0 -2px 0 currentColor;
}
.site-body .site-nav .nav-login { color: var(--pcw-nav-ink); opacity: 1; }
.site-body .site-nav .button {
    font-size: .8125rem;
    padding: 8px 16px;
    border-radius: var(--radius-pill);
    background: var(--pcw-purple-deep);
    color: #fff;
    font-weight: 500;
    opacity: 1;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .28), 0 6px 16px rgba(80, 8, 104, .28);
    border: none;
}
.site-body .site-nav .button:hover {
    filter: brightness(1.08);
    transform: none;
}
.site-body .nav-toggle {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}
/* margin and flex-shrink are reset explicitly: inherited vertical margins
   overflow the 44px button, and shrinking collapses the bars to zero height. */
.site-body .nav-toggle span:not(.sr-only) {
    display: block;
    flex: 0 0 auto;
    width: 19px;
    height: 2px;
    margin: 0;
    background: var(--pcw-nav-ink);
    border-radius: 2px;
}

@media (max-width: 860px) {
    .site-body .nav-toggle { display: flex; }
    .site-body .site-nav {
        margin-left: 0;
        position: fixed;
        inset: var(--nav-h) 0 auto;
        flex-direction: column;
        align-items: stretch;
        padding: 20px var(--page-pad) 28px;
        background-color: #efc760;
        background-image: var(--pcw-gold-brass);
        background-repeat: repeat-x;
        background-size: auto 100%;
        backdrop-filter: none;
        border-bottom: 1px solid rgba(58, 38, 10, .45);
        box-shadow: inset 0 1px 0 rgba(255, 250, 232, .5), 0 18px 36px rgba(84, 56, 14, .2);
        transform: translateY(-120%);
        opacity: 0;
        pointer-events: none;
        transition: transform .35s ease, opacity .35s ease;
        z-index: 199;
    }
    .site-body .site-nav.open {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
    }
    .site-body .site-nav a { padding: 10px 0; font-size: 1.0625rem; }
    .site-body .site-nav .button { text-align: center; margin-top: 8px; }
    .site-body .nav-tools { margin-left: auto; }
}

/* ── Buttons & links ── */
:is(.site-body, .auth-body) .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 22px;
    border-radius: var(--radius-pill);
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: transform .2s, filter .2s, background .2s;
    /* Solid, not the hero gradient: across 48px the dark end of the ramp turns
       the control muddy and drops the contrast against white text. */
    background: var(--pcw-purple);
    color: #fff;
}
:is(.site-body, .auth-body) .button:hover { background: var(--pcw-purple-mid); filter: none; }
:is(.site-body, .auth-body) .button-ghost {
    background: transparent;
    color: #fff;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45);
}
:is(.site-body, .auth-body) .button-ghost:hover { background: rgba(255, 255, 255, .12); filter: none; }
:is(.site-body, .auth-body) .button-light {
    background: #fff;
    color: var(--pcw-purple-deep);
}
:is(.site-body, .auth-body) .button-light:hover { filter: brightness(.97); }
:is(.site-body, .auth-body) .button-outline {
    background: transparent;
    color: var(--pcw-purple);
    box-shadow: inset 0 0 0 1px var(--line-strong);
}
:is(.site-body, .auth-body) .button-outline:hover {
    background: var(--bg-alt);
    filter: none;
}
:is(.site-body, .auth-body) .button-block { width: 100%; }
:is(.site-body, .auth-body) .button-sm { padding: 8px 16px; font-size: .875rem; }
:is(.site-body, .auth-body) .text-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--pcw-purple);
    font-size: 1.0625rem;
    font-weight: 400;
    text-decoration: none;
}
:is(.site-body, .auth-body) .text-link:hover { color: var(--pcw-gold-deep); text-decoration: underline; }
:is(.site-body, .auth-body) .text-link svg { width: .75em; height: .75em; }

/* ── Hero ── */
.pcw-hero {
    position: relative;
    min-height: clamp(520px, 88vh, 780px);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: calc(var(--nav-h) + 48px) var(--page-pad) 80px;
    overflow: hidden;
    color: #fff;
}
.pcw-hero-bg {
    position: absolute;
    inset: 0;
    background: var(--pcw-gradient);
}
.pcw-hero-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 50% at 50% 34%, rgba(190, 120, 255, .28), transparent 68%),
        radial-gradient(ellipse 90% 60% at 50% 118%, rgba(0, 0, 0, .42), transparent 62%);
}
.pcw-hero-inner {
    position: relative;
    z-index: 1;
    max-width: 820px;
}
.pcw-hero-logo {
    width: min(320px, 78vw);
    height: auto;
    margin: 0 auto 36px;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}
.pcw-hero h1 {
    font-size: clamp(2.75rem, 7vw, 4.5rem);
    font-weight: 700;
    letter-spacing: -.04em;
    line-height: 1.05;
    color: #fff;
    margin-bottom: 16px;
}
/* Scoped to .site-body so it outranks the global paragraph colour. */
.site-body .pcw-hero-sub {
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
    font-weight: 400;
    color: rgba(255, 255, 255, .86);
    letter-spacing: -.015em;
    line-height: 1.35;
    margin-bottom: 32px;
}
.site-body .pcw-hero p { color: rgba(255, 255, 255, .86); }
.site-body .pcw-cta p { color: rgba(255, 255, 255, .82); }
.pcw-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
}

/* Page hero (inner pages) */
.pcw-page-hero {
    padding: calc(var(--nav-h) + 64px) var(--page-pad) 56px;
    text-align: center;
    background: var(--pcw-gradient-soft);
    border-bottom: 1px solid var(--line);
}
.pcw-page-hero h1 {
    font-size: clamp(2.25rem, 5vw, 3.5rem);
    font-weight: 700;
    letter-spacing: -.035em;
    max-width: 26ch;
    margin-inline: auto;
    margin-bottom: 16px;
}
/* An authored break beats the balancer when the line is a full sentence. */
.pcw-page-hero h1:has(br) { text-wrap: initial; }
.pcw-page-hero p {
    font-size: clamp(1.0625rem, 2vw, 1.3125rem);
    max-width: 42ch;
    margin-inline: auto;
    color: var(--text-secondary);
}
.pcw-page-hero-action { margin-top: 28px; }
.pcw-eyebrow {
    display: inline-block;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--pcw-gold-deep);
    margin-bottom: 12px;
}

/* ── Sections ── */
.pcw-section {
    padding: clamp(64px, 10vw, 120px) 0;
}
.pcw-section-alt { background: var(--bg-alt); }
.pcw-section-tight { padding-top: clamp(40px, 5vw, 56px); padding-bottom: 0; }
.pcw-section-flush-top { padding-top: 0; }
.pcw-section-head {
    text-align: center;
    max-width: 680px;
    margin: 0 auto clamp(40px, 6vw, 64px);
}
.pcw-section-head h2 {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    letter-spacing: -.03em;
    margin-bottom: 12px;
}
.pcw-section-head p {
    font-size: 1.1875rem;
    color: var(--text-secondary);
}

/* Product grid */
.pcw-product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
    gap: 20px;
}
.pcw-product-card {
    display: flex;
    flex-direction: column;
    padding: 32px 28px;
    background: var(--bg);
    border-radius: var(--radius-lg);
    border: 1px solid var(--line);
    text-decoration: none;
    color: inherit;
    transition: transform .3s ease, box-shadow .3s ease;
}
.pcw-section-alt .pcw-product-card { background: var(--card); }
.pcw-product-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}
.pcw-product-card .brand-mark-svg {
    color: var(--pcw-purple);
    margin-bottom: 20px;
}
.pcw-product-card h3 {
    font-size: 1.375rem;
    font-weight: 600;
    margin-bottom: 8px;
}
.pcw-product-card p {
    font-size: .9375rem;
    flex: 1;
    margin-bottom: 16px;
}
.pcw-product-card .card-link {
    font-size: 1.0625rem;
    color: var(--pcw-purple);
    font-weight: 400;
}
/* Seven cards across three columns leaves one stranded on its own row. */
@media (min-width: 1180px) {
    .pcw-product-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Section jump list: a dense index, not seven half-empty cards. */
.pcw-jump-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
    gap: 12px;
    margin-bottom: clamp(32px, 5vw, 48px);
}
@media (min-width: 1180px) {
    .pcw-jump-grid { grid-template-columns: repeat(4, 1fr); }
}
.pcw-jump-grid .pcw-product-card {
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    border-radius: var(--radius);
}
.pcw-jump-grid .pcw-product-card .brand-mark-svg {
    flex: 0 0 auto;
    margin-bottom: 0;
}
.pcw-jump-grid .pcw-product-card h3 {
    font-size: 1rem;
    margin: 0;
}
.pcw-jump-grid .pcw-product-card .card-link {
    margin-left: auto;
    font-size: .8125rem;
    color: var(--text-tertiary);
}

/* Process steps */
.pcw-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 24px;
}
.pcw-step {
    padding: 28px 24px;
    border-radius: var(--radius);
    background: var(--card);
    border: 1px solid var(--line);
}
.pcw-step-num {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--pcw-gold-deep);
    margin-bottom: 12px;
}
.pcw-step .brand-mark-svg { color: var(--pcw-purple); margin-bottom: 16px; }
.pcw-step h3 { font-size: 1.25rem; margin-bottom: 8px; }
.pcw-step p { font-size: .9375rem; margin: 0; }

/* Feature rows (services/solutions) */
.pcw-feature {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(32px, 6vw, 64px);
    align-items: center;
    padding: clamp(48px, 8vw, 96px) 0;
    border-bottom: 1px solid var(--line);
}
.pcw-feature:last-child { border-bottom: none; }
.pcw-feature.reverse .pcw-feature-copy { order: 2; }
.pcw-feature.reverse .pcw-feature-media { order: 1; }
.pcw-feature-num {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--pcw-gold-deep);
    margin-bottom: 8px;
}
.pcw-feature-copy h2 {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 700;
    margin-bottom: 16px;
}
.pcw-feature-copy > p {
    font-size: 1.0625rem;
    margin-bottom: 24px;
}
.pcw-deliverables {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
}
.pcw-deliverables li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 0;
    font-size: .9375rem;
    color: var(--text-secondary);
}
.pcw-deliverables .brand-mark-svg {
    flex-shrink: 0;
    color: var(--pcw-purple);
    margin-top: 2px;
}
.pcw-feature-media .sample-open-link,
.pcw-feature-media .sample-frame {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}
@media (max-width: 900px) {
    .pcw-feature,
    .pcw-feature.reverse {
        grid-template-columns: 1fr;
    }
    .pcw-feature.reverse .pcw-feature-copy,
    .pcw-feature.reverse .pcw-feature-media { order: unset; }
}

/* Solution flow pills */
.pcw-flow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
}
.pcw-flow span {
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    background: var(--bg-alt);
    font-size: .8125rem;
    font-weight: 500;
    color: var(--text);
}
.pcw-flow i {
    width: 20px;
    height: 1px;
    background: var(--line-strong);
}

/* About */
.pcw-story {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: start;
}
.pcw-story h2 { font-size: clamp(1.75rem, 3vw, 2.25rem); margin-bottom: 0; }
.pcw-story .brand-mark-svg { color: var(--pcw-purple); margin-bottom: 20px; }
@media (max-width: 768px) { .pcw-story { grid-template-columns: 1fr; } }

.pcw-values {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
}
.pcw-value {
    padding: 28px 24px;
    background: var(--card);
    border-radius: var(--radius);
    border: 1px solid var(--line);
}
.pcw-value .brand-mark-svg { color: var(--pcw-purple); margin-bottom: 16px; }
.pcw-value span {
    font-size: .75rem;
    font-weight: 600;
    color: var(--text-tertiary);
}
.pcw-value h3 { font-size: 1.125rem; margin: 8px 0; }
.pcw-value p { font-size: .9375rem; margin: 0; }

/* Contact */
.pcw-contact {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: clamp(32px, 5vw, 64px);
    align-items: start;
}
.pcw-contact-aside h2 {
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    margin-bottom: 16px;
}
.pcw-contact-list {
    display: grid;
    gap: 20px;
    margin: 32px 0;
}
.pcw-contact-list > div {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}
.pcw-contact-list .brand-mark-svg { color: var(--pcw-purple); flex-shrink: 0; }
.pcw-contact-list strong { display: block; font-size: 1rem; color: var(--text); }
.pcw-contact-list small { font-size: .875rem; color: var(--text-secondary); }
@media (max-width: 900px) { .pcw-contact { grid-template-columns: 1fr; } }

/* Forms */
:is(.site-body, .auth-body) .form-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: clamp(28px, 4vw, 40px);
    box-shadow: var(--shadow-sm);
}
:is(.site-body, .auth-body) .field { margin-bottom: 20px; }
:is(.site-body, .auth-body) .field label {
    display: block;
    font-size: .875rem;
    font-weight: 500;
    margin-bottom: 6px;
    color: var(--text);
}
:is(.site-body, .auth-body) .field label span { color: var(--pcw-purple); }
:is(.site-body, .auth-body) .field input,
:is(.site-body, .auth-body) .field textarea,
:is(.site-body, .auth-body) .field select {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--line-strong);
    border-radius: 12px;
    font-size: 1rem;
    background: var(--bg);
    color: var(--text);
    transition: border-color .2s, box-shadow .2s;
}
:is(.site-body, .auth-body) .field input:focus,
:is(.site-body, .auth-body) .field textarea:focus,
:is(.site-body, .auth-body) .field select:focus {
    outline: none;
    border-color: var(--pcw-purple);
    box-shadow: 0 0 0 4px rgba(124, 31, 214, .12);
}
:is(.site-body, .auth-body) .field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
:is(.site-body, .auth-body) .field small { font-size: .8125rem; color: var(--text-tertiary); margin-top: 6px; display: block; }
:is(.site-body, .auth-body) .alert {
    padding: 12px 16px;
    border-radius: 12px;
    margin-bottom: 20px;
    font-size: .9375rem;
}
:is(.site-body, .auth-body) .alert-success { background: #ecfdf3; color: #166534; border: 1px solid #bbf7d0; }
:is(.site-body, .auth-body) .alert-error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.site-body .form-privacy {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .8125rem;
    color: var(--text-tertiary);
    margin-top: 16px;
    margin-bottom: 0;
}

/* CTA band */
.pcw-cta {
    text-align: center;
    padding: clamp(56px, 8vw, 96px) var(--page-pad);
    background: var(--pcw-gradient);
    color: #fff;
    border-radius: var(--radius-lg);
    margin: 0 var(--page-pad) clamp(64px, 10vw, 120px);
    max-width: calc(var(--container-wide) - var(--page-pad) * 2);
    margin-inline: auto;
}
.pcw-cta h2 {
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    color: #fff;
    margin-bottom: 12px;
}
.pcw-cta p {
    color: rgba(255, 255, 255, .85);
    font-size: 1.125rem;
    margin-bottom: 28px;
    max-width: 40ch;
    margin-inline: auto;
}

/* Footer */
.site-body .site-footer {
    background: var(--bg-alt);
    border-top: 1px solid var(--line);
    padding: 56px 0 24px;
    color: var(--text-secondary);
    font-size: .8125rem;
}
.site-body .footer-grid {
    display: grid;
    grid-template-columns: 1.4fr repeat(3, 1fr);
    align-items: start;
    gap: 32px;
    max-width: var(--container-wide);
    margin-inline: auto;
    padding-inline: var(--page-pad);
}
/* The old stylesheet spans the last column across the whole grid between 821
   and 1050px, which against a four-track layout drops it to its own row and
   leaves the fourth column empty. */
.site-body .footer-grid > div:last-child { grid-column: auto; }
/* Every column opens with a row the height of the brand lockup, so the column
   headings and the brand name sit on one optical line instead of the headings
   riding 7px high against a 28px mark. */
.site-body .footer-grid h2 {
    display: flex;
    align-items: center;
    min-height: 28px;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--text);
    margin-bottom: 8px;
}
/* The link-list rule must skip the brand lockup: forcing display:block on it
   makes the logo span inline, which drops its 28px box and lets the inner
   width:100% image stretch to the whole column. */
.site-body .footer-grid a:not(.footer-brand) {
    display: block;
    padding: 4px 0;
    color: var(--text-secondary);
    text-decoration: none;
}
.site-body .footer-grid a:not(.footer-brand):hover {
    color: var(--pcw-gold-deep);
    text-decoration: underline;
}
.site-body .footer-brand {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    text-decoration: none;
    color: var(--text);
}
.site-body .footer-brand .brand-copy { font-size: .9375rem; }
.site-body .footer-grid > div > p {
    margin-top: 12px;
    max-width: 34ch;
    line-height: 1.5;
}
.site-body .footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;
    max-width: var(--container-wide);
    margin: 32px auto 0;
    padding: 20px var(--page-pad) 0;
    border-top: 1px solid var(--line);
    color: var(--text-tertiary);
}
@media (max-width: 768px) {
    .site-body .footer-grid { grid-template-columns: 1fr 1fr; }
    /* Half a column is too narrow for the lockup — the name breaks across two
       lines and drops out of line with the headings beside it. */
    .site-body .footer-grid > div:first-child { grid-column: 1 / -1; }
    :is(.site-body, .auth-body) .field-row { grid-template-columns: 1fr; }
}

/* Sample frames — light Apple chrome */
.site-body .sample-frame {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
}
.site-body .sample-chrome {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: var(--bg-alt);
    border-bottom: 1px solid var(--line);
    font-size: .75rem;
}
.site-body .sample-chrome span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ddd;
}
.site-body .sample-chrome span:nth-child(1) { background: #ff5f57; }
.site-body .sample-chrome span:nth-child(2) { background: #febc2e; }
.site-body .sample-chrome span:nth-child(3) { background: #28c840; }
.site-body .sample-chrome small {
    flex: 1;
    font-weight: 600;
    color: var(--text);
    margin-left: 4px;
}
.site-body .sample-chrome em {
    font-style: normal;
    font-weight: 600;
    font-size: .6875rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--pcw-gold-deep);
}
.site-body .sample-open-link {
    display: block;
    text-decoration: none;
    color: inherit;
    position: relative;
}
.site-body .sample-open-cta {
    display: block;
    text-align: center;
    padding: 10px;
    font-size: .8125rem;
    font-weight: 500;
    color: var(--pcw-purple);
    background: var(--bg-alt);
    border-top: 1px solid var(--line);
}
.site-body .sample-open-link:hover .sample-open-cta { background: var(--line); }

/* Sample dashboard internals — light theme overrides */
.site-body .sample-body { padding: 18px; background: var(--card); }
.site-body .sample-mis-kpis article,
.site-body .sample-mis-main section,
.site-body .sample-mis-main aside,
.site-body .sample-crm-pipeline article,
.site-body .sample-portal-sidebar,
.site-body .sample-portal-main,
.site-body .sample-ticket article,
.site-body .sample-hr article,
.site-body .sample-zoho article,
.site-body .sample-systems-map {
    background: var(--bg-alt) !important;
    border-color: var(--line) !important;
}
.site-body .sample-mis-kpis small,
.site-body .sample-mis-main header small,
.site-body .sample-rows > div,
.site-body .sample-crm-pipeline small {
    color: var(--text-tertiary) !important;
}
.site-body .sample-mis-kpis strong,
.site-body .sample-mis-main header strong,
.site-body .sample-crm-pipeline strong {
    color: var(--text) !important;
}
.site-body .sample-spark i {
    background: linear-gradient(180deg, var(--pcw-purple-light), rgba(124, 31, 214, .2)) !important;
}
.site-body .sample-rows b { color: var(--pcw-purple) !important; }
.site-body .sample-mis-kpis .up { color: #059669 !important; }
.site-body .sample-mis-kpis .down { color: #d97706 !important; }

/* Scroll reveal */
[data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .7s ease, transform .7s ease;
}
[data-reveal].is-visible {
    opacity: 1;
    transform: none;
}
@media (prefers-reduced-motion: reduce) {
    [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* Auth — Apple style */
.auth-body {
    min-height: 100vh;
    background: var(--bg-alt);
    font-family: var(--font);
    color: var(--text);
    display: flex;
    flex-direction: column;
}
.auth-body .auth-top {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 20px var(--page-pad) 0;
    color: var(--text);
}
.auth-body .auth-top .appearance-toggle { color: var(--text); }
.auth-body .auth-shell {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    max-width: 960px;
    margin: 0 auto;
    padding: 24px var(--page-pad) 64px;
    align-items: center;
    width: 100%;
}
.auth-body .auth-card {
    background: var(--card);
    border-radius: var(--radius-lg);
    padding: 40px 36px;
    border: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
}
.auth-body .auth-card-head .brand-mark-svg { color: var(--pcw-purple); margin-bottom: 16px; }
.auth-body .auth-card-logo {
    display: inline-flex;
    margin-bottom: 18px;
    text-decoration: none;
}
.auth-body .auth-card-logo img {
    width: min(196px, 74vw);
    height: auto;
    display: block;
}
.auth-body .auth-card-logo-dark { display: none; }
html[data-appearance="dark"] .auth-body .auth-card-logo-light { display: none; }
html[data-appearance="dark"] .auth-body .auth-card-logo-dark { display: block; }
.auth-body .auth-card-head h1 { font-size: 2rem; margin-bottom: 8px; }
.auth-body .auth-card-head p { margin-bottom: 28px; }
.auth-body .auth-aside h2 { font-size: 1.75rem; margin-bottom: 20px; }
.auth-body .check-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.auth-body .check-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    color: var(--text-secondary);
}
.auth-body .check-list .brand-mark-svg { color: var(--pcw-purple); }
.auth-body .auth-help {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
    font-size: .875rem;
    color: var(--text-secondary);
}
.auth-body .auth-help a { color: var(--pcw-purple); }
.auth-body .password-field { position: relative; }
.auth-body .password-field input { padding-right: 76px; }
.auth-body .password-field button {
    position: absolute;
    right: 8px;
    top: 30px;
    min-width: 56px;
    min-height: 36px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--pcw-purple);
    font-size: .875rem;
    font-weight: 500;
    cursor: pointer;
}
.auth-body .password-field button:hover { background: var(--bg-alt); }
@media (max-width: 768px) {
    .auth-body .auth-shell { grid-template-columns: 1fr; }
    .auth-body .auth-aside { order: -1; text-align: center; }
}

/* ── Refinements ─────────────────────────────────────────────────────────
   Detail pass: typography rag, press feedback, focus order and motion. */

.site-body ::selection,
.auth-body ::selection {
    background: rgba(124, 31, 214, .18);
    color: var(--text);
}

/* Let headings break on sense rather than leaving one orphaned word. */
.site-body h1,
.site-body h2,
.pcw-hero h1,
.pcw-page-hero h1,
.pcw-section-head h2 {
    text-wrap: balance;
}
.site-body .pcw-section-head p,
.site-body .pcw-page-hero p,
.site-body .pcw-feature-copy > p {
    text-wrap: pretty;
}

/* Optical tracking: large type needs tighter letterfit than body copy. */
.pcw-hero h1 { letter-spacing: -.042em; }
.pcw-section-head h2 { letter-spacing: -.032em; }

/* Press feedback. Controls should acknowledge the touch, not just the hover. */
:is(.site-body, .auth-body) .button {
    transition:
        transform .22s var(--ease-out),
        filter .22s var(--ease-out),
        box-shadow .22s var(--ease-out);
}
:is(.site-body, .auth-body) .button:active { transform: scale(.97); }
.site-body .site-nav .button:active { transform: scale(.96); }

.site-body .pcw-product-card {
    transition:
        transform .4s var(--ease-out),
        box-shadow .4s var(--ease-out),
        border-color .4s var(--ease-out);
}
.site-body .pcw-product-card:hover {
    border-color: rgba(124, 31, 214, .22);
}
.site-body .pcw-product-card:active { transform: translateY(-1px); }

/* Keyboard users get the same affordance as pointer users. */
.site-body .pcw-product-card:focus-visible {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: rgba(124, 31, 214, .3);
}
.site-body .site-header a:focus-visible {
    outline-color: rgba(46, 30, 6, .85);
    outline-offset: 4px;
    border-radius: 4px;
}

.site-body .sample-open-link { transition: transform .4s var(--ease-out); }
.site-body .sample-open-link:hover { transform: translateY(-2px); }

[data-reveal] {
    transition:
        opacity .8s var(--ease-out),
        transform .8s var(--ease-out);
}

/* Honour the OS setting: no transforms, no reveal, nothing that moves. */
@media (prefers-reduced-motion: reduce) {
    .site-body *,
    .auth-body * {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    :is(.site-body, .auth-body) .button:active,
    .site-body .pcw-product-card:hover,
    .site-body .pcw-product-card:active,
    .site-body .sample-open-link:hover {
        transform: none;
    }
}

html[data-appearance="dark"] .site-body .site-header {
    background-color: #efc760;
    background-image: var(--pcw-gold-brass);
    box-shadow:
        inset 0 1px 0 rgba(255, 248, 220, .55),
        inset 0 -1px 0 rgba(92, 62, 12, .42),
        0 1px 0 rgba(84, 56, 14, .16),
        0 8px 24px rgba(84, 56, 14, .12);
}
html[data-appearance="dark"] .site-body .site-header::before {
    background: linear-gradient(90deg, rgba(70, 48, 8, .14), transparent 12%, transparent 88%, rgba(70, 48, 8, .14));
}
html[data-appearance="dark"] .site-body .site-nav a:hover { color: #000; }
html[data-appearance="dark"] .appearance-toggle:hover {
    background: rgba(255, 244, 220, .1);
}
/* In dark appearance, icons should follow the gold accent direction rather
   than staying purple, so they read on the dark card surfaces. */
html[data-appearance="dark"] :is(.site-body, .auth-body) .brand-mark-svg {
    color: var(--pcw-gold-deep);
}
html[data-appearance="dark"] .appearance-toggle:focus-visible,
html[data-appearance="dark"] .site-body .site-header a:focus-visible {
    outline-color: rgba(243, 234, 216, .85);
}
html[data-appearance="dark"] .site-body .site-nav {
    color: var(--pcw-nav-ink);
}
@media (max-width: 860px) {
    html[data-appearance="dark"] .site-body .site-nav {
        background-color: #efc760;
        background-image: var(--pcw-gold-brass);
        background-repeat: repeat-x;
        background-size: auto 100%;
        box-shadow: inset 0 1px 0 rgba(255, 250, 232, .5), 0 18px 36px rgba(84, 56, 14, .2);
    }
}

html[data-appearance="dark"] :is(.site-body, .auth-body) .alert-success {
    background: rgba(22, 101, 52, .22);
    color: #86efac;
    border-color: rgba(74, 222, 128, .28);
}
html[data-appearance="dark"] :is(.site-body, .auth-body) .alert-error {
    background: rgba(127, 29, 29, .28);
    color: #fca5a5;
    border-color: rgba(248, 113, 113, .3);
}

@media print {
    .site-body .site-header,
    .site-body .nav-toggle { position: static; box-shadow: none; }
    .pcw-hero { min-height: auto; color: #000; }
    .pcw-hero-bg { display: none; }
    .appearance-toggle { display: none; }
}