/* =============================================================================
   Editorial layer — Crafted Heritage
   -----------------------------------------------------------------------------
   These rules tune existing markup (eyebrow, kickers, hero atmosphere, proof
   cards, surfaces) toward an editorial, paper-first aesthetic. They override
   selectively rather than rewriting components, so the primitives stay safe.

   Principles:
     - Hairline rules instead of glass cards
     - One small ornament (a 4-pt diamond in craft gold) where punctuation helps
     - Restrained typographic emphasis — italic for warmth, never neon
     - No backdrop-blur, no radial glow, no frosted chips
   ============================================================================= */


/* --- Hero atmosphere --------------------------------------------------------
   Replace the radial primary glow + dotted-grid mesh with a single hairline
   ruled at the bottom of the hero. The hero earns its weight from typography
   and composition, not lighting effects. */
.hero-section::before,
.hero-section::after {
    content: none !important;
    background: none !important;
    background-image: none !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
    opacity: 0 !important;
}

.hero-section {
    position: relative;
    isolation: isolate;
    border-bottom: 1px solid var(--rule-color-soft);
}


/* --- Editorial eyebrow ------------------------------------------------------
   The existing chip-style eyebrow (.eyebrow, .ak-section-header__kicker--chip)
   becomes a flat editorial label with a leading rule mark. The result reads
   like the kicker on a magazine feature, not a notification badge. */
.eyebrow,
.ak-section-header__kicker,
.ak-section-header__kicker--chip {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    color: var(--text-secondary);
    font-family: var(--font-sans);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.eyebrow::before,
.ak-section-header__kicker::before {
    content: "";
    display: inline-block;
    width: 1.75rem;
    height: 1px;
    background: var(--rule-mark);
    flex: 0 0 auto;
}

.eyebrow i {
    color: var(--accent-gold);
    font-size: 0.85rem;
}

.eyebrow--gold {
    color: var(--text-secondary);
}

.eyebrow--gold::before {
    background: var(--accent-gold-fill);
}


/* --- Section header refinement ---------------------------------------------
   Add air above the kicker and tighten the relationship between kicker,
   title, and subtitle so the section reads as a chapter opener. */
.ak-section-header {
    position: relative;
    padding-top: var(--space-md);
}

.ak-section-header .section-title {
    font-family: var(--font-display);
    font-weight: 500;
    letter-spacing: -0.018em;
    margin-top: var(--space-stack-sm);
}

.ak-section-header .section-subtitle {
    font-size: 1.08rem;
    line-height: 1.7;
    color: var(--text-secondary);
    max-width: var(--measure-prose);
}

.ak-section-header--center .section-subtitle {
    margin-inline: auto;
}


/* --- Editorial proof grid (hero & beyond) ----------------------------------
   The original .hero-proof-card was a mini surface with a teal accent strip,
   white sheen overlay, and gradient background. Strip all of that — replace
   with a hairline-divided text block. The numbers and labels carry the weight. */
.hero-proof-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    margin-top: var(--space-2xl);
    border-top: 1px solid var(--rule-color);
    border-bottom: 1px solid var(--rule-color-soft);
    max-width: 46rem;
}

.hero-proof-card {
    position: relative;
    overflow: visible;
    min-height: 0;
    padding: 1.4rem 1.4rem 1.4rem 0;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: none !important;
    box-shadow: none !important;
}

.hero-proof-card + .hero-proof-card {
    padding-left: 1.4rem;
    border-left: 1px solid var(--rule-color-soft);
}

.hero-proof-card::before,
.hero-proof-card::after {
    content: none !important;
    background: none !important;
    width: 0 !important;
    inset: auto !important;
}

.hero-proof-card__meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    color: var(--text-tertiary);
    font-family: var(--font-sans);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    line-height: 1.2;
    text-transform: uppercase;
}

.hero-proof-card__meta::before {
    content: "";
    width: 0.32rem;
    height: 0.32rem;
    background: var(--accent-gold);
    transform: rotate(45deg);
    flex: 0 0 auto;
}

.hero-proof-card__value {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--text-primary);
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(1.15rem, 0.9vw + 1rem, 1.5rem);
    letter-spacing: -0.02em;
    line-height: 1.15;
    font-variation-settings: "SOFT" 30, "opsz" 32;
    font-feature-settings: "kern" 1, "liga" 1, "ss01" 1;
    text-wrap: balance;
}

.hero-proof-card__label {
    color: var(--text-secondary);
    font-size: 0.92rem;
    font-weight: 400;
    line-height: 1.55;
}

@media (max-width: 768px) {
    .hero-proof-grid {
        grid-template-columns: 1fr;
        max-width: 100%;
    }

    .hero-proof-card {
        padding: 1.1rem 0;
        border-top: 1px solid var(--rule-color-soft);
    }

    .hero-proof-card:first-child {
        border-top: 0;
    }

    .hero-proof-card + .hero-proof-card {
        padding-left: 0;
        border-left: 0;
    }
}


/* --- Hero visual frame ------------------------------------------------------
   Strip the frosted-glass / radial-glow / huge-radius wrapper. The visual now
   sits in a quiet, paper-mounted frame with a hairline border and a small
   craft-gold corner mark — the same trick a printed catalogue uses to mount
   a plate without competing with it. */
.hero-visual-wrapper {
    position: relative;
    padding: var(--space-xl);
    border: 1px solid var(--rule-color);
    border-radius: var(--radius-md);
    background: var(--surface) !important;
    box-shadow: var(--shadow-sm) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.hero-visual-wrapper::before {
    content: "";
    position: absolute;
    top: -3px;
    left: -3px;
    width: 14px;
    height: 14px;
    border-top: 1px solid var(--rule-mark);
    border-left: 1px solid var(--rule-mark);
    pointer-events: none;
}

.hero-visual-wrapper::after {
    content: "";
    position: absolute;
    bottom: -3px;
    right: -3px;
    width: 14px;
    height: 14px;
    border-bottom: 1px solid var(--rule-mark);
    border-right: 1px solid var(--rule-mark);
    pointer-events: none;
}

.hero-composite,
.platform-dashboard {
    filter: none !important;
}


/* --- Hero visual kicker (the inline label inside the visual frame) ---------
   Frosted pill becomes a flat editorial caption tucked at the top with a
   leading rule mark, matching the eyebrow language. */
.hero-visual-kicker {
    position: absolute;
    top: -0.7rem;
    left: 1.25rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.2rem 0.6rem;
    border: 0;
    border-radius: 0;
    background: var(--surface) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    color: var(--text-tertiary);
    font-family: var(--font-sans);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.hero-visual-kicker::before {
    content: "";
    width: 1rem;
    height: 1px;
    background: var(--rule-mark);
}

.hero-visual-kicker i {
    color: var(--accent-gold);
}


/* --- Hero typography refinement --------------------------------------------
   Push the headline into Fraunces display weight, allow the SOFT axis to
   breathe at large sizes, and let an italic accent carry the brand voice
   without resorting to gradient text. */
.hero-title {
    font-family: var(--font-display);
    font-weight: 500;
    font-variation-settings: "SOFT" 40, "opsz" 144;
    letter-spacing: -0.022em;
    line-height: 1.02;
}

.hero-title .hero-subtitle,
.hero-subtitle {
    display: block;
    margin-top: 0.5rem;
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-variation-settings: "SOFT" 50, "opsz" 96;
    color: var(--text-secondary);
    letter-spacing: -0.012em;
    line-height: 1.18;
    font-size: clamp(1.5rem, 1.5vw + 1rem, 2rem);
    max-width: 40ch;
}

.hero-lead {
    font-family: var(--font-sans);
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--text-secondary);
    max-width: var(--measure-prose);
}


/* --- Section title gradient kill -------------------------------------------
   Removes any leftover gradient text fills from the previous "premium" recipe
   so headings render as solid ink — far easier on the eyes for long pages. */
.section-title,
.hero-title,
.ak-section-header .section-title {
    background: none !important;
    -webkit-background-clip: initial !important;
    background-clip: initial !important;
    -webkit-text-fill-color: currentColor !important;
    color: var(--text-primary) !important;
}


/* --- Marketing surfaces: card chrome restraint -----------------------------
   Pull back the gradient + top hairline shimmer on shared marketing cards.
   They become quiet pieces of paper — flat surface, single hairline, soft
   shadow. The accent rule on top stays but is reduced to a true single pixel
   and recolored with the rule palette so it reads as part of the editorial
   system, not a glow. */
.ak-info-tile,
.ak-feature-card,
.ak-timeline-step,
.ak-pricing-card,
.ak-final-cta,
.ak-contact-section__card {
    background: var(--surface) !important;
    border-color: var(--rule-color-soft) !important;
    border-radius: var(--radius-md) !important;
    box-shadow: var(--shadow-sm) !important;
}

.ak-info-tile::before,
.ak-feature-card::before,
.ak-timeline-step::before,
.ak-pricing-card::before,
.ak-final-cta::before,
.ak-contact-section__card::before {
    background: var(--rule-color) !important;
    height: 1px;
}


/* --- Logo strip: editorial restraint ---------------------------------------
   The logo strip is a wordmark row, not a chip carousel. Remove background
   chrome and let the items breathe along a hairline. */
.ak-logo-strip,
.marketing-logo-strip {
    border-top: 1px solid var(--rule-color-soft);
    border-bottom: 1px solid var(--rule-color-soft);
    background: none !important;
}


/* --- Drop cap utility ------------------------------------------------------
   Optional editorial flourish for long-form sections. Apply via class. */
.ak-drop-cap::first-letter {
    float: left;
    font-family: var(--font-display);
    font-weight: 500;
    font-variation-settings: "SOFT" 60, "opsz" 144;
    font-size: 4.5rem;
    line-height: 0.9;
    padding: 0.2rem 0.6rem 0 0;
    color: var(--primary);
}


/* --- Hairline rule with center mark ----------------------------------------
   Use as <hr class="ak-rule"> or as a divider element between editorial
   sections. The diamond mark sits dead-center in craft gold. */
.ak-rule {
    border: 0;
    height: 1px;
    background: var(--rule-color-soft);
    margin: var(--space-2xl) auto;
    max-width: 36rem;
    position: relative;
    overflow: visible;
}

.ak-rule::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.45rem;
    height: 0.45rem;
    background: var(--rule-mark);
    transform: translate(-50%, -50%) rotate(45deg);
}


/* --- Numerals: tabular by default in proof / pricing / metrics -------------
   Anywhere a heading carries a numeric price or stat we want columnar
   alignment. Scoped to the marketing surfaces so prose paragraphs stay
   proportional. */
.ak-pricing-card,
.ak-info-tile,
.hero-proof-card__value {
    font-feature-settings: "kern" 1, "liga" 1, "tnum" 1, "ss01" 1;
}

/* --- Marketing tile grid breathing room ---------------------------------
   The default 1.5rem gap reads cramped once tiles carry editorial typography
   and badge rows. Open the rhythm so each tile reads as its own card. */
.ak-info-tile-grid {
    gap: var(--space-2xl) !important;
    row-gap: var(--space-2xl) !important;
    column-gap: var(--space-xl) !important;
}

@media (max-width: 991px) {
    .ak-info-tile-grid {
        gap: var(--space-xl) !important;
        row-gap: var(--space-xl) !important;
        column-gap: var(--space-xl) !important;
    }
}

@media (max-width: 767px) {
    .ak-info-tile-grid {
        gap: var(--space-lg) !important;
        row-gap: var(--space-lg) !important;
    }
}


/* --- Info tile description: free of body-prose measure ---------------------
   The body-level p { max-width: --measure-prose } caps tile descriptions at
   ~65ch — which on a 2-column-spanning "wide" tile leaves the right half
   visibly empty. Inside marketing tiles the column itself is the constraint,
   so let the paragraph fill its parent. */
.ak-info-tile__description,
.ak-feature-card__description,
.ak-timeline-step__description,
.ak-pricing-card .ak-pricing-card__description,
.ak-final-cta__description,
.ak-contact-section__card p {
    max-width: none !important;
}


/* --- Wide info tile: full-width editorial banner --------------------------
   Earlier we tried a 2-column internal layout (header left, description
   right) but it created a new void: the left column held only icon+title
   and looked sparse. The cleanest editorial answer is to let the wide tile
   render as a single full-width banner — header on top, description spans
   the entire tile width, badges below. With max-width released the
   description wraps naturally to fill the broader column.

   No internal grid. The wide tile keeps the default flex-column flow from
   marketing-primitives.css, but we open the rhythm a touch so the banner
   doesn't feel cramped. */
/* Wide tile reads as a hero banner: needs proportionally larger inset so the
   icon and title don't feel glued to the left edge against all the empty
   horizontal space the banner carries. Step up the inset above the small-tile
   default and ease it back down on narrower viewports. */
.ak-info-tile--wide {
    padding: var(--space-2xl, 3rem) var(--space-2xl, 3rem) !important;
}

.ak-info-tile--wide .ak-info-tile__title {
    font-size: 1.45rem;
}

@media (max-width: 991px) {
    .ak-info-tile--wide {
        padding: var(--space-xl, 2rem) var(--space-xl, 2rem) !important;
    }
}

@media (max-width: 575px) {
    .ak-info-tile--wide {
        padding: var(--space-lg, 1.5rem) var(--space-lg, 1.5rem) !important;
    }
}

/* Wide tile internal layout at desktop: split into a 2-column editorial
   banner so the right half doesn't read as dead space. The headline and
   prose flow on the left in a stacked column; the badge rail anchors the
   right side and is vertically centered against the text block.
   Only applied when the tile actually has a badge list — otherwise we keep
   the natural full-width banner flow so the description fills the row. */
@media (min-width: 992px) {
    .ak-info-tile--wide:has(.ak-info-tile__badges) {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "header badges"
            "desc   badges";
        column-gap: var(--space-2xl, 3rem);
        row-gap: var(--space-md, 1rem);
        align-items: center;
    }

    .ak-info-tile--wide:has(.ak-info-tile__badges) > .ak-info-tile__header {
        grid-area: header;
        margin-bottom: 0 !important;
        align-self: end;
    }

    .ak-info-tile--wide:has(.ak-info-tile__badges) > .ak-info-tile__description {
        grid-area: desc;
        margin: 0 !important;
        align-self: start;
    }

    .ak-info-tile--wide:has(.ak-info-tile__badges) > .ak-info-tile__badges {
        grid-area: badges;
        margin: 0 !important;
        align-self: center;
        flex-wrap: wrap;
        justify-content: flex-end;
        max-width: 22rem;
    }
}

/* Smaller info tiles also benefit from a touch more inset so the icon clears
   the rounded corner cleanly. */
.ak-info-tile:not(.ak-info-tile--wide) {
    padding: var(--space-xl, 2rem) !important;
}

@media (max-width: 575px) {
    .ak-info-tile:not(.ak-info-tile--wide) {
        padding: var(--space-lg, 1.5rem) !important;
    }
}


/* --- Info tile: breathing room between header and description --------------
   The default 1rem header→description gap reads tight once both rows use
   serif typography. Lift to 1.5rem so the title gets a clear airspace
   before the supporting prose. */
.ak-info-tile__header--inline,
.ak-info-tile__header--stacked {
    margin-bottom: var(--space-stack-lg) !important;
}

.ak-info-tile__badges {
    margin-top: var(--space-stack-md) !important;
}


/* --- Step rail exemption ---------------------------------------------------
   The Krafter "How it works" rail intentionally renders its 5 steps as a
   numbered text rail divided by hairlines, not as boxed cards. Editorial.css
   converts every .ak-timeline-step into a paper surface with !important —
   which clobbers that rail design. Re-flatten timeline steps that live inside
   a .steps-container so the rail wins back. */
.steps-container .ak-timeline-step {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.steps-container .ak-timeline-step::before {
    background: transparent !important;
    height: 0 !important;
}

.steps-container .ak-timeline-step:hover {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}