/* ==========================================================================
   "Included with every tier" — the icon strip closing the packages section
   (/services/web-design-and-development, #tk-webincluded)

   The strip renders inside the packages section's own container, so it
   needs no background, no width and no outer padding of its own: it
   inherits all three and reads as the last row of the packages rather than
   a separate band. One hairline separates it from the cards.

   The tiles use the same surface as the hero's review and stat badges in
   tbtk-start-website.css — the same gradient, border, radius and inset
   highlight — so the two sets of chips on this page match.

   Scoped under #tk-webincluded, and the colour rules carry the id twice.
   Both are deliberate:

   - page_css is emitted before the layout's own stylesheets, so a single
     class selector can lose an order tie to the theme's generic rules;
   - in light mode the theme paints every p / span / small / li inside
     #primary.tk-gd one colour, with one id, two classes and two types.
     That outranks a normal `html[data-tk-theme="light"] #tk-webincluded
     .inc-label` selector on type count and would flatten both the accent
     and the labels. Two ids beat one outright.

   Nothing here animates on its own. The tiles tilt under the cursor and
   nowhere else, so the strip is settled the moment the packages are.
   ========================================================================== */

#tk-webincluded {
    --accent: var(--primary-color, #0073FC);
    --line: rgba(255, 255, 255, .08);
    --ink: #ffffff;

    margin-top: 44px;
    padding-top: 30px;
    border-top: 1px solid var(--line);
}

#tk-webincluded .inc-head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin: 0 0 26px;
    color: var(--accent);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .16em;
    line-height: 1;
    text-transform: uppercase;
}

#tk-webincluded .inc-head svg {
    width: 13px;
    height: 13px;
    flex: 0 0 auto;
    display: block;
}

/* Flex, not grid, so a row with fewer items (the website strip has 5)
   sits centred under the heading. Each item keeps the width of one of
   nine / five / three equal columns, exactly as the grid gave it. */
#tk-webincluded .inc-list {
    --inc-cols: 9;
    --inc-gap: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px var(--inc-gap);
    margin: 0;
    padding: 0;
    list-style: none;
}

#tk-webincluded .inc-item {
    flex: 0 0 calc((100% - (var(--inc-cols) - 1) * var(--inc-gap)) / var(--inc-cols));
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 11px;
    text-align: center;
}

/* ---- the tile: the hero badge surface ------------------------------------ */
#tk-webincluded .inc-tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    flex: 0 0 auto;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 14px;
    background: linear-gradient(rgb(26, 30, 34), rgb(19, 22, 26));
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .06),
        0 3px 7px rgba(0, 0, 0, .4);
    color: var(--accent);

    /* the tilt needs depth to read as one rather than as a squash */
    transform: perspective(420px);
    transition: transform .25s cubic-bezier(.22, .8, .3, 1),
                border-color .25s ease,
                box-shadow .25s ease;
}

#tk-webincluded .inc-tile svg {
    width: 20px;
    height: 20px;
    display: block;
    max-width: none;
}

/* Tilt on hover. The whole item is the target, not just the tile, so
   pointing at the label works too — the label is part of the same chip as
   far as the reader is concerned. :focus-within covers the keyboard. */
#tk-webincluded .inc-item:hover .inc-tile,
#tk-webincluded .inc-item:focus-within .inc-tile {
    transform: perspective(420px) rotateX(11deg) rotateY(-13deg) translateY(-3px);
    border-color: color-mix(in srgb, var(--accent) 50%, transparent);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .08),
        0 10px 18px rgba(0, 0, 0, .5);
}

#tk-webincluded .inc-label {
    color: var(--ink);
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.3;
}

/* ==========================================================================
   Light theme
   ========================================================================== */
html[data-tk-theme="light"] #tk-webincluded {
    --line: rgba(15, 23, 42, .1);
    --ink: #0a0d0f;
}

html[data-tk-theme="light"] #tk-webincluded .inc-tile {
    border-color: rgba(15, 23, 42, .12);
    background: #fff;
    box-shadow: 0 2px 6px rgba(15, 23, 42, .08);
}

html[data-tk-theme="light"] #tk-webincluded .inc-item:hover .inc-tile,
html[data-tk-theme="light"] #tk-webincluded .inc-item:focus-within .inc-tile {
    border-color: color-mix(in srgb, var(--accent) 45%, transparent);
    box-shadow: 0 10px 18px rgba(15, 23, 42, .14);
}

/* beating the theme's blanket light-mode text rule — see the note above.
   .inc-tile is a span and .inc-item an li, so both are caught by it. */
html[data-tk-theme="light"] #tk-webincluded#tk-webincluded .inc-head,
html[data-tk-theme="light"] #tk-webincluded#tk-webincluded .inc-tile {
    color: var(--accent);
}

html[data-tk-theme="light"] #tk-webincluded#tk-webincluded .inc-label {
    color: var(--ink);
}

/* ==========================================================================
   Responsive

   Nine across needs the full container. Below that the row breaks to five,
   then three, which keeps the tiles on a shared baseline instead of
   shrinking them until the icons stop reading.
   ========================================================================== */
@media (max-width: 1199.98px) {
    #tk-webincluded .inc-list {
        --inc-cols: 5;
    }
}

@media (max-width: 767.98px) {
    #tk-webincluded {
        margin-top: 34px;
        padding-top: 26px;
    }

    #tk-webincluded .inc-list {
        --inc-cols: 3;
        --inc-gap: 8px;
        gap: 22px var(--inc-gap);
    }

    #tk-webincluded .inc-label {
        font-size: 11.5px;
    }
}

/* ==========================================================================
   Reduced motion: keep the hover feedback, drop the movement
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    #tk-webincluded .inc-tile {
        transition: border-color .25s ease, box-shadow .25s ease;
    }

    #tk-webincluded .inc-item:hover .inc-tile,
    #tk-webincluded .inc-item:focus-within .inc-tile {
        transform: perspective(420px);
    }
}