/* ============================================================
   imonitor override styles  —  v2
   ------------------------------------------------------------
   Loaded AFTER style.{ltr|rtl}.css, so everything here wins.
   The original stylesheet is not modified. To revert: remove the
   override <link> from the two html_head templates, or select a
   system theme in the Hyperspin panel.

   override-styles.ltr.css and override-styles.rtl.css are
   intentionally identical. This file uses CSS logical properties
   (padding-inline, margin-inline-start, inset-inline) which flip
   automatically under dir="rtl", so no mirrored copy is needed.
   Both filenames exist because the template builds the name from
   {$direction}.

   The dated clip-art icons are replaced with inline SVG via the
   `content` property, matched on filename. If a browser ignores
   that, the original PNG simply shows through.
   ============================================================ */

:root{
  --im-ink:        #0e1821;
  --im-ink-soft:   #55656f;
  --im-ink-faint:  #8496a1;
  --im-ground:     #f8fafb;
  --im-surface:    #ffffff;
  --im-rule:       #e3e9ed;
  --im-rule-soft:  #eef2f5;
  --im-chrome:     #0b131b;
  --im-accent:     #0d8f52;
  --im-accent-dk:  #0a6f40;
  --im-accent-sf:  #e8f5ee;
  --im-signal:     #22c55e;
  --im-r:          8px;
  --im-r-lg:       14px;
  --im-shadow:     0 1px 2px rgba(14,24,33,.04), 0 10px 30px -16px rgba(14,24,33,.16);
  --im-sans: Archivo, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             "Helvetica Neue", Arial, sans-serif;
  --im-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* ============ 1. Typography ============ */

body{
  font-family: var(--im-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--im-ink);
  background: var(--im-surface);
  -webkit-font-smoothing: antialiased;
}
p{ color: var(--im-ink-soft); }

h1,h2,h3,h4,h5{
  font-family: var(--im-sans);
  color: var(--im-ink);
  letter-spacing: -0.022em;
  text-wrap: balance;
}
h2{ font-size: 32px; font-weight: 650; line-height: 1.15; margin: 1.1em 0 .5em; }
h3{ font-size: 19px; font-weight: 600; line-height: 1.3; margin: 0 0 .45em; }
h4{ font-size: 16px; font-weight: 600; margin: 0 0 .5em; }

a{ color: var(--im-accent); text-decoration: none; }
a:hover{ color: var(--im-accent-dk); text-decoration: underline; }
a:focus-visible, button:focus-visible, input:focus-visible{
  outline: 2px solid var(--im-accent); outline-offset: 2px;
}

/* The stock theme sets a handwriting face in three places */
.main-feature-content h3 em,
.main-feature-content h4,
.features-content dd em{
  font-family: var(--im-sans) !important;
  font-style: normal;
}

/* ============ 2. Fluid container ============ */
/* Replaces the fixed 950px width used in 16 places */

#header,
.main-feature-content,
.features-content,
#columns,
.main-column,
#footer{
  width: auto;
  max-width: 1120px;
  margin-inline: auto;
  padding-inline: 24px;
  box-sizing: border-box;
}
#page{ min-width: 0; background: var(--im-surface); }
.hl, .headline{ width: auto; }
img{ max-width: 100%; height: auto; }

/* ============ 3. Header ============ */

#page-top,
#statement-page-top{
  background: var(--im-chrome);
  height: auto;
  padding: 0;
}
#header{
  background: none;
  height: auto;
  padding-block: 0;
  display: flex;
  flex-direction: column;
}
#logo{ height: auto; order: 2; }
#logo h1{ float: none; margin: 0; min-width: 0; text-align: start; }
#logo h1 a{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: auto;
  line-height: 1.1;
  text-align: start;
  color: #fff;
  font-size: 21px;
  font-weight: 650;
  letter-spacing: -0.025em;
  padding-block: 20px;
}
#logo h1 a:hover{ text-decoration: none; color: #fff; }
#logo h1 a::after{ content: none; }
#logo h1 a img{ vertical-align: middle; max-height: 46px; width: auto; }

/* the three-slice rounded box that wrapped the utility nav */
.box, .box-bgr, .box-bgr-{
  background: none; float: none; margin: 0; padding: 0;
  overflow: visible; width: auto;
}
.box-bot{ display: none; }
#top-hide-box{ order: 1; }

/* ============ 4. Navigation ============ */

#nav-top{
  height: auto; overflow: visible; letter-spacing: 0;
  font-family: var(--im-mono);
  font-size: 11.5px; padding: 0; text-align: end;
}
#nav-top ul{
  display: flex; flex-wrap: wrap; justify-content: flex-end;
  gap: 2px 18px; padding: 9px 0 0;
}
#nav-top li{ background: none; display: block; padding: 0; color: #7c8d99; }
#nav-top li a{ color: #94a5b0; letter-spacing: .02em; }
#nav-top li a:hover, #nav-top li.active a{ color: #fff; text-decoration: none; }

#nav1{
  background: transparent;
  float: none; height: auto; width: auto;
  margin: 0; border-radius: 0;
  border-top: 1px solid rgba(255,255,255,.08);
  order: 3;
}
#nav1 > ul{
  clear: none; float: none; position: static;
  inset-inline-end: auto;
  display: flex; flex-wrap: wrap; justify-content: flex-start;
  text-align: start;
}
#nav1 > ul > li{
  float: none; inset-inline-start: auto;
  display: block; position: relative;
}
#nav1 li a{
  float: none; display: block;
  font-family: var(--im-sans);
  font-size: 14.5px; font-weight: 500; line-height: 1.2;
  letter-spacing: -0.005em;
  padding: 15px 15px;
  color: #a7b6c0; text-shadow: none; border-radius: 0;
  border-bottom: 2px solid transparent;
}
#nav1 li a:hover, #nav1 li:hover a{
  background: rgba(255,255,255,.05); color: #fff; text-decoration: none;
}
#nav1 > ul > li.active > a{
  background: transparent; border: 0;
  border-bottom: 2px solid var(--im-signal);
  color: #fff;
}
#nav1 li ul{
  position: absolute; float: none; display: block;
  min-width: 190px; top: 100%; text-align: start;
}
#nav1 li:hover ul{
  background: #16222d;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 0 0 var(--im-r) var(--im-r);
  padding: 5px; inset-inline-start: 0;
  box-shadow: 0 14px 34px -12px rgba(0,0,0,.55);
}
#nav1 li li{ background: none; inset-inline: auto; }
#nav1 li:hover li a{ padding: 9px 12px; border-bottom: 0; font-size: 14px; }

/* ============ 5. Hero ============ */

#main-feature{
  background: var(--im-surface);
  border-bottom: 1px solid var(--im-rule);
  padding-block: 58px 52px;
  position: relative;
}
#main-feature.mflanding{
  background: var(--im-surface); margin: 0; padding-block: 56px;
}
.main-feature-content{ color: var(--im-ink); }
.main-feature-content a{ color: var(--im-accent); }

/* live-status eyebrow — this is a monitoring company, so say so */
.main-feature-title{ text-align: start; position: relative; }
.main-feature-title::before{
  content: "ALL SYSTEMS MONITORED";
  display: inline-flex; align-items: center;
  font-family: var(--im-mono);
  font-size: 11px; font-weight: 500; letter-spacing: .14em;
  color: var(--im-accent-dk);
  background: var(--im-accent-sf);
  border-radius: 100px;
  padding: 6px 13px 6px 26px;
  margin-bottom: 22px;
  position: relative;
}
.main-feature-title::after{
  content: "";
  position: absolute;
  inset-inline-start: 13px; top: 13px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--im-signal);
  box-shadow: 0 0 0 0 rgba(34,197,94,.55);
  animation: im-pulse 2.4s ease-out infinite;
}
@keyframes im-pulse{
  0%{ box-shadow: 0 0 0 0 rgba(34,197,94,.5); }
  70%{ box-shadow: 0 0 0 9px rgba(34,197,94,0); }
  100%{ box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}

.main-feature-content h2{
  font-size: 46px; font-weight: 400; line-height: 1.08;
  letter-spacing: -0.035em;
  color: var(--im-ink-soft);
  margin: 0 0 .28em;
  max-width: 26ch;
  text-align: start;
}
.main-feature-content h2 strong{
  font-size: inherit; font-weight: 680; display: inline;
  color: var(--im-ink);
}
.main-feature-content h3{
  font-size: 18px; font-weight: 400; line-height: 1.55;
  color: var(--im-ink-soft); padding: 0; margin: 0;
}
.main-feature-text{
  padding-inline: 0; max-width: 54ch;
  margin-inline: 0; margin-bottom: 34px;
  text-align: start;
}
.main-feature-content h4{
  font-family: var(--im-mono);
  font-size: 11px; font-weight: 500; letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--im-ink-faint);
  text-align: start;
  margin: 0 0 12px;
}

/* the two hero actions become proper cards */
#main-feature .col1,
#main-feature .col2{
  background: var(--im-surface);
  border: 1px solid var(--im-rule);
  border-radius: var(--im-r-lg);
  box-shadow: var(--im-shadow);
  padding: 22px 24px 24px;
  box-sizing: border-box;
}
#main-feature .col1{ width: 55%; }
#main-feature .col2{
  width: 42%;
  background: linear-gradient(180deg, #f3faf6 0%, var(--im-surface) 70%);
  border-color: #cfe7db;
}

/* ============ 6. Why-choose-us band ============ */

#features{
  background: var(--im-ground);
  border-top: 1px solid var(--im-rule);
  border-bottom: 1px solid var(--im-rule);
}
#features-bot{ display: none; }
.features-content{ padding-block: 60px 56px; }
.features-content h2{
  background: none; height: auto;
  font-size: 30px; font-weight: 650; text-shadow: none;
  color: var(--im-ink); text-align: start;
  margin: 0 0 8px; letter-spacing: -0.03em;
}
.features-content h4{
  color: var(--im-ink-soft); text-align: start;
  font-weight: 400; font-size: 17px; margin: 0 0 36px;
}
#features .hl{
  height: 3px; width: 44px; background: var(--im-accent);
  border-radius: 2px; margin: 0 0 34px;
}
.features-content h3, .col3 h3, .col4 h3,
.main-feature-content h2, .main-feature-content h3{ text-shadow: none; }

#features .col3, #features .col4{
  background: var(--im-surface);
  border: 1px solid var(--im-rule);
  border-radius: var(--im-r-lg);
  padding: 24px 22px 22px;
  box-sizing: border-box;
}

/* Equal-height feature cards: grid the three columns, span the headings across.
   Only above the stacking breakpoint; below it the mobile rules take over. */
@media (min-width: 861px){
  #features .features-content{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 22px;
    align-items: stretch;
  }
  #features .features-content > h2,
  #features .features-content > h4,
  #features .features-content > .hl,
  #features .features-content > .more-features{ grid-column: 1 / -1; }
  #features .features-content > br{ display: none; }
  #features .features-content > .col3,
  #features .features-content > .col4{
    float: none; width: auto; margin: 0;
  }
}
.features-content dl{ margin: 0; }
.features-content dt{
  float: none; width: auto; height: auto;
  margin: 0 0 16px;
}
.features-content dd{
  display: block; height: auto; padding: 0; margin: 0;
}
.features-content dd h3{ font-size: 18px; margin: 0 0 8px; }
.features-content dd p{ font-size: 15px; line-height: 1.6; margin: 0; }

/* "Want to learn more?" row */
.more-features{
  color: var(--im-ink-soft); font-size: 15px;
  height: auto; line-height: 1.5;
  margin: 38px 0 0; width: 100%; text-align: start;
}
.more-features ul{
  display: inline-flex; flex-wrap: wrap; gap: 10px;
  align-items: center; justify-content: flex-start;
}
.more-features li{ float: none; display: inline-block; padding: 0; }

/* ============ 7. Downtime / network band ============ */

#columns{ padding-block: 64px; }
#columns h3{
  font-size: 22px; font-weight: 650; letter-spacing: -0.028em;
  margin: 0 0 12px;
}
#columns p{ font-size: 15.5px; }
.main-column{ padding-block: 8px 30px; }

/* ============ 8. Columns ============ */

.col1{ width: 57%; box-sizing: border-box; }
.col2{ width: 39%; box-sizing: border-box; }
.col3{ width: 31.4%; box-sizing: border-box; }
.col4{ width: 31.4%; margin-inline-start: 2.9%; box-sizing: border-box; }
.col5{ width: 64%; padding-inline-start: 0; box-sizing: border-box; }
.col6{ width: 30%; box-sizing: border-box; }

/* ============ 9. Forms ============ */

input, select, textarea{
  background: var(--im-surface);
  border: 1px solid #cdd8de;
  border-radius: var(--im-r);
  color: var(--im-ink);
  font-family: var(--im-sans);
  font-size: 15px;
  padding: 11px 13px;
  box-sizing: border-box;
  max-width: 100%;
  transition: border-color .15s, box-shadow .15s;
}
input::placeholder{ color: #9dabb4; }
input[type="radio"], input[type="checkbox"]{
  padding: 0; border: 0; background: none; max-width: none;
}
input:focus, select:focus, textarea:focus{
  border-color: var(--im-accent);
  box-shadow: 0 0 0 3px var(--im-accent-sf);
  outline: none;
}

.btn,
#form-test .btn, #form-signup .btn,
#form-login .btn, #form-language .btn{
  background: var(--im-accent);
  border: 0; border-radius: var(--im-r);
  color: #fff; cursor: pointer;
  font-family: var(--im-sans);
  font-size: 15px; font-weight: 600;
  letter-spacing: -0.005em;
  height: auto; width: auto;
  padding: 12px 20px; margin: 0;
  float: none; text-shadow: none; line-height: 1.2;
  transition: background .15s;
}
.btn:hover, #form-test .btn:hover,
#form-signup .btn:hover, #form-login .btn:hover{
  background: var(--im-accent-dk);
}

/* both forms were centred with a float / left:50% hack */
#form-test, #form-login{
  float: none; inset-inline-start: auto; position: static;
  height: auto; display: flex; flex-wrap: wrap;
  justify-content: flex-start; align-items: center; gap: 10px;
}
#form-test-center, #form-login-center{
  float: none; inset-inline-start: auto; position: static;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  width: 100%;
}
#form-test label{
  float: none; margin: 0;
  color: var(--im-ink-faint);
  font-family: var(--im-mono);
  font-size: 12px; font-weight: 500;
}
#form-test input{ float: none; flex: 1 1 200px; width: auto; min-width: 0; }
#form-test .btn{ margin-inline-start: 0; }

.more-tests{
  clear: both; height: auto; padding: 10px 0 0;
  font-family: var(--im-mono);
  font-size: 11px; font-weight: 500; letter-spacing: .1em;
  color: var(--im-ink-faint); text-align: start; width: 100%;
}
.more-tests a{ color: var(--im-accent); }

#form-signup{ display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }
.form-signup-inputs{ float: none; width: 100%; display: grid; gap: 10px; }
#form-signup input{ width: 100%; margin: 0; }
#form-signup .btn{ padding: 13px 24px; font-size: 16px; width: 100%; margin: 0; }

/* dark header login */
#form-login input{
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff; float: none; font-size: 13px;
  margin: 0; padding: 8px 10px; width: 120px;
}
#form-login input::placeholder{ color: #7c8d99; }
#form-login .btn{ padding: 8px 15px; font-size: 13px; }

/* ============ 10. Secondary buttons ============ */

.btn-link-highlight, .btn-link-normal{ height: auto; }
.btn-link-highlight a, .btn-link-normal a{
  background: var(--im-surface) !important;
  border: 1px solid #ccd8de;
  border-radius: var(--im-r);
  color: var(--im-ink) !important;
  float: none; display: inline-block;
  font-family: var(--im-sans);
  font-size: 14px; font-weight: 550; line-height: 1.2;
  padding: 10px 18px; text-shadow: none;
  transition: background .15s, border-color .15s;
}
.btn-link-highlight a:hover, .btn-link-normal a:hover,
.btn-link-normal.active a{
  background: var(--im-accent) !important;
  border-color: var(--im-accent);
  color: #fff !important; text-shadow: none; text-decoration: none;
}
.btn-link-normal li{ float: none; display: inline-block; margin: 0 6px 0 0; }
.btn-link-normal li.none a{
  background: none !important; border: 0;
  color: var(--im-accent) !important; padding: 0 4px;
}

/* ============ 11. Icons — replace the dated clip-art ============ */

img[src$="ico01.png"]{ content: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2248%22 height=%2248%22 viewBox=%220 0 48 48%22 fill=%22none%22%3E%3Ccircle cx=%2224%22 cy=%2226%22 r=%2215%22 stroke=%22%230d8f52%22 stroke-width=%222.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M24 26v-7%22 stroke=%22%230d8f52%22 stroke-width=%222.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M24 26l5 4%22 stroke=%22%230d8f52%22 stroke-width=%222.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M19 6h10%22 stroke=%22%230d8f52%22 stroke-width=%222.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M24 6v5%22 stroke=%22%230d8f52%22 stroke-width=%222.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M37 13l3-3%22 stroke=%22%230d8f52%22 stroke-width=%222.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E"); width: 44px; height: 44px; }
img[src$="ico02.png"]{ content: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2248%22 height=%2248%22 viewBox=%220 0 48 48%22 fill=%22none%22%3E%3Cpath d=%22M24 5l14 5v12c0 10-6 17-14 21-8-4-14-11-14-21V10l14-5z%22 stroke=%22%230d8f52%22 stroke-width=%222.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M17 23l5 5 10-10%22 stroke=%22%230d8f52%22 stroke-width=%222.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E"); width: 44px; height: 44px; }
img[src$="ico03.png"]{ content: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2248%22 height=%2248%22 viewBox=%220 0 48 48%22 fill=%22none%22%3E%3Cpath d=%22M7 40V9%22 stroke=%22%230d8f52%22 stroke-width=%222.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M7 40h34%22 stroke=%22%230d8f52%22 stroke-width=%222.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M13 32l8-9 6 5 10-13%22 stroke=%22%230d8f52%22 stroke-width=%222.2%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3Ccircle cx=%2237%22 cy=%2215%22 r=%223.2%22 fill=%22%230d8f52%22/%3E%3C/svg%3E"); width: 44px; height: 44px; }

#homepage-pic-phone,
img[src$="pic-phone.png"]{
  content: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22200%22 height=%22264%22 viewBox=%220 0 200 264%22 fill=%22none%22%3E%3Crect x=%2234%22 y=%228%22 width=%22132%22 height=%22248%22 rx=%2222%22 fill=%22%230e1821%22/%3E%3Crect x=%2242%22 y=%2216%22 width=%22116%22 height=%22232%22 rx=%2216%22 fill=%22%23f8fafb%22/%3E%3Crect x=%2256%22 y=%2236%22 width=%2288%22 height=%228%22 rx=%224%22 fill=%22%23dfe6ea%22/%3E%3Crect x=%2256%22 y=%2260%22 width=%2288%22 height=%2258%22 rx=%228%22 fill=%22%23fdecea%22 stroke=%22%23e1584a%22 stroke-width=%221.6%22/%3E%3Cpath d=%22M100 74v18%22 stroke=%22%23c8402f%22 stroke-width=%223.4%22 stroke-linecap=%22round%22/%3E%3Ccircle cx=%22100%22 cy=%22103%22 r=%222.4%22 fill=%22%23c8402f%22/%3E%3Crect x=%2256%22 y=%22132%22 width=%2288%22 height=%227%22 rx=%223.5%22 fill=%22%23dfe6ea%22/%3E%3Crect x=%2256%22 y=%22149%22 width=%2262%22 height=%227%22 rx=%223.5%22 fill=%22%23e9eef1%22/%3E%3Crect x=%2256%22 y=%22176%22 width=%2288%22 height=%2230%22 rx=%227%22 fill=%22%230d8f52%22/%3E%3Crect x=%2272%22 y=%22188%22 width=%2256%22 height=%226%22 rx=%223%22 fill=%22%23ffffff%22 opacity=%22.85%22/%3E%3Ccircle cx=%22100%22 cy=%22228%22 r=%229%22 fill=%22%23dfe6ea%22/%3E%3C/svg%3E");
  width: 200px; height: auto; max-width: 100%;
}

/* the dotted world map gif — soften rather than replace */
img[src$="pic-map.png"], img[src$="pic-map-big.png"]{
  opacity: .5; filter: grayscale(1) contrast(1.15); mix-blend-mode: multiply;
}

/* bullet lists used an icon sprite */
#columns .col4 ul li,
.main-column ul li{
  background: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2216%22 height=%2216%22 viewBox=%220 0 16 16%22 fill=%22none%22%3E%3Ccircle cx=%228%22 cy=%228%22 r=%227.2%22 fill=%22%23e6f4ec%22/%3E%3Cpath d=%22M5 8.2l2.2 2.2L11.2 6%22 stroke=%22%230d8f52%22 stroke-width=%221.9%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E") no-repeat 0 4px !important;
  background-size: 16px 16px !important;
  padding-inline-start: 26px;
  margin-bottom: 9px;
  color: var(--im-ink-soft);
  font-size: 15.5px;
  line-height: 1.55;
}

/* ============ 12. Tables ============ */

.tbl-normal{ overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tbl-normal table{
  min-width: 720px; border-color: var(--im-rule);
  border-radius: var(--im-r); border-collapse: separate; border-spacing: 0;
}
.tbl-normal th{
  background: var(--im-ground);
  border-right: 1px solid var(--im-rule);
  border-bottom: 1px solid var(--im-rule);
  color: var(--im-ink);
  font-family: var(--im-sans);
  font-size: 12.5px; font-weight: 600;
  letter-spacing: .02em; text-transform: uppercase;
  text-shadow: none; padding: 12px 14px;
}
.tbl-normal td{
  background: var(--im-surface);
  border-top: 1px solid var(--im-rule-soft);
  border-right: 1px solid var(--im-rule-soft);
  color: var(--im-ink); padding: 11px 14px;
  font-variant-numeric: tabular-nums;
}
@media screen and (-webkit-min-device-pixel-ratio:0){
  .tbl-normal td.minwidthfix{ min-width: 0; }
}

/* ============ 13. Notices ============ */

.notice{
  background: var(--im-surface);
  border: 1px solid var(--im-rule);
  border-radius: var(--im-r-lg);
  box-shadow: var(--im-shadow);
  padding: 18px 20px;
}

/* ============ 14. Footer ============ */

#footer{
  background: none; height: auto;
  padding-block: 34px;
  border-top: 1px solid var(--im-rule);
  color: var(--im-ink-faint);
  font-family: var(--im-mono);
  font-size: 12px; letter-spacing: .02em;
}
#footer a{ color: var(--im-ink-faint); }
#footer a:hover{ color: var(--im-accent); text-decoration: none; }
#copyr{ float: none; width: auto; font-size: 12px; }

/* ============ 15. Narrow screens ============ */

@media (max-width: 940px){
  .main-feature-content h2{ font-size: 36px; }
  #features .col3, #features .col4{ padding: 22px 20px; }
}

@media (max-width: 860px){
  .col1, .col2, .col3, .col4, .col5, .col6,
  #main-feature .col1, #main-feature .col2{
    float: none; width: auto;
    margin-inline: 0; padding-inline: 0;
  }
  #main-feature .col1, #main-feature .col2{ padding: 20px 22px; }
  #main-feature .col2{ margin-block-start: 16px; }
  #features .col4, #columns .col4, .col6{ margin-block-start: 18px; }
  #features .col3, #features .col4{ padding: 22px 20px; }
  #columns .col3{ text-align: center; }
  h2{ font-size: 27px; }
  .features-content h2{ font-size: 26px; }
  #main-feature{ padding-block: 44px 40px; }
  .features-content{ padding-block: 46px 42px; }
  #columns{ padding-block: 46px; }
}

@media (max-width: 620px){
  #header{ padding-inline: 18px; }
  #logo h1 a{ padding-block: 15px; font-size: 19px; }
  #nav-top, #nav-top ul{ justify-content: flex-start; text-align: start; }
  #nav1 > ul{ justify-content: flex-start; }
  #nav1 li a{ padding: 12px 12px; font-size: 14px; }
  #main-feature{ padding-block: 34px 32px; }
  .main-feature-content h2{ font-size: 30px; letter-spacing: -0.03em; }
  .main-feature-content h3{ font-size: 16.5px; }
  .main-feature-text{ margin-bottom: 28px; }
  #form-test input{ flex: 1 1 100%; }
  #form-test .btn{ width: 100%; }
  h2, .features-content h2{ font-size: 24px; }
  #columns h3{ font-size: 20px; }
  #main-feature .col1, #main-feature .col2{ padding: 18px 18px 20px; }
}

@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; animation: none !important; }
}