.crumbs{font-size:.875rem; color:var(--muted); display:flex; gap:8px; align-items:center; margin-bottom:28px}
.crumbs a{text-decoration:none; color:var(--muted)}
.crumbs a:hover{color:var(--ink)}
.crumbs span[aria-hidden]{color:var(--faint)}
.w-hero h1{font-size:clamp(2.5rem, 6vw, 4.25rem); letter-spacing:-0.045em; line-height:1; font-weight:600}
.w-hero h1 .l2{display:block; color:var(--violet-ink)}
.partner-row{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:24px}
.partner-row .tag{margin:0}
/* Features */
.feat-grid{display:grid; grid-template-columns:minmax(0,1fr); gap:16px; margin-top:48px}
@media (min-width:700px){ .feat-grid{grid-template-columns:repeat(2, minmax(0,1fr))} }
@media (min-width:1080px){ .feat-grid{grid-template-columns:repeat(3, minmax(0,1fr))} }
.feat{display:grid; gap:12px; align-content:start; padding:26px; background:var(--raised); border:1px solid var(--line); border-radius:var(--r-lg); transition:border-color .25s, box-shadow .25s, transform .25s}
.feat:hover{border-color:var(--line-strong); box-shadow:var(--shadow); transform:translateY(-2px)}
.feat h3{font-size:1.1875rem; letter-spacing:-0.02em}
.feat p{color:var(--muted); font-size:.9688rem}
.src-note{margin-top:20px; font-size:.8125rem; color:var(--faint)}
.src-note a{color:var(--muted)}

/* Tabbed sets (use cases, method) */
.tabset{margin-top:48px; display:grid; gap:16px; grid-template-columns:minmax(0,1fr)}
.t-tabs{display:none}
.t-panel{padding:26px; background:var(--raised); border:1px solid var(--line); border-radius:var(--r-lg); display:grid; gap:14px; align-content:start}
.t-panel .num{font-family:var(--mono); font-size:.8125rem; color:var(--teal-ink)}
.t-panel h3{font-size:1.375rem; letter-spacing:-0.03em}
.t-panel p{color:var(--muted); font-size:1.0625rem; max-width:40em}
.t-panel .covers{display:flex; flex-wrap:wrap; gap:6px}
.t-panel .covers span{font-size:.8125rem; font-weight:500; padding:5px 10px; border-radius:8px; background:var(--surface); border:1px solid var(--line)}
.t-panel ul.how{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.t-panel ul.how li{display:grid; grid-template-columns:20px minmax(0,1fr); gap:10px; color:var(--ink); font-size:.9688rem}
.t-panel ul.how .icon{width:18px; height:18px; color:var(--teal-ink); margin-top:2px}
.sample{justify-self:start; max-width:30em; font-size:.9375rem; line-height:1.45; padding:12px 14px; border-radius:14px 14px 14px 4px; background:var(--surface); border:1px solid var(--line)}
.sample .lbl{display:block; font-size:.75rem; font-weight:600; color:var(--muted); margin-bottom:4px}
@media (min-width:960px){
  .tabset{grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:32px; align-items:stretch}
  .t-tabs{display:grid; gap:4px; align-content:start}
  .t-tab{display:grid; grid-template-columns:40px minmax(0,1fr); gap:12px; align-items:center; width:100%; text-align:left; font:inherit; color:var(--muted); background:transparent; border:1px solid transparent; border-radius:var(--r); padding:12px 14px; cursor:pointer; transition:background-color .2s, border-color .2s, color .2s}
  .t-tab .n{font-family:var(--mono); font-size:.8125rem; width:40px; height:40px; border-radius:12px; display:grid; place-items:center; background:var(--surface); border:1px solid var(--line); color:var(--muted); transition:background-color .2s, color .2s, border-color .2s}
  .t-tab .n .icon{width:18px; height:18px}
  .t-tab b{font-weight:600; font-size:1rem; letter-spacing:-0.01em}
  .t-tab:hover{background:var(--surface); color:var(--ink)}
  .t-tab[aria-selected="true"]{background:var(--raised); border-color:var(--line); box-shadow:var(--shadow); color:var(--ink)}
  .t-tab[aria-selected="true"] .n{background:var(--btn-bg); color:var(--btn-fg); border-color:transparent}
  .t-panel{padding:44px}
  .t-panel h3{font-size:2rem}
  .t-panel:not(.on){display:none}
  .t-panel.on{animation:fade .4s ease both}
}
/* Integrations */
.int-wrap{display:grid; grid-template-columns:minmax(0,1fr); gap:16px; margin-top:48px}
@media (min-width:960px){ .int-wrap{grid-template-columns:minmax(0,7fr) minmax(0,5fr)} }
.int-main{padding:30px; background:var(--raised); border:1px solid var(--line); border-radius:var(--r-lg); display:grid; gap:16px; align-content:start}
.int-main .logos{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.int-main .logos .plus{color:var(--faint); font-weight:600}
.int-main .zc img{height:30px}
.int-main .zv img{height:28px}
.int-main h3{font-size:1.5rem; letter-spacing:-0.03em}
.int-main ul{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.int-main li{display:grid; grid-template-columns:20px minmax(0,1fr); gap:10px; font-size:.9688rem}
.int-main li .icon{width:18px; height:18px; color:var(--teal-ink); margin-top:2px}
.int-side{padding:30px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); display:grid; gap:14px; align-content:start}
.int-side h3{font-size:1.25rem; letter-spacing:-0.025em}
.int-side p{color:var(--muted); font-size:.9688rem}
.chips-lg{display:flex; flex-wrap:wrap; gap:8px}
.chips-lg span{font-size:.875rem; font-weight:500; padding:7px 12px; border-radius:999px; background:var(--raised); border:1px solid var(--line)}

/* FAQ + CTA */
.faq{margin-top:40px; border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:16px; padding:22px 0; font-size:1.125rem; font-weight:600; letter-spacing:-0.015em}
.faq summary::-webkit-details-marker{display:none}
.faq summary .pm{flex:none; width:28px; height:28px; border-radius:8px; display:grid; place-items:center; border:1px solid var(--line); color:var(--muted); transition:transform .25s, background-color .2s}
.faq details[open] summary .pm{transform:rotate(45deg); background:var(--surface)}
.faq details p{color:var(--muted); padding:0 0 22px; max-width:46em}
.faq-grid{display:grid; grid-template-columns:minmax(0,1fr); gap:24px}
@media (min-width:960px){ .faq-grid{grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:64px} .faq{margin-top:0} }
.cta-panel.slim{grid-template-columns:minmax(0,1fr)}
@media (min-width:1000px){ .cta-panel.slim{grid-template-columns:minmax(0,7fr) minmax(0,5fr); align-items:end} }
/* Workflow Automation page additions: same tokens and components as the approved pages */
:root{ --rec-bg:#F6F4FC; --rec-ink:#16122B; --rec-muted:#6B6785; --rec-line:#E3DEF0; --rec-card:#FFFFFF; --rec-head:#2A2160; }

/* Workflow console */
.console-top .seg{flex:none}
.wf-body{position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1fr); gap:6px; padding:16px 16px 0}
@media (min-width:600px){ .wf-body{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:14px; padding:18px 18px 4px} }
.rec{background:var(--rec-bg); color:var(--rec-ink); border-radius:18px; overflow:hidden; border:1px solid var(--console-line); display:flex; flex-direction:column; align-self:start}
.rec-top{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:9px 12px; background:var(--rec-head); color:#FFFFFF; font-size:.75rem; font-weight:600}
.rec-top .mod{font-family:var(--mono); font-size:.625rem; font-weight:500; opacity:.8}
.rec-title{display:flex; align-items:center; gap:10px; padding:14px 14px 10px}
.rec-av{width:38px; height:38px; flex:none; border-radius:11px; display:grid; place-items:center; color:#FFFFFF; font-weight:600; font-size:.8125rem; background:linear-gradient(135deg, #40328E, #25BBB5)}
.rec-title b{display:block; font-size:.9375rem; line-height:1.25}
.rec-title small{display:block; font-size:.6875rem; color:var(--rec-muted)}
.rec-fields{margin:0; padding:0 10px 12px; display:grid; gap:4px}
.rec-row{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:8px; align-items:center; padding:7px 9px; border-radius:9px; background:var(--rec-card); border:1px solid var(--rec-line); font-size:.75rem; transition:border-color .3s, box-shadow .3s}
.rec-row dt{color:var(--rec-muted)}
.rec-row dd{margin:0; font-weight:600; text-align:right; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.rec-row dd.empty{color:#B3AECB; font-weight:500}
.rec-row.chg{border-color:#25BBB5; box-shadow:0 0 0 3px rgba(37,187,181,.14)}
.rec-row.chg dd{animation:pop .35s cubic-bezier(.2,.7,.2,1) both}
.pill-s{display:inline-block; font-size:.625rem; font-weight:600; padding:2px 8px; border-radius:999px; background:#ECE8F7; color:#40328E}
.pill-s.ok{background:#D9F3F1; color:#0B7A75}
.pill-s.warn{background:#FBE7DA; color:#8A3B12}
@keyframes pop{from{opacity:0; transform:translateY(4px)} to{opacity:1; transform:none}}
.wf-flow{padding:6px 0 8px}
.wf-flow .rail{left:19px; top:28px; bottom:28px}
.wf-flow .step{padding:7px 0; gap:12px}
.wf-flow .step-detail{font-size:.8125rem}
.kind{display:inline-block; margin-left:6px; font-family:var(--mono); font-size:.5938rem; letter-spacing:.02em; padding:1px 6px; border-radius:999px; border:1px solid rgba(66,214,207,.4); color:var(--console-teal); vertical-align:1px}
.kind.x{border:1px dashed rgba(174,159,247,.6); color:var(--console-violet)}
.kind.c{border:1px solid rgba(232,170,214,.55); color:#F0B8DF}
.wf-foot{flex-wrap:wrap}
.legend{display:flex; flex-wrap:wrap; gap:6px 14px; font-size:.75rem}
.legend span{display:inline-flex; align-items:center; gap:6px}
.legend .kind{margin:0}
@media (max-width:599px){ .wf-flow .step:not([data-state="running"]) .step-detail{display:none} .rec-row{padding:6px 8px} }

/* Light-surface kind tags */
.k-tag{display:inline-flex; align-items:center; gap:5px; font-family:var(--mono); font-size:.6875rem; padding:3px 9px; border-radius:999px; border:1px solid color-mix(in srgb, var(--teal) 45%, var(--line)); color:var(--teal-ink); background:var(--teal-soft); white-space:nowrap}
.k-tag.x{border:1px dashed color-mix(in srgb, var(--violet) 55%, var(--line)); color:var(--violet-ink); background:var(--violet-soft)}
.k-tag.c{border:1px solid color-mix(in srgb, #B0478F 40%, var(--line)); color:var(--pink-ink); background:var(--pink-soft)}
:root{ --pink-ink:#8E2F6E; --pink-soft:#FBEAF4; }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --pink-ink:#F0B8DF; --pink-soft:#2A1530; } }
:root[data-theme="dark"]{ --pink-ink:#F0B8DF; --pink-soft:#2A1530; }

/* Native, connector, custom */
.kinds{display:grid; grid-template-columns:minmax(0,1fr); gap:16px; margin-top:48px}
@media (min-width:960px){ .kinds{grid-template-columns:repeat(3, minmax(0,1fr))} }
.kcard{padding:28px; border-radius:var(--r-lg); border:1px solid var(--line); background:var(--raised); display:grid; gap:14px; align-content:start}
.kcard.x{border-style:dashed; border-color:var(--line-strong); background:var(--surface)}
.kcard .k-tag{justify-self:start}
.kcard h3{font-size:1.25rem; letter-spacing:-0.025em}
.kcard > p{color:var(--muted); font-size:.9688rem}
.kcard ul{list-style:none; margin:0; padding:0; display:grid; gap:9px}
.kcard li{display:grid; grid-template-columns:20px minmax(0,1fr); gap:10px; font-size:.9375rem}
.kcard li .icon{width:18px; height:18px; color:var(--teal-ink); margin-top:2px}
.kcard.x li .icon{color:var(--violet-ink)}
.kcard.c li .icon{color:var(--pink-ink)}
.kcard .when{font-size:.8125rem; color:var(--faint); border-top:1px solid var(--line); padding-top:12px}
.principle{margin-top:20px; display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; font-size:.9375rem; color:var(--muted)}
.principle .arrow{color:var(--faint)}

/* Tool panels */
.tool-logos{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.tool-logos .brand-plate img{height:28px}
.tool-logos .word{font-weight:700; font-size:1.0625rem; letter-spacing:-0.02em; color:#1F1A3A}
.t-panel .plan{font-size:.875rem; color:var(--faint); border-top:1px solid var(--line); padding-top:12px; max-width:none}

/* Automation examples */
.ex-grid{display:grid; grid-template-columns:minmax(0,1fr); gap:16px; margin-top:48px}
@media (min-width:700px){ .ex-grid{grid-template-columns:repeat(2, minmax(0,1fr))} }
@media (min-width:1080px){ .ex-grid{grid-template-columns:repeat(3, minmax(0,1fr))} }
.ex{display:grid; gap:12px; align-content:start; padding:24px; background:var(--raised); border:1px solid var(--line); border-radius:var(--r-lg); text-decoration:none; color:inherit; transition:border-color .25s, box-shadow .25s, transform .25s}
a.ex:hover{border-color:var(--line-strong); box-shadow:var(--shadow); transform:translateY(-2px)}
.ex .top{display:flex; justify-content:space-between; align-items:center; gap:10px}
.ex h3{font-size:1.125rem; letter-spacing:-0.02em}
.ex .chain{display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-size:.8125rem; font-weight:500}
.ex .chain span{padding:4px 9px; border-radius:8px; background:var(--surface); border:1px solid var(--line)}
.ex .chain i{font-style:normal; color:var(--faint)}
.ex p{color:var(--muted); font-size:.9375rem}
.ex .more{font-size:.875rem; font-weight:600; color:var(--violet-ink); display:inline-flex; align-items:center; gap:6px}
.ex .more .icon{width:15px; height:15px}
@media (prefers-reduced-motion: reduce){ .rec-row.chg dd{animation:none} }