/* =========================================================
   AUTH THEME (Kivy-style login + register look)
   ========================================================= */
:root{
  --ink:#fefdfb;
  --muted:#cfd7ee;
  --glass:#0c1531cc; /* translucent panel */
  --border:#2a3d7a;
  --focus:#58a6ff;
  --accent:#0561f5;
  --accent-2:#60a5fa;
  --danger:#ff6b81;
}

*{box-sizing:border-box}
html,body{height:100%}

/* Safe area for notched devices (mobile) */
body{
  margin:0;
  font:16px/1.4 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--ink);
  background:#0a1024 url("login_img.jpg") no-repeat center/cover fixed;
  position:relative;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
}

.backdrop{
  position: fixed;
  inset: 0;
  background: radial-gradient(1000px 600px at 70% -10%, rgba(192, 126, 13, 0.35), rgba(5,8,22,0.88));
  backdrop-filter: blur(1px);
  z-index: 0;
  pointer-events: none;
}

.center{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.panel{
  width:min(360px,92vw);
  background:var(--glass);
  border:1px solid var(--border);
  border-radius:18px;
  padding:22px 22px 18px;
  box-shadow:0 18px 42px rgba(0,0,0,0.45);
}

.panel.secondary{ width:min(720px,96vw); }

.logo-wrap{ text-align:center; margin-bottom:6px;}
.logo{
  width:220px;
  height:110px; object-fit:contain;
  border-radius:10px;
  box-shadow:0 6px 24px rgba(0,0,0,0.4);
}

/* Auth titles (scoped so it doesn't affect marketing pages) */
body:not(.marketing) h1,
body:not(.marketing) .title{
  margin: 10px;
  font-weight: 700;
  font-size: 32px;
  font-family: Arial, sans-serif;
  letter-spacing: 0.3px;
  text-align: center;
  color: var(--accent);
}

body:not(.marketing) .subtitle{
  margin: 3px;
  color: var(--accent);
  font-family: Arial, sans-serif;
  text-align: center;
}

.subtitle{
  margin:3;
  color:var(--accent);
  font-family: "Arial";
  text-align:center;
}

.flash{
  font-weight:700;
  text-align:center;
  color:var(--danger)
}

.form{ display:grid; gap:10px; margin-top:10px; }

/* Auth labels default (ONLY on non-marketing pages) */
body:not(.marketing) label{
  font-size:13px;
  color:var(--muted);
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="file"],
select,
textarea{
  background:#0b1433;
  color:var(--ink);
  border:1px solid #22346d;
  padding:12px 14px;
  border-radius:12px;
  outline:none;
  transition:border-color .15s, box-shadow .15s;
  -webkit-appearance: none;
  appearance: none;
}

input:focus, select:focus, textarea:focus{
  border-color:var(--focus);
  box-shadow:0 0 0 3px rgba(88,166,255,0.25);
}

.btn{
  appearance:none;
  border:1px solid #2b4ea5;
  background:linear-gradient(180deg,var(--accent),var(--accent-2));
  color:white;
  font-weight:700;
  font-family: Arial;
  padding:12px 14px;
  border-radius:12px;
  cursor:pointer;
  transition:transform .04s, filter .2s;
}
.btn:hover{ filter:brightness(1.06); }
.btn:active{ transform:translateY(1px); }
.btn[disabled]{ opacity:.65; pointer-events:none; }

.btn.outline{
  background:transparent;
  border-color:#5f86ff88;
  text-align: center;
  text-decoration: none;
}

.msg{ min-height:20px; margin:4px 2px 0; }
.msg.error{ color:var(--danger); }
.msg.good{ color:#7ee6b9; }

.muted{ color:var(--muted); }
.actions{ display:flex; gap:8px; margin:8px 0 12px; }

.code{
  background:#0a122e;
  border:1px solid #1f2c56;
  border-radius:12px;
  padding:12px;
  max-height:320px;
  overflow:auto;
  color:#b8c7ff;
}

#dwDate{
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f86ff' stroke-width='2'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px 18px;
}
#dwDate::-webkit-calendar-picker-indicator{
  opacity: 0 !important;
  cursor: pointer;
}

/* =========================================================
   MARKETING + APP THEME (Square-like)
   Only active when <body class="marketing ...">
   ========================================================= */
body.marketing{
  background:#ffffff;
  color:#0f172a;
}

/* stop auth positioning/background on marketing pages */
body.marketing .backdrop{ display:none; }
body.marketing .center{
  position: static;
  top:auto; left:auto; transform:none;
}

body.marketing .container{
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto;
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
}

/* marketing muted */
body.marketing .muted{ color:#475569; }

/* marketing flash */
body.marketing .flash{
  margin: 16px 0;
  padding: 12px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #f8fafc;
  color:#0f172a;
  font-weight: 650;
  text-align:left;
}

/* nav */
body.marketing .nav{
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid #e2e8f0;
  padding-top: env(safe-area-inset-top);
}
body.marketing .nav__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding: 14px 0;
}
body.marketing .nav__brand{
  font-weight: 800;
  letter-spacing: .2px;
  text-decoration:none;
  color:#0f172a;
}
body.marketing .nav__links{
  display:none;
  gap:18px;
}
body.marketing .nav__links a{
  text-decoration:none;
  color:#475569;
  font-size:14px;
}
body.marketing .nav__links a:hover{ color: #0f172a; }
@media (min-width: 900px){
  body.marketing .nav__links{ display:flex; }
}
body.marketing .nav__actions{
  display:flex;
  gap:10px;
  align-items:center;
}

/* marketing buttons (min 44px touch target for mobile) */
body.marketing .btn{
  border-radius: 999px;
  padding: 10px 14px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  border: 1px solid #e2e8f0;
  background: transparent;
  color:#0f172a;
  font-family: inherit;
  transition: background .15s, opacity .15s;
  text-decoration: none;
  box-sizing: border-box;
}
body.marketing .btn--primary{
  background:#111827;
  border-color:#111827;
  color:white;
}
body.marketing .btn--ghost{
  background: transparent;
  color:#0f172a;
}
body.marketing .btn--primary:hover{ opacity:.92; }
body.marketing .btn--ghost:hover{ background: rgba(15,23,42,0.06); }

/* sections / grids / cards */
body.marketing .section{ padding: 72px 0; }
body.marketing .section--alt{
  background:#f8fafc;
  border-top: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
}

body.marketing .grid{ display:grid; gap:18px; }
body.marketing .grid-2{ grid-template-columns: 1fr; }
body.marketing .grid-3{ grid-template-columns: 1fr; }
@media (min-width: 900px){
  body.marketing .grid-2{ grid-template-columns: 1.1fr 0.9fr; }
  body.marketing .grid-3{ grid-template-columns: repeat(3, 1fr); }
}

body.marketing .card{
  background:#ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(15,23,42,0.08);
  padding: 18px;
}

body.marketing h1{
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1.05;
  margin: 0 0 14px;
  color:#0f172a;
  font-weight: 900;
  font-family: inherit;
}
body.marketing h2{
  font-size: clamp(22px, 2.4vw, 30px);
  margin: 0 0 12px;
  font-weight: 850;
  color:#0f172a;
}
body.marketing p{
  margin: 0 0 14px;
  color:#475569;
  max-width: 72ch;
}
 
/* spacing between ordered lists and buttons on landing page */
body.marketing #how-it-works ol{
  margin-bottom: 12px;
}

/* hero bullets (remove default list markers) */
body.marketing .hero__bullets{
  list-style: none;
  padding-left: 0;
  margin: 16px 0 0;
  display: grid;
  gap: 8px;
}

body.marketing .hero__cta{
  margin-top: 16px;
}
 

/* =========================================================
   APP DASHBOARD LAYER (body.marketing.app)
   ========================================================= */
body.marketing.app .section{ padding: 28px 0; }
body.marketing.app .app-shell{ padding: 22px 0 44px; }

body.marketing.app .app-header{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 14px;
  margin-bottom: 18px;
}
body.marketing.app .app-title{
  font-size: 28px;
  font-weight: 900;
  margin: 0;
  color:#0f172a;
}
body.marketing.app .toolbar{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}
body.marketing.app .input{
  border:1px solid #e2e8f0;
  border-radius:999px;
  padding:10px 12px;
  background:#ffffff;
  color:#0f172a;
  outline:none;
  font-size: 16px; /* avoid iOS zoom on focus */
}
body.marketing.app .input:focus{
  border-color:#94a3b8;
  box-shadow: 0 0 0 3px rgba(148,163,184,0.25);
}
body.marketing.app .input--date{ min-width: 170px; }
body.marketing.app #dwDate{
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f172a' stroke-width='2'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3Ccircle cx='8' cy='14' r='1'/%3E%3Ccircle cx='12' cy='14' r='1'/%3E%3Ccircle cx='16' cy='14' r='1'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px 18px;
}
body.marketing.app #dwDate::-webkit-calendar-picker-indicator{
  opacity: 0 !important;
  cursor: pointer;
}

/* =========================================================
   MARKETING FORMS (generic)
   ========================================================= */
body.marketing .mform{ display:grid; gap: 12px; }
body.marketing .mfield{ display:grid; gap: 6px; }
body.marketing .mhelp{ font-size: 12px; color:#64748b; }
body.marketing .merror{ font-size: 13px; color:#b91c1c; }
body.marketing .register-link{
  color:#0f172a;
  font-weight:750;
  text-decoration:none;
}
body.marketing .register-link:hover{ text-decoration:underline; }

/* =========================================================
   REGISTER PAGE (body.marketing.register)
   White fields + black outline + dark labels
   ========================================================= */

/* Optional: hide dead anchor links on register page */
body.marketing.register .nav__links{ display:none; }

/* Make the header match the app aesthetic */
body.marketing.register .register-header{
  text-align: center;
}
body.marketing.register .register-header .app-title{
  font-size: 24px;   /* slightly smaller */
  line-height: 1.15;
}
body.marketing.register .register-header .muted{
  text-align: center;
}

/* Dark labels */
body.marketing.register .mform label,
body.marketing.register .mform .rlabel{
  color:#0f172a !important;
  font-weight: 800 !important;
  font-size: 14px !important;
  opacity: 1 !important;
}

/* White fields with black outline (override the global dark auth inputs) */
body.marketing.register .mform input,
body.marketing.register .mform select,
body.marketing.register .mform textarea{
  background:#ffffff !important;
  color:#000000 !important;
  border:2px solid #000000 !important;
  border-radius:12px !important;
  padding:12px 12px !important;
  width:100% !important;
  box-sizing:border-box !important;

  outline:none !important;
  box-shadow:none !important;
}

/* Focus: thicker black border */
body.marketing.register .mform input:focus,
body.marketing.register .mform select:focus,
body.marketing.register .mform textarea:focus{
  border-width:3px !important;
  box-shadow:none !important;
}

/* Autofill (Chrome/Edge) */
body.marketing.register .mform input:-webkit-autofill,
body.marketing.register .mform input:-webkit-autofill:hover,
body.marketing.register .mform input:-webkit-autofill:focus{
  -webkit-text-fill-color:#000000 !important;
  box-shadow:0 0 0px 1000px #ffffff inset !important;
  border:2px solid #000000 !important;
}

/* =========================================================
   DASHBOARD COMPONENTS (needed by manager/dashboard.html)
   Works under body.marketing.app
   ========================================================= */

/* segmented tabs */
body.marketing.app .segmented{
  display: inline-flex;
  gap: 6px;
  padding: 6px;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 10px 30px rgba(15,23,42,0.06);
}

body.marketing.app .segmented__btn{
  border: 0;
  background: transparent;
  color: #475569;
  font-weight: 800;
  padding: 10px 14px;
  min-height: 44px;
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s, color .15s;
  font-family: inherit;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

body.marketing.app .segmented__btn:hover{
  background: rgba(15,23,42,0.06);
  color: #0f172a;
}

body.marketing.app .segmented__btn.active{
  background: #111827;
  color: #ffffff;
}

/* panels */
body.marketing.app .card--panel{
  padding: 0;
  overflow: hidden;
}

body.marketing.app .card__header{
  padding: 16px 18px;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

body.marketing.app .card__title{
  font-weight: 900;
  color: #0f172a;
  font-size: 16px;
  margin: 0;
}

body.marketing.app .filterBar{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
}
body.marketing.app .filterGroup{
  display: flex;
  flex-direction: column;
  gap: 6px;
}
body.marketing.app .filterGroup--center{
  align-self: center;
}
body.marketing.app .filterLabel{
  font-size: 12px;
  font-weight: 750;
  color: #64748b;
}
body.marketing.app .filterLabel--icon{
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
body.marketing.app .filterIcon{
  width: 12px;
  height: 12px;
  display: inline-block;
  background:
    linear-gradient(#94a3b8, #94a3b8) left / 2px 100%,
    linear-gradient(#94a3b8, #94a3b8) center / 2px 100%,
    linear-gradient(#94a3b8, #94a3b8) right / 2px 100%;
  background-repeat: no-repeat;
  border-radius: 1px;
  opacity: 0.9;
}
body.marketing.app .filterRange{
  display: flex;
  align-items: center;
  gap: 8px;
}
body.marketing.app .input--sm{
  padding: 8px 10px;
  border-radius: 12px;
  min-width: 88px;
}

/* list rows */
body.marketing.app .list{
  display: grid;
  gap: 10px;
  padding: 14px;
}

body.marketing.app .row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #ffffff;
}

body.marketing.app .row .meta{
  display: grid;
  gap: 4px;
}

body.marketing.app .row .right{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

/* Dashboard event cards (match landing-page preview style) */
body.marketing.app .eventCard{
  width: 100%;
}
body.marketing.app .eventCard__top{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
}
body.marketing.app .eventCard__title{
  font-weight: 750;
  color: #0f172a;
}
body.marketing.app .eventCard__sub{
  font-size: 14px;
}
body.marketing.app .eventCard__price{
  font-weight: 750;
  color: #0f172a;
  white-space: nowrap;
}
body.marketing.app #browseResults .eventCard__top{
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 12px;
}
body.marketing.app #browseResults .eventCard__meta{
  flex: 0 0 var(--event-title-w, auto);
  min-width: 0;
}
body.marketing.app #browseResults .eventCard__title{
  white-space: nowrap;
}
body.marketing.app #browseResults .eventCard__sub{
  overflow-wrap: anywhere;
}
body.marketing.app #browseResults .eventCard__price{
  align-self: flex-start;
}
body.marketing.app .eventCard__line{
  margin-top: 10px;
  font-size: 14px;
}
body.marketing.app .eventCard__pills{
  margin-top: 12px;
  display:flex;
  gap:10px;
  flex-wrap: wrap;
}
body.marketing.app .pill{
  font-size: 13px;
  border: 1px solid #e2e8f0;
  padding: 6px 10px;
  border-radius: 999px;
  color: #475569;
  background: transparent;
  display: inline-flex;
  align-items: center;
}
body.marketing.app .pill--status-booked{
  background: #111827;
  border-color: #111827;
  color: #ffffff;
}
body.marketing.app .pill--status-cancelled{
  background: #fee2e2;
  border-color: #fecaca;
  color: #991b1b;
}
body.marketing.app .pill--status-available{
  background: transparent;
}

body.marketing.app a.nameLink{
  color: #0f172a;
  font-weight: 750;
  text-decoration: underline;
  text-decoration-color: rgba(15, 23, 42, 0.25);
  text-underline-offset: 2px;
}
body.marketing.app a.nameLink:hover{
  text-decoration-color: rgba(15, 23, 42, 0.6);
}

/* buttons inside the app should match marketing buttons */
body.marketing.app .btn{
  border-radius: 999px;
}

body.marketing.app .btn--primary{
  background:#111827;
  border-color:#111827;
  color:#ffffff;
}

body.marketing.app .btn--ghost{
  background: transparent;
  color:#0f172a;
}

body.marketing.app .btn--ghost:hover{
  background: rgba(15,23,42,0.06);
}

/* “loading / empty” text spacing */
body.marketing.app #schedLoading,
body.marketing.app #schedEmpty,
body.marketing.app #lessLoading,
body.marketing.app #lessEmpty,
body.marketing.app #iceLoading,
body.marketing.app #iceEmpty{
  padding: 12px 18px;
}

/* Make “price input” not look huge */
body.marketing.app .priceInput{
  width: 120px;
}

/* Rink preferences: rink names black, not muted (mobile-friendly) */
body.marketing.app #rinksGrid .row .meta strong{
  color: #000000;
}

/* Rink/availability rows: comfortable tap target on mobile */
body.marketing.app #rinksGrid .row,
body.marketing.app #availGrid .row{
  min-height: 48px;
}

/* Coach settings grid: 3 cols desktop, 1 col mobile */
body.marketing.app .coach-settings-grid{
  padding: 16px;
  display: grid;
  /* Prevent collisions: wrap to next row when space is tight */
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
}

/* responsive: rows stack nicely */
@media (max-width: 700px){
  body.marketing.app .row{
    align-items: flex-start;
    flex-direction: column;
  }
  body.marketing.app .row .right{
    width: 100%;
    justify-content: flex-start;
  }
}

/* =========================================================
   PROFILE PAGE (tabs + responsive layout + week bar)
   Works under body.marketing.app
   ========================================================= */

body.marketing.app .profile-public-grid{
  display:grid;
  grid-template-columns: 140px 1fr;
  gap:16px;
  align-items:start;
  padding: 16px;
}
body.marketing.app .public-profile-grid--single{
  grid-template-columns: 1fr;
}

body.marketing.app .weekbar{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}
body.marketing.app .prefs-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  padding: 0 16px 16px 16px;
}
body.marketing.app .pref-card{
  min-width: 0;
}

@media (max-width: 700px){
  body.marketing.app .profile-public-grid{
    grid-template-columns: 1fr;
  }
  body.marketing.app .prefs-grid{
    grid-template-columns: 1fr;
  }
}

/* Public Profile polish */
body.marketing.app .pp-label{
  color: #0f172a;
  font-weight: 750;
  font-size: 13px;
  margin-bottom: 6px;
}
body.marketing.app .pp-label-row{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
body.marketing.app .pp-count{
  color: #64748b;
  font-size: 12px;
  font-weight: 650;
}
body.marketing.app .pp-photo-circle{
  width: 140px;
  height: 140px;
  border-radius: 999px;
  overflow: hidden;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  margin: 0 auto;
  display: grid;
  place-items: center;
}
body.marketing.app #photoPreview{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}
body.marketing.app .pp-photo-empty{
  padding: 14px;
  text-align: center;
  color: #64748b;
  font-size: 13px;
  font-weight: 650;
}
body.marketing.app #photoInput{
  margin-top: 10px;
  width: 100%;
}

/* Public Profile fields should use full available width */
body.marketing.app #panelPublic input.input,
body.marketing.app #panelPublic textarea.input{
  width: 100%;
  display: block;
}
/* Textareas should not be "pill" shaped */
body.marketing.app #panelPublic textarea.input{
  border-radius: 12px;
}
/* Slightly taller headline input for comfort */
body.marketing.app .pp-actions-bottom{
  margin-top: 14px;
  display: flex;
  justify-content: flex-end;
}
@media (max-width: 600px){
  body.marketing.app .pp-actions-bottom{
    justify-content: stretch;
  }
  body.marketing.app .pp-actions-bottom .btn{
    width: 100%;
  }
}

/* =========================================================
   MOBILE UX (small screens)
   ========================================================= */
@media (max-width: 600px){
  body.marketing .container{
    width: 100%;
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
    box-sizing: border-box;
  }
  body.marketing.app .app-header{
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }
  body.marketing.app .toolbar{
    width: 100%;
  }
  body.marketing.app .segmented{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
  }
  body.marketing.app .segmented__btn{
    flex: 1;
    min-width: 0;
  }
}
@media (max-width: 400px){
  body.marketing.app .card__header{
    flex-direction: column;
    align-items: stretch;
  }
}

/* =========================================================
   FOOTER (marketing + mobile)
   ========================================================= */
body.marketing .footer{
  padding: 28px 0;
  border-top: 1px solid #e2e8f0;
  background: #f8fafc;
  margin-top: 0;
}
body.marketing .footer__inner{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
}
body.marketing .footer__brand{
  font-weight: 800;
  color: #0f172a;
}
body.marketing .footer__links{
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
}
body.marketing .footer__links a{
  color: #475569;
  text-decoration: none;
  font-size: 14px;
  padding: 6px 0;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
body.marketing .footer__links a:hover{
  color: #0f172a;
}
@media (max-width: 600px){
  body.marketing .footer__inner{
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
  }
}