@charset "utf-8";
/* ==========================================================================
   Homepage components, ported from _mockup-home-v3.html.
   Craft is v3's. Values now come from the token scale rather than from
   hand-tuned pixels, which is the only substantive change.
   ========================================================================== */

.v3hero { padding: var(--s-6) 0; background: var(--bg-soft); border-bottom: 1px solid var(--line); }

.artline {
  text-align: center; margin: 0 0 var(--s-1);
  font-size: clamp(23px, 1.4rem + .9vw, 31px); font-weight: 700;
  letter-spacing: -0.014em; line-height: 1.15; color: var(--navy);
}
.artsub {
  text-align: center; margin: 0 0 var(--s-1);
  font-size: clamp(15px, .9rem + .35vw, 19px); color: var(--ink-faint);
}
.artsub b { font-weight: 700; }
/* Three scopes, three colours, each the one its own product wears. They were
   two: rooms and buildings shared the accent, so the line read as one dark
   orange word beside another. */
.artsub .t1 { color: var(--roomiq-deep); }
.artsub .t2 { color: var(--spacesiq-deep); }
.artsub .t3 { color: var(--crossscan-deep); }
.artcat {
  text-align: center; margin: var(--s-2) auto 0; max-inline-size: 52ch;
  font-size: clamp(14px, .85rem + .25vw, 17px); line-height: 1.5; color: var(--ink-soft);
}

/* The supplied artwork. Its own ground is the soft band, so it lands flush. */
.heroart { position: relative; width: calc(100% - var(--s-6)); max-width: 1010px; margin: var(--s-4) auto 0; }
.heroart img { width: 100%; border-radius: var(--r-lg); }
/* The artwork has a white ground of its own. On a dark page that reads as a
   glare unless it is framed on purpose, so it becomes a plate. */
[data-theme="dark"] .heroart img { border: 1px solid var(--line); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .heroart img { border: 1px solid var(--line); } }
[data-theme="dark"] .hero-marker { background: transparent; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hero-marker { background: transparent; } }
.hero-marker {
  position: absolute; z-index: 1; width: 8%; aspect-ratio: 1;
  transform: translate(-50%,-50%); border-radius: 50%; display: grid;
  place-items: center; pointer-events: none; background: var(--bg-soft);
}
.hero-marker svg {
  box-sizing: content-box; width: 40%; height: 40%; padding: 17.5%;
  fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round;
  stroke-linejoin: round; border-radius: 50%; background: var(--marker);
}
.hero-marker-rooms    { left: 9.9%;  top: 15.3%; --marker: #0a6d75; }
.hero-marker-building { left: 50.55%; top: 15.3%; --marker: #0a6d75; }
.hero-marker-network  { left: 90.4%;  top: 15.3%; --marker: #102342; }

/* The eight, as text rather than pixels. */
.startline {
  margin: var(--s-6) 0 var(--s-2); padding-top: var(--s-4);
  border-top: 1px solid var(--line); font-size: var(--t-15); color: var(--ink-faint);
}
.startline b { color: var(--navy); }

.prodrow { list-style: none; display: grid; grid-template-columns: repeat(8, 1fr); }
.prodrow li { border-left: 1px solid var(--line); position: relative; }
.prodrow li:first-child { border-left: 0; }
.prodrow a { display: block; text-align: center; padding: var(--s-3) var(--s-3) var(--s-4); text-decoration: none; height: 100%; }
.prodrow img { margin: 0 auto var(--s-2); width: 34px; height: 34px; }
.prodrow b { display: block; font-size: var(--t-15); color: var(--navy); font-weight: 700; margin-bottom: 5px; }
.prodrow span { display: block; font-size: var(--t-13); line-height: 1.42; color: var(--ink-faint); }
@media (hover:hover) { .prodrow a:hover { background: var(--bg); } }
.prodrow a:focus-visible { outline-offset: -2px; }

/* Hover and keyboard explainer. Suppressed where hover does not exist,
   because a tooltip a finger cannot summon is only an obstacle. */
.pop { display: none; }
@media (hover:hover) and (min-width: 901px) {
  .pop {
    display: block; position: absolute; z-index: 60; top: calc(100% - 4px); left: 50%;
    transform: translateX(-50%) translateY(5px); width: 268px;
    padding: var(--s-4); background: var(--bg); border: 1px solid var(--line);
    border-radius: var(--r-md); box-shadow: 0 10px 28px -12px rgba(15,28,48,.25);
    opacity: 0; visibility: hidden; pointer-events: auto;
  }
  .pop::before {
    content: ""; position: absolute; top: -7px; left: 50%; margin-left: -7px;
    width: 12px; height: 12px; background: var(--bg);
    border-left: 1px solid var(--line); border-top: 1px solid var(--line);
    transform: rotate(45deg);
  }
  .pop p { font-size: var(--t-14); line-height: 1.55; color: var(--ink-soft); text-align: left; }
  .pop .when {
    display: block; margin-top: var(--s-3); padding-top: var(--s-2);
    border-top: 1px solid var(--line-soft); font: 400 var(--t-11)/1.4 var(--mono);
    letter-spacing: .07em; text-transform: uppercase; color: var(--accent-deep); text-align: left;
  }
  .prodrow li:hover .pop, .prodrow li:focus-within .pop { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
  .prodrow li:nth-child(-n+2) .pop { left: 0; transform: translateY(5px); }
  .prodrow li:nth-child(-n+2):hover .pop, .prodrow li:nth-child(-n+2):focus-within .pop { transform: translateY(0); }
  .prodrow li:nth-child(-n+2) .pop::before { left: 46px; }
  .prodrow li:nth-child(n+7) .pop { left: auto; right: 0; transform: translateY(5px); }
  .prodrow li:nth-child(n+7):hover .pop, .prodrow li:nth-child(n+7):focus-within .pop { transform: translateY(0); }
  .prodrow li:nth-child(n+7) .pop::before { left: auto; right: 40px; }
  @media (prefers-reduced-motion: no-preference) {
    .pop { transition: opacity 140ms ease, transform 140ms ease, visibility 140ms; }
  }
  .prodrow.pop-off li:hover .pop { opacity: 0; visibility: hidden; }
}

.dcp {
  display: flex; align-items: center; justify-content: center; gap: var(--s-4);
  margin-top: var(--s-4); flex-wrap: wrap;
  font: 600 var(--t-12)/1 var(--mono); letter-spacing: .2em;
}
.dcp i { flex: 0 0 64px; height: 1px; background: var(--line); }
.dcp em { color: var(--accent-deep); font-style: normal; }
/* All three in the accent, because that is how the logo sets them: the
   tagline above the wordmark is one colour. The first word used to be the
   green "good" token, which is a status colour and not a brand one. */
.dcp span { color: var(--accent-deep); }
@media (max-width: 560px) { .dcp i { display: none; } }

.v3hero-grid {
  display: grid; grid-template-columns: minmax(0,1fr) auto; gap: var(--s-7);
  align-items: start; padding-top: var(--s-5); margin-top: var(--s-5);
  border-top: 1px solid var(--line);
}
.award { display: grid; grid-template-columns: auto 1fr; gap: var(--s-3); align-items: center; }
.award img { width: 62px; }
.award b { display: block; font-size: var(--t-15); color: var(--navy); font-weight: 700; margin-bottom: 3px; }
.award span { font-size: var(--t-13); line-height: 1.45; color: var(--ink-faint); }

/* --- The spec strip ----------------------------------------------------- */
.spec { border-block: 1px solid var(--navy); background: var(--bg); }
.spec .grid { border-top: 0; margin-top: var(--s-3); padding-bottom: var(--s-5); }

/* --- The fork ----------------------------------------------------------- */
.pick-hero { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--s-7); }
.pick-hero li:nth-last-child(-n+2) { border-bottom: 0; }
.forkrule { height: 1px; background: var(--line); margin: var(--s-7) 0 var(--s-6); }
@media (max-width: 900px) {
  .pick-hero { grid-template-columns: 1fr; }
  .pick-hero li:nth-last-child(2) { border-bottom: 1px solid var(--line); }
}

/* --- The config diff ---------------------------------------------------- */
.cfgwrap { margin-top: var(--s-5); border-radius: var(--r-md); overflow: hidden; background: #0e1b2e; border: 1px solid #1e3350; }
.cfgbar { padding: var(--s-3) var(--s-5); font-size: var(--t-13); color: #c7d6ea; background: #132339; border-bottom: 1px solid rgba(120,150,190,.18); }
.cfgpair { display: grid; grid-template-columns: 1fr 1fr; }
.cfgcol { padding: var(--s-4) var(--s-5); border-left: 1px solid rgba(120,150,190,.14); min-width: 0; }
.cfgcol:first-child { border-left: 0; }
.cfghead { font: 400 var(--t-11)/1.4 var(--mono); letter-spacing: .06em; color: #9fb3d2; margin-bottom: var(--s-3); }
.cfghead .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: var(--s-2); }
.cfghead .dot.good { background: #3fb950; }
.cfghead .dot.bad  { background: #f0564a; }
pre.cfg { margin: 0; font: 400 var(--t-12)/1.55 var(--mono); color: #cdd9ec; overflow-x: auto; white-space: pre; }
pre.cfg .ln, pre.cfg .hl, pre.cfg .el { display: block; padding: 1px 8px; margin: 0 -8px; border-radius: 3px; }
pre.cfg .hl { background: rgba(200,50,50,.42); border-left: 3px solid #f0564a; color: #fff; font-weight: 600; padding-left: 9px; }
pre.cfg .el { color: #7d93b4; font-style: italic; }
pre.cfg .el::before { content: "\22EF\00a0"; }
.cfgnote { margin-top: var(--s-3); font-size: var(--t-12); line-height: 1.5; color: #f0a8a8; }
.cfgnote b { color: #ffd9d9; }
@media (max-width: 820px) { .cfgpair { grid-template-columns: 1fr; } .cfgcol { border-left: 0; border-top: 1px solid rgba(120,150,190,.14); } }

/* --- The jobs strip ----------------------------------------------------- */
.jobs { margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--line); }
.jobs ul { list-style: none; display: grid; grid-template-columns: repeat(5,1fr); }
.jobs li { border-left: 1px solid var(--line); }
.jobs li:first-child { border-left: 0; }
.jobs a { display: block; padding: 2px var(--s-4); text-decoration: none; }
.jobs li:first-child a { padding-left: 0; }
.jobs b { display: block; font-size: var(--t-15); color: var(--navy); font-weight: 700; margin-bottom: 6px; }
.jobs span { display: block; font-size: var(--t-13); line-height: 1.5; color: var(--ink-faint); }
@media (hover:hover) { .jobs a:hover b { color: var(--accent-deep); } }
@media (max-width: 900px) {
  .jobs ul { grid-template-columns: 1fr; }
  .jobs li { border-left: 0; border-top: 1px solid var(--line); }
  .jobs li:first-child { border-top: 0; }
  .jobs a { padding: var(--s-3) 0; }
}

/* --- Credentials -------------------------------------------------------- */
.creds { margin-top: var(--s-7); }
.creds b { font-size: var(--t-15); font-weight: 600; line-height: 1.35; margin-bottom: 0; }

/* --- FAQ grid on the homepage ------------------------------------------- */
.faqgrid > div { padding-bottom: var(--s-5); }
.faqgrid h3 { font-size: var(--t-17); color: var(--navy); margin-bottom: var(--s-2); }
.faqgrid p { font-size: var(--t-15); line-height: 1.62; color: var(--ink-soft); }

/* --- Portrait ----------------------------------------------------------- */
figure.shot.portrait { max-width: 303px; }
figure.shot.portrait figcaption { grid-template-columns: 1fr; }
figure.shot.portrait figcaption .credit { text-align: left; margin-top: 6px; }
figure.shot.inset.wide { max-width: 760px; }

@media (max-width: 900px) {
  .prodrow { grid-template-columns: repeat(4,1fr); }
  .prodrow li:nth-child(4n+1) { border-left: 0; }
  .prodrow li:nth-child(n+5) { border-top: 1px solid var(--line); }
  .v3hero-grid { grid-template-columns: 1fr; gap: var(--s-5); }
}
@media (max-width: 560px) {
  .prodrow { grid-template-columns: repeat(2,1fr); }
  .prodrow li:nth-child(odd) { border-left: 0; }
  .prodrow li:nth-child(n+3) { border-top: 1px solid var(--line); }
  figure.shot.portrait, figure.shot.portrait img { width: 100%; max-width: 100%; }
  .award { grid-template-columns: 1fr; }
}

/* --- The icon set. One language, tinted by the page accent. ------------- */
.prodrow .mark { margin: 0 auto var(--s-2); width: 34px; height: 34px; }
.prodrow a { transition: background-color var(--ease); }
.mega-col .mark { flex: 0 0 24px; width: 24px; height: 24px; margin-top: 2px; }

/* Config panes scroll rather than wrap, and the scrollbar is quiet. */
pre.cfg::-webkit-scrollbar { height: 6px; }
pre.cfg::-webkit-scrollbar-thumb { background: rgba(160,185,215,.35); border-radius: 3px; }
pre.cfg::-webkit-scrollbar-track { background: transparent; }
pre.cfg { scrollbar-width: thin; scrollbar-color: rgba(160,185,215,.35) transparent; }