/* The content pages in the dark UI of 15 October 2026: security, the terms of service, the privacy policy,
   the refund policy and the 404 page. Each stands on the reference's grid (.wrap, tokens.css) under the
   reference's page head (brand.css .page-head: the display title in its gradient and the lede), with the
   pages' own words. The header, its menu and the footer are menu.css's, loaded last.

   Every size and colour is a token from tokens.css; the closing band and its button are pages.css's and
   brand.css's. */

/* ---- What follows a page head: a row of buttons (the 404 page) ---- */
.page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--split); padding-bottom: var(--sec); }

/* ---- Long text: the terms, the privacy policy, the refund policy ----
   One column on the grid's start, a lede's measure wide (about 75 characters of body text). */
.prose { max-width: var(--measure); padding-bottom: var(--sec); color: var(--text-2); font: var(--type-body); }
.prose .updated { color: var(--text-2); font: var(--type-caption); }
.prose .summary { margin-top: var(--block); padding: var(--in-m); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel); }
.prose .summary p { color: var(--text); }
.prose h2 { margin-top: var(--group); color: var(--text); font: var(--type-title); letter-spacing: var(--track-title); }
.prose h2 + p, .prose h2 + ul { margin-top: var(--stack); }
.prose p + p { margin-top: var(--split); }
.prose ul { display: grid; gap: var(--row); margin: 0; padding-inline-start: var(--block); }
.prose li::marker { color: var(--text-3); }
.prose strong { color: var(--text); font-weight: 600; }
/* Links in running text are underlined: their colour alone is too close to the text's. */
.prose a {
  color: var(--cobalt-2); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, var(--cobalt-2) 45%, transparent);
  transition: text-decoration-color var(--dur-fade) var(--ease-fade);
}
.prose a:hover { text-decoration-color: currentColor; }

/* ---- Security: the two panels and the closing band ----
   The foundation on seven of the twelve columns, ownership on the other five; stacked below 1024. */
.sec-grid { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: var(--gutter); align-items: start; }
.sec-grid > .sec-panel { grid-column: span 6; }
@media (min-width: 1024px) {
  .sec-grid > .sec-panel:first-child { grid-column: 1 / span 7; }
  .sec-grid > .sec-panel:last-child { grid-column: 8 / span 5; }
}
@media (max-width: 1023.98px) { .sec-grid { grid-template-columns: minmax(0, 1fr); } .sec-grid > .sec-panel { grid-column: 1; } }
.sec-panel { padding: var(--in-l); border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--panel); }
.sec-panel h2 { font: var(--type-title); letter-spacing: var(--track-title); }
.sec-panel .sec-sub { margin-top: var(--row); color: var(--text-2); font: var(--type-small); }
.sec-list { display: grid; margin: var(--block) 0 0; padding: 0; list-style: none; }
.sec-list li { display: grid; grid-template-columns: var(--h-md) minmax(0, 1fr); column-gap: var(--split); padding-block: var(--split); border-top: 1px solid var(--line); }
.sec-list li:last-child { padding-bottom: 0; }
/* Each line's mark on a raised tile, as the menu draws its icons */
.sec-icon { display: grid; place-items: center; width: var(--h-md); height: var(--h-md); border-radius: var(--r-sm); background: var(--raised); box-shadow: inset 0 0 0 1px var(--line); color: var(--text-2); }
.sec-icon svg { display: block; width: var(--h-md); height: var(--h-md); }
.sector-icon { fill: none; stroke: currentColor; stroke-width: 1.55; stroke-linecap: round; stroke-linejoin: round; }
.sector-accent { fill: var(--cobalt-2); stroke: none; }
.sec-copy strong { display: block; color: var(--text); font: var(--type-body); font-weight: 600; }
.sec-copy small { display: block; margin-top: var(--pair); color: var(--text-2); font: var(--type-small); }
/* The closing band (pages.css .band): the line every plan shares and the way in */
.sec-band { margin-block: var(--group) var(--sec); }
.sec-band .band-note { max-width: var(--measure); color: var(--text); font: var(--type-subtitle); letter-spacing: var(--track-subtitle); }

/* ===== Arabic: html[dir="rtl"], set by assets/i18n.js before the first paint. The reference's roles name
   Sora and Manrope; Arabic lines read in IBM Plex Sans Arabic, with no negative tracking. ===== */
html[dir="rtl"] :is(.page-head .h1, .page-head .lede, .prose, .prose h2, .sec-panel h2, .sec-panel .sec-sub, .sec-copy strong, .sec-copy small, .sec-band .band-note, .page-actions .btn, .sec-band .btn) {
  font-family: var(--font-arabic); letter-spacing: 0;
}
html[dir="rtl"] .page-head .h1 { line-height: 1.25; }
html[dir="rtl"] :is(.page-actions, .sec-band) .btn .arr { transform: scaleX(-1); }

/* ---- Still on the old frame (.container): install.html's lede, until that page moves to the grid ---- */
.container .lead { max-width: var(--measure); margin: var(--display-lede) 0 0; color: var(--text-2); font: var(--type-lede); }

/* Reduced motion: nothing moves (brand.css says the same for the pages that load it; install.html does not yet). */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
}

/* ---- On paper: the words in black on white with no bar, menu or footer. The title's gradient is a background
   seen through its letters, and paper leaves backgrounds out, so the title prints as plain ink. ---- */
@media print {
  html, body { background: #fff !important; color: #000; color-scheme: light; }
  .skip-link, html body .topnav, .site-footer { display: none !important; }
  .page-head .h1.grad { background: none; color: #000; -webkit-text-fill-color: #000; }
  .page-head .lede, .prose, .prose :is(h2, strong, .updated, .summary p), .sec-panel :is(h2, .sec-sub),
  .sec-copy :is(strong, small), .sec-band .band-note { color: #000; }
  .prose a { color: #000; text-decoration-color: currentColor; }
  .prose .summary, .sec-panel, .sec-band { border-color: #999; background: none; }
  .sec-list li { border-top-color: #ccc; }
  .sec-icon { background: none; box-shadow: inset 0 0 0 1px #999; color: #000; }
}