/* ==========================================================================
   Harbor — marketing site
   Light, product-first monochrome. Paper-white surfaces, near-black type,
   hairline borders, generous whitespace. The only color on the page is
   Harbor itself, moving inside the framed hero video card.
   Hierarchy comes from type scale, weight, spacing and hairlines — never hue.
   ========================================================================== */

/* --- Fonts ---------------------------------------------------------------- */

@font-face {
  font-family: "InterVariable";
  src: url("assets/fonts/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* --- Tokens --------------------------------------------------------------- */
/* Names are frozen: success.html and the landing markup code against them. */

:root {
  color-scheme: light;

  --bg: #fafafa;
  --surface: #ffffff;
  --ink: #0a0a0a;
  --muted: #646464;
  --line: #e5e5e5;
  --radius: 12px;

  /* Layered soft shadow — a quiet floating-window lift, no color. */
  --shadow:
    0 1px 2px rgb(10 10 10 / 6%),
    0 8px 24px rgb(10 10 10 / 8%),
    0 24px 56px rgb(10 10 10 / 8%);

  --container: min(1120px, calc(100% - 48px));
  --section-y: 120px;

  --font-sans:
    "InterVariable", Inter, -apple-system, system-ui, sans-serif;
}

/* --- Reset / base --------------------------------------------------------- */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  min-width: 320px;
  margin: 0;
  color: var(--ink);
  background: var(--bg);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: inherit;
}

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

/* --- Type scale ----------------------------------------------------------- */
/* Scale, weight and tracking carry the hierarchy on a monochrome page. */

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 20px;
  font-size: clamp(2.8rem, 6vw, 4.5rem);
  font-weight: 640;
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

h2 {
  margin-bottom: 16px;
  font-size: clamp(1.9rem, 3.6vw, 2.6rem);
  font-weight: 620;
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

h3 {
  margin-bottom: 10px;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

p {
  margin-bottom: 16px;
}

.eyebrow {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* --- Buttons -------------------------------------------------------------- */

.button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: 10px;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 560;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition:
    transform 160ms ease,
    background-color 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease;
}

.button.primary {
  color: var(--surface);
  background: var(--ink);
  border-color: var(--ink);
}

.button.primary:hover {
  background: #000000;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgb(10 10 10 / 16%);
}

.button.secondary {
  color: var(--ink);
  background: var(--surface);
  border-color: var(--line);
}

.button.secondary:hover {
  border-color: var(--ink);
  transform: translateY(-1px);
}

.button:active {
  transform: translateY(0);
}

/* Focus rings on every interactive element. */
a:focus-visible,
.button:focus-visible,
button:focus-visible,
nav a:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 6px;
}

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

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 100;
  padding: 10px 14px;
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--surface);
  text-decoration: none;
  transform: translateY(-160%);
}

.skip-link:focus {
  transform: translateY(0);
}

/* Full-bleed sticky bar; content constrained via inline padding so the
   layout holds with or without an inner wrapper element. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 24px;
  padding-block: 14px;
  padding-inline: max(24px, calc((100% - 1120px) / 2));
  border-bottom: 1px solid var(--line);
  background: rgb(250 250 250 / 80%);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
}

/* Optional wrapper — if the markup nests content, keep it constrained + laid out. */
.header-inner {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 24px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 640;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.brand img {
  width: 28px;
  height: 28px;
}

.site-header nav {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-left: auto;
  color: var(--muted);
  font-size: 0.92rem;
}

.site-header nav a {
  text-decoration: none;
  transition: color 160ms ease;
}

.site-header nav a:hover {
  color: var(--ink);
}

/* The one filled action in the bar — reads as a button without a variant class. */
.header-cta {
  margin-left: 8px;
  color: var(--surface);
  background: var(--ink);
  border-color: var(--ink);
}

.header-cta:hover {
  background: #000000;
  transform: translateY(-1px);
}

/* Compact header Download button. */
.site-header .button {
  min-height: 38px;
  padding: 0 16px;
  font-size: 0.88rem;
}

/* --- Layout helpers ------------------------------------------------------- */

main {
  display: block;
  scroll-margin-top: 84px;
}

.section {
  scroll-margin-top: 84px;
  width: var(--container);
  margin-inline: auto;
  padding: var(--section-y) 0;
  border-top: 1px solid var(--line);
}

.section-heading {
  max-width: 640px;
  margin-bottom: 48px;
}

.section-heading p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 1.05rem;
}

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

.hero {
  width: var(--container);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 56px;
  padding: 96px 0 var(--section-y);
}

.hero-copy {
  max-width: 720px;
}

.hero-copy .lede {
  max-width: 620px;
  margin-bottom: 32px;
  color: var(--muted);
  font-size: clamp(1.1rem, 1.6vw, 1.25rem);
  line-height: 1.6;
}

.download-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}

.release-note {
  max-width: 560px;
  margin-bottom: 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.55;
}

/* Quiet inline link — used for the SHA256 checksum in the release note. */
.quiet-link {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  transition: border-color 160ms ease;
}

.quiet-link:hover {
  border-color: var(--ink);
}

/* Signature element — framed video card floating like a macOS window. */
.hero-media {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.hero-media-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.hero-media-bar span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--line);
}

.hero-video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--bg);
  /* Inherit the card's rounded corners when no chrome bar is present. */
  border-bottom-left-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
}

/* Click-to-play overlay (small viewports / Save-Data — revealed by the
   hero script). The [hidden] guard must stay: a bare display rule would
   override the hidden attribute and show the badge on desktop too. */
.play-badge {
  position: absolute;
  left: 50%;
  top: calc(50% + 18px); /* optical center below the 36px chrome bar */
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 24px;
  border: 1px solid var(--line);
  border-radius: 999px;
  transform: translate(-50%, -50%);
  color: var(--ink);
  background: rgb(255 255 255 / 92%);
  box-shadow: var(--shadow);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 560;
  cursor: pointer;
}

.play-badge[hidden] {
  display: none;
}

/* --- Features — plain articles, no boxes, hairline separated -------------- */

.feature-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px 32px;
}

.feature-grid article {
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.feature-grid p {
  margin-bottom: 0;
  color: var(--muted);
  line-height: 1.6;
}

/* --- Pro — the one allowed panel ----------------------------------------- */

.pro-panel {
  display: grid;
  align-items: start;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 64px);
  padding: clamp(32px, 5vw, 56px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.pro-price {
  margin: 4px 0 16px;
  font-size: 1rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.pro-price strong {
  display: block;
  margin-bottom: 6px;
  color: var(--ink);
  font-size: 3rem;
  font-weight: 640;
  letter-spacing: -0.02em;
  line-height: 1;
}

.pro-note {
  max-width: 460px;
  margin-top: 18px;
  margin-bottom: 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.6;
}

/* Three callouts, one row — spans both panel columns, mirrors .feature-grid. */
.pro-features {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.pro-features li {
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.pro-features h3 {
  margin-bottom: 6px;
}

.pro-features p {
  margin-bottom: 0;
  color: var(--muted);
  line-height: 1.6;
}

/* Concrete scenario line under each Pro feature. */
.pro-usecase {
  margin-top: 12px;
  font-size: 0.92rem;
  line-height: 1.55;
}

.pro-usecase strong {
  color: var(--ink);
  font-weight: 600;
}

/* Horizontal 3-step activation strip — numbered ink markers, hairline links. */
.pro-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.pro-steps li {
  position: relative;
  padding: 0 24px;
  counter-increment: step;
}

.pro-steps li::before {
  display: flex;
  width: 32px;
  height: 32px;
  margin-bottom: 14px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ink);
  border-radius: 50%;
  color: var(--ink);
  font-size: 0.85rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  content: counter(step);
}

/* Hairline connectors between steps. */
.pro-steps li::after {
  position: absolute;
  top: 16px;
  left: calc(-50% + 40px);
  width: calc(100% - 48px);
  height: 1px;
  background: var(--line);
  content: "";
}

.pro-steps li:first-child::after {
  display: none;
}

.pro-steps h3 {
  margin-bottom: 6px;
}

.pro-steps p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.55;
}

/* --- Product screenshots — same framed-window language as the hero card --- */

.trust-media,
.pro-media {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.trust-media img,
.pro-media img {
  display: block;
  width: 100%;
  height: auto;
}

.pro-media figcaption {
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.85rem;
}

/* --- Trust ---------------------------------------------------------------- */

/* Copy reads first; the full-desktop shot lands wide beneath it. */
.trust-list {
  display: grid;
  gap: 24px;
}

.trust-media-wide {
  margin-top: 56px;
}

.trust-media-wide figcaption {
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.85rem;
}

.trust-list p {
  max-width: 640px;
  margin-bottom: 0;
  color: var(--muted);
  line-height: 1.65;
}

.trust-list strong {
  color: var(--ink);
  font-weight: 600;
}

/* --- Changelog ------------------------------------------------------------ */

.changelog {
  display: grid;
  gap: 20px;
}

.changelog h3 {
  margin-bottom: 4px;
}

.changelog ul {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.changelog li {
  padding-left: 20px;
  position: relative;
  color: var(--muted);
  line-height: 1.6;
}

.changelog li::before {
  position: absolute;
  left: 0;
  content: "—";
  color: var(--line);
}

/* Muted, tabular dates for changelog / port-like data. */
.changelog time,
.changelog .date {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  font-size: 0.9rem;
}

.changelog a {
  color: var(--ink);
  font-weight: 560;
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  transition: border-color 160ms ease;
}

.changelog a:hover {
  border-color: var(--ink);
}

/* --- Footer --------------------------------------------------------------- */

.site-footer {
  width: var(--container);
  margin-inline: auto;
  padding: 40px 0 56px;
  border-top: 1px solid var(--line);
}

.site-footer p {
  max-width: 760px;
  margin-bottom: 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.site-footer .footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 12px;
}

.site-footer a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--line);
  transition: border-color 160ms ease;
}

.site-footer a:hover {
  border-color: var(--ink);
}

/* --- Commerce / privacy policy ------------------------------------------- */

.policy-shell {
  width: min(760px, calc(100% - 48px));
  margin: 0 auto;
  padding: 64px 0 96px;
}

.policy-shell > .brand {
  display: inline-flex;
  margin-bottom: 72px;
}

.policy-shell h1 {
  max-width: 14ch;
}

.policy-updated {
  margin-bottom: 56px;
  color: var(--muted);
  font-size: 0.9rem;
}

.policy-shell section {
  padding: 32px 0;
  border-top: 1px solid var(--line);
}

.policy-shell section p {
  max-width: 68ch;
  color: var(--muted);
}

.policy-shell section a,
.policy-return a {
  color: var(--ink);
  text-underline-offset: 0.2em;
}

.policy-return {
  margin-top: 48px;
}

/* ==========================================================================
   Responsive — 880px (2-up grids, hero stacks) · 620px (single column)
   ========================================================================== */

@media (max-width: 880px) {
  :root {
    --section-y: 96px;
  }

  .hero {
    padding-top: 72px;
  }

  .feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 36px 28px;
  }

  .pro-panel {
    grid-template-columns: 1fr;
  }

  .pro-features {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .pro-steps {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .pro-steps li {
    padding: 0;
  }

  /* Vertical stack — drop the horizontal connectors. */
  .pro-steps li::after {
    display: none;
  }

  .site-header nav {
    gap: 18px;
  }
}

@media (max-width: 620px) {
  :root {
    --container: min(1120px, calc(100% - 32px));
    --section-y: 72px;
  }

  .hero {
    padding-top: 56px;
    gap: 40px;
  }

  .feature-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  /* Full-width buttons on the smallest screens. */
  .download-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .download-actions .button {
    width: 100%;
  }

  .site-header {
    padding-inline: max(16px, calc((100% - 1120px) / 2));
  }

  /* Keep the header nav from crowding — hide secondary links, keep CTA.
     The nav carried margin-left:auto, so the CTA takes it over to stay
     pinned to the right edge. */
  .site-header nav {
    display: none;
  }

  .header-cta {
    margin-left: auto;
  }

  .pro-price strong {
    font-size: 2.4rem;
  }

  .policy-shell {
    width: min(760px, calc(100% - 32px));
    padding-top: 40px;
  }

  .policy-shell > .brand {
    margin-bottom: 48px;
  }
}

/* ==========================================================================
   Motion — tiny by default, none when the user asks for none
   ========================================================================== */

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

  * {
    transition: none !important;
    animation: none !important;
  }

  .button:hover,
  .button.secondary:hover,
  .button.primary:hover {
    transform: none;
  }
}