/* One heading system for Why, Challenges, Our Approach and Project Unveil.
   Clerk's source uses 13px section labels and 15px body text; the Korean
   questions keep a separate, slightly tighter tracking rule. */
:is(.use-cases,.market-section,.approach-section,.how-section) .section-context{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;text-align:center}
:is(.use-cases,.market-section,.approach-section,.how-section) .section-context .eyebrow{margin:0;padding:0;border:0;font-family:inherit;font-size:13px;line-height:20px;font-weight:550;letter-spacing:.045em;color:#a2b2ff}
:is(.use-cases,.market-section,.approach-section,.how-section) .section-context .section-question{margin:0;padding:0;border:0;font-family:inherit;font-size:15px;line-height:24px;font-weight:400;letter-spacing:-.01em;color:#a5afc1}
html[lang=ko] :is(.use-cases,.market-section,.approach-section,.how-section) .section-context .section-question{letter-spacing:-.03em}
.how-section .unveil-context-wrap{margin-bottom:30px}

:root{--approach-tone:#090b10}
.approach-section{padding:106px 0 96px;background:var(--approach-tone);color:#f1f3fa;color-scheme:dark;overflow:clip}
.approach-wrap{width:min(var(--content),calc(100% - 64px));margin:0 auto}
.approach-heading{max-width:860px;margin:0 auto;text-align:center}
.approach-heading h2{font-size:48px;line-height:1.18;font-weight:550;letter-spacing:-.045em;margin:26px 0 27px;text-wrap:balance}
.approach-heading h2 span{color:#afc1ff}
.approach-description{max-width:720px;margin:0 auto;color:#aab6c9;font-size:16px;line-height:1.85;letter-spacing:-.01em;text-wrap:pretty}

/* A broad, open comparison of two questions, not an invented certificate UI. */
.paradigm-visual{max-width:1060px;margin:63px auto 0;padding:26px 0 0;border-top:1px solid #8195bb30;position:relative}
.approach-visual-header{display:flex;align-items:center;justify-content:space-between;gap:16px;color:#8998b2;font-size:12px;line-height:1.6;margin-bottom:32px}
.approach-motion-toggle{flex:none;display:grid;place-items:center;border:1px solid #6c7f9f38;border-radius:50%;width:30px;height:30px;padding:0;background:#141821;color:#bac7e2;cursor:pointer}
.approach-motion-toggle:hover{background:#202633}.approach-motion-toggle svg{width:13px;height:13px}.approach-motion-toggle[hidden]{display:none}.approach-motion-toggle:focus-visible,.approach-unveil-link:focus-visible{outline:2px solid #b4c3ff;outline-offset:5px}
.paradigm-questions{display:grid;grid-template-columns:minmax(0,1fr) 76px minmax(0,1fr);align-items:start;gap:20px;padding:0 44px}
.paradigm-question{min-width:0}.perspective-label{font-size:12px;line-height:1.6;margin:0 0 20px;color:#8391aa;letter-spacing:.01em}
.paradigm-question h3{font-size:34px;line-height:1.28;letter-spacing:-.035em;font-weight:500;margin:0 0 19px;color:#9ba6bb;text-wrap:balance}
.perspective-description{font-size:14px;line-height:1.8;letter-spacing:-.01em;color:#8e9bb2;max-width:320px;margin:0;text-wrap:pretty}
.authentication-question .perspective-label{color:#a7bbff}.authentication-question h3{color:#c4d2ff;font-weight:550}.authentication-question .perspective-description{color:#b0bed7}
.paradigm-transition{display:flex;justify-content:center;padding-top:68px;color:#7e96cd}.paradigm-transition svg{width:30px;height:30px;stroke-width:1.25}
.perspective-media{--frame-width:220px;--frame-gap:20px;position:relative;height:210px;margin:34px 0 0;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.perspective-stream{position:absolute;inset:0;overflow:hidden}
.perspective-track{display:flex;gap:var(--frame-gap);width:max-content;padding:33px 0 34px;animation:perspective-flow 28s linear infinite;animation-play-state:paused;will-change:transform}
.perspective-frame{position:relative;width:var(--frame-width);aspect-ratio:16/9;flex:none;overflow:hidden;border-radius:4px;border:1px solid #9aafd34d;background:#10141c;box-shadow:0 12px 25px #00000026}
.perspective-frame img{position:absolute;left:0;top:0;display:block;width:100%;height:200%;max-width:none;object-fit:fill}
.stream-traces{mask-image:linear-gradient(90deg,#000 0%,#000 40%,transparent 58%);-webkit-mask-image:linear-gradient(90deg,#000 0%,#000 40%,transparent 58%);filter:grayscale(1);opacity:.23}
.stream-capture{mask-image:linear-gradient(90deg,transparent 42%,#000 63%);-webkit-mask-image:linear-gradient(90deg,transparent 42%,#000 63%);opacity:.9}
.perspective-axis{position:absolute;left:50%;top:5px;bottom:6px;width:1px;background:linear-gradient(180deg,transparent,#8da8ee8f 28%,#b3c6ff 52%,#8da8ee8f 72%,transparent);box-shadow:0 0 26px 3px #879fec1c;pointer-events:none}
.perspective-axis-dot{position:absolute;left:-2px;top:50%;width:5px;height:5px;border-radius:50%;background:#d0dcff;box-shadow:0 0 18px #89a7ff;animation:perspective-pulse 6s ease-in-out infinite;animation-play-state:paused}
.perspective-axis-labels{display:grid;grid-template-columns:1fr 1fr;font-size:10px;line-height:18px;letter-spacing:.12em;color:#74839e;padding:0 44px;gap:60px;margin-top:-7px}
.perspective-axis-labels>span:last-child{color:#a4b9ef;padding-left:18px}
.paradigm-visual figcaption{max-width:740px;margin:30px auto 0;color:#8a9bb8;font-size:12px;line-height:1.85;text-align:center;text-wrap:pretty}
.approach-visual.is-active:not(.is-paused):not(.is-still) .perspective-track,.approach-visual.is-active:not(.is-paused):not(.is-still) .perspective-axis-dot{animation-play-state:running}
.approach-unveil-link{display:flex;width:fit-content;align-items:center;gap:12px;margin:26px auto 0;color:#b6c8ee;font-size:13px;line-height:1.7;text-decoration:none;text-underline-offset:5px}
.approach-unveil-link:hover{color:#e1e9ff;text-decoration:underline}.approach-unveil-link svg{width:17px;height:17px;flex:none}
@keyframes perspective-flow{from{transform:translateX(0)}to{transform:translateX(calc((var(--frame-width) + var(--frame-gap)) * -3))}}
@keyframes perspective-pulse{0%,100%{opacity:.55}50%{opacity:1}}
html[lang=ko] .approach-heading h2{font-size:50px;line-height:1.3;letter-spacing:-.055em}
html[lang=ko] .approach-description{max-width:705px;font-size:15px;line-height:1.95;letter-spacing:-.03em}
html[lang=ko] .paradigm-question h3{font-size:36px;line-height:1.4;letter-spacing:-.055em}
html[lang=ko] .perspective-label,html[lang=ko] .perspective-description,html[lang=ko] .paradigm-visual figcaption,html[lang=ko] .approach-unveil-link{letter-spacing:-.025em}
html[lang=ko] .perspective-description{font-size:13px;line-height:1.9}
@media(max-width:1000px){.paradigm-questions{padding:0 15px;grid-template-columns:minmax(0,1fr) 48px minmax(0,1fr);gap:18px}.paradigm-question h3{font-size:30px}.perspective-axis-labels{padding:0 15px;gap:40px}.perspective-axis-labels>span:last-child{padding-left:3px}html[lang=ko] .paradigm-question h3{font-size:32px}}
@media(max-width:760px){
 :is(.use-cases,.market-section,.approach-section,.how-section) .section-context{align-items:flex-start;text-align:left;gap:6px}
 :is(.use-cases,.market-section,.approach-section,.how-section) .section-context .eyebrow{font-size:12px;line-height:19px}
 :is(.use-cases,.market-section,.approach-section,.how-section) .section-context .section-question{font-size:14px;line-height:23px}
 .cases-intro{text-align:left}.how-section .unveil-context-wrap{margin-bottom:24px}
 .approach-section{padding:66px 0 60px}.approach-wrap{width:calc(100% - 44px)}.approach-heading{text-align:left}.approach-heading h2{font-size:36px;line-height:1.2;margin:23px 0}.approach-description{font-size:15px;line-height:1.8}.approach-heading h2 br{display:none}
 html[lang=ko] .approach-heading h2{font-size:39px;line-height:1.32;letter-spacing:-.055em}html[lang=ko] .approach-description{font-size:14px;line-height:1.95}
 .paradigm-visual{margin-top:38px;padding-top:20px}.approach-visual-header{font-size:11px;margin-bottom:28px}.paradigm-questions{padding:0;grid-template-columns:minmax(0,1fr);gap:18px}.perspective-label{margin-bottom:12px;font-size:11px}.paradigm-question h3{font-size:29px;margin-bottom:12px}.perspective-description{max-width:430px;font-size:13px}.paradigm-transition{justify-content:flex-start;padding:0;margin:0 0 1px}.paradigm-transition svg{width:24px;height:24px;transform:rotate(90deg)}.authentication-question{padding-top:2px}html[lang=ko] .paradigm-question h3{font-size:31px;line-height:1.38}
 .perspective-media{--frame-width:172px;--frame-gap:14px;height:155px;margin-top:20px}.perspective-track{padding-top:26px}.perspective-axis-labels{padding:0;gap:12px;font-size:8px;letter-spacing:.065em}.perspective-axis-labels>span:last-child{padding-left:0}.paradigm-visual figcaption{text-align:left;font-size:11px;margin-top:22px;line-height:1.9}.approach-unveil-link{margin:23px 0 0;font-size:12px}
}
@media(prefers-reduced-motion:reduce){.perspective-track,.perspective-axis-dot{animation:none!important}}