/* Timber Wolf brand book v1.0. Guest navigation and promotional landing page.
   Loaded after the application theme so its light/dark settings cannot recolor the brand. */
body.no-sidenav {
    --tw-forest: #16352a;
    --tw-sage: #5e7a6e;
    --tw-frost: #fdce98;
    --tw-ink: #111814;
    --tw-snow: #ffffff;
    --tw-font: "Archivo", "Arial", sans-serif;
}

.no-sidenav .landing-nav {
    width: 100%;
    min-height: 96px;
    gap: 24px;
    padding: 22px max(24px, calc((100vw - 1120px) / 2));
    color: var(--tw-snow);
    background: var(--tw-forest);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    backdrop-filter: none;
    font-family: var(--tw-font);
}

.no-sidenav .landing-nav__brand {
    flex: 0 0 auto;
    padding: 0;
}

/* Use the supplied complete lockup, including its vector wordmark. */
.no-sidenav .landing-nav__brand .landing-nav__logo {
    display: block;
    width: clamp(168px, 19vw, 224px);
    height: auto;
    max-width: none;
    object-fit: contain;
}

.no-sidenav .landing-nav__links a,
.no-sidenav .landing-nav .landing-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--tw-snow);
    font-family: var(--tw-font);
    font-size: 0.875rem;
    font-weight: 600;
}

.no-sidenav .landing-nav__links a:hover,
.no-sidenav .landing-nav .landing-link:hover {
    color: var(--tw-frost);
    text-decoration: underline;
    text-underline-offset: 5px;
}

.no-sidenav .landing-nav .landing-button--primary {
    min-height: 44px;
    color: var(--tw-ink);
    background: var(--tw-frost);
    border-color: var(--tw-frost);
    box-shadow: none;
    font-family: var(--tw-font);
    font-weight: 600;
}

.no-sidenav .landing-nav .landing-button--primary:hover {
    color: var(--tw-ink);
    background: var(--tw-snow);
    border-color: var(--tw-snow);
}

.no-sidenav .landing-nav__menu {
    color: var(--tw-snow);
    border-color: var(--tw-snow);
}

.no-sidenav .landing-nav :is(a, button):focus-visible {
    outline: 2px solid var(--tw-frost);
    outline-offset: 5px;
    box-shadow: none;
}

/* Preserve the existing layouts and interactions while replacing brand tokens. */
body.no-sidenav:has(.landing-page),
.no-sidenav .landing-page {
    --landing-bg: var(--tw-snow);
    --landing-surface: var(--tw-snow);
    --landing-text: var(--tw-ink);
    --landing-heading: var(--tw-forest);
    --landing-muted: var(--tw-ink);
    --landing-muted-light: var(--tw-forest);
    --landing-accent: var(--tw-forest);
    --landing-accent-dark: var(--tw-ink);
    --landing-accent-soft: var(--tw-frost);
    --landing-border: #d0d7d3;
    --landing-border-soft: #e7ebe9;
    --landing-nav-clearance: 128px;
    --ins-body-font-family: var(--tw-font);
    --ins-body-font-weight: 400;
    --ins-body-line-height: 1.5;
}

html body.no-sidenav:has(.landing-page),
html body.no-sidenav:has(.landing-page) > .wrapper,
html body.no-sidenav:has(.landing-page) > .wrapper > .content-page {
    background: var(--tw-snow) !important;
    background-color: var(--tw-snow) !important;
}

.no-sidenav .landing-page {
    font-family: var(--tw-font);
    color: var(--tw-ink);
}

.no-sidenav .landing-page :is(h1, h2, h3) {
    font-family: var(--tw-font);
    color: var(--tw-forest);
    font-weight: 600;
    font-stretch: 100%;
}

.no-sidenav .landing-page > .landing-about {
    gap: 12px;
    padding-block: clamp(64px, 8vw, 112px);
}

.no-sidenav .landing-about h1 {
    max-width: 900px;
    margin: 8px 0 20px;
    font-size: clamp(3rem, 7.5vw, 6.5rem);
    font-weight: 800;
    font-stretch: 70%;
    line-height: 0.98;
    letter-spacing: -0.035em;
    text-transform: uppercase;
}

.no-sidenav .landing-about h1 span {
    display: block;
}

.no-sidenav .landing-about p {
    max-width: 730px;
    margin: 0;
    color: var(--tw-ink);
    font-size: clamp(1rem, 1.6vw, 1.3125rem);
    line-height: 1.5;
}

.no-sidenav .landing-page .landing-eyebrow,
.no-sidenav .landing-page .core-feature-copy > span,
.no-sidenav .landing-page .feature-reveal-card__eyebrow {
    color: var(--tw-forest);
    font-family: var(--tw-font);
    font-size: 0.8125rem;
    font-weight: 700;
    font-stretch: 112.5%;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.no-sidenav .landing-page .landing-button {
    min-height: 44px;
    font-family: var(--tw-font);
    font-size: 0.875rem;
    font-weight: 600;
    box-shadow: none;
}

.no-sidenav .landing-page .landing-button--primary {
    color: var(--tw-snow);
    background: var(--tw-forest);
    border-color: var(--tw-forest);
}

.no-sidenav .landing-page .landing-button--primary:hover {
    color: var(--tw-snow);
    background: var(--tw-ink);
    border-color: var(--tw-ink);
}

.no-sidenav .landing-page .landing-button--secondary {
    color: var(--tw-forest);
    background: var(--tw-snow);
    border-color: var(--tw-forest);
}

.no-sidenav .landing-page :is(a, button, [tabindex]):focus-visible {
    outline: 2px solid var(--tw-forest);
    outline-offset: 4px;
}

.no-sidenav .landing-page .calendaero-features {
    --tour-ink: var(--tw-ink);
    --tour-muted: var(--tw-forest);
    --tour-accent: var(--tw-forest);
    --tour-surface: var(--tw-snow);
}

.no-sidenav .landing-page .calendaero-feature-tab.is-active {
    color: var(--tw-forest);
    background: var(--tw-frost);
    border-color: var(--tw-forest);
}

.no-sidenav .landing-page .calendaero-feature-tab :is(small, svg),
.no-sidenav .landing-page .feature-reveal-card__copy :is(p, small) {
    color: var(--tw-ink);
}

.no-sidenav .landing-page .calendaero-feature-tab.is-active > em {
    color: var(--tw-snow);
    background: var(--tw-forest);
    border-color: var(--tw-forest);
}

.no-sidenav .landing-page .feature-reveal-card__copy small {
    background: var(--tw-snow);
    border-color: var(--landing-border);
}

.no-sidenav .landing-page .core-feature-copy h2 em {
    color: var(--tw-forest);
    font-style: normal;
}

.no-sidenav .landing-page .feature-service-icon {
    color: var(--tw-forest);
    background: var(--tw-frost);
}

.no-sidenav .landing-page .landing-cta {
    background: var(--tw-forest);
    border-color: var(--tw-forest);
    box-shadow: none;
}

.no-sidenav .landing-page .landing-cta :is(h2, p) {
    color: var(--tw-snow);
}

.no-sidenav .landing-page .landing-cta .landing-button--primary {
    color: var(--tw-ink);
    background: var(--tw-frost);
    border-color: var(--tw-frost);
}

.no-sidenav .landing-page .landing-cta .landing-button--primary:hover {
    background: var(--tw-snow);
    border-color: var(--tw-snow);
}

.no-sidenav .landing-page .landing-cta :is(a, button):focus-visible {
    outline-color: var(--tw-frost);
}

html body.no-sidenav:has(> .landing-nav) .app-footer,
html body.no-sidenav:has(> .landing-nav) .app-footer__inner {
    color: var(--tw-snow);
    background: var(--tw-forest) !important;
    background-color: var(--tw-forest) !important;
    font-family: var(--tw-font);
}

.no-sidenav .app-footer__brandline {
    flex-wrap: wrap;
    gap: 20px;
    padding-block: 20px;
}

.no-sidenav .app-footer__brand .marketing-footer-logo {
    width: 168px;
    height: auto;
    max-width: none;
}

.no-sidenav .app-footer :is(.app-footer__copyright, .app-footer__company, .app-footer__company strong, .app-footer__link, .app-footer__credit) {
    color: var(--tw-snow);
}

.no-sidenav .app-footer a:hover {
    color: var(--tw-frost);
}

.no-sidenav .app-footer a:focus-visible {
    outline: 2px solid var(--tw-frost);
    outline-offset: 4px;
}

@media (max-width: 980px) {
    .no-sidenav .landing-nav {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 12px 24px;
    }

    .no-sidenav .landing-nav__links {
        border-top-color: var(--tw-sage);
    }
}

@media (max-width: 760px) {
    .no-sidenav .landing-nav {
        position: sticky;
        min-height: 88px;
        padding: 22px 24px;
        gap: 16px;
    }

    .no-sidenav .landing-nav__brand .landing-nav__logo {
        width: 168px;
    }

    .no-sidenav .landing-nav__actions {
        gap: 12px;
    }

    .no-sidenav .landing-nav__links {
        display: none;
        pointer-events: none;
        top: 100%;
        padding: 12px 24px 20px;
        background: var(--tw-forest);
        border: 0;
        border-top: 1px solid var(--tw-sage);
        border-radius: 0;
        box-shadow: none;
    }

    .no-sidenav .landing-nav.is-menu-open .landing-nav__links {
        display: flex;
        pointer-events: auto;
    }

    .no-sidenav .landing-nav__links a {
        background: transparent;
        border-radius: 0;
    }

    .no-sidenav .landing-nav__links a:hover {
        color: var(--tw-frost);
        background: var(--tw-ink);
    }

    .no-sidenav .landing-page > .landing-about {
        width: 100%;
    }
}

@media (max-width: 360px) {
    .no-sidenav .landing-nav {
        padding-inline: 16px;
        gap: 16px;
    }

    .no-sidenav .landing-nav__brand .landing-nav__logo {
        width: 140px;
    }

    .no-sidenav .landing-nav__actions {
        gap: 8px;
    }
}

/* Keep the non-animated reading order intact when motion is reduced. */
@media (prefers-reduced-motion: reduce) {
    .no-sidenav .landing-page :is(.calendaero-features[data-feature-explorer], .core-feature-reveal) {
        min-height: 0;
        height: auto;
        padding-block: 48px;
    }

    .no-sidenav .landing-page :is(.calendaero-features__sticky, .core-feature-sticky) {
        position: static;
        height: auto;
        min-height: 0;
        margin-top: 0;
        transform: none;
    }

    .no-sidenav .landing-page .feature-card-stage {
        height: auto;
        min-height: 0;
    }

    .no-sidenav .landing-page .feature-reveal-card .feature-reveal-card__copy {
        opacity: 1;
        filter: none;
    }
}

/* ---------------------------------------------------------------
   Brand review fixes (Timber-Wolf-Design-Guidelines.md, 2026-10-29)
   --------------------------------------------------------------- */

/* One main action: Get started stays visible at every width. Sign in moves
   into the menu on phones so the bar still fits beside the logo. */
.no-sidenav .landing-nav .landing-button--primary {
    font-size: 0.875rem;
    padding-inline: 18px;
}

.no-sidenav .landing-nav__links .landing-nav__mobile-only {
    display: none;
}

@media (max-width: 760px) {
    .no-sidenav .landing-nav .landing-nav__actions .landing-button--primary {
        display: inline-flex;
        align-items: center;
        padding-inline: 14px;
        white-space: nowrap;
        min-width: 0;
        width: auto;
    }

    .no-sidenav .landing-nav .landing-nav__actions .landing-link {
        display: none;
    }

    .no-sidenav .landing-nav.is-menu-open .landing-nav__links .landing-nav__mobile-only {
        display: flex;
    }

    .no-sidenav .landing-nav__brand .landing-nav__logo {
        width: 148px;
    }
}

@media (max-width: 360px) {
    .no-sidenav .landing-nav__brand .landing-nav__logo {
        width: 140px;
    }

    .no-sidenav .landing-nav .landing-nav__actions .landing-button--primary {
        padding-inline: 10px;
    }
}

/* Below 340px the horizontal lockup no longer fits with its clear space:
   show only the wolf mark from the same supplied artwork (lockup C). */
@media (max-width: 340px) {
    .no-sidenav .landing-nav__brand {
        width: 36px;
        overflow: hidden;
    }

    .no-sidenav .landing-nav__brand .landing-nav__logo {
        width: 224px;
        max-width: none;
    }
}

/* First-screen actions under the tagline. */
.no-sidenav .landing-about .landing-about__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
}

.no-sidenav .landing-about .landing-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 22px;
    border: 1px solid;
    border-radius: 6px;
    text-decoration: none;
}

/* Readable text in palette colors only (no off-palette greys). */
.no-sidenav .landing-page :is(.landing-hero__text, .core-feature-copy p, .calendaero-features__header p) {
    color: var(--tw-ink);
}

.no-sidenav .landing-page .core-feature-progress li,
.no-sidenav .landing-page .core-feature-progress li.is-active {
    color: var(--tw-ink);
}

.no-sidenav .landing-page .core-feature-progress li span,
.no-sidenav .landing-page .core-feature-progress li.is-active span {
    color: var(--tw-forest);
}

.no-sidenav .landing-page .core-feature-progress li.is-active {
    border-color: var(--tw-forest);
}

.no-sidenav .landing-page .core-feature-progress li::before {
    background: var(--tw-sage);
}

.no-sidenav .landing-page .core-feature-progress li.is-active::before {
    background: var(--tw-forest);
}

/* Service card numbers use the book's section-number role: condensed Light 300 in Forest. */
.no-sidenav .landing-page .feature-reveal-card__eyebrow {
    font-size: clamp(2rem, 3vw, 2.75rem);
    font-weight: 300;
    font-stretch: 70%;
    letter-spacing: 0;
    line-height: 1;
}

/* Closing statement uses the condensed display role, like the main headline. */
.no-sidenav .landing-page .landing-cta h2 {
    font-size: clamp(2.75rem, 6vw, 5.5rem);
    font-weight: 800;
    font-stretch: 70%;
    line-height: 0.95;
    letter-spacing: -0.03em;
    text-transform: uppercase;
}

.no-sidenav .landing-page .landing-cta .landing-cta__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    width: auto;
}

.no-sidenav .landing-page .landing-cta .landing-button--secondary {
    color: var(--tw-snow);
    background: transparent;
    border-color: var(--tw-snow);
}

.no-sidenav .landing-page .landing-cta .landing-button--secondary:hover {
    color: var(--tw-frost);
    border-color: var(--tw-frost);
}

/* Decorative initials bubbles competed with the headline and used off-palette
   colors; the brand book's layouts are flat, so they are not shown. */
.no-sidenav .landing-page .landing-cta__ambient {
    display: none;
}

/* Closing section meets the footer with no seams. */
.no-sidenav .landing-page > .landing-cta {
    border: 0;
    border-radius: 0;
}

html body.no-sidenav:has(> .landing-nav) .app-footer {
    border-top: 0 !important;
}

/* The page gutter is 16px on phones but the older bleed rule used 14px,
   leaving a white edge on each side of the closing section. */
@media (max-width: 760px) {
    .no-sidenav .landing-page > .landing-cta {
        width: calc(100% + 32px);
        margin-inline: -16px;
    }
}

/* Remove the white strip between the closing section and the footer. */
html body.no-sidenav:has(.landing-page) > .wrapper > .content-page,
.no-sidenav .landing-page {
    padding-bottom: 0 !important;
}

/* Feature previews use native page scrolling and explicit selection.
   Keep one fixed image area so different screenshot ratios cannot shift the page. */
.no-sidenav .landing-page > .calendaero-features[data-feature-explorer] {
    display: block;
    min-height: 0;
    height: auto;
    padding-block: clamp(28px, 4vw, 48px);
    align-content: start;
}

.no-sidenav .landing-page [data-feature-explorer] .calendaero-features__sticky {
    position: static;
    display: block;
    min-height: 0;
    height: auto;
    margin: 0;
    padding: 0;
    transform: none;
    will-change: auto;
}

.no-sidenav .landing-page [data-feature-explorer] .calendaero-features__header {
    margin-bottom: 28px;
}

.no-sidenav .landing-page [data-feature-explorer] .calendaero-features__tour {
    position: static;
    display: grid;
    grid-template-columns: minmax(240px, 30%) minmax(0, 1fr);
    align-items: start;
    gap: 28px;
    min-height: 0;
}

.no-sidenav .landing-page [data-feature-explorer] .calendaero-features__tabs {
    position: static;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
    padding: 0;
    overflow: visible;
}

.no-sidenav .landing-page [data-feature-explorer] .calendaero-features__tabs::before,
.no-sidenav .landing-page [data-feature-explorer] .calendaero-features__tabs::after,
.no-sidenav .landing-page [data-feature-explorer] .calendaero-features__tour::after,
.no-sidenav .landing-page [data-feature-explorer] .calendaero-feature-tab > em {
    display: none;
}

.no-sidenav .landing-page [data-feature-explorer] .calendaero-feature-tab {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: center;
    gap: 4px;
    min-width: 0;
    width: 100%;
    min-height: 60px;
    padding: 10px 14px;
    border-radius: 12px;
    transform: none;
    transition: background-color 140ms ease, border-color 140ms ease;
}

.no-sidenav .landing-page [data-feature-explorer] .calendaero-feature-tab > span {
    gap: 8px;
    font-size: 1rem;
    line-height: 1.3;
}

.no-sidenav .landing-page [data-feature-explorer] .calendaero-feature-tab > small {
    display: block;
    margin: 0;
    font-size: .8rem;
    line-height: 1.4;
}

.no-sidenav .landing-page [data-feature-explorer] .calendaero-feature-preview {
    position: relative;
    display: block;
    aspect-ratio: 3000 / 1830;
    min-height: 0;
    height: auto;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border-radius: 14px;
}

.no-sidenav .landing-page [data-feature-explorer] .calendaero-feature-panel {
    position: absolute;
    inset: 0;
    display: block;
    min-height: 0;
    padding: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
}

.no-sidenav .landing-page [data-feature-explorer] .calendaero-feature-panel[hidden] {
    display: none;
}

.no-sidenav .landing-page [data-feature-explorer] .workspace-shot-card {
    display: grid;
    place-items: start center;
    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
    box-shadow: none;
}

.no-sidenav .landing-page [data-feature-explorer] .workspace-shot-card img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: contain;
    object-position: top center;
}

/* Keep all nine desktop choices alongside the image without a tall timeline. */
@media (min-width: 981px) {
    .no-sidenav .landing-page [data-feature-explorer] .calendaero-feature-tab {
        height: 48px;
        min-height: 48px;
    }

    .no-sidenav .landing-page [data-feature-explorer] .calendaero-feature-tab > small {
        display: none;
    }

    .no-sidenav .landing-page [data-feature-explorer] .calendaero-feature-tab.is-active {
        height: 84px;
    }

    .no-sidenav .landing-page [data-feature-explorer] .calendaero-feature-tab.is-active > small {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

@media (max-width: 980px) {
    .no-sidenav .landing-page > .landing-section-divider:has(+ [data-feature-explorer]) {
        margin-bottom: 24px;
    }

    .no-sidenav .landing-page [data-feature-explorer] .calendaero-features__tour {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .no-sidenav .landing-page [data-feature-explorer] .calendaero-features__tabs {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
    }

    .no-sidenav .landing-page [data-feature-explorer] .calendaero-feature-tab {
        min-height: 44px;
        padding: 10px 8px;
        justify-items: center;
    }

    .no-sidenav .landing-page [data-feature-explorer] .calendaero-feature-tab > span {
        font-size: .8rem;
        white-space: nowrap;
    }

    .no-sidenav .landing-page [data-feature-explorer] .calendaero-feature-tab > small {
        display: none;
    }
}

@media (max-width: 439px) {
    .no-sidenav .landing-page [data-feature-explorer] .calendaero-features__tabs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (prefers-reduced-motion: reduce) {
    .no-sidenav .landing-page [data-feature-explorer] .calendaero-feature-tab {
        transition: none;
    }
}

/* Product tour: brand type family until its own palette pass is done. */
.no-sidenav .product-tour {
    font-family: var(--tw-font);
}

.no-sidenav .product-tour :is(h1, h2) {
    font-family: var(--tw-font);
    color: var(--tw-forest);
}