/* ==========================================================================
   RenderWay / Shuaa -- light theme
   Paper-white page, artwork does the talking, one green.
   (The 2026-08 site's stylesheet, kept; pricing and form styles removed; the additions are at the end.)
   ========================================================================== */

@import url('/assets/css/fonts.css');

/* ---- tokens ---------------------------------------------------------- */
:root {
  /* Three grounds, three jobs. If the page were #fff we would have burned the
     top luminance value and every card would need a shadow to feel raised —
     which is exactly what makes light pages look flat and grubby.
     The hair of warmth matches the brand green's hue and reads as paper. */
  --paper:      #f5f5f1;   /* the page                  */
  --surface:    #ffffff;   /* raised: cards, mats, nav  */
  --surface-2:  #ecece6;   /* sunken well               */
  --surface-3:  #e2e2da;   /* deepest inset             */

  /* Ink — warm near-black, never pure #000 */
  --ink:        #16181a;
  --ink-2:      #4a5057;
  --ink-3:      #7d858d;

  --line:       #e4e6de;
  --line-2:     #d0d4c8;

  /* One green. Two jobs, two values. */
  --green:      #97c165;   /* fills, badges, graphic use — 8.9:1 against --ink */
  --green-dark: #4f7a22;   /* text and links on paper — 4.9:1, passes AA      */
  --green-deep: #3d5f19;   /* hover on text-green                             */
  --green-tint: #eef5e4;   /* washed background panels                        */

  --ink-invert: #ffffff;

  /* Dark sections — used sparingly, to frame artwork */
  --dark:       #14161a;
  --dark-2:     #1e2126;

  --font:      'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --page:      1240px;
  --pad:       26px;
  --r:         10px;
  --r-lg:      16px;

  --ease:      cubic-bezier(.22, .61, .36, 1);
  --shadow:    0 1px 2px rgba(22, 24, 26, .04), 0 8px 28px -14px rgba(22, 24, 26, .16);
  --shadow-lg: 0 2px 6px rgba(22, 24, 26, .05), 0 24px 60px -28px rgba(22, 24, 26, .3);
}

/* ---- reset ----------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 90px;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video, canvas { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 700;
  letter-spacing: -.021em;
  line-height: 1.1;
  text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-decoration: none; }

::selection { background: var(--green); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--green-dark);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---- layout ---------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--page); margin-inline: auto; padding-inline: var(--pad); }
.wrap-wide { max-width: 1560px; }

/* Generous, but two adjacent sections stack their padding — 116 top and bottom
   was leaving ~230px of dead space between short blocks. */
.section    { padding-block: 76px; }
.section-sm { padding-block: 56px; }
.section-lg { padding-block: 116px; }

.stack { display: flex; flex-direction: column; }
.row   { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.rule  { border-top: 1px solid var(--line); }

/* Heavier than a hairline. Two sections on the same background merge into one
   block otherwise — this gives the eye a stop without adding another band. */
.sep { height: 3px; background: var(--line-2); border-radius: 3px; }

.grid { display: grid; gap: 22px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* alternating tone band, so a long page has rhythm without borders everywhere */
.band       { background: var(--surface-2); }
.band-white { background: var(--surface); }
.band-dark  { background: var(--dark); color: #fff; }
.band-dark  .muted { color: rgba(255, 255, 255, .62); }
.band-dark  .lede  { color: rgba(255, 255, 255, .78); }

/* ---- type ------------------------------------------------------------ */
.display { font-size: clamp(40px, 6vw, 76px); line-height: .98;  letter-spacing: -.035em; font-weight: 800; }
.h1      { font-size: clamp(32px, 4.4vw, 54px); line-height: 1.04; letter-spacing: -.03em;  font-weight: 700; }
.h2      { font-size: clamp(25px, 3vw, 36px);   line-height: 1.1;  letter-spacing: -.026em; font-weight: 700; }
.h3      { font-size: clamp(19px, 1.7vw, 22px); line-height: 1.25; letter-spacing: -.018em; font-weight: 700; }
.h4      { font-size: 16px; line-height: 1.35; letter-spacing: -.012em; font-weight: 700; }

.lede  { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.55; color: var(--ink-2); font-weight: 400; }
.body  { font-size: 17px;   line-height: 1.68; color: var(--ink-2); }
.small { font-size: 15.5px; line-height: 1.62; color: var(--ink-2); }
.tiny  { font-size: 13px;   line-height: 1.5;  color: var(--ink-3); }

.measure    { max-width: 62ch; }
.measure-sm { max-width: 46ch; }
.measure-xs { max-width: 32ch; }

.muted  { color: var(--ink-2); }
.dim    { color: var(--ink-3); }
.green  { color: var(--green-dark); }
.center { text-align: center; }
.mt-auto { margin-top: auto; }

/* Section label. Was green at 11px and disappeared against the paper —
   ink at 12px with a green rule carries the brand without hiding the word. */
.eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ink);
}
/* Rule sits ABOVE the label, not beside it. Beside it, the 18px rule plus its
   gap pushed the text 28px right of the heading and the cards below — which
   read as a misalignment, because it was one. */
.eyebrow::before {
  content: '';
  display: block;
  width: 24px;
  height: 2px;
  border-radius: 2px;
  background: var(--green);
  margin-bottom: 11px;
}
.band-dark .eyebrow { color: #fff; }

/* Shuaa lockup inside the page body on the product pages. The header keeps
   the RenderWay mark — this says which product you are looking at. */
.page-mark { height: 30px; width: auto; margin-bottom: 22px; }

/* technical metadata — always mono, always tabular */
.spec {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: .01em;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

/* ---- buttons --------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 22px;
  border: 1px solid transparent;
  border-radius: var(--r);
  font-size: 16.5px;
  font-weight: 600;
  letter-spacing: -.006em;
  cursor: pointer;
  white-space: nowrap;
  transition: background .16s var(--ease), border-color .16s var(--ease),
              color .16s var(--ease), transform .12s var(--ease), box-shadow .16s var(--ease);
}
.btn:active { transform: translateY(1px); }

/* green fill, ink text — 8.9:1, and it is the brand rather than a generic CTA blue */
.btn-primary { background: var(--green); color: var(--ink); border-color: var(--green); }
.btn-primary:hover { background: #a6cd77; border-color: #a6cd77; box-shadow: 0 6px 20px -8px rgba(151,193,101,.9); }

.btn-ink { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn-ink:hover { background: #2a2e33; border-color: #2a2e33; }

.btn-outline { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn-outline:hover { border-color: var(--ink-3); background: rgba(22, 24, 26, .03); }

.btn-ghost { background: none; color: var(--green-dark); padding-inline: 2px; }
.btn-ghost:hover { color: var(--green-deep); }

/* on a dark or photographic background */
.btn-glass {
  background: rgba(255, 255, 255, .12);
  color: #fff;
  border-color: rgba(255, 255, 255, .38);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.btn-glass:hover { background: rgba(255, 255, 255, .22); border-color: rgba(255,255,255,.6); }

.btn-lg { padding: 17px 30px; font-size: 18px; }
.btn-sm { padding: 9px 17px;  font-size: 15px; }
.btn-block { width: 100%; }
.btn[disabled], .btn-disabled { opacity: .45; cursor: not-allowed; pointer-events: none; }
.btn .arw { transition: transform .18s var(--ease); }
.btn:hover .arw { transform: translateX(3px); }

/* ---- badge ----------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--green-tint);
  color: var(--green-deep);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .09em;
  text-transform: uppercase;
  white-space: nowrap;
}
.badge-plain { background: var(--surface-3); color: var(--ink-2); }
.badge-glass { background: rgba(255,255,255,.16); color: #fff; backdrop-filter: blur(8px); }
.badge-dot::before {
  content: '';
  width: 5px; height: 5px; border-radius: 50%;
  background: currentColor;
  animation: pulse 2.4s var(--ease) infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1 } 50% { opacity: .3 } }

/* ---- header ---------------------------------------------------------- */
.hdr {
  position: sticky;
  top: 0;
  z-index: 80;
  background: rgba(251, 251, 248, .88);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav { display: flex; align-items: center; gap: 26px; height: 58px; }

.nav-logo img { height: 23px; width: auto; }

.nav-links { display: flex; align-items: center; gap: 2px; margin-left: 8px; flex: 1; }
.nav-link {
  padding: 7px 12px;
  border-radius: 7px;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink-2);
  transition: color .14s var(--ease), background .14s var(--ease);
}
.nav-link:hover { color: var(--ink); background: rgba(22, 24, 26, .045); }
.nav-link[aria-current='page'] { color: var(--ink); font-weight: 600; }

.nav-actions { display: flex; align-items: center; gap: 9px; }
.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--line-2);
  border-radius: 7px;
  padding: 7px 9px;
  cursor: pointer;
}

/* ---- hero ------------------------------------------------------------ */
.hero {
  position: relative;
  height: clamp(560px, 78vh, 820px);
  overflow: hidden;
  background: var(--dark);
}
.hero-slides { position: absolute; inset: 0; }
.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.1s var(--ease);
}
.hero-slide.is-active { opacity: 1; }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; }

/* Three layers: a flat ~50% wash so the white lockup always reads, a stronger
   pull on the left where the type sits, and a top/bottom gradient for the
   header and the caption row. The right side stays lightest so the render
   still carries. */
/* Light now — the panel behind the lockup carries the contrast, so this only
   has to keep the header and the caption row legible. */
.hero-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(8,9,11,.34) 0%, rgba(8,9,11,.06) 26%, rgba(8,9,11,.06) 58%, rgba(8,9,11,.5) 100%);
}

.hero-body {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  /* right down at the foot of the image — it can go this low because the
     credit and dots are over on the right, not underneath it */
  justify-content: flex-end;
  padding-bottom: 44px;
  color: #fff;
}

/* The scrim used to do this job across the whole image, which meant dimming
   the render to light the type. A discrete panel lights only what it must. */
.hero-panel {
  display: inline-block;
  background: rgba(0, 0, 0, .5);
  border-radius: 8px;
  padding: 30px 32px 32px;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

/* Narrower than the general lede measure. At 46ch the second line ended well
   short of the panel edge, which read as a wide empty right margin. */
.hero-panel .lede { max-width: 36ch; }

.hero-logo { width: min(400px, 58vw); margin-bottom: 22px; }
.hero-body .lede { color: rgba(255, 255, 255, .88); }

/* Credit and dots both on the right, stacked. Keeping the bottom-left clear
   is what lets the panel sit right down at the foot of the image. */
.hero-foot {
  position: absolute;
  left: 0; right: 0; bottom: 22px;
  color: rgba(255, 255, 255, .78);
}
.hero-foot .spec { color: rgba(255, 255, 255, .66); }
.hero-meta {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
}
.hero-meta .dots { margin-top: 10px; }

.dots { display: flex; gap: 10px; }
.dots button {
  width: 11px; height: 11px;
  padding: 0;
  border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .4);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
  cursor: pointer;
  transition: background .2s var(--ease), transform .2s var(--ease);
}
.dots button:hover { background: rgba(255, 255, 255, .7); }
/* .is-on drives the visual state, aria-selected stays for screen readers.
   A class invalidates styles reliably; attribute selectors on long-lived
   nodes do not, in every engine. */
.dots button.is-on { background: var(--green); transform: scale(1.2); }

/* ---- image frame ----------------------------------------------------- */
/* Square, borderless, edge to edge. The render is the object; nothing is
   drawn around it. */
.frame {
  position: relative;
  overflow: hidden;
  border-radius: 0;
  background: var(--surface-2);
  padding: 0;
}
.frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  background: var(--surface-2);
}

.caption {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  margin-top: 10px;
  font-size: 13px;
  color: var(--ink-3);
  flex-wrap: wrap;
}

/* full-bleed band: the other sanctioned edge — image touches both viewport
   edges, hard square cut against the paper above and below. Hero only. */
.bleed { position: relative; overflow: hidden; background: var(--dark); }

/* square corners — a portrait reads better with a hard edge than a soft one */
.frame-square, .frame-square img { border-radius: 0; }

/* ---- render metadata ------------------------------------------------- */
/* Name | Render Time | Samples | Card. The separators are drawn rather than
   typed, so the row wraps cleanly on a narrow tile instead of stranding a
   pipe at the start of a line. */
.meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 14px;
  margin-top: 11px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.meta span { display: inline-flex; align-items: baseline; }
.meta span + span::before {
  content: '|';
  margin-right: 14px;
  color: var(--line-2);
}
.meta-name {
  font-family: var(--font);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
}

/* ---- video ----------------------------------------------------------- */
.video-frame { aspect-ratio: 16 / 9; padding: 0; }
.video-frame iframe { width: 100%; height: 100%; border: 0; border-radius: 0; display: block; }

.video-play {
  position: relative;
  display: block;
  width: 100%; height: 100%;
  padding: 0; border: 0;
  background: var(--dark);
  cursor: pointer;
  border-radius: 0;
  overflow: hidden;
}
.video-play img { width: 100%; height: 100%; object-fit: cover; }
.video-play::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,11,13,.1), rgba(10,11,13,.45));
  transition: background .25s var(--ease);
}
.video-play:hover::after { background: linear-gradient(180deg, rgba(10,11,13,.05), rgba(10,11,13,.3)); }

.video-btn {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  width: 78px; height: 78px;
  border-radius: 50%;
  background: var(--green);
  color: var(--ink);
  display: grid; place-items: center;
  padding-left: 5px;
  box-shadow: 0 10px 40px -8px rgba(0, 0, 0, .6);
  transition: transform .22s var(--ease);
}
.video-play:hover .video-btn { transform: translate(-50%, -50%) scale(1.07); }

/* ---- cards ----------------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px;
}
.card-hover { transition: box-shadow .2s var(--ease), transform .2s var(--ease), border-color .2s var(--ease); }
.card-hover:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); border-color: var(--line-2); }

/* feature row — a numbered list that is not a card grid */
.feature { display: flex; gap: 18px; padding-block: 26px; border-top: 1px solid var(--line); }
.feature-n {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--green-dark);
  padding-top: 4px;
  flex: none;
  width: 34px;
}

/* ---- gallery --------------------------------------------------------- */
/* small previews, one size, four across; the full render opens in the lightbox */
.gal { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.gal figure { margin: 0; }
.gal .frame { aspect-ratio: 16 / 9; cursor: zoom-in; }
.gal img { transition: transform .55s var(--ease); }
.gal figure:hover img { transform: scale(1.03); }

.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chips button {
  padding: 8px 15px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: transparent;
  color: var(--ink-2);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  transition: all .15s var(--ease);
}
.chips button:hover { border-color: var(--ink-3); color: var(--ink); }
.chips button.is-on { background: var(--ink); color: #fff; border-color: var(--ink); }

/* lightbox */
.lb {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(14, 15, 17, .94);
  backdrop-filter: blur(6px);
  display: none; align-items: center; justify-content: center;
  padding: 44px 26px;
}
.lb.is-open { display: flex; }

/* The figure shrinks to the image rather than the other way round. The image
   is usually height-constrained, so a full-width figure left the caption
   hanging past both edges of the picture. */
.lb figure { margin: 0; width: fit-content; max-width: 100%; }
.lb img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(1500px, 100%);
  max-height: 80vh;
  border-radius: 0;
}

/* prev / next — big enough to hit, out of the way of the image */
.lb-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 52px; height: 52px;
  display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background .16s var(--ease), border-color .16s var(--ease), transform .16s var(--ease);
}
.lb-nav:hover { background: rgba(255, 255, 255, .22); border-color: rgba(255, 255, 255, .55); }
.lb-nav:active { transform: translateY(-50%) scale(.94); }
.lb-prev { left: 24px; }
.lb-next { right: 24px; }

.lb-count {
  font-family: var(--font-mono);
  font-size: 12px;
  color: rgba(255, 255, 255, .5);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 700px) {
  .lb { padding: 60px 14px; }
  .lb-nav { width: 44px; height: 44px; }
  .lb-prev { left: 8px; }
  .lb-next { right: 8px; }
}
/* Sits inside the figure, so its ends line up with the edges of the picture:
   name against the left edge, counter against the right. */
.lb figcaption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 14px;
  font-size: 14.5px;
  color: rgba(255, 255, 255, .82);
}
.lb figcaption .spec { flex: 1; text-align: center; }
.lb figcaption .spec { color: rgba(255,255,255,.55); }
.lb-x {
  position: absolute; top: 20px; right: 24px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.3);
  color: #fff; border-radius: 8px; padding: 8px 13px; cursor: pointer; font-size: 13px;
}

/* ---- install steps --------------------------------------------------- */
.install {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  text-align: left;
}
.install li {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 22px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-2);
}
.install-n {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  margin-bottom: 12px;
  border-radius: 50%;
  background: var(--green);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
}

/* ---- tables ---------------------------------------------------------- */
.tbl { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.tbl th, .tbl td { text-align: left; padding: 13px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl th {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-3); font-weight: 500;
}
.tbl td:first-child { color: var(--ink-3); width: 38%; padding-right: 18px; }
.tbl td:last-child { color: var(--ink); }
.tbl tr:last-child td { border-bottom: 0; }

/* ---- accordion ------------------------------------------------------- */
.acc details { border-bottom: 1px solid var(--line); }
.acc details:first-child { border-top: 1px solid var(--line); }
.acc summary {
  list-style: none; cursor: pointer; position: relative;
  padding: 19px 40px 19px 0;
  font-size: 16.5px; font-weight: 600; letter-spacing: -.014em;
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary::after {
  content: '+'; position: absolute; right: 4px; top: 50%;
  transform: translateY(-50%); font-size: 21px; font-weight: 400; color: var(--ink-3);
  transition: transform .2s var(--ease), color .2s var(--ease);
}
.acc details[open] summary::after { transform: translateY(-50%) rotate(45deg); color: var(--green-dark); }
.acc details > div { padding: 0 40px 21px 0; font-size: 15px; line-height: 1.68; color: var(--ink-2); }
.acc details > div p + p { margin-top: 12px; }

/* ---- note ------------------------------------------------------------ */
.note {
  border-left: 2px solid var(--green);
  background: var(--green-tint);
  border-radius: 0 var(--r) var(--r) 0;
  padding: 18px 22px;
}
.note-plain { border-left-color: var(--line-2); background: var(--surface-2); }

/* ---- social ---------------------------------------------------------- */
.social { display: flex; gap: 8px; flex-wrap: wrap; }
.social a {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  color: var(--ink-2);
  transition: all .15s var(--ease);
}
.social a:hover { color: var(--ink); border-color: var(--ink-3); transform: translateY(-2px); }
.social svg { width: 17px; height: 17px; }

/* full-width centred row — the repeat at the foot of the contact page */
.social-center { justify-content: center; gap: 12px; }
.social-center a { width: 44px; height: 44px; }
.social-center svg { width: 19px; height: 19px; }

/* ---- footer ---------------------------------------------------------- */
/* Two tones: the link area sits on the sunken well, the legal bar a step
   darker again, so the end of the page is unmistakably the end. */
.ftr { background: var(--surface-2); border-top: 1px solid var(--line-2); }
.ftr-top { padding-block: 60px 44px; }
.ftr-btm { background: var(--surface-3); border-top: 1px solid var(--line-2); padding-block: 20px 24px; }
.ftr-btm-row { display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; }

/* brand column takes the slack; the two link columns hug the right edge */
.ftr-grid { display: grid; grid-template-columns: 1fr auto auto; gap: 72px; }
.ftr h4 {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 13px; font-weight: 500;
}
.ftr a.lnk { display: block; font-size: 14.5px; color: var(--ink-2); padding-block: 5px; transition: color .14s var(--ease); }
.ftr a.lnk:hover { color: var(--green-dark); }
.ftr-btm-l { display: flex; align-items: center; gap: 14px; }
.ftr-btm-l img { height: 26px; width: auto; }

/* Legal lives here, not in a titled column — the convention across this
   category (FStorm, Chaos) is a small bottom bar beside the copyright. */
.ftr-legal { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.ftr-legal a {
  font-size: 12.5px;
  color: var(--ink-3);
  transition: color .14s var(--ease);
}
.ftr-legal a:hover { color: var(--green-dark); }
.ftr-legal a + a::before {
  content: '·';
  margin-right: 8px;
  color: var(--line-2);
}

/* ---- prose (legal) --------------------------------------------------- */
.doc { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 54px; align-items: start; }
.toc { position: sticky; top: 84px; }
.toc h4 {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 11px; font-weight: 500;
}
.toc a {
  display: block; font-size: 13.5px; line-height: 1.4; color: var(--ink-2);
  padding: 6px 0 6px 12px; border-left: 1px solid var(--line);
  transition: color .14s var(--ease), border-color .14s var(--ease);
}
.toc a:hover { color: var(--green-dark); border-left-color: var(--green); }

.prose { max-width: 68ch; }
.prose h2 { font-size: 21px; margin: 40px 0 12px; scroll-margin-top: 96px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 16.5px; margin: 26px 0 8px; }
.prose p, .prose li { font-size: 15.5px; line-height: 1.72; color: var(--ink-2); }
.prose p { margin-bottom: 14px; }
.prose ul, .prose ol { margin: 0 0 16px; padding-left: 20px; }
.prose li { margin-bottom: 7px; }
.prose strong { color: var(--ink); font-weight: 700; }
.prose a { color: var(--green-dark); text-decoration: underline; text-underline-offset: 2px; }
.prose code { font-family: var(--font-mono); font-size: .88em; }

/* Verbatim licence text — must not be reflowed, so it scrolls in its own box
   rather than forcing the page to scroll sideways. */
.licence-text {
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--ink-2);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 20px;
  overflow-x: auto;
  max-height: 460px;
  overflow-y: auto;
  white-space: pre;
  margin-bottom: 18px;
}

/* ---- utility --------------------------------------------------------- */
.hide { display: none !important; }

/* flex gap helpers, used by the legal templates */
.gap-8  { gap: 8px  } .gap-10 { gap: 10px } .gap-12 { gap: 12px }
.gap-14 { gap: 14px } .gap-16 { gap: 16px } .gap-18 { gap: 18px }
.gap-20 { gap: 20px } .gap-24 { gap: 24px }

.fg     { color: var(--ink); }
.accent { color: var(--green-dark); }

.note-warn { border-left-color: #d9a300; background: #fdf6e0; }
.full-bleed { width: 100vw; margin-left: 50%; transform: translateX(-50%); }

/* ---- responsive ------------------------------------------------------ */
@media (max-width: 1040px) {
  .ftr-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .doc { grid-template-columns: 1fr; gap: 30px; }
  .toc { position: static; }
  .toc a { display: inline-block; border-left: 0; border-bottom: 1px solid var(--line); padding: 5px 12px 5px 0; margin-right: 8px; }
}

@media (max-width: 900px) {
  :root { --pad: 20px; }
  .nav-links { display: none; }
  .nav-toggle { display: block; }
  .nav.open { height: auto; flex-wrap: wrap; padding-bottom: 12px; }
  .nav.open .nav-links {
    display: flex; order: 3; flex-direction: column; align-items: stretch;
    width: 100%; margin: 6px 0 0; gap: 1px;
  }
  .nav.open .nav-link { padding: 11px 12px; font-size: 15.5px; }

  .section { padding-block: 54px; }
  .section-lg { padding-block: 76px; }

  .g2, .g3 { grid-template-columns: 1fr; }
  .install { grid-template-columns: 1fr; }
  .ftr-grid { grid-template-columns: 1fr 1fr; gap: 32px; }


  /* taller than desktop in proportion, because the buttons stack and the
     panel has to sit above the caption row rather than overlap it */
  .hero { height: clamp(620px, 88vh, 780px); }
  .hero-logo { width: min(290px, 66vw); margin-bottom: 18px; }
  .hero-body { padding-bottom: 92px; }
  .hero-panel { padding: 24px 22px 26px; }
  .hero-foot { bottom: 18px; }
}

@media (max-width: 560px) {
  .ftr-grid { grid-template-columns: 1fr; }
  .btn { width: 100%; }
  .row > .btn { flex: 1 1 auto; }
  .soon-follow { width: 100%; }
  .soon-follow .btn { width: auto; flex: 1 1 0; min-width: 0; padding-inline: 14px; }
  /* at this width the credit reads better left-aligned under the panel */
  .hero-foot > .wrap { justify-content: flex-start; }
  .hero-meta { text-align: left; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .hero-slide { transition: none; }
}

/* ==========================================================================
   Additions (2026-10-02)
   ========================================================================== */

/* the carousel's slow push-in on the visible render */
.hero-slide img { transform-origin: 60% 50%; }
.hero-slide.is-active img { animation: push var(--dwell, 6.2s) linear forwards; }
@keyframes push { from { transform: scale(1.0); } to { transform: scale(1.06); } }
.hero-title { margin: 0; }
.hero-panel .badge { margin-bottom: 18px; }
.hero-panel .lede { margin-bottom: 26px; }
.hero-foot .wrap { display: flex; justify-content: flex-end; }

/* spacing and layout helpers (no inline styles anywhere: the page's security policy forbids them) */
.mb-8 { margin-bottom: 8px; } .mb-12 { margin-bottom: 12px; } .mb-14 { margin-bottom: 14px; }
.mb-18 { margin-bottom: 18px; } .mb-22 { margin-bottom: 22px; } .mb-26 { margin-bottom: 26px; }
.mb-30 { margin-bottom: 30px; } .mb-34 { margin-bottom: 34px; }
.mt-12 { margin-top: 12px; } .mt-16 { margin-top: 16px; } .mt-22 { margin-top: 22px; } .mt-28 { margin-top: 28px; }
.page-top { padding-top: 56px; }
.pad-b-26 { padding-bottom: 26px; }
.pad-t-0 { padding-top: 0; }
.head-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 34px; }
.head-row-c { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 30px; }
.cta-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 30px; }
.gap-wide { gap: 0 64px; }
.gap-56 { gap: 56px; }
.narrow { max-width: 820px; }
.m0 { margin: 0; }
.feature h3 { margin-bottom: 5px; }
.gal-intro { margin-top: 14px; }
.chip-row { margin-bottom: 26px; }
.footer-mark { height: 36px; width: auto; margin-bottom: 18px; }
.about-logo { height: 64px; width: auto; margin-bottom: 30px; }
.founder-name { font-size: 26px; letter-spacing: -.022em; }
.founder-head { margin-bottom: 20px; }
.founder-text { max-width: 760px; }
.founder-text p + p { margin-top: 16px; }
.figure-plain { margin: 0; }
.frame-43 { aspect-ratio: 4 / 3; }
.legal-card p { margin-top: 6px; }

/* the public download page: one message, centred */
.soon { text-align: center; padding-block: 120px 140px; }
.soon .page-mark { margin-inline: auto; }
.soon .lede { margin-inline: auto; margin-top: 18px; }
.soon .social { justify-content: center; margin-top: 30px; }
.soon .row { justify-content: center; }

/* the root page while renderway.com/ points at Shuaa */
.redirect { min-height: 70vh; display: grid; place-items: center; text-align: center; }

/* the private pre-beta page */
.builds { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; max-width: 640px; }   /* one zip, both hosts */
.build { display: flex; flex-direction: column; gap: 16px; }
.build .row { justify-content: space-between; }
.hash { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); word-break: break-all; line-height: 1.5; }
.accept { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.accept input { width: 19px; height: 19px; margin: 3px 0 0; accent-color: var(--green-dark); flex: none; cursor: pointer; }
.accept a { color: var(--green-dark); text-decoration: underline; text-underline-offset: 2px; }
.steps-list { margin: 0; padding-left: 20px; }
.steps-list li { font-size: 15.5px; line-height: 1.7; color: var(--ink-2); margin-bottom: 8px; }
.steps-list b { color: var(--ink); }
.kbd { font-family: var(--font-mono); font-size: .85em; padding: 1px 6px; border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 5px; background: var(--surface); }

/* the old contact table's long addresses must wrap on a phone */
.tbl td { overflow-wrap: anywhere; }

@media (max-width: 900px) {
  .soon { padding-block: 80px 96px; }
  .gap-wide { gap: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-slide.is-active img { animation: none; }
}
.soon .eyebrow::before { margin-inline: auto; }

/* phones: the menu button to the right edge; the open menu as a full-width list under the bar; room under the
   hero panel for the render's caption (the old stylesheet let both collide) */
@media (max-width: 900px) {
  .nav-toggle { margin-left: auto; }
  .nav.open .nav-links { flex: 0 0 100%; }
  .hero-body { padding-bottom: 118px; }
}
@media (max-width: 560px) {
  .hero-body { padding-bottom: 132px; }
}

/* ==== 2026-10-03: the Shuaa page in the owner's order ================================================== */

/* the logo left, a thin upright line, the phrase right; then a line, the sneak peek's title and the video */
.intro { padding-block: 52px 26px; }
.intro-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 44px; align-items: center; }
.intro-lede { justify-self: start; max-width: 26ch; text-align: left; font-size: clamp(20px, 2.1vw, 25px);
              line-height: 1.45; color: var(--ink-2); }
.intro-vline { width: 1px; align-self: stretch; background: var(--line-2); }
.intro-mark { justify-self: end; margin: 0; }
.intro-mark img { width: min(320px, 64vw); height: auto; }
.intro-sep { border: 0; height: 1px; background: var(--line-2); margin: 38px 0 28px; }
.intro-title { text-align: center; font-size: clamp(24px, 3vw, 34px); letter-spacing: -.022em; margin-bottom: 24px; }

/* under the video, attached to it: black, square; the Public Beta left, YouTube and the four accounts
   (two by two) right */
.soon-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 36px;
            margin: 14px 0 0; padding: 24px 30px; border: 0; border-radius: 0; background: var(--dark);
            color: #fff; }
.soon-title { font-size: clamp(28px, 3.4vw, 44px); letter-spacing: -.028em; color: #fff; }
.soon-bar .social-grid a { background: transparent; border-color: rgba(255, 255, 255, .24);
                           color: rgba(255, 255, 255, .85); }
.soon-bar .social-grid a:hover { color: #fff; border-color: rgba(255, 255, 255, .6); }
.soon-follow { display: flex; align-items: center; gap: 12px; }
.btn-icon { width: 20px; height: 20px; flex: none; }
.social-grid { display: grid; grid-template-columns: repeat(2, 30px); gap: 4px; }
.social-grid a { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px;
                 border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-2);
                 transition: color .16s var(--ease), border-color .16s var(--ease), transform .16s var(--ease); }
.social-grid a:hover { color: var(--ink); border-color: var(--ink-3); transform: translateY(-1px); }
.social-grid svg { width: 14px; height: 14px; }

/* features: one band per row, white and paper in turn; in each, as in the first build, a rounded card for the
   render (half of a 1040 px column) beside a number, a big title and the text, sides alternating; a slow
   push-in on hover. The three text-only features share the last band, three across. */
.feat-section { background: var(--surface); }
.feat-head { text-align: center; padding-top: 30px; padding-bottom: 24px; }
.feat-head .eyebrow::before { margin-inline: auto; }
.eyebrow-lg { font-size: 19px; letter-spacing: .2em; margin-bottom: 12px; color: var(--ink-2); }
.eyebrow-lg::before { width: 40px; height: 3px; margin-bottom: 14px; }
.feat-head .h2 { font-size: clamp(30px, 3.6vw, 44px); }
.feat-band { padding-block: 34px; }
.feat-band.alt { background: #eeeee7; }
.feat-row, .feat-trio { max-width: 1040px; margin-inline: auto; }
.feat-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; align-items: center; }
.feat-row.flip .feat-media { order: 2; }
.feat-card { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: 18px;
             background: var(--surface-2); border: 1px solid var(--line); box-shadow: var(--shadow-lg); }
.feat-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease);
                 transform-origin: 55% 50%; }
.feat-row:hover .feat-card img { transform: scale(1.05); }
.feat-card[data-full] { cursor: zoom-in; }
.feat-label { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-family: var(--font-mono);
              font-size: 12px; letter-spacing: .15em; color: var(--green-dark); }
.feat-label::before { content: ''; width: 24px; height: 2px; border-radius: 2px; background: var(--green); }
.feat-title { font-size: clamp(26px, 2.6vw, 34px); line-height: 1.12; letter-spacing: -.025em; margin-bottom: 12px; }
.feat-title-sm { font-size: clamp(22px, 2vw, 26px); }
.feat-text .body { max-width: 42ch; }
/* the reserved card: the image the owner will add, named */
.feat-box { display: grid; place-items: center; border: 1.5px dashed var(--line-2); box-shadow: none; }
.feat-box span { font-family: var(--font-mono); font-size: 13px; color: var(--ink-3); }
.feat-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; }

/* the gallery band, dark: the words and the button left, the renders right -- the newest first, a new one every
   5 s, crossfading, each with the slow push-in */
.gal-band { padding-block: 52px; }
.gal-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 64px; align-items: center; }
.gal-latest { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 9; border-radius: 18px;
              background: var(--dark-2); box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .85); }
.gal-latest img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0;
                  transition: opacity 1s var(--ease); transform-origin: 55% 50%; }
.gal-latest img.is-on { opacity: 1; animation: push 6.2s linear forwards; }

/* requirements, big type, tight rows */
.req { padding-block: 52px; }
.req-title { font-size: clamp(34px, 5vw, 60px); letter-spacing: -.03em; margin-bottom: 18px; }
.tbl-xl { font-size: clamp(17px, 1.7vw, 21px); line-height: 1.3; }
.tbl-xl td { padding: 11px 0; }
.tbl-xl td:first-child { width: 28%; }

/* the private page's download form */
.dl-form { display: grid; gap: 20px; max-width: 640px; }
.field { display: grid; gap: 8px; }
.input { width: 100%; padding: 13px 15px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface);
         font-family: var(--font-mono); font-size: 16px; letter-spacing: .06em; text-transform: uppercase; }
.input::placeholder { color: var(--ink-3); letter-spacing: .06em; }
.input:focus { outline: 2px solid var(--green-dark); outline-offset: 1px; border-color: var(--green-dark); }
.btn[disabled] { opacity: .55; cursor: progress; }

@media (max-width: 1100px) {
  .gal { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .intro { padding-block: 40px 44px; }
  .intro-row { grid-template-columns: 1fr; gap: 16px; }
  .intro-vline { display: none; }
  .intro-mark { justify-self: start; }
  .intro-lede { justify-self: start; max-width: none; }
  .intro-sep { margin: 30px 0 24px; }
  .soon-bar { padding: 20px; }
  .gal-band, .req { padding-block: 40px; }
  .feat-band { padding-block: 28px; }
  .feat-row { grid-template-columns: 1fr; gap: 22px; }
  .feat-row.flip .feat-media { order: 0; }
  .feat-media { max-width: 560px; }
  .feat-trio { grid-template-columns: 1fr; gap: 30px; }
  .gal-split { grid-template-columns: 1fr; gap: 34px; }
}
@media (max-width: 700px) {
  .gal { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tbl-xl td:first-child { width: 34%; }
}
@media (prefers-reduced-motion: reduce) {
  .feat-card img, .gal img { transition: none; }
  .gal-latest img.is-on { animation: none; }
  .feat-row:hover .feat-card img { transform: none; }
}

/* review 2026-10-03: keyboard focus on the video (the frame clips an outline drawn on the button itself) */
.video-frame:has(.video-play:focus-visible) { outline: 2px solid var(--green-dark); outline-offset: 3px; }
.video-play:focus-visible .video-btn { outline: 3px solid #fff; outline-offset: 4px; }
/* small grey text reaches 4.5:1 on white and paper; the footer bar's small print takes the darker grey */
:root { --ink-3: #646b72; }
.ftr-btm .tiny, .ftr-legal a { color: var(--ink-2); }

/* the newsletter sign-up (Kit): one email field and a button, centred under "Public Beta coming soon." */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
           white-space: nowrap; border: 0; }
.notify-form { display: flex; gap: 10px; max-width: 480px; margin: 26px auto 0; }
.notify-form input { flex: 1; min-width: 0; padding: 13px 15px; border: 1px solid var(--line-2); border-radius: var(--r);
                     background: var(--surface); font-size: 16px; color: var(--ink); }
.notify-form input:focus { outline: 2px solid var(--green-dark); outline-offset: 1px; border-color: var(--green-dark); }
.notify-note { margin-top: 10px; }
.notify-note a, .prebeta-ask a { text-decoration: underline; text-underline-offset: 2px; }
.prebeta-ask { margin-top: 30px; }
@media (max-width: 560px) {
  .notify-form { flex-direction: column; }
}
/* the same sign-up in the home page's black bar: left-aligned under the title, light small print, green focus */
.soon-main { flex: 1 1 420px; min-width: 0; }
.soon-bar .notify-form { margin: 18px 0 0; max-width: 500px; }
.soon-bar .notify-form input { border-color: transparent; }
.soon-bar :focus-visible { outline-color: var(--green); }
.soon-bar .notify-form input:focus { outline-color: var(--green); border-color: var(--green); }
.soon-bar .notify-note { color: rgba(255, 255, 255, .62); }
.soon-bar .notify-note a { color: rgba(255, 255, 255, .85); }
.soon-bar .notify-note a:hover { color: #fff; }

/* ==== 2026-10-10: the Beta -- the download page, Support, the update log, the FAQ ======================= */

/* the footer gains a Support column */
.ftr-grid { grid-template-columns: 1fr auto auto auto; gap: 60px; }

/* the home page's black bar now says the Beta is out */
.soon-lede { color: rgba(255, 255, 255, .72); margin-top: 8px; font-size: 16px; }
.soon-bar .btn-glass { backdrop-filter: none; -webkit-backdrop-filter: none; }

/* the download page */
.measure-wide { max-width: 860px; }
.dl-beta { display: grid; gap: 22px; }
.dl-accept { max-width: 860px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--line-2);
             border-radius: var(--r); }
.dl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; max-width: 1040px; }
.dl-card { display: flex; flex-direction: column; gap: 18px; }
.dl-card-head .eyebrow { margin-bottom: 6px; }
.dl-host { font-size: clamp(40px, 5vw, 60px); letter-spacing: -.03em; line-height: 1; }
.dl-card .btn-lg { white-space: normal; text-align: center; }
.dl-card .tbl td:first-child { width: 26%; }
.dl-small { max-width: 860px; }
.dl-small a { text-decoration: underline; text-underline-offset: 2px; }
.center .notify-form { margin-inline: auto; }

/* Support */
.support-card { display: block; }
.support-card .h3 { margin-top: 2px; }

/* the update log: the builds' index left, the releases right */
.rel-wrap { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 20px 54px; align-items: start; }
.rel-tools { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; justify-content: space-between; }
.rel-search { padding: 10px 14px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface);
              font-size: 15px; min-width: 240px; }
.rel-search:focus { outline: 2px solid var(--green-dark); outline-offset: 1px; border-color: var(--green-dark); }
.rel-index { position: sticky; top: 84px; display: flex; flex-direction: column; }
.rel-index a { padding: 6px 0 6px 12px; border-left: 1px solid var(--line); font-size: 14.5px; color: var(--ink-2); }
.rel-index a:hover { color: var(--green-dark); border-left-color: var(--green); }
.rel-list { display: flex; flex-direction: column; gap: 26px; min-width: 0; }
.rel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px 28px; scroll-margin-top: 90px; }
.rel-head { margin-bottom: 14px; }
.rel-title-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.rel-version { font-size: clamp(26px, 3vw, 34px); letter-spacing: -.025em; }
.rel-stage { color: var(--ink-3); font-weight: 600; }
.rel-summary p, .rel-body p { font-size: 15.5px; line-height: 1.65; color: var(--ink-2); }
.rel-summary p + p, .rel-body p + p { margin-top: 10px; }
.rel-summary { margin-bottom: 8px; }
.rel-group { margin-top: 20px; }
.rel-group-title { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
                   color: var(--ink-3); font-weight: 500; margin-bottom: 4px; }
.rel-items { list-style: none; margin: 0; padding: 0; }
.rel-item { padding: 14px 0; border-top: 1px solid var(--line); }
.rel-item:first-child { border-top: 0; }
.rel-item-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.rel-item-title { font-size: 16px; color: var(--ink); }
.rel-area { font-size: 13px; color: var(--ink-3); }
.rel-body { margin-top: 6px; }
.rel-body ul, .faq-answer ul { margin: 6px 0 0; padding-left: 20px; }
.rel-body li, .faq-answer li { font-size: 15px; line-height: 1.6; color: var(--ink-2); margin-bottom: 4px; }
.rel-body code, .faq-answer code { font-family: var(--font-mono); font-size: .88em; }
.rel-body a, .faq-answer a, .rel-summary a { color: var(--green-dark); text-decoration: underline; text-underline-offset: 2px; }
.rel-ref { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); margin-top: 6px; }
.rel-none { padding: 20px 0; }

/* the entry types: a word on a tint, never colour alone */
.tag { display: inline-block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
       font-weight: 600; border-radius: 5px; padding: 2px 7px; border: 1px solid transparent; white-space: nowrap; }
.tag-new { background: var(--green-tint); color: var(--green-deep); border-color: #cfe2b6; }
.tag-improved { background: #e8f1fc; color: #1c5cab; border-color: #c7dbf5; }
.tag-fixed { background: #fdf3dc; color: #7a5200; border-color: #f2dca6; }
.tag-changed { background: var(--surface-2); color: var(--ink-2); border-color: var(--line-2); }
.tag-known { background: #fbeceb; color: #a5312a; border-color: #f2c9c5; }

/* the FAQ */
.faq-wrap { max-width: 860px; }
.faq-tools { margin-bottom: 26px; }
.faq-group { margin-bottom: 36px; }
.faq-answer p { margin-bottom: 10px; }

@media (max-width: 1040px) {
  .ftr-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 900px) {
  .dl-grid { grid-template-columns: 1fr; }
  .rel-wrap { grid-template-columns: 1fr; }
  .rel-index { position: static; flex-direction: row; flex-wrap: wrap; gap: 4px 14px; }
  .rel-index a { border-left: 0; padding: 2px 0; }
  .rel { padding: 20px; }
  .rel-search { min-width: 0; width: 100%; }
}
@media (max-width: 560px) {
  .ftr-grid { grid-template-columns: 1fr; }
}

/* the review of 2026-10-10: [hidden] always hides (a display rule must never show a row site.js has not wired), and a
   "will appear here shortly" note spans the update log's two columns */
[hidden] { display: none !important; }
.rel-wrap > .note { grid-column: 1 / -1; }

/* 2026-10-10, the owner's mark-up of the download page: "For Cinema 4D 2024" on one line, the version in blue; the
   file name small under the button; the checksums small, in the step that uses them */
.dl-host { font-size: clamp(26px, 2.6vw, 34px); letter-spacing: -.022em; line-height: 1.15; }
.dl-ver { color: #1c5cab; }
.dl-file { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); margin-top: -6px; overflow-wrap: anywhere; }
.sha-line { display: block; font-size: 12px; margin-top: 4px; }
.sha-line .hash { font-size: 11px; }

/* 2026-10-10, the owner: "the warning about the browser [must be] visible where the downloads buttons are". The
   downloads left, compact rows stacked under the licence box; the browser's warning right, beside them, amber; on a
   phone the warning follows the buttons directly. */
.dl-endnote { max-width: 1140px; }
.dl-layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 28px; align-items: start; max-width: 1140px; }
.dl-list { display: grid; gap: 12px; }
.dl-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 20px;
          background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); }
.dl-row .dl-host { font-size: clamp(21px, 2vw, 25px); }
.dl-row .dl-file { margin-top: 4px; }
.dl-row .btn { flex: none; }
.dl-warn { background: #fdf6e0; border: 1px solid #f0dfa8; border-left: 3px solid #d9a300; border-radius: 0 var(--r-lg) var(--r-lg) 0;
           padding: 20px 22px; }
.dl-warn-title { display: flex; align-items: center; gap: 10px; font-size: 17px; letter-spacing: -.012em; margin-bottom: 10px; }
.dl-warn-ico { width: 22px; height: 22px; flex: none; fill: #b07f00; }
.dl-warn > .small { margin-bottom: 10px; }
.dl-steps li { font-size: 14.5px; margin-bottom: 6px; }
.dl-check { margin-top: 10px; border-top: 1px solid #f0dfa8; padding-top: 10px; }
.dl-check summary { cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--ink-2); }
.dl-check .small { margin: 8px 0 4px; }
@media (max-width: 900px) {
  .dl-layout { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .dl-row { flex-direction: column; align-items: stretch; }
}