/* The website (Django pages under pages/templates/pages/): an integrator's brochure pages on the shared
   tokens in cm.css, so light and dark follow the app. Page sections are .mk-* inside <main class="mk">. */

/* site bar: the stacked lockup, with the square mark alone below 360px (the lockup is 140px wide at 40px high) */
/* flex:none: the bar is a flex item of body.site, and on a tall page it would shrink to its content and crop the logo */
.gbar-site{flex:none; gap:12px; padding-left:max(16px, env(safe-area-inset-left, 0px)); padding-right:max(16px, env(safe-area-inset-right, 0px))}
.gbar-site .gb-home{flex:none}
.gbar-site .site-logo{height:40px; width:auto}
.site-mark{display:none; width:36px; height:36px}
.gbar-site .gb-tabs > *{font-size:14px}
@media (max-width:359px){
  .gbar-site .site-logo{display:none !important}
  .site-mark{display:block}
}
@media (max-width:480px){ .site-cta{display:none} }
.site-foot{padding-left:max(16px, env(safe-area-inset-left, 0px)); padding-right:max(16px, env(safe-area-inset-right, 0px))}
.site-foot-nav{display:flex; gap:16px; flex-wrap:wrap}
.site-foot-nav a{color:var(--muted)}
.site-foot-nav a:hover{color:var(--fg)}

/* page frame */
.site-main.mk{padding-top:0; font-size:16px; line-height:1.6; padding-left:max(16px, env(safe-area-inset-left, 0px)); padding-right:max(16px, env(safe-area-inset-right, 0px))}
.mk h1{font-size:clamp(34px, 5.4vw, 56px); line-height:1.04; font-weight:700; letter-spacing:-.025em}
.mk h2{font-size:clamp(24px, 3vw, 32px); line-height:1.15; font-weight:700; letter-spacing:-.015em}
.mk h3{font-size:18px; line-height:1.3; font-weight:600; letter-spacing:-.005em}
.mk p{margin:0; max-width:65ch}
.mk-eyebrow{font-family:var(--font-num); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.mk-lede{font-size:clamp(17px, 1.5vw, 19px); color:var(--muted)}
.mk-lede.narrow{max-width:44ch}
.mk-fine{font-size:13px; color:var(--muted); margin-top:12px !important}
.mk-stack{display:flex; flex-direction:column; gap:20px; min-width:0}
.mk-stack.tight{gap:8px}
.mk-btns{display:flex; gap:12px; flex-wrap:wrap}
.mk .btn.lg{height:44px; padding:0 18px; font-size:15px}

.mk-band{padding-block:clamp(44px, 6vw, 80px)}
.mk-band + .mk-band{border-top:1px solid var(--line)}
.mk-band.flush{padding-top:0; border-top:0 !important}
.mk-head{display:flex; justify-content:space-between; align-items:flex-end; gap:20px 32px; flex-wrap:wrap; margin-bottom:32px}
.mk-intro{display:flex; flex-direction:column; gap:20px; max-width:52rem}

/* hero */
.mk-hero{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px, 4vw, 56px); align-items:center}
.mk-chips{display:flex; gap:8px; flex-wrap:wrap; font-family:var(--font-num); font-size:12.5px}
.mk-chips span{border:1px solid var(--line); border-radius:var(--r); padding:6px 10px; background:var(--panel); color:var(--muted)}
.mk-drawing{margin:0; min-width:0; background:var(--panel); border:1px solid var(--line); border-radius:var(--r2); overflow:hidden}
.mk-drawing svg{display:block; width:100%; height:auto; background:var(--canvas)}
.mk-titleblock{display:grid; grid-template-columns:repeat(3, 1fr); border-top:1px solid var(--line); font-family:var(--font-num); font-size:12px; line-height:1.35}
.mk-titleblock div{padding:10px 12px; display:flex; flex-direction:column; gap:3px; min-width:0}
.mk-titleblock div + div{border-left:1px solid var(--line)}
.mk-titleblock span{color:var(--muted); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase}

/* applications */
.mk-apps{display:grid; grid-template-columns:repeat(3, 1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r2); overflow:hidden}
.mk-app{background:var(--panel); padding:24px; display:flex; flex-direction:column; gap:10px; min-width:0}
.mk-app p{color:var(--muted); font-size:15px}
.mk-spec{margin-top:auto; padding-top:12px; border-top:1px dashed var(--line); font-family:var(--font-num); font-size:12.5px; color:var(--muted)}

/* process */
.mk-process{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, 1fr); gap:24px; counter-reset:phase}
.mk-process li{display:flex; flex-direction:column; gap:8px; padding-top:16px; border-top:2px solid var(--fg); min-width:0}
.mk-process li::before{counter-increment:phase; content:"Phase " counter(phase); font-family:var(--font-num); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent)}
.mk-process p{color:var(--muted); font-size:15px}

/* platforms table */
.mk-table{min-width:560px; font-size:14.5px}
.mk-table td{height:44px}

/* blog */
.mk-posts{border-top:1px solid var(--line)}
.mk-post-row{display:grid; grid-template-columns:130px 1fr auto; gap:24px; align-items:baseline; padding-block:22px; border-bottom:1px solid var(--line); color:var(--fg)}
.mk-post-row > *{min-width:0}
.mk-post-row:hover{text-decoration:none}
.mk-post-row:hover h3{color:var(--accent)}
.mk-post-row time{color:var(--muted); font-size:13px}
.mk-post-row p{color:var(--muted); font-size:15px; margin-top:4px}
.mk-article{max-width:44rem}
.mk-article h1{font-size:clamp(30px, 4.4vw, 44px); margin-top:12px}
.mk-back{font-size:14px; color:var(--muted)}
.mk-post-meta{margin-top:24px; color:var(--muted); font-size:14px}
.mk-body{display:flex; flex-direction:column; gap:16px; margin-top:28px; font-size:17px}
.mk-body h2{font-size:22px; margin-top:12px}
.mk-body ul, .mk-list{margin:0; padding-left:20px; display:grid; gap:6px; max-width:65ch}
.mk-list{color:var(--muted)}

/* about */
.mk-two{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px, 5vw, 64px)}
.mk-principles{display:grid; gap:20px}
.mk-principles div{display:flex; flex-direction:column; gap:4px; padding-left:16px; border-left:2px solid var(--accent)}
.mk-principles p{color:var(--muted)}
.mk-facts{grid-template-columns:auto 1fr; gap:12px 24px; font-size:15px}
.mk-facts dt{font-family:var(--font-num); font-size:12px; letter-spacing:.08em; text-transform:uppercase; padding-top:2px}

/* call to action band */
.mk-cta{display:flex; justify-content:space-between; align-items:center; gap:20px 32px; flex-wrap:wrap; margin-block:8px 24px; padding:clamp(24px, 4vw, 40px); border-radius:var(--r2); background:var(--accent); color:var(--on-accent)}
.mk-cta p{opacity:.85}
.mk-cta .btn.primary{background:var(--on-accent); border-color:var(--on-accent); color:var(--accent)}
.mk-cta .btn.primary:hover{opacity:.9}
.mk-cta .btn.primary:active{background:var(--on-accent); opacity:.8}

/* contact */
.mk-contact{display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(28px, 5vw, 64px); align-items:start}
.mk-email{font-size:16px; user-select:all}
.mk-form{padding:clamp(20px, 3vw, 28px); display:grid; gap:16px; min-width:0}
.mk-row2{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.mk-field{display:flex; flex-direction:column; gap:6px; min-width:0}
.mk-field label{font-size:13.5px; font-weight:600}
.mk-field input, .mk-field select, .mk-field textarea{width:100%; font-size:15px; padding:10px 12px; border:1px solid var(--line); border-radius:var(--r); background:var(--bg); color:var(--fg)}
.mk-field textarea{resize:vertical; min-height:130px}
.mk-field input:focus, .mk-field select:focus, .mk-field textarea:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent)}
.mk-hp{position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden}

@media (max-width:880px){
  .mk-hero, .mk-two, .mk-contact{grid-template-columns:1fr}
  .mk-apps, .mk-process{grid-template-columns:1fr 1fr}
}
@media (max-width:560px){
  .mk-apps, .mk-process, .mk-row2{grid-template-columns:1fr}
  .mk-post-row{grid-template-columns:1fr; gap:6px}
  .mk-post-row .pill{justify-self:start}
  .mk-titleblock{grid-template-columns:1fr 1fr}
  .mk-titleblock div:nth-child(3){grid-column:1 / -1; border-left:0; border-top:1px solid var(--line)}
}

@media (prefers-reduced-motion:no-preference){
  .mk-reach{stroke-dasharray:4 5; animation:mk-dash 18s linear infinite}
  @keyframes mk-dash{to{stroke-dashoffset:-180}}
  .mk-arm{transform-origin:200px 170px; animation:mk-sweep 7s ease-in-out infinite}
  @keyframes mk-sweep{0%, 100%{transform:rotate(-40deg)} 50%{transform:rotate(55deg)}}
}