/* Automations system pages: the eleven automations-*.html files (the hub uses automations-hub.css).
   Loaded after style.css and theme.css; the hero, buttons, dark bands and call-to-action panel come from
   the theme. Every class here starts with au- so nothing on the rest of the site is affected. */

/* ===== Flow illustration: trigger, steps, result. Sits under the sidebar card on wide screens. ===== */
.au-flow{display:none}
@media(min-width:1000px){
  .au-side .au-flow{display:flex;flex-direction:column;width:100%;margin-top:20px}
}
.au-flow-node{background:#fff;border:1px solid var(--ui-bd);border-radius:var(--ui-r-sm);padding:18px 22px 20px;box-shadow:0 26px 48px -36px rgba(10,23,51,.38)}
.au-flow-k{display:block;font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--ui-mute);margin-bottom:8px}
.au-flow-t{display:block;font-size:1.02rem;font-weight:600;letter-spacing:-.012em;line-height:1.3;color:var(--ui-navy)}
.au-flow-trigger{border-left:3px solid var(--ui-blue)}
.au-flow-steps ul{list-style:none}
.au-flow-steps li{position:relative;padding:9px 0 9px 26px;font-size:.95rem;font-weight:500;line-height:1.35;color:var(--ui-navy);border-top:1px solid var(--ui-bd)}
.au-flow-steps li:first-child{border-top:none;padding-top:2px}
.au-flow-steps li:last-child{padding-bottom:0}
.au-flow-steps li::before{content:"";position:absolute;left:2px;top:14px;width:10px;height:5px;border-left:2px solid var(--ui-blue);border-bottom:2px solid var(--ui-blue);transform:rotate(-45deg)}
.au-flow-steps li:first-child::before{top:7px}
.au-flow-result{background:var(--ui-navy);border-color:var(--ui-navy)}
.au-flow-result .au-flow-k{color:var(--ui-lb)}
.au-flow-result .au-flow-t{color:#fff}
.au-flow-link{position:relative;height:34px;width:2px;margin-left:34px;background:var(--ui-bd)}
.au-flow-link::after{content:"";position:absolute;left:-3px;top:0;width:8px;height:8px;border-radius:50%;background:var(--ui-blue);opacity:0}
@media(prefers-reduced-motion:no-preference){
  .au-flow-link::after{animation:au-run 3.6s cubic-bezier(.5,0,.5,1) infinite}
  .au-flow-link+.au-flow-node+.au-flow-link::after{animation-delay:1.2s}
}
@keyframes au-run{0%{top:-4px;opacity:0}12%{opacity:1}34%{top:calc(100% - 4px);opacity:1}42%,100%{top:calc(100% - 4px);opacity:0}}

/* ===== System cards ===== */
.au-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.au-card{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--ui-bd);border-radius:var(--ui-r);padding:28px 28px 20px;scroll-margin-top:110px;transition:translate .28s cubic-bezier(.2,.7,.3,1),border-color .28s,box-shadow .28s}
.au-card[hidden]{display:none}
.au-card:hover,.au-card:focus-within{border-color:var(--ui-blue);box-shadow:0 30px 54px -36px rgba(10,23,51,.42)}
@media(hover:hover) and (prefers-reduced-motion:no-preference){.au-card:hover{translate:0 -3px}}
.au-card:has(.au-card-link:focus-visible){outline:2px solid var(--ui-blue);outline-offset:3px}
.au-card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:24px}
.au-ic{width:46px;height:46px;flex:none;display:grid;place-items:center;background:rgba(43,73,232,.08);color:var(--ui-blue);border-radius:var(--ui-r-sm)}
.au-ic svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.au-num{font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ui-mute);text-align:right}
.au-card h3{font-size:1.28rem;font-weight:800;letter-spacing:-.024em;line-height:1.18;text-wrap:balance}
.au-card-link{color:inherit}
.au-card-link::after{content:"";position:absolute;inset:0;z-index:1}
.au-card-link:focus-visible{outline:none}
.au-outcome{margin-top:10px;color:var(--ui-txt);font-size:.98rem;line-height:1.55}
.au-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:18px}
.au-pill{font-size:.8rem;font-weight:600;line-height:1.3;padding:4px 10px;background:rgba(43,73,232,.08);color:var(--ui-blue);border-radius:999px;white-space:nowrap}
.au-live{display:inline-flex;align-items:center;gap:8px;font-size:.8rem;font-weight:600;color:var(--ui-txt);white-space:nowrap}
.au-live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ui-blue)}
.au-soon{font-size:.8rem;font-weight:600;line-height:1.3;padding:3px 9px;border:1px solid var(--ui-bd);color:var(--ui-txt);border-radius:999px;white-space:nowrap}
.au-chips{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:16px 0 24px}
.au-chips li{font-size:.8rem;font-weight:500;line-height:1.3;color:var(--ui-txt);padding:4px 9px;border:1px solid var(--ui-bd);background:#fff;border-radius:var(--ui-r-sm)}
.au-card-foot{margin-top:auto;padding-top:16px;border-top:1px solid var(--ui-bd);display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:44px}
.au-view{margin-left:auto;display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:600;color:var(--ui-navy);white-space:nowrap;transition:color .28s}
.au-view svg{width:15px;height:15px;transition:transform .28s cubic-bezier(.2,.7,.3,1)}
.au-card:hover .au-view,.au-card:focus-within .au-view{color:var(--ui-blue)}
.au-card:hover .au-view svg{transform:translateX(4px)}

/* Price slot: one line, same height whether it holds a price or the ask link */
.au-price-slot{position:relative;z-index:2;display:inline-flex;align-items:center;min-height:24px;font-size:.86rem;line-height:1.3}
.au-ask{display:inline-flex;align-items:center;gap:6px;padding:8px 0;margin:-8px 0;color:var(--ui-txt);font-weight:500;text-decoration:underline;text-decoration-color:var(--ui-bd);text-underline-offset:4px;transition:color .2s,text-decoration-color .2s}
.au-ask svg{width:12px;height:12px;flex:none}
.au-ask:hover{color:var(--ui-blue);text-decoration-color:var(--ui-blue)}
.au-price{font-weight:700;color:var(--ui-navy);letter-spacing:-.01em}
.au-hide-empty .au-price-slot.is-empty{display:none}
.au-hide-empty .au-side-card .au-price-slot.is-empty{display:inline-flex;visibility:hidden}

@media(max-width:1100px){
  .au-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:700px){
  .au-grid{grid-template-columns:minmax(0,1fr)}
  .au-card{padding:24px 22px 18px}
}

/* ===== System page: body with sticky sidebar ===== */
.au-body{display:grid;grid-template-columns:minmax(0,1fr);gap:56px;padding-top:88px;padding-bottom:104px}
.au-side{display:none}
@media(min-width:1000px){
  .au-body{grid-template-columns:minmax(0,1fr) 304px;gap:72px;align-items:start}
  .au-side{display:block;position:sticky;top:100px}
}
@media(max-width:900px){.au-body{padding-top:56px;padding-bottom:68px}}
.au-block{margin-bottom:84px}
.au-block:last-child{margin-bottom:0}
.au-block>h2{font-size:clamp(1.6rem,2.6vw,2.1rem);font-weight:800;letter-spacing:-.028em;line-height:1.1;margin-bottom:28px;color:var(--ui-navy)}
@media(max-width:900px){.au-block{margin-bottom:60px}.au-block>h2{margin-bottom:22px}}

.au-side-card{background:#fff;border:1px solid var(--ui-bd);border-radius:var(--ui-r);padding:28px 26px 24px;box-shadow:0 34px 60px -44px rgba(10,23,51,.5)}
.au-side-card .au-num{display:block;text-align:left;margin-bottom:12px}
.au-side-name{font-size:1.24rem;font-weight:700;letter-spacing:-.024em;line-height:1.18;color:var(--ui-navy)}
.au-side-card .au-meta{margin-top:14px}
.au-side-card .au-price-slot{margin-top:18px}
.au-side-card .ui-btn{width:100%;margin-top:18px}
.au-side-all{display:block;margin-top:16px;text-align:center;font-size:.9rem;font-weight:600;color:var(--ui-txt);transition:color .2s}
.au-side-all:hover{color:var(--ui-blue)}

/* Without it / With it */
.au-ba{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.au-ba-card{border:1px solid var(--ui-bd);border-top:3px solid var(--ui-bd);border-radius:var(--ui-r);padding:28px 28px 30px;background:#fff}
.au-ba-card h3{font-size:.95rem;font-weight:700;letter-spacing:-.005em;color:var(--ui-txt);margin-bottom:14px}
.au-ba-card p{font-size:1.04rem;line-height:1.6;color:var(--ui-txt)}
.au-ba-with{background:#fff;border-top-color:var(--ui-blue);box-shadow:0 30px 54px -40px rgba(10,23,51,.4)}
.au-ba-with h3{color:var(--ui-blue)}
.au-ba-with p{color:var(--ui-navy)}
@media(max-width:700px){.au-ba{grid-template-columns:minmax(0,1fr)}.au-ba-card{padding:24px 22px 26px}}

/* Review timeline: horizontal on desktop, vertical on phones */
.au-tl{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.au-tl-cap{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:8px 24px;align-items:baseline;padding:18px 22px;background:var(--ui-bg);border:1px solid var(--ui-bd);border-radius:var(--ui-r-sm)}
.au-tl-cap b{font-size:1rem;font-weight:700;letter-spacing:-.012em;color:var(--ui-navy)}
.au-tl-cap span{font-size:.96rem;line-height:1.55;color:var(--ui-txt)}
.au-tl-day{position:relative;padding:58px 22px 34px 0}
.au-tl-day::before{content:"";position:absolute;left:0;right:0;top:32px;height:2px;background:rgba(43,73,232,.3)}
.au-tl-day::after{content:"";position:absolute;left:0;top:25px;width:16px;height:16px;border-radius:50%;background:#fff;border:4px solid var(--ui-blue);box-sizing:border-box}
.au-tl-day b{display:block;font-size:1.3rem;font-weight:700;letter-spacing:-.028em;line-height:1.1;color:var(--ui-navy)}
.au-tl-day span{display:block;margin-top:10px;font-size:.94rem;line-height:1.55;color:var(--ui-txt)}
.au-tl-note{margin-top:20px;border-left:2px solid var(--ui-blue);padding:4px 0 4px 20px;font-size:.98rem;line-height:1.55;color:var(--ui-txt)}
.au-tl-note b{color:var(--ui-navy);font-weight:700}
@media(max-width:760px){
  .au-tl{grid-template-columns:minmax(0,1fr)}
  .au-tl-cap{grid-template-columns:minmax(0,1fr);padding:16px 18px}
  .au-tl-day{padding:0 0 26px 34px}
  .au-tl-day:first-of-type,.au-tl-cap+.au-tl-day{margin-top:24px}
  .au-tl-day::before{left:7px;right:auto;top:6px;bottom:-6px;width:2px;height:auto}
  .au-tl-day::after{top:3px}
  .au-tl-day b{font-size:1.15rem}
  .au-tl-day span{margin-top:6px}
}

/* Numbered steps for the other systems */
.au-steps{list-style:none;counter-reset:au-step;border-top:2px solid var(--ui-navy)}
.au-steps li{counter-increment:au-step;display:grid;grid-template-columns:52px minmax(0,1fr);gap:0 12px;padding:22px 0;border-bottom:1px solid var(--ui-bd)}
.au-steps li::before{content:counter(au-step,decimal-leading-zero);font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.14em;color:var(--ui-mute);padding-top:5px}
.au-steps h3{font-size:1.1rem;font-weight:700;letter-spacing:-.018em;line-height:1.25}
.au-steps p{grid-column:2;margin-top:6px;font-size:.98rem;line-height:1.6;color:var(--ui-txt);max-width:60ch}

/* Automations in this system */
.au-autos{list-style:none;display:grid;gap:12px}
.au-auto{display:grid;grid-template-columns:36px minmax(0,1fr);gap:0 20px;background:#fff;border:1px solid var(--ui-bd);border-radius:var(--ui-r);padding:26px 28px 26px 24px}
.au-auto-n{width:36px;height:36px;display:grid;place-items:center;border-radius:50%;background:var(--ui-navy);color:#fff;font-size:.9rem;font-weight:700;line-height:1}
.au-auto h3{font-size:1.14rem;font-weight:700;letter-spacing:-.018em;line-height:1.25;padding-top:6px}
.au-auto-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:12px}
.au-auto-meta .au-price-slot{margin-left:auto}
.au-auto p{margin-top:14px;font-size:.99rem;line-height:1.62;color:var(--ui-txt);max-width:66ch}
.au-also{margin-top:20px;border-left:2px solid var(--ui-blue);padding:4px 0 4px 20px;font-size:.98rem;line-height:1.55;color:var(--ui-txt)}
.au-also b{color:var(--ui-navy);font-weight:700}
@media(max-width:600px){
  .au-auto{grid-template-columns:minmax(0,1fr);padding:22px 20px}
  .au-auto-n{margin-bottom:12px}
  .au-auto h3{padding-top:0}
}

/* Built with */
.au-built{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.au-built li{font-size:.92rem;font-weight:600;line-height:1.3;padding:9px 14px;background:rgba(43,73,232,.08);color:var(--ui-navy);border-radius:999px}
.au-built-note{margin-top:22px;font-size:.98rem;line-height:1.62;color:var(--ui-txt);max-width:62ch}

/* Related systems, previous and next */
.au-rel{padding:112px 0}
.au-rel.ui-dark h2{color:#fff}
.ui-dark .au-card{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.14)}
.ui-dark .au-card:hover,.ui-dark .au-card:focus-within{border-color:var(--ui-lb2);box-shadow:0 28px 54px -30px rgba(43,73,232,.6)}
.ui-dark .au-card h3,.ui-dark .au-view,.ui-dark .au-price{color:#fff}
.ui-dark .au-card:hover .au-view,.ui-dark .au-card:focus-within .au-view{color:var(--ui-lb)}
.ui-dark .au-outcome,.ui-dark .au-ask{color:rgba(255,255,255,.76)}
.ui-dark .au-ask{text-decoration-color:rgba(255,255,255,.3)}
.ui-dark .au-ask:hover{color:#fff;text-decoration-color:#fff}
.ui-dark .au-ic{background:rgba(159,176,255,.14);color:var(--ui-lb)}
.ui-dark .au-num{color:rgba(255,255,255,.6)}
.ui-dark .au-chips li{color:rgba(255,255,255,.78);border-color:rgba(255,255,255,.18);background:transparent}
.ui-dark .au-card-foot{border-top-color:rgba(255,255,255,.14)}
.ui-dark .au-pn a{border-color:rgba(255,255,255,.14);color:#fff}
.ui-dark .au-pn a:hover{border-color:var(--ui-lb2);background:rgba(255,255,255,.06)}
.ui-dark .au-pn .k{color:rgba(255,255,255,.6)}
.ui-dark .au-pn .v{color:#fff}
.au-rel h2{font-size:clamp(1.6rem,2.6vw,2.1rem);font-weight:800;letter-spacing:-.028em;line-height:1.1;margin-bottom:28px}
.au-pn{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:40px}
.au-pn a{display:flex;flex-direction:column;gap:6px;padding:20px 24px;border:1px solid var(--ui-bd);border-radius:var(--ui-r-sm);background:transparent;transition:border-color .25s,background .25s}
.au-pn a:hover{border-color:var(--ui-blue);background:#fff}
.au-pn .k{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ui-mute)}
.au-pn .v{font-size:1.04rem;font-weight:700;letter-spacing:-.018em;line-height:1.25;color:var(--ui-navy)}
.au-pn .au-next{text-align:right;align-items:flex-end}
@media(max-width:900px){.au-rel{padding:84px 0}}
@media(max-width:600px){.au-pn{grid-template-columns:minmax(0,1fr)}.au-pn .au-next{text-align:left;align-items:flex-start}}

/* Phone and tablet: slim Book a call bar in place of the sidebar */
.au-bar{position:fixed;left:0;right:0;bottom:0;z-index:900;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 20px calc(10px + env(safe-area-inset-bottom,0px));background:#fff;border-top:1px solid var(--ui-bd);box-shadow:0 -16px 34px -26px rgba(10,23,51,.35)}
.au-bar-name{min-width:0;font-size:.92rem;font-weight:700;letter-spacing:-.012em;line-height:1.2;color:var(--ui-navy);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.au-bar .ui-btn{flex:none;min-height:46px;padding:0 20px}
.js .au-bar{transform:translateY(110%);visibility:hidden;transition:transform .3s cubic-bezier(.2,.7,.3,1),visibility 0s .3s}
.js .au-bar.is-on{transform:none;visibility:visible;transition:transform .3s cubic-bezier(.2,.7,.3,1)}
body.menu-open .au-bar{display:none}
@media(min-width:1000px){.au-bar{display:none}}
@media(max-width:999px){.au-detail footer{padding-bottom:calc(42px + 76px + env(safe-area-inset-bottom,0px))}}

@media(prefers-reduced-motion:reduce){
  .au-card,.au-view,.au-view svg,.au-pn a,.js .au-bar,.js .au-bar.is-on{transition:none}
}

.au-auto-meta .au-price-slot:first-child{margin-left:0}
.au-auto-meta .au-pill{white-space:normal}
@media(max-width:760px){.au-tl li:nth-last-child(2)::before{display:none}}