/* Base reset (the artifact preview supplied these; a real page needs its own) */
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }
img, svg { max-width: 100%; }
[hidden] { display: none !important; }
:root { padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }

/* Layout: mascot-first hero (centred stage, speech bubble, floating task chips), then product, pricing, learning, FAQ. Light only. */
:root {
  color-scheme: light;
  --bg: #F5F6F8; --surface: #FFFFFF; --ink: #14171F; --text-2: #4B5363; --muted: #5E6675; --line: #E3E6EB;
  --blue: #3046D9; --blue-press: #2336B8; --blue-tint: #E4E8FC;
  --lime: #86C341; --lime-soft: #C9E3A6; --lime-tint: #EEF6E3; --lime-ink: #365C16;
  --wall: #EDEFF3; --dot: #D5D9E0;
  --green: #0F7A57; --amber: #F08C00; --red: #C4261A;
  --ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
body { background: var(--bg); color: var(--ink); font: 16px/1.55 var(--ui); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
.band { padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.wrap { max-width: 1080px; margin: 0 auto; }
a { color: var(--blue); }
a:hover { color: var(--blue-press); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.mono { font-family: var(--mono); }
h1, h2, h3 { text-wrap: balance; margin: 0; }
p { margin: 0; }

/* header */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--bg); }
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: rgba(245, 246, 248, .9); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.top .wrap { display: flex; align-items: center; gap: 20px; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 20px; letter-spacing: -0.02em; color: var(--ink); text-decoration: none; }
.brand:hover { color: var(--ink); }
.brand { align-items: flex-end; gap: 1px; font-size: 30px; }
/* The Yesboss lockup: the goblin-on-the-Y mark at 0.9 of the wordmark, as on the brand canvas. */
.brand .mark { width: .9em; height: auto; transition: transform .2s ease-out; }
.brand .word { font-family: 'Bricolage Grotesque', var(--ui); font-weight: 800; line-height: 1; letter-spacing: -0.045em; margin-bottom: -0.16em; }
.brand:hover .mark { transform: rotate(-6deg); }
.top nav { display: flex; gap: 22px; margin-left: auto; font-size: 15px; }
.top nav a { color: var(--text-2); text-decoration: none; }
.top nav a:hover { color: var(--ink); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 20px; border-radius: 8px; font: 600 15px var(--ui); text-decoration: none; border: 0; cursor: pointer; transition: transform .15s ease-out, box-shadow .15s ease-out, background .15s; }
.btn.primary { background: var(--ink); color: #FFFFFF; border: 2px solid var(--ink); }
.btn.primary:hover { background: var(--ink); color: var(--lime); transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--lime), 4px 4px 0 2px var(--ink); }
.btn.primary:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--lime); }
.btn.ghost { background: var(--surface); color: var(--ink); border: 1px solid #CDD2DA; }
.btn.ghost:hover { border-color: var(--ink); color: var(--ink); }
.btn.bot { background: var(--lime); color: var(--ink); border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); }
.btn.bot:hover { color: var(--ink); transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.btn.bot:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }
@media (max-width: 640px) { .top nav { display: none; } .top .btn { margin-left: auto; height: 40px; padding: 0 14px; } }

/* ========== HERO ========== */
.hero { position: relative; padding-block: 28px 72px; background-color: var(--bg); background-image: radial-gradient(var(--dot) 1.2px, transparent 1.2px); background-size: 22px 22px; border-bottom: 2px solid var(--ink); overflow: hidden; }
.hero .wrap { display: flex; flex-direction: column; align-items: center; text-align: center; }
.stage { position: relative; width: min(640px, 100%); height: 440px; }
.bot-wrap { position: absolute; left: 50%; top: 92px; width: 230px; margin-left: -115px; cursor: pointer; animation: float 4.2s ease-in-out infinite; -webkit-tap-highlight-color: transparent; }
.bot-wrap svg { display: block; width: 100%; height: auto; overflow: visible; }
.bot-wrap:focus-visible { outline-offset: 8px; border-radius: 24px; }
.floor { position: absolute; left: 50%; top: 392px; width: 190px; height: 22px; margin-left: -95px; border-radius: 50%; background: rgba(20, 23, 31, .14); animation: floor 4.2s ease-in-out infinite; }
@keyframes float { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-16px) rotate(-1.5deg); } }
@keyframes floor { 0%, 100% { transform: scaleX(1); opacity: 1; } 50% { transform: scaleX(.78); opacity: .6; } }
.bot-wrap.boop { animation: boop .5s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes boop { 0% { transform: scale(1); } 30% { transform: scale(.9, 1.08); } 60% { transform: scale(1.06, .94); } 100% { transform: scale(1); } }

/* faces: one group per mood, the svg's data-mood picks which shows */
#bot [data-face] { display: none; }
#bot[data-mood="neutral"] [data-face="neutral"],
#bot[data-mood="happy"] [data-face="happy"],
#bot[data-mood="side"] [data-face="side"],
#bot[data-mood="think"] [data-face="think"],
#bot[data-mood="wow"] [data-face="wow"] { display: inline; }
.lids { transform-box: fill-box; transform-origin: center; transition: transform 90ms ease-in; }
.lids.shut { transform: scaleY(.08); }
.halo { transform-box: fill-box; transform-origin: center; animation: halo 2.2s ease-out infinite; }
@keyframes halo { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(3.2); opacity: 0; } }
.bulb { animation: bulb 2.2s ease-in-out infinite; }
@keyframes bulb { 0%, 100% { fill: #86C341; } 50% { fill: #F4FFC4; } }
.think-dot { animation: dot 1.2s ease-in-out infinite; }
.think-dot:nth-child(2) { animation-delay: .15s; }
.think-dot:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 60%, 100% { opacity: 1; } 30% { opacity: .2; } }

.say { position: absolute; top: 8px; left: calc(50% + 70px); width: 250px; text-align: left; background: var(--surface); border: 2px solid var(--ink); border-radius: 14px 14px 14px 4px; box-shadow: 4px 4px 0 var(--ink); padding: 12px 14px; font: 500 14px/1.45 var(--mono); min-height: 74px; z-index: 2; }
.say::after { content: ""; position: absolute; left: 18px; bottom: -13px; width: 18px; height: 13px; background: var(--surface); border-left: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: skewX(-35deg); transform-origin: top left; }
.say .who { display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--muted); margin-bottom: 4px; }
.caret { display: inline-block; width: 8px; height: 15px; background: var(--ink); vertical-align: -2px; margin-left: 2px; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }

.chipf { position: absolute; display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; font-size: 13px; box-shadow: 0 10px 24px -12px rgba(20, 23, 31, .35); white-space: nowrap; animation: drift 6s ease-in-out infinite; }
.chipf .id { font: 500 11px var(--mono); color: var(--muted); }
.chipf.a { left: 0; top: 150px; }
.chipf.b { left: 18px; top: 300px; animation-delay: -2s; }
.chipf.c { right: 0; top: 250px; animation-delay: -4s; }
.nag { font: 700 11px var(--mono); letter-spacing: .03em; background: var(--lime); border: 1.5px solid var(--ink); border-radius: 4px; padding: 1px 6px; }
.donep { display: inline-flex; align-items: center; gap: 4px; color: var(--green); font-weight: 600; }
.overp { display: inline-flex; align-items: center; gap: 4px; color: var(--red); font-weight: 600; }
@keyframes drift { 0%, 100% { transform: translate(0, 0) rotate(-2deg); } 50% { transform: translate(6px, -10px) rotate(1deg); } }

.hero h1 { font-size: clamp(40px, 6.4vw, 72px); line-height: 1; font-weight: 800; letter-spacing: -0.04em; max-width: 14ch; margin-top: 8px; isolation: isolate; }
.hero h1 em { font-style: normal; position: relative; white-space: nowrap; }
.hero h1 em::after { content: ""; position: absolute; left: -2%; right: -2%; bottom: .06em; height: .32em; background: var(--lime); z-index: -1; border-radius: 3px; transform: skewX(-8deg); }
.hero .lede { font-size: 19px; color: var(--text-2); margin-top: 20px; max-width: 36em; }
.hero .ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 28px; }
.hero .fine { margin-top: 14px; font: 500 13px var(--mono); color: var(--muted); }

@media (max-width: 680px) {
  .stage { height: 380px; }
  .bot-wrap { width: 172px; margin-left: -86px; top: 124px; }
  .floor { top: 352px; width: 150px; margin-left: -75px; }
  .say { left: auto; right: 0; top: 0; width: min(250px, 78%); }
  .say::after { left: 30%; }
  .chipf.b, .chipf.c { display: none; }
  .chipf.a { top: 112px; left: 0; }
}

/* ========== SECTIONS ========== */
section.block { padding-block: 80px; }
.eyebrow { font: 700 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--blue); }
.sec-head { display: flex; flex-direction: column; gap: 12px; max-width: 660px; margin-bottom: 40px; }
.sec-head h2 { font-size: clamp(30px, 4.2vw, 46px); line-height: 1.05; font-weight: 800; letter-spacing: -0.035em; }
.sec-head p { font-size: 18px; color: var(--text-2); }

/* how it works: steps + live chat */
.how { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
@media (max-width: 860px) { .how { grid-template-columns: minmax(0, 1fr); gap: 32px; } }
.steps { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; counter-reset: s; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.steps li:last-child { border-bottom: 0; }
.steps li::before { content: counter(s); width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; font: 700 15px var(--mono); background: var(--surface); border: 2px solid var(--ink); }
.steps h3 { font-size: 19px; letter-spacing: -0.01em; }
.steps p { color: var(--text-2); font-size: 15px; margin-top: 4px; }

.mock { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: 0 24px 48px -24px rgba(20,23,31,.25); }
.mock-head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: left; }
.av { width: 34px; height: 34px; border-radius: 999px; display: grid; place-items: center; font-size: 12px; font-weight: 700; flex: none; background: #E3F4EC; color: #0E5E43; }
.mock-head b { font-size: 15px; }
.mock-head div span { display: block; font-size: 12px; color: var(--muted); }
.wall { background-color: var(--wall); background-image: radial-gradient(var(--dot) 1px, transparent 1px); background-size: 16px 16px; padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 8px; text-align: left; }
.bub { position: relative; max-width: 82%; padding: 6px 10px; border-radius: 0 10px 10px 10px; background: var(--surface); font-size: 15px; line-height: 21px; box-shadow: 0 1px 1px rgba(20,23,31,.06); }
.bub::before { content: ""; position: absolute; left: -7px; top: 0; border-top: 9px solid var(--surface); border-left: 8px solid transparent; }
.bub.out { align-self: flex-end; background: var(--blue-tint); border-radius: 10px 0 10px 10px; }
.bub.out::before { left: auto; right: -7px; border-top-color: var(--blue-tint); border-left: 0; border-right: 8px solid transparent; }
.bub .who { font-size: 13px; font-weight: 600; color: var(--blue-press); }
.bub .t { float: right; margin: 6px 0 -4px 12px; font-size: 11px; color: var(--muted); }
.card { margin-top: 6px; background: var(--surface); border: 2px solid var(--ink); border-radius: 12px; overflow: hidden; box-shadow: 4px 4px 0 var(--ink); }
.strip { background: var(--ink); color: var(--lime); display: flex; align-items: center; gap: 8px; padding: 7px 12px; font: 500 12px var(--mono); }
.strip .when { margin-left: auto; color: #A9B0BC; }
.card-body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 10px; }
.card-body h3 { font-size: 17px; line-height: 23px; }
.kv { display: grid; grid-template-columns: 84px minmax(0, 1fr); row-gap: 6px; font-size: 14px; margin: 0; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }
.prio { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 999px; background: #FEF1DE; color: #A44A00; font-size: 12px; font-weight: 600; }
.prio i { width: 8px; height: 8px; border-radius: 2px; background: var(--amber); }
.acts { display: flex; gap: 8px; }
.acts span { flex: 1; height: 38px; border-radius: 8px; display: grid; place-items: center; font-size: 14px; font-weight: 600; }
.acts .c { background: var(--blue); color: #FFFFFF; }
.acts .e { border: 1px solid #CDD2DA; }
.acts .d { color: var(--text-2); }

.feats { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin-top: 64px; }
.feats div { background: var(--surface); padding: 22px; display: flex; flex-direction: column; gap: 8px; }
.feats h3 { font-size: 16px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.feats p { font-size: 15px; color: var(--text-2); }
.soon { white-space: nowrap; font: 700 10px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); border: 1px solid var(--line); border-radius: 4px; padding: 2px 5px; }

/* pricing */
.pricing { background: var(--surface); border-block: 2px solid var(--ink); }
.calc { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 16px 20px; margin-bottom: 40px; }
.calc label { font-weight: 600; }
.calc input[type="range"] { flex: 1 1 220px; accent-color: var(--ink); min-width: 0; }
.calc output { font: 700 20px var(--mono); font-variant-numeric: tabular-nums; min-width: 4.5ch; }
.calc span { font-size: 14px; color: var(--muted); }
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
@media (max-width: 920px) { .plans { grid-template-columns: minmax(0, 1fr); max-width: 480px; } }
.plan { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 28px 24px 24px; display: flex; flex-direction: column; gap: 18px; transition: transform .2s ease-out, box-shadow .2s ease-out; }
.plan:hover { transform: translateY(-4px); box-shadow: 0 18px 36px -20px rgba(20, 23, 31, .35); }
.plan.learn { background: var(--lime-tint); border: 2px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); }
.plan.learn:hover { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 var(--ink); }
.plan-top { display: flex; align-items: center; gap: 14px; }
.mini { width: 64px; height: 64px; flex: none; border-radius: 16px; display: grid; place-items: center; background: var(--lime); border: 2px solid var(--ink); }
.mini svg { width: 48px; height: 48px; overflow: visible; }
.plan:hover .mini svg { animation: hop .6s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes hop { 0% { transform: translateY(0); } 35% { transform: translateY(-10px) rotate(-6deg); } 70% { transform: translateY(2px) rotate(3deg); } 100% { transform: translateY(0); } }
.plan h3 { font-size: 24px; letter-spacing: -0.02em; }
.plan .mood { display: block; font: 500 12px var(--mono); color: var(--muted); margin-top: 2px; }
.plan .pitch { color: var(--text-2); font-size: 15px; }
.price { display: flex; align-items: baseline; gap: 6px; }
.price b { font-size: 56px; font-weight: 800; letter-spacing: -0.045em; line-height: 1; font-variant-numeric: tabular-nums; }
.price span { color: var(--muted); font-size: 15px; }
.total { font-size: 14px; color: var(--text-2); font-variant-numeric: tabular-nums; margin-top: -8px; }
.total strong { color: var(--ink); }
.sweep { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; background: var(--bg); border: 1px solid var(--line); font: 500 13px var(--mono); }
.plan.learn .sweep { background: var(--surface); }
.sweep svg { flex: none; }
.plan ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.plan li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; }
.plan li svg { margin-top: 3px; color: var(--green); }
.plan li.inc { color: var(--muted); }
.plan .btn { margin-top: auto; width: 100%; }
.tag { position: absolute; top: -14px; right: 18px; font: 700 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; background: var(--ink); color: var(--lime); padding: 5px 9px; border-radius: 6px; }
.plan-note { margin-top: 24px; font-size: 14px; color: var(--muted); max-width: 70ch; }

/* learning */
.learn-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
@media (max-width: 860px) { .learn-grid { grid-template-columns: minmax(0, 1fr); } }
.lessons { display: flex; flex-direction: column; gap: 12px; }
.lesson { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.lesson .from { font: 500 12px var(--mono); color: var(--muted); }
.lesson p { font-size: 15px; }
.lesson .ok { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--green); font-weight: 600; }
.nope { position: relative; background: var(--surface); border: 2px solid var(--ink); border-radius: 14px; box-shadow: 6px 6px 0 var(--ink); padding: 24px; display: flex; flex-direction: column; gap: 14px; }
.nope .peek { position: absolute; top: -46px; right: 22px; width: 72px; }
.nope h3 { font-size: 19px; }
.nope ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; font-size: 15px; }

/* start + faq */
.start { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; list-style: none; padding: 0; margin: 0; }
@media (max-width: 820px) { .start { grid-template-columns: minmax(0, 1fr); } }
.start li { border-top: 2px solid var(--ink); padding-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.start b { font-size: 17px; }
.start p { color: var(--text-2); font-size: 15px; }
.faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; align-items: start; }
.faq-col { display: flex; flex-direction: column; border-top: 1px solid var(--line); min-width: 0; }
@media (max-width: 820px) { .faq { grid-template-columns: minmax(0, 1fr); } .faq-col + .faq-col { border-top: 0; } }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; padding: 18px 0; font-weight: 600; font-size: 17px; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 700 20px var(--mono); color: var(--blue); }
.faq details[open] summary::after { content: "−"; }
.faq details p { padding-bottom: 18px; color: var(--text-2); max-width: 62ch; }

/* footer with the sleeping bot */
footer { background: var(--lime); border-top: 2px solid var(--ink); padding-block: 40px 48px; }
footer .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.sleeper { position: relative; width: 84px; flex: none; }
.sleeper svg { width: 84px; display: block; }
.zz { position: absolute; top: -6px; right: -10px; font: 700 16px var(--mono); color: var(--ink); opacity: 0; animation: zz 3s ease-out infinite; }
.zz:nth-of-type(2) { animation-delay: 1s; right: -22px; font-size: 13px; }
.zz:nth-of-type(3) { animation-delay: 2s; right: -2px; font-size: 11px; }
@keyframes zz { 0% { transform: translate(0, 10px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translate(14px, -26px); opacity: 0; } }
footer .say2 { font: 700 18px var(--mono); }
footer small { display: block; font: 500 13px var(--mono); color: var(--lime-ink); margin-top: 4px; }

/* the chat demo plays like a real conversation */
.chat-demo { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
#demoWall { height: 480px; overflow: hidden; justify-content: flex-end; }
.day { align-self: center; background: var(--surface); color: var(--text-2); font-size: 12px; font-weight: 600; padding: 4px 12px; border-radius: 8px; box-shadow: 0 1px 1px rgba(20,23,31,.06); margin-bottom: auto; }
.bub.typing { display: inline-flex; align-self: flex-start; gap: 4px; padding: 12px 14px; }
.bub.out.typing { align-self: flex-end; }
.bub.typing i, .reading .dots i { width: 7px; height: 7px; border-radius: 999px; background: #8C93A1; animation: tdot 1.1s ease-in-out infinite; }
.bub.typing i:nth-child(2), .reading .dots i:nth-child(2) { animation-delay: .15s; }
.bub.typing i:nth-child(3), .reading .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes tdot { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-4px); } }
.ticks { vertical-align: -1px; }
.reading { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; font: 500 12px var(--mono); color: var(--lime-ink); background: var(--lime-tint); border: 1px dashed #A9C23A; padding: 6px 12px; border-radius: 999px; }
.reading .dots { display: inline-flex; gap: 3px; margin-left: 2px; }
.reading .dots i { width: 4px; height: 4px; background: var(--lime-ink); }
.pop { animation: pop .38s cubic-bezier(.3, 1.5, .5, 1) both; transform-origin: left bottom; }
.bub.out.pop { transform-origin: right bottom; }
.pill.pop, .reading.pop { transform-origin: center; }
@keyframes pop { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }
.card.slide { animation: cardin .5s cubic-bezier(.2, .9, .3, 1.2) both; }
@keyframes cardin { from { transform: translateY(18px) rotate(-1deg); opacity: 0; } to { transform: none; opacity: 1; } }
#demoConfirm.press { animation: press .5s ease-out; }
@keyframes press { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(20, 23, 31, .45); } 35% { transform: scale(.92); } 100% { transform: scale(1); box-shadow: 0 0 0 14px rgba(20, 23, 31, 0); } }
#doneBody:not([hidden]) { animation: pop .4s cubic-bezier(.3, 1.5, .5, 1) both; transform-origin: top center; }
.done-line { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--green); }
.done-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--bg); border-radius: 8px; }
.done-row div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.done-row .mono { font-size: 12px; color: var(--text-2); }
.done-row b { font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.done-row .open { height: 34px; padding: 0 12px; border: 1px solid #CDD2DA; border-radius: 8px; display: grid; place-items: center; font-size: 14px; font-weight: 600; background: var(--surface); }
.pill { align-self: center; display: inline-flex; align-items: center; gap: 6px; background: var(--surface); color: var(--text-2); font-size: 12px; padding: 5px 12px; border-radius: 999px; box-shadow: 0 1px 1px rgba(20,23,31,.06); }
.replay { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; font: 600 14px var(--ui); background: none; border: 0; color: var(--ink); cursor: pointer; padding: 8px 2px; min-height: 44px; }
.replay:hover { text-decoration: underline; text-underline-offset: 3px; }
.steps li { transition: opacity .3s ease-out; }
.steps li::before { transition: background .3s ease-out, transform .3s cubic-bezier(.3, 1.6, .5, 1); }
.steps.playing li { opacity: .42; }
.steps.playing li.on { opacity: 1; }
.steps li.on::before { background: var(--lime); transform: scale(1.12) rotate(-6deg); }
@media (max-width: 520px) { #demoWall { height: 540px; padding-inline: 14px; } }

/* kanban showcase */
.board-wrap { position: relative; margin-top: 56px; }
.board-peek { position: absolute; top: -52px; right: 32px; width: 78px; z-index: 1; }
.board-peek svg { display: block; width: 100%; height: auto; }
.board { display: flex; gap: 12px; overflow-x: auto; padding: 18px; background: var(--surface); border: 2px solid var(--ink); border-radius: 16px; box-shadow: 6px 6px 0 var(--ink); }
.col { flex: 1 0 228px; background: #E9ECF1; border-radius: 12px; padding: 10px; display: flex; flex-direction: column; gap: 8px; min-height: 380px; }
.col h3 { font-size: 14px; display: flex; align-items: center; gap: 8px; padding: 2px 4px; }
.col h3 span { font-size: 12px; font-weight: 500; background: var(--surface); color: var(--text-2); border-radius: 999px; padding: 1px 8px; font-variant-numeric: tabular-nums; }
.kc { background: var(--surface); border-radius: 8px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 1px 2px rgba(20,23,31,.08), 0 1px 1px rgba(20,23,31,.04); font-size: 14px; transition: transform .25s ease-out, box-shadow .25s ease-out; }
.kc .row { display: flex; align-items: center; gap: 6px; }
.bar { width: 28px; height: 6px; border-radius: 3px; flex: none; }
.pl { font-size: 11px; font-weight: 600; }
.kid { margin-left: auto; font: 500 11px var(--mono); color: var(--muted); }
.kt { font-weight: 500; line-height: 20px; }
.due { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 7px; border-radius: 6px; font-size: 12px; font-weight: 600; background: #F0F2F5; color: var(--text-2); white-space: nowrap; }
.due.over { background: #FDECEA; color: #B0221A; }
.due.ok { background: #E3F4EC; color: #0E6B4C; }
.avs { margin-left: auto; display: flex; padding-left: 6px; }
.avs b { width: 24px; height: 24px; border-radius: 999px; display: grid; place-items: center; font-size: 10px; font-weight: 700; border: 2px solid var(--surface); margin-left: -6px; }
.kc .nag { align-self: flex-start; }
.kc { position: relative; }
.kc.lift { transform: rotate(-3deg) scale(1.05); box-shadow: 0 18px 30px -12px rgba(20,23,31,.4); z-index: 3; }
.col.ghost { background: transparent; border: 2px dashed #CDD2DA; align-items: center; justify-content: center; text-align: center; gap: 10px; color: var(--text-2); flex-basis: 200px; }
.col.ghost b { font-size: 15px; color: var(--ink); display: flex; align-items: center; gap: 6px; }
.col.ghost p { font-size: 13px; max-width: 18ch; }
.col.ghost .kc-tag { font: 700 10px var(--mono); letter-spacing: .06em; text-transform: uppercase; background: var(--ink); color: var(--lime); padding: 3px 7px; border-radius: 4px; }
.kc.drop { animation: drop .5s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes drop { from { transform: rotate(-3deg) scale(1.05) translateY(-10px); } to { transform: none; } }
.addt { font-size: 14px; color: var(--text-2); padding: 6px 8px; display: flex; align-items: center; gap: 6px; }
.plan-chip { font: 700 11px var(--mono); letter-spacing: .05em; text-transform: uppercase; background: var(--ink); color: var(--lime); padding: 3px 8px; border-radius: 4px; vertical-align: middle; }

/* smooth jumps to sections, clear of the sticky header */
html { scroll-behavior: smooth; scroll-padding-top: calc(76px + env(safe-area-inset-top, 0px)); }
[id] { scroll-margin-top: calc(76px + env(safe-area-inset-top, 0px)); }

/* text motion: headline words bounce up, highlight swipes in */
.w { display: inline-block; animation: rise .8s cubic-bezier(.2, .9, .3, 1.35) both; animation-delay: calc(var(--i) * 80ms + 120ms); }
@keyframes rise { from { transform: translateY(.45em) rotate(5deg) scale(.94); } to { transform: none; } }
.hero h1 em::after { transform-origin: left center; animation: swipe .6s cubic-bezier(.6, 0, .2, 1) 1s both; }
@keyframes swipe { from { transform: skewX(-8deg) scaleX(0); } to { transform: skewX(-8deg) scaleX(1); } }
.hero h1 em .w { animation-name: rise, wiggle; animation-duration: .8s, .6s; animation-delay: calc(var(--i) * 80ms + 120ms), 1.7s; animation-timing-function: cubic-bezier(.2, .9, .3, 1.35), ease-in-out; }
@keyframes wiggle { 0%, 100% { transform: none; } 25% { transform: rotate(-4deg); } 75% { transform: rotate(3deg); } }

/* section headings: slide up on arrival, marker swipes under a key word */
.sec-head h2 { transition: transform .7s cubic-bezier(.2, .9, .3, 1.2), opacity .5s ease-out; }
.sec-head h2.wait { transform: translateY(28px); opacity: 0; }
mark { background: none; color: inherit; position: relative; isolation: isolate; white-space: nowrap; }
mark::after { content: ""; position: absolute; left: -3%; right: -3%; bottom: .05em; height: .34em; background: var(--lime); z-index: -1; border-radius: 3px; transform: skewX(-8deg); transform-origin: left center; transition: transform .6s cubic-bezier(.6, 0, .2, 1) .35s; }
h2.wait mark::after { transform: skewX(-8deg) scaleX(0); }
.eyebrow { display: inline-block; min-height: 1em; }

/* price totals bump when the team size changes */
.bump { display: inline-block; animation: bump .35s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.18); color: var(--blue); } 100% { transform: scale(1); } }

.trial { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px; font: 700 12px var(--mono); letter-spacing: .06em; text-transform: uppercase; background: var(--ink); color: var(--lime); padding: 7px 12px; border-radius: 999px; }
.trial i { width: 8px; height: 8px; border-radius: 999px; background: var(--lime); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .kc { transition: none; }
  .w, .hero h1 em::after, .hero h1 em .w, .bump, .trial i, .pop, .kc.drop, .card.slide, #demoConfirm.press, #doneBody, .bub.typing i, .reading .dots i { animation: none !important; }
  .steps li, .steps li::before { transition: none; }
  .sec-head h2, mark::after { transition: none; }
  .bot-wrap, .floor, .halo, .bulb, .think-dot, .caret, .chipf, .zz, .plan:hover .mini svg, .bot-wrap.boop { animation: none !important; }
  .halo { opacity: 0; }
  .zz { opacity: 1; }
  .plan, .btn, .lids { transition: none; }
}

/* get the app: a phone with Yesboss on its home screen */
.get-app { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 56px; align-items: center; }
@media (max-width: 860px) { .get-app { grid-template-columns: minmax(0, 1fr); gap: 40px; } .phone { margin: 0 auto; } }
.phone { width: 260px; height: 500px; box-sizing: border-box; background: var(--ink); border-radius: 40px; padding: 10px; box-shadow: 8px 8px 0 var(--lime), 8px 8px 0 2px var(--ink); }
.phone-screen { position: relative; height: 100%; border-radius: 31px; background-color: var(--wall); background-image: radial-gradient(var(--dot) 1px, transparent 1px); background-size: 14px 14px; padding: 52px 16px 16px; box-sizing: border-box; overflow: hidden; }
.icons { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 8px; }
.ic { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 10px; color: var(--text-2); min-height: 62px; }
.ic i { width: 46px; height: 46px; border-radius: 12px; background: #D9DDE3; display: block; }
.ic.ic-nb i { position: relative; background: var(--lime); border: 2px solid var(--ink); display: grid; place-items: center; box-sizing: border-box; animation: iconhop 3.4s ease-in-out infinite; }
.ic.ic-nb span { color: var(--ink); font-weight: 700; }
.badge { position: absolute; top: -8px; right: -8px; min-width: 20px; height: 20px; padding: 0 5px; box-sizing: border-box; border-radius: 999px; background: #C4261A; color: #FFFFFF; font: 700 11px var(--ui); display: grid; place-items: center; border: 2px solid var(--wall); }
@keyframes iconhop { 0%, 78%, 100% { transform: none; } 84% { transform: translateY(-9px) rotate(-4deg); } 90% { transform: translateY(0) scale(1.06, .94); } 95% { transform: none; } }
.toast-n { position: absolute; left: 12px; right: 12px; bottom: 18px; background: var(--surface); border: 2px solid var(--ink); border-radius: 14px; box-shadow: 3px 3px 0 var(--ink); padding: 10px 12px; font-size: 12px; line-height: 1.4; animation: toastin 6.8s ease-in-out infinite; }
.toast-n b { display: block; font-size: 11px; font-family: var(--mono); letter-spacing: .04em; text-transform: uppercase; margin-bottom: 2px; }
@keyframes toastin { 0%, 8% { transform: translateY(140%); opacity: 0; } 16%, 70% { transform: none; opacity: 1; } 80%, 100% { transform: translateY(140%); opacity: 0; } }
.installer { display: flex; flex-direction: column; gap: 14px; margin-bottom: 24px; }
.inst-tabs { display: inline-flex; align-self: flex-start; gap: 4px; padding: 4px; background: var(--surface); border: 2px solid var(--ink); border-radius: 12px; box-shadow: 3px 3px 0 var(--ink); flex-wrap: wrap; }
.inst-tabs button { height: 38px; padding: 0 14px; border: 0; border-radius: 8px; background: transparent; font: 600 14px var(--ui); color: var(--text-2); cursor: pointer; }
.inst-tabs button[aria-selected="true"] { background: var(--ink); color: var(--lime); }
.inst-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; counter-reset: inst; }
.inst-step { counter-increment: inst; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px; display: grid; grid-template-columns: 168px minmax(0, 1fr); align-items: center; gap: 14px; transition: border-color .25s, box-shadow .25s, transform .25s; }
.inst-step.on { border-color: var(--ink); box-shadow: 4px 4px 0 var(--ink); transform: translate(-2px, -2px); }
@media (max-width: 460px) { .inst-step { grid-template-columns: minmax(0, 1fr); } }
.inst-step p { font-size: 14px; line-height: 1.45; color: var(--text-2); }
.inst-step p::before { content: counter(inst); display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 6px; border-radius: 6px; background: var(--ink); color: var(--lime); font: 700 11px var(--mono); vertical-align: 1px; }
.inst-step b { color: var(--ink); }
.inst-note { font-size: 13px; color: var(--text-2); background: var(--lime-tint); border: 1px solid #DCEBA8; border-radius: 10px; padding: 8px 12px; }
.inst-mini { height: 76px; border-radius: 10px; background-color: var(--wall); background-image: radial-gradient(var(--dot) 1px, transparent 1px); background-size: 12px 12px; display: flex; align-items: center; justify-content: center; padding: 10px; overflow: hidden; }
.m-bar { display: flex; align-items: center; gap: 6px; width: 100%; height: 34px; padding: 0 10px; box-sizing: border-box; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; font: 500 12px var(--mono); color: var(--ink); }
.m-url { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-dots { color: var(--text-2); display: flex; }
.m-inst { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; }
.m-toolbar { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 40px; padding: 0 12px; box-sizing: border-box; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; color: var(--text-2); font-size: 16px; }
.m-toolbar i { font-style: normal; }
.m-toolbar b { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; color: var(--ink); }
.m-sheet { display: flex; flex-direction: column; width: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.m-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; height: 21px; padding: 0 8px; font-size: 11px; white-space: nowrap; color: var(--text-2); border-bottom: 1px solid var(--line); }
.m-row:last-child { border-bottom: 0; }
.m-row.hot { color: var(--ink); font-weight: 700; }
.m-home { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.m-app { position: relative; display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 12px; background: var(--lime); border: 2px solid var(--ink); box-sizing: border-box; }
.m-app em { position: absolute; top: -7px; right: -7px; min-width: 18px; height: 18px; border-radius: 999px; background: #C4261A; color: #FFFFFF; font: 700 10px var(--ui); font-style: normal; display: grid; place-items: center; border: 2px solid var(--wall); }
.m-lbl { font-size: 11px; font-weight: 700; }
.m-window { display: flex; flex-direction: column; width: 100%; height: 60px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.m-title { display: flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px; background: var(--lime); border-bottom: 2px solid var(--ink); font: 700 12px var(--ui); }
.m-title svg { width: 16px; height: 16px; }
.m-body { flex: 1; background-image: linear-gradient(var(--line) 1px, transparent 1px); background-size: 100% 12px; margin: 8px; }
/* the thing to tap: lime, outlined, and pulsing on the active step */
.hot { background: var(--lime); outline: 2px solid var(--ink); outline-offset: -2px; }
.m-row.hot { outline-offset: -2px; }
.inst-step.on .hot { animation: tap 1.6s ease-out infinite; }
@keyframes tap { 0% { box-shadow: 0 0 0 0 rgba(20, 23, 31, .45); } 70% { box-shadow: 0 0 0 10px rgba(20, 23, 31, 0); } 100% { box-shadow: 0 0 0 0 rgba(20, 23, 31, 0); } }
@media (prefers-reduced-motion: reduce) { .inst-step, .inst-step.on { transition: none; transform: none; } .inst-step.on .hot { animation: none; } }
@media (prefers-reduced-motion: reduce) { .ic.ic-nb i, .toast-n { animation: none; } }

/* policy and contact pages */
.legal { padding-block: 48px 72px; }
.legal-doc { max-width: 760px; display: flex; flex-direction: column; gap: 28px; }
.legal-doc h1 { font-size: clamp(34px, 5vw, 48px); line-height: 1.05; font-weight: 800; letter-spacing: -0.03em; }
.legal-meta { font: 500 13px var(--mono); color: var(--muted); margin-top: -18px; }
.legal-lede { font-size: 19px; color: var(--text-2); margin-top: -14px; }
.legal-doc section { display: flex; flex-direction: column; gap: 10px; }
.legal-doc h2 { font-size: 20px; letter-spacing: -0.01em; }
.legal-doc p, .legal-doc li { color: var(--text-2); max-width: 68ch; }
.legal-doc b { color: var(--ink); }
.legal-doc ul { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.legal-doc a { color: var(--ink); text-decoration-color: var(--lime-ink); text-underline-offset: 3px; }
.legal-summary { background: var(--lime-tint); border: 2px solid var(--ink); border-radius: 14px; box-shadow: 5px 5px 0 var(--ink); padding: 20px 22px; display: flex; flex-direction: column; gap: 10px; }
.legal-summary h2 { font-size: 17px; }
.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.legal-doc table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 14px; }
.legal-doc th, .legal-doc td { text-align: left; vertical-align: top; padding: 10px 14px; border-bottom: 1px solid var(--line); color: var(--text-2); }
.legal-doc th { font: 700 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); background: var(--bg); }
.legal-doc tr:last-child td { border-bottom: 0; }
.legal-doc td:first-child { font-weight: 600; color: var(--ink); }
.legal-contact { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; }
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.contact-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 20px; display: flex; flex-direction: column; gap: 6px; min-width: 0; overflow-wrap: anywhere; }
.contact-card h2 { font-size: 16px; margin-bottom: 4px; }
.legal-doc .muted { color: var(--muted); font-size: 14px; }
.site-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; width: 100%; padding-top: 16px; border-top: 1px solid rgba(20, 23, 31, .25); font-size: 14px; }
.site-links a { color: var(--ink); font-weight: 600; }
.site-links span { margin-left: auto; color: var(--lime-ink); }
.legal-foot .wrap { flex-direction: column; align-items: flex-start; }

/* waitlist (until app signup is live) */
.waitlist { background: var(--lime-tint); border-block: 2px solid var(--ink); }
.wl-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
@media (max-width: 860px) { .wl-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; } }
.wl-copy { display: flex; flex-direction: column; gap: 14px; }
.wl-copy h2 { font-size: clamp(30px, 4.2vw, 46px); line-height: 1.05; font-weight: 800; letter-spacing: -0.035em; }
.wl-copy > p { font-size: 18px; color: var(--text-2); max-width: 34em; }
.wl-bot { display: flex; align-items: center; gap: 14px; margin-top: 8px; }
.wl-bot svg { width: 104px; height: auto; overflow: visible; flex: none; }
#wlBot[data-mood="think"] .wl-happy, #wlBot[data-mood="happy"] .wl-think { display: none; }
.wl-say { background: var(--surface); border: 2px solid var(--ink); border-radius: 12px 12px 12px 4px; padding: 6px 12px; font-size: 13px; box-shadow: 3px 3px 0 var(--ink); }
.wl-card { background: var(--surface); border: 2px solid var(--ink); border-radius: 16px; box-shadow: 6px 6px 0 var(--ink); padding: 24px; }
#waitlistForm { display: flex; flex-direction: column; gap: 8px; }
#waitlistForm label { font-size: 14px; font-weight: 600; margin-top: 6px; }
#waitlistForm .opt { font-weight: 400; color: var(--muted); font-size: 12px; margin-left: 4px; }
#waitlistForm input, #waitlistForm select { width: 100%; height: 46px; box-sizing: border-box; border: 1px solid #CDD2DA; border-radius: 8px; padding: 0 12px; font: 16px var(--ui); color: var(--ink); background: var(--surface); }
#waitlistForm input:focus, #waitlistForm select:focus { outline: 2px solid var(--lime); outline-offset: 0; border-color: var(--ink); }
.wl-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.wl-row > div { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
@media (max-width: 480px) { .wl-row { grid-template-columns: minmax(0, 1fr); } }
.wl-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
#waitlistForm .btn { margin-top: 12px; width: 100%; }
#waitlistForm .btn:disabled { opacity: .7; cursor: progress; transform: none; }
.wl-msg { min-height: 20px; font-size: 14px; color: var(--text-2); }
.wl-msg.err { color: var(--red); font-weight: 600; }
.wl-fine { font-size: 13px; color: var(--muted); }
.wl-hint { margin: -2px 0 4px; font-size: 13px; color: var(--muted); }
.wl-fine a { color: var(--ink); }
.wl-done { display: flex; flex-direction: column; gap: 8px; padding: 12px 4px; }
.wl-done h3 { font-size: 26px; letter-spacing: -0.02em; }
.wl-done p { color: var(--text-2); }

/* Yesboss actions (add-on) */
.act-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
@media (max-width: 860px) { .act-grid { grid-template-columns: minmax(0, 1fr); } }
.act-rules { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 12px; font-size: 15px; color: var(--text-2); }
.act-rules li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; }
.act-rules svg { margin-top: 3px; color: var(--green); }
.act-rules b { color: var(--ink); }
.act-price { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: center; border-top: 2px solid var(--ink); padding-top: 18px; }
.act-price > div { display: flex; align-items: baseline; gap: 8px; }
.act-price > div b { font-size: 40px; letter-spacing: -0.03em; }
.act-price > div span { color: var(--muted); font-size: 14px; }
.act-price p { flex: 1 1 260px; font-size: 14px; color: var(--text-2); }
.act-side { display: flex; flex-direction: column; gap: 20px; }
.draft { background: var(--surface); border: 2px solid var(--ink); border-radius: 14px; box-shadow: 6px 6px 0 var(--ink); padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.draft-task { font-size: 12px; color: var(--muted); }
.draft-head { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.draft-from { font-weight: 700; font-size: 15px; }
.draft-run { font-size: 11px; color: var(--lime-ink); background: var(--lime-tint); border-radius: 4px; padding: 2px 6px; }
.draft dl { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 6px 10px; margin: 0; font-size: 14px; }
.draft dt { color: var(--muted); }
.draft dd { margin: 0; overflow-wrap: anywhere; }
.draft-body { font-size: 14px; color: var(--text-2); border-left: 3px solid var(--line); padding-left: 12px; }
.att-chip { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; }
.draft-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.draft-btns .btn { height: 40px; padding: 0 16px; pointer-events: none; }
.tools ul { list-style: none; margin: 6px 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tools li { font-size: 14px; font-weight: 600; background: var(--surface); border: 2px solid var(--ink); border-radius: 999px; padding: 6px 12px; }
.tools .next li { font-weight: 500; border: 1px dashed var(--muted); color: var(--text-2); }
.tools-h { font: 700 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.tools-ask { font-size: 14px; color: var(--text-2); }
.tools-ask a { color: var(--ink); }

/* pricing: the add-on card, Yesboss with integrations orbiting it */
.addon { margin-top: 32px; position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); align-items: center; gap: 24px; background: var(--ink); color: #FFFFFF; border: 2px solid var(--ink); border-radius: 18px; box-shadow: 8px 8px 0 var(--lime); padding: 32px 36px; text-decoration: none; overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; }
.addon:hover { transform: translate(-2px, -2px); box-shadow: 10px 10px 0 var(--lime); }
.addon:focus-visible { outline: 3px solid var(--lime); outline-offset: 4px; }
.ao-copy { display: flex; flex-direction: column; gap: 12px; position: relative; z-index: 1; }
.ao-tag { align-self: flex-start; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: var(--lime); color: var(--ink); padding: 5px 9px; border-radius: 6px; }
.addon h3 { font-size: clamp(28px, 3.4vw, 40px); letter-spacing: -0.03em; line-height: 1.05; color: #FFFFFF; }
.addon h3 mark { color: var(--lime); }
.addon h3 mark::after { display: none; }
.ao-copy p { color: #C9CED8; font-size: 16px; max-width: 46ch; }
.ao-price { color: #FFFFFF !important; font-size: 17px !important; }
.ao-price b { color: var(--lime); }
.ao-cta { align-self: flex-start; margin-top: 4px; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 10px; background: var(--lime); color: var(--ink); font-weight: 700; }
.addon:hover .ao-cta span { transform: translateX(3px); }
.ao-cta span { transition: transform .2s ease; }

.ao-stage { position: relative; height: 340px; display: grid; place-items: center; }
.ao-core { position: relative; z-index: 2; width: 104px; height: 104px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle, rgba(200, 240, 60, .22), rgba(200, 240, 60, 0) 70%); }
.ao-bot { width: 78px; animation: aobob 3.2s ease-in-out infinite; }
.ao-bulb { animation: bulb 1.6s ease-in-out infinite; }
.ao-eyes { animation: aoblink 4.5s infinite; transform-origin: 24px 23px; }
@keyframes aobob { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-8px) rotate(2deg); } }
@keyframes aoblink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }

.ao-ring { --r: 92px; position: absolute; inset: 0; margin: auto; width: 0; height: 0; list-style: none; padding: 0; animation: aospin 28s linear infinite; }
.ao-ring.outer { --r: 152px; animation-duration: 40s; animation-direction: reverse; }
.ao-ring::before { content: ""; position: absolute; left: calc(-1 * var(--r)); top: calc(-1 * var(--r)); width: calc(2 * var(--r)); height: calc(2 * var(--r)); border-radius: 50%; border: 1px dashed rgba(200, 240, 60, .25); }
.ao-ring li { position: absolute; left: 0; top: 0; transform: rotate(var(--a)) translateY(calc(-1 * var(--r))) rotate(calc(-1 * var(--a))); }
.ao-ring li span { display: block; translate: -50% -50%; white-space: nowrap; font-size: 13px; font-weight: 700; color: var(--ink); background: #FFFFFF; border: 2px solid var(--lime); border-radius: 999px; padding: 6px 12px; box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .5); animation: aospin 28s linear infinite reverse; }
.ao-ring.outer li span { background: #1F2430; color: #E6E9EF; border-color: rgba(200, 240, 60, .55); font-weight: 600; animation-duration: 40s; animation-direction: normal; }
@keyframes aospin { to { transform: rotate(360deg); } }
/* Each label spins against its ring, so it stays upright; `translate` centres it and composes with that spin. */

@media (max-width: 860px) {
  .addon { grid-template-columns: minmax(0, 1fr); padding: 26px 22px; box-shadow: 6px 6px 0 var(--lime); }
  .ao-stage { height: 280px; order: -1; }
  .ao-ring { --r: 74px; }
  .ao-ring.outer { --r: 122px; }
  .ao-ring li span { font-size: 12px; padding: 5px 10px; }
}
@media (max-width: 380px) { .ao-ring.outer { --r: 110px; } }
@media (prefers-reduced-motion: reduce) {
  .ao-ring, .ao-ring li span, .ao-bot, .ao-bulb, .ao-eyes { animation: none; }
}

/* Yesboss actions demo */
.act-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; counter-reset: as; }
.act-steps li { counter-increment: as; display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-weight: 600; color: var(--muted); line-height: 1.3; }
.act-steps li::before { content: counter(as); width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font: 700 12px var(--mono); background: var(--surface); border: 2px solid var(--line); color: var(--muted); transition: background .3s, border-color .3s, color .3s; }
.act-steps li.past::before { border-color: var(--ink); color: var(--ink); }
.act-steps li.on { color: var(--ink); }
.act-steps li.on::before { background: var(--lime); border-color: var(--ink); color: var(--ink); }
.act-wall { height: 560px; justify-content: flex-end; overflow: hidden; }
/* Fixed height, newest at the bottom like a chat: items keep their size and older ones slide off the top. */
.act-wall > * { flex-shrink: 0; }
@media (max-width: 520px) { .act-wall { height: 600px; padding-inline: 12px; } .act-steps li { font-size: 11px; } }
.att-chip.in-bub { display: flex; margin-top: 6px; background: var(--bg); }
.do-it { align-self: flex-start; display: inline-flex; align-items: center; height: 38px; padding: 0 14px; border-radius: 8px; background: var(--lime); border: 2px solid var(--ink); font-size: 14px; font-weight: 700; }
.act-draft { box-shadow: 4px 4px 0 var(--ink); padding: 14px; gap: 10px; }
.act-draft .draft-body { min-height: 3.2em; }
.act-draft.slide { animation: cardin .5s cubic-bezier(.2, .9, .3, 1.2) both; }
.do-it.press, #actSend.press { animation: press .5s ease-out; }
.act-side .replay { align-self: flex-start; }

/* Teams: one login across work, clients, friends and family */
.teams { background: var(--surface); border-block: 1px solid var(--line); }
.teams-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
@media (max-width: 860px) { .teams-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; } }
.who-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 420px) { .who-list { grid-template-columns: minmax(0, 1fr); } }
.who-list li { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.who-av { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex: none; font: 700 12px var(--mono); }
.who-list b { font-size: 15px; }
.who-list p { font-size: 14px; color: var(--text-2); margin-top: 2px; }
.team-facts { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-direction: column; gap: 10px; }
.team-facts li { position: relative; padding-left: 26px; font-size: 15px; color: var(--text-2); }
.team-facts li::before { content: ""; position: absolute; left: 0; top: 4px; width: 14px; height: 14px; border-radius: 4px; background: var(--lime); border: 2px solid var(--ink); }
.team-facts b { color: var(--ink); }
.switch-head .switch-btn { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border: 1px solid #CDD2DA; border-radius: 8px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.switch-head .switch-btn.press { animation: press .5s ease-out; }
.teams-wall { position: relative; height: 420px; justify-content: flex-end; }
.teams-wall > * { flex-shrink: 0; }
.switch-menu { position: absolute; top: 8px; right: 12px; z-index: 2; width: min(250px, calc(100% - 24px)); list-style: none; margin: 0; padding: 6px; background: var(--surface); border: 2px solid var(--ink); border-radius: 12px; box-shadow: 4px 4px 0 var(--ink); }
.switch-menu:not([hidden]) { animation: pop .3s cubic-bezier(.3, 1.5, .5, 1) both; transform-origin: top right; }
.switch-menu li { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 8px; font-size: 14px; font-weight: 600; }
.switch-menu li .av { width: 28px; height: 28px; font-size: 11px; border-radius: 8px; }
.switch-menu li.hover { background: var(--wall); }
.switch-menu li.on { background: var(--lime-tint); }
.switch-menu .n { margin-left: auto; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; display: grid; place-items: center; background: var(--blue); color: #FFFFFF; font: 700 11px var(--mono); }
.switch-menu .n:empty { display: none; }
.teams-wall .swap { animation: pop .38s cubic-bezier(.3, 1.5, .5, 1) both; }
.teams-wall .card.swap { animation: cardin .5s cubic-bezier(.2, .9, .3, 1.2) both; }
@media (max-width: 520px) { .teams-wall { height: 400px; padding-inline: 14px; } .switch-head .switch-btn { font-size: 0; gap: 0; width: 36px; padding: 0; justify-content: center; } .switch-head .switch-btn svg { width: 14px; height: 14px; } }
@media (max-width: 860px) {
  .teams-grid > div:first-child { display: contents; }
  .teams-grid .sec-head { order: 1; margin-bottom: 0 !important; }
  .teams-grid .chat-demo { order: 2; }
  .teams-grid .who-list { order: 3; }
  .teams-grid .team-facts { order: 4; margin-top: -8px; }
}