/* BeYu launch site: sections added from Ben's v4 copy (problem, how it works, proof, membership,
   organizers page) and the shorter signup form. Uses the shared tokens in styles.css. */

/* Hero additions */
.hero-microcopy{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px}
.hero-host-link{font-size:12px;font-weight:600;color:var(--text);border-bottom:1px solid #e3571a88;padding-bottom:2px}
.hero-host-link span{color:var(--orange)}
.hero-host-link:hover{border-bottom-color:var(--orange)}

/* Shared section heading: big serif line + a short lede */
.launch-heading{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:64px;align-items:end}
.launch-heading h2{max-width:780px}
.launch-heading>p{color:var(--muted);font-size:14px;line-height:1.85;max-width:400px}
.moment-label{display:block;font-family:var(--mono, ui-monospace, monospace);font-size:10px;font-weight:600;letter-spacing:1.6px;color:var(--orange);text-transform:uppercase}

/* The "which one" problem: three moments */
.problem-section{border-top:1px solid var(--line)}
.moment-grid{list-style:none;margin:52px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--line)}
.moment-grid li{padding:30px 32px 6px 0;min-width:0}
.moment-grid li+li{padding-left:32px;border-left:1px solid var(--line)}
.moment-grid h3{font:400 clamp(24px,2.2vw,30px)/1.12 var(--serif);letter-spacing:-.4px;margin:16px 0 14px}
.moment-grid p{color:var(--muted);font-size:13px;line-height:1.8;max-width:340px}
.problem-close{margin-top:40px;font:italic 400 clamp(20px,2vw,26px)/1.3 var(--serif);color:#f0a07a}

/* How it works: one real screen per moment */
.how-section{border-top:1px solid var(--line)}
.how-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin-top:56px}
.how-step{display:flex;flex-direction:column;gap:26px;min-width:0;padding:26px 24px 28px;border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(180deg,#222126 0%,#1c1b20 100%)}
.how-phone{display:block;width:min(176px,62%);margin:0 auto;border:4px solid #3f3e45;border-radius:24px;overflow:hidden;background:#0b0b0c;box-shadow:0 18px 50px #0007;transition:transform .35s cubic-bezier(.22,1,.36,1)}
.how-phone img{display:block;width:100%;height:auto;aspect-ratio:592/1100;object-fit:cover;object-position:top}
.how-phone:hover{transform:translateY(-4px) rotate(-1deg)}
.how-copy h3{font:400 clamp(26px,2.3vw,32px)/1.1 var(--serif);letter-spacing:-.4px;margin:12px 0 12px}
.how-copy>p{color:var(--muted);font-size:13px;line-height:1.8}
.how-proof{margin-top:14px;font-size:12px!important;color:var(--text)!important;opacity:.9}
.prompt-chips{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.prompt-chips li{align-self:flex-start;max-width:100%;padding:8px 13px;border-radius:16px 16px 16px 4px;background:#2c2b31;border:1px solid #45434c;font-size:12px;line-height:1.5}

/* More than an events app */
.more-section{padding-block:10px 110px}
.more-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:64px;align-items:start;padding:52px 0 0;border-top:1px solid var(--line)}
.more-copy h2{margin:0 0 20px}
.more-copy>p:not(.eyebrow){color:var(--muted);font-size:14px;line-height:1.85;max-width:420px;margin-bottom:24px}
.more-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.more-list a{display:flex;flex-direction:column;gap:8px;height:100%;padding:22px 22px 24px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);transition:border-color .2s,transform .2s}
.more-list a:hover{border-color:#e3571a88;transform:translateY(-2px)}
.more-list b{font:400 22px/1.15 var(--serif);letter-spacing:-.2px}
.more-list span{color:var(--muted);font-size:12.5px;line-height:1.7}

/* Proof lines above the quotes */
.proof-lines{display:grid;gap:10px;margin:22px 0 6px;max-width:720px}
.proof-lines p{color:var(--muted);font-size:14px;line-height:1.8}

/* Membership (shown only once pricing is approved) */
.membership-section{border-top:1px solid var(--line)}
.tier-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:46px}
.tier{padding:30px 28px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel)}
.tier h3{font:400 30px/1.12 var(--serif);margin:14px 0 12px}
.tier p:last-child{color:var(--muted);font-size:13px;line-height:1.8}
.tier-premium{border-color:#e3571a77;background:radial-gradient(120% 140% at 100% 0%,#e3571a22 0,transparent 60%),var(--panel)}

/* Final call to action */
.cta-partner{margin-top:18px;font-size:12px}
.final-cta .cta-partner .inline-link{color:inherit;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.final-cta .cta-partner{color:#242327;position:relative;z-index:1}

/* Organizers page */
.org-hero .landing-intro{max-width:470px}
.org-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:30px}
.org-hero .microcopy{margin-top:16px}
.benefits-section{border-top:1px solid var(--line)}
.benefit-grid{list-style:none;margin:52px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.benefit-grid li{padding:28px 28px 30px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);min-width:0}
.benefit-grid h3{font:400 clamp(24px,2.1vw,29px)/1.15 var(--serif);letter-spacing:-.3px;margin-bottom:12px}
.benefit-grid p{color:var(--muted);font-size:13px;line-height:1.8}
.benefit-grid q{color:var(--text);font-style:italic}
.organizer-page .host-reference-copy>p:not(.eyebrow){max-width:470px;margin-top:18px;line-height:1.85}
.org-proof .pitch-video{border-top:0;padding-top:0}

/* Signup form: essentials first, the rest under "Tell us more" */
.more-details{margin-top:23px;border-top:1px solid #3d3c43;border-bottom:1px solid #3d3c43}
.more-details summary{cursor:pointer;display:flex;justify-content:space-between;gap:10px;font-size:11px;font-weight:500;padding:15px 0;list-style:none}
.more-details summary::-webkit-details-marker{display:none}
.more-details summary>span{color:var(--muted);font-size:9px;white-space:nowrap}
.more-details[open] summary>span{color:var(--orange)}
.more-details>.field-row .field:first-child{margin-top:4px}
.more-details>.role-fieldset:last-child{padding-bottom:18px}
.more-details #feature-other{display:block;width:100%;background:#212025;border:1px solid #4b4a53;border-radius:6px;color:var(--text);padding:11px 12px;font-size:12px;min-height:45px}
.feature-fieldset .feature-options{margin-top:4px}
@supports selector(:has(*)){#waitlist-form:has([name=role][value=attendee]:checked) .org-field{display:none}}

/* Organizer closing headline is longer than the home page's, so it runs smaller */
.organizer-page .final-cta h2{font-size:clamp(56px,6.6vw,96px);line-height:.92;letter-spacing:-2px}
.nowrap{white-space:nowrap}

/* Responsive */
@media(max-width:1024px){
  .launch-heading{gap:36px}
  .how-steps{gap:16px}
  .how-step{padding:22px 18px 24px}
  .more-inner{gap:40px}
}
@media(max-width:900px){
  .launch-heading{grid-template-columns:1fr;gap:18px}
  .moment-grid{grid-template-columns:1fr;margin-top:36px}
  .moment-grid li{padding:24px 0 24px}
  .moment-grid li+li{padding-left:0;border-left:0;border-top:1px solid var(--line)}
  .how-steps{grid-template-columns:1fr;gap:16px;margin-top:36px}
  .how-step{flex-direction:row;align-items:center;gap:22px}
  .how-phone{width:132px;flex:none;margin:0}
  .more-inner{grid-template-columns:1fr}
  .benefit-grid{grid-template-columns:1fr;margin-top:36px}
  .tier-grid{grid-template-columns:1fr}
}
@media(max-width:640px){
  .hero-microcopy{gap:10px 18px}
  .hero-host-link{font-size:11px}
  .launch-heading>p,.more-copy>p:not(.eyebrow),.proof-lines p{font-size:13px}
  .how-step{flex-direction:column;align-items:stretch}
  .how-phone{width:min(168px,56%);margin:0 auto}
  .more-list{grid-template-columns:1fr}
  .more-section{padding-bottom:70px}
  .organizer-page .final-cta h2{font-size:clamp(42px,11.5vw,56px);letter-spacing:-1.2px}
  .benefit-grid li,.tier{padding:22px 20px 24px}
}
@media(prefers-reduced-motion:reduce){.how-phone,.more-list a{transition:none}.how-phone:hover,.more-list a:hover{transform:none}}
.motion-paused .how-phone,.motion-paused .more-list a{transition:none}

/* Chapter-specific stories, between the selected feature and the founder pitch. */
.tour-chapter-section{display:none}
body[data-active-feature=explore] .tour-chapter-section[data-chapter=explore],
body[data-active-feature=onboarding] .tour-chapter-section[data-chapter=onboarding],
body[data-active-feature=host] .tour-chapter-section[data-chapter=host],
body[data-active-feature=communities] .tour-chapter-section[data-chapter=communities],
body[data-active-feature=circle] .tour-chapter-section[data-chapter=circle]{display:block}
.tour-problem-section{padding-block:56px}
.tour-moments{padding-bottom:56px}
.tour-moments .moment-grid{margin-top:0}
.tour-bottom .more-section{padding-block:0 56px}
@media(max-width:640px){
  .tour-problem-section{padding-block:36px}
  .tour-moments,.tour-bottom .more-section{padding-bottom:36px}
}

/* Professional event picks in Explore: real artwork, clear source, three distinct rooms. */
.business-section{border-top:1px solid var(--line);padding:56px 0}
.business-heading{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:60px;align-items:end}
.business-heading .eyebrow{margin-bottom:25px}
.business-heading h2 em{color:#eaa484}
.business-heading>p{max-width:370px;color:var(--muted);font-size:14px;line-height:1.85}
.business-toolbar{display:flex;justify-content:space-between;gap:18px;align-items:center;margin-top:35px}
.business-controls{display:flex;flex-wrap:wrap;gap:8px}
.business-controls button{padding:11px 16px;border:1px solid var(--line);border-radius:30px;background:transparent;color:var(--muted);font:500 11px var(--sans);cursor:pointer;min-height:42px}
.business-controls button:hover{border-color:var(--orange);color:var(--text)}
.business-controls button[aria-pressed=true]{background:var(--cream);border-color:var(--cream);color:var(--ink)}
.business-location,.business-status{font:500 9px/1.6 var(--mono);letter-spacing:1px;color:var(--muted)}
.business-location{white-space:nowrap}
.business-status{margin-top:18px;letter-spacing:.3px}
.business-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:22px;align-items:stretch}
.business-card{min-width:0;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--panel);transition:transform .25s,border-color .25s;animation:business-enter .5s both}
.business-card:nth-child(2){animation-delay:.08s}.business-card:nth-child(3){animation-delay:.16s}
.business-card:hover{transform:translateY(-4px);border-color:#e3571a88}
.business-art{aspect-ratio:4/1;overflow:hidden;background:var(--bg)}
.business-art img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .35s}
.business-card:hover .business-art img{transform:scale(1.035)}
.business-card-body{padding:22px;display:flex;flex-direction:column;flex:1}
.business-card-meta{display:flex;justify-content:space-between;gap:10px;font:500 9px/1.6 var(--mono);text-transform:uppercase;letter-spacing:.7px;color:#efa27d}
.business-card-meta time{white-space:nowrap;color:var(--text)}
.business-card h3{font:400 29px/1.1 var(--serif);letter-spacing:-.35px;margin:17px 0 19px;overflow-wrap:anywhere}
.business-when{color:var(--text);font-size:12px;margin-top:auto}
.business-venue{color:var(--muted);font-size:12px;line-height:1.7;margin:6px 0 22px}
.business-card-link{padding-top:14px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;font-size:11px;font-weight:600}
.business-card-link>span{color:var(--orange);font-size:23px;font-weight:400}
.business-foot{display:flex;align-items:center;justify-content:space-between;gap:24px;border-top:1px solid var(--line);padding-top:22px;margin-top:28px}
.business-foot p{font-size:10px;color:var(--muted);line-height:1.7;max-width:440px}
.business-foot a{font-size:11px;flex-shrink:0}
.business-empty{grid-column:1/-1;padding:28px;border:1px solid var(--line);border-radius:14px}
.business-empty h3{font:400 30px/1.15 var(--serif);margin-bottom:12px}
.business-empty p{font-size:13px;line-height:1.8;color:var(--muted);max-width:560px}
@keyframes business-enter{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}
@media(max-width:1024px){.business-heading{gap:32px}.business-card-body{padding:18px}.business-card h3{font-size:25px}.business-card-meta{font-size:8px;letter-spacing:0}}
@media(max-width:900px){.business-heading{grid-template-columns:1fr;gap:18px}.business-heading>p{max-width:520px}.business-grid{gap:14px}.business-location{display:none}}
@media(max-width:640px){.business-section{padding:36px 0}.business-grid{grid-template-columns:1fr;gap:20px}.business-card h3{font-size:30px}.business-card-meta{font-size:9px;letter-spacing:.5px}.business-card-body{padding:22px}.business-foot{align-items:start;flex-direction:column;gap:15px}.business-controls button{padding:10px 13px}.business-heading h2{font-size:49px}}
@media(prefers-reduced-motion:reduce){.business-card,.business-art img{animation:none;transition:none}.business-card:hover,.business-card:hover .business-art img{transform:none}}
.motion-paused .business-card,.motion-paused .business-art img{animation:none;transition:none}.motion-paused .business-card:hover,.motion-paused .business-card:hover .business-art img{transform:none}

/* Home, October 12 (Kyle's website notes) ------------------------------------------------------------- */

/* Rotating hero headline. All lines share one grid cell, so the tallest sets the height and nothing below
   moves as they change. Lines sit on the cell's bottom edge, so a shorter line leaves its spare space up by
   the header instead of a gap above the intro. Only opacity hides a line: visibility:hidden would also take
   the first line out of the accessibility tree whenever another line is showing, leaving the h1 empty for a
   screen reader (lines 2-5 are aria-hidden). The size comes down from the old single-line headline so the
   longest line fits in three lines beside the phones. */
.landing-hero h1.hero-rotator{display:grid;margin-top:0;font-size:clamp(54px,5.5vw,78px);line-height:1;letter-spacing:-2px}
.rotator-line{grid-area:1/1;align-self:end;transition:opacity .6s ease,translate .6s cubic-bezier(.22,1,.36,1)}
.rotator-line:not(.is-current){opacity:0;translate:0 .2em;user-select:none;pointer-events:none}

/* Scattered platforms converging into BeYu, a full-width row under the hero's two columns. */
.convergence{grid-column:1/-1;min-width:0;display:grid;gap:18px;padding:40px 0 8px;border-top:1px solid var(--line)}
.convergence-copy{display:grid;grid-template-columns:150px 1fr;align-items:start;gap:12px 22px}
.convergence-copy .eyebrow{color:var(--orange);padding-top:12px}
.convergence-line{font:400 clamp(26px,2.8vw,38px)/1.2 var(--serif);letter-spacing:-.5px;max-width:850px}
.convergence-line em{color:#ee9b75}
.convergence svg{display:block;width:100%;height:auto;overflow:visible}
.convergence .convergence-tall{display:none}
.conv-chip rect{stroke:#57505b;stroke-width:1;filter:drop-shadow(0 8px 12px #0003)}
.conv-chip text{fill:#f4f0e9;font-family:var(--sans);font-weight:500;text-anchor:middle;letter-spacing:.1px}
.conv-chip{transition:filter .25s ease}
.conv-chip:hover{filter:brightness(1.2)}
.conv-track{fill:none;stroke:#e3571a;stroke-opacity:.17;stroke-width:1}
.conv-flow{fill:none;stroke:#e9824f;stroke-opacity:.7;stroke-width:1.8;stroke-linecap:round;stroke-dasharray:3 24}
.conv-halo{fill:#e3571a;fill-opacity:.025;stroke:#e3571a;stroke-opacity:.1}
.conv-ring{fill:none;stroke:#dc784e;stroke-opacity:.3;stroke-width:1}
.conv-core{stroke:#dc784e;stroke-opacity:.85;stroke-width:1.2;filter:drop-shadow(0 10px 22px #0007)}
.conv-wordmark{font-family:var(--serif);font-style:italic;fill:#f4eddc;text-anchor:middle;letter-spacing:-2px}
.conv-wordmark tspan{fill:#e3571a}
.conv-destination{fill:#c4aca1;font:9px var(--mono);text-anchor:middle;letter-spacing:1.8px}
/* motion.js owns the user pause and reduced-motion preferences. All movement is opt-in. */
.motion-ready .conv-flow{animation:conv-flow 4s linear infinite}
.motion-ready .conv-chip{animation:conv-drift 7s ease-in-out infinite alternate}
.motion-ready .conv-chip-1{animation-delay:-1.4s}.motion-ready .conv-chip-2{animation-delay:-2.8s}
.motion-ready .conv-chip-3{animation-delay:-.7s}.motion-ready .conv-chip-4{animation-delay:-3.6s}
.motion-ready .conv-chip-5{animation-delay:-2.1s}
@keyframes conv-flow{to{stroke-dashoffset:-54}}
@keyframes conv-drift{from{transform:translateY(-2px)}to{transform:translateY(2px)}}
@media(max-width:980px){.convergence-copy{display:block}.convergence-copy .eyebrow{display:block;margin-bottom:12px}.convergence-line{display:block;font-size:30px}}

/* Sami in action and the founder pitch, pulled onto Home from the tour (they keep the tour's classes). */
.home-sami{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:110px;align-items:center;padding-block:100px;border-top:1px solid var(--line)}
.home-sami .screen-viewer{width:290px}
.home-sami .feature-cta{flex-direction:row;flex-wrap:wrap;align-items:center;gap:16px 26px}
.landing-page .pitch-video{padding-block:80px 90px}

/* More than an events app: the profile pitch, before For organizers. */
.home-more{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:72px;align-items:center;border-top:1px solid var(--line)}
.home-more-copy h2{margin:22px 0 20px;max-width:640px}
.home-more-copy>p:not(.eyebrow){color:var(--muted);font-size:14px;line-height:1.85;max-width:600px}
.home-more-list{list-style:none;margin:32px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.home-more-list li{display:flex;flex-direction:column;gap:8px;min-width:0;padding:20px 20px 22px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel)}
.home-more-list b{font:400 22px/1.15 var(--serif);letter-spacing:-.2px}
.home-more-list span{color:var(--muted);font-size:12.5px;line-height:1.7}
.home-more-art{position:relative;display:block;justify-self:center;padding-bottom:30px}
.home-more-device{width:250px;border:5px solid #45444c;border-radius:31px;overflow:hidden;background:#0b0b0c;box-shadow:0 20px 60px #0008;rotate:-4deg;transition:rotate .3s}
.home-more-device img{display:block;width:100%;height:auto;aspect-ratio:592/1000;object-fit:cover;object-position:top}
.home-more-art:hover .home-more-device{rotate:-1deg}
.home-more-art .host-art-caption{color:var(--muted);left:50%;translate:-50% 0;white-space:nowrap}

@media(max-width:1024px){
  .home-sami{gap:50px;padding-block:80px}
  .home-sami .screen-viewer{width:260px}
  .home-more{gap:40px}
  .home-more-list{grid-template-columns:1fr}
}
@media(max-width:900px){
  .home-sami{grid-template-columns:1fr;gap:36px}
  .home-more{grid-template-columns:1fr}
  .home-more-list{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* Below 981px the wide drawing would shrink its names under 11px, so the ring takes over. */
@media(max-width:980px){
  .convergence .convergence-wide{display:none}
  .convergence .convergence-tall{display:block;max-width:400px;margin:4px auto 0}
}
@media(max-width:640px){
  .landing-hero h1.hero-rotator{font-size:clamp(42px,11.6vw,58px);letter-spacing:-1.4px}
  .convergence{padding-top:24px}
  .convergence-line{font-size:26px}.convergence-tall .conv-destination{display:none}
  .home-sami{padding-block:64px}
  .home-sami .screen-viewer{width:min(250px,100%)}
  .home-more-list{grid-template-columns:1fr}
  .home-more-device{width:200px}
  .landing-page .pitch-video{padding-block:56px 60px}
}
@media(prefers-reduced-motion:reduce){.rotator-line,.home-more-device{transition:none}.conv-flow,.conv-chip,.conv-ring{animation:none}.home-more-art:hover .home-more-device{rotate:-4deg}}
.motion-paused .home-more-art:hover .home-more-device{rotate:-4deg}

/* Ben's website notes, round 2 (October 13) ------------------------------------------------------------ */

/* Home Proof: the copy beside two community cards (names and links; logos can replace the initials later). */
.home-proof{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center;border-top:1px solid var(--line)}
.home-proof-copy h2{margin:22px 0 20px}
.home-proof-copy>p:not(.eyebrow){color:var(--muted);font-size:14px;line-height:1.85;max-width:520px}
.community-links{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.community-links a{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:'mark name url' 'mark note url';align-items:center;gap:4px 18px;padding:20px 22px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);transition:border-color .2s,transform .2s}
.community-links a:hover{border-color:#e3571a88;transform:translateY(-2px)}
.community-mark{grid-area:mark;display:grid;place-items:center;width:58px;height:58px;border-radius:14px;background:#f4efe5;overflow:hidden;box-shadow:inset 0 0 0 1px #ffffff40}
.community-mark img{display:block;width:100%;height:100%;object-fit:contain}
/* Account for the transparent space in the official files without altering their artwork. */
.community-mark--jctm img{transform:scale(1.55)}
.community-mark--intu img{transform:scale(1.35)}
.community-name{grid-area:name;font:400 24px/1.15 var(--serif);letter-spacing:-.2px}
.community-note{grid-area:note;color:var(--muted);font-size:12px;line-height:1.6}
.community-url{grid-area:url;font-size:11px;font-weight:600;white-space:nowrap}
.community-url span{color:var(--orange)}

/* Ben's manifesto, under the founder buttons. */
.manifesto-link{display:inline-flex;align-items:center;gap:8px;margin-top:20px;font-size:12px}
.manifesto-link span{color:var(--orange)}

/* Organizers Proof: Ben's two paragraphs need air between them. */
.org-proof .pitch-copy>p:not(.eyebrow)+p{margin-top:14px}

/* Organizers headline: a full sentence now, so it runs smaller than the old two-word tagline. */
.org-hero h1{font-size:clamp(50px,5.1vw,74px);line-height:1;letter-spacing:-1.6px}

@media(max-width:900px){
  .home-proof{grid-template-columns:1fr;gap:32px}
}
@media(max-width:640px){
  .org-hero h1{font-size:clamp(40px,10.6vw,54px);letter-spacing:-1.1px}
  .home-proof-copy>p:not(.eyebrow){font-size:13px}
  .community-links a{grid-template-columns:auto 1fr;grid-template-areas:'mark name' 'mark note' 'mark url';padding:18px}
  .community-mark{width:50px;height:50px;font-size:10px}
  .community-name{font-size:21px}
}
@media(prefers-reduced-motion:reduce){.community-links a{transition:none}.community-links a:hover{transform:none}}
.motion-paused .community-links a{transition:none}.motion-paused .community-links a:hover{transform:none}

/* Authentic, locally hosted YouTube poster; no third-party request until play. */
.video-thumbnail{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}.video-shade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,9,12,.9),rgba(10,9,12,.12) 40%,transparent 70%)}.video-play{z-index:1}.video-meta{z-index:1}

/* Draw interface marks rather than relying on platform emoji fonts. */
/* Concept A: a quiet cream editorial keepsake. */
.signup-success .keepsake{background:#f1ebde;color:#17161b;border:1px solid #d1c6b5;padding:24px;border-radius:0;max-width:390px;container-type:inline-size;display:flex;flex-direction:column;aspect-ratio:4/5}
.keepsake-top{padding:0;border:0;align-items:start}
.keepsake-top>.wordmark{font-size:46px;font-style:normal;letter-spacing:-1.5px;color:#17161b}
.keepsake-top>span:last-child{color:#796953;font-size:6px;line-height:1.6;letter-spacing:1px;text-align:right;font-weight:600}
.keepsake-rule{width:33px;height:2px;background:#df5119;margin-top:38px;flex-shrink:0}
.signup-success .keepsake>p{font:62px/.9 var(--serif);font-size:clamp(44px,18cqw,68px);letter-spacing:-1.5px;margin:20px 0 22px!important}
.keepsake>p em{color:#d34d1c}
.keepsake-tagline{color:#625648;font-size:10px;margin-bottom:35px;position:relative}
.keepsake-bottom-wrap{margin-top:auto;border-top:1px solid #cbbfae;padding-top:15px}
.keepsake-status{font-size:7px;letter-spacing:1px;color:#9a4e30;font-weight:600;margin-bottom:8px}
.keepsake-bottom{border:0;font-size:9px;line-height:1.5;padding:0;color:#17161b;align-items:start}
#keepsake-name{max-width:68%;font-weight:600}
.keepsake-bottom>span:last-child{color:#bf461a;font-size:11px;letter-spacing:0}
.keepsake-footer{margin-top:17px;color:#796953;line-height:1.5}
.keepsake-footer small{font-size:7px}
@media(max-width:370px){.signup-success .keepsake{padding:18px}.keepsake-top>.wordmark{font-size:38px}.keepsake-rule{margin-top:28px}.keepsake-top>span:last-child{font-size:5px;letter-spacing:.7px}}

.ui-arrow,.ui-mark{display:inline-block;width:1em;height:1em;flex-shrink:0;vertical-align:-.12em}
.button .ui-arrow{width:18px;height:18px}
.celebration i{width:7px;height:7px;background:var(--orange);border-radius:50%}
.celebration i.celebration-ring{width:12px;height:12px;background:none;border:1.5px solid var(--orange)}

/* Keep editable text at a readable size so iOS does not zoom on focus.
   Cover the hero entry and optional idea field as well as the main form.
   Leave pinch zoom available for visitors who choose to enlarge the page. */
@media(max-width:1024px),(pointer:coarse){
  .email-entry input,
  .waitlist-dialog .field input,
  .waitlist-dialog .more-details #feature-other,
  .privacy-form input,.privacy-form select,.privacy-form textarea{font-size:16px}
}
@media(max-width:640px){
  .waitlist-dialog .field-row{grid-template-columns:minmax(0,1fr)}
  .waitlist-dialog .field{min-width:0}
  .waitlist-dialog .field label,.waitlist-dialog .role-fieldset legend{font-size:12px}
  .waitlist-dialog .role-options span{font-size:12px}
  .waitlist-dialog .feature-options label{font-size:13px;min-height:32px}
  .waitlist-dialog .form-intro{font-size:14px}
  .waitlist-dialog input{scroll-margin-block:24px}
}