/* The free teaser (try.html): one column, the camera in a glowing egg */
.try { padding: 40px 0 80px; min-height: 70vh; }
.narrow { max-width: 620px; }
.try h1 { font-size: clamp(2.2rem, 7vw, 3.4rem); margin-bottom: 14px; }
.try h2 { font-size: 1.4rem; }
.try section { padding: 0; display: flex; flex-direction: column; gap: 16px; }
.hidden { display: none !important; }
.center { text-align: center; }
.ticks { padding-left: 1.2em; color: var(--soft); display: grid; gap: 6px; }
.check { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.check input { width: 20px; height: 20px; margin-top: 3px; flex-shrink: 0; accent-color: #6d5dfc; }
.btn.big { padding: 16px 30px; font-size: 1.1rem; align-self: flex-start; }
.btn:disabled { opacity: 0.45; cursor: default; filter: none; }
.warn { color: var(--gold); }
label { display: grid; gap: 6px; }
input[type="email"], input:not([type]) { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.06); color: var(--ink); font: inherit; }

/* The egg: their camera, mirrored, with the colour glowing round it */
.egg { --h: 275; position: relative; width: min(78vw, 340px); aspect-ratio: 3 / 4; margin: 10px auto 6px; }
.egg video, .egg img { position: absolute; inset: 7%; width: 86%; height: 86%; object-fit: cover; border-radius: 50% / 46% 46% 54% 54%; background: #000; }
.egg video { transform: scaleX(-1); }
.eggGlow { position: absolute; inset: -6%; border-radius: 50% / 46% 46% 54% 54%; filter: blur(22px);
  background: radial-gradient(ellipse at 50% 45%, hsla(var(--h), 90%, 62%, 0.95) 30%, hsla(calc(var(--h) + 40), 90%, 55%, 0.5) 58%, transparent 74%);
  animation: pulse 1.8s ease-in-out infinite; transition: background 1.2s; }
.egg.searching .eggGlow { animation: drift 6s linear infinite; }
@keyframes pulse { 50% { transform: scale(1.04); opacity: 0.8; } }
@keyframes drift { to { filter: blur(22px) hue-rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .eggGlow { animation: none !important; } }
.progress { height: 6px; border-radius: 99px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.progress div { height: 100%; width: 0; background: var(--grad); transition: width 0.5s; }
.status { text-align: center; font-size: 1.15rem; min-height: 1.6em; }
#hint { text-align: center; min-height: 1.4em; }
#cancel { align-self: center; }

/* The result */
.kicker { text-align: center; color: var(--soft); margin-bottom: -10px; }
.colourName { text-align: center; margin: 0 !important; }
.colourTitle { text-align: center; font-size: 1.4rem; margin-top: -8px; }
#colourLine { text-align: center; }
.card.more, .card.offer { display: grid; gap: 12px; }
.card.more .btn { justify-self: start; }
#sendStatus.ok { color: var(--teal); }
#sendStatus.bad { color: var(--coral); }
/* The result glows in the reading's own colour (--c: r, g, b), not the in-between live hue */
.egg.result .eggGlow { background: radial-gradient(ellipse at 50% 45%, rgba(var(--c), 0.95) 30%, rgba(var(--c), 0.45) 58%, transparent 74%); }
/* On every screenshot: where to try it */
.eggTag { position: absolute; left: 0; right: 0; bottom: -2%; text-align: center; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.85); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9); }
/* Result: keep the colour, the offer and Save within the first screen */
.egg.result { width: min(52vw, 230px); margin-top: 0; }
#result .kicker { margin-top: -4px; }
.resultBtns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.resultBtns .btn { padding: 13px 20px; }
#result .colourName { font-size: clamp(2.4rem, 9vw, 3.2rem); }
#emailForm { scroll-margin-top: 80px; }