/* Clockout social funnel: brand tokens and the established mobile app language. */
:root {
  color-scheme:dark;
  --ink:#fffaf7;
  --muted:#c0afb9;
  --soft:#21131c;
  --line:#3c2b36;
  --canvas:#160e14;
  --plum:#160e14;
  --plum-raised:#21131c;
  --berry:#321522;
  --pink:#ff2d8f;
  --pink-2:#e81476;
  --display:"SF Pro Display","SF Pro Text",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
}
body.social-funnel { background:#0c070b; color:var(--ink); }
.social-funnel .app-shell { width:min(100vw,460px); background:var(--canvas); box-shadow:0 38px 120px rgba(0,0,0,.58); }
.social-funnel .topbar,.social-funnel .app-shell.has-long-paywall .topbar { height:calc(68px + var(--safe-top)); grid-template-columns:60px 1fr 60px; padding-inline:14px; background:var(--canvas); box-shadow:none; }
.social-funnel .brand { color:var(--ink); font-weight:700; font-size:24px; letter-spacing:-.045em; }
.social-funnel .back { color:var(--ink); }
.social-funnel .mode-badge { padding:5px 7px; min-width:0; border:1px solid var(--line); border-radius:14px; background:transparent; font-size:10px; letter-spacing:0; text-transform:none; font-weight:500; color:var(--muted); }
.social-funnel .progress { top:calc(67px + var(--safe-top)); height:2px; left:24px; right:24px; background:var(--line); }
.social-funnel .progress span { background:var(--pink); }
.social-funnel .screen { padding:calc(96px + var(--safe-top)) 24px max(28px,var(--safe-bottom)); background:var(--canvas); color:var(--ink); }
.social-funnel .screen h1,.social-funnel .screen h2 { color:var(--ink); font-family:var(--display); font-size:36px; font-weight:650; line-height:1.04; letter-spacing:-.04em; text-align:left; }
.social-funnel .screen h2:focus { outline:none; }
.social-subtitle,.social-funnel .screen-intro { color:var(--muted); font-size:14px; line-height:1.55; margin:16px 0 22px; text-align:left; }
.social-funnel .primary { color:var(--plum); border:0; background:var(--pink); box-shadow:none; font-weight:700; font-size:16px; min-height:58px; border-radius:14px; padding:15px 18px; }
@media (hover: hover) and (pointer: fine) {.social-funnel .primary:hover{ background:#ff66ad; transform:none; }}
.social-funnel .primary:disabled { opacity:1; background:var(--plum-raised); color:var(--muted); cursor:default; }
.social-funnel button:focus-visible,.social-funnel a:focus-visible,.social-funnel input:focus-visible,.social-funnel select:focus-visible { outline:3px solid #ffc1dc; outline-offset:3px; }
.social-funnel .social-bottom { margin-top:auto; width:100%; flex-shrink:0; }
.social-funnel .social-question h2 { margin:5px 0 0; }
.social-funnel .social-choices { display:flex; flex-direction:column; gap:10px; margin:28px 0 24px; }
.social-funnel .social-choices button { display:flex; align-items:center; gap:14px; text-align:left; padding:17px 16px; min-height:66px; border:1px solid var(--line); background:var(--plum-raised); border-radius:14px; color:var(--ink); font-size:15px; line-height:1.4; cursor:pointer; }
@media (hover: hover) and (pointer: fine) {.social-funnel .social-choices button:hover{ border-color:#7b556a; background:#2b1b25; }}
.social-funnel .social-choices button[aria-pressed=true] { background:var(--berry); border-color:var(--pink); box-shadow:inset 0 0 0 1px var(--pink); }
.social-funnel .social-choices button:disabled { opacity:.5; cursor:default; }
.answer-icon { font-size:22px; width:28px; text-align:center; flex-shrink:0; }
.choice-check { margin-left:auto; opacity:0; color:#ff8fc3; font-weight:700; }
[aria-pressed=true] .choice-check { opacity:1; }
.social-funnel [data-social-question=interests] { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.social-funnel [data-social-question=interests] button { min-height:56px; padding:10px; font-size:13px; gap:7px; }
.social-funnel [data-social-question=interests] .answer-icon { font-size:19px; width:22px; }
.social-funnel [data-social-question=interests] .choice-check { display:none; }
.social-funnel .social-welcome { padding-top:calc(90px + var(--safe-top)); text-align:left; }
.social-funnel .social-welcome h2 { max-width:390px; font-size:42px; line-height:1.01; }
.welcome-description { font-size:14px; line-height:1.55; color:var(--muted); margin:17px 0; max-width:350px; }
.quiz-duration { width:max-content; margin:0 0 21px; background:var(--berry); color:#ffc1dc; border-radius:14px; padding:7px 12px; font-size:12px; font-weight:600; }
.age-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.age-grid button { min-width:0; padding:0; border:1px solid var(--line); border-radius:16px; background:var(--plum-raised); color:var(--ink); cursor:pointer; overflow:hidden; text-align:left; }
@media (hover: hover) and (pointer: fine) {.age-grid button:hover{ border-color:var(--pink); }}
.age-grid img { display:block; aspect-ratio:1.5; width:100%; object-fit:cover; filter:saturate(.85); }
.age-grid span { display:flex; align-items:center; justify-content:space-between; font-size:15px; font-weight:650; padding:13px 12px; }
.age-grid span::after { content:'↗'; color:#ff8fc3; font-size:17px; font-weight:400; }
.welcome-note { font-size:12px; margin:17px 0 0; color:var(--muted); }
.social-funnel .social-story { gap:22px; }
.social-photo { display:block; width:100%; aspect-ratio:1.4; object-fit:cover; border-radius:22px; filter:saturate(.85); }
.story-text { color:var(--muted); font-size:16px; line-height:1.55; margin:0; text-align:left; }
.answer-summary { margin:12px 0; }
.answer-summary p { padding:18px 0; border-bottom:1px solid var(--line); margin:0; font-size:17px; line-height:1.4; }
.social-funnel blockquote { color:var(--ink); font-family:var(--display); font-size:24px; font-weight:500; line-height:1.3; letter-spacing:-.02em; margin:10px 0 25px; padding:0; background:none; text-align:left; }
.social-funnel cite { display:block; margin-top:12px; font:12px/1.4 var(--body); color:var(--muted); letter-spacing:0; }
.social-funnel .single-form { margin-top:26px; }
.social-funnel label,.social-funnel .single-form label { color:var(--ink); font-size:13px; }
.social-funnel input,.social-funnel select { background:#fffaf7; color:#160e14; border:1px solid #fffaf7; font-size:16px; border-radius:14px; }
.social-funnel input::placeholder { color:#786570; opacity:1; }
.social-funnel .city-hint,.social-funnel .form-note,.social-funnel .legal,.social-funnel .support-note,.social-funnel .skip-action,.social-funnel .text-action { color:var(--muted); }
.social-funnel a,.social-funnel .legal a,.social-funnel .support-note a { color:#ff8fc3; }
.social-funnel .city-suggestions { background:#fffaf7; border:1px solid #fffaf7; box-shadow:0 18px 45px rgba(0,0,0,.34); color:#160e14; }
.social-funnel .city-suggestions p,.social-funnel .city-suggestions button { color:#160e14; }
.social-funnel .city-suggestions button { background:#fffaf7; }
.social-funnel .city-suggestions button.is-active{ background:#f8dce8; }
@media (hover: hover) and (pointer: fine) {.social-funnel .city-suggestions button:hover{ background:#f8dce8; }}
.social-funnel .field-error,.social-funnel .checkout-feedback { color:#ffb4c8; }
.social-funnel .step-label { color:#ff8fc3; text-align:left; text-transform:none; letter-spacing:0; font-weight:600; font-size:12px; }
.social-funnel .support-note { background:var(--plum-raised); }
.social-funnel .support-note strong { color:var(--ink); }
.social-funnel .analysis-list { margin:30px 0 0; }
.social-funnel .analysis-list li { opacity:1; color:var(--muted); border-bottom:1px solid var(--line); padding:18px 0; }
.social-funnel .analysis-list li.is-done { color:var(--ink); }
.social-funnel .analysis-list li span { background:var(--plum-raised); color:var(--muted); }
.social-funnel .analysis-list li.is-done span { background:var(--pink); color:var(--plum); }
.social-loader { width:64px; height:64px; border:3px solid var(--line); border-top-color:var(--pink); border-radius:50%; margin:42px auto 0; animation:social-spin 1.1s linear infinite; }
@keyframes social-spin { to { transform:rotate(360deg); } }
.social-funnel .plan-receipt { border-radius:16px; background:var(--plum-raised); border:1px solid var(--line); padding:20px; }
.plan-receipt > span { display:block; font-size:12px; color:var(--muted); margin-bottom:8px; }
.plan-receipt strong { font:600 23px/1.2 var(--display); letter-spacing:-.03em; }
.plan-receipt p { font-size:13px; color:#ff8fc3; line-height:1.5; }
.plan-receipt small { display:block; font-size:12px; line-height:1.5; color:var(--muted); }
.social-funnel .social-teaser { padding-bottom:120px; }
.social-funnel .profile-dock,.social-funnel .checkout-dock { background:var(--canvas); border-top:1px solid var(--line); box-shadow:none; }
.social-funnel .profile-dock .primary { width:100%; }
.social-funnel .status-choice legend { color:var(--muted); }
.social-funnel .status-choice label span { color:var(--ink); background:var(--plum-raised); }
.social-funnel .status-choice input:checked + span { background:var(--berry); color:#ffc1dc; border-color:var(--pink); }
.social-funnel .photo-picker { color:var(--ink)!important; background:var(--plum-raised); }
.social-funnel .photo-preview { color:#ff8fc3; background:var(--berry); }
.social-funnel .photo-picker small { color:var(--muted); }
.social-funnel .result-status,.social-funnel .profile-card,.social-funnel .result-bridge { background:var(--plum-raised); border:0; color:var(--ink); }
.social-funnel .profile-orbit { display:none; }
.social-funnel .profile-card { padding:20px; margin-top:22px; }
.social-funnel #result-tagline,.social-funnel .trait span { color:var(--muted); }
.social-funnel .trait strong { color:var(--ink); }
.social-funnel .result-bridge strong { color:var(--ink); }
.social-funnel .result-bridge small { color:var(--muted); }
.social-funnel .result h2 em { color:#ff8fc3; font-style:normal; }
.social-funnel .social-paywall { padding-bottom:150px; }
.social-funnel .paywall h2 { font-size:42px; }
.social-funnel .social-paywall .plan-label { font-size:13px; text-align:left; color:#ff8fc3; margin:14px 0 0; }
.membership-benefits { margin:20px 0; }
.membership-benefits > div { padding:16px 0; border-bottom:1px solid var(--line); }
.social-funnel .membership-benefits h3 { font:600 17px/1.3 var(--body); margin:0 0 6px; color:var(--ink); }
.social-funnel .membership-benefits p { font-size:14px; line-height:1.5; margin:0; color:var(--muted); }
.social-offer { display:flex; align-items:center; justify-content:space-between; padding:20px; border:1px solid var(--pink); background:var(--berry); border-radius:16px; }
.social-offer > div { display:grid; gap:5px; }
.social-offer > div strong { font-size:18px; }
.social-offer > div span { font-size:13px; color:var(--muted); }
.social-funnel .social-offer .action-price { display:grid; margin:0; text-align:right; color:var(--ink); }
.social-funnel .social-offer .action-price strong { font-size:28px; color:var(--ink); }
.social-funnel .social-offer .action-price span { font-size:12px; color:var(--muted); }
.social-funnel .social-terms { font-size:13px; line-height:1.6; margin:18px 0 12px; color:var(--muted); }
.social-funnel .social-paywall .paywall-note { font-size:12px; line-height:1.5; margin:0 0 20px; color:var(--muted); }
.social-funnel .social-paywall .secure-checkout { color:var(--muted); }
.social-paywall details { border-top:1px solid var(--line); padding:16px 0; font-size:14px; }
.social-paywall details p { line-height:1.5; color:var(--muted); }
.social-paywall summary { cursor:pointer; font-weight:600; }
.social-funnel .social-paywall .preview-notice { font-size:12px; line-height:1.5; color:var(--muted); background:var(--plum-raised); padding:12px; border-radius:14px; }
.social-funnel .complete p,.social-funnel .success-handoff small,.social-funnel .success-help { color:var(--muted); }
.social-funnel .complete .check { background:var(--berry); color:#ff8fc3; box-shadow:none; }
.social-funnel .dock-offer { margin:10px 0 0; text-align:center; font-size:11px; line-height:1.4; color:var(--muted); }
@media(min-width:600px) { .social-funnel .app-shell { border-radius:30px; height:min(900px,calc(var(--app-height) - 36px)); } }
@media(max-height:740px) {
  .social-funnel .social-welcome { padding-top:calc(84px + var(--safe-top)); }
  .social-funnel .social-welcome h2 { font-size:36px; }
  .welcome-description { margin:13px 0; }
  .quiz-duration { margin-bottom:16px; }
  .age-grid { gap:10px; }
  .age-grid img { aspect-ratio:1.8; }
  .age-grid span { padding:10px 12px; }
  .social-funnel .social-story { gap:18px; }
  .social-photo { aspect-ratio:1.65; }
}
@media(max-width:360px) {
  .social-funnel .screen h2 { font-size:32px; }
  .social-funnel .social-welcome h2 { font-size:32px; }
  .social-funnel .screen { padding-inline:20px; }
  .social-funnel .social-welcome { padding-top:calc(80px + var(--safe-top)); }
  .welcome-description { font-size:13px; margin:11px 0; }
  .quiz-duration { margin-bottom:14px; }
  .age-grid span { font-size:14px; padding:9px 10px; }
}
@media(prefers-reduced-motion:reduce) { .social-loader { animation:none; } .social-funnel * { transition:none!important; scroll-behavior:auto!important; } }
/* Source-matched quiz mechanics within the Clockout visual system. */
.stage-title { grid-column:2; grid-row:1; text-align:center; font-size:15px; font-weight:650; }
.stage-title[hidden] { display:none; }
.social-funnel .topbar .mode-badge { grid-column:3; grid-row:1; }
.social-funnel .topbar .back { grid-column:1; grid-row:1; }
.social-funnel .topbar .brand { grid-column:2; grid-row:1; }
.social-funnel .interest-chips { display:flex; flex-direction:row; flex-wrap:wrap; gap:9px; }
.social-funnel .interest-chips button { width:auto; flex:0 1 auto; min-height:44px; border-radius:22px; padding:10px 13px; gap:7px; font-size:13px; }
.social-funnel .interest-chips .answer-icon { width:auto; font-size:17px; }
.review-carousel { position:relative; display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; padding:2px 0; margin:4px 0 0; }
.review-carousel::-webkit-scrollbar { display:none; }
.review-carousel figure { flex:0 0 100%; margin:0; padding:22px; border:1px solid var(--line); border-radius:16px; background:var(--plum-raised); scroll-snap-align:start; }
.social-funnel .review-carousel blockquote { margin:0; font-size:22px; line-height:1.4; }
.review-carousel figcaption { margin-top:17px; font-size:11px; line-height:1.4; color:var(--muted); }
.carousel-dots { display:flex; gap:6px; align-items:center; justify-content:center; margin:0 0 12px; }
.carousel-dots i { width:6px; height:6px; border-radius:50%; background:var(--line); }
.carousel-dots i.active { width:18px; border-radius:6px; background:var(--pink); }
.connection-journey { display:flex; align-items:center; justify-content:space-around; min-height:200px; margin:16px 0; padding:18px; background:var(--plum-raised); border-radius:22px; }
.connection-journey > div { display:grid; justify-items:center; gap:26px; }
.connection-journey > div > span { color:var(--muted); font-size:12px; }
.connection-person { display:grid; place-items:center; width:56px; height:56px; border:1px solid #7b556a; border-radius:50%; color:var(--ink); font-size:13px; }
.connection-arrow { margin-top:38px; color:#ff8fc3; font-size:28px; }
.connection-group { position:relative; width:95px; height:72px; }
.connection-group i { position:absolute; width:38px; height:38px; background:var(--berry); border:1px solid var(--pink); border-radius:50%; }
.connection-group i:nth-child(1) { left:0; top:14px; }
.connection-group i:nth-child(2) { left:29px; top:0; }
.connection-group i:nth-child(3) { left:57px; top:16px; }
.connection-group i:nth-child(4) { left:29px; top:34px; }
.analysis-bars { display:grid; gap:24px; margin:40px 0 32px; }
.analysis-task > div:first-child { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; font-size:13px; line-height:1.4; color:var(--muted); }
.analysis-task strong { font-weight:600; color:var(--ink); }
.analysis-track { height:8px; background:var(--plum-raised); overflow:hidden; border-radius:6px; }
.analysis-track > span { display:block; width:0; height:100%; background:var(--pink); border-radius:6px; transition:width .12s linear; }
.analysis-task.is-done > div:first-child span { color:var(--ink); }
.social-analysis .review-carousel { margin-top:auto; }
.birthday-fields { display:grid; grid-template-columns:1.25fr .85fr 1fr; gap:9px; }
.social-funnel .birthday-fields select { padding-inline:10px; font-size:14px; }
.social-funnel [data-screen=first-name] form,.social-funnel [data-screen=birthday] form { flex:1; display:flex; flex-direction:column; gap:12px; }
.social-funnel [data-screen=first-name] .social-bottom,.social-funnel [data-screen=birthday] .social-bottom { margin-top:auto; }
.social-funnel .reference-paywall { padding-bottom:150px; }
.paywall-cover { display:block; width:calc(100% + 48px); max-width:none; height:140px; margin:-28px -24px 12px; object-fit:cover; opacity:.72; mask-image:linear-gradient(to bottom,black 20%,transparent); }
.social-funnel .reference-paywall #paywall-headline { font-size:36px; text-align:center; }
.social-funnel .reference-paywall > .social-subtitle { text-align:center; margin-top:16px; }
.pricing-preview-label { font-size:11px; line-height:1.4; text-align:center; color:var(--muted); margin:8px 0 16px; }
.membership-plans { display:grid; gap:9px; }
.membership-plan { display:flex; align-items:center; gap:12px; width:100%; min-height:100px; padding:14px 16px; border:1px solid var(--line); border-radius:16px; background:var(--plum-raised); color:var(--ink); font:inherit; cursor:pointer; text-align:left; }
@media (hover: hover) and (pointer: fine) {.membership-plan:hover{ border-color:#7b556a; }}
.membership-plan[aria-checked=true] { border-color:var(--pink); background:var(--berry); box-shadow:inset 0 0 0 1px var(--pink); }
.plan-radio { width:23px; height:23px; border:1px solid #7b556a; border-radius:50%; flex:0 0 auto; }
[aria-checked=true] .plan-radio { border-color:var(--pink); box-shadow:inset 0 0 0 4px var(--berry); background:var(--pink); }
.plan-details { display:grid; gap:5px; }
.plan-details > strong { font-size:15px; font-weight:650; }
.plan-details > small { color:var(--muted); font-size:11px; }
.plan-total { margin-top:3px; color:#ffc1dc; font-size:12px; }
.plan-weekly { margin-left:auto; display:grid; text-align:right; }
.plan-weekly strong { font-size:28px; line-height:1; }
.plan-weekly small { color:var(--muted); font-size:10px; }
.recommended-plan { border-radius:16px; background:var(--pink); overflow:hidden; }
.recommended-plan > p { margin:0; padding:6px 12px; text-align:center; color:var(--plum); font-size:11px; font-weight:750; }
.recommended-plan .membership-plan { border-radius:0 0 16px 16px; }
.plan-rationale { display:flex; gap:12px; margin:18px 3px 12px; font-size:13px; line-height:1.5; color:var(--muted); }
.plan-rationale > span:first-child { font-size:25px; color:#ff8fc3; }
.social-funnel .reference-paywall h3 { color:var(--ink); font:650 25px/1.15 var(--display); letter-spacing:-.03em; margin:0 0 20px; }
.paywall-includes { margin:30px 0 24px; }
.paywall-includes article { display:flex; gap:14px; margin:0 0 24px; }
.paywall-includes article > span { display:grid; place-items:center; flex:0 0 38px; width:38px; height:38px; border-radius:14px; background:var(--berry); color:#ff8fc3; font-size:24px; }
.social-funnel .paywall-includes h4 { color:var(--ink); font:600 16px/1.4 var(--display); margin:0 0 5px; }
.paywall-includes article p { color:var(--muted); font-size:13px; line-height:1.6; margin:0; }
.membership-note { background:var(--plum-raised); border-radius:16px; padding:22px; margin:0 0 30px; }
.social-funnel .membership-note h3 { font-size:22px; margin-bottom:12px; }
.membership-note p { font-size:13px; line-height:1.6; color:var(--muted); margin:0; }
.paywall-member-reviews { margin-bottom:32px; }
.paywall-member-reviews .carousel-dots { margin-top:14px; }
.payment-preview { padding:22px 0; border-top:1px solid var(--line); }
.payment-preview > p,.secure-membership p { color:var(--muted); font-size:12px; line-height:1.6; }
.demo-card-fields { padding:14px; border:1px solid var(--line); border-radius:14px; background:var(--plum-raised); }
.demo-card-fields span { display:block; color:var(--muted); font-size:11px; margin-bottom:9px; }
.demo-card-fields b { display:block; color:var(--muted); font-size:14px; font-weight:400; }
.demo-card-row { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:22px; }
.secure-membership { padding:24px 0; text-align:center; }
.secure-membership > span { display:block; font-size:28px; color:#ff8fc3; margin-bottom:12px; }
.social-funnel .secure-membership h3 { font-size:20px; margin-bottom:12px; }
@media(max-width:360px) { .social-funnel .reference-paywall #paywall-headline { font-size:32px; } .membership-plan { padding:13px 12px; gap:10px; } .paywall-cover { width:calc(100% + 40px); margin-inline:-20px; } }
/* Keep all three plans in the first paywall viewport, like the reference. */
.social-funnel .reference-paywall { padding-top:0; }
.social-funnel .app-shell.has-long-paywall .topbar { height:54px; background:transparent; }
.social-funnel .app-shell.has-long-paywall .brand,.social-funnel .app-shell.has-long-paywall .mode-badge { visibility:hidden; }
.social-funnel .app-shell.has-long-paywall .progress { display:none; }
.social-funnel .app-shell.has-long-paywall .back { background:rgba(22,14,20,.65); }
.reference-paywall .paywall-cover { height:95px; margin-top:0; margin-bottom:0; }
.social-funnel .reference-paywall #paywall-headline { font-size:32px; line-height:1.04; margin:0; }
.social-funnel .reference-paywall > .social-subtitle { margin:10px 0 12px; font-size:13px; line-height:1.5; }
.reference-paywall .pricing-preview-label { font-size:10px; margin:0 0 12px; }
.reference-paywall .membership-plan { min-height:80px; padding-top:11px; padding-bottom:11px; }
.reference-paywall .plan-details { gap:3px; }
.reference-paywall .recommended-plan > p { padding-block:4px; }
.social-funnel .screen { transition:opacity 180ms ease; transform:none; }
.social-funnel .screen.is-active { transform:none; }
.social-funnel [data-screen=first-name] .social-subtitle { margin-bottom:10px; }
.social-funnel [data-screen=first-name] #quiz-first-name-form { margin-top:10px; }

/* Keep full billing totals legible alongside annual trial details on small phones. */
.reference-paywall .plan-details { min-width:0; }
.reference-paywall .plan-weekly { flex-shrink:0; }
@media(max-width:360px) {
  .reference-paywall .plan-weekly strong { font-size:24px; }
  .reference-paywall .plan-details > small, .reference-paywall .plan-total { font-size:10px; }
}

.reference-paywall .plan-weekly .plan-billing { margin-top:7px; font-size:11px; color:var(--muted); }
.reference-paywall .plan-weekly strong { font-size:27px; }
.reference-paywall .plan-details { flex:1; }
@media(max-width:360px) {
  .reference-paywall .plan-weekly strong { font-size:24px; }
  .reference-paywall .plan-weekly .plan-billing { font-size:10px; }
}

/* Reference detail pass: shared geometry, controls, editorial scenes and billing. */
body.social-funnel { background:var(--canvas); padding:0; }
.social-funnel .app-shell { width:min(100vw,450px); height:var(--app-height,100svh); border-radius:0; box-shadow:none; }
.social-funnel .topbar { height:calc(54px + var(--safe-top)); }
.social-funnel .brand { font-size:28px; }
.social-funnel .mode-badge,.social-funnel .progress { display:none; }
.social-funnel .screen { padding-top:calc(74px + var(--safe-top)); padding-bottom:max(32px,var(--safe-bottom)); }
.social-funnel .screen h2 { font-size:26px; line-height:1.2; letter-spacing:-.025em; text-align:center; }
.social-funnel .social-subtitle,.social-funnel .screen-intro { text-align:center; margin:12px 0 8px; }
.social-funnel .primary { min-height:49px; border-radius:999px; padding:14px 20px; justify-content:center; font-weight:500; }
.social-funnel .primary > span[aria-hidden] { display:none; }
.social-funnel .social-choices { margin-top:28px; gap:10px; }
.social-funnel .social-choices button { min-height:70px; border-radius:20px; font-size:16px; font-weight:550; }
.social-funnel .social-choices:not([data-social-question=goal]):not([data-social-question=interests]) .choice-check { display:none; }
[data-social-question=goal] .choice-check { display:grid; place-items:center; opacity:1; width:20px; height:20px; border:1px solid #79616e; border-radius:5px; color:transparent; flex-shrink:0; }
[data-social-question=goal] [aria-pressed=true] .choice-check { background:var(--pink); color:var(--canvas); border-color:var(--pink); }
.social-funnel [data-social-question=interests] { display:flex; flex-flow:row wrap; gap:8px; }
.social-funnel [data-social-question=interests] button { min-height:40px; border-radius:999px; font-size:14px; font-weight:400; padding:8px 12px; }
.social-funnel [data-social-question=interests] .answer-icon { width:auto; font-size:17px; }
.social-funnel .social-welcome { padding-top:calc(74px + var(--safe-top)); text-align:center; }
.social-funnel .social-welcome h2 { font-size:28px; line-height:1.15; margin-inline:auto; }
.welcome-description { margin:14px auto; }
.quiz-duration { margin:0 auto 20px; border-radius:999px; background:linear-gradient(100deg,#40203c,#341923); }
.age-grid { gap:10px; }
.age-grid button { padding:4px 4px 0; }
.age-grid img { border-radius:12px; aspect-ratio:1.5; }
.age-grid span { justify-content:center; padding:11px 4px; font-size:18px; }
.age-grid span::after { display:none; }
.welcome-note { font-size:10px; line-height:1.6; }
.social-funnel input,.social-funnel select,.social-funnel .single-form input,.social-funnel .single-form select { height:54px; border-radius:20px; }
.birthday-fields { grid-template-columns:repeat(3,minmax(0,1fr)); }
.social-funnel .social-story { gap:20px; }
.story-text { text-align:center; font-size:14px; }
.social-funnel .source-intro { padding-top:54px; }
.intro-visual { order:-3; position:relative; height:180px; margin:0 -24px; }
.intro-visual img { width:100%; height:100%; object-fit:cover; mask-image:linear-gradient(#000 35%,transparent); }
.intro-review-badge { position:absolute; bottom:10px; left:0; right:0; display:grid; text-align:center; gap:5px; font-size:11px; }
.intro-review-badge span { color:#f3bb66; letter-spacing:3px; }
.social-globe { order:-2; width:110px; height:110px; margin:12px auto 0; }
.social-funnel .source-intro h2 { font-size:30px; }
.connection-chart { position:relative; width:100%; border-radius:22px; background:var(--plum-raised); overflow:hidden; }
.connection-chart svg { display:block; width:100%; }
.chart-grid { fill:none; stroke:var(--line); stroke-width:1; }
.chart-guide { fill:none; stroke:#86677a; stroke-dasharray:4 5; }
.chart-curve { fill:none; stroke:url(#circle-line); stroke-width:5; stroke-linecap:round; }
.chart-end { fill:#ff8fc3; stroke:var(--plum-raised); stroke-width:5; }
.connection-chart text { fill:var(--muted); font:12px var(--body); }
.chart-start-label,.chart-end-label { position:absolute; font-size:11px; padding:7px 9px; border-radius:7px; background:var(--berry); color:#ffc1dc; }
.chart-start-label { left:8%; bottom:24%; }
.chart-end-label { right:5%; top:14%; }
.is-active .chart-curve { stroke-dasharray:1; animation:draw-connection 1.4s ease both; }
@keyframes draw-connection { from { stroke-dashoffset:1; } to { stroke-dashoffset:0; } }
.social-funnel .source-connection h2 em,.photo-story h2 em { color:#ff9bc8; font-style:normal; }
.social-funnel .photo-story { background:linear-gradient(180deg,rgba(16,9,14,.55),rgba(16,9,14,.86)),url('./assets/stock-dinner.webp') center/cover; }
.social-funnel .has-photo-story .topbar { background:transparent; }
.social-funnel .source-understood h2 { font-size:38px; margin:32px 0 8px; }
.social-funnel .source-understood .story-text { font-size:18px; max-width:340px; margin:0 auto 16px; color:var(--ink); }
.social-funnel .source-proof h2 { font-size:34px; margin:8px 0; }
.review-stack { display:grid; gap:12px; }
.social-funnel .member-review { margin:0; padding:16px; border:1px solid var(--line); border-radius:16px; background:#f9f2f5; color:#291b24; }
.social-funnel .member-review figcaption { display:flex; align-items:center; gap:10px; margin:0 0 10px; color:#291b24; font-size:13px; }
.review-avatar { width:30px; height:30px; display:grid; place-items:center; border-radius:50%; background:#e5d4df; font-size:12px; flex-shrink:0; }
.review-stars { margin-left:auto; color:#b66a08; font-size:12px; white-space:nowrap; }
.social-funnel .member-review blockquote { font:400 14px/1.5 var(--body); letter-spacing:0; color:#291b24; margin:0; }
.review-source { display:block; color:#76646f; font-size:9px; margin-top:9px; }
.photo-story .primary { background:#fffaf7; }
.analysis-bars { margin:28px 0 32px; gap:22px; }
.analysis-task > div:first-child { font-size:14px; }
.analysis-track { height:10px; }
.social-funnel .reference-paywall #paywall-headline { font-size:34px; line-height:1.12; font-weight:450; }
.social-funnel .reference-paywall #paywall-headline strong { font-weight:650; }
.social-funnel .reference-paywall > .social-subtitle { font-size:14px; }
.membership-plans { gap:6px; }
.reference-paywall .membership-plan { min-height:88px; border-radius:20px; padding:12px 14px; }
.recommended-plan { border-radius:20px; }
.reference-paywall .recommended-plan .membership-plan { border-radius:0 0 20px 20px; }
.reference-paywall .recommended-plan > p { padding-block:6px; }
.plan-details > strong { font-weight:500; }
.plan-details > .plan-tag { width:max-content; max-width:100%; background:#3a2935; color:#eadce5; border-radius:5px; font-size:10px; padding:3px 6px; margin-top:3px; }
.plan-details > .trial-tag { background:#563144; color:#ffd1e5; }
.reference-paywall .daily-price { display:flex; align-items:flex-start; justify-content:flex-end; gap:2px; }
.daily-price .price-currency,.daily-price .price-cents { font-size:12px; margin-top:3px; font-weight:500; }
.daily-price .price-whole { font-size:30px; font-weight:700; }
.reference-paywall .plan-weekly { color:var(--muted); }
.reference-paywall [aria-checked=true] .plan-weekly { color:var(--ink); }
.social-funnel .social-terms { text-align:center; font-size:12px; }
.social-funnel .reference-paywall h3 { font-size:22px; }
.benefits-card { border-radius:20px; background:var(--plum-raised); padding:22px 16px; }
.paywall-includes article { gap:12px; margin-bottom:24px; }
.paywall-includes article:last-child { margin-bottom:0; }
.paywall-includes article > span { background:none; font-size:32px; }
.paywall-includes article p { font-size:14px; }
.payment-method { display:flex; align-items:center; gap:10px; padding:14px 0; font-size:14px; }
.payment-brands { margin-left:auto; font-size:9px; color:var(--muted); }
.demo-country { border-top:1px solid var(--line); margin-top:16px; padding-top:14px; font-size:13px; }
.social-funnel .checkout-dock { padding-bottom:max(24px,var(--safe-bottom)); background:linear-gradient(transparent,var(--canvas) 12%); border:0; }
@media(max-width:360px) {
  .social-funnel .screen h2 { font-size:24px; }
  .social-funnel .source-understood h2 { font-size:34px; }
  .social-funnel .source-proof h2 { font-size:30px; }
  .social-funnel .social-welcome h2 { font-size:26px; }
  .intro-visual { margin-inline:-20px; }
  .review-stars { font-size:10px; }
}
@media(prefers-reduced-motion:reduce) { .is-active .chart-curve { animation:none; stroke-dashoffset:0; } }
.social-funnel .primary > span { display:none; }
.intro-review-badge .review-stars { margin-left:0; }
.intro-review-badge > span:last-child { letter-spacing:0; color:var(--muted); }
.social-funnel .photo-story { background-image:linear-gradient(180deg,rgba(16,9,14,.55),rgba(16,9,14,.86)),url('./assets/clockout/stock-dinner.webp'); }
.social-funnel .reference-paywall { padding-top:0; padding-bottom:150px; }
/* Simplified offers: a single readable daily price and quiet billing detail. */
.reference-paywall .membership-plans { gap:10px; }
.reference-paywall .membership-plan { min-height:82px; padding:16px 14px; gap:12px; border-radius:16px; }
.reference-paywall .plan-details { display:flex; flex-direction:column; gap:7px; }
.plan-name { display:flex; flex-wrap:wrap; align-items:center; gap:7px; }
.plan-name strong { font-size:16px; font-weight:600; }
.recommendation { color:#ffc1dc; font-size:10px; font-weight:500; }
.reference-paywall .plan-details .plan-billing { font-size:10px; line-height:1.4; font-weight:400; color:var(--muted); }
.plan-rate { display:flex; align-items:baseline; gap:3px; white-space:nowrap; }
.plan-rate strong { font-size:25px; font-weight:600; letter-spacing:-.04em; }
.plan-rate small { font-size:12px; color:var(--muted); }
.reference-paywall .plan-radio { width:19px; height:19px; }
.reference-paywall .plan-rationale { display:block; margin:12px 0 0; text-align:center; font-size:10px; }
.social-funnel .reference-paywall .social-terms { font-size:11px; line-height:1.5; margin:14px 0 8px; }
@media(max-width:360px) { .reference-paywall .membership-plan { gap:9px; padding:14px 12px; } .plan-rate strong { font-size:23px; } .plan-name { gap:4px; } }
#stripe-payment-form { scroll-margin-top:64px; }
#stripe-billing-email { display:block; width:100%; margin:8px 0 18px; padding:0 14px; }
#social-payment-element { min-height:180px; margin:14px 0; }
#stripe-card-submit { width:100%; margin-top:16px; }
#social-wallet[hidden],#sticky-checkout-button[hidden] { display:none; }
#social-wallet { width:100%; }
#stripe-payment-retry[hidden],#stripe-check-status[hidden] { display:none; }
/* City social proof, following the full-photo reference interstitial. */
.social-funnel .source-city-proof { min-height:calc(100svh - 76px); padding-top:66px; background-position:center; background-image:linear-gradient(180deg,rgba(16,9,14,.35),rgba(16,9,14,.65)),url('./assets/clockout/stock-dinner.webp'); }
.social-funnel .source-city-proof h2 { font-size:40px; line-height:1.12; font-weight:550; letter-spacing:-.045em; }
.source-city-proof .story-text { font-size:18px; line-height:1.4; margin:28px auto 46px; max-width:340px; }
.source-city-proof .review-carousel { margin-inline:-10px; padding:0 10px; gap:12px; }
.source-city-proof .review-carousel figure { flex-basis:92%; min-height:178px; }
.source-city-proof .primary { margin-top:auto; }
.source-city-proof .carousel-dots { margin-bottom:36px; }
@media(max-width:360px) { .social-funnel .source-city-proof { padding-top:35px; } .social-funnel .source-city-proof h2 { font-size:34px; } .source-city-proof .story-text { margin:22px auto 28px; font-size:16px; } }
.social-funnel .member-review a.review-source { color:#705362; text-decoration:underline; padding:6px 0; }
/* Keep native wallet iframes mounted and measurable before the paywall. */
.social-funnel .checkout-dock.checkout-prewarming { left:-10000px; right:auto; width:min(450px,100vw); transform:none; opacity:0; pointer-events:none; }
#social-wallet-element { position:relative; min-height:49px; }
#social-wallet-element .wallet-cached { position:absolute; top:0; left:0; width:100%; opacity:0; pointer-events:none; }
#social-wallet.wallet-unavailable { height:0; overflow:hidden; }