/* Feature marketing pages — targeted design fixes (loaded after app.css,
   only on /features pages). Two issues, owner-reported:

   1. On wide screens (>~1600px) everything looked zoomed/huge because the
      root font-size (:root{font-size:clamp(15.5px,0.7vw+0.4vh,30px)}) keeps
      growing with the viewport. <=1600px sits at the 15.5px floor and looked
      right, so we simply cap the growth at 16px — narrow/laptop widths are
      byte-identical, wide screens stop inflating.

   2. The guest header is position:fixed (.navbar.fixed-top) but the content
      has no top offset, so the tall hero mockup tucked up under it. Give the
      feature hero a header's-worth of top clearance. */

:root { font-size: clamp(15.5px, 0.7vw + 0.4vh, 16px) !important; }

.industries.features { padding-top: 5.75rem; }

/* keep mobile untouched — the fixed header collapses to a mobile bar there */
@media (max-width: 991.98px) {
    .industries.features { padding-top: 0; }
}

/* ===================================================================
   AI standout strips (bottom of /features) — a matched YIN/YANG pair:
   the dark, serious receptionist and the light, magical website builder
   (colours pulled from builder-promo.css). Everything is namespaced
   .ais-* so it can't collide with the marketing site's own classes. */
.ais { font-family: "Rubik", system-ui, -apple-system, sans-serif; margin-top: 8px; }
.ais-wrap { max-width: 1180px; margin: 0 auto; padding: 0 40px; }
.ais-row { position: relative; display: flex; align-items: center; gap: 20px; padding: 19px 0; z-index: 2; }
.ais-pic { flex: none; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; }
.ais-pic svg { width: 24px; height: 24px; }
.ais-txt { flex: 1 1 auto; min-width: 0; }
.ais-ttl { font-size: 18.5px; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; }
.ais-pill { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; border-radius: 5px; padding: 2px 7px; margin-right: 10px; vertical-align: 2px; }
.ais-desc { font-size: 13.5px; margin-top: 3px; }
.ais-btn { flex: none; display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 700; color: #fff !important; border-radius: 10px; padding: 10px 19px; text-decoration: none; transition: transform .12s; }
.ais-btn:hover { transform: translateY(-1px); }

.ais-dark { position: relative; overflow: hidden; background: #17100A; color: #F5EEE3; }
.ais-dark::before { content: ""; position: absolute; top: -60%; right: 7%; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, rgba(243,90,114,.22), rgba(243,90,114,0) 64%); }
.ais-dark .ais-pic { background: rgba(243,90,114,.14); color: #F35A72; }
.ais-dark .ais-pill { color: #F35A72; border: 1px solid rgba(243,90,114,.4); }
.ais-dark .ais-desc { color: #B9AB99; }
.ais-dark .ais-btn { background: #F35A72; box-shadow: 0 6px 16px rgba(243,90,114,.3); }

.ais-magic { position: relative; overflow: hidden; color: #141414; background: radial-gradient(120% 180% at 82% -40%, #FDEEF1 0%, #FBE3E8 26%, #fff 66%); }
.ais-magic .ais-pic { background: #FDE7EA; color: #DB3A57; }
.ais-magic .ais-pill { color: #DB3A57; border: 1px solid rgba(219,58,87,.35); background: rgba(219,58,87,.06); }
.ais-magic .ais-spark { background: linear-gradient(92deg, #DB3A57, #ff7aa0 55%, #C42E3A); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ais-magic .ais-desc { color: #5C6066; }
.ais-magic .ais-btn { background: #DB3A57; box-shadow: 0 8px 20px rgba(219,58,87,.28); }
.ais-magic .ais-star { display: inline-block; margin-left: 6px; vertical-align: -2px; color: #DB3A57; }
.ais-magic .ais-star svg { width: 16px; height: 16px; }
.ais-spk { position: absolute; border-radius: 50%; background: rgba(219,58,87,.5); animation: aisTwinkle 3.1s ease-in-out infinite; z-index: 1; }
.ais-spk.a { width: 7px; height: 7px; top: 22%; left: 30%; }
.ais-spk.b { width: 5px; height: 5px; top: 62%; left: 46%; animation-delay: .7s; }
.ais-spk.c { width: 6px; height: 6px; top: 30%; left: 63%; animation-delay: 1.3s; }
.ais-spk.d { width: 4px; height: 4px; top: 70%; left: 72%; animation-delay: 1.9s; background: rgba(255,140,170,.7); }
.ais-spk.e { width: 6px; height: 6px; top: 40%; left: 88%; animation-delay: .4s; }
@keyframes aisTwinkle { 0%, 100% { opacity: .2; transform: scale(.6); } 50% { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .ais-spk { animation: none; opacity: .5; } }
@media (max-width: 760px) { .ais-row { flex-wrap: wrap; } .ais-txt { flex-basis: 100%; order: 2; } .ais-btn { order: 3; } }

/* Placement (2026-07-13): the strips now render as a block just BEFORE the FAQ, which lives
   inside the page's centered .double-container. Break the two bands out to the full viewport
   width (scroll-safe: uses % so it excludes the scrollbar) so the yin/yang pair still reads as
   edge-to-edge sections — the inner .ais-wrap keeps its 1180px centered content. */
.ais { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }

/* ===================================================================
   AI feature BLOCKS on /features (bigger yin/yang bands than the menu strips),
   rendered just before the FAQ. Full-bleed inside the centered .double-container. */
.aib-group { margin: 12px 0; }
.aib { position: relative; overflow: hidden; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); font-family: "Rubik", system-ui, -apple-system, sans-serif; }
.aib + .aib { margin-top: 2px; }
.aib-wrap { max-width: 1180px; margin: 0 auto; padding: 42px 40px; display: flex; align-items: center; gap: 34px; position: relative; z-index: 2; }
.aib-body { flex: 1 1 auto; display: flex; gap: 22px; align-items: flex-start; min-width: 0; }
.aib-ic { flex: none; width: 56px; height: 56px; border-radius: 15px; display: grid; place-items: center; }
.aib-ic svg { width: 29px; height: 29px; }
.aib-txt { min-width: 0; }
.aib-kick { font-size: 13px; font-weight: 700; display: flex; align-items: center; }
.aib-pill { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; border-radius: 5px; padding: 2px 8px; margin-right: 11px; }
.aib-ttl { font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; margin: 10px 0 11px; }
.aib-desc { font-size: 15px; line-height: 1.55; margin: 0 0 15px; max-width: 60ch; }
.aib-points { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 7px 26px; }
.aib-points li { font-size: 13.5px; font-weight: 600; position: relative; padding-left: 23px; }
.aib-points li::before { content: ""; position: absolute; left: 2px; top: 5px; width: 11px; height: 6px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); opacity: .9; }
.aib-btn { flex: none; display: inline-flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 700; color: #fff !important; border-radius: 12px; padding: 14px 26px; text-decoration: none; transition: transform .12s; white-space: nowrap; }
.aib-btn:hover { transform: translateY(-1px); }
.aib-glow { position: absolute; top: -45%; right: 7%; width: 480px; height: 480px; border-radius: 50%; background: radial-gradient(circle, rgba(243,90,114,.2), rgba(243,90,114,0) 64%); z-index: 1; }

.aib--dark { background: #17100A; color: #F5EEE3; }
.aib--dark .aib-ic { background: rgba(243,90,114,.14); color: #F35A72; }
.aib--dark .aib-pill { color: #F35A72; border: 1px solid rgba(243,90,114,.4); }
.aib--dark .aib-desc { color: #C9BBAA; }
.aib--dark .aib-points li { color: #E8DDCF; }
.aib--dark .aib-points li::before { color: #F35A72; }
.aib--dark .aib-btn { background: #F35A72; box-shadow: 0 8px 20px rgba(243,90,114,.3); }

.aib--magic { color: #141414; background: radial-gradient(120% 180% at 82% -40%, #FDEEF1 0%, #FBE3E8 26%, #fff 66%); }
.aib--magic .aib-ic { background: #FDE7EA; color: #DB3A57; }
.aib--magic .aib-pill { color: #DB3A57; border: 1px solid rgba(219,58,87,.35); background: rgba(219,58,87,.06); }
.aib--magic .aib-spark { background: linear-gradient(92deg, #DB3A57, #ff7aa0 55%, #C42E3A); -webkit-background-clip: text; background-clip: text; color: transparent; }
.aib--magic .aib-desc { color: #4E525A; }
.aib--magic .aib-points li { color: #2C2F35; }
.aib--magic .aib-points li::before { color: #DB3A57; }
.aib--magic .aib-btn { background: #DB3A57; box-shadow: 0 8px 20px rgba(219,58,87,.28); }
.aib-spk { position: absolute; border-radius: 50%; background: rgba(219,58,87,.5); animation: aisTwinkle 3.1s ease-in-out infinite; z-index: 1; }
.aib-spk.a { width: 8px; height: 8px; top: 24%; left: 44%; }
.aib-spk.b { width: 5px; height: 5px; top: 62%; left: 68%; animation-delay: .8s; }
.aib-spk.c { width: 6px; height: 6px; top: 34%; left: 86%; animation-delay: 1.5s; }
.aib-spk.d { width: 5px; height: 5px; top: 72%; left: 52%; animation-delay: 2.1s; background: rgba(255,140,170,.7); }

@media (max-width: 860px) {
    .aib-wrap { flex-direction: column; align-items: flex-start; padding: 30px 26px; gap: 22px; }
}
@media (max-width: 560px) {
    .aib-body { flex-direction: column; gap: 14px; }
    .aib-ttl { font-size: 22px; }
}