/* Plucky for Business — draft skin.
 *
 * Temporary greyscale overlay for the pilot. The visual design of the public
 * landing page is not settled, and a fully branded page invites feedback on
 * colour and polish instead of on structure and copy. This file strips the
 * page back to a flat greyscale wireframe so it reads as a draft on sight.
 *
 * Two scopes, on purpose:
 *   .design-page          — the landing page only. Every other page on the
 *                           inbox host (register, login, press release,
 *                           organization) keeps its brand colours.
 *   .landing-nav / footer — shared chrome, greyscaled host-wide so the header
 *                           and footer do not fight the grey page they frame.
 *
 * Nothing here changes markup. Sections stay tenant-toggleable exactly as
 * they are. Delete this file and its <link> in base.html to restore the
 * branded design.
 *
 * Convention: a dashed hairline marks fabricated placeholder data (the hero
 * release panel, the workspace snapshot). Solid hairlines mark real copy.
 */

body:has(.design-page),
.design-page,
.landing-nav,
.biz-footer {
    /* Neutral ramp. All body/muted values clear WCAG AA on both the white
       and the #f2f2f2 bands they sit on. */
    --draft-ink: #1f1f1f;
    --draft-body: #444444;
    --draft-muted: #6e6e6e;

    --draft-surface: #ffffff;
    --draft-band: #f2f2f2;
    --draft-band-soft: #f8f8f8;

    --draft-line: #d4d4d4;
    --draft-line-soft: #e6e6e6;
    --draft-line-strong: #b0b0b0;

    --draft-action: #333333;
    --draft-action-hover: #1a1a1a;
    --draft-footer: #2b2b2b;

    /* Flatten the shared surface tokens in place. Redefining them here rather
       than overriding each rule squares every pill, card and band inside these
       scopes at once, and leaves the rest of the site's tokens untouched. */
    --radius-xl: 4px;
    --radius-lg: 4px;
    --radius-3: 4px;
    --radius-pill: 4px;
    --shadow-sm: none;
    --shadow-card: none;
    --shadow-soft: none;
}

/* ----- Layout ---------------------------------------------------------- */

/* .pw-main-offset pushes content clear of a *fixed* navbar, but this host's
   .landing-nav is sticky and already occupies its own space. The 75px was
   rendering as an empty band between the header and the hero. */
main.pw-main-offset:has(.design-page) {
    padding-top: 0;
}

/* The paper-cream body colour was showing through the footer's 80px top
   margin as a warm stripe between the last grey band and the dark footer.
   Both are scoped to the draft page; other pages keep the cream. */
body:has(.design-page) {
    background: var(--draft-surface);
}

body:has(.design-page) .biz-footer {
    margin-top: 0;
}

/* More air between bands. Space is what makes a sparse page read as
   deliberate rather than unfinished. */
.design-page .section {
    padding-top: clamp(64px, 7vw, 104px);
    padding-bottom: clamp(64px, 7vw, 104px);
}

/* ----- Shared chrome --------------------------------------------------- */
.landing-nav {
    background: var(--draft-surface);
    border-bottom: 1px solid var(--draft-line);
}

.landing-links a {
    color: var(--draft-muted);
    font-weight: 500;
}

.landing-links a:hover {
    color: var(--draft-ink);
}

.biz-footer {
    background: var(--draft-footer);
}

.biz-footer a:hover {
    color: #ffffff;
}

/* ----- Buttons --------------------------------------------------------- */
/* One filled button style for the primary action, one outline for everything
   else. The dark fill is the only heavy element on the page besides the
   headline, so the eye still lands on the action. */
.landing-nav .btn-biz,
.design-page .btn-biz,
.design-page .hero .cta-row .btn-biz,
.design-page .cta-band .btn-biz {
    background: var(--draft-action);
    border-color: var(--draft-action);
    color: #ffffff;
    font-weight: 600;
    box-shadow: none;
}

.landing-nav .btn-biz:hover,
.design-page .btn-biz:hover,
.design-page .hero .cta-row .btn-biz:hover,
.design-page .cta-band .btn-biz:hover {
    background: var(--draft-action-hover);
    border-color: var(--draft-action-hover);
    color: #ffffff;
}

/* Inert CTA (registration closed for the pilot). Greyscale counterpart to the
   .is-disabled rule in the base sheet: same muted fill idea, drawn from the
   draft ramp, with a stronger hairline so the shape still reads on the grey
   hero band. The selector list mirrors the filled rules above one for one,
   because .design-page .hero .cta-row .btn-biz would otherwise outweigh a
   shorter .is-disabled selector and repaint the hero button dark. */
.landing-nav .btn-biz.is-disabled,
.landing-nav .btn-biz.is-disabled:hover,
.design-page .btn-biz.is-disabled,
.design-page .btn-biz.is-disabled:hover,
.design-page .hero .cta-row .btn-biz.is-disabled,
.design-page .hero .cta-row .btn-biz.is-disabled:hover,
.design-page .cta-band .btn-biz.is-disabled,
.design-page .cta-band .btn-biz.is-disabled:hover {
    background: var(--draft-line);
    border-color: var(--draft-line-strong);
    color: var(--draft-body);
    cursor: default;
}

.landing-nav .btn-biz-outline,
.design-page .btn-biz-outline,
.design-page .hero .cta-row .btn-biz-outline {
    background: transparent;
    color: var(--draft-ink);
    border-color: var(--draft-line-strong);
    font-weight: 500;
}

.landing-nav .btn-biz-outline:hover,
.design-page .btn-biz-outline:hover,
.design-page .hero .cta-row .btn-biz-outline:hover {
    background: var(--draft-band);
    color: var(--draft-ink);
    border-color: var(--draft-ink);
}

/* Bare links only — button classes keep their own colours. */
.design-page a:not([class]) {
    color: var(--draft-ink);
}

/* ----- Type ------------------------------------------------------------ */
.design-page h1,
.design-page h2,
.design-page h3,
.design-page h5,
.design-page .hero-title,
.design-page .section-title {
    color: var(--draft-ink);
}

.design-page p,
.design-page .section-copy,
.design-page .hero-subtitle {
    color: var(--draft-body);
}

.design-page .small-copy {
    color: var(--draft-muted);
}

.design-page .small-copy strong {
    color: var(--draft-ink);
    font-weight: 600;
}

/* The highlight span stays in the markup (tenant copy replaces the whole
   headline when set) but carries no colour, weight or slant of its own. */
.design-page .hero-title .hl {
    color: inherit;
    font-weight: inherit;
    font-style: normal;
}

/* ----- Hero ------------------------------------------------------------ */
.design-page .hero {
    background: var(--draft-band);
    color: var(--draft-body);
    border-bottom: 1px solid var(--draft-line);
}

/* Decorative telephone-wire artwork: hardcoded white strokes that would be
   invisible on a light band anyway, and pure ornament on a draft. */
.design-page .hero-wires {
    display: none;
}

.design-page .eyebrow {
    background: transparent;
    border: 1px dashed var(--draft-line-strong);
    color: var(--draft-muted);
}

.design-page .eyebrow-dot {
    background: var(--draft-muted);
}

.design-page .metric {
    background: var(--draft-surface);
    border: 1px solid var(--draft-line);
}

.design-page .metric strong {
    color: var(--draft-ink);
}

.design-page .metric span {
    color: var(--draft-muted);
}

/* ----- Bands ----------------------------------------------------------- */
.design-page .section-paper {
    background: var(--draft-surface);
}

.design-page .section-neutral {
    background: var(--draft-band-soft);
}

/* ----- Cards ----------------------------------------------------------- */
.design-page .feature-card,
.design-page .flow-step,
.design-page .proof-card,
.design-page .release-card {
    background: var(--draft-surface);
    border: 1px solid var(--draft-line);
    box-shadow: none;
}

.design-page .step-num {
    background: transparent;
    color: var(--draft-muted);
    border: 1px solid var(--draft-line);
    font-weight: 600;
}

.design-page .brand-list span {
    background: var(--draft-surface);
    border: 1px solid var(--draft-line);
    color: var(--draft-body);
    font-weight: 500;
}

.design-page .cta-band {
    background: var(--draft-surface);
    border: 1px solid var(--draft-line);
    color: var(--draft-body);
    box-shadow: none;
}

.design-page .cta-band .section-title {
    color: var(--draft-ink);
}

.design-page .cta-band .section-copy {
    color: var(--draft-body);
}

/* ----- Placeholder data ------------------------------------------------ */
/* Dashed = invented content. The release feed and the workspace snapshot are
   both mock numbers, and should not be mistaken for a live view. */
.design-page .hero-panel {
    background: transparent;
    border: 1px dashed var(--draft-line-strong);
}

.design-page .proof-grid .proof-card + .proof-card {
    border-style: dashed;
    border-color: var(--draft-line-strong);
}

.design-page .window-dots i {
    background: var(--draft-line);
}

.design-page .panel-pill {
    background: transparent;
    border: 1px solid var(--draft-line);
    color: var(--draft-muted);
    font-weight: 500;
}

.design-page .engagement-bars div {
    background: var(--draft-band);
    border: 1px solid var(--draft-line-soft);
}

.design-page .engagement-bars strong {
    color: var(--draft-ink);
}

.design-page .engagement-bars span {
    color: var(--draft-muted);
}