/* ==========================================================================
   home.css — the home page on the v2 system. Loads after feature-v2.css and
   feature-v3.css. Section devices, in order: hero (v2-hero), logos (v2-logos),
   pillars (tab switcher), ways (old/new), benefits (list + photo), case band,
   outcome rows, testimonial marquee, two-door CTA.
   ========================================================================== */

.v2 .home-hero h1 { max-width: 12ch; }
/* the home hero gets the big blob; feature pages keep the tighter one from feature-v2.css */
/* a touch larger than the subpage leaf, behind the reviews moment; colour, not chrome, fills the right column */
.home-hero .v2-hero .blob { left: 50%; right: -6%; top: -14%; bottom: -8%; }
.home-hero .v2-hero .blob-canvas.is-loaded { opacity: .74; }
@media (max-width: 991px) { .home-hero .v2-hero .blob { left: -10%; right: -10%; top: 40%; bottom: 0; } }

/* ---------- hero moment (the static subpage hero's card stack, on the blob): the base every HeroSub page relies on.
   hero-film.css, loaded after this on the home and solutions pages, overrides the layout for the film heroes. ---------- */
.hero-moment { position: relative; display: flex; justify-content: flex-end; padding: 12px 0; }
.hero-moment .moment { max-width: 440px; gap: 16px; }
.hero-moment .m-card { box-shadow: 0 0 0 1px rgba(15, 13, 25, .06), 0 30px 60px -28px rgba(15, 13, 25, .45); }
.hero-moment .m-sms p { font-size: 17px; }
.hero-moment .m-chip { background: rgba(255, 255, 255, .85); backdrop-filter: blur(6px); }
@media (prefers-reduced-motion: no-preference) {
  .hero-moment .moment > * { opacity: 0; transform: translateY(16px); animation: word .8s var(--ease-out) forwards; }
  .hero-moment .moment > :nth-child(1) { animation-delay: .5s; }
  .hero-moment .moment > :nth-child(2) { animation-delay: .95s; }
  .hero-moment .moment > :nth-child(3) { animation-delay: 1.4s; }
}
.no-motion .hero-moment .moment > * { animation: none; opacity: 1; transform: none; }
@media (max-width: 991px) { .hero-moment { justify-content: center; margin-top: 8px; } }

/* ---------- pillars: the four things Cloutly does ---------- */
.v2 .pillars .head { margin-bottom: 32px; }
.v2 .tabs-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; width: max-content; max-width: 100%; margin: 0 auto 40px; padding: 5px; border-radius: 999px; background: var(--v2-card); box-shadow: inset 0 0 0 1px var(--v2-line); }
.v2 .tab-btn { padding: 10px 18px; border-radius: 999px; font: 500 14.5px/1.3 var(--font-display); color: var(--v2-body); transition: color .2s, background-color .25s var(--ease-out); }
.v2 .tab-btn:hover { color: var(--ink); }
.v2 .tab-btn[aria-selected="true"] { background: var(--ink); color: #fff; }
.v2 .tab-btn:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.v2 .tab-panel[hidden] { display: none; }
.v2 .tab-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.v2 .tab-copy h3 { font: 500 clamp(26px, 3vw, 36px)/1.12 var(--font-serif); letter-spacing: -.015em; text-wrap: balance; }
.v2 .tab-copy > p { margin-top: 14px; max-width: 46ch; font: 400 16.5px/1.6 var(--font-body); color: var(--v2-body); }
.v2 .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.v2 .chips li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; background: var(--ghost); font: 500 13px/1.3 var(--font-display); color: var(--ink); }
.v2 .chips .icon { width: 16px; height: 16px; color: var(--blue); }
.v2 .quote { display: grid; grid-template-columns: 48px 1fr; gap: 14px; margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--v2-line); }
.v2 .quote img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.v2 .quote blockquote p { font: 400 16px/1.55 var(--font-serif); font-style: italic; color: var(--ink); }
.v2 .quote blockquote p strong { font-weight: 600; }
.v2 .quote footer { margin-top: 10px; font: 400 13px/1.4 var(--font-body); color: var(--v2-body); }
.v2 .quote footer b { display: block; font: 600 13.5px/1.4 var(--font-display); color: var(--ink); }
.v2 .tab-media .video-trigger { position: relative; display: block; width: 100%; aspect-ratio: 5 / 4; border-radius: 20px; background-size: cover; background-position: center; box-shadow: 0 0 0 1px var(--v2-line), var(--v2-shadow); overflow: hidden; }
.v2 .tab-media .video-trigger .play { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--ink); box-shadow: 0 18px 40px -16px rgba(15, 13, 25, .5); transform: translate(-50%, -50%); transition: transform .3s var(--ease-out); }
.v2 .tab-media .video-trigger .play .icon { width: 20px; height: 20px; margin-left: 3px; }
.v2 .tab-media .video-trigger:hover .play { transform: translate(-50%, -50%) scale(1.06); }
.v2 .tab-caption { margin-top: 14px; font: 400 14.5px/1.5 var(--font-body); color: var(--v2-body); }
.v2 .tab-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.v2 .tab-actions .btn { padding: 12px 20px; font-size: 15px; }
.v2 .tab-actions .btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px rgba(15, 13, 25, .18); }
.v2 .tab-actions .btn--ghost:hover { background: var(--ghost); }
.v2 .btn--mobile { display: none; }

/* ---------- benefits: list + photo ---------- */
.v2 .benefits-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: stretch; }
.v2 .benefit { display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: start; margin-top: 24px; }
.v2 .benefit:first-child { margin-top: 0; }
.v2 .benefit .icon { width: 44px; height: 44px; padding: 11px; border-radius: 12px; background: var(--ghost); color: var(--blue); }
.v2 .benefit h4 { font: 600 17px/1.35 var(--font-display); color: var(--ink); }
.v2 .benefit p { margin-top: 4px; font: 400 15px/1.55 var(--font-body); color: var(--v2-body); }
.v2 .benefits-list .btn { margin-top: 30px; }
.v2 .benefits-photo { display: flex; }
.v2 .benefits-photo img { width: 100%; height: 100%; min-height: 560px; aspect-ratio: auto; object-fit: cover; object-position: 50% 30%; border-radius: 24px; box-shadow: var(--v2-shadow); }

/* ---------- case band: the colour moment ---------- */
.v2 .case-band { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border-radius: 24px; background: linear-gradient(160deg, #c9184a, #e0244f); color: #fff; overflow: hidden; isolation: isolate; }
.v2 .case-band::after { content: ""; position: absolute; inset: 0; z-index: -1; background: url("../images/nnnoise-2.svg") 50% / 300px; opacity: .35; mix-blend-mode: soft-light; }
.v2 .case-media { position: relative; display: block; min-height: 380px; background: url("../images/Bishops-Cuts--Color-Hero.jpg") center / cover; }
.v2 .case-media .play { position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--ink); transform: translate(-50%, -50%); box-shadow: 0 18px 40px -16px rgba(15, 13, 25, .6); transition: transform .3s var(--ease-out); }
.v2 .case-media .play .icon { width: 22px; height: 22px; margin-left: 3px; }
.v2 .case-media:hover .play { transform: translate(-50%, -50%) scale(1.06); }
.v2 .case-body { display: flex; flex-direction: column; padding: clamp(32px, 4vw, 56px); }
.v2 .case-body .eyebrow { font: 600 13px/1.4 var(--font-display); color: rgba(255, 255, 255, .92); }
.v2 .case-body h3 { margin-top: 18px; font: 500 clamp(24px, 2.6vw, 32px)/1.25 var(--font-serif); letter-spacing: -.01em; text-wrap: balance; }
.v2 .case-body h3 strong { font-weight: 500; font-style: italic; }
.v2 .case-who { margin-top: 18px; font: 600 13.5px/1.4 var(--font-display); }
.v2 .case-who span { display: block; font: 400 13px/1.4 var(--font-body); color: rgba(255, 255, 255, .92); }
.v2 .case-stat { margin-top: auto; padding-top: 28px; font: 500 clamp(48px, 5vw, 64px)/1 var(--font-serif); letter-spacing: -.02em; }
.v2 .case-stat small { font-size: .5em; margin-left: 2px; }
.v2 .case-stat-label { margin-top: 6px; font: 500 15px/1.4 var(--font-display); }

/* ---------- outcome rows ---------- */
.v2 .outcome-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; padding: clamp(36px, 4vw, 56px) 0; }
.v2 .outcome-row + .outcome-row { border-top: 1px solid var(--v2-line); }
.v2 .outcome-row:nth-child(even) .outcome-copy { order: 2; }
.v2 .outcome-copy h3 { font: 500 clamp(26px, 3vw, 36px)/1.12 var(--font-serif); letter-spacing: -.015em; text-wrap: balance; }
.v2 .outcome-copy > p { margin-top: 14px; max-width: 48ch; font: 400 16.5px/1.6 var(--font-body); color: var(--v2-body); }
.v2 .outcome-copy ul { margin-top: 20px; display: grid; gap: 12px; }
.v2 .outcome-copy li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; font: 400 15.5px/1.55 var(--font-body); color: var(--v2-body); }
.v2 .outcome-copy li .icon { width: 20px; height: 20px; margin-top: 2px; color: var(--blue); }
.v2 .outcome-copy li strong { color: var(--ink); font-weight: 600; }
.v2 .outcome-img { width: 100%; border-radius: 20px; box-shadow: 0 0 0 1px var(--v2-line), var(--v2-shadow); }

/* ---------- CTA ---------- */
.v2 .home-cta .head { margin-bottom: 32px; }

/* ---------- breakpoints ---------- */
@media (max-width: 991px) {
  .v2 .tab-grid, .v2 .benefits-grid, .v2 .outcome-row, .v2 .case-band { grid-template-columns: 1fr; }
  .v2 .outcome-row:nth-child(even) .outcome-copy { order: 0; }
  .v2 .benefits-photo { order: -1; }
  .v2 .benefits-photo img { min-height: 0; aspect-ratio: 16 / 11; }
  .v2 .case-media { min-height: 260px; }
}
@media (max-width: 767px) {
  .v2 .tabs-nav { width: 100%; border-radius: 20px; }
  .v2 .tab-btn { flex: 1 1 45%; text-align: center; }
  .v2 .tab-actions { display: none; }
  .v2 .btn--mobile { display: inline-flex; margin-top: 24px; }
}

/* ---------- neutralise the legacy homepage rules in styles.css that share class names ---------- */
.v2 .tabs { display: block; margin: 0; }
.v2 .tab-panel { max-width: none; margin: 0; padding: 0; border-radius: 0; background: none; }
.v2 .tab-grid { width: 100%; margin: 0; }
.v2 .tab-copy h3 { margin: 0; color: var(--ink); }
.v2 .tab-copy > p { margin-bottom: 0; color: var(--v2-body); }
.v2 .chips { display: flex; margin-bottom: 0; }
.v2 .chips li { justify-content: flex-start; }
.v2 .quote { padding-bottom: 0; }
.v2 .quote img { clip-path: none; flex: none; }
.v2 .quote blockquote { margin: 0; }
.v2 .quote footer b { text-transform: none; letter-spacing: 0; }
.v2 .tab-media { display: block; background: none; border-radius: 0; }
.v2 .video-trigger { margin: 0; background-size: cover; }
.v2 .play::before, .v2 .play::after { content: none; }
.v2 .play { width: 64px; aspect-ratio: auto; }
.v2 .tab-caption { margin: 14px 0 0; text-align: left; }
.v2 .tab-actions { justify-content: flex-start; margin: 16px 0 0; }
.v2 .tab-actions .btn { max-width: none; }
.v2 .benefits-list { max-width: none; display: block; margin: 0; }
.v2 .benefit { align-items: start; }
.v2 .benefit h4 { font: 600 17px/1.35 var(--font-display); }
.v2 .benefits-photo { margin: 0; justify-self: stretch; }
.v2 .case-media { grid-row: auto; border-radius: 0; align-self: stretch; }
.v2 .case-media .play { width: 72px; }
.v2 .case-body { margin: 0; }
.v2 .case-body .eyebrow { margin: 0; }
.v2 .case-who, .v2 .case-stat, .v2 .case-stat-label { color: #fff; margin-bottom: 0; }
.v2 .case-stat { display: block; }
.v2 .outcomes { padding: 0; text-align: left; }
.v2 .outcome-img { max-width: 100%; margin: 0; }

@media (max-width: 991px) {
  .v2 .tab-copy, .v2 .tab-copy > p, .v2 .quote { text-align: left; }
  .v2 .chips { justify-content: flex-start; }
  .v2 .quote { grid-template-columns: 48px 1fr; }
}

/* ---------- closing: three reasons beside the photo, then the doors ---------- */
.v2 .closing-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.v2 .closing-points { display: grid; gap: 18px; margin-top: 28px; }
.v2 .closing-points li { display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start; font: 400 15.5px/1.55 var(--font-body); color: var(--v2-body); }
.v2 .closing-points li b { color: var(--ink); font-weight: 600; }
.v2 .closing-points .icon { width: 40px; height: 40px; padding: 10px; border-radius: 12px; background: var(--ghost); color: var(--blue); }
.v2 .closing-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 30%; border-radius: 24px; box-shadow: var(--v2-shadow); }
.v2 .closing-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 20px; margin-top: 32px; }
.v2 .closing-cta .btn { padding: 14px 24px; font-size: 16px; }
.v2 .closing-fine { font: 400 13.5px/1.5 var(--font-body); color: var(--v2-body); }
.v2 .closing-fine b { color: var(--ink); font-weight: 600; }
.v2 .closing-alt { margin-top: 18px; font: 400 15px/1.55 var(--font-body); color: var(--v2-body); }
.v2 .closing-alt a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(15, 13, 25, .3); }
.v2 .closing-alt a:hover { color: var(--blue); text-decoration-color: currentColor; }
/* the switching argument sits on its own light band, so the proof above it has air */
.v2 .switch-section { background: #f6f7fb; }
.v2 .switch-section .ways { border-top: 0; border-bottom: 0; border-radius: 20px; overflow: hidden; box-shadow: 0 0 0 1px var(--v2-line); }
.v2 .switch-section .way { background: #fff; }
@media (max-width: 991px) { .v2 .closing-grid { grid-template-columns: 1fr; } .v2 .closing-photo { order: -1; } }

/* ---------- closing panel: copy left, the one photo right, one CTA ---------- */
.v2 .close-panel { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); border-radius: 28px; background: #f6f7fb; box-shadow: inset 0 0 0 1px var(--v2-line); overflow: hidden; }
.v2 .close-copy { padding: clamp(40px, 5vw, 72px) clamp(28px, 4vw, 64px) clamp(40px, 5vw, 64px) clamp(32px, 5vw, 72px); }
.v2 .close-copy .h { max-width: 12ch; }
.v2 .close-lead { margin-top: 18px; max-width: 42ch; font: 400 17px/1.55 var(--font-body); color: var(--v2-body); }
.v2 .close-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin-top: 28px; }
.v2 .close-cta .btn { padding: 14px 24px; font-size: 16px; }
.v2 .close-fine { font: 400 13.5px/1.5 var(--font-body); color: var(--v2-body); }
.v2 .close-fine b { color: var(--ink); font-weight: 600; }
.v2 .close-facts { display: grid; gap: 10px; margin: 32px 0 0; padding: 22px 0 0; list-style: none; border-top: 1px solid var(--v2-line); font: 400 14.5px/1.5 var(--font-body); color: var(--v2-body); }
.v2 .close-facts b { color: var(--ink); font-weight: 600; }
.v2 .close-alt { margin-top: 22px; font: 400 14px/1.55 var(--font-body); color: var(--v2-body); }
.v2 .close-alt a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(15, 13, 25, .3); }
.v2 .close-alt a:hover { color: var(--blue); text-decoration-color: currentColor; }
.v2 .close-photo { position: relative; min-height: 420px; }
.v2 .close-photo img, .v2 .close-photo video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; }
@media (max-width: 991px) {
  .v2 .close-panel { grid-template-columns: 1fr; }
  .v2 .close-photo { order: -1; min-height: 0; aspect-ratio: 4 / 3; }
  .v2 .close-photo img, .v2 .close-photo video { position: static; aspect-ratio: 4 / 3; }
}

/* ---------- journey nodes: one clean ink line, five numeral nodes with a line beneath each, a highlight gliding along the line ---------- */
.v2 .loop-section { padding-bottom: clamp(48px, 6vw, 88px); overflow-x: clip; }
.v2 .loop-band { --bw: clamp(150px, 15vw, 210px); position: relative; width: 100vw; margin-left: calc(50% - 50vw); height: clamp(470px, 33vw, 560px); overflow: hidden; }
/* the curve is drawn in a 1440 x 400 box; it may grow to 500 tall (1800 wide) on big displays, the tails cover the rest */
.v2 .loop-svg { position: absolute; left: 0; top: 56px; width: 100%; height: clamp(400px, 27.8vw, 500px); overflow: visible; }
/* the line: one clean ink stroke, placed on purpose, the same pen as the rings; a faint wider pass underneath gives it weight */
.v2 .loop-track { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; opacity: .7; }
.v2 .loop-track--tail { stroke-linecap: butt; }
.v2 .loop-track--under { stroke-width: 4; opacity: .05; }
/* the pulse: the ink line itself turns blue along a short stretch that travels the path. The stretch is the same width as the line
   and its ends are blurred, so the colour rises and falls inside the stroke rather than sitting on top of it. One heartbeat per lap
   with four surges, easing in and out, so it gathers, rushes and settles. */
.v2 .lp { fill: none; stroke: var(--blue); stroke-width: 1.7; stroke-linecap: round; opacity: 0; transition: opacity .8s; }
.v2 .loop-band.is-drawn .lp-head { opacity: .9; }
.v2 .lw { fill: none; stroke: #fff; stroke-linecap: round; stroke-width: 14; }
.v2 .lw-head { stroke-dasharray: 64 936; stroke-dashoffset: 1000; }
@media (prefers-reduced-motion: no-preference) { .v2 .loop-band.is-drawn:not(.is-still) .lw-head { animation: beat-head 14s infinite; } }
@keyframes beat-head { 0% { stroke-dashoffset: 1000; animation-timing-function: cubic-bezier(.55, 0, .25, 1); } 25% { stroke-dashoffset: 750; animation-timing-function: cubic-bezier(.55, 0, .25, 1); } 50% { stroke-dashoffset: 500; animation-timing-function: cubic-bezier(.55, 0, .25, 1); } 75% { stroke-dashoffset: 250; animation-timing-function: cubic-bezier(.55, 0, .25, 1); } 100% { stroke-dashoffset: 0; } }
.v2 .loop-band.is-still .loop-pulse { display: none; }
/* the words ride the outside of the loop */
.v2 .loop-text { font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: 15.5px; fill: var(--ink); opacity: .72; letter-spacing: .01em; }
/* nodes */
.v2 .loop-nodes { position: absolute; inset: 0; }
/* nodes are placed by beads.js; until then (and without JavaScript) they stay hidden rather than piling up at the origin */
.v2 .bead { position: absolute; left: 0; top: 0; width: var(--bw); margin-left: calc(var(--bw) / -2); margin-top: -28px; display: flex; flex-direction: column; align-items: center; text-align: center; visibility: hidden; transition: opacity .6s var(--ease-out), transform .7s var(--ease-out); transition-delay: calc(.5s + var(--i, 0) * .22s); z-index: 1; }
.v2 .loop-band.is-placed .bead { visibility: visible; }
.v2 .loop-band.is-pending:not(.is-in) .bead { opacity: 0; transform: translateY(10px); }
.v2 .bead-dot { position: relative; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: #fff; color: var(--ink); box-shadow: 0 0 0 1.5px rgba(15, 13, 25, .7), 0 0 0 7px #fff, 0 0 0 7px rgba(0, 61, 255, 0), 0 0 0 rgba(0, 61, 255, 0); }
.v2 .bead-dot b { font: 500 24px/1 var(--font-serif); font-variant-numeric: lining-nums; }
.v2 .bead-text { display: block; margin-top: 14px; }
.v2 .bead-text strong { display: block; font: 500 21px/1.2 var(--font-serif); letter-spacing: -.01em; color: var(--ink); }
.v2 .bead-text > span { display: block; margin-top: 5px; max-width: 22ch; margin-inline: auto; font: 400 clamp(12.5px, .95vw, 13.5px)/1.5 var(--font-body); color: var(--v2-body); }
/* the vessel reacts: while the pulse is inside a ring, a faint blue shadow gathers behind it and the ring gives, very slightly, like
   a membrane something has passed through; then it settles. Nothing inside the chip changes. */
.v2 .bead-dot { transition: box-shadow .6s var(--ease-out); }
.v2 .bead.is-lit .bead-dot { box-shadow: 0 0 0 1.5px rgba(15, 13, 25, .7), 0 0 0 7px #fff, 0 8px 26px -8px rgba(0, 61, 255, .32), 0 0 24px -4px rgba(0, 61, 255, .12); }
@media (prefers-reduced-motion: no-preference) { .v2 .bead.is-lit .bead-dot { animation: membrane 1.1s cubic-bezier(.2, .8, .2, 1) 1; } }
@keyframes membrane { 0% { transform: scale(1, 1); } 30% { transform: scale(1.025, .975); } 60% { transform: scale(.985, 1.015); } 100% { transform: scale(1, 1); } }
/* phones: the list */
.v2 .loop-list { display: none; }
@media (max-width: 991px) {
  .v2 .loop-band { display: none; }
  .v2 .loop-list { position: relative; display: grid; gap: 22px; margin: 0; padding: 0; list-style: none; }
  .v2 .loop-list::before { content: ""; position: absolute; left: 27px; top: 30px; bottom: 30px; width: 1.5px; background: rgba(15, 13, 25, .18); }
  .v2 .loop-list li { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 16px; align-items: start; }
  .v2 .loop-list .bead-dot { box-shadow: 0 0 0 1.5px var(--ink), 0 0 0 5px #fff; }
  .v2 .loop-list .bead-text { margin-top: 12px; text-align: left; }
  .v2 .loop-list .bead-text > span { display: block; margin-top: 4px; max-width: none; margin-inline: 0; font: 400 14px/1.5 var(--font-body); color: var(--v2-body); }
  .v2 .loop-list li.loop-list-next { grid-template-columns: 1fr; padding-left: 72px; }
  .v2 .loop-list-next .bead-text strong { font: 500 19px/1.3 var(--font-serif); font-style: italic; }
}