@font-face{font-family:"Inter";font-style:normal;font-weight:400 600;font-display:swap;src:url(../assets/fonts/inter-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Inter";font-style:normal;font-weight:400 600;font-display:swap;src:url(../assets/fonts/inter-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:600 700;font-display:swap;src:url(../assets/fonts/montserrat-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Montserrat";font-style:normal;font-weight:600 700;font-display:swap;src:url(../assets/fonts/montserrat-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:500 600;font-display:swap;src:url(../assets/fonts/playfairdisplay-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Playfair Display";font-style:normal;font-weight:500 600;font-display:swap;src:url(../assets/fonts/playfairdisplay-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{--bg:#2F3A44;--panel:#3A4652;--card:#46535F;--accent-surface:#55636F;--text:#EDE8E1;--muted:#A7A08F;--gold:#C79B63;--gold-gradient:linear-gradient(135deg,color-mix(in srgb,var(--gold),white 38%),var(--gold) 45%,color-mix(in srgb,var(--gold),black 30%));--line:rgba(237,232,225,.14);--max:1180px;--serif:"Playfair Display",Georgia,serif;--sans:"Inter",Arial,sans-serif;--ui:"Montserrat",Arial,sans-serif}
html[data-theme=light]{--bg:#EDE8E1;--panel:#FFF;--card:#E3DDD2;--accent-surface:#D6CFC0;--text:#2F3A44;--muted:#6E6656;--gold:#7D5F37;--gold-gradient:linear-gradient(135deg,color-mix(in srgb,var(--gold),white 28%),var(--gold) 45%,color-mix(in srgb,var(--gold),black 28%));--line:rgba(47,58,68,.15)}
*{box-sizing:border-box}[hidden]{display:none!important}html{background:var(--bg);overflow-x:clip}body{margin:0;background:var(--bg);color:var(--text);font:400 16px/1.65 var(--sans);min-width:320px;overflow-x:clip}a{color:inherit}.container{width:min(calc(100% - 48px),var(--max));margin:auto}
.site-header{position:sticky;top:0;z-index:20;background:var(--bg);border-bottom:1px solid var(--line)}.nav-wrap{min-height:82px;display:flex;align-items:center;gap:28px}.brand{display:flex;align-items:center;flex:none;margin-right:auto;color:var(--gold);text-decoration:none}.hero-mark{color:var(--gold)}.brand-wordmark{display:block;height:50px;aspect-ratio:1400/372;flex:none;background:var(--gold-gradient);-webkit-mask:url("/assets/koon-wordmark.png") center/contain no-repeat;mask:url("/assets/koon-wordmark.png") center/contain no-repeat}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.main-nav{display:none;position:absolute;right:max(24px,calc((100vw - var(--max))/2));top:78px;width:240px;padding:16px;flex-direction:column;align-items:stretch;gap:0;background:var(--panel);border:1px solid var(--line);z-index:30}.main-nav.open{display:flex}.main-nav a,.theme-toggle,.menu-toggle{font:600 11px/1 var(--ui);text-transform:uppercase;letter-spacing:.14em;text-decoration:none}.main-nav a{opacity:.82;padding:14px 6px;border-bottom:1px solid var(--line)}.main-nav a:first-child{padding-top:0}.main-nav a:last-child{padding-bottom:0;border-bottom:0}.main-nav a:hover{color:var(--gold);opacity:1}.theme-toggle,.menu-toggle{appearance:none;border:0;background:transparent;color:var(--text);cursor:pointer}.theme-toggle{display:inline-flex;align-items:center;justify-content:center;padding:7px}.theme-icon{color:var(--gold);font-size:20px;line-height:1}.lang-toggle{display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:30px;padding:0 9px;border:1px solid var(--line);border-radius:16px;background:transparent;color:var(--text);font:700 11px/1 var(--ui);letter-spacing:.04em;cursor:pointer}.lang-toggle:hover{border-color:var(--gold);color:var(--gold)}.header-actions{display:flex;align-items:center;flex-direction:row;gap:12px;white-space:nowrap}.menu-toggle{display:block;padding:10px 0}
.hero{min-height:690px;display:grid;align-items:center;position:relative;overflow:hidden;border-bottom:1px solid var(--line)}.hero:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 82% 40%,rgba(216,168,59,.08),transparent 28%)}.hero-inner{position:relative;padding:100px 0;max-width:1040px}.hero-mark{position:absolute;right:max(4vw,calc((100vw - var(--max))/2));top:50%;width:300px;aspect-ratio:500/489;opacity:.1;transform:translateY(-46%);pointer-events:none;background:var(--gold-gradient);-webkit-mask:url("/assets/koon-icon.png") center/contain no-repeat;mask:url("/assets/koon-icon.png") center/contain no-repeat}.hero-mark svg{width:100%;height:auto}
.eyebrow{margin:0 0 22px;color:var(--gold);font:600 11px/1.2 var(--ui);letter-spacing:.22em;text-transform:uppercase}h1,h2,h3{margin:0;font-family:var(--serif);font-weight:500;letter-spacing:-.025em}h1{max-width:920px;font-size:clamp(48px,6vw,82px);line-height:1.02}h1 em{color:var(--gold);font-style:normal}.hero-copy{max-width:640px;margin:34px 0 30px;font-size:17px;color:var(--muted)}
.text-link{display:inline-flex;gap:12px;align-items:center;color:var(--text);font:600 11px/1 var(--ui);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;appearance:none;border:0;background:none;padding:0;cursor:pointer;border-bottom:1px solid var(--gold);padding-bottom:10px}.text-link span{color:var(--gold);font-size:16px}
.section{padding:110px 0;border-bottom:1px solid var(--line)}.split{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);gap:90px}.prose{max-width:620px;color:var(--muted)}.prose p{margin:0 0 22px}h2{font-size:clamp(34px,4vw,56px);line-height:1.08}.section-head{display:flex;justify-content:space-between;gap:40px;align-items:end;margin-bottom:52px}.section-note{margin:0;color:var(--muted);font-size:14px;font-style:italic}
.principle-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}.principle{padding:30px 34px 8px 0;border-right:1px solid var(--line);margin-right:34px}.principle:last-child{border-right:0;margin-right:0}.principle-no{display:block;margin-bottom:35px;color:var(--gold);font:600 10px/1 var(--ui);letter-spacing:.18em}.principle h3{font-size:30px;margin-bottom:12px}.principle p{margin:0;color:var(--muted);font-size:14px;max-width:310px}
.game-panel{display:grid;grid-template-columns:1.4fr .8fr;gap:70px;padding:64px;background:var(--panel);border:1px solid var(--line);border-top:2px solid var(--gold)}.game-copy p:not(.eyebrow){color:var(--muted);max-width:560px;margin:24px 0 32px}.button{display:inline-block;padding:15px 20px;background:var(--gold);color:var(--bg);font:700 11px/1 var(--ui);letter-spacing:.16em;text-transform:uppercase;text-decoration:none}.button:hover{background:var(--text)}.game-meta{align-self:center;border-left:1px solid var(--line);padding-left:34px}.meta-line{display:flex;justify-content:space-between;gap:20px;padding:18px 0;border-bottom:1px solid var(--line);font:600 10px/1.3 var(--ui);letter-spacing:.12em}.meta-line span{color:var(--muted)}.meta-line strong{color:var(--gold);font-weight:600}.about-teaser{background:var(--panel)}


.scoreboard{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}.scoreboard li{display:flex;align-items:baseline;gap:18px;padding:16px 0;border-bottom:1px solid var(--line)}.scoreboard .rank{flex:none;width:30px;color:var(--gold);font:700 13px/1 var(--ui)}.scoreboard .player{flex:1;min-width:0}.scoreboard .name{display:block;font-family:var(--serif);font-size:19px;overflow-wrap:break-word}.scoreboard .detail{display:block;margin-top:6px;color:var(--muted);font:600 11px/1.45 var(--ui);letter-spacing:.04em;overflow-wrap:break-word}.scoreboard .amount{flex:none;color:var(--gold);font:600 13px/1 var(--ui);letter-spacing:.04em}.scoreboard .scoreboard-status{color:var(--muted);font-size:14px}


.site-footer{padding:30px 0 45px;color:var(--muted);font:500 10px/1.3 var(--ui);letter-spacing:.12em;text-transform:uppercase}.footer-wrap{display:flex;justify-content:space-between;gap:20px}.footer-links a{color:var(--muted);text-decoration:none}.footer-links a:hover{color:var(--gold)}
@media(max-width:900px){.hero{min-height:610px}.hero-mark{right:2%;width:240px;opacity:.07}.split{gap:45px}.game-panel{gap:40px;padding:44px}}
@media(max-width:720px){.container{width:min(calc(100% - 32px),var(--max))}.nav-wrap{min-height:72px}.brand-wordmark{height:40px}.main-nav{left:16px;right:16px;width:auto}.main-nav a{padding:16px 8px}.header-actions{flex:1 1 0%;min-width:0;flex-wrap:wrap;justify-content:flex-end;row-gap:8px}.hero{min-height:650px}.hero-inner{padding:82px 0}.hero-mark{top:19%;right:-9%;width:210px;opacity:.08}h1{font-size:clamp(43px,13vw,64px)}.hero-copy{font-size:15px}.section{padding:78px 0}.split{grid-template-columns:1fr;gap:30px}.section-head{display:block;margin-bottom:34px}.section-note{margin-top:18px}.principle-grid{grid-template-columns:1fr}.principle{padding:28px 0;margin:0;border-right:0;border-bottom:1px solid var(--line)}.principle:last-child{border-bottom:0}.principle-no{margin-bottom:24px}.game-panel{grid-template-columns:1fr;padding:32px 24px}.game-meta{border-left:0;border-top:1px solid var(--line);padding:10px 0 0}.footer-wrap{flex-direction:column}}

.hero-mark img{display:block;width:100%;height:auto}

.page-hero{padding:84px 0 70px;text-align:center;border-bottom:1px solid var(--line)}
.page-hero .mark{width:150px;aspect-ratio:500/489;margin:0 auto 28px;background:var(--gold-gradient);-webkit-mask:url("/assets/koon-icon.png") center/contain no-repeat;mask:url("/assets/koon-icon.png") center/contain no-repeat}
.page-hero h1{max-width:820px;margin:0 auto;font-size:clamp(34px,4.6vw,58px);line-height:1.12}
.page-hero h1 em{color:var(--gold);font-style:normal}
.page-hero .lead{max-width:600px;margin:26px auto 0;color:var(--muted);font-size:17px}
.closing-panel{margin-top:12px}





.article-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.article-list li{border-bottom:1px solid var(--line)}
.article-item{display:block;padding:32px 0;text-decoration:none;color:inherit}
.article-item:hover h3{color:var(--gold)}
.article-item .article-date{display:block;margin-bottom:10px;color:var(--gold);font:600 10px/1 var(--ui);letter-spacing:.14em;text-transform:uppercase}
.article-item h3{font-size:26px;margin-bottom:10px;transition:color .15s}
.article-item p{margin:0;color:var(--muted);font-size:15px;max-width:640px}
/* older articles in a compact list */










.article-list.short{border-top:1px solid var(--line);margin-bottom:12px}
.article-item.short{display:flex;gap:20px;align-items:baseline;padding:13px 0}
.article-item.short .article-date{margin:0;flex:0 0 96px}
.article-item.short h3{font-size:17px;margin:0;line-height:1.35}
/* back to the top of the menu, on long pages (knowledge base) */
.to-top{position:fixed;right:20px;bottom:20px;z-index:50;width:46px;height:46px;border-radius:50%;border:1px solid var(--line);background:var(--bg);color:var(--gold);font:600 18px/1 var(--ui);cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.25);opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .2s,transform .2s}
.to-top.visible{opacity:1;transform:none;pointer-events:auto}
.to-top:hover,.to-top:focus-visible{border-color:var(--gold)}
@media(max-width:720px){.article-item.short{flex-direction:column;gap:6px;padding:12px 0}.article-item.short .article-date{flex:none}.to-top{right:14px;bottom:14px}}


.tab{appearance:none;border:1px solid var(--line);background:transparent;color:var(--muted);padding:9px 16px;font:600 11px/1 var(--ui);letter-spacing:.1em;text-transform:uppercase;cursor:pointer;border-radius:20px}
.tab:hover{border-color:var(--gold);color:var(--gold)}
.tab.active{background:var(--gold);border-color:var(--gold);color:var(--bg)}








.auth-widget{max-width:560px;padding:26px 30px;background:var(--panel);border:1px solid var(--line);border-top:2px solid var(--gold)}
.auth-form{display:grid;gap:12px}
.auth-form label{font:600 11px/1.4 var(--ui);letter-spacing:.04em;color:var(--text)}
.auth-form-row{display:flex;gap:10px;flex-wrap:wrap}
.auth-form-row input{flex:1;min-width:180px;font-family:var(--sans);font-size:15px;padding:12px 14px;background:var(--bg);border:1px solid var(--line);color:var(--text)}
.auth-form-row .button{border:0;cursor:pointer;flex:none}
.auth-note{margin:0;font-size:13px;color:var(--muted);min-height:1.2em}
.auth-account{display:inline-flex;flex:none;text-decoration:none}

.account-actions{display:flex;flex-direction:column;gap:0}
.account-actions .text-link{padding:10px 0;border-bottom:1px solid var(--line)}
.account-actions .text-link:last-child{border-bottom:0}
.account-admin-head{margin:4px 0 2px;color:var(--gold);font:600 10px/1.4 var(--ui);letter-spacing:.14em;text-transform:uppercase}











.scoreboard .delete{appearance:none;border:0;background:none;padding:0;margin-left:12px;color:var(--muted);font:600 10px/1 var(--ui);letter-spacing:.06em;text-transform:uppercase;text-decoration:underline;cursor:pointer}
.scoreboard .delete:hover{color:var(--gold)}
.scoreboard .detail .seed,#dailyNote .seed{display:inline;font:inherit;letter-spacing:inherit;text-transform:none;color:inherit;padding:0;border-bottom:1px dotted var(--gold)}
.scoreboard .detail .seed:hover,#dailyNote .seed:hover{color:var(--gold)}













@media(max-width:720px){.page-hero{padding:54px 0 44px}.page-hero .mark{width:110px}.page-hero .lead{font-size:15px}.article-item{padding:24px 0}.article-item h3{font-size:22px}.auth-widget{padding:22px 20px}}

/* Homepage hero: text on the left, a real sprint from the game on the right. The watermark medallion (.hero-mark)
   stays, larger and softer, behind the screen. */
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:64px;align-items:center;max-width:none}
.hero-game h1{font-size:clamp(44px,5vw,72px)}
.hero-game .hero-copy{margin:28px 0 30px}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px}
.hero-small{margin:18px 0 0;color:var(--muted);font:600 10px/1.4 var(--ui);letter-spacing:.14em;text-transform:uppercase}
main.with-brand{position:relative;z-index:0}.hero-game .hero-mark{position:fixed;z-index:-1;width:460px;right:calc(max(4vw,calc((100vw - var(--max))/2)) - 80px);opacity:.07}
.hero-screen{margin:0;position:relative}
.hero-screen img{display:block;width:100%;height:auto;border:1px solid var(--line);box-shadow:0 24px 60px rgba(0,0,0,.35)}
.hero-screen figcaption{margin-top:14px;color:var(--muted);font:600 10px/1.4 var(--ui);letter-spacing:.1em;text-transform:uppercase}

/* Newsletter form: reuses .auth-form/.auth-form-row/.auth-note
   of the login form; only the small print underneath is its own. */
.newsletter-form{margin-top:26px}
.newsletter-small{margin:0;font-size:12px;color:var(--muted)}

@media(max-width:900px){.hero-grid{grid-template-columns:minmax(0,1fr) 240px;gap:40px}.hero-game .hero-mark{width:360px;right:-60px;opacity:.06}}
@media(max-width:720px){.hero-grid{grid-template-columns:1fr;gap:44px}.hero-screen{width:min(300px,100%);justify-self:center}.hero-game .hero-mark{top:19%;right:-9%;width:210px;opacity:.08}}

/* Game page: the promo images (the same as on itch.io), the first large and
   animated, the rest in a grid. */
.showcase{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.showcase figure{margin:0}
.showcase .large{grid-column:1/-1}
.showcase img{display:block;width:100%;height:auto;border:1px solid var(--line)}
@media(max-width:720px){.showcase{grid-template-columns:1fr;gap:16px}}
.button-row{display:flex;flex-wrap:wrap;gap:12px}
/* Sharing from the game (leaderboard?share=…): the score as a row of the board, button and login panel underneath */
.scoreboard .name .guest{font:600 11px/1 var(--ui);letter-spacing:.06em;color:var(--muted);text-transform:uppercase}
#shareSection .guest-form{margin-top:22px}
.share-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:22px}.share-actions .button{border:0;cursor:pointer}#shareSection .auth-widget{margin-top:22px}
.button-row{align-items:center;gap:14px 28px}

/* Article pages (knowledge base, terms): date and title at the top, the text in one
   readable column. */
.article-head .eyebrow a{text-decoration:none}.article-head .eyebrow a:hover{text-decoration:underline}
.article-head h1{max-width:900px}
.article-meta{margin:26px 0 0;color:var(--muted);font:600 10px/1.4 var(--ui);letter-spacing:.14em;text-transform:uppercase}
.article-text{max-width:680px;margin:0 auto;color:var(--text)}
.article-text p{font-size:17px;line-height:1.75}
.article-text h2{font-size:clamp(26px,3vw,34px);line-height:1.15;margin:54px 0 18px}
.article-text h2:first-child{margin-top:0}
.article-text code{font:.9em/1.4 ui-monospace,Menlo,Consolas,monospace;background:var(--card);padding:1px 5px;overflow-wrap:anywhere}







@media(max-width:720px){.article-text p{font-size:16px}.article-text h2{margin-top:42px}}
/* three cards side by side, but only when wide: stacked on a phone
   (otherwise the homepage became 659 px wide and slid sideways) */


/* Daily challenge (js/daily.js): today's top 3 next to a short
   explanation. Stays hidden when the API does not answer. */
.daily{background:var(--panel)}
.daily-text{margin:24px 0 0;max-width:460px;color:var(--muted)}
.daily-count{margin:0 0 18px;color:var(--muted);font-size:15px}
.daily-actions{margin-top:30px}

/* statistics (admin only) */
.stat-choice{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin:30px 0 0}
.stat-totals{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:56px}
.stat-totals div{padding:24px 26px;background:var(--card);border:1px solid var(--line)}
.stat-totals strong{display:block;color:var(--gold);font:500 40px/1.1 var(--serif)}
.stat-totals span{display:block;margin-top:8px;color:var(--muted);font:600 10px/1.4 var(--ui);letter-spacing:.12em;text-transform:uppercase}
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}
.stat-head{font-size:28px;margin:0 0 16px}.stat-table+.stat-head{margin-top:44px}
.stat-table{width:100%;border-collapse:collapse;font-size:14px}
.stat-table th{padding:0 0 10px;text-align:left;color:var(--muted);font:600 10px/1.3 var(--ui);letter-spacing:.12em;text-transform:uppercase;border-bottom:1px solid var(--line)}
.stat-table th:not(:first-child),.stat-table .number{text-align:right}
.stat-table td{padding:10px 0;border-bottom:1px solid var(--line);overflow-wrap:anywhere}
.stat-table .number{padding-left:14px;font-variant-numeric:tabular-nums;white-space:nowrap}
.stat-table .stat-empty{color:var(--muted)}
@media(max-width:720px){.stat-totals{grid-template-columns:1fr}.stat-grid{grid-template-columns:1fr;gap:44px}}

/* Account button: a round gold button with a visitor's badge, next to the
   language, theme and Menu on one line, also on a phone. It links to
   /account; signed in, the badge is gold, signed out an outline. */
.auth-badge{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--text);transition:background .15s,color .15s,border-color .15s}
.auth-account.signed-in .auth-badge{background:var(--gold);border-color:var(--gold);color:var(--bg)}
.auth-account:hover .auth-badge,.auth-account[aria-current] .auth-badge{background:var(--text);border-color:var(--text);color:var(--bg)}
.auth-badge svg{display:block}
.account-menu{flex:none}
.account-menu summary{list-style:none;cursor:pointer;user-select:none}
.account-menu summary::-webkit-details-marker{display:none}
.account-menu[open] .auth-badge{background:var(--text);border-color:var(--text);color:var(--bg)}
/* The panel hangs under the header like the main menu (.main-nav) and sits on top of the page. */
.account-dropdown{position:absolute;right:max(24px,calc((100vw - var(--max))/2));top:100%;z-index:30;box-sizing:border-box;width:300px;max-width:calc(100vw - 32px);padding:0 16px;background:var(--panel);border:1px solid var(--line);line-height:1.4}
.account-menu[open] .account-dropdown{animation:unfold .2s cubic-bezier(.2,.8,.2,1) both}
.account-info{margin:0;padding:14px 6px;border-bottom:1px solid var(--line);color:var(--muted);font:600 10px/1.4 var(--ui);letter-spacing:.12em;text-transform:uppercase}
.account-info strong{display:block;margin-top:4px;color:var(--gold);font-size:13px;letter-spacing:.06em;text-transform:none;overflow-wrap:anywhere}
.account-dropdown a,.account-dropdown button{box-sizing:border-box;display:flex;align-items:center;width:100%;min-height:52px;margin:0;padding:0 6px;border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent;color:var(--text);font:600 11px/1.4 var(--ui);letter-spacing:.14em;text-transform:uppercase;text-align:left;text-decoration:none;opacity:.82;cursor:pointer}
.account-dropdown a:hover,.account-dropdown button:hover,.account-dropdown a:focus-visible,.account-dropdown button:focus-visible{color:var(--gold);opacity:1}
.account-dropdown a:focus-visible,.account-dropdown button:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.account-dropdown a[aria-current]{color:var(--gold)}
.account-dropdown #accountLogin,.account-dropdown #accountLogout{border-bottom:0}
.account-dropdown .account-admin-head{margin:0;padding:14px 6px 2px;color:var(--gold)}
@media(max-width:720px){.account-dropdown{left:16px;right:16px;width:auto;max-width:none;padding:0 8px}}
@media(prefers-reduced-motion:reduce){.account-menu[open] .account-dropdown{animation:none}}

.account-who{margin:0;padding:0 0 12px;border-bottom:1px solid var(--line);color:var(--muted);font:600 10px/1.4 var(--ui);letter-spacing:.12em;text-transform:uppercase}
.account-who strong{display:block;margin-top:4px;color:var(--gold);font-size:13px;letter-spacing:.06em;overflow-wrap:anywhere}

@media(max-width:380px){.nav-wrap{gap:12px}.header-actions{gap:8px}.brand-wordmark{height:32px}.theme-toggle{padding:4px}}

/* Language and theme buttons as round as the account button (32 px),
   with the line the language button already had. At the bottom, so it
   also overrides the smaller padding below 380 px. */
.lang-toggle,.theme-toggle{box-sizing:border-box;width:32px;height:32px;min-width:0;padding:0;border:1px solid var(--line);border-radius:50%;flex:none}
.theme-toggle:hover{border-color:var(--gold)}
/* Sun and moon are SVGs (not characters from the font, those are never
   exactly centred); the theme decides which one you see. */
.theme-icon{display:flex}
.theme-icon svg{display:block}
.theme-icon .moon,html[data-theme=light] .theme-icon .sun{display:none}
html[data-theme=light] .theme-icon .moon{display:block}
/* "MENU" is 41.625 px wide by itself; the round buttons to its left then
   sit on a fraction of a pixel, and the icon in them (on whole pixels)
   visibly moves off centre. A whole width, text on the right, so the
   word itself stays in the same place. */
.menu-toggle{width:44px;text-align:right;flex:none}
/* crashes: the crash reports from the game (admin only) */
.crash-list{display:grid;gap:18px}
.crash-report{padding:18px 20px;background:var(--card);border:1px solid var(--line)}
.crash-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 16px;margin:0 0 10px;color:var(--muted);font:600 11px/1.4 var(--ui);letter-spacing:.1em;text-transform:uppercase}
.crash-head strong{color:var(--gold)}
.crash-text{margin:0;white-space:pre-wrap;word-break:break-word;font:12px/1.5 ui-monospace,Menlo,Consolas,monospace;color:var(--text);max-height:420px;overflow:auto}

/* The hero with the trailer: the video in a wide frame on the right,
   below it on a phone; plays muted and loops. With reduced motion only
   the poster shows. */
.hero-grid{grid-template-columns:minmax(0,1fr) minmax(420px,46%)}
.hero-video video{display:block;width:100%;height:auto;border:1px solid var(--line);box-shadow:0 24px 60px rgba(0,0,0,.35);background:#1d242b}
.hero-video figcaption a{color:var(--gold)}
@media(prefers-reduced-motion:reduce){.hero-video video{pointer-events:none}}
@media(max-width:900px){.hero-grid{grid-template-columns:minmax(0,1fr) 300px}}
@media(max-width:720px){.hero-grid{grid-template-columns:1fr}.hero-screen.hero-video{width:100%}}
/* "How it plays": three screenshots with one sentence underneath */
.how-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 28px}
.how-grid figure{margin:0 0 28px;display:grid;grid-row:span 2;grid-template-rows:subgrid}
.how-grid img{display:block;width:100%;height:auto;border:1px solid var(--line);box-shadow:0 16px 40px rgba(0,0,0,.3)}
.how-grid figcaption{margin:0 0 16px;font-size:14px;line-height:1.55;color:var(--muted)}
.how-grid figcaption strong{display:block;color:var(--text);font-family:var(--serif);font-weight:500;font-size:20px;letter-spacing:-.01em;margin-bottom:6px}
@media(max-width:900px){.how-grid{grid-template-columns:1fr;gap:0}.how-grid figure{margin-bottom:34px}}
/* game screenshots */















/* The site belongs to the brand, with the add-ons for SAP Business One,
   KoonLearn and the game. */
/* The products are at the top of the menu, with the explanation in
   brackets, smaller and without capitals. */
.main-nav{line-height:1.4}@media(min-width:721px){.main-nav{width:300px}}
.main-nav a small{font-size:10px;letter-spacing:.04em;text-transform:none;color:var(--muted)}
/* The explanation on its own line under the name (fits 300 px). Every
   line equally high and as tight as the longest allows, content
   vertically centred; a long explanation breaks with a <br>. */
.main-nav a small{display:block;margin-top:2px;line-height:1.25}
.main-nav a,.main-nav a:first-child,.main-nav a:last-child{box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;height:52px;padding:0 6px}
.main-nav a:last-child{border-bottom:0}
/* No space above and below in the list, otherwise Home and Contact look higher than the rest. */
.main-nav{padding:0 16px}
@media(max-width:720px){.main-nav a,.main-nav a:first-child,.main-nav a:last-child{padding:0 8px}}
.main-nav a:hover small{color:inherit}
/* Homepage: the head without video, the watermark softly behind it. */
.hero-brand{min-height:0}
.hero-brand .hero-inner{padding:92px 0 84px}
.hero-brand h1{font-size:clamp(40px,5vw,68px)}
.hero-brand .hero-copy{max-width:600px}
/* A status label ("in development", "playable") on a card or in a heading. */
.status{display:inline-block;padding:6px 10px;border:1px solid var(--gold);border-radius:14px;color:var(--gold);font:600 10px/1 var(--ui);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.status.playable,.status.available{background:var(--gold);color:var(--bg)}
.page-hero .status{margin-bottom:22px}
/* The doors on the homepage: a card with an image (the game) or
   an icon. */
.door{display:flex;flex-direction:column;padding:0;overflow:hidden}




.door-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin-bottom:14px}
.door-head h3{font-size:30px;margin:0}


@media(max-width:720px){.door-head h3{font-size:26px}}
/* Add-on pages: the principles as a list */
.points{margin:0;padding:0;list-style:none;border-top:1px solid var(--line)}
.points li{padding:16px 0;border-bottom:1px solid var(--line);color:var(--muted);font-size:15px;line-height:1.6}
.points strong{display:block;color:var(--text);font-weight:600}
/* KoonScan page: head with buttons and phone, screens in a phone frame, reasons, price, FAQ */
.hero-buttons{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:30px 0 0}
.prose .hero-buttons{justify-content:flex-start;margin:24px 0}
.button.secondary{background:transparent;color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)}.button.secondary:hover{background:var(--gold);color:var(--bg)}
.page-hero.koonscan-hero .status,.page-hero.product-hero .status{white-space:normal;line-height:1.5}
.phone{margin:0}.phone img{display:block;width:100%;height:auto;border-radius:30px;border:6px solid var(--card);box-shadow:0 20px 50px rgba(0,0,0,.3);background:var(--card)}
.hero-phone{max-width:300px;margin:54px auto 0}
.screens{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 36px;margin-top:70px}
.screens>figure{display:grid;grid-row:span 2;grid-template-rows:subgrid;margin-bottom:36px}
.screens figcaption{margin:0 0 18px;font-size:14px;line-height:1.55;color:var(--muted)}
.screens figcaption strong{display:block;color:var(--text);font-family:var(--serif);font-weight:500;font-size:20px;letter-spacing:-.01em;margin-bottom:6px}
.reasons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:60px}
.reasons div{padding:30px 32px;background:var(--card);border:1px solid var(--line)}
.reasons h3{font-size:26px;line-height:1.15;margin-bottom:12px}.reasons p{margin:0;color:var(--muted);font-size:14px;line-height:1.65}
.price{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-bottom:26px}
.price-card{display:flex;flex-direction:column;gap:10px;padding:28px 26px;background:var(--panel);border:1px solid var(--line);border-top:2px solid var(--gold)}
.price-label{color:var(--gold);font:600 10px/1.3 var(--ui);letter-spacing:.16em;text-transform:uppercase}
.price-amount{color:var(--text);font-family:var(--serif);font-size:50px;line-height:1;letter-spacing:-.02em}
.price-unit{font-size:13px;line-height:1.5}
.comparison{font-size:14px;font-style:italic}
.points-head{font-family:var(--ui);font-weight:600;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin:0 0 14px}.points+.points-head{margin-top:34px}
.faq{border-top:1px solid var(--line)}.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;justify-content:space-between;gap:20px;align-items:baseline;padding:18px 0;cursor:pointer;list-style:none;color:var(--text);font-family:var(--serif);font-size:20px;letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}.faq summary::after{content:"+";flex:none;color:var(--gold);font-family:var(--ui);font-size:20px}.faq details[open] summary::after{content:"\2013"}
.faq summary:hover{color:var(--gold)}.faq p{margin:0 0 22px;font-size:15px;line-height:1.65}
@media(max-width:900px){.screens,.reasons{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){.hero-phone{max-width:250px;margin-top:40px}.screens{grid-template-columns:1fr;gap:0;margin-top:44px}.screens>figure,.screens.wide>figure{margin-bottom:30px}.screens .phone{max-width:270px;margin:0 auto 30px}.reasons{grid-template-columns:1fr;margin-top:40px}.reasons div{padding:24px}.price{grid-template-columns:1fr}.price-amount{font-size:42px}.faq summary{font-size:18px}}

/* The whole site in the line of the KoonScan page: the KoonFSM page with
   wide screens of the planning board next to the phones, and the
   homepage with product cards (image left, text right). */
.screen{margin:0}.screen img{display:block;width:100%;height:auto;border-radius:8px;border:1px solid var(--line);box-shadow:0 20px 50px rgba(0,0,0,.3);background:var(--card)}
.screen figcaption{margin:0 0 14px;color:var(--muted);font-size:14px;line-height:1.55;text-align:left}
.hero-screen-wide{max-width:980px;margin:54px auto 0}.hero-screen-wide figcaption{text-align:center;max-width:720px;margin:14px auto 0}
.screens.wide{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 36px}.screens.wide>figure{margin-bottom:40px}
.screens .screen figcaption strong{display:block;color:var(--text);font-family:var(--serif);font-weight:500;font-size:20px;letter-spacing:-.01em;margin-bottom:6px}
.products{display:grid;gap:18px}
.product{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:54px;align-items:center;padding:48px 56px;background:var(--card);border:1px solid var(--line)}
.product-image{display:block;text-decoration:none}.product-image .phone{max-width:250px;margin:0 auto}
.product-image.wide img{display:block;width:100%;height:auto;border-radius:8px;border:1px solid var(--line);box-shadow:0 20px 50px rgba(0,0,0,.3)}
.product-text{color:var(--muted);font-size:15px}.product-text .door-head{justify-content:flex-start;gap:12px 18px}.product-text .door-head h3{font-size:40px}
.product-sub{margin:0 0 16px;color:var(--gold);font:600 11px/1.4 var(--ui);letter-spacing:.16em;text-transform:uppercase}
.product-text>p{margin:0 0 22px}.product-text .points{margin-bottom:28px}.product-text .points li{padding:12px 0}
@media(max-width:900px){.product{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:36px;padding:36px}.product-text .door-head h3{font-size:32px}.screens.wide{grid-template-columns:1fr}}
@media(max-width:720px){.product{grid-template-columns:1fr;gap:28px;padding:26px 22px}.product-image .phone{max-width:220px}.product-text .door-head h3{font-size:28px}.hero-screen-wide{margin-top:40px}}

/* Knowledge base: lists and the product card under an article */
.article-text ul,.article-text ol{padding-left:22px;margin:0 0 22px}.article-text li{font-size:17px;line-height:1.7;margin:0 0 8px}.article-text h3{font-size:21px;line-height:1.3;margin:34px 0 10px}.article-text p.article-source{font-size:14px;color:var(--muted)}

/* terms: the product annex as a table, scrolling horizontally on a narrow screen */
.table-scroll{overflow-x:auto;margin:0 0 22px}.terms-table{min-width:640px;font-size:14px}.terms-table th,.terms-table td{text-align:left;vertical-align:top;padding:10px 12px 10px 0}

/* Language menu: under the language button a column of round buttons
   unfolds with the other four languages (main.js hides the current one
   through aria-current). Hangs from the button itself, centred below. */
.lang-menu{position:relative}
.lang-menu summary{list-style:none;user-select:none}
.lang-menu summary::-webkit-details-marker{display:none}
.lang-menu[open] .lang-toggle{border-color:var(--gold);color:var(--gold)}
.lang-dropdown{position:absolute;left:50%;top:calc(100% + 10px);transform:translateX(-50%);display:flex;flex-direction:column;gap:8px;z-index:30}
.lang-dropdown a{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:1px solid var(--line);border-radius:50%;background:var(--panel);color:var(--text);font:700 11px/1 var(--ui);letter-spacing:.04em;text-decoration:none;box-shadow:0 6px 16px rgba(0,0,0,.25);animation:lang-in .18s cubic-bezier(.2,.8,.2,1) both}
.lang-dropdown a:nth-child(2){animation-delay:.025s}.lang-dropdown a:nth-child(3){animation-delay:.05s}.lang-dropdown a:nth-child(4){animation-delay:.075s}.lang-dropdown a:nth-child(5){animation-delay:.1s}
.lang-dropdown a:hover,.lang-dropdown a:focus-visible{border-color:var(--gold);color:var(--gold)}
.lang-dropdown a[aria-current]{display:none}
@keyframes lang-in{from{opacity:0;transform:translateY(-22px) scale(.7)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.lang-dropdown a{animation:none}}

/* KoonLearn: the two tracks side by side, with a list in the card */
.reasons.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.reasons.two .points-head{margin:0 0 10px}
.reasons.two .points{margin:18px 0 0}
.reasons.two .points li{padding:10px 0;font-size:15px}
.reasons.two+.section-note{margin-top:22px}
@media(max-width:720px){.reasons.two{grid-template-columns:1fr}}

/* Menu with the add-on group. Below 1100 px: the drop-down menu behind
   "Menu", with "Add-ons" as a collapsible group (status on the right).
   From 1100 px: the menu is written out in the header and "Add-ons"
   opens a wide panel with four cards. */
.nav-group>summary{list-style:none;cursor:pointer;box-sizing:border-box;position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;height:52px;padding:0 6px;border-bottom:1px solid var(--line);font:600 11px/1.4 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--text);opacity:.82}
.nav-group>summary::-webkit-details-marker{display:none}
.nav-group>summary small{display:block;margin-top:2px;font-size:10px;line-height:1.25;letter-spacing:.04em;text-transform:none;color:var(--muted)}
.nav-group>summary::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);font-size:18px;line-height:1;color:var(--gold)}
.nav-group[open]>summary::after{content:"\2212"}
.nav-group>summary:hover{color:var(--gold);opacity:1}
.nav-sub{margin:4px 0 6px 6px;padding-left:12px;border-left:2px solid var(--gold);border-bottom:1px solid var(--line)}
.main-nav a.nav-addon{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;align-content:center;column-gap:14px;height:auto;min-height:52px;padding:8px 6px;box-sizing:border-box;border-bottom:1px solid var(--line)}
.main-nav a.nav-addon:last-child{border-bottom:0}
.nav-name{grid-column:1;grid-row:1}
.nav-what{grid-column:1;grid-row:2;margin-top:2px;font:500 10px/1.25 var(--sans);letter-spacing:.04em;text-transform:none;color:var(--muted)}
.nav-status{grid-column:2;grid-row:1/3;align-self:center;padding:3px 8px;border:1px solid var(--line);border-radius:10px;font:600 8px/1.2 var(--ui);letter-spacing:.12em;color:var(--muted);white-space:nowrap}
.nav-status.available{border-color:var(--gold);color:var(--gold)}
.nav-line,.nav-short{display:none}
@media(max-width:720px){.main-nav a.nav-addon{padding:8px}.nav-group>summary{padding:0 8px}}

@media(min-width:1100px){
.menu-toggle{display:none}
.nav-wrap{gap:24px}
.main-nav{order:1;margin-left:auto;position:static;display:flex;flex-direction:row;align-items:center;gap:26px;width:auto;padding:0;background:none;border:0;line-height:1}
.header-actions{order:2}
.main-nav a,.main-nav a:first-child,.main-nav a:last-child{height:auto;padding:0;border:0}
.main-nav a small,.nav-group>summary small,.nav-lang{display:none}
.nav-short{display:inline}
.nav-group>summary{flex-direction:row;align-items:center;height:auto;padding:0;border:0;gap:6px}
.nav-group>summary::after{position:static;transform:none}
.nav-group>summary::after,.nav-group[open]>summary::after{content:"\25BE";font-size:11px}
.nav-group[open]>summary{color:var(--gold);opacity:1}
.nav-sub{position:absolute;top:100%;left:0;right:0;margin:0;padding:22px max(24px,calc((100vw - var(--max))/2));border:0;border-bottom:1px solid var(--line);background:var(--panel);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;z-index:30;box-shadow:0 18px 40px rgba(0,0,0,.25)}
.main-nav a.nav-addon{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;height:auto;padding:18px 20px;border:1px solid var(--line);background:var(--card);opacity:1;text-transform:none;letter-spacing:0}
.main-nav a.nav-addon:last-child{border:1px solid var(--line)}
.main-nav a.nav-addon:hover{border-color:var(--gold)}
.nav-status{order:1;align-self:flex-start;text-transform:uppercase}
.nav-name{order:2;margin:10px 0 6px;font:500 22px/1.15 var(--serif);color:var(--text)}
.nav-line{order:3;display:block;font:400 13px/1.5 var(--sans);color:var(--muted)}
.nav-what{display:none}
.main-nav a.nav-addon:hover .nav-name{color:var(--gold)}
}

/* Unfolding: menu, add-on group and the add-on panel unfold quickly
   from top to bottom; closing is instant (only opening animates). */
@keyframes unfold{from{clip-path:inset(0 0 100% 0);opacity:.3;transform:translateY(-4px)}to{clip-path:inset(0 0 0 0);opacity:1;transform:none}}
.main-nav.open,.nav-group[open]>.nav-sub{animation:unfold .2s cubic-bezier(.2,.8,.2,1) both}
@media(prefers-reduced-motion:reduce){.main-nav.open,.nav-group[open]>.nav-sub{animation:none}}
.account-note{margin-top:28px}

/* KoonSystems (SPEC §3 "Stijl", concept 01-11-2026): small additions taken
   from the logo (bronze tile, rounded corners, spaced capitals, a line).
   Shared by both sites; the business homepage drops the watermark. */
:root{--bronze:#7D5F37;--ivory:#EDE8E1;--radius:10px;
  --bronze-gradient:linear-gradient(135deg,color-mix(in srgb,var(--bronze),white 28%),var(--bronze) 45%,color-mix(in srgb,var(--bronze),black 28%))}
/* header: wordmark image per theme (light: all bronze, dark: all gold) and the portal button */
.brand-img{display:block;height:52px;width:auto}
.brand-img-dark{display:none}
html:not([data-theme=light]) .brand-img-light{display:none}
html:not([data-theme=light]) .brand-img-dark{display:block}
.portal-button{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;flex:none;border:1px solid var(--line);border-radius:50%;color:var(--gold);text-decoration:none}
.portal-button:hover,.portal-button:focus-visible{border-color:var(--gold)}
.site-header{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);background:color-mix(in srgb,var(--bg) 92%,transparent)}
.main-nav a{letter-spacing:.14em}
/* hero: no glow on the business homepage, a line before the eyebrow */
.hero-plain:before{display:none}
.eyebrow{display:flex;align-items:center;gap:14px;letter-spacing:.24em}
.eyebrow::before{content:"";width:28px;height:2px;background:var(--gold);flex:none}
h1{letter-spacing:-.02em}
.hero-copy{font-size:16px}
/* buttons and labels: bronze gradient, soft corner, ivory text */
.button{background:var(--bronze-gradient);color:var(--ivory);border-radius:var(--radius);padding:15px 22px;box-shadow:0 6px 18px rgba(0,0,0,.12)}
.button:hover{background:var(--bronze-gradient);filter:brightness(1.06)}
.button.secondary{box-shadow:inset 0 0 0 1px var(--gold)}
.text-link{border-bottom-color:var(--line);padding-bottom:12px}
.text-link:hover{border-bottom-color:var(--gold)}
/* a button with text links is always a column: the button on top, the links
   as a list of equal rows with a line between them and an arrow on the right */
.hero-actions,.button-row:has(.text-link~.text-link){flex-direction:column;flex-wrap:nowrap;align-items:flex-start;gap:0}
.hero-actions .button,.button-row:has(.text-link~.text-link) .button{margin-bottom:30px}
.hero-actions .text-link,.button-row:has(.text-link~.text-link) .text-link{display:flex;justify-content:space-between;width:min(100%,360px);padding:15px 0;border-top:1px solid var(--line);border-bottom:0}
.hero-actions .text-link:last-child,.button-row:has(.text-link~.text-link) .text-link:last-child{border-bottom:1px solid var(--line)}
.hero-actions .text-link:hover,.button-row .text-link:hover{color:var(--gold)}
.status{border-radius:var(--radius);border-color:var(--gold)}
.status.available,.status.playable{background:var(--bronze-gradient);color:var(--ivory);border-color:transparent}
/* cards: rounded like the tile */
.door,.card,.product-card{border-radius:var(--radius);overflow:hidden}
.door{border:1px solid var(--line)}
.section{scroll-margin-top:80px}
/* footer: a line above, the trade name in normal case */
.site-footer{border-top:1px solid var(--line);padding-top:36px}
.footer-trade{color:var(--muted);text-transform:none;letter-spacing:.04em}
@media(max-width:720px){.brand-img{height:40px}}