/* Gender reveal sample — split pink/blue, rounded Fredoka type, playful but clean */
.t-reveal { --pink: #F6C4CD; --pink-deep: #E58A9C; --blue: #BAD5EC; --blue-deep: #6F9FCB; --bg: #FFFBF8; --surface: #FFFFFF; --surface-2: #FDF3F1; --ink: #2B2F45; --ink-2: #5B6075; --accent: #2B2F45; --accent-hover: #3B4160; --accent-ink: #FFFFFF; --accent-text: #2B2F45; --tint: #F4EEF2; --line: #EADFE3; --line-strong: #D8CBD2; --display: "Fredoka", "Figtree", sans-serif; --body: "Figtree", system-ui, sans-serif; --radius: 24px; }
.t-reveal h1, .t-reveal h2, .t-reveal h3 { font-family: var(--display); font-weight: 600; letter-spacing: -.01em; }

/* hero: two halves, one question */
.rv-hero { position: relative; min-height: min(92svh, 860px); display: grid; place-items: center; overflow: hidden; isolation: isolate; }
.rv-half { position: absolute; top: 0; bottom: 0; width: 50%; display: grid; place-items: center; z-index: -1; }
.rv-girl { left: 0; background: var(--pink); }
.rv-boy { right: 0; background: var(--blue); }
.rv-half span { font: 700 clamp(90px, 19vw, 260px)/1 var(--display); color: rgba(255, 255, 255, .55); letter-spacing: -.03em; transform: rotate(-6deg); user-select: none; }
.rv-boy span { transform: rotate(6deg); }
.rv-center { position: relative; width: min(520px, calc(100% - 40px)); padding: 34px 28px 30px; text-align: center; background: var(--surface); border-radius: 32px; box-shadow: 0 30px 70px -30px rgba(43, 47, 69, .45); }
.rv-kicker { font-weight: 600; color: var(--ink-2); font-size: 15.5px; }
.rv-q { width: 108px; height: 108px; margin: 18px auto 10px; border-radius: 50%; display: grid; place-items: center; font: 700 72px/1 var(--display); color: var(--ink); background: conic-gradient(var(--pink) 0 50%, var(--blue) 50% 100%); box-shadow: inset 0 0 0 8px #fff, 0 0 0 1px var(--line); }
.rv-center h1 { font-size: clamp(44px, 7vw, 66px); line-height: 1.02; color: var(--ink); }
.rv-when { margin-top: 12px; font-weight: 700; font-size: 17px; }
.rv-where { color: var(--ink-2); }
.rv-cta { margin-top: 20px; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.js .rv-q.enter { animation-name: qPop; }
@keyframes qPop { from { opacity: 0; transform: scale(.6) rotate(-20deg); } to { opacity: 1; transform: none; } }

/* guess poll */
.rv-vote { padding-block: clamp(56px, 8vw, 90px); text-align: center; }
.rv-vote h2, .rv-rsvp h2 { font-size: clamp(34px, 5vw, 48px); color: var(--ink); }
.rv-sub { margin-top: 8px; color: var(--ink-2); }
.rv-pick { margin-top: 26px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pick { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 84px; border-radius: 22px; border: 2px solid transparent; font: 600 24px/1 var(--display); color: var(--ink); cursor: pointer; transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .2s; }
.pick-girl { background: var(--pink); } .pick-boy { background: var(--blue); }
.pick:hover { transform: translateY(-3px); }
.pick[aria-pressed="true"] { border-color: var(--ink); box-shadow: 0 14px 30px -16px rgba(43, 47, 69, .6); }
.pick-dot { width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px var(--ink); }
.pick[aria-pressed="true"] .pick-dot { background: var(--ink); box-shadow: inset 0 0 0 5px #fff, 0 0 0 2px var(--ink); }
.rv-bar { margin-top: 22px; }
.rv-track { display: flex; height: 16px; border-radius: 99px; overflow: hidden; background: var(--line); }
.rv-track i { display: block; height: 100%; transition: width .8s var(--ease); }
.rv-track .g { background: var(--pink-deep); width: 55%; } .rv-track .b { background: var(--blue-deep); width: 45%; }
.rv-bar p { margin-top: 10px; font-weight: 700; display: flex; gap: 10px; justify-content: center; align-items: center; flex-wrap: wrap; }
.rv-bar .sep { width: 5px; height: 5px; border-radius: 50%; background: var(--ink-2); }
.rv-note { margin-top: 10px; font-size: 13.5px; color: var(--ink-2); }

/* one big number */
.rv-days { padding-block: 10px 70px; text-align: center; }
.rv-count { display: flex; justify-content: center; }
.rv-count div { background: none; border: 0; padding: 0; min-width: 0; }
.rv-count b { font: 700 clamp(110px, 20vw, 200px)/.9 var(--display) !important; color: var(--ink); letter-spacing: -.04em; background: linear-gradient(90deg, var(--pink-deep) 0 50%, var(--blue-deep) 50% 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.rv-count span { display: none; }
.rv-days-t { font: 600 clamp(22px, 3.4vw, 30px)/1.2 var(--display); color: var(--ink); margin-top: 4px; }

/* details as soft tiles */
.rv-info { padding-bottom: clamp(60px, 9vw, 100px); }
.rv-info .wrap { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.rv-tile { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; padding: 22px 20px; }
.rv-tile:nth-child(odd) { background: #FFF5F6; } .rv-tile:nth-child(even) { background: #F2F7FC; }
.rv-tile h3 { font-size: 22px; color: var(--ink); margin-bottom: 6px; }
.rv-tile p { color: var(--ink); font-weight: 500; }
.rv-tile .small { margin-top: 8px; font-size: 14px; color: var(--ink-2); }
.rv-link { display: inline-block; margin-top: 10px; font-weight: 700; color: var(--ink); }
.rv-chips { display: flex; gap: 6px; margin-top: 12px; }
.rv-chips i { width: 28px; height: 28px; border-radius: 50%; background: var(--pink-deep); }
.rv-chips i + i { background: var(--blue-deep); }

.rv-rsvp { padding-block: clamp(60px, 9vw, 100px); background: linear-gradient(90deg, #FFF0F2 0 50%, #EEF5FC 50% 100%); text-align: center; }
.rv-rsvp .rsvp { margin-top: 26px; text-align: left; }
.rv-foot { padding: 50px 20px 40px; text-align: center; background: var(--ink); color: #fff; }
.rv-foot .big { font: 600 clamp(24px, 4vw, 34px)/1.2 var(--display); }
.rv-foot .made { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; color: #fff; opacity: .85; text-decoration: none; font-size: 14px; }

@media (max-width: 760px) {
  .rv-info .wrap { grid-template-columns: 1fr 1fr; }
  .rv-pick { grid-template-columns: 1fr; }
  .rv-half span { font-size: 26vw; }
  .rv-girl span { transform: translateY(-34vh) rotate(-6deg); } .rv-boy span { transform: translateY(34vh) rotate(6deg); }
}
@media (max-width: 460px) { .rv-info .wrap { grid-template-columns: 1fr; } .rv-center { padding: 28px 20px 24px; } }