.mode{display:inline-flex;gap:4px;padding:5px;background:#e9efeb;border-radius:16px;margin-top:13px}.mode button{border:0;background:transparent;color:var(--muted);font-size:16px;font-weight:650;min-height:48px;min-width:118px;border-radius:12px;padding:12px 18px}.mode button[aria-pressed=true]{background:var(--teal);color:white;box-shadow:0 3px 10px #004f5620}#mode-note{font-size:13px;line-height:1.6;color:var(--muted);min-height:42px;max-width:620px}.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.strategy{background:white;border:1px solid var(--line);border-radius:26px;overflow:hidden;box-shadow:0 8px 35px #003f4510}.card-top{display:flex;justify-content:space-between;align-items:center;padding:22px 24px 0;gap:12px}.number{font-size:12px;color:var(--muted);letter-spacing:1px}.market{font-size:11px;font-weight:700;color:var(--teal);padding:7px 10px;border-radius:8px;background:#eef5f2}.chart{position:relative;padding:10px 12px 0}.chart svg{width:100%;height:auto;display:block;overflow:visible}.guide{stroke:var(--line);stroke-dasharray:4 7;stroke-width:1}.ghost{stroke:#e2edeb;stroke-width:3;fill:none}.price{stroke:var(--teal);stroke-width:3;fill:none;stroke-linecap:round}.cursor{fill:var(--teal);stroke:white;stroke-width:3}.halo{fill:#004f5615}.event{opacity:0;transition:opacity .3s}.event.shown{opacity:1}.event circle{stroke:white;stroke-width:2}.event.buy circle{fill:var(--buy)}.event.sell circle{fill:var(--sell)}.event text{fill:white;font-size:10px;font-weight:750;text-anchor:middle;dominant-baseline:central}.tag rect{fill:white;stroke:var(--line)}.tag text{fill:var(--ink);font-size:11px;font-weight:650;text-anchor:middle}.card-copy{padding:8px 24px 22px}.description{color:var(--muted);font-size:15px;line-height:1.6;min-height:72px;margin:12px 0 18px}.live-step{background:#f2f7f4;border:1px solid #e4eeea;border-radius:14px;padding:14px;display:flex;gap:11px;align-items:flex-start;min-height:97px}.step-dot{height:8px;width:8px;border-radius:50%;background:var(--orange);flex:none;margin-top:6px}.step-copy strong{font-size:13px;display:block;margin-bottom:5px}.step-copy p{font-size:12px;line-height:1.6;margin:0;color:var(--muted)}.progress{height:3px;background:#e6eeea;border-radius:4px;overflow:hidden;margin:18px 0 12px}.progress span{display:block;height:100%;background:var(--orange);width:0}.controls{display:flex;gap:8px;align-items:center;justify-content:space-between}.controls button{min-height:44px;min-width:44px;border:1px solid var(--line);background:white;border-radius:11px;color:var(--teal);padding:10px 12px;font-weight:650;font-size:12px}.controls .pause{background:#edf5f2;border-color:#edf5f2}.control-actions{display:flex;gap:7px}.cycle{font-size:11px;color:var(--muted)}
/* Animation cards inherit the coastal service-page theme. */
.mode{background:#0e2c31}.mode button{color:var(--muted)}.mode button[aria-pressed=true]{background:#00656b}.strategy{background:#09262c;border-color:var(--line);box-shadow:none}.market{background:#164148;color:#d2f1ed}.ghost{stroke:#284c50}.price{stroke:#19cdbb}.cursor{fill:#19cdbb;stroke:#09262c}.halo{fill:#19cdbb22}.event.buy circle{fill:#12a98e}.event.sell circle{fill:#e76539}.event circle{stroke:#09262c}.tag rect{fill:#16383e;stroke:#47696e}.tag text{fill:white}.live-step{background:#102f35;border-color:#294b51}.controls button{background:#10343b;color:white;border-color:#365b63}.controls .pause{background:#16454b;border-color:#365b63}.progress{background:#294b51}.card-copy h2{font-size:24px}.description{min-height:96px}.guide{stroke:#36565b}.progress span{background:var(--orange)}
@media(max-width:760px){.cards{grid-template-columns:1fr;gap:18px}.card-copy{padding:8px 18px 20px}.card-top{padding:20px 18px 0}.description{min-height:0}.controls{gap:5px}.controls button{padding:10px}.card-copy h2{font-size:23px}.chart{padding:10px 4px 0}}@media(prefers-reduced-motion:reduce){.event{transition:none}}

/* Compact strategy comparison, scoped to the algotrading service. */
.service-algo .breadcrumbs{margin-top:8px}
.service-algo .algo-intro{display:grid;grid-template-columns:1.3fr 1fr;gap:32px;align-items:center;margin:12px 0 20px}
.service-algo .service-hero{padding:0;max-width:none}
.service-algo .service-hero>.eyebrow{display:none}
.service-algo .service-hero h1{font-size:36px;letter-spacing:-1.2px;line-height:1.1;margin:0 0 10px}
.service-algo .service-hero .section-lead{font-size:15px;line-height:1.55;margin:0 0 14px;max-width:620px}
.service-algo .service-hero .button{font-size:14px;min-height:48px;padding:11px 20px}
.service-algo .capital-note{padding:18px;gap:12px;border-radius:12px}
.service-algo .capital-note h2{font-size:19px;letter-spacing:-.4px}
.service-algo .capital-note p{font-size:13px;line-height:1.5;margin:8px 0 0}
.service-algo .capital-note>.icon{width:18px;height:18px;margin-top:1px}
.service-algo .btc-summary{display:flex;align-items:center;gap:24px;border-block:1px solid var(--line);padding:14px 0}
.service-algo .btc-summary h2{font-size:18px;letter-spacing:-.3px;white-space:nowrap}
.service-algo .btc-summary h2 span{display:block;font-size:12px;font-weight:400;letter-spacing:0;color:var(--muted);margin-top:4px}
.service-algo .btc-summary p{margin:0;color:var(--muted);font-size:14px;line-height:1.5}
.service-algo .content-section{margin-block:28px}
.service-algo .content-section h2{font-size:24px}
.service-algo .mechanics-heading{display:flex;align-items:center;justify-content:space-between;gap:20px}
.service-algo .mode{margin:0;padding:3px;border-radius:12px}
.service-algo .mode button{min-height:44px;min-width:96px;padding:8px 14px;font-size:14px;border-radius:9px}
.service-algo #mode-note{margin:6px 0 12px;min-height:0;font-size:12px}
.service-algo .cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:start}
.service-algo .strategy{border-radius:14px}
.service-algo .card-top{padding:12px 14px 0;gap:8px}
.service-algo .number{font-size:9px;letter-spacing:.7px}
.service-algo .market{font-size:10px;padding:5px 8px}
.service-algo .strategy h2.strategy-name{font-size:18px;line-height:1.2;letter-spacing:-.3px;margin:8px 14px 0}
.service-algo .chart{padding:0 6px}
.service-algo .chart svg{height:112px}
.service-algo .card-copy{padding:0 12px 8px}
.service-algo .live-step{min-height:32px;padding:7px 9px;border-radius:8px;gap:7px}
.service-algo .step-copy strong{font-size:11px;margin:0;line-height:1.5}
.service-algo .step-copy p{display:none;font-size:12px;margin-top:5px}
.service-algo .strategy:has(.strategy-details[open]) .step-copy p{display:block}
.service-algo .step-dot{width:6px;height:6px;margin-top:5px}
.service-algo .progress{margin:9px 0 5px;height:2px}
.service-algo .controls{gap:4px}
.service-algo .controls button{font-size:11px;padding:8px;min-height:44px}
.service-algo .control-actions{gap:4px}
.service-algo .cycle{font-size:10px}
.service-algo .strategy-details summary{font-size:12px;min-height:44px;display:flex;align-items:center;justify-content:space-between;cursor:pointer;color:var(--muted);list-style:none}
.service-algo .strategy-details summary::-webkit-details-marker{display:none}
.service-algo .strategy-details summary:after{content:'+';font-size:20px}
.service-algo .strategy-details[open] summary:after{content:'−'}
.service-algo .description{min-height:0;font-size:13px;line-height:1.5;margin:0 0 10px}
.service-algo .mechanics>.micro{font-size:11px;margin-block:10px 0}
@media(min-width:1200px){.service-algo .cards{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(max-width:760px){
 .service-algo .algo-intro{grid-template-columns:1fr;gap:18px;margin-top:10px}
 .service-algo .service-hero h1{font-size:30px}
 .service-algo .service-hero .section-lead{font-size:16px}
 .service-algo .service-hero .button{font-size:16px;margin-top:0}
 .service-algo .capital-note{padding:16px}
 .service-algo .capital-note p{font-size:14px}
 .service-algo .btc-summary{align-items:flex-start;gap:12px;flex-direction:column}
 .service-algo .mechanics-heading{align-items:flex-start;flex-direction:column;gap:12px}
 .service-algo .content-section h2{font-size:23px}
 .service-algo .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
 .service-algo .chart svg{height:130px}
}
@media(max-width:520px){
 .service-algo .cards{grid-template-columns:1fr}
 .service-algo .strategy h2.strategy-name{font-size:20px}
 .service-algo .number{font-size:10px}
 .service-algo .step-copy strong{font-size:13px}
 .service-algo .controls button,.service-algo .strategy-details summary{font-size:13px}
 .service-algo .description{font-size:15px}
}
@media(min-width:761px){
 .service-algo .site-header{height:68px}
 .service-algo .algo-intro{margin-top:0;margin-bottom:12px}
 .service-algo .btc-summary{padding-block:10px}
 .service-algo .mechanics{margin-block:18px}
 .service-algo .chart svg{height:96px}
}

/* One compact footer, with real 44px touch targets and no loop counter. */
.strategy-footer{position:relative;margin-top:8px}
.strategy-footer .control-actions{position:absolute;right:0;top:0;display:flex;gap:6px}
.strategy-footer .control-actions button{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;min-width:44px;min-height:44px;padding:0;border:1px solid #31565e;border-radius:12px;background:#103039;color:#d9eeee;transition:background .16s,border-color .16s}
.strategy-footer .control-actions button:hover{background:#1b4149;border-color:#63b7bd}
.strategy-footer .control-actions button:active{background:#23515a}
.strategy-footer .control-actions .pause{background:#153b42}
.strategy-footer img{width:18px;height:18px;filter:invert(1);opacity:.85;flex:none}
.strategy-footer .strategy-details summary,.service-algo .strategy-footer .strategy-details summary{display:flex;justify-content:flex-start;align-items:center;gap:6px;min-height:44px;padding-right:96px;font-size:12px;line-height:1.3;list-style:none;color:#bfd4d8;cursor:pointer}
.strategy-footer .strategy-details summary::-webkit-details-marker{display:none}
.strategy-footer .strategy-details summary:after,.service-algo .strategy-footer .strategy-details summary:after{content:none}
.strategy-footer summary img{width:16px;height:16px;transition:transform .2s}
.strategy-footer details[open] summary img{transform:rotate(180deg)}
.strategy-footer .description{margin:10px 0 8px}
@media(min-width:521px){.service-algo .strategy-footer .strategy-details summary{font-size:11px;gap:3px}}
@media(max-width:520px){.service-algo .strategy-footer .strategy-details summary{font-size:13px}}
@media(prefers-reduced-motion:reduce){.strategy-footer button,.strategy-footer summary img{transition:none}}

.strategy-footer summary span{white-space:nowrap}