/* Animated section scenes. Content is visible by default; scenes.js adds .scenes-ready to <html>
   (enabling the hidden start states) and .is-in when a scene scrolls into view.
   Reduced motion shows the finished state. */
.scene{--card:#fff;--ink:var(--dark);--muted:var(--text-2);position:relative}
.s-card{background:var(--card);border-radius:12px;box-shadow:0 1px 2px rgb(19 35 58 / .06),0 18px 40px -22px rgb(19 35 58 / .35)}
.s-tag{font-size:12px;color:var(--muted)}
.s-check{display:inline-grid;place-items:center;flex:none;width:20px;height:20px;border-radius:50%;background:var(--teal);color:#fff}
.s-check svg{width:12px;height:12px}
.scenes-ready .s-check path{stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset .5s ease-out var(--d,0s)}
.is-in .s-check path{stroke-dashoffset:0}

/* Shared entrance: children with --i rise in one after another. */
.scenes-ready .s-rise{opacity:0;translate:0 14px;transition:opacity .6s ease-out,translate .7s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0) * 140ms + var(--base,0ms))}
.is-in .s-rise{opacity:1;translate:0 0}

/* Split layout used by the support and month-end sections. */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(40px,6vw,104px);align-items:center}
.split.flip .split-copy{order:2}
.split-copy .section-heading{text-align:left;margin:0 0 24px;max-width:560px}
.split-copy .section-heading h2{font-size:clamp(34px,3.6vw,56px)}
.split-copy .section-heading .section-intro{margin:16px 0 0;font-size:clamp(16px,1.2vw,18px)}
.split-points{display:grid;gap:12px;max-width:520px}
.split-points article{display:grid;grid-template-columns:20px 1fr;column-gap:12px}
.split-points article::before{content:'';grid-row:span 2;width:8px;height:8px;margin:7px 0 0 4px;background:var(--gold)}
.split-points h3{font-size:16px;font-weight:600;margin-bottom:2px}
.split-points p{font-size:14px;line-height:1.5;color:var(--text-2)}
.split-copy .section-link{margin:24px 0 0}
@media(max-width:900px){.split{grid-template-columns:1fr}.split.flip .split-copy{order:0}}

/* 1. Conversation */
.chat{display:grid;gap:12px;width:100%;max-width:520px;margin:0 auto}
.msg{display:flex;align-items:flex-end;gap:12px;max-width:88%}
.msg.you{margin-left:auto;flex-direction:row-reverse}
.msg-body{padding:14px 18px;border-radius:16px 16px 16px 4px;background:var(--card);font-size:15px;line-height:1.5;color:var(--ink);box-shadow:0 1px 2px rgb(19 35 58 / .06),0 14px 30px -20px rgb(19 35 58 / .3)}
.msg.you .msg-body{border-radius:16px 16px 4px 16px;background:var(--dark);color:var(--light)}
.msg-who{display:block;font-size:12px;font-weight:600;color:var(--teal);margin-bottom:4px}
.msg.you .msg-who{color:color-mix(in srgb,var(--light) 70%,var(--dark))}
.avatar{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:700;background:var(--dark);color:var(--light)}
.avatar.bookkeeper{background:#fff url('/assets/executive-avatar-glasses.webp') no-repeat;background-size:1500% auto;background-position:14% 10%}
.avatar.you{background:var(--gold);color:var(--dark)}
.msg-done{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:13px;font-weight:600;color:var(--teal)}
.typing{display:inline-flex;gap:4px;padding:16px 18px}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:typing 1s infinite ease-in-out}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes typing{0%,60%,100%{opacity:.25;translate:0 0}30%{opacity:1;translate:0 -3px}}
/* scenes.js reveals messages in order and shows a typing indicator before each one. */
.scenes-ready .chat .msg{opacity:0;translate:0 12px;transition:opacity .45s ease-out,translate .5s cubic-bezier(.2,.7,.2,1)}
.chat .msg.shown{opacity:1;translate:0 0}
.chat .msg .typing{display:none}
.chat .msg.typing-now .typing{display:inline-flex}
.chat .msg.typing-now .msg-text{display:none}
.chat-note{margin:12px auto 0;text-align:right;max-width:520px}

/* 2. Month-end board */
.board{aspect-ratio:1.25;max-width:600px;margin:0 auto;width:100%}
.board-portrait{position:absolute;left:50%;top:50%;width:54%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:color-mix(in srgb,var(--teal) 22%,#fff);overflow:hidden}
.board-portrait span{position:absolute;inset:4% -2% -4%;background:url('/assets/executive-avatar-glasses.webp') no-repeat;background-size:300% 200%;background-position:0 0}
.board .s-card{position:absolute;padding:14px 16px;font-size:13px;font-weight:600;color:var(--ink);animation:float 7s ease-in-out 4;animation-delay:calc(var(--i) * -1.3s);animation-play-state:paused}
.board.is-in .s-card{animation-play-state:running}
@keyframes float{50%{transform:translateY(-6px)}}
.board .row{display:flex;align-items:center;gap:10px}
.b-recon{left:0;top:6%}
.b-questions{right:0;top:2%}
.b-pl{left:2%;bottom:6%}
.b-bs{right:-2%;top:42%}
.b-close{right:10%;bottom:0}
.b-questions strong{display:block;font-size:30px;line-height:1;font-variant-numeric:tabular-nums;margin-top:6px;color:var(--dark)}
.bars{display:flex;align-items:flex-end;gap:6px;height:44px;margin-top:10px}
.bars i{width:12px;border-radius:3px 3px 0 0;background:var(--teal);height:var(--h);transform-origin:bottom}
.scenes-ready .bars i{transform:scaleY(0);transition:transform .7s cubic-bezier(.2,.7,.2,1) calc(.9s + var(--n) * 90ms)}
.bars i:nth-child(even){background:var(--gold)}
.is-in .bars i{transform:scaleY(1)}
.pill{display:inline-block;margin-top:8px;padding:3px 10px;border-radius:999px;background:color-mix(in srgb,var(--teal) 14%,transparent);color:var(--teal);font-size:12px}
.ring{width:44px;height:44px;flex:none}
.scenes-ready .ring circle:last-child{stroke-dasharray:113;stroke-dashoffset:113;transition:stroke-dashoffset 1.4s cubic-bezier(.3,.6,.2,1) 1.2s}
.is-in .ring circle:last-child{stroke-dashoffset:0}
@media(max-width:560px){.board{aspect-ratio:.95}.board .s-card{padding:10px 12px;font-size:12px}.b-bs{display:none}.b-questions strong{font-size:24px}}

/* 3. Pain icons */
.pain-answer{display:grid;grid-template-columns:44px 1fr;column-gap:18px;align-items:start}
.pain-answer>*:not(.pain-icon){grid-column:2}
.pain-icon{grid-row:span 2;width:44px;height:44px;color:var(--gold)}
.pain-answer .link{justify-self:start}
.scenes-ready .pain-icon .cell{opacity:.25;transition:opacity .3s ease-out;transition-delay:calc(var(--n) * 160ms + .3s)}
.is-in .pain-icon .cell{opacity:1}
.scenes-ready .pain-icon .beam{transform-origin:28px 22px;transform:rotate(-12deg);transition:transform 1s cubic-bezier(.3,1.4,.4,1) .5s}
.is-in .pain-icon .beam{transform:rotate(0)}
.scenes-ready .pain-icon .hand{transform-origin:28px 28px;transform:rotate(-90deg);transition:transform 1.4s cubic-bezier(.3,.6,.2,1) .3s}
.scenes-ready .pain-icon .hand{transition:transform 1.4s cubic-bezier(.3,.6,.2,1) .3s,opacity .3s ease-out 1.6s}
.is-in .pain-icon .hand{transform:rotate(270deg);opacity:0}
.scenes-ready .pain-icon .tick{stroke-dasharray:30;stroke-dashoffset:30;transition:stroke-dashoffset .5s ease-out 1.7s}
.is-in .pain-icon .tick{stroke-dashoffset:0}

/* 4. Sizes */
.size-viz{width:100%;max-width:220px;height:auto;margin-bottom:24px;display:block}
.scenes-ready .size-viz rect,.scenes-ready .size-viz path,.scenes-ready .size-viz circle{opacity:0;transition:opacity .45s ease-out;transition-delay:calc(var(--n,0) * 110ms + .2s)}
.is-in .size-viz rect,.is-in .size-viz path,.is-in .size-viz circle{opacity:1}

/* 5. Pricing proposal card */
.proposal{padding:clamp(20px,2.4vw,28px)}
.proposal .scope div{padding:10px 0}
.proposal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.proposal-head strong{font-size:15px}
.proposal .scope{grid-template-columns:1fr}
.proposal .scope div{display:grid;grid-template-columns:20px 1fr;column-gap:14px;align-items:start}
.proposal .scope div::before{content:'';grid-row:span 2;width:20px;height:20px;margin-top:2px;border-radius:50%;background:var(--teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat}
.scenes-ready .proposal .scope div::before{transform:scale(0);transition:transform .4s cubic-bezier(.3,1.6,.5,1) calc(var(--n) * 220ms + .4s)}
.proposal.is-in .scope div::before{transform:scale(1)}
.proposal-fee{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:16px;padding:16px 18px;border-radius:10px;background:var(--dark);color:var(--light);font-size:15px}
.proposal-fee span:last-child{display:inline-flex;align-items:center;gap:8px;font-weight:600}
.scenes-ready .proposal-fee span:last-child{opacity:0;transition:opacity .4s ease-out 1.5s}
.is-in .proposal-fee span:last-child{opacity:1}
.proposal-fee svg{width:16px;height:16px}

/* 6. Data flow */
.flow{display:grid;grid-template-columns:1fr minmax(48px,.6fr) 1.2fr minmax(48px,.6fr) 1fr;align-items:center;max-width:1040px;margin:0 auto clamp(28px,3vw,40px)}
.flow-node{padding:16px;text-align:center}
.flow-node strong{display:block;font-size:15px;margin:10px 0 4px}
.flow-node svg{width:28px;height:28px;color:var(--teal)}
.flow-node.home{background:var(--dark);color:var(--light)}
.flow-node.home svg{color:var(--gold)}
.flow-node.home .s-tag{color:color-mix(in srgb,var(--light) 70%,var(--dark))}
.flow-line{position:relative;height:2px;background:repeating-linear-gradient(90deg,var(--teal) 0 6px,transparent 6px 12px);opacity:.6}
.flow-line span{position:absolute;top:-4px;left:0;width:10px;height:10px;border-radius:50%;background:var(--gold);opacity:0}
.is-in .flow-line span{opacity:1;animation:flow 2.4s linear 3 forwards}
.flow-line.rev span{animation-direction:reverse}
.flow-line em{position:absolute;top:12px;left:0;right:0;text-align:center;font-style:normal;font-size:12px;color:var(--text-2)}
@keyframes flow{to{left:calc(100% - 10px)}}
@media(max-width:900px){.flow{grid-template-columns:1fr;max-width:360px;gap:0}.flow-line{width:2px;height:48px;margin:auto;background:repeating-linear-gradient(180deg,var(--teal) 0 6px,transparent 6px 12px)}.flow-line span{left:-4px;top:0}.is-in .flow-line span{animation-name:flow-v}.flow-line em{top:50%;left:14px;right:auto;translate:0 -50%;white-space:nowrap;text-align:left}}
@keyframes flow-v{to{top:calc(100% - 10px)}}

@media(prefers-reduced-motion:reduce){
  .scene *,.scene,.scene *::before,.scene *::after{animation:none!important;transition:none!important}
  .s-rise,.chat .msg{opacity:1;translate:none}
  .flow-line span{display:none}
}

/* Hero status cards around the illustration */
.hero-art.scene{position:relative}

/* Software logos rise in */
.scenes-ready .software .software-logo{opacity:0;translate:0 12px;transition:opacity .5s ease-out,translate .6s cubic-bezier(.2,.7,.2,1),background .2s}
.software.is-in .software-logo{opacity:1;translate:0 0}
.software-logo:nth-child(2){transition-delay:80ms}.software-logo:nth-child(3){transition-delay:160ms}.software-logo:nth-child(4){transition-delay:240ms}.software-logo:nth-child(5){transition-delay:320ms}.software-logo:nth-child(6){transition-delay:400ms}.software-logo:nth-child(7){transition-delay:480ms}

/* Step icons draw themselves */
.step.scene{position:relative}
.step-icon{position:absolute;top:28px;right:clamp(16px,2vw,28px);width:44px;height:44px;color:var(--teal)}
.step-icon .spark{color:var(--gold);stroke:var(--gold)}
.scenes-ready .step-icon .draw{stroke-dasharray:120;stroke-dashoffset:120;transition:stroke-dashoffset 1.2s ease-out .5s}
.step.is-in .step-icon .draw{stroke-dashoffset:0}