/* sg-skill landing · Singapore flag theme (red #EF3340 / white), original lion mascot */
:root{--red:#EF3340;--red-bg:#D7263D;--red-ink:#C8102E;--red-dark:#A50E26;--white:#fff;--paper:#fff;--mist:#F8F3F1;--blush:#FDECEE;--ink:#1A1416;--muted:#5A4E52;--line:#1A141624;
--motif:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='4.6 2.2 16 13.6'%3E%3Cpath d='M12.021 2.404A6.625 6.625 0 1 0 12.021 15.596A7.25 7.25 0 0 1 12.021 2.404Z'/%3E%3Cpath d='M15.030 3.475L15.417 4.667L16.671 4.667L15.657 5.404L16.044 6.596L15.030 5.859L14.016 6.596L14.403 5.404L13.389 4.667L14.643 4.667ZM20.285 7.293L19.271 8.029L19.658 9.221L18.644 8.485L17.630 9.221L18.017 8.029L17.003 7.293L18.257 7.293L18.644 6.101L19.031 7.293ZM18.278 13.470L17.264 12.733L16.250 13.470L16.637 12.278L15.623 11.541L16.876 11.541L17.264 10.349L17.651 11.541L18.904 11.541L17.890 12.278ZM11.782 13.470L12.170 12.278L11.156 11.541L12.409 11.541L12.796 10.349L13.184 11.541L14.437 11.541L13.423 12.278L13.810 13.470L12.796 12.733ZM9.775 7.293L11.029 7.293L11.416 6.101L11.803 7.293L13.057 7.293L12.043 8.029L12.430 9.221L11.416 8.485L10.402 9.221L10.789 8.029Z'/%3E%3C/svg%3E");--star:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1l3.1 7.6 8.2.6-6.3 5.3 2 8L12 18.2 5 22.5l2-8L.7 9.2l8.2-.6z'/%3E%3C/svg%3E");
--sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;--mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
--r:16px;--max:1160px}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:16px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.6 var(--sans);text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
a{color:var(--red-ink);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px;color:var(--red-dark)}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:6px}
.on-red :focus-visible,.hero :focus-visible{outline-color:#fff}
code{font:500 .86em/1.4 var(--mono);background:#1a14160f;padding:.12em .36em;border-radius:6px;overflow-wrap:anywhere}
q{quotes:"“" "”"}
.wrap{width:min(100% - 40px,var(--max));margin-inline:auto}
.skip{position:absolute;left:-999px;top:8px;background:#fff;color:var(--ink);padding:8px 14px;border-radius:8px;z-index:9}
.skip:focus{left:12px}
h1,h2,h3{line-height:1.08;letter-spacing:-.025em;margin:0}
h2{font-size:clamp(30px,4.6vw,54px);font-weight:800;max-width:20ch;text-wrap:balance}
h3{font-size:20px;font-weight:700;letter-spacing:-.01em;line-height:1.25}
.kicker{font:700 12.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--red-ink);margin:0 0 18px;display:flex;align-items:center;gap:10px}
.kicker::before{content:"";width:24px;height:5px;border-radius:3px;background:currentColor;flex:none}
.intro{max-width:64ch;color:var(--muted);font-size:18.5px;margin:22px 0 0}
.flag{display:block;aspect-ratio:3/2;height:auto;flex:none;box-shadow:0 0 0 1px #1a141633}

/* red-white-red stripe band */
.rwr{height:22px;background:linear-gradient(var(--red-bg) 0 7px,#fff 7px 15px,var(--red-bg) 15px)}
.on-red{background:var(--red-bg);color:#fff;position:relative;isolation:isolate}
.on-red::before,.on-red::after{content:"";position:absolute;left:0;right:0;height:4px;background:#fff;z-index:1}
.on-red::before{top:10px}.on-red::after{bottom:10px}
.on-red h2,.on-red h3{color:#fff}.on-red .kicker,.on-red .intro,.on-red .note{color:#fff}
.on-red a{color:#fff}
.on-red a.btn-white,.hero a.btn-white{color:var(--red-ink)}.on-red a.btn-line:hover{color:var(--red-ink)}
.on-red code{background:#ffffff26;color:#fff}

/* hero */
.hero{position:relative;min-height:100svh;background:radial-gradient(70% 60% at 75% 35%,#EF3340,transparent 70%),var(--red-bg);color:#fff;display:flex;flex-direction:column;overflow:hidden;isolation:isolate;touch-action:pan-y}
#flow{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:-3}
.nogl #flow{display:none}
.hero-shade{position:absolute;inset:0;z-index:-2;pointer-events:none;background:linear-gradient(90deg,#c51d33e6 0%,#c51d3399 45%,#c51d3300 75%)}
.hero-wm{position:absolute;z-index:-1;left:-6vw;bottom:-9vw;width:min(78vw,1050px);aspect-ratio:16/13.6;fill:#fff;opacity:.035;pointer-events:none}
.top{display:flex;align-items:center;justify-content:space-between;padding:22px 0;gap:16px}
.brand{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-weight:800;letter-spacing:-.01em;font-size:18px}
.brand img{border-radius:8px;box-shadow:0 0 0 2px #fff}
.brand:hover{color:#fff}
.top ul{display:flex;gap:26px;list-style:none;margin:0;padding:0}
.top ul a{color:#fff;text-decoration:none;font-size:15px;font-weight:600;opacity:.92;padding:4px 0;border-bottom:2px solid transparent}
.top ul a:hover{opacity:1;color:#fff;border-bottom-color:#fff}
.hero-in{flex:1;display:grid;grid-template-columns:1.45fr .9fr;gap:56px;align-items:center;padding:30px 0 70px}
.eyebrow{display:inline-flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 26px;padding:7px 16px 7px 8px;border-radius:99px;background:#fff;font-size:13.5px;color:var(--ink);box-shadow:0 10px 30px -14px #5a0a14}
.eyebrow strong{color:var(--red-ink)}
.flag-sm{width:33px;border-radius:4px}
h1{font-size:clamp(42px,6.3vw,84px);font-weight:850;letter-spacing:-.045em;line-height:1;color:#fff;text-wrap:balance}
h1 em{font:italic 500 1.02em/1 var(--serif);letter-spacing:-.02em;color:var(--red-ink);background:#fff;padding:0 .14em;border-radius:.12em;-webkit-box-decoration-break:clone;box-decoration-break:clone;background-clip:content-box;background:linear-gradient(#fff,#fff) 0 58%/100% 84% no-repeat}
.lede{font-size:clamp(18px,1.9vw,22px);line-height:1.5;color:#fff;max-width:36ch;margin:28px 0 0}
.ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.btn{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 24px;border-radius:99px;font-weight:700;font-size:16px;text-decoration:none;transition:transform .15s ease,background .15s ease,box-shadow .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn-white{background:#fff;color:var(--red-ink);box-shadow:4px 4px 0 var(--ink)}
.btn-white:hover{color:var(--red-dark);box-shadow:6px 6px 0 var(--ink)}
.btn-ghost{color:#fff;border:2px solid #fff}
.btn-ghost:hover{background:#fff;color:var(--red-ink)}
.btn-line{color:#fff;border:2px solid #fff}
.btn-line:hover{background:#fff;color:var(--red-ink)}
.hero-side{position:relative;display:flex;flex-direction:column;align-items:flex-end}
.chat{margin:-14px 0 0;width:100%;background:#fff;color:var(--ink);border-radius:var(--r);padding:0 0 18px;box-shadow:8px 8px 0 #8f0b20,0 30px 70px -30px #3a0008;font-size:15.5px;position:relative;z-index:1;overflow:hidden}
.chat-bar{display:flex;gap:7px;align-items:center;padding:13px 18px;background:linear-gradient(var(--red) 0 50%,#fff 50%);background:var(--ink);margin-bottom:6px}
.chat-bar i{width:10px;height:10px;border-radius:50%;background:#ffffff40}.chat-bar i:first-child{background:var(--red)}.chat-bar i:nth-child(2){background:#fff}
.chat-bar span{margin-left:8px;font:500 12px var(--mono);color:#fff}
.msg{margin:12px 18px 0;padding:12px 14px;border-radius:14px;line-height:1.5}
.msg b{display:block;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:4px}
.msg.you{background:var(--mist);color:var(--ink)}.msg.you b{color:var(--muted)}
.msg.cl{background:var(--blush);border:1px solid #EF334040;color:var(--ink)}.msg.cl b{color:var(--red-ink)}
.msg code{background:#fff;color:var(--ink);box-shadow:0 0 0 1px #1a14161f}
.hint{margin-bottom:26px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#fff;opacity:.85}
.nogl .hint{display:none}

/* lion mascot (original character) */
.lion{position:relative;width:min(270px,72%);margin-right:-6px;z-index:2}
.lion-btn{all:unset;display:block;cursor:pointer;width:100%;-webkit-tap-highlight-color:transparent;border-radius:24px}
.lion-btn:focus-visible{outline:3px solid #fff;outline-offset:4px}
.lion-svg{display:block;width:100%;height:auto;overflow:visible}
.lion-svg *{transform-box:view-box}
.l-bob{animation:l-bob 3.6s ease-in-out infinite}
.l-head{transform-origin:110px 150px;transform:rotate(var(--tilt,0deg));transition:transform .4s cubic-bezier(.3,1.4,.5,1)}
.l-eyes{transform-origin:110px 92px;animation:l-blink 5.2s infinite}
.l-pupils{transform:translate(calc(var(--px,0)*1px),calc(var(--py,0)*1px));transition:transform .18s ease-out}
.l-arm{transform-origin:164px 214px;animation:l-idle 3.6s ease-in-out infinite}
.lion.wave .l-arm{animation:l-wave .5s ease-in-out 4 alternate}
.lion-btn:hover .l-arm{animation:l-wave .5s ease-in-out infinite alternate}
.lion.hop .lion-svg{animation:l-hop .55s cubic-bezier(.3,1.6,.5,1)}
@keyframes l-bob{50%{transform:translateY(-4px)}}
@keyframes l-blink{0%,93%,100%{transform:scaleY(1)}95.5%{transform:scaleY(.1)}}
@keyframes l-idle{50%{transform:rotate(-3deg)}}
@keyframes l-wave{from{transform:rotate(6deg)}to{transform:rotate(-16deg)}}
@keyframes l-hop{40%{transform:translateY(-14px)}}
.bubble{position:absolute;right:76%;top:4%;z-index:3;white-space:nowrap;background:#fff;color:var(--red-ink);font:800 16px/1.15 var(--sans);letter-spacing:-.01em;padding:10px 14px;border:3px solid var(--ink);border-radius:16px;box-shadow:4px 4px 0 var(--ink);opacity:0;transform:translateY(6px) scale(.9);transform-origin:100% 100%;transition:opacity .2s,transform .25s cubic-bezier(.3,1.5,.5,1);pointer-events:none}
.bubble::after{content:"";position:absolute;right:-12px;bottom:10px;width:16px;height:16px;background:#fff;border:3px solid var(--ink);border-left:0;border-bottom:0;transform:rotate(45deg) skew(10deg,10deg);border-radius:0 4px 0 0}
.lion.talk .bubble{opacity:1;transform:none}
/* tee: </> and Singapore flag crossfade every 1.5s (reduced motion: </> only) */
.l-tee-flag{opacity:0}
.l-tee-code{animation:l-tee-code 3s linear infinite}
.l-tee-flag{animation:l-tee-flag 3s linear infinite}
@keyframes l-tee-code{0%{opacity:0}13.33%,50%{opacity:1}63.33%,100%{opacity:0}}
@keyframes l-tee-flag{0%{opacity:1}13.33%,50%{opacity:0}63.33%,100%{opacity:1}}

/* stats */
.stats{background:#fff;color:var(--ink)}
.stats ul{list-style:none;margin:0 auto;padding:34px 0 30px;display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.stats li{display:flex;flex-direction:column;gap:4px;padding-left:16px;border-left:3px solid var(--red)}
.stats b{font-size:clamp(34px,4.4vw,56px);font-weight:850;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums;color:var(--red-ink)}
.stats span{font-size:14.5px;color:var(--muted);font-weight:600}

.sec{padding:clamp(72px,10vw,128px) 0}
.what{background:var(--mist)}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:48px}
.cards article{background:#fff;border-radius:var(--r);padding:0 24px 26px;overflow:hidden;box-shadow:0 1px 0 var(--line),0 18px 40px -30px #5a0a1466}
.cards article::before{content:"";display:block;height:12px;margin:0 -24px 22px;background:linear-gradient(var(--red) 0 4px,#fff 4px 8px,var(--red) 8px)}
.cards .ic{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--red-ink);color:#fff;font:700 13px var(--mono)}
.cards h3{margin:16px 0 10px}
.cards p{margin:0;color:var(--muted);font-size:16px}

/* levels (red) */
.lvs{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:48px}
.lv{background:#fff;color:var(--ink);border-radius:var(--r);padding:22px 24px 24px;display:flex;flex-direction:column;gap:12px;box-shadow:6px 6px 0 #8f0b20}
.lv header{display:flex;align-items:center;gap:12px}
.on-red .lv h3{color:var(--ink)}
.on-red .lv code{background:#1a14160f;color:var(--ink)}
.stall{font:700 12px var(--mono);background:var(--red-ink);color:#fff;padding:5px 8px;border-radius:6px}
.lv header::after{content:"";margin-left:auto;height:8px;width:14px;flex:none;background:radial-gradient(circle,var(--red) 3.5px,transparent 4px) left/14px 8px repeat-x;opacity:.8}
.lv2 header::after{width:28px}.lv3 header::after{width:42px}
.lvd{margin:0;font-size:14.5px;color:var(--muted)}
.bub{border-radius:14px;padding:12px 14px;font-size:16px;line-height:1.5}
.bub .who{display:block;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:3px;color:var(--muted)}
.bub.you{background:var(--mist);font-family:var(--serif);font-style:italic;font-size:17.5px}
.bub.cl{background:var(--red-bg);color:#fff}.on-red .bub.cl .who{color:#fff}
.on-red .bub.cl code{background:#ffffff2e;color:#fff}
.note{margin:28px 0 0;max-width:80ch}

/* how (white) */
.how{background:#fff}
.pipe{list-style:none;margin:52px 0 0;padding:0;display:grid}
.pipe>li{position:relative;padding:0 0 34px 44px;border-left:3px dashed #EF334088;margin-left:12px}
.pipe>li:last-child{border-left-color:transparent;padding-bottom:10px}
.pipe>li::before{content:"";position:absolute;left:-14px;top:-1px;width:26px;height:26px;border-radius:50%;background:var(--red);box-shadow:0 0 0 4px #fff}
.step{display:block;font:700 12px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--red-ink);margin-bottom:10px}
.pipe h3{margin-bottom:8px}
.pipe p{margin:0;color:var(--muted);max-width:70ch}
.fm{margin:16px 0 0;background:var(--ink);border-radius:14px;padding:18px;overflow:auto;max-width:860px;border-top:6px solid var(--red)}
.fm code{background:none;color:#f1e7e4;font-size:13.5px;line-height:1.65;white-space:pre-wrap;padding:0}
.fm .k{color:#ff8a93}
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0;padding:0}
.chips li{border:1.5px solid var(--red-ink);color:var(--red-ink);border-radius:99px;padding:5px 12px;font-size:14px;font-weight:600;background:#fff}
.split{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:26px}
.out{border-radius:var(--r);padding:24px}
.out h3{margin-bottom:8px}.out p{margin:0;font-size:15.5px}
.out .step{color:inherit;opacity:.95}
.chat-out,.safe-out{background:var(--red-bg);color:#fff}
.chat-out h3,.safe-out h3{color:#fff}
.chat-out code,.safe-out code{background:#ffffff2e;color:#fff}
.ship-out{background:#fff;border:2px solid var(--ink);color:var(--ink)}.ship-out p{color:var(--muted)}.ship-out .step{color:var(--red-ink)}
.fine{margin:28px 0 0;font-size:14.5px;color:var(--muted)}

/* respect (red) */
.rules{counter-reset:r;list-style:none;margin:44px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:0 36px}
.rules li{counter-increment:r;padding:22px 0;border-top:2px solid #ffffff66;color:#fff}
.rules li::before{content:"0" counter(r);display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#fff;font:700 12.5px var(--mono);color:var(--red-ink);margin-bottom:12px}
.rules b{color:#fff}

/* install */
.install{background:var(--mist)}
.inst{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:40px;margin-top:48px;align-items:start}
.inst-main{order:1}.poster{order:2}
.poster{position:sticky;top:24px;border-radius:var(--r);overflow:hidden;padding:26px 18px 0;color:#fff;text-align:center;
 background:repeating-conic-gradient(from 0deg at 50% 100%,#D7263D 0 7.5deg,#C51D33 7.5deg 15deg);box-shadow:8px 8px 0 var(--ink);border:3px solid var(--ink)}
.poster::after{content:"";position:absolute;left:0;right:0;bottom:0;height:16px;background:linear-gradient(#fff 0 5px,var(--red-dark) 5px)}
.poster-t{margin:0 0 6px;font:900 26px/1.05 var(--sans);letter-spacing:-.03em;text-transform:uppercase;text-wrap:balance}
.poster-t em{display:block;font:italic 600 1.25em/1.1 var(--serif);text-transform:none;letter-spacing:-.02em}
.lion-poster{width:100%;margin:0 auto}
.lion-poster .bubble{right:auto;left:2%;top:-2%;transform-origin:0 100%}
.lion-poster .bubble::after{right:auto;left:22px;bottom:-12px;transform:rotate(135deg);border-radius:0 4px 0 0}
.steps{list-style:none;counter-reset:st;margin:0;padding:0;display:grid;gap:18px}
.steps>li{counter-increment:st;background:#fff;border-radius:var(--r);padding:26px 26px 26px 80px;position:relative;box-shadow:0 1px 0 var(--line)}
.steps>li::before{content:counter(st);position:absolute;left:22px;top:22px;width:40px;height:40px;border-radius:50%;background:var(--red-ink);color:#fff;display:grid;place-items:center;font-weight:800;box-shadow:0 0 0 3px #fff,0 0 0 5px var(--red)}
.steps p{margin:10px 0 0;color:var(--muted)}
.code{position:relative;margin-top:12px}
.code pre{margin:0;background:var(--ink);color:#f3e9e4;border-radius:12px;padding:16px 92px 16px 18px;overflow:auto;border-left:5px solid var(--red)}
.code pre code{background:none;color:inherit;font-size:14px;padding:0;white-space:pre;overflow-wrap:normal}
.copy{position:absolute;top:10px;right:10px;font:600 13px var(--sans);color:#fff;background:#2e2528;border:1px solid #ffffff40;border-radius:8px;padding:6px 12px;cursor:pointer;min-height:32px;box-shadow:-14px 0 12px -2px var(--ink)}
.copy:hover{background:#43383b}.copy.ok{background:var(--red);border-color:var(--red)}
.tips{margin-top:40px}
.tips ul{margin:16px 0 0;padding:0;list-style:none;display:grid;gap:12px}
.tips li{padding-left:30px;position:relative;color:var(--muted)}
.tips li::before{content:"";position:absolute;left:5px;top:.5em;width:10px;height:10px;border-radius:50%;background:var(--red)}
.tips b,.tips q{color:var(--ink)}

/* vibe */
.vibe{background:#fff}
.vlist{list-style:none;margin:44px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:0 36px}
.vlist li{padding:18px 0 18px 18px;border-top:1px solid var(--line);display:grid;gap:4px;position:relative}
.vlist li::before{content:"";position:absolute;left:0;top:24px;bottom:22px;width:3px;background:var(--red);border-radius:2px}
.vlist q{font:italic 500 20px/1.3 var(--serif);color:var(--ink)}
.vm{font-weight:650;font-size:15.5px;color:var(--red-ink)}
.vr{color:var(--muted);font-size:15px}

/* why (white) */
.why{background:#fff}
#why{scroll-margin-top:16px}
.why .intro em{font-style:italic;font-family:var(--serif);color:var(--ink);font-weight:600}
.why-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:48px;margin-top:48px;align-items:start}
.why-pts{list-style:none;margin:0;padding:0;display:grid;gap:26px}
.why-pts li{position:relative;padding-left:30px}
.why-pts li::before{content:"";position:absolute;left:5px;top:.42em;width:10px;height:10px;border-radius:50%;background:var(--red)}
.why-pts h3{margin-bottom:6px}
.why-pts p{margin:0;color:var(--muted);font-size:16.5px}
.cmp{margin:0;background:#fff;border:2px solid var(--ink);border-radius:var(--r);box-shadow:6px 6px 0 var(--red);overflow:hidden}
.cmp-row{padding:22px 24px;position:relative}
.cmp-row p{margin:0;font:italic 500 21px/1.4 var(--serif);color:var(--ink)}
.cmp-en{background:var(--mist)}
.cmp-en p{color:var(--muted)}
.cmp-sg{background:var(--blush);border-top:2px solid var(--ink)}
.cmp-sg::before{content:"";position:absolute;left:0;top:22px;bottom:22px;width:4px;background:var(--red);border-radius:0 3px 3px 0}
.cmp .step{display:flex;align-items:center;justify-content:space-between;gap:12px}
.wc{font:600 12px/1 var(--mono);letter-spacing:.02em;text-transform:none;background:#fff;color:var(--ink);border:1.5px solid var(--ink);border-radius:99px;padding:5px 9px}
.cmp-sg .wc{background:var(--red-ink);border-color:var(--red-ink);color:#fff}
.cmp figcaption{padding:14px 24px;font-size:14px;color:var(--muted);border-top:1px solid var(--line)}

.motif-div{display:flex;align-items:center;gap:22px;color:var(--red);padding:6px 0}
.motif-div::before,.motif-div::after{content:"";flex:1;height:0;border-top:2px solid var(--red);box-shadow:0 5px 0 -0px #fff,0 7px 0 0 var(--red)}
.motif-div i{width:12px;height:12px;border-radius:50%;background:var(--red);flex:none}

/* glossary */
.glossary{background:#fff;padding-top:clamp(48px,7vw,90px)}
.search{margin:34px 0 10px;max-width:560px}
.search label{display:block;font-weight:700;font-size:14px;margin-bottom:8px}
.search input{width:100%;font:500 17px var(--sans);padding:14px 18px;border-radius:12px;border:2px solid var(--ink);background:#fff;color:var(--ink);box-shadow:4px 4px 0 var(--red)}
.search input:focus{outline:none;border-color:var(--red-ink);box-shadow:4px 4px 0 var(--ink)}
.qn{margin:8px 0 0;font-size:14px;color:var(--muted);min-height:1.4em}
.gh{margin:36px 0 12px;font-size:22px}.gh span{font-weight:500;color:var(--muted);font-size:16px}
.gl{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:0 36px}
.gl .g{display:grid;grid-template-columns:minmax(120px,38%) 1fr;gap:14px;padding:11px 0;border-top:1px solid #1a14161f}
.gl dt{font:italic 600 17.5px/1.35 var(--serif);color:var(--red-ink)}
.gl dd{margin:0;font-size:15.5px;line-height:1.45}
.gl .eg{display:block;margin-top:4px;font-size:13.5px;color:var(--muted)}
.gl .og{font-weight:600}
.gsec{border-top:3px solid var(--red)}
.gsec:last-of-type{border-bottom:3px solid var(--red)}
.gsec summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:12px;padding:18px 0;font-weight:750;font-size:19px}
.gsec summary:hover{color:var(--red-ink)}
.gsec summary::-webkit-details-marker{display:none}
.gsec summary::after{content:"+";margin-left:auto;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--red-ink);color:#fff;font-size:20px;font-weight:500;line-height:1}
.gsec[open] summary::after{content:"−"}
.gn{font:700 12px var(--mono);background:var(--red-ink);color:#fff;border-radius:6px;padding:4px 7px}
.gc{font:500 13px var(--mono);color:var(--muted)}
.gsec .gl{padding-bottom:18px}
.g[hidden],.gsec[hidden]{display:none}
.none{font-size:18px;color:var(--muted)}

/* footer (red) */
.foot{padding:110px 0 72px;overflow:hidden}
.foot h2{max-width:none}.foot h2 em{font:italic 500 1em var(--serif);color:var(--red-ink);background:#fff;padding:0 .14em;border-radius:.12em}
.foot .btn-line{color:#fff}
.foot .btn-line:hover{color:var(--red-ink)}
.btn-bmc{padding-left:8px}
.ava{width:36px;height:36px;border-radius:50%;object-fit:cover;flex:none;box-shadow:0 0 0 2px #fff;background:#fff}
.lic{margin:40px 0 0;font-size:14.5px;color:#fff;max-width:70ch}

@media (max-width:1000px){
 .hero-in{grid-template-columns:1fr;gap:20px}
 .hero-side{max-width:560px;width:100%;justify-self:center}
 .cards{grid-template-columns:1fr 1fr}
 .lvs,.split{grid-template-columns:1fr}
 .rules{grid-template-columns:1fr 1fr}
 .gl{grid-template-columns:1fr}
 .inst{grid-template-columns:1fr}
 .why-in{grid-template-columns:1fr;gap:36px}
 .poster{position:relative;top:0;order:0;display:grid;grid-template-columns:1fr 1fr;align-items:end;text-align:left;padding:22px 18px 0 22px;max-width:560px}
 .poster-t{align-self:center;font-size:24px}
}
@media (max-width:720px){
 body{font-size:16.5px}
 .top ul{gap:0}
 .top li:not(.nav-why){display:none}
 .top ul a{white-space:nowrap}
 .hero-in{padding:6px 0 40px}
 .hero-shade{background:linear-gradient(180deg,#c51d3399 0%,#c51d3380 55%,#c51d33 100%)}
 .hero-wm{width:130vw;left:-30vw;bottom:-10vw}
 .eyebrow .mit{display:none}
 .lion-hero{width:min(220px,62%)}
 .lion .bubble{font-size:14px;padding:8px 11px}
 .stats ul{grid-template-columns:repeat(2,1fr);gap:22px}
 .stats li:last-child{grid-column:span 2}
 .cards,.rules,.vlist{grid-template-columns:1fr}
 .steps>li{padding:76px 20px 22px}
 .steps>li::before{left:20px;top:20px}
 .gl .g{grid-template-columns:1fr;gap:2px}
 .btn{width:100%;justify-content:center;text-align:center;padding:10px 18px;font-size:15.5px}
 .btn-bmc{padding-left:24px}
 .chat{font-size:15px}
 .cmp-row{padding:20px 18px}
 .cmp-row p{font-size:19px}
 .cmp figcaption{padding:14px 18px}
 .poster{grid-template-columns:1fr 1.1fr}
 .poster-t{font-size:20px}
}
.hero-in>*,.cards>*,.lvs>*,.split>*,.steps>li,.vlist>li,.rules>li,.gl .g,.gl dd,.pipe>li,.inst>*,.why-in>*{min-width:0}