/* ───────── QUIX 소개 · 요금제 페이지 공용 스타일 ───────── */
:root {
  --bg: #06070a; --s1: #0c0e13; --s2: #11141b; --s3: #171b24; --line: #1b1f29; --line2: #262b37;
  --text: #f1f3f8; --t2: #c4c9d5; --muted: #858c9f; --b1: #9da3ad; --b2: #d1d5db; --b3: #eef0f4;
  --mint: #b8bec7; --amber: #c7bd9d; --violet: #969ba5; --red: #ff6b6b;
  --r: 20px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: "Pretendard Variable", Pretendard, "Noto Sans KR", system-ui, sans-serif; font-size: 15.5px; line-height: 1.7; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.glow { position: absolute; pointer-events: none; border-radius: 50%; filter: blur(90px); opacity: .55; }

/* 상단 메뉴 */
.nav { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(16px) saturate(140%); background: rgba(6, 7, 10, .7); border-bottom: 1px solid var(--line); }
.nav .wrap { height: 68px; display: flex; align-items: center; gap: 8px; }
.logo { display: flex; align-items: center; gap: 10px; font-weight: 900; letter-spacing: .16em; font-size: 16px; margin-right: 18px; }
.logo img { width: 32px; height: 32px; border-radius: 9px; object-fit: contain; }
.nav-links { display: flex; gap: 2px; }
.nav-links a { padding: 8px 14px; border-radius: 10px; color: var(--t2); font-weight: 600; font-size: 14.5px; transition: background .15s, color .15s; }
.nav-links a:hover { background: var(--s2); color: var(--text); }
.nav-links a.on { color: var(--text); background: var(--s2); }
.nav .sp { flex: 1; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 18px; border-radius: 12px; font: inherit; font-weight: 700; font-size: 14.5px; border: 1px solid var(--line2); background: var(--s2); color: var(--text); cursor: pointer; transition: transform .15s, box-shadow .15s, background .15s, border-color .15s; white-space: nowrap; }
.btn:hover { border-color: #39404f; transform: translateY(-1px); }
.btn.pri { border: 0; background: linear-gradient(135deg, #e4e6ea, #7d838d); box-shadow: 0 12px 28px -12px rgba(190, 195, 204, .45); color: #101114; }
.btn.pri:hover { box-shadow: 0 16px 34px -12px rgba(190, 195, 204, .6); }
.btn.lg { height: 52px; padding: 0 26px; font-size: 16px; border-radius: 14px; }
.btn svg { width: 17px; height: 17px; }
.menu-btn { display: none; }

/* 히어로 */
.hero { position: relative; padding: 84px 0 64px; overflow: hidden; }
.hero .glow.a { width: 520px; height: 520px; background: #737984; top: -220px; right: -120px; }
.hero .glow.b { width: 380px; height: 380px; background: #434852; bottom: -200px; left: -140px; opacity: .3; }
.hero-grid { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 99px; font-size: 12.5px; font-weight: 800; letter-spacing: .06em; color: var(--b3); background: rgba(190, 195, 204, .1); border: 1px solid rgba(190, 195, 204, .3); }
.eyebrow b { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 4px rgba(52, 211, 153, .18); }
.hero h1 { font-size: clamp(36px, 5.2vw, 60px); line-height: 1.12; letter-spacing: -.045em; margin: 20px 0 18px; font-weight: 900; }
.grad { background: linear-gradient(95deg, var(--b2), #a5c8ff 60%, var(--b2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero p.lead { color: var(--t2); font-size: 17.5px; max-width: 540px; margin: 0 0 30px; }
.hero-cta { display: flex; gap: 10px; flex-wrap: wrap; }
.trust { display: flex; gap: 28px; margin-top: 36px; flex-wrap: wrap; }
.trust div b { display: block; font-size: 26px; font-weight: 900; letter-spacing: -.03em; }
.trust div span { color: var(--muted); font-size: 13px; }

/* 섹션 공통 */
section.sec { padding: 92px 0; position: relative; }
.sec-head { text-align: center; max-width: 720px; margin: 0 auto 52px; }
.sec-head .kicker { font-size: 13px; font-weight: 900; letter-spacing: .14em; color: var(--b2); }
.sec-head h2 { font-size: clamp(28px, 3.6vw, 40px); line-height: 1.25; letter-spacing: -.035em; margin: 12px 0 14px; font-weight: 900; }
.sec-head p { color: var(--muted); margin: 0; font-size: 16px; }
.divider { height: 1px; background: linear-gradient(90deg, transparent, var(--line2), transparent); }

/* 플랜 뱃지 */
.pb { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; font-size: 11px; font-weight: 900; letter-spacing: .06em; }
.pb.free { color: var(--t2); background: var(--s3); border: 1px solid var(--line2); }
.pb.lite { color: var(--b3); background: rgba(190, 195, 204, .12); border: 1px solid rgba(190, 195, 204, .35); }
.pb.pro { color: #fff; background: linear-gradient(135deg, var(--b1), var(--violet)); }
.pb.add { color: var(--amber); background: rgba(245, 177, 74, .1); border: 1px solid rgba(245, 177, 74, .35); }

/* 기능 바로가기 */
.jump { position: sticky; top: 68px; z-index: 40; background: rgba(6, 7, 10, .82); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.jump .wrap { display: flex; gap: 6px; overflow-x: auto; padding-top: 10px; padding-bottom: 10px; scrollbar-width: none; }
.jump .wrap::-webkit-scrollbar { display: none; }
.jump a { flex: none; padding: 7px 14px; border-radius: 99px; font-size: 13.5px; font-weight: 700; color: var(--t2); border: 1px solid var(--line2); background: var(--s1); transition: all .15s; }
.jump a:hover, .jump a.on { color: #fff; border-color: var(--b1); background: rgba(190, 195, 204, .14); }

/* 기능 블록 */
.feat { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: center; margin-bottom: 96px; }
.feat:last-child { margin-bottom: 0; }
.feat.rev { grid-template-columns: 1.1fr .9fr; }
.feat.rev .txt { order: 2; }
.feat .num { font-size: 13px; font-weight: 900; color: var(--b2); letter-spacing: .12em; }
.feat h3 { font-size: clamp(24px, 2.8vw, 32px); line-height: 1.3; letter-spacing: -.03em; margin: 10px 0 12px; font-weight: 900; }
.feat .desc { color: var(--t2); margin: 0 0 20px; }
.feat .plans { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.checks li { position: relative; padding-left: 30px; color: var(--t2); font-size: 14.5px; }
.checks li::before { content: ""; position: absolute; left: 0; top: 3px; width: 20px; height: 20px; border-radius: 6px; background: rgba(190, 195, 204, .14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d1d5db' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/13px no-repeat; }
.checks li b { color: var(--text); }
.checks li .pb { margin-left: 6px; vertical-align: 1px; }

/* 브라우저 프레임 스크린샷 */
.shot { position: relative; border-radius: 16px; overflow: hidden; border: 1px solid var(--line2); background: var(--s1); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .02) inset; }
.shot::before { content: ""; display: block; height: 34px; background: #0f1218 radial-gradient(circle at 18px 17px, #ff5f57 5px, transparent 5.5px), radial-gradient(circle at 36px 17px, #febc2e 5px, transparent 5.5px), radial-gradient(circle at 54px 17px, #28c840 5px, transparent 5.5px); background-repeat: no-repeat; border-bottom: 1px solid var(--line); }
.shot img { width: 100%; cursor: zoom-in; }
.shot .cap { position: absolute; left: 12px; bottom: 12px; padding: 5px 11px; border-radius: 8px; font-size: 12px; font-weight: 700; background: rgba(6, 7, 10, .8); border: 1px solid var(--line2); backdrop-filter: blur(6px); }
.stack-shots { position: relative; }
.stack-shots .shot + .shot { position: absolute; width: 58%; right: -18px; bottom: -40px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .9); }
.phone { width: 260px; border-radius: 34px; padding: 10px; background: #0b0d12; border: 1px solid var(--line2); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .9); }
.phone img { border-radius: 26px; }

/* 디스코드 모형 */
.dc { background: #313338; border-radius: 16px; padding: 18px 18px 16px; font-family: "gg sans", "Pretendard Variable", Pretendard, sans-serif; color: #dbdee1; font-size: 14.5px; line-height: 1.5; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .9); border: 1px solid #3f4147; }
.dc + .dc { margin-top: 14px; }
.dc-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.dc-av { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(145deg, var(--b2), var(--b1)); display: grid; place-items: center; flex: none; }
.dc-av svg { width: 22px; height: 22px; }
.dc-name { font-weight: 600; color: #fff; }
.dc-app { font-size: 10px; font-weight: 700; background: #5865f2; color: #fff; padding: 1px 5px; border-radius: 4px; margin-left: 4px; vertical-align: 1px; }
.dc-time { color: #949ba4; font-size: 12px; margin-left: 4px; }
.dc-body { padding-left: 48px; }
.dc-card { background: #2b2d31; border-radius: 8px; border-left: 4px solid var(--b1); padding: 12px 16px; }
.dc-card h4 { margin: 0 0 6px; font-size: 16px; color: #fff; }
.dc-card h5 { margin: 0; font-size: 15px; color: #fff; }
.dc-sep { height: 1px; background: #3f4147; margin: 10px 0; }
.dc-card ul { margin: 0; padding-left: 18px; }
.dc-card li { margin: 1px 0; }
.dc-code { font-family: ui-monospace, Consolas, monospace; font-size: 12.5px; background: #1e1f22; border-radius: 4px; padding: 1px 5px; color: #dbdee1; }
.dc-sub { color: #949ba4; font-size: 12.5px; }
.dc-red { font-family: ui-monospace, Consolas, monospace; font-size: 13px; background: #1e1f22; border: 1px solid #232428; border-radius: 6px; padding: 8px 10px; color: #f04747; font-weight: 700; }
.dc-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.dc-btn { height: 32px; padding: 0 14px; border-radius: 8px; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; background: #4e5058; color: #fff; }
.dc-btn.pri { background: #5865f2; } .dc-btn.ok { background: #248046; } .dc-btn.no { background: #da373c; }
.dc-select { margin-top: 10px; height: 40px; border-radius: 8px; background: #1e1f22; border: 1px solid #1e1f22; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; color: #949ba4; font-size: 14px; }
.dc-select::after { content: ""; width: 8px; height: 8px; border-right: 2px solid #b5bac1; border-bottom: 2px solid #b5bac1; transform: rotate(45deg) translateY(-3px); }
.dc-opts { margin-top: 6px; background: #2b2d31; border: 1px solid #1e1f22; border-radius: 8px; overflow: hidden; }
.dc-opts div { padding: 8px 12px; display: flex; gap: 10px; align-items: center; }
.dc-opts div + div { border-top: 1px solid #232428; }
.dc-opts div.on { background: #35373c; }
.dc-opts b { color: #fff; font-weight: 600; display: block; font-size: 14px; }
.dc-opts small { color: #949ba4; font-size: 12.5px; }
.dc-eph { color: #949ba4; font-size: 12px; margin-top: 8px; padding-left: 48px; }
.dc-field { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
.dc-field b { display: block; color: #fff; font-size: 13px; }
.dc-dm { display: inline-block; margin-top: 8px; padding: 6px 10px; border-radius: 6px; background: #2b2d31; color: #dbdee1; font-size: 13.5px; }

/* 기능 카드 그리드 */
.grid { display: grid; gap: 14px; }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.mini { padding: 22px; border-radius: var(--r); background: linear-gradient(180deg, var(--s2), var(--s1)); border: 1px solid var(--line); transition: border-color .2s, transform .2s; }
.mini:hover { border-color: #2c3342; transform: translateY(-2px); }
.mini .ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 20px; background: rgba(190, 195, 204, .12); margin-bottom: 14px; }
.mini h4 { margin: 0 0 6px; font-size: 16px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mini p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.65; }

/* 전체 기능 표 */
.tbl-wrap { border-radius: var(--r); border: 1px solid var(--line); overflow: hidden; background: var(--s1); }
.tbl-scroll { overflow-x: auto; }
table.cmp { width: 100%; border-collapse: collapse; min-width: 640px; }
table.cmp th, table.cmp td { padding: 13px 18px; border-bottom: 1px solid var(--line); text-align: center; font-size: 14.5px; }
table.cmp th:first-child, table.cmp td:first-child { text-align: left; }
table.cmp thead th { position: sticky; top: 0; background: #0f1218; font-size: 13px; color: var(--muted); font-weight: 800; letter-spacing: .04em; }
table.cmp thead th.pro { color: #fff; }
table.cmp td:first-child { color: var(--t2); }
table.cmp td:first-child small { display: block; color: var(--muted); font-size: 12.5px; }
table.cmp tr.grp td { background: #0b0d12; color: var(--b2); font-weight: 900; font-size: 12.5px; letter-spacing: .1em; padding-top: 18px; }
table.cmp td.pro, table.cmp th.pro { background: rgba(190, 195, 204, .05); }
table.cmp tr.grp td.pro { background: rgba(190, 195, 204, .05); }
.y { color: var(--mint); font-weight: 900; font-size: 17px; }
.n { color: #3d4352; font-weight: 900; }
.v { font-weight: 800; }

/* 요금제 카드 */
.period { display: inline-flex; padding: 5px; border-radius: 14px; background: var(--s1); border: 1px solid var(--line2); gap: 4px; margin: 0 auto 36px; }
.period button { height: 40px; padding: 0 22px; border-radius: 10px; border: 0; background: none; color: var(--t2); font: inherit; font-weight: 800; cursor: pointer; display: flex; align-items: center; gap: 6px; }
.period button.on { background: linear-gradient(135deg, var(--b2), var(--b1)); color: #fff; box-shadow: 0 8px 20px -8px rgba(190, 195, 204, .8); }
.period button em { font-style: normal; font-size: 11px; padding: 1px 6px; border-radius: 6px; background: rgba(52, 211, 153, .18); color: var(--mint); }
.period button.on em { background: rgba(255, 255, 255, .2); color: #fff; }
.plans-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.plan { position: relative; padding: 30px 28px; border-radius: 24px; background: linear-gradient(180deg, var(--s2), var(--s1)); border: 1px solid var(--line); display: flex; flex-direction: column; }
.plan.best { border-color: rgba(190, 195, 204, .6); background: radial-gradient(120% 60% at 50% 0%, rgba(190, 195, 204, .16), transparent 60%), linear-gradient(180deg, #121828, var(--s1)); box-shadow: 0 30px 80px -40px rgba(190, 195, 204, .7); }
.plan .badge { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); padding: 5px 14px; border-radius: 99px; font-size: 12px; font-weight: 900; letter-spacing: .08em; background: linear-gradient(135deg, var(--b2), var(--violet)); color: #fff; box-shadow: 0 8px 20px -8px rgba(140, 145, 155, .8); }
.plan h3 { margin: 0; font-size: 15px; letter-spacing: .14em; font-weight: 900; color: var(--t2); }
.plan .for { color: var(--muted); font-size: 14px; margin: 4px 0 18px; }
.price { display: flex; align-items: baseline; gap: 6px; }
.price b { font-size: 44px; font-weight: 900; letter-spacing: -.04em; line-height: 1; }
.price span { color: var(--muted); font-weight: 700; }
.per { color: var(--muted); font-size: 13px; margin: 8px 0 22px; min-height: 20px; }
.per s { opacity: .7; margin-right: 6px; }
.per em { font-style: normal; color: var(--mint); font-weight: 800; }
.plan .btn { width: 100%; margin-bottom: 22px; }
.plan ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.plan li { display: flex; gap: 10px; font-size: 14.5px; color: var(--t2); }
.plan li::before { content: "✓"; flex: none; width: 20px; height: 20px; border-radius: 6px; display: grid; place-items: center; font-size: 12px; font-weight: 900; color: var(--b2); background: rgba(190, 195, 204, .13); margin-top: 2px; }
.plan li.x { color: #4c5263; }
.plan li.x::before { content: "–"; color: #4c5263; background: var(--s3); }
.plan li.head { color: var(--text); font-weight: 800; font-size: 13px; letter-spacing: .04em; margin-top: 6px; }
.plan li.head::before { display: none; }

/* 부가 서비스 */
.addon { padding: 22px; border-radius: var(--r); border: 1px solid var(--line); background: var(--s1); display: flex; flex-direction: column; gap: 6px; }
.addon .top { display: flex; align-items: center; gap: 10px; }
.addon .ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 19px; background: rgba(245, 177, 74, .12); }
.addon h4 { margin: 0; font-size: 15.5px; }
.addon p { margin: 0; color: var(--muted); font-size: 13.5px; flex: 1; }
.addon .pr { margin-top: 10px; display: flex; align-items: baseline; gap: 6px; }
.addon .pr b { font-size: 22px; font-weight: 900; }
.addon .pr span { color: var(--muted); font-size: 13px; }

/* 단계 */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; counter-reset: st; }
.step { padding: 24px; border-radius: var(--r); border: 1px solid var(--line); background: var(--s1); position: relative; }
.step::before { counter-increment: st; content: counter(st); width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-weight: 900; background: linear-gradient(145deg, var(--b2), var(--b1)); margin-bottom: 14px; }
.step h4 { margin: 0 0 6px; font-size: 16.5px; }
.step p { margin: 0; color: var(--muted); font-size: 14px; }
.step code { font-family: ui-monospace, Consolas, monospace; font-size: 13px; background: var(--s3); padding: 2px 7px; border-radius: 6px; color: var(--b3); }

/* FAQ */
.faq { max-width: 820px; margin: 0 auto; display: grid; gap: 10px; }
.faq details { border-radius: 16px; border: 1px solid var(--line); background: var(--s1); }
.faq summary { list-style: none; cursor: pointer; padding: 18px 22px; font-weight: 700; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--b2); font-size: 20px; line-height: 1; transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { margin: 0; padding: 0 22px 20px; color: var(--t2); font-size: 14.5px; }

/* 마무리 CTA */
.final { position: relative; overflow: hidden; border-radius: 28px; padding: 64px 40px; text-align: center; border: 1px solid rgba(190, 195, 204, .35); background: radial-gradient(80% 120% at 50% 0%, rgba(190, 195, 204, .22), transparent 70%), var(--s1); }
.final h2 { font-size: clamp(28px, 3.6vw, 42px); letter-spacing: -.035em; margin: 0 0 12px; font-weight: 900; }
.final p { color: var(--t2); margin: 0 0 28px; }
.final .hero-cta { justify-content: center; }

footer.site { border-top: 1px solid var(--line); margin-top: 96px; }
footer.site .wrap { padding-top: 32px; padding-bottom: 40px; display: flex; gap: 20px; align-items: center; flex-wrap: wrap; color: var(--muted); font-size: 13.5px; }
footer.site nav { display: flex; gap: 18px; margin-left: auto; }
footer.site nav a:hover { color: var(--text); }

/* 이미지 확대 */
.lb { position: fixed; inset: 0; z-index: 100; background: rgba(0, 0, 0, .86); display: none; place-items: center; padding: 24px; cursor: zoom-out; }
.lb.on { display: grid; }
.lb img { max-width: min(1400px, 100%); max-height: 92vh; border-radius: 12px; box-shadow: 0 40px 100px rgba(0, 0, 0, .8); }

/* 나타나기 */
.rv { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.rv.in { opacity: 1; transform: none; }

/* 반응형 */
@media (max-width: 1024px) {
  .hero-grid, .feat, .feat.rev { grid-template-columns: 1fr; gap: 36px; }
  .feat.rev .txt { order: 0; }
  .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plans-row { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
  .stack-shots .shot + .shot { position: relative; width: 100%; right: 0; bottom: 0; margin-top: 14px; }
}
@media (max-width: 760px) {
  .nav-links, .nav .btn:not(.pri) { display: none; }
  .nav .btn.pri { height: 38px; padding: 0 14px; font-size: 13.5px; }
  .g3, .g4, .steps { grid-template-columns: 1fr; }
  .hero { padding: 52px 0 40px; }
  section.sec { padding: 64px 0; }
  .feat { margin-bottom: 64px; }
  .dc-body { padding-left: 0; }
  .dc-eph { padding-left: 0; }
  .final { padding: 44px 22px; }
  footer.site nav { margin-left: 0; }
  .phone { width: 220px; margin: 0 auto; }
}
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } }

/* ═══════════ 보기 편한 화면 (2026.10) ═══════════
   빛 번짐 · 진한 그림자 · 색 번짐을 줄이고 여백으로 정리합니다. */
.glow { display: none !important; }
.btn.pri { background: var(--b1); box-shadow: none; }
.btn.pri:hover { box-shadow: none; filter: brightness(1.08); }
.btn:hover { transform: none; }
.hero { padding: 90px 0 64px; }
.hero h1 { font-weight: 800; letter-spacing: -.03em; }
.grad { background: none; color: var(--b2); -webkit-background-clip: initial; background-clip: initial; }
.sec { padding: 84px 0; }
.sec-head { margin-bottom: 40px; }
.sec-head .kicker, .kicker { color: var(--b2); letter-spacing: 0; font-weight: 700; font-size: 13px; }
.sec-head h2 { font-weight: 800; }
.mini, .plan, .addon, .step, .faq details, .final { background: var(--s1); }
.mini:hover, .plan:hover { transform: none; }
.plan.best { background: var(--s1); box-shadow: none; border-color: rgba(190, 195, 204,.5); }
.plan .badge { background: var(--b1); }
.final { background: var(--s1); border-color: var(--line); }
.shot { box-shadow: none; }
.logo i, .step::before { background: var(--b1); box-shadow: none; }
.rv { opacity: 1 !important; transform: none !important; }

/* Flat black and white finish */
.grad { background:none;-webkit-text-fill-color:currentColor;color:var(--text); }
.btn.pri,.pb.pro,.dc-av,.checks li::before,.divider { background-image:none; }
.btn.pri { background:#35373b;color:#ededee;border:1px solid #47494d;box-shadow:none; }
.btn.pri:hover { background:#3c3e42;filter:none; }
.pb.pro { background:#303236;color:#ededee;border:1px solid #44464a; }
* { background-image:none !important; }
.grad { color:var(--text) !important;-webkit-text-fill-color:currentColor; }
.checks li::before { content:"✓";display:grid;place-items:center;background:#24262b;color:#fff;font-size:13px;font-weight:900; }
.period button.on { background:#35373b;color:#ededee;box-shadow:none; }
.plan.best { background:var(--s1);border-color:#47494d;box-shadow:none; }
.plan .badge { background:#35373b;color:#ededee;box-shadow:none; }
.final { background:var(--s1);border-color:var(--line); }
.eyebrow b { box-shadow:none; }