/* Tech Pumpkin — service page template
   Loads after main.css (tokens, header, buttons, FAQ, footer).
   Pillar accent comes from body[data-c] (Build = orange). */

body[data-c] { --acc: var(--c); --acc-f: var(--cf); --acc-t: var(--ct); }
.sv-dark { background: var(--ink); color: var(--tx); }
.sv-cream { background: var(--cream); color: var(--ink); --mu: var(--lmu); --line: var(--lline); }
.sv-tint { background: #17120F; }
.sv h2 { margin-bottom: 18px; }
.sv__sub { color: var(--mu); font-size: 18px; max-width: 640px; }
.sv__head { margin-bottom: 48px; }
.sv__head--split { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; }
.chipx { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-mono); font-size: 13px; color: var(--acc-t); border: 1px solid color-mix(in srgb, var(--acc) 45%, transparent); padding: 6px 12px; border-radius: 999px; margin-bottom: 20px; }
.sv-cream .chipx { color: #9A3F0B; border-color: rgba(11,11,20,.2); }
.txtlink { font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: var(--acc); transition: color .2s; }
.txtlink:hover { color: var(--acc-t); }
.sv-cream .txtlink:hover { color: #9A3F0B; }
.phx { background: var(--y); color: var(--ink); padding: 0 6px; border-radius: 4px; font-family: var(--f-mono); font-size: .85em; }

/* reveal */
.js [data-rv] { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js [data-rv].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js [data-rv] { opacity: 1; transform: none; } }

/* ===== 01–02 Hero ===== */
.svh { padding-block: 34px 96px; overflow: hidden; isolation: isolate; }
.svh::before { content: ""; position: absolute; z-index: -1; width: 980px; height: 980px; right: -260px; top: -380px; background: radial-gradient(circle, color-mix(in srgb, var(--acc) 26%, transparent), transparent 62%); pointer-events: none; }
.crumb { font-family: var(--f-mono); font-size: 13px; color: var(--mu); margin-bottom: 44px; }
.crumb ol { display: flex; flex-wrap: wrap; gap: 6px; }
.crumb li + li::before { content: "/"; margin-right: 6px; opacity: .6; }
.crumb a:hover { color: #fff; }
.crumb [aria-current] { color: var(--acc-t); }
.svh__grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: 64px; align-items: center; }
.svh h1 { font-family: var(--f-disp); font-weight: 700; font-size: clamp(38px, 5vw, 66px); line-height: 1.04; letter-spacing: -.035em; margin-bottom: 24px; text-wrap: balance; }
.svh h1 em { font-style: normal; color: var(--acc-t); }
.svh__lead { font-size: 19px; color: #c9c9d6; max-width: 580px; }
.svh .ctas { margin-top: 34px; }
.btn--wirew { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); box-shadow: none; }
.btn--wirew:hover { background: rgba(255,255,255,.06); box-shadow: none; }
.svh__plat { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 34px; font-size: 14px; color: var(--mu); }
.svh__plat a { font-family: var(--f-mono); font-size: 13px; color: #e2e2ec; border: 1px solid var(--line); padding: 7px 12px; border-radius: 9px; transition: border-color .2s, color .2s, transform .2s; }
.svh__plat a:hover { border-color: var(--acc); color: var(--acc-t); transform: translateY(-2px); }
.byline { display: flex; gap: 12px; align-items: center; margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 14px; color: var(--mu); }
.byline__av { width: 36px; height: 36px; border-radius: 50%; flex: none; background: conic-gradient(var(--o), var(--p), var(--y), var(--b), var(--g), var(--o)); }

.ide { background: var(--card); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; box-shadow: 0 40px 90px -30px rgba(0,0,0,.7), 10px 10px 0 color-mix(in srgb, var(--acc) 70%, transparent); }
.ide__bar { display: flex; align-items: center; gap: 7px; padding: 13px 16px; border-bottom: 1px solid var(--line); }
.ide__bar i { width: 11px; height: 11px; border-radius: 50%; background: #34344a; }
.ide__bar i:nth-child(1) { background: var(--o); } .ide__bar i:nth-child(2) { background: var(--y); } .ide__bar i:nth-child(3) { background: var(--g); }
.ide__bar span { margin-left: 10px; font-family: var(--f-mono); font-size: 12px; color: var(--mu); }
.ide__code { font-family: var(--f-mono); font-size: 14px; line-height: 1.75; padding: 20px 22px; min-height: 236px; white-space: pre-wrap; color: #d9d9e6; }
.ide__code .cur { display: inline-block; width: .55em; height: 1.1em; background: var(--acc); vertical-align: -3px; animation: blink .9s steps(1) infinite; }
.ide__code .t-k { color: var(--pt); } .ide__code .t-s { color: var(--g); } .ide__code .t-f { color: var(--acc-t); } .ide__code .t-c { color: #6b6b82; }
.ide__out { border-top: 1px solid var(--line); padding: 16px 22px 20px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; }
.ide__out li { font-family: var(--f-mono); font-size: 12.5px; color: var(--mu); display: flex; gap: 8px; align-items: center; opacity: .35; transition: opacity .4s, color .4s; }
.ide__out li::before { content: "○"; color: var(--mu); }
.ide__out li.is-on { opacity: 1; color: #e8e8f0; }
.ide__out li.is-on::before { content: "✓"; color: var(--g); font-weight: 700; }

/* jump-link sub-nav */
.subnav { position: sticky; top: 64px; z-index: 40; background: rgba(14,14,24,.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-block: 1px solid var(--line); }
.subnav__row { display: flex; align-items: center; gap: 6px; height: 54px; }
.subnav__lbl { font-family: var(--f-mono); font-size: 12px; color: var(--mu); margin-right: 8px; white-space: nowrap; }
.subnav__links { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; }
.subnav__links::-webkit-scrollbar { display: none; }
.subnav__links a { font-family: var(--f-mono); font-size: 12.5px; color: var(--mu); padding: 7px 13px; border-radius: 999px; white-space: nowrap; transition: color .2s, background .25s; }
.subnav__links a:hover { color: #fff; }
.subnav__links a.is-active { background: var(--acc); color: var(--acc-f); }
.subnav__cta { flex: none; font-family: var(--f-disp); font-weight: 600; font-size: 12.5px; padding: 10px 16px; border-radius: 9px; background: var(--acc); color: var(--acc-f); transition: transform .2s; }
.subnav__cta:hover { transform: translateY(-2px); }

/* mobile sticky CTA bar */
.mbar { display: none; }

/* ===== 03 Quick answer + glance ===== */
.qa3 { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 64px; align-items: start; }
.answer { font-size: 21px; line-height: 1.6; border-left: 4px solid var(--acc); padding-left: 24px; margin-top: 8px; }
.answer strong { background: linear-gradient(transparent 58%, color-mix(in srgb, var(--acc) 55%, transparent) 58%); }
.qa3__more { margin-top: 22px; color: var(--mu); font-size: 17px; max-width: 600px; }
.qa3__more + .qa3__more { margin-top: 14px; }
.facts { background: #fff; border: 2px solid var(--ink); border-radius: 20px; padding: 28px; box-shadow: 10px 10px 0 var(--acc); }
.facts h3 { font-family: var(--f-disp); font-size: 17px; margin-bottom: 14px; }
.facts dl > div { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 14px; padding: 12px 0; border-top: 1px solid var(--lline); font-size: 15px; }
.facts dt { font-family: var(--f-mono); font-size: 12px; color: var(--lmu); padding-top: 2px; }
.facts dd { font-weight: 500; }
.facts dd a { text-decoration: underline; text-underline-offset: 3px; }

/* ===== 04 Problem ===== */
.errs3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.err3 { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 22px; transition: transform .3s var(--ease), border-color .3s, box-shadow .3s; }
.err3:hover { transform: translateY(-4px); border-color: rgba(255,107,107,.45); box-shadow: 0 18px 40px -20px rgba(255,107,107,.4); }
.err3 h3 { font-family: var(--f-mono); font-size: 13.5px; font-weight: 700; margin-bottom: 10px; }
.err3--e h3 { color: #ff7a7a; } .err3--w h3 { color: var(--o); }
.err3 p { color: var(--mu); font-size: 15px; }
.after-link { margin-top: 34px; color: var(--mu); }

/* ===== 05 Included ===== */
.tiles4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.t4 { --gx: 50%; --gy: 0%; position: relative; overflow: hidden; background: linear-gradient(160deg, #1b1b2a, #121220); border: 1px solid var(--line); border-radius: 18px; padding: 24px; min-height: 230px; transition: border-color .3s, transform .3s var(--ease); }
.t4::before { content: ""; position: absolute; inset: 0; background: radial-gradient(260px circle at var(--gx) var(--gy), color-mix(in srgb, var(--acc) 22%, transparent), transparent 60%); opacity: 0; transition: opacity .3s; pointer-events: none; }
.t4::after { content: ""; position: absolute; top: -40%; left: -70%; width: 45%; height: 180%; transform: rotate(20deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent); animation: glare 6s ease-in-out infinite; pointer-events: none; }
.t4:nth-child(2n)::after { animation-delay: 1.5s; } .t4:nth-child(3n)::after { animation-delay: 3s; }
@keyframes glare { 0%, 60% { left: -70%; } 85%, 100% { left: 130%; } }
.t4:hover { border-color: color-mix(in srgb, var(--acc) 50%, transparent); transform: translateY(-3px); }
.t4:hover::before { opacity: 1; }
.t4__ic { font-family: var(--f-mono); font-size: 13px; color: var(--acc-t); width: 46px; height: 46px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--acc) 45%, transparent); display: grid; place-items: center; margin-bottom: 18px; }
.t4 h3 { font-family: var(--f-disp); font-size: 16px; line-height: 1.25; letter-spacing: -.01em; margin-bottom: 10px; }
.t4 p { color: var(--mu); font-size: 14.5px; position: relative; }
.t4 p a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* ===== 06 Mid CTA band ===== */
.band { padding-block: 80px; }
.band--acc { background: var(--acc); color: var(--acc-f); }
.band__row { display: flex; justify-content: space-between; align-items: center; gap: 48px; }
.band h2 { font-size: clamp(30px, 3.6vw, 46px); max-width: 620px; margin-bottom: 14px; }
.band__p { font-size: 17px; max-width: 560px; }
.band__k { font-family: var(--f-mono); font-size: 13px; margin-bottom: 12px; }
.band .form { margin-top: 0; flex: none; width: min(520px, 100%); box-shadow: 7px 7px 0 var(--ink); }
.band .form__msg { color: var(--ink); }

/* ===== 07 Process ===== */
.proc { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 72px; align-items: start; }
.proc__side { position: sticky; top: 150px; }
.proc__side .btn { margin-top: 30px; }
.steps { position: relative; padding-left: 44px; counter-reset: st; }
.steps__line { position: absolute; left: 11px; top: 12px; bottom: 12px; width: 2px; background: var(--line); border-radius: 2px; }
.steps__fill { position: absolute; left: 0; top: 0; width: 100%; height: var(--pf, 0%); background: var(--acc); border-radius: 2px; transition: height .15s linear; }
.st { position: relative; padding: 22px 26px; border: 1px solid var(--line); border-radius: 16px; margin-bottom: 14px; background: var(--card); transition: border-color .4s, background .4s, transform .4s var(--ease); }
.st::before { content: ""; position: absolute; left: -40px; top: 28px; width: 16px; height: 16px; border-radius: 50%; background: var(--ink); border: 2px solid #3a3a52; transition: background .3s, border-color .3s, box-shadow .3s; }
.st.is-done::before { background: var(--acc); border-color: var(--acc); }
.st.is-act { border-color: var(--acc); background: color-mix(in srgb, var(--acc) 8%, var(--card)); transform: translateX(6px); }
.st.is-act::before { background: var(--acc); border-color: var(--acc); box-shadow: 0 0 0 6px color-mix(in srgb, var(--acc) 25%, transparent); }
.st h3 { font-family: var(--f-disp); font-size: 19px; letter-spacing: -.01em; margin-bottom: 6px; }
.st h3 span { font-family: var(--f-mono); font-size: 13px; color: var(--acc-t); margin-right: 8px; }
.st p { color: var(--mu); font-size: 15px; }
.st__del { font-family: var(--f-mono); font-size: 12.5px; color: #d8d8e4; margin-top: 10px; }

/* ===== 08 Results ===== */
.res3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.rcard { background: #fff; border: 2px solid var(--ink); border-radius: 18px; padding: 26px; box-shadow: 6px 6px 0 var(--ink); }
.rcard b { font-family: var(--f-disp); font-size: 34px; letter-spacing: -.03em; display: block; margin-bottom: 8px; }
.rcard b.is-ph { font-family: var(--f-mono); font-size: 18px; background: var(--y); display: inline-block; padding: 4px 10px; border-radius: 6px; }
.rcard p { font-family: var(--f-mono); font-size: 13px; color: var(--lmu); }
.case3 { margin-top: 18px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) 230px; background: var(--ink); color: #fff; border-radius: 20px; overflow: hidden; }
.case3 > div { padding: 26px; border-right: 1px solid rgba(255,255,255,.1); }
.case3 h3 { font-family: var(--f-mono); font-size: 12px; color: var(--acc-t); font-weight: 700; margin-bottom: 10px; }
.case3 p { font-size: 15px; color: #cfcfdc; }
.case3__go { display: grid; place-items: center; background: var(--acc); color: var(--acc-f); font-family: var(--f-disp); font-weight: 600; font-size: 15px; padding: 20px; transition: filter .2s; }
.case3__go:hover { filter: brightness(1.08); }

/* ===== 09 Who ===== */
.who4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.wc { border: 1px solid var(--line); border-radius: 18px; padding: 24px; background: var(--card); transition: transform .3s var(--ease), border-color .3s; }
.wc:hover { transform: translateY(-4px); border-color: var(--ct); }
.wc__chip { display: inline-block; font-family: var(--f-mono); font-size: 11.5px; padding: 4px 9px; border-radius: 6px; margin-bottom: 16px; background: color-mix(in srgb, var(--c) 16%, transparent); color: var(--ct); }
.wc h3 { font-family: var(--f-disp); font-size: 17px; line-height: 1.25; margin-bottom: 10px; }
.wc p { color: var(--mu); font-size: 14.5px; }

/* ===== 10 Platforms / stack ===== */
.plat4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.pc { display: flex; flex-direction: column; border-radius: 20px; padding: 26px; background: var(--card); border: 1px solid var(--line); border-top: 4px solid var(--c); }
.pc__k { font-family: var(--f-mono); font-size: 12px; color: var(--ct); margin-bottom: 14px; }
.pc h3 { font-family: var(--f-disp); font-size: 22px; letter-spacing: -.02em; margin-bottom: 12px; }
.pc p { color: var(--mu); font-size: 15px; margin-bottom: 18px; }
.pc ul { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 24px; }
.pc li { font-family: var(--f-mono); font-size: 11.5px; padding: 4px 8px; border-radius: 6px; border: 1px solid var(--line); color: #d8d8e4; }
.pc .btn { margin-top: auto; align-self: flex-start; font-size: 14px; padding: 13px 18px; }
.plat-note { margin-top: 30px; color: var(--mu); }
.stack { display: flex; flex-wrap: wrap; gap: 10px; }
.stack li { font-family: var(--f-mono); font-size: 13.5px; padding: 10px 16px; border-radius: 10px; border: 1px solid var(--line); color: #e2e2ec; transition: border-color .2s, transform .2s; }
.stack li:hover { border-color: var(--acc); transform: translateY(-2px); }
.stack-wrap { margin-top: 64px; padding-top: 48px; border-top: 1px dashed var(--line); }
.stack-wrap h3 { font-family: var(--f-disp); font-size: 22px; margin-bottom: 20px; }

/* local block (city pages) */
.local { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.areas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.areas li { font-family: var(--f-mono); font-size: 13.5px; padding: 9px 14px; border-radius: 10px; background: #fff; border: 2px solid var(--ink); }
.local__card { background: var(--ink); color: #fff; border-radius: 20px; padding: 30px; box-shadow: 10px 10px 0 var(--acc); }
.local__card h3 { font-family: var(--f-disp); font-size: 20px; margin-bottom: 16px; }
.local__card dl > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; padding: 11px 0; border-top: 1px solid rgba(255,255,255,.12); font-size: 15px; }
.local__card dt { font-family: var(--f-mono); font-size: 12px; color: var(--mu); padding-top: 3px; }

/* ===== 12 Compare ===== */
.cmpx-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 20px; }
.cmpx { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 15px; }
.cmpx th, .cmpx td { padding: 17px 22px; text-align: left; border-top: 1px solid var(--line); vertical-align: top; }
.cmpx thead th { border-top: 0; font-family: var(--f-disp); font-size: 14px; font-weight: 600; padding-block: 22px; }
.cmpx tbody th { font-weight: 500; color: #e6e6ef; }
.cmpx .tp { position: relative; background: color-mix(in srgb, var(--acc) 9%, transparent); border-inline: 2px solid var(--acc); transition: background .4s; }
.cmpx thead .tp { background: var(--acc); color: var(--acc-f); }
.cmpx td.tp.is-hl { background: color-mix(in srgb, var(--acc) 22%, transparent); }
.ok { color: var(--g); } .no { color: #ff7a7a; } .mid { color: var(--mu); }

/* ===== 13 Deep dive (tabs) ===== */
.dd { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 40px; align-items: start; }
.dd__tabs { display: flex; flex-direction: column; gap: 6px; position: sticky; top: 150px; }
.dd__tabs button { text-align: left; padding: 14px 16px; border-radius: 12px; font-size: 15px; color: var(--lmu); border: 2px solid transparent; transition: background .25s, color .25s, box-shadow .25s, border-color .25s; }
.dd__tabs button:hover { color: var(--ink); }
.dd__tabs button[aria-selected="true"] { background: #fff; border-color: var(--ink); color: var(--ink); font-weight: 700; box-shadow: 5px 5px 0 var(--acc); }
.dd__panel { background: #fff; border: 2px solid var(--ink); border-radius: 20px; padding: 34px; }
.dd__panel[hidden] { display: none; }
.dd__panel.is-enter { animation: ddIn .45s var(--ease); }
@keyframes ddIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.dd__panel h3 { font-family: var(--f-disp); font-size: 24px; line-height: 1.2; letter-spacing: -.02em; margin-bottom: 16px; }
.dd__panel p { color: #34344a; margin-bottom: 14px; }
.dd__panel p strong { color: var(--ink); }
.dd__panel ul.bul { margin: 4px 0 16px; display: grid; gap: 8px; }
.dd__panel ul.bul li { position: relative; padding-left: 22px; color: #34344a; }
.dd__panel ul.bul li::before { content: "→"; position: absolute; left: 0; color: #C2510F; font-weight: 700; }
.mt { width: 100%; border-collapse: collapse; margin: 8px 0 18px; font-size: 14.5px; border: 1px solid var(--lline); border-radius: 12px; overflow: hidden; }
.mt th, .mt td { padding: 11px 14px; border-top: 1px solid var(--lline); text-align: left; vertical-align: top; }
.mt thead th { background: var(--cream2); border-top: 0; }
.mt-wrap { overflow-x: auto; }

/* ===== 14 Related ===== */
.rel3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.rc { display: flex; flex-direction: column; min-height: 240px; border-radius: 20px; padding: 28px; background: var(--c); color: var(--cf); border: 2px solid var(--ink); box-shadow: 6px 6px 0 #fff; transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.rc:hover { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 #fff; }
.rc__k { font-family: var(--f-mono); font-size: 13px; opacity: .8; margin-bottom: auto; }
.rc h3 { font-family: var(--f-disp); font-size: 23px; letter-spacing: -.02em; margin: 30px 0 10px; }
.rc p { font-size: 15px; opacity: .85; }
.rc__go { margin-top: 16px; font-family: var(--f-mono); font-size: 13px; font-weight: 700; }

/* ===== 15 FAQ (uses .qa from main.css) ===== */
.ask { margin-top: 30px; background: var(--ink); color: #fff; padding: 26px; border-radius: 18px; }
.ask h3 { font-family: var(--f-disp); font-size: 18px; }
.ask p { color: #b6b6c8; font-size: 14px; margin: 8px 0 20px; }
.qa__a p a { color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* ===== 17 Final CTA + form ===== */
.fin { padding-block: clamp(90px, 10vw, 130px); }
.fin--b { background: var(--b); color: var(--ink); }
.fin__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: start; }
.fin h2 { font-size: clamp(38px, 5vw, 62px); font-weight: 800; letter-spacing: -.04em; margin-bottom: 18px; }
.fin__lead { font-size: 18px; max-width: 480px; margin-bottom: 30px; }
.nx { display: flex; flex-direction: column; gap: 14px; margin-bottom: 34px; }
.nx li { display: flex; gap: 16px; align-items: center; font-size: 16px; font-weight: 500; }
.nx b { font-family: var(--f-disp); width: 40px; height: 40px; border-radius: 11px; background: var(--ink); color: var(--b); display: grid; place-items: center; font-size: 14px; flex: none; }
.msf { background: var(--ink); color: #fff; border-radius: 22px; padding: 30px; box-shadow: 10px 10px 0 var(--o); }
.msf__prog { display: flex; gap: 8px; margin-bottom: 20px; }
.msf__prog i { flex: 1; height: 5px; border-radius: 3px; background: #2a2a3a; transition: background .3s; }
.msf__prog i.is-on { background: var(--o); }
.msf__step[hidden] { display: none; }
.msf__step { animation: ddIn .4s var(--ease); }
.msf__k { font-family: var(--f-mono); font-size: 12px; color: var(--o); }
.msf__t { font-family: var(--f-disp); font-size: 21px; margin: 6px 0 4px; }
.msf fieldset { border: 0; padding: 0; margin: 16px 0 0; }
.msf legend, .msf label.lb { font-family: var(--f-mono); font-size: 12px; color: var(--mu); display: block; margin-bottom: 8px; }
.opts { display: flex; flex-wrap: wrap; gap: 8px; }
.opts label { position: relative; }
.opts input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.opts span { display: inline-block; font-size: 14px; padding: 9px 14px; border-radius: 9px; border: 1px solid rgba(255,255,255,.18); transition: background .2s, color .2s, border-color .2s; }
.opts input:checked + span { background: var(--y); color: var(--ink); border-color: var(--y); font-weight: 700; }
.opts input:focus-visible + span { outline: 3px solid var(--y); outline-offset: 2px; }
.inp { width: 100%; height: 48px; border-radius: 10px; border: 1px solid rgba(255,255,255,.18); background: #14141f; padding: 12px 14px; color: #fff; font: inherit; font-size: 15px; margin-bottom: 14px; }
textarea.inp { height: 96px; resize: vertical; }
.inp:focus { outline: none; border-color: var(--y); }
.msf__nav { display: flex; gap: 10px; margin-top: 22px; }
.msf__nav .btn { flex: 1; }
.msf__back { flex: none !important; color: #fff; border-color: rgba(255,255,255,.4); background: transparent; box-shadow: none; }
.msf__back:hover { box-shadow: none; background: rgba(255,255,255,.06); }
.msf__fine { font-size: 12px; color: var(--mu); margin-top: 14px; text-align: center; }
.msf .form__msg { color: var(--y); text-align: center; }

/* ===== Responsive ===== */
@media (max-width: 1180px) {
  .tiles4, .who4, .plat4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .case3__go { grid-column: 1 / -1; }
}
@media (max-width: 1023px) {
  .svh__grid, .qa3, .proc, .fin__grid, .local { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .proc__side { position: static; }
  .errs3, .res3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dd { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .dd__tabs { position: static; flex-direction: row; overflow-x: auto; scrollbar-width: none; }
  .dd__tabs button { flex: none; white-space: nowrap; }
  .band__row { flex-direction: column; align-items: flex-start; gap: 30px; }
}
@media (max-width: 767px) {
  .svh { padding-bottom: 72px; }
  .crumb { margin-bottom: 28px; }
  .svh__lead { font-size: 17px; }
  .svh .ctas .btn { width: 100%; }
  .ide__code { font-size: 12.5px; min-height: 210px; padding: 16px; }
  .ide__out { grid-template-columns: minmax(0, 1fr); }
  .subnav__lbl, .subnav__cta { display: none; }
  .tiles4, .who4, .plat4, .errs3, .res3, .rel3 { grid-template-columns: minmax(0, 1fr); }
  .t4 { min-height: 0; }
  .case3 { grid-template-columns: minmax(0, 1fr); }
  .case3 > div { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.1); }
  .answer { font-size: 18px; padding-left: 18px; }
  .facts { padding: 22px; box-shadow: 6px 6px 0 var(--acc); }
  .facts dl > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .local__card dl > div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .steps { padding-left: 34px; }
  .st { padding: 18px; } .st::before { left: -31px; }
  .steps__line { left: 6px; }
  .st.is-act { transform: none; }
  .band .form { flex-direction: column; }
  .band .form input + input { border-left: 0; border-top: 1px solid var(--lline); }
  .dd__panel { padding: 22px; }
  .msf { padding: 22px; box-shadow: 6px 6px 0 var(--o); }
  .fin .btn { width: 100%; }
  .mbar { display: flex; position: fixed; z-index: 45; left: 0; right: 0; bottom: 0; gap: 10px; padding: 10px max(16px, env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); background: rgba(11,11,20,.94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--line); transform: translateY(110%); transition: transform .35s var(--ease); }
  .mbar.is-on { transform: none; }
  .mbar .btn { flex: 1; padding: 14px 16px; font-size: 15px; box-shadow: 3px 3px 0 var(--b); }
  .mbar__alt { flex: none !important; color: #fff !important; background: transparent !important; border-color: rgba(255,255,255,.4) !important; box-shadow: none !important; }
  .footer { padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px)); }
}

/* fixes */
.msf__back[hidden] { display: none; }
.faq__side h2 { font-size: clamp(30px, 3.2vw, 42px); }

/* ===== Migration route planner ===== */
.rt__planner { background: #101019; border: 1px solid var(--line); border-radius: 24px; padding: 28px; }
.rt__sel { display: none; }
.rt__map { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(120px, 1.1fr) minmax(0, 1fr); gap: 0; align-items: start; }
.rt__colwrap { position: relative; z-index: 2; }
.rt__lbl { font-size: 12px; color: var(--mu); margin-bottom: 12px; }
.rt__col { display: flex; flex-direction: column; gap: 8px; }
.rt__col--to { align-items: flex-end; }
.rt__col--to + .rt__lbl, .rt__colwrap:last-child .rt__lbl { text-align: right; }
.rt__chip { font-family: var(--f-mono); font-size: 13.5px; padding: 10px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: #d8d8e4; min-width: 170px; text-align: left; transition: border-color .25s, background .25s, color .25s, transform .25s var(--ease), box-shadow .25s; }
.rt__col--to .rt__chip { text-align: right; }
.rt__chip:hover { border-color: color-mix(in srgb, var(--acc) 60%, transparent); color: #fff; }
.rt__chip[aria-pressed="true"] { background: var(--acc); color: var(--acc-f); border-color: var(--acc); font-weight: 700; box-shadow: 4px 4px 0 #fff; transform: translate(-2px, -2px); }
.rt__lines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; overflow: visible; pointer-events: none; }
.rt__lines path { fill: none; stroke-width: 1.2; opacity: .16; transition: opacity .3s, stroke-width .3s; }
.rt__lines path.is-from, .rt__lines path.is-to { opacity: .34; }
.rt__lines path.is-on { opacity: 1; stroke: var(--acc) !important; stroke-width: 3; }
.rt__lines .rt__dot { fill: #fff; filter: drop-shadow(0 0 6px var(--acc)); }
.rt__card { margin-top: 28px; padding: 26px; border-radius: 18px; background: var(--ink); border: 1px solid color-mix(in srgb, var(--acc) 45%, transparent); }
.rt__card.is-flash { animation: ddIn .45s var(--ease); }
.rt__code { font-size: 14px; color: #d9d9e6; margin-bottom: 10px; }
.rt__code .t-f { color: var(--acc-t); } .rt__code .t-s { color: var(--g); }
.rt__ok { color: var(--g); margin-left: 6px; }
.rt__card h3 { font-family: var(--f-disp); font-size: 24px; letter-spacing: -.02em; margin-bottom: 18px; }
.rt__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-bottom: 24px; }
.rt__grid h4 { font-family: var(--f-mono); font-size: 12px; color: var(--acc-t); margin-bottom: 10px; font-weight: 700; }
.rt__list { display: grid; gap: 7px; }
.rt__list li { position: relative; padding-left: 20px; font-size: 14.5px; color: #cfcfdc; }
.rt__list li::before { content: "✓"; position: absolute; left: 0; color: var(--g); font-weight: 700; }
#rt-risk { font-size: 14.5px; color: #cfcfdc; }
.rt__pop { margin-top: 64px; }
.rt__poph { font-family: var(--f-disp); font-size: 24px; margin-bottom: 22px; }
.rtrs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.rtr { border: 1px solid var(--line); border-radius: 16px; padding: 20px; background: var(--card); display: flex; flex-direction: column; transition: border-color .25s, transform .25s var(--ease); }
.rtr:hover { border-color: var(--acc); transform: translateY(-3px); }
.rtr h3 { font-family: var(--f-disp); font-size: 15.5px; line-height: 1.3; margin-bottom: 8px; }
.rtr p { color: var(--mu); font-size: 14px; margin-bottom: 14px; }
.rtr__go { margin-top: auto; font-family: var(--f-mono); font-size: 12.5px; font-weight: 700; color: var(--acc-t); }

/* quote form */
.qwrap { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 64px; align-items: start; }
.qpts { display: grid; gap: 10px; margin-top: 26px; }
.qpts li { position: relative; padding-left: 26px; font-weight: 500; }
.qpts li::before { content: "✓"; position: absolute; left: 0; color: #C2510F; font-weight: 700; }
.qform { background: var(--ink); color: #fff; border-radius: 22px; padding: 30px; box-shadow: 10px 10px 0 var(--acc); }
.qform fieldset { border: 0; padding: 0; margin: 2px 0 16px; }
.qform legend, .qform .lb { font-family: var(--f-mono); font-size: 12px; color: var(--mu); display: block; margin-bottom: 8px; }
.inp--route { font-family: var(--f-mono); color: var(--y); border-color: color-mix(in srgb, var(--acc) 55%, transparent); }
.qrow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.qform__go { width: 100%; margin-top: 8px; }
.qform .form__msg { color: var(--y); text-align: center; }

/* migration teaser */
.tz { overflow: hidden; }
.tz__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; }
.tz__rows { display: grid; gap: 12px; }
.tz__rows li { display: grid; grid-template-columns: 130px minmax(0, 1fr) 130px; align-items: center; gap: 12px; }
.tz__rows .mono { font-size: 13.5px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); text-align: center; }
.tz__rows li .mono:last-child { border-color: var(--acc); color: var(--acc-t); }
.tz__rows i { position: relative; height: 2px; background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--acc) 70%, transparent) 0 8px, transparent 8px 14px); background-size: 28px 2px; animation: dash 1.2s linear infinite; }
.tz__rows i::after { content: "▶"; position: absolute; right: -4px; top: 50%; transform: translateY(-50%); color: var(--acc); font-size: 11px; }
.tz__rows li:nth-child(2) i { animation-delay: -.3s; } .tz__rows li:nth-child(3) i { animation-delay: -.6s; } .tz__rows li:nth-child(4) i { animation-delay: -.9s; }
@keyframes dash { to { background-position: 28px 0; } }
@media (prefers-reduced-motion: reduce) { .tz__rows i { animation: none; } }

@media (max-width: 1023px) {
  .rt__map { display: none; }
  .rt__sel { display: flex; align-items: flex-end; gap: 10px; }
  .rt__sel label { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--mu); }
  .rt__sel select { width: 100%; height: 50px; border-radius: 12px; background: var(--card); color: #fff; border: 1px solid var(--acc); font: inherit; font-family: var(--f-mono); font-size: 15px; padding: 0 12px; }
  .rt__arrow { font-size: 22px; color: var(--acc); padding-bottom: 12px; }
  .rt__card { margin-top: 18px; }
  .rt__grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .rtrs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qwrap, .tz__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}
@media (max-width: 767px) {
  .rt__planner { padding: 18px; }
  .rt__card { padding: 20px; }
  .rt__card h3 { font-size: 20px; }
  .rt__card .btn { width: 100%; }
  .rtrs { grid-template-columns: minmax(0, 1fr); }
  .qform { padding: 22px; box-shadow: 6px 6px 0 var(--acc); }
  .qrow { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .tz__rows li { grid-template-columns: 100px minmax(0, 1fr) 100px; gap: 8px; }
  .tz__rows .mono { font-size: 12px; padding: 8px 6px; }
}
@media (min-width: 1024px) {
  .rt__map { display: flex; justify-content: space-between; align-items: center; }
  .rt__colwrap:last-child { align-self: center; }
}

/* BEGIN legal */
/* legal pages */
.lgh { padding: 64px 0 48px; }
.lgh h1 { font-family: var(--f-disp); font-size: clamp(36px, 6vw, 64px); line-height: 1.05; margin: 0 0 14px; }
.lgh__meta { color: var(--mu); font-size: 13px; }
.lg { padding: 64px 0 96px; }
.lg__grid { display: grid; gap: 40px; }
.lg__toc { font-size: 14px; }
.lg__toc .mono { font-size: 12px; opacity: .7; margin-bottom: 10px; }
.lg__toc ol { display: grid; gap: 8px; padding-left: 18px; }
.lg__toc a { color: inherit; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 30%, transparent); text-underline-offset: 3px; }
.lg__body { max-width: 72ch; }
.lg__sec { scroll-margin-top: 96px; padding-bottom: 8px; }
.lg__sec + .lg__sec { margin-top: 36px; }
.lg__body h2 { font-family: var(--f-disp); font-size: clamp(22px, 2.6vw, 28px); line-height: 1.2; margin: 0 0 12px; }
.lg__body p, .lg__body li { font-size: 17px; line-height: 1.7; }
.lg__body p + p { margin-top: 12px; }
.lg__body ul { list-style: disc; padding-left: 22px; margin: 12px 0; display: grid; gap: 6px; }
.lg__body a { text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 1024px) {
  .lg__grid { grid-template-columns: 260px 1fr; gap: 64px; align-items: start; }
  .lg__toc { position: sticky; top: 96px; }
}
/* END legal */

/* BEGIN company */
/* company pages: hero, chat, contact */
.cph { padding: 56px 0 72px; }
.cph h1 { font-family: var(--f-disp); font-size: clamp(38px, 6vw, 72px); line-height: 1.03; letter-spacing: -.035em; margin: 16px 0 18px; max-width: 16ch; }
.cph h1 em { font-style: normal; color: var(--acc); }
.cph__lead { max-width: 60ch; font-size: 18px; line-height: 1.6; color: #d5d5e2; }
.cph__chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.cph__chips a { font-size: 14px; padding: 10px 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,.2); color: #fff; transition: background .2s, color .2s, border-color .2s; }
.cph__chips a:hover { background: var(--acc); color: var(--acc-f); border-color: var(--acc); }
.cph__btns { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.cwrap-s { padding-block: clamp(56px, 7vw, 96px); }
.cwrap { display: grid; gap: 40px; }
@media (min-width: 1024px) { .cwrap { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 56px; align-items: start; } .cwrap__side { position: sticky; top: 96px; } }
.chat { background: var(--ink); color: #fff; border-radius: 22px; box-shadow: 10px 10px 0 var(--acc); display: flex; flex-direction: column; height: min(620px, 78vh); overflow: hidden; }
.chat__top { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid rgba(255,255,255,.1); }
.chat__dot { width: 12px; height: 12px; border-radius: 50%; background: var(--g); box-shadow: 0 0 0 4px color-mix(in srgb, var(--g) 25%, transparent); flex: none; }
.chat__t { font-weight: 700; font-size: 15px; } .chat__s { font-size: 12px; color: var(--mu); }
.chat__ai { margin-left: auto; font-size: 11px; padding: 4px 8px; border-radius: 6px; background: rgba(255,255,255,.08); color: var(--y); }
.chat__log { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 10px; scroll-behavior: smooth; }
.chat__msg { max-width: 85%; padding: 11px 15px; border-radius: 16px; font-size: 15px; line-height: 1.5; animation: rise .3s var(--ease) both; }
.chat__msg--bot { background: #1c1c2b; border-bottom-left-radius: 5px; align-self: flex-start; }
.chat__msg--user { background: var(--acc); color: var(--acc-f); border-bottom-right-radius: 5px; align-self: flex-end; font-weight: 600; }
.chat__msg a { color: var(--y); text-decoration: underline; }
.chat__msg.is-typing { display: flex; gap: 5px; padding: 15px; }
.chat__msg.is-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--mu); animation: blink 1s infinite; }
.chat__msg.is-typing i:nth-child(2) { animation-delay: .15s; } .chat__msg.is-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes blink { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }
.chat__chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 20px 12px; }
.chat__chips:empty { display: none; }
.chat__chip { font: inherit; font-size: 14px; padding: 9px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.22); background: transparent; color: #fff; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.chat__chip:hover, .chat__chip:focus-visible { background: var(--y); color: var(--ink); border-color: var(--y); outline: none; }
.chat__chip--go { background: var(--y); color: var(--ink); border-color: var(--y); font-weight: 700; }
.chat__form { display: flex; gap: 8px; padding: 12px 14px 14px; border-top: 1px solid rgba(255,255,255,.1); }
.chat__form[hidden] { display: none; }
.chat__in { flex: 1; min-width: 0; height: 46px; border-radius: 12px; border: 1px solid rgba(255,255,255,.18); background: #14141f; color: #fff; padding: 0 14px; font: inherit; font-size: 15px; }
.chat__in:focus { outline: none; border-color: var(--y); }
.chat__send { width: 46px; height: 46px; border-radius: 12px; border: 0; background: var(--y); color: var(--ink); font-size: 20px; font-weight: 700; cursor: pointer; }
.chat__sum dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin-top: 8px; font-size: 14px; }
.chat__sum dt { font-family: var(--f-mono); font-size: 12px; color: var(--mu); text-transform: lowercase; }
.chat__sumh { font-weight: 700; }
.chat__consent { font-size: 13px; color: #d5d5e2; }
.chat__noscript { padding: 20px; color: var(--y); }
.cform { margin-top: 22px; }
.cform > summary { cursor: pointer; font-size: 15px; list-style: none; }
.cform > summary::-webkit-details-marker { display: none; }
.cform > summary span { text-decoration: underline; text-underline-offset: 3px; font-weight: 700; }
.cform .qform { margin-top: 18px; }
.cform textarea.inp { height: 110px; padding-top: 12px; }
.qrow { display: grid; gap: 0 14px; } @media (min-width: 640px) { .qrow { grid-template-columns: 1fr 1fr; } }
.cside { margin-bottom: 28px; } .cside__h { font-family: var(--f-disp); font-size: clamp(26px, 3vw, 36px); line-height: 1.1; margin: 12px 0 14px; } .cside p { line-height: 1.6; margin-bottom: 18px; }
.cside .chipx { margin-bottom: 16px; }
.ccard { background: #fff; border: 2px solid var(--ink); border-radius: 18px; padding: 24px; box-shadow: 8px 8px 0 var(--acc); }
.ccard h3 { font-family: var(--f-disp); font-size: 20px; margin-bottom: 14px; }
.ccard dl > div { display: grid; grid-template-columns: 110px 1fr; gap: 10px; padding: 10px 0; border-top: 1px solid rgba(11,11,20,.1); font-size: 15px; }
.ccard dt { font-size: 12px; color: #6b6b80; padding-top: 2px; } .ccard a { text-decoration: underline; text-underline-offset: 3px; }
.ccard__nda { margin-top: 14px; font-weight: 700; font-size: 14px; }
.chat__ai { white-space: nowrap; }
.cwrap > * { min-width: 0; } .chat { max-width: 100%; min-width: 0; } .chat__chips { max-width: 100%; }
@media (max-width: 640px) {
  .chat { height: min(640px, 82vh); border-radius: 18px; box-shadow: 6px 6px 0 var(--acc); }
  .chat__top { padding: 12px 14px; } .chat__s { display: none; }
  .chat__log { padding: 14px; } .chat__msg { max-width: 90%; font-size: 14.5px; }
  .chat__chips { flex-wrap: nowrap; overflow-x: auto; padding: 2px 14px 10px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .chat__chips::-webkit-scrollbar { display: none; }
  .chat__chip { flex: none; }
}
/* about */
.abt { display: grid; gap: 24px; } @media (min-width: 1024px) { .abt { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 64px; } }
.abt h2 { font-family: var(--f-disp); font-size: clamp(30px, 4vw, 48px); line-height: 1.08; letter-spacing: -.03em; margin-top: 14px; }
.abt__body p { font-size: 18px; line-height: 1.7; } .abt__body p + p { margin-top: 16px; } .abt__body .btn { margin-top: 24px; }
.abt__addr { font-size: 14px; }
.plat5 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.tiles3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.fin__grid--one { grid-template-columns: 1fr; max-width: 820px; }
/* careers */
.roles__empty { border: 2px dashed rgba(11,11,20,.25); border-radius: 20px; padding: clamp(24px, 4vw, 44px); max-width: 760px; }
.roles__k { font-size: 12px; color: #6b6b80; margin-bottom: 10px; }
.roles__empty h3 { font-family: var(--f-disp); font-size: clamp(24px, 3vw, 32px); margin-bottom: 10px; }
.roles__empty p { line-height: 1.6; margin-bottom: 20px; max-width: 60ch; }
/* END company */

/* BEGIN 404 */
/* 404 page */
.e4 { padding: clamp(48px, 7vw, 96px) 0 clamp(64px, 8vw, 110px); }
.e4__grid { display: grid; gap: 44px; align-items: center; }
@media (min-width: 1024px) { .e4__grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 56px; } }
.e4__big { font-family: var(--f-disp); font-weight: 800; font-size: clamp(96px, 12.5vw, 184px); line-height: .85; letter-spacing: -.06em; color: var(--o); text-shadow: 6px 6px 0 var(--p), 12px 12px 0 var(--b); }
.e4__h1 { font-family: var(--f-disp); font-weight: 800; font-size: clamp(36px, 5vw, 60px); line-height: 1.02; letter-spacing: -.03em; margin: 22px 0 16px; color: #fff; }
.e4__lead { font-size: 18px; line-height: 1.6; color: #d5d5e2; max-width: 46ch; }
.e4__lead code { font-family: var(--f-mono); color: var(--y); background: rgba(255,255,255,.08); padding: 1px 7px; border-radius: 5px; }
/* retro window */
.e4w { --e4bg: #0000A8; --e4fg: #E6E6E6; background: var(--e4bg); color: var(--e4fg); font-family: var(--f-mono); font-size: 15px; border: 3px solid #C0C0C0; box-shadow: 10px 10px 0 var(--o); position: relative; overflow: hidden; }
.e4w::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 3px); }
.e4w__bar { display: flex; align-items: center; justify-content: space-between; background: #C0C0C0; color: #000; padding: 4px 6px; font-weight: 700; font-size: 13px; letter-spacing: .04em; }
.e4w__btn { width: 22px; height: 18px; display: grid; place-items: center; background: #C0C0C0; border: 2px outset #fff; font-size: 12px; }
.e4w__menu { display: flex; gap: 18px; background: #00A8A8; color: #000; padding: 3px 12px; font-size: 13px; }
.e4w__menu u { color: #A80000; text-decoration: none; font-weight: 700; }
.e4w__code { padding: 14px 0 10px; min-height: 196px; }
.e4__ln { display: flex; gap: 14px; padding: 1px 12px; white-space: pre; line-height: 1.55; }
.e4__no { color: #55FFFF; width: 22px; text-align: right; flex: none; }
.e4__ln code { color: #FFFFFF; font: inherit; }
.e4__ln .k { color: #FFFF55; } .e4__ln .f { color: #55FF55; } .e4__ln .b { color: #FF55FF; font-weight: 700; }
.e4__ln--miss { background: #A80000; }
.e4__ln--miss code::after { content: "_"; color: #FFFF55; animation: e4blink 1s steps(1) infinite; }
@keyframes e4blink { 50% { opacity: 0; } }
.e4w__out { background: #000; padding: 12px 14px; min-height: 150px; font-size: 14px; line-height: 1.6; }
.e4o { color: #AAAAAA; } .e4o--cmd { color: #fff; } .e4o--err { color: #FF5555; } .e4o--err b { color: #FFFF55; } .e4o--sum { color: #FFFF55; font-weight: 700; margin-top: 4px; }
.e4o--caret { white-space: pre; }
.e4w__status { display: flex; justify-content: space-between; background: #00A8A8; color: #000; padding: 3px 12px; font-size: 12px; }
.e4w__stat { background: #A80000; color: #fff; padding: 0 8px; font-weight: 700; }
.e4w.is-anim .e4__ln, .e4w.is-anim .e4o, .e4w.is-anim .e4w__stat { visibility: hidden; }
.e4w.is-anim .e4__ln.is-on, .e4w.is-anim .e4o.is-on, .e4w.is-done .e4w__stat { visibility: visible; }
.e4w.is-anim .e4o--run.is-on .e4o__dots::after { content: ""; animation: e4dots 1.2s steps(4) forwards; }
.e4w.is-done .e4o__dots::after { content: "..." !important; animation: none !important; }
@keyframes e4dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75%, 100% { content: "..."; } }
.e4w.is-done { animation: e4shake .35s 1; }
@keyframes e4shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) { .e4w.is-done { animation: none; } .e4__ln--miss code::after { animation: none; } }
@media (max-width: 640px) { .e4w { font-size: 12.5px; box-shadow: 6px 6px 0 var(--o); } .e4w__out { font-size: 12px; } .e4w__menu { gap: 10px; } .e4o--caret { white-space: normal; } }
/* 404 links */
.e4n { padding-block: clamp(56px, 7vw, 96px); }
.e4n__grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
@media (min-width: 1024px) { .e4n__grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 640px) { .e4n__grid { grid-template-columns: 1fr 1fr; gap: 10px; } .e4l { padding: 14px; } .e4l b { font-size: 17px; } .e4l__c { font-size: 11px; } .e4l__p { font-size: 13px; } }
.e4l { display: flex; flex-direction: column; gap: 6px; padding: 20px; border-radius: 16px; background: var(--ink); color: #fff; border-top: 4px solid var(--c); transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.e4l:hover, .e4l:focus-visible { transform: translateY(-3px); box-shadow: 6px 6px 0 var(--c); outline: none; }
.e4l__c { font-size: 13px; color: var(--c); } .e4l[data-c="w"] .e4l__c { color: #fff; }
.e4l b { font-family: var(--f-disp); font-size: 20px; } .e4l__p { font-size: 14px; color: #c8c8d6; }
/* END 404 */

/* BEGIN industries */
/* industries */
.indg { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.indc { display: flex; flex-direction: column; gap: 8px; padding: 24px; border-radius: 18px; background: var(--ink); color: #fff; border-top: 5px solid var(--c); min-height: 200px; transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.indc:hover, .indc:focus-visible { transform: translateY(-4px); box-shadow: 8px 8px 0 var(--c); outline: none; }
.indc__k { font-size: 12px; color: var(--c); } .indc b { font-family: var(--f-disp); font-size: 24px; letter-spacing: -.02em; }
.indc--other { background: transparent; color: var(--ink); border: 2px dashed var(--ink); border-top-width: 2px; } .indc--other .indc__p, .indc--other .indc__k, .indc--other .indc__go { color: var(--ink); }
.indc__p { color: #c8c8d6; font-size: 15px; line-height: 1.5; } .indc__go { margin-top: auto; font-weight: 700; color: var(--c); }
.pc__links { display: grid !important; gap: 8px !important; margin-bottom: 0 !important; }
.pc__links li { border: 0 !important; padding: 0 !important; font-family: var(--f-body) !important; font-size: 15px !important; }
.pc__links a { color: #fff; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--c) 70%, transparent); text-underline-offset: 4px; }
.pc__links a:hover { color: var(--c); }
.ind__sub { margin-bottom: 22px; } .ind__sub .t4 h3 { margin-top: 0; }
.ind__know { padding-top: clamp(56px, 6vw, 80px); padding-bottom: clamp(56px, 6vw, 80px); }
.ind__more { padding-block: 48px; }
.indchips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.indchip { padding: 10px 16px; border-radius: 999px; border: 1.5px solid var(--ink); font-weight: 600; font-size: 14px; transition: background .2s, color .2s; }
.indchip:hover { background: var(--ink); color: #fff; } .indchip--all { background: var(--ink); color: #fff; }
/* END industries */

/* BEGIN process */
.pwrap { display: grid; gap: 40px; }
@media (min-width: 1100px) { .pwrap { grid-template-columns: minmax(0, 1fr) 400px; gap: 48px; align-items: start; } .pside { position: sticky; top: 90px; } }
.pwrap > * { min-width: 0; }
.pcards { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-bottom: 26px; }
.pc2 { text-align: left; font: inherit; cursor: pointer; display: flex; gap: 12px; align-items: flex-start; padding: 16px; border-radius: 14px; background: #fff; border: 2px solid var(--ink); color: var(--ink); transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s; }
.pc2:hover { transform: translateY(-2px); box-shadow: 5px 5px 0 var(--c); }
.pc2[aria-selected="true"] { background: var(--ink); color: #fff; box-shadow: 6px 6px 0 var(--c); }
.pc2:focus-visible { outline: 3px solid var(--c); outline-offset: 3px; }
.pc2__n { font-size: 12px; padding: 3px 7px; border-radius: 6px; background: var(--c); color: var(--ink); flex: none; }
.pc2__t { font-weight: 700; font-size: 16px; line-height: 1.35; }
.pp { background: var(--ink); color: #fff; border-radius: 22px; padding: clamp(22px, 3vw, 36px); border-top: 6px solid var(--c); animation: rise .35s var(--ease) both; }
.pp[hidden] { display: none; }
.pp__k { font-size: 12px; color: var(--c); margin-bottom: 8px; }
.pp__head h3 { font-family: var(--f-disp); font-size: clamp(24px, 3vw, 34px); line-height: 1.1; letter-spacing: -.02em; margin-bottom: 22px; }
.pp__grid { display: grid; gap: 28px; } @media (min-width: 760px) { .pp__grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } }
.pp__signs .mono { font-size: 12px; color: var(--mu); margin-bottom: 10px; }
.pp__signs ul { display: grid; gap: 10px; margin-bottom: 22px; }
.pp__signs li { padding-left: 26px; position: relative; color: #e2e2ee; line-height: 1.5; }
.pp__signs li::before { content: "!"; position: absolute; left: 0; top: 1px; width: 18px; height: 18px; border-radius: 50%; background: #ff6b6b; color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.pp__outk { margin-top: 4px; } .pp__out { font-size: 16px; line-height: 1.6; color: #fff; }
.pp__pipe { display: grid; gap: 0; counter-reset: s; position: relative; }
.pp__st { display: flex; gap: 14px; padding: 0 0 18px; position: relative; }
.pp__st:not(:last-child)::before { content: ""; position: absolute; left: 13px; top: 30px; bottom: 2px; width: 2px; background: rgba(255,255,255,.15); }
.pp__ok { width: 28px; height: 28px; border-radius: 50%; border: 2px solid rgba(255,255,255,.25); display: grid; place-items: center; font-size: 13px; color: transparent; flex: none; transition: background .3s, border-color .3s, color .3s; }
.pp__st.is-ok .pp__ok { background: var(--g); border-color: var(--g); color: var(--ink); }
.pp__st h4 { font-family: var(--f-disp); font-size: 17px; margin-bottom: 4px; }
.pp__st p { color: #c8c8d6; font-size: 14.5px; line-height: 1.5; } .pp__del { font-size: 12px !important; color: var(--c) !important; margin-top: 4px; }
.pp__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.1); }
.pside__h { font-family: var(--f-disp); font-size: 28px; line-height: 1.1; margin: 12px 0 10px; } .pside__p { line-height: 1.6; margin-bottom: 18px; }
.pside .chat { height: min(600px, 74vh); }
.ptrust-s { padding-block: 56px; }
.ptrust { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.ptr { border: 1px solid var(--line); border-radius: 16px; padding: 18px; } .ptr span { color: var(--y); font-size: 20px; } .ptr b { display: block; font-family: var(--f-disp); margin: 8px 0 4px; } .ptr p { color: var(--mu); font-size: 14px; }
.pfloat { display: none; }
@media (max-width: 1099px) {
  .pfloat { display: block; position: fixed; left: 16px; right: 16px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); z-index: 40; text-align: center; padding: 15px; border-radius: 14px; background: var(--y); color: var(--ink); font-weight: 700; box-shadow: 5px 5px 0 var(--ink); transition: transform .3s var(--ease), opacity .3s; }
  .pfloat.is-hide { transform: translateY(140%); opacity: 0; pointer-events: none; }
}
@media (max-width: 640px) { .pc2__t { font-size: 15px; } .pcards { grid-template-columns: 1fr; } }
/* END process */

/* BEGIN insights */
.ins { padding-block: clamp(48px, 6vw, 80px); }
.itools { display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; align-items: center; margin-bottom: 28px; }
.ichips { display: flex; flex-wrap: wrap; gap: 8px; }
.ichips a { padding: 9px 15px; border-radius: 999px; border: 1.5px solid var(--ink); font-weight: 600; font-size: 14px; }
.ichips a[aria-current], .ichips a:hover { background: var(--ink); color: #fff; }
.isearch input { height: 44px; border-radius: 12px; border: 1.5px solid var(--ink); padding: 0 14px; font: inherit; width: min(320px, 100%); background: #fff; }
.isearch { flex: 1 1 220px; display: flex; justify-content: flex-end; }
@media (max-width: 640px) { .isearch { justify-content: stretch; } .isearch input { width: 100%; } }
.igrid { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .igrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .ins .igrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .igrid--dark { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ic[hidden] { display: none; }
.ic a { display: flex; flex-direction: column; height: 100%; border-radius: 18px; background: #fff; border: 2px solid var(--ink); overflow: hidden; transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.ic a:hover, .ic a:focus-visible { transform: translateY(-3px); box-shadow: 7px 7px 0 var(--c); outline: none; }
.ic__cov { position: relative; display: flex; align-items: center; justify-content: center; height: 128px; flex: none; background-color: var(--ink);
  background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 22px 22px; border-bottom: 4px solid var(--c); }
.ic__cov b { font-family: var(--f-mono); font-size: 46px; font-weight: 700; color: var(--c); letter-spacing: -.04em; transition: transform .3s var(--ease); }
.ic a:hover .ic__cov b { transform: scale(1.08) rotate(-3deg); }
.ic__cov i { position: absolute; left: 14px; bottom: 9px; right: 14px; font-style: normal; font-size: 11px; color: #8d8da3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ic__cov i::before { content: '$ '; color: var(--c); }
.ic__bd { display: flex; flex-direction: column; gap: 10px; padding: 22px; flex: 1; }
.ic__cat { font-size: 12px; padding: 3px 8px; border-radius: 6px; background: var(--c); color: var(--ink); align-self: flex-start; }
.ic h3 { font-family: var(--f-disp); font-size: 20px; line-height: 1.22; letter-spacing: -.01em; }
.ic p { color: #4a4a5c; line-height: 1.55; font-size: 15px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ic__meta { margin-top: auto; font-size: 12px; color: #6b6b80; }
/* magazine top */
.itop { display: grid; gap: 18px; margin-bottom: clamp(40px, 5vw, 64px); }
@media (min-width: 960px) { .itop { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); } }
.itop__side { display: grid; gap: 18px; }
.ic--big a { background: var(--ink); color: #fff; }
.ic--big .ic__cov { height: clamp(180px, 22vw, 280px); background-color: var(--c); border-bottom-color: var(--ink);
  background-image: linear-gradient(rgba(11,11,20,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(11,11,20,.08) 1px, transparent 1px); }
.ic--big .ic__cov b { color: var(--ink); font-size: clamp(64px, 9vw, 120px); }
.ic--big .ic__cov i { color: rgba(11,11,20,.7); font-size: 12px; } .ic--big .ic__cov i::before { color: var(--ink); }
.ic--big .ic__bd { padding: clamp(22px, 3vw, 36px); gap: 14px; }
.ic--big h3 { font-size: clamp(26px, 3vw, 38px); line-height: 1.1; max-width: 24ch; }
.ic--big p { color: #c8c8d6; font-size: 17px; max-width: 60ch; } .ic--big .ic__meta { color: var(--mu); }
@media (min-width: 560px) {
  .ic--side a { flex-direction: row; }
  .ic--side .ic__cov { width: 34%; max-width: 170px; height: auto; border-bottom: 0; border-right: 4px solid var(--c); }
  .ic--side .ic__cov i { display: none; }
}
@media (max-width: 639px) { .ic__cov { height: 84px; } .ic__cov b { font-size: 34px; } .ic p { -webkit-line-clamp: 2; } .ic__bd { padding: 18px; gap: 8px; } .ic h3 { font-size: 19px; } }
.ic--side h3 { font-size: 18px; } .ic--side .ic__bd { padding: 18px 20px; gap: 8px; } .ic--side p { -webkit-line-clamp: 2; }
.ihd { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; margin-bottom: 20px; padding-bottom: 14px; border-bottom: 2px solid var(--ink); }
.ihd h2 { font-family: var(--f-disp); font-size: clamp(24px, 2.6vw, 32px); letter-spacing: -.02em; }
.ihd .mono { font-size: 13px; color: #6b6b80; }
.isres__clr { font: inherit; font-weight: 600; font-size: 14px; padding: 7px 14px; border-radius: 999px; border: 1.5px solid var(--ink); background: #fff; cursor: pointer; }
.isres__clr:hover { background: var(--ink); color: #fff; }
/* pagination */
.ipag { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; margin-top: clamp(36px, 5vw, 56px); }
.ipag ol { display: flex; gap: 8px; list-style: none; padding: 0; margin: 0; }
.ipag ol a, .ipag__pn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 46px; height: 46px; padding: 0 14px; border-radius: 12px; border: 2px solid var(--ink); background: #fff; font-weight: 700; font-size: 15px; transition: transform .15s var(--ease), box-shadow .15s var(--ease); }
.ipag ol a:hover, a.ipag__pn:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--ink); }
.ipag ol a[aria-current] { background: var(--ink); color: var(--y); }
.ipag__pn[aria-disabled] { opacity: .35; }
.ipag__of { width: 100%; text-align: center; font-size: 12px; color: #6b6b80; }
@media (max-width: 480px) { .ipag__pn span { display: none; } }
.igrid--dark .ic a { background: var(--card); color: #fff; border-color: var(--line); } .igrid--dark .ic p { color: var(--mu); }
.igrid__empty { padding: 20px; }
.icat__svc { margin-top: 28px; font-weight: 600; } .icat__svc a { text-decoration: underline; text-underline-offset: 3px; }
/* article */
.aprog { position: fixed; left: 0; right: 0; top: 0; height: 4px; z-index: 60; pointer-events: none; }
.aprog i { display: block; height: 100%; background: var(--c, var(--acc)); transform-origin: 0 50%; transform: scaleX(0); }
.arth { padding: 44px 0 56px; }
.arth .crumb { margin-bottom: 24px; }
.arth__cat { display: inline-block; font-size: 12px; padding: 4px 10px; border-radius: 6px; background: var(--c); color: var(--ink); margin-bottom: 16px; }
.arth h1 { font-family: var(--f-disp); font-size: clamp(30px, 4.4vw, 54px); line-height: 1.08; letter-spacing: -.03em; max-width: 24ch; margin-bottom: 18px; }
.arth__lead { font-size: clamp(17px, 1.6vw, 19px); line-height: 1.6; color: #d5d5e2; max-width: 62ch; }
.arth__meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 20px; font-size: 13px; color: var(--mu); }
.artb { padding: clamp(32px, 5vw, 64px) 0 clamp(56px, 6vw, 96px); }
.art__grid { display: grid; gap: 40px; }
@media (min-width: 1080px) { .art__grid { grid-template-columns: minmax(0, 1fr) 320px; gap: 56px; } }
.art__main { max-width: 760px; min-width: 0; }
.tldr { border: 2px solid var(--ink); border-left: 8px solid var(--c); border-radius: 16px; padding: 22px 24px; background: #fff; box-shadow: 6px 6px 0 var(--c); }
.tldr .mono, .kpts .mono { font-size: 12px; color: #6b6b80; margin-bottom: 8px; }
.tldr p:last-child { font-size: 18px; line-height: 1.65; font-weight: 500; }
.kpts { margin-top: 22px; padding: 22px 24px; border-radius: 16px; background: var(--ink); color: #fff; }
.kpts .mono { color: var(--c); }
.kpts ul { display: grid; gap: 10px; list-style: none; padding: 0; margin: 0; }
.kpts li { position: relative; padding-left: 30px; font-size: 16.5px; line-height: 1.55; color: #e4e4ee; }
.kpts li::before { content: '✓'; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 6px; background: var(--c); color: var(--ink); font-size: 12px; font-weight: 800; display: grid; place-items: center; }
.mtoc { margin-top: 22px; border: 2px solid var(--ink); border-radius: 14px; background: #fff; }
.mtoc summary { list-style: none; cursor: pointer; padding: 14px 18px; display: flex; justify-content: space-between; font-size: 13px; }
.mtoc summary::-webkit-details-marker { display: none; }
.mtoc[open] summary span { transform: rotate(45deg); }
.mtoc ol { padding: 0 18px 16px 36px; display: grid; gap: 8px; font-size: 15px; }
@media (min-width: 1080px) { .mtoc { display: none; } }
.art__body { margin-top: 8px; }
.art__body h2 { font-family: var(--f-disp); font-size: clamp(24px, 2.6vw, 32px); line-height: 1.15; letter-spacing: -.015em; margin: 44px 0 14px; scroll-margin-top: 96px; }
.art__body h3 { font-family: var(--f-disp); font-size: 20px; margin: 28px 0 10px; scroll-margin-top: 96px; }
.art__body p, .art__body li { font-size: 18px; line-height: 1.75; color: #24242f; }
.art__body p + p { margin-top: 14px; }
.art__body ul, .art__body ol { margin: 14px 0; padding-left: 24px; display: grid; gap: 8px; }
.art__body ul { list-style: disc; } .art__body ol { list-style: decimal; }
.art__body li::marker { color: var(--c); }
.art__body a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--c); text-decoration-thickness: 2px; }
.art__body code { font-family: var(--f-mono); font-size: .88em; background: rgba(11,11,20,.07); padding: 2px 6px; border-radius: 6px; }
.art__body pre { margin: 18px 0; padding: 20px; border-radius: 14px; background: var(--ink); color: #e7e7f0; overflow-x: auto; border-top: 4px solid var(--c); }
.art__body pre code { background: none; padding: 0; font-size: 14px; line-height: 1.65; color: inherit; white-space: pre; }
.icta { margin: 36px 0; padding: 24px; border-radius: 18px; background: var(--ink); color: #fff; border-top: 5px solid var(--c); display: grid; gap: 16px; align-items: center; }
@media (min-width: 720px) { .icta { grid-template-columns: 1fr auto; } }
.icta .mono { font-size: 12px; color: var(--c); } .icta h3 { color: #fff; margin: 6px 0 4px; font-size: 21px; } .icta p { font-size: 16px !important; color: #c8c8d6 !important; line-height: 1.55 !important; }
.icta--svc { background: #fff; color: var(--ink); border: 2px dashed var(--ink); border-top: 2px dashed var(--ink); border-left: 6px solid var(--c); padding: 16px 20px; }
.icta--svc p { color: #33333f !important; margin: 0 !important; } .icta--svc .mono { color: #6b6b80; margin-right: 4px; }
.icta--svc a { font-weight: 700; white-space: nowrap; text-decoration: none !important; padding: 9px 16px; border-radius: 999px; border: 2px solid var(--ink); }
.icta--svc a:hover { background: var(--ink); color: #fff; }
.art__faq { margin-top: 48px; } .art__faq h2 { font-family: var(--f-disp); font-size: clamp(24px, 2.6vw, 32px); margin-bottom: 12px; scroll-margin-top: 96px; }
.art__faq .qa { margin-top: 10px; }
.art__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; }
.art__tags span { font-family: var(--f-mono); font-size: 12px; padding: 5px 10px; border-radius: 8px; background: rgba(11,11,20,.06); }
.author { display: flex; gap: 16px; align-items: center; margin-top: 24px; padding: 20px; border-radius: 16px; border: 1.5px solid rgba(11,11,20,.15); }
.author__av { width: 52px; height: 52px; border-radius: 50%; background: var(--ink); color: var(--y); display: grid; place-items: center; font-family: var(--f-mono); font-weight: 700; flex: none; }
.author__n { font-weight: 700; } .author p { font-size: 15px; line-height: 1.5; }
.asvc { margin-top: 16px; display: grid; gap: 4px; padding: 20px 22px; border-radius: 16px; background: var(--c); color: var(--ink); border: 2px solid var(--ink); transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.asvc:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.asvc .mono { font-size: 12px; opacity: .75; } .asvc b { font-family: var(--f-disp); font-size: 22px; } .asvc span:last-child { font-weight: 700; }
.apns { margin-top: 32px; display: grid; gap: 12px; }
@media (min-width: 640px) { .apns { grid-template-columns: 1fr 1fr; } .apn--next { grid-column: 2; text-align: right; } }
.apn { display: grid; gap: 6px; padding: 16px 18px; border-radius: 14px; border: 2px solid var(--ink); background: #fff; }
.apn .mono { font-size: 12px; color: #6b6b80; } .apn b { font-size: 15px; line-height: 1.35; }
.apn:hover { box-shadow: 5px 5px 0 var(--c); }
/* sidebar */
.art__side { display: none; }
@media (min-width: 1080px) { .art__side { display: flex; flex-direction: column; gap: 18px; } }
.side__stick { position: sticky; top: 96px; display: grid; gap: 18px; }
.sbox { padding: 20px; border-radius: 16px; background: #fff; border: 1.5px solid rgba(11,11,20,.15); }
.sbox > .mono { font-size: 12px; color: #6b6b80; margin-bottom: 10px; }
.stoc { display: grid; gap: 8px; padding-left: 18px; list-style: decimal; font-size: 14px; line-height: 1.4; }
.toc--plain { list-style: none !important; padding-left: 0 !important; }
.stoc a { color: #3a3a48; } .stoc a:hover { color: var(--ink); }
.stoc a.is-on { font-weight: 700; color: var(--ink); text-decoration: underline; text-decoration-color: var(--c); text-decoration-thickness: 3px; text-underline-offset: 3px; }
.share { margin-top: 16px; padding-top: 14px; border-top: 1px dashed rgba(11,11,20,.2); display: flex; flex-wrap: wrap; gap: 8px; }
.share a, .art__copy { font: inherit; font-size: 13px; padding: 6px 11px; border-radius: 8px; border: 1.5px solid var(--ink); background: transparent; cursor: pointer; }
.share a:hover, .art__copy:hover { background: var(--ink); color: #fff; }
.scta { padding: 22px; border-radius: 18px; background: var(--ink); color: #fff; border: 2px solid var(--ink); box-shadow: 6px 6px 0 var(--c); }
.scta .mono { font-size: 12px; color: var(--c); } .scta h3 { font-family: var(--f-disp); font-size: 21px; line-height: 1.2; margin: 8px 0; color: #fff; }
.scta p { font-size: 15px; line-height: 1.5; color: #c8c8d6; margin-bottom: 16px; }
.scta .btn { width: 100%; justify-content: center; } .scta__n { margin: 10px 0 0 !important; text-align: center; font-size: 11px !important; color: var(--mu) !important; }
.spop ol { display: grid; gap: 12px; list-style: none; padding: 0; counter-reset: sp; }
.spop li { counter-increment: sp; display: grid; grid-template-columns: 26px 1fr; gap: 8px; font-size: 14px; line-height: 1.4; font-weight: 600; }
.spop li::before { content: '0' counter(sp); font-family: var(--f-mono); font-size: 12px; color: #6b6b80; padding-top: 2px; }
.spop a:hover { text-decoration: underline; text-decoration-color: var(--c); text-decoration-thickness: 2px; }
.krmore { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 18px; font-weight: 600; } .krmore a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
/* end CTA */
.aend { background: var(--c); color: var(--ink); padding: clamp(48px, 6vw, 88px) 0; border-top: 2px solid var(--ink); }
.aend__row { display: grid; gap: 28px; align-items: center; }
@media (min-width: 960px) { .aend__row { grid-template-columns: 1.3fr 1fr; gap: 56px; } }
.aend .mono { font-size: 12px; opacity: .75; margin-bottom: 10px; }
.aend h2 { font-family: var(--f-disp); font-size: clamp(30px, 4vw, 48px); line-height: 1.05; letter-spacing: -.03em; margin-bottom: 14px; max-width: 18ch; }
.aend__a > p:not(.mono) { font-size: 17px; line-height: 1.6; max-width: 52ch; margin-bottom: 22px; }
.aend__b { padding: 24px; border-radius: 18px; background: #fff; border: 2px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); }
.aend__b h3 { font-family: var(--f-disp); font-size: 22px; margin-bottom: 14px; }
.aend .form--nl { display: flex; gap: 8px; flex-wrap: wrap; } .aend .form--nl input { flex: 1 1 180px; min-width: 0; }
/* mobile ask bar */
.askbar { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 55; display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 14px 18px; border-radius: 14px; background: var(--ink); color: #fff; font-weight: 700; border: 2px solid var(--c); box-shadow: 0 10px 30px rgba(0,0,0,.25); transform: translateY(140%); transition: transform .3s var(--ease); }
.askbar .mono { font-size: 12px; color: var(--c); font-weight: 400; }
.askbar.is-on { transform: none; }
@media (min-width: 1080px) { .askbar { display: none; } }
/* END insights */

/* BEGIN chatmodal */
.chatm { position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center; padding: max(16px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(16px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); --acc: var(--y); --acc-f: var(--ink); }
.chatm.is-open { display: flex; }
.chatm__bg { position: absolute; inset: 0; background: rgba(11,11,20,.62); backdrop-filter: blur(3px); }
.chatm__box { position: relative; width: min(460px, 100%); animation: chatmIn .25s var(--ease, ease) both; }
.chatm__x { position: absolute; top: 12px; right: 12px; z-index: 2; width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--ink); background: var(--y); color: var(--ink); font-size: 22px; line-height: 1; cursor: pointer; }
.chatm__x:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.chatm .chat { height: min(620px, 82vh); }
.chatm .chat__top { padding-right: 58px; }
html.chatm-lock, html.chatm-lock body { overflow: hidden; }
@keyframes chatmIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .chatm__box { animation: none; } }
@media (max-width: 640px) { .chatm { align-items: flex-end; padding-bottom: max(10px, env(safe-area-inset-bottom, 0px)); } }
/* END chatmodal */