/* Clanbeat holding page. Live-site language: Montserrat bold sentence-case headings, yellow #FEE661, black ink, thick bar under the headline.
   Design: Kadri's onepager (Drive "Clanbeat onepager", 2026-10-29), ported as-is; fonts self-hosted instead of Google Fonts. */
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/montserrat-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/montserrat-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/montserrat-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Lato';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/lato-latin-700-normal.woff2) format('woff2')}

:root{--sun:#FEE661;--sun-deep:#F7D84A;--ink:#000;--ink-2:#1E0E1F;--paper:#FFFFFF;--mist:#FAFAFA;
  --display:'Montserrat','PT Sans','Helvetica Neue',Arial,sans-serif;--ui:'Lato','PT Sans','Helvetica Neue',Arial,sans-serif;color-scheme:light}
*{box-sizing:border-box}html,body{margin:0}
body{background:var(--paper);color:var(--ink);font-family:var(--display);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
h1{margin:0;font-weight:700;line-height:1.12;text-wrap:balance}
.sub{margin:0;line-height:1.6;text-wrap:pretty}
.contact-link{font-size:15px;text-decoration:none;border-bottom:1px solid rgba(0,0,0,.35);padding-bottom:1px}
.contact-link:hover,.contact-link:focus-visible{border-bottom-color:var(--ink)}
.bar::after{content:"";display:block;width:110px;height:6px;margin-top:18px}

/* Single-column website hero: header row, text leads on the left, the check-in card supports on the right. */
.d2{min-height:100svh;display:grid;grid-template-rows:auto 1fr auto;background:var(--paper);overflow-x:clip}
.wrap{width:100%;max-width:1180px;margin:0 auto}
.d2 header .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-block:28px}
.d2 .logo{width:min(210px,52vw);height:auto;display:block}
.d2 .hero{display:grid;align-items:center}
.d2 .hero .wrap{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.85fr);gap:clamp(32px,6vw,96px);align-items:center;padding-block:clamp(32px,6vh,80px)}
.d2 .c{display:grid;gap:26px;max-width:620px}
.d2 h1{font-size:clamp(34px,5vw,64px);line-height:1.08}
.d2 h1.bar::after{background:var(--sun)}
.d2 .sub{font-size:clamp(17px,1.6vw,20px);max-width:52ch}
.d2 .visual{position:relative;display:grid;place-items:center;padding:28px 0}
.d2 .visual::before{content:"";position:absolute;width:min(380px,92%);aspect-ratio:1;border-radius:50%;background:var(--sun);left:50%;top:50%;transform:translate(-46%,-50%)}
.card{position:relative;width:min(320px,100%);background:var(--paper);border-radius:18px;padding:20px 20px 18px;box-shadow:0 18px 44px rgba(120,90,0,.16);transform:rotate(-2deg)}
.card .q-meta{font-family:var(--ui);font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:#6b665a}
.card .q{margin:6px 0 14px;font-weight:700;font-size:15.5px;line-height:1.35}
.scale{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.scale span{aspect-ratio:1;border-radius:50%;border:2px solid #E6E3D8}
.scale span.on{background:var(--sun);border-color:var(--ink)}
.ends{display:flex;justify-content:space-between;margin-top:6px;font-size:11px;color:#6b665a}
.reply{margin:16px -4px 0 28px;background:var(--ink);color:var(--paper);border-radius:16px 16px 4px 16px;padding:11px 13px;font-size:13px;line-height:1.45;transform:rotate(2deg)}
.reply b{color:var(--sun);font-weight:700}
.d2 footer .wrap{border-top:1px solid #EEE;padding-block:22px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:14px}
.d2 .gutter2{padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
@media (max-width:860px){
  .d2 .hero .wrap{grid-template-columns:1fr;padding-block:12px 40px}
  .d2 .visual{padding:12px 0 8px}
  .d2 .visual::before{width:min(330px,92%);transform:translate(-40%,-50%)}
  .card{width:min(280px,100%)}
}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}