/* Placeholder styling for the marketing site. Kept self-contained (not the
 * app's shared.css, which assumes the Forge/Atlassian theme context). Real
 * design to come. */

:root {
  --brand: #0c66e4;
  --text: #172b4d;
  --text-subtle: #44546f;
  --surface: #ffffff;
  --surface-sunken: #f7f8f9;
  --border: #ebecf0;
}

* { box-sizing: border-box; }

/* Keeps a short run of words together so a line prefers to wrap at the run's
   boundary rather than mid-phrase. Only apply to SHORT runs — a run wider than
   its container will overflow (nowrap means nowrap). */
.nowrap { white-space: nowrap; }

/* For LONG clauses that should break at a punctuation boundary on wide screens
   but must stay freely wrappable on narrow ones (where gluing would overflow).
   Driven by the containing block's own width via a container query, so the
   decision tracks the text's real available space, not the viewport. The
   container must set `container-type: inline-size` (e.g. .banner-sub).

   - Default (narrow): clauses wrap normally; a .br-here forces the break.
   - Wide enough that each clause fits one line: glue the clauses (.nowrap-wide)
     so the line breaks at the boundary, and suppress the now-redundant .br-here.

   The breakpoint should sit just above the longest clause's single-line width. */
.nowrap-wide { white-space: normal; }
.br-here { display: inline; }
@container (min-width: 35rem) {
  .nowrap-wide { white-space: nowrap; }
  .br-here { display: none; }
}

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

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 2rem;
  border-bottom: 1px solid var(--border);
}

.site-logo {
  height: 2rem;
  display: block;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

/* Narrow screens: the single-row header (logo + 3 nav items) is wider than a
   phone. Wrap the nav onto its own line below the logo (logo takes the full
   first line), and let the nav items wrap further if even they don't fit. */
@media (max-width: 40rem) {
  .site-header { flex-wrap: wrap; }
  .site-header > :first-child { flex: 0 0 100%; }
  .site-nav { flex-wrap: wrap; gap: 1rem 1.5rem; }
}

.site-nav a {
  font-size: 0.9rem;
  color: var(--text-subtle);
  text-decoration: none;
}
.site-nav a:hover { text-decoration: underline; }

/* Current page: marked in both header nav and footer, non-clickable feel. */
.site-nav a[aria-current="page"],
.site-footer nav a[aria-current="page"] {
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
  cursor: default;
}
.site-nav a[aria-current="page"]:hover,
.site-footer nav a[aria-current="page"]:hover {
  text-decoration: none;
}

.header-cta {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--brand);
  text-decoration: none;
}
.header-cta:hover { text-decoration: underline; }

/* Doc pages (privacy) keep the constrained reading column. */
.site-main {
  max-width: 56rem;
  margin: 0 auto;
  padding: 3rem 2rem;
}

/* ===== Marketing sections ===== */

/* Shared section rhythm */
main > section {
  padding: 4rem 2rem;
  max-width: 72rem;
  margin: 0 auto;
}

/* Hero: centered message, front and center. Screenshot showcased full-width
 * below it (its own section). */
.hero {
  text-align: center;
  padding-bottom: 2rem;
}
/* Wide enough that the large h1 fits on one line on desktop; the tagline
   shares this width. container-type lets the tagline's .nowrap-wide clauses
   release to free wrapping based on this block's own width. */
.hero-text { max-width: 56rem; margin: 0 auto; container-type: inline-size; }
.hero h1 {
  font-size: 3rem;
  line-height: 1.1;
  margin: 0 0 1rem;
}
.tagline {
  font-size: 1.25rem;
  color: var(--text-subtle);
  margin: 0 0 2rem;
}

/* Full-width hero screenshot showcase */
.hero-shot {
  padding-top: 0;
  max-width: 64rem;
}

/* Screenshot frame */
.shot {
  margin: 0;
  flex: 1 1 24rem;
}
.shot img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  box-shadow: 0 4px 16px rgba(9, 30, 66, 0.12);
}

/* Click-to-zoom trigger wrapping a shot image. It's a real <button> for
   keyboard accessibility; strip native button chrome and show a zoom cursor. */
.shot-zoom {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  position: relative;
}
.shot-zoom img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  box-shadow: 0 4px 16px rgba(9, 30, 66, 0.12);
  transition: box-shadow 0.15s ease;
}
.shot-zoom:hover img,
.shot-zoom:focus-visible img {
  box-shadow: 0 6px 22px rgba(9, 30, 66, 0.2);
}
/* Expand-icon affordance, bottom-right, revealed on hover/focus. */
.shot-zoom::after {
  content: "";
  position: absolute;
  right: 0.6rem;
  bottom: 0.6rem;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.3rem;
  background:
    rgba(9, 30, 66, 0.55)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7'/%3E%3C/svg%3E")
    center / 1rem no-repeat;
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
}
.shot-zoom:hover::after,
.shot-zoom:focus-visible::after {
  opacity: 1;
}

/* Lightbox overlay */
.lightbox[hidden] { display: none; }
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3vmin;
  background: rgba(9, 30, 66, 0.82);
}
body.lightbox-open { overflow: hidden; }
.lightbox-figure {
  margin: 0;
  max-width: 95vw;
  max-height: 95vh;
  display: flex;
}
.lightbox-img {
  max-width: 95vw;
  max-height: 95vh;
  width: auto;
  height: auto;
  border-radius: 0.5rem;
  background: #fff;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
}
.lightbox-close {
  position: absolute;
  top: 1rem;
  right: 1.25rem;
  width: 2.5rem;
  height: 2.5rem;
  font-size: 1.75rem;
  line-height: 1;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 0.4rem;
  cursor: pointer;
}
.lightbox-close:hover,
.lightbox-close:focus-visible {
  background: rgba(255, 255, 255, 0.24);
}

/* Inline illustrative diagram: no frame, sits in the content flow */
.diagram {
  margin: 1.25rem 0;
}
.diagram figcaption {
  font-size: 0.9rem;
  color: var(--text-subtle);
  margin: 0 0 0.4rem;
}
.diagram img {
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
}

/* Hero CTA sub-note */
.cta-note {
  font-size: 0.9rem;
  color: var(--text-subtle);
  margin: 0.75rem 0 0;
}

/* Banner: one big, short, high-contrast line — a scannable anchor the eye
 * lands on. Carries the differentiator without a wall of prose. */
.banner {
  text-align: center;
  background: var(--surface-sunken);
  max-width: none;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.banner-line {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.25;
  margin: 0 auto;
  max-width: 40rem;
  color: var(--text);
}
.banner-sub {
  container-type: inline-size;
  color: var(--text-subtle);
  font-size: 1.05rem;
  max-width: 38rem;
  margin: 1rem auto 0;
}
.banner-link { margin: 1rem 0 0; }
.banner-link a {
  color: var(--brand);
  font-weight: 600;
  text-decoration: none;
}
.banner-link a:hover { text-decoration: underline; }

/* Value strip: three scannable handholds */
.value-strip {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
}
.value { flex: 1 1 14rem; }
.value h3 { margin: 0 0 0.5rem; }
.value p { margin: 0; color: var(--text-subtle); }

/* Feature rows: text + shot, alternating */
.feature {
  display: flex;
  gap: 3rem;
  align-items: center;
  flex-wrap: wrap;
}
.feature-text { flex: 1 1 18rem; }
.feature-text h2 { margin-top: 0; }
.feature-text p { color: var(--text-subtle); font-size: 1.05rem; }
.feature-reverse { flex-direction: row-reverse; }

/* How it works */
.how { text-align: center; }
.how h2 { margin-top: 0; }
.steps {
  list-style: none;
  padding: 0;
  display: flex;
  gap: 2rem;
  justify-content: center;
  flex-wrap: wrap;
  margin: 2rem 0 0;
}
.steps li {
  flex: 1 1 14rem;
  color: var(--text-subtle);
}
.step-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

/* Close */
.close { text-align: center; max-width: 48rem; }
.close h2 { margin-top: 0; margin-bottom: 0.75rem; }
.close p { color: var(--text-subtle); }
.close-sub { margin: 0 0 2rem; font-size: 1.1rem; }
.close .cta { margin: 0 0 2.5rem; }
.close-privacy {
  font-size: 0.85rem;
  color: var(--text-subtle);
  margin: 0;
}

.button {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background: var(--brand);
  color: #fff;
  text-decoration: none;
  border-radius: 0.375rem;
  font-weight: 600;
}

.button:hover { background: #0055cc; }

.placeholder-note {
  color: var(--text-subtle);
  font-style: italic;
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: 0.375rem;
  padding: 0.75rem 1rem;
}

.doc h1 { margin-top: 0; }
.doc h2 { margin-top: 2.5rem; }
.doc h3 { margin-top: 1.75rem; }
.doc h4 { margin-top: 1.25rem; margin-bottom: 0.5rem; font-size: 1rem; }

/* ASCII diagrams / preformatted blocks — monospace, preserve whitespace,
 * scroll horizontally rather than wrap so the diagrams stay intact. */
.doc pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85rem;
  line-height: 1.4;
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: 0.375rem;
  padding: 1rem 1.25rem;
  overflow-x: auto;
  white-space: pre;
}

.doc hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 2.5rem 0;
}

.doc ul, .doc ol {
  color: var(--text);
  padding-left: 1.5rem;
}
.doc li { margin: 0.35rem 0; }

/* A set-off aside — e.g. the "if you're tracking toward a date" example, kept
 * distinct so readers who don't work in fixed dates can skim past it. */
.doc .aside {
  border-left: 3px solid var(--border);
  padding-left: 1rem;
  color: var(--text-subtle);
  font-size: 0.95rem;
}

.policy-date {
  color: var(--text-subtle);
  font-size: 0.875rem;
  margin-top: -0.5rem;
}

.site-footer {
  border-top: 1px solid var(--border);
  padding: 2rem;
  text-align: center;
  color: var(--text-subtle);
  font-size: 0.875rem;
}

.site-footer nav a {
  color: var(--brand);
  text-decoration: none;
}

.site-footer nav a:hover { text-decoration: underline; }

.copyright { margin: 0.5rem 0 0; }