@property --h3f-tint { syntax: "<color>"; inherits: true; initial-value: #6aa9d8; }
.h3--tabs { --h3f-tint: var(--found); overflow: hidden; isolation: isolate; }
.h3--tabs:has([data-spot-open="understood"]) { --h3f-tint: var(--understood); }
.h3--tabs:has([data-spot-open="chosen"]) { --h3f-tint: var(--chosen); }
.h3f-photo { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.h3f-pic { position: absolute; top: -8%; right: 0; height: 112%; aspect-ratio: var(--ar, 2 / 3); opacity: .46; transition: --h3f-tint .45s ease;
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, .1) 0, rgba(0, 0, 0, .45) 24%, #000 52%), linear-gradient(180deg, #000 70%, transparent 100%);
  mask-composite: intersect;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 calc(100% - 80px), 40px calc(100% - 80px), 40px calc(100% - 160px), 80px calc(100% - 160px), 80px calc(100% - 240px), 40px calc(100% - 240px), 40px calc(100% - 320px), 120px calc(100% - 320px), 120px calc(100% - 400px), 80px calc(100% - 400px), 80px calc(100% - 480px), 40px calc(100% - 480px), 40px calc(100% - 560px), 0 calc(100% - 560px)); }
.h3f-pic::before { content: ""; position: absolute; inset: 0; background: var(--h3f-tint); }
.h3f-pic picture, .h3f-pic img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.h3f-pic img { object-fit: cover; object-position: var(--focus, 50% 30%); filter: grayscale(1) contrast(1.15) brightness(1.05); mix-blend-mode: multiply; }
.h3f-pic::after { content: ""; position: absolute; inset: 0; opacity: .5; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }
@media (prefers-reduced-motion: reduce) { .h3f-pic { transition: none; } }

.h3f-grid { position: relative; z-index: 1; display: grid; gap: var(--g3); grid-template-areas: "copy" "tabs" "act"; }
.h3f-copy { grid-area: copy; } .h3f-tabs { grid-area: tabs; } .h3f-actions { grid-area: act; }
.h3f-copy .h3e-say { max-width: 15ch; }
.h3f-so { display: block; max-width: 30ch; margin-top: var(--g2); font: 700 clamp(1.45rem, 1.05rem + 1.5vw, 2.35rem)/1.25 var(--face); letter-spacing: -0.015em; }
.h3f-tabs .spot--oc { margin-top: 0; }
.h3f-oc.spot--oc { --h3f-panel: 214px; display: grid; grid-template-rows: auto minmax(var(--h3f-panel), auto); }
.h3f-oc .spot-strip { grid-row: 1; grid-column: 1; }
.h3f-oc .spot-panel { grid-row: 2; grid-column: 1; align-self: start; }
.h3f-oc .spot-panel:not([hidden]) { min-height: 204px; padding-block: clamp(16px, 3vw, 24px); }
.h3f-how { margin: var(--g1) 0 0; color: var(--ink); font-size: 1rem; line-height: 1.45; }
.h3f-proof-k { font-weight: 700; color: var(--ink); }
.h3f-actions { width: 100%; max-width: none; margin: 0; align-items: center; gap: 12px 22px; }
.h3f-try { color: var(--ink); font-weight: 700; font-size: .98rem; line-height: 1.3; border-radius: var(--radius); }
.h3f-line { margin: 0; color: var(--ink); font: 850 clamp(1.15rem, 1rem + .7vw, 1.6rem)/1.18 var(--face); letter-spacing: -0.01em; }
.h3f-proof { margin: var(--g1) 0 0; color: var(--ink-soft); font-size: .92rem; line-height: 1.45; }
.h3f-proof strong { color: var(--number-ink); font: 900 1.3em/1 var(--face); }
.h3f-more { margin: var(--g1) 0 0; color: var(--ink-soft); font-size: .88rem; line-height: 1.4; }
.h3f-more a { color: var(--ink); }
@media (max-width: 999px) {
  .h3f-copy .h3e-label { max-width: 200px; }
  .h3f-photo { top: -10px; bottom: auto; height: 340px; }
  .h3f-pic { top: 0; height: 100%; opacity: .4;
    mask-image: linear-gradient(90deg, transparent 0, transparent 14%, rgba(0, 0, 0, .5) 32%, #000 58%), linear-gradient(180deg, #000 40%, transparent 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 48px 100%, 48px calc(100% - 48px), 24px calc(100% - 48px), 24px calc(100% - 96px), 0 calc(100% - 96px)); }
  .h3f-pic img { object-position: 50% 0; }
  .h3f-oc.spot--oc { --h3f-panel: 170px; }
  .h3f-oc .spot-panel:not([hidden]) { min-height: 160px; }
  .h3f-how, .h3f-more { display: none; }
  .h3f-proof { margin-top: 8px; font-size: .86rem; line-height: 1.35; }
  .h3f-actions .btn { width: 100%; }
  .h3f-try { flex: 1 1 100%; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; text-align: center; }
}
@media (min-width: 1000px) {
  .h3--tabs { padding-block: 56px; }
  .h3f-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); grid-template-areas: "copy tabs" "act tabs"; column-gap: 56px; row-gap: var(--g4); align-items: start; }
  .h3f-copy { align-self: end; } .h3f-actions { align-self: start; }
  .h3f-tabs { align-self: end; }
  .h3f-oc.spot--oc .spot-tab--oc { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 6px; padding-inline: 12px; }
  .h3f-copy .h3e-say { max-width: 13ch; }
  .h3f-oc.spot--oc { --h3f-panel: 260px; }
  .h3f-oc .spot-panel:not([hidden]) { min-height: 250px; }
}

.h3f-hat { position: absolute; left: var(--hx); top: var(--hy); --spx: 4; --cell: calc(var(--spx) * 1px); margin: calc(var(--cell) * -10) 0 0 calc(var(--cell) * -18); }
.h3f-hat-win { display: block; overflow: hidden; width: calc(var(--cell) * 36); height: calc(var(--cell) * 14); }
.h3f-hat-strip { display: flex; }
@media (prefers-reduced-motion: no-preference) {
  .h3--tabs.is-hat .h3f-hat-win { animation: h3f-hat-drop 1s steps(20, end) both; }
  .h3--tabs.is-hat .h3f-hat-strip { animation: h3f-hat-frames 1s steps(20, end) both; }
  .h3--tabs.is-nod .h3f-hat-strip { animation: h3f-hat-nod 300ms steps(5, end) both; }
}
@keyframes h3f-hat-drop { 0% { transform: translateY(calc(var(--cell) * -16)); } 5% { transform: translateY(calc(var(--cell) * -15)); } 10% { transform: translateY(calc(var(--cell) * -13)); } 15% { transform: translateY(calc(var(--cell) * -10)); } 20% { transform: translateY(calc(var(--cell) * -6)); } 25% { transform: translateY(calc(var(--cell) * -2)); } 30%, 35% { transform: translateY(var(--cell)); } 40%, 45% { transform: translateY(calc(var(--cell) * -1)); } 50%, 100% { transform: translateY(0); } }
@keyframes h3f-hat-frames { 0%, 5% { transform: translateX(calc(var(--cell) * -36)); } 10%, 15% { transform: translateX(calc(var(--cell) * -72)); } 20%, 25% { transform: translateX(0); } 30%, 35% { transform: translateX(calc(var(--cell) * -108)); } 40%, 60% { transform: translateX(0); } 65%, 75% { transform: translateX(calc(var(--cell) * -144)); } 80%, 100% { transform: translateX(0); } }
@keyframes h3f-hat-nod { 0% { transform: translateX(0); } 20%, 60% { transform: translateX(calc(var(--cell) * -144)); } 80%, 100% { transform: translateX(0); } }
@media (max-width: 999px) { .h3f-hat { --spx: 2; } }
@media (max-width: 359px) { .h3f-photo { height: 240px; } .h3f-hat { --spx: 1; } }