/* GuardKite — alternative homepage world.
   Dark ledger: the audience reads timestamped records daily, so the page is
   built from rules, gutters and aligned columns rather than cards. Severity is
   the only saturated colour and it appears four times on the whole page. */

:root {
  --ink:      #0b1017;
  --ink-2:    #121a24;
  --ink-3:    #1b2531;
  --sans: "Archivo", system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --rule:     rgba(226, 234, 245, 0.13);
  --rule-2:   rgba(226, 234, 245, 0.07);
  --fg:       #e6edf6;
  --fg-2:     #aab6c6;
  --fg-3:     #7b8797;
  --accent:   #e6edf6;   /* actions are foreground weight, not a hue */
  --accent-2: #ffffff;
  --crit:     #ff7a7a;
  --shadow:   0 18px 44px -18px rgba(0, 0, 0, 0.85);
  --gutter:   clamp(1.25rem, 4vw, 4rem);
  --measure:  52ch;
}

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

html { color-scheme: dark; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}

/* Browser surfaces belong to the design too. */
::selection { background: var(--fg); color: var(--ink); }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--ink); }
::-webkit-scrollbar-thumb { background: var(--ink-3); border-radius: var(--r-control); border: 3px solid var(--ink); }
::-webkit-scrollbar-thumb:hover { background: #24313f; }
* { scrollbar-color: var(--ink-3) var(--ink); scrollbar-width: thin; caret-color: var(--crit); }
:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; border-radius: 2px; }

a { color: var(--fg); text-decoration-color: var(--rule); text-underline-offset: 0.22em; }
a:hover { color: var(--fg); text-decoration-color: currentColor; }

h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -0.028em; text-wrap: balance; }
h1 { font-size: var(--t-1); line-height: 1.02; letter-spacing: -0.035em; }
h2 { font-size: var(--t-3); line-height: 1.1; letter-spacing: -0.03em; }
h3 { font-size: 1.0625rem; letter-spacing: -0.012em; }
p { margin: 0; max-width: var(--measure); }

.wrap { width: min(1240px, 100% - var(--gutter) * 2); margin-inline: auto; }

/* ---- shell ---------------------------------------------------------- */
/* The masthead and its actions used to be restyled here as well as in
   shell.css, and this file loads second, so its copy won. `.masthead nav`
   also outranks shell's `.masthead-nav`, which is why the mobile panel
   stayed a horizontal scroller on the homepage. shell.css owns the header;
   nothing about it belongs in this file. */

.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .72rem 1.25rem; border-radius: var(--r-control);
  background: var(--accent); color: #0a0e13;
  font-weight: 700; font-size: .9375rem; text-decoration: none;
  border: 0; cursor: pointer;
  transition: background 160ms cubic-bezier(.2,.7,.3,1), transform 160ms cubic-bezier(.2,.7,.3,1);
}
.btn:hover { background: var(--accent-2); color: #0a0e13; transform: translateY(-1px); }
.btn-quiet { background: transparent; color: var(--fg); border: 1px solid var(--rule); }
.btn-quiet:hover { background: var(--ink-2); color: var(--fg); }

/* ---- sections ------------------------------------------------------- */
section { border-top: 1px solid var(--rule-2); }
section:first-of-type { border-top: 0; }
.band-tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.lede { color: var(--fg-2); font-size: 1.0625rem; margin-top: 1.15rem; max-width: var(--measure); }

/* heading gets more air above than below */
.band > .wrap > h2 { margin-top: .5rem; margin-bottom: 1rem; }

/* ---- hero ----------------------------------------------------------- */
/* One centred column. The dashboard banner below is now the hero's
   artifact, so the headline no longer shares the row with anything and the
   two-column split it used to need is gone. The h1 is capped well under the
   1240px wrap: centred type that runs the full width is hard to track back
   to the start of the next line. */
.hero { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); justify-items: center; text-align: center; }
/* 24ch sets the headline in three lines rather than four. The cap is still
   well under the 1240px wrap, which is the point: centred type running the
   full width is hard to track back to the start of the next line. */
.hero h1 { max-width: 24ch; }
/* 52ch left "when." alone on a third line. 34rem is the smallest width that
   pulls it up, so the lede sets in two without widening the measure the rest
   of the page reads at. */
.hero .lede { margin-inline: auto; max-width: 34rem; }
.hero-actions { display: flex; gap: .75rem; margin-top: 2rem; flex-wrap: wrap; justify-content: center; }

/* The first screen should end on the top edge of the product, not on empty
   ground: a visible sliver is what tells someone there is more below. Scoped
   to the hero and the banner rather than set on .band and .band-tight, which
   pace every other section on the page. */
.band.hero-band { padding-block: clamp(2.25rem, 4vw, 3.75rem) clamp(2rem, 3.5vw, 3.5rem); }
.band-tight.shot-band { padding-top: clamp(.75rem, 1.5vw, 1.5rem); }

/* ---- the product shot ------------------------------------------------ */
/* Centred by .wrap, so it shares a left and right edge with the hero above.
   The intrinsic width/height on the img reserves the box before the file
   lands, so the sections below it do not jump when it does. */
.shot { margin: 0; }
.shot img {
  display: block; width: 100%; height: auto;
  border: 1px solid var(--rule);
  border-radius: var(--r-panel);
  box-shadow: var(--shadow);
}

/* ---- walkthrough: a ledger, not three cards -------------------------- */
.ledger { margin-top: 2.5rem; border-top: 1px solid var(--rule); }
.step { display: grid; gap: .35rem 1.75rem; padding: 1.9rem 0; border-bottom: 1px solid var(--rule-2); align-items: start; }
@media (min-width: 54rem) { .step { grid-template-columns: 11rem 1fr; } }
.step-when { color: var(--fg-3); font-size: .78125rem; padding-top: .3rem; font-family: var(--mono); letter-spacing: -.01em; }
.step h3 { margin-bottom: .3rem; }
.step p { color: var(--fg-2); font-size: .9375rem; max-width: 49ch; }

/* ---- full-bleed differentiator -------------------------------------- */
/* Ground changes where the argument changes. 59% of this page sat on one
   undifferentiated run, so it now carries two raised blocks — the two
   differentiators, and the reassurance pair — each bounded above and below
   by base ground, which gives the scroll movements instead of one surface. */
.feature, .raised { background: var(--ink-2); }
.fig { margin-top: 2.6rem; }
.gk-figure svg { max-width: 100%; }

/* ---- coverage: browsable, not a stat -------------------------------- */
.cats { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2rem; }
.cat {
  display: inline-flex; align-items: baseline; gap: .45rem;
  padding: .42rem .72rem; border: 1px solid var(--rule); border-radius: var(--r-control);
  background: var(--ink-2); color: var(--fg-2); font-size: .8125rem; text-decoration: none;
  transition: border-color 140ms ease, color 140ms ease;
}
.cat:hover { border-color: var(--fg-3); color: var(--fg); background: var(--ink-3); }
.cat b { color: var(--fg); font-weight: 700; }
.cat span { color: var(--fg-3); font-family: var(--mono); font-size: .75rem; }

/* ---- spec strip: the objection handlers ------------------------------
   These were sized as a compressed strip, 13px term over 14px answer,
   against a 17px body default. Raising this section's ground turned it from
   a strip into a block people read, and the compression then read as small.
   The term stays mono and bold so it still reads as a label; the answer is
   body copy now, because that is what it is. */
.specs { display: grid; gap: 0; margin-top: 2rem; border-top: 1px solid var(--rule); }
@media (min-width: 46rem) { .specs { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 72rem) { .specs { grid-template-columns: repeat(3, 1fr); } }
.spec { padding: 1.4rem 1.5rem 1.4rem 0; border-bottom: 1px solid var(--rule-2); }
/* Sans, not mono. Mono on this site means a machine value — check ids,
   CIDRs, ports, regions and severity chips. These terms are English phrases, so mono claimed a register they
   do not have. Weight and colour carry the label instead.

   Same size as the answer, not smaller. The term is what you scan to find
   the answer you want, so it cannot be the smallest text in its own block;
   an earlier pass raised the answer to 16px and left the term at 14, which
   kept exactly that inversion. Hierarchy is weight and colour here. */
.spec dt { font-weight: 700; font-size: 1rem; letter-spacing: -.015em; color: var(--fg); }
.spec dd { margin: .35rem 0 0; color: var(--fg-2); font-size: 1rem; line-height: 1.6; max-width: 44ch; }

/* ---- proof ----------------------------------------------------------- */
.quote { border-left: 1px solid var(--rule); padding-left: 1.4rem; }
.quote p { font-size: 1.0625rem; color: var(--fg); }
.quote footer { color: var(--fg-3); font-size: .875rem; margin-top: .7rem; }

/* ---- close ----------------------------------------------------------- */
.close { text-align: center; }
.close p { margin-inline: auto; }

/* .colophon is shell.css's too: a second copy here set a different padding
   and size, so the homepage bar did not match the rest of the site. */

/* Figure partials are authored for the light page; they inherit currentColor,
   so they arrive here correctly except for the fixed severity red, which is
   too dark against this ground. */
.gk-figure .gk-critical      { stroke: var(--crit); }
.gk-figure .gk-critical-fill { fill:   var(--crit); opacity: .14; }
.gk-figure .gk-critical-text { fill:   var(--crit); }
.gk-figure .gk-crit-glow, .gk-figure .gk-edge-crit { stroke: var(--crit); }
/* the arrowhead is a fill, not a stroke, and was the one severity mark
   left on the base red while everything around it moved to --crit. */
.gk-figure .gk-arrow-crit { fill: var(--crit); }
.gk-figure .gk-link-crit { stroke: var(--crit); }
.gk-figure .gk-scan-crit { fill: var(--crit); }
.gk-figure .gk-caption       { color:  var(--fg-3); }

/* Coverage chips carry the section, so they get a real grid rather than a
   trailing row, and the catalogue link reads as the action it is. */
.cats { gap: .4rem; max-width: 62rem; }
.cat-all { border-color: var(--fg-3); }
.cat-all:hover { background: var(--fg); color: var(--ink); border-color: var(--fg); }
.cat-all b { color: inherit; }

@media (max-width: 40rem) {
  .hero-actions .btn { flex: 1 1 auto; justify-content: center; }
}

/* ---- site footer ---------------------------------------------------- */

/* The footer is shared and shell.css owns it. This file used to restate the
   whole block, from before the footer moved into an include, and the two
   copies had drifted: shell.css lays it out in four columns, this said
   three. Both matched at desktop width and alt-home.css loads last on this
   layout, so the fourth column — Privacy, Terms, LinkedIn and X — wrapped
   onto a second row and read as missing. It was correct on every other page,
   where shell.css loads last. The rest of the block was a duplicate of
   shell.css to the pixel, bar a 0.1rem margin. Deleted; shell.css governs.
   (An earlier note here claimed .colophon was homepage-only. It is not —
   the footer include is shared, so shell.css owns that too.) */
.colophon { border-top: 1px solid var(--rule-2); font-family: var(--mono); font-size: .75rem; }

/* The consent banner ships light-themed; bring it onto this ground. */
.cookie-consent, .cookie-consent-banner, #cookie-consent {
  background: var(--ink-2) !important;
  color: var(--fg-2) !important;
  border-top: 1px solid var(--rule) !important;
}
.cookie-consent a, .cookie-consent-banner a, #cookie-consent a { color: var(--fg) !important; }

/* ---- attack path: the one place motion carries meaning --------------- */
/* The traversal is the argument, so it draws itself once on entry rather
   than arriving as a finished picture. Nothing else on the page moves. */
@media (prefers-reduced-motion: no-preference) {
  /* Every connector carries pathLength="1", so its geometric length is
     normalised to 1 unit and one dash covers it exactly. A literal
     stroke-dasharray (this was 60) silently erases the tail of any
     connector longer than the constant: the iam-exposure curves run
     88-107 units and lost up to 44% of themselves. Stagger keys off an
     explicit data-step, because :nth-of-type counts <line> and <path>
     separately and gave two connectors the same delay. */
  .gk-figure svg .gk-link { stroke-dasharray: 1; stroke-dashoffset: 1; animation: trace 620ms cubic-bezier(.16,.84,.3,1) forwards; }
  .gk-figure svg .gk-link[data-step="1"] { animation-delay: 180ms; }
  .gk-figure svg .gk-link[data-step="2"] { animation-delay: 480ms; }
  .gk-figure svg .gk-link[data-step="3"] { animation-delay: 780ms; }
  .gk-figure svg .gk-link[data-step="4"] { animation-delay: 1080ms; }
  @keyframes trace { to { stroke-dashoffset: 0; } }
}

/* ---- an exit from each differentiator -------------------------------- */
.sec-exit { margin-top: 1.6rem; color: var(--fg-3); font-size: .875rem; max-width: 58ch; }

/* ---- mid-page action ------------------------------------------------- */
.midcta .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem;
  justify-content: space-between; padding-block: .5rem; }
.midcta p { color: var(--fg-2); font-size: .9375rem; max-width: 52ch; margin: 0; }

/* ---- proof: three quotes, attributed --------------------------------- */
/* .quotes now lives in shell.css: both layouts show these quotes. */

/* ---- affordance without colour --------------------------------------- */
/* The ground carries no accent by choice, so "clickable" has to come from
   weight and motion rather than hue. */
main a:not(.btn) {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, currentColor 38%, transparent);
  text-underline-offset: .22em;
  transition: text-decoration-color 140ms ease, color 140ms ease;
}
main a:not(.btn):hover { color: #fff; text-decoration-thickness: 2px; text-decoration-color: currentColor; }
main a:not(.btn):focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; border-radius: 2px; }
.cat { text-decoration: none !important; }

/* ---- material: the ground stops being a flat fill -------------------- */
/* Measured before this: two grounds, one shadow, zero gradients. A dark
   page with no depth reads as a default rather than a decision. */
body {
  background-image:
    radial-gradient(1100px 560px at 88% -12%, rgba(154,163,255,.030), transparent 60%),
    radial-gradient(900px 520px at 6% 106%,  rgba(94,207,192,.022), transparent 58%);
  background-attachment: fixed;
}
/* fine grain, so large dark areas have tooth instead of banding */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  opacity: .022; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Lift the real content above the fixed grain layer (z-index 0).
   .masthead is deliberately NOT in this list: shell.css gives it
   position:sticky/z-index:40, and restating position:relative/z-index:1
   here both un-stuck it and tied it with main — which then won on DOM
   order and painted the whole page over the nav dropdown, so the menu
   became unreachable a few pixels below the button. */
main, .siteftr { position: relative; z-index: 1; }

/* raised surfaces get a real edge, the way lit material does */
.feature {
  position: relative;
}
.feature::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.055), transparent 42%);
}

/* ---- rhythm: sections stop sharing one padding value ---------------- */
/* Every section measured 96/96, so the page had no pace. */
.band { padding-block: clamp(3.25rem, 6vw, 5.25rem); }
section:first-of-type .wrap { padding-block: clamp(1rem, 3vw, 2.5rem); }
.feature { padding-block: clamp(4.5rem, 9vw, 8rem); }
.midcta { padding-block: clamp(1.75rem, 3vw, 2.5rem); }
.proof  { padding-block: clamp(3rem, 5vw, 4.5rem); }

/* the two differentiators carry the argument, so they get more voice */
.feature h2 { font-size: var(--t-2); letter-spacing: -.035em; }
.feature .lede { font-size: 1.125rem; }

/* the illustrative marker, so the demo finding never reads as a claim */
.illus {
  font-family: var(--mono); font-size: .625rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--fg-3); border: 1px solid var(--rule); border-radius: var(--r-chip);
  padding: .08rem .3rem; margin-left: .45rem; vertical-align: middle;
}