/* Waypoint public site — shared styles.
   Consumes design-tokens.css (--wp-*). Body face resolved to Inter with
   JetBrains Mono numerals per BRAND.md (de facto standard, 14 Jul 2026). */

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 80px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--wp-bg);
  color: var(--wp-text);
  font-family: 'Inter', var(--wp-font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--wp-accent); text-decoration: none; }
a:hover { color: var(--wp-accent-hover); }

h1, h2, h3 { font-family: var(--wp-font-display); line-height: 1.15; margin: 0 0 0.5em; }
h1 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); font-weight: 600; letter-spacing: -0.015em; }
h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 600; letter-spacing: -0.01em; }
h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); font-weight: 600; }
p  { margin: 0 0 1em; }

.container { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.section { padding: 88px 0; }
.section.tight { padding: 56px 0; }

.kicker {
  font-family: var(--wp-font-display);
  font-size: 0.78rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.18em;
  color: var(--wp-accent-hover); /* text-sized accent: #3D7BFD is <4.5:1 on paper */
  margin: 0 0 12px;
}

/* Visually hidden but available to assistive tech */
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--wp-surface); color: var(--wp-text);
  padding: 10px 18px; border-radius: 0 0 10px 0; font-weight: 600;
}
.skip-link:focus { left: 0; }
.lede { font-size: 1.13rem; color: var(--wp-text-muted); max-width: 46rem; }
.center { text-align: center; }
.center .lede { margin-left: auto; margin-right: auto; }

.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.muted { color: var(--wp-text-muted); }

/* ---------- Wordmark / lockup ---------- */
.lockup { display: inline-flex; align-items: center; gap: 10px; color: inherit; }
.lockup:hover { color: inherit; }
.lockup svg { width: 26px; height: 26px; }
.wordmark {
  font-family: var(--wp-font-display);
  font-weight: var(--wp-wordmark-weight);
  text-transform: uppercase;
  letter-spacing: var(--wp-wordmark-tracking);
  font-size: 0.98rem;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--wp-font-display); font-weight: 600; font-size: 0.98rem;
  padding: 12px 22px; border-radius: 10px; border: 1.5px solid transparent;
  cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}
/* Filled buttons use the darker blue: white on #3D7BFD is only 3.85:1 */
.btn-primary { background: var(--wp-accent-hover); color: #fff; }
.btn-primary:hover { background: #1E4AB0; color: #fff; }
.btn-ghost { border-color: var(--wp-line); color: var(--wp-text); background: transparent; }
.btn-ghost:hover { border-color: var(--wp-text-muted); color: var(--wp-text); }
.on-dark .btn-primary { background: var(--wp-signal-on-dark); color: #0B1220; }
.on-dark .btn-primary:hover { background: var(--wp-signal); color: #fff; }
.on-dark .btn-ghost { border-color: #4A4F57; color: var(--wp-paper); }
.on-dark .btn-ghost:hover { border-color: #6A7078; color: #fff; }
.btn-lg { padding: 14px 28px; font-size: 1.05rem; }

/* ---------- Header / nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--wp-paper) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--wp-line);
}
.nav { display: flex; align-items: center; gap: 28px; height: 64px; }
.nav .lockup { margin-right: auto; }
.nav-links { display: flex; align-items: center; gap: 26px; }
.nav-links a:not(.btn) {
  color: var(--wp-text); font-size: 0.95rem; font-weight: 500;
}
.nav-links a:not(.btn):hover { color: var(--wp-accent); }
.nav-links a[aria-current="page"] { color: var(--wp-accent-hover); }
.nav-toggle { display: none; background: none; border: none; padding: 8px; cursor: pointer; color: var(--wp-text); }

/* ---------- Hero (dark) ---------- */
.on-dark { background: var(--wp-surface-deep); color: var(--wp-paper); }
.on-dark .kicker { color: var(--wp-signal-on-dark); }
.on-dark .lede { color: #A2A6AD; }
.on-dark .muted { color: #A2A6AD; }

/* The hero wears the brand's dusk lighthouse (the same client-supplied asset as the app's
   sign-in page, extracted from WaypointAuthBg.cs). The photo width-fits the top of the
   section and the gradient hands over to solid Surface Deep before the screenshot frame,
   so the copy sits on darkened sky and the transition into the section below is seamless. */
.hero {
  position: relative; overflow: hidden; padding: 88px 0 96px; text-align: center;
  background-color: var(--wp-surface-deep);
  background-image:
    linear-gradient(180deg, rgba(16, 18, 21, 0.35) 0%, rgba(16, 18, 21, 0.52) 38%,
                    rgba(16, 18, 21, 0.88) 64%, var(--wp-surface-deep) 76%),
    url('../assets/lighthouse.jpg');
  background-repeat: no-repeat, no-repeat;
  background-position: center top, center top;
  background-size: 100% 100%, 100% auto;
}
.hero .container { position: relative; }
.hero-copy { max-width: 52rem; margin: 0 auto; }
.hero h1 { color: #fff; }
.hero .lede { margin-left: auto; margin-right: auto; }
.hero .cta-row { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin: 28px 0 18px; }
.hero-trust { font-size: 0.88rem; color: #7C818A; margin-bottom: 8px; }
.hero-trust span { white-space: nowrap; }
.hero-trust span + span::before { content: "·"; margin: 0 10px; color: #3A3F46; }
.hero-shot { max-width: 1020px; margin: 52px auto 0; }

/* ---------- Browser-framed product screenshots ---------- */
.browser-frame {
  border-radius: 12px; overflow: hidden;
  border: 1px solid var(--wp-line); background: #fff;
  box-shadow: 0 18px 54px rgba(22, 24, 27, 0.14);
}
.browser-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 9px 12px; background: #ECEAE5; border-bottom: 1px solid #E0DDD6;
}
.browser-bar i { width: 9px; height: 9px; border-radius: 50%; background: #D6D2C9; }
.browser-bar span {
  margin-left: 8px; font-size: 11px; color: #75715F;
  background: #F7F6F3; border-radius: 6px; padding: 2px 12px;
}
.browser-frame img { display: block; width: 100%; height: auto; }
.hero .browser-frame { border-color: #24272B; box-shadow: 0 28px 84px rgba(0, 0, 0, 0.55); }

.pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 999px;
  background: #EFEDE8; color: var(--wp-text-muted); white-space: nowrap;
}
.pill.ok   { background: #E6F3EC; color: #1A6E44; }
.pill.warn { background: #FBEFDC; color: #96570A; }
.pill.bad  { background: #FBE9E7; color: #B3261E; }
.pill.blue { background: #E8EFFE; color: #2A5FD0; }

/* ---------- Cards / grids ---------- */
.card {
  background: var(--wp-surface); border: 1px solid var(--wp-line);
  border-radius: 14px; padding: 26px;
}
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.card h3 { font-size: 1.08rem; margin-bottom: 8px; }
.card p { color: var(--wp-text-muted); font-size: 0.95rem; margin: 0; }
.card .num {
  font-family: var(--wp-font-display); font-weight: 600; color: var(--wp-accent-hover);
  font-size: 0.85rem; letter-spacing: 0.12em; margin-bottom: 10px;
}
.icon-tile {
  width: 40px; height: 40px; border-radius: 10px;
  background: #E8EFFE; color: var(--wp-signal);
  display: flex; align-items: center; justify-content: center; margin-bottom: 14px;
}
.icon-tile svg { width: 20px; height: 20px; }

/* ---------- One-writer callout ---------- */
.law {
  margin-top: 26px; border-left: 3px solid var(--wp-accent);
  background: var(--wp-surface); border-radius: 0 12px 12px 0;
  padding: 18px 22px;
}
.law strong { font-family: var(--wp-font-display); }
.law p { margin: 4px 0 0; color: var(--wp-text-muted); font-size: 0.95rem; }

/* ---------- Feature tour ---------- */
.feature-row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px; align-items: center; padding: 44px 0;
}
.feature-row + .feature-row { border-top: 1px solid var(--wp-line); }
.feature-row.flip .feature-copy { order: 2; }
.feature-copy ul { list-style: none; padding: 0; margin: 18px 0 0; }
.feature-copy li {
  position: relative; padding-left: 26px; margin-bottom: 12px;
  color: var(--wp-text-muted); font-size: 0.98rem;
}
.feature-copy li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--wp-signal);
}
.feature-copy li strong { color: var(--wp-text); font-weight: 600; }

/* ---------- Integrations ---------- */
/* Area menu + provider tiles. A provider may sit in several areas (data-areas is
   space-separated) because one system often powers more than one pack. */
.int-browser {
  display: grid; grid-template-columns: 232px 1fr; gap: 30px;
  margin-top: 14px; align-items: start;
}
.int-areas { display: flex; flex-direction: column; gap: 2px; }
.int-area {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font: inherit; font-size: 0.92rem; text-align: left; cursor: pointer;
  padding: 9px 12px; border-radius: 10px;
  background: none; border: 1px solid transparent; color: var(--wp-text-muted);
  transition: background 0.15s ease, color 0.15s ease;
}
.int-area:hover { background: var(--wp-surface); color: var(--wp-text); }
.int-area.is-active {
  background: var(--wp-surface); border-color: var(--wp-line);
  color: var(--wp-text); font-weight: 600;
}
.int-count {
  font-size: 0.72rem; font-weight: 600; color: var(--wp-text-muted);
  background: #EFEDE8; border-radius: 999px; padding: 1px 8px;
}
.int-tiles {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(212px, 1fr));
  gap: 14px; align-content: start;
  /* Three rows, the rest scrolls. site.js replaces this max-height with one measured
     from a real tile so the cut lands exactly on a row boundary at any width; this
     value is the no-JS fallback (3 x 194px tile + 2 x 14px gap). */
  /* Scroll chaining stays ON: this is an inline region, not a modal, so reaching the
     last row should carry on scrolling the page rather than trapping the wheel. */
  max-height: 610px; overflow-y: auto; scrollbar-gutter: stable; padding-right: 4px;
}
.int-tiles::-webkit-scrollbar { width: 8px; }
.int-tiles::-webkit-scrollbar-track { background: transparent; }
.int-tiles::-webkit-scrollbar-thumb { background: #DCD9D1; border-radius: 999px; }
.int-tiles::-webkit-scrollbar-thumb:hover { background: #C7C3B9; }
.int-tile {
  background: var(--wp-surface); border: 1px solid var(--wp-line); border-radius: 14px;
  padding: 18px; display: flex; flex-direction: column; gap: 5px;
}
.int-tile[hidden] { display: none; }
.int-tile .pill { align-self: flex-start; margin-bottom: 4px; }
.int-tile .logo { height: 44px; display: flex; align-items: center; margin-bottom: 8px; }
/* Logos run from square (Xero) to 15:1 wordmarks (PortConnect). Capping width as well as
   height keeps them optically similar: wide marks shrink, square ones use the full box.
   .xwide opts the extreme ratios out of the width cap so they stay legible. */
.int-tile .logo img { max-height: 100%; max-width: 170px; width: auto; height: auto; object-fit: contain; }
.int-tile .logo img.xwide { max-width: 100%; }
.int-tile .name { font-family: var(--wp-font-display); font-weight: 600; font-size: 0.98rem; }
.int-tile .what { color: var(--wp-text-muted); font-size: 0.85rem; line-height: 1.45; }
.roadmap-note { font-size: 0.88rem; color: var(--wp-text-muted); margin-top: 22px; }

/* ---------- CTA band ---------- */
.cta-band { text-align: center; padding: 88px 0; }
.cta-band h2 { color: #fff; }
.cta-band .lede { margin: 0 auto 28px; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--wp-line); padding: 44px 0 36px; font-size: 0.88rem; }
.footer-grid { display: flex; align-items: flex-start; gap: 40px; flex-wrap: wrap; }
.footer-grid .lockup { margin-right: auto; }
.footer-links { display: flex; gap: 22px; flex-wrap: wrap; }
.footer-links a { color: var(--wp-text-muted); }
.footer-links a:hover { color: var(--wp-accent); }
.fineprint { color: var(--wp-text-muted); margin-top: 26px; max-width: 62rem; font-size: 0.8rem; line-height: 1.55; }

/* ---------- Pricing page ---------- */
.pricing-head { padding: 72px 0 8px; }
.notice {
  display: inline-flex; align-items: center; gap: 8px;
  background: #E8EFFE; color: #2A5FD0; border-radius: 999px;
  font-size: 0.85rem; font-weight: 500; padding: 7px 16px; margin-bottom: 20px;
}
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 40px 0 12px; align-items: stretch; }
.plan {
  background: var(--wp-surface); border: 1px solid var(--wp-line); border-radius: 16px;
  padding: 30px 28px; display: flex; flex-direction: column; position: relative;
}
.plan.featured { border: 2px solid var(--wp-accent); box-shadow: 0 16px 48px rgba(61, 123, 253, 0.13); }
.plan .flag {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--wp-accent); color: #fff; border-radius: 999px;
  font-family: var(--wp-font-display); font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.06em; padding: 4px 14px; white-space: nowrap;
}
.plan .plan-name { font-family: var(--wp-font-display); font-weight: 600; font-size: 1.25rem; margin: 0; }
.plan .plan-tag { color: var(--wp-text-muted); font-size: 0.92rem; margin: 2px 0 18px; }
.plan .price { font-family: 'JetBrains Mono', monospace; font-size: 2.3rem; font-weight: 600; letter-spacing: -0.02em; }
.plan .price small { font-size: 0.95rem; font-weight: 500; color: var(--wp-text-muted); font-family: 'Inter', sans-serif; letter-spacing: 0; }
.plan .per { color: var(--wp-text-muted); font-size: 0.82rem; margin-bottom: 20px; }
.plan ul { list-style: none; padding: 0; margin: 0 0 26px; flex: 1; }
.plan li { position: relative; padding-left: 26px; margin-bottom: 10px; font-size: 0.93rem; color: var(--wp-text-muted); }
.plan li strong { color: var(--wp-text); }
.plan li::before {
  content: ""; position: absolute; left: 2px; top: 7px; width: 9px; height: 9px;
  border-radius: 50%; background: var(--wp-signal);
}
.plan li.plus::before { background: #C9D8FB; }
.plan .btn { width: 100%; }

/* Comparison matrix */
.table-scroll { overflow-x: auto; border: 1px solid var(--wp-line); border-radius: 14px; background: var(--wp-surface); }
table.matrix { border-collapse: collapse; width: 100%; min-width: 720px; font-size: 0.92rem; }
.matrix th, .matrix td { padding: 12px 18px; text-align: left; border-bottom: 1px solid var(--wp-line); }
.matrix thead th {
  font-family: var(--wp-font-display); font-weight: 600; font-size: 0.95rem;
  background: var(--wp-surface); position: sticky; top: 0;
}
.matrix thead th:not(:first-child), .matrix td:not(:first-child) { text-align: center; width: 15%; }
.matrix .group th, .matrix .group td {
  font-family: var(--wp-font-display); font-weight: 600; font-size: 0.8rem;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--wp-accent-hover);
  background: color-mix(in srgb, var(--wp-signal) 5%, var(--wp-surface));
  padding-top: 16px; text-align: left;
}
.matrix th[scope="row"] { font-weight: 400; color: var(--wp-text-muted); text-align: left; }
.matrix .yes { color: var(--wp-accent-hover); font-weight: 700; }
.matrix .no { color: #8A877D; }
.matrix .val { font-size: 0.85rem; color: var(--wp-text); }

/* Add-ons + FAQ */
.addons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.addons .card h3 { font-size: 0.99rem; }
.addons .card .mono { font-size: 0.9rem; color: var(--wp-text); display: block; margin-top: 10px; }
.faq { max-width: 46rem; margin: 0 auto; }
.faq details { border-bottom: 1px solid var(--wp-line); padding: 4px 0; }
.faq summary {
  cursor: pointer; font-family: var(--wp-font-display); font-weight: 600;
  font-size: 1.02rem; padding: 16px 0; list-style: none; position: relative; padding-right: 34px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+" / ""; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  color: var(--wp-accent); font-size: 1.3rem; font-weight: 500;
}
.faq details[open] summary::after { content: "–" / ""; }
.faq details p { color: var(--wp-text-muted); font-size: 0.96rem; margin: 0 0 18px; }

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .feature-row { grid-template-columns: 1fr; gap: 28px; padding: 36px 0; }
  .feature-row.flip .feature-copy { order: 0; }
  .grid-4, .addons { grid-template-columns: repeat(2, 1fr); }
  .plans { grid-template-columns: 1fr; max-width: 30rem; margin-left: auto; margin-right: auto; }
  .plan.featured { order: -1; }
  /* Area menu stops being a sidebar and becomes chips above the tiles. Two columns:
     one per line would push the tiles most of a screen down. */
  .int-browser { grid-template-columns: 1fr; gap: 20px; }
  .int-areas { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .int-area { border-color: var(--wp-line); font-size: 0.87rem; padding: 9px 11px; }
}
@media (max-width: 760px) {
  .section { padding: 64px 0; }
  .grid-3 { grid-template-columns: 1fr; }
  .nav-links {
    display: none; position: absolute; top: 64px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--wp-paper); border-bottom: 1px solid var(--wp-line);
    padding: 10px 24px 18px;
  }
  .nav-links a { padding: 12px 0; }
  .nav-links .btn { margin-top: 10px; }
  .site-header.open .nav-links { display: flex; }
  .nav-toggle { display: block; }
}
@media (max-width: 520px) {
  .grid-4, .addons { grid-template-columns: 1fr; }
  /* Width-fit would shrink the photo to a sliver on phones — pin its height instead. */
  .hero { padding-top: 64px; background-size: 100% 100%, auto 480px; }
}