/* Public website (landing page and sign-up).
   Palette: harbor blue (brand), night ink, paper, mist, check teal (from the logo), amber for "in progress" only.
   Type: Bricolage Grotesque for headings, IBM Plex Sans for text (the app's own face). The ticket stub from the logo is the one motif. */
:root{
  --harbor:#004581;--harbor-deep:#00335f;--night:#071f36;--ink:#16293d;--muted:#55677b;
  --paper:#ffffff;--mist:#edf3f9;--line:#d8e3ee;--check:#2fb5a3;--check-deep:#1f8f80;--amber:#f0a23b;
  --display:'Bricolage Grotesque','IBM Plex Sans',system-ui,sans-serif;--text:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --wrap:1140px;--r:14px;
}
body.site{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.6 var(--text);-webkit-font-smoothing:antialiased}
.site *,.site *::before,.site *::after{box-sizing:border-box}
:where(.site) h1,:where(.site) h2,:where(.site) h3{font-family:var(--display);color:var(--night);margin:0;letter-spacing:-.02em;line-height:1.08}
:where(.site) p{margin:0}
.site a{color:var(--harbor)}
.site a:focus-visible,.site button:focus-visible,.site summary:focus-visible,.site input:focus-visible,.site select:focus-visible{outline:3px solid var(--check);outline-offset:2px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.wrap.narrow{max-width:820px}
.skip{position:absolute;left:-999px;top:8px;background:var(--night);color:#fff;padding:8px 14px;border-radius:8px;z-index:99}
.skip:focus{left:12px}

/* Buttons */
.button{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 20px;border-radius:999px;background:var(--harbor);color:#fff !important;
  font:600 15.5px/1.2 var(--text);text-decoration:none;border:2px solid var(--harbor);cursor:pointer;transition:background .15s,border-color .15s}
.button:hover{background:var(--harbor-deep);border-color:var(--harbor-deep)}
.button.big{padding:15px 26px;font-size:17px}
.button.ghost{background:transparent;color:var(--harbor) !important;border-color:var(--line)}
.button.ghost:hover{border-color:var(--harbor);background:transparent}
.button.light{background:#fff;color:var(--night) !important;border-color:#fff}
.button.light:hover{background:var(--mist);border-color:var(--mist)}
.button.full{width:100%}
.link-quiet{color:var(--ink) !important;text-decoration:none;font-weight:500}
.link-quiet:hover{color:var(--harbor) !important}

/* Header */
.site-head{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.92);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.head-row{display:flex;align-items:center;gap:28px;height:72px}
.brand img{display:block;height:34px;width:auto}
.site-nav{display:flex;gap:26px;margin-left:12px}
.site-nav a{color:var(--muted);text-decoration:none;font-size:15.5px;font-weight:500}
.site-nav a:hover{color:var(--night)}
.head-actions{margin-left:auto;display:flex;align-items:center;gap:20px}
.mobile-nav{display:none;margin-left:auto}
.mobile-nav summary{list-style:none;cursor:pointer;width:42px;height:42px;display:grid;place-content:center;gap:5px;border-radius:10px}
.mobile-nav summary::-webkit-details-marker{display:none}
.mobile-nav summary span{display:block;width:22px;height:2px;background:var(--night);border-radius:2px}
.mobile-panel{position:absolute;left:0;right:0;top:72px;background:#fff;border-bottom:1px solid var(--line);padding:12px 24px 22px;display:grid;gap:4px}
.mobile-panel a{padding:10px 0;color:var(--ink);text-decoration:none;font-weight:500;border-bottom:1px solid var(--mist)}
.mobile-panel a.button{margin-top:10px;border-bottom:0}

/* Hero */
.hero{padding:84px 0 96px;background:linear-gradient(180deg,var(--mist) 0,#fff 100%)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:64px;align-items:center}
.hero h1{font-size:clamp(40px,5.4vw,66px);font-weight:750;max-width:12ch}
.lead{font-size:clamp(18px,1.5vw,20px);color:var(--ink);margin-top:22px;max-width:34em;line-height:1.6}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.fine{font-size:14.5px;color:var(--muted);margin-top:16px}

/* The ticket (the one memorable element): plays once on load, then rests on "Resolved" */
.hero-visual{position:relative;padding:8px 0 40px}
.ticket{position:relative;display:grid;grid-template-columns:1fr 92px;background:#fff;border-radius:18px;
  box-shadow:0 1px 0 var(--line),0 24px 60px -24px rgba(0,51,95,.35);
  -webkit-mask:radial-gradient(circle 13px at calc(100% - 92px) 0,#0000 98%,#000) top/100% 51% no-repeat,radial-gradient(circle 13px at calc(100% - 92px) 100%,#0000 98%,#000) bottom/100% 51% no-repeat;
          mask:radial-gradient(circle 13px at calc(100% - 92px) 0,#0000 98%,#000) top/100% 51% no-repeat,radial-gradient(circle 13px at calc(100% - 92px) 100%,#0000 98%,#000) bottom/100% 51% no-repeat}
.ticket-main{padding:26px 28px 26px}
.ticket-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.ticket-no{font:600 13.5px/1 var(--text);color:var(--muted);letter-spacing:.02em}
.status-stack{display:grid}
.status-stack .chip{grid-area:1/1;justify-self:end;padding:5px 12px;border-radius:999px;font:600 13px/1.2 var(--text);opacity:0}
.s-open{background:#e3eefb;color:var(--harbor)}
.s-assigned{background:#e8e3fb;color:#5b3fb5}
.s-progress{background:#fdf0dc;color:#8a5600}
.s-done{background:#dcf4ef;color:var(--check-deep)}
.ticket-title{font-size:23px;font-weight:650;margin-top:16px;line-height:1.25;letter-spacing:-.01em}
.ticket-meta{font-size:14.5px;color:var(--muted);margin-top:8px}
.ticket-trail{list-style:none;margin:20px 0 0;padding:0 0 0 18px;border-left:2px solid var(--mist);display:grid;gap:10px;font-size:15px}
.ticket-trail li{position:relative;color:var(--ink);opacity:0}
.ticket-trail li::before{content:'';position:absolute;left:-24px;top:8px;width:10px;height:10px;border-radius:50%;background:#fff;border:2px solid var(--harbor)}
.ticket-trail li.t4::before{background:var(--check);border-color:var(--check)}
.ticket-stub{border-left:2px dashed var(--line);display:grid;place-items:center;background:linear-gradient(180deg,#f6f9fc,#eef4fa)}
.stamp{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;background:var(--check);color:#fff;font-size:28px;font-weight:700;
  transform:scale(.4) rotate(-20deg);opacity:0;box-shadow:0 8px 20px -6px rgba(31,143,128,.6)}
.toast-demo{position:absolute;right:-8px;bottom:0;background:var(--night);color:#fff;border-radius:14px;padding:14px 18px;max-width:300px;
  box-shadow:0 18px 40px -16px rgba(7,31,54,.6);opacity:0;transform:translateY(12px)}
.toast-demo b{display:block;font-size:15px}
.toast-demo span{display:block;font-size:13.5px;color:#b9cde2;margin-top:2px}

@keyframes show{to{opacity:1}}
@keyframes hide{to{opacity:0}}
@keyframes stamp{60%{transform:scale(1.15) rotate(-8deg);opacity:1}to{transform:scale(1) rotate(-8deg);opacity:1}}
@keyframes rise{to{opacity:1;transform:none}}
.s-open{animation:show .3s .2s forwards,hide .2s 1.3s forwards}
.s-assigned{animation:show .3s 1.3s forwards,hide .2s 2.3s forwards}
.s-progress{animation:show .3s 2.3s forwards,hide .2s 3.3s forwards}
.s-done{animation:show .3s 3.3s forwards}
.ticket-trail .t1{animation:show .4s .3s forwards}
.ticket-trail .t2{animation:show .4s 1.3s forwards}
.ticket-trail .t3{animation:show .4s 2.3s forwards}
.ticket-trail .t4{animation:show .4s 3.3s forwards}
.stamp{animation:stamp .5s 3.4s cubic-bezier(.3,1.4,.5,1) forwards}
.toast-demo{animation:rise .45s 3.8s ease-out forwards}
@media (prefers-reduced-motion:reduce){
  .status-stack .chip,.ticket-trail li,.stamp,.toast-demo{animation:none !important}
  .s-done,.ticket-trail li{opacity:1}
  .stamp{opacity:1;transform:rotate(-8deg)}
  .toast-demo{opacity:1;transform:none}
}

/* Sections */
.band{background:var(--mist)}
.structure,.journey,.live,.security,.faq{padding:96px 0}
.section-title{font-size:clamp(30px,3.4vw,44px);font-weight:700;max-width:20ch}
.section-lead{font-size:18px;color:var(--ink);margin-top:16px;max-width:38em}

/* Business > clients > projects > tickets: a real hierarchy, drawn as one connected line */
.flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:48px;position:relative}
.flow::before{content:'';position:absolute;left:12px;right:12px;top:11px;height:2px;background:linear-gradient(90deg,var(--harbor),var(--check))}
.flow-step{position:relative;padding:40px 24px 0 0}
.flow-step::before{content:'';position:absolute;left:4px;top:4px;width:16px;height:16px;border-radius:50%;background:#fff;border:3px solid var(--harbor)}
.flow-step:last-child::before{border-color:var(--check)}
.flow-step h3{font-size:22px;font-weight:650}
.flow-step p{font-size:15.5px;color:var(--muted);margin-top:8px}
.tags{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.tags li{font-size:13px;font-weight:500;padding:4px 10px;border-radius:999px;background:#fff;border:1px solid var(--line);color:var(--ink)}

/* The ticket journey: a true sequence, so it is numbered */
.steps{list-style:none;margin:56px 0 0;padding:0;counter-reset:step;display:grid;gap:0}
.step{counter-increment:step;display:grid;grid-template-columns:96px minmax(0,1fr) minmax(0,380px);gap:32px;align-items:center;padding:34px 0;border-top:1px solid var(--line)}
.step:last-child{border-bottom:1px solid var(--line)}
.step::before{content:counter(step);font:750 64px/1 var(--display);color:var(--harbor);letter-spacing:-.04em}
.step h3{font-size:25px;font-weight:650}
.step p{color:var(--muted);margin-top:8px;max-width:34em}
.step-ui{background:var(--mist);border-radius:var(--r);padding:18px;font-size:14px}
.ui-form{display:grid;grid-template-columns:auto 1fr;gap:8px 12px;align-items:center}
.ui-label{color:var(--muted)}
.ui-input{background:#fff;border:1px solid var(--line);border-radius:8px;padding:6px 10px}
.ui-file{grid-column:1/-1;justify-self:start;background:#fff;border:1px dashed var(--line);border-radius:8px;padding:6px 10px;color:var(--harbor)}
.ui-assign{display:flex;justify-content:space-between;align-items:center;gap:10px}
.ui-person{background:#fff;border:1px solid var(--line);border-radius:999px;padding:7px 14px;font-weight:500}
.ui-badge{background:#e8e3fb;color:#5b3fb5;border-radius:999px;padding:5px 12px;font-weight:600;font-size:13px}
.ui-thread{display:grid;gap:8px}
.bubble{background:#fff;border:1px solid var(--line);border-radius:12px 12px 12px 4px;padding:8px 12px;justify-self:start}
.bubble.note{background:#fff7e6;border-color:#f3dcae;color:#7a4b00}
.ui-chart{display:flex;align-items:flex-end;gap:10px;height:110px}
.ui-chart span{flex:1;height:var(--h);border-radius:6px 6px 2px 2px;background:var(--harbor)}
.ui-chart span:nth-child(odd){background:var(--check)}

/* Live notifications */
.live-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px);gap:56px;align-items:center}
.live-stack{display:grid;gap:12px}
.mini-toast{background:var(--night);color:#fff;border-radius:14px;padding:14px 18px}
.mini-toast:nth-child(2){margin-left:28px}
.mini-toast:nth-child(3){margin-left:56px}
.mini-toast b{display:block;font-size:15px}
.mini-toast span{display:block;font-size:13.5px;color:#b9cde2;margin-top:2px}

/* Security */
.checks-list{list-style:none;margin:40px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 48px}
.checks-list li{position:relative;padding-left:36px;color:var(--ink)}
.checks-list li::before{content:'';position:absolute;left:0;top:3px;width:22px;height:22px;border-radius:50%;background:var(--check)}
.checks-list li::after{content:'';position:absolute;left:7px;top:8px;width:8px;height:5px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg)}
.checks-list b{color:var(--night)}

/* FAQ */
.qa{border-bottom:1px solid var(--line)}
.qa:first-of-type{margin-top:32px;border-top:1px solid var(--line)}
.qa summary{cursor:pointer;list-style:none;padding:20px 40px 20px 0;font:600 19px/1.35 var(--display);color:var(--night);position:relative}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:'';position:absolute;right:6px;top:26px;width:10px;height:10px;border-right:2px solid var(--harbor);border-bottom:2px solid var(--harbor);transform:rotate(45deg);transition:transform .2s}
.qa[open] summary::after{transform:rotate(225deg);top:30px}
.qa p{padding:0 0 22px;color:var(--ink);max-width:40em}

/* Closing call to action: the ticket stub again, in night blue, notched on both sides */
.closing{padding:96px 0}
.closing-ticket{background:var(--night);color:#fff;border-radius:22px;padding:56px 64px;display:flex;align-items:center;justify-content:space-between;gap:32px;
  -webkit-mask:radial-gradient(circle 18px at 0 50%,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 18px at 100% 50%,#0000 98%,#000) right/51% 100% no-repeat;
          mask:radial-gradient(circle 18px at 0 50%,#0000 98%,#000) left/51% 100% no-repeat,radial-gradient(circle 18px at 100% 50%,#0000 98%,#000) right/51% 100% no-repeat}
.closing-ticket h1,.closing-ticket h2{color:#fff;font-size:clamp(28px,3vw,40px);font-weight:700}
.closing-ticket p{color:#b9cde2;margin-top:10px;max-width:34em}
.closing-ticket.solo{flex-direction:column;align-items:flex-start}

/* Footer */
.site-foot{border-top:1px solid var(--line);padding:44px 0 32px;font-size:15px}
.foot-row{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap}
.foot-logo{height:28px;width:auto;display:block}
.site-foot p{color:var(--muted);margin-top:10px}
.site-foot nav{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:flex-start}
.site-foot nav a{color:var(--ink);text-decoration:none}
.site-foot nav a:hover{color:var(--harbor)}
.foot-note{color:var(--muted);font-size:13.5px;margin-top:28px}

/* Sign-up */
.signup{padding:72px 0 96px;background:linear-gradient(180deg,var(--mist) 0,#fff 520px)}
.signup-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;align-items:start}
.signup h1{font-size:clamp(36px,4vw,52px);font-weight:750}
.signup-intro{position:sticky;top:110px}
.next-steps{margin:28px 0 0;padding:0 0 0 22px;display:grid;gap:10px;color:var(--ink)}
.signup-card{background:#fff;border:1px solid var(--line);border-radius:20px;padding:32px;box-shadow:0 24px 60px -32px rgba(0,51,95,.3)}
.signup-card fieldset{border:0;padding:0;margin:0 0 22px}
.signup-card legend{font:650 19px/1.2 var(--display);color:var(--night);margin-bottom:14px;padding:0}
.signup-card .form-grid{gap:14px 16px}
.signup-card label{font-size:14.5px}
.signup-card input,.signup-card select{font-size:15.5px}
.agree{margin:6px 0 20px;align-items:flex-start}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.notice{border-radius:12px;padding:14px 16px;margin:0 0 20px;font-size:15px}
.notice.bad{background:#fdecea;color:#8f1d14;border:1px solid #f3c3be}
.notice ul{margin:6px 0 0;padding-left:18px}
.site main > .wrap > .notice{margin-top:20px}

/* Narrower screens */
@media (max-width:1020px){
  .site-nav{display:none}
  .hero-grid,.live-grid,.signup-grid{grid-template-columns:1fr}
  .hero-visual{max-width:560px}
  .signup-intro{position:static}
  .step{grid-template-columns:72px minmax(0,1fr);gap:20px}
  .step .step-ui{grid-column:2}
  .step::before{font-size:48px}
}
@media (max-width:760px){
  body.site{font-size:16px}
  .head-actions{display:none}
  .mobile-nav{display:block}
  .hero{padding:48px 0 64px}
  .structure,.journey,.live,.security,.faq,.closing{padding:64px 0}
  .flow{grid-template-columns:1fr;gap:28px}
  .flow::before{left:11px;right:auto;top:12px;bottom:12px;width:2px;height:auto;background:linear-gradient(180deg,var(--harbor),var(--check))}
  .flow-step{padding:0 0 0 40px}
  .checks-list{grid-template-columns:1fr}
  .step{grid-template-columns:1fr;gap:12px}
  .step .step-ui{grid-column:auto}
  .mini-toast:nth-child(2),.mini-toast:nth-child(3){margin-left:0}
  .closing-ticket{flex-direction:column;align-items:flex-start;padding:40px 32px}
  .ticket{grid-template-columns:1fr 64px;
    -webkit-mask:radial-gradient(circle 11px at calc(100% - 64px) 0,#0000 98%,#000) top/100% 51% no-repeat,radial-gradient(circle 11px at calc(100% - 64px) 100%,#0000 98%,#000) bottom/100% 51% no-repeat;
            mask:radial-gradient(circle 11px at calc(100% - 64px) 0,#0000 98%,#000) top/100% 51% no-repeat,radial-gradient(circle 11px at calc(100% - 64px) 100%,#0000 98%,#000) bottom/100% 51% no-repeat}
  .ticket-main{padding:22px 20px}
  .stamp{width:42px;height:42px;font-size:22px}
  .toast-demo{position:relative;right:auto;margin-top:16px}
  .signup-card{padding:22px}
}

/* Plans */
.plans{padding:96px 0}
.plan-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;margin-top:44px;align-items:start}
.plan{border:1px solid var(--line);border-radius:20px;padding:30px;background:#fff}
.plan-start{border:2px solid var(--harbor)}
.plan h3{font-size:26px;font-weight:700}
.plan-price{font:700 22px/1.2 var(--display);color:var(--harbor);margin-top:8px}
.plan-desc{color:var(--muted);margin-top:8px}
.plan-limits{margin:22px 0 26px;display:grid}
.plan-limits div{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--mist);font-size:15.5px}
.plan-limits dt{color:var(--ink)}
.plan-limits dd{margin:0;font-weight:600;color:var(--night)}
@media (max-width:760px){.plans{padding:64px 0}}
.notice.ok{background:#e8f6ee;color:#14532d;border:1px solid #bfe5cc}
.signup-card textarea{width:100%;resize:vertical;min-height:140px}

/* ------------------------------------------------------------------ Motion
   Sections rise in as they scroll into view (assets/motion.js adds .motion to <html>, and .in to each part as it appears).
   Only opacity and transform are animated, so it stays smooth on phones. Without .motion (no JavaScript, or reduced
   motion) everything is simply shown. */
:root{--ease-out:cubic-bezier(.16,.84,.3,1);--ease-pop:cubic-bezier(.3,1.5,.5,1)}

/* Hero: the copy arrives line by line while the ticket plays its own story */
@keyframes rise-in{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes slide-in-right{from{opacity:0;transform:translateX(36px)}to{opacity:1;transform:none}}
@keyframes pop-in{0%{opacity:0;transform:scale(.4)}100%{opacity:1;transform:scale(1)}}
@keyframes grow-up{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes draw-x{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes nudge{0%,100%{transform:none}50%{transform:translateY(-3px)}}

.motion .hero-copy>*{animation:rise-in .8s var(--ease-out) both}
.motion .hero-copy>:nth-child(2){animation-delay:.12s}
.motion .hero-copy>:nth-child(3){animation-delay:.24s}
.motion .hero-copy>:nth-child(4){animation-delay:.36s}
.motion .hero-visual .ticket{animation:rise-in .9s .15s var(--ease-out) both}

/* Generic reveal: titles, leads and blocks */
.motion :is(.section-title,.section-lead,.qa,.closing-ticket,.signup-intro,.signup-card){opacity:0;transform:translateY(26px);
  transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.motion .section-lead{transition-delay:.1s}
.motion :is(.section-title,.section-lead,.qa,.closing-ticket,.signup-intro,.signup-card).in{opacity:1;transform:none}
.motion .signup-intro{transform:translateX(-24px)}
.motion .signup-card{transition-delay:.12s}
.motion .qa:nth-of-type(2){transition-delay:.06s}.motion .qa:nth-of-type(3){transition-delay:.12s}
.motion .qa:nth-of-type(4){transition-delay:.18s}.motion .qa:nth-of-type(5){transition-delay:.24s}.motion .qa:nth-of-type(n+6){transition-delay:.3s}

/* How it fits: the line draws itself, then each stage lights up in order */
.motion .flow::before{transform:scaleX(0);transform-origin:left center}
.motion .flow.in::before{animation:draw-x 1.2s .1s var(--ease-out) forwards}
.motion .flow-step{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.motion .flow-step::before{transform:scale(0);transition:transform .45s var(--ease-pop)}
.motion .flow.in .flow-step{opacity:1;transform:none}
.motion .flow.in .flow-step::before{transform:scale(1)}
.motion .flow.in .flow-step:nth-child(1),.motion .flow.in .flow-step:nth-child(1)::before{transition-delay:.15s}
.motion .flow.in .flow-step:nth-child(2),.motion .flow.in .flow-step:nth-child(2)::before{transition-delay:.45s}
.motion .flow.in .flow-step:nth-child(3),.motion .flow.in .flow-step:nth-child(3)::before{transition-delay:.75s}
.motion .flow.in .flow-step:nth-child(4),.motion .flow.in .flow-step:nth-child(4)::before{transition-delay:1.05s}

/* Journey: the number slides in, the text rises, the example screen slides in from the side and comes alive */
.motion .step::before{opacity:0;transform:translateX(-24px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
.motion .step .step-text{opacity:0;transform:translateY(20px);transition:opacity .7s .1s var(--ease-out),transform .7s .1s var(--ease-out)}
.motion .step .step-ui{opacity:0;transform:translateX(40px);transition:opacity .8s .2s var(--ease-out),transform .8s .2s var(--ease-out)}
.motion .step.in::before,.motion .step.in .step-text,.motion .step.in .step-ui{opacity:1;transform:none}
.motion .ui-chart span{transform:scaleY(0);transform-origin:bottom}
.motion .step.in .ui-chart span{animation:grow-up .7s var(--ease-out) forwards}
.motion .step.in .ui-chart span:nth-child(2){animation-delay:.48s}.motion .step.in .ui-chart span:nth-child(3){animation-delay:.56s}
.motion .step.in .ui-chart span:nth-child(4){animation-delay:.64s}.motion .step.in .ui-chart span:nth-child(5){animation-delay:.72s}
.motion .step.in .ui-chart span:nth-child(6){animation-delay:.8s}.motion .step.in .ui-chart span:nth-child(7){animation-delay:.88s}
.motion .step.in .ui-chart span:nth-child(1){animation-delay:.4s}
.motion .ui-thread .bubble,.motion .ui-badge,.motion .ui-file{opacity:0}
.motion .step.in .ui-thread .bubble{animation:rise-in .5s .55s var(--ease-out) forwards}
.motion .step.in .ui-thread .bubble.note{animation-delay:1s}
.motion .step.in .ui-badge{animation:pop-in .45s .7s var(--ease-pop) forwards}
.motion .step.in .ui-file{animation:rise-in .5s .7s var(--ease-out) forwards}

/* Live updates: the example notifications arrive one after another, like the real ones */
.motion .mini-toast{opacity:0;transform:translateX(48px)}
.motion .live-stack.in .mini-toast{animation:slide-in-right .6s var(--ease-out) forwards}
.motion .live-stack.in .mini-toast:nth-child(1){animation-delay:.1s}
.motion .live-stack.in .mini-toast:nth-child(2){animation-delay:.55s}
.motion .live-stack.in .mini-toast:nth-child(3){animation-delay:1s}

/* Security: each point rises in and its check pops */
.motion .checks-list li{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
.motion .checks-list li::before,.motion .checks-list li::after{opacity:0;transition:opacity .3s}
.motion .checks-list.in li{opacity:1;transform:none}
.motion .checks-list.in li::before{opacity:1;animation:pop-in .45s var(--ease-pop) both;animation-delay:inherit}
.motion .checks-list.in li::after{opacity:1;transition-delay:inherit}
.motion .checks-list.in li:nth-child(1){transition-delay:.05s;animation-delay:.2s}
.motion .checks-list.in li:nth-child(2){transition-delay:.15s;animation-delay:.3s}
.motion .checks-list.in li:nth-child(3){transition-delay:.25s;animation-delay:.4s}
.motion .checks-list.in li:nth-child(4){transition-delay:.35s;animation-delay:.5s}
.motion .checks-list.in li:nth-child(5){transition-delay:.45s;animation-delay:.6s}
.motion .checks-list.in li:nth-child(6){transition-delay:.55s;animation-delay:.7s}

/* Plans: cards rise in turn; every visitor gets a gentle lift on hover */
.motion .plan{opacity:0;transform:translateY(30px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out),box-shadow .25s}
.motion .plan-grid.in .plan{opacity:1;transform:none}
.motion .plan-grid.in .plan:nth-child(2){transition-delay:.12s,.12s,0s}
.motion .plan-grid.in .plan:nth-child(3){transition-delay:.24s,.24s,0s}
.motion .plan-grid.in .plan:nth-child(n+4){transition-delay:.36s,.36s,0s}
.plan{transition:transform .25s var(--ease-out),box-shadow .25s}
@media (hover:hover){
  .plan-grid .plan:hover,.motion .plan-grid.in .plan:hover{transform:translateY(-6px);box-shadow:0 22px 44px -26px rgba(0,51,95,.45);transition-delay:0s}
  .button:hover{transform:translateY(-1px)}
}
.button{transition:background .15s,border-color .15s,transform .15s}

/* FAQ: the answer slides open */
.qa[open] p{animation:rise-in .35s var(--ease-out)}

/* Closing call to action: arrives, then its button gives one small nudge */
.motion .closing-ticket{transform:translateY(26px) scale(.98)}
.motion .closing-ticket.in .button{animation:nudge .6s 1s ease-in-out 2}

@media (prefers-reduced-motion:reduce){
  .plan,.button{transition:none}
  .plan:hover,.button:hover{transform:none}
  .qa[open] p{animation:none}
}