/*
 * Roleprint website stylesheet.
 * One accent (teal), light theme only, no gradients. Every colour comes from
 * the tokens below; severity colours exist only inside the product screenshots.
 */

/* ---- Fonts (self-hosted, SIL OFL, see /fonts/LICENSE.txt) ---------------- */
@font-face {
  font-family: "Geist";
  src: url("/fonts/Geist-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("/fonts/GeistMono-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---- Tokens ------------------------------------------------------------ */
:root {
  --ink: #1F2A30;        /* text, logo ridges */
  --ink-soft: #4C5960;   /* secondary text: a lighter shade of ink, 7:1 on white */
  --teal: #0B6E7A;       /* the one accent: links, primary button, the R */
  --teal-dark: #08565F;  /* hover and pressed state of teal */
  --paper: #F7F9FA;      /* section tint */
  --white: #FFFFFF;      /* page */
  --mist: #DCE3E6;       /* hairlines */
  --tint: #E6F1F2;       /* highlight backgrounds */
  --radius-control: 8px; /* buttons and inputs */
  --radius-frame: 12px;  /* screenshot frames and tinted panels */
  --font: "Geist", system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --header-h: 64px;
  color-scheme: light;
}

/* ---- Reset ------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, p, ul, ol, dl, dd, figure, pre { margin: 0; }
ul[class], ol[class], nav ul { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }

html { -webkit-text-size-adjust: 100%; scroll-padding-top: 16px; }
body {
  background: var(--white);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ---- Type scale -------------------------------------------------------- */
h1, h2, h3 { font-weight: 600; color: var(--ink); text-wrap: balance; }
h1 { font-size: clamp(36px, 2.4vw + 22px, 56px); line-height: 1.08; letter-spacing: -0.03em; }
h2 { font-size: clamp(26px, 1.2vw + 18px, 32px); line-height: 1.18; letter-spacing: -0.02em; }
h3 { font-size: 20px; line-height: 1.3; letter-spacing: -0.01em; }
p { text-wrap: pretty; }
.prose p, .text p { max-width: 65ch; }
.lede { font-size: clamp(18px, 0.5vw + 15px, 20px); line-height: 1.5; color: var(--ink-soft); }
.muted { color: var(--ink-soft); }

a { color: var(--teal); text-underline-offset: 3px; }
a:hover { color: var(--teal-dark); }

/* One visible focus ring for everything keyboard-focusable. */
:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; border-radius: 2px; }

.mono { font-family: var(--font-mono); font-size: 14px; letter-spacing: 0; }
code, kbd, pre { font-family: var(--font-mono); font-size: 14px; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---- Layout ------------------------------------------------------------ */
.container { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: 16px; }
.section { padding-block: 96px; }
.section-tint { background: var(--paper); }

/* Two columns, 7/5. --reverse swaps the proportions to 5/7; the DOM order
   decides which column holds text and which holds the image. */
.split {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 56px;
  align-items: center;
}
.split--reverse { grid-template-columns: 5fr 7fr; }
.split > * { min-width: 0; }

/* Full-width band: centred heading and text above a wide image. */
.band { text-align: center; }
.band .text { max-width: 720px; margin-inline: auto; }
.band .text p { margin-inline: auto; }
.band .shot { margin-top: 48px; }

.text > * + * { margin-top: 16px; }
.text > h2 + p { margin-top: 20px; }

/* Small caps label above a highlight heading (three on the home page, no more). */
.eyebrow {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
}
.eyebrow + h2 { margin-top: 12px; }

/* Four columns separated by thin top rules, no cards. */
.cols-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px 32px;
  margin-top: 48px;
}
.cols-4 > * { border-top: 1px solid var(--mist); padding-top: 20px; }
.cols-4 > * > * + * { margin-top: 10px; }
.cols-4 p { color: var(--ink-soft); font-size: 16px; }

/* Definition list as rows: term on the left, description on the right. */
.deflist { margin-top: 40px; border-top: 1px solid var(--mist); }
.deflist > div {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) 2fr;
  gap: 8px 32px;
  padding-block: 22px;
  border-bottom: 1px solid var(--mist);
}
.deflist dt { font-weight: 600; }
.deflist dd { color: var(--ink-soft); max-width: 65ch; }
.deflist dd .mono { color: var(--ink); }

/* Screenshot frame. */
.shot {
  background: var(--white);
  border: 1px solid var(--mist);
  border-radius: var(--radius-frame);
  box-shadow: 0 20px 40px rgb(11 110 122 / 0.10);
  overflow: hidden;
}
.shot img { width: 100%; }

.shot-caption { margin-top: 14px; color: var(--ink-soft); font-size: 14px; }

/* ---- Buttons and links -------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease, transform 150ms ease;
}
.btn-primary { background: var(--teal); color: var(--white); }
.btn-primary:hover { background: var(--teal-dark); color: var(--white); }
.btn-primary:active { transform: translateY(1px); }

.btn-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  text-decoration: none;
}
.btn-link::after {
  content: "\2192";
  content: "\2192" / "";
  transition: transform 150ms ease;
}
.btn-link:hover::after { transform: translateX(3px); }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }

/* ---- Header ------------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: 16px;
  top: -48px;
  z-index: 10;
  padding: 8px 12px;
  border-radius: var(--radius-control);
  background: var(--ink);
  color: var(--white);
  text-decoration: none;
}
.skip-link:focus { top: 8px; color: var(--white); }

/* The hairline is an inset shadow so the header stays exactly 64 px tall. */
.site-header { position: relative; background: var(--white); box-shadow: inset 0 -1px 0 var(--mist); }
.site-header__inner {
  display: flex;
  align-items: center;
  gap: 16px;
  height: var(--header-h);
}
.site-logo { flex: none; display: block; border-radius: 4px; }
.site-logo img { width: 135px; height: 40px; }

.site-nav { margin-left: auto; }
.site-nav ul { display: flex; gap: 4px; }
.site-nav a {
  display: block;
  padding: 8px 12px;
  border-radius: var(--radius-control);
  color: var(--ink);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 150ms ease;
}
.site-nav a:hover { background: var(--paper); color: var(--ink); }
.site-header .js-install { flex: none; }

.nav-toggle {
  display: none;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--mist);
  border-radius: var(--radius-control);
  background: var(--white);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
}

/* ---- Footer ------------------------------------------------------------- */
.site-footer { background: var(--paper); border-top: 1px solid var(--mist); font-size: 15px; }
.site-footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 48px;
  padding-block: 56px 40px;
}
.site-footer__logo { display: inline-block; color: var(--teal); border-radius: 4px; }
.site-footer__logo svg { width: 40px; height: 40px; }
.site-footer__vendor { margin-top: 16px; font-weight: 600; }
.site-footer__tagline { margin-top: 6px; color: var(--ink-soft); max-width: 44ch; }
.site-footer__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.site-footer__cols h2 { font-size: 13px; font-weight: 600; letter-spacing: 0; color: var(--ink-soft); }
.site-footer__cols ul { margin-top: 12px; }
.site-footer__cols li + li { margin-top: 8px; }
.site-footer__cols a { color: var(--ink); text-decoration: none; }
.site-footer__cols a:hover { color: var(--teal); text-decoration: underline; }
.site-footer__legal { padding-block: 20px 32px; border-top: 1px solid var(--mist); color: var(--ink-soft); font-size: 13px; }

/* ---- FAQ ------------------------------------------------------------------ */
/* Heading and a one-line intro on the left, every answer visible on the right. */
.faq__intro p { margin-top: 12px; color: var(--ink-soft); max-width: 40ch; }
.faq__list { margin-top: 32px; }
.faq__item { padding-block: 24px; border-top: 1px solid var(--mist); }
.faq__item:first-child { padding-top: 0; border-top: 0; }
.faq__item:last-child { padding-bottom: 0; }
.faq__item h3 { font-size: 18px; letter-spacing: 0; }
.faq__item p { margin-top: 8px; color: var(--ink-soft); max-width: 65ch; }
@media (min-width: 1024px) {
  .faq { display: grid; grid-template-columns: 4fr 8fr; gap: 48px; align-items: start; }
  .faq__list { margin-top: 0; }
}

/* ---- Responsive ------------------------------------------------------------ */
@media (max-width: 1023px) {
  .cols-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 899px) {
  .nav-toggle { display: inline-flex; align-items: center; }
  .site-header__inner { gap: 8px; }
  .site-header .js-install { margin-left: auto; order: 2; }
  .nav-toggle { order: 3; }
  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 5;
    margin: 0;
    padding: 8px 16px 16px;
    background: var(--white);
    border-bottom: 1px solid var(--mist);
    box-shadow: 0 12px 24px rgb(31 42 48 / 0.08);
  }
  .site-nav.is-open { display: block; }
  .site-nav ul { flex-direction: column; gap: 0; }
  .site-nav a { padding: 12px 8px; font-size: 17px; }
}

@media (max-width: 767px) {
  .section { padding-block: 56px; }
  .split, .split--reverse { grid-template-columns: 1fr; gap: 32px; }
  .split > .text { order: -1; }   /* stacked: text before its image, whatever the desktop side */
  .deflist > div { grid-template-columns: 1fr; }
  .site-footer__inner { grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 599px) {
  .cols-4 { grid-template-columns: 1fr; gap: 28px; }
  .site-footer__cols { grid-template-columns: 1fr 1fr; }
}

/* Small phones: the header shows the mark only, so the install button fits. */
@media (max-width: 479px) {
  .site-logo img { width: 28px; object-fit: cover; object-position: left center; }
  .site-header .btn { padding: 0 12px; font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}

/* ---- Home page ------------------------------------------------------------ */
.hero { padding-block: 80px 48px; }
.hero .lede { margin-top: 24px; }
.hero .actions { margin-top: 32px; }

/* From 1024 px the screenshot carries the hero: its column is wider than the
   text column, and its frame runs out to the container's right edge. The h1 is
   sized so the headline still breaks into two lines in the narrower column. */
@media (min-width: 1024px) {
  .hero .split { grid-template-columns: 1fr 1.15fr; gap: 48px; }
  .hero .text { max-width: 34rem; }
}
/* Once the container has a margin outside it, the frame steps into its padding. */
@media (min-width: 1280px) {
  .hero .shot { margin-right: -16px; }
}
/* The hero h1 grows with its column so the headline stays on two lines
   (about 0.085 of the column width per px of font size). */
@media (min-width: 768px) {
  .hero h1 { font-size: clamp(34px, 3.9vw - 3.1px, 43.5px); }
}

/* Four short trust facts in one row, each a link to the Security page. */
.trust { padding-block: 22px; }
.trust__list { display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: 12px 32px; }
.trust__list a { color: var(--ink); font-size: 15px; font-weight: 500; text-decoration: none; }
.trust__list a:hover { color: var(--teal); text-decoration: underline; }

/* Two white sections in a row share one gap instead of two. */
.section--flush { padding-top: 0; }


.scopes li + li { margin-top: 6px; }
.scopes .mono { display: inline-block; min-width: 25ch; margin-right: 8px; }

/* The compliance line: set apart by a teal rule, not boxed like a warning. */
.note { margin-top: 32px; max-width: 65ch; padding-left: 16px; border-left: 2px solid var(--teal); font-weight: 500; }
.more { margin-top: 20px; }

.cta { background: var(--tint); padding-block: 56px; }
.cta__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; }
.cta__text { font-size: clamp(20px, 1vw + 14px, 24px); font-weight: 600; letter-spacing: -0.01em; max-width: 40ch; }

@media (max-width: 899px) {
  .trust__list { grid-template-columns: repeat(2, auto); justify-content: start; }
}
@media (max-width: 767px) {
  .hero { padding-block: 40px 56px; }
  .section--flush { padding-top: 0; }
  .scopes .mono { display: block; min-width: 0; }
}
@media (max-width: 479px) {
  .trust__list { grid-template-columns: 1fr; }
}

/* ---- Secondary pages ------------------------------------------------------ */
.page-head { padding-block: 72px 48px; border-bottom: 1px solid var(--mist); }
.page-head .lede { margin-top: 16px; max-width: 60ch; }
.page-head .status { margin-top: 16px; }

/* Long pages: a table of contents beside the text from 1024 px. */
.doc { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 64px; padding-block: 56px 96px; }
.toc { align-self: start; position: sticky; top: 24px; font-size: 15px; }
.toc__title { font-weight: 600; }
.toc ul { margin-top: 10px; border-left: 1px solid var(--mist); }
.toc a { display: block; padding: 5px 0 5px 14px; color: var(--ink-soft); text-decoration: none; }
.toc a:hover { color: var(--teal); }

.doc__body { max-width: 760px; }
.doc__body > section + section { margin-top: 64px; }
.doc__body section > * + * { margin-top: 16px; }
.doc__body h3 { margin-top: 32px; }
.doc__body ul:not([class]) { padding-left: 20px; }
.doc__body ul:not([class]) li + li { margin-top: 6px; }
.doc__body .deflist { margin-top: 24px; }
.doc__body .figure { margin-top: 32px; }
.doc__body .note { margin-top: 0; }
.prose code { font-size: 0.88em; }

.code-block {
  overflow-x: auto;
  padding: 16px 18px;
  border: 1px solid var(--mist);
  border-radius: var(--radius-frame);
  background: var(--paper);
  color: var(--ink);
}

.table-wrap { overflow-x: auto; border: 1px solid var(--mist); border-radius: var(--radius-frame); }
.table { width: 100%; border-collapse: collapse; font-size: 15px; }
.table th, .table td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--mist); }
.table tbody tr:last-child td { border-bottom: 0; }
.table th { background: var(--paper); font-weight: 600; white-space: nowrap; }
.table td.mono { white-space: nowrap; }

/* Architecture: two boxes inside one Atlassian cloud outline, nothing outside. */
.arch { margin-top: 32px; }
.arch__cloud { padding: 20px; border: 1px dashed var(--teal); border-radius: var(--radius-frame); background: var(--paper); }
.arch__label { font-size: 13px; font-weight: 600; color: var(--teal); }
.arch__row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; margin-top: 14px; }
.arch__box { padding: 16px; border: 1px solid var(--mist); border-radius: var(--radius-control); background: var(--white); font-size: 15px; color: var(--ink-soft); }
.arch__box--app { border-color: var(--teal); }
.arch__name { color: var(--ink); font-weight: 600; }
.arch__box p + p { margin-top: 4px; }
.arch__link { display: grid; justify-items: center; gap: 4px; max-width: 150px; font-size: 13px; text-align: center; color: var(--ink-soft); }
.arch__arrow { font-size: 24px; line-height: 1; color: var(--teal); }
.arch figcaption { margin-top: 12px; font-size: 15px; color: var(--ink-soft); }

@media (max-width: 1023px) {
  .doc { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .toc { position: static; }
}
@media (max-width: 767px) {
  .page-head { padding-block: 40px 32px; }
  .arch__row { grid-template-columns: 1fr; }
  .arch__link { max-width: none; grid-auto-flow: column; justify-content: start; }
  .arch__arrow { transform: rotate(90deg); }
}

/* Short secondary pages: one text column under the page head. */
.page-body { padding-block: 56px 96px; }
.page-body > section { max-width: 776px; }
.page-body > section + section { margin-top: 48px; }
.page-body section > * + * { margin-top: 14px; }
.page-body h3 { margin-top: 28px; }
.page-body ul:not([class]) { padding-left: 20px; }
.page-body ul:not([class]) li + li { margin-top: 6px; }
.page-body .deflist { margin-top: 24px; }

.badge { display: inline-block; margin-right: 8px; padding: 2px 8px; border-radius: 4px; background: var(--tint); color: var(--teal); font-size: 13px; font-weight: 600; }
.status { color: var(--ink-soft); font-size: 15px; }
.page-head--plain { border-bottom: 0; padding-block: 96px 120px; }