/*
  GS VectorShell's own pages (home, contact, and the page for a missing address). One stylesheet, no
  scripts.

  These pages are neutral: ink, paper and greys, in light and dark. Colour belongs to the products. Each
  product has one colour (Twinmark's is teal), which shows here only on that product's own things, such
  as its card: see "Product colours" at the end. --brand is the teal in GS VectorShell's logo, used for
  a few words at most. Each product's pages (twinmark/) have their own stylesheet in the product's colour.

  Motion is CSS only, and none of it plays for visitors who ask for reduced motion.
*/

:root {
  color-scheme: light dark;
  --fg: #142321;
  --muted: #4f5f5c;
  --faint: #6f7f7c;
  --bg: #ffffff;
  --bg-alt: #f5f6f6;
  --card: #ffffff;
  --border: #dcdfe0;
  --brand: #0f766e;
  --accent: #142321;
  --accent-strong: #000000;
  --accent-soft: #eceff0;
  --on-accent: #ffffff;
  --link: #142321;
  --glow-a: rgba(20, 35, 33, 0.07);
  --glow-b: rgba(20, 35, 33, 0.04);
  --grid: rgba(20, 35, 33, 0.06);
  --shadow: 0 1px 2px rgba(16, 33, 31, 0.06), 0 18px 40px -14px rgba(16, 33, 31, 0.28);
  --shadow-lift: 0 2px 4px rgba(16, 33, 31, 0.06), 0 26px 50px -16px rgba(16, 33, 31, 0.32);
  --radius: 14px;
  --wide: 1120px;
  --font: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --display: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fg: #e9eeed;
    --muted: #a9b3b1;
    --faint: #87918f;
    --bg: #0b0e0e;
    --bg-alt: #101414;
    --card: #141919;
    --border: #2a3231;
    --brand: #2dd4bf;
    --accent: #f2f5f4;
    --accent-strong: #ffffff;
    --accent-soft: #1c2423;
    --on-accent: #0a1312;
    --link: #e9eeed;
    --glow-a: rgba(255, 255, 255, 0.05);
    --glow-b: rgba(255, 255, 255, 0.03);
    --grid: rgba(255, 255, 255, 0.04);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 22px 48px -16px rgba(0, 0, 0, 0.7);
    --shadow-lift: 0 2px 6px rgba(0, 0, 0, 0.5), 0 30px 60px -18px rgba(0, 0, 0, 0.8);
  }
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
}

body {
  margin: 0;
  color: var(--fg);
  background: var(--bg);
  font: 17px/1.6 var(--font);
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
}

a {
  color: var(--link);
  text-underline-offset: 3px;
}

a:focus-visible,
.btn:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 20;
  padding: 8px 14px;
  border-radius: 8px;
  color: var(--on-accent);
  background: var(--accent);
}

.skip:focus {
  left: 8px;
}

.inner {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 0 20px;
}

/* ---------- Header ---------- */

body > header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px max(20px, calc((100% - var(--wide)) / 2 + 20px));
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
}

.brand {
  display: inline-flex;
  flex: none;
}

.brand img {
  display: block;
  width: auto;
  height: 42px;
}

nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 2px 4px;
}

nav a {
  padding: 6px 12px;
  border-radius: 999px;
  color: var(--muted);
  font-size: 15.5px;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}

nav a:hover {
  color: var(--fg);
  background: var(--accent-soft);
}

nav a.cta {
  margin-left: 6px;
  padding: 7px 16px;
  color: var(--on-accent);
  background: var(--accent);
  font-weight: 600;
}

nav a.cta:hover {
  color: var(--on-accent);
  background: var(--accent-strong);
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(48px, 8vw, 104px) 0 clamp(48px, 7vw, 88px);
  isolation: isolate;
}

.hero-bg {
  position: absolute;
  inset: -20% -10% 0;
  z-index: -1;
  background:
    radial-gradient(40% 50% at 16% 22%, var(--glow-a), transparent 70%),
    radial-gradient(35% 45% at 88% 12%, var(--glow-b), transparent 70%),
    radial-gradient(45% 40% at 70% 78%, var(--glow-a), transparent 75%);
  animation: drift 24s ease-in-out infinite alternate;
}

.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(var(--grid) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0 / 44px 44px;
  -webkit-mask-image: radial-gradient(70% 60% at 50% 30%, #000, transparent);
  mask-image: radial-gradient(70% 60% at 50% 30%, #000, transparent);
}

@keyframes drift {
  to {
    transform: translate3d(3%, 4%, 0) scale(1.06);
  }
}

.hero .inner {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
  align-items: center;
  gap: clamp(24px, 5vw, 72px);
}

.eyebrow {
  margin: 0 0 14px;
  color: var(--muted);
  font: 650 13.5px/1.2 var(--font);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  font: 750 clamp(38px, 6vw, 68px) / 1.04 var(--display);
  letter-spacing: -0.035em;
}

/* A few words of the headline in the logo's teal. */
.hl {
  color: var(--brand);
}

.lead {
  max-width: 34em;
  margin: 22px 0 0;
  color: var(--muted);
  font-size: clamp(18px, 2vw, 21px);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 30px 0 0;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--fg);
  background: color-mix(in srgb, var(--card) 80%, transparent);
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s, border-color 0.15s;
}

.btn:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}

.btn.primary {
  border-color: transparent;
  color: var(--on-accent);
  background: var(--accent);
}

.btn.primary:hover {
  background: var(--accent-strong);
}

/* A shorter top, for a page with only a title. */
.hero.small {
  padding: clamp(40px, 6vw, 72px) 0 clamp(28px, 4vw, 44px);
}

.hero.small .inner {
  grid-template-columns: minmax(0, 1fr);
}

/* The mark, large, on a tile. */
.tile {
  justify-self: center;
  display: grid;
  place-items: center;
  width: min(100%, 340px);
  aspect-ratio: 1;
  border: 1px solid var(--border);
  border-radius: 28%;
  background: color-mix(in srgb, var(--card) 88%, transparent);
  box-shadow: var(--shadow-lift);
  animation: float 7s ease-in-out infinite alternate;
}

.tile img {
  width: 68%;
}

@keyframes float {
  to {
    transform: translateY(-10px) rotate(-1.2deg);
  }
}

/* ---------- Sections ---------- */

.band {
  padding: clamp(56px, 8vw, 96px) 0;
}

.band.tight {
  padding-top: clamp(20px, 3vw, 32px);
}

.band.alt {
  border-block: 1px solid var(--border);
  background: var(--bg-alt);
}

h2 {
  margin: 0 0 10px;
  font: 700 clamp(28px, 3.6vw, 40px) / 1.12 var(--display);
  letter-spacing: -0.025em;
}

.sub {
  max-width: 40em;
  margin: 0 0 36px;
  color: var(--muted);
  font-size: 18.5px;
}

/* ---------- Products ---------- */

.product {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
  padding: clamp(22px, 3.4vw, 40px);
  border: 1px solid var(--border);
  border-radius: calc(var(--radius) + 8px);
  background: var(--card);
  box-shadow: var(--shadow);
}

/* A product's card wears its colour along the top. */
.product:not(.soon) {
  border-top: 5px solid var(--accent);
}

.product + .product {
  margin-top: 22px;
}

.product h3 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font: 700 30px/1.15 var(--display);
  letter-spacing: -0.02em;
}

.product h3 img {
  width: 44px;
  height: 44px;
}

.badge {
  display: inline-block;
  margin: 14px 0 0;
  padding: 4px 12px;
  border-radius: 999px;
  color: var(--accent-strong);
  background: var(--accent-soft);
  font-size: 14px;
  font-weight: 600;
}

.product p {
  margin: 14px 0 0;
  color: var(--muted);
}

.ticks {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.ticks li {
  position: relative;
  margin-top: 8px;
  padding-left: 30px;
}

.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.28em;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--accent-soft);
}

.ticks li::after {
  content: "";
  position: absolute;
  left: 7px;
  top: calc(0.28em + 4px);
  width: 5px;
  height: 9px;
  border: solid var(--accent-strong);
  border-width: 0 2px 2px 0;
  transform: rotate(40deg);
}

.window {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-lift);
  transform: perspective(1400px) rotateY(-5deg) rotateX(2deg);
  transition: transform 0.4s;
}

.product:hover .window {
  transform: none;
}

.window img {
  display: block;
  width: 100%;
}

.product.soon {
  grid-template-columns: minmax(0, 1fr);
  border-style: dashed;
  background: transparent;
  box-shadow: none;
}

.product.soon h3 {
  font-size: 24px;
}

/* ---------- How we build ---------- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
  gap: 18px;
}

.card {
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
}

.card .glyph {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  color: var(--bg);
  background: var(--fg);
}

.card .glyph svg {
  width: 24px;
  height: 24px;
}

.card h2,
.card h3 {
  margin: 16px 0 6px;
  font: 650 20px/1.25 var(--display);
  letter-spacing: 0;
}

.card .actions {
  margin-top: 18px;
}

.card .btn {
  overflow-wrap: anywhere;
}

.card .fine {
  margin-top: 12px;
  color: var(--faint);
  font-size: 14.5px;
}

.aside {
  max-width: 44em;
  margin: 28px 0 0;
  color: var(--muted);
}

.card p {
  margin: 0;
  color: var(--muted);
}

/* ---------- Contact, footer ---------- */

.contact p {
  max-width: 40em;
  margin: 0 0 22px;
  color: var(--muted);
  font-size: 18.5px;
}

footer {
  border-top: 1px solid var(--border);
  background: var(--bg-alt);
  color: var(--muted);
  font-size: 14.5px;
}

.foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 28px;
  max-width: var(--wide);
  margin: 0 auto;
  padding: 26px 20px;
}

.foot img {
  display: block;
  height: 34px;
  width: auto;
}

.foot p {
  margin: 8px 0 0;
}

.foot ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

footer a {
  color: var(--muted);
}

/* ---------- A page that isn't here ---------- */

.lost {
  max-width: 40em;
  margin: 0 auto;
  padding: clamp(56px, 10vw, 120px) 20px;
}

.lost h1 {
  font-size: clamp(34px, 5vw, 52px);
}

/* ---------- Narrow windows ---------- */

@media (max-width: 860px) {
  .hero .inner,
  .product {
    grid-template-columns: minmax(0, 1fr);
  }

  .tile {
    width: min(70%, 260px);
    order: -1;
    justify-self: start;
  }

  .window {
    transform: none;
  }
}

@media (max-width: 640px) {
  body {
    font-size: 16px;
  }

  body > header {
    position: static;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 10px 16px;
  }

  html {
    scroll-padding-top: 12px;
  }

  nav {
    justify-content: flex-start;
    margin-left: -10px;
  }

  .inner,
  .foot,
  .lost {
    padding-inline: 16px;
  }

  .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ---------- Less motion, when asked ---------- */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  .window {
    transform: none;
  }
}

/* ---------- Product colours ----------
   Put a product's class on something of that product's (its card, here) and everything inside takes its
   colour. A new product gets a set of its own: one hue, well away from the others', about as strong as
   these, with a version for dark; check its buttons and text for contrast in both. */

.twinmark {
  --accent: #0f766e;
  --accent-strong: #115e59;
  --accent-soft: #d5f5ef;
  --on-accent: #ffffff;
}

@media (prefers-color-scheme: dark) {
  .twinmark {
    --accent: #2dd4bf;
    --accent-strong: #5eead4;
    --accent-soft: #113833;
    --on-accent: #062a26;
  }
}

@media print {
  body > header,
  .hero-bg {
    display: none;
  }
}