* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body, system-ui, -apple-system, "Segoe UI", sans-serif);
  line-height: 1.6;
}

h1, h2, h3 {
  font-family: var(--font-heading, inherit);
  text-transform: var(--heading-transform, none);
}

a {
  color: var(--accent-2);
}

/* Top bar */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 2rem;
  background: var(--surface);
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.brand-tagline {
  margin: 0;
  font-size: 0.8rem;
  padding-left: 0.75rem;
  border-left: 1px solid var(--text-muted);
  color: var(--text-muted);
  letter-spacing: 0.02em;
}

/* The nav carries the popover attribute for the phone menu (see the end of
   this file). Undo the browser's popover box so on wider screens it's
   just a row of links in the top bar. */
.topbar nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  position: static;
  inset: auto;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: visible;
  background: none;
  color: inherit;
}

.menu-toggle {
  display: none;
}

.topbar nav a {
  color: var(--text);
  text-decoration: none;
}

.topbar nav a:hover {
  color: var(--accent-2);
}

/* Buttons */
.button {
  display: inline-block;
  padding: 0.6rem 1.25rem;
  background: var(--button-bg);
  color: var(--button-text);
  border-radius: var(--radius, 6px);
  text-decoration: none;
  font-weight: 600;
}

.topbar nav a.button {
  color: var(--button-text);
}

/* Hero */
.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 2rem;
  padding: 4rem 2rem 1.5rem;
  max-width: 1100px;
  margin: 0 auto;
}

.hero h1 {
  font-size: 2.75rem;
  line-height: 1.15;
  margin: 0 0 1rem;
}

.hero p {
  color: var(--text-muted);
  font-size: 1.15rem;
  margin: 0 0 1.5rem;
}

.hero-visual img {
  width: 100%;
  height: auto;
}

.hero-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}

.hero .audience {
  font-size: 0.95rem;
  margin: 0;
}

/* Sections */
.section {
  max-width: 1100px;
  margin: 0 auto;
  padding: 3rem 2rem;
}

.section h2 {
  font-size: 2rem;
  margin: 0 0 0.5rem;
}

.section-intro {
  color: var(--text-muted);
  margin: 0 0 2rem;
}

.page-header {
  padding-bottom: 0;
}

.page-header h1 {
  font-size: 2.5rem;
  margin: 0 0 0.5rem;
}

/* Error pages (404, 500): keep room above the footer */
.page-header.error-page {
  padding-bottom: 4rem;
}

.error-code {
  margin: 0 0 0.5rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* About page: the founder's story, in his own words */
.founder-quote {
  max-width: 70ch;
  margin: 1rem 0 0;
  padding-left: 1.5rem;
  border-left: 4px solid var(--accent);
}

.founder-quote footer {
  font-weight: 600;
  color: var(--text-muted);
}

/* Long-form text, like the privacy policy: a comfortable line length */
.prose > * {
  max-width: 70ch;
}

.section.prose h2 {
  margin: 2rem 0 0.5rem;
  font-size: 1.4rem;
}

.prose p {
  line-height: 1.65;
}

/* Cards */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

.card {
  background: var(--surface);
  padding: 1.5rem;
  border-radius: var(--radius, 6px);
  border-top: 4px solid var(--accent);
}

.card h3 {
  margin: 0 0 0.5rem;
}

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

.card ul {
  margin-top: 0.75rem;
  padding-left: 1.1rem;
}

/* Services, grouped */
.service-group + .service-group {
  margin-top: 2.5rem;
}

/* Groups hold 4 services: 4 across on desktop, 2x2 on tablets, 1 on phones */
.service-group .card-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.service-group-title {
  margin: 1.5rem 0 1rem;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.service-group .card h4 {
  margin: 0 0 0.5rem;
  font-family: var(--font-heading, inherit);
  font-size: 1.1rem;
}

.card .service-price {
  margin-top: 0.75rem;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* Portal doors. A door is the card on the home page and the hero on the
   portal's landing page. They share one look so the transition between them
   reads as one object growing to fill the screen. */
.portal-door {
  --portal-tint: var(--accent);
  border-radius: var(--radius, 6px);
  border: 1px solid color-mix(in srgb, var(--portal-tint) 40%, transparent);
  background:
    radial-gradient(circle at 85% 15%,
                    color-mix(in srgb, var(--portal-tint) 40%, transparent),
                    transparent 60%),
    var(--surface);
  color: var(--text);
}

.portal-door[data-portal="software-teams"] {
  --portal-tint: var(--accent-2);
}

/* Pairs each home page card with its landing page hero for the transition.
   Every slug in PORTALS needs a line here. */
.portal-door[data-portal="business"] {
  view-transition-name: portal-business;
}

.portal-door[data-portal="software-teams"] {
  view-transition-name: portal-software-teams;
}

.portal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

.portal-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.5rem;
  min-height: 18rem;
  padding: 2rem;
  text-decoration: none;
}

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

.portal-label {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--portal-tint);
}

.portal-title {
  margin: 0;
  font-size: 1.75rem;
  line-height: 1.2;
}

.portal-cta {
  margin-top: 0.75rem;
  font-weight: 600;
  color: var(--portal-tint);
}

.portal-arrow {
  display: inline-block;
}

.portal-card:hover {
  box-shadow: 0 12px 32px color-mix(in srgb, var(--portal-tint) 30%, transparent);
}

.portal-card:focus-visible {
  outline: 3px solid var(--accent-2);
  outline-offset: 4px;
}

/* Motion only for people who haven't asked their system for less of it. */
@media (prefers-reduced-motion: no-preference) {
  /* Cross-document view transitions: the browser animates between pages.
     Browsers without support just load the next page normally. */
  @view-transition {
    navigation: auto;
  }

  .portal-card,
  .portal-arrow {
    transition: transform 200ms ease, box-shadow 200ms ease;
  }

  .portal-card:hover {
    transform: translateY(-4px);
  }

  .portal-card:hover .portal-arrow {
    transform: translateX(4px);
  }
}

/* How we work */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.step {
  background: var(--surface);
  padding: 1.5rem;
  border-radius: var(--radius, 6px);
}

.step h3 {
  margin: 0.25rem 0 0.5rem;
}

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

.step-number {
  color: var(--accent);
  font-size: 2rem;
  font-weight: 700;
}

/* Contact and footer */
.contact {
  background: var(--surface);
  text-align: center;
}

.contact-direct-line {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 0.75rem;
  color: var(--text-muted);
}

.footer {
  text-align: center;
  padding: 2rem;
  color: var(--text-muted);
}

.footer p {
  margin: 0.25rem 0;
}

/* Phones: stack the hero into one column */
@media (max-width: 800px) {
  .hero {
    grid-template-columns: 1fr;
  }

  .topbar {
    padding: 0.75rem 1rem;
  }

  .topbar nav {
    gap: 1rem;
  }
}

@media (max-width: 480px) {
  .brand-tagline {
    display: none;
  }
}

/* Phone menu. The browser opens and closes the nav popover from the Menu
   button, and closes it on Esc or a tap outside. js/nav.js adds closing on
   Tab-out and arrow keys, but the menu works without it.
   Browsers without popover support skip this block and keep the row of
   links, so nothing breaks for them. */
@media (max-width: 800px) {
  @supports selector(:popover-open) {
    .menu-toggle {
      display: inline-block;
      padding: 0.5rem 1rem;
      font: inherit;
      font-weight: 600;
      color: var(--text);
      background: none;
      border: 1px solid var(--text-muted);
      border-radius: var(--radius, 6px);
      cursor: pointer;
    }

    .menu-toggle:hover {
      border-color: var(--accent-2);
    }

    .menu-toggle:focus-visible {
      outline: 3px solid var(--accent-2);
      outline-offset: 2px;
    }

    .topbar .site-nav:not(:popover-open) {
      display: none;
    }

    /* Open: a panel under the top bar, on the right */
    .topbar .site-nav:popover-open {
      position: fixed;
      inset: 5rem 1rem auto auto;
      min-width: 14rem;
      flex-direction: column;
      align-items: stretch;
      gap: 0.25rem;
      padding: 0.75rem;
      background: var(--surface);
      color: var(--text);
      border: 1px solid var(--text-muted);
      border-radius: var(--radius, 6px);
      box-shadow: 0 12px 32px rgb(0 0 0 / 0.5);
    }

    /* Big enough to tap comfortably (at least 44px tall) */
    .topbar .site-nav a {
      padding: 0.75rem;
    }

    .topbar .site-nav a.button {
      margin-top: 0.5rem;
      text-align: center;
    }
  }
}