/* "At a glance" bento tiles — scroll-in + hover, text stays in the DOM for search/AI (schema.org Service) */
.glance { max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem; text-align: left; }
.gl { position: relative; background: #f5f7f6; border: 1px solid #e6ebe7; border-radius: 20px; padding: 1.5rem 1.6rem; overflow: hidden;
  opacity: 0; transform: translateY(18px) scale(.98);
  transition: opacity .6s ease, transform .7s cubic-bezier(.22,1.2,.36,1), border-color .3s ease, translate .45s cubic-bezier(.34,1.35,.64,1); }
.gl.in { opacity: 1; transform: none; }
.gl:nth-child(2) { transition-delay: .06s, .06s, 0s, 0s; } .gl:nth-child(3) { transition-delay: .12s, .12s, 0s, 0s; }
.gl:nth-child(4) { transition-delay: .18s, .18s, 0s, 0s; } .gl:nth-child(5) { transition-delay: .24s, .24s, 0s, 0s; }
.gl-a { grid-column: span 3; grid-row: span 2; } .gl-b { grid-column: span 3; grid-row: span 2; }
.gl-c, .gl-d, .gl-e { grid-column: span 2; } .gl-f { grid-column: span 6; text-align: center; }
.gl-k { font-family: var(--font-head); font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--sage-dark); }
.gl p { margin-top: .35rem; font-size: .98rem; line-height: 1.5; color: var(--dark); }
.gl-big { font-family: var(--font-head); font-size: clamp(2.8rem, 6vw, 4rem); font-weight: 700; letter-spacing: -.03em; color: var(--sage-dark); line-height: 1; margin-top: .6rem; font-variant-numeric: tabular-nums; }
/* dot map */
.gl-map { position: absolute; right: 1.2rem; bottom: 1.1rem; width: 44%; max-width: 210px; }
.gl-map circle { fill: #cfd8d2; transform-box: fill-box; transform-origin: center; transition: fill .4s ease, transform .5s cubic-bezier(.34,1.6,.64,1); }
.gl.in .gl-map circle { fill: var(--sage); }
.gl-map circle.ping { transform: scale(1.5); }
/* checklist */
.gl-list { list-style: none; margin: .9rem 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .55rem 1rem; }
.gl-list li { display: flex; align-items: center; gap: .55rem; font-size: .95rem; color: var(--dark); }
.gl-ck { box-sizing: border-box; width: 24px; height: 24px; flex: none; border-radius: 50%; border: 2px solid #d5dbd7; position: relative; transition: background .3s ease, border-color .3s ease; }
.gl-ck svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; }
.gl-ck path { fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 16; stroke-dashoffset: 16; transition: stroke-dashoffset .35s ease .15s; }
.gl.in .gl-ck { background: var(--sage); border-color: var(--sage); }
.gl.in .gl-ck path { stroke-dashoffset: 0; }
.gl-list li:nth-child(1) .gl-ck, .gl-list li:nth-child(1) .gl-ck path { transition-delay: .25s; }
.gl-list li:nth-child(2) .gl-ck, .gl-list li:nth-child(2) .gl-ck path { transition-delay: .4s; }
.gl-list li:nth-child(3) .gl-ck, .gl-list li:nth-child(3) .gl-ck path { transition-delay: .55s; }
.gl-list li:nth-child(4) .gl-ck, .gl-list li:nth-child(4) .gl-ck path { transition-delay: .7s; }
.gl-list li:nth-child(5) .gl-ck, .gl-list li:nth-child(5) .gl-ck path { transition-delay: .85s; }
.gl-list li:nth-child(6) .gl-ck, .gl-list li:nth-child(6) .gl-ck path { transition-delay: 1s; }
/* big check */
.gl-bigck { width: 44px; height: 44px; border-radius: 50%; background: var(--sage); display: grid; place-items: center; margin-top: .6rem; transform: scale(.6); transition: transform .5s cubic-bezier(.34,1.6,.64,1) .1s; }
.gl-bigck path { fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 20; stroke-dashoffset: 20; transition: stroke-dashoffset .4s ease .3s; }
.gl.in .gl-bigck { transform: none; } .gl.in .gl-bigck path { stroke-dashoffset: 0; }
/* word swap */
.gl-word { display: block; height: 2.6rem; margin-top: .5rem; position: relative; font-family: var(--font-head); font-size: 2rem; font-weight: 700; color: var(--sage-dark); letter-spacing: -.02em; }
.gl-word span { position: absolute; left: 0; top: 0; opacity: 0; transform: translateY(10px); filter: blur(4px); transition: opacity .35s ease, transform .5s cubic-bezier(.22,1.2,.36,1), filter .35s ease; }
.gl-word span.on { opacity: 1; transform: none; filter: none; }
/* price bar */
.gl-bar { position: relative; height: 8px; border-radius: 4px; background: #e2e8e4; margin: 1.2rem 0 .5rem; }
.gl-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 4px; background: var(--sage); transition: width 1.1s cubic-bezier(.22,1,.36,1) .2s; }
.gl.in .gl-bar i { width: 100%; }
.gl-ends { display: flex; justify-content: space-between; font-family: var(--font-head); font-size: .85rem; font-weight: 600; color: var(--sage-dark); }
@media (hover: hover) and (pointer: fine) {
  .gl:hover { translate: 0 -4px; border-color: #b5c9be; }
}
@media (max-width: 700px) {
  .glance { grid-template-columns: repeat(2, 1fr); }
  .gl { grid-column: span 2 !important; grid-row: auto !important; } .gl p { hyphens: auto; }
  .gl-map { position: static; display: block; width: 62%; max-width: 230px; margin: .9rem 0 0 auto; } .gl-list { grid-template-columns: 1fr; }
  .gl-word { font-size: 1.5rem; height: 2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .gl, .gl * { transition: none !important; } .gl { opacity: 1; transform: none; }
}