/* ==========================================================================
   ColoCommerce — the site's whole visual language.

   Built out from the mark. The logo is a machined metal bar: brushed steel,
   one aperture, a highlight that moves as it turns. So the page is dark and
   the accents are metallic — silver, and the cold blue that steel picks up
   from a window. Hairlines rather than borders. Monospace only where something
   is genuinely technical.

   What changed, and why: the first version was correct and cold. Everything
   was grey, every label shouted in capitals, and the words talked about tenants
   and boundaries to people who are buying invoicing and email. This keeps the
   restraint and the mark, and adds the colour the mark was already reflecting.
   ========================================================================== */

:root {
  /* Ink through paper — the greys everything is built from. */
  --ink:      #0a0d12;
  --ink-2:    #0e131a;
  --ink-3:    #131a24;
  --ink-4:    #18212d;
  --rule:     #1e2734;
  --rule-2:   #2b3747;
  --steel:    #9fb3c8;
  --steel-dim:#6b7c90;
  --paper:    #e9eff6;
  --paper-dim:#aebcca;

  /* The metal. Cold blue through silver — the light the mark reflects, now
     allowed onto the page rather than trapped in the logo. */
  --azure:    #5ea8f0;
  --azure-dp: #2f7fd0;
  --ice:      #bfd9f2;
  --chrome:   linear-gradient(135deg, #dfe9f4 0%, #9db4cd 42%, #e6eef7 66%, #8fa8c2 100%);
  --sheen:    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0) 62%);
  --glow:     0 0 0 1px rgba(94,168,240,.22), 0 10px 34px -14px rgba(94,168,240,.45);

  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --sans: Inter, "Helvetica Neue", Arial, system-ui, sans-serif;

  --r:    7px;          /* one radius, used everywhere, friendly without being soft */
  --page: 1200px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 16.5px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* A cold light somewhere above and behind the page, so the dark is a room
   rather than a void. Fixed, so it does not slide about while scrolling. */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(70% 48% at 76% -6%, rgba(94,168,240,.13), transparent 62%),
    radial-gradient(52% 40% at 6% 4%, rgba(191,217,242,.07), transparent 60%);
}
body > * { position: relative; z-index: 1; }

a { color: var(--paper); text-decoration: none; }
a:hover { color: #fff; }

.wrap { max-width: var(--page); margin: 0 auto; padding: 0 32px; }
@media (max-width: 760px) { .wrap { padding: 0 20px; } }

/* ---------------------------------------------------------------- mark --- */
.colocom-mark { position: relative; }
.colocom-mark canvas { display: block; width: 100%; height: 100%; }
.colocom-mark.has-shadow canvas { filter: drop-shadow(0 18px 30px rgba(0,0,0,.62)); }

/* The hero mark sits in its own pool of light. */
.hero-mark { position: relative; }
.hero-mark::after {
  content: ""; position: absolute; inset: 6% 6% 2%; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(94,168,240,.24), transparent 74%);
  filter: blur(14px);
}

/* ------------------------------------------------------------------ nav --- */
.nav {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 13px;
  padding: 13px 32px;
  border-bottom: 1px solid var(--rule);
  background: rgba(10,13,18,.82);
  backdrop-filter: blur(12px) saturate(140%);
}
.nav .wordmark {
  font-size: 13.5px; letter-spacing: .28em; text-transform: uppercase; font-weight: 600;
  background: var(--chrome); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--paper);
}
.nav ul { display: flex; gap: 24px; list-style: none; margin: 0 0 0 auto; padding: 0; }
.nav ul a {
  color: var(--paper-dim); font-size: 14.5px; font-weight: 500;
  padding: 6px 2px; border-bottom: 1px solid transparent;
}
.nav ul a:hover { color: #fff; }
.nav ul a.active { color: #fff; border-bottom-color: var(--azure); }
.nav-cta { display: flex; gap: 10px; margin-left: 24px; }
.nav-toggle {
  display: none; margin-left: auto; background: none; border: 1px solid var(--rule);
  color: var(--paper); border-radius: var(--r); padding: 8px 12px; cursor: pointer;
}
@media (max-width: 980px) {
  .nav ul, .nav-cta { display: none; }
  .nav-toggle { display: block; }
  .nav.open ul {
    display: flex; flex-direction: column; gap: 16px;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--ink-2); border-bottom: 1px solid var(--rule);
    margin: 0; padding: 22px 24px;
  }
  .nav.open .nav-cta {
    display: flex; position: absolute; top: 100%; left: 0; right: 0;
    margin: 0; padding: 0 24px 22px; background: var(--ink-2);
    transform: translateY(calc(100% - 22px));
  }
}

/* --------------------------------------------------------------- type --- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--azure); margin: 0 0 18px; font-weight: 500;
}
.eyebrow::before {
  content: ""; width: 20px; height: 1px; flex: none;
  background: linear-gradient(90deg, transparent, var(--azure));
}
h1 {
  font-size: clamp(36px, 5.4vw, 64px); line-height: 1.04; letter-spacing: -.032em;
  font-weight: 600; margin: 0 0 20px;
}
/* Silver, the way the mark is silver. Only ever on a page's one big heading. */
.h-metal {
  background: linear-gradient(168deg, #ffffff 4%, #d7e4f1 34%, #9db4cd 70%, #d4e2f0 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--paper);
}
h2 {
  font-size: clamp(27px, 3.3vw, 40px); line-height: 1.14; letter-spacing: -.022em;
  font-weight: 600; margin: 0 0 14px;
}
h3 { font-size: 19.5px; line-height: 1.32; letter-spacing: -.01em; font-weight: 600; margin: 0 0 10px; }
p  { color: var(--paper-dim); margin: 0 0 18px; }
.lead { font-size: 18px; line-height: 1.68; max-width: 52ch; color: #c2cfdd; }
.small { font-size: 14.5px; }
.dim { color: var(--steel-dim); }
code, .mono { font-family: var(--mono); font-size: .92em; color: var(--ice); }
strong { color: var(--paper); font-weight: 600; }

/* A word or two picked out in the metal blue, for the phrase that carries the
   point of a paragraph. */
.hi { color: var(--ice); }

/* ------------------------------------------------------------- buttons --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 14.5px; font-weight: 600; letter-spacing: .005em;
  padding: 13px 22px; border-radius: var(--r); border: 1px solid var(--rule);
  transition: transform .14s, box-shadow .18s, background .16s, color .16s, border-color .16s;
  cursor: pointer; line-height: 1.2;
}
.btn:hover { transform: translateY(-1px); }
.btn-solid {
  background: var(--chrome); color: #0a1119; border-color: rgba(255,255,255,.28);
  box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 8px 22px -12px rgba(159,179,200,.9);
}
.btn-solid:hover { color: #060b11; box-shadow: 0 1px 0 rgba(255,255,255,.55) inset, var(--glow); }
.btn-ghost { color: var(--ice); background: rgba(94,168,240,.05); border-color: var(--rule-2); }
.btn-ghost:hover { background: rgba(94,168,240,.12); border-color: var(--azure-dp); color: #fff; }
.btn-sm { padding: 9px 15px; font-size: 13.5px; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }

/* -------------------------------------------------------------- layout --- */
section { padding: 84px 0; }
section.tight { padding: 54px 0; }
.section-head { max-width: 64ch; margin-bottom: 42px; }

/* A hairline that is brighter in the middle, like light on an edge. */
.edge, section.edge-top { border-top: 1px solid transparent; }
section.edge-top {
  border-image: linear-gradient(90deg, transparent, var(--rule-2) 22%, var(--rule-2) 78%, transparent) 1;
  border-top: 1px solid;
}

.hero {
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 60px; align-items: center;
  max-width: var(--page); margin: 0 auto; padding: 86px 32px 76px;
}
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 36px; padding: 48px 20px 56px; }
  .hero-mark { max-width: 340px; margin-inline: auto; order: -1; }
}
.hero h1 { max-width: 15ch; }

/* Small reassurances under a call to action. */
.under { display: flex; gap: 18px; flex-wrap: wrap; margin: 20px 0 0; padding: 0; list-style: none; }
.under li {
  font-size: 13.5px; color: var(--steel-dim); display: flex; align-items: center; gap: 7px;
}
.under li::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%; flex: none;
  background: var(--azure); box-shadow: 0 0 8px rgba(94,168,240,.9);
}

/* Numbers across a rule. */
.facts {
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: linear-gradient(180deg, rgba(94,168,240,.05), transparent);
}
@media (max-width: 860px) { .facts { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .facts { grid-template-columns: 1fr; } }
.fact { padding: 28px 32px 30px; border-right: 1px solid var(--rule); }
.fact:last-child { border-right: 0; }
@media (max-width: 860px) { .fact:nth-child(2n) { border-right: 0; } }
.fact .n {
  font-size: 32px; letter-spacing: -.025em; font-weight: 600;
  display: block; line-height: 1.1;
  background: var(--chrome); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--paper);
}
.fact .l {
  font-size: 13.5px; color: var(--steel-dim); margin-top: 6px; display: block;
}

/* Cards. A hairline box with a lit top edge, and a blue lift on hover. */
.grid { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule);
        border-radius: var(--r); overflow: hidden; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }
.cell {
  background: var(--ink-2); padding: 28px 26px; position: relative;
  transition: background .18s;
}
.cell::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(191,217,242,.30), transparent);
  opacity: 0; transition: opacity .2s;
}
.cell:hover { background: var(--ink-3); }
.cell:hover::before { opacity: 1; }
.cell h3 { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.cell .tag {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--steel-dim);
  border: 1px solid var(--rule-2); border-radius: 20px; padding: 2px 9px;
}
.cell p { margin: 0; font-size: 15px; line-height: 1.66; }
.cell ul { margin: 12px 0 0; padding-left: 17px; color: var(--paper-dim); font-size: 14.5px; }
.cell li { margin-bottom: 6px; }
.cell li::marker { color: var(--azure); }

/* A card that is a link, and should say so. */
a.cell:hover { color: inherit; }
a.cell::after {
  content: "→"; position: absolute; right: 22px; bottom: 20px;
  color: var(--azure); opacity: 0; transform: translateX(-6px);
  transition: opacity .2s, transform .2s;
}
a.cell:hover::after { opacity: 1; transform: translateX(0); }

/* A quiet panel for an aside — the reseller note, a caveat, a footnote that
   deserves more room than a sentence. */
.aside {
  border: 1px solid var(--rule); border-radius: var(--r);
  background: linear-gradient(180deg, var(--ink-3), var(--ink-2));
  padding: 26px 28px;
}
.aside h3 { margin-bottom: 8px; }
.aside p:last-child { margin-bottom: 0; }

/* Numbered steps, for anything that is genuinely a sequence. */
.steps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.steps li {
  counter-increment: step; position: relative; padding: 0 0 26px 52px;
  color: var(--paper-dim);
}
.steps li::before {
  content: counter(step); position: absolute; left: 0; top: -2px;
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--mono); font-size: 13px; color: var(--ice);
  border: 1px solid var(--rule-2); background: var(--ink-3);
}
.steps li::after {
  content: ""; position: absolute; left: 16px; top: 34px; bottom: 6px; width: 1px;
  background: linear-gradient(180deg, var(--rule-2), transparent);
}
.steps li:last-child { padding-bottom: 0; }
.steps li:last-child::after { display: none; }
.steps b { color: var(--paper); display: block; margin-bottom: 3px; font-weight: 600; }

/* A module row: name, one line, the count that proves it is real. */
.mod-row {
  display: grid; grid-template-columns: 190px 1fr 92px; gap: 20px; align-items: baseline;
  padding: 15px 0; border-bottom: 1px solid var(--rule);
}
@media (max-width: 760px) {
  .mod-row { grid-template-columns: 1fr; gap: 5px; }
  .mod-row .mod-count { text-align: left; }
}
.mod-row:last-child { border-bottom: 0; }
.mod-row:hover .mod-name { color: var(--ice); }
.mod-row .mod-name { font-weight: 600; transition: color .15s; }
.mod-row .mod-what { color: var(--paper-dim); font-size: 15px; }
.mod-count { font-family: var(--mono); font-size: 11.5px; color: var(--steel-dim); text-align: right; }

/* Pricing */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule);
         border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; }
@media (max-width: 900px) { .plans { grid-template-columns: 1fr; } }
.plan { background: var(--ink-2); padding: 32px 28px; display: flex; flex-direction: column;
        position: relative; }
.plan.featured { background: var(--ink-3); }
.plan.featured::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 2px;
  background: linear-gradient(90deg, transparent, var(--azure), transparent);
}
.plan .price {
  font-size: 44px; font-weight: 600; letter-spacing: -.035em; margin: 12px 0 4px;
  background: var(--chrome); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--paper);
}
.plan .per { font-size: 13.5px; color: var(--steel-dim); }
.plan ul { list-style: none; padding: 0; margin: 22px 0 26px; }
.plan li { padding: 7px 0 7px 24px; position: relative; font-size: 15px; color: var(--paper-dim); }
.plan li::before {
  content: ""; position: absolute; left: 2px; top: 13px;
  width: 11px; height: 6px; border-left: 1.5px solid var(--azure);
  border-bottom: 1.5px solid var(--azure); transform: rotate(-45deg);
}
.plan .btn { margin-top: auto; text-align: center; }
.plan .who {
  font-size: 14.5px; color: var(--ice); margin: 14px 0 0; min-height: 44px;
  padding-top: 13px; border-top: 1px solid var(--rule);
}

/* A tinted band, so a long page has a rhythm instead of one flat dark field.
   Alternated rather than applied everywhere — the point is the change. */
section.band {
  background:
    linear-gradient(180deg, rgba(94,168,240,.045), transparent 40%),
    var(--ink-2);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
section.band .cell { background: var(--ink); }
section.band .cell:hover { background: var(--ink-3); }

/* A small metallic chip above a card heading. Drawn with a border and a
   gradient rather than an icon font, so there is no third file to load and
   nothing to go missing. */
.chip {
  width: 34px; height: 34px; border-radius: 9px; margin-bottom: 14px;
  display: grid; place-items: center;
  border: 1px solid var(--rule-2);
  background: linear-gradient(160deg, rgba(191,217,242,.16), rgba(94,168,240,.05));
  box-shadow: 0 1px 0 rgba(255,255,255,.10) inset;
  color: var(--ice);
}
.chip svg { width: 17px; height: 17px; display: block; fill: none;
            stroke: currentColor; stroke-width: 1.6;
            stroke-linecap: round; stroke-linejoin: round; }
.cell:hover .chip { border-color: var(--azure-dp); color: #fff; }

/* Faint drawing-board grid, for the top of the page only. Very low contrast:
   it should register as texture, not as a pattern anybody looks at. */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(159,179,200,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(159,179,200,.05) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: radial-gradient(70% 60% at 30% 40%, #000 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(70% 60% at 30% 40%, #000 0%, transparent 72%);
}
.hero { position: relative; }

/* Forms */
.field { margin-bottom: 18px; }
/* Sentence case, in the page's own typeface. Capitals in monospace read as a
   control panel, and a contact form is not one — it is somebody being asked
   their name. */
label {
  display: block; font-size: 13.5px; font-weight: 500;
  color: var(--steel-dim); margin-bottom: 7px;
}
label .opt { color: var(--rule-2); font-weight: 400; }
input[type=text], input[type=email], input[type=tel], select, textarea {
  width: 100%; padding: 12px 14px; background: var(--ink-2);
  border: 1px solid var(--rule); border-radius: var(--r);
  color: var(--paper); font-family: var(--sans); font-size: 15.5px;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--azure-dp); background: var(--ink-3);
  box-shadow: 0 0 0 3px rgba(94,168,240,.14);
}
textarea { resize: vertical; min-height: 150px; }
.hp { position: absolute !important; left: -9999px !important; }

.note {
  border: 1px solid var(--rule); border-left: 3px solid var(--azure);
  border-radius: var(--r);
  padding: 14px 18px; margin-bottom: 24px; font-size: 14.5px; color: var(--paper-dim);
  background: var(--ink-2);
}
.note.bad { border-left-color: #d16b6b; }
.note.good { border-left-color: #7fb98a; }

/* Footer */
footer {
  border-top: 1px solid var(--rule); margin-top: 40px; padding: 44px 0 34px;
}
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 34px; }
@media (max-width: 860px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .foot-grid { grid-template-columns: 1fr; } }
.foot-grid h4 { font-size: 13.5px; color: var(--steel); margin: 0 0 14px; font-weight: 600; }
.foot-grid ul { list-style: none; margin: 0; padding: 0; }
.foot-grid li { margin-bottom: 9px; }
.foot-grid a { color: var(--paper-dim); font-size: 14px; }
.foot-grid a:hover { color: var(--paper); }
.foot-bottom {
  border-top: 1px solid var(--rule); margin-top: 34px; padding-top: 22px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: var(--steel-dim);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
}

/* Anything that should not move for somebody who asked for less motion. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

/* ==========================================================================
   The challenge on the contact form.

   Styled to be obviously part of the form rather than bolted to the bottom of
   it: same hairline box as everything else, same monospace label, no logos and
   no branding for somebody else's product.
   ========================================================================== */

.cap {
  border: 1px solid var(--rule);
  border-radius: var(--r);
  padding: 16px 18px 14px;
  margin: 4px 0 20px;
  background: var(--ink-2);
}
.cap-bad { border-color: #7d4444; }

.cap-q { font-size: 14.5px; color: var(--paper-dim); margin-bottom: 12px; }
.cap-err {
  font-size: 13.5px; line-height: 1.5; color: #e6b3b3;
  background: #3a1f1f; border-radius: 3px; padding: 9px 12px; margin-bottom: 12px;
}

/* ---- shapes ---- */
.cap-tiles { display: flex; gap: 8px; flex-wrap: wrap; }
.cap-tile {
  width: 58px; height: 58px; padding: 0; cursor: pointer;
  background: var(--ink); border: 1px solid var(--rule); border-radius: var(--r);
  color: var(--steel); display: grid; place-items: center;
  transition: border-color .12s, background .12s, color .12s;
}
.cap-tile svg { width: 34px; height: 34px; fill: currentColor; }
.cap-tile:hover { background: var(--ink-3); color: var(--paper); }
/* A visible focus ring, because this control is reached by keyboard more than
   most and an invisible focus state makes it unusable. */
.cap-tile:focus-visible { outline: 2px solid var(--steel); outline-offset: 2px; }
.cap-tile.on { border-color: var(--azure); background: rgba(94,168,240,.14); color: #fff; }

/* ---- words ---- */
.cap-words { display: flex; gap: 8px; flex-wrap: wrap; }
.cap-word { display: block; margin: 0; }
.cap-word input { position: absolute; opacity: 0; width: 0; height: 0; }
.cap-word span {
  display: block; padding: 10px 16px; cursor: pointer;
  background: var(--ink); border: 1px solid var(--rule); border-radius: 3px;
  font-size: 15px; color: var(--paper-dim);
}
.cap-word span:hover { background: var(--ink-3); color: var(--paper); }
.cap-word input:checked + span { border-color: var(--azure); color: #fff; background: rgba(94,168,240,.14); }
.cap-word input:focus-visible + span { outline: 2px solid var(--steel); outline-offset: 2px; }

/* ---- the alternative ---- */
.cap-alt { margin-top: 12px; }
.cap-link {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-size: 13.5px; color: var(--steel-dim);
  text-decoration: underline; text-underline-offset: 3px;
}
.cap-link:hover { color: var(--paper); }

/* ==========================================================================
   The number and the address, which are pictures.

   Sized in ems so they track the type around them, and given the same
   baseline nudge every inline image needs so they do not sit on the line like
   a dropped brick. See includes/contact.php for why they are pictures at all.
   ========================================================================== */
.contact-img {
  display: inline-block; vertical-align: -.18em;
  width: auto; max-width: 100%;
  image-rendering: -webkit-optimize-contrast;
}
.contact-link { display: inline-block; line-height: 0; border-radius: 2px; }
.contact-link:hover .contact-img { filter: brightness(1.18); }
.contact-link:focus-visible { outline: 2px solid var(--steel); outline-offset: 3px; }