/* Spectrum as a small brand signature; v11 retains its surfaces and typography. */
:root{--spectrum:linear-gradient(90deg,#ff2442,#f2582a 24%,#e93cb0 49%,#7a3bf5 74%,#2e7cf6)}
.hero-category{display:flex;align-items:center;gap:12px}
.hero-category:before{content:'';display:block;width:24px;height:2px;background:var(--spectrum);flex:none}
.header-access{border-image:var(--spectrum) 1}
.story-scroll[data-enhanced=true] .chapter-nav>.container:after{background:var(--spectrum)}
.brief-card,.draft-fragment,.meeting-card{background-image:var(--spectrum);background-size:72px 2px;background-position:20px 0;background-repeat:no-repeat}
.voice-wave i:nth-child(3n){background:#2e7cf6}.voice-wave i:nth-child(3n + 1){background:#e93cb0}.voice-wave i:nth-child(3n + 2){background:#7a3bf5}
.signup h2:before{content:'';display:block;width:40px;height:2px;margin-bottom:15px;background:var(--spectrum)}
@media(forced-colors:active){.hero-category:before,.signup h2:before{background:CanvasText}}

.introduction{padding-top:95px;padding-bottom:70px}
.story-opening{padding-top:60px;padding-bottom:45px}
@media(max-width:800px){.introduction{padding-top:65px;padding-bottom:45px}.story-opening{padding-top:35px;padding-bottom:35px}}

/* Alternate paper and graphite through Meet; retain the original scroll timing. */
.meeting-scene{background:var(--paper);color:var(--paper-ink)}
.meeting-scene .chapter-label,.meeting-scene .scene-copy>p,.meeting-scene .scene-caption{color:#716875}
.meeting-scene .scene-copy h3 em{color:#bc1530}
.meeting-scene .caption-line,.meeting-scene .scene-progress i{background:var(--signal)}
.meeting-scene .scene-bottom,.story-scroll[data-enhanced=true] .meeting-scene .scene-bottom{color:#716875;border-color:#d8cfd4}
.meeting-scene .scene-progress{background:#d8cfd4}
.meeting-scene .scene-bottom a:hover{color:#bc1530}
.meeting-scene :focus-visible{outline-color:#bc1530}
.meeting-reply{background:#1b1726;border-color:#4b415c;color:#f0ebe4}
.meeting-reply .micro-label{color:#ff8093}
.meeting-trail svg{stroke:#bc153060}
.meeting-card,.meeting-brief{box-shadow:0 24px 55px #1b17261a}
.meeting-confirmed{color:#bc1530}
.meeting-brief>.micro-label,.meeting-brief>div>span{color:#ff8093}

/* A compact footer with useful, readable social links. */
.site-footer{padding-top:20px;padding-bottom:20px;gap:24px}
.site-footer .brand img{width:135px;height:auto}
.site-footer>p{font-size:13px}
.social-links{display:flex;align-items:center;gap:24px}
.social-links a{display:inline-flex;align-items:center;gap:7px;min-height:44px;font-size:14px}
.social-links a .social-icon{width:19px;height:19px;color:#f0ebe4;stroke-width:1.7}
.social-links a .social-icon--filled{fill:currentColor;stroke:none}
.social-links a:hover{text-decoration:underline;text-underline-offset:5px}
.social-links a:hover svg{color:#f0ebe4}
@media(max-width:800px){
 .site-footer{gap:12px 24px}
 .site-footer>p{order:3;margin-top:0;font-size:12px}
 .social-links{margin-left:auto;gap:18px}
}
@media(max-width:600px){
 .site-footer{padding-top:20px;padding-bottom:20px;gap:8px}
 .site-footer>p{order:0;width:auto;max-width:140px;margin-left:auto;text-align:right}
 .social-links{width:100%;margin-left:0;gap:26px}
}

/* Support text shares the mono labels used throughout the product story. */
.chapter-nav a{font-family:Plex,monospace;font-size:12px;letter-spacing:-.02em;gap:12px}
.chapter-nav a>span{font-size:9px;opacity:.7}
.film-heading>p{font-family:Plex,monospace;font-size:12px;line-height:1.7;letter-spacing:.01em;max-width:260px}
@media(max-width:800px){
 .chapter-nav a{font-size:11px;gap:8px}
 .film-heading>p{font-size:12px;margin-top:18px}
}
@media(max-width:600px){
 .chapter-nav>.container{padding-left:16px;padding-right:16px}
 .chapter-nav a{font-size:9.5px;letter-spacing:-.03em}
 .chapter-nav a>span{font-size:9px}
 .social-links{gap:20px}
}

/* One closing composition: signup + native calendar, then the team sign-off. */
.contact-section{padding:80px 0 55px}
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;column-gap:88px;row-gap:0;align-items:start}
.contact-grid .signup{max-width:none;min-width:0;grid-column:2;grid-row:2}
.signup h2,.contact-booking-header h2{font-size:30px;font-weight:480;line-height:1.15;letter-spacing:-.035em}
.contact-booking-header h2:before{content:'';display:block;width:40px;height:2px;margin-bottom:15px;background:var(--spectrum)}
.contact-intro,.contact-booking-header p{font-size:15px;line-height:1.65;color:#716875;margin-top:20px}
.contact-grid .signup form{margin-top:27px}
.contact-grid .input-row{gap:10px}
.contact-grid .input-row input{font-size:18px}
.contact-grid .consent{font-size:12px!important}
.contact-grid .preview-note{font-size:11px;line-height:1.7}
.contact-booking{display:grid;grid-column:1;grid-row:1 / 4;grid-template-rows:subgrid;min-width:0;color-scheme:light;scroll-margin-top:30px}
.contact-booking-header{margin-bottom:20px}
.contact-booking-header p{margin-top:14px}
.calendar-shell{position:relative;background:transparent;border:0;margin:0;max-width:720px;width:100%;overflow:visible}
#roger-calendar{width:100%;height:auto;min-height:0;max-height:none;overflow:visible;color-scheme:light}
#roger-calendar iframe{display:block;width:100%;border:0;max-height:none;background:#f7f4ef;color-scheme:light}
/* Cal forces mobile at <=768px. An 800px viewport keeps its 480px
   month + 240px slots booker, centered with 40px of canvas on each side.
   Move that canvas, not the controls, to retain the 720px aligned card. */
@media(min-width:900px){
 #roger-calendar{width:800px;margin-left:-40px}
}
.calendar-shell[data-state=idle],.calendar-shell[data-state=loading]{min-height:460px}
#calendar-status{padding:25px 16px;font:11px/1.7 Plex,monospace;color:#716875;text-align:center}
.calendar-shell[data-state=error] #roger-calendar{display:none}
.calendar-shell[data-state=error]{border:1px solid #d8cfd4;border-radius:8px}
.calendar-shell[data-state=error] #calendar-status{padding:35px 24px}
.calendar-alternative{max-width:720px;width:100%;margin-top:10px;text-align:right;font:10px/1.8 Plex,monospace;color:#716875}
.calendar-alternative a{display:inline-flex;align-items:center;gap:7px;min-height:44px;text-decoration:underline;text-underline-offset:4px}
.calendar-alternative svg{width:13px;height:13px}
.team-signoff{text-align:center;padding-top:48px;margin-top:60px;border-top:1px solid #d8cfd4}
.team-signoff h2{font-size:clamp(36px,4.7vw,64px);line-height:1.12;font-weight:480;letter-spacing:-.04em}
.team-signoff h2 span{color:#857c8a}
@media(max-width:1200px){
 .contact-grid{grid-template-columns:1fr;gap:72px}
 .contact-grid .signup{max-width:460px;grid-column:auto;grid-row:auto}
 .contact-booking{display:block;grid-column:auto;grid-row:auto}
 .contact-booking-header h2{font-size:30px}
}
@media(max-width:600px){
 .contact-section{padding-top:55px;padding-bottom:38px}
 .contact-section>.container{padding-left:16px;padding-right:16px}
 .contact-grid{gap:56px}
 .signup h2,.contact-booking-header h2{font-size:28px}
 .contact-intro{max-width:340px}
 .team-signoff{padding-top:32px;margin-top:35px}
 .team-signoff h2{font-size:38px;max-width:360px;margin:auto}
 .team-signoff h2 span{display:block}
 .calendar-alternative{text-align:center}
}
.hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.form-error{font-size:13px;line-height:1.6;color:#bc1530;margin-top:16px}
#waitlist-form[aria-busy=true] [type=submit]{opacity:.55;cursor:progress}