/* Real onboarding recordings, with a quiet device outline and no content crop. */
.onboarding-clip {
  text-align: center;
  scroll-margin-top: 100px;
}
.onboarding-clip .phone-video {
  width: min(100%, 310px);
  margin: 0 auto;
  border: 0;
  border-radius: 0;
  overflow: visible;
  background: transparent;
}
.onboarding-clip .phone-video::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  /* The source recording's screen ends at 1704px; captions are below it. */
  aspect-ratio: 780 / 1704;
  box-sizing: border-box;
  border: 5px solid #25332f;
  border-radius: 32px;
  pointer-events: none;
  z-index: 1;
}
.phone-video video {
  border-radius: 32px 32px 0 0;
  aspect-ratio: 780 / 1940;
  object-fit: contain;
}
.phone-video .clip-ctl {
  position: static;
  justify-content: center;
  padding: 12px 8px;
  background: transparent;
}
.phone-video .clip-ctl button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: #1a3a32;
}
.phone-video .clip-ctl button:focus-visible {
  outline: 2px solid #b65b40;
  outline-offset: 3px;
}
.onboarding-clip figcaption {
  max-width: 420px;
  margin: 18px auto 0;
}
.clip-error {
  padding: 8px 16px;
  font-size: 14px;
  color: #8f3024;
}
/* Coffee & Token header */
.site.ct-nav{position:sticky;top:0;z-index:40;background:#F7F4EF;border-bottom:1px solid rgba(0,0,0,.06);backdrop-filter:none;-webkit-backdrop-filter:none}
.ct-nav .site-in{max-width:none;height:auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:20px 48px;gap:16px}
.ct-nav .site-home{grid-column:2;font-family:"Instrument Serif",Georgia,serif;font-weight:800;font-size:clamp(15px,1.8vw,28px);letter-spacing:-.025em;color:#1a3a32;text-decoration:none;white-space:nowrap;text-align:center}
.ct-nav .site-nav{justify-self:end;display:flex;font-family:"Inter",system-ui,sans-serif;font-size:14px;font-weight:500}
.ct-nav .site-nav a{color:rgba(0,0,0,.5);text-decoration:none;transition:color .2s}
.ct-nav .site-nav a:hover{color:rgba(0,0,0,.9)}
.ct-nav a:focus-visible{outline:2px solid #1a3a32;outline-offset:3px}
@media (max-width:640px){.ct-nav .site-in{padding:16px 20px}}

/* Session cost figure */
#session-cost{scroll-margin-top:100px;--ct-green:#1a3a32;--ct-clay:#C2703D;--ct-sage:#8FA89A;--ct-oat:#DCD3C4;--ct-cream:#F7F4EF;--ct-ink:#1a3a32;--ct-mute:#5E6B64}
#session-cost .fig{background:var(--ct-cream);border-color:rgba(26,58,50,.12);border-radius:22px;padding:36px 40px;color:var(--ct-ink)}
#session-cost .label{font-family:"Instrument Serif",Georgia,serif;font-size:clamp(1.45rem,2.6vw,1.9rem);letter-spacing:-.01em;text-transform:none;color:var(--ct-ink);line-height:1.15;margin:0 0 24px}
#session-cost .k-plain{--k:var(--ct-green)}
#session-cost .k-save{--k:var(--ct-clay)}
#session-cost .k-wait{--k:var(--ct-sage)}
#session-cost .k-rule{--k:var(--ct-oat)}
#session-cost .pie-row{gap:28px 56px}
#session-cost .pie{background:conic-gradient(var(--ct-green) 0 88.4%,var(--ct-clay) 88.4% 100%)}
#session-cost .pie-hole{background:var(--ct-cream)}
#session-cost .pie-hole b{font-family:"Instrument Serif",Georgia,serif;font-weight:400;font-size:2.6rem;color:var(--ct-ink)}
#session-cost .pie-hole span{font-family:"Inter",system-ui,sans-serif;font-size:12px;letter-spacing:.02em;color:var(--ct-mute)}
#session-cost .pie-key{gap:20px}
#session-cost .pie-key li{gap:14px;padding-bottom:18px;border-bottom:1px solid rgba(26,58,50,.1)}
#session-cost .pie-key li:last-child{border-bottom:0;padding-bottom:0}
#session-cost .pie-key i{width:14px;height:14px;border-radius:50%;margin-top:7px}
#session-cost .pie-key b{font-family:"Inter",system-ui,sans-serif;font-weight:600;font-size:18px;font-variant-numeric:tabular-nums;color:var(--ct-ink)}
#session-cost .pie-key span{font-family:"Inter",system-ui,sans-serif;font-size:14.5px;line-height:1.5;color:var(--ct-mute);margin-top:2px}
#session-cost .track{margin-top:36px!important;padding-top:28px!important;border-top:1px solid rgba(26,58,50,.12)!important}
#session-cost .track .label{font-size:clamp(1.2rem,2vw,1.45rem);margin-bottom:16px}
#session-cost .timebar{height:22px;border-radius:999px;gap:3px;background:transparent;margin-bottom:16px}
#session-cost .timebar i:first-child{border-radius:999px 0 0 999px}
#session-cost .timebar i:last-child{border-radius:0 999px 999px 0}
#session-cost .legend{font-family:"Inter",system-ui,sans-serif;font-size:13.5px;color:var(--ct-mute);gap:8px 24px;margin:0}
#session-cost .legend i{width:10px;height:10px;border-radius:50%}
#session-cost figcaption{font-family:"Inter",system-ui,sans-serif;font-size:13.5px;color:var(--ct-mute)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) #session-cost .fig{box-shadow:none}}
@media (max-width:560px){
#session-cost .fig{padding:22px 18px;border-radius:16px}
#session-cost .pie-row{flex-direction:column;align-items:stretch}
#session-cost .pie-key{flex:none}
#session-cost .pie{margin:0 auto;width:190px;height:190px}
#session-cost .pie-hole{width:116px;height:116px}
#session-cost .legend{flex-direction:column}
}

/* Cocast launch waitlist */
.cocast-waitlist{position:relative;margin:72px auto 96px;padding:36px;background:#eee9df;border:1px solid #1a3a321c;border-radius:22px;color:#1a3a32}
.cocast-waitlist .waitlist-kicker{font-family:Inter,system-ui,sans-serif;font-size:13px;font-weight:600;margin:0 0 14px;color:#53675e}
.cocast-waitlist h2{font-family:"Instrument Serif",Georgia,serif;font-size:clamp(34px,5vw,48px);font-weight:400;line-height:1.1;margin:0 0 18px;letter-spacing:-.025em}
.cocast-waitlist>p:not(.waitlist-kicker){font-size:18px;line-height:1.6;margin-bottom:24px}
#waitlist-form{font-family:Inter,system-ui,sans-serif}
#waitlist-form>label{display:block;font-size:14px;font-weight:600;margin-bottom:8px}
.waitlist-fields{display:flex;gap:10px}
.waitlist-fields input{flex:1;min-width:0;border:1px solid #a5afa7;border-radius:10px;padding:14px 16px;font:16px Inter,system-ui,sans-serif;color:#1a3a32;background:#fffcf7}
.waitlist-fields button{border:0;border-radius:10px;padding:14px 20px;font:600 14px Inter,system-ui,sans-serif;background:#1a3a32;color:#fff;cursor:pointer;white-space:nowrap}
.waitlist-fields button:hover{background:#294f43}
.waitlist-fields button:disabled{opacity:.65;cursor:wait}
.waitlist-fields :focus-visible{outline:2px solid #1a3a32;outline-offset:3px}
#waitlist-form .waitlist-note{font-size:12px;line-height:1.6;margin:12px 0 0;color:#53675e}
#waitlist-status{font-size:14px;line-height:1.5;margin:14px 0 0}
#waitlist-status:empty{display:none}
#waitlist-status[data-error="true"]{color:#9b3024}
.waitlist-trap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
@media(max-width:560px){.cocast-waitlist{padding:24px 20px;margin-top:48px;margin-bottom:60px}.waitlist-fields{flex-direction:column}.waitlist-fields button{min-height:48px}}