/* How it works page. Loads after pages.css and reuses its tokens (--blue, --ink, --line, --teal). */
:root{--orange:#f07a1a;--soft:#f6f9fe;--navy:#0c1730}

.hw-section{padding:88px 0}
.hw-section.alt{background:var(--soft);border-top:1px solid #edf2f8;border-bottom:1px solid #edf2f8}
.hw-head{max-width:660px;margin-bottom:40px}
.hw-head.center{margin-left:auto;margin-right:auto;text-align:center}
.hw-head h2{font-size:clamp(26px,2.6vw,34px)}
.hw-head p{font-size:15px;line-height:1.7;color:#5b6b82;margin-top:14px}
.hw-num{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:700;letter-spacing:1px;color:var(--blue);margin-bottom:12px;text-transform:uppercase}
.hw-num i{font-style:normal;display:inline-grid;place-items:center;width:22px;height:22px;border-radius:6px;background:#e8f2ff;font-size:10px}

/* ---------- Hero ---------- */
.hw-hero{background:radial-gradient(ellipse at 85% 100%,#e6faff,transparent 55%),linear-gradient(180deg,#f8fbff,#fff);border-bottom:1px solid #edf2f8;padding:56px 0 64px;text-align:center}
.hw-hero .breadcrumb{justify-content:center}
.hw-hero h1{max-width:820px;margin:0 auto}
.hw-hero .hero-description{max-width:640px;margin:20px auto 0;font-size:16px;line-height:1.7;color:#5b6b82}
.hw-hero .buttons{justify-content:center}
.hw-facts{display:flex;justify-content:center;flex-wrap:wrap;gap:12px 40px;margin-top:40px;font-size:13px;color:#5b6b82}
.hw-facts span{display:flex;align-items:center;gap:8px}
.hw-facts svg{width:16px;height:16px;stroke:var(--teal);fill:none;stroke-width:2.2}

/* ---------- Architecture diagram ---------- */
.arch{position:relative;margin-top:8px}
.arch-tower{position:relative;max-width:560px;margin:0 auto;background:var(--navy);color:#fff;border-radius:12px;padding:18px 22px;display:flex;align-items:center;gap:16px;box-shadow:0 20px 40px -24px rgba(12,23,48,.6)}
.arch-tower .ico{flex-shrink:0;width:40px;height:40px;border-radius:10px;background:rgba(255,255,255,.1);display:grid;place-items:center}
.arch-tower .ico svg{width:22px;height:22px;stroke:#8fc0ff;fill:none;stroke-width:1.8}
.arch-tower small{display:block;font-size:10px;letter-spacing:1px;color:#8fc0ff;font-weight:700}
.arch-tower strong{display:block;font-size:16px;margin-top:3px}
.arch-tower ul{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:8px 0 0;padding:0}
.arch-tower li{font-size:11px;color:#c8d6ec;background:rgba(255,255,255,.08);border-radius:4px;padding:3px 8px}
.arch-link{display:flex;flex-direction:column;align-items:center;padding:6px 0}
.arch-link .line{width:2px;height:22px;background:repeating-linear-gradient(to bottom,#9db8dc 0 4px,transparent 4px 8px)}
.arch-link .chips{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:4px 0}
.arch-link .chip{font-size:11px;border-radius:999px;padding:4px 10px;background:#fff;border:1px solid var(--line);color:#4b5d75;white-space:nowrap}
.arch-link .chip.down{border-color:#cfe2ff;color:#1b5fbf}
.arch-link .chip.up{border-color:#bfeee4;color:#0b7a68}
.arch-link .chip.never{border-color:#ffd5d5;color:#c03434;text-decoration:line-through;text-decoration-color:rgba(192,52,52,.5)}

.arch-row{display:grid;grid-template-columns:200px 44px minmax(0,1fr) 44px 200px;align-items:center}
.arch-col h3,.arch-cloud-head{font-size:10px;letter-spacing:1px;font-weight:700;text-transform:uppercase}
.arch-col h3{margin-bottom:10px;color:#64748b;text-align:center}
.arch-col.src h3{color:var(--blue)}.arch-col.snk h3{color:var(--teal)}
.arch-item{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin-top:8px;font-size:12.5px;font-weight:600;color:var(--ink);box-shadow:0 4px 12px -10px rgba(12,23,48,.3)}
.arch-item small{display:block;font-size:10.5px;font-weight:400;color:#7a889c;margin-top:1px}
.arch-item .ico{flex-shrink:0;width:30px;height:30px;border-radius:7px;display:grid;place-items:center}
.arch-item .ico svg{width:16px;height:16px;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.arch-col.src .ico{background:#eaf3ff}.arch-col.src .ico svg{stroke:var(--blue)}
.arch-col.snk .ico{background:#e6f8f4}.arch-col.snk .ico svg{stroke:var(--teal)}

.arch-arrow{position:relative;height:2px;margin:0 6px;background:repeating-linear-gradient(90deg,#9db8dc 0 6px,transparent 6px 11px);background-size:22px 2px;animation:arch-flow 1s linear infinite}
.arch-arrow:after{content:'';position:absolute;right:-2px;top:-4px;border:5px solid transparent;border-left:7px solid #9db8dc;border-right:0}
@keyframes arch-flow{to{background-position:22px 0}}

.arch-cloud{border:2px dashed #b9d3f5;border-radius:16px;padding:16px;background:linear-gradient(180deg,#fbfdff,#f4f9ff)}
.arch-cloud-head{display:flex;justify-content:space-between;align-items:center;gap:10px;color:#1b5fbf;margin-bottom:12px}
.arch-cloud-head span:last-child{font-size:10px;letter-spacing:0;text-transform:none;font-weight:600;color:#0b7a68;background:#e6f8f4;border-radius:999px;padding:3px 9px}
.arch-tf{display:grid;grid-template-columns:1.25fr 1fr;gap:10px}
.arch-box{background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.arch-box h4{margin:0;font-size:10px;letter-spacing:1px;font-weight:700;color:var(--orange);text-transform:uppercase}
.arch-box strong{display:block;font-size:13px;margin-top:4px}
.arch-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}
.arch-tags span{font-size:10.5px;background:#fff4ea;color:#b4570f;border-radius:4px;padding:3px 7px;font-weight:600}
.arch-pipe{display:flex;align-items:center;gap:4px;margin-top:9px;font-size:10px;font-weight:700;color:#8a6a4b;flex-wrap:wrap}
.arch-pipe b{background:#fff4ea;color:#b4570f;border-radius:4px;padding:3px 6px}
.arch-kafka{margin-top:10px;background:var(--blue);background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.07) 0 1px,transparent 1px 12px);color:#fff;border-radius:10px;padding:14px 16px}
.arch-kafka-top{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.arch-kafka strong{font-size:14px}
.arch-kafka small{font-size:11px;color:#d7e8ff}
.arch-topics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:10px}
.arch-topics span{font:11px/1.2 "SFMono-Regular",Consolas,monospace;background:rgba(255,255,255,.14);border-radius:5px;padding:7px 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.arch-topics b{display:block;font:700 9px/1 Arial,sans-serif;letter-spacing:.8px;color:#bcd9ff;margin-bottom:4px}
.arch-svc{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:10px}
.arch-svc div{background:#fff;border:1px solid var(--line);border-radius:8px;padding:9px 10px;font-size:11.5px;font-weight:600;color:var(--ink)}
.arch-svc small{display:block;font-weight:400;font-size:10px;color:#7a889c;margin-top:2px}
.arch-note{margin-top:22px;text-align:center;font-size:12px;color:#7a889c}

/* ---------- Event journey ---------- */
.journey{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;position:relative;counter-reset:j}
.journey:before{content:'';position:absolute;left:12%;right:12%;top:23px;height:2px;background:linear-gradient(90deg,var(--blue),var(--orange) 50%,var(--teal))}
.journey article{position:relative;text-align:center}
.journey .dot{position:relative;z-index:1;width:48px;height:48px;margin:0 auto;border-radius:50%;background:#fff;border:2px solid var(--blue);display:grid;place-items:center;font-weight:700;font-size:15px;color:var(--blue)}
.journey article:nth-child(2) .dot,.journey article:nth-child(3) .dot{border-color:var(--orange);color:var(--orange)}
.journey article:nth-child(4) .dot{border-color:var(--teal);color:var(--teal)}
.journey h3{margin-top:18px;font-size:17px}
.journey p{font-size:13px;line-height:1.65;color:#5b6b82;margin-top:8px;padding:0 6px}
.journey code{display:inline-block;margin-top:12px;font:11px/1 "SFMono-Regular",Consolas,monospace;background:#f2f6fb;border:1px solid var(--line);border-radius:4px;padding:5px 7px;color:#1d3a66}

/* ---------- Two planes ---------- */
.planes{display:grid;grid-template-columns:1fr 210px 1fr;gap:20px;align-items:stretch}
.plane{border-radius:14px;padding:28px;border:1px solid var(--line);background:#fff}
.plane.ours{background:var(--navy);color:#fff;border-color:var(--navy)}
.plane small{font-size:10px;letter-spacing:1px;font-weight:700;color:var(--blue)}
.plane.ours small{color:#8fc0ff}
.plane h3{font-size:21px;margin-top:8px}
.plane p{font-size:13px;line-height:1.65;margin-top:10px;color:#5b6b82}
.plane.ours p{color:#b9c8df}
.plane ul{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:8px}
.plane li{font-size:13px;display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:8px;background:#f6f9fe;color:var(--ink)}
.plane.ours li{background:rgba(255,255,255,.07);color:#e6eefb}
.plane li:before{content:'';width:7px;height:7px;border-radius:2px;background:var(--blue);flex-shrink:0}
.plane.yours li:before{background:var(--teal)}
.crossing{display:flex;flex-direction:column;justify-content:center;gap:10px}
.crossing h4{margin:0 0 4px;text-align:center;font-size:10px;letter-spacing:1px;color:#7a889c;text-transform:uppercase}
.cross{border-radius:10px;padding:12px;font-size:12px;line-height:1.45;text-align:center;border:1px solid var(--line);background:#fff}
.cross b{display:block;font-size:18px;line-height:1;margin-bottom:6px}
.cross.down{border-color:#cfe2ff;color:#1b5fbf}
.cross.up{border-color:#bfeee4;color:#0b7a68}
.cross.never{border-color:#ffd5d5;color:#c03434;background:#fff7f7}

/* ---------- Deploy ---------- */
.deploy{display:grid;grid-template-columns:1fr 1.55fr;gap:48px;align-items:start}
.deploy-meta{display:grid;gap:12px;margin-top:26px}
.deploy-meta div{display:flex;gap:14px;align-items:baseline;border-top:1px solid var(--line);padding-top:12px}
.deploy-meta strong{font-size:24px;color:var(--blue);min-width:112px;flex-shrink:0}
.deploy-meta span{font-size:13px;color:#5b6b82}
.deploy-card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:8px 22px 22px;box-shadow:0 24px 50px -36px rgba(12,23,48,.45)}
.deploy-card .cloud-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:18px;overflow-x:auto}
.deploy-card .cloud-tabs button{border:0;background:none;padding:14px 14px;font-size:13px;font-weight:600;color:#64748b;border-bottom:2px solid transparent;margin-bottom:-1px;cursor:pointer;white-space:nowrap}
.deploy-card .cloud-tabs button[aria-selected=true]{color:var(--blue);border-bottom-color:var(--blue)}
#cloud-panel{display:grid;gap:10px}
#cloud-panel article{display:grid;grid-template-columns:36px 1fr;column-gap:12px;align-items:start;padding:12px;border-radius:10px;border:1px solid var(--line)}
#cloud-panel article small{grid-row:span 2;width:32px;height:32px;border-radius:8px;background:#eaf3ff;color:var(--blue);display:grid;place-items:center;font-weight:700;font-size:12px}
#cloud-panel article h3{font-size:14px;margin-top:2px}
#cloud-panel article p{font-size:12.5px;color:#5b6b82;line-height:1.55;margin-top:3px}
.deploy-creates{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px;padding-top:16px;border-top:1px dashed var(--line);font-size:11px;color:#5b6b82;align-items:center}
.deploy-creates span{background:#f2f6fb;border:1px solid var(--line);border-radius:4px;padding:4px 8px;color:var(--ink);font-weight:600}

/* ---------- Reliability ---------- */
.rely{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.rely article{background:#fff;border:1px solid var(--line);border-radius:12px;padding:22px}
.rely .ico{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:#eaf3ff}
.rely .ico svg{width:20px;height:20px;stroke:var(--blue);fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.rely article:nth-child(2) .ico{background:#fff4ea}.rely article:nth-child(2) .ico svg{stroke:var(--orange)}
.rely article:nth-child(3) .ico{background:#ffefef}.rely article:nth-child(3) .ico svg{stroke:#d64545}
.rely article:nth-child(4) .ico{background:#e6f8f4}.rely article:nth-child(4) .ico svg{stroke:var(--teal)}
.rely h3{margin-top:16px;font-size:15px}
.rely p{font-size:12.5px;line-height:1.65;color:#5b6b82;margin-top:8px}

/* ---------- Ownership ---------- */
.own{display:grid;grid-template-columns:1fr 1.4fr;gap:48px;align-items:center}
.own table{min-width:0}
.own th{font-size:11px;color:#64748b;background:#f9fbfe}
.own td{font-size:13px;color:#4b5d75;padding:14px 16px}
.own td:first-child{color:var(--ink);font-weight:600}
.own .us{color:var(--blue);font-weight:600}

/* ---------- FAQ ---------- */
.hw-faq{display:grid;grid-template-columns:1fr 1.6fr;gap:48px}
.hw-faq details{border-bottom:1px solid var(--line);padding:18px 0}
.hw-faq details:first-child{border-top:1px solid var(--line)}
.hw-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:16px;font-size:15px;font-weight:600}
.hw-faq summary::-webkit-details-marker{display:none}
.hw-faq summary:after{content:'+';font-size:20px;line-height:1;color:var(--blue);transition:transform .2s}
.hw-faq details[open] summary:after{transform:rotate(45deg)}
.hw-faq details p{font-size:13.5px;line-height:1.7;color:#5b6b82;margin-top:10px}

/* ---------- Responsive ---------- */
@media(max-width:1100px){
  .arch-row{grid-template-columns:170px 30px minmax(0,1fr) 30px 170px}
  .arch-svc{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rely{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
  .hw-section{padding:64px 0}
  .arch-row{grid-template-columns:1fr}
  .arch-col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 8px}
  .arch-col h3{grid-column:1/-1;text-align:left}
  .arch-arrow{width:2px;height:28px;margin:10px auto;background:repeating-linear-gradient(180deg,#9db8dc 0 6px,transparent 6px 11px);background-size:2px 22px;animation-name:arch-flow-v}
  .arch-arrow:after{right:-4px;top:auto;bottom:-3px;border:5px solid transparent;border-top:7px solid #9db8dc;border-bottom:0}
  .arch-tf{grid-template-columns:1fr}
  .arch-topics{grid-template-columns:repeat(2,minmax(0,1fr))}
  .journey{grid-template-columns:1fr 1fr;row-gap:36px}
  .journey:before{display:none}
  .planes{grid-template-columns:1fr}
  .crossing{flex-direction:row;flex-wrap:wrap}
  .crossing h4{width:100%}
  .cross{flex:1;min-width:150px}
  .deploy,.own,.hw-faq{grid-template-columns:1fr;gap:28px}
}
@keyframes arch-flow-v{to{background-position:0 22px}}
@media(max-width:560px){
  .arch-col{grid-template-columns:1fr}
  .journey,.rely{grid-template-columns:1fr}
  .arch-tower{flex-direction:column;align-items:flex-start}
}
@media(prefers-reduced-motion:reduce){.arch-arrow{animation:none}}

/* Grid children must be allowed to shrink, or the nowrap cloud tabs widen the column past the screen */
.deploy>*,.own>*,.hw-faq>*,.planes>*,.arch-row>*{min-width:0}