/* 애플 제품 페이지 문법: 흰 캔버스와 #f5f5f7 띠의 교차, 거대한 700 헤드라인, 28px 라운드, 파랑 필 버튼 하나, 그림자 없음.
   구성은 플러그인 | 웹 사이트 | 최적화 세 장(chapter)으로 나뉘고, 히어로의 세 칸 스위치가 그 세 장으로 바로 이어진다. */
:root{
  --ink:#1d1d1f; --mid:#6e6e73; --deep:#424245; --hair:#d2d2d7;
  --canvas:#f5f5f7; --paper:#fff; --wash:#e8e8ed; --nav:rgba(251,251,253,.8);
  --blue:#0071e3; --blue-h:#0077ed; --link:#0066cc; --ember:#b64400;
  --font:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"SF Pro KR","Segoe UI",Roboto,"Noto Sans KR",sans-serif;
  --r:28px; --max:1200px; --pad:clamp(20px,4vw,40px);
}
*,*::before,*::after{box-sizing:border-box}
html[data-theme=dark]{
  --ink:#f5f5f7; --mid:#a1a1a6; --deep:#d2d2d7; --hair:#3a3a3c;
  --canvas:#1c1c1e; --paper:#0b0b0c; --wash:#2c2c2e; --nav:rgba(11,11,12,.8);
  --link:#2997ff; --ember:#ff9f0a;
}
html{scroll-padding-top:60px;color-scheme:light}
html[data-theme=dark]{color-scheme:dark}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.47;letter-spacing:-.022em;word-break:keep-all;overflow-x:hidden;-webkit-font-smoothing:antialiased;font-feature-settings:"tnum"}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:3px solid rgba(0,113,227,.5);outline-offset:3px;border-radius:10px}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--pad)}
.display{font-weight:700;letter-spacing:-.015em;line-height:1.05}
.h-lg{font-size:clamp(44px,7vw,96px)}
.h{font-size:clamp(36px,5vw,56px)}
.h-sm{font-size:clamp(28px,3.4vw,40px);font-weight:600;letter-spacing:0;line-height:1.14}
.lead{font-size:clamp(19px,1.8vw,21px);line-height:1.42;letter-spacing:.011em;color:var(--mid);font-weight:400;text-wrap:pretty}
p{text-wrap:pretty}
.vow p,.card .body p{text-wrap:balance}
.mute{color:var(--mid)}

/* 버튼·링크 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:12px 22px;border-radius:980px;font-size:17px;font-weight:400;letter-spacing:-.022em;background:var(--blue);color:#fff;transition:background .2s}
.btn:hover{background:var(--blue-h)}
.arrow{color:var(--link);font-size:17px;display:inline-flex;align-items:center;gap:2px}
.arrow::after{content:"›";font-size:20px;line-height:1;transition:transform .15s}
.arrow:hover{text-decoration:underline}
.arrow:hover::after{transform:translateX(2px)}

/* 내비 */
header{position:sticky;top:0;z-index:50;height:48px;background:var(--nav);color:var(--ink);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px)}
.nav{height:48px;display:flex;align-items:center;gap:28px;font-size:13px;letter-spacing:-.01em}
.nav .logo{display:flex;align-items:center;gap:8px;font-weight:600;font-size:15px}
.nav .logo i{width:22px;height:22px;border-radius:6px;background:var(--ink);display:grid;place-items:center}
.nav .logo svg{width:14px;height:14px}
.nav .logo svg path,#pre .lg svg path{fill:var(--paper)}
.nav ul{display:flex;gap:28px;margin-left:auto;color:var(--deep)}
.nav ul a:hover{color:var(--ink)}
.nav ul .sep{color:var(--hair);margin:0 -14px;user-select:none}
.nav .cta{font-size:12px;padding:5px 12px}
@media(max-width:760px){.nav ul{display:none}.nav .cta{margin-left:auto}}

/* 히어로: 단색 배경 */
.hero{position:relative;height:100svh;min-height:520px;display:grid;align-items:center;justify-items:center;text-align:center;padding:60px var(--pad) 22vh;isolation:isolate;overflow:hidden;color:var(--ink);background:var(--paper)}
.hero .eyebrow{font-size:17px;color:var(--mid);margin-bottom:8px}
.hero h1{max-width:none;letter-spacing:-.03em;margin:0 auto}
.hero h1 span{display:inline-block}
.hero .lead{max-width:820px;margin:18px auto 0;color:var(--deep)}

/* 세 버튼: 플러그인 · 웹사이트 · 최적화 → 각 장 페이지로 */
.pick{display:flex;justify-content:center;gap:24px;margin:52px auto 0;flex-wrap:wrap}
.pick a{--c:#8e8e93;--c2:#a3a3a8;padding:24px 68px;border-radius:980px;font-size:28px;font-weight:700;letter-spacing:-.01em;color:#fff;background:var(--c);box-shadow:0 8px 24px rgba(0,0,0,.14);transition:background .2s,color .2s,transform .2s,box-shadow .2s}
.pick a:nth-child(2){--c:#6e6e73;--c2:#85858a}
.pick a:nth-child(3){--c:#4e4e53;--c2:#66666b}
.pick a:hover{background:var(--ink);color:var(--paper);transform:translateY(-3px);box-shadow:0 14px 36px rgba(0,0,0,.22)}
.pick a:active{background:var(--c2);color:#fff;transform:none}
@media(max-width:560px){.pick{flex-direction:column;align-items:center;gap:14px;margin-top:40px}.pick a{width:min(100%,340px);text-align:center;padding:20px 40px;font-size:24px}}

/* 히어로 하단 사업자 정보 */
.biz{position:absolute;left:0;right:0;bottom:18px;padding:0 var(--pad);text-align:center;font-size:12px;line-height:1.6;color:var(--mid);letter-spacing:0}
.biz ul{display:flex;flex-wrap:wrap;justify-content:center;gap:2px 0}
.biz li+li::before{content:"·";margin:0 8px;color:var(--hair)}
.biz b{font-weight:600;color:var(--deep)}
@media(max-width:560px){.biz{font-size:11px;bottom:12px;line-height:1.5}.biz ul{display:block}.biz li+li::before{content:none}}

body.home{height:100svh;overflow:hidden}
body.home header{position:fixed;left:0;right:0}
body.home .pg,body.home footer{display:none}
body.page .hero{display:none}
body.page .pg{display:none}
body[data-page=plugin] .pg-plugin,body[data-page=web] .pg-web,body[data-page=optimize] .pg-opt{display:block}

/* 띠 */
section{padding:120px 0}
section.gray{background:var(--canvas)}
.band-head{max-width:860px;margin-bottom:44px}
.band-head p{margin-top:12px}
.kicker{display:block;font-size:17px;font-weight:600;color:var(--ember);margin-bottom:10px;letter-spacing:0}

/* 카드 */
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
@media(max-width:900px){.grid3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.grid2,.grid3{grid-template-columns:1fr}}
.card{background:var(--paper);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column}
.card .pic{aspect-ratio:16/10;overflow:hidden;background:var(--canvas)}
.card .pic img{width:100%;height:100%;object-fit:cover;object-position:top}
.card .body{padding:28px}
.card h3{font-size:24px;font-weight:600;letter-spacing:.007em;line-height:1.2}
.card p{margin-top:8px;color:var(--mid);font-size:17px}
.card.wide{grid-column:1/-1}
.card.wide .pic{aspect-ratio:21/9}
.card.feature{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}
.card.feature .pic{aspect-ratio:auto;min-height:380px}
.card.feature .body{padding:48px;display:grid;align-content:center;gap:12px}
.card.feature h3{font-size:clamp(28px,3.4vw,40px);letter-spacing:0}
@media(max-width:800px){.card.feature{grid-template-columns:1fr}.card.feature .pic{aspect-ratio:16/10;min-height:0}.card.feature .body{padding:28px}}
.gray .card{background:var(--paper)}
.paper .card{background:var(--canvas)}
.card.empty{grid-column:1/-1;border:1px dashed var(--hair);background:transparent}.card.empty .body{text-align:center;padding:56px 28px}.card.empty p{margin:0}
.portfolio .card.feature{grid-column:1/-1}.portfolio .card.feature .body{gap:8px}.portfolio .card.feature .kicker{margin-bottom:0}.badge{display:inline-flex;align-items:center;gap:6px;width:fit-content;margin-top:4px;padding:6px 12px;border-radius:999px;background:var(--ink);color:var(--paper);font-size:14px;font-weight:600}.badge::before{content:"";width:7px;height:7px;border-radius:50%;background:#30d158}.pf-list{margin-top:14px;display:grid;gap:8px}.pf-list li{position:relative;padding-left:22px;color:var(--deep);font-size:16px;line-height:1.5}.pf-list li::before{content:"";position:absolute;left:0;top:.55em;width:11px;height:11px;border-radius:50%;background:var(--ember)}

/* 약속 카드 (글만) */
/* 진행 절차 4단계 */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.steps li{background:var(--paper);border-radius:var(--r);padding:32px 28px 34px}
.steps .n{display:block;font-size:40px;font-weight:700;letter-spacing:-.03em;line-height:1;color:var(--ink)}
.steps h3{margin-top:14px;font-size:21px;font-weight:600;letter-spacing:.011em;line-height:1.2}
.steps p{margin-top:8px;color:var(--mid)}
@media(max-width:900px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.steps{grid-template-columns:1fr}}

/* 특징 목록: 굵은 항목 + 설명 */
.feats{margin-top:26px;display:grid;gap:10px}
.feats li{display:grid;grid-template-columns:minmax(0,160px) minmax(0,1fr);gap:4px 16px;padding:14px 20px;border-radius:16px;background:var(--canvas)}
section.gray .feats li{background:var(--paper)}
.feats b{font-weight:600;color:var(--ink);font-size:17px}
.feats span{color:var(--deep);font-size:16px;line-height:1.5}
@media(max-width:560px){.feats li{grid-template-columns:1fr}}

/* 3장 최적화: 어두운 패널 */
html[data-theme=dark] .dark{background:#2c2c2e}
.dark{background:var(--ink);color:#fff;border-radius:var(--r);padding:clamp(32px,5vw,64px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(28px,5vw,64px);align-items:center}
@media(max-width:860px){.dark{grid-template-columns:1fr}}
.dark h3{font-size:clamp(26px,3vw,36px);font-weight:600;letter-spacing:0;line-height:1.14}
.dark p{margin-top:12px;color:rgba(255,255,255,.72);font-size:17px}
.dark .arrow{color:#6fb4ff;margin-top:18px}
.dark .arrow::after{color:#6fb4ff}
.fixes{display:grid;gap:0}
.fixes li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;align-items:start;padding:16px 0;border-top:1px solid rgba(255,255,255,.14);font-size:17px;line-height:1.35;color:rgba(255,255,255,.9)}
.fixes li:last-child{border-bottom:1px solid rgba(255,255,255,.14)}
.fixes li::before{content:"";width:20px;height:20px;margin-top:2px;border-radius:50%;background:#30d158 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-6' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px no-repeat}
.fixes small{display:block;color:rgba(255,255,255,.55);font-size:14px;margin-top:2px}

/* 플러그인 장: 글 2단(제목 고정 + 본문) · 제작 영역 카드 */
.prose{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:56px;align-items:start}
.prose h2{position:sticky;top:80px;font-size:clamp(32px,3.6vw,46px)}
.prose .txt .lead{font-weight:600;color:var(--ink)}
.prose .txt p{margin-top:18px;font-size:19px;line-height:1.55;color:var(--deep)}
.prose .txt p:first-child{margin-top:0}
.prose .txt p.close{font-weight:600;color:var(--ink)}
.prose .note{margin-top:26px;padding-top:18px;border-top:1px solid var(--hair);font-size:14px;line-height:1.5;color:var(--mid)}
@media(max-width:900px){.prose{grid-template-columns:1fr;gap:28px}.prose h2{position:static}}
.areas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:20px}
.areas li{background:var(--paper);}
section.paper .areas li{background:var(--canvas);}
.areas li{border-radius:var(--r);padding:34px 32px 36px;transition:transform .25s,box-shadow .25s}
.areas li:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(0,0,0,.08)}
.areas .n{display:block;font-size:13px;font-weight:600;color:var(--ember);letter-spacing:0}
.areas h3{margin-top:10px;font-size:23px;font-weight:600;letter-spacing:-.005em;line-height:1.2}
.areas p{margin-top:10px;color:var(--mid);font-size:17px;line-height:1.5}
.areas p.em{font-weight:600;color:var(--ink)}
.areas.two{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:960px){.areas{grid-template-columns:1fr}}
@media(max-width:800px){.areas.two{grid-template-columns:1fr}}

.vow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:20px}
@media(max-width:800px){.vow{grid-template-columns:1fr}}
.vow li{background:var(--paper);border-radius:var(--r);padding:32px 28px 36px}
.gray .vow li{background:var(--paper)}
.paper .vow li{background:var(--canvas)}
.vow h3{font-size:21px;font-weight:600;letter-spacing:.011em;line-height:1.2}
.vow p{margin-top:8px;color:var(--mid)}


.way{background:var(--paper);border-radius:var(--r);padding:28px 24px;display:grid;justify-items:center;gap:6px;transition:background .2s}
a.way:hover{background:var(--wash)}
.way .k{font-size:14px;color:var(--mid)}
.way .v{font-size:17px;font-weight:600;word-break:break-all;color:var(--ink)}
.way button{font-size:14px;color:var(--link);margin-top:4px}
.way button:hover{text-decoration:underline}

footer{background:var(--paper);padding:20px 0 40px;font-size:12px;color:var(--mid);line-height:1.33}
footer .row{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;padding-top:16px;border-top:1px solid var(--hair)}
footer a{color:var(--link)}

/* 프리로더 */
#pre{position:fixed;inset:0;z-index:100;background:var(--paper);display:grid;place-items:center;transition:opacity .5s,visibility .5s}
#pre.off{opacity:0;visibility:hidden}
#pre .lg{display:flex;align-items:center;gap:12px;font-weight:700;font-size:28px;letter-spacing:-.02em;color:var(--ink)}
#pre .lg i{width:40px;height:40px;border-radius:11px;background:var(--ink);display:grid;place-items:center;animation:pop 1s ease-in-out infinite}
#pre .lg svg{width:24px;height:24px}
@keyframes pop{0%,100%{transform:scale(1)}50%{transform:scale(.9)}}

/* 모바일 전체화면 메뉴 */
.theme-btn{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;color:var(--ink);background:var(--wash);transition:background .2s,transform .2s}
.theme-btn:hover{transform:rotate(15deg)}
.theme-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.theme-btn .moon{display:none}
html[data-theme=dark] .theme-btn .sun{display:none}
html[data-theme=dark] .theme-btn .moon{display:block}
.menu-btn{display:none;width:36px;height:36px;border-radius:10px;place-items:center}
.menu-btn i{width:18px;height:1.5px;background:currentColor;display:block;position:relative}
.menu-btn i::before,.menu-btn i::after{content:"";position:absolute;left:0;right:0;height:1.5px;background:currentColor;transition:transform .3s}
.menu-btn i::before{top:-6px}.menu-btn i::after{top:6px}
body.menu-open .menu-btn i{background:transparent}
body.menu-open .menu-btn i::before{transform:translateY(6px) rotate(45deg)}
body.menu-open .menu-btn i::after{transform:translateY(-6px) rotate(-45deg)}
@media(max-width:760px){.menu-btn{display:grid}.nav .cta{display:none}.theme-btn{margin-left:auto}}
#menu{position:fixed;inset:0;z-index:45;background:var(--paper);padding:90px var(--pad) 40px;display:grid;grid-template-rows:1fr auto;clip-path:inset(0 0 100% 0);transition:clip-path .55s cubic-bezier(.76,0,.24,1);visibility:hidden}
body.menu-open #menu{clip-path:inset(0 0 0 0);visibility:visible}
#menu ul{display:grid;gap:6px;align-content:center}
#menu li a{font-size:clamp(40px,11vw,72px);font-weight:700;letter-spacing:-.02em;line-height:1.1;color:var(--ink)}
#menu li.small a{font-size:clamp(22px,6vw,32px);font-weight:600;color:var(--mid)}
#menu li a.blue{color:var(--blue)}
#menu .foot{font-size:14px;color:var(--mid);display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}

.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.on{opacity:1;transform:none}
@media(max-width:700px){br.d{display:none}.lead,.card p,.vow p{text-wrap:balance}}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}*{transition:none!important;animation:none!important}}

/* ── 포트폴리오 링크 카드 (index) ── */
.portfolio{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:900px){.portfolio{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.portfolio{grid-template-columns:1fr}}
a.card.pf{transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
a.card.pf:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(0,0,0,.08)}
html[data-theme=dark] a.card.pf:hover{box-shadow:0 18px 40px rgba(0,0,0,.45)}
a.card.pf .pic img{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
a.card.pf:hover .pic img{transform:scale(1.04)}
a.card.pf .body{display:grid;gap:6px;padding:24px 28px 26px}
a.card.pf .kicker{font-size:14px;margin-bottom:0}
a.card.pf h3{font-size:22px}
a.card.pf p{margin-top:0;font-size:15px}
a.card.pf .tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
a.card.pf .tags span{font-size:12px;font-weight:600;padding:4px 9px;border-radius:999px;background:var(--wash);color:var(--deep)}
a.card.pf .more{margin-top:10px;font-size:15px;font-weight:600;color:var(--link)}
a.card.pf .more::after{content:" ›"}

/* ── 포트폴리오 상세 페이지 ── */
body.detail{min-height:100vh;display:flex;flex-direction:column}
body.detail main{flex:1}
body.detail section{padding:0}
.d-hero{padding-block:64px 36px}
.d-shotwrap{padding-bottom:96px}
.d-cols{padding-block:96px}
.d-hero .crumb{font-size:14px;color:var(--mid);margin-bottom:22px}
.d-hero .crumb a{color:var(--link)}
.d-hero .crumb a::before{content:"‹ "}
.d-hero h1{font-size:clamp(40px,6vw,72px);font-weight:700;letter-spacing:-.03em;line-height:1.05}
.d-hero .lead{margin-top:16px;max-width:900px}
.d-hero .meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.d-hero .meta span{font-size:13px;font-weight:600;padding:6px 12px;border-radius:999px;background:var(--wash);color:var(--deep)}
.d-hero .meta .badge{background:var(--ink);color:var(--paper);margin-top:0}
.d-shot{border-radius:var(--r);overflow:hidden;background:var(--canvas);aspect-ratio:21/9}
.d-shot img{width:100%;height:100%;object-fit:cover}
.d-cols{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:20px;align-items:start}
@media(max-width:860px){.d-cols{grid-template-columns:1fr}}
.d-box{background:var(--paper);border-radius:var(--r);padding:36px}
section.paper .d-box{background:var(--canvas)}
.d-box h2{font-size:24px;font-weight:600;letter-spacing:.007em;margin-bottom:18px}
.d-feats{display:grid;gap:22px}
.d-feats li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:14px;align-items:start}
.d-feats b{display:block;font-size:19px;font-weight:600;color:var(--ink);line-height:1.3;margin-top:4px}
.d-feats p{margin-top:6px;font-size:16px;line-height:1.55;color:var(--deep)}
.d-feats li .n{width:34px;height:34px;border-radius:10px;background:var(--ink);color:var(--paper);display:grid;place-items:center;font-size:14px;font-weight:700}
.d-info{display:grid;gap:12px}
.d-info li{display:grid;grid-template-columns:minmax(0,96px) minmax(0,1fr);gap:12px;font-size:16px;padding-bottom:12px;border-bottom:1px solid var(--hair)}
.d-info li:last-child{border-bottom:0;padding-bottom:0}
.d-info b{font-weight:600;color:var(--mid)}
.d-cta{text-align:center;padding-block:72px 96px}
.d-cta h2{font-size:clamp(28px,4vw,44px);font-weight:700;letter-spacing:-.02em}
.d-cta p{margin-top:12px}
.d-cta .btns{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:28px}
.d-cta .ghost{padding:12px 22px;border-radius:999px;border:1px solid var(--hair);font-size:15px;font-weight:600}


/* 상세: 시스템 소개(영상 + 포인트 3칸) */
.d-sys{padding-block:150px 96px}
.d-sys .band-head{max-width:960px;margin-bottom:36px}
.d-sys .band-head .em{color:var(--ink);font-weight:600;margin-top:14px}
.d-sys .band-head .desc{margin-top:12px;font-size:18px;line-height:1.55;color:var(--deep)}
.d-video{border-radius:var(--r);overflow:hidden;background:#000;box-shadow:0 20px 60px rgba(0,0,0,.12)}
.d-video video{display:block;width:100%;height:auto}
.d-points{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:20px;margin-bottom:28px}
@media(max-width:800px){.d-points{grid-template-columns:1fr}}
.d-points li{border-radius:var(--r);padding:28px 28px 30px;background:var(--paper)}
section.paper .d-points li{background:var(--canvas)}
.d-points .ico{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--wash);font-size:22px;line-height:1}
.d-points b{display:block;margin-top:16px;font-size:20px;font-weight:600;letter-spacing:.005em;line-height:1.25}
.d-points p{margin-top:8px;color:var(--mid);font-size:16px;line-height:1.5}

.d-hero .desc{margin-top:14px;max-width:900px;font-size:18px;line-height:1.55;color:var(--deep)}
.d-feats .n.emoji{background:var(--wash);color:var(--ink);font-size:17px}
.d-close{margin-top:24px;padding-top:20px;border-top:1px solid var(--hair);font-size:17px;font-weight:600;color:var(--ink);line-height:1.5}
.d-hero .lead.em{color:var(--ink);font-weight:600}
.d-side{display:grid;gap:20px}
.d-fig{margin:0;padding:0;overflow:hidden}
.d-fig img{width:100%;height:auto;display:block}
.d-fig figcaption{padding:14px 24px 18px;font-size:14px;color:var(--mid);text-align:center}