/* ==========================================================================
   KrewSynk — public marketing site
   --------------------------------------------------------------------------
   Loaded only by src/PublicPage.php, after styles/krewsynk.css. The palette
   custom properties (--ks-orange etc.) come from that file's :root; this one
   adds only the marketing components and never redefines a brand colour.

   The app's body background is #f5f6fa, which reads as "dashboard". The
   marketing pages sit on white and use tinted bands for rhythm instead.
   ========================================================================== */

.ks-public {
    background-color: #fff;
    color: #1d2530;
}

/* Keyboard users land here first — visible only when focused. */
.ks-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 1080;
    background: var(--ks-dark);
    color: #fff;
    padding: 10px 18px;
    border-radius: 0 0 6px 0;
}
.ks-skip:focus {
    left: 0;
}

/* ---------- navbar ---------- */

.ks-public-nav {
    background: rgba(255, 255, 255, .92);
    backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid #e8ebf0;
    padding-block: .6rem;
}
.ks-public-nav .nav-link {
    color: #46525f;
    font-weight: 500;
    padding-inline: .9rem;
}
.ks-public-nav .nav-link:hover,
.ks-public-nav .nav-link:focus {
    color: var(--ks-orange);
}
.ks-public-nav .nav-link.active {
    color: var(--ks-orange);
    font-weight: 600;
}
.ks-public-nav .btn-ks-orange {
    padding-inline: 1.15rem;
    font-weight: 600;
}
@media (min-width: 992px) {
    .ks-public-nav .btn-ks-orange {
        width: auto !important;
    }
}
/* Collapsed menu needs breathing room and a divider from the links above it. */
@media (max-width: 991.98px) {
    .ks-public-nav .navbar-collapse {
        padding-block: .75rem;
    }
    .ks-public-nav .nav-link {
        padding-inline: 0;
    }
}

/* ---------- section rhythm ---------- */

.ks-section {
    padding-block: clamp(3.5rem, 8vw, 6rem);
}
.ks-section-tint {
    background: #f7f8fb;
}
.ks-section-dark {
    background: var(--ks-dark);
    color: #fff;
}
.ks-section-dark .ks-section-lede {
    color: #b9c4d1;
}

.ks-eyebrow {
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--ks-orange);
    margin-bottom: .6rem;
}
.ks-section-title {
    font-size: clamp(1.6rem, 3.4vw, 2.35rem);
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1.2;
    margin-bottom: .75rem;
}
.ks-section-lede {
    font-size: 1.08rem;
    color: #5b6672;
    max-width: 62ch;
}

/* ---------- coming soon banner ---------- */

.ks-coming-soon {
    background: var(--ks-dark);
    color: #dbe3ec;
    font-size: .93rem;
    padding-block: .7rem;
    border-bottom: 3px solid var(--ks-orange);
}
.ks-coming-soon .container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: .4rem .75rem;
    text-align: center;
}
.ks-coming-soon-flag {
    background: var(--ks-orange);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: .25rem .7rem;
    border-radius: 999px;
    white-space: nowrap;
}
.ks-coming-soon-text a {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 2px;
    white-space: nowrap;
}
.ks-coming-soon-text a:hover,
.ks-coming-soon-text a:focus {
    color: var(--ks-orange-light);
}

/* ---------- hero ---------- */

.ks-hero {
    background:
        radial-gradient(900px 420px at 82% -8%, rgba(196, 97, 31, .13), transparent 62%),
        linear-gradient(180deg, #fbfcfe 0%, #fff 100%);
    border-bottom: 1px solid #eef1f5;
    padding-block: clamp(3.5rem, 9vw, 6.5rem);
}
.ks-hero h1 {
    font-size: clamp(2.1rem, 5.2vw, 3.4rem);
    font-weight: 750;
    letter-spacing: -.03em;
    line-height: 1.1;
    margin-bottom: 1.1rem;
}
.ks-hero .ks-hero-lede {
    font-size: clamp(1.05rem, 2vw, 1.22rem);
    color: #4d5967;
    max-width: 56ch;
    margin-bottom: 1.9rem;
}
.ks-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-bottom: 1rem;
}
.ks-hero-actions .btn {
    padding: .72rem 1.5rem;
    font-weight: 600;
    font-size: 1.02rem;
}
.ks-hero-note {
    font-size: .92rem;
    color: #6d7885;
}
.ks-hero-note .bi {
    color: #2f8f5b;
}

/* ---------- feature cards ---------- */

.ks-feature {
    height: 100%;
    background: #fff;
    border: 1px solid #e8ebf0;
    border-radius: 12px;
    padding: 1.6rem 1.5rem;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.ks-feature:hover {
    border-color: #d7dce4;
    box-shadow: 0 8px 24px rgba(31, 41, 55, .07);
    transform: translateY(-2px);
}
.ks-feature-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: rgba(196, 97, 31, .1);
    color: var(--ks-orange);
    font-size: 1.28rem;
    margin-bottom: 1rem;
}
.ks-feature h3 {
    font-size: 1.08rem;
    font-weight: 650;
    margin-bottom: .45rem;
}
.ks-feature p {
    font-size: .95rem;
    color: #5b6672;
    margin-bottom: 0;
}

/* Feature list used on features.php — alternating rows, no cards. */
.ks-feature-row + .ks-feature-row {
    border-top: 1px solid #eceff3;
    margin-top: clamp(2.5rem, 5vw, 3.75rem);
    padding-top: clamp(2.5rem, 5vw, 3.75rem);
}
.ks-feature-row h2 {
    font-size: clamp(1.35rem, 2.6vw, 1.75rem);
    font-weight: 700;
    letter-spacing: -.015em;
    margin-bottom: .75rem;
}
.ks-check {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}
.ks-check li {
    position: relative;
    padding-left: 1.75rem;
    margin-bottom: .6rem;
    color: #4d5967;
}
.ks-check li::before {
    content: "\F26E"; /* bi-check-lg */
    font-family: "bootstrap-icons";
    position: absolute;
    left: 0;
    top: .05em;
    color: #2f8f5b;
    font-weight: 700;
}
/* On a dark band the list needs its own colour: the rule above sets colour on
   the li itself, so it beats anything inherited from a parent and the default
   slate would render near-black on navy. The tick also has to lighten — #2f8f5b
   does not carry enough contrast against the dark background. */
.ks-section-dark .ks-check li {
    color: #cdd8e4;
}
.ks-section-dark .ks-check li::before {
    color: #5cc98d;
}

/* Small qualifier pill sat beside a heading — "Optional" and the like.
   Deliberately not orange: orange is the call-to-action colour on these pages,
   and a label that is not clickable should not borrow it. */
.ks-tag {
    display: inline-block;
    vertical-align: middle;
    background: #e8eef6;
    color: #3c556f;
    border: 1px solid #d4dfeb;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: .2rem .6rem;
    border-radius: 999px;
    margin-left: .5rem;
    position: relative;
    top: -.08em;
    white-space: nowrap;
}
/* On the dark band the light pill would glare. */
.ks-section-dark .ks-tag {
    background: rgba(255, 255, 255, .12);
    color: #dbe3ec;
    border-color: rgba(255, 255, 255, .22);
}

/* ---------- pricing ---------- */

.ks-plan {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e3e7ed;
    border-radius: 14px;
    padding: 1.85rem 1.6rem;
}
.ks-plan-featured {
    border-color: var(--ks-orange);
    box-shadow: 0 12px 32px rgba(196, 97, 31, .13);
    position: relative;
}
.ks-plan-flag {
    position: absolute;
    top: -.75rem;
    left: 50%;
    transform: translateX(-50%);
    background: var(--ks-orange);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: .28rem .8rem;
    border-radius: 999px;
    white-space: nowrap;
}
.ks-plan h3 {
    font-size: 1.15rem;
    font-weight: 650;
    margin-bottom: .2rem;
}
.ks-plan-users {
    font-size: .9rem;
    color: #6d7885;
    margin-bottom: 1.15rem;
}
.ks-plan-price {
    font-size: 2.35rem;
    font-weight: 750;
    letter-spacing: -.03em;
    line-height: 1;
}
.ks-plan-per {
    font-size: .93rem;
    color: #6d7885;
    margin-left: .15rem;
}
.ks-plan-sub {
    font-size: .88rem;
    color: #6d7885;
    min-height: 1.4rem;
    margin-top: .4rem;
    margin-bottom: 1.35rem;
}
.ks-plan .ks-check {
    margin-bottom: 1.6rem;
}
.ks-plan .ks-check li {
    font-size: .93rem;
    margin-bottom: .5rem;
}
.ks-plan-cta {
    margin-top: auto;
}

/* Monthly / yearly switch */
.ks-billing-toggle {
    display: inline-flex;
    background: #eef0f4;
    border-radius: 999px;
    padding: .28rem;
    gap: .2rem;
}
.ks-billing-toggle button {
    border: 0;
    background: transparent;
    border-radius: 999px;
    padding: .42rem 1.15rem;
    font-size: .93rem;
    font-weight: 600;
    color: #5b6672;
    cursor: pointer;
}
.ks-billing-toggle button[aria-pressed="true"] {
    background: #fff;
    color: var(--ks-dark);
    box-shadow: 0 1px 3px rgba(31, 41, 55, .13);
}
.ks-save-badge {
    display: inline-block;
    background: rgba(47, 143, 91, .12);
    color: #2f8f5b;
    font-size: .8rem;
    font-weight: 650;
    padding: .2rem .6rem;
    border-radius: 999px;
    margin-left: .5rem;
}

/* ---------- FAQ ---------- */

.ks-faq .accordion-item {
    border: 1px solid #e6e9ee;
    border-radius: 10px !important;
    margin-bottom: .7rem;
    overflow: hidden;
}
.ks-faq .accordion-button {
    font-weight: 600;
    font-size: 1.02rem;
    color: var(--ks-dark);
    background: #fff;
    padding: 1.05rem 1.25rem;
}
.ks-faq .accordion-button:not(.collapsed) {
    color: var(--ks-orange);
    background: #fdf7f3;
    box-shadow: none;
}
.ks-faq .accordion-button:focus {
    box-shadow: 0 0 0 .2rem rgba(196, 97, 31, .2);
}
.ks-faq .accordion-body {
    color: #4d5967;
    padding: 0 1.25rem 1.25rem;
}
.ks-faq .accordion-body p:last-child {
    margin-bottom: 0;
}

/* ---------- contact ---------- */

.ks-form-card {
    background: #fff;
    border: 1px solid #e3e7ed;
    border-radius: 14px;
    padding: clamp(1.5rem, 4vw, 2.25rem);
}
.ks-form-card .form-label {
    font-weight: 600;
    font-size: .92rem;
    color: #3c4753;
}
.ks-form-card .form-control:focus,
.ks-form-card .form-select:focus {
    border-color: var(--ks-orange-light);
    box-shadow: 0 0 0 .2rem rgba(196, 97, 31, .16);
}
/* Honeypot — hidden from people, left reachable for bots that fill everything.
   Not display:none, which some bots skip; off-screen and out of the tab order. */
.ks-hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ---------- CTA band ---------- */

.ks-cta {
    background: linear-gradient(135deg, var(--ks-dark) 0%, #22303e 100%);
    color: #fff;
}
.ks-cta h2 {
    font-size: clamp(1.55rem, 3.2vw, 2.15rem);
    font-weight: 700;
    letter-spacing: -.02em;
    margin-bottom: .75rem;
}
.ks-cta p {
    color: #b9c4d1;
    font-size: 1.05rem;
    max-width: 54ch;
}
.ks-cta .btn-light {
    font-weight: 650;
    padding: .7rem 1.6rem;
}

/* ---------- footer ---------- */

/* Light on purpose. The wordmark in images/KrewSynk.svg is a raster embedded in
   SVG markup, not vector paths, so its dark "Synk" and gear cannot be recoloured
   with CSS — on a near-black footer they simply disappeared while "Krew" stayed
   orange. A light ground renders the logo exactly as the navbar does, and needs
   no second asset kept in sync with the first. */
.ks-footer {
    background: #f7f8fb;
    color: #46525f;
    border-top: 1px solid #e6e9ee;
    padding-block: 3.25rem 2rem;
    font-size: .93rem;
}
.ks-footer-blurb {
    max-width: 38ch;
    margin-bottom: 0;
    color: #5b6672;
}
.ks-footer-head {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: #1d2530;
    font-weight: 700;
    margin-bottom: .9rem;
}
.ks-footer-list {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}
.ks-footer-list li {
    margin-bottom: .5rem;
}
.ks-footer a {
    color: #46525f;
    text-decoration: none;
}
.ks-footer a:hover,
.ks-footer a:focus {
    color: var(--ks-orange);
    text-decoration: underline;
}
.ks-footer-base {
    border-top: 1px solid #e0e4ea;
    margin-top: 2.5rem;
    padding-top: 1.4rem;
    font-size: .87rem;
    color: #6d7885;
}

/* ---------- legal pages ---------- */

.ks-legal {
    max-width: 760px;
}
.ks-legal h2 {
    font-size: 1.28rem;
    font-weight: 650;
    color: var(--ks-dark);
    margin-top: 2.25rem;
    margin-bottom: .6rem;
}
.ks-legal h3 {
    font-size: 1.05rem;
    font-weight: 650;
    margin-top: 1.5rem;
    margin-bottom: .5rem;
}
.ks-legal p,
.ks-legal li {
    color: #404b58;
}
.ks-legal a {
    color: var(--ks-orange);
}
.ks-legal .ks-updated {
    color: #6d7885;
    font-size: .95rem;
}
.ks-legal table {
    border-collapse: collapse;
    width: 100%;
    margin: 1rem 0 1.25rem;
    font-size: .95rem;
}
.ks-legal th,
.ks-legal td {
    text-align: left;
    padding: .55rem .65rem;
    border-bottom: 1px solid #e6e9ee;
}
.ks-legal th {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #6d7885;
    font-weight: 700;
}

/* ---------- small screens ---------- */

@media (max-width: 575.98px) {
    .ks-hero-actions .btn {
        width: 100%;
    }
    .ks-plan {
        padding: 1.6rem 1.3rem;
    }
    .ks-feature {
        padding: 1.35rem 1.25rem;
    }
}