/* ==========================================================================
   ai-automation-2027.css — page-specific rules for /ai-automation
   --------------------------------------------------------------------------
   Depends on, and never re-declares, one file loaded before it:

     css/site-2027.css   tokens, chrome, buttons, eyebrows, section rhythm,
                         hairline rows, cards, pricing tiers, the accordion,
                         the beam panel, inline links, the reveal utility

   This page has no screenshot demo, so css/media-2027.css is not loaded —
   the same choice pricing.html, services.html, and faq.html make. Only what
   the shared file cannot express is here: section heading widths, the
   five-card and two-card grids, the intro/steps split, and a handful of
   pricing-tier detail classes duplicated from css/pricing-2027.css (which is
   not loaded here, so the classes that page owns - .cy27-tier__name,
   .cy27-price, .cy27-tier__desc, .cy27-tier__note, .cy27-tier--featured,
   .cy27-tier__badge - need a definition here too). Same duplication
   css/websites-2027.css already does for .cy27-sr-only; it belongs in
   site-2027.css once someone is editing that file for another reason.

   No !important. No bare descendant-element resets at page scope.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Hero actions / trust line
   -------------------------------------------------------------------------- */

.cy27-aihero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 32px;
}

/* Two columns of `auto`, not 1fr: the four trust items sit as tight pairs
   against the left edge rather than spreading across the column - the same
   choice css/apps-2027.css makes for .cy27-apps__trust. */
.cy27-aihero__trust {
    display: grid;
    grid-template-columns: repeat(2, auto);
    justify-content: start;
    gap: 10px 32px;
    font-family: var(--cy27-mono);
    font-size: .76rem;
    letter-spacing: .06em;
    color: var(--cy27-subtle);
}

/* --------------------------------------------------------------------------
   2. Section headings shared across this page
   -------------------------------------------------------------------------- */

.cy27-ai__eyebrow {
    display: block;
    margin-bottom: 16px;
}

.cy27-ai__h2 {
    max-width: 780px;
    margin-bottom: 16px;
}

.cy27-ai__h2--last {
    margin-bottom: 44px;
}

.cy27-ai__h2--split {
    max-width: none;
    margin-bottom: 20px;
}

.cy27-ai__lead {
    max-width: 660px;
    margin-bottom: 44px;
}

.cy27-ai__crosslink {
    margin-top: 36px;
    max-width: 780px;
    color: var(--cy27-body);
    font-size: .97rem;
    line-height: 1.7;
}

/* --------------------------------------------------------------------------
   3. Where AI actually earns its place - five-card grid

   Five items in a three-column grid leaves the last row short by one, the
   same trade websites.html's four-job row would make at five - accepted
   because a fourth column would crowd each card's copy.
   -------------------------------------------------------------------------- */

.cy27-ai__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.cy27-ai__card {
    padding: 30px 26px;
}

.cy27-ai__card h3 {
    margin-bottom: 10px;
    font-size: 1.15rem;
    letter-spacing: -.015em;
}

.cy27-ai__card p {
    font-size: .95rem;
    line-height: 1.7;
    color: var(--cy27-body);
}

/* --------------------------------------------------------------------------
   4. How it works - intro left, numbered steps right

   Same 0.85fr/1.15fr split css/websites-2027.css and css/apps-2027.css each
   use for their own process section.
   -------------------------------------------------------------------------- */

.cy27-ai__split {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 64px;
    align-items: start;
}

.cy27-ai__steps {
    margin: 0;
    padding: 0;
    list-style: none;
}

.cy27-ai__steps .cy27-row {
    gap: 24px;
    padding: 26px 0;
}

.cy27-ai__steps .cy27-row__num {
    font-size: .9rem;
    letter-spacing: .05em;
    padding-top: .2em;
}

.cy27-ai__steps .cy27-row h3 {
    margin-bottom: 8px;
    font-size: 1.2rem;
}

.cy27-ai__steps .cy27-row p {
    font-size: .98rem;
}

/* --------------------------------------------------------------------------
   5. Two things running today - DocSmith + this site's chat assistant
   -------------------------------------------------------------------------- */

.cy27-ai__proof {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
}

.cy27-ai__proof-card {
    display: flex;
    flex-direction: column;
    padding: 34px 30px;
}

.cy27-ai__proof-card h3 {
    margin: 10px 0 12px;
    font-size: 1.3rem;
}

.cy27-ai__proof-card p {
    margin-bottom: 18px;
    font-size: .97rem;
    line-height: 1.7;
    color: var(--cy27-body);
}

.cy27-ai__proof-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: auto;
    color: var(--cy27-accent);
    font-size: .95rem;
    font-weight: 700;
    transition: color .25s ease;
}

.cy27-ai__proof-link i {
    font-size: .8rem;
}

.cy27-ai__proof-link:hover,
.cy27-ai__proof-link:focus-visible {
    color: #fff;
}

/* --------------------------------------------------------------------------
   6. Pricing tiers - detail classes duplicated from css/pricing-2027.css,
      which is not loaded on this page. See file banner.
   -------------------------------------------------------------------------- */

/* .cy27-page h3 is 0,1,1 - a single class would silently lose to it. */
.cy27-page .cy27-tier__name {
    margin-bottom: 10px;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--cy27-heading);
}

/* Middle tier: the accent wash rises from the top edge rather than the
   corner, matching the plain tiers' radius beside it. */
.cy27-tier--featured {
    border-radius: 16px;
    background:
        radial-gradient(120% 150% at 50% 0%, rgba(0, 192, 250, .12), transparent 60%),
        linear-gradient(160deg, rgba(20, 27, 40, .72), rgba(11, 16, 25, .6));
}

.cy27-tier__badge {
    margin-bottom: 18px;
}

.cy27-price {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 16px;
    font-size: clamp(2rem, 3.4vw, 2.6rem);
}

.cy27-price__unit {
    font-family: var(--cy27-mono);
    font-size: .78rem;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--cy27-subtle);
}

.cy27-tier__desc {
    margin-bottom: 24px;
    color: var(--cy27-body);
    line-height: 1.7;
}

.cy27-tier__desc--tight {
    margin-bottom: 20px;
}

.cy27-tier__note {
    margin-bottom: 0;
    font-family: var(--cy27-mono);
    font-size: .76rem;
    line-height: 1.6;
    color: var(--cy27-subtle);
}

.cy27-ai__price-link {
    display: inline-flex;
    margin-top: 30px;
}

/* --------------------------------------------------------------------------
   7. Closing CTA
   -------------------------------------------------------------------------- */

.cy27-ai__cta {
    padding: 64px 56px;
    text-align: center;
}

.cy27-ai__cta-lead {
    max-width: 560px;
    margin: 18px auto 34px;
    color: var(--cy27-body);
    font-size: 1.05rem;
    line-height: 1.7;
}

.cy27-ai__cta-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-bottom: 26px;
}

.cy27-ai__cta-note {
    color: var(--cy27-subtle);
    font-size: .8rem;
}

/* --------------------------------------------------------------------------
   8. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1000px) {
    .cy27-ai__grid,
    .cy27-ai__proof,
    .cy27-ai__split {
        grid-template-columns: 1fr;
    }

    .cy27-ai__split {
        gap: 32px;
    }
}

@media (max-width: 760px) {
    .cy27-ai__cta {
        padding: 48px 28px;
    }

    .cy27-aihero__trust {
        grid-template-columns: 1fr;
    }
}