@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:400;font-display:swap;src:url("/assets_frontend/fonts/plus-jakarta-sans-400.woff2") format("woff2")}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:500;font-display:swap;src:url("/assets_frontend/fonts/plus-jakarta-sans-500.woff2") format("woff2")}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:600;font-display:swap;src:url("/assets_frontend/fonts/plus-jakarta-sans-600.woff2") format("woff2")}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:700;font-display:swap;src:url("/assets_frontend/fonts/plus-jakarta-sans-700.woff2") format("woff2")}
.article-design{
  --font-heading:"Plus Jakarta Sans",system-ui,sans-serif;
  --font-body:"Plus Jakarta Sans",system-ui,sans-serif;
  --ink:#0B2A2E;--deep:#071E21;--teal:#0E7C6B;--bright:#19A88F;--mint:#7FD8C4;--tint:#E6F3F0;--gold:#F2CE7A;
  --body:#2E4346;--muted:#5A6E71;--line:#E2EAE8;--bg:#F5F8F7;--read:#24373A;
  --wrap:1200px;
  font-family:var(--font-body);color:var(--body);-webkit-font-smoothing:antialiased;box-sizing:border-box;background:#fff
}
.article-design *,.article-design *::before,.article-design *::after{box-sizing:border-box}
.article-design a{color:var(--teal)}
.article-design.h h1,.article-design.h h2,.article-design.h h3{font-family:var(--font-heading);color:var(--ink);letter-spacing:-.02em}
.article-design :focus-visible{outline:3px solid var(--bright);outline-offset:2px}
.article-design .wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.article-design .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.article-design .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 24px;border-radius:12px;font-weight:700;font-size:16px;text-decoration:none;background:var(--teal);color:#fff !important;border:0;cursor:pointer;font-family:inherit;transition:background .2s,transform .2s}
.article-design .btn:hover{background:#0A5C50;transform:translateY(-1px)}
.article-design .btn.light{background:var(--bright);color:#04201C !important}
.article-design .btn.light:hover{background:#22BFA3}
.article-design .btn.ghost{background:#fff;color:var(--ink) !important;border:1.5px solid var(--line)}
.article-design .prog{position:fixed;left:0;right:0;top:var(--site-header-h,0px);height:3px;z-index:60}
.article-design .prog i{display:block;height:100%;width:0;background:var(--teal)}
.article-design .ph{background:linear-gradient(180deg,#F1F7F5,#fff);border-bottom:1px solid var(--line)}
.article-design .ph .wrap{padding-top:30px;padding-bottom:30px}
.article-design .crumb{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:13.5px;color:var(--muted);margin-bottom:18px}
.article-design .crumb a{color:var(--teal) !important;text-decoration:none;font-weight:600}
.article-design .crumb a:hover{text-decoration:underline}
.article-design .crumb [aria-current]{min-width:0;flex:1 1 200px;max-width:52ch;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.article-design .tagl{display:inline-flex;align-items:center;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#fff !important;background:var(--teal);padding:5px 12px;border-radius:6px;text-decoration:none}
.article-design .ph h1{margin:14px 0 12px;font-size:clamp(28px,3.6vw,44px);line-height:1.15;letter-spacing:-.02em;color:var(--ink);max-width:26ch}
.article-design .dek{margin:0;font-size:clamp(16.5px,1.5vw,19px);line-height:1.6;color:#4A5F62;max-width:70ch}
.article-design .meta{margin-top:22px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 24px;font-size:13px;color:var(--muted)}
.article-design .meta span{display:flex;align-items:center;gap:6px}
.article-design .meta svg{color:var(--teal)}
.article-design .by{display:flex;align-items:center;gap:12px}
.article-design .by .who{display:flex;flex-direction:column;align-items:flex-start;text-align:left;line-height:1.4;min-width:0}
.article-design .by b{font-size:15px;color:var(--ink)}
.article-design .by .who span{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:13.5px;color:var(--muted)}
.article-design .by .who span>span{display:inline-flex;align-items:center;gap:5px}
.article-design .by svg{color:var(--teal)}
.article-design .av{flex:none;width:46px;height:46px;border-radius:50%;background:var(--ink);color:var(--mint);font-size:15px;font-weight:700;display:flex;align-items:center;justify-content:center}
.article-design .shr{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.article-design .shr>small{font-size:13px;font-weight:700;color:var(--muted);margin-right:2px}
.article-design .shr a,.article-design .shr button{appearance:none;font:inherit;cursor:pointer;width:40px;height:40px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;border:0;color:#fff !important;text-decoration:none;transition:transform .15s,opacity .15s}
.article-design .shr a:hover,.article-design .shr button:hover{transform:translateY(-2px);opacity:.92}
.article-design .shr a svg{color:#fff !important}
.article-design .shr .cpy svg{color:var(--ink)}
.article-design .shr .cpy.done svg{color:#fff}
.article-design .shr .s-li{background:#0A66C2}
.article-design .shr .s-fb{background:#1877F2}
.article-design .shr .s-x{background:#111}
.article-design .shr .s-wa{background:#25D366}
.article-design .shr .cpy{background:#E8EFEE;color:var(--ink) !important}
.article-design .shr .cpy span{display:none}
.article-design .shr .cpy.done{background:var(--teal);color:#fff !important}
.article-design .lay{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:48px;align-items:start;padding-top:36px;padding-bottom:20px}
.article-design .lay>*{min-width:0}
.article-design .cover{margin:0 0 30px}
.article-design .cover img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:16px;background:var(--tint) linear-gradient(135deg,#E6F3F0,#CFE6E2)}
.article-design .cover figcaption{margin-top:10px;font-size:13px;color:var(--muted)}
.article-design .kt{background:var(--tint);border:1px solid #CFE6E0;border-radius:14px;padding:22px 24px;margin-bottom:24px}
.article-design .kt h2{display:flex;align-items:center;gap:10px;margin:0 0 12px;font-size:18px;color:var(--ink)}
.article-design .kt h2 svg{color:var(--teal)}
.article-design .kt ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px}
.article-design .kt li{display:flex;gap:10px;font-size:16px;line-height:1.55;color:var(--read)}
.article-design .kt li svg{flex:none;color:var(--teal);margin-top:3px}
.article-design .toc{border:1px solid var(--line);border-radius:14px;margin-bottom:34px;background:#fff}
.article-design .toc summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;min-height:54px;padding:0 20px;font-weight:700;font-size:16px;color:var(--ink)}
.article-design .toc summary::-webkit-details-marker{display:none}
.article-design .toc summary svg{color:var(--teal)}
.article-design .toc summary .chev{margin-left:auto;transition:transform .2s}
.article-design .toc[open] summary .chev{transform:rotate(180deg)}
.article-design .toc ol{margin:0;padding:4px 20px 18px 44px;display:grid;grid-template-columns:1fr 1fr;gap:4px 28px}
.article-design .toc li::marker{color:var(--teal);font-weight:700;font-size:14px}
.article-design .toc a{display:block;padding:5px 0;font-size:15px;line-height:1.45;color:var(--read) !important;text-decoration:none}
.article-design .toc a:hover{color:var(--teal) !important;text-decoration:underline}
.article-design .prose{font-size:18px;line-height:1.78;color:var(--read)}
.article-design .prose>*{margin:0 0 22px}
.article-design .prose .lede{font-size:19.5px;line-height:1.72;color:var(--ink)}
.article-design .prose h2{margin:46px 0 16px;padding-top:6px;font-size:clamp(24px,2.5vw,30px);line-height:1.25;letter-spacing:-.01em;color:var(--ink);scroll-margin-top:calc(var(--site-header-h,0px) + 24px)}
.article-design .prose h3{margin:30px 0 10px;font-size:20.5px;line-height:1.35;color:var(--ink)}
.article-design .prose a{color:var(--teal);font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.article-design .prose a:hover{color:#0A5C50}
.article-design .prose ul,.article-design .prose ol{padding-left:24px}
.article-design .prose li{margin:0 0 10px}
.article-design .prose li::marker{color:var(--teal);font-weight:700}
.article-design .prose b,.article-design .prose strong{color:var(--ink)}
.article-design .pull{margin:34px 0 !important;padding:24px 28px;background:var(--ink);border-radius:16px;position:relative}
.article-design .pull p{margin:0;font-size:clamp(20px,2.1vw,24px);line-height:1.45;font-weight:600;color:#fff}
.article-design .pull::before{content:"\201C";position:absolute;right:22px;top:-6px;font-size:96px;line-height:1;color:var(--bright);opacity:.5;font-weight:700}
.article-design .tlist{list-style:none;padding:0 !important;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.article-design .tlist li{display:grid;grid-template-columns:190px 1fr;column-gap:16px;margin:0;padding:13px 18px;font-size:16.5px;line-height:1.6;background:#fff}
.article-design .tlist li:nth-child(even){background:#F7FAF9}
.article-design .tlist li+li{border-top:1px solid #EEF3F2}
.article-design .callout{display:flex;gap:14px;background:#FFF8E6;border:1px solid #F3DFA6;border-radius:14px;padding:18px 20px}
.article-design .callout-i{flex:none;width:40px;height:40px;border-radius:11px;background:var(--gold);color:#3A2F12;display:flex;align-items:center;justify-content:center}
.article-design .callout b{display:block;font-size:16px}
.article-design .callout p{margin:4px 0 0;font-size:16.5px;line-height:1.6}
.article-design .feats{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.article-design .feats>div{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px;transition:box-shadow .2s}
.article-design .feats>div:hover{box-shadow:0 12px 30px rgba(11,42,46,.08)}
.article-design .feats span{width:42px;height:42px;border-radius:11px;background:var(--tint);color:var(--teal);display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.article-design .feats h3{margin:0 0 6px;font-size:17px}
.article-design .feats p{margin:0;font-size:15.5px;line-height:1.6;color:var(--muted)}
.article-design .steps{list-style:none;padding:0 !important;counter-reset:st}
.article-design .steps li{counter-increment:st;position:relative;margin:0;padding:0 0 24px 60px}
.article-design .steps li::before{content:counter(st);position:absolute;left:0;top:0;width:42px;height:42px;border-radius:50%;background:var(--teal);color:#fff;font-weight:700;font-size:17px;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 5px var(--tint)}
.article-design .steps li:not(:last-child)::after{content:"";position:absolute;left:20px;top:50px;bottom:4px;width:2px;background:#D6E7E3}
.article-design .steps h3{margin:7px 0 4px;font-size:18.5px}
.article-design .steps p{margin:0;font-size:16.5px;line-height:1.65}
.article-design .tw{overflow-x:auto;border:1px solid var(--line);border-radius:14px}
.article-design .tw table{width:100%;border-collapse:collapse;font-size:15.5px;line-height:1.5;min-width:460px}
.article-design .tw th,.article-design .tw td{padding:13px 16px;text-align:left;border-bottom:1px solid #EEF3F2;vertical-align:top}
.article-design .tw thead th{background:var(--ink);color:#fff;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase}
.article-design .tw tbody tr:nth-child(even)>*{background:#F7FAF9}
.article-design .tw tbody th{color:var(--ink)}
.article-design .tw tr:last-child>*{border-bottom:0}
.article-design .tw .tot>*{background:var(--tint) !important;font-weight:700;color:var(--ink)}
.article-design .cases{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.article-design .cases>div{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px 20px;display:flex;flex-direction:column;gap:5px}
.article-design .cs-t{font-size:12px;font-weight:700;letter-spacing:.04em;color:#0A5C50;text-transform:uppercase}
.article-design .cases h3{margin:2px 0 0;font-size:17.5px}
.article-design .cases p{margin:0;font-size:15.5px;line-height:1.6;color:var(--muted)}
.article-design .prose .note{font-size:14px;color:var(--muted);line-height:1.6;font-style:italic}
.article-design .objs{display:flex;flex-direction:column;gap:12px}
.article-design .objs>div{border:1px solid var(--line);border-radius:14px;padding:16px 20px 16px 58px;background:#fff;position:relative}
.article-design .objs>div::before{content:"Q";position:absolute;left:18px;top:16px;width:28px;height:28px;border-radius:8px;background:var(--ink);color:var(--mint);font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center}
.article-design .objs h3{margin:2px 0 4px;font-size:17px}
.article-design .objs p{margin:0;font-size:16px;line-height:1.6}
.article-design .incta{display:grid;grid-template-columns:1fr auto;align-items:center;gap:16px 26px;background:var(--ink);color:#B9CFCC;border-radius:16px;padding:26px 28px;margin:40px 0 !important;background-image:radial-gradient(380px 220px at 100% 0%,rgba(25,168,143,.4),transparent 65%)}
.article-design .incta small{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--mint)}
.article-design .incta h2{margin:4px 0 6px !important;padding:0 !important;font-size:21px !important;color:#fff !important;line-height:1.3}
.article-design .incta p{margin:0;font-size:15px;line-height:1.6}
.article-design .prose .incta a.btn{background:var(--bright);color:#04201C !important;text-decoration:none;font-weight:700}
.article-design .prose .incta a.btn:hover{background:#fff}
.article-design .fqs{display:flex;flex-direction:column;gap:10px}
.article-design .fq{background:#fff;border:1px solid var(--line);border-radius:16px;transition:border-color .2s,box-shadow .2s}
.article-design .fq:hover{border-color:#B9D6D0}
.article-design .fq[open]{border-color:var(--teal);box-shadow:0 16px 36px rgba(11,42,46,.08)}
.article-design .fq summary{list-style:none;cursor:pointer;padding:16px 18px;display:flex;gap:14px;align-items:center;min-height:44px}
.article-design .fq summary::-webkit-details-marker{display:none}
.article-design .fq summary h3{flex:1;margin:0;font-size:16.5px;line-height:1.4}
.article-design .fq-t{flex:none;width:32px;height:32px;border-radius:50%;border:1px solid var(--line);color:var(--teal);display:flex;align-items:center;justify-content:center;transition:transform .25s,background .2s}
.article-design .fq[open] .fq-t{transform:rotate(45deg);background:var(--teal);border-color:var(--teal);color:#fff}
.article-design .fq-a{padding:0 18px 18px 70px;display:flex;flex-direction:column;gap:10px}
.article-design .fq-a p{margin:0;font-size:15px;line-height:1.7;color:#4A5F62}
.article-design .aend{margin-top:36px;padding:20px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px}
.article-design .tg{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.article-design .tg>b{font-size:14px;color:var(--ink);margin-right:2px}
.article-design .tg a{font-size:13px;font-weight:600;color:var(--ink) !important;text-decoration:none;background:var(--bg);border-radius:6px;padding:6px 12px}
.article-design .tg a:hover{background:var(--teal);color:#fff !important}
.article-design .bio{margin-top:28px;display:flex;gap:18px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px}
.article-design .bio .av{width:64px;height:64px;font-size:19px}
.article-design .bio small{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--teal)}
.article-design .bio h2{margin:2px 0 6px;font-size:18px}
.article-design .bio p{margin:0 0 8px;font-size:15px;line-height:1.6;color:var(--muted)}
.article-design .bio a{font-size:14px;font-weight:700;text-decoration:none}
.article-design .side{display:flex;flex-direction:column;gap:22px}
.article-design .wd{background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px}
.article-design .wd>h2{margin:0 0 14px;font-size:16px;color:var(--ink)}
.article-design .ws form{display:flex;gap:8px}
.article-design .ws input{flex:1;min-width:0;font:inherit;font-size:15px;height:46px;border:1px solid var(--line);border-radius:10px;padding:0 14px}
.article-design .ws input:focus-visible{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(25,168,143,.18)}
.article-design .ws button{flex:none;width:46px;height:46px;border:0;border-radius:10px;background:var(--teal);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center}
.article-design .wa-b{text-align:center}
.article-design .wa-b .av{width:72px;height:72px;font-size:21px;margin:0 auto 10px}
.article-design .wa-b b{display:block;font-size:16px;color:var(--ink)}
.article-design .wa-b small{display:block;font-size:13px;color:var(--teal);font-weight:600;margin:2px 0 10px}
.article-design .wa-b p{margin:0 0 12px;font-size:14px;line-height:1.6;color:var(--muted)}
.article-design .wa-b a{font-size:14px;font-weight:700;text-decoration:none}
.article-design .wc{background:var(--ink);color:#B9CFCC;border-radius:16px;padding:24px;display:flex;flex-direction:column;gap:10px;background-image:radial-gradient(300px 200px at 100% 0%,rgba(25,168,143,.4),transparent 65%)}
.article-design .wc small{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--mint)}
.article-design .wc h2{margin:0;color:#fff;font-size:19px;line-height:1.35}
.article-design .wc ul{margin:2px 0 6px;padding:0;list-style:none;display:flex;flex-direction:column;gap:7px;font-size:14px}
.article-design .wc li{display:flex;gap:8px}
.article-design .wc li svg{flex:none;color:var(--mint);margin-top:2px}
.article-design .wc .btn{width:100%}
.article-design .wc .btn.light{background:var(--bright);color:#04201C !important}
.article-design .wc a.ln{text-align:center;font-size:14px;font-weight:600;color:#CFE0DD !important;min-height:40px;display:flex;align-items:center;justify-content:center}
.article-design .wt ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.article-design .wt a{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px;padding:0 4px;border-bottom:1px dashed var(--line);font-size:15px;font-weight:600;color:var(--read) !important;text-decoration:none}
.article-design .wt li:last-child a{border-bottom:0}
.article-design .wt a:hover{color:var(--teal) !important}
.article-design .wt a b{font-size:12px;color:var(--muted);background:var(--bg);border-radius:20px;padding:2px 9px}
.article-design .wt a.on{color:var(--teal) !important}
.article-design .wp ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.article-design .wp a{display:grid;grid-template-columns:84px 1fr;gap:12px;align-items:center;text-decoration:none}
.article-design .wp img{display:block;width:84px;height:64px;object-fit:cover;border-radius:10px;background:var(--tint) linear-gradient(135deg,#E6F3F0,#CFE6E2)}
.article-design .wp b{display:block;font-size:14.5px;line-height:1.4;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.article-design .wp a:hover b{color:var(--teal)}
.article-design .wp small{display:block;margin-top:3px;font-size:12.5px;color:var(--muted)}
.article-design .wn p{margin:0 0 12px;font-size:14px;line-height:1.6;color:var(--muted)}
.article-design .wn form{display:flex;flex-direction:column;gap:8px}
.article-design .wn .g-recaptcha{min-height:78px}
.article-design .wn input{font:inherit;font-size:15px;height:46px;border:1px solid var(--line);border-radius:10px;padding:0 14px}
.article-design .wn input:focus-visible{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(25,168,143,.18)}
.article-design .wn .btn{width:100%}
.article-design .nok{display:none;align-items:center;gap:8px;font-weight:700;color:var(--teal);font-size:14.5px}
.article-design .wn.sent form{display:none}
.article-design .wn.sent .nok{display:flex}
.article-design .sticky{position:sticky;top:calc(var(--site-header-h,0px) + 20px)}
.article-design .relw{background:var(--bg);border-top:1px solid var(--line);margin-top:56px;padding:56px 0}
.article-design .rel-h{display:flex;justify-content:space-between;align-items:end;gap:16px;margin-bottom:24px}
.article-design .rel-h h2{margin:0;font-size:clamp(24px,2.6vw,30px)}
.article-design .rel-h a{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-weight:700;text-decoration:none}
.article-design .rgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.article-design .rc{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:box-shadow .2s,transform .2s}
.article-design .rc:hover{box-shadow:0 18px 40px rgba(11,42,46,.1);transform:translateY(-3px)}
.article-design .rc-img{display:block;overflow:hidden;background:var(--tint) linear-gradient(135deg,#E6F3F0,#CFE6E2)}
.article-design .rc-img img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.article-design .rc-b{padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px}
.article-design .rc-b small{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--teal)}
.article-design .rc h3{margin:0;font-size:17px;line-height:1.4}
.article-design .rc h3 a{color:var(--ink) !important;text-decoration:none}
.article-design .rc h3 a:hover{color:var(--teal) !important}
.article-design .rc .m{font-size:13px;color:var(--muted)}
.article-design .cmt{background:#fff;border:1px solid var(--line);border-radius:16px;padding:clamp(22px,3vw,30px);margin-top:28px}
.article-design .cmt h2{margin:0 0 4px;font-size:22px}
.article-design .cmt>p{margin:0 0 18px;color:var(--muted);font-size:15px}
.article-design .cf{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.article-design .cf .full{grid-column:1/-1}
.article-design .cf label{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:600;color:var(--ink)}
.article-design .cf input,.article-design .cf textarea{font:inherit;font-size:16px;border:1px solid var(--line);border-radius:10px;padding:12px 14px;color:var(--ink);background:#fff;width:100%;min-width:0}
.article-design .cf textarea{min-height:130px;resize:vertical}
.article-design .cf input:focus-visible,.article-design .cf textarea:focus-visible{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(25,168,143,.18)}
.article-design .cf .hp{position:absolute;left:-9999px}
.article-design .cf small{color:var(--muted);font-size:13px}
.article-design .cok{display:none;align-items:center;gap:10px;background:var(--tint);border-radius:12px;padding:16px;font-weight:600;color:var(--ink)}
.article-design .cok svg{color:var(--teal)}
.article-design .cmt.sent .cf{display:none}
.article-design .cmt.sent .cok{display:flex}
.article-design .cmt [data-comment-status]:not(:empty){display:block;margin-top:8px;color:#B42318;font-size:14px}
@media (max-width:1060px){
  .article-design .lay{grid-template-columns:1fr}
  .article-design .side{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
  .article-design .side>*{min-width:0}
  .article-design .sticky{position:static}
  .article-design .rgrid{grid-template-columns:1fr 1fr}
}
@media (max-width:700px){
  .article-design .side,.article-design .rgrid{grid-template-columns:minmax(0,1fr)}
  .article-design .toc ol{grid-template-columns:1fr}
}
@media (max-width:640px){
  .article-design .prose{font-size:17px}
  .article-design .prose .lede{font-size:18px}
  .article-design .feats,.article-design .cases,.article-design .cf{grid-template-columns:1fr}
  .article-design .tlist li{grid-template-columns:1fr}
  .article-design .steps li{padding-left:54px}
  .article-design .incta{grid-template-columns:1fr}
  .article-design .incta .btn{width:100%}
  .article-design .cover img{border-radius:12px}
  .article-design .bio{flex-direction:column}
  .article-design .meta{align-items:flex-start;flex-direction:column}
  .article-design .fq-a{padding:0 16px 16px}
  .article-design .fq summary{padding:14px}
}