/* Kinobi marketing shell
   One visual and type system shared by Home, Solutions and How it works. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/inter-latin.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/inter-latin.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/inter-latin.woff2) format('woff2')}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/bricolage-grotesque-latin.woff2) format('woff2')}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/geist-mono-latin.woff2) format('woff2')}

.marketing-page{
  --fg:#1c1917;--fg2:#57534e;--fg3:#746d65;--fg4:#c7c2b8;
  --bg:#faf8f5;--white:#fff;--border:#ebe6de;--border2:#ddd6cb;
  --accent:#ea580c;--accent-light:#c2410c;--accent-muted:#c2410c;
  --accent-btn:#c2410c;--accent-btn-hover:#9a3412;
  --panel-dark:#0d0d0f;--panel-edge:#2b2b30;--cream:#fef3c7;
  --m-display:clamp(2rem,4vw,3rem);      /* 32–48 */
  --m-title:clamp(1.5rem,2.6vw,2rem);   /* 24–32 */
  --m-card:1.0625rem;                    /* 17 */
  --m-body:1rem;                         /* 16 */
  --m-small:.875rem;                     /* 14 */
  --m-nav:.8125rem;                      /* 13 */
  --m-label:.6875rem;                    /* 11 */
  --sans:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  --mono:'Geist Mono','SF Mono','Menlo',monospace;
  margin:0;background:var(--bg);color:var(--fg);font-family:var(--sans);
  font-size:var(--m-body);line-height:1.65;color-scheme:light;
}
.marketing-page *{box-sizing:border-box}
.marketing-page ::selection{background:rgba(234,88,12,.18)}
.marketing-page a:focus-visible,.marketing-page button:focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;border-radius:4px
}

/* Shared navigation: brand stands alone; page links form one group on the right. */
.marketing-page .site-nav{
  width:min(1120px,100%);margin:0 auto;padding:18px 40px 0;display:flex;
  align-items:center;justify-content:space-between;gap:28px
}
.marketing-page .site-logo{
  flex:0 0 auto;font-family:'Bricolage Grotesque',sans-serif;font-size:1.375rem;
  font-weight:800;line-height:1;letter-spacing:-.03em;color:var(--fg);text-decoration:none;
  display:inline-flex;align-items:center;gap:7px;
  --icon-box:var(--accent);--icon-border:var(--accent);--icon-stroke:#fff
}
.marketing-page .site-nav-actions{display:flex;align-items:center;justify-content:flex-end;gap:24px}
.marketing-page .site-nav-menu{display:flex;align-items:center;gap:22px}
.marketing-page .site-nav-link{
  min-height:32px;display:inline-flex;align-items:center;font-size:var(--m-nav);
  color:var(--fg2);text-decoration:none;white-space:nowrap
}
.marketing-page .site-nav-link:hover,.marketing-page .site-nav-link[aria-current='page']{color:var(--fg)}
.marketing-page .site-button{
  min-height:36px;display:inline-flex;align-items:center;justify-content:center;padding:8px 17px;
  border-radius:999px;border:1px solid var(--accent-btn);background:var(--accent-btn);color:#fff;
  font-size:.75rem;font-weight:500;line-height:1.2;text-decoration:none;white-space:nowrap;
  transition:background .18s,border-color .18s,color .18s
}
.marketing-page .site-button:hover{background:var(--accent-btn-hover);border-color:var(--accent-btn-hover)}
.marketing-page .site-button--ghost{background:transparent;border-color:var(--border2);color:var(--fg2)}
.marketing-page .site-button--ghost:hover{background:var(--white);border-color:#b8afa3;color:var(--fg)}

/* Shared marketing typography. No display text exceeds 48px. */
.marketing-page .marketing-h1{
  margin:0;font-size:var(--m-display);font-weight:400;letter-spacing:-.04em;
  line-height:1.08;max-width:17ch;text-wrap:balance
}
.marketing-page .marketing-h1 em{font-style:normal;font-weight:600;color:var(--accent-light)}
.marketing-page .marketing-h2{
  margin:0;font-size:var(--m-title);font-weight:500;letter-spacing:-.03em;
  line-height:1.15;text-wrap:balance
}
.marketing-page .marketing-h3{margin:0;font-size:var(--m-card);font-weight:600;line-height:1.35}
.marketing-page .marketing-lede{
  margin:20px 0 0;max-width:58ch;font-size:var(--m-body);line-height:1.7;color:var(--fg2)
}
.marketing-page .marketing-copy{font-size:var(--m-small);line-height:1.75;color:var(--fg2)}
.marketing-page .marketing-label{
  margin:0 0 16px;font-family:var(--mono);font-size:var(--m-label);line-height:1.2;
  letter-spacing:.12em;text-transform:uppercase;color:var(--accent-light)
}
.marketing-page .marketing-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:28px}
.marketing-page .marketing-wrap{width:min(1120px,100%);margin:0 auto;padding-left:40px;padding-right:40px}
.marketing-page .marketing-section{padding-top:104px}

/* Campaign-channel rail. These marks identify media destinations; they are
   deliberately separated from customer proof so they cannot read as clients. */
.marketing-page .channel-rail{
  width:min(1120px,100%);margin:0 auto;padding:44px 40px 0
}
.marketing-page .channel-rail-inner{
  display:grid;grid-template-columns:minmax(170px,.62fr) minmax(0,1.38fr);gap:36px;
  align-items:center;padding:24px 0;border-top:1px solid var(--border2);border-bottom:1px solid var(--border)
}
.marketing-page .channel-rail-copy{margin:0}
.marketing-page .channel-rail-copy strong{
  display:block;font-size:var(--m-small);font-weight:600;color:var(--fg);line-height:1.45
}
.marketing-page .channel-rail-copy span{
  display:block;margin-top:5px;font:var(--m-label)/1.5 var(--mono);letter-spacing:.06em;
  text-transform:uppercase;color:var(--fg3)
}
.marketing-page .channel-brands{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.marketing-page .channel-brand{
  min-height:52px;display:flex;align-items:center;justify-content:center;gap:9px;padding:10px 12px;
  border:1px solid var(--border);border-radius:10px;background:var(--white);color:var(--fg);
  font-size:.8125rem;font-weight:600;line-height:1;white-space:nowrap
}
.marketing-page .channel-brand svg{width:23px;height:23px;display:block;flex:0 0 auto}
.marketing-page .channel-legal{
  grid-column:2;margin:2px 0 0;font-size:.625rem;line-height:1.5;color:var(--fg3)
}

/* Reconcile the established homepage with the same shell and scale. */
.marketing-page .hero-zone{background:#fffaf5;background-image:none;color:var(--fg)}
.marketing-page .hero-zone .logo{color:var(--fg);--icon-box:var(--accent);--icon-border:var(--accent);--icon-stroke:#fff}
.marketing-page .hero-zone .nav-link{color:var(--fg2)}
.marketing-page .hero-zone .nav-link:hover{color:var(--fg)}
.marketing-page .hero-zone .hero h1{font-size:var(--m-display);max-width:17ch;color:var(--fg)}
.marketing-page .hero-zone .hero h1 em{color:var(--accent-light)}
.marketing-page .hero-zone .hero-p{font-size:var(--m-body);color:var(--fg2)}
.marketing-page .hero-zone .form-consent{font-size:var(--m-small);color:var(--fg3)}
.marketing-page .hero-zone .hero-more a{font-size:.75rem;color:var(--fg3)}
.marketing-page .hero-zone .btn-dark{background:var(--accent-btn);color:#fff;border-color:var(--accent-btn)}
.marketing-page .hero-zone .btn-dark:hover{background:var(--accent-btn-hover);border-color:var(--accent-btn-hover)}
.marketing-page .system-head h2{font-size:var(--m-title);max-width:18ch}

@media(max-width:760px){
  .marketing-page .site-nav{padding:16px 20px 0}
  .marketing-page .site-nav-menu{display:none}
  .marketing-page .site-nav-actions{gap:10px}
  .marketing-page .marketing-wrap{padding-left:20px;padding-right:20px}
  .marketing-page .marketing-section{padding-top:72px}
  .marketing-page .marketing-actions{margin-top:24px}
  .marketing-page .channel-rail{padding:36px 20px 0}
  .marketing-page .channel-rail-inner{grid-template-columns:1fr;gap:18px;padding:22px 0}
  .marketing-page .channel-brands{grid-template-columns:1fr 1fr}
  .marketing-page .channel-legal{grid-column:1}
}
@media(max-width:380px){
  .marketing-page .site-logo{font-size:1.25rem}
  .marketing-page .site-button{padding-left:14px;padding-right:14px}
}
@media(prefers-reduced-motion:reduce){
  .marketing-page *,.marketing-page *::before,.marketing-page *::after{transition:none!important;animation:none!important}
}