/* Automations hub (automations.html only), loaded after style.css and theme.css.
   The theme (tokens, dark section, labels, buttons, hero, demo window, stats strip, cards, call-to-action
   panel, header over the dark hero) lives in theme.css. This file holds only what the hub alone uses:
   the system filter, the system card grid, the flagship card and its timeline, the three-step How it works
   row, and the compliance proof cards' quote line. Every class here starts with hub-. */

/* ===== Filter pills ===== */
.hub-filters{display:none;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:32px}
.js .hub-filters{display:flex}
.hub-chip{min-height:44px;padding:0 20px;border:1px solid var(--ui-bd);border-radius:999px;background:#fff;font-family:var(--body);font-size:15px;font-weight:600;line-height:1;color:var(--ui-navy);cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.hub-chip:hover{border-color:var(--ui-blue)}
.hub-chip[aria-pressed="true"]{background:var(--ui-navy);border-color:var(--ui-navy);color:#fff}
.hub-count{margin-left:auto;font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ui-mute)}

/* ===== System cards ===== */
.hub-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px}
.hub-card{position:relative;grid-column:span 3;display:flex;flex-direction:column;padding:28px;background:#fff;border:1px solid var(--ui-bd);border-radius:var(--ui-r);scroll-margin-top:110px;transition:translate .3s cubic-bezier(.2,.7,.3,1),border-color .3s,box-shadow .3s}
.hub-card[hidden]{display:none}
.hub-card:hover,.hub-card:focus-within{border-color:var(--ui-blue);box-shadow:0 28px 54px -30px rgba(43,73,232,.5)}
@media(hover:hover) and (prefers-reduced-motion:no-preference){.hub-card:hover{translate:0 -4px}}
.hub-card:has(.hub-link:focus-visible){outline:2px solid var(--ui-blue);outline-offset:3px}
.hub-link{color:inherit}
.hub-link::after{content:"";position:absolute;inset:0;z-index:3;border-radius:var(--ui-r)}
.hub-link:focus-visible{outline:none}
.hub-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.hub-card h3{margin-top:24px;font-size:1.22rem;font-weight:800;letter-spacing:-.022em;line-height:1.2;color:var(--ui-navy);text-wrap:balance}
.hub-line{margin:10px 0 24px;font-size:.98rem;line-height:1.55;color:var(--ui-txt)}
.hub-meta{margin-top:auto;display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.hub-card:hover .ui-view,.hub-card:focus-within .ui-view{color:var(--ui-blue)}
.hub-card:hover .ui-view svg{transform:translateX(5px)}
.hub-anchor{position:absolute;top:0;left:0;width:0;height:0;scroll-margin-top:110px}

/* S02 and S03: cards with a small demo panel */
.hub-mid{grid-column:span 6;padding:32px}
.hub-mid h3{font-size:clamp(1.4rem,2.2vw,1.7rem);letter-spacing:-.028em;line-height:1.12}
.hub-mid .hub-line{font-size:1.04rem;margin-bottom:22px}
.hub-prev{position:relative;flex:1;display:flex;flex-direction:column;justify-content:center;gap:10px;margin-bottom:24px;padding:44px 20px 20px;background:var(--ui-bg);border:1px solid var(--ui-bd);border-radius:14px}
.hub-prev .ui-tag{position:absolute;top:12px;right:12px;margin:0;background:#fff;border:1px solid var(--ui-bd)}
.hub-bub{max-width:84%;padding:11px 15px;font-size:14.5px;line-height:1.45}
.hub-bub-out{align-self:flex-end;background:var(--ui-blue);color:#fff;border-radius:16px 16px 4px 16px}
.hub-bub-in{align-self:flex-start;background:#fff;border:1px solid var(--ui-bd);color:var(--ui-navy);border-radius:16px 16px 16px 4px}
.hub-sys{align-self:center;display:inline-flex;align-items:center;gap:8px;margin-top:4px;padding:6px 13px;border-radius:999px;background:#fff;border:1px solid var(--ui-bd);font-size:13px;font-weight:600;color:var(--ui-txt)}
.hub-sys::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ui-blue)}
.hub-batch-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:10px 2px;border-bottom:1px solid var(--ui-bd);font-size:14.5px;color:var(--ui-mute)}
.hub-batch-row b{font-weight:700;color:var(--ui-navy)}
.hub-batch-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-top:8px}
.hub-batch-foot span{font-size:13.5px;line-height:1.4;color:var(--ui-mute)}
.hub-batch-foot .hub-fakebtn{padding:10px 18px;border-radius:10px;background:var(--ui-blue);font-size:14px;font-weight:700;color:#fff}

/* S01 flagship: dark card with the review timeline */
.hub-flag{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:64px;align-items:center;padding:52px;overflow:hidden;color:#fff;border-color:var(--ui-navy);background-color:var(--ui-navy);background-image:radial-gradient(58% 95% at 76% 38%,rgba(43,73,232,.38),transparent 72%),radial-gradient(circle,rgba(255,255,255,.07) 1px,transparent 1.5px);background-size:auto,26px 26px}
.hub-flag[hidden]{display:none}
/* the columns stay unpositioned so the title link can cover the whole card */
.hub-flag>div{min-width:0}
.hub-flag .ui-ic{background:rgba(159,176,255,.14);color:var(--ui-lb)}
.hub-flag .ui-num{color:var(--ui-lb)}
.hub-flag h3{font-size:clamp(1.8rem,3.2vw,2.6rem);letter-spacing:-.03em;line-height:1.05;color:#fff}
.hub-flag .hub-line{margin:16px 0 26px;font-size:1.1rem;color:rgba(255,255,255,.76)}
.hub-flag .ui-pill{background:rgba(159,176,255,.16);color:#C3CDFF}
.hub-flag .ui-live{color:rgba(255,255,255,.78)}
.hub-flag .ui-view{margin-top:28px;color:#fff}
.hub-flag:hover .ui-view,.hub-flag:focus-within .ui-view{color:var(--ui-lb)}
.hub-flag:hover,.hub-flag:focus-within{border-color:var(--ui-lb2);box-shadow:0 32px 64px -30px rgba(43,73,232,.7)}
.hub-tl{position:relative;list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.hub-tl::before{content:"";position:absolute;left:10px;top:9px;width:75%;height:2px;border-radius:2px;background:linear-gradient(90deg,#7D93FF,#2B49E8);box-shadow:0 0 14px rgba(125,147,255,.9);transform-origin:0 50%}
.hub-tl li{position:relative;padding:44px 18px 0 0}
.hub-tl li::before{content:"";position:absolute;left:0;top:0;width:20px;height:20px;border-radius:50%;box-sizing:border-box;background:var(--ui-navy);border:3px solid #9FB0FF;box-shadow:0 0 0 6px rgba(125,147,255,.14),0 0 22px rgba(125,147,255,.95)}
.hub-tl b{display:block;font-size:1.4rem;font-weight:800;letter-spacing:-.03em;line-height:1.1;color:#fff}
.hub-tl span{display:block;margin-top:8px;font-size:14.5px;line-height:1.5;color:rgba(255,255,255,.72)}
.hub-tl-note{margin-top:30px;padding-top:20px;border-top:1px solid rgba(255,255,255,.14);font-size:14.5px;line-height:1.55;color:rgba(255,255,255,.66)}

/* ===== How it works ===== */
.hub-how{position:relative;list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;text-align:center}
.hub-how::before{content:"";position:absolute;top:35px;left:16.666%;right:16.666%;height:3px;border-radius:3px;background:linear-gradient(90deg,#0A1733,#2B49E8 50%,#9FB0FF)}
.hub-tile{position:relative;width:72px;height:72px;margin:0 auto 28px;border-radius:18px;display:grid;place-items:center;font-size:1.5rem;font-weight:800;line-height:1;color:#fff;background:var(--ui-navy);box-shadow:0 0 0 12px #fff}
.hub-how li:nth-child(2) .hub-tile{background:var(--ui-blue)}
.hub-how li:nth-child(3) .hub-tile{background:#9FB0FF;color:var(--ui-navy)}
.hub-how h3{font-size:1.32rem;font-weight:800;letter-spacing:-.024em;line-height:1.2;color:var(--ui-navy);text-wrap:balance}
.hub-how p{max-width:32ch;margin:12px auto 0;font-size:1.02rem;line-height:1.6;color:var(--ui-txt)}

/* ===== Compliance proof: the quote line on the first two cards ===== */
.hub-say{margin-top:auto;font-size:clamp(1.2rem,1.7vw,1.38rem);font-weight:600;letter-spacing:-.016em;line-height:1.4;color:#fff}

/* ===== Related reporting work ===== */
.hub-rel-links{margin-top:32px;font-size:1rem;color:var(--ui-txt)}

/* ===== Motion: timeline draw-in. Off for reduced motion. ===== */
@media(prefers-reduced-motion:no-preference){
  .js .hub-flag .hub-tl::before{transform:scaleX(0)}
  .js .hub-flag .hub-tl li{opacity:0;translate:0 10px}
  .js .hub-flag.is-in .hub-tl::before{transform:none;transition:transform 1.5s cubic-bezier(.4,0,.2,1) .25s}
  .js .hub-flag.is-in .hub-tl li{opacity:1;translate:none;transition:opacity .5s,translate .5s cubic-bezier(.2,.7,.3,1);transition-delay:calc(.3s + var(--i,0)*.38s)}
}
@media(prefers-reduced-motion:reduce){
  .hub-card,.hub-chip{transition:none}
}

/* ===== Smaller screens ===== */
@media(max-width:1000px){
  .ui-hero-tall .ui-hero-grid{padding-bottom:150px}
  .hub-card{grid-column:span 6}
  .hub-flag{grid-column:1/-1;grid-template-columns:minmax(0,1fr);gap:44px;padding:40px}
}
@media(max-width:760px){
  .hub-mid{grid-column:1/-1}
  .hub-how{grid-template-columns:minmax(0,1fr);gap:44px}
  .hub-how::before{display:none}
  .hub-tile{box-shadow:none;margin-bottom:20px}
}
@media(max-width:600px){
  .hub-grid{gap:16px}
  .hub-card{grid-column:1/-1;padding:24px}
  .hub-mid{padding:24px}
  .hub-flag{padding:28px 24px;gap:36px}
  .ui-stats.ui-overlap{margin-top:-60px}
  .hub-count{width:100%;margin:6px 0 0}
  .hub-tl{grid-template-columns:minmax(0,1fr)}
  .hub-tl::before{left:9px;top:10px;width:2px;height:calc(100% - 60px);background:linear-gradient(180deg,#7D93FF,#2B49E8);transform-origin:50% 0}
  .hub-tl li{padding:0 0 22px 40px}
  .hub-tl li:last-child{padding-bottom:0}
  .hub-tl span{margin-top:4px}
}
@media(max-width:600px) and (prefers-reduced-motion:no-preference){
  .js .hub-flag .hub-tl::before{transform:scaleY(0)}
  .js .hub-flag.is-in .hub-tl::before{transform:none}
}