/* Better You — the camera flow. Follows design/mockups/better-you.html (screens 2 and 3), in the
   site's own colours and type. Loaded only on /better-you/. */
#by { min-height: calc(100svh - 66px); background: #FAF6F0; }
.by-pad { max-width: 560px; margin: 0 auto; padding: 28px 22px 48px; }
.by-h { font: 400 clamp(1.8rem, 5vw, 2.3rem)/1.1 var(--niira-display); letter-spacing: -.015em; margin: 0 0 16px; color: #16302C; }
.by-list { padding-left: 18px; margin: 0 0 4px; } .by-list li { margin: 0 0 12px; }
.by-check { display: flex; gap: 12px; align-items: center; background: #F0E4D6; border-radius: 12px; padding: 14px 16px; margin: 18px 0; cursor: pointer; font-weight: 500; }
.by-check input { width: 20px; height: 20px; accent-color: #1E6A60; margin: 0; }
.by-btn { display: flex; align-items: center; justify-content: center; width: 100%; height: 52px; border-radius: 999px; font: 600 16px var(--niira-text); border: 0; cursor: pointer; }
.by-btn:disabled { background: #D8D2C7; color: #4A5C57; cursor: not-allowed; }
.by-primary { background: #12332F; color: #FAF6F0; }
.by-ghost { background: none; border: 1px solid #1E6A60; color: #1E6A60; }
.by-small { font-size: .85rem; color: #4A5C57; margin: 14px 0 0; }
.by-strong { font-weight: 600; color: #16302C; margin-top: 26px; }
.by-row { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0 0; }
.by-row span { font-size: .8rem; font-weight: 600; color: #1E6A60; background: #DFEBE5; border-radius: 999px; padding: 5px 11px; }
.by-actions { display: flex; gap: 10px; margin-top: 18px; } .by-actions .by-primary { flex: 2; } .by-actions .by-ghost { flex: 1; }
.by-photo { display: block; width: 100%; height: auto; border-radius: 14px; background: #12332F; }

/* camera */
.by-cam { position: relative; max-width: 560px; margin: 0 auto; height: calc(100svh - 66px); min-height: 520px; max-height: 860px; background: #0B1715; overflow: hidden; }
.by-cam video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.by-oval { position: absolute; left: 50%; top: 44%; width: min(62vw, 300px); aspect-ratio: 3 / 4; transform: translate(-50%, -50%); border: 3px solid #6FC4B4; border-radius: 50%; box-shadow: 0 0 0 999px rgba(11,23,21,.45); pointer-events: none; }
.by-hint { position: absolute; left: 50%; top: 18px; transform: translateX(-50%); margin: 0; background: #FAF6F0; color: #16302C; font-weight: 600; font-size: .95rem; padding: 8px 16px; border-radius: 999px; white-space: nowrap; max-width: calc(100% - 32px); overflow: hidden; text-overflow: ellipsis; }
.by-gates { position: absolute; left: 50%; bottom: 132px; transform: translateX(-50%); display: grid; grid-template-columns: repeat(3, 104px); gap: 6px; justify-content: center; }
.by-gates span { text-align: center; white-space: nowrap; font-size: .75rem; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: rgba(250,246,240,.16); color: #FAF6F0; }
.by-gates span.ok { background: rgba(111,196,180,.35); } .by-gates span.ok::before { content: '✓ '; }
.by-gates span.pend { background: #F2C14E; color: #16302C; } .by-gates span.pend::before { content: '● '; color: #8F4A28; }
.by-shutter { position: absolute; left: 50%; bottom: 38px; transform: translateX(-50%); width: 76px; height: 76px; border-radius: 50%; border: 4px solid #FAF6F0; background: none; padding: 0; cursor: pointer; }
.by-shutter:disabled { opacity: .45; cursor: not-allowed; }
.by-ring { position: absolute; inset: 5px; border-radius: 50%; background: conic-gradient(#6FC4B4 calc(var(--p, 0) * 360deg), #FAF6F0 0); }
.by-shutter-cap { position: absolute; left: 0; right: 0; bottom: 10px; text-align: center; margin: 0; color: #FAF6F0; font-size: .8rem; font-weight: 600; text-shadow: 0 1px 3px rgba(0,0,0,.8); }
.by-debug { position: absolute; left: 8px; top: 64px; margin: 0; max-width: calc(100% - 16px); white-space: pre-wrap; font-size: 10px; color: #FAF6F0; background: rgba(0,0,0,.55); padding: 4px 6px; border-radius: 4px; }

.by-see { margin: 8px 0 0; padding-left: 18px; color: #16302C; } .by-see li { margin: 0 0 4px; }
.by-mirror { transform: scaleX(-1); }

/* making it: a loader, no steps */
.by-loader { position: relative; border-radius: 14px; overflow: hidden; aspect-ratio: 3 / 4; background: #12332F; }
.by-loader img { margin: 0; border-radius: 0; width: 100%; height: 100%; object-fit: cover; }
/* the green wiper (Mayank, 2026-09-25: "the earlier green wiper animation") */
@keyframes by-scan { 0% { top: 6%; } 50% { top: 92%; } 100% { top: 6%; } }
.by-scan { position: absolute; left: 0; right: 0; height: 2px; background: #6FC4B4; box-shadow: 0 0 18px 4px rgba(111,196,180,.7); animation: by-scan 2.4s ease-in-out infinite; }
.by-blur { filter: blur(4px) saturate(.9); transform: scaleX(-1) scale(1.06); }
@keyframes by-sweep { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.by-sweep { position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(223,235,229,.5) 50%, transparent 70%); background-size: 250% 100%; animation: by-sweep 2.2s ease-in-out infinite; }
@keyframes by-spin { to { transform: rotate(360deg); } }
.by-spinner { position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 50%; border: 4px solid rgba(250,246,240,.35); border-top-color: #FAF6F0; animation: by-spin 1.1s linear infinite; }
.by-loadtitle { margin: 18px 0 0; font: 400 1.5rem/1.15 var(--niira-display); }
.by-bar { height: 6px; border-radius: 999px; background: #E2D9CD; overflow: hidden; margin: 14px 0 8px; }
@keyframes by-fill { to { width: 94%; } }
.by-bar i { display: block; height: 100%; width: 0; background: #1E6A60; border-radius: 999px; animation: by-fill 22s cubic-bezier(.2,.8,.3,1) forwards; }
@media (prefers-reduced-motion: reduce) { .by-sweep, .by-spinner, .by-scan { animation: none; } }
.by-err { margin: 16px 0 0; padding: 12px 16px; border-radius: 10px; background: #F6E4E4; color: #8C2F2F; }
/* reveal */
.by-reveal { max-width: 560px; margin: 0 auto; padding: 0 0 36px; }
.by-frame { position: relative; overflow: hidden; touch-action: none; cursor: ew-resize; background: #12332F; line-height: 0; }
.by-frame canvas { width: 100%; height: auto; display: block; }
.by-after { position: absolute; inset: 0; clip-path: inset(0 0 0 50%); }
.by-handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: #FAF6F0; transform: translateX(-1px); }
.by-handle::after { content: '‹ ›'; position: absolute; top: 88%; left: 50%; transform: translate(-50%,-50%); background: #FAF6F0; color: #16302C; font: 700 14px/1 var(--niira-text); width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,.25); }
.by-tag { position: absolute; top: 12px; font: 600 10px/1 var(--niira-text); letter-spacing: .1em; text-transform: uppercase; background: rgba(18,51,47,.65); color: #FAF6F0; padding: 5px 9px; border-radius: 999px; }
.by-tagl { left: 12px; } .by-tagr { right: 12px; }
.by-hintdrag { position: absolute; left: 50%; top: calc(88% - 52px); transform: translateX(-50%); background: rgba(18,51,47,.8); color: #FAF6F0; font: 600 12px/1 var(--niira-text); padding: 6px 11px; border-radius: 999px; white-space: nowrap; pointer-events: none; }
.by-label { position: absolute; right: 10px; bottom: 10px; z-index: 3; background: #12332F; color: #FAF6F0; font: 600 10px/1 var(--niira-text); letter-spacing: .06em; text-transform: uppercase; padding: 5px 9px; border-radius: 999px; }
/* reveal: views, labels, what changed */
.by-seg { display: flex; margin: 12px 16px 0; border: 1px solid #E2D9CD; border-radius: 999px; overflow: hidden; }
.by-seg button { flex: 1; border: 0; background: none; padding: 8px 0; font: 600 .85rem var(--niira-text); color: #4A5C57; cursor: pointer; }
.by-seg button.on { background: #DFEBE5; color: #16302C; }
.by-frame[data-view="changes"] { cursor: default; }
.by-frame[data-view="changes"] .by-after { clip-path: none !important; }
.by-frame[data-view="changes"] .by-handle, .by-frame[data-view="changes"] .by-hintdrag, .by-frame[data-view="changes"] .by-tagl { display: none; }
.by-annot { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.by-annot svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.by-annot line { stroke: #FAF6F0; stroke-width: 1.4; vector-effect: non-scaling-stroke; opacity: .9; }
.by-dot { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #1E6A60; border: 2px solid #FAF6F0; }
.by-callout { position: absolute; max-width: 40%; white-space: nowrap; font: 600 11px/1.2 var(--niira-text); line-height: 1.2; background: rgba(223,235,229,.95); color: #16302C; padding: 4px 7px; border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,.18); }
.by-callout.l { left: 1%; } .by-callout.r { right: 1%; }
.by-h { font: 400 1.35rem var(--niira-display); margin: 18px 0 4px; }
.by-changes { list-style: none; margin: 0 0 10px; padding: 0; }
.by-changes li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid #E2D9CD; }
.by-changes .n { width: 22px; height: 22px; border-radius: 50%; background: #1E6A60; color: #FAF6F0; font: 700 .72rem/1 var(--niira-text); display: flex; align-items: center; justify-content: center; flex: none; }
.by-changes .t { flex: 1; font-size: .92rem; line-height: 1.25; } .by-changes .t small { display: block; color: #5A665F; font-size: .75rem; }
.by-go { flex: none; background: #12332F; color: #FAF6F0; font: 600 .8rem var(--niira-text); padding: 9px 13px; border-radius: 999px; text-decoration: none; white-space: nowrap; }
.by-go:hover { background: #1E6A60; }
.by-center { text-align: center; padding: 0 16px; }
.by-pad2 { padding: 0 16px; }
a.by-btn { text-decoration: none; }
.by-link { background: none; border: 0; color: #1E6A60; text-decoration: underline; font: inherit; cursor: pointer; }
.by-debugbox { margin: 12px 16px 0; font-size: 11px; line-height: 1.4; background: #16302C; color: #DFEBE5; padding: 8px; border-radius: 8px; white-space: pre-wrap; }

/* The Women/Men switch means nothing on this page (and showed 'Women' over a man's result). */
header div[role="group"] { visibility: hidden; }

/* Storage + one picture per device (design better-you-storage-limit v0.5) */
.by-check + .by-check { margin-top: -8px; }
.by-check a { color: #1E6A60; }
.by-actions.by-two .by-ghost { flex: 1; }
.by-made { margin: 0 0 10px; text-align: center; }
.by-pill { display: inline-block; background: #E4EFEC; color: #12332F; border-radius: 999px; padding: 6px 14px; font-size: .875rem; font-weight: 600; }
.by-keep { position: fixed; inset: 0; z-index: 50; background: rgba(18,51,47,.45); display: flex; align-items: flex-end; justify-content: center; }
.by-keepcard { background: #FAF6F0; width: 100%; max-width: 480px; border-radius: 20px 20px 0 0; padding: 22px 18px calc(18px + env(safe-area-inset-bottom)); max-height: 92vh; overflow: auto; box-sizing: border-box; }
@media (min-width: 640px) { .by-keep { align-items: center; } .by-keepcard { border-radius: 20px; } }
.by-keepcard .by-h { margin-top: 0; }
.by-field { display: block; margin: 14px 0 0; font-weight: 500; }
.by-field > span:first-child { display: block; margin-bottom: 6px; font-size: .9375rem; }
.by-field input { width: 100%; box-sizing: border-box; height: 48px; border: 1.5px solid #CFC4B6; border-radius: 12px; padding: 0 14px; font: inherit; font-size: 16px; background: #fff; }
.by-phone { display: flex; align-items: center; gap: 8px; }
.by-phone b { flex: none; height: 48px; display: flex; align-items: center; padding: 0 12px; border-radius: 12px; background: #F0E4D6; }
.by-keepcard .by-primary { width: 100%; margin-top: 14px; }
.by-keepcard .by-link { display: block; margin: 12px auto 0; }