/*
  pages.css: the pages beyond the landing (065/015): About us, Careers, Security & Legal and
  FAQ. Linked by those pages only, after chrome.css. Every rule is scoped under its page's region
  root (.security, .faq, .about, .careers) or a class named for it; the privacy cards keep the
  landing's .privacy__ classes, which moved here with them (065/016).

  Written narrow first. Medium is min-width 721px; wide is (min-width: 1024px) and landscape
  (package, section 5). Logical properties only; anything directional multiplies by --dir.
*/

/* The shell: the heading clears the fixed nav, and the footer stays low on a short page. */
.page-head {
  min-block-size: 60vh;
  min-block-size: 60svh;
  padding-block-start: calc(var(--nav-bottom) + clamp(3rem, 1.5rem + 5vw, 6rem));
}
.page-head .lead {
  margin-block-start: 1.25rem;
}

/* ---------- Security & Legal (round 3, the owner's pick SA, 065/016) ----------
   The two-tone H1 at the section heading's size, the four privacy cards two by two, then the
   two documents as large links and a line to support. One column on narrow. */
.security__title {
  max-width: 18.5em;
}

/* The privacy cards, as the landing had them (package, section 11): a .frost--dense panel, a
   gold icon tile, the title and the body. 24px apart here, two by two from medium up. */
.privacy__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}
.privacy__card {
  display: flex;
  flex-direction: column;
  padding: 28px;
  border-radius: var(--radius-lg);
}
.privacy__tile {
  display: grid;
  flex: none;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-block-end: 1.25rem;
  border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: var(--gold);
}
.privacy__icon {
  width: 22px;
  height: 22px;
}
.privacy__name {
  margin-block-end: 0.625rem;
  color: var(--ivory);
  font-size: 1.1875rem;
  font-weight: 600;
}
.privacy__text {
  color: color-mix(in srgb, var(--ivory) 74%, transparent);
  font-size: 1rem;
  line-height: 1.6;
}

/* The documents: Surface 2 frost, radius 22, about 132px tall; a gold document icon, the title
   in the heading face, the address in mono Ash and an outward arrow at the inline end. */
.security__label {
  margin-block: clamp(2.5rem, 1.5rem + 2.5vw, 3rem) 1.25rem;
}
.security__docs {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
}
.security__doc {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  min-block-size: 132px;
  padding: 24px 28px;
  border-radius: var(--radius-lg);
  color: var(--ivory);
  text-decoration: none;
  transition: border-color var(--dur-1) var(--ease-out);
}
.security__doc:hover {
  border-color: var(--border-strong);
}
.security__doc-icon {
  flex: none;
  width: 30px;
  height: 30px;
  color: var(--gold);
}
.security__doc-text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.375rem;
  min-width: 0;
}
.security__doc-name {
  font-family: var(--font-heading);
  font-size: clamp(1.25rem, 1rem + 0.8vw, var(--fs-h4));
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: var(--track-h3);
}
/* Left to right in every language, but at the card's inline start (the right in Arabic). */
.security__doc-url {
  align-self: flex-start;
  color: var(--ash);
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  overflow-wrap: anywhere;
}
.security__doc-out {
  flex: none;
  width: 24px;
  height: 24px;
  transform: scaleX(var(--dir));
}
.security__contact {
  margin-block-start: 2.5rem;
  color: var(--ash);
}
.security__contact a,
.faq__still a {
  color: var(--ivory);
}

/* ---------- FAQ (round 3, the owner's pick QA, 065/016) ----------
   The landing's FAQ (package, section 13) as it was: the title and Join on the inline start,
   sticky on wide screens, the ten questions on the other side, then a line to support. */
.faq__layout {
  display: grid;
  gap: 2rem;
  align-items: start;
}
.faq__title {
  margin-block-end: 1.5rem;
}
.faq__list {
  border-block-start: 1px solid var(--hairline);
}
.faq__item {
  border-block-end: 1px solid var(--hairline);
}
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  min-height: var(--tap);
  padding-block: 1.3rem;
  list-style: none;
  cursor: pointer;
}
.faq__q::-webkit-details-marker {
  display: none;
}
.faq__q:focus-visible {
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}
.faq__question {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
}
.faq__icon {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--ash);
  transition:
    transform 0.3s var(--ease-out),
    color 0.3s var(--ease-out);
}
.faq__item:not([open]) .faq__q:hover .faq__icon {
  color: var(--ivory);
}
/* The plus turns into a cross. */
.faq__item[open] .faq__icon {
  color: var(--gold);
  transform: rotate(45deg);
}
.faq__a {
  max-width: 40em;
  padding-block-end: 1.5rem;
  color: var(--ash);
}
.faq__a a:not(.btn) {
  color: var(--ivory);
}
.faq__btn {
  margin-block-start: 1.25rem;
}
.faq__still {
  margin-block-start: 2.5rem;
  color: var(--ash);
}
/* A 0.3s height and fade where the browser can animate <details>; instant elsewhere and under
   reduced motion. */
@supports selector(::details-content) {
  @media (prefers-reduced-motion: no-preference) {
    .faq__item {
      interpolate-size: allow-keywords;
    }
    .faq__item::details-content {
      height: 0;
      overflow: clip;
      opacity: 0;
      transition:
        height 0.3s var(--ease-out),
        opacity 0.3s var(--ease-out),
        content-visibility 0.3s allow-discrete;
    }
    .faq__item[open]::details-content {
      height: auto;
      opacity: 1;
    }
  }
}

/* ---------- About us (round 3, frame AB2, 065/017) ----------
   The centred eyebrow and H1, the founder's card (360 wide, centred), the four social tiles and
   the vacancy block that leads to Careers. The founder's details are real (065/024); the photo
   is still a placeholder (about.html says what goes there). */
.about {
  --about-title: clamp(2.25rem, 1.4rem + 2.4vw, 3.5rem);
  --about-hot: color-mix(in srgb, var(--gold) 70%, transparent); /* a hovered tile's hairline */
}
.about__head {
  text-align: center;
}
.about__title {
  margin-block-end: clamp(2rem, 1rem + 2.5vw, 3.5rem);
  font-size: var(--about-title);
  line-height: var(--lh-arc);
  letter-spacing: var(--track-h1);
  overflow-wrap: break-word;
}
.about__card {
  width: min(100%, 360px);
  margin-inline: auto;
  padding: 20px 20px 28px;
  border-radius: 24px;
}
.about__photo {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  margin-block-end: 22px;
  border: 1px solid color-mix(in srgb, var(--ivory) 14%, transparent);
  border-radius: 18px;
  overflow: hidden;
  background: var(--surface-2);
  color: var(--ash);
}
/* The photo, when it comes, fills the square (065/024; about.html holds its markup). */
.about__photo picture {
  display: contents;
}
.about__photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
}
.about__name,
.about__role {
  padding-inline: 4px;
}
.about__name {
  font-size: clamp(1.25rem, 1rem + 0.8vw, var(--fs-h4));
  line-height: 1.2;
  letter-spacing: var(--track-h3);
}
.about__role {
  margin-block-start: 0.375rem;
  color: var(--ash);
  font-size: 0.9375rem;
}
.about__label {
  margin-block: clamp(3rem, 2rem + 2.5vw, 4.5rem) 1.25rem;
}

/* The social tiles: links that open in a new tab (065/024). Two by two on narrow, four across
   from medium up. Each list item holds one link, which fills it; on hover only the hairline
   warms to Gold, as the Works with cards do, so the tile keeps its size and place. Focus takes
   base.css's gold ring. */
.about__socials {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
.about__socials > li {
  display: grid;
}
.about__social {
  display: flex;
  flex-direction: column;
  min-block-size: 112px;
  padding: 22px;
  border-radius: 18px;
  color: var(--ivory);
  text-decoration: none;
  transition: border-color var(--dur-1) var(--ease-out);
}
@media (hover: hover) {
  .about__social:hover {
    border-color: var(--about-hot);
  }
}
.about__social-icon {
  flex: none;
  width: 24px;
  height: 24px;
  margin-block-end: 14px;
  color: var(--gold);
}
.about__social-name {
  font-weight: 600;
}
.about__social-handle {
  align-self: flex-start;
  margin-block-start: 0.25rem;
  color: var(--ash);
  font-size: var(--fs-caption);
}

/* The vacancy block: the label, the line and the link on one row from medium up, stacked on
   narrow. */
.about__careers {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  margin-block-start: 40px;
  padding: 24px;
  border-radius: 20px;
}
.about__careers-label {
  margin-block-end: 0;
  font-size: 0.6875rem;
}
.about__careers-title {
  font-family: var(--font-body);
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0;
}

/* ---------- Careers (065/026, the owner's picks P-B and M-B; package, section 15b) ----------
   The head on the rails' start, then the four roles: <details name="roles">, each a Surface 1
   frost card (radius 20, 12px apart) that opens like the FAQ's questions (the height and fade
   below are the FAQ's). The summary holds the title (an H2, English in every language), the
   meta at the inline end and a Gold plus that turns to a minus; on narrow the meta goes under
   the title. An open role: the line, then What you'll do and What you'll bring (two columns
   from medium up), then Apply. Under the roles, the open application. */
.careers {
  --careers-title: clamp(2.25rem, 1.4rem + 2.4vw, 3.5rem); /* about 56px at 1440, as About us */
  --careers-pad: 20px; /* the cards' inline padding: 20 on narrow, 32 from medium up */
}
.careers__title {
  font-size: var(--careers-title);
  line-height: var(--lh-arc);
  letter-spacing: var(--track-h1);
  overflow-wrap: break-word;
}
.careers__lead {
  max-width: 40em; /* about 720px at 18px */
  margin-block-start: 1.25rem;
  color: var(--ash);
  font-size: 1.125rem;
}
.careers__roles {
  display: grid;
  gap: 12px;
  margin-block-start: clamp(2.5rem, 1.5rem + 3vw, 4rem);
}
.careers__role {
  border-radius: 20px;
}
.careers__summary {
  display: grid;
  grid-template-areas:
    'name icon'
    'meta icon';
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 1.25rem;
  min-block-size: 80px;
  padding-block: 20px;
  padding-inline: var(--careers-pad);
  border-radius: inherit;
  list-style: none;
  cursor: pointer;
}
.careers__summary::-webkit-details-marker {
  display: none;
}
.careers__name {
  grid-area: name;
  font-size: 1.125rem;
  line-height: 1.25;
}
/* English and left to right in every language, yet at the row's start: on a right-to-left page
   that is the title's own end. */
[dir='rtl'] .careers__name {
  text-align: end;
}
.careers__meta {
  grid-area: meta;
  color: var(--ash);
  font-family: var(--font-label);
  font-size: 0.625rem;
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
}
.careers__meta:lang(ar) {
  font-size: 0.8125rem;
  text-transform: none;
}
.careers__icon {
  grid-area: icon;
  width: 20px;
  height: 20px;
  color: var(--gold);
}
/* The plus's upright stroke folds away: a minus while the role is open. */
.careers__icon-v {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.3s var(--ease-out);
}
.careers__role[open] .careers__icon-v {
  transform: scaleY(0);
}
.careers__body {
  padding-block: 4px 22px;
  padding-inline: var(--careers-pad);
}
.careers__line {
  max-width: 62em; /* about 1060px at 17px */
  color: var(--ash);
  font-size: 0.9375rem;
  line-height: 1.55;
}
.careers__cols {
  display: grid;
  gap: 12px;
  margin-block-start: 24px;
}
.careers__label {
  margin-block-end: 10px;
  color: var(--gold);
  font-family: var(--font-label);
  font-size: 0.65625rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  text-wrap: wrap;
}
.careers__label:lang(ar) {
  font-size: 0.8125rem;
  text-transform: none;
}
.careers__list {
  display: grid;
  gap: 10px;
}
.careers__list li {
  position: relative;
  padding-inline-start: 18px;
  color: var(--ivory);
  font-size: 0.875rem;
  line-height: 1.5;
}
/* The bullet: a 5px Gold dot, centred on the first line. */
.careers__list li::before {
  content: '';
  position: absolute;
  inset-block-start: calc(0.75em - 2.5px);
  inset-inline-start: 3px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
}
.careers__apply {
  margin-block-start: 22px;
}
.careers__open {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  margin-block-start: 28px;
  color: var(--ash);
}
.careers__open .link-arrow {
  font-size: 1rem;
}
/* The FAQ's opening: a 0.3s height and fade where the browser can animate <details>; instant
   elsewhere and under reduced motion. */
@supports selector(::details-content) {
  @media (prefers-reduced-motion: no-preference) {
    .careers__role {
      interpolate-size: allow-keywords;
    }
    .careers__role::details-content {
      height: 0;
      overflow: clip;
      opacity: 0;
      transition:
        height 0.3s var(--ease-out),
        opacity 0.3s var(--ease-out),
        content-visibility 0.3s allow-discrete;
    }
    .careers__role[open]::details-content {
      height: auto;
      opacity: 1;
    }
  }
}

/* ---------- Medium and up ---------- */
@media (min-width: 721px) {
  .privacy__grid,
  .security__docs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .about__socials {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .about__careers {
    flex-direction: row;
    align-items: center;
    gap: 1.5rem 2.5rem;
    min-block-size: 96px;
    padding: 20px 32px;
  }
  .about__careers-link {
    margin-inline-start: auto;
  }

  /* Careers: the meta beside the title, the two lists side by side (P-B). */
  .careers {
    --careers-pad: 32px;
  }
  .careers__summary {
    grid-template-areas: 'name meta icon';
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 0 30px;
    min-block-size: 92px;
  }
  .careers__name {
    font-size: 1.375rem;
  }
  .careers__meta {
    font-size: 0.6875rem;
    text-align: end;
  }
  .careers__icon {
    width: 22px;
    height: 22px;
  }
  .careers__body {
    padding-block: 0 32px;
  }
  .careers__line {
    font-size: 1.0625rem;
  }
  .careers__cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 48px;
    margin-block-start: 32px;
  }
  .careers__label {
    margin-block-end: 16px;
    font-size: 0.6875rem;
  }
  .careers__list li {
    font-size: 0.9375rem;
  }
  .careers__apply {
    margin-block-start: 28px;
  }
}

/* ---------- Wide ---------- */
@media (min-width: 1024px) and (orientation: landscape) {
  .faq__layout {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: 2rem clamp(2rem, 5vw, 5rem);
  }
  .faq__aside {
    position: sticky;
    inset-block-start: calc(var(--nav-bottom) + 2rem);
  }
}