/* ==========================================================================
   TWMD — the platform site
   www.twmd-fl.com

   Vanilla CSS, no framework, no external font. There is no @import and no
   font CDN.

   THE PALETTE IS NOT A NEW ONE. Every token below is copied from
   apps/supplements/public/styles.css, where it was SAMPLED from the
   owner-approved reference composition rather than guessed. This release is
   not authorised to invent branding, and a platform site whose navy is a few
   points off its own vertical's navy is a platform site that looks like a
   different company. The values are duplicated rather than shared because
   these are two independently deployable Pages projects with no build step
   between them — a shared file would have to be copied into each output
   directory by something, and there is nothing here to do the copying.

   The type stack is the same system stack for the same reason the vertical
   site gives: a marketing page that blocks its own first paint on a
   third-party font is slower for no gain the design needs.
   ========================================================================== */

/* ---------- palette, as sampled for the vertical site ---------- */
:root {
  --navy-950: #011226;
  --navy-900: #01152b;
  --navy-850: #041a30;
  --navy-800: #072038;
  --navy-750: #062440;   /* masthead */
  --navy-700: #0b2641;
  --navy-600: #12324f;
  --navy-500: #1e3851;

  --cyan-100: #d6f6ff;
  --cyan-200: #a3f5fd;
  --cyan-300: #7ce4ff;   /* primary action */
  --cyan-400: #4ec8ee;
  --cyan-500: #2ba3d4;

  --ice-100: #bee9ff;

  --paper: #eaf5fd;
  --paper-edge: #d3e6f4;
  --ink-900: #0d2340;
  --ink-700: #274257;
  --ink-500: #3c5670;

  --white: #ffffff;
  --white-80: rgba(255, 255, 255, .80);
  --white-64: rgba(255, 255, 255, .64);
  --white-40: rgba(255, 255, 255, .40);
  --white-14: rgba(255, 255, 255, .14);
  --white-08: rgba(255, 255, 255, .08);

  --font: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system,
          "Helvetica Neue", Arial, sans-serif;
  --font-display: "Segoe UI Variable Display", "Segoe UI", system-ui,
          -apple-system, "Helvetica Neue", Arial, sans-serif;

  --wrap: 1180px;
  --gut: clamp(20px, 4.6vw, 52px);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  background: var(--navy-900);
  color: var(--white);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3 { font-family: var(--font-display); font-weight: 700; margin: 0; line-height: 1.15; }
p, ul, ol { margin: 0; }
ul, ol { list-style: none; padding: 0; }

a { color: inherit; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

a:focus-visible, button:focus-visible {
  outline: 3px solid var(--cyan-300);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute; left: 50%; top: 0;
  transform: translate(-50%, -140%);
  z-index: 100;
  background: var(--cyan-300); color: #04121f;
  font-weight: 600; text-decoration: none;
  padding: .7rem 1.2rem; border-radius: 0 0 8px 8px;
  transition: transform .15s ease;
}
.skip-link:focus { transform: translate(-50%, 0); }


/* ==========================================================================
   SHARED PIECES
   ========================================================================== */

.eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin: 0 0 .85rem;
}
.eyebrow--cyan { color: var(--cyan-300); }
.eyebrow--ink  { color: var(--ink-500); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: .55em;
  font-family: var(--font);
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  text-decoration: none;
  padding: .82em 1.35em;
  border-radius: 7px;
  border: 1px solid transparent;
  transition: background-color .15s ease, transform .15s ease;
}
.btn--primary {
  background: var(--cyan-300);
  color: #04121f;
}
.btn--primary:hover { background: var(--cyan-200); }
.btn--primary:active { transform: translateY(1px); }
.btn--lg { font-size: 17px; padding: 1.02em 1.7em; }
.btn__arrow { font-size: 1.1em; line-height: 1; }

/* The secondary action beside the primary one. An anchor into this page, not
   a second button: two buttons of equal weight is two primary actions. */
.link-walk {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  text-decoration: none;
  color: var(--white-80);
  padding: .3rem .2rem;
}
.link-walk:hover { color: var(--white); }
.link-walk__icon { flex: none; width: 32px; height: 32px; color: var(--cyan-300); }
.link-walk__icon svg { width: 32px; height: 32px; }
.link-walk__text { display: block; }
.link-walk__title { display: block; font-weight: 600; font-size: 15px; }
.link-walk__sub { display: block; font-size: 13px; color: var(--white-40); }


/* ==========================================================================
   MASTHEAD
   ========================================================================== */

.masthead {
  background: var(--navy-750);
  border-bottom: 1px solid var(--white-08);
}

.masthead__inner {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.4vw, 30px);
  min-height: 74px;
  padding-block: 14px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  text-decoration: none;
  flex: none;
}
.brand__mark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 27px;
  letter-spacing: .02em;
  color: var(--white);
}
.brand__mark--sm { font-size: 21px; }

/* The promise, not a vertical. See the note in index.html: the slot after
   the mark holds an industry vertical on every other TWMD page, and this
   page has none — it is the level those sit beneath. */
.masthead__promise {
  font-size: 13px;
  font-weight: 600;
  color: var(--white-40);
  letter-spacing: .01em;
  margin: 0;
  padding-left: clamp(14px, 2.4vw, 30px);
  border-left: 1px solid var(--white-14);
}

.masthead__cta { margin-left: auto; flex: none; }

@media (max-width: 720px) {
  .masthead__inner { flex-wrap: wrap; row-gap: 12px; }
  .masthead__promise {
    order: 3;
    flex-basis: 100%;
    padding-left: 0;
    border-left: 0;
  }
  .masthead__cta { margin-left: auto; }
}


/* ==========================================================================
   THE SCENE

   The mark drawn at size, behind the copy. It is decorative and carries
   aria-hidden, so it must never be the only place something is said.
   ========================================================================== */

.scene {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 78% 8%, rgba(43, 163, 212, .20) 0%, rgba(43, 163, 212, 0) 62%),
    linear-gradient(180deg, var(--navy-800) 0%, var(--navy-850) 55%, var(--navy-900) 100%);
}

.scene__field {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-right: clamp(0px, 4vw, 90px);
  pointer-events: none;
}

.berg {
  width: clamp(300px, 34vw, 470px);
  height: auto;
  opacity: .30;
}
.berg__peak { fill: var(--ice-100); }
.berg__line { stroke: var(--cyan-300); stroke-width: 2; opacity: .5; }
.berg__mass { fill: var(--cyan-400); opacity: .55; }
.berg__mass--faint { fill: var(--cyan-200); opacity: .35; }

/* Below the point where the copy would run under it, the mark moves out of
   the way rather than being read through. */
@media (max-width: 900px) {
  .scene__field { align-items: flex-start; justify-content: center; padding: 0; }
  .berg { width: min(70vw, 340px); opacity: .13; }
}

.hero {
  position: relative;
  z-index: 1;
  padding-block: clamp(58px, 9vw, 118px);
}

.hero__lead { max-width: 41rem; }

.hero__title {
  font-size: clamp(38px, 6.4vw, 68px);
  letter-spacing: -.02em;
  margin-bottom: 1.35rem;
}
.hero__title-a, .hero__title-b { display: block; }
.hero__title-b { color: var(--cyan-300); }
.hero__tm { font-size: .32em; vertical-align: super; font-weight: 600; }

.hero__body {
  font-size: clamp(16px, 1.55vw, 19px);
  color: var(--white-80);
  max-width: 36rem;
}
.hero__body--sub {
  margin-top: 1rem;
  font-size: clamp(15px, 1.4vw, 17px);
  color: var(--white-64);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(16px, 2.6vw, 34px);
  margin-top: clamp(30px, 4vw, 46px);
}


/* ==========================================================================
   THE HIERARCHY

   Four rows. The state chip on the right is the only thing that varies
   between them, and it is a BADGE — background, border and padding — not one
   shade of text. Per CLAUDE.md's CM-90G standard, a state a reader has to
   measure to see is a state that is not being displayed.
   ========================================================================== */

.platform {
  background: var(--navy-700);
  padding-block: clamp(56px, 8vw, 104px);
  border-top: 1px solid var(--white-08);
}

.platform__title {
  font-size: clamp(30px, 4.2vw, 46px);
  letter-spacing: -.015em;
  margin-bottom: 1.2rem;
}

.platform__lead {
  max-width: 45rem;
  color: var(--white-64);
  font-size: clamp(15px, 1.4vw, 17px);
  margin-bottom: clamp(34px, 4.5vw, 54px);
}

.layers {
  display: grid;
  gap: 14px;
  counter-reset: layer;
}

.layer {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: clamp(16px, 2.4vw, 30px);
  padding: clamp(20px, 2.6vw, 30px);
  background: var(--white-08);
  border: 1px solid var(--white-14);
  border-left: 3px solid var(--cyan-500);
  border-radius: 10px;
}
.layer--platform { border-left-color: var(--cyan-300); background: rgba(124, 228, 255, .10); }
.layer--vertical { border-left-color: var(--cyan-400); }
.layer--intake   { border-left-color: var(--cyan-500); }
.layer--protected { border-left-color: var(--white-40); }

.layer__rank {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(20px, 2.4vw, 27px);
  color: var(--white-40);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.layer__name {
  font-size: clamp(18px, 1.9vw, 22px);
  margin-bottom: .3rem;
}

/* A hostname is an address, so it is set as one. */
.layer__host {
  font-family: Consolas, "SF Mono", Menlo, monospace;
  font-size: 13px;
  color: var(--cyan-200);
  margin-bottom: .6rem;
  word-break: break-word;
}

.layer__copy { color: var(--white-64); font-size: 15px; max-width: 46rem; }
.layer__copy strong { color: var(--white); font-weight: 600; }

.layer__link { margin-top: .85rem; }
.layer__link a {
  font-weight: 600;
  font-size: 15px;
  color: var(--cyan-300);
  text-decoration: none;
  border-bottom: 1px solid rgba(124, 228, 255, .45);
  padding-bottom: 1px;
}
.layer__link a:hover { border-bottom-color: var(--cyan-300); }

/* THE STATE CHIP. Boxed on purpose — see the section comment. */
.layer__state {
  flex: none;
  align-self: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: .42em .8em;
  border-radius: 999px;
  border: 1px solid;
}
.layer__state--here {
  background: var(--cyan-300);
  border-color: var(--cyan-300);
  color: #04121f;
}
.layer__state--live {
  background: rgba(78, 200, 238, .16);
  border-color: rgba(78, 200, 238, .62);
  color: var(--cyan-200);
}
.layer__state--closed {
  background: rgba(255, 255, 255, .09);
  border-color: rgba(255, 255, 255, .34);
  color: var(--white-64);
}

@media (max-width: 640px) {
  .layer {
    grid-template-columns: auto 1fr;
    row-gap: 12px;
  }
  .layer__state { grid-column: 2; justify-self: start; align-self: start; }
}


/* ==========================================================================
   THE FOUNDATION — the one light band, so the page has a floor
   ========================================================================== */

.found {
  background: var(--paper);
  color: var(--ink-700);
  padding-block: clamp(56px, 8vw, 104px);
  border-top: 1px solid var(--paper-edge);
}

.found .eyebrow--cyan { color: var(--cyan-500); }

.found__title {
  color: var(--ink-900);
  font-size: clamp(28px, 3.9vw, 43px);
  letter-spacing: -.015em;
  margin-bottom: clamp(30px, 4vw, 46px);
}

.found__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(28px, 4.4vw, 62px);
  align-items: start;
}

.found__copy p { font-size: clamp(15px, 1.4vw, 17px); }
.found__copy p + p { margin-top: 1.1rem; }

/* One column, explicitly. Auto-placement in a grid put every label of the
   vertical site's equivalent list into the wrong track (recorded in
   TWMD-PUBLIC-HIERARCHY-AND-SUPPLEMENTS-01), so the tracks are named here
   rather than inferred. */
.capabilities {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
.capabilities li {
  display: grid;
  grid-template-columns: 22px 1fr;
  align-items: center;
  gap: 12px;
  background: var(--white);
  border: 1px solid var(--paper-edge);
  border-radius: 8px;
  padding: .74rem .95rem;
  font-weight: 600;
  font-size: 15px;
  color: var(--ink-900);
}
.capabilities li::before {
  content: "";
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--cyan-500);
  /* The one data: URI the policy allows img-src for — a checkmark used as a
     mask, exactly as on the vertical site. */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 15px 15px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 15px 15px no-repeat;
}

.credentials {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 26px);
  margin-top: clamp(34px, 4.6vw, 58px);
  padding-top: clamp(28px, 3.6vw, 42px);
  border-top: 1px solid var(--paper-edge);
}
.credentials li {
  display: grid;
  grid-template-columns: 32px 1fr;
  align-items: center;
  gap: 14px;
  font-weight: 600;
  font-size: 14px;
  color: var(--ink-900);
}
.credentials svg { width: 32px; height: 32px; color: var(--cyan-500); }

@media (max-width: 900px) {
  .found__inner { grid-template-columns: 1fr; }
  .credentials { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .credentials { grid-template-columns: 1fr; }
}


/* ==========================================================================
   FOOTER
   ========================================================================== */

.foot {
  background: var(--navy-950);
  padding-block: clamp(40px, 5.4vw, 66px);
}

.foot__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(20px, 3vw, 44px);
  align-items: start;
}

.foot__brand { display: grid; gap: .8rem; }
.foot__note {
  color: var(--white-40);
  font-size: 14px;
  max-width: 38rem;
}

.foot__action { justify-self: end; }
.foot__action a {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-weight: 600;
  font-size: 15px;
  color: var(--cyan-300);
  text-decoration: none;
  border-bottom: 1px solid rgba(124, 228, 255, .45);
  padding-bottom: 2px;
}
.foot__action a:hover { border-bottom-color: var(--cyan-300); }

.foot__legal {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 24px;
  margin-top: clamp(24px, 3.4vw, 40px);
  padding-top: clamp(18px, 2.4vw, 26px);
  border-top: 1px solid var(--white-08);
  font-size: 13px;
  color: var(--white-40);
}
.foot__promise { font-weight: 600; color: var(--white-64); }

@media (max-width: 640px) {
  .foot__inner { grid-template-columns: 1fr; }
  .foot__action { justify-self: start; }
}


/* ==========================================================================
   404
   ========================================================================== */

.notfound { padding-block: clamp(70px, 11vw, 150px); background: var(--navy-800); }
.notfound__title { font-size: clamp(32px, 5vw, 52px); letter-spacing: -.02em; margin-bottom: 1rem; }
.notfound__copy { color: var(--white-64); max-width: 34rem; font-size: 16px; }
.notfound__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(16px, 2.6vw, 30px);
  margin-top: clamp(26px, 3.4vw, 40px);
}
.notfound__alt {
  font-weight: 600;
  font-size: 15px;
  color: var(--cyan-300);
  text-decoration: none;
  border-bottom: 1px solid rgba(124, 228, 255, .45);
  padding-bottom: 2px;
}
.notfound__alt:hover { border-bottom-color: var(--cyan-300); }