/* GLL bento grid (2026-10-18). Reusable, opt-in, square, hairline, no shadows.

   Markup:
   <div class="gll-bento">
     <article class="gll-bento__tile gll-bento__tile--8" data-reveal>          (--4 | --6 | --8 | --12)
       <span class="gll-bento__icon"><svg 20px, 1.5 stroke/></span>         (40px hairline cell)
       <p class="gll-bento__kicker">Caption</p>                               (11px caps; the only gold)
       <h3 class="gll-bento__title">Title</h3>                                (22px / 600)
       <p class="gll-bento__body">Body</p>                                    (16px meta grey)
       <div class="gll-bento__foot">figure, stat strip, matrix or link</div>  (pushed to the bottom)
     </article>
   </div>

   Rhythm: write the rows in reading order. A "reverse" row is simply the 1/3 tile first, then the 2/3.
   Rows are equal height (grid rows stretch); each tile is a flex column and .gll-bento__foot sits on the
   bottom edge (margin-top:auto), so links and figures line up across a row.
   Breakpoints: >=1100px 12 columns; 768-1099px 2 columns (--8/--12 full width, --4/--6 half);
   <768px one column, in markup order.
   Variants: .gll-bento__tile--dark (one per grid at most); .gll-bento__tile--md-full (full width at 768-1099px,
   for a 1/3 tile that would otherwise sit alone on a tablet row).
   Motion: data-reveal + data-reveal-delay on tiles (gll-scroll.js); reduced motion is static. */

html body .gll-bento.gll-bento{--gb-gap:16px;--gb-pad:20px;--gb-line:#e6e6e6;--gb-ink:#0a0a0a;--gb-meta:#5f6b70;--gb-body:#222;
  display:grid;grid-template-columns:minmax(0,1fr);gap:var(--gb-gap);align-items:stretch;margin:0;padding:0;list-style:none;
  font-family:'Inter Tight','Inter',sans-serif}
html body .gll-bento.gll-bento *{box-sizing:border-box}
html body .gll-bento.gll-bento > .gll-bento__tile{position:relative;display:flex;flex-direction:column;align-items:flex-start;min-width:0;margin:0!important;
  padding:var(--gb-pad);background:#fff;border:1px solid var(--gb-line);border-radius:0;box-shadow:none;color:var(--gb-body);
  overflow-wrap:break-word;transition:border-color .2s ease}
html body .gll-bento.gll-bento > .gll-bento__tile::before,html body .gll-bento.gll-bento > .gll-bento__tile::after{content:none}
html body .gll-bento.gll-bento > .gll-bento__tile:hover,html body .gll-bento.gll-bento > .gll-bento__tile:focus-within{border-color:var(--gb-ink)}

/* anatomy */
html body .gll-bento.gll-bento .gll-bento__icon{flex:none;display:flex;align-items:center;justify-content:center;width:40px;height:40px;margin:0 0 24px;
  border:1px solid var(--gb-line);color:var(--gb-ink);background:transparent}
html body .gll-bento.gll-bento .gll-bento__icon svg{display:block;width:20px;height:20px;stroke-width:1.5}
html body .gll-bento.gll-bento .gll-bento__kicker{margin:0 0 8px!important;padding:0;max-width:none;font:600 11px/16px 'Inter Tight','Inter',sans-serif!important;
  letter-spacing:.2em!important;text-transform:uppercase;color:#7A5B12!important}
html body .gll-bento.gll-bento .gll-bento__title{margin:0 0 8px!important;padding:0;max-width:none;white-space:normal;
  font:600 20px/28px 'Inter Tight','Inter',sans-serif!important;letter-spacing:-.015em!important;color:var(--gb-ink)!important;text-transform:none}
html body .gll-bento.gll-bento .gll-bento__body{margin:0!important;padding:0;max-width:62ch;font-weight:400;
  font-size:15px!important;line-height:24px!important;color:var(--gb-meta)!important}
html body .gll-bento.gll-bento .gll-bento__body a{color:var(--gb-ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
html body .gll-bento.gll-bento .gll-bento__body + .gll-bento__body{margin-top:8px!important}
html body .gll-bento.gll-bento .gll-bento__foot{margin-top:auto!important;padding-top:24px;width:100%}

/* bottom link: text + small arrow, 44px target */
html body .gll-bento.gll-bento a.gll-bento__link{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin:0 0 -12px;padding:0;
  font:600 14px/20px 'Inter Tight','Inter',sans-serif;letter-spacing:0;color:var(--gb-ink)!important;text-decoration:none;border:0}
html body .gll-bento.gll-bento a.gll-bento__link span{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;text-decoration-color:rgba(10,10,10,.35);transition:text-decoration-color .2s}
html body .gll-bento.gll-bento a.gll-bento__link svg{width:16px;height:16px;flex:none;transition:transform .2s ease}
html body .gll-bento.gll-bento a.gll-bento__link:hover span{text-decoration-color:currentColor}
html body .gll-bento.gll-bento a.gll-bento__link:hover svg{transform:translateX(3px)}
html body .gll-bento.gll-bento a.gll-bento__link:focus-visible{outline:2px solid currentColor;outline-offset:2px}

/* mini visual 1: tier strip (three equal cells, a hairline above, a value per plan) */
html body .gll-bento.gll-bento .gll-bento__tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0!important;padding:0!important;list-style:none!important;border-top:1px solid var(--gb-line)}
html body .gll-bento.gll-bento .gll-bento__tiers > li{margin:0!important;padding:12px 12px 0 0!important;min-width:0;font-size:11px!important;line-height:16px!important;
  font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gb-meta)!important}
html body .gll-bento.gll-bento .gll-bento__tiers > li + li{padding-left:12px!important;border-left:1px solid var(--gb-line)}
html body .gll-bento.gll-bento .gll-bento__tiers > li::before{content:none}
html body .gll-bento.gll-bento .gll-bento__tiers b{display:flex;align-items:center;height:40px;margin:4px 0 0;font:500 32px/40px 'Inter Tight','Inter',sans-serif;
  letter-spacing:-.03em;text-transform:none;color:var(--gb-ink);font-variant-numeric:tabular-nums}
html body .gll-bento.gll-bento .gll-bento__tiers b.is-no{color:#b9bfc2;font-weight:300}
html body .gll-bento.gll-bento .gll-bento__tiers b svg{width:24px;height:24px}
html body .gll-bento.gll-bento .gll-bento__cap{display:block;margin:0 0 8px!important;font:600 11px/16px 'Inter Tight','Inter',sans-serif!important;letter-spacing:.12em!important;text-transform:uppercase;color:var(--gb-meta)!important}

/* mini visual 2: feature rows (label left, availability right, hairlines between) */
html body .gll-bento.gll-bento .gll-bento__rows{margin:0!important;padding:0!important;list-style:none!important;border-top:1px solid var(--gb-line)}
html body .gll-bento.gll-bento .gll-bento__rows > li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin:0!important;padding:10px 0!important;
  border-bottom:1px solid var(--gb-line);font-size:15px!important;line-height:22px!important;color:var(--gb-body)!important}
html body .gll-bento.gll-bento .gll-bento__rows > li::before{content:none}
html body .gll-bento.gll-bento .gll-bento__rows > li > b{flex:none;font-weight:500;color:var(--gb-ink);text-align:right}

/* mini visual 3: matrix (feature x plan, check or dash) */
html body .gll-bento.gll-bento .gll-bento__matrix{width:100%;margin:0;border-collapse:collapse;table-layout:fixed}
html body .gll-bento.gll-bento .gll-bento__matrix th,html body .gll-bento.gll-bento .gll-bento__matrix td{padding:10px 0;border:0;border-bottom:1px solid var(--gb-line);background:none!important;
  font-size:15px!important;line-height:22px!important;font-weight:400;color:var(--gb-body);text-align:left;vertical-align:middle}
html body .gll-bento.gll-bento .gll-bento__matrix thead th{padding-top:0;font:600 11px/16px 'Inter Tight','Inter',sans-serif!important;letter-spacing:.12em;text-transform:uppercase;color:var(--gb-meta);text-align:center}
html body .gll-bento.gll-bento .gll-bento__matrix thead th:first-child{text-align:left}
html body .gll-bento.gll-bento .gll-bento__matrix td{text-align:center;width:22%}
html body .gll-bento.gll-bento .gll-bento__matrix td svg{display:inline-block;width:18px;height:18px;vertical-align:middle;color:var(--gb-ink)}
html body .gll-bento.gll-bento .gll-bento__matrix td.is-no{color:#b9bfc2}

/* mini visual 4: the real check images */
html body .gll-bento.gll-bento .gll-bento__ticks{display:grid;gap:0;margin:0!important;padding:0!important;list-style:none!important;border-top:1px solid var(--gb-line)}
html body .gll-bento.gll-bento .gll-bento__ticks > li{display:flex;align-items:center;gap:12px;margin:0!important;padding:12px 0!important;border-bottom:1px solid var(--gb-line);
  font-size:15px!important;line-height:22px!important;color:var(--gb-body)!important}
html body .gll-bento.gll-bento .gll-bento__ticks > li::before{content:none}
html body .gll-bento.gll-bento .gll-bento__ticks img{display:block;flex:none;width:24px!important;height:24px!important;margin:0;border:0}
html body .gll-bento.gll-bento .gll-bento__ticks b{font-weight:600;color:var(--gb-ink)}

/* featured dark tile (one per grid) */
html body .gll-bento.gll-bento > .gll-bento__tile--dark{background:#0a0a0a;border-color:#0a0a0a;color:#fff}
html body .gll-bento.gll-bento > .gll-bento__tile--dark:hover,html body .gll-bento.gll-bento > .gll-bento__tile--dark:focus-within{border-color:#0a0a0a;outline:1px solid rgba(255,255,255,.4);outline-offset:-5px}
html body .gll-bento.gll-bento .gll-bento__tile--dark .gll-bento__icon{border-color:rgba(255,255,255,.24);color:#fff}
html body .gll-bento.gll-bento .gll-bento__tile--dark .gll-bento__kicker{color:#D4AF5A!important}
html body .gll-bento.gll-bento .gll-bento__tile--dark .gll-bento__title{color:#fff!important}
html body .gll-bento.gll-bento .gll-bento__tile--dark .gll-bento__body{color:rgba(255,255,255,.74)!important}
html body .gll-bento.gll-bento .gll-bento__tile--dark .gll-bento__body a,html body .gll-bento.gll-bento .gll-bento__tile--dark a.gll-bento__link{color:#fff!important}
html body .gll-bento.gll-bento .gll-bento__tile--dark a.gll-bento__link span{text-decoration-color:rgba(255,255,255,.45)}
html body .gll-bento.gll-bento .gll-bento__tile--dark :is(.gll-bento__ticks,.gll-bento__ticks > li,.gll-bento__rows,.gll-bento__rows > li,.gll-bento__tiers,.gll-bento__tiers > li + li){border-color:rgba(255,255,255,.18)}
html body .gll-bento.gll-bento .gll-bento__tile--dark :is(.gll-bento__ticks > li,.gll-bento__rows > li){color:rgba(255,255,255,.74)!important}
html body .gll-bento.gll-bento .gll-bento__tile--dark :is(.gll-bento__ticks b,.gll-bento__rows b){color:#fff}

/* tablet: two columns */
@media (min-width:768px){
  html body .gll-bento.gll-bento{--gb-pad:24px;grid-template-columns:repeat(2,minmax(0,1fr))}
  html body .gll-bento.gll-bento > :is(.gll-bento__tile--8,.gll-bento__tile--12){grid-column:span 2}
}
/* tablet only: a --4/--6 tile that would sit alone on its row takes the full width */
@media (min-width:768px) and (max-width:1099px){
  html body .gll-bento.gll-bento > .gll-bento__tile--md-full{grid-column:span 2}
}
/* desktop: twelve columns */
@media (min-width:1100px){
  html body .gll-bento.gll-bento{--gb-pad:32px;grid-template-columns:repeat(12,minmax(0,1fr))}
  html body .gll-bento.gll-bento > .gll-bento__tile--4{grid-column:span 4}
  html body .gll-bento.gll-bento > .gll-bento__tile--6{grid-column:span 6}
  html body .gll-bento.gll-bento > .gll-bento__tile--8{grid-column:span 8}
  html body .gll-bento.gll-bento > .gll-bento__tile--12{grid-column:span 12}
  html body .gll-bento.gll-bento .gll-bento__title{font-size:22px!important;line-height:30px!important}
  html body .gll-bento.gll-bento .gll-bento__body{font-size:16px!important;line-height:26px!important}
}
@media (max-width:767px){
  html body .gll-bento.gll-bento .gll-bento__icon{margin-bottom:20px}
  html body .gll-bento.gll-bento .gll-bento__foot{padding-top:20px}
  html body .gll-bento.gll-bento .gll-bento__tiers b{font-size:26px;line-height:40px}
}
/* narrow phones: plan names never break mid-word; rows and the badge matrix stack */
@media (max-width:559px){
  html body .gll-bento.gll-bento .gll-bento__tiers > li{letter-spacing:.04em;padding-right:8px!important}
  html body .gll-bento.gll-bento .gll-bento__tiers > li + li{padding-left:8px!important}
  html body .gll-bento.gll-bento .gll-bento__rows > li{flex-direction:column;align-items:flex-start;gap:2px}
  html body .gll-bento.gll-bento .gll-bento__rows > li > b{text-align:left}
  html body .gll-bento.gll-bento .gll-bento__matrix,html body .gll-bento.gll-bento .gll-bento__matrix :is(thead,tbody){display:block}
  html body .gll-bento.gll-bento .gll-bento__matrix tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:1px solid var(--gb-line)}
  html body .gll-bento.gll-bento .gll-bento__matrix :is(th,td){display:block;width:auto;border-bottom:0}
  html body .gll-bento.gll-bento .gll-bento__matrix thead th{letter-spacing:.04em}
  html body .gll-bento.gll-bento .gll-bento__matrix thead th:first-child{display:none}
  html body .gll-bento.gll-bento .gll-bento__matrix tbody th{grid-column:1 / -1;padding-bottom:4px}
  html body .gll-bento.gll-bento .gll-bento__matrix tbody td{padding-top:4px}
}
@media (prefers-reduced-motion:reduce){
  html body .gll-bento.gll-bento > .gll-bento__tile,html body .gll-bento.gll-bento a.gll-bento__link svg{transition:none}
  html body .gll-bento.gll-bento a.gll-bento__link:hover svg{transform:none}
}