/* AppDrop How To v1 — editorial layout, responsive and accessibility conscious */
.howto-hub,.howto-article{--ht-green:#5cf2a4;--ht-border:#24453e;--ht-ink:#eaf7f1;color:var(--ht-ink);max-width:1120px;margin:26px auto 36px}
.howto-hero{display:grid;grid-template-columns:minmax(0,1.07fr) minmax(280px,.93fr);align-items:center;overflow:hidden;border:1px solid #27604b;border-radius:30px;background:radial-gradient(ellipse at 88% 20%,#145c42 0%,transparent 42%),linear-gradient(140deg,#0d2f26,#0a171d 60%,#07141b);min-height:340px;box-shadow:0 32px 90px #0004}
.howto-hero-content{position:relative;z-index:1;padding:46px 14px 44px 44px}
.howto-eyebrow,.howto-side-eyebrow{color:#5cf2a4;font-size:11px;font-weight:800;letter-spacing:.17em}
.howto-hero h1{font-size:clamp(36px,4.8vw,57px);letter-spacing:-.05em;line-height:1.06;margin:15px 0 18px;text-wrap:balance;overflow-wrap:anywhere}
.howto-hero p{margin:0;max-width:600px;font-size:17px;line-height:1.65;color:#bcd1c8}
.howto-hero-bottom{display:flex;gap:13px;flex-wrap:wrap;align-items:center;font-size:12px;color:#a4c2b5;margin-top:29px}
.howto-count{font-weight:800;color:#59e8a4;border:1px solid #2e7756;border-radius:999px;background:#17372b;padding:8px 13px}
.howto-hero-visual{height:100%;min-height:330px;overflow:hidden;position:relative;background:linear-gradient(145deg,#102a27,#06222c)}
.howto-hero-visual:after{content:"";pointer-events:none;position:absolute;inset:0;background:linear-gradient(90deg,#0b2520 0%,transparent 29%)}
.howto-hero-visual img{display:block;width:100%;height:100%;min-height:330px;object-fit:cover;object-position:center}
.howto-browser{margin:28px 0 0}
.howto-tools{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;margin-bottom:19px}
.howto-search{display:flex;align-items:center;gap:10px;max-width:360px;flex:1 1 260px;min-height:50px;background:#101a20;border:1px solid #345048;border-radius:16px;color:#90ad9d;padding:0 15px;transition:border-color .18s}
.howto-search:focus-within{border-color:var(--ht-green);box-shadow:0 0 0 3px #31d48920}
.howto-search input{border:0;outline:0;min-width:0;width:100%;background:transparent;color:#f0fcf7;font-size:15px}
.howto-search input::placeholder{color:#8b9d97}
.howto-filters{display:flex;flex-wrap:wrap;gap:8px}
.howto-filter{border:1px solid #36534b;color:#bed1c8;background:#111e1c;min-height:42px;padding:8px 15px;border-radius:999px;font-size:13px;font-weight:750;cursor:pointer;transition:background .16s,color .16s,border .16s}
.howto-filter:hover{border-color:#4f9d75}
.howto-filter.active,.howto-filter[aria-pressed=true]{background:#54f09d;color:#0b2217;border-color:#54f09d}
.howto-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.howto-card{min-width:0;border:1px solid #285043;border-radius:23px;background:linear-gradient(155deg,#112522,#0c171c);overflow:hidden;box-shadow:0 14px 35px #0002;transition:transform .2s,border-color .2s,box-shadow .2s}
.howto-card:hover{transform:translateY(-5px);border-color:#47b17e;box-shadow:0 24px 46px #0005}
.howto-card:focus-within{outline:3px solid #60f2aa;outline-offset:3px}
.howto-card-link{display:flex;flex-direction:column;height:100%;color:inherit}
.howto-art{aspect-ratio:1200/630;overflow:hidden;background:#102d27}
.howto-art img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .35s}
.howto-card:hover .howto-art img{transform:scale(1.045)}
.howto-card-info{display:flex;flex-direction:column;flex:1;padding:19px 20px 21px}
.howto-card-meta,.howto-article-top{display:flex;align-items:center;flex-wrap:wrap;gap:10px;color:#96afa5;font-size:12px}
.howto-pill{display:inline-flex;align-items:center;background:#1a3b2c;color:#72eab1;border:1px solid #2b684e;border-radius:99px;padding:5px 10px;font-weight:800;font-size:11px}
.howto-card h2{font-size:20px;line-height:1.28;letter-spacing:-.025em;margin:15px 0 9px;overflow-wrap:anywhere}
.howto-card p{margin:0;color:#b1c7bf;line-height:1.62;font-size:14px}
.howto-card-more{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:auto;padding-top:18px;font-weight:800;color:#70edb0;font-size:13px}
.howto-card-more span{font-size:21px}
.howto-empty,.howto-illustration-note{text-align:center;color:#91a89f;font-size:13px;line-height:1.5;margin:26px 0}
.howto-breadcrumbs{display:flex;align-items:center;gap:11px;margin-bottom:28px;font-size:13px;color:#97aba2}
.howto-breadcrumbs a{color:#68ebb0;font-weight:750}
.howto-article{max-width:1080px}
.howto-article-top{margin-bottom:16px}
.howto-article>h1{font-size:clamp(36px,6.4vw,66px);line-height:1.08;max-width:930px;letter-spacing:-.055em;margin:8px 0 16px;text-wrap:balance;overflow-wrap:anywhere}
.howto-lede{font-size:clamp(17px,2.2vw,22px);line-height:1.55;color:#bbd2c9;max-width:840px;margin:0 0 26px}
.howto-article-cover{margin:0 0 39px;border:1px solid #255345;border-radius:27px;overflow:hidden;background:#091a1c}
.howto-article-cover img{width:100%;height:auto;aspect-ratio:1200/630;display:block;object-fit:cover}
.howto-article-cover figcaption{border-top:1px solid #254039;padding:10px 15px;font-size:11px;color:#8da99d}
.howto-article-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;align-items:start;gap:34px}
.howto-guide-main>h2{font-size:29px;letter-spacing:-.035em;margin:0 0 24px}
.howto-steps{list-style:none;margin:0;padding:0}
.howto-steps li{display:grid;grid-template-columns:46px minmax(0,1fr);gap:18px;position:relative;padding:0 0 25px}
.howto-steps li:not(:last-child):before{content:"";position:absolute;left:21px;top:46px;bottom:1px;width:2px;background:linear-gradient(#297959,#152a25)}
.howto-step-num{display:grid;place-items:center;width:44px;height:44px;flex:none;border-radius:15px;border:1px solid #4eaa79;color:#6af3a9;background:#173b2b;font-weight:900;font-size:17px}
.howto-steps p{margin:4px 0 0;color:#d5e6de;line-height:1.85;font-size:16px}
.howto-tip,.howto-warning{border:1px solid #2b7051;border-radius:19px;background:linear-gradient(140deg,#133326,#0f201e);padding:20px 22px;margin:12px 0 16px}
.howto-warning{background:#251e18;border-color:#685138}
.howto-tip-label{color:#71f3b4;font-size:15px;font-weight:850}
.howto-warning .howto-tip-label{color:#f3c887}
.howto-tip p,.howto-warning p{color:#d5e4dc;line-height:1.72;margin:10px 0 0;font-size:15px}
.howto-article-source{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 4px;margin:22px 0;border-top:1px solid #29443a;border-bottom:1px solid #29443a;font-size:14px;color:#b6c9bf}
.howto-article-source a{color:#62eaae;font-weight:800;overflow-wrap:anywhere}
.howto-guide-sidebar{position:sticky;top:24px}
.howto-side-card{background:radial-gradient(circle at 100% 0%,#1b4d33,transparent 63%),#0c211b;border:1px solid #32664d;border-radius:23px;padding:23px 21px}
.howto-side-card h2{font-size:22px;line-height:1.25;margin:13px 0}
.howto-side-card p{font-size:13px;color:#a9c5b7;line-height:1.72;margin:0 0 24px}
.howto-cta{display:block;background:#58efa2;color:#061a10;text-align:center;padding:13px;border-radius:13px;font-weight:850}
.howto-related{margin-top:51px}
.howto-related h2{font-size:27px;letter-spacing:-.035em;margin:0 0 21px}
.howto-hub .howto-grid article[hidden]{display:none!important}
@media(max-width:960px){.howto-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.howto-article-layout{grid-template-columns:minmax(0,1fr) 235px;gap:20px}}
@media(max-width:680px){.howto-hub,.howto-article{margin:14px auto 24px}.howto-hero{grid-template-columns:1fr;border-radius:22px}.howto-hero-content{padding:30px 22px 23px}.howto-hero h1{font-size:37px}.howto-hero p{font-size:15px}.howto-hero-bottom{margin-top:18px}.howto-hero-visual{min-height:150px;height:180px}.howto-hero-visual img{min-height:180px}.howto-hero-visual:after{background:linear-gradient(#0b2520 0%,transparent 30%)}.howto-grid{grid-template-columns:1fr;gap:13px}.howto-tools{gap:14px}.howto-search{max-width:none;flex-basis:100%}.howto-filter{min-height:40px;padding:8px 12px}.howto-card-info{padding:16px}.howto-card h2{font-size:19px}.howto-article>h1{font-size:37px}.howto-article-cover{border-radius:17px;margin-bottom:28px}.howto-article-layout{display:block}.howto-guide-sidebar{position:static;margin-top:22px}.howto-steps li{grid-template-columns:40px minmax(0,1fr);gap:12px}.howto-step-num{width:38px;height:38px;border-radius:12px}.howto-steps li:not(:last-child):before{left:18px;top:40px}.howto-steps p{font-size:15px;line-height:1.78}.howto-related{margin-top:35px}.howto-article-top{font-size:11px}}
@media(prefers-reduced-motion:reduce){.howto-card,.howto-art img{transition:none}.howto-card:hover{transform:none}.howto-card:hover .howto-art img{transform:none}}