/* ============================================================
   TaskLogix360 - HOME SECURITY BENTO
   Added 2026-08-05. Sam picked the bento over the audit-trail panel and asked
   for icons on the tiles.

   GROUND. This is the deepest band on the page and it is deliberately deeper
   than the CTA that follows, because the two dark sections are adjacent. In the
   mock they measured 1.3 luminance apart and read as one long dark mass; .horizon
   alone could not fix that, so the value gap comes first and the seam second.
   ============================================================ */

.security-bento{
  /* Horizontal padding was 0, which .tlx-section-inner's max-width:1280 hid on
     desktop (it just centres inside 1440) but which put every tile and both
     copy blocks flush against the viewport at 390. The site gutter is
     clamp(20px,5vw,64px); at desktop it changes nothing because the inner is
     still capped at 1280. */
  padding:clamp(76px,8.5vw,120px) clamp(20px,5vw,64px) clamp(84px,9vw,128px);
  /* deeper than .ground-dark's default so the CTA band reads as the brighter
     of the two. Overrides the gradient, keeps the class for .tlx-in-* timing. */
  background:
    radial-gradient(120% 90% at 82% -10%, rgba(30,154,68,.14) 0%, rgba(30,154,68,0) 62%),
    linear-gradient(168deg,#030F1C 0%,#06213A 54%,#02101D 100%);
}

.hb-head{position:relative;z-index:1;max-width:780px;margin-bottom:clamp(30px,3.6vw,46px)}
.security-bento .eyebrow{color:var(--green-bright)}
.hs-h2{margin:12px 0 16px;font-size:clamp(28px,3.4vw,42px);line-height:1.16;font-weight:800;
  letter-spacing:-.02em;color:#fff;text-wrap:balance}
.hs-h2 .hl{color:var(--green-bright)}
.hs-lede{margin:0;font-size:clamp(16px,1.7vw,18.5px);line-height:1.6;color:#BCD2E5;max-width:62ch}

.hb-grid{position:relative;z-index:1;display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.hb-tile{padding:28px;border-radius:16px;background:rgba(255,255,255,.055);
  box-shadow:inset 0 0 0 1px rgba(151,196,236,.16)}
.hb-tile h3{margin:0 0 8px;font-size:24px;font-weight:700;color:#fff;letter-spacing:-.01em}
.hb-tile p{margin:0;font-size:14.5px;line-height:1.55;color:#BCD2E5}

/* the icons Sam asked for. Tinted tile, green stroke - the same treatment the
   fork's .v2-ico uses, so a "capability marker" looks the same site-wide. */
.hb-ic{display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:12px;margin-bottom:16px;
  background:rgba(30,154,68,.15);border:1px solid rgba(53,193,104,.30);color:var(--green-bright)}
.hb-ic svg{width:20px;height:20px}

/* the anchor tile: two columns wide, two rows tall, copy pinned to the bottom
   so the icon sits alone at the top and the tile does not read as a text block */
.hb-lg{grid-column:span 2;grid-row:span 2;display:flex;flex-direction:column;justify-content:space-between}
.hb-lg p{font-size:15.5px;max-width:52ch}
.hb-wide{grid-column:span 3}

.hs-link{display:inline-flex;align-items:center;gap:8px;margin-top:28px;position:relative;z-index:1;
  font-size:15.5px;font-weight:700;color:var(--green-bright);text-decoration:none}
.hs-link svg{width:16px;height:16px;transition:transform .2s var(--ease)}
.hs-link:hover svg{transform:translateX(3px)}
.hs-link:focus-visible{outline:2px solid var(--green-bright);outline-offset:4px;border-radius:4px}
/* 2026-08-19: 23px tall is under every touch floor. Grow the hit area to 44px
   without moving the link -- same trick as the FAQ scroll arrow. */
.hs-link::after{content:"";position:absolute;left:0;right:0;top:-12px;bottom:-12px}

@media(max-width:900px){
  .hb-grid{grid-template-columns:1fr}
  .hb-lg,.hb-wide{grid-column:span 1;grid-row:auto}
  .hb-lg{display:block}
  .hb-tile h3{font-size:20px}
}

/* The anchor tile is two rows tall, so icon-top + copy-bottom left a dead band
   through its middle. The three roles the sentence names now occupy it, which
   turns the empty height into the actual demonstration of the claim. */
.hb-lg{justify-content:flex-start}
.hb-lg .hb-ic{margin-bottom:20px}
.hb-roles{list-style:none;margin:auto 0 0;padding:24px 0 0;display:grid;gap:1px;
  border-top:1px solid rgba(151,196,236,.16)}
.hb-roles li{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:12px 0;border-bottom:1px solid rgba(151,196,236,.10)}
.hb-roles li:last-child{border-bottom:0}
.hb-rn{font-size:14.5px;font-weight:700;color:#fff}
.hb-rs{font-size:14.5px;color:#8FB0CB;font-weight:600}
@media(max-width:900px){.hb-roles{margin-top:20px}}