/* /how-it-works/ How we work (builder D, 11 Nov 2026). Four steps in depth, the prop-firm difference, reporting, FAQ. */

/* ---------- hero: the four steps as a track on the sky band ---------- */
.hw-hero .p-hero-in{padding-bottom:64px}
.hw-stage{padding-bottom:88px}
.hw-stage .p-band{top:96px}
.hw-track{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.hw-track li{display:flex}
.hw-tk{flex:1;display:flex;flex-direction:column;align-items:flex-start;padding:24px 24px 24px;border-radius:26px;background:#fff;box-shadow:0 2px 6px rgba(3,46,74,.06),0 30px 60px rgba(3,46,74,.16);transition:transform .6s var(--ease)}
.hw-tk:hover{transform:translateY(-5px)}
.hw-tk-ic{display:grid;place-items:center;width:54px;height:54px;border-radius:17px;background:linear-gradient(160deg,#8DD3FB,#1DA1F2);color:var(--navy);box-shadow:0 12px 24px rgba(29,161,242,.32)}
.hw-tk-s{margin-top:22px;font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--sky-deep)}
.hw-tk-t{margin-top:6px;font-size:26px;line-height:1.1;font-weight:700;letter-spacing:-.03em}
.hw-tk-c{display:inline-flex;align-items:center;gap:7px;height:32px;margin-top:18px;padding:0 13px;border-radius:99px;background:var(--ice);border:1px solid var(--ice-2);color:var(--sky-deep);font-size:13px;font-weight:700;white-space:nowrap}

/* ---------- the four steps ---------- */
.hs-sec{padding:56px 0 24px;background:#fff}
.hs{position:relative;padding:76px 0}
.hs + .hs{margin-top:36px}
.hs-c1{--hs-bg:radial-gradient(700px 420px at 20% 0%,rgba(255,255,255,.42),rgba(255,255,255,0) 70%),linear-gradient(150deg,#86D0FB 0%,#38AEF5 55%,#1DA1F2 100%);--hs-dot:rgba(255,255,255,.28)}
.hs-c2{--hs-bg:radial-gradient(700px 420px at 80% 0%,rgba(29,161,242,.32),rgba(29,161,242,0) 70%),linear-gradient(150deg,#0A3D5F 0%,#032E4A 55%,#021C2E 100%);--hs-dot:rgba(29,161,242,.3)}
.hs-c3{--hs-bg:radial-gradient(700px 420px at 20% 0%,rgba(127,205,251,.45),rgba(127,205,251,0) 70%),linear-gradient(150deg,#1590DD 0%,#0B79BC 55%,#0A6DAE 100%);--hs-dot:rgba(255,255,255,.2)}
.hs-c4{--hs-bg:radial-gradient(700px 420px at 80% 0%,rgba(255,255,255,.85),rgba(255,255,255,0) 70%),linear-gradient(150deg,#EEF8FF 0%,#CBE8FD 100%);--hs-dot:rgba(29,161,242,.2)}
.hs-slab{position:absolute;top:0;bottom:0;overflow:hidden;background:var(--hs-bg)}
.hs-l .hs-slab{left:0;right:calc(50% - 20px);border-radius:0 48px 48px 0}
.hs-r .hs-slab{right:0;left:calc(50% - 20px);border-radius:48px 0 0 48px}
.hs-dots{position:absolute;inset:0;background-image:radial-gradient(var(--hs-dot) 1.2px,transparent 1.4px);background-size:22px 22px}
.hs-in{position:relative;display:grid;grid-template-columns:600px 1fr;gap:80px;align-items:center}
.hs-r .hs-in{grid-template-columns:1fr 600px}
.hs-art{position:relative}

.hs-k{display:flex;align-items:center;gap:12px;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--sky-deep)}
.hs-badge{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--navy);color:#fff;font-size:15px;font-weight:900;letter-spacing:0}
.hs-chip{display:inline-flex;align-items:center;gap:7px;height:32px;margin-left:6px;padding:0 13px;border-radius:99px;background:var(--ice);border:1px solid var(--ice-2);color:var(--sky-deep);font-size:13px;font-weight:700;letter-spacing:0;text-transform:none;white-space:nowrap}
.hs-h{margin-top:20px;font-size:56px;line-height:1.02;font-weight:700;letter-spacing:-.04em}
.hs-p{margin-top:18px;max-width:540px;font-size:18.5px;line-height:1.6;font-weight:500;color:var(--ink-2)}
.hs-lists{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:30px}
.hs-need,.hs-get{padding:20px 22px 22px;border-radius:22px}
.hs-need{background:#F5F9FC;border:1px solid #E4EEF6}
.hs-get{background:#fff;border:1.5px solid var(--ice-2);box-shadow:var(--sh-card)}
.hs-lh{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.hs-get .hs-lh{color:var(--sky-deep)}
.hs-need ul,.hs-get ul{display:grid;gap:10px;margin-top:14px}
.hs-need li{position:relative;padding-left:18px;font-size:15px;line-height:1.45;font-weight:600}
.hs-need li::before{content:"";position:absolute;left:1px;top:8px;width:7px;height:7px;border-radius:50%;background:var(--sky)}
.hs-get li{display:flex;align-items:flex-start;gap:10px;font-size:15px;line-height:1.45;font-weight:600}
.hs-get .tk{width:20px;height:20px;margin-top:1px;background:var(--sky);color:var(--navy)}

/* drawn UI panels (Example data) */
.ui{position:relative;z-index:1;color:var(--navy);background:#fff;border-radius:24px;padding:20px 22px 22px;box-shadow:var(--sh-deep)}
.ui-top{display:flex;align-items:center;gap:12px;padding-bottom:16px;border-bottom:1px solid #E8EFF5}
.ui-ic{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:12px}
.ui-ic-navy{background:var(--navy);color:#fff}
.ui-ic-sky{background:var(--sky);color:var(--navy)}
.ui-tt{display:flex;flex-direction:column;flex:1;min-width:0;line-height:1.2}
.ui-tt b{font-size:16px;font-weight:700}
.ui-tt small{margin-top:2px;font-size:12.5px;font-weight:500;color:var(--ink-3)}
.ui-top .ex{margin-left:auto}
.ui-k{display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.ui-k .ex{letter-spacing:.02em;text-transform:none}

/* 01 call */
.ui-rec{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 12px;border-radius:99px;background:#FCE7E8;color:#C22F33;font-size:12.5px;font-weight:700;white-space:nowrap}
.ui-rec i{width:7px;height:7px;border-radius:50%;background:var(--down)}
.call-body{display:grid;grid-template-columns:196px 1fr;gap:14px;margin-top:16px}
.call-who{display:grid;gap:10px}
.call-tile{position:relative;display:grid;place-items:center;height:106px;border-radius:16px;overflow:hidden}
.call-yf{background:radial-gradient(160px 110px at 70% 20%,rgba(255,181,71,.28),rgba(255,181,71,0) 70%),var(--yf-bg)}
.call-yf .yf-mark{width:46px;height:46px;border-radius:14px}
.call-at{background:radial-gradient(160px 110px at 70% 20%,rgba(29,161,242,.35),rgba(29,161,242,0) 70%),linear-gradient(160deg,#0A3D5F,#032E4A)}
.call-tile small{position:absolute;left:10px;bottom:9px;padding:2px 8px;border-radius:6px;background:rgba(0,0,0,.42);color:#fff;font-size:11px;font-weight:600}
.call-agenda{padding:14px 16px 16px;border-radius:16px;background:#F5F9FC;border:1px solid #E4EEF6}
.call-agenda ul{display:grid;gap:10px;margin-top:12px}
.call-agenda li{display:flex;align-items:center;gap:10px;font-size:14px;line-height:1.3;font-weight:600;color:var(--ink-3)}
.call-agenda .ck{display:grid;place-items:center;flex:none;width:20px;height:20px;border-radius:50%;border:1.5px solid #CFDEEA;background:#fff}
.call-agenda li.done{color:var(--navy)}
.call-agenda li.done .ck{background:var(--up);border-color:var(--up);color:#fff}
.call-agenda li.now{color:var(--navy);font-weight:700}
.call-agenda li.now .ck{border-color:var(--sky)}
.call-agenda li.now .ck i{width:8px;height:8px;border-radius:50%;background:var(--sky)}
.call-notes{margin-top:14px;padding:14px 16px 16px;border-radius:16px;background:var(--ice);border:1px solid var(--ice-2)}
.call-notes ul{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.call-notes li{display:inline-flex;align-items:center;height:30px;padding:0 12px;border-radius:99px;background:#fff;border:1px solid var(--ice-2);font-size:13px;font-weight:600}

/* 02 roadmap */
.road-k{margin-top:16px}
.road-list{display:grid;gap:8px;margin-top:10px}
.road-list li{display:grid;grid-template-columns:34px 1fr auto;align-items:center;gap:12px;padding:11px 14px 11px 11px;border-radius:14px;background:#F5F9FC;border:1px solid #E4EEF6}
.road-list li:first-child{background:linear-gradient(160deg,#E9F6FF,#D4ECFD);border-color:var(--ice-2)}
.rn{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--navy);color:#fff;font-size:15px;font-weight:700}
.rt{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.rt b{font-size:14.5px;font-weight:700}
.rt small{margin-top:1px;font-size:12px;font-weight:600;color:var(--sky-deep)}
.rw{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:99px;background:#fff;border:1px solid #DCE7F0;font-size:12px;font-weight:700;color:var(--ink-2);white-space:nowrap}
.road-foot{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:8px;margin-top:14px}
.road-foot div{padding:11px 13px 12px;border-radius:14px;border:1px dashed #C9DAE7}
.road-foot small{display:block;font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3)}
.road-foot b{display:block;margin-top:4px;font-size:13.5px;line-height:1.3;font-weight:700}

/* 03 launch */
.ln-list{margin-top:4px}
.ln-list li{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 2px;border-bottom:1px solid #EDF2F6}
.ln-t{display:flex;flex-direction:column;line-height:1.25}
.ln-t b{font-size:14.5px;font-weight:700}
.ln-t small{margin-top:1px;font-size:12px;font-weight:600;color:var(--ink-3)}
.ln-foot{display:flex;align-items:center;gap:14px;margin-top:16px}
.ln-bar{flex:1;height:8px;border-radius:99px;background:#EDF3F8;overflow:hidden}
.ln-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--sky),var(--deep-2))}
.ln-n{font-size:13px;font-weight:500;color:var(--ink-2);white-space:nowrap}
.ln-n b{font-weight:700;color:var(--navy)}
.ln-go{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 16px;border-radius:99px;background:var(--navy);color:#fff;font-size:13.5px;font-weight:700;white-space:nowrap}

/* 04 weekly review */
.wr-kpis{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.wr-ads{display:grid;gap:8px;margin-top:12px}
.wr-ads li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px 10px 14px;border-radius:14px;background:#F5F9FC;border:1px solid #E4EEF6}
.wr-ads li.off .wr-n{opacity:.5}
.wr-n{display:flex;flex-direction:column;line-height:1.25}
.wr-n b{font-size:14px;font-weight:700}
.wr-n small{margin-top:1px;font-size:12px;font-weight:600;color:var(--ink-3)}
.wr-note{display:flex;align-items:flex-start;gap:12px;margin-top:12px;padding:13px 15px;border-radius:16px;background:var(--navy);color:#fff}
.wr-note p{font-size:13.5px;line-height:1.45}
.wr-note b{display:block;margin-bottom:2px;font-size:13px;color:var(--sky)}
.wr-note-ic{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:10px;background:var(--sky);color:var(--navy)}

/* ---------- the prop-firm difference ---------- */
.hv-sec{padding:104px 0 0;background:#fff}
.hv-panel{position:relative;overflow:hidden;padding:64px 64px 60px;border-radius:48px;color:#fff;background:radial-gradient(620px 440px at 88% 0%,rgba(29,161,242,.3),rgba(29,161,242,0) 70%),linear-gradient(170deg,#053658 0%,#032E4A 45%,#021C2E 100%);box-shadow:0 50px 100px rgba(3,46,74,.28)}
.hv-panel .acc{color:var(--sky)}
.hv-head{display:grid;grid-template-columns:1fr 300px;gap:48px;align-items:end}
.hv-head .h2{margin-top:22px}
.hv-lead{padding-bottom:10px;font-size:18px;line-height:1.55;font-weight:500;color:rgba(255,255,255,.72)}
.hv-labels{display:grid;grid-template-columns:400px 1fr;gap:16px;align-items:center;margin-top:44px;padding-bottom:14px}
.hv-la{padding-left:24px;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.hv-lb{justify-self:start;display:inline-flex;align-items:center;gap:9px;height:40px;padding:0 16px 0 8px;border-radius:999px;background:linear-gradient(160deg,#8DD3FB 0%,#3DB0F5 100%);color:var(--navy);font-size:17px;font-weight:700}
.hv-rows{display:grid;gap:12px}
.hv-row{display:grid;grid-template-columns:400px 1fr;gap:16px}
.hv-a{display:flex;align-items:center;gap:14px;padding:18px 24px;border-radius:20px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);font-size:18px;line-height:1.35;font-weight:600;color:rgba(255,255,255,.64)}
.hv-a small{display:none}
.hv-b{display:flex;align-items:center;gap:16px;padding:16px 24px 17px;border-radius:20px;color:var(--navy);background:radial-gradient(420px 200px at 85% 0%,rgba(255,255,255,.45),rgba(255,255,255,0) 70%),linear-gradient(160deg,#8DD3FB 0%,#3DB0F5 70%,#1DA1F2 100%);box-shadow:0 20px 40px rgba(1,14,26,.25)}
.hv-b p{font-size:15.5px;line-height:1.45;font-weight:500;color:rgba(3,46,74,.84)}
.hv-b b{display:block;margin-bottom:2px;font-size:19px;line-height:1.3;font-weight:700;color:var(--navy)}

/* ---------- reporting ---------- */
.hr-sec{position:relative;overflow:hidden;margin-top:112px;padding:104px 0;background:
  radial-gradient(circle at calc(100% - 150px) 30px, rgba(0,0,0,0) 449px, rgba(29,161,242,.2) 450px, rgba(29,161,242,.2) 451.5px, rgba(0,0,0,0) 452.5px),
  radial-gradient(circle at calc(100% - 150px) 30px, rgba(0,0,0,0) 649px, rgba(29,161,242,.12) 650px, rgba(29,161,242,.12) 651.5px, rgba(0,0,0,0) 652.5px),
  radial-gradient(900px 520px at 85% 0%, rgba(255,255,255,.9), rgba(255,255,255,0) 70%),
  radial-gradient(700px 480px at 20% 90%, rgba(127,205,251,.35), rgba(127,205,251,0) 70%),
  linear-gradient(180deg,#E9F6FF 0%,#D2ECFD 55%,#BFE3FC 100%)}
.hr-grid{display:grid;grid-template-columns:470px 1fr;gap:72px;align-items:center}
.hr-text .h2{margin-top:22px}
.hr-p{margin-top:20px;font-size:18.5px;line-height:1.6;font-weight:500;color:var(--ink-2)}
.hr-list{display:grid;gap:10px;margin-top:30px}
.hr-list li{display:flex;align-items:center;gap:16px;padding:13px 18px 13px 14px;border-radius:18px;background:#fff;box-shadow:0 10px 24px rgba(3,46,74,.07)}
.hr-no{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:12px;background:var(--sky);color:var(--navy);font-size:14px;font-weight:900}
.hr-list li > span:last-child{display:flex;flex-direction:column;line-height:1.3}
.hr-list small{font-size:12.5px;font-weight:700;color:var(--sky-deep)}
.hr-list b{font-size:17px;font-weight:700}
.ui-report{padding:22px 24px 24px}
.ui-report .ui-top{gap:12px}
.rp-k{margin-top:18px}
.rp-kpis{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.rp-kpis .kpi-v{font-size:38px}
.rp-not{margin-top:16px;padding:15px 18px 17px;border-radius:16px;border:1px dashed #C9DAE7;background:#FAFCFE}
.rp-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.rp-chips span{display:inline-flex;align-items:center;height:30px;padding:0 12px;border-radius:99px;background:#EEF2F6;color:var(--ink-3);font-size:13px;font-weight:600;text-decoration:line-through;text-decoration-thickness:1.5px}

/* ---------- FAQ (shared .faq component) ---------- */
.hw-faq{padding-top:112px;background:linear-gradient(180deg,#fff 0%,#EEF7FE 55%,#fff 100%)}
.hw-faq + .p-cta{padding-top:0}

/* ---------- PHONE (designed at 390) ---------- */
@media (max-width:760px){
  .hw-hero .p-hero-in{padding-bottom:40px}
  .hw-stage{padding-bottom:52px}
  .hw-stage .p-band{top:70px}
  .hw-track{grid-template-columns:1fr 1fr;gap:12px}
  .hw-tk{padding:16px 14px 16px;border-radius:20px}
  .hw-tk-ic{width:42px;height:42px;border-radius:13px}
  .hw-tk-ic svg{width:19px;height:19px}
  .hw-tk-s{margin-top:14px;font-size:11px}
  .hw-tk-t{margin-top:4px;font-size:19px}
  .hw-tk-c{margin-top:12px;height:28px;padding:0 10px;gap:6px;font-size:12px}

  .hs-sec{padding:40px 0 8px}
  .hs{padding:0}
  .hs + .hs{margin-top:64px}
  .hs-slab{display:none}
  .hs-in,.hs-r .hs-in{grid-template-columns:1fr;gap:28px}
  .hs-art{order:-1;margin:0 -20px;padding:28px 16px;background:var(--hs-bg);overflow:hidden}
  .hs-art::before{content:"";position:absolute;inset:0;background-image:radial-gradient(var(--hs-dot) 1.2px,transparent 1.4px);background-size:22px 22px}
  .hs-k{gap:10px;font-size:12px}
  .hs-badge{width:36px;height:36px;font-size:14px}
  .hs-chip{height:30px;margin-left:2px;padding:0 11px;font-size:12.5px}
  .hs-h{margin-top:16px;font-size:38px}
  .hs-p{margin-top:14px;font-size:16.5px}
  .hs-lists{grid-template-columns:1fr;gap:12px;margin-top:22px}
  .hs-need,.hs-get{padding:18px 18px 20px;border-radius:20px}
  .hs-need li,.hs-get li{font-size:15.5px}

  .ui{padding:16px 14px 16px;border-radius:20px}
  .ui-top{flex-wrap:wrap;gap:10px;padding-bottom:14px}
  .ui-ic{width:36px;height:36px;border-radius:11px}
  .ui-tt b{font-size:15px}
  .ui-rec{height:28px;padding:0 10px;font-size:12px}
  .call-body{grid-template-columns:1fr;gap:10px}
  .call-who{grid-template-columns:1fr 1fr}
  .call-tile{height:84px}
  .call-agenda{padding:13px 14px 14px}
  .call-agenda li{font-size:13.5px}
  .call-notes{padding:13px 14px 14px}
  .call-notes li{height:auto;min-height:30px;padding:5px 11px;font-size:12.5px}
  .road-list li{grid-template-columns:32px 1fr;row-gap:8px;padding:11px 12px 12px 10px}
  .rn{width:32px;height:32px;font-size:14px}
  .rw{grid-column:2;justify-self:start;height:24px;font-size:11.5px}
  .road-foot{grid-template-columns:1fr;gap:6px}
  .road-foot div{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:10px 12px}
  .road-foot b{margin-top:0;text-align:right;font-size:13px}
  .ln-list li{padding:10px 0;gap:10px}
  .ln-t b{font-size:13.5px}
  .ln-foot{flex-wrap:wrap;gap:10px 12px}
  .ln-bar{flex:1 0 100%}
  .ln-go{margin-left:auto}
  .wr-kpis{gap:8px;margin-top:14px}
  .wr-ads li{padding:9px 10px 9px 12px}
  .wr-n b{font-size:13.5px}
  .wr-note{padding:12px 13px}

  .hv-sec{padding-top:72px}
  .hv-panel{padding:36px 18px 22px;border-radius:30px}
  .hv-head{grid-template-columns:1fr;gap:14px}
  .hv-head .h2{margin-top:18px;text-wrap:balance}
  .hv-lead{padding:0;font-size:16px}
  .hv-labels{display:none}
  .hv-rows{gap:10px;margin-top:26px}
  .hv-row{grid-template-columns:1fr;gap:0}
  .hv-a{gap:12px;padding:12px 16px;border-radius:18px 18px 0 0;border-bottom:0;font-size:15px}
  .hv-a > span:last-child{display:flex;flex-direction:column}
  .hv-a small{display:block;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.42)}
  .hv-b{align-items:flex-start;gap:12px;padding:14px 16px 16px;border-radius:0 0 18px 18px;box-shadow:none}
  .hv-b .wy{margin-top:2px}
  .hv-b b{font-size:16.5px}
  .hv-b p{font-size:14.5px}
  .wx,.wy{width:24px;height:24px}

  .hr-sec{margin-top:72px;padding:64px 0}
  .hr-grid{grid-template-columns:1fr;gap:32px}
  .hr-p{font-size:16.5px}
  .hr-list{margin-top:24px}
  .hr-list li{padding:11px 14px 11px 11px}
  .hr-no{width:36px;height:36px}
  .hr-list b{font-size:16px}
  .ui-report{padding:16px 14px 16px}
  .ui-report .ui-top .yf-t small{font-size:12px}
  .rp-kpis{gap:8px}
  .rp-kpis .kpi-v{font-size:26px}
  .rp-chips span{height:28px;font-size:12.5px}

  .hw-faq{padding-top:72px}
}